diff --git a/files/es/conflicting/glossary/flexbox/index.md b/files/es/conflicting/glossary/flexbox/index.md
index 3fcc63ee8383ad..bae042fe87837a 100644
--- a/files/es/conflicting/glossary/flexbox/index.md
+++ b/files/es/conflicting/glossary/flexbox/index.md
@@ -78,7 +78,8 @@ Si usa `display: table-cell` en un elemento en su HTML, toma el estilo de una ce
 
 Si luego declara `display: flex` en el elemento principal, estos cuadros anónimos no se crean y, por lo tanto, su elemento sigue siendo un elemento secundario directo y puede convertirse en un elemento flexible, perdiendo cualquiera de las funciones de visualización de la tabla.
 
-> **Nota:** algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original. Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima. Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- [4. Elementos Flexibles](https://www.w3.org/TR/css-flexbox-1/#flex-items)
+> [!NOTE]
+> Algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original. Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima. Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- [4. Elementos Flexibles](https://www.w3.org/TR/css-flexbox-1/#flex-items)
 
 {{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}
 
diff --git a/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.md b/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.md
index 718dd0cb572cf3..5c278218c4003b 100644
--- a/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.md
@@ -46,7 +46,8 @@ En este caso nosotros no queremos personas genericas — queremos docentes y est
 
 Esto es realmente útil, los profesores y los estudiantes comparten muchas características comunes como el nombre, el género y la edad, por lo que es conveniente tener que definir esas características solo una vez. También puedes definir la misma característica por separado en diferentes clases, ya que cada definición de esa característica estará en un espacio de nombres diferente. Por ejemplo, el saludo de un estudiante puede tener la forma "Yo, soy \[Nombre]" (por ejemplo, Yo, soy Sam), mientras que un profesor puede usar algo más formal, como "Hola, mi nombre es \[Prefix] \[lastName], y enseño \[Asunto] ". (Por ejemplo, Hola, mi nombre es Sr. Griffiths, y yo enseño Química).
 
-> **Nota:** la palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es **polimorfismo.** Por si acaso te preguntabas.
+> [!NOTE]
+> La palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es **polimorfismo.** Por si acaso te preguntabas.
 
 Ahora puedes crear instancias de objetos de las clases "hijo". Por ejemplo:
 
@@ -60,7 +61,8 @@ Algunas personas sostienen que JavaScript no es un verdadero lenguaje orientado
 
 Cuando se crea una nueva instancia del objeto a partir de una función constructora, su funcionalidad central (tal como se define en su prototipo, que exploraremos en el [artículo Prototipos](/es/docs/Learn/JavaScript/Objects/Object_prototypes) de objetos) no se copia en el nuevo objeto como lenguajes OO "clásicos", sino que la funcionalidad está vinculada a través de una cadena de referencia llamada cadena prototipo. Así que esto no es una verdadera instanciación, estrictamente hablando, JavaScript usa un mecanismo diferente para compartir funcionalidad entre objetos.
 
-> **Nota:** no ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello.
+> [!NOTE]
+> No ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello.
 
 Exploremos la creación de clases a través de constructores y la creación de instancias de objetos a partir de ellas en JavaScript. En primer lugar, nos gustaría que hicieras una nueva copia local del archivo `oojs.html` que vimos en nuestro primer artículo de Objetos.
 
@@ -102,7 +104,8 @@ Exploremos la creación de clases a través de constructores y la creación de i
 
 La función constructora es la versión de JavaScript de una clase. Notarás que tiene todas las características que esperas en una función, aunque no devuelve nada o crea explícitamente un objeto — básicamente sólo define propiedades y métodos. Verás que la palabra clave `this` se está usando aquí también — es básicamente decir que cuando se crea una de estas instancias de objeto, la propiedad `name` del objeto será igual al valor del nombre pasado a la llamada del constructor, y el método `greeting()` usará también el valor del nombre pasado a la llamada del constructor.
 
-> **Nota:** Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código.
+> [!NOTE]
+> Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código.
 
 Entonces, ¿cómo llamamos a un constructor para crear algunos objetos?
 
@@ -201,7 +204,8 @@ person1.bio()
 // etc.
 ```
 
-> **Nota:** Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve [oojs-class-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html) (también lo puedes ver [corriendo en vivo](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html)).
+> [!NOTE]
+> Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve [oojs-class-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html) (también lo puedes ver [corriendo en vivo](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html)).
 
 ### Ejercicios adicionales
 
@@ -209,7 +213,8 @@ Para empezar, intenta añadir un par de líneas de creación de objetos propias,
 
 Además, hay un par de problemas con nuestro método `bio()` — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y `bio` solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo `interests`. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses.
 
-> **Nota:** Si estás atascado, hay una [respuesta en nuestro repositorio de GitHub](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([see it live](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) — igualmente ¡intentea resolverla primero!
+> [!NOTE]
+> Si estás atascado, hay una [respuesta en nuestro repositorio de GitHub](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([see it live](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) — igualmente ¡intentea resolverla primero!
 
 ## Otras formas de crear instancias de objetos
 
diff --git a/files/es/conflicting/web/accessibility/aria/index.md b/files/es/conflicting/web/accessibility/aria/index.md
index 11c65a6ac559c0..1c16d7d28d93d9 100644
--- a/files/es/conflicting/web/accessibility/aria/index.md
+++ b/files/es/conflicting/web/accessibility/aria/index.md
@@ -134,4 +134,5 @@ En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla
 - P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?
   - : R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general.
 
-> **Advertencia:** Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
+> [!WARNING]
+> Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
diff --git a/files/es/conflicting/web/accessibility/aria_64707ba1917a56654679cbe273e2f4ea/index.md b/files/es/conflicting/web/accessibility/aria_64707ba1917a56654679cbe273e2f4ea/index.md
index 9452c2c5a475bd..20a60860770959 100644
--- a/files/es/conflicting/web/accessibility/aria_64707ba1917a56654679cbe273e2f4ea/index.md
+++ b/files/es/conflicting/web/accessibility/aria_64707ba1917a56654679cbe273e2f4ea/index.md
@@ -64,11 +64,13 @@ El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es desc
 <div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div>
 ```
 
-> **Nota:** El atributo `aria-describedby` es utilizado para otros própositos además de los controles de formularios.
+> [!NOTE]
+> El atributo `aria-describedby` es utilizado para otros própositos además de los controles de formularios.
 
 ## Campos requeridos e inválidos
 
-> **Nota:** Ahora que `required` esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo `required` y `aria-required`.
+> [!NOTE]
+> Ahora que `required` esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo `required` y `aria-required`.
 
 Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:
 
diff --git a/files/es/conflicting/web/api/element/click_event/index.md b/files/es/conflicting/web/api/element/click_event/index.md
index 389eb37b7a2d15..7118a34263e601 100644
--- a/files/es/conflicting/web/api/element/click_event/index.md
+++ b/files/es/conflicting/web/api/element/click_event/index.md
@@ -8,7 +8,8 @@ original_slug: Web/API/GlobalEventHandlers/onclick
 
 La propiedad **onclick** devuelve el manejador del evento `click` del elemento actual.
 
-> **Nota:** Cuando uses el evento `click` para ejecutar algo, considera agregar la misma acción al evento `keydown`, para permitirle el uso a personas que no usan mouse o pantalla táctil.
+> [!NOTE]
+> Cuando uses el evento `click` para ejecutar algo, considera agregar la misma acción al evento `keydown`, para permitirle el uso a personas que no usan mouse o pantalla táctil.
 
 ## Sintaxis
 
diff --git a/files/es/conflicting/web/api/fetch_api/using_fetch/index.md b/files/es/conflicting/web/api/fetch_api/using_fetch/index.md
index f66feea8981e06..b2d1f828213bd9 100644
--- a/files/es/conflicting/web/api/fetch_api/using_fetch/index.md
+++ b/files/es/conflicting/web/api/fetch_api/using_fetch/index.md
@@ -8,7 +8,8 @@ original_slug: Web/API/Fetch_API/Basic_concepts
 
 La [API Fetch](/es/docs/Web/API/Fetch_API) proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.
 
-> **Nota:** Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el [foro de discusión de MDN](https://discourse.mozilla-community.org/c/mdn), o [Mozilla IRC](https://wiki.mozilla.org/IRC) (#mdn room.)
+> [!NOTE]
+> Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el [foro de discusión de MDN](https://discourse.mozilla-community.org/c/mdn), o [Mozilla IRC](https://wiki.mozilla.org/IRC) (#mdn room.)
 
 ## En pocas palabras
 
diff --git a/files/es/conflicting/web/api/webrtc_api/index.md b/files/es/conflicting/web/api/webrtc_api/index.md
index de4ac70e03351a..87e061b17a7d41 100644
--- a/files/es/conflicting/web/api/webrtc_api/index.md
+++ b/files/es/conflicting/web/api/webrtc_api/index.md
@@ -12,7 +12,8 @@ Las fuentes primarias de las especificaciones para WebRTC (en constante **evoluc
 
 Gran parte de la implementación en Chrome y Firefox está basada en código que fue abierto por Google en [webrtc.org](http://www.webrtc.org/reference).
 
-> **Nota:** Las versiones actuales de FlashBlock pueden bloquear elementos HTML5 \<video>. Si es así, dile que permita el contenido en la página, o deshabilita esa opción vía Herramientas/Add-ons.
+> [!NOTE]
+> Las versiones actuales de FlashBlock pueden bloquear elementos HTML5 \<video>. Si es así, dile que permita el contenido en la página, o deshabilita esa opción vía Herramientas/Add-ons.
 
 Hay un buen tutorial en las características básicas de WebRTC en [HTML5 Rocks](http://www.html5rocks.com/en/tutorials/webrtc/basics/). Una colección de páginas de pruebas básicas para soportar el desarrollo existe en [webrtc-landing](http://mozilla.github.com/webrtc-landing).
 
diff --git a/files/es/conflicting/web/css/css_fonts/index.md b/files/es/conflicting/web/css/css_fonts/index.md
index a5bfc6dede1034..b78d7715c4b442 100644
--- a/files/es/conflicting/web/css/css_fonts/index.md
+++ b/files/es/conflicting/web/css/css_fonts/index.md
@@ -146,7 +146,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/conflicting/web/html/global_attributes/contenteditable/index.md b/files/es/conflicting/web/html/global_attributes/contenteditable/index.md
index 116db851a62fdc..18e4f0317df0bd 100644
--- a/files/es/conflicting/web/html/global_attributes/contenteditable/index.md
+++ b/files/es/conflicting/web/html/global_attributes/contenteditable/index.md
@@ -34,7 +34,8 @@ Afortunadamente, en los navegadores modernos las cosas son un poco más consiste
 
 Pruebalo en el ejemplo de abajo.
 
-> **Nota:** Internet Explorer ya no se está desarrollando y usa {{htmlelement("p")}}.
+> [!NOTE]
+> Internet Explorer ya no se está desarrollando y usa {{htmlelement("p")}}.
 
 Si quieres utilizar un separador de párrafo diferente, todos los navegadores arriba mencionados soportan {{domxref("document.execCommand")}}, el cual provee un DefaultParagraphSeparator comando que te premite cambiarlo. Por ejemplo, para usar {{htmlelement("p")}} elements:
 
@@ -208,7 +209,8 @@ img.intLink { border: 0; }
 </html>
 ```
 
-> **Nota:** si quieres ver cómo estandarizar la creación y la inserción de tu editor en tu página, puedes ver nuestro [más completo ejemplo de editor de texto enriquecido](rich-text-editor.zip).
+> [!NOTE]
+> Si quieres ver cómo estandarizar la creación y la inserción de tu editor en tu página, puedes ver nuestro [más completo ejemplo de editor de texto enriquecido](rich-text-editor.zip).
 
 ## Véase también
 
diff --git a/files/es/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/es/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md
index 1a7257179e78b2..c720221a036b7f 100644
--- a/files/es/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/es/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -25,7 +25,8 @@ En los lenguajes basados en clases defines una clase en una _definición de clas
 
 JavaScript sigue un modelo similar, pero sin tener la definición de clase separada del constructor. En su lugar, se define una función constructor para crear objetos con un conjunto inicial de propiedades y valores. Cualquier función JavaScript puede utilizarse como constructor. Se utiliza el operador `new` con una función constructor para crear un nuevo objeto.
 
-> **Nota:** Nota que ECMAScript 2015 introduce la [declaración de clases](/es/docs/Web/JavaScript/Reference/Classes):
+> [!NOTE]
+> Nota que ECMAScript 2015 introduce la [declaración de clases](/es/docs/Web/JavaScript/Reference/Classes):
 >
 > > Las Clases en JavaScript, introducidas en ECMAScript 2015, son básicamente un retoque sintáctico sobre la herencia basada en prototipos de JavaScript. La sintaxis _class_ no introduce un nuevo modelo de herencia orientado a objetos en Javascript.
 
@@ -177,7 +178,8 @@ public class Engineer extends WorkerBee {
 
 Usando estas definiciones puedes crear instancias de estos objetos, que adquieren valores por defecto para sus propiedades. La figura 8.3 revela el uso de estas definiciones JavaScript para crear nuevos objetos y muestra los valores de las propiedades de estos nuevos objetos.
 
-> **Nota:** El termino **instancia** tiene un significado técnico específico en lenguajes basados en clases, donde una instancia es un ejemplar individual de una clase y es fundamentalmente diferente a la clase. En JavaScript, "instancia" no tiene este mismo significado ya que JavaScript no hace diferencia entre clases e instancias. Sin embargo, al hablar de JavaScript, "instancia" puede ser usado informalmente para indicar que un objeto ha sido creado usando una función constructora particular. En este ejemplo, puedes decir que `jane` es una instancia de `Engineer`. De la misma manera, aunque los términos _parent_, _child_, _ancestor_, y _descendant_ no tienen un significado formal en JavaScript; puedes usarlos informalmente para referirte a objetos que están por encima o por debajo de la cadena de prototipos.
+> [!NOTE]
+> El termino **instancia** tiene un significado técnico específico en lenguajes basados en clases, donde una instancia es un ejemplar individual de una clase y es fundamentalmente diferente a la clase. En JavaScript, "instancia" no tiene este mismo significado ya que JavaScript no hace diferencia entre clases e instancias. Sin embargo, al hablar de JavaScript, "instancia" puede ser usado informalmente para indicar que un objeto ha sido creado usando una función constructora particular. En este ejemplo, puedes decir que `jane` es una instancia de `Engineer`. De la misma manera, aunque los términos _parent_, _child_, _ancestor_, y _descendant_ no tienen un significado formal en JavaScript; puedes usarlos informalmente para referirte a objetos que están por encima o por debajo de la cadena de prototipos.
 
 ### Creando objetos con definiciones simples
 
@@ -337,7 +339,8 @@ this.name = name || "";
 
 El operador lógico OR de JavaScript (`||`) evalúa su primer argumento. Si dicho argumento se convierte a true, el operador lo devuelve. Si no, el operador devuelve el valor del segundo argumento. Por tanto, esta linea de código comprueba si `name` tiene un valor útil para la propiedad `name`, en cuyo caso asigna a `this.name` este valor. En caso contrario asigna a `this.name` el string vacío. Este capitulo emplea este uso idiomático por abreviación. Sin embargo puede resultar chocante a primera vista.
 
-> **Nota:** Esto puede no resultar según lo esperado si la función _constructor_ es llamada con argumentos que se convierten a `false` (como `0` (cero) y una cadena vacía (`""`). En este caso el valor por defecto resulta elegido en lugar del valor proporcionado en la llamada al constructor.
+> [!NOTE]
+> Esto puede no resultar según lo esperado si la función _constructor_ es llamada con argumentos que se convierten a `false` (como `0` (cero) y una cadena vacía (`""`). En este caso el valor por defecto resulta elegido en lugar del valor proporcionado en la llamada al constructor.
 
 Con estas definiciones, cuando creas una instancia de un objeto, puedes especificar valores para las propiedades definidas localmente. Tal como se muestra en [Figura 8.5](#8.5), puedes utilizar la siguiente sentencia para crear un nuevo `Engineer`:
 
@@ -555,7 +558,8 @@ function instanceOf(object, constructor) {
 }
 ```
 
-> **Nota:** La implementación anterior compara el tipo del objeto con "xml" para soslayar un pequeño problema sobre como se representan los objetos XML en las versiones recientes de JavaScript. Ver [Error 634150 en Firefox](https://bugzil.la/634150) para entender los detalles.
+> [!NOTE]
+> La implementación anterior compara el tipo del objeto con "xml" para soslayar un pequeño problema sobre como se representan los objetos XML en las versiones recientes de JavaScript. Ver [Error 634150 en Firefox](https://bugzil.la/634150) para entender los detalles.
 
 Usando esta función `instanceOf` estas expresiones son todas `true`:
 
diff --git a/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md b/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md
index 74e78030a53090..481acb7da63b04 100644
--- a/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md
+++ b/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md
@@ -40,7 +40,8 @@ var foo = "El bar de Tom's";
 var foo = 'El bar de Tom\'s';
 ```
 
-> **Nota:** Este error suele pasar frecuentemene con cadenas del idioma Inglés
+> [!NOTE]
+> Este error suele pasar frecuentemene con cadenas del idioma Inglés
 
 ### Declarar propiedades con var
 
diff --git a/files/es/conflicting/web/javascript/reference/global_objects/error/tostring/index.md b/files/es/conflicting/web/javascript/reference/global_objects/error/tostring/index.md
index 76628482b3a54d..dbdd6fd277dde9 100644
--- a/files/es/conflicting/web/javascript/reference/global_objects/error/tostring/index.md
+++ b/files/es/conflicting/web/javascript/reference/global_objects/error/tostring/index.md
@@ -30,7 +30,8 @@ Llamar al método `toSource` de una instancia {{JSxRef("Error")}} (incluido {{JS
 
 donde estos atributos corresponden a las propiedades respectivas de la instancia de `error`.
 
-> **Nota:** Ten en cuenta que las propiedades utilizadas por el método `toSource` en la creación de esta cadena son mutables y es posible que no reflejen con precisión la función utilizada para crear una instancia de `error` o el nombre de archivo o número de línea donde ocurrió un error real.
+> [!NOTE]
+> Ten en cuenta que las propiedades utilizadas por el método `toSource` en la creación de esta cadena son mutables y es posible que no reflejen con precisión la función utilizada para crear una instancia de `error` o el nombre de archivo o número de línea donde ocurrió un error real.
 
 ## Ve también
 
diff --git a/files/es/conflicting/webassembly/javascript_interface/index.md b/files/es/conflicting/webassembly/javascript_interface/index.md
index b38622d3e32b4a..fe4dc8bfb8c52f 100644
--- a/files/es/conflicting/webassembly/javascript_interface/index.md
+++ b/files/es/conflicting/webassembly/javascript_interface/index.md
@@ -70,7 +70,8 @@ fetch('simple.wasm').then(response =>
 );
 ```
 
-> **Nota:** Ver [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) en GitHub ([view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/)) para un ejemplo que hace uso de la función [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1).
+> [!NOTE]
+> Ver [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) en GitHub ([view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/)) para un ejemplo que hace uso de la función [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1).
 
 ## Ver también
 
diff --git a/files/es/games/anatomy/index.md b/files/es/games/anatomy/index.md
index e5572198ad2542..beaec9f54bc492 100644
--- a/files/es/games/anatomy/index.md
+++ b/files/es/games/anatomy/index.md
@@ -39,7 +39,8 @@ window.main = () => {
 main(); // Iniciar el ciclo
 ```
 
-> **Nota:** En cada uno de los métodos `main()` discutidos aquí, programamos un nuevo `requestAnimationFrame` antes de realizar el contenido de nuestro bucle. Esto no es accidental y se considera la mejor práctica. Llamar al siguiente `requestAnimationFrame` antes de tiempo asegura que el navegador lo recibe a tiempo para planificar en consecuencia incluso si tu frame actual pierde su ventana VSync.
+> [!NOTE]
+> En cada uno de los métodos `main()` discutidos aquí, programamos un nuevo `requestAnimationFrame` antes de realizar el contenido de nuestro bucle. Esto no es accidental y se considera la mejor práctica. Llamar al siguiente `requestAnimationFrame` antes de tiempo asegura que el navegador lo recibe a tiempo para planificar en consecuencia incluso si tu frame actual pierde su ventana VSync.
 
 El fragmento de código anterior tiene dos sentencias. La primera crea una función como variable global llamada `main()`. Esta función hace algo de trabajo y también le dice al navegador que se llame a sí mismo al siguiente frame con `window.requestAnimationFrame()`. La segunda sentencia llama a la función `main()`, definida en la primera sentencia. Debido a que `main()` es llamada una vez en la segunda sentencia y cada llamada se coloca en la cola de cosas a hacer en el siguiente frame, `main()` está sincronizada con tu tasa de frames.
 
@@ -77,7 +78,8 @@ Hay dos problemas obvios con nuestro bucle principal anterior: `main()` contamin
 
 Cuando el navegador se encuentre con este IIFE, definirá tu bucle principal e inmediatamente lo pondrá en cola para el siguiente frame. No se adjuntará a ningún objeto y `main` (o `main()` para métodos) será un nombre válido sin usar en el resto de la aplicación, libre para ser definido como otra cosa.
 
-> **Nota:** En la práctica, es más común prevenir la siguiente `requestAnimationFrame()` con una sentencia `if`, en lugar de llamar a `cancelAnimationFrame()`.
+> [!NOTE]
+> En la práctica, es más común prevenir la siguiente `requestAnimationFrame()` con una sentencia `if`, en lugar de llamar a `cancelAnimationFrame()`.
 
 Para el segundo problema, detener el bucle principal, tendrá que cancelar la llamada a `main()` con `{{ domxref("window.cancelAnimationFrame()") }}`. Usted tendrá que pasar `cancelAnimationFrame()` el ID token dado por `requestAnimationFrame()` cuando fue llamado por última vez. Supongamos que las funciones y variables de tu juego están construidas sobre un espacio de nombres que has llamado `MiJuego`. Ampliando nuestro último ejemplo, el bucle principal ahora se vería así:
 
@@ -128,7 +130,8 @@ Puedes pensar en el desarrollo de aplicaciones en tiempo real como si tuvieras u
 
 Ya que estamos en el tema de presupuestar el tiempo, muchos navegadores web tienen una herramienta llamada _High Resolution Time_. El objeto {{jsxref("Date")}} ya no es el método reconocido para cronometrar eventos porque es muy impreciso y puede ser modificado por el reloj del sistema. _High Resolution Time_, por otro lado, cuenta el número de milisegundos desde `navigationStart` (cuando se descarga el documento anterior). Este valor se devuelve como un número decimal con una precisión de una milésima de milisegundo. Se conoce como {{ domxref("DOMHighResTimeStamp") }} pero, a todos los efectos, considérelo un número de coma flotante.
 
-> **Nota:** Los sistemas (hardware o software) que no son capaces de precisión de microsegundos se les permite proporcionar precisión de milisegundos como mínimo. Sin embargo, deben proporcionar una precisión de 0,001 ms si son capaces de ello.
+> [!NOTE]
+> Los sistemas (hardware o software) que no son capaces de precisión de microsegundos se les permite proporcionar precisión de milisegundos como mínimo. Sin embargo, deben proporcionar una precisión de 0,001 ms si son capaces de ello.
 
 Este valor no es demasiado útil por sí solo, ya que es relativo a un evento bastante poco interesante, pero puede restarse de otra marca de tiempo para determinar con exactitud y precisión cuánto tiempo transcurrió entre esos dos puntos. Para adquirir una de estas marcas de tiempo, puede llamar a `window.performance.now()` y almacenar el resultado como una variable.
 
@@ -169,7 +172,8 @@ Hay otras optimizaciones posibles y todo depende de lo que intente conseguir tu
 
 Tendrás que tomar decisiones difíciles sobre tu bucle principal: cómo simular el progreso preciso del tiempo. Si usted exige un control por fotograma, entonces tendrá que determinar la frecuencia con la que su juego se actualizará y dibujará. Incluso es posible que desee que la actualización y el dibujo se produzcan a diferentes velocidades. También tendrás que considerar cómo de elegante fallará tu juego si el sistema del usuario no puede mantener la carga de trabajo. Empecemos asumiendo que manejarás la entrada del usuario y actualizarás el estado del juego cada vez que dibujes. Más adelante nos extenderemos.
 
-> **Nota:** Cambiar cómo tu bucle principal trata el tiempo es una pesadilla de depuración, en todas partes. Piense en sus necesidades cuidadosamente antes de trabajar en su bucle principal.
+> [!NOTE]
+> Cambiar cómo tu bucle principal trata el tiempo es una pesadilla de depuración, en todas partes. Piense en sus necesidades cuidadosamente antes de trabajar en su bucle principal.
 
 ### Cómo deberían ser la mayoría de los juegos de navegador
 
@@ -237,7 +241,8 @@ Cada uno de estos métodos tiene ventajas y desventajas similares:
 
 Un método separado de actualización y dibujo podría parecerse al siguiente ejemplo. En aras de la demostración, el ejemplo se basa en el tercer punto, pero sin utilizar Web Workers para facilitar la lectura (y, seamos sinceros, la escritura).
 
-> **Advertencia:** Este ejemplo, en concreto, necesita una revisión técnica.
+> [!WARNING]
+> Este ejemplo, en concreto, necesita una revisión técnica.
 
 <!-- prettier-ignore-start -->
 ```js
diff --git a/files/es/games/index.md b/files/es/games/index.md
index 05817069646a28..3e44b9b5ef44e6 100644
--- a/files/es/games/index.md
+++ b/files/es/games/index.md
@@ -45,4 +45,5 @@ Jugar es una de las actividades más populares en las computadoras. Constantemen
 - [Monster Madness](https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/)
   - : Un juego en línea multijugador _shooter_ basado en WebGL y asm.js, desarrollado por Nom Nom Games y Trendy entertainment.
 
-> **Nota:** Tenga en cuenta que estamos manteniendo un registro de los trabajos en curso sobre la documentación en nuesta **página** [Estado de la Documentación de Desarrollo de Videojuegos](/es/docs/Games/Doc_Status). Si quieres ayudar a contribuir para la documentación de desarrollo de videojuegos, **por favor, ¡busque en esta página para ver qué trabajo necesita hacerse!.**
+> [!NOTE]
+> Tenga en cuenta que estamos manteniendo un registro de los trabajos en curso sobre la documentación en nuesta **página** [Estado de la Documentación de Desarrollo de Videojuegos](/es/docs/Games/Doc_Status). Si quieres ayudar a contribuir para la documentación de desarrollo de videojuegos, **por favor, ¡busque en esta página para ver qué trabajo necesita hacerse!.**
diff --git a/files/es/games/publishing_games/game_distribution/index.md b/files/es/games/publishing_games/game_distribution/index.md
index 5c7779f6513517..efc578727ea1fc 100644
--- a/files/es/games/publishing_games/game_distribution/index.md
+++ b/files/es/games/publishing_games/game_distribution/index.md
@@ -65,7 +65,8 @@ También puedes subir y publicar tu juego directamente en diferentes tipos de ti
 
 Veamos cuáles son las opciones disponibles con respecto a los mercados/tiendas disponibles para diferentes plataformas y sistemas operativos.
 
-> **Nota:** Estas son las plataformas de distribución más populares, pero esto no quiere decir que sean la única opción. En lugar de intentar sumar tu juego a los miles de otros en la tienda de iOS, también puedes intentar encontrar un nicho y promocionar directamente al público que esté interesado en tus juegos. Tu creatividad es crítica aquí.
+> [!NOTE]
+> Estas son las plataformas de distribución más populares, pero esto no quiere decir que sean la única opción. En lugar de intentar sumar tu juego a los miles de otros en la tienda de iOS, también puedes intentar encontrar un nicho y promocionar directamente al público que esté interesado en tus juegos. Tu creatividad es crítica aquí.
 
 ### Tiendas web
 
diff --git a/files/es/games/techniques/webrtc_data_channels/index.md b/files/es/games/techniques/webrtc_data_channels/index.md
index fe41796eb486c3..e353ec664c6dc4 100644
--- a/files/es/games/techniques/webrtc_data_channels/index.md
+++ b/files/es/games/techniques/webrtc_data_channels/index.md
@@ -23,4 +23,5 @@ Tenemos [documentación sobre WebRTC](/es/docs/WebRTC). Este artículo, sin emba
 
 Una biblioteca que puede usar es la biblioteca [p2p](https://github.com/js-platform/p2p). Esta biblioteca proporciona una API simple para crear conexiones entre puntos y configurar transmisiones y canales de datos. También hay un componente de servidor intermediario y un agente hospedado que puedes usar en lugar de tener que configurar uno.
 
-> **Nota:** Continuaremos agregando contenido aquí pronto; hay algunos problemas de organización por resolver.
+> [!NOTE]
+> Continuaremos agregando contenido aquí pronto; hay algunos problemas de organización por resolver.
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md
index 7ca315b3abed3e..c4d60e187eaa47 100644
--- a/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md
@@ -58,7 +58,8 @@ Los parámetros del método `button()` son los siguientes:
 - Una referencia a `this` para especificar el contexto de ejecución.
 - Los marcos que usaremos para los eventos _over_, _out_ and _down_.
 
-> **Nota:** El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.
+> [!NOTE]
+> El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.
 
 Ahora necesitamos definir la función `startGame()` referenciada en el siguiente código:
 
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/index.md
index f738dbe58d474d..1b98dad2180938 100644
--- a/files/es/games/tutorials/2d_breakout_game_phaser/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_phaser/index.md
@@ -42,7 +42,8 @@ Como nota sobre las vías de aprendizaje - comenzar con JavaScript puro es la me
 
 Después de eso, puedes elegir cualquier framework que te guste y usarlo para tus proyectos; nosotros hemos elegido Phaser porque es un buen framework sólido, con un buen soporte y comunidad disponible, y un buen conjunto de plugins. Los frameworks aceleran el tiempo de desarrollo y ayudan a ocuparse de las partes aburridas, permitiéndote concentrarte en las cosas divertidas. Sin embargo, los frameworks no siempre son perfectos, así que si sucede algo inesperado o quieres escribir alguna funcionalidad que el framework no proporciona, necesitarás algunos conocimientos de JavaScript puro.
 
-> **Nota:** Esta serie de artículos puede utilizarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basado en este tutorial si quieres dar una charla sobre desarrollo de juegos con Phaser.
+> [!NOTE]
+> Esta serie de artículos puede utilizarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basado en este tutorial si quieres dar una charla sobre desarrollo de juegos con Phaser.
 
 ## Próximos pasos
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
index 5eb3059b6140c5..3cae71830e5160 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
@@ -100,7 +100,8 @@ Chequea el código acabado para esta parte con el tuyo, y juega:
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}
 
-> **Nota:** cambia el color de la bola a un color al azar, cada vez que golpea una pared.
+> [!NOTE]
+> Cambia el color de la bola a un color al azar, cada vez que golpea una pared.
 
 ## Siguientes pasos
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
index e9ad47f4774cc1..4b19c377dfd992 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
@@ -122,7 +122,8 @@ Compara tu código con este:
 
 {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}
 
-> **Nota:** Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).
+> [!NOTE]
+> Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).
 
 ## Pasos siguientes
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
index 76b1a77d96fc41..1d2a6ac51e4e62 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
@@ -127,7 +127,8 @@ Ahora se comprueban las colisiones cada vez que se dibuja un fotograma. Concreta
 
 {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}
 
-> **Nota:** cambia el color de la bola cada vez que choque con un ladrillo.
+> [!NOTE]
+> Cambia el color de la bola cada vez que choque con un ladrillo.
 
 ## Pasos siguientes
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
index 0d404c6facd195..2c6c3b376bcad1 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
@@ -105,7 +105,8 @@ Aquí está el código fuente completo de la primera lección, ejecutándose en
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}
 
-> **Nota:** cambia el tamaño y el color de las figuras.
+> [!NOTE]
+> Cambia el tamaño y el color de las figuras.
 
 ## Pasos siguientes
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
index 6d1e6cdd67cbab..1429008e021b7c 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
@@ -92,7 +92,8 @@ Ya hemos terminado. ¡La versión final del juego está lista para publicar!
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/9temh0ta/","","320")}}
 
-> **Nota:** cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.
+> [!NOTE]
+> Cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.
 
 ## Game over - de momento!
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
index 6a4ba5dba6b95a..85c024a904c4b5 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
@@ -61,7 +61,8 @@ Aquí tienes el código que funciona para que lo compares con el tuyo:
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}
 
-> **Nota:** haz que la bola se mueva más rápida cuando golpea la pala.
+> [!NOTE]
+> Haz que la bola se mueva más rápida cuando golpea la pala.
 
 ## Siguientes pasos
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.md
index e88f702c345c0b..6a0ed90d97c150 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.md
@@ -32,9 +32,11 @@ Todas las lecciones y las diferentes versiones del [famoso juego MDN](http://bre
 
 Empezar con JavaScript puro es la mejor forma de adquirir un conocimiento sólido sobre desarrollo de juegos. Después, puedes escoger cualquier entorno de desarrollo (framework) que te guste y usarlo para tus proyectos. Los frameworks son simplemente herramientas construidas con el lenguaje JavaScript; por tanto aunque planees trabajar con ellas, es bueno aprender primero sobre el mismo lenguaje para saber exactamente qué es lo que hay por debajo. Los frameworks aceleran el tiempo de desarrollo y ayudan a tener en cuenta las partes aburridas del juego, pero si algo no funciona como esperas, siempre puedes intentar depurarlo o simplemente escribir tu solución en JavaScript puro.
 
-> **Nota:** Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una entorno de desarrollo, consulta esta serie homóloga, [famoso juego 2D usando Phaser](/es/docs/Games/Workflows/2D_breakout_game_Phaser).
+> [!NOTE]
+> Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una entorno de desarrollo, consulta esta serie homóloga, [famoso juego 2D usando Phaser](/es/docs/Games/Workflows/2D_breakout_game_Phaser).
 
-> **Nota:** Esta serie de artículos puede usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del [kit de contenido canvas Gamedev](/es/docs/) basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.
+> [!NOTE]
+> Esta serie de artículos puede usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del [kit de contenido canvas Gamedev](/es/docs/) basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.
 
 ## Siguientes pasos
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
index e973d997c299ab..f5df48e51b7070 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
@@ -44,7 +44,8 @@ Aquí tienes el código para comparar:
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/L3gngab5/","","320")}}
 
-> **Nota:** ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).
+> [!NOTE]
+> Ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).
 
 ## Pasos siguientes
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
index 8fbb3e4c762ad8..d5bb779d70be4c 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
@@ -134,7 +134,8 @@ Puedes comprobar el código terminado de este artículo en la demostración en v
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}
 
-> **Nota:** intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.
+> [!NOTE]
+> Intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.
 
 ## Siguientes pasos
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
index f1212360fa2233..f927c4bd29e862 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
@@ -122,7 +122,8 @@ Aquí está el código que funciona, para que lo compares con el tuyo:
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}
 
-> **Nota:** haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.
+> [!NOTE]
+> Haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.
 
 ## Pasos siguientes
 
diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
index a341fa1687dbe0..3b375c153bc715 100644
--- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
+++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
@@ -99,7 +99,8 @@ Puedes comparar tu código con este:
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/mvfkcydz/","","320")}}
 
-> **Nota:** añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.
+> [!NOTE]
+> Añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.
 
 ## Pasos siguientes
 
diff --git a/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
index d6040f0e510b0e..7f92af4e6994b4 100644
--- a/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
+++ b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
@@ -90,7 +90,8 @@ La linea de arriba inicializará la intancia de Phaser — los argumentos son el
 
 Es importante recordar que el _framework_ está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente.
 
-> **Nota:** Puedes leer este artículo: ["Building Monster Wants Candy"](http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) para una introducción en profundidad a las funciones y métodos específicos de Phaser.
+> [!NOTE]
+> Puedes leer este artículo: ["Building Monster Wants Candy"](http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) para una introducción en profundidad a las funciones y métodos específicos de Phaser.
 
 Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado `Boot`:
 
@@ -298,7 +299,8 @@ Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la ve
 
 ![](cyber-orb-flame-orientation.png)
 
-> **Nota:** Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee [Keep it level: responding to device orientation changes](/es/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes).
+> [!NOTE]
+> Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee [Keep it level: responding to device orientation changes](/es/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes).
 
 #### Añadiendo el agujero
 
diff --git a/files/es/glossary/base64/index.md b/files/es/glossary/base64/index.md
index fc6ba4fffdbe1f..40da35fe811aac 100644
--- a/files/es/glossary/base64/index.md
+++ b/files/es/glossary/base64/index.md
@@ -108,7 +108,8 @@ b64EncodeUnicode("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU="
 
 ### Solución 2 – reescribir `atob()` y `btoa()` usando `TypedArray`s y UTF-8
 
-> **Nota:** El siguiente código también es útil para obtener un [ArrayBuffer](/es/docs/Web/JavaScript/Typed_arrays/ArrayBuffer) a partir de una cadena _Base64_ y/o viceversa ([véase abajo](#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer)). **Para una librería completa de arrays tipados, vea [este artículo](/es/docs/Web/JavaScript/Typed_arrays/StringView)**.
+> [!NOTE]
+> El siguiente código también es útil para obtener un [ArrayBuffer](/es/docs/Web/JavaScript/Typed_arrays/ArrayBuffer) a partir de una cadena _Base64_ y/o viceversa ([véase abajo](#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer)). **Para una librería completa de arrays tipados, vea [este artículo](/es/docs/Web/JavaScript/Typed_arrays/StringView)**.
 
 ```js
 "use strict";
@@ -357,7 +358,8 @@ var myBuffer = base64DecToArr(
 alert(myBuffer.byteLength);
 ```
 
-> **Nota:** La función `base64DecToArr(sBase64[, nBlocksSize])` devuelve un [`uint8Array`](/es/docs/Web/JavaScript/Typed_arrays/Uint8Array) de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento `nBlocksSize`, que es el número de bytes de los que la propiedad `uint8Array.buffer.bytesLength` debe devolver un múltiplo (1 u omitido para ASCII, [cadenas binarias](/es/docs/Web/API/DOMString/Binary) o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).
+> [!NOTE]
+> La función `base64DecToArr(sBase64[, nBlocksSize])` devuelve un [`uint8Array`](/es/docs/Web/JavaScript/Typed_arrays/Uint8Array) de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento `nBlocksSize`, que es el número de bytes de los que la propiedad `uint8Array.buffer.bytesLength` debe devolver un múltiplo (1 u omitido para ASCII, [cadenas binarias](/es/docs/Web/API/DOMString/Binary) o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).
 
 Para una librería más completa, véase [`StringView`](/es/docs/Web/JavaScript/Typed_arrays/StringView)[, una representación tipo C de cadenas basadas en arrays tipados](/es/docs/Web/JavaScript/Typed_arrays/StringView).
 
diff --git a/files/es/glossary/call_stack/index.md b/files/es/glossary/call_stack/index.md
index 41aba057817826..fc09857b0aa138 100644
--- a/files/es/glossary/call_stack/index.md
+++ b/files/es/glossary/call_stack/index.md
@@ -35,14 +35,16 @@ El código del ejemplo se ejecutaría de la siguiente manera:
 1. Ignora todas las funciones hasta que alcanza la invocación de la función `saludar()`.
 2. Añade la función `saludar()` a la lista de la pila de llamadas.
 
-   > **Nota:** Lista de la pila de llamadas:
+   > [!NOTE]
+   > Lista de la pila de llamadas:
    > \- saludar
 
 3. Ejecuta todas las líneas de código de dentro de la función `saludar()`.
 4. Llega a la incovación de la función `diHola()`.
 5. Añade la función `diHola()` a la lista de la pila de llamadas.
 
-   > **Nota:** Lista de la pila de llamadas:
+   > [!NOTE]
+   > Lista de la pila de llamadas:
    > \- saludar
    > \- diHola
 
@@ -50,13 +52,15 @@ El código del ejemplo se ejecutaría de la siguiente manera:
 7. Devuelve la ejecución a la línea que invocó a la función `diHola()` y continua con la ejecuación del resto de código de la función `saludar()`.
 8. Elimina la función `diHola()` de la lista de la pila de llamadas.
 
-   > **Nota:** Lista de la pila de llamadas:
+   > [!NOTE]
+   > Lista de la pila de llamadas:
    > \- saludar
 
 9. Cuando todo el código dentro de la función `saludar()` ha sido ejecutado, vuelve a la línea que la invocó y continua ejecutando el resto de código JavaScript.
 10. Elimina la función `saludar()` de la lista de la pila de llamadas.
 
-    > **Nota:** Lista de la pila de llamadas:
+    > [!NOTE]
+    > Lista de la pila de llamadas:
     > VACÍA
 
 En resumen, empezamos con una lista de la pila llamadas vacía. Cuando invocamos una función, ésta es automáticamente añadida a la pila de llamadas. Una vez ha ejecutado todo su código, también de manera automática es eliminada de la pila de llamadas. Finalmente, la pila de llamadas vuelve a estar vacía.
diff --git a/files/es/glossary/entity/index.md b/files/es/glossary/entity/index.md
index 300736916b34ce..11289198d7c633 100644
--- a/files/es/glossary/entity/index.md
+++ b/files/es/glossary/entity/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Entity
 
 Una **entidad** {{glossary("HTML")}} es un conjunto de caracteres ("string") que comienza con un ampersand (`&`) y termina con un punto y coma (`;`) . Las entidades son utilizadas frecuentemente para imprimir en pantalla caracteres reservados (aquellos que serían interpretados como HTML por el navegador) o invisibles (cómo tabulaciones). También pueden usarse para representar caracteres que no existan en algunos teclados, por ejemplo caracterés con tilde o diéresis.
 
-> **Nota:** Muchos caracteres tienen entidades con nombres fáciles de recordar, como las vocales con tilde (`á`) es `&aacute;`, (`é`) es `&eacute;` y así sucesivamente. Otro ejempo es el simbolo de copyright, (`©`) representado por la entidad `&copy;`. Al lidiar con entidades menos representativas de los caracteres que representan, es de gran ayuda utilizar una [tabla de referencia](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references) o un [decodificador](https://mothereff.in/html-entities).
+> [!NOTE]
+> Muchos caracteres tienen entidades con nombres fáciles de recordar, como las vocales con tilde (`á`) es `&aacute;`, (`é`) es `&eacute;` y así sucesivamente. Otro ejempo es el simbolo de copyright, (`©`) representado por la entidad `&copy;`. Al lidiar con entidades menos representativas de los caracteres que representan, es de gran ayuda utilizar una [tabla de referencia](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references) o un [decodificador](https://mothereff.in/html-entities).
 
 ## Caracteres Reservados
 
diff --git a/files/es/glossary/first-class_function/index.md b/files/es/glossary/first-class_function/index.md
index db2dab1d9fea8c..d3e01128bd20fa 100644
--- a/files/es/glossary/first-class_function/index.md
+++ b/files/es/glossary/first-class_function/index.md
@@ -40,7 +40,8 @@ saludar(diHola, "JavaScript!");
 
 Pasamos nuestra función `diHola()` como argumento de la función `saludar()`, esto explica como tratamos la función como un **valor**.
 
-> **Nota:** Una función que pasamos como argumento a otra función, se llama **{{glossary("Callback function")}}**. _`diHola` es una función Callback._
+> [!NOTE]
+> Una función que pasamos como argumento a otra función, se llama **{{glossary("Callback function")}}**. _`diHola` es una función Callback._
 
 ## Ejemplo | Devolver una función
 
@@ -56,7 +57,8 @@ function diHola() {
 
 En este ejemplo; Necesitamos devolver una función desde otra función - _Podemos devolver una función porque JavaScript trata la función como un **value**._
 
-> **Nota:** Una función que devuelve una función se llama **Higher-Order Function**.
+> [!NOTE]
+> Una función que devuelve una función se llama **Higher-Order Function**.
 
 Volviendo al ejemplo; Ahora, necesitamos invocar la función `diHola` y su `Función Anónima` devuelta. Para ello, tenemos dos maneras:
 
@@ -74,7 +76,8 @@ miFuncion();
 
 De esta manera, devolverá el mensaje `¡Hola!`.
 
-> **Nota:** Debes usar otra variable para que devuelve el mensaje. Si invocas `diHola` directamente, devolvera la función en si misma **sin invocar a la función devuelta**.
+> [!NOTE]
+> Debes usar otra variable para que devuelve el mensaje. Si invocas `diHola` directamente, devolvera la función en si misma **sin invocar a la función devuelta**.
 
 ### 2- Usando paréntesis doble
 
diff --git a/files/es/glossary/forbidden_header_name/index.md b/files/es/glossary/forbidden_header_name/index.md
index c377a24c029ded..6b9449ac3770ff 100644
--- a/files/es/glossary/forbidden_header_name/index.md
+++ b/files/es/glossary/forbidden_header_name/index.md
@@ -36,4 +36,5 @@ Los nombres de encabezado prohibidos comienzan con `Proxy-` or `Sec-`, o se comp
 - `Upgrade`
 - `Via`
 
-> **Nota:** El encabezado `User-Agent` ya no está prohibido, [según la especificación](https://fetch.spec.whatwg.org/#terminology-headers) — vea la lista de nombres prohibidos de encabezado (esta fue implementada en Firefox 43), por lo que ahora puede establecerse en un objecto Fetch {{domxref("Headers")}}, a través de XHR {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, etc.
+> [!NOTE]
+> El encabezado `User-Agent` ya no está prohibido, [según la especificación](https://fetch.spec.whatwg.org/#terminology-headers) — vea la lista de nombres prohibidos de encabezado (esta fue implementada en Firefox 43), por lo que ahora puede establecerse en un objecto Fetch {{domxref("Headers")}}, a través de XHR {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, etc.
diff --git a/files/es/glossary/index.md b/files/es/glossary/index.md
index 2239ed9b26457b..e607066a471bbb 100644
--- a/files/es/glossary/index.md
+++ b/files/es/glossary/index.md
@@ -14,4 +14,5 @@ Las tecnologías web contienen largas listas de jerga y abreviaturas que se util
 
 Los términos del glosario se pueden seleccionar en la barra lateral.
 
-> **Nota:** Este glosario es un trabajo en progreso interminable. Puede ayudar a mejorarlo [escribiendo nuevas entradas](/es/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary) o mejorando las existentes.
+> [!NOTE]
+> Este glosario es un trabajo en progreso interminable. Puede ayudar a mejorarlo [escribiendo nuevas entradas](/es/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary) o mejorando las existentes.
diff --git a/files/es/glossary/method/index.md b/files/es/glossary/method/index.md
index 03948717783369..8dc3bbecfce4ce 100644
--- a/files/es/glossary/method/index.md
+++ b/files/es/glossary/method/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Method
 
 Un **metodo** es una {{glossary("function", "función")}} la cual es {{glossary("property", "propiedad")}} de un {{glossary("Objecto", "Objeto")}}. Existen dos tipos de métodos: _Métodos de Instancia_ los cuales son tareas integradas realizadas por la instacia de un objeto, y los _Métodos Estáticos_ que son tareas que pueden ser llamadas directamente en el constructor de un objeto.
 
-> **Nota:** en JavaScript las funciones en si son objetos, asi que, en ese contexto, un método es de hecho un {{glossary("Object Reference", "objeto de referencia")}} a una función.
+> [!NOTE]
+> En JavaScript las funciones en si son objetos, asi que, en ese contexto, un método es de hecho un {{glossary("Object Reference", "objeto de referencia")}} a una función.
 
 ## Aprender más
 
diff --git a/files/es/glossary/vendor_prefix/index.md b/files/es/glossary/vendor_prefix/index.md
index 0477266bf5ea66..dd2d13ead723c8 100644
--- a/files/es/glossary/vendor_prefix/index.md
+++ b/files/es/glossary/vendor_prefix/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Vendor_Prefix
 
 Los proveedores de navegadores a veces agregan prefijos a las propiedades de CSS experimentales o no estándar y las API de JavaScript, por lo que los desarrolladores pueden experimentar con nuevas ideas mientras que, en teoría, evitan que se confíe en sus experimentos y luego rompan el código de los desarrolladores web durante el proceso de estandarización. Los desarrolladores deben esperar para incluir la propiedad sin prefijar hasta que se estandarice el comportamiento del navegador.
 
-> **Nota:** Los proveedores de navegadores están trabajando para dejar de usar los prefijos de proveedores para funciones experimentales. Los desarrolladores web los han estado utilizando en sitios web de producción, a pesar de su naturaleza experimental. Esto ha hecho que sea más difícil para los proveedores de navegadores garantizar la compatibilidad y trabajar en nuevas características; También ha sido perjudicial para los navegadores más pequeños que terminan obligados a agregar prefijos de otros navegadores para cargar sitios web populares.
+> [!NOTE]
+> Los proveedores de navegadores están trabajando para dejar de usar los prefijos de proveedores para funciones experimentales. Los desarrolladores web los han estado utilizando en sitios web de producción, a pesar de su naturaleza experimental. Esto ha hecho que sea más difícil para los proveedores de navegadores garantizar la compatibilidad y trabajar en nuevas características; También ha sido perjudicial para los navegadores más pequeños que terminan obligados a agregar prefijos de otros navegadores para cargar sitios web populares.
 >
 > Últimamente, la tendencia es agregar características experimentales detrás de las banderas o preferencias controladas por el usuario, y crear especificaciones más pequeñas que puedan alcanzar un estado estable mucho más rápidamente.
 
diff --git a/files/es/learn/accessibility/accessibility_troubleshooting/index.md b/files/es/learn/accessibility/accessibility_troubleshooting/index.md
index 3df57ea0509a1a..79d4d3dc90f776 100644
--- a/files/es/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/es/learn/accessibility/accessibility_troubleshooting/index.md
@@ -37,7 +37,8 @@ El sitio de evaluación terminado debe tener este aspecto:
 
 Verá algunas diferencias/problemas con la visualización del estado inicial de la evaluación — esto se debe principalmente a las diferencias en el marcado, que a su vez causan algunos problemas de estilo, ya que el CSS no se aplica correctamente. No se preocupe, ¡estará solucionando estos problemas en las próximas secciones!
 
-> **Nota:** Si se queda atorado, pídanos ayuda — consulta la sección [Evaluación o más ayuda](/es/docs/Learn/Accessibility/Accessibility_troubleshooting#Assessment_or_further_help) en la parte inferior de esta página.
+> [!NOTE]
+> Si se queda atorado, pídanos ayuda — consulta la sección [Evaluación o más ayuda](/es/docs/Learn/Accessibility/Accessibility_troubleshooting#Assessment_or_further_help) en la parte inferior de esta página.
 
 ## Resumen del proyecto
 
@@ -53,7 +54,8 @@ El texto es difícil de leer debido al esquema de color actual. ¿Puede realizar
 2. ¿Puede actualizar el texto del artículo para facilitar la navegación de los usuarios del lector de pantalla?
 3. La parte del menú de navegación del sitio (limitada por `<div class="nav"></div>`) podría ser más accesible poniéndolo en un elemento semántico HTML5 adecuado. ¿A cuál debería actualizarse? Realice la actualización.
 
-> **Nota:** Tendrá que actualizar los selectores de reglas CSS que estilan las etiquetas a sus equivalentes adecuados para los encabezados semánticos. Una vez que agregue elementos de párrafo, notará que el estilo se ve mejor.
+> [!NOTE]
+> Tendrá que actualizar los selectores de reglas CSS que estilan las etiquetas a sus equivalentes adecuados para los encabezados semánticos. Una vez que agregue elementos de párrafo, notará que el estilo se ve mejor.
 
 ### Las imágenes
 
diff --git a/files/es/learn/accessibility/css_and_javascript/index.md b/files/es/learn/accessibility/css_and_javascript/index.md
index 0685aba178786d..6f2e83d10a7b01 100644
--- a/files/es/learn/accessibility/css_and_javascript/index.md
+++ b/files/es/learn/accessibility/css_and_javascript/index.md
@@ -198,7 +198,8 @@ Al elegir un esquema de color para tu sitio web, asegúrate de que el color del
 
 Existe una manera fácil de verificar si el contraste es lo suficientemente grande como para no causar problemas. Hay una serie de herramientas de verificación de contraste en línea en las que puede introduci los colores de primer plano y de fondo para verificarlos. Por ejemplo, el [Comprobador de contraste de color](http://webaim.org/resources/contrastchecker/) de WebAIM es fácil de usar y proporciona una explicación de lo que necesitas para cumplir con los criterios WCAG sobre el contraste de color.
 
-> **Nota:** una relación de contraste alta también permitirá que cualquier persona que utilice un teléfono inteligente o una tableta con una pantalla brillante lea mejor las páginas cuando se encuentre en un entorno brillante, como a la luz del sol.
+> [!NOTE]
+> Una relación de contraste alta también permitirá que cualquier persona que utilice un teléfono inteligente o una tableta con una pantalla brillante lea mejor las páginas cuando se encuentre en un entorno brillante, como a la luz del sol.
 
 Otro consejo es no confiar solo en el color para las señales / información, ya que esto no será bueno para aquellos que no pueden ver el color. En lugar de marcar los campos de formulario obligatorios en rojo, por ejemplo, márcalos con un asterisco y en rojo.
 
@@ -257,7 +258,8 @@ Como ejemplo, hemos escrito un ejemplo rápido y sucio de validación de formula
 
 Este tipo de validación de formulario es no intrusiva: se puede usar el formulario perfectamente aunque JavaScript no esté disponible, y cualquier implementación de formulario razonable también tendrá activa la validación del lado del servidor, porque es demasiado fácil para los usuarios malintencionados eludir la validación del lado del cliente (por ejemplo, desactivando JavaScript en el navegador). La validación del lado del cliente sigue siendo realmente útil para informar de errores: los usuarios pueden saber los errores que cometen al instante, en lugar de tener que esperar un viaje de ida y vuelta al servidor y la recarga de la página. Esta es una clara ventaja de usabilidad.
 
-> **Nota:** la validación del lado del servidor no se ha implementado en esta simple demostración.
+> [!NOTE]
+> La validación del lado del servidor no se ha implementado en esta simple demostración.
 
 También hemos hecho que esta validación de formulario sea bastante accesible. Hemos utilizado elementos {{htmlelement ("label")}} para asegurarnos de que las etiquetas del formulario estén vinculadas de forma inequívoca a sus entradas, de modo que los lectores de pantalla puedan leerlas junto con ellas:
 
@@ -287,7 +289,8 @@ function validate(e) {
 }
 ```
 
-> **Nota:** En este ejemplo estamos ocultando y mostrando el cuadro de mensaje de error utilizando posicionamiento absoluto en lugar de otro método como la visibilidad o la visualización, porque no interfiere con que el lector de pantalla pueda leer su contenido.
+> [!NOTE]
+> En este ejemplo estamos ocultando y mostrando el cuadro de mensaje de error utilizando posicionamiento absoluto en lugar de otro método como la visibilidad o la visualización, porque no interfiere con que el lector de pantalla pueda leer su contenido.
 
 La validación real del formulario sería mucho más compleja que esto: querría verificar que el nombre entrado realmente parezca un nombre, la edad entrada sea realmente un número y sea realista (por ejemplo, no negativa y menor de 4 dígitos). Aquí acabamos de implementar una verificación simple de que se haya completado un valor en cada campo de entrada (`if(testItem.input.value === '')`).
 
@@ -317,7 +320,8 @@ function createLink(testItem) {
 
 Cada enlace tiene un doble propósito: te dice cuál es el error, y además puedes hacer clic en él / activarlo para ir directamente al elemento de entrada en cuestión y corregir la entrada.
 
-> **Nota:** La parte `focus()` de este ejemplo es un poco complicada. Chrome y Edge darán foco al elemento al hacer clic en el enlace, sin necesidad del bloque `onclick` / `focus()`. Safari solo resaltará el elemento de formulario con el enlace por sí solo, por lo que necesita el bloque `onclick` / `focus()` para darle foco. Firefox no da foco a las entradas correctamente en este contexto, por lo que los usuarios de Firefox no pueden aprovechar esto en este momento (aunque todo lo demás funciona bien). El problema de Firefox debería solucionarse pronto; se está trabajando para que el comportamiento de Firefox sea igual al de otros navegadores (consulte [Error 277178 en Firefox](https://bugzil.la/277178)).
+> [!NOTE]
+> La parte `focus()` de este ejemplo es un poco complicada. Chrome y Edge darán foco al elemento al hacer clic en el enlace, sin necesidad del bloque `onclick` / `focus()`. Safari solo resaltará el elemento de formulario con el enlace por sí solo, por lo que necesita el bloque `onclick` / `focus()` para darle foco. Firefox no da foco a las entradas correctamente en este contexto, por lo que los usuarios de Firefox no pueden aprovechar esto en este momento (aunque todo lo demás funciona bien). El problema de Firefox debería solucionarse pronto; se está trabajando para que el comportamiento de Firefox sea igual al de otros navegadores (consulte [Error 277178 en Firefox](https://bugzil.la/277178)).
 
 Además, el `errorField` se coloca en la parte superior del orden de código (aunque se coloca de manera diferente en la interfaz de usuario usando CSS), lo que significa que los usuarios pueden averiguar exactamente qué está mal con los envíos de sus formularios y acceder a los elementos de entrada en cuestión retrocediendo hasta el inicio de la página.
 
@@ -331,7 +335,8 @@ Como nota final, hemos utilizado algunos atributos WAI-ARIA en nuestra demostrac
 
 Explicaremos estos atributos en nuestro próximo artículo, que cubre [WAI-ARIA](/es/docs/Learn/Accessibility/WAI-ARIA_basics) con mucho más detalle.
 
-> **Nota:** Algunos de vosotros probablemente estaréis pensando en el hecho de que los formularios HTML5 tienen mecanismos de validación integrados como los atributos `required`, `min` / `minlength` y `max` / `maxlength` (consultad la referencia del elemento {{htmlelement("input")}} para más información). No los hemos usado en la demostración porque la compatibilidad entre navegadores es irregular (por ejemplo, solo funciona en IE10 y versiones superiores).
+> [!NOTE]
+> Algunos de vosotros probablemente estaréis pensando en el hecho de que los formularios HTML5 tienen mecanismos de validación integrados como los atributos `required`, `min` / `minlength` y `max` / `maxlength` (consultad la referencia del elemento {{htmlelement("input")}} para más información). No los hemos usado en la demostración porque la compatibilidad entre navegadores es irregular (por ejemplo, solo funciona en IE10 y versiones superiores).
 
 > **Nota:** [Usable and Accessible Form Validation and Error Recovery](http://webaim.org/techniques/formvalidation/), de WebAIM, proporciona más información útil sobre la validación de formularios accesibles.
 
diff --git a/files/es/learn/accessibility/html/index.md b/files/es/learn/accessibility/html/index.md
index 6965913541b45c..187ec53b2ee4e1 100644
--- a/files/es/learn/accessibility/html/index.md
+++ b/files/es/learn/accessibility/html/index.md
@@ -57,7 +57,8 @@ No cuesta más tiempo escribir HTML semántico que (mal) marcado no semántico s
 
 Continuemos y veamos el HTML accesible en más detalle.
 
-> **Nota:** Es buena idea tener configurado un lector de pantalla en tu computador, para que puedas hacer algunas pruebas de los siguientes ejemplos. Mira nuestra [Guía de lectores de pantalla](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) para más detalles.
+> [!NOTE]
+> Es buena idea tener configurado un lector de pantalla en tu computador, para que puedas hacer algunas pruebas de los siguientes ejemplos. Mira nuestra [Guía de lectores de pantalla](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) para más detalles.
 
 ## Buena semántica
 
@@ -250,7 +251,8 @@ Si pruebas nuestro ejemplo de estructura más moderna con un lector de pantalla,
 
 Otra consideración al crear diseños es usar elementos semánticos HTML5 como se ve en el ejemplo anterior (ver [secciónado de contenido](/es/docs/Web/HTML/Elemento#Seccionamiento_del_contenido)): puedes crear un diseño usando solo elementos {{htmlelement ("div")}} anidados, pero es mejor usar los elementos de seccionado adecuados para marcar la navegación principal ({{htmlelement ("nav")}}), el pie de página ({{htmlelement ("footer")}}), los bloques de contenido ({{htmlelement ("article")}}), etc. Estos proporcionan semántica adicional para lectores de pantalla (y otras herramientas) para brindar al usuario pistas adicionales sobre el contenido por el que están navegando (consulta [Screen Reader Support for new HTML5 Section Elements](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/) para hacerte una idea de cómo es el soporte de lectores de pantalla).
 
-> **Nota:** Además de tener una buena semántica y un diseño atractivo, tu contenido debería tener sentido lógico en su orden en el código; siempre puedes colocarlo donde desees usando CSS más adelante, pero deberías tener el orden en el código correcto para empezar, para que lo que se lee a los usuarios de lectores de pantalla tenga sentido.
+> [!NOTE]
+> Además de tener una buena semántica y un diseño atractivo, tu contenido debería tener sentido lógico en su orden en el código; siempre puedes colocarlo donde desees usando CSS más adelante, pero deberías tener el orden en el código correcto para empezar, para que lo que se lee a los usuarios de lectores de pantalla tenga sentido.
 
 ### Controles de interfaz de usuario
 
@@ -262,7 +264,8 @@ Un aspecto clave de la accesibilidad de los controles de interfaz de usuario es
 
 Después puedes pulsar <kbd>Enter</kbd> / <kbd>Return</kbd> para seguir un enlace enfocado o pulsar un botón (hemos incluido algo de JavaScript para que los botones lancen un mensaje), o comenzar a escribir para introducir texto en un campo de texto. Otros elementos de formulario tienen diferentes controles; por ejemplo, el elemento {{htmlelement ("select")}} puede mostrar sus opciones y alternar entre usar las teclas de flecha arriba y abajo.
 
-> **Nota:** Diferentes navegadores pueden tener diferentes opciones de control de teclado disponibles. Consulta [Using native keyboard accessibility](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility) para obtener más detalles.
+> [!NOTE]
+> Diferentes navegadores pueden tener diferentes opciones de control de teclado disponibles. Consulta [Using native keyboard accessibility](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility) para obtener más detalles.
 
 Básicamente, obtienes este comportamiento gratis, solo con el uso de los elementos apropiados. Por ejemplo:
 
@@ -379,7 +382,8 @@ y esto es un mal texto de enlace:
 </p>
 ```
 
-> **Nota:** Encontrarás mucho más sobre la implementación de enlaces y buenas prácticas en nuestro artículo [Crear hipervínculos](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks). También encontrarás buenos y malos ejemplos en [good-links.html](http://mdn.github.io/learning-area/accessibility/html/good-links.html) y [bad-links.html](http://mdn.github.io/learning-area/accessibility/html/bad-links.html).
+> [!NOTE]
+> Encontrarás mucho más sobre la implementación de enlaces y buenas prácticas en nuestro artículo [Crear hipervínculos](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks). También encontrarás buenos y malos ejemplos en [good-links.html](http://mdn.github.io/learning-area/accessibility/html/good-links.html) y [bad-links.html](http://mdn.github.io/learning-area/accessibility/html/bad-links.html).
 
 Las etiquetas de formulario también son importantes, para darte una pista sobre lo que necesita introducir en cada campo de formulario. El siguiente parece un ejemplo bastante razonable:
 
@@ -404,7 +408,8 @@ Con código como este, la etiqueta estará claramente asociada con la entrada; l
 
 Como ventaja adicional, en la mayoría de los navegadores asociar una etiqueta con una entrada de formulario significa que puedes hacer clic en la etiqueta para seleccionar / activar el elemento del formulario. Esto le da a la entrada un área de impacto más grande, lo que facilita la selección.
 
-> **Nota:** puedes ver algunos ejemplos de buenos y malos formularios en [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html) y [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html).
+> [!NOTE]
+> Puedes ver algunos ejemplos de buenos y malos formularios en [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html) y [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html).
 
 ## Tablas de datos accesibles
 
@@ -444,7 +449,8 @@ Ahora echa un vistazo a nuestro [ejemplo de tabla de bandas punk](https://github
 
 Consulte nuestro artículo sobre funciones avanzadas y accesibilidad de tablas HTML para obtener más detalles sobre las tablas de datos accesibles.
 
-> **Nota:** Consulta nuestro artículo [Funciones avanzadas de tablas y accesibilidad](/es/docs/Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad) para ver más detalles sobre tablas de datos accesibles.
+> [!NOTE]
+> Consulta nuestro artículo [Funciones avanzadas de tablas y accesibilidad](/es/docs/Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad) para ver más detalles sobre tablas de datos accesibles.
 
 ## Alternativas de texto
 
@@ -474,7 +480,8 @@ Tenemos un ejemplo simple, [access-image.html](http://mdn.github.io/learning-are
 
 La primera imagen, cuando la ve un lector de pantalla, realmente no ofrece mucha ayuda al usuario; VoiceOver, por ejemplo, lee "/dinosaur.png, imagen". Lee el nombre del archivo para intentar proporcionar ayuda. En este ejemplo, el usuario al menos sabrá que es un dinosaurio de algún tipo, pero a menudo los archivos pueden cargarse con nombres de archivo generados por la máquina (por ejemplo, de una cámara digital) y estos nombres de archivo probablemente no proporcionarían contexto al contenido de la imagen.
 
-> **Nota:** Es por eso que nunca debes incluir contenido de texto dentro de una imagen: los lectores de pantalla simplemente no pueden acceder a él. También hay otras desventajas: no puedes seleccionarlo y copiarlo / pegarlo. ¡No lo hagas!
+> [!NOTE]
+> Es por eso que nunca debes incluir contenido de texto dentro de una imagen: los lectores de pantalla simplemente no pueden acceder a él. También hay otras desventajas: no puedes seleccionarlo y copiarlo / pegarlo. ¡No lo hagas!
 
 Cuando un lector de pantalla encuentra la segunda imagen, lee el atributo alt completo: "Un tiranosaurio rex rojo: un dinosaurio de dos patas erguido como un humano, con brazos pequeños y una cabeza grande con muchos dientes afilados".
 
@@ -482,7 +489,8 @@ Esto resalta la importancia de no solo usar nombres de archivo significativos en
 
 Una cosa a considerar es si tus imágenes tienen significado dentro del contenido, o si son puramente para decoración visual, por lo que no tienen significado. Si son decorativas, es mejor incluirlas en la página como imágenes de fondo CSS.
 
-> **Nota:** Lee [Imágenes en HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) y [Responsive images](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) para obtener mucha más información sobre la implementación de imágenes y buenas prácticas asociadas.
+> [!NOTE]
+> Lee [Imágenes en HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) y [Responsive images](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) para obtener mucha más información sobre la implementación de imágenes y buenas prácticas asociadas.
 
 Si deseas proporcionar información contextual adicional, deberías colocarla en el texto que rodea la imagen o dentro de un atributo `title`, como se muestra a continuación. En este caso, la mayoría de los lectores de pantalla leerán el texto alternativo, el atributo del título y el nombre del archivo. Además, los navegadores muestran el texto del título como información cuando se pasa por encima con el ratón.
 
@@ -538,7 +546,8 @@ Puede haber ocasiones en las que se incluya una imagen en el diseño de una pág
 
 La razón para usar un `alt` vacío en lugar de no incluirlo es porque muchos lectores de pantalla anuncian la URL completa de la imagen si no se proporciona un alt. En el ejemplo anterior, la imagen actúa como decoración visual del encabezado al que está asociada. En casos como este, y en los casos en los que una imagen es solo decoración y no tiene valor de contenido, debes poner un alt vacío en tus imágenes. Otra alternativa es usar el atributo de rol aria `role = "presentation"` - esto también evita que los lectores de pantalla lean el texto alternativo.
 
-> **Nota:** si es posible, deberías usar CSS para mostrar imágenes que son solo decoración.
+> [!NOTE]
+> Si es posible, deberías usar CSS para mostrar imágenes que son solo decoración.
 
 ## Más sobre enlaces
 
diff --git a/files/es/learn/accessibility/index.md b/files/es/learn/accessibility/index.md
index a40e5d5e736ffc..690d75dddb4fcf 100644
--- a/files/es/learn/accessibility/index.md
+++ b/files/es/learn/accessibility/index.md
@@ -11,7 +11,8 @@ Aprender algo de HTML, CSS y JavaScript es útil si deseas convertirte en un des
 
 Para aprovechar al máximo este módulo, sería una buena idea trabajar al menos en los dos primeros módulos de los temas de [HTML](/es/docs/Learn/HTML), [CSS](/es/docs/Learn/CSS), y [JavaScript](/es/docs/Learn/JavaScript) o quizás mejor, trabajar en las partes relevantes del módulo de accesibilidad como tu trabajas a través de los temas relacionados con la tecnología.
 
-> **Nota:** si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar la mayoría de los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar la mayoría de los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/accessibility/mobile/index.md b/files/es/learn/accessibility/mobile/index.md
index 7c67332d16066d..68c448aabf60bc 100644
--- a/files/es/learn/accessibility/mobile/index.md
+++ b/files/es/learn/accessibility/mobile/index.md
@@ -53,7 +53,8 @@ El lector de pantalla TalkBack está integrado en el sistema operativo Android.
 
 Para activarlo, seleccione Configuración> Accesibilidad> TalkBack, y luego presione el interruptor deslizante para activarlo. Siga las indicaciones adicionales en pantalla que le presenten.
 
-> **Nota:** las versiones anteriores de TalkBack están activadas de formas [formas ligeramente distintas.](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback)
+> [!NOTE]
+> Las versiones anteriores de TalkBack están activadas de formas [formas ligeramente distintas.](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback)
 
 Cuando TalkBack esté activado, los controles básicos de su dispositivo Android serán un poco diferentes. Por ejemplo:
 
@@ -113,7 +114,8 @@ Por ejemplo, con TalkBack activado:
 7. Pulse dos veces para seleccionarlo. Ahora podrá desplazarse hacia la izquierda y hacia la derecha para moverse entre encabezados y puntos de referencia de ARIA.
 8. Para volver al modo predeterminado, ingrese nuevamente al menú de contexto local deslizando hacia arriba y a la derecha, seleccione "Predeterminado", y luego toque dos veces para activar.
 
-> **Nota:** consulte [Empezar en Android con TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) para obtener una documentación más completa.
+> [!NOTE]
+> Consulte [Empezar en Android con TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) para obtener una documentación más completa.
 
 ### iOS VoiceOver
 
@@ -172,7 +174,8 @@ Vamos a hacer una prueba a navegar con VoiceOver:
 
 7. Seleccionar encabezados. Ahora podrá desplazarse hacia arriba y hacia abajo para moverse entre los encabezados de la página.
 
-> **Nota:** Para obtener una referencia más completa que cubra los gestos de VoiceOver disponibles y otros consejos sobre las pruebas de accesibilidad en iOS, consulte [Probar la accesibilidad en su dispositivo con VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3).
+> [!NOTE]
+> Para obtener una referencia más completa que cubra los gestos de VoiceOver disponibles y otros consejos sobre las pruebas de accesibilidad en iOS, consulte [Probar la accesibilidad en su dispositivo con VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3).
 
 ## Mecanismos de control
 
@@ -209,7 +212,8 @@ panel.ontouchend = stopMove;
 
 Hemos proporcionado un ejemplo sencillo que muestra cómo usar el mouse y los eventos táctiles juntos [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([ver ejemplo en vivo](https://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html)).
 
-> **Nota:** También puede ver ejemplos totalmente funcionales que muestran cómo implementar diferentes mecanismos de control en [Implementando mecanismos de control de juego.](/es/docs/Games/Techniques/Control_mechanisms)
+> [!NOTE]
+> También puede ver ejemplos totalmente funcionales que muestran cómo implementar diferentes mecanismos de control en [Implementando mecanismos de control de juego.](/es/docs/Games/Techniques/Control_mechanisms)
 
 ## Diseño de respuesta
 
@@ -221,7 +225,8 @@ En particular, los problemas más comunes que deben abordarse para dispositivos
 - Conservando tamaños de imagen descargados. En general, los dispositivos de pantalla pequeña no necesitarán imágenes tan grandes como sus contrapartes de escritorio, y es más probable que estén en conexiones de red lentas. Por lo tanto, es aconsejable servir imágenes más pequeñas para dispositivos de pantalla estrecha, según corresponda. Puede manejar esto [técnicas de imagenes de respuesta](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
 - Pensando en altas resoluciones. Muchos dispositivos móviles tienen pantallas de alta resolución y, por lo tanto, necesitan imágenes de mayor resolución para que la pantalla pueda seguir luciendo nítida y nítida. Nuevamente, puede servir imágenes según corresponda utilizando técnicas de imágenes sensibles. Además, muchos requisitos de imagen se pueden cumplir con el formato de imágenes vectoriales SVG, que es compatible con todos los navegadores actuales. SVG tiene un tamaño de archivo pequeño y se mantendrá nítido independientemente del tamaño que se muestre (consulte [Agregar gráficos vectoriales a la web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) para obtener más detalles).
 
-> **Nota:** No proporcionaremos una discusión completa de las técnicas de diseño receptivo aquí, ya que están cubiertas en otros lugares alrededor de MDN (vea los enlaces anteriores).
+> [!NOTE]
+> No proporcionaremos una discusión completa de las técnicas de diseño receptivo aquí, ya que están cubiertas en otros lugares alrededor de MDN (vea los enlaces anteriores).
 
 ### Consideraciones específicas para móviles
 
diff --git a/files/es/learn/accessibility/what_is_accessibility/index.md b/files/es/learn/accessibility/what_is_accessibility/index.md
index b724e4c418b5e1..22e5797847ec7c 100644
--- a/files/es/learn/accessibility/what_is_accessibility/index.md
+++ b/files/es/learn/accessibility/what_is_accessibility/index.md
@@ -42,7 +42,8 @@ Crear sitios web accesibles nos beneficia a todos:
 
 Las personas con discapacidad son tan diversas como las personas sin discapacidad, y también lo son sus discapacidades. La clave está en pensar más allá de tu ordenador y en cómo utilizas la web y empezar a aprender acerca de cómo otros la utilizan. _Tú no eres tus usuarios_. A continuación explicaremos los principales tipos de discapacidad que vamos a considerar, junto con las herramientas especiales que se utilizan para acceder al contenido web (conocidas como **tecnologías de apoyo** o **AT**, de _assistive technologies_).
 
-> **Nota:** La hoja informativa sobre [discapacidad y salud](https://www.who.int/es/news-room/fact-sheets/detail/disability-and-health) de la Organización Mundial de la Salud establece que «Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad» y «Entre 110 millones y 190 millones de adultos tienen dificultades funcionales significativas».
+> [!NOTE]
+> La hoja informativa sobre [discapacidad y salud](https://www.who.int/es/news-room/fact-sheets/detail/disability-and-health) de la Organización Mundial de la Salud establece que «Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad» y «Entre 110 millones y 190 millones de adultos tienen dificultades funcionales significativas».
 
 ### Personas con discapacidad visual
 
@@ -124,7 +125,8 @@ Por otro lado, si trabajas en un sitio web de una galería que muestra obras de
 
 Para demostrar que te importa y que has pensado en la accesibilidad, publica una declaración de accesibilidad en la página web que explique tu política de accesibilidad y los pasos realizados para hacer que el sitio web sea accesible. Si alguien se queja de que tiene un problema de accesibilidad: inicia un diálogo con ellos, se empático y toma las medidas razonables para tratar de solucionar el problema.
 
-> **Nota:** Nuestro artículo sobre [Cómo afrontar los problemas de accesibilidad más comunes](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) expone los detalles de accesibilidad que es necesario tener más en cuenta.
+> [!NOTE]
+> Nuestro artículo sobre [Cómo afrontar los problemas de accesibilidad más comunes](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) expone los detalles de accesibilidad que es necesario tener más en cuenta.
 
 En resumen:
 
diff --git a/files/es/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/es/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
index 7ff39c48fb14dd..79b593b553b5e3 100644
--- a/files/es/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
+++ b/files/es/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
@@ -44,7 +44,8 @@ La técnica es esencial. Los músicos necesitan dominar su instrumento. Pero los
 
 Una discusión de horas con los amigos es un buen comienzo, pero inadecuado. Debes sentarte y estructurar tus ideas, para tener una visión clara sobre el camino que debes tomar para materializar tus ideas. Para hacer esto, sólo necesitas lápiz y papel y algo de tiempo para responder al menos las siguientes preguntas.
 
-> **Nota:** Hay innumerables maneras de llevar a cabo la ideación del proyecto. No podemos presentarlas a todas aquí (un libro entero no sería suficiente). Lo que presentamos aquí es un método sencillo para manejar lo que los profesionales llaman [Ideación de Proyectos](<http://en.wikipedia.org/wiki/Ideation_(idea_generation)>), [Planificación de Proyectos](https://es.wikipedia.org/wiki/Planeamiento_de_proyectos) y [Gestión de Proyectos](https://es.wikipedia.org/wiki/Gesti%C3%B3n_de_proyectos).
+> [!NOTE]
+> Hay innumerables maneras de llevar a cabo la ideación del proyecto. No podemos presentarlas a todas aquí (un libro entero no sería suficiente). Lo que presentamos aquí es un método sencillo para manejar lo que los profesionales llaman [Ideación de Proyectos](<http://en.wikipedia.org/wiki/Ideation_(idea_generation)>), [Planificación de Proyectos](https://es.wikipedia.org/wiki/Planeamiento_de_proyectos) y [Gestión de Proyectos](https://es.wikipedia.org/wiki/Gesti%C3%B3n_de_proyectos).
 
 ### ¿Qué es exactamente lo que quiero lograr?
 
diff --git a/files/es/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/es/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
index 94c277472fc8fd..d7672cfbf14ab8 100644
--- a/files/es/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
+++ b/files/es/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
@@ -100,7 +100,8 @@ Asegúrese de contar con suficiente {{Glossary("Ancho de banda", "ancho de banda
 
 Los proveedores de alojamiento te cobran de acuerdo a cuánto {{Glossary("Ancho de banda", "ancho de banda")}} consume tu sitio web. . Esto depende de cuántas personaas, y robots de rastreo Web, accedan a tu contenido durante un tiempo dado, y cuánto espacio en el servidor tu contenido ocupa. Esta es la razón por la cual las personas usualmente almacenan sus videos en servicios dedicadostales como Youtube, Dailymotion, y Vimeo. Por ejemplo, tu proveedor puede tener un plan que incluye hasta varios miles de visitantes por díam por un uso "razonable". Sea cuidadoso, puesto que puede variar mucho de un servidor de alojamiento a otro. Como regla de oro, reconozca que el servicio de alojamiento confiable, pagado y personal puede costar alrededor de 10 a 15 dólares al mes.
 
-> **Nota:** Note que que no existe el ancho de banda "ilimitado". Si consumes una enorme cantidad de ancho de banda, espere pagar una enorme cantidad de dinero.
+> [!NOTE]
+> Note que que no existe el ancho de banda "ilimitado". Si consumes una enorme cantidad de ancho de banda, espere pagar una enorme cantidad de dinero.
 
 ### Nombre de dominio
 
diff --git a/files/es/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/es/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
index 29f9b27b096aa3..653dcc85343a87 100644
--- a/files/es/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
+++ b/files/es/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
@@ -62,7 +62,8 @@ Para hacer esto:
    python -V
    ```
 
-   > **Nota:** La v del ejemplo en mayuscula (V)
+   > [!NOTE]
+   > La v del ejemplo en mayuscula (V)
 
 3. Esto debe retornar un número de versión. Si esto esta bien, navega al directorio que contiene tu ejemplo, usando el comando `cd`.
 
@@ -85,7 +86,8 @@ Para hacer esto:
 
 5. Por defecto, se ejecutará el contenido del directorio en un servidor web local, en el puerto 8000. puedes ir a este servidor yendo a la URL `localhost:8000` en tu navegador web. Aquí verá el contenido del directorio listado - haga clic en el archivo HTML que desea ejecutar.
 
-> **Nota:** si ya tienes corriendo algo en el puerto 8000, puedes escoger otro puerto corriendo el siguiente comando de servidor por un número de puerto alternativo, por ejemplo `python -m SimpleHTTPServer 7800`. Puedes acceder a tu contenido en el `localhost:7800`.
+> [!NOTE]
+> Si ya tienes corriendo algo en el puerto 8000, puedes escoger otro puerto corriendo el siguiente comando de servidor por un número de puerto alternativo, por ejemplo `python -m SimpleHTTPServer 7800`. Puedes acceder a tu contenido en el `localhost:7800`.
 
 ## Ejecución de lenguajes del lado del servidor localmente
 
diff --git a/files/es/learn/common_questions/tools_and_setup/using_github_pages/index.md b/files/es/learn/common_questions/tools_and_setup/using_github_pages/index.md
index 4f79a42cec2462..52c619c16fa5ad 100644
--- a/files/es/learn/common_questions/tools_and_setup/using_github_pages/index.md
+++ b/files/es/learn/common_questions/tools_and_setup/using_github_pages/index.md
@@ -41,7 +41,8 @@ La mejor manera de subir tu código a Github es mediante la linea de comandos 
 
 ![](command-line.png)
 
-> **Nota:** Tú también podrías considerar una [interfaz gráfica de usuario de Git](http://git-scm.com/downloads/guis) para hacer el mismo trabajo, si te sientes incómodo con la linea de comandos.
+> [!NOTE]
+> Tú también podrías considerar una [interfaz gráfica de usuario de Git](http://git-scm.com/downloads/guis) para hacer el mismo trabajo, si te sientes incómodo con la linea de comandos.
 
 Cada sistema operativo viene con una herramienta de línea de comandos:
 
@@ -85,7 +86,8 @@ Esto puede parecer un poco espantoso al principio, pero no te preocupes — que
 
 5. Navega tu dirección web de GitHub pages en un nuevo ta del navegador, y tu deberias ver tu sitio en linea! Mandalo por correo electrónico a tus amigos y muestra tu dominio.
 
-> **Nota:** Si te atascas, la [página de inicio de GitHub Pages](https://pages.github.com/) también es muy útil.
+> [!NOTE]
+> Si te atascas, la [página de inicio de GitHub Pages](https://pages.github.com/) también es muy útil.
 
 ### Un mayor conocimiento de GitHub
 
diff --git a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
index 3389b4efc96553..636f1e1d72f122 100644
--- a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
+++ b/files/es/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
 
 Todos los navegadores web modernos incluyen un potente conjunto de herramientas para desarrolladores. Estas herramientas hacen una variedad de cosas, desde inspeccionar HTML, CSS y JavaScript actualmente cargados, hasta mostrar qué activos ha solicitado la página y cuánto tiempo tardaron en cargarse. Este artículo explica cómo utilizar las funciones básicas de las herramientas de desarrollo de tu navegador.
 
-> **Nota:** Antes de ejecutar los siguientes ejemplos, abre el [sitio de ejemplo para principiantes](http://mdn.github.io/beginner-html-site-scripted/) que creamos durante la serie de artículos [Introducción a la Web](/es/Learn/Getting_started_with_the_web). Lo deberías tener abierto mientras sigues los pasos que explicamos a continuación.
+> [!NOTE]
+> Antes de ejecutar los siguientes ejemplos, abre el [sitio de ejemplo para principiantes](http://mdn.github.io/beginner-html-site-scripted/) que creamos durante la serie de artículos [Introducción a la Web](/es/Learn/Getting_started_with_the_web). Lo deberías tener abierto mientras sigues los pasos que explicamos a continuación.
 
 ## Cómo abrir devtools en tu navegador
 
diff --git a/files/es/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/es/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
index 0abfde356dd552..5f36afa4dfdd46 100644
--- a/files/es/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
+++ b/files/es/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
@@ -182,7 +182,8 @@ Esta es una captura de panalla de un editor de texto online:
 
 Cuando tu sitio web está listo para visualización pública , tendrás que subir tus páginas web a tu servidor web. Puedes comprar espacio en un servidor de varios proveedores (vea el artículo [¿Cuánto cuesta hacer algo en la web?](/es/docs/Learn/How_much_does_it_cost)). Una vez que establezca qué proveedor utilizar, el proveedor le enviará un correo con la información de acceso, usualmente en la forma de una URL SFTP, nombre de usuario, contraseña, y otra información necesaria para conectarte con su servidor. Tenga en cuenta que el protocolo (S)FTP está actualmente algo pasado de moda, mientras otros sistemas de carga de archivos están comenzando a volverse populares como [RSync](https://en.wikipedia.org/wiki/Rsync) y [Git/GitHub](https://help.github.com/articles/using-a-custom-domain-with-github-pages/).
 
-> **Nota:** FTP es inherentemente inseguro. Deberías asegurarte de que tu proveedor de alojamiento permite el uso de una conexión segura, por ejemplo SFTP o RSync sobre SSH.
+> [!NOTE]
+> FTP es inherentemente inseguro. Deberías asegurarte de que tu proveedor de alojamiento permite el uso de una conexión segura, por ejemplo SFTP o RSync sobre SSH.
 
 Subir archivos a un sitio web es un paso muy importante mientras se crea un sitio web, por lo que sete tema se abarca en detalle en [un artículo aparte](/es/docs/Learn/Upload_files_to_a_web_server). Por ahora, se presenta una lista de clientes (S)FTP gratuitos:
 
diff --git a/files/es/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/es/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
index f18a98f7c350d5..592094a50333d6 100644
--- a/files/es/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
+++ b/files/es/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
@@ -46,7 +46,8 @@ En este artículo se describe qué es Internet y cómo funciona.
 
 Cuando dos ordenadores necesitan comunicarse, tienes que vincularlos, ya sea físicamente (por lo general con un [cable de Ethernet](http://en.wikipedia.org/wiki/Ethernet_crossover_cable)) o de forma inalámbrica (por ejemplo por [WiFi](http://en.wikipedia.org/wiki/WiFi) o sistema de [Bluetooth](http://en.wikipedia.org/wiki/Bluetooth)). Todos los ordenadores modernos pueden soportar cualquiera de este tipo de conexiones.
 
-> **Nota:** En el resto de este artículo, sólo nos referiremos al uso de cables físicos, pero es igualmente aplicable a las redes inalámbricas.
+> [!NOTE]
+> En el resto de este artículo, sólo nos referiremos al uso de cables físicos, pero es igualmente aplicable a las redes inalámbricas.
 
 ![Dos computadoras conectadas entre sí](internet-schema-1.png)
 
diff --git a/files/es/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/es/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index fa40503159a53e..04c01fd0868190 100644
--- a/files/es/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/es/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -70,7 +70,8 @@ Una **página web** es un simple documento que puede ser mostrado por un {{Gloss
 - _scripts_ — que agrega interactividad a la página
 - _medios_ — imágenes, sonidos, y vídeos.
 
-> **Nota:** Los buscadores pueden mostrar distintos tipos de documentos, como archivos {{Glossary("PDF")}} o imágenes. Pero el término **página web** específicamente hace referencia a documentos HTML. Para los demás, usaremos sólo el termino **document**(documento).
+> [!NOTE]
+> Los buscadores pueden mostrar distintos tipos de documentos, como archivos {{Glossary("PDF")}} o imágenes. Pero el término **página web** específicamente hace referencia a documentos HTML. Para los demás, usaremos sólo el termino **document**(documento).
 
 Todas las páginas web disponibles en la red son accesibles mediante una dirección única. Para acceder a una página, simplemente escribe su direcciones en la barra de búsqueda de tu navegador:
 
diff --git a/files/es/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/es/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
index f3c703de4ae287..5ce662ac552bba 100644
--- a/files/es/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
+++ b/files/es/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
@@ -68,7 +68,8 @@ No se puede "comprar un nombre de dominio". Se paga por el derecho de usar un no
 
 Las compañías llamadas registradores utilizan los registros de nombres de dominio para realizar un seguimiento de la información técnica y administrativa que lo conecta con su nombre de dominio.
 
-> **Nota:** Para algunos nombres de dominio pudiera no ser un registrador quien esté a cargo de mantener el seguimiento. Por ejemplo, cada nombre de dominio bajo `.fire` es manejado por Amazon.
+> [!NOTE]
+> Para algunos nombres de dominio pudiera no ser un registrador quien esté a cargo de mantener el seguimiento. Por ejemplo, cada nombre de dominio bajo `.fire` es manejado por Amazon.
 
 #### Encontrar un nombre de dominio disponible
 
@@ -122,13 +123,15 @@ El proceso es bastante sencillo:
 3. Rellenar el formulario con todos los detalles requeridos. Asegúrese de no haber escrito incorrectamente el nombre de dominio deseado. ¡Una vez que esté pagado, es muy tarde!.
 4. El registrador te permitirá conocer cuando un nombre de dominio esté correctamente registrado. Dentro de unas pocas horas, todos los servidores DNS habrán recibido su información de DNS.
 
-> **Nota:** En este proceso se le pide su dirección real. Asegúrese de escribirla correctamente, ya que en algunos países los registradores pueden verse obligados a cerrar el dominio si no pueden proporcionar una dirección válida.
+> [!NOTE]
+> En este proceso se le pide su dirección real. Asegúrese de escribirla correctamente, ya que en algunos países los registradores pueden verse obligados a cerrar el dominio si no pueden proporcionar una dirección válida.
 
 #### Actualización de DNS
 
 Las bases de datos DNS son almacenadas en cada servidor DNS del mundo, y todos ellos hacen referencia a unos pocos denominados "servidores de nombre autoritario" o "servidores DNS de primer nivel". Cuando su registrador crea o actualiza alguna información para un dominio dado, la información tiene que ser actualizada en cada base de datos DNS. Cada servidor DNS que conoce sobre un dominio dado almacena la información por algún tiempo antes de que sea automáticamente invalidada y luego actualizada ( el servidor DNS consulta un servidor autoritario nuevamente). De esta manera, a los servidores DNS que conocen este nombre de dominio les toma algún tiempo poner la información al día.
 
-> **Nota:** Este tiempo es amenudo llamado **tiempo de propagación**. Sin embargo, este término no es preciso puesto que la actualizaciónn no se está propagando en sí (primer nivel → nivel inferior). Los servidores DNS consultados por su computadora (nivel inferior) son los que obtienen la información del servidor autoritario(primer nivel) cuando lo necesitan.
+> [!NOTE]
+> Este tiempo es amenudo llamado **tiempo de propagación**. Sin embargo, este término no es preciso puesto que la actualizaciónn no se está propagando en sí (primer nivel → nivel inferior). Los servidores DNS consultados por su computadora (nivel inferior) son los que obtienen la información del servidor autoritario(primer nivel) cuando lo necesitan.
 
 ### ¿Cómo funciona una petición DNS?
 
diff --git a/files/es/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/es/learn/common_questions/web_mechanics/what_is_a_url/index.md
index bc20c993fbef3a..af1d7023e56273 100644
--- a/files/es/learn/common_questions/web_mechanics/what_is_a_url/index.md
+++ b/files/es/learn/common_questions/web_mechanics/what_is_a_url/index.md
@@ -75,7 +75,8 @@ http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereI
 - ![Anchor](mdn-url-anchor@x2.png)
   - : `#SomewhereInTheDocument` es un ancla para otra parte del recurso en sí. Un ancla representa una especie de "marcador" dentro del recurso, dando al navegador las instrucciones para mostrar el contenido ubicado en ese lugar "marcado". En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el ancla; en un video o documento de audio, el navegador intentará ir a la hora que representa el ancla. Vale la pena señalar que la parte después del #, también conocido como el identificador de fragmento, nunca se envía al servidor con la solicitud.
 
-> **Nota:** Existen [algunas partes extras y reglas extras](https://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme) con respecto a las URL, pero no son relevantes para usuarios habituales o desarrolladores web. No se preocupe por esto, no necesita conocerlos para construir y usar URL completamente funcionales.
+> [!NOTE]
+> Existen [algunas partes extras y reglas extras](https://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme) con respecto a las URL, pero no son relevantes para usuarios habituales o desarrolladores web. No se preocupe por esto, no necesita conocerlos para construir y usar URL completamente funcionales.
 
 Puede pensar en una URL como una dirección de correo postal normal: el protocolo representa el servicio postal que desea utilizar, el nombre de dominio es la ciudad o el pueblo y el puerto es como el código postal; la ruta representa el edificio donde se debe entregar su correo; los parámetros representan información adicional como el número de apartamento en el edificio; y, finalmente, el ancla representa a la persona real a la que ha dirigido su correo.
 
@@ -90,7 +91,8 @@ El lenguaje {{Glossary("HTML")}} — [que se discutirá más adelante](/es/docs/
 - para mostrar recursos como imágenes (con el elemento {{HTMLElement("img")}}), videos (con el elemento {{HTMLElement("video")}}), sonido y música (con el elemento {{HTMLElement("audio")}} ), etc.;
 - para mostrar otros documentos HTML con el elemento {{HTMLElement ("iframe")}}.
 
-> **Nota:** Al especificar URL para cargar recursos como parte de una página (como cuando se usa \<script>, \<audio>, \<img>, \<video> y similares), solo debe usar URL HTTP y HTTPS. El uso de FTP, por ejemplo, no es particularmente seguro y muchos navegadores ya no lo admiten.
+> [!NOTE]
+> Al especificar URL para cargar recursos como parte de una página (como cuando se usa \<script>, \<audio>, \<img>, \<video> y similares), solo debe usar URL HTTP y HTTPS. El uso de FTP, por ejemplo, no es particularmente seguro y muchos navegadores ya no lo admiten.
 
 Otras tecnologías, como {{Glossary("CSS")}} o {{Glossary("JavaScript")}}, usan URLs ampliamente, y estos son realmente el corazón de la Web.
 
diff --git a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md
index f87d17b2952fe5..cf36e988fb89fd 100644
--- a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -111,7 +111,8 @@ Prueba lo siguiente:
 
 La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es `(0,0)`, y la caja se coloca sobre los ejes horizontal (`x`) y vertical (`y`).
 
-> **Nota:** El valor predeterminado de `background-position` es `(0,0)`.
+> [!NOTE]
+> El valor predeterminado de `background-position` es `(0,0)`.
 
 Los valores de `background-position` más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical.
 
@@ -177,7 +178,8 @@ También es posible poner múltiples imágenes de fondo: puedes especificar múl
 
 Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.
 
-> **Nota:** Los degradados se pueden mezclar con imágenes de fondo normales.
+> [!NOTE]
+> Los degradados se pueden mezclar con imágenes de fondo normales.
 
 Las otras propiedades `background-*` también pueden tener valores múltiples separados por comas, de la misma manera que `background-image`:
 
@@ -267,7 +269,8 @@ Y las no abreviadas:
 }
 ```
 
-> **Nota:** Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades _lógicas_ asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el [uso de diferentes direcciones de texto](/es/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
+> [!NOTE]
+> Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades _lógicas_ asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el [uso de diferentes direcciones de texto](/es/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
 
 **Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.**
 
diff --git a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md
index 110e250d9bf32b..df4bb363bb26a2 100644
--- a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -81,7 +81,8 @@ Por ejemplo, si para un elemento se establece el color (`color`) y el tipo de le
 
 Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!
 
-> **Nota:** En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la [sección de especificaciones de la propiedad color](/es/docs/Web/CSS/color#Especificaciones).
+> [!NOTE]
+> En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la [sección de especificaciones de la propiedad color](/es/docs/Web/CSS/color#Especificaciones).
 
 ## Comprender cómo trabajan juntos estos conceptos
 
@@ -110,9 +111,11 @@ CSS proporciona cuatro valores de propiedad universales especiales para el contr
 - {{cssxref("unset")}}
   - : Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como `inherit`, y en caso contrario como `initial`.
 
-> **Nota:** También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.
+> [!NOTE]
+> También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.
 
-> **Nota:** Véase la sección [El origen de las declaraciones CSS](/es/docs/Web/CSS/Cascade#Origin_of_CSS_declarations) en el artículo [Introducción al concepto de cascada en CSS](/es/docs/Web/CSS/Cascade)para obtener más información sobre cada uno de estos valores y el modo en que funcionan.
+> [!NOTE]
+> Véase la sección [El origen de las declaraciones CSS](/es/docs/Web/CSS/Cascade#Origin_of_CSS_declarations) en el artículo [Introducción al concepto de cascada en CSS](/es/docs/Web/CSS/Cascade)para obtener más información sobre cada uno de estos valores y el modo en que funcionan.
 
 A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS.
 
@@ -171,7 +174,8 @@ La cantidad de especificidad de un selector se mide usando cuatro valores difere
 3. **Decenas**: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general.
 4. **Unidades**: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general.
 
-> **Nota:** El selector universal (`*`), los operadores de combinación (`+`, `>`, `~`, ' ') y la pseudo-clase de negación (`:not`) no tienen ningún efecto sobre la especificidad.
+> [!NOTE]
+> El selector universal (`*`), los operadores de combinación (`+`, `>`, `~`, ' ') y la pseudo-clase de negación (`:not`) no tienen ningún efecto sobre la especificidad.
 
 La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los [selectores de referencia](/es/docs/Web/CSS/Selectores_CSS) de MDN.
 
@@ -193,7 +197,8 @@ Antes de continuar, vamos a ver un ejemplo:
 - El tercer y el cuarto selector compiten sobre el estilo del color del texto del enlace (el segundo gana y hace que el texto sea blanco porque, aunque tiene un selector de elemento de menos, el selector que falta se sustituye por un selector de clase, con un valor de decena en vez de un valor de unidad). Así que la especificidad es de 113 contra 104.
 - Los selectores 5-7 compiten por el estilo del borde del vínculo cuando el cursor se desplaza sobre estos. El sexto selector pierde claramente ante el quinto con una especificidad de 23 contra 24. En la cadena hay un selector de elemento de menos. El séptimo selector, sin embargo, los supera a ambos: en la cadena hay el mismo número de estos subselectores que en el quinto, pero se ha intercambiado un elemento por un selector de clase. Así que la especificidad es de 33 contra 23 y 24.
 
-> **Nota:** Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un _millar_ de selectores de **clase** combinados no serían capaces de sobrescribir las reglas de _un_ selector **ID**.
+> [!NOTE]
+> Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un _millar_ de selectores de **clase** combinados no serían capaces de sobrescribir las reglas de _un_ selector **ID**.
 >
 > Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos.
 
@@ -212,7 +217,8 @@ Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las
 3. En ambos bloques de código hay una clase [`class`](/es/docs/Web/HTML/Global_attributes#class) con el valor `better`, pero en el segundo bloque de código hay un [`id`](/es/docs/Web/HTML/Global_attributes#id) con el valor `winning`. Puesto que los identificadores tienen una especificidad _incluso mayor_ que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son _muy específicos_ con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel.
 4. El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración `!important` que hay en la segunda regla, después de `border: none` significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad.
 
-> **Nota:** La única manera de anular la declaración `!important` sería incluir otra declaración `!important` en una declaración con la _misma especificidad_ que aparezca más adelante en el orden del código fuente, o con una especificidad superior.
+> [!NOTE]
+> La única manera de anular la declaración `!important` sería incluir otra declaración `!important` en una declaración con la _misma especificidad_ que aparezca más adelante en el orden del código fuente, o con una especificidad superior.
 
 Es útil saber que `!important` existe para que sepas qué es cuando te lo encuentres en el código de otras personas. **Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario.** `!important` cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.
 
diff --git a/files/es/learn/css/building_blocks/debugging_css/index.md b/files/es/learn/css/building_blocks/debugging_css/index.md
index 3f249a607b9b82..c1288b80625b56 100644
--- a/files/es/learn/css/building_blocks/debugging_css/index.md
+++ b/files/es/learn/css/building_blocks/debugging_css/index.md
@@ -85,7 +85,8 @@ Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quiz
 
 ![La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open](inspecting3-font-size.png)
 
-> **Nota:** También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en [Examinar y editar CSS](/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS).
+> [!NOTE]
+> También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en [Examinar y editar CSS](/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS).
 
 ## Comprender el modelo de cajas
 
@@ -101,7 +102,8 @@ El elemento con una clase `box2` usa `border-box`, por lo que aquí el área de
 
 ![La ventana de diseño de DevTools](inspecting4-box-model.png)
 
-> **Nota:** Descubre más en [Examinar e inspeccionar el modelo de cajas](/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel).
+> [!NOTE]
+> Descubre más en [Examinar e inspeccionar el modelo de cajas](/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel).
 
 ## Resolver problemas de especificidad
 
diff --git a/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md
index a49ae455261a31..297e532263fe86 100644
--- a/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -33,7 +33,8 @@ Para comenzar esta evaluación, debes:
 - Ve y coge el [archivo HTML del ejercicio](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html), y el [archivo de imagen asociada](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg), y guárdalos en un nuevo directorio en tu ordenador local. Si quieres usar tu propio archivo de imagen y rellenar tu propio nombre, eres bienvenido - sólo asegúrate de que la imagen es cuadrada.
 - Coge el [archivo de texto de los recursos CSS](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) — este contiene un conjunto de selectores y conjuntos de reglas en estado puro que necesitarás estudiar y combinar para responder a parte de esta evaluación.
 
-> **Nota:** Alternativamente, se puede utilizar un sitio como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar [esta URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) para apuntar el elemento `<img>` al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento `<style>` en el encabezado del documento.
+> [!NOTE]
+> Alternativamente, se puede utilizar un sitio como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar [esta URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) para apuntar el elemento `<img>` al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento `<style>` en el encabezado del documento.
 
 ## Resumen del Proyecto
 
diff --git a/files/es/learn/css/building_blocks/handling_different_text_directions/index.md b/files/es/learn/css/building_blocks/handling_different_text_directions/index.md
index 7960f38a8003f7..c4e0880377a7b1 100644
--- a/files/es/learn/css/building_blocks/handling_different_text_directions/index.md
+++ b/files/es/learn/css/building_blocks/handling_different_text_directions/index.md
@@ -124,7 +124,8 @@ Por ejemplo, puedes hacer que una imagen flote a la izquierda para hacer que el
 
 Aquí también estamos usando valores lógicos de margen para asegurar que el margen está en el sitio correcto sin importar que modo de escritura es.
 
-> **Nota:** Actualmente, solo Firefox soporta valores relativos de flujo para `float`. Si estás usando **Google Chrome** o **Microsoft Edge**, deberías ver que la imagen no flota.
+> [!NOTE]
+> Actualmente, solo Firefox soporta valores relativos de flujo para `float`. Si estás usando **Google Chrome** o **Microsoft Edge**, deberías ver que la imagen no flota.
 
 ### ¿Debería usar propiedades físicas o lógicas?
 
diff --git a/files/es/learn/css/building_blocks/images_media_form_elements/index.md b/files/es/learn/css/building_blocks/images_media_form_elements/index.md
index 248e5291604a1c..69f8c1a8d83e23 100644
--- a/files/es/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/es/learn/css/building_blocks/images_media_form_elements/index.md
@@ -109,7 +109,8 @@ En el ejemplo siguiente hemos diseñado algunas entradas de texto con CSS: puede
 
 {{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}
 
-> **Advertencia:** Al cambiar el estilo de los elementos de formulario debes asegurarte de que para el usuario sigue siendo obvio que se trata de elementos de formulario. Podrías crear una entrada de formulario sin bordes y un fondo que sea casi indistinguible del contenido que lo rodea, pero esto haría que sea muy difícil de reconocer y completar.
+> [!WARNING]
+> Al cambiar el estilo de los elementos de formulario debes asegurarte de que para el usuario sigue siendo obvio que se trata de elementos de formulario. Podrías crear una entrada de formulario sin bordes y un fondo que sea casi indistinguible del contenido que lo rodea, pero esto haría que sea muy difícil de reconocer y completar.
 
 Como se explica en los artículos sobre [el diseño de formularios](/es/docs/Learn/HTML/Forms/Styling_HTML_forms) en la parte HTML de esta web, el sistema operativo presenta muchos de los tipos de entrada más complejos y son inaccesibles para el diseño. Por lo tanto, siempre debes suponer que los formularios se verán de manera bastante diferentes para los distintos visitantes, y deberás probar los formularios complejos en diversos navegadores.
 
@@ -175,7 +176,8 @@ textarea {
 }
 ```
 
-> **Nota:** Muchos desarrolladores utilizan las hojas de estilo de normalización para crear un conjunto de estilos de línea base para usar en todos los proyectos. Por lo general, estas hojas hacen cosas similares a las que acabamos de describir y garantizan que cualquier cosa que pueda ser diferente en distintos navegadores tenga establecido un valor por defecto coherente antes de que tú hagas tu propio trabajo con el CSS. Aunque ya no son tan importantes como lo eran antes, porque los navegadores suelen ser más homogéneos que en el pasado. Sin embargo, si deseas ver un ejemplo, consulta [Normalize.css](http://necolas.github.io/normalize.css/), que es una hoja de estilo muy popular que muchos proyectos utilizan como base.
+> [!NOTE]
+> Muchos desarrolladores utilizan las hojas de estilo de normalización para crear un conjunto de estilos de línea base para usar en todos los proyectos. Por lo general, estas hojas hacen cosas similares a las que acabamos de describir y garantizan que cualquier cosa que pueda ser diferente en distintos navegadores tenga establecido un valor por defecto coherente antes de que tú hagas tu propio trabajo con el CSS. Aunque ya no son tan importantes como lo eran antes, porque los navegadores suelen ser más homogéneos que en el pasado. Sin embargo, si deseas ver un ejemplo, consulta [Normalize.css](http://necolas.github.io/normalize.css/), que es una hoja de estilo muy popular que muchos proyectos utilizan como base.
 
 Para obtener más información sobre los formularios de estilo, echa un vistazo a los dos artículos en la sección HTML de estas guías.
 
diff --git a/files/es/learn/css/building_blocks/index.md b/files/es/learn/css/building_blocks/index.md
index 8f81ef2ce3436b..7b9547bd147ca0 100644
--- a/files/es/learn/css/building_blocks/index.md
+++ b/files/es/learn/css/building_blocks/index.md
@@ -19,7 +19,8 @@ Antes de comenzar este módulo deberías poseer:
 3. Una familiaridad básica con html, como es establecido en el módulo [Introdución a HTML](/es/docs/Learn/HTML/Introduccion_a_HTML).
 4. Un entendimiento elemental de CSS, como es discutido en el módulo [CSS first steps](/es/docs/Learn/CSS/First_steps).
 
-> **Nota:** Si estás trabajando en una computadora, tablet, u otro dispositivo en el que no eres capaz de crear tus propios archivos puedes intentar la mayor parte de los ejemplos en código en un programa para trabajar código en linea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estás trabajando en una computadora, tablet, u otro dispositivo en el que no eres capaz de crear tus propios archivos puedes intentar la mayor parte de los ejemplos en código en un programa para trabajar código en linea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/css/building_blocks/overflowing_content/index.md b/files/es/learn/css/building_blocks/overflowing_content/index.md
index f6a3cd28dcc9e6..d66b5cf0ebca76 100644
--- a/files/es/learn/css/building_blocks/overflowing_content/index.md
+++ b/files/es/learn/css/building_blocks/overflowing_content/index.md
@@ -82,7 +82,8 @@ También puedes desplazarte por el eje _x_ usando {{cssxref ("overflow-x")}}, au
 
 Al igual que con el desplazamiento, obtendrás una barra de desplazamiento en la dimensión de desplazamiento independientemente de si hay suficiente contenido para provocar una barra de desplazamiento.
 
-> **Nota:** observa que puedes especificar un desplazamiento en _x_ y en _y_ utilizando la propiedad `overflow` y pasando dos valores. Si especificas dos palabras clave, la primera se aplica a `overflow-x` y la segunda a `overflow-y`. De lo contrario, tanto `overflow-x` como `overflow-y` se fijan en el mismo valor. Por ejemplo, `overflow: scroll hidden` establece `overflow-x` en `scroll` y `overflow-y` en `hidden`.
+> [!NOTE]
+> Observa que puedes especificar un desplazamiento en _x_ y en _y_ utilizando la propiedad `overflow` y pasando dos valores. Si especificas dos palabras clave, la primera se aplica a `overflow-x` y la segunda a `overflow-y`. De lo contrario, tanto `overflow-x` como `overflow-y` se fijan en el mismo valor. Por ejemplo, `overflow: scroll hidden` establece `overflow-x` en `scroll` y `overflow-y` en `hidden`.
 
 Si deseas que aparezcan barras de desplazamiento solo si hay más contenido del que cabe en la caja, utiliza `overflow: auto`. En este caso, el navegador decide si muestra las barras de desplazamiento o no. Los navegadores de escritorio solo suelen hacerlo cuando hay contenido suficiente para causar desbordamiento.
 
diff --git a/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md
index b23e66361988af..72d80bf32a4cfd 100644
--- a/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -78,7 +78,8 @@ En el ejemplo siguiente, el primer selector relaciona valores que empiezan con `
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
 
-> **Nota:** Recientemente se ha creado un valor `s`, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.
+> [!NOTE]
+> Recientemente se ha creado un valor `s`, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.
 
 ## Próximos pasos
 
diff --git a/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 446d6fe4a4f35e..879f2519b6033c 100644
--- a/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -62,7 +62,8 @@ Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del
 - [`:only-child`](/es/docs/Web/CSS/:only-child)
 - [`:invalid`](/es/docs/Web/CSS/:invalid)
 
-> **Nota:** Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse `:first-child` y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento `<article>`, no solo un párrafo primer hijo. `:first-child` equivale a `*:first-child`. Pero normalmente se quiere más control y hay que ser más específico.
+> [!NOTE]
+> Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse `:first-child` y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento `<article>`, no solo un párrafo primer hijo. `:first-child` equivale a `*:first-child`. Pero normalmente se quiere más control y hay que ser más específico.
 
 ### Pseudoclases de acción de usuario
 
@@ -81,7 +82,8 @@ Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si
 ::pseudo-element-name
 ```
 
-> **Nota:** Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.
+> [!NOTE]
+> Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.
 
 Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento `<span>` y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.
 
diff --git a/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index a660d1bed22f1a..0558f13871928e 100644
--- a/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -100,7 +100,8 @@ Un selector de ID comienza con un carácter `#` en lugar de un punto, pero se ut
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
 
-> **Nota:** Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.
+> [!NOTE]
+> Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.
 
 ## En el próximo artículo
 
diff --git a/files/es/learn/css/building_blocks/sizing_items_in_css/index.md b/files/es/learn/css/building_blocks/sizing_items_in_css/index.md
index a265ddc3a3c9c3..dc2e7f4cade3d1 100644
--- a/files/es/learn/css/building_blocks/sizing_items_in_css/index.md
+++ b/files/es/learn/css/building_blocks/sizing_items_in_css/index.md
@@ -99,7 +99,8 @@ En el ejemplo siguiente hemos utilizado la misma imagen dos veces. La primera im
 
 Esta técnica se utiliza para dar a las imágenes una respuesta _adaptativa_, de modo que se reduzcan adecuadamente cuando se visualizan en un dispositivo más pequeño. Sin embargo, no es conveniente usar esta técnica para cargar imágenes demasiado grandes y luego reducirlas en el navegador. Las imágenes deben tener el tamaño adecuado, no deben ser más grandes de lo que sea necesario para el tamaño más grande que se muestran en el diseño. Descargar imágenes muy grandes ralentizará tu sitio y puede costarles más dinero a los usuarios si tienen una conexión tarifada.
 
-> **Nota:** Obtén más información sobre las [técnicas adaptativas para las imágenes](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+> [!NOTE]
+> Obtén más información sobre las [técnicas adaptativas para las imágenes](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
 
 ## Unidades de ventana gráfica
 
diff --git a/files/es/learn/css/building_blocks/the_box_model/index.md b/files/es/learn/css/building_blocks/the_box_model/index.md
index 48402f2a75e33b..249169729ea60b 100644
--- a/files/es/learn/css/building_blocks/the_box_model/index.md
+++ b/files/es/learn/css/building_blocks/the_box_model/index.md
@@ -69,7 +69,8 @@ Sin embargo, las cajas también tienen un tipo de visualización _interna_, que
 
 Sin embargo, podemos cambiar el tipo de visualización interna utilizando valores de `display`, como `flex`. Si en un elemento establecemos `display: flex;`, el tipo de visualización externa es de tipo bloque (`block`), pero el tipo de visualización interna cambia a flexible (`flex`). Cualquier elemento que sea hijo directo de esta caja pasará a comportarse como un elemento de tipo flex, de acuerdo con las reglas que se establecen en la especificación de [Flexbox](/es/docs/Learn/CSS/CSS_layout/Flexbox), tema que veremos más adelante.
 
-> **Nota:** Para obtener más información acerca de los valores de visualización y el modo como funcionan las cajas en las disposiciones en bloque y en línea, echa un vistazo a la guía [Disposiciones en bloque y en línea](/es/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) de MDN.
+> [!NOTE]
+> Para obtener más información acerca de los valores de visualización y el modo como funcionan las cajas en las disposiciones en bloque y en línea, echa un vistazo a la guía [Disposiciones en bloque y en línea](/es/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) de MDN.
 
 A medida que vayas aprendiendo más detalles sobre el diseño CSS, te irás encontrando con el valor `flex` y con otros valores internos que puedan presentar tus cajas, por ejemplo, [`grid`](/es/docs/Learn/CSS/CSS_layout/Grids).
 
@@ -136,7 +137,8 @@ El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en r
 
 ![Mostrar el tamaño de la caja cuando se usa el modelo de cajas estándar.](standard-box-model.png)
 
-> **Nota:** El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.
+> [!NOTE]
+> El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.
 
 ### El modelo de cajas CSS alternativo
 
@@ -165,7 +167,8 @@ html {
 }
 ```
 
-> **Nota:** Un dato curioso es que Internet Explorer usaba por defecto el modelo de cajas alternativo, y no disponía de ningún mecanismo para cambiarlo.
+> [!NOTE]
+> Un dato curioso es que Internet Explorer usaba por defecto el modelo de cajas alternativo, y no disponía de ningún mecanismo para cambiarlo.
 
 ## Jugar con los modelos de cajas
 
@@ -175,7 +178,8 @@ En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase `.box`, lo
 
 {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}
 
-> **Nota:** Puedes encontrar la solución [aquí](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model).
+> [!NOTE]
+> Puedes encontrar la solución [aquí](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model).
 
 ### Utilizar las DevTools del navegador para ver el modelo de cajas
 
diff --git a/files/es/learn/css/building_blocks/values_and_units/index.md b/files/es/learn/css/building_blocks/values_and_units/index.md
index a378ebd281c73f..484d9fed28ce4b 100644
--- a/files/es/learn/css/building_blocks/values_and_units/index.md
+++ b/files/es/learn/css/building_blocks/values_and_units/index.md
@@ -41,9 +41,11 @@ Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de va
 
 En las especificaciones CSS y en las páginas de propiedades de este proyecto MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como [`<color>`](/es/docs/Web/CSS/color_value) o [`<length>`](/es/docs/Web/CSS/length). Cuando veas que el valor `<color>` es válido para una propiedad en particular, significa que para esa propiedad puedes usar como valor cualquier color válido de entre los que se enumeran en la página de referencia de la propiedad [`<color>`](/es/docs/Web/CSS/color_value).
 
-> **Nota:** También verás valores CSS denominados _tipos de datos_. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado 'tipo de datos', en realidad es solo una forma elegante de decir 'valor'.
+> [!NOTE]
+> También verás valores CSS denominados _tipos de datos_. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado 'tipo de datos', en realidad es solo una forma elegante de decir 'valor'.
 
-> **Nota:** Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato [\<color>](/es/docs/Web/CSS/color_value)). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.
+> [!NOTE]
+> Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato [\<color>](/es/docs/Web/CSS/color_value)). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.
 
 En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una palabra clave y el fondo con la función `rgb()`:
 
@@ -159,7 +161,8 @@ Algunos valores aceptan números sin ninguna unidad asociada. Un ejemplo de una
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}}
 
-> **Nota:** Cuando en CSS utilizas un número como valor, no debe estar entre comillas.
+> [!NOTE]
+> Cuando en CSS utilizas un número como valor, no debe estar entre comillas.
 
 ## Color
 
@@ -167,7 +170,8 @@ En CSS hay muchas formas de especificar el color, algunas de las cuales se imple
 
 El sistema de colores estándar disponible en los ordenadores modernos es de 24 bits, lo que permite visualizar aproximadamente 16,7 millones de colores distintos a partir de una combinación de diferentes canales de rojo, verde y azul con 256 valores diferentes por canal (256 x 256 x 256 = 16.777.216). Echemos un vistazo a algunas de las formas en que podemos especificar colores en CSS.
 
-> **Nota:** En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.
+> [!NOTE]
+> En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.
 
 ### Palabras clave para los colores
 
@@ -195,7 +199,8 @@ Vamos a reescribir nuestro último ejemplo para utilizar colores RGB:
 
 También puedes usar colores RGBA: estos funcionan exactamente de la misma manera que los colores RGB, por lo que puedes usar cualquier valor RGB; sin embargo, hay un cuarto valor que representa el canal alfa del color, que controla la opacidad. Si estableces este valor en `0`, el color será completamente transparente, mientras que en `1` será completamente opaco. Los valores intermedios le confieren diferentes niveles de transparencia.
 
-> **Nota:** Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.
+> [!NOTE]
+> Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.
 
 En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contiene nuestras cajas de color. También hemos configurado las cajas para que tengan diferentes valores de opacidad: observa que el fondo se muestra más cuanto menor es el valor del canal alfa.
 
@@ -203,7 +208,8 @@ En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contien
 
 **En este ejemplo, cambia los valores del canal alfa y observa cómo afecta a la salida de color.**
 
-> **Nota:** En algún momento, los navegadores modernos se actualizaron para que `rgba()` y `rgb()`, y `hsl()` y `hsla()` (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto `rgba()` como `rgb()` admiten colores con y sin valores de canal alfa. Cambia el `rgba()` del ejemplo anterior por `rgb()` y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.
+> [!NOTE]
+> En algún momento, los navegadores modernos se actualizaron para que `rgba()` y `rgb()`, y `hsl()` y `hsla()` (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto `rgba()` como `rgb()` admiten colores con y sin valores de canal alfa. Cambia el `rgba()` del ejemplo anterior por `rgb()` y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.
 
 ### Los valores HSL y HSLA
 
@@ -231,7 +237,8 @@ En el ejemplo siguiente mostramos una imagen y un gradiente en uso como un valor
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}}
 
-> **Nota:** hay otros valores posibles para `<image>`, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato [`<image>`](/es/docs/Web/CSS/image) si deseas saber más sobre ellos.
+> [!NOTE]
+> Hay otros valores posibles para `<image>`, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato [`<image>`](/es/docs/Web/CSS/image) si deseas saber más sobre ellos.
 
 ## Posición
 
diff --git a/files/es/learn/css/css_layout/flexbox/index.md b/files/es/learn/css/css_layout/flexbox/index.md
index 2581620601ba66..70862b034512f3 100644
--- a/files/es/learn/css/css_layout/flexbox/index.md
+++ b/files/es/learn/css/css_layout/flexbox/index.md
@@ -92,7 +92,8 @@ flex-direction: column;
 
 Observa que esto vuelve a colocar los elementos en una disposición en columna, al igual que antes de añadir cualquier CSS. Antes de continuar, elimina esta declaración de tu ejemplo.
 
-> **Nota:** También puedes compaginar elementos flexibles en una dirección inversa utilizando los valores `row-reverse` y `column-reverse`. ¡Experimenta también con estos valores!
+> [!NOTE]
+> También puedes compaginar elementos flexibles en una dirección inversa utilizando los valores `row-reverse` y `column-reverse`. ¡Experimenta también con estos valores!
 
 ## Delimitar
 
diff --git a/files/es/learn/css/css_layout/grids/index.md b/files/es/learn/css/css_layout/grids/index.md
index 18d33e76cb4ffc..fba469aab5a779 100644
--- a/files/es/learn/css/css_layout/grids/index.md
+++ b/files/es/learn/css/css_layout/grids/index.md
@@ -167,7 +167,8 @@ body {
 
 {{ EmbedLiveSample('Grid_2', '100%', 400) }}
 
-> **Nota:** La unidad `fr` distribuye el espacio _disponible_, no _todo_ el espacio. Por lo tanto, si una de tus trazas tiene algo grande dentro, habrá menos espacio libre para compartir.
+> [!NOTE]
+> La unidad `fr` distribuye el espacio _disponible_, no _todo_ el espacio. Por lo tanto, si una de tus trazas tiene algo grande dentro, habrá menos espacio libre para compartir.
 
 ### Los espacios entre trazas
 
@@ -222,7 +223,8 @@ body {
 
 {{ EmbedLiveSample('Grid_3', '100%', 400) }}
 
-> **Nota:** Las propiedades `*gap` solían tener el prefijo `grid-`, pero esto se ha cambiado en la especificación, porque la intención es hacerlas compatibles con diversos métodos de diseño. Por el momento, Edge y Firefox admiten las versiones sin prefijo, y las versiones con prefijo se mantienen como un alias, por lo que será seguro usarlas durante algún tiempo. Para quedarte en lo seguro, y que tu código sea más a prueba de balas, puedes duplicar y añadir ambas propiedades.
+> [!NOTE]
+> Las propiedades `*gap` solían tener el prefijo `grid-`, pero esto se ha cambiado en la especificación, porque la intención es hacerlas compatibles con diversos métodos de diseño. Por el momento, Edge y Firefox admiten las versiones sin prefijo, y las versiones con prefijo se mantienen como un alias, por lo que será seguro usarlas durante algún tiempo. Para quedarte en lo seguro, y que tu código sea más a prueba de balas, puedes duplicar y añadir ambas propiedades.
 
 ```css
 .container {
@@ -496,7 +498,8 @@ aside {
 
 {{ EmbedLiveSample('Grid_6', '100%', 400) }}
 
-> **Nota:** también puedes usar el valor `-1` para señalar la columna del final o la fila del final, y contar hacia atrás desde el final con valores negativos. Sin embargo, esto solo funciona con la cuadrícula explícita. El valor `-1` no señala la línea del final de la cuadrícula implícita.
+> [!NOTE]
+> También puedes usar el valor `-1` para señalar la columna del final o la fila del final, y contar hacia atrás desde el final con valores negativos. Sin embargo, esto solo funciona con la cuadrícula explícita. El valor `-1` no señala la línea del final de la cuadrícula implícita.
 
 ## Posicionamiento con grid-template-areas
 
diff --git a/files/es/learn/css/css_layout/index.md b/files/es/learn/css/css_layout/index.md
index 8660ec6e6f42fa..67489b3bf8af27 100644
--- a/files/es/learn/css/css_layout/index.md
+++ b/files/es/learn/css/css_layout/index.md
@@ -15,7 +15,8 @@ Antes de comenzar este módulo, ya deberías:
 2. Sentirte cómodo con los fundamentos de CSS, que se discuten en [Introduction to CSS](/es/docs/Learn/CSS/Introduction_to_CSS).
 3. Entender como diseñar cajas [style boxes](/es/docs/Learn/CSS/Styling_boxes).
 
-> **Nota:** Si estás trabajando en un dispositivo donde no tengas la posibilidad de crear tus propios archivos, puedes probar la mayoría de los ejemplos de código en un programa online como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estás trabajando en un dispositivo donde no tengas la posibilidad de crear tus propios archivos, puedes probar la mayoría de los ejemplos de código en un programa online como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/css/css_layout/introduction/index.md b/files/es/learn/css/css_layout/introduction/index.md
index 4912a00b5772d9..d1aa9d4e952d37 100644
--- a/files/es/learn/css/css_layout/introduction/index.md
+++ b/files/es/learn/css/css_layout/introduction/index.md
@@ -67,7 +67,8 @@ Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el c
 
 Los elementos que aparecen uno debajo del otro se describen como _elementos de bloque_, en contraposición con los _elementos de línea_, que aparecen uno al lado del otro, como las palabras de un párrafo.
 
-> **Nota:** La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.
+> [!NOTE]
+> La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.
 
 Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.
 
@@ -163,7 +164,8 @@ Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")
 
 {{ EmbedLiveSample('Establecer la propiedad flex', '300', '200') }}
 
-> **Nota:** Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre [Flexbox](/es/docs/Learn/CSS/CSS_layout/Flexbox).
+> [!NOTE]
+> Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre [Flexbox](/es/docs/Learn/CSS/CSS_layout/Flexbox).
 
 ## Diseño de cuadrícula
 
@@ -257,7 +259,8 @@ Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explíc
 
 {{ EmbedLiveSample('Colocar elementos en la cuadrícula', '300', '330') }}
 
-> **Nota:** Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre [Diseñar cuadrículas](/es/docs/Learn/CSS/CSS_layout/Grids).
+> [!NOTE]
+> Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre [Diseñar cuadrículas](/es/docs/Learn/CSS/CSS_layout/Grids).
 
 El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.
 
@@ -323,7 +326,8 @@ p {
 
 {{ EmbedLiveSample('Floats', '100%', 600) }}
 
-> **Nota:** El método de flotación se explica al completo en nuestro artículo sobre [las propiedades float y clear](/es/docs/Learn/CSS/CSS_layout/Floats). El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre [métodos de diseño heredados](/es/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods).
+> [!NOTE]
+> El método de flotación se explica al completo en nuestro artículo sobre [las propiedades float y clear](/es/docs/Learn/CSS/CSS_layout/Floats). El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre [métodos de diseño heredados](/es/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods).
 
 ## Técnicas de posicionamiento
 
@@ -606,7 +610,8 @@ body {
 
 {{ EmbedLiveSample('Posicionamiento pegajoso', '100%', 200) }}
 
-> **Nota:** para obtener más información sobre el posicionamiento, consulta nuestro artículo [Posicionamiento](/es/docs/Learn/CSS/CSS_layout/Positioning).
+> [!NOTE]
+> Para obtener más información sobre el posicionamiento, consulta nuestro artículo [Posicionamiento](/es/docs/Learn/CSS/CSS_layout/Positioning).
 
 ## Diseño de tablas
 
diff --git a/files/es/learn/css/css_layout/responsive_design/index.md b/files/es/learn/css/css_layout/responsive_design/index.md
index abcad6c036ebe1..40ae07fd9e9751 100644
--- a/files/es/learn/css/css_layout/responsive_design/index.md
+++ b/files/es/learn/css/css_layout/responsive_design/index.md
@@ -43,15 +43,18 @@ Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor
 
 ![Un diseño de página con dos columnas encogidas en una ventana gráfica del tamaño de un teléfono móvil.](mdn-rwd-liquid.png)
 
-> **Nota:** Observa este [ejemplo](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html) y su [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html) de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.
+> [!NOTE]
+> Observa este [ejemplo](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html) y su [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html) de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.
 
 El sitio de ancho fijo se arriesgaba a una barra de desplazamiento horizontal en pantallas que eran más pequeñas que el ancho del sitio (como se ve a continuación), y a un gran espacio en blanco en los bordes del diseño en las pantallas que eran más grandes.
 
 ![Un diseño con una barra de desplazamiento horizontal en una ventana de teléfono móvil.](mdn-rwd-fixed.png)
 
-> **Nota:** Observa este [ejemplo](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html) y su [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html) de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.
+> [!NOTE]
+> Observa este [ejemplo](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html) y su [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html) de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.
 
-> **Nota:** Las capturas de pantalla anteriores se han tomado usando el [modo de diseño responsivo](/es/docs/Tools/Responsive_Design_View) de las herramientas DevTools de Firefox.
+> [!NOTE]
+> Las capturas de pantalla anteriores se han tomado usando el [modo de diseño responsivo](/es/docs/Tools/Responsive_Design_View) de las herramientas DevTools de Firefox.
 
 A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como _m.example.com_ o _example.mobi_). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.
 
@@ -125,7 +128,8 @@ En pantallas más anchas se pasa a dos columnas:
 
 ![Una vista de un dispositivo de escritorio con un diseño a dos columnas.](mdn-rwd-desktop.png)
 
-> **Nota:** Puedes encontrar el [ejemplo en vivo](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html) y el [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html) de este ejemplo en GitHub.
+> [!NOTE]
+> Puedes encontrar el [ejemplo en vivo](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html) y el [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html) de este ejemplo en GitHub.
 
 ## Tecnologías modernas de diseño de páginas web
 
@@ -165,7 +169,8 @@ En el ejemplo siguiente, los elementos flexibles ocupan cada uno la misma cantid
 }
 ```
 
-> **Nota:** Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html).
+> [!NOTE]
+> Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html).
 
 ### Cuadrículas CSS
 
@@ -178,7 +183,8 @@ En el diseño de cuadrículas con CSS, la unidad `fr` permite la distribución d
 }
 ```
 
-> **Nota:** La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html).
+> [!NOTE]
+> La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html).
 
 ## Imágenes responsivas
 
@@ -230,7 +236,8 @@ Sin embargo, en las versiones de escritorio vemos un tamaño de título de encab
 
 ![Un diseño en dos columnas con un título grande.](mdn-rwd-font-desktop.png)
 
-> **Nota:** Observa este ejemplo en: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html).
+> [!NOTE]
+> Observa este ejemplo en: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html).
 
 Como muestra este enfoque sobre la tipografía, no es necesario restringir las consultas a medios a cambiar solo el diseño de página. Se pueden usar para ajustar cualquier elemento y hacerlo más útil o atractivo según los diversos tamaños de pantalla.
 
@@ -256,7 +263,8 @@ h1 {
 
 Esto significa que necesitamos especificar el tamaño de letra para el título de encabezado una sola vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas a medios. Luego, el tipo de letra aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.
 
-> **Nota:** Observa un ejemplo en: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html).
+> [!NOTE]
+> Observa un ejemplo en: [ejemplo](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [código fuente](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html).
 
 ## La metaetiqueta viewport
 
diff --git a/files/es/learn/css/css_layout/supporting_older_browsers/index.md b/files/es/learn/css/css_layout/supporting_older_browsers/index.md
index 5b8a0145ba7efc..3fadcb9d7fdcd7 100644
--- a/files/es/learn/css/css_layout/supporting_older_browsers/index.md
+++ b/files/es/learn/css/css_layout/supporting_older_browsers/index.md
@@ -93,7 +93,8 @@ En el ejemplo siguiente hemos especificado tres elementos de flotación `<div>`
 
 {{ EmbedLiveSample('Example1', '100%', '200') }}
 
-> **Nota:** La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie `clear`, que luego pase a ser un elemento de compaginación en cuadrícula.
+> [!NOTE]
+> La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie `clear`, que luego pase a ser un elemento de compaginación en cuadrícula.
 
 ### Métodos de soluciones alternativas
 
diff --git a/files/es/learn/css/first_steps/getting_started/index.md b/files/es/learn/css/first_steps/getting_started/index.md
index 12a9609f36c462..a214bccba4fd4f 100644
--- a/files/es/learn/css/first_steps/getting_started/index.md
+++ b/files/es/learn/css/first_steps/getting_started/index.md
@@ -69,7 +69,8 @@ Nuestro punto de partida es un documento HTML. Puedes copiar el código de abajo
 </html>
 ```
 
-> **Nota:** Si lees esto en un dispositivo o un entorno donde no puedes crear archivos fácilmente, no te preocupes. A continuación hay editores de código en vivo que van a permitirte escribir ejemplos de código en esta misma página.
+> [!NOTE]
+> Si lees esto en un dispositivo o un entorno donde no puedes crear archivos fácilmente, no te preocupes. A continuación hay editores de código en vivo que van a permitirte escribir ejemplos de código en esta misma página.
 
 ## Agregar CSS a un documento
 
@@ -212,7 +213,8 @@ El ejemplo que encontrarás a continuación incluye las dos reglas anteriores. I
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
-> **Nota:** Como puedes ver, el CSS nos ofrece varias formas de seleccionar elementos, y hasta ahora solo hemos arañado la superficie. Examinaremos todos estos selectores y muchos más en los artículos correspondientes a [Selectores](/es/docs/Learn/CSS/Building_blocks/Selectores_CSS) que encontrarás más adelante.
+> [!NOTE]
+> Como puedes ver, el CSS nos ofrece varias formas de seleccionar elementos, y hasta ahora solo hemos arañado la superficie. Examinaremos todos estos selectores y muchos más en los artículos correspondientes a [Selectores](/es/docs/Learn/CSS/Building_blocks/Selectores_CSS) que encontrarás más adelante.
 
 ## Dar formato según el estado
 
@@ -242,7 +244,8 @@ En el ejemplo que encontrarás a continuación, puedes jugar con diferentes valo
 
 Hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, vale la pena recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento. Intentaremos resaltar estas posibles dificultades en los lugares apropiados.
 
-> **Nota:** a menudo verás que se menciona la [accesibilidad](/es/docs/Learn/Accessibility) en estas lecciones y en MDN. Cuando hablamos de accesibilidad nos referimos al requisito de que nuestras páginas web sean comprensibles y usables para todas las personas.
+> [!NOTE]
+> A menudo verás que se menciona la [accesibilidad](/es/docs/Learn/Accessibility) en estas lecciones y en MDN. Cuando hablamos de accesibilidad nos referimos al requisito de que nuestras páginas web sean comprensibles y usables para todas las personas.
 >
 > Puede que tu visitante acceda a la página desde un ordenador con ratón o trackpad, o un teléfono inteligente con pantalla táctil. O puede que use un lector de pantalla que lea el contenido del documento, así como puede que necesite un tamaño de texto más grande o navegar por la página usando solo el teclado.
 >
diff --git a/files/es/learn/css/first_steps/how_css_is_structured/index.md b/files/es/learn/css/first_steps/how_css_is_structured/index.md
index 33e7bb5a85fcbe..9ec8af80eebaaa 100644
--- a/files/es/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/es/learn/css/first_steps/how_css_is_structured/index.md
@@ -205,7 +205,8 @@ h1, h2, .intro
 
 **Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!**
 
-> **Nota:** Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre [selectores CSS](/es/docs/Learn/CSS/Building_blocks/Selectors) de la próxima lección.
+> [!NOTE]
+> Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre [selectores CSS](/es/docs/Learn/CSS/Building_blocks/Selectors) de la próxima lección.
 
 ### Especificidad
 
@@ -266,7 +267,8 @@ Finalmente, los bloques de declaración CSS se combinan con _selectores_ para pr
 
 Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados.
 
-> **Advertencia:** Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (`:`).
+> [!WARNING]
+> Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (`:`).
 
 **Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML:**
 
@@ -276,9 +278,11 @@ Establecer las propiedades de CSS según valores específicos es la función pri
 - **{{cssxref("color")}}**
 - **{{cssxref("border")}}**
 
-> **Advertencia:** Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera _inválida_ y el motor CSS del navegador la ignora por completo.
+> [!WARNING]
+> Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera _inválida_ y el motor CSS del navegador la ignora por completo.
 
-> **Advertencia:** En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, _siempre_ hay que escribir `color`. Si se escribe `colour`, no funcionará.
+> [!WARNING]
+> En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, _siempre_ hay que escribir `color`. Si se escribe `colour`, no funcionará.
 
 ### Las funciones
 
@@ -408,7 +412,8 @@ Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejem
 
 **Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.**
 
-> **Advertencia:** Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.
+> [!WARNING]
+> Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.
 
 ## Comentarios
 
@@ -554,7 +559,8 @@ div p + p {
 
 La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir.
 
-> **Advertencia:** Aunque los valores de las declaraciones CSS se separan por espacios, **los nombres de propiedad nunca tienen espacios**.
+> [!WARNING]
+> Aunque los valores de las declaraciones CSS se separan por espacios, **los nombres de propiedad nunca tienen espacios**.
 
 Por ejemplo, las siguientes declaraciones de CSS son válidas:
 
diff --git a/files/es/learn/css/first_steps/index.md b/files/es/learn/css/first_steps/index.md
index d39a36aa05cb7f..a65b24f243e88b 100644
--- a/files/es/learn/css/first_steps/index.md
+++ b/files/es/learn/css/first_steps/index.md
@@ -15,7 +15,8 @@ Antes de comenzar este módulo, deberías:
 2. Un entorno básico de trabajo configurado, como se detalla en la sección de [Instalación de software básico](/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico), y saber como crear y administrar archivos, o lo puedes ver en el módulo [Manejando los archivos](/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos).
 3. Conocimiento básico de HTML, como se muestra en [Introducción a HTML](/es/docs/Learn/HTML/Introduccion_a_HTML).
 
-> **Nota:** Si estás trabajando en un computador/tablet/otro dispositivo en el cual no puedes crear o almacenar tus propios archivos, podrías probar (la mayoría) de los ejemplos de código en un editor de código en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estás trabajando en un computador/tablet/otro dispositivo en el cual no puedes crear o almacenar tus propios archivos, podrías probar (la mayoría) de los ejemplos de código en un editor de código en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/css/first_steps/styling_a_biography_page/index.md b/files/es/learn/css/first_steps/styling_a_biography_page/index.md
index 0b1db4268f935d..7182bd8fe2f271 100644
--- a/files/es/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/es/learn/css/first_steps/styling_a_biography_page/index.md
@@ -30,7 +30,8 @@ Con las cosas que has aprendido en las últimas lecciones, puedes darle formato
 
 Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el `<head>` del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
 
-> **Nota:** Si te atascas, pide ayuda — mira la sección [Evaluación o ayuda adicional](#Evaluación_o_ayuda_adicional) al final de esta página.
+> [!NOTE]
+> Si te atascas, pide ayuda — mira la sección [Evaluación o ayuda adicional](#Evaluación_o_ayuda_adicional) al final de esta página.
 
 ## Trabajando con CSS
 
diff --git a/files/es/learn/css/first_steps/what_is_css/index.md b/files/es/learn/css/first_steps/what_is_css/index.md
index cf91d1ce3cc8de..e16a360d93f47e 100644
--- a/files/es/learn/css/first_steps/what_is_css/index.md
+++ b/files/es/learn/css/first_steps/what_is_css/index.md
@@ -48,7 +48,8 @@ Un **documento** suele ser un archivo de texto estructurado con un lenguaje de m
 
 **Presentar** un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.
 
-> **Nota:** Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.
+> [!NOTE]
+> Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.
 
 El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el [color](/es/docs/Web/CSS/color_value) y el [tamaño](/es/docs/Web/CSS/font-size) de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser [convertir una columna de texto en una composición](/es/docs/Web/CSS/Layout_cookbook/Column_layouts) con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de [animación](/es/docs/Web/CSS/CSS_Animations). Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos.
 
@@ -86,7 +87,8 @@ p {
 
 Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor.
 
-> **Nota:** Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la [referencia CSS](/es/docs/Web/CSS/Referencia_CSS) del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn _css-feature-name_» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».
+> [!NOTE]
+> Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la [referencia CSS](/es/docs/Web/CSS/Referencia_CSS) del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn _css-feature-name_» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».
 
 ## Módulos CSS
 
diff --git a/files/es/learn/css/howto/generated_content/index.md b/files/es/learn/css/howto/generated_content/index.md
index 23ef929d592139..f89b791a803785 100644
--- a/files/es/learn/css/howto/generated_content/index.md
+++ b/files/es/learn/css/howto/generated_content/index.md
@@ -9,7 +9,8 @@ Este artículo describe algunas formas en las que puedes usar CSS para agregar c
 
 Una de las ventajas importantes de CSS es que te ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento. Puede especificar contenido de texto o imagen dentro de una hoja de estilo cuando ese contenido está estrechamente vinculado a la estructura del documento.
 
-> **Nota:** El contenido especificado en una hoja de estilo no se convierte en parte del {{Glossary("DOM")}}.
+> [!NOTE]
+> El contenido especificado en una hoja de estilo no se convierte en parte del {{Glossary("DOM")}}.
 
 Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, puede tener diferentes versiones de idioma de su documento que comparte una hoja de estilo. Si especifica contenido en su hoja de estilo que requiere traducción, debe colocar esas partes de su hoja de estilo en diferentes archivos y hacer arreglos para que se vinculen con las versiones de idioma apropiadas de su documento.
 
diff --git a/files/es/learn/css/styling_text/fundamentals/index.md b/files/es/learn/css/styling_text/fundamentals/index.md
index e8252820d6038d..82d2244255f8ca 100644
--- a/files/es/learn/css/styling_text/fundamentals/index.md
+++ b/files/es/learn/css/styling_text/fundamentals/index.md
@@ -34,14 +34,16 @@ En este artículo vas a iniciar tu viaje hacia el dominio la aplicación de esti
 
 Como ya habrás experimentado en tu trabajo con el HTML y el CSS, el texto incluido en un elemento se dispone dentro de la caja de contenido del elemento. Esta empieza en la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido de los lenguajes RTL, o right-to-left, que se escriben de derecha a izquierda) y fluye hacia el final de la línea. Una vez que llega al final, baja a la línea siguiente y sigue, y luego continúa a la línea siguiente, hasta que todo el contenido se ha ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuidos en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se llega al final de la línea, a menos que se fuerce un salto de línea manual con el elemento {{htmlelement("br")}}.
 
-> **Nota:** Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el [modelo de caja](/es/docs/Learn/CSS/Building_blocks/The_box_model) antes de continuar.
+> [!NOTE]
+> Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el [modelo de caja](/es/docs/Learn/CSS/Building_blocks/The_box_model) antes de continuar.
 
 Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse generalmente en dos categorías, que veremos por separado en este artículo:
 
 - **Estilos del tipo de letra**: Propiedades que afectan al texto (qué tipo de letra se usa, su tamaño, si es negrita, itálica, etc.).
 - **Estilos de disposición del texto**: Propiedades que afectan al espaciado y otras características relativas a la disposición del texto, lo que permite la elección de, por ejemplo, el espacio entre líneas y letras, y el modo como el texto se alinea dentro de la caja contenedora.
 
-> **Nota:** Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como [::first-letter](/es/docs/Web/CSS/::first-letter) (selecciona la primera letra del texto de un elemento), [::first-line](/es/docs/Web/CSS/::first-line) (selecciona la primera línea del texto de un elemento), o [::selection](/es/docs/Web/CSS/::selection) (selecciona el texto que está resaltado por el cursor).
+> [!NOTE]
+> Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como [::first-letter](/es/docs/Web/CSS/::first-letter) (selecciona la primera letra del texto de un elemento), [::first-line](/es/docs/Web/CSS/::first-line) (selecciona la primera línea del texto de un elemento), o [::selection](/es/docs/Web/CSS/::selection) (selecciona el texto que está resaltado por el cursor).
 
 ## Tipos de letra
 
@@ -124,9 +126,11 @@ La lista de los tipos de letra seguros para la web cambia al ir evolucionando lo
 | Trebuchet MS    | sans-serif             | Hay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles.                                                                                                                             |
 | Verdana         | sans-serif             |                                                                                                                                                                                                                                                        |
 
-> **Nota:** Entre otros recursos, el sitio [cssfontstack.com](http://www.cssfontstack.com/) mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.
+> [!NOTE]
+> Entre otros recursos, el sitio [cssfontstack.com](http://www.cssfontstack.com/) mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.
 
-> **Nota:** Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: **web fonts**. Esto es un poco más complejo, y lo vamos a exponer más adelante en un [artículo independiente](/es/docs/Learn/CSS/Styling_text/Web_fonts) del módulo.
+> [!NOTE]
+> Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: **web fonts**. Esto es un poco más complejo, y lo vamos a exponer más adelante en un [artículo independiente](/es/docs/Learn/CSS/Styling_text/Web_fonts) del módulo.
 
 #### Fuentes predeterminadas
 
@@ -186,7 +190,8 @@ En tal caso, el navegador comienza al principio de la lista y busca si el primer
 
 Es una buena idea proporcionar un nombre de tipo de letra genérico al final de la lista para que el navegador pueda al menos proporcionar algo aproximadamente adecuado en el caso de que ninguno de los tipos de letra que deseas esté disponible. Para ilustrar este punto: los navegadores asignan a los párrafos el tipo de letra _serif_ por defecto, que normalmente es Times New Roman, si no hay ninguna otra opción disponible, pero esto no resulta conveniente cuando se espera un tipo de letra _sans-serif_!
 
-> **Nota:** Los nombres de los tipos de letra que están constituidos por más de una palabra (como `Trebuchet MS` ) han de ponerse entre comillas, por ejemplo `"Trebuchet MS"`.
+> [!NOTE]
+> Los nombres de los tipos de letra que están constituidos por más de una palabra (como `Trebuchet MS` ) han de ponerse entre comillas, por ejemplo `"Trebuchet MS"`.
 
 #### Un ejemplo con font-family
 
@@ -368,7 +373,8 @@ Las cuatro propiedades son las siguientes:
 3. El radio de desenfoque; cuanto más alto es este valor, mayor es la dispersión de la sombra. Si no se incluye este valor, el valor por defecto es 0, y no hay desenfoque. Esta propiedad admite la mayoría de las [unidades y magnitudes](/es/docs/Learn/CSS/Building_blocks/Values_and_units) de que dispone el CSS.
 4. El color de base de la sombra, que admite cualquier [unidad de color de que dispone CSS](/es/docs/Learn/CSS/Building_blocks/Values_and_units). Si no se incluye este valor, el valor predeterminado es `negro`.
 
-> **Nota:** Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo `-1px -1px`, mueven la sombrea hacia la izquierda o hacia arriba.
+> [!NOTE]
+> Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo `-1px -1px`, mueven la sombrea hacia la izquierda o hacia arriba.
 
 #### Sombras múltiples
 
@@ -427,7 +433,8 @@ p {
 
 {{ EmbedLiveSample('Sombras_múltiples', '100%', 220) }}
 
-> **Nota:** Puedes ver más ejemplos interesantes del uso de `text-shadow` en el artículo de _Sitepoint_ [Dominando la sombra de texto con CSS](https://www.sitepoint.com/moonlighting-css-text-shadow/).
+> [!NOTE]
+> Puedes ver más ejemplos interesantes del uso de `text-shadow` en el artículo de _Sitepoint_ [Dominando la sombra de texto con CSS](https://www.sitepoint.com/moonlighting-css-text-shadow/).
 
 ## Diseño del texto
 
diff --git a/files/es/learn/css/styling_text/index.md b/files/es/learn/css/styling_text/index.md
index e635f1e7f331d3..a4631e56407bd7 100644
--- a/files/es/learn/css/styling_text/index.md
+++ b/files/es/learn/css/styling_text/index.md
@@ -11,7 +11,8 @@ Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS
 
 Antes de iniciar este módulo, ya debe estár familizarizado con HTML, como se explica en el módulo [Introducción a HTML](/es/docs/Learn/HTML/Introduction_to_HTML), y sentirse cómodo con los fundamentos de CSS, como se explica en [Introducción a CSS](/es/docs/Learn/CSS/Introduction_to_CSS).
 
-> **Nota:** Si está trabajando en una computadora/tableta/u otro dispositivo donde no tenga la capacidad de crear sus propios archivos, puede probar (la mayoría) de los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/), [CodePen](https://codepen.io/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si está trabajando en una computadora/tableta/u otro dispositivo donde no tenga la capacidad de crear sus propios archivos, puede probar (la mayoría) de los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/), [CodePen](https://codepen.io/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/css/styling_text/styling_links/index.md b/files/es/learn/css/styling_text/styling_links/index.md
index b62772dce52e58..ed49d17d5aeb6a 100644
--- a/files/es/learn/css/styling_text/styling_links/index.md
+++ b/files/es/learn/css/styling_text/styling_links/index.md
@@ -64,7 +64,8 @@ p {
 
 {{ EmbedLiveSample('Estilos_predeterminados', '100%', 120) }}
 
-> **Nota:** Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo `#` (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). `#` solo establece enlaces dentro de la misma página.
+> [!NOTE]
+> Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo `#` (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). `#` solo establece enlaces dentro de la misma página.
 
 A medida que explores los estilos predeterminados, observarás algunas cosas:
 
@@ -86,7 +87,8 @@ Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS
 - {{cssxref("cursor")}} para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).
 - {{cssxref("outline")}} para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.
 
-> **Nota:** No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!
+> [!NOTE]
+> No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!
 
 ### Dar formato a algunos enlaces
 
@@ -362,7 +364,8 @@ Un último apunte: ¿cómo seleccionamos solo los enlaces externos? Bueno, si es
 
 Eso es todo. Vuelve a la sección de aprendizaje activo anterior ¡y prueba esta nueva técnica!
 
-> **Nota:** No te preocupes si aún no estás familiarizado con los [fondos](/es/docs/Learn/CSS/Building_blocks) y el [diseño web adaptativo](/es/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks), lo explicaremos en otros artículos.
+> [!NOTE]
+> No te preocupes si aún no estás familiarizado con los [fondos](/es/docs/Learn/CSS/Building_blocks) y el [diseño web adaptativo](/es/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks), lo explicaremos en otros artículos.
 
 ## Dar aspecto de botón a un enlace
 
@@ -446,7 +449,8 @@ Vamos a explicar qué pasa aquí, y nos vamos a centrar en los aspectos más int
   - Ahora nos centramos en el tamaño. Queremos llenar todo el ancho del elemento de lista {{htmlelement ("ul")}} y dejar un pequeño margen entre cada botón (pero ningún hueco en el borde derecho), y queremos los 5 botones del mismo tamaño. Para hacer esto, establecemos el atributo {{cssxref ("width")}} en 19,5%, y el atributo {{cssxref ("margin-right")}} en 0,625%. Observa que el ancho completo suma 100,625%, lo que haría caer el último botón `<ul>` a la siguiente línea por desbordamiento. Sin embargo, lo restituimos al 100% con la siguiente regla, que selecciona solo el último elemento `<a>` de la lista y elimina de él el margen. ¡Hecho!
   - Las tres últimas declaraciones son bastante sencillas y tienen principalmente finalidades estéticas. Centramos el texto dentro de cada enlace, establecemos {{cssxref ("line-height")}} en 3 para dar algo de altura a los botones (lo que también presenta la ventaja de centrar verticalmente el texto), y establecemos el color del texto a negro.
 
-> **Nota:** Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en [Combatir los espacios entre elementos de bloque colocados en línea](https://css-tricks.com/fighting-the-space-between-inline-block-elements/).
+> [!NOTE]
+> Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en [Combatir los espacios entre elementos de bloque colocados en línea](https://css-tricks.com/fighting-the-space-between-inline-block-elements/).
 
 ## Resumen
 
diff --git a/files/es/learn/css/styling_text/styling_lists/index.md b/files/es/learn/css/styling_text/styling_lists/index.md
index 25bc662c67a521..97e9f154db8f71 100644
--- a/files/es/learn/css/styling_text/styling_lists/index.md
+++ b/files/es/learn/css/styling_text/styling_lists/index.md
@@ -301,7 +301,8 @@ Da el resultado siguiente:
 
 {{ EmbedLiveSample('reversed', '100%', 150) }}
 
-> **Nota:** Si en una lista inversa hay más elementos de lista que el valor que se ha establecido para el atributo `start`, la numeración continuará hasta cero y luego con valores negativos.
+> [!NOTE]
+> Si en una lista inversa hay más elementos de lista que el valor que se ha establecido para el atributo `start`, la numeración continuará hasta cero y luego con valores negativos.
 
 ### value
 
@@ -322,7 +323,8 @@ Da el resultado siguiente:
 
 {{ EmbedLiveSample('value', '100%', 150) }}
 
-> **Nota:** Incluso si utilizas una propiedad {{cssxref("list-style-type")}} sin números, vas a tener que usar los valores numéricos equivalentes para el atributo `value`.
+> [!NOTE]
+> Incluso si utilizas una propiedad {{cssxref("list-style-type")}} sin números, vas a tener que usar los valores numéricos equivalentes para el atributo `value`.
 
 ## Aprendizaje activo: aplicar estilo a una lista anidada
 
diff --git a/files/es/learn/css/styling_text/web_fonts/index.md b/files/es/learn/css/styling_text/web_fonts/index.md
index d986850abd7e22..fa2ec99947ce00 100644
--- a/files/es/learn/css/styling_text/web_fonts/index.md
+++ b/files/es/learn/css/styling_text/web_fonts/index.md
@@ -72,7 +72,8 @@ Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:
 1. Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.
 2. Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.
 
-> **Nota:** ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!
+> [!NOTE]
+> ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!
 
 ## Aprendizaje activo: Un ejemplo de tipo de letra seguro para web
 
@@ -92,7 +93,8 @@ Vamos a ver algunos tipos de letra. Ve a [Font Squirrel](https://www.fontsquirre
 
 En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: _thin_, _medium_, _bold_, _italic_, _thin italic_, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.
 
-> **Nota:** En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.
+> [!NOTE]
+> En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.
 
 ### Generar el código
 
@@ -129,7 +131,8 @@ Con tu ejemplo de demostración, deberías obtener una página con unos agradabl
 
 ![](web-font-example.png)
 
-> **Nota:** Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) y [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([ejecuta el ejemplo terminado en vivo](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)).
+> [!NOTE]
+> Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) y [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([ejecuta el ejemplo terminado en vivo](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)).
 
 ## Los servicios de tipos de letra en línea
 
@@ -144,7 +147,8 @@ La mayoría de estos servicios son fáciles de usar, por lo que no vamos a expon
 5. En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.
 6. Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.
 
-> **Nota:** Puedes encontrar una versión completa en [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) y [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), si necesitas comparar tu trabajo con el nuestro ([consúltalo en vivo](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)).
+> [!NOTE]
+> Puedes encontrar una versión completa en [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) y [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), si necesitas comparar tu trabajo con el nuestro ([consúltalo en vivo](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)).
 
 ## @font-face con más detalle
 
@@ -171,7 +175,8 @@ Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicac
 - `src`: Estas líneas especifican las rutas de acceso a los archivos de tipos de letra para que puedas importarlos a tu CSS (la parte `URL`) y el formato de cada archivo de tipo de letra (la parte `format`). La última parte en cada caso es opcional, pero es útil declararla porque permite que los navegadores encuentren más rápido un tipo de letra que puedan usar. Se pueden enumerar varias declaraciones, separadas por comas: el navegador buscará por ellas y usará la primera que encuentre. Por lo tanto, es mejor poner formatos nuevos y mejores, como WOFF2 y formatos más antiguos, no tan buenos, como TTF. La única excepción son las fuentes EOT: se colocan primero para corregir un par de errores en versiones anteriores de Internet Explorer, por lo que intentará usar lo primero que encuentre, incluso si realmente no puede usar la fuente.
 - {{cssxref("font-weight")}}/{{cssxref("font-style")}}: Estas líneas especifican qué grueso tiene el tipo de letra y si se muestra en cursiva o no. Si vas a importar diversos grosores del mismo tipo de letra, puedes especificar cuál es su grueso/estilo y luego usar valores de {{cssxref("font-weight")}} / {{cssxref("font-style")}} diferentes para elegir entre ellos, en lugar de tener que llamar a todos los diferentes miembros de la familia de tipos de letra con nombres distintos. [@tip-face tip: define font-weight and font-stile 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/) de Roger Johansson muestra qué hacer con más detalle.
 
-> **Nota:** También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.
+> [!NOTE]
+> También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.
 
 ## Tipos de letra variables
 
diff --git a/files/es/learn/forms/basic_native_form_controls/index.md b/files/es/learn/forms/basic_native_form_controls/index.md
index 6a2c2f32fdf325..a061799d51e663 100644
--- a/files/es/learn/forms/basic_native_form_controls/index.md
+++ b/files/es/learn/forms/basic_native_form_controls/index.md
@@ -32,13 +32,15 @@ Ya conoces algunos elementos de formulario, incluidos {{HTMLelement ('form')}},
 - Los tipos de entrada comunes {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}} y {{HTMLelement('input/text', 'text')}}.
 - Algunos de los atributos que comunes para todos los controles de formulario.
 
-> **Nota:** Las características que se consideran en este artículo son compatibles con todos los navegadores, lo que no es el caso para todos los controles de formulario. En los próximos dos artículos vamos a exponer los controles de formulario que se han añadido a HTML5 más recientemente. Si quieres una referencia más avanzada, consulta nuestra [referencia a elementos de formulario HTML](/es/docs/Web/HTML/Elemento#Formularios), y en particular nuestra extensa referencia a [tipos \<input>](/es/docs/Web/HTML/Elemento/input).
+> [!NOTE]
+> Las características que se consideran en este artículo son compatibles con todos los navegadores, lo que no es el caso para todos los controles de formulario. En los próximos dos artículos vamos a exponer los controles de formulario que se han añadido a HTML5 más recientemente. Si quieres una referencia más avanzada, consulta nuestra [referencia a elementos de formulario HTML](/es/docs/Web/HTML/Elemento#Formularios), y en particular nuestra extensa referencia a [tipos \<input>](/es/docs/Web/HTML/Elemento/input).
 
 ## Campos de entrada de texto
 
 Los campos de texto {{htmlelement ("input")}} son los controles de formulario más básicos. Son un modo muy cómodo de permitir al usuario introducir cualquier tipo de datos, y ya hemos visto algunos ejemplos sencillos.
 
-> **Nota:** Los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una [edición enriquecida](/es/docs/Rich-Text_Editing_in_Mozilla) (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.
+> [!NOTE]
+> Los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una [edición enriquecida](/es/docs/Rich-Text_Editing_in_Mozilla) (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.
 
 Todos los controles de texto básicos comparten algunos comportamientos comunes:
 
@@ -47,13 +49,15 @@ Todos los controles de texto básicos comparten algunos comportamientos comunes:
 - Pueden presentar una limitación de [tamaño](/es/docs/Web/HTML/Attributes/size) (el tamaño físico de la caja de texto) y de la [extensión máxima](/es/docs/Web/HTML/Attributes/maxlength) (el número máximo de caracteres que se pueden poner en la caja de texto).
 - Admiten [corrección ortográfica](/es/docs/HTML/Element/input#attr-spellcheck) (utilizando el atributo [`spellcheck`](/es/docs/Web/HTML/Attributes/spellcheck)), si el navegador la admite.
 
-> **Nota:** El elemento {{htmlelement ("input")}} es único entre los elementos HTML porque puede tomar muchas formas diferentes según el valor de su atributo. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, controles sin introducción de texto, como casillas de verificación, botones de opción y selectores de color, y botones.
+> [!NOTE]
+> El elemento {{htmlelement ("input")}} es único entre los elementos HTML porque puede tomar muchas formas diferentes según el valor de su atributo. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, controles sin introducción de texto, como casillas de verificación, botones de opción y selectores de color, y botones.
 
 ### Campos de texto de una sola línea
 
 Un campo de texto de una sola línea se crea utilizando un elemento {{HTMLElement ("input")}} cuyo valor de atributo [`type`](/es/docs/Web/HTML/Element/input#type) se establece en `text`, u omitiendo por completo el atributo [`type`](/es/docs/Web/HTML/Element/input#type) (`text` es el valor predeterminado). El valor `text` de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo [`type`](/es/docs/Web/HTML/Element/input#type) (por ejemplo, si especificas `type="color"` y el navegador no está dotado en origen de un control de selección de colores).
 
-> **Nota:** Puedes encontrar ejemplos de todos los tipos de campo de texto de una sola línea en GitHub en [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) ([o consultarlo en vivo](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)).
+> [!NOTE]
+> Puedes encontrar ejemplos de todos los tipos de campo de texto de una sola línea en GitHub en [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) ([o consultarlo en vivo](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)).
 
 Aquí hay un ejemplo básico de campo de texto de una sola línea:
 
@@ -67,7 +71,8 @@ _La captura de pantalla siguiente muestra los tipos de entrada de texto predeter
 
 ![Captura de pantalla del atributo deshabilitado y predeterminado: estilo para una entrada de texto activa (con el foco) en Firefox, Safari, Chrome y Edge.](disabled.png)
 
-> **Nota:** HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo [`type`](/es/docs/Web/HTML/Element/input#type) que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos en el artículo siguiente: [Los tipos de entrada en HTML5](/es/docs/Learn/Forms/HTML5_input_types).
+> [!NOTE]
+> HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo [`type`](/es/docs/Web/HTML/Element/input#type) que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos en el artículo siguiente: [Los tipos de entrada en HTML5](/es/docs/Learn/Forms/HTML5_input_types).
 
 #### Campo de contraseña
 
@@ -101,7 +106,8 @@ Los elementos de selección (o _checkable items_, en inglés) son controles cuyo
 
 Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo [`name`](/es/docs/Web/HTML/Attributes/name), incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor _on._
 
-> **Nota:** Puedes encontrar los ejemplos de esta sección en GitHub como [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([o consultarlos en vivo](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)).
+> [!NOTE]
+> Puedes encontrar los ejemplos de esta sección en GitHub como [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([o consultarlos en vivo](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)).
 
 Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista de elementos que estén relacionados entre sí dentro de un elemento {{htmlelement ("fieldset")}} con un elemento {{htmlelement ("legend")}} que proporcione una descripción general de la lista. Cada par individual de elementos {{htmlelement ("label")}}/{{htmlelement ("input")}} ha de estar contenido en un elemento de lista propio (o similar). El elemento {{htmlelement ('label')}} asociado se coloca en general inmediatamente después del botón de opción o la casilla de verificación, con las instrucciones para el grupo de botones de opción o casillas de verificación, que suelen ser el contenido del elemento {{htmlelement ("legend")}}. Observa las estructuras de ejemplo en los ejemplos asociados anteriores.
 
@@ -119,7 +125,8 @@ Las capturas de pantalla siguientes muestran casillas de verificación predeterm
 
 ![Casillas de verificación predeterminadas, activas y deshabilitadas en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10](checkboxes.png)
 
-> **Nota:** Las casillas de verificación y los botones de opción con atributo [`checked`](/es/docs/Web/HTML/Attributes/checked) al cargarse coinciden con la pseudoclase {{cssxref ('<code>:default</code>')}}, incluso aunque ya no estén seleccionadas. Las que están seleccionadas coinciden con la pseudoclase `{{cssxref(':checked')}}`.
+> [!NOTE]
+> Las casillas de verificación y los botones de opción con atributo [`checked`](/es/docs/Web/HTML/Attributes/checked) al cargarse coinciden con la pseudoclase {{cssxref ('<code>:default</code>')}}, incluso aunque ya no estén seleccionadas. Las que están seleccionadas coinciden con la pseudoclase `{{cssxref(':checked')}}`.
 
 Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un [ejemplo en acción](https://mdn.github.io/learning-area/html/forms/toggle-switch-example/) (observa también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html)).
 
@@ -170,9 +177,11 @@ El botón de opción no es realmente un botón, a pesar de su nombre; sigamos ad
 
 Además, el elemento {{htmlelement ("button")}} puede tomar un atributo `type` para imitar estos tres tipos de entrada. La diferencia principal entre los dos es que los elementos `<button>` propiamente admiten aplicación de estilo en mayor medida.
 
-> **Nota:** El tipo de entrada `image` también se representa como un botón. También desarrollaremos este tema más adelante.
+> [!NOTE]
+> El tipo de entrada `image` también se representa como un botón. También desarrollaremos este tema más adelante.
 
-> **Nota:** Puedes encontrar los ejemplos de esta sección en GitHub como [button-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html) ([o consultarlos en vivo](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)).
+> [!NOTE]
+> Puedes encontrar los ejemplos de esta sección en GitHub como [button-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html) ([o consultarlos en vivo](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)).
 
 A continuación puedes encontrar ejemplos de cada tipo de botón `<input>`, junto con el tipo de botón equivalente.
 
diff --git a/files/es/learn/forms/form_validation/index.md b/files/es/learn/forms/form_validation/index.md
index 26d77c85555ed9..400df8d211b192 100644
--- a/files/es/learn/forms/form_validation/index.md
+++ b/files/es/learn/forms/form_validation/index.md
@@ -52,7 +52,8 @@ Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿p
 - **Queremos proteger los datos de nuestros usuarios**. Obligar a nuestros usuarios a introducir contraseñas seguras facilita proteger la información de su cuenta.
 - **Queremos protegernos a nosotros mismo**. Hay muchas formas en que los usuarios maliciosos puedan usar mal los formularios desprotegidos y dañar la aplicación (consulta [Seguridad del sitio web](/es/docs/Learn/Server-side/First_steps/Website_security)).
 
-> **Advertencia:** No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.
+> [!WARNING]
+> No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.
 
 ## Diferentes tipos de validación en el lado del cliente
 
@@ -83,7 +84,8 @@ Cuando un elemento no es válido, se cumplen los aspectos siguientes:
 - El elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS, y a veces con otras pseudoclases de interfaz de usuario (UI) –por ejemplo, {{cssxref(":out-of-range")}}– dependiendo del error, que te permite aplicar un estilo específico a elementos no válidos.
 - Si el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.
 
-> **Nota:** Hay varios errores que evitan que el formulario se envíe, incluidos {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}} o {{domxref('validityState.customError','customError')}}.
+> [!NOTE]
+> Hay varios errores que evitan que el formulario se envíe, incluidos {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}} o {{domxref('validityState.customError','customError')}}.
 
 ## Ejemplos de validación de formularios incorporados
 
@@ -149,13 +151,15 @@ Este CSS da un borde discontinuo rojo cuando la entrada no es válida, y un bord
 
 {{EmbedLiveSample("El_atributo_required", "100%", 80)}}
 
-> **Nota:** Puedes encontrar este ejemplo en vivo en GitHub como [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) (consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en vivo en GitHub como [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) (consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html)).
 
 Intenta enviar el formulario sin introducir ningún valor. Observa que la entrada no válida recibe el cursor, aparece un mensaje de error predeterminado («Complete este campo») y el formulario no se puede enviar.
 
 La presencia del atributo `required` en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase {{cssxref(':required')}}, tenga o no un valor. Si en el elemento {{HTMLElement("input")}} no se ha introducido ningún valor, `input` coincidirá con la pseudoclase {{cssxref(':invalid')}}.
 
-> **Nota:** Para una buena experiencia de usuario, indica al usuario que campos de formulario se requieren. No solo es una buena experiencia de usuario, sino que lo exigen las pautas de [accesibilidad](/es/docs/Learn/Accessibility) de WCAG. Además, solo requiere que los usuarios introduzcan los datos que realmente necesitas: Por ejemplo, ¿por qué realmente necesitas saber el género o el tratamiento de alguien?
+> [!NOTE]
+> Para una buena experiencia de usuario, indica al usuario que campos de formulario se requieren. No solo es una buena experiencia de usuario, sino que lo exigen las pautas de [accesibilidad](/es/docs/Learn/Accessibility) de WCAG. Además, solo requiere que los usuarios introduzcan los datos que realmente necesitas: Por ejemplo, ¿por qué realmente necesitas saber el género o el tratamiento de alguien?
 
 ### Validación de una expresión regular
 
@@ -196,7 +200,8 @@ Esto nos da la siguiente actualización; pruébalo:
 
 {{EmbedLiveSample("Validación de una expresión regular", "100%", 80)}}
 
-> **Nota:** Puedes encontrar este ejemplo en vivo en GitHub como [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en vivo en GitHub como [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html)).
 
 En este ejemplo, el elemento {{HTMLElement("input")}} acepta uno de los cuatro valores posibles: las cadenas «plátano», «Plátano», «cereza» o «Cereza». Las expresiones regulares distinguen entre mayúsculas y minúsculas, pero hemos hecho que admita versiones en mayúsculas y minúsculas utilizando un patrón «Aa» adicional anidado dentro de corchetes.
 
@@ -204,9 +209,11 @@ En este punto, intenta cambiar el valor dentro del atributo [`pattern`](/es/docs
 
 Si un valor no vacío de {{HTMLElement("input")}} no coincide con el patrón de la expresión regular, `input` coincidirá con la pseudoclase {{cssxref(':invalid')}}.
 
-> **Nota:** Algunos tipos de elementos {{HTMLElement ("input")}} no necesitan validar una expresión regular con el atributo [`pattern`](/es/docs/Web/HTML/Attributes/pattern). Especificar el tipo de correo electrónico (`email`), por ejemplo, valida el valor de las entradas con un patrón de dirección de correo electrónico bien formado o un patrón que coincida con una lista de direcciones de correo electrónico separadas por comas si tiene el atributo [`multiple`](/es/docs/Web/HTML/Attributes/multiple).
+> [!NOTE]
+> Algunos tipos de elementos {{HTMLElement ("input")}} no necesitan validar una expresión regular con el atributo [`pattern`](/es/docs/Web/HTML/Attributes/pattern). Especificar el tipo de correo electrónico (`email`), por ejemplo, valida el valor de las entradas con un patrón de dirección de correo electrónico bien formado o un patrón que coincida con una lista de direcciones de correo electrónico separadas por comas si tiene el atributo [`multiple`](/es/docs/Web/HTML/Attributes/multiple).
 
-> **Nota:** El elemento {{HTMLElement("textarea")}} no admite el atributo [`pattern`](/es/docs/Web/HTML/Attributes/pattern).
+> [!NOTE]
+> El elemento {{HTMLElement("textarea")}} no admite el atributo [`pattern`](/es/docs/Web/HTML/Attributes/pattern).
 
 ### Restringir la longitud de tus entradas
 
@@ -265,7 +272,8 @@ Aquí está el ejemplo que se ejecuta en vivo:
 
 {{EmbedLiveSample("Restringir_los_valores_de_tus_entradas", "100%", 100)}}
 
-> **Nota:** Puedes encontrar este ejemplo en vivo en GitHub como [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en vivo en GitHub como [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html)).
 
 > **Nota:** `<input type="number">` (y otros tipos, como `range` y `date`) también pueden tomar un atributo [`step`](/es/docs/Web/HTML/Attributes/step), que especifica en qué incremento aumenta o disminuye el valor cuando se utilizan los controles de entrada (como el botones numéricos arriba y abajo). En el ejemplo anterior no hemos incluido un atributo `step`, por lo que el valor predeterminado es `1`. Esto significa que los valores de coma flotante, como 3.2, también se mostrarán como no válidos.
 
@@ -359,7 +367,8 @@ Esto se traduce de la siguiente manera:
 
 Consulta [Atributos relacionados con la validación](/es/docs/HTML/HTML5/Validacion_de_restricciones#Atributos_relacionados_con_validaciones) para obtener una lista completa de los atributos que se pueden usar para restringir los valores de entrada y los tipos de entrada que los admiten.
 
-> **Nota:** Puedes encontrar este ejemplo en vivo en GitHub como [full-example.html](https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en vivo en GitHub como [full-example.html](https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html)).
 
 ## Validar formularios utilizando JavaScript
 
@@ -446,7 +455,8 @@ Puedes probarlo a continuación:
 
 {{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}
 
-> **Nota:** Puede encontrar este ejemplo vivo en GitHub como [custom-error-message.html](https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html) (véase también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html)).
+> [!NOTE]
+> Puede encontrar este ejemplo vivo en GitHub como [custom-error-message.html](https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html) (véase también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html)).
 
 #### Un ejemplo más detallado
 
@@ -473,7 +483,8 @@ Nuestra entrada para validar es [`<input type="email">`](/es/docs/Web/HTML/Eleme
 
 Nuestro objetivo es mostrar los mensajes de error dentro de un elemento `<span>`. El atributo [`aria-live`](/es/docs/Accessibility/ARIA/ARIA_Live_Regions) se establece en ese `<span>` para asegurar que todo el mundo podrá ver nuestro mensaje de error personalizado, incluidos los usuarios de lectores de pantalla.
 
-> **Nota:** Un punto clave a tener en cuenta es que establecer el atributo `novalidate` en el formulario impide que el formulario muestre sus propios cuadros de diálogo de error, y nos permite mostrar los mensajes de error personalizados en el DOM de la manera que nosotros elijamos.
+> [!NOTE]
+> Un punto clave a tener en cuenta es que establecer el atributo `novalidate` en el formulario impide que el formulario muestre sus propios cuadros de diálogo de error, y nos permite mostrar los mensajes de error personalizados en el DOM de la manera que nosotros elijamos.
 
 Ahora aplicaremos algo de CSS básico para mejorar ligeramente el aspecto del formulario y proporcionar algunos comentarios visuales cuando los datos de entrada no sean válidos:
 
@@ -600,11 +611,13 @@ Este es el resultado:
 
 {{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}
 
-> **Nota:** Puedes encontrar este ejemplo en vivo en GitHub como [detailed-custom-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en vivo en GitHub como [detailed-custom-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html) (consulta también su [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html)).
 
 La API de validación de restricciones te proporciona una herramienta poderosa para manejar la validación de formularios, y te permite tener un control enorme sobre la interfaz de usuario más allá de lo que puedas hacer solo con HTML y CSS.
 
-> **Nota:** Para obtener más información, consulta nuestra [guía de validación de restricciones](/es/docs/HTML/HTML5/Validacion_de_restricciones) y la referencia de [API de validación de restricciones](/es/docs/Web/API/Constraint_validation).
+> [!NOTE]
+> Para obtener más información, consulta nuestra [guía de validación de restricciones](/es/docs/HTML/HTML5/Validacion_de_restricciones) y la referencia de [API de validación de restricciones](/es/docs/Web/API/Constraint_validation).
 
 ### Validar formularios sin una API incorporada
 
diff --git a/files/es/learn/forms/how_to_build_custom_form_controls/index.md b/files/es/learn/forms/how_to_build_custom_form_controls/index.md
index 6c9765e5e2b34d..3105f04823ec63 100644
--- a/files/es/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/es/learn/forms/how_to_build_custom_form_controls/index.md
@@ -9,7 +9,8 @@ Hay muchos casos donde los [widgets de formularios HTML disponibles](/es/docs/HT
 
 En este aartículo, veremos cómo construir dicho widget. Para ello, trabajaremos con un ejemplo: Reconstruir el elemento {{HTMLElement("select")}}.
 
-> **Nota:** Nos enfocaremos en construir los widgets, no en cómo hacer que el código sea genérico y reutilizable; eso implicaría algún código JavaScript no trivial y manipulación del DOM en un contexto desconocido, y eso está fuera del alcance de este artículo.
+> [!NOTE]
+> Nos enfocaremos en construir los widgets, no en cómo hacer que el código sea genérico y reutilizable; eso implicaría algún código JavaScript no trivial y manipulación del DOM en un contexto desconocido, y eso está fuera del alcance de este artículo.
 
 ## Diseño, estructura, y semántica
 
@@ -29,7 +30,8 @@ El widget está en su estado normal cuando:
 - El widget estaba activo y el usuario hace clic en cualquier lugar fuera del widget
 - El widget estaba activo y el usuario mueve el foco a otro widget usando el teclado
 
-> **Nota:** Mover el foco al rededor de la página generalmente se hace presionando la tecla de tabulación, pero este no es el estándar en todas partes. Por ejemplo, el ciclo a través de enlaces en una página se realiza en Safari de forma predeterminada usando la combinación [combinación Opction+Tab](https://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/).
+> [!NOTE]
+> Mover el foco al rededor de la página generalmente se hace presionando la tecla de tabulación, pero este no es el estándar en todas partes. Por ejemplo, el ciclo a través de enlaces en una página se realiza en Safari de forma predeterminada usando la combinación [combinación Opction+Tab](https://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/).
 
 El widget está en su estado activo cuando:
 
@@ -63,7 +65,8 @@ En nuestro ejemplo, las especificaciones faltantes son obvias, así que las mane
 - [UXDesign.com](https://uxdesign.com/)
 - [The UX Design section of SmashingMagazine](https://uxdesign.smashingmagazine.com/)
 
-> **Nota:** Ademas, en la mayoría de los sistemas hay una forma de abrir el elemento {{HTMLElement("select")}} para ver todas las opciones disponibles (esto es lo mismo que hacer clic en el elemento {{HTMLElement("select")}} con un ratón). Esto se logra con Alt+Flecha abajo en Windows y no fué implementado en nuestro ejemplo —pero sería facil hacerlo, ya que el mecanismo ya se implementó para el evento `clic`.
+> [!NOTE]
+> Ademas, en la mayoría de los sistemas hay una forma de abrir el elemento {{HTMLElement("select")}} para ver todas las opciones disponibles (esto es lo mismo que hacer clic en el elemento {{HTMLElement("select")}} con un ratón). Esto se logra con Alt+Flecha abajo en Windows y no fué implementado en nuestro ejemplo —pero sería facil hacerlo, ya que el mecanismo ya se implementó para el evento `clic`.
 
 ### Definiendo la estructura y semántica HTML
 
@@ -643,9 +646,11 @@ So here's the result with our three states:
 
 Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.
 
-> **Advertencia:** The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.
+> [!WARNING]
+> The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.
 
-> **Nota:** Creating reusable widgets is something that can be a bit tricky. The [W3C Web Component draft](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) is one of the answers to this specific issue. [The X-Tag project](http://x-tags.org/) is a test implementation of this specification; we encourage you to take a look at it.
+> [!NOTE]
+> Creating reusable widgets is something that can be a bit tricky. The [W3C Web Component draft](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) is one of the answers to this specific issue. [The X-Tag project](http://x-tags.org/) is a test implementation of this specification; we encourage you to take a look at it.
 
 ### Why isn't it working?
 
@@ -904,7 +909,8 @@ window.addEventListener("load", () => {
 
 {{EmbedLiveSample("",120,130)}}
 
-> **Nota:** If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.
+> [!NOTE]
+> If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.
 
 ### Making the job easier
 
@@ -1666,7 +1672,8 @@ To support the [`listbox`](/es/docs/Accessibility/ARIA/ARIA_Techniques/Using_the
 </div>
 ```
 
-> **Nota:** Including both the `role` attribute and a `class` attribute is only necessary if you want to support legacy browsers that do not support the [CSS attribute selectors](/es/docs/CSS/Attribute_selectors).
+> [!NOTE]
+> Including both the `role` attribute and a `class` attribute is only necessary if you want to support legacy browsers that do not support the [CSS attribute selectors](/es/docs/CSS/Attribute_selectors).
 
 ### The `aria-selected` attribute
 
diff --git a/files/es/learn/forms/how_to_structure_a_web_form/index.md b/files/es/learn/forms/how_to_structure_a_web_form/index.md
index c270cc748379c3..fa7135c7228394 100644
--- a/files/es/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/es/learn/forms/how_to_structure_a_web_form/index.md
@@ -34,7 +34,8 @@ El elemento {{HTMLElement ("form")}} define formalmente un formulario y los atri
 
 Ya lo vimos en el artículo anterior.
 
-> **Advertencia:** Está estrictamente prohibido anidar un formulario dentro de otro formulario. Anidar formularios no es una buena idea porque puede ocasionar comportamientos impredecibles.
+> [!WARNING]
+> Está estrictamente prohibido anidar un formulario dentro de otro formulario. Anidar formularios no es una buena idea porque puede ocasionar comportamientos impredecibles.
 
 Siempre es posible usar controles de formulario fuera de un elemento {{HTMLElement ("form")}}. Si la haces, por defecto ese control no tiene nada que ver con ningún formulario, a menos que lo asocies a algún formulario con el atributo [`form`](/es/docs/Web/HTML/Attributes/form). Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.
 
@@ -68,7 +69,8 @@ Un pequeño ejemplo:
 </form>
 ```
 
-> **Nota:** Puedes encontrar este ejemplo en [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) ([consúltalo en vivo](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) ([consúltalo en vivo](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)).
 
 Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.
 
@@ -118,7 +120,8 @@ Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas»
 </form>
 ```
 
-> **Nota:** Puedes encontrar este ejemplo en [checkbox-label.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html) ([consúltalo en vivo](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en [checkbox-label.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html) ([consúltalo en vivo](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)).
 
 ### Etiquetas múltiples
 
@@ -166,9 +169,11 @@ Las variantes anteriores aumentan en efectividad a medida que se avanza por ella
 - En el segundo ejemplo, las cosas son un poco más claras: la etiqueta que se lee junto con la entrada de texto es «Editar texto nombre estrella nombre obligatorio», pero las etiquetas aún se leen por separado. Las cosas continúan siendo un poco confusas, pero esta vez funciona algo mejor porque `<input>` tiene una etiqueta asociada.
 - El tercer ejemplo es el mejor: la etiqueta se lee en conjunto, y la etiqueta que se lee con la entrada es «Editar texto nombre requerido».
 
-> **Nota:** Es posible que obtengas resultados ligeramente diferentes dependiendo de tu lector de pantalla. Esta prueba se hizo con VoiceOver (NVDA se comporta de manera similar). Nos encantaría conocer tus experiencias.
+> [!NOTE]
+> Es posible que obtengas resultados ligeramente diferentes dependiendo de tu lector de pantalla. Esta prueba se hizo con VoiceOver (NVDA se comporta de manera similar). Nos encantaría conocer tus experiencias.
 
-> **Nota:** Puedes encontrar este ejemplo en GitHub como [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) ([o consultarlo en vivo](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). No pruebes el ejemplo con las dos o tres versiones sin los comentarios porque los lectores de pantalla se confundirán si hay múltiples etiquetas y múltiples entradas con el mismo ID.
+> [!NOTE]
+> Puedes encontrar este ejemplo en GitHub como [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) ([o consultarlo en vivo](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). No pruebes el ejemplo con las dos o tres versiones sin los comentarios porque los lectores de pantalla se confundirán si hay múltiples etiquetas y múltiples entradas con el mismo ID.
 
 ## Estructuras HTML comunes que se utilizan en los formularios
 
diff --git a/files/es/learn/forms/html5_input_types/index.md b/files/es/learn/forms/html5_input_types/index.md
index 32a769400278c0..e17fc60a65f42f 100644
--- a/files/es/learn/forms/html5_input_types/index.md
+++ b/files/es/learn/forms/html5_input_types/index.md
@@ -28,7 +28,8 @@ En el [artículo anterior](/es/docs/Learn/Forms/Basic_native_form_controls) vimo
   </tbody>
 </table>
 
-> **Nota:** La mayoría de las características discutidas en este artículo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepción. Si quieres más detalles referente al soporte de navegadores, deberías consultar nuestra [referéncia de elementos de formulario HTML](/es/docs/Web/HTML/Element#Forms), y en particular nuestra referéncia extensiva de [Tipos de \<input>](/es/docs/Web/HTML/Element/input).
+> [!NOTE]
+> La mayoría de las características discutidas en este artículo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepción. Si quieres más detalles referente al soporte de navegadores, deberías consultar nuestra [referéncia de elementos de formulario HTML](/es/docs/Web/HTML/Element#Forms), y en particular nuestra referéncia extensiva de [Tipos de \<input>](/es/docs/Web/HTML/Element/input).
 
 Debido a que la apariéncia de un control de formulario puede ser algo distinta con respecto a unas especificaciones del diseñador, los desarrolladores web a veces construyen sus propios controles de formulario personalizados. Cubrimos este aspecto en un tutorial avanzado: [Cómo construir widgets de formulario personalizados](/es/docs/Learn/Forms/How_to_build_custom_form_widgets).
 
@@ -54,7 +55,8 @@ En algunos dispositivos, en particular dispositivos táctiles con teclados diná
 
 ![firefox for android email keyboard, with ampersand displayed by default.](fx-android-email-type-keyboard.jpg)
 
-> **Nota:** Puedes encontrar ejemplos sobre los tipos de entrada de texto básicos en [Ejemplos input básicos](https://mdn.github.io/learning-area/html/forms/basic-input-examples/) (Consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/basic-input-examples/index.html)).
+> [!NOTE]
+> Puedes encontrar ejemplos sobre los tipos de entrada de texto básicos en [Ejemplos input básicos](https://mdn.github.io/learning-area/html/forms/basic-input-examples/) (Consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/basic-input-examples/index.html)).
 
 Mejorar la experiéncia del usuario para usuarios con estos dispositivos, es otra buena razón para utilizar estos tipos de input más recientes.
 
@@ -66,7 +68,8 @@ Pero _no debería ser considerado_ una medida de seguridad exhaustiva! Tus aplic
 
 Ten en cuenta que `a@b` es una dirección de correo electrónico válida de acuerdo a las restricciones proporcionadaas por defecto. Esto es debido a que el tipo de input `email`, permite por defecto direcciones de correo electrónico de una intranet. Para implementar un comportamiento diferente de validación puedes utilizar el atributo [`pattern`](/es/docs/Web/HTML/Attributes/pattern), y también puedes utilizar mensajes de error personalizados; Hablaremos de cómo utilizar estas características en [Validación de formularios en el lado cliente](/es/docs/Learn/Forms/Form_validation) en un artículo posterior.
 
-> **Nota:** Si los datos introducidos no son una dirección de correo electrónico, habrá coincidéncia con la pseudo clase {{cssxref(':invalid')}}, y la propiedad {{domxref('validityState.typeMismatch')}} devolverá `true`.
+> [!NOTE]
+> Si los datos introducidos no son una dirección de correo electrónico, habrá coincidéncia con la pseudo clase {{cssxref(':invalid')}}, y la propiedad {{domxref('validityState.typeMismatch')}} devolverá `true`.
 
 ## Campo de búsqueda
 
@@ -116,7 +119,8 @@ Mira el siguiente ejemplo tomado de Firefox para Android:
 
 ![firefox for android email keyboard, with ampersand displayed by default.](fx-android-url-type-keyboard.jpg)
 
-> **Nota:** Solo porque el URL esté bien formado no significa necesariamente que la dirección al que hace referéncia exista!
+> [!NOTE]
+> Solo porque el URL esté bien formado no significa necesariamente que la dirección al que hace referéncia exista!
 
 ## Campo numérico
 
@@ -144,7 +148,8 @@ El segundo crea un control numérico cuyo valor está restringido a cualquier va
 
 El tipo de input `number` tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido ( por ejemplo los códigos postales de USA, cuyo rango va de `00001` a `99999`), entonces sería una mejor opción utilizar el tipo `tel`: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.
 
-> **Nota:** En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas `number`
+> [!NOTE]
+> En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas `number`
 
 ## Slider controls
 
diff --git a/files/es/learn/forms/index.md b/files/es/learn/forms/index.md
index e5b5fe8e5963d9..f96343d156b549 100644
--- a/files/es/learn/forms/index.md
+++ b/files/es/learn/forms/index.md
@@ -18,7 +18,8 @@ El elemento `{{ HTMLElement("input") }}` tiene nuevos valores para el atributo [
 - `url`: El elemento representa un control para editar una [URL](http://es.wikipedia.org/URL). Se quitan los saltos de línea y espacios en blanco antes y después del valor ingresados.
 - `email`: El elemento representa una dirección de correo electrónico. Los saltos de línea se quitan automáticamente del valor ingresado. Puede ingresarse una direccón de correo no válida, pero el campo de ingreso sólo funcionará si la dirección ingresada satisface la producción ABNF `1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )` donde `atext` está definida en RFC 5322, sección 3.2.3 y `ldh-str` está definida en RFC 1034, sección 3.5.
 
-  > **Nota:** si el atributo [`multiple`](/es/docs/Web/HTML/Element/input#multiple) está agregado, pueden ingresarse muchas direcciones de correo electrónico en ese campo {{ HTMLElement("input") }}, como una lista separada por espacios, pero no está implementado actualmente en Firefox.
+  > [!NOTE]
+  > Si el atributo [`multiple`](/es/docs/Web/HTML/Element/input#multiple) está agregado, pueden ingresarse muchas direcciones de correo electrónico en ese campo {{ HTMLElement("input") }}, como una lista separada por espacios, pero no está implementado actualmente en Firefox.
 
 El elemento {{ HTMLElement("input") }} también tiene nuevos atributos:
 
diff --git a/files/es/learn/forms/sending_and_retrieving_form_data/index.md b/files/es/learn/forms/sending_and_retrieving_form_data/index.md
index c34cbc1f0ab672..ad7a99b455a3a4 100644
--- a/files/es/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/es/learn/forms/sending_and_retrieving_form_data/index.md
@@ -47,7 +47,8 @@ La web se basa en una arquitectura cliente / servidor muy básica que se puede r
 
 En el lado del cliente, un formulario HTML no es más que una manera fácil de usar conveniente para configurar una petición HTTP para enviar datos a un servidor. Esto permite al usuario para proporcionar información a ser entregada en la petición HTTP.
 
-> **Nota:** Para tener una mejor idea de cómo funcionan las arquitecturas cliente-servidor, lea nuestra [programación de páginas web del lado del servidor, módulo: primeros pasos](/es/docs/Learn/Server-side/First_steps). En el lado del cliente: Debes definir como envías los datos.
+> [!NOTE]
+> Para tener una mejor idea de cómo funcionan las arquitecturas cliente-servidor, lea nuestra [programación de páginas web del lado del servidor, módulo: primeros pasos](/es/docs/Learn/Server-side/First_steps). En el lado del cliente: Debes definir como envías los datos.
 
 El elemento {{HTMLElement ( "form")}} define cómo se enviarán los datos. Todos sus atributos están diseñados para que pueda configurar la solicitud que se enviará cuando un usuario pulsa un botón de envío. Los dos atributos más importantes son [`acción`](/es/docs/Web/HTML/Element/forma#acción) y [`método`](/es/docs/Web/HTML/Element/forma#método).
 
@@ -79,7 +80,8 @@ Muchas páginas más antiguas utilizan la siguiente notación para indicar que l
 <form action="#"></form>
 ```
 
-> **Nota:** Es posible especificar una dirección URL que utiliza el protocolo HTTPS (HTTP seguro). Al hacer esto, los datos se cifran junto con el resto de la solicitud, incluso si el propio formulario está alojado en una página insegura se accede a través de HTTPS. Por otro lado, si el formulario está alojado en una página segura, pero se especifica una dirección URL HTTP insegura con el atributo [`acción`](/es/docs/Web/HTML/Element/form#acción) , todos los navegadores mostrarán una advertencia de seguridad para el usuario cada vez que intenten enviar datos, ya que estos no se pueden cifrar.
+> [!NOTE]
+> Es posible especificar una dirección URL que utiliza el protocolo HTTPS (HTTP seguro). Al hacer esto, los datos se cifran junto con el resto de la solicitud, incluso si el propio formulario está alojado en una página insegura se accede a través de HTTPS. Por otro lado, si el formulario está alojado en una página segura, pero se especifica una dirección URL HTTP insegura con el atributo [`acción`](/es/docs/Web/HTML/Element/form#acción) , todos los navegadores mostrarán una advertencia de seguridad para el usuario cada vez que intenten enviar datos, ya que estos no se pueden cifrar.
 
 #### El atributo [`método`](/es/docs/Web/HTML/Element/form#método)
 
@@ -125,7 +127,8 @@ GET /? = Decir Hola & a = mamá HTTP / 1.1
 Anfitrión: foo.com
 ```
 
-> **Nota:** Puede encontrar este ejemplo en GitHub - ver [llegar-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html) ( [verlo en directo también](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html) ).
+> [!NOTE]
+> Puede encontrar este ejemplo en GitHub - ver [llegar-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html) ( [verlo en directo también](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html) ).
 
 ##### El método POST
 
@@ -162,7 +165,8 @@ decir = Hi & a = mamá
 
 La cabecera `Content-Length` indica el tamaño del cuerpo, y la cabecera `Content-Type` indica el tipo de recurso que se envía al servidor. Discutiremos estas cabeceras más adelante.
 
-> **Nota:** Puede encontrar este ejemplo en GitHub - ver [post-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html) ( [verlo en directo también](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) ).
+> [!NOTE]
+> Puede encontrar este ejemplo en GitHub - ver [post-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html) ( [verlo en directo también](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) ).
 
 #### Visualización de peticiones HTTP
 
@@ -198,7 +202,8 @@ Este ejemplo muestra una página con los datos que enviamos. Esto se puede ver e
 
 ![](php-result.png)
 
-> **Nota:** Este ejemplo no funcionará cuando se carga en un navegador localmente - los navegadores no pueden interpretar código PHP, por lo que cuando se envía el formulario en el navegador sólo se puede ofrecer la descarga del archivo PHP para usted. Para conseguir que funcione, es necesario ejecutar el ejemplo a través de un servidor PHP de algún tipo. Buenas opciones para probar PHP locales son [MAMP](https://www.mamp.info/en/downloads/) (Mac y Windows) y [AMPPS](http://ampps.com/download) (Mac, Windows, Linux).
+> [!NOTE]
+> Este ejemplo no funcionará cuando se carga en un navegador localmente - los navegadores no pueden interpretar código PHP, por lo que cuando se envía el formulario en el navegador sólo se puede ofrecer la descarga del archivo PHP para usted. Para conseguir que funcione, es necesario ejecutar el ejemplo a través de un servidor PHP de algún tipo. Buenas opciones para probar PHP locales son [MAMP](https://www.mamp.info/en/downloads/) (Mac y Windows) y [AMPPS](http://ampps.com/download) (Mac, Windows, Linux).
 
 #### Ejemplo: Python
 
@@ -225,7 +230,8 @@ Las dos plantillas de referencia en el código anterior son los siguientes:
 - [form.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html) : La misma forma que hemos visto anteriormente en la [El método POST](#el_método_post) sección, pero con el `action` conjunto a `\{{ url_for('hello') }}`. (Esta es una [Jinja2](https://jinja.pocoo.org/docs/2.9/) plantilla, que es básicamente HTML, pero puede contener llamadas al código Python que ejecuta el servidor web que figura entre corchetes. `url_for('hello')` Básicamente está diciendo "redirigir a `/hello` cuando se envía el formulario").
 - [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) :Esta plantilla solo contiene una línea que representa los dos bits de datos que se le pasan cuando se procesa. Esto se hace a través de la función `hello()` que se ha visto anteriormente, y que se ejecuta cuando la URL`/hello` es accedida.
 
-> **Nota:** Una vez más, este código no funcionará si sólo intenta cargarlo en un navegador directamente. Python funciona un poco diferente a PHP - Para ejecutar este código local que necesita para [instalar Python / PIP](/es/docs/Learn/Server-side/Django/development_environment#Installing_Python_3) , a continuación, instalar el frasco utilizando `pip3 install flask`. En este punto, usted debe ser capaz de ejecutar el ejemplo utilizando `python3 python-example.py`, a continuación, deberá navegar a `localhost:5000` en su barra de direcciones.
+> [!NOTE]
+> Una vez más, este código no funcionará si sólo intenta cargarlo en un navegador directamente. Python funciona un poco diferente a PHP - Para ejecutar este código local que necesita para [instalar Python / PIP](/es/docs/Learn/Server-side/Django/development_environment#Installing_Python_3) , a continuación, instalar el frasco utilizando `pip3 install flask`. En este punto, usted debe ser capaz de ejecutar el ejemplo utilizando `python3 python-example.py`, a continuación, deberá navegar a `localhost:5000` en su barra de direcciones.
 
 #### Otros lenguajes y frameworks
 
@@ -240,7 +246,8 @@ Hay muchas otras tecnologías del lado del servidor que puede utilizar para el m
 
 Vale la pena señalar que incluso el uso de estos marcos, trabajar con formularios no es necesariamente _fácil_ . Pero es mucho más fácil que tratar de escribir toda la funcionalidad a partir de cero, además, le ahorrará mucho tiempo.
 
-> **Nota:** Está más allá del alcance de este artículo para enseñarle cualquier lenguaje del lado del servidor o marcos de trabajo. Los enlaces de arriba le dará un poco de ayuda,en caso de que desee aprender.
+> [!NOTE]
+> Está más allá del alcance de este artículo para enseñarle cualquier lenguaje del lado del servidor o marcos de trabajo. Los enlaces de arriba le dará un poco de ayuda,en caso de que desee aprender.
 
 ## Un caso especial: el envío de archivos
 
@@ -270,9 +277,11 @@ Por ejemplo:
 </form>
 ```
 
-> **Nota:** Algunos navegadores son compatibles con la [`múltiple`](/es/docs/Web/HTML/Element/input#múltiple) atributo en el elemento {{HTMLElement ( "input")}}, lo que permite elegir más de un archivo para subir con un único elemento `<input>` . Cómo el servidor gestiona los archivos realmente depende de la tecnología utilizada en el servidor. Como se mencionó anteriormente, el uso de un marco le hará la vida mucho más fácil.
+> [!NOTE]
+> Algunos navegadores son compatibles con la [`múltiple`](/es/docs/Web/HTML/Element/input#múltiple) atributo en el elemento {{HTMLElement ( "input")}}, lo que permite elegir más de un archivo para subir con un único elemento `<input>` . Cómo el servidor gestiona los archivos realmente depende de la tecnología utilizada en el servidor. Como se mencionó anteriormente, el uso de un marco le hará la vida mucho más fácil.
 
-> **Advertencia:** Muchos servidores están configurados con un límite de tamaño para los archivos y las peticiones HTTP con el fin de prevenir el abuso. Es importante comprobar este límite con el administrador del servidor antes de enviar un archivo.
+> [!WARNING]
+> Muchos servidores están configurados con un límite de tamaño para los archivos y las peticiones HTTP con el fin de prevenir el abuso. Es importante comprobar este límite con el administrador del servidor antes de enviar un archivo.
 
 ## Precauciones de seguridad comunes
 
@@ -316,7 +325,8 @@ Todos los datos que vienen a su servidor deben comprobarse y ser desinfectados.
 
 Debería evitar muchos o la mayoría de estos problemas, si sigue estas tres reglas, pero siempre es una buena idea obtener una revisión de seguridad realizada por una tercera parte competente. No asuma que usted ha visto todos los posibles problemas.
 
-> **Nota:** La [seguridad del sitio web](/es/docs/Learn/Server-side/First_steps/Website_security) el artículo de nuestro [lado del servidor](/es/docs/Learn/Server-side) tema de aprendizaje analiza las amenazas anteriores y las posibles soluciones con más detalle.
+> [!NOTE]
+> La [seguridad del sitio web](/es/docs/Learn/Server-side/First_steps/Website_security) el artículo de nuestro [lado del servidor](/es/docs/Learn/Server-side) tema de aprendizaje analiza las amenazas anteriores y las posibles soluciones con más detalle.
 
 ## Conclusión
 
diff --git a/files/es/learn/forms/styling_web_forms/index.md b/files/es/learn/forms/styling_web_forms/index.md
index 5d06a87e634db8..20ed31de17a276 100644
--- a/files/es/learn/forms/styling_web_forms/index.md
+++ b/files/es/learn/forms/styling_web_forms/index.md
@@ -77,7 +77,8 @@ El verdadero problema con todos estos controles es que tienen una estructura muy
 
 Si desea personalizar a fondo esos controles, realmente tiene que crear los suyos usando HTML, CSS y JavaScript. Esto está más allá del alcance de los artículos de formularios principales, pero lo analizamos en un artículo avanzado [Cómo crear controles de formulario personalizados](/es/docs/Learn/Forms/How_to_build_custom_form_controls).
 
-> **Nota:** Hay algunos pseudoelementos CSS propietarios disponibles que le permiten diseñar componentes internos de estos controles de formulario, como {{cssxref('::-moz-range-track')}}, pero estos no son consistentes entre los navegadores , por lo que no se puede confiar. También los mencionaremos más adelante.
+> [!NOTE]
+> Hay algunos pseudoelementos CSS propietarios disponibles que le permiten diseñar componentes internos de estos controles de formulario, como {{cssxref('::-moz-range-track')}}, pero estos no son consistentes entre los navegadores , por lo que no se puede confiar. También los mencionaremos más adelante.
 
 ## Lo bueno
 
@@ -161,7 +162,8 @@ El `<fieldset>` también debe posicionarse, de modo que `<legend>` se posicione
 
 El elemento {{HTMLElement("legend")}} es muy importante para la accesibilidad; las tecnologías de asistencia lo hablarán como parte de la etiqueta de cada elemento de formulario dentro del conjunto de campos, pero usar una técnica como la anterior está bien. El contenido de la leyenda aún se pronunciará de la misma manera; es sólo la posición visual la que ha cambiado.
 
-> **Nota:** También puede usar la propiedad {{cssxref("transform")}} para ayudar a posicionar su `<legend>`. Sin embargo, cuando lo coloca, por ejemplo, con un `transform: translateY();`, se mueve pero deja un feo espacio en el borde del `<fieldset>`, del que no es fácil deshacerse.
+> [!NOTE]
+> También puede usar la propiedad {{cssxref("transform")}} para ayudar a posicionar su `<legend>`. Sin embargo, cuando lo coloca, por ejemplo, con un `transform: translateY();`, se mueve pero deja un feo espacio en el borde del `<fieldset>`, del que no es fácil deshacerse.
 
 ## Un ejemplo de estilo específico
 
@@ -380,7 +382,8 @@ button:focus {
 
 ![](updated-form-screenshot.jpg)
 
-> **Nota:** Si su ejemplo no funciona como esperaba y desea compararlo con nuestra versión, puede encontrarlo en GitHub; [verlo en vivo](https://mdn.github.io/learning-area/html/forms/postcard-example/) (ver también el [código fuente](https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example)).
+> [!NOTE]
+> Si su ejemplo no funciona como esperaba y desea compararlo con nuestra versión, puede encontrarlo en GitHub; [verlo en vivo](https://mdn.github.io/learning-area/html/forms/postcard-example/) (ver también el [código fuente](https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example)).
 
 ## ¡Pon a prueba tus habilidades!
 
diff --git a/files/es/learn/forms/test_your_skills_colon__html5_controls/index.md b/files/es/learn/forms/test_your_skills_colon__html5_controls/index.md
index 5a180ed42f6da7..66a22b23e5199e 100644
--- a/files/es/learn/forms/test_your_skills_colon__html5_controls/index.md
+++ b/files/es/learn/forms/test_your_skills_colon__html5_controls/index.md
@@ -7,7 +7,8 @@ slug: Learn/Forms/Test_your_skills:_HTML5_controls
 
 El objetivo de esta prueba es evaluar si has comprendido nuestro artículo [Los tipos de entrada de HTML5](/es/docs/Learn/Forms/HTML5_input_types).
 
-> **Nota:** Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+> [!NOTE]
+> Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
 >
 > Si tienes problemas, pide ayuda — mira la sección [Evaluación o ayuda adicional](#Evaluación_o_ayuda_adicional) al final de esta página.
 
diff --git a/files/es/learn/forms/test_your_skills_colon__other_controls/index.md b/files/es/learn/forms/test_your_skills_colon__other_controls/index.md
index 9136d8aa610982..531f1e3c01c238 100644
--- a/files/es/learn/forms/test_your_skills_colon__other_controls/index.md
+++ b/files/es/learn/forms/test_your_skills_colon__other_controls/index.md
@@ -7,7 +7,8 @@ slug: Learn/Forms/Test_your_skills:_Other_controls
 
 El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo [Otros controles de formulario](/es/docs/Learn/Forms/Other_form_controls).
 
-> **Nota:** Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+> [!NOTE]
+> Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
 >
 > Si te atascas, pide ayuda — mira la sección [Evaluación o ayuda adicional](/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional) al final de esta página.
 
diff --git a/files/es/learn/forms/your_first_form/index.md b/files/es/learn/forms/your_first_form/index.md
index 759ccb28b818d9..6adfc4b66e15bb 100644
--- a/files/es/learn/forms/your_first_form/index.md
+++ b/files/es/learn/forms/your_first_form/index.md
@@ -69,7 +69,8 @@ Este elemento define formalmente un formulario. Es un elemento contenedor, como
 - El atributo `action` define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
 - El atributo `method` define con qué método HTTP se envían los datos (generalmente `get` o `post`).
 
-> **Nota:** Veremos cómo funcionan esos atributos en nuestro artículo [Enviar los datos de un formulario](/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data) que encontrarás más adelante.
+> [!NOTE]
+> Veremos cómo funcionan esos atributos en nuestro artículo [Enviar los datos de un formulario](/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data) que encontrarás más adelante.
 
 Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.
 
@@ -143,13 +144,15 @@ El elemento {{htmlelement("button")}} también acepta un atributo de `type`, que
 - Un clic en un botón `reset` restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.
 - Un clic en un botón `button` no hace... ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.
 
-> **Nota:** También puedes usar el elemento {{HTMLElement("input")}} con el atributo `type` correspondiente para generar un botón, por ejemplo `<input type="submit">`. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.
+> [!NOTE]
+> También puedes usar el elemento {{HTMLElement("input")}} con el atributo `type` correspondiente para generar un botón, por ejemplo `<input type="submit">`. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.
 
 ## Aplicar estilo básico a un formulario
 
 Ahora que has terminado de escribir el código HTML de tu formulario, guárdalo y observa lo que ocurre en un navegador. Por ahora, se verá bastante feo.
 
-> **Nota:** Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ver en vivo](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
+> [!NOTE]
+> Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ver en vivo](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
 
 Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle, por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS para que se vea un poco bien.
 
@@ -231,7 +234,8 @@ button {
 
 Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho menos feo.
 
-> **Nota:** Puedes encontrar nuestra versión en GitHub en [first-form-styled.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html) ([ver en vivo](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)).
+> [!NOTE]
+> Puedes encontrar nuestra versión en GitHub en [first-form-styled.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html) ([ver en vivo](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)).
 
 ## Enviar los datos del formulario a un servidor web
 
diff --git a/files/es/learn/getting_started_with_the_web/css_basics/index.md b/files/es/learn/getting_started_with_the_web/css_basics/index.md
index 5af1ca6630c332..d101d71e9493e3 100644
--- a/files/es/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/es/learn/getting_started_with_the_web/css_basics/index.md
@@ -113,7 +113,8 @@ Ahora que has explorado lo básico de CSS, empieza por añadir información y al
    }
    ```
 
-   > **Nota:** se ha añadido un comentario para explicar qué significa «px». Todo lo que está en un documento de CSS entre `/*` y `*/` es un **comentario en CSS**, el cual el navegador descarta cuando carga el código. Este es un espacio donde puedes escribir notas útiles sobre lo que estás haciendo.
+   > [!NOTE]
+   > Se ha añadido un comentario para explicar qué significa «px». Todo lo que está en un documento de CSS entre `/*` y `*/` es un **comentario en CSS**, el cual el navegador descarta cuando carga el código. Este es un espacio donde puedes escribir notas útiles sobre lo que estás haciendo.
 
 4. Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del cuerpo del HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, y {{htmlelement("p")}}). También centra el texto del título, escoge un ancho de línea y espaciado entre letras en el contenido del texto para hacerlo un poco más legible:
 
@@ -226,9 +227,11 @@ Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente
 
 El elemento {{htmlelement("body")}} es un elemento en nivel de bloque (**block-level**), lo que significa que tomará espacio en la página y que puede tener otros valores de espacio aplicables como margen. Las imágenes, por otra parte, son elementos **inline**, lo que quiere decir que no puedes aplicarles márgenes, debes dar a la imagen un comportamiento de _block-level_ usando `display: block;`.
 
-> **Nota:** las instrucciones anteriores asumen que estás usando una imagen más pequeña que el ancho establecido en `body` (600 píxeles). Si tu imagen es más grande, desbordará el cuerpo, derramándose en el resto de la página. Para solucionar esto, puedes hacer lo siguiente: 1) reducir el ancho de la imagen usando un [editor gráfico](https://es.wikipedia.org/wiki/Editor_de_gráficos_rasterizados), o 2) usar CSS para dimensionar la imagen estableciendo la propiedad {{cssxref("width")}} en el elemento `<img>` con un valor menor.
+> [!NOTE]
+> Las instrucciones anteriores asumen que estás usando una imagen más pequeña que el ancho establecido en `body` (600 píxeles). Si tu imagen es más grande, desbordará el cuerpo, derramándose en el resto de la página. Para solucionar esto, puedes hacer lo siguiente: 1) reducir el ancho de la imagen usando un [editor gráfico](https://es.wikipedia.org/wiki/Editor_de_gráficos_rasterizados), o 2) usar CSS para dimensionar la imagen estableciendo la propiedad {{cssxref("width")}} en el elemento `<img>` con un valor menor.
 
-> **Nota:** no te preocupes si aún no entiendes `display: block;` y la diferencia entre un elemento de bloque y un elemento _inline_. Lo entenderás en tanto estudies CSS a profundidad. Puedes encontrar más en cuanto a los diferentes valores disponibles para _display_ en la [página de referencia de display](/es/docs/Web/CSS/display).
+> [!NOTE]
+> No te preocupes si aún no entiendes `display: block;` y la diferencia entre un elemento de bloque y un elemento _inline_. Lo entenderás en tanto estudies CSS a profundidad. Puedes encontrar más en cuanto a los diferentes valores disponibles para _display_ en la [página de referencia de display](/es/docs/Web/CSS/display).
 
 ## Conclusión
 
diff --git a/files/es/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/es/learn/getting_started_with_the_web/dealing_with_files/index.md
index ab5106c729d5ac..3f7e18f330ca58 100644
--- a/files/es/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/es/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -32,7 +32,8 @@ A continuación, veamos qué estructura debería tener tu sitio de prueba. Las c
 3. Directorio **`styles`**: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado `styles`, dentro de tu directorio `pruebasitio`.
 4. Directorio **`scripts`**: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado `scripts`, dentro de tu directorio `pruebasitio`.
 
-> **Nota:** En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada **Ocultar extensiones para tipos de archivos conocidos**. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción **Opciones de directorio...**, desmarcando la casilla de verificación **Ocultar extensiones para tipos de archivo conocidos** y luego haciendo clic en **Aceptar**. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.
+> [!NOTE]
+> En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada **Ocultar extensiones para tipos de archivos conocidos**. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción **Opciones de directorio...**, desmarcando la casilla de verificación **Ocultar extensiones para tipos de archivo conocidos** y luego haciendo clic en **Aceptar**. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.
 
 ## Rutas de archivo
 
@@ -69,7 +70,8 @@ Algunas reglas generales para las rutas de archivo:
 
 Por ahora, esto es todo lo que necesitas saber.
 
-> **Nota:** El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. `C:\windows`. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.
+> [!NOTE]
+> El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. `C:\windows`. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.
 
 ## ¿Qué más se debería hacer?
 
diff --git a/files/es/learn/getting_started_with_the_web/html_basics/index.md b/files/es/learn/getting_started_with_the_web/html_basics/index.md
index a3c19b5b4018eb..573ce3238e417a 100644
--- a/files/es/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/es/learn/getting_started_with_the_web/html_basics/index.md
@@ -50,7 +50,8 @@ Un atributo debe tener siempre:
 
 Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.
 
-> **Nota:** el atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera de los caracteres `"` `'` `` ` `` `=` `<` `>`) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.
+> [!NOTE]
+> El atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera de los caracteres `"` `'` `` ` `` `=` `<` `>`) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.
 
 ### Anidar elementos
 
@@ -125,7 +126,8 @@ La frase clave acerca del texto alt de arriba es «texto que debería describir
 
 Prueba a dar con mejores textos alt para tu imagen.
 
-> **Nota:** Descubre más acerca de la accesibilidad en el [módulo de aprendizaje sobre la accesibilidad](/es/docs/Web/Accessibility).
+> [!NOTE]
+> Descubre más acerca de la accesibilidad en el [módulo de aprendizaje sobre la accesibilidad](/es/docs/Web/Accessibility).
 
 ## Marcado de texto
 
@@ -144,7 +146,8 @@ Los elementos de encabezado permiten especificar que ciertas partes del contenid
 
 Intenta ahora añadir un título apropiado para tu página HTML, antes de tu elemento {{htmlelement("img")}}.
 
-> **Nota:** verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices elementos de encabezado para hacer el texto más grande o más oscuro, porque este elemento se utiliza por [accesibilidad](/es/docs/Learn/Accessibility/HTML#Contenido_del_texto) y otras [razones como el posicionamiento en buscadores](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#¿Por_qué_necesitamos_estructura) (_Search Engine Optimization, SEO_). Intenta crear una secuencia significativa de encabezados en tus páginas, sin saltarte niveles.
+> [!NOTE]
+> Verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices elementos de encabezado para hacer el texto más grande o más oscuro, porque este elemento se utiliza por [accesibilidad](/es/docs/Learn/Accessibility/HTML#Contenido_del_texto) y otras [razones como el posicionamiento en buscadores](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#¿Por_qué_necesitamos_estructura) (_Search Engine Optimization, SEO_). Intenta crear una secuencia significativa de encabezados en tus páginas, sin saltarte niveles.
 
 ### Párrafos
 
diff --git a/files/es/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/es/learn/getting_started_with_the_web/installing_basic_software/index.md
index 1d099604d2dc2e..cd9328cbb0d239 100644
--- a/files/es/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/es/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -39,7 +39,8 @@ Por ahora, solo tendrás que instalar un par de navegadores web de escritorio pa
 
 Antes de continuar, deberías instalar al menos dos de estos navegadores y tenerlos disponibles para pruebas.
 
-> **Nota:** Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.
+> [!NOTE]
+> Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.
 
 ### Instalación de un servidor web local
 
diff --git a/files/es/learn/getting_started_with_the_web/javascript_basics/index.md b/files/es/learn/getting_started_with_the_web/javascript_basics/index.md
index 70c391085a74b3..f82313ee448fbc 100644
--- a/files/es/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/es/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -29,7 +29,8 @@ La sección de arriba suena realmente emocionante, y debería serlo. JavaScript
 
 Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentirse cómodo con HTML y CSS. Deberás comenzar poco a poco y continuar trabajando en pasos pequeños y consistentes. Para comenzar, mostraremos cómo añadir JavaScript básico a tu página, creando un «_¡Hola Mundo!_» de ejemplo ([el estándar en los ejemplos básicos de programación](https://es.wikipedia.org/wiki/Hola_mundo)).
 
-> **Advertencia:** si no has venido siguiendo el resto de nuestro curso, [descarga este código de ejemplo](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) y úsalo como punto de partida.
+> [!WARNING]
+> Si no has venido siguiendo el resto de nuestro curso, [descarga este código de ejemplo](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) y úsalo como punto de partida.
 
 1. Primero, ve a tu sitio de pruebas y crea una carpeta llamada `scripts`. Luego, dentro de la nueva carpeta de scripts, crea un nuevo archivo llamado `main.js` y guárdalo.
 2. A continuación, abre tu archivo `index.html` e introduce el siguiente código en una nueva línea, justo antes de la etiqueta de cierre `</body>`:
@@ -48,7 +49,8 @@ Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentir
 
 5. Finalmente, asegúrate de que has guardado los archivos HTML y JavaScript, y abre `index.html` en el navegador. Deberías ver algo así: ![](hello-world.png)
 
-> **Nota:** la razón por la que has puesto el elemento {{htmlelement("script")}} casi al final del documento HTML es porque **el navegador carga el HTML en el orden en que aparece en el archivo**.
+> [!NOTE]
+> La razón por la que has puesto el elemento {{htmlelement("script")}} casi al final del documento HTML es porque **el navegador carga el HTML en el orden en que aparece en el archivo**.
 >
 > Si se cargara primero JavaScript y se supone que debe afectar al HTML que tiene debajo, podría no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone debe trabajar. Por lo tanto, colocar el JavaScript cerca del final de la página es normalmente la mejor estrategia. Para aprender más sobre enfoques alternativos, mira [Estrategias de carga de scripts](/es/docs/Learn/JavaScript/First_steps/Qué_es_JavaScript#Estrategias_de_carga_de_scripts).
 
@@ -58,13 +60,15 @@ El texto del título ha sido cambiado por _¡Hola mundo!_ usando JavaScript. Hic
 
 Después de eso, estableciste el valor de la propiedad {{domxref("Node.textContent", "textContent")}} de la variable `miTitulo` (que representa el contenido del título) como _¡Hola mundo!_
 
-> **Nota:** Las dos características que has utilizado en este ejercicio forman parte de la API del [Modelo de Objeto de Documento (DOM)](/es/docs/Web/API/Document_Object_Model), que tiene la capacidad de manipular documentos.
+> [!NOTE]
+> Las dos características que has utilizado en este ejercicio forman parte de la API del [Modelo de Objeto de Documento (DOM)](/es/docs/Web/API/Document_Object_Model), que tiene la capacidad de manipular documentos.
 
 ## Curso intensivo de fundamentos del lenguaje
 
 Ahora se explicarán algunas de las funciones básicas del lenguaje JavaScript para que puedas comprender mejor cómo funciona todo. Mejor aún, estas características son comunes para todos los lenguajes de programación. Si puedes entender esos fundamentos, deberías ser capaz de comenzar a programar en casi cualquier cosa.
 
-> **Advertencia:** en este artículo, trata de introducir las líneas de código de ejemplo en la consola de tu navegador para ver lo que sucede. Para más detalles sobre consolas JavaScript, mira [Descubre las herramientas de desarrollo de los navegadores](/es/docs/Learn/Common_questions/What_are_browser_developer_tools).
+> [!WARNING]
+> En este artículo, trata de introducir las líneas de código de ejemplo en la consola de tu navegador para ver lo que sucede. Para más detalles sobre consolas JavaScript, mira [Descubre las herramientas de desarrollo de los navegadores](/es/docs/Learn/Common_questions/What_are_browser_developer_tools).
 
 ### Variables
 
@@ -74,13 +78,17 @@ Las {{Glossary("Variable", "Variables")}} son contenedores en los que puedes alm
 let nombreDeLaVariable;
 ```
 
-> **Nota:** todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí donde termina la declaración. Si no los incluyes puedes obtener resultados inesperados. Sin embargo, algunas personas creen que es una buena práctica tener punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y no se debe usar punto y coma. Para más detalles, vea [Guía del punto y coma en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) (en inglés).
+> [!NOTE]
+> Todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí donde termina la declaración. Si no los incluyes puedes obtener resultados inesperados. Sin embargo, algunas personas creen que es una buena práctica tener punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y no se debe usar punto y coma. Para más detalles, vea [Guía del punto y coma en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) (en inglés).
 
-> **Nota:** puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (ver [este artículo sobre las reglas existentes](/es/docs/Web/JavaScript/Guide/Grammar_and_Types#Variables)). Si no estás seguro, puedes [comprobar el nombre de la variable](https://mothereff.in/js-variables) para ver si es válido.
+> [!NOTE]
+> Puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (ver [este artículo sobre las reglas existentes](/es/docs/Web/JavaScript/Guide/Grammar_and_Types#Variables)). Si no estás seguro, puedes [comprobar el nombre de la variable](https://mothereff.in/js-variables) para ver si es válido.
 
-> **Nota:** JavaScript distingue entre mayúsculas y minúsculas. `miVariable` es una variable distinta a `mivariable`. Si estás teniendo problemas en tu código, revisa las mayúsculas y minúsculas.
+> [!NOTE]
+> JavaScript distingue entre mayúsculas y minúsculas. `miVariable` es una variable distinta a `mivariable`. Si estás teniendo problemas en tu código, revisa las mayúsculas y minúsculas.
 
-> **Nota:** para más detalles sobre la diferencia entre `var` y `let`, vea [Diferencia entre var y let](/es/docs/Learn/JavaScript/First_steps/Variables#Diferencia_entre_var_y_let).
+> [!NOTE]
+> Para más detalles sobre la diferencia entre `var` y `let`, vea [Diferencia entre var y let](/es/docs/Learn/JavaScript/First_steps/Variables#Diferencia_entre_var_y_let).
 
 Tras declarar una variable, puedes asignarle un valor:
 
@@ -270,7 +278,8 @@ Un {{Glossary("operator", "operador")}} es básicamente un símbolo matemático
 
 Hay muchos operadores por explorar, pero con esto será suficiente por ahora. Mira [Expresiones y operadores](/es/docs/Web/JavaScript/Reference/Operators) para ver la lista completa.
 
-> **Nota:** mezclar tipos de datos puede dar lugar a resultados extraños cuando se hacen cálculos, así que asegúrate de que relacionas tus variables correctamente y de que recibes los resultados que esperabas. Por ejemplo, teclea: `"3" + "25"` en tu consola. ¿Por qué no obtienes lo que esperabas? Porque las comillas convierten los números en "strings" (el término inglés para denominar cadenas de caracteres) y de este modo has acabado con los "strings" concatenados entre sí, y no con los números sumados. Si tecleas: `35 + 25`, obtendrás el resultado correcto.
+> [!NOTE]
+> Mezclar tipos de datos puede dar lugar a resultados extraños cuando se hacen cálculos, así que asegúrate de que relacionas tus variables correctamente y de que recibes los resultados que esperabas. Por ejemplo, teclea: `"3" + "25"` en tu consola. ¿Por qué no obtienes lo que esperabas? Porque las comillas convierten los números en "strings" (el término inglés para denominar cadenas de caracteres) y de este modo has acabado con los "strings" concatenados entre sí, y no con los números sumados. Si tecleas: `35 + 25`, obtendrás el resultado correcto.
 
 ### Condicionales
 
@@ -322,7 +331,8 @@ multiplica(20, 20);
 multiplica(0.5, 3);
 ```
 
-> **Nota:** la sentencia [`return`](/es/docs/Web/JavaScript/Reference/Statements/return) le dice al navegador que devuelva la variable `resultado` fuera de la función, para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones, solo están disponibles dentro de esas funciones. Esto se conoce como «{{Glossary("Scope", "ámbito")}} (_scope_ en inglés) de la variable». Lee más sobre [ámbito o alcance de la variable](/es/docs/Web/JavaScript/Guide/Grammar_and_types#%C3%81mbito_de_variable).
+> [!NOTE]
+> La sentencia [`return`](/es/docs/Web/JavaScript/Reference/Statements/return) le dice al navegador que devuelva la variable `resultado` fuera de la función, para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones, solo están disponibles dentro de esas funciones. Esto se conoce como «{{Glossary("Scope", "ámbito")}} (_scope_ en inglés) de la variable». Lee más sobre [ámbito o alcance de la variable](/es/docs/Web/JavaScript/Guide/Grammar_and_types#%C3%81mbito_de_variable).
 
 ### Eventos
 
diff --git a/files/es/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.md
index 52373f06668cd3..f1a96a7d5126c7 100644
--- a/files/es/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -76,11 +76,13 @@ Esta no es la única manera, pero sí la que te permite poner manos a la obra in
 7. Da clic en _Create repository_ (Crear repositorio).
 8. Arrastra y suelta el contenido de la carpeta de tu sitio web en tu repositorio. Cuando termines de pasar el contenido haz clic en _Commit changes_ (Confirmar cambios).
 
-   > **Nota:** cerciórate que tu carpeta tiene un archivo de nombre <kbd>index.html</kbd>
+   > [!NOTE]
+   > Cerciórate que tu carpeta tiene un archivo de nombre <kbd>index.html</kbd>
 
 9. En tu navegador desplázate a <kbd>username.github.io</kbd> para ver tu sitio web en línea. Por ejemplo, para el nombre de usuario Bob Smith, escribe <kbd>bobsmith.github.io</kbd>.
 
-   > **Nota:** puede que tu página web tarde unos minutos en entrar en funcionamiento. Si tu sitio web no se muestra inmediatamente, espera unos minutos e inténtalo de nuevo.
+   > [!NOTE]
+   > Puede que tu página web tarde unos minutos en entrar en funcionamiento. Si tu sitio web no se muestra inmediatamente, espera unos minutos e inténtalo de nuevo.
 
 ### Subir tus archivos a GitHub a través de la línea de comandos
 
@@ -96,7 +98,8 @@ En este punto ya estarás listo para poder utilizar la línea de comandos para s
 
 ![](command-line.png)
 
-> **Nota:** si no te sientes cómodo utilizando la línea de comandos, podrías considerar usar [Git graphical user interface](http://git-scm.com/downloads/guis) para realizar la misma tarea.
+> [!NOTE]
+> Si no te sientes cómodo utilizando la línea de comandos, podrías considerar usar [Git graphical user interface](http://git-scm.com/downloads/guis) para realizar la misma tarea.
 
 Todos los sistemas operativos vienen con una herramienta de línea de comandos:
 
@@ -145,7 +148,8 @@ Aunque este procedimiento pueda parecer un poco aterrador al principio no te pre
 
 6. Ahora cuando vayas a la direccion de red de tu página GitHub (_usuario.github.io_) en una nueva pestaña del navegador ¡deberías ver tu sitio en línea! Envíala por correo-e a tus amigos y presume de tu maestría.
 
-> **Nota:** has tocado apenas la superficie de Git. Si te quedas atascado la [ayuda de GitHub en español](https://help.github.com/es/github/working-with-github-pages/getting-started-with-github-pages) te será de gran apoyo.
+> [!NOTE]
+> Has tocado apenas la superficie de Git. Si te quedas atascado la [ayuda de GitHub en español](https://help.github.com/es/github/working-with-github-pages/getting-started-with-github-pages) te será de gran apoyo.
 
 ### Conocer más de GitHub
 
diff --git a/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index b75a45059d0a37..f564501e3c550d 100644
--- a/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -17,7 +17,8 @@ Para comenzar, deberás responder estas preguntas:
 2. **¿Qué información presentas sobre el tema?**; Escribe un título y algunos párrafos y piensa en una imagen que te gustaría mostrar en tu página.
 3. **¿Cómo se ve tu sitio web**, en términos simples de alto nivel?, ¿cuál es el color de fondo?, ¿qué tipo de letra es apropiado: formal, caricaturesca, atrevida y fuerte, sutil?
 
-> **Nota:** Los proyectos complejos necesitan pautas detalladas que incluyan todos los detalles de los colores, los tipos de letra, el espacio entre los elementos de una página, el estilo de escritura adecuado, etc. Esto, a veces, se denomina guía de diseño, sistema de diseño o libro de marcas, y puedes ver un ejemplo en el [Sistema de diseño de fotones de Firefox](https://design.firefox.com/photon/).
+> [!NOTE]
+> Los proyectos complejos necesitan pautas detalladas que incluyan todos los detalles de los colores, los tipos de letra, el espacio entre los elementos de una página, el estilo de escritura adecuado, etc. Esto, a veces, se denomina guía de diseño, sistema de diseño o libro de marcas, y puedes ver un ejemplo en el [Sistema de diseño de fotones de Firefox](https://design.firefox.com/photon/).
 
 ## Haz un bosquejo de tu diseño
 
@@ -25,7 +26,8 @@ A continuación, toma papel y lápiz y dibuja aproximadamente cómo deseas que s
 
 ![Bosquejo](website-drawing-scan.png)
 
-> **Nota:** Incluso en sitios web reales y complejos, los equipos de diseño suelen comenzar con bocetos en papel y luego crean maquetas digitales utilizando un editor de gráficos o tecnologías web.
+> [!NOTE]
+> Incluso en sitios web reales y complejos, los equipos de diseño suelen comenzar con bocetos en papel y luego crean maquetas digitales utilizando un editor de gráficos o tecnologías web.
 >
 > Los equipos web suelen incluir tanto un diseñador gráfico como un diseñador de {{Glossary("UX", "experiencia de usuario")}} (UX). Los diseñadores gráficos ensamblan las imágenes del sitio web. Los diseñadores de experiencia de usuario tienen un papel algo más abstracto al abordar cómo los usuarios experimentarán e interactuarán con el sitio web.
 
diff --git a/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 797972ff75e1ad..57ad78c3f6b004 100644
--- a/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -491,7 +491,8 @@ Estos saldrán con un aspecto similar a este (la expansión aparecerá en una de
 
 {{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}
 
-> **Nota:** Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que `<abbr>`, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con `<abbr>`, y `<abbr>` tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza `<abbr>`.
+> [!NOTE]
+> Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que `<abbr>`, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con `<abbr>`, y `<abbr>` tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza `<abbr>`.
 
 ### Aprendizaje activo: Marcar una abreviatura
 
diff --git a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.md
index cd355c946c3112..cec623cc061bc1 100644
--- a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -33,7 +33,8 @@ Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son
 
 Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea _web_ : Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).
 
-> **Nota:** Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).
+> [!NOTE]
+> Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).
 
 El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.
 
@@ -74,7 +75,8 @@ Este código producirá el siguiente resultado (el título se mostrará al pasar
 
 Crea un enlace a [la página de inicio de Mozilla](https://www.mozilla.org/es-ES/).
 
-> **Nota:** El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.
+> [!NOTE]
+> El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.
 
 ### Aprendizaje activo: crea tu propio ejemplo de enlace
 
@@ -96,7 +98,8 @@ Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un
 </a>
 ```
 
-> **Nota:** Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.
+> [!NOTE]
+> Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.
 
 ## Primer acercamiento a URLs y rutas
 
@@ -137,7 +140,8 @@ Observamos también dos directorios dentro de nuestro directorio raíz que son:
   </p>
   ```
 
-> **Nota:** Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: `../../../ruta/compleja/a/mi/archivo.html`.
+> [!NOTE]
+> Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: `../../../ruta/compleja/a/mi/archivo.html`.
 
 ### Fragmentos de documento
 
@@ -285,7 +289,8 @@ El ejercicio terminado debería crear una página como la siguiente:
 
 ![Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social](navigation-example.png)
 
-> **Nota:** Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up) para ver la respuesta correcta.
+> [!NOTE]
+> Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up) para ver la respuesta correcta.
 
 ## Enlace a correo electrónico
 
@@ -316,7 +321,8 @@ Veamos un ejemplo que incluye estos campos:
 </a>
 ```
 
-> **Nota:** Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) [Código porciento](https://es.wikipedia.org/wiki/Código_porciento). También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace `mailto:`. Esta es la notación de consulta URL estándar. Lee [el método GET](/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method) para comprender mejor qué notación de consulta URL se usa comúnmente.
+> [!NOTE]
+> Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) [Código porciento](https://es.wikipedia.org/wiki/Código_porciento). También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace `mailto:`. Esta es la notación de consulta URL estándar. Lee [el método GET](/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method) para comprender mejor qué notación de consulta URL se usa comúnmente.
 
 A continuación otros ejemplos de utilización de enlaces `mailto`:
 
diff --git a/files/es/learn/html/introduction_to_html/debugging_html/index.md b/files/es/learn/html/introduction_to_html/debugging_html/index.md
index 448fc427c682ad..ab337eaddcae23 100644
--- a/files/es/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/es/learn/html/introduction_to_html/debugging_html/index.md
@@ -57,7 +57,8 @@ HTML no es tan complicado de entender como Rust; HTML no se compila por separado
 
 HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.
 
-> **Nota:** La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.
+> [!NOTE]
+> La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.
 
 ### Aprendizaje activo: Estudio del código permisivo
 
@@ -156,7 +157,8 @@ La lista de mensajes de error que nos presenta el validador suele ayudar, pero a
 
   ejemplo: `<a href="https://www.mozilla.org/>enlace a la página de inicio de Mozilla</a> ↩ </ul>↩ </body>↩</html>`
 
-  > **Nota:** Un atributo al que le falten las comillas de cierre puede ser un elemento abierto, porque el resto del documento será interpretado como si fuera parte de este atributo.
+  > [!NOTE]
+  > Un atributo al que le falten las comillas de cierre puede ser un elemento abierto, porque el resto del documento será interpretado como si fuera parte de este atributo.
 
 - Unclosed element `ul`: Este no ayuda mucho, porque el elemento {{htmlelement("ul")}} está cerrado correctamente. Este error se debe a que el elemento {{htmlelement("a")}} no ha sido cerrado, ya que faltan las comillas de cierre.
 
diff --git a/files/es/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.md
index 2f30f9e0721e48..0943522eb5287e 100644
--- a/files/es/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -56,7 +56,8 @@ El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de di
 
 La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?
 
-> **Nota:** Los daltónicos representan alrededor del [4% de la población mundial](http://www.color-blindness.com/2006/04/28/colorblind-population/) (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había [Discapacidad visual](https://es.wikipedia.org/wiki/Discapacidad_visual) 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba [alrededor de los 7,000 millones](https://es.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg).
+> [!NOTE]
+> Los daltónicos representan alrededor del [4% de la población mundial](http://www.color-blindness.com/2006/04/28/colorblind-population/) (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había [Discapacidad visual](https://es.wikipedia.org/wiki/Discapacidad_visual) 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba [alrededor de los 7,000 millones](https://es.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg).
 
 En tu código HTML puedes crear secciones de contenido basadas en su _funcionalidad_ — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de [consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente](/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura).
 
@@ -236,7 +237,8 @@ En este caso, la nota del editor solo proporciona información extra para el dir
 
 Este no es un elemento lateral (`<aside>`) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (`<section>`) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento `<div>` es el adecuado en este caso. Hemos incluido un **encabezado** para indicar a los lectores de pantalla donde van a encontrarlo.
 
-> **Advertencia:** Los elementos `div` son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.
+> [!WARNING]
+> Los elementos `div` son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.
 
 ### Saltos de línea y líneas horizontales
 
@@ -310,7 +312,8 @@ Una vez has planificado el contenido de una página web sencilla, el paso lógic
 
 Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?
 
-> **Nota:** Guarda este esquema para utilizarlo más adelante.
+> [!NOTE]
+> Guarda este esquema para utilizarlo más adelante.
 
 ## ¡Pon a prueba tus habilidades!
 
diff --git a/files/es/learn/html/introduction_to_html/getting_started/index.md b/files/es/learn/html/introduction_to_html/getting_started/index.md
index b9e7791eb95681..98457ff8eb2807 100644
--- a/files/es/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/es/learn/html/introduction_to_html/getting_started/index.md
@@ -49,7 +49,8 @@ Si quisiéramos que el texto se mantuviera solo, podríamos especificar que es u
 <p>Mi gato es muy gruñón</p>
 ```
 
-> **Nota:** Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en mayúsculas o minúsculas. Por ejemplo, una etiqueta {{htmlelement ("title")}} podría escribirse como `<title>`, `<TITLE>`, `<Title>`, `<TiTlE>`, etc., y funcionará. Sin embargo, es una buena práctica escribir todas las etiquetas en minúsculas para mayor coherencia y legibilidad.
+> [!NOTE]
+> Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en mayúsculas o minúsculas. Por ejemplo, una etiqueta {{htmlelement ("title")}} podría escribirse como `<title>`, `<TITLE>`, `<Title>`, `<TiTlE>`, etc., y funcionará. Sin embargo, es una buena práctica escribir todas las etiquetas en minúsculas para mayor coherencia y legibilidad.
 
 ## Anatomía de un elemento HTML
 
@@ -229,7 +230,8 @@ Esto daría como resultado lo siguiente:
 
 {{ EmbedLiveSample('elementos_vacíos', 700, 300, "", "") }}
 
-> **Nota:** En HTML, no es necesario añadir un `/` al final de la etiqueta de un elemento vacío, por ejemplo: `<img src="images/cat.jpg" alt="cat" />`. Sin embargo, también es una sintaxis válida, y puede hacerlo cuando desee que su HTML sea XML válido.
+> [!NOTE]
+> En HTML, no es necesario añadir un `/` al final de la etiqueta de un elemento vacío, por ejemplo: `<img src="images/cat.jpg" alt="cat" />`. Sin embargo, también es una sintaxis válida, y puede hacerlo cuando desee que su HTML sea XML válido.
 
 ## Atributos
 
@@ -518,7 +520,8 @@ Si quieres experimentar con escribir algo de HTML en tu ordenador local, puedes:
 3. Pega el código en el nuevo archivo de texto.
 4. Guarde el archivo como `index.html`.
 
-> **Nota:** También puedes encontrar esta plantilla HTML básica en el [repositorio de GitHub del área de aprendizaje de MDN](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html).
+> [!NOTE]
+> También puedes encontrar esta plantilla HTML básica en el [repositorio de GitHub del área de aprendizaje de MDN](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html).
 
 Ahora puede abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. Inicialmente, la página se ve así:
 
@@ -688,7 +691,8 @@ Echemos un vistazo a cómo el navegador representa los dos párrafos anteriores
 
 {{ EmbedLiveSample('Whitespace_in_HTML', 700, 100) }}
 
-> **Nota:** El acceso a [innerHTML](/es/docs/Web/API/Element/innerHTML) de los elementos de JavaScript mantendrá intacto todo el espacio en blanco.
+> [!NOTE]
+> El acceso a [innerHTML](/es/docs/Web/API/Element/innerHTML) de los elementos de JavaScript mantendrá intacto todo el espacio en blanco.
 > Esto puede arrojar resultados inesperados si el navegador recorta el espacio en blanco.
 
 ```js
@@ -731,7 +735,8 @@ En la salida en vivo a continuación, puede ver que el primer párrafo ha salido
 
 {{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "") }}
 
-> **Nota:** No es necesario usar referencias de entidad para ningún otro símbolo, ya que los navegadores modernos manejarán bien los símbolos reales siempre que la [codificación de caracteres de tu HTML esté configurada en UTF-8](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding).
+> [!NOTE]
+> No es necesario usar referencias de entidad para ningún otro símbolo, ya que los navegadores modernos manejarán bien los símbolos reales siempre que la [codificación de caracteres de tu HTML esté configurada en UTF-8](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding).
 
 ## Comentarios en HTML
 
diff --git a/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.md
index b9b17166043cdd..3532fc18d7cf00 100644
--- a/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -991,7 +991,8 @@ Esta es la regla de oro: el uso de `<b>`, `<i>` o `<u>` resulta adecuado cuando
 - {{HTMLElement('b')}} se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales...
 - {{HTMLElement('u')}} se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos...
 
-> **Nota:** Una observación prudente acerca del subrayado: **La gente suele asociar estrechamente el subrayado con los hipervínculos.** Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.
+> [!NOTE]
+> Una observación prudente acerca del subrayado: **La gente suele asociar estrechamente el subrayado con los hipervínculos.** Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.
 
 ```html
 <!-- nombres científicos -->
diff --git a/files/es/learn/html/introduction_to_html/index.md b/files/es/learn/html/introduction_to_html/index.md
index 1c5602d7032f68..ceb38f9675626e 100644
--- a/files/es/learn/html/introduction_to_html/index.md
+++ b/files/es/learn/html/introduction_to_html/index.md
@@ -17,7 +17,8 @@ En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{
 
 Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en [Instalación de software básico](/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software)), y comprender cómo crear y administrar archivos (como se detalla en [Manejo de archivos](/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files)). Ambos son parte de nuestro módulo completo [Introducción a la web](/es/docs/Learn/Getting_started_with_the_web) para principiantes.
 
-> **Nota:** Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
@@ -52,6 +53,7 @@ Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubi
 - [Bases de la alfabetización Web 1](https://teach.mozilla.org/activities/web-lit-basics/)
   - : Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de _Introducción a HTML_. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.
 
-> **Nota:** Retroalimentación
+> [!NOTE]
+> Retroalimentación
 >
 > Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo [nuestra encuesta aquí](https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey).
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
index 0803d4b1999006..919f50171ba1f9 100644
--- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
+++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
@@ -7,7 +7,8 @@ slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text
 
 El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras [formato de texto avanzado](/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) articulo.
 
-> **Nota:** Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) trabajar en las tareas.
+> [!NOTE]
+> Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) trabajar en las tareas.
 >
 > Si tiene problemas, pídeanos ayuda; consulte la sección [Evaluación o ayuda adicional](#Evaluación_o_ayuda_adicional) en la parte inferior de esta página.
 
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
index 28e3dc92537be3..5cabfcf8c6735e 100644
--- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
+++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
@@ -7,7 +7,8 @@ slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics
 
 El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo [Fundamentos de texto en HTML](/es/docs/Learn/HTML/Introduccion_a_HTML/texto).
 
-> **Nota:** Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+> [!NOTE]
+> Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
 >
 > Si te atascas, entonces pídenos ayuda — busca en la sección [Assessment or further help](#assessment_or_further_help) al final de esta página.
 
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
index 27f7630e0c32da..4ae7c89e01d890 100644
--- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
+++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
@@ -7,7 +7,8 @@ slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
 
 El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo [Creando hipervínculos](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks).
 
-> **Nota:** Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+> [!NOTE]
+> Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
 >
 > Si te atascas, pide ayuda — mira la sección [Evaluación o ayuda adicional](#evaluación_o_ayuda_adicional) al final de esta página.
 
@@ -20,7 +21,8 @@ En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página
 - El segundo enlace deberá convertirse en un vínculo que abra un correo electrónico en la aplicación de correo por defecto del usuario, con el destinatario "whales\@example.com".
 - Conseguirás un punto de bonificación si tambien configuras que la línea del asunto del correo electrónico tenga como texto predeterminado "Preguntas sobre Ballenas".
 
-> **Nota:** El primer enlace en el ejemplo tiene el atributo `target="_blank"` , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
+> [!NOTE]
+> El primer enlace en el ejemplo tiene el atributo `target="_blank"` , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
 
 Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:
 
@@ -37,7 +39,8 @@ En esta tarea queremos que completes los cuatro enlaces para que se dirijan al l
 - El tercer enlace deberia vincular al sitio de búsqueda de imágenes de Google del Reino Unido. La URL base es `https://www.google.co.uk`, y la búsqueda de imágenes se ubica en un subdirectorio llamado `imghp`.
 - El cuarto enlace debería vincular al párrafo más al final de la página actual. Que tiene la ID `bottom`.
 
-> **Nota:** Los primeros tres enlaces en el ejemplo tienen el atributo `target="_blank"` especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
+> [!NOTE]
+> Los primeros tres enlaces en el ejemplo tienen el atributo `target="_blank"` especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
 
 Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:
 
@@ -52,7 +55,8 @@ Los siguientes enlaces dirigen a una página informativa acerca de los Narvales,
 - Tomes los párrafos existentes con enlaces pobremente escritos, y los reescribas para que tengan un buen texto de enlace.
 - Agregues una advertencia a cualquier enlace que necesite una advertencia.
 
-> **Nota:** Los primeros tres enlaces en el ejemplo tienen el atributo `target="_blank"` especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
+> [!NOTE]
+> Los primeros tres enlaces en el ejemplo tienen el atributo `target="_blank"` especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
 
 Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:
 
diff --git a/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 0d11d1c07669c5..9a5efb05a8ae57 100644
--- a/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -101,7 +101,8 @@ Este elemento simplemente especifica la codificación de caracteres del document
 
 ![una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente](bad-encoding.png)
 
-> **Nota:** Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres `utf-8` en tu página web para evitar que se presenten potenciales problemas con otros navegadores.
+> [!NOTE]
+> Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres `utf-8` en tu página web para evitar que se presenten potenciales problemas con otros navegadores.
 
 ### Aprendizaje activo: Experimenta con la codificación de caracteres
 
@@ -159,9 +160,11 @@ La descripción también se usa en las páginas de resultados del motor de búsq
 
    ![Resultado de búsqueda en Yahoo para "Mozilla Developer Network"](mdn-search-result.png)
 
-> **Nota:** En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados **sitelinks** y se pueden configurar con las [Herramientas de administrador de Google](http://www.google.com/webmasters/tools/)), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.
+> [!NOTE]
+> En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados **sitelinks** y se pueden configurar con las [Herramientas de administrador de Google](http://www.google.com/webmasters/tools/)), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.
 
-> **Nota:** Muchas características `<meta>` ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento `<meta>` (`<meta name="keywords" content="pon, tus, palabras clave, aquí">`), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los **spammers** rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.
+> [!NOTE]
+> Muchas características `<meta>` ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento `<meta>` (`<meta name="keywords" content="pon, tus, palabras clave, aquí">`), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los **spammers** rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.
 
 ### Otros tipos de metadatos
 
@@ -242,7 +245,8 @@ Los comentarios explican para qué se usa cada icono (estos elementos abarcan si
 
 No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.
 
-> **Nota:** Si tu sitio web utiliza una política de seguridad de contenido (_content security policy o CSP_) para mejorar la seguridad, la política afecta al `favicon`. Si te encuentras con problemas como que el `favicon` no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del `header` para la [directriz `img-src`](/es/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) en la cabecera no impide el acceso a este.
+> [!NOTE]
+> Si tu sitio web utiliza una política de seguridad de contenido (_content security policy o CSP_) para mejorar la seguridad, la política afecta al `favicon`. Si te encuentras con problemas como que el `favicon` no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del `header` para la [directriz `img-src`](/es/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) en la cabecera no impide el acceso a este.
 
 ## Aplicar CSS y JavaScript a HTML
 
@@ -260,7 +264,8 @@ Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen
   <script src="my-js-file.js"></script>
   ```
 
-  > **Nota:** El elemento `<script>` puede parecer un elemento vacío pero no lo es, y por lo tanto necesita una etiqueta de cierre. En vez de apuntar a un archivo de `script` externo, también puedes colocar tu código dentro del elemento `<script>`.
+  > [!NOTE]
+  > El elemento `<script>` puede parecer un elemento vacío pero no lo es, y por lo tanto necesita una etiqueta de cierre. En vez de apuntar a un archivo de `script` externo, también puedes colocar tu código dentro del elemento `<script>`.
 
 ### Aprendizaje activo: aplicar CSS y JavaScript a una página
 
@@ -275,7 +280,8 @@ Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deb
 - El JavaScript ha añadido una lista vacía a la página. Ahora, cuando haces clic en cualquier sitio de la lista, aparece un cuadro de diálogo que te solicita que introduzcas el texto para un nuevo elemento de la lista. Cuando pulsas el botón OK, se añade a la lista el elemento con el texto nuevo. Cuando haces clic a un elemento de la lista aparece un cuadro de diálogo que te permite cambiar el texto del elemento.
 - El CSS ha pintado el fondo de verde y ha agrandado el texto. También ha aplicado estilo a algún contenido que el JavaScript ha añadido a la página (la barra roja con el borde negro es el estilo que el CSS ha aplicado a la lista generada con JavaScript).
 
-> **Nota:** Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html).
+> [!NOTE]
+> Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html).
 
 ## Establecer el idioma principal del documento
 
diff --git a/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index 76ab9ec817fefa..7a2939b752a9b0 100644
--- a/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -29,7 +29,8 @@ Los gráficos vectoriales son muy útiles en muchas circunstancias — tienen ta
   </tbody>
 </table>
 
-> **Nota:** Este artículo no tiene la intención de enseñarte SVG; solo mostrarte qué es, y cómo agregarlo a las páginas web.
+> [!NOTE]
+> Este artículo no tiene la intención de enseñarte SVG; solo mostrarte qué es, y cómo agregarlo a las páginas web.
 
 ## ¿Qué son los gráficos vectoriales?
 
@@ -46,7 +47,8 @@ La diferencia se hace evidente cuando amplía la página — la imagen PNG se pi
 
 ![Two star images zoomed in, one crisp and the other blurry](raster-vector-zoomed.png)
 
-> **Nota:** Las imágenes de arriba son en realidad todos PNG, con la estrella de la izquierda en cada caso representando una imagen rasterizada y la estrella de la derecha representando una imagen vectorial. Nuevamente, vaya a la demostración de vector-versus-raster.html para ver un ejemplo real.
+> [!NOTE]
+> Las imágenes de arriba son en realidad todos PNG, con la estrella de la izquierda en cada caso representando una imagen rasterizada y la estrella de la derecha representando una imagen vectorial. Nuevamente, vaya a la demostración de vector-versus-raster.html para ver un ejemplo real.
 
 Además, los archivos de imágenes vectoriales son mucho más ligeros que sus equivalentes ráster, porque solo necesitan contener un puñado de algoritmos, en lugar de información sobre cada píxel de la imagen individualmente.
 
@@ -87,7 +89,8 @@ Entonces, ¿por qué alguien querría usar gráficos rasterizados sobre SVG? Bue
 
 Los gráficos rasterizados son posiblemente mejores para imágenes de precisión complejas, como fotos, por las razones descritas anteriormente.
 
-> **Nota:** En Inkscape, guarde sus archivos como SVG simple para ahorrar espacio. Además, consulte este artículo que describe [cómo preparar SVGs para la web](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html).
+> [!NOTE]
+> En Inkscape, guarde sus archivos como SVG simple para ahorrar espacio. Además, consulte este artículo que describe [cómo preparar SVGs para la web](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html).
 
 ## Agregar SVG a sus páginas
 
diff --git a/files/es/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.md
index 645a2a93be81f5..846cd613c39c46 100644
--- a/files/es/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -44,7 +44,8 @@ Al principio, la web solo era texto y resultaba más bien aburrido. Afortunadame
 
 Para poner una imagen simple en una página web, utilizamos el elemento {{htmlelement("img")}}. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos de un atributo para ser utilizado: `src` (a veces denominado por su nombre completo, _source_). El atributo `src` contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento {{htmlelement("a")}} contiene los valores del atributo `href`.
 
-> **Nota:** Deberías leer [Inicio rápido a las URL y rutas](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Un_primer_acercamiento_a_URL_y_referencias) para refrescar tu memoria sobre URL relativas y absolutas antes de continuar.
+> [!NOTE]
+> Deberías leer [Inicio rápido a las URL y rutas](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Un_primer_acercamiento_a_URL_y_referencias) para refrescar tu memoria sobre URL relativas y absolutas antes de continuar.
 
 Por ejemplo, si tu imagen se llama `dinosaur.jpg`, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:
 
@@ -60,7 +61,8 @@ Si la imagen estaba en el subdirectorio `images`, que estaba en el mismo directo
 
 y así sucesivamente.
 
-> **Nota:** Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO. Por lo tanto, dale a tu imagen un nombre descriptivo; `dinosaur.jpg` es mejor que `img835.png`.
+> [!NOTE]
+> Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO. Por lo tanto, dale a tu imagen un nombre descriptivo; `dinosaur.jpg` es mejor que `img835.png`.
 
 Puedes incrustar la imagen usando la URL absoluta, por ejemplo:
 
@@ -70,7 +72,8 @@ Puedes incrustar la imagen usando la URL absoluta, por ejemplo:
 
 Pero esto no tiene sentido, solo hace que el navegador trabaje más buscando la dirección IP desde el servidor DNS cada vez, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.
 
-> **Advertencia:** La mayoría de imágenes tienen derechos de autor. **No** muestres una imagen en tu página web a menos que:
+> [!WARNING]
+> La mayoría de imágenes tienen derechos de autor. **No** muestres una imagen en tu página web a menos que:
 >
 > 1. seas dueño de la imagen,
 > 2. tengas permiso escrito explícito del dueño de la imagen o
@@ -82,9 +85,11 @@ Nuestro código anterior debería darnos el resultado siguiente:
 
 ![A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it](basic-image.png)
 
-> **Nota:** Los elementos como {{htmlelement("img")}} y {{htmlelement("video")}} a veces se denominan **elementos reemplazados**. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video), no en el contenido del elemento en sí.
+> [!NOTE]
+> Los elementos como {{htmlelement("img")}} y {{htmlelement("video")}} a veces se denominan **elementos reemplazados**. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video), no en el contenido del elemento en sí.
 
-> **Nota:** Puedes encontrar el ejemplo terminado de esta sección [en Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)).
+> [!NOTE]
+> Puedes encontrar el ejemplo terminado de esta sección [en Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)).
 
 ### Texto alternativo
 
@@ -118,7 +123,8 @@ La forma más fácil de probar el texto `alt` es escribir mal el nombre de archi
 
 En el fondo, la clave es ofrecer una experiencia usable, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario pierda ninguna parte del contenido. Desactiva las imágenes en tu navegador y observa cómo se ven las cosas. Te darás cuenta de lo útil que resulta el texto alternativo cuando no es posible ver la imagen.
 
-> **Nota:** Consulta nuestra guía de [texto alternativo](/es/docs/Learn/Accessibility/HTML#Alternativas_de_texto) para obtener más información.
+> [!NOTE]
+> Consulta nuestra guía de [texto alternativo](/es/docs/Learn/Accessibility/HTML#Alternativas_de_texto) para obtener más información.
 
 ### Anchura y altura
 
@@ -141,7 +147,8 @@ Hacerlo así es bueno porque la página se carga con mayor rapidez y fluidez.
 
 Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse granulosas y borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la [proporción de aspecto](https://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto) correcta. Deberías utilizar un editor de imágenes, para dar a tu imagen el tamaño adecuado, antes de colocarla en tu página web.
 
-> **Nota:** Si tienes que alterar el tamaño de una imagen es mejor usar [CSS](/es/docs/Learn/CSS).
+> [!NOTE]
+> Si tienes que alterar el tamaño de una imagen es mejor usar [CSS](/es/docs/Learn/CSS).
 
 ### Título de imágenes
 
@@ -349,7 +356,8 @@ Una solución mejor es utilizar los elementos HTML5 {{htmlelement("figure")}} y
 
 El elemento {{htmlelement("figcaption")}} dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento {{htmlelement("figure")}}.
 
-> **Nota:** Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo [`alt`](/es/docs/Web/HTML/Element/img#alt) cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto [`alt`](/es/docs/Web/HTML/Element/img#alt) proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto `alt` no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra. Desactiva las imágenes en tu navegador y observa el resultado.
+> [!NOTE]
+> Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo [`alt`](/es/docs/Web/HTML/Element/img#alt) cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto [`alt`](/es/docs/Web/HTML/Element/img#alt) proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto `alt` no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra. Desactiva las imágenes en tu navegador y observa el resultado.
 
 El elemento _figure_ no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:
 
@@ -511,7 +519,8 @@ La imagen resultante, podría decirse que es más fácil de posicionar y control
 
 En resumen: si una imagen tiene significado en términos del contenido de tu página, entonces deberías usar una imagen HTML. Si la imagen es puramente decorativa, deberías usar imágenes de fondo CSS.
 
-> **Nota:** Aprenderás mucho más sobre las [imágenes de fondo CSS](/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes) en nuestro apartado [CSS](/es/docs/Learn/CSS).
+> [!NOTE]
+> Aprenderás mucho más sobre las [imágenes de fondo CSS](/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes) en nuestro apartado [CSS](/es/docs/Learn/CSS).
 
 Esto es todo por ahora. Hemos expuesto en detalle los conceptos relativos a imágenes y subtítulos de imagen. En el próximo artículo, subiremos un nivel para insertar vídeo y audio en páginas web con HTML.
 
diff --git a/files/es/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/es/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
index 869ba761e44a1b..7a1ba471ff329c 100644
--- a/files/es/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
@@ -9,7 +9,8 @@ l10n:
 
 El objetivo de esta prueba de habilidad es evaluar tu entendimiento sobre las [imágenes y como incrustarlas en HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML).
 
-> **Nota:** Puedes experimentar tus soluciones en los editores interactivos de abajo. No obstante, sería de gran ayuda que descargues el código y que usaras una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las actividades.
+> [!NOTE]
+> Puedes experimentar tus soluciones en los editores interactivos de abajo. No obstante, sería de gran ayuda que descargues el código y que usaras una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las actividades.
 >
 > Si te quedas atorado, puedes pedirnos ayuda — visita la sección de [Evaluación o ayuda adicional](#assessment_or_further_help) al final de esta página.
 
@@ -25,7 +26,7 @@ Prueba a actualizar este ejemplo vivo de código para recrear el ejemplo finaliz
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}
 
-> **Observación:**
+> [!CALLOUT]
 >
 > [Descarga el punto inicial para esta actividad](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images1-download.html) para trabajar desde tu propio editor o en un editor en línea.
 
@@ -37,7 +38,7 @@ Intenta actualizar el siguiente código vivo para recrear el ejemplo finalizado:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 1000)}}
 
-> **Observación:**
+> [!CALLOUT]
 >
 > [Descarga el punto inicial para esta actividad](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images2-download.html) para trabajar desde tu propio editor o en un editor en línea.
 
@@ -49,7 +50,7 @@ Intenta actualizar el siguiente código vivo para recrear el ejemplo finalizado:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 1000)}}
 
-> **Observación:**
+> [!CALLOUT]
 >
 > [Descarga el punto inicial para esta actividad](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images3-download.html) para trabajar desde tu propio editor o en un editor en línea.
 
diff --git a/files/es/learn/html/multimedia_and_embedding/index.md b/files/es/learn/html/multimedia_and_embedding/index.md
index 96f888df8eb5d8..13599351f2fb71 100644
--- a/files/es/learn/html/multimedia_and_embedding/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/index.md
@@ -11,7 +11,8 @@ Hemos visto mucho texto hasta ahora en este curso, pero la web sería realmente
 
 Antes de empezar con este módulo, deberías tener un buen conocimiento de las bases de HTML, enseñadas en [Introducción a HTML](/es/docs/Learn/HTML/Introduction_to_HTML). Si no has estado trabajando en este módulo (o alguno similar), ¡hazlo y luego vuelve!
 
-> **Nota:** Si estas trabajando en un ordenador/tablet/u otro dispositivo donde no puedas crear tus propios archivos, puedes probar (la mayoría de ellos) los ejemplos de código en programas online de codificado como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estas trabajando en un ordenador/tablet/u otro dispositivo donde no puedas crear tus propios archivos, puedes probar (la mayoría de ellos) los ejemplos de código en programas online de codificado como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index 714ffc23b2d3f8..99a0003edb40c7 100644
--- a/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -36,7 +36,8 @@ Accede a las diferentes imágenes en la carpeta de [originals](https://github.co
 
 También puedes usar una herramienta en línea como [Glitch](https://glitch.com/) para crear tu ejemplo. Esto puede ser útil si quieres evaluarlo o pedir ayuda — consulta la sección [Assessment or further help](#assessment_or_further_help) al final de esta página.
 
-> **Nota:** El archivo HTML de ejemplo contiene bastante CSS para dar estilo a la página. No necesitas tocar el CSS, solo el HTML dentro del elemento {{htmlelement("body")}}, mientras que insertes el marcado correctamente, el estilo se mantendrá.
+> [!NOTE]
+> El archivo HTML de ejemplo contiene bastante CSS para dar estilo a la página. No necesitas tocar el CSS, solo el HTML dentro del elemento {{htmlelement("body")}}, mientras que insertes el marcado correctamente, el estilo se mantendrá.
 
 ## Resumen del proyecto
 
@@ -56,7 +57,8 @@ Junto con `mdn.svg`, estas imágenes serán tus iconos para vincular a otros rec
 
 A continuación, crea una versión horizontal de 1200px de `red-panda.jpg`, y una versión vertical de 600px que muestre al panda en una toma de primer plano. Una vez más, ponle un nombre para que puedas identificarlos fácilmente. Guarda una copia de ambos en la misma carpeta que `index.html`.
 
-> **Nota:** Debes optimizar las imágenes JPG y PNG para que sean lo más pequeñas posible, viéndose bien. [tinypng.com](https://tinypng.com/) es un gran servicio para hacerlo fácilmente.
+> [!NOTE]
+> Debes optimizar las imágenes JPG y PNG para que sean lo más pequeñas posible, viéndose bien. [tinypng.com](https://tinypng.com/) es un gran servicio para hacerlo fácilmente.
 
 ### Añadir logo al encabezado
 
@@ -74,7 +76,8 @@ En cada caso, (excepto uno que es inherentemente receptivo) queremos que el nave
 
 ¡Asegúrate de hacer coincidir las imágenes correctas con los enlaces correctos!
 
-> **Nota:** para probar correctamente los ejemplos `srcset`/`sizes` necesitarás cargar tu sitio a un servidor (usar [Github pages](/es/docs/Learn/Common_questions/Using_Github_pages) es una solución fácil y gratis), y desde allí puedes probar si funcionan correctamente usando herramientas de desarrollo del navegador como Firefox [Network Monitor](/es/docs/Tools/Network_Monitor).
+> [!NOTE]
+> Para probar correctamente los ejemplos `srcset`/`sizes` necesitarás cargar tu sitio a un servidor (usar [Github pages](/es/docs/Learn/Common_questions/Using_Github_pages) es una solución fácil y gratis), y desde allí puedes probar si funcionan correctamente usando herramientas de desarrollo del navegador como Firefox [Network Monitor](/es/docs/Tools/Network_Monitor).
 
 ### Un "red-panda" con arte dirigido
 
diff --git a/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 20f16f106e0df0..8f11aaba55974e 100644
--- a/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -232,7 +232,8 @@ Este ejemplo incluye los elementos básicos necesarios para usar un `<iframe>`:
 - [`sandbox`](/es/docs/Web/HTML/Element/iframe#sandbox)
   - : Este atributo, que funciona en navegadores un poco más modernos que el resto de la funciones de `<iframe>` (por ejemplo IE 10 y superior) solicita una mayor configuración de seguridad; bueno, hablaremos más sobre esto en la siguiente sección.
 
-> **Nota:** Para mejorar la velocidad, es una buena idea establecer el atributo `src` de iframes con JavaScript después de que se cargue el contenido principal. Esto hace que tu página pueda utilizarse antes y disminuye el tiempo de carga de tu página principal (an important {{Glossary("SEO")}}.)
+> [!NOTE]
+> Para mejorar la velocidad, es una buena idea establecer el atributo `src` de iframes con JavaScript después de que se cargue el contenido principal. Esto hace que tu página pueda utilizarse antes y disminuye el tiempo de carga de tu página principal (an important {{Glossary("SEO")}}.)
 
 ### Con respecto a la seguridad
 
@@ -271,19 +272,22 @@ Unsandboxed content can do way too much (executing JavaScript, submitting forms,
 
 If absolutely required, you can add permissions back one by one (inside the `sandbox=""` attribute value) — see the [`sandbox`](/es/docs/Web/HTML/Element/iframe#sandbox) reference entry for all the available options. One important note is that you should _never_ add both `allow-scripts` and `allow-same-origin` to your `sandbox` attribute — in that case the embedded content could bypass the same origin security policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.
 
-> **Nota:** Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an `iframe`). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different {{glossary("domain")}} to your main site.
+> [!NOTE]
+> Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an `iframe`). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different {{glossary("domain")}} to your main site.
 
 #### Configure CSP directives
 
 {{Glossary("CSP")}} stands for **[content security policy](/es/docs/Web/Security/CSP)**, and provides [a set of HTTP Headers](/es/docs/Web/Security/CSP/CSP_policy_directives) (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing `<iframe>`s, you can _[configure your server to send an appropriate `X-Frame-Options` header.](/es/docs/Web/HTTP/X-Frame-Options)_ This can prevent other websites from embedding your content in their webpages (which would enable [clickjacking](https://es.wikipedia.org/wiki/Clickjacking) and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.
 
-> **Nota:** You can read Frederik Braun's post [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.
+> [!NOTE]
+> You can read Frederik Braun's post [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.
 
 ## The \<embed> and \<object> elements
 
 The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!
 
-> **Nota:** A **plugin** is software that provides access to content the browser cannot read natively.
+> [!NOTE]
+> A **plugin** is software that provides access to content the browser cannot read natively.
 
 However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see [The case against plugins](#the_case_against_plugins), below), PDFs tend to be be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.
 
diff --git a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.md
index 81a39588e6bd1e..02e8829537874f 100644
--- a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -64,7 +64,8 @@ Podrías pensar que las imágenes vectoriales resolverían estos problemas, y lo
 
 Este tipo de problemas no existían cuando la web se creó por primera vez, a principios y mediados de los noventa — en ese entonces, los únicos dispositivos disponibles para navegar por la web eran los ordenadores de escritorio y laptops, por lo que los desarrolladores e ingenieros que programaban los navegadores ni siquiera pensaban en implementar estas soluciones. Las tecnologías de imagen adaptable se implementaron recientemente para resolver los problemas descritos anteriormente al permitirle ofrecer al navegador varias versiones de imágenes (en diferentes archivos), ya sea que muestren lo mismo pero contengan diferentes números de píxeles (cambio de resolución), o diferentes imágenes adecuadas para diferentes asignaciones de espacio (dirección de arte).
 
-> **Nota:** Las nuevas características discutidas en este artículo — [`srcset`](/es/docs/Web/HTML/Element/img#srcset)/[`sizes`](/es/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}} —son compatibles con las versiones de lanzamiento de los navegadores de escritorio y móviles modernos (incluido el navegador Edge de Microsoft, aunque no Internet Explorer).
+> [!NOTE]
+> Las nuevas características discutidas en este artículo — [`srcset`](/es/docs/Web/HTML/Element/img#srcset)/[`sizes`](/es/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}} —son compatibles con las versiones de lanzamiento de los navegadores de escritorio y móviles modernos (incluido el navegador Edge de Microsoft, aunque no Internet Explorer).
 
 ## ¿Cómo se crean las imágenes adaptables?
 
@@ -108,7 +109,8 @@ Los atributos `srcset` y `sizes` parecen complicados, pero resultan más fácile
 2. Un espacio.
 3. El **ancho de la ranura** que la imagen llenará cuando la condición de medios sea verdadera (`440px`.)
 
-> **Nota:** Para el **ancho de la ranura**, debe indicar una longitud absoluta (`px`, `em`) o relativa (como un porcentaje.) Usted debe haber advertido que el ancho de la última ranura no tiene condición de medios (esta es la opción por defecto que se elige cuando ninguna de las condiciones de medios se cumplen). El navegador ignora todo lo posterior a la primera condición coincidente, por eso sea cuidadoso con el orden de las condiciones de medios.
+> [!NOTE]
+> Para el **ancho de la ranura**, debe indicar una longitud absoluta (`px`, `em`) o relativa (como un porcentaje.) Usted debe haber advertido que el ancho de la última ranura no tiene condición de medios (esta es la opción por defecto que se elige cuando ninguna de las condiciones de medios se cumplen). El navegador ignora todo lo posterior a la primera condición coincidente, por eso sea cuidadoso con el orden de las condiciones de medios.
 
 Entonces, con estos atributos establecidos, el navegador:
 
@@ -119,11 +121,13 @@ Entonces, con estos atributos establecidos, el navegador:
 
 ¡Y eso es todo! Hasta este punto, si un navegador compatible con un ancho de ventana de 480px carga la página, la condición de medios `(max-width: 480px)` se cumplirá, por lo que la ranura de `440px` será elegida y se cargará el archivo de imagen `elva-fairy-480w.jpg`, ya que el ancho inherente (`480w`) es el más cercano a `440px`. La imagen de 800px tiene 128KB en disco mientras que la versión de 480px tiene solo 63KB — un ahorro de 65KB. Ahora imagine si esta fuera una página que tuviera muchas imágenes. Usar esta técnica puede ahorrarle a los usuarios de dispositivos móviles mucho ancho de banda.
 
-> **Nota:** Al probar esto con un navegador de escritorio, si el navegador no carga las imágenes más estrechas cuando tiene su ventana configurada en el ancho más estrecho, eche un vistazo a cuál es la ventana gráfica (puede aproximarla yendo a la **Consola JavaScript** del navegador y escribiendo `document.querySelector('html').clientWidth`). Los diferentes navegadores tienen tamaños mínimos a los que te permitirán reducir el ancho de la ventana y pueden ser más anchos de lo que piensas. Al probarlo con un navegador móvil, puede usar herramientas como la página de depuración de Firefox `about:debugging` para inspeccionar la página cargada en el dispositivo móvil usando las herramientas de desarrollo de escritorio. Para ver qué imágenes se cargaron, puede usar la pestaña [Monitor de red](/es/docs/Tools/Network_Monitor) en las herramientas del desarrollador de Firefox.
+> [!NOTE]
+> Al probar esto con un navegador de escritorio, si el navegador no carga las imágenes más estrechas cuando tiene su ventana configurada en el ancho más estrecho, eche un vistazo a cuál es la ventana gráfica (puede aproximarla yendo a la **Consola JavaScript** del navegador y escribiendo `document.querySelector('html').clientWidth`). Los diferentes navegadores tienen tamaños mínimos a los que te permitirán reducir el ancho de la ventana y pueden ser más anchos de lo que piensas. Al probarlo con un navegador móvil, puede usar herramientas como la página de depuración de Firefox `about:debugging` para inspeccionar la página cargada en el dispositivo móvil usando las herramientas de desarrollo de escritorio. Para ver qué imágenes se cargaron, puede usar la pestaña [Monitor de red](/es/docs/Tools/Network_Monitor) en las herramientas del desarrollador de Firefox.
 
 Los navegadores más antiguos que no soportan estas características solo las ignorarán y seguirán adelante con la carga de la imagen referenciada en el atributo [`src`](/es/docs/Web/HTML/Element/img#src) como lo hacen habitualmente.
 
-> **Nota:** En el {{htmlelement("head")}} del documento usted hallará la línea `<meta name="viewport" content="width=device-width">`: esto fuerza a los dispositivos móviles a adoptar su ancho real de ventana para cargar las páginas web (algunos navegadores móviles mienten sobre el ancho de su ventana gráfica y, en su lugar, cargan páginas con un ancho de ventana más grande y luego reducen la página cargada, lo que no es muy útil para imágenes o diseño receptivos).
+> [!NOTE]
+> En el {{htmlelement("head")}} del documento usted hallará la línea `<meta name="viewport" content="width=device-width">`: esto fuerza a los dispositivos móviles a adoptar su ancho real de ventana para cargar las páginas web (algunos navegadores móviles mienten sobre el ancho de su ventana gráfica y, en su lugar, cargan páginas con un ancho de ventana más grande y luego reducen la página cargada, lo que no es muy útil para imágenes o diseño receptivos).
 
 ### Resolution switching: Same size, different resolutions
 
@@ -174,7 +178,8 @@ This code allows us to display a suitable image on both wide screen and narrow s
 
 ![Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.](picture-element-wide.png)![Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen](picture-element-narrow.png)
 
-> **Nota:** You should use the `media` attribute only in art direction scenarios; when you do use `media`, don't also offer media conditions within the `sizes` attribute.
+> [!NOTE]
+> You should use the `media` attribute only in art direction scenarios; when you do use `media`, don't also offer media conditions within the `sizes` attribute.
 
 ### ¿Por qué no podemos usar, simplemente, CSS o Javascript?
 
@@ -210,7 +215,8 @@ For this active learning, we're expecting you to be brave and go it alone ... mo
 4. Create multiple image files of different sizes, each showing the same picture.
 5. Use `srcset`/`size` to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
 
-> **Nota:** Use the browser devtools to help work out what sizes you need, as mentioned above.
+> [!NOTE]
+> Use the browser devtools to help work out what sizes you need, as mentioned above.
 
 ## Resumen
 
diff --git a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 6f346ccfe32410..b83387be855977 100644
--- a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -47,7 +47,8 @@ Una solución nativa podría resolver mucho de esto si es implementado correctam
 
 No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos [archivos de audio y video de muestra con códigos de ejemplo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.
 
-> **Nota:** Antes de empezar, también deberías saber que hay un puñado de OVPs (proveedores de video online) como [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com) y [Vimeo](https://vimeo.com/), y proveedores de audio como [Soundcloud](https://soundcloud.com/). Tales compañías ofrecen una conveniente fácil forma de hospedar y consumir videos, y que no tienes que preocuparte sobre el enorme ancho de banda que se consume. Los OVPs normalmente usan código prefabricado para incrustar video/audio en tus sitios web; si usas ese camino, puedes evitar algunas dificultades que discutimos en este artículo. Discutiremos este tipo de servicios un poco más en el siguiente artículo.
+> [!NOTE]
+> Antes de empezar, también deberías saber que hay un puñado de OVPs (proveedores de video online) como [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com) y [Vimeo](https://vimeo.com/), y proveedores de audio como [Soundcloud](https://soundcloud.com/). Tales compañías ofrecen una conveniente fácil forma de hospedar y consumir videos, y que no tienes que preocuparte sobre el enorme ancho de banda que se consume. Los OVPs normalmente usan código prefabricado para incrustar video/audio en tus sitios web; si usas ese camino, puedes evitar algunas dificultades que discutimos en este artículo. Discutiremos este tipo de servicios un poco más en el siguiente artículo.
 
 ### El elemento \<video>
 
@@ -99,11 +100,13 @@ Por ejemplo:
 
 Un reproductor de audio tenderá a reproducir directamente un track de audio. Por ejemplo un archivo MP3 u Ogg. No necesitan contenedores.
 
-> **Nota:** No es tan simple como se ve en nuestra [tabla de compatibilidad de codecs audio-video](/es/docs/Web/HTML/Supported_media_formats#Browser_compatibility). Además, muchos browsers de plataformas móviles pueden reproducir un formato no soportado entregándoselo al reproductor multimedia del sistema subyacente para que lo reproduzca. Pero esto servirá por ahora.
+> [!NOTE]
+> No es tan simple como se ve en nuestra [tabla de compatibilidad de codecs audio-video](/es/docs/Web/HTML/Supported_media_formats#Browser_compatibility). Además, muchos browsers de plataformas móviles pueden reproducir un formato no soportado entregándoselo al reproductor multimedia del sistema subyacente para que lo reproduzca. Pero esto servirá por ahora.
 
 Los formatos anteriores existen para comprimir los archivos de audio y video volviéndolos manejables (el tamaño sin comprimir es muy grande). Los browsers contienen diferentes **{{Glossary("Codec","Codecs")}}**, como Vorbis o H.264, los cuales son usados para convertir el sonido y video comprimidos en binario y viceversa. Pero desafortunadamente, como indicamos antes, no todos los browsers soportan los mismos codecs, por lo tanto, habrá que proveer varios archivos para cada producción multimedia. Si te falta el codec correcto para decodificar el medio, simplemente no se reproducirá.
 
-> **Nota:** Debes estar preguntándote por qué sucede esto. El **MP3** (para audio) y el **MP4/H.264** (para video) son ampliamente compatibles y de buena calidad, sin embargo, también están patentados — sus patentes cubren MP3 al menos hasta 2017 y a H.264 hasta 2027, lo que significa que los browsers que no tienen la patente tienen que pagar grandes sumas de dinero para soportar estos formatos. Además, mucha gente no permite el software con restricciones, por estar a favor de formatos abiertos. Por todo esto es que tenemos que proveer múltiples formatos para los diferentes browsers.
+> [!NOTE]
+> Debes estar preguntándote por qué sucede esto. El **MP3** (para audio) y el **MP4/H.264** (para video) son ampliamente compatibles y de buena calidad, sin embargo, también están patentados — sus patentes cubren MP3 al menos hasta 2017 y a H.264 hasta 2027, lo que significa que los browsers que no tienen la patente tienen que pagar grandes sumas de dinero para soportar estos formatos. Además, mucha gente no permite el software con restricciones, por estar a favor de formatos abiertos. Por todo esto es que tenemos que proveer múltiples formatos para los diferentes browsers.
 
 Está bien, ¿pero cómo lo hacemos? Miremos el siguiente [ejemplo actualizado](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html) ([pruébalo en vivo aquí](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html)):
 
@@ -122,7 +125,8 @@ Tomamos el atributo `src` del tag `<video>` y en su lugar incluimos elementos se
 
 Cada elemento `<source>` tambien tiene un atributo `type` . Esto es opcional, pero se recomienda que se incluyan, ya que contienen {{glossary("MIME type","MIME types")}} de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no tienen. Si no estan incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y recursos.
 
-> **Nota:** Nuestro [articulo sobre soporte de formatos multimedia](/es/docs/Web/HTML/Supported_media_formats) contiene algunos de los habituales {{glossary("MIME type","MIME types")}}.
+> [!NOTE]
+> Nuestro [articulo sobre soporte de formatos multimedia](/es/docs/Web/HTML/Supported_media_formats) contiene algunos de los habituales {{glossary("MIME type","MIME types")}}.
 
 ### Otras características de la etiqueta \<video>
 
@@ -191,7 +195,8 @@ Esto produce algo como lo siguiente en un navegador:
 
 ![Un sencillo reproductor de audio con botón de reproducción, temporizador, control de volumen y barra de progreso](audio-player.png)
 
-> **Nota:** Puedes [reproducir este ejemplo de audio](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) en Github (también, puedes ver el [código fuente del reproductor de audio](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
+> [!NOTE]
+> Puedes [reproducir este ejemplo de audio](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) en Github (también, puedes ver el [código fuente del reproductor de audio](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
 
 Esto ocupa menos espacio que un reproductor de video, ya que no hay un componente visual; solo necesita mostrar los controles para reproducir el audio. Otras diferencias con respecto al video HTML5 son las siguentes:
 
@@ -232,7 +237,8 @@ Ahora hablaremos de un concepto un poco más avanzado que es realmente útil con
 
 ¿No estaría bien poder ofrecer a estas personas una transcripción de las palabras que se pronuncian en el audio/vídeo? Pues bien, gracias al vídeo HTML5 se puede, con el formato [WebVTT](/es/docs/Web/API/Web_Video_Text_Tracks_Format) y el elemento {{htmlelement("track")}}.
 
-> **Nota:** "Transcribir" significa "escribir palabras habladas como texto". El texto resultante es una "transcripción".
+> [!NOTE]
+> "Transcribir" significa "escribir palabras habladas como texto". El texto resultante es una "transcripción".
 
 WebVTT es un formato para escribir archivos de texto que contienen múltiples cadenas de texto junto con metadatos tales como en qué momento del vídeo desea que se muestre cada cadena de texto, e incluso información limitada de estilo/posicionamiento. Estas cadenas de texto se llaman **cues**, y se pueden mostrar diferentes tipos para diferentes propósitos, siendo los más comunes:
 
@@ -280,7 +286,8 @@ El resultado será un vídeo con subtítulos, como éste:
 
 Para más detalles, lee [Añadir subtítulos a vídeos HTML5](/es/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Puedes [encontrar el ejemplo](http://iandevlin.github.io/mdn/video-player-with-captions/) que acompaña a este artículo en Github, escrito por Ian Devlin (consulta también el [código fuente](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions).) Este ejemplo utiliza algo de JavaScript para permitir a los usuarios elegir entre diferentes subtítulos. Ten en cuenta que para activar los subtítulos, tienes que pulsar el botón "CC" y seleccionar una opción: English, Deutsch o Español.
 
-> **Nota:** Las pistas de texto también te ayudan con {{glossary("SEO")}}, ya que a los motores de búsqueda les gusta especialmente el texto. Las pistas de texto incluso permiten a los motores de búsqueda enlazar directamente con un punto del vídeo.
+> [!NOTE]
+> Las pistas de texto también te ayudan con {{glossary("SEO")}}, ya que a los motores de búsqueda les gusta especialmente el texto. Las pistas de texto incluso permiten a los motores de búsqueda enlazar directamente con un punto del vídeo.
 
 ### Aprendizaje activo: Incorpora tu propio audio y vídeo
 
diff --git a/files/es/learn/html/tables/advanced/index.md b/files/es/learn/html/tables/advanced/index.md
index 121446cabb3d75..cccb7376c55b5a 100644
--- a/files/es/learn/html/tables/advanced/index.md
+++ b/files/es/learn/html/tables/advanced/index.md
@@ -46,7 +46,8 @@ Como puedes deducir a partir del breve ejemplo anterior, el título debe contene
 
 Los subtítulos se colocan directamente debajo de la etiqueta `<table>`.
 
-> **Nota:** El atributo [`summary`](/es/docs/Web/HTML/Element/table#summary) también se puede usar en el elemento `table` para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento `caption`, porque [`summary`](/es/docs/Web/HTML/Element/table#summary) está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).
+> [!NOTE]
+> El atributo [`summary`](/es/docs/Web/HTML/Element/table#summary) también se puede usar en el elemento `table` para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento `caption`, porque [`summary`](/es/docs/Web/HTML/Element/table#summary) está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).
 
 ### Aprendizaje activo: Añadir un subtítulo
 
@@ -56,7 +57,8 @@ Vamos a probarlo con un ejemplo del artículo anterior.
 2. Añade un título adecuado a la tabla.
 3. Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.
 
-> **Nota:** Puedes encontrar nuestra versión en GitHub: consulta [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([mirar en vivo](http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)).
+> [!NOTE]
+> Puedes encontrar nuestra versión en GitHub: consulta [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([mirar en vivo](http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)).
 
 ## Añadir estructura con \<thead>, \<tfoot> y \<tbody>
 
@@ -96,7 +98,8 @@ Pongamos en acción estos elementos nuevos.
 
 7. Guarda, actualiza, y échale un vistazo al resultado. Si los elementos `<tbody>` y `<tfoot>` no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.
 
-> **Nota:** No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS ([Introducción al CSS](/es/docs/Learn/CSS/First_steps) es un buen lugar para comenzar; también tenemos un artículo específico sobre [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables)).
+> [!NOTE]
+> No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS ([Introducción al CSS](/es/docs/Learn/CSS/First_steps) es un buen lugar para comenzar; también tenemos un artículo específico sobre [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables)).
 
 Tu tabla final debería tener un aspecto similar al siguiente:
 
@@ -218,7 +221,8 @@ Tu tabla final debería tener un aspecto similar al siguiente:
 
 {{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
 
-> **Nota:** También puedes encontrarlo en GitHub como [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) (o consultarlo también [en vivo](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> [!NOTE]
+> También puedes encontrarlo en GitHub como [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) (o consultarlo también [en vivo](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
 
 ## Anidar tablas
 
@@ -357,7 +361,8 @@ Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una h
 
 Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.
 
-> **Nota:** Hay en torno a 253 millones de personas con discapacidad visual según los [datos de la OMS de 2017](https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment).
+> [!NOTE]
+> Hay en torno a 253 millones de personas con discapacidad visual según los [datos de la OMS de 2017](https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment).
 
 Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.
 
@@ -435,7 +440,8 @@ Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían re
 </tbody>
 ```
 
-> **Nota:** Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza **un montón** más de código de marcado y no permite errores. El enfoque `scope` suele bastar para la mayoría de las tablas.
+> [!NOTE]
+> Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza **un montón** más de código de marcado y no permite errores. El enfoque `scope` suele bastar para la mayoría de las tablas.
 
 ### Aprendizaje activo: jugar con scope y headers
 
@@ -443,7 +449,8 @@ Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían re
 2. Ahora intenta añadir los atributos `scope` adecuados para hacer que esta tabla sea más accesible.
 3. Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos `id` y `headers`.
 
-> **Nota:** Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([consúltalo en vivo](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) y [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([consúltalo en vivo](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
+> [!NOTE]
+> Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([consúltalo en vivo](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) y [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([consúltalo en vivo](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
 
 ## Resumen
 
diff --git a/files/es/learn/html/tables/basics/index.md b/files/es/learn/html/tables/basics/index.md
index 67d1d789a40910..38c9215595462e 100644
--- a/files/es/learn/html/tables/basics/index.md
+++ b/files/es/learn/html/tables/basics/index.md
@@ -266,7 +266,8 @@ Esto debería dar como resultado una tabla similar a la siguiente:
   </tbody>
 </table>
 
-> **Nota:** También puedes encontrar esto en GitHub como [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) (consúltalo [en vivo](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
+> [!NOTE]
+> También puedes encontrar esto en GitHub como [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) (consúltalo [en vivo](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
 
 ## Añadir encabezados con elementos \<th>
 
@@ -366,13 +367,15 @@ Intentemos mejorar esta tabla.
 2. Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento **[`<th>`](/es/docs/Web/HTML/Element/th)** ('th' significa 'table header', _encabezado de tabla_). Funciona exactamente igual que un `<td>`, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos `<td>` que delimitan los encabezados de tabla por elementos `<th>`.
 3. Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.
 
-> **Nota:** Puedes encontrar nuestro ejemplo terminado en [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) en GitHub ([o consultarlo en vivo](http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
+> [!NOTE]
+> Puedes encontrar nuestro ejemplo terminado en [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) en GitHub ([o consultarlo en vivo](http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
 
 ### ¿Por qué son útiles los encabezados?
 
 Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.
 
-> **Nota:** Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.
+> [!NOTE]
+> Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.
 
 Los encabezados de tabla también presentan otra ventaja: junto con el atributo de `scope` (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.
 
@@ -450,7 +453,8 @@ Usemos `colspan` y `rowspan` para mejorar esta tabla.
 3. Por último, usa `rowspan` para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.
 4. Guarda tu código y ábrelo en un navegador para ver la mejora.
 
-> **Nota:** Puedes encontrar nuestro ejemplo terminado en [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) en GitHub ([o consultarlo en vivo](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
+> [!NOTE]
+> Puedes encontrar nuestro ejemplo terminado en [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) en GitHub ([o consultarlo en vivo](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
 
 ## Proporcionar un estilo común a las columnas
 
diff --git a/files/es/learn/html/tables/index.md b/files/es/learn/html/tables/index.md
index c9f0eca7379452..5e0ec329e322a8 100644
--- a/files/es/learn/html/tables/index.md
+++ b/files/es/learn/html/tables/index.md
@@ -11,7 +11,8 @@ Una tarea muy común en HTML es la estructuración de datos, y para esto hay mú
 
 Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver [Introducción a HTML](/es/docs/Learn/HTML/Introduccion_a_HTML).
 
-> **Nota:** Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/html/tables/structuring_planet_data/index.md b/files/es/learn/html/tables/structuring_planet_data/index.md
index 12996985e65b80..60cef3825d39d5 100644
--- a/files/es/learn/html/tables/structuring_planet_data/index.md
+++ b/files/es/learn/html/tables/structuring_planet_data/index.md
@@ -30,7 +30,8 @@ En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sis
 
 Para comenzar esta evaluación, crea una copia local de [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html), [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css), y [planets-data.txt](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt) en una nueva carpeta de tu ordenador.
 
-> **Nota:** Como alternativa, puedes usar una web como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de `<script>`/`<style>`.
+> [!NOTE]
+> Como alternativa, puedes usar una web como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de `<script>`/`<style>`.
 
 ## Resumen del proyecto
 
diff --git a/files/es/learn/index.md b/files/es/learn/index.md
index 143ddd27a685f3..d6a4b05e9efa91 100644
--- a/files/es/learn/index.md
+++ b/files/es/learn/index.md
@@ -13,7 +13,7 @@ El objetivo de esta área de MDN no es llevarte de "principiante" a "experto", s
 
 Si eres un principiante, el desarrollo web puede ser un desafío: iremos de la mano y te brindaremos suficientes detalles para que te sientas cómodo y aprendas los temas correctamente. Debes sentirte como en casa, ya sea que seas un estudiante que está aprendiendo desarrollo web (por su cuenta o como parte de una clase), un maestro que busca materiales para la clase, un aficionado o alguien que solo quiere saber más sobre cómo funcionan las tecnologías web.
 
-> **Observación:**
+> [!CALLOUT]
 >
 > #### ¿Quieres convertirte en un desarrollador web front-end?
 >
@@ -32,7 +32,8 @@ Si eres un principiante, el desarrollo web puede ser un desafío: iremos de la m
 - _Frameworks_ y herramientas
   - : Después de dominar los conceptos básicos de HTML, CSS y JavaScript estándar, debe aprender sobre [herramientas de desarrollo web del lado del cliente](/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools), y luego considerar profundizar en [_frameworks_ de JavaScript del lado del cliente](/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks), y [programación de sitios web del lado del servidor](/es/docs/Learn/Server-side).
 
-> **Nota:** Nuestro [glosario](/es/docs/Glossary) proporciona definiciones terminológicas. Además, si tienes una pregunta específica sobre desarrollo web, nuestra sección [Preguntas comunes](/es/docs/Learn/Common_questions) puede tener algo para ayudarte.
+> [!NOTE]
+> Nuestro [glosario](/es/docs/Glossary) proporciona definiciones terminológicas. Además, si tienes una pregunta específica sobre desarrollo web, nuestra sección [Preguntas comunes](/es/docs/Learn/Common_questions) puede tener algo para ayudarte.
 
 ## Temas cubiertos
 
diff --git a/files/es/learn/javascript/asynchronous/index.md b/files/es/learn/javascript/asynchronous/index.md
index a318415721d3e3..397c2d31e21a8d 100644
--- a/files/es/learn/javascript/asynchronous/index.md
+++ b/files/es/learn/javascript/asynchronous/index.md
@@ -13,7 +13,8 @@ JavaScript asíncrono es un tema bastante avanzado, y se recomienda trabajar con
 
 Si no está familiarizado con el concepto de programación asincrónica, definitivamente debe comenzar con el artículo [Conceptos generales de programación asincrónica](/es/docs/Learn/JavaScript/Asynchronous/Concepts) en este módulo. Si es así, probablemente pueda pasar al [módulo Introducción a JavaScript asíncrono](/es/docs/Learn/JavaScript/Asynchronous/Introducing).
 
-> **Nota:** Si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com)
+> [!NOTE]
+> Si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com)
 
 ## Guias
 
diff --git a/files/es/learn/javascript/building_blocks/build_your_own_function/index.md b/files/es/learn/javascript/building_blocks/build_your_own_function/index.md
index 6f731e29ea3fa2..596ce04b40e5ca 100644
--- a/files/es/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/es/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -23,13 +23,15 @@ La función `alert` tiene un argumento — el string que se muestra en la alerta
 
 La función `alert` es limitada: pueder cambiar el mensaje, pero no puedes cambiar de manera sencilla nada más, como el color, icono o cualquier otra cosa. Construiremos uno que resultará ser más divertido.
 
-> **Nota:** Este ejemplo debería funcionar bien en todos los navegadores modernos, pero el estilo puede parecer un poco divertido en los navegadores un poco más antiguos. Te recomendamos que hagas este ejercicio en un navegador moderno como Firefox, Opera o Chrome.
+> [!NOTE]
+> Este ejemplo debería funcionar bien en todos los navegadores modernos, pero el estilo puede parecer un poco divertido en los navegadores un poco más antiguos. Te recomendamos que hagas este ejercicio en un navegador moderno como Firefox, Opera o Chrome.
 
 ## La función básica
 
 Para empezar, vamos a poner juntos una función básica.
 
-> **Nota:** Para las convenciones de nombres de las funciones, debes seguir las mismas reglas que [convecion de nombres de variables](/es/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Esto está bien, ya que puede distinguirlos: los nombres de las funciones aparecen entre paréntesis después de ellos y las variables no.
+> [!NOTE]
+> Para las convenciones de nombres de las funciones, debes seguir las mismas reglas que [convecion de nombres de variables](/es/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Esto está bien, ya que puede distinguirlos: los nombres de las funciones aparecen entre paréntesis después de ellos y las variables no.
 
 1. Comience accediendo al archivo [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html) y haciendo una copia local. Verás que el HTML es simple — el body unicamente tiene un botón. También hemos propocionado algunos estilos básicos de CSS para customizar el mensaje y un elemento {{htmlelement("script")}} vacío para poner nuestro JavaScript dentro.
 2. Luego añade lo siguiente dentro del elemento `<script>`:
@@ -212,7 +214,8 @@ En el siguiente parámetro. Este va a implicar un poco más de trabajo: lo confi
 
 1. En primer lugar, descargue los iconos necesarios para este ejercicio ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) y [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) de GitHub. Guárdalos en una nueva carpeta llamada `icons` en la misma localización que tu HTML.
 
-   > **Nota:** los iconos [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) y [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) que se encuentran en iconfinder.com, han sido diseñados por [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Gracias!
+   > [!NOTE]
+   > Los iconos [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) y [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) que se encuentran en iconfinder.com, han sido diseñados por [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Gracias!
 
 2. A continuación, encuentra el CSS dentro de tu archivo HTML. Haremos algunos cambios para dar paso a los iconos. Primero, actualiza el ancho de .msgBox desde:
 
@@ -264,7 +267,8 @@ En el siguiente parámetro. Este va a implicar un poco más de trabajo: lo confi
 
    Puedes ver cuán útil se está volviendo nuestra (ahora no tan) poca función.
 
-> **Nota:** Si estas teniendo problemas con el ejemplo, sientente libre para coger el ejemplo para trabajar con él, [finished version on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html) también), o pídenos ayuda.
+> [!NOTE]
+> Si estas teniendo problemas con el ejemplo, sientente libre para coger el ejemplo para trabajar con él, [finished version on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html) también), o pídenos ayuda.
 
 ## Conclusión
 
diff --git a/files/es/learn/javascript/building_blocks/conditionals/index.md b/files/es/learn/javascript/building_blocks/conditionals/index.md
index 925e0acdbd7a6b..0e4ccae321078f 100644
--- a/files/es/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/es/learn/javascript/building_blocks/conditionals/index.md
@@ -84,7 +84,8 @@ if (compraRealizada === true) {
 
 La variable `compraRealizada` escrita en este código dará siempre como resultado un retorno de valor `false`, lo cuál significa una desilusión para nuestro pobre hijo. Depende de nosotros proporcionar un mecanismo para que el padre cambie el valor de la variable `compraRealizada` a `true` si el niño realizó la compra.
 
-> **Nota:** Podrás ver una versión más completa de [este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (también podrás verlo [corriendo en vivo.](https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html))
+> [!NOTE]
+> Podrás ver una versión más completa de [este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (también podrás verlo [corriendo en vivo.](https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html))
 
 ### else if
 
@@ -139,7 +140,8 @@ function establecerClima() {
 3. Cuando la función es ejecutada, primero establecemos la variable `eleccion` con el valor obtenido del elemento `<select>.` Luego usamos una declaración condicinal para mostrar distintos textos dentro del párrafo {{htmlelement("p")}} dependiendo del valor de la variable `eleccion`. Note como todas las condicinales son probadas en los bloques `else if() {...}` , a excepción del primero, el cual es probado en el primer bloque `if() {...}`.
 4. La ultima elección, dentro del bloque `else {...}`, es básicamente el "último recurso" como opción— El código dentro de este bloque se ejecutará si nunguna de las condiciones es `true`. En este caso, sirve para vaciar el contenido del párrafo si nada ha sido seleccionado, por ejemplo, si el usuario decide elegir de nuevo "--Haga una elección--" mostrado al inicio.
 
-> **Nota:** Puedes encontrar [este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (También podrás verlo [correr en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html).)
+> [!NOTE]
+> Puedes encontrar [este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (También podrás verlo [correr en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html).)
 
 ### Una nota en los operadores de comparación
 
@@ -149,7 +151,8 @@ Los operadores de comparación son usados para probar las condiciones dentro de
 - `<` y `>` — prueba si un valor es menor o mayor que otro.
 - `<=` y `>=` — prueba si un valor es menor e igual o mayor e igual que otro.
 
-> **Nota:** Revisa el material en los enlaces previos para refrescar la memoria en estos temas.
+> [!NOTE]
+> Revisa el material en los enlaces previos para refrescar la memoria en estos temas.
 
 Queremos hacer una mención especial al probar los valores (`true`/`false`) , y un patrón común que te encontrarás una y otra vez. Cualquier valor que no sea `false`, `undefined`, `null`, `0`, `NaN`, o una cadena vacía string (`''`) realmente retorna el valor `true` cuando es probada como una declaración condicional, por lo tanto puedes simplemente usar el nombre de una variable para probar si es `true`, o si al menos existe (i.e. no está definido.) Por ejemplo:
 
@@ -304,7 +307,8 @@ Aquí tenemos:
 6. Como muchos otros casos, los que quieras.
 7. La palabra clave `default`, seguido exactamente del mismo patrón de código que en los casos anteriores , excepto que el valor predeterminado no tiene opciónes después de él, y no es necesario que se use `break` porque no hay nada que ejecutar después de este bloque de todas formas. Esta es la opción predeterminada o por defecto que se ejecuta si ninguna de las opciones coincide.
 
-> **Nota:** No tiene que incluir la sección `default`; se puede omitir con seguridad si no hay posibilidades de que la expresión termine igualando un valor desconocido. Sin embargo, si existe la posibilidad de que esto ocurra, debe incluirlo para evitar casos desconocidos o comportamientos extraños en tu código.
+> [!NOTE]
+> No tiene que incluir la sección `default`; se puede omitir con seguridad si no hay posibilidades de que la expresión termine igualando un valor desconocido. Sin embargo, si existe la posibilidad de que esto ocurra, debe incluirlo para evitar casos desconocidos o comportamientos extraños en tu código.
 
 ### Un ejemplo con switch
 
@@ -355,7 +359,8 @@ function setWeather() {
 }
 ```
 
-> **Nota:** Tambien puedes[encontrar este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (tambien puedes verlo [en ejecución aquí](https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html).)
+> [!NOTE]
+> Tambien puedes[encontrar este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (tambien puedes verlo [en ejecución aquí](https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html).)
 
 ## Operador Ternario
 
@@ -412,7 +417,8 @@ Aquí tenemos un elemento {{htmlelement('select')}} para elegir un tema (blanco
 
 Finalmente, también tenemos un detector de eventos [onchange](/es/docs/conflicting/Web/API/HTMLElement/change_event) que sirve para ejecutar una función que contiene un operador ternario. Comienza con una condición de prueba — `select.value === 'black'`. Si esto devuelve `true`, ejecutamos la función `update()` con parámetros de blanco y negro, lo que significa que terminamos con un color de fondo negro y un color de texto blanco. Si devuelve `false`, ejecutamos las función `update()` con parámetros de blanco y negro, lo que significa que el color del sitio está invertido.
 
-> **Nota:** También puedes [encontrar este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (y verlo [en ejecución aquí](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html).)
+> [!NOTE]
+> También puedes [encontrar este ejemplo en GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (y verlo [en ejecución aquí](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html).)
 
 ## Aprendizaje activo: Un calendario simple
 
diff --git a/files/es/learn/javascript/building_blocks/events/index.md b/files/es/learn/javascript/building_blocks/events/index.md
index 0787308e5c4ef0..2d5c7b75fb8d49 100644
--- a/files/es/learn/javascript/building_blocks/events/index.md
+++ b/files/es/learn/javascript/building_blocks/events/index.md
@@ -54,7 +54,8 @@ Cuando uno de estos bloques de código se configura para ejecutarse en respuesta
 Nota: Los manejadores de eventos a veces son llamados **detectores de eventos**. Estos términos, para lo que nos concierne justo ahora, son intercambiables, aunque hablando de forma estricta, hacen referencia a dos mecanismos que trabajan juntos.
 Los detectores de eventos están pendientes a que ocurra un evento, mientras que el manejador es el código que se ejecuta en respuesta del evento.
 
-> **Nota:** Los eventos en la web no son parte del núcleo del lenguaje JavaScript, éstos están definidos como parte de las API del navegador.
+> [!NOTE]
+> Los eventos en la web no son parte del núcleo del lenguaje JavaScript, éstos están definidos como parte de las API del navegador.
 
 ### Un ejemplo: manejando un evento de clic
 
@@ -321,15 +322,18 @@ function bgChange(e) {
 btn.addEventListener("click", bgChange);
 ```
 
-> **Nota:** Puedes encontrar el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/random-color-eventobject.html) de este ejemplo en Github (además [mira cómo se ejecuta en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
+> [!NOTE]
+> Puedes encontrar el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/random-color-eventobject.html) de este ejemplo en Github (además [mira cómo se ejecuta en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
 
 Aquí puedes ver que estamos incluyendo un objeto evento **e** en la función, y dentro de nuestra función estamos cambiando el estilo de color de fondo sobre `e.target`, que es el botón como tal.
 La propiedad `target` del objeto evento siempre es una referencia al elemento sobre el cual ocurrió el evento.
 Por lo tanto, en este ejemplo, estamos estableciendo el color de fondo aleatorio en el botón, no la página.
 
-> **Nota:** Mira la sección de [delegación de Eventos](#event_delegation) más abajo para ver un ejemplo donde usamos `event.target`.
+> [!NOTE]
+> Mira la sección de [delegación de Eventos](#event_delegation) más abajo para ver un ejemplo donde usamos `event.target`.
 
-> **Nota:** Puedes utilizar cualquier nombre para el objeto evento, simplemente debes elegir un nombre que puedas usar para hacer referencia a él dentro de la función manejadora.
+> [!NOTE]
+> Puedes utilizar cualquier nombre para el objeto evento, simplemente debes elegir un nombre que puedas usar para hacer referencia a él dentro de la función manejadora.
 > `e`/`evt`/`event` son los nombres más comunes utilizados por desarrolladores porque son cortos y fáciles de recordar.
 > Siempre es bueno ser consistente, contigo mismo y los demás siempre que sea posible.
 
@@ -420,7 +424,8 @@ El resultado es el siguiente:
 
 {{ EmbedLiveSample('Preventing_default_behavior', '100%', 180, "", "") }}
 
-> **Nota:** Para ver el código fuente completo, aquí tienes el archivo [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html) (también puedes [verlo ejecutándose en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html) aquí).
+> [!NOTE]
+> Para ver el código fuente completo, aquí tienes el archivo [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html) (también puedes [verlo ejecutándose en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html) aquí).
 
 ## Burbujeo de eventos
 
@@ -759,9 +764,11 @@ El resultado es de la siguiente forma (intenta hacer clic alreador):
 
 {{ EmbedLiveSample('Event delegation', '100%', 430, "", "") }}
 
-> **Nota:** En este ejemplo, estamos usando `event.target` para obtener el elemento objetivo del evento (es decir, el elemento más interno). Si queremos acceder al elemento que manejó el evento (en este caso, el contenedor), podemos usar `event.currentTarget`.
+> [!NOTE]
+> En este ejemplo, estamos usando `event.target` para obtener el elemento objetivo del evento (es decir, el elemento más interno). Si queremos acceder al elemento que manejó el evento (en este caso, el contenedor), podemos usar `event.currentTarget`.
 
-> **Nota:** Ve el archivo [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html) para el código completo; además velo [ejecutándose en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html) aquí.
+> [!NOTE]
+> Ve el archivo [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html) para el código completo; además velo [ejecutándose en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html) aquí.
 
 ## No es solamente en paǵinas web
 
diff --git a/files/es/learn/javascript/building_blocks/index.md b/files/es/learn/javascript/building_blocks/index.md
index 8f001b482eb733..9d376f34c4e08b 100644
--- a/files/es/learn/javascript/building_blocks/index.md
+++ b/files/es/learn/javascript/building_blocks/index.md
@@ -17,7 +17,8 @@ Hemos reunido un curso que incluye toda la información esencial que necesitas p
 
 Antes de empezar este módulo, deberías ya tener alguna familiaridad con lo básico de [HTML](/es/docs/Learn/HTML/Introduction_to_HTML) y [CSS](/es/docs/Learn/CSS/Introduction_to_CSS), y también deberías haber trabajado todos lo módulos previos, [JavaScript primeros pasos](/es/docs/Learn/JavaScript/First_steps).
 
-> **Nota:** Si estas trabajando en una computadora/tablet/otro dispositivo donde no tienes la capacidad de crear tus propios archivos, podrías practicar (la mayoría de) los ejemplos de código en un programa en linea tales como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estas trabajando en una computadora/tablet/otro dispositivo donde no tienes la capacidad de crear tus propios archivos, podrías practicar (la mayoría de) los ejemplos de código en un programa en linea tales como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/javascript/building_blocks/looping_code/index.md b/files/es/learn/javascript/building_blocks/looping_code/index.md
index 2e25e6bb4869fb..20118380bae603 100644
--- a/files/es/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/es/learn/javascript/building_blocks/looping_code/index.md
@@ -441,7 +441,8 @@ btn.addEventListener("click", () => {
 
 5. Después del bucle, verificamos si configuramos un contacto y, de lo contrario, configuramos el texto del párrafo como "Contacto no encontrado".
 
-> **Nota:** También puedes ver el [código fuente completo en GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/contact-search.html) (también [verlo en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
+> [!NOTE]
+> También puedes ver el [código fuente completo en GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/contact-search.html) (también [verlo en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
 
 ## Omitir iteraciones con continue
 
@@ -489,7 +490,8 @@ Este es el resultado:
 3. Si la raíz cuadrada y la raíz cuadrada redondeada hacia abajo no son iguales entre sí (`!==`), significa que la raíz cuadrada no es un número entero, por lo que no nos interesa. En tal caso, usamos la instrucción `continue` para saltar a la siguiente iteración de bucle sin registrar el número en ninguna parte.
 4. Si la raíz cuadrada es un número entero, omitimos por completo el bloque `if`, por lo que no se ejecuta la instrucción `continue`; en su lugar, concatenamos el valor `i` actual más un espacio al final del contenido del párrafo.
 
-> **Nota:** También puedes ver el [código fuente completo en GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/integer-squares.html) (también [verlo en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
+> [!NOTE]
+> También puedes ver el [código fuente completo en GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/integer-squares.html) (también [verlo en vivo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
 
 ## while y do...while
 
@@ -535,7 +537,8 @@ while (i < cats.length) {
 console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles y Jasmine."
 ```
 
-> **Nota:** Esto sigue funcionando exactamente como se esperaba: échale un vistazo al [código fuente completo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (también puedes ver el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)).
+> [!NOTE]
+> Esto sigue funcionando exactamente como se esperaba: échale un vistazo al [código fuente completo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (también puedes ver el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)).
 
 El bucle [do...while](/es/docs/Web/JavaScript/Reference/Statements/do...while) es muy similar, pero proporciona una variación en la estructura while:
 
@@ -574,9 +577,11 @@ do {
 console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles y Jasmine."
 ```
 
-> **Nota:** De nuevo, esto funciona igual que lo esperado: échale un vistazo al [código fuente completo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (también puedes ver el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)).
+> [!NOTE]
+> De nuevo, esto funciona igual que lo esperado: échale un vistazo al [código fuente completo](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (también puedes ver el [código fuente completo](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)).
 
-> **Advertencia:** Con while y do...while, como con todos los bucles, debe asegurarse de que el inicializador se incremente o, según el caso, se disminuya, para que la condición finalmente se vuelva falsa.
+> [!WARNING]
+> Con while y do...while, como con todos los bucles, debe asegurarse de que el inicializador se incremente o, según el caso, se disminuya, para que la condición finalmente se vuelva falsa.
 > Si no, el bucle continuará para siempre y el navegador lo obligará a detenerse o se bloqueará. Esto se llama un **bucle infinito**.
 
 ## Aprendizaje activo: iniciar cuenta regresiva
@@ -600,7 +605,8 @@ En concreto, queremos:
 
 - ¡Recuerda incluir un iterador! Sin embargo, en este ejemplo estamos contando hacia atrás después de cada iteración, no hacia arriba, por lo que **no** quieres `i++`: ¿cómo iteras hacia abajo?
 
-> **Nota:** Si comienza a escribir el bucle (por ejemplo, (while(i>=0)), es posible que el navegador se atasque porque aún no ha ingresado la condición final. Así que ten cuidado con esto. Puedes empezar a escribir tu código en un comentario para hacer frente a este problema y eliminar el comentario después de terminar.
+> [!NOTE]
+> Si comienza a escribir el bucle (por ejemplo, (while(i>=0)), es posible que el navegador se atasque porque aún no ha ingresado la condición final. Así que ten cuidado con esto. Puedes empezar a escribir tu código en un comentario para hacer frente a este problema y eliminar el comentario después de terminar.
 
 Si comete un error, siempre puede restablecer el ejemplo con el botón "Restablecer".
 Si te quedas realmente atascado, pulsa "Mostrar solución" para ver una solución.
@@ -986,7 +992,8 @@ do {
 } while (condición)
 ```
 
-> **Nota:** También hay otros tipos/características de bucle, que son útiles en situaciones avanzadas/especializadas y más allá del alcance de este artículo. Si quieres ir más allá con tu aprendizaje en bucle, lee nuestra [Guía de bucles e iteraciones](/es/docs/Web/JavaScript/Guide/Loops_and_iteration) avanzada.
+> [!NOTE]
+> También hay otros tipos/características de bucle, que son útiles en situaciones avanzadas/especializadas y más allá del alcance de este artículo. Si quieres ir más allá con tu aprendizaje en bucle, lee nuestra [Guía de bucles e iteraciones](/es/docs/Web/JavaScript/Guide/Loops_and_iteration) avanzada.
 
 ## Pon a prueba tus habilidades
 
diff --git a/files/es/learn/javascript/building_blocks/return_values/index.md b/files/es/learn/javascript/building_blocks/return_values/index.md
index 769e5a6425ade5..1e4ea49d8dad02 100644
--- a/files/es/learn/javascript/building_blocks/return_values/index.md
+++ b/files/es/learn/javascript/building_blocks/return_values/index.md
@@ -130,7 +130,8 @@ Let's have a go at writing our own functions featuring return values.
 
 4. Save your code, load it in a browser, and try it out.
 
-> **Nota:** If you have trouble getting the example to work, feel free to check your code against the [finished version on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html) also), or ask us for help.
+> [!NOTE]
+> If you have trouble getting the example to work, feel free to check your code against the [finished version on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html) also), or ask us for help.
 
 At this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. How about the square or cube root of the number, or the circumference of a circle with a radius of length `num`?
 
diff --git a/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.md
index 0635c33afd541c..b7b5b23f8ab055 100644
--- a/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -26,7 +26,8 @@ El almacenamiento de lado del cliente funciona con principios similares, pero ti
 
 A menudo, el almacenamiento de lado del cliente y de lado del servidor se utilizan juntos. Por ejemplo, puedes descargar un lote de archivos de música (quizás utilizados por un juego web o una aplicación de reproducción de música), almacenarlos dentro de una base de datos de lado del cliente y reproducirlos según sea necesario. El usuario solo tendría que descargar los archivos de música una vez; en las visitas posteriores, se recuperarían de la base de datos.
 
-> **Nota:** Existen límites en la cantidad de datos que puedes almacenar utilizando las APIs de almacenamiento de lado del cliente (posiblemente tanto por API individual como acumulativamente); el límite exacto varía según el navegador y posiblemente según la configuración del usuario. Consulta [límites de almacenamiento del navegador y criterios de desalojo](/es/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria) para obtener más información.
+> [!NOTE]
+> Existen límites en la cantidad de datos que puedes almacenar utilizando las APIs de almacenamiento de lado del cliente (posiblemente tanto por API individual como acumulativamente); el límite exacto varía según el navegador y posiblemente según la configuración del usuario. Consulta [límites de almacenamiento del navegador y criterios de desalojo](/es/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria) para obtener más información.
 
 ### Vieja escuela: cookies
 
@@ -216,9 +217,11 @@ Construyamos el ejemplo para que puedas entender cómo funciona.
 
 Tu ejemplo está terminado, ¡bien hecho!; Todo lo que queda ahora es guardar tu código y probar tu página HTML en un navegador. Puedes ver nuestra [versión finalizada en vivo aquí](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html).
 
-> **Nota:** Hay otro ejemplo un poco más complejo para explorar en [Uso de la API de almacenamiento web](/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API).
+> [!NOTE]
+> Hay otro ejemplo un poco más complejo para explorar en [Uso de la API de almacenamiento web](/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API).
 
-> **Nota:** En la línea `<script src="index.js" defer></script>` del código fuente de nuestra versión final, el atributo `defer` especifica que el contenido del elemento {{htmlelement("script")}} no se ejecutará hasta que la página haya terminado de cargarse.
+> [!NOTE]
+> En la línea `<script src="index.js" defer></script>` del código fuente de nuestra versión final, el atributo `defer` especifica que el contenido del elemento {{htmlelement("script")}} no se ejecutará hasta que la página haya terminado de cargarse.
 
 ## Almacenamiento de datos complejos — `IndexedDB`
 
@@ -275,7 +278,8 @@ Ahora veamos lo que tenemos que hacer en primer lugar, para configurar una base
 
    Para manejar esto en IndexedDB, crea un objeto de solicitud (que se puede llamar como desees; lo llamamos `request`, por lo que es obvio para qué sirve). Luego, usa controladores de eventos para ejecutar código cuando la solicitud se completa, falla, etc., que verás en uso a continuación.
 
-   > **Nota:** El número de versión es importante. Si deseas actualizar tu base de datos (por ejemplo, cambiando la estructura de la tabla), debes ejecutar tu código nuevamente con un número de versión aumentado, un esquema diferente especificado dentro del controlador `onupgradeneeded` (ve más abajo), etc. No cubriremos la actualización de bases de datos en este sencillo tutorial.
+   > [!NOTE]
+   > El número de versión es importante. Si deseas actualizar tu base de datos (por ejemplo, cambiando la estructura de la tabla), debes ejecutar tu código nuevamente con un número de versión aumentado, un esquema diferente especificado dentro del controlador `onupgradeneeded` (ve más abajo), etc. No cubriremos la actualización de bases de datos en este sencillo tutorial.
 
 4. Ahora agrega los siguientes controladores de eventos justo debajo de tu adición anterior, nuevamente dentro del controlador `window.onload`:
 
@@ -650,7 +654,8 @@ Cuando intercepta una solicitud, puede hacer lo que desees (consulta [ideas de c
 
 La API de caché es otro mecanismo de almacenamiento del lado del cliente, con una pequeña diferencia: está diseñada para guardar respuestas HTTP y, por lo tanto, funciona muy bien con el servicio _workers_.
 
-> **Nota:** El servicio _workers_ y la memoria caché ahora son compatibles con la mayoría de los navegadores modernos. Al momento de escribir este artículo, Safari todavía estaba ocupado implementándolo, pero debería estar allí pronto.
+> [!NOTE]
+> El servicio _workers_ y la memoria caché ahora son compatibles con la mayoría de los navegadores modernos. Al momento de escribir este artículo, Safari todavía estaba ocupado implementándolo, pero debería estar allí pronto.
 
 ### Un ejemplo del servicio worker
 
@@ -676,7 +681,8 @@ if ("serviceWorker" in navigator) {
 }
 ```
 
-> **Nota:** La ruta proporcionada al archivo `sw.js` es relativa al origen del sitio, no al archivo JavaScript que contiene el código. El servicio _worker_ está en `https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js`. El origen es `https://mdn.github.io` y, por lo tanto, la ruta dada debe ser `/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js`. Si quisieras alojar este ejemplo en tu propio servidor, tendrías que cambiarlo consecuentemente. Esto es bastante confuso, pero tiene que funcionar de esta manera por razones de seguridad.
+> [!NOTE]
+> La ruta proporcionada al archivo `sw.js` es relativa al origen del sitio, no al archivo JavaScript que contiene el código. El servicio _worker_ está en `https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js`. El origen es `https://mdn.github.io` y, por lo tanto, la ruta dada debe ser `/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js`. Si quisieras alojar este ejemplo en tu propio servidor, tendrías que cambiarlo consecuentemente. Esto es bastante confuso, pero tiene que funcionar de esta manera por razones de seguridad.
 
 #### Instalación del servicio worker
 
diff --git a/files/es/learn/javascript/client-side_web_apis/index.md b/files/es/learn/javascript/client-side_web_apis/index.md
index 8f3d188434fa96..88db3f0b1ac214 100644
--- a/files/es/learn/javascript/client-side_web_apis/index.md
+++ b/files/es/learn/javascript/client-side_web_apis/index.md
@@ -13,7 +13,8 @@ Para aprovechar al máximo este módulo, debería haber trabajado con los módul
 
 Conocimiento basico de [HTML](/es/docs/Learn/HTML) y [CSS](/es/docs/Learn/CSS) tambien seria util.
 
-> **Nota:** Si está trabajando en un dispositivo en el que no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si está trabajando en un dispositivo en el que no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/javascript/client-side_web_apis/introduction/index.md b/files/es/learn/javascript/client-side_web_apis/introduction/index.md
index 5499d7ae1e7a2d..af3b7dea871ad8 100644
--- a/files/es/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/es/learn/javascript/client-side_web_apis/introduction/index.md
@@ -23,7 +23,8 @@ _Fuente de la imagen: [Overloaded plug socket](https://www.flickr.com/photos/eas
 
 De la misma manera, si quisieras programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas.
 
-> **Nota:** Consulta también la [entrada API en el glosario](/es/docs/Glossary/API) para una descripción más detallada.
+> [!NOTE]
+> Consulta también la [entrada API en el glosario](/es/docs/Glossary/API) para una descripción más detallada.
 
 ### APIs en JavaScript del lado cliente
 
@@ -69,7 +70,8 @@ Existe una gran variedad de APIs de terceros, algunas de las más populares de l
 - La [YouTube API](https://developers.google.com/youtube/), te permite integrar videos de Youtube en tu sitio, buscar en Youtube, construir listas de reproducción y más.
 - La [Twilio API](https://www.twilio.com/), provee de un framework para crear la funcionalidad de llamadas y videollamadas en tus aplicaciones, enviar SMS o MMS y más.
 
-> **Nota:** puedes encontrar información de una gran cantidad de APIs de terceros en el [Programmable Web API directory](http://www.programmableweb.com/category/all/apis).
+> [!NOTE]
+> Puedes encontrar información de una gran cantidad de APIs de terceros en el [Programmable Web API directory](http://www.programmableweb.com/category/all/apis).
 
 ## ¿Cómo funcionan las APIs?
 
@@ -79,7 +81,8 @@ Las distintas APIs de JavaScript funcionan de forma ligeramente diferente, pero
 
 Las APIs interactúan con tu código usando uno o más [Objetos JavaScript,](/es/docs/Learn/JavaScript/Objects) que sirven como contenedores para los datos que usa la API (contenidos en las propiedades del objeto), y la funcionalidad que la API provee (contenida en los métodos del objeto).
 
-> **Nota:** si no estás familiarizado en cómo trabajar con objetos, deberías volver atrás y revisar el módulo de [objetos JavaScript](/es/docs/Learn/JavaScript/Objects)antes de seguir.
+> [!NOTE]
+> Si no estás familiarizado en cómo trabajar con objetos, deberías volver atrás y revisar el módulo de [objetos JavaScript](/es/docs/Learn/JavaScript/Objects)antes de seguir.
 
 Volvamos al ejemplo de la API de Geolocalización, que es una API muy simple que consiste en unos pocos objetos sencillos:
 
@@ -108,7 +111,8 @@ navigator.geolocation.getCurrentPosition(function (position) {
 });
 ```
 
-> **Nota:** cuando cargues por primera vez el ejemplo de arriba, se te mostrará un mensaje preguntando si deseas compartir tu localización con esta aplicación (ver la sección [They have additional security mechanisms where appropriate](#they_have_additional_security_mechanisms_where_appropriate) que se encuentra más adelante en este artículo). Deberás estar de acuerdo con esto para poder ver tu localización en el mapa. Si aún así sigues sin ver tu localización, tal vez debas establecer los permisos manualmente; lo puedes hacer de varias formas dependiendo del navegador que estés usando; por ejemplo en Firefox debes ir a > _Tools_ > _Page Info_ > _Permissions_, y cambiar la configuración para _Share Location_; en Chrome ve a _Settings_ > _Privacy_ > _Show advanced settings_ > _Content settings_ y cambia las opciones para _Location_.
+> [!NOTE]
+> Cuando cargues por primera vez el ejemplo de arriba, se te mostrará un mensaje preguntando si deseas compartir tu localización con esta aplicación (ver la sección [They have additional security mechanisms where appropriate](#they_have_additional_security_mechanisms_where_appropriate) que se encuentra más adelante en este artículo). Deberás estar de acuerdo con esto para poder ver tu localización en el mapa. Si aún así sigues sin ver tu localización, tal vez debas establecer los permisos manualmente; lo puedes hacer de varias formas dependiendo del navegador que estés usando; por ejemplo en Firefox debes ir a > _Tools_ > _Page Info_ > _Permissions_, y cambiar la configuración para _Share Location_; en Chrome ve a _Settings_ > _Privacy_ > _Show advanced settings_ > _Content settings_ y cambia las opciones para _Location_.
 
 Primero queremos usar el método {{domxref("Geolocation.getCurrentPosition()")}} para retornar la posición actuali de nuestro dispositivo. El objeto {{domxref("Geolocation")}} del navegador es accedido llamando a la propiedad {{domxref("Navigator.geolocation")}}, así que comenzaremos haciendo:
 
@@ -127,7 +131,8 @@ Pero podemos usar la sintaxis con punto para concatener nuestros accesos a propi
 
 El método {{domxref("Geolocation.getCurrentPosition()")}} solamente tiene un parámetroobligatorio, que es una función anónima que se ejecutará cuando se recupere correctamente la ubicación del dispositivo. Esta función tiene un parámetro, que contiene un objeto {{domxref("Position")}} con la representación de los datos de la posición actual.
 
-> **Nota:** una función que es tomada por otra función como argumento es conocida con el nombre de [callback function](/es/docs/Glossary/Callback_function).
+> [!NOTE]
+> Una función que es tomada por otra función como argumento es conocida con el nombre de [callback function](/es/docs/Glossary/Callback_function).
 
 Este patrón de invocar una función solamente cuando una operación ha sido completada es muy común en las APIs de Javascript — asegurando que una operación ha sido completada antes de intentar usar los datos que retorna en otra operación. Estas operaciones se llaman **[operaciones asíncronas](/es/docs/Glossary/Asynchronous)**. Puesto que obtener la posición actual del dispositivo recae en un componente externo (el GPS del dispositivo u otro hardware de geolocalización), no podemos asegurar que se haga a tiempo para usar inmediatamente los datos. Por tanto, algo así no funcionará:
 
@@ -172,7 +177,8 @@ Una vez hecho, veremos dibujado nuestro mapa.
 
 Este último bloque de código muestra dos patrones habituales que veremos en muchas APIs. Primero, los objetos de las APIs habitualmente disponen de constructores, que son invocados para crear instancias de esos objetos que que habitualmente usaremos en nuestros programas. Segundo, los objetos de las APIs a menudo ofrecen múltiples opciones que pueden ser adaptadas para obtener exactamente lo que queremos en nuestro programa. Los constructores de las APIs habitualmente aceptan un objeto de opciones como parámetro, que es donde se deben establecer dichas opciones.
 
-> **Nota:** no te preocupes si no entiendes todos los detalles de este ejemplo inmediantamente. Los repasaremos usando APIs de terceros con más detalle en un artículo futuro.
+> [!NOTE]
+> No te preocupes si no entiendes todos los detalles de este ejemplo inmediantamente. Los repasaremos usando APIs de terceros con más detalle en un artículo futuro.
 
 ### Tienen puntos de acceso reconocibles
 
@@ -205,7 +211,8 @@ Ball.prototype.draw = function () {
 };
 ```
 
-> **Nota:** puedes ver este código en acción en nuetro [bouncing balls demo](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html) (y también verlo [funcionando](http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)).
+> [!NOTE]
+> Puedes ver este código en acción en nuetro [bouncing balls demo](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html) (y también verlo [funcionando](http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)).
 
 ### Usan eventos para manejar cambios en su estado
 
@@ -230,7 +237,8 @@ request.onload = function () {
 };
 ```
 
-> **Nota:** puedes ver este código en acción en nuestro ejemplo [ajax.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html) ([verlo en vivo](http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html)).
+> [!NOTE]
+> Puedes ver este código en acción en nuestro ejemplo [ajax.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html) ([verlo en vivo](http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html)).
 
 Las primeras cinco líneas especifican la licalización del recurso que queremos recuperar, se crea una nueva instancia del objeto con la petición usando el constructor `XMLHttpRequest()`, se abre una petición HTTP `GET` para recuperar el recurso especificado, se indica que la respuesta debería ser enviada en formato JSON, y finalmente se envía la petición.
 
diff --git a/files/es/learn/javascript/first_steps/a_first_splash/index.md b/files/es/learn/javascript/first_steps/a_first_splash/index.md
index 89ee8c4538fe86..8d75a2ffb27419 100644
--- a/files/es/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/es/learn/javascript/first_steps/a_first_splash/index.md
@@ -13,7 +13,8 @@ Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hace
 
 No esperes entender todo el código inmediatamente — por ahora sólo queremos presentarte los conceptos de alto nivel, y darte una idea de como funciona JavaScript (y otros lenguajes de programación). ¡Más adelante vas a volver a ver estas características con mucho más detalle!
 
-> **Nota:** Muchas de las características que vas a ver en JavaScript son las mismas que en otros lenguajes de programación — funciones, bucles, etc. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos.
+> [!NOTE]
+> Muchas de las características que vas a ver en JavaScript son las mismas que en otros lenguajes de programación — funciones, bucles, etc. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos.
 
 ## Pensando como un programador
 
@@ -236,7 +237,8 @@ En nuestro ejemplo:
 
 - Nuestras dos variables finales almacenan un conteo de intentos desde 1 (que se usa para tener un registro de cuántos intentos ha hecho el jugador), y una referencia al botón de reinicio que aún no existe (pero que lo hará más adelante).
 
-> **Nota:** Aprenderás mucho más sobre las variables/constantes más adelante en el curso, comenzando con el [artículo siguiente](/es/docs/user:chrisdavidmills/variables).
+> [!NOTE]
+> Aprenderás mucho más sobre las variables/constantes más adelante en el curso, comenzando con el [artículo siguiente](/es/docs/user:chrisdavidmills/variables).
 
 ### Funciones
 
@@ -260,7 +262,8 @@ checkGuess();
 
 Después de presionar<kbd>Retorno</kbd>/<kbd>Intro</kbd>, debería aparecer una alerta que dice "`Soy un marcador de posición`"; hemos definido una función en nuestro código que crea una alerta cada vez que la llamamos.
 
-> **Nota:** Aprenderás mucho más sobre las [funciones más adelante](/es/docs/Learn/JavaScript/Building_blocks/Functions) en el curso.
+> [!NOTE]
+> Aprenderás mucho más sobre las [funciones más adelante](/es/docs/Learn/JavaScript/Building_blocks/Functions) en el curso.
 
 ### Operadores
 
diff --git a/files/es/learn/javascript/first_steps/arrays/index.md b/files/es/learn/javascript/first_steps/arrays/index.md
index 69c3b3b9c33b14..b67bbbced98e1f 100644
--- a/files/es/learn/javascript/first_steps/arrays/index.md
+++ b/files/es/learn/javascript/first_steps/arrays/index.md
@@ -165,7 +165,8 @@ Puedes entonces acceder a elementos individuales en el arreglo mediante la notac
    // shopping ahora devolverá [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    ```
 
-   > **Nota:** Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0!
+   > [!NOTE]
+   > Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0!
 
 3. Ten en cuenta que un arreglo dentro de otro arreglo se llama arrelog multidimensional o matriz. Puedes acceder a los elementos de un arreglo que estén dentro de otro, encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de los elementos dentro de la matriz, que a su vez, es el tercer elemento dentro de la matriz `random` (ver sección anterior), podríamos hacer algo como esto:
 
@@ -207,7 +208,8 @@ En esta sección veremos algunos métodos bastante útiles relacionados con matr
 
 A menudo se te presentarán algunos datos brutos contenidos en una cadena larga y grande, y es posible que desees separar los elementos útiles de una forma más conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para hacer esto, podemos usar el método {{jsxref("String.prototype.split()","split()")}}. En su forma más simple, esto toma un único parámetro, el caracter que quieres separar de la cadena, y devuelve las subcadenas entre el separador como elementos en un arreglo.
 
-> **Nota:** Bien, esto es técnicamente un método de cadena, no un método de arreglo, pero lo hemos incluido con las matrices, ya que va bien aquí.
+> [!NOTE]
+> Bien, esto es técnicamente un método de cadena, no un método de arreglo, pero lo hemos incluido con las matrices, ya que va bien aquí.
 
 1. Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu consola:
 
@@ -485,7 +487,8 @@ Un buen uso para los métodos de arreglo como {{jsxref("Array.prototype.push()",
 
 En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un sitio de búsqueda falso, con un cuadro de búsqueda. La idea es que cuando los términos se ingresan en un cuadro de búsqueda, se muetren el top 5 de términos de búsqueda previos en la lista. Cuando el número de términos supera el 5, el último término comienza a borrarse cada vez que agregas un nuevo término a la parte superior, por lo que siempre se muestran los 5 términos anteriores.
 
-> **Nota:** En una aplicación de búsqueda real, probablemente puedas hacer clic en los términos de búsqueda anteriores para volver a los términos de búsqueda anteriores y ¡se motrarán los resultados de búsqueda reales! Solamente lo mantendremos simple por ahora.
+> [!NOTE]
+> En una aplicación de búsqueda real, probablemente puedas hacer clic en los términos de búsqueda anteriores para volver a los términos de búsqueda anteriores y ¡se motrarán los resultados de búsqueda reales! Solamente lo mantendremos simple por ahora.
 
 Para completar la aplicación necesitamos:
 
diff --git a/files/es/learn/javascript/first_steps/index.md b/files/es/learn/javascript/first_steps/index.md
index cac815e142cf4f..68adb1627e83ee 100644
--- a/files/es/learn/javascript/first_steps/index.md
+++ b/files/es/learn/javascript/first_steps/index.md
@@ -7,7 +7,7 @@ slug: Learn/JavaScript/First_steps
 
 En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿cómo se ve?" y "¿qué puede hacer?", antes de pasar avanzar en la guía por tu primera experiencia práctica de escribir JavaScript. Después de eso, explicaremos en detalle algunos bloques de construcción clave, tal como variables, cadenas, números y arreglos.
 
-> **Observación:**
+> [!CALLOUT]
 >
 > #### ¿Quieres transformarte en un desarrollador de la interfaz de usuario web?
 >
@@ -23,7 +23,8 @@ Antes de comenzar este módulo, no necesitas ningún conocimiento previo de Java
 - [Introducción a HTML](/es/docs/Learn/HTML/Introduction_to_HTML).
 - [Introducción a CSS](/es/docs/Learn/CSS/Introduction_to_CSS).
 
-> **Nota:** Si estás trabajando en una computadora, tableta u otro dispositivo en el que no puedes crear tus propios archivos, puedes probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si estás trabajando en una computadora, tableta u otro dispositivo en el que no puedes crear tus propios archivos, puedes probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/javascript/first_steps/math/index.md b/files/es/learn/javascript/first_steps/math/index.md
index c58e43b6dacd6a..565d12620fa648 100644
--- a/files/es/learn/javascript/first_steps/math/index.md
+++ b/files/es/learn/javascript/first_steps/math/index.md
@@ -35,7 +35,8 @@ En programación, incluso el simple sistema numérico decimal que todos conocemo
 
 La segunda parte de las buenas noticias es que, a diferencia de otros lenguajes de programación, JavaScript sólo tiene un tipo de dato para los números, adivinaste, {{jsxref("Number")}}. Esto significa que, sin importar el tipo de número con el que estés lidiando en Javascript, los manejas siempre de la misma manera.
 
-> **Nota:** En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.
+> [!NOTE]
+> En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.
 
 ### Para mí, todo son números
 
@@ -74,7 +75,8 @@ Los operadores aritméticos son operadores básicos que usamos para hacer sumas:
 | `/`      | División                          | Divide el número de la izquierda por el de la derecha.                                                   | `10 / 5`                                                                  |
 | `%`      | Sobrante (también llamado módulo) | Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha. | `8 % 3` (retorna 2, como tres está dos veces en 8, quedando 2 restantes.) |
 
-> **Nota:** A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.
+> [!NOTE]
+> A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.
 
 Probablemente no necesitemos enseñarte matemáticas básicas, pero nos gustaría probar tu entendimiento de la sintaxis involucrada. Intenta entrar los ejemplos de abajo en tu [consola JavaScript de tus herramientas para desarrolladores](/es/docs/Learn/Common_questions/What_are_browser_developer_tools), o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.
 
@@ -127,7 +129,8 @@ Si quieres alterar la precedencia de operación, puedes colocar paréntesis alre
 
 Pruébalo y verás.
 
-> **Nota:** Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en [Expresiones y operadores](/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence).
+> [!NOTE]
+> Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en [Expresiones y operadores](/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence).
 
 ## Operadores de incremento y decremento
 
@@ -137,7 +140,8 @@ Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable nu
 guessCount++;
 ```
 
-> **Nota:** Son muy comunmente usadas en [ciclos](/es/docs/Web/JavaScript/Guide/Loops_and_iteration), que aprenderás más adelante en el curso. Por ejemplo, Digamos que quieras recorrer una lista de precios, y agregar impuestos a cada uno. Usaría un ciclo para recorrer cada valor y realizar el cálculo necesario para agregar el impuesto a las ventas en cada caso. El incrementador es usado para mover al próximo valor cuando es necesario. Damos un simple ejemplo En realidad, proporcionamos un ejemplo simple que muestra cómo se hace esto: ¡pruébalo en vivo y mira el código fuente para ver si puedes detectar los incrementadores! Veremos los ciclos en detalle más adelante en el curso..
+> [!NOTE]
+> Son muy comunmente usadas en [ciclos](/es/docs/Web/JavaScript/Guide/Loops_and_iteration), que aprenderás más adelante en el curso. Por ejemplo, Digamos que quieras recorrer una lista de precios, y agregar impuestos a cada uno. Usaría un ciclo para recorrer cada valor y realizar el cálculo necesario para agregar el impuesto a las ventas en cada caso. El incrementador es usado para mover al próximo valor cuando es necesario. Damos un simple ejemplo En realidad, proporcionamos un ejemplo simple que muestra cómo se hace esto: ¡pruébalo en vivo y mira el código fuente para ver si puedes detectar los incrementadores! Veremos los ciclos en detalle más adelante en el curso..
 
 Trata jugando con eso en tu consola. Para empezar, nota que no puedes aplicar esto directamente a un número, sin operar en él mismo. Lo siguiente retorna un error:
 
@@ -166,7 +170,8 @@ num2--;
 num2;
 ```
 
-> **Nota:** Puedes hacer que el navegador lo haga al revés: aumentar / disminuir la variable y luego devolver el valor, colocando el operador al comienzo de la variable en lugar del final. Prueba los ejemplos anteriores otra vez, pero esta vez usa `++num1` y`--num2`.
+> [!NOTE]
+> Puedes hacer que el navegador lo haga al revés: aumentar / disminuir la variable y luego devolver el valor, colocando el operador al comienzo de la variable en lugar del final. Prueba los ejemplos anteriores otra vez, pero esta vez usa `++num1` y`--num2`.
 
 ## Operadores de asignación
 
@@ -197,7 +202,8 @@ var y = 4; // y contiene el valor 4
 x *= y; // x ahora contiene el valor 12
 ```
 
-> **Nota:** Hay una cantidad de [otros operadores de asignación disponibles](/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators), pero estos son los básicos que debes aprender por ahora.
+> [!NOTE]
+> Hay una cantidad de [otros operadores de asignación disponibles](/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators), pero estos son los básicos que debes aprender por ahora.
 
 ## Aprendizaje activo: dimensionando una caja canvas
 
@@ -231,7 +237,8 @@ A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acu
 | <=       | Menor o igual a   | Comprueba si el valor izquierdo es menor o igual que el derecho.           | `3 <= 2`      |
 | >=       | Mayor o igual a   | Comprueba si el valor izquierdo es mayor o igual que el derecho..          | `5 >= 4`      |
 
-> **Nota:** Es posible que algunas personas utilicen == y != en sus pruebas de igualdad y no igualdad. Estos son operadores válidos en JavaScript, pero difieren de === /! ==: la prueba anterior indica si los valores son iguales. pero el tipo de datos puede ser diferente, mientras que las últimas versiones estrictas prueban si el valor y el tipo de datos son los mismos. Las versiones estrictas tienden a reducir el número de errores que no se detectan, por lo que te recomendamos que los utilices.
+> [!NOTE]
+> Es posible que algunas personas utilicen == y != en sus pruebas de igualdad y no igualdad. Estos son operadores válidos en JavaScript, pero difieren de === /! ==: la prueba anterior indica si los valores son iguales. pero el tipo de datos puede ser diferente, mientras que las últimas versiones estrictas prueban si el valor y el tipo de datos son los mismos. Las versiones estrictas tienden a reducir el número de errores que no se detectan, por lo que te recomendamos que los utilices.
 
 Si intentas ingresar algunos de estos valores en una consola, verás que todos devuelven valores verdaderos/falsos, esos booleanos que mencionamos en el artículo anterior. Son muy útiles ya que nos permiten tomar decisiones en nuestro código; se usan cada vez que queremos hacer una elección de algún tipo, por ejemplo.:
 
@@ -270,7 +277,8 @@ function updateBtn() {
 
 Puede ver el operador de igualdad utilizado justo dentro de la función `updateBtn().` En este caso, no estamos probando si dos expresiones matemáticas tienen el mismo valor (estamos comprobando si el contenido de texto de un botón contiene una cadena determinada), pero sigue siendo el mismo principio. Si el botón está actualmente diciendo "Iniciar máquina" cuando se presiona, cambiamos su etiqueta a "Detener máquina" y actualizamos la etiqueta según corresponda. Si el botón está actualmente diciendo "Detener máquina" cuando se presiona, volvemos a cambiar la pantalla.
 
-> **Nota:** Un control de este tipo que intercambia entre dos estados generalmente se conoce como **conmutador**. Conmuta entre un estado y otro — Luces on, luces off, etc.
+> [!NOTE]
+> Un control de este tipo que intercambia entre dos estados generalmente se conoce como **conmutador**. Conmuta entre un estado y otro — Luces on, luces off, etc.
 
 ## Pon a prueba tus habilidades
 
@@ -282,6 +290,7 @@ En este artículo hemos cubierto la información fundamental que necesitas saber
 
 En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.
 
-> **Nota:** Si disfrutas de las matemáticas y quieres leer más sobre cómo se implementa en JavaScript, puedes encontrar muchos más detalles en la sección principal de JavaScript de MDN. Los mejores lugares para iniciar con artículos sobre [Numero y fechas](/es/docs/Web/JavaScript/Guide/Numbers_and_dates) y [Expresiones y operadores](/es/docs/Web/JavaScript/Guide/Expressions_and_Operators).
+> [!NOTE]
+> Si disfrutas de las matemáticas y quieres leer más sobre cómo se implementa en JavaScript, puedes encontrar muchos más detalles en la sección principal de JavaScript de MDN. Los mejores lugares para iniciar con artículos sobre [Numero y fechas](/es/docs/Web/JavaScript/Guide/Numbers_and_dates) y [Expresiones y operadores](/es/docs/Web/JavaScript/Guide/Expressions_and_Operators).
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
diff --git a/files/es/learn/javascript/first_steps/silly_story_generator/index.md b/files/es/learn/javascript/first_steps/silly_story_generator/index.md
index 00de4e28253394..92a0268ed8a11b 100644
--- a/files/es/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/es/learn/javascript/first_steps/silly_story_generator/index.md
@@ -18,7 +18,8 @@ Para iniciar esta evaluación, debe:
 - Vaya y [tome el archivo HTML](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html) para el ejemplo y guarde una copia local de este como `index.html` en un directorio nuevo en algún lugar de su computadora. Esto también tiene el CSS para estilizar el ejemplo que contiene.
 - Vaya a la [página que contiene el texto sin procesar](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt) y manténgalo abierto en una pestaña separada del navegador en algún lugar. Lo necesitarás más tarde.
 
-> **Nota:** Alternativamente, puede usar un sitio como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento `<script>` dentro de la página HTML.
+> [!NOTE]
+> Alternativamente, puede usar un sitio como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento `<script>` dentro de la página HTML.
 
 ## Resumen del proyecto
 
diff --git a/files/es/learn/javascript/first_steps/strings/index.md b/files/es/learn/javascript/first_steps/strings/index.md
index a5c766f3f6f1a9..69e6f54ad88a39 100644
--- a/files/es/learn/javascript/first_steps/strings/index.md
+++ b/files/es/learn/javascript/first_steps/strings/index.md
@@ -230,7 +230,8 @@ Ahora funciona correctamente. Puedes escapar otros caracteres de la misma forma,
    response;
    ```
 
-> **Nota:** Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama **string literal**.
+> [!NOTE]
+> Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama **string literal**.
 
 ### La concatenación en contexto
 
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md
index ec7ea2b1de16ee..d22836dca3ac25 100644
--- a/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md
+++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.md
@@ -7,7 +7,8 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_Math
 
 El objetivo de esta prueba de habilidad es conocer si has entendido nuestra clase sobre el articulo [Matematica basica en JavaScript — números y operadores](/es/docs/Learn/JavaScript/First_steps/Math).
 
-> **Nota:** Puedes probar soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+> [!NOTE]
+> Puedes probar soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
 >
 > Si se queda atascado, pídanos ayuda; consulte la sección [Evaluación o ayuda adicional](#evaluación_o_ayuda_adicional) en la parte inferior de esta página.
 >
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md b/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
index fb14a85d313ed4..34cbcc4051d97e 100644
--- a/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
+++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
@@ -7,11 +7,13 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_Strings
 
 El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos [Manejo de texto — cadenas en JavaScript](/es/docs/Learn/JavaScript/First_steps/Strings) y [Métodos de cadena útiles](/es/docs/Learn/JavaScript/First_steps/Useful_string_methods).
 
-> **Nota:** Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+> [!NOTE]
+> Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
 >
 > Si te quedas atascado, pídenos ayuda — consulta la sección [Evaluación o ayuda adicional](#evaluación_o_ayuda_adicional) en la parte inferior de esta página.
 
-> **Nota:** En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).
+> [!NOTE]
+> En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).
 
 ## Cadenas 1
 
diff --git a/files/es/learn/javascript/first_steps/useful_string_methods/index.md b/files/es/learn/javascript/first_steps/useful_string_methods/index.md
index 6d68dd76b79c52..a632ade92252dd 100644
--- a/files/es/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/es/learn/javascript/first_steps/useful_string_methods/index.md
@@ -195,7 +195,8 @@ El largo de "mozilla" es 7, pero es porque el contador comienza en 0, la posici
 
    Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el resto de los caracteres de la cadena.
 
-> **Nota:** El segundo parámetro de `slice()` es opcional: si no lo incluyes, el corte termina al final de la cadena original. Hay otras opciones también; estudia la página {{jsxref("String.prototype.slice()", "slice()")}} para ver que mas puedes averiguar.
+> [!NOTE]
+> El segundo parámetro de `slice()` es opcional: si no lo incluyes, el corte termina al final de la cadena original. Hay otras opciones también; estudia la página {{jsxref("String.prototype.slice()", "slice()")}} para ver que mas puedes averiguar.
 
 ### Cambiando todo a mayúscula o minúscula
 
@@ -392,7 +393,8 @@ En este ejercicio tenemos los nombres de las ciudades del Reino Unido, Pero las
 3. Usando esta última variable como una subcadena, reemplaza la primera letra de la cadena en minúscula con la subcadena en mayúscula. Almacena el resultado de este procedimiento de reemplazo en otra nueva variable.
 4. Cambia el valor de la variable `result` a igual al resultado final. en vez de `input`.
 
-> **Nota:** Una pista — los parámetros de los métodos de cadena no tienen que ser literales de cadenas; también pueden ser variables, o incluso variables con un método invocados en ellas.
+> [!NOTE]
+> Una pista — los parámetros de los métodos de cadena no tienen que ser literales de cadenas; también pueden ser variables, o incluso variables con un método invocados en ellas.
 
 ```html hidden
 <h2>Salida en vivo</h2>
diff --git a/files/es/learn/javascript/first_steps/variables/index.md b/files/es/learn/javascript/first_steps/variables/index.md
index 352f9850c18cdf..8c921e7dd885a9 100644
--- a/files/es/learn/javascript/first_steps/variables/index.md
+++ b/files/es/learn/javascript/first_steps/variables/index.md
@@ -62,7 +62,8 @@ Las variables simplemente tienen sentido y, a medida que aprendas más sobre Jav
 
 Otra cosa especial acerca de las variables es que pueden contener casi cualquier cosa, no solo cadenas y números. Las variables también pueden contener datos complejos e incluso funciones completas para hacer cosas asombrosas. Aprenderás más sobre esto a medida que avances.
 
-> **Nota:** Decimos que las variables contienen valores. Ésta es una importante distinción que debemos reconocer. Las variables no son los valores en sí mismos; son contenedores de valores. Puedes pensar en ellas como pequeñas cajas de cartón en las que puedes guardar cosas.
+> [!NOTE]
+> Decimos que las variables contienen valores. Ésta es una importante distinción que debemos reconocer. Las variables no son los valores en sí mismos; son contenedores de valores. Puedes pensar en ellas como pequeñas cajas de cartón en las que puedes guardar cosas.
 
 ![](boxes.png)
 
@@ -77,7 +78,8 @@ let myAge;
 
 Aquí estamos creando dos variables llamadas `myName` y `myAge`. Intenta escribir estas líneas en la consola de tu navegador web. Después de eso, intenta crear una variable (o dos) eligiendo tú su nombre.
 
-> **Nota:** En JavaScript, todas las instrucciones en el código deben terminar con un punto y coma (`;`) — tu código puede funcionar correctamente para líneas individuales, pero probablemente no lo hará cuando estés escribiendo varias líneas de código juntas. Trata de adquirir el hábito de incluirlo.
+> [!NOTE]
+> En JavaScript, todas las instrucciones en el código deben terminar con un punto y coma (`;`) — tu código puede funcionar correctamente para líneas individuales, pero probablemente no lo hará cuando estés escribiendo varias líneas de código juntas. Trata de adquirir el hábito de incluirlo.
 
 Puedes probar si estos valores existen ahora en el entorno de ejecución escribiendo solo el nombre de la variable, p. ej.
 
@@ -92,7 +94,8 @@ Actualmente no tienen ningún valor; son contenedores vacíos. Cuando ingreses l
 scoobyDoo;
 ```
 
-> **Nota:** No confundas una variable que existe pero no tiene un valor definido, con una variable que no existe en absoluto — son cosas muy diferentes. En la analogía de cajas que viste arriba, no existir significaría que no hay una caja (variable) para guardar un valor. Ningún valor definido significaría que HAY una caja, pero no tiene ningún valor dentro de ella.
+> [!NOTE]
+> No confundas una variable que existe pero no tiene un valor definido, con una variable que no existe en absoluto — son cosas muy diferentes. En la analogía de cajas que viste arriba, no existir significaría que no hay una caja (variable) para guardar un valor. Ningún valor definido significaría que HAY una caja, pero no tiene ningún valor dentro de ella.
 
 ## Iniciar una variable
 
@@ -140,7 +143,8 @@ logName();
 var myName;
 ```
 
-> **Nota:** Esto no funcionará al escribir líneas individuales en una consola de JavaScript, solo cuando se ejecutan varias líneas de JavaScript en un documento web.
+> [!NOTE]
+> Esto no funcionará al escribir líneas individuales en una consola de JavaScript, solo cuando se ejecutan varias líneas de JavaScript en un documento web.
 
 Esto funciona debido a la **elevación** — lee {{jsxref("Sentencias/var", "Elevación de variables", "#Elevación_de_variables")}} para obtener más detalles sobre el tema.
 
@@ -192,7 +196,8 @@ Puedes llamar a una variable prácticamente como quieras, pero existen limitacio
 - Las variables distinguen entre mayúsculas y minúsculas — por lo tanto `myage` es una variable diferente de `myAge`.
 - Un último punto: también debes evitar el uso de palabras reservadas de JavaScript como nombres de variables — con esto, nos referimos a las palabras que componen la sintaxis real de JavaScript. Por lo tanto, no puedes usar palabras como `var`, `function`, `let` y `for` como nombres de variables. Los navegadores las reconocen como elementos de código diferentes, por lo que obtendrás errores.
 
-> **Nota:** Puedes encontrar una lista bastante completa de palabras clave reservadas que debes evitar en {{jsxref("Gramática_léxica", "Gramática léxica — Palabras clave", "#Palabras_clave")}}.
+> [!NOTE]
+> Puedes encontrar una lista bastante completa de palabras clave reservadas que debes evitar en {{jsxref("Gramática_léxica", "Gramática léxica — Palabras clave", "#Palabras_clave")}}.
 
 Ejemplos de buenos nombres:
 
diff --git a/files/es/learn/javascript/first_steps/what_is_javascript/index.md b/files/es/learn/javascript/first_steps/what_is_javascript/index.md
index 92d1b6bb85ac6f..adaeadeb241341 100644
--- a/files/es/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/es/learn/javascript/first_steps/what_is_javascript/index.md
@@ -93,14 +93,16 @@ Las **APIs del navegador** están integradas en tu navegador web y pueden expone
 - Las APIs {{domxref("Canvas_API", "Canvas")}} y {{domxref("WebGL_API", "WebGL")}} te permiten crear gráficos animados en 2D y 3D. Las personas están haciendo cosas increíbles con estas tecnologías web — consulta [Experimentos de Chrome](https://www.chromeexperiments.com) y [webglsamples](https://webglsamples.org/).
 - [APIs de audio y video](/es/Apps/Fundamentals/Audio_and_video_delivery) como {{domxref("HTMLMediaElement")}} y {{domxref("WebRTC API", "WebRTC")}} te permiten hacer cosas realmente interesantes con multimedia, como reproducir audio y video directamente en una página web, o tomar video de tu cámara web y mostrarlo en la computadora de otra persona (prueba nuestra sencilla [demostración instantánea](https://chrisdavidmills.github.io/snapshot/) para hacerte una idea).
 
-> **Nota:** Muchas de las demostraciones anteriores no funcionarán en un navegador antiguo — al experimentar, es una buena idea utilizar un navegador moderno como Firefox, Chrome, Edge u Opera para ejecutar tu código. Deberás considerar las [pruebas en varios navegadores](/es/docs/Learn/Tools_and_testing/Cross_browser_testing) con más detalle cuando estés más cerca de entregar el código de producción (es decir, código real que usarán los clientes reales).
+> [!NOTE]
+> Muchas de las demostraciones anteriores no funcionarán en un navegador antiguo — al experimentar, es una buena idea utilizar un navegador moderno como Firefox, Chrome, Edge u Opera para ejecutar tu código. Deberás considerar las [pruebas en varios navegadores](/es/docs/Learn/Tools_and_testing/Cross_browser_testing) con más detalle cuando estés más cerca de entregar el código de producción (es decir, código real que usarán los clientes reales).
 
 Las **APIs de terceros** no están integradas en el navegador de forma predeterminada y, por lo general, debes obtener su código e información de algún lugar de la Web. Por ejemplo:
 
 - La [API de Twitter](https://dev.twitter.com/overview/documentation) te permite hacer cosas como mostrar tus últimos tweets en tu sitio web.
 - La [API de Google Maps](https://developers.google.com/maps/) y la [API de OpenStreetMap](https://wiki.openstreetmap.org/wiki/API) te permiten insertar mapas personalizados en tu sitio web y otras funciones similares.
 
-> **Nota:** estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro [módulo de APIs web de lado del cliente](/es/docs/Learn/JavaScript/Client-side_web_APIs).
+> [!NOTE]
+> Estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro [módulo de APIs web de lado del cliente](/es/docs/Learn/JavaScript/Client-side_web_APIs).
 
 ¡También hay mucho más disponible! Sin embargo, no te emociones demasiado todavía. No podrás crear el próximo Facebook, Google Maps o Instagram después de estudiar JavaScript durante 24 horas — hay muchos conceptos básicos que cubrir primero. Y es por eso que estás aquí — ¡sigamos adelante!
 
@@ -118,7 +120,8 @@ Un uso muy común de JavaScript es modificar dinámicamente HTML y CSS para actu
 
 Cada pestaña del navegador tiene su propio depósito separado para ejecutar código (estos depósitos se denominan "entornos de ejecución" en términos técnicos) — esto significa que, en la mayoría de los casos, el código de cada pestaña se ejecuta de forma completamente independiente y el código de una pestaña no puede afectar el código en otra pestaña, o en otro sitio web. Esta es una buena medida de seguridad — si este no fuera el caso, los piratas podrían comenzar a escribir código para robar información de otros sitios web y otras cosas muy malas.
 
-> **Nota:** Existen formas de enviar código y datos entre diferentes sitios web/pestañas de manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.
+> [!NOTE]
+> Existen formas de enviar código y datos entre diferentes sitios web/pestañas de manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.
 
 ### Orden de ejecución de JavaScript
 
@@ -139,7 +142,8 @@ Aquí seleccionamos un párrafo de texto (línea 1), luego adjuntamos un detecto
 
 Si cambiaras el orden de las dos primeras líneas de código, ya no funcionaría — en su lugar, obtendrías un error en la [consola del desarrollador del navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools) — `TypeError: para is undefined`. Esto significa que el objeto `para` aún no existe, por lo que no podemos agregarle un detector de eventos.
 
-> **Nota:** Este es un error muy común; debes tener cuidado de que los objetos a los que se hace referencia en tu código existan antes de intentar hacer algo con ellos.
+> [!NOTE]
+> Este es un error muy común; debes tener cuidado de que los objetos a los que se hace referencia en tu código existan antes de intentar hacer algo con ellos.
 
 ### Código interpretado versus compilado
 
@@ -199,9 +203,11 @@ JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS
 
 5. Guarda tu archivo y actualiza el navegador — ahora deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca debajo.
 
-> **Nota:** Si tu ejemplo no parece funcionar, sigue los pasos nuevamente y verifica que hiciste todo bien. ¿Guardaste tu copia local del código de inicio como un archivo `.html`? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta `</head>`? ¿Ingresaste el JavaScript exactamente como se muestra? **JavaScript distingue entre mayúsculas y minúsculas y es muy exigente, por lo que debes ingresar la sintaxis exactamente como se muestra; de lo contrario, es posible que no funcione.**
+> [!NOTE]
+> Si tu ejemplo no parece funcionar, sigue los pasos nuevamente y verifica que hiciste todo bien. ¿Guardaste tu copia local del código de inicio como un archivo `.html`? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta `</head>`? ¿Ingresaste el JavaScript exactamente como se muestra? **JavaScript distingue entre mayúsculas y minúsculas y es muy exigente, por lo que debes ingresar la sintaxis exactamente como se muestra; de lo contrario, es posible que no funcione.**
 
-> **Nota:** Puedes ver esta versión en GitHub como [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) o ([verla en vivo también](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)).
+> [!NOTE]
+> Puedes ver esta versión en GitHub como [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) o ([verla en vivo también](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)).
 
 ### JavaScript externo
 
@@ -232,7 +238,8 @@ Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un
 
 4. Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código y para hacerlo reutilizable en varios archivos HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.
 
-> **Nota:** Puedes ver esta versión en GitHub como [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) y [script.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js) ([verla en vivo también](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)).
+> [!NOTE]
+> Puedes ver esta versión en GitHub como [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) y [script.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js) ([verla en vivo también](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)).
 
 ### Controladores de JavaScript en línea
 
@@ -272,7 +279,8 @@ for (let i = 0; i < buttons.length; i++) {
 
 Esto puede ser un poco más largo que el atributo `onclick`, pero funcionará para todos los botones, sin importar cuántos haya en la página, ni cuántos se agreguen o eliminen. No es necesario cambiar el JavaScript.
 
-> **Nota:** Intenta editar tu versión de `apply-javascript.html` y agrega algunos botones más en el archivo. Cuando la vuelvas a cargar, deberías encontrar que todos los botones al hacer clic crearán un párrafo. Limpio, ¿eh?
+> [!NOTE]
+> Intenta editar tu versión de `apply-javascript.html` y agrega algunos botones más en el archivo. Cuando la vuelvas a cargar, deberías encontrar que todos los botones al hacer clic crearán un párrafo. Limpio, ¿eh?
 
 ### Estrategias para la carga de scripts
 
@@ -298,7 +306,8 @@ En el ejemplo externo, usamos una función de JavaScript más moderno para resol
 
 En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.
 
-> **Nota:** En el caso externo, no necesitamos usar el evento `DOMContentLoaded` porque el atributo `defer` nos resolvió el problema. No usamos la solución `defer` para el ejemplo interno de JavaScript porque `defer` solo funciona para scripts externos.
+> [!NOTE]
+> En el caso externo, no necesitamos usar el evento `DOMContentLoaded` porque el atributo `defer` nos resolvió el problema. No usamos la solución `defer` para el ejemplo interno de JavaScript porque `defer` solo funciona para scripts externos.
 
 Una solución pasada de moda a este problema solía ser colocar tu elemento `script` justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta `</body>`), para que se cargara después de haber procesado todo el HTML. El problema con esta solución es que la carga/procesamiento del script está completamente bloqueado hasta que se haya cargado el DOM HTML. En sitios muy grandes con mucho JavaScript, esto puede causar un importante problema de rendimiento y ralentizar tu sitio.
 
@@ -384,7 +393,8 @@ for (let i = 0; i < buttons.length; i++) {
 }
 ```
 
-> **Nota:** En general, más comentarios suelen ser mejor que menos, pero debes tener cuidado si agregas muchos comentarios para explicar qué son las variables (los nombres de tus variables tal vez deberían ser más intuitivos), o para explicar operaciones muy simples (tal vez tu código sea demasiado complicado).
+> [!NOTE]
+> En general, más comentarios suelen ser mejor que menos, pero debes tener cuidado si agregas muchos comentarios para explicar qué son las variables (los nombres de tus variables tal vez deberían ser más intuitivos), o para explicar operaciones muy simples (tal vez tu código sea demasiado complicado).
 
 ## Resumen
 
diff --git a/files/es/learn/javascript/first_steps/what_went_wrong/index.md b/files/es/learn/javascript/first_steps/what_went_wrong/index.md
index 3e6dcf57bba7d8..f3c246c409e9ed 100644
--- a/files/es/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/es/learn/javascript/first_steps/what_went_wrong/index.md
@@ -27,7 +27,8 @@ Para empezar, regresemos a nuestro juego de adivinan el número — excepto que
 1. Para comenzar, abre la copia local dentro de tu editor de texto favorito y tu navegador.
 2. Intenta jugarlo — notarás que cuando presionas el botón "Enviar respuesta", ¡no funciona!
 
-> **Nota:** ¡Posiblemente tengas tu propia versión del ejemplo del juego que no funciona, y quizás la quieras arreglar! Aún así nos gustaría que en el artículo trabajes con nuestra versión, para que puedas aprender las técnicas que estamos enseñando. Después puedes tratar de arreglar tu ejemplo.
+> [!NOTE]
+> ¡Posiblemente tengas tu propia versión del ejemplo del juego que no funciona, y quizás la quieras arreglar! Aún así nos gustaría que en el artículo trabajes con nuestra versión, para que puedas aprender las técnicas que estamos enseñando. Después puedes tratar de arreglar tu ejemplo.
 
 En este punto, consultemos la consola del desarrollador para ver si podemos ver algún informe de error de sintaxis y luego tratar de solucionarlo. Abajo aprenderás cómo.
 
@@ -53,7 +54,8 @@ Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript
 4. El mensaje de error dice "`guessSubmit.addeventListener no es una función`", lo cual significa que el intérprete de JavaScript no reconoce la función que estamos llamando. A menudo, este mensaje de error en realidad significa que hemos escrito algo mal. Si no estás seguro de la ortografía correcta de una parte de la sintaxis, a menudo es bueno buscar la función en MDN. La mejor manera de hacer esto es, en tu navegador favorito, buscar "mdn _nombre-de-característica_". Aquí hay un atajo para ahorrarte algo de tiempo en esta instancia: [`addEventListener()`](/es/docs/Web/API/EventTarget/addEventListener).
 5. Entonces, al mirar esta página, ¡el error parece ser que hemos escrito mal el nombre de la función!. Recuerda que JavaScript distingue entre mayúsculas y minúsculas, por lo que cualquier pequeña diferencia en la ortografía o en mayúsculas provocará un error. Cambiar `addeventListener` a `addEventListener` debería solucionar este problema. Hazlo ahora.
 
-> **Nota:** Échale un vistazo a nuestra página de referencia [TypeError: "x" no es una función](/es/docs/Web/JavaScript/Reference/Errors/Not_a_function) para obtener más detalles sobre este error.
+> [!NOTE]
+> Échale un vistazo a nuestra página de referencia [TypeError: "x" no es una función](/es/docs/Web/JavaScript/Reference/Errors/Not_a_function) para obtener más detalles sobre este error.
 
 ### Errores sintácticos, segunda ronda
 
@@ -63,7 +65,8 @@ Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript
 
    > **Nota:** [`Null`](/es/docs/Glossary/Null) es un valor especial que significa "nada" o "sin valor". Por lo tanto, `lowOrHi` ha sido declarado e iniciado, pero no con algún valor significativo — no tiene tipo ni valor.
 
-   > **Nota:** Este error no apareció tan pronto como se cargó la página porque este error ocurrió dentro de una función (dentro del bloque `checkGuess() {...}`). Como pronto aprenderás con más detalle en nuestro [artículo de funciones](/es/docs/Learn/JavaScript/Building_blocks/Functions), el código dentro de las funciones se ejecuta en un ámbito separado que el código fuera de las funciones. En este caso, el código no se ejecutó y el error no se lanzó hasta que la función `checkGuess()` se ejecutó en la línea 86.
+   > [!NOTE]
+   > Este error no apareció tan pronto como se cargó la página porque este error ocurrió dentro de una función (dentro del bloque `checkGuess() {...}`). Como pronto aprenderás con más detalle en nuestro [artículo de funciones](/es/docs/Learn/JavaScript/Building_blocks/Functions), el código dentro de las funciones se ejecuta en un ámbito separado que el código fuera de las funciones. En este caso, el código no se ejecutó y el error no se lanzó hasta que la función `checkGuess()` se ejecutó en la línea 86.
 
 4. Échale un vistazo a la línea 78 y verás el siguiente código:
 
@@ -95,7 +98,8 @@ Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript
 9. Entonces necesitamos un selector de clase aquí, que comienza con un punto (`.`), pero el selector que se pasa al método `querySelector()` en la línea 48 no tiene punto. ¡Este podría ser el problema! Intenta cambiar `lowOrHi` a `.lowOrHi` en la línea 48.
 10. Ahora guarda y refresca nuevamente, y tu declaración `console.log()` debería devolver el elemento `<p>` que queremos. ¡Uf! ¡Otro error solucionado! Ahora puedes eliminar tu línea `console.log()`, o mantenerla como referencia más adelante — tu elección.
 
-> **Nota:** Consulta nuestra página de referencia [TypeError: "x" (no) es "y"](/es/docs/Web/JavaScript/Reference/Errors/Unexpected_type) para obtener más detalles sobre este error.
+> [!NOTE]
+> Consulta nuestra página de referencia [TypeError: "x" (no) es "y"](/es/docs/Web/JavaScript/Reference/Errors/Unexpected_type) para obtener más detalles sobre este error.
 
 ### Errores sintácticos, tercera ronda
 
@@ -177,7 +181,8 @@ var userGuess === Number(guessField.value);
 
 Lanza este error porque cree que estás intentando hacer algo diferente. Debes asegurarte de no confundir el operador de asignación (`=`), que establece una variable para que sea igual a un valor — con el operador de igualdad estricta (`===`), que prueba si un valor es igual a otro y devuelve un resultado `true`/`false`.
 
-> **Nota:** Ve más detalles sobre este error en nuestra página de referencia [SyntaxError: falta ; antes de la declaración](/es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement).
+> [!NOTE]
+> Ve más detalles sobre este error en nuestra página de referencia [SyntaxError: falta ; antes de la declaración](/es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement).
 
 ### El programa siempre dice que has ganado, independientemente de lo que hayas ingresado
 
@@ -199,7 +204,8 @@ la prueba siempre devolvería `true`, haciendo que el programa informe que se ga
 
 Este es bastante simple — generalmente significa que olvidaste colocar el paréntesis de cierre al final de una llamada a una función/método.
 
-> **Nota:** Ve más detalles sobre este error en nuestra página de referencia [SyntaxError: falta ) después de la lista de argumentos](/es/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list).
+> [!NOTE]
+> Ve más detalles sobre este error en nuestra página de referencia [SyntaxError: falta ) después de la lista de argumentos](/es/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list).
 
 ### SyntaxError: `falta : después de la propiedad id`
 
@@ -227,7 +233,8 @@ Estos errores generalmente significan que has omitido las comillas de apertura o
 
 Para todos estos errores, piensa en cómo abordamos los ejemplos que vimos en el tutorial. Cuando surge un error, mira el número de línea que te dan, ve a esa línea y revísala para detectar lo que está mal. Ten en cuenta que el error no necesariamente estará en esa línea, y también que el error podría no ser causado por el mismo problema que mencionamos anteriormente.
 
-> **Nota:** Obtén más detalles sobre estos errores en nuestras páginas de referencia [SyntaxError: símbolo inesperado](/es/docs/Web/JavaScript/Reference/Errors/Unexpected_token) y [SyntaxError: cadena literal sin terminar](/es/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal).
+> [!NOTE]
+> Obtén más detalles sobre estos errores en nuestras páginas de referencia [SyntaxError: símbolo inesperado](/es/docs/Web/JavaScript/Reference/Errors/Unexpected_token) y [SyntaxError: cadena literal sin terminar](/es/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal).
 
 ## Resumen
 
diff --git a/files/es/learn/javascript/index.md b/files/es/learn/javascript/index.md
index 42617781a1b61f..42d24599e90316 100644
--- a/files/es/learn/javascript/index.md
+++ b/files/es/learn/javascript/index.md
@@ -7,7 +7,7 @@ slug: Learn/JavaScript
 
 {{Glossary("JavaScript")}} es un lenguaje de programación que te permite implementar cosas complejas en páginas web. Cada vez que una página web hace algo más que sentarse ahí y mostrar información estática para que la veas — mostrando actualizaciones de contenido oportunas, mapas interactivos, gráficos animados 2D/3D, desplazando máquinas reproductoras de video, o más, puedes apostar que probablemente JavaScript esté involucrado .
 
-> **Observación:**
+> [!CALLOUT]
 >
 > #### ¿Quieres convertirte en un desarrollador web front-end?
 >
diff --git a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md
index b4b8217907527f..2677d0d3eee825 100644
--- a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -15,7 +15,8 @@ En esta evaluación, se espera que use la demo de bouncing balls del artículo a
 
 Para iniciar esta evaluación, haz una copia local de [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html), [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), y [main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) de nuestro último artículo en un nuevo directorio en tu ordenador.
 
-> **Nota:** Alternativamente, puede usar un sitio como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, sientase libre de poner en linea elementos `<script>`/`<style>` dentro de la página.
+> [!NOTE]
+> Alternativamente, puede usar un sitio como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, sientase libre de poner en linea elementos `<script>`/`<style>` dentro de la página.
 
 ## Resumen del proyecto
 
diff --git a/files/es/learn/javascript/objects/basics/index.md b/files/es/learn/javascript/objects/basics/index.md
index e214fa8535d0f6..eb0b5dffb07fa2 100644
--- a/files/es/learn/javascript/objects/basics/index.md
+++ b/files/es/learn/javascript/objects/basics/index.md
@@ -61,7 +61,8 @@ persona.saludo();
 
 ¡Ahora tienes algunos datos y funcionalidades dentro de tu objeto, y ahora puedes acceder a ellos con una sintaxis simple y agradable!
 
-> **Nota:** Si tienes problemas para hacer que esto funcione, intenta comparar tu código con nuestra versión - ve [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (también [ve que se ejecuta en vivo](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html)). La versión en vivo te dará una pantalla en blanco, pero eso está bien. De nuevo, abre tu devtools e intenta escribir los comandos anteriores para ver la estructura del objeto.
+> [!NOTE]
+> Si tienes problemas para hacer que esto funcione, intenta comparar tu código con nuestra versión - ve [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (también [ve que se ejecuta en vivo](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html)). La versión en vivo te dará una pantalla en blanco, pero eso está bien. De nuevo, abre tu devtools e intenta escribir los comandos anteriores para ver la estructura del objeto.
 
 Entonces, ¿qué está pasando aquí? Bien, un objeto se compone de varios miembros, cada uno de los cuales tiene un nombre (por ejemplo, `nombre` y `edad`) y un valor (por ejemplo, `['Bob', 'Smith']` y `32`). Cada par nombre/valor debe estar separado por una coma, y el nombre y el valor en cada caso están separados por dos puntos. La sintaxis siempre sigue este patrón:
 
@@ -271,7 +272,8 @@ const miNotificacion = new Notification("¡Hola!");
 
 De nuevo, veremos qué son los constructores en un artículo posterior.
 
-> **Nota:** Es útil pensar en la forma en que los objetos se comunican como **paso de mensajes** — cuando un objeto necesita otro objeto para realizar algún tipo de acción a menudo enviará un mensaje a otro objeto a través de uno de sus métodos, y esperará una respuesta, que conocemos como un valor de retorno.
+> [!NOTE]
+> Es útil pensar en la forma en que los objetos se comunican como **paso de mensajes** — cuando un objeto necesita otro objeto para realizar algún tipo de acción a menudo enviará un mensaje a otro objeto a través de uno de sus métodos, y esperará una respuesta, que conocemos como un valor de retorno.
 
 ## Resumen
 
diff --git a/files/es/learn/javascript/objects/classes_in_javascript/index.md b/files/es/learn/javascript/objects/classes_in_javascript/index.md
index 0d0fa27904e875..3ebd216c7d77eb 100644
--- a/files/es/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/es/learn/javascript/objects/classes_in_javascript/index.md
@@ -121,7 +121,8 @@ Debido a que la clase `Professor` agrega una nueva propiedad `teaches`, ésta se
 
 Cuando creamos un nuevo `Professor`, queremos establecer el nombre de `teaches` que enseña, para esto definimos un constructor que recibe `name` y `teaches` como argumentos. Lo primero que hace el constructor es utilizar {{jsxref("Operators/super", "super()")}} para llamar al constructor de la superclase, mientras le pasa el parámetro `name`. El constructor de la superclase se encarga de establecer el valor de la propiedad `name`. Enseguida, el constructor de la clase `Professor` establece el valor de la propiedad `teaches`.
 
-> **Nota:** Si una subclase debe realizar algún tipo de inialización, es **obligatorio** que esta llame al constructor de la superclase utilizando `super()` con los paramétros que el constructor de la superclase espera.
+> [!NOTE]
+> Si una subclase debe realizar algún tipo de inialización, es **obligatorio** que esta llame al constructor de la superclase utilizando `super()` con los paramétros que el constructor de la superclase espera.
 
 Podemos observar que hemos sobreescrito el método `introduceSelf()` de la superclase y a su vez agregamos un nuevo método `grade()` para calificar las tareas de los alumnos (Nuestro profesor no es muy bueno que digamos, solo asigna calificaciones aleatorias a los ensayos).
 
diff --git a/files/es/learn/javascript/objects/index.md b/files/es/learn/javascript/objects/index.md
index a980055e37c307..01aff3a440c2dc 100644
--- a/files/es/learn/javascript/objects/index.md
+++ b/files/es/learn/javascript/objects/index.md
@@ -19,7 +19,8 @@ Antes de empezar este módulo deberías estar familiarizado con {{Glossary("HTML
 
 También deberías conocer lo básico de Javascript antes de entrar en detalle en los objetos de Javascript. Antes de empezar este módulo, revisa [Primeros pasos con JavaScript](/es/docs/Learn/JavaScript/First_steps) y [Elementos básicos de JavaScript](/es/docs/Learn/JavaScript/Building_blocks).
 
-> **Nota:** Si trabajas en un ordenador, tablet u otro dispositivo donde no puedas editar tus propios ficheros, prueba a ejecutar los ejemplos de código online en páginas como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si trabajas en un ordenador, tablet u otro dispositivo donde no puedas editar tus propios ficheros, prueba a ejecutar los ejemplos de código online en páginas como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/).
 
 ## Guías
 
diff --git a/files/es/learn/javascript/objects/json/index.md b/files/es/learn/javascript/objects/json/index.md
index 121cbc71308ad7..d2cee5e435a04f 100644
--- a/files/es/learn/javascript/objects/json/index.md
+++ b/files/es/learn/javascript/objects/json/index.md
@@ -17,7 +17,8 @@ JavaScript Object Notation (JSON) es un formato basado en texto estándar para r
 
 Los JSON son cadenas - útiles cuando se quiere transmitir datos a través de una red. Debe ser convertido a un objeto nativo de JavaScript cuando se requiera acceder a sus datos. Ésto no es un problema, dado que JavaScript posee un objeto global [JSON](/es/docs/Web/JavaScript/Reference/Global_Objects/JSON) que tiene los métodos disponibles para convertir entre ellos.
 
-> **Nota:** Convertir una cadena a un objeto nativo se denomina _parsing_, mientras que convertir un objeto nativo a una cadena para que pueda ser transferido a través de la red se denomina _stringification_.
+> [!NOTE]
+> Convertir una cadena a un objeto nativo se denomina _parsing_, mientras que convertir un objeto nativo a una cadena para que pueda ser transferido a través de la red se denomina _stringification_.
 
 Un objeto JSON puede ser almacenado en su propio archivo, que es básicamente sólo un archivo de texto con una extension `.json`, y una {{glossary("MIME type")}} de `application/json`.
 
@@ -84,7 +85,8 @@ superHeroes["members"][1]["powers"][2];
 4. Dentro de este objeto, para acceder a la propiedad `powers` utilizamos `["powers"]`.
 5. Dentro de la propiedad `powers` existe un arreglo que contiene los superpoderes del héroe seleccionado. Para acceder al tercer superpoder se utiliza `[2]`.
 
-> **Nota:** El JSON previamente visto se encuentra disponible dentro de una variable en el ejemplo [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) (vea el [código fuente](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)). Intente cargarlo y luego acceder a los datos contenidos en la variable por medio de la consola JavaScript de su navegador.
+> [!NOTE]
+> El JSON previamente visto se encuentra disponible dentro de una variable en el ejemplo [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) (vea el [código fuente](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)). Intente cargarlo y luego acceder a los datos contenidos en la variable por medio de la consola JavaScript de su navegador.
 
 ### Arreglos como JSON
 
@@ -266,9 +268,11 @@ A continuación, se utiliza un ciclo [for](/es/docs/Learn/JavaScript/Building_bl
 5. Para recorrer los superpoderes del héroe, se utiliza otro ciclo `for` — para cada uno se crea un elemento `<li>`, se asigna el superpoder a él y luego se pone el `listItem` dentro del elemento `<ul>` (`myList`) utilizando `appendChild()`.
 6. Lo último es agregar los `<h2>`, `<p>`s, y `<ul>` dentro del `<article>` (`myArticle`), luego se agrega `<article>` dentro de `<section>`. El orden en que las cosas son agregadas es importante, dado que este es el orden en el que aparecerán dentro del HTML.
 
-> **Nota:** Si tiene problemas en lograr que el ejemplo funcione, intente con el código fuente [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) (vea también [running live](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html).)
+> [!NOTE]
+> Si tiene problemas en lograr que el ejemplo funcione, intente con el código fuente [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) (vea también [running live](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html).)
 
-> **Nota:** Si encuentra dificultades en seguir la notacion de punto/corchete que se utiliza para acceder a los objetos de JavaScript, puede ser útil tener el archivo [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) abierto en otra pestaña o en su editor de texto, y revisarlo mientras observa el código JavaScript. También puede referirse al artículo [JavaScript object basics](/es/docs/Learn/JavaScript/Objects/Basics) para mayor información sobre la notación de punto y corchete.
+> [!NOTE]
+> Si encuentra dificultades en seguir la notacion de punto/corchete que se utiliza para acceder a los objetos de JavaScript, puede ser útil tener el archivo [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) abierto en otra pestaña o en su editor de texto, y revisarlo mientras observa el código JavaScript. También puede referirse al artículo [JavaScript object basics](/es/docs/Learn/JavaScript/Objects/Basics) para mayor información sobre la notación de punto y corchete.
 
 ## Conversiones entre objetos y texto
 
diff --git a/files/es/learn/javascript/objects/object_building_practice/index.md b/files/es/learn/javascript/objects/object_building_practice/index.md
index 470f4ee90a3d97..3150036f0c7c1c 100644
--- a/files/es/learn/javascript/objects/object_building_practice/index.md
+++ b/files/es/learn/javascript/objects/object_building_practice/index.md
@@ -266,7 +266,8 @@ Ahora, un poco de diversión, añadamos la detección de colisiones a nuestro c
 
 3. Guardar y refrescar la demo de nuevo y podrá ver como las pelotas cambian de color cuando chocan entre ellas.
 
-> **Nota:** Si tiene problemas para hacer funcionar este ejemplo, puede comparar su código JavaScript, con el código de la [version_final](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) (y también ver como funciona al [ejecutarla](http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html)).
+> [!NOTE]
+> Si tiene problemas para hacer funcionar este ejemplo, puede comparar su código JavaScript, con el código de la [version_final](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) (y también ver como funciona al [ejecutarla](http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html)).
 
 ## Resumen
 
diff --git a/files/es/learn/javascript/objects/object_prototypes/index.md b/files/es/learn/javascript/objects/object_prototypes/index.md
index 647cea593c8a43..a6a930d49a03c5 100644
--- a/files/es/learn/javascript/objects/object_prototypes/index.md
+++ b/files/es/learn/javascript/objects/object_prototypes/index.md
@@ -66,9 +66,11 @@ Este método [valueOf()](/es/docs/Web/JavaScript/Reference/Global_Objects/Object
 - Si no lo hace, entonces el navegador comprueba si el objeto prototipo del objeto person1 (el prototipo del constructor de Persona()) tiene un método valueOf() disponible en él.
 - Si tampoco lo hace, entonces el navegador comprueba si el objeto prototipo del objeto prototipo del constructor Persona() (Objeto() prototipo del objeto prototipo del constructor) tiene un método valueOf() disponible en él. Lo hace, así que es llamado, y todo funciona!
 
-> **Nota:** Queremos reiterar que los métodos y propiedades no se copian de un objeto a otro en la cadena del prototipo. Ellos son accedidos subiendo por la cadena como se ha descrito anteriormente.
+> [!NOTE]
+> Queremos reiterar que los métodos y propiedades no se copian de un objeto a otro en la cadena del prototipo. Ellos son accedidos subiendo por la cadena como se ha descrito anteriormente.
 
-> **Nota:** No existe oficialmente una forma de acceder directamente al objeto prototipo de un objeto - los "enlaces" entre los elementos de la cadena están definidos en una propiedad interna, denominada \[\[prototipo]] en la especificación del lenguaje JavaScript (ver {{glossary("ECMAScript")}}).
+> [!NOTE]
+> No existe oficialmente una forma de acceder directamente al objeto prototipo de un objeto - los "enlaces" entre los elementos de la cadena están definidos en una propiedad interna, denominada \[\[prototipo]] en la especificación del lenguaje JavaScript (ver {{glossary("ECMAScript")}}).
 >
 > La mayoría de los navegadores modernos, sin embargo, ofrecen una propiedad disponible llamada \_\_proto\_\_ (es decir, 2 subrayados en cada lado), que contiene el objeto prototipo del constructor del objeto. Por ejemplo, pruebe person1.\_\_proto\_\_ y person1.\_\_proto\_\_.\_\_proto\_\_ para ver cómo se ve la cadena en código!
 >
@@ -84,7 +86,8 @@ Así que `Object.prototype.watch()`, `Object.prototype.valueOf()`, etc., están
 
 [`Object.is()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Object/is), [`Object.keys()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Object/keys), y otros miembros no definidos dentro del prototipo del repositorio(bucket) no son heredados por instancias de objeto o tipos de objeto que heredan de Object.prototype. Sino que son métodos/propiedades disponibles sólo en el propio constructor Object().
 
-> **Nota:** Esto parece extraño - ¿cómo se puede tener un método definido en un constructor, que en sí mismo es una función? Bueno, una función es también un tipo de objeto - vea la referencia del constructor de Function() si no nos cree.
+> [!NOTE]
+> Esto parece extraño - ¿cómo se puede tener un método definido en un constructor, que en sí mismo es una función? Bueno, una función es también un tipo de objeto - vea la referencia del constructor de Function() si no nos cree.
 
 1. Puede comprobar las propiedades de los prototipos existentes - vuelva a nuestro ejemplo anterior e intente introducir lo siguiente en la consola JavaScript:
 
@@ -176,7 +179,8 @@ Intente esto, por ejemplo:
 person1.constructor.name;
 ```
 
-> **Nota:** El valor de `constructor.name` puede cambiar (debido a herencia de prototipos, binding, preprocesores, transpiladores, etc.), por lo que para ejemplos más complejos es preferible usar el operador [`instanceof`](/es/docs/Web/JavaScript/Reference/Operators/instanceof) en su lugar.
+> [!NOTE]
+> El valor de `constructor.name` puede cambiar (debido a herencia de prototipos, binding, preprocesores, transpiladores, etc.), por lo que para ejemplos más complejos es preferible usar el operador [`instanceof`](/es/docs/Web/JavaScript/Reference/Operators/instanceof) en su lugar.
 
 ## Modificando prototipos
 
@@ -216,7 +220,8 @@ Person.prototype.farewell = function() {
 
 Pero el método `farewell()` aún se encuentra disponible en la instancia `person1`, su funcionalidad disponible ha sido automáticamente actualizada incluído en método recién definido `farewell()`.
 
-> **Nota:** Si estás teniendo problemas haciendo funcionar este ejemplo, echa un vistazo en nuestro ejemplo [oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html) ([míralo ejecutarse en tiempo real](https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html)).
+> [!NOTE]
+> Si estás teniendo problemas haciendo funcionar este ejemplo, echa un vistazo en nuestro ejemplo [oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html) ([míralo ejecutarse en tiempo real](https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html)).
 
 Raramente verás propiedades definidas en la propiedad `prototype`, ya no son muy flexibles cuando son definidas de esta forma. Por ejemplo, puedes añadir una propiedad como esta:
 
diff --git a/files/es/learn/learning_and_getting_help/index.md b/files/es/learn/learning_and_getting_help/index.md
index d2f2396ada67dd..c51e5b68112e48 100644
--- a/files/es/learn/learning_and_getting_help/index.md
+++ b/files/es/learn/learning_and_getting_help/index.md
@@ -46,7 +46,8 @@ MDN Web Docs es muy bueno para ambos tipos — el área en la que te encuentras
 
 También hay varios otros recursos excelentes en la web, algunos de los cuales mencionaremos a continuación.
 
-> **Nota:** el texto anterior debería haberte proporcionado un dato importante: _¡no se espera que recuerdes todo!_ Los desarrolladores web profesionales todo el tiempo usan herramientas como _MDN Web Docs_ para buscar cosas que han olvidado. Como descubrirás a lo largo de estas líneas, aprender desarrollo web tiene más que ver con la resolución de problemas y patrones de aprendizaje que con el aprendizaje de muchas sintaxis.
+> [!NOTE]
+> El texto anterior debería haberte proporcionado un dato importante: _¡no se espera que recuerdes todo!_ Los desarrolladores web profesionales todo el tiempo usan herramientas como _MDN Web Docs_ para buscar cosas que han olvidado. Como descubrirás a lo largo de estas líneas, aprender desarrollo web tiene más que ver con la resolución de problemas y patrones de aprendizaje que con el aprendizaje de muchas sintaxis.
 
 #### Videos
 
@@ -58,9 +59,11 @@ Posiblemente seas el tipo de persona que prefiere instrucciones mínimas y prefe
 
 Muchas páginas de referencia de documentos web de MDN también proporcionan ejemplos interactivos, donde puedes modificar el código y ver cómo cambia el resultado en vivo. Y tampoco hay nada de malo en crear tus propios ejemplos de código en tu computadora o en un editor de código en línea como [JSBin](https://jsbin.com/?html,css,js,output), [Codepen](https://codepen.io/) o [Glitch](https://glitch.com/). De hecho, ¡te invitarán a usarlos como parte de este curso cuando estés aprendiendo!
 
-> **Nota:** Los editores de código en línea también son realmente útiles para compartir el código que has escrito, por ejemplo, si estás colaborando en el aprendizaje con otra persona que no se encuentra en la misma ubicación o se lo envías a alguien para pedir ayuda con eso. Puedes compartir la dirección web del ejemplo con ellos para que puedan verlo y ayudarte.
+> [!NOTE]
+> Los editores de código en línea también son realmente útiles para compartir el código que has escrito, por ejemplo, si estás colaborando en el aprendizaje con otra persona que no se encuentra en la misma ubicación o se lo envías a alguien para pedir ayuda con eso. Puedes compartir la dirección web del ejemplo con ellos para que puedan verlo y ayudarte.
 
-> **Nota:** Es posible que prefieras un método de aprendizaje sobre los demás, pero, de manera realista, probablemente terminarás con un enfoque híbrido. Y probablemente se te ocurran otros métodos además de los tres que cubrimos anteriormente.
+> [!NOTE]
+> Es posible que prefieras un método de aprendizaje sobre los demás, pero, de manera realista, probablemente terminarás con un enfoque híbrido. Y probablemente se te ocurran otros métodos además de los tres que cubrimos anteriormente.
 
 ### Haz un plan
 
@@ -200,9 +203,11 @@ Cuando encuentres soluciones a tales problemas, vale la pena escribir notas sobr
 
 Además, la web tiene [herramientas de desarrollo](/es/docs/Learn/Common_questions/What_are_browser_developer_tools) que te permiten ver el código utilizado para crear cualquier sitio en la web, si no tienes una solución a mano, un buen método de investigación es encontrar sitios web con características similares en la naturaleza y averiguar cómo lo hicieron.
 
-> **Nota:** Observa cómo hablamos antes sobre el problema que estamos tratando de resolver primero, y la tecnología utilizada para resolverlo, en segundo lugar. Esta, casi siempre es la mejor manera de hacerlo — no comiences con una tecnología nueva y genial que desees usar, e intenta adaptarla a tu caso de uso.
+> [!NOTE]
+> Observa cómo hablamos antes sobre el problema que estamos tratando de resolver primero, y la tecnología utilizada para resolverlo, en segundo lugar. Esta, casi siempre es la mejor manera de hacerlo — no comiences con una tecnología nueva y genial que desees usar, e intenta adaptarla a tu caso de uso.
 
-> **Nota:** La solución más sencilla suele ser la mejor.
+> [!NOTE]
+> La solución más sencilla suele ser la mejor.
 
 ### Practica
 
diff --git a/files/es/learn/server-side/django/admin_site/index.md b/files/es/learn/server-side/django/admin_site/index.md
index 9a516a34d0ee20..541c6f0a740945 100644
--- a/files/es/learn/server-side/django/admin_site/index.md
+++ b/files/es/learn/server-side/django/admin_site/index.md
@@ -61,7 +61,8 @@ admin.site.register(Genre)
 admin.site.register(BookInstance)
 ```
 
-> **Nota:** Si tu aceptaste el desafío de crear un modelo que represente el Lenguaje natural de un libro ([ver el artículo tutorial de modelos](/es/docs/Learn/Server-side/Django/Models)), importalo y registralo también!
+> [!NOTE]
+> Si tu aceptaste el desafío de crear un modelo que represente el Lenguaje natural de un libro ([ver el artículo tutorial de modelos](/es/docs/Learn/Server-side/Django/Models)), importalo y registralo también!
 
 Esta es la forma más simple de registrar un modelo, o modelos, con el sitio. El sitio de administración es altamente personalizable, y hablaremos más sobre otras formas de registrar tus modelos más abajo.
 
@@ -95,7 +96,8 @@ Ingresa valores para los campos. Puede crear nuevos autores o géneros presionan
 
 ![Admin Site - Book Add](admin_book_add.png)
 
-> **Nota:** En este punto nos gustaría que pasaras algún tiempo añadiendo unos pocos libros, autores, y géneros (ej. Fantasía) a tu aplicación. Asegúrate de que cada autor y género incluye un par de libros diferentes (esto hará tus vistas de lista y detalle más interesantes cuando las implementemos más tarde en la serie de artículos).
+> [!NOTE]
+> En este punto nos gustaría que pasaras algún tiempo añadiendo unos pocos libros, autores, y géneros (ej. Fantasía) a tu aplicación. Asegúrate de que cada autor y género incluye un par de libros diferentes (esto hará tus vistas de lista y detalle más interesantes cuando las implementemos más tarde en la serie de artículos).
 
 Cuando hayas terminado de añadir libros, haz click en el enlace **Home** en el separador de arriba para regresar a la página principal de administración. Luego haz click en el enlace **Books** para desplegar la lista actual de libros (o en alguno de los otros enlaces para ver las listas de otros modelos). Ahora que haz añadido unos cuantos libros, la lista debería lucir similar a la captura de pantalla de abajo. Se muestra el título de cada libro; que es el valor devuelto por el método `__str__()` del modelo Book que especificamos en el artículo anterior.
 
@@ -211,7 +213,8 @@ class BookAdmin(admin.ModelAdmin):
 
 Desafortunadamente, no podemos especificar directamente el campo `genre` en `list_display` porque es un campo `ManyToManyField` (Django previene esto porque habría un alto "costo" de acceso a base de datos si lo hiciera). En lugar de eso, definiremos una función `display_genre` para obtener la información como una cadena (esta es la función que hemos llamado arriba; la definiremos más abajo).
 
-> **Nota:** Obtener el `genre` podría no ser una buena idea aquí, debido al "costo" de la operación en la base de datos. Te mostramos cómo hacerlo porque llamar funciones desde tus modelos puede ser muy útil por otras razones — por ejemplo para añadir un enlace _**Delete**_ junto a cada ítem en la lista.
+> [!NOTE]
+> Obtener el `genre` podría no ser una buena idea aquí, debido al "costo" de la operación en la base de datos. Te mostramos cómo hacerlo porque llamar funciones desde tus modelos puede ser muy útil por otras razones — por ejemplo para añadir un enlace _**Delete**_ junto a cada ítem en la lista.
 
 Añade el siguiente código en tu modelo `Book` (**models.py**). Esto crea una cadena con los tres primeros valores del campo `genre` (si existen) y crea una `short_description` (descripción corta) que puede ser usada en el sitio de administración por este método.
 
@@ -230,7 +233,8 @@ Después de guardar el modelo y actualizar admin, recarga el sitio y ve a la pá
 
 El modelo `Genre` (y el modelo `Language`, si lo definiste) tiene un solo campo, por lo que no tiene sentido crear un modelo adicional para el mismo para desplegar campos adicionales.
 
-> **Nota:** Vale la pena actualizar el modelo `BookInstance` para mostrar al menos el estado y fecha de devolución esperada. ¡Lo hemos añadido como un reto al final de este artículo!
+> [!NOTE]
+> Vale la pena actualizar el modelo `BookInstance` para mostrar al menos el estado y fecha de devolución esperada. ¡Lo hemos añadido como un reto al final de este artículo!
 
 ### Añadir filtros de lista
 
@@ -249,7 +253,8 @@ La vista de lista incluirá ahora un cuadro de filtrado a la derecha. Nota como
 
 Por defecto, las vistas detalladas organizan todos los campos verticalmente, en su órden de declaración en el modelo. Puedes cambiar el orden de declaración, qué campos se despliegan (o excluyen), si se usa secciones para organizar la información, si los campos se despliegan en horizontal o vertical, e incluso qué controles de edición se usan en los formularios de administración.
 
-> **Nota:** Los modelos de la **LocalLibrary** son relativamente simples, por lo que no tenemos una gran necesidad de cambiar el diseño; sin embargo haremos algunos cambios solo para mostrarte cómo.
+> [!NOTE]
+> Los modelos de la **LocalLibrary** son relativamente simples, por lo que no tenemos una gran necesidad de cambiar el diseño; sin embargo haremos algunos cambios solo para mostrarte cómo.
 
 #### Controlando qué campos son desplegados y ordenados
 
@@ -267,7 +272,8 @@ Reinicia tu aplicación y ve a la vista de detalle de autor — ahora debería a
 
 ![Admin Site - Improved Author Detail](admin_improved_author_detail.png)
 
-> **Nota:** Puedes también usar el atributo `exclude` para declarar una lista de atributos que se excluirán del formulario (todos los demás atributos en el modelo se desplegarán).
+> [!NOTE]
+> Puedes también usar el atributo `exclude` para declarar una lista de atributos que se excluirán del formulario (todos los demás atributos en el modelo se desplegarán).
 
 #### Seccionando la vista de detalle
 
@@ -318,7 +324,8 @@ Prueba recargando tu aplicación y observando la vista para un libro — ahora d
 
 En este caso, todo lo que hemos hecho es declarar nuestra clase encadenada tabular, que simplemente añade todos los campos del modelo _encadenado_. Puedes especificar toda clase de información adicional para el diseño incluyendo los campos a mostrar, su órden, si son solo de lectura o no, etc. (ve [TabularInline](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline) para más información).
 
-> **Nota:** ¡hay algunas lamentables limitaciones a esta funcionalidad! En la captura de pantalla de arriba tenemos tres instancias del libro existentes, seguidas de tres lugares para nuevas instancias del libro (¡que se ven muy similares!). Sería mejor NO tener instancias extras por defecto del libro y simplemente añadirlas mediante el enlace **Add another Book instance**, o poder simplemente listar las `BookInstances` como enlaces no legibles desde aquí. La primera opción puede hacerse estableciendo el atributo `extra` a 0 en el modelo `BookInstanceInline`, inténtalo tú mismo.
+> [!NOTE]
+> ¡Hay algunas lamentables limitaciones a esta funcionalidad! En la captura de pantalla de arriba tenemos tres instancias del libro existentes, seguidas de tres lugares para nuevas instancias del libro (¡que se ven muy similares!). Sería mejor NO tener instancias extras por defecto del libro y simplemente añadirlas mediante el enlace **Add another Book instance**, o poder simplemente listar las `BookInstances` como enlaces no legibles desde aquí. La primera opción puede hacerse estableciendo el atributo `extra` a 0 en el modelo `BookInstanceInline`, inténtalo tú mismo.
 
 ## Rétate a tí mismo
 
diff --git a/files/es/learn/server-side/django/authentication/index.md b/files/es/learn/server-side/django/authentication/index.md
index 2c3c420d05a76a..14198dc3b729d9 100644
--- a/files/es/learn/server-side/django/authentication/index.md
+++ b/files/es/learn/server-side/django/authentication/index.md
@@ -32,7 +32,8 @@ En este tutorial mostraremos cómo permitir a los usuarios iniciar sesión en tu
 
 Django proporciona un sistema de autenticación y autorización ("permisos"), construido sobre el framework de sesión discutido en el [tutorial anterior](/es/docs/Learn/Server-side/Django/Sessions), que le permite verificar credenciales de usuario y definir que acciones puede realizar cada usuario. El framework incluye modelos para `Users` y `Groups` (una forma genérica de aplicar permisos a más de un usuario a la vez), permisos/indicadores (permissions/flags) que designan si un usuario puede realizar una tarea, formularios y vistas para iniciar sesión en los usuarios, y view tools para restringir el contenido.
 
-> **Nota:** Según Django el sistema de autenticación pretende ser muy genérico, y, por lo tanto, no proporciona algunas características proporcinadas en otros sistemas de autenticación web. Las soluciones para algunos problemas están disponibles como paquetes de terceros. Por ejemplo, regulación de intentos de inicio de sesión y autenticación frente a terceros (por ej. OAuth).
+> [!NOTE]
+> Según Django el sistema de autenticación pretende ser muy genérico, y, por lo tanto, no proporciona algunas características proporcinadas en otros sistemas de autenticación web. Las soluciones para algunos problemas están disponibles como paquetes de terceros. Por ejemplo, regulación de intentos de inicio de sesión y autenticación frente a terceros (por ej. OAuth).
 
 En este tutorial mostraremos cómo habilitar la autenticación de usuarios en el sitio web [BibliotecaLocal](/es/docs/Learn/Server-side/Django/Tutorial_local_library_website), crear tus propias páginas de login y logout, añadir permisos a tus modelos, y controlar el acceso a las páginas. Usaremos la autenticación/permisos para desplegar listas de libros que han sido solicitados tanto por los usuarios como por los bibliotecarios.
 
@@ -44,7 +45,8 @@ Te mostraremos también cómo crear permisos, y revisar el estado de login y per
 
 La autenticación fue habilitada automáticamente cuando [creamos el sitio web esqueleto](/es/docs/Learn/Server-side/Django/skeleton_website) (en el tutorial 2), así que no necesitas hacer nada más en este punto.
 
-> **Nota:** Toda la configuración necesaria fue hecha por nosotros cuando creamos la aplicación usando el comando `django-admin startproject`. Las tablas de base de datos para los usuarios y permisos de modelo fueron creados la primera vez que ejecutamos `python manage.py migrate`.
+> [!NOTE]
+> Toda la configuración necesaria fue hecha por nosotros cuando creamos la aplicación usando el comando `django-admin startproject`. Las tablas de base de datos para los usuarios y permisos de modelo fueron creados la primera vez que ejecutamos `python manage.py migrate`.
 
 La configuración se establece en las secciones `INSTALLED_APPS` y `MIDDLEWARE` del archivo del proyecto (**locallibrary/locallibrary/settings.py**), como se muestra abajo:
 
@@ -67,7 +69,8 @@ MIDDLEWARE = [
 
 Ya creaste tu primer usuario cuando revisamos el [sitio de administración de Django](/es/docs/Learn/Server-side/Django/Admin_site) en el tutorial 4 (fue un superusuario, creado con el comando `python manage.py createsuperuser`). Nuestro superusuario ya está autenticado y tiene todos los permisos, así que necesitaremos crear un usuario de prueba que represente un usuario normal del sitio. Estaremos usando el sitio de administración para crear los grupos y logins de nuestro sitio web _BibliotecaLocal_, ya que es una de las formas más rápidas de hacerlo.
 
-> **Nota:** Puedes también crear usuarios mediante programación, como se muestra abajo. Tendrías que hacerlo, por ejemplo, si estuvieras desarrollando una interfaz para permitir a los usuarios crear sus propios logins (no deberías dar a los usuarios acceso al sito de administración).
+> [!NOTE]
+> Puedes también crear usuarios mediante programación, como se muestra abajo. Tendrías que hacerlo, por ejemplo, si estuvieras desarrollando una interfaz para permitir a los usuarios crear sus propios logins (no deberías dar a los usuarios acceso al sito de administración).
 >
 > ```python
 > from django.contrib.auth.models import User
@@ -109,7 +112,8 @@ Ahora vamos a crear un usuario:
 
 ¡Esta hecho! Ahora tienes la cuenta de un miembro normal de la libreria, el cual estara disponible para ser usado en tus pruebas (una vez que hayamos implementado las paginas para permitirles iniciar sesion).
 
-> **Nota:** Deberias intentar crear otro usuario miembro de _library._ Al igual que un grupo para los bibliotecarios _"Librarians",_ ¡y agregar usuarios a este tambien!
+> [!NOTE]
+> Deberias intentar crear otro usuario miembro de _library._ Al igual que un grupo para los bibliotecarios _"Librarians",_ ¡y agregar usuarios a este tambien!
 
 ## Configurando nuestras vistas de autenticación
 
@@ -117,9 +121,11 @@ Django provee todo lo necesario para crear las páginas de autenticación para m
 
 En esta sección, mostramos cómo integrar el sistema por defecto en el sitio web de _BibliotecaLocal_ y crear plantillas "templates". Las incluiremos en las URLs principales del proyecto.
 
-> **Nota:** No tienes que usar nada de este código, pero es probable que quieras hacerlo porque hace las cosas mucho más fáciles. Seguramente necesitará cambiar el código de manejo de formularios si cambia su modelo de usuario (¡un tema avanzado!) pero aun asi, todavía podrá usar las funciones de vista de stock.
+> [!NOTE]
+> No tienes que usar nada de este código, pero es probable que quieras hacerlo porque hace las cosas mucho más fáciles. Seguramente necesitará cambiar el código de manejo de formularios si cambia su modelo de usuario (¡un tema avanzado!) pero aun asi, todavía podrá usar las funciones de vista de stock.
 
-> **Nota:** En este caso podríamos razonablemente poner las páginas de autenticación, incluyendo las direcciones URL y plantillas, dentro de nuestra aplicación de catálogo. Sin embargo, si tuviéramos varias aplicaciones, sería mejor separar este comportamiento de inicio de sesión compartido y tenerlo disponible en todo el sitio, ¡así que eso es lo que hemos mostrado aquí!
+> [!NOTE]
+> En este caso podríamos razonablemente poner las páginas de autenticación, incluyendo las direcciones URL y plantillas, dentro de nuestra aplicación de catálogo. Sin embargo, si tuviéramos varias aplicaciones, sería mejor separar este comportamiento de inicio de sesión compartido y tenerlo disponible en todo el sitio, ¡así que eso es lo que hemos mostrado aquí!
 
 ### URL's del proyecto
 
@@ -134,7 +140,8 @@ urlpatterns += [
 
 Navega hasta la URL `http://127.0.0.1:8000/accounts/` (¡Nota la barra inclinada hacia adelante!) y Django mostrara un error, diciendo que no puede encontrar esta URL, y listando todas las URL's que ha intentado. Aqui puedes ver las URL's que funcionaran, por ejemplo:
 
-> **Nota:** Usando el metodo anterior, añade las siguientes URL's con sus respectivos nombres entre corchetes, los cuales pueden ser usados para revertir "reverse" el mapeado de las URL's. No necesitas implementar nada mas, el anterior mapeado de URL's asigna automaticamente las mencionadas URL's.
+> [!NOTE]
+> Usando el metodo anterior, añade las siguientes URL's con sus respectivos nombres entre corchetes, los cuales pueden ser usados para revertir "reverse" el mapeado de las URL's. No necesitas implementar nada mas, el anterior mapeado de URL's asigna automaticamente las mencionadas URL's.
 >
 > ```python
 > accounts/ login/ [name='login']
@@ -162,7 +169,8 @@ Las URL's (y vistas "views" implicitas) que recien hemos añadido esperan encont
 
 Para este sitio pondremos nuestra pagina HTML en el directorio **"templates/registration/".** Este directorio debera estar en el directorio raiz de tu proyecto, es decir, el mismo directorio de las carpetas donde estan **catalog** y **locallibrary**. Por favor ahora crea las carpetas "templates" y dentro de esta "registration".
 
-> **Nota:** Su estructura de carpetas ahora debería verse como la siguiente:
+> [!NOTE]
+> Su estructura de carpetas ahora debería verse como la siguiente:
 >
 > ```
 > locallibrary (django project folder)
@@ -194,7 +202,8 @@ Actualiza la seccion de TEMPLATES con la linea 'DIRS' como se muestra a continua
 
 ### Plantilla inicio de sesión "login"
 
-> **Advertencia:** Las plantillas de autenticacion provista en este articulo son versiones muy basicas y ligeramete modificadas de las plantillas de inicio de sesion de demostracion de Django. ¡Necesitas personalizarlos para tus propios usos!
+> [!WARNING]
+> Las plantillas de autenticacion provista en este articulo son versiones muy basicas y ligeramete modificadas de las plantillas de inicio de sesion de demostracion de Django. ¡Necesitas personalizarlos para tus propios usos!
 
 Crea un nuevo archivo HTML llamado /**locallibrary/templates/registration/login.html**. suministrado en el siguiente contenido :
 
@@ -383,7 +392,8 @@ Puedes probar las nuevas páginas de autenticación intentando iniciar sesión y
 
 Serás capaz de probar la funcionalidad de reinicio de contraseña desde el enlace de la página de inicio de sesión. **¡Ten cuidado con el hecho de que Django solamente enviará correos de reinicio a las direcciones (usuarios) que ya están almacenadas en la base de datos!**
 
-> **Nota:** El sistema de reinicio de contraseña requiere que tu sitio web soporte envío de correo, que está más allá del ámbito de este artículo, por lo que esta parte **no funcionará todavía**. Para permitir el testeo, establece la siguiente línea al final de tu fichero settings.py. Esto registra en la consola cualquier envío de correo electrónico (y así puedes copiar el enlace de reinicio de contraseña desde dicha consola).
+> [!NOTE]
+> El sistema de reinicio de contraseña requiere que tu sitio web soporte envío de correo, que está más allá del ámbito de este artículo, por lo que esta parte **no funcionará todavía**. Para permitir el testeo, establece la siguiente línea al final de tu fichero settings.py. Esto registra en la consola cualquier envío de correo electrónico (y así puedes copiar el enlace de reinicio de contraseña desde dicha consola).
 >
 > ```python
 > EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
@@ -421,7 +431,8 @@ Como puedes ver, usamos las etiquetas de plantilla `if`-`else`-`endif` para cond
 
 Creamos los enlaces URLs del inicio y del cierre de sesión usando la etiqueta de plantilla `url` y los nombres de las respectivas configuraciones de las URL. Nótese también cómo hemos añadido `?next=\{{request.path}}` al final de las URLs. Lo que esto hace es añadir el párametro URL next que contiene la dirección (URL) de la página _actual_, al final de la URL enlazada. Después de que el usuario haya iniciado o cerrado sesión con éxito, las vistas usarán el valor de este "`next`" para redirigir al usuario de vuelta a la página donde pincharon primeramente el enlace de inicio/cierre de sesión.
 
-> **Nota:** ¡Pruébalo! Si estás en la página de inicio y pinchas en la barra lateral "sidebar", después de que la operación se complete deberías acabar de vuelta en la misma página.
+> [!NOTE]
+> ¡Pruébalo! Si estás en la página de inicio y pinchas en la barra lateral "sidebar", después de que la operación se complete deberías acabar de vuelta en la misma página.
 
 ### Probando en vistas
 
@@ -435,7 +446,8 @@ def my_view(request):
     ...
 ```
 
-> **Nota:** ¡Tú puedes hacer el mismo tipo de cosas manualmente probando con `request.user.is_authenticated`, pero el decorador es mucho más conveniente!
+> [!NOTE]
+> ¡Tú puedes hacer el mismo tipo de cosas manualmente probando con `request.user.is_authenticated`, pero el decorador es mucho más conveniente!
 
 De manera similar, la forma más fácil de restringir el acceso a los usuarios que han iniciado sesión en tus vistas basadas en clases es extender de `LoginRequiredMixin`. Necesitas declarar primeramente este `mixin` en la lista de super clases, antes de la clase de vista principal.
 
@@ -490,7 +502,8 @@ def is_overdue(self):
     return False
 ```
 
-> **Nota:** Primeramente verificamos si la fecha `due_back` está vacía antes de realizar una comparación. Un campo vacío `due_back` provocaría a Django arrojar un error en lugar de mostrar la página: los valores vacíos no son comparables. ¡Esto no es algo que queramos para la experiencia de nuestros usuarios!
+> [!NOTE]
+> Primeramente verificamos si la fecha `due_back` está vacía antes de realizar una comparación. Un campo vacío `due_back` provocaría a Django arrojar un error en lugar de mostrar la página: los valores vacíos no son comparables. ¡Esto no es algo que queramos para la experiencia de nuestros usuarios!
 
 Ahora que hemos actualizado nuestros modelos, necesitaremos hacer migraciones actuales en el proyecto y entonces aplicar esas migraciones:
 
@@ -523,7 +536,8 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 Ahora que es posible alquilar libros a un usuario específico, ve y alquila un número de registros `BookInstance`. Establece su campo `borrowed` a tu usuario de prueba, establece el `status` "On loan" (en alquiler) y establece fechas de vencimiento tanto en el futuro como en el pasado.
 
-> **Nota:** No escribiremos el proceso, porque ¡ya sabes cómo usar el sitio de Administrador!
+> [!NOTE]
+> No escribiremos el proceso, porque ¡ya sabes cómo usar el sitio de Administrador!
 
 ### Vista en alquiler
 
@@ -683,7 +697,8 @@ Anteriormente en este artículo te mostramos cómo crear una página para el usu
 
 Deberías ser capaz de seguir el mismo patrón que el de la otra vista. La principal diferencia es que necesitarás restringir la vista a solamente los bibliotecarios. Podrías hacer esto basándote en si es un miembro de los empleados (decorador de función: `staff_member_required`, variable de plantilla: `user.is_staff`) pero nosotros te recomendamos que en su lugar uses el permiso `can_mark_returned` y `PermissionRequiredMixin`, como se describe en la sección anterior.
 
-> **Advertencia:** Recuerda no usar tu súper usuario para pruebas basadas en permisos (la comprobación de permisos siempre devuelve cierto para súper usuarios, ¡incluso si un permiso no ha sido definido todavía!). En su lugar, crea un usuario bibliotecario, y añade entonces la capacidad requerida.
+> [!WARNING]
+> Recuerda no usar tu súper usuario para pruebas basadas en permisos (la comprobación de permisos siempre devuelve cierto para súper usuarios, ¡incluso si un permiso no ha sido definido todavía!). En su lugar, crea un usuario bibliotecario, y añade entonces la capacidad requerida.
 
 Cuando hayas terminado, tu página debería verse algo parecida a la captura de pantalla de abajo.
 
diff --git a/files/es/learn/server-side/django/deployment/index.md b/files/es/learn/server-side/django/deployment/index.md
index bbaaed1b2a3e37..72cb55da81a178 100644
--- a/files/es/learn/server-side/django/deployment/index.md
+++ b/files/es/learn/server-side/django/deployment/index.md
@@ -52,19 +52,22 @@ El entorno de producción es el entorno proporcionado por el servidor en el que
 - Servidor de aplicaciones que transmite peticiones "dinámicas" entre su sitio web Django y el servidor web.
 - Bases de datos que su sitio web necesita.
 
-> **Nota:** Dependiendo de como esté configurado su entorno de producción, usted podría disponer también de un proxy inverso, balanceador de carga, etc.
+> [!NOTE]
+> Dependiendo de como esté configurado su entorno de producción, usted podría disponer también de un proxy inverso, balanceador de carga, etc.
 
 El servidor podría estar ubicado en sus propias instalaciones y conectado a Internet a través de un enlace rápido, pero lo más común es utilizar un computador alojado "en la nube". Esto en realidad implica que su código es ejecutado en algún computador remoto (o posiblemente un computador "virtual") en el centro (o centros) de datos de su compañía de servicios de _hosting._ El servidor remoto normalmente ofrecerá un determinado nivel garantizado de recursos de computación (es decir, CPU, RAM, memoria de almacenamiento, etc) y de conectividad a Internet por un cierto precio.
 
 A este tipo de hardware de computación/comunicaciones accesible de forma remota se le denomina _Infrastructure as a Service_ o _Infraestructura como Servicio (IaaS)_. Muchos proveedores de IaaS ofrecen la opción de preinstalar un sistema operativo en particular, sobre el cual se debe instalar el resto de componentes de su entorno de producción. Otros permiten seleccionar entornos plenamente configurados, con incluso configuraciones de Django y servidor web establecidas.
 
-> **Nota:** Los entornos pre-construidos le permiten establecer su sitio web de manera muy sencilla, ya que reducen el trabajo de configuración, pero las opciones disponibles podrían limitarle al uso de un servidor (u otros componentes) poco conocido, o podrían estar basados en versiones antiguas del Sistema Operativo. A menudo es preferible que uno mismo instale sus propios componentes, de manera que disponga de los que desee, y en el momento que necesite subir el nivel de prestaciones de alguna parte del sistema, tener cierta idea de por dónde empezar
+> [!NOTE]
+> Los entornos pre-construidos le permiten establecer su sitio web de manera muy sencilla, ya que reducen el trabajo de configuración, pero las opciones disponibles podrían limitarle al uso de un servidor (u otros componentes) poco conocido, o podrían estar basados en versiones antiguas del Sistema Operativo. A menudo es preferible que uno mismo instale sus propios componentes, de manera que disponga de los que desee, y en el momento que necesite subir el nivel de prestaciones de alguna parte del sistema, tener cierta idea de por dónde empezar
 
 Otros proveedores de _hosting_ incluyen Django como parte de una _Plataform as a Service_ o _Plataforma como Servicio (PaaS)_. En este tipo de _hosting_ no necesita preocuparse de la mayor parte del entorno de producción (servidor web, servidor de aplicaciones, balanceadores de carga), dado que la plataforma host ya se ocupa de todo ello por usted (así como de casi todo lo necesario para escalar su aplicación). Esto hace el despliegue bastante sencillo, puesto que ya solo necesita concentrarse en su aplicación web y no en el resto de la infraestructura de servidor.
 
 Algunos desarrolladores elegirán la mayor flexibilidad ofrecida por una IaaS frente a una PaaS, mientras que otros valorarán el reducido coste general de mantenimiento y la mayor facilidad de escalado de PaaS. Cuando se está empezando, la instalación del sitio web en un sistema PaaS es mucho más sencilla, así que eso es lo que haremos en este tutorial.
 
-> **Nota:** Si eliges un proveedor de hosting adaptado a Python/Django, éste debería facilitar instrucciones de cómo instalar un sitio web Django usando diferentes configuraciones de servidor web, servidor de aplicaciones, proxy inverso, etc (esto es irrelevante si eliges una PaaS). Por ejemplo, existen muchas guías paso-a-paso para distintas configuraciones en la [Digital Ocean Django community docs](https://www.digitalocean.com/community/tutorials?q=django).
+> [!NOTE]
+> Si eliges un proveedor de hosting adaptado a Python/Django, éste debería facilitar instrucciones de cómo instalar un sitio web Django usando diferentes configuraciones de servidor web, servidor de aplicaciones, proxy inverso, etc (esto es irrelevante si eliges una PaaS). Por ejemplo, existen muchas guías paso-a-paso para distintas configuraciones en la [Digital Ocean Django community docs](https://www.digitalocean.com/community/tutorials?q=django).
 
 ## Eligiendo un proveedor de hosting
 
@@ -86,13 +89,15 @@ La buena noticia cuando estás en los comienzos es que existen bastantes sitios
 
 Muchos proveedores disponen también de un nivel "básico" que proporciona niveles de capacidad de computación más útiles y con menos limitaciones. [Digital Ocean](https://www.digitalocean.com/) y [Python Anywhere](https://www.pythonanywhere.com/) son ejemplos de proveedores populares de hosting que ofrecen niveles básicos de computación relativamente baratos (en el rango de los 5 a los 10 $USD mensuales).
 
-> **Nota:** Recuerda que el precio no es el único criterio de selección. Si tu sitio web tiene éxito, la escalabilidad puede convertirse en la consideración más importante.
+> [!NOTE]
+> Recuerda que el precio no es el único criterio de selección. Si tu sitio web tiene éxito, la escalabilidad puede convertirse en la consideración más importante.
 
 ## Preparando tu sitio web para hacerlo público
 
 La [Django skeleton website](/es/docs/Learn/Server-side/Django/skeleton_website) creada usando las herramientas _django-admin_ y _manage.py_ están configuradas para hacer más sencillo el desarrollo. Muchos de los ajustes del proyecto Django (especificados en **settings.py**) deberían ser distintos en producción, por razones tanto de seguridad como de rendimiento.
 
-> **Nota:** Es bastante común disponer de un archivo **settings.py** separado en producción, e importar los ajustes sensibles desde un archivo aparte o desde una variable de entorno. Este archivo debería, por tanto, estar protegido, aún cuando el resto del código fuente esté disponible en un repositorio público.
+> [!NOTE]
+> Es bastante común disponer de un archivo **settings.py** separado en producción, e importar los ajustes sensibles desde un archivo aparte o desde una variable de entorno. Este archivo debería, por tanto, estar protegido, aún cuando el resto del código fuente esté disponible en un repositorio público.
 
 Los ajustes críticos que debes comprobar son:
 
@@ -132,7 +137,8 @@ DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )
 
 El valor de `DEBUG` será `True` por defecto, pero será `False` si el valor de la variable de entorno `DJANGO_DEBUG` se establece como una cadena vacía, es decir, `DJANGO_DEBUG=''`.
 
-> **Nota:** Sería más intuitivo si pudiéramos simplemente marcar y desmarcar la variable de entorno `DJANGO_DEBUG` a `True` y `False` directamente, en lugar de usar "cualquier cadena" o "cadena vacía" (respectivamente). Por desgracia, los valores de las variables de entorno son almacenados como cadenas de Python (_Python strings_), y la única cadena que se evalúa como `False` es la cadena vacía (por ejemplo, `bool('')==False`).
+> [!NOTE]
+> Sería más intuitivo si pudiéramos simplemente marcar y desmarcar la variable de entorno `DJANGO_DEBUG` a `True` y `False` directamente, en lugar de usar "cualquier cadena" o "cadena vacía" (respectivamente). Por desgracia, los valores de las variables de entorno son almacenados como cadenas de Python (_Python strings_), y la única cadena que se evalúa como `False` es la cadena vacía (por ejemplo, `bool('')==False`).
 
 [Lista de verificación de implementación](https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/) (documentación de Django) proporciona una lista de comprobación completa de ajustes que podrías querer cambiar. Puedes también sacar una lista de algunos de ellos usando el siguiente comando de terminal:
 
@@ -182,7 +188,8 @@ Para conseguir nuestra aplicación para trabajar en Heroku, necesitaremos coloca
 
 Una vez hecho todo eso, podemos crear una cuenta Heroku, obtener el cliente Heroku, y usarlo para instalar nuestro sitio web.
 
-> **Nota:** Las instrucciones indicadas abajo reflejan la forma de trabajar con Heroku en el momento de la redacción. Si Heroku cambia sus procesos de forma significativa, podrías preferir, en su lugar, revisar su documentación de instalación: [Comenzando en Heroku con Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction).
+> [!NOTE]
+> Las instrucciones indicadas abajo reflejan la forma de trabajar con Heroku en el momento de la redacción. Si Heroku cambia sus procesos de forma significativa, podrías preferir, en su lugar, revisar su documentación de instalación: [Comenzando en Heroku con Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction).
 
 Con esto ya tienes una visión general de lo que necesitas para empezar (vea [Cómo funciona Heroku](https://devcenter.heroku.com/articles/how-heroku-works) para tener una guía más exhaustiva).
 
@@ -190,7 +197,8 @@ Con esto ya tienes una visión general de lo que necesitas para empezar (vea [C
 
 Heroku está estrechamente integrado con el sistema de control de versiones de código fuente **git**, usándolo para subir/sincronizar cualquier cambio que hagas en los sistemas activos. Esto se hace añadiendo un nuevo repositorio "remoto" heroku denominado _heroku_ que apunta a un repositorio para tu fuente en la nube Heroku. Durante el desarrollo usas git para almacenar los cambios en tu repositorio "maestro". Cuando quieras desplegar tu sitio, sincronizas tus cambios con el repositorio Heroku.
 
-> **Nota:** Si estás acostumbrado a seguir buenas prácticas de desarrollo de software, probablemente ya estás usando git o algún otro sistema SCM. Si ya dispones de un repositorio git, podrás saltarte este paso.
+> [!NOTE]
+> Si estás acostumbrado a seguir buenas prácticas de desarrollo de software, probablemente ya estás usando git o algún otro sistema SCM. Si ya dispones de un repositorio git, podrás saltarte este paso.
 
 Existen muchas formas de trabajar con git, pero una de las más sencillas es crear en primer lugar una cuenta en [Github](https://github.com/), crear allí el repositorio, y a continuación sincronizarlo localmente:
 
@@ -274,7 +282,8 @@ El paso final es copiar en él tu aplicación y a continuación añadir los arch
 
 Una vez completada esta operación, deberías poder regresar a la página de Github donde creaste tu repositorio, refrescar la página, y comprobar que tu toda tu aplicación ha sido ya cargada. Puedes continuar actualizando tu repositorio según vayan cambiando los archivos, usando este ciclo add/commit/push.
 
-> **Nota:** Este es un buen momento para hacer una copia de seguridad de tu proyecto "simple" — algunos de los cambios que vamos a ir haciendo en las siguientes secciones podrían ser útiles para el despliegue en cualquier plataforma (o para el desarrollo), pero otros no.
+> [!NOTE]
+> Este es un buen momento para hacer una copia de seguridad de tu proyecto "simple" — algunos de los cambios que vamos a ir haciendo en las siguientes secciones podrían ser útiles para el despliegue en cualquier plataforma (o para el desarrollo), pero otros no.
 >
 > La _mejor_ manera de hacer esto es usar _git_ para gestionar tus revisiones. Con _git_ puedes no solo volver a una versión anterior en particular, sino que puedes mantener ésta en una "rama" separada de tus cambios en producción, y seleccionar determinados cambios a trasladar entre las ramas de producción y desarrollo. [Aprendiendo Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/) merece la pena el esfuerzo, pero queda fuera del alcance de este tema.
 >
@@ -333,7 +342,7 @@ db_from_env = dj_database_url.config(conn_max_age=500)
 DATABASES['default'].update(db_from_env)
 ```
 
-> **Nota:**
+> [!NOTE]
 >
 > - Nosotros seguiremos utilizando SQLite durante el desarrollo porque la variable de entorno `DATABASE_URL` no será fijada en nuestra computadora de desarrollo.
 > - El valor `conn_max_age=500` hace que la conexión sea persistente, lo que es más eficiente que recrear la conexión en cada ciclo de petición. No obstante, esto es opcional y puede ser eliminado si es necesario.
@@ -357,7 +366,8 @@ No obstante, esto no es necesario — no necesitas tener activa PostGreSQL en el
 
 Durante el desarrollo utilizábamos Django y el servidor web de desarrollo de Django para servir nuestros ficheros estáticos (CSS, JavaScript, etc). En un entorno de producción normalmente se sirven los ficheros estáticos desde una red de entrega de contenidos (CDN, Content Delivery Network) o desde el servidor web.
 
-> **Nota:** Servir ficheros estáticos vía Django/aplicación web es ineficiente ya que las peticiones tienen que pasar por código adicional innecesario (Django), en vez de ser gestionados directamente por el servidor web o una CDN completamente independiente. Si bien esto no tiene relevancia en el uso local durante el desarrollo, el uso de este mecanismo en producción tiene un significativo impacto de rendimiento.
+> [!NOTE]
+> Servir ficheros estáticos vía Django/aplicación web es ineficiente ya que las peticiones tienen que pasar por código adicional innecesario (Django), en vez de ser gestionados directamente por el servidor web o una CDN completamente independiente. Si bien esto no tiene relevancia en el uso local durante el desarrollo, el uso de este mecanismo en producción tiene un significativo impacto de rendimiento.
 
 Para facilitar el alojamiento de archivos estáticos de forma separada de la aplicación web Django, Django proporciona la herramienta _collectstatic_ para recoger estos archivos para el despliegue (hay una variable de configuración que define de dónde se deben recopliar los archivos cuando se ejecuta _collectstatic_). Las plantillas Django hacen referencia a la localización de almacenamiento de los archivos estáticos en relación a una variable de configuración (`STATIC_URL`), por tanto, esto puede modificarse se los archivos estáticos son movidos a otro host/servidor.
 
@@ -390,7 +400,8 @@ Para más información, vea [Django y activos estáticos](https://devcenter.hero
 
 Hay muchas formas de servir ficheros estáticos en producción (ya vimos los ajustes Django relevantes en las secciones previas). Heroku recomienda usar el proyecto [WhiteNoise](https://warehouse.python.org/project/whitenoise/) para servir objetos estáticos directamente desde Gunicorn en producción.
 
-> **Nota:** Heroku llama automáticamente a _collectstatic_ y prepara tus ficheros estáticos para ser usados por WhiteNoise después de que se cargue tu aplicación. Revisa la documentación [WhiteNoise](https://warehouse.python.org/project/whitenoise/), en la que se explica cómo funciona y por qué la implementación es un método para servir estos ficheros relativamente eficiente.
+> [!NOTE]
+> Heroku llama automáticamente a _collectstatic_ y prepara tus ficheros estáticos para ser usados por WhiteNoise después de que se cargue tu aplicación. Revisa la documentación [WhiteNoise](https://warehouse.python.org/project/whitenoise/), en la que se explica cómo funciona y por qué la implementación es un método para servir estos ficheros relativamente eficiente.
 
 Los pasos para instalar _WhiteNoise_ para usarlo dentro del proyecto son:
 
@@ -445,7 +456,8 @@ psycopg2==2.6.2
 whitenoise==3.2.2
 ```
 
-> **Nota:** Asegúrate de que existe una línea **psycopg2** como la que se ve arriba! Incluso aunque no lo hayas instalado localmente, deberías añadirla a **requirements.txt**.
+> [!NOTE]
+> Asegúrate de que existe una línea **psycopg2** como la que se ve arriba! Incluso aunque no lo hayas instalado localmente, deberías añadirla a **requirements.txt**.
 
 #### Runtime
 
@@ -455,7 +467,8 @@ El archivo **runtime.txt**, si ha sido definido, le dice a Heroku que lenguaje d
 python-3.5.2
 ```
 
-> **Nota:** Heroku sólo soporta un número pequeño de [Python runtimes](https://devcenter.heroku.com/articles/python-support#supported-python-runtimes). Tú puedes especificar valores de runtime de Python 3, pero en el momento de esta redacción la versión anterior será soportada como definida.
+> [!NOTE]
+> Heroku sólo soporta un número pequeño de [Python runtimes](https://devcenter.heroku.com/articles/python-support#supported-python-runtimes). Tú puedes especificar valores de runtime de Python 3, pero en el momento de esta redacción la versión anterior será soportada como definida.
 
 #### Guardar los cambios en Github y volver a probar
 
@@ -503,7 +516,8 @@ Para crear la app ejecutamos el comando "create" en el directorio raíz de nuest
 heroku create
 ```
 
-> **Nota:** Puedes nombrar el remoto, si lo deseas, especificando un valor después de "create". Si no, obtendrás un nombre aleatorio. Este nombre es el que se utiliza en la URL por defecto.
+> [!NOTE]
+> Puedes nombrar el remoto, si lo deseas, especificando un valor después de "create". Si no, obtendrás un nombre aleatorio. Este nombre es el que se utiliza en la URL por defecto.
 
 Podemos a continuación "empujar" (push) nuestra aplicación hacia el respositorio Heroku como se muestra abajo. Este proceso subirá la aplicación, la empaquetará en un dyno, ejecutará collestatic, y arrancará el sitio.
 
@@ -565,7 +579,8 @@ DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-20
 
 Si recuerdas de la sección [Preparando tu sitio web para hacerlo público](#getting_your_website_ready_to_publish), tenemos que establecer variables de entorno para `DJANGO_SECRET_KEY` y `DJANGO_DEBUG`. Vamos a hacerlo ahora.
 
-> **Nota:** La clave secreta tiene que ser verdaderamente secreta! Una forma de generar una nueva clave es crear un nuevo proyecto Django (`django-admin startproject nombredeproyecto`) y obtener la clave generada para tí de su archivo **settings.py**.
+> [!NOTE]
+> La clave secreta tiene que ser verdaderamente secreta! Una forma de generar una nueva clave es crear un nuevo proyecto Django (`django-admin startproject nombredeproyecto`) y obtener la clave generada para tí de su archivo **settings.py**.
 
 Establecemos el valor de la variable `DJANGO_SECRET_KEY` con el comando `config:set` (como se muestra abajo). Recuerda usar tu propia clave secreta!
 
@@ -601,7 +616,8 @@ git push origin master
 git push heroku master
 ```
 
-> **Nota:** Una vez completada la actualización del sitio en Heroku, introduce una URL que no exista (por ejemplo, **/catalog/doesnotexist/**). Antes se habría mostrado una página de depuración detallada, pero ahora deberías simplemente ver una página de "Not Found".
+> [!NOTE]
+> Una vez completada la actualización del sitio en Heroku, introduce una URL que no exista (por ejemplo, **/catalog/doesnotexist/**). Antes se habría mostrado una página de depuración detallada, pero ahora deberías simplemente ver una página de "Not Found".
 
 ### Depuración
 
diff --git a/files/es/learn/server-side/django/development_environment/index.md b/files/es/learn/server-side/django/development_environment/index.md
index c53f384d7e137d..53c2b1cf55c33d 100644
--- a/files/es/learn/server-side/django/development_environment/index.md
+++ b/files/es/learn/server-side/django/development_environment/index.md
@@ -53,7 +53,8 @@ Django es extremadamente flexible en términos de cómo y dónde puede instalars
 
 Cada una de estas opciones requieren configuraciones y puesta en marcha ligeramente diferentes. Las siguientes subsecciones explican algunas de tus opciones. En el resto del artículo te mostraremos como ajustar Django en un pequeño número de sistemas operativos, y se supondrá ese ajuste a lo largo del resto del módulo.
 
-> **Nota:** La documentación oficial de Django cubre otras posibles opciones de instalación. Enlazamos a los [documentos apropiados más abajo](#furtherreading).
+> [!NOTE]
+> La documentación oficial de Django cubre otras posibles opciones de instalación. Enlazamos a los [documentos apropiados más abajo](#furtherreading).
 
 #### ¿Qué sistemas operativos están soportados?
 
@@ -69,7 +70,8 @@ Django se ejecuta por encima de Python, y puede uarse tanto con Python 2 o con P
 - Python 3 es una actualización de Python 2 que, aunque similar, es más consistente y fácil de usar. Python 3 también es el futuro de Python, y continúa su evolución.
 - También es posible soportar ambas versiones usando bibliotecas (ej. [six](http://pythonhosted.org/six/)), aunque no sin un esfuerzo adicional de desarrollo.
 
-> **Nota:** Historicamente Python 2 era la única elección realista, porque muy pocas bibliotecas de terceros estaban disponibles para Python 3. La tendencia actual es que la mayoría de paquetes nuevos y populares del [Python Package Index](https://pypi.python.org/pypi) (PyPi) soporten ambas versiones de Python. Aunque todavía haya muchos paquetes que sólo están disponibles para Python 2, elegir Python 3 es actualmente una opción muy popular.
+> [!NOTE]
+> Historicamente Python 2 era la única elección realista, porque muy pocas bibliotecas de terceros estaban disponibles para Python 3. La tendencia actual es que la mayoría de paquetes nuevos y populares del [Python Package Index](https://pypi.python.org/pypi) (PyPi) soporten ambas versiones de Python. Aunque todavía haya muchos paquetes que sólo están disponibles para Python 2, elegir Python 3 es actualmente una opción muy popular.
 
 Te recomendamos que uses la última versión de Python 3 a menos que el sitio dependa de bibliotecas de terceros que sólo están disponibles para Python 2.
 
@@ -91,13 +93,15 @@ Django soporta cuatro bases de datos importantes (PostgreSQL, MySQL, Oracle y SQ
 
 Durante este artículo (y la mayoría de este módulo) usaremos la base de datos _SQLite_, que almacena sus datos en un fichero. SQLite está pensado para ser usado como base ligera y no puede soportar un alto nivel de concurrencia. Es sin embargo una excelente elección para aplicaciones que son principalmente de sólo lectura.
 
-> **Nota:** Django está configurado para usar SQLite por defecto cuando comienzas tu proyecto de sitio web usando las herramientas estándard (_django-admin_). Es una gran elección cuando estás empezando porque no requiere configuración o puesta en marcha adicional.
+> [!NOTE]
+> Django está configurado para usar SQLite por defecto cuando comienzas tu proyecto de sitio web usando las herramientas estándard (_django-admin_). Es una gran elección cuando estás empezando porque no requiere configuración o puesta en marcha adicional.
 
 #### ¿Instalar Python en un entorno de sistema o virtual?
 
 Cuando instalas Python3 obtienes un único entorno global que es compartido con todo el código Python3. Si bien puedes instalar los paquetes que te gusten en el entorno, sólo puedes instalar al mismo tiempo una versión en particular de cada paquete.
 
-> **Nota:** Las aplicaciones Python instaladas en el entorno global pueden entrar en conflicto potencialmente unas con otras (ej. si dependen de diferentes versiones del mismo paquete).
+> [!NOTE]
+> Las aplicaciones Python instaladas en el entorno global pueden entrar en conflicto potencialmente unas con otras (ej. si dependen de diferentes versiones del mismo paquete).
 
 Si instalas Django dentro del entorno por defecto/global sólo podrás apuntar a una sóla versión de Django en la computadora. Esto puede ser un problema si quieres crear nuevos sitios (usando la última versión de Django) pero manteniendo los sitios web que dependen de versiones más antiguas.
 
@@ -111,7 +115,8 @@ Para poder usar Django tendrás que instalar Python en tu sistema operativo. Si
 
 Esta sección explica brevemente como puedes comprobar qué versiones de Python están presentes, e instalar nuevas versiones cuando lo necesites, en Ubuntu Linux 16.04, Mac OS X, y Windows 10.
 
-> **Nota:** Dependiendo de tu plataforma, podrías también ser capaz de instalar Python/pip desde la propia aplicación de gestión de paquetes de tu sistema o vía otros mecanismos. Para la mayoría de las plataformas puedes descargar los ficheros de instalación requeridos desde <https://www.python.org/downloads/> e instalarlos usando el método apropiado específico de la plataforma.
+> [!NOTE]
+> Dependiendo de tu plataforma, podrías también ser capaz de instalar Python/pip desde la propia aplicación de gestión de paquetes de tu sistema o vía otros mecanismos. Para la mayoría de las plataformas puedes descargar los ficheros de instalación requeridos desde <https://www.python.org/downloads/> e instalarlos usando el método apropiado específico de la plataforma.
 
 ### Ubuntu 16.04
 
@@ -183,7 +188,8 @@ El instalador de Windows incorpora _pip3_ (el gestor de paquetes de Python) por
 pip3 list
 ```
 
-> **Nota:** El instalador debería poner en marcha todo lo que necesitas para que el comando de arriba funcione. Si por el contrario obtienes un mensaje de que Python no puede ser encontrado, puede que necesites añadirlo al path de tu sistema.
+> [!NOTE]
+> El instalador debería poner en marcha todo lo que necesitas para que el comando de arriba funcione. Si por el contrario obtienes un mensaje de que Python no puede ser encontrado, puede que necesites añadirlo al path de tu sistema.
 
 ## Uso de Django dentro de un entorno virtual de Python
 
@@ -293,7 +299,8 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get
 
 Una vez que estás dentro del entorno virutal puedes instalar Django e iniciar el desarrollo.
 
-> **Nota:** De ahora en adelante en este artículo (y por ende en el módulo) asume por favor que todos los comandos se ejecutan en un entorno virtual Python como el que acabamos de poner en marcha arriba.
+> [!NOTE]
+> De ahora en adelante en este artículo (y por ende en el módulo) asume por favor que todos los comandos se ejecutan en un entorno virtual Python como el que acabamos de poner en marcha arriba.
 
 ### Uso de un entorno virtual
 
@@ -324,9 +331,11 @@ py -3 -m django --version
  1.11.7
 ```
 
-> **Nota:** En Windows se lanzan scripts _Python 3_ añadiendo como prefijo del comando con `py -3`, mientras que en Linux/Mac OSX, el comando es `python3`.
+> [!NOTE]
+> En Windows se lanzan scripts _Python 3_ añadiendo como prefijo del comando con `py -3`, mientras que en Linux/Mac OSX, el comando es `python3`.
 
-> **Advertencia:** El resto de este **modulo** usa, para invocar Python 3, el comando _Linux_ (`python3`) . Si estás trabajando en _Windows_ simplemente reemplazar este prefijo con: `py -3`
+> [!WARNING]
+> El resto de este **modulo** usa, para invocar Python 3, el comando _Linux_ (`python3`) . Si estás trabajando en _Windows_ simplemente reemplazar este prefijo con: `py -3`
 
 ## Comprobación de tu instalación
 
@@ -361,7 +370,8 @@ Starting development server at http://127.0.0.1:8000/
 Quit the server with CONTROL-C.
 ```
 
-> **Nota:** El comando anterior muestra el comando Linux/Mac OS X. En este punto ¡puedes ignorar las advertencias sobre "13 unapplied migration(s)"!
+> [!NOTE]
+> El comando anterior muestra el comando Linux/Mac OS X. En este punto ¡puedes ignorar las advertencias sobre "13 unapplied migration(s)"!
 
 Una vez que tengas funcionando el servidor puedes ver el sitio navegando a la siguiente URL en tu explorador web local : `http://127.0.0.1:8000/`. Deberías ver un sitio parecido a este:
 
diff --git a/files/es/learn/server-side/django/forms/index.md b/files/es/learn/server-side/django/forms/index.md
index 5cbdf2afc64bba..2c2f1940749c5c 100644
--- a/files/es/learn/server-side/django/forms/index.md
+++ b/files/es/learn/server-side/django/forms/index.md
@@ -107,7 +107,8 @@ Basado en el diagrama de anterior, las principales pasos que hace el proceso del
 
 Django provee una serie de herramientas y enfoques para ayudarlo con las tareas detalladas anteriormente. La más fundamental es la clase `Form`, la cuál simplifica la generación de formularios HTML y la limpieza y validación de datos. En la siguiente sección describimos cómo funcionan los formularios usando el ejemplo práctico de una página para permitir a los bibliotecarios renovar libros.
 
-> **Nota:** Comprender como se usa la clase `Form` lo ayudará cuando analicemos las clases de marco de formulario de más "alto nivel" de Django.
+> [!NOTE]
+> Comprender como se usa la clase `Form` lo ayudará cuando analicemos las clases de marco de formulario de más "alto nivel" de Django.
 
 ## Renew-book form usando un Form y la funcion view
 
@@ -184,7 +185,8 @@ Hay dos cosas importantes a tener en cuenta. El primero es que obtenemos nuestro
 
 El segundo punto es que si un valor cae fuera de nuestro rango, elevamos un `ValidationError`, especificando el texto de error que queremos mostrar en el formulario si se ingresa un valor no válido. El ejemplo anterior también envuelve este texto en uno de las [funciones de traduccion de Django](https://docs.djangoproject.com/en/1.10/topics/i18n/translation/) `ugettext_lazy()` (importado como `_()`), lo cual es una buena práctica si desea traducir su sitio más tarde.
 
-> **Nota:** Existen muchos otros métodos y ejemplos para validar formularios en [Validacion de Formularios y campos](https://docs.djangoproject.com/en/1.10/ref/forms/validation/) (Django docs). Por ejemplo, en los casos en que tiene varios campos que dependen unos de otros, puede anular la función [Form.clean()](https://docs.djangoproject.com/en/1.10/ref/forms/api/#django.forms.Form.clean) function y colocar un `ValidationError`.
+> [!NOTE]
+> Existen muchos otros métodos y ejemplos para validar formularios en [Validacion de Formularios y campos](https://docs.djangoproject.com/en/1.10/ref/forms/validation/) (Django docs). Por ejemplo, en los casos en que tiene varios campos que dependen unos de otros, puede anular la función [Form.clean()](https://docs.djangoproject.com/en/1.10/ref/forms/api/#django.forms.Form.clean) function y colocar un `ValidationError`.
 
 ¡Eso es todo lo que necesitamos para el formulario en este ejemplo!
 
@@ -204,7 +206,8 @@ urlpatterns += [
 
 La configuración de URL redirigirá las URL con el formato **/catalog/book/_\<bookinstance id>_/renew/** a la función llamada `renew_book_librarian()` en **views.py**, y envia el id de `BookInstance` como parametro llamado `pk`.
 
-> **Nota:** Podemos nombrar nuestros datos de URL capturados "pk" como queramos, porque tenemos un control completo sobre la función de vista (no estamos usando una clase de vista de detalles genérica que espere parámetros con un nombre determinado). sin embargo `pk`, abreviatura de "primary key", es una convención razonable de usar!
+> [!NOTE]
+> Podemos nombrar nuestros datos de URL capturados "pk" como queramos, porque tenemos un control completo sobre la función de vista (no estamos usando una clase de vista de detalles genérica que espere parámetros con un nombre determinado). sin embargo `pk`, abreviatura de "primary key", es una convención razonable de usar!
 
 ### View
 
@@ -297,7 +300,8 @@ Si el formulario no es válido llamamos `render()` de nuevo, pero esta vez el va
 
 Si el formulario es válido, entonces podemos comenzar a usar los datos, accediendo a ellos a través del atributo `form.cleaned_data` (ejemplo `data = form.cleaned_data['renewal_date']`). Aquí solo guardamos los datos en el valor `due_back` asociado al objeto `BookInstance`.
 
-> **Advertencia:** Si bien también puede acceder a los datos del formulario directamente a través de la solicitud (por ejemplo `request.POST['renewal_date']` o `request.GET['renewal_date']` (si se esta usando una solicitud GET) esto NO es recomendable. Los datos limpios se desinfectan, validan y convierten en tipos compatibles con Python.
+> [!WARNING]
+> Si bien también puede acceder a los datos del formulario directamente a través de la solicitud (por ejemplo `request.POST['renewal_date']` o `request.GET['renewal_date']` (si se esta usando una solicitud GET) esto NO es recomendable. Los datos limpios se desinfectan, validan y convierten en tipos compatibles con Python.
 
 El paso final en la parte de manejo de formularios de la vista es redirigir a otra página, generalmente una página de "éxito". En este caso usamos `HttpResponseRedirect` y `reverse()` para redirigir a la vista llamada `'all-borrowed'`(esto fue creado como el "desafío" en [Django Tutorial Part 8: User authentication and permissions](/es/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself)).Si no creó esa página, considere redirigir a la página de inicio en la URL '/').
 
@@ -372,7 +376,8 @@ La mayor parte de esto será completamente familiar de los tutoriales anteriores
 
 El código del formulario es relativamente simple. Primero declaramos las etiquetas del `form`,especificando dónde se debe enviar el formulario (`action`) y el `metodo` para enviar los datos (en este caso, una "POST HTTP"), si recuerda el [HTML Forms](#HTML_forms) resumen en la parte superior de la página, un espacio vacío `action` como se muestra, significa que los datos del formulario se volverán a publicar en la URL actual de la página (¡que es lo que queremos!). Dentro de las etiquetas definimos la enntrada (input) `submit`, que un usuario puede presionar para enviar los datos. Esto `{% csrf_token %}` es agregado justo dentro de las etiquetas de formulario es parte de la protección de falsificación entre sitios de Django.
 
-> **Nota:** Agregue el {% csrf_token%} a cada plantilla de Django que cree que use POST para enviar datos. Esto reducirá la posibilidad de que usuarios malintencionados secuestran formularios.
+> [!NOTE]
+> Agregue el {% csrf_token%} a cada plantilla de Django que cree que use POST para enviar datos. Esto reducirá la posibilidad de que usuarios malintencionados secuestran formularios.
 
 Todo lo que queda es la variable de la plantilla `\{{form}}`, que pasamos a la plantilla en el diccionario de contexto. Quizás, como era de esperar, cuando se usa como se muestra, proporciona la representación predeterminada de todos los campos del formulario, incluidas sus etiquetas, widgets y texto de ayuda; la representación es la que se muestra a continuación:
 
@@ -394,7 +399,8 @@ Todo lo que queda es la variable de la plantilla `\{{form}}`, que pasamos a la p
 </tr>
 ```
 
-> **Nota:** Quizás no sea obvio porque solo tenemos un campo, pero de forma predeterminada cada campo se define en su propia fila de tabla (razón por la cual la variable está dentro de la etiqueta `table` arriba).Esta misma representación (rendering) se proporciona si hace referencia a la variable de plantilla `\{{ form.as_table }}`.
+> [!NOTE]
+> Quizás no sea obvio porque solo tenemos un campo, pero de forma predeterminada cada campo se define en su propia fila de tabla (razón por la cual la variable está dentro de la etiqueta `table` arriba).Esta misma representación (rendering) se proporciona si hace referencia a la variable de plantilla `\{{ form.as_table }}`.
 
 Si tuviera que ingresar una fecha no válida, también obtendría una lista de los errores que se muestran en la página (en negrita a continuación).
 
@@ -441,7 +447,8 @@ Si aceptó el "desafío" en [Django Tutorial Part 8: User authentication and per
 {% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>  {% endif %}
 ```
 
-> **Nota:** Recuerde que su inicio de sesión de prueba deberá tener el permiso "`catalog.can_mark_returned`" para acceder a la página de renovar el libro (quizás use su cuenta de superusuario).
+> [!NOTE]
+> Recuerde que su inicio de sesión de prueba deberá tener el permiso "`catalog.can_mark_returned`" para acceder a la página de renovar el libro (quizás use su cuenta de superusuario).
 
 Alternativamente, puede construir manualmente una URL de prueba como esta — `http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/` (se puede obtener un ID de instancia de libro válido navegando a la página de detalles de un libro en su biblioteca y copiando el campo `id`).
 
@@ -477,7 +484,8 @@ class RenewBookModelForm(ModelForm):
         fields = ['due_back',]
 ```
 
-> **Nota:** Esto podría no parece mucho más simple que simplemente usar un `Form` (y no es en este caso, porque solo tenemos un campo). Sin embargo, si tiene muchos campos, puede reducir la cantidad de código de manera bastante significativa.
+> [!NOTE]
+> Esto podría no parece mucho más simple que simplemente usar un `Form` (y no es en este caso, porque solo tenemos un campo). Sin embargo, si tiene muchos campos, puede reducir la cantidad de código de manera bastante significativa.
 
 El resto de la información proviene de las definiciones de campo del modelo (por ejemplo, etiquetas, widgets, texto de ayuda, mensajes de error). Si estos no son del todo correctos, entonces podemos anularlos en nuestro `class Meta`, especificando un diccionario que contiene el campo a cambiar y su nuevo valor. Por ejemplo, en este formulario podríamos querer una etiqueta para nuestro campo de "Fecha de renovación" (en lugar del valor predeterminado basado en el nombre del campo: Fecha de vencimiento), y también queremos que nuestro texto de ayuda sea específico para este caso de uso. El `Meta` a continuación le muestra cómo anular estos campos, y puede configurar de manera similar `widgets` y `error_messages` si los valores predeterminados no son suficientes.
 
@@ -523,7 +531,8 @@ La clase `RenewBookModelForm` a continuación es ahora funcionalmente equivalent
 
 El algoritmo de manejo de formularios que utilizamos en nuestro ejemplo de vista de funciones anterior representa un patrón extremadamente común en las vistas de edición de formularios. Django extrae gran parte de esta "plantilla" para ti, para crear vistas de edición genéricas ( [generic editing views](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/) ) para crear, editar y eliminar vistas basadas en modelos. No solo manejan el comportamiento de "vista", sino que crean automáticamente la clase de formulario (un `ModelForm`) para tu modelo.
 
-> **Nota:** Además de las vistas de edición descritas aquí, también hay una clase [FormView](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/#formview) , que se encuentra en algún lugar entre nuestra vista de función y las otras vistas genéricas en términos de "flexibilidad" frente a "esfuerzo de codificación". Usando `FormView` tu necesitas crear el `Form`, pero no tiene que implementar todo el patrón estándar de manejo de formularios. En su lugar, solo tiene que proporcionar una implementación de la función que se llamará una vez que se sepa que el envío es válido.
+> [!NOTE]
+> Además de las vistas de edición descritas aquí, también hay una clase [FormView](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/#formview) , que se encuentra en algún lugar entre nuestra vista de función y las otras vistas genéricas en términos de "flexibilidad" frente a "esfuerzo de codificación". Usando `FormView` tu necesitas crear el `Form`, pero no tiene que implementar todo el patrón estándar de manejo de formularios. En su lugar, solo tiene que proporcionar una implementación de la función que se llamará una vez que se sepa que el envío es válido.
 
 En esta sección, vamos a usar vistas de edición genéricas para crear páginas para agregar funcionalidad para crear, editar y eliminar registros de `Author` de nuestra libreria — Proporcionar efectivamente una reimplementación básica de partes del sitio de administración (esto podría ser útil si necesita ofrecer la funcionalidad de administrador de una manera más flexible que puede proporcionar el sitio de administrador).
 
@@ -615,7 +624,8 @@ urlpatterns += [
 
 Las páginas de crear, actualiza y eliminar autor ahora estan listas para probar (no nos molestaremos en engancharlas en la barra lateral del sitio en este caso, aunque puede hacerlo si lo desea).
 
-> **Nota:** ¡Los usuarios observadores habrán notado que no hicimos nada para evitar que usuarios no autorizados accedan a las páginas! Lo dejamos como un ejercicio para usted (pista: puede usar el `PermissionRequiredMixin` y cree un nuevo permiso o reutilice nuestro permiso `can_mark_returned` ).
+> [!NOTE]
+> ¡Los usuarios observadores habrán notado que no hicimos nada para evitar que usuarios no autorizados accedan a las páginas! Lo dejamos como un ejercicio para usted (pista: puede usar el `PermissionRequiredMixin` y cree un nuevo permiso o reutilice nuestro permiso `can_mark_returned` ).
 
 ### Probando la página
 
diff --git a/files/es/learn/server-side/django/generic_views/index.md b/files/es/learn/server-side/django/generic_views/index.md
index eb5659fbf2665e..2e2d27f9e8f3ed 100644
--- a/files/es/learn/server-side/django/generic_views/index.md
+++ b/files/es/learn/server-side/django/generic_views/index.md
@@ -78,7 +78,8 @@ class BookListView(generic.ListView):
 
 ¡Eso es todo! La vista genérica consultará a la base de datos para obtener todos los registros del modelo especificado (`Book`) y renderizará una plantilla ubicada en **/locallibrary/catalog/templates/catalog/book_list.html** (que crearemos más abajo). Dentro de la plantilla puedes acceder a la lista de libros mediante la variable de plantilla llamada `object_list` O `book_list` (esto es, genéricamente, "`nombre_del_modelo_list`").
 
-> **Nota:** Esta ruta complicada para la ubicación de la plantilla no es un error de digitación — las vistas genéricas buscan plantillas en `/application_name/the_model_name_list.html` (`catalog/book_list.html` en este caso) dentro del directorio de la aplicación `/application_name/templates/` (`/catalog/templates/`).
+> [!NOTE]
+> Esta ruta complicada para la ubicación de la plantilla no es un error de digitación — las vistas genéricas buscan plantillas en `/application_name/the_model_name_list.html` (`catalog/book_list.html` en este caso) dentro del directorio de la aplicación `/application_name/templates/` (`/catalog/templates/`).
 
 Puedes añadir atributos para cambiar el comportamiento por defecto de arriba. Por ejemplo, puedes especificar otro archivo de plantilla si necesitas tener múltiples vistas que usen el mismo modelo, o puedes querer usar un nombre diferente de variable de plantilla si `book_list` no resulta intuitivo para tu caso particular de uso de plantilla. Posiblemente la variación más útil es cambiar/filtrar el conjunto de resultados que se devuelve, así, en lugar de listar todos los libros podrías listar los 5 libros más leídos por otros usuarios.
 
@@ -124,7 +125,8 @@ Cuando se hace esto es importante seguir este patrón:
 - Luego añadir tu nueva información de contexto.
 - Luego devolver el nuevo contexto (actualizado).
 
-> **Nota:** Revisa [Vistas genéricas integradas basadas en clases](https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/) (documentación de Django) para muchos más ejemplos de lo que puedes hacer.
+> [!NOTE]
+> Revisa [Vistas genéricas integradas basadas en clases](https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/) (documentación de Django) para muchos más ejemplos de lo que puedes hacer.
 
 ### Creando la plantilla de Vista de Lista
 
@@ -194,7 +196,8 @@ Accedemos a los _campos_ del registro del libro asociado usando la "notación de
 
 También podemos invocar _funciones_ en el modelo desde dentro de nuestra plantilla — en este caso invocamos a `book.get_absolute_url()` para obtener una URL que se podría usar para desplegar la página de detalle relacionada. Esto funciona siempre y cuando la función no tenga ningún argumento (¡no hay forma de enviar argumentos!).
 
-> **Nota:** Debemos tener cuidado de los "efectos secundarios" al invocar funciones en las plantillas. Aquí solo obtenemos una URL para desplegar, pero una función puede hacer casi cualquier cosa — ¡no quisieramos borrar nuestra base de datos (por ejemplo) solo por renderizar nuestra plantilla!
+> [!NOTE]
+> Debemos tener cuidado de los "efectos secundarios" al invocar funciones en las plantillas. Aquí solo obtenemos una URL para desplegar, pero una función puede hacer casi cualquier cosa — ¡no quisieramos borrar nuestra base de datos (por ejemplo) solo por renderizar nuestra plantilla!
 
 #### Actualizar la plantilla base
 
@@ -233,13 +236,16 @@ Opcionalmente puedes añadir al nombre de la variable una [etiqueta](https://doc
 
 En este caso utilizamos `'<int:pk>'` para capturar el id del libro, que debe ser una cadena con un formato especial y pasarlo a la vista como un parámetro llamado `pk` (abreviatura de primary key). Este es el id que se está utilizando para almacenar el libro de forma única en la base de datos, tal y como se define en el Modelo de Libros.
 
-> **Nota:** Como ya se discutió antes, nuestra URL coincidente es en realidad `catalog/book/<digits>` (como estamos en la aplicación **catalog**, se asume `/catalog/`).
+> [!NOTE]
+> Como ya se discutió antes, nuestra URL coincidente es en realidad `catalog/book/<digits>` (como estamos en la aplicación **catalog**, se asume `/catalog/`).
 
-> **Advertencia:** La vista de detalle genérica basada en clases _espera_ que se le envíe un parámetro llamado pk. Si estás escribiendo tu propia vista de función, puedes usar el nombre de parámetro que quieras, o incluso enviar la información como un argumento sin nombre.
+> [!WARNING]
+> La vista de detalle genérica basada en clases _espera_ que se le envíe un parámetro llamado pk. Si estás escribiendo tu propia vista de función, puedes usar el nombre de parámetro que quieras, o incluso enviar la información como un argumento sin nombre.
 
 #### Introducción avanzada a path/expresiones regulares
 
-> **Nota:** No necesitarás esta sección para completar el tutorial. La proporcionamos porque conocer esta opción es probable que sea útil en tu futuro centrado en Django.
+> [!NOTE]
+> No necesitarás esta sección para completar el tutorial. La proporcionamos porque conocer esta opción es probable que sea útil en tu futuro centrado en Django.
 
 La combinación de patrones proporcionada por `path()` es simple y útil para los casos (muy comunes) en los que sólo desea capturar _cualquier_ cadena o entero. Si necesita un filtrado más refinado (por ejemplo, filtrar sólo cadenas que tengan un cierto número de caracteres) puede utilizar el método [re_path()](https://docs.djangoproject.com/en/4.0/ref/urls/#django.urls.re_path).
 
@@ -409,7 +415,8 @@ Consideremos algunos ejemplos reales de patrones:
 
 Puedes capturar múltiples patrones en una sola comparación, y por tanto codificar bastantes datos diferentes en una URL.
 
-> **Nota:** Como reto, considera cómo podrías codificar una url para listar todos los libros publicados en un año, mes y día en particular, y la RE que podría usarse para la comparación.
+> [!NOTE]
+> Como reto, considera cómo podrías codificar una url para listar todos los libros publicados en un año, mes y día en particular, y la RE que podría usarse para la comparación.
 
 #### Enviado opciones adicionales en tus mapeos URL
 
@@ -421,7 +428,8 @@ Por ejemplo, en base al path mostrado a continuación, para una petición a `/my
 path('myurl/<fish>', views.my_view, {'my_template_name': 'some_path'}, name='aurl'),
 ```
 
-> **Nota:** Tanto las opciones extra como los patrones capturados con nombre se envían a la vista como argumentos _con nombre_. Si usas el **mismo nombre** tanto para un patrón capturado como para una opción extra, solo el valor del patrón capturado será enviado a la vista (el valor especificado para la opción extra será eliminado).
+> [!NOTE]
+> Tanto las opciones extra como los patrones capturados con nombre se envían a la vista como argumentos _con nombre_. Si usas el **mismo nombre** tanto para un patrón capturado como para una opción extra, solo el valor del patrón capturado será enviado a la vista (el valor especificado para la opción extra será eliminado).
 
 ### Vista (basada en clases)
 
@@ -492,7 +500,8 @@ Crea el archivo HTML **/locallibrary/catalog/templates/catalog/book_detail.html*
 {% endblock %}
 ```
 
-> **Nota:** El enlace `author` en la plantilla de arriba tiene una URL vacía porque no hemos creado aún una página de detalle de autor. Una vez que esta exista, deberías actualizar la URL así:
+> [!NOTE]
+> El enlace `author` en la plantilla de arriba tiene una URL vacía porque no hemos creado aún una página de detalle de autor. Una vez que esta exista, deberías actualizar la URL así:
 >
 > ```django
 >  <a href="{% url 'author-detail' book.author.pk %}"><strong>\{{ book.author }}</strong></a>
@@ -515,7 +524,8 @@ Lo interesante que no hemos visto previamente es la función `book.bookinstance_
 
 Este método es necesario porque has declarado un campo `ForeignKey` (uno-a-muchos) únicamente en la lado "uno" de la relación. Como no haces nada para declarar la relación en el otro modelo ("muchos"), este no tiene ningún campo para obtener el conjunto de registros asociados. Para superar este problema, Django construye una función apropiadamente llamada "búsqueda reversa" que puedes usar. El nombre de la función se construye convirtiendo a minúsculas el nombre del modelo donde la `ForeignKey` fue declarada, seguido por `_set` (así, la función creada en `Book` es `bookinstance_set()`).
 
-> **Nota:** Aquí usamos `all()` para obtener todos los registros (la opción por defecto). A pesar de que puedes usar el método `filter()` para obtener un subconjunto de registros en el código, no puedes hacerlo directamente en las plantillas porque no puedes especificar argumentos para las funciones.
+> [!NOTE]
+> Aquí usamos `all()` para obtener todos los registros (la opción por defecto). A pesar de que puedes usar el método `filter()` para obtener un subconjunto de registros en el código, no puedes hacerlo directamente en las plantillas porque no puedes especificar argumentos para las funciones.
 >
 > Ten también cuidado de que si no defines un orden (en tu vista o modelo basado en clases), verás errores arrojados por el servidor de dearrollo como este:
 >
@@ -560,7 +570,8 @@ Este método es necesario porque has declarado un campo `ForeignKey` (uno-a-much
 
 En este punto deberíamos haber creado todo lo necesario para desplegar tanto la lista de libros como las páginas de detalles de libros. Ejecuta el servidor (`python3 manage.py runserver`) y dirígete en tu navegador a `http://127.0.0.1:8000/`.
 
-> **Advertencia:** No hagas click aún en ningún enlace de autor o de detalles de autores — ¡los crearás en el reto!
+> [!WARNING]
+> No hagas click aún en ningún enlace de autor o de detalles de autores — ¡los crearás en el reto!
 
 Haz click en el enlace **Todos los libros** para desplegar la lista de libros.
 
@@ -639,7 +650,7 @@ El reto en este artículo es crear las vistas de lista y detalle para autores, q
 
 El código requerido para los mapeadores URL y las vistas debería ser virtualmente idéntico a las vistas de lista y detalle para `Book` que creamos arriba. Las plantillas serán diferentes, pero tendrán un comportamiento similar.
 
-> **Nota:**
+> [!NOTE]
 >
 > - Una vez que has creado el mapeador URL para la página de lista de autores, necesitarás también actualizar el enlace **Todos los autores** en la plantilla base. Sigue el [mismo proceso](#update_the_base_template) que hicimos cuando actualizamos el enlace **Todos los libros**.
 > - Una vez que has creado el mapeador URL para la página de detalle de autores, deberías también actualizar la [plantilla de vista de detalle de libros](#creating_the_detail_view_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**) de modo que el enlace de autor apunte a tu nueva página de detalle de autor (en lugar de ser una URL vacía). La línea cambiará para añadir la etiqueta de plantilla que se muestra en negrita abajo.
diff --git a/files/es/learn/server-side/django/home_page/index.md b/files/es/learn/server-side/django/home_page/index.md
index 3da1d87a9b715f..49c4a3f312fadf 100644
--- a/files/es/learn/server-side/django/home_page/index.md
+++ b/files/es/learn/server-side/django/home_page/index.md
@@ -67,7 +67,8 @@ La tres primeras URLs son usadas para listar el índice, los libros y autores. E
 
 En contraste las 2 URLs finales son usadas para mostrar información detallada sobre un libro o autor específico — estas codifican la identidad de los ítemes a mostrar en la URL (mostrado arriba como `<id>`). El mapeador URL puede extraer la información codificada y pasársela a la vista, donde se detarminará que información extraer de la base de datos. Al codificar la información en nuestra URL solo necesitamos un mapeador de URL, una vista, y un plantilla para manejar cada libro (o autor).
 
-> **Nota:** Django te permite construir tus URLs de cualquier forma que quieras — puedes codificar información en el cuerpo de la URL como se muestra arriba o usando la obtención de parámetros `GET` de la URL(e.j. `/book/?id=6`). Culquier enfoque que uses, las URLs deben mantenerse limpias, lógicas y legibles ([observa el consejo del W3C aquí](https://www.w3.org/Provider/Style/URI)).
+> [!NOTE]
+> Django te permite construir tus URLs de cualquier forma que quieras — puedes codificar información en el cuerpo de la URL como se muestra arriba o usando la obtención de parámetros `GET` de la URL(e.j. `/book/?id=6`). Culquier enfoque que uses, las URLs deben mantenerse limpias, lógicas y legibles ([observa el consejo del W3C aquí](https://www.w3.org/Provider/Style/URI)).
 >
 > La documentación Django tiende a recomendar la codificación de información en el cuerpo de la URL, una práctica que ellos creen que promueve mejores diseños de URL.
 
@@ -77,7 +78,8 @@ Como discutimos en la introducción, el resto de este articulo describe como con
 
 La primera página que crearemos será la página index (`catalog/`). Esto desplegará un pequeño HTML estático, junto con algunos "contadores" calculados de diferentes registros en la base de datos. Para hacer este trabajo tendremos que crear un mapeador URL, una vista y una plantilla.
 
-> **Nota:** Vale la pena prestar un poco de atención extra en esta sección. La mayoría del contenido es común para todas las páginas.
+> [!NOTE]
+> Vale la pena prestar un poco de atención extra en esta sección. La mayoría del contenido es común para todas las páginas.
 
 ### Mapeador URL
 
@@ -93,7 +95,8 @@ urlpatterns = [
 
 Esta función `path()` define una cadena vacía (`''`), y una función vista que será llamada si el patrón es detectado (`views.index` — una función llamada `index()` en **views.py**). Hablaremos un poco más sobre los patrones URL más adelante en este tutorial, pero para este caso todo lo que necesitas saber es que en un patron de `''` coincidirá con una cadena vacía.
 
-> **Nota:** Nota que en **/locallibrary/locallibrary/urls.py**
+> [!NOTE]
+> Nota que en **/locallibrary/locallibrary/urls.py**
 >
 > ```py
 > urlpatterns += [
@@ -111,7 +114,8 @@ La función `path()` también especifica un parámetro `name`, que identifica de
 <a href="{% url 'index' %}">Home</a>.
 ```
 
-> **Nota:** Por su puesto podemos codificar a fuerza bruta el link anterior (e.j. `<a href="/catalog/">Home</a>`), pero entonces si cambiamos el patrón para nuestra página de inicio (e.j. a `/catalog/index`) la plantilla no podrá seguir enlazando correctamente. Usar un mapeador de url es mucho más flexible y robusto!
+> [!NOTE]
+> Por su puesto podemos codificar a fuerza bruta el link anterior (e.j. `<a href="/catalog/">Home</a>`), pero entonces si cambiamos el patrón para nuestra página de inicio (e.j. a `/catalog/index`) la plantilla no podrá seguir enlazando correctamente. Usar un mapeador de url es mucho más flexible y robusto!
 
 ### Vista (basada-en-funciones)
 
@@ -159,7 +163,8 @@ Hablaremos más sobre la plantilla y la variable de contexto en la siguiente sec
 
 Una plantilla es un archivo de texto que determina la estructura o diseño de un archivo (como una página HTML), con marcadores usados para representar el contenido real. Django automaticamente buscará plantillas en un directorio llamado '**templates**' de su aplicación. Así por ejemplo, en la vista índice que acabamos de agregar, la función `render()` esperará poder encontrar el archivo **/locallibrary/catalog/templates/_index.html_**, y entregará un error si el archivo no puede ser encontrado. Puede ver esto si guarda los cambios anteriores y vuelve a su navegador — accediendo a `127.0.0.1:8000` ahora le entregará un mensaje de error bastante intuitivo "TemplateDoesNotExist at /catalog/", más otros detalles.
 
-> **Nota:** Django buscará en una serie de lugares por plantillas, basandose en su archivo de configuraciones de proyectos (buscar en su aplicación instalada es una configuración por defecto!). Puede encontrar más sobre como Django encuentra plantillas y qué formatos de plantillas soporta [Templates](https://docs.djangoproject.com/en/1.10/topics/templates/) (Django docs).
+> [!NOTE]
+> Django buscará en una serie de lugares por plantillas, basandose en su archivo de configuraciones de proyectos (buscar en su aplicación instalada es una configuración por defecto!). Puede encontrar más sobre como Django encuentra plantillas y qué formatos de plantillas soporta [Templates](https://docs.djangoproject.com/en/1.10/topics/templates/) (Django docs).
 
 #### Plantillas extendidas
 
@@ -167,7 +172,8 @@ La plantilla índice va a necesitar marcado HTML estándar para la cabecera y el
 
 Por ejemplo, un plantilla base **base_generic.html** podría verse como el texto de abajo. Como puedes ver, este contiene algo de HTML "común" y secciones para el título, barra lateral, y contendio marcados usando las etiquetas de plantillas llamadas `block` y `endblock` (mostradas en negrita). Los bloques pueden estar vacíos, o tener contenido que será usado "por defecto" para páginas derivadas.
 
-> **Nota:** Las etiquetas de plantilla son como funciones que puede usar en una plantilla para recorrer listas, realizar operaciones condicionales basadas en el valor de una variable, etc. Además de las etiquetas de plantilla, la sintaxis de plantilla te permite referenciar variables de plantilla (que son pasadas en la plantilla desde la vista) y usar _filtros de plantilla_, que reformatean las variables (por ejemplo, establecer una cadena en minúsculas).
+> [!NOTE]
+> Las etiquetas de plantilla son como funciones que puede usar en una plantilla para recorrer listas, realizar operaciones condicionales basadas en el valor de una variable, etc. Además de las etiquetas de plantilla, la sintaxis de plantilla te permite referenciar variables de plantilla (que son pasadas en la plantilla desde la vista) y usar _filtros de plantilla_, que reformatean las variables (por ejemplo, establecer una cadena en minúsculas).
 
 ```django
 <!DOCTYPE html>
@@ -200,7 +206,8 @@ Por ejemplo, el fragmento de código que sigue muestra como usar la etiqueta de
 
 La plantilla base que pensamos usar para el siito web _LocalLibrary_ se muestra abajo. Como puedes ver, contiene algo de HTML y bloques definidos para `title`, `sidebar` y `content`. Tenemos un título por defecto (que podríamos querer cambiar) y una barra lateral por defecto con enlaces a listas de todos los libros y autores (que probablemente no querramos cambiar, pero hemos dejado abierta la posibilidad de hacerlo si es necesario, poniéndolo en un bloque).
 
-> **Nota:** También introducimos dos etiquetas de plantilla adicionales: `url` y `load static`. Se discute sobre ellas en secciones posteriores.
+> [!NOTE]
+> También introducimos dos etiquetas de plantilla adicionales: `url` y `load static`. Se discute sobre ellas en secciones posteriores.
 
 Crea un nuevo archivo — **/locallibrary/catalog/templates/_base_generic.html_** — y pon en él el siguiente contenido:
 
@@ -284,7 +291,8 @@ Crea el archivo HTML **/locallibrary/catalog/templates/_index.html_** y pon en 
 
 En la sección _Dynamic content_ hemos declarado marcadores de posición (_variables de plantilla_) para la información que quisimos incluir desde la vista. Las variables se marcan usando la sintaxis de "doble corchete" o "llaves" (ver lo que está en negrita arriba).
 
-> **Nota:** Puedes reconocer fácilmente si estás trabajando con variables de plantilla o con etiquetas de plantilla (funciones) porque las variables tienen llaves dobles (`\{{ num_books }}`) mientras que las etiquetas están encerradas entre llaves simples con signos de porcentaje (`{% extends "base_generic.html" %}`).
+> [!NOTE]
+> Puedes reconocer fácilmente si estás trabajando con variables de plantilla o con etiquetas de plantilla (funciones) porque las variables tienen llaves dobles (`\{{ num_books }}`) mientras que las etiquetas están encerradas entre llaves simples con signos de porcentaje (`{% extends "base_generic.html" %}`).
 
 Lo importante de todo esto es que estas variables se nombran con las claves que enviamos dentro del diccionario `context` en la función `render()` de nuestra vista (mira abajo); estas variables serán reemplazadas por sus valores asociados cuando la plantilla sea renderizada.
 
@@ -315,7 +323,8 @@ Si quisieras podrías añadir una imagen a la página de forma similar. Por ejem
 <img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/>
 ```
 
-> **Nota:** Los cambios de arriba especifican dónde se localizan los archivos, pero Django no los sirve por defecto. Si bien habilitamos este servicio para el servidor web de desarrollo en el mapeador URL global (**/locallibrary/locallibrary/urls.py**) cuando [creamos el esqueleto del sitio web](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwiq2o-V3PXbAhVM0FMKHcNzAkcQFggnMAA&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fes%2Fdocs%2FLearn%2FServer-side%2FDjango%2Fskeleton_website&usg=AOvVaw2VIIkwGelK5OnECR-4u4sU), aún necesitarás configurar este servicio para producción. Hablaramos de esto más tarde.
+> [!NOTE]
+> Los cambios de arriba especifican dónde se localizan los archivos, pero Django no los sirve por defecto. Si bien habilitamos este servicio para el servidor web de desarrollo en el mapeador URL global (**/locallibrary/locallibrary/urls.py**) cuando [creamos el esqueleto del sitio web](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwiq2o-V3PXbAhVM0FMKHcNzAkcQFggnMAA&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fes%2Fdocs%2FLearn%2FServer-side%2FDjango%2Fskeleton_website&usg=AOvVaw2VIIkwGelK5OnECR-4u4sU), aún necesitarás configurar este servicio para producción. Hablaramos de esto más tarde.
 
 Para mayor información sobre el trabajo con archivos estáticos revisa [Managing static files](https://docs.djangoproject.com/en/1.10/howto/static-files/) (Django docs).
 
@@ -359,7 +368,8 @@ En este punto deberíamos haber creado todo lo necesario para desplegar la pági
 
 ![Index page for LocalLibrary website](index_page_ok.png)
 
-> **Nota:** Aún no podrás usar los enlaces **All books** y **All authors** porque las URLs, vistas y plantillas para dichas páginas no se han definido (al momento solo hemos insertado marcadores de posición para esos enlaces en la plantilla `base_generic.html`).
+> [!NOTE]
+> Aún no podrás usar los enlaces **All books** y **All authors** porque las URLs, vistas y plantillas para dichas páginas no se han definido (al momento solo hemos insertado marcadores de posición para esos enlaces en la plantilla `base_generic.html`).
 
 ## Rétate a tí mismo
 
diff --git a/files/es/learn/server-side/django/index.md b/files/es/learn/server-side/django/index.md
index 8a49451f675b69..ba09401e479ac6 100644
--- a/files/es/learn/server-side/django/index.md
+++ b/files/es/learn/server-side/django/index.md
@@ -13,7 +13,8 @@ Antes de comenzar este módulo no es necesario tener ningún conocimiento de Dja
 
 Se recomienda un conocimiento general de los conceptos de programación y [Python](/es/docs/Glossary/Python), pero no es esencial para entender los conceptos básicos
 
-> **Nota:** Python es uno de los lenguajes de programación más fáciles de leer y entender para los principiantes. Dicho esto, si desea comprender mejor este módulo, hay numerosos libros y tutoriales gratuitos disponibles en Internet (los nuevos programadores pueden querer ver la página de [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) en el wiki de python.org.
+> [!NOTE]
+> Python es uno de los lenguajes de programación más fáciles de leer y entender para los principiantes. Dicho esto, si desea comprender mejor este módulo, hay numerosos libros y tutoriales gratuitos disponibles en Internet (los nuevos programadores pueden querer ver la página de [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) en el wiki de python.org.
 
 ## Guías
 
diff --git a/files/es/learn/server-side/django/introduction/index.md b/files/es/learn/server-side/django/introduction/index.md
index 774970b2f14109..6e82ca53b0796c 100644
--- a/files/es/learn/server-side/django/introduction/index.md
+++ b/files/es/learn/server-side/django/introduction/index.md
@@ -68,7 +68,8 @@ Django fue desarrollado inicialmente entre 2003 y 2005 por un equipo que era res
 
 Django ha continuado creciendo y mejorando desde su primer hito, el lanzamiento de la versión (1.0) en septiembre de 2008, hasta el reciente lanzamiento de la versión 1.11 (2017). Cada lanzamiento ha añadido nuevas funcionalidades y solucionado errores, que van desde soporte de nuevos tipos de bases de datos, motores de plantillas, caching, hasta la adición de funciones genéricas y clases de visualización (que reducen la cantidad de código que los desarrolladores tiene que escribir para numerosas tareas de programación).
 
-> **Nota:** Consulte las [notas de lanzamiento](https://docs.djangoproject.com/en/1.10/releases/) en el sitio web de Django para ver qué ha cambiado en las versiones recientes y cúanto trabajo se lleva a cabo para mejorar Django.
+> [!NOTE]
+> Consulte las [notas de lanzamiento](https://docs.djangoproject.com/en/1.10/releases/) en el sitio web de Django para ver qué ha cambiado en las versiones recientes y cúanto trabajo se lleva a cabo para mejorar Django.
 
 Django es ahora un próspero proyecto colaborativo de código abierto, con miles de usuarios y contribuidores. Mientras que todavía presenta algunas características que reflejan su origen, Django ha evolucionado en un framework versátil que es capaz de desarrollar cualquier tipo de sitio web.
 
@@ -105,7 +106,8 @@ Las aplicaciones web de Django normalmente agrupan el código que gestiona cada
 - **Modelos (Models):** Los Modelos son objetos de Python que definen la estructura de los datos de una aplicación y proporcionan mecanismos para gestionar (añadir, modificar y borrar) y consultar registros en la base de datos.
 - **Plantillas (Templates):** una plantilla (template) es un fichero de texto que define la estructura o diagrama de otro fichero (tal como una página HTML), con marcadores de posición que se utilizan para representar el contenido real. Una _vista_ puede crear dinámicamente una página usando una plantilla, rellenandola con datos de un _modelo_. Una plantilla se puede usar para definir la estructura de cualquier tipo de fichero; ¡no tiene porqué ser HTML!
 
-> **Nota:** Django se refiere a este tipo de organización como arquitectura Modelo Vista Plantilla "Model View Template (MVT)". Tiene muchas similaridades con la arquitectura más familiar [Model View Controller](/es/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture).
+> [!NOTE]
+> Django se refiere a este tipo de organización como arquitectura Modelo Vista Plantilla "Model View Template (MVT)". Tiene muchas similaridades con la arquitectura más familiar [Model View Controller](/es/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture).
 
 Las secciones de más abajo te darán una idea de la pinta que tienen estas partes principales de una aplicación Django (entraremos en más detalles más adelante en el curso, una vez que hallamos configurado un entorno de desarrollo).
 
@@ -120,7 +122,8 @@ urlpatterns = [
 ]
 ```
 
-> **Nota:** Un poco de Python:
+> [!NOTE]
+> Un poco de Python:
 >
 > - El objeto `urlpatterns` es una lista de funciones `url()`. En Python, las listas se definen usando using corchetes. Los elementos se separan con comas y pueden tener una [coma colgante opcional](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). Por ejemplo: `[item1, item2, item3,]`.
 > - La extraña sintaxis de los patrones se conoce como _"expresión regular"_. ¡Hablaremos sobre ellas en un artículo posterior!.
@@ -143,7 +146,8 @@ def index(request):
     return HttpResponse('!Hola desde Django!')
 ```
 
-> **Nota:** Un poco de Python:
+> [!NOTE]
+> Un poco de Python:
 >
 > - [Módulos Python](https://docs.python.org/3/tutorial/modules.html) son "bibliotecas" de funciones, almacenadas en ficheros separados, que podríamos querer usar en nuestro código. Aquí importamos sólo el objeto `HttpResponse` desde el módulo `django.http` de manera que podamos usarlo en nuestra vista: `from django.http import HttpResponse`. Hay también otras formas de importar algunos o todos los objetos de un módulo.
 > - Las funciones se declaran usando la plabra clave `def` tal como se muestra arriba, con parámetros con nombre listados entre paréntesis después del nombre de la función; la línea entera termina con dos puntos. Fíjate como las líneas siguientes están todas ellas **indentadas**. La indentación es importante, ya que especifica que las líneas de código están dentro de ese bloque en particular (la indentación obligatoria es una característica clave de Python, y es una razón por la que el código de Python es tan fácil de leer.
@@ -173,7 +177,8 @@ class Team(models.Model):
     team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
 ```
 
-> **Nota:** Un poco de Python:
+> [!NOTE]
+> Un poco de Python:
 >
 > - Python soporta "programación orientada a objetos", un estilo de programación donde organizamos nuestro código en objetos, que incluyen datos relacionados y funciones para operar con los datos. Los objetos también pueden heredarse/extenderse/derivarse de otros objetos, permitiendo que se comparta un comportamiento común entre objetos relacionados. En Python usamos la palabra clave `class` para definir el "prototipo" de un objeto. Podemos crear múltiples _instancias_ específicas de ese tipo de objeto basado en el modelo especificado en la clase.
 >
diff --git a/files/es/learn/server-side/django/models/index.md b/files/es/learn/server-side/django/models/index.md
index bf1ea1f95226a1..162a1214d7b517 100644
--- a/files/es/learn/server-side/django/models/index.md
+++ b/files/es/learn/server-side/django/models/index.md
@@ -54,7 +54,8 @@ El diagrama también muestra las relaciones entre los modelos, incluida su _card
 
 ![LocalLibrary Model UML](local_library_model_uml.svg)
 
-> **Nota:** La siguiente sección proporciona un manual básico que explica cómo se definen y utilizan los modelos. Mientras lo lees, considera cómo construiremos cada uno de los modelos en el diagrama de arriba.
+> [!NOTE]
+> La siguiente sección proporciona un manual básico que explica cómo se definen y utilizan los modelos. Mientras lo lees, considera cómo construiremos cada uno de los modelos en el diagrama de arriba.
 
 ## Cartilla del Modelo
 
@@ -197,7 +198,8 @@ def get_absolute_url(self):
     return reverse('model-detail-view', args=[str(self.id)])
 ```
 
-> **Nota:** Asumiendo que usarás URLs tipo `/myapplication/mymodelname/2` para presentar registros individuales para tu modelo (donde "2" es el `id` de un registro en particular), necesitarás crear un mapeador URL para pasar la respuesta e id a la "vista detallada del modelo (model detail view)" (que hará el trabajo requerido para presentar el registro). La función `reverse()` de arriba es capaz de "invertir" tu mapeador url (llamado _'model-detail-view'_ en el caso de arriba) para crear una URL del formato correcto.
+> [!NOTE]
+> Asumiendo que usarás URLs tipo `/myapplication/mymodelname/2` para presentar registros individuales para tu modelo (donde "2" es el `id` de un registro en particular), necesitarás crear un mapeador URL para pasar la respuesta e id a la "vista detallada del modelo (model detail view)" (que hará el trabajo requerido para presentar el registro). La función `reverse()` de arriba es capaz de "invertir" tu mapeador url (llamado _'model-detail-view'_ en el caso de arriba) para crear una URL del formato correcto.
 >
 > Por supuesto para hacer este trabajo ¡tienes aún que escribir el mapeo URL, la vista y la plantilla!
 
@@ -219,7 +221,8 @@ a_record = MyModelName(my_field_name="Instancia #1")
 a_record.save()
 ```
 
-> **Nota:** Si no has declarado ningún campo como `primary_key`, al nuevo registro se le proporcionará una automáticamente, con el nombre de campo `id`. Puedes consultar este campo después de guardar el registro anterior y debería tener un valor de 1.
+> [!NOTE]
+> Si no has declarado ningún campo como `primary_key`, al nuevo registro se le proporcionará una automáticamente, con el nombre de campo `id`. Puedes consultar este campo después de guardar el registro anterior y debería tener un valor de 1.
 
 Puedes acceder a los campos de este nuevo registro usando la sintaxis de puntos y cambiar los valores. Tienes que llamar a `save()` para almacenar los valores modificados en la base de datos.
 
@@ -237,7 +240,8 @@ a_record.save()
 
 Puedes buscar registros que coincidan con un cierto criterio usando el atributo `objects` del modelo (proporcionado por la clase base).
 
-> **Nota:** Explicar cómo buscar registros usando un modelo y nombres de campo "abstractos" puede resultar un poco confuso. En la exposición de abajo nos referiremos a un modelo `Book` con campos `title` y `genre`, donde genre (género) es también un modelo con un solo campo `name`.
+> [!NOTE]
+> Explicar cómo buscar registros usando un modelo y nombres de campo "abstractos" puede resultar un poco confuso. En la exposición de abajo nos referiremos a un modelo `Book` con campos `title` y `genre`, donde genre (género) es también un modelo con un solo campo `name`.
 
 Podemos obtener todos los registros de un modelo como `QuerySet`, usando `objects.all()`. El `QuerySet` es un objeto iterable, significando que contiene un número de objetos por los que podemos iterar/hacer bucle.
 
@@ -260,7 +264,8 @@ En algunos casos, necesitarás filtrar por un campo que define una relación uno
 books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')  # Will match on: Fiction, Science fiction, non-fiction etc.
 ```
 
-> **Nota:** Puedes usar guiones bajos (\_\_) para navegar por tantos niveles de relaciones (`ForeignKey`/`ManyToManyField`) como quieras. Por ejemplo, un Book que tuviera diferentes "types", definidos usando una relación adicional "cover", podría tener un nombre de parámetro: `type__cover__name__exact='hard'.`
+> [!NOTE]
+> Puedes usar guiones bajos (\_\_) para navegar por tantos niveles de relaciones (`ForeignKey`/`ManyToManyField`) como quieras. Por ejemplo, un Book que tuviera diferentes "types", definidos usando una relación adicional "cover", podría tener un nombre de parámetro: `type__cover__name__exact='hard'.`
 
 Puedes hacer muchas más cosas con las consultas, incluyendo búsquedas hacia atrás de modelos relacionados, filtros encadenados, devolver un conjunto de valores más pequeño, etc. Para más información, puedes consultar [Elaborar consultas](https://docs.djangoproject.com/en/1.10/topics/db/queries/) (Django Docs).
 
@@ -389,7 +394,8 @@ Adicionalmente hemos declarado algunos tipos nuevos de campos:
 
 El patrón `__str__()` representa el objeto `BookInstance` usando una combinación de su id único y el título del `Book` asociado.
 
-> **Nota:** Un poco de Python:
+> [!NOTE]
+> Un poco de Python:
 >
 > El valor retornado por `__str__()` es una _cadena formateada_. Dentro de la cadena usamos `%s` para declarar "marcadores de posición". Después de la cadena ponemos `%` y después una tupla que contiene los valores que serán puestos en los marcadores de posición. Si solo tienes un marcador de posición entonces puedes omitir la tupla — e.j. `'Mi valor: %s' % variable.`
 >
diff --git a/files/es/learn/server-side/django/sessions/index.md b/files/es/learn/server-side/django/sessions/index.md
index 64da156ece3bd9..249e7844c342f0 100644
--- a/files/es/learn/server-side/django/sessions/index.md
+++ b/files/es/learn/server-side/django/sessions/index.md
@@ -67,7 +67,8 @@ El atributo `session` es un objeto tipo diccionario que puedes leer y escribir t
 
 Los fragmentos de código de abajo te muestran cómo puedes recuperar, establecer o eliminar información con la clave "`my_car`", asociada con la sesión actual (del navegador).
 
-> **Nota:** Una de las cosas grandiosas de Django es que no necesitas pensar sobre los mecanismos que relacionan la sesión con tu solicitud actual en tu vista. Si fuéramos a usar los fragmentos de abajo en nuestra vista, sabríamos que la información sobre `my_car` está asociada solo con el navegador que envió la solicitud.
+> [!NOTE]
+> Una de las cosas grandiosas de Django es que no necesitas pensar sobre los mecanismos que relacionan la sesión con tu solicitud actual en tu vista. Si fuéramos a usar los fragmentos de abajo en nuestra vista, sabríamos que la información sobre `my_car` está asociada solo con el navegador que envió la solicitud.
 
 ```python
 # Obtener un dato de la sesión por su clave (ej. 'my_car'), generando un KeyError si la clave no existe
@@ -105,7 +106,8 @@ request.session['my_car']['wheels'] = 'alloy'
 request.session.modified = True
 ```
 
-> **Nota:** Puedes cambiar el comportamiento para que el sitio actualice la base de datos y envíe la cookie en cada solicitud añádiendo `SESSION_SAVE_EVERY_REQUEST = True` a la configuración de tu proyecto (**locallibrary/locallibrary/settings.py**).
+> [!NOTE]
+> Puedes cambiar el comportamiento para que el sitio actualice la base de datos y envíe la cookie en cada solicitud añádiendo `SESSION_SAVE_EVERY_REQUEST = True` a la configuración de tu proyecto (**locallibrary/locallibrary/settings.py**).
 
 ## Ejemplo simple — obteniendo conteos de visitas
 
@@ -137,7 +139,8 @@ def index(request):
 
 Aquí primero obtenemos el valor de la clave de sesión `'num_visits'`, estableciendo el valor a 0 si no había sido establecido previamente. Cada vez que se recibe la solicitud, incrementamos el valor y lo guardamos de vuelta en la sesión (para la siguiente vez que el usuario visita la página). La variable `num_visits` se envía entonces a la plantilla en nuestra variable de contexto.
 
-> **Nota:** Aquí podríamos incluso revisar si el navegador soporta cookies (mira [Cómo usar sesiones](https://docs.djangoproject.com/en/1.10/topics/http/sessions/) para ejemplos) o diseñar nuestra UI de modo que no importe si el navegador soporta cookies o no.
+> [!NOTE]
+> Aquí podríamos incluso revisar si el navegador soporta cookies (mira [Cómo usar sesiones](https://docs.djangoproject.com/en/1.10/topics/http/sessions/) para ejemplos) o diseñar nuestra UI de modo que no importe si el navegador soporta cookies o no.
 
 Añade la línea que se ve al final del siguiente bloque a tu plantilla HTML principal (**/locallibrary/catalog/templates/index.html**) al final de la sección "Dynamic content" para desplegar la variable de contexto:
 
diff --git a/files/es/learn/server-side/django/skeleton_website/index.md b/files/es/learn/server-side/django/skeleton_website/index.md
index 7ed22c6cb7744c..f3c758600d151a 100644
--- a/files/es/learn/server-side/django/skeleton_website/index.md
+++ b/files/es/learn/server-side/django/skeleton_website/index.md
@@ -43,7 +43,8 @@ El proceso es sencillo:
 1. Usar la herramienta `django-admin` para crear la carpeta del proyecto, los ficheros de plantillas básicos y el script de gestión del proyecto (**manage.py**).
 2. Usar **manage.py** para crear una o más _aplicaciones_.
 
-   > **Nota:** Un sitio web puede consistir de una o más secciones, ej. sitio principal, blog, wiki, area de descargas, etc. Django te recomienda encarecidamente que desarrolles estos componentes como _aplicaciones_ separadas que podrían ser reutilizadas, si se desea, en otros proyectos.
+   > [!NOTE]
+   > Un sitio web puede consistir de una o más secciones, ej. sitio principal, blog, wiki, area de descargas, etc. Django te recomienda encarecidamente que desarrolles estos componentes como _aplicaciones_ separadas que podrían ser reutilizadas, si se desea, en otros proyectos.
 
 3. Registrar las nuevas aplicaciones para incluirlas en el proyecto.
 4. Conectar el mapeador url de cada aplicación.
@@ -102,7 +103,8 @@ A continuación, ejecuta el siguiente comando para crear la aplicación _catalog
 python3 manage.py startapp catalog
 ```
 
-> **Nota:** el comando de arriba es para Linux/Mac OS X. En Windows el comando debería ser: `py -3 manage.py startapp catalog`Si estás trabajando en Windows, reemplaza `python3` por `py -3` a lo largo de este módulo o simplemente python: `python manage.py startapp catalog`.
+> [!NOTE]
+> El comando de arriba es para Linux/Mac OS X. En Windows el comando debería ser: `py -3 manage.py startapp catalog`Si estás trabajando en Windows, reemplaza `python3` por `py -3` a lo largo de este módulo o simplemente python: `python manage.py startapp catalog`.
 
 La herramienta crea una nueva carpeta y la rellena con ficheros para las diferentes partes de la aplicación (mostradas en negrilla abajo). La mayoría de los ficheros se nombran de acuerdo a su propósito, para que sea má útil (ej. las vistas se deberán guardar en **views.py**, los Modelos en **models.py**, las pruebas en **tests.py**, la configuración del sitio de administración en **admin.py**, el registro de aplicaciones en **apps.py**) y contienen algo de código base mínimo para trabajar con los objetos asociados.
 
@@ -127,7 +129,8 @@ Además ahora tenemos:
 - Una carpeta _migrations_ que se utiliza para guardar las "migraciones"— ficheros que te permiten actualizar tus bases de datos a medida que modificas tus modelos.
 - **\_\_init\_\_.py** — Un fichero vacío creado aquí para que Django/Python reconozca la carpeta como un [Paquete Python](https://docs.python.org/3/tutorial/modules.html#packages) y te permita usar sus objetos dentro de otras partes del proyecto.
 
-> **Nota:** ¿Te has dado cuenta qué es lo que falta en la lista de ficheros de arriba? Si bien hay un lugar para que coloques tus vistas y modelos, no hay nada para que pongas los mapeos url, las plantillas y los ficheros estáticos. Te mostraremos cómo crearlos más adelante (éstos no se necesitan en todos los sitios web pero se necesitan en este ejemplo).
+> [!NOTE]
+> ¿Te has dado cuenta qué es lo que falta en la lista de ficheros de arriba? Si bien hay un lugar para que coloques tus vistas y modelos, no hay nada para que pongas los mapeos url, las plantillas y los ficheros estáticos. Te mostraremos cómo crearlos más adelante (éstos no se necesitan en todos los sitios web pero se necesitan en este ejemplo).
 
 ## Registro de la aplicación catalog
 
@@ -149,7 +152,8 @@ INSTALLED_APPS = [
 
 La nueva linea especifica el objeto de configuración de la aplicación (`CatalogConfig`) que se generó para tí en **/locallibrary/catalog/apps.py** cuando creaste la aplicación.
 
-> **Nota:** Te habrás fijado que hay ya un montón de otras `INSTALLED_APPS` (y `MIDDLEWARE`, más abajo en el fichero de ajustes). Éstas habilitan en soporte para el [Sitio de admistración Django](/es/docs/Learn/Server-side/Django/Admin_site) y como consecuencia el motón de la funcionalidad que usa (incluyendo sesiones, autenticación, etc).
+> [!NOTE]
+> Te habrás fijado que hay ya un montón de otras `INSTALLED_APPS` (y `MIDDLEWARE`, más abajo en el fichero de ajustes). Éstas habilitan en soporte para el [Sitio de admistración Django](/es/docs/Learn/Server-side/Django/Admin_site) y como consecuencia el motón de la funcionalidad que usa (incluyendo sesiones, autenticación, etc).
 
 ## Especificación de la base de datos
 
@@ -213,7 +217,8 @@ urlpatterns = [
 
 Los mapeos URL se gestionan a través de la variable `urlpatterns`, que es una _lista_ Python de funciones `path()`. Cada función `path()` o asocia un patrón URL a una _vista específica_, que se presentará cuando el patrón se empareja o con otra lista de código de comprobación de patrones URL (en este segundo caso, los patrones se convierten en la "URL base" de patrones definidos en el módulo destino). La lista `urlpatterns` define inicialmente una función que mapea todos los URLs con el patrón _admin/_ al módulo `admin.site.urls` , que contiene las definiciones de mapeos URL propios de la aplicación de Administración.
 
-> **Nota:** La ruta en `path()` es una cadena que define un patrón URL para emparejar. Esta cadena podría incluir una variable nombrada (entre paréntesis angulares), ej. `'catalog/<id>/'`. Este patrón emparejará con una URL como **/catalog/**_any_chars_**/** y pasará a la vista _any_chars_ como cadena asociada al parámetro de nombre `id`). Trataremos de los métodos de caminos y rutas de patrones más adelante en los últimos temas.
+> [!NOTE]
+> La ruta en `path()` es una cadena que define un patrón URL para emparejar. Esta cadena podría incluir una variable nombrada (entre paréntesis angulares), ej. `'catalog/<id>/'`. Este patrón emparejará con una URL como **/catalog/**_any_chars_**/** y pasará a la vista _any_chars_ como cadena asociada al parámetro de nombre `id`). Trataremos de los métodos de caminos y rutas de patrones más adelante en los últimos temas.
 
 Añade las lineas de abajo al final del fichero para añadir un nuevo elemento a la lista `urlpatterns`. Este nuevo elemento incluye un `path()` que redirige las peticiones con el patrón `catalog/` al módulo `catalog.urls` (el fichero con el URL relativo **/catalog/urls.py**).
 
@@ -261,7 +266,8 @@ from django.conf.urls.static import static
 urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 ```
 
-> **Nota:** Hay numerosas formas de extender la lista `urlpatterns` (arriba hemos añadido simplemente un nuevo elemento a la lista usando el operador `+=` para separar claramente el código antiguo y el nuevo). En vez de ello podríamos haber simplemente incluido este nuevo patrón de mapeo en la definición de la lista original:
+> [!NOTE]
+> Hay numerosas formas de extender la lista `urlpatterns` (arriba hemos añadido simplemente un nuevo elemento a la lista usando el operador `+=` para separar claramente el código antiguo y el nuevo). En vez de ello podríamos haber simplemente incluido este nuevo patrón de mapeo en la definición de la lista original:
 >
 > ```python
 > urlpatterns = [
@@ -303,19 +309,22 @@ python3 manage.py makemigrations
 python3 manage.py migrate
 ```
 
-> **Advertencia:** Necesitarás ejecutar los comandos de arriba cada vez que cambien tus modelos de una manera que afecte a la estructura de datos y necesite ser guardada (incluyendo tanto la adicción como la eliminación de modelos enteros o campos individuales).
+> [!WARNING]
+> Necesitarás ejecutar los comandos de arriba cada vez que cambien tus modelos de una manera que afecte a la estructura de datos y necesite ser guardada (incluyendo tanto la adicción como la eliminación de modelos enteros o campos individuales).
 
 El comando `makemigrations` _crea_ (pero no aplica) las migraciones para todas las aplicaciones instaladas en tu proyecto (también puedes especificar el nombre de una aplicación para ejecutar una migración para un sólo proyecto). Ésto te da la opoortunidad de comprobar el código para estas migraciones antes de que se apliquen — cuando seas un experto en Django ¡podrás elegir modificarlos ligeramente!
 
 El comando `migrate` aplica realmente las migraciones a tu base de datos (Django lleva la cuenta de cuáles han sido añadidas a la base de datos actual).
 
-> **Nota:** Mira en [Migrations](https://docs.djangoproject.com/en/2.0/topics/migrations/) (Django docs) para obtener información adicional sobre los comandos de migración menos usados.
+> [!NOTE]
+> Mira en [Migrations](https://docs.djangoproject.com/en/2.0/topics/migrations/) (Django docs) para obtener información adicional sobre los comandos de migración menos usados.
 
 ### Arrancando el sitio web
 
 Durante el desarrollo puedes probar el sitio web usando para servirlo el _servidor de desarrollo web_, y visualizádolo en tu explorador web local.
 
-> **Nota:** el servidor web de desarrollo no es robusto y sin suficientes prestaciones para su uso en producción, pero es una manera muy fácil de tener levantado y funcionando tu sitio web Django durante el desarrollo para hacerle una prueba rápida y conveniente. Por defecto servirá el sitio a tu computadora local (`http://127.0.0.1:8000/)`, pero puedes también especificar que se sirva a otras computdoras en tu red. Para más información ver [django-admin y manage.py: runserver](https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver) (Django docs).
+> [!NOTE]
+> El servidor web de desarrollo no es robusto y sin suficientes prestaciones para su uso en producción, pero es una manera muy fácil de tener levantado y funcionando tu sitio web Django durante el desarrollo para hacerle una prueba rápida y conveniente. Por defecto servirá el sitio a tu computadora local (`http://127.0.0.1:8000/)`, pero puedes también especificar que se sirva a otras computdoras en tu red. Para más información ver [django-admin y manage.py: runserver](https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver) (Django docs).
 
 Ejecuta el _servidor web de desarrollo_ llamando al comando `runserver` (en el mismo directorio donde está **manage.py**):
 
@@ -337,11 +346,13 @@ Una vez que el servidor está funcionando puedes ver el sitio navegando a `http:
 
 ¡No te preocupes! Esta página de error es lo esperado porque no tenemos ninguna página/url definidas en el módulo `catalogs.urls` (que es al que nos redirigimos cuando obtenemos la URL a la raíz del sitio).
 
-> **Nota:** La página superior demuestra una gran característica de Django— El registro de depuración automático. Cada vez que una página no pueda ser encontrada, o el código provoque un error cualquiera, se mostrará una pantalla de error con información útil. En este caso vemos que la URL que hemos suministrado no empareja con ninguno de nuestros patrones de URL (como los listados). El resgistro de depuración puede desconectarse durante la producción (cuando colocamos el sitio en vivo en la Web), en cuyo caso se servirá una página menos informativa pero más amigable.
+> [!NOTE]
+> La página superior demuestra una gran característica de Django— El registro de depuración automático. Cada vez que una página no pueda ser encontrada, o el código provoque un error cualquiera, se mostrará una pantalla de error con información útil. En este caso vemos que la URL que hemos suministrado no empareja con ninguno de nuestros patrones de URL (como los listados). El resgistro de depuración puede desconectarse durante la producción (cuando colocamos el sitio en vivo en la Web), en cuyo caso se servirá una página menos informativa pero más amigable.
 
 ¡En este punto ya sabemos que Django está funcionando!
 
-> **Nota:** Deberías volver a ejecutar las migraciones y volver a probar el sitio cada vez que hagas cambios significativos. ¡No lleva tanto tiempo!
+> [!NOTE]
+> Deberías volver a ejecutar las migraciones y volver a probar el sitio cada vez que hagas cambios significativos. ¡No lleva tanto tiempo!
 
 ## Desafíate a tí mismo
 
diff --git a/files/es/learn/server-side/django/testing/index.md b/files/es/learn/server-side/django/testing/index.md
index d6399891abf419..cdd9609c32e4cf 100644
--- a/files/es/learn/server-side/django/testing/index.md
+++ b/files/es/learn/server-side/django/testing/index.md
@@ -50,7 +50,8 @@ Hay numeroso tipos, niveles y clasificaciones de pruebas y enfoques de pruebas.
 - Pruebas de integración
   - : Verifica cómo funcionan los grupos de componentes cuando se usan juntos. Las pruebas de integración son conscientes de las interacciones requeridas entre componentes, pero no necesariamente de las operaciones internas de cada componente. Pueden cubrir agrupaciones simples de componentes hasta todo el sitio web.
 
-> **Nota:** Otros tipos comunes de pruebas incluyen pruebas de caja negra, caja blanca, manuales, automatizadas, canarias, de humo, de conformidad, de aceptación, funcionales, de rendimiento, de carga y de esfuerzo. Búscalos para más información.
+> [!NOTE]
+> Otros tipos comunes de pruebas incluyen pruebas de caja negra, caja blanca, manuales, automatizadas, canarias, de humo, de conformidad, de aceptación, funcionales, de rendimiento, de carga y de esfuerzo. Búscalos para más información.
 
 ### Que provee Django para pruebas?
 
@@ -80,7 +81,8 @@ class YourTestClass(TestCase):
 
 La mejor clase base para la mayoría de las pruebas es [django.test.TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase). Esta clase de prueba crea una base de datos limpia antes de que se ejecuten sus pruebas y ejecuta cada función de prueba en su propia transacción. La clase también posee una prueba [Client](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client) que puede utilizar para simular la interacción de un usuario con el código en el nivel de vista. En las siguientes secciones, nos concentraremos en las pruebas unitarias, creadas con esta clase [TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase)
 
-> **Nota:** La clase [django.test.TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase) es muy conveniente, pero puede resultar en que algunas pruebas sean más lentas de lo necesario (no todas las pruebas necesitarán configurar su propia base de datos o simular la interacción de la vista). Una vez que esté familiarizado con lo que puede hacer con esta clase, es posible que desee reemplazar algunas de sus pruebas con las clases de prueba más simples disponibles.
+> [!NOTE]
+> La clase [django.test.TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase) es muy conveniente, pero puede resultar en que algunas pruebas sean más lentas de lo necesario (no todas las pruebas necesitarán configurar su propia base de datos o simular la interacción de la vista). Una vez que esté familiarizado con lo que puede hacer con esta clase, es posible que desee reemplazar algunas de sus pruebas con las clases de prueba más simples disponibles.
 
 ### Que deberias probar?
 
@@ -106,7 +108,8 @@ class Author(models.Model):
 
 Del mismo modo, debe verificar que los métodos personalizados `get_absolute_url()` y `__str__()` comportarse como sea necesario porque son su código / lógica empresarial. En el caso de `get_absolute_url()` puedes confiar en que el metodo de Django `reverse()` se ha implementado correctamente, por lo que lo que está probando es que la vista asociada se haya definido realmente.
 
-> **Nota:** Los lectores astutos pueden notar que también querríamos restringir la fecha de nacimiento y muerte a valores sensibles, y comprobar que la muerte viene después del nacimiento. En Django, esta restricción se agregaría a sus clases de formulario (aunque puede definir validadores para los campos, estos parecen usarse solo en el nivel del formulario, no en el nivel del modelo).
+> [!NOTE]
+> Los lectores astutos pueden notar que también querríamos restringir la fecha de nacimiento y muerte a valores sensibles, y comprobar que la muerte viene después del nacimiento. En Django, esta restricción se agregaría a sus clases de formulario (aunque puede definir validadores para los campos, estos parecen usarse solo en el nivel del formulario, no en el nivel del modelo).
 
 Con eso en mente, comencemos a ver cómo definir y ejecutar pruebas.
 
@@ -127,7 +130,8 @@ catalog/
 
 Cree una estructura de archivo como se muestra arriba en su proyecto _LocalLibrary_. El **\_\_init\_\_.py** debe ser un archivo vacío (esto le dice a Python que el directorio es un paquete). Puede crear los tres archivos de prueba copiando y cambiando el nombre del archivo de prueba de esqueleto **/catalog/tests.py**.
 
-> **Nota:** El archivo de prueba **/catalog/tests.py** se creó automáticamente cuando creamos el sitio web esqueleto de Django ( [built the Django skeleton website)](/es/docs/Learn/Server-side/Django/skeleton_website). Es perfectamente "legal" poner todas sus pruebas dentro de él, pero si prueba correctamente, rápidamente terminará con un archivo de prueba muy grande e inmanejable.Elimina el archivo esqueleto ya que no lo necesitaremos.
+> [!NOTE]
+> El archivo de prueba **/catalog/tests.py** se creó automáticamente cuando creamos el sitio web esqueleto de Django ( [built the Django skeleton website)](/es/docs/Learn/Server-side/Django/skeleton_website). Es perfectamente "legal" poner todas sus pruebas dentro de él, pero si prueba correctamente, rápidamente terminará con un archivo de prueba muy grande e inmanejable.Elimina el archivo esqueleto ya que no lo necesitaremos.
 
 Abre el archivo **/catalog/tests/test_models.py**. El archivo debe importar `django.test.TestCase`, como se muestra:
 
@@ -171,13 +175,15 @@ La nueva clase define dos métodos que puede utilizar para la configuración pre
 - `setUpTestData()` se llama una vez al comienzo de la ejecución de prueba para la configuración a nivel de clase. Usaría esto para crear objetos que no se modificarán ni cambiarán en ninguno de los métodos de prueba.
 - `setUp()` se llama antes de cada función de prueba para configurar cualquier objeto que pueda ser modificado por la prueba (cada función de prueba obtendrá una versión "nueva" de estos objetos).
 
-> **Nota:** Las clases de prueba también tienen un metodo `tearDown()` que no hemos utilizado. Este método no es particularmente útil para las pruebas de bases de datos, ya que `TestCase` la clase base se encarga del desmontaje de la base de datos por usted.
+> [!NOTE]
+> Las clases de prueba también tienen un metodo `tearDown()` que no hemos utilizado. Este método no es particularmente útil para las pruebas de bases de datos, ya que `TestCase` la clase base se encarga del desmontaje de la base de datos por usted.
 
 Debajo de ellos tenemos una serie de métodos de prueba, que utilizamos funciones `Assert` toprobar si las condiciones son verdaderas, falsas o iguales (`AssertTrue`, `AssertFalse`, `AssertEqual`). Si la condición no se evalúa como se esperaba, la prueba fallará y reportará el error a su consola.
 
 Los `AssertTrue`, `AssertFalse`, `AssertEqual` son afirmaciones estándar proporcionadas por **unittest**. Hay otras aserciones estándar en el marco y también aserciones específicas de Django ([Django-specific assertions](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#assertions)) para probar si una vista redirecciona (`assertRedirects`),para probar si se ha utilizado una plantilla en particular (`assertTemplateUsed`), etc.
 
-> **Nota:** Normalmente no debería incluir funciones print() en sus pruebas como se muestra arriba. Lo hacemos aquí solo para que pueda ver el orden en que se llaman las funciones de configuración en la consola (en la siguiente sección).
+> [!NOTE]
+> Normalmente no debería incluir funciones print() en sus pruebas como se muestra arriba. Lo hacemos aquí solo para que pueda ver el orden en que se llaman las funciones de configuración en la consola (en la siguiente sección).
 
 ## Como correr las pruebas
 
@@ -189,7 +195,8 @@ python3 manage.py test
 
 Esto descubrirá todos los archivos nombrados con el patrón **test\*.py** bajo el directorio actual y ejecute todas las pruebas definidas usando las clases base apropiadas (aquí tenemos una serie de archivos de prueba, pero solo **/catalog/tests/test_models.py** contiene actualmente cualquier prueba). De forma predeterminada, las pruebas informarán individualmente solo sobre las fallas de las pruebas, seguidas de un resumen de la prueba.
 
-> **Nota:** Si recibe errores similares a: `ValueError: Missing staticfiles manifest entry ...` esto puede deberse a que las pruebas no ejecutan collectstatic de forma predeterminada y su aplicación usa una clase de almacenamiento que lo requiere (consulte manifest_strict para obtener más información). Hay varias formas de superar este problema; la más fácil es simplemente ejecutar collectstatic antes de ejecutar las pruebas:
+> [!NOTE]
+> Si recibe errores similares a: `ValueError: Missing staticfiles manifest entry ...` esto puede deberse a que las pruebas no ejecutan collectstatic de forma predeterminada y su aplicación usa una clase de almacenamiento que lo requiere (consulte manifest_strict para obtener más información). Hay varias formas de superar este problema; la más fácil es simplemente ejecutar collectstatic antes de ejecutar las pruebas:
 >
 > ```bash
 > python3 manage.py collectstatic
@@ -226,7 +233,8 @@ Destroying test database for alias 'default'...
 
 Aquí vemos que tuvimos una falla de prueba, y podemos ver exactamente qué función falló y por qué (se espera esta falla, porque `False` no es `True`!).
 
-> **Nota:** Sugerencia: Lo más importante que debe aprender del resultado de la prueba anterior es que es mucho más valioso si usa nombres descriptivos / informativos para sus objetos y métodos.
+> [!NOTE]
+> Sugerencia: Lo más importante que debe aprender del resultado de la prueba anterior es que es mucho más valioso si usa nombres descriptivos / informativos para sus objetos y métodos.
 
 El texto que se muestra en **negritas** anterior normalmente no aparecería en la salida de prueba (esto es generado por la funcion `print()` en nuestra prueba). Esto muestra el metodo `setUpTestData()` es llamado una vez para la clase y `setUp()`se llama antes de cada método.
 
@@ -257,7 +265,8 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one
 
 Ahora que sabemos cómo ejecutar nuestras pruebas y qué tipo de cosas necesitamos probar, veamos algunos ejemplos prácticos.
 
-> **Nota:** No escribiremos todas las pruebas posibles, pero esto debería darle una idea de cómo funcionan las pruebas y qué más puede hacer.
+> [!NOTE]
+> No escribiremos todas las pruebas posibles, pero esto debería darle una idea de cómo funcionan las pruebas y qué más puede hacer.
 
 ### Modelos
 
@@ -336,7 +345,8 @@ Las cosas interesantes a tener en cuenta son:
 - No podemos obtener `verbose_name` directamente usando `author.first_name.verbose_name`, porque `author.first_name` es una _cadena_ (no un identificador del objeto `first_name` que podemos usar para acceder a sus propiedades). En su lugar, necesitamos usar el atributo `_meta` del autor para obtener una instancia del campo y usarlo para consultar la información adicional.
 - Elegimos usar `assertEquals(field_label,'first name')` en lugar de `assertTrue(field_label == 'first name')`. La razón de esto es que si la prueba falla, la salida de la primera le dice cuál era realmente la etiqueta, lo que facilita un poco la depuración del problema.
 
-> **Nota:** Se han omitido las pruebas para las etiquetas `last_name` y `date_of_birth`, y también la prueba para la longitud del campo `last_name`. Agregue sus propias versiones ahora, siguiendo las convenciones de nomenclatura y los enfoques que se muestran arriba.
+> [!NOTE]
+> Se han omitido las pruebas para las etiquetas `last_name` y `date_of_birth`, y también la prueba para la longitud del campo `last_name`. Agregue sus propias versiones ahora, siguiendo las convenciones de nomenclatura y los enfoques que se muestran arriba.
 
 También necesitamos probar nuestros métodos personalizados. Básicamente, estos simplemente verifican que el nombre del objeto se construyó como esperábamos usando el formato "Apellido", "Nombre", y que la URL que obtenemos para un elemento `Autor` es como esperábamos.
 
@@ -370,7 +380,8 @@ AssertionError: 'Died' != 'died'
 
 Este es un error muy pequeño, pero resalta cómo las pruebas de escritura pueden verificar más a fondo cualquier suposición que haya hecho.
 
-> **Nota:** Cambie la etiqueta del campo `date_of_death` (/catalog/models.py) a "died" y vuelva a ejecutar las pruebas.
+> [!NOTE]
+> Cambie la etiqueta del campo `date_of_death` (/catalog/models.py) a "died" y vuelva a ejecutar las pruebas.
 
 Los patrones para probar los otros modelos son similares, por lo que no continuaremos discutiéndolos más. Siéntase libre de crear sus propias pruebas para nuestros otros modelos.
 
@@ -453,7 +464,8 @@ Las dos primeras funciones prueban que los campos `label` y `help_text` son los
 
 El resto de las funciones prueban que el formulario es válido para fechas de renovación justo dentro del rango aceptable e inválido para valores fuera del rango. Tenga en cuenta cómo construimos valores de fecha de prueba alrededor de nuestra fecha actual (`datetime.date.today()`) usando `datetime.timedelta()` (en este caso especificando un número de días o semanas). Luego simplemente creamos el formulario, pasamos nuestros datos y probamos si es válido.
 
-> **Nota:** Aquí en realidad no usamos la base de datos o el cliente de prueba. Considere modificar estas pruebas para usar [SimpleTestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.SimpleTestCase). También debemos validar que se generen los errores correctos si el formulario no es válido, sin embargo, esto generalmente se hace como parte del procesamiento de la vista, por lo que nos ocuparemos de eso en la siguiente sección.
+> [!NOTE]
+> Aquí en realidad no usamos la base de datos o el cliente de prueba. Considere modificar estas pruebas para usar [SimpleTestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.SimpleTestCase). También debemos validar que se generen los errores correctos si el formulario no es válido, sin embargo, esto generalmente se hace como parte del procesamiento de la vista, por lo que nos ocuparemos de eso en la siguiente sección.
 
 Eso es todo por los formularios; tenemos algunos otros, pero son creados automáticamente por nuestras vistas de edición genéricas basadas en clases, ¡y deben probarse allí! ¡Ejecute las pruebas y confirme que nuestro código aún pasa!
 
@@ -552,7 +564,8 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
 
 Agregue el siguiente código de prueba a **/catalog/tests/test_views.py**. Aquí primero usamos `SetUp()` para crear algunas cuentas de inicio de sesión de usuario y objetos `BookInstance` (junto con sus libros asociados y otros registros) que usaremos más adelante en las pruebas. Cada usuario de prueba toma prestado la mitad de los libros, pero inicialmente hemos establecido el estado de todos los libros en "mantenimiento". Hemos usado `SetUp()` en lugar de `setUpTestData()` porque modificaremos algunos de estos objetos más adelante.
 
-> **Nota:** El siguiente código `setUp()` crea un libro con un `Language` específico, pero es posible que _su_ código no incluya el modelo `Language` ya que se creó como un _desafío_. Si este es el caso, simplemente comente las partes del código que crean o importan objetos de lenguaje. También debe hacer esto en la sección `RenewBookInstancesViewTest` que sigue.
+> [!NOTE]
+> El siguiente código `setUp()` crea un libro con un `Language` específico, pero es posible que _su_ código no incluya el modelo `Language` ya que se creó como un _desafío_. Si este es el caso, simplemente comente las partes del código que crean o importan objetos de lenguaje. También debe hacer esto en la sección `RenewBookInstancesViewTest` que sigue.
 
 ```python
 import datetime
@@ -822,7 +835,8 @@ La siguiente prueba (agregar esto también a la clase) verifica que la vista red
         self.assertRedirects(resp, reverse('all-borrowed') )
 ```
 
-> **Advertencia:** La vista _all-borrowed_ se agregó como un _desafío_ y, en su lugar, su código puede redirigir a la página de inicio '/'. Si es así, modifique las dos últimas líneas del código de prueba para que sea como el siguiente código. El `follow=True` en la solicitud asegura que la solicitud devuelve la URL de destino final (por lo tanto, verifica `/catalog/` en lugar de `/`).
+> [!WARNING]
+> La vista _all-borrowed_ se agregó como un _desafío_ y, en su lugar, su código puede redirigir a la página de inicio '/'. Si es así, modifique las dos últimas líneas del código de prueba para que sea como el siguiente código. El `follow=True` en la solicitud asegura que la solicitud devuelve la URL de destino final (por lo tanto, verifica `/catalog/` en lugar de `/`).
 >
 > ```python
 > resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True)
diff --git a/files/es/learn/server-side/express_nodejs/development_environment/index.md b/files/es/learn/server-side/express_nodejs/development_environment/index.md
index e422ca14222940..fd9e789d0ab070 100644
--- a/files/es/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/es/learn/server-side/express_nodejs/development_environment/index.md
@@ -39,7 +39,8 @@ _Node_ y el administrador de paquetes _NPM_ se instalan juntos desde paquetes bi
 
 _NPM_ puede ser usado también para (globalmente) instalar el Generador de Aplicaciones de _Express_, una herramienta manual para crear la estructura de las web apps de _Express_ que siguen el [patrón MVC](/es/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture). El generador de aplicaciones es opcional porque no necesita utilizar esta herramienta para crear apps que usan Express, o construir apps Express que tienen el mismo diseño arquitectónico o dependencias. No obstante estaremos usandolo, porque hace mucho más fácil, y promueve una estrucura modular de aplicación.
 
-> **Nota:** A diferencia de otros frameworks web , el ambiente de desarrollo no incluye un servidor web independiente. Una aplicación web _Node_/_Express_ crea y ejecuta su propio servidor web!
+> [!NOTE]
+> A diferencia de otros frameworks web , el ambiente de desarrollo no incluye un servidor web independiente. Una aplicación web _Node_/_Express_ crea y ejecuta su propio servidor web!
 
 Hay otras herramientas periféricas que son parte de un ambiente de desarrollo típico, incluyendo [editores de texto](/es/docs/Learn/Common_questions/Available_text_editors) o IDEs para edición de código, y herramientas de administración de control de fuentes como [Git](https://git-scm.com/) para administrar con seguridad diferentes versiones de su codigo. Asumimos que usted ya tiene instaladas esta clase de herramientas (en particular un editor de texto).
 
@@ -65,7 +66,8 @@ Otras dependencias, tales como los controladores de bases de datos, motores de p
 
 Para poder utilizar _Express_ primero tiene que instalar _Nodejs_ y el [Administrador de Paquetes de Node (NPM)](https://docs.npmjs.com/) en su sistema operativo. Las siguientes secciones explican la forma más fácil de instalar la versión Soporte de Largo-Plazo (SLP) de Nodejs en Ubuntu Linux 16.04, macOS, y Windows 10.
 
-> **Nota:** Las secciones de abajo muestran la forma más facil de instalar _Node_ y _NPM_ en nuestras plataformas de sistemas operativo a elegir. Si esta utilizando otro SO o solo quiere ver alguna de otros enfoques para las plataformas actuales entonce vea [Instalando Node.js via administrador de paquetes](https://nodejs.org/en/download/package-manager/) (nodejs.org).
+> [!NOTE]
+> Las secciones de abajo muestran la forma más facil de instalar _Node_ y _NPM_ en nuestras plataformas de sistemas operativo a elegir. Si esta utilizando otro SO o solo quiere ver alguna de otros enfoques para las plataformas actuales entonce vea [Instalando Node.js via administrador de paquetes](https://nodejs.org/en/download/package-manager/) (nodejs.org).
 
 ### macOS y Windows
 
@@ -87,7 +89,8 @@ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
 sudo apt-get install -y nodejs
 ```
 
-> **Advertencia:** No instale directamente desde los repositorios normales de Ubuntu porque pueden contener versions muy antiguas de Node.
+> [!WARNING]
+> No instale directamente desde los repositorios normales de Ubuntu porque pueden contener versions muy antiguas de Node.
 
 ### Probar su instalación de Nodejs y NPM
 
@@ -131,7 +134,8 @@ Como una prueba un poco más emocionante creemos un muy básico "básico servido
 
    El código importa el módulo "http" y lo usa para crear un servidor (`createServer()`) que escucha las solicitudes HTTP en el puerto 3000. Luego, el script imprime un mensaje en la consola con la URL del navegador puede usar para probar el servidor. La función `createServer()` toma como argumento una función callback que se invocará cuando se reciba una solicitud HTTP — esto simplemente devuelve una respuesta con un código de estado HTTP de 200 ("OK") y el texto sin formato "Hello World".
 
-   > **Nota:** ¡No se preocupe si aún no comprende exactamente lo que está haciendo este código! ¡Explicaremos nuestro código con mayor detalle una vez que comencemos a usar Express!
+   > [!NOTE]
+   > ¡No se preocupe si aún no comprende exactamente lo que está haciendo este código! ¡Explicaremos nuestro código con mayor detalle una vez que comencemos a usar Express!
 
 2. Inicie el servidor navegando en el mismo directorio que su archivo `hellonode.js` en su símbolo del sistema, y llamando a `node` junto con el nombre del script, así:
 
@@ -146,7 +150,8 @@ Como una prueba un poco más emocionante creemos un muy básico "básico servido
 
 Junto al propio node, [NPM](https://docs.npmjs.com/) es la herramienta más importante para trabajar con aplicaciones de node. NPM se usa para obtener los paquetes (bibliotecas de JavaScript) que una aplicación necesita para el desarrollo, las pruebas y/o la producción, y también se puede usar para ejecutar pruebas y herramientas utilizadas en el proceso de desarrollo.
 
-> **Nota:** Desde la perspectiva de Node, Express es solo otro paquete que necesita instalar usando NPM y luego requerir en su propio código.
+> [!NOTE]
+> Desde la perspectiva de Node, Express es solo otro paquete que necesita instalar usando NPM y luego requerir en su propio código.
 
 Se puede usar NPM manualmente para buscar por separado cada paquete necesario. Por lo general, administramos las dependencias utilizando un archivo de definición de texto plano llamado [package.json](https://docs.npmjs.com/files/package.json). Este archivo enumera todas las dependencias para un "paquete" de JavaScript específico, incluido el nombre del paquete, la versión, la descripción, el archivo inicial a ejecutar, las dependencias de producción, las dependencias de desarrollo, las versiones de Node con las que puede trabajar, etc. El archivo package.json debería contener todo lo que NPM necesita para buscar y ejecutar su aplicación (si estuviera escribiendo una biblioteca reutilizable, podría usar esta definición para cargar su paquete en el repositorio npm y ponerlo a disposición de otros usuarios).
 
@@ -154,7 +159,8 @@ Se puede usar NPM manualmente para buscar por separado cada paquete necesario. P
 
 Los siguientes pasos muestran cómo puede usar NPM para descargar un paquete, guardarlo en las dependencias del proyecto y luego requerirlo en una aplicación Node.
 
-> **Nota:** Aquí mostramos las instrucciones para buscar e instalar el paquete _Express_. Más adelante mostraremos cómo este paquete y otros ya están especificados para nosotros utilizando el _Generador de aplicaciones Express_. Esta sección se proporciona porque es útil para comprender cómo funciona NPM y qué está creando el generador de aplicaciones.
+> [!NOTE]
+> Aquí mostramos las instrucciones para buscar e instalar el paquete _Express_. Más adelante mostraremos cómo este paquete y otros ya están especificados para nosotros utilizando el _Generador de aplicaciones Express_. Esta sección se proporciona porque es útil para comprender cómo funciona NPM y qué está creando el generador de aplicaciones.
 
 1. Primero cree un directorio para su nueva aplicación y acceda a él:
 
@@ -253,13 +259,15 @@ La siguiente entrada se agregaría al **paquete.json** de su aplicación:
   }
 ```
 
-> **Nota:** "[Linters](<https://en.wikipedia.org/wiki/Lint_(software)>)" son herramientas que realizan análisis estáticos en el software para reconocer e informar la adhesión / no adhesión a algún conjunto de mejores prácticas de codificación.
+> [!NOTE]
+> "[Linters](<https://en.wikipedia.org/wiki/Lint_(software)>)" son herramientas que realizan análisis estáticos en el software para reconocer e informar la adhesión / no adhesión a algún conjunto de mejores prácticas de codificación.
 
 ### Ejecutando tareas
 
 Además de definir y buscar dependencias, también puede definir scripts con nombre en sus archivos package.json y llamar a NPM para ejecutarlos con el comando [run-script](https://docs.npmjs.com/cli/run-script). Este enfoque se usa comúnmente para automatizar las pruebas en ejecución y partes de la cadena de herramientas de desarrollo o construcción (por ejemplo, ejecutar herramientas para minimizar JavaScript, reducir imágenes, LINT/analizar su código, etc.).
 
-> **Nota:** Los ejecutadores de tareas como [Gulp](http://gulpjs.com/) y [Grunt](http://gruntjs.com/) también se pueden usar para ejecutar pruebas y otras herramientas externas.
+> [!NOTE]
+> Los ejecutadores de tareas como [Gulp](http://gulpjs.com/) y [Grunt](http://gruntjs.com/) también se pueden usar para ejecutar pruebas y otras herramientas externas.
 
 Por ejemplo, para definir un script para ejecutar la dependencia de desarrollo de _eslint_ que especificamos en la sección anterior, podríamos agregar el siguiente bloque de script a nuestro archivo **package.json** (suponiendo que el origen de nuestra aplicación esté en una carpeta /src/js):
 
@@ -297,7 +305,8 @@ Para crear una aplicación _Express_ llamada "helloworld" con la configuración
 express helloworld
 ```
 
-> **Nota:** También puede especificar la biblioteca de plantillas para usar y una serie de otras configuraciones. Use el comando `--help` para ver todas las opciones:
+> [!NOTE]
+> También puede especificar la biblioteca de plantillas para usar y una serie de otras configuraciones. Use el comando `--help` para ver todas las opciones:
 >
 > ```
 > express --help
@@ -305,7 +314,8 @@ express helloworld
 
 NPM creará la nueva aplicación Express en una subcarpeta de su ubicación actual, mostrando el progreso de la compilación en la consola. Al finalizar, la herramienta mostrará los comandos que necesita ingresar para instalar las dependencias de Node e iniciar la aplicación.
 
-> **Nota:** La nueva aplicación tendrá un archivo **package.json** en su directorio raíz. Puede abrir esto para ver qué dependencias están instaladas, incluidas Express y la biblioteca de plantillas Jade:
+> [!NOTE]
+> La nueva aplicación tendrá un archivo **package.json** en su directorio raíz. Puede abrir esto para ver qué dependencias están instaladas, incluidas Express y la biblioteca de plantillas Jade:
 >
 > ```json
 > {
diff --git a/files/es/learn/server-side/express_nodejs/index.md b/files/es/learn/server-side/express_nodejs/index.md
index c97ff4976b0cbf..ce17f8ca2353fb 100644
--- a/files/es/learn/server-side/express_nodejs/index.md
+++ b/files/es/learn/server-side/express_nodejs/index.md
@@ -11,7 +11,8 @@ Express es un framework web transigente, escrito en JavaScript y alojado dentro
 
 Antes de empezar con este módulo necesitaras entender los conceptos de programación web en el lado del servidor y los frameworks, de preferencia leyendo acerca de estos temas en nuestro modulo [Primeros pasos en la programación web del lado del servidor](/es/docs/Learn/Server-side/First_steps). Un conocimiento general de conceptos de programación y JavaScript es altamente recomendado, pero no esencial para entender los conceptos básicos.
 
-> **Nota:** Esta web posee muchos recursos útiles para aprender JavaScript _en el contexto del desarrollo en el lado del cliente:_ [JavaScript](/es/docs/Web/JavaScript), [Guía de JavaScript](/es/docs/Web/JavaScript/Guide), [JavaScript Básico](/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/es/docs/Learn/JavaScript) (aprendizaje). El lenguaje JavaScript y sus conceptos son los mismos para el desarrollo en el lado del servidor en NodeJS y este material será relevante. NodeJS ofrece [APIs adicionales](https://nodejs.org/dist/latest-v6.x/docs/api/) para soportar funcionalidades que son útiles en entornos sin navegador web, por ejemplo para crear servidores HTTP y acceder al sistema de archivos, pero no soportan APIs de JavaScript para trabajar con el navegador y el DOM.
+> [!NOTE]
+> Esta web posee muchos recursos útiles para aprender JavaScript _en el contexto del desarrollo en el lado del cliente:_ [JavaScript](/es/docs/Web/JavaScript), [Guía de JavaScript](/es/docs/Web/JavaScript/Guide), [JavaScript Básico](/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/es/docs/Learn/JavaScript) (aprendizaje). El lenguaje JavaScript y sus conceptos son los mismos para el desarrollo en el lado del servidor en NodeJS y este material será relevante. NodeJS ofrece [APIs adicionales](https://nodejs.org/dist/latest-v6.x/docs/api/) para soportar funcionalidades que son útiles en entornos sin navegador web, por ejemplo para crear servidores HTTP y acceder al sistema de archivos, pero no soportan APIs de JavaScript para trabajar con el navegador y el DOM.
 >
 > Esta guía proporciona información útil para trabajar con Node.js y Express, además hay numerosos y excelentes recursos en Internet y en libros - algunos de estos referenciados en [Cómo empezar con Node.js](http://stackoverflow.com/a/5511507/894359) (Inglés - StackOverflow) y [¿Cuáles son los mejores recursos para aprender Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?) (Inglés - Quora).
 
diff --git a/files/es/learn/server-side/express_nodejs/introduction/index.md b/files/es/learn/server-side/express_nodejs/introduction/index.md
index d03be6c7e8a109..b9a600044298fc 100644
--- a/files/es/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/es/learn/server-side/express_nodejs/introduction/index.md
@@ -84,7 +84,8 @@ Otras tareas comunes de desarrollo web no están directamente soportadas por el
 
 A pesar de que _Express_ es en sí mismo bastante minimalista, los desarrolladores han creado paquetes de middleware compatibles para abordar casi cualquier problema de desarrollo web. Hay librerías para trabajar con cookies, sesiones, inicios de sesión de usuario, parámetros URL, datos `POST`, cabeceras de seguridad y _muchos_ más. Puedes encontrar una lista de paquetes middleware mantenida por el equipo de Express en [Express Middleware](https://expressjs.com/es/resources/middleware.html) (junto con una lista de algunos de los paquetes más populares de terceros).
 
-> **Nota:** esta flexibilidad es una espada de doble filo. Hay paquetes de middleware para abordar casi cualquier problema o requerimiento, pero deducir cuáles son los paquetes adecuados a usar algunas veces puede ser un auténtico reto. Tampoco hay una "forma correcta" de estructurar una aplicación, y muchos ejemplos que puedes encontrar en la Internet no son óptimos, o sólo muestran una pequeña parte de lo que necesitas hacer para desarrollar una aplicación web.
+> [!NOTE]
+> Esta flexibilidad es una espada de doble filo. Hay paquetes de middleware para abordar casi cualquier problema o requerimiento, pero deducir cuáles son los paquetes adecuados a usar algunas veces puede ser un auténtico reto. Tampoco hay una "forma correcta" de estructurar una aplicación, y muchos ejemplos que puedes encontrar en la Internet no son óptimos, o sólo muestran una pequeña parte de lo que necesitas hacer para desarrollar una aplicación web.
 
 ## ¿Dónde comenzó?
 
@@ -122,7 +123,8 @@ En las siguientes secciones, se explican algunos puntos comunes que se pueden en
 
 Primero consideremos el tradicional ejemplo de [Hola Mundo!](https://expressjs.com/en/starter/hello-world.html) (se comentará cada parte a continuación).
 
-> **Nota:** Si tiene _Node_ y _Express_ instalado (o piensa instalarlos posteriormente) puede guardar este código en un archivo llamado **app.js** y ejecutarlo posteriormente en la linea de comandos invocándolo mediante: `node app.js`.
+> [!NOTE]
+> Si tiene _Node_ y _Express_ instalado (o piensa instalarlos posteriormente) puede guardar este código en un archivo llamado **app.js** y ejecutarlo posteriormente en la linea de comandos invocándolo mediante: `node app.js`.
 
 ```js
 var express = require("express");
@@ -158,7 +160,8 @@ var app = express();
 
 También podemos crear nuestros propios módulos que puedan posteriormente ser importados de la misma manera.
 
-> **Nota:** Usted puede desear crear sus propios módulos, esto le permitirá organizar su código en partes más administrables; una aplicación que reside en un solo archivo es difícil de entender y manejar.El utilizar módulos independientes también le permite administrar el espacio de nombres, de esta manera unicamente las variables que exporte explícitamente son importadas cuando utilice un módulo.
+> [!NOTE]
+> Usted puede desear crear sus propios módulos, esto le permitirá organizar su código en partes más administrables; una aplicación que reside en un solo archivo es difícil de entender y manejar.El utilizar módulos independientes también le permite administrar el espacio de nombres, de esta manera unicamente las variables que exporte explícitamente son importadas cuando utilice un módulo.
 
 Para hacer que los objetos esten disponibles fuera de un modulo, solamente es necesario asignarlos al objeto `exports`. Por ejemplo, el modulo mostrado a continuación **square.js** es un archivo que exporta los métodos `area()` y `perimeter()` :
 
@@ -180,7 +183,8 @@ var square = require("./square");
 console.log("El área de un cuadrado con lado de 4 es " + square.area(4));
 ```
 
-> **Nota:** Usted también puede especificar una ruta absoluta a la ubicación del módulo (o un nombre como se realizó inicialmente).
+> [!NOTE]
+> Usted también puede especificar una ruta absoluta a la ubicación del módulo (o un nombre como se realizó inicialmente).
 
 Si usted desea exportar completamente un objeto en una asignación en lugar de construir cada propiedad por separado, debe asignarlo al módulo `module.exports` como se muestra a continuación (también puede hacer esto al inicio de un constructor o de otra función.)
 
@@ -220,9 +224,11 @@ Usar APIs asíncronas sin bloques es aun mas importante en _Node_ que en el nave
 
 Hay muchas maneras para una API asincrónica de notificar a su aplicación que se ha completado. La manera mas común es registrar una función callback cuando usted invoca a una API asincrónica, la misma será llamada de vuelta cuando la operación se complete. Éste es el enfoque utilizado anteriormente.
 
-> **Nota:** Usar "callbacks" puede ser un poco enmarañado si usted tiene una secuencia de operaciones asíncronas dependientes que deben ser llevadas a cabo en orden, porque esto resulta en múltiples niveles de "callbacks" anidadas. Este problema es comúnmente conocido como "callback hell" (callback del infierno). Este problema puede ser reducido con buenas practicas de código (vea <http://callbackhell.com/>), usando un modulo como [async](https://www.npmjs.com/package/async), o incluso avanzando a características de ES6 como las [promesas](/es/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+> [!NOTE]
+> Usar "callbacks" puede ser un poco enmarañado si usted tiene una secuencia de operaciones asíncronas dependientes que deben ser llevadas a cabo en orden, porque esto resulta en múltiples niveles de "callbacks" anidadas. Este problema es comúnmente conocido como "callback hell" (callback del infierno). Este problema puede ser reducido con buenas practicas de código (vea <http://callbackhell.com/>), usando un modulo como [async](https://www.npmjs.com/package/async), o incluso avanzando a características de ES6 como las [promesas](/es/docs/Web/JavaScript/Reference/Global_Objects/Promise).
 
-> **Nota:** Una convención común para _Node_ y _Express_ es usar callbacks de error primero. En esta convención el primer valor en su función callback es un error, mientras que los argumentos subsecuentes contienen datos correctos. Hay una buena explicación de porque este enfoque es útil en este blog: [The Node.js Way - Understanding Error-First Callbacks](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js) (fredkschott.com).
+> [!NOTE]
+> Una convención común para _Node_ y _Express_ es usar callbacks de error primero. En esta convención el primer valor en su función callback es un error, mientras que los argumentos subsecuentes contienen datos correctos. Hay una buena explicación de porque este enfoque es útil en este blog: [The Node.js Way - Understanding Error-First Callbacks](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js) (fredkschott.com).
 
 ### Creando manejadores de rutas
 
@@ -236,7 +242,8 @@ app.get("/", function (req, res) {
 
 La función callback toma una petición y una respuesta como argumentos. En este caso el método simplemente llama a [`send()`](https://expressjs.com/en/4x/api.html#res.send) en la respuesta para retornar la cadena "Hello World!". Hay un [número de otros métodos de respuesta](https://expressjs.com/en/guide/routing.html#response-methods) para finalizar el ciclo de solicitud/respuesta, por ejemplo podrá llamar a [`res.json()`](https://expressjs.com/en/4x/api.html#res.json) para enviar una respuesta JSON o [`res.sendFile()`](https://expressjs.com/en/4x/api.html#res.sendFile) para enviar un archivo.
 
-> **Nota:** Usted puede utilizar cualquier nombre que quiera para los argumentos en las funciones callback; cuando la callback es invocada el primer argumento siempre sera la petición y el segundo siempre sera la respuesta. Tiene sentido nombrarlos de manera que pueda identificar el objeto con el que esta trabajando en el cuerpo de la callback.
+> [!NOTE]
+> Usted puede utilizar cualquier nombre que quiera para los argumentos en las funciones callback; cuando la callback es invocada el primer argumento siempre sera la petición y el segundo siempre sera la respuesta. Tiene sentido nombrarlos de manera que pueda identificar el objeto con el que esta trabajando en el cuerpo de la callback.
 
 El objeto que representa una aplicación de _Express_, también posee métodos para definir los manejadores de rutas para el resto de los verbos HTTP: `post()`, `put()`, `delete()`, `options()`, `trace()`, `copy()`, `lock()`, `mkcol()`, `move()`, `purge()`, `propfind()`, `proppatch()`, `unlock()`, `report()`, `mkactivity()`, `checkout()`, `merge()`, `m-search()`, `notify()`, `subscribe()`, `unsubscribe()`, `patch()`, `search()`, y `connect()`.
 
@@ -272,7 +279,8 @@ router.get("/about", function (req, res) {
 module.exports = router;
 ```
 
-> **Nota:** Agregar rutas al objeto `Router` es como agregar rutas al objeto `app` (como se vio anteriormente).
+> [!NOTE]
+> Agregar rutas al objeto `Router` es como agregar rutas al objeto `app` (como se vio anteriormente).
 
 Para usar el router en nuestro archivo app principal, necesitamos `require()` el módulo de rutas (**wiki.js**), entonces llame `use()` en la aplicación _Express_ para agregar el Router al software intermediario que maneja las rutas. Las dos rutas serán accesibles entonces desde `/wiki/` y `/wiki/about/`.
 
@@ -288,7 +296,8 @@ Le mostraremos mucho más sobre como trabajar con rutas, y en particular, acerca
 
 El "middleware" es ampliamente utilizado en las aplicaciones de _Express:_ desde tareas para servir archivos estáticos, a la gestión de errores o la compresión de las respuestas HTTP. Mientras las funciones de enrutamiento, con el objeto [express.Router](http://expressjs.com/en/guide/routing.html#express-router), se encargan del ciclo petición-respuesta, al gestionar la respuesta adecuada al cliente, las funciones de middleware normalmente realizan alguna operación al gestionar una petición o respuesta y a continuación llaman a la siguiente función en la "pila", que puede ser otra función de middleware u otra función de enrutamiento. El orden en el que las funciones de middleware son llamadas depende del desarrollador de la aplicación.
 
-> **Nota:** El middleware puede realizar cualquier operación: hacer cambios a una petición, ejecutar código, realizar cambios a la petición o al objeto pedido, puede también finalizar el ciclo de petición-respuesta. Si no finaliza el ciclo debe llamar a la función `next()` para pasar el control de la ejecución a la siguiente función del middleware ( o a la petición quedaría esperando una respuesta ... ).
+> [!NOTE]
+> El middleware puede realizar cualquier operación: hacer cambios a una petición, ejecutar código, realizar cambios a la petición o al objeto pedido, puede también finalizar el ciclo de petición-respuesta. Si no finaliza el ciclo debe llamar a la función `next()` para pasar el control de la ejecución a la siguiente función del middleware ( o a la petición quedaría esperando una respuesta ... ).
 
 La mayoría de las aplicaciones usan middleware desarrollado por terceras partes, para simplificar funciones habituales en el desarrollo web, como puede ser: gestión de cookies, sesiones, autentificado de usuarios, peticiones `POST` y datos en JSON, registros de eventos, etc. Puede encontrar en el siguiente enlace una [lista de middleware mantenido por el equipo de _Express_](http://expressjs.com/en/resources/middleware.html) (que también incluye otros paquetes populares de terceras partes). Las librerías de _Express_ están disponibles con la aplicación NPM (Node Package Manager).
 
@@ -308,7 +317,8 @@ app.use(logger('dev'));
 ...
 ```
 
-> **Nota:** Las funciones Middleware y routing son llamadas en el orden que son declaradas. Para algunos middleware el orden es importante (por ejemplo si el middleware de sesion depende del middleware de cookie, entonces el manejador de cookie tiene que ser llamado antes). Casi siempre es el caso que el middleware es llamado antes de configurar las rutas, o tu manejador de rutas no tendra acceso a la funcionalidad agregada por tu middleware.
+> [!NOTE]
+> Las funciones Middleware y routing son llamadas en el orden que son declaradas. Para algunos middleware el orden es importante (por ejemplo si el middleware de sesion depende del middleware de cookie, entonces el manejador de cookie tiene que ser llamado antes). Casi siempre es el caso que el middleware es llamado antes de configurar las rutas, o tu manejador de rutas no tendra acceso a la funcionalidad agregada por tu middleware.
 
 Tu puedes escribir tu propia funcion middleware, y si quieres hacerlo así (solo para crear código de manejo de error). La única diferencia entre una función middleware y un callback manejador de rutas es que las funciones middleware tienen un tercer argumento `next`, cuyas funciones middleware son esperadas para llamarlas si ellas no completan el ciclo request (cuando la función midleware es llamada, esta contiene la próxima función que debe ser llamada).
 
@@ -338,7 +348,8 @@ app.get("/", a_middleware_function);
 app.listen(3000);
 ```
 
-> **Nota:** Arriba declaramos la función middleware separadamente y la configuramos como el callback. En nuestra función previous manejadora de ruta declaramos la función callback cuando esta fué usada. En JavaScript, cualquier aproximación es válida.
+> [!NOTE]
+> Arriba declaramos la función middleware separadamente y la configuramos como el callback. En nuestra función previous manejadora de ruta declaramos la función callback cuando esta fué usada. En JavaScript, cualquier aproximación es válida.
 
 La documentación Express tiene mucha mas documentación excelente acerca del uso y escritura de middleware Express.
 
@@ -397,9 +408,11 @@ Estas pueden devolver cualquier contenido, pero deben ser llamadas despues de to
 
 Express viene con un manejador de error integrado, el que se ocupa de error remanente que pudiera ser encontrado en la app. Esta función middleware manejador de error esta agregada al final del stack de funciones middleware. Si pasa un error a `next()` y no lo maneja en un manejador de error, este sera manejado por el manejador de error integrado; el error sera escrito en el cliente con el rastreo de pila.
 
-> **Nota:** El rastreo de pila no esta incluido en el ambiente de producción. Para ejecutarlo en modo de producción necesita configurar la variable de ambiente `NODE_ENV` to '`production'`.
+> [!NOTE]
+> El rastreo de pila no esta incluido en el ambiente de producción. Para ejecutarlo en modo de producción necesita configurar la variable de ambiente `NODE_ENV` to '`production'`.
 
-> **Nota:** HTTP404 y otros codigos de estatus de "error" no son tratados como errores. Si quiere manejar estos, puede agregar una función middleware para hacerlo. Para mas información vea las [FAQ](http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses).
+> [!NOTE]
+> HTTP404 y otros codigos de estatus de "error" no son tratados como errores. Si quiere manejar estos, puede agregar una función middleware para hacerlo. Para mas información vea las [FAQ](http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses).
 
 Para mayor información vea Manejo de error (Docs. Express).
 
diff --git a/files/es/learn/server-side/express_nodejs/skeleton_website/index.md b/files/es/learn/server-side/express_nodejs/skeleton_website/index.md
index 8ff6f3cc883618..32ef87898f86f3 100644
--- a/files/es/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/es/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -36,7 +36,8 @@ Este artículo muestra cómo puede crear un sitio web "esqueleto" usando la herr
 
 Las siguientes secciones muestran como puede llamar al generador de aplicaciones, y proporcionan una pequeña explicación sobre las diferentes opciones para vistas y CSS. También explicaremos como está estructurado el esqueleto del sitio web. Al final, mostraremos como puede ejecutar el sitio web para verificar que funciona.
 
-> **Nota:** El _Generador de Aplicaciones Express_ no es el único generador para aplicaciones Express, y el proyecto generado no es la única forma viable para estructurar sus archivos y directorios. El sitio generado, sin embargo, tiene una estructura modular que es fácil de extender y comprender. Para informacion sobre una _mínima_ aplicación Express, vea el [Ejemplo Hello world](https://expressjs.com/en/starter/hello-world.html) (Express docs).
+> [!NOTE]
+> El _Generador de Aplicaciones Express_ no es el único generador para aplicaciones Express, y el proyecto generado no es la única forma viable para estructurar sus archivos y directorios. El sitio generado, sin embargo, tiene una estructura modular que es fácil de extender y comprender. Para informacion sobre una _mínima_ aplicación Express, vea el [Ejemplo Hello world](https://expressjs.com/en/starter/hello-world.html) (Express docs).
 
 ## Usando el generador de aplicaciones
 
@@ -75,13 +76,15 @@ express
 
 También puede seleccionar el motor de plantillas para las vistas usando `--view` y/o un motor generador de CSS usando `--css`.
 
-> **Nota:** Las otras opciones para elegir motores de plantillas (e.g. `--hogan`, `--ejs`, `--hbs` etc.) están descontinuadas. Use `--view` (o bien `-v`)!
+> [!NOTE]
+> Las otras opciones para elegir motores de plantillas (e.g. `--hogan`, `--ejs`, `--hbs` etc.) están descontinuadas. Use `--view` (o bien `-v`)!
 
 ### ¿Cuál motor de vistas debo usar?
 
 El _Generador de Aplicaciones Express_ le permite configurar un número de populares motores de plantillas, incluyendo [EJS](https://www.npmjs.com/package/ejs), [Hbs](http://github.com/donpark/hbs), [Pug](https://pugjs.org/api/getting-started.html) (Jade), [Twig](https://www.npmjs.com/package/twig), y [Vash](https://www.npmjs.com/package/vash), aunque si no se especifica una opcion de vista, selecciona Jade por defecto. Express puede soportar un gran número de motores de plantillas [aquí una lista](https://github.com/expressjs/express/wiki#template-engines).
 
-> **Nota:** Si quiere usar un motor de plantillas que no es soportado por el generador entonces vea el artículo [Usando motores de plantillas con Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs) y la documentación de su motor de plantillas.
+> [!NOTE]
+> Si quiere usar un motor de plantillas que no es soportado por el generador entonces vea el artículo [Usando motores de plantillas con Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs) y la documentación de su motor de plantillas.
 
 Generalmente hablando debe seleccionar un motor de plantillas que le brinde toda la funcionalidad que necesite y le permita ser productivo rápidamente — o en otras palabras, en la misma forma en que selecciona cualquier otro componente. Alguna de las cosas a considerar cuando se comparan motores de plantillas:
 
@@ -99,7 +102,8 @@ Generalmente hablando debe seleccionar un motor de plantillas que le brinde toda
   - Soporte para operaciones asincrónas y de transmisión.
   - Pueden ser usadas tanto en el cliente como en el servidor. Si un motor de plantillas puede ser usado del lado del cliente esto da la posibilidad de servir datos y tener todo o la mayoría del renderizado del lado del cliente.
 
-> **Nota:** En Internet hay muchos recursos que le ayudarán a comparar diferentes opciones.
+> [!NOTE]
+> En Internet hay muchos recursos que le ayudarán a comparar diferentes opciones.
 
 Para este proyecto usaremos el motor de plantillas [Pug](https://pugjs.org/api/getting-started.html) (este es el recientemente renombrado motor Jade), ya que es de los más populares lenguajes de plantillas Express/JavaScript y es soportado por el generador por defecto.
 
@@ -107,7 +111,8 @@ Para este proyecto usaremos el motor de plantillas [Pug](https://pugjs.org/api/g
 
 El _Generador de Aplicaciones Express_ le permite crear un proyecto que puede usar los más comunes motores de hojas de estilos CSS: [LESS](http://lesscss.org/), [SASS](http://sass-lang.com/), [Compass](http://compass-style.org/), [Stylus](http://stylus-lang.com/).
 
-> **Nota:** CSS tiene algunas limitaciones que dificultan ciertas tareas. Los motores de hojas de estilos CSS le permiten usar una sintaxis más poderosa para definir su CSS, y luego compilar la definición en texto plano para su uso en los navegadores .
+> [!NOTE]
+> CSS tiene algunas limitaciones que dificultan ciertas tareas. Los motores de hojas de estilos CSS le permiten usar una sintaxis más poderosa para definir su CSS, y luego compilar la definición en texto plano para su uso en los navegadores .
 
 Como los motores de plantillas, debería usar el motor CSS que le permita a su equipo ser más productivo. Para este proyecto usaremos CSS ordinario (opción por defecto) ya que nuestros requerimientos no son lo suficientemente complicados para justificar el uso de un motor CSS.
 
@@ -190,7 +195,8 @@ Debería ver una página parecida a esta:
 
 Tiene una aplicación Express funcional, ejecutandose en _localhost:3000_.
 
-> **Nota:** También podría ejecutar la app usando el comando `npm start`. Especificado la variable DEBUG como se muestra habilita el logging/debugging por consola. Por ejemplo, cuando visite la página mostrada arriba verá la información de depuración como esta:
+> [!NOTE]
+> También podría ejecutar la app usando el comando `npm start`. Especificado la variable DEBUG como se muestra habilita el logging/debugging por consola. Por ejemplo, cuando visite la página mostrada arriba verá la información de depuración como esta:
 >
 > ```bash
 > $ SET DEBUG=express-locallibrary-tutorial:* &#x26; npm start
@@ -245,7 +251,8 @@ Ahora podemos iniciar el servidor casi exactamente como antes, pero especificand
   DEBUG=express-locallibrary-tutorial:* npm run devstart
   ```
 
-> **Nota:** Ahora si modifica cualquier archivo del proyecto el servidor se reiniciará (o lo puede reiniciar `rs` en la consola de comandos en cualquier momento). Aún necesitará recargar el navegador para refrescar la página.
+> [!NOTE]
+> Ahora si modifica cualquier archivo del proyecto el servidor se reiniciará (o lo puede reiniciar `rs` en la consola de comandos en cualquier momento). Aún necesitará recargar el navegador para refrescar la página.
 >
 > Ahora tendremos que llamar "`npm run <nombre del script>`" en vez de `npm start`, porque "start" es actualmente un comando NPM que es mapeado al nombre del script. Podríamos haber reemplazado el comando en el script _start_ pero sólo queremos usar _nodemon_ durante el desarrollo, así que tiene sentido crear un nuevo script para este comando.
 
@@ -375,7 +382,8 @@ var index = require("./routes/index");
 var users = require("./routes/users");
 ```
 
-> **Nota:** En este punto, acabamos de importar el módulo; aún no hemos utilizado sus rutas (esto sucede un poco más abajo en el archivo).
+> [!NOTE]
+> En este punto, acabamos de importar el módulo; aún no hemos utilizado sus rutas (esto sucede un poco más abajo en el archivo).
 
 Next we create the `app` object using our imported _express_ module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First we set the '`views`' value to specify the folder where the templates will be stored (in this case the sub folder **/views**). Then we set the '`view engine`' value to specify the template library (in this case "pug").
 
@@ -406,7 +414,8 @@ app.use("/", index);
 app.use("/users", users);
 ```
 
-> **Nota:** The paths specified above ('/' and '`/users'`) are treated as a prefix to routes defined in the imported files. So for example if the imported **users** module defines a route for `/profile`, you would access that route at `/users/profile`. We'll talk more about routes in a later article.
+> [!NOTE]
+> The paths specified above ('/' and '`/users'`) are treated as a prefix to routes defined in the imported files. So for example if the imported **users** module defines a route for `/profile`, you would access that route at `/users/profile`. We'll talk more about routes in a later article.
 
 The last middleware in the file adds handler methods for errors and HTTP 404 responses.
 
@@ -454,7 +463,8 @@ module.exports = router;
 
 The route defines a callback that will be invoked whenever an HTTP `GET` request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('`/users`') plus whatever is defined in this file ('`/`'). In other words, this route will be used when an URL of `/users/` is received.
 
-> **Nota:** Try this out by running the server with node and visiting the URL in your browser: `http://localhost:3000/users/`. You should see a message: 'respond with a resource'.
+> [!NOTE]
+> Try this out by running the server with node and visiting the URL in your browser: `http://localhost:3000/users/`. You should see a message: 'respond with a resource'.
 
 One thing of interest above is that the callback function has the third argument '`next`', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the `next` argument, it may be useful in the future if you want to add multiple route handlers to the `'/'` route path.
 
diff --git a/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
index c082bb17f7fcf3..80df3fc406ad4a 100644
--- a/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -72,7 +72,8 @@ A medida que avance, le proporcionaremos los fragmentos de codigo adecuado para
 
 Si aun asi sigues atasaco, puedes encontrar la version completamente desarrollada del sitio web [en Github aqui](https://github.com/mdn/express-locallibrary-tutorial).
 
-> **Nota:** Las versiones especificas de node, Express, y los otros modulos con los que se probó esta documentación estan enumeradas en el projecto [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json).
+> [!NOTE]
+> Las versiones especificas de node, Express, y los otros modulos con los que se probó esta documentación estan enumeradas en el projecto [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json).
 
 ## Resumen
 
diff --git a/files/es/learn/server-side/first_steps/client-server_overview/index.md b/files/es/learn/server-side/first_steps/client-server_overview/index.md
index 1cd4162d15198c..054e8cc59d05ca 100644
--- a/files/es/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/es/learn/server-side/first_steps/client-server_overview/index.md
@@ -61,7 +61,8 @@ Los sitios web tanto estáticos como dinámicos (abordados en las secciones sigu
 
 Puedes realizar una petición `GET` simplemente pinchando sobre un enlace o buscando en un sitio (como la página inicial de un motor de búsquedas). Por ejemplo, la petición HTTP que se envía cuando realizas una búsqueda en MDN del término "visión general cliente servidor" se parecerá mucho al texto que se muestra más abajo (no será idéntica porque algunas partes del mensaje dependen de tu explorador/configuración).
 
-> **Nota:** El formato de los mensajes HTTP está definido en el "estándard web" ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). No necesitas conocer este nivel de detalle, pero al menos ¡ahora sabes de donde viene todo esto!
+> [!NOTE]
+> El formato de los mensajes HTTP está definido en el "estándard web" ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). No necesitas conocer este nivel de detalle, pero al menos ¡ahora sabes de donde viene todo esto!
 
 #### La petición
 
@@ -201,13 +202,15 @@ X-Cache-Info: not cacheable; request wasn't a GET or HEAD
 Content-Length: 0
 ```
 
-> **Nota:** Las repuestas y las peticiones HTTP mostradas en estos ejemplos fueron capturadas usando la aplicación [Fiddler](https://www.telerik.com/download/fiddler), pero puedes obtener información similar usando sniffers web (ej. <http://web-sniffer.net/>) o usando extensiones del explorador como [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/). Puedes probarlo por tí mismo. Usa una de las herramientas enlazadas, y a continuación navega a través de un sitio y edita información del perfil para ver las diferentes peticiones y respuestas. La mayoría de los exploradores modernos también tienen herramientas que monitorizan las peticiciones de red (Por ejemplo, la herramienta [Network Monitor](/es/docs/Tools/Network_Monitor) en Firefox).
+> [!NOTE]
+> Las repuestas y las peticiones HTTP mostradas en estos ejemplos fueron capturadas usando la aplicación [Fiddler](https://www.telerik.com/download/fiddler), pero puedes obtener información similar usando sniffers web (ej. <http://web-sniffer.net/>) o usando extensiones del explorador como [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/). Puedes probarlo por tí mismo. Usa una de las herramientas enlazadas, y a continuación navega a través de un sitio y edita información del perfil para ver las diferentes peticiones y respuestas. La mayoría de los exploradores modernos también tienen herramientas que monitorizan las peticiciones de red (Por ejemplo, la herramienta [Network Monitor](/es/docs/Tools/Network_Monitor) en Firefox).
 
 ## Sitios estáticos
 
 Un _sitio estático_ es aquél que devuelve desde el servidor el mismo contenido establecido de forma fija en el código cada vez que se solicita una página en particular. De manera que si por ejemplo tienes una página sobre un producto en `/static/myproduct1.html` , a todos los usuarios se les devolverá la misma página. Si añades otro producto similar a tu sitio necesitarás añadir otra página (ej. `myproduct2.html`) etc... Esto puede llegar a ser realmente muy poco eficiente — ¿qué sucede cuando alcanzas miles de páginas de productos? Repetirías un montón de código a lo largo de cada página (la plantilla básica de la página, la estructura, etc), y si quisieras cambiar cualquier cosa de la estructura de la página — como añadir una nueva sección de "productos relacionados" por ejemplo — tendrías que cambiar cada página individualmente.
 
-> **Nota:** Los sitios estáticos son excelentes cuando tienes un pequeño número de páginas y quieres enviar el mismo contenido a todos los usuarios. Sin embargo pueden tener un coste de mantenimiento significante a medida que es número de páginas se hace grande.
+> [!NOTE]
+> Los sitios estáticos son excelentes cuando tienes un pequeño número de páginas y quieres enviar el mismo contenido a todos los usuarios. Sin embargo pueden tener un coste de mantenimiento significante a medida que es número de páginas se hace grande.
 
 Recapitulemos cómo funciona ésto, mirando otra vez el diagrama de la arquitectura de un sitio estático que vimos en el anterior artículo.
 
@@ -283,7 +286,8 @@ urlpatterns = [
 ]
 ```
 
-> **Nota:** El primer parámetro en las funciones `url()` puede parecer un poco extraño (ej. `r'^junior/$'`) porque usan una técnica de emparejamiento de patrones llamada "expresiones regulares" ("regular expressions", RegEx, o RE). No necesitas saber cómo funcionan las expresiones regulares en este momento, tan sólo que nos permiten emparejar patrones en el URL (en vez de los valores insertados en el código de forma fija que veíamos más arriba) y los usan como parámetros en nuestras funciones de visualización. Como ejemplo, una RegEx simple podría decir "empareja una simple letra mayúscula, seguida de entre 4 y 7 letras minúsculas."
+> [!NOTE]
+> El primer parámetro en las funciones `url()` puede parecer un poco extraño (ej. `r'^junior/$'`) porque usan una técnica de emparejamiento de patrones llamada "expresiones regulares" ("regular expressions", RegEx, o RE). No necesitas saber cómo funcionan las expresiones regulares en este momento, tan sólo que nos permiten emparejar patrones en el URL (en vez de los valores insertados en el código de forma fija que veíamos más arriba) y los usan como parámetros en nuestras funciones de visualización. Como ejemplo, una RegEx simple podría decir "empareja una simple letra mayúscula, seguida de entre 4 y 7 letras minúsculas."
 
 El framework web también hace fácil a una función de visualización extraer información de la base de datos. La estructura de nuestros datos está definida en modelos, que son las clases Python que definen los campos que serán almacenados en la base de datos subyacente. Si tenemos un modelo llamado _Team_ con un campo de "_team_type_" podemos usar un query de sintaxis simple para recuperar todos los equipos que son de un tipo particular.
 
diff --git a/files/es/learn/server-side/first_steps/introduction/index.md b/files/es/learn/server-side/first_steps/introduction/index.md
index 9f8f29ebc2b370..b53e963db6d020 100644
--- a/files/es/learn/server-side/first_steps/introduction/index.md
+++ b/files/es/learn/server-side/first_steps/introduction/index.md
@@ -73,7 +73,8 @@ Los desarrolladores generalmente escriben su código usando web frameworks. Los
 
 De nuevo, mientras que, tanto el código lado cliente y el lado servidor usan frameworks, los dominios son muy diferentes, y por lo tanto también lo son los frameworks. Los frameworks del lado cliente simplifican los diseños y las tareas de presentación mientras que los del lado servidor proporcionan un montón de funcionalidades "comunes" que tendría que haber implementado uno mismo (ej, soporte para las sesiones, soporte para los usuarios y autenticación, acceso fácil a la base de datos, librerías de plantillas, etc...).
 
-> **Nota:** Los frameworks del lado cliente se usan con frecuencia para acelerar el desarrollo del código del lado cliente, pero también se puede elegir escribir todo el código a mano; de hecho, escribir el código a mano puede ser más rápido y más eficiente si sólo se necesita una UI para sitio web pequeña y simple. Por contra, casi nunca se consideraría escribir el componente del lado servidor de una aplicación web ("web app") sin un framework — implementar una característica vital como un servidor HTTP es realmente difícil de hacer de la nada en un lenguaje como, por ejemplo, Python, pero los web frameworks de Python como Django proporcionan uno listo para usar, junto con otras herramientas muy útiles.
+> [!NOTE]
+> Los frameworks del lado cliente se usan con frecuencia para acelerar el desarrollo del código del lado cliente, pero también se puede elegir escribir todo el código a mano; de hecho, escribir el código a mano puede ser más rápido y más eficiente si sólo se necesita una UI para sitio web pequeña y simple. Por contra, casi nunca se consideraría escribir el componente del lado servidor de una aplicación web ("web app") sin un framework — implementar una característica vital como un servidor HTTP es realmente difícil de hacer de la nada en un lenguaje como, por ejemplo, Python, pero los web frameworks de Python como Django proporcionan uno listo para usar, junto con otras herramientas muy útiles.
 
 ## ¿Qué se puede hacer en el lado-servidor?
 
@@ -93,7 +94,8 @@ El servidor no se limita a enviar información de las bases de datos, y podría
 
 Debido a que la información está en una base de datos, puede también ser compartida y actualizada con otros sistemas de negocio (por ejemplo, cuando se venden los productos online o en una tienda, la tienda debería actualizar su base de datos de inventario.
 
-> **Nota:** Tu imaginación no tiene que trabajar duro para ver el beneficio de la codificación de lado-servidor para el almacenaje y distribución de información:
+> [!NOTE]
+> Tu imaginación no tiene que trabajar duro para ver el beneficio de la codificación de lado-servidor para el almacenaje y distribución de información:
 >
 > 1. Vete a [Amazon](https://www.amazon.com) o a cualquier otro sitio de comercio electrónico "e-commerce".
 > 2. Busca por un número de palabras clave y nota como la estructura de la página no cambia, incluso aunque cambien los resultados.
@@ -107,7 +109,8 @@ Los servidores pueden almacenar y usar la información acerca de los clientes pa
 
 Un análisis profundo de los hábitos del usuario se puede usar para anticipar sus intereses y personalizar las respuestas y notificaciones futuras, proporcionando, por ejemplo, una lista de las localizaciones visitadas o populares que querrías buscar en un mapa.
 
-> **Nota:** Vete a [Google Maps](https://maps.google.com/) como usuario anónimo, selecciona el botón Direcciones, e introduce los puntos de partida y destino de un viaje. Ahora inicia sesión en el sistema con tu cuenta de Google, si tienes una (en el panel de abajo aparece información acerca de este proceso donde seleccionas direcciones). El sitio web te permitirá ahora seleccionar las localizaciones de casa y trabajo como puntos de partida y destino (o almacenar estos detalles si no lo has hecho así).
+> [!NOTE]
+> Vete a [Google Maps](https://maps.google.com/) como usuario anónimo, selecciona el botón Direcciones, e introduce los puntos de partida y destino de un viaje. Ahora inicia sesión en el sistema con tu cuenta de Google, si tienes una (en el panel de abajo aparece información acerca de este proceso donde seleccionas direcciones). El sitio web te permitirá ahora seleccionar las localizaciones de casa y trabajo como puntos de partida y destino (o almacenar estos detalles si no lo has hecho así).
 
 ### Acceso controlado al contenido
 
@@ -118,13 +121,15 @@ Ejemplos del mundo real incluyen:
 - Redes sociales como Facebook permiten a los usuarios controlar totalmente sus propios datos pero permitiendo sólo a sus amigos ver o comentar sobre ellos. El usuario determina quien puede ver sus datos, y por extensión, los datos de quienes aparecen en sus notificaciones — autorización es una parte central de la experiencia de usuario!
 - El sitio en el que te encuentras ahora controla el acceso al contenido: los artículos son visibles a todos, pero sólo los usuarios que se han identificado pueden editar el contenido. Para comprobar ésto, pincha en el botón Edit en la parte superior de esta página — si te has identificado iniciando sesión se te mostrará la vista de edición; si no has iniciado sesión serás enviado a una página de registro.
 
-> **Nota:** Considera otros ejemplos reales donde el acceso al contenido está controlado. Por ejemplo, ¿qué puedes ver si vas al sitio online de tu banco? Inicia sesión con tu cuenta — ¿qué información adicional puedes ver y modificar? ¿Qué información puedes ver y sólo el banco puede cambiar?
+> [!NOTE]
+> Considera otros ejemplos reales donde el acceso al contenido está controlado. Por ejemplo, ¿qué puedes ver si vas al sitio online de tu banco? Inicia sesión con tu cuenta — ¿qué información adicional puedes ver y modificar? ¿Qué información puedes ver y sólo el banco puede cambiar?
 
 ### Almacenar información de sesión/estado
 
 La programación de lado-servidor permite a los desarrolladores hacer uso de las sesiones — es básicamente un mecanismo que permite al servidor almacenar información sobre el usuario actual del sitio u enviar diferentes respuestas basadas en esa información. Esto permite, por ejemplo, que un sitio sepa que un usuario ha iniciado sesión previamente y presente enlaces a sus correos, o a su historial de órdenes, o quizá guardar el estado de un simple juego de forma que el usuario pueda volver al sitio de nuevo y retomar el juego donde lo dejó.
 
-> **Nota:** Visita el sitio de un periódico que tenga un modelo de subscripción y abre un puñado de pestañas (ej, [The Age](http://www.theage.com.au/)). Continua visitando el sitio durante unos pocos días/horas. En algún momento serás finalmente redirigido a las páginas que explican cómo suscribirte y se te impedirá el acceso a los artículos. Esta información es un ejemplo de información de sesión almacenada en cookies.
+> [!NOTE]
+> Visita el sitio de un periódico que tenga un modelo de subscripción y abre un puñado de pestañas (ej, [The Age](http://www.theage.com.au/)). Continua visitando el sitio durante unos pocos días/horas. En algún momento serás finalmente redirigido a las páginas que explican cómo suscribirte y se te impedirá el acceso a los artículos. Esta información es un ejemplo de información de sesión almacenada en cookies.
 
 ### Notificaciones y comunicación
 
@@ -136,7 +141,8 @@ Unos pocos ejemplos incluyen:
 - Amazon envía con regularidad emails que sugieren productos similares a aquellos comprados o vistos anteriormente y en los que podrías estar interesado.
 - Un servidor web podría enviar mensajes de aviso a los administradores del sistema alertandoles de memoria baja en el servidor o de actividades de usuario sospechosas.
 
-> **Nota:** El tipo de notificación más común es una "confirmación de registro". Elige uno cualquiera de los grandes sitios en que estés interesado (Google, Amazon, Instagram, etc.) y crea una cuenta nueva usando tu dirección de correo. En breve recibirás un email de confirmación de registro, o solicitando un acuse de recibo para activar la cuenta.
+> [!NOTE]
+> El tipo de notificación más común es una "confirmación de registro". Elige uno cualquiera de los grandes sitios en que estés interesado (Google, Amazon, Instagram, etc.) y crea una cuenta nueva usando tu dirección de correo. En breve recibirás un email de confirmación de registro, o solicitando un acuse de recibo para activar la cuenta.
 
 ### Análisis de datos
 
@@ -144,7 +150,8 @@ Un sitio web puede recolectar un montón de datos acerca de los usuarios: qué e
 
 Por ejemplo, Amazon y Google anuncian ambos productos basados en búsquedas previas (y adquisiciones).
 
-> **Nota:** Si eres usuario de Facebook vete a tu muro y hecha un ojo a la ristra de entradas. Fíjate como algunas de las entradas no están en orden numérico - en particular las entradas con más "me-gusta" están con frecuencia en lugares más altos de la lista que las entradas más recientes. Echa un ojo también a qué clase de anuncios te están mostrando — podrías ver anuncios de cosas que has mirado en otros sitios. El algoritmo de Facebook para resaltar contenido y anuncios puede ser un poco misterioso, pero está claro que lo que hace depende de lo que te gusta y de tus hábitos de visualización!
+> [!NOTE]
+> Si eres usuario de Facebook vete a tu muro y hecha un ojo a la ristra de entradas. Fíjate como algunas de las entradas no están en orden numérico - en particular las entradas con más "me-gusta" están con frecuencia en lugares más altos de la lista que las entradas más recientes. Echa un ojo también a qué clase de anuncios te están mostrando — podrías ver anuncios de cosas que has mirado en otros sitios. El algoritmo de Facebook para resaltar contenido y anuncios puede ser un poco misterioso, pero está claro que lo que hace depende de lo que te gusta y de tus hábitos de visualización!
 
 ## Sumario
 
diff --git a/files/es/learn/server-side/first_steps/web_frameworks/index.md b/files/es/learn/server-side/first_steps/web_frameworks/index.md
index 5fb6aea299bee3..51ffa6da37da84 100644
--- a/files/es/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/es/learn/server-side/first_steps/web_frameworks/index.md
@@ -150,7 +150,8 @@ Los frameworks web proporcionan con frecuencia un mecanismo para facilitar la ge
 
 Por ejemplo, el sistema de plantillas de Django te permite especificar variables usando una sintaxis de "llaves dobles" (ej. `\{{ variable_name }}`), que serán reemplazadas por valores pasados desde la función de visualización cuando la página sea renderizada. El sistema de plantillas también proporciona soporte para expresiones (con la sintaxis: `{% expression %}`), que permite a las plantillas realizar operaciones simples como iterar sobre la lista de valores pasados a la misma.
 
-> **Nota:** Muchos otros sistemas de plantillas usan una sintaxis similar, ej.: Jinja2 (Python), Handlebars (JavaScript), Moustache (JavaScript), etc.
+> [!NOTE]
+> Muchos otros sistemas de plantillas usan una sintaxis similar, ej.: Jinja2 (Python), Handlebars (JavaScript), Moustache (JavaScript), etc.
 
 El fragmento de código de abajo muestra como hacer este trabajo. Continuando el ejemplo del "equipo más joven" de la sección anterior, la "view" pasa a la plantilla HTML una variable tipo lista llamada `youngest_teams`. Dentro del esqueleto HTML tenemos una expresión que primero comprueba que la variable `youngest_teams` existe, y luego itera sobre ella en un bucle `for`. En cada iteración la plantilla presenta en pantalla el valor del `team_name` del equipo de uno de los elementos de la lista.
 
@@ -198,7 +199,8 @@ Hay muchos otros posibles factores, incluyendo licenciamiento, si el framework e
 
 Si eres un completo principiante en la programación probablemente escogerás tu framework basándote en la "facilidad de aprendizaje". Además de la "facilidad de uso" del lenguaje mismo, la alta calidad de la documentación/tutoriales y una comunidad activa que ayuda a nuevos usuarios son tus recursos más valiosos. Nosotros hemos escogido [Django](https://www.djangoproject.com/) (Python) y [Express](http://expressjs.com/) (Node/JavaScript) para escribir nuestros ejemplos de más adelante en el curso, principalmente porque son fáciles de aprender y tienen un buen soporte.
 
-> **Nota:** Vayamos a los sitios principales de [Django](https://www.djangoproject.com/) (Python) y [Express](http://expressjs.com/) (Node/JavaScript) y comprobemos su documentación y su comunidad.
+> [!NOTE]
+> Vayamos a los sitios principales de [Django](https://www.djangoproject.com/) (Python) y [Express](http://expressjs.com/) (Node/JavaScript) y comprobemos su documentación y su comunidad.
 >
 > 1. Navega a los sitios principales (enlazados abajo)
 >    - Pincha en los enlaces de los menus de Documentación (cosas que se llaman como "Documentación, Guía, Referencia API, Primeros Pasos".
@@ -215,7 +217,8 @@ Avancemos ahora, y debatamos unos pocos frameworks web específicos de lado serv
 
 Los frameworks de lado servidor de más abajo representan unos pocos de los más populares disponibles en el momento de escribir este artículo. Todos ellos tienen todo lo que necesitas para ser productivo — son de código abierto, están bajo desarrollo activo, tienen comunidades entusiastas creando documentación y ayudando a los usuarios en paneles de debate, y se usan en un gran número de sitios web de perfil alto. Hay muchos otros frameworks de lado servidor fantásticos que puedes descubrir usando una búsqueda básica en internet.
 
-> **Nota:** ¡Las descripciones vienen (parcialmente) de los sitios web de los frameworks!
+> [!NOTE]
+> ¡Las descripciones vienen (parcialmente) de los sitios web de los frameworks!
 
 ### Django (Python)
 
diff --git a/files/es/learn/server-side/first_steps/website_security/index.md b/files/es/learn/server-side/first_steps/website_security/index.md
index 72acddcf85ff7c..ad3400a05117fc 100644
--- a/files/es/learn/server-side/first_steps/website_security/index.md
+++ b/files/es/learn/server-side/first_steps/website_security/index.md
@@ -34,7 +34,8 @@ La seguridad de sitios web eficaz requiere de esfuerzos de diseño a lo largo de
 
 El resto de este artículo proporciona más detalle sobre unas pocas amenazas comunes y algunos de los pasos simples que puedes dar para proterger tu sitio.
 
-> **Nota:** Este es un tema de introducción, diseñado para ayudarte a pensar sobre la seguridad de sitios web. No pretende ser exhaustivo.
+> [!NOTE]
+> Este es un tema de introducción, diseñado para ayudarte a pensar sobre la seguridad de sitios web. No pretende ser exhaustivo.
 
 ## Amenazas contra la seguridad de sitios web
 
@@ -44,7 +45,8 @@ Esta sección lista sólo algunas pocas de las amenazas más comunes para los si
 
 XSS es un término que se usa para describir una clase de ataques que permiten al atacante inyectar scripts de lado cliente, _a través_ del sitio web, hasta los exploradores de otros usuarios. Como el código inyectado va del servidor del sitio al explorador, se supone de confianza, y de aquí que pueda hacer cosas como enviar al atacante la cookie de autorización al sitio del usuario. Una vez que el atacante tiene la cookie pueden iniciar sesión en el sitio como si fuera el verdadero usuario y hacer cualquier cosa que pueda hacer éste. Dependiendo de que sitio sea, esto podría incluir acceso a los detalles de su tarjeta de crédito, ver detalles de contactos o cambiar contraseñas, etc.
 
-> **Nota:** Las vulnerabilidades XSS han sido históricamente más comunes que las de cualquier otro tipo.
+> [!NOTE]
+> Las vulnerabilidades XSS han sido históricamente más comunes que las de cualquier otro tipo.
 
 Hay dos aproximaciones principales para conseguir que el sitio devuelva scripts inyectados al explorador — se conocen como vulnerabilidades XSS _reflejadas_ y _persistentes_.
 
@@ -76,7 +78,8 @@ SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WH
 
 La manera de evitar esta clase de ataque es asegurar que cualquier dato de usuario que se pasa a un query SQL no puede cambiar la naturaleza del mismo. Una forma de hacer ésto es [eludir ('escape')](https://en.wikipedia.org/wiki/Escape_character) todos los caracteres en la entrada de usuario que tengan un significado especial en SQL.
 
-> **Nota:** La sentencia SQL trata el caracer ' como el principio y el final de una cadena de texto. Colocando el caracter barra invertida \ delante, "eludimos" el símbolo (\\'), y le decimos a SQL que lo trate como un caracter de texto (como parte de la misma cadena).
+> [!NOTE]
+> La sentencia SQL trata el caracer ' como el principio y el final de una cadena de texto. Colocando el caracter barra invertida \ delante, "eludimos" el símbolo (\\'), y le decimos a SQL que lo trate como un caracter de texto (como parte de la misma cadena).
 
 En la sentencia de abajo eludimos el carácter '. SQL interpretará ahora como "nombre" la cadena de texto completa mostrada en negrilla (!un nombre muy raro desde luego, pero no dañino¡)
 
@@ -86,7 +89,8 @@ SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo W
 
 Los frameworks web con frecuencia tienen cuidado de hacer por tí la elusión de caracteres. Django, por ejemplo se asegura que cualquier dato de usuario que se pasa a los conjuntos de queries (modelo de queries) está corregido.
 
-> **Nota:** Esta sección se sustenta aquí en la información de [Wikipedia](https://en.wikipedia.org/wiki/SQL_injection).
+> [!NOTE]
+> Esta sección se sustenta aquí en la información de [Wikipedia](https://en.wikipedia.org/wiki/SQL_injection).
 
 ### Cross Site Request Forgery (CSRF)
 
@@ -98,7 +102,8 @@ Si el usuario pincha el botón de enviar, se envía al servidor una petición HT
 
 El resultado es que cualquier usuario que pinche en el botón _Enviar_ mientras tiene la sesión iniciada en el sitio comercial hará la transacción. ¡John se hará rico!
 
-> **Nota:** El truco aquí es que John no necesita tener acceso a los cookies del usuario (o acceso a sus credenciales) — El explorador del usuario almacena esta información, y la incluye automáticamente en todas las peticiones al servidor asociado.
+> [!NOTE]
+> El truco aquí es que John no necesita tener acceso a los cookies del usuario (o acceso a sus credenciales) — El explorador del usuario almacena esta información, y la incluye automáticamente en todas las peticiones al servidor asociado.
 
 Una manera de prevenir este tipo de ataque por parte del servidor es requerir que la petción `POST` incluya una palabra secreta específica del usuario generada por el sitio (la palabra secreta podría proporcionarla el servidor cuando envía el formulario web que se usa para hacer transferencias). Esta aproximación evita que John pueda crear su propio formulario, porque necesitaría conocer la palabra secreta que el servidor ha proporcionado para el usuario. Incluso si conociera esta palabra y creara un formulario para un usuario en particular, no podría usar el mismo formulario para atacar a todos los usuarios.
 
@@ -120,7 +125,8 @@ Hay muchas más. Para un lisado completo ver [Category:Web security exploits](ht
 
 Casi todos los exploits de las secciones anteriores tienen éxito cuando la aplicación web confía en los datos que vienen del explorador. Sea lo que sea que hagas para mejorar la seguridad de tu sitio web, deberías desinfectar todos los datos originados por el usuario antes de ser mostrados en el explorador, usados en queries SQL o pasados en una llamada al sistema operativo o fichero de sistema.
 
-> **Advertencia:** La lección más importante que debes aprender acerca de la seguridad de sitios web es **nunca confíes en los datos del explorador web**. Esto incluye los datos en parámetros URL de las peticiones `GET`, datos `POST`, cabeceras HTTP y cookies, ficheros subidos por los usuarios, etc. Comprueba siempre y desinfecta todos los datos entrantes. Siempre asume lo peor.
+> [!WARNING]
+> La lección más importante que debes aprender acerca de la seguridad de sitios web es **nunca confíes en los datos del explorador web**. Esto incluye los datos en parámetros URL de las peticiones `GET`, datos `POST`, cabeceras HTTP y cookies, ficheros subidos por los usuarios, etc. Comprueba siempre y desinfecta todos los datos entrantes. Siempre asume lo peor.
 
 Otras cuantas medidas concretas que puedes tomar son:
 
diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index 8fa1c61259889a..70a52d6be84b3b 100644
--- a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -35,7 +35,8 @@ Como resultado, tu código será más consistente y profesional, por lo que podr
 
 ## Tutoriales de React
 
-> **Nota:** Los tutoriales de React se probaron por última vez en mayo de 2020, con React/ReactDOM 16.13.1 y create-react-app 3.4.1.Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación React en nuestro [repositorio todo-react](https://github.com/mdn/todo-react). Para una versión en vivo, consulta <https://mdn.github.io/todo-react-build/>.
+> [!NOTE]
+> Los tutoriales de React se probaron por última vez en mayo de 2020, con React/ReactDOM 16.13.1 y create-react-app 3.4.1.Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación React en nuestro [repositorio todo-react](https://github.com/mdn/todo-react). Para una versión en vivo, consulta <https://mdn.github.io/todo-react-build/>.
 
 - [1. Primeros pasos en React](/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started)
   - : En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.
@@ -54,7 +55,8 @@ Como resultado, tu código será más consistente y profesional, por lo que podr
 
 ## Tutoriales de Ember
 
-> **Nota:** Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Ember en nuestro [repositorio ember-todomvc-tutorial](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc). Para una versión en vivo, consulta <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> (esto también incluye algunas características adicionales que no se cubren en este tutorial).
+> [!NOTE]
+> Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Ember en nuestro [repositorio ember-todomvc-tutorial](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc). Para una versión en vivo, consulta <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> (esto también incluye algunas características adicionales que no se cubren en este tutorial).
 
 - [1. Primeros pasos en Ember](/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
   - : En nuestro primer artículo de Ember veremos cómo funciona Ember y para qué resulta útil, instalaremos la cadena de herramientas de Ember de manera local, crearemos una aplicación de muestra, y luego realizaremos una configuración inicial para prepararla para el desarrollo.
@@ -71,7 +73,8 @@ Como resultado, tu código será más consistente y profesional, por lo que podr
 
 ## Tutoriales de Vue
 
-> **Nota:** Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Vue en nuestro [repositorio todo-vue](https://github.com/mdn/todo-vue). Para una verisón en vivo, consulta <https://mdn.github.io/todo-vue/dist/>.
+> [!NOTE]
+> Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Vue en nuestro [repositorio todo-vue](https://github.com/mdn/todo-vue). Para una verisón en vivo, consulta <https://mdn.github.io/todo-vue/dist/>.
 
 - [1. Primeros pasos en Vue](/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
   - : A continuación, presentamos Vue, el tercero de nuestros frameworks. En este artículo, veremos un poco sobre el origen de Vue, aprenderemos cómo instalarlo y crear un nuevo proyecto, estudiaremos la estructura de alto nivel de todo el proyecto y de un componente individual, veremos cómo ejecutar el proyecto localmente y prepararlo para comenzar a construir nuestro ejemplo.
diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
index ff747aa5b034f9..c3bbc908fc5db2 100644
--- a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
+++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
@@ -94,7 +94,8 @@ export default function Todo() {
 }
 ```
 
-> **Nota:** Los componentes siempre deben devolver algo. Si en cualquier punto en el futuro intentas renderizar un componente que no devuelve nada, React mostrará un error en el navegador.
+> [!NOTE]
+> Los componentes siempre deben devolver algo. Si en cualquier punto en el futuro intentas renderizar un componente que no devuelve nada, React mostrará un error en el navegador.
 
 Nuestro componente `Todo` esta completo, por ahora; ahora podemos usarlo. En `App.js`, agrega la siguiente linea hasta arriba del archivo para importar `Todo`;
 
@@ -385,7 +386,8 @@ function FilterButton(props) {
 export default FilterButton;
 ```
 
-> **Nota:** Podrias notar que estamos cometiendo el mismo error que cometimos por primera vez con el componente `<Todo />`, en que cada botón será lo mismo. ¡Esta bien! Vamos arreglarlo mas adelante en [Volver a los botones de filtro](/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons).
+> [!NOTE]
+> Podrias notar que estamos cometiendo el mismo error que cometimos por primera vez con el componente `<Todo />`, en que cada botón será lo mismo. ¡Esta bien! Vamos arreglarlo mas adelante en [Volver a los botones de filtro](/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons).
 
 ## Importando todos nuestros componentes
 
diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index c129137b356d9e..253f9844de0228 100644
--- a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -81,7 +81,8 @@ const header = (
 );
 ```
 
-> **Nota:** Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera:
+> [!NOTE]
+> Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera:
 >
 > ```jsx
 > const header = (
@@ -146,7 +147,8 @@ Esto crea una carpeta `moz-todo-react`, y hace varias cosas dentro de la misma:
 - Crea una estructura de archivos y carpetas que definen la arquitectura básica de la aplicación.
 - Inicializa la carpeta como un repositorio de git, si tienes git instalado en tu computadora.
 
-> **Nota:** si tienes instalado el administrador de paquetes yarn, create-react-app lo usará por defecto en lugar de npm. Si tienes ambos administradores de paquetes instalados y quieres, explícitamente, usar npm, puedes agregar el indicador `--use-npm` cuando ejecutes create-react-app:
+> [!NOTE]
+> Si tienes instalado el administrador de paquetes yarn, create-react-app lo usará por defecto en lugar de npm. Si tienes ambos administradores de paquetes instalados y quieres, explícitamente, usar npm, puedes agregar el indicador `--use-npm` cuando ejecutes create-react-app:
 >
 > ```bash
 > npx create-react-app moz-todo-react --use-npm
@@ -325,7 +327,8 @@ En la línea 7, se invoca la función `ReactDOM.render()` de React con dos argum
 
 Todo esto le indica a React que queremos renderizar nuestra aplicación React con el componente `App` como raíz, o primer componente.
 
-> **Nota:** En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo `<App>` o solo `<img>` provocará un error.
+> [!NOTE]
+> En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo `<App>` o solo `<img>` provocará un error.
 
 Los [Service workers](/es/docs/Web/API/Service_Worker_API/Using_Service_Workers) son interesantes piezas de código que ayudan al rendimiento de las aplicaciones y permiten que las funciones de tus aplicaciones web funcionen sin conexión, pero estas no están dentro del alcance de este artículo. Puedes eliminar la línea 5, así como las líneas 9 a 12.
 
diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
index 8880e2b1a06a59..79c8091d5992be 100644
--- a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
+++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
@@ -49,7 +49,8 @@ Svelte adopta en gran medida el modelo clásico de desarrollo web dado por HTML,
 
 Sus mayores inconvenientes vienen dados por su corta edad, pues su ecosistema se encuentra limitado en términos de herramientas, soporte, complementos (_plugins_), patrones específicos de uso, etc. en comparación con otros _frameworks_. A pesar de ello, sus beneficios deberían ser suficientes para despertar tu curiosidad en explorarlo.
 
-> **Nota:** Recientemente Svelte agregó [soporte oficial de Typescript](https://svelte.dev/blog/svelte-and-typescript), una de sus características más esperadas. Más adelante en esta serie de tutoriales exploraremos esa integración.
+> [!NOTE]
+> Recientemente Svelte agregó [soporte oficial de Typescript](https://svelte.dev/blog/svelte-and-typescript), una de sus características más esperadas. Más adelante en esta serie de tutoriales exploraremos esa integración.
 
 Te recomendamos que sigas el [Tutorial de Svelte](https://svelte.dev/tutorial/basics) para una introducción rápida a los conceptos básicos, para después regresar a este tutorial y aprender a construir algo más complicado.
 
@@ -104,7 +105,8 @@ npm install
 npm run dev
 ```
 
-> **Nota:** el funcionamiento de degit no es mágico — simplemente te permite descargar y descomprimir la última versión del contenido de un repositorio de git. Esto es mucho más rápido que utilizar el comando `git clone` ya que no se descarga todo el historial del repositorio ni se crea un clon local completo.
+> [!NOTE]
+> El funcionamiento de degit no es mágico — simplemente te permite descargar y descomprimir la última versión del contenido de un repositorio de git. Esto es mucho más rápido que utilizar el comando `git clone` ya que no se descarga todo el historial del repositorio ni se crea un clon local completo.
 
 Después de ejecutar `npm run dev`, Svelte compila y construye tu aplicación.
 Además, inicia un servidor local en la dirección `localhost:8080`. Svelte estará a la espera de modificaciones en el código fuente de tu aplicación para compilar y actualizar la app. Tu navegador mostrará algo parecido a lo siguiente:
@@ -181,7 +183,8 @@ Las tres secciones: `<script>`, `<style>`, y el marcado, son completamente opcio
 <!-- el marcado (cero o más elementos HTML) va aquí -->
 ```
 
-> **Nota:** Para más información del formato para componentes, dale un vistazo a la [Documentación de Svelte](https://svelte.dev/docs#Component_format).
+> [!NOTE]
+> Para más información del formato para componentes, dale un vistazo a la [Documentación de Svelte](https://svelte.dev/docs#Component_format).
 
 Una vez revisado lo anterior, miremos el archivo `src/App.svelte` que viene incluir en el _template_ inicial. Deberías ver algo como lo siguiente:
 
@@ -287,7 +290,8 @@ Para ver esto en acción, abre una nueva pestaña del navegador y dirígete a la
 
 Al compilar la aplicación, Svelte cambia la definición de nuestros estilos `h1` a `h1.svelte-1tky8bj`, modifica todos los elementos `<h1>` de nuestra aplicación y los transforma en elementos de la forma `<h1 class="svelte-1tky8bj">`, para que así coincida con los estilos aplicados.
 
-> **Nota:** Puedes cambiar este comportamiento al aplicar los estilos globalmente a un selector utilizando el modificador `:global()` (visita la entrada de la [documentación de Svelte para `<style>`](https://svelte.dev/docs#style) para más información).
+> [!NOTE]
+> Puedes cambiar este comportamiento al aplicar los estilos globalmente a un selector utilizando el modificador `:global()` (visita la entrada de la [documentación de Svelte para `<style>`](https://svelte.dev/docs#style) para más información).
 
 ## Aplicando algunos cambios
 
@@ -424,7 +428,8 @@ npm run dev
 
 Si quieres aprender más sobre git y GitHub, hemos compilado una lista de enlaces a guías que te podrían ser útiles. Visita [Git y GitHub](/es/docs/Learn/Tools_and_testing/GitHub).
 
-> **Nota:** Si solo quieres descargar los archivos sin clonar el repositorio de git, puedes utilizar la herramienta degit de la siguiente manera: `npx degit opensas/mdn-svelte-tutorial`. También puedes descargar una carpeta específica con el comando `npx degit opensas/mdn-svelte-tutorial/01-getting-started`. Degit no creará un repositorio local de git, en su lugar, simplemente descarga los archivos de la carpeta especificada.
+> [!NOTE]
+> Si solo quieres descargar los archivos sin clonar el repositorio de git, puedes utilizar la herramienta degit de la siguiente manera: `npx degit opensas/mdn-svelte-tutorial`. También puedes descargar una carpeta específica con el comando `npx degit opensas/mdn-svelte-tutorial/01-getting-started`. Degit no creará un repositorio local de git, en su lugar, simplemente descarga los archivos de la carpeta especificada.
 
 ### Usando el REPL de Svelte
 
@@ -453,11 +458,13 @@ Para iniciar un REPL, abre tu navegador web y navega a <https://svelte.dev/repl>
 
 Cada vez que cambias algo en cualquier archivo del REPL, Svelte recompila la aplicación y actualiza la pestaña de _Result_. Para compartir tu app, comparte el URL. Por ejemplo, en este enlace puedes encontrar un REPL ejecutando nuestra aplicación completa: <https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2>.
 
-> **Nota:** Observa que puedes especificar la versión de Svelte en el URL. Esto es bastante útil para reportar problemas relacionados a una versión específica de Svelte.
+> [!NOTE]
+> Observa que puedes especificar la versión de Svelte en el URL. Esto es bastante útil para reportar problemas relacionados a una versión específica de Svelte.
 
 Te proporcionaremos un REPL al inicio y al final de cada articulo para que puedas empezar a programar con nosotros en cualquier momento.
 
-> **Nota:** Actualmente el REPL no es capaz de manejar correctamente el nombre de las carpetas. Si estás siguiendo el tutorial en un REPL, simplemente crea todos tus componentes en la carpeta raíz. De esta forma, cuando veas una dirección en el código, por ejemplo `import Todos from './components/Todos.svelte'`, remplazala con una URL plana, p. ej. `import Todos from './Todos.svelte'`
+> [!NOTE]
+> Actualmente el REPL no es capaz de manejar correctamente el nombre de las carpetas. Si estás siguiendo el tutorial en un REPL, simplemente crea todos tus componentes en la carpeta raíz. De esta forma, cuando veas una dirección en el código, por ejemplo `import Todos from './components/Todos.svelte'`, remplazala con una URL plana, p. ej. `import Todos from './Todos.svelte'`
 
 ## El código hasta ahora
 
diff --git a/files/es/learn/tools_and_testing/github/index.md b/files/es/learn/tools_and_testing/github/index.md
index 91f6da3dc66f46..4fdf011812e435 100644
--- a/files/es/learn/tools_and_testing/github/index.md
+++ b/files/es/learn/tools_and_testing/github/index.md
@@ -18,7 +18,8 @@ Los VCS son esenciales para el desarrollo de software:
 
 Los VCS proporcionan herramientas para satisfacer las necesidades anteriores. [Git](https://git-scm.com/) es un ejemplo de VCS, y [GitHub](https://github.com/) es un sitio web + infraestructura que proporciona un servidor Git más una serie de herramientas realmente útiles para trabajar con repositorios git individuales o en equipo, como informar problemas con el código, herramientas de revisión, características de administración de proyectos tal como asignación de tareas, estados de tareas, y más.
 
-> **Nota:** Git en realidad es un sistema de control de versiones _distribuido_, lo cual significa que se realiza una copia completa del repositorio que contiene la base de código en tu computadora (y en la de todos los demás). Realizas cambios en tu propia copia, y luego empujas esos cambios nuevamente al servidor, donde un administrador decidirá si fusiona tus cambios con la copia maestra.
+> [!NOTE]
+> Git en realidad es un sistema de control de versiones _distribuido_, lo cual significa que se realiza una copia completa del repositorio que contiene la base de código en tu computadora (y en la de todos los demás). Realizas cambios en tu propia copia, y luego empujas esos cambios nuevamente al servidor, donde un administrador decidirá si fusiona tus cambios con la copia maestra.
 
 ### ¿Quieres convertirte en un desarrollador web front-end?
 
@@ -38,7 +39,8 @@ En términos de conocimiento previo, no necesitas saber nada sobre desarrollo we
 
 También es preferible que tengas algunos conocimientos básicos de la terminal, por ejemplo, moverte entre directorios, crear archivos y modificar la variable del sistema `PATH`.
 
-> **Nota:** Github no es el único sitio/conjunto de herramientas que puedes usar con Git. Hay otras alternativas, como [GitLab,](https://about.gitlab.com/) que podrías probar, y también podrías intentar configurar tu propio servidor Git y usarlo en lugar de GitHub. Solo nos hemos quedado con GitHub en este curso para proporcionar una forma única que funciona.
+> [!NOTE]
+> Github no es el único sitio/conjunto de herramientas que puedes usar con Git. Hay otras alternativas, como [GitLab,](https://about.gitlab.com/) que podrías probar, y también podrías intentar configurar tu propio servidor Git y usarlo en lugar de GitHub. Solo nos hemos quedado con GitHub en este curso para proporcionar una forma única que funciona.
 
 ## Guías
 
@@ -55,7 +57,8 @@ Ten en cuenta que los enlaces a continuación te llevan a recursos en sitios ext
 - [Dominando las incidencias (de GitHub)](https://guides.github.com/features/issues/)
   - : Las incidencias son como un foro para tu proyecto GitHub, donde las personas pueden hacer preguntas e informar problemas, y tú puede administrar las actualizaciones (por ejemplo, asignar personas para solucionar problemas, aclarar el problema, informar a las personas que las cosas están solucionadas). Este artículo te brinda lo que necesitas saber sobre las incidencias.
 
-> **Nota:** Hay **mucho más** que puedes hacer con Git y GitHub, pero creemos que lo anterior representa lo mínimo que necesitas saber para comenzar a usar Git de manera efectiva. A medida que profundices en Git, comenzarás a darte cuenta de que es fácil equivocarse cuando comienzas a usar comandos más complicados. No te preocupes, incluso los desarrolladores web profesionales encuentran a Git confuso a veces, y a menudo resuelven problemas buscando soluciones en la web, o consultando sitios como [Reglas de vuelo para Git](https://github.com/k88hudson/git-flight-rules/blob/master/README_es.md) y [Dangit, ¡git!](https://dangitgit.com/es)
+> [!NOTE]
+> Hay **mucho más** que puedes hacer con Git y GitHub, pero creemos que lo anterior representa lo mínimo que necesitas saber para comenzar a usar Git de manera efectiva. A medida que profundices en Git, comenzarás a darte cuenta de que es fácil equivocarse cuando comienzas a usar comandos más complicados. No te preocupes, incluso los desarrolladores web profesionales encuentran a Git confuso a veces, y a menudo resuelven problemas buscando soluciones en la web, o consultando sitios como [Reglas de vuelo para Git](https://github.com/k88hudson/git-flight-rules/blob/master/README_es.md) y [Dangit, ¡git!](https://dangitgit.com/es)
 
 ## Ve también
 
diff --git a/files/es/learn/tools_and_testing/index.md b/files/es/learn/tools_and_testing/index.md
index e3e09ec2e9e0db..ee0df33b87743a 100644
--- a/files/es/learn/tools_and_testing/index.md
+++ b/files/es/learn/tools_and_testing/index.md
@@ -13,7 +13,8 @@ La industria de la web es un lugar emocionante para trabajar, pero no está exen
 
 Determinar qué herramientas debería usar puede ser un proceso difícil, por lo que hemos escrito este conjunto de artículos para informarle qué tipos de herramientas están disponibles, qué pueden hacer por usted y cómo hacer uso de los favoritos actuales de la industria.
 
-> **Nota:** Debido a que aparecen nuevas herramientas y las antiguas pasan de moda todo el tiempo, hemos redactado deliberadamente este material para que sea lo más neutral posible. Queremos enfocarnos ante todo en los tipos generales de tareas que estas herramientas lo ayudarán a lograr. y seguir prescribiendo herramientas específicas al mínimo. Obviamente, necesitamos mostrar el uso de las herramientas para demostrar técnicas específicas, pero ten en cuenta que no necesariamente recomendamos estas herramientas como la mejor o la única forma de hacer las cosas; en la mayoría de los casos, existen otras formas, pero queremos brindarte una idea clara. Metodología que funciona.
+> [!NOTE]
+> Debido a que aparecen nuevas herramientas y las antiguas pasan de moda todo el tiempo, hemos redactado deliberadamente este material para que sea lo más neutral posible. Queremos enfocarnos ante todo en los tipos generales de tareas que estas herramientas lo ayudarán a lograr. y seguir prescribiendo herramientas específicas al mínimo. Obviamente, necesitamos mostrar el uso de las herramientas para demostrar técnicas específicas, pero ten en cuenta que no necesariamente recomendamos estas herramientas como la mejor o la única forma de hacer las cosas; en la mayoría de los casos, existen otras formas, pero queremos brindarte una idea clara. Metodología que funciona.
 
 ## Camino de aprendizaje
 
diff --git a/files/es/learn/tools_and_testing/understanding_client-side_tools/index.md b/files/es/learn/tools_and_testing/understanding_client-side_tools/index.md
index 2bdbad0bffbc97..fd0e478174fabc 100644
--- a/files/es/learn/tools_and_testing/understanding_client-side_tools/index.md
+++ b/files/es/learn/tools_and_testing/understanding_client-side_tools/index.md
@@ -13,7 +13,7 @@ Las herramientas del lado del cliente (_client-side_ en inglés) pueden ser inti
 
 Debes aprender el núcleo básico de los lenguajes [HTML](/es/docs/Learn/HTML), [CSS](/es/docs/Learn/CSS) y [JavaScript](/es/docs/Learn/JavaScript), antes de intentar usar las herramientas aquí descritas.
 
-> **Observación:**
+> [!CALLOUT]
 >
 > ### ¿Quieres convertirte en un desarrollador front-end?
 >
diff --git a/files/es/mdn/community/contributing/index.md b/files/es/mdn/community/contributing/index.md
index 070ae27ca75e0e..a7fc11215aa8e1 100644
--- a/files/es/mdn/community/contributing/index.md
+++ b/files/es/mdn/community/contributing/index.md
@@ -7,7 +7,8 @@ slug: MDN/Community/Contributing
 
 ¡MDN Web Docs necesita tu ayuda! Tenemos una gran cantidad de errores tipográficos para corregir, ejemplos para escribir, errores para corregir, personas con las que hablar y más, y el número crece a medida que más personas comienzan a usar el sitio. Esta página describe lo que puedes hacer para ayudar.
 
-> **Nota:** Si no has contribuido a MDN anteriormente, la [guía de inicio](/es/docs/MDN/Contribute/Getting_started) explica el proceso en cuatro pasos simples. Buenas noticias, ya estás en el paso 2: "Elegir una tarea para completar".
+> [!NOTE]
+> Si no has contribuido a MDN anteriormente, la [guía de inicio](/es/docs/MDN/Contribute/Getting_started) explica el proceso en cuatro pasos simples. Buenas noticias, ya estás en el paso 2: "Elegir una tarea para completar".
 
 ## ¿Que puedo hacer para ayudar?
 
@@ -150,7 +151,8 @@ Si estás interesado en las palabras _y_ el código, puede intentar lo siguiente
 - [Escribe un nuevo artículo sobre un tema con el que estés familiarizado.](https://github.com/mdn/content#adding-a-new-document) (1 hora o más)
 - [Añade o actualiza los datos de compatibilidad del navegador en una página de referencia](/es/docs/MDN/Structures/Compatibility_tables) (30 minutos a 1 hora)
 
-> **Nota:** Si encontraste algo que es incorrecto en MDN pero no estás seguro de cómo solucionarlo, puedes reportarlo a través de un [informe de error de documentación](https://github.com/mdn/content/issues/new/choose). Por favor, asigna Un título descriptivo al problema. (No es útil decir "Enlace muerto" sin decir dónde encontraste el enlace).
+> [!NOTE]
+> Si encontraste algo que es incorrecto en MDN pero no estás seguro de cómo solucionarlo, puedes reportarlo a través de un [informe de error de documentación](https://github.com/mdn/content/issues/new/choose). Por favor, asigna Un título descriptivo al problema. (No es útil decir "Enlace muerto" sin decir dónde encontraste el enlace).
 
 ## Otras páginas útiles
 
diff --git a/files/es/mdn/community/contributing/translated_content/index.md b/files/es/mdn/community/contributing/translated_content/index.md
index bc2dd3ba9209dd..d2ba8f3b804041 100644
--- a/files/es/mdn/community/contributing/translated_content/index.md
+++ b/files/es/mdn/community/contributing/translated_content/index.md
@@ -13,7 +13,8 @@ Hemos _congelado_ todo el contenido localizado (lo que significa que no aceptare
 
 ## Localizaciones activas
 
-> **Nota:** Si desea contribuir a una de las localizaciones activas existentes, póngase en contacto con alguno de los miembros activos que figuran a continuación o [póngase en contacto con nosotros para solicitar ayuda](/es/docs/MDN/Community/Contributing/Getting_started#step_4_ask_for_help).
+> [!NOTE]
+> Si desea contribuir a una de las localizaciones activas existentes, póngase en contacto con alguno de los miembros activos que figuran a continuación o [póngase en contacto con nosotros para solicitar ayuda](/es/docs/MDN/Community/Contributing/Getting_started#step_4_ask_for_help).
 
 ### Portugués brasileño (pt-BR)
 
@@ -50,7 +51,8 @@ Hemos _congelado_ todo el contenido localizado (lo que significa que no aceptare
 - Discusiones: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord)
 - Colaboradores actuales: [Graywolf9](https://github.com/Graywolf9), [JuanVqz](https://github.com/JuanVqz), [Jalkhov](https://github.com/Jalkhov), [marcelozarate](https://github.com/marcelozarate), [davbrito](https://github.com/davbrito), [Vallejoanderson](https://github.com/Vallejoanderson).
 
-> **Nota:** Si quiere hablar sobre la posibilidad de _descongelar_ una localización, las [directrices sobre lo que se requiere se pueden encontrar aquí](https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#activating-a-locale)
+> [!NOTE]
+> Si quiere hablar sobre la posibilidad de _descongelar_ una localización, las [directrices sobre lo que se requiere se pueden encontrar aquí](https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#activating-a-locale)
 
 ## Véase también
 
diff --git a/files/es/mdn/writing_guidelines/attrib_copyright_license/index.md b/files/es/mdn/writing_guidelines/attrib_copyright_license/index.md
index 710c25105a240f..261ac9ceae0048 100644
--- a/files/es/mdn/writing_guidelines/attrib_copyright_license/index.md
+++ b/files/es/mdn/writing_guidelines/attrib_copyright_license/index.md
@@ -15,7 +15,8 @@ Esta sección cubre los tipos de contenido que proporcionamos y los derechos de
 
 ### Documentación
 
-> **Nota:** El contenido de MDN Web Docs ha sido preparado con las contribuciones de autores tanto dentro como fuera de Mozilla. A menos que se indique lo contrario, el contenido está disponible según los términos de la [licencia Creative Commons Attribution-ShareAlike](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA), v2.5 o cualquier versión posterior.
+> [!NOTE]
+> El contenido de MDN Web Docs ha sido preparado con las contribuciones de autores tanto dentro como fuera de Mozilla. A menos que se indique lo contrario, el contenido está disponible según los términos de la [licencia Creative Commons Attribution-ShareAlike](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA), v2.5 o cualquier versión posterior.
 
 Su reutilización del contenido aquí se publica bajo la misma licencia que el contenido original: CC-BY-SA v2.5 o cualquier versión posterior. Al reutilizar el contenido en MDN Web Docs, debe asegurarse de que la atribución se dé al contenido original, así como a los "Colaboradores de Mozilla". Incluya un hipervínculo (en línea) o URL (impreso) a la página específica del contenido que se está obteniendo. Por ejemplo, para proporcionar la atribución de _este_ artículo, puede escribir:
 
@@ -35,7 +36,8 @@ Desde el lanzamiento de la nueva plataforma Yari de MDN el 14 de diciembre de 20
 
 Si desea contribuir a MDN Web Docs, acepta que su documentación esté disponible bajo la licencia Attribution-ShareAlike (u ocasionalmente una licencia alternativa ya especificada por la página que está editando) y que sus muestras de código estén disponibles bajo [Creative Commons CC -0](https://creativecommons.org/publicdomain/zero/1.0/) (una dedicación de dominio público).
 
-> **Advertencia:** No se pueden crear nuevas páginas utilizando licencias alternativas.
+> [!WARNING]
+> No se pueden crear nuevas páginas utilizando licencias alternativas.
 
 **Los derechos de autor de los materiales aportados permanecen con el autor a menos que el autor los asigne a otra persona.**
 
@@ -53,7 +55,8 @@ Si recibimos una solicitud de extracción y descubrimos que contiene contenido p
 
 ## Si desea reutilizar o volver a publicar contenido
 
-> **Nota:** A menos que haya una buena razón para volver a publicar el contenido, probablemente diremos "no".
+> [!NOTE]
+> A menos que haya una buena razón para volver a publicar el contenido, probablemente diremos "no".
 > La decisión del equipo de redacción de MDN es definitiva.
 
 Si alguien quiere donar un artículo a MDN que publicó previamente en su blog o tiene sentido copiar una hoja de referencia compleja a MDN, puede haber una justificación para volver a publicarlo. Para estos casos, discuta su plan con el equipo de MDN antes de eso:
diff --git a/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md b/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
index 04ce87dc14b10a..7870e4cd0699b1 100644
--- a/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
+++ b/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
@@ -21,7 +21,8 @@ Para una tecnología marcada como **experimental**, se aplican una o más de las
 - Solo se admite a través de cambios de configuración como preferencias o parámetros, independientemente del número de motores de renderizado admitidos.
 - Es probable que su especificación definitiva cambie significativamente en formas incompatibles con versiones anteriores (es decir, puede romper el código existente que se basa en la característica).
 
-> **Nota:** Una función que solo se publica en un motor de renderizado se sigue considerando experimental, incluso si está disponible en compilaciones de vista previa de otros motores de renderizado (o estableciendo una preferencia o indicador).
+> [!NOTE]
+> Una función que solo se publica en un motor de renderizado se sigue considerando experimental, incluso si está disponible en compilaciones de vista previa de otros motores de renderizado (o estableciendo una preferencia o indicador).
 
 El estado **experimental** de una tecnología puede caducar si se cumple una o más de las siguientes condiciones:
 
@@ -47,7 +48,8 @@ Para más información en la definición de **desaprobado**, vea la [la bandera
 En MDN Web Docs, el término **obsoleto** se usaba históricamente para indicar una API o tecnología que ya no solo ya no se recomienda, sino que ya no se implementa en los navegadores.
 Debido a que la distinción entre **obsoleto** y **desaprobado** no es muy útil, ya no usamos el término **obsoleto** en MDN Web Docs.
 
-> **Nota:** Si te encuentras con algún caso de **obsoleto**, debes eliminarlo o reemplazarlo con el término **desaprobado**.
+> [!NOTE]
+> Si te encuentras con algún caso de **obsoleto**, debes eliminarlo o reemplazarlo con el término **desaprobado**.
 
 ## Pautas para eliminar contenido
 
@@ -55,7 +57,8 @@ A veces, durante el desarrollo de una nueva especificación o en el transcurso d
 
 Aquí hay algunas pautas para ayudarlo a decidir qué hacer cuando se elimina algo de la especificación.
 
-> **Nota:** A los efectos de esta discusión, la palabra "elemento" se utiliza para referirse a cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, una propiedad u otro miembro de una interfaz, y así sucesivamente.
+> [!NOTE]
+> A los efectos de esta discusión, la palabra "elemento" se utiliza para referirse a cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, una propiedad u otro miembro de una interfaz, y así sucesivamente.
 
 ### Si el elemento nunca se implementó
 
@@ -115,6 +118,7 @@ A veces, pero rara vez, puede haber un conflicto entre diferentes versiones de e
 En tales casos, considere cuál es la realidad, es decir, considere qué están haciendo realmente los navegadores y escriba una nota "importante" para resumir ese último estado.
 Por ejemplo, a partir de enero de 2019, el atributo global [`inputmode`](/es/docs/Web/HTML/Global_attributes/inputmode) tiene un conflicto, que se resumió así: <!--este ejemplo de advertencia de conflicto de especificaciones ya no existe en esa página. no pude encontrar ningún otro ejemplo-->
 
-> **Advertencia:** Conflicto de especificación: La especificación WHATWG enumera [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode) y los navegadores modernos están trabajando para soportarlo.
+> [!WARNING]
+> Conflicto de especificación: La especificación WHATWG enumera [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode) y los navegadores modernos están trabajando para soportarlo.
 > La [especificación HTML 5.2 del W3C](https://html.spec.whatwg.org/multipage/index.html#contents), sin embargo, ya no la enumera (es decir, la marca como obsoleta).
 > Debe considerar la definición de WHATWG como correcta, hasta que se llegue a un consenso.
diff --git a/files/es/mdn/writing_guidelines/howto/document_a_css_property/index.md b/files/es/mdn/writing_guidelines/howto/document_a_css_property/index.md
index e393d00847a478..ffade2cd87a9f9 100644
--- a/files/es/mdn/writing_guidelines/howto/document_a_css_property/index.md
+++ b/files/es/mdn/writing_guidelines/howto/document_a_css_property/index.md
@@ -15,7 +15,8 @@ Cada página de referencia de propiedades CSS sigue la misma estructura. Esto ay
 
 Primero, deberá averiguar la propiedad CSS que desea documentar. Es posible que haya notado que falta una página o que haya visto contenido faltante informado en nuestra [lista de problemas](https://github.com/mdn/content/issues) del contenido principal o en nuestra [lista de problemas](https://github.com/mdn/translated-content/issues) del contenido traducido. Para obtener detalles sobre la propiedad CSS, deberá encontrar una especificación relevante para ella (por ejemplo, una [especificación W3C](https://www.w3.org/Style/CSS/), o un informe de error para una propiedad no estándar utilizada en motores de renderizado como Gecko o Blink).
 
-> **Nota:** Cuando utilice una especificación W3C, utilice siempre el **Borrador del editor** (observe el cartel rojo en el lado izquierdo) y no una versión publicada (p. ej., Borrador de trabajo). ¡El borrador del editor siempre está más cerca de la versión final!
+> [!NOTE]
+> Cuando utilice una especificación W3C, utilice siempre el **Borrador del editor** (observe el cartel rojo en el lado izquierdo) y no una versión publicada (p. ej., Borrador de trabajo). ¡El borrador del editor siempre está más cerca de la versión final!
 
 Si la implementación y la especificación difieren, no dude en mencionarlo en el error de implementación. Una de las siguientes situaciones es posible:
 
diff --git a/files/es/mdn/writing_guidelines/howto/images_media/index.md b/files/es/mdn/writing_guidelines/howto/images_media/index.md
index cdc2292275eb50..0817f0a6236aaa 100644
--- a/files/es/mdn/writing_guidelines/howto/images_media/index.md
+++ b/files/es/mdn/writing_guidelines/howto/images_media/index.md
@@ -121,7 +121,8 @@ Existen varios argumentos en contra de usar contenido de video para la documenta
 - El video tiene problemas de accesibilidad: es más costoso de producir en general que el texto, pero especialmente para localizarlo o hacerlo utilizable para los usuarios de lectores de pantalla.
 - Siguiendo con el último punto, el video es mucho más difícil de editar/actualizar/mantener que el contenido de texto.
 
-> **Nota:** Vale la pena tener estos problemas en mente incluso cuando estás haciendo videos, para que puedas tratar de mitigar algunos de ellos.
+> [!NOTE]
+> Vale la pena tener estos problemas en mente incluso cuando estás haciendo videos, para que puedas tratar de mitigar algunos de ellos.
 
 Hay muchos sitios de video populares que proporcionan muchos tutoriales en video.
 MDN Web Docs no es un sitio impulsado por video, pero el video tiene un lugar en MDN Web Docs en ciertos contextos.
@@ -217,7 +218,8 @@ Planea cuidadosamente lo que realmente vas a grabar y practica los pasos varias
 
 - Planea niveles de zoom para las partes de la interfaz de usuario que vas a mostrar. No todos podrán ver tu video en alta definición. Podrás hacer zoom en partes específicas en la postproducción, pero también es una buena idea hacer zoom en la aplicación de antemano.
 
-> **Nota:** No hagas zoom tan lejos que las interfaces de usuario que estás mostrando comiencen a verse poco familiares o feas.
+> [!NOTE]
+> No hagas zoom tan lejos que las interfaces de usuario que estás mostrando comiencen a verse poco familiares o feas.
 
 ### Grabación
 
@@ -225,7 +227,8 @@ Cuando grabes el flujo de trabajo que deseas mostrar, pasa por el flujo suavemen
 
 Recuerda hacer una pausa durante uno o dos segundos al final para mostrar el resultado del flujo.
 
-> **Nota:** Si estás usando una herramienta realmente simple como QuickTime Player y la postproducción no es una opción por alguna razón, debes configurar tus ventanas en el tamaño correcto para mostrar el área que deseas mostrar. En las DevTools de Firefox, puedes usar la [Herramienta de reglas](https://firefox-source-docs.mozilla.org/devtools-user/rulers/index.html) para asegurarte de que el área de visualización tenga la relación de aspecto correcta para la grabación.
+> [!NOTE]
+> Si estás usando una herramienta realmente simple como QuickTime Player y la postproducción no es una opción por alguna razón, debes configurar tus ventanas en el tamaño correcto para mostrar el área que deseas mostrar. En las DevTools de Firefox, puedes usar la [Herramienta de reglas](https://firefox-source-docs.mozilla.org/devtools-user/rulers/index.html) para asegurarte de que el área de visualización tenga la relación de aspecto correcta para la grabación.
 
 ### Post-procesamiento
 
@@ -244,7 +247,8 @@ Recorta el video al formato de aspecto deseado, si es necesario.
 
 Los videos actualmente tienen que cargarse en YouTube para mostrarse en MDN Web Docs, por ejemplo, en el canal [mozhacks](https://www.youtube.com/user/mozhacks/videos). Pídele a un miembro del equipo de MDN Web Docs que cargue el video si no tienes un lugar adecuado para ponerlo.
 
-> **Nota:** Marca el video como "no listado" si no tiene sentido fuera del contexto de la página (si es un video corto, entonces probablemente no lo tenga).
+> [!NOTE]
+> Marca el video como "no listado" si no tiene sentido fuera del contexto de la página (si es un video corto, entonces probablemente no lo tenga).
 
 ### Incrustación
 
diff --git a/files/es/mdn/writing_guidelines/howto/index.md b/files/es/mdn/writing_guidelines/howto/index.md
index 860ad897877a05..ca9f1dc6d60387 100644
--- a/files/es/mdn/writing_guidelines/howto/index.md
+++ b/files/es/mdn/writing_guidelines/howto/index.md
@@ -9,6 +9,7 @@ l10n:
 
 Esta sección de las guías de escritura de MDN Web Docs contiene toda la información paso a paso para realizar tareas específicas al contribuir a MDN Web Docs: cómo usamos Markdown, cómo agregamos una entrada al glosario, cómo movemos o eliminamos páginas y más. Para saber más sobre _cómo contribuir_ (que se realiza a través de GitHub), consulta nuestras [guías de contribución](/es/docs/MDN/Community/Contributing).
 
-> **Nota:** A lo largo de esta sección, asumimos que ha leído las guías de contribución, está familiarizado con el repositorio `mdn/content` y sabe cómo usar git y GitHub.
+> [!NOTE]
+> A lo largo de esta sección, asumimos que ha leído las guías de contribución, está familiarizado con el repositorio `mdn/content` y sabe cómo usar git y GitHub.
 
 {{LandingPageListSubpages}}
diff --git a/files/es/mdn/writing_guidelines/howto/json_structured_data/index.md b/files/es/mdn/writing_guidelines/howto/json_structured_data/index.md
index bda0def8c43c1b..66a6ceff45855f 100644
--- a/files/es/mdn/writing_guidelines/howto/json_structured_data/index.md
+++ b/files/es/mdn/writing_guidelines/howto/json_structured_data/index.md
@@ -21,7 +21,8 @@ GroupData hace exactamente eso: para cada API, enumera las interfaces, propiedad
 
 ### Estructura de GroupData
 
-> **Advertencia:** Las páginas inexistentes enumeradas en este archivo se ignoran.
+> [!WARNING]
+> Las páginas inexistentes enumeradas en este archivo se ignoran.
 
 Una entrada en `GroupData.json` tiene la siguiente estructura:
 
@@ -55,7 +56,8 @@ Una entrada en `GroupData.json` tiene la siguiente estructura:
 
 - `"Nombre_de_API"`
   - : Esta clave es un ID utilizado por macros de menu lateral como `\{{APIRef("Nombre_de_API")}}` y el nombre que se muestra en el menu lateral. Elígelo sabiamente.
-    > **Advertencia:** Si desea cambiar el nombre que se muestra en el menu lateral, debe editar todas las páginas que lo muestran.
+    > [!WARNING]
+    > Si desea cambiar el nombre que se muestra en el menu lateral, debe editar todas las páginas que lo muestran.
 - `"overview"`
   - : Esta es una lista que contiene una página: la página de resumen, utilizada como enlace para el texto `"Nombre_de_API"`. El valor es el _titulo de la página_, y la página debe estar en el directorio `web/api/`.
 - `"guides"`
@@ -64,17 +66,21 @@ Una entrada en `GroupData.json` tiene la siguiente estructura:
   - : Enumera las interfaces que forman parte de la API.
 - `"methods"`
   - : Enumera los métodos que forman parte de la API.
-    > **Nota:** Los métodos de las interfaces enumeradas en `"interfaces"` **no deben** estar enumerados allí. Se añaden automáticamente al menu lateral si la etiqueta `Method` está en el encabezado YAML de esa página.
+    > [!NOTE]
+    > Los métodos de las interfaces enumeradas en `"interfaces"` **no deben** estar enumerados allí. Se añaden automáticamente al menu lateral si la etiqueta `Method` está en el encabezado YAML de esa página.
 - `"properties"`
   - : Enumera los métodos en otras interfaces que forman parte de la API, como `navigator.xr` (una propiedad que la API de WebXR agrega al objeto `navigator`)
-    > **Nota:** Las propiedades de las interfaces enumeradas en `"interfaces"` **no deben** estar enumeradas allí. Se añaden automáticamente a la barra lateral si la etiqueta `Property` está en el encabezado YAML de esa página.
+    > [!NOTE]
+    > Las propiedades de las interfaces enumeradas en `"interfaces"` **no deben** estar enumeradas allí. Se añaden automáticamente a la barra lateral si la etiqueta `Property` está en el encabezado YAML de esa página.
 - `"events"`
   - : Enumera los eventos de otras interfaces que forman parte de la API. Los valores son el _título de las páginas_ (que debe residir en `Web/Events`)
-    > **Nota:** Los eventos dirigidos a las interfaces enumeradas en `"interfaces"` **no deben** estar enumerados allí. Se añaden automáticamente al menu lateral si la etiqueta `Event` (¡singular!) está en el encabezado YAML de esa página.
+    > [!NOTE]
+    > Los eventos dirigidos a las interfaces enumeradas en `"interfaces"` **no deben** estar enumerados allí. Se añaden automáticamente al menu lateral si la etiqueta `Event` (¡singular!) está en el encabezado YAML de esa página.
 
 Hay otras dos claves, `"dictionaries"` y `"callbacks"`, que funcionan con el mismo principio. Como ya no documentamos estas entidades en sus propias páginas, su uso está obsoleto y no se les debe añadir ninguna entrada nueva (y las eliminamos poco a poco).
 
-> **Nota:** Además, ninguna de las claves es obligatoria; es una buena práctica (y lo haremos cumplir) agregar las no obsoletas con una lista vacía en lugar de omitirlas. Muestra que la ausencia de valor es una elección consciente.
+> [!NOTE]
+> Además, ninguna de las claves es obligatoria; es una buena práctica (y lo haremos cumplir) agregar las no obsoletas con una lista vacía en lugar de omitirlas. Muestra que la ausencia de valor es una elección consciente.
 
 ### Proceso de actualización para GroupData
 
@@ -86,7 +92,8 @@ El archivo `GroupData.json` se encuentra [aquí](https://github.com/mdn/content/
 
 ## InterfaceData: herencia de la interfaz de grabación
 
-> **Nota:** Esperamos generar este archivo automáticamente a partir de los datos disponibles a través de w3c/webref en el futuro.
+> [!NOTE]
+> Esperamos generar este archivo automáticamente a partir de los datos disponibles a través de w3c/webref en el futuro.
 
 `InterfaceData` describe la jerarquía de las interfaces. Enumera la herencia. En el pasado, también enumeraba los mixins implementados por cada interfaz; pero ese uso está obsoleto, y eliminamos los mixins de este archivo al mismo ritmo que se actualiza MDN.
 
@@ -103,7 +110,8 @@ Una entrada en `InterfaceData.json` tiene la siguiente estructura:
 }
 ```
 
-> **Nota:** Como los mixins están obsoletos, `"impl"` debe ser una lista vacía para todas las interfaces nuevas.
+> [!NOTE]
+> Como los mixins están obsoletos, `"impl"` debe ser una lista vacía para todas las interfaces nuevas.
 
 El valor de `"Nombre_de_la_interfaz_padre"` no es una lista sino una sola entrada, obligatoria; no debemos enumerar ninguna interfaz que no herede de otra.
 
@@ -117,7 +125,8 @@ El archivo `InterfaceData.json` se encuentra [aquí](https://github.com/mdn/cont
 
 ## SpecData: Información de especificación
 
-> **Advertencia:** El archivo `SpecData.json` ya no se mantiene. La información de especificación canónica se almacena en w3c/browser-spec y en la clave `spec_url` de características en mdn/browser-compat-data.
+> [!WARNING]
+> El archivo `SpecData.json` ya no se mantiene. La información de especificación canónica se almacena en w3c/browser-spec y en la clave `spec_url` de características en mdn/browser-compat-data.
 
 Las macros `\{{SpecName}}` y `\{{Spec2}}` que estamos eliminando utilizan el archivo `SpecData.json`. No aceptamos más contribuciones al archivo `SpecData.json`; en su lugar, intente insertar una tabla de especificaciones, utilizando la macro `\{{Specifications}}`, o intente codificar el enlace (bueno) a la especificación. Tenga en cuenta que la mayoría de las veces, mencionar o vincular a una especificación fuera de la sección _Especificaciones_ es un signo de algo que no está debidamente documentado en MDN.
 
diff --git a/files/es/mdn/writing_guidelines/howto/markdown_in_mdn/index.md b/files/es/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
index 897fde9832495d..9f4303a77ef8e7 100644
--- a/files/es/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
+++ b/files/es/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
@@ -196,7 +196,8 @@ La cita en bloque puede contener bloques de código u otros elementos de bloque.
 #### Notas
 
 ```md
-> **Nota:** Así es como se escribe una nota.
+> [!NOTE]
+> Así es como se escribe una nota.
 >
 > Puede tener varias líneas.
 ```
@@ -212,14 +213,16 @@ Esto producirá el siguiente HTML:
 
 Este HTML se representará como un cuadro resaltado:
 
-> **Nota:** Así es como se escribe una nota.
+> [!NOTE]
+> Así es como se escribe una nota.
 >
 > Puede tener varias líneas.
 
 #### Advertencias
 
 ```md
-> **Advertencia:** Así es como se escribe una advertencia.
+> [!WARNING]
+> Así es como se escribe una advertencia.
 >
 > Puede tener varios párrafos.
 ```
@@ -235,7 +238,8 @@ Esto producirá el siguiente HTML:
 
 Este HTML se representará como un cuadro resaltado:
 
-> **Advertencia:** Así es como se escribe una advertencia.
+> [!WARNING]
+> Así es como se escribe una advertencia.
 >
 > Puede tener varios párrafos.
 
@@ -258,7 +262,7 @@ Esto producirá el siguiente HTML:
 
 Este HTML se representará como un cuadro resaltado:
 
-> **Observación:**
+> [!CALLOUT]
 >
 > **Así es como se escribe una observación.**
 >
@@ -273,7 +277,8 @@ Las localizaciones se almacenan en [Yari](https://github.com/mdn/yari/tree/main/
 Por ejemplo, si queremos utilizar "Warnung" para "Advertencia" en alemán, entonces en las páginas alemanas escribiríamos:
 
 ```md
-> **Warnung:** So schreibt man eine Warnung.
+> [!WARNING]
+> So schreibt man eine Warnung.
 ```
 
 Y esto producirá:
@@ -289,7 +294,8 @@ Y esto producirá:
 Este ejemplo contiene un bloque de código.
 
 ````md
-> **Nota:** Así es como se escribe una nota.
+> [!NOTE]
+> Así es como se escribe una nota.
 >
 > Puede contener bloques de código.
 >
@@ -313,7 +319,8 @@ Esto producirá el siguiente HTML:
 
 Este HTML se representará como con un bloque de código:
 
-> **Nota:** Así es como se escribe una nota.
+> [!NOTE]
+> Así es como se escribe una nota.
 >
 > Puede contener bloques de código.
 >
diff --git a/files/es/mdn/writing_guidelines/howto/research_technology/index.md b/files/es/mdn/writing_guidelines/howto/research_technology/index.md
index 6518a134e26a04..ea09c068904c80 100644
--- a/files/es/mdn/writing_guidelines/howto/research_technology/index.md
+++ b/files/es/mdn/writing_guidelines/howto/research_technology/index.md
@@ -50,7 +50,8 @@ Además, tenemos una guía sobre [Información contenida en un archivo WebIDL](/
 
 Escribirá ejemplos de código o creará demostraciones muchas veces durante el proceso de documentación de una tecnología, pero es muy útil comenzar dedicando tiempo a familiarizarse con cómo funciona la tecnología. Este es un ejercicio realmente valioso porque le brinda una buena comprensión de cuáles son los casos de uso (_por qué_ un desarrollador usaría esta tecnología) y le ayuda a crear algunos ejemplos de código al mismo tiempo.
 
-> **Nota:** Si la especificación se actualizó recientemente de modo que, digamos, un método ahora se define de manera diferente, pero el método anterior aún funciona en los navegadores, a menudo tendrá que documentar ambos en el mismo lugar para que los métodos antiguos y nuevos estén cubiertos.
+> [!NOTE]
+> Si la especificación se actualizó recientemente de modo que, digamos, un método ahora se define de manera diferente, pero el método anterior aún funciona en los navegadores, a menudo tendrá que documentar ambos en el mismo lugar para que los métodos antiguos y nuevos estén cubiertos.
 > Si necesita ayuda, consulte las demostraciones que haya encontrado o consulte a un contacto de ingeniería.
 
 ## Crear la lista de páginas para escribir o actualizar
diff --git a/files/es/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md b/files/es/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
index dbe15b25bcbf5d..f79696bcff71fa 100644
--- a/files/es/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
+++ b/files/es/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
@@ -31,7 +31,8 @@ El primer párrafo de cualquier página del glosario es una descripción breve y
 Preferiblemente, esto no debe ser más de dos oraciones.
 Asegúrese de que cualquier persona que lea la descripción pueda comprender inmediatamente el término definido.
 
-> **Nota:** Por favor, no copie y pegue de otras definiciones o contenido en Internet.
+> [!NOTE]
+> Por favor, no copie y pegue de otras definiciones o contenido en Internet.
 > (Y especialmente no de Wikipedia, ya que su rango de versiones de licencia es más pequeño e incompatible con MDN). La entrada de su glosario debe ser contenido original.
 
 #### Escribir una buena entrada de glosario
diff --git a/files/es/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md b/files/es/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
index ca49d83485fdae..331ffbcafc62dd 100644
--- a/files/es/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
+++ b/files/es/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
@@ -105,11 +105,13 @@ Todos estos son técnicamente opcionales, pero se recomienda encarecidamente que
 7. `"diccionarios"`: una serie de cadenas que enumeran todos los diccionarios que forman parte de la API.
    En general, aquí solo se deben enumerar los diccionarios utilizados por más de una propiedad o método, a menos que tengan un significado especial o sea probable que requieran referencias de varias páginas.
    "CryptoKeyPair" da como resultado un enlace a [https://developer.mozilla.org/es/docs/Web/API/CryptoKeyPair](/es/docs/Web/API/CryptoKeyPair).
-   > **Nota:** MDN se está alejando de documentar diccionarios por separado.
+   > [!NOTE]
+   > MDN se está alejando de documentar diccionarios por separado.
    > Cuando es posible, ahora se describen como objetos en los lugares donde se usan.
 8. `"types"`: un arreglo de definiciones de tipo y tipos enumerados definidos por la API.
    Puede optar por enumerar solo aquellos que son de especial importancia o a los que se hace referencia desde varias páginas, con el fin de mantener la lista corta.
-   > **Nota:** MDN se está alejando de documentar por separado las definiciones de tipo.
+   > [!NOTE]
+   > MDN se está alejando de documentar por separado las definiciones de tipo.
    > Cuando es posible, ahora se describen como valores en los lugares donde se utilizan.
 9. `"callbacks"`: el valor es un arreglo que contiene una lista de todos los tipos de _callback_ definidos para la API.
    Puede que le resulte innecesario utilizar este grupo, incluso en las API que incluyen tipos de _callbacks_, ya que a menudo no son útiles para documentar por separado.
diff --git a/files/es/mdn/writing_guidelines/page_structures/banners_and_notices/index.md b/files/es/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
index bfed90906adb28..225ef3eb7aa007 100644
--- a/files/es/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
@@ -34,7 +34,8 @@ browser-compat: api.Ink
 Una página que tiene un banner generalmente también tendrá metadatos de página "complementarios".
 Por ejemplo, una página que tiene `\{{SeeCompatTable}}` generalmente también debe tener el estado `experimental` agregado (como se muestra arriba) para garantizar que tenga los íconos apropiados en el menú lateral.
 
-> **Nota:** Las macros de banner no _dependen_ de los metadatos, pero sí lo hacen algunos otros contenidos insertados con macros.
+> [!NOTE]
+> Las macros de banner no _dependen_ de los metadatos, pero sí lo hacen algunos otros contenidos insertados con macros.
 > Por ejemplo, la macro `\{{Compat}}` depende del valor de metadatos `browser-compat`.
 
 ## Qué banners pueden/deben agregarse
@@ -50,4 +51,5 @@ En resumen:
   También agregue `status` de `non-standard` en los metadatos de la página.
 - `\{{SecureContext_Header}}`: Esto genera un banner de **Contexto seguro** que indica que la tecnología solo está disponible en un [contexto seguro](/es/docs/Web/Security/Secure_Contexts).
 
-> **Nota:** Los metadatos `page-type`, `status` y `browser-compat` solo son utilizados en el contenido en Inglés.
+> [!NOTE]
+> Los metadatos `page-type`, `status` y `browser-compat` solo son utilizados en el contenido en Inglés.
diff --git a/files/es/mdn/writing_guidelines/page_structures/code_examples/index.md b/files/es/mdn/writing_guidelines/page_structures/code_examples/index.md
index 37bdffa5986ec8..8306e0405db36e 100644
--- a/files/es/mdn/writing_guidelines/page_structures/code_examples/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/code_examples/index.md
@@ -9,7 +9,8 @@ l10n:
 
 En MDN, encontrarás numerosos ejemplos de código insertados en las páginas para demostrar el uso de las características de la plataforma web. Este artículo discute los diferentes mecanismos disponibles para agregar ejemplos de código a las páginas, junto con cuáles debes usar y cuándo.
 
-> **Nota:** Si buscas consejos sobre el estilo y el formato del código tal como aparece en un artículo de MDN, en lugar de las diferentes formas de incluir código, consulta nuestra [Guía de estilo de código](/es/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide).
+> [!NOTE]
+> Si buscas consejos sobre el estilo y el formato del código tal como aparece en un artículo de MDN, en lugar de las diferentes formas de incluir código, consulta nuestra [Guía de estilo de código](/es/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide).
 
 ## ¿Qué tipos de ejemplos de código están disponibles?
 
diff --git a/files/es/mdn/writing_guidelines/page_structures/compatibility_tables/index.md b/files/es/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
index 5811e2050188fc..93ede99909d0c0 100644
--- a/files/es/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
@@ -61,4 +61,5 @@ Las llamadas a las macros generan las siguientes tablas (y el correspondiente co
 
 {{Specifications}}
 
-> **Nota:** El metadato `browser-compat` solo es utilizado en el contenido en Inglés.
+> [!NOTE]
+> El metadato `browser-compat` solo es utilizado en el contenido en Inglés.
diff --git a/files/es/mdn/writing_guidelines/page_structures/live_samples/index.md b/files/es/mdn/writing_guidelines/page_structures/live_samples/index.md
index c617a317df4b0a..2e52f782dcde08 100644
--- a/files/es/mdn/writing_guidelines/page_structures/live_samples/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/live_samples/index.md
@@ -80,11 +80,13 @@ El primer paso es agregar snippets o asegurarse que los existentes están listos
 
 Cada pieza de código debe estar en un bloque {{HTMLElement("pre")}}, con un bloque separado para cada lenguaje, propiamente marcado con el lenguaje correspondiente. La mayoría de las veces, esto ya se hizo, pero vale la pena volver revisar para asegurarse que cada pieza de código está estructurado con la sintaxis correcta. A la derecha del ícono **PRE** en la barra de tareas hay un menú desplegable (herramienta: Syntax Highlighter) con varios lenguajes para los que MDN hace distinción de sintaxis. Establecer el lenguaje para la distinción de sintaxis del bloque también lo correlaciona con un lenguaje para los propósitos del sistema de ejemplos ejecutables.
 
-> **Nota:** Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.
+> [!NOTE]
+> Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.
 
 Así que asegurate que la distinción de sintaxis de los bloques {{HTMLElement("pre")}} para tu código HTML, CSS, y/o JavaScript estén cada uno configurado para el lenguaje correcto, y estarás bien.
 
-> **Nota:** Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").
+> [!NOTE]
+> Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").
 
 #### Insertar la macro de ejemplo ejecutable
 
@@ -139,7 +141,8 @@ Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actu
 - Corregir bugs en un ejemplo ejecutable existente.
 - Mejorar un ejemplo ejecutable existente, o actualizar un ejemplo basándose en cambios tecnológicos.
 
-> **Nota:** Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".
+> [!NOTE]
+> Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".
 
 ### Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables
 
@@ -211,7 +214,8 @@ Aquí un enlace que resulta de llamar los bloques de código vía `\{{LiveSample
 
 ## Convenciones acerca de los ejemplos ejecutables
 
-> **Nota:** Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver [this thread](https://groups.google.com/forum/#!topic/mozilla.dev.mdc/49oqJAHFnWQ)). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.
+> [!NOTE]
+> Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver [this thread](https://groups.google.com/forum/#!topic/mozilla.dev.mdc/49oqJAHFnWQ)). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.
 
 - Orden de los bloques de código
   - : Al agregar un ejemplo ejecutable, los bloques de código deben ser organizados para que el primero corresponda al lenguaje principal (si hay uno). Por ejemplo, al agregar un ejemplo ejecutable para una referencia HTML, el primer bloque debe ser HTML, al agregar un ejemplo ejecutable para una referencia CSS, debe ser el de CSS y así.
diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md
index b60824cfa4c379..86bb0cc083d176 100644
--- a/files/es/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md
@@ -115,7 +115,8 @@ Cada ejemplo debe tener un encabezado H3 que nombre el ejemplo. El encabezado de
 
 Consulte nuestra guía sobre cómo agregar [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información.
 
-> **Nota:** A veces querrá enlazar a ejemplos dados en otra página.
+> [!NOTE]
+> A veces querrá enlazar a ejemplos dados en otra página.
 >
 > **Escenario 1:** Si tiene algunos ejemplos en esta página y algunos más en otra página:
 >
diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md
index 2d4b3eab6e0e3b..00d60edc437b21 100644
--- a/files/es/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md
@@ -96,7 +96,8 @@ Cada ejemplo debe tener un encabezado H3 (`###`) que nombre el ejemplo. El encab
 
 Consulta nuestra guía sobre cómo añadir [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información.
 
-> **Nota:** A veces querrás enlazar a ejemplos dados en otra página.
+> [!NOTE]
+> A veces querrás enlazar a ejemplos dados en otra página.
 >
 > **Escenario 1:** Si tiene algunos ejemplos en esta página y algunos ejemplos más en otra página:
 >
diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md
index f3b06671b9051a..4d381ddfa4535b 100644
--- a/files/es/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md
@@ -66,7 +66,8 @@ Incluya una descripción completa del atributo o rol.
 - Cambio de valores de atributos
   - : Explicación de cada uno
 
-> **Nota:** Incluye una nota sobre alternativas semánticas al uso de este rol o atributo. La primera regla de uso de ARIA es que puedes usar una función nativa con la semántica y el comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y **agregar** un rol, estado o propiedad de ARIA para hacerlo accesible, y luego hacerlo. Luego publique todos los detalles en la sección de mejores prácticas a continuación.
+> [!NOTE]
+> Incluye una nota sobre alternativas semánticas al uso de este rol o atributo. La primera regla de uso de ARIA es que puedes usar una función nativa con la semántica y el comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y **agregar** un rol, estado o propiedad de ARIA para hacerlo accesible, y luego hacerlo. Luego publique todos los detalles en la sección de mejores prácticas a continuación.
 
 ## Ejemplos
 
@@ -78,7 +79,8 @@ Cada ejemplo debe tener un encabezado H3 (`###`) que nombre el ejemplo. El encab
 
 Consulta nuestra guía sobre cómo añadir [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información.
 
-> **Nota:** A veces querrás enlazar a ejemplos dados en otra página.
+> [!NOTE]
+> A veces querrás enlazar a ejemplos dados en otra página.
 >
 > **Escenario 1:** Si tiene algunos ejemplos en esta página y algunos ejemplos más en otra página:
 >
diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md
index e37292cbb54631..7f64fa1acda909 100644
--- a/files/es/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md
@@ -130,7 +130,8 @@ Cada ejemplo debe tener un título H3 (`###`) que nombre el ejemplo. El título
 
 Consulta nuestra guía sobre cómo agregar [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información.
 
-> **Nota:** A veces querrás enlazar a ejemplos dados en otra página.
+> [!NOTE]
+> A veces querrás enlazar a ejemplos dados en otra página.
 >
 > **Escenario 1:** Si tienes algunos ejemplos en esta página y algunos más en otra página:
 >
diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md
index 93946ba66c01b3..abd02c88c3ac31 100644
--- a/files/es/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md
@@ -96,7 +96,8 @@ Cada ejemplo debe tener un encabezado H3 (`###`) que nombre el ejemplo. El encab
 
 Consulta nuestra guía sobre cómo añadir [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información.
 
-> **Nota:** A veces, querrás vincular a ejemplos dados en otra página.
+> [!NOTE]
+> A veces, querrás vincular a ejemplos dados en otra página.
 >
 > **Escenario 1:** Si tiene algunos ejemplos en esta página y algunos ejemplos más en otra página:
 >
diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md
index b972f2f9babfa0..6546ca140b4c86 100644
--- a/files/es/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md
@@ -132,7 +132,8 @@ Cada ejemplo debe tener un encabezado H3 (###) que nombre el ejemplo. El encabez
 
 Consulta nuestra guía sobre cómo agregar [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información.
 
-> **Nota:** A veces querrás enlazar a ejemplos dados en otra página.
+> [!NOTE]
+> A veces querrás enlazar a ejemplos dados en otra página.
 >
 > **Escenario 1:** Si tienes algunos ejemplos en esta página y algunos más en otra página:
 >
diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md
index 2abaff76970f18..d94da1252a3670 100644
--- a/files/es/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md
@@ -116,7 +116,8 @@ Cada ejemplo debe tener un encabezado H3 (`###`) que nombre el ejemplo. El encab
 
 Consulta nuestra guía sobre cómo agregar [ejemplos de código](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples) para obtener más información.
 
-> **Nota:** A veces querrás vincular a ejemplos dados en otra página.
+> [!NOTE]
+> A veces querrás vincular a ejemplos dados en otra página.
 >
 > **Escenario 1:** Si tienes algunos ejemplos en esta página y algunos más en otra página:
 >
diff --git a/files/es/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md b/files/es/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
index d4b39e9d2a1cdf..2fda288cc35132 100644
--- a/files/es/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
+++ b/files/es/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
@@ -51,7 +51,8 @@ Hay muchas bibliotecas y _frameworks_ en existencia, que no son estándares web
 
 El equipo de MDN Web Docs se concentra en documentar la plataforma web abierta. Si quieres que se considere una tecnología en esta área para la documentación en MDN Web Docs, necesitarás tener una comunidad reunida que esté dispuesta a escribir la documentación y mantenerla después de completarla. Nuestro equipo está feliz de proporcionar orientación en tales casos, incluidas ediciones y comentarios, pero no tenemos los recursos para más que eso.
 
-> **Nota:** El trabajo de MDN Web Docs se lleva a cabo en GitHub y 'en abierto'. Tu equipo debería estar familiarizado con git y GitHub y sentirse cómodo trabajando en código abierto.
+> [!NOTE]
+> El trabajo de MDN Web Docs se lleva a cabo en GitHub y 'en abierto'. Tu equipo debería estar familiarizado con git y GitHub y sentirse cómodo trabajando en código abierto.
 
 ## Proceso para seleccionar la nueva tecnología
 
@@ -79,7 +80,8 @@ Las tecnologías serán consideradas para su inclusión en MDN Web Docs caso por
 
 No necesitas proporcionarnos cientos de páginas de detalle en esta etapa (de hecho, preferiríamos que no lo hicieras). Un par de párrafos sobre cada uno de los puntos anteriores son más que adecuados.
 
-> **Nota:** MDN Web Docs es principalmente un sitio en inglés (en-US). El idioma principal para tu proyecto debe ser en inglés de EE. UU.
+> [!NOTE]
+> MDN Web Docs es principalmente un sitio en inglés (en-US). El idioma principal para tu proyecto debe ser en inglés de EE. UU.
 
 ### Esperar una respuesta
 
diff --git a/files/es/mdn/writing_guidelines/what_we_write/index.md b/files/es/mdn/writing_guidelines/what_we_write/index.md
index b327fd7a685db3..fd3e5c3244834f 100644
--- a/files/es/mdn/writing_guidelines/what_we_write/index.md
+++ b/files/es/mdn/writing_guidelines/what_we_write/index.md
@@ -58,7 +58,8 @@ Nuestro objetivo principal es escribir sobre las siguientes tecnologías web fro
 
 También documentamos algunos temas más amplios, como [SVG](/es/docs/Web/SVG), [XML](/es/docs/Web/XML), [WebAssembly](/es/docs/WebAssembly) y [Accesibilidad](/es/docs/Learn/Accessibility). Además, proporcionamos extensas [guías de aprendizaje](/es/docs/Learn) para estas tecnologías y también un [glosario](/es/docs/Glossary).
 
-> **Nota:** Las tecnologías de backend generalmente tienen su propia documentación en otro lugar que MDN Web Docs no intenta reemplazar, aunque [tenemos algunas excepciones](/es/docs/Learn/Server-side).
+> [!NOTE]
+> Las tecnologías de backend generalmente tienen su propia documentación en otro lugar que MDN Web Docs no intenta reemplazar, aunque [tenemos algunas excepciones](/es/docs/Learn/Server-side).
 
 Todo el contenido de MDN Web Docs debe ser relevante para la sección de tecnología en la que aparece. Se espera que los colaboradores sigan estas [pautas de escritura de MDN](/es/docs/MDN/Writing_guidelines) para el estilo de escritura, las muestras de código y otros temas.
 
diff --git a/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
index f9b10e71cb2d2b..bb95d126b9930b 100644
--- a/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
+++ b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
@@ -23,7 +23,8 @@ Prettier formatea todo el código y mantiene el estilo consistente. Sin embargo,
 
 ## Documento HTML completo
 
-> **Nota:** Las pautas de esta sección solo se aplican cuando necesita mostrar un documento HTML completo. Por lo general, un fragmento es suficiente para demostrar una función. Cuando utilice la [macro EmbedLiveSample](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples#traditional_live_samples), simplemente incluya el fragmento HTML se insertará automáticamente en un documento HTML completo cuando se muestre.
+> [!NOTE]
+> Las pautas de esta sección solo se aplican cuando necesita mostrar un documento HTML completo. Por lo general, un fragmento es suficiente para demostrar una función. Cuando utilice la [macro EmbedLiveSample](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples#traditional_live_samples), simplemente incluya el fragmento HTML se insertará automáticamente en un documento HTML completo cuando se muestre.
 
 ### Tipo de documento
 
diff --git a/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
index 0a43458f98fe54..c803e31b6ef6a3 100644
--- a/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
+++ b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
@@ -58,7 +58,8 @@ Para garantizar el formato adecuado y el resaltado de sintaxis de los bloques de
 
 Si el bloque de código es pseudocódigo, la salida de un comando, o de alguna manera no es un lenguaje de programación, establece explícitamente el lenguaje como `plain`.
 
-> **Advertencia:** si el lenguaje deseado aún no es compatible con MDN, **no** establezcas el lenguaje de un bloque de código en un lenguaje similar, ya que hacerlo puede tener efectos secundarios no deseados con el formato de Prettier y el resaltado de sintaxis.
+> [!WARNING]
+> Si el lenguaje deseado aún no es compatible con MDN, **no** establezcas el lenguaje de un bloque de código en un lenguaje similar, ya que hacerlo puede tener efectos secundarios no deseados con el formato de Prettier y el resaltado de sintaxis.
 
 ### Longitud de línea de código
 
diff --git a/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
index 34c2e50f32d4f8..622bd4f1dc4d80 100644
--- a/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
+++ b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
@@ -427,9 +427,11 @@ Cuando los [bucles](/es/docs/Learn/JavaScript/Building_blocks/Looping_code) son
   }
   ```
 
-> **Advertencia:** Nunca utilice `for...in` en matrices y cadenas.
+> [!WARNING]
+> Nunca utilice `for...in` en matrices y cadenas.
 
-> **Nota:** Considere no usar un bucle `for` en absoluto. Si estás utilizando un [`Array`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array) (o un [`String`](/es/docs/Web/JavaScript/Reference/Global_Objects/String) para algunas operaciones), considere usar más métodos de iteración semántica en su lugar, como [`map()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [`every()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/every), [`findIndex()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex), [`find()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [`includes()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/includes), y muchos más.
+> [!NOTE]
+> Considere no usar un bucle `for` en absoluto. Si estás utilizando un [`Array`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array) (o un [`String`](/es/docs/Web/JavaScript/Reference/Global_Objects/String) para algunas operaciones), considere usar más métodos de iteración semántica en su lugar, como [`map()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [`every()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/every), [`findIndex()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex), [`find()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [`includes()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/includes), y muchos más.
 
 ### Sentencias de control
 
@@ -557,7 +559,8 @@ Las sentencias `switch` pueden ser un poco complicadas.
   }
   ```
 
-> **Nota:** Tenga en cuenta que solo los errores _recuperables_ deben detectarse y manejarse.
+> [!NOTE]
+> Tenga en cuenta que solo los errores _recuperables_ deben detectarse y manejarse.
 > Todos los errores no recuperables deben dejarse pasar y aumentar la pila de llamadas.
 
 ## Objetos
@@ -788,7 +791,8 @@ Los buenos nombres de variables son esenciales para comprender el código.
   const s = d / t;
   ```
 
-> **Nota:** El único lugar donde está permitido no usar nombres semánticos legibles por humanos es donde existe una convención comúnmente reconocida, como usar `i` y `j` para iteradores de bucle.
+> [!NOTE]
+> El único lugar donde está permitido no usar nombres semánticos legibles por humanos es donde existe una convención comúnmente reconocida, como usar `i` y `j` para iteradores de bucle.
 
 ### Declaración de Variables
 
diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/index.md b/files/es/mozilla/add-ons/webextensions/api/storage/index.md
index 8a13037cb8a9f9..eeac133e349e9c 100644
--- a/files/es/mozilla/add-ons/webextensions/api/storage/index.md
+++ b/files/es/mozilla/add-ons/webextensions/api/storage/index.md
@@ -20,7 +20,8 @@ Cada extensión tiene su propia área de almacenamiento, que se puede dividir en
 
 Aunque esta API es similar a {{domxref ("Window.localStorage")}}, se recomienda que no use Window\.localStorage en el código de extensión para almacenar datos relacionados con la extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API [`storage.local`](/es/docs/Mozilla/Add-ons/WebExtensions/API/storage/local) se conservarán correctamente en estos escenarios.
 
-> **Nota:** El área de almacenamiento no está encriptada y no debe utilizarse para almacenar información confidencial del usuario, como claves.
+> [!NOTE]
+> El área de almacenamiento no está encriptada y no debe utilizarse para almacenar información confidencial del usuario, como claves.
 
 ## Tipos
 
diff --git a/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md
index 46a8f8ebf0791b..db2220958f0ecb 100644
--- a/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md
+++ b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{WebExtAllCompatTables}}
 
-> **Nota:** Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la licencia Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la licencia Creative Commons Attribution 3.0 United States License.
 
 ## Véase también
 
diff --git a/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.md b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.md
index 2e9f05058a733f..5981db810dbd26 100644
--- a/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.md
+++ b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.md
@@ -13,7 +13,8 @@ Con WebExtensions, los ajustes generalmente se almacenan utilizando la API [`sto
 - Escribir un script, incluido desde el archivo HTML , que establece la página de configuración desde su almacenamiento y actualiza los ajustes seleccionados cuando el usuario los modifica.
 - Establecer la ruta al archivo HTML como la clave [`options_ui`](/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) en manifest.json. Haciendo esto, el documento HTML se mostrará en el administrador de complementos del navegador, junto al nombre del complemento y su descripción.
 
-> **Nota:** También puedes abrir esta página mediante programación utilizando la función [`runtime.openOptionsPage()`](/es/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage) .
+> [!NOTE]
+> También puedes abrir esta página mediante programación utilizando la función [`runtime.openOptionsPage()`](/es/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage) .
 
 ## Una sencilla ExtensionWeb
 
diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.md b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.md
index f31e2253b2ae63..bf4023e1999bcd 100644
--- a/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.md
+++ b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.md
@@ -49,7 +49,8 @@ Puede usar SVG y el navegador escalará su icono adecuadamente. Sin embargo, hay
    }
    ```
 
-> **Nota:** Si está usando un programa como Inkscape para crear SVG, puede que quiera guardarlo como un "SVG simple". Firefox podría confundirse con varios espacios de nombres especiales y no mostrar su icono.
+> [!NOTE]
+> Si está usando un programa como Inkscape para crear SVG, puede que quiera guardarlo como un "SVG simple". Firefox podría confundirse con varios espacios de nombres especiales y no mostrar su icono.
 
 ## Compatibilidad con navegadores
 
diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/index.md b/files/es/mozilla/add-ons/webextensions/manifest.json/index.md
index c1dbbf39a1e19a..feed6e47c70535 100644
--- a/files/es/mozilla/add-ons/webextensions/manifest.json/index.md
+++ b/files/es/mozilla/add-ons/webextensions/manifest.json/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json
 
 {{AddonSidebar}}
 
-> **Nota:** Este artículo describe manifest.json para extensiones web. Si estás buscando información acerca de manifest.json en PWAs, revisa el artículo sobre [Web App Manifest](/es/docs/Web/Manifest).
+> [!NOTE]
+> Este artículo describe manifest.json para extensiones web. Si estás buscando información acerca de manifest.json en PWAs, revisa el artículo sobre [Web App Manifest](/es/docs/Web/Manifest).
 
 El archivo `manifest.json` es el único archivo que toda extensión usando la API WebExtension debe contener necesariamente.
 
diff --git a/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.md b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.md
index 31218da5247aff..3c55e1b218b343 100644
--- a/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.md
+++ b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.md
@@ -37,9 +37,11 @@ Para empezar, crea un nuevo directorio llamado "modify-page". En este directorio
 
 La llave [`content_scripts`](/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) es el método de carga de scripts a páginas cuya URL encaje con los patrones. En este caso, `content_scripts` le dice al navegador que cargue una script llamada "page-eater.js" en todas las páginas con <https://developer.mozilla.org/>.
 
-> **Nota:** Debido a que el atributo `"js"` de `content_scripts` es una array, puedes usarla para inyectar más de una script a las páginas que encajen con el patrón. Si haces esto las páginas compartiran el mismo campo de aplicación, igual que múltiples scripts cargadas por una página, y son cargadas en el mismo orden en las que están dispuestas en la array.
+> [!NOTE]
+> Debido a que el atributo `"js"` de `content_scripts` es una array, puedes usarla para inyectar más de una script a las páginas que encajen con el patrón. Si haces esto las páginas compartiran el mismo campo de aplicación, igual que múltiples scripts cargadas por una página, y son cargadas en el mismo orden en las que están dispuestas en la array.
 
-> **Nota:** La llave `content_scripts` tambien tiene un atributo de `"css"` que puedes usar para inyectar código CSS.
+> [!NOTE]
+> La llave `content_scripts` tambien tiene un atributo de `"css"` que puedes usar para inyectar código CSS.
 
 Después, crea un archivo llamado "page-eater.js" dentro del directorio "modify-page" e introduce el contenido de a continuación:
 
@@ -55,7 +57,8 @@ Ahora, [instala la extensión](/es/Add-ons/WebExtensions/Temporary_Installation_
 
 {{EmbedYouTube("lxf2Tkg6U1M")}}
 
-> **Nota:** Ten en cuenta que aunque este video muestra el contenido de la script operando en [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/), las scripts de contenido están bloqueadas en esta página por el momento.
+> [!NOTE]
+> Ten en cuenta que aunque este video muestra el contenido de la script operando en [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/), las scripts de contenido están bloqueadas en esta página por el momento.
 
 ## Modificando las páginas programaticamente
 
@@ -114,7 +117,8 @@ Ahora [recarga la extensión](/es/Add-ons/WebExtensions/Temporary_Installation_i
 
 {{EmbedYouTube("zX4Bcv8VctA")}}
 
-> **Nota:** Ten en cuenta que aunque este video muestra el contenido de la script operando en [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/), las scripts de contenido están bloqueadas en esta página por el momento.
+> [!NOTE]
+> Ten en cuenta que aunque este video muestra el contenido de la script operando en [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/), las scripts de contenido están bloqueadas en esta página por el momento.
 
 ## Mensajería
 
@@ -177,7 +181,8 @@ Ahora, en vez de simplemente comer la página, el contenido espera a un mensaje
 
 Debido a que [`tabs.executeScript()`](/es/Add-ons/WebExtensions/API/tabs/executeScript) es una función asincrónica y para asegurarnos de que mandamos el mensaje solo cuando el escuchador ha sido añadido en "page-eater.js", usamos `onExecuted` que sera llamado después de que "page-eater.js" se ejecute.
 
-> **Nota:** Pulsa Ctrl+Shift+J (o Cmd+Shift+J en el Mac) o `web-ext run --bc` para abrir la consola de navegación para ver `console.log` en la script de fondo. Alternativamente puedes usar el [Add-on Debugger](/es/Add-ons/Add-on_Debugger), el cual te permite poner un breakpoint. De momento no hay forma de iniciar un [Add-on Debugger directamente de una extensión web](https://github.com/mozilla/web-ext/issues/759).
+> [!NOTE]
+> Pulsa Ctrl+Shift+J (o Cmd+Shift+J en el Mac) o `web-ext run --bc` para abrir la consola de navegación para ver `console.log` en la script de fondo. Alternativamente puedes usar el [Add-on Debugger](/es/Add-ons/Add-on_Debugger), el cual te permite poner un breakpoint. De momento no hay forma de iniciar un [Add-on Debugger directamente de una extensión web](https://github.com/mozilla/web-ext/issues/759).
 
 Si queremos enviar mensajes directamente desde el contenido script de vuelta a la página de fondo, podríamos usar[`runtime.sendMessage()`](/es/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage) en vez de [`tabs.sendMessage()`](/es/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage). Por ejemplo:
 
@@ -187,7 +192,8 @@ browser.runtime.sendMessage({
 });
 ```
 
-> **Nota:** Todos estos ejemplos inyectan Javascript; también puedes inyectar CSS programaticamente usando la función[`tabs.insertCSS()`](/es/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS).
+> [!NOTE]
+> Todos estos ejemplos inyectan Javascript; también puedes inyectar CSS programaticamente usando la función[`tabs.insertCSS()`](/es/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS).
 
 ## Aprende más
 
diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/index.md b/files/es/mozilla/add-ons/webextensions/user_interface/index.md
index 60a05958888c12..d1b6a6eb72b697 100644
--- a/files/es/mozilla/add-ons/webextensions/user_interface/index.md
+++ b/files/es/mozilla/add-ons/webextensions/user_interface/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Las extensiones que usan las API de WebExtension se proporcionan con varias opciones de interfaz de usuario para que su funcionalidad pueda estar disponible para el usuario. A continuación se proporciona un resumen de esas opciones, con una introducción más detallada a cada opción de la interfaz de usuario en esta sección.
 
-> **Nota:** Para obtener consejos sobre el uso de estos componentes de la interfaz de usuario para crear una excelente experiencia de usuario en su extensión, consulte el artículo [Prácticas recomendadas para la experiencia del usuario](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/).
+> [!NOTE]
+> Para obtener consejos sobre el uso de estos componentes de la interfaz de usuario para crear una excelente experiencia de usuario en su extensión, consulte el artículo [Prácticas recomendadas para la experiencia del usuario](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/).
 
 <table class="standard-table">
   <thead>
diff --git a/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.md
index c601cfd3c685e9..32d3de10db507c 100644
--- a/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.md
+++ b/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
 
 {{AddonSidebar}}
 
-> **Nota:** Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a [cómo se ponen juntos los archivos](/es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). Entonces, usa la [documentación de referencia](/es/docs/Mozilla/Add-ons/WebExtensions#Reference) para empezar a construir tu extensión. Visita el [Firefox Extension Workshop](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension) para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.
+> [!NOTE]
+> Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a [cómo se ponen juntos los archivos](/es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). Entonces, usa la [documentación de referencia](/es/docs/Mozilla/Add-ons/WebExtensions#Reference) para empezar a construir tu extensión. Visita el [Firefox Extension Workshop](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension) para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.
 
 En este artículo abordaremos la creación de una extensión para Firefox, desde el comienzo hasta el final. La extensión solo agrega un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.
 
@@ -125,7 +126,8 @@ Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde ro
 
 {{EmbedYouTube("rxBQl2Z9IBQ")}}
 
-> **Nota:** No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.
+> [!NOTE]
+> No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.
 
 Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:
 
diff --git a/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.md
index 072c99fe7a9712..79dd34e6575690 100644
--- a/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.md
+++ b/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.md
@@ -307,7 +307,8 @@ browser.tabs
 
 Empecemos por la linea 96. La ventana emergente ejecuta un script de contenido en la pestaña activa tan pronto como se termina de cargar, usando la API [`browser.tabs.executeScript()`](/es/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript). Si la ejecución del script de contenido es exitosa, este quedará cargado en la página hasta que sea cerrada la pestaña o hasta que el usuario navegue hacia una página distinta.
 
-> **Nota:** Un motivo común por el cual el llamado a `browser.tabs.executeScript()` puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio [addons.mozilla.org](https://addons.mozilla.org/), no es posible hacerlo.
+> [!NOTE]
+> Un motivo común por el cual el llamado a `browser.tabs.executeScript()` puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio [addons.mozilla.org](https://addons.mozilla.org/), no es posible hacerlo.
 
 Si la ejecución falla, `reportExecuteScriptError()` ocultará el `<div>` `"popup-content"`, mostrará el `<div>` `"error-content"`, y reportará el error en la consola.
 
diff --git a/files/es/mozilla/firefox/releases/3/updating_extensions/index.md b/files/es/mozilla/firefox/releases/3/updating_extensions/index.md
index c587e920aab0f0..24382bc7558ec8 100644
--- a/files/es/mozilla/firefox/releases/3/updating_extensions/index.md
+++ b/files/es/mozilla/firefox/releases/3/updating_extensions/index.md
@@ -128,7 +128,8 @@ O bien, emplear la siguiente técnica para hacer que la superposición funcione
 </window>
 ```
 
-> **Nota:** Este cambio es efectivo para Firefox 3 beta 4 y la prebeta 4.
+> [!NOTE]
+> Este cambio es efectivo para Firefox 3 beta 4 y la prebeta 4.
 
 #### Otros cambios
 
diff --git a/files/es/mozilla/firefox/releases/3/updating_web_applications/index.md b/files/es/mozilla/firefox/releases/3/updating_web_applications/index.md
index dd514d8d5679eb..7e64b8beaf850d 100644
--- a/files/es/mozilla/firefox/releases/3/updating_web_applications/index.md
+++ b/files/es/mozilla/firefox/releases/3/updating_web_applications/index.md
@@ -65,7 +65,8 @@ content mypackage location/ contentaccessible=yes
 
 Esto no debería ser algo que se haga muy seguido, pero está disponible para aquellos casos raros en los que es necesario. Debe tomarse en cuenta que es posible que Firefox alerte al usuario que su extensión utiliza una bandera en el contentaccessible de alguna manera, ya que consituye un riesgo potencial en la seguridad.
 
-> **Nota:** Ya que Firefox 2 no entiende la bandera `contentaccessible` (ignorará la instrucción completa de que contiene la bandera), si se desea que el complemento sea compatible con Firefox 2 y Firefox 3, hay que hacer algo como esto:
+> [!NOTE]
+> Ya que Firefox 2 no entiende la bandera `contentaccessible` (ignorará la instrucción completa de que contiene la bandera), si se desea que el complemento sea compatible con Firefox 2 y Firefox 3, hay que hacer algo como esto:
 >
 > ```
 > content mypackage location/
diff --git a/files/es/mozilla/firefox/releases/57/index.md b/files/es/mozilla/firefox/releases/57/index.md
index f49370e8e3898d..2079f76cc3ee45 100644
--- a/files/es/mozilla/firefox/releases/57/index.md
+++ b/files/es/mozilla/firefox/releases/57/index.md
@@ -11,7 +11,8 @@ Este artículo proporciona información sobre los cambios incluidos en Firefox 5
 
 Hemos bautizado a Firefox 57 como **Quantum** por el proyecto de ingeniería [Firefox Quantum](https://wiki.mozilla.org/Quantum), cuyo objetivo ha sido el de reconstruir Firefox desde cero para darle un rendimiento y una estabilidad excelentes, así como mejorar su apariencia visual. Esta es la primera versión de Firefox en incluir algunos de estos cambios, así que quisimos conmemorar el acontecimiento.
 
-> **Nota:** para obtener más información sobre las funciones de Quantum incluidas en esta versión, consúltese el artículo [«Firefox Quantum Developer Edition: el Firefox más rápido, con IU Photon y mejores herramientas»](https://hacks.mozilla.org/2017/09/firefox-quantum-developer-edition-fastest-firefox-ever/), escrito por Dan Callahan.
+> [!NOTE]
+> Para obtener más información sobre las funciones de Quantum incluidas en esta versión, consúltese el artículo [«Firefox Quantum Developer Edition: el Firefox más rápido, con IU Photon y mejores herramientas»](https://hacks.mozilla.org/2017/09/firefox-quantum-developer-edition-fastest-firefox-ever/), escrito por Dan Callahan.
 
 [El nuevo procesador de CSS en paralelo de Firefox](https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/) ―también denominado **Quantum CSS** o **Stylo**― está activado de manera predeterminada en Firefox 57 para escritorio; las versiones para móviles darán el salto en el futuro. Los programadores no deberían notar ninguna diferencia importante, aparte de la amplia gama de mejoras de rendimiento. Sin embargo, existen algunas diferencias menores de funcionalidad en Stylo, las cuales se han implementado para corregir comportamientos no estándares de Gecko que habrían de desaparecer. Informaremos de esas diferencias en las páginas de referencia y en las notas de publicación según proceda (véanse [Notas sobre Quantum CSS](#notas_sobre_quantum_css)).
 
@@ -83,7 +84,8 @@ _No hay ningún cambio._
 
 - Ahora se admiten mensajes de cualquier tamaño (hasta 1 GiB, aunque 256 kiB es más interoperativo) en {{domxref("RTCDataChannel")}} por medio del uso de la opción «end-of-record» (EOR) en los mensajes de SCTP. Consúltese [Understanding message size limits](/es/docs/Web/API/WebRTC_API/Using_data_channels#understanding_message_size_limits) para obtener más información ([Error 979417 en Firefox](https://bugzil.la/979417)).
 
-  > **Nota:** Como Firefox aún no admite el protocolo ndata de SCTP, que permite intercalar mensajes de SCTP de varias fuentes, enviar objetos de datos grandes puede causar retardos importantes en el resto del tránsito SCTP. Véase el [Error 1381145 en Firefox](https://bugzil.la/1381145) para estar al tanto de la implementación de ndata en Firefox.
+  > [!NOTE]
+  > Como Firefox aún no admite el protocolo ndata de SCTP, que permite intercalar mensajes de SCTP de varias fuentes, enviar objetos de datos grandes puede causar retardos importantes en el resto del tránsito SCTP. Véase el [Error 1381145 en Firefox](https://bugzil.la/1381145) para estar al tanto de la implementación de ndata en Firefox.
 
 - El método {{domxref("RTCDataChannel.send()")}} ahora puede emitir una excepción `TypeError` si el tamaño del mensaje que se intenta enviar no es compatible con el agente de usuario de destino (esto se implementó como parte del [Error 979417 en Firefox](https://bugzil.la/979417)).
 - La [API MediaStream Recording](/es/docs/Web/API/MediaStream_Recording_API) se ha actualizado de modo que los sucesos [`error`](/es/docs/Web/Reference/Events/error) que se envíen para notificar problemas acaecidos durante la grabación son ahora del tipo {{domxref("MediaRecorderErrorEvent")}} en lugar de sucesos genéricos.
@@ -119,7 +121,8 @@ _No hay ningún cambio._
 
 ## Cambios relativos a los complementos y los programadores de Mozilla
 
-> **Nota:** A partir de Firefox 57, se ha eliminado por completo la compatibilidad con los complementos basados en la tecnología XPCOM. Todas las extensiones deben convertirse para emplear la [tecnología nueva](/es/Add-ons/WebExtensions), conocida como WebExtensions, o de lo contrario dejarán de funcionar.
+> [!NOTE]
+> A partir de Firefox 57, se ha eliminado por completo la compatibilidad con los complementos basados en la tecnología XPCOM. Todas las extensiones deben convertirse para emplear la [tecnología nueva](/es/Add-ons/WebExtensions), conocida como WebExtensions, o de lo contrario dejarán de funcionar.
 
 ### WebExtensions
 
diff --git a/files/es/mozilla/firefox/releases/9/updating_add-ons/index.md b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.md
index 71f4efde11612b..e9a8074e52a208 100644
--- a/files/es/mozilla/firefox/releases/9/updating_add-ons/index.md
+++ b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.md
@@ -13,7 +13,8 @@ Si tu complemento se distribuye en [addons.mozilla.org](https://addons.mozilla.o
 
 Así que puedes empezar visitando AMO para comprobar si tu complemento requiere trabajo.
 
-> **Nota:** Todavía debes testear tu complemento en Firefox 9, incluso si ha sido actualizado automáticamente. Existen casos extremos que pueden no ser automáticamente detectados.
+> [!NOTE]
+> Todavía debes testear tu complemento en Firefox 9, incluso si ha sido actualizado automáticamente. Existen casos extremos que pueden no ser automáticamente detectados.
 
 ## Los componentes de inicio pueden remover scripts con carga retrasada
 
diff --git a/files/es/orphaned/web/css/-moz-context-properties/index.md b/files/es/orphaned/web/css/-moz-context-properties/index.md
index ddb0aa6ae588df..c8ced33c575aa1 100644
--- a/files/es/orphaned/web/css/-moz-context-properties/index.md
+++ b/files/es/orphaned/web/css/-moz-context-properties/index.md
@@ -6,7 +6,8 @@ original_slug: Web/CSS/-moz-context-properties
 
 {{CSSRef}}{{Non-standard_header}}
 
-> **Nota:** Este recurso esta disponible desde Firefox 55, pero solamente es compatible con imagenes SVG cargadas via `chrome://` o `resource://` URLs. Para experimentar con la caracteristica SVG en la web, es necesario poner `svg.context-properties.content.enabled` en `true`.
+> [!NOTE]
+> Este recurso esta disponible desde Firefox 55, pero solamente es compatible con imagenes SVG cargadas via `chrome://` o `resource://` URLs. Para experimentar con la caracteristica SVG en la web, es necesario poner `svg.context-properties.content.enabled` en `true`.
 
 Si mencionas una imagen SVG en una pagina web({{htmlelement("img")}} como elemento o como fondo de pagina), la imagen SVG puede coordinarse con el elemento incrustado(su contexto) para que la imagen adopte las propiedades puestas en el elemento incrustado. Para hacer esto, el elemento incrustado necesita listar las propiedades que deben estar disponibles para la imagen listadolas como valores de la propiedad **`-moz-context-properties`**, y la imagen necesita optar a usar esas propiedades utilizando valores tales como el valor de `context-fill`.
 
@@ -66,7 +67,8 @@ Ahora que has hecho eso la imagen SVG puede utlizar los valores de {{cssxref("fi
 
 Aqui hemos puesto que la imagen `src` sea una URL de datos que contiene una imagen SVG simple; el `<rect>` de dentro ha sido hecho para coger sus valores de `fill` y `stroke` de {{cssxref("fill")}} y {{cssxref("stroke")}} puestos en el elemento `<img>` poniendo `context-fill`/`context-stroke` en sus valores asi como un color para rellenar(rojo) que sera utilizado en caso que el SVG es cargado independientemente en una ventana superior(donde no tendra contexto para dar los valores ). Tener en cuenta que si un colore es directamente puesto en el SVG, pero el color del contexto tambien es especificado, el color del contexto sobreescribe el color directo.
 
-> **Nota:** Puedes en contrar un [ejemplo de ejecucion en Github](https://mdn.github.io/css-examples/moz-context-properties/).
+> [!NOTE]
+> Puedes en contrar un [ejemplo de ejecucion en Github](https://mdn.github.io/css-examples/moz-context-properties/).
 
 ## Especificaciones
 
diff --git a/files/es/orphaned/web/css/css_properties_reference/index.md b/files/es/orphaned/web/css/css_properties_reference/index.md
index 6fb5662d0ff0ba..1c2eb0a8298163 100644
--- a/files/es/orphaned/web/css/css_properties_reference/index.md
+++ b/files/es/orphaned/web/css/css_properties_reference/index.md
@@ -8,7 +8,8 @@ original_slug: Web/CSS/CSS_Properties_Reference
 
 La siguiente lista es una lista de la propiedades CSS más comunes junto con su equivalente en notación DOM que es cómo son normalmente accedidas desde JavaScript.
 
-> **Nota:** Es una lista incompleta. Para descubrir más propiedades CSS visita [la referencia principal CSS ](/es/docs/Web/CSS/Reference)y and [las Extensiones CSS de Mozilla](/es/docs/Web/CSS/Mozilla_Extensions). Los artículos de referencia incluyen ejemplos sobre cómo usar todas estas propiedades.
+> [!NOTE]
+> Es una lista incompleta. Para descubrir más propiedades CSS visita [la referencia principal CSS ](/es/docs/Web/CSS/Reference)y and [las Extensiones CSS de Mozilla](/es/docs/Web/CSS/Mozilla_Extensions). Los artículos de referencia incluyen ejemplos sobre cómo usar todas estas propiedades.
 
 | **CSS**               | **JavaScript**       |
 | --------------------- | -------------------- |
diff --git a/files/es/orphaned/web/css/ime-mode/index.md b/files/es/orphaned/web/css/ime-mode/index.md
index eae75016a49e59..ddccb2834f7a6f 100644
--- a/files/es/orphaned/web/css/ime-mode/index.md
+++ b/files/es/orphaned/web/css/ime-mode/index.md
@@ -54,11 +54,13 @@ input[type=password] {
 }
 ```
 
-> **Nota:** En general, no es apropiado por un sitio público la manipulación el estado del modo de IME. Esta propiedad debería usarse para aplicaciones web o similares.
+> [!NOTE]
+> En general, no es apropiado por un sitio público la manipulación el estado del modo de IME. Esta propiedad debería usarse para aplicaciones web o similares.
 
 La versión de Gecko 1.9 para Macintosh no es capaz de recuperar el estado previo del IME cuando el campo para el cual se ha desactivado pierde el foco, por tanto, los usuarios de Mac podrían enfadarse cuando se utiliza el valor `disabled`.
 
-> **Nota:** Desactivar el IME para prevenir la entrada de caracteres extendidos en los formularios no impide que los usuarios puedan pegar caracteres extendidos en los campos del formulario.
+> [!NOTE]
+> Desactivar el IME para prevenir la entrada de caracteres extendidos en los formularios no impide que los usuarios puedan pegar caracteres extendidos en los campos del formulario.
 
 ### Especificaciones
 
diff --git a/files/es/web/accessibility/aria/attributes/aria-label/index.md b/files/es/web/accessibility/aria/attributes/aria-label/index.md
index c10b6c48132d2f..424f5720700e72 100644
--- a/files/es/web/accessibility/aria/attributes/aria-label/index.md
+++ b/files/es/web/accessibility/aria/attributes/aria-label/index.md
@@ -15,7 +15,8 @@ string
 
 ### Posibles efectos sobre los agentes de usuario y la tecnología de asistencia
 
-> **Nota:** Las opiniones pueden diferir en cómo la tecnología asistencial debe manejar esta técnica. La información proporcionada más arriba es una de esas opiniones y por lo tanto no normativa.
+> [!NOTE]
+> Las opiniones pueden diferir en cómo la tecnología asistencial debe manejar esta técnica. La información proporcionada más arriba es una de esas opiniones y por lo tanto no normativa.
 
 ## Ejemplos
 
diff --git a/files/es/web/accessibility/aria/attributes/aria-required/index.md b/files/es/web/accessibility/aria/attributes/aria-required/index.md
index dc1d7fd166c5dc..144488b1ec76e0 100644
--- a/files/es/web/accessibility/aria/attributes/aria-required/index.md
+++ b/files/es/web/accessibility/aria/attributes/aria-required/index.md
@@ -21,7 +21,8 @@ Los lectores de pantalla deben anunciar el campo como requerido.
 
 Nota que este atributo no cambiará automáticamente la presentación del campo.
 
-> **Nota:** Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente. La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
+> [!NOTE]
+> Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente. La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
 
 ### Ejemplos
 
diff --git a/files/es/web/accessibility/aria/attributes/index.md b/files/es/web/accessibility/aria/attributes/index.md
index ab5cf54bfcfa51..d179a5c178e74b 100644
--- a/files/es/web/accessibility/aria/attributes/index.md
+++ b/files/es/web/accessibility/aria/attributes/index.md
@@ -9,7 +9,8 @@ Esta página enumera las páginas de referencia que cubren todos los atributos d
 
 Los atributos <abbr>ARIA</abbr> permiten modificar los estados y las propiedades de un elemento tal como se define en el árbol d
 
-> **Nota:** ARIA solo modifica el árbol de accesibilidad, modificando cómo la tecnología de asistencia presenta el contenido a sus usuarios. ARIA no cambia nada sobre la función o el comportamiento de un elemento. Cuando no use elementos HTML semánticos para su propósito previsto y funcionalidad predeterminada, debe usar JavaScript para administrar el comportamiento, el enfoque y los estados ARIA.
+> [!NOTE]
+> ARIA solo modifica el árbol de accesibilidad, modificando cómo la tecnología de asistencia presenta el contenido a sus usuarios. ARIA no cambia nada sobre la función o el comportamiento de un elemento. Cuando no use elementos HTML semánticos para su propósito previsto y funcionalidad predeterminada, debe usar JavaScript para administrar el comportamiento, el enfoque y los estados ARIA.
 
 ## Tipos de atributos ARIA
 
diff --git a/files/es/web/accessibility/aria/index.md b/files/es/web/accessibility/aria/index.md
index 75531d2cd94a39..f82be08c53250f 100644
--- a/files/es/web/accessibility/aria/index.md
+++ b/files/es/web/accessibility/aria/index.md
@@ -9,11 +9,13 @@ Accessible Rich Internet Applications **(<abbr>ARIA</abbr>)** es una colección
 
 Complementa HTML para que las interacciones y los widgets que se usan comúnmente en las aplicaciones puedan ser correctamente interpretadas por las tecnologías de asistencia cuando no existe otro mecanismo. Por ejemplo, ARIA habilita accesibilidad a widgets de JavaScript, sugerencias de formularios, mensajes de error, actualizaciones de contenido en vivo y más.
 
-> **Advertencia:** Muchos de estos widgets se incorporaron posteriormente a HTML5, y **los desarrolladores deberían preferir usar el elemento HTML semántico correcto en lugar de usar ARIA**, si tal elemento existe. Por ejemplo, los elementos nativos tienen incorporado [accesibilidad de teclado](/es/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets), roles y estados. Sin embargo, si elige usar ARIA, es responsable de imitar el comportamiento equivalente del navegador en la secuencia de comandos.
+> [!WARNING]
+> Muchos de estos widgets se incorporaron posteriormente a HTML5, y **los desarrolladores deberían preferir usar el elemento HTML semántico correcto en lugar de usar ARIA**, si tal elemento existe. Por ejemplo, los elementos nativos tienen incorporado [accesibilidad de teclado](/es/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets), roles y estados. Sin embargo, si elige usar ARIA, es responsable de imitar el comportamiento equivalente del navegador en la secuencia de comandos.
 
 [La primera regla de ARIA](https://www.w3.org/TR/using-aria/#rule1) es "Si puede usar un elemento o atributo HTML nativo con la semántica y el comportamiento que necesita ya integrado, en lugar de reutilizar un elemento y agregar un rol, estado o propiedad de ARIA para hacerlo accesible, hágalo".
 
-> **Nota:** Hay un dicho "No utilizar ARIA es mejor que utilizar una mala ARIA". En [la encuesta de WebAim de más de un millón de páginas de inicio](https://webaim.org/projects/million#aria), encontraron que las páginas de inicio con ARIA presentes promediaron un 41 % más de errores detectados que aquellas sin ARIA. Si bien ARIA está diseñado para hacer que las páginas web sean más accesibles, si se usa incorrectamente, puede hacer más daño que bien.
+> [!NOTE]
+> Hay un dicho "No utilizar ARIA es mejor que utilizar una mala ARIA". En [la encuesta de WebAim de más de un millón de páginas de inicio](https://webaim.org/projects/million#aria), encontraron que las páginas de inicio con ARIA presentes promediaron un 41 % más de errores detectados que aquellas sin ARIA. Si bien ARIA está diseñado para hacer que las páginas web sean más accesibles, si se usa incorrectamente, puede hacer más daño que bien.
 
 Aquí está el marcado para una barra de progreso:
 
@@ -55,9 +57,11 @@ Habría sido mucho más simple usar el elemento nativo {{HTMLElement('progress')
 <progress id="percent-loaded" value="75" max="100">75 %</progress>
 ```
 
-> **Nota:** El atributo `min` no está permitido para el elemento {{HTMLElement('progress')}}; su valor mínimo es siempre `0`.
+> [!NOTE]
+> El atributo `min` no está permitido para el elemento {{HTMLElement('progress')}}; su valor mínimo es siempre `0`.
 
-> **Nota:** Los elementos de referencia HTML ({{HTMLElement("main")}}, {{HTMLElement("header")}}, {{HTMLElement("nav")}} etc.) tienen roles ARIA implícitos, por lo que no es necesario duplicarlos.
+> [!NOTE]
+> Los elementos de referencia HTML ({{HTMLElement("main")}}, {{HTMLElement("header")}}, {{HTMLElement("nav")}} etc.) tienen roles ARIA implícitos, por lo que no es necesario duplicarlos.
 
 ## Soporte
 
diff --git a/files/es/web/accessibility/aria/multipart_labels/index.md b/files/es/web/accessibility/aria/multipart_labels/index.md
index 2b8a6fc1921392..706f0dcbfaf614 100644
--- a/files/es/web/accessibility/aria/multipart_labels/index.md
+++ b/files/es/web/accessibility/aria/multipart_labels/index.md
@@ -36,7 +36,8 @@ Tanto **aria-labelledby** y **aria-describedby** se especifican en el elemento d
 
 JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.
 
-> **Nota:** TBD (pendiente): añadir más información sobre compatiblidad
+> [!NOTE]
+> TBD (pendiente): añadir más información sobre compatiblidad
 
 ## ¿Puede hacerse sin ARIA?
 
diff --git a/files/es/web/accessibility/aria/roles/alert_role/index.md b/files/es/web/accessibility/aria/roles/alert_role/index.md
index de449d84d26975..b7b58993d5e259 100644
--- a/files/es/web/accessibility/aria/roles/alert_role/index.md
+++ b/files/es/web/accessibility/aria/roles/alert_role/index.md
@@ -29,7 +29,8 @@ Productos de tecnología asistencial deben escuchar por dicho evento y notificar
 - Lectores de pantalla pueden interrumpir la entrada actual (sea por voz o braile) e inmediatamente anunciar o desplegar el mensaje de alerta.
 - Lupas de pantalla pueden indicar visualmente que una alerta ha ocurrido y que texto tuvo la alerta.
 
-> **Nota:** Opiniones pueden diferir en como tecnologías de asistencia deben manejar esta técnica. La información proveida anteriormente es una de estas opiniones y por lo tanto no es normativa.
+> [!NOTE]
+> Opiniones pueden diferir en como tecnologías de asistencia deben manejar esta técnica. La información proveida anteriormente es una de estas opiniones y por lo tanto no es normativa.
 
 ### Ejemplos
 
diff --git a/files/es/web/accessibility/aria/roles/alertdialog_role/index.md b/files/es/web/accessibility/aria/roles/alertdialog_role/index.md
index f59324a04fa0f6..c57f43dbc922a0 100644
--- a/files/es/web/accessibility/aria/roles/alertdialog_role/index.md
+++ b/files/es/web/accessibility/aria/roles/alertdialog_role/index.md
@@ -19,7 +19,8 @@ La diferencia con díalogos normales es que el rol de `alertdialog` debe ser uti
 
 Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.
 
-> **Nota:** Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, `alertdialog` es probablemente el rol incorrecto para ser utilizado.. El rol `alert` debe ser usado en su lugar en éste caso (como se describe en la técnica de [Utilizando el rol `alert`](/en/ARIA/ARIA_Techniques/Using_the_alert_role)).
+> [!NOTE]
+> Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, `alertdialog` es probablemente el rol incorrecto para ser utilizado.. El rol `alert` debe ser usado en su lugar en éste caso (como se describe en la técnica de [Utilizando el rol `alert`](/en/ARIA/ARIA_Techniques/Using_the_alert_role)).
 
 ### Posibles efectos de agentes de usuario y tecnología de asistencia
 
@@ -32,7 +33,8 @@ Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar
 
 Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado.
 
-> **Nota:** Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
+> [!NOTE]
+> Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
 
 ### Ejemplos
 
diff --git a/files/es/web/accessibility/understanding_wcag/keyboard/index.md b/files/es/web/accessibility/understanding_wcag/keyboard/index.md
index efb4376ec1ea33..2ddc74be3d41ac 100644
--- a/files/es/web/accessibility/understanding_wcag/keyboard/index.md
+++ b/files/es/web/accessibility/understanding_wcag/keyboard/index.md
@@ -11,7 +11,8 @@ Para ser completamente accesible, una página web debe ser operable por alguién
 
 Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).
 
-> **Nota:** Una excepción importante a esta regla es si el elemento tiene aplicado `role="document"`, **dentro** un contexto interactivo (como un `role="application"`). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").
+> [!NOTE]
+> Una excepción importante a esta regla es si el elemento tiene aplicado `role="document"`, **dentro** un contexto interactivo (como un `role="application"`). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").
 
 La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo `tabindex=0`. Sin embargo, sólo se debería añadir `tabindex` si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.
 
diff --git a/files/es/web/accessibility/understanding_wcag/perceivable/index.md b/files/es/web/accessibility/understanding_wcag/perceivable/index.md
index dab25dfb29dec2..5f6a45fbce74fa 100644
--- a/files/es/web/accessibility/understanding_wcag/perceivable/index.md
+++ b/files/es/web/accessibility/understanding_wcag/perceivable/index.md
@@ -7,7 +7,8 @@ slug: Web/Accessibility/Understanding_WCAG/Perceivable
 
 Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de **Percepción** de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.
 
-> **Nota:** Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable)
+> [!NOTE]
+> Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable)
 
 ## Pauta 1.1 — Dar alternativas de texto para contenido no textual
 
@@ -124,7 +125,8 @@ La clave aquí es convertir el texto a otros formatos que puedan ser entendidos
   </tbody>
 </table>
 
-> **Nota:** Ver también [WCAG description for Guideline 1.1: Text alternatives](https://www.w3.org/TR/WCAG21/#text-alternatives).
+> [!NOTE]
+> Ver también [WCAG description for Guideline 1.1: Text alternatives](https://www.w3.org/TR/WCAG21/#text-alternatives).
 
 ## Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes
 
@@ -142,7 +144,8 @@ Los medios tempo-dependientes se refieren a multimedia con una duración (audio
 | 1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA) | For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.                                                                     | See [Audio transcripts](/es/docs/Learn/Accessibility/Multimedia#Audio_transcripts) for transcript information.                                                                                                                                                                                                                                                |
 | 1.2.9 Provee una transcripción para el audio en vivo (AAA)                    | For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.                                                           | See [Audio transcripts](/es/docs/Learn/Accessibility/Multimedia#Audio_transcripts) for transcript information.                                                                                                                                                                                                                                                |
 
-> **Nota:** Ver también la descripción de [WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media](https://www.w3.org/TR/WCAG21/#time-based-media).
+> [!NOTE]
+> Ver también la descripción de [WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media](https://www.w3.org/TR/WCAG21/#time-based-media).
 
 ## Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas
 
@@ -246,7 +249,8 @@ Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser cons
   </tbody>
 </table>
 
-> **Nota:** Ver también la descripción de WCAG: [Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.](https://www.w3.org/TR/WCAG21/#adaptable)
+> [!NOTE]
+> Ver también la descripción de WCAG: [Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.](https://www.w3.org/TR/WCAG21/#adaptable)
 
 ## Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo
 
@@ -397,4 +401,5 @@ Esta pauta tiene como objetivo la creación de contenido que sea fácil de difer
   </thead>
 </table>
 
-> **Nota:** Ver también la descripción de WCAG: [Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.](https://www.w3.org/TR/WCAG21/#distinguishable)[.](https://www.w3.org/TR/WCAG21/#distinguishable)
+> [!NOTE]
+> Ver también la descripción de WCAG: [Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.](https://www.w3.org/TR/WCAG21/#distinguishable)[.](https://www.w3.org/TR/WCAG21/#distinguishable)
diff --git a/files/es/web/api/analysernode/index.md b/files/es/web/api/analysernode/index.md
index d3640f29376b39..4a7e30421bd78f 100644
--- a/files/es/web/api/analysernode/index.md
+++ b/files/es/web/api/analysernode/index.md
@@ -78,7 +78,8 @@ _Inherits methods from its parent,_ _{{domxref("AudioNode")}}_.
 
 ## Examples
 
-> **Nota:** See the guide [Visualizations with Web Audio API](/es/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) for more information on creating audio visualizations.
+> [!NOTE]
+> See the guide [Visualizations with Web Audio API](/es/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) for more information on creating audio visualizations.
 
 ### Basic usage
 
diff --git a/files/es/web/api/animation/cancel/index.md b/files/es/web/api/animation/cancel/index.md
index 26b18d74ddc261..556064551a4dec 100644
--- a/files/es/web/api/animation/cancel/index.md
+++ b/files/es/web/api/animation/cancel/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Animation/cancel
 
 El método `cancel()` de la Web Animations API de la interfaz {{domxref("Animation")}} borra todos los {{domxref("KeyframeEffect")}} causados por esta animación y aborta su reproducción.
 
-> **Nota:** Cuando se cancela una animación, su {{domxref("Animation.startTime", "startTime")}} y su {{domxref("Animation.currentTime", "currentTime")}} se establecen en `null`.
+> [!NOTE]
+> Cuando se cancela una animación, su {{domxref("Animation.startTime", "startTime")}} y su {{domxref("Animation.currentTime", "currentTime")}} se establecen en `null`.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/animation/cancel_event/index.md b/files/es/web/api/animation/cancel_event/index.md
index 3dce4b1cfaf65e..8fb1631ef200d8 100644
--- a/files/es/web/api/animation/cancel_event/index.md
+++ b/files/es/web/api/animation/cancel_event/index.md
@@ -9,7 +9,8 @@ La propiedad `oncancel` de la interfaz {{domxref("Animation")}} de la [Web Anima
 
 El evento `cancel` puede ser activado manualmente con {{domxref("Animation.cancel()")}} cuando la animación entra en estado de reproducción `"idle"(inactivo)` desde otro estado, como cuando una animación se elimina de un elemento antes de que termine de reproducirse.
 
-> **Nota:** La creación de una nueva animación, inicialmente inactiva, no activa el evento [`cancel`](/es/docs/Web/Reference/Events/cancel) en la nueva animación.
+> [!NOTE]
+> La creación de una nueva animación, inicialmente inactiva, no activa el evento [`cancel`](/es/docs/Web/Reference/Events/cancel) en la nueva animación.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/animation/finish_event/index.md b/files/es/web/api/animation/finish_event/index.md
index b5d1436c1edd53..e9e6d0a2b70088 100644
--- a/files/es/web/api/animation/finish_event/index.md
+++ b/files/es/web/api/animation/finish_event/index.md
@@ -9,7 +9,8 @@ La propiedad `onfinish` de la interfaz {{domxref("Animation")}} (de la [Web Anim
 
 El evento `finish` ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al método {{domxref("Animation.finish()")}} para que la animación termine inmediatamente.
 
-> **Nota:** El estado de reproducción `"paused"` reemplaza al estado `"finished"`. Si la animación está pausada y finalizada, el estado`"paused"` será el único reportado. Puedes forzar el estado de la animación a `"finished"` configurando su {{domxref("Animation.startTime", "startTime")}} a `document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate)`.
+> [!NOTE]
+> El estado de reproducción `"paused"` reemplaza al estado `"finished"`. Si la animación está pausada y finalizada, el estado`"paused"` será el único reportado. Puedes forzar el estado de la animación a `"finished"` configurando su {{domxref("Animation.startTime", "startTime")}} a `document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate)`.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/animation/finished/index.md b/files/es/web/api/animation/finished/index.md
index 2e96b646b82d8f..dbaa1a0ebbec98 100644
--- a/files/es/web/api/animation/finished/index.md
+++ b/files/es/web/api/animation/finished/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Animation/finished
 
 La propiedad de solo-lectura de `Animation.finished` de la [Web Animations API](/es/docs/Web/API/Web_Animations_API) devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.
 
-> **Nota:** Una vez que la reproducción de la animación abandona el estado `finished` (es decir, la reproducción se está ejecutando otra vez), Un nuevo `Promise` es creado para esta propiedad. El nuevo `Promise` será resuelto cuando se haya completado la actual secuencia de la animación.
+> [!NOTE]
+> Una vez que la reproducción de la animación abandona el estado `finished` (es decir, la reproducción se está ejecutando otra vez), Un nuevo `Promise` es creado para esta propiedad. El nuevo `Promise` será resuelto cuando se haya completado la actual secuencia de la animación.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/animation/playbackrate/index.md b/files/es/web/api/animation/playbackrate/index.md
index fd11db36150dcd..50c2a598005b3d 100644
--- a/files/es/web/api/animation/playbackrate/index.md
+++ b/files/es/web/api/animation/playbackrate/index.md
@@ -21,7 +21,8 @@ Animation.playbackRate = newRate;
 
 Toma un número que puede ser 0, negativo o positivo. Los valores negativos invierten la animación. El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.
 
-> **Nota:** si establecemos el `playbackRate` a `0` pausa la animación de manera efectiva (sin embargo, su {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en `paused`).
+> [!NOTE]
+> Si establecemos el `playbackRate` a `0` pausa la animación de manera efectiva (sin embargo, su {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en `paused`).
 
 ## Ejemplos
 
diff --git a/files/es/web/api/animation/playstate/index.md b/files/es/web/api/animation/playstate/index.md
index 3ffb4bf6daddc9..781e59c52f8315 100644
--- a/files/es/web/api/animation/playstate/index.md
+++ b/files/es/web/api/animation/playstate/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Animation/playState
 
 La propiedad `Animation.playState` de la [Web Animations API](/es/docs/Web/API/Web_Animations_API) devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.
 
-> **Nota:** Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.
+> [!NOTE]
+> Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/animation/ready/index.md b/files/es/web/api/animation/ready/index.md
index af8d1a20e9b590..8ee06114f4851c 100644
--- a/files/es/web/api/animation/ready/index.md
+++ b/files/es/web/api/animation/ready/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Animation/ready
 
 La propiedad de solo-lectura `Animation.ready` de la [Web Animations API](/es/docs/Web/API/Web_Animations_API) devuelve un {{jsxref("Promise")}} que se resuelve cuando la animación está lista para reproducirse. Una nueva 'promesa' es creada cada vez que la animación entra en [play state(estado de reproducción)](/es/docs/Web/API/Animation/playState) `"pending"(pendiente)` así como si la reproducción es cancelada, ya que en ambos escenarios, la animación estará lista para ser reiniciada.
 
-> **Nota:** Dado que la misma {{jsxref("Promise")}} es usada para las solicitudes pendientes de `play` y `pause` , se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa.
+> [!NOTE]
+> Dado que la misma {{jsxref("Promise")}} es usada para las solicitudes pendientes de `play` y `pause` , se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/attr/index.md b/files/es/web/api/attr/index.md
index 4514cdb99669e4..a2f96d534a195f 100644
--- a/files/es/web/api/attr/index.md
+++ b/files/es/web/api/attr/index.md
@@ -26,7 +26,8 @@ Este tipo representa un atributo de un elemento DOM como un objeto. En muchos m
 - {{domxref("Attr.value", "value")}}
   - : El valor del atributo.
 
-> **Nota:** DOM Level 3 defined `namespaceURI`, `localName` and `prefix` on the {{domxref("Node")}} interface. In DOM4 they were moved to `Attr`.
+> [!NOTE]
+> DOM Level 3 defined `namespaceURI`, `localName` and `prefix` on the {{domxref("Node")}} interface. In DOM4 they were moved to `Attr`.
 >
 > This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.
 
diff --git a/files/es/web/api/audionode/index.md b/files/es/web/api/audionode/index.md
index c6cc17581fcdd8..73b4422484958c 100644
--- a/files/es/web/api/audionode/index.md
+++ b/files/es/web/api/audionode/index.md
@@ -16,7 +16,8 @@ Ejemplos que la incluyen:
 
 {{InheritanceDiagram}}
 
-> **Nota:** un `AudioNode` puede ser objetivo de eventos, por lo que implementa la interfaz {{domxref("EventTarget")}}.
+> [!NOTE]
+> Un `AudioNode` puede ser objetivo de eventos, por lo que implementa la interfaz {{domxref("EventTarget")}}.
 
 ## Descripción
 
diff --git a/files/es/web/api/battery_status_api/index.md b/files/es/web/api/battery_status_api/index.md
index 3a140c70d155b9..2e38cb19f2c6b2 100644
--- a/files/es/web/api/battery_status_api/index.md
+++ b/files/es/web/api/battery_status_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Battery_Status_API
 
 La **API de Estado de Batería**, también conocida como "**Battery API**", provee información acerca del sistema de carga de la batería y permite notificar mediante eventos que son enviados cuando el nivel de la batería cambia. Este puede ser usado para ajustar el uso de recursos por parte de una aplicación y evitar un gasto innecesario de energía cuando la batería esta baja o para guardar cambios en un archivo antes de que la batería se agote y así prevenir perdida de información.
 
-> **Nota:** Esta API _no está disponible_ en los [Web Workers](/es/docs/Web/API/Web_Workers_API) (no está expuesta en {{domxref("WorkerNavigator")}}).
+> [!NOTE]
+> Esta API _no está disponible_ en los [Web Workers](/es/docs/Web/API/Web_Workers_API) (no está expuesta en {{domxref("WorkerNavigator")}}).
 
 ## Interfaces
 
diff --git a/files/es/web/api/batterymanager/chargingtime/index.md b/files/es/web/api/batterymanager/chargingtime/index.md
index 2ebe80aa91c124..089ca9225003da 100644
--- a/files/es/web/api/batterymanager/chargingtime/index.md
+++ b/files/es/web/api/batterymanager/chargingtime/index.md
@@ -9,7 +9,8 @@ slug: Web/API/BatteryManager/chargingTime
 
 Indica la cantidad de tiempo, en segundos, que faltan para que la batería esté completamente cargada.
 
-> **Nota:** Incluso si el tiempo devuelto es exacto al segundo, los navegadores los redondean a un intervalo más alto (típicamente a los 15 minutos más cercanos) por razones de privacidad.
+> [!NOTE]
+> Incluso si el tiempo devuelto es exacto al segundo, los navegadores los redondean a un intervalo más alto (típicamente a los 15 minutos más cercanos) por razones de privacidad.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/batterymanager/dischargingtime/index.md b/files/es/web/api/batterymanager/dischargingtime/index.md
index 25863d6f6ddd26..3a85a5b6748701 100644
--- a/files/es/web/api/batterymanager/dischargingtime/index.md
+++ b/files/es/web/api/batterymanager/dischargingtime/index.md
@@ -8,7 +8,8 @@ slug: Web/API/BatteryManager/dischargingTime
 Indíca la cantidad de tiempo, en segundos,
 que restan antes de que la batería se descargue completamente.
 
-> **Nota:** Incluso si el tiempo devuelto es exacto al segundo, los navegadores los redondean a un intervalo más alto (típicamente a los 15 minutos más cercanos) por razones de privacidad.
+> [!NOTE]
+> Incluso si el tiempo devuelto es exacto al segundo, los navegadores los redondean a un intervalo más alto (típicamente a los 15 minutos más cercanos) por razones de privacidad.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/blob/index.md b/files/es/web/api/blob/index.md
index 84a7010052b0f5..6a2e33530147c7 100644
--- a/files/es/web/api/blob/index.md
+++ b/files/es/web/api/blob/index.md
@@ -28,7 +28,8 @@ Una forma fácil de construir un `Blob` es invocando el constructor {{domxref("B
 - {{domxref("Blob.slice()")}}
   - : `Regresa un nuevo objeto Blob` conteniendo los datos de un rango específico de bytes del origen del `Blob`.
 
-> **Nota:** Esté consciente que el método `slice()` posee prefijos propios del fabricante en algunos exploradores y versiones: `blob.mozSlice()` para Firefox 12 e inferior y `blob.webkitSlice()` en Safari. Una versión anterior del método `slice()`, sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para `blob.mozSlice()` ha sido eliminado a partir de Firefox 30.
+> [!NOTE]
+> Esté consciente que el método `slice()` posee prefijos propios del fabricante en algunos exploradores y versiones: `blob.mozSlice()` para Firefox 12 e inferior y `blob.webkitSlice()` en Safari. Una versión anterior del método `slice()`, sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para `blob.mozSlice()` ha sido eliminado a partir de Firefox 30.
 
 ## Ejemplos
 
@@ -50,7 +51,8 @@ oBuilder.append(aFileParts[0]);
 var oMyBlob = oBuilder.getBlob("text/xml"); // the blob
 ```
 
-> **Advertencia:** La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear `Blob`, pero se encuentra ahora obsoleta y no debería volverse a utilizar.
+> [!WARNING]
+> La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear `Blob`, pero se encuentra ahora obsoleta y no debería volverse a utilizar.
 
 ### Ejemplo para crear una URL en un arreglo tipado utilizando un blob
 
diff --git a/files/es/web/api/cachestorage/open/index.md b/files/es/web/api/cachestorage/open/index.md
index 4b1918d325e735..c20bf8ff970d3b 100644
--- a/files/es/web/api/cachestorage/open/index.md
+++ b/files/es/web/api/cachestorage/open/index.md
@@ -10,7 +10,8 @@ El método **`open()`** de la interfaz {{domxref("CacheStorage")}} devuelve una
 Puedes acceder a `CacheStorage` a través de la propiedad global
 {{domxref("caches")}}.
 
-> **Nota:** Si la {{domxref("Cache")}} especificada no existe, se crea
+> [!NOTE]
+> Si la {{domxref("Cache")}} especificada no existe, se crea
 > una nueva caché con ese `cacheName` y una {{jsxref("Promise")}} que
 > resuelve este nuevo objeto {{domxref("Cache")}} devuelto.
 
diff --git a/files/es/web/api/canvas_api/tutorial/basic_animations/index.md b/files/es/web/api/canvas_api/tutorial/basic_animations/index.md
index abc6a02660237b..9f395d11db28ab 100644
--- a/files/es/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/es/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -41,7 +41,8 @@ Primero {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}},
 
 Si no quieres ninguna interacción del usuario puedes usar la función `setInterval()` que repite la ejecución del código suministrado. Si lo que queremos es hacer un juego, podríamos usar eventos de teclado o el mouse para controlar la animación y usar `setTimeout()`. Al establecer los {{domxref("EventListener")}}, capturamos cualquier interacción del usuario y ejecutamos nuestras funciones de animación.
 
-> **Nota:** En los siguiente ejemplo,usaremos el método para controlar animaciones {{domxref("window.requestAnimationFrame()")}}. El método `requestAnimationFrame` provee formas amigables y mas eficientes para animar llamando cada marco de animación cuando el sistema esta listo para dibujar. La cantidad de devoluciones de llamadas suele ser 60 veces por segundo y podría ser reducido a menor periodo cuando se corre en un segundo plano. Para mas información acerca de los ciclos de animación, especialmente para juegos, Ver el Articulo [Anatomía de un videojuego](/es/docs/Games/Anatomy) en nuestra [GameZona de desarrollo de Juegos](/es/docs/Games).
+> [!NOTE]
+> En los siguiente ejemplo,usaremos el método para controlar animaciones {{domxref("window.requestAnimationFrame()")}}. El método `requestAnimationFrame` provee formas amigables y mas eficientes para animar llamando cada marco de animación cuando el sistema esta listo para dibujar. La cantidad de devoluciones de llamadas suele ser 60 veces por segundo y podría ser reducido a menor periodo cuando se corre en un segundo plano. Para mas información acerca de los ciclos de animación, especialmente para juegos, Ver el Articulo [Anatomía de un videojuego](/es/docs/Games/Anatomy) en nuestra [GameZona de desarrollo de Juegos](/es/docs/Games).
 
 ## Un sistema solar animado
 
diff --git a/files/es/web/api/canvas_api/tutorial/basic_usage/index.md b/files/es/web/api/canvas_api/tutorial/basic_usage/index.md
index 38757389853a3d..57961906eefb80 100644
--- a/files/es/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/es/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -15,7 +15,8 @@ Comenzamos este tutorial observando el elemento {{HTMLElement("canvas")}}. Al fi
 
 A primera vista, un elemento {{HTMLElement("canvas")}} es parecido al elemento {{HTMLElement("img")}}, con la diferencia que este no tiene los atributos `src` y `alt`. El elemento `<canvas>` tiene solo dos atributos - [`width`](/es/docs/Web/HTML/Element/canvas#width) y [`height`](/es/docs/Web/HTML/Element/canvas#height). Ambos son opcionales y pueden ser definidos usando propiedades [DOM](/es/docs/DOM). Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con **300 pixels** ancho y **150 pixels** de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.
 
-> **Nota:** Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del `<canvas>` , y no usando CSS.
+> [!NOTE]
+> Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del `<canvas>` , y no usando CSS.
 
 El atributo [id](/es/docs/Web/HTML/Atributos_Globales/id) no está especificado para el elemento `<canvas>` pero es uno de los [atributos globales de HTML](/es/docs/Web/HTML/Atributos_Globales) el cual puede ser aplicado a cualquier elemento HTML (como [class](/es/docs/Web/HTML/Global_attributes/class) por ejemplo). Siempre es buena idea proporcionar un `id` porque esto hace más fácil identificarlo en un script.
 
@@ -43,7 +44,8 @@ Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas
 
 De manera distinta al elemento {{HTMLElement("img")}}, el elemento {{HTMLElement("canvas")}} requiere cerrar la etiqueta (`</canvas>`).
 
-> **Nota:** Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.
+> [!NOTE]
+> Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.
 
 Si el contenido alternativo no se necesita, un simple `<canvas id="foo" ...></canvas>` es completamente compatible con todos los navegadores que soportan canvas.
 
diff --git a/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md
index 9418eaeabee8de..5b4c5d8a50141c 100644
--- a/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md
+++ b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.md
@@ -91,13 +91,15 @@ Aquí están las funciones utilizadas para realizar estos pasos:
 
 El primer paso para crear un trazado es llamar a `beginPath()`. Internamente, los trazados se almacenan como una lista de sub-trazados (líneas, arcos, etc.) que juntos forman una forma. Cada vez que se llama a este método, la lista se restablece y podemos empezar a dibujar nuevas formas.
 
-> **Nota:** Cuando el trazado actual está vacío, como por ejemplo inmediatamente después de llamar a `beginPath()`, o en un canvas recién creado, el primer comando de construcción del trazado siempre se trata como un `moveTo()`, independientemente de lo que realmente sea. Por esta razón, casi siempre querrá establecer específicamente su posición inicial después de reiniciar un trazado.
+> [!NOTE]
+> Cuando el trazado actual está vacío, como por ejemplo inmediatamente después de llamar a `beginPath()`, o en un canvas recién creado, el primer comando de construcción del trazado siempre se trata como un `moveTo()`, independientemente de lo que realmente sea. Por esta razón, casi siempre querrá establecer específicamente su posición inicial después de reiniciar un trazado.
 
 El segundo paso es llamar a los métodos que realmente especifican los trazados a dibujar. Los veremos en breve.
 
 El tercer paso, y opcional, es llamar a `closePath()`. Este método intenta cerrar la forma dibujando una línea recta desde el punto actual hasta el inicio. Si la forma ya ha sido cerrada o sólo hay un punto en la lista, esta función no hace nada.
 
-> **Nota:** Cuando se llama a `fill()`, cualquier forma abierta se cierra automáticamente, por lo que no es necesario llamar a `closePath()`. Este **no** es el caso cuando se llama a `stroke()`.
+> [!NOTE]
+> Cuando se llama a `fill()`, cualquier forma abierta se cierra automáticamente, por lo que no es necesario llamar a `closePath()`. Este **no** es el caso cuando se llama a `stroke()`.
 
 ### Dibujar un triángulo
 
@@ -174,7 +176,8 @@ El resultado se ve así:
 
 Si quisieras ver las líneas conectadas, puedes eliminar las líneas que llaman a `moveTo()`.
 
-> **Nota:** Para saber más sobre la función `arc()`, consulte la sección [Arcos](#arcos) más abajo.
+> [!NOTE]
+> Para saber más sobre la función `arc()`, consulte la sección [Arcos](#arcos) más abajo.
 
 ### Líneas
 
@@ -236,7 +239,8 @@ Para dibujar arcos o círculos, utilizamos los métodos `arc()` o `arcTo()`.
 
 Veamos con más detalle el método `arc`, que toma seis parámetros: `x` e `y` son las coordenadas del centro del círculo sobre el que se dibujará el arco. El parámetro `radio` se explica por sí mismo. Los parámetros `startAngle` y `endAngle` definen los puntos inicial y final del arco en radianes, a lo largo de la curva del círculo. Se miden desde el eje x. El parámetro `counterclockwise` es un valor Booleano que, cuando es `true`, dibuja el arco en sentido contrario a las agujas del reloj; en caso contrario, el arco se dibuja en sentido de las agujas del reloj.
 
-> **Nota:** Los ángulos en la función `arc` se miden en radianes, no en grados. Para convertir los grados en radianes puedes utilizar la siguiente expresión de JavaScript: `radianes = (Math.PI/180)*grados`.
+> [!NOTE]
+> Los ángulos en la función `arc` se miden en radianes, no en grados. Para convertir los grados en radianes puedes utilizar la siguiente expresión de JavaScript: `radianes = (Math.PI/180)*grados`.
 
 El siguiente ejemplo es un poco más complejo que los que hemos visto anteriormente. Dibuja 12 arcos diferentes, todos con diferentes ángulos y rellenos.
 
@@ -246,7 +250,8 @@ Las coordenadas `x` e `y` deberían ser lo suficientemente claras. `radius` y `s
 
 La sentencia para el parámetro `clockwise` hace que la primera y tercera fila se dibujen como arcos en el sentido de las agujas del reloj y la segunda y cuarta fila como arcos en sentido contrario. Por último, la sentencia `if` hace que la mitad superior tenga arcos trazados y la mitad inferior arcos rellenos.
 
-> **Nota:** Este ejemplo requiere un canvas ligeramente más grande que los otros de esta página: 150 x 200 píxeles.
+> [!NOTE]
+> Este ejemplo requiere un canvas ligeramente más grande que los otros de esta página: 150 x 200 píxeles.
 
 ```html hidden
 <html>
diff --git a/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
index 065f3567cba9e7..ded3f51fbeae87 100644
--- a/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
+++ b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
@@ -102,7 +102,8 @@ var myImageData = ctx.getImageData(left, top, width, height);
 
 This method returns an `ImageData` object representing the pixel data for the area of the canvas whose corners are represented by the points (`left`, `top`), (`left+width`, `top`), (`left`, `top+height`), and (`left+width`, `top+height`). The coordinates are specified in canvas coordinate space units.
 
-> **Nota:** Any pixels outside the canvas are returned as transparent black in the resulting `ImageData` object.
+> [!NOTE]
+> Any pixels outside the canvas are returned as transparent black in the resulting `ImageData` object.
 
 This method is also demonstrated in the article [Manipulating video using canvas](/es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas).
 
diff --git a/files/es/web/api/canvasrenderingcontext2d/linecap/index.md b/files/es/web/api/canvasrenderingcontext2d/linecap/index.md
index d435ef2072647a..ccfc4133995a5f 100644
--- a/files/es/web/api/canvasrenderingcontext2d/linecap/index.md
+++ b/files/es/web/api/canvasrenderingcontext2d/linecap/index.md
@@ -7,7 +7,8 @@ slug: Web/API/CanvasRenderingContext2D/lineCap
 
 La propiedad **`CanvasRenderingContext2D.lineCap`** del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.
 
-> **Nota:** La líneas se puede dibujar con los métodos {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, y {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.
+> [!NOTE]
+> La líneas se puede dibujar con los métodos {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, y {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/console/assert_static/index.md b/files/es/web/api/console/assert_static/index.md
index 0b0bc8184382e5..956f9f92f7a4ed 100644
--- a/files/es/web/api/console/assert_static/index.md
+++ b/files/es/web/api/console/assert_static/index.md
@@ -9,7 +9,8 @@ Aparece un mensaje de error en la consola si la afirmación es falsa. Si la afir
 
 {{AvailableInWorkers}}
 
-> **Nota:** El método `console.assert()` se implementa de diferente manera en Node.js que el mismo método disponible en los navegadores.
+> [!NOTE]
+> El método `console.assert()` se implementa de diferente manera en Node.js que el mismo método disponible en los navegadores.
 >
 > En los navegadores, llamando `console.assert()` con una falsa afirmación hará que el `message` se imprima por consola sin interrumpir la ejecución del código posterior. En Node.js, sin embargo, una falsa afirmación lanzará un `AssertionError`.
 
diff --git a/files/es/web/api/console/index.md b/files/es/web/api/console/index.md
index c4b745f27a64a6..e0de3e2a958ec0 100644
--- a/files/es/web/api/console/index.md
+++ b/files/es/web/api/console/index.md
@@ -118,7 +118,8 @@ Cuando se pasa una cadena a uno de los métodos del objeto `console` que la acep
 - `%f`
   - : Muestra un valor de punto flotante. El formateo está soportado, por ejemplo `console.log("Foo %.2f", 1.1)` mostrará el número con dos decimales: `Foo 1.10`.
 
-> **Nota:** El formateo de precisión no funciona en Chrome.
+> [!NOTE]
+> El formateo de precisión no funciona en Chrome.
 
 Cada uno de ellos trae el siguiente argumento posterior a la cadena de la lista de parámetros. Por ejemplo:
 
@@ -185,7 +186,8 @@ Las propiedadas utilizables junto con la directiva `%c` son las siguientes (al m
 - {{cssxref("word-spacing")}} y {{cssxref("word-break")}}
 - {{cssxref("writing-mode")}}
 
-> **Nota:** Los mensajes de consola se comportan como un elemento en línea por defecto. Para ver los efectos de `padding`, `margin`, etc. debes establecerlo como por ejemplo `display: inline-block`.
+> [!NOTE]
+> Los mensajes de consola se comportan como un elemento en línea por defecto. Para ver los efectos de `padding`, `margin`, etc. debes establecerlo como por ejemplo `display: inline-block`.
 
 ### Usando grupos en la consola
 
@@ -230,7 +232,8 @@ Registrará el tiempo necesitado por el usuario para descartar el cuadro de aler
 
 Nótese que el nombre del temporizador es mostrado tanto cuando el temporizador es iniciado como cuando es detenido.
 
-> **Nota:** Es importante saber que si estas usando esto para registrar el tiempo del trafico de red, el temporizador reportará el tiempo total para la transacción, mientras que el tiempo listado en el panel de conexiones o panel de red es solo la cantidad de tiempo requerida para obtener la cabecera.
+> [!NOTE]
+> Es importante saber que si estas usando esto para registrar el tiempo del trafico de red, el temporizador reportará el tiempo total para la transacción, mientras que el tiempo listado en el panel de conexiones o panel de red es solo la cantidad de tiempo requerida para obtener la cabecera.
 > Si en cambio tienes el registro de cuerpo (`response body logging`) habilitado, el tiempo listado para la respuesta de la cabecera y el cuerpo combinados debiera coincidir con lo que ves en la salida de la consola.
 
 ### Trazas de pila
diff --git a/files/es/web/api/console/warn_static/index.md b/files/es/web/api/console/warn_static/index.md
index 0a01e68f4db5e2..590c54074e33fa 100644
--- a/files/es/web/api/console/warn_static/index.md
+++ b/files/es/web/api/console/warn_static/index.md
@@ -9,7 +9,8 @@ Imprime un mensaje de advertencia en la Consola Web.
 
 {{AvailableInWorkers}}
 
-> **Nota:** En Firefox, las advertencias tienen un pequeño icono de signo de exclamación junto a estas en el registro de la Consola Web.
+> [!NOTE]
+> En Firefox, las advertencias tienen un pequeño icono de signo de exclamación junto a estas en el registro de la Consola Web.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/cssrule/csstext/index.md b/files/es/web/api/cssrule/csstext/index.md
index 95fd4b5da50e26..9e153179147c25 100644
--- a/files/es/web/api/cssrule/csstext/index.md
+++ b/files/es/web/api/cssrule/csstext/index.md
@@ -10,7 +10,8 @@ l10n:
 
 La propiedad **`cssText`** de la interfaz {{domxref("CSSRule")}} devuelve el texto real de una regla de estilo {{domxref("CSSStyleSheet")}}.
 
-> **Nota:** No confunda esta propiedad con el estilo de elemento {{domxref("CSSStyleDeclaration.cssText")}}.
+> [!NOTE]
+> No confunda esta propiedad con el estilo de elemento {{domxref("CSSStyleDeclaration.cssText")}}.
 
 Tenga en cuenta que esta propiedad ya no se puede configurar directamente, ya que [ahora se especifica](https://www.w3.org/TR/cssom-1/#changes-from-5-december-2013) para ser _funcionalmente_ solo modificable, y sin ser notado. En otras palabras, intentar configurarlo _no hace absolutamente nada_ y ni siquiera emite una advertencia o un error.
 Además, no tiene subpropiedades configurables. Por lo tanto, para modificarlo, use las propiedades {{domxref("CSSStyleRule.selectorText", ".selectorText")}} y {{domxref ("CSSStyleRule.style", ".style")}} (o sus subpropiedades). Véase [Uso de información de estilo dinámico](/es/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information) para más detalles.
diff --git a/files/es/web/api/cssstylesheet/index.md b/files/es/web/api/cssstylesheet/index.md
index ab935e5a024688..c4553e2e000925 100644
--- a/files/es/web/api/cssstylesheet/index.md
+++ b/files/es/web/api/cssstylesheet/index.md
@@ -39,7 +39,8 @@ _Hereda las propiedades de su padre, {{domxref("StyleSheet")}}._
 
   - : Devuelve un {{domxref("CSSRuleList")}} activo que mantiene una lista actualizada de los objetos {{domxref("CSSRuleList")}} que componen la hoja de estilo.
 
-    > **Nota:** En algunos navegadores, si se carga una hoja de estilo desde un dominio diferente, acceder a `cssRules` genera un `SecurityError`.
+    > [!NOTE]
+    > En algunos navegadores, si se carga una hoja de estilo desde un dominio diferente, acceder a `cssRules` genera un `SecurityError`.
 
 - {{domxref("CSSStyleSheet.ownerRule")}} {{ReadOnlyInline}}
   - : Si esta hoja de estilo se importa al documento mediante una regla {{cssxref("@import")}}, la propiedad `ownerRule` devuelve la correspondiente {{domxref("CSSImportRule")}}; de lo contrario, el valor de esta propiedad es `null`.
diff --git a/files/es/web/api/customelementregistry/define/index.md b/files/es/web/api/customelementregistry/define/index.md
index ce625c87182cd4..2bc824b585b0c2 100644
--- a/files/es/web/api/customelementregistry/define/index.md
+++ b/files/es/web/api/customelementregistry/define/index.md
@@ -42,7 +42,8 @@ Void.
 | `SyntaxError`       | El nombre proporcionado no es un [nombre válido de elemento personalizado](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name).                                                                                          |
 | `TypeError`         | El constructor referenciado no es un constructor                                                                                                                                                                                                            |
 
-> **Nota:** A menudo se obtienen excepciones `NotSupportedError`s cuando el método `define()` está fallando, pero realmente es un problema relacionado con {{domxref("Element.attachShadow()")}}.
+> [!NOTE]
+> A menudo se obtienen excepciones `NotSupportedError`s cuando el método `define()` está fallando, pero realmente es un problema relacionado con {{domxref("Element.attachShadow()")}}.
 
 ## Ejemplos
 
@@ -137,7 +138,8 @@ customElements.define("popup-info", PopUpInfo);
   text="Su código de validación de tarjeta (CVC) es una característica extra de seguridad — consiste en 3 o 4 numeros en la parte posterior de su tarjeta."></popup-info>
 ```
 
-> **Nota:** Los constructores de elementos personalizados autónomos deben extender {{domxref("HTMLElement")}}.
+> [!NOTE]
+> Los constructores de elementos personalizados autónomos deben extender {{domxref("HTMLElement")}}.
 
 ### Elemento personalizado preconstruido
 
diff --git a/files/es/web/api/document/cookie/index.md b/files/es/web/api/document/cookie/index.md
index 87c6464f1699ab..3e532290608628 100644
--- a/files/es/web/api/document/cookie/index.md
+++ b/files/es/web/api/document/cookie/index.md
@@ -46,7 +46,8 @@ En el código anterior, _`nuevacookie`_ es una cadena de la forma _`clave=valor`
   - `__Secure-` Señales para el navegador que solo deben incluirse en las perticiones de cookie transmitidas por un canal seguro.
   - `__Host-` Señales del navegador que además de la restricción de uso de cookies que provienen de un origen serugo, el ámbito de la cookie está limitado a un atributo path que proporciona el servidor. Si el servidor omite el atributo path, el directorio de las petición URI está en uso. Tabién las señales del atributo dominio no deben estar presentes, lo cual previene que la cookie sea usada en otros dominis. Para Chrome, el atributo path debe tener el mismo origen.
 
-> **Nota:** Nótese que previamente a Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.
+> [!NOTE]
+> Nótese que previamente a Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/document/createattribute/index.md b/files/es/web/api/document/createattribute/index.md
index 426a079d51d4b7..7438a0fe2d69e9 100644
--- a/files/es/web/api/document/createattribute/index.md
+++ b/files/es/web/api/document/createattribute/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Document/createAttribute
 
 El método **`Document.createAttribute()`** crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.
 
-> **Nota:** El texto pasado como parametro es convertido a minusculas.
+> [!NOTE]
+> El texto pasado como parametro es convertido a minusculas.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/document/createelementns/index.md b/files/es/web/api/document/createelementns/index.md
index 58da07f1932af4..91d0b16e23adc2 100644
--- a/files/es/web/api/document/createelementns/index.md
+++ b/files/es/web/api/document/createelementns/index.md
@@ -73,7 +73,8 @@ El código siguiente crea un elemento \<div> nuevo en el namespace [XHTML](/es/d
 </page>
 ```
 
-> **Nota:** El ejemplo dado arriba usa script en linea lo cúal no es recomendable en documentos XHTML. Este ejemplo en particular es un documento XUL con XHTML embedido, de cualquier forma la recomendación aplica.
+> [!NOTE]
+> El ejemplo dado arriba usa script en linea lo cúal no es recomendable en documentos XHTML. Este ejemplo en particular es un documento XUL con XHTML embedido, de cualquier forma la recomendación aplica.
 
 ## Especificaciones
 
diff --git a/files/es/web/api/document/exitfullscreen/index.md b/files/es/web/api/document/exitfullscreen/index.md
index 3327505127e6f7..e9e75c16c586b0 100644
--- a/files/es/web/api/document/exitfullscreen/index.md
+++ b/files/es/web/api/document/exitfullscreen/index.md
@@ -37,7 +37,8 @@ document.onclick = function (event) {
 };
 ```
 
-> **Nota:** Para un ejemplo más completo, vea [Example](/es/docs/Web/API/Element/requestFullScreen#example).
+> [!NOTE]
+> Para un ejemplo más completo, vea [Example](/es/docs/Web/API/Element/requestFullScreen#example).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/document/importnode/index.md b/files/es/web/api/document/importnode/index.md
index 39f4cb020c5cff..a707f4309e689b 100644
--- a/files/es/web/api/document/importnode/index.md
+++ b/files/es/web/api/document/importnode/index.md
@@ -20,7 +20,8 @@ var node = document.importNode(externalNode, deep);
 - `deep`
   - : Un booleano que indica si los descendientes del nodo deben ser importados también.
 
-> **Nota:** En la especificación DOM4 (tal y como se ha implementado en Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), `deep` es un argumento opcional. En el caso de ser omitido, adopta el valor de **`true`**, por lo que se hace una _deep copy_ por defecto. Para realizar una copia superficial (_shallow copy_), _deep_ debe ser **`false`**.
+> [!NOTE]
+> En la especificación DOM4 (tal y como se ha implementado en Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), `deep` es un argumento opcional. En el caso de ser omitido, adopta el valor de **`true`**, por lo que se hace una _deep copy_ por defecto. Para realizar una copia superficial (_shallow copy_), _deep_ debe ser **`false`**.
 >
 > Este comportamiento ha cambiado en la ultima especificación, por lo que si se omite el parámetro _deep,_ éste adopta el valor **`false`**. Aunque aún es opcional, debería ser siempre provisto por razones de compatibilidad. Con Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3), la consola advertia a los desarrolladores de no omitir el argumento. Empezando con Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)), se realiza una copia superficial (_shallow copy_) por defecto.
 
diff --git a/files/es/web/api/document/open/index.md b/files/es/web/api/document/open/index.md
index 43fe620f7bf2d1..1b41911cea05e6 100644
--- a/files/es/web/api/document/open/index.md
+++ b/files/es/web/api/document/open/index.md
@@ -40,7 +40,8 @@ document.close();
 
 ## Notas
 
-> **Nota:** Traducción pendiente para el texto que sigue
+> [!NOTE]
+> Traducción pendiente para el texto que sigue
 
 An automatic `document.open()` call happens when {{domxref("document.write()")}} is called after the page has loaded.
 
diff --git a/files/es/web/api/document/queryselectorall/index.md b/files/es/web/api/document/queryselectorall/index.md
index f29145e45be1d8..f5d212dc01b2ba 100644
--- a/files/es/web/api/document/queryselectorall/index.md
+++ b/files/es/web/api/document/queryselectorall/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Document/querySelectorAll
 
 El método **`querySelectorAll()`** de un {{domxref("Element")}} devuelve una {{domxref("NodeList")}} estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.
 
-> **Nota:** Esto método se implementa en base al método {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} del mixin {{domxref("ParentNode")}}.
+> [!NOTE]
+> Esto método se implementa en base al método {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} del mixin {{domxref("ParentNode")}}.
 
 ## Sintaxis
 
@@ -20,13 +21,15 @@ elementList = parentNode.querySelectorAll(selectors);
 - `selectors`
   - : Un {{domxref("DOMString")}} que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena [CSS selector](/es/docs/Web/CSS/CSS_Selectors) válida; si no lo es, se lanzará una excepción `SyntaxError`. Vea [Locating DOM elements using selectors](/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) para más información acerca de utilizar selectores para identificar elementos. Se pueden especificar varios selectores separándolos utilizando comas.
 
-> **Nota:** Los caracteres que no son parte de la sintaxis estándar de CSS deben ser escapados utilizando el caracter de barra invertida. Dado que JavaScript también utiliza el escapado por retroceso, se debe tener especial cuidado al escribir cadenas de texto literales utilizando estos caracteres. Vea [Escapando caracteres especiales](#escapando_caracteres_especiales) para más información.
+> [!NOTE]
+> Los caracteres que no son parte de la sintaxis estándar de CSS deben ser escapados utilizando el caracter de barra invertida. Dado que JavaScript también utiliza el escapado por retroceso, se debe tener especial cuidado al escribir cadenas de texto literales utilizando estos caracteres. Vea [Escapando caracteres especiales](#escapando_caracteres_especiales) para más información.
 
 ### Valor devuelto
 
 Una {{domxref("NodeList")}} _no viva_ que contenga un objeto {{domxref("Element")}} para cada elemento que coincida con al menos uno de los selectores especificados o una {{domxref("NodeList")}} vacía en caso de que no haya coincidencias.
 
-> **Nota:** Si los selectores indicados incluyen un [pseudo-elemento CSS](/es/docs/Web/CSS/Pseudo-elements), la lista devuelta siempre estará vacía.
+> [!NOTE]
+> Si los selectores indicados incluyen un [pseudo-elemento CSS](/es/docs/Web/CSS/Pseudo-elements), la lista devuelta siempre estará vacía.
 
 ### Excepciones
 
diff --git a/files/es/web/api/document/write/index.md b/files/es/web/api/document/write/index.md
index a021c9d245d765..f15b557f879860 100644
--- a/files/es/web/api/document/write/index.md
+++ b/files/es/web/api/document/write/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Document/write
 
 Escribe una cadena de texto dentro del hilo de un `document` abierto por [document.open()](/es/docs/Web/API/document.open).
 
-> **Nota:** Dado que `document.write` escribe directo al hilo **(stream**) de un documento, la llamada a `document.write` en un documento ya cargado automáticamente ejecuta `document.open`, [lo cual limpiará todo el contenido del documento en cuestión](/es/docs/Web/API/document.open#Notes).
+> [!NOTE]
+> Dado que `document.write` escribe directo al hilo **(stream**) de un documento, la llamada a `document.write` en un documento ya cargado automáticamente ejecuta `document.open`, [lo cual limpiará todo el contenido del documento en cuestión](/es/docs/Web/API/document.open#Notes).
 
 ## Sintaxis
 
diff --git a/files/es/web/api/document/writeln/index.md b/files/es/web/api/document/writeln/index.md
index 3562aa18e2204b..356f979a5e3f4f 100644
--- a/files/es/web/api/document/writeln/index.md
+++ b/files/es/web/api/document/writeln/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Document/writeln
 
 Escribe una cadena de texto en el documento, seguida de una nueva línea.
 
-> **Nota:** Dado que `document.writeln` (al igual que `document.write)` escribe directo al hilo (`stream`) de un documento, la llamada a `document.write` en un documento ya cargado automáticamente ejecuta `document.open`, [lo cual limpiará todo el contenido del documento en cuestión](/es/docs/Web/API/document.open#Notes).
+> [!NOTE]
+> Dado que `document.writeln` (al igual que `document.write)` escribe directo al hilo (`stream`) de un documento, la llamada a `document.write` en un documento ya cargado automáticamente ejecuta `document.open`, [lo cual limpiará todo el contenido del documento en cuestión](/es/docs/Web/API/document.open#Notes).
 
 ## Sintaxis
 
diff --git a/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.md b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
index 3d1deebb2cff02..5e9cc8139ff213 100644
--- a/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
+++ b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
@@ -16,7 +16,8 @@ Esta especificación añade dos nuevos metodos a cualquier objeto implementando
 - {{domxref("Element.querySelectorAll", "querySelectorAll()")}}
   - : devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( `Element`) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio `NodeList` sino se encuentran coincidencias.
 
-> **Nota:** El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.
+> [!NOTE]
+> El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.
 
 Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo [Code snippets for querySelector](/es/docs/Code_snippets/QuerySelector).
 
diff --git a/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
index cad9182fd1d728..667edc4449ecf5 100644
--- a/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
+++ b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and
 
 Este artículo es un resumen de algunos métodos DOM nivel 1 poderosos y fundamentales así como una descripción de cómo utilizarlos utilizando Javascript. Aprenderás a crear, accesar, controlar, y remover elementos HTML dinámicamente. Los métodos DOM presentados aquí no son específicos de HTML; también aplican para XML. Las demostraciones aquí proporcionadas funcionarán en cualquier navegador moderno, incluyendo todas las versiones de Firefox e IE 5+.
 
-> **Nota:** Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1. DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).
+> [!NOTE]
+> Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1. DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).
 
 ## Ejemplo: Crear una tabla HTML dinámicamente (`Ejemplo1.html`)
 
@@ -214,7 +215,8 @@ After testing this sample, note that the words hello and world are together: hel
 
 ![Image:sample2b2.jpg](sample2b2.jpg)
 
-> **Nota:** createTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.
+> [!NOTE]
+> CreateTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.
 
 ### Creating New Elements with the document object and the `createElement(..)` method
 
@@ -261,7 +263,8 @@ The basic steps to create the table in sample1.html are:
 - Create all the elements.
 - Finally, append each child according to the table structure (as in the above figure). The following source code is a commented version for the sample1.html.
 
-> **Nota:** At the end of the start function there is a new line of code. The table's border property was set using another DOM method, `setAttribute`. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.
+> [!NOTE]
+> At the end of the start function there is a new line of code. The table's border property was set using another DOM method, `setAttribute`. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.
 
 ```html
 <head>
@@ -314,7 +317,8 @@ The basic steps to create the table in sample1.html are:
 
 This example introduces two new DOM attributes. First it uses the `childNodes` attribute to get the list of child nodes of mycel. The `childNodes` list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use `[x]` method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the \<body> element.
 
-> **Nota:** If your object is a text node, you can use the data attribute and retrieve the text content of the node.
+> [!NOTE]
+> If your object is a text node, you can use the data attribute and retrieve the text content of the node.
 
 ```js
 mybody = document.getElementsByTagName("body")[0];
diff --git a/files/es/web/api/domexception/index.md b/files/es/web/api/domexception/index.md
index 69b7e1bba6fda3..9f760c717a32d7 100644
--- a/files/es/web/api/domexception/index.md
+++ b/files/es/web/api/domexception/index.md
@@ -35,7 +35,8 @@ Tenga en cuenta que los siguientes errores históricos obsoletos no tienen un no
 - Valor de código heredado: `6`, nombre de constante heredado: `NO_DATA_ALLOWED_ERR`
 - Valor de código heredado: `16`, nombre de constante heredado: `VALIDATION_ERR`
 
-> **Nota:** Debido a que históricamente los errores estaban identificados por un valor numérico que correspondía con un nombre de variable definida para tener ese valor, algunas de las entradas a continuación indican el valor de código heredado y el nombre constante que se usó en el pasado.
+> [!NOTE]
+> Debido a que históricamente los errores estaban identificados por un valor numérico que correspondía con un nombre de variable definida para tener ese valor, algunas de las entradas a continuación indican el valor de código heredado y el nombre constante que se usó en el pasado.
 
 - `IndexSizeError`
   - : El índice no está en el rango permitido. Por ejemplo, esto podría ser arrojado por el objeto {{ domxref("Range") }}. (Valor de código heradado: `1` y nombre de constante heredado: `INDEX_SIZE_ERR`)
diff --git a/files/es/web/api/element/animate/index.md b/files/es/web/api/element/animate/index.md
index baa1dfd8d75d09..71130b6e9bbd43 100644
--- a/files/es/web/api/element/animate/index.md
+++ b/files/es/web/api/element/animate/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/animate
 
 El método `animate()` de la interfaz {{domxref("Element")}} es un método abreviado el cual crea un nuevo {{domxref("Animation")}}, aplicado al elemento, luego reproduce la animación. Devuelve la instancia creada de un objeto {{domxref("Animation")}}.
 
-> **Nota:** Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una
+> [!NOTE]
+> Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una
 > lista de las animaciones que afectan a un elemento llamando a {{domxref("Element.getAnimations()")}}.
 
 ## Síntaxis
diff --git a/files/es/web/api/element/blur_event/index.md b/files/es/web/api/element/blur_event/index.md
index 80f73056b8f05f..3482b56a8f02f6 100644
--- a/files/es/web/api/element/blur_event/index.md
+++ b/files/es/web/api/element/blur_event/index.md
@@ -22,7 +22,8 @@ El evento `blur` es disparado cuando un elemento ha perdido su foco. La diferenc
 - Acción por defecto
   - : Ninguna.
 
-> **Nota:** El valor de {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ([Error 452307 en Firefox](https://bugzil.la/452307)): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.
+> [!NOTE]
+> El valor de {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ([Error 452307 en Firefox](https://bugzil.la/452307)): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.
 
 ## Propiedades
 
diff --git a/files/es/web/api/element/childelementcount/index.md b/files/es/web/api/element/childelementcount/index.md
index 29494cff699539..ec6787a5d3f399 100644
--- a/files/es/web/api/element/childelementcount/index.md
+++ b/files/es/web/api/element/childelementcount/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/childElementCount
 
 La propiedad de sólo lectura `ParentNode.childElementCount` devuelve un número del tipo `unsigned long` que representa la cantidad de elementos hijo que penden del elemento padre (ParentNode).
 
-> **Nota:** Esta propiedad fue inicialmente definida en la interfaz pura {{domxref("ElementTraversal")}}. Como esta interfaz contenía dos conjuntos distintos de propiedades: una apuntaba al {{domxref("Node")}} con hijos y otra a los hijos, fueron trasladados a dos interfaces puras separadas: {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, `childElementCount` se mudó a {{domxref("ParentNode")}}. Este es un cambio bastante técnico que no debería afectar a la compatibilidad.
+> [!NOTE]
+> Esta propiedad fue inicialmente definida en la interfaz pura {{domxref("ElementTraversal")}}. Como esta interfaz contenía dos conjuntos distintos de propiedades: una apuntaba al {{domxref("Node")}} con hijos y otra a los hijos, fueron trasladados a dos interfaces puras separadas: {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, `childElementCount` se mudó a {{domxref("ParentNode")}}. Este es un cambio bastante técnico que no debería afectar a la compatibilidad.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/element/classlist/index.md b/files/es/web/api/element/classlist/index.md
index 8139545390cbad..15d632441a0136 100644
--- a/files/es/web/api/element/classlist/index.md
+++ b/files/es/web/api/element/classlist/index.md
@@ -57,7 +57,8 @@ div.classList.remove("foo", "bar");
 div.classList.replace("foo", "bar");
 ```
 
-> **Nota:** Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea <https://bugzilla.mozilla.org/show_bug.cgi?id=814014>
+> [!NOTE]
+> Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea <https://bugzilla.mozilla.org/show_bug.cgi?id=814014>
 
 ## Especificaciones
 
diff --git a/files/es/web/api/element/clientheight/index.md b/files/es/web/api/element/clientheight/index.md
index 255ec5c0b444ac..040436bd335e14 100644
--- a/files/es/web/api/element/clientheight/index.md
+++ b/files/es/web/api/element/clientheight/index.md
@@ -9,7 +9,8 @@ La propiedad de sólo lectura `Element.clientHeight` devuelve la altura de un el
 
 `clientHeight` puede ser calculado como CSS `height` + CSS `padding` - alto de la barra horizontal (si existe).
 
-> **Nota:** Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/element/clientwidth/index.md b/files/es/web/api/element/clientwidth/index.md
index c9a4d859e59c4a..e6bf580d4ef8f0 100644
--- a/files/es/web/api/element/clientwidth/index.md
+++ b/files/es/web/api/element/clientwidth/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/clientWidth
 
 La propiedad `Element.clientWidth` es cero para elementos sin CSS o cajas de diseño (layout), en caso contrario es la anchura interior de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical (si está presente, si está dibujada), el borde o el margen.
 
-> **Nota:** El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/element/getclientrects/index.md b/files/es/web/api/element/getclientrects/index.md
index 8094339d27f74f..3e2936abc9940c 100644
--- a/files/es/web/api/element/getclientrects/index.md
+++ b/files/es/web/api/element/getclientrects/index.md
@@ -17,7 +17,8 @@ var rectCollection = object.getClientRects();
 
 El valor devuelto es una colección de objetos rectangulares {{domxref("DOMRect")}}, uno para cada cuadro borde CSS asociado al elemento. Cada objeto {{domxref("DOMRect")}} contiene las propiedades de sólo lectura: `left`, `top`, `right` y `bottom`, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del _viewport._ En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el `<svg>` externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el `<svg>` externo (y serán transformados por las trasnformaciones del `<svg>` externo, si estas existen).
 
-> **Nota:** Firefox 3.5 ha agregado las propiedades `width` y `height` al objeto `TextRectangle`.
+> [!NOTE]
+> Firefox 3.5 ha agregado las propiedades `width` y `height` al objeto `TextRectangle`.
 
 La cantidad de desplazamiento que ha tenido el área del viewport (o cualquier otro elemento desplazable) se tiene en cuenta al calcular los rectángulos.
 
diff --git a/files/es/web/api/element/getelementsbytagname/index.md b/files/es/web/api/element/getelementsbytagname/index.md
index ccfc70bdc5dee9..21dedc480ebfcc 100644
--- a/files/es/web/api/element/getelementsbytagname/index.md
+++ b/files/es/web/api/element/getelementsbytagname/index.md
@@ -19,7 +19,8 @@ elements = element.getElementsByTagName(tagName);
 - `element` es el elemento a partir del cual debe empezar la búsqueda. Recuerda que sólo se buscan los elementos descendentes del elemento dado, sin incluir el propio elemento.
 - `tagName` es el nombre que se busca. La cadena especial `"*"` representa todos los elementos.
 
-> **Nota:** En Firefox 2 (Gecko 1.8.1) y anteriores, este método no funcionaba correctamente si el árbol contenía algún elemento con etiqueta de nombre conteniendo espacios. (Ver [Error 206053 en Firefox](https://bugzil.la/206053) para más detalles).
+> [!NOTE]
+> En Firefox 2 (Gecko 1.8.1) y anteriores, este método no funcionaba correctamente si el árbol contenía algún elemento con etiqueta de nombre conteniendo espacios. (Ver [Error 206053 en Firefox](https://bugzil.la/206053) para más detalles).
 >
 > Es recomendable usar [DOM:document.getElementsByTagNameNS](/es/DOM/document.getElementsByTagNameNS) cuando se manejan documentos con "multi-namespace".
 
diff --git a/files/es/web/api/element/id/index.md b/files/es/web/api/element/id/index.md
index 16bd0c8bd19b2a..128d3245115bdc 100644
--- a/files/es/web/api/element/id/index.md
+++ b/files/es/web/api/element/id/index.md
@@ -9,7 +9,8 @@ La propiedad `Element.id` representa el identificador del elemento, reflejando e
 
 debe ser un único documento, y con frecuencia es utilizado para recuperar el elemento usando {{domxref("document.getElementById", "getElementById")}}. Otros usos comunes de `id` incluyen la utilización de elementos [ID como un selector](/es/docs/Web/CSS/ID_selectors) cuando se está estilando el documento con [CSS](/es/docs/Web/CSS).
 
-> **Nota:** los identificadores distinguen mayúsculas y minúsculas, pero se debe evitar la creación de IDs que difieran solamente en la capitalization (ver [diferenciación de mayúsculas y minúsculas en nombres y destacados](/es/docs/Case_Sensitivity_in_class_and_id_Names)).
+> [!NOTE]
+> Los identificadores distinguen mayúsculas y minúsculas, pero se debe evitar la creación de IDs que difieran solamente en la capitalization (ver [diferenciación de mayúsculas y minúsculas en nombres y destacados](/es/docs/Case_Sensitivity_in_class_and_id_Names)).
 
 ## Síntaxis
 
diff --git a/files/es/web/api/element/innerhtml/index.md b/files/es/web/api/element/innerhtml/index.md
index ebdb5b6d9c594c..469129b5526745 100644
--- a/files/es/web/api/element/innerhtml/index.md
+++ b/files/es/web/api/element/innerhtml/index.md
@@ -11,7 +11,8 @@ La propiedad `Element.innerHTML` devuelve o establece la sintaxis HTML describie
 
 Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.
 
-> **Nota:** Si un nodo tiene un texto secundario que incluye los caracteres `(&), (<),` o `(>)`, `innerHTML` devuelve estos caracteres como \&amp, \&lt y \&gt respectivamente. Use {{ domxref("Node.textContent") }} para conseguir una copia correcta del contenido de estos nodos de texto.
+> [!NOTE]
+> Si un nodo tiene un texto secundario que incluye los caracteres `(&), (<),` o `(>)`, `innerHTML` devuelve estos caracteres como \&amp, \&lt y \&gt respectivamente. Use {{ domxref("Node.textContent") }} para conseguir una copia correcta del contenido de estos nodos de texto.
 
 Para **insertar el código HTML** en el documento en lugar de cambiar el contenido de un elemento, use el método [insertAdjacentHTML().](/es/docs/Web/API/Element/insertAdjacentHTML)
 
@@ -63,7 +64,8 @@ document.documentElement.innerHTML =
   "<pre>" + document.documentElement.innerHTML.replace(/</g, "&lt;") + "</pre>";
 ```
 
-> **Nota:** Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de **texto multilinea (elemento `textarea`)**, Internet Explorer cambiará el valor de la propiedad `innerHTML` del **elemento `textarea`**, mientras que los navegadores Gecko no lo hacen.
+> [!NOTE]
+> Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de **texto multilinea (elemento `textarea`)**, Internet Explorer cambiará el valor de la propiedad `innerHTML` del **elemento `textarea`**, mientras que los navegadores Gecko no lo hacen.
 
 ### Consideración de seguridad
 
diff --git a/files/es/web/api/element/input_event/index.md b/files/es/web/api/element/input_event/index.md
index efa3481de1ac64..6a82cc0cf539ac 100644
--- a/files/es/web/api/element/input_event/index.md
+++ b/files/es/web/api/element/input_event/index.md
@@ -40,7 +40,8 @@ El evento también aplica a los elementos con la propiedad {{domxref("HTMLElemen
 
 Para elementos `<input>` con `type=checkbox` o `type=radio`, el evento `input` debería disparar cuando el usuario alterna el control, por [la especificación HTML5](https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2). Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento [`change`](/es/docs/Web/Reference/Events/change) en su lugar para estos tipos.
 
-> **Nota:** A diferencia de `input`, el evento [`change`](/es/docs/Web/Reference/Events/change) no es disparado necesariamente por cada alteración al valor (`value`) de un elemento.
+> [!NOTE]
+> A diferencia de `input`, el evento [`change`](/es/docs/Web/Reference/Events/change) no es disparado necesariamente por cada alteración al valor (`value`) de un elemento.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/element/insertadjacentelement/index.md b/files/es/web/api/element/insertadjacentelement/index.md
index 6d5647e97b3d30..c96f983c200ace 100644
--- a/files/es/web/api/element/insertadjacentelement/index.md
+++ b/files/es/web/api/element/insertadjacentelement/index.md
@@ -50,7 +50,8 @@ El elemento insertado o `null`, si la inserción falla.
 <!-- afterend -->
 ```
 
-> **Nota:** Las posiciones `beforebegin` y `afterend` sólo funcionan si el nodo está en un árbol y tiene un padre.
+> [!NOTE]
+> Las posiciones `beforebegin` y `afterend` sólo funcionan si el nodo está en un árbol y tiene un padre.
 
 ## Ejemplo
 
diff --git a/files/es/web/api/element/insertadjacenthtml/index.md b/files/es/web/api/element/insertadjacenthtml/index.md
index e7ceb7242d346a..c49bf5233a2ba6 100644
--- a/files/es/web/api/element/insertadjacenthtml/index.md
+++ b/files/es/web/api/element/insertadjacenthtml/index.md
@@ -39,7 +39,8 @@ element.insertAdjacentHTML(posición, texto);
 <!-- afterend -->
 ```
 
-> **Nota:** Las posiciones `beforebegin` y `afterend` funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.
+> [!NOTE]
+> Las posiciones `beforebegin` y `afterend` funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.
 
 ## Ejemplo
 
diff --git a/files/es/web/api/element/keydown_event/index.md b/files/es/web/api/element/keydown_event/index.md
index 52fc9a9cb3ec30..82552dffe6ab7a 100644
--- a/files/es/web/api/element/keydown_event/index.md
+++ b/files/es/web/api/element/keydown_event/index.md
@@ -54,7 +54,8 @@ _Esta interfaz también hereda las propiedades de sus padres, {{domxref("UIEvent
 
   - : Devuelve una cadena con el valor del código de la tecla física representada por el evento.
 
-    > **Advertencia:** Esto ignora el diseño del teclado del usuario, de modo que si el usuario presiona la tecla en la posición "Y" en un diseño de teclado QWERTY (cerca del medio de la fila sobre la fila de inicio), esto siempre devolverá "KeyY", incluso si el el usuario tiene un teclado QWERTZ (lo que significaría que el usuario espera una "Z" y todas las demás propiedades indicarían una "Z") o un diseño de teclado Dvorak (donde el usuario esperaría una "F"). Si desea mostrar las pulsaciones de teclas correctas al usuario, puede usar {{domxref("Keyboard.getLayoutMap()")}}.
+    > [!WARNING]
+    > Esto ignora el diseño del teclado del usuario, de modo que si el usuario presiona la tecla en la posición "Y" en un diseño de teclado QWERTY (cerca del medio de la fila sobre la fila de inicio), esto siempre devolverá "KeyY", incluso si el el usuario tiene un teclado QWERTZ (lo que significaría que el usuario espera una "Z" y todas las demás propiedades indicarían una "Z") o un diseño de teclado Dvorak (donde el usuario esperaría una "F"). Si desea mostrar las pulsaciones de teclas correctas al usuario, puede usar {{domxref("Keyboard.getLayoutMap()")}}.
 
 - {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
@@ -68,7 +69,8 @@ _Esta interfaz también hereda las propiedades de sus padres, {{domxref("UIEvent
 
   - : Devuelve una cadena que representa una cadena de configuración regional que indica la configuración regional para la que está configurado el teclado. Esta puede ser la cadena vacía si el navegador o el dispositivo no conocen la configuración regional del teclado.
 
-    > **Nota:** Esto no describe la configuración regional de los datos que se ingresan. Un usuario puede estar usando un diseño de teclado mientras escribe texto en un idioma diferente.
+    > [!NOTE]
+    > Esto no describe la configuración regional de los datos que se ingresan. Un usuario puede estar usando un diseño de teclado mientras escribe texto en un idioma diferente.
 
 - {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
   - : Devuelve un número que representa la ubicación de la tecla en el teclado u otro dispositivo de entrada.
diff --git a/files/es/web/api/element/keyup_event/index.md b/files/es/web/api/element/keyup_event/index.md
index 09283923ee7b17..82a0c3ee6cedb4 100644
--- a/files/es/web/api/element/keyup_event/index.md
+++ b/files/es/web/api/element/keyup_event/index.md
@@ -53,7 +53,8 @@ _Esta interfaz también hereda propiedades de sus padres, {{domxref("UIEvent")}}
 
   - : Devuelve una cadena con el valor del código de la clave física representada por el evento.
 
-    > **Advertencia:** Esto ignora el diseño del teclado del usuario, de modo que si el usuario presiona la tecla en la posición "Y" en un diseño de teclado QWERTY (cerca del medio de la fila sobre la fila de inicio), esto siempre devolverá "KeyY", incluso si el el usuario tiene un teclado QWERTZ (lo que significaría que el usuario espera una "Z" y todas las demás propiedades indicarían una "Z") o un diseño de teclado Dvorak (donde el usuario esperaría una "F"). Si desea mostrar las pulsaciones de teclas correctas al usuario, puede usar {{domxref("Keyboard.getLayoutMap()")}}.
+    > [!WARNING]
+    > Esto ignora el diseño del teclado del usuario, de modo que si el usuario presiona la tecla en la posición "Y" en un diseño de teclado QWERTY (cerca del medio de la fila sobre la fila de inicio), esto siempre devolverá "KeyY", incluso si el el usuario tiene un teclado QWERTZ (lo que significaría que el usuario espera una "Z" y todas las demás propiedades indicarían una "Z") o un diseño de teclado Dvorak (donde el usuario esperaría una "F"). Si desea mostrar las pulsaciones de teclas correctas al usuario, puede usar {{domxref("Keyboard.getLayoutMap()")}}.
 
 - {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
@@ -67,7 +68,8 @@ _Esta interfaz también hereda propiedades de sus padres, {{domxref("UIEvent")}}
 
   - : Devuelve una cadena que representa una cadena de configuración regional que indica la configuración regional para la que está configurado el teclado. Esta puede ser la cadena vacía si el navegador o el dispositivo no conocen la configuración regional del teclado.
 
-    > **Nota:** Esto no describe la configuración regional de los datos que se ingresan. Un usuario puede estar usando un diseño de teclado mientras escribe texto en un idioma diferente.
+    > [!NOTE]
+    > Esto no describe la configuración regional de los datos que se ingresan. Un usuario puede estar usando un diseño de teclado mientras escribe texto en un idioma diferente.
 
 - {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
   - : Devuelve un número que representa la ubicación de la tecla en el teclado u otro dispositivo de entrada. Una lista de las constantes que identifican las ubicaciones se muestra en [Ubicaciones del teclado](/es/docs/Web/API/KeyboardEvent#keyboard_locations).
diff --git a/files/es/web/api/element/localname/index.md b/files/es/web/api/element/localname/index.md
index 6fba87c0f6048e..194d68470302dd 100644
--- a/files/es/web/api/element/localname/index.md
+++ b/files/es/web/api/element/localname/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/localName
 
 La propiedad únicamente de lectura `Element.localName` devuelve la parte local del nombre calificado de un objeto.
 
-> **Nota:** Antes de DOM4 esta API fué definida dentro de la interfaz{{domxref("Node")}}.
+> [!NOTE]
+> Antes de DOM4 esta API fué definida dentro de la interfaz{{domxref("Node")}}.
 
 ## Sintasix
 
@@ -62,7 +63,8 @@ El nombre local de un nodo es la parte del nombre completo del nodo que va situa
 6  </ecomm:business>
 ```
 
-> **Nota:** En Gecko 1.9.2 y anteriores,devuelve la versión en mayúsculas del nombre local para elementos HTML en HTML DOMs (en contraposición a elementos XHTML en XML DOMs). En versiones posteriores, en concordancia con HTML5,la propiedad devuelve en el caso de almacenamiento interno DOM , minúscula para ambos elementos HTML en HTML DOM y elementos XHTML en DOM XML. La propiedad {{domxref("element.tagName","tagName")}} continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.
+> [!NOTE]
+> En Gecko 1.9.2 y anteriores,devuelve la versión en mayúsculas del nombre local para elementos HTML en HTML DOMs (en contraposición a elementos XHTML en XML DOMs). En versiones posteriores, en concordancia con HTML5,la propiedad devuelve en el caso de almacenamiento interno DOM , minúscula para ambos elementos HTML en HTML DOM y elementos XHTML en DOM XML. La propiedad {{domxref("element.tagName","tagName")}} continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.
 
 ## Especificaciones
 
diff --git a/files/es/web/api/element/namespaceuri/index.md b/files/es/web/api/element/namespaceuri/index.md
index d29b4961435e86..acdc271d63347a 100644
--- a/files/es/web/api/element/namespaceuri/index.md
+++ b/files/es/web/api/element/namespaceuri/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/namespaceURI
 
 La propiedad `Element.namespaceURI` unicamente de lectura devuelve la URI namespace de el elemento, `o la anula si el elemento no está en un` namespace.
 
-> **Nota:** Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.
+> [!NOTE]
+> Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.
 
 ## Síntaxis
 
diff --git a/files/es/web/api/element/prefix/index.md b/files/es/web/api/element/prefix/index.md
index 2d2117770cfd09..dd22aaa64a4a0f 100644
--- a/files/es/web/api/element/prefix/index.md
+++ b/files/es/web/api/element/prefix/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/prefix
 
 La propiedad `Element.prefix` unicamente de lectura devuelve el namespace prefix de el elemento especificado, o `null` si no hay especificado prefix.
 
-> **Nota:** Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.
+> [!NOTE]
+> Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.
 
 ## Síntaxis
 
diff --git a/files/es/web/api/element/scrollheight/index.md b/files/es/web/api/element/scrollheight/index.md
index c235c437bdb64d..72b38546a1fc29 100644
--- a/files/es/web/api/element/scrollheight/index.md
+++ b/files/es/web/api/element/scrollheight/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/scrollHeight
 
 El elemento **Element.scrollHeight** atributo unicamente de lectura es una medida de la altura del contenido de un elemento, incluyendo el contenido que no es visible en la pantalla debido al desbordamiento. El valor `scrollHeight` es igual a la altura mínima (donde la altura incluye el relleno , pero no incluye bordes y márgenes) El elemento lo necesita con el fin de adaptarse a todos los contenidos en el punto de vista sin necesidad de utilizar una barra de desplazamiento vertical. Incluye el elemento relleno pero no su margen.
 
-> **Nota:** Esta propiedad redondea el valor a un número entero. Si se necesita un valor fraccionario, utilizar {{domxref("Element.getBoundingClientRect()")}}.
+> [!NOTE]
+> Esta propiedad redondea el valor a un número entero. Si se necesita un valor fraccionario, utilizar {{domxref("Element.getBoundingClientRect()")}}.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/element/scrollwidth/index.md b/files/es/web/api/element/scrollwidth/index.md
index 5f7535ffba3418..adddbcb32b6a6d 100644
--- a/files/es/web/api/element/scrollwidth/index.md
+++ b/files/es/web/api/element/scrollwidth/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/scrollWidth
 
 La propiedad de sólo lectura `Element.scrollWidth` retorna bien la anchura en pixels del contenido de un elemento o bien la anchura del elemento en si, la que sea mayor de ambas. Si el elemento es más ancho que su área contenedora (por ejemplo, si existen barras de desplazamiento para desplazarse a través del contenido), `scrollWidth` es mayor que `clientWidth`.
 
-> **Nota:** El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/element/touchstart_event/index.md b/files/es/web/api/element/touchstart_event/index.md
index 6e3027f60b7f9b..8b5b9d124f5f64 100644
--- a/files/es/web/api/element/touchstart_event/index.md
+++ b/files/es/web/api/element/touchstart_event/index.md
@@ -9,7 +9,8 @@ Un {{domxref("GlobalEventHandlers","global event handler")}} para el evento [`to
 
 {{SeeCompatTable}}
 
-> **Nota:** Este atributo _no_ ha sido estandarizado formalmente. Está especificado en la especificación [Touch Events – Level 2](https://w3c.github.io/touch-events/) Draft y no en [Touch Events](https://www.w3.org/TR/touch-events/) Recommendation. Este atributo no está totalmente implementado.
+> [!NOTE]
+> Este atributo _no_ ha sido estandarizado formalmente. Está especificado en la especificación [Touch Events – Level 2](https://w3c.github.io/touch-events/) Draft y no en [Touch Events](https://www.w3.org/TR/touch-events/) Recommendation. Este atributo no está totalmente implementado.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/element/wheel_event/index.md b/files/es/web/api/element/wheel_event/index.md
index 26e8c11a534021..435ec511fc1924 100644
--- a/files/es/web/api/element/wheel_event/index.md
+++ b/files/es/web/api/element/wheel_event/index.md
@@ -17,7 +17,8 @@ Este evento reemplaza el evento obsoleto no estándar {{domxref("Element/mousewh
 | Interfaz                             | [`WheelEvent`](/es/docs/Web/API/WheelEvent)                   |
 | Propiedades del manejador de eventos | [`onwheel`](/es/docs/conflicting/Web/API/Element/wheel_event) |
 
-> **Nota:** No confundir el evento `wheel` con el evento {{domxref("Element/scroll_event", "scroll")}}. La acción predeterminada de un evento `wheel` es específica de la implementación y no necesariamente envía un evento `scroll`. Incluso cuando lo hace, los valores `delta*` en el evento `wheel` no reflejan necesariamente la dirección de desplazamiento del contenido. Por lo tanto, no confíe en las propiedades `delta*` del evento `wheel` para obtener la dirección de desplazamiento. En su lugar, detecte los cambios de valor de {{domxref("Element.scrollLeft", "scrollLeft")}} y {{domxref("Element.scrollTop", "scrollTop")}} del objetivo en el evento `scroll`.
+> [!NOTE]
+> No confundir el evento `wheel` con el evento {{domxref("Element/scroll_event", "scroll")}}. La acción predeterminada de un evento `wheel` es específica de la implementación y no necesariamente envía un evento `scroll`. Incluso cuando lo hace, los valores `delta*` en el evento `wheel` no reflejan necesariamente la dirección de desplazamiento del contenido. Por lo tanto, no confíe en las propiedades `delta*` del evento `wheel` para obtener la dirección de desplazamiento. En su lugar, detecte los cambios de valor de {{domxref("Element.scrollLeft", "scrollLeft")}} y {{domxref("Element.scrollTop", "scrollTop")}} del objetivo en el evento `scroll`.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/event/defaultprevented/index.md b/files/es/web/api/event/defaultprevented/index.md
index eac018c7bbb21d..a23b8252d9a14b 100644
--- a/files/es/web/api/event/defaultprevented/index.md
+++ b/files/es/web/api/event/defaultprevented/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Event/defaultPrevented
 
 Retorna un boleano indicando si {{ domxref("event.preventDefault()") }} fue llamado en el evento o no.
 
-> **Nota:** Deberías usar este en lugar del que no es estándar, el método obsoleto `getPreventDefault()` (ver [Error 691151 en Firefox](https://bugzil.la/691151)).
+> [!NOTE]
+> Deberías usar este en lugar del que no es estándar, el método obsoleto `getPreventDefault()` (ver [Error 691151 en Firefox](https://bugzil.la/691151)).
 
 ### Sintaxis
 
diff --git a/files/es/web/api/eventsource/index.md b/files/es/web/api/eventsource/index.md
index f365c9d11f510c..f575795992f8e0 100644
--- a/files/es/web/api/eventsource/index.md
+++ b/files/es/web/api/eventsource/index.md
@@ -53,7 +53,8 @@ evtSource.onmessage = function (e) {
 };
 ```
 
-> **Nota:** Está disponible un ejemplo completo en GitHub — ver [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
+> [!NOTE]
+> Está disponible un ejemplo completo en GitHub — ver [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
 
 ## Especificaciones
 
diff --git a/files/es/web/api/eventsource/open_event/index.md b/files/es/web/api/eventsource/open_event/index.md
index 4089e1c80a6c90..ee06ad1c8faabe 100644
--- a/files/es/web/api/eventsource/open_event/index.md
+++ b/files/es/web/api/eventsource/open_event/index.md
@@ -21,7 +21,8 @@ evtSource.onopen = function () {
 };
 ```
 
-> **Nota:** Tu puedes encontrar un ejemplo completo en GitHub — ve [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
+> [!NOTE]
+> Tu puedes encontrar un ejemplo completo en GitHub — ve [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
 
 ## Especificaciones
 
diff --git a/files/es/web/api/eventtarget/addeventlistener/index.md b/files/es/web/api/eventtarget/addeventlistener/index.md
index 1303193a09af1b..dbaa06076611ea 100644
--- a/files/es/web/api/eventtarget/addeventlistener/index.md
+++ b/files/es/web/api/eventtarget/addeventlistener/index.md
@@ -26,7 +26,8 @@ target.addEventListener(tipo, listener[, useCapture, wantsUntrusted {{ Non-stand
 
   - : Si es `true`, `useCapture` indica que el usuario desea iniciar la captura. Después de iniciar la captura, todos los eventos del tipo especificado serán lanzados al `listener` registrado antes de comenzar a ser controlados por algún `EventTarget` que esté por debajo en el arbol DOM del documento.
 
-    > **Nota:** For event listeners attached to the event target; the event is in the target phase, rather than capturing and bubbling phases. Events in the target phase will trigger all listeners on an element regardless of the `useCapture` parameter.
+    > [!NOTE]
+    > For event listeners attached to the event target; the event is in the target phase, rather than capturing and bubbling phases. Events in the target phase will trigger all listeners on an element regardless of the `useCapture` parameter.
 
     > **Nota:** `useCapture` became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide that parameter for broadest compatibility.
 
@@ -169,7 +170,8 @@ In the example above, the value of `this` within `modifyText()` when called from
 
 The value of `this` within `modifyText()` when called from the onclick event will be a reference to the global (window) object.
 
-> **Nota:** JavaScript 1.8.5 introduces the [`Function.prototype.bind()`](/es/docs/JavaScript/Reference/Global_Objects/Function/bind) method, which lets you specify the value that should be used as `this` for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.
+> [!NOTE]
+> JavaScript 1.8.5 introduces the [`Function.prototype.bind()`](/es/docs/JavaScript/Reference/Global_Objects/Function/bind) method, which lets you specify the value that should be used as `this` for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.
 
 This is an example with and without `bind`:
 
diff --git a/files/es/web/api/fetch_api/index.md b/files/es/web/api/fetch_api/index.md
index 194a016c162be8..438cdc3169c6cf 100644
--- a/files/es/web/api/fetch_api/index.md
+++ b/files/es/web/api/fetch_api/index.md
@@ -20,7 +20,8 @@ Una vez que {{domxref("Response")}} es recuperada, hay varios métodos disponibl
 
 Puede crear una solicitud y respuesta directamente a con los constructores {{domxref("Request.Request","Request()")}} y {{domxref("Response.Response","Response()")}}, pero no es recomendable hacerlo directamente. En su lugar, es preferible que sean creados como resultado de otras acciones de la API (por ejemplo, {{domxref("FetchEvent.respondWith")}} desde los operadores de servicios).
 
-> **Nota:** Puede encontrar mas información sobre las características de la API Fetch en [Usando Fetch](/es/docs/Web/API/Fetch_API/Using_Fetch), y aprender los conceptos en [Fetch: conceptos básicos](/es/docs/Web/API/Fetch_API/Basic_concepts).
+> [!NOTE]
+> Puede encontrar mas información sobre las características de la API Fetch en [Usando Fetch](/es/docs/Web/API/Fetch_API/Using_Fetch), y aprender los conceptos en [Fetch: conceptos básicos](/es/docs/Web/API/Fetch_API/Basic_concepts).
 
 ### Abortar una petición
 
diff --git a/files/es/web/api/fetch_api/using_fetch/index.md b/files/es/web/api/fetch_api/using_fetch/index.md
index 9a7c0732e81e6c..d075fe474c321c 100644
--- a/files/es/web/api/fetch_api/using_fetch/index.md
+++ b/files/es/web/api/fetch_api/using_fetch/index.md
@@ -26,7 +26,8 @@ Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la c
 
 Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el [mixin](https://es.wikipedia.org/wiki/Mixin) de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).
 
-> **Nota:** El mixin de `Body` tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease [Body](#body) para más información.
+> [!NOTE]
+> El mixin de `Body` tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease [Body](#body) para más información.
 
 Las peticiones de Fetch son controladas por la directiva de `connect-src` de [Content Security Policy](/es/docs/Security/CSP/CSP_policy_directives) en vez de la directiva de los recursos que se han devuelto.
 
@@ -124,7 +125,8 @@ var anotherRequest = new Request(myRequest, myInit);
 
 Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de `init`. La copia debe estar hecha antes de la lectura del \<body>, y leyendo el \<body> en la copia, se marcará como leido en la petición original.
 
-> **Nota:** Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que `clone()` no.
+> [!NOTE]
+> Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que `clone()` no.
 
 ### Enviar una petición con credenciales incluido
 
@@ -271,7 +273,8 @@ Los valores posibles de guarda (guard) son:
 - `response`: Guarda para una cabecera obetenida desde un respuesta ({{domxref("Response.headers")}}).
 - `immutable`: Mayormente utilizado para ServiceWorkers, produce un objeto headers de solo lectura.
 
-> **Nota:** No se debería añadir o establecer una petición a un objeto headers _guardado_ con la cabecera `Content-Length`. De igual manera, insertar `Set-Cookie` en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.
+> [!NOTE]
+> No se debería añadir o establecer una petición a un objeto headers _guardado_ con la cabecera `Content-Length`. De igual manera, insertar `Set-Cookie` en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.
 
 ## Objetos Response
 
@@ -299,7 +302,8 @@ addEventListener("fetch", function (event) {
 
 El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).
 
-> **Nota:** El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.
+> [!NOTE]
+> El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.
 
 ## Body
 
diff --git a/files/es/web/api/filereader/index.md b/files/es/web/api/filereader/index.md
index bc5f9c67c2fc1f..67b1759bfbbe3b 100644
--- a/files/es/web/api/filereader/index.md
+++ b/files/es/web/api/filereader/index.md
@@ -50,7 +50,8 @@ Mira el artículo _[Using files from web applications](/es/docs/Using_files_from
 - {{domxref("FileReader.onprogress")}}
   - : Un controlador para el evento [`progress`](/es/docs/Web/Reference/Events/progress). Este evento se activa mientras se está leyendo el contenido del objeto {{domxref("Blob")}}.
 
-> **Nota:** Nota: Como `FileReader` hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.
+> [!NOTE]
+> Como `FileReader` hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.
 
 ## Métodos
 
diff --git a/files/es/web/api/filereader/readasdataurl/index.md b/files/es/web/api/filereader/readasdataurl/index.md
index ce71df9a8b5722..db64afd33d7361 100644
--- a/files/es/web/api/filereader/readasdataurl/index.md
+++ b/files/es/web/api/filereader/readasdataurl/index.md
@@ -7,7 +7,8 @@ slug: Web/API/FileReader/readAsDataURL
 
 El método `readAsDataURL` es usado para leer el contenido del especificado {{domxref("Blob")}} o {{domxref("File")}}. Cuando la operación de lectura es terminada, el {{domxref("FileReader.readyState","readyState")}} se convierte en `DONE`, y el [`loadend`](/es/docs/Web/Reference/Events/loadend) es lanzado. En ese momento, el atributo {{domxref("FileReader.result","result")}} contiene la información como un [datos: URL](/es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) representando la información del archivo como una cadena de caracteres codificados en base64.
 
-> **Nota:** El {{domxref("FileReader.result","result")}} de blob no puede ser
+> [!NOTE]
+> El {{domxref("FileReader.result","result")}} de blob no puede ser
 > directamente decodificado como Base64 sin primero remover la delaración de Datos-URL
 > de la información codificada en Base64. Para recuperar únicamente la cadena codifidicada
 > en Base64, primero remueve `data:*/*;base64`, del resultado.
diff --git a/files/es/web/api/formdata/index.md b/files/es/web/api/formdata/index.md
index 7efee162cc46d0..a064c4a970b130 100644
--- a/files/es/web/api/formdata/index.md
+++ b/files/es/web/api/formdata/index.md
@@ -13,7 +13,8 @@ También puede pasarse directamente al constructor de {{domxref("URLSearchParams
 
 Un objeto que implementa `FormData` puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: `for (var p of myFormData)` es equivalente a `for (var p of myFormData.entries())`.
 
-> **Nota:** Esta característica está disponible en [Web Workers](/es/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Esta característica está disponible en [Web Workers](/es/docs/Web/API/Web_Workers_API).
 
 ## Constructor
 
diff --git a/files/es/web/api/fullscreen_api/index.md b/files/es/web/api/fullscreen_api/index.md
index 315cba8f082106..fe057800d55ee4 100644
--- a/files/es/web/api/fullscreen_api/index.md
+++ b/files/es/web/api/fullscreen_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Fullscreen_API
 
 La **`API Fullscreen`** provee una manera fácil de presentar contenido web usando la pantalla completa del usuario. La API permite indicar al navegador que un elemento y sus hijos, si los tiene, ocupar la pantalla completa, ocultando toda la interfaz del usuario y otras aplicaciones de la pantalla mientras se esté en pantalla completa.
 
-> **Nota:** De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la [tabla que resume las diferencias de prefijos y nombres](#Prefijado).
+> [!NOTE]
+> De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la [tabla que resume las diferencias de prefijos y nombres](#Prefijado).
 
 ## Activando modo de pantalla completa
 
@@ -52,7 +53,8 @@ Cuando el modo de pantalla completa sea invocado exitosamente, el documento que
 
 No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos {{ HTMLElement("iframe") }} tienen un atributo [`allowfullscreen`](/es/docs/Web/HTML/Element/iframe#allowfullscreen) para decidir si se permitirá que el contenido se muestre en pantalla completa. Además, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento así), no funcionará. En su lugar, el elemento que solicitó la pantalla completa recibirá un evento `fullscreenerror`. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrará un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.
 
-> **Nota:** Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.
+> [!NOTE]
+> Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.
 
 ## Saliendo del modo de pantalla completa
 
diff --git a/files/es/web/api/gamepadbutton/index.md b/files/es/web/api/gamepadbutton/index.md
index 8e72fe899a9ab2..d05c858b0c0367 100644
--- a/files/es/web/api/gamepadbutton/index.md
+++ b/files/es/web/api/gamepadbutton/index.md
@@ -9,7 +9,8 @@ La interfaz **`GamepadButton`** define un botón individual de un gamepad u otro
 
 Un objeto `GamepadButton` se devuelve al solicitar cualquier valor del array devuelto por la propiedad `buttons` de la interfaz {{domxref("Gamepad")}}.
 
-> **Nota:** Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.
+> [!NOTE]
+> Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.
 
 ## Propiedades
 
diff --git a/files/es/web/api/geolocation/index.md b/files/es/web/api/geolocation/index.md
index 2a05be47de4095..5a5fc2e378f099 100644
--- a/files/es/web/api/geolocation/index.md
+++ b/files/es/web/api/geolocation/index.md
@@ -9,7 +9,8 @@ La interfaz **Geolocalización** representa un objeto capaz de obtener mediante
 
 Se obtiene un objeto con esta interfaz mediante la propiedad {{domxref("NavigatorGeolocation.geolocation")}} implementado por el objeto {{domxref("Navigator")}}.
 
-> **Nota:** Por razones de seguridad, cuando una página web intenta obtener acceso a la información de ubicación, se notifica al usuario y le pide conceder el permiso. Tenga en cuenta que cada navegador tiene sus propias políticas y métodos para solicitar este permiso.
+> [!NOTE]
+> Por razones de seguridad, cuando una página web intenta obtener acceso a la información de ubicación, se notifica al usuario y le pide conceder el permiso. Tenga en cuenta que cada navegador tiene sus propias políticas y métodos para solicitar este permiso.
 
 ## Propiedades
 
diff --git a/files/es/web/api/headers/index.md b/files/es/web/api/headers/index.md
index 3b44dfa5fdb186..e2cfbda1146bbc 100644
--- a/files/es/web/api/headers/index.md
+++ b/files/es/web/api/headers/index.md
@@ -19,7 +19,8 @@ Puedes recuperar un objeto `Headers` a través de las propiedades `{{domxref("Re
 
 Un objeto que implementa `Headers` se puede usar directamente en una estructura `{{jsxref("Statements/for...of", "for...of")}}`, en lugar de `{{domxref('Headers.entries()', 'entries()')}}`: `for (const p of myHeaders)` es equivalente a `for (const p of myHeaders.entries())`.
 
-> **Nota:** puedes obtener más información sobre las cabeceras disponibles leyendo nuestra referencia de [cabeceras HTTP](/es/docs/Web/HTTP/Headers).
+> [!NOTE]
+> Puedes obtener más información sobre las cabeceras disponibles leyendo nuestra referencia de [cabeceras HTTP](/es/docs/Web/HTTP/Headers).
 
 {{AvailableInWorkers}}
 
@@ -51,11 +52,14 @@ Un objeto que implementa `Headers` se puede usar directamente en una estructura
 - `{{domxref("Headers.values()")}}`
   - : Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores de los pares de clave/valor contenidos en este objeto.
 
-> **Nota:** Para ser claro, la diferencia entre `{{domxref("Headers.set()")}}` y `{{domxref("Headers.append()")}}` es que si la cabecera especificada ya existe y acepta múltiples valores, `{{domxref("Headers.set()")}}` sobrescribirá el valor existente con el nuevo, mientras que `{{domxref("Headers.append()")}}` añadirá el nuevo valor al final del conjunto de valores. Consulta sus páginas dedicadas para ver ejemplos de código.
+> [!NOTE]
+> Para ser claro, la diferencia entre `{{domxref("Headers.set()")}}` y `{{domxref("Headers.append()")}}` es que si la cabecera especificada ya existe y acepta múltiples valores, `{{domxref("Headers.set()")}}` sobrescribirá el valor existente con el nuevo, mientras que `{{domxref("Headers.append()")}}` añadirá el nuevo valor al final del conjunto de valores. Consulta sus páginas dedicadas para ver ejemplos de código.
 
-> **Nota:** Todos los métodos de `Headers` lanzarán un {{jsxref("TypeError")}} si intentas pasar una referencia a un nombre que no es un [nombre de cabecera HTTP válido](https://fetch.spec.whatwg.org/#concept-header-name). Las operaciones de mutación lanzarán un `TypeError` si la cabecera tiene un {{Glossary("Guard")}} inmutable. En cualquier otro caso de fallo, fallarán silenciosamente.
+> [!NOTE]
+> Todos los métodos de `Headers` lanzarán un {{jsxref("TypeError")}} si intentas pasar una referencia a un nombre que no es un [nombre de cabecera HTTP válido](https://fetch.spec.whatwg.org/#concept-header-name). Las operaciones de mutación lanzarán un `TypeError` si la cabecera tiene un {{Glossary("Guard")}} inmutable. En cualquier otro caso de fallo, fallarán silenciosamente.
 
-> **Nota:** Cuando se iteran los valores de las cabeceras, se ordenan automáticamente en orden lexicográfico, y los valores de nombres de cabeceras duplicadas se combinan.
+> [!NOTE]
+> Cuando se iteran los valores de las cabeceras, se ordenan automáticamente en orden lexicográfico, y los valores de nombres de cabeceras duplicadas se combinan.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/history/index.md b/files/es/web/api/history/index.md
index 9e8b711c935911..1631398748e414 100644
--- a/files/es/web/api/history/index.md
+++ b/files/es/web/api/history/index.md
@@ -11,7 +11,8 @@ La interfaz **`History`** (Historial) permite la manipulación del historial de
 
 Solo hay una instancia de `history` (es un _singleton_.) accesible a través del objeto global {{domxref("Window.history", "history")}}.
 
-> **Nota:** Esta interfaz solo está disponible en el hilo principal de ({{domxref("Window")}}). No se puede acceder a él en los contextos {{domxref("Worker")}} o {{domxref("Worklet")}}.
+> [!NOTE]
+> Esta interfaz solo está disponible en el hilo principal de ({{domxref("Window")}}). No se puede acceder a él en los contextos {{domxref("Worker")}} o {{domxref("Worklet")}}.
 
 ## Propiedades de instancia
 
diff --git a/files/es/web/api/history_api/index.md b/files/es/web/api/history_api/index.md
index 03d73ca353284f..79c4f1a911311d 100644
--- a/files/es/web/api/history_api/index.md
+++ b/files/es/web/api/history_api/index.md
@@ -60,7 +60,8 @@ Puedes obtener el número de páginas en la pila del historial consultando el va
 var numeroDeEntradas = window.history.length;
 ```
 
-> **Nota:** Internet Explorer admite el paso de cadenas de URL como parámetro para `go()`; esto no es estándar y no está implementado en Gecko.
+> [!NOTE]
+> Internet Explorer admite el paso de cadenas de URL como parámetro para `go()`; esto no es estándar y no está implementado en Gecko.
 
 ## Añadiendo y modificando entradas del historial
 
diff --git a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
index d8c7a51e34780a..43ae215f7db2e7 100644
--- a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
+++ b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
@@ -9,7 +9,7 @@ Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una pág
 
 Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (_drop zone),_ es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos [`drop`](/es/docs/Web/Reference/Events/drop) y [`dragover`](/es/docs/Web/Reference/Events/dragover). Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el [repositorio drag-and-drop de MDN](https://github.com/mdn/dom-examples/tree/master/drag-and-drop) (cualquier sugerencia o tema que revisar es bienvenido).
 
-> **Nota:** Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}. Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).
+> **Nota:** {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}. Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).
 
 ## Define la zona "drop" \[drop zone]
 
@@ -42,7 +42,8 @@ Por último, puede que una aplicación quiera personalizar el estilo del element
 }
 ```
 
-> **Nota:** Fíjese que los eventos `dragstart` y `dragend` no son activados cuando se arrastra un archivo al browser desde el SO.
+> [!NOTE]
+> Fíjese que los eventos `dragstart` y `dragend` no son activados cuando se arrastra un archivo al browser desde el SO.
 
 ## Procesar la acción de soltar \[drop]
 
diff --git a/files/es/web/api/html_drag_and_drop_api/index.md b/files/es/web/api/html_drag_and_drop_api/index.md
index 584f90d658ae48..cc7f9e78b44b39 100644
--- a/files/es/web/api/html_drag_and_drop_api/index.md
+++ b/files/es/web/api/html_drag_and_drop_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTML_Drag_and_Drop_API
 
 Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.
 
-> **Nota:** Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la [documentación de la API anterior](/es/docs/Drag_and_Drop) para Firefox 3.0 y versiones anteriores.
+> [!NOTE]
+> Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la [documentación de la API anterior](/es/docs/Drag_and_Drop) para Firefox 3.0 y versiones anteriores.
 
 ## Elementos básicos de arrastrar y soltar
 
diff --git a/files/es/web/api/htmlcanvaselement/index.md b/files/es/web/api/htmlcanvaselement/index.md
index 2fbf33aac38f08..74e13f4412deef 100644
--- a/files/es/web/api/htmlcanvaselement/index.md
+++ b/files/es/web/api/htmlcanvaselement/index.md
@@ -34,7 +34,8 @@ _Herada métodos de la interfaz padre,_ _{{domxref("HTMLElement")}}._
 
   - : Retorna un objeto {{domxref("File")}} representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es `image/png`.
 
-    > **Nota:** Sólo puede ser invocado desde Chrome.
+    > [!NOTE]
+    > Sólo puede ser invocado desde Chrome.
 
 ## Especificaciones
 
diff --git a/files/es/web/api/htmlcollection/index.md b/files/es/web/api/htmlcollection/index.md
index 876ddd2dba9adc..40189eaf472fce 100644
--- a/files/es/web/api/htmlcollection/index.md
+++ b/files/es/web/api/htmlcollection/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLCollection
 
 La interfaz **`HTMLCollection`** representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista.
 
-> **Nota:** Esta interfaz se llama `HTMLCollection` por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).
+> [!NOTE]
+> Esta interfaz se llama `HTMLCollection` por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).
 
 Una `HTMLCollection` en el DOM de HTML está viva; se actualiza automáticamente cuando el documento subyacente cambia.
 
diff --git a/files/es/web/api/htmlelement/accesskey/index.md b/files/es/web/api/htmlelement/accesskey/index.md
index 7b24483be663c3..886002c3c965cf 100644
--- a/files/es/web/api/htmlelement/accesskey/index.md
+++ b/files/es/web/api/htmlelement/accesskey/index.md
@@ -7,4 +7,5 @@ slug: Web/API/HTMLElement/accessKey
 
 La propiedad **Element.accessKey** establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.
 
-> **Nota:** Nota: la propiedad **Element.accessKey** se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).
+> [!NOTE]
+> La propiedad **Element.accessKey** se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).
diff --git a/files/es/web/api/htmlelement/offsetheight/index.md b/files/es/web/api/htmlelement/offsetheight/index.md
index f2661d693544e2..2f386c7caa5c85 100644
--- a/files/es/web/api/htmlelement/offsetheight/index.md
+++ b/files/es/web/api/htmlelement/offsetheight/index.md
@@ -11,7 +11,8 @@ Generalmente, `offsetHeight` es una medida en píxeles que representa la altura
 
 Si un elemento está oculto (por ejemplo, al establecer `style.display` a `"none"` en el elemento o uno de sus ancestros), se devuelve `0`.
 
-> **Nota:** Esta propiedad redondea el valor a un entero. Si necesitas un valor decimal, usa {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> Esta propiedad redondea el valor a un entero. Si necesitas un valor decimal, usa {{ domxref("element.getBoundingClientRect()") }}.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/htmlelement/offsetwidth/index.md b/files/es/web/api/htmlelement/offsetwidth/index.md
index 4adaa32ab99ae8..af517b555dbf4b 100644
--- a/files/es/web/api/htmlelement/offsetwidth/index.md
+++ b/files/es/web/api/htmlelement/offsetwidth/index.md
@@ -15,7 +15,8 @@ var offsetWidth =element.offsetWidth;
 
 **`offsetWidth`** es una propiedad de solo lectura.
 
-> **Nota:** Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa: {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa: {{ domxref("element.getBoundingClientRect()") }}.
 
 ## Ejemplo
 
diff --git a/files/es/web/api/htmlmediaelement/index.md b/files/es/web/api/htmlmediaelement/index.md
index 4f0a4993b04b86..6abc3e32dc983b 100644
--- a/files/es/web/api/htmlmediaelement/index.md
+++ b/files/es/web/api/htmlmediaelement/index.md
@@ -19,7 +19,8 @@ Esta interfaz también hereda propiedades de sus antepasados {{domxref("HTMLElem
 
   - : Un {{jsxref("Booleano")}} que refleja el [`autoplay`](/es/docs/Web/HTML/Element/video#autoplay). Atributo HTML, que indica si la reproducción debe comenzar automáticamente tan pronto como haya suficiente material disponible para hacerlo sin interrupción.
 
-    > **Nota:** Los sitios que reproducen automáticamente audio (o vídeos con una pista de audio) pueden ser una experiencia desagradable para los usuarios, por lo que deben evitarse en la medida de lo posible. Si debe ofrecer la funcionalidad de autojuego, debe hacer que se active (requiriendo que el usuario lo habilite específicamente). Sin embargo, esto puede ser útil a la hora de crear elementos multimedia cuya fuente se establecerá más adelante, bajo el control del usuario.
+    > [!NOTE]
+    > Los sitios que reproducen automáticamente audio (o vídeos con una pista de audio) pueden ser una experiencia desagradable para los usuarios, por lo que deben evitarse en la medida de lo posible. Si debe ofrecer la funcionalidad de autojuego, debe hacer que se active (requiriendo que el usuario lo habilite específicamente). Sin embargo, esto puede ser útil a la hora de crear elementos multimedia cuya fuente se establecerá más adelante, bajo el control del usuario.
 
 - {{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}
   - : Devuelve un objeto {{domxref("TimeRanges")}} que indica los rangos de la fuente de medios que el navegador ha almacenado en el búfer (si existe) en el momento en que se accede a la propiedad almacenada en el búfer.
@@ -97,7 +98,8 @@ Esta interfaz también hereda propiedades de sus antepasados {{domxref("HTMLElem
 
   - : Returns the list of {{domxref("VideoTrack")}} objects contained in the element.
 
-    > **Nota:** Gecko sólo soporta la reproducción de una sola pista, y el análisis de los metadatos de las pistas sólo está disponible para los medios con el formato de contenedor Ogg.
+    > [!NOTE]
+    > Gecko sólo soporta la reproducción de una sola pista, y el análisis de los metadatos de las pistas sólo está disponible para los medios con el formato de contenedor Ogg.
 
 - {{domxref("HTMLMediaElement.volume")}}
   - : Is a `double` indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).
diff --git a/files/es/web/api/htmlmediaelement/loadeddata_event/index.md b/files/es/web/api/htmlmediaelement/loadeddata_event/index.md
index f45f33b1c65861..31aa0fa4d9d804 100644
--- a/files/es/web/api/htmlmediaelement/loadeddata_event/index.md
+++ b/files/es/web/api/htmlmediaelement/loadeddata_event/index.md
@@ -46,7 +46,8 @@ El evento **`loadeddata`** se arroja cuando el cuadro en la posición de reprodu
   </tbody>
 </table>
 
-> **Nota:** Tenga en cuenta que este evento no se activará en dispositivos móviles / tablet, si el protector de datos está activado en configuración del navegador.
+> [!NOTE]
+> Tenga en cuenta que este evento no se activará en dispositivos móviles / tablet, si el protector de datos está activado en configuración del navegador.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/htmlmediaelement/play/index.md b/files/es/web/api/htmlmediaelement/play/index.md
index 97e8bc5907f7c8..91e9c46a5def7b 100644
--- a/files/es/web/api/htmlmediaelement/play/index.md
+++ b/files/es/web/api/htmlmediaelement/play/index.md
@@ -21,7 +21,8 @@ Ninguno.
 
 Es una promesa({{jsxref("Promise")}}) que se resuelve cuando se inicia la reproducción, o se rechaza si por algún motivo no se puede iniciar la reproducción.
 
-> **Nota:** Los navegadores más antiguos pueden no devolver un valor de `play()`.
+> [!NOTE]
+> Los navegadores más antiguos pueden no devolver un valor de `play()`.
 
 ### Excepciones
 
@@ -40,7 +41,8 @@ Aunque generalmente se considera que el término "reproducción automática" se
 
 Si el {{Glossary("user agent")}} está configurado para no permitir la reproducción automática o iniciada por script de medios, llamando el método `play()` hara que la promesa devuelta sea rechazada inmediatamente con un `NotAllowedError`. Los sitios web deben estar preparados para manejar esta situación. Por ejemplo, un sitio no debe presentar una interfaz de usuario que suponga que la reproducción ha comenzado automáticamenta, sino que debe actualizar su interfaz de usuario en función de si la promesa devuelta se resulve o se rechaza. Mira el [Ejemplo](#example) abajo para más información.
 
-> **Nota:** El método `play()` puede hacer que se le pida al usuario que otorgue permiso para reproducir medios, lo que puede ocacionar un posible retraso antes de que se resuelva la promesa devuelta. Asegúrese de que su código no espere una respuesta inmediata.
+> [!NOTE]
+> El método `play()` puede hacer que se le pida al usuario que otorgue permiso para reproducir medios, lo que puede ocacionar un posible retraso antes de que se resuelva la promesa devuelta. Asegúrese de que su código no espere una respuesta inmediata.
 
 Para obtener información más detallada sobre la reproducción automática y el bloqueo de reproducción automática, consulte nuestro artículo [Guía de reproducción automática para medios y API de audio web](/es/docs/Web/Media/Autoplay_guide).
 
diff --git a/files/es/web/api/idbcursor/index.md b/files/es/web/api/idbcursor/index.md
index 36ac853c807675..42ee51763869d9 100644
--- a/files/es/web/api/idbcursor/index.md
+++ b/files/es/web/api/idbcursor/index.md
@@ -45,7 +45,8 @@ Puede tener un número ilimitado de cursores al mismo tiempo. Siempre se obtiene
 
 {{ deprecated_header(13) }}
 
-> **Advertencia:** These constants are no longer available — they were removed in Gecko 25. You should use the string constants directly instead. ([Error 891944 en Firefox](https://bugzil.la/891944))
+> [!WARNING]
+> These constants are no longer available — they were removed in Gecko 25. You should use the string constants directly instead. ([Error 891944 en Firefox](https://bugzil.la/891944))
 
 - `NEXT`: `"next"` : The cursor shows all records, including duplicates. It starts at the lower bound of the key range and moves upwards (monotonically increasing in the order of keys).
 - `NEXTUNIQUE` : `"nextunique"` : The cursor shows all records, excluding duplicates. If multiple records exist with the same key, only the first one iterated is retrieved. It starts at the lower bound of the key range and moves upwards.
diff --git a/files/es/web/api/idbdatabase/index.md b/files/es/web/api/idbdatabase/index.md
index 85a2a73f85905f..8b65c146118c8f 100644
--- a/files/es/web/api/idbdatabase/index.md
+++ b/files/es/web/api/idbdatabase/index.md
@@ -11,7 +11,8 @@ La interfaz **`IDBDatabase`** de la API de IndexedDB (Base de datos indexada) pr
 
 {{AvailableInWorkers}}
 
-> **Nota:** Todo lo que haces en IndexedDB siempre sucede en el contexto de una [transacción](/es/docs/Web/API/IndexedDB_API/Basic_Terminology#transaction), que representa interacciones con datos en la base de datos. Todos los objetos en IndexedDB, incluidos los almacenes de objetos, los índices y los cursores, están vinculados a una transacción en particular. Por lo tanto, no puede ejecutar comandos, acceder a datos o abrir nada fuera de una transacción.
+> [!NOTE]
+> Todo lo que haces en IndexedDB siempre sucede en el contexto de una [transacción](/es/docs/Web/API/IndexedDB_API/Basic_Terminology#transaction), que representa interacciones con datos en la base de datos. Todos los objetos en IndexedDB, incluidos los almacenes de objetos, los índices y los cursores, están vinculados a una transacción en particular. Por lo tanto, no puede ejecutar comandos, acceder a datos o abrir nada fuera de una transacción.
 
 {{InheritanceDiagram}}
 
diff --git a/files/es/web/api/idbdatabase/transaction/index.md b/files/es/web/api/idbdatabase/transaction/index.md
index 85d6c3cbe2630a..55d5c98b5effdb 100644
--- a/files/es/web/api/idbdatabase/transaction/index.md
+++ b/files/es/web/api/idbdatabase/transaction/index.md
@@ -101,7 +101,8 @@ var objectStore = transaction.objectStore("toDoList");
 
     Desde Firefox 40, las transacciones de IndexedDB tienen garantías de durabilidad relajadas para aumentar el rendimiento (ver [Error 1112702 en Firefox](https://bugzil.la/1112702)), lo cual es el mismo comportamiento de otros navegadores que soportan IndexedDB. Es decir, anteriormente en una transacción `readwrite` el evento {{domxref("IDBTransaction.oncomplete")}} era invocado sólo cuando se garantizaba que todos los datos habían sido vaciados al disco duro. En Firefox 40+ el evento `complete` es accionado después de indicársele al Sistema Operativo que escriba los datos al disco pero esta confirmación podría suceder poco antes de que los datos hayan sido verdaderamente escritos en él. Si bien dicho evento puede entonces ser entregado un poco antes de tiempo, de cualquier modo, existe una pequeña probabilidad de que la entera transacción se pierda si el SO se bloquea o si ha ocurrido una pérdida de energía antes de que los datos efectivamente se descarguen al disco duro. Como esas catastróficas circunstancias son más bien raras, la mayoría de los consumidores no deberían preocuparse demasiado.
 
-    > **Nota:** En Firefox, si deseas asegurar la durabilidad por alguna razón (por ejemplo, que estés almacenando datos críticos que no puedan ser recalculados después) puedes forzar una transacción a descargar al disco antes de invocar el evento `complete` creando una transacción que use un modo experimental `readwriteflush` (no-estándar) (ver {{domxref("IDBDatabase.transaction")}}). Esto actualmente es experimental, y puede usarse únicamente si la configuración `dom.indexedDB.experimental` es igual a `true` en `about:config`.
+    > [!NOTE]
+    > En Firefox, si deseas asegurar la durabilidad por alguna razón (por ejemplo, que estés almacenando datos críticos que no puedan ser recalculados después) puedes forzar una transacción a descargar al disco antes de invocar el evento `complete` creando una transacción que use un modo experimental `readwriteflush` (no-estándar) (ver {{domxref("IDBDatabase.transaction")}}). Esto actualmente es experimental, y puede usarse únicamente si la configuración `dom.indexedDB.experimental` es igual a `true` en `about:config`.
 
 ## Especificaciones
 
diff --git a/files/es/web/api/indexeddb_api/index.md b/files/es/web/api/indexeddb_api/index.md
index 37e85753752c62..949c3b32903d1a 100644
--- a/files/es/web/api/indexeddb_api/index.md
+++ b/files/es/web/api/indexeddb_api/index.md
@@ -15,7 +15,8 @@ IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API s
 
 Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use [`open`](/es/docs/IndexedDB/IDBFactory#open)() en el atributo [`indexedDB`](/es/docs/IndexedDB/IDBEnvironment#attr_indexedDB) de un objeto [window](/es/docs/DOM/window). Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.
 
-> **Nota:** Nota: El objeto `indexedDB` se prefija en las versiones antiguas de los navegadores (propiedad `mozIndexedDB` para Gecko < 16, `webkitIndexedDB` en Chrome, y `msIndexedDB` en IE 10).
+> [!NOTE]
+> El objeto `indexedDB` se prefija en las versiones antiguas de los navegadores (propiedad `mozIndexedDB` para Gecko < 16, `webkitIndexedDB` en Chrome, y `msIndexedDB` en IE 10).
 
 - [`IDBFactory`](/es/docs/IndexedDB/IDBFactory) provee acceso a la base de datos. Esta es la interface implementada por el objeto global `indexedDB` y es el punto de entrada para la API.
 - [`IDBCursor`](/es/docs/IndexedDB/IDBCursor) itera sobre los objetos de almacenamiento y de índices.
diff --git a/files/es/web/api/indexeddb_api/using_indexeddb/index.md b/files/es/web/api/indexeddb_api/using_indexeddb/index.md
index fdb1c6d06b8703..84bb58ec9a397b 100644
--- a/files/es/web/api/indexeddb_api/using_indexeddb/index.md
+++ b/files/es/web/api/indexeddb_api/using_indexeddb/index.md
@@ -351,7 +351,8 @@ db
 
 See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a `"readwrite"` transaction. Calling `transaction()` with no mode specified gives you a `"readonly"` transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the `result` property.
 
-> **Nota:** You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:
+> [!NOTE]
+> You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:
 >
 > - When defining the [scope](#scope), specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently.
 > - Only specify a `readwrite` transaction mode when necessary. You can concurrently run multiple `readonly` transactions with overlapping scopes, but you can have only one `readwrite` transaction for an object store. To learn more, see the definition for [_transactions_ in the Basic Concepts article](/es/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction).
@@ -388,7 +389,8 @@ request.onsuccess = function (event) {
 
 So here we're creating an `objectStore` and requesting a customer record out of it, identified by its ssn value (`444-44-4444`). We then put the result of that request in a variable (`data`), update the `age` property of this object, then create a second request (`requestUpdate`) to put the customer record back into the `objectStore`, overwriting the previous value.
 
-> **Nota:** that in this case we've had to specify a `readwrite` transaction because we want to write to the database, not just read out of it.
+> [!NOTE]
+> That in this case we've had to specify a `readwrite` transaction because we want to write to the database, not just read out of it.
 
 ### El uso de un cursor
 
@@ -426,7 +428,8 @@ objectStore.openCursor().onsuccess = function (event) {
 };
 ```
 
-> **Nota:** Note: Mozilla has also implemented `getAll()` to handle this case (and `getAllKeys()`, which is currently hidden behind the `dom.indexedDB.experimental` preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:
+> [!NOTE]
+> Note: Mozilla has also implemented `getAll()` to handle this case (and `getAllKeys()`, which is currently hidden behind the `dom.indexedDB.experimental` preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:
 >
 > ```js
 > objectStore.getAll().onsuccess = function (event) {
@@ -1301,7 +1304,8 @@ Tutorials
 
 - [A simple TODO list using HTML5 IndexedDB](http://www.html5rocks.com/tutorials/indexeddb/todo/).
 
-  > **Nota:** This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed `setVersion()` method.
+  > [!NOTE]
+  > This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed `setVersion()` method.
 
 - [Databinding UI Elements with IndexedDB](http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/)
 
diff --git a/files/es/web/api/keyboardevent/index.md b/files/es/web/api/keyboardevent/index.md
index 5ed6a462c811ab..24fa09a2e57789 100644
--- a/files/es/web/api/keyboardevent/index.md
+++ b/files/es/web/api/keyboardevent/index.md
@@ -7,7 +7,8 @@ slug: Web/API/KeyboardEvent
 
 Los objetos **`KeyboardEvent`** describen una interacción del usuario con el teclado. Cada evento describe una tecla; el tipo de evento(`keydown`, `keypress`, o `keyup`) identifica el tipo de acción realizada.
 
-> **Nota:** El `KeyboardEvent` solo indica qué está pasando en una tecla. Cuando necesite manejar la entrada de texto, use el evento [`input`](/es/docs/DOM/DOM_event_reference/input) de HTML5 en su lugar. Por ejemplo, si el usuario introduce texto desde un sistema de tipo manuscrito como una tableta, los eventos para teclas no podrán ser lanzados.
+> [!NOTE]
+> El `KeyboardEvent` solo indica qué está pasando en una tecla. Cuando necesite manejar la entrada de texto, use el evento [`input`](/es/docs/DOM/DOM_event_reference/input) de HTML5 en su lugar. Por ejemplo, si el usuario introduce texto desde un sistema de tipo manuscrito como una tableta, los eventos para teclas no podrán ser lanzados.
 
 ## Constructor
 
@@ -39,15 +40,18 @@ _Esta interfaz también hereda propiedades de sus padres {{domxref("UIEvent")}}
 
   - : Devuelve un {{domxref("DOMString")}} representando el valor del carácter de la tecla. Si la tecla corresponde con un carácter imprimible, este valor es una cadena Unicode no vacía que contiene este carácter. Si la tecla no tiene una representación imprimible, esta es una cadena vacía.
 
-    > **Nota:** Si la tecla es usada como una macro que inserta múltiples caracteres, If the key is used as a macro that inserts multiple characters, el valor de este atributo es la cadena completa, no solo el primer carácter.
+    > [!NOTE]
+    > Si la tecla es usada como una macro que inserta múltiples caracteres, If the key is used as a macro that inserts multiple characters, el valor de este atributo es la cadena completa, no solo el primer carácter.
 
-    > **Advertencia:** Esta propiedad ha sido eliminada de los eventos del DOM de nivel 3. Esta es únicamente soportada en IE.
+    > [!WARNING]
+    > Esta propiedad ha sido eliminada de los eventos del DOM de nivel 3. Esta es únicamente soportada en IE.
 
 - {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
 
   - : Returns an `unsigned long` representing the Unicode reference number of the key; this attribute is used only by the `keypress` event. For keys whose `char` attribute contains multiple characters, this is the Unicode value of the first character in that attribute. In Firefox 26 this returns codes for printable characters.
 
-    > **Advertencia:** This attribute is deprecated; you should use `key` instead, if available.
+    > [!WARNING]
+    > This attribute is deprecated; you should use `key` instead, if available.
 
 - {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
   - : Returns a {{domxref("DOMString")}} with the code value of the key represented by the event.
@@ -63,13 +67,15 @@ _Esta interfaz también hereda propiedades de sus padres {{domxref("UIEvent")}}
 
   - : Returns an `unsigned long` representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
 
-    > **Advertencia:** This attribute is deprecated; you should use `key` instead, if available.
+    > [!WARNING]
+    > This attribute is deprecated; you should use `key` instead, if available.
 
 - {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
 
   - : Returns a {{domxref("DOMString")}} representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale.
 
-    > **Nota:** This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.
+    > [!NOTE]
+    > This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.
 
 - {{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
   - : Returns an `unsigned long` representing the location of the key on the keyboard or other input device.
@@ -87,7 +93,8 @@ _Esta interfaz también hereda propiedades de sus padres {{domxref("UIEvent")}}
 
   - : Returns an `unsigned long` representing a system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as `keyCode`.
 
-    > **Advertencia:** This attribute is deprecated; you should use `key` instead, if available.
+    > [!WARNING]
+    > This attribute is deprecated; you should use `key` instead, if available.
 
 ## Notes
 
diff --git a/files/es/web/api/keyboardevent/metakey/index.md b/files/es/web/api/keyboardevent/metakey/index.md
index 43e1d4e0ed4de2..d324c523af8fed 100644
--- a/files/es/web/api/keyboardevent/metakey/index.md
+++ b/files/es/web/api/keyboardevent/metakey/index.md
@@ -7,7 +7,8 @@ slug: Web/API/KeyboardEvent/metaKey
 
 La propiedad **`KeyboardEvent.metaKey`** es de solo lectura y regresa un valor {{jsxref("Boolean")}} que indica si la tecla <kbd>Meta</kbd> estaba presionada (true) o no (false) cuando el evento ocurrio.
 
-> **Nota:** En teclados Macintosh es la tecla comando (<kbd>⌘</kbd>). En teclados Windows la tecla es lla tecla window (<kbd>⊞</kbd>).
+> [!NOTE]
+> En teclados Macintosh es la tecla comando (<kbd>⌘</kbd>). En teclados Windows la tecla es lla tecla window (<kbd>⊞</kbd>).
 
 ## Syntax
 
diff --git a/files/es/web/api/media_capture_and_streams_api/taking_still_photos/index.md b/files/es/web/api/media_capture_and_streams_api/taking_still_photos/index.md
index bf7f57f1532970..610213b761e8bf 100644
--- a/files/es/web/api/media_capture_and_streams_api/taking_still_photos/index.md
+++ b/files/es/web/api/media_capture_and_streams_api/taking_still_photos/index.md
@@ -113,7 +113,8 @@ Entonces, ¿Qué es lo que sucede aquí? Lo analizaremos paso por paso.
 
 Empezamos por encerrar el script entero en una función anónima para evitar las variables globales. Tomamos los elementos HTML que necesitamos y definimos el ancho (width) del video a 320 y la altura (height) a 0, ya que calcularemos la altura apropiada posteriormente.
 
-> **Advertencia:** En estos momentos existe una diferencia entre los tamaños de video proporcionados por getUserMedia. Firefox Nightly utiliza una resolución de 352x288 y Opera y Chrome utiliza una resolución de 640x400. Esto cambiará en el futuro, pero cambiando el tamaño con la proporción que usaremos más abajo, nos aseguraremos de no obtener sorpresas desagradables.
+> [!WARNING]
+> En estos momentos existe una diferencia entre los tamaños de video proporcionados por getUserMedia. Firefox Nightly utiliza una resolución de 352x288 y Opera y Chrome utiliza una resolución de 640x400. Esto cambiará en el futuro, pero cambiando el tamaño con la proporción que usaremos más abajo, nos aseguraremos de no obtener sorpresas desagradables.
 
 ### Obtener el video
 
diff --git a/files/es/web/api/mediaquerylist/index.md b/files/es/web/api/mediaquerylist/index.md
index be24cf2318e118..5e87df8090164e 100644
--- a/files/es/web/api/mediaquerylist/index.md
+++ b/files/es/web/api/mediaquerylist/index.md
@@ -59,7 +59,8 @@ function screenTest(e) {
 mql.addListener(screenTest);
 ```
 
-> **Nota:** Puedes encontrar este ejemplo en GitHub (ver el [codigo fuente](https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html), y también verlo en [ejecución](https://mdn.github.io/dom-examples/mediaquerylist/index.html)).
+> [!NOTE]
+> Puedes encontrar este ejemplo en GitHub (ver el [codigo fuente](https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html), y también verlo en [ejecución](https://mdn.github.io/dom-examples/mediaquerylist/index.html)).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/mutationobserver/index.md b/files/es/web/api/mutationobserver/index.md
index 9bf0abd43c1fa2..7b04cba1f4183d 100644
--- a/files/es/web/api/mutationobserver/index.md
+++ b/files/es/web/api/mutationobserver/index.md
@@ -49,7 +49,8 @@ void observe(
 - `options`
   - : `Un objeto MutationObserverInit`, que especifica que mutaciones del DOM deben ser informadas.
 
-> **Nota:** NOTA: Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.
+> [!NOTE]
+> Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.
 
 ### `disconnect()`
 
@@ -75,7 +76,8 @@ Returns an Array of [`MutationRecord`s](#MutationRecord).
 
 `MutationObserverInit` es un objeto para el que se pueden especificar las siguientes propiedades:
 
-> **Nota:** NOTA: Como mínimo las propiedades `childList`, `attributes`, o `characterData` deben ser `true`. En caso contrario, se producirá un error "An invalid or illegal string was specified"
+> [!NOTE]
+> Como mínimo las propiedades `childList`, `attributes`, o `characterData` deben ser `true`. En caso contrario, se producirá un error "An invalid or illegal string was specified"
 
 | Propiedad               | Descripción                                                                                                                            |
 | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/es/web/api/navigationpreloadmanager/index.md b/files/es/web/api/navigationpreloadmanager/index.md
index 38361556977b1e..6c3ed3b84392c3 100644
--- a/files/es/web/api/navigationpreloadmanager/index.md
+++ b/files/es/web/api/navigationpreloadmanager/index.md
@@ -95,7 +95,8 @@ addEventListener("fetch", (event) => {
 El navegador envía el encabezado HTTP {{HTTPHeader("Service-Worker-Navigation-Preload")}} con solicitudes de precarga, con un valor de directiva predeterminado en `true`.
 Esto permite a los servidores diferenciar entre solicitudes de recuperación normales y precargadas, y enviar diferentes respuestas en cada caso si es necesario.
 
-> **Nota:** Si la respuesta de la precarga y las operaciones normales de recuperación pueden ser diferentes, entonces el servidor debe establecer `Vary: Service-Worker-Navigation-Preload` para garantizar que las diferentes respuestas se almacenen en caché.
+> [!NOTE]
+> Si la respuesta de la precarga y las operaciones normales de recuperación pueden ser diferentes, entonces el servidor debe establecer `Vary: Service-Worker-Navigation-Preload` para garantizar que las diferentes respuestas se almacenen en caché.
 
 El valor del encabezado se puede cambiar a cualquier otro valor de cadena usando {{domxref("NavigationPreloadManager.setHeaderValue()")}} para proporcionar contexto adicional para la operación de precarga.
 Por ejemplo, puedes establecer el valor en el ID de tu recurso almacenado en caché más reciente, de modo que el servidor no devuelva ningún recurso a menos que realmente se necesite.
diff --git a/files/es/web/api/navigator/geolocation/index.md b/files/es/web/api/navigator/geolocation/index.md
index 1aec77f7b59f0c..e22647c8cca7ea 100644
--- a/files/es/web/api/navigator/geolocation/index.md
+++ b/files/es/web/api/navigator/geolocation/index.md
@@ -6,7 +6,8 @@ slug: Web/API/Navigator/geolocation
 {{APIRef("Geolocation API")}}
 La propiedad de sólo lectura **`Navigator.geolocation`** devuelve un objeto [`Geolocation`](/es/docs/Web/API/Geolocation) que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.
 
-> **Nota:** Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.
+> [!NOTE]
+> Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.
 
 ## Sintaxis
 
diff --git a/files/es/web/api/navigator/getbattery/index.md b/files/es/web/api/navigator/getbattery/index.md
index 7e1a95e99bd426..74c789d3a81920 100644
--- a/files/es/web/api/navigator/getbattery/index.md
+++ b/files/es/web/api/navigator/getbattery/index.md
@@ -11,7 +11,8 @@ batería del sistema. Retorna una promesa de batería, que es resuelta en un obj
 para monitorear el estado de la batería. Esto implementa la [API de Estado de Batería](/es/docs/Web/API/Battery_Status_API); ver esa
 documentación para detalles adicionales, una guía para usar la API, y código de ejemplo.
 
-> **Nota:** En algunos navegadores el acceso a esta característica está controlado por la directiva {{HTTPHeader("Feature-Policy")}}: {{HTTPHeader("Feature-Policy/battery","battery")}}.
+> [!NOTE]
+> En algunos navegadores el acceso a esta característica está controlado por la directiva {{HTTPHeader("Feature-Policy")}}: {{HTTPHeader("Feature-Policy/battery","battery")}}.
 
 ## Sintaxis
 
@@ -37,7 +38,8 @@ Este método no arroja excepciones reales; en su lugar, rechaza la promesa retor
 
   - : El Agente de Usuario no expone información de batería a contextos inseguros y este método fue llamado de un contexto inseguro.
 
-    > **Nota:** Versiones antiguas de algunos Agentes de Usuario pueden permitir el uso de esta característica en contextos inseguros.
+    > [!NOTE]
+    > Versiones antiguas de algunos Agentes de Usuario pueden permitir el uso de esta característica en contextos inseguros.
 
 - `NotAllowedError`
 
diff --git a/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
index 63ee1cb7f05962..f38b1e28cfdb25 100644
--- a/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
+++ b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
@@ -37,7 +37,8 @@ Cuando un navegador ejecuta este código, se le mostrará un mensaje al usuario,
 
 ![](protocolregister.png)
 
-> **Nota:** La plantila de la URL proporcionada al registrar **debe** ser del mismo dominio que el de la página que intenta realizar el registro o el registro fallará. Por ejemplo, `http://example.com/homepage.html` puede registrar un controlador de protocolo para `http://example.com/handle_mailto/%s`, pero no para `http://example.org/handle_mailto/%s`.
+> [!NOTE]
+> La plantila de la URL proporcionada al registrar **debe** ser del mismo dominio que el de la página que intenta realizar el registro o el registro fallará. Por ejemplo, `http://example.com/homepage.html` puede registrar un controlador de protocolo para `http://example.com/handle_mailto/%s`, pero no para `http://example.org/handle_mailto/%s`.
 
 Al registrar el mismo controlador de protocolo más de una vez aparecerá una notifiación diferente, indicando que el controlador del protocolo ya ha está registrado. Por lo tanto, es una buena idea cuidar el registro del controlador de protocolo con una verificación para saber si ya está registrado, como con el siguiente ejemplo.
 
@@ -89,7 +90,8 @@ http://www.google.co.uk/?uri=burger:cheeseburger
 
 El código del lado del servidor puede extraer los parámetros de la cadena de petición y realizar la acción deseada.
 
-> **Nota:** Al código del lado del servidor se le pasa todo el contenido del `href`. Esto significa que el código del lado del servidor tendrá que analizar el protocolo desde los datos.
+> [!NOTE]
+> Al código del lado del servidor se le pasa todo el contenido del `href`. Esto significa que el código del lado del servidor tendrá que analizar el protocolo desde los datos.
 
 ### Example
 
diff --git a/files/es/web/api/node/clonenode/index.md b/files/es/web/api/node/clonenode/index.md
index 052a18c39b545b..51dc51517ca594 100644
--- a/files/es/web/api/node/clonenode/index.md
+++ b/files/es/web/api/node/clonenode/index.md
@@ -20,7 +20,8 @@ var dupNode = node.cloneNode(deep);
 - _deep {{optional_inline}}_
   - : `true` si los hijos del nodo también deben ser clonados, o `false` para clonar únicamente al nodo.
 
-> **Nota:** En la especificación DOM4 (como se implementó en Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), `deep` es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en **`true`**, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, `deep` debe establecerse en `false`.
+> [!NOTE]
+> En la especificación DOM4 (como se implementó en Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), `deep` es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en **`true`**, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, `deep` debe establecerse en `false`.
 >
 > Este comportamiento ha sido modificado en la última especificación, si es omitido, el método se comportará como si `deep` fuera **`false`**. Aunque sigue siendo opcional, usted siempre debería proporcionar el argumento `deep` tanto para la compatibilidad con las nuevas y anteriores especificaciones. Con Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3))), la consola advierte a los desarrolladores a no omitir el argumento. Desde Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)), una copia superficial, es el comportamiento por defecto en lugar de una copia profunda.
 
diff --git a/files/es/web/api/node/issamenode/index.md b/files/es/web/api/node/issamenode/index.md
index 124dcbc9afa843..b9f982f1402184 100644
--- a/files/es/web/api/node/issamenode/index.md
+++ b/files/es/web/api/node/issamenode/index.md
@@ -6,7 +6,8 @@ slug: Web/API/Node/isSameNode
 {{APIRef("DOM")}} {{Deprecated_Header}}
 **`Node.isSameNode()`** comprueba si dos nodos son iguales, es decir si hacen referencia al mismo objecto.
 
-> **Advertencia:** This method is no longer implemented in recent browsers.
+> [!WARNING]
+> This method is no longer implemented in recent browsers.
 >
 > ```js
 > // Instead of using
diff --git a/files/es/web/api/node/removechild/index.md b/files/es/web/api/node/removechild/index.md
index ff21049e1a1722..13beeb86335428 100644
--- a/files/es/web/api/node/removechild/index.md
+++ b/files/es/web/api/node/removechild/index.md
@@ -10,7 +10,8 @@ l10n:
 
 El método **`removeChild()`** de la interfaz {{domxref("Node")}} elimina un nodo hijo del DOM y devuelve el nodo eliminado.
 
-> **Nota:** Mientras se mantenga una referencia sobre el elemento hijo eliminado, seguirá existiendo en la memoria, pero ya no forma parte del DOM. Todavía se puede reutilizar más adelante en el código.
+> [!NOTE]
+> Mientras se mantenga una referencia sobre el elemento hijo eliminado, seguirá existiendo en la memoria, pero ya no forma parte del DOM. Todavía se puede reutilizar más adelante en el código.
 >
 > Si el valor devuelto de `removeChild()` no se almacena y no se guarda ninguna otra referencia, se [eliminará automáticamente](/es/docs/Web/JavaScript/Memory_management) de la memoria al cabo de un breve tiempo.
 
diff --git a/files/es/web/api/nodelist/index.md b/files/es/web/api/nodelist/index.md
index eaceecc54fdb10..07e315a9fff425 100644
--- a/files/es/web/api/nodelist/index.md
+++ b/files/es/web/api/nodelist/index.md
@@ -7,7 +7,8 @@ slug: Web/API/NodeList
 
 Los objetos **`NodeList`** son colecciones de nodos como los devueltos por propiedades como {{domxref ("Node.childNodes")}} y el método {{domxref ("document.querySelectorAll ()")}}..
 
-> **Nota:** Aunque `NodeList` no es un `Array`, es posible iterar sobre él utilizando `forEach()`. También puede convertirse a un `Array` usando `Array.from`.
+> [!NOTE]
+> Aunque `NodeList` no es un `Array`, es posible iterar sobre él utilizando `forEach()`. También puede convertirse a un `Array` usando `Array.from`.
 >
 > Sin embargo, algunos navegadores antiguos no han implementado `NodeList.forEach()` ni `Array.from()`. Pero esas limitaciones pueden eludirse utilizando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (más en este documento).
 
diff --git a/files/es/web/api/notification/close/index.md b/files/es/web/api/notification/close/index.md
index 55b15a9146755c..5601b7590ec814 100644
--- a/files/es/web/api/notification/close/index.md
+++ b/files/es/web/api/notification/close/index.md
@@ -8,7 +8,8 @@ slug: Web/API/Notification/close
 El método `close()` de la interfaz {{domxref("Notification")}} se utiliza para
 cerrar/eliminar una notificación mostrada anteriormente.
 
-> **Nota:** Esta API no debe usarse solo para tener la notificación
+> [!NOTE]
+> Esta API no debe usarse solo para tener la notificación
 > eliminada de la pantalla después de un retraso fijo ya que este método también eliminará la
 > notificación de cualquier bandeja de notificación, evitando que los usuarios interactúen con ella
 > después de que se mostró inicialmente. Un uso válido para esta API sería eliminar una
diff --git a/files/es/web/api/notification/dir/index.md b/files/es/web/api/notification/dir/index.md
index 90b058817bc779..219ce3d85a09df 100644
--- a/files/es/web/api/notification/dir/index.md
+++ b/files/es/web/api/notification/dir/index.md
@@ -21,7 +21,8 @@ Un {{domxref("DOMString")}} especifica la dirección del texto, los posibles val
 - `ltr`: El texto es desplegado de izquierda a derecha.
 - `rtl`: El texto es desplegado de derecha a izquierda.
 
-> **Nota:** La mayoría de los navegadores parecen ignorar las intrucciones explicitas `ltr` y `rtl`, y solo van a las proveídas por el navegador.
+> [!NOTE]
+> La mayoría de los navegadores parecen ignorar las intrucciones explicitas `ltr` y `rtl`, y solo van a las proveídas por el navegador.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/notification/requestpermission_static/index.md b/files/es/web/api/notification/requestpermission_static/index.md
index 6484e55e07de06..a3138443a93e5e 100644
--- a/files/es/web/api/notification/requestpermission_static/index.md
+++ b/files/es/web/api/notification/requestpermission_static/index.md
@@ -5,7 +5,8 @@ slug: Web/API/Notification/requestPermission_static
 
 {{APIRef("Web Notifications")}}{{securecontext_header}}
 
-> **Nota:** Safari aún usa la sintaxis callback para obtener el permiso. Lee [Usando la API de Notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API) para un buen ejemplo de como detectar esto y ejecutar el código de forma apropiada.
+> [!NOTE]
+> Safari aún usa la sintaxis callback para obtener el permiso. Lee [Usando la API de Notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API) para un buen ejemplo de como detectar esto y ejecutar el código de forma apropiada.
 
 El método **`requestPermission`** de la interfaz {{domxref("Notification")}} solicita un permiso del usuario al origen actual para mostrar notificaciones.
 
@@ -80,7 +81,8 @@ function notifyMe() {
 
 Ya no mostramos ejemplos corriendo en tiempo real en esta página, ya que Chrome y Firefox ya no conceden permisos de notificación para ser solicitados desde el origen {{htmlelement("iframe")}}, para seguir con otros navegadores. Para ver un ejemplo en acción, revisa nuestro [Ejemplo de lista de Todos](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) (véase también [la app corriendo en vivo](https://mdn.github.io/dom-examples/to-do-notifications/).)
 
-> **Nota:** En el ejemplo de arriba generamos notificaciones en respuesta a una acción del usuario (hacer click en un botón). Esta no es la única mejor práctica — no deberias molestar a los usuarios con notificaciones que ellos no aceptaron — pero pronto los navegadores explicitamente deshabilitaran las notificaciones que no son ejecutadas en respuesta a una acción del usuario. Firefox ya está haciendo esto desde la versión 72, por ejemplo.
+> [!NOTE]
+> En el ejemplo de arriba generamos notificaciones en respuesta a una acción del usuario (hacer click en un botón). Esta no es la única mejor práctica — no deberias molestar a los usuarios con notificaciones que ellos no aceptaron — pero pronto los navegadores explicitamente deshabilitaran las notificaciones que no son ejecutadas en respuesta a una acción del usuario. Firefox ya está haciendo esto desde la versión 72, por ejemplo.
 
 ## Especificaciones
 
diff --git a/files/es/web/api/notifications_api/index.md b/files/es/web/api/notifications_api/index.md
index f413ad72c80844..16a76f6cd65839 100644
--- a/files/es/web/api/notifications_api/index.md
+++ b/files/es/web/api/notifications_api/index.md
@@ -28,13 +28,15 @@ Esto generará un cuadro de diálogo de solicitud, a lo largo de las siguientes
 
 Desde aquí el usuario puede optar por permitir las notificaciones de este origen, o bloquearlas. Una vez que se ha hecho una elección, la configuración generalmente persistirá durante la sesión actual.
 
-> **Nota:** A partir de Firefox 44 se combinaron los permisos de Notificaciones y [Push](/es/docs/Web/API/Push_API). Si se otorga permiso para las notificaciones, también se habilitará el envío.
+> [!NOTE]
+> A partir de Firefox 44 se combinaron los permisos de Notificaciones y [Push](/es/docs/Web/API/Push_API). Si se otorga permiso para las notificaciones, también se habilitará el envío.
 
 A continuación, se crea una nueva notificación usando el constructor {{domxref("Notification.Notification","Notification()")}}. A esto se le debe pasar un argumento de título y, opcionalmente, se le puede pasar un objeto de opciones para especificar opciones, como la dirección del texto, el cuerpo del texto, el icono para mostrar, el sonido de notificación para reproducir y más.
 
 Además, la especificación de la API de notificaciones especifica una serie de adiciones a la [API ServiceWorker](/es/docs/Web/API/Service_Worker_API), para permitir que los _service workers_ activen las notificaciones.
 
-> **Nota:** Para obtener más información sobre el uso de notificaciones en su propia aplicación, lea [Uso de la API de notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API).
+> [!NOTE]
+> Para obtener más información sobre el uso de notificaciones en su propia aplicación, lea [Uso de la API de notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API).
 
 ## Interfaces de notificaciones
 
diff --git a/files/es/web/api/notifications_api/using_the_notifications_api/index.md b/files/es/web/api/notifications_api/using_the_notifications_api/index.md
index 3e0873d0697f75..3a0c887ccf7dac 100644
--- a/files/es/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/es/web/api/notifications_api/using_the_notifications_api/index.md
@@ -103,7 +103,8 @@ Mirando primero el segundo bloque principal, verá que primero verificamos si la
 
 Para evitar la duplicación de código, hemos almacenado algunos bits de código de mantenimiento dentro de la función `handlePermission()`, que es el primer bloque principal dentro de este fragmento. Aquí dentro, establecemos explícitamente el valor `Notification.permission` (algunas versiones antiguas de Chrome fallaron al hacer esto automáticamente), y mostramos u ocultamos el botón dependiendo de lo que el usuario eligió en el cuadro de diálogo de permiso. No queremos mostrarlo si ya se ha otorgado el permiso, pero si el usuario elige negar el permiso, queremos darle la oportunidad de cambiar de opinión más adelante.
 
-> **Nota:** Antes de la versión 37, Chrome no te permite llamar a {{domxref("Notification.requestPermission()")}} en el manejador de eventos de carga (consulta el [error 274284](https://code.google.com/p/chromium/issues/detail?id=274284)).
+> [!NOTE]
+> Antes de la versión 37, Chrome no te permite llamar a {{domxref("Notification.requestPermission()")}} en el manejador de eventos de carga (consulta el [error 274284](https://code.google.com/p/chromium/issues/detail?id=274284)).
 
 ### Función de detección de la promesa requestPermission()
 
@@ -153,9 +154,11 @@ document.addEventListener("visibilitychange", function () {
 });
 ```
 
-> **Nota:** Esta API no debe usarse solo para eliminar la notificación de la pantalla después de un tiempo fijo (en los navegadores modernos), ya que este método también eliminará la notificación de cualquier bandeja de notificaciones, evitando que los usuarios interactúen con ella después de que se mostró inicialmente.
+> [!NOTE]
+> Esta API no debe usarse solo para eliminar la notificación de la pantalla después de un tiempo fijo (en los navegadores modernos), ya que este método también eliminará la notificación de cualquier bandeja de notificaciones, evitando que los usuarios interactúen con ella después de que se mostró inicialmente.
 
-> **Nota:** Cuando recibe un evento de cierre, no hay garantía de que sea el usuario quien cerró la notificación. Esto está en línea con la especificación, que establece: "Cuando se cierra una notificación, ya sea por la plataforma de notificaciones o por el usuario, se deben ejecutar los pasos de cierre".
+> [!NOTE]
+> Cuando recibe un evento de cierre, no hay garantía de que sea el usuario quien cerró la notificación. Esto está en línea con la especificación, que establece: "Cuando se cierra una notificación, ya sea por la plataforma de notificaciones o por el usuario, se deben ejecutar los pasos de cierre".
 
 ## Eventos de notificación
 
diff --git a/files/es/web/api/payment_request_api/index.md b/files/es/web/api/payment_request_api/index.md
index d2d8ff7605c64b..bfb72dc65c7984 100644
--- a/files/es/web/api/payment_request_api/index.md
+++ b/files/es/web/api/payment_request_api/index.md
@@ -23,7 +23,8 @@ Para solicitar un pago, a página web crea un objeto {{domxref("PaymentRequest")
 
 Puedes encontrar una guía completa en [Usando la API de Solicitud de Pago](/es/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API).
 
-> **Nota:** La API solo está disponibledentro de elementos {{htmlelement("iframe")}} cross-origin si tienen el atributo [`allowpaymentrequest`](/es/docs/Web/HTML/Element/iframe#allowpaymentrequest).
+> [!NOTE]
+> La API solo está disponibledentro de elementos {{htmlelement("iframe")}} cross-origin si tienen el atributo [`allowpaymentrequest`](/es/docs/Web/HTML/Element/iframe#allowpaymentrequest).
 
 ## Interfaces
 
diff --git a/files/es/web/api/performance/navigation/index.md b/files/es/web/api/performance/navigation/index.md
index 1b7d68f4f5cbeb..f223272c3bf2a2 100644
--- a/files/es/web/api/performance/navigation/index.md
+++ b/files/es/web/api/performance/navigation/index.md
@@ -5,7 +5,8 @@ slug: Web/API/Performance/navigation
 
 {{APIRef("Navigation Timing")}}
 
-> **Advertencia:** Esta propiedad está deprecada en [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete).
+> [!WARNING]
+> Esta propiedad está deprecada en [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete).
 
 La propiedad de solo lectura **`Performance.navigation`** del legado devuelve un objeto {{domxref("PerformanceNavigation")}} representado el tipo de navegación que ocurre en el contexto de navegación dado, tales como el número de redirecciones necesarias para traer el recurso.
 
diff --git a/files/es/web/api/performance/timing/index.md b/files/es/web/api/performance/timing/index.md
index 8f527c940de81c..67f9bbb00b0569 100644
--- a/files/es/web/api/performance/timing/index.md
+++ b/files/es/web/api/performance/timing/index.md
@@ -5,7 +5,8 @@ slug: Web/API/Performance/timing
 
 {{APIRef("Navigation Timing")}}{{deprecated_header}}
 
-> **Advertencia:** Esta propiedad está deprecada en [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete). Por favor usa {{domxref("Performance.timeOrigin")}} en vez esta..
+> [!WARNING]
+> Esta propiedad está deprecada en [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete). Por favor usa {{domxref("Performance.timeOrigin")}} en vez esta..
 
 La propiedad de solo lecutra **`Performance.timing`** de legado devulve un objeto {{domxref("PerformanceTiming")}} que contienen información relacionada con el rendimiento en relación a la latencia.
 
diff --git a/files/es/web/api/performancenavigation/index.md b/files/es/web/api/performancenavigation/index.md
index 96f3bbba6f5cf0..5873575aed3178 100644
--- a/files/es/web/api/performancenavigation/index.md
+++ b/files/es/web/api/performancenavigation/index.md
@@ -5,7 +5,8 @@ slug: Web/API/PerformanceNavigation
 
 {{APIRef("Navigation Timing")}}
 
-> **Advertencia:** Esta interfaz está deprecada en [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete). Por favor usa la interfaz {{domxref("PerformanceNavigationTiming")}} en lugar de esta.
+> [!WARNING]
+> Esta interfaz está deprecada en [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete). Por favor usa la interfaz {{domxref("PerformanceNavigationTiming")}} en lugar de esta.
 
 La interfaz de legado **`PerformanceNavigation`** representa información acerca de cómo la navegación en el documento actual fue hecha.
 
diff --git a/files/es/web/api/pointer_lock_api/index.md b/files/es/web/api/pointer_lock_api/index.md
index 884d8af5b76e0a..4353ca0dcef3ba 100644
--- a/files/es/web/api/pointer_lock_api/index.md
+++ b/files/es/web/api/pointer_lock_api/index.md
@@ -36,7 +36,8 @@ canvas.addEventListener("click", async () => {
 });
 ```
 
-> **Nota:** Si un usuario ha salido del bloqueo de puntero mediante el [default unlock gesture](https://w3c.github.io/pointerlock/#dfn-default-unlock-gesture), o el bloqueo de puntero no ha sido introducido previamente para este documento, un evento generado como resultado de un [gesto de compromiso](https://w3c.github.io/pointerlock/#dfn-engagement-gesture) debe ser recibido por el documento antes de que [`requestPointerLock`](https://w3c.github.io/pointerlock/#dom-element-requestpointerlock) tenga éxito. (de <https://w3c.github.io/pointerlock/#extensions-to-the-element-interface>)
+> [!NOTE]
+> Si un usuario ha salido del bloqueo de puntero mediante el [default unlock gesture](https://w3c.github.io/pointerlock/#dfn-default-unlock-gesture), o el bloqueo de puntero no ha sido introducido previamente para este documento, un evento generado como resultado de un [gesto de compromiso](https://w3c.github.io/pointerlock/#dfn-engagement-gesture) debe ser recibido por el documento antes de que [`requestPointerLock`](https://w3c.github.io/pointerlock/#dom-element-requestpointerlock) tenga éxito. (de <https://w3c.github.io/pointerlock/#extensions-to-the-element-interface>)
 
 Los sistemas operativos activan la aceleración del ratón por defecto, lo que resulta útil cuando a veces se desea un movimiento lento y preciso (piensa en que podrías utilizar un paquete de gráficos), pero también quieres mover grandes distancias con un movimiento más rápido del ratón (piensa en el desplazamiento y la selección de varios archivos). Sin embargo, para algunos juegos de perspectiva en primera persona, se prefieren los datos de entrada brutos del ratón para controlar la rotación de la cámara, donde el mismo movimiento de distancia, rápido o lento, da como resultado la misma rotación. Según los jugadores profesionales, esto mejora la experiencia de juego y aumenta la precisión.
 
@@ -171,7 +172,8 @@ canvas.addEventListener("click", async () => {
 });
 ```
 
-> **Nota:** El fragmento anterior funciona en navegadores que no soportan la versión promise de `requestPointerLock()`. Ver [Manejo de versiones promise y no-promise de requestPointerLock()](#handling_promise_and_non-promise_versions_of_requestpointerlock) para una explicación.
+> [!NOTE]
+> El fragmento anterior funciona en navegadores que no soportan la versión promise de `requestPointerLock()`. Ver [Manejo de versiones promise y no-promise de requestPointerLock()](#handling_promise_and_non-promise_versions_of_requestpointerlock) para una explicación.
 
 Ahora vamos a detectar el evento de bloqueo de puntero: `pointerlockchange`. Cuando esto ocurre, ejecutamos una función llamada `lockChangeAlert()` para manejar el cambio.
 
diff --git a/files/es/web/api/push_api/index.md b/files/es/web/api/push_api/index.md
index b469fd9dff912c..5d0e1a224a1111 100644
--- a/files/es/web/api/push_api/index.md
+++ b/files/es/web/api/push_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Push_API
 
 La **API Push** otorga a las aplicaciones web la habilidad de recibir mensajes enviados a ellas desde un servidor, sin importar si la aplicación está o no en primer plano o cargada. Esto permite a los desarrolladores enviar notificaciones asíncronas y actualizaciones para los usuarios que las aceptan.
 
-> **Nota:** Esta documentación cubre la especificación del API Push de W3C; si estás buscando la documentación para el mecanismo push propio de Firefox OS, ve [Simple Push](/es/docs/Web/API/Simple_Push_API).
+> [!NOTE]
+> Esta documentación cubre la especificación del API Push de W3C; si estás buscando la documentación para el mecanismo push propio de Firefox OS, ve [Simple Push](/es/docs/Web/API/Simple_Push_API).
 
 ## Push conceptos y uso
 
@@ -21,9 +22,11 @@ Cada suscripción es unica para un service worker. El endpoint para la subscripc
 
 Activar un Service-Worker para entregar un mensaje push puede resultar en el incremento de uso de recursos, especialmente de la batería. Los diferentes navegadores disponen de diferentes esquemas para manejar esto - en la actualidad no existe un mecanismo estándar para ello. Firefox permite un numero limitado (det. cuota) de mensajes push para enviar a una aplicación, aunque los mensajes push que generan una notificación estan exentos de este límite. Este límite se actualiza cada vez que se visita el sitio web. En comparación, Chrome no aplica límites, pero requiere que todo mensaje push muestre una notificación.
 
-> **Nota:** Desde Gecko 44, la cuota permitida de Push-messages por aplicación no se ve incrementada cada vez que se emite una nueva notificación, cuando otra sigue visible, durante el periodo de 3 segundos. Esto ayuda al manejo de casos en los que se reciben rafagas de notificaciones y no todas ellas emiten una notificación visible.
+> [!NOTE]
+> Desde Gecko 44, la cuota permitida de Push-messages por aplicación no se ve incrementada cada vez que se emite una nueva notificación, cuando otra sigue visible, durante el periodo de 3 segundos. Esto ayuda al manejo de casos en los que se reciben rafagas de notificaciones y no todas ellas emiten una notificación visible.
 
-> **Nota:** en Chrome las versiones anteriores a la 52, requieren la cnfiguración de un proyecto en [Google Cloud Messaging](https://developers.google.com/cloud-messaging/) para el envío de Push-Messages, así como el uso del numero de proyecto y la API key asociadas para el envío de notificaciones push. Tambien se requiere el detalle de algunos parametros especiales en el app manifest para el uso de este servicio.
+> [!NOTE]
+> En Chrome las versiones anteriores a la 52, requieren la cnfiguración de un proyecto en [Google Cloud Messaging](https://developers.google.com/cloud-messaging/) para el envío de Push-Messages, así como el uso del numero de proyecto y la API key asociadas para el envío de notificaciones push. Tambien se requiere el detalle de algunos parametros especiales en el app manifest para el uso de este servicio.
 
 ## Interfaces
 
diff --git a/files/es/web/api/request/index.md b/files/es/web/api/request/index.md
index deab261f9e9456..4fdce7e7d28326 100644
--- a/files/es/web/api/request/index.md
+++ b/files/es/web/api/request/index.md
@@ -64,7 +64,8 @@ Puedes crear un nuevo objeto `Request` usando el constructor {{domxref("Request.
 - {{domxref("Body.text()")}}
   - : Devuelve una promesa que se resuelve con una representación {{domxref("USVString")}} (text) del cuerpo de la solicitud.
 
-> **Nota:** Las funciones {{domxref("Body")}} solo pueden ser ejecutadas una vez; Las siguientes llamadas se resolverán con strings/ArrayBuffers vacíos.
+> [!NOTE]
+> Las funciones {{domxref("Body")}} solo pueden ser ejecutadas una vez; Las siguientes llamadas se resolverán con strings/ArrayBuffers vacíos.
 
 ## Ejemplos
 
@@ -102,7 +103,8 @@ const myCred = myRequest.credentials; // omit
 const bodyUsed = myRequest.bodyUsed; // true
 ```
 
-> **Nota:** El tipo de cuerpo solo puede ser {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} o tipo {{domxref("ReadableStream")}}, así que para añadir un objeto JSON a la carga útil, necesitas convertir a string (stringify) dicho objeto.
+> [!NOTE]
+> El tipo de cuerpo solo puede ser {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} o tipo {{domxref("ReadableStream")}}, así que para añadir un objeto JSON a la carga útil, necesitas convertir a string (stringify) dicho objeto.
 
 Puede obtener esta solicitud de API pasando el objeto `Request` como parámetro a una llamada {{domxref("GlobalFetch.fetch()")}}, por ejemplo, y obtener la respuesta:
 
diff --git a/files/es/web/api/response/ok/index.md b/files/es/web/api/response/ok/index.md
index 2cf7f52b4a5391..85e23b606de640 100644
--- a/files/es/web/api/response/ok/index.md
+++ b/files/es/web/api/response/ok/index.md
@@ -20,7 +20,8 @@ Un {{domxref("Boolean")}}.
 
 En nuestro [ejemplo de Fetch Response](https://github.com/mdn/fetch-examples/tree/master/fetch-response) (véase [Fetch Response en vivo](http://mdn.github.io/fetch-examples/fetch-response/)) creamos un nuevo {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasando una ruta a un JPG. Luego traemos esta petición usando {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL usando {{domxref("URL.createObjectURL")}}, y mostrar esto en un {{htmlelement("img")}}.
 
-> **Nota:** en la parte superior del bloque de `fetch()` imprimimos el valor de `ok` en la consola.
+> [!NOTE]
+> En la parte superior del bloque de `fetch()` imprimimos el valor de `ok` en la consola.
 
 ```js
 var imagen = document.querySelector("img");
diff --git a/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.md b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
index fff18cc4179481..0052591afaecfb 100644
--- a/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
+++ b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
@@ -18,7 +18,8 @@ Si no es compatible, o no puede saberlo, puede buscar un valor falso para esta p
 
 Un valor booleano que es `true` si el par remoto puede aceptar candidatos _trickled ICE_ y `false` si no puede. Si no se ha establecido un par remoto, este valor es `null`.
 
-> **Nota:** El valor de esta propiedad se determina una vez que el par local ha llamado a {{domxref("RTCPeerConnection.setRemoteDescription()")}}; el agente ICE utiliza la descripción proporcionada para determinar si el par remoto admite o no candidatos _trickled ICE_.
+> [!NOTE]
+> El valor de esta propiedad se determina una vez que el par local ha llamado a {{domxref("RTCPeerConnection.setRemoteDescription()")}}; el agente ICE utiliza la descripción proporcionada para determinar si el par remoto admite o no candidatos _trickled ICE_.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/screen_capture_api/using_screen_capture/index.md b/files/es/web/api/screen_capture_api/using_screen_capture/index.md
index e437dc93d2db4b..3ac3b3c4da7ec5 100644
--- a/files/es/web/api/screen_capture_api/using_screen_capture/index.md
+++ b/files/es/web/api/screen_capture_api/using_screen_capture/index.md
@@ -9,7 +9,8 @@ l10n:
 
 En este artículo, examinaremos cómo utilizar la API de captura de pantalla y su método {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} para capturar parte o la totalidad de una pantalla para transmitir, grabar o compartir durante una sesión de conferencia [WebRTC](/es/docs/Web/API/WebRTC_API).
 
-> **Nota:** Puede ser útil tener en cuenta que las versiones recientes [adapter.js shim de WebRTC](https://github.com/webrtcHacks/adapter) incluyen implementaciones de `getDisplayMedia()` para habilitar el uso compartido de pantalla en navegadores que lo admiten pero no implementar la API estándar actual. Esto funciona al menos con Chrome, Edge y Firefox.
+> [!NOTE]
+> Puede ser útil tener en cuenta que las versiones recientes [adapter.js shim de WebRTC](https://github.com/webrtcHacks/adapter) incluyen implementaciones de `getDisplayMedia()` para habilitar el uso compartido de pantalla en navegadores que lo admiten pero no implementar la API estándar actual. Esto funciona al menos con Chrome, Edge y Firefox.
 
 ## Captura de contenido de la pantalla
 
@@ -74,11 +75,13 @@ Los objetos `video` y `audio` pasados al objeto de opciones también pueden cont
 
 Ninguna de las restricciones se aplica de ninguna manera hasta que se haya seleccionado el contenido a capturar. Las restricciones alteran lo que ve en el flujo resultante. Por ejemplo, si especifica una restricción {{domxref("MediaTrackConstraints.width", "width")}} para el video, se aplica escalando el video después de que el usuario seleccione el área para compartir. No establece una restricción sobre el tamaño de la fuente en sí.
 
-> **Nota:** Las restricciones _nunca_ causan cambios en la lista de fuentes disponibles para la captura por parte de la API de uso compartido de pantalla. Esto garantiza que las aplicaciones web no puedan obligar al usuario a compartir contenido específico restringiendo la lista de fuentes hasta que solo quede un elemento.
+> [!NOTE]
+> Las restricciones _nunca_ causan cambios en la lista de fuentes disponibles para la captura por parte de la API de uso compartido de pantalla. Esto garantiza que las aplicaciones web no puedan obligar al usuario a compartir contenido específico restringiendo la lista de fuentes hasta que solo quede un elemento.
 
 Mientras la captura de pantalla está en uso, la máquina que comparte el contenido de la pantalla mostrará algún tipo de indicador para que el usuario sepa que se está compartiendo.
 
-> **Nota:** Por motivos de privacidad y seguridad, las fuentes de pantalla compartida no se pueden enumerar mediante {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}. Relacionado con esto, el evento {{domxref("MediaDevices/devicechange_event", "devicechange")}} nunca se envía cuando hay cambios en las fuentes disponibles para `getDisplayMedia()`.
+> [!NOTE]
+> Por motivos de privacidad y seguridad, las fuentes de pantalla compartida no se pueden enumerar mediante {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}. Relacionado con esto, el evento {{domxref("MediaDevices/devicechange_event", "devicechange")}} nunca se envía cuando hay cambios en las fuentes disponibles para `getDisplayMedia()`.
 
 ### Captura de audio compartido
 
diff --git a/files/es/web/api/server-sent_events/index.md b/files/es/web/api/server-sent_events/index.md
index af245669ab2be5..2576f906d1b4c8 100644
--- a/files/es/web/api/server-sent_events/index.md
+++ b/files/es/web/api/server-sent_events/index.md
@@ -11,7 +11,8 @@ Tradicionalmente, una página web tiene que enviar una solicitud al servidor par
 
 {{AvailableInWorkers}}
 
-> **Nota:** Firefox actualmente no admite el uso de eventos enviados por el servidor en _service workers_ (sí los admite en trabajadores dedicados y compartidos). Ver [error 1681218, en Firefox](https://bugzil.la/1681218).
+> [!NOTE]
+> Firefox actualmente no admite el uso de eventos enviados por el servidor en _service workers_ (sí los admite en trabajadores dedicados y compartidos). Ver [error 1681218, en Firefox](https://bugzil.la/1681218).
 
 ## Conceptos y uso
 
diff --git a/files/es/web/api/server-sent_events/using_server-sent_events/index.md b/files/es/web/api/server-sent_events/using_server-sent_events/index.md
index ffd48f2c1bf486..ef101c195bf347 100644
--- a/files/es/web/api/server-sent_events/using_server-sent_events/index.md
+++ b/files/es/web/api/server-sent_events/using_server-sent_events/index.md
@@ -19,7 +19,8 @@ El server-sent event API está contenido en la interfaz [`EventSource`](/en/Serv
 var evtSource = new EventSource("ssedemo.php");
 ```
 
-> **Nota:** Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.
+> [!NOTE]
+> Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.
 
 Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:
 
@@ -112,7 +113,8 @@ evtSource.close();
 
 El flujo de eventos es una corriente sencilla de datos de texto, que deben ser codificados usando UTF-8. Los mensajes en el flujo de eventos están separados por un par de caracteres de salto de línea. Si hay un símbolo de dos puntos como primer caracter de una línea, se entiende que es un comentario y es ignorado.
 
-> **Nota:** La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.
+> [!NOTE]
+> La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.
 
 Cada mensaje consiste en una o más líneas de texto que enumeran los campos para ese mensaje. Cada campo está representado por el nombre del campo, seguido por los datos de texto para el valor de ese campo.
 
@@ -138,7 +140,8 @@ Los siguientes nombres de campo son definidos por la especificación:
 
 Se omiten todos los demas nombres de campo.
 
-> **Nota:** Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.
+> [!NOTE]
+> Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.
 
 ### Ejemplos
 
diff --git a/files/es/web/api/service_worker_api/index.md b/files/es/web/api/service_worker_api/index.md
index 194380ec862ff9..8f9ce1f3753210 100644
--- a/files/es/web/api/service_worker_api/index.md
+++ b/files/es/web/api/service_worker_api/index.md
@@ -15,9 +15,11 @@ Un service worker se ejecuta en un contexto worker: por lo tanto no tiene acceso
 
 Los service workers solo funcionan sobre HTTPS, por razones de seguridad. Modificar las peticiones de red en abierto permitiría ataques man in the middle realmente peligrosos. En Firefox, las APIs de service worker se ocultan y no pueden ser empleadas cuando el usuario está en [modo de navegación en privado](https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history).
 
-> **Nota:** Los Service Workers mejoran los intentos anteriores en este área tal como [AppCache](http://alistapart.com/article/application-cache-is-a-douchebag) puesto que no hacen suposiciones sobre qué se está intentando hacer para luego tener que cortar cuando las suposiciones no son correctas; hay control granular sobre todos los aspectos.
+> [!NOTE]
+> Los Service Workers mejoran los intentos anteriores en este área tal como [AppCache](http://alistapart.com/article/application-cache-is-a-douchebag) puesto que no hacen suposiciones sobre qué se está intentando hacer para luego tener que cortar cuando las suposiciones no son correctas; hay control granular sobre todos los aspectos.
 
-> **Nota:** Los Service workers hace un uso intensivo de las [promesas](/es/docs/Web/JavaScript/Reference/Global_Objects/Promise), por lo que generalmente esperarán a que lleguen las respuestasas correspondientes, tras lo cual responderán con una acción de éxito o de fracaso. La arquitectura de promesas es ideal en este caso.
+> [!NOTE]
+> Los Service workers hace un uso intensivo de las [promesas](/es/docs/Web/JavaScript/Reference/Global_Objects/Promise), por lo que generalmente esperarán a que lleguen las respuestasas correspondientes, tras lo cual responderán con una acción de éxito o de fracaso. La arquitectura de promesas es ideal en este caso.
 
 ### Registro
 
@@ -47,7 +49,8 @@ También hay un evento `activate`. El momento en el que este evento se activa es
 
 Tu service worker puede responder a las peticiones usando el evento {{domxref("FetchEvent")}}. Puedes modificar la respuesta a estas peticiones de la manera que quieras, usando el método {{domxref("FetchEvent.respondWith") }}.
 
-> **Nota:** Dado que `oninstall`/`onactivate` puede tardar un poco en completarse, la especificación de service worker spec provee un método `waitUntil` que, cuando es llamado `oninstall` o `onactivate`, pasa una promesa. Los eventos funcionales no se envían al service worker hasta que la promesa se resuelve con éxito.
+> [!NOTE]
+> Dado que `oninstall`/`onactivate` puede tardar un poco en completarse, la especificación de service worker spec provee un método `waitUntil` que, cuando es llamado `oninstall` o `onactivate`, pasa una promesa. Los eventos funcionales no se envían al service worker hasta que la promesa se resuelve con éxito.
 
 Para un tutorial completo que muestra cómo construir tu primer ejemplo básico, lee [Using Service Workers](/es/docs/Web/API/ServiceWorker_API/Using_Service_Workers).
 
diff --git a/files/es/web/api/service_worker_api/using_service_workers/index.md b/files/es/web/api/service_worker_api/using_service_workers/index.md
index 0d4432f5d1cff0..3cbb5f5725d14b 100644
--- a/files/es/web/api/service_worker_api/using_service_workers/index.md
+++ b/files/es/web/api/service_worker_api/using_service_workers/index.md
@@ -13,7 +13,8 @@ Un problema primordial del que los usuarios de la web han adolecido durante año
 
 El intento anterior, _AppCache_, parecía ser una buena idea porque te permitía especificar activos para almacenar en caché con mucha facilidad. Sin embargo, hizo muchas suposiciones sobre lo que estabas tratando de hacer y luego se rompió horriblemente cuando tu aplicación no siguió exactamente esas suposiciones. Lee el documento de Jake Archibald (desafortunadamente mal titulado pero bien escrito) [Application Cache is a Douchebag](https://alistapart.com/article/application-cache-is-a-douchebag/) para obtener más detalles.
 
-> **Nota:** A partir de Firefox 84, se eliminó _AppCache_ ([Error 1619673 en Firefox](https://bugzil.la/1619673)). También se ha [eliminado](https://bugs.chromium.org/p/chromium/issues/detail?id=582750) de Chromium 95 y está obsoleto en Safari.
+> [!NOTE]
+> A partir de Firefox 84, se eliminó _AppCache_ ([Error 1619673 en Firefox](https://bugzil.la/1619673)). También se ha [eliminado](https://bugs.chromium.org/p/chromium/issues/detail?id=582750) de Chromium 95 y está obsoleto en Safari.
 
 El _service worker_ finalmente debería solucionar estos problemas. La sintaxis del _service worker_ es más compleja que la de _AppCache_, pero la compensación es que puedes usar JavaScript para controlar su comportamiento implícito en _AppCache_ con un buen grado de fina granularidad, lo que te permite manejar este problema y muchos más. Al usar un _service worker_, puedes configurar fácilmente una aplicación para usar activos almacenados en caché primero, proporcionando así una experiencia predeterminada incluso cuando estás desconectado, antes de obtener más datos de la red (comúnmente conocido como [Primero sin conexión](https://offlinefirst.org/)). Esto ya está disponible con las aplicaciones nativas, que es una de las principales razones por las que las aplicaciones nativas a menudo se eligen en lugar de las aplicaciones web.
 
@@ -84,9 +85,11 @@ Esto registra un _service worker_, que se ejecuta en un contexto de trabajador y
 
 Un solo _service worker_ puede controlar muchas páginas. Cada vez que se carga una página dentro de su alcance, el _service worker_ se instala en esa página y opera en ella. Por lo tanto, ten en cuenta que debes tener cuidado con las variables globales en el script del _service worker_: cada página no tiene su propio trabajador único.
 
-> **Nota:** Tu _service worker_ funciona como un servidor proxy, lo que te permite modificar solicitudes y respuestas, reemplazarlas con elementos de su propio caché y más.
+> [!NOTE]
+> Tu _service worker_ funciona como un servidor proxy, lo que te permite modificar solicitudes y respuestas, reemplazarlas con elementos de su propio caché y más.
 
-> **Nota:** Una gran cosa acerca del _service worker_ es que si usas la detección de funciones como se muestra arriba, los navegadores que no son compatibles con los _service workers_ pueden usar tu aplicación en línea de la manera normal esperada. Además, si usas _AppCache_ y <abbr title="ServiceWorker">SW</abbr> en una página, los navegadores que no admiten <abbr title="ServiceWorker">SW</abbr> pero sí _AppCache_ lo usarán, y los navegadores que admiten ambos ignorarán _AppCache_ y dejarán que <abbr title="ServiceWorker">SW</abbr> tome el control.
+> [!NOTE]
+> Una gran cosa acerca del _service worker_ es que si usas la detección de funciones como se muestra arriba, los navegadores que no son compatibles con los _service workers_ pueden usar tu aplicación en línea de la manera normal esperada. Además, si usas _AppCache_ y <abbr title="ServiceWorker">SW</abbr> en una página, los navegadores que no admiten <abbr title="ServiceWorker">SW</abbr> pero sí _AppCache_ lo usarán, y los navegadores que admiten ambos ignorarán _AppCache_ y dejarán que <abbr title="ServiceWorker">SW</abbr> tome el control.
 
 #### ¿Por qué mi service worker no se registra?
 
@@ -505,7 +508,8 @@ Firefox también ha comenzado a implementar algunas herramientas útiles relacio
 - Al realizar pruebas, puedes sortear la restricción de HTTPS marcando la opción "Habilitar _service worker_ a través de HTTP (cuando la caja de herramientas está abierta)" en la [Configuración de herramientas de desarrollo de Firefox](https://firefox-source-docs.mozilla.org/devtools-user/settings/index.html).
 - El botón "Olvidar", disponible en las opciones de personalización de Firefox, se puede usar para borrar los _service workers_ y sus cachés ([Error 1252998 en Firefox](https://bugzil.la/1252998)).
 
-> **Nota:** Puedes servir tu aplicación desde `http://localhost` (por ejemplo, usando `me@localhost:/my/app$ python -m SimpleHTTPServer`) para el desarrollo local. Ve [Consideraciones de seguridad](https://www.w3.org/TR/service-workers/#security-considerations)
+> [!NOTE]
+> Puedes servir tu aplicación desde `http://localhost` (por ejemplo, usando `me@localhost:/my/app$ python -m SimpleHTTPServer`) para el desarrollo local. Ve [Consideraciones de seguridad](https://www.w3.org/TR/service-workers/#security-considerations)
 
 ## Véase también
 
diff --git a/files/es/web/api/setinterval/index.md b/files/es/web/api/setinterval/index.md
index 78da2cfe33c460..ce2b6440455a40 100644
--- a/files/es/web/api/setinterval/index.md
+++ b/files/es/web/api/setinterval/index.md
@@ -46,7 +46,8 @@ El `intervalID` devuelto es un valor numérico, diferente a 0, que identifica el
 
 Puede ser útil tener en cuenta que `setInterval()` y {{domxref("setTimeout()")}} comparten el mismo grupo de IDs. También es importante saber que `clearInterval()` y {{domxref("clearTimeout", "clearTimeout()")}} técnicamente pueden ser utilizados indistintamente. Sin embargo, para mayor claridad siempre debe tratar de hacerlos coincidir, evitando así confusiones al mantener su código.
 
-> **Nota:** El argumento `delay` se convierte en un número entero de 32 bits con signo. Efectivamente, esto limita `delay` a 2.147,483,647 milisegundos, ya que es especificado en el IDL como un número entero con signo.
+> [!NOTE]
+> El argumento `delay` se convierte en un número entero de 32 bits con signo. Efectivamente, esto limita `delay` a 2.147,483,647 milisegundos, ya que es especificado en el IDL como un número entero con signo.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/storage/clear/index.md b/files/es/web/api/storage/clear/index.md
index 5dd543753c6ac3..ca66d78a3f841f 100644
--- a/files/es/web/api/storage/clear/index.md
+++ b/files/es/web/api/storage/clear/index.md
@@ -35,7 +35,8 @@ function populateStorage() {
 }
 ```
 
-> **Nota:** Para ver un ejemplo real, vea nuestro [Web Storage Demo](https://github.com/mdn/web-storage-demo).
+> [!NOTE]
+> Para ver un ejemplo real, vea nuestro [Web Storage Demo](https://github.com/mdn/web-storage-demo).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/storage/getitem/index.md b/files/es/web/api/storage/getitem/index.md
index 6ab5f488614d09..c6c4bccccb38a8 100644
--- a/files/es/web/api/storage/getitem/index.md
+++ b/files/es/web/api/storage/getitem/index.md
@@ -42,7 +42,8 @@ function setStyles() {
 }
 ```
 
-> **Nota:** Para ver esto utilizado en un ejemplo real, vea nuestra [Demo de Web Storage](https://github.com/mdn/web-storage-demo).
+> [!NOTE]
+> Para ver esto utilizado en un ejemplo real, vea nuestra [Demo de Web Storage](https://github.com/mdn/web-storage-demo).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/storage/index.md b/files/es/web/api/storage/index.md
index a4203fa8e9280e..567d36a90b6250 100644
--- a/files/es/web/api/storage/index.md
+++ b/files/es/web/api/storage/index.md
@@ -64,7 +64,8 @@ function setStyles() {
 }
 ```
 
-> **Nota:** Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra [Demo de almacenamiento web](https://github.com/mdn/web-storage-demo).
+> [!NOTE]
+> Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra [Demo de almacenamiento web](https://github.com/mdn/web-storage-demo).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/storage/length/index.md b/files/es/web/api/storage/length/index.md
index 231578219cee07..9cb7564da96440 100644
--- a/files/es/web/api/storage/length/index.md
+++ b/files/es/web/api/storage/length/index.md
@@ -31,7 +31,8 @@ function populateStorage() {
 }
 ```
 
-> **Nota:** Para un ejemplo real, vea nuestro [Web Storage Demo](https://github.com/mdn/web-storage-demo).
+> [!NOTE]
+> Para un ejemplo real, vea nuestro [Web Storage Demo](https://github.com/mdn/web-storage-demo).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/storage/removeitem/index.md b/files/es/web/api/storage/removeitem/index.md
index c8fcfb533be464..de97a54c15070f 100644
--- a/files/es/web/api/storage/removeitem/index.md
+++ b/files/es/web/api/storage/removeitem/index.md
@@ -48,7 +48,8 @@ function populateSessionStorage() {
 }
 ```
 
-> **Nota:** Para ver esto en un ejemplo real, vea nuestra [Demo de Web Storage](https://github.com/mdn/web-storage-demo).
+> [!NOTE]
+> Para ver esto en un ejemplo real, vea nuestra [Demo de Web Storage](https://github.com/mdn/web-storage-demo).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/storage/setitem/index.md b/files/es/web/api/storage/setitem/index.md
index 4616ea58a8c823..b3a982878cc470 100644
--- a/files/es/web/api/storage/setitem/index.md
+++ b/files/es/web/api/storage/setitem/index.md
@@ -41,7 +41,8 @@ function populateStorage() {
 }
 ```
 
-> **Nota:** Para ver un ejemplo real, vea nuestro [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
+> [!NOTE]
+> Para ver un ejemplo real, vea nuestro [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
 
 ## Especificaciones
 
diff --git a/files/es/web/api/subtlecrypto/digest/index.md b/files/es/web/api/subtlecrypto/digest/index.md
index 5846ec8aef18d8..df276bf9176cec 100644
--- a/files/es/web/api/subtlecrypto/digest/index.md
+++ b/files/es/web/api/subtlecrypto/digest/index.md
@@ -38,7 +38,8 @@ Los argoritmos digest, también conocidos como [funciones criptográficas hash](
 
 Este algoritmo se especifica en [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), sección 6.1, y produce una salida de 160 bits de largo.
 
-> **Advertencia:** Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.
+> [!WARNING]
+> Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.
 
 ### SHA-256
 
@@ -52,7 +53,8 @@ Este algoritmo se especifica en [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/F
 
 Este algoritmo se especifica en [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), sección 6.4, y produce una salida de 512 bits de largo.
 
-> **Nota:** Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" ([HMAC](/es/docs/Glossary/HMAC)), necesitas usar [SubtleCrypto.sign()](/es/docs/Web/API/SubtleCrypto/sign#HMAC) en su lugar.
+> [!NOTE]
+> Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" ([HMAC](/es/docs/Glossary/HMAC)), necesitas usar [SubtleCrypto.sign()](/es/docs/Web/API/SubtleCrypto/sign#HMAC) en su lugar.
 
 ## Ejemplos
 
diff --git a/files/es/web/api/subtlecrypto/index.md b/files/es/web/api/subtlecrypto/index.md
index d7c2f5cc877054..c6fac79001b103 100644
--- a/files/es/web/api/subtlecrypto/index.md
+++ b/files/es/web/api/subtlecrypto/index.md
@@ -7,7 +7,8 @@ slug: Web/API/SubtleCrypto
 
 La interfaz **`SubtleCrypto`** de la [Web Crypto API](/es/docs/Web/API/Web_Crypto_API) provee una serie de funciones criptográficas de bajo nivel. Se accede a ella a través de las propiedades {{domxref("Crypto.subtle")}} disponible en un contexto de la ventana (via {{domxref("Window.crypto")}}).
 
-> **Advertencia:** Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.
+> [!WARNING]
+> Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.
 >
 > Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.
 >
diff --git a/files/es/web/api/texttrack/index.md b/files/es/web/api/texttrack/index.md
index 70d631de9de93e..97031a8d459b4e 100644
--- a/files/es/web/api/texttrack/index.md
+++ b/files/es/web/api/texttrack/index.md
@@ -36,7 +36,8 @@ _Esta interfaz también hereda propiedades de {{domxref("EventTarget")}}._
 
 _Esta interfaz también hereda métodos de {{domxref("EventTarget")}}._
 
-> **Nota:** La interfaz {{domxref("TextTrackCue")}} es una clase abstracta que se utiliza como padre para otras interfaces de señales como {{domxref("VTTCue")}}. Por lo tanto, al agregar o eliminar una señal, estará pasando uno de los tipos de señales que heredan de `TextTrackCue`.
+> [!NOTE]
+> La interfaz {{domxref("TextTrackCue")}} es una clase abstracta que se utiliza como padre para otras interfaces de señales como {{domxref("VTTCue")}}. Por lo tanto, al agregar o eliminar una señal, estará pasando uno de los tipos de señales que heredan de `TextTrackCue`.
 
 - {{domxref("TextTrack.addCue()")}}
   - : Agrega una señal (especificada como un objeto {{domxref("TextTrackCue")}}) a la lista de señales de la pista.
diff --git a/files/es/web/api/touch_events/index.md b/files/es/web/api/touch_events/index.md
index 8d5a2bb3ef2843..eb111cc5758150 100644
--- a/files/es/web/api/touch_events/index.md
+++ b/files/es/web/api/touch_events/index.md
@@ -32,7 +32,8 @@ Con el fin de proporcionar soporte de calidad para usuarios de interfaces tácti
 
 Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporte eventos táctiles.
 
-> **Nota:** El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un _stylus_ u otro método de contacto.
+> [!NOTE]
+> El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un _stylus_ u otro método de contacto.
 
 ### Configurando los eventos de manipulación
 
diff --git a/files/es/web/api/touchevent/index.md b/files/es/web/api/touchevent/index.md
index 683607b1ba4c3c..ae44c138adef15 100644
--- a/files/es/web/api/touchevent/index.md
+++ b/files/es/web/api/touchevent/index.md
@@ -37,7 +37,8 @@ _Esta interfaz hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxr
 
 Hay varios tipos de eventos que pueden ser disparados (activados) para indicar que han ocurrido cambios relacionados con el contacto. Puede determinar cuál de estos ha ocurrido mirando la propiedad {{domxref ("event.type", "TouchEvent.type")}} del evento.
 
-> **Nota:** Es importante observar que en muchos casos, Los eventos táctiles y de mouse se envían (para permitir que el código no táctil específico aún interactúe con el usuario). Si usa eventos táctiles, debe llamar a {{domxref ("event.preventDefault ()")}} para evitar que también se envíe el evento del mouse.
+> [!NOTE]
+> Es importante observar que en muchos casos, Los eventos táctiles y de mouse se envían (para permitir que el código no táctil específico aún interactúe con el usuario). Si usa eventos táctiles, debe llamar a {{domxref ("event.preventDefault ()")}} para evitar que también se envíe el evento del mouse.
 
 ### [`touchstart`](/es/docs/Web/Reference/Events/touchstart)
 
@@ -57,7 +58,8 @@ Sent when the user moves a touch point along the surface. The event's target is
 
 This event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change.
 
-> **Nota:** The rate at which `touchmove` events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.
+> [!NOTE]
+> The rate at which `touchmove` events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.
 
 ### [`touchcancel`](/es/docs/Web/Reference/Events/touchcancel)
 
diff --git a/files/es/web/api/uievent/which/index.md b/files/es/web/api/uievent/which/index.md
index cf64559680138d..a280cb1bad331c 100644
--- a/files/es/web/api/uievent/which/index.md
+++ b/files/es/web/api/uievent/which/index.md
@@ -61,7 +61,8 @@ alert("onkeydown handler: \n"
 </html>
 ```
 
-> **Nota:** El codigo de arriba falla en Firefox 9 debido al [bug 696020](https://bugzilla.mozilla.org/show_bug.cgi?id=696020).
+> [!NOTE]
+> El codigo de arriba falla en Firefox 9 debido al [bug 696020](https://bugzilla.mozilla.org/show_bug.cgi?id=696020).
 
 ### Especificacion
 
diff --git a/files/es/web/api/url/createobjecturl_static/index.md b/files/es/web/api/url/createobjecturl_static/index.md
index 80e3458755a188..f1f8919de0a882 100644
--- a/files/es/web/api/url/createobjecturl_static/index.md
+++ b/files/es/web/api/url/createobjecturl_static/index.md
@@ -7,7 +7,8 @@ slug: Web/API/URL/createObjectURL_static
 
 El método estático **`URL.createObjectURL()`** crea un {{domxref("DOMString")}} que contiene una URL que representa al objeto pasado como parámetro. La vida de la URL está ligado al {{domxref("document")}} de la ventana en la que fue creada. El nuevo objeto URL representa al objeto {{domxref("File")}} especificado o al objeto {{domxref("Blob")}}.
 
-> **Nota:** El uso de un objeto {{domxref("MediaStream")}} como entrada a este método está en proceso de ser obsoleto. Las discusiones están en curso sobre si o no debe ser quitado totalmente. Como tal, _se debe de evitar usar este método con {{domxref("MediaStream")}}s, y se debería usar {{domxref("HTMLMediaElement.srcObject", "HTMLMediaElement.srcObject()")}}_.
+> [!NOTE]
+> El uso de un objeto {{domxref("MediaStream")}} como entrada a este método está en proceso de ser obsoleto. Las discusiones están en curso sobre si o no debe ser quitado totalmente. Como tal, _se debe de evitar usar este método con {{domxref("MediaStream")}}s, y se debería usar {{domxref("HTMLMediaElement.srcObject", "HTMLMediaElement.srcObject()")}}_.
 
 {{AvailableInWorkers}}
 
@@ -32,7 +33,8 @@ Ver [Usando objetos URL para representar imágenes](/es/docs/Using_files_from_we
 
 Cada vez que se llama a `createObjectURL()`, un nuevo objeto URL es creado, incluso si ya creaste uno para el mismo objeto. Cada uno de estos objetos puede ser liberado usando {{domxref("URL.revokeObjectURL()")}} cuándo ya no lo necesitas. Los navegadores liberan estos objetos cuando el documento es cerrado; de todas formas, para obtener un rendimiento óptimo y un óptimo uso de memoria, si hay momentos seguros en los que puedes liberar estos objetos deberías hacerlo. Por ejemplo: No liberar los recursos cuando se ha creado una URL a partir de un {{domxref('MediaStream')}} puede dejar la luz de la cámara del navegador encendida más tiempo del necesario.
 
-> **Nota:** Notese que no es necesario crear URLs a partir de un {{domxref('MediaStream')}}, ya que los objetos de streams deberían asignarse directamente a elementos de reproducción con {{domxref("HTMLMediaElement.srcObject")}}. La posibilidad de usar un `MediaStream` como valor de un objeto está obsoleta.
+> [!NOTE]
+> Notese que no es necesario crear URLs a partir de un {{domxref('MediaStream')}}, ya que los objetos de streams deberían asignarse directamente a elementos de reproducción con {{domxref("HTMLMediaElement.srcObject")}}. La posibilidad de usar un `MediaStream` como valor de un objeto está obsoleta.
 
 ## Especificaciones
 
diff --git a/files/es/web/api/url/url/index.md b/files/es/web/api/url/url/index.md
index 8e2c27be9a8bde..6af6b12e5f17a4 100644
--- a/files/es/web/api/url/url/index.md
+++ b/files/es/web/api/url/url/index.md
@@ -24,7 +24,8 @@ url = new URL(url, [base])
 - `base` {optional_inline}}
   - : Un {{domxref("USVString")}} representa la URL base a usar en caso de que la URL sea una URL relativa. Si no se especifica, el valor predeterminado es `''`.
 
-> **Nota:** Aún puede usar un objeto {{domxref("URL")}} existente para la base, que se enchufa al atributo {{domxref("DOMString.href","href")}} del objeto.
+> [!NOTE]
+> Aún puede usar un objeto {{domxref("URL")}} existente para la base, que se enchufa al atributo {{domxref("DOMString.href","href")}} del objeto.
 
 ### Excepciones
 
diff --git a/files/es/web/api/web_audio_api/index.md b/files/es/web/api/web_audio_api/index.md
index 7cd3e7b1c2faa5..e2dc91de261be8 100644
--- a/files/es/web/api/web_audio_api/index.md
+++ b/files/es/web/api/web_audio_api/index.md
@@ -29,7 +29,8 @@ El tiempo es controlado con alta precisión baja latencia, permitiendo a los des
 
 El API de Audio Web también nos permite controlar cómo el audio es _espacializado_. Usando un sistema basado en un _modelo fuente-oyente_, esto permite controlar el _modeo de paneo_ y que se ocupa de la _atenuación inducida por distancia_ o _desplazamiento doppler_ inducido por una fuente en movimiento (o un oyente en movimiento).
 
-> **Nota:** Puedes leear sobre la teoría del API de Audio Web con más detalle en nuestro artículo [Conceptos Básicos detrás del API de Audio Web](/es/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API).
+> [!NOTE]
+> Puedes leear sobre la teoría del API de Audio Web con más detalle en nuestro artículo [Conceptos Básicos detrás del API de Audio Web](/es/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API).
 
 ## Interfaces del API de Audio Web
 
diff --git a/files/es/web/api/web_components/using_custom_elements/index.md b/files/es/web/api/web_components/using_custom_elements/index.md
index c358d4f763dc79..7b7962ea0b3fa3 100644
--- a/files/es/web/api/web_components/using_custom_elements/index.md
+++ b/files/es/web/api/web_components/using_custom_elements/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Web_components/Using_custom_elements
 
 Una de las características claves del estándar de Componentes Web es la capacidad de crear elementos personalizados que encapsulan tu funcionalidad en una página HTML, en vez de tener que hacerlo con una larga lista de elementos anidados que juntos proveen una funcionalidad o característica personalizada en una página. Este artículo presenta el uso del API de Elementos Personalizados.
 
-> **Nota:** Los Elementos Personalizados funcionan por defecto en Firefox, Chrome, y Edge (76). Opera y Safari solo adminten Elementos Personalizados autónomos (que extienden HTMLElement).
+> [!NOTE]
+> Los Elementos Personalizados funcionan por defecto en Firefox, Chrome, y Edge (76). Opera y Safari solo adminten Elementos Personalizados autónomos (que extienden HTMLElement).
 
 ## Vista de alto nivel
 
@@ -137,9 +138,11 @@ Ahora ya está disponible para usarse en nuestra página. En nuestro HTML, lo us
   back of your card."></popup-info>
 ```
 
-> **Nota:** Puedes ver el código [fuente JavaScript completo](https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js) aquí.
+> [!NOTE]
+> Puedes ver el código [fuente JavaScript completo](https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js) aquí.
 
-> **Nota:** Recuerda que para que los elementos personalizados funcionen, el script que los registra tiene que cargarse después de que el DOM lo interprete. Esto puede hacerse incluyendo un elemento `<script>` al final del `<body>`, o poniendo el atributo `defer` en tu elemento `<script>`.
+> [!NOTE]
+> Recuerda que para que los elementos personalizados funcionen, el script que los registra tiene que cargarse después de que el DOM lo interprete. Esto puede hacerse incluyendo un elemento `<script>` al final del `<body>`, o poniendo el atributo `defer` en tu elemento `<script>`.
 
 ### Estilos internos vs. externos
 
@@ -198,7 +201,8 @@ El uso de un elemento preconstruido en un documento web también es algo distint
 
 Usas el elemento `<ul>` como siempre, pero especificas el nombre del elemento personalizado mediante un atributo `is` .
 
-> **Nota:** De nuevo, puedes ver el código [fuente JavaScript completo](https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js)aquí.
+> [!NOTE]
+> De nuevo, puedes ver el código [fuente JavaScript completo](https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js)aquí.
 
 ## Usando callbacks de ciclo de vida
 
@@ -282,7 +286,8 @@ static get observedAttributes() { return ['c', 'l']; }
 
 Este código se coloca en la parte de arriba del constructor en nuestro ejemplo.
 
-> **Nota:** Busca el [código JavaScript completo](https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js)aquí.
+> [!NOTE]
+> Busca el [código JavaScript completo](https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js)aquí.
 
 ## Polyfills vs. clases
 
diff --git a/files/es/web/api/web_components/using_shadow_dom/index.md b/files/es/web/api/web_components/using_shadow_dom/index.md
index 494395e38b9bde..4354aa55b229bc 100644
--- a/files/es/web/api/web_components/using_shadow_dom/index.md
+++ b/files/es/web/api/web_components/using_shadow_dom/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Web_components/Using_shadow_DOM
 
 Un aspecto importante de los componentes Web es la encapsulación — ser capaz de mantener la estructura de marcado, estilo, y comportamiento oculto y separado de otro código en la página para que las diferentes partes no entre en conflicto, y el código pueda permanecer limpio y agradable. El API de DOM Shadow es un parte clave para esto, proporcionando una forma de enlazar un DOM oculto y separado a un elemento. Este artículo cubre los aspectos básicos para utilizar Shadow DOM.
 
-> **Nota:** Shadow DOM es soportado por defecto en Firefox (63 en adelante), Chrome, Opera, y Safari. Edge también está trabajando en una implemetanción.
+> [!NOTE]
+> Shadow DOM es soportado por defecto en Firefox (63 en adelante), Chrome, Opera, y Safari. Edge también está trabajando en una implemetanción.
 
 ## Vista de alto nivel
 
@@ -70,7 +71,8 @@ let myShadowDom = myCustomElem.shadowRoot;
 
 If you attach a shadow root to a custom element with `mode: closed` set, you won't be able to access the shadow DOM from the outside — `myCustomElem.shadowRoot` returns `null`. This is the case with built in elements that contain shadow DOMs, such as `<video>`.
 
-> **Nota:** As [this blog post shows](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af), it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.
+> [!NOTE]
+> As [this blog post shows](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af), it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.
 
 If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:
 
diff --git a/files/es/web/api/web_components/using_templates_and_slots/index.md b/files/es/web/api/web_components/using_templates_and_slots/index.md
index a239aa213a0c4a..7550afcb79e618 100644
--- a/files/es/web/api/web_components/using_templates_and_slots/index.md
+++ b/files/es/web/api/web_components/using_templates_and_slots/index.md
@@ -75,7 +75,8 @@ Ahora podemos usarlo simplemente agregándolo a nuestro documento HTML:
 <my-paragraph></my-paragraph>
 ```
 
-> **Nota:** Las plantillas están bien soportadas en los navegadores: la API del Shadow DOM es compatible por defecto con Firefox (version 63 en adelante), Chrome, Opera y Safari, Edge está trabajando en una implementación.
+> [!NOTE]
+> Las plantillas están bien soportadas en los navegadores: la API del Shadow DOM es compatible por defecto con Firefox (version 63 en adelante), Chrome, Opera y Safari, Edge está trabajando en una implementación.
 
 ## Añadiendo flexibilidad con el elemento \<slot>
 
@@ -110,9 +111,11 @@ o
 </my-paragraph>
 ```
 
-> **Nota:** Los elementos que pueden ser insertados en los slots son conocidos como {{domxref("Slotable")}}; cuando un elemento ha sido insertado en un slot, se dice que fue _eslotado_ por su término en inglés _slotted._
+> [!NOTE]
+> Los elementos que pueden ser insertados en los slots son conocidos como {{domxref("Slotable")}}; cuando un elemento ha sido insertado en un slot, se dice que fue _eslotado_ por su término en inglés _slotted._
 
-> **Nota:** Un {{HTMLElement("slot")}} sin nombre se rellenará con todos los nodos secundarios de nivel superior del elemento personalizado que no tengan el atributo [`slot`](/es/docs/Web/HTML/Global_attributes#slot). Esto incluye nodos de texto.
+> [!NOTE]
+> Un {{HTMLElement("slot")}} sin nombre se rellenará con todos los nodos secundarios de nivel superior del elemento personalizado que no tengan el atributo [`slot`](/es/docs/Web/HTML/Global_attributes#slot). Esto incluye nodos de texto.
 
 Y eso es todo nuestro ejemplo sencillo. Si quieres jugar con él un poco más, puedes encontrarlo en [GitHub](https://github.com/mdn/web-components-examples/tree/master/simple-template) (también puedes [verlo en vivo](https://mdn.github.io/web-components-examples/simple-template/)).
 
@@ -129,7 +132,8 @@ Observa que es técnicamente posible usar el elemento {{HTMLElement("slot")}} si
 
 Además, incluso si no está renderizado, el propósito del contenedor como plantilla debería ser semánticamente más claro cuando se usa el elemento {{HTMLElement("template")}}. Además, el elemento {{HTMLElement("template")}} puede tener elementos agregados directamente a él, como {{HTMLElement("td")}}, que desaparecerían al añadirse a un {{HTMLElement ("div")}}.
 
-> **Nota:** Puedes encontrar el ejemplo completo en [element-details](https://github.com/mdn/web-components-examples/tree/master/element-details)(también lo puedes[ver en vivo](https://github.com/mdn/web-components-examples/tree/master/element-details))
+> [!NOTE]
+> Puedes encontrar el ejemplo completo en [element-details](https://github.com/mdn/web-components-examples/tree/master/element-details)(también lo puedes[ver en vivo](https://github.com/mdn/web-components-examples/tree/master/element-details))
 
 ### Creando una plantilla con algunos elementos \<slot>
 
diff --git a/files/es/web/api/web_crypto_api/index.md b/files/es/web/api/web_crypto_api/index.md
index 32bc80a5737971..4d7769dcb66466 100644
--- a/files/es/web/api/web_crypto_api/index.md
+++ b/files/es/web/api/web_crypto_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Web_Crypto_API
 
 La **Web Crypto API** es una interfaz que permite a un script usar primitivos criptográficos con el fin de construir sistemas utilizando criptografía.
 
-> **Advertencia:** Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.
+> [!WARNING]
+> Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.
 >
 > Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.
 >
diff --git a/files/es/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/es/web/api/web_speech_api/using_the_web_speech_api/index.md
index 9e4e170326da58..a4f0135c57856e 100644
--- a/files/es/web/api/web_speech_api/using_the_web_speech_api/index.md
+++ b/files/es/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -13,7 +13,8 @@ El reconocimiento de voz implica recibir voz a través del micrófono de un disp
 
 La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.
 
-> **Nota:** En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.
+> [!NOTE]
+> En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.
 
 ### Demo
 
diff --git a/files/es/web/api/web_storage_api/index.md b/files/es/web/api/web_storage_api/index.md
index 32241c74133db5..9e62a6de2cab63 100644
--- a/files/es/web/api/web_storage_api/index.md
+++ b/files/es/web/api/web_storage_api/index.md
@@ -16,7 +16,8 @@ Los dos mecanismos en el almacenamiento web son los siguientes:
 
 Estos mecanismos están disponibles mediante las propiedades [`Window.sessionStorage`](/es/docs/Web/API/Window/sessionStorage) y [`Window.localStorage`](/es/docs/Web/API/Window/localStorage) (dicho con más precisión, en navegadores con soporte, el objeto `Window` implementa los objetos `WindowLocalStorage` y `WindowSessionStorage`, en los cuales se basan las propiedades `localStorage` y `sessionStorage`). Al invocar uno de éstos, se creará una instancia del objeto [`Storage`](/es/docs/Web/API/Storage), a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.
 
-> **Nota:** Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene [deshabilitadas las cookies de terceros](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox implementa este comportamiento a partir de la [versión 43](/es/docs/Mozilla/Firefox/Releases/43)).
+> [!NOTE]
+> Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene [deshabilitadas las cookies de terceros](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox implementa este comportamiento a partir de la [versión 43](/es/docs/Mozilla/Firefox/Releases/43)).
 
 ## Interfaces de almacenamiento web
 
diff --git a/files/es/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.md
index 7c9786ef89659d..9c1f88fc90e6b2 100644
--- a/files/es/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -19,7 +19,8 @@ localStorage["colorSetting"] = "#a4509b";
 localStorage.setItem("colorSetting", "#a4509b");
 ```
 
-> **Nota:** Se recomiendo usar la API de almacenamiento web (`setItem`, `getItem`, `removeItem`, `key`, `length`) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.
+> [!NOTE]
+> Se recomiendo usar la API de almacenamiento web (`setItem`, `getItem`, `removeItem`, `key`, `length`) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.
 
 Los dos mecanismos en el almacenamiento web son los siguientes:
 
@@ -36,7 +37,8 @@ Para poder usar localStorage, debemos de verificar que tiene soporte y que está
 
 ### Probar la disponibilidad
 
-> **Nota:** Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.
+> [!NOTE]
+> Esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.
 
 Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede _soportar_ localStorage, pero puede no hacerlo _disponible_ para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, _disponible_. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.
 
@@ -93,7 +95,8 @@ También creamos una [página de salida del evento](https://mdn.github.io/dom-ex
 
 ![](event-output.png)
 
-> **Nota:** Puedes ver las páginas de ejemplo usando los links de arriba y también puedes [ver el código fuente.](https://github.com/mdn/dom-examples/tree/master/web-storage)
+> [!NOTE]
+> Puedes ver las páginas de ejemplo usando los links de arriba y también puedes [ver el código fuente.](https://github.com/mdn/dom-examples/tree/master/web-storage)
 
 ### Probar si la memoria tiene valores
 
diff --git a/files/es/web/api/web_workers_api/index.md b/files/es/web/api/web_workers_api/index.md
index afaedc4f7bba92..0c3f327ac3b0f9 100644
--- a/files/es/web/api/web_workers_api/index.md
+++ b/files/es/web/api/web_workers_api/index.md
@@ -24,7 +24,8 @@ Ademas de los workers dedicados, hay otro tipo de workers:
 - Chrome Workers es un worker solo de Firefox puedes utilizar si estás desarrollando complementos se puede tener acceso a [js-ctypes](/en/js-ctypes) en el worker. Mira {{domxref("ChromeWorker")}} para mas detalles.
 - [Audio Workers](/es/docs/Web/API/Web_Audio_API#Audio_Workers) nos dan la capacidad de procesar audio directamente dentro del contexto del worker.
 
-> **Nota:** Según el [Web workers Spec](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2), los errores del worker no deberían bubujear (mira [Error 1188141 en Firefox](https://bugzil.la/1188141). Esto está implementado en Firefox 42.
+> [!NOTE]
+> Según el [Web workers Spec](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2), los errores del worker no deberían bubujear (mira [Error 1188141 en Firefox](https://bugzil.la/1188141). Esto está implementado en Firefox 42.
 
 ## Web Worker interfaces
 
diff --git a/files/es/web/api/web_workers_api/using_web_workers/index.md b/files/es/web/api/web_workers_api/using_web_workers/index.md
index eda39f4d68c545..b8a213f9fdbebe 100644
--- a/files/es/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/es/web/api/web_workers_api/using_web_workers/index.md
@@ -45,7 +45,8 @@ myWorker.postMessage(""); // start the worker.
 
 La Línea 1 en este ejemplo crea un nuevo worker (_worker thread)_. La Línea 3 configura un manejador de eventos (_listener_) para encargarse de los eventos `message` del worker. Este manejador de eventos se llamará cuando el worker llame a su propia función {{domxref("Worker.postMessage()")}}. Finalmente, la Linea 7 inicia el worker _(worker thread)_.
 
-> **Nota:** : La URI pasada como parámetro del constructor de `Worker` debe obedecer la política [same-origin policy](/en/Same_origin_policy_for_JavaScript) . Actualmente hay desacuerdo entre los desarolladores de navegadores sobre qué URIs son del mismo origen; Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) y posteriores sí permiten data URIs e Internet Explorer 10 no permite Blob URIs como un script válido para los workers.
+> [!NOTE]
+> La URI pasada como parámetro del constructor de `Worker` debe obedecer la política [same-origin policy](/en/Same_origin_policy_for_JavaScript) . Actualmente hay desacuerdo entre los desarolladores de navegadores sobre qué URIs son del mismo origen; Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) y posteriores sí permiten data URIs e Internet Explorer 10 no permite Blob URIs como un script válido para los workers.
 
 ## Pasando datos
 
@@ -117,7 +118,8 @@ onmessage = function (oEvent) {
 };
 ```
 
-> **Nota:** Como siempre, los hilos en segundo plano -incluyendo workers- **no pueden manipular el DOM**. Si acciones tomadas por el hilo en segundo planos resultarían en cambios en el DOM, deberian enviar mensajes a sus creadores para llevarlos a cabo.
+> [!NOTE]
+> Como siempre, los hilos en segundo plano -incluyendo workers- **no pueden manipular el DOM**. Si acciones tomadas por el hilo en segundo planos resultarían en cambios en el DOM, deberian enviar mensajes a sus creadores para llevarlos a cabo.
 
 The [structured cloning](/es/docs/Web/Guide/DOM/The_structured_clone_algorithm) algorithm can accept JSON and a few things that JSON can't like circular references.
 
@@ -500,7 +502,8 @@ importScripts("foo.js", "bar.js"); /* imports two scripts */
 
 The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, `NETWORK_ERROR` is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{ domxref("window.setTimeout()") }}) will still be functional though. Function declarations **after** the `importScripts()` method are also kept, since these are always evaluated before the rest of the code.
 
-> **Nota:** Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into `importScripts()` . This is done synchronously; `importScripts()` does not return until all the scripts have been loaded and executed.
+> [!NOTE]
+> Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into `importScripts()` . This is done synchronously; `importScripts()` does not return until all the scripts have been loaded and executed.
 
 ## Examples
 
diff --git a/files/es/web/api/webgl_api/index.md b/files/es/web/api/webgl_api/index.md
index 00475e24516a6c..c3b827b5380b30 100644
--- a/files/es/web/api/webgl_api/index.md
+++ b/files/es/web/api/webgl_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/WebGL_API
 
 WebGL trae gráficos en 3D para la Web mediante la introducción de una API que cumple estrictamente la OpenGL ES 2.0 que se puede utilizar en elementos [`canvas`](/en/HTML/Canvas) HTML5. La compatibilidad para WebGL viene en [Firefox 4](/es/Firefox_4_para_desarrolladores) y se puede probar en las [betas de Firefox 4](http://firefox.com/beta) o en [trunk builds.](http://nightly.mozilla.org/) .
 
-> **Nota:** La especificación para WebGL se encuentra todavía en fase de borrador y sujeta a cambios.
+> [!NOTE]
+> La especificación para WebGL se encuentra todavía en fase de borrador y sujeta a cambios.
 
 ## Temas sobre desarrollo
 
diff --git a/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
index 4d16a46427265d..cfc6ee999717e3 100644
--- a/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
+++ b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
@@ -78,7 +78,8 @@ function initWebGL(canvas) {
 
 Para obtener el contexto WebGL de un canvas, pedimo el contexto llamado "webgl" del canvas. Si este falla, intentamos con el nombre "experimental-webgl". Si este igualmente, falla, mostramos una alerta permitiendo al usuario conocer que parece no tener soporte WebGL. Eso es todo al respecto. En este punto, `gl` es nulo (no hay ningun contexto WebGL disponible) o es una referencia al contexto WebGL en donde renderizaremos.
 
-> **Nota:** El nombre de contexto "experimental-webgl" es nombre temporal para usar durante el desarrollo de las especificaciones; el nombre "webgl" sera usado una vez se termine el desarrollo.
+> [!NOTE]
+> El nombre de contexto "experimental-webgl" es nombre temporal para usar durante el desarrollo de las especificaciones; el nombre "webgl" sera usado una vez se termine el desarrollo.
 
 En este punto, tienes suficiente código para que el contexto WebGL, inicialice exitosamente, y deberias terminar con una gran cuadro negro y vacio, listo y esperando a recibir contenido .
 
diff --git a/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
index 7f742a4e9d0884..40fac03d4bdb63 100644
--- a/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
+++ b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
@@ -11,7 +11,8 @@ Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lug
 
 La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.
 
-> **Nota:** Es importante señalar que la carga de texturas sigue [reglas de dominio-cruzado](/es/docs/Web/HTTP/Access_control_CORS); Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
+> [!NOTE]
+> Es importante señalar que la carga de texturas sigue [reglas de dominio-cruzado](/es/docs/Web/HTTP/Access_control_CORS); Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
 
 El codigo que carga la textura se ve como esto:
 
@@ -43,7 +44,8 @@ La rutina `initTextures()` comienza por crear el GL texture cubeTexture llamando
 
 Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.
 
-> **Nota:** El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: ["Texturas no potencia de dos"](/es/docs/Web/WebGL/Using_textures_in_WebGL#Non_power-of-two_textures), a continuación.
+> [!NOTE]
+> El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: ["Texturas no potencia de dos"](/es/docs/Web/WebGL/Using_textures_in_WebGL#Non_power-of-two_textures), a continuación.
 
 Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.
 
@@ -187,12 +189,15 @@ La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Par
 
 Ver este articulo [hacks.mozilla.org](http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/) para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un [ejemplo auto-contenido](http://people.mozilla.org/~bjacob/webgltexture-cors-js.html).
 
-> **Nota:** El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en Gecko 8.0.
+> [!NOTE]
+> El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en Gecko 8.0.
 
 Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.
 
-> **Nota:** El soporte de CORS para Canvas 2D drawImage se implementa en Gecko 9.0. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL.
+> [!NOTE]
+> El soporte de CORS para Canvas 2D drawImage se implementa en Gecko 9.0. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL.
 
-> **Nota:** El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en Gecko 12.0.
+> [!NOTE]
+> El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en Gecko 12.0.
 
 {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
diff --git a/files/es/web/api/webrtc_api/session_lifetime/index.md b/files/es/web/api/webrtc_api/session_lifetime/index.md
index 56e485644e96f5..bc457198a9be9d 100644
--- a/files/es/web/api/webrtc_api/session_lifetime/index.md
+++ b/files/es/web/api/webrtc_api/session_lifetime/index.md
@@ -5,7 +5,8 @@ slug: Web/API/WebRTC_API/Session_lifetime
 
 {{DefaultAPISidebar("WebRTC")}}
 
-> **Nota:** WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.
+> [!NOTE]
+> WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.
 
 ## Estableciendo la conexión
 
@@ -25,4 +26,5 @@ LocalMediaStream object
 
 El soporte para WebRTC en Firefox está escondido detrás de un selector de preferencias. Ve a [about:config](/about:config) y establce 'media.navigator.enabled' a 'true'.
 
-> **Nota:** Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: [dom/media/tests/local_video_test.html](http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html). Por favor, prueba también la[demo de servicio de llamadas](http://webrtc-demo.herokuapp.com/mozdemo), la página de su código, y [el código de su servidor](https://github.com/anantn/webrtc-demo/).
+> [!NOTE]
+> Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: [dom/media/tests/local_video_test.html](http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html). Por favor, prueba también la[demo de servicio de llamadas](http://webrtc-demo.herokuapp.com/mozdemo), la página de su código, y [el código de su servidor](https://github.com/anantn/webrtc-demo/).
diff --git a/files/es/web/api/websocket/index.md b/files/es/web/api/websocket/index.md
index 5aca3a617bef8f..a34e38e7111ecb 100644
--- a/files/es/web/api/websocket/index.md
+++ b/files/es/web/api/websocket/index.md
@@ -88,7 +88,8 @@ void close(
 - `SYNTAX_ERR`
   - : La `reason` cadena es demasiado larga o continene caracteres no validos.
 
-> **Nota:** En Gecko, este método no soporta ningun parámetro antes de Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).
+> [!NOTE]
+> En Gecko, este método no soporta ningun parámetro antes de Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).
 
 ### send()
 
@@ -120,7 +121,8 @@ void send(
 - `SYNTAX_ERR`
   - : La data tiene caracteres no válidos que no se pueden decodificar.
 
-> **Nota:** La implementación del método `send()` en el motor de renderizado Gecko puede cambiar de la especificación en Gecko 6.0; Gecko devuelve un `boolean` indicando si la conexión esta todavía abierta (y, por extensión, que los datos son encolados o trasmitidos satisfactoriamente). Esto ha sido corregido en Gecko 8.0.
+> [!NOTE]
+> La implementación del método `send()` en el motor de renderizado Gecko puede cambiar de la especificación en Gecko 6.0; Gecko devuelve un `boolean` indicando si la conexión esta todavía abierta (y, por extensión, que los datos son encolados o trasmitidos satisfactoriamente). Esto ha sido corregido en Gecko 8.0.
 >
 > A partir de Gecko 11.0, implementa {{jsxref("ArrayBuffer")}} pero no tipos de datos {{domxref("Blob")}}.
 
diff --git a/files/es/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.md
index 29416825e2cbc1..6bf4f6668afabb 100644
--- a/files/es/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -7,13 +7,15 @@ slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
 
 WebSockets es una tecnología basada en el protocolo ws, este hace posible establecer una conexión continua full-duplex, entre un cliente y servidor. Un cliente websocket podría ser el navegador del usuario, pero el protocolo es una plataforma independiente.
 
-> **Nota:** Tenemos un ejemplo funcional de un sistema de chat/servidor usado para ejemplos de código que estará disponible una vez nuestra infraestructura esté en posición de hospedar ejemplos de WebSocket apropiadamente.
+> [!NOTE]
+> Tenemos un ejemplo funcional de un sistema de chat/servidor usado para ejemplos de código que estará disponible una vez nuestra infraestructura esté en posición de hospedar ejemplos de WebSocket apropiadamente.
 
 ## Disponibilidad de WebSockets
 
 La API de WebSocket esta disponible para el código JavaScript cuyo alcance DOM sea un objeto {{ domxref("Window") }} o cualquier objeto implementando {{ domxref("WorkerUtils") }}; si es así, puedes usarlos desde los Web Workers.
 
-> **Nota:** La API de WebSockets (y el protocolo subyacente) continúan en activo desarrollo, y existen muchos problemas de compatibilidad entre los navegadores en este momento (e inclusive entre los diferentes lanzamientos del mismo navegador).
+> [!NOTE]
+> La API de WebSockets (y el protocolo subyacente) continúan en activo desarrollo, y existen muchos problemas de compatibilidad entre los navegadores en este momento (e inclusive entre los diferentes lanzamientos del mismo navegador).
 
 ## Creando un Objeto WebSocket
 
@@ -87,7 +89,8 @@ exampleSocket.send("Here's some text that the server is urgently awaiting!");
 
 Puedes enviar información como un string, {{ domxref("Blob") }}, o en un [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer).
 
-> **Nota:** Antes de la version 11, Firefox sólo soportaba el envío de datos como una cadena.
+> [!NOTE]
+> Antes de la version 11, Firefox sólo soportaba el envío de datos como una cadena.
 
 Como la conexión es asincronica y es propensa a fallar, no hay garantia de poder llamar al metodo `send()` inmediatamente despúes de haber creado el objeto WebSocket de manera exitosa. Para enviar información se debe estar seguro de que almenos una conexión ya esta abierta, usando el manejador `onopen`:
 
diff --git a/files/es/web/api/websockets_api/writing_websocket_server/index.md b/files/es/web/api/websockets_api/writing_websocket_server/index.md
index 3807cb15e70cbc..6b275b3be5bade 100644
--- a/files/es/web/api/websockets_api/writing_websocket_server/index.md
+++ b/files/es/web/api/websockets_api/writing_websocket_server/index.md
@@ -15,7 +15,8 @@ Este servidor se ajusta a [RFC 6455](http://tools.ietf.org/html/rfc6455) por lo
 
 WebSocket se comunica a través de conexiones [TCP (Transmission Control Protocol)](https://es.wikipedia.org/wiki/Transmission_Control_Protocol), afortunadamente C# tiene una clase [TcpListener](http://msdn.microsoft.com/es-es/library/system.net.sockets.tcplistener.aspx) la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace _System.Net.Sockets_.
 
-> **Nota:** Es una buena idea usar la instrucción `using` para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.
+> [!NOTE]
+> Es una buena idea usar la instrucción `using` para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.
 
 ### TcpListener
 
@@ -27,7 +28,8 @@ TcpListener(System.Net.IPAddress localaddr, int port)
 
 `localaddr` especifica la IP a escuchar y `port` especifica el puerto.
 
-> **Nota:** Para crear un objeto `IPAddress` desde un `string`, usa el método estático `Parse` de `IPAddres.`
+> [!NOTE]
+> Para crear un objeto `IPAddress` desde un `string`, usa el método estático `Parse` de `IPAddres.`
 
 Métodos:
 
@@ -181,7 +183,8 @@ Opcode _0x1_ significa que es un texto. [Lista completa de Opcodes](http://tools
 
 Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.
 
-> **Nota:** Puedo tomar 128, porque el primer bit siempre es 1.
+> [!NOTE]
+> Puedo tomar 128, porque el primer bit siempre es 1.
 
 \- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.
 
diff --git a/files/es/web/api/websockets_api/writing_websocket_servers/index.md b/files/es/web/api/websockets_api/writing_websocket_servers/index.md
index ee30bc454c37a6..313dcb7e256297 100644
--- a/files/es/web/api/websockets_api/writing_websocket_servers/index.md
+++ b/files/es/web/api/websockets_api/writing_websocket_servers/index.md
@@ -13,7 +13,8 @@ Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación S
 
 Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.
 
-> **Nota:** Lea las últimas especificaciones oficiales de WebSocket [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.
+> [!NOTE]
+> Lea las últimas especificaciones oficiales de WebSocket [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.
 
 Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un [Reverse Proxy](https://en.wikipedia.org/wiki/Reverse_proxy) (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.
 
@@ -21,7 +22,8 @@ Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores Web
 
 Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.
 
-> **Advertencia:** El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS).
+> [!WARNING]
+> El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS).
 
 El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.
 
@@ -42,9 +44,11 @@ El cliente puede solicitar aquí extensiones y/o sub protocolos; vea [Misceláne
 
 Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "[400 Bad Request](/es/docs/HTTP/Response_codes#400)" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el _handshake_ en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera `Sec-WebSocket-Version` que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, `Sec-WebSocket-Key`.
 
-> **Nota:** Todos los **navegadores** deben enviar una [`cabecera Origin`](/es/docs/HTTP/Access_control_CORS#Origin). Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un [403 Forbidden](/es/docs/HTTP/Response_codes#403) si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso `Origin`. La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.
+> [!NOTE]
+> Todos los **navegadores** deben enviar una [`cabecera Origin`](/es/docs/HTTP/Access_control_CORS#Origin). Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un [403 Forbidden](/es/docs/HTTP/Response_codes#403) si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso `Origin`. La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.
 
-> **Nota:** The request-uri (`/chat` here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, `example.com/chat` could invoke a multiuser chat app, while `/game` on the same server might invoke a multiplayer game.
+> [!NOTE]
+> The request-uri (`/chat` here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, `example.com/chat` could invoke a multiuser chat app, while `/game` on the same server might invoke a multiplayer game.
 
 > **Nota:** [Regular HTTP status codes](/es/docs/HTTP/Response_codes) can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).
 
@@ -61,11 +65,13 @@ Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
 
 Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver [Miscelláneos](#Miscellaneous) para más detalles). La cabecera `Sec-WebSocket-Accept` es interesante. El servidor debe derivarla a partir de la cabecera `Sec-WebSocket-Key` enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente `Sec-WebSocket-Key` y el string "`258EAFA5-E914-47DA-95CA-C5AB0DC85B11`" (es un "[magic string](https://en.wikipedia.org/wiki/Magic_string)"), calcular el [hash SHA-1](https://en.wikipedia.org/wiki/SHA-1) del resultado y devolver el string codificado en [base64](https://en.wikipedia.org/wiki/Base64) de este hash.
 
-> **Nota:** Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.
+> [!NOTE]
+> Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.
 
 Así, si la cabecera `Sec-WebSocket-Key` era "`dGhlIHNhbXBsZSBub25jZQ==`", la correspondiente respuesta `Sec-WebSocket-Accept` será "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.
 
-> **Nota:** El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.
+> [!NOTE]
+> El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.
 
 ### Llevando registro de los clientes
 
@@ -154,7 +160,8 @@ At any point after the handshake, either the client or the server can choose to
 
 A ping or pong is just a regular frame, but it's a **control frame**. Pings have an opcode of `0x9`, and pongs have an opcode of `0xA`. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.
 
-> **Nota:** If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.
+> [!NOTE]
+> If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.
 
 ## Step 4: Closing the connection
 
@@ -162,7 +169,8 @@ To close a connection either the client or server can send a control frame with
 
 ## Miscellaneous
 
-> **Nota:** WebSocket codes, extensions, subprotocols, etc. are registered at the [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml).
+> [!NOTE]
+> WebSocket codes, extensions, subprotocols, etc. are registered at the [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml).
 
 WebSocket extensions and subprotocols are negotiated via headers during [the handshake](#Handshake). Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket **frame** and **modify** the payload, while subprotocols structure the WebSocket **payload** and **never modify** anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).
 
@@ -172,13 +180,15 @@ WebSocket extensions and subprotocols are negotiated via headers during [the han
 
 Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the _same_ data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.
 
-> **Nota:** Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.
+> [!NOTE]
+> Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.
 
 ### Subprotocols
 
 Think of a subprotocol as a custom [XML schema](https://en.wikipedia.org/wiki/XML_schema) or [doctype declaration](https://en.wikipedia.org/wiki/Document_Type_Definition). You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.
 
-> **Nota:** Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.
+> [!NOTE]
+> Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.
 
 A client has to ask for a specific subprotocol. To do so, it will send something like this **as part of the original handshake**:
 
@@ -202,13 +212,15 @@ Now the server must pick one of the protocols that the client suggested and it s
 Sec-WebSocket-Protocol: soap
 ```
 
-> **Advertencia:** The server can't send more than one `Sec-Websocket-Protocol` header.
+> [!WARNING]
+> The server can't send more than one `Sec-Websocket-Protocol` header.
 > If the server doesn't want to use any subprotocol, **it shouldn't send any `Sec-WebSocket-Protocol` header**. Sending a blank header is incorrect.
 > The client may close the connection if it doesn't get the subprotocol it wants.
 
 If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol `json`. In this subprotocol, all data is passed as [JSON](https://en.wikipedia.org/wiki/JSON). If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.
 
-> **Nota:** To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: `Sec-WebSocket-Protocol: chat.example.com`. For different versions, a widely-used method is to add a `/` followed by the version number, like `chat.example.com/2.0`. Note that this isn't required, it's just an optional convention, and you can use any string you wish.
+> [!NOTE]
+> To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: `Sec-WebSocket-Protocol: chat.example.com`. For different versions, a widely-used method is to add a `/` followed by the version number, like `chat.example.com/2.0`. Note that this isn't required, it's just an optional convention, and you can use any string you wish.
 
 ## Related
 
diff --git a/files/es/web/api/webvr_api/index.md b/files/es/web/api/webvr_api/index.md
index c9dc3e686192a5..e06d8e3cf020a8 100644
--- a/files/es/web/api/webvr_api/index.md
+++ b/files/es/web/api/webvr_api/index.md
@@ -28,13 +28,15 @@ A typical (simple) WebVR app would work like so:
 
 In addition, WebVR 1.1 adds a number of events on the {{domxref("Window")}} object to allow JavaScript to respond to changes to the status of the display.
 
-> **Nota:** You can find a lot more out about how the API works in our [Using the WebVR API](/es/docs/Web/API/WebVR_API/Using_the_WebVR_API) and [WebVR Concepts](/es/docs/Web/API/WebVR_API/Concepts) articles.
+> [!NOTE]
+> You can find a lot more out about how the API works in our [Using the WebVR API](/es/docs/Web/API/WebVR_API/Using_the_WebVR_API) and [WebVR Concepts](/es/docs/Web/API/WebVR_API/Concepts) articles.
 
 ### Using controllers: Combining WebVR with the Gamepad API
 
 Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the [Gamepad API](/es/docs/Web/API/Gamepad_API), and specifically the [Gamepad Extensions API](/es/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions) that adds API features for accessing [controller pose](/es/docs/Web/API/GamepadPose), [haptic actuators](/es/docs/Web/API/GamepadHapticActuator), and more.
 
-> **Nota:** Our [Using VR controllers with WebVR](/es/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR) article explains the basics of how to use VR controllers with WebVR apps.
+> [!NOTE]
+> Our [Using VR controllers with WebVR](/es/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR) article explains the basics of how to use VR controllers with WebVR apps.
 
 ## WebVR Interfaces
 
diff --git a/files/es/web/api/webvr_api/using_the_webvr_api/index.md b/files/es/web/api/webvr_api/using_the_webvr_api/index.md
index 0202d44b9b15ae..33ba59785bd4ca 100644
--- a/files/es/web/api/webvr_api/using_the_webvr_api/index.md
+++ b/files/es/web/api/webvr_api/using_the_webvr_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/WebVR_API/Using_the_WebVR_API
 
 La API WebVR es una fantástica adición al kit de herramientas del desarrollador web, permitiendo que las escenas de WebGL sean presentadas en pantallas de realidad virtual como el Oculus Rift y HTC Vive. Pero, ¿cómo empezar a desarrollar aplicaciones VR para la Web? Este artículo le guiará a través de los fundamentos.
 
-> **Nota:** La versión más estable de la API de WebVR (1.1) se ha implementado recientemente en Firefox 55 (Windows en versión de lanzamiento y Mac OS X sólo en Nightly) y también está disponible en Chrome cuando se usa con hardware de Google Daydream. También hay una evolución posterior de la especificación 2.0, pero esto está en una etapa temprana ahora mismo. Puede encontrar información sobre el estado más reciente de las especificaciones en [WebVR Spec Version List](https://w3c.github.io/webvr/).
+> [!NOTE]
+> La versión más estable de la API de WebVR (1.1) se ha implementado recientemente en Firefox 55 (Windows en versión de lanzamiento y Mac OS X sólo en Nightly) y también está disponible en Chrome cuando se usa con hardware de Google Daydream. También hay una evolución posterior de la especificación 2.0, pero esto está en una etapa temprana ahora mismo. Puede encontrar información sobre el estado más reciente de las especificaciones en [WebVR Spec Version List](https://w3c.github.io/webvr/).
 
 ## Empezando
 
@@ -31,9 +32,11 @@ Para ilustrar cómo funciona la API de WebVR, estudiaremos nuestro ejemplo raw-w
 
 ![](capture1.png)
 
-> **Nota:** Puedes encontrar el [código fuente de nuestra demo](https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example) en GitHub, y [verlo en vivo](https://mdn.github.io/webvr-tests/raw-webgl-example/)también.
+> [!NOTE]
+> Puedes encontrar el [código fuente de nuestra demo](https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example) en GitHub, y [verlo en vivo](https://mdn.github.io/webvr-tests/raw-webgl-example/)también.
 
-> **Nota:** Si WebVR no funciona en su navegador, es posible que deba asegurarse de que se está ejecutando a través de su tarjeta gráfica. Por ejemplo, para las tarjetas NVIDIA, si el panel de control de NVIDIA se ha configurado correctamente, habrá una opción de menú contextual disponible - haga clic con el botón derecho del ratón en Firefox y seleccione _Ejecutar con procesador gráfico_ > _Procesador NVIDIA de alto rendimiento._
+> [!NOTE]
+> Si WebVR no funciona en su navegador, es posible que deba asegurarse de que se está ejecutando a través de su tarjeta gráfica. Por ejemplo, para las tarjetas NVIDIA, si el panel de control de NVIDIA se ha configurado correctamente, habrá una opción de menú contextual disponible - haga clic con el botón derecho del ratón en Firefox y seleccione _Ejecutar con procesador gráfico_ > _Procesador NVIDIA de alto rendimiento._
 
 Nuestra demo presenta el santo grial de las demostraciones de WebGL - un cubo 3D giratorio. Hemos implementado esto usando raw [WebGL API](/es/docs/Web/API/WebGL_API) código. No enseñaremos ningún JavaScript básico o WebGL, solo las partes de WebVR.
 
@@ -44,7 +47,8 @@ Nuestra demo también cuenta con:
 
 Cuando miras a través del código fuente de[nuestro archivo JavaScript principal de demostraciones](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) , puede encontrar fácilmente las partes específicas de WebVR buscando la cadena "WebVR" en comentarios anteriores.
 
-> **Nota:** Para obtener más información sobre JavaScript básico y WebGL, consulte nuestro [material de aprendizaje JavaScrip](/es/docs/Learn/JavaScript) , y nuestro [WebGL Tutorial](/es/docs/Web/API/WebGL_API/Tutorial).
+> [!NOTE]
+> Para obtener más información sobre JavaScript básico y WebGL, consulte nuestro [material de aprendizaje JavaScrip](/es/docs/Learn/JavaScript) , y nuestro [WebGL Tutorial](/es/docs/Web/API/WebGL_API/Tutorial).
 
 ## ¿Como funciona?
 
@@ -150,7 +154,8 @@ Inside the promise `then()` block, we check whether the array length is more tha
           console.log('Display found');
 ```
 
-> **Nota:** Es poco probable que tenga varias pantallas VR conectadas a su computadora, y esto es sólo una demostración simple, por lo que esto lo hará por ahora.
+> [!NOTE]
+> Es poco probable que tenga varias pantallas VR conectadas a su computadora, y esto es sólo una demostración simple, por lo que esto lo hará por ahora.
 
 ### Starting and stopping the VR presentation
 
diff --git a/files/es/web/api/window/beforeunload_event/index.md b/files/es/web/api/window/beforeunload_event/index.md
index 6f7f92551998ed..d9bf786586dba9 100644
--- a/files/es/web/api/window/beforeunload_event/index.md
+++ b/files/es/web/api/window/beforeunload_event/index.md
@@ -9,7 +9,8 @@ El evento **beforeunload** es disparado cuando la ventana, el documento y sus re
 
 Si es asignado un string a la propiedad del objeto Evento returnValue, una caja de dialogo aparece, preguntando al usuario que confirme que dejara la pagina(mirar el ejemplo de abajo). Algunos navegadores muestran el string devuelto en una caja de dialogos, otros muestran un mensaje fijo. Si no se provee ningun valor, el evento procede silenciosamente.
 
-> **Nota:** Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.
+> [!NOTE]
+> Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.
 
 <table class="properties">
   <tbody>
diff --git a/files/es/web/api/window/cancelanimationframe/index.md b/files/es/web/api/window/cancelanimationframe/index.md
index 86f968ea8126fb..76ea836ebfe98f 100644
--- a/files/es/web/api/window/cancelanimationframe/index.md
+++ b/files/es/web/api/window/cancelanimationframe/index.md
@@ -15,7 +15,8 @@ Cancela la petición de animación previamente programada a través de {{domxref
 window.cancelAnimationFrame(requestID);
 ```
 
-> **Nota:** Antes de Firefox 23, la función es independiente del proveedor con el prefijo `window.mozCancelAnimationFrame()`. Consulte la tabla de compatibilidad, a continuación, para otras implementaciones de navegador.
+> [!NOTE]
+> Antes de Firefox 23, la función es independiente del proveedor con el prefijo `window.mozCancelAnimationFrame()`. Consulte la tabla de compatibilidad, a continuación, para otras implementaciones de navegador.
 
 ### Parámetros
 
diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index 554dd3a5b134db..e4fbdce5a98717 100644
--- a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -26,7 +26,8 @@ Las propiedades que veremos en esta guía son las siguientes.
 
 También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox
 
-> **Nota:** Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.
+> [!NOTE]
+> Las propiedades de alineación en Flexbox se han colocado en su propia especificación — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.
 
 ## El eje transversal
 
@@ -100,7 +101,8 @@ Una vez mas podemos cambiar nuestra `flex-direction` a `column` para ver como es
 
 {{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}
 
-> **Nota:** El valor `space-evenly` no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.
+> [!NOTE]
+> El valor `space-evenly` no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.
 
 Revise la [documentacion para `justify-content` en MDN](/es/docs/Web/CSS/justify-content) para encontrar más detalles de todos sus valores y el soporte de los navegadores.
 
diff --git a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
index 200abf30e1ba4c..53cd2ccc864bc0 100644
--- a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
+++ b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
@@ -141,7 +141,8 @@ Así como la propiedad `flex-grow` se encarga de añadir espacio sobre el eje pr
 
 El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.
 
-> **Nota:** Nótese que los valores de `flex-grow` y `flex-shrink` son proporciones. Típicamente si pusiéramos todos los ítems flex: `1 1 200px` y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: `2 1 200px`. Aunque igualmente podemos colocar flex: `10 1 200px` y flex: `20 1 200px` si quisiéramos.
+> [!NOTE]
+> Nótese que los valores de `flex-grow` y `flex-shrink` son proporciones. Típicamente si pusiéramos todos los ítems flex: `1 1 200px` y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: `2 1 200px`. Aunque igualmente podemos colocar flex: `10 1 200px` y flex: `20 1 200px` si quisiéramos.
 
 ### Valores abreviados para las propiedades flex
 
diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index 0ac4a29f6381db..c935c0e7392677 100644
--- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -429,7 +429,8 @@ Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear us
 }
 ```
 
-> **Nota:** Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo `grid-` como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.
+> [!NOTE]
+> Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo `grid-` como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.
 
 ```html
 <div class="wrapper">
@@ -542,7 +543,8 @@ En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Co
 
 En la especificación de grid de nivel 1 hay una característica llamada _subgrid_ que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.
 
-> **Nota:** Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.
+> [!NOTE]
+> Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.
 
 En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar `display: subgrid` en lugar de `display: grid`, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.
 
diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
index 8c76c592ffa81b..82a055bf8fc0d0 100644
--- a/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
+++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_meth
 
 CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta _Grid_ junto con otras técnicas que ya se estén usando.
 
-> **Nota:** Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será _Grid_.
+> [!NOTE]
+> Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será _Grid_.
 
 ## Grid y flexbox
 
diff --git a/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md b/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
index 300dfa58a340b9..86ef6169b4b452 100644
--- a/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
+++ b/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
@@ -51,7 +51,8 @@ Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos
 
 Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores.
 
-> **Nota:** CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es [#1282](https://github.com/w3c/csswg-drafts/issues/1282).
+> [!NOTE]
+> CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es [#1282](https://github.com/w3c/csswg-drafts/issues/1282).
 
 ### Pruebas para el soporte en navegadores
 
diff --git a/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md b/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
index bef2e02e7f86bd..6b5d74ac021f3e 100644
--- a/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
+++ b/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
@@ -60,7 +60,8 @@ Al igual que con otras propiedades en la especificación, tenemos algunas propie
 - {{cssxref("inset-inline")}} — pone los dos en línea juntos.
 - {{cssxref("inset-block")}} — pone los dos bloques juntos.
 
-> **Nota:** Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.
+> [!NOTE]
+> Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.
 
 ## Ejemplo: Valores lógicos para text-align
 
diff --git a/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md b/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md
index 182f209b29c65e..f669cb9381dc8b 100644
--- a/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md
+++ b/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md
@@ -87,7 +87,8 @@ En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba d
 }
 ```
 
-> **Nota:** Las propiedades abreviadas `margin-inline` y `margin-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
+> [!NOTE]
+> Las propiedades abreviadas `margin-inline` y `margin-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
 
 ## Ejemplos para rellenos (Paddings)
 
@@ -113,7 +114,8 @@ En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba
 }
 ```
 
-> **Nota:** Las abreviaciones de las propiedades `padding-inline` y `padding-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
+> [!NOTE]
+> Las abreviaciones de las propiedades `padding-inline` y `padding-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
 
 ## Ejemplos para bordes
 
@@ -136,7 +138,8 @@ Hay valores abreviados de dos valores para establecer el ancho, el estilo y el c
 }
 ```
 
-> **Nota:** Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.
+> [!NOTE]
+> Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.
 
 ### Flujo de propiedades relativas del border-radius
 
diff --git a/files/es/web/css/css_media_queries/using_media_queries/index.md b/files/es/web/css/css_media_queries/using_media_queries/index.md
index fd1c69d2b41c18..d2192fb763b8c7 100644
--- a/files/es/web/css/css_media_queries/using_media_queries/index.md
+++ b/files/es/web/css/css_media_queries/using_media_queries/index.md
@@ -12,7 +12,8 @@ Las _media queries_ se utilizan para lo siguiente:
 - Para segmentar medios específicos para {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros [HTML](/es/docs/Web/HTML) con el atributo `media=`.
 - Para [probar y monitorear los estados de los medios](/es/docs/Web/CSS/Media_Queries/Testing_media_queries) usando los métodos {{domxref("Window.matchMedia()")}} y {{domxref("EventTarget.addEventListener()")}}.
 
-> **Nota:** Los ejemplos en esta página usan `@media` de CSS con fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios.
+> [!NOTE]
+> Los ejemplos en esta página usan `@media` de CSS con fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios.
 
 ## Sintaxis
 
@@ -65,7 +66,8 @@ Las consultas de medios no distinguen entre mayúsculas y minúsculas.
 Una _media query_ se calcula como `true` cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se muestra un documento y todas las expresiones de características de medios se computan como verdaderas.
 Las consultas que involucran tipos de medios desconocidos siempre son falsas.
 
-> **Nota:** Una hoja de estilo con una _media query_ adjunta a su etiqueta {{HTMLElement("link")}} [se descargará](https://scottjehl.github.io/CSS-Download-Tests/) incluso si la consulta devuelve `false`, la descarga se realizará pero la prioridad de la descarga será mucho menor.
+> [!NOTE]
+> Una hoja de estilo con una _media query_ adjunta a su etiqueta {{HTMLElement("link")}} [se descargará](https://scottjehl.github.io/CSS-Download-Tests/) incluso si la consulta devuelve `false`, la descarga se realizará pero la prioridad de la descarga será mucho menor.
 > No obstante, su contenido no se aplicará a menos que y hasta que el resultado de la consulta cambie a `true`.
 > Puede leer por qué sucede esto en el blog de Tomayac [Por qué el navegador descarga hojas de estilo con consultas de medios que no coinciden](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-consultas-eb61b91b85a2).
 
@@ -136,7 +138,8 @@ En el ejemplo anterior, ya vimos el operador `and` usado para agrupar un _tipo_
 El operador `and` también puede combinar múltiples características de medios en una sola _media query_. Mientras tanto, el operador `not` niega una _media query_, básicamente invirtiendo su significado normal.
 El operador `only` evita que los navegadores antiguos apliquen los estilos.
 
-> **Nota:** En la mayoría de los casos, el tipo de medios `all` se usa de forma predeterminada cuando no se especifica ningún otro tipo.
+> [!NOTE]
+> En la mayoría de los casos, el tipo de medios `all` se usa de forma predeterminada cuando no se especifica ningún otro tipo.
 > Sin embargo, si usa los operadores `not` u `only`, debe especificar explícitamente un tipo de medio.
 
 ### Combinación de múltiples tipos o características
@@ -233,7 +236,8 @@ _No tiene efecto en los navegadores modernos._
 La especificación Media Queries Level 4 incluye algunas mejoras de sintaxis para hacer que las _media queries_ utilicen características que tienen un tipo de "rango", por ejemplo, ancho o alto, menos detallado.
 El nivel 4 agrega un _contexto de rango_ para escribir tales consultas. Por ejemplo, usando la funcionalidad `max-` para el ancho, podríamos escribir lo siguiente:
 
-> **Nota:** La especificación Media Queries Level 4 tiene un soporte razonable en los navegadores modernos, pero algunas características multimedia no son compatibles.
+> [!NOTE]
+> La especificación Media Queries Level 4 tiene un soporte razonable en los navegadores modernos, pero algunas características multimedia no son compatibles.
 > Consulte la [tabla de compatibilidad del navegador de `@media`](/es/docs/Web/CSS/@media#browser_compatibility) para obtener más detalles.
 
 ```css
diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
index 52d585b06e3ebe..a1e59cda437df8 100644
--- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
+++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
@@ -35,7 +35,8 @@ En resumen:
 - Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
 - Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
 
-> **Nota:** La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
+> [!NOTE]
+> La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
 
 ## El ejemplo
 
@@ -55,7 +56,7 @@ En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento
 
 Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.
 
-> **Nota:**
+> [!NOTE]
 >
 > - DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
 > - Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.
diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
index 037ed070e45b7f..23a61c12509fff 100644
--- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
+++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
@@ -30,7 +30,8 @@ En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente
   - DIV #2 (z-index 1)
   - DIV #4 (z-index 2)
 
-> **Nota:** El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
+> [!NOTE]
+> El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
 
 ## Ejemplo
 
diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
index 48524210e14bef..23542138063897 100644
--- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
+++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
@@ -22,7 +22,8 @@ Para entender mejor esta situación, esta es la jerarquía del contexto de apila
 
     - DIV #4 (z-index 10)
 
-> **Nota:** Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+> [!NOTE]
+> Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
 
 ### Código fuente de ejemplo
 
diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
index ccfaa1572507fe..5fcbdee35b0d48 100644
--- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
+++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
@@ -41,7 +41,8 @@ Para entender mejor la situación, esta es la jerarquía del contexto de apilami
 
 Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.
 
-> **Nota:** En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+> [!NOTE]
+> En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
 
 ### Código fuente de ejemplo
 
diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
index 74333363146675..08cb7d4be4687c 100644
--- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
+++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
@@ -24,7 +24,8 @@ Este comportamiento puede ser explicado con una versión mejorada de la lista pr
 4. Descendientes en línea en el flujo normal
 5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
 
-> **Nota:** En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
+> [!NOTE]
+> En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
 
 ## Código fuente de ejemplo
 
diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
index 1cf752b59b150f..1bd5e29be57946 100644
--- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
+++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
@@ -15,7 +15,7 @@ Cuando ningún elemento tiene z-index, los elementos son apilados en este orden
 
 En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.
 
-> **Nota:**
+> [!NOTE]
 >
 > - Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
 > - Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.
diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
index 098b4d3e151647..f920ce3f02aa7a 100644
--- a/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
+++ b/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
@@ -13,7 +13,7 @@ El primer ejemplo, [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/enten
 
 Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.
 
-> **Advertencia:** z-index solo tiene efecto si un elemento es [posicionado](/es/CSS/position).
+> **Advertencia:** `z-index` solo tiene efecto si un elemento es [posicionado](/es/CSS/position).
 
 - _bottom: el más lejano al observador_
 - ...
@@ -27,7 +27,7 @@ Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál r
 - ...
 - _top: el más cercano al observador_
 
-> **Nota:**
+> [!NOTE]
 >
 > - Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).
 > - Si varios elementos comparten el mismo valor z-index (_i.e._ están situados en la misma capa), las reglas de apilamiento explicadas en la sección [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) son aplicadas.
diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.md b/files/es/web/css/css_transitions/using_css_transitions/index.md
index c15cbb958ee274..bbc1241cc176fb 100644
--- a/files/es/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/es/web/css/css_transitions/using_css_transitions/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_transitions/Using_CSS_transitions
 
 Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.
 
-> **Nota:** como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como `-moz-transition`, `-webkit-transition` y `-o-transition`.
+> [!NOTE]
+> Como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como `-moz-transition`, `-webkit-transition` y `-o-transition`.
 
 ## Las propiedades de transición CSS
 
@@ -39,13 +40,15 @@ Como es habitual, puedes usar el método {{ domxref("element.addEventListener()"
 el.addEventListener("transitionend", updateTransition, true);
 ```
 
-> **Nota:** el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.
+> [!NOTE]
+> El evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.
 
 ## Propiedades que pueden ser animadas
 
 Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.
 
-> **Nota:** el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.
+> [!NOTE]
+> El conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.
 
 | Propiedad                                                       | Tipo de valor                                                                                             |
 | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
@@ -377,7 +380,8 @@ Los valores de color aquí se han cambiado para hacer que los colores de fondo y
 
 Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.
 
-> **Nota:** una vez que [la compatibilidad para las animaciones](http://dev.w3.org/csswg/css3-animations/) CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
+> [!NOTE]
+> Una vez que [la compatibilidad para las animaciones](http://dev.w3.org/csswg/css3-animations/) CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
 
 En primer lugar, la función `runDemo()` que se llama cuando el documento se carga para inicializar la secuencia de animación:
 
diff --git a/files/es/web/css/flex-basis/index.md b/files/es/web/css/flex-basis/index.md
index 0e29c77d7c87d0..e39629789b23c1 100644
--- a/files/es/web/css/flex-basis/index.md
+++ b/files/es/web/css/flex-basis/index.md
@@ -42,9 +42,11 @@ flex-basis: unset;
 
   - : Indica el dimensionamiento automático, basado en el contenido del elemento flexible.
 
-    > **Nota:** Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando `auto` junto con un tamaño principal ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) o [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) en auto.
+    > [!NOTE]
+    > Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando `auto` junto con un tamaño principal ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) o [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) en auto.
 
-    > **Nota:** Breve historia
+    > [!NOTE]
+    > Breve historia
     >
     > - Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".
     > - Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en [bug 1032922](https://bugzilla.mozilla.org/show_bug.cgi?id=1032922).
diff --git a/files/es/web/css/font-variant-alternates/index.md b/files/es/web/css/font-variant-alternates/index.md
index 32d6bfd7d1a78d..79b93c214c6b0d 100644
--- a/files/es/web/css/font-variant-alternates/index.md
+++ b/files/es/web/css/font-variant-alternates/index.md
@@ -50,7 +50,8 @@ font-variant-alternates: unset;
 
   - : Esta función habilita la muestra de ornamentas, que son [florones](http://en.wikipedia.org/wiki/Fleuron_%28typography%29) y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType `ornm`, como `ornm 2`.
 
-    > **Nota:** para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.
+    > [!NOTE]
+    > Para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.
 
 - `annotation()`
   - : Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType `nalt`, como `nalt 2`.
diff --git a/files/es/web/css/grid-auto-columns/index.md b/files/es/web/css/grid-auto-columns/index.md
index 947da6f2152caa..42a993c35659ea 100644
--- a/files/es/web/css/grid-auto-columns/index.md
+++ b/files/es/web/css/grid-auto-columns/index.md
@@ -83,7 +83,8 @@ grid-auto-columns: unset;
 
   - : Es una palabra reservada -o keyword- que es idéntica a contenido máximo si es un máximo. Como mínimo representa el máximo valor mínimo aceptado (según lo especificado por{{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula.
 
-    > **Nota:** Note: Los valores de tamaño `auto` (y solo los `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .
+    > [!NOTE]
+    > Los valores de tamaño `auto` (y solo los `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .
 
 ### Sintaxis Formal
 
diff --git a/files/es/web/css/grid-auto-rows/index.md b/files/es/web/css/grid-auto-rows/index.md
index 9fd24f4c8edec3..5fb1ea3787ef9a 100644
--- a/files/es/web/css/grid-auto-rows/index.md
+++ b/files/es/web/css/grid-auto-rows/index.md
@@ -73,7 +73,8 @@ Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño expl
 
   - : Es una palabra clave que es identica a contenido máximo si es un máximo. Como mínimo representa el valor mínimo más grande (como esté especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la grilla que ocupan la pista de la grilla.
 
-    > **Nota:** Nota: los tamaños de la pista `auto` (y sólo los tamaños de la pista `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}.
+    > [!NOTE]
+    > Los tamaños de la pista `auto` (y sólo los tamaños de la pista `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}.
 
 ### Formal syntax
 
diff --git a/files/es/web/css/grid-template-columns/index.md b/files/es/web/css/grid-template-columns/index.md
index d6b0346a5d8e3f..2017c0bf42c1db 100644
--- a/files/es/web/css/grid-template-columns/index.md
+++ b/files/es/web/css/grid-template-columns/index.md
@@ -63,7 +63,8 @@ grid-template-columns: unset;
 
   - : Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.
 
-    > **Nota:** Nota: Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}.
+    > [!NOTE]
+    > Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}.
 
 - `{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}`
   - : Representa la fórmula `min(max-content, max(auto, argument))`, que se calcula de forma similar a `auto` (es decir, `minmax(auto, max-content)`), excepto que el tamaño de la vía se fija a _argument_ si es mayor que el mínimo.
diff --git a/files/es/web/css/grid-template-rows/index.md b/files/es/web/css/grid-template-rows/index.md
index 6c6194bd2859e4..70ffc4e38df8c2 100644
--- a/files/es/web/css/grid-template-rows/index.md
+++ b/files/es/web/css/grid-template-rows/index.md
@@ -70,7 +70,8 @@ Esta propiedad puede especificarse como:
 
   - : Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.
 
-    > **Nota:** Nota: Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}.
+    > [!NOTE]
+    > Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}.
 
 - {{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
   - : Representa la fórmula `min(max-content, max(auto, argument))`, que se calcula de forma similar a `auto` (es decir, `minmax(auto, max-content)`), excepto que el tamaño de la vía se fija a _argument_ si es mayor que el mínimo `auto`.
@@ -79,7 +80,8 @@ Esta propiedad puede especificarse como:
 - [subgrid](/es/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
   - : El valor `subgrid` indica que la cuadrícula adoptara la porción que ocupa su cuadrícula principal (padre) en ese eje. En lugar de ser indicado de forma explícita, los tamaños de la las filas y columnas de la cuadrícula se tomarán de la definición de la cuadrícula superior.
 
-> **Advertencia:** El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores.
+> [!WARNING]
+> El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores.
 
 ### Sintaxis formal
 
diff --git a/files/es/web/css/grid/index.md b/files/es/web/css/grid/index.md
index 153a4f974ea319..1c155b3b4e53da 100644
--- a/files/es/web/css/grid/index.md
+++ b/files/es/web/css/grid/index.md
@@ -37,7 +37,8 @@ grid: initial;
 grid: unset;
 ```
 
-> **Nota:** Sólo se pueden especificar las propiedades explícitas **_o bien_** las propiedades implícitas en una sola declaración `grid`. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo.
+> [!NOTE]
+> Sólo se pueden especificar las propiedades explícitas **_o bien_** las propiedades implícitas en una sola declaración `grid`. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo.
 
 {{cssinfo}}
 
diff --git a/files/es/web/css/hyphens/index.md b/files/es/web/css/hyphens/index.md
index c7410317009db1..6077e67b29e9ed 100644
--- a/files/es/web/css/hyphens/index.md
+++ b/files/es/web/css/hyphens/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/hyphens
 
 Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo [`lang`](/es/docs/Web/HTML/Global_attributes/lang) y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado. En XML debe usarse el atributo `xml:lang.`
 
-> **Nota:** Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro.
+> [!NOTE]
+> Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro.
 
 ## Sintaxis
 
@@ -34,7 +35,8 @@ La propiedad `hyphens` se especifica con una única palabra de la lista a contin
 - `auto`
   - : El navegador es libre de separar palabras en puntos de separación apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separación de línea (ver [Sugiriendo oportunidades de separación de línea](#sugiriendo_oportunidades_de_separación_de_línea) más abajo) anularán la separación automática cuando exista.
 
-> **Nota:** El comportamiento del valor `auto` dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo `lang` de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma.
+> [!NOTE]
+> El comportamiento del valor `auto` dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo `lang` de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma.
 
 ### Sintaxis formal
 
diff --git a/files/es/web/css/image-rendering/index.md b/files/es/web/css/image-rendering/index.md
index 1fd70950748dd1..ed29aa9e7982e3 100644
--- a/files/es/web/css/image-rendering/index.md
+++ b/files/es/web/css/image-rendering/index.md
@@ -21,7 +21,8 @@ image-rendering: unset;
 
 Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista en otra propiedad del elemento. No tiene efecto alguno en imágenes no-escaladas. Por ejemplo, si el tamaño natural de una imágen es _100×100px pero el autor de la página especifica sus dimenciones como_ `200×200px` (o `50×50px`), entonces la imágen se escalará (en cualquiér dirección) a sus nuevas dimensiones usando el algoritmo especificado. El escalado podría también aplicar por interacción del usuario (cambiando la escala).
 
-> **Nota:** Un Canvas puede proveer una [solución de respaldo para crisp-edge/optimize-contrast](http://phrogz.net/tmp/canvas_image_zoom.html) a través de la manipulación manual de datos de la imagen.
+> [!NOTE]
+> Un Canvas puede proveer una [solución de respaldo para crisp-edge/optimize-contrast](http://phrogz.net/tmp/canvas_image_zoom.html) a través de la manipulación manual de datos de la imagen.
 
 {{cssinfo}}
 
@@ -39,7 +40,8 @@ Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista
 - **`pixelated`**
   - : Al escalar la imagen, se debe usar el algoritmo de vecino más cercano, de modo que la imagen parezca estar compuesta de píxeles grandes. Cuando se reduce la escala, esto es lo mismo que 'auto'.
 
-> **Nota:** Los valores `optimizeQuality` y `optimizeSpeed` presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor `auto`.
+> [!NOTE]
+> Los valores `optimizeQuality` y `optimizeSpeed` presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor `auto`.
 
 ### Formal syntax
 
diff --git a/files/es/web/css/image/index.md b/files/es/web/css/image/index.md
index 52ed8e6cd0beb5..b8af4908d954d8 100644
--- a/files/es/web/css/image/index.md
+++ b/files/es/web/css/image/index.md
@@ -34,7 +34,8 @@ El tamaño concreto del objeto es calculado usando los siguientes algoritmos:
 
 Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("cursor")}}.
 
-> **Nota:** No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de [compatibilidad de navegadores](#Compatibilidad_de_navegadores) para una lista detallada.
+> [!NOTE]
+> No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de [compatibilidad de navegadores](#Compatibilidad_de_navegadores) para una lista detallada.
 
 ## Sintáxis
 
diff --git a/files/es/web/css/justify-content/index.md b/files/es/web/css/justify-content/index.md
index fb38d769d0b0a9..147a04c2db5840 100644
--- a/files/es/web/css/justify-content/index.md
+++ b/files/es/web/css/justify-content/index.md
@@ -11,7 +11,8 @@ La propiedad [CSS](/es/docs/CSS) **`justify-content`** define cómo el navegador
 
 El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con {{cssxref("flex-grow")}} diferente a 0, no tendrá efecto ya que no habrá espacio disponible.
 
-> **Nota:** No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para [extender su uso a cualquier elemento en bloque](http://dev.w3.org/csswg/css3-align/#justify-content). La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.
+> [!NOTE]
+> No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para [extender su uso a cualquier elemento en bloque](http://dev.w3.org/csswg/css3-align/#justify-content). La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.
 
 {{cssinfo}}
 
diff --git a/files/es/web/css/layout_cookbook/index.md b/files/es/web/css/layout_cookbook/index.md
index 2b130fa14f3fcc..18185e29e17e78 100644
--- a/files/es/web/css/layout_cookbook/index.md
+++ b/files/es/web/css/layout_cookbook/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/Layout_cookbook
 
 El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador.
 
-> **Nota:** Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro [módulo de aprendizaje de diseño CSS](/es/docs/Learn/CSS/CSS_layout), ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.
+> [!NOTE]
+> Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro [módulo de aprendizaje de diseño CSS](/es/docs/Learn/CSS/CSS_layout), ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.
 
 ## Las recetas
 
diff --git a/files/es/web/css/layout_mode/index.md b/files/es/web/css/layout_mode/index.md
index 07b693094d9bf3..2015d375fee066 100644
--- a/files/es/web/css/layout_mode/index.md
+++ b/files/es/web/css/layout_mode/index.md
@@ -14,7 +14,8 @@ Un **modo de diseño** [CSS](/es/docs/Web/CSS)(CSS layout mode), a veces simplem
 - El _[flexible box layout](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox)_, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.
 - El _[grid layout](/es/docs/Web/CSS/CSS_Grid_Layout)_, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).
 
-> **Nota:** No todas las [propiedades CSS](/es/docs/Web/CSS/Referencia_CSS) aplican a todos los _**modos de diseño**_. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.
+> [!NOTE]
+> No todas las [propiedades CSS](/es/docs/Web/CSS/Referencia_CSS) aplican a todos los _**modos de diseño**_. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.
 
 ## Ver También
 
diff --git a/files/es/web/css/length/index.md b/files/es/web/css/length/index.md
index 4cb24a8d67f95c..b8c2716f790b2c 100644
--- a/files/es/web/css/length/index.md
+++ b/files/es/web/css/length/index.md
@@ -27,7 +27,8 @@ Los valores de tipo `<length>` pueden ser interpolados para permitir animaciones
 
   - : Esta unidad representa el tamaño calculado de fuente ({{Cssxref("font-size")}}) del elemento. Si se usa dentro de la propiedad {{Cssxref("font-size")}}, representa el tamaño de fuente _heredado_ por el elemento.
 
-    > **Nota:** Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el [ritmo vertical de la página](http://24ways.org/2006/compose-to-a-vertical-rhythm), aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en **em**.
+    > [!NOTE]
+    > Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el [ritmo vertical de la página](http://24ways.org/2006/compose-to-a-vertical-rhythm), aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en **em**.
 
 - `ex`
   - : Esta unidad representa la [altura de la x](https://es.wikipedia.org/wiki/Altura_de_la_x) de la fuente ({{Cssxref("font")}}) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; `1ex ≈ 0.5em` en muchas fuentes.
@@ -37,7 +38,8 @@ Los valores de tipo `<length>` pueden ser interpolados para permitir animaciones
 
   - : Esta unidad representa el tamaño ({{Cssxref("font-size")}}) del elemento raíz (p.ej. el tamaño de fuente del elemento {{HTMLElement("html")}}). Cuando se aplica a {{Cssxref("font-size")}} del elemento raíz, representa su valor inicial.
 
-    > **Nota:** Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades **em**, aunque estas son ligeramente más complejas.
+    > [!NOTE]
+    > Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades **em**, aunque estas son ligeramente más complejas.
 
 #### Longitudes de porcentaje del viewport
 
@@ -64,7 +66,8 @@ Para dispositivos de ppp bajo, la unidad **px** representa el _píxel de referen
 
 Para dispositivos de alto ppp, las pulgadas (`in`), centrímetros (`cm`), milímetros (`mm`) son definidos como su contraparte física. De esta forma, la unidad **px** es definida con relación a ellas (1/96 de 1 pulgada).
 
-> **Nota:** Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como `em` o `rem`.
+> [!NOTE]
+> Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como `em` o `rem`.
 
 - `px`
   - : Relativa al dispositivo de visualización.
@@ -87,7 +90,8 @@ Para dispositivos de alto ppp, las pulgadas (`in`), centrímetros (`cm`), milím
 
 ## Unidades CSS y puntos por pulgada (dots-per-inch)
 
-> **Nota:** La unidad `in` no representa una pulgada física en pantalla, sino `96px`. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán `96ppp`. En dispositivos con mayor densidad de píxeles, `1in` será menor que una pulgada física. De forma similar, `mm`, `cm`, y `pt` no son longitudes absolutas.
+> [!NOTE]
+> La unidad `in` no representa una pulgada física en pantalla, sino `96px`. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán `96ppp`. En dispositivos con mayor densidad de píxeles, `1in` será menor que una pulgada física. De forma similar, `mm`, `cm`, y `pt` no son longitudes absolutas.
 
 Algunos ejemplos específicos:
 
diff --git a/files/es/web/css/max-block-size/index.md b/files/es/web/css/max-block-size/index.md
index 3d5681d370e648..cfc5a760c9c176 100644
--- a/files/es/web/css/max-block-size/index.md
+++ b/files/es/web/css/max-block-size/index.md
@@ -65,9 +65,11 @@ Los valores de `writing-mode` afectan al mapeo de `max-block-size` a `max-width`
 | `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}}     | {{cssxref("max-height")}}         |
 | `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | {{cssxref("max-width")}}          |
 
-> **Nota:** Los valores de `writing-mode`: `sideways-lr` y `sideways-rl`, fueron eliminados de la especificación de escritura de nivel 3 de CSS en el proceso de diseño de sucesión. Pueden ser restaurados en el nivel 4.
+> [!NOTE]
+> Los valores de `writing-mode`: `sideways-lr` y `sideways-rl`, fueron eliminados de la especificación de escritura de nivel 3 de CSS en el proceso de diseño de sucesión. Pueden ser restaurados en el nivel 4.
 
-> **Nota:** Los modos de escritura `lr`, `lr-tb`, `rl`, `rb`, y `rb-tl` ya no están permitidos en contextos {{Glossary("HTML")}}; sólo se pueden usar en contextos 1.x {{Glossary("SVG")}}.
+> [!NOTE]
+> Los modos de escritura `lr`, `lr-tb`, `rl`, `rb`, y `rb-tl` ya no están permitidos en contextos {{Glossary("HTML")}}; sólo se pueden usar en contextos 1.x {{Glossary("SVG")}}.
 
 ## Definición formal
 
diff --git a/files/es/web/css/overflow-y/index.md b/files/es/web/css/overflow-y/index.md
index 83f64f07999654..b2291b5a6be31d 100644
--- a/files/es/web/css/overflow-y/index.md
+++ b/files/es/web/css/overflow-y/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/overflow-y
 
 La propiedad [CSS](/es/docs/Web/CSS) **`overflow-y`** define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.
 
-> **Nota:** Si {{cssxref("overflow-x")}} es `hidden`, `scroll` o `auto` y esta propiedad es `visible` (por defecto) se calculará implícitamente como `auto`.
+> [!NOTE]
+> Si {{cssxref("overflow-x")}} es `hidden`, `scroll` o `auto` y esta propiedad es `visible` (por defecto) se calculará implícitamente como `auto`.
 
 {{EmbedInteractiveExample("pages/css/overflow-y.html")}}
 
diff --git a/files/es/web/css/padding/index.md b/files/es/web/css/padding/index.md
index 15fc90ea162b75..61492bbeb27377 100644
--- a/files/es/web/css/padding/index.md
+++ b/files/es/web/css/padding/index.md
@@ -13,7 +13,8 @@ La [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) de [CSS](/es/doc
 
 El área de relleno de un elemento es el espacio entre su contenido y su borde.
 
-> **Nota:** El relleno crea espacio adicional dentro de un elemento. Por el contrario, {{cssxref("margin")}} crea espacio extra _alrededor_ de un elemento.
+> [!NOTE]
+> El relleno crea espacio adicional dentro de un elemento. Por el contrario, {{cssxref("margin")}} crea espacio extra _alrededor_ de un elemento.
 
 ## Propiedades constituyentes
 
diff --git a/files/es/web/css/percentage/index.md b/files/es/web/css/percentage/index.md
index 6a723318451656..396bb598f77ff6 100644
--- a/files/es/web/css/percentage/index.md
+++ b/files/es/web/css/percentage/index.md
@@ -11,7 +11,8 @@ Los tipos de dato `<porcentaje>` de [CSS](/en/CSS) representan un valor en forma
 
 Varias propriedades de longitud usan porcentajes, tales como `width, margin` y `padding`. Los porcentajes tambien se pueden ver en `font-size`, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.
 
-> **Nota:** Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor `<length>,`sera accesible en la propiedad heredada, no el valor porcentual.
+> [!NOTE]
+> Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor `<length>,`sera accesible en la propiedad heredada, no el valor porcentual.
 
 ## Interpolación
 
diff --git a/files/es/web/css/pseudo-classes/index.md b/files/es/web/css/pseudo-classes/index.md
index 51faf080c6a2f1..2b439285e158f9 100644
--- a/files/es/web/css/pseudo-classes/index.md
+++ b/files/es/web/css/pseudo-classes/index.md
@@ -15,7 +15,8 @@ div:hover {
 
 Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador ({{ cssxref(":visited") }}, por ejemplo), el estado de su contenido (como {{ cssxref(":checked") }} en algunos elementos de formulario), o la posición del ratón (como {{ cssxref(":hover") }} que permite saber si el ratón está encima de un elemento o no).
 
-> **Nota:** En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una _parte específica_ de un elemento.
+> [!NOTE]
+> En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una _parte específica_ de un elemento.
 
 ## Sintaxis
 
diff --git a/files/es/web/css/pseudo-elements/index.md b/files/es/web/css/pseudo-elements/index.md
index 5895c775e29179..a5033ec3e4562d 100644
--- a/files/es/web/css/pseudo-elements/index.md
+++ b/files/es/web/css/pseudo-elements/index.md
@@ -34,7 +34,8 @@ De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto
 
 > **Nota:** `::selection` siempre se escribe con dos puntos dobles (::).
 
-> **Nota:** Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.
+> [!NOTE]
+> Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.
 
 <table class="standard-table">
   <tbody>
diff --git a/files/es/web/css/reference/index.md b/files/es/web/css/reference/index.md
index 2d166600960850..d7b5bd248493e0 100644
--- a/files/es/web/css/reference/index.md
+++ b/files/es/web/css/reference/index.md
@@ -48,7 +48,8 @@ Debido a que éstas tienen formatos de estructura variados, revise la sección [
 
 ## Índice de palabras clave
 
-> **Nota:** Los nombres de propiedad en este índice **no** incluyen los [nombres de JavaScript](/es/docs/Web/CSS/CSS_Properties_Reference) donde difieren de los nombres estándar de CSS.
+> [!NOTE]
+> Los nombres de propiedad en este índice **no** incluyen los [nombres de JavaScript](/es/docs/Web/CSS/CSS_Properties_Reference) donde difieren de los nombres estándar de CSS.
 
 {{CSS_Ref}}
 
diff --git a/files/es/web/css/specificity/index.md b/files/es/web/css/specificity/index.md
index aa2434fb2d4907..d261ce65676e65 100644
--- a/files/es/web/css/specificity/index.md
+++ b/files/es/web/css/specificity/index.md
@@ -11,7 +11,8 @@ La **especificidad** es la manera mediante la cual los navegadores deciden qué
 
 La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada [tipo de selector](/es/docs/Web/CSS/Especificidad#Tipos_de_selectores). Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una [declaración directa](/es/docs/Web/CSS/Especificidad#Elementos_objetivos_de_una_declaración_directa_vs_estilos_heredados), esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.
 
-> **Nota:** La **proximidad de elementos** en el árbol del documento no tiene efecto en la especificidad.
+> [!NOTE]
+> La **proximidad de elementos** en el árbol del documento no tiene efecto en la especificidad.
 
 ### Tipos de selectores
 
diff --git a/files/es/web/css/syntax/index.md b/files/es/web/css/syntax/index.md
index 6d39c4a133a1de..f175e492340db5 100644
--- a/files/es/web/css/syntax/index.md
+++ b/files/es/web/css/syntax/index.md
@@ -30,7 +30,8 @@ Esos bloques son naturalmente llamados **bloques de declaraciones** y las declar
 
 ![css syntax - declarations block.png](css_syntax_-_declarations_block.png)
 
-> **Nota:** El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo `style de HTML`.
+> [!NOTE]
+> El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo `style de HTML`.
 
 ## Sets de reglas CSS
 
@@ -42,7 +43,8 @@ CSS permite esto asociando condiciones con bloques de declaraciones. Cada declar
 
 Debido a que un elemento de la página puede ser seleccionado por varios selectores, y, por lo tanto, por varias reglas que pueden contener la misma propiedad más de una vez, con diferentes valores, el estandar CSS define cuál regla tiene precedencia por sobre las otras y debe ser aplicada: esto se conoce como el algoritmo [cascada](/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance).
 
-> **Nota:** Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí.
+> [!NOTE]
+> Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí.
 >
 > Esto tiene una consecuencia importante: si algún selector básico es inválido, como cuando se usa un pseudo-elemento o pseudo-clase inválida, el _selector_ entero es inválido y, por lo tanto, el set de reglas completo es ignorado (por ser inválido también).
 
diff --git a/files/es/web/css/text-decoration/index.md b/files/es/web/css/text-decoration/index.md
index 3eabe12d16b0f7..04b033aa2bc79d 100644
--- a/files/es/web/css/text-decoration/index.md
+++ b/files/es/web/css/text-decoration/index.md
@@ -9,7 +9,8 @@ La propiedad CSS **`text-decoration`** se usa para establecer el formato de text
 
 Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código `<p>Este texto tiene <em>algunas palabras enfatizadas</em> en él.</p>`, la regla de estilos `p { text-decoration: underline; }` causará que el párrafo entero tenga subrayado. La regla `em { text-decoration: none; }` no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla `em { text-decoration: overline; }` causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".
 
-> **Nota:** El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.
+> [!NOTE]
+> El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.
 
 {{cssinfo}}
 
diff --git a/files/es/web/css/text-shadow/index.md b/files/es/web/css/text-shadow/index.md
index 99939f777c23dd..23f2b00435127a 100644
--- a/files/es/web/css/text-shadow/index.md
+++ b/files/es/web/css/text-shadow/index.md
@@ -48,7 +48,8 @@ text-shadow: unset;
 
   - : Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario.
 
-    > **Nota:** Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.
+    > [!NOTE]
+    > Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.
 
 - \<offset-x> \<offset-y>
   - : Requeridos. Estos valores `length` especifican el ófset de la sombra del texto. `<offset-x>` especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. `<offset-y>` especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son `0`, la sombra es colocada detrás del texto (y puede generar un efecto de difuminado cuando se define el valor `<blur-radius>`).
diff --git a/files/es/web/css/text-transform/index.md b/files/es/web/css/text-transform/index.md
index a3e6c9a3f131d0..56a28cf69d9cdc 100644
--- a/files/es/web/css/text-transform/index.md
+++ b/files/es/web/css/text-transform/index.md
@@ -49,7 +49,8 @@ text-transform: unset;
 
   - : Es una palabra clave que fuerza a que la primera _letra_ de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números {{experimental_inline}}: esto excluye cualquier signo de puntuación o símbolos al principio de la palabra.
 
-    > **Nota:** Los autores no deben esperar que `capitalize` siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).
+    > [!NOTE]
+    > Los autores no deben esperar que `capitalize` siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).
 
 - `uppercase`
   - : Es una palabra clave que fuerza a todos los caracteres a ser convertidos a mayúsculas.
diff --git a/files/es/web/css/time/index.md b/files/es/web/css/time/index.md
index b519d45220c88f..df178a37f1051e 100644
--- a/files/es/web/css/time/index.md
+++ b/files/es/web/css/time/index.md
@@ -11,7 +11,8 @@ El [tipo de dato](/es/docs/Web/CSS/CSS_Types) **`<time>`** de [CSS](/es/docs/Web
 
 El tipo de datos `<time>` consta de un {{cssxref("&lt;number&gt;")}} seguido de una de las unidades enumeradas a continuación. Opcionalmente, puede estar precedido por un solo signo `+` o `-` . Al igual que con todas las dimensiones, no hay espacio entre la unidad literal y el número.
 
-> **Nota:** Aunque el número `0` es siempre el mismo independientemente de la unidad, la unidad no se puede omitir. En otras palabras, `0` no es válido y no representa `0s` o `0ms`.
+> [!NOTE]
+> Aunque el número `0` es siempre el mismo independientemente de la unidad, la unidad no se puede omitir. En otras palabras, `0` no es válido y no representa `0s` o `0ms`.
 
 ### Unidades
 
@@ -20,7 +21,8 @@ El tipo de datos `<time>` consta de un {{cssxref("&lt;number&gt;")}} seguido de
 - **`ms`**
   - : Representa un tiempo en milisegundos. Ejemplos: `0ms`, `150.25ms`, `-60000ms`.
 
-> **Nota:** Nota: La conversión entre `s` y `ms` sigue la lógica `1s` = `1000ms`.
+> [!NOTE]
+> La conversión entre `s` y `ms` sigue la lógica `1s` = `1000ms`.
 
 ## Ejemplos
 
diff --git a/files/es/web/css/transform-function/rotate3d/index.md b/files/es/web/css/transform-function/rotate3d/index.md
index 9c6caeb8b572e9..0a48b4ffb10b13 100644
--- a/files/es/web/css/transform-function/rotate3d/index.md
+++ b/files/es/web/css/transform-function/rotate3d/index.md
@@ -11,7 +11,8 @@ La [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs
 
 En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector \[x, y, z] y pasa por el origen (como lo define la propiedad {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el {{glossary("user agent")}} lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, \[0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad.
 
-> **Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado.
+> [!NOTE]
+> Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado.
 
 ## Sintaxis
 
diff --git a/files/es/web/css/transform-function/scale/index.md b/files/es/web/css/transform-function/scale/index.md
index 48dc7260b4840b..ac75614ca54e02 100644
--- a/files/es/web/css/transform-function/scale/index.md
+++ b/files/es/web/css/transform-function/scale/index.md
@@ -11,7 +11,8 @@ Esta transformación de escalado se caracteriza por un vector bidimensional. Sus
 
 Cuando un valor de coordenadas está fuera del rango \[-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.
 
-> **Nota:** La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.
+> [!NOTE]
+> La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.
 
 ## Sintaxis
 
diff --git a/files/es/web/css/transform/index.md b/files/es/web/css/transform/index.md
index d53a6ded7c8f45..a35d4279164414 100644
--- a/files/es/web/css/transform/index.md
+++ b/files/es/web/css/transform/index.md
@@ -78,7 +78,8 @@ transform:  matrix(a, c, b, d, tx, ty)
 
 Específica una matriz de transformación 2D compuesta por seis valores a especificar. Esto es el equivalente a la aplicación de una transformación lineal de una matriz <math><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} a &#x26; b &#x26; \mathrm{tx} \\ c &#x26; d &#x26; \mathrm{ty} \\ 0 &#x26; 0 &#x26; 1 \end{pmatrix} </annotation></semantics></math>de un mapa coordenadas de un nuevo sistema de coordenadas en un sistema de coordenadas anterior por las siguientes igualdades de la matriz: <math><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>b</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x*{\mathrm{prevCoordSys}} \\ y*{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &#x26; b &#x26; \mathrm{tx} \\ c &#x26; d &#x26; \mathrm{ty} \\ 0 &#x26; 0 &#x26; 1 \end{pmatrix} \begin{pmatrix} x*{\mathrm{newCoordSys}} \\ y*{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x*{\mathrm{newCoordSys}} + b y*{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x*{\mathrm{newCoordSys}} + d y*{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix}</annotation></semantics></math>
 
-> **Nota:** Viejas versiones de Gecko (Firefox) aceptan un {{cssxref("&lt;length&gt;")}} valor para **tx** y **ty**. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades {{cssxref("&lt;number&gt;")}} para **tx** y **ty**.
+> [!NOTE]
+> Viejas versiones de Gecko (Firefox) aceptan un {{cssxref("&lt;length&gt;")}} valor para **tx** y **ty**. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades {{cssxref("&lt;number&gt;")}} para **tx** y **ty**.
 
 ## Ejemplos realizados
 
@@ -146,7 +147,8 @@ transform:  scale(sx[, sy]);    /* ej. scale(2.5, 4)*/
 
 Especifica una operación de escalado 2D descrita por **\[sx, sy]**.
 
-> **Nota:** Nota: Si **sy** no es especificado, se asumirá que tanto **sx** como **sy** tendrán el mismo valor
+> [!NOTE]
+> Si **sy** no es especificado, se asumirá que tanto **sx** como **sy** tendrán el mismo valor
 
 ### scaleX
 
@@ -172,7 +174,8 @@ transform:  skew(ax[, ay]);     /* ej. skew(90deg,180deg)*/
 
 Sesga el elemento a lo largo del eje X y Y por los ángulos especificados. Si no se proporciona **ay**, no se llevará a cabo el sesgo del eje Y.
 
-> **Nota:** La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.
+> [!NOTE]
+> La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.
 >
 > Para lograr el mismo efecto, utilice la función skewX(). Si tu estas usando skew () con un parámetro o matriz (1, tan (ay), tan (ax), 1, 0, 0). Ten en cuenta que tan() no es una función CSS y así que tu mismo tienes que precalcular tus valores.
 
diff --git a/files/es/web/css/transition-property/index.md b/files/es/web/css/transition-property/index.md
index 1843bd334cefd8..996f1c8805a796 100644
--- a/files/es/web/css/transition-property/index.md
+++ b/files/es/web/css/transition-property/index.md
@@ -29,7 +29,8 @@ transition-property: initial;
 transition-property: unset;
 ```
 
-> **Nota:** El [conjunto de propiedades que puede ser animado](/es/docs/Web/CSS/CSS_animated_properties) está sujeto a cambios. Por lo tanto deberías evitar incluir en la lista cualquiera de las propiedades que actualmente no puede animarse, aunque algún día pudieran, ya que podría causar resultados inesperados.
+> [!NOTE]
+> El [conjunto de propiedades que puede ser animado](/es/docs/Web/CSS/CSS_animated_properties) está sujeto a cambios. Por lo tanto deberías evitar incluir en la lista cualquiera de las propiedades que actualmente no puede animarse, aunque algún día pudieran, ya que podría causar resultados inesperados.
 
 Si se especifica una propiedad abreviada (por ejemplo , {{cssxref("background")}}) todas sus subpropiedades que soporten animación serán animadas.
 
diff --git a/files/es/web/css/user-select/index.md b/files/es/web/css/user-select/index.md
index 863d1249195a05..b1c24200c3a216 100644
--- a/files/es/web/css/user-select/index.md
+++ b/files/es/web/css/user-select/index.md
@@ -62,7 +62,8 @@ user-select: unset;
 - `element`{{non-standard_inline}} (IE-specific alias)
   - : Igual que `contain`. Solo lo soportado en Internet Explorer.
 
-> **Nota:** CSS UI 4 [renombra user-select: a contain](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).
+> [!NOTE]
+> CSS UI 4 [renombra user-select: a contain](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).
 
 ### Formal syntax
 
diff --git a/files/es/web/css/using_css_custom_properties/index.md b/files/es/web/css/using_css_custom_properties/index.md
index cd657c212e267d..a00b7beb5ad931 100644
--- a/files/es/web/css/using_css_custom_properties/index.md
+++ b/files/es/web/css/using_css_custom_properties/index.md
@@ -31,7 +31,8 @@ Ten en cuenta que el selector que usemos para las reglas de estilo define el ám
 
 Sin embargo, esto no tiene por qué ser siempre así: podrían haber muy buenas razones para querer limitar el ámbito de tus propiedades personalizadas.
 
-> **Nota:** Los nombres de propiedades personalizadas son case sensitive (distinguen entre mayúsuculas y minúsculas) — `--my-color` será tratado como una propiedad personalizada distinta a `--My-color`.
+> [!NOTE]
+> Los nombres de propiedades personalizadas son case sensitive (distinguen entre mayúsuculas y minúsculas) — `--my-color` será tratado como una propiedad personalizada distinta a `--My-color`.
 
 Como mencionamos anteriormente, para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la función {{cssxref("var()")}}, en lugar de cualquier otro valor normal:
 
@@ -205,7 +206,8 @@ El primer argumento a la función es el nombre de la [propiedad personalizada](h
 
 Como vemos en el segundo ejemplo de arriba, la manera correcta de incluir más de un fallback es usar una propiedad personalizada como fallback (la cual tiene su propio fallback). Esta técnica se ha visto que puede causar problemas de rendimiento al tomar más tiempo analizar las variables.
 
-> **Nota:** La sintaxis del fallback, como la de las [propiedades personalizadas](https://www.w3.org/TR/css-variables/#custom-property), permite comas. Por ejemplo, `var(--foo, red, blue)` define un fallback de `red, blue` — es decir, cualquier cosa entre la primera coma y el final de la función se considera un valor de fallback.
+> [!NOTE]
+> La sintaxis del fallback, como la de las [propiedades personalizadas](https://www.w3.org/TR/css-variables/#custom-property), permite comas. Por ejemplo, `var(--foo, red, blue)` define un fallback de `red, blue` — es decir, cualquier cosa entre la primera coma y el final de la función se considera un valor de fallback.
 
 ## Validez y valores
 
diff --git a/files/es/web/css/value_definition_syntax/index.md b/files/es/web/css/value_definition_syntax/index.md
index 84ea000b1a90fa..85c5434b836193 100644
--- a/files/es/web/css/value_definition_syntax/index.md
+++ b/files/es/web/css/value_definition_syntax/index.md
@@ -103,7 +103,8 @@ Pero no con:
 - `bold` porque ambos componentes deben aparecer en el valor
 - `bold 1em bold` porque ambos componentes deben aparecer solo una vez
 
-> **Nota:** yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que `bold thin && <length>` es equivalente a `[ bold thin ] && <length>`. Que describe a `bold thin <length>` ó `<length> bold thin` pero no a `bold <length> thin`.
+> [!NOTE]
+> Yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que `bold thin && <length>` es equivalente a `[ bold thin ] && <length>`. Que describe a `bold thin <length>` ó `<length> bold thin` pero no a `bold <length> thin`.
 
 ### Barra doble
 
@@ -124,7 +125,8 @@ Pero no con:
 - `blue yellow` porque un componente debe aparecer al menos una vez.
 - `bold` porque no es una palabra clave permitida como valor de ninguna de las entidades.
 
-> **Nota:** el doble ampersand tiene precedencia sobre la barra doble, que significa que `bold || thin && <length>` es equivalente a `bold || [ thin && <length> ]`. Describe a `bold`, `thin`, `<length>`, `bold thin`, `<length> bold`, o `thin <length> bold` pero no `bold <length> bold thin` porque bold, si no es omitido debe colocarse antes o después de el componente `thin && <length>`
+> [!NOTE]
+> El doble ampersand tiene precedencia sobre la barra doble, que significa que `bold || thin && <length>` es equivalente a `bold || [ thin && <length> ]`. Describe a `bold`, `thin`, `<length>`, `bold thin`, `<length> bold`, o `thin <length> bold` pero no `bold <length> bold thin` porque bold, si no es omitido debe colocarse antes o después de el componente `thin && <length>`
 
 ### Barra simple
 
@@ -150,7 +152,8 @@ Pero no
 - `center 3%` porque solo uno de los componentes debe estar presente
 - `3em 4.5em` porque un componente debe estar presente máximo una vez.
 
-> **Nota:** la barra doble tiene precedencia sobre la barra simple, quiere decir que `bold | thin || <length>` es equivalente a `bold | [ thin || <length> ]`. Describe `bold`, `thin`, `<length>`, `<length> thin`, o `thin <length>` pero no `bold <length>` porque solo una entidad de cada lado del combinador `|` puede estar presente.
+> [!NOTE]
+> La barra doble tiene precedencia sobre la barra simple, quiere decir que `bold | thin || <length>` es equivalente a `bold | [ thin || <length> ]`. Describe `bold`, `thin`, `<length>`, `<length> thin`, o `thin <length>` pero no `bold <length>` porque solo una entidad de cada lado del combinador `|` puede estar presente.
 
 ## Multiplicadores de valores de componentes
 
diff --git a/files/es/web/css/widows/index.md b/files/es/web/css/widows/index.md
index f7629c7cb4e54c..a375454d794a5d 100644
--- a/files/es/web/css/widows/index.md
+++ b/files/es/web/css/widows/index.md
@@ -18,7 +18,8 @@ widows: initial;
 widows: unset;
 ```
 
-> **Nota:** En la tipografia, un _widow_ is la ultima linea de un paragrafo que aparece solo en la parte superior de la pagina.
+> [!NOTE]
+> En la tipografia, un _widow_ is la ultima linea de un paragrafo que aparece solo en la parte superior de la pagina.
 
 {{cssinfo}}
 
diff --git a/files/es/web/events/index.md b/files/es/web/events/index.md
index 8088aa9bd10164..0d91970672c2ff 100644
--- a/files/es/web/events/index.md
+++ b/files/es/web/events/index.md
@@ -246,7 +246,8 @@ Estos eventos se definen en las especificaciones Web oficiales, y deben ser comu
 
 ## Eventos específicos de Mozilla
 
-> **Nota:** Nota: los eventos nunca están expuestos a contenidos web y sólo se pueden utilizar en el contexto de contenido de chrome.
+> [!NOTE]
+> Los eventos nunca están expuestos a contenidos web y sólo se pueden utilizar en el contexto de contenido de chrome.
 
 ### Eventos XUL
 
diff --git a/files/es/web/exslt/exsl/object-type/index.md b/files/es/web/exslt/exsl/object-type/index.md
index 0286e1baeae390..be9ed4e0f4ace5 100644
--- a/files/es/web/exslt/exsl/object-type/index.md
+++ b/files/es/web/exslt/exsl/object-type/index.md
@@ -7,7 +7,8 @@ slug: Web/EXSLT/exsl/object-type
 
 `exsl:object-type()` devuelve una cadena que indica el tipo del objeto especificado.
 
-> **Nota:** La mayoría de tipos de objetos [XSLT](/es/XSLT) pueden ser convertidos en otros con seguridad; sin embargo, ciertas conversiones pueden aumentar las condiciones de error. En particular, el tratamiento de algo que no sea un conjunto de nodos (node-set) como un conjunto de nodos lo haría así. Esta función permite que los autores de plantillas con nombre y funciones de extensión proporcionen fácilmente flexibilidad en los valores de los parámetros.
+> [!NOTE]
+> La mayoría de tipos de objetos [XSLT](/es/XSLT) pueden ser convertidos en otros con seguridad; sin embargo, ciertas conversiones pueden aumentar las condiciones de error. En particular, el tratamiento de algo que no sea un conjunto de nodos (node-set) como un conjunto de nodos lo haría así. Esta función permite que los autores de plantillas con nombre y funciones de extensión proporcionen fácilmente flexibilidad en los valores de los parámetros.
 
 ### Sintaxis
 
diff --git a/files/es/web/exslt/set/leading/index.md b/files/es/web/exslt/set/leading/index.md
index 06e5865cded9ba..74c70294639ee4 100644
--- a/files/es/web/exslt/set/leading/index.md
+++ b/files/es/web/exslt/set/leading/index.md
@@ -24,7 +24,8 @@ set:leading(conjuntoNodos1,conjuntoNodos2)
 
 Un conjunto de nodos que contiene los nodos del `conjuntoNodos1` cuyos valores preceden al primer nodo del `conjuntoNodos2`.
 
-> **Nota:** Si el primer nodo del `conjuntoNodos2` no está contenido en `conjuntoNodos1`, de devuelve un conjunto de nodos vacío. Si `conjuntoNodos2` está vacío, entonces el resultado es `conjuntoNodos1`.
+> [!NOTE]
+> Si el primer nodo del `conjuntoNodos2` no está contenido en `conjuntoNodos1`, de devuelve un conjunto de nodos vacío. Si `conjuntoNodos2` está vacío, entonces el resultado es `conjuntoNodos1`.
 
 ### Definido en
 
diff --git a/files/es/web/exslt/set/trailing/index.md b/files/es/web/exslt/set/trailing/index.md
index 49f30e007ade01..50d4a07a51c80a 100644
--- a/files/es/web/exslt/set/trailing/index.md
+++ b/files/es/web/exslt/set/trailing/index.md
@@ -24,7 +24,8 @@ set:trailing(conjuntoNodos1,conjuntoNodos2)
 
 Un conjunto de nodos que contiene los nodos del `conjuntoNodos1` cuyos valores siguen al primer nodo del `conjuntoNodos2`.
 
-> **Nota:** Si el primer nodo en `conjuntoNodos2` no está contenido en `conjuntoNodos1`, se devuelve un conjunto de nodos vacío. Si `conjuntoNodos2` está vacío, entonces el resultado es el `conjuntoNodos1`.
+> [!NOTE]
+> Si el primer nodo en `conjuntoNodos2` no está contenido en `conjuntoNodos1`, se devuelve un conjunto de nodos vacío. Si `conjuntoNodos2` está vacío, entonces el resultado es el `conjuntoNodos1`.
 
 ### Definido en
 
diff --git a/files/es/web/html/attributes/accept/index.md b/files/es/web/html/attributes/accept/index.md
index 6478c33a0c00aa..34b73f4126e7a8 100644
--- a/files/es/web/html/attributes/accept/index.md
+++ b/files/es/web/html/attributes/accept/index.md
@@ -95,7 +95,8 @@ Esto produce la siguiente salida:
 
 {{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}
 
-> **Nota:** También puedes encontrar este ejemplo en GitHub; consulta [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html) y también puedes [verlo funcionando en vivo](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
+> [!NOTE]
+> También puedes encontrar este ejemplo en GitHub; consulta [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html) y también puedes [verlo funcionando en vivo](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
 
 Independientemente del dispositivo o sistema operativo del usuario, el `<input>` de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.
 
diff --git a/files/es/web/html/attributes/min/index.md b/files/es/web/html/attributes/min/index.md
index cb29192bdf2e8c..481947a1549d8d 100644
--- a/files/es/web/html/attributes/min/index.md
+++ b/files/es/web/html/attributes/min/index.md
@@ -23,7 +23,8 @@ Si `any` no se establece explícitamente, los valores válidos para el `número`
 | {{HTMLElement("input/number", "number")}}                 | [number](/es/docs/Web/CSS/number) | `<input type="number" min="0" step="5" max="100">`     |
 | {{HTMLElement("input/range", "range")}}                   | [number](/es/docs/Web/CSS/number) | `<input type="range" min="60" step="5" max="100">`     |
 
-> **Nota:** Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase `:invalid`
+> [!NOTE]
+> Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase `:invalid`
 
 Consulta [Validación del lado del cliente](/es/docs/Web/Guide/HTML/HTML5/Constraint_validation) y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.
 
diff --git a/files/es/web/html/content_categories/index.md b/files/es/web/html/content_categories/index.md
index 7594f59922e1a6..c69b7923dde1c5 100644
--- a/files/es/web/html/content_categories/index.md
+++ b/files/es/web/html/content_categories/index.md
@@ -13,7 +13,8 @@ Hay tres tipos de categorías de contenido:
 - Categorías de contenido relacionado con formularios — que describe reglas comunes a los elementos relacionados con formularios.
 - Categorías de contenido específico — que describe categorías raras compartidas solo por unos pocos elementos, a veces, solo en un contexto específico.
 
-> **Nota:** Una explicación comparativa más detallada de estas categorías de contenido y su funcionalidad está más allá del alcance de este artículo; para eso, posiblemente desees leer las [partes relevantes de la especificación HTML](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content).
+> [!NOTE]
+> Una explicación comparativa más detallada de estas categorías de contenido y su funcionalidad está más allá del alcance de este artículo; para eso, posiblemente desees leer las [partes relevantes de la especificación HTML](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content).
 
 [![Un diagrama de Venn que muestra cómo se interrelacionan las distintas categorías de contenido. Las siguientes secciones explican estas relaciones en texto.](content_categories_venn.png?size=webview)](content_categories_venn.png)
 
@@ -42,7 +43,8 @@ Los elementos que pertenecen al modelo de contenido de secciones crean una [secc
 
 Los elementos que pertenecen a esta categoría son {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} y {{HTMLElement("section")}}.
 
-> **Nota:** No confundas este modelo de contenido con la categoría de [seccionado raíz](/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots), que aísla su contenido del esquema regular.
+> [!NOTE]
+> No confundas este modelo de contenido con la categoría de [seccionado raíz](/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots), que aísla su contenido del esquema regular.
 
 ### Contenido del encabezado
 
@@ -50,9 +52,11 @@ El contenido del encabezado define el título de una sección, ya sea que esté
 
 Los elementos que pertenecen a esta categoría son {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} y {{HTMLElement("hgroup")}}.
 
-> **Nota:** Aunque es probable que tenga contenido de encabezado, {{HTMLElement("header")}} no es contenido de encabezado en sí mismo.
+> [!NOTE]
+> Aunque es probable que tenga contenido de encabezado, {{HTMLElement("header")}} no es contenido de encabezado en sí mismo.
 
-> **Nota:** El elemento {{HTMLElement("hgroup")}} se eliminó de la especificación HTML del W3C antes de que se finalizara HTML 5, pero sigue siendo parte de la especificación WHATWG y la mayoría de los navegadores lo admiten por lo menos parcialmente.
+> [!NOTE]
+> El elemento {{HTMLElement("hgroup")}} se eliminó de la especificación HTML del W3C antes de que se finalizara HTML 5, pero sigue siendo parte de la especificación WHATWG y la mayoría de los navegadores lo admiten por lo menos parcialmente.
 
 ### Contenido de redacción
 
diff --git a/files/es/web/html/element/a/index.md b/files/es/web/html/element/a/index.md
index 589d97ab738cd8..1f605c6b6337fa 100644
--- a/files/es/web/html/element/a/index.md
+++ b/files/es/web/html/element/a/index.md
@@ -70,7 +70,7 @@ Este elemento incluye los [atributos globales](/es/docs/HTML/Global_attributes).
 
   - : Este atributo, indica descargar a los navegadores una URL en lugar de navegar hacia ella, por lo que el usuario será dirigido para salvarla como un archivo local. Si el atributo tiene un valor, éste se utilizará como nombre de archivo por defecto en el mensaje Guardar que se abre cuando el usuario hace clic en el enlace (sin embargo, el usuario puede cambiar el nombre antes de guardar el archivo). No hay restricciones sobre los valores permitidos, aunque: / y: \ se convertirán en guiones bajos (_underscores_), lo que evitará sugerencias de ruta específicas. Se debe tener en cuenta que la mayoría de los sistemas de archivos tienen limitaciones con respecto a los símbolos de puntuación admitidos en los nombres de archivo, por lo que los navegadores ajustarán los nombres de los archivos en consecuencia.
 
-    > **Nota:**
+    > [!NOTE]
     >
     > - Este atributo sólo funciona para las [políticas de mismo origen (same-origin URLs)](/es/docs/Web/Security/Same-origin_policy).
     > - Este atributo puede ser utilizado con [`blob:` URLs](/es/docs/Web/API/URL.createObjectURL) y [`data:` URLs](/es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) para descargar contenido generado por JavaScript, tales como fotografías creadas por una aplicación web de edición de imágenes.
@@ -83,7 +83,8 @@ Este elemento incluye los [atributos globales](/es/docs/HTML/Global_attributes).
     Un fragmento de URL es un nombre ("name") precedido por el símbolo de número (`#`), el cual especifíca una ubicación interna objetivo (un [ID](/es/docs/HTML/Global_attributes#attr-id) de un elemento HTML) dentro del actual documento. Las URLs no están restringidas sólo a documentos de internet basados en HTTP, sin embargo pueden utilizar cualquier protocolo soportado por el navegador. Por ejemplo, [`file:`](https://en.wikipedia.org/wiki/File_URI_scheme), `ftp:`, and `mailto:` funcionan en la mayoría de los navegadores.
     Este atributo puede ser omitido (a partir de HTML5) para crear un enlace de marcador de posición. Un enlace de marcador de posición se parece a un enlace tradicional, pero que no dirige a algún lugar.
 
-    > **Nota:** Puede ser utilizado `href="#top"` o un fragmento vacío `href="#"` para enlazar a la parte superior de la página actual. [Este comportamiento está especficado en HTML5](https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid).
+    > [!NOTE]
+    > Puede ser utilizado `href="#top"` o un fragmento vacío `href="#"` para enlazar a la parte superior de la página actual. [Este comportamiento está especficado en HTML5](https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid).
 
 - `hreflang`
   - : Este atributo indica el lenguaje humano del recurso al que se enlaza. Este es únicamente informativo, sin ninguna funcionalidad incorporada. Los valores permitidos están determinados por [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt).
@@ -108,7 +109,8 @@ Este elemento incluye los [atributos globales](/es/docs/HTML/Global_attributes).
     - `_parent`: Carga la URL en el contexto de navegación padre (_parent_) del actual. Si no existe el padre, este se comporta del mismo modo que `_self`.
     - `_top`: Carga la URL en el contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (_parent_)). Si no hay padre (_parent_), este se comporta del mismo modo que `_self`.
 
-    > **Nota:** Cuando se utiliza `target`, considera agregar `rel="noopener noreferrer"` para evitar el uso de la API `window.opener`.
+    > [!NOTE]
+    > Cuando se utiliza `target`, considera agregar `rel="noopener noreferrer"` para evitar el uso de la API `window.opener`.
 
 - `type`
   - : Especifica el tipo de medio (_media type_) en la forma de {{Glossary("MIME type")}} para la URL enlazada. Esto es únicamente informativo, sin ninguna funcionalidad incorporada.
@@ -119,7 +121,8 @@ Este elemento incluye los [atributos globales](/es/docs/HTML/Global_attributes).
 
   - : Este atributo define la [codificación de caracteres (character encoding)](/es/docs/Glossary/character_encoding) de la URL enlazada. El valor debe de ser una lista delimitada por espacio y/o coma de caracteres definidos en [RFC 2045](https://tools.ietf.org/html/rfc2045). El valor por defecto es `ISO-8859-1`.
 
-    > **Nota:** Este atributo es obsoleto en HTML5 y **no debe ser utilizado por autores**. Para lograr su efecto, se debe utilzar el encabezado HTTP [`Content-Type:`](/es/docs/Web/HTTP/Headers/Content-Type) en la URL enlazada.
+    > [!NOTE]
+    > Este atributo es obsoleto en HTML5 y **no debe ser utilizado por autores**. Para lograr su efecto, se debe utilzar el encabezado HTTP [`Content-Type:`](/es/docs/Web/HTTP/Headers/Content-Type) en la URL enlazada.
 
 - `coords` {{Deprecated_Inline}}
   - : Para utilizar con el siguiente atributo `shape`, este atributo utiliza una lista de números separada por comas para definir las coordenadas del enlace en la página.
@@ -127,7 +130,8 @@ Este elemento incluye los [atributos globales](/es/docs/HTML/Global_attributes).
 
   - : Este atributo era requerido para anclas (_anchors_) que definían una posible ubicación dentro de la página. En HTML 4.01, `id` y `name` podían ser utilizados simultáneamente en un elemento `<a>` simpre y cuando tuvieran valores idénticos.
 
-    > **Nota:** Este atributo es obsoleto en HTML5, se utiliza el [atributo global `id`](/es/docs/HTML/Global_attributes#attr-id) en su lugar.
+    > [!NOTE]
+    > Este atributo es obsoleto en HTML5, se utiliza el [atributo global `id`](/es/docs/HTML/Global_attributes#attr-id) en su lugar.
 
 - `rev` {{Deprecated_Inline}}
   - : Este atributo especifica un enlace inverso, la relación inversa del atributo **rel**. Fue desechado por ser muy confuso.
@@ -135,7 +139,8 @@ Este elemento incluye los [atributos globales](/es/docs/HTML/Global_attributes).
 
   - : Este atributo era utilizado para definir una región de enlaces para crear un mapa de imagen. El valore es `circle`, `default`, `polygon`, y `rect`. El formato del atributo `coords` depende del valor de la forma geométrica. Para `circle`, el valor es `x,y,r` donde `x` y `y` son las coordenadas en pixel para el centro del círculo y `r` es el valor del radio en pixeles. Para `rect`, el atributo `coords` debe ser `x,y,w,h`. Los valores `x y y` definen la esquina superior izquierda del rectángulo, mientras que `w` y `h` definen el ancho y el alto respectivamente. Un valor del `polygon` para `shape` requiere los valores `x1,y1,x2,y2,...` para `coords`. Cada uno de los pares `x,y` definen un punto en el polígono, con puntos sucesivos que son unidos por líneas rectas y el útlimo punto se une al primer punto. El valor `default` para `shape` Requiere que el área encerrada, típicamente una imágen, sea utilizada.
 
-    > **Nota:** Utilice el [atributo `usemap`](/es/docs/Web/HTML/Element/img#attr-usemap) para el elemento {{HTMLElement("img")}} y el elemento asociado {{HTMLElement("map")}} para definir puntos de acceso (_hotspots_) en lugar del atributo `shape`.
+    > [!NOTE]
+    > Utilice el [atributo `usemap`](/es/docs/Web/HTML/Element/img#attr-usemap) para el elemento {{HTMLElement("img")}} y el elemento asociado {{HTMLElement("map")}} para definir puntos de acceso (_hotspots_) en lugar del atributo `shape`.
 
 ## Ejemplos
 
diff --git a/files/es/web/html/element/abbr/index.md b/files/es/web/html/element/abbr/index.md
index 5037f797da01fd..aaf6ca8cbbfbc5 100644
--- a/files/es/web/html/element/abbr/index.md
+++ b/files/es/web/html/element/abbr/index.md
@@ -25,7 +25,8 @@ Este elemento sólo incluye los [atributos globales](/es/docs/Web/HTML/Atributos
 
 Cada elemento `<abbr>` usado es independiente de todos los otros; dar un `<title>` a uno no hace que automáticamente todos los demás adquieran la misma descripción.
 
-> **Nota:** En lenguajes con números gramaticales (especialmente lenguajes con más de dos números, como el Árabe), utiliza el mismo número gramatical en el atributo `title` como dentro del elemento `<abbr>`.
+> [!NOTE]
+> En lenguajes con números gramaticales (especialmente lenguajes con más de dos números, como el Árabe), utiliza el mismo número gramatical en el atributo `title` como dentro del elemento `<abbr>`.
 
 ## Especificaciones
 
diff --git a/files/es/web/html/element/acronym/index.md b/files/es/web/html/element/acronym/index.md
index 2b1f4a7a2f8f5e..bd422ca91cf3c3 100644
--- a/files/es/web/html/element/acronym/index.md
+++ b/files/es/web/html/element/acronym/index.md
@@ -250,7 +250,8 @@ El tema de las abreviaturas y acrónimos puede ser un tanto lioso. En castellano
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber como hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/address/index.md b/files/es/web/html/element/address/index.md
index 6bedc1d96c9133..cbb4f1049020a3 100644
--- a/files/es/web/html/element/address/index.md
+++ b/files/es/web/html/element/address/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/address
 
 El **elemento HTML `<address>`** aporta información de contacto para su {{HTMLElement("article")}} más cercano o ancestro {{HTMLElement("body")}}; en el último caso lo aplica a todo el documento.
 
-> **Nota:** Notas de uso:
+> [!NOTE]
+> Notas de uso:
 >
 > - Para representar una dirección arbitraria, una que no esté relacionada con la información de contacto, utiliza un elemento {{HTMLElement("p")}} en lugar del elemento `<address>`.
 > - Este elemento no debe contener más información que la información de contacto, como una fecha de publicación (que pertenece al elemento {{HTMLElement("time")}}).
diff --git a/files/es/web/html/element/area/index.md b/files/es/web/html/element/area/index.md
index a47eb0a140a3e6..fa92a8ef05a1c1 100644
--- a/files/es/web/html/element/area/index.md
+++ b/files/es/web/html/element/area/index.md
@@ -78,7 +78,8 @@ Los atributos de este elemento incluyen los [atributos globales](/es/docs/Web/HT
 
     Usa este atributo solo si esta presente el atributo [`href`](#href).
 
-    > **Nota:** Si se ajusta `target="_blank"` en el elemento `<area>` implicitamente provoca el mismo comportamiento `rel` que si se ocupara [`rel="noopener"`](/es/docs/Web/HTML/Attributes/rel/noopener) que no establece `window.opener`. Véase también [Compatibilidad con navegadores](#browser_compatibility).
+    > [!NOTE]
+    > Si se ajusta `target="_blank"` en el elemento `<area>` implicitamente provoca el mismo comportamiento `rel` que si se ocupara [`rel="noopener"`](/es/docs/Web/HTML/Attributes/rel/noopener) que no establece `window.opener`. Véase también [Compatibilidad con navegadores](#browser_compatibility).
 
 ## Ejemplos
 
diff --git a/files/es/web/html/element/aside/index.md b/files/es/web/html/element/aside/index.md
index aa8a14ae39be9c..2196336f715e9a 100644
--- a/files/es/web/html/element/aside/index.md
+++ b/files/es/web/html/element/aside/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/aside
 
 El **elemento HTML `<aside>`** representa una sección de una página que consiste en contenido que está indirectamente relacionado con el contenido principal del documento. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.
 
-> **Nota:** Notas de uso:
+> [!NOTE]
+> Notas de uso:
 >
 > - No utilices el elemento `<aside>` para etiquetar texto entre paréntesis, ya que este tipo de texto se considera parte del flujo principal.
 
diff --git a/files/es/web/html/element/audio/index.md b/files/es/web/html/element/audio/index.md
index b0b0651c335e83..52ee3c36149b75 100644
--- a/files/es/web/html/element/audio/index.md
+++ b/files/es/web/html/element/audio/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/audio
 
 El elemento `audio` se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento `audio` se agregó como parte de HTML 5.
 
-> **Nota:** actualmente Gecko admite solamente Vorbis, en contenedores Ogg, así como formato WAV. Asimismo, el servidor debe servir el archivo mediante el tipo MIME correcto con el fin de que Gecko lo reproduzca correctamente.
+> [!NOTE]
+> Actualmente Gecko admite solamente Vorbis, en contenedores Ogg, así como formato WAV. Asimismo, el servidor debe servir el archivo mediante el tipo MIME correcto con el fin de que Gecko lo reproduzca correctamente.
 
 Puedes usar las características API de audio mejoradas - que son específicas de Gecko - para generar y manipular directamente secuencias de audio a partir de código JavaScript. Consulta [Manipular sonido a través de la API de audio mejorada](/en/Manipulating_audio_using_the_enhanced_audio_API) para tener más detalles.
 
@@ -52,7 +53,8 @@ Si no está configurado, su valor predeterminado está definido por el navegador
 
 Las compensaciones de tiempo se especifican como valores float que indican el número de segundos que se va a compensar.
 
-> **Nota:** la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.
+> [!NOTE]
+> La definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.
 
 ## Ejemplos
 
diff --git a/files/es/web/html/element/b/index.md b/files/es/web/html/element/b/index.md
index 1d966d3ad9c3ae..e76b14eecf8ad7 100644
--- a/files/es/web/html/element/b/index.md
+++ b/files/es/web/html/element/b/index.md
@@ -250,7 +250,8 @@ El inherente a su condición: **negrita.** Prueba el siguiente ejemplo:
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/base/index.md b/files/es/web/html/element/base/index.md
index f1df29e7ffd04b..28e89512dd12fa 100644
--- a/files/es/web/html/element/base/index.md
+++ b/files/es/web/html/element/base/index.md
@@ -11,7 +11,8 @@ El **elemento HTML `<base>`** especifica la dirección URL base que se utilizar
 
 La dirección URL base de un documento puede ser consultado a partir de una secuencia de comandos con {{domxref('document.baseURI')}}.
 
-> **Nota:** Si se especifican varios elementos \<base>, se utilizá sólo la primera sección **href** y el primer valor **target**; los demás son ignorados.
+> [!NOTE]
+> Si se especifican varios elementos \<base>, se utilizá sólo la primera sección **href** y el primer valor **target**; los demás son ignorados.
 
 <table class="properties">
   <tbody>
diff --git a/files/es/web/html/element/bdi/index.md b/files/es/web/html/element/bdi/index.md
index e25aea5b27064c..020e13400071f3 100644
--- a/files/es/web/html/element/bdi/index.md
+++ b/files/es/web/html/element/bdi/index.md
@@ -9,7 +9,8 @@ El elemento _HTML `<bdi>`_ (o elemento de aislamiento Bi-Direccional) aisla un t
 
 Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.
 
-> **Nota:** Aunque el mismo efecto visual se puede conseguir usando la regla CSS {{cssxref("unicode-bidi")}}`: isolate` en un elemento {{HTMLElement("span")}} u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento `<bdi>`. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.
+> [!NOTE]
+> Aunque el mismo efecto visual se puede conseguir usando la regla CSS {{cssxref("unicode-bidi")}}`: isolate` en un elemento {{HTMLElement("span")}} u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento `<bdi>`. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.
 
 | [Content categories](/es/docs/HTML/Content_categories) | [Flow content](/es/docs/HTML/Content_categories#Flow_content), [phrasing content](/es/docs/HTML/Content_categories#Phrasing_content), contenido palpable. |
 | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/es/web/html/element/bdo/index.md b/files/es/web/html/element/bdo/index.md
index 9f5a1e46a25f90..60f0c10ea21c91 100644
--- a/files/es/web/html/element/bdo/index.md
+++ b/files/es/web/html/element/bdo/index.md
@@ -229,7 +229,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/big/index.md b/files/es/web/html/element/big/index.md
index 8976abb2ffff1f..4cf3bbfb32feae 100644
--- a/files/es/web/html/element/big/index.md
+++ b/files/es/web/html/element/big/index.md
@@ -279,7 +279,8 @@ Observa el siguiente ejemplo:
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/blockquote/index.md b/files/es/web/html/element/blockquote/index.md
index 153c639d086b25..5f6532b00203ca 100644
--- a/files/es/web/html/element/blockquote/index.md
+++ b/files/es/web/html/element/blockquote/index.md
@@ -245,7 +245,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/br/index.md b/files/es/web/html/element/br/index.md
index 66158f37d44ee3..54439d7ef98adc 100644
--- a/files/es/web/html/element/br/index.md
+++ b/files/es/web/html/element/br/index.md
@@ -23,7 +23,8 @@ Este elemento incluye los [atributos globales](/es/docs/HTML/Global_attributes).
 - `clear` {{Deprecated_Inline}}
   - : Indica donde empieza la siguiente línea después del salto.
 
-> **Nota:** Este atributo está obsoleto en HTML5 y **no debe utilizarse por los autores**. En su lugar utiliza la propiedad {{CSSxref('clear')}} de CSS.
+> [!NOTE]
+> Este atributo está obsoleto en HTML5 y **no debe utilizarse por los autores**. En su lugar utiliza la propiedad {{CSSxref('clear')}} de CSS.
 
 ## Ejemplo
 
diff --git a/files/es/web/html/element/button/index.md b/files/es/web/html/element/button/index.md
index fc5cc43dc62da1..db8566e43d40e7 100644
--- a/files/es/web/html/element/button/index.md
+++ b/files/es/web/html/element/button/index.md
@@ -374,6 +374,7 @@ Más información (en inglés):
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta [MDC:Como ayudar](/es/docs/Project:Como_ayudar).
diff --git a/files/es/web/html/element/canvas/index.md b/files/es/web/html/element/canvas/index.md
index 42fd7f8d5418f3..40314c95a84a16 100644
--- a/files/es/web/html/element/canvas/index.md
+++ b/files/es/web/html/element/canvas/index.md
@@ -26,7 +26,8 @@ Para más artículos sobre canvas, consulta la [página del tema canvas](/es/HTM
 - `height`
   - : La altura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 150.
 
-> **Nota:** el tamaño del lienzo mostrado se puede cambiar con una hoja de estilo. La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .
+> [!NOTE]
+> El tamaño del lienzo mostrado se puede cambiar con una hoja de estilo. La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .
 
 ## Interfaz DOM
 
diff --git a/files/es/web/html/element/caption/index.md b/files/es/web/html/element/caption/index.md
index ee2135e481562d..9aa2deea8e052f 100644
--- a/files/es/web/html/element/caption/index.md
+++ b/files/es/web/html/element/caption/index.md
@@ -258,7 +258,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/cite/index.md b/files/es/web/html/element/cite/index.md
index e7041905e020cb..5b347613cfa44f 100644
--- a/files/es/web/html/element/cite/index.md
+++ b/files/es/web/html/element/cite/index.md
@@ -228,7 +228,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/col/index.md b/files/es/web/html/element/col/index.md
index df8e02a3093c0c..6c4e90b1a02cfa 100644
--- a/files/es/web/html/element/col/index.md
+++ b/files/es/web/html/element/col/index.md
@@ -302,7 +302,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/colgroup/index.md b/files/es/web/html/element/colgroup/index.md
index 911770758c4698..aedb74e789d846 100644
--- a/files/es/web/html/element/colgroup/index.md
+++ b/files/es/web/html/element/colgroup/index.md
@@ -299,7 +299,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/div/index.md b/files/es/web/html/element/div/index.md
index 792b0199ac75fb..6bb519d95c58d4 100644
--- a/files/es/web/html/element/div/index.md
+++ b/files/es/web/html/element/div/index.md
@@ -17,7 +17,8 @@ Como contenedor "puro", el elemento `<div>` no representa nada inherentemente. E
 
 Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attributes).
 
-> **Nota:** El atributo `align` está obsoleto; no lo uses más. En su lugar, deberías usar propiedades o técnicas de CSS como [CSS Grid](/es/docs/Web/CSS/CSS_grid_layout) o [CSS Flexbox](/es/docs/Learn/CSS/CSS_layout/Flexbox) para alinear y posicionar elementos `<div>` en la página.
+> [!NOTE]
+> El atributo `align` está obsoleto; no lo uses más. En su lugar, deberías usar propiedades o técnicas de CSS como [CSS Grid](/es/docs/Web/CSS/CSS_grid_layout) o [CSS Flexbox](/es/docs/Learn/CSS/CSS_layout/Flexbox) para alinear y posicionar elementos `<div>` en la página.
 
 ## Notas de uso
 
diff --git a/files/es/web/html/element/embed/index.md b/files/es/web/html/element/embed/index.md
index 0ac52f18554a76..0774fd72481e45 100644
--- a/files/es/web/html/element/embed/index.md
+++ b/files/es/web/html/element/embed/index.md
@@ -5,7 +5,8 @@ slug: Web/HTML/Element/embed
 
 {{HTMLSidebar}}
 
-> **Nota:** este tema documenta sólo el elemento \<embed> que se define como parte de HTML5. No trata las implementaciones anteriores no estandarizadas del elemento `<embed>`.
+> [!NOTE]
+> Este tema documenta sólo el elemento \<embed> que se define como parte de HTML5. No trata las implementaciones anteriores no estandarizadas del elemento `<embed>`.
 
 El _Elemento HTML Embed_ ( `<embed>` ) representa un punto de integración para una aplicación externa o de contenido interactivo (en otras palabras, un plug-in).
 
diff --git a/files/es/web/html/element/figure/index.md b/files/es/web/html/element/figure/index.md
index 3bf027c5432c23..b8545ccea890fb 100644
--- a/files/es/web/html/element/figure/index.md
+++ b/files/es/web/html/element/figure/index.md
@@ -7,7 +7,7 @@ slug: Web/HTML/Element/figure
 
 El _elemento HTML_ \<figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.
 
-> **Nota:**
+> [!NOTE]
 >
 > - Al ser una [seccionador raíz](/es/Secciones_y_esquema_de_un_documento_HTML_5#Seccionador_ra.c3.adz), el esbozo del contenido del elemento \<figure> está excluido del esbozo principal del documento.
 > - Un título puede estar asociado con el elemento \<figure> mediante la inserción de un {{ HTMLElement ("figcaption") }} en su interior (como el primero o el último hijo).
diff --git a/files/es/web/html/element/font/index.md b/files/es/web/html/element/font/index.md
index 82141be00b2bc3..17e320de82d563 100644
--- a/files/es/web/html/element/font/index.md
+++ b/files/es/web/html/element/font/index.md
@@ -254,7 +254,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/footer/index.md b/files/es/web/html/element/footer/index.md
index a20fe29b0851fb..4c36fce0e17abd 100644
--- a/files/es/web/html/element/footer/index.md
+++ b/files/es/web/html/element/footer/index.md
@@ -9,7 +9,7 @@ El _Elemento_ _HTML Footer_ (`<footer>`) representa un pie de página para el co
 
 \<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
-> **Nota:**
+> [!NOTE]
 >
 > - Encierra la información acerca del autor en un elemento [`<address>`](/es/HTML/Element/address) que puede ser incluido dentro del elemento \<footer>.
 > - El elemento \<footer> no es contenido de sección y en consecuencia no introduce una nueva sección en el [esquema](/en/Sections_and_Outlines_of_an_HTML5_document).
diff --git a/files/es/web/html/element/form/index.md b/files/es/web/html/element/form/index.md
index 781d03b0a9a43f..9bd4b42f5de0e8 100644
--- a/files/es/web/html/element/form/index.md
+++ b/files/es/web/html/element/form/index.md
@@ -27,7 +27,8 @@ Como cualquier otro elemento HTML, este elemento soporta [atributos globales](/e
 
   - : Una lista separada por comas de los tipos de contenido que el servidor acepta.
 
-    > **Nota:** este atributo ha sido removido en HTML5 y no debe ser usado. En su lugar, usar el atributo **[accept](/es/HTML/Element/Input#attr-accept)** del elemento específico {{ HTMLElement("input") }}.
+    > [!NOTE]
+    > Eeste atributo ha sido removido en HTML5 y no debe ser usado. En su lugar, usar el atributo **[accept](/es/HTML/Element/Input#attr-accept)** del elemento específico {{ HTMLElement("input") }}.
 
 - `accept-charset`
 
@@ -44,7 +45,8 @@ Como cualquier otro elemento HTML, este elemento soporta [atributos globales](/e
     - `off`: El usuario debe ingresar explicitamente cada valor dentro de cada campo por cada uso, o el documento provee su propio método de autocompletado; el navegador no autocompleta las entradas.
     - `on`: El navegador puede completar automáticamente valores basados en lo que el usuario ha ingresado durante entradas previas al formulario.
 
-    > **Nota:** si se establece `autocomplete` a un valor de `off` en un formulario porque el documento provee su propio auto-completado entonces también se debería establecer `autocomplete` al valor `off` para cada uno de los elementos de formulario `input` que el documento pueda autocompletar [Notas para Google Chrome](#notas_para_google_chrome).
+    > [!NOTE]
+    > Si se establece `autocomplete` a un valor de `off` en un formulario porque el documento provee su propio auto-completado entonces también se debería establecer `autocomplete` al valor `off` para cada uno de los elementos de formulario `input` que el documento pueda autocompletar [Notas para Google Chrome](#notas_para_google_chrome).
 
 - `enctype`
 
diff --git a/files/es/web/html/element/frame/index.md b/files/es/web/html/element/frame/index.md
index 50232a70116c23..f0065ce22f89aa 100644
--- a/files/es/web/html/element/frame/index.md
+++ b/files/es/web/html/element/frame/index.md
@@ -282,7 +282,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/frameset/index.md b/files/es/web/html/element/frameset/index.md
index e70a8e4db2a2b5..e59ff065b7f030 100644
--- a/files/es/web/html/element/frameset/index.md
+++ b/files/es/web/html/element/frameset/index.md
@@ -222,7 +222,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/header/index.md b/files/es/web/html/element/header/index.md
index d4579a446b1447..088709e6d1bc7d 100644
--- a/files/es/web/html/element/header/index.md
+++ b/files/es/web/html/element/header/index.md
@@ -7,7 +7,7 @@ slug: Web/HTML/Element/header
 
 El _elemento de HTML Header_ (\<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.
 
-> **Nota:**
+> [!NOTE]
 >
 > - El elemento `<header>` no es contenido de sección y, por lo tanto, no introduce una nueva sección en [descripción](/en/Sections_and_Outlines_of_an_HTML5_document).
 
diff --git a/files/es/web/html/element/heading_elements/index.md b/files/es/web/html/element/heading_elements/index.md
index 43689e3d9559d2..3be6c4b7ab3660 100644
--- a/files/es/web/html/element/heading_elements/index.md
+++ b/files/es/web/html/element/heading_elements/index.md
@@ -5,7 +5,7 @@ slug: Web/HTML/Element/Heading_Elements
 
 Los elementos de **encabezado** implementan seis niveles de encabezado del documento, `<h1>` es el más importante, y `<h6>`, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.
 
-> **Nota:**
+> [!NOTE]
 >
 > - No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad [CSS](/es/docs/Web/CSS) {{cssxref("font-size")}} para eso.
 > - Evite omitir niveles de encabezado: siempre comience con `<h1>`, después use `<h2>` y así sucesivamente.
diff --git a/files/es/web/html/element/hgroup/index.md b/files/es/web/html/element/hgroup/index.md
index 1718361192dea5..53cd51eec2e43d 100644
--- a/files/es/web/html/element/hgroup/index.md
+++ b/files/es/web/html/element/hgroup/index.md
@@ -29,7 +29,8 @@ Este elemento no tiene más atributos que los [atributos globales](/en/HTML/Glob
 
 ## Notas de uso
 
-> **Nota:** Si bien el elemento `<hgroup>` se eliminó de la especificación HTML5 (W3C), todavía se mantiene en la versión WHATWG de HTML. De todos modos, está parcialmente implementado en la mayoría de los navegadores, por lo que es improbable que desaparezca.
+> [!NOTE]
+> Si bien el elemento `<hgroup>` se eliminó de la especificación HTML5 (W3C), todavía se mantiene en la versión WHATWG de HTML. De todos modos, está parcialmente implementado en la mayoría de los navegadores, por lo que es improbable que desaparezca.
 > Sin embargo, dado que el propósito principal del elemento `<hgroup>` es afectar cómo [el algoritmo de generación de esquemas de documento](/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm) muestra los encabezados, pero **dicho algoritmo no ha sido implementado por ningún navegador**, la semántica de `<hgroup>` es por el momento solo teórica.
 > La especificación HTML5 (W3C) aconseja entonces cómo maquetar [subtítulos, títulos alternativos y lemas](https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements) sin utilizar `<hgroup>`.
 
diff --git a/files/es/web/html/element/hr/index.md b/files/es/web/html/element/hr/index.md
index c89cd1ca0f0d71..a7773757c992c0 100644
--- a/files/es/web/html/element/hr/index.md
+++ b/files/es/web/html/element/hr/index.md
@@ -141,6 +141,7 @@ Este es el segundo parrafo, separado del primero por una linea horizontal
 
 secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==
 
-> **Nota:** Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta MDC:Como ayudar.
diff --git a/files/es/web/html/element/iframe/index.md b/files/es/web/html/element/iframe/index.md
index 1100ca1e2ef74e..dbe6693b27f45b 100644
--- a/files/es/web/html/element/iframe/index.md
+++ b/files/es/web/html/element/iframe/index.md
@@ -11,7 +11,8 @@ El **elemento HTML `<iframe>`** (de inline frame) representa un {{Glossary("brow
 
 Cada elemento `<iframe>` tiene su propio [historial de sesión](/es/docs/Web/API/History) y su propio objeto [Documento](/es/docs/Web/API/Document). El contexto de navegación que incluye el contenido implícito se llama _contexto de navegación principal_. El contexto de navegación de nivel superior (que no tiene padre) es típicamente la ventana del navegador, representado por el objeto {{domxref("Window")}}.
 
-> **Advertencia:** Debido a que cada contexto de navegación es un entorno de documento completo, cada `<iframe>` en una página requiere más memoria y otros recursos informáticos. Aunque teóricamente puede utilizar tantos `<iframe>` como desee, compruebe si hay problemas de rendimiento.
+> [!WARNING]
+> Debido a que cada contexto de navegación es un entorno de documento completo, cada `<iframe>` en una página requiere más memoria y otros recursos informáticos. Aunque teóricamente puede utilizar tantos `<iframe>` como desee, compruebe si hay problemas de rendimiento.
 
 <table class="properties">
   <tbody>
@@ -82,13 +83,15 @@ Este elemento admite [atributos globales](/es/docs/Web/HTML/Atributos_Globales).
 
   - : Definido como `true` si el `<iframe>` puede activar el modo a pantalla completa llamando al método {{domxref("Element.requestFullscreen", "requestFullscreen()")}}.
 
-    > **Nota:** Se considera un atributo heredado y se redefine como `allow="fullscreen"`.
+    > [!NOTE]
+    > Se considera un atributo heredado y se redefine como `allow="fullscreen"`.
 
 - `allowpaymentrequest`
 
   - : Definido como `true` si se debe permitir que un `<iframe>` de origen cruzado pueda invocar el [API de solicitud de pago](/es/docs/Web/API/Payment_Request_API). <
 
-    > **Nota:** Se considera un atributo heredado y se redefine como `allow="payment"`.
+    > [!NOTE]
+    > Se considera un atributo heredado y se redefine como `allow="payment"`.
 
 - `csp` {{experimental_inline}}
   - : Una [Politica de Seguridad del Contenido](/es/docs/Web/HTTP/CSP) aplicada para el recurso incrustado. Vea {{domxref("HTMLIFrameElement.csp")}} para detalles.
@@ -140,7 +143,7 @@ Este elemento admite [atributos globales](/es/docs/Web/HTML/Atributos_Globales).
     - `allow-top-navigation`: Lets the resource navigate the top-level browsing context (the one named `_top`).
     - `allow-top-navigation-by-user-activation`: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.
 
-    > **Nota:**
+    > [!NOTE]
     >
     > - When the embedded document has the same origin as the embedding page, it is **strongly discouraged** to use both `allow-scripts` and `allow-same-origin`, as that lets the embedded document remove the `sandbox` attribute — making it no more secure than not using the `sandbox` attribute at all.
     > - Sandboxing is useless if the attacker can display content outside a sandboxed `iframe` — such as if the viewer opens the frame in a new tab. Such content should be also served from a _separate origin_ to limit potential damage.
@@ -183,7 +186,8 @@ Estos atributos están obsoletos y es posible que ya no sean compatibles con tod
 
   - : &#x20;
 
-    > **Nota:** See [Error 1318532 en Firefox](https://bugzil.la/1318532) for exposing this to WebExtensions in Firefox.
+    > [!NOTE]
+    > See [Error 1318532 en Firefox](https://bugzil.la/1318532) for exposing this to WebExtensions in Firefox.
 
     Makes the `<iframe>` act like a top-level browser window. See [Browser API](/es/docs/Mozilla/Gecko/Chrome/API/Browser_API) for details.
     **Available only to [WebExtensions](/es/docs/Mozilla/Add-ons/WebExtensions).**
diff --git a/files/es/web/html/element/img/index.md b/files/es/web/html/element/img/index.md
index 67a16a5bce98aa..74343ff03a11a8 100644
--- a/files/es/web/html/element/img/index.md
+++ b/files/es/web/html/element/img/index.md
@@ -7,7 +7,7 @@ slug: Web/HTML/Element/img
 
 El elemento de imagen HTML **`<img>`** representa una imagen en el documento.
 
-> **Nota:**
+> [!NOTE]
 > Los navegadores no siempre muestran la imagen a la que el elemento hace referencia. Es el caso de los navegadores no gráficos (incluyendo aquellos usados por personas con problemas de visión), sí el usuario elige no mostrar la imagen, o sí el navegador es incapaz de mostrarla porque no es válida o [soportada](/es/docs/Web/HTML/Elemento/img#Supported_image_formats). En ese caso, el navegador la reemplazará con el texto definido en el atributo `alt`.
 
 <table class="properties">
@@ -67,7 +67,8 @@ Este elemento incluye atributos globales.
 
   - : Este atributo define el texto alternativo que describe la imagen, texto que los usuarios verán si la URL de la imagen es errónea o la imagen tiene un [formato no soportado](/es/docs/Web/HTML/Elemento/img#Supported_image_formats) o si la imagen aún no se ha descargado.
 
-    > **Nota:** Omitir este atributo indica que la imagen es una parte clave del contenido, y no tiene equivalencia textual. Establecer este atributo como cadena vacía indica que la imagen no es una parte clave del contenido; los navegadores no gráficos pueden omitirlo.
+    > [!NOTE]
+    > Omitir este atributo indica que la imagen es una parte clave del contenido, y no tiene equivalencia textual. Establecer este atributo como cadena vacía indica que la imagen no es una parte clave del contenido; los navegadores no gráficos pueden omitirlo.
 
 - `border` {{deprecated_inline}}
 
@@ -92,7 +93,8 @@ Este elemento incluye atributos globales.
 
   - : Este atributo boleano indica que la imagen es parte del mapa del lado del servidor. Así que, se envían las coordenadas precisas de un clic.
 
-    > **Nota:** Este atributo está permitido solo si el elemento `<img>` es descendiente de un elemento {{htmlelement("a")}} con un atributo [`href`](/es/docs/Web/HTML/Element/a#href) válido.
+    > [!NOTE]
+    > Este atributo está permitido solo si el elemento `<img>` es descendiente de un elemento {{htmlelement("a")}} con un atributo [`href`](/es/docs/Web/HTML/Element/a#href) válido.
 
 - `longdesc`
   - : La URL como descripción de una imagen mostrada, complementa al texto de `alt`.
@@ -141,7 +143,8 @@ Este elemento incluye atributos globales.
 
   - : La URL parcial (empezando con '#') de un [mapa de imagea](/es/docs/HTML/Element/map) asociado a un elemento.
 
-    > **Nota:** No puedes usar este atributo si el elemento `<img>` es descendiente de un elemento {{htmlelement("a")}} o {{HTMLElement("button")}}.
+    > [!NOTE]
+    > No puedes usar este atributo si el elemento `<img>` es descendiente de un elemento {{htmlelement("a")}} o {{HTMLElement("button")}}.
 
 - `vspace` {{deprecated_inline}}
   - : El número de píxeles de espacio blanco insertado sobre y bajo la imagen.
@@ -159,7 +162,7 @@ El estándar de HTML no ofrece una lista de formatos de imagen soportados, de mo
 - [BMP ICO](http://en.wikipedia.org/wiki/ICO_%28file_format%29)
 - [PNG ICO](http://en.wikipedia.org/wiki/ICO_%28file_format%29)
 
-> **Nota:**
+> [!NOTE]
 > Soporte para formato [XBM](http://en.wikipedia.org/wiki/X_BitMap) fue eliminado en Gecko 1.9.2.
 
 ## Interacción con CSS
diff --git a/files/es/web/html/element/index.md b/files/es/web/html/element/index.md
index ddcfb52c19ff3b..75490c394aed4d 100644
--- a/files/es/web/html/element/index.md
+++ b/files/es/web/html/element/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element
 
 Esta página lista todos los {{Glossary("Element","elementos")}} {{Glossary("HTML")}}. Están agrupados por funciones para ayudarte a encontrar lo que tienes en mente con facilidad. Aunque esta guía está escrita para aquellos que son nuevos escribiendo código, se pretende que sea una referencia útil para cualquiera.
 
-> **Nota:** Para más información básica acerca de los elementos y atributos HTML, vea [la sección sobre elementos en el artículo 'Introducción a HTML'](/es/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks).
+> [!NOTE]
+> Para más información básica acerca de los elementos y atributos HTML, vea [la sección sobre elementos en el artículo 'Introducción a HTML'](/es/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks).
 
 ## Raíz principal
 
@@ -220,7 +221,8 @@ Los Componentes Web son una tecnología relacionada con HTML que hacen que sea p
 
 ## Elementos obsoletos y en desuso
 
-> **Advertencia:** Estos son elementos HTML viejos los cuales están obsoletos y no deben usarse. **Nunca debería usarlos en un nuevo proyecto y debería reemplazarlos en proyectos viejos tan pronto como sea posible.** Se listan aquí solo con propósitos informativos.
+> [!WARNING]
+> Estos son elementos HTML viejos los cuales están obsoletos y no deben usarse. **Nunca debería usarlos en un nuevo proyecto y debería reemplazarlos en proyectos viejos tan pronto como sea posible.** Se listan aquí solo con propósitos informativos.
 
 | Elemento                     | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
diff --git a/files/es/web/html/element/input/color/index.md b/files/es/web/html/element/input/color/index.md
index 600ab2972d6708..83ec44da42b929 100644
--- a/files/es/web/html/element/input/color/index.md
+++ b/files/es/web/html/element/input/color/index.md
@@ -22,7 +22,8 @@ La presentación del elemento puede variar considerablamente entre navegadores y
 
 El [`value`](/es/docs/Web/HTML/Element/input#value) de un elemento {{HTMLElement("input")}} del tipo «`color`» es siempre una {{domxref("DOMString")}} que contiene una cadena de siete caracteres en la que se especifica un color RGB de manera hexadecimal. Aunque es posible introducir el color tanto en mayúsculas como en minúsculas, este se almacena en minúsculas. El valor nunca presenta otra forma y nunca está vacío.
 
-> **Nota:** definir el valor a cualquier cosa que no sea un color válido, totalmente opaco y contenido dentro del espacio RGB _en notación hexadecimal_ causará que el valor se establezca a «`#000000`». En particular, no es posible utilizar los nombres de colores estandarizados de CSS ni cualquier sintaxis de función CSS para definir el valor. Esto tiene sentido si se tiene en cuenta que HTML y CSS son lenguajes y especificaciones independientes. Por otra parte, no se admiten los colores que incluyan un canal alfa; definir un color en la notación hexadecimal de nueve caracteres (p. ej., `#009900aa`) también provocará que el valor se establezca a «`#000000`».
+> [!NOTE]
+> Definir el valor a cualquier cosa que no sea un color válido, totalmente opaco y contenido dentro del espacio RGB _en notación hexadecimal_ causará que el valor se establezca a «`#000000`». En particular, no es posible utilizar los nombres de colores estandarizados de CSS ni cualquier sintaxis de función CSS para definir el valor. Esto tiene sentido si se tiene en cuenta que HTML y CSS son lenguajes y especificaciones independientes. Por otra parte, no se admiten los colores que incluyan un canal alfa; definir un color en la notación hexadecimal de nueve caracteres (p. ej., `#009900aa`) también provocará que el valor se establezca a «`#000000`».
 
 ## Uso de las entradas de color
 
diff --git a/files/es/web/html/element/input/date/index.md b/files/es/web/html/element/input/date/index.md
index a2a4fd0aacdd41..227742629527f9 100644
--- a/files/es/web/html/element/input/date/index.md
+++ b/files/es/web/html/element/input/date/index.md
@@ -68,7 +68,8 @@ Puedes establecer un valor por defecto para la entrada introduciendo una fecha e
 
 {{EmbedLiveSample('Value', 600, 40)}}
 
-> **Nota:** El formato mostrado puede ser diferente del `value` real, ya que la fecha mostrada es formateada _según el idioma del navegador del usuario_, pero el valor analizado es siempre formateado a `aaaa-mm-dd`.
+> [!NOTE]
+> El formato mostrado puede ser diferente del `value` real, ya que la fecha mostrada es formateada _según el idioma del navegador del usuario_, pero el valor analizado es siempre formateado a `aaaa-mm-dd`.
 
 Tu puedes obtener y establecer el valor fecha en JavaScript con las propiedades `value` y `valueAsNumber` de {{domxref("HTMLInputElement")}}. Por ejemplo:
 
@@ -103,11 +104,13 @@ El atributo `step` es un número que especifica la granularidad que un valor deb
 
 Si le damos un valor de cadena de texto `any` significa que ningún salto está marcado y, por lo tanto, cualquier valor está permitido (expecto otras constricciones, como [`min`](#min) y [`max`](#max)).
 
-> **Nota:** Cuando los datos introducidos por el usuario no siguen la configuración de avance, puede que el {{Glossary("user agent")}} lo redondeé al valor válido más cercano, prefiriendo valores mayores cuando hay dos opciones iguales cercanas.
+> [!NOTE]
+> Cuando los datos introducidos por el usuario no siguen la configuración de avance, puede que el {{Glossary("user agent")}} lo redondeé al valor válido más cercano, prefiriendo valores mayores cuando hay dos opciones iguales cercanas.
 
 Para entradas de tipo `date`, el valor del `step` es dado en días; y es tratado como el número de milisegundo igual a 86.400.000 veces el valor del `step` (el valor numérico subyacente está definido en milisegundos). El valor por defecto del `step` es 1, indicando 1 día.
 
-> **Nota:** Especificar `any` como el valor para `step` tiene el mismo efecto que `1` para las entradas de tipo `date`.
+> [!NOTE]
+> Especificar `any` como el valor para `step` tiene el mismo efecto que `1` para las entradas de tipo `date`.
 
 ## Usando entradas de tipo fecha
 
@@ -153,7 +156,8 @@ Tu puedes usar los atributos [`min`](/es/docs/Web/HTML/Element/input#min) y [`ma
 
 Como resultado, obtenemos que solo los días del mes de abril de 2017 pueden ser seleccionados (los meses y años que forman parte de la caja de texto no serán editables y las fechas fuera del mes de abril de 2017 no pueden ser selecionados en el menú de selección).
 
-> **Nota:** Tu _debes_ ser capaz de usar el atributo [`step`](/es/docs/Web/HTML/Element/input#step) para modificar el número de días que son saltados cada vez que la fecha es incrementada (por ejemplo, que solo los sábados sean seleccionables). Sin embargo, no parece estar en ninguna implementación en el momento de escribir este artículo.
+> [!NOTE]
+> Tu _debes_ ser capaz de usar el atributo [`step`](/es/docs/Web/HTML/Element/input#step) para modificar el número de días que son saltados cada vez que la fecha es incrementada (por ejemplo, que solo los sábados sean seleccionables). Sin embargo, no parece estar en ninguna implementación en el momento de escribir este artículo.
 
 ### Controlando el tamaño del input
 
@@ -213,7 +217,8 @@ input:valid + span::after {
 }
 ```
 
-> **Advertencia:** La validación en el lado del cliente _no es un sustituto_ de la validación en el servidor. Es fácil para alguien modificar el HTML o sobrepasar tu HTML completamente y mandar datos directamente a tu servidor. Si tu servidor no valida los datos recibidos, puede ocurrir un desastre: datos con un mal formato, demasiado grandes, del tipo equivocado, etc.
+> [!WARNING]
+> La validación en el lado del cliente _no es un sustituto_ de la validación en el servidor. Es fácil para alguien modificar el HTML o sobrepasar tu HTML completamente y mandar datos directamente a tu servidor. Si tu servidor no valida los datos recibidos, puede ocurrir un desastre: datos con un mal formato, demasiado grandes, del tipo equivocado, etc.
 
 ## Manejando el soporte de los navegadores
 
diff --git a/files/es/web/html/element/input/email/index.md b/files/es/web/html/element/input/email/index.md
index 80739664a43676..4e057b7043814e 100644
--- a/files/es/web/html/element/input/email/index.md
+++ b/files/es/web/html/element/input/email/index.md
@@ -96,7 +96,8 @@ La entrada fallará la [restricción de validación](/es/docs/Web/Guide/HTML/Con
 
 Un atributo booleano que, si está presente, indica que el usuario puede ingresar una lista de múltiples direcciones de correo, separadas por coma y, opcionalmente, espacios en blanco. Consulta [Permitiendo múltiples dirreciones de correo](#permitiendo_multiples_dirrecciones_de_correo) para ver un ejemplo o [Atributo HTML: multiple](/es/docs/Web/HTML/Attributes/multiple) para más detalles.
 
-> **Nota:** Normalmente, si especificas el atributo [`required`](/es/docs/Web/HTML/Element/input#required), el usuario debe ingresar una dirección de correo válida para que el campo se considere válido. Sin embargo, si agregas el atributo `multiple`, una lista de cero direcciones de correo electrónico (una cadena vacía o una que sea completamente en blanco) es un valor válido. En otras palabras, el usuario no tiene que ingresar ni siquiera una dirección de correo electrónico cuando se especifica `multiple`, independientemente del valor de `required`.
+> [!NOTE]
+> Normalmente, si especificas el atributo [`required`](/es/docs/Web/HTML/Element/input#required), el usuario debe ingresar una dirección de correo válida para que el campo se considere válido. Sin embargo, si agregas el atributo `multiple`, una lista de cero direcciones de correo electrónico (una cadena vacía o una que sea completamente en blanco) es un valor válido. En otras palabras, el usuario no tiene que ingresar ni siquiera una dirección de correo electrónico cuando se especifica `multiple`, independientemente del valor de `required`.
 
 ## pattern
 
@@ -104,7 +105,8 @@ El atributo `pattern`, cuando es especificado, es una expresión regular que el
 
 Si el patrón no está especificado o es inválido, no se aplica la expresión regular y el atributo es completamente ignorado.
 
-> **Nota:** Usa el atributo [`title`](/es/docs/Web/HTML/Element/input#title) para especificar un texto que muchos navegadores mostrarán como una indicación para explicar qué requerimientos se deben seguir para que se cumpla el patrón. También debes incluir otro texto explicativo cerca.
+> [!NOTE]
+> Usa el atributo [`title`](/es/docs/Web/HTML/Element/input#title) para especificar un texto que muchos navegadores mostrarán como una indicación para explicar qué requerimientos se deben seguir para que se cumpla el patrón. También debes incluir otro texto explicativo cerca.
 
 Véase la sección [Validación de patrón](#validacion_de_patron) para más detalles y un ejemplo.
 
@@ -114,13 +116,15 @@ El atributo `placeholder` es una cadena de texto que proporciana una breve pista
 
 Si el contenido del control tiene una direccionalidad ({{Glossary("LTR")}} o {{Glossary("RTL")}}) pero necesita presentar el marcador de posición en la dirección opuesta, puedes usar el algotimo bidireccional Unicode para formatear caracteres para sobreescribir la direccionalidad dentro del marcador de posición; véase [Como usar los controles de Unicode para texto bidireccional](https://www.w3.org/International/questions/qa-bidi-unicode-controls).
 
-> **Nota:** Evita usar el atributo `placeholder` si puedes. No es semánticamente útil como otras formas de explicar el formulario y puede causar errores técnicos inesperados con tu contenido. Véase [Labels and placeholders](/es/docs/Web/HTML/Element/input#labels_and_placeholders) for more information.
+> [!NOTE]
+> Evita usar el atributo `placeholder` si puedes. No es semánticamente útil como otras formas de explicar el formulario y puede causar errores técnicos inesperados con tu contenido. Véase [Labels and placeholders](/es/docs/Web/HTML/Element/input#labels_and_placeholders) for more information.
 
 ### `readonly`
 
 Un atributo Booleano que, si está presente, significa que el campo no puede ser editado por el usuario. Su `value` puede, aun así, ser cambiado directamente con código JavaScript configurando la propiedad [HTMLInputElement](/es/docs/Web/API/HTMLInputElement) `value`.
 
-> **Nota:** Porque un campo solo de lectura no puede tener un valor, `required` no tiene ningún efecto sobre las entradas de texto que también tienen el atributo `readonly` especificado.
+> [!NOTE]
+> Porque un campo solo de lectura no puede tener un valor, `required` no tiene ningún efecto sobre las entradas de texto que también tienen el atributo `readonly` especificado.
 
 ### `size`
 
@@ -134,7 +138,8 @@ Las direcciones de correo se encuentran entre los formularios de datos textuales
 
 Sin embargo, es importante tener en cuenta que esto no es suficiente para garantizar que el texto especificado sea una dirección de correo que realmente exista, que corresponda al usuario del sitio o que sea aceptable de cualquier otra manera. Simplemente garantiza que el valor del campo tenga el formato adecuado para ser una dirección de correo.
 
-> **Nota:** También es crucial recordar que un usuario puede jugar con tu HTML detrás de la escena, por lo que tu sitio _no debe_ utilizar esta validación por motivos de seguridad. _Debes_ verificar la dirección de correo en el lado del servidor de cualquier transacción en la que el texto proporcionado pueda tener implicaciones de seguridad de cualquier tipo.
+> [!NOTE]
+> También es crucial recordar que un usuario puede jugar con tu HTML detrás de la escena, por lo que tu sitio _no debe_ utilizar esta validación por motivos de seguridad. _Debes_ verificar la dirección de correo en el lado del servidor de cualquier transacción en la que el texto proporcionado pueda tener implicaciones de seguridad de cualquier tipo.
 
 ### Una sencilla entrada de correo
 
@@ -160,7 +165,8 @@ Al agregar el atributo booleano [multiple](/es/docs/Web/HTML/Attributes/multiple
 
 La entrada ahora se considera válida cuando se ingresa una sola dirección de correo, o cuando cualquier número de direcciones de correo electrónico separadas por coma y opcionalmente, algún número de espacios en blanco están presentes
 
-> **Nota:** Cuando se utiliza `multiple`, el valor _puede_ estar vacío.
+> [!NOTE]
+> Cuando se utiliza `multiple`, el valor _puede_ estar vacío.
 
 Algunos ejemplos de cadenas válidas cuando se especifica `multiple`:
 
@@ -253,7 +259,8 @@ Con el elemento {{HTMLElement("datalist")}} y sus {{HTMLElement("option")}} en s
 
 Hay dos niveles de validación de contenido disponibles para las entradas de `email`. Primero, está el nivel de validación estándar que se ofrece a todos los {{HTMLElement("input")}}, que automáticamente asegura que el contenido cumple con los requisitos para ser una dirección de correo válida. Pero también existe la opción de agregar filtros adicionales para garantizar que se satisfagan tus propias necesidades especializadas, si las tienes.
 
-> **Advertencia:** La validación del formulario HTML _no_ sustituye a los scripts que garantizan que los datos ingresados tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos, datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).
+> [!WARNING]
+> La validación del formulario HTML _no_ sustituye a los scripts que garantizan que los datos ingresados tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos, datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).
 
 </div>
 
@@ -268,7 +275,8 @@ Los navegadores que admiten el tipo de entrada `email` automáticamente proporci
 
 Para obtener más información sobre cómo funciona la validación de formularios y cómo aprovechar las propiedades de CSS {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} para estilizar la entrada en función de si el el valor actual es válido, consulta [validación de datos de formulario](/es/docs/Learn/Forms/Form_validation).
 
-> **Nota:** Existen problemas de especificación conocidos relacionados con los nombres de dominio internacionales y la validación de direcciones de correo electrónico en HTML. Consulta el [W3C bug 15489](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489).
+> [!NOTE]
+> Existen problemas de especificación conocidos relacionados con los nombres de dominio internacionales y la validación de direcciones de correo electrónico en HTML. Consulta el [W3C bug 15489](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489).
 
 ### Patrón de validación
 
@@ -348,7 +356,8 @@ Es por eso que, en cambio, especificamos la cadena "Por favor, proporciona solo
 
 ![](email-pattern-match-bad.png)
 
-> **Nota:** Si tienes problemas al escribir tus expresiones regulares de validación y no funcionan correctamente, consulta la consola de tu navegador; posiblemente haya útiles mensajes de error que te ayudarán a resolver el problema.
+> [!NOTE]
+> Si tienes problemas al escribir tus expresiones regulares de validación y no funcionan correctamente, consulta la consola de tu navegador; posiblemente haya útiles mensajes de error que te ayudarán a resolver el problema.
 
 ## Ejemplos
 
diff --git a/files/es/web/html/element/input/hidden/index.md b/files/es/web/html/element/input/hidden/index.md
index 94244959a96337..8f4a4ca148b4fe 100644
--- a/files/es/web/html/element/input/hidden/index.md
+++ b/files/es/web/html/element/input/hidden/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/input/hidden
 
 {{HTMLElement("input")}} elements of type **`"hidden"`** let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.
 
-> **Nota:** Hay un ejemplo en vivo debajo de las siguientes líneas de código — si esta funcionando correctamente no debería ver algo.
+> [!NOTE]
+> Hay un ejemplo en vivo debajo de las siguientes líneas de código — si esta funcionando correctamente no debería ver algo.
 
 ## Ejemplo
 
@@ -28,7 +29,8 @@ slug: Web/HTML/Element/input/hidden
 
 El atributo [`value`](/es/docs/Web/HTML/Element/input#value) del elemento {{HTMLElement("input")}} tiene un {{domxref("DOMString")}} que contiene la información oculta que se desea incluir en el formulario cuando sea remitido al servidor. Específicamente no puede ser editado por el usuario o mostrado a éste por medio la interfaz de usuario, aunque puede ser editado por medio de las herramientas para desarrolladores del navegador.
 
-> **Advertencia:** Mientras que el valor no es desplegado al usuario en el contenido de la página, si es visible —y puede ser modificado—usando las herramientas para desarrolladores de cualquier navegador o la funcionalidad "Ver código fuente" (View Source). No confíe en `hidden` inputs como una forma de seguridad.
+> [!WARNING]
+> Mientras que el valor no es desplegado al usuario en el contenido de la página, si es visible —y puede ser modificado—usando las herramientas para desarrolladores de cualquier navegador o la funcionalidad "Ver código fuente" (View Source). No confíe en `hidden` inputs como una forma de seguridad.
 
 ## Utilizando hidden inputs
 
@@ -52,7 +54,8 @@ Hidden inputs también son usados para almacenar y enviar token de seguirdad o s
 
 Esto evitaría que un usuario malicioso creara un formulario falso, fingiendo ser un banco y enviando el formulario por correo electrónico a usuarios desprevenidos para engañarlos y que transfieran dinero al lugar equivocado. Este tipo de ataque es llamado como [Cross Site Request Forgery (CSRF)](</es/docs/Learn/Server-side/First_steps/Website_security#Cross_Site_Request_Forgery_(CSRF)>); prácticamente cualquier marco de trabajo que goce de buena reputación utiliza secretos ocultos para evitar tales ataques.
 
-> **Nota:** Como se menciono anteriormenre, colocando el secreto en un hidden input no lo hace inherentemente seguro. La composición y codificación de la llave haría eso. El valor del hidden input es que mantiene el secreto asociado con la información y automáticamente lo incluye cuando el formulario es enviado al servidor. Se necesita usar secretos bien diseñados para realmente mantener seguro el sitio web.
+> [!NOTE]
+> Como se menciono anteriormenre, colocando el secreto en un hidden input no lo hace inherentemente seguro. La composición y codificación de la llave haría eso. El valor del hidden input es que mantiene el secreto asociado con la información y automáticamente lo incluye cuando el formulario es enviado al servidor. Se necesita usar secretos bien diseñados para realmente mantener seguro el sitio web.
 
 ## Validación
 
@@ -129,7 +132,8 @@ La salida se vería como:
 
 {{ EmbedLiveSample('Examples', '100%', 200) }}
 
-> **Nota:** Puede encontrar el ejemplo en GitHub (vea el [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html), y también [veálo corriendo en vivo](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)).
+> [!NOTE]
+> Puede encontrar el ejemplo en GitHub (vea el [código fuente](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html), y también [veálo corriendo en vivo](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)).
 
 Cuando se envían, los datos del formulario enviados al servidor tendrán un aspecto parecido a este:
 
diff --git a/files/es/web/html/element/input/index.md b/files/es/web/html/element/input/index.md
index 4d83dbf23a18dd..6aed3559548e41 100644
--- a/files/es/web/html/element/input/index.md
+++ b/files/es/web/html/element/input/index.md
@@ -278,7 +278,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 
   - : Una pista para el usuario sobre lo que puede introducir en el control. El texto no debe contener saltos de línea.
 
-    > **Nota:** No se debe usar el atributo `placeholder` en lugar de un elemento {{HTMLElement("label")}}, pues sus propósitos son diferentes. El elemento {{HTMLElement("label")}} describe el rol del elemento en el formulario (es decir, indica qué tipo de información se espera), y el atributo `placeholder` es una pista sobre el formato que debe tener el contenido. Hay casos en los que el atributo `placeholder` no es visible para el usuario, por lo que el formulario debe ser comprensible para el usuario aunque este atributo no esté presente.
+    > [!NOTE]
+    > No se debe usar el atributo `placeholder` en lugar de un elemento {{HTMLElement("label")}}, pues sus propósitos son diferentes. El elemento {{HTMLElement("label")}} describe el rol del elemento en el formulario (es decir, indica qué tipo de información se espera), y el atributo `placeholder` es una pista sobre el formato que debe tener el contenido. Hay casos en los que el atributo `placeholder` no es visible para el usuario, por lo que el formulario debe ser comprensible para el usuario aunque este atributo no esté presente.
 
 - `readonly`
   - : Este atributo indica que el usuario no puede modificar el valor del control. El valor del atributo es irrelevante. De ser necesario el acceso lectura-escritura al valor, _no_ se debe agregar el atributo "**readonly**". Es ignorado si el atributo **type** es `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, o de tipo botón (como `button` o `submit`).
@@ -318,7 +319,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 
 ### Introducción de archivos
 
-> **Nota:** A partir de Gecko 2.0, llamar al método `click()` en un elemento `<input>` de tipo "file" abre el selector de archivos y permite al usuario seleccionar archivos. Véase [Utilizar ficheros desde aplicaciones web](/es/docs/Using_files_from_web_applications) para ejemplos y más detalles.
+> [!NOTE]
+> A partir de Gecko 2.0, llamar al método `click()` en un elemento `<input>` de tipo "file" abre el selector de archivos y permite al usuario seleccionar archivos. Véase [Utilizar ficheros desde aplicaciones web](/es/docs/Using_files_from_web_applications) para ejemplos y más detalles.
 
 No se puede establecer el valor de un selector de archivos desde un script. Hacer algo como lo siguiente no tiene efecto alguno:
 
diff --git a/files/es/web/html/element/input/number/index.md b/files/es/web/html/element/input/number/index.md
index e9d53db14eb397..dac71a5d28863f 100644
--- a/files/es/web/html/element/input/number/index.md
+++ b/files/es/web/html/element/input/number/index.md
@@ -82,13 +82,15 @@ El atributo `placeholder` es una cadena de texto que proporciona una pista corta
 
 Si el controlador de contenido tiene una direccionalidad ({{Glossary("LTR")}} o {{Glossary("RTL")}}), pero necesitas presentar el marcador de posición en la direccionalidad opuesta, puedes usar el algoritmo bidireccional para formatear caracteres Unicode para sobreescribir la direccionalidad del marcador de posición; véase [Cómo usar los controles Unicode para texto bidireccional](https://www.w3.org/International/questions/qa-bidi-unicode-controls) para más información.
 
-> **Nota:** Evita usar el atributo `placeholder` si puedes. No es semánticamente útil como otras formas de explicar tu formulario, y puede causar problemas técnicos imprevisto con tu contenido. Véase [Marcadores y parámetros de ejemplo](/es/docs/Web/HTML/Element/input#marcadores_y_parámetros_de_ejemplo) para más información.
+> [!NOTE]
+> Evita usar el atributo `placeholder` si puedes. No es semánticamente útil como otras formas de explicar tu formulario, y puede causar problemas técnicos imprevisto con tu contenido. Véase [Marcadores y parámetros de ejemplo](/es/docs/Web/HTML/Element/input#marcadores_y_parámetros_de_ejemplo) para más información.
 
 ### `readonly`
 
 Un atributo booleano el cual, si está presente, expresa que este campo no puede ser editado por el usuario. Este `value` puede todavía cambiarse con JavaScript directamente estableciendo la propiedad {{domxref("HTMLInputElement")}} `value`.
 
-> **Nota:** A causa de que una entrada de solo lectura no puede tener un valor, `required` no tiene ningún efecto en entradas con el atributo `readonly`.
+> [!NOTE]
+> A causa de que una entrada de solo lectura no puede tener un valor, `required` no tiene ningún efecto en entradas con el atributo `readonly`.
 
 ### `step`
 
@@ -96,7 +98,8 @@ El atributo `step` es un número que especifica la granularidad a la que debe ad
 
 Un valor de cadena `any` significa que ningún escalonado es implicado, y cualquier valor es permitido (salvo otras restricciones, tales como [`min`](#min) and [`max`](#max)).
 
-> **Nota:** Cuando los datos ingresados por el usuario no se adhieran a la configuración de escalonado, el _{{Glossary("user agent","user-agent")}}_ puede redondear al valor válido más cercano, prefiriendo números en la dirección positiva cuando hayan dos opciones igualmente cercanas.
+> [!NOTE]
+> Cuando los datos ingresados por el usuario no se adhieran a la configuración de escalonado, el _{{Glossary("user agent","user-agent")}}_ puede redondear al valor válido más cercano, prefiriendo números en la dirección positiva cuando hayan dos opciones igualmente cercanas.
 
 El valor por omisión para entradas `number` es `1`, permitiendo solo ingresar números enteros, _a menos que_ la base del escalonado no sea un entero.
 
@@ -110,9 +113,11 @@ La entrada de tipo `number` solo debe usarse para números incrementales, especi
 
 Los elementos `<input type="number">` pueden ayudar a simplificar tu trabajo cuando construyes la interfaz de usuario y la lógica para introducir números en un formulario. Cuando creas una entrada con el valor de `type` adecuado, `number`, consigues validación automática de que el texto introducido es un número y usualmente un conjunto de botones arriba/abajo para incrementar o disminuir el valor.
 
-> **Advertencia:** Ten en mente que, lógicamente, no deberías poder ingresar otros caracteres que no sean números dentro de una entrada numérica. Parece haber algo de desacuerdo acerca de esto entre navegadores; ver [Error 1398528 en Firefox](https://bugzil.la/1398528).
+> [!WARNING]
+> Ten en mente que, lógicamente, no deberías poder ingresar otros caracteres que no sean números dentro de una entrada numérica. Parece haber algo de desacuerdo acerca de esto entre navegadores; ver [Error 1398528 en Firefox](https://bugzil.la/1398528).
 
-> **Nota:** Un usuario puede jugar con tu HTML tras bambalinas, así que tu sitio _no debe_ usar validación simple del lado del cliente para ningún fin de seguridad. Tú _debes_ verificar en el lado del servidor cualquier transacción en la cual el valor provisto pueda tener alguna implicación de seguridad de cualquier tipo.
+> [!NOTE]
+> Un usuario puede jugar con tu HTML tras bambalinas, así que tu sitio _no debe_ usar validación simple del lado del cliente para ningún fin de seguridad. Tú _debes_ verificar en el lado del servidor cualquier transacción en la cual el valor provisto pueda tener alguna implicación de seguridad de cualquier tipo.
 
 Los navegadores de móviles ayudan más con la experiencia de usuario mostrando un teclado especial mejor adaptado para ingresar números cuando el usuario intenta ingresar un valor.
 
@@ -129,7 +134,8 @@ En su forma más básica, una entrada numérica puede ser implementada así:
 
 Una entrada numérica es considerada válida cuando está vacía y cuando un único número es ingresado, pero en cualquier otro caso es inválida. Si el atributo [`required`](/es/docs/Web/HTML/Element/input#required) es usado, la entrada ya no es considerada válida cuando está vacía.
 
-> **Nota:** Cualquier número es un valor aceptable, en la medida de que sea un [número de coma flotante válido](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number), es decir, que no sea [NaN](/es/docs/Web/JavaScript/Reference/Global_Objects/NaN) o [Infinity](/es/docs/Web/JavaScript/Reference/Global_Objects/Infinity).
+> [!NOTE]
+> Cualquier número es un valor aceptable, en la medida de que sea un [número de coma flotante válido](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number), es decir, que no sea [NaN](/es/docs/Web/JavaScript/Reference/Global_Objects/NaN) o [Infinity](/es/docs/Web/JavaScript/Reference/Global_Objects/Infinity).
 
 ### Marcadores de posición (Placeholders)
 
@@ -283,7 +289,8 @@ Aquí utilizamos las pseudoclases {{cssxref(":invalid")}} y {{cssxref(":valid")}
 
 Lo colocamos en un elemento separado `<span>` para mayor flexibilidad. Algunos navegadores no muestran contenido generado muy eficientemente en algunos tipos o entradas de formulario. (Lee, por ejemplo, la sección sobre [validación `<input type="date">`](/es/docs/Web/HTML/Element/input/date#validation)).
 
-> **Advertencia:** ¡La validación de formularios HTML _no_ es subtituye la validación del lado del servidor que asegura que los datos estén en el formato apropiado!
+> [!WARNING]
+> ¡La validación de formularios HTML _no_ es subtituye la validación del lado del servidor que asegura que los datos estén en el formato apropiado!
 >
 > Es demasiado fácil para alguien hacer ajustes al HTML que le permitan evitar la validación o removerla completamente. También es posible para alguien evadir tu HTML y enviar los datos directamente a tu servidor.
 >
@@ -417,7 +424,8 @@ Después de declarar unas pocas variables, un manejador de eventos es agregado a
 
 (Fíjate que aquí no estamos convirtiendo de aquí para allá entre metros y pies/pulgadas, lo que probablemente haría una aplicación web en la vida real.)
 
-> **Nota:** Cuando el usuario haga clic en el botón, el atributo `required` de la(s) entradas que estemos ocultando son removidos, y vaciará `value`. Así nos aseguramos que el formulario puede ser enviado si ambos conjuntos de entradas no están llenas. También asegura que el formulario no enviará datos que el usuario no quiere.
+> [!NOTE]
+> Cuando el usuario haga clic en el botón, el atributo `required` de la(s) entradas que estemos ocultando son removidos, y vaciará `value`. Así nos aseguramos que el formulario puede ser enviado si ambos conjuntos de entradas no están llenas. También asegura que el formulario no enviará datos que el usuario no quiere.
 >
 > ¡Si no hiciera eso, tendrías que llenar ambos pies/pulgadas **y** metros para enviar el formulario!
 
diff --git a/files/es/web/html/element/input/range/index.md b/files/es/web/html/element/input/range/index.md
index 1dd9a0f283ba63..394828bbc7bef7 100644
--- a/files/es/web/html/element/input/range/index.md
+++ b/files/es/web/html/element/input/range/index.md
@@ -195,7 +195,8 @@ HTML
 Captura de pantalla
 ![Screenshot of a plain slider control on macOS](macslider-labels.png)
 
-> **Nota:** Actualmente, ningún navegador soporta todas estas características. Firefox no soporta ni marcas ni etiquetas, mientras que Chrome soporta las marcas pero no las etiquetas.
+> [!NOTE]
+> Actualmente, ningún navegador soporta todas estas características. Firefox no soporta ni marcas ni etiquetas, mientras que Chrome soporta las marcas pero no las etiquetas.
 
 ### Cambiar la orientación
 
@@ -203,7 +204,8 @@ Captura de pantalla
 
 Por defecto, si un navegador renderiza un input range, lo mostrará como un "slider" (deslizador) que se desliza hacia la izquierda y hacia la derecha. By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. Sin embargo puedes cambiar esto fácilmente para que se deslice hacia arriba y hacia abajo simplemente usando CSS
 
-> **Nota:** Esto aún no está implementado por los principales navegadores. This is not actually implemented yet by any of the major browsers. See Firefox [Error 981916 en Firefox](https://bugzil.la/981916), [Chrome bug 341071](https://bugs.chromium.org/p/chromium/issues/detail?id=341071).
+> [!NOTE]
+> Esto aún no está implementado por los principales navegadores. This is not actually implemented yet by any of the major browsers. See Firefox [Error 981916 en Firefox](https://bugzil.la/981916), [Chrome bug 341071](https://bugs.chromium.org/p/chromium/issues/detail?id=341071).
 
 #### Control de rango horizontal
 
diff --git a/files/es/web/html/element/input/text/index.md b/files/es/web/html/element/input/text/index.md
index 2b19458ef73e34..16048810639012 100644
--- a/files/es/web/html/element/input/text/index.md
+++ b/files/es/web/html/element/input/text/index.md
@@ -106,7 +106,8 @@ El atributo `pattern`, cuando se especifica, es una expresión regular que el [`
 
 Si el patrón especificado no se especifica o no es válido, no se aplica ninguna expresión regular y este atributo se ignora por completo.
 
-> **Nota:** Utiliza el atributo [`title`](/es/docs/Web/HTML/Element/input#title) para especificar el texto que la mayoría de los navegadores mostrarán como información sobre herramientas para explicar cuáles son los requisitos para coincidir con el patrón. También debes incluir otro texto explicativo cercano.
+> [!NOTE]
+> Utiliza el atributo [`title`](/es/docs/Web/HTML/Element/input#title) para especificar el texto que la mayoría de los navegadores mostrarán como información sobre herramientas para explicar cuáles son los requisitos para coincidir con el patrón. También debes incluir otro texto explicativo cercano.
 
 Consulta [Especificación de un patrón](#especificación_de_un_patrón) para obtener más detalles y un ejemplo.
 
@@ -116,13 +117,15 @@ El atributo `placeholder` es una cadena que proporciona una breve pista al usuar
 
 Si el contenido del control tiene una direccionalidad ({{Glossary("LTR")}} o {{Glossary("RTL")}}) pero necesitas presentar el marcador de posición en la direccionalidad opuesta, puedes usar caracteres de formato de algoritmo bidireccional Unicode para anular la direccionalidad dentro del marcador de posición; consulta [Anulación de BiDi mediante caracteres de control Unicode](/es/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm#anulación_de_bidi_mediante_caracteres_de_control_unicode) para esos caracteres.
 
-> **Nota:** Evita utilizar el atributo `placeholder` si puedes. No es tan útil semánticamente como otras formas de explicar tu formulario y puede causar problemas técnicos inesperados con tu contenido. Consulta [Etiquetas y marcadores de posición](/es/docs/Web/HTML/Element/input#etiquetas_y_marcadores_de_posición) para obtener más información.
+> [!NOTE]
+> Evita utilizar el atributo `placeholder` si puedes. No es tan útil semánticamente como otras formas de explicar tu formulario y puede causar problemas técnicos inesperados con tu contenido. Consulta [Etiquetas y marcadores de posición](/es/docs/Web/HTML/Element/input#etiquetas_y_marcadores_de_posición) para obtener más información.
 
 ### `readonly`
 
 Un atributo booleano que, si está presente, significa que el usuario no puede editar este campo. Su `value`, sin embargo, aún se puede cambiar mediante el código JavaScript configurando directamente la propiedad {{DOMxRef("HTMLInputElement.value")}}.
 
-> **Nota:** Debido a que un campo de solo lectura no puede tener un valor, `required` no tiene ningún efecto en las entradas con el atributo `readonly` también especificado.
+> [!NOTE]
+> Debido a que un campo de solo lectura no puede tener un valor, `required` no tiene ningún efecto en las entradas con el atributo `readonly` también especificado.
 
 ### `size`
 
@@ -167,7 +170,8 @@ Una extensión de Safari, el atributo `autocorrect` es una cadena que indica si
 
 Una extensión de Mozilla, compatible con Firefox para Android, que proporciona una pista sobre qué tipo de acción se realizará si el usuario presiona la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras edita el campo. Esta información se usa para decidir qué tipo de etiqueta usar en la tecla <kbd>Intro</kbd> del teclado virtual.
 
-> **Nota:** Este [se ha estandarizado](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute) como el atributo global [`enterkeyhint`](/es/docs/Web/HTML/Global_attributes#enterkeyhint), pero aún no está ampliamente implementado. Para ver el estado del cambio que se está implementando en Firefox, consulta [Error 1490661 en Firefox](https://bugzil.la/1490661).
+> [!NOTE]
+> Este [se ha estandarizado](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute) como el atributo global [`enterkeyhint`](/es/docs/Web/HTML/Global_attributes#enterkeyhint), pero aún no está ampliamente implementado. Para ver el estado del cambio que se está implementando en Firefox, consulta [Error 1490661 en Firefox](https://bugzil.la/1490661).
 
 Los valores permitidos son: `go`, `done`, `next`, `search` y `send`. El navegador decide, utilizando esta sugerencia, qué etiqueta poner en la tecla Intro.
 
@@ -248,7 +252,8 @@ El tamaño físico del cuadro de entrada se puede controlar mediante el atributo
 
 Los elementos {{HTMLElement("input")}} de tipo `text` no tienen validación automática aplicada (ya que una entrada de texto básica debe ser capaz de aceptar cualquier cadena arbitraria), pero hay algunas opciones de validación de lado del cliente disponibles, que verás a continuación.
 
-> **Nota:** La validación del formulario HTML _no_ sustituye a la de los scripts del servidor que garantizan que los datos introducidos tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).
+> [!NOTE]
+> La validación del formulario HTML _no_ sustituye a la de los scripts del servidor que garantizan que los datos introducidos tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).
 
 ### Una nota sobre estilizado
 
@@ -375,7 +380,8 @@ Esto se renderiza así:
 
 Si intentas enviar el formulario con menos de 4 caracteres, se te dará un mensaje de error apropiado (que difiere entre los navegadores). Si intentas ingresar más de 8 caracteres, el navegador no te lo permitirá.
 
-> **Nota:** Si especificas un `minlength` pero no especificas `required`, la entrada se considera válida, ya que no se requiere que el usuario especifique un valor.
+> [!NOTE]
+> Si especificas un `minlength` pero no especificas `required`, la entrada se considera válida, ya que no se requiere que el usuario especifique un valor.
 
 ### Especificación de un patrón
 
diff --git a/files/es/web/html/element/label/index.md b/files/es/web/html/element/label/index.md
index 59d394888891f2..46eb253f4bfc25 100644
--- a/files/es/web/html/element/label/index.md
+++ b/files/es/web/html/element/label/index.md
@@ -23,7 +23,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
 
   - : El ID del elemento de formulario etiquetable relacionado en el mismo documento que el elemento label. El primer elemento en el documento con tal ID que coincida con el dispuesto en el atributo for será el control etiquetado para este elemento.
 
-    > **Nota:** Un elemento label puede contener ambos; El atributo for y el elemento de control anidado, siempre y cuando el atributo for apunte al mismo elemento.
+    > [!NOTE]
+    > Un elemento label puede contener ambos; El atributo for y el elemento de control anidado, siempre y cuando el atributo for apunte al mismo elemento.
 
 - `form`
   - : El formulario con el cual el label está asociado (su formulario dueño). El valor de este atributo debe ser un ID del elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no es especificado, este elemento `<label>` deberia ser descendiente de un elemento {{HTMLElement("form")}}. Este atributo permite ubicar el elemento label en cualquier lugar dentro del documento y no solo como descendiente de su respectivo formulario.
diff --git a/files/es/web/html/element/link/index.md b/files/es/web/html/element/link/index.md
index 5d5c06c1cdcbc1..05de1df0c93679 100644
--- a/files/es/web/html/element/link/index.md
+++ b/files/es/web/html/element/link/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/link
 
 El **elemento HTML `<link>`** especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.
 
-> **Nota:** El atributo [`rel`](/es/docs/Web/HTML/Element/link#rel) puede ser establecido con muchos valores diferentes. Estos se encuentran [listados](/es/docs/Web/HTML/Tipos_de_enlaces) en una página separada.
+> [!NOTE]
+> El atributo [`rel`](/es/docs/Web/HTML/Element/link#rel) puede ser establecido con muchos valores diferentes. Estos se encuentran [listados](/es/docs/Web/HTML/Tipos_de_enlaces) en una página separada.
 
 | [Categorías de contenido](/es/docs/Web/Guide/HTML/categorias_de_contenido) | Contenido en metadatos. Si [`itemprop`](/es/docs/Web/HTML/Element/link#itemprop) está presente: [contenido dinámico](/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico) y [contenido textual o estático](/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático) |
 | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -22,7 +23,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 
 - `charset`{{deprecated_inline}}
   - : Este atributo define la codificación de caracteres del recurso enlazado. El valor es un espacio y/o una lista de grupos de caracteres según se define en {{rfc(2045)}}, separados por coma. El valor predeterminado es `iso-8859-1`.
-    > **Nota:** Este atributo es obsoleto y **no debe ser usado por autores**. Para conseguir su mismo efecto, se recomienda usar el encabezado HTTP Content-Type en el recurso enlazado.
+    > [!NOTE]
+    > Este atributo es obsoleto y **no debe ser usado por autores**. Para conseguir su mismo efecto, se recomienda usar el encabezado HTTP Content-Type en el recurso enlazado.
 - `crossorigin`
   - : Este atributo enumerado indica si se debe usar CORS cuando se solicite una imagen relacionada. Las [imágenes con CORS habilitado](/es/docs/Web/HTML/Imagen_con_CORS_habilitado) pueden ser reutilizadas en el elemento {{HTMLElement("canvas")}} sin que estén _corruptas_.Los valores permitidos son:_ `"anonymous"`
     _ : Una solicitud a un origen cruzado (esto es, con el encabezado HTTP `Origin:`) es realizada, pero no se envían credenciales (es decir, no se envían cookies, ni certificado X.509, ni datos de autenticación básica HTTP). Si el servidor no otorga credenciales al sitio de origen (por no enviar el encabezado HTTP `Access-Control-Allow-Origin:`) la imagen estará _corrupta_, y su uso estará restringido.
@@ -31,7 +33,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 - `disabled` {{Non-standard_inline}}
 
   - : Este atributo es usado para deshabilitar una relación de enlace. Agregando programación, este atributo puede ser usado para habilitar o deshabilitar la relación con distintas hojas de estilos.
-    > **Nota:** Aunque no hay atributo `disabled` en el estándar de HTML, **sí** hay un atributo `disabled` en el objeto DOM `HTMLLinkElement`.El uso de `disabled` como atributo HTML no es estándar, y solo puede ser usado en algunos navegadores ([W3 #27677](https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677)). **No debe usarse**. Para lograr un efecto similar, se puede usar una de las siguientes técnicas:
+    > [!NOTE]
+    > Aunque no hay atributo `disabled` en el estándar de HTML, **sí** hay un atributo `disabled` en el objeto DOM `HTMLLinkElement`.El uso de `disabled` como atributo HTML no es estándar, y solo puede ser usado en algunos navegadores ([W3 #27677](https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677)). **No debe usarse**. Para lograr un efecto similar, se puede usar una de las siguientes técnicas:
     >
     > - Si el atributo `disabled` fue añadido directamente al elemento en la página, no incluya el elemento {{HTMLElement("link")}} en vez de eso;
     > - Establezca la **propiedad** `disabled` del objeto DOM `StyleSheet` vía programación.
@@ -45,7 +48,7 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 - `media`
 
   - : Este atributo especifica el tipo de medio al que aplica el recurso enlazado. Su valor debe ser un [media query](/es/docs/CSS/Media_queries). Este atributo es usado principalmente cuando se enlaza a una hoja de esetilos externa en la que se le permita al agenete usuario seleccionar la que mejor se adapte al dispositivo sobre el que se ejecuta.
-    > **Nota:**
+    > [!NOTE]
     >
     > - En HTML 4, esto puede ser solamente una lista simple de literales de medios separadas por espacio, es decir, [tipos de medios y grupos](/es/docs/Web/CSS/@media), donde se definían valores para este atributo, tales como `print`, `screen`, `aural`, `braille`. HTML5 extiende esto a cualquier clase de [media queries](/es/docs/CSS/Media_queries), los cuales son un superconjunto de los valores permitidos de HTML 4.
     > - Los navegadores que no soporten los [Media Queries de CSS3](/es/docs/CSS/Media_queries) no necesariamente reconocerán el enlace adecuado; no olvide establecer enlaces de _fallback_, usando los conjuntos de media queriese definidos en HTML 4.
@@ -62,13 +65,14 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
   - : Este atributo indica la relación del documento enlazado con el actual. El atributo debe ser una lista de [tipos de enlaces](/es/docs/Web/HTML/Tipos_de_enlaces) separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo **rel** se establece con valor `stylesheet`, y el atributo **href** se establece con la URL de la hoja de estilos externa para dar formato a la página. WebTV también soporta el uso del valor `next` en **rel** para precargar la siguiente página en una serie de documentos.
 - `rev`{{deprecated_inline}}
   - : El valor de este atributo muestra la relación del documento actual al documento enlazado, como se define en el atributo [`href`](/es/docs/Web/HTML/Element/link#href). En consecuencia, este atributo define la relación inversa, en comparación al valor del atributo **rel**. Los [tipos de enlace](/es/docs/Web/HTML/Tipos_de_enlaces) para este atributo son similares a los disponibles para [`rel`](/es/docs/Web/HTML/Element/link#rel).
-    > **Nota:** Este atributo es obsoleto en HTML5. **No debe usarse**. Para lograr este efecto, use el atributo [`rel`](/es/docs/Web/HTML/Element/link#rel) con el [tipo de enlace](/es/docs/Web/HTML/Tipos_de_enlaces) contrario, por ejemplo, made debe reemplazar a author. Además, este atributo no significa _revision_ y no debe ser usado con un número de versión, que es desafortunadamente el caso de muchos sitios.
+    > [!NOTE]
+    > Este atributo es obsoleto en HTML5. **No debe usarse**. Para lograr este efecto, use el atributo [`rel`](/es/docs/Web/HTML/Element/link#rel) con el [tipo de enlace](/es/docs/Web/HTML/Tipos_de_enlaces) contrario, por ejemplo, made debe reemplazar a author. Además, este atributo no significa _revision_ y no debe ser usado con un número de versión, que es desafortunadamente el caso de muchos sitios.
 - `sizes`
 
   - : Este atributo define los tamaños de los íconos para medios visuales contenidos en el recurso. Debe estar presente solo si el atributo [`rel`](/es/docs/Web/HTML/Element/link#rel) contiene el [tipo de enlace](/es/docs/Web/HTML/Tipos_de_enlaces) icon. Puede tener los siguientes valores:
     - `any`, significa que el ícono puede ser escalado a cualquier tamaño, ya que está en un formato vectorial, como `image/svg+xml`.
     - una lista de tamaños separados por espacios en blanco, cada uno en formato `<anchura en píxeles>` x `<altura en píxeles>` or `<anchura en píxeles>` X `<altura en píxeles>`. Cada uno de estos tamaños debe estar contenido en el recurso.
-      > **Nota:**
+      > [!NOTE]
       >
       > - La mayoría de los formatos de ícono solo permiten almacenar un ícono; por lo que la mayoría de las ocasiones, el atributo [`sizes`](/es/docs/Web/HTML/Global_attributes#sizes) contiene solamente una entrada. El formato ICO de Microsoft lo hace, así como el formato ICN de Apple. Siendo ICO más común, es el que se recomienda usar.
       > - iOS de Apple no soporta este atributo, por lo que iPhone y iPad de Apple usan [tipos de enlaces](/es/docs/Web/HTML/Tipos_de_enlaces) especiales, no estándares, para definir los íconos a usar como Web Clip o contenedor de inicio: apple-touch-icon y apple-touch-startup-icon.
@@ -124,7 +128,8 @@ Se puede determinar cuando una hoja de estilos fue cargada estableciendo la ejec
   onerror="sheetError()" />
 ```
 
-> **Nota:** El evento `load` se dispara una vez que la hoja de estilos y todo su contenido importado ha sido cargado y procesado, e inmediatamente antes de que los estilos sean aplicados al contenido.
+> [!NOTE]
+> El evento `load` se dispara una vez que la hoja de estilos y todo su contenido importado ha sido cargado y procesado, e inmediatamente antes de que los estilos sean aplicados al contenido.
 
 ## Notas
 
diff --git a/files/es/web/html/element/map/index.md b/files/es/web/html/element/map/index.md
index f7f1ac1278827e..f76123ee1ba503 100644
--- a/files/es/web/html/element/map/index.md
+++ b/files/es/web/html/element/map/index.md
@@ -115,6 +115,7 @@ slug: Web/HTML/Element/map
 
 secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==
 
-> **Nota:** Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta MDC:Como ayudar.
diff --git a/files/es/web/html/element/mark/index.md b/files/es/web/html/element/mark/index.md
index 426350215b0ae5..c4c4cc8d349feb 100644
--- a/files/es/web/html/element/mark/index.md
+++ b/files/es/web/html/element/mark/index.md
@@ -72,7 +72,8 @@ Este elemento no tiene atributos que no sean los [atributos globales](/es/docs/W
 - Por otro lado, `<mark>` indica una parte del contenido del documento que probablemente sea relevante para el usuario. Por ejemplo, se puede utilizar en una página que muestra los resultados de búsqueda para resaltar cada uno de estos por palabra.
 - No uses el elemento `<mark>` para resaltado de sintaxis; usa el elemento {{ HTMLElement("span") }} para este fin.
 
-> **Nota:** No se debe confundir el elemento `<mark>` con el elemento {{ HTMLElement("strong") }}. El elemento {{ HTMLElement("strong") }} se utiliza para denotar intervalos de texto de especial _importancia,_ mientras que el elemento `<mark>` se utiliza para denotar intervalos de texto de especial _relevancia._
+> [!NOTE]
+> No se debe confundir el elemento `<mark>` con el elemento {{ HTMLElement("strong") }}. El elemento {{ HTMLElement("strong") }} se utiliza para denotar intervalos de texto de especial _importancia,_ mientras que el elemento `<mark>` se utiliza para denotar intervalos de texto de especial _relevancia._
 
 ## Ejemplos
 
diff --git a/files/es/web/html/element/menu/index.md b/files/es/web/html/element/menu/index.md
index 8c1a095f45cf32..391be042f13ab3 100644
--- a/files/es/web/html/element/menu/index.md
+++ b/files/es/web/html/element/menu/index.md
@@ -19,7 +19,8 @@ Este elemento solo incluye los [atributos globales](/es/docs/Web/HTML/Global_att
 
 Los elementos `<menu>` y {{HTMLElement("ul")}} representan una lista desordenada de elementos. La diferencia clave es que {{HTMLElement("ul")}} contiene principalmente elementos para mostrar, mientras que `<menu>` estaba destinado a elementos interactivos. El elemento {{HTMLElement("menuitem")}} relacionado ha quedado obsoleto.
 
-> **Nota:** En las primeras versiones de la especificación HTML, el elemento `<menu>` tenía un caso de uso adicional como menú contextual. Esta funcionalidad se considera obsoleta y no está en la especificación.
+> [!NOTE]
+> En las primeras versiones de la especificación HTML, el elemento `<menu>` tenía un caso de uso adicional como menú contextual. Esta funcionalidad se considera obsoleta y no está en la especificación.
 
 ## Ejemplo
 
diff --git a/files/es/web/html/element/meta/index.md b/files/es/web/html/element/meta/index.md
index e32228daf9987c..22c588ae7f7401 100644
--- a/files/es/web/html/element/meta/index.md
+++ b/files/es/web/html/element/meta/index.md
@@ -190,7 +190,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/noframes/index.md b/files/es/web/html/element/noframes/index.md
index 273f3cd484c27b..0262d85843bf72 100644
--- a/files/es/web/html/element/noframes/index.md
+++ b/files/es/web/html/element/noframes/index.md
@@ -229,7 +229,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/noscript/index.md b/files/es/web/html/element/noscript/index.md
index 9ec2e3756be4f4..2c3a30c8ce5de6 100644
--- a/files/es/web/html/element/noscript/index.md
+++ b/files/es/web/html/element/noscript/index.md
@@ -221,7 +221,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/option/index.md b/files/es/web/html/element/option/index.md
index 92f89f9311783e..884252fcb8ea1f 100644
--- a/files/es/web/html/element/option/index.md
+++ b/files/es/web/html/element/option/index.md
@@ -22,7 +22,8 @@ Este elemento posee los [atributos globales](/es/docs/Web/HTML/Global_attributes
   - : Si está establecido el elemento no se puede seleccionar. A menudo los navegadores ponen en gris el elemento y de esa manera no recibirá ningún evento de navegación como clicks de ratón o eventos relacionados con la obtención del foco. Si este atributo no está definido el elemento puede ser aún deshabilitado si uno de sus ancestros es un elemento {{HTMLElement("optgroup")}} deshabilitado.
 - `label`
   - : Este atributo es el texto para la etiqueta que determina el significado de la opción. Si el atributo **`label`** no está definidio su valor será el texto del contenido del elemento
-    > **Nota:** El atributo **label** está diseñado para contener una etiqueta corta que se usará típicamente en un menú jerárquico. El **`atributo value`** describe una etiqueta más larga para ser usada, por ejemplo, cerca de un radio button
+    > [!NOTE]
+    > El atributo **label** está diseñado para contener una etiqueta corta que se usará típicamente en un menú jerárquico. El **`atributo value`** describe una etiqueta más larga para ser usada, por ejemplo, cerca de un radio button
 - `selected`
   - : Si está presente, este atributo booleano indica si esta opción es la inicialmente seleccionada. Si el elemento `<option>` es descendiente de un elemento {{HTMLElement("select")}} cuyo atributo [`multiple`](/es/docs/Web/HTML/Element/select#multiple) no esté definidio únicamente un sólo `<option>` de este elemento {{HTMLElement("select")}} puede tener este atributo **selected** attribute.
 - `value`
diff --git a/files/es/web/html/element/p/index.md b/files/es/web/html/element/p/index.md
index 12351ee30b168c..1f2c2b03099a86 100644
--- a/files/es/web/html/element/p/index.md
+++ b/files/es/web/html/element/p/index.md
@@ -113,7 +113,8 @@ párrafo
 
 - [En la especificación del estándar](http://html.conclase.net/w3c/html401-es/struct/text.html#edef-P)
 
-> **Nota:** ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> ¡Estamos en obras!... disculpen las molestias.
 > Este documento está siendo editado, posiblemente contenga carencias y defectos.
 >
 > ¿Quieres participar en la elaboración de este documento? Para más información sobre como ayudar o como empezar a hacerlo, consulta MDC:Como ayudar.
diff --git a/files/es/web/html/element/q/index.md b/files/es/web/html/element/q/index.md
index a6107798cf5696..7b73f0661ec871 100644
--- a/files/es/web/html/element/q/index.md
+++ b/files/es/web/html/element/q/index.md
@@ -68,7 +68,8 @@ La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. S
   </tbody>
 </table>
 
-> **Nota:** La mayoría de los navegadores modernos automáticamente agregarán comillas alrededor del texto dentro de un elemento `<q>`. Es posible que se necesite una regla de estilo para agregar comillas en navegadores antiguos.
+> [!NOTE]
+> La mayoría de los navegadores modernos automáticamente agregarán comillas alrededor del texto dentro de un elemento `<q>`. Es posible que se necesite una regla de estilo para agregar comillas en navegadores antiguos.
 
 ## Atributos
 
diff --git a/files/es/web/html/element/s/index.md b/files/es/web/html/element/s/index.md
index 3a1864ec0ad9e9..9537a9681244e1 100644
--- a/files/es/web/html/element/s/index.md
+++ b/files/es/web/html/element/s/index.md
@@ -107,4 +107,5 @@ slug: Web/HTML/Element/s
 
 ### Comentarios
 
-> **Advertencia:** DESAPROBADO
+> [!WARNING]
+> DESAPROBADO
diff --git a/files/es/web/html/element/select/index.md b/files/es/web/html/element/select/index.md
index 5c4310220522df..9894dd4bde3c99 100644
--- a/files/es/web/html/element/select/index.md
+++ b/files/es/web/html/element/select/index.md
@@ -34,7 +34,8 @@ Este elemento incluye [global attributes](/es/docs/Web/HTML/Global_attributes).
 - `size`
   - : Si el control se presenta como una lista con scroll en caja, este atributo representa el numero de filas que la list tendrá visible la primera vez. Los navegadores no están requeridos a presentar un elemento select como una lista con escroll en caja. El valor por defecto es cero.
 
-> **Nota:** De acuerdo con las especificaciones de HTML5, el tamaño por defecto debe ser 1; sin embargo, en la práctica, esto hace que se rompan algunas páginas webs, y ningun otro navegador actualmente hace esto, así que Mozilla ha optado por continuar usando 0 desde que empezó con Firefox.
+> [!NOTE]
+> De acuerdo con las especificaciones de HTML5, el tamaño por defecto debe ser 1; sin embargo, en la práctica, esto hace que se rompan algunas páginas webs, y ningun otro navegador actualmente hace esto, así que Mozilla ha optado por continuar usando 0 desde que empezó con Firefox.
 
 ## DOM Interface
 
diff --git a/files/es/web/html/element/slot/index.md b/files/es/web/html/element/slot/index.md
index be1a0c0fe62e20..0deaf899e20b91 100644
--- a/files/es/web/html/element/slot/index.md
+++ b/files/es/web/html/element/slot/index.md
@@ -132,7 +132,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
 </template>
 ```
 
-> **Nota:** Puedes ver este ejemplo en accion en [element-details](https://github.com/mdn/web-components-examples/tree/master/element-details) (velo [running live](https://mdn.github.io/web-components-examples/element-details/)). Además, puedes encontrar una explicación en [Using templates and slots](/es/docs/Web/Web_Components/Using_templates_and_slots).
+> [!NOTE]
+> Puedes ver este ejemplo en accion en [element-details](https://github.com/mdn/web-components-examples/tree/master/element-details) (velo [running live](https://mdn.github.io/web-components-examples/element-details/)). Además, puedes encontrar una explicación en [Using templates and slots](/es/docs/Web/Web_Components/Using_templates_and_slots).
 
 ## Especificaciones
 
diff --git a/files/es/web/html/element/span/index.md b/files/es/web/html/element/span/index.md
index df4fe49ecbdda2..01d19daaea1100 100644
--- a/files/es/web/html/element/span/index.md
+++ b/files/es/web/html/element/span/index.md
@@ -256,7 +256,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/strike/index.md b/files/es/web/html/element/strike/index.md
index 47b9f894b306a6..6f54c220dfe2a8 100644
--- a/files/es/web/html/element/strike/index.md
+++ b/files/es/web/html/element/strike/index.md
@@ -42,6 +42,7 @@ slug: Web/HTML/Element/strike
 
 ### Comentarios
 
-> **Advertencia:** DESAPROBADO
+> [!WARNING]
+> DESAPROBADO
 
 de momento no funciona
diff --git a/files/es/web/html/element/style/index.md b/files/es/web/html/element/style/index.md
index 0a9ee680b550e8..8bfa88cdfc719c 100644
--- a/files/es/web/html/element/style/index.md
+++ b/files/es/web/html/element/style/index.md
@@ -182,7 +182,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/table/index.md b/files/es/web/html/element/table/index.md
index 53254242031726..fb0c966f19423f 100644
--- a/files/es/web/html/element/table/index.md
+++ b/files/es/web/html/element/table/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element/table
 
 El _Elemento de Tabla HTML_ (`<table>`) representa datos en dos o mas dimensiones.
 
-> **Nota:** Antes de la creación de [CSS](/es/docs/CSS), los elementos HTML {{HTMLElement("table")}} eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y el elemento no debe ser usado para dichos fines.
+> [!NOTE]
+> Antes de la creación de [CSS](/es/docs/CSS), los elementos HTML {{HTMLElement("table")}} eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y el elemento no debe ser usado para dichos fines.
 
 ## Contexto de uso
 
@@ -77,7 +78,7 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
     - center, significa que la tabla será mostrada al centro del documento;
     - right, significa que la tabla será mostrada a la derecha del documento.
 
-    > **Nota:**
+    > [!NOTE]
     >
     > - **No usar este atributo**, ya que ha sido declarado obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). A fin de dar un efecto similar al atributo align, las propiedades {{cssxref("text-align")}} y {{cssxref("vertical-align")}} deben ser usadas.
     > - Antes de la version 4 de Firefox, este ya soportaba sólo en el modo quirks (compatibilidad con navegadores antiguos) los valores `middle`, `absmiddle`, and `abscenter` como sinónimos de `center`_._
@@ -98,7 +99,8 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
     |     | purple (púrpura) = "#800080" |     | teal (verde esmeralda) = "#008080" |
     |     | fuchsia (fucsia) = "#FF00FF" |     | aqua (verde agua) = "#00FFFF"      |
 
-    > **Nota:** No usar este atributo, dado que ha sido declarado obsoleto. El elemento {{HTMLElement("table")}} debe ser estilizado utilizando [CSS](/es/docs/CSS). A fin de dar un efecto similar al atributo bgcolor, la propiedad [CSS](/es/docs/CSS) {{cssxref("background-color")}} debe ser usada.
+    > [!NOTE]
+    > No usar este atributo, dado que ha sido declarado obsoleto. El elemento {{HTMLElement("table")}} debe ser estilizado utilizando [CSS](/es/docs/CSS). A fin de dar un efecto similar al atributo bgcolor, la propiedad [CSS](/es/docs/CSS) {{cssxref("background-color")}} debe ser usada.
 
 <!---->
 
@@ -106,7 +108,8 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
 
   - : Este atributo entero define el tamaño del cuadro alrededor de la tabla . Si estuviese puesta en 0, implicaría que dicho atributo sería nulo.
 
-    > **Nota:** No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). A fin de dar un efecto similar al atributo, las propiedades CSS nativas {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} y {{cssxref("border-style")}} deben ser usadas.
+    > [!NOTE]
+    > No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). A fin de dar un efecto similar al atributo, las propiedades CSS nativas {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} y {{cssxref("border-style")}} deben ser usadas.
 
 <!---->
 
@@ -114,7 +117,8 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
 
   - : Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal
 
-    > **Nota:** No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo border, use la propiedad CSS {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("padding")}} en el elemento {{HTMLElement("td")}}.
+    > [!NOTE]
+    > No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo border, use la propiedad CSS {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("padding")}} en el elemento {{HTMLElement("td")}}.
 
 <!---->
 
@@ -122,7 +126,8 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
 
   - : Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal.
 
-    > **Nota:** No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo border, use la propiedad {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("margin")}} en el elemento {{HTMLElement("td")}}.
+    > [!NOTE]
+    > No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo border, use la propiedad {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("margin")}} en el elemento {{HTMLElement("td")}}.
 
 <!---->
 
@@ -137,7 +142,8 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
     |     | border |     | box    |
     |     | void   |     |        |
 
-    > **Nota:** No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo frame use las propiedades CSS {{cssxref("border-style")}} y {{cssxref("border-width")}}.
+    > [!NOTE]
+    > No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo frame use las propiedades CSS {{cssxref("border-style")}} y {{cssxref("border-width")}}.
 
 <!---->
 
@@ -151,7 +157,7 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
     - columns, que mostrará las reglas entre columnas;
     - all, que mostrará las reglas entre filas y columnas.
 
-    > **Nota:**
+    > [!NOTE]
     >
     > - El estilo de las reglas depende del navegador usado y no puede ser modificado.
     > - Nota de uso: No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Use la propiedad {{cssxref("border")}} en los elementos adecuados {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.
@@ -162,7 +168,8 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
 
   - : Este atributo define un texto alternativo para describir una tabla en un usuario incapaz de mostrarlo, corrientemente contiene una descripcion de él que posibilita a discapacitaos visulaes (como invidentes navegando en pantallas braile) a obtener la información que necesitan.Si la información añadida en este atributo puede ser útil a otras personas, considere el utilizar el elemento {{HTMLElement("caption")}} en vez de este. instead. El atributo de resumen no es obligatorio usuarlo, pudiendo ser omitido si un elemento {{HTMLElement("caption")}} realiza similar labor.
 
-    > **Nota:** No use este atributo, dado que ha sido declarado obsoleto. En su lugar, use alguna de estas formas de describir una tabla:
+    > [!NOTE]
+    > No use este atributo, dado que ha sido declarado obsoleto. En su lugar, use alguna de estas formas de describir una tabla:
     >
     > - En prosa, rodeando la tabla (esta es la forma menos semántica de lograrlo).
     > - En el elemento {{HTMLElement("caption")}} de la tabla.
@@ -177,7 +184,8 @@ Al igual que otros elementos HTML, este elemento también soporta [atributos glo
 
   - : Este atributo define el ancho de una tabla, pudiendo contener una longitud de píxeles o un porcentaje, que representa un porcentaje de anchura del contenedor que la tabla debiera usar.
 
-    > **Nota:** No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo frame use la propiedad CSS {{cssxref("width")}} en su lugar.
+    > [!NOTE]
+    > No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando [CSS](/es/docs/CSS). Para dar un efecto similar al atributo frame use la propiedad CSS {{cssxref("width")}} en su lugar.
 
 ### Interfaz DOM
 
diff --git a/files/es/web/html/element/td/index.md b/files/es/web/html/element/td/index.md
index 11aed89ed01b98..2bbccf1c387cd1 100644
--- a/files/es/web/html/element/td/index.md
+++ b/files/es/web/html/element/td/index.md
@@ -26,7 +26,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 
   - : Este atributo contiene un pequeña descripción abreviada del contenido de la celda. Algunos agentes de usuario, como los lectores de voz, pueden presentar esta descripción antes que el propio contenido.
 
-    > **Nota:** No usar este atributo ya que esta obsoleto en la ultima version del estandar. Como alternativa, puedes poner una descripción abreviada dentro de la celda y colocar el contenido largo en el atributo **title**.
+    > [!NOTE]
+    > No usar este atributo ya que esta obsoleto en la ultima version del estandar. Como alternativa, puedes poner una descripción abreviada dentro de la celda y colocar el contenido largo en el atributo **title**.
 
 - `align` {{deprecated_inline}}
 
@@ -40,7 +41,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 
     Si este atributo no se define, se selecciona por defecto `left`
 
-    > **Nota:** No usar este atributo ya que esta obsoleto en la ultima version.
+    > [!NOTE]
+    > No usar este atributo ya que esta obsoleto en la ultima version.
     >
     > - Para lograr el mismo efecto de los valores `left`, `center`, `right`, o `justify` , usa la propiedad CSS {{cssxref("text-align")}} en el.
     > - Para lograr el mismo efecto que el valor `char` , en CSS3,puedes usar el valor de la [`char`](/es/docs/Web/HTML/Element/td#char) como el valor de la propiedad {{cssxref("text-align")}}.
@@ -49,7 +51,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
 
   - : Este atributo contiene una lista de cadenas separadas por espacios . Cada cadena es el ID de un grupo de celdas a las que esta cabecera se aplica.
 
-    > **Nota:** No usar este atributo ya que esta obsoleto en la ultima version. En su lugar use el atributo [`scope`](/es/docs/Web/HTML/Element/td#scope) .
+    > [!NOTE]
+    > No usar este atributo ya que esta obsoleto en la ultima version. En su lugar use el atributo [`scope`](/es/docs/Web/HTML/Element/td#scope) .
 
 - `bgcolor` {{Non-standard_inline}}
 
@@ -65,26 +68,30 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
     |     | `Purpura` = "#800080" |     | `Verde Azulado` = "#008080" |
     |     | `Fucsia` = "#FF00FF"  |     | `agua` = "#00FFFF"          |
 
-    > **Nota:** Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar y solo implementado en algunas versiones de Microsoft Internet Explorer: El elemento {{HTMLElement("td")}} debe ser estilizado en CSS.
+    > [!NOTE]
+    > Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar y solo implementado en algunas versiones de Microsoft Internet Explorer: El elemento {{HTMLElement("td")}} debe ser estilizado en CSS.
     > Para crear un efecto similar en CSS en su lugar use la propiedad {{cssxref("background-color")}}.
 
 - `char` {{Deprecated_inline}} in HTML4.01 {{deprecated_inline}} in HTML5
 
   - : Este atributo se utiliza para establecer el carácter para alinear las celdas de una columna . Los valores típicos de esto incluyen un punto (. ) al intentar alinear los números o valores monetarios . Si [`align`](/es/docs/Web/HTML/Element/td#align) no está ajustado a char, este atributo se ignora.
 
-    > **Nota:** No usar este atributo ya que está obsoleto (y no soportado) en las últimas versiones estándares). Para lograr el mismo que el [`char`](/es/docs/Web/HTML/Element/thead#char), en CSS3, puedes usar el character set usando el atributo [`char`](/es/docs/Web/HTML/Element/th#char) como el valor de la propiedad {{cssxref("text-align")}}.
+    > [!NOTE]
+    > No usar este atributo ya que está obsoleto (y no soportado) en las últimas versiones estándares). Para lograr el mismo que el [`char`](/es/docs/Web/HTML/Element/thead#char), en CSS3, puedes usar el character set usando el atributo [`char`](/es/docs/Web/HTML/Element/th#char) como el valor de la propiedad {{cssxref("text-align")}}.
 
 - `charoff` {{Deprecated_inline}} in HTML4.01 {{deprecated_inline}} in HTML5
 
   - : Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los personajes de alineación especificado por el atributo de carbón .
 
-    > **Nota:** Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar,
+    > [!NOTE]
+    > Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar,
 
 - `colspan`
 
   - : Este atributo contiene un valor entero no negativo que indica por el número de columnas se extiende la célula. Su valor por defecto es 1 ; si su valor se establece en 0 , se extiende hasta el final de la {{ HTMLElement ( "colgroup" ) }} , aunque implícitamente definido , que la célula pertenece. Los valores superiores a 1000 serán consideradas como incorrectas y se establecen en el valor predeterminado ( 1 ) .
 
-    > **Nota:** En HTML5 este atributo solo acepta valores mayores que 0 this attribute only accepts values greater than zero since it [must not be used to overlap cells](http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan). Además, Firefox is the only browser to support the 0 value as defined in the HTML4.01 specification.
+    > [!NOTE]
+    > En HTML5 este atributo solo acepta valores mayores que 0 this attribute only accepts values greater than zero since it [must not be used to overlap cells](http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan). Además, Firefox is the only browser to support the 0 value as defined in the HTML4.01 specification.
 
 - `headers`
   - : Este atributo contiene una lista de cadenas separadas por espacios , cada uno correspondiente al atributo ID de la {{ HTMLElement ( "th" ) }} elementos que se aplican a este elemento.
@@ -101,13 +108,15 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Atributos_Globa
     - `middle`, centra el texto de la celda
     - and `top`, pone el texto como cerca de la parte superior de la celda como es posible .
 
-    > **Nota:** Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.
+    > [!NOTE]
+    > Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.
 
 - `width` {{Deprecated_inline}} in HTML4.01
 
   - : Este atributo se utiliza para definir una anchura de celda recomendada. Propiedades CELLSPACING y cellpadding pueden añadir espacio adicional, y el elemento {{ HTMLElement ( "col" ) }} anchura pueden también tener algún efecto . En general, si el ancho de una columna es demasiado estrecha para mostrar una célula particular correctamente, y por lo tanto las células en el mismo, se puede ensanchar cuando se muestra .
 
-    > **Nota:** Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.
+    > [!NOTE]
+    > Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.
 
 ## DOM interfaz
 
diff --git a/files/es/web/html/element/th/index.md b/files/es/web/html/element/th/index.md
index 46857f69553a45..ce72631b7446ba 100644
--- a/files/es/web/html/element/th/index.md
+++ b/files/es/web/html/element/th/index.md
@@ -58,7 +58,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
 
   - : Este atributo contiene una breve descripción del contenido de las celdas. Algunos agentes de usuario (e.g., a speech reader) pueden presentar esta descripción antes que el propio contenido.
 
-    > **Nota:** No uses este atributo, ya que se ha vuelto obsoleto en el último estandar. Alternativamente, puedes poner la descripción abreviada dentro de la celda y colocarla el largo contenido en el atributo de **title**.
+    > [!NOTE]
+    > No uses este atributo, ya que se ha vuelto obsoleto en el último estandar. Alternativamente, puedes poner la descripción abreviada dentro de la celda y colocarla el largo contenido en el atributo de **title**.
 
 - `align` {{Deprecated_inline}} in HTML4, {{deprecated_inline}} in HTML5
 
@@ -72,7 +73,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
 
     El valor por defecto cuando no se especifica este atributo es `left`.
 
-    > **Nota:** No usar este atributo, ya que está obsoleto en el último estándar.
+    > [!NOTE]
+    > No usar este atributo, ya que está obsoleto en el último estándar.
     >
     > - Para lograr el mismo efecto que con los valores `left`, `center`, `right` o `justify`, aplicar la propiedad CSS {{cssxref("text-align")}} al elemento.
     > - Para lograr el mismo efecto que con el valor `char`, dar a la propiedad {{cssxref("text-align")}} el mismo valor que usarías para [`char`](/es/docs/Web/HTML/Element/th#char).
@@ -81,7 +83,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
 
   - : Este atributo contiene una lista de cadenas separadas por espacios. Cada cadena es el `id` de un grupo de celdas a las que se les aplica esta cabecera.
 
-    > **Nota:** Este atributo está obsoleto en el último estándar y no debe usarse. Puedes sustituirlo por [`scope`](/es/docs/Web/HTML/Element/th#scope).
+    > [!NOTE]
+    > Este atributo está obsoleto en el último estándar y no debe usarse. Puedes sustituirlo por [`scope`](/es/docs/Web/HTML/Element/th#scope).
 
 - `bgcolor` {{Non-standard_inline}}
 
@@ -97,7 +100,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
     |     | `purple` = "#800080"  |     | `teal` = "#008080"   |
     |     | `fuchsia` = "#FF00FF" |     | `aqua` = "#00FFFF"   |
 
-    > **Nota:** No usar este atributo, ya que no es un estándar y sólo esta implementado en algunas versiones de Microsoft Internet Explorer. El elemento {{HTMLElement("th")}} debe estilizarse usando [CSS](/es/docs/CSS). Para crear un efecto similar usa la propiedad {{cssxref("background-color")}}.
+    > [!NOTE]
+    > No usar este atributo, ya que no es un estándar y sólo esta implementado en algunas versiones de Microsoft Internet Explorer. El elemento {{HTMLElement("th")}} debe estilizarse usando [CSS](/es/docs/CSS). Para crear un efecto similar usa la propiedad {{cssxref("background-color")}}.
 
 <!---->
 
@@ -105,7 +109,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
 
   - : El contenido de la celda se alinea con un caracter en el elemento `<th>`. Los valores típicos incluyen un punto (.) para alinear números o valores monetarios. Si no se establece [`align`](/es/docs/Web/HTML/Element/th#align) como char, el atributo es ignorado.
 
-    > **Nota:** No usar este atributo, ya que no está soportado por el último estándar. Para lograr el mismo efecto, puedes especificar el caracter como el primer valor de la propiedad {{cssxref("text-align")}}.
+    > [!NOTE]
+    > No usar este atributo, ya que no está soportado por el último estándar. Para lograr el mismo efecto, puedes especificar el caracter como el primer valor de la propiedad {{cssxref("text-align")}}.
 
 <!---->
 
@@ -113,7 +118,8 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
 
   - : This attribute is used to shift column data to the right of the character specified by the **char** attribute. Its value specifies the length of this shift.
 
-    > **Nota:** No usar este atributo, ya que no está soportado por el último estándar.
+    > [!NOTE]
+    > No usar este atributo, ya que no está soportado por el último estándar.
 
 <!---->
 
@@ -142,13 +148,15 @@ Este elemento incluye los [atributos globales](/es/docs/Web/HTML/Global_attribut
     - `middle`: Centers the text in the cell.
     - and `top`: Positions the text near the top of the cell.
 
-    > **Nota:** Do not use this attribute as it is no longer supported by the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.
+    > [!NOTE]
+    > Do not use this attribute as it is no longer supported by the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.
 
 - `width` {{Deprecated_inline}} in HTML4.01
 
   - : This attribute is used to define a recommended cell width. Additional space can be added with the [cellspacing](/es/docs/Web/API/HTMLTableElement/cellSpacing) and [cellpadding](/es/docs/Web/API/HTMLTableElement/cellPadding) properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed.
 
-    > **Nota:** Do not use this attribute in the latest standard: use the CSS {{cssxref("width")}} property instead.
+    > [!NOTE]
+    > Do not use this attribute in the latest standard: use the CSS {{cssxref("width")}} property instead.
 
 ## Examples
 
diff --git a/files/es/web/html/element/title/index.md b/files/es/web/html/element/title/index.md
index 208dc0a148af1c..67c78ea79288c7 100644
--- a/files/es/web/html/element/title/index.md
+++ b/files/es/web/html/element/title/index.md
@@ -115,7 +115,8 @@ Si el envío de un formulario contiene errores y el envío vuelve a representar
 </title>
 ```
 
-> **Nota:** Actualmente, los lectores de pantalla no anunciarán automáticamente la actualización dinámica del título de una página. Si va a actualizar el título de la página para reflejar cambios significativos en el estado de una página, entonces también puede ser necesario el uso de [regiones en vivo de ARIA](/es/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
+> [!NOTE]
+> Actualmente, los lectores de pantalla no anunciarán automáticamente la actualización dinámica del título de una página. Si va a actualizar el título de la página para reflejar cambios significativos en el estado de una página, entonces también puede ser necesario el uso de [regiones en vivo de ARIA](/es/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
 
 - [MDN Entendiendo las WCAG, Directriz 2.4 explicaciones](/es/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_—_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
 - [Entendiendo el Criterio de Conformidad 2.4.2 | W3C Entendiendo las WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html)
diff --git a/files/es/web/html/element/tr/index.md b/files/es/web/html/element/tr/index.md
index 42e008c76704dc..be649dc744ceaf 100644
--- a/files/es/web/html/element/tr/index.md
+++ b/files/es/web/html/element/tr/index.md
@@ -40,17 +40,20 @@ Este elemento incluye los [global attributes](/es/docs/HTML/Global_attributes).
 - `bgcolor` {{deprecated_inline}}
 
   - : Este atributo define el color de fondo de cada celda de la fila. Puede ser un código de #RRGGBB o una palabra clave de color de SVG.
-    > **Nota:** el elemento {{HTMLElement("tr")}} debe ser de estilo con CSS. Para dar un efecto similar al atributo bgcolor, utilice la propiedad CSS {{cssxref("background-color")}}.
+    > [!NOTE]
+    > El elemento {{HTMLElement("tr")}} debe ser de estilo con CSS. Para dar un efecto similar al atributo bgcolor, utilice la propiedad CSS {{cssxref("background-color")}}.
 
 - `char` {{deprecated_inline}}
 
   - : Este atributo es utilizado para establecer el caracter para alinear las celdas de una columna. Los valores típicos para éste incluyen un punto (.) al intentar alinear los números o valores monetarios. Si [`align`](/es/docs/Web/HTML/Element/tr#align) no se ha ajustado a char, este atributo se ignora.
-    > **Nota:** No utilice este atributo, ya que es obsoleta (y no es compatible) en el último estándar. Para lograr el mismo efecto que el [`char`](/es/docs/Web/HTML/Element/tr#char), en CSS3, puedes utilizar el juego de carácteres utilizando el atributo [`char`](/es/docs/Web/HTML/Element/tr#char) como el valor de la referencia externa de la propiedad {{cssxref("text-align")}}.
+    > [!NOTE]
+    > No utilice este atributo, ya que es obsoleta (y no es compatible) en el último estándar. Para lograr el mismo efecto que el [`char`](/es/docs/Web/HTML/Element/tr#char), en CSS3, puedes utilizar el juego de carácteres utilizando el atributo [`char`](/es/docs/Web/HTML/Element/tr#char) como el valor de la referencia externa de la propiedad {{cssxref("text-align")}}.
 
 - `charoff` {{deprecated_inline}}
 
   - : Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los carácteres de alineación especificado por el atributo char.
-    > **Nota:** No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar.
+    > [!NOTE]
+    > No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar.
 
 - `valign` {{deprecated_inline}}
   - : Este atributo especifica la alineación vertical del texto dentro de cada fila de las celdas de la cabecera de la tabla. Los valores posibles para este atributo son:
@@ -58,7 +61,8 @@ Este elemento incluye los [global attributes](/es/docs/HTML/Global_attributes).
     - `bottom`,que pondrá el texto tan cerca de la parte inferior de la célula como sae posible;
     - `middle`,que centrará el texto en la celda;
     - y `top`, que pondrá el texto como cerca de la parte superior de la célula como es posible.
-      > **Nota:** No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar: {{cssxref("vertical-align")}} en su lugar establecer la propiedad CSS en él.
+      > [!NOTE]
+      > No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar: {{cssxref("vertical-align")}} en su lugar establecer la propiedad CSS en él.
 
 ## Interfaz DOM
 
diff --git a/files/es/web/html/element/u/index.md b/files/es/web/html/element/u/index.md
index 6a1193789cfd72..5e23c05445fe9a 100644
--- a/files/es/web/html/element/u/index.md
+++ b/files/es/web/html/element/u/index.md
@@ -60,6 +60,7 @@ Para obtener el mismo resultado puede usarse La propiedad CSS text-decoration: u
 
 Si por algún motivo necesita usar elementos desaprobados como u, recuerde que debe declarar un DOCTYPE transicional.
 
-> **Advertencia:** DESAPROBADO
+> [!WARNING]
+> DESAPROBADO
 
 de momento no funciona
diff --git a/files/es/web/html/element/ul/index.md b/files/es/web/html/element/ul/index.md
index 446ed99d30ec81..387d3f3e9316e0 100644
--- a/files/es/web/html/element/ul/index.md
+++ b/files/es/web/html/element/ul/index.md
@@ -250,7 +250,8 @@ Puede consultar esta [comparativa](http://www.webdevout.net/browser_support_html
 
 ---
 
-> **Nota:** Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
+> [!NOTE]
+> Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
 >
 > ¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.
 
diff --git a/files/es/web/html/element/video/index.md b/files/es/web/html/element/video/index.md
index 803be81d037831..6776bcbde2d78d 100644
--- a/files/es/web/html/element/video/index.md
+++ b/files/es/web/html/element/video/index.md
@@ -25,7 +25,8 @@ Para obtener una lista de formatos compatibles, consulta [Formatos multimedia ad
 
   - : Un atributo booleano; si se especifica, el video comenzará automáticamente a almacenarse en el búfer, incluso si no está listo para reproducirse de forma automática. Esto se debe utilizar para los casos en los que se considera probable que el video se reproduzca (por ejemplo, si el usuario accedió a esa página específica para reproducir el video, no si hay un video insertado junto con otros contenidos). El video se almacena en el búfer hasta que el caché de medios esté lleno.
 
-    > **Nota:** aunque forma parte de los primeros borradores de la especificación HTML 5, el atributo **autobuffer** se ha eliminado en versiones posteriores. Se ha quitado de Gecko 2.0 y otros navegadores, y en algunos nunca llegó a implementarse. La especificación define un nuevo atributo enumerado, **preload,** para sustituir el atributo **autobuffer,** con una sintaxis diferente. [Error 548523 en Firefox](https://bugzil.la/548523)
+    > [!NOTE]
+    > Aunque forma parte de los primeros borradores de la especificación HTML 5, el atributo **autobuffer** se ha eliminado en versiones posteriores. Se ha quitado de Gecko 2.0 y otros navegadores, y en algunos nunca llegó a implementarse. La especificación define un nuevo atributo enumerado, **preload,** para sustituir el atributo **autobuffer,** con una sintaxis diferente. [Error 548523 en Firefox](https://bugzil.la/548523)
 
 - `buffered`
   - : Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto {{ domxref("TimeRanges") }} .
@@ -46,7 +47,7 @@ Para obtener una lista de formatos compatibles, consulta [Formatos multimedia ad
 
     Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a metadata.
 
-    > **Nota:**
+    > [!NOTE]
     >
     > - El atributo **autoplay** tiene prioridad sobre éste si se desea reproducir automáticamente un video, el navegador obviamente tendrá que descargarlo. La especificación permite establecer los atributos **autoplay** y **preload**.
     > - La especificación no fuerza al navegador a seguir el valor de este atributo; es tan sólo una sugerencia.
@@ -60,7 +61,8 @@ Para obtener una lista de formatos compatibles, consulta [Formatos multimedia ad
 
 Las compensaciones de tiempo se especifican actualmente como valores float que representan el número de segundos que se va a compensar.
 
-> **Nota:** la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.
+> [!NOTE]
+> La definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.
 
 ## Ejemplos
 
diff --git a/files/es/web/html/element/xmp/index.md b/files/es/web/html/element/xmp/index.md
index 4314b0d911d15e..cbe4c9ebbcec1a 100644
--- a/files/es/web/html/element/xmp/index.md
+++ b/files/es/web/html/element/xmp/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element/xmp
 
 El elemento HTML example element \<xmp> dibuja texto entre las etiquetas de inicio y fin sin interpretar el HTML que se encuentra en medio y lo muestra usando un tipo de letra monoespaciada . La especificación de HTML2 recomendaba que que esta debería de ser dibujada suficientemente amplia para permitir 80 caracteres por línea .
 
-> **Nota:** No usar este elemento.
+> [!NOTE]
+> No usar este elemento.
 >
 > - Ha sido declarado obsoleto desde HTML3.2 y no fue implementado en una manera consistente . Fue completamente removido del lenguaje en HTML5 .
 > - Usar el elemento {{HTMLElement("pre")}} , o si es semánticamente adecuado , el elemento {{HTMLElement("code")}} en su lugar . Notar que necesitarás escapar los caracteres '<' como '\&lt' para asegurarse que no se interprete como marcado .
@@ -23,7 +24,8 @@ Este elemento no tiene otros atributos que los [atributos globales](/es/docs/Web
 
 Este elemento implementa la interface {{domxref('HTMLElement')}} .
 
-> **Nota:** hasta Gecko 1.9.2 inclusivamente , Firefox implemente la interface {{domxref('HTMLSpanElement')}} para este elemento .
+> [!NOTE]
+> Hasta Gecko 1.9.2 inclusivamente , Firefox implemente la interface {{domxref('HTMLSpanElement')}} para este elemento .
 
 ## Ver también
 
diff --git a/files/es/web/html/global_attributes/dir/index.md b/files/es/web/html/global_attributes/dir/index.md
index a824c2720653bd..6b27e96a2a506c 100644
--- a/files/es/web/html/global_attributes/dir/index.md
+++ b/files/es/web/html/global_attributes/dir/index.md
@@ -11,7 +11,8 @@ El [atributo global](/es/docs/Web/HTML/Atributos_Globales) dir es un atributo en
 - `rtl`, significa _derecha_ a _izquierda_ y es usado para los lenguajes que son escritos de la derecha a la izquierda (como el árabe ) .
 - `auto`, permite al agente usuario decidir . Usa un algoritmo básico mientras parsea los caracteres dentro de un elemento hasta que encuentra un elemento con una direccionalidad fuerte , después aplica esa direccionalidad a todo el elemento .
 
-> **Nota:** Este atributo es obligatorio para el elemento {{ HTMLElement("bdo") }} donde este tiene un significado semántico diferente.
+> [!NOTE]
+> Este atributo es obligatorio para el elemento {{ HTMLElement("bdo") }} donde este tiene un significado semántico diferente.
 >
 > - Este atributo no es heredado por el elemento {{ HTMLElement("bdi") }} . Si no se establece , su valor es `auto`.
 > - Este atributo puede ser anulado por las propiedades de CSS {{ cssxref("direction") }} y {{ cssxref("unicode-bidi") }} , si una página CSS está activa y el elemento soporta estas propiedades.
diff --git a/files/es/web/html/global_attributes/hidden/index.md b/files/es/web/html/global_attributes/hidden/index.md
index b6b5ddf0f1c15b..deb0df85afac1d 100644
--- a/files/es/web/html/global_attributes/hidden/index.md
+++ b/files/es/web/html/global_attributes/hidden/index.md
@@ -11,7 +11,8 @@ Esta atributo no debe de usarse para ocultar contenido que pudera ser legítimam
 
 Los elementos ocultos no deben de ser vinculados desde elementos no ocultos y elementos que son descendientes de un elemento oculto todavía activo ; lo que significa que los elementos del script pueden todavía ejecutarse y los elementos de formulario pueden todavía enviarse .
 
-> **Nota:** Cambiando el valor de la propiedad CSS {{cssxref("display")}} de un elemento con el atributo `hidden` sobrecarga el comportamiento . For ejemplo , un elemeneto diseñado `display : flex` será mostrado en la pantalla independientemente de que el atributo `hidden` esté presente .
+> [!NOTE]
+> Cambiando el valor de la propiedad CSS {{cssxref("display")}} de un elemento con el atributo `hidden` sobrecarga el comportamiento . For ejemplo , un elemeneto diseñado `display : flex` será mostrado en la pantalla independientemente de que el atributo `hidden` esté presente .
 
 ## Especificaciones
 
diff --git a/files/es/web/html/global_attributes/id/index.md b/files/es/web/html/global_attributes/id/index.md
index 86933215a20929..4fbac8098744e0 100644
--- a/files/es/web/html/global_attributes/id/index.md
+++ b/files/es/web/html/global_attributes/id/index.md
@@ -11,7 +11,8 @@ El valor de este atributo es una cadena de caracteres opaca: es decir, el autor
 
 El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo **class**, el cual permite valores separados por espacios, los elementos pueden tener sólo un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con el DOM.
 
-> **Nota:** El uso de caracteres a excepción de letras en ASCII, dígitos, '\_', `'-'` y `'.'` pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.
+> [!NOTE]
+> El uso de caracteres a excepción de letras en ASCII, dígitos, '\_', `'-'` y `'.'` pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.
 
 ## Especificaciones
 
diff --git a/files/es/web/html/global_attributes/index.md b/files/es/web/html/global_attributes/index.md
index f0dd4e4630f4bc..4a7ae427f1ec18 100644
--- a/files/es/web/html/global_attributes/index.md
+++ b/files/es/web/html/global_attributes/index.md
@@ -59,7 +59,8 @@ Además de los atributos globales HTML básicos, también existen los siguientes
 - **`[is](/es/docs/Web/HTML/Global_attributes/is)`**
   - : Te permite especificar que un elemento HTML estándar se debe comportar como un elemento integrado personalizado registrado (consulta [Uso de elementos personalizados](/es/docs/Web/Web_Components/Using_custom_elements) para obtener más detalles).
 
-> **Nota:** Los atributos `item*` son parte de [Función de microdatos HTML de WHATWG](https://html.spec.whatwg.org/multipage/microdata.html#microdata).
+> [!NOTE]
+> Los atributos `item*` son parte de [Función de microdatos HTML de WHATWG](https://html.spec.whatwg.org/multipage/microdata.html#microdata).
 
 - **`[itemid](/es/docs/Web/HTML/Global_attributes/itemid)`**
   - : El identificador único y global de un artículo.
diff --git a/files/es/web/html/global_attributes/itemid/index.md b/files/es/web/html/global_attributes/itemid/index.md
index 44abcb2fd0a97d..2add7d1048d1db 100644
--- a/files/es/web/html/global_attributes/itemid/index.md
+++ b/files/es/web/html/global_attributes/itemid/index.md
@@ -11,7 +11,8 @@ Un atributo `itemid` solo se puede especificar para un elemento que tiene atribu
 
 El significado exacto de un identificador global de `itemtype` lo proporciona la definición de ese identificador dentro del vocabulario especificado. El vocabulario define si pueden coexistir varios elementos con el mismo identificador global y, de ser así, cómo se manejan los elementos con el mismo identificador.
 
-> **Nota:** La definición {{glossary("WHATWG")}} especifica que un `itemid` debe ser una {{glossary("URL")}}. Sin embargo, el siguiente ejemplo ilustra correctamente que también se puede usar un {{glossary("URN")}}. Esta inconsistencia puede reflejar la naturaleza incompleta de la especificación de Microdata.
+> [!NOTE]
+> La definición {{glossary("WHATWG")}} especifica que un `itemid` debe ser una {{glossary("URL")}}. Sin embargo, el siguiente ejemplo ilustra correctamente que también se puede usar un {{glossary("URN")}}. Esta inconsistencia puede reflejar la naturaleza incompleta de la especificación de Microdata.
 
 ## Ejemplo
 
diff --git a/files/es/web/html/global_attributes/itemref/index.md b/files/es/web/html/global_attributes/itemref/index.md
index f2d7dd35a3848a..049e96bf37f982 100644
--- a/files/es/web/html/global_attributes/itemref/index.md
+++ b/files/es/web/html/global_attributes/itemref/index.md
@@ -11,7 +11,8 @@ Las propiedades que no son descendientes de un elemento con el atributo `itemsco
 
 El atributo itemref puede ser solo especificado en elementos que tienen un atributo itemscope especificado .
 
-> **Nota:** el atributo itemref no es parte del modelo de micro datos . Es solamente un constructor sintáctico que ayuda a los autores en el ingreso de anotaciones a las páginas donde los datos que se van a anotar no siguen una estructura de arbol conveniente . Por ejemplo , permite a los autores marcar los datos en una tabla para que cada columna defina un item separado mientras se mantienen las propiedades en las celdas .
+> [!NOTE]
+> El atributo itemref no es parte del modelo de micro datos . Es solamente un constructor sintáctico que ayuda a los autores en el ingreso de anotaciones a las páginas donde los datos que se van a anotar no siguen una estructura de arbol conveniente . Por ejemplo , permite a los autores marcar los datos en una tabla para que cada columna defina un item separado mientras se mantienen las propiedades en las celdas .
 
 ## Ejemplo
 
diff --git a/files/es/web/html/global_attributes/itemscope/index.md b/files/es/web/html/global_attributes/itemscope/index.md
index aa2b9cdba7642e..e559b5dbdabc18 100644
--- a/files/es/web/html/global_attributes/itemscope/index.md
+++ b/files/es/web/html/global_attributes/itemscope/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Global_attributes/itemscope
 
 Todos los elementos HTML pueden tener un atributo `itemscope` especifico. Un elemento `itemscope` no tiene un asociado `itemtype` pero tiene un sociado `itemref`.
 
-> **Nota:** Encuentra mas acerca del atributo `itemtype` en <http://schema.org/Thing>
+> [!NOTE]
+> Encuentra mas acerca del atributo `itemtype` en <http://schema.org/Thing>
 
 ### Ejemplo simple
 
@@ -232,7 +233,8 @@ Los siguientes son un ejemplo renderizado resultado del codigo del anterior ejem
   </tbody>
 </table>
 
-> **Nota:** Una herramienta practica para extraer estructuras microdata del HTML es [Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/) de Google. Pruebalo en el HTML del ejemplo anterior.
+> [!NOTE]
+> Una herramienta practica para extraer estructuras microdata del HTML es [Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/) de Google. Pruebalo en el HTML del ejemplo anterior.
 
 ## Especificaciones
 
diff --git a/files/es/web/html/global_attributes/tabindex/index.md b/files/es/web/html/global_attributes/tabindex/index.md
index 534687b542be2e..3b8f99abcacc20 100644
--- a/files/es/web/html/global_attributes/tabindex/index.md
+++ b/files/es/web/html/global_attributes/tabindex/index.md
@@ -5,7 +5,8 @@ slug: Web/HTML/Global_attributes/tabindex
 
 {{HTMLSidebar("Global_attributes")}}
 
-> **Nota:** El valor máximo para tabindex no debe de exceder 32767 ([sección 17.11.1 del W3C](https://www.w3.org/TR/html401/interact/forms.html#h-17.11.1)). Si no se especifica, el valor asignado por defecto es -1.
+> [!NOTE]
+> El valor máximo para tabindex no debe de exceder 32767 ([sección 17.11.1 del W3C](https://www.w3.org/TR/html401/interact/forms.html#h-17.11.1)). Si no se especifica, el valor asignado por defecto es -1.
 
 El [atributo global](/es/docs/Web/HTML/Atributos_Globales) **tabindex** indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla _Tab_, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:
 
diff --git a/files/es/web/html/index.md b/files/es/web/html/index.md
index b78e609d8872a1..502b69effc4b3b 100644
--- a/files/es/web/html/index.md
+++ b/files/es/web/html/index.md
@@ -24,7 +24,7 @@ Los siguientes artículos pueden ayudarte a obtener más información sobre HTML
 - Referencia HTML
   - : En nuestra extensa sección [referencia HTML](/es/docs/Web/HTML/Referencia) encontrarás los detalles sobre cada elemento y atributo en HTML.
 
-> **Observación:**
+> [!CALLOUT]
 >
 > ### ¿Quieres transformarte en un desarrollador de la interfaz de usuario web?
 >
diff --git a/files/es/web/html/microdata/index.md b/files/es/web/html/microdata/index.md
index 3558f9f9e5685c..4ebdc9199ec0ff 100644
--- a/files/es/web/html/microdata/index.md
+++ b/files/es/web/html/microdata/index.md
@@ -20,7 +20,8 @@ En un nivel elevado, los microdatos consisten de un grupo de conjuntos nombre-va
 
 Google, así como otros de los principales buscadores, admiten el vocabulario para datos estructurados de [Schema.org](schema.org). Este vocabulario define un conjunto estandarizado de nombres de tipos y de propiedades: por ejemplo, [Evento musical de Schema.org](http://schema.org/MusicEvent) señala conciertos, e incluye las propiedades _[startDate](http://schema.org/startDate)_ ('fecha inicial') y _[location](http://schema.org/location)_ ('ubicación') para definir los detalles clave del acontecimiento. En este caso, [Evento musical de Schema.org](http://schema.org/MusicEvent) es el URL usado por _itemtype_ y _startDate_, y la ubicación corresponde a las _itemprop_ que defina [Evento musical de Schema.org](http://schema.org/MusicEvent).
 
-> **Nota:** para obtener más información sobre los atributos _itemtype_, véase <http://schema.org/Thing> (en inglés)
+> [!NOTE]
+> Para obtener más información sobre los atributos _itemtype_, véase <http://schema.org/Thing> (en inglés)
 
 Los vocabularios de microdatos brindan la semántica, o el significado, de los elementos. Los programadores web pueden diseñar un vocabulario personalizado o servirse de los que existen disponibles en la web, como el ampliamente utilizado vocabulario de [Schema.org](http://schema.org). Schema.org ofrece una colección de vocabularios de etiquetado usados frecuentemente.
 
@@ -146,7 +147,8 @@ _[itemref](/es/docs/Web/HTML/Global_attributes/itemref)_: las propiedades que no
 
 {{EmbedLiveSample('', '', '100')}}
 
-> **Nota:** una útil herramienta para extraer estructuras de microdatos a partir de HTML es la [Herramienta de pruebas de datos estructurados](https://developers.google.com/structured-data/testing-tool/) de Google. Ponla a prueba en el HTML mostrado más arriba.
+> [!NOTE]
+> Una útil herramienta para extraer estructuras de microdatos a partir de HTML es la [Herramienta de pruebas de datos estructurados](https://developers.google.com/structured-data/testing-tool/) de Google. Ponla a prueba en el HTML mostrado más arriba.
 
 ## Véase también
 
diff --git a/files/es/web/http/basics_of_http/mime_types/index.md b/files/es/web/http/basics_of_http/mime_types/index.md
index f610ad4eee7000..28f0a23f5a016e 100644
--- a/files/es/web/http/basics_of_http/mime_types/index.md
+++ b/files/es/web/http/basics_of_http/mime_types/index.md
@@ -67,7 +67,8 @@ Este es el valor predeterminado para un archivo binario. Como realmente signific
 
 Este es el valor predeterminado para los archivos de texto. Incluso si realmente significa un archivo textual desconocido, los navegadores asumen que pueden mostrarlo.
 
-> **Nota:** Tenga en cuenta que `text/plain` no significa _cualquier tipo de datos textuales_. Si esperan un tipo específico de datos textuales, probablemente no lo considerarán una coincidencia. Específicamente, si descargan un archivo de texto sin formato `text/plain` de un elemento {{HTMLElement("link")}} que declara archivos CSS, no lo reconocerán como un archivo CSS válido si se presenta con `text/plain`. Se debe usar el tipo MIME CSS `text/css`.
+> [!NOTE]
+> Tenga en cuenta que `text/plain` no significa _cualquier tipo de datos textuales_. Si esperan un tipo específico de datos textuales, probablemente no lo considerarán una coincidencia. Específicamente, si descargan un archivo de texto sin formato `text/plain` de un elemento {{HTMLElement("link")}} que declara archivos CSS, no lo reconocerán como un archivo CSS válido si se presenta con `text/plain`. Se debe usar el tipo MIME CSS `text/css`.
 
 ### `text/css`
 
diff --git a/files/es/web/http/caching/index.md b/files/es/web/http/caching/index.md
index 70a6e069864abd..92c476ce1b0a41 100644
--- a/files/es/web/http/caching/index.md
+++ b/files/es/web/http/caching/index.md
@@ -249,7 +249,8 @@ El servidor devolverá `304 Not modified` si el valor del header `ETag` que dete
 
 Pero si el servidor determina que el recurso solicitado ahora debería tener un valor `ETag` diferente, el servidor responderá con `200 OK` y la última versión del recurso.
 
-> **Nota:** A la hora de evaluar como usar `ETag` y `Last-Modified`, se debería considerar lo siguiente:
+> [!NOTE]
+> A la hora de evaluar como usar `ETag` y `Last-Modified`, se debería considerar lo siguiente:
 > Durante la revalidación de la caché, si `ETag` y `Last-Modified` están presentes, `ETag` toma la preferencia.
 > Por lo tanto, si solamente se está considerando el almacenamiento en caché, se puede pensar que `Last-Modified` es innecesario.
 > Sin embargo, `Last-Modified` no solo es útil para el almacenamiento en caché; en cambio, es un encabezado HTTP estándar que también utilizan los sistemas de administración de contenido (CMS) para mostrar la hora de la última modificación, los rastreadores para ajustar la frecuencia de rastreo y para otros fines diversos.
@@ -560,7 +561,8 @@ A tener en cuenta que el número '41' tiene la 'max-age' más larga (1 año), pe
 
 El valor `public` tiene el efecto de hacer que la respuesta se pueda almacenar incluso si el encabezado `Authorization` está presente.
 
-> **Nota:** La directiva `public` solo debe usarse si es necesario almacenar la respuesta cuando se establece el header `Authorization`.
+> [!NOTE]
+> La directiva `public` solo debe usarse si es necesario almacenar la respuesta cuando se establece el header `Authorization`.
 > De lo contrario, no se requiere, porque una respuesta se almacenará en el caché compartido siempre que se proporcione `max-age`.
 
 Entonces, si la respuesta está personalizada con autenticación básica, la presencia de `public` puede causar problemas. Si le preocupa eso, puede elegir el segundo valor más largo, `37` (1 mes).
@@ -603,7 +605,8 @@ ETag: YsAIAAAA-QG4G6kCMAMBAAAAAAAoK
 
 Hacer que una respuesta se pueda almacenar en caché durante un largo período de tiempo cambiando la URL cuando cambia el contenido se denomina **cache busting**. Esa técnica se puede aplicar a todos los subrecursos, como las imágenes.
 
-> **Nota:** Al evaluar el uso de `immutable` y QPACK:
+> [!NOTE]
+> Al evaluar el uso de `immutable` y QPACK:
 > Si le preocupa que `immutable` cambie el valor predefinido proporcionado por QPACK, considere que
 > en este caso, la parte `immutable` se puede codificar por separado dividiendo el valor `Cache-Control` en dos líneas, aunque esto depende del algoritmo de codificación que utilice una implementación particular de QPACK.
 
diff --git a/files/es/web/http/connection_management_in_http_1.x/index.md b/files/es/web/http/connection_management_in_http_1.x/index.md
index 69e7235ae2e42a..e143e49f319d5b 100644
--- a/files/es/web/http/connection_management_in_http_1.x/index.md
+++ b/files/es/web/http/connection_management_in_http_1.x/index.md
@@ -15,7 +15,8 @@ Dos nuevos modelos se presentaron en HTTP/1.1. La conexión persistente, mantien
 
 ![Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining.](http1_x_connections.png)
 
-> **Nota:** HTTP/2 añade nuevos modelos para la gestión de la conexión.
+> [!NOTE]
+> HTTP/2 añade nuevos modelos para la gestión de la conexión.
 
 Un punto significativo a tener en cuenta en la gestión de la conexión de HTTP, es que este se refiere a la conexión establecida entre dos nodos consecutivos de la red, esto se denomina [hop-by-hop](/es/docs/Web/HTTP/Headers#hbh), en contraposición al concepto de [end-to-end](/es/docs/Web/HTTP/Headers#e2e). El modelo de conexión entre un cliente y su primer proxy, puede ser distinto que la comunicación entre el proxy y el servidor de destino (u otro proxy intermedio). Las cabeceras de HTTP utilizadas para definir el modelo de conexión como {{HTTPHeader("Connection")}} y {{HTTPHeader("Keep-Alive")}}, se refieren a una conexión [hop-by-hop](/es/docs/Web/HTTP/Headers#hbh), y estos parámetros, pueden variar en las comunicaciones de los nodos intermedios.
 
@@ -23,13 +24,14 @@ Un tema también relativo a esto, es el concepto de conexiones con protocolos HT
 
 ## Conexiones breves
 
-El modelo original de HTTP, y el modelo de HTTP/1.0, está basado, en conexiones breves. Cada petición HTTP, se completa estableciendo (iniciando, estableciendo y cerrando) su propia conexión. Esto supone que la coordinación en el protocolo HTTP (handshake), sucede de forma previa a cada petición HTTP.
+El modelo original de HTTP, y el modelo de HTTP/1.0, está basado, en conexiones breves. Cada petición HTTP, se completa estableciendo (iniciando, estableciendo y cerrando) su propia conexión. Esto supone que la coordinación en el protocolo TCP (handshake), sucede de forma previa a cada petición HTTP.
 
 La coordinación o inicialización de una comunicación en el protocolo TCP, requiere un tiempo dado, pero al adaptarse el protocolo TCP a su carga de transmisión de datos, este incrementa su eficiencia cuando se mantiene la conexión en el tiempo, utilizándose una conexión para transmitir numerosos peticiones de datos. Las conexiones breves, no utilizan esta característica del protocolo TCP, y el rendimiento de la conexión es peor que en el caso óptimo, al estar constantemente necesitando iniciar conexiones para transmitir cada mensaje (esto se conoce como conexiones 'en frio', o en inglés: 'cold connections').
 
 La conexión breve es la conexión usada por defecto en HTTP/1.0 (únicamente en el caso de no esté definida la cabecera {{HTTPHeader("Connection")}}, o su valor sea `close` entonces, no se utilizaria el modelo de conexiones breves). En HTTP/1.1, este modelo de conexión unicamente se utiliza al definir la cabecera {{HTTPHeader("Connection")}} como `close` .
 
-> **Nota:** A menos que se de la situación en que se ha de trabajar con sistemas antiguos que no soportan conexiones persistentes, no hay otra razón para el uso de este modelo de conexiones.
+> [!NOTE]
+> A menos que se de la situación en que se ha de trabajar con sistemas antiguos que no soportan conexiones persistentes, no hay otra razón para el uso de este modelo de conexiones.
 
 ## Conexiones persistentes
 
@@ -45,7 +47,8 @@ En HTTP/1.1 las conexiones son persistentes por defecto, así que esa cabecera n
 
 ## HTTP pipelining
 
-> **Nota:** HTTP pipelining no está activado por defecto en los navegacdores modernos:\* [Proxies](https://en.wikipedia.org/wiki/Proxy_server) con defectos de implementación son habituales y provocan comportamientos extraños y erráticos, que los desarrolladores de Webs, no pueden predecir, ni corregir fácilmente.
+> [!NOTE]
+> HTTP pipelining no está activado por defecto en los navegacdores modernos:\* [Proxies](https://en.wikipedia.org/wiki/Proxy_server) con defectos de implementación son habituales y provocan comportamientos extraños y erráticos, que los desarrolladores de Webs, no pueden predecir, ni corregir fácilmente.
 >
 > - HTTP Pipelining es complicado de implementar correctamente: el tamaño del recurso pedido, el correcto [RTT](https://en.wikipedia.org/wiki/Round-trip_delay_time) que será utilizado, así como el ancho de banda efectivo, tienen un impacto directo en la en la mejora de rendimiento de este método. Sin conocer estos valores, puede que mensajes importantes, se vean retrasados, por mensajes que no lo son. El concepto de "importante" incluso cambia según se carga la maquetación (layout) de la página. De ahí que este método solamente presente una mejora marginal en la mayoría de los casos.
 > - HTTP Pipelining presenta un problema conocido como [HOL](https://en.wikipedia.org/wiki/Head-of-line_blocking)
@@ -61,7 +64,8 @@ Hoy en día, todo proxy y servidor que cumpla con HTTP/1.1 debería dar soporte
 
 ## Domain sharding
 
-> **Nota:** Unless you have a very specific immediate need, don't use this deprecated technique; switch to HTTP/2 instead. In HTTP/2, domain sharding is no more useful: the HTTP/2 connection is able to handle parallel unprioritized requests very well. Domain sharding is even detrimental to performance. Most HTTP/2 implementation use a technique called [connection coalescing](<I wonder if it's related to the nobash/nobreak/nopick secret exit s of Elrond's chambers.>) to revert eventual domain sharding.
+> [!NOTE]
+> Unless you have a very specific immediate need, don't use this deprecated technique; switch to HTTP/2 instead. In HTTP/2, domain sharding is no more useful: the HTTP/2 connection is able to handle parallel unprioritized requests very well. Domain sharding is even detrimental to performance. Most HTTP/2 implementation use a technique called [connection coalescing](<I wonder if it's related to the nobash/nobreak/nopick secret exit s of Elrond's chambers.>) to revert eventual domain sharding.
 
 As an HTTP/1.x connection is serializing requests, even without any ordering, it can't be optimal without large enough available bandwidth. As a solution, browsers open several connections to each domain, sending parallel requests. Default was once 2 to 3 connections, but this has now increased to a more common use of 6 parallel connections. There is a risk of triggering [DoS](/es/docs/Glossary/DOS_attack) protection on the server side if attempting more than this number.
 
diff --git a/files/es/web/http/cookies/index.md b/files/es/web/http/cookies/index.md
index 81513b3606a4e9..ae3ce877eaebdd 100644
--- a/files/es/web/http/cookies/index.md
+++ b/files/es/web/http/cookies/index.md
@@ -18,7 +18,8 @@ Las cookies se utilizan principalmente con tres propósitos:
 
 Las cookies se usaron una vez para el almacenamiento general del lado del cliente. Si bien esto era legítimo cuando eran la única forma de almacenar datos en el cliente, hoy en día se recomienda preferir las API de almacenamiento modernas. Las cookies se envían con cada solicitud, por lo que pueden empeorar el rendimiento (especialmente para las conexiones de datos móviles). Las APIs modernas para el almacenamiento del cliente son la [Web storage API](/es/docs/Web/API/Web_Storage_API) (`localStorage` y `sessionStorage`) e [IndexedDB](/es/docs/Web/API/IndexedDB_API).
 
-> **Nota:** Para ver las cookies almacenadas (y otro tipo de almacenamiento que una página web puede usar), puede habilitar el [Inspector de Almacenamiento](/es/docs/Tools/Storage_Inspector) en Herramientas del desarrollador y seleccionar Cookies en el árbol de almacenamiento.
+> [!NOTE]
+> Para ver las cookies almacenadas (y otro tipo de almacenamiento que una página web puede usar), puede habilitar el [Inspector de Almacenamiento](/es/docs/Tools/Storage_Inspector) en Herramientas del desarrollador y seleccionar Cookies en el árbol de almacenamiento.
 
 ## Creando cookies
 
@@ -34,7 +35,8 @@ Set-Cookie: <nombre-cookie>=<valor-cookie>
 
 Este encabezado del servidor le dice al cliente que almacene una cookie.
 
-> **Nota:** Aquí se explica como usar el encabezado `Set-Cookie` en varias aplicaciones del lado del servidor:
+> [!NOTE]
+> Aquí se explica como usar el encabezado `Set-Cookie` en varias aplicaciones del lado del servidor:
 >
 > - [PHP](https://secure.php.net/manual/en/function.setcookie.php)
 > - [Node.JS](https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value)
@@ -70,7 +72,8 @@ En lugar de expirar cuando el cliente se cierra, las _cookies permanentes_ expir
 Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
 ```
 
-> **Nota:** Cuando se establece una fecha de expiración, la fecha y hora que se establece es relativa al cliente en el que se establece la cookie, no del servidor.
+> [!NOTE]
+> Cuando se establece una fecha de expiración, la fecha y hora que se establece es relativa al cliente en el que se establece la cookie, no del servidor.
 
 ### Cookies `Secure` y `HttpOnly`
 
@@ -134,7 +137,8 @@ Tenga en cuenta las cuestiones de seguridad en la siguiente sección [Seguridad]
 
 ## Seguridad
 
-> **Nota:** Nunca se debe almacenar ni transmitir información confidecial o sensible mediante Cookies HTTP, ya que todo el mecanismo es inherentemente inseguro.
+> [!NOTE]
+> Nunca se debe almacenar ni transmitir información confidecial o sensible mediante Cookies HTTP, ya que todo el mecanismo es inherentemente inseguro.
 
 ### Secuestro de session y XSS
 
diff --git a/files/es/web/http/cors/errors/corsmissingalloworigin/index.md b/files/es/web/http/cors/errors/corsmissingalloworigin/index.md
index 36c1a3e107e8c5..7298de4a676492 100644
--- a/files/es/web/http/cors/errors/corsmissingalloworigin/index.md
+++ b/files/es/web/http/cors/errors/corsmissingalloworigin/index.md
@@ -29,7 +29,8 @@ También puede configurar un sitio para permitirle el acceso desde cualquier otr
 Access-Control-Allow-Origin: *
 ```
 
-> **Advertencia:** Utilizar el comodín para permitir que todos los sitios accedan a una API privada es una mala idea.
+> [!WARNING]
+> Utilizar el comodín para permitir que todos los sitios accedan a una API privada es una mala idea.
 
 Para permitir que cualquier sitio realice peticiones CORS _sin_ usar el comodín `*` (por ejemplo, para activar credenciales), su servidor deberá leer el valor la cabecera `Origin` de la petición y usar dicho valor para `Access-Control-Allow-Origin` y además declarar una cabecera `Vary: Origin` para indicar que algunas cabeceras están siendo dinámicamente declaradas dependiendo del origen.
 
diff --git a/files/es/web/http/cors/errors/index.md b/files/es/web/http/cors/errors/index.md
index fb253285f7f644..f64eecb9b61fa9 100644
--- a/files/es/web/http/cors/errors/index.md
+++ b/files/es/web/http/cors/errors/index.md
@@ -28,7 +28,8 @@ impide leer el recurso remoto en https://alguna-url-aqui (razón:
 información adicional aquí).
 ```
 
-> **Nota:** Por razones de seguridad, los detalles sobre lo que salió mal con una solicitud CORS _no están disponibles para el código JavaScript_. Todo lo que el código sabe es que ocurrió un error. La única forma de determinar qué salió mal específicamente es mirar la consola del navegador para obtener más detalles.
+> [!NOTE]
+> Por razones de seguridad, los detalles sobre lo que salió mal con una solicitud CORS _no están disponibles para el código JavaScript_. Todo lo que el código sabe es que ocurrió un error. La única forma de determinar qué salió mal específicamente es mirar la consola del navegador para obtener más detalles.
 
 ## Mensajes de error de CORS
 
diff --git a/files/es/web/http/cors/index.md b/files/es/web/http/cors/index.md
index a25fd373dab204..1b1467dbfd9d01 100644
--- a/files/es/web/http/cors/index.md
+++ b/files/es/web/http/cors/index.md
@@ -63,7 +63,8 @@ Una petición simple es aquella que cumple todas las siguientes condiciones:
   - {{HTTPHeader("Content-Type")}} (Por favor, tenga en cuenta los siguientes requisitos adicionales)
   - {{HTTPHeader("Range")}} (solo con un [valor de cabecera de rango simple](https://fetch.spec.whatwg.org/#simple-range-header-value); por ejemplo, `bytes=256-` o `bytes=127-255`)
 
-> **Nota:** Firefox aún no ha implementado `Range` como una cabecera de solicitud en la lista segura. Véase el [error 1733981 en Firefox](https://bugzil.la/1733981).
+> [!NOTE]
+> Firefox aún no ha implementado `Range` como una cabecera de solicitud en la lista segura. Véase el [error 1733981 en Firefox](https://bugzil.la/1733981).
 
 - Las únicas combinaciones de tipo/subtipo permitidas para el {{Glossary("MIME type","media type")}} especificado en la cabecera {{HTTPHeader("Content-Type")}} son:
 
@@ -139,7 +140,8 @@ Este patrón de las cabeceras {{HTTPHeader("Origin")}} y {{HTTPHeader("Access-Co
 Access-Control-Allow-Origin: https://foo.example
 ```
 
-> **Nota:** Al responder a una petición con [solicitud con credenciales](#requests_with_credentials), el servidor debe especificar un origen en el valor de la cabecera `Access-Control-Allow-Origin`, en lugar de especificar el comodín "\*".
+> [!NOTE]
+> Al responder a una petición con [solicitud con credenciales](#requests_with_credentials), el servidor debe especificar un origen en el valor de la cabecera `Access-Control-Allow-Origin`, en lugar de especificar el comodín "\*".
 
 ### Solicitudes verificadas previamente
 
@@ -160,7 +162,8 @@ El ejemplo anterior crea un cuerpo para enviar con la solicitud `POST`. Además,
 
 ![Diagrama de una solicitud con verificación previa](preflight_correct.png)
 
-> **Nota:** Como se describe a continuación, la solicitud `POST` real no incluye las cabeceras `Access-Control-Request-*`. Estas solo son necesarias para la solicitud `OPTIONS`.
+> [!NOTE]
+> Como se describe a continuación, la solicitud `POST` real no incluye las cabeceras `Access-Control-Request-*`. Estas solo son necesarias para la solicitud `OPTIONS`.
 
 Veamos el intercambio completo entre cliente y servidor. El primer intercambio es la solicitud/respuesta verificadas previamente:
 
@@ -269,7 +272,8 @@ Sin embargo, si se trata de una solicitud que desencadena una verificación prev
 
 ### Solicitudes con credenciales
 
-> **Nota:** Cuando se realicen peticiones con credenciales a un dominio diferente, se seguirán aplicando las políticas de cookies de terceros. La política siempre se aplica independientemente de cualquier configuración en el servidor y el cliente, como se describe en este capítulo.
+> [!NOTE]
+> Cuando se realicen peticiones con credenciales a un dominio diferente, se seguirán aplicando las políticas de cookies de terceros. La política siempre se aplica independientemente de cualquier configuración en el servidor y el cliente, como se describe en este capítulo.
 
 La capacidad más interesante expuesta por {{domxref("XMLHttpRequest")}} o [Fetch](/es/docs/Web/API/Fetch_API) y CORS es la capacidad de hacer peticiones "con credenciales" que son conscientes de las [cookies HTTP](/es/docs/Web/HTTP/Cookies) y de la información de autentificación HTTP. Por defecto, en las invocaciones `XMLHttpRequest` o [Fetch](/es/docs/Web/API/Fetch_API) de origen cruzado, los navegadores **no** enviarán credenciales. Debe establecerse un indicador específico en el objeto `XMLHttpRequest` o en el constructor {{domxref("Request")}} cuando se invoca.
 
@@ -331,7 +335,8 @@ Aunque la línea 10 contiene la Cookie destinada al contenido en `https://bar.ot
 
 La solicitudes CORS de verificación previa nunca deben incluir credenciales. La respuesta a una solicitud de verificación previa debe especificar `Access-Control-Allow-Credentials: true` para indicar que la solicitud real se puede realizar con credenciales.
 
-> **Nota:** Algunos servicios de autenticación de empresas exigen que se envíen certificados de cliente TLS en las solicitudes de verificación previa, lo que contraviene la especificación [Fetch](https://fetch.spec.whatwg.org/#cors-protocol-and-credentials).
+> [!NOTE]
+> Algunos servicios de autenticación de empresas exigen que se envíen certificados de cliente TLS en las solicitudes de verificación previa, lo que contraviene la especificación [Fetch](https://fetch.spec.whatwg.org/#cors-protocol-and-credentials).
 >
 > Firefox 87 permite habilitar este comportamiento no conforme configurando la preferencia: `network.cors_preflight.allow_client_cert` en `true` ([error 1511151 en Firefox](https://bugzil.la/1511151)). Actualmente, los navegadores basados en Chromium siempre envían certificados de cliente TLS en solicitudes de verificación previa de CORS ([error 775438 en Chrome](https://crbug.com/775438)).
 
@@ -452,7 +457,8 @@ Origin: <origin>
 
 El origen es una URL que indica el servidor desde el que se inicia la solicitud. No incluye ninguna información de ruta, sólo el nombre del servidor.
 
-> **Nota:** El valor de `origin` puede ser `null`.
+> [!NOTE]
+> El valor de `origin` puede ser `null`.
 
 Tenga en cuenta que en cualquier solicitud de control de acceso, la cabecera {{HTTPHeader("Origin")}} **siempre** es enviada.
 
diff --git a/files/es/web/http/headers/authorization/index.md b/files/es/web/http/headers/authorization/index.md
index 792b7f48e6cc2a..ef68764cca4f2b 100644
--- a/files/es/web/http/headers/authorization/index.md
+++ b/files/es/web/http/headers/authorization/index.md
@@ -27,7 +27,8 @@ Authorization: <tipo> <credenciales>
   - : Si se utiliza el esquema de la autenticación "Basic", las credenciales son construidas de esta forma:
     - El usuario y la contraseña se combinan con dos puntos (`aladdin:opensesame`).
     - El string resultante está basado en la codificación [base64](/es/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) (`YWxhZGRpbjpvcGVuc2VzYW1l`).
-      > **Nota:** ¡La codificación Base64 no es equivalente a encriptación o hashing! Este método es igual de seguro a enviar las credenciales en un archivo plano de texto (la codificación base64 es reversible). Lo recomendable es utilizar HTTPS en conjunto a la autenticación básica.
+      > [!NOTE]
+      > ¡La codificación Base64 no es equivalente a encriptación o hashing! Este método es igual de seguro a enviar las credenciales en un archivo plano de texto (la codificación base64 es reversible). Lo recomendable es utilizar HTTPS en conjunto a la autenticación básica.
 
 ## Ejemplos
 
diff --git a/files/es/web/http/headers/content-security-policy/index.md b/files/es/web/http/headers/content-security-policy/index.md
index f287bcf9ea269b..bd14a7817adff9 100644
--- a/files/es/web/http/headers/content-security-policy/index.md
+++ b/files/es/web/http/headers/content-security-policy/index.md
@@ -40,7 +40,8 @@ Content-Security-Policy: <policy-directive>; <policy-directive>
 
   - : Define los origenes válidos para [web workers](/es/docs/Web/API/Web_Workers_API) y contextos de navegación anidados cargados usando elementos como {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.
 
-    > **Advertencia:** En lugar de **`child-src`**, los autores quienes deseen regular los contextos de navegación anidados y "workers" deberían usar las directivas {{CSP("frame-src")}} y {{CSP("worker-src")}}, respectivamente.
+    > [!WARNING]
+    > En lugar de **`child-src`**, los autores quienes deseen regular los contextos de navegación anidados y "workers" deberían usar las directivas {{CSP("frame-src")}} y {{CSP("worker-src")}}, respectivamente.
 
 - {{CSP("connect-src")}}
   - : Restringe las URLs que pueden ser cargados usando scripts.
@@ -105,7 +106,8 @@ Reporting directives control the reporting process of CSP violations. See also t
 
   - : Instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP `POST` request to the specified URI.
 
-    > **Advertencia:** Though the {{CSP("report-to")}} directive is intended to replace the deprecated **`report-uri`** directive, {{CSP("report-to")}} isn't supported in most browsers yet. So for compatibility with current browsers while also adding forward compatibility when browsers get {{CSP("report-to")}} support, you can specify both **`report-uri`** and {{CSP("report-to")}}:
+    > [!WARNING]
+    > Though the {{CSP("report-to")}} directive is intended to replace the deprecated **`report-uri`** directive, {{CSP("report-to")}} isn't supported in most browsers yet. So for compatibility with current browsers while also adding forward compatibility when browsers get {{CSP("report-to")}} support, you can specify both **`report-uri`** and {{CSP("report-to")}}:
     >
     > ```
     > Content-Security-Policy: ...; report-uri https://endpoint.example.com; report-to groupname
diff --git a/files/es/web/http/headers/digest/index.md b/files/es/web/http/headers/digest/index.md
index 1155e3f1ade455..af8a3cef49a3c6 100644
--- a/files/es/web/http/headers/digest/index.md
+++ b/files/es/web/http/headers/digest/index.md
@@ -38,7 +38,8 @@ Los argoritmos digest, también conocidos como [funciones criptográficas hash](
 
 Este algoritmo se especifica en [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), sección 6.1, y produce una salida de 160 bits de largo.
 
-> **Advertencia:** Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.
+> [!WARNING]
+> Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.
 
 ### SHA-256
 
@@ -52,7 +53,8 @@ Este algoritmo se especifica en [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/F
 
 Este algoritmo se especifica en [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), sección 6.4, y produce una salida de 512 bits de largo.
 
-> **Nota:** Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" ([HMAC](/es/docs/Glossary/HMAC)), necesitas usar [SubtleCrypto.sign()](/es/docs/Web/API/SubtleCrypto/sign#HMAC) en su lugar.
+> [!NOTE]
+> Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" ([HMAC](/es/docs/Glossary/HMAC)), necesitas usar [SubtleCrypto.sign()](/es/docs/Web/API/SubtleCrypto/sign#HMAC) en su lugar.
 
 ## Ejemplos
 
@@ -105,7 +107,8 @@ console.log(digestHex);
 
 {{Compat}}
 
-> **Nota:** En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.
+> [!NOTE]
+> En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.
 
 ## Ver también
 
diff --git a/files/es/web/http/headers/keep-alive/index.md b/files/es/web/http/headers/keep-alive/index.md
index 930b32770ec18e..a30b751ef00139 100644
--- a/files/es/web/http/headers/keep-alive/index.md
+++ b/files/es/web/http/headers/keep-alive/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Keep-Alive
 
 El encabezado **`Keep-Alive`** permite al remitente indicar como será la forma de conexión, se puede establecer un tiempo de espera y una cantidad máxima de solicitudes.
 
-> **Nota:** El encabezado {{HTTPHeader("Connection")}} se tiene que establecer en "keep-alive" para que este encabezado tenga sentido. Además, {{HTTPHeader("Connection")}} y {{HTTPHeader("Keep-Alive")}} son ignorados en HTTP/2; la administración de la conexión se realiza mediante otros mecanismos.
+> [!NOTE]
+> El encabezado {{HTTPHeader("Connection")}} se tiene que establecer en "keep-alive" para que este encabezado tenga sentido. Además, {{HTTPHeader("Connection")}} y {{HTTPHeader("Keep-Alive")}} son ignorados en HTTP/2; la administración de la conexión se realiza mediante otros mecanismos.
 
 | Header type                           | {{Glossary("General header")}} |
 | ------------------------------------- | ------------------------------ |
diff --git a/files/es/web/http/headers/referer/index.md b/files/es/web/http/headers/referer/index.md
index b095e61f51cf52..4d746c387960cc 100644
--- a/files/es/web/http/headers/referer/index.md
+++ b/files/es/web/http/headers/referer/index.md
@@ -9,7 +9,8 @@ La cabecera de solicitud **`Referer`** ("referente") contiene la dirección de l
 
 Observe que _referer_ es una grafía errónea de la palabra _referrer_. Consulte [<em>HTTP referer</em> en Wikipedia](https://es.wikipedia.org/wiki/HTTP_referer) para obtener más información.
 
-> **Advertencia:** La cabecera `Referer` tiene el potencial de revelar información sobre el histórico de navegación del usuario, lo cual constituye un problema de privacidad.
+> [!WARNING]
+> La cabecera `Referer` tiene el potencial de revelar información sobre el histórico de navegación del usuario, lo cual constituye un problema de privacidad.
 
 Los navegadores no envían ninguna cabecera `Referer` si:
 
diff --git a/files/es/web/http/headers/referrer-policy/index.md b/files/es/web/http/headers/referrer-policy/index.md
index 0ad948ba546ff3..d8efe47512a9d8 100644
--- a/files/es/web/http/headers/referrer-policy/index.md
+++ b/files/es/web/http/headers/referrer-policy/index.md
@@ -55,7 +55,8 @@ Referrer-Policy: unsafe-url
 
   - : Se enviará un URL completo al realizarse una solicitud de origen equivalente o de origen transversal.
 
-    > **Nota:** Esta directiva filtrará los orígenes y las rutas de acceso de recursos protegidos por TLS a orígenes inseguros. Estudie atentamente el impacto resultante de esta configuración.
+    > [!NOTE]
+    > Esta directiva filtrará los orígenes y las rutas de acceso de recursos protegidos por TLS a orígenes inseguros. Estudie atentamente el impacto resultante de esta configuración.
 
 ## Ejemplos
 
diff --git a/files/es/web/http/headers/set-cookie/index.md b/files/es/web/http/headers/set-cookie/index.md
index dbc49afded8c89..a592a90e399cec 100644
--- a/files/es/web/http/headers/set-cookie/index.md
+++ b/files/es/web/http/headers/set-cookie/index.md
@@ -70,7 +70,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
 
     Si no está especificado, la cookie tendrá el tiempo de vida de una **session cookie.** Una sesión finaliza cuando el cliente lo culmina, esto quiere decir que la sesión será removida en ese punto.
 
-    > **Advertencia:** Sin embargo, muchos navegadores web tiene una caracteristica llamada "restaurar" que almacenará todas tus pestañas para tenerlas lista cuando el navegador sea usado nuevamente. Las cookies de sesión tambien estarán presentes como si nunca se hubiera cerrado el navegador.
+    > [!WARNING]
+    > Sin embargo, muchos navegadores web tiene una caracteristica llamada "restaurar" que almacenará todas tus pestañas para tenerlas lista cuando el navegador sea usado nuevamente. Las cookies de sesión tambien estarán presentes como si nunca se hubiera cerrado el navegador.
 
     Cuando una fecha de Expires es definida, la fecha límite es relativa al _cliente_ donde la cookie se define, no en el servidor.
 
@@ -91,7 +92,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
 
   - : Una cookie segura es sólo enviada al servidor cuando una petición es enviada con el esquema `https:`. (Sin embargo, información confidencial nunca debería ser almacenada en Cookies HTTP, como todo el mecanismo es However, confidential information should never be stored in HTTP Cookies, ya que todo el mecanismo es inherentemente inseguro y no encripta ninguna información.)
 
-    > **Nota:** Sitios inseguros (`http:`) no puenden almacenar directivas "seguras" apartir de Chrome 52+ y Firefox 52+.
+    > [!NOTE]
+    > Sitios inseguros (`http:`) no puenden almacenar directivas "seguras" apartir de Chrome 52+ y Firefox 52+.
 
 - `HttpOnly` {{optional_inline}}
   - : Impide que el código JavaScript acceda a la cookie. Por ejemplo, a través de la propiedad {{domxref("Document.cookie")}}, y la API {{domxref("XMLHttpRequest")}}, o la API {{domxref("Request")}}. Esto mitiga los ataques contra scripts cross-site ({{Glossary("XSS")}}).
@@ -105,7 +107,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
 
     Afirma que una cookie no debe ser enviada con peticiones cruzadas, proveiendo alguna protección contra ataques de falsificación de solicitudes cruzadas ({{Glossary("CSRF")}}).
 
-    > **Nota:** Los navegadores haciendo migraciones para que el comportamiento por defecto de las cookies en lugar de [default sea `SameSite=Lax`](https://www.chromestatus.com/feature/5088147346030592). Si una cookie necesita ser enviada en peticiones cruzadas, se tiene que optar por no restringir el mismo sitio (SameSite) usando la directiva `None`. La directiva `None` requiere el atributo [`Secure`](#Secure).
+    > [!NOTE]
+    > Los navegadores haciendo migraciones para que el comportamiento por defecto de las cookies en lugar de [default sea `SameSite=Lax`](https://www.chromestatus.com/feature/5088147346030592). Si una cookie necesita ser enviada en peticiones cruzadas, se tiene que optar por no restringir el mismo sitio (SameSite) usando la directiva `None`. La directiva `None` requiere el atributo [`Secure`](#Secure).
 
 ## Ejemplos
 
@@ -153,7 +156,8 @@ Los nombres de las cookies prefijadas con `__Secure-` o `__Host-` pueden ser sol
 
 Además, cookies con el prefijo `__Host-` deben tener una ruta de `/` (significando cualquier ruta del huésped) y no debe tener un atributo `Domain`.
 
-> **Advertencia:** Para clientes que no implementan prefijos para las cookies, no se puede contar con que estas garantías adicionales, y las cookies prefijadas sean aceptadas.
+> [!WARNING]
+> Para clientes que no implementan prefijos para las cookies, no se puede contar con que estas garantías adicionales, y las cookies prefijadas sean aceptadas.
 
 ```
 // Ambas aceptadas al venir de un origen seguro (HTTPS)
diff --git a/files/es/web/http/headers/strict-transport-security/index.md b/files/es/web/http/headers/strict-transport-security/index.md
index fd44344cb2145c..ca84569a92e87a 100644
--- a/files/es/web/http/headers/strict-transport-security/index.md
+++ b/files/es/web/http/headers/strict-transport-security/index.md
@@ -36,7 +36,8 @@ Esto habilita el potencial ataque man-in-the-middle, donde el redireccionamiento
 
 El encabezado HTTP Strict Transport Security permite a un sitio web informar al navegador que nunca cargue el sitio usando HTTP y que debe automáticamente convertir todos los intentos de acceso HTTP a HTTPS.
 
-> **Nota:** El encabezado `Strict-Transport-Security` es **ignorado** por el navegador cuando el sitio es accedido usando HTTP; esto es porque un atacante podría interceptar las conexiones HTTP e inyectar el encabezado o removerlo. Cuando el sitio es accedido a través de HTTPS con un certificado sin errores, el navegador sabe que el sitio es capaz de usar HTTPS y cumple con lo indicado en el encabezado `Strict-Transport-Security`.
+> [!NOTE]
+> El encabezado `Strict-Transport-Security` es **ignorado** por el navegador cuando el sitio es accedido usando HTTP; esto es porque un atacante podría interceptar las conexiones HTTP e inyectar el encabezado o removerlo. Cuando el sitio es accedido a través de HTTPS con un certificado sin errores, el navegador sabe que el sitio es capaz de usar HTTPS y cumple con lo indicado en el encabezado `Strict-Transport-Security`.
 
 ### Un escenario de ejemplo
 
diff --git a/files/es/web/http/headers/user-agent/index.md b/files/es/web/http/headers/user-agent/index.md
index 4b7b3d412d58cb..70758c64a74cfc 100644
--- a/files/es/web/http/headers/user-agent/index.md
+++ b/files/es/web/http/headers/user-agent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 El **User-Agent** {{Glossary("request header")}} es una cadena característica que le permite a los servidores y servicios de red identificar la aplicación, sistema operativo, compañía, y/o la versión del {{Glossary("user agent")}} que hace la petición.
 
-> **Advertencia:** Por favor lee [Detección de navegadores usando el agente de usuario](/es/docs/Web/HTTP/Browser_detection_using_the_user_agent) para entender por qué generalmente es una mala idea servir diferentes páginas Web o servicios dependiendo del navegador.
+> [!WARNING]
+> Por favor lee [Detección de navegadores usando el agente de usuario](/es/docs/Web/HTTP/Browser_detection_using_the_user_agent) para entender por qué generalmente es una mala idea servir diferentes páginas Web o servicios dependiendo del navegador.
 
 <table class="properties">
  <tbody>
diff --git a/files/es/web/http/headers/x-frame-options/index.md b/files/es/web/http/headers/x-frame-options/index.md
index 95b7e3ec566d3e..6a6ba0b7d0a4e4 100644
--- a/files/es/web/http/headers/x-frame-options/index.md
+++ b/files/es/web/http/headers/x-frame-options/index.md
@@ -9,7 +9,8 @@ El encabezado de respuesta [HTTP](/es/docs/Web/HTTP) **`X-Frame-Options`** puede
 
 La seguridad añadida sólo es proporcionada si el usuario que está accediendo al documento está utilizando un navegador que soporte `X-Frame-Options`.
 
-> **Nota:** El encabezado HTTP {{HTTPHeader("Content-Security-Policy")}} tiene una directiva {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} que deja [obsoleto](https://www.w3.org/TR/CSP2/#frame-ancestors-and-frame-options) este encabezado para los navegadores compatibles.
+> [!NOTE]
+> El encabezado HTTP {{HTTPHeader("Content-Security-Policy")}} tiene una directiva {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} que deja [obsoleto](https://www.w3.org/TR/CSP2/#frame-ancestors-and-frame-options) este encabezado para los navegadores compatibles.
 
 <table class="properties">
   <tbody>
@@ -46,7 +47,8 @@ Si especifica `DENY`, fallarán no sólo los intentos de cargar la página en un
 
 ## Ejemplos
 
-> **Nota:** ¡Configurar X-Frame-Options en el tag {{HTMLElement("meta")}} es inútil! Por ejemplo, `<meta http-equiv="X-Frame-Options" content="deny">` no tiene efecto. ¡No lo use! `X-Frame-Options` sólo funcionará configurandolo a tráves del encabezado HTTP, como en los ejemplos a continuación.
+> [!NOTE]
+> ¡Configurar X-Frame-Options en el tag {{HTMLElement("meta")}} es inútil! Por ejemplo, `<meta http-equiv="X-Frame-Options" content="deny">` no tiene efecto. ¡No lo use! `X-Frame-Options` sólo funcionará configurandolo a tráves del encabezado HTTP, como en los ejemplos a continuación.
 
 ### Configurando Apache
 
diff --git a/files/es/web/http/protocol_upgrade_mechanism/index.md b/files/es/web/http/protocol_upgrade_mechanism/index.md
index 40553f20516184..e477cc4c078c48 100644
--- a/files/es/web/http/protocol_upgrade_mechanism/index.md
+++ b/files/es/web/http/protocol_upgrade_mechanism/index.md
@@ -50,7 +50,8 @@ HTTP2-Settings: base64EncodedSettings
 
 Aquí, `base64EncodedSettings` es una propiedad de HTTP/2 `"SETTINGS"` del contenido de la trama que se expresa en formato `base64url`, seguido de un carácter de igual, `"="`, omitido aquí para que se pudiera incluir en esta cabecera expresada en texto.
 
-> **Nota:** El formato [base64url](https://tools.ietf.org/html/rfc4648#section-5) fno es el mismo que el formato estándar Base64. La única diferencia es que para asegurar que la cadena de caracteres es segura para que pueda usarse con URLs y nombres de archivos, los caracteres 62 y 63 en el alfabeto de este formato se cambian de : `"+"` y `"/"` a: `"-"` (menos) y `"_"` respectivamente.
+> [!NOTE]
+> El formato [base64url](https://tools.ietf.org/html/rfc4648#section-5) fno es el mismo que el formato estándar Base64. La única diferencia es que para asegurar que la cadena de caracteres es segura para que pueda usarse con URLs y nombres de archivos, los caracteres 62 y 63 en el alfabeto de este formato se cambian de : `"+"` y `"/"` a: `"-"` (menos) y `"_"` respectivamente.
 
 Si el servidor no puede hacer el cambio a HTTP/2, este responderá en HTTP/1 como si fuera una petición normal (con los códigos: `"200 OK"` si todo es correcto, o `30x` si quiere hacer una redirección, o `40x` ó `50x` si no puede responder con el recurso pedido). Así una petición de una página que exista será respondida con `"HTTP/1.1 200 OK"` seguido del resto de la cabecera de la página. Si el servidor, si que puede cambiar al protocolo HTTP/2 , la respuesta será: "`HTTP/1.1 101 Switching Protocols"`. A continuación, se presenta un ejemplo de una posible respuesta, a una petición de actualización a HTTP/2.
 
@@ -74,7 +75,8 @@ webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol");
 
 The {{domxref("WebSocket.WebSocket", "WebSocket()")}} constructor does all the work of creating an initial HTTP/1.1 connection then handling the handshaking and upgrade process for you.
 
-> **Nota:** You can also use the `"wss://"` URL scheme to open a secure WebSocket connection.
+> [!NOTE]
+> You can also use the `"wss://"` URL scheme to open a secure WebSocket connection.
 
 If you need to create a WebSocket connection from scratch, you'll have to handle the handshaking process yourself. After creating the initial HTTP/1.1 session, you need to request the upgrade by adding to a standard request the {{HTTPHeader("Upgrade")}} and {{HTTPHeader("Connection")}} headers, as follows:
 
diff --git a/files/es/web/http/session/index.md b/files/es/web/http/session/index.md
index dc673e2f194412..8a56357a3b90dd 100644
--- a/files/es/web/http/session/index.md
+++ b/files/es/web/http/session/index.md
@@ -19,7 +19,8 @@ En un protocolo cliente servidor, es siempre el cliente el que establece la cone
 
 En TCP el puerto por defecto, para un servidor HTTP en un computador, es el puerto 80. Se pueden usar otros puertos como el 8000 o el 8080. La URL de la página pedida contiene tanto el nombre del dominio, como el número de puerto, aunque este puede ser omitido, si se trata del puerto 80. Véase la referencia de [Identificación de recursos en la Web](/es/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web) para más detalles.
 
-> **Nota:** El modelo cliente-servidor no permite que el servidor mande datos al cliente sin una petición explicita. Como solución parcial a este problema, los desarrolladores web, usan varias técnicas, como hacer un ping al servidor periódicamente, mediante {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} APIs, o usar la HTML [WebSockets API](/en/WebSockets) o protocolos similares.
+> [!NOTE]
+> El modelo cliente-servidor no permite que el servidor mande datos al cliente sin una petición explicita. Como solución parcial a este problema, los desarrolladores web, usan varias técnicas, como hacer un ping al servidor periódicamente, mediante {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} APIs, o usar la HTML [WebSockets API](/en/WebSockets) o protocolos similares.
 
 ## Mandando una petición
 
diff --git a/files/es/web/http/status/304/index.md b/files/es/web/http/status/304/index.md
index 089bb7a2336e26..ce43f8a6a1cb88 100644
--- a/files/es/web/http/status/304/index.md
+++ b/files/es/web/http/status/304/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/304
 
 El código HTTP de redirección **`304 Not Modified`** en el response de la petición indica que no hay necesidad de retransmitir los recursos solicitados. Es una redirección implícita a un elemento/recurso de caché.Esto sucede cuando el método de la solicitud es {{glossary("seguro")}} ({{glossary("safe")}}), como en el las peticiones con métodos {{HTTPMethod("GET")}} o {{HTTPMethod("HEAD")}}, o cuando el request (petición) está condicionada y usa la cabecera {{HTTPHeader("If-None-Match")}} o un {{HTTPHeader("If-Modified-Since")}}El response {{HTTPStatus("200")}} `OK` habría incluido los encabezados {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Content-Location")}}, {{HTTPHeader("Date")}}, {{HTTPHeader("ETag")}}, {{HTTPHeader("Expires")}}, y {{HTTPHeader("Vary")}}.
 
-> **Nota:** Muchos [developer tools' network panels](/es/docs/Tools/Network_Monitor) (paneles de red de desarrollo) de los navegadores crean extraños request que conducen a un "response(respuesta del servidor) `304` ", entonces el acceso al caché local es accesible a los desarrollodares.
+> [!NOTE]
+> Muchos [developer tools' network panels](/es/docs/Tools/Network_Monitor) (paneles de red de desarrollo) de los navegadores crean extraños request que conducen a un "response(respuesta del servidor) `304` ", entonces el acceso al caché local es accesible a los desarrollodares.
 
 ## Status
 
diff --git a/files/es/web/http/status/400/index.md b/files/es/web/http/status/400/index.md
index 43b5a6135e27aa..74db3094e81d43 100644
--- a/files/es/web/http/status/400/index.md
+++ b/files/es/web/http/status/400/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/400
 
 La respuesta de código de estado del Protocolo de Transferencia de Hipertexto (HTTP) **`400 Bad Request`** indica que el servidor no puede o no procesará la petición debido a algo que es percibido como un error del cliente (p. ej., sintaxis de petición malformada, solicitud inválida de enmarcado de mensajes, o enrutamiento engañoso de peticiones).
 
-> **Advertencia:** El cliente no debería repetir esta petición sin modificarla.
+> [!WARNING]
+> El cliente no debería repetir esta petición sin modificarla.
 
 ## Estado
 
diff --git a/files/es/web/http/status/404/index.md b/files/es/web/http/status/404/index.md
index 2fc6d1f525e297..679743eae6fb8c 100644
--- a/files/es/web/http/status/404/index.md
+++ b/files/es/web/http/status/404/index.md
@@ -31,7 +31,8 @@ ErrorDocument 404 /no-encontrado.html
 
 Para una pagina 404 de ejemplo, mire la pagina [MDN 404](/es/404).
 
-> **Nota:** Diseños personalizados son buenos, si se usan de manera moderada. Siente libre de hacer tus paginas 404 humoristicas y humanas, pero no confundas a tus usuarios.
+> [!NOTE]
+> Diseños personalizados son buenos, si se usan de manera moderada. Siente libre de hacer tus paginas 404 humoristicas y humanas, pero no confundas a tus usuarios.
 
 ## Especificaciones
 
diff --git a/files/es/web/http/status/408/index.md b/files/es/web/http/status/408/index.md
index de8a5b22b2e511..4097640c8215c2 100644
--- a/files/es/web/http/status/408/index.md
+++ b/files/es/web/http/status/408/index.md
@@ -11,7 +11,8 @@ Un servidor debe enviar "close" en el campo de la cabecera {{HTTPHeader("Connect
 
 Esta respuesta es usada mucho más desde que algunos navegadores, como Chrome, Firefox 27+, y IE9, usan el mecanizmo de pre-conexión HTTP para acelerar la naveación.
 
-> **Nota:** Algunos servidores simplemente cierran la conexión sin enviar este mensaje.
+> [!NOTE]
+> Algunos servidores simplemente cierran la conexión sin enviar este mensaje.
 
 ## Estado
 
diff --git a/files/es/web/http/status/502/index.md b/files/es/web/http/status/502/index.md
index ae802c67e598b6..29184bc3101359 100644
--- a/files/es/web/http/status/502/index.md
+++ b/files/es/web/http/status/502/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/502
 
 El código de respuesta de error del servidor de HTTP **`502 Bad Gateway`** indica que el servidor, mientras actuaba como una puerta de enlace o proxy, recibió una respuesta no válida del servidor ascendente.
 
-> **Nota:** Una [puerta de enlace](https://es.wikipedia.org/wiki/Puerta_de_enlace) puede referirse a cosas distintas en redes y un error 502 no es algo que normalmente puedas arreglar, ya que requiere correcciones por parte del servidor o los proxies a través de los que intentas acceder.
+> [!NOTE]
+> Una [puerta de enlace](https://es.wikipedia.org/wiki/Puerta_de_enlace) puede referirse a cosas distintas en redes y un error 502 no es algo que normalmente puedas arreglar, ya que requiere correcciones por parte del servidor o los proxies a través de los que intentas acceder.
 
 ## Estado
 
diff --git a/files/es/web/http/status/503/index.md b/files/es/web/http/status/503/index.md
index c61edfb6be89e8..f1bcd250743152 100644
--- a/files/es/web/http/status/503/index.md
+++ b/files/es/web/http/status/503/index.md
@@ -9,7 +9,8 @@ El envío de un código de error **`503 Servicio No Disponible`** como respuesta
 
 Las causas más comunes son que el servidor esté apagado por mantenimiento o esté sobrecargado. Esta respuesta debería usarse para condiciones temporales y la cabecera HTTP {{HTTPHeader("Retry-After")}} debería, si es posible, contener el tiempo estimado para la recuperación del servicio.
 
-> **Nota:** debería enviarse con esta respuesta una página informativa explicando el problema.
+> [!NOTE]
+> Debería enviarse con esta respuesta una página informativa explicando el problema.
 
 Debe tenerse cuidado con las cabeceras relacionadas con la caché, ya que un estado 503 suele ser algo temporal, y, por lo tanto, no se deberían almacenar las respuestas en caché.
 
diff --git a/files/es/web/http/status/504/index.md b/files/es/web/http/status/504/index.md
index 4135b38cfa9ba9..1a62ab2ddaf8e9 100644
--- a/files/es/web/http/status/504/index.md
+++ b/files/es/web/http/status/504/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/504
 
 El código de respuesta de error del servidor de HTTP **`504 Gateway Timeout`** indica que el servidor, mientras actuaba como una puerta de enlace o proxy, no pudo obtener una respuesta a tiempo.
 
-> **Nota:** Una [puerta de enlace](https://es.wikipedia.org/wiki/Puerta_de_enlace) puede referirse a cosas distintas en redes y un error 502 no es algo que normalmente puedas arreglar, ya que requiere correcciones por parte del servidor o los proxies a través de los que intentas acceder.
+> [!NOTE]
+> Una [puerta de enlace](https://es.wikipedia.org/wiki/Puerta_de_enlace) puede referirse a cosas distintas en redes y un error 502 no es algo que normalmente puedas arreglar, ya que requiere correcciones por parte del servidor o los proxies a través de los que intentas acceder.
 
 ## Estado
 
diff --git a/files/es/web/javascript/closures/index.md b/files/es/web/javascript/closures/index.md
index 0d25fa97b38629..54cae3c97f2ddb 100644
--- a/files/es/web/javascript/closures/index.md
+++ b/files/es/web/javascript/closures/index.md
@@ -244,7 +244,8 @@ console.log(counter2.value()); // 0.
 
 Observa cómo los dos contadores mantienen su independencia el uno del otro. Cada _closure_ hace referencia a una versión diferente de la variable `privateCounter` a través de su propio _closure_. Cada vez que se llama a uno de los contadores, su entorno léxico cambia cambiando el valor de esta variable. Los cambios en el valor de la variable en un _closure_ no afectan el valor en el otro _closure_.
 
-> **Nota:** El uso de _closures_ de esta manera proporciona beneficios que normalmente se asocian con la programación orientada a objetos. En particular, _ocultación de datos_ y _encapsulación_.
+> [!NOTE]
+> El uso de _closures_ de esta manera proporciona beneficios que normalmente se asocian con la programación orientada a objetos. En particular, _ocultación de datos_ y _encapsulación_.
 
 ## Cadena de alcance de closure
 
diff --git a/files/es/web/javascript/data_structures/index.md b/files/es/web/javascript/data_structures/index.md
index b49722f1874e93..0c32bb5e6e7eff 100644
--- a/files/es/web/javascript/data_structures/index.md
+++ b/files/es/web/javascript/data_structures/index.md
@@ -75,7 +75,8 @@ Infinity
 
 Aunque un `number` a menudo representa solo su valor, JavaScript proporciona {{jsxref("Operators/Bitwise_Operators", "operadores binarios (bitwise)")}}.
 
-> **Nota:** Aunque los operadores bit a bit se _pueden_ usar para representar múltiples valores Booleanos dentro de un solo número usando el [enmascaramiento de bits](<https://es.wikipedia.org/wiki/Máscara_(informática)>), esto generalmente se considera una mala práctica. JavaScript ofrece otros medios para representar un conjunto de valores booleanos (como un arreglo de valores booleanos o un objeto con valores booleanos asignados a propiedades con nombre). El enmascaramiento de bits también tiende a hacer que el código sea más difícil de leer, comprender y mantener.
+> [!NOTE]
+> Aunque los operadores bit a bit se _pueden_ usar para representar múltiples valores Booleanos dentro de un solo número usando el [enmascaramiento de bits](<https://es.wikipedia.org/wiki/Máscara_(informática)>), esto generalmente se considera una mala práctica. JavaScript ofrece otros medios para representar un conjunto de valores booleanos (como un arreglo de valores booleanos o un objeto con valores booleanos asignados a propiedades con nombre). El enmascaramiento de bits también tiende a hacer que el código sea más difícil de leer, comprender y mantener.
 
 Posiblemente sea necesario utilizar estas técnicas en entornos muy restringidos, como cuando se intenta hacer frente a las limitaciones del almacenamiento local, o en casos extremos (como cuando cada bit de la red cuenta). Esta técnica solo se debe considerar cuando sea la última medida que se pueda tomar para optimizar el tamaño.
 
@@ -141,7 +142,8 @@ En JavaScript, los objetos se pueden ver como una colección de propiedades. Con
 
 Hay dos tipos de propiedades de objeto que tienen ciertos atributos: la propiedad _data_ y la propiedad _accessor_.
 
-> **Nota:** Cada propiedad tiene _atributos correspondientes_. Los atributos, internamente los utiliza el motor JavaScript, por lo que no puedes acceder a ellos directamente. Es por eso que los atributos se enumeran entre corchetes dobles, en lugar de simples.Consulta {{jsxref("Object.defineProperty()")}} para obtener más información.
+> [!NOTE]
+> Cada propiedad tiene _atributos correspondientes_. Los atributos, internamente los utiliza el motor JavaScript, por lo que no puedes acceder a ellos directamente. Es por eso que los atributos se enumeran entre corchetes dobles, en lugar de simples.Consulta {{jsxref("Object.defineProperty()")}} para obtener más información.
 
 #### Propiedad `Data`
 
diff --git a/files/es/web/javascript/guide/control_flow_and_error_handling/index.md b/files/es/web/javascript/guide/control_flow_and_error_handling/index.md
index 05cfec04648d2a..4271f7ef6219b1 100644
--- a/files/es/web/javascript/guide/control_flow_and_error_handling/index.md
+++ b/files/es/web/javascript/guide/control_flow_and_error_handling/index.md
@@ -36,7 +36,8 @@ while (x < 10) {
 
 Aquí, `{ x++; }` es la declaración de bloque.
 
-> **Nota:** JavaScript anterior a ECMAScript2015 (6a edición) **no** tiene ámbito de bloque. En JavaScript más antiguo, las variables introducidas dentro de un bloque tienen como ámbito la función o script que las contiene, y los efectos de establecerlas persisten más allá del bloque en sí mismo. En otras palabras, las _declaraciones de bloque no definen un ámbito_.
+> [!NOTE]
+> JavaScript anterior a ECMAScript2015 (6a edición) **no** tiene ámbito de bloque. En JavaScript más antiguo, las variables introducidas dentro de un bloque tienen como ámbito la función o script que las contiene, y los efectos de establecerlas persisten más allá del bloque en sí mismo. En otras palabras, las _declaraciones de bloque no definen un ámbito_.
 >
 > Los bloques "independientes" en JavaScript pueden producir resultados completamente diferentes de los que producirían en C o Java. Por ejemplo:
 >
@@ -135,7 +136,8 @@ Los siguientes valores se evalúan como `false` (también conocidos como valores
 
 Todos los demás valores, incluidos todos los objetos, se evalúan como `true` cuando se pasan a una declaración condicional.
 
-> **Nota:** ¡No confundas los valores booleanos primitivos `true` y `false` con los valores `true` y `false` del objeto {{JSxRef("Boolean")}}!.Por ejemplo:```js
+> [!NOTE]
+> ¡No confundas los valores booleanos primitivos `true` y `false` con los valores `true` y `false` del objeto {{JSxRef("Boolean")}}!.Por ejemplo:```js
 > var b = new Boolean(false);
 > if (b) // esta condición se evalúa como verdadera
 > if (b == true) // esta condición se evalúa como false
@@ -261,7 +263,8 @@ throw {
 };
 ```
 
-> **Nota:** Puedes especificar un objeto cuando lanzas una excepción. A continuación, puedes hacer referencia a las propiedades del objeto en el bloque `catch`.
+> [!NOTE]
+> Puedes especificar un objeto cuando lanzas una excepción. A continuación, puedes hacer referencia a las propiedades del objeto en el bloque `catch`.
 
 ```js
 // Crea un objeto tipo de UserException
@@ -348,7 +351,8 @@ try {
 }
 ```
 
-> **Nota:** Cuando se registran errores en la consola dentro de un bloque `catch`, se usa `console.error()` en lugar de `console.log()` aconsejado para la depuración. Formatea el mensaje como un error y lo agrega a la lista de mensajes de error generados por la página.
+> [!NOTE]
+> Cuando se registran errores en la consola dentro de un bloque `catch`, se usa `console.error()` en lugar de `console.log()` aconsejado para la depuración. Formatea el mensaje como un error y lo agrega a la lista de mensajes de error generados por la página.
 
 #### El bloque `finally`
 
diff --git a/files/es/web/javascript/guide/expressions_and_operators/index.md b/files/es/web/javascript/guide/expressions_and_operators/index.md
index ef3b0c4f01cf17..74f20d2570aff6 100644
--- a/files/es/web/javascript/guide/expressions_and_operators/index.md
+++ b/files/es/web/javascript/guide/expressions_and_operators/index.md
@@ -129,7 +129,8 @@ var var2 = 4;
 | {{JSxRef("Operadores/Comparison_Operators", "Menor que", "#Operador_menor_que")}} (`<`)                  | Devuelve `true` si el operando izquierdo es menor que el operando derecho.                                                                                                    | `var1 < var2`<br>`"2" < 12`                |
 | {{JSxRef("Operadores/Comparison_Operators", "Menor o igual", "#Operador_menor_que_o_igual")}} (`<=`)     | Devuelve `true` si el operando izquierdo es menor o igual que el operando derecho.                                                                                            | `var1 <= var2 var2 <= 5`                   |
 
-> **Nota:** (**=>**) no es un operador, sino la notación para {{JSxRef("Funciones/Arrow_functions", "Funciones flecha")}}.
+> [!NOTE]
+> (**=>**) no es un operador, sino la notación para {{JSxRef("Funciones/Arrow_functions", "Funciones flecha")}}.
 
 ### Operadores aritméticos
 
diff --git a/files/es/web/javascript/guide/functions/index.md b/files/es/web/javascript/guide/functions/index.md
index bcea5f09d5cb66..d2e2cc7c232a57 100644
--- a/files/es/web/javascript/guide/functions/index.md
+++ b/files/es/web/javascript/guide/functions/index.md
@@ -144,7 +144,8 @@ function square(n) {
 
 El ámbito de una función es la función en la que se declara (o el programa completo, si se declara en el nivel superior).
 
-> **Nota:** Esto solo trabaja cuando se define la función usando la sintaxis anterior (es decir, `function funcName() {}`). El siguiente código no trabajará.Esto significa que la elevación de función solo trabaja con _declaraciones_ de función, no con _expresiones_ de función.
+> [!NOTE]
+> Esto solo trabaja cuando se define la función usando la sintaxis anterior (es decir, `function funcName() {}`). El siguiente código no trabajará.Esto significa que la elevación de función solo trabaja con _declaraciones_ de función, no con _expresiones_ de función.
 >
 > ```js example-bad
 > console.log(square) // square se eleva con un valor inicial undefined.
@@ -483,7 +484,8 @@ var getCode = (function () {
 getCode(); // Devuelve el apiCode
 ```
 
-> **Nota:** ¡Hay una serie de trampas a tener en cuenta al usar cierres!
+> [!NOTE]
+> ¡Hay una serie de trampas a tener en cuenta al usar cierres!
 >
 > Si una función encerrada define una variable con el mismo nombre que una variable en el ámbito externo, entonces no hay forma de hacer referencia a la variable en el ámbito externo nuevamente. (La variable de ámbito interno "anula" la externa, hasta que el programa sale de el ámbito interno).
 >
@@ -538,7 +540,8 @@ myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
 myConcat(". ", "salvia", "albahaca", "orégano", "pimienta", "perejil");
 ```
 
-> **Nota:** La variable `arguments` es "similar a un arreglo", pero no es un arreglo. Es similar a un arreglo en el sentido de que tiene un índice numerado y una propiedad `length`. Sin embargo, _no_ posee todos los métodos de manipulación de arreglos.
+> [!NOTE]
+> La variable `arguments` es "similar a un arreglo", pero no es un arreglo. Es similar a un arreglo en el sentido de que tiene un índice numerado y una propiedad `length`. Sin embargo, _no_ posee todos los métodos de manipulación de arreglos.
 
 Consulta el objeto {{JSxRef("Function")}} en la referencia de JavaScript para obtener más información.
 
diff --git a/files/es/web/javascript/guide/grammar_and_types/index.md b/files/es/web/javascript/guide/grammar_and_types/index.md
index c9936b650ce5ac..a2a575955e448a 100644
--- a/files/es/web/javascript/guide/grammar_and_types/index.md
+++ b/files/es/web/javascript/guide/grammar_and_types/index.md
@@ -23,7 +23,8 @@ En JavaScript, las instrucciones se denominan {{Glossary("Statement", "declaraci
 
 No es necesario un punto y coma después de una declaración si está escrita en su propia línea. Pero si se deseas más de una declaración en una línea, entonces _debes_ separarlas con punto y coma.
 
-> **Nota:** ECMAScript también tiene reglas para la inserción automática del punto y coma —{{JSxRef("Gramatica_lexica", "IAPC", "#Insercion_automatica_de_punto_y_coma")}}— (_ASI_ en inglés, por sus siglas «_Automatic Semicolon Insertion_») al final de las declaraciones. (Para obtener más información, consulta la referencia detallada sobre la {{JSxRef("Gramatica_lexica", "gramática léxica")}} de JavaScript).
+> [!NOTE]
+> ECMAScript también tiene reglas para la inserción automática del punto y coma —{{JSxRef("Gramatica_lexica", "IAPC", "#Insercion_automatica_de_punto_y_coma")}}— (_ASI_ en inglés, por sus siglas «_Automatic Semicolon Insertion_») al final de las declaraciones. (Para obtener más información, consulta la referencia detallada sobre la {{JSxRef("Gramatica_lexica", "gramática léxica")}} de JavaScript).
 
 Sin embargo, se considera una buena práctica escribir siempre un punto y coma después de una declaración, incluso cuando no sea estrictamente necesario. Esta práctica reduce las posibilidades de que se introduzcan errores en el código.
 
@@ -45,7 +46,8 @@ La sintaxis de los **comentarios** es la misma que en C++ y en muchos otros leng
 
 Los comentarios se comportan como espacios en blanco y se descartan durante la ejecución del script.
 
-> **Nota:** También puedes ver un tercer tipo de sintaxis de comentario al comienzo de algunos archivos JavaScript, que se parece a esto: `#!/usr/bin/env node`.Esto se denomina sintaxis de **comentario hashbang** y es un comentario especial que se utiliza para especificar la ruta a un motor JavaScript en particular que debe ejecutar el script. Consulta {{JSxRef("Gramatica_lexica", "Comentarios Hashbang", "#Comentarios_hashbang")}} para obtener más detalles.
+> [!NOTE]
+> También puedes ver un tercer tipo de sintaxis de comentario al comienzo de algunos archivos JavaScript, que se parece a esto: `#!/usr/bin/env node`.Esto se denomina sintaxis de **comentario hashbang** y es un comentario especial que se utiliza para especificar la ruta a un motor JavaScript en particular que debe ejecutar el script. Consulta {{JSxRef("Gramatica_lexica", "Comentarios Hashbang", "#Comentarios_hashbang")}} para obtener más detalles.
 
 ## Declaraciones
 
@@ -352,7 +354,8 @@ En el caso que un valor representando un número está en memoria como texto, ha
 
 `parseInt` solo devuelve números enteros, por lo que su uso se reduce para decimales.
 
-> **Nota:** Además, una práctica recomendada para `parseInt` es incluir siempre el parámetro _radix_. El parámetro `radix` se utiliza para especificar qué sistema numérico se utilizará.
+> [!NOTE]
+> Además, una práctica recomendada para `parseInt` es incluir siempre el parámetro _radix_. El parámetro `radix` se utiliza para especificar qué sistema numérico se utilizará.
 
 ```js
 parseInt("101", 2); // 5
@@ -388,11 +391,13 @@ El siguiente ejemplo crea el arreglo `coffees` con tres elementos y `length` de
 let coffees = ["French Roast", "Colombian", "Kona"];
 ```
 
-> **Nota:** Un arreglo literal es un tipo de _iniciador de objeto_. Consulta {{JSxRef("Guide/Trabajando_con_objectos", "Uso de iniciadores de objetos", "#Uso_de_iniciadores_de_objeto")}}.
+> [!NOTE]
+> Un arreglo literal es un tipo de _iniciador de objeto_. Consulta {{JSxRef("Guide/Trabajando_con_objectos", "Uso de iniciadores de objetos", "#Uso_de_iniciadores_de_objeto")}}.
 
 Si creas un arreglo utilizando un literal en un script de nivel superior, JavaScript interpreta el arreglo cada vez que evalúa la expresión que contiene el arreglo literal. Además, cada vez que llamas a una función se crea un literal usado en ella.
 
-> **Nota:** Los arreglos literales también son objetos `Array`. Consulta {{JSxRef("Array")}} y {{JSxRef("Guide/colecciones_indexadas", "Colecciones indexadas")}} para obtener detalles sobre los objetos `Array`.
+> [!NOTE]
+> Los arreglos literales también son objetos `Array`. Consulta {{JSxRef("Array")}} y {{JSxRef("Guide/colecciones_indexadas", "Colecciones indexadas")}} para obtener detalles sobre los objetos `Array`.
 
 #### Comas adicionales en arreglos literales
 
@@ -412,7 +417,8 @@ Si incluyes una coma al final de la lista de los elementos, la coma es ignorada.
 
 En el siguiente ejemplo, el `length` del arreglo es tres. No hay `myList[3]`. Todas las demás comas de la lista indican un nuevo elemento.
 
-> **Nota:** Las comas finales pueden crear errores en versiones anteriores del navegador y se recomienda eliminarlas.
+> [!NOTE]
+> Las comas finales pueden crear errores en versiones anteriores del navegador y se recomienda eliminarlas.
 
 ```js-nolint
 let myList = ["home", , "school", ];
@@ -438,7 +444,8 @@ Sin embargo, al escribir tu propio código, debes declarar explícitamente los e
 
 El tipo booleano tiene dos valores literales: `true` y `false`.
 
-> **Nota:** No confundas los valores booleanos primitivos `true` y `false` con los valores `true` y `false` del objeto {{JSxRef("Boolean")}}.El objeto `Boolean` es un contenedor alrededor del tipo de dato primitivo `Boolean`. Consulta {{JSxRef("Boolean")}} para obtener más información.
+> [!NOTE]
+> No confundas los valores booleanos primitivos `true` y `false` con los valores `true` y `false` del objeto {{JSxRef("Boolean")}}.El objeto `Boolean` es un contenedor alrededor del tipo de dato primitivo `Boolean`. Consulta {{JSxRef("Boolean")}} para obtener más información.
 
 ### Literales numéricos
 
diff --git a/files/es/web/javascript/guide/indexed_collections/index.md b/files/es/web/javascript/guide/indexed_collections/index.md
index 792d60554a4d5b..412730b5db929e 100644
--- a/files/es/web/javascript/guide/indexed_collections/index.md
+++ b/files/es/web/javascript/guide/indexed_collections/index.md
@@ -43,7 +43,8 @@ let arr = [];
 arr.length = arrayLength;
 ```
 
-> **Nota:** En el código anterior, `arrayLength` debe ser un `Número`. De lo contrario, se creará un arreglo con un solo elemento (el valor proporcionado). Llamar a `arr.length` devolverá `arrayLength`, pero el arreglo no contiene ningún elemento. Un bucle {{jsxref("Statements/for...in", "for...in")}} no encontrarás ninguna propiedad en el arreglo.
+> [!NOTE]
+> En el código anterior, `arrayLength` debe ser un `Número`. De lo contrario, se creará un arreglo con un solo elemento (el valor proporcionado). Llamar a `arr.length` devolverá `arrayLength`, pero el arreglo no contiene ningún elemento. Un bucle {{jsxref("Statements/for...in", "for...in")}} no encontrarás ninguna propiedad en el arreglo.
 
 Además de una variable recién definida como se muestra arriba, los arreglos también se pueden asignar como una propiedad a un objeto nuevo o existente:
 
@@ -94,7 +95,8 @@ let myArray = ["Wind", "Rain", "Fire"];
 
 Puedes referirte al primer elemento del arreglo como `myArray[0]`, al segundo elemento del arreglo como `myArray[1]`, etc… El índice de los elementos comienza en cero.
 
-> **Nota:** También puedes utilizar la [propiedad `accessors`](/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors) para acceder a otras propiedades del arreglo, como con un objeto.
+> [!NOTE]
+> También puedes utilizar la [propiedad `accessors`](/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors) para acceder a otras propiedades del arreglo, como con un objeto.
 >
 > ```js
 > let arr = ["one", "two", "three"];
@@ -113,7 +115,8 @@ emp[1] = "Phil Lesh";
 emp[2] = "August West";
 ```
 
-> **Nota:** Si proporcionas un valor no entero al operador `array` en el código anterior, se creará una propiedad en el objeto que representa al arreglo, en lugar de un elemento del arreglo.
+> [!NOTE]
+> Si proporcionas un valor no entero al operador `array` en el código anterior, se creará una propiedad en el objeto que representa al arreglo, en lugar de un elemento del arreglo.
 >
 > ```js
 > let arr = [];
diff --git a/files/es/web/javascript/guide/keyed_collections/index.md b/files/es/web/javascript/guide/keyed_collections/index.md
index 0258ac4d440bad..892922f58e5062 100644
--- a/files/es/web/javascript/guide/keyed_collections/index.md
+++ b/files/es/web/javascript/guide/keyed_collections/index.md
@@ -107,7 +107,8 @@ for (let item of mySet) console.log(item);
 
 Puedes crear un {{JSxRef("Array")}} a partir de un `Set` usando {{JSxRef("Array.from")}} o el {{JSxRef("Operators/Spread_operator", "operador de propagación")}}. Además, el constructor `Set` acepta un `Array` para convertirlo en la otra dirección.
 
-> **Nota:** Recuerda que los objetos `Set` almacenan _valores únicos_, por lo que cualquier elemento duplicado de un arreglo se elimina al realizar la conversión.
+> [!NOTE]
+> Recuerda que los objetos `Set` almacenan _valores únicos_, por lo que cualquier elemento duplicado de un arreglo se elimina al realizar la conversión.
 
 ```js
 Array.from(mySet);
diff --git a/files/es/web/javascript/guide/modules/index.md b/files/es/web/javascript/guide/modules/index.md
index 09d12ae8609e91..8f41d075c4d1d5 100644
--- a/files/es/web/javascript/guide/modules/index.md
+++ b/files/es/web/javascript/guide/modules/index.md
@@ -25,7 +25,8 @@ Para demostrar el uso de módulos, hemos creado un [sencillo conjunto de ejemplo
 
 Estos son bastante triviales, pero se han mantenido deliberadamente simples para demostrar los módulos con claridad.
 
-> **Nota:** Si deseas descargar los ejemplos y ejecutarlos localmente, deberás ejecutarlos a través de un servidor web local.
+> [!NOTE]
+> Si deseas descargar los ejemplos y ejecutarlos localmente, deberás ejecutarlos a través de un servidor web local.
 
 ## Estructura básica de los ejemplos
 
@@ -39,7 +40,8 @@ modules/
     square.js
 ```
 
-> **Nota:** Todos los ejemplos de esta guía básicamente tienen la misma estructura; lo anterior debería empezar a resultarte bastante familiar.
+> [!NOTE]
+> Todos los ejemplos de esta guía básicamente tienen la misma estructura; lo anterior debería empezar a resultarte bastante familiar.
 
 Los dos módulos del directorio `modules` se describen a continuación:
 
@@ -131,7 +133,8 @@ se convierte en
 
 Puedes ver estas líneas en acción en [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/basic-modules/main.js).
 
-> **Nota:** En algunos sistemas de módulos, puedes omitir la extensión del archivo y el punto (por ejemplo, `'/modules/square'`). Esto no funciona en módulos de JavaScript nativos.
+> [!NOTE]
+> En algunos sistemas de módulos, puedes omitir la extensión del archivo y el punto (por ejemplo, `'/modules/square'`). Esto no funciona en módulos de JavaScript nativos.
 
 Una vez que hayas importado las funciones a tu script, las puedes usar tal como se definieron dentro del mismo archivo. Lo siguiente se encuentra en `main.js`, debajo de las líneas `import`:
 
@@ -144,7 +147,8 @@ reportArea(square1.length, reportList);
 reportPerimeter(square1.length, reportList);
 ```
 
-> **Nota:** Aunque las funciones importadas están disponibles en el archivo, son vistas de solo lectura de la función que se exportó. No puedes cambiar la variable que se importó, pero aún puedes modificar propiedades similares a `const`. Además, estas características se importan como enlaces activos, lo cual significa que pueden cambiar de valor incluso si no puedes modificar el enlace a diferencia de `const`.
+> [!NOTE]
+> Aunque las funciones importadas están disponibles en el archivo, son vistas de solo lectura de la función que se exportó. No puedes cambiar la variable que se importó, pero aún puedes modificar propiedades similares a `const`. Además, estas características se importan como enlaces activos, lo cual significa que pueden cambiar de valor incluso si no puedes modificar el enlace a diferencia de `const`.
 
 ## Aplicar el módulo a tu HTML
 
@@ -208,7 +212,8 @@ Una vez más, ten en cuenta la falta de llaves. Esto se debe a que solo se permi
 import { default as randomSquare } from "./modules/square.js";
 ```
 
-> **Nota:** La sintaxis as para cambiar el nombre de los elementos exportados se explica a continuación en la sección [Renombrar importaciones y exportaciones](#Renombrar_impotaciones_y_exportaciones).
+> [!NOTE]
+> La sintaxis as para cambiar el nombre de los elementos exportados se explica a continuación en la sección [Renombrar importaciones y exportaciones](#Renombrar_impotaciones_y_exportaciones).
 
 ## Evitar conflictos de nombres
 
@@ -428,7 +433,8 @@ export { Circle } from "./shapes/circle.js";
 
 Estas toman las exportaciones de los submódulos individuales y las ponen a disposición de manera efectiva desde el módulo `shapes.js`.
 
-> **Nota:** Las exportaciones a las que se hace referencia en `shapes.js` básicamente se redirigen a través del archivo y realmente no existen allí, por lo que no podrás escribir ningún código relacionado útil dentro del mismo archivo.
+> [!NOTE]
+> Las exportaciones a las que se hace referencia en `shapes.js` básicamente se redirigen a través del archivo y realmente no existen allí, por lo que no podrás escribir ningún código relacionado útil dentro del mismo archivo.
 
 Entonces, ahora en el archivo `main.js`, podemos obtener acceso a las tres clases de módulos reemplazando
 
diff --git a/files/es/web/javascript/guide/regular_expressions/assertions/index.md b/files/es/web/javascript/guide/regular_expressions/assertions/index.md
index af17a169eecb3f..2a288891aff2e2 100644
--- a/files/es/web/javascript/guide/regular_expressions/assertions/index.md
+++ b/files/es/web/javascript/guide/regular_expressions/assertions/index.md
@@ -63,7 +63,8 @@ La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Exp
 
 ### Otras aserciones
 
-> **Nota:** El caracter `?` también se puede utilizar como cuantificador.
+> [!NOTE]
+> El caracter `?` también se puede utilizar como cuantificador.
 
 | Caracteres | Significado                                                                                                                                                                                                                                                                                                                                |
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
diff --git a/files/es/web/javascript/guide/regular_expressions/cheatsheet/index.md b/files/es/web/javascript/guide/regular_expressions/cheatsheet/index.md
index 4ae1c83dc61964..27938e75f4fb8c 100644
--- a/files/es/web/javascript/guide/regular_expressions/cheatsheet/index.md
+++ b/files/es/web/javascript/guide/regular_expressions/cheatsheet/index.md
@@ -186,7 +186,8 @@ Si deseas contribuir a este documento, edita también [el artículo original](/e
 
 ### Otras aserciones
 
-> **Nota:** El caracter `?` también se puede utilizar como cuantificador.
+> [!NOTE]
+> El caracter `?` también se puede utilizar como cuantificador.
 
    <table class="standard-table">
     <thead>
@@ -243,7 +244,8 @@ Si deseas contribuir a este documento, edita también [el artículo original](/e
 
 Si deseas contribuir a este documento, edita también [el artículo original](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers)
 
-> **Nota:** A continuación, _elemento_ se refiere no solo a caracteres singulares, sino que también incluye [clases de caracteres](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes), [escapes de propiedad Unicode](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes), [grupos y rangos](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges).
+> [!NOTE]
+> A continuación, _elemento_ se refiere no solo a caracteres singulares, sino que también incluye [clases de caracteres](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes), [escapes de propiedad Unicode](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes), [grupos y rangos](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges).
 
    <table class="standard-table">
     <thead>
@@ -342,4 +344,5 @@ Consulta también [PropertyValueAliases.txt](https://www.unicode.org/Public/UCD/
 - UnicodePropertyValue
   - : Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor `Decimal_Number` para la propiedad `General_Category` se puede escribir cómo `Nd`, `digit`, o `Decimal_number`). Para la mayoría de los valores, la parte `UnicodePropertyName` y el signo igual se pueden omitir. Si se especifica un `UnicodePropertyName`, el valor debe corresponder al tipo de propiedad proporcionado.
 
-> **Nota:** Puesto que hay muchas propiedades y valores disponibles, no las describiremos exhaustivamente aquí, sino que proporcionaremos varios ejemplos.
+> [!NOTE]
+> Puesto que hay muchas propiedades y valores disponibles, no las describiremos exhaustivamente aquí, sino que proporcionaremos varios ejemplos.
diff --git a/files/es/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md b/files/es/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
index bf0894f0e12b5b..9653b7a89f7ae3 100644
--- a/files/es/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
+++ b/files/es/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
@@ -67,7 +67,8 @@ do {
 } while ((match = regexpNames.exec(personList)) !== null);
 ```
 
-> **Nota:** No todos los navegadores admiten esta función; consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla de compatibilidad", "#Compatibilidad_del_navegador")}}.
+> [!NOTE]
+> No todos los navegadores admiten esta función; consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla de compatibilidad", "#Compatibilidad_del_navegador")}}.
 
 ## Especificaciones
 
diff --git a/files/es/web/javascript/guide/regular_expressions/index.md b/files/es/web/javascript/guide/regular_expressions/index.md
index b974d5ce59cea5..27cadb0d0acc2b 100644
--- a/files/es/web/javascript/guide/regular_expressions/index.md
+++ b/files/es/web/javascript/guide/regular_expressions/index.md
@@ -31,7 +31,8 @@ Construyes una expresión regular en una de estas dos formas:
 
 Un patrón de expresión regular se compone de caracteres simples, como `/abc/`, o una combinación de caracteres simples y especiales, como `/ab*c/` o `/Capítulo (\d)\.\d*/`. El último ejemplo incluye paréntesis, que se utilizan como dispositivos de memoria. La coincidencia realizada con esta parte del patrón se recuerda para su uso posterior, como se describe en [Uso de grupos](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#Using_groups).
 
-> **Nota:** Si ya estás familiarizado con las formas de una expresión regular, también puedes leer [la hoja de referencia](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet) para una búsqueda rápida de un patrón/construcción específica.
+> [!NOTE]
+> Si ya estás familiarizado con las formas de una expresión regular, también puedes leer [la hoja de referencia](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet) para una búsqueda rápida de un patrón/construcción específica.
 
 ### Usar patrones simples
 
@@ -284,7 +285,8 @@ La bandera `m` se utiliza para especificar que una cadena de entrada de varias l
 
 ## Ejemplos
 
-> **Nota:** También hay varios ejemplos disponibles en:
+> [!NOTE]
+> También hay varios ejemplos disponibles en:
 >
 > - Las páginas de referencia para {{jsxref("RegExp.exec", "exec()")}}, {{jsxref("RegExp.test", "test()")}}, {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.search", "search()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.split", "split()")}}
 > - Artículos de esta guía: [clases de caracteres](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes), [aserciones](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions), [grupos y rangos](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges), [cuantificadores](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers), [escapes de propiedades Unicode](/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes)
diff --git a/files/es/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/es/web/javascript/guide/regular_expressions/quantifiers/index.md
index e59e3a2e39272b..059edf792c1105 100644
--- a/files/es/web/javascript/guide/regular_expressions/quantifiers/index.md
+++ b/files/es/web/javascript/guide/regular_expressions/quantifiers/index.md
@@ -13,7 +13,8 @@ Los cuantificadores indican el número de caracteres o expresiones que deben coi
 
 La siguiente tabla también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Cheatsheet", "esta hoja de referencia")}}. No olvides editarla también, ¡gracias!
 
-> **Nota:** A continuación, _elemento_ se refiere no solo a caracteres individuales, sino que también incluye {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}}, {{JSxRef("../Guide/Regular_Expressions/Unicode_Property_Escapes", "escapes de propiedades Unicode")}}, {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos y rangos")}}.
+> [!NOTE]
+> A continuación, _elemento_ se refiere no solo a caracteres individuales, sino que también incluye {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}}, {{JSxRef("../Guide/Regular_Expressions/Unicode_Property_Escapes", "escapes de propiedades Unicode")}}, {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos y rangos")}}.
 
 <table class="standard-table">
     <thead>
diff --git a/files/es/web/javascript/guide/typed_arrays/index.md b/files/es/web/javascript/guide/typed_arrays/index.md
index 1374defd2b16e3..8b3ae65f8bedbe 100644
--- a/files/es/web/javascript/guide/typed_arrays/index.md
+++ b/files/es/web/javascript/guide/typed_arrays/index.md
@@ -143,7 +143,8 @@ let amountDueView = new Float32Array(buffer, 20, 1);
 
 Luego puedes acceder, por ejemplo, al monto adeudado con `amountDueView[0]`.
 
-> **Nota:** La [Data_structure_alignment](https://es.wikipedia.org/wiki/Data_structure_alignment) en una estructura C depende de la plataforma. Toma precauciones y consideraciones para estas diferencias de relleno.
+> [!NOTE]
+> La [Data_structure_alignment](https://es.wikipedia.org/wiki/Data_structure_alignment) en una estructura C depende de la plataforma. Toma precauciones y consideraciones para estas diferencias de relleno.
 
 ### Conversión a arreglos normales
 
diff --git a/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md
index 5f45a3ad37f96d..5ea1bcb2363dbe 100644
--- a/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -19,7 +19,8 @@ Aunque las clases ahora se adoptan ampliamente y se han convertido en un nuevo p
 
 Los objetos en JavaScript son "contenedores" dinámicos de propiedades (referidas como sus **propiedades particulares**). Los objetos en JavaScript poseen un enlace a un objeto prototipo. Al intentar acceder a una propiedad de un objeto, la propiedad no sólo se buscará en el objeto sino en el prototipo del objeto, el prototipo del prototipo, y así sucesivamente hasta que se encuentre una propiedad con un nombre coincidente o el final de la cadena prototipo.
 
-> **Nota:** Siguiendo el estándar ECMAScript, la notación `algunObjeto.[[Prototype]]` se utiliza para designar el prototipo de `algunObjeto.` Se puede acceder y modificar la ranura interna `[[Prototype]]` con las funciones {{jsxref("Object.getPrototypeOf()")}} y {{jsxref("Object.setPrototypeOf()")}} respectivamente. Esto es equivalente al descriptor de acceso de JavaScript [`__proto__`](/es/docs/Web/JavaScript/Reference/Global_Objects/Object/proto), que no es estándar pero está implementado de facto por muchos motores de JavaScript. Para evitar confusiones y al mismo tiempo ser conciso, en nuestra notación evitaremos usar `obj.__proto__` y usaremos `obj.[[Prototype]]` en su lugar. Esto corresponde a `Object.getPrototypeOf(obj)`.
+> [!NOTE]
+> Siguiendo el estándar ECMAScript, la notación `algunObjeto.[[Prototype]]` se utiliza para designar el prototipo de `algunObjeto.` Se puede acceder y modificar la ranura interna `[[Prototype]]` con las funciones {{jsxref("Object.getPrototypeOf()")}} y {{jsxref("Object.setPrototypeOf()")}} respectivamente. Esto es equivalente al descriptor de acceso de JavaScript [`__proto__`](/es/docs/Web/JavaScript/Reference/Global_Objects/Object/proto), que no es estándar pero está implementado de facto por muchos motores de JavaScript. Para evitar confusiones y al mismo tiempo ser conciso, en nuestra notación evitaremos usar `obj.__proto__` y usaremos `obj.[[Prototype]]` en su lugar. Esto corresponde a `Object.getPrototypeOf(obj)`.
 >
 > No debe confundirse con la propiedad de funciones `func.prototype`, que en cambio especifican el `[[Prototype]]` que se asigna a todas las _instancias_ de los objetos creados por la función dada cuando se usa como constructor. Discutiremos la propiedad `prototype` de las funciones constructoras en [una sección posterior](#constructores).
 
@@ -179,7 +180,8 @@ const boxes = [new Box(1), new Box(2), new Box(3)];
 
 Decimos que `new Box(1)` es una _instancia_ creada a partir de la función constructora `Box`. `Box.prototype` no es muy diferente del objeto `boxPrototype` que creamos anteriormente; es simplemente un objeto simple. Cada instancia creada a partir de una función constructora tendrá automáticamente la propiedad [`prototype`](/es/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) del constructor como su `[[Prototype]]` es decir, `Object.getPrototypeOf(new Box()) === Box.prototype`. `Constructor.prototype` por defecto tiene una propiedad: [`constructor`](/es/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor), que hace referencia a la misma función constructora, es decir,, `Box.prototype.constructor === Box`. Esto permite acceder al constructor original desde cualquier instancia.
 
-> **Nota:** Si la función constructora devuelve un valor no primitivo, ese valor se convertirá en el resultado de la expresión `new`. En este caso, es posible que el `[[Prototype]]` no esté correctamente vinculado, pero esto no debería suceder mucho en la práctica.
+> [!NOTE]
+> Si la función constructora devuelve un valor no primitivo, ese valor se convertirá en el resultado de la expresión `new`. En este caso, es posible que el `[[Prototype]]` no esté correctamente vinculado, pero esto no debería suceder mucho en la práctica.
 
 La función constructora anterior se puede reescribir en [clases](/es/docs/Web/JavaScript/Reference/Classes) de la siguiente manera:
 
@@ -247,7 +249,8 @@ const regexp = new RegExp("abc");
 
 Por ejemplo, los "métodos de array" como [`map()`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) son simplemente métodos definidos en `Array.prototype`, por lo que están disponibles automáticamente en todas las instancias de la matriz.
 
-> **Advertencia:** Hay un error que solía ser frecuente: extender `Object.prototype` o uno de los otros prototipos integrados. Un ejemplo de esta característica errónea es definir `Array.prototype.myMethod = function () {...}` y luego usar `myMethod` en todas las instancias de matriz.
+> [!WARNING]
+> Hay un error que solía ser frecuente: extender `Object.prototype` o uno de los otros prototipos integrados. Un ejemplo de esta característica errónea es definir `Array.prototype.myMethod = function () {...}` y luego usar `myMethod` en todas las instancias de matriz.
 >
 > Esta característica errónea se llama _parche de mono_/_monkey patching_. Hacer parche de mono/monkey patching arriesga la compatibilidad futura, porque si el lenguaje agrega este método en el futuro pero con una firma diferente, su código se romperá. Ha provocado incidentes como el [SmooshGate](https://developer.chrome.com/blog/smooshgate?hl=es-419), y puede ser una gran molestia para que el lenguaje avance ya que JavaScript intenta "no romper la web".
 >
@@ -349,7 +352,8 @@ Como se vio arriba, `doSomething()` tiene una propiedad `prototype` predetermina
 }
 ```
 
-> **Nota:** La consola Chrome usa `[[Prototype]]` para indicar el prototipo del objeto, siguiendo los términos de la especificación; Firefox usa `<Prototype>`. Por coherencia usaremos `[[Prototype]]`.
+> [!NOTE]
+> La consola Chrome usa `[[Prototype]]` para indicar el prototipo del objeto, siguiendo los términos de la especificación; Firefox usa `<Prototype>`. Por coherencia usaremos `[[Prototype]]`.
 
 Podemos agregar propiedades al prototipo de `doSomething()`, como se muestra a continuación.
 
diff --git a/files/es/web/javascript/language_overview/index.md b/files/es/web/javascript/language_overview/index.md
index a32a1d542200c4..9d8302e714baed 100644
--- a/files/es/web/javascript/language_overview/index.md
+++ b/files/es/web/javascript/language_overview/index.md
@@ -11,7 +11,8 @@ Es útil comenzar con una descripción general de la historia del lenguaje. Java
 
 Varios meses después, Microsoft lanzó JScript con Internet Explorer 3. Era un JavaScript prácticamente compatible. Varios meses después de eso, Netscape envió JavaScript a [Ecma International](http://www.ecma-international.org/), una organización europea de estándares, que resultó en la primera edición del estándar {{Glossary("ECMAScript")}} ese año. El estándar recibió una actualización significativa como [ECMAScript edición 3](http://www.ecma-international.org/publications/standards/Ecma-262.htm) en 1999, y se ha mantenido bastante estable desde entonces. La cuarta edición fue abandonada debido a diferencias políticas sobre la complejidad del lenguaje. Muchas partes de la cuarta edición formaron la base para la edición 5 de ECMAScript, publicada en diciembre de 2009, y para la sexta edición principal del estándar, publicada en junio de 2015.
 
-> **Nota:** Debido a que es más familiar, nos referiremos a ECMAScript como "JavaScript" de ahora en adelante.
+> [!NOTE]
+> Debido a que es más familiar, nos referiremos a ECMAScript como "JavaScript" de ahora en adelante.
 
 A diferencia de la mayoría de los lenguajes de programación, el lenguaje JavaScript no tiene un concepto de entrada o salida. Está diseñado para ejecutarse como un lenguaje de `scripting` en un entorno hospedado, y depende del entorno para proporcionar los mecanismos para comunicarse con el mundo exterior. El entorno de alojamiento más común es el navegador, pero también se pueden encontrar intérpretes de JavaScript en una gran lista de otros lugares, incluidos Adobe Acrobat, Adobe Photoshop, imágenes SVG, el motor de widgets de Yahoo, entornos de lado del servidor como [Node.js](http://nodejs.org/), bases de datos NoSQL como [Apache CouchDB](http://couchdb.apache.org/) de código abierto, computadoras integradas, entornos de escritorio completos como [GNOME](http://www.gnome.org/) (una de las IGU —_Interfaz Gráfica de Usuario_— más populares para sistemas operativos GNU/Linux), y otros.
 
@@ -137,7 +138,8 @@ isFinite(-Infinity); // false
 isFinite(NaN); // false
 ```
 
-> **Nota:** Las funciones {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} y {{jsxref("Objetos_Globales/parseFloat", "parseFloat()")}} analizan una cadena hasta que alcancen un caracter que no es válido para el formato de número especificado, luego devuelve el número analizado hasta ese punto. Sin embargo, el operador "+" simplemente convierte la cadena a `NaN` si contiene un caracter no válido. Intenta analizar la cadena "10.2abc" con cada método tú mismo en la consola y comprenderás mejor las diferencias.
+> [!NOTE]
+> Las funciones {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} y {{jsxref("Objetos_Globales/parseFloat", "parseFloat()")}} analizan una cadena hasta que alcancen un caracter que no es válido para el formato de número especificado, luego devuelve el número analizado hasta ese punto. Sin embargo, el operador "+" simplemente convierte la cadena a `NaN` si contiene un caracter no válido. Intenta analizar la cadena "10.2abc" con cada método tú mismo en la consola y comprenderás mejor las diferencias.
 
 ## Strings
 
@@ -474,11 +476,13 @@ obj.for = "Simon"; // Error de sintaxis, porque 'for' es una palabra reservada
 obj["for"] = "Simon"; // trabaja bien
 ```
 
-> **Nota:** A partir de ECMAScript 5, las palabras reservadas se pueden utilizar como nombres de propiedad de objeto "en bruto". Esto significa que no necesitan "vestirse" entre comillas al definir objeto literales. Consulta la [especificación](http://es5.github.io/#x7.6.1) de ES5.
+> [!NOTE]
+> A partir de ECMAScript 5, las palabras reservadas se pueden utilizar como nombres de propiedad de objeto "en bruto". Esto significa que no necesitan "vestirse" entre comillas al definir objeto literales. Consulta la [especificación](http://es5.github.io/#x7.6.1) de ES5.
 
 Para obtener más información sobre objetos y prototipos, consulta {{jsxref("Objetos_Globales/Object/prototype", "Object.prototype")}}. Para obtener una explicación de los prototipos de objetos y las cadenas de prototipos de objetos, consulta [Herencia y la cadena de prototipos](/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
 
-> **Nota:** A partir de ECMAScript 2015, las claves de objeto se pueden definir mediante la variable en notación de corchetes al crearlas. `{[phoneType]: 12345}` es posible en lugar de solo `var userPhone = {}; userPhone[phoneType] = 12345`.
+> [!NOTE]
+> A partir de ECMAScript 2015, las claves de objeto se pueden definir mediante la variable en notación de corchetes al crearlas. `{[phoneType]: 12345}` es posible en lugar de solo `var userPhone = {}; userPhone[phoneType] = 12345`.
 
 ## Arreglos
 
@@ -635,7 +639,8 @@ function avg(...args) {
 avg(2, 3, 4, 5); // 3.5
 ```
 
-> **Nota:** En el código anterior, la variable **args** contiene todos los valores que se pasaron a la función.
+> [!NOTE]
+> En el código anterior, la variable **args** contiene todos los valores que se pasaron a la función.
 >
 > Es importante tener en cuenta que dondequiera que se coloque el operador de parámetro `rest` en una declaración de función, almacenará todos los argumentos _después_ de su declaración, pero no antes. _es decir, function_ _avg(_**firstValue,** _...args)_ almacenará el primer valor pasado a la función en la variable **firstValue** y los argumentos restantes en **args**. Esa es otra característica útil del lenguaje, pero nos lleva a un nuevo problema. La función `avg()` toma una lista de argumentos separados por comas, pero ¿qué sucede si deseas encontrar el promedio de un arreglo? Simplemente, podrías reescribir la función de la siguiente manera:
 
@@ -659,7 +664,8 @@ avg.apply(null, [2, 3, 4, 5]); // 3.5
 
 El segundo argumento de `apply()` es el arreglo que se utilizará como `arguments`; el primero se explicará más adelante. Esto enfatiza el hecho de que las funciones también son objetos.
 
-> **Nota:** Puedes lograr el mismo resultado utilizando el [operador de propagación](/es/docs/Web/JavaScript/Reference/Operators/Spread_operator) en la llamada de función.
+> [!NOTE]
+> Puedes lograr el mismo resultado utilizando el [operador de propagación](/es/docs/Web/JavaScript/Reference/Operators/Spread_operator) en la llamada de función.
 >
 > Por ejemplo: `avg(...numbers)`
 
@@ -728,7 +734,8 @@ Ten en cuenta que las funciones de JavaScript en sí mismas son objetos, como to
 
 ## Objetos personalizados
 
-> **Nota:** Para obtener una descripción más detallada de la programación orientada a objetos en JavaScript, consulta [Introducción a JavaScript orientado a objetos](/es/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript).
+> [!NOTE]
+> Para obtener una descripción más detallada de la programación orientada a objetos en JavaScript, consulta [Introducción a JavaScript orientado a objetos](/es/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript).
 
 En la programación clásica orientada a objetos, los objetos son colecciones de datos y métodos que operan sobre esos datos. JavaScript es un lenguaje basado en prototipos que no contiene una declaración de clase, como la encontrarías en C++ o Java (esto, a veces es confuso para los programadores acostumbrados a lenguajes con una declaración de clase). En cambio, JavaScript usa funciones como clases. Consideremos un objeto `person` con campos `first` y `last name`. Hay dos formas de mostrar el nombre: como "primero último" o como "último, primero". Usando las funciones y objetos que hemos explicado anteriormente, podríamos mostrar los datos de esta manera:
 
diff --git a/files/es/web/javascript/reference/classes/index.md b/files/es/web/javascript/reference/classes/index.md
index 905dfd09eb9609..a002beaba2d4fd 100644
--- a/files/es/web/javascript/reference/classes/index.md
+++ b/files/es/web/javascript/reference/classes/index.md
@@ -61,7 +61,8 @@ console.log(Rectangulo.name);
 // output: "Rectangulo2"
 ```
 
-> **Nota:** Las **expresiones** de clase están sujetas a las mismas restricciones de elevación que se describen en la sección [Class declarations](#class_declarations).
+> [!NOTE]
+> Las **expresiones** de clase están sujetas a las mismas restricciones de elevación que se describen en la sección [Class declarations](#class_declarations).
 
 ## Cuerpo de la clase y definición de métodos
 
diff --git a/files/es/web/javascript/reference/classes/public_class_fields/index.md b/files/es/web/javascript/reference/classes/public_class_fields/index.md
index 502f4b7adc6d49..8bf398a8515e48 100644
--- a/files/es/web/javascript/reference/classes/public_class_fields/index.md
+++ b/files/es/web/javascript/reference/classes/public_class_fields/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Classes/Public_class_fields
 
 {{JsSidebar("Classes")}}
 
-> **Nota:** Las declaraciones de campos públicos y privados son una [característica experimental (en estado 3)](https://github.com/tc39/proposal-class-fields) propuesta por el [TC39](https://tc39.github.io/beta/), el comite de estandares de JavaScript. El soporte y funcionamiento en navegadores es limitado, pero la funcionalidad puede ser usada a través de un paso durante el proceso del build por medio de sistemas como [Babel](https://babeljs.io/). Revise [compat information](#Browser_compatibility) mas abajo.
+> [!NOTE]
+> Las declaraciones de campos públicos y privados son una [característica experimental (en estado 3)](https://github.com/tc39/proposal-class-fields) propuesta por el [TC39](https://tc39.github.io/beta/), el comite de estandares de JavaScript. El soporte y funcionamiento en navegadores es limitado, pero la funcionalidad puede ser usada a través de un paso durante el proceso del build por medio de sistemas como [Babel](https://babeljs.io/). Revise [compat information](#Browser_compatibility) mas abajo.
 
 Los campos públicos y estáticos son propieades editables, enumerables, y configurables. A diferencia de su contraparte privada, estos participan en la herencia de prototipo.
 
diff --git a/files/es/web/javascript/reference/errors/not_defined/index.md b/files/es/web/javascript/reference/errors/not_defined/index.md
index 05552d3feb731c..9b53232ad4ff5d 100644
--- a/files/es/web/javascript/reference/errors/not_defined/index.md
+++ b/files/es/web/javascript/reference/errors/not_defined/index.md
@@ -17,7 +17,8 @@ ReferenceError: "x" no está definida.
 
 Hay una variable no existente que está siendo referida en algún lugar. Esta variable necesita ser declarada o se debe comprobar su disponibilidad en el {{Glossary("ámbito")}} actual del script.
 
-> **Nota:** Cuando una librería es cargada (como por ejemplo jQuery) asegúrese de que se haya cargado antes de intentar acceder a sus variables, como por ejemplo "$". Ponga la etiqueta {{HTMLElement("script")}}, que carga la librería antes del código que la utiliza.
+> [!NOTE]
+> Cuando una librería es cargada (como por ejemplo jQuery) asegúrese de que se haya cargado antes de intentar acceder a sus variables, como por ejemplo "$". Ponga la etiqueta {{HTMLElement("script")}}, que carga la librería antes del código que la utiliza.
 
 ## Ejemplo
 
diff --git a/files/es/web/javascript/reference/functions/arguments/index.md b/files/es/web/javascript/reference/functions/arguments/index.md
index 171b0b7a299bf9..7ff9f230ba2129 100644
--- a/files/es/web/javascript/reference/functions/arguments/index.md
+++ b/files/es/web/javascript/reference/functions/arguments/index.md
@@ -11,9 +11,11 @@ slug: Web/JavaScript/Reference/Functions/arguments
 
 ## Descripción
 
-> **Nota:** Si estás escribiendo código compatible con ES6, entonces se deben preferir los {{jsxref("Functions/rest_parameters", "parámetros resto")}}.
+> [!NOTE]
+> Si estás escribiendo código compatible con ES6, entonces se deben preferir los {{jsxref("Functions/rest_parameters", "parámetros resto")}}.
 
-> **Nota:** "similar a Array" significa que `arguments` tiene una propiedad {{jsxref("Functions/arguments/length", "lenght")}} y propiedades indexadas desde cero, pero no tiene métodos integrados de {{jsxref("Array")}} como {{jsxref("Array.forEach", "forEach()")}} o {{jsxref("Array.map", "map()")}}. Ve la [§Descripción](#Descripción) para obtener más detalles.
+> [!NOTE]
+> "Similar a Array" significa que `arguments` tiene una propiedad {{jsxref("Functions/arguments/length", "lenght")}} y propiedades indexadas desde cero, pero no tiene métodos integrados de {{jsxref("Array")}} como {{jsxref("Array.forEach", "forEach()")}} o {{jsxref("Array.map", "map()")}}. Ve la [§Descripción](#Descripción) para obtener más detalles.
 
 El objeto `arguments` es una variable local disponible en todas las funciones que no son {{jsxref("Functions/Arrow_functions", "funciones flecha")}}. Puedes hacer referencia a los argumentos de una función dentro de esa función utilizando su objeto `arguments`. Tiene entradas para cada argumento con el que se llamó a la función, con el índice de la primera entrada en `0`.
 
@@ -153,7 +155,8 @@ Si bien la presencia de parámetros `rest`, predeterminados o desestructurados n
 
 En el código de modo estricto, el objeto `arguments` se comporta de la misma manera independientemente de que se pasen parámetros `rest`, predeterminados o desestructurados a una función. Es decir, asignar nuevos valores a las variables en el cuerpo de la función no afectará al objeto `arguments`. La asignación de nuevas variables al objeto `arguments` tampoco afectará el valor de las variables.
 
-> **Nota:** No puedes escribir una directiva `"use strict";` en el cuerpo de una definición de función que acepte parámetros `rest`, predeterminados o desestructurados. Si lo haces, generará un {{jsxref("Errors/Strict_Non_Simple_Params", "error de sintaxis")}}.
+> [!NOTE]
+> No puedes escribir una directiva `"use strict";` en el cuerpo de una definición de función que acepte parámetros `rest`, predeterminados o desestructurados. Si lo haces, generará un {{jsxref("Errors/Strict_Non_Simple_Params", "error de sintaxis")}}.
 
 Las funciones no estrictas a las que se les pasan solo parámetros simples (es decir, no parámetros `rest`, predeterminados o desestructurados) sincronizarán el valor de los nuevos valores de las variables en el cuerpo de la función con el objeto `arguments`, y viceversa:
 
diff --git a/files/es/web/javascript/reference/functions/arguments/length/index.md b/files/es/web/javascript/reference/functions/arguments/length/index.md
index a0287a61415e5c..87045d2e4951f4 100644
--- a/files/es/web/javascript/reference/functions/arguments/length/index.md
+++ b/files/es/web/javascript/reference/functions/arguments/length/index.md
@@ -33,7 +33,8 @@ function adder(base /*, n2, ... */) {
 }
 ```
 
-> **Nota:** Tenga en cuenta la diferencia entre {{jsxref("Function.length")}} y arguments.length
+> [!NOTE]
+> Tenga en cuenta la diferencia entre {{jsxref("Function.length")}} y arguments.length
 
 ## Especificaciones
 
diff --git a/files/es/web/javascript/reference/functions/arrow_functions/index.md b/files/es/web/javascript/reference/functions/arrow_functions/index.md
index c5fd5640eb7524..bee1a0a4978a9a 100644
--- a/files/es/web/javascript/reference/functions/arrow_functions/index.md
+++ b/files/es/web/javascript/reference/functions/arrow_functions/index.md
@@ -42,7 +42,8 @@ function (a){
 a => a + 100;
 ```
 
-> **Nota:** Como se muestra arriba, los { corchetes }, ( paréntesis ) y "return" son opcionales, pero pueden ser obligatorios.
+> [!NOTE]
+> Como se muestra arriba, los { corchetes }, ( paréntesis ) y "return" son opcionales, pero pueden ser obligatorios.
 
 Por ejemplo, si tienes **varios argumentos** o **ningún argumento**, deberás volver a introducir paréntesis alrededor de los argumentos:
 
@@ -166,7 +167,8 @@ Consulta también ["ES6 en profundidad: funciones flecha" en hacks.mozilla.org](
 
 Una de las razones por las que se introdujeron las funciones flecha fue para eliminar complejidades del ámbito ({{JSxRef("Operadores/this", "this")}}) y hacer que la ejecución de funciones sea mucho más intuitiva.
 
-> **Nota:** Si `this` es un misterio para ti, consulta {{JSxRef("Operadores/this", "este documento")}} para obtener más información sobre cómo funciona `this`. Para resumir, `this` se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave `new`. De lo contrario, `this` se establecerá —de forma predeterminada— en el {{Glossary("Scope", "ámbito o alcance")}} de window.
+> [!NOTE]
+> Si `this` es un misterio para ti, consulta {{JSxRef("Operadores/this", "este documento")}} para obtener más información sobre cómo funciona `this`. Para resumir, `this` se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave `new`. De lo contrario, `this` se establecerá —de forma predeterminada— en el {{Glossary("Scope", "ámbito o alcance")}} de window.
 
 En las **funciones tradicionales** de manera predeterminada `this` está en el ámbito de `window`:
 
@@ -215,7 +217,8 @@ f() === window; // o el objeto global
 
 Todas las demás reglas del {{JSxRef("Modo_estricto", "modo estricto")}} se aplican normalmente.
 
-> **Advertencia:** Comprueba las notas sobre el {{JSxRef("Modo_estricto", "modo estricto")}}.
+> [!WARNING]
+> Comprueba las notas sobre el {{JSxRef("Modo_estricto", "modo estricto")}}.
 
 ### Funciones flecha utilizadas como métodos
 
diff --git a/files/es/web/javascript/reference/functions/index.md b/files/es/web/javascript/reference/functions/index.md
index 14f47e1173f5fb..39c75307eb0c01 100644
--- a/files/es/web/javascript/reference/functions/index.md
+++ b/files/es/web/javascript/reference/functions/index.md
@@ -103,7 +103,8 @@ function [nombre]([param[, param[, ...param]]]) {
 
 ### La expresión de función flecha (=>)
 
-> **Nota:** Las expresiones de función Flecha son una tecnología experimental, parte de la proposición Harmony (EcmaScript 6) y no son ampliamente implementadas por los navegadores.
+> [!NOTE]
+> Las expresiones de función Flecha son una tecnología experimental, parte de la proposición Harmony (EcmaScript 6) y no son ampliamente implementadas por los navegadores.
 
 Una expresión de función flecha tiene una sintaxis más corta y su léxico se une a este valor (ver {{jsxref("Funciones/Arrow_functions", "arrow functions", "", 1)}} para más detalles):
 
@@ -135,7 +136,8 @@ new Function (arg1, arg2, ... argN, functionBody)
 
 Llamar al contructor Function como una función, sin el operador new, tiene el mismo efecto que llamarlo como un constructor.
 
-> **Nota:** Utilizar el constructor Function no se recomienda, ya que necesita el cuerpo de la función como una cadena, lo cual puede ocasionar que no se optimize correctamente por el motor JS, y puede también causar otros problemas.
+> [!NOTE]
+> Utilizar el constructor Function no se recomienda, ya que necesita el cuerpo de la función como una cadena, lo cual puede ocasionar que no se optimize correctamente por el motor JS, y puede también causar otros problemas.
 
 ## El objeto `arguments`
 
@@ -514,9 +516,11 @@ if (0)
 
 Si se cambia el script para que la condición se convierta en '`if (1)`', se define la función `zero`.
 
-> **Nota:** Aunque esto parece una declaración de función, ésta es en realidad una expresión de función ya que está anidada dentro de otra instrucción. Ver [las diferencias entre las funciones de declaración y de expresión](#constructor_versus_declaration_versus_expression).
+> [!NOTE]
+> Aunque esto parece una declaración de función, ésta es en realidad una expresión de función ya que está anidada dentro de otra instrucción. Ver [las diferencias entre las funciones de declaración y de expresión](#constructor_versus_declaration_versus_expression).
 
-> **Nota:** Algunos motores JavaScript, sin incluir [SpiderMonkey](/es/docs/Mozilla/Projetos/SpiderMonkey), tratan incorrectamente cualquier expresión de función con un nombre como una declaración de función. Esto llevaría a que se definiera `zero` incluso con el siempre-falso("_always-false_") condicional. Una manera más segura de definir funciones condicionalmente es definir la función anónimamente y asignarla a una variable:
+> [!NOTE]
+> Algunos motores JavaScript, sin incluir [SpiderMonkey](/es/docs/Mozilla/Projetos/SpiderMonkey), tratan incorrectamente cualquier expresión de función con un nombre como una declaración de función. Esto llevaría a que se definiera `zero` incluso con el siempre-falso("_always-false_") condicional. Una manera más segura de definir funciones condicionalmente es definir la función anónimamente y asignarla a una variable:
 
 ```js
 if (0)
@@ -531,7 +535,8 @@ En JavaScript, los controladores de eventos [DOM](/es/DOM) son funciones (en opo
 
 Los posibles objetivos de eventos en un documento [HTML](/es/HTML) incluyen: `window` (`Window` objects("objeto de ventana"), including frames("marcos")), `document` (`HTMLDocument` objects("objetos HTMLDocument")), y elementos (`Element` objects("objetos Elemento")). En el [HTML DOM](http://www.w3.org/TR/DOM-Level-2-HTML/), los destinos de evento tienen propiedades de controlador de eventos. Estas propiedades son nombres de eventos en minúsculas con prefijo "on", e.g. `onfocus`. Los eventos [DOM Level 2 Events](http://www.w3.org/TR/DOM-Level-2-Events/) proporcionan una forma alternativa y más sólida de agregar oyentes de eventos.
 
-> **Nota:** Los eventos son parte del DOM, no de JavaScript. (JavaScript simplemente proporciona un enlace al DOM.)
+> [!NOTE]
+> Los eventos son parte del DOM, no de JavaScript. (JavaScript simplemente proporciona un enlace al DOM.)
 
 El ejemplo siguiente asigna una función a un manejador de eventos de "foco"("focus") de ventana.
 
@@ -657,7 +662,8 @@ if ("function" == typeof window.noFunc) {
 }
 ```
 
-> **Nota:** Tenga en cuenta que en la prueba `if`, e utiliza una referencia a `noFunc` aquí no hay paréntesis "()" después del nombre de la función para que la función real no se llame.
+> [!NOTE]
+> Tenga en cuenta que en la prueba `if`, e utiliza una referencia a `noFunc` aquí no hay paréntesis "()" después del nombre de la función para que la función real no se llame.
 
 ### Ver también
 
diff --git a/files/es/web/javascript/reference/functions/method_definitions/index.md b/files/es/web/javascript/reference/functions/method_definitions/index.md
index 79b58b08cf687f..7f671666154bc4 100644
--- a/files/es/web/javascript/reference/functions/method_definitions/index.md
+++ b/files/es/web/javascript/reference/functions/method_definitions/index.md
@@ -42,7 +42,8 @@ var obj = {
 };
 ```
 
-> **Nota:** La sintaxis abreviada usa funciones con nombre en lugar de funciones anónimas (como en … `foo: function() {}`…). Las funciones con nombre pueden ser llamadas desde el cuerpo de la función (esto es imposible con funciones anónimas, ya que no existe un identificador al que referirse). Para más detalles, ver {{jsxref("Operators/function","function","#Examples")}}.
+> [!NOTE]
+> La sintaxis abreviada usa funciones con nombre en lugar de funciones anónimas (como en … `foo: function() {}`…). Las funciones con nombre pueden ser llamadas desde el cuerpo de la función (esto es imposible con funciones anónimas, ya que no existe un identificador al que referirse). Para más detalles, ver {{jsxref("Operators/function","function","#Examples")}}.
 
 ### Abreviatura de métodos generadores
 
diff --git a/files/es/web/javascript/reference/functions/set/index.md b/files/es/web/javascript/reference/functions/set/index.md
index b648abcd84ab1f..21eed9d7d95728 100644
--- a/files/es/web/javascript/reference/functions/set/index.md
+++ b/files/es/web/javascript/reference/functions/set/index.md
@@ -85,7 +85,8 @@ console.log(o.a); // 5
 
 ### Usando un nombre de propiedad computado
 
-> **Nota:** Propiedades computadas son 'experimental technology'_,_ parte de la propuesta para ECMAScript 6, y no está soportado en todos los navegadores. Dará error de sintaxis en entornos no soportados.
+> [!NOTE]
+> Propiedades computadas son 'experimental technology'_,_ parte de la propuesta para ECMAScript 6, y no está soportado en todos los navegadores. Dará error de sintaxis en entornos no soportados.
 
 ```js
 const expr = "foo";
diff --git a/files/es/web/javascript/reference/global_objects/array/concat/index.md b/files/es/web/javascript/reference/global_objects/array/concat/index.md
index be016ea5d1ff8d..bfff26e32bff47 100644
--- a/files/es/web/javascript/reference/global_objects/array/concat/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/concat/index.md
@@ -33,7 +33,8 @@ El método `concat` no altera `this` el array original, ni ninguno de los que fu
 - Referencias a Objetos (no el objeto real): `concat` copia las referencias de objetos en el nuevo array. Ambos, el array original y el nuevo refieren al mismo objeto. Es decir, si un objeto referenciado es modificado, los cambios serán visibles tanto en el array nuevo como en el antiguo.
 - Tipo de de datos como cadenas, números y boleanos (no objetos {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}} o {{jsxref("Global_Objects/Boolean", "Boolean")}} objects): `concat` copia los valores de los strings y numeros en el nuevo array.
 
-> **Nota:** Al concatenar arrays o valores no se modificarán los originales. Además, las operaciones en el nuevo array (excepto las operaciones en elementos que son referencias a objetos) no tendrán efecto en el array original, y viceversa.
+> [!NOTE]
+> Al concatenar arrays o valores no se modificarán los originales. Además, las operaciones en el nuevo array (excepto las operaciones en elementos que son referencias a objetos) no tendrán efecto en el array original, y viceversa.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/array/findindex/index.md b/files/es/web/javascript/reference/global_objects/array/findindex/index.md
index f156b8e1629367..268c2edf30f57d 100644
--- a/files/es/web/javascript/reference/global_objects/array/findindex/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/findindex/index.md
@@ -39,7 +39,8 @@ El método `findIndex()` ejecuta la función de _`callback`_ una vez por cada í
 
 Si dicho elemento es encontrado, `findIndex()` inmediatamente devuelve el índice del elemento. Si la función _`callback`_ nunca devuelve un valor verdadero (o el tamaño del array es 0), `findIndex` devuelve `-1`.
 
-> **Nota:** A diferencia de otros métodos de arrays como {{jsxref("Array.some()")}}, `callback` se ejecuta incluso en índices sin valores asignados.
+> [!NOTE]
+> A diferencia de otros métodos de arrays como {{jsxref("Array.some()")}}, `callback` se ejecuta incluso en índices sin valores asignados.
 
 _`callback`_ se invoca con tres argumentos:
 
diff --git a/files/es/web/javascript/reference/global_objects/array/foreach/index.md b/files/es/web/javascript/reference/global_objects/array/foreach/index.md
index f41241a9bb979b..de4c1e0f87b778 100644
--- a/files/es/web/javascript/reference/global_objects/array/foreach/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/foreach/index.md
@@ -55,7 +55,8 @@ El rango de elementos procesados por `forEach()` se establece antes de la primer
 
 `foreach()` no muta/modifica el array desde el que es llamado (aunque `callback`, si se invoca, podría hacerlo).
 
-> **Nota:** No hay forma de detener o cortar un bucle `forEach` que no sea lanzar una excepción. Si necesita dicho comportamiento, el método `.forEach()` es la herramienta equivocada, use una simple iteración en su lugar. Si está probando los elementos del array para un predicado y necesita devolver un valor boleano, puede usar {{jsxref("Array.prototype.every()", "every()")}} o {{jsxref("Array.prototype.some()", "some()")}} en su lugar.
+> [!NOTE]
+> No hay forma de detener o cortar un bucle `forEach` que no sea lanzar una excepción. Si necesita dicho comportamiento, el método `.forEach()` es la herramienta equivocada, use una simple iteración en su lugar. Si está probando los elementos del array para un predicado y necesita devolver un valor boleano, puede usar {{jsxref("Array.prototype.every()", "every()")}} o {{jsxref("Array.prototype.some()", "some()")}} en su lugar.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/array/includes/index.md b/files/es/web/javascript/reference/global_objects/array/includes/index.md
index 9c290f2d841938..5f605e08a681d1 100644
--- a/files/es/web/javascript/reference/global_objects/array/includes/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/includes/index.md
@@ -19,7 +19,8 @@ arr.includes(searchElement[, fromIndex])
 
 - `valueToFind`
   - : El valor a buscar.
-    > **Nota:** Al comparar cadenas de texto y caracteres, `includes()` **distingue mayúsculas y minúsculas**.
+    > [!NOTE]
+    > Al comparar cadenas de texto y caracteres, `includes()` **distingue mayúsculas y minúsculas**.
 - `fromIndex` {{optional_inline}}
   - : Posición en la matriz en la cuál se debe comenzar a buscar `valueToFind`; el primer caracter a buscar se encuentra en `fromIndex`. Un valor negativo inicia la búsqueda desde array.length + fromIndex en adelante. El valor por defecto es 0.
 
@@ -27,7 +28,8 @@ arr.includes(searchElement[, fromIndex])
 
 Un {{jsxref ("Boolean")}} que es `true` si el valor `valueToFind` se encuentra dentro de la matriz (o la parte de la matriz indicada por el índice `fromIndex`, si se especifica). Todos los valores de cero se consideran iguales independientemente del signo (es decir, -0 se considera igual a 0 y +0), pero `false` no se considera igual a 0.
 
-> **Nota:** Técnicamente hablando, `include()` usa el algoritmo [`sameValueZero`](/es/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality) para determinar si se encuentra el elemento dado
+> [!NOTE]
+> Técnicamente hablando, `include()` usa el algoritmo [`sameValueZero`](/es/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality) para determinar si se encuentra el elemento dado
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/array/indexof/index.md b/files/es/web/javascript/reference/global_objects/array/indexof/index.md
index 6883be0eeb8222..6829e20ab3b690 100644
--- a/files/es/web/javascript/reference/global_objects/array/indexof/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/indexof/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
 
 El método **indexOf()** retorna el primer índice en el que se puede encontrar un elemento dado en el array, ó retorna -1 si el elemento no esta presente.
 
-> **Nota:** Para el método String, ver {{jsxref("String.prototype.indexOf()")}}.
+> [!NOTE]
+> Para el método String, ver {{jsxref("String.prototype.indexOf()")}}.
 
 ## Sintaxis
 
diff --git a/files/es/web/javascript/reference/global_objects/array/join/index.md b/files/es/web/javascript/reference/global_objects/array/join/index.md
index fa50df92362c42..099196ad631bc4 100644
--- a/files/es/web/javascript/reference/global_objects/array/join/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/join/index.md
@@ -28,7 +28,8 @@ Una cadena con todos los elementos de la matriz unidos. Si `arr.length` es `0`,
 
 Las conversiones de cadena de todos los elementos de la matriz se unen en una cadena.
 
-> **Advertencia:** Si un elemento `no está definido` o es `nulo`, se convierte en la cadena vacía.
+> [!WARNING]
+> Si un elemento `no está definido` o es `nulo`, se convierte en la cadena vacía.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/array/slice/index.md b/files/es/web/javascript/reference/global_objects/array/slice/index.md
index 8dca54e2e29eb6..a77dcf04597dc9 100644
--- a/files/es/web/javascript/reference/global_objects/array/slice/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/slice/index.md
@@ -112,7 +112,8 @@ nuevoCoche[0].color = azul
 
 ## Objetos array-like
 
-> **Nota:** Se dice que un objeto es **array-like** ( similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son **números** y en particular tiene una propiedad llamada **length**. Este hecho hace suponer que el objeto es algún tipo de colección de elementos indexados por números. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a través de su prototipo.
+> [!NOTE]
+> Se dice que un objeto es **array-like** ( similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son **números** y en particular tiene una propiedad llamada **length**. Este hecho hace suponer que el objeto es algún tipo de colección de elementos indexados por números. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a través de su prototipo.
 
 El método `slice` puede ser usado para convertir objetos parecidos a arrays o colecciones a un nuevo Array. Simplemente debe enlazar el método al objeto. El {{jsxref("Functions_and_function_scope/arguments", "arguments")}} dentro de una función es un ejemplo de un objeto parecido a arrays.
 
diff --git a/files/es/web/javascript/reference/global_objects/array/some/index.md b/files/es/web/javascript/reference/global_objects/array/some/index.md
index 5a4bb3c4a3db8c..31b3e5416006d1 100644
--- a/files/es/web/javascript/reference/global_objects/array/some/index.md
+++ b/files/es/web/javascript/reference/global_objects/array/some/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Array/some
 
 El método **`some()`** comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.
 
-> **Nota:** Este método devuelve `false` para cualquier condición puesta en un array vacío.
+> [!NOTE]
+> Este método devuelve `false` para cualquier condición puesta en un array vacío.
 
 {{EmbedInteractiveExample("pages/js/array-some.html")}}
 
diff --git a/files/es/web/javascript/reference/global_objects/asyncfunction/index.md b/files/es/web/javascript/reference/global_objects/asyncfunction/index.md
index 9f48d214142171..b3e0f221a3e088 100644
--- a/files/es/web/javascript/reference/global_objects/asyncfunction/index.md
+++ b/files/es/web/javascript/reference/global_objects/asyncfunction/index.md
@@ -39,7 +39,8 @@ Los objetos {{jsxref("Statements/async_function", "async function")}} creados co
 
 Todos los argumentos que son pasados a la función son tratados por los nombres de los identificadores de los parámetros en la función creada, en el orden en que son pasados a la función.
 
-> **Nota:** Las {{jsxref("Statements/async_function", "async functions", "", 1)}} creadas con el constructor `AsyncFunction` no crean
+> [!NOTE]
+> Las {{jsxref("Statements/async_function", "async functions", "", 1)}} creadas con el constructor `AsyncFunction` no crean
 > [_closures_](/es/docs/Web/JavaScript/Closures) en sus contextos creados, siempre son creados en el contexto global.
 >
 > Cuando se ejecutan, solamente podran acceder a sus variables locales y globales, no a las variables de otros contextos en el cual
diff --git a/files/es/web/javascript/reference/global_objects/bigint/index.md b/files/es/web/javascript/reference/global_objects/bigint/index.md
index 7cf8549664c032..767a851a57078a 100644
--- a/files/es/web/javascript/reference/global_objects/bigint/index.md
+++ b/files/es/web/javascript/reference/global_objects/bigint/index.md
@@ -221,7 +221,8 @@ console.log(parsed);
 // { number: 1, big: 18014398509481982n }
 ```
 
-> **Nota:** Si bien es posible hacer el reemplazo de `JSON.stringify()` genérico y propiamente serializar los valores BigInt para todos los objetos, el reviver `JSON.parse()` tiene que ser específico para la forma de carga útil esperada, ya que la serialización tiene _pérdidas_: no es posible distinguir entre una cadena que representa un BigInt y una cadena normal.
+> [!NOTE]
+> Si bien es posible hacer el reemplazo de `JSON.stringify()` genérico y propiamente serializar los valores BigInt para todos los objetos, el reviver `JSON.parse()` tiene que ser específico para la forma de carga útil esperada, ya que la serialización tiene _pérdidas_: no es posible distinguir entre una cadena que representa un BigInt y una cadena normal.
 >
 > Además, el ejemplo de arriba crea un objeto entero en el replacing y reviving, lo que probablemente tenga implicaciónes de rendimiento y almacenamiento para objetos más grandes que contienen muchos BigInts. Si conoces la forma de carga útil esperada, puede ser mejor simplemente serializarlas como strings y revivirlas basadas en el nombre de la key.
 
diff --git a/files/es/web/javascript/reference/global_objects/boolean/index.md b/files/es/web/javascript/reference/global_objects/boolean/index.md
index c14fad9b4f4012..d43750444e9f37 100644
--- a/files/es/web/javascript/reference/global_objects/boolean/index.md
+++ b/files/es/web/javascript/reference/global_objects/boolean/index.md
@@ -50,7 +50,8 @@ var s = Boolean(myString); // valor inicial de true
 
 No utilices un objeto `Boolean` en lugar de un `Boolean` primitivo.
 
-> **Nota:** Cuando la propiedad no estándar [`document.all`](/es/docs/Web/API/Document#Properties) se usa como argumento para este constructor, el resultado es un objeto `Boolean` con el valor `false`. Esta propiedad es heredada y no estándar y no se debe usar.
+> [!NOTE]
+> Cuando la propiedad no estándar [`document.all`](/es/docs/Web/API/Document#Properties) se usa como argumento para este constructor, el resultado es un objeto `Boolean` con el valor `false`. Esta propiedad es heredada y no estándar y no se debe usar.
 
 ## Constructor
 
diff --git a/files/es/web/javascript/reference/global_objects/date/index.md b/files/es/web/javascript/reference/global_objects/date/index.md
index b32eaa3a0d7e29..c58ecc5112529d 100644
--- a/files/es/web/javascript/reference/global_objects/date/index.md
+++ b/files/es/web/javascript/reference/global_objects/date/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Date
 
 Los objetos **`Date`** representan en JavaScript un momento fijo en el tiempo en un formato independiente. El objeto `Date` contiene un `Number` que representa los milisegundos transcurridos desde el 1 de Enero de 1970 UTC.
 
-> **Nota:** TC39 está trabajando en [Temporal](https://tc39.es/proposal-temporal/docs/index.html), una nueva API de Date/Time. Lee más acerca de ello en el [blog Igalia](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/). Aún no está lista para su uso en producción.
+> [!NOTE]
+> TC39 está trabajando en [Temporal](https://tc39.es/proposal-temporal/docs/index.html), una nueva API de Date/Time. Lee más acerca de ello en el [blog Igalia](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/). Aún no está lista para su uso en producción.
 
 ## Descripción
 
@@ -15,7 +16,8 @@ Los objetos **`Date`** representan en JavaScript un momento fijo en el tiempo en
 
 Una fecha en JavaScript es fundamentalmente especificada como el número de milisegundos que han pasado desde la [Época ECMAScript](https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-time-values-and-time-range) la cuál está definida como el 1 de Enero de 1970, UTC. Esta fecha y hora no son los mismos que en la **Época Unix** (el número de segundos que han pasado desde la media noche del 1 de Enero de 1970, UTC), el cual es el valor predominante base para representar los valores de fecha y hora en los ordenadores.
 
-> **Nota:** Es importante tener en cuenta que mientras el valor de la hora en el núcleo del objeto `Date` está en UTC, los métodos básicos para recibir la fecha y la hora o sus derivados trabajan todos en la zona horaria local (por ejemplo: máquina huesped).
+> [!NOTE]
+> Es importante tener en cuenta que mientras el valor de la hora en el núcleo del objeto `Date` está en UTC, los métodos básicos para recibir la fecha y la hora o sus derivados trabajan todos en la zona horaria local (por ejemplo: máquina huesped).
 
 Se debe tener en cuenta que el valor máximo de `Date` no es el mismo que el valor del máximo entero seguro (`Number.MAX_SAFE_INTEGER` es 9,007,199,254,740,991). En su lugar, fue definido en ECMA-262 que un máximo de ±100,000,000 (cien millones) días relativos al 1 de Enero de 1970, UTC (que es, 20 de Abril de 271821 a. e. c. \~ 13 de Septiembre de 275760 a. e. c.) pueden ser representados por el objeto estandar `Date` (equivalente a ±8,640,000,000,000,000 milisegundos).
 
@@ -40,7 +42,8 @@ Sumado a los métodos para leer y manipular los componentes individuales de la f
 
   - : Transforma la cadena que representa una fecha y retorna el número de milisegundos transcurridos desde el 1 de Enero de 1970, 00:00:00 UTC, ignorando los segundos intercalares.
 
-    > **Nota:** Transforma las cadenas con `Date.parse` es muy poco recomendado debido a diferencias e inconsistencias entre navegadores.
+    > [!NOTE]
+    > Transforma las cadenas con `Date.parse` es muy poco recomendado debido a diferencias e inconsistencias entre navegadores.
 
 - {{jsxref("Date.UTC()")}}
   - : Acepta los mismos parámetros de la forma extendida del constructor (por ejemplo: del 2 al 7 ) y retorna el número de milisegundos transcurridos desde el 1 de Enero de 1970, 00:00:00 UTC, ignorando los segundos intercalares.
@@ -146,7 +149,8 @@ Sumado a los métodos para leer y manipular los componentes individuales de la f
 
 Los siguientes ejemplos muestran distintas maneras de crear fechas en JavaScript:
 
-> **Nota:** Transformar las cadenas de fechas con el constructor `Date` (y `Date.parse`, son equivalentes) es escasamente recomendado debido las diferencias e inconsistencias entre navegadores.
+> [!NOTE]
+> Transformar las cadenas de fechas con el constructor `Date` (y `Date.parse`, son equivalentes) es escasamente recomendado debido las diferencias e inconsistencias entre navegadores.
 
 ```js
 let today = new Date();
@@ -242,7 +246,8 @@ function printElapsedTime(fTest) {
 let yourFunctionReturn = printElapsedTime(yourFunction);
 ```
 
-> **Nota:** En los navegadores que soportan la funcionalidad de alta resolución temporal de {{domxref("performance_property", "Web Performance API", "", 1)}}, {{domxref("Performance.now()")}} puede proveer una medida más precisa y confiable del tiempo transcurrido que {{jsxref("Date.now()")}}.
+> [!NOTE]
+> En los navegadores que soportan la funcionalidad de alta resolución temporal de {{domxref("performance_property", "Web Performance API", "", 1)}}, {{domxref("Performance.now()")}} puede proveer una medida más precisa y confiable del tiempo transcurrido que {{jsxref("Date.now()")}}.
 
 ### Obtener el número de segundos desde la Época ECMAScript
 
diff --git a/files/es/web/javascript/reference/global_objects/date/todatestring/index.md b/files/es/web/javascript/reference/global_objects/date/todatestring/index.md
index 07b5f042c76d1a..8baf22c2e4cbcd 100644
--- a/files/es/web/javascript/reference/global_objects/date/todatestring/index.md
+++ b/files/es/web/javascript/reference/global_objects/date/todatestring/index.md
@@ -34,7 +34,8 @@ console.log(d.toString()); // logs Wed Jun 28 1993 14:39:07 GMT-0600 (PDT)
 console.log(d.toDateString()); // logs Wed Jun 28 1993
 ```
 
-> **Nota:** Los meses son 0-indexados cuando son utilizados como parámetros de {{jsxref("Date")}} (Siendo así, el cero (0) corresponde a Enero y el once (11) a Diciembre).
+> [!NOTE]
+> Los meses son 0-indexados cuando son utilizados como parámetros de {{jsxref("Date")}} (Siendo así, el cero (0) corresponde a Enero y el once (11) a Diciembre).
 
 ## Especificaciones
 
diff --git a/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.md b/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.md
index cff3e53c2dd184..2553ea94a8182b 100644
--- a/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.md
+++ b/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.md
@@ -135,7 +135,8 @@ For this reason you cannot expect to be able to compare the results of `toLocale
 // false in IE and Edge
 ```
 
-> **Nota:** See also this [StackOverflow thread](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results) for more details and examples.
+> [!NOTE]
+> See also this [StackOverflow thread](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results) for more details and examples.
 
 ## Performance
 
diff --git a/files/es/web/javascript/reference/global_objects/error/index.md b/files/es/web/javascript/reference/global_objects/error/index.md
index d6960993ee687f..375619c64b8402 100644
--- a/files/es/web/javascript/reference/global_objects/error/index.md
+++ b/files/es/web/javascript/reference/global_objects/error/index.md
@@ -103,9 +103,11 @@ Consulta ["¿Cuál es una buena manera de extender `Error` en JavaScript?"](http
 
 #### Clase `Error` personalizado en ES6
 
-> **Advertencia:** Las versiones de Babel anteriores a la 7 pueden manejar métodos de clase `CustomError`, pero solo cuando se declaran con {{JSxRef("Objetos_globales/Object/defineProperty", "Object.defineProperty()")}}. De lo contrario, las versiones antiguas de Babel y otros transpiladores no manejarán correctamente el siguiente código sin [configuración adicional](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend).
+> [!WARNING]
+> Las versiones de Babel anteriores a la 7 pueden manejar métodos de clase `CustomError`, pero solo cuando se declaran con {{JSxRef("Objetos_globales/Object/defineProperty", "Object.defineProperty()")}}. De lo contrario, las versiones antiguas de Babel y otros transpiladores no manejarán correctamente el siguiente código sin [configuración adicional](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend).
 
-> **Nota:** Algunos navegadores incluyen el constructor `CustomError` en el seguimiento de la pila cuando se utilizan clases de ES2015.
+> [!NOTE]
+> Algunos navegadores incluyen el constructor `CustomError` en el seguimiento de la pila cuando se utilizan clases de ES2015.
 
 ```js
 class CustomError extends Error {
diff --git a/files/es/web/javascript/reference/global_objects/function/apply/index.md b/files/es/web/javascript/reference/global_objects/function/apply/index.md
index 940730363a6669..ac9073abb3778e 100644
--- a/files/es/web/javascript/reference/global_objects/function/apply/index.md
+++ b/files/es/web/javascript/reference/global_objects/function/apply/index.md
@@ -9,7 +9,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Function/apply
 
 El método **apply()** invoca una determinada función asignando explícitamente el objeto **this** y un array o similar ([array like object](/es/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects)) como parámetros (**argumentos)** para dicha función.
 
-> **Nota:** Aunque la sintaxis de esta función es casi idéntica a {{jsxref("Function.call", "call()")}}, la diferencia fundamental es que `call()` acepta una lista de argumentos, mientras que `apply()` acepta un simple array con los argumentos.
+> [!NOTE]
+> Aunque la sintaxis de esta función es casi idéntica a {{jsxref("Function.call", "call()")}}, la diferencia fundamental es que `call()` acepta una lista de argumentos, mientras que `apply()` acepta un simple array con los argumentos.
 
 ## Sintaxis
 
@@ -38,7 +39,8 @@ Puede también utilizarse {{jsxref("Functions/arguments", "arguments")}} como pa
 
 Desde la 5ta edición de ECMAScript se puede utilizar también cualquier tipo de objeto similar a un arreglo, que en términos prácticos significa que tendrá una propiedad `length` y propiedades integer en el rango (`0...length)`. Por ejemplo, ahora puede utilizarse un {{domxref("NodeList")}} o un objeto personalizado como: `{'length': 2, '0': 'eat', '1': 'bananas'}`.
 
-> **Nota:** La mayoría de los navegadores, incluidos Chrome 14 e Internet Explorer 9, aún no soportan el uso de objetos similares a un array y arrojarán una excepción.
+> [!NOTE]
+> La mayoría de los navegadores, incluidos Chrome 14 e Internet Explorer 9, aún no soportan el uso de objetos similares a un array y arrojarán una excepción.
 
 ## Ejemplos
 
@@ -74,7 +76,8 @@ alert(myInstance instanceof MyConstructor); // alerts "true"
 alert(myInstance.constructor); // alerts "MyConstructor"
 ```
 
-> **Nota:** El método `Function.construct` no nativo no funcionará con algunos constructores nativos (como {{jsxref("Date")}}, por ejemplo). En estos casos se deberá utilizar el método {{jsxref("Function.bind")}} (por ejemplo, supóngase un arreglo como el siguiente para utilizar con el constructor `Date`: `[2012, 11, 4]`; en este caso se tendría que escribir algo como: `new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()` – de cualquier manera, ésta no es la mejor manera de hacerlo y probablemente no debería utilizarse en ningún entorno en producción).
+> [!NOTE]
+> El método `Function.construct` no nativo no funcionará con algunos constructores nativos (como {{jsxref("Date")}}, por ejemplo). En estos casos se deberá utilizar el método {{jsxref("Function.bind")}} (por ejemplo, supóngase un arreglo como el siguiente para utilizar con el constructor `Date`: `[2012, 11, 4]`; en este caso se tendría que escribir algo como: `new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()` – de cualquier manera, ésta no es la mejor manera de hacerlo y probablemente no debería utilizarse en ningún entorno en producción).
 
 ### `apply` y funciones built-in
 
diff --git a/files/es/web/javascript/reference/global_objects/function/arguments/index.md b/files/es/web/javascript/reference/global_objects/function/arguments/index.md
index a7a05ef758b136..fc2b3442e7be6a 100644
--- a/files/es/web/javascript/reference/global_objects/function/arguments/index.md
+++ b/files/es/web/javascript/reference/global_objects/function/arguments/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}}{{Deprecated_Header}}{{Non-standard_Header}}
 
-> **Nota:** La propiedad `arguments` de los objetos {{jsxref("Function")}} está en desuso. La forma recomendada de acceder al objeto `arguments` es hacer referencia a la variable {{jsxref("Functions/arguments", "arguments") }} disponible dentro de las funciones.
+> [!NOTE]
+> La propiedad `arguments` de los objetos {{jsxref("Function")}} está en desuso. La forma recomendada de acceder al objeto `arguments` es hacer referencia a la variable {{jsxref("Functions/arguments", "arguments") }} disponible dentro de las funciones.
 
 La propiedad de acceso **`arguments`** de instancias de {{jsxref("Function")}} devuelve los argumentos pasados ​​a esta función. Para las funciones [strict](/es/docs/Web/JavaScript/Reference/Strict_mode), flecha , asíncronas y generadoras, acceder a la propiedad `arguments` arroja un {{jsxref("TypeError")}}.
 
diff --git a/files/es/web/javascript/reference/global_objects/function/call/index.md b/files/es/web/javascript/reference/global_objects/function/call/index.md
index ef882086f011eb..42d4617c726b5b 100644
--- a/files/es/web/javascript/reference/global_objects/function/call/index.md
+++ b/files/es/web/javascript/reference/global_objects/function/call/index.md
@@ -21,7 +21,8 @@ function.call(thisArg[, arg1[, arg2[, ...]]])
 
   - : El valor a usar como `this` cuando se llama a _`function`_.
 
-    > **Advertencia:** En ciertos casos, `thisArg` puede no ser el valor actual visto por el método.
+    > [!WARNING]
+    > En ciertos casos, `thisArg` puede no ser el valor actual visto por el método.
     >
     > Si el método es una función en {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} y {{jsxref("Global_Objects/undefined", "undefined")}} serán reemplazados con el objeto global, y valores primitivos serán convertidos a objetos.
 
@@ -38,7 +39,8 @@ El resultado de llamar a la función con el `this` especificado y los argumentos
 
 `call()` provee un nuevo valor de `this` a la función/método. Con `call()`, puedes escribir un método ona vez y heredarlo a otro objeto, sin tener que reescribir el método en el nuevo objeto.
 
-> **Nota:** Mientras la sintaxis de esta función es casi identica a la función {{jsxref("Function.apply", "apply()")}}, la diferencia fundamental es que `call()` acepta una **lista de argumentos**, mientras `apply()` accepta un **arreglo sencillo de argumentos**.
+> [!NOTE]
+> Mientras la sintaxis de esta función es casi identica a la función {{jsxref("Function.apply", "apply()")}}, la diferencia fundamental es que `call()` acepta una **lista de argumentos**, mientras `apply()` accepta un **arreglo sencillo de argumentos**.
 
 ## Ejemplos
 
@@ -84,7 +86,8 @@ En este ejemplo, creamos una función anónima y usamos `call` para invocarla en
 
 El propósito principal de la función anónima aquí es agregar una función `print` a cada objeto, el cual puede imprimir el índice correcto en el arreglo.
 
-> **Nota:** Pasar el objeto como valor `this` no es estrictamente necesario, pero se hace con propósito explicativo.
+> [!NOTE]
+> Pasar el objeto como valor `this` no es estrictamente necesario, pero se hace con propósito explicativo.
 
 ```js
 var animales = [
diff --git a/files/es/web/javascript/reference/global_objects/json/stringify/index.md b/files/es/web/javascript/reference/global_objects/json/stringify/index.md
index fd43f1123bdee3..fe8a1098b8df9f 100644
--- a/files/es/web/javascript/reference/global_objects/json/stringify/index.md
+++ b/files/es/web/javascript/reference/global_objects/json/stringify/index.md
@@ -141,7 +141,8 @@ Devuelve el valor que se va a agregar a la cadena JSON, de la siguiente manera:
 - Si se devuelve algún otro objeto, este es recursivamente procesado en una cadena JSON llamando a la función de reemplazo para cada propiedad, amenos que el objeto sea una función, en tal caso nada se agrega a la cadena JSON.
 - Si se devuelve undefined, la propiedad no se incluye en la salida de la cadena JSON.
 
-> **Nota:** No se puede usar la función de reemplazo para borrar los valores de un array. Si se devuelve undefined o una función, entonces se usara null en su lugar.
+> [!NOTE]
+> No se puede usar la función de reemplazo para borrar los valores de un array. Si se devuelve undefined o una función, entonces se usara null en su lugar.
 
 #### Ejemplo con una función
 
@@ -217,7 +218,8 @@ var json = JSON.stringify({ x: obj }); // '{"x":"bar"}'.
 
 En dado caso en el cual se requiera que un objeto creado por el usuario y al cual se le permita ser restaurado incluso cuando el navegador ha sido cerrado, el siguiente ejemplo es un modelo de la aplicabilidad del metodo JSON. stringify().
 
-> **Advertencia:** Las funciones no son un tipo de dato valido por lo cual estas no funcionaran. Algunos objetos como tipo DATE, se convertiran a cadenas de texto despues de ejecutar JSON.parse().
+> [!WARNING]
+> Las funciones no son un tipo de dato valido por lo cual estas no funcionaran. Algunos objetos como tipo DATE, se convertiran a cadenas de texto despues de ejecutar JSON.parse().
 
 ```js
 // Creando un ejemplo de JSON
diff --git a/files/es/web/javascript/reference/global_objects/math/index.md b/files/es/web/javascript/reference/global_objects/math/index.md
index 38f0f4bae1de2d..addd5289a527f5 100644
--- a/files/es/web/javascript/reference/global_objects/math/index.md
+++ b/files/es/web/javascript/reference/global_objects/math/index.md
@@ -34,9 +34,11 @@ A diferencia de los demás objetos globales, el objeto `Math` no se puede editar
 
 ## Métodos
 
-> **Nota:** Tenga en cuenta que las funciones trigonométricas (`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`) devuelven ángulos en radianes. Para convertir radianes a grados, divida por `(Math.PI / 180)`, y multiplique por esto para convertir a la inversa.
+> [!NOTE]
+> Tenga en cuenta que las funciones trigonométricas (`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`) devuelven ángulos en radianes. Para convertir radianes a grados, divida por `(Math.PI / 180)`, y multiplique por esto para convertir a la inversa.
 
-> **Nota:** Tenga en cuenta que muchas de las funciones matemáticas tienen una precisión que es dependiente de la implementación. Esto significa que los diferentes navegadores pueden dar un resultado diferente, e incluso el mismo motor de JS en un sistema operativo o arquitectura diferente puede dar resultados diferentes.
+> [!NOTE]
+> Tenga en cuenta que muchas de las funciones matemáticas tienen una precisión que es dependiente de la implementación. Esto significa que los diferentes navegadores pueden dar un resultado diferente, e incluso el mismo motor de JS en un sistema operativo o arquitectura diferente puede dar resultados diferentes.
 
 - {{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}
   - : Devuelve el valor absoluto de un número.
diff --git a/files/es/web/javascript/reference/global_objects/math/random/index.md b/files/es/web/javascript/reference/global_objects/math/random/index.md
index 7b6c209070b4e8..ece73be0899ae9 100644
--- a/files/es/web/javascript/reference/global_objects/math/random/index.md
+++ b/files/es/web/javascript/reference/global_objects/math/random/index.md
@@ -58,7 +58,8 @@ function getRandomInt(min, max) {
 }
 ```
 
-> **Nota:** Puede ser tentador utilizar `Math.round()` para conseguir lo mismo, pero al hacerlo, los números aleatorios devueltos no seguirán una distribución uniforme. Esto podría no ser aceptable para sus necesidades.
+> [!NOTE]
+> Puede ser tentador utilizar `Math.round()` para conseguir lo mismo, pero al hacerlo, los números aleatorios devueltos no seguirán una distribución uniforme. Esto podría no ser aceptable para sus necesidades.
 
 ### Obtener un número entero aleatorio entre dos valores (incluyendo ambos)
 
diff --git a/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.md b/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.md
index 9717c07506b2f5..62dc6bd70b67c3 100644
--- a/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.md
+++ b/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
 
 {{JSRef}}
 
-> **Advertencia:** Esta característica está obsoleta en favor de definir getters usando el [object initializer syntax](/es/docs/Web/JavaScript/Reference/Operators/Object_initializer) o la API {{jsxref("Object.defineProperty()")}}.
+> [!WARNING]
+> Esta característica está obsoleta en favor de definir getters usando el [object initializer syntax](/es/docs/Web/JavaScript/Reference/Operators/Object_initializer) o la API {{jsxref("Object.defineProperty()")}}.
 >
 > En todo caso, como es ampliamente implementada y usada en la Web, es poco probable que los navegadores dejen de implementarla.
 
diff --git a/files/es/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/es/web/javascript/reference/global_objects/object/defineproperty/index.md
index 5e0ac7b989384c..77d2e57d30bf99 100644
--- a/files/es/web/javascript/reference/global_objects/object/defineproperty/index.md
+++ b/files/es/web/javascript/reference/global_objects/object/defineproperty/index.md
@@ -9,7 +9,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
 
 El método estático **`Object.defineProperty()`** define una nueva propiedad sobre un objeto, o modifica una ya existente, y devuelve el objeto modificado.
 
-> **Nota:** Ud. puede llamar a este método directamente mediante el constructor {{jsxref("Object")}} en vez de crear una instancia del tipo `Object`.
+> [!NOTE]
+> Ud. puede llamar a este método directamente mediante el constructor {{jsxref("Object")}} en vez de crear una instancia del tipo `Object`.
 
 ## Sintaxis
 
diff --git a/files/es/web/javascript/reference/global_objects/object/keys/index.md b/files/es/web/javascript/reference/global_objects/object/keys/index.md
index 0d1a7818885527..5c98b8971ee0d3 100644
--- a/files/es/web/javascript/reference/global_objects/object/keys/index.md
+++ b/files/es/web/javascript/reference/global_objects/object/keys/index.md
@@ -78,7 +78,8 @@ console.log(Object.keys("foo")); // ['0', '1', '2']
 console.log(Object.keys(100)); // []
 ```
 
-> **Nota:** En ES5, si el argumento para `Object.keys()` no es un objeto, causará {{jsxref("TypeError")}}.
+> [!NOTE]
+> En ES5, si el argumento para `Object.keys()` no es un objeto, causará {{jsxref("TypeError")}}.
 
 ## Especificaciones
 
diff --git a/files/es/web/javascript/reference/global_objects/object/proto/index.md b/files/es/web/javascript/reference/global_objects/object/proto/index.md
index 8dd43c6166ce19..6f4700b6759626 100644
--- a/files/es/web/javascript/reference/global_objects/object/proto/index.md
+++ b/files/es/web/javascript/reference/global_objects/object/proto/index.md
@@ -3,9 +3,11 @@ title: Object.prototype.__proto__
 slug: Web/JavaScript/Reference/Global_Objects/Object/proto
 ---
 
-> **Advertencia:** Cambiar la propiedad `[[Prototype]]` de un objeto es, por como los navegadores modernos optimizan las propiedades de acceso, una operación muy lenta en **_todos_** los navegadores y motores JavaScript. Los efectos en el rendimiento de alterar la herencia son muchos y delicados, y no se limita simplemente al tiempo que necesita la asignación `obj.__proto__ = ...` sentencia, sin embargo afecta a **_cualquier_** código que tiene acceso a **_cualquier_** objeto cuya propiedad `[[Prototype]]` ha sido alterada, por lo que se debe de tener mucho cuidado.Si el rendimiento en tu aplicación es necesario, deberías evitar modificar la propiedad `[[Prototype]]` de un objeto. En su lugar, crea un objecto nuevo con la propiedad `[[Prototype]]` deseada usando {{jsxref("Object.create()")}}.
+> [!WARNING]
+> Cambiar la propiedad `[[Prototype]]` de un objeto es, por como los navegadores modernos optimizan las propiedades de acceso, una operación muy lenta en **_todos_** los navegadores y motores JavaScript. Los efectos en el rendimiento de alterar la herencia son muchos y delicados, y no se limita simplemente al tiempo que necesita la asignación `obj.__proto__ = ...` sentencia, sin embargo afecta a **_cualquier_** código que tiene acceso a **_cualquier_** objeto cuya propiedad `[[Prototype]]` ha sido alterada, por lo que se debe de tener mucho cuidado.Si el rendimiento en tu aplicación es necesario, deberías evitar modificar la propiedad `[[Prototype]]` de un objeto. En su lugar, crea un objecto nuevo con la propiedad `[[Prototype]]` deseada usando {{jsxref("Object.create()")}}.
 
-> **Advertencia:** Mientras `Object.prototype.__proto__` es soportado hoy día por la mayoría de navegadores, su existencia y comportamiento exacto solo ha sido estandarizado en la especificación ECMAScript 6 como una característica de legado y para asegurar la compatibilidad entre los navegadores web. Para tener un mejor soporte, es recomendable que se utilice {{jsxref("Object.getPrototypeOf()")}} para obtener el prototipo de un objeto.
+> [!WARNING]
+> Mientras `Object.prototype.__proto__` es soportado hoy día por la mayoría de navegadores, su existencia y comportamiento exacto solo ha sido estandarizado en la especificación ECMAScript 6 como una característica de legado y para asegurar la compatibilidad entre los navegadores web. Para tener un mejor soporte, es recomendable que se utilice {{jsxref("Object.getPrototypeOf()")}} para obtener el prototipo de un objeto.
 
 {{JSRef}}
 
diff --git a/files/es/web/javascript/reference/global_objects/object/valueof/index.md b/files/es/web/javascript/reference/global_objects/object/valueof/index.md
index 09fd8a07f8e318..5086028d4ad82f 100644
--- a/files/es/web/javascript/reference/global_objects/object/valueof/index.md
+++ b/files/es/web/javascript/reference/global_objects/object/valueof/index.md
@@ -47,7 +47,8 @@ El método `valueOf` es invocado usualmente por JavaScript pero usted puede invo
 myNumber.valueOf();
 ```
 
-> **Nota:** Objetos en contextos de string realizan la conversión a string a través del método {{jsxref("Object.toString", "toString()")}} , el cual, es diferente de {{jsxref("String")}} para convertir objetos a primitivos string utilizando el método `valueOf`. Todos los objetos pueden ser convertidos a string, si solo "`[object _type_]`". Pero muchos objetos no se pueden convertir a number, boolean o function.
+> [!NOTE]
+> Objetos en contextos de string realizan la conversión a string a través del método {{jsxref("Object.toString", "toString()")}} , el cual, es diferente de {{jsxref("String")}} para convertir objetos a primitivos string utilizando el método `valueOf`. Todos los objetos pueden ser convertidos a string, si solo "`[object _type_]`". Pero muchos objetos no se pueden convertir a number, boolean o function.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/promise/finally/index.md b/files/es/web/javascript/reference/global_objects/promise/finally/index.md
index 052699e9634f59..6d01bec517c032 100644
--- a/files/es/web/javascript/reference/global_objects/promise/finally/index.md
+++ b/files/es/web/javascript/reference/global_objects/promise/finally/index.md
@@ -39,7 +39,8 @@ Utilizar `finally()` es muy similar a llamar `.then(onFinally, onFinally)`, sin
 - A diferencia de `Promise.resolve(2).then(() => {}, () => {})` (que va a resolver a `undefined`), `Promise.resolve(2).finally(() => {})` resolverá con un `2`.
 - Del mismo modo, a diferencia de `Promise.reject(3).then(() => {}, () => {})` (que resolverá con `undefined`), `Promise.reject(3).finally(() => {})` será rechazada con un `3`.
 
-> **Nota:** Un `throw` (o retornar una promesa rechazada) en el callback `finally` va a rechazar la nueva promesa con la razón de rechazo especificada al llamar `throw()`.
+> [!NOTE]
+> Un `throw` (o retornar una promesa rechazada) en el callback `finally` va a rechazar la nueva promesa con la razón de rechazo especificada al llamar `throw()`.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/promise/index.md b/files/es/web/javascript/reference/global_objects/promise/index.md
index 341ed2792e34ed..e95db4f93049f0 100644
--- a/files/es/web/javascript/reference/global_objects/promise/index.md
+++ b/files/es/web/javascript/reference/global_objects/promise/index.md
@@ -27,9 +27,11 @@ Como los métodos `{{JSxRef("Promise.then", "Promise.prototype.then()")}}` y `{{
 
 ![](promises.png)
 
-> **Nota:** Varios otros lenguajes tienen mecanismos para la evaluación diferida y el aplazamiento de un cálculo, a los que también llaman "promesas", p.ej. _Scheme_. Las promesas en JavaScript representan procesos que ya están sucediendo, que se pueden encadenar con funciones de devolución de llamada. Si está buscando evaluar lentamente una expresión, considere usar una función sin argumentos, p.ej. `f = () => expression` para crear la expresión evaluada de forma diferida, y `f()` para evaluar la expresión inmediatamente.
+> [!NOTE]
+> Varios otros lenguajes tienen mecanismos para la evaluación diferida y el aplazamiento de un cálculo, a los que también llaman "promesas", p.ej. _Scheme_. Las promesas en JavaScript representan procesos que ya están sucediendo, que se pueden encadenar con funciones de devolución de llamada. Si está buscando evaluar lentamente una expresión, considere usar una función sin argumentos, p.ej. `f = () => expression` para crear la expresión evaluada de forma diferida, y `f()` para evaluar la expresión inmediatamente.
 
-> **Nota:** Se dice que una promesa está _establecida_ si se cumple o se rechaza, pero no está pendiente. También escuchará el término _resuelto_ usado con promesas; esto significa que la promesa se establece o "bloquea" para que coincida con el estado de otra promesa. [Estados y destinos](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) contiene más detalles sobre la terminología de promesas.
+> [!NOTE]
+> Se dice que una promesa está _establecida_ si se cumple o se rechaza, pero no está pendiente. También escuchará el término _resuelto_ usado con promesas; esto significa que la promesa se establece o "bloquea" para que coincida con el estado de otra promesa. [Estados y destinos](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) contiene más detalles sobre la terminología de promesas.
 
 ### Promesas encadenadas
 
@@ -184,7 +186,8 @@ Si cambiamos esto para que el `<iframe>` en el documento escuche los mensajes de
 
 En el ejemplo anterior, el texto interno del `<iframe>` se actualizará solo si se realiza un seguimiento del objeto de configuración correspondiente. Esto se debe a que sin rastrear al titular, podemos terminar usando el entorno incorrecto para enviar el mensaje.
 
-> **Nota:** Actualmente, el seguimiento del campo titular está completamente implementado en Firefox y tiene implementaciones parciales en Chrome y Safari.
+> [!NOTE]
+> Actualmente, el seguimiento del campo titular está completamente implementado en Firefox y tiene implementaciones parciales en Chrome y Safari.
 
 ## Constructor
 
diff --git a/files/es/web/javascript/reference/global_objects/regexp/index.md b/files/es/web/javascript/reference/global_objects/regexp/index.md
index 4de1cfa1adbfca..68daabf017e1d7 100644
--- a/files/es/web/javascript/reference/global_objects/regexp/index.md
+++ b/files/es/web/javascript/reference/global_objects/regexp/index.md
@@ -203,7 +203,8 @@ let url = "http://xxx.dominio.com";
 console.log(/[^.]+/.exec(url)[0].substr(7)); // registra 'xxx'
 ```
 
-> **Nota:** En lugar de utilizar expresiones regulares para analizar las URL, normalmente es mejor utilizar el analizador de URL integrado en los navegadores mediante la [API URL](/es/docs/Web/API/URL_API).
+> [!NOTE]
+> En lugar de utilizar expresiones regulares para analizar las URL, normalmente es mejor utilizar el analizador de URL integrado en los navegadores mediante la [API URL](/es/docs/Web/API/URL_API).
 
 ## Especificaciones
 
diff --git a/files/es/web/javascript/reference/global_objects/string/fontcolor/index.md b/files/es/web/javascript/reference/global_objects/string/fontcolor/index.md
index 812667a94fa168..ed162dd4f3d2b3 100644
--- a/files/es/web/javascript/reference/global_objects/string/fontcolor/index.md
+++ b/files/es/web/javascript/reference/global_objects/string/fontcolor/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor
 
 El método **`fontcolor()`** crea {{HTMLElement("font")}} elemento HTML que cambia el color de la cadena.
 
-> **Nota:** La etiqueta \<font> fue eliminada en [HTML5](/es/docs/Web/Guide/HTML/HTML5) y no debe ser usada. En lugar de es, es necesario aplicar propiedades [CSS](/es/docs/Web/CSS).
+> [!NOTE]
+> La etiqueta \<font> fue eliminada en [HTML5](/es/docs/Web/Guide/HTML/HTML5) y no debe ser usada. En lugar de es, es necesario aplicar propiedades [CSS](/es/docs/Web/CSS).
 
 ## Sintaxis
 
diff --git a/files/es/web/javascript/reference/global_objects/string/fontsize/index.md b/files/es/web/javascript/reference/global_objects/string/fontsize/index.md
index bcbabf7382cf04..33816cf8aded5d 100644
--- a/files/es/web/javascript/reference/global_objects/string/fontsize/index.md
+++ b/files/es/web/javascript/reference/global_objects/string/fontsize/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/fontsize
 
 El método **`fontsize()`** crea {{HTMLElement("font")}} elemento HTML que muestra una cadena con el tamaño especificado.
 
-> **Nota:** El elemento \<font> ha sido eliminado [HTML5](/es/docs/Web/Guide/HTML/HTML5) y no se debe usar. Los desarrolladores web deben usar propiedades [CSS](/es/docs/Web/CSS).
+> [!NOTE]
+> El elemento \<font> ha sido eliminado [HTML5](/es/docs/Web/Guide/HTML/HTML5) y no se debe usar. Los desarrolladores web deben usar propiedades [CSS](/es/docs/Web/CSS).
 
 ## Sintaxis
 
diff --git a/files/es/web/javascript/reference/global_objects/string/match/index.md b/files/es/web/javascript/reference/global_objects/string/match/index.md
index 8f8d6ee8302b1d..16330c701b7de6 100644
--- a/files/es/web/javascript/reference/global_objects/string/match/index.md
+++ b/files/es/web/javascript/reference/global_objects/string/match/index.md
@@ -90,7 +90,8 @@ console.log(matches);
 // ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
 ```
 
-> **Nota:** Véase también {{jsxref("String.prototype.matchAll()")}} y [Búsqueda avanzada con banderas](/es/docs/Web/JavaScript/Guide/Regular_Expressions#búsqueda_avanzada_con_banderas).
+> [!NOTE]
+> Véase también {{jsxref("String.prototype.matchAll()")}} y [Búsqueda avanzada con banderas](/es/docs/Web/JavaScript/Guide/Regular_Expressions#búsqueda_avanzada_con_banderas).
 
 ### Uso de grupos de captura con nombre
 
diff --git a/files/es/web/javascript/reference/global_objects/string/replace/index.md b/files/es/web/javascript/reference/global_objects/string/replace/index.md
index f8dcdb1ac6ffd1..5b733a2f1bc731 100644
--- a/files/es/web/javascript/reference/global_objects/string/replace/index.md
+++ b/files/es/web/javascript/reference/global_objects/string/replace/index.md
@@ -78,7 +78,8 @@ La cadena de reemplazo puede incluir los siguientes patrones de reemplazo especi
 
 Se puede especificar un función como el segundo parámetro. En este caso, la función será invocada después de haber buscado las coincidencias. El resultado de la función (valor de retorno) será usado como la cadena de reemplazo.
 
-> **Nota:** Los patrones de reemplazo especiales mencionados previamente _no_ aplican para las cadenas devueltas por una función de reemplazo.
+> [!NOTE]
+> Los patrones de reemplazo especiales mencionados previamente _no_ aplican para las cadenas devueltas por una función de reemplazo.
 
 La función tiene la siguiente firma:
 
@@ -130,7 +131,8 @@ console.log(newstr); // Twas the night before Christmas...
 
 Esto imprime `'Twas the night before Christmas...'`.
 
-> **Nota:** Véase [la guía de expresiones regulares](/es/docs/Web/JavaScript/Guide/Regular_expressions) para más información acerca de expresiones regulares.
+> [!NOTE]
+> Véase [la guía de expresiones regulares](/es/docs/Web/JavaScript/Guide/Regular_expressions) para más información acerca de expresiones regulares.
 
 ### Usando los parámetros _global_ e _ignoreCase_ con replace()
 
diff --git a/files/es/web/javascript/reference/global_objects/string/split/index.md b/files/es/web/javascript/reference/global_objects/string/split/index.md
index cb17a4347f58ad..f4199ddde9f8fe 100644
--- a/files/es/web/javascript/reference/global_objects/string/split/index.md
+++ b/files/es/web/javascript/reference/global_objects/string/split/index.md
@@ -31,7 +31,8 @@ Cuando se encuentra, el `separador` es eliminado de la cadena y las subcadenas o
 
 Si el `separador` es una expresión regular que contiene paréntesis de captura, entonces cada vez que el `separador` concuerda, los resultados (incluído cualquier resultado indefinido) de los paréntesis de captura son divididos en el array resultante. Sin embargo no todos los navegadores soportan esta característica.
 
-> **Nota:** Cuando la cadena está vacía, `split()` devuelve un array que contiene una cadena vacía, en lugar de un array vacío.
+> [!NOTE]
+> Cuando la cadena está vacía, `split()` devuelve un array que contiene una cadena vacía, en lugar de un array vacío.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/string/substr/index.md b/files/es/web/javascript/reference/global_objects/string/substr/index.md
index f7e74ce5756080..5a2c06eaf22381 100644
--- a/files/es/web/javascript/reference/global_objects/string/substr/index.md
+++ b/files/es/web/javascript/reference/global_objects/string/substr/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/substr
 
 {{JSRef}}
 
-> **Advertencia:** Advertencia: Aunque `String.prototype.substr(…)` no está estrictamente obsoleto (como en "eliminado de los estándares web"), se define en el anexo B de la norma ECMA-262, cuya introducción establece:
+> [!WARNING]
+> Aunque `String.prototype.substr(…)` no está estrictamente obsoleto (como en "eliminado de los estándares web"), se define en el anexo B de la norma ECMA-262, cuya introducción establece:
 >
 > > ... Todas las características y comportamientos del lenguaje especificados en este anexo tienen una o más características indeseables y, en ausencia de uso heredado, se eliminarían de esta especificación. ... ... Los programadores no deben usar ni asumir la existencia de estas características y comportamientos al escribir un nuevo código ECMAScript.
 
diff --git a/files/es/web/javascript/reference/global_objects/undefined/index.md b/files/es/web/javascript/reference/global_objects/undefined/index.md
index 5b91c1503c83d3..c127c66ceddf65 100644
--- a/files/es/web/javascript/reference/global_objects/undefined/index.md
+++ b/files/es/web/javascript/reference/global_objects/undefined/index.md
@@ -25,7 +25,8 @@ En navegadores modernos (JavaScript 1.8.5 / Firefox 4+), `undefined` es una prop
 
 Una variable a la que no se le ha asignado valor es de tipo `undefined`. Un método o sentencia también devuelve `undefined` si la variable que se está evaluando no tiene asignado un valor. Una función devuelve `undefined` si no se ha {{jsxref("Sentencias/return", "devuelto")}} un valor.
 
-> **Nota:** Aunque es posible usarlo como un {{Glossary("Identifier", "identificador")}} (nombre de variable) en cualquier otro ámbito que no sea el ámbito global (porque `undefined` no es una {{jsxref("Reserved_Words", "palabra reservada")}}), hacerlo es una mala idea que provocará que tú código sea difícil de mantener y depurar.
+> [!NOTE]
+> Aunque es posible usarlo como un {{Glossary("Identifier", "identificador")}} (nombre de variable) en cualquier otro ámbito que no sea el ámbito global (porque `undefined` no es una {{jsxref("Reserved_Words", "palabra reservada")}}), hacerlo es una mala idea que provocará que tú código sea difícil de mantener y depurar.
 >
 > ```js example-bad
 > //NO HAGAS ESTO
@@ -58,7 +59,8 @@ if (x === undefined) {
 }
 ```
 
-> **Nota:** Aquí se debe usar el operador de igualdad estricta en lugar del operador de igualdad estándar, ya que `x == undefined` también verifica si `x` es `null`, mientras que el de igualdad estricta no. `null` no es equivalente a `undefined`. Vea {{jsxref("Operadores/Comparison_Operators", "operadores de comparación")}} para más detalles.
+> [!NOTE]
+> Aquí se debe usar el operador de igualdad estricta en lugar del operador de igualdad estándar, ya que `x == undefined` también verifica si `x` es `null`, mientras que el de igualdad estricta no. `null` no es equivalente a `undefined`. Vea {{jsxref("Operadores/Comparison_Operators", "operadores de comparación")}} para más detalles.
 
 ### Typeof operador y `undefined`
 
diff --git a/files/es/web/javascript/reference/global_objects/unescape/index.md b/files/es/web/javascript/reference/global_objects/unescape/index.md
index f68fbb26470c2f..5f8d0f2a5a39a8 100644
--- a/files/es/web/javascript/reference/global_objects/unescape/index.md
+++ b/files/es/web/javascript/reference/global_objects/unescape/index.md
@@ -32,7 +32,8 @@ Una nueva cadena en la que ciertos caracteres no han sido reemplazados.
 
 La función `unescape()` reemplaza cualquier secuencia de escape con el carácter que representa. Específicamente, reemplaza cualquier secuencia de escape de la forma `%XX` o `%uXXXX` (donde `X` representa un dígito hexadecimal) con el carácter que tiene el valor hexadecimal `XX`/`XXXX`. Si la secuencia de escape no es una secuencia de escape válida (por ejemplo, si "%" va seguido de uno o ningún dígito hexadecimal), se deja como está.
 
-> **Nota:** Esta función se usó principalmente para la codificación de URL y se basa en parte en el formato de escape en {{rfc(1738)}}. La función `unescape()` _no_ evalúa [secuencias de escape](/es/docs/Web/JavaScript/Reference/Global_Objects/String#escape_sequences) en cadenas literales. Puede reemplazar `\xXX` con `%XX` y `\uXXXX` con `%uXXXX` para obtener una cadena que `unescape()` pueda manejar.
+> [!NOTE]
+> Esta función se usó principalmente para la codificación de URL y se basa en parte en el formato de escape en {{rfc(1738)}}. La función `unescape()` _no_ evalúa [secuencias de escape](/es/docs/Web/JavaScript/Reference/Global_Objects/String#escape_sequences) en cadenas literales. Puede reemplazar `\xXX` con `%XX` y `\uXXXX` con `%uXXXX` para obtener una cadena que `unescape()` pueda manejar.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/global_objects/weakset/index.md b/files/es/web/javascript/reference/global_objects/weakset/index.md
index 832e87ff5802cb..0007af9c7aa670 100644
--- a/files/es/web/javascript/reference/global_objects/weakset/index.md
+++ b/files/es/web/javascript/reference/global_objects/weakset/index.md
@@ -17,7 +17,8 @@ Las principales diferencias con el objeto {{jsxref("Set")}} son:
 - `WeakSet` son colecciones de **objetos solamente**. No pueden contener valores arbitrarios de cualquier tipo, como pueden hacerlo los {{jsxref("Set")}}.
 - El `WeakSet` es _débil_, lo que significa que las referencias a objectos en un `WeakSet` se mantienen _débilmente_. Si no existen otras referencias a un objecto almacenado en `WeakSet`, esos objectos pueden ser recolectados como basura.
 
-  > **Nota:** Esto también significa que no hay una lista de objectos actuales almacenados en la colección. Los `WeakSets` no son enumerables.
+  > [!NOTE]
+  > Esto también significa que no hay una lista de objectos actuales almacenados en la colección. Los `WeakSets` no son enumerables.
 
 ### Caso de uso: Detección de referencias circulares
 
diff --git a/files/es/web/javascript/reference/lexical_grammar/index.md b/files/es/web/javascript/reference/lexical_grammar/index.md
index fa2d0aa977636c..8975285abd67d7 100644
--- a/files/es/web/javascript/reference/lexical_grammar/index.md
+++ b/files/es/web/javascript/reference/lexical_grammar/index.md
@@ -116,9 +116,11 @@ El comentario `hashbang` especifica la ruta a un intérprete de JavaScript espec
 console.log("Hola mundo");
 ```
 
-> **Nota:** Los comentarios `hashbang` en JavaScript imitan a los [`shebangs` en Unix](<https://en.wikipedia.org/wiki/Shebang_(Unix)>) utilizados para ejecutar archivos con el intérprete apropiado.
+> [!NOTE]
+> Los comentarios `hashbang` en JavaScript imitan a los [`shebangs` en Unix](<https://en.wikipedia.org/wiki/Shebang_(Unix)>) utilizados para ejecutar archivos con el intérprete apropiado.
 
-> **Advertencia:** Aunque [BOM](https://https://es.wikipedia.org/wiki/Marca_de_orden_de_bytes) antes de que el comentario `hashbang` funcione en un navegador, no se recomienda utilizar BOM en un script con `hashbang`. BOM no funcionará cuando intentes ejecutar el script en Unix/Linux. Por lo tanto, usa UTF-8 sin BOM si deseas ejecutar scripts directamente desde el intérprete.
+> [!WARNING]
+> Aunque [BOM](https://https://es.wikipedia.org/wiki/Marca_de_orden_de_bytes) antes de que el comentario `hashbang` funcione en un navegador, no se recomienda utilizar BOM en un script con `hashbang`. BOM no funcionará cuando intentes ejecutar el script en Unix/Linux. Por lo tanto, usa UTF-8 sin BOM si deseas ejecutar scripts directamente desde el intérprete.
 
 ¡Solo debes usar el estilo de comentario `#!` para especificar un intérprete de JavaScript. En todos los demás casos, utiliza un comentario `//` (o un comentario multilínea).
 
diff --git a/files/es/web/javascript/reference/operators/destructuring_assignment/index.md b/files/es/web/javascript/reference/operators/destructuring_assignment/index.md
index 94a5a9fa843be1..e207d9dd56e84f 100644
--- a/files/es/web/javascript/reference/operators/destructuring_assignment/index.md
+++ b/files/es/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -217,7 +217,8 @@ let a, b;
 ({ a, b } = { a: 1, b: 2 });
 ```
 
-> **Nota:** Los paréntesis `(...)` alrededor de la declaración de asignación son obligatorios cuando se usa la desestructuración de un objeto literal sin una declaración.
+> [!NOTE]
+> Los paréntesis `(...)` alrededor de la declaración de asignación son obligatorios cuando se usa la desestructuración de un objeto literal sin una declaración.
 >
 > `{a, b} = {a: 1, b: 2}` no es una sintaxis independiente válida, debido a que `{a, b}` en el lado izquierdo se considera un bloque y no un objeto literal.
 >
@@ -308,7 +309,8 @@ drawChart({
 });
 ```
 
-> **Nota:** En la firma de la función para **`drawChart`** anterior, el lado izquierdo desestructurado se asigna a un objeto literal vacío en el lado derecho: `{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}`. También podrías haber escrito la función sin la asignación del lado derecho. Sin embargo, si omites la asignación del lado derecho, la función buscará al menos un argumento para ser proporcionado cuando se invoca, mientras que en su forma actual, simplemente puedes llamar a **`drawChart()`** sin proporcionar ningún parámetro. El diseño actual es útil si deseas poder llamar a la función sin proporcionar ningún parámetro, el otro puede ser útil cuando deseas asegurarte de que se pase un objeto a la función.
+> [!NOTE]
+> En la firma de la función para **`drawChart`** anterior, el lado izquierdo desestructurado se asigna a un objeto literal vacío en el lado derecho: `{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}`. También podrías haber escrito la función sin la asignación del lado derecho. Sin embargo, si omites la asignación del lado derecho, la función buscará al menos un argumento para ser proporcionado cuando se invoca, mientras que en su forma actual, simplemente puedes llamar a **`drawChart()`** sin proporcionar ningún parámetro. El diseño actual es útil si deseas poder llamar a la función sin proporcionar ningún parámetro, el otro puede ser útil cuando deseas asegurarte de que se pase un objeto a la función.
 
 #### Desestructuración de arreglos y objetos anidados
 
diff --git a/files/es/web/javascript/reference/operators/logical_or/index.md b/files/es/web/javascript/reference/operators/logical_or/index.md
index eab35bb91b006f..3f10b69729bb7e 100644
--- a/files/es/web/javascript/reference/operators/logical_or/index.md
+++ b/files/es/web/javascript/reference/operators/logical_or/index.md
@@ -85,7 +85,8 @@ false || ""; // f || f retorna ""
 false || varObject; // f || objeto retorna varObject
 ```
 
-> **Nota:** Si se usa este operador para proveer un valor por defecto a alguna variable, se debe ser consciente que cualquier valor _falsy_ no será usado. Si solo se necesita filtrar [`null`](/es/docs/Web/JavaScript/Reference/Operators/null) o {{jsxref("undefined")}}, considere usar [el operador de coalescencia nula (??)](/es/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing).
+> [!NOTE]
+> Si se usa este operador para proveer un valor por defecto a alguna variable, se debe ser consciente que cualquier valor _falsy_ no será usado. Si solo se necesita filtrar [`null`](/es/docs/Web/JavaScript/Reference/Operators/null) o {{jsxref("undefined")}}, considere usar [el operador de coalescencia nula (??)](/es/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing).
 
 ### Reglas de conversión para booleanos
 
diff --git a/files/es/web/javascript/reference/operators/new/index.md b/files/es/web/javascript/reference/operators/new/index.md
index 0e750820d47e62..31da3aa1ef56b9 100644
--- a/files/es/web/javascript/reference/operators/new/index.md
+++ b/files/es/web/javascript/reference/operators/new/index.md
@@ -69,7 +69,8 @@ console.log(car1.color); // 'black'
 console.log(car2.color); // 'color original'
 ```
 
-> **Nota:** Si no escribiste el operador `new`, **la función `constructor` se invocará como cualquier función normal**, _sin crear un objeto._ En este caso, el valor de `this` también es diferente.
+> [!NOTE]
+> Si no escribiste el operador `new`, **la función `constructor` se invocará como cualquier función normal**, _sin crear un objeto._ En este caso, el valor de `this` también es diferente.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/operators/optional_chaining/index.md b/files/es/web/javascript/reference/operators/optional_chaining/index.md
index cf6fdc93b3e11b..33effca5d3f107 100644
--- a/files/es/web/javascript/reference/operators/optional_chaining/index.md
+++ b/files/es/web/javascript/reference/operators/optional_chaining/index.md
@@ -57,7 +57,8 @@ El uso de encadenamiento opcional con llamadas a funciones hace que la expresió
 let result = someInterface.customMethod?.();
 ```
 
-> **Nota:** Si hay una propiedad con ese nombre y que no es una función, usar `?.` aún levantará una excepción {{JSxRef("TypeError")}} (`x.y is not a function`).
+> [!NOTE]
+> Si hay una propiedad con ese nombre y que no es una función, usar `?.` aún levantará una excepción {{JSxRef("TypeError")}} (`x.y is not a function`).
 
 #### Manejo de callbacks opcionales o manejadores de eventos
 
diff --git a/files/es/web/javascript/reference/operators/this/index.md b/files/es/web/javascript/reference/operators/this/index.md
index d2804751e43166..e1933bbe1a5338 100644
--- a/files/es/web/javascript/reference/operators/this/index.md
+++ b/files/es/web/javascript/reference/operators/this/index.md
@@ -37,7 +37,8 @@ this.a = 37;
 console.log(window.a); // 37
 ```
 
-> **Nota:** Puedes obtener el objeto global usando la propieda global `globalThis`, no importa el contexto donde se ejecute esta propiedad, siempre hará referencia al objeto global.
+> [!NOTE]
+> Puedes obtener el objeto global usando la propieda global `globalThis`, no importa el contexto donde se ejecute esta propiedad, siempre hará referencia al objeto global.
 
 ## Contexto de la función
 
@@ -66,7 +67,8 @@ f2() === undefined;
 
 En modo estricto, el valor de **this** se mantiene en lo que está establecida al entrar en el contexto de ejecución. Si no está definido, permanece undefined. También se puede ajustar a cualquier valor, tales como **null** o **42** o "**Yo no soy this**".
 
-> **Nota:** En el segundo ejemplo, **`this`** debería ser {{jsxref("undefined")}}, porque `f2` fue llamado sin proporcionar ninguna base (ej. `window.f2()`). Esta característica no fue implementada en algunos navegadores cuando se comenzó a dar soporte al [modo estricto](/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto). Como resultado, retorna incorrectamente el objeto window.
+> [!NOTE]
+> En el segundo ejemplo, **`this`** debería ser {{jsxref("undefined")}}, porque `f2` fue llamado sin proporcionar ninguna base (ej. `window.f2()`). Esta característica no fue implementada en algunos navegadores cuando se comenzó a dar soporte al [modo estricto](/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto). Como resultado, retorna incorrectamente el objeto window.
 
 Como un método de un objeto
 
diff --git a/files/es/web/javascript/reference/operators/yield/index.md b/files/es/web/javascript/reference/operators/yield/index.md
index 80c7ca7fd0c202..c49c8eb8964384 100644
--- a/files/es/web/javascript/reference/operators/yield/index.md
+++ b/files/es/web/javascript/reference/operators/yield/index.md
@@ -39,7 +39,8 @@ Si se pasa un valor opcional al método `next()` del generador, ese valor se con
 
 Entre la ruta del código del generador, sus operadores `yield` y la capacidad de especificar un nuevo valor inicial pasándolo a {{jsxref("Generator.prototype.next()")}}, los generadores ofrecen enorme poder y control.
 
-> **Advertencia:** Desafortunadamente, `next()` es asimétrico, pero eso no se puede evitar: siempre envía un valor al `yield` actualmente suspendido, pero devuelve el operando del siguiente `yield`.
+> [!WARNING]
+> Desafortunadamente, `next()` es asimétrico, pero eso no se puede evitar: siempre envía un valor al `yield` actualmente suspendido, pero devuelve el operando del siguiente `yield`.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md b/files/es/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
index 80b4b6d4b12df3..b6cf9020d1fd50 100644
--- a/files/es/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
+++ b/files/es/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
@@ -9,9 +9,11 @@ Los **escapes de propiedad Unicode** en las {{JSxRef("../Guide/Regular_Expressio
 
 {{EmbedInteractiveExample("pages/js/regexp-unicode-property-escapes.html", "taller")}}
 
-> **Nota:** Para que funcionen los escapes de propiedad Unicode, una expresión regular debe utilizar {{JSxRef("../Guide/Regular_Expressions", "la bandera <code>u</code>", "#Busqueda_avanzada_con_banderas")}} que indica que una cadena se debe considerar como una serie de puntos de código Unicode. Consulta también {{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}.
+> [!NOTE]
+> Para que funcionen los escapes de propiedad Unicode, una expresión regular debe utilizar {{JSxRef("../Guide/Regular_Expressions", "la bandera <code>u</code>", "#Busqueda_avanzada_con_banderas")}} que indica que una cadena se debe considerar como una serie de puntos de código Unicode. Consulta también {{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}.
 
-> **Nota:** Algunas propiedades Unicode abarcan muchos más caracteres que algunas {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}} (como `\w` que coincide solo con letras latinas, desde `a` hasta `z`) pero esta última es más compatible con los navegadores (a partir de enero de 2020).
+> [!NOTE]
+> Algunas propiedades Unicode abarcan muchos más caracteres que algunas {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}} (como `\w` que coincide solo con letras latinas, desde `a` hasta `z`) pero esta última es más compatible con los navegadores (a partir de enero de 2020).
 
 ## Sintaxis
 
@@ -43,7 +45,8 @@ Consulta también [PropertyValueAliases.txt](https://www.unicode.org/Public/UCD/
 - ValorDePropiedadUnicode
   - : Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor `Decimal_Number` para la propiedad `General_Category` se puede escribir `Nd`, `digit`, o `Decimal_Number`). Para la mayoría de los valores, la parte `NombreDePropiedadUnicode` y el signo igual se pueden omitir. Si se especifica un `NombreDePropiedadUnicode`, el valor debe corresponder al tipo de propiedad proporcionado.
 
-> **Nota:** Debido a que hay muchas propiedades y valores disponibles, no los describiremos exhaustivamente aquí, en su lugar proporcionaremos varios ejemplos.
+> [!NOTE]
+> Debido a que hay muchas propiedades y valores disponibles, no los describiremos exhaustivamente aquí, en su lugar proporcionaremos varios ejemplos.
 
 ## Justificación
 
diff --git a/files/es/web/javascript/reference/statements/async_function/index.md b/files/es/web/javascript/reference/statements/async_function/index.md
index d79b89167f32ab..221f5f38c41963 100644
--- a/files/es/web/javascript/reference/statements/async_function/index.md
+++ b/files/es/web/javascript/reference/statements/async_function/index.md
@@ -46,7 +46,8 @@ Cuando se llama a una función `async`, esta devuelve un elemento {{jsxref("Prom
 
 Una función `async` puede contener una expresión {{jsxref("Operators/await", "await")}}, la cual pausa la ejecución de la función asíncrona y espera la resolución de la `Promise` pasada y, a continuación, reanuda la ejecución de la función `async` y devuelve el valor resuelto.
 
-> **Nota:** La finalidad de las funciones `async`/`await` es simplificar el comportamiento del uso síncrono de promesas y realizar algún comportamiento específico en un grupo de `Promises`. Del mismo modo que las `Promises` son semejantes a las devoluciones de llamadas estructuradas, `async`/`await` se asemejan a una combinación de generadores y promesas.
+> [!NOTE]
+> La finalidad de las funciones `async`/`await` es simplificar el comportamiento del uso síncrono de promesas y realizar algún comportamiento específico en un grupo de `Promises`. Del mismo modo que las `Promises` son semejantes a las devoluciones de llamadas estructuradas, `async`/`await` se asemejan a una combinación de generadores y promesas.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/statements/const/index.md b/files/es/web/javascript/reference/statements/const/index.md
index afbe34b4ba14d7..597aff8798f6e6 100644
--- a/files/es/web/javascript/reference/statements/const/index.md
+++ b/files/es/web/javascript/reference/statements/const/index.md
@@ -9,7 +9,8 @@ slug: Web/JavaScript/Reference/Statements/const
 
 Las variables constantes presentan un **ámbito de bloque** ([block](/es/docs/Web/JavaScript/Referencia/Sentencias/block) scope) tal y como lo hacen las variables definidas usando la instrucción [let](/es/docs/Web/JavaScript/Referencia/Sentencias/let), con la particularidad de que el valor de una constante no puede cambiarse a través de la reasignación. Las constantes **no se pueden redeclarar**.
 
-> **Advertencia:** La **redeclaración** de la misma variable bajo un mismo [ámbito léxico](https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments) terminaría en un error de tipo [`SyntaxError`](/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError). Esto también es **extensible** si usamos `var` dentro del ámbito léxico. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible solo con `var.`
+> [!WARNING]
+> La **redeclaración** de la misma variable bajo un mismo [ámbito léxico](https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments) terminaría en un error de tipo [`SyntaxError`](/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError). Esto también es **extensible** si usamos `var` dentro del ámbito léxico. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible solo con `var.`
 
 ## Sintaxis
 
@@ -47,7 +48,8 @@ document.writeln("a es " + a + ".");
 
 Las siguientes instrucciones demuestra como se comporta `const`
 
-> **Advertencia:** Las instrucciones deberán ser ordenadas correctamente para conseguir la salida esperada a los ejemplos
+> [!WARNING]
+> Las instrucciones deberán ser ordenadas correctamente para conseguir la salida esperada a los ejemplos
 
 ```js
 // NOTA: Las constantes pueden ser declaradas en mayusculas o minusculaas,
diff --git a/files/es/web/javascript/reference/statements/import/index.md b/files/es/web/javascript/reference/statements/import/index.md
index 01c612c4a7a003..abd8462a5deeb0 100644
--- a/files/es/web/javascript/reference/statements/import/index.md
+++ b/files/es/web/javascript/reference/statements/import/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Statements/import
 
 La sentencia **`import`** se usa para importar funciones que han sido exportadas desde un módulo externo.
 
-> **Nota:** Por el momento, esta característica sólo está [comenzando a ser implementada](https://jakearchibald.com/2017/es-modules-in-browsers/) de forma nativa en los navegadores. Está implementada en muchos transpiladores, tales como Typescript y [Babel](http://babeljs.io/), y en empaquetadores como [Rollup](https://github.com/rollup/rollup) y [Webpack](https://webpack.js.org/).
+> [!NOTE]
+> Por el momento, esta característica sólo está [comenzando a ser implementada](https://jakearchibald.com/2017/es-modules-in-browsers/) de forma nativa en los navegadores. Está implementada en muchos transpiladores, tales como Typescript y [Babel](http://babeljs.io/), y en empaquetadores como [Rollup](https://github.com/rollup/rollup) y [Webpack](https://webpack.js.org/).
 
 ## Sintaxis
 
diff --git a/files/es/web/javascript/reference/statements/let/index.md b/files/es/web/javascript/reference/statements/let/index.md
index 2893698d0c26e3..ae7d5697752da7 100644
--- a/files/es/web/javascript/reference/statements/let/index.md
+++ b/files/es/web/javascript/reference/statements/let/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Statements/let
 
 La instrucción **`let`** declara una variable de alcance local con ámbito de bloque([block](/es/docs/Web/JavaScript/Referencia/Sentencias/block)scope), la cual, opcionalmente, puede ser inicializada con algún valor.
 
-> **Advertencia:** La palabra reservada **`let`** en Mozilla Firefox 44 y anteriores, está solo disponible para bloques de código en HTML que esten envueltos en una etiqueta `<script type="application/javascript;version=1.7">` (o de una version mayor). Las etiquetas [XUL](/es/docs/XUL) tienen acceso a esas características sin necesidad de dicho bloque. Es necesario tomar en cuenta que esta es una característica ~~no estándar~~ **que ya se ha hecho actualmente estándar**, ~~esto~~ **pero** puede crear conflictos con otros navegadores, **ya que fue una característica no estándar.**
+> [!WARNING]
+> La palabra reservada **`let`** en Mozilla Firefox 44 y anteriores, está solo disponible para bloques de código en HTML que esten envueltos en una etiqueta `<script type="application/javascript;version=1.7">` (o de una version mayor). Las etiquetas [XUL](/es/docs/XUL) tienen acceso a esas características sin necesidad de dicho bloque. Es necesario tomar en cuenta que esta es una característica ~~no estándar~~ **que ya se ha hecho actualmente estándar**, ~~esto~~ **pero** puede crear conflictos con otros navegadores, **ya que fue una característica no estándar.**
 
 ## Sintaxis
 
@@ -198,7 +199,8 @@ console.log(i); // ReferenceError: i is not defined
 
 ### Bloques `let`
 
-> **Advertencia:** La **sintaxis del bloque y expresion** `let` es no-estandar y sera deshechado en un futuro. ¡No deben ser usados! ver [error 1023609](https://bugzilla.mozilla.org/show_bug.cgi?id=1023609) y [error 1167029](https://bugzilla.mozilla.org/show_bug.cgi?id=1167029) para mas detalles.
+> [!WARNING]
+> La **sintaxis del bloque y expresion** `let` es no-estandar y sera deshechado en un futuro. ¡No deben ser usados! ver [error 1023609](https://bugzilla.mozilla.org/show_bug.cgi?id=1023609) y [error 1167029](https://bugzilla.mozilla.org/show_bug.cgi?id=1167029) para mas detalles.
 
 Un **bloque `let`** provee una manera de asociar valores con variables dentro del alcance de un bloque sin afectar el valor de variables con nombre similar fuera del bloque.
 
diff --git a/files/es/web/javascript/reference/statements/return/index.md b/files/es/web/javascript/reference/statements/return/index.md
index 07059dc1fb3784..6fbd2c058793e3 100644
--- a/files/es/web/javascript/reference/statements/return/index.md
+++ b/files/es/web/javascript/reference/statements/return/index.md
@@ -47,7 +47,8 @@ return; a + b;
 
 La consola le advertirá "código inalcanzable después de la declaración de retorno".
 
-> **Nota:** A partir de Gecko 40 (Firefox 40 / Thunderbird 40 / SeaMonkey 2.37), una advertencia es mostrada en la consola si se encuentra código inalcanzable despues de una instrucción return.
+> [!NOTE]
+> A partir de Gecko 40 (Firefox 40 / Thunderbird 40 / SeaMonkey 2.37), una advertencia es mostrada en la consola si se encuentra código inalcanzable despues de una instrucción return.
 
 ## Ejemplos
 
diff --git a/files/es/web/javascript/reference/strict_mode/index.md b/files/es/web/javascript/reference/strict_mode/index.md
index f6053a257cd96a..47c704e4ec8a6b 100644
--- a/files/es/web/javascript/reference/strict_mode/index.md
+++ b/files/es/web/javascript/reference/strict_mode/index.md
@@ -116,7 +116,8 @@ delete Object.prototype; // lanza un TypeError
 
 En cuarto lugar, la versión de modo estricto anterior a Gecko 34 requiere que todas las propiedades nombradas en un objeto sean únicas. En código normal se pueden duplicar nombres, siendo el último el que determina el valor de la propiedad. Pero como el último es el único que hace algo, la duplicidad da origen a errores si el código se modifica para cambiar el valor de la propiedad. Duplicar nombres de propiedades es un error de sintaxis en modo estricto.
 
-> **Nota:** Este ya no es el caso en ECMAScript 2015 ([error 1041128](https://bugzilla.mozilla.org/show_bug.cgi?id=1041128)).
+> [!NOTE]
+> Este ya no es el caso en ECMAScript 2015 ([error 1041128](https://bugzilla.mozilla.org/show_bug.cgi?id=1041128)).
 
 ```js
 "use strict";
diff --git a/files/es/web/manifest/index.md b/files/es/web/manifest/index.md
index f52f6a58ddaa3f..c3beddc5f9e64d 100644
--- a/files/es/web/manifest/index.md
+++ b/files/es/web/manifest/index.md
@@ -69,7 +69,8 @@ Define el color de fondo deseado para la aplicación. Este valor repite lo defin
 "background_color": "red"
 ```
 
-> **Nota:** El `background_color` únicamente está destinado a mejorar la experiencia de usuario mientras se carga la aplicación y no se debe usar como color de fondo cuando la hoja de estilos de la aplicación esté disponible.
+> [!NOTE]
+> El `background_color` únicamente está destinado a mejorar la experiencia de usuario mientras se carga la aplicación y no se debe usar como color de fondo cuando la hoja de estilos de la aplicación esté disponible.
 
 ### `description`
 
@@ -95,7 +96,8 @@ Puede tener uno de los siguentes valores:
 - `rtl` (derecha a izquierda)
 - `auto` (indica al navegador que use el algoritmo Unicode bidirectional para hacer una estimación apropiada sobre la dirección del texto.)
 
-> **Nota:** Cuando se omite este valor, por defecto es `auto`.
+> [!NOTE]
+> Cuando se omite este valor, por defecto es `auto`.
 
 ### `display`
 
@@ -114,7 +116,8 @@ Los valores aceptados son:
 | `minimal-ui` | La aplicación se mostrará como una app independiente, pero tendrá un mínimo de elementos de interfaz para controlar la navegación. Estos elementos podrán variar según navegador.                                                                                                                                     | `browser`             |
 | `browser`    | La aplicación se abrirá en una pestaña nueva del navegador o una ventana nueva, dependiendo del navegador y plataforma. Esto es por defecto.                                                                                                                                                                          | (None)                |
 
-> **Nota:** Puedes aplicar selectivamente CSS a tu app basandote en el modo de visualización, usando la característica [display-mode](/docs/Web/CSS/@media/display-mode). Se puede utilizar para proporcionar una experiencia de usuario consistente al lanzar un site desde una URL y lanzarlo desde un icono de escritorio.
+> [!NOTE]
+> Puedes aplicar selectivamente CSS a tu app basandote en el modo de visualización, usando la característica [display-mode](/docs/Web/CSS/@media/display-mode). Se puede utilizar para proporcionar una experiencia de usuario consistente al lanzar un site desde una URL y lanzarlo desde un icono de escritorio.
 
 ### `icons`
 
@@ -193,7 +196,8 @@ Especifica un valor booleano que sugiere que el agente de usuario le indique al
 "prefer_related_applications": false
 ```
 
-> **Nota:** Si se omite, el valor por defecto es `false`.
+> [!NOTE]
+> Si se omite, el valor por defecto es `false`.
 
 ### `related_applications`
 
diff --git a/files/es/web/opensearch/index.md b/files/es/web/opensearch/index.md
index 6a157a30c76c70..160937b08d7af3 100644
--- a/files/es/web/opensearch/index.md
+++ b/files/es/web/opensearch/index.md
@@ -60,7 +60,8 @@ El fichero XML que describe un motor de búsqueda es bastante sencillo, tal y co
 
   - : Describe la(s) URL(s) a emplear para la búsqueda. El atributo `method` indica si se debe emplear una petición `GET` o `POST` para obtener los resultados.
 
-    > **Nota:** Internet Explorer 7 no admite peticiones `POST`.
+    > [!NOTE]
+    > Internet Explorer 7 no admite peticiones `POST`.
 
     Firefox admite dos tipos de URL en el campo `type`:
 
@@ -77,13 +78,15 @@ El fichero XML que describe un motor de búsqueda es bastante sencillo, tal y co
 
   - : Los parámetros que es necesario suministrar junto con la consulta, en la forma de pares clave/valor. En los valores es posible emplear las plantillas dinámicas presentadas anteriormente; por ejemplo, se puede usar `{searchTerms}` para insertar los términos de búsqueda que el usuario introdujo en la barra de búsquedas.
 
-    > **Nota:** Internet Explorer 7 no admite este elemento.
+    > [!NOTE]
+    > Internet Explorer 7 no admite este elemento.
 
 - **SearchForm**
 
   - : La URL donde se encuentra la página de búsquedas del sitio al que hace referencia el complemento que estamos desarrollando. Esto permite al usuario acceder directamente al sitio web en cuestión.
 
-    > **Nota:** Dado que este elemento es específico de Firefox y no forma parte de la especificación OpenSearch, en el ejemplo anterior, usamos el prefijo "`moz:`" en el espacio de nombres XML para asegurarnos que otros agentes de usuario que no admiten este elemento puedan ignoralo de forma segura.
+    > [!NOTE]
+    > Dado que este elemento es específico de Firefox y no forma parte de la especificación OpenSearch, en el ejemplo anterior, usamos el prefijo "`moz:`" en el espacio de nombres XML para asegurarnos que otros agentes de usuario que no admiten este elemento puedan ignoralo de forma segura.
 
 ## Detección automática de complementos de búsqueda
 
diff --git a/files/es/web/performance/fundamentals/index.md b/files/es/web/performance/fundamentals/index.md
index 6dbc9c4899c6c8..c947938505487d 100644
--- a/files/es/web/performance/fundamentals/index.md
+++ b/files/es/web/performance/fundamentals/index.md
@@ -31,7 +31,8 @@ La velocidad de cuadros es importante como una métrica de "calidad de servicio"
 
 El cerebro entonces infiere que el moviemiento se "actualiza" de manera fluida y continua. (Las luces estroboscópicas son divertidas porque dan la vuelta al revés, lo que confunde al cerebro el cual reacciona generando adrenalina y altos niveles de estrés). En una pantalla de computadora, una mayor tasa de cuadros simplemente hace una imitación más fiel de la realidad.
 
-> **Nota:** Los seres humanos generalmente no pueden percibir diferencias en la frecuencia de cuadros por encima de 60Hz. Es por eso que las pantallas electrónicas más modernas están diseñadas para actualizarse a esa velocidad. Una televisión probablemente se ve entrecortada y poco realista para un colibrí, por ejemplo.
+> [!NOTE]
+> Los seres humanos generalmente no pueden percibir diferencias en la frecuencia de cuadros por encima de 60Hz. Es por eso que las pantallas electrónicas más modernas están diseñadas para actualizarse a esa velocidad. Una televisión probablemente se ve entrecortada y poco realista para un colibrí, por ejemplo.
 
 ### Uso de la memoria
 
@@ -59,7 +60,8 @@ HTML y CSS aumentan en gran medida la productividad, a veces a expensas de la fr
 
 The `canvas` element offers a pixel buffer directly for developers to draw on. This gives developers pixel-level control over rendering and precise control of framerate, but now the developers need to deal with multiple resolutions and orientations, right-to-left languages, and so forth. Developers draw to canvases using either a familiar 2D drawing API, or WebGL, a "close to the metal" binding that mostly follows OpenGL ES 2.0.
 
-> **Nota:** Firefox OS is optimized for apps built with Web technologies: [HTML](/es/docs/Web/HTML), [CSS](/es/docs/Web/CSS), [JavaScript](/es/docs/Web/JavaScript), and so on. Except for a handful of basic system services, all code that runs in Firefox OS comes from Web apps and the Gecko engine. Even the OS window manager is written in HTML, CSS, and JavaScript. Because the core operating system and applications are built with same Web technologies, it's critical how those technologies perform. There's no "escape hatch". This greatly benefits developers because now third-party apps benefit from all the OS's own optimizations. There's no "magic performance sauce" available only to preinstalled code. See [Firefox OS performance testing](/es/Apps/Developing/Performance/Firefox_OS_performance_testing) for more details relevant to Firefox OS.
+> [!NOTE]
+> Firefox OS is optimized for apps built with Web technologies: [HTML](/es/docs/Web/HTML), [CSS](/es/docs/Web/CSS), [JavaScript](/es/docs/Web/JavaScript), and so on. Except for a handful of basic system services, all code that runs in Firefox OS comes from Web apps and the Gecko engine. Even the OS window manager is written in HTML, CSS, and JavaScript. Because the core operating system and applications are built with same Web technologies, it's critical how those technologies perform. There's no "escape hatch". This greatly benefits developers because now third-party apps benefit from all the OS's own optimizations. There's no "magic performance sauce" available only to preinstalled code. See [Firefox OS performance testing](/es/Apps/Developing/Performance/Firefox_OS_performance_testing) for more details relevant to Firefox OS.
 
 ### Gecko rendering
 
@@ -71,7 +73,8 @@ Fully static content is the exception rather than the rule for rich applications
 
 An app's startup performance matters just as much as its runtime performance. Gecko is optimized to load a wide variety of content efficiently: the entire Web! Many years of improvements targeting this content, like parallel HTML parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving Web applications on Firefox.
 
-> **Nota:** See [Firefox OS performance testing](/es/Apps/Developing/Performance/Firefox_OS_performance_testing) for more information about Firefox OS specifics that help to further improve startup performance.
+> [!NOTE]
+> See [Firefox OS performance testing](/es/Apps/Developing/Performance/Firefox_OS_performance_testing) for more information about Firefox OS specifics that help to further improve startup performance.
 
 ## Application performance
 
@@ -103,11 +106,13 @@ The Web platform is highly dynamic. JavaScript is a dynamically-typed language,
 
 Another problem that can delay startup is idle time, caused by waiting for responses to requests (like database loads). To avoid this problem, applications should issue requests as early as possible in startup (this is called "front-loading"). Then when the data is needed later, hopefully it's already available and the application doesn't have to wait.
 
-> **Nota:** For much more information on improving startup performance, read [Optimizing startup performance](/es/Apps/Developing/Performance/Optimizing_startup_performance).
+> [!NOTE]
+> For much more information on improving startup performance, read [Optimizing startup performance](/es/Apps/Developing/Performance/Optimizing_startup_performance).
 
 On the same note, notice that locally-cached, static resources can be loaded much faster than dynamic data fetched over high-latency, low-bandwidth mobile networks. Network requests should never be on the critical path to early application startup. Caching resources locally is also the only way applications can be used offline, and for standard Open Web Apps, at the moment this requires use of HTML5 [AppCache](/es/docs/HTML/Using_the_application_cache).
 
-> **Nota:** Firefox OS allows applications to cache resources by being installed as applications, either being "packaged" in a compressed ZIP file or "hosted" through HTML5 [AppCache](/es/docs/HTML/Using_the_application_cache). How to choose between these options for a particular type of application is beyond the scope of this document, but in general application packages provide optimal load performance; AppCache is slower. Installable apps will hopefully be coming to other platforms soon!
+> [!NOTE]
+> Firefox OS allows applications to cache resources by being installed as applications, either being "packaged" in a compressed ZIP file or "hosted" through HTML5 [AppCache](/es/docs/HTML/Using_the_application_cache). How to choose between these options for a particular type of application is beyond the scope of this document, but in general application packages provide optimal load performance; AppCache is slower. Installable apps will hopefully be coming to other platforms soon!
 
 ### Framerate
 
@@ -132,7 +137,8 @@ Modern CPUs can enter a lower-power mode when mostly idle. Applications that con
 
 When applications are sent to the background, a [`visibilitychange`](/es/docs/Web/Reference/Events/visibilitychange) event is fired on their documents. This event is a developer's friend; applications should listen for it. Applications that drop as many loaded resources as possible when sent to the background use less memory and are less likely discarded, in the case of Firefox OS (see the note below). This in turn means they "start up" faster (since they are already running) and have better UPP.
 
-> **Nota:** As mentioned above, Firefox OS tries to keep as many applications running simultaneously as it can, but does have to discard applications sometimes, usually when the device runs out of memory. To find out more about how Firefox OS manages memory usage and kills apps when out of memory issues are encountered, read [Debugging out of memory errors on Firefox OS](/es/Firefox_OS/Debugging/Debugging_OOMs).
+> [!NOTE]
+> As mentioned above, Firefox OS tries to keep as many applications running simultaneously as it can, but does have to discard applications sometimes, usually when the device runs out of memory. To find out more about how Firefox OS manages memory usage and kills apps when out of memory issues are encountered, read [Debugging out of memory errors on Firefox OS](/es/Firefox_OS/Debugging/Debugging_OOMs).
 
 ### Specific coding tips for application performance
 
@@ -152,7 +158,8 @@ Instead of tweaking absolute positioning and fiddling with all that math yoursel
 
 In addition, transforms give you capabilities you might not otherwise have. Not only can you translate elements in 2D space, but you can transform in three dimensions, skew and rotate, and so forth. Paul Irish has an [in-depth analysis of the benefits of `translate()`](http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/) from a performance point of view. In general, however, you have the same benefits you get from using CSS animations: you use the right tool for the job and leave the optimization to the browser. You also use an easily extensible way of positioning elements — something that needs a lot of extra code if you simulate translation with `top` and `left` positioning. Another bonus is that this is just like working in a `canvas` element.
 
-> **Nota:** You may need to attach a `translateZ(0.1)` transform if you wish to get hardware acceleration on your CSS animations, depending on platform. As noted above, this can improve performance, but can also have memory consumption issues. What you do in this regard is up to you — do some testing and find out what's best for your particular app.
+> [!NOTE]
+> You may need to attach a `translateZ(0.1)` transform if you wish to get hardware acceleration on your CSS animations, depending on platform. As noted above, this can improve performance, but can also have memory consumption issues. What you do in this regard is up to you — do some testing and find out what's best for your particular app.
 
 #### Use `requestAnimationFrame()` instead of `setInterval()`
 
@@ -184,7 +191,8 @@ The [Built-in Gecko Profiler](/es/docs/Performance/Profiling_with_the_Built-in_P
 
 ![A built-in Gecko profiler windows showing a lot of network information.](gecko-profiler.png)
 
-> **Nota:** You can use these tools with the Android browser by running Firefox and enabling [remote debugging](/es/docs/Tools/Remote_Debugging).
+> [!NOTE]
+> You can use these tools with the Android browser by running Firefox and enabling [remote debugging](/es/docs/Tools/Remote_Debugging).
 
 In particular, making dozens or hundreds of network requests takes longer in mobile browsers. Rendering large images and CSS gradients can also take longer. Simply downloading large files can take longer, even over a fast network, because mobile hardware is sometimes too slow to take advantage of all the available bandwidth. For useful general tips on mobile Web performance, have a look at Maximiliano Firtman's [Mobile Web High Performance](http://www.slideshare.net/firt/mobile-web-high-performance) talk.
 
diff --git a/files/es/web/progressive_web_apps/guides/installing/index.md b/files/es/web/progressive_web_apps/guides/installing/index.md
index 4eb30b68ffbcea..a82e8b09a89148 100644
--- a/files/es/web/progressive_web_apps/guides/installing/index.md
+++ b/files/es/web/progressive_web_apps/guides/installing/index.md
@@ -49,7 +49,8 @@ _Si tienes Google Chrome para Android disponible, la experiencia es ligeramente
 
 ![Captura de pantalla de un pasquín de Chrome que solicita permiso para instalar la aplicación de muestra Foxes](chrome-a2hs-banner.png)
 
-> **Nota:** Puedes obtener más información sobre los mensajes de instalación de Chrome en el artículo [Mensajes de instalación de aplicaciones web](https://developers.google.com/web/fundamentals/app-install-banners/).
+> [!NOTE]
+> Puedes obtener más información sobre los mensajes de instalación de Chrome en el artículo [Mensajes de instalación de aplicaciones web](https://developers.google.com/web/fundamentals/app-install-banners/).
 
 _Si eliges no agregarlo a tu pantalla de inicio en este momento, los puedes hacer más tarde usando el ícono "Agregar a la pantalla de inicio" en el menú principal de Chrome._
 
diff --git a/files/es/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md b/files/es/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
index 848932af3adf7b..ae7c40c6ed9568 100644
--- a/files/es/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
+++ b/files/es/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
@@ -18,7 +18,8 @@ Para que el sitio web sea instalable, necesitas lo siguiente:
 - Un icono para representar la aplicación en el dispositivo.
 - Un [servicio worker](/es/docs/Web/API/Service_Worker_API) registrado para permitir que la aplicación funcione sin conexión (actualmente, esto solo lo requiere Chrome para Android)
 
-> **Nota:** Actualmente, solo los navegadores basados en Chromium tal como Chrome, Edge y Samsung Internet requieren el servicio _worker_. Si desarrollas tu aplicación con Firefox, ten en cuenta que necesitarás un servicio _worker_ para que sea compatible con los navegadores basados en Chromium.
+> [!NOTE]
+> Actualmente, solo los navegadores basados en Chromium tal como Chrome, Edge y Samsung Internet requieren el servicio _worker_. Si desarrollas tu aplicación con Firefox, ten en cuenta que necesitarás un servicio _worker_ para que sea compatible con los navegadores basados en Chromium.
 
 ### El archivo de manifiesto
 
@@ -32,7 +33,8 @@ El archivo `js13kpwa.webmanifest` de la aplicación web [js13kPWA](https://mdn.g
 <link rel="manifest" href="js13kpwa.webmanifest" />
 ```
 
-> **Nota:** Hay algunos tipos comunes de archivos de manifiesto que se han utilizado en el pasado: `manifest.webapp` era popular en los manifiestos de aplicaciones de Firefox OS, y muchos usan `manifest.json` para manifestar aplicaciones web ya que el contenido está organizado en una estructura JSON. Sin embargo, el formato de archivo `.webmanifest` se menciona explícitamente en la [especificación del manifiesto W3C](https://w3c.github.io/manifest/), por lo tanto ese es el que usaremos aquí.
+> [!NOTE]
+> Hay algunos tipos comunes de archivos de manifiesto que se han utilizado en el pasado: `manifest.webapp` era popular en los manifiestos de aplicaciones de Firefox OS, y muchos usan `manifest.json` para manifestar aplicaciones web ya que el contenido está organizado en una estructura JSON. Sin embargo, el formato de archivo `.webmanifest` se menciona explícitamente en la [especificación del manifiesto W3C](https://w3c.github.io/manifest/), por lo tanto ese es el que usaremos aquí.
 
 El contenido del archivo se ve así:
 
diff --git a/files/es/web/security/practical_implementation_guides/index.md b/files/es/web/security/practical_implementation_guides/index.md
index fe3263fe74a35d..47c8f30f52b76c 100644
--- a/files/es/web/security/practical_implementation_guides/index.md
+++ b/files/es/web/security/practical_implementation_guides/index.md
@@ -10,7 +10,8 @@ l10n:
 
 Hay una serie de cosas que puede hacer para ayudar a proteger su sitio. Este artículo ofrece una variedad de sugerencias, así como enlaces a otros artículos que brindan información más útil.
 
-> **Nota:** Este artículo es un trabajo en progreso, y ni está completo ni seguir sus sugerencias garantiza que su sitio sea completamente seguro.
+> [!NOTE]
+> Este artículo es un trabajo en progreso, y ni está completo ni seguir sus sugerencias garantiza que su sitio sea completamente seguro.
 
 ## Seguridad de la información del usuario
 
diff --git a/files/es/web/security/same-origin_policy/index.md b/files/es/web/security/same-origin_policy/index.md
index c5ea9ca1a6a351..7e2db59766ff21 100644
--- a/files/es/web/security/same-origin_policy/index.md
+++ b/files/es/web/security/same-origin_policy/index.md
@@ -25,7 +25,8 @@ Ver también [definición de origen para `file:` URLs](/es/docs/Same-origin_poli
 
 Los scripts ejecutados desde páginas con una URL `about:blank` o `javascript:` heredan el origen del documento que contiene esa URL, puesto que esos tipos de URLs no contienen información sobre un servidor de origen.
 
-> **Nota:** Por ejemplo, `about:blank` a menudo se usa como URL de nuevas ventanas popup en las que el script padre escribe contenido (por ejemplo mediante el mecanismo {{domxref("Window.open()")}}). Si este popup además contiene JavaScript, ese escript heredará el mismo origen que el script que lo ha creado.
+> [!NOTE]
+> Por ejemplo, `about:blank` a menudo se usa como URL de nuevas ventanas popup en las que el script padre escribe contenido (por ejemplo mediante el mecanismo {{domxref("Window.open()")}}). Si este popup además contiene JavaScript, ese escript heredará el mismo origen que el script que lo ha creado.
 
 > **Advertencia:** `data:` URLs obtienen un nuevo, vacío, contexto de seguridad.
 
@@ -50,7 +51,8 @@ Tras su ejecución, la página puede pasar la comprobación de origen con `http:
 
 El número de puerto es guardado de forma separada por el navegador. Cualquier llamada al setter, incluyendo `document.domain = document.domain` causa que el número del puerto sea sobrescrito con `null`. Por lo tanto **no se puede** hacer que `company.com:8080` hable con `company.com` solo asignando `document.domain = "company.com"` en el primero. Tiene que ser asignado en ambos para que los números de puerto sean `null`.
 
-> **Nota:** Cuando se use `document.domain` para permitir a un subdominio acceder a su padre de forma segura, necesitas asignar `document.domain` al mismo valor tanto en el padre como en el subdominio. Esto es necesario incluso si solo se asigna el dominio padre a su valor original. Un fallo al hacer esto puede resultar en errores de permisos.
+> [!NOTE]
+> Cuando se use `document.domain` para permitir a un subdominio acceder a su padre de forma segura, necesitas asignar `document.domain` al mismo valor tanto en el padre como en el subdominio. Esto es necesario incluso si solo se asigna el dominio padre a su valor original. Un fallo al hacer esto puede resultar en errores de permisos.
 
 ## Acceso de red de origen cruzado
 
diff --git a/files/es/web/svg/applying_svg_effects_to_html_content/index.md b/files/es/web/svg/applying_svg_effects_to_html_content/index.md
index 777b458a90ad59..4de100b805d158 100644
--- a/files/es/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/es/web/svg/applying_svg_effects_to_html_content/index.md
@@ -11,7 +11,8 @@ Firefox 3.5 introduce soporte para usar SVG como un componente de estilos CSS pa
 
 Puede especificar SVG en los estilos, ya sea dentro del mismo documento, o dentro de una hoja de estilos externa.
 
-> **Nota:** Las referencias a SVG en archivos externos deben ser de el mismo origen que el documento de origen.
+> [!NOTE]
+> Las referencias a SVG en archivos externos deben ser de el mismo origen que el documento de origen.
 
 ## Uso integrado SVG
 
@@ -35,7 +36,8 @@ Hay tres estilos que se pueden aplicar: puede usar la máscara, el recorrido de
 
 Por ejemplo, puede establecer un estilo CSS que proporciona una máscara de degradado para el contenido HTML con código SVG similar a lo siguiente en su documento HTML:
 
-> **Nota:** El espaciamiento de nombre no es válida en HTML 5, dejar fuera de la "svg:" en las etiquetas de los documentos en formato HTML.
+> [!NOTE]
+> El espaciamiento de nombre no es válida en HTML 5, dejar fuera de la "svg:" en las etiquetas de los documentos en formato HTML.
 
 ```xml
   <style>.target { mask: url(#m1); }</style>
diff --git a/files/es/web/svg/attribute/index.md b/files/es/web/svg/attribute/index.md
index c0d8956ac0d671..3892ff5a09d2d3 100644
--- a/files/es/web/svg/attribute/index.md
+++ b/files/es/web/svg/attribute/index.md
@@ -395,7 +395,8 @@ Los elementos SVG pueden ser modificados usando atributos, especificando cómo d
 
 ### Atributos presentacionales
 
-> **Nota:** todos los atributos presentacionales de SVG pueden ser usados como propiedades CSS.
+> [!NOTE]
+> Todos los atributos presentacionales de SVG pueden ser usados como propiedades CSS.
 
 {{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}
 
diff --git a/files/es/web/svg/element/a/index.md b/files/es/web/svg/element/a/index.md
index cd7263dda6d97e..2dea54ce75d390 100644
--- a/files/es/web/svg/element/a/index.md
+++ b/files/es/web/svg/element/a/index.md
@@ -60,7 +60,8 @@ svgns|a:active {
 
 {{EmbedLiveSample('Exemple', 100, 100)}}
 
-> **Advertencia:** Puesto que este elemento comparte su nombre de etiqueta con el [elemento `<a>` de HTML](/es/docs/Web/HTML/Element/a), la selección de "`a`" con CSS o [`querySelector`](/es/docs/Web/API/Document/querySelector) puede aplicarse al tipo incorrecto de elemento. Pruebe [la regla `@namespace`](/es/docs/Web/CSS/@namespace) para distinguir entre los dos.
+> [!WARNING]
+> Puesto que este elemento comparte su nombre de etiqueta con el [elemento `<a>` de HTML](/es/docs/Web/HTML/Element/a), la selección de "`a`" con CSS o [`querySelector`](/es/docs/Web/API/Document/querySelector) puede aplicarse al tipo incorrecto de elemento. Pruebe [la regla `@namespace`](/es/docs/Web/CSS/@namespace) para distinguir entre los dos.
 
 ## Atributos
 
diff --git a/files/es/web/svg/element/index.md b/files/es/web/svg/element/index.md
index b107f520a56df6..7fa00070811f55 100644
--- a/files/es/web/svg/element/index.md
+++ b/files/es/web/svg/element/index.md
@@ -206,7 +206,8 @@ Los dibujos e imágenes SVG son creados utilizando una amplia variedad de elemen
 
 ## Elementos obsoletos y deprecated
 
-> **Advertencia:** Estos son elementos antiguos de SVG que están en desuso y no deben utilizarse. **Nunca debe usarlos en nuevos proyectos, y debe reemplazarlos en proyectos antiguos tan pronto como sea posible.** Se enumeran aquí sólo con fines informativos.
+> [!WARNING]
+> Estos son elementos antiguos de SVG que están en desuso y no deben utilizarse. **Nunca debe usarlos en nuevos proyectos, y debe reemplazarlos en proyectos antiguos tan pronto como sea posible.** Se enumeran aquí sólo con fines informativos.
 
 ### A
 
diff --git a/files/es/web/xml/parsing_and_serializing_xml/index.md b/files/es/web/xml/parsing_and_serializing_xml/index.md
index 6e6b424d015ff7..013e91e38c7956 100644
--- a/files/es/web/xml/parsing_and_serializing_xml/index.md
+++ b/files/es/web/xml/parsing_and_serializing_xml/index.md
@@ -90,7 +90,8 @@ var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();
 
 Indents consist of two spaces. To write a more efficient version or customize the indent string, use {{ domxref("treeWalker") }}.
 
-> **Nota:** When using the E4X `toXMLString` method, your **CDATA elements will be lost**, and only the containing text will remain. So if you have CDATA elements in your XML, using the preceding method might not be useful.
+> [!NOTE]
+> When using the E4X `toXMLString` method, your **CDATA elements will be lost**, and only the containing text will remain. So if you have CDATA elements in your XML, using the preceding method might not be useful.
 
 ```xml
 <content><![CDATA[This is the content]]></content>
diff --git a/files/es/web/xml/xml_introduction/index.md b/files/es/web/xml/xml_introduction/index.md
index 6fee2134e32bd5..f6710ceb346640 100644
--- a/files/es/web/xml/xml_introduction/index.md
+++ b/files/es/web/xml/xml_introduction/index.md
@@ -37,7 +37,8 @@ Ahora veamos una versión correcta del mismo documento:
 
 Para ser válido, un documento XML necesita cumplir ciertas reglas de semántica que son generalmente definidas en un esquema XML o en una **[Definición de Tipo de Documento](/es/docs/Glossary/DTD)** (DTD). Un documento que contiene una etiqueta no definida es inválido. Por ejemplo, si nunca definimos la etiqueta `<warning>`, el documento anterior no sería válido.
 
-> **Nota:** La mayoría de los navegadores ofrecen un depurador que puede identificar documentos XML mal formados.
+> [!NOTE]
+> La mayoría de los navegadores ofrecen un depurador que puede identificar documentos XML mal formados.
 
 ## Entidades
 
diff --git a/files/es/web/xslt/index.md b/files/es/web/xslt/index.md
index 31cefc6426568f..973c14947f1a5d 100644
--- a/files/es/web/xslt/index.md
+++ b/files/es/web/xslt/index.md
@@ -49,4 +49,5 @@ Actualmente, XSLT es muy usado en la edición web, generando páginas HTML o XHT
 - Temas relacionados
   - : [XML](/es/XML), [XPath](/es/XPath), [XSL](/es/XSL).
 
-> **Nota:** Esta descripción de XSLT ha sido obtenida del [Artículo sobre XSLT en la Wikipedia (es)](http://es.wikipedia.org/wiki/XSLT).
+> [!NOTE]
+> Esta descripción de XSLT ha sido obtenida del [Artículo sobre XSLT en la Wikipedia (es)](http://es.wikipedia.org/wiki/XSLT).
diff --git a/files/es/webassembly/concepts/index.md b/files/es/webassembly/concepts/index.md
index a0578c6fd1ee9b..5c7adbf23aa372 100644
--- a/files/es/webassembly/concepts/index.md
+++ b/files/es/webassembly/concepts/index.md
@@ -24,7 +24,8 @@ WebAssembly ha sido creado por como un estándar abierto dentro de [W3C WebAssem
 - Mantenerse seguro — WebAssembly se especifica para ser ejecutado de manera segura en un entorno de ejecución de espacio aislado (sandbox).Como otros códigos web, reforzará el propio origen del navegador así como sus políticas de seguridad.
 - No quebrantar a la red — WebAssembly está diseñado de tal forma que se lleve bien con otras tecnologías web y mantenga compatibilidad con versiones anteriores.
 
-> **Nota:** WebAssembly tendrá también usos fuera de la red y de los ambientes JavaScript (vea [Incrustaciones no-web](http://webassembly.org/docs/non-web/)).
+> [!NOTE]
+> WebAssembly tendrá también usos fuera de la red y de los ambientes JavaScript (vea [Incrustaciones no-web](http://webassembly.org/docs/non-web/)).
 
 ## ¿Cómo se inserta WebAssembly dentro de la plataforma web?
 
@@ -94,7 +95,8 @@ Resumiendo, el proceso es el que sigue:
 2. Emscripten transforma el resultado de la compilación de clang+LLVM en un binario .wasm.
 3. Por sí mismo, WebAssembly no puede acceder directamente a el DOM; únicamente puede llamar a JavaScript, y pasarle datos enteros o de coma flotante como datos. Luego, para acceder a cualquier API Web, WebAssembly necesita llamar a JavaScript, que entonces hará lla llamada a la API Web. Emscripten por lo tanto crea el documento HTML y el código "pegamento" en JavaScript necesario para conseguir esto.
 
-> **Nota:** There are future plans to [allow WebAssembly to call Web APIs directly](https://github.com/WebAssembly/gc/blob/master/README.md).
+> [!NOTE]
+> There are future plans to [allow WebAssembly to call Web APIs directly](https://github.com/WebAssembly/gc/blob/master/README.md).
 
 The JavaScript glue code is not as simple as you might imagine. For a start, Emscripten implements popular C/C++ libraries like [SDL](https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer), [OpenGL](https://en.wikipedia.org/wiki/OpenGL), [OpenAL](https://en.wikipedia.org/wiki/OpenAL), and parts of [POSIX](https://en.wikipedia.org/wiki/POSIX). These libraries are implemented in terms of Web APIs and thus each one requires some JavaScript glue code to connect WebAssembly to the underlying Web API.
 
diff --git a/files/es/webassembly/javascript_interface/index.md b/files/es/webassembly/javascript_interface/index.md
index 6134035cf8381d..73cf63dc3a366c 100644
--- a/files/es/webassembly/javascript_interface/index.md
+++ b/files/es/webassembly/javascript_interface/index.md
@@ -66,7 +66,8 @@ fetch("simple.wasm")
   .then((result) => result.instance.exports.exported_func());
 ```
 
-> **Nota:** Ver [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) en GitHub ([view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/)) para un ejemplo que hace uso de la función [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1).
+> [!NOTE]
+> Ver [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) en GitHub ([view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/)) para un ejemplo que hace uso de la función [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1).
 
 ## Especificaciones
 
diff --git a/files/es/webassembly/loading_and_running/index.md b/files/es/webassembly/loading_and_running/index.md
index 2d9c99db5e4c32..8dedf298bb5152 100644
--- a/files/es/webassembly/loading_and_running/index.md
+++ b/files/es/webassembly/loading_and_running/index.md
@@ -52,9 +52,11 @@ La función {{jsxref("WebAssembly.instantiate()")}} tiene dos formas de sobrecar
   instance : Instance // Una instancia nueva de WebAssembly.Instance del módulo}
 ```
 
-> **Nota:** Generalmente solo nos preocupamos de la instancia, pero resulta útil tener el módulo en caso de que querramos almacenarlo temporalmente (cache), compartirlo con otro proceso o ventana vía [`postMessage()`](/es/docs/Web/API/MessagePort/postMessage), o simplemente crear mas instancias.
+> [!NOTE]
+> Generalmente solo nos preocupamos de la instancia, pero resulta útil tener el módulo en caso de que querramos almacenarlo temporalmente (cache), compartirlo con otro proceso o ventana vía [`postMessage()`](/es/docs/Web/API/MessagePort/postMessage), o simplemente crear mas instancias.
 
-> **Nota:** La segunda forma de sobrecarga utiliza un objeto del tipo {{jsxref("WebAssembly.Module")}} como argumento y regresa un compromiso directo conteniendo la instancia del objeto como resultado. Vea el [Segundo ejemplo de sobrecarga](/es/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example).
+> [!NOTE]
+> La segunda forma de sobrecarga utiliza un objeto del tipo {{jsxref("WebAssembly.Module")}} como argumento y regresa un compromiso directo conteniendo la instancia del objeto como resultado. Vea el [Segundo ejemplo de sobrecarga](/es/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example).
 
 ### Ejecutando su código WebAssembly
 
@@ -76,7 +78,8 @@ WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject).then(
 );
 ```
 
-> **Nota:** Para mayor información sobre como funciona la exportación de módulos WebAssembly, debes leer [Utilización de la Interfaz (API) de WebAssembly JavaScript](/es/docs/WebAssembly/Using_the_JavaScript_API), y [Entendiendo el formato de texto en WebAssembly](/es/docs/WebAssembly/Understanding_the_text_format).
+> [!NOTE]
+> Para mayor información sobre como funciona la exportación de módulos WebAssembly, debes leer [Utilización de la Interfaz (API) de WebAssembly JavaScript](/es/docs/WebAssembly/Using_the_JavaScript_API), y [Entendiendo el formato de texto en WebAssembly](/es/docs/WebAssembly/Understanding_the_text_format).
 
 ## Utilizando XMLHttpRequest
 
@@ -103,4 +106,5 @@ request.onload = function () {
 };
 ```
 
-> **Nota:** Puede ver un ejemplo de esta acción en [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html).
+> [!NOTE]
+> Puede ver un ejemplo de esta acción en [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html).
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
 
diff --git a/files/fr/mdn/writing_guidelines/howto/document_an_http_header/index.md b/files/fr/mdn/writing_guidelines/howto/document_an_http_header/index.md
index e1934ca4adeb69..c1deba1167bb71 100644
--- a/files/fr/mdn/writing_guidelines/howto/document_an_http_header/index.md
+++ b/files/fr/mdn/writing_guidelines/howto/document_an_http_header/index.md
@@ -11,7 +11,8 @@ La [référence des en-têtes HTTP](/fr/docs/Web/HTTP/Headers) sur MDN Web Docs
 
 Vous devrez avoir des connaissances en [HTTP](/fr/docs/Web/HTTP) ou être prêt à vous familiariser avec ses détails.
 
-> **Note :** La documentation de nouvelles en-têtes HTTP doit d'abord avoir lieu en anglais avant de pouvoir traduire le nouveau contenu en français. L'organisation du contenu de MDN ne permet pas de créer du contenu en français si celui-ci n'existe pas déjà en anglais.
+> [!NOTE]
+> La documentation de nouvelles en-têtes HTTP doit d'abord avoir lieu en anglais avant de pouvoir traduire le nouveau contenu en français. L'organisation du contenu de MDN ne permet pas de créer du contenu en français si celui-ci n'existe pas déjà en anglais.
 
 ## Étape 1 - Déterminer l'en-tête HTTP à documenter
 
diff --git a/files/fr/mdn/writing_guidelines/howto/document_web_errors/index.md b/files/fr/mdn/writing_guidelines/howto/document_web_errors/index.md
index 80b4d7b9cc2f67..b97ef6e16f9fc6 100644
--- a/files/fr/mdn/writing_guidelines/howto/document_web_errors/index.md
+++ b/files/fr/mdn/writing_guidelines/howto/document_web_errors/index.md
@@ -11,7 +11,8 @@ La [référence des erreurs JavaScript](/fr/docs/Web/JavaScript/Reference/Errors
 
 Les erreurs JavaScript contiennent un lien «&nbsp;En savoir plus&nbsp;» qui renvoie à la référence de l'erreur JavaScript contenant des conseils supplémentaires pour résoudre les problèmes. Pour pouvoir documenter ces erreurs, vous devez connaître ou être capable de vous plonger dans le [JavaScript](/fr/docs/Web/JavaScript).
 
-> **Note :** La documentation de nouvelles erreurs doit d'abord avoir lieu en anglais avant de pouvoir traduire le nouveau contenu en français. L'organisation du contenu de MDN ne permet pas de créer du contenu en français si celui-ci n'existe pas déjà en anglais.
+> [!NOTE]
+> La documentation de nouvelles erreurs doit d'abord avoir lieu en anglais avant de pouvoir traduire le nouveau contenu en français. L'organisation du contenu de MDN ne permet pas de créer du contenu en français si celui-ci n'existe pas déjà en anglais.
 
 ## Étape 1 - Déterminer l'erreur à documenter
 
diff --git a/files/fr/mdn/writing_guidelines/howto/images_media/index.md b/files/fr/mdn/writing_guidelines/howto/images_media/index.md
index 766a8c193358db..b0b168645fceff 100644
--- a/files/fr/mdn/writing_guidelines/howto/images_media/index.md
+++ b/files/fr/mdn/writing_guidelines/howto/images_media/index.md
@@ -58,7 +58,8 @@ Prenons un exemple&nbsp;:
 
 Chaque image, `![]` et `<img>`, doit inclure un texte alternatif. Les attributs `alt` doivent être courts et fournir toutes les informations pertinentes que l'image transmet. Lorsque vous écrivez la description de l'image, réfléchissez aux informations précieuses de l'image et à la façon dont vous les transmettriez à quelqu'un qui peut lire le contenu de la page mais ne peut pas charger les images.
 
-> **Note :** Voir [la documentation sur l'attribut `alt` de `<img>` et notamment la façon d'écrire des textes alternatifs pertinents](/fr/docs/Web/HTML/Element/img#écrire_des_descriptions_alternatives_significatives).
+> [!NOTE]
+> Voir [la documentation sur l'attribut `alt` de `<img>` et notamment la façon d'écrire des textes alternatifs pertinents](/fr/docs/Web/HTML/Element/img#écrire_des_descriptions_alternatives_significatives).
 
 Soyez sûr que le texte alternatif de l'image est basé sur son contexte. Si la photo de Fluffy le chien est un avatar à côté d'un avis pour la nourriture pour chien Yuckymeat, `alt="Fluffy"` est approprié. Si la même photo fait partie de la page d'adoption de Fluffy, les informations transmises dans l'image sont pertinentes pour les futurs parents de chiens, telles que `alt="Fluffy, un terrier tricolore à poil très court, avec une balle de tennis dans la bouche."`. Le texte environnant indique probablement la taille et la race de Fluffy, il serait donc redondant de l'inclure. Évitez de décrire l'image avec trop de détails&nbsp;: le futur parent n'a pas besoin de savoir si le chien est à l'intérieur ou à l'extérieur, ou s'il a un collier rouge et une laisse bleue.
 
@@ -102,7 +103,8 @@ Plusieurs arguments s'opposent à l'utilisation de vidéos dans la documentation
 - La vidéo pose des problèmes d'accessibilité&nbsp;: elle est généralement plus coûteuse à produire que le texte, mais surtout à traduire ou à rendre utilisable par les utilisateurs de lecteurs d'écran.
 - Dans le prolongement du dernier point, la vidéo est beaucoup plus difficile à éditer/mettre à jour/maintenir que le contenu textuel.
 
-> **Note :** Il est utile de garder à l'esprit cette problématique, même lorsque vous réalisez des vidéos, afin d'essayer d'en atténuer certains aspects.
+> [!NOTE]
+> Il est utile de garder à l'esprit cette problématique, même lorsque vous réalisez des vidéos, afin d'essayer d'en atténuer certains aspects.
 
 Il existe de nombreux sites populaires qui fournissent de nombreux tutoriels vidéo. MDN n'est pas un site dont la majorité du contenu est de la vidéo, toutefois, il est possible d'intégrer des vidéos dans certains articles MDN selon le contexte.
 
@@ -183,7 +185,8 @@ Planifiez soigneusement les étapes que vous allez enregistrer et pratiquez cett
 
 - Planifiez les niveaux de zoom pour les portions de l'interface utilisateur que vous afficherez. Tout le monde ne pourra pas forcément consulter la vidéo en haute définition. Vous pourrez également zoomer sur certaines parties en post-production mais ça peut être une bonne idée de zoomer dès l'enregistrement.
 
-> **Note :** Ne zoomez pas au point que les éléments d'interfaces soient déformés ou semblent étranges.
+> [!NOTE]
+> Ne zoomez pas au point que les éléments d'interfaces soient déformés ou semblent étranges.
 
 #### Enregistrement
 
@@ -191,7 +194,8 @@ Lorsque vous enregistrez, avancez dans les étapes de façon calme et régulièr
 
 N'oubliez pas de faire une pause d'une ou deux secondes à la fin pour montrer le résultat final de la séquence d'actions.
 
-> **Note :** Si vous utilisez un outil simple comme QuickTime Player ou que vous ne pouvez pas effectuer de post-production, veillez à ce que la fenêtre soit de la bonne taille pour ce que vous voulez montrer.
+> [!NOTE]
+> Si vous utilisez un outil simple comme QuickTime Player ou que vous ne pouvez pas effectuer de post-production, veillez à ce que la fenêtre soit de la bonne taille pour ce que vous voulez montrer.
 
 #### Post-production
 
@@ -210,7 +214,8 @@ Si besoin, redimensionnez la vidéo aux proportions souhaitées.
 
 Actuellement, les vidéos doivent être uploadées sur YouTube afin d'être affichées sur MDN, par exemple sur la chaîne [mozhacks](https://www.youtube.com/user/mozhacks/videos). Demandez à un membre de l'équipe MDN de téléverser la vidéo si vous n'avez pas un meilleur endroit où la stocker.
 
-> **Note :** Marquez la vidéo en «&nbsp;non répertoriée&nbsp;» si celle-ci n'a pas de sens particulier en dehors du contexte de la page MDN.
+> [!NOTE]
+> Marquez la vidéo en «&nbsp;non répertoriée&nbsp;» si celle-ci n'a pas de sens particulier en dehors du contexte de la page MDN.
 
 #### Intégration
 
diff --git a/files/fr/mdn/writing_guidelines/howto/index.md b/files/fr/mdn/writing_guidelines/howto/index.md
index f44d13530e09ef..69b881860754cc 100644
--- a/files/fr/mdn/writing_guidelines/howto/index.md
+++ b/files/fr/mdn/writing_guidelines/howto/index.md
@@ -9,6 +9,7 @@ l10n:
 
 Cette section porte sur les règles d'écriture sur MDN Web Docs et contient toutes les informations détaillées pour accomplir des tâches spécifiques lors d'une contribution à MDN Web Docs&nbsp;: comment utiliser Markdown, comment ajouter une entrée au glossaire, comment déplacer ou supprimer des pages, et plus encore. Pour en savoir plus sur _comment contribuer_ (via GitHub), consultez nos [directives de contribution](/fr/docs/MDN/Community/Contributing).
 
-> **Note :** Tout au long de cette section, nous supposons que vous avez lu les directives de contribution, que vous connaissez les dépôts `mdn/content` et `mdn/translated-content`, et que vous savez comment utiliser Git et GitHub.
+> [!NOTE]
+> Tout au long de cette section, nous supposons que vous avez lu les directives de contribution, que vous connaissez les dépôts `mdn/content` et `mdn/translated-content`, et que vous savez comment utiliser Git et GitHub.
 
 {{LandingPageListSubpages}}
diff --git a/files/fr/mdn/writing_guidelines/howto/markdown_in_mdn/index.md b/files/fr/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
index 28b8344da28d8a..4d5e676abb14ff 100644
--- a/files/fr/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
+++ b/files/fr/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
@@ -195,7 +195,8 @@ Le bloc de code peut contenir d'autres éléments de type bloc.
 #### Note
 
 ```md
-> **Note :** Voici comment écrire une note.
+> [!NOTE]
+> Voici comment écrire une note.
 >
 > Elle peut avoir plusieurs lignes.
 ```
@@ -211,14 +212,16 @@ Cela produira le HTML suivant&nbsp;:
 
 Ce HTML sera affiché comme une boîte mise en valeur&nbsp;:
 
-> **Note :** Voici comment écrire une note.
+> [!NOTE]
+> Voici comment écrire une note.
 >
 > Elle peut avoir plusieurs lignes.
 
 #### Avertissements
 
 ```md
-> **Attention :** Voici comment écrire un avertissement.
+> [!WARNING]
+> Voici comment écrire un avertissement.
 >
 > Il peut avoir plusieurs paragraphes.
 ```
@@ -234,7 +237,8 @@ Cela produira le HTML suivant&nbsp;:
 
 Ce HTML sera affiché comme une boîte mise en valeur&nbsp;:
 
-> **Attention :** Voici comment écrire un avertissement.
+> [!WARNING]
+> Voici comment écrire un avertissement.
 >
 > Il peut avoir plusieurs paragraphes.
 
@@ -257,7 +261,7 @@ Cela produira le HTML suivant&nbsp;:
 
 Ce HTML sera affiché comme une remarque&nbsp;:
 
-> **Remarque :**
+> [!CALLOUT]
 >
 > **Voici comment écrire un encadré.**
 >
@@ -272,7 +276,8 @@ Les locales sont stockées dans [Yari (dépôt GitHub en anglais)](https://githu
 Par exemple, si nous voulons utiliser «&nbsp;Warnung&nbsp;» pour «&nbsp;Warning&nbsp;» en allemand, alors dans la page allemande nous écririons&nbsp;:
 
 ```md
-> **Warnung:** So schreibt man eine Warnung.
+> [!WARNING]
+> So schreibt man eine Warnung.
 ```
 
 Et cela produira&nbsp;:
@@ -288,7 +293,8 @@ Et cela produira&nbsp;:
 Cet exemple contient un bloc de code.
 
 ````md
-> **Note :** Voici comment écrire une note.
+> [!NOTE]
+> Voici comment écrire une note.
 >
 > Elle peut contenir des blocs de code.
 >
@@ -312,7 +318,8 @@ Cela produira le HTML suivant&nbsp;:
 
 Ce HTML sera affiché comme un bloc de code&nbsp;:
 
-> **Note :** Voici comment écrire une note.
+> [!NOTE]
+> Voici comment écrire une note.
 >
 > Elle peut contenir des blocs de code.
 >
diff --git a/files/fr/mdn/writing_guidelines/howto/research_technology/index.md b/files/fr/mdn/writing_guidelines/howto/research_technology/index.md
index 7be220f6cd35fb..8845dfc999604f 100644
--- a/files/fr/mdn/writing_guidelines/howto/research_technology/index.md
+++ b/files/fr/mdn/writing_guidelines/howto/research_technology/index.md
@@ -44,7 +44,8 @@ De plus, nous disposons du guide sur [les informations contenues dans un fichier
 
 Vous reviendrez souvent à l'écriture d'exemples de code ou à la création de démonstrations au cours de la documentation d'une technologie, mais il est très utile de commencer par se familiariser avec le fonctionnement de celle-ci. C'est un exercice très utile, car il vous permet de bien comprendre les cas d'utilisation (_pourquoi_ une développeuse ou un développeur utiliserait cette technologie) et vous aide à créer des exemples de code en même temps.
 
-> **Note :** Si la spécification a été récemment mise à jour et que, par exemple, une méthode est désormais définie différemment, mais que l'ancienne méthode fonctionne toujours dans les navigateurs, vous devrez souvent documenter les deux au même endroit afin que l'ancienne et la nouvelle méthode soient couvertes. Si vous avez besoin d'aide, référez-vous aux démonstrations que vous avez trouvées ou demandez à un contact de l'équipe qui implémente la technologie.
+> [!NOTE]
+> Si la spécification a été récemment mise à jour et que, par exemple, une méthode est désormais définie différemment, mais que l'ancienne méthode fonctionne toujours dans les navigateurs, vous devrez souvent documenter les deux au même endroit afin que l'ancienne et la nouvelle méthode soient couvertes. Si vous avez besoin d'aide, référez-vous aux démonstrations que vous avez trouvées ou demandez à un contact de l'équipe qui implémente la technologie.
 
 ## Créer la liste des pages à écrire ou à mettre à jour
 
diff --git a/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md b/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
index ee6a475ab6ac0a..018c227f238439 100644
--- a/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
+++ b/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
@@ -13,7 +13,8 @@ Le glossaire ne sera potentiellement jamais complet, car le Web est en perpétue
 
 Contribuer au glossaire est une façon simple de rendre le Web plus compréhensible pour tout le monde. Il n'est pas nécessaire d'avoir des compétences techniques approfondies pour le faire. Les entrées du glossaire sont conçues pour être simples et concises.
 
-> **Note :** La suite de cet article explique comment créer une entrée du glossaire. Toutefois, la structure du contenu de MDN utilise le contenu anglophone comme référence. Aussi, toute page devra d'abord être créée en anglais avant d'être localisée en français. Vous pouvez également aider à la traduction du glossaire en français, voir [Localiser MDN](/fr/docs/MDN/Community/Contributing/Translated_content).
+> [!NOTE]
+> La suite de cet article explique comment créer une entrée du glossaire. Toutefois, la structure du contenu de MDN utilise le contenu anglophone comme référence. Aussi, toute page devra d'abord être créée en anglais avant d'être localisée en français. Vous pouvez également aider à la traduction du glossaire en français, voir [Localiser MDN](/fr/docs/MDN/Community/Contributing/Translated_content).
 
 ## Comment rédiger une entrée
 
@@ -25,7 +26,8 @@ Si vous avez une idée pour une nouvelle entrée, [créez une nouvelle page](htt
 
 Pour toute page du glossaire, le premier paragraphe consiste en une description simple et concise du terme. Idéalement, ce paragraphe ne devrait pas dépasser deux phrases. Assurez-vous que toute personne qui lit cette description peut immédiatement comprendre le terme qui est défini.
 
-> **Note :** Veillez à ne pas copier-coller de définitions ou de contenus provenant d'autres pages sur Internet, notamment depuis Wikipédia (les versions de sa licence sont plus restreintes et incompatibles avec celle de MDN). Le contenu de votre entrée de glossaire doit être original.
+> [!NOTE]
+> Veillez à ne pas copier-coller de définitions ou de contenus provenant d'autres pages sur Internet, notamment depuis Wikipédia (les versions de sa licence sont plus restreintes et incompatibles avec celle de MDN). Le contenu de votre entrée de glossaire doit être original.
 
 #### Rédiger une bonne entrée dans le glossaire
 
diff --git a/files/fr/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md b/files/fr/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md
index 9ce576b7c52477..6698892260ba25 100644
--- a/files/fr/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md
+++ b/files/fr/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md
@@ -13,7 +13,8 @@ Voir la page [Autres macros](/fr/docs/MDN/Structures/Macros/Other) pour plus d'i
 
 MDN fournit plusieurs macros pour former des liens entre les pages de référence, le glossaire, etc.
 
-> **Attention :** Toutes les macros de lien devraient être remplacées dans le contenu en français par des liens écrit en Markdown. En effet, on souhaite réduire l'utilisation des macros «&nbsp;simples&nbsp;» qui peuvent être facilement remplacées par du HTML/Markdown.
+> [!WARNING]
+> Toutes les macros de lien devraient être remplacées dans le contenu en français par des liens écrit en Markdown. En effet, on souhaite réduire l'utilisation des macros «&nbsp;simples&nbsp;» qui peuvent être facilement remplacées par du HTML/Markdown.
 
 ### Liens vers le glossaire
 
@@ -22,7 +23,8 @@ La macro [`Glossary`](https://github.com/mdn/yari/blob/main/kumascript/macros/Gl
 1. Le nom du terme (par exemple `"HTML"`)&nbsp;: `\{{Glossary("HTML")}}`
 2. Un paramètre optionnel indiquant le texte à afficher à la place du terme&nbsp;: `\{{Glossary("CSS", "Cascading Style Sheets")}}`
 
-> **Attention :** Pour remplacer cette macro, on écrira plutôt&nbsp;: `[le texte à afficher](/fr/docs/Glossary/MonTerme)`.
+> [!WARNING]
+> Pour remplacer cette macro, on écrira plutôt&nbsp;: `[le texte à afficher](/fr/docs/Glossary/MonTerme)`.
 
 ### Liens vers des pages de référence
 
diff --git a/files/fr/mdn/writing_guidelines/what_we_write/index.md b/files/fr/mdn/writing_guidelines/what_we_write/index.md
index 9d669e0783a846..bc0cd2e285d2eb 100644
--- a/files/fr/mdn/writing_guidelines/what_we_write/index.md
+++ b/files/fr/mdn/writing_guidelines/what_we_write/index.md
@@ -58,7 +58,8 @@ Les sujets sur lesquels nous nous concentrons avant tout sont les technologies w
 
 Nous documentons également d'autres sujets comme [SVG](/fr/docs/Web/SVG), [XML](/fr/docs/Web/XML), [WebAssembly](/fr/docs/WebAssembly), [l'accessibilité](/fr/docs/Learn/Accessibility). De plus, nous écrivons [des guides d'apprentissage](/fr/docs/Learn) pour ces technologies et disposons également [d'un glossaire](/fr/docs/Glossary).
 
-> **Note :** Les technologies côté serveur ont, la plupart du temps, leur propre documentation et MDN n'a pas pour but de maintenir une autre version. Toutefois, [il existe certaines exceptions](/fr/docs/Learn/Server-side).
+> [!NOTE]
+> Les technologies côté serveur ont, la plupart du temps, leur propre documentation et MDN n'a pas pour but de maintenir une autre version. Toutefois, [il existe certaines exceptions](/fr/docs/Learn/Server-side).
 
 Le contenu présent sur MDN doit être pertinent pour la section dans laquelle il est situé. On attend des personnes qui contribuent à ce qu'elles suivent [les règles d'écritures sur MDN](/fr/docs/MDN/Writing_guidelines) tant pour la forme, les exemples de code que pour d'autres sujets.
 
diff --git a/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md b/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
index 26ccd4198e9210..720dda1d682b74 100644
--- a/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
+++ b/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
@@ -28,7 +28,8 @@ Les directives suivantes couvrent la manière d'écrire du HTML pour les exemple
 
 ## Doctype et méta-données
 
-> **Note :** Les directives de cette section ne s'appliquent que lorsque vous devez montrer un document HTML complet. La plupart du temps, vous n'aurez pas besoin de le faire ; un extrait est généralement suffisant pour démontrer une fonctionnalité. Lorsque vous utilisez la macro [EmbedLiveSample](/fr/docs/MDN/Structures/Code_examples#traditional_live_samples), il suffit d'inclure l'extrait HTML ; il sera automatiquement inséré dans un document HTML complet lors de son affichage.
+> [!NOTE]
+> Les directives de cette section ne s'appliquent que lorsque vous devez montrer un document HTML complet. La plupart du temps, vous n'aurez pas besoin de le faire ; un extrait est généralement suffisant pour démontrer une fonctionnalité. Lorsque vous utilisez la macro [EmbedLiveSample](/fr/docs/MDN/Structures/Code_examples#traditional_live_samples), il suffit d'inclure l'extrait HTML ; il sera automatiquement inséré dans un document HTML complet lors de son affichage.
 
 ### Doctype
 
diff --git a/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md b/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
index 05b5973c86302e..a396498105fc35 100644
--- a/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
+++ b/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
@@ -133,7 +133,8 @@ Pour un usage général\*, vous pouvez utiliser les fonctionnalités ES6 courant
 
 Cependant, nous ne recommandons pas encore l'utilisation générale des nouvelles fonctionnalités ES telles que [async](/fr/docs/Web/JavaScript/Reference/Statements/async_function)/[await](/fr/docs/Web/JavaScript/Reference/Operators/await), les virgules de fin sur les listes d'arguments, etc. Nous préférerions que vous ne les utilisiez pas, sauf si cela est strictement nécessaire, et si vous les utilisez, incluez une explication dans votre exemple pour dire ce qu'ils font, avec un lien vers le matériel de référence approprié.
 
-> **Note :** Par "usage général", nous entendons la rédaction d'exemples généraux. Les pages de référence couvrant des fonctionnalités spécifiques de l'ES moderne doivent évidemment utiliser les fonctionnalités qu'elles documentent !
+> [!NOTE]
+> Par "usage général", nous entendons la rédaction d'exemples généraux. Les pages de référence couvrant des fonctionnalités spécifiques de l'ES moderne doivent évidemment utiliser les fonctionnalités qu'elles documentent !
 
 ## Variables
 
@@ -157,7 +158,8 @@ let thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;
 let s = d / t;
 ```
 
-> **Note :** The only place where it is OK to not use human-readable semantic names is where a very common recognized convention exists, such as using `i`, `j`, etc. for loop iterators.
+> [!NOTE]
+> The only place where it is OK to not use human-readable semantic names is where a very common recognized convention exists, such as using `i`, `j`, etc. for loop iterators.
 
 ### Déclaration des variables
 
@@ -377,7 +379,8 @@ function notVeryObviousName() {
 }
 ```
 
-> **Note :** Le seul endroit où il est acceptable de ne pas utiliser des noms sémantiques lisibles par l'homme est lorsqu'une convention reconnue très courante existe, comme l'utilisation de `i`, `j`, etc. pour les itérateurs de boucle.
+> [!NOTE]
+> Le seul endroit où il est acceptable de ne pas utiliser des noms sémantiques lisibles par l'homme est lorsqu'une convention reconnue très courante existe, comme l'utilisation de `i`, `j`, etc. pour les itérateurs de boucle.
 
 ### Définition des fonctions
 
diff --git a/files/fr/mdn/writing_guidelines/writing_style_guide/index.md b/files/fr/mdn/writing_guidelines/writing_style_guide/index.md
index 6ef97a777e8cef..1d9ecf69e06c6d 100644
--- a/files/fr/mdn/writing_guidelines/writing_style_guide/index.md
+++ b/files/fr/mdn/writing_guidelines/writing_style_guide/index.md
@@ -54,7 +54,8 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser
 
 ### Abréviations
 
-> **Note :** les abréviations sont à utiliser à bon escient et il faudra bien connaître leur sens (notamment pour les abrévations latines) afin de les utiliser correctement. Il faut être conscient que leur usage peut être source de confusion pour les lectrices et lecteurs qui pourraient ne pas y être habitués.
+> [!NOTE]
+> Les abréviations sont à utiliser à bon escient et il faudra bien connaître leur sens (notamment pour les abrévations latines) afin de les utiliser correctement. Il faut être conscient que leur usage peut être source de confusion pour les lectrices et lecteurs qui pourraient ne pas y être habitués.
 
 #### Dans les notes et parenthèses
 
diff --git a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
index 9e7e4e8c018477..9a8555f36cdff0 100644
--- a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
@@ -75,7 +75,8 @@ Au lieu de spécifier des scripts d'arrière-plan, vous pouvez spécifier une pa
 
 Les scripts d'arrière-plan s'exécutent dans le contexte de pages spéciales appelées pages d'arrière-plan. Cela leur donne une [`fenêtre`](/fr/docs/Web/API/Window) globale, ainsi que toutes les API DOM standard fournies par cet objet.
 
-> **Attention :** Dans Firefox, les pages d'arrière-plan ne supportent pas l'utilisation de [`alert()`](/fr/docs/Web/API/Window/alert), [`confirm()`](/fr/docs/Web/API/Window/confirm), ou [`prompt()`](/fr/docs/Web/API/Window/prompt).
+> [!WARNING]
+> Dans Firefox, les pages d'arrière-plan ne supportent pas l'utilisation de [`alert()`](/fr/docs/Web/API/Window/alert), [`confirm()`](/fr/docs/Web/API/Window/confirm), ou [`prompt()`](/fr/docs/Web/API/Window/prompt).
 
 #### APIs des WebExtensions
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
index 24754ad5cbdc2d..acce3f8b37362a 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
@@ -38,7 +38,7 @@ clearAlarms.then(onClearedAll);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md
index 4cd6d254b1b5b5..a08d58f3d630b3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md
@@ -75,7 +75,7 @@ browser.alarms.create("my-periodic-alarm", {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md
index 966b12ad3405c2..91468feeea0401 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/get/index.md
@@ -43,7 +43,7 @@ getAlarm.then(gotAlarm);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md
index 76819032daab61..ff4ba0f23bd3ee 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/getall/index.md
@@ -42,7 +42,7 @@ getAlarms.then(gotAll);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md
index 76d7ff939b4f70..58c357ff826841 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/index.md
@@ -38,7 +38,7 @@ Pour pouvoir utiliser cette API, vous devez disposer de la [permission](/fr/Add-
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
index cd46caa2b6962e..28d64e25559fd7 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
@@ -53,7 +53,7 @@ browser.alarms.onAlarm.addListener(handleAlarm);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.alarms`](https://developer.chrome.com/extensions/alarms).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
index 84f2d93d33740c..9f9337e96ef065 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
@@ -38,7 +38,7 @@ Un {{jsxref("object")}} avec les propriétés suivantes :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
index 8c1de8b6583e4a..f533a629cb4ba9 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
@@ -17,7 +17,7 @@ Un type **`bookmarks.BookmarkTreeNodeUnmodifiable`** est utilisé pour indiquer
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md
index 04ae3f193be566..04f009323390a0 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/create
 
 Crée un signet ou un dossier en tant qu'enfant de {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} avec `parentId` spécifié. Pour créer un dossier, omettez ou laissez vide le paramètre {{WebExtAPIRef("bookmarks.CreateDetails", "CreateDetails", "url")}}.
 
-> **Attention :** Si votre extension tente de créer un nouveau signet dans le nœud racine de l'arborescence du signet, une erreur est générée: "_La racine du signet ne peut pas être modifiée_" et le signet ne sera pas créé.
+> [!WARNING]
+> Si votre extension tente de créer un nouveau signet dans le nœud racine de l'arborescence du signet, une erreur est générée: "_La racine du signet ne peut pas être modifiée_" et le signet ne sera pas créé.
 
 C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise).
 
@@ -51,7 +52,7 @@ createBookmark.then(onCreated);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
index e16e985560838a..aaa311f4490b08 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
@@ -28,7 +28,7 @@ Un {{jsxref("object")}} contenant une combinaison des champs suivants :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md
index 6bb0397fd2d9a4..bf884367d9e157 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md
@@ -49,7 +49,7 @@ gettingBookmarks.then(onFulfilled, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
index 22e8797090978a..96c57b3535eb74 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
@@ -51,7 +51,7 @@ gettingChildren.then(onFulfilled, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
index 3291ad697f9c3e..585c8cc13b63e9 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
@@ -51,7 +51,7 @@ gettingRecent.then(onFulfilled, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
index db0a2c114b81f5..85df1e67b816cb 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
@@ -71,7 +71,7 @@ gettingSubTree.then(logSubTree, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
index 8ed2a8ec301eb8..067d1e9aa19c1c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
@@ -67,7 +67,7 @@ gettingTree.then(logTree, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md
index f56b204b4bda15..c722d5f5dc70d3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md
@@ -70,7 +70,7 @@ Les extensions ne peuvent pas créer, modifier ou supprimer des signets dans le
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
index fa4dbed40f5925..c43da6e79ee0f3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/move
 
 La méthode **`bookmarks.move()`** déplace le {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} à la destination spécifiée dans l'arborescence des signets. Cela vous permet de déplacer un signet vers un nouveau dossier et / ou une position dans le dossier.
 
-> **Attention :** Si votre extension tente de déplacer un signet dans le nœud racine de l'arborescence de signets, l'appel déclenche une erreur avec le message suivant: "_La racine du signet ne peut pas être modifiée_" et le déplacement ne sera pas terminé.
+> [!WARNING]
+> Si votre extension tente de déplacer un signet dans le nœud racine de l'arborescence de signets, l'appel déclenche une erreur avec le message suivant: "_La racine du signet ne peut pas être modifiée_" et le déplacement ne sera pas terminé.
 
 C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise).
 
@@ -62,7 +63,7 @@ movingBookmark.then(onMoved, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
index 05ef369593c672..82f661a99c490a 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
@@ -43,7 +43,8 @@ Les événements ont trois fonctions :
     - `changeInfo`
       - : [`object`](#changeInfo). Objet contenant deux propriétés : `title`, une chaîne contenant le titre de l'élément et `url`, une chaîne contenant l'URL de l'élément. Si l'élément est un dossier, l'`url` est omise.
 
-> **Note :** Plusieurs événements peuvent se produire lorsqu'un signet change, et cet objet changeInfo peut contenir uniquement les données qui ont changé, plutôt que toutes les données du signet. En d'autres termes, si l'`url` d'un signet change, le changeInfo ne peut contenir que les nouvelles informations de l'`url`.
+> [!NOTE]
+> Plusieurs événements peuvent se produire lorsqu'un signet change, et cet objet changeInfo peut contenir uniquement les données qui ont changé, plutôt que toutes les données du signet. En d'autres termes, si l'`url` d'un signet change, le changeInfo ne peut contenir que les nouvelles informations de l'`url`.
 
 ## Exemples
 
@@ -67,7 +68,7 @@ browser.browserAction.onClicked.addListener(handleClick);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
index f7bf36b171cacf..6b431446aaf3ed 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
@@ -68,7 +68,7 @@ browser.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md
index a611eb05e0c94b..efbdfa92610327 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md
@@ -57,7 +57,7 @@ browser.bookmarks.onCreated.addListener(handleCreated);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md
index fb19837e036fae..696cf5d77456f9 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md
@@ -58,7 +58,7 @@ browser.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
index 648f4707433519..5d274bcb80d826 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
@@ -58,7 +58,7 @@ browser.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
index e5dd0c6d0107fe..e993c9693a4c09 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
@@ -77,7 +77,7 @@ browser.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md
index 517b43282f741c..12e80182a1c5b3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md
@@ -73,7 +73,7 @@ browser.browserAction.onClicked.addListener(handleClick);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
index ab7b10bbc24771..abcaf1303465c6 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/remove
 
 La méthode **`bookmarks.remove()`** supprime un seul signet ou un dossier de signets vide.
 
-> **Attention :** Si votre extension tente de supprimer un signet du nœud racine de l'arborescence de signets, l'appel déclenche une erreur avec le message suivant: "_La racine du signet ne peut pas être modifiée_" et le signet ne sera pas supprimé.
+> [!WARNING]
+> Si votre extension tente de supprimer un signet du nœud racine de l'arborescence de signets, l'appel déclenche une erreur avec le message suivant: "_La racine du signet ne peut pas être modifiée_" et le signet ne sera pas supprimé.
 
 C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise).
 
@@ -51,7 +52,7 @@ removingBookmark.then(onRemoved, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
index e1e2509b9e135b..e340c962121d74 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/removeTree
 
 La méthode **`bookmarks.removeTree()`** supprime récursivement un dossier de signets et tout son contenu.
 
-> **Attention :** Si votre extension tente de supprimer une arborescence de signets du nœud racine de cette dernière, l'appel déclenche une erreur avec le message suivant: "La racine de signet ne peut pas être modifiée" et le signet ne sera pas supprimé.
+> [!WARNING]
+> Si votre extension tente de supprimer une arborescence de signets du nœud racine de cette dernière, l'appel déclenche une erreur avec le message suivant: "La racine de signet ne peut pas être modifiée" et le signet ne sera pas supprimé.
 
 C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise).
 
@@ -58,7 +59,7 @@ searchingBookmarks.then(removeMDN, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
index 0bf695b8cd5a5b..67821e0f67da51 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
@@ -89,7 +89,7 @@ browser.browserAction.onClicked.addListener(checkActiveTab);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
index ca7f3a8ba8b6e6..2741645f4681b3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/update
 
 **`bookmarks.update()`** met à jour le titre et / ou l'URL d'un signet ou le nom d'un dossier de signets.
 
-> **Attention :** Si votre extension tente de mettre à jour un signet dans le nœud racine de l'arborescence de signets, l'appel déclenche une erreur avec le message suivant: "La racine du signet ne peut pas être modifiée" et le signet ne sera pas mis à jour.
+> [!WARNING]
+> Si votre extension tente de mettre à jour un signet dans le nœud racine de l'arborescence de signets, l'appel déclenche une erreur avec le message suivant: "La racine du signet ne peut pas être modifiée" et le signet ne sera pas mis à jour.
 
 C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise).
 
@@ -72,7 +73,7 @@ searching.then(updateFolders, onRejected);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
index 603ea8f07b6e79..0b5f12836bdf6e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
@@ -22,7 +22,7 @@ Par exemple , le rouge opaque est `[255, 0, 0, 255]`.
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/disable/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
index 212d7dbd92f7f2..f5e0e01b92c49b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
@@ -46,7 +46,7 @@ browser.browserAction.onClicked.addListener((tab) => {
 });
 ```
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/enable/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/enable/index.md
index db1dd67536a028..fe07c4861eb6cd 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/enable/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/enable/index.md
@@ -40,7 +40,7 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md
index 7f157c2f435fe8..88d917954a3778 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md
@@ -59,7 +59,7 @@ browser.browserAction.getBadgeBackgroundColor({}).then(onGot, onFailure);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetext/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetext/index.md
index b4ea853bc95663..2b26226d8733de 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetext/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetext/index.md
@@ -56,7 +56,7 @@ gettingBadgeText.then(gotBadgeText);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetextcolor/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetextcolor/index.md
index f90c3eeeb4fb65..85427b40de9035 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetextcolor/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgetextcolor/index.md
@@ -63,7 +63,7 @@ browser.browserAction.getBadgeTextColor({}).then(onGot, onFailure);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md
index 1ab18edb824c3a..7282f56be83292 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md
@@ -56,7 +56,7 @@ gettingPopup.then(gotPopup);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md
index 26077b9369af56..5239e44e3064cd 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md
@@ -64,7 +64,7 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md
index e33c216ecc2ab4..cfafee19e5e19c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md
@@ -17,7 +17,7 @@ Un objet [`ImageData`](/fr/docs/Web/API/ImageData).
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md
index 2b18a3700401c0..cdac60dc36a2c4 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md
@@ -71,7 +71,7 @@ Quand l'API `browserAction`, vous pouvez :
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
index 45cf1c2632983d..46273cd95e99ec 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
@@ -56,7 +56,7 @@ browser.browserAction.onClicked.addListener((tab) => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md
index 09d089c6974baa..d8420e81b27384 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md
@@ -76,7 +76,7 @@ browser.browserAction.onClicked.addListener((tab) => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetext/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetext/index.md
index e0bd7561f1b82e..8391528fa91c79 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetext/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetext/index.md
@@ -65,7 +65,7 @@ browser.browserAction.onClicked.addListener(increment);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md
index 56e8acd8985c15..88c12842e8cdd5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md
@@ -72,7 +72,7 @@ browser.browserAction.onClicked.addListener((tab) => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md
index 0bb2c6915c275e..2b6e2287caa8c2 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md
@@ -148,7 +148,7 @@ browser.browserAction.onClicked.addListener((tab) => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md
index cd1b27700da7d0..da50de4ed5b3ea 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md
@@ -96,7 +96,7 @@ browser.contextMenus.onClicked.addListener(function (info, tab) {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md
index 2594c2be4c9f03..11753003b6aaf3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md
@@ -68,7 +68,7 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction). Cette documentation est dérivée de [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md
index 30a9204849df76..fe4164f7cc9421 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md
@@ -47,7 +47,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md
index 938ac4ad1f2c92..460dcbbcb16ec5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md
@@ -65,7 +65,7 @@ Pour utiliser cette API, vous devez disposer de l'[API permission](/fr/Add-ons/W
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md
index 2885c2957ef57d..b8eaedccd97a34 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md
@@ -37,7 +37,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md
index 6180a0654c5893..4398b4ee259288 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md
@@ -79,7 +79,7 @@ browser.browsingData
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
index 76ee7133c5c148..b0559ebdd51d52 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
@@ -50,7 +50,7 @@ browser.browsingData.removeCache({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md
index 889f9e7fdc7ca8..6c06d5cbde9374 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md
@@ -61,7 +61,7 @@ browser.browsingData
 
 Supprime tous les cookies :
 
-> **Attention :**
+> [!WARNING]
 >
 > L'utilisation de l'API pour supprimer tous les cookies effacera simultanément tous les objets de stockage locaux (y compris ceux des autres extensions).
 >
@@ -81,7 +81,7 @@ browser.browsingData.removeCookies({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removedownloads/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removedownloads/index.md
index ae3c3e559e064f..bd7f85038aa65e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removedownloads/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removedownloads/index.md
@@ -75,7 +75,7 @@ browser.browsingData.removeDownloads({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeformdata/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeformdata/index.md
index 38aa9b8460d60f..785c9fe5d7e43d 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeformdata/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeformdata/index.md
@@ -74,7 +74,7 @@ browser.browsingData.removeFormData({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md
index b2984c2fb2888e..cc39273be12d06 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md
@@ -75,7 +75,7 @@ browser.browsingData.removeHistory({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removelocalstorage/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removelocalstorage/index.md
index 010f7dbf228dba..3b4d62c64b5713 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removelocalstorage/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removelocalstorage/index.md
@@ -53,7 +53,7 @@ browser.browsingData.removeLocalStorage({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removepasswords/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removepasswords/index.md
index 8d7ac6c7ec0ee8..e9ad3d3a963f6c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removepasswords/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removepasswords/index.md
@@ -75,7 +75,7 @@ browser.browsingData.removePasswords({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md
index 2172468dd0c2f0..140317177707dd 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md
@@ -75,7 +75,7 @@ browser.browsingData.removePluginData({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md
index 5c6578d2d82cb3..12f8fc618842cb 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md
@@ -60,7 +60,7 @@ browser.browsingData.settings().then(onGotSettings, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/captiveportal/canonicalurl/index.md b/files/fr/mozilla/add-ons/webextensions/api/captiveportal/canonicalurl/index.md
index 4ab8b66cf0e57f..b0600ae13341eb 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/captiveportal/canonicalurl/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/captiveportal/canonicalurl/index.md
@@ -13,7 +13,7 @@ Renvoyer l'URL canonique de la page de détection du portail des prisonniers. En
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#property-TAB_ID_NONE) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/clipboard/index.md b/files/fr/mozilla/add-ons/webextensions/api/clipboard/index.md
index e431c8adeb2d48..84ae2da54916be 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/clipboard/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/clipboard/index.md
@@ -26,6 +26,6 @@ Pour utiliser cette API, vous devez avoir la [permission](/fr/Add-ons/WebExtensi
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.clipboard`](https://developer.chrome.com/apps/clipboard).
diff --git a/files/fr/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md b/files/fr/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md
index 3ac358e9eb850c..5d86f02a124c7d 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md
@@ -65,6 +65,6 @@ fetch(browser.runtime.getURL("image.png"))
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.clipboard`](https://developer.chrome.com/apps/clipboard).
diff --git a/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md b/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md
index 9b1123f3d3bb93..ab0be8a2347c5e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md
@@ -26,6 +26,6 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.commands`](https://developer.chrome.com/extensions/commands).
diff --git a/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md
index 729dd2bd496561..2afe344e2b51e5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md
@@ -44,7 +44,7 @@ getCommands.then(logCommands);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.commands`](https://developer.chrome.com/extensions/commands).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/commands/index.md b/files/fr/mozilla/add-ons/webextensions/api/commands/index.md
index 634cd860758980..796d955994d3ea 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/commands/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/commands/index.md
@@ -30,7 +30,7 @@ slug: Mozilla/Add-ons/WebExtensions/API/commands
 
 {{Compat}} {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.commands`](https://developer.chrome.com/extensions/commands).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md b/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md
index 63fb97b2374441..c0d4be0fd90194 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md
@@ -64,6 +64,6 @@ browser.commands.onCommand.addListener(function (command) {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.commands`](https://developer.chrome.com/extensions/commands).
diff --git a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md
index 444f3c4b3144dc..e260e057e6b242 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md
@@ -9,7 +9,8 @@ Un `RegisteredContentScript` est renvoyé par un appel à {{WebExtAPIRef("conten
 
 Il définit une seule fonction {{WebExtAPIRef("contentScripts.RegisteredContentScript.unregister()", "unregister()")}}, qui peut être utilisée pour annuler l'enregistrement des scripts de contenu.
 
-> **Note :** Si cet objet est détruit (par exemple parce qu'il est hors de portée), les scripts de contenu seront automatiquement désinscrits. Vous devriez donc garder une référence à cet objet aussi longtemps que vous voulez que les scripts de contenu restent enregistrés.
+> [!NOTE]
+> Si cet objet est détruit (par exemple parce qu'il est hors de portée), les scripts de contenu seront automatiquement désinscrits. Vous devriez donc garder une référence à cet objet aussi longtemps que vous voulez que les scripts de contenu restent enregistrés.
 
 ## Méthodes
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md
index a6477e58514768..dc2f09aac5370b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md
@@ -62,7 +62,7 @@ gettingAll.then(logCookies);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/cookiestore/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/cookiestore/index.md
index 6334ad188ecdd0..3c355be4dea06c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/cookiestore/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/cookiestore/index.md
@@ -52,7 +52,7 @@ browser.cookies.getAllCookieStores().then((stores) => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md
index d8c4a226c89c81..db6936f944f6e1 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md
@@ -70,7 +70,7 @@ getActive.then(getCookie);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md
index 672dbd6ac529e6..7d22b6f98426e7 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md
@@ -67,7 +67,7 @@ gettingAll.then(logCookies);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md
index 6d93ceed2f28f0..f075eaef8e70b0 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md
@@ -46,7 +46,7 @@ Chaque membre du tableau `cookieStores` est un objet {{WebExtAPIRef("cookies.Coo
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md
index fe3a284c951121..29518aa6c6f7d5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md
@@ -102,7 +102,7 @@ Lorsque l'isolation de la première partie est désactivée, le paramètre `firs
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md
index 377a18ed7b0e29..038c6bee0b9e85 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md
@@ -74,7 +74,7 @@ browser.cookies.onChanged.addListener(function (changeInfo) {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md
index b479efa7416b3b..0f5dade84a9058 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md
@@ -46,7 +46,7 @@ browser.cookies.onChanged.addListener(function (changeInfo) {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md
index 3c3e1196feee58..164e26567b3fde 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md
@@ -69,7 +69,7 @@ getActive.then(removeCookie);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md
index 6564c45479487a..697389381a160d 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md
@@ -73,7 +73,7 @@ function setCookie(tabs) {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.cookies`](https://developer.chrome.com/extensions/cookies). Cette documentation est dérivée de [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md
index 19ed13d5584bdb..2730432feab83c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md
@@ -22,7 +22,8 @@ Pour utiliser cette API, [la permission](/fr/docs/Mozilla/Add-ons/WebExtensions/
 
 {{Compat}}
 
-> **Note :** Cette API est basée sur l'API Chromium [`chrome.devtools`](https://developer.chrome.com/docs/extensions/mv2/devtools/).
+> [!NOTE]
+> Cette API est basée sur l'API Chromium [`chrome.devtools`](https://developer.chrome.com/docs/extensions/mv2/devtools/).
 >
 > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
index 166add5500caba..64a0b06c1527da 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
@@ -161,7 +161,7 @@ inspectButton.addEventListener("click", () => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools`](https://developer.chrome.com/extensions/devtools).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
index 7f3045813df950..fad2987b30050c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow
 
 {{AddonSidebar}}
 
-> **Note :** Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les [APIs de devtools de Chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs).
+> [!NOTE]
+> Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les [APIs de devtools de Chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs).
 
 L'API `devtools.inspectedWindow` permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.
 
@@ -29,7 +30,7 @@ Comme toutes les APIs de `devtools`, cette API n'est disponible que pour exécut
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools.inspectedWindow`](https://developer.chrome.com/extensions/devtools_inspectedWindow).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.md
index 60f9547f4a1486..a3cc38afe95c9c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.md
@@ -49,7 +49,7 @@ reloadButton.addEventListener("click", () => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools`](https://developer.chrome.com/extensions/devtools).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md
index 3b26d9442f6e03..3022e1a6c8a3ca 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md
@@ -40,7 +40,7 @@ browser.runtime.onMessage.addListener(handleMessage);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools`](https://developer.chrome.com/extensions/devtools).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.md
index 2f853a155bbcae..99cad4ffbf6d34 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.md
@@ -45,7 +45,7 @@ logRequestsButton.addEventListener("click", logRequests);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools.network`](https://developer.chrome.com/extensions/devtools_network).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md
index ebd644dad5c319..39de4d96ff6d3c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md
@@ -27,7 +27,7 @@ Comme toutes les APIs de devtools, cette API est uniquement disponible pour le c
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools.network`](https://developer.chrome.com/extensions/devtools_network).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md
index 65fd5e38e363f9..f29df731791022 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md
@@ -51,7 +51,7 @@ browser.devtools.network.onNavigated.addListener(handleNavigated);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.devtools`](https://developer.chrome.com/extensions/devtools) de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md
index 6f09b20199278d..e2598aa1609583 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md
@@ -60,7 +60,7 @@ browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.devtools`](https://developer.chrome.com/extensions/devtools) de Chromium.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md
index 5e62c49c704625..4a0506785c00de 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md
@@ -63,7 +63,7 @@ browser.devtools.panels
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools.panels`](https://developer.chrome.com/extensions/devtools_panels).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.md
index eb6fe9f18b10e7..37f99c6f329568 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.md
@@ -13,6 +13,6 @@ Un objet [`ElementsPanel`](/fr/Add-ons/WebExtensions/API/devtools.panels/Element
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.devtools.panels`](https://developer.chrome.com/extensions/devtools_panels).
diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md
index a24c02e34a9fdf..7dbac3737c7a9b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md
@@ -48,7 +48,7 @@ L'API sidebarAction est basée sur l'[API sidebarAction](https://dev.opera.com/e
 
 - [annotate-page](https://github.com/mdn/webextensions-examples/tree/master/annotate-page)
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Opera [`chrome.sidebarAction`](https://dev.opera.com/extensions/sidebar-action-api/).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md
index 20905d8c4e7f62..611c9f00eadf8b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md
@@ -123,6 +123,6 @@ browser.browserAction.onClicked.addListener(toggle);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Opera [`chrome.sidebarAction`](https://dev.opera.com/extensions/sidebar-action-api/).
diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md
index 91ba226c2d1928..a3cb288358e7e6 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md
@@ -80,7 +80,7 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Opera [`chrome.sidebarAction`](https://dev.opera.com/extensions/sidebar-action-api/).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md
index f18cf3ba355834..afb7825538f128 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md
@@ -73,7 +73,7 @@ browser.browserAction.onClicked.addListener(setTitleForTab);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Opera [`chrome.sidebarAction`](https://dev.opera.com/extensions/sidebar-action-api/).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/index.md
index 95203ed49cacf1..ce124a5d06565f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/index.md
@@ -20,7 +20,8 @@ Chaque extension a sa propre zone de stockage, qui peut être divisée entre plu
 
 Bien que cette API soit semblable à {{domxref("Window.localStorage")}} il est conseillé de ne pas utiliser `Window.localStorage` dans le code de l'extension pour stocker ses données. Firefox effacera les données stockées via l'API localStorage par les extensions dans plusieurs scénarios où les utilisateurs effacent leur historique de navigation ou des données pour des raisons de confidentialité, alors que les données sauvées en utilisant l'API [`storage.local`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/storage/local) seront correctement conservées dans ces scénarios.
 
-> **Note :** La zone de stockage n'est pas chiffrée et ne doit pas être utilisée pour stocker des informations confidentielles sur les utilisateurs.
+> [!NOTE]
+> La zone de stockage n'est pas chiffrée et ne doit pas être utilisée pour stocker des informations confidentielles sur les utilisateurs.
 
 ## Types
 
@@ -51,7 +52,7 @@ Bien que cette API soit semblable à {{domxref("Window.localStorage")}} il est c
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md
index ac7e3b0091776a..939f3ea4d7e8d8 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md
@@ -39,7 +39,7 @@ L'objet `local` local implémente les méthodes définies sur le type {{WebExtAP
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/managed/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/managed/index.md
index 2347db8e820904..3665defa7943af 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/managed/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/managed/index.md
@@ -93,7 +93,7 @@ Pour plus d'informations, voir l'article de Chrome pour les zones de stockage [M
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md
index d387038081a1ec..36abe7ecb7e2f0 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md
@@ -71,7 +71,7 @@ browser.storage.onChanged.addListener(logStorageChange);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
index 7ce19f309f1186..79acaa034ab175 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
@@ -46,7 +46,7 @@ clearStorage.then(onCleared, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
index afa2d8ae7ca090..2c678cb06da583 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
@@ -28,7 +28,8 @@ let gettingItem = browser.storage.<storageType>.get(
 
 Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet de `resultat` contenant tous les objets dans les `clefs` trouvées dans la zone de stockage. Si l'opération a échoué, la promesse sera rejetée avec un message d'erreur. Si le stockage géré n'est pas défini, les données `non définies` seront retournées.
 
-> **Attention :** Lorsqu'elle est utilisée dans un script de contenu dans les versions de Firefox antérieures à 52, la promesse retournée par `browser.storage.local.get()` est remplie avec un tableau contenant un objet. L'objet dans le tableau contient les `clefs` trouvées dans la zone de stockage, comme décrit ci-dessus. La promesse est correctement remplie avec un objet lorsqu'il est utilisé dans le contexte d'arrière-plan
+> [!WARNING]
+> Lorsqu'elle est utilisée dans un script de contenu dans les versions de Firefox antérieures à 52, la promesse retournée par `browser.storage.local.get()` est remplie avec un tableau contenant un objet. L'objet dans le tableau contient les `clefs` trouvées dans la zone de stockage, comme décrit ci-dessus. La promesse est correctement remplie avec un objet lorsqu'il est utilisé dans le contexte d'arrière-plan
 > (scripts d'arrière-plan, popups, pages d'options, etc.). Lorsque cette API est utilisée en tant que `chrome.storage.local.get()`, elle transmet correctement un objet à la fonction de rappel.
 
 ## Compatibilité des navigateurs
@@ -134,7 +135,7 @@ chrome.storage.local.get("kitten", (items) => {
 });
 ```
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md
index f808c1e30851a8..30a7affce9b42d 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md
@@ -34,7 +34,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/index.md
index 4fbf967be95504..1ec5e19648252a 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/index.md
@@ -30,7 +30,7 @@ Les valeurs de ce type sont des objets.
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md
index 032e12e11bdd51..eb34fc62aab872 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md
@@ -51,7 +51,7 @@ removeKitten.then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
index e48d4ce0ff52fa..121f59176802de 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
@@ -80,6 +80,6 @@ browser.storage.local.get("monster").then(gotMonster, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagechange/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagechange/index.md
index ee9fcde22d145f..9e843857b0dba6 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagechange/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagechange/index.md
@@ -20,7 +20,7 @@ Les objets `StorageChange` contiennent les propriétés suivantes :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage). Cette documentation est dérivée de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md
index 972770962c0d68..6649d11609a5a4 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md
@@ -54,7 +54,7 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
index 93e2ee0401b118..c5c54aa1b0c12e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
@@ -54,7 +54,7 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md
index 61d9ee3d3725df..bae8251e3a73d5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md
@@ -70,7 +70,7 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md
index 6027a5b8dc7fcc..88b89b63085f1e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md
@@ -39,7 +39,8 @@ var creating = browser.tabs.create(
 
       - : `boolean`. Si l'onglet doit devenir l'onglet sélectionné dans la fenêtre. Par défaut à `true`.
 
-        > **Attention :** Cette propriété est obsolète et n'est pas prise en charge dans Firefox. Utilisez `actif` à la place.
+        > [!WARNING]
+        > Cette propriété est obsolète et n'est pas prise en charge dans Firefox. Utilisez `actif` à la place.
 
     - `url`{{optional_inline}}
 
@@ -92,7 +93,7 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
index b3f027ff22c21e..14ada128c6d84b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
@@ -79,7 +79,7 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md
index 6ada553a51b33f..15a7fe14994e92 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md
@@ -70,7 +70,7 @@ discarding.then(onDiscarded, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
index ee29281c710ec6..8ec4fe8a6385f7 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
@@ -35,7 +35,8 @@ let duplicating = browser.tabs.duplicate(
 
 Une [promesse (`Promise`)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) dont la valeur de résolution sera un objet [`tabs.Tab`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab) contenant des détails sur l'onglet dupliqué. L'objet `Tab` contiendra les propriétés `url`, `title` et `favIconUrl` uniquement si l'extension dispose de la [permission `"tabs"`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) ou lorsque [l'hôte correspond à un hôte ciblé dans les permissions](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions). Si une erreur se produit, la promesse sera rejetée avec un message d'erreur.
 
-> **Note :** À partir de Firefox 68, la promesse renvoyée par `browser.tabs.duplicate()` se résout dès que l'onglet a été dupliqué. Auparavant, la promesse n'était résolue qu'une fois l'onglet entièrement chargé.
+> [!NOTE]
+> À partir de Firefox 68, la promesse renvoyée par `browser.tabs.duplicate()` se résout dès que l'onglet a été dupliqué. Auparavant, la promesse n'était résolue qu'une fois l'onglet entièrement chargé.
 
 ## Exemples
 
@@ -72,7 +73,7 @@ querying.then(duplicateFirstTab, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
index 7024195d11ec24..5cf7849982ba20 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
@@ -133,7 +133,7 @@ executing.then(onExecuted, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/get/index.md
index 6c87121a0708d5..d418fe8befad80 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/get/index.md
@@ -49,7 +49,7 @@ browser.tabs.onActivated.addListener(logListener);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/getallinwindow/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/getallinwindow/index.md
index 26cd99a15ae487..78212aaebc3498 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/getallinwindow/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/getallinwindow/index.md
@@ -35,7 +35,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md
index 0b8d68f4f69541..1e83a643eabca6 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md
@@ -48,7 +48,7 @@ gettingCurrent.then(onGot, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/getselected/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/getselected/index.md
index 48f84a5316f192..47645f27ab1b2f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/getselected/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/getselected/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/getSelected
 
 {{AddonSidebar}}
 
-> **Attention :** Cette méthode est dépréciée. utilisez {{WebExtAPIRef("tabs.query", "tabs.query({active: true})")}} à la place.
+> [!WARNING]
+> Cette méthode est dépréciée. utilisez {{WebExtAPIRef("tabs.query", "tabs.query({active: true})")}} à la place.
 
 Obtient l'onglet sélectionné dans la fenêtre spécifiée
 
@@ -34,7 +35,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md
index c06f212b670c94..912741129e2388 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md
@@ -64,7 +64,7 @@ gettingZoom.then(onGot, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoomsettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoomsettings/index.md
index de5e72458f3edb..8307cc245e1a03 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoomsettings/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoomsettings/index.md
@@ -49,7 +49,7 @@ gettingZoomSettings.then(onGot, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md
index 5fe0970b79d4f7..89a7256e52c613 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md
@@ -52,7 +52,7 @@ goingBack.then(onGoBack, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-getZoomSettings) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/goforward/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/goforward/index.md
index 3f79eea580df37..5cea4b15a6bb82 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/goforward/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/goforward/index.md
@@ -52,7 +52,7 @@ goingForward.then(onGoForward, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-getZoomSettings) de Chromium.Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md
index 7673e9df9de47a..1436c191bffad5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md
@@ -27,7 +27,8 @@ var highlighting = browser.tabs.highlight(
 
       - : `boolean`. Par défaut la valeur est `true`. S'il est défini sur `false`, l'objet {{WebExtAPIRef('windows.Window')}} n'aura pas de propriété `tabs` contenant une liste d'objets {{WebExtAPIRef('tabs.Tab')}} représentant les onglets ouverts dans la fenêtre.
 
-        > **Note :** Remplir la fenêtre (le comportement par défaut) peut être une opération coûteuse s'il y a beaucoup d'onglets. Pour de meilleures performances, il est recommandé de définir manuellement configuré `populate` à `false` si vous n'avez pas besoin des détails de l'onglet.
+        > [!NOTE]
+        > Remplir la fenêtre (le comportement par défaut) peut être une opération coûteuse s'il y a beaucoup d'onglets. Pour de meilleures performances, il est recommandé de définir manuellement configuré `populate` à `false` si vous n'avez pas besoin des détails de l'onglet.
 
     - `tabs`
       - : `array` de valeurs entières spécifiant un ou plusieurs onglets à mettre en évidence. Les onglets surlignés précédemment qui ne sont pas inclus dans les `onglets` cesseront d'être surlignés. Le premier onglet des `onglets` devient actif.
@@ -42,7 +43,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md
index 5e6928a58c94ea..0dda27612a1877 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md
@@ -161,7 +161,7 @@ De nombreuses opérations d'onglet utilisent un identifiant (`id`) d'onglet. Les
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md
index 2b9c1c0c339dbc..3e9cec540a9e51 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md
@@ -11,7 +11,8 @@ Pour utiliser cette API vous devez avoir la permission "[host permission](/fr/Ad
 
 Vous ne pouvez injecter du CSS que dans des pages dont l'URL peut être exprimée en utilisant un [motif de correspondance](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns), ce qui signifie que son schéma doit être "http", "https", "file", "ftp". Cela signifie que vous ne pouvez pas injecter de CSS dans les pages intégrées du navigateur, telles que about:debugging, about:addons, ou la page qui s'ouvre lorsque vous ouvrez un nouvel onglet vide.
 
-> **Note :** Firefox résout les URL dans les fichiers CSS injectés par rapport au fichier CSS lui-même, plutôt qu'à la page dans laquelle il est injecté.
+> [!NOTE]
+> Firefox résout les URL dans les fichiers CSS injectés par rapport au fichier CSS lui-même, plutôt qu'à la page dans laquelle il est injecté.
 
 Le CSS inséré peut être retiré à nouveau en appelant {{WebExtAPIRef("tabs.removeCSS()")}}.
 
@@ -89,7 +90,7 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md
index 886af6e4b8c3c8..6518aa7eaad7af 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md
@@ -125,7 +125,7 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md
index 4115d18eb1f21d..a23db1944838e4 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md
@@ -24,7 +24,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md
index ab73c96c63b1b9..476370c26ebb73 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md
@@ -24,7 +24,7 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md
index 9c7cb8b2f65957..aabdb0b46168b2 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md
@@ -64,7 +64,7 @@ browser.tabs.onActivated.addListener(handleActivated);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivechanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivechanged/index.md
index 6e387e688e5d8c..25e0baa42ba61b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivechanged/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivechanged/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/onActiveChanged
 
 {{AddonSidebar}}
 
-> **Attention :** Cet événement est obsolète. Utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
+> [!WARNING]
+> Cet événement est obsolète. Utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
 
 Se déclenche lorsque l'onglet sélectionné dans une fenêtre change. Notez que l'URL de l'onglet peut ne pas être définie au moment où cet événement a été déclenché, mais vous pouvez écouter les événements {{WebExtAPIRef('tabs.onUpdated')}} pour être averti lorsqu'une URL est définie.
 
@@ -55,7 +56,7 @@ Les événements ont trois fonctions :
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onattached/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onattached/index.md
index d1ee0adf879243..0a6a5bd7a39ca3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onattached/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onattached/index.md
@@ -69,7 +69,7 @@ browser.tabs.onAttached.addListener(handleAttached);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
index 925e87d073a3ff..96f83e9985ef58 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
@@ -55,7 +55,7 @@ browser.tabs.onCreated.addListener(handleCreated);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/ondetached/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/ondetached/index.md
index 90a631b1449b8b..478cc08a2d0027 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/ondetached/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/ondetached/index.md
@@ -69,7 +69,7 @@ browser.tabs.onDetached.addListener(handleDetached);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md
index c0a55dcf3a4c44..20af7930e6c6be 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/onHighlightChanged
 
 {{AddonSidebar}}
 
-> **Attention :** Cet événement est obsolète. Utilisez {{WebExtAPIRef("tabs.onHighlighted")}} à la place.
+> [!WARNING]
+> Cet événement est obsolète. Utilisez {{WebExtAPIRef("tabs.onHighlighted")}} à la place.
 
 Lancé lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent.
 
@@ -50,7 +51,7 @@ Les événements ont trois fonctions :
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlighted/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlighted/index.md
index 4669f5afdd4d7b..dfd80981a54457 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlighted/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onhighlighted/index.md
@@ -64,7 +64,7 @@ browser.tabs.onHighlighted.addListener(handleHighlighted);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md
index 30e33f3613b72a..edf90dc0c8db27 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md
@@ -78,7 +78,7 @@ browser.tabs.onMoved.addListener(handleMoved);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onremoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onremoved/index.md
index a47f17a8f94b5e..6684b14e5a7949 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onremoved/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onremoved/index.md
@@ -69,7 +69,7 @@ browser.tabs.onRemoved.addListener(handleRemoved);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md
index 39cc51504cfdef..1d2d5a0dcc96d4 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md
@@ -61,7 +61,7 @@ browser.tabs.onReplaced.addListener(handleReplaced);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md
index 576b06c8d8c39f..42bdc2ceadaf12 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/onSelectionChanged
 
 {{AddonSidebar}}
 
-> **Attention :** Cet événement est obsolète. Utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
+> [!WARNING]
+> Cet événement est obsolète. Utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
 
 Se déclenche lorsque l'onglet sélectionné dans une fenêtre change.
 
@@ -55,7 +56,7 @@ Les événements ont trois fonctions:
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md
index 7435c83609dabd..8694a6ea185d70 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md
@@ -214,7 +214,7 @@ browser.tabs.onUpdated.addListener(handleUpdated, filter);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onzoomchange/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onzoomchange/index.md
index 25882e8e4a4b84..b3ba70418b4b90 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onzoomchange/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onzoomchange/index.md
@@ -68,7 +68,7 @@ browser.tabs.onZoomChange.addListener(handleZoomed);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md
index bbf991d922ef63..13a60e6acb2d62 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md
@@ -144,7 +144,7 @@ querying.then(logTabs, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/reload/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/reload/index.md
index 320ce1f0e82f56..962b6fec47bf47 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/reload/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/reload/index.md
@@ -68,7 +68,7 @@ reloading.then(onReloaded, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/remove/index.md
index c5b0f192e54f48..aa29d7df0d7210 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/remove/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/remove/index.md
@@ -64,7 +64,7 @@ removing.then(onRemoved, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md
index 9052da3bd8ea28..66a45f0924a43e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md
@@ -71,7 +71,7 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
index 76d2a086ac511c..ce8bbffaa88a40 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
@@ -9,7 +9,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage
 
 Il s'agit d'une fonction asynchrone qui renvoit un objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise).
 
-> **Note :** Vous pouvez également utiliser une [approche basée sur la connexion pour échanger des messages](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communication_avec_les_scripts_darrière-plan).
+> [!NOTE]
+> Vous pouvez également utiliser une [approche basée sur la connexion pour échanger des messages](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communication_avec_les_scripts_darrière-plan).
 
 ## Syntaxe
 
@@ -92,7 +93,7 @@ browser.runtime.onMessage.addListener((request) => {
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendrequest/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendrequest/index.md
index 542b1c561eea24..9ff05d0be208d0 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendrequest/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendrequest/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/sendRequest
 
 {{AddonSidebar}}
 
-> **Attention :** Cette méthode a été dépréciée. Utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place.
+> [!WARNING]
+> Cette méthode a été dépréciée. Utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place.
 
 Envoie une seule requête au(x) script(s) de contenu dans l'onglet spécifié, avec un rappel facultatif à exécuter lorsqu'une réponse est renvoyée. L'événement {{WebExtAPIRef('extension.onRequest')}} est déclenché dans chaque script de contenu exécuté dans l'onglet spécifié pour l'extension en cours.
 
@@ -35,7 +36,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md
index 858397dda1eb57..0e4bd6d61c186b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md
@@ -59,7 +59,7 @@ setting.then(null, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md
index c6f8f908214e3e..9ea73cc9f36a7f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md
@@ -52,7 +52,7 @@ setting.then(onSet, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md
index 9fbed48f52bae1..d0adf5335fa068 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md
@@ -80,7 +80,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/tab_id_none/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/tab_id_none/index.md
index d25324477b9254..b00ba3e039d72f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/tab_id_none/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/tab_id_none/index.md
@@ -13,7 +13,7 @@ Une valeur d'ID spéciale donnée aux onglets qui ne sont pas des onglets du nav
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#property-TAB_ID_NONE). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/tabstatus/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/tabstatus/index.md
index cd89d8c725f1e6..d17cb469a4b640 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/tabstatus/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/tabstatus/index.md
@@ -17,7 +17,7 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont : `"loading
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md
index 9b1f94cec5b266..52427ec377818d 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md
@@ -120,7 +120,7 @@ querying.then(updateFirstTab, onError);
 
 {{Compat}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) de Chromium. Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/windowtype/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/windowtype/index.md
index af3b9c3b08eec4..e6b2eef138ce37 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/windowtype/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/windowtype/index.md
@@ -22,7 +22,7 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont:
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md
index 95a4f375e5ad3a..93138ffe100062 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md
@@ -24,7 +24,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md
index 5314cd247638fa..74c7d7866e2071 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md
@@ -24,7 +24,7 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md
index 01c10b23d452cf..721d50bd447220 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md
@@ -22,7 +22,7 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript). Cette documentation est dérivée de [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/theme/index.md b/files/fr/mozilla/add-ons/webextensions/api/theme/index.md
index a022204a55f812..86c30f57003a8e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/theme/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/theme/index.md
@@ -9,7 +9,8 @@ Permet aux extensions du navigateur de mettre à jour le thème du navigateur.
 
 Pour utiliser cette API, une extension doit demander la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "theme" dans son fichier [manifest.json](/fr/Add-ons/WebExtensions/manifest.json).
 
-> **Note :** quand on met un thème en arrière plan, on doit déclarer la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) 'theme' et on ne peut pas utiliser la fonction [theme](/fr/Add-ons/WebExtensions/manifest.json/theme) du manifest, puisque ce n'est pas compatible.
+> [!NOTE]
+> Quand on met un thème en arrière plan, on doit déclarer la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) 'theme' et on ne peut pas utiliser la fonction [theme](/fr/Add-ons/WebExtensions/manifest.json/theme) du manifest, puisque ce n'est pas compatible.
 
 ## Types
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md
index 0ef25c832ab708..18e360318a0ca0 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md
@@ -96,7 +96,7 @@ gettingTopSites.then(logTopSites, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.topSites`](https://developer.chrome.com/extensions/topSites).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md b/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md
index 79f98f768dcee1..b440325d3bdd32 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md
@@ -27,7 +27,7 @@ Pour utiliser l'API topSites, vous devez disposez de l' [API permission](/fr/Add
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.topSites`](https://developer.chrome.com/extensions/topSites).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/topsites/mostvisitedurl/index.md b/files/fr/mozilla/add-ons/webextensions/api/topsites/mostvisitedurl/index.md
index 3cf8a6c603637b..8814a4f2e7bf8b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/topsites/mostvisitedurl/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/topsites/mostvisitedurl/index.md
@@ -26,7 +26,7 @@ Values of this type are objects. They contain the following properties:
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.topSites`](https://developer.chrome.com/extensions/topSites).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md
index 928db739f0162b..25dea8525ab643 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md
@@ -51,7 +51,7 @@ clearing.then(onCleared);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.types`](https://developer.chrome.com/extensions/types).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md
index eba536cf6039fd..1a5747264472f8 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md
@@ -72,7 +72,7 @@ getting.then((got) => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.types`](https://developer.chrome.com/extensions/types).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md
index 0b588ecddbf03d..5ae0ee3ed3afef 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md
@@ -31,7 +31,7 @@ Notez que si cet objet est basé sur le type [ChromeSetting](https://developer.c
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.types`](https://developer.chrome.com/extensions/types).
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/onchange/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/onchange/index.md
index 17c12a93d0f230..694244fa67ec07 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/onchange/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/onchange/index.md
@@ -71,7 +71,7 @@ Les événement ont trois fonctions :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.types`](https://developer.chrome.com/extensions/types).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md
index 6f470de50f66ab..518d79ea5c9b83 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md
@@ -71,7 +71,7 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.types`](https://developer.chrome.com/extensions/types).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/index.md
index d70a29728c4d3b..8ec06b71cd2e36 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/types/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/types/index.md
@@ -16,7 +16,7 @@ Définit le type `BrowserSetting` , qui est utilisé pour représenter un param
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.types`](https://developer.chrome.com/extensions/types).
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md
index 67ee7dc363092e..d7713e4a3081ca 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md
@@ -13,11 +13,13 @@ Cette API offre des capacités similaires à {{WebExtAPIRef("contentScripts")}}
 - l'accès à la `fenêtre` et aux valeurs globales du `document` liées à la page web à laquelle le script utilisateur est attaché.
 - aucun accès aux API de WebExtension ou aux autorisations associées accordées à l'extension : le script API, qui hérite des autorisations de l'extension, peut fournir des API de WebExtension packagées aux scripts utilisateur enregistrés. Un script API est déclaré dans le fichier manifeste de l'extension en utilisant la clé du manifeste "user_scripts".
 
-> **Attention :** Cette API requiert la présence de la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts) dans le manifest.json, même si aucun script API n'est spécifié. Par exemple, `user_scripts: {}`.
+> [!WARNING]
+> Cette API requiert la présence de la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts) dans le manifest.json, même si aucun script API n'est spécifié. Par exemple, `user_scripts: {}`.
 
 Pour utiliser l'API, appelez `{{WebExtAPIRef("userScripts.register","register()")}}` en passant un objet définissant les scripts à enregistrer. La méthode renvoie une promesse qui est résolue par un objet `{{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}`.
 
-> **Note :** Les scripts utilisateur sont désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés
+> [!NOTE]
+> Les scripts utilisateur sont désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés
 
 ## Types
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md
index 742771afb13499..aa6c955243c751 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md
@@ -52,7 +52,8 @@ Contrairement aux options de script de contenu, l'objet userScriptOptions n'a pa
 
 Une {{JSxRef("Promise")}} qui sera rempli avec un objet {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}} que vous pouvez utiliser pour désinscrire ce script utilisateur particulier.
 
-> **Note :** Actuellement, les scripts utilisateur sont désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés.
+> [!NOTE]
+> Actuellement, les scripts utilisateur sont désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés.
 
 ## Compatibilité des navigateurs
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/index.md
index 878508489a65d9..7350ca2f223464 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/index.md
@@ -9,7 +9,8 @@ Un RegisteredUserScript est retourné par un appel à {{WebExtAPIRef("userScript
 
 L'objet définit une méthode unique, {{WebExtAPIRef("userScripts.RegisteredUserScript.unregister","unregister()")}}, qui peut être utilisée pour désinscrire les scripts utilisateur.
 
-> **Note :** Si cet objet est détruit (par exemple parce qu'il sort du champ d'application), les scripts associés seront automatiquement désenregistrés, vous devez donc conserver une référence à cet objet aussi longtemps que vous voulez que les scripts de contenu restent enregistrés.
+> [!NOTE]
+> Si cet objet est détruit (par exemple parce qu'il sort du champ d'application), les scripts associés seront automatiquement désenregistrés, vous devez donc conserver une référence à cet objet aussi longtemps que vous voulez que les scripts de contenu restent enregistrés.
 
 ## Méthodes
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md
index 1156fc221cfec0..d283e3b8e770e3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/unregis
 
 La méthode `unregister()` de l'interface {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}} désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}.
 
-> **Note :** Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés..
+> [!NOTE]
+> Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés..
 
 ## Syntaxe
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getallframes/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getallframes/index.md
index 4c46a8aa70f491..778655771122a9 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getallframes/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getallframes/index.md
@@ -81,7 +81,7 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md
index 37108c8c15bc6d..5b48cad944027d 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md
@@ -71,7 +71,7 @@ gettingFrame.then(onGot, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md
index bab3c6e4bd73d6..0418e403c9628c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md
@@ -76,7 +76,7 @@ Pour utiliser cette API, vous devez avoir la [permission](/fr/Add-ons/WebExtensi
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md
index 954875db5664ac..ae547641883ed8 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md
@@ -80,7 +80,7 @@ browser.webNavigation.onBeforeNavigate.addListener(logOnBefore, filter);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncommitted/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncommitted/index.md
index 51cdf7785bce85..481abb802e27fb 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncommitted/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncommitted/index.md
@@ -86,7 +86,7 @@ browser.webNavigation.onCommitted.addListener(logOnCommitted, filter);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md
index 39e16ada711f1e..34df064471bf46 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md
@@ -78,7 +78,7 @@ browser.webNavigation.onCompleted.addListener(logOnCompleted, filter);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md
index 5e81cd77dc6125..9735f4d707b669 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md
@@ -94,7 +94,7 @@ browser.webNavigation.onCreatedNavigationTarget.addListener(
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md
index 054fa0a5b010cb..af59dd7c748a11 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md
@@ -81,7 +81,7 @@ browser.webNavigation.onDOMContentLoaded.addListener(
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md
index f985c59438d2e6..6e267d664e080f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md
@@ -81,7 +81,7 @@ browser.webNavigation.onErrorOccurred.addListener(logOnErrorOccurred, filter);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md
index 58df6b19616a92..7e63fecf17b5d2 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md
@@ -87,7 +87,7 @@ browser.webNavigation.onHistoryStateUpdated.addListener(
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md
index 45c6881b8e3776..ab01eac3cc6957 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md
@@ -85,7 +85,7 @@ browser.webNavigation.onReferenceFragmentUpdated.addListener(
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ontabreplaced/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ontabreplaced/index.md
index db2f8bc58515cd..3be73209a6914a 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ontabreplaced/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ontabreplaced/index.md
@@ -65,7 +65,7 @@ browser.webNavigation.onTabReplaced.addListener(logOnTabReplaced);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > This API is based on Chromium's [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation#event-onTabReplaced) API. This documentation is derived from [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) in the Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitionqualifier/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitionqualifier/index.md
index 3e2959f761b9aa..31de0b307932c0 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitionqualifier/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitionqualifier/index.md
@@ -24,7 +24,7 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitiontype/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitiontype/index.md
index 5cc8d22cf27e5f..e9e67a9854894a 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitiontype/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/transitiontype/index.md
@@ -42,7 +42,7 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation). Cette documentation est dérivée de [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) dans le code de Chromium code.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md
index 5bded0e5b2538d..f8390368535f41 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md
@@ -47,7 +47,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest). Cette documentation est dérivée de [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) dans le code Chromium.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md
index e40e995787abab..e7b174f68121a0 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md
@@ -59,7 +59,7 @@ flushingCache.then(onFlushed, onError);
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest). Cette documentation est dérivée de [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/httpheaders/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/httpheaders/index.md
index 6f0a28b5ccfdda..128e21aed3a555 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/httpheaders/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/httpheaders/index.md
@@ -24,7 +24,7 @@ Un `tableau` d'`objet`s. Chaque objet a les propriétés suivantes :
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest). Cette documentation est dérivée de [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md
index 51b3a1af1d6315..1296188d42aae8 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md
@@ -54,7 +54,8 @@ Sur certains de ces événements, vous pouvez modifier la demande. Plus précis
 
 Pour ce faire, vous devez transmettre une option avec la valeur "blocking" dans l'argument `extraInfoSpec` à la fonction `addListener()` de l'événement. Cela rend l'auditeur synchrone. Dans l'écouteur, vous pouvez alors renvoyer un objet {{WebExtAPIRef("webRequest.BlockingResponse", "BlockingResponse")}}, qui indique la modification à apporter : par exemple, l'en-tête de requête modifié que vous souhaitez envoyer.
 
-> **Attention :** Les protocoles non-HTTP(S) ne supportent pas actuellement la fonctionnalité de "`blockage`", donc la modification de ces requêtes n'est pas disponible pour le moment. Voir le [bug Firefox 1475832](https://bugzil.la/1475832) pour plus de détails.
+> [!WARNING]
+> Les protocoles non-HTTP(S) ne supportent pas actuellement la fonctionnalité de "`blockage`", donc la modification de ces requêtes n'est pas disponible pour le moment. Voir le [bug Firefox 1475832](https://bugzil.la/1475832) pour plus de détails.
 
 ## Accéder aux informations de sécurité
 
@@ -130,7 +131,7 @@ Pour ce faire, vous devez disposer de la permission de l'API "webRequestBlocking
 
 {{WebExtExamples("h2")}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest). Cette documentation est dérivée de [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/max_handler_behavior_changed_calls_per_10_minutes/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/max_handler_behavior_changed_calls_per_10_minutes/index.md
index ec55f05a9e2b1f..bc52776a59c4d8 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/max_handler_behavior_changed_calls_per_10_minutes/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/max_handler_behavior_changed_calls_per_10_minutes/index.md
@@ -15,7 +15,7 @@ Cette propriété est en lecture seule.
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest). Cette documentation est dérivée de [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) dans le code Chromium.
 >
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md
index 54d3d315724a60..9439b06e6774a4 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md
@@ -279,7 +279,7 @@ browser.webRequest.onErrorOccurred.addListener(completed, { urls: [target] });
 
 {{WebExtExamples}}
 
-> **Note :**
+> [!NOTE]
 >
 > Cette API est basée sur l'API Chromium [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest). Cette documentation est dérivée de [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) dans le code Chromium.
 >
diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md
index 9d3b54271f9038..38d2bb11599ae3 100644
--- a/files/fr/web/api/attr/localname/index.md
+++ b/files/fr/web/api/attr/localname/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Attr/localName
 
 La propriété **`Attr.localName`**, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.
 
-> **Note :** Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.
+> [!NOTE]
+> Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.
 
 ## Syntaxe
 
@@ -45,7 +46,8 @@ element.addEventListener("click", function () {
 
 Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.
 
-> **Note :** dans Gecko 1.9.2 et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.
+> [!NOTE]
+> Dans Gecko 1.9.2 et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.
 
 ## Spécifications
 
diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md
index 3059dc3e85c418..b1a14047f49018 100644
--- a/files/fr/web/api/attr/namespaceuri/index.md
+++ b/files/fr/web/api/attr/namespaceuri/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Attr/namespaceURI
 
 La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms.
 
-> **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.
+> [!NOTE]
+> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/element/index.md b/files/fr/web/api/element/index.md
index c7caa33dca213c..22c4f1dd7d864c 100644
--- a/files/fr/web/api/element/index.md
+++ b/files/fr/web/api/element/index.md
@@ -45,7 +45,8 @@ _`Element` hérite des propriétés de son interface parente : [`Node`](/fr/docs
 
   - : L'URI pour l'espace de noms de l'élément ou `null` s'il n'y en a pas.
 
-    > **Note :** Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) tant pour les arbres HTML que XML.
+    > [!NOTE]
+    > Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) tant pour les arbres HTML que XML.
 
 - [`Element.nextElementSibling`](/fr/docs/Web/API/Element/nextElementSibling) {{readOnlyInline}}
   - : Un objet `Element` qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou `null` si l'élément courant n'a pas de voisin.
diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md
index 9eee051105374b..a6a389f2b49fdc 100644
--- a/files/fr/web/api/element/innerhtml/index.md
+++ b/files/fr/web/api/element/innerhtml/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/innerHTML
 
 La propriété **`Element.innerHTML`** de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.
 
-> **Note :** Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères `(&), (<),` ou `(>)`, `innerHTML` renverra à la place les chaînes suivantes : `"&amp;"`, `"&lt;"` et `"&gt;"` respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.
+> [!NOTE]
+> Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères `(&), (<),` ou `(>)`, `innerHTML` renverra à la place les chaînes suivantes : `"&amp;"`, `"&lt;"` et `"&gt;"` respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.
 
 Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.
 
@@ -44,7 +45,8 @@ let contents = myElement.innerHTML;
 
 Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.
 
-> **Note :** Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.
+> [!NOTE]
+> Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.
 
 ### Remplacement du contenu d'un élément
 
@@ -97,7 +99,8 @@ el.innerHTML = name; // affiche l'alerte
 
 Pour cette raison, il est recommandé de ne pas utiliser `innerHTML` pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.
 
-> **Attention :** Si votre projet est soumis à une vérification de sécurité, l'utilisation de `innerHTML` entraînera probablement le rejet de votre code. Par exemple, si vous utilisez `innerHTML` dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.
+> [!WARNING]
+> Si votre projet est soumis à une vérification de sécurité, l'utilisation de `innerHTML` entraînera probablement le rejet de votre code. Par exemple, si vous utilisez `innerHTML` dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.
 
 ## Exemple
 
diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md
index 698c4c962e1f9f..f77ede3d6a7da0 100644
--- a/files/fr/web/api/element/insertadjacentelement/index.md
+++ b/files/fr/web/api/element/insertadjacentelement/index.md
@@ -50,7 +50,8 @@ L'élément inséré ou `null` si l'insertion a échouée.
 <!-- afterend -->
 ```
 
-> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.
+> [!NOTE]
+> Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.
 
 ## Exemple
 
diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md
index a8dc5f3456130b..8f352bf7caa678 100644
--- a/files/fr/web/api/element/insertadjacenthtml/index.md
+++ b/files/fr/web/api/element/insertadjacenthtml/index.md
@@ -42,7 +42,8 @@ element.insertAdjacentHTML(position, text);
 <!-- afterend -->
 ```
 
-> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent.
+> [!NOTE]
+> Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent.
 
 ## Exemple
 
diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md
index c5dd170a5035d8..0c12b401dc44e4 100644
--- a/files/fr/web/api/element/insertadjacenttext/index.md
+++ b/files/fr/web/api/element/insertadjacenttext/index.md
@@ -49,7 +49,8 @@ Vide.
 <!-- afterend -->
 ```
 
-> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.
+> [!NOTE]
+> Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.
 
 ## Exemple
 
diff --git a/files/fr/web/api/element/keypress_event/index.md b/files/fr/web/api/element/keypress_event/index.md
index 9faa74e1e2a893..2fa92c00d62925 100644
--- a/files/fr/web/api/element/keypress_event/index.md
+++ b/files/fr/web/api/element/keypress_event/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/keypress_event
 
 L'évènement **`keypress`** est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées.
 
-> **Attention :** Cet évènement est déprécié et il faudrait plutôt utiliser [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event) ou [`keydown`](/fr/docs/Web/API/Document/keydown_event).
+> [!WARNING]
+> Cet évènement est déprécié et il faudrait plutôt utiliser [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event) ou [`keydown`](/fr/docs/Web/API/Document/keydown_event).
 
 <table class="properties">
   <thead></thead>
diff --git a/files/fr/web/api/element/localname/index.md b/files/fr/web/api/element/localname/index.md
index 272c245d87e4ad..f606b329f853f4 100644
--- a/files/fr/web/api/element/localname/index.md
+++ b/files/fr/web/api/element/localname/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/localName
 
 La propriété en lecture seule **`Element.localName`** renvoie la partie locale du nom qualifié d'un élément.
 
-> **Note :** Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.
+> [!NOTE]
+> Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.
 
 ## Syntaxe
 
@@ -62,7 +63,8 @@ Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive aprè
 </ecomm:business>
 ```
 
-> **Note :** Dans Gecko 1.9.2 et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.
+> [!NOTE]
+> Dans Gecko 1.9.2 et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.
 
 ## Spécifications
 
diff --git a/files/fr/web/api/element/matches/index.md b/files/fr/web/api/element/matches/index.md
index cac7e08210fb21..9e20e547ef93f3 100644
--- a/files/fr/web/api/element/matches/index.md
+++ b/files/fr/web/api/element/matches/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/matches
 
 La méthode **`element.matches()`** renvoie `true` lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramètre&nbsp;; sinon, elle renvoie `false`.
 
-> **Attention :** Certains navigateurs implémentent cette méthode sous le nom `matchesSelector()` non-standardisé et préfixé.
+> [!WARNING]
+> Certains navigateurs implémentent cette méthode sous le nom `matchesSelector()` non-standardisé et préfixé.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/element/mousedown_event/index.md b/files/fr/web/api/element/mousedown_event/index.md
index 42d8fe388b26d2..0042c4609dc648 100644
--- a/files/fr/web/api/element/mousedown_event/index.md
+++ b/files/fr/web/api/element/mousedown_event/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/mousedown_event
 
 L'évènement **`mousedown`** est déclenché à partir d'un [`Element`](/fr/docs/Web/API/Element) lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.
 
-> **Note :** Cet évènement est différent de [`click`](/fr/docs/Web/API/Element/click_event). `click` est déclenché après qu'un clic «&nbsp;entier&nbsp;» a eu lieu (c'est-à-dire quand le bouton a été pressé puis relâché tandis que le pointeur était sur le même élément). `mousedown` est déclenché dès qu'on appuie sur le bouton.
+> [!NOTE]
+> Cet évènement est différent de [`click`](/fr/docs/Web/API/Element/click_event). `click` est déclenché après qu'un clic «&nbsp;entier&nbsp;» a eu lieu (c'est-à-dire quand le bouton a été pressé puis relâché tandis que le pointeur était sur le même élément). `mousedown` est déclenché dès qu'on appuie sur le bouton.
 
 <table class="properties">
   <tbody>
diff --git a/files/fr/web/api/element/namespaceuri/index.md b/files/fr/web/api/element/namespaceuri/index.md
index 521c612ede2fee..b1d87180ccdd4e 100644
--- a/files/fr/web/api/element/namespaceuri/index.md
+++ b/files/fr/web/api/element/namespaceuri/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/namespaceURI
 
 La propriété en lecture seule **`Element.namespaceURI`** renvoie l'URI d'espace de noms de l'élément ou `null` si l'élément n'est pas dans un espace de nom.
 
-> **Note :** Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.
+> [!NOTE]
+> Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/element/prefix/index.md b/files/fr/web/api/element/prefix/index.md
index f880aeebda7a2b..5769b99667e46b 100644
--- a/files/fr/web/api/element/prefix/index.md
+++ b/files/fr/web/api/element/prefix/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/prefix
 
 La propriété en lecture seule **`Element.prefix`** renvoie le préfixe d'espace de noms de l'élément spécifié ou `null` si aucun préfixe n'est précisé.
 
-> **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.
+> [!NOTE]
+> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/element/queryselectorall/index.md b/files/fr/web/api/element/queryselectorall/index.md
index 58b5d18f9191b3..3a38c1a775aaed 100644
--- a/files/fr/web/api/element/queryselectorall/index.md
+++ b/files/fr/web/api/element/queryselectorall/index.md
@@ -18,13 +18,15 @@ elementList = parentNode.querySelectorAll(selectors);
 - `selectors`
   - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors)&nbsp;; si ce n'est pas le cas, une exception `SyntaxError` est levée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
 
-> **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir [Échappement des caractères](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#échappement_des_caractères) pour plus d'informations.
+> [!NOTE]
+> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir [Échappement des caractères](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#échappement_des_caractères) pour plus d'informations.
 
 ### Valeur de retour
 
 Une [`NodeList`](/fr/docs/Web/API/NodeList) statique contenant un objet [`Element`](/fr/docs/Web/API/Element) pour chaque nœud descendant qui correspond à au moins un des sélecteurs spécifiés au moment où la méthode est appelée.
 
-> **Note :** Si les sélecteurs spécifiés avec `selectors` incluent un [pseudo-élément CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste renvoyée est toujours vide.
+> [!NOTE]
+> Si les sélecteurs spécifiés avec `selectors` incluent un [pseudo-élément CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste renvoyée est toujours vide.
 
 ### Exception
 
@@ -81,7 +83,8 @@ highlightedItems.forEach(function (userItem) {
 });
 ```
 
-> **Note :** L'objet `NodeList` n'est pas vraiment un tableau (`Array`) — vous ne pouvez donc pas utiliser des méthodes de tableaux (telles que `slice`, `some`, `map`, etc.) avec `NodeList`. Essayez `Array.from(nodeList)` pour le convertir en tableau.
+> [!NOTE]
+> L'objet `NodeList` n'est pas vraiment un tableau (`Array`) — vous ne pouvez donc pas utiliser des méthodes de tableaux (telles que `slice`, `some`, `map`, etc.) avec `NodeList`. Essayez `Array.from(nodeList)` pour le convertir en tableau.
 
 ## Notes d'utilisation
 
diff --git a/files/fr/web/api/element/requestfullscreen/index.md b/files/fr/web/api/element/requestfullscreen/index.md
index aab05dc7d22ca5..31b58f5d08f01a 100644
--- a/files/fr/web/api/element/requestfullscreen/index.md
+++ b/files/fr/web/api/element/requestfullscreen/index.md
@@ -11,7 +11,8 @@ Il n'y a aucune garantie que l'élément passera effectivement en mode plein éc
 
 Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.
 
-> **Note :** Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut [`allowfullscreen`](/fr/docs/Web/HTML/Element/iframe#allowfullscreen) peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.
+> [!NOTE]
+> Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut [`allowfullscreen`](/fr/docs/Web/HTML/Element/iframe#allowfullscreen) peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md
index 7b38632b43c3c7..7a9b1364fae187 100644
--- a/files/fr/web/api/element/scrollheight/index.md
+++ b/files/fr/web/api/element/scrollheight/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Element/scrollHeight
 
 L'attribut en lecture seule **`element.scrollHeight`** est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur `scrollHeight` est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.
 
-> **Note :** Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez [element.getBoundingClientRect()](/fr/docs/DOM/element.getBoundingClientRect).
+> [!NOTE]
+> Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez [element.getBoundingClientRect()](/fr/docs/DOM/element.getBoundingClientRect).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/element/scrollleft/index.md b/files/fr/web/api/element/scrollleft/index.md
index 8a2bbd3e781835..37782329deeda9 100644
--- a/files/fr/web/api/element/scrollleft/index.md
+++ b/files/fr/web/api/element/scrollleft/index.md
@@ -15,7 +15,8 @@ Cette propriété peut être définie avec n'importe quelle valeur entière. Tou
 - Si la valeur fournie est inférieure à `0` (ou supérieure à `0` pour les éléments écrits de droite à gauche), `scrollLeft` sera fixée à `0`.
 - Si la valeur fournie est supérieure au défilement maximal possible pour le contenu, `scrollLeft` sera fixée à la valeur maximale possible.
 
-> **Attention :** Pour les systèmes qui utilisent une mise à l'échelle pour l'affichage (<i lang="en">display scaling</i>), `scrollLeft` pourra fournir une valeur décimale.
+> [!WARNING]
+> Pour les systèmes qui utilisent une mise à l'échelle pour l'affichage (<i lang="en">display scaling</i>), `scrollLeft` pourra fournir une valeur décimale.
 
 ## Valeur
 
diff --git a/files/fr/web/api/element/scrolltop/index.md b/files/fr/web/api/element/scrolltop/index.md
index 51dec73cf5a31b..6de36cc9a02786 100644
--- a/files/fr/web/api/element/scrolltop/index.md
+++ b/files/fr/web/api/element/scrolltop/index.md
@@ -11,7 +11,8 @@ La valeur `scrollTop` d'un élément correspond à la distance entre le haut de
 
 Lorsque `scrollTop` est utilisé sur l'élément racine (c'est-à-dire l'élément `<html>`), c'est la valeur de `scrollY` pour la fenêtre qui est renvoyée. [Il s'agit d'un cas aux limites pour `scrollTop`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop).
 
-> **Attention :** Pour les systèmes qui utilisent un affichage mis à l'échelle (_display scaling_), `scrollTop` peut fournir une valeur décimale.
+> [!WARNING]
+> Pour les systèmes qui utilisent un affichage mis à l'échelle (_display scaling_), `scrollTop` peut fournir une valeur décimale.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/element/scrollwidth/index.md b/files/fr/web/api/element/scrollwidth/index.md
index 9fef5ad62299c7..04e3eaa4ae8f1f 100644
--- a/files/fr/web/api/element/scrollwidth/index.md
+++ b/files/fr/web/api/element/scrollwidth/index.md
@@ -12,7 +12,8 @@ l10n:
 
 La valeur `scrollWidth` est égale à la largeur minimale dont l'élément aurait besoin pour s'adapter à tout le contenu de la fenêtre sans utiliser de barre de défilement horizontale. La largeur est mesurée de la même manière que [`clientWidth`](/fr/docs/Web/API/Element/clientWidth)&nbsp;: elle inclut le remplissage (<i lang="en">padding</i>) de l'élément, mais pas sa bordure, sa marge ou sa barre de défilement verticale (si présente). Elle peut également inclure la largeur des pseudo-éléments tels que [`::before`](/fr/docs/Web/CSS/::before) ou [`::after`](/fr/docs/Web/CSS/::after). Pour un élément donné, si son contenu peut s'adapter sans avoir besoin d'une barre de défilement horizontale, `scrollWidth` sera égale à [`clientWidth`](/fr/docs/Web/API/Element/clientWidth).
 
-> **Note :** Cette propriété arrondira la valeur à un nombre entier. Si vous avez besoin d'une valeur fractionnaire, utilisez [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect).
+> [!NOTE]
+> Cette propriété arrondira la valeur à un nombre entier. Si vous avez besoin d'une valeur fractionnaire, utilisez [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect).
 
 ## Valeur
 
diff --git a/files/fr/web/api/element/setpointercapture/index.md b/files/fr/web/api/element/setpointercapture/index.md
index 2de4346db0b798..0a1516637fb854 100644
--- a/files/fr/web/api/element/setpointercapture/index.md
+++ b/files/fr/web/api/element/setpointercapture/index.md
@@ -9,7 +9,8 @@ La _Pointer capture_ (_capture de pointeur_) permet de re-cibler des événement
 
 **`setPointerCapture()`** est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme _cible de capture_ de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).
 
-> **Note :** Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.
+> [!NOTE]
+> Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md
index afc421073a1e35..4f95b890897883 100644
--- a/files/fr/web/api/event/bubbles/index.md
+++ b/files/fr/web/api/event/bubbles/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Event/bubbles
 
 Indique si l'événement donné se propage à travers le DOM ou non.
 
-> **Note :** Voir [Propagation et capture des évènements](/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) pour plus d'informations sur la propagation.
+> [!NOTE]
+> Voir [Propagation et capture des évènements](/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) pour plus d'informations sur la propagation.
 
 ## Syntaxe
 
@@ -33,7 +34,8 @@ function goInput(e) {
 }
 ```
 
-> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.
+> [!NOTE]
+> Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.
 
 ## Spécifications
 
diff --git a/files/fr/web/api/event/currenttarget/index.md b/files/fr/web/api/event/currenttarget/index.md
index 48f736c460ad18..da984f4df5aee4 100644
--- a/files/fr/web/api/event/currenttarget/index.md
+++ b/files/fr/web/api/event/currenttarget/index.md
@@ -41,7 +41,8 @@ for (var i = 0; i < ps.length; i++) {
 document.body.addEventListener("click", hide, false);
 ```
 
-> **Note :** La valeur de `event.currentTarget` est **uniquement** disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de `currentTarget` _a posteriori_ (ex. si on a stocké la valeur d'`event` dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, `event.currentTarget` aura la valeur `null`).
+> [!NOTE]
+> La valeur de `event.currentTarget` est **uniquement** disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de `currentTarget` _a posteriori_ (ex. si on a stocké la valeur d'`event` dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, `event.currentTarget` aura la valeur `null`).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md
index 85146964f286af..bec10d557f8c7b 100644
--- a/files/fr/web/api/event/defaultprevented/index.md
+++ b/files/fr/web/api/event/defaultprevented/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Event/defaultPrevented
 
 Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.
 
-> **Note :** Cette propriété doit etre utilisée au lieu de la méthode `getPreventDefault()` qui n'est pas standard et est désormais dépréciée (voir [bug Firefox 691151](https://bugzil.la/691151)).
+> [!NOTE]
+> Cette propriété doit etre utilisée au lieu de la méthode `getPreventDefault()` qui n'est pas standard et est désormais dépréciée (voir [bug Firefox 691151](https://bugzil.la/691151)).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/event/index.md b/files/fr/web/api/event/index.md
index 2d9022e84c9b2a..dab895848bab3b 100644
--- a/files/fr/web/api/event/index.md
+++ b/files/fr/web/api/event/index.md
@@ -13,7 +13,8 @@ Il existe de nombreux types d'évènements dont certains utilisent d'autres inte
 
 De nombreux éléments DOM peuvent être paramétrés afin d'accepter (« d'écouter ») ces évènements et d'exécuter du code en réaction afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement connectés (« attachés ») aux [éléments HTML](/fr/docs/Web/HTML/Element) (tels que `<button>`, `<div>`, `<span>`, etc.) grâce à la méthode [`EventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) qui remplace les anciens [attributs de gestion d'évènement](/fr/docs/Web/HTML/Global_attributes) qui étaient auparavant utilisés en HTML. Avec cette méthode d'ajout plus récente, les gestionnaires peuvent également être déconnectés/détachés si besoin via la méthode [`EventTarget.removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener).
 
-> **Note :** Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).
+> [!NOTE]
+> Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).
 
 Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres [de bouillonnement (_bubbling_) et de capture](/fr/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture) définis sur chaque gestionnaire ainsi déclenché.
 
diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md
index 801fbaf6144721..4e914c3c27ed74 100644
--- a/files/fr/web/api/event/initevent/index.md
+++ b/files/fr/web/api/event/initevent/index.md
@@ -9,7 +9,8 @@ La méthode **`Event.initEvent()`** est utilisée pour initialiser la valeur d'u
 
 Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.
 
-> **Note :** Ne pas utiliser cette méthode qui est dépréciée.
+> [!NOTE]
+> Ne pas utiliser cette méthode qui est dépréciée.
 >
 > À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page [Création et déclenchement d'évènements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) vous donne plus d'informations sur la manière de les utiliser.
 
diff --git a/files/fr/web/api/event/returnvalue/index.md b/files/fr/web/api/event/returnvalue/index.md
index d4b26038c8ab62..520ea5e9e257bf 100644
--- a/files/fr/web/api/event/returnvalue/index.md
+++ b/files/fr/web/api/event/returnvalue/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Event/returnValue
 
 La propriété **`Event.returnValue`** indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à `true` (_vrai_) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à `false` (_faux_) empêche le déclenchement de l'action par défaut.
 
-> **Note :** Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.
+> [!NOTE]
+> Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md
index ac06bda067b160..b68a4568af8948 100644
--- a/files/fr/web/api/event/timestamp/index.md
+++ b/files/fr/web/api/event/timestamp/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Event/timeStamp
 
 Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.
 
-> **Note :** Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.
+> [!NOTE]
+> Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/eventsource/close/index.md b/files/fr/web/api/eventsource/close/index.md
index 09385d784deefe..c8310f5c74670d 100644
--- a/files/fr/web/api/eventsource/close/index.md
+++ b/files/fr/web/api/eventsource/close/index.md
@@ -7,7 +7,8 @@ slug: Web/API/EventSource/close
 
 La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed).
 
-> **Note :** Si la connexion est déjà fermé, la fonction n'agit pas.
+> [!NOTE]
+> Si la connexion est déjà fermé, la fonction n'agit pas.
 
 ## Syntaxe
 
@@ -35,7 +36,8 @@ bouton.onclick = function () {
 };
 ```
 
-> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
+> [!NOTE]
+> Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
 
 ## Spécifications
 
diff --git a/files/fr/web/api/eventsource/index.md b/files/fr/web/api/eventsource/index.md
index 3d73820da2f2aa..5d1b6943fc206a 100644
--- a/files/fr/web/api/eventsource/index.md
+++ b/files/fr/web/api/eventsource/index.md
@@ -53,7 +53,8 @@ evtSource.onmessage = function (e) {
 };
 ```
 
-> **Note :** Un exemple complet est disponible sur GitHub, [voir la démonstration SSE avec PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events).
+> [!NOTE]
+> Un exemple complet est disponible sur GitHub, [voir la démonstration SSE avec PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/eventsource/open_event/index.md b/files/fr/web/api/eventsource/open_event/index.md
index 7d299d1243608f..b6d3b00bf4b140 100644
--- a/files/fr/web/api/eventsource/open_event/index.md
+++ b/files/fr/web/api/eventsource/open_event/index.md
@@ -21,7 +21,8 @@ evtSource.onopen = function () {
 };
 ```
 
-> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
+> [!NOTE]
+> Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
 
 ## Spécifications
 
diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md
index 5ec2f21c9866a6..d0c8c23529545f 100644
--- a/files/fr/web/api/eventtarget/addeventlistener/index.md
+++ b/files/fr/web/api/eventtarget/addeventlistener/index.md
@@ -39,7 +39,8 @@ target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-stand
 - `useCapture` {{optional_inline}}
   - : Un booléen ({{jsxref("Boolean")}}) indiquant si les évènements de ce type seront distribués au `listener` enregistré avant d'être distribués à toute `EventTarget` (« cible d'évènement ») située en dessous dans l'arborescence DOM. Les évènements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'évènements sont deux manières de propager des évènements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet évènement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'évènement. Voir les [DOM Level 3 Events](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) et [JavaScript Event order](http://www.quirksmode.org/js/events_order.html#link4) pour une explication détaillée. S'il n'est pas spécifié, `useCapture` aura `false` comme valeur par défaut.
 
-> **Note :** Pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre `useCapture`.
+> [!NOTE]
+> Pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre `useCapture`.
 
 > **Note :** `useCapture` n'a pas toujours été facultatif. Idéalement, vous devriez l'inclure pour une compatibilité navigateur la plus large possible.
 
@@ -599,13 +600,15 @@ myButton.addEventListener("click", function () {
 console.log(someString); // Valeur attendue : 'Donnée' (ne donnera jamais 'Encore des données')
 ```
 
-> **Note :** Bien que les portées internes aient accès aux variables `const` et `let` depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourrait avoir déjà fini de s'exécuter.
+> [!NOTE]
+> Bien que les portées internes aient accès aux variables `const` et `let` depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourrait avoir déjà fini de s'exécuter.
 
 #### Passer des données à et depuis un écouteur d'évènements en utilisant des objets
 
 A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, plus le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés par référence, en font des candidats pertinents pour partager des données entre les portées. Explorons cela.
 
-> **Note :** Les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)
+> [!NOTE]
+> Les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)
 
 Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :
 
@@ -629,9 +632,11 @@ window.setInterval(function () {
 
 Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de `unObjet.unePropriete` ait changé, du fait que `someObject` persiste en mémoire (par référence) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).
 
-> **Note :** Les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., `let a = b = {aProperty: 'Ouai'};`), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.
+> [!NOTE]
+> Les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., `let a = b = {aProperty: 'Ouai'};`), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.
 
-> **Note :** Du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.
+> [!NOTE]
+> Du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.
 
 ### Prise en charge d'Internet Explorer et attachEvent
 
@@ -833,7 +838,8 @@ D'après la spécification, la valeur par défaut pour l'option `passive` est to
 
 Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option `passive` à `true` pour les évènements [`touchstart`](/fr/docs/Web/API/Element/touchstart_event) et [`touchmove`](/fr/docs/Web/API/Element/touchmove_event) dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.
 
-> **Note :** Voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.
+> [!NOTE]
+> Voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.
 
 Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de `passive` à `false`, comme montré ci-dessous :
 
diff --git a/files/fr/web/api/extendableevent/index.md b/files/fr/web/api/extendableevent/index.md
index 31bd1f7b2e9f4f..282358221af387 100644
--- a/files/fr/web/api/extendableevent/index.md
+++ b/files/fr/web/api/extendableevent/index.md
@@ -9,13 +9,15 @@ L'interface **`ExtendableEvent`** étend la durée de vie des événements [`ins
 
 Si [`waitUntil()`](/fr/docs/Web/API/ExtendableEvent/waitUntil) est appelé en dehors du gestionnaire `ExtendableEvent`, le navigateur doit lever une exception `InvalidStateError` ; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des [promesses à vie étendue](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises).
 
-> **Note :** Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir [le bug 1180274](https://bugzilla.mozilla.org/show_bug.cgi?id=1180274)).
+> [!NOTE]
+> Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir [le bug 1180274](https://bugzilla.mozilla.org/show_bug.cgi?id=1180274)).
 
 Cette interface hérite de l'interface [`Event`](/fr/docs/Web/API/Event).
 
 {{InheritanceDiagram(700, 60, 20)}}
 
-> **Note :** Cette interface est disponible seulement quand la portée globale est [`ServiceWorkerGlobalScope`](/fr/docs/Web/API/ServiceWorkerGlobalScope). Elle n'est pas disponible quand c'est un objet [`Window`](/fr/docs/Web/API/Window) ou un autre type de worker.
+> [!NOTE]
+> Cette interface est disponible seulement quand la portée globale est [`ServiceWorkerGlobalScope`](/fr/docs/Web/API/ServiceWorkerGlobalScope). Elle n'est pas disponible quand c'est un objet [`Window`](/fr/docs/Web/API/Window) ou un autre type de worker.
 
 ## Constructeur
 
@@ -80,7 +82,8 @@ self.addEventListener("install", function (event) {
 });
 ```
 
-> **Attention :** Au moment du chargement des ressources, il est très important d'utiliser `{mode: 'no-cors'}` s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). Dans cet exemple, [www.chromium.org](https://www.chromium.org) ne prend pas en charge le CORS.
+> [!WARNING]
+> Au moment du chargement des ressources, il est très important d'utiliser `{mode: 'no-cors'}` s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). Dans cet exemple, [www.chromium.org](https://www.chromium.org) ne prend pas en charge le CORS.
 
 ## Spécifications
 
diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md
index 2b54ed77c6b1c7..740f92f3808bbe 100644
--- a/files/fr/web/api/fetch/index.md
+++ b/files/fr/web/api/fetch/index.md
@@ -13,7 +13,8 @@ Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand
 
 La méthode `fetch()` est contrôlée par la directive `connect-src` de l'entête [Content Security Policy](/fr/docs/Web/HTTP/Headers/Content-Security-Policy) plutôt que par la directive de la ressource qui est récupérée.
 
-> **Note :** Les paramètres de la méthode `fetch()` sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.
+> [!NOTE]
+> Les paramètres de la méthode `fetch()` sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/fetch_api/index.md b/files/fr/web/api/fetch_api/index.md
index b02e2c57149897..268e4c7462a12e 100644
--- a/files/fr/web/api/fetch_api/index.md
+++ b/files/fr/web/api/fetch_api/index.md
@@ -21,7 +21,8 @@ Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble d
 
 Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des _service workers_).
 
-> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/fr/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/fr/docs/Web/API/Fetch_API/Basic_concepts).
+> [!NOTE]
+> Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/fr/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/fr/docs/Web/API/Fetch_API/Basic_concepts).
 
 ### Interrompre un fetch
 
diff --git a/files/fr/web/api/fetch_api/using_fetch/index.md b/files/fr/web/api/fetch_api/using_fetch/index.md
index 9179c175b4f7c0..6b7552f127e862 100644
--- a/files/fr/web/api/fetch_api/using_fetch/index.md
+++ b/files/fr/web/api/fetch_api/using_fetch/index.md
@@ -25,7 +25,8 @@ Dans cet exemple, nous récupérons un fichier JSON sur le Web, puis on analyse
 
 L'objet [`Response`](/fr/docs/Web/API/Response) ne contient pas directement le corps de la réponse en JSON mais fournit une représentation de l'ensemble de la réponse HTTP. Aussi, pour extraire le corps en JSON de l'objet [`Response`](/fr/docs/Web/API/Response), on utilise la méthode [`json()`](/fr/docs/Web/API/Response/json), qui renvoie une deuxième promesse dont la résolution fournit le résultat de l'analyse du corps de la réponse au format JSON.
 
-> **Note :** Voir la section [corps](#corps) pour d'autres méthodes permettant d'extraire d'autres types de contenu du corps de la réponse.
+> [!NOTE]
+> Voir la section [corps](#corps) pour d'autres méthodes permettant d'extraire d'autres types de contenu du corps de la réponse.
 
 Les requêtes de récupération sont contrôlées par la directive `connect-src` de [la politique de sécurité du contenu (<i lang="en">Content Security Policy</i> ou CSP)](/fr/docs/Web/HTTP/Headers/Content-Security-Policy) plutôt que par la directive de la ressource qu'elles récupèrent.
 
@@ -104,9 +105,11 @@ fetch("https://example.com", {
 });
 ```
 
-> **Note :** On ne pourra pas utiliser `Access-Control-Allow-Origin: *` pour les requêtes avec `credentials: 'include'`. Pour ces cas-là, il faut fournir l'origine exacte. Même si une extension de débridage du CORS est utilisée, la requête échouera.
+> [!NOTE]
+> On ne pourra pas utiliser `Access-Control-Allow-Origin: *` pour les requêtes avec `credentials: 'include'`. Pour ces cas-là, il faut fournir l'origine exacte. Même si une extension de débridage du CORS est utilisée, la requête échouera.
 
-> **Note :** Les navigateurs ne devraient pas envoyer d'informations d'authentification dans les _requêtes préparatoires_ (<i lang="en">preflight requests</i>), quelle que soit la valeur de cette option. Pour plus d'informations, voir [la section de la page CORS sur les requêtes avec informations d'authentification](/fr/docs/Web/HTTP/CORS#requêtes_avec_informations_dauthentification).
+> [!NOTE]
+> Les navigateurs ne devraient pas envoyer d'informations d'authentification dans les _requêtes préparatoires_ (<i lang="en">preflight requests</i>), quelle que soit la valeur de cette option. Pour plus d'informations, voir [la section de la page CORS sur les requêtes avec informations d'authentification](/fr/docs/Web/HTTP/CORS#requêtes_avec_informations_dauthentification).
 
 Si on souhaite uniquement envoyer les informations d'authentification lorsque l'URL de la requête se situe sur la même origine que le script appelant, on utilisera `credentials: 'same-origin'`.
 
@@ -311,7 +314,8 @@ const uneAutreRequete = new Request(maRequete, monInit);
 
 Ce mécanisme de duplication est plutôt utile, car les corps des requêtes et des réponses ne peuvent être utilisés qu'une seule fois. En construisant une telle copie, on peut à nouveau utiliser la requête ou la réponse tout en adaptant les options `init` si besoin. Attention, la copie doit être effectuée avant que le corps ait été lu.
 
-> **Note :** Il existe également la méthode [`clone()`](/fr/docs/Web/API/Request/clone) pour créer une copie. Ces deux méthodes de copie échoueront si le corps de la requête ou de la réponse originale a déjà été lu. En revanche, lire le corps d'une réponse ou d'une requête clonée ne modifiera pas l'état de lecture de l'original.
+> [!NOTE]
+> Il existe également la méthode [`clone()`](/fr/docs/Web/API/Request/clone) pour créer une copie. Ces deux méthodes de copie échoueront si le corps de la requête ou de la réponse originale a déjà été lu. En revanche, lire le corps d'une réponse ou d'une requête clonée ne modifiera pas l'état de lecture de l'original.
 
 ## En-têtes
 
@@ -398,7 +402,8 @@ Les valeurs pour `guard` sont&nbsp;:
 - `immutable`
   - : Une garde qui indique que l'objet d'en-têtes est en lecture seule. Elle est principalement utilisée pour les <i lang="en">service workers</i>.
 
-> **Note :** Il n'est pas possible d'ajouter ou de modifier l'en-tête `Content-Length` d'un objet d'en-têtes de réponse avec une garde. De même, on ne pourra pas insérer d'en-tête `Set-Cookie` pour une réponse&nbsp;: les <i lang="en">service workers</i> ne sont pas autorisés à écrire des cookies dans des réponses de synthèse.
+> [!NOTE]
+> Il n'est pas possible d'ajouter ou de modifier l'en-tête `Content-Length` d'un objet d'en-têtes de réponse avec une garde. De même, on ne pourra pas insérer d'en-tête `Set-Cookie` pour une réponse&nbsp;: les <i lang="en">service workers</i> ne sont pas autorisés à écrire des cookies dans des réponses de synthèse.
 
 ## Objets `Response`
 
@@ -433,7 +438,8 @@ Le constructeur [`Response()`](/fr/docs/Web/API/Response/Response) prend deux ar
 - Un corps pour la réponse
 - Un objet d'initialisation des paramètres, semblable à celui qu'on fournit au constructeur [`Request()`](/fr/docs/Web/API/Request/Request).
 
-> **Note :** La méthode statique [`error()`](/fr/docs/Web/API/Response/error_static) renvoie une réponse d'erreur. De même, [`redirect()`](/fr/docs/Web/API/Response/redirect_static) renvoie une réponse résultant en une redirection vers l'URL indiquée. Ces méthodes sont uniquement pertinentes dans le cadre des <i lang="en">service workers</i>.
+> [!NOTE]
+> La méthode statique [`error()`](/fr/docs/Web/API/Response/error_static) renvoie une réponse d'erreur. De même, [`redirect()`](/fr/docs/Web/API/Response/redirect_static) renvoie une réponse résultant en une redirection vers l'URL indiquée. Ces méthodes sont uniquement pertinentes dans le cadre des <i lang="en">service workers</i>.
 
 ## Corps
 
@@ -456,7 +462,8 @@ Les interfaces [`Request`](/fr/docs/Web/API/Request) et [`Response`](/fr/docs/We
 - [`Request.json()`](/fr/docs/Web/API/Request/json) / [`Response.json()`](/fr/docs/Web/API/Response/json)
 - [`Request.text()`](/fr/docs/Web/API/Request/text) / [`Response.text()`](/fr/docs/Web/API/Response/text)
 
-> **Note :** Ces méthodes permettent de travailler plus facilement avec du contenu non-textuel (par rapport à ce que permettait `XMLHttpRequest`).
+> [!NOTE]
+> Ces méthodes permettent de travailler plus facilement avec du contenu non-textuel (par rapport à ce que permettait `XMLHttpRequest`).
 
 On peut fournir des corps aux requêtes en utilisant le deuxième paramètre et sa propriété `form`&nbsp;:
 
diff --git a/files/fr/web/api/filelist/index.md b/files/fr/web/api/filelist/index.md
index 74cf9bea50f9d5..d22f3fd22beff7 100644
--- a/files/fr/web/api/filelist/index.md
+++ b/files/fr/web/api/filelist/index.md
@@ -21,7 +21,8 @@ On pourra utiliser la ligne de code suivante pour récupérer le premier fichier
 const file = document.getElementById("fileItem").files[0];
 ```
 
-> **Note :** Cette interface [se voulait une tentative de modélisation d'une liste non-modifiable](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156) et continue uniquement d'être prise en charge pour ne pas casser le code qui l'utilise encore. Les API plus récentes utilisent des types qui se basent sur le type ECMAScript [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array), afin que les objets puissent être traités comme des tableaux tout en imposant une sémantique additionnelle correspondant à leur utilisation (par exemple, en marquant leurs éléments comme étant en lecture seule).
+> [!NOTE]
+> Cette interface [se voulait une tentative de modélisation d'une liste non-modifiable](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156) et continue uniquement d'être prise en charge pour ne pas casser le code qui l'utilise encore. Les API plus récentes utilisent des types qui se basent sur le type ECMAScript [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array), afin que les objets puissent être traités comme des tableaux tout en imposant une sémantique additionnelle correspondant à leur utilisation (par exemple, en marquant leurs éléments comme étant en lecture seule).
 
 ## Propriétés des instances
 
diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.md b/files/fr/web/api/filereader/readasarraybuffer/index.md
index 9e7ccdcb421a36..d0f4df766f1687 100644
--- a/files/fr/web/api/filereader/readasarraybuffer/index.md
+++ b/files/fr/web/api/filereader/readasarraybuffer/index.md
@@ -7,7 +7,8 @@ slug: Web/API/FileReader/readAsArrayBuffer
 
 La méthode **`readAsArrayBuffer()`** de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (_fichier_). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur `"DONE"` (_terminé_) à savoir `2`, et l'événement [`loadend`](/fr/docs/Web/API/FileReader/loadend_event) est levé. L'attribut {{domxref("FileReader.result","result")}} (_résultat_) contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.
 
-> **Note :** La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.
+> [!NOTE]
+> La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md
index 1641c18e871ce2..932f6e125ef485 100644
--- a/files/fr/web/api/filereader/readasdataurl/index.md
+++ b/files/fr/web/api/filereader/readasdataurl/index.md
@@ -9,7 +9,8 @@ l10n:
 
 La méthode **`FileReader.readAsDataURL()`** est utilisée afin de lire le contenu d'un blob ([`Blob`](/fr/docs/Web/API/Blob)) ou d'un fichier ([`File`](/fr/docs/Web/API/File)). Lorsque l'opération de lecture est terminée, [`readyState`](/fr/docs/Web/API/FileReader/readyState) prend la valeur `DONE`, et l'évènement [`loadend`](/fr/docs/Web/API/XMLHttpRequest/loadend_event) est déclenché. À partir de ce moment, la propriété [`result`](/fr/docs/Web/API/FileReader/result) contient les données sous la forme d'une [URL de données](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) qui représente les données du fichier sous la forme d'une chaîne de caractères encodée en base64.
 
-> **Note :** Pour un blob, [`result`](/fr/docs/Web/API/FileReader/result) ne peut pas être décodé en base64 sans avoir d'abord retiré la déclaration d'URL de données qui précède les données encodées. Pour récupérer uniquement la chaîne encodée en base 64, il faut d'abord supprimer le préfixe `data:*/*;base64,` du résultat.
+> [!NOTE]
+> Pour un blob, [`result`](/fr/docs/Web/API/FileReader/result) ne peut pas être décodé en base64 sans avoir d'abord retiré la déclaration d'URL de données qui précède les données encodées. Pour récupérer uniquement la chaîne encodée en base 64, il faut d'abord supprimer le préfixe `data:*/*;base64,` du résultat.
 
 ## Syntaxe
 
@@ -108,7 +109,8 @@ function previewFiles() {
 }
 ```
 
-> **Note :** Le constructeur [`FileReader()`](/fr/docs/Web/API/FileReader) n'était pas pris en charge pour les versions d'Internet Explorer antérieures à IE 10. Vous pouvez voir [notre exemple de solution compatible entre les navigateurs pour la prévisualisation d'image](https://mdn.dev/archives/media/attachments/2012/07/09/3699/2c8cb1e94f0ee05b22c1c30a3790c70d/crossbrowser_image_preview.html), ainsi que [cet autre exemple encore plus puissant](https://mdn.dev/archives/media/attachments/2012/07/09/3698/391aef19653595a663cc601c42a67116/image_upload_preview.html).
+> [!NOTE]
+> Le constructeur [`FileReader()`](/fr/docs/Web/API/FileReader) n'était pas pris en charge pour les versions d'Internet Explorer antérieures à IE 10. Vous pouvez voir [notre exemple de solution compatible entre les navigateurs pour la prévisualisation d'image](https://mdn.dev/archives/media/attachments/2012/07/09/3699/2c8cb1e94f0ee05b22c1c30a3790c70d/crossbrowser_image_preview.html), ainsi que [cet autre exemple encore plus puissant](https://mdn.dev/archives/media/attachments/2012/07/09/3698/391aef19653595a663cc601c42a67116/image_upload_preview.html).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/formdata/append/index.md b/files/fr/web/api/formdata/append/index.md
index 0aba1071b88b88..289c1007c75344 100644
--- a/files/fr/web/api/formdata/append/index.md
+++ b/files/fr/web/api/formdata/append/index.md
@@ -11,7 +11,8 @@ La méthode **`append()`** de l'interface {{domxref("FormData")}} ajoute une nou
 
 La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
@@ -31,7 +32,8 @@ formData.append(name, value, filename);
 - `filename` {{optional_inline}}
   - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet.
 
-> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.
+> [!NOTE]
+> Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.
 
 ### Retours
 
diff --git a/files/fr/web/api/formdata/delete/index.md b/files/fr/web/api/formdata/delete/index.md
index 106a5cdbb98ad4..b0ad2a84690847 100644
--- a/files/fr/web/api/formdata/delete/index.md
+++ b/files/fr/web/api/formdata/delete/index.md
@@ -9,7 +9,8 @@ slug: Web/API/FormData/delete
 
 La méthode **`delete()`** de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet `FormData`.
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/formdata/entries/index.md b/files/fr/web/api/formdata/entries/index.md
index 203c46bd627494..4779783be8e0ff 100644
--- a/files/fr/web/api/formdata/entries/index.md
+++ b/files/fr/web/api/formdata/entries/index.md
@@ -10,7 +10,8 @@ slug: Web/API/FormData/entries
 La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet.
 La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.
 
-> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/formdata/formdata/index.md b/files/fr/web/api/formdata/formdata/index.md
index 6081c22bc07a8c..4677184b743bdf 100644
--- a/files/fr/web/api/formdata/formdata/index.md
+++ b/files/fr/web/api/formdata/formdata/index.md
@@ -9,7 +9,8 @@ slug: Web/API/FormData/FormData
 
 Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}.
 
-> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
@@ -56,7 +57,8 @@ Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet
 </form>
 ```
 
-> **Note :** Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut `name`), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).
+> [!NOTE]
+> Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut `name`), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).
 
 ```js
 var myForm = document.getElementById("myForm");
diff --git a/files/fr/web/api/formdata/get/index.md b/files/fr/web/api/formdata/get/index.md
index 4fbc07d1586c2f..0cfa3f02e0f5e1 100644
--- a/files/fr/web/api/formdata/get/index.md
+++ b/files/fr/web/api/formdata/get/index.md
@@ -9,7 +9,8 @@ slug: Web/API/FormData/get
 
 La méthode **`get()`** de l'interface [`FormData`](/fr/docs/Web/API/FormData) renvoie la première valeur associée à une clé donnée dans un objet `FormData`. Si vous souhaitez manipuler plusieurs valeurs et les récupérer intégralement, utilisez plutôt la méthode [`getAll()`](/fr/docs/Web/API/FormData/getAll).
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/formdata/getall/index.md b/files/fr/web/api/formdata/getall/index.md
index 0c0387fdb7e519..fe285b64b45f4f 100644
--- a/files/fr/web/api/formdata/getall/index.md
+++ b/files/fr/web/api/formdata/getall/index.md
@@ -9,7 +9,8 @@ slug: Web/API/FormData/getAll
 
 La méthode **`getAll()`** de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet `FormData`.
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/formdata/has/index.md b/files/fr/web/api/formdata/has/index.md
index 05c8b1f5040efb..6ea9f24ee43a66 100644
--- a/files/fr/web/api/formdata/has/index.md
+++ b/files/fr/web/api/formdata/has/index.md
@@ -9,7 +9,8 @@ slug: Web/API/FormData/has
 
 La méthode **`has()`** de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet `FormData` contient une certaine clé.
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/formdata/index.md b/files/fr/web/api/formdata/index.md
index 2c49ea5076547b..bbf875189772ef 100644
--- a/files/fr/web/api/formdata/index.md
+++ b/files/fr/web/api/formdata/index.md
@@ -13,7 +13,8 @@ Vous pouvez également le passer directement au constructeur [`URLSearchParams`]
 
 Un objet implémentant `FormData` peut être utilisé directement dans une structure [`for…of`](/fr/docs/Web/JavaScript/Reference/Statements/for...of), au lieu de [`entries()`](/fr/docs/Web/API/FormData/entries)&nbsp;: `for (var p of myFormData)` est équivalent à `for (var p of myFormData.entries())`.
 
-> **Note :** Cette fonctionnalité est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette fonctionnalité est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Constructeur
 
diff --git a/files/fr/web/api/formdata/keys/index.md b/files/fr/web/api/formdata/keys/index.md
index ef3c79c74db744..2c3f5477c1a9af 100644
--- a/files/fr/web/api/formdata/keys/index.md
+++ b/files/fr/web/api/formdata/keys/index.md
@@ -9,7 +9,8 @@ slug: Web/API/FormData/keys
 
 La méthode `FormData.keys()` renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/formdata/set/index.md b/files/fr/web/api/formdata/set/index.md
index 88d9d4b671b7af..0f9cbc578b363a 100644
--- a/files/fr/web/api/formdata/set/index.md
+++ b/files/fr/web/api/formdata/set/index.md
@@ -11,7 +11,8 @@ La méthode `set()` de l'interface {{domxref("FormData")}} définit une nouvelle
 
 La différence entre `set()` et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, `set()` écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
@@ -31,7 +32,8 @@ formData.set(name, value, filename);
 - `filename` {{optional_inline}}
   - : Le nom de fichier communiqué au serveur (un {{domxref("USVString")}}), lorsqu'un {{domxref("Blob")}} ou un {{domxref("File")}} est passée comme deuxième paramètre. Le nom de fichier par défaut pour les objets {{domxref("Blob")}} est "blob". Le nom de fichier par défaut pour les objets {{domxref("File")}} est le nom du fichier.
 
-> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.
+> [!NOTE]
+> Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.
 
 ## Exemple
 
diff --git a/files/fr/web/api/formdata/values/index.md b/files/fr/web/api/formdata/values/index.md
index 0df7491ce34bb0..21a27a4aaa2675 100644
--- a/files/fr/web/api/formdata/values/index.md
+++ b/files/fr/web/api/formdata/values/index.md
@@ -9,7 +9,8 @@ slug: Web/API/FormData/values
 
 La méthode **`FormData.values()`** renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.
 
-> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/fullscreen_api/index.md b/files/fr/web/api/fullscreen_api/index.md
index e1180fc7683ce1..d0744efb314830 100644
--- a/files/fr/web/api/fullscreen_api/index.md
+++ b/files/fr/web/api/fullscreen_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Fullscreen_API
 
 L'**API Fullscreen** _(plein écran)_ fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.
 
-> **Note :** Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les [préfixes](#Préfixes) et les différences de noms entre eux (vous pouvez également utiliser [Fscreen](https://github.com/rafrex/fscreen) pour l'accès du fournisseur à l'API).
+> [!NOTE]
+> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les [préfixes](#Préfixes) et les différences de noms entre eux (vous pouvez également utiliser [Fscreen](https://github.com/rafrex/fscreen) pour l'accès du fournisseur à l'API).
 
 ## Activation du mode plein écran
 
@@ -52,7 +53,8 @@ Quand le mode plein écran est activé, le document qui contient l'élément re
 
 Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut [`allowfullscreen`](/fr/docs/HTML/Element/allowfullscreen#iframe) pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement `mozfullscreenerror` . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.
 
-> **Note :** Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.
+> [!NOTE]
+> Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.
 
 ## Sortie du mode plein écran
 
diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
index 42c79ff71c4a41..3e4c6076b66f4b 100644
--- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -13,7 +13,8 @@ L'API [<i lang="en">Gamepad</i>](/fr/docs/Web/API/Gamepad_API) introduit de nouv
 
 Lorsqu'une nouvelle manette est connectée à l'ordinateur, la page qui a le focus reçoit d'abord un évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event). Si une manette est déjà connectée lorsque la page est chargée, l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) est émis sur la page lorsque la personne appuie sur un bouton ou déplace un axe.
 
-> **Note :** Dans Firefox, les manettes sont uniquement exposées à la page après qu'il y a eu une interaction de la personne avec la page. Cela permet d'éviter à ce que les manettes soient utilisées pour créer une empreinte, de faciliter le pistage. Une fois qu'une manette a interagi avec la page, les autres manettes connectées seront automatiquement visibles.
+> [!NOTE]
+> Dans Firefox, les manettes sont uniquement exposées à la page après qu'il y a eu une interaction de la personne avec la page. Cela permet d'éviter à ce que les manettes soient utilisées pour créer une empreinte, de faciliter le pistage. Une fois qu'une manette a interagi avec la page, les autres manettes connectées seront automatiquement visibles.
 
 On peut utiliser [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) comme ceci&nbsp;:
 
@@ -122,7 +123,8 @@ Les propriétés d'un objet [`Gamepad`](/fr/docs/Web/API/Gamepad) sont&nbsp;:
 - `timestamp`
   - : : Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) indiquant le dernier instant auquel les données des manettes ont été mises à jour. Cela permet de déterminer si les données fournies par `axes` et `button` ont été mises à jour par le matériel. Cette valeur doit être relative à l'attribut `navigationStart` de l'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming). Les valeurs augmentent de façon monotone, ce qui signifie qu'on peut les comparer pour déterminer l'ordre des mises à jour (les valeurs les plus récentes seront toujours supérieures aux valeurs antérieures). Cette propriété n'est actuellement pas prise en charge par Firefox.
 
-> **Note :** L'objet `Gamepad` est disponible sur l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) plutôt que sur l'objet [`Window`](/fr/docs/Web/API/Window) pour des raisons de sécurité. Une fois qu'une référence est obtenue, on peut consulter ses propriétés pour obtenir des informations à propos de la manette. Sous le capot, cet objet est mis à jour à chaque fois que l'état de la manette change.
+> [!NOTE]
+> L'objet `Gamepad` est disponible sur l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) plutôt que sur l'objet [`Window`](/fr/docs/Web/API/Window) pour des raisons de sécurité. Une fois qu'une référence est obtenue, on peut consulter ses propriétés pour obtenir des informations à propos de la manette. Sous le capot, cet objet est mis à jour à chaque fois que l'état de la manette change.
 
 ### Utiliser les informations des boutons
 
diff --git a/files/fr/web/api/geolocation/index.md b/files/fr/web/api/geolocation/index.md
index 8995c450873bc9..0098394acf8350 100644
--- a/files/fr/web/api/geolocation/index.md
+++ b/files/fr/web/api/geolocation/index.md
@@ -9,7 +9,8 @@ En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un or
 
 On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} .
 
-> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.
+> [!NOTE]
+> Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.
 
 ## Propriétés
 
diff --git a/files/fr/web/api/geolocation/watchposition/index.md b/files/fr/web/api/geolocation/watchposition/index.md
index 31a4f89b2301b7..5c16257db135e5 100644
--- a/files/fr/web/api/geolocation/watchposition/index.md
+++ b/files/fr/web/api/geolocation/watchposition/index.md
@@ -58,7 +58,8 @@ options = {
 id = navigator.geolocation.watchPosition(success, error, options);
 ```
 
-> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](/fr/docs/Web/API/Geolocation/navigator.requestWakeLock) pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.
+> [!NOTE]
+> Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](/fr/docs/Web/API/Geolocation/navigator.requestWakeLock) pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.
 
 ## Spécifications
 
diff --git a/files/fr/web/api/headers/index.md b/files/fr/web/api/headers/index.md
index 0bc44f9431503b..9bbc7533af4536 100644
--- a/files/fr/web/api/headers/index.md
+++ b/files/fr/web/api/headers/index.md
@@ -15,7 +15,8 @@ Vous pouvez récuperer un objet `Header` via les propriétés {{domxref("Request
 
 Un objet implémentant `Headers` peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: `for (var p of myHeaders)` est équivalent à `for (var p of myHeaders.entries())`.
 
-> **Note :** Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : [HTTP headers](/fr/docs/Web/HTTP/Headers).
+> [!NOTE]
+> Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : [HTTP headers](/fr/docs/Web/HTTP/Headers).
 
 ## Constructeur
 
@@ -43,11 +44,14 @@ Un objet implémentant `Headers` peut directement être utilisé dans une struct
 - {{domxref("Headers.values()")}}
   - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.
 
-> **Note :** Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.
+> [!NOTE]
+> Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.
 
-> **Note :** Toutes les méthodes Headers vont retourner `TypeError` si vous essayez de passer dans une réfférenceun nom qui n'est pas un [nom de Header HTTP valide](https://fetch.spec.whatwg.org/#concept-header-name). Les opérations de mutation vont retourner `TypeError` si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.
+> [!NOTE]
+> Toutes les méthodes Headers vont retourner `TypeError` si vous essayez de passer dans une réfférenceun nom qui n'est pas un [nom de Header HTTP valide](https://fetch.spec.whatwg.org/#concept-header-name). Les opérations de mutation vont retourner `TypeError` si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.
 
-> **Note :** Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.
+> [!NOTE]
+> Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.
 
 ### Méthodes obsolètes
 
diff --git a/files/fr/web/api/history/index.md b/files/fr/web/api/history/index.md
index cf33a01438dbe4..05712af1edde09 100644
--- a/files/fr/web/api/history/index.md
+++ b/files/fr/web/api/history/index.md
@@ -30,13 +30,15 @@ _L'interface `History`_ _n'hérite d'aucune méthode._
 
   - : Recule vers la page précédente dans l'historique de navigation, soit la même action que lorsque l'utilsateur clique le bouton Précédent du navigateur. Equivalent de `history.go(-1)`.
 
-    > **Note :** Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n'a aucun effet et ne déclenche pas d'exception.
+    > [!NOTE]
+    > Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n'a aucun effet et ne déclenche pas d'exception.
 
 - {{domxref("History.forward()")}}
 
   - : Avance vers la page suivante dans l'historique de navigation, soit la même action que lorsque l'utilsateur clique le bouton Suivant du navigateur. Equivalent de `history.go(1)`.
 
-    > **Note :** Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n'a aucun effet et ne déclenche pas d'exception.
+    > [!NOTE]
+    > Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n'a aucun effet et ne déclenche pas d'exception.
 
 - {{domxref("History.go()")}}
   - : Charge une page dans l'historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` sort du cadre de l'historique (aka. -1 alors qu'il n'y a pas de page précédente), cette méthode n'aura aucun effet et ne déclenchera pas d'exception. Appeler `go()` sans paramètres ou un paramètre autre qu'un `Integer` n'a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)).
diff --git a/files/fr/web/api/history_api/index.md b/files/fr/web/api/history_api/index.md
index 2b59747af3e311..e9ec2e6a80550c 100644
--- a/files/fr/web/api/history_api/index.md
+++ b/files/fr/web/api/history_api/index.md
@@ -51,7 +51,8 @@ Vous pouvez déterminer le nombre de pages de l'historique en accédant à la va
 var numberOfEntries = window.history.length;
 ```
 
-> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko.
+> [!NOTE]
+> Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko.
 
 ## Ajouter et modifier des entrées de l'historique
 
@@ -83,7 +84,8 @@ Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer
 - **title** (**_titre_)** — Firefox, pour l'instant, ignore ce paramètre, bien qu'il puisse être utilisé plus tard. Afin de prévenir les changements futurs de cette méthode, il serait prudent de fournir ici, en paramètre, une chaîne vide. Vous pourriez aussi donner un titre court à l'état vers lequel vous vous dirigez.
 - **URL** — L'URL de la nouvelle entrée de l'historique est donnée par ce paramètre. Il convient de préciser que le navigateur n'essaiera pas de charger la page pointée par cette URL après un appel à `pushState()`, mais il se peut qu'il tente de le faire plus tard, par exemple, lorsque l'utilisateur relancera son navigateur. Il n'est pas nécessaire que la nouvelle URL soit absolue ; si elle est relative, ce sera par rapport à l'URL courante. La nouvelle URL doit avoir la même origine (domaine) que l'URL courante ; dans le cas contraire, `pushState()` génèrera une exception. Ce paramètre est optionnel ; s'il n'est pas spécifié, sa valeur par défaut est l'URL de la page courante.
 
-> **Note :** Dans Gecko 2.0 jusqu'à Gecko 5.0, l'objet fourni est sérialisé en utilisant JSON. À partir de Gecko 6.0, l'objet est sérialisé à l'aide de [l'algorithme de clonage structuré](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
+> [!NOTE]
+> Dans Gecko 2.0 jusqu'à Gecko 5.0, l'objet fourni est sérialisé en utilisant JSON. À partir de Gecko 6.0, l'objet est sérialisé à l'aide de [l'algorithme de clonage structuré](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
 
 On peut assimiler l'appel à `pushState()` à l'affectation `window.location = "#foo"`, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais `pushState()` a quelques avantages :
 
@@ -103,7 +105,8 @@ Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom `nul
 
 `replaceState()` est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.
 
-> **Note :** Dans Gecko 2.0 jusqu'à Gecko 5.0, l'objet fourni est sérialisé en utilisant JSON. À partir de Gecko 6.0, l'objet est sérialisé à l'aide de [l'algorithme de clonage structuré](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
+> [!NOTE]
+> Dans Gecko 2.0 jusqu'à Gecko 5.0, l'objet fourni est sérialisé en utilisant JSON. À partir de Gecko 6.0, l'objet est sérialisé à l'aide de [l'algorithme de clonage structuré](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
 
 ### Exemple de la méthode replaceState()
 
diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md
index 9c1addcfdf3295..2b47489a9f06b9 100644
--- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md
+++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations
 
 Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.
 
-> **Note :** Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.
+> [!NOTE]
+> Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.
 
 ## L'attribut draggable
 
diff --git a/files/fr/web/api/html_drag_and_drop_api/index.md b/files/fr/web/api/html_drag_and_drop_api/index.md
index 4a6fee534d7cfa..0015c9d4de8c31 100644
--- a/files/fr/web/api/html_drag_and_drop_api/index.md
+++ b/files/fr/web/api/html_drag_and_drop_api/index.md
@@ -32,7 +32,8 @@ Chaque [type d'évènement de déplacement](/fr/docs/Web/API/DragEvent#Event_typ
 | [`dragstart`](/fr/docs/Web/API/HTMLElement/dragstart_event) | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | …l'utilisateur commence à déplacer un élément (voir [démarrer une opération de glissement](/fr/docs/DragDrop/Drag_Operations#dragstart)).                                                 |
 | [`drop`](/fr/docs/Web/API/HTMLElement/drop_event)           | {{domxref('GlobalEventHandlers.ondrop','ondrop')}}           | …un élément est déposé sur une cible valide (voir [déposer un élément](/fr/docs/DragDrop/Drag_Operations#drop)).                                                                          |
 
-> **Note :** Les évènements `dragstart` et `dragend` ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.
+> [!NOTE]
+> Les évènements `dragstart` et `dragend` ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.
 
 ## Interfaces
 
diff --git a/files/fr/web/api/htmlbuttonelement/popovertargetaction/index.md b/files/fr/web/api/htmlbuttonelement/popovertargetaction/index.md
index d1cb292777b811..2b2f0ac5ed7772 100644
--- a/files/fr/web/api/htmlbuttonelement/popovertargetaction/index.md
+++ b/files/fr/web/api/htmlbuttonelement/popovertargetaction/index.md
@@ -64,7 +64,8 @@ if (supportsPopover()) {
 }
 ```
 
-> **Note :** Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
+> [!NOTE]
+> Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
 
 Vous pouvez essayer l'exemple ci-après. Affichez et masquez le <i lang="en">popover</i> en activant le bouton. Le <i lang="en">popover</i> `"auto"` peut également être fermé facilement («&nbsp;<i lang="en">light-dismissed</i>&nbsp;») en cliquant en dehors des limites du <i lang="en">popover</i>.
 
diff --git a/files/fr/web/api/htmlbuttonelement/popovertargetelement/index.md b/files/fr/web/api/htmlbuttonelement/popovertargetelement/index.md
index 53c09718588b4c..8f671a5277953e 100644
--- a/files/fr/web/api/htmlbuttonelement/popovertargetelement/index.md
+++ b/files/fr/web/api/htmlbuttonelement/popovertargetelement/index.md
@@ -58,7 +58,8 @@ if (supportsPopover()) {
 }
 ```
 
-> **Note :** Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
+> [!NOTE]
+> Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
 
 Vous pouvez essayer l'exemple ci-après. Affichez et masquez le <i lang="en">popover</i> en activant le bouton. Le <i lang="en">popover</i> `"auto"` peut également être fermé facilement («&nbsp;<i lang="en">light-dismissed</i>&nbsp;») en cliquant en dehors des limites du <i lang="en">popover</i>.
 
diff --git a/files/fr/web/api/htmlelement/accesskey/index.md b/files/fr/web/api/htmlelement/accesskey/index.md
index 197a5d3eea192a..3de19450f4c5bf 100644
--- a/files/fr/web/api/htmlelement/accesskey/index.md
+++ b/files/fr/web/api/htmlelement/accesskey/index.md
@@ -7,4 +7,5 @@ slug: Web/API/HTMLElement/accessKey
 
 La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.
 
-> **Note :** La propriété `Element.accessKey` est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).
+> [!NOTE]
+> La propriété `Element.accessKey` est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).
diff --git a/files/fr/web/api/htmlelement/dataset/index.md b/files/fr/web/api/htmlelement/dataset/index.md
index 00bd4c3e7f833c..91e28736f2a145 100644
--- a/files/fr/web/api/htmlelement/dataset/index.md
+++ b/files/fr/web/api/htmlelement/dataset/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLElement/dataset
 
 La propriété en lecture seule **`dataset`**, rattachée à l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement), fournit un accès en lecture/écriture aux [attributs de données (`data-*`)](/fr/docs/Web/HTML/Global_attributes/data-*) de l'élément. Elle expose un objet [`DOMStringMap`](/fr/docs/Web/API/DOMStringMap) avec un élément pour chaque attribut `data-*`.
 
-> **Note :** La propriété `dataset` elle-même peut être lue mais pas modifiée directement.
+> [!NOTE]
+> La propriété `dataset` elle-même peut être lue mais pas modifiée directement.
 > Pour appliquer des modifications, il faudra les appliquer sur chaque propriété contenue dans `dataset`, qui représente chacune un attribut de données.
 
 Un attribut HTML `data-*` et la propriété du DOM
diff --git a/files/fr/web/api/htmlelement/dir/index.md b/files/fr/web/api/htmlelement/dir/index.md
index 87338d5c24a9e9..837fae5b3d73a3 100644
--- a/files/fr/web/api/htmlelement/dir/index.md
+++ b/files/fr/web/api/htmlelement/dir/index.md
@@ -15,7 +15,8 @@ Lorsque la propriété `dir` d'un tableau vaut `rtl`, l'ordre des colonnes est a
 
 Lorsqua la propriété `dir` d'un élément vaut `auto`, la direction de l'élément est déterminée selon son premier caractère de direction fort ou, par défaut, la direction d'écriture de son élément parent.
 
-> **Note :** Les navigateurs peuvent permettre aux utilisatrices et utilisateurs de modifier la direction d'écriture des éléments [`<input>`](/fr/docs/Web/HTML/Element/input) et [`<textarea>`](/fr/docs/Web/HTML/Element/textarea) afin de faciliter l'édition du contenu. Chrome et Safari fournissent une option via le menu contextuel des champs de saisie, Internet Explorer et Edge (ancienne version) utilisent la combinaison de touches <kbd>Ctrl</kbd> + <kbd>Maj gauche</kbd> et <kbd>Ctrl</kbd> + <kbd>Maj droit</kbd>. Firefox utilise <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>X</kbd> mais _ne_ met _pas_ à jour la valeur de l'attribut **`dir`**.
+> [!NOTE]
+> Les navigateurs peuvent permettre aux utilisatrices et utilisateurs de modifier la direction d'écriture des éléments [`<input>`](/fr/docs/Web/HTML/Element/input) et [`<textarea>`](/fr/docs/Web/HTML/Element/textarea) afin de faciliter l'édition du contenu. Chrome et Safari fournissent une option via le menu contextuel des champs de saisie, Internet Explorer et Edge (ancienne version) utilisent la combinaison de touches <kbd>Ctrl</kbd> + <kbd>Maj gauche</kbd> et <kbd>Ctrl</kbd> + <kbd>Maj droit</kbd>. Firefox utilise <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>Maj</kbd> + <kbd>X</kbd> mais _ne_ met _pas_ à jour la valeur de l'attribut **`dir`**.
 
 ## Valeur
 
diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md
index 5e67453fc33cb9..3db6f853f16cd7 100644
--- a/files/fr/web/api/htmlelement/hidden/index.md
+++ b/files/fr/web/api/htmlelement/hidden/index.md
@@ -21,7 +21,8 @@ Des cas inappropriés d'utilisation comprennent :
 - le fait de cacher des panneaux dans une boîte de dialogue à onglets ;
 - le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.
 
-> **Note :** Des éléments qui ne sont pas `hidden` ne doivent pas faire référence à des éléments qui le sont.
+> [!NOTE]
+> Des éléments qui ne sont pas `hidden` ne doivent pas faire référence à des éléments qui le sont.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/htmlelement/style/index.md b/files/fr/web/api/htmlelement/style/index.md
index f22848b58ae0f7..fe41651d59a896 100644
--- a/files/fr/web/api/htmlelement/style/index.md
+++ b/files/fr/web/api/htmlelement/style/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLElement/style
 
 La propriété en lecture seule **`style`** renvoie le style _en incise_ d'un élément sous la forme d'un objet [`CSSStyleDeclaration`](/fr/docs/Web/API/CSSStyleDeclaration) contenant une liste de l'ensemble des propriétés de style pour cet élément dont les valeurs sont celles des attributs défini par [l'attribut HTML `style`](/fr/docs/Web/HTML/Global_attributes/style).
 
-> **Note :** Voir [la référence des propriétés CSS](/fr/docs/Web/CSS/CSS_Properties_Reference) pour une liste des propriétés CSS accessibles `style`. La propriété `style` possède la même priorité (la plus haute) dans la cascade que les déclarations de mise en forme effectuées en incise avec l'attribut `style`.
+> [!NOTE]
+> Voir [la référence des propriétés CSS](/fr/docs/Web/CSS/CSS_Properties_Reference) pour une liste des propriétés CSS accessibles `style`. La propriété `style` possède la même priorité (la plus haute) dans la cascade que les déclarations de mise en forme effectuées en incise avec l'attribut `style`.
 
 ## Valeur
 
diff --git a/files/fr/web/api/htmlelement/title/index.md b/files/fr/web/api/htmlelement/title/index.md
index aa2dd74584bd09..521bbe03a1debd 100644
--- a/files/fr/web/api/htmlelement/title/index.md
+++ b/files/fr/web/api/htmlelement/title/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLElement/title
 
 La propriété **`HTMLElement.title`** représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.
 
-> **Note :** Si un nœud n'a pas d'attribut `title`, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..
+> [!NOTE]
+> Si un nœud n'a pas d'attribut `title`, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..
 >
 > ```html
 > <div title="InfoCool">
diff --git a/files/fr/web/api/htmlelement/toggle_event/index.md b/files/fr/web/api/htmlelement/toggle_event/index.md
index 429845fcb45d79..67e496f27203bf 100644
--- a/files/fr/web/api/htmlelement/toggle_event/index.md
+++ b/files/fr/web/api/htmlelement/toggle_event/index.md
@@ -12,7 +12,8 @@ L'évènement **`toggle`** de l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLE
 - Si le <i lang="en">popover</i> passe de masqué à affiché, la propriété `event.oldState` sera définie sur `closed` et la propriété `event.newState` sera définie sur `open`.
 - Si le <i lang="en">popover</i> passe d'affiché à masqué, alors `event.oldState` sera `open` et `event.newState` sera `closed`.
 
-> **Note :** L'évènement `toggle` se comporte différemment lorsqu'il est déclenché sur les éléments [`<details>`](/fr/docs/Web/HTML/Element/details). Dans ce cas, il ne concerne pas les <i lang="en">popovers</i>, et se déclenche plutôt lorsque l'état `open`/`closed` d'un élément `<details>` est modifié. Consultez [la page sur l'évènement `toggle` de `HTMLDetailsElement`](/fr/docs/Web/API/HTMLDetailsElement/toggle_event) pour plus de détails.
+> [!NOTE]
+> L'évènement `toggle` se comporte différemment lorsqu'il est déclenché sur les éléments [`<details>`](/fr/docs/Web/HTML/Element/details). Dans ce cas, il ne concerne pas les <i lang="en">popovers</i>, et se déclenche plutôt lorsque l'état `open`/`closed` d'un élément `<details>` est modifié. Consultez [la page sur l'évènement `toggle` de `HTMLDetailsElement`](/fr/docs/Web/API/HTMLDetailsElement/toggle_event) pour plus de détails.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/htmlelement/togglepopover/index.md b/files/fr/web/api/htmlelement/togglepopover/index.md
index f4dfc49f333004..1f648b5069ebd5 100644
--- a/files/fr/web/api/htmlelement/togglepopover/index.md
+++ b/files/fr/web/api/htmlelement/togglepopover/index.md
@@ -38,7 +38,8 @@ togglePopover(force)
 
 ## Exemples
 
-> **Note :** Voir [la page d'exemples de l'API Popover](https://mdn.github.io/dom-examples/popover-api/) pour accéder à la collection complète des exemples de MDN relatifs aux <i lang="en">popovers</i>.
+> [!NOTE]
+> Voir [la page d'exemples de l'API Popover](https://mdn.github.io/dom-examples/popover-api/) pour accéder à la collection complète des exemples de MDN relatifs aux <i lang="en">popovers</i>.
 
 L'exemple qui suit est une version légèrement modifiée de [l'exemple d'interface d'aide](https://mdn.github.io/dom-examples/popover-api/toggle-help-ui/). L'exemple affiche/masque un <i lang="en">popover</i> en appuyant sur une touche particulière du clavier (lorsque la fenêtre de l'exemple a le focus).
 
diff --git a/files/fr/web/api/htmlformelement/elements/index.md b/files/fr/web/api/htmlformelement/elements/index.md
index e98ca7dce6ae22..21d0a1bd67546c 100644
--- a/files/fr/web/api/htmlformelement/elements/index.md
+++ b/files/fr/web/api/htmlformelement/elements/index.md
@@ -13,7 +13,8 @@ On peut accéder à un contrôle particulier du formulaire via la collection ren
 
 Avant HTML 5, l'objet renvoyé était un objet [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection), sur lequel `HTMLFormControlsCollection` est désormais basé.
 
-> **Note :** De la même façon, on peut obtenir la liste de tous les formulaires contenus dans un document donné en utilisant la propriété [`forms`](/fr/docs/Web/API/Document/forms).
+> [!NOTE]
+> De la même façon, on peut obtenir la liste de tous les formulaires contenus dans un document donné en utilisant la propriété [`forms`](/fr/docs/Web/API/Document/forms).
 
 ## Valeur
 
diff --git a/files/fr/web/api/htmlimageelement/image/index.md b/files/fr/web/api/htmlimageelement/image/index.md
index cd9e3f39f797f7..1bb5eeef4c8fa1 100644
--- a/files/fr/web/api/htmlimageelement/image/index.md
+++ b/files/fr/web/api/htmlimageelement/image/index.md
@@ -36,7 +36,8 @@ Cela équivaudrait à définir la balise HTML suivante dans le {{htmlelement("bo
 <img width="100" height="200" src="picture.jpg" />
 ```
 
-> **Note :** Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.
+> [!NOTE]
+> Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.
 
 ## Spécifications
 
diff --git a/files/fr/web/api/htmlinputelement/popovertargetaction/index.md b/files/fr/web/api/htmlinputelement/popovertargetaction/index.md
index f0795419740128..a8974d8d852fe3 100644
--- a/files/fr/web/api/htmlinputelement/popovertargetaction/index.md
+++ b/files/fr/web/api/htmlinputelement/popovertargetaction/index.md
@@ -70,7 +70,8 @@ if (supportsPopover()) {
 }
 ```
 
-> **Note :** Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
+> [!NOTE]
+> Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
 
 #### Résultat
 
diff --git a/files/fr/web/api/htmlinputelement/popovertargetelement/index.md b/files/fr/web/api/htmlinputelement/popovertargetelement/index.md
index d6c373e7900da5..00de73ea1f4f2d 100644
--- a/files/fr/web/api/htmlinputelement/popovertargetelement/index.md
+++ b/files/fr/web/api/htmlinputelement/popovertargetelement/index.md
@@ -62,7 +62,8 @@ if (supportsPopover()) {
 }
 ```
 
-> **Note :** Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
+> [!NOTE]
+> Un élément <i lang="en">popover</i> est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
 
 ### Résultat
 
diff --git a/files/fr/web/api/htmlmediaelement/buffered/index.md b/files/fr/web/api/htmlmediaelement/buffered/index.md
index 7bd8b2c687cc74..bc2ca8e277156d 100644
--- a/files/fr/web/api/htmlmediaelement/buffered/index.md
+++ b/files/fr/web/api/htmlmediaelement/buffered/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLMediaElement/buffered
 
 La propriété **`buffered`** est une propriété en lecture seule rattachée à l'interface [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) et qui renvoie un nouvel [objet `TimeRanges` normalisé](/fr/docs/Web/API/TimeRanges#objets_timeranges_normalisés) statique représentant les plages de la ressource média, s'il y en a, que l'agent utilisateur a mises en mémoire tampon au moment de l'accès à la propriété `buffered`.
 
-> **Note :** Cette fonctionnalité n'est pas disponible au niveau des [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> Cette fonctionnalité n'est pas disponible au niveau des [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.md b/files/fr/web/api/htmlmediaelement/ended_event/index.md
index 376d07295e6b74..00164105271791 100644
--- a/files/fr/web/api/htmlmediaelement/ended_event/index.md
+++ b/files/fr/web/api/htmlmediaelement/ended_event/index.md
@@ -32,7 +32,8 @@ L'événement se produit dans deux contextes liés mais unique:
 - Action par défaut
   - : Aucune
 
-> **Note :** Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une. Si à un moment donné, cela change, la documentation sera révisée.
+> [!NOTE]
+> Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une. Si à un moment donné, cela change, la documentation sera révisée.
 
 ## Propriétés
 
diff --git a/files/fr/web/api/htmlmediaelement/index.md b/files/fr/web/api/htmlmediaelement/index.md
index b93eac988c3c21..1f17ab87f1362a 100644
--- a/files/fr/web/api/htmlmediaelement/index.md
+++ b/files/fr/web/api/htmlmediaelement/index.md
@@ -17,7 +17,8 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT
 
   - : est un {{jsxref("Boolean")}} qui reflète l'attribut HTML [`autoplay`](/fr/docs/Web/HTML/Element/video#autoplay), indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.
 
-    > **Note :** Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.
+    > [!NOTE]
+    > Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.
 
 - {{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}
   - : Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété `buffered`.
@@ -95,7 +96,8 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT
 
   - : Renvoie la liste d'objets {{domxref("VideoTrack")}} (_pistes vidéo_) contenus dans l'élément.
 
-    > **Note :** Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.
+    > [!NOTE]
+    > Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.
 
 - {{domxref("HTMLMediaElement.volume")}}
   - : est un `double` indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).
diff --git a/files/fr/web/api/idbcursor/index.md b/files/fr/web/api/idbcursor/index.md
index 81464a0200ad06..521d6968f1ac94 100644
--- a/files/fr/web/api/idbcursor/index.md
+++ b/files/fr/web/api/idbcursor/index.md
@@ -39,7 +39,8 @@ On peut avoir autant de curseurs qu'on souhaite en même temps. Ce sera toujours
 
 {{deprecated_header(13)}}
 
-> **Attention :** Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. [bug Firefox 891944](https://bugzil.la/891944)).
+> [!WARNING]
+> Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. [bug Firefox 891944](https://bugzil.la/891944)).
 
 <table class="standard-table">
   <thead>
diff --git a/files/fr/web/api/idbdatabase/index.md b/files/fr/web/api/idbdatabase/index.md
index 6625019fe1821a..d6dee130ba081f 100644
--- a/files/fr/web/api/idbdatabase/index.md
+++ b/files/fr/web/api/idbdatabase/index.md
@@ -9,7 +9,8 @@ L'interface **`IDBDatabase`** de l'API IndexedDB fournit [une connexion à la ba
 
 {{AvailableInWorkers}}
 
-> **Note :** Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.
+> [!NOTE]
+> Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.
 
 ## Méthodes
 
diff --git a/files/fr/web/api/idbdatabase/name/index.md b/files/fr/web/api/idbdatabase/name/index.md
index 47057f47fc83fd..4cc7e324029352 100644
--- a/files/fr/web/api/idbdatabase/name/index.md
+++ b/files/fr/web/api/idbdatabase/name/index.md
@@ -47,7 +47,8 @@ DBOpenRequest.onsuccess = function (event) {
 };
 ```
 
-> **Note :** Pour un exemple fonctionnel complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([voir l'exemple _live_](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple fonctionnel complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([voir l'exemple _live_](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.md b/files/fr/web/api/idbdatabase/objectstorenames/index.md
index 9d86e2291c531f..2d30fb39825c32 100644
--- a/files/fr/web/api/idbdatabase/objectstorenames/index.md
+++ b/files/fr/web/api/idbdatabase/objectstorenames/index.md
@@ -43,7 +43,8 @@ DBOpenRequest.onsuccess = function (event) {
 };
 ```
 
-> **Note :** Pour un exemple fonctionnel complet, voir notre application de démo [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([l'exemple _live_](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple fonctionnel complet, voir notre application de démo [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([l'exemple _live_](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbdatabase/transaction/index.md b/files/fr/web/api/idbdatabase/transaction/index.md
index 0161af57a54225..faf2040b3984a2 100644
--- a/files/fr/web/api/idbdatabase/transaction/index.md
+++ b/files/fr/web/api/idbdatabase/transaction/index.md
@@ -170,7 +170,8 @@ var objectStore = transaction.objectStore("toDoList");
 // etc.
 ```
 
-> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbfactory/cmp/index.md b/files/fr/web/api/idbfactory/cmp/index.md
index ecb7dcc2a9a9a7..9ef822437ee9d0 100644
--- a/files/fr/web/api/idbfactory/cmp/index.md
+++ b/files/fr/web/api/idbfactory/cmp/index.md
@@ -9,7 +9,8 @@ La méthode **`cmp()`** de l'interface {{domxref("IDBFactory")}} compare deux va
 
 {{AvailableInWorkers}}
 
-> **Note :** Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.
+> [!NOTE]
+> Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.
 
 ## Syntaxe
 
diff --git a/files/fr/web/api/idbfactory/open/index.md b/files/fr/web/api/idbfactory/open/index.md
index 93ec1c4fbe734a..b593a53f778ac1 100644
--- a/files/fr/web/api/idbfactory/open/index.md
+++ b/files/fr/web/api/idbfactory/open/index.md
@@ -37,9 +37,11 @@ var IDBOpenDBRequest = indexedDB.open(nom, version);
 
   - : Dans Gecko, à partir de [la version 26](/fr/Firefox/Releases/26), il est possible de passer en paramètre un objet `options` non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre `version` définit ci-avant), et également une valeur `storage` qui décrit si on souhaite utiliser un stockage permanent (avec la valeur `persistent`) ou un stockage temporaire (avec la valeur `temporary`).
 
-    > **Attention :** l'attribut `storage` est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.
+    > [!WARNING]
+    > L'attribut `storage` est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.
 
-> **Note :** Vous pouvez consulter l'article [les limites de stockage du navigateur et les critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.
+> [!NOTE]
+> Vous pouvez consulter l'article [les limites de stockage du navigateur et les critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.
 
 ### Valeur de retour
 
diff --git a/files/fr/web/api/idbindex/get/index.md b/files/fr/web/api/idbindex/get/index.md
index 1b2667df75e48b..92cf2e31efed6b 100644
--- a/files/fr/web/api/idbindex/get/index.md
+++ b/files/fr/web/api/idbindex/get/index.md
@@ -100,7 +100,8 @@ function displayDataByIndex() {
 }
 ```
 
-> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbindex/index.md b/files/fr/web/api/idbindex/index.md
index 29cd4ae55f7589..d007ed0d925358 100644
--- a/files/fr/web/api/idbindex/index.md
+++ b/files/fr/web/api/idbindex/index.md
@@ -108,7 +108,8 @@ function displayDataByIndex() {
 }
 ```
 
-> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbindex/keypath/index.md b/files/fr/web/api/idbindex/keypath/index.md
index 76dc5d8dab7596..938cdf034c180f 100644
--- a/files/fr/web/api/idbindex/keypath/index.md
+++ b/files/fr/web/api/idbindex/keypath/index.md
@@ -81,7 +81,8 @@ function displayDataByIndex() {
 }
 ```
 
-> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbindex/name/index.md b/files/fr/web/api/idbindex/name/index.md
index 1edb7c39e3602f..17d71637d32b72 100644
--- a/files/fr/web/api/idbindex/name/index.md
+++ b/files/fr/web/api/idbindex/name/index.md
@@ -87,7 +87,8 @@ function displayDataByIndex() {
 }
 ```
 
-> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbindex/objectstore/index.md b/files/fr/web/api/idbindex/objectstore/index.md
index 7c129ae7bf6196..e66c130bcfca05 100644
--- a/files/fr/web/api/idbindex/objectstore/index.md
+++ b/files/fr/web/api/idbindex/objectstore/index.md
@@ -85,7 +85,8 @@ function displayDataByIndex() {
 }
 ```
 
-> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbindex/opencursor/index.md b/files/fr/web/api/idbindex/opencursor/index.md
index ddc96003fdf40d..874aec3384d01d 100644
--- a/files/fr/web/api/idbindex/opencursor/index.md
+++ b/files/fr/web/api/idbindex/opencursor/index.md
@@ -126,7 +126,8 @@ function displayDataByIndex() {
 }
 ```
 
-> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbindex/openkeycursor/index.md b/files/fr/web/api/idbindex/openkeycursor/index.md
index 402c2cbadf241a..3081d3619e6e64 100644
--- a/files/fr/web/api/idbindex/openkeycursor/index.md
+++ b/files/fr/web/api/idbindex/openkeycursor/index.md
@@ -110,7 +110,8 @@ function displayDataByIndex() {
 }
 ```
 
-> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/bound_static/index.md b/files/fr/web/api/idbkeyrange/bound_static/index.md
index c1afdb2d5c740d..f95db91f3d44de 100644
--- a/files/fr/web/api/idbkeyrange/bound_static/index.md
+++ b/files/fr/web/api/idbkeyrange/bound_static/index.md
@@ -69,7 +69,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/index.md b/files/fr/web/api/idbkeyrange/index.md
index d5f60eece02e16..e38eeb23338348 100644
--- a/files/fr/web/api/idbkeyrange/index.md
+++ b/files/fr/web/api/idbkeyrange/index.md
@@ -95,7 +95,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/lower/index.md b/files/fr/web/api/idbkeyrange/lower/index.md
index 265b65a3536ec9..9810370c3ef74b 100644
--- a/files/fr/web/api/idbkeyrange/lower/index.md
+++ b/files/fr/web/api/idbkeyrange/lower/index.md
@@ -49,7 +49,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/lowerbound_static/index.md b/files/fr/web/api/idbkeyrange/lowerbound_static/index.md
index 6cab0cca096989..dedbb2e8ff3a80 100644
--- a/files/fr/web/api/idbkeyrange/lowerbound_static/index.md
+++ b/files/fr/web/api/idbkeyrange/lowerbound_static/index.md
@@ -62,7 +62,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.md b/files/fr/web/api/idbkeyrange/loweropen/index.md
index 69bf6de0e85335..316612f56485da 100644
--- a/files/fr/web/api/idbkeyrange/loweropen/index.md
+++ b/files/fr/web/api/idbkeyrange/loweropen/index.md
@@ -49,7 +49,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/only_static/index.md b/files/fr/web/api/idbkeyrange/only_static/index.md
index 00c4dcf4689fcd..131ea087d5dd58 100644
--- a/files/fr/web/api/idbkeyrange/only_static/index.md
+++ b/files/fr/web/api/idbkeyrange/only_static/index.md
@@ -55,7 +55,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/upper/index.md b/files/fr/web/api/idbkeyrange/upper/index.md
index 618beac3559340..e0869f9cfc402d 100644
--- a/files/fr/web/api/idbkeyrange/upper/index.md
+++ b/files/fr/web/api/idbkeyrange/upper/index.md
@@ -49,7 +49,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbkeyrange/upperbound_static/index.md b/files/fr/web/api/idbkeyrange/upperbound_static/index.md
index e7307dd2738de0..c61d95694279ef 100644
--- a/files/fr/web/api/idbkeyrange/upperbound_static/index.md
+++ b/files/fr/web/api/idbkeyrange/upperbound_static/index.md
@@ -62,7 +62,8 @@ function displayData() {
 }
 ```
 
-> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) ([ainsi que la démonstration associée](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbobjectstore/add/index.md b/files/fr/web/api/idbobjectstore/add/index.md
index a93149e5b39f1c..8022a9ff97a14f 100644
--- a/files/fr/web/api/idbobjectstore/add/index.md
+++ b/files/fr/web/api/idbobjectstore/add/index.md
@@ -158,7 +158,8 @@ function addData() {
 }
 ```
 
-> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) ([exemple](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.md b/files/fr/web/api/idbobjectstore/autoincrement/index.md
index a68c9de40b70a9..6f070e543c37ed 100644
--- a/files/fr/web/api/idbobjectstore/autoincrement/index.md
+++ b/files/fr/web/api/idbobjectstore/autoincrement/index.md
@@ -7,7 +7,8 @@ slug: Web/API/IDBObjectStore/autoIncrement
 
 La propriété **`autoIncrement`** de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d'incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.
 
-> **Note :** Chaque magasin d'objets à son conteur d'incrémentation automatique.
+> [!NOTE]
+> Chaque magasin d'objets à son conteur d'incrémentation automatique.
 
 {{AvailableInWorkers}}
 
@@ -90,7 +91,8 @@ function addData() {
 }
 ```
 
-> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/idbobjectstore/clear/index.md b/files/fr/web/api/idbobjectstore/clear/index.md
index 5b9b6b898bf703..124fe379d66f53 100644
--- a/files/fr/web/api/idbobjectstore/clear/index.md
+++ b/files/fr/web/api/idbobjectstore/clear/index.md
@@ -9,7 +9,8 @@ La méthode **`clear()`** de l'interface {{domxref("IDBObjectStore")}} fait une
 
 Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.
 
-> **Note :** La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.
+> [!NOTE]
+> La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.
 
 {{AvailableInWorkers}}
 
@@ -81,7 +82,8 @@ function clearData() {
 }
 ```
 
-> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
+> [!NOTE]
+> Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) app ([view example live](https://mdn.github.io/dom-examples/to-do-notifications/)).
 
 ## Spécifications
 
diff --git a/files/fr/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index eb6e744484977a..da3e25fe7dbe68 100644
--- a/files/fr/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
+++ b/files/fr/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -34,7 +34,8 @@ req.send();
 
 Une requête envoyée avec `XMLHttpRequest` peut récupérer les données de façon asynchrone ou de façon synchrone. Le comportement obtenu est choisi avec le troisième argument optionnel `async` de la méthode [`XMLHttpRequest.open()`](/fr/docs/Web/API/XMLHttpRequest/open). Lorsque cet argument vaut `true` ou s'il n'est pas fourni, la requête est traitée de façon asynchrone. Sinon, le processus est géré de façon synchrone. Pour en savoir plus sur ces différents types de requêtes, vous pouvez consulter l'article [Requêtes synchrones et asynchrones](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). Les requêtes synchrones ne peuvent pas être utilisées en dehors des <i lang="en">workers</i>, car elles bloqueraient l'interface principale.
 
-> **Note :** Le constructeur `XMLHttpRequest` ne se limite pas aux seuls documents XML. Son nom commence par **"XML"**, car il a été créé lorsque le format d'échange principal était XML.
+> [!NOTE]
+> Le constructeur `XMLHttpRequest` ne se limite pas aux seuls documents XML. Son nom commence par **"XML"**, car il a été créé lorsque le format d'échange principal était XML.
 
 ## Gérer les réponses
 
@@ -138,7 +139,8 @@ function transferCanceled(evt) {
 
 Les lignes 3 à 6 du fragment ci-avant ajoutent les gestionnaires d'évènements pour les différents évènements émis à propos du transfert des données à l'aide de `XMLHttpRequest`.
 
-> **Note :** Ces gestionnaires d'évènements doivent être ajoutés avant d'appeler `open()` sur la requête. Sinon, les évènements `progress` ne seront pas captés.
+> [!NOTE]
+> Ces gestionnaires d'évènements doivent être ajoutés avant d'appeler `open()` sur la requête. Sinon, les évènements `progress` ne seront pas captés.
 
 Le gestionnaire d'évènement pour l'avancement, porté par la fonction `updateProgress()` dans l'exemple, reçoit le nombre total d'octets à transférer (`total`) ainsi que le nombre d'octets transférés jusqu'à présent (`loaded`). Toutefois, si le champ `lengthComputable` vaut `false`, la longueur totale est inconnue et vaudra `0` par défaut.
 
@@ -155,7 +157,8 @@ req.upload.addEventListener("abort", transferCanceled);
 oReq.open();
 ```
 
-> **Note :** Les évènements d'avancement ne sont pas disponibles pour le protocole `file:`.
+> [!NOTE]
+> Les évènements d'avancement ne sont pas disponibles pour le protocole `file:`.
 
 Les évènements d'avancements sont émis à chaque fragment (<i lang="en">chunk</i>) de données reçu, y compris le dernier fragment pour les cas où le paquet est reçu et la connexion fermée avant que l'évènement soit déclenché. Dans ce cas, l'évènement `progress` est automatiquement déclenché lorsque l'évènement `load` se produit pour ce paquet. Cela permet de surveiller l'avancement de façon fiable, à l'aide du seul évènement `progress`.
 
diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.md b/files/fr/web/css/-moz-force-broken-image-icon/index.md
index cbc311a3344b1c..f53b357700e96c 100644
--- a/files/fr/web/css/-moz-force-broken-image-icon/index.md
+++ b/files/fr/web/css/-moz-force-broken-image-icon/index.md
@@ -15,7 +15,8 @@ La propriété **`-moz-force-broken-image-icon`** est une propriété CSS non-st
 
   - : Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. `0` indique que seul l'attribut `alt` doit être affiché.
 
-    > **Note :** Même si la valeur est `1`, l'attribut `alt` sera affiché. Voir ci-après.
+    > [!NOTE]
+    > Même si la valeur est `1`, l'attribut `alt` sera affiché. Voir ci-après.
 
 ### Syntaxe formelle
 
@@ -43,7 +44,8 @@ img {
 
 {{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}
 
-> **Note :** Si `-moz-force-broken-image-icon` a la valeur `1` et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut `alt` sera masqué.
+> [!NOTE]
+> Si `-moz-force-broken-image-icon` a la valeur `1` et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut `alt` sera masqué.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/-moz-image-region/index.md b/files/fr/web/css/-moz-image-region/index.md
index 94c4bf8f2bc9d5..42cdd30ddb8d33 100644
--- a/files/fr/web/css/-moz-image-region/index.md
+++ b/files/fr/web/css/-moz-image-region/index.md
@@ -22,7 +22,8 @@ Pour certains éléments XUL et les pseudo-éléments qui utilisent une image gr
 
 La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.
 
-> **Note :** Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.
+> [!NOTE]
+> Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/-webkit-box-reflect/index.md b/files/fr/web/css/-webkit-box-reflect/index.md
index de76a2a66ebed8..909ce8518d63c3 100644
--- a/files/fr/web/css/-webkit-box-reflect/index.md
+++ b/files/fr/web/css/-webkit-box-reflect/index.md
@@ -26,7 +26,8 @@ La propriété **`-webkit-box-reflect`** peut être utilisée afin de créer un
 -webkit-box-reflect: unset;
 ```
 
-> **Attention :** Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.
+> [!WARNING]
+> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md
index bfa6024075af0f..41eed7fd90a811 100644
--- a/files/fr/web/css/-webkit-line-clamp/index.md
+++ b/files/fr/web/css/-webkit-line-clamp/index.md
@@ -13,7 +13,8 @@ Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la
 
 Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).
 
-> **Note :** Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer `-webkit-line-clamp`.
+> [!NOTE]
+> Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer `-webkit-line-clamp`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/-webkit-mask-composite/index.md b/files/fr/web/css/-webkit-mask-composite/index.md
index 35eb3465422141..e3d852e104656d 100644
--- a/files/fr/web/css/-webkit-mask-composite/index.md
+++ b/files/fr/web/css/-webkit-mask-composite/index.md
@@ -27,7 +27,8 @@ La propriété **`-webkit-mask-composite`** définit la façon dont plusieurs im
 -webkit-mask-composite: unset;
 ```
 
-> **Note :** La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.
+> [!NOTE]
+> La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/@counter-style/index.md b/files/fr/web/css/@counter-style/index.md
index 62debfcc07054e..f2d1b1bf0c6e71 100644
--- a/files/fr/web/css/@counter-style/index.md
+++ b/files/fr/web/css/@counter-style/index.md
@@ -113,7 +113,8 @@ Chaque `@counter-style` est identifié par un nom et possède un ensemble de des
 
 {{EmbedLiveSample('')}}
 
-> **Note :** Une page d'exemple avec plus de variables est disponible ici&nbsp;: <https://mdn.github.io/css-examples/counter-style-demo/>.
+> [!NOTE]
+> Une page d'exemple avec plus de variables est disponible ici&nbsp;: <https://mdn.github.io/css-examples/counter-style-demo/>.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md
index fa8e40789645bf..5c65067a7aacaf 100644
--- a/files/fr/web/css/@document/index.md
+++ b/files/fr/web/css/@document/index.md
@@ -30,7 +30,8 @@ Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` e
 
 Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`).
 
-> **Note :** Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. [bug Firefox 1035091](https://bugzil.la/1035091)).
+> [!NOTE]
+> Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. [bug Firefox 1035091](https://bugzil.la/1035091)).
 
 ### Syntaxe formelle
 
diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md
index caf462c64aeac0..b0a6730248550d 100644
--- a/files/fr/web/css/@font-face/index.md
+++ b/files/fr/web/css/@font-face/index.md
@@ -38,7 +38,8 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`**
   - : Une valeur [`font-style`](/fr/docs/Web/CSS/font-style). Il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une police, par exemple&nbsp;: `font-style: oblique 20deg 50deg;`.
 - [`font-weight`](/fr/docs/Web/CSS/@font-face/font-weight)
   - : Une valeur [`font-weight`](/fr/docs/Web/CSS/font-weight). Il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une police, par exemple&nbsp;: `font-weight: 100 400;`.
-    > **Note :** Le descripteur `font-variant` a été retiré de la spécification en 2018. La propriété [`font-variant`](/fr/docs/Web/CSS/font-variant) est bien prise en charge, mais il n'existe pas de descripteur équivalent.
+    > [!NOTE]
+    > Le descripteur `font-variant` a été retiré de la spécification en 2018. La propriété [`font-variant`](/fr/docs/Web/CSS/font-variant) est bien prise en charge, mais il n'existe pas de descripteur équivalent.
 - [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings)
   - : Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux polices OpenType.
 - [`font-variation-settings`](/fr/docs/Web/CSS/@font-face/font-variation-settings)
@@ -51,7 +52,8 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`**
 
   - : Indique les ressources à utiliser pour la police. La valeur est une liste de valeurs indiquant les ressources à tenter les unes après les autres. Chaque ressource est indiquée avec `url()` ou `local()`. C'est la première ressource de la liste qui est chargée correctement qui est utilisée. Les éléments situés après sont ignorés. Si plusieurs descripteurs `src` sont définis, seule la dernière règle déclarée capable de charger une ressource est appliquée.
 
-    > **Note :** Les éléments que le navigateur considère comme invalides sont ignorés. Certains navigateurs pourront ignorer l'ensemble du descripteur si même un seul des éléments est invalide. Cela pourra avoir un impact sur la gestion des alternatives.
+    > [!NOTE]
+    > Les éléments que le navigateur considère comme invalides sont ignorés. Certains navigateurs pourront ignorer l'ensemble du descripteur si même un seul des éléments est invalide. Cela pourra avoir un impact sur la gestion des alternatives.
 
     Une notation `url()` peut être suivie des notations fonctionnelles `format()` et `tech()`, comme ceci&nbsp;:
 
@@ -88,7 +90,8 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`**
     | `embedded-opentype` | Embedded OpenType     | .eot                |
     | `svg`               | SVG Font (deprecated) | .svg, .svgz         |
 
-    > **Note :** Les valeurs `opentype` et `truetype` sont tout à fait équivalentes, que le fichier de police utilise des courbes de Bézier cubiques (pour le tableau CFF/CFF2) ou quadratiques (pour le tableau des glyphes).
+    > [!NOTE]
+    > Les valeurs `opentype` et `truetype` sont tout à fait équivalentes, que le fichier de police utilise des courbes de Bézier cubiques (pour le tableau CFF/CFF2) ou quadratiques (pour le tableau des glyphes).
 
     `tech()` est une notation **optionnelle** {{Experimental_inline}}. Sa valeur est l'un des mots-clés suivants&nbsp;: `variations`, `palettes`, `incremental`, `features-opentype`, `features-aat`, `features-graphite`, `color-COLRv0`, `color-COLRv1`, `color-SVG`, `color-sbix`, `color-CBDT`.
 
diff --git a/files/fr/web/css/@layer/index.md b/files/fr/web/css/@layer/index.md
index 8eb6ffe38934bd..f00f7f5cfa7c44 100644
--- a/files/fr/web/css/@layer/index.md
+++ b/files/fr/web/css/@layer/index.md
@@ -59,7 +59,8 @@ Comme l'ordre initial dans lequel sont déclarés les couches indique la précé
 
 Une règle présente dans `utilities` s'appliquerait _même si sa spécificité est inférieure_ à celle de la règle dans `theme`. En effet, dès lors que l'ordre des couches a été établi, la spécificité et l'ordre d'apparence sont ignorés. Cela permet la création de sélecteurs CSS plus simples, car il n'est pas nécessaire de s'assurer qu'un sélecteur a une spécificité suffisamment élevée pour l'emporter sur les autres règles, il suffit de s'assurer qu'il apparaît dans une couche qui arrive après.
 
-> **Note :** Lorsque les noms des couches sont déclarées, leur ordre est défini. On peut ensuite ajouter des règles CSS aux couches en redéclarant leur nom. Les styles sont ainsi ajoutés à la couche et l'ordre des couches reste inchangé.
+> [!NOTE]
+> Lorsque les noms des couches sont déclarées, leur ordre est défini. On peut ensuite ajouter des règles CSS aux couches en redéclarant leur nom. Les styles sont ainsi ajoutés à la couche et l'ordre des couches reste inchangé.
 
 La troisième façon consiste à créer une couche de cascade sans nom, par exemple&nbsp;:
 
@@ -75,7 +76,8 @@ Cela crée une _couche de cascade anonyme_. Cette couche fonctionne de façon an
 
 Une autre façon pour créer une couche de cascade consiste à utiliser [`@import`](/fr/docs/Web/CSS/@import). Dans ce cas, les règles associées proviendraient de la feuille de style importée.
 
-> **Attention :** La règle @ `@import` doit précéder tous les autres types de règles, à l'exception des règles `@charset`.
+> [!WARNING]
+> La règle @ `@import` doit précéder tous les autres types de règles, à l'exception des règles `@charset`.
 
 ```css
 @import "theme.css" layer(utilities);
diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md
index af4956ceeefc5b..3bb8c70e6b11f1 100644
--- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md
+++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-moz-device-pixel-ratio
 
 La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caractéristiques_média) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.
 
-> **Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme.
+> [!WARNING]
+> Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme.
 >
 > `-moz-device-pixel-ratio` peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et `-webkit-device-pixel-ratio` peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge `dppx`. Par exemple :
 >
@@ -20,7 +21,8 @@ La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#
 >
 > Voir [cet article du CSSWG](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`.
 
-> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`.
+> [!NOTE]
+> Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md
index 1383c37ac6a5e6..8058335ff9afa5 100644
--- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md
+++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/@media/-webkit-device-pixel-ratio
 
 Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter [un pixel CSS (`px`)](/fr/docs/Web/CSS/length#unités_de_longueur_absolues). Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est [`dppx`](/fr/docs/Web/CSS/resolution#unités).
 
-> **Attention :** Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.
+> [!WARNING]
+> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.md b/files/fr/web/css/@media/-webkit-transform-2d/index.md
index b01cf729e39acf..cf036bf5e8dbe1 100644
--- a/files/fr/web/css/@media/-webkit-transform-2d/index.md
+++ b/files/fr/web/css/@media/-webkit-transform-2d/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-webkit-transform-2d
 
 **`-webkit-transform-2d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.
 
-> **Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.
+> [!NOTE]
+> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.md b/files/fr/web/css/@media/-webkit-transform-3d/index.md
index 861a9095cc61ab..73c906e14cdb52 100644
--- a/files/fr/web/css/@media/-webkit-transform-3d/index.md
+++ b/files/fr/web/css/@media/-webkit-transform-3d/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-webkit-transform-3d
 
 **`-webkit-transform-3d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.
 
-> **Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.
+> [!NOTE]
+> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.
 
 ## Exmple
 
diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md
index b006b518df64ab..6fc1b8a9cb9108 100644
--- a/files/fr/web/css/@media/-webkit-transition/index.md
+++ b/files/fr/web/css/@media/-webkit-transition/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-webkit-transition
 
 **`-webkit-transition`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.
 
-> **Note :** Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.
+> [!NOTE]
+> Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.
 
 ## Privilégier `@supports`
 
diff --git a/files/fr/web/css/@media/any-pointer/index.md b/files/fr/web/css/@media/any-pointer/index.md
index 7a001b9d927493..c851ea2e529354 100644
--- a/files/fr/web/css/@media/any-pointer/index.md
+++ b/files/fr/web/css/@media/any-pointer/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/any-pointer
 
 **`any-pointer`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.
 
-> **Note :** Si on souhaite tester la précision du mécanisme de pointage _principal_, on pourra utiliser la caractéristique [`pointer`](/fr/docs/Web/CSS/@media/pointer) à la place.
+> [!NOTE]
+> Si on souhaite tester la précision du mécanisme de pointage _principal_, on pourra utiliser la caractéristique [`pointer`](/fr/docs/Web/CSS/@media/pointer) à la place.
 
 ## Syntaxe
 
@@ -20,7 +21,8 @@ La caractéristique `any-pointer` est définie comme un mot-clé parmi ceux de l
 - `fine`
   - : Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.
 
-> **Note :** Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur `none` ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.
+> [!NOTE]
+> Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur `none` ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.
 
 ## Exemples
 
diff --git a/files/fr/web/css/@media/aural/index.md b/files/fr/web/css/@media/aural/index.md
index 80c318ad236328..d0c85040010391 100644
--- a/files/fr/web/css/@media/aural/index.md
+++ b/files/fr/web/css/@media/aural/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/aural
 
 Un [groupe de médias](/fr/docs/Web/CSS/@media#Groupes_de_médias) défini par les standards [CSS](/fr/docs/Web/CSS).
 
-> **Note :** Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans Gecko 6.0. C'est le type de média [speech](/fr/docs/Web/CSS/@media#speech) qui le remplace.
+> [!NOTE]
+> Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans Gecko 6.0. C'est le type de média [speech](/fr/docs/Web/CSS/@media#speech) qui le remplace.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/@media/color/index.md b/files/fr/web/css/@media/color/index.md
index e183cef62c2361..fcab5b30e61d46 100644
--- a/files/fr/web/css/@media/color/index.md
+++ b/files/fr/web/css/@media/color/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/@media/color
 
 La caractéristique `color` est définie avec un entier (type CSS {{cssxref("&lt;integer&gt;")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-color`** et **`max-color`** afin de cibler des règles en fonction d'un minimum ou d'un maximum.
 
-> **Note :** Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.
+> [!NOTE]
+> Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.
 
 ## Exemples
 
diff --git a/files/fr/web/css/@media/forced-colors/index.md b/files/fr/web/css/@media/forced-colors/index.md
index 85c2ac7046be23..81cb25100e9fb3 100644
--- a/files/fr/web/css/@media/forced-colors/index.md
+++ b/files/fr/web/css/@media/forced-colors/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/forced-colors
 
 La [caractéristique média](</fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)>) **`forced-colors`** est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.
 
-> **Note :** Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur
+> [!NOTE]
+> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur
 
 ## Valeurs
 
diff --git a/files/fr/web/css/@media/index.md b/files/fr/web/css/@media/index.md
index af44c1a0a6de34..57f282e0d76591 100644
--- a/files/fr/web/css/@media/index.md
+++ b/files/fr/web/css/@media/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media
 
 La [règle @](/fr/docs/Web/CSS/At-rule) **`@media`** permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs [requêtes média (<i lang="en">media queries</i>)](/fr/docs/Web/CSS/Media_Queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.
 
-> **Note :** Il est possible de manipuler la règle @ `@media` via le CSSOM (et JavaScript) grâce à l'interface [`CSSMediaRule`](/fr/docs/Web/API/CSSMediaRule).
+> [!NOTE]
+> Il est possible de manipuler la règle @ `@media` via le CSSOM (et JavaScript) grâce à l'interface [`CSSMediaRule`](/fr/docs/Web/API/CSSMediaRule).
 
 ## Syntaxe
 
@@ -46,7 +47,8 @@ _Les types de média_ décrivent la catégorie générale d'un appareil. Sauf qu
 - `screen`
   - : Destiné principalement aux écrans.
 
-> **Note :** CSS2.1 et [le module de spécification sur les requêtes média de niveau 3](https://drafts.csswg.org/mediaqueries-3/#background) ont défini des types de média supplémentaires (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, et `aural`), mais ceux-ci ont été dépréciés avec [le module de spécification sur les requêtes média de niveau 4](https://dev.w3.org/csswg/mediaqueries/#media-types) et ne devraient donc pas être utilisés.
+> [!NOTE]
+> CSS2.1 et [le module de spécification sur les requêtes média de niveau 3](https://drafts.csswg.org/mediaqueries-3/#background) ont défini des types de média supplémentaires (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, et `aural`), mais ceux-ci ont été dépréciés avec [le module de spécification sur les requêtes média de niveau 4](https://dev.w3.org/csswg/mediaqueries/#media-types) et ne devraient donc pas être utilisés.
 
 ### Caractéristiques de média
 
@@ -123,7 +125,8 @@ Il est aussi possible de combiner plusieurs requêtes média en une seule règle
 
   - : Cet opérateur donne la négation d'une requête média, renvoyant `true` si la requête devait renvoyer `false`. Si cet opérateur est présent dans une liste de requêtes séparées par des virgules, la négation portera uniquement sur la requête sur laquelle l'opérateur est appliqué. Si l'opérateur `not` est utilisé, il _est nécessaire_ d'indiquer un type de média.
 
-    > **Note :** Dans la spécification de niveau 3, le mot-clé `not` permet uniquement de prendre la négation d'une requête média entière (et pas d'une caractéristique seule).
+    > [!NOTE]
+    > Dans la spécification de niveau 3, le mot-clé `not` permet uniquement de prendre la négation d'une requête média entière (et pas d'une caractéristique seule).
 
 - `only`
   - : Applique la mise en forme uniquement si toute la requête correspond. Ce mot-clé est utile pour empêcher les anciens navigateurs d'appliquer les styles en question. Sans utiliser `only`, les anciens navigateurs interpréteraient la requête `screen and (max-width: 500px)` comme `screen`, en ignorant le reste et en appliquant donc le style à tous les écrans. Si l'opérateur `only` est utilisé, il _est nécessaire_ d'indiquer un type de média.
diff --git a/files/fr/web/css/@media/pointer/index.md b/files/fr/web/css/@media/pointer/index.md
index a88851ef4a918b..a26b0a3d191f38 100644
--- a/files/fr/web/css/@media/pointer/index.md
+++ b/files/fr/web/css/@media/pointer/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/pointer
 
 **`pointer`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.
 
-> **Note :** Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique [`any-pointer`](/fr/docs/Web/CSS/@media/any-pointer).
+> [!NOTE]
+> Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique [`any-pointer`](/fr/docs/Web/CSS/@media/any-pointer).
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.md b/files/fr/web/css/@media/prefers-color-scheme/index.md
index d562980dfa0dc4..6fa1c47711eb1c 100644
--- a/files/fr/web/css/@media/prefers-color-scheme/index.md
+++ b/files/fr/web/css/@media/prefers-color-scheme/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/@media/prefers-color-scheme
 
 {{CSSRef}}
 
-> **Note :** Si vous avez modifié `privacy.resistFingerprinting` à **vrai**, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à `light`.
+> [!NOTE]
+> Si vous avez modifié `privacy.resistFingerprinting` à **vrai**, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à `light`.
 > Sinon, vous pouvez créer le paramètre numérique `ui.systemUsesDarkTheme` pour redéfinier le comportement par défaut et retourner `light` (valeur : 0), `dark` (valeur : 1), or `no-preference` (valeur : 2). (Firefox retournera `light` si une autre valeur est utilisée.)
 
 La caractéristique média **`prefers-color-scheme`** permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).
diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md
index 0f094a55f1756e..305235bdfc7ecf 100644
--- a/files/fr/web/css/@media/prefers-reduced-motion/index.md
+++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/prefers-reduced-motion
 
 La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) [CSS](/fr/docs/Web/CSS) **`prefers-reduced-motion`** détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.
 
-> **Attention :** Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.
+> [!WARNING]
+> Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/@media/shape/index.md b/files/fr/web/css/@media/shape/index.md
index e9a7204640ce81..d756c8a6498bff 100644
--- a/files/fr/web/css/@media/shape/index.md
+++ b/files/fr/web/css/@media/shape/index.md
@@ -18,7 +18,8 @@ La caractéristique `shape` peut prendre une valeur parmi deux valeurs définies
 
 ## Exemples
 
-> **Note :** Aucun navigateur n'implémente actuellement cette fonctionnalité.
+> [!NOTE]
+> Aucun navigateur n'implémente actuellement cette fonctionnalité.
 
 ### Exemple simple
 
diff --git a/files/fr/web/css/@namespace/index.md b/files/fr/web/css/@namespace/index.md
index 92610c9f0ddf83..59ff4feba9d841 100644
--- a/files/fr/web/css/@namespace/index.md
+++ b/files/fr/web/css/@namespace/index.md
@@ -34,7 +34,8 @@ La règle `@namespace` peut également être utilisée afin de définir **un pr
 
 En [HTML5](/fr/docs/Glossaire/HTML5), les [éléments étrangers](https://html.spec.whatwg.org/#foreign-elements) connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (`http://www.w3.org/1999/xhtml`) même s'il n'y a aucun attribut `xmlns` dans le document. Les éléments [`<svg>`](/fr/docs/Web/SVG/Element/svg) et [`<math>`](/fr/docs/Web/MathML/Element/math) seront affectés à leurs espaces de noms respectifs (`http://www.w3.org/2000/svg` et `http://www.w3.org/1998/Math/MathML`).
 
-> **Note :** En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. `xlink:href`), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.
+> [!NOTE]
+> En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. `xlink:href`), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/@page/index.md b/files/fr/web/css/@page/index.md
index 2d9f0a6740c290..72d9994cfc9969 100644
--- a/files/fr/web/css/@page/index.md
+++ b/files/fr/web/css/@page/index.md
@@ -19,7 +19,8 @@ La règle @ **`@page`** est utilisée afin de modifier certaines propriétés CS
 
 La règle @ `@page` peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.
 
-> **Note :** Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("&lt;length&gt;")}}) relative à la zone d'affichage (_viewport_) : `vh`, `vw`, `vmin` et `vmax`. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle `@page`.
+> [!NOTE]
+> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("&lt;length&gt;")}}) relative à la zone d'affichage (_viewport_) : `vh`, `vw`, `vmin` et `vmax`. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle `@page`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md
index 040eab029555ab..c4cdd7faa8e1ac 100644
--- a/files/fr/web/css/@supports/index.md
+++ b/files/fr/web/css/@supports/index.md
@@ -77,7 +77,8 @@ Comme pour les autres opérateurs, on peut appliquer l'opérateur `not` à une d
 }
 ```
 
-> **Note :** Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur `not` entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme `and` ou `or`, il faudra utiliser des parenthèses.
+> [!NOTE]
+> Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur `not` entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme `and` ou `or`, il faudra utiliser des parenthèses.
 
 ### L'opérateur `and`
 
@@ -133,7 +134,8 @@ sera ainsi équivalente à :
 }
 ```
 
-> **Note :** Lorsqu'on utilise à la fois l'opérateur `and` et l'opérateur `or`, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.
+> [!NOTE]
+> Lorsqu'on utilise à la fois l'opérateur `and` et l'opérateur `or`, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.
 
 ### Syntaxe formelle
 
diff --git a/files/fr/web/css/_colon_-moz-first-node/index.md b/files/fr/web/css/_colon_-moz-first-node/index.md
index f3f0b37ff5a8e9..fda401255fd834 100644
--- a/files/fr/web/css/_colon_-moz-first-node/index.md
+++ b/files/fr/web/css/_colon_-moz-first-node/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-first-node
 
 La pseudo-classe **`:-moz-first-node`** correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).
 
-> **Note :** Tout blanc qui serait au début d'un élément est ignoré pour la détermination de `:-moz-last-node`.
+> [!NOTE]
+> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de `:-moz-last-node`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_-moz-last-node/index.md b/files/fr/web/css/_colon_-moz-last-node/index.md
index 0434303b55f8c5..b9946141beaf54 100644
--- a/files/fr/web/css/_colon_-moz-last-node/index.md
+++ b/files/fr/web/css/_colon_-moz-last-node/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-last-node
 
 La pseudo-classe **`:-moz-last-node`** correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).
 
-> **Note :** Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de `:-moz-last-node`.
+> [!NOTE]
+> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de `:-moz-last-node`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md
index 619d0f47c73ce7..a56b8f047ea2b4 100644
--- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md
+++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/:-moz-only-whitespace
 
 {{CSSRef}}{{SeeCompatTable}}
 
-> **Note :** Dans la spécification CSS4 Selectors, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme `:-moz-only-whitespace` mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.
+> [!NOTE]
+> Dans la spécification CSS4 Selectors, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme `:-moz-only-whitespace` mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.
 
 La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:-moz-only-whitespace`** correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.
 
diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.md b/files/fr/web/css/_colon_-moz-window-inactive/index.md
index 19c55f99add0d9..b3269dae0a3f20 100644
--- a/files/fr/web/css/_colon_-moz-window-inactive/index.md
+++ b/files/fr/web/css/_colon_-moz-window-inactive/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-window-inactive
 
 La pseudo-classe **`:-moz-window-inactive`**, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.
 
-> **Note :** Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut `active="true"` sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.
+> [!NOTE]
+> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut `active="true"` sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.
 
 `:-moz-window-inactive` fonctionne également pour le contenu des documents HTML.
 
diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md
index be52bb0a06a7f5..98bfaaac8a619a 100644
--- a/files/fr/web/css/_colon_active/index.md
+++ b/files/fr/web/css/_colon_active/index.md
@@ -19,7 +19,8 @@ La pseudo-classe `:active` est également activée lorsque l'utilisateur emploie
 
 La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec `:active` doit être écrite après les autres : `:link` — `:visited` — `:hover` — `:active`.
 
-> **Note :** Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe `:active` ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.
+> [!NOTE]
+> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe `:active` ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_autofill/index.md b/files/fr/web/css/_colon_autofill/index.md
index 46e1ac9c0ee9b1..8355db19583897 100644
--- a/files/fr/web/css/_colon_autofill/index.md
+++ b/files/fr/web/css/_colon_autofill/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:autofill
 
 La pseudo-classe **`:-webkit-autofill`** correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.
 
-> **Note :** Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent `!important` pour les déclarations avec `:-webkit-autofill` ce qui les rend difficilement modifiables sans utiliser JavaScript.
+> [!NOTE]
+> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent `!important` pour les déclarations avec `:-webkit-autofill` ce qui les rend difficilement modifiables sans utiliser JavaScript.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_colon_blank/index.md b/files/fr/web/css/_colon_blank/index.md
index 05e45e8809954a..a864250e33686c 100644
--- a/files/fr/web/css/_colon_blank/index.md
+++ b/files/fr/web/css/_colon_blank/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/:blank
 
 {{CSSRef}}{{SeeCompatTable}}
 
-> **Note :** Le sélecteur `:blank` est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir [l'_issue_ n°1967 à ce propos](https://github.com/w3c/csswg-drafts/issues/1967).
+> [!NOTE]
+> Le sélecteur `:blank` est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir [l'_issue_ n°1967 à ce propos](https://github.com/w3c/csswg-drafts/issues/1967).
 
 La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:blank`** permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} où rien n'a encore été saisi).
 
diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md
index 96e3d8005b4163..0af19bd8bff109 100644
--- a/files/fr/web/css/_colon_checked/index.md
+++ b/files/fr/web/css/_colon_checked/index.md
@@ -16,7 +16,8 @@ input:checked {
 }
 ```
 
-> **Note :** Les navigateurs considèrent souvent les éléments `<option>` comme [des éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)et la possibilité de mise en forme avec `:checked` varie d'un navigateur à l'autre.
+> [!NOTE]
+> Les navigateurs considèrent souvent les éléments `<option>` comme [des éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)et la possibilité de mise en forme avec `:checked` varie d'un navigateur à l'autre.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_default/index.md b/files/fr/web/css/_colon_default/index.md
index 9b597813572b24..2ceef03d6f558a 100644
--- a/files/fr/web/css/_colon_default/index.md
+++ b/files/fr/web/css/_colon_default/index.md
@@ -22,7 +22,8 @@ Ce sélecteur peut être utilisé sur des éléments {{htmlelement("button")}},
 - Les éléments `<input type="checkbox">` et `<input type="radio">` seront ciblés s'ils possèdent l'attribut `checked`.
 - L'élément `<button>` est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que `image` ou `submit`).
 
-> **Note :** La spécification WHATWG HTML définit cela dans [le paragraphe 4.16.3](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default).
+> [!NOTE]
+> La spécification WHATWG HTML définit cela dans [le paragraphe 4.16.3](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default).
 
 Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe `:default`.
 
diff --git a/files/fr/web/css/_colon_dir/index.md b/files/fr/web/css/_colon_dir/index.md
index a0c3c7b3e7451f..6b0565e9396369 100644
--- a/files/fr/web/css/_colon_dir/index.md
+++ b/files/fr/web/css/_colon_dir/index.md
@@ -19,9 +19,11 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:
 
 `:dir()` ne prend en compte que la valeur _sémantique_ de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que [`direction`](/fr/docs/Web/CSS/direction).
 
-> **Note :** La pseudo-classe `:dir()` ne fonctionne pas de la même façon que [le sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) `[dir=…]`. Ce dernier utilise la valeur de l'attribut [`dir`](/fr/docs/Web/HTML/Element/html#dir) et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon `[dir=rtl]` ou `[dir=ltr]` ne pourront pas correspondre à la valeur `auto` qui peut être utilisée sur l'attribut `dir`. Au contraire, `:dir()` calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille `auto`).
+> [!NOTE]
+> La pseudo-classe `:dir()` ne fonctionne pas de la même façon que [le sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) `[dir=…]`. Ce dernier utilise la valeur de l'attribut [`dir`](/fr/docs/Web/HTML/Element/html#dir) et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon `[dir=rtl]` ou `[dir=ltr]` ne pourront pas correspondre à la valeur `auto` qui peut être utilisée sur l'attribut `dir`. Au contraire, `:dir()` calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille `auto`).
 
-> **Note :** En HTML, la direction est définie grâce à l'attribut [`dir`](/fr/docs/Web/HTML/Element/html#dir). Pour les autres types de document, cela peut être déterminé autrement.
+> [!NOTE]
+> En HTML, la direction est définie grâce à l'attribut [`dir`](/fr/docs/Web/HTML/Element/html#dir). Pour les autres types de document, cela peut être déterminé autrement.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_empty/index.md b/files/fr/web/css/_colon_empty/index.md
index 05d642a81b9029..1e418cbd60ebf6 100644
--- a/files/fr/web/css/_colon_empty/index.md
+++ b/files/fr/web/css/_colon_empty/index.md
@@ -15,7 +15,8 @@ div:empty {
 }
 ```
 
-> **Note :** Avec CSS4 Selectors, le sélecteur `:empty` a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.
+> [!NOTE]
+> Avec CSS4 Selectors, le sélecteur `:empty` a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_first-child/index.md b/files/fr/web/css/_colon_first-child/index.md
index 237c62c99dbd64..215fb37882d192 100644
--- a/files/fr/web/css/_colon_first-child/index.md
+++ b/files/fr/web/css/_colon_first-child/index.md
@@ -16,7 +16,8 @@ p:first-child {
 }
 ```
 
-> **Note :** Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.
+> [!NOTE]
+> Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_first-of-type/index.md b/files/fr/web/css/_colon_first-of-type/index.md
index a1ee5cfa2096c6..3b94c303135be4 100644
--- a/files/fr/web/css/_colon_first-of-type/index.md
+++ b/files/fr/web/css/_colon_first-of-type/index.md
@@ -15,7 +15,8 @@ p:first-of-type {
 }
 ```
 
-> **Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).
+> [!NOTE]
+> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).
 
 ## Syntaxe
 
@@ -47,9 +48,11 @@ div :first-of-type {
 
 {{EmbedLiveSample('Exemples','100%', '120')}}
 
-> **Note :** On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.
+> [!NOTE]
+> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.
 
-> **Note :** Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le `<div>`.
+> [!NOTE]
+> Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le `<div>`.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_colon_has/index.md b/files/fr/web/css/_colon_has/index.md
index 55465c6307c20d..7b39b66b79bd99 100644
--- a/files/fr/web/css/_colon_has/index.md
+++ b/files/fr/web/css/_colon_has/index.md
@@ -9,7 +9,8 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:has()`** permet de cible
 
 Cette pseudo-classe `:has()` prend en paramètre une liste de sélecteurs.
 
-> **Note :** Pour des raisons de performances et dans la spécification actuelle, [`has()` n'est pas classé comme un sélecteur dynamique](https://drafts.csswg.org/selectors/#live-profile) et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.
+> [!NOTE]
+> Pour des raisons de performances et dans la spécification actuelle, [`has()` n'est pas classé comme un sélecteur dynamique](https://drafts.csswg.org/selectors/#live-profile) et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.
 
 ```js
 /* Avec cette ligne de JavaScript, on récupère  */
diff --git a/files/fr/web/css/_colon_host-context/index.md b/files/fr/web/css/_colon_host-context/index.md
index 6994fbe3ef8786..b515794aed5722 100644
--- a/files/fr/web/css/_colon_host-context/index.md
+++ b/files/fr/web/css/_colon_host-context/index.md
@@ -13,7 +13,8 @@ Autrement dit, cela permet à un élément personnalisé, ou à n'importe quoi a
 
 Une utilisation classique consiste à utiliser une expression avec un sélecteur de descendants, par exemple `h1`, afin de cibler uniquement les instances de l'élément personnalisé situées dans un élément `<h1>`. Un autre usage pourrait consister à permettre aux éléments internes de réagir aux classes ou attributs des éléments parmi les ancêtres (par exemple, appliquer une couleur de texte différente lorsqu'une classe `.dark-theme` est appliquée à `<body>`).
 
-> **Note :** Cette pseudo-classe n'a aucun effet si elle est utilisée en dehors d'un DOM sombre.
+> [!NOTE]
+> Cette pseudo-classe n'a aucun effet si elle est utilisée en dehors d'un DOM sombre.
 
 ```css
 /* Cible l'hôte d'une racine sombre, uniquement si elle
diff --git a/files/fr/web/css/_colon_host/index.md b/files/fr/web/css/_colon_host/index.md
index d9c24020288630..279b2588b2f224 100644
--- a/files/fr/web/css/_colon_host/index.md
+++ b/files/fr/web/css/_colon_host/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:host
 
 La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler l'hôte d'un _[shadow DOM](/fr/docs/Web/Web_Components/Using_shadow_DOM)_ contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (_custom element_) depuis l'intérieur du _shadow DOM_.
 
-> **Note :** Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un _shadow DOM_.
+> [!NOTE]
+> Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un _shadow DOM_.
 
 ```css
 /* Cible la racine d'un hôte de shadow DOM */
diff --git a/files/fr/web/css/_colon_host_function/index.md b/files/fr/web/css/_colon_host_function/index.md
index 0556ecabea7f58..69d5518b86857d 100644
--- a/files/fr/web/css/_colon_host_function/index.md
+++ b/files/fr/web/css/_colon_host_function/index.md
@@ -9,7 +9,8 @@ La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host()`** pe
 
 Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}.
 
-> **Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_.
+> [!NOTE]
+> Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_.
 
 ```css
 /* On cible l'hôte du shadow DOM uniquement s'il
diff --git a/files/fr/web/css/_colon_hover/index.md b/files/fr/web/css/_colon_hover/index.md
index 8f0b7be41cb5cb..15115f8d82b616 100644
--- a/files/fr/web/css/_colon_hover/index.md
+++ b/files/fr/web/css/_colon_hover/index.md
@@ -19,7 +19,8 @@ La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'au
 
 La pseudo-classe `:hover` peut être appliquée à n'importe quel [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements). {{experimental_inline}}
 
-> **Note :** sur les écrans tactiles, `:hover` est problématique voire impossible. La pseudo-classe `:hover` n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
+> [!NOTE]
+> Sur les écrans tactiles, `:hover` est problématique voire impossible. La pseudo-classe `:hover` n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
 
 ## Syntaxe
 
@@ -47,7 +48,8 @@ a:hover {
 
 {{EmbedLiveSample('Exemples')}}
 
-> **Note :** On peut utiliser la pseudo-classe `:checked` dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.
+> [!NOTE]
+> On peut utiliser la pseudo-classe `:checked` dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_colon_in-range/index.md b/files/fr/web/css/_colon_in-range/index.md
index 73938fc1ae26c8..7bb01910c33809 100644
--- a/files/fr/web/css/_colon_in-range/index.md
+++ b/files/fr/web/css/_colon_in-range/index.md
@@ -18,7 +18,8 @@ input:in-range {
 
 Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.
 
-> **Note :** Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme _dans l'intervalle_ ou _en dehors de l'intervalle_.
+> [!NOTE]
+> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme _dans l'intervalle_ ou _en dehors de l'intervalle_.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_is/index.md b/files/fr/web/css/_colon_is/index.md
index 3217a782d09d4e..35fdee08ae69ad 100644
--- a/files/fr/web/css/_colon_is/index.md
+++ b/files/fr/web/css/_colon_is/index.md
@@ -9,7 +9,8 @@ l10n:
 
 La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:is()`** prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.
 
-> **Note :** Cette pseudo-classe avait d'abord été intitulée `:matches()` (puis `:any()`), avant d'être renommée en `:is()` avec [le ticket CSSWG n°3258](https://github.com/w3c/csswg-drafts/issues/3258).
+> [!NOTE]
+> Cette pseudo-classe avait d'abord été intitulée `:matches()` (puis `:any()`), avant d'être renommée en `:is()` avec [le ticket CSSWG n°3258](https://github.com/w3c/csswg-drafts/issues/3258).
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}}
 
diff --git a/files/fr/web/css/_colon_lang/index.md b/files/fr/web/css/_colon_lang/index.md
index 3fa29ae7f3055c..398b46c561a611 100644
--- a/files/fr/web/css/_colon_lang/index.md
+++ b/files/fr/web/css/_colon_lang/index.md
@@ -15,7 +15,8 @@ p:lang(en) {
 }
 ```
 
-> **Note :** En HTML, la langue d'un élément est déterminée par l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes#lang), l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.
+> [!NOTE]
+> En HTML, la langue d'un élément est déterminée par l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes#lang), l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.
 >
 > Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.
 
diff --git a/files/fr/web/css/_colon_last-child/index.md b/files/fr/web/css/_colon_last-child/index.md
index 1e32a7e19d3386..d224ed2d3d7ad6 100644
--- a/files/fr/web/css/_colon_last-child/index.md
+++ b/files/fr/web/css/_colon_last-child/index.md
@@ -16,7 +16,8 @@ li:last-child {
 }
 ```
 
-> **Note :** En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.
+> [!NOTE]
+> En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_last-of-type/index.md b/files/fr/web/css/_colon_last-of-type/index.md
index c76cccc1b172a9..368ddfaadfbb71 100644
--- a/files/fr/web/css/_colon_last-of-type/index.md
+++ b/files/fr/web/css/_colon_last-of-type/index.md
@@ -15,7 +15,8 @@ p:last-of-type {
 }
 ```
 
-> **Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
+> [!NOTE]
+> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_left/index.md b/files/fr/web/css/_colon_left/index.md
index ec3894e47371b5..fb1da5a604413e 100644
--- a/files/fr/web/css/_colon_left/index.md
+++ b/files/fr/web/css/_colon_left/index.md
@@ -17,7 +17,8 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:left`**, liée à la rè
 
 La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page `:left`.
 
-> **Note :** Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de **la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.
+> [!NOTE]
+> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de **la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_link/index.md b/files/fr/web/css/_colon_link/index.md
index 3cbd8830b0f602..cff1e85cff1e55 100644
--- a/files/fr/web/css/_colon_link/index.md
+++ b/files/fr/web/css/_colon_link/index.md
@@ -17,7 +17,8 @@ a:link {
 
 Afin que la mise en forme s'applique au mieux, la règle `:link` doit être placée avant les autres : `:link` — `:visited` — `:hover` — `:active`. La pseudo-classe {{cssxref(":focus")}} est habituellement placée juste avant ou juste après `:hover`, en fonction de l'effet désiré.
 
-> **Note :** On utilisera {{cssxref(":any-link")}} pour sélectionner un élément qu'il ait été visité ou non.
+> [!NOTE]
+> On utilisera {{cssxref(":any-link")}} pour sélectionner un élément qu'il ait été visité ou non.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md
index f5c8812aa99eeb..98bfe183d8a448 100644
--- a/files/fr/web/css/_colon_not/index.md
+++ b/files/fr/web/css/_colon_not/index.md
@@ -17,7 +17,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) de négation, **`:not()`**,
 
 La [spécificité](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) de la pseudo-classe `:not` est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.
 
-> **Note :**
+> [!NOTE]
 >
 > - Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, `:not(*)` va exclure tous les éléments et ne sera jamais appliqué.
 > - À l'inverse, il est possible d'augmenter la [spécificitié](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) d'un sélecteur. Ainsi. `toto:not(truc)` ciblera les mêmes éléments que `toto`, mais avec une spécificité plus forte.
@@ -28,7 +28,8 @@ La [spécificité](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) d
 
 La pseudo-classe `:not()` prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou [de pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements).
 
-> **Attention :** la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.
+> [!WARNING]
+> La possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.
 
 {{csssyntax}}
 
diff --git a/files/fr/web/css/_colon_nth-child/index.md b/files/fr/web/css/_colon_nth-child/index.md
index b24fc57c9b2ef2..6b083c249ef0b8 100644
--- a/files/fr/web/css/_colon_nth-child/index.md
+++ b/files/fr/web/css/_colon_nth-child/index.md
@@ -16,7 +16,8 @@ body :nth-child(4n) {
 }
 ```
 
-> **Note :** Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.
+> [!NOTE]
+> Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.
 
 Illustrons cela avec quelques exemples :
 
diff --git a/files/fr/web/css/_colon_only-child/index.md b/files/fr/web/css/_colon_only-child/index.md
index 910b44c9579b54..741f44e8391187 100644
--- a/files/fr/web/css/_colon_only-child/index.md
+++ b/files/fr/web/css/_colon_only-child/index.md
@@ -15,7 +15,8 @@ p:only-child {
 }
 ```
 
-> **Note :** En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.
+> [!NOTE]
+> En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_only-of-type/index.md b/files/fr/web/css/_colon_only-of-type/index.md
index 2c522a51136835..b08a3c01f8ccb2 100644
--- a/files/fr/web/css/_colon_only-of-type/index.md
+++ b/files/fr/web/css/_colon_only-of-type/index.md
@@ -11,7 +11,8 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-of-type.html", "tabbed-shorter")}}
 
-> **Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de niveau 4).
+> [!NOTE]
+> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de niveau 4).
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_optional/index.md b/files/fr/web/css/_colon_optional/index.md
index 48a8b910189001..11def1d27984a2 100644
--- a/files/fr/web/css/_colon_optional/index.md
+++ b/files/fr/web/css/_colon_optional/index.md
@@ -15,7 +15,8 @@ input:optional {
 }
 ```
 
-> **Note :** Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.
+> [!NOTE]
+> Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_out-of-range/index.md b/files/fr/web/css/_colon_out-of-range/index.md
index 518a8d56c66d50..caa3758033c545 100644
--- a/files/fr/web/css/_colon_out-of-range/index.md
+++ b/files/fr/web/css/_colon_out-of-range/index.md
@@ -16,7 +16,8 @@ input:out-of-range {
 }
 ```
 
-> **Note :** Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.
+> [!NOTE]
+> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_read-only/index.md b/files/fr/web/css/_colon_read-only/index.md
index 389cbee3b60442..a0e4a0c9c44dd7 100644
--- a/files/fr/web/css/_colon_read-only/index.md
+++ b/files/fr/web/css/_colon_read-only/index.md
@@ -22,7 +22,8 @@ input:read-only {
 }
 ```
 
-> **Note :** Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec [`readonly`](/fr/docs/Web/HTML/Element/input#readonly). Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.
+> [!NOTE]
+> Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec [`readonly`](/fr/docs/Web/HTML/Element/input#readonly). Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_read-write/index.md b/files/fr/web/css/_colon_read-write/index.md
index 591292fd18169a..c618dfd2d02a92 100644
--- a/files/fr/web/css/_colon_read-write/index.md
+++ b/files/fr/web/css/_colon_read-write/index.md
@@ -20,7 +20,8 @@ input:read-write {
 }
 ```
 
-> **Note :** Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#contenteditable)).
+> [!NOTE]
+> Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#contenteditable)).
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_required/index.md b/files/fr/web/css/_colon_required/index.md
index 2f4055240a39fa..3979cc835f36bc 100644
--- a/files/fr/web/css/_colon_required/index.md
+++ b/files/fr/web/css/_colon_required/index.md
@@ -15,7 +15,8 @@ input:required {
 }
 ```
 
-> **Note :** La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.
+> [!NOTE]
+> La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_right/index.md b/files/fr/web/css/_colon_right/index.md
index 9be1089425c62b..f5420df127a273 100644
--- a/files/fr/web/css/_colon_right/index.md
+++ b/files/fr/web/css/_colon_right/index.md
@@ -17,7 +17,8 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la r
 
 La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).
 
-> **Note :** Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} **de la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.
+> [!NOTE]
+> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} **de la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_target/index.md b/files/fr/web/css/_colon_target/index.md
index 1c75e9c282fd55..14fa46d232dc2f 100644
--- a/files/fr/web/css/_colon_target/index.md
+++ b/files/fr/web/css/_colon_target/index.md
@@ -27,7 +27,8 @@ L'élément suivant sera donc ciblé par le sélecteur `:target` avec l'URL pré
 <section id="section2">Exemple</section>
 ```
 
-> **Note :** L'attribut `id` a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, `<a>` était nécessairement l'élément cible. La pseudo-classe `:target` permet également de gérer ces cibles.
+> [!NOTE]
+> L'attribut `id` a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, `<a>` était nécessairement l'élément cible. La pseudo-classe `:target` permet également de gérer ces cibles.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_colon_user-valid/index.md b/files/fr/web/css/_colon_user-valid/index.md
index 1a7f46af33e98b..ff8986385cc9c0 100644
--- a/files/fr/web/css/_colon_user-valid/index.md
+++ b/files/fr/web/css/_colon_user-valid/index.md
@@ -9,7 +9,8 @@ l10n:
 
 La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) CSS **`:user-valid`** représente tout élément de formulaire validé donc la valeur respecte [la validation des contraintes](/fr/docs/Learn/Forms#constraint_validation). Toutefois, à la différence de [`:valid`](/fr/docs/Web/CSS/:valid), cette pseudo-classe ne cible l'élément qu'après que la personne a interagi avec.
 
-> **Note :** Cette pseudo-classe se comporte de la même façon que la pseudo-classe non-standard `:-moz-ui-valid`.
+> [!NOTE]
+> Cette pseudo-classe se comporte de la même façon que la pseudo-classe non-standard `:-moz-ui-valid`.
 
 Cette pseudo-classe s'applique selon les règles suivantes&nbsp;:
 
diff --git a/files/fr/web/css/_colon_where/index.md b/files/fr/web/css/_colon_where/index.md
index b1c9b6ffd90935..505e8743e366da 100644
--- a/files/fr/web/css/_colon_where/index.md
+++ b/files/fr/web/css/_colon_where/index.md
@@ -125,7 +125,8 @@ Cela ne fonctionnera pas pour les liens rouges, car les sélecteurs à l'intéri
 
 Cependant, les sélecteurs à l'intérieur de `:where()` ont une spécificité à 0, et le lien orange du pied de page sera surchargé par le sélecteur simple.
 
-> **Note :** Vous pouvez également consulter [cet exemple sur GitHub](https://mdn.github.io/css-examples/is-where/).
+> [!NOTE]
+> Vous pouvez également consulter [cet exemple sur GitHub](https://mdn.github.io/css-examples/is-where/).
 
 {{EmbedLiveSample('', '100%', 600)}}
 
diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md
index bb95e2e2c607cb..4f4e589dd9f6b1 100644
--- a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-moz-color-swatch
 
 Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::-moz-color-swatch`** est [un pseudo-élément spécifique à Mozilla](/fr/docs/Web/CSS/Extensions_Mozilla) qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec `type="color"`.
 
-> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet.
+> [!NOTE]
+> Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_doublecolon_-moz-focus-inner/index.md b/files/fr/web/css/_doublecolon_-moz-focus-inner/index.md
index e880b0f9cf3104..c2402f963ebaf6 100644
--- a/files/fr/web/css/_doublecolon_-moz-focus-inner/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-focus-inner/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) [CSS](/fr/docs/Web/CSS) **`::-moz-focus-inner`** est [une extension spécifique à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions) qui représente le contour interne pour le focus sur les éléments [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button), [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit), [`<input type="reset">`](/fr/docs/Web/HTML/Element/Input/reset), et [`<input type="color">`](/fr/docs/Web/HTML/Element/Input/color).
 
-> **Note :** Utiliser `::-moz-focus-inner` sur un autre élément que les types de boutons pris en charge n'aura aucun effet.
+> [!NOTE]
+> Utiliser `::-moz-focus-inner` sur un autre élément que les types de boutons pris en charge n'aura aucun effet.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
index 3c9858886c203e..416b7c7a3dee37 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-moz-range-progress
 
 Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.
 
-> **Note :** Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet.
+> [!NOTE]
+> Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
index 66b4096e0aeabe..631fd8dbce3d26 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-moz-range-thumb
 
 Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` et qui permet de modifier la valeur numérique associée.
 
-> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet.
+> [!NOTE]
+> Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md
index 61404098345373..00e1616555366d 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md
@@ -36,7 +36,8 @@ meter::-webkit-meter-bar {
 
 {{EmbedLiveSample('Exemples')}}
 
-> **Note :** Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.
+> [!NOTE]
+> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
index c1b9cd41d2b609..b9607d63239f97 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
@@ -29,7 +29,8 @@ meter::-webkit-meter-even-less-good-value {
 
 {{EmbedLiveSample('Exemples', '100%', 50)}}
 
-> **Note :** Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.
+> [!NOTE]
+> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md
index 894cb25c1ad650..7d92d07100f2fe 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md
@@ -36,7 +36,8 @@ meter::-webkit-meter-inner-element {
 
 {{EmbedLiveSample('Exemples', '100%', 50)}}
 
-> **Note :** Cela ne fonctionne que pour les navigateurs Webkit/Blink.
+> [!NOTE]
+> Cela ne fonctionne que pour les navigateurs Webkit/Blink.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
index 6f25c36f403fa3..6a7fcc7893b29b 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
@@ -32,7 +32,8 @@ meter::-webkit-meter-suboptimum-value {
 
 {{EmbedLiveSample('Exemples', '100%', 50)}}
 
-> **Note :** Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.
+> [!NOTE]
+> Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md
index c43072f97c7387..f4f7f8be4afddb 100644
--- a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-webkit-progress-bar
 
 Le pseudo-élément **`::-webkit-progress-bar`** représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.
 
-> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("appearance")}} vaille `none` sur l'élément `<progress>`.
+> [!NOTE]
+> Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("appearance")}} vaille `none` sur l'élément `<progress>`.
 
 ## Exemples
 
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
index 6121090ef0f4e8..2d78c4e9cfa67b 100644
--- a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-webkit-progress-inner-element
 
 Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément [`<progress>`](/fr/docs/Web/HTML/Element/Progress). C'est un pseudo-élément parent du pseudo-élément [`::-webkit-progress-bar`](/fr/docs/Web/CSS/::-webkit-progress-bar).
 
-> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que [`-webkit-appearance`](/fr/docs/Web/CSS/-webkit-appearance) vaille `none` sur l'élément `<progress>`.
+> [!NOTE]
+> Afin que `::-webkit-progress-value` ait un effet, il faut que [`-webkit-appearance`](/fr/docs/Web/CSS/-webkit-appearance) vaille `none` sur l'élément `<progress>`.
 
 ## Exemples
 
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md
index d7a2bcc3358be2..093219e075a0cb 100644
--- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-webkit-progress-value
 
 Le pseudo-élément **`::-webkit-progress-value`** permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.
 
-> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`.
+> [!NOTE]
+> Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`.
 
 ## Exemples
 
diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md
index 6b6fb1279d83fd..8d649cacf1d38e 100644
--- a/files/fr/web/css/_doublecolon_after/index.md
+++ b/files/fr/web/css/_doublecolon_after/index.md
@@ -11,7 +11,8 @@ En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elemen
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-element-after.html", "tabbed-standard")}}
 
-> **Note :** Les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, [`::before`](/fr/docs/Web/CSS/::before) et `::after` ne s'appliquent pas aux _[éléments remplacés](/fr/docs/Web/CSS/Replaced_element)_ tels que les éléments [`<img>`](/fr/docs/Web/HTML/Element/img) ou [`<br>`](/fr/docs/Web/HTML/Element/br).
+> [!NOTE]
+> Les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, [`::before`](/fr/docs/Web/CSS/::before) et `::after` ne s'appliquent pas aux _[éléments remplacés](/fr/docs/Web/CSS/Replaced_element)_ tels que les éléments [`<img>`](/fr/docs/Web/HTML/Element/img) ou [`<br>`](/fr/docs/Web/HTML/Element/br).
 
 ## Syntaxe
 
@@ -24,7 +25,8 @@ En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elemen
 
 Si la propriété [`content`](/fr/docs/Web/CSS/content) n'est pas indiquée, contient une valeur invalide, vaut `normal`, ou vaut `none`, le pseudo-élément `::after` ne sera pas rendu à l'écran. Il se comportera comme si `display: none` avait été appliqué.
 
-> **Note :** CSS a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements). Les navigateurs acceptent aussi la notation `:after`, introduite précédemment, à des fins de rétro-compatibilité.
+> [!NOTE]
+> CSS a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements). Les navigateurs acceptent aussi la notation `:after`, introduite précédemment, à des fins de rétro-compatibilité.
 
 ## Exemples
 
diff --git a/files/fr/web/css/_doublecolon_backdrop/index.md b/files/fr/web/css/_doublecolon_backdrop/index.md
index b48013930b6cc5..d0a3ca45d2ee1a 100644
--- a/files/fr/web/css/_doublecolon_backdrop/index.md
+++ b/files/fr/web/css/_doublecolon_backdrop/index.md
@@ -17,7 +17,8 @@ dialog::backdrop {
 }
 ```
 
-> **Note :** L'élément `::backdrop` peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.
+> [!NOTE]
+> L'élément `::backdrop` peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.
 
 Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.
 
diff --git a/files/fr/web/css/_doublecolon_before/index.md b/files/fr/web/css/_doublecolon_before/index.md
index f385dd2a93ea42..37812a48e3683f 100644
--- a/files/fr/web/css/_doublecolon_before/index.md
+++ b/files/fr/web/css/_doublecolon_before/index.md
@@ -14,7 +14,8 @@ a::before {
 }
 ```
 
-> **Note :** Les pseudo-éléments générés par `::before` et `::after` sont contenus dans la boîte de mise en forme de l'élément. Aussi, `::before` et `::after` ne s'appliquent pas [aux éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé) tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.
+> [!NOTE]
+> Les pseudo-éléments générés par `::before` et `::after` sont contenus dans la boîte de mise en forme de l'élément. Aussi, `::before` et `::after` ne s'appliquent pas [aux éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé) tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_doublecolon_cue-region/index.md b/files/fr/web/css/_doublecolon_cue-region/index.md
index ce933af23c7609..8fbd5fb5209101 100644
--- a/files/fr/web/css/_doublecolon_cue-region/index.md
+++ b/files/fr/web/css/_doublecolon_cue-region/index.md
@@ -39,7 +39,8 @@ Les propriétés sont appliquées à l'intégralité des indications textuelles
 
 ## Exemples
 
-> **Note :** Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.
+> [!NOTE]
+> Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.
 
 ## Spécifications
 
diff --git a/files/fr/web/css/_doublecolon_first-letter/index.md b/files/fr/web/css/_doublecolon_first-letter/index.md
index 7bed59b15cdd98..5c01f139b932bc 100644
--- a/files/fr/web/css/_doublecolon_first-letter/index.md
+++ b/files/fr/web/css/_doublecolon_first-letter/index.md
@@ -59,7 +59,8 @@ Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un b
 
 Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.
 
-> **Note :** Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.
+> [!NOTE]
+> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.
 >
 > Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.
 >
diff --git a/files/fr/web/css/_doublecolon_first-line/index.md b/files/fr/web/css/_doublecolon_first-line/index.md
index a61995fd9fd20f..75eee379af6b1b 100644
--- a/files/fr/web/css/_doublecolon_first-line/index.md
+++ b/files/fr/web/css/_doublecolon_first-line/index.md
@@ -30,7 +30,8 @@ Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de d
 
 Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.
 
-> **Note :** Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.
+> [!NOTE]
+> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.
 >
 > Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.
 >
diff --git a/files/fr/web/css/_doublecolon_marker/index.md b/files/fr/web/css/_doublecolon_marker/index.md
index fffce97bb500f9..7ddc9a03f59446 100644
--- a/files/fr/web/css/_doublecolon_marker/index.md
+++ b/files/fr/web/css/_doublecolon_marker/index.md
@@ -23,7 +23,8 @@ Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règ
 - {{cssxref("content")}}
 - [Toutes les propriétés liées aux polices (font).](/fr/docs/Web/CSS/CSS_Fonts)
 
-> **Note :** La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.
+> [!NOTE]
+> La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/_doublecolon_placeholder/index.md b/files/fr/web/css/_doublecolon_placeholder/index.md
index 319a080150f4cc..d3c15dc257b763 100644
--- a/files/fr/web/css/_doublecolon_placeholder/index.md
+++ b/files/fr/web/css/_doublecolon_placeholder/index.md
@@ -22,7 +22,8 @@ Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteu
 - {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}
 - {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.
 
-> **Note :** Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.
+> [!NOTE]
+> Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/animation-composition/index.md b/files/fr/web/css/animation-composition/index.md
index 5f2b4856556804..a32e4b1e30d9f2 100644
--- a/files/fr/web/css/animation-composition/index.md
+++ b/files/fr/web/css/animation-composition/index.md
@@ -30,7 +30,8 @@ animation-composition: revert-layer;
 animation-composition: unset;
 ```
 
-> **Note :** Lorsqu'on indique plusieurs valeurs, séparées par des virgules, à une propriété `animation-*`, celles-ci seront appliquées aux animations selon leur ordre d'apparition dans [`animation-name`](/fr/docs/Web/CSS/animation-name). Si le nombre d'animations et de compositions est différent, les valeurs de `animation-composition` seront réutilisées en bouclant depuis le début, jusqu'à ce que toutes les animations aient reçue une valeur `animation-composition`. Pour plus d'informations, voir [définir les valeurs de propriétés pour plusieurs animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values).
+> [!NOTE]
+> Lorsqu'on indique plusieurs valeurs, séparées par des virgules, à une propriété `animation-*`, celles-ci seront appliquées aux animations selon leur ordre d'apparition dans [`animation-name`](/fr/docs/Web/CSS/animation-name). Si le nombre d'animations et de compositions est différent, les valeurs de `animation-composition` seront réutilisées en bouclant depuis le début, jusqu'à ce que toutes les animations aient reçue une valeur `animation-composition`. Pour plus d'informations, voir [définir les valeurs de propriétés pour plusieurs animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values).
 
 ### Valeurs
 
@@ -70,7 +71,8 @@ Prenons l'hypothèse d'autres valeurs que celle utilisée avant pour `animation-
 - Avec `animation-composition: add;`, l'effet de la valeur composite pour l'image-clé à `0%` aurait été `blur(5px) blur(10px)`.
 - Avec `animation-composition: accumulate`, l'effet de la valeur composite pour l'image-clé à `0%` aurait été `blur(15px)`.
 
-> **Note :** Une opération composite peut également être indiquée dans une image-clé donnée. Dans ce cas, l'opération composite indiquée est utilisée pour chaque propriété, d'abord pour celles de l'image-clé courante, puis sur chaque propriété de l'image-clé suivante.
+> [!NOTE]
+> Une opération composite peut également être indiquée dans une image-clé donnée. Dans ce cas, l'opération composite indiquée est utilisée pour chaque propriété, d'abord pour celles de l'image-clé courante, puis sur chaque propriété de l'image-clé suivante.
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-delay/index.md b/files/fr/web/css/animation-delay/index.md
index 341ce98336b6b0..480ab4d446e0c3 100644
--- a/files/fr/web/css/animation-delay/index.md
+++ b/files/fr/web/css/animation-delay/index.md
@@ -27,7 +27,8 @@ animation-delay: 2s, 4ms;
 - `<time>`
   - : La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (`s` comme suffixe) ou en millisecondes (`ms` comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
 
-> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
+> [!NOTE]
+> Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-direction/index.md b/files/fr/web/css/animation-direction/index.md
index 23dc29cd23b7d9..ad2983ddcaff37 100644
--- a/files/fr/web/css/animation-direction/index.md
+++ b/files/fr/web/css/animation-direction/index.md
@@ -41,7 +41,8 @@ animation-direction: unset;
 - `alternate-reverse`
   - : La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.
 
-> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
+> [!NOTE]
+> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-duration/index.md b/files/fr/web/css/animation-duration/index.md
index 51c9a61763b351..bc65c9922411b4 100644
--- a/files/fr/web/css/animation-duration/index.md
+++ b/files/fr/web/css/animation-duration/index.md
@@ -27,9 +27,11 @@ animation-duration: 10s, 30s, 230ms;
 - `<time>`
   - : La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (`s` comme suffixe pour l'unité) ou en millisecondes (`ms` comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
 
-> **Note :** Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de `0s`.
+> [!NOTE]
+> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de `0s`.
 
-> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
+> [!NOTE]
+> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-fill-mode/index.md b/files/fr/web/css/animation-fill-mode/index.md
index 7c07d52a096c06..7a1f27cca07869 100644
--- a/files/fr/web/css/animation-fill-mode/index.md
+++ b/files/fr/web/css/animation-fill-mode/index.md
@@ -52,7 +52,8 @@ animation-fill-mode: both, forwards, none;
 - `both`
   - : L'animation respectera les règles qui s'appliquent à `forwards` et `backwards`, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.
 
-> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
+> [!NOTE]
+> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-iteration-count/index.md b/files/fr/web/css/animation-iteration-count/index.md
index 1d8190cdd95065..f7770660439699 100644
--- a/files/fr/web/css/animation-iteration-count/index.md
+++ b/files/fr/web/css/animation-iteration-count/index.md
@@ -37,7 +37,8 @@ La propriété `animation-iteration-count` est définie avec une ou plusieurs va
 - `<number>`
   - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation).
 
-> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
+> [!NOTE]
+> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-name/index.md b/files/fr/web/css/animation-name/index.md
index 50f29dab5dc330..559d92b8564320 100644
--- a/files/fr/web/css/animation-name/index.md
+++ b/files/fr/web/css/animation-name/index.md
@@ -36,7 +36,8 @@ animation-name: unset
 - {{cssxref("custom-ident","&lt;custom-ident&gt;")}}
   - : Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre `a` et `z`, de nombres entre `0` et `9`, de tirets bas (`_`) et/ou de tirets (`-`). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être `unset`, `initial`, `inherit` ou une combinaison analogue avec une casse différente.
 
-> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
+> [!NOTE]
+> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-play-state/index.md b/files/fr/web/css/animation-play-state/index.md
index 98ae99192ae6b7..5424e56461dddc 100644
--- a/files/fr/web/css/animation-play-state/index.md
+++ b/files/fr/web/css/animation-play-state/index.md
@@ -35,7 +35,8 @@ animation-play-state: unset;
 - `paused`
   - : L'animation est en pause.
 
-> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
+> [!NOTE]
+> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md
index 95e16141aa5037..7bcf02bc2c72aa 100644
--- a/files/fr/web/css/animation-timing-function/index.md
+++ b/files/fr/web/css/animation-timing-function/index.md
@@ -90,7 +90,8 @@ Une fonction de progression pour une animation qui est définie pour une étape
     - `step-end`
       - : Synonyme de `steps(1, jump-end)`
 
-> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_différentes_animations).
+> [!NOTE]
+> Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_différentes_animations).
 
 ## Définition formelle
 
diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md
index eda2b31d4706cf..adb251ef1f0d7a 100644
--- a/files/fr/web/css/animation/index.md
+++ b/files/fr/web/css/animation/index.md
@@ -285,7 +285,8 @@ L'ordre des valeurs est également important pour chaque définition d'animation
 
 ## Exemples
 
-> **Note :** D'autres exemples sont disponibles sur la page [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
+> [!NOTE]
+> D'autres exemples sont disponibles sur la page [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
 
 ### Vue laser
 
diff --git a/files/fr/web/css/attr/index.md b/files/fr/web/css/attr/index.md
index f2973846a02ce1..1ad569168bb937 100644
--- a/files/fr/web/css/attr/index.md
+++ b/files/fr/web/css/attr/index.md
@@ -24,7 +24,8 @@ attr(data-width px, inherit);
 attr(data-something, "default");
 ```
 
-> **Note :** La fonction `attr()` peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.
+> [!NOTE]
+> La fonction `attr()` peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md
index 4329496eb616c9..97f83873561f94 100644
--- a/files/fr/web/css/background-image/index.md
+++ b/files/fr/web/css/background-image/index.md
@@ -15,7 +15,8 @@ Les bordures de l'élément sont dessinées par-dessus l'arrière-plan et la cou
 
 Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiqué), les navigateurs considèreront la valeur comme `none`.
 
-> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via [`background-color`](/fr/docs/Web/CSS/background-color) au cas où les images ne peuvent être chargées.
+> [!NOTE]
+> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via [`background-color`](/fr/docs/Web/CSS/background-color) au cas où les images ne peuvent être chargées.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md
index 16a8157eccb69e..5670b18a872f35 100644
--- a/files/fr/web/css/background-origin/index.md
+++ b/files/fr/web/css/background-origin/index.md
@@ -11,7 +11,8 @@ La propriété **`background-origin`** détermine l'origine de l'arrière-plan [
 
 Attention, `background-origin` est ignorée lorsque [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`.
 
-> **Note :** Cette propriété est rattachée à la propriété raccourcie [`background`](/fr/docs/Web/CSS/background). Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`.
+> [!NOTE]
+> Cette propriété est rattachée à la propriété raccourcie [`background`](/fr/docs/Web/CSS/background). Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/background-position-x/index.md b/files/fr/web/css/background-position-x/index.md
index ab0ad48e240862..55a1c8196a73c2 100644
--- a/files/fr/web/css/background-position-x/index.md
+++ b/files/fr/web/css/background-position-x/index.md
@@ -11,7 +11,8 @@ Pour plus d'informations, se référer à la documentation de la propriété {{c
 
 {{EmbedInteractiveExample("pages/css/background-position-x.html")}}
 
-> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`.
+> [!NOTE]
+> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/background-position-y/index.md b/files/fr/web/css/background-position-y/index.md
index 412131ace0c7b1..d05ce571ff7832 100644
--- a/files/fr/web/css/background-position-y/index.md
+++ b/files/fr/web/css/background-position-y/index.md
@@ -9,7 +9,8 @@ La propriété **`background-position-y`** définit la position verticale initia
 
 {{EmbedInteractiveExample("pages/css/background-position-y.html")}}
 
-> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.
+> [!NOTE]
+> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md
index 96b29da0138b7d..a2e027708116a1 100644
--- a/files/fr/web/css/background-position/index.md
+++ b/files/fr/web/css/background-position/index.md
@@ -69,7 +69,8 @@ La propriété `background-position` peut être définie grâce à une ou plusie
     - Un des mots-clés parmi `top`, `left`, `bottom`, `right`. Si `left` ou `right` est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si `top` ou `bottom` est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
     - Une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
 
-    > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit, les combinaisons `top top`, `bottom bottom`, `top bottom`, `bottom top`, `right right`, `left left`, `left right` et `right left` seront considérées comme invalides.
+    > [!NOTE]
+    > Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit, les combinaisons `top top`, `bottom bottom`, `top bottom`, `bottom top`, `right right`, `left left`, `left right` et `right left` seront considérées comme invalides.
 
     - L'ordre des mots-clés n'est pas important, le navigateur pourra les réarranger si besoin. Ainsi, `top left` et `left top` auront le même effet. En revanche, si on associe une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) avec un mot-clé, l'ordre est important et la valeur définissant l'abscisse doit arriver avant l'ordonnée&nbsp;: `right 20px` ne sera pas équivalent à `20px right` et cette dernière forme sera invalide. Les valeurs `left 20%` ou `20% bottom` sont valides car les abscisses et ordonnées sont bien rangées.
 
diff --git a/files/fr/web/css/transform-function/matrix/index.md b/files/fr/web/css/transform-function/matrix/index.md
index ac2d29ed06a94b..d0641593d046b9 100644
--- a/files/fr/web/css/transform-function/matrix/index.md
+++ b/files/fr/web/css/transform-function/matrix/index.md
@@ -24,7 +24,8 @@ matrix(a, b, c, d, tx, ty)
 - `tx` `ty`
   - : Les coefficients de la matrice, de type [`<number>`](/fr/docs/Web/CSS/number), qui définissent la translation à appliquer.
 
-> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [`<length>`](/fr/docs/Web/CSS/length) pour les coefficients `tx` et `ty`.
+> [!NOTE]
+> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [`<length>`](/fr/docs/Web/CSS/length) pour les coefficients `tx` et `ty`.
 
 <table class="standard-table">
   <thead>
diff --git a/files/fr/web/css/transform-function/matrix3d/index.md b/files/fr/web/css/transform-function/matrix3d/index.md
index 581e30508c4314..3e66c126dcb52f 100644
--- a/files/fr/web/css/transform-function/matrix3d/index.md
+++ b/files/fr/web/css/transform-function/matrix3d/index.md
@@ -22,7 +22,8 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
 - `a4` `b4 c4`
   - : Les coefficients de type [`<number>`](/fr/docs/Web/CSS/number) qui définissent la translation à appliquer.
 
-> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [`<length>`](/fr/docs/Web/CSS/length) pour les coefficients `a4`, `b4` et `c4`.
+> [!NOTE]
+> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [`<length>`](/fr/docs/Web/CSS/length) pour les coefficients `a4`, `b4` et `c4`.
 
 <table class="standard-table">
   <thead>
diff --git a/files/fr/web/css/transform-function/rotate3d/index.md b/files/fr/web/css/transform-function/rotate3d/index.md
index 0de4e30e88bcda..9aca04a05a1cb5 100644
--- a/files/fr/web/css/transform-function/rotate3d/index.md
+++ b/files/fr/web/css/transform-function/rotate3d/index.md
@@ -11,7 +11,8 @@ La fonction **`rotate3d()`** définit une transformation qui déplace un éléme
 
 Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.
 
-> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
+> [!NOTE]
+> Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/transform-function/rotatex/index.md b/files/fr/web/css/transform-function/rotatex/index.md
index d8c010b1e61bc6..56eb236815fa65 100644
--- a/files/fr/web/css/transform-function/rotatex/index.md
+++ b/files/fr/web/css/transform-function/rotatex/index.md
@@ -13,7 +13,8 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété
 
 `rotateX(a)` est une notation raccourcie, équivalente à `rotate3D(1, 0, 0, a)`.
 
-> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
+> [!NOTE]
+> Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/transform-function/rotatey/index.md b/files/fr/web/css/transform-function/rotatey/index.md
index 8b09ea7d09cd17..70dd6ea196f615 100644
--- a/files/fr/web/css/transform-function/rotatey/index.md
+++ b/files/fr/web/css/transform-function/rotatey/index.md
@@ -13,7 +13,8 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété
 
 `rotateY(a)` est une notation raccourcie, équivalente à `rotate3D(0, 1, 0, a)`.
 
-> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
+> [!NOTE]
+> Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/transform-function/rotatez/index.md b/files/fr/web/css/transform-function/rotatez/index.md
index 2d983c0d9905a2..cb5f6d15bbbf3a 100644
--- a/files/fr/web/css/transform-function/rotatez/index.md
+++ b/files/fr/web/css/transform-function/rotatez/index.md
@@ -13,7 +13,8 @@ L'axe de la rotation passe par l'origine du repère, définie par la propriété
 
 `rotateZ(a)` est une notation raccourcie équivalente à `rotate3D(0, 0, 1, a)`.
 
-> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
+> [!NOTE]
+> Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/transform-function/scale/index.md b/files/fr/web/css/transform-function/scale/index.md
index 6f6fb3c7e1e2be..b7058c753cfa66 100644
--- a/files/fr/web/css/transform-function/scale/index.md
+++ b/files/fr/web/css/transform-function/scale/index.md
@@ -13,7 +13,8 @@ Cette transformation est définie par un vecteur dont les coordonnées définiss
 
 Lorsque les coordonnées du vecteur sont en dehors de l'intervalle \[`-1, 1]`, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.
 
-> **Note :** La fonction `scale()` applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction `scale3D()`.
+> [!NOTE]
+> La fonction `scale()` applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction `scale3D()`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/transform/index.md b/files/fr/web/css/transform/index.md
index d4f09e614f67d9..c79c98f64aaf60 100644
--- a/files/fr/web/css/transform/index.md
+++ b/files/fr/web/css/transform/index.md
@@ -11,7 +11,8 @@ La propriété **`transform`** modifie l'espace de coordonnées utilisé pour la
 
 Si la propriété est différente de `none`, un [contexte d'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont `position: fixed;` ou `position: absolute;`.
 
-> **Attention :** Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des [boîtes en ligne non-remplacées](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle#Les_éléments_en_ligne_et_les_boîtes_en_ligne), des [colonnes de tableau](/fr/docs/Web/HTML/Element/col) ou des [groupes de colonnes de tableau](/fr/docs/Web/HTML/Element/colgroup) ne peuvent pas être transformés.
+> [!WARNING]
+> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des [boîtes en ligne non-remplacées](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle#Les_éléments_en_ligne_et_les_boîtes_en_ligne), des [colonnes de tableau](/fr/docs/Web/HTML/Element/col) ou des [groupes de colonnes de tableau](/fr/docs/Web/HTML/Element/colgroup) ne peuvent pas être transformés.
 
 ## Syntaxe
 
@@ -74,7 +75,8 @@ La propriété `transform` peut être définie avec le mot-clé [`none`](#none)
 
 {{CSSSyntax}}
 
-> **Note :** Si on utilise plusieurs fonctions dont [`perspective()`](</fr/docs/Web/CSS/transform-function/perspective()>), celle-ci devra apparaître en premier.
+> [!NOTE]
+> Si on utilise plusieurs fonctions dont [`perspective()`](</fr/docs/Web/CSS/transform-function/perspective()>), celle-ci devra apparaître en premier.
 
 ## Exemples
 
diff --git a/files/fr/web/css/unicode-bidi/index.md b/files/fr/web/css/unicode-bidi/index.md
index 97d20cf06f790a..ea64446f2bae50 100644
--- a/files/fr/web/css/unicode-bidi/index.md
+++ b/files/fr/web/css/unicode-bidi/index.md
@@ -9,7 +9,8 @@ La propriété **`unicode-bidi`**, associée à la propriété {{cssxref("direct
 
 Les propriétés `unicode-bidi` et {{cssxref("direction")}} sont les deux seules propriétés qui ne sont pas impactées par {{cssxref("all")}}.
 
-> **Note :** Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.
+> [!NOTE]
+> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.
 
 ```css
 /* Avec un mot-clé */
diff --git a/files/fr/web/css/url/index.md b/files/fr/web/css/url/index.md
index e5bb2699acc9ce..a4d87e9a22a8d6 100644
--- a/files/fr/web/css/url/index.md
+++ b/files/fr/web/css/url/index.md
@@ -9,7 +9,8 @@ La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un
 
 La notation fonctionnelle `url()` correspond au type de donnée CSS `<url>`.
 
-> **Note :** Il y a une différence entre un URI et une URL. Un URI identifie une ressource. Une URL est un type d'URI qui décrit _l'emplacement_ d'une ressource. Un URI peut être une URL ou un nom (URN) d'une ressource.
+> [!NOTE]
+> Il y a une différence entre un URI et une URL. Un URI identifie une ressource. Une URL est un type d'URI qui décrit _l'emplacement_ d'une ressource. Un URI peut être une URL ou un nom (URN) d'une ressource.
 >
 > Pour la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne décrivaient que des URL au sens strict. Pour la spécification CSS de niveau 2, la définition de `url()` a été étendue afin de décrire n'importe quel URI (que ce soit une URL ou un URN). Cela a été une source de confusion, car `url()` pouvait être utilisée pour créer un type de données `<uri>`. Cette évolution était non seulement étrange mais aussi superflue, car les URN ne sont quasiment jamais utilisées dans du CSS réel. Pour éviter cette confusion, la spécification CSS de niveau 3 est revenue à la définition initiale. Aujourd'hui, `url()` ne manipule que des vraies `<url>`.
 
diff --git a/files/fr/web/css/user-modify/index.md b/files/fr/web/css/user-modify/index.md
index 1ffe764a27897e..37561f47c76c78 100644
--- a/files/fr/web/css/user-modify/index.md
+++ b/files/fr/web/css/user-modify/index.md
@@ -19,7 +19,8 @@ user-modify: initial;
 user-modify: unset;
 ```
 
-> **Attention :** Cette propriété a été remplacée par l'attribut [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#contenteditable).
+> [!WARNING]
+> Cette propriété a été remplacée par l'attribut [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#contenteditable).
 
 Cette propriété est similaire à l'attribut HTML [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#contenteditable). Une propriété similaire : `user-focus` a été proposée [pour des brouillons de la spécification CSS3 pour les interfaces utilisateur](https://www.w3.org/TR/2000/WD-css3-userint-20000216) mais fut rejetée par le groupe de travail. **Elle a été désactivée de Firefox et n'a donc pas d'effet.**
 
diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md
index 2519fbe354bd77..90cb2869091bd3 100644
--- a/files/fr/web/css/user-select/index.md
+++ b/files/fr/web/css/user-select/index.md
@@ -60,7 +60,8 @@ user-select: unset;
 
   - : Uniquement supporté par Internet Explorer. Cela permet d'activer la sélection au sein de l'élément, celle-ci ne pourra pas « sortir » de cet élément.
 
-> **Note :** CSS UI 4 [a renommé `user-select: element` en `contain`](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).
+> [!NOTE]
+> CSS UI 4 [a renommé `user-select: element` en `contain`](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).
 
 ### Syntaxe formelle
 
diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md
index dd47dfd4f4ac71..9e38fd227843fc 100644
--- a/files/fr/web/css/using_css_custom_properties/index.md
+++ b/files/fr/web/css/using_css_custom_properties/index.md
@@ -42,7 +42,8 @@ Les propriétés personnalisées ont actuellement deux formes :
 - les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()`&nbsp;: `var(--example-variable)` retourne la valeur de `--example-variable`.
 - les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`.
 
-> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ([bug Firefox 985838](https://bugzil.la/985838))
+> [!NOTE]
+> Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ([bug Firefox 985838](https://bugzil.la/985838))
 
 Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.
 
@@ -196,7 +197,8 @@ Avec [`var()`](</fr/docs/Web/CSS/var()>) on peut définir plusieurs valeurs par
 
 Le premier argument passé à la fonction est le nom de la [propriété personnalisée](https://www.w3.org/TR/css-variables/#custom-property) qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la [propriété personnalisée](https://www.w3.org/TR/css-variables/#custom-property) en question est invalide.
 
-> **Note :** Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.
+> [!NOTE]
+> Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.
 
 ```css
 .deux {
@@ -215,11 +217,13 @@ Le premier argument passé à la fonction est le nom de la [propriété personna
 }
 ```
 
-> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.
+> [!NOTE]
+> La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.
 >
 > La syntaxe de la deuxième règle (sur `.trois`) permet d'utiliser une autre variable comme variable de secours et une autre valeur (`pink`) dans le cas où cette deuxième variable ne fonctionne pas.
 
-> **Note :** Des problèmes de performances ont pu être observés causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.
+> [!NOTE]
+> Des problèmes de performances ont pu être observés causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.
 
 ## Validité et valeurs
 
@@ -260,7 +264,8 @@ Comme on pourrait s'y attendre, la valeur applique la substitution avec `--text-
 
 {{EmbedLiveSample('Gestion_des_variables_invalides')}}
 
-> **Note :** La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles.
+> [!NOTE]
+> La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles.
 >
 > Si on avait directement écrit `color: 16px` (sans substitution), c'est alors la déclaration précédente qui aurait été utilisée.
 
@@ -283,7 +288,8 @@ element.style.setProperty("--ma-variable", varJS + 4);
 
 {{Compat}}
 
-> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. [bug Firefox 985838](https://bugzil.la/985838))
+> [!NOTE]
+> Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. [bug Firefox 985838](https://bugzil.la/985838))
 
 ## Voir aussi
 
diff --git a/files/fr/web/css/value_definition_syntax/index.md b/files/fr/web/css/value_definition_syntax/index.md
index b8c9501bf391c9..30d08e7d7aa9bf 100644
--- a/files/fr/web/css/value_definition_syntax/index.md
+++ b/files/fr/web/css/value_definition_syntax/index.md
@@ -103,7 +103,8 @@ Mais il ne correspondra pas à :
 - `bold` car les deux composants doivent apparaître.
 - `bold 1em bold` car les deux composants doivent apparaître exactement une fois.
 
-> **Note :** La juxtaposition est prioritaire par rapport à la double esperluette. `bold thin && <length>` est donc équivalent à `[ bold thin ] && <length>`. Il décrit `bold thin <length>` ou `<length> bold thin` mais pas `bold <length> thin`.
+> [!NOTE]
+> La juxtaposition est prioritaire par rapport à la double esperluette. `bold thin && <length>` est donc équivalent à `[ bold thin ] && <length>`. Il décrit `bold thin <length>` ou `<length> bold thin` mais pas `bold <length> thin`.
 
 ### Double barre
 
@@ -124,7 +125,8 @@ Mais il ne correspondra pas à :
 - `blue yellow` car le composant doit apparaître au plus une fois.
 - `bold` car le mot-clé n'est pas permis pour aucune valeur de l'entité.
 
-> **Note :** La double esperluette est prioritaire par rapport à la double barre. `bold || thin && <length>` est équivalent à `bold || [ thin && <length> ]` qui décrit `bold`, `thin <length>`, `bold thin <length>`, ou `thin <length> bold` mais pas `<length> bold thin` car bold, s'il est présent doit apparaître avant `thin && <length>`.
+> [!NOTE]
+> La double esperluette est prioritaire par rapport à la double barre. `bold || thin && <length>` est équivalent à `bold || [ thin && <length> ]` qui décrit `bold`, `thin <length>`, `bold thin <length>`, ou `thin <length> bold` mais pas `<length> bold thin` car bold, s'il est présent doit apparaître avant `thin && <length>`.
 
 ### La barre verticale
 
@@ -150,7 +152,8 @@ Mais il ne correspondra pas à :
 - `center 3%` car seul un seul des composants doit être présent.
 - `3em 4.5em` car un composant doit être présent au plus une seule fois.
 
-> **Note :** La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi `bold | thin || <length>` est équivalent à `bold | [ thin || <length> ]` qui décrit `bold`, `thin`, `<length>`, `<length> thin` ou `thin <length>` mais pas `bold <length>` car seule entité peut être présente.
+> [!NOTE]
+> La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi `bold | thin || <length>` est équivalent à `bold | [ thin || <length> ]` qui décrit `bold`, `thin`, `<length>`, `<length> thin` ou `thin <length>` mais pas `bold <length>` car seule entité peut être présente.
 
 ## Les multiplicateurs
 
diff --git a/files/fr/web/css/var/index.md b/files/fr/web/css/var/index.md
index d8a468c6fd7737..16a31a6caff327 100644
--- a/files/fr/web/css/var/index.md
+++ b/files/fr/web/css/var/index.md
@@ -19,7 +19,8 @@ Le premier argument de la fonction est le nom de la propriété qu'on veut subst
 
 {{csssyntax}}
 
-> **Note :** La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a `var(--toto, red, blue)`, la valeur de recours sera bien `red, blue` (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).
+> [!NOTE]
+> La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a `var(--toto, red, blue)`, la valeur de recours sera bien `red, blue` (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).
 
 ### Valeurs
 
diff --git a/files/fr/web/css/visibility/index.md b/files/fr/web/css/visibility/index.md
index 35bd4cc2defe24..e27c65fc6471f7 100644
--- a/files/fr/web/css/visibility/index.md
+++ b/files/fr/web/css/visibility/index.md
@@ -9,7 +9,8 @@ La propriété **`visibility`** peut être utilisée afin de cacher un élément
 
 {{EmbedInteractiveExample("pages/css/visibility.html")}}
 
-> **Note :** Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur `none`.
+> [!NOTE]
+> Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur `none`.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/webkit_extensions/index.md b/files/fr/web/css/webkit_extensions/index.md
index cdd752a58b811d..7495f48c5b30b3 100644
--- a/files/fr/web/css/webkit_extensions/index.md
+++ b/files/fr/web/css/webkit_extensions/index.md
@@ -9,7 +9,8 @@ Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prenn
 
 ## Propriétés spécifiques WebKit (ne pas utiliser sur le Web)
 
-> **Note :** Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.
+> [!NOTE]
+> Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.
 
 ### A
 
@@ -175,7 +176,8 @@ Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prenn
 
 ## Anciennes propriétés spécifiques désormais standardisées
 
-> **Note :** Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.
+> [!NOTE]
+> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.
 
 ### A
 
@@ -286,7 +288,8 @@ Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prenn
 
 Les propriétés suivantes peuvent être utilisées avec le préfixe `-webkit-` sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les [propriétés anciennement spécifiques et désormais standard](#spe_std) ci-avant).
 
-> **Note :** En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec `-webkit-`, Edge et Firefox redirigent de nombreuses propriétés préfixées avec `-webkit-` vers les équivalents sans préfixe ou avec `-moz-` ou `-ms-`.
+> [!NOTE]
+> En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec `-webkit-`, Edge et Firefox redirigent de nombreuses propriétés préfixées avec `-webkit-` vers les équivalents sans préfixe ou avec `-moz-` ou `-ms-`.
 
 ### A
 
diff --git a/files/fr/web/css/white-space/index.md b/files/fr/web/css/white-space/index.md
index 27d89be684c92e..7408b5a6602e06 100644
--- a/files/fr/web/css/white-space/index.md
+++ b/files/fr/web/css/white-space/index.md
@@ -9,7 +9,8 @@ La propriété **`white-space`** est utilisée pour décrire la façon dont les
 
 {{EmbedInteractiveExample("pages/css/white-space.html")}}
 
-> **Note :** Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.
+> [!NOTE]
+> Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/widows/index.md b/files/fr/web/css/widows/index.md
index 85e41a4fed5971..322b47ab5295e3 100644
--- a/files/fr/web/css/widows/index.md
+++ b/files/fr/web/css/widows/index.md
@@ -19,7 +19,8 @@ widows: initial;
 widows: unset;
 ```
 
-> **Note :** En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).
+> [!NOTE]
+> En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md
index 6911dcd73597b7..11ac2ed6ea606d 100644
--- a/files/fr/web/css/width/index.md
+++ b/files/fr/web/css/width/index.md
@@ -9,7 +9,8 @@ La propriété **`width`** permet de définir la largeur de la [boîte du conten
 
 {{EmbedInteractiveExample("pages/css/width.html")}}
 
-> **Note :** Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.
+> [!NOTE]
+> Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.
 
 ## Syntaxe
 
diff --git a/files/fr/web/css/word-break/index.md b/files/fr/web/css/word-break/index.md
index 2c394d733e3dc0..5c0291da7b2df1 100644
--- a/files/fr/web/css/word-break/index.md
+++ b/files/fr/web/css/word-break/index.md
@@ -37,7 +37,8 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci
 - `break-word`{{deprecated_inline}}
   - : Aura le même effet que `word-break: normal` et que `overflow-wrap: anywhere` quelle que soit la valeur de la propriété [`overflow-wrap`](/fr/docs/Web/CSS/overflow-wrap).
 
-> **Note :** Contrairement à `word-break: break-word` et à `overflow-wrap: break-word` (cf. [`overflow-wrap`](/fr/docs/Web/CSS/overflow-wrap)), `word-break: break-all` créera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).
+> [!NOTE]
+> Contrairement à `word-break: break-word` et à `overflow-wrap: break-word` (cf. [`overflow-wrap`](/fr/docs/Web/CSS/overflow-wrap)), `word-break: break-all` créera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).
 
 ## Définition formelle
 
diff --git a/files/fr/web/events/index.md b/files/fr/web/events/index.md
index 893d1740d1a557..a7c2a9f9484e2b 100644
--- a/files/fr/web/events/index.md
+++ b/files/fr/web/events/index.md
@@ -9,7 +9,8 @@ Chaque événement est représenté par un objet implémentant l'interface [`Eve
 
 Cette rubrique fournit un index des principales _sortes_ d'événements qui peuvent vous intéresser (animation, presse-papiers, workers, etc.) ainsi que les principales classes qui implémentent ces sortes d'événements. À la fin se trouve une liste exhaustive de tous les événements documentés.
 
-> **Note :** Cette page répertorie les événements les plus courants que vous rencontrerez sur le Web. Si vous recherchez un événement qui n'est pas répertorié ici, essayez de rechercher son nom, son domaine ou les spécifications associées sur le reste du MDN.
+> [!NOTE]
+> Cette page répertorie les événements les plus courants que vous rencontrerez sur le Web. Si vous recherchez un événement qui n'est pas répertorié ici, essayez de rechercher son nom, son domaine ou les spécifications associées sur le reste du MDN.
 
 ## Index des événements
 
diff --git a/files/fr/web/exslt/exsl/object-type/index.md b/files/fr/web/exslt/exsl/object-type/index.md
index 107cadf7385fbc..7887e75a04836c 100644
--- a/files/fr/web/exslt/exsl/object-type/index.md
+++ b/files/fr/web/exslt/exsl/object-type/index.md
@@ -7,7 +7,8 @@ slug: Web/EXSLT/exsl/object-type
 
 `exsl:object-type()` renvoie une chaîne de caractères indiquant le type de l'objet indiqué en paramètre.
 
-> **Note :** La plupart des types d'objet [XSLT](/fr/docs/Web/XSLT) peuvent être convertis implicitement vers les autres. Toutefois, certaines conversions implicites sont sources d'erreur, par exemple traiter quelque chose qui n'est pas un `node-set` comme tel. Cette fonction permet de fournir une certaine flexibilité dans les valeurs de paramètres.
+> [!NOTE]
+> La plupart des types d'objet [XSLT](/fr/docs/Web/XSLT) peuvent être convertis implicitement vers les autres. Toutefois, certaines conversions implicites sont sources d'erreur, par exemple traiter quelque chose qui n'est pas un `node-set` comme tel. Cette fonction permet de fournir une certaine flexibilité dans les valeurs de paramètres.
 
 ## Syntaxe
 
diff --git a/files/fr/web/exslt/set/leading/index.md b/files/fr/web/exslt/set/leading/index.md
index 84935b0d3a15ce..5a89942e5d7bbf 100644
--- a/files/fr/web/exslt/set/leading/index.md
+++ b/files/fr/web/exslt/set/leading/index.md
@@ -24,7 +24,8 @@ set:leading(nodeSet1, nodeSet2)
 
 Un ensemble de nœuds qui contient les nœuds de `nodeSet1` dont les valeurs précèdent le premier nœud de `nodeSet2`.
 
-> **Note :** Si le premier nœud de `nodeSet2` n'est pas contenu dans `nodeSet1`, un ensemble vide sera renvoyé. Si `nodeSet2` est vide, le résultat sera `nodeSet1`.
+> [!NOTE]
+> Si le premier nœud de `nodeSet2` n'est pas contenu dans `nodeSet1`, un ensemble vide sera renvoyé. Si `nodeSet2` est vide, le résultat sera `nodeSet1`.
 
 ## Spécifications
 
diff --git a/files/fr/web/exslt/set/trailing/index.md b/files/fr/web/exslt/set/trailing/index.md
index a99c46f5dca45d..69cac18d841138 100644
--- a/files/fr/web/exslt/set/trailing/index.md
+++ b/files/fr/web/exslt/set/trailing/index.md
@@ -24,7 +24,8 @@ set:trailing(nodeSet1, nodeSet2)
 
 Un ensemble de nœuds qui contient les nœuds de `nodeSet1` dont les valeurs suivent le premier nœud de `nodeSet2`.
 
-> **Note :** Si le premier nœud de `nodeSet2` n'est pas contenu dans `nodeSet1`, un ensemble vide sera renvoyé. Si `nodeSet2` est vide, le résultat sera `nodeSet1`.
+> [!NOTE]
+> Si le premier nœud de `nodeSet2` n'est pas contenu dans `nodeSet1`, un ensemble vide sera renvoyé. Si `nodeSet2` est vide, le résultat sera `nodeSet1`.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/attributes/accept/index.md b/files/fr/web/html/attributes/accept/index.md
index dd704c4ef98f95..bb06fe8d8217fa 100644
--- a/files/fr/web/html/attributes/accept/index.md
+++ b/files/fr/web/html/attributes/accept/index.md
@@ -95,7 +95,8 @@ Cela produit le résultat suivant :
 
 {{EmbedLiveSample('Utilisation_des_champs_pour_saisir_des_fichiers', 650, 100)}}
 
-> **Note :** Vous pouvez trouver cet exemple sur GitHub également - voir le [code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html), et aussi [le fonctionnement en direct](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
+> [!NOTE]
+> Vous pouvez trouver cet exemple sur GitHub également - voir le [code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html), et aussi [le fonctionnement en direct](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
 
 Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.
 
diff --git a/files/fr/web/html/attributes/autocomplete/index.md b/files/fr/web/html/attributes/autocomplete/index.md
index 31f349764cf008..04b4c1278a345a 100644
--- a/files/fr/web/html/attributes/autocomplete/index.md
+++ b/files/fr/web/html/attributes/autocomplete/index.md
@@ -13,7 +13,8 @@ Si les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), [`<select>`](/fr
 
 Pour plus d'informations, voir la documentation de l'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/Form#attr-autocomplete) pour l'élément [`<form>`](/fr/docs/Web/HTML/Element/Form).
 
-> **Note :** Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments `<input>`/`<select>`/`<textarea>`:
+> [!NOTE]
+> Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments `<input>`/`<select>`/`<textarea>`:
 >
 > 1. Que ceux-ci aient un attribut `name` et/ou `id`
 > 2. Que ceux-ci descendent d'un élément `<form>`
@@ -25,7 +26,8 @@ Pour plus d'informations, voir la documentation de l'attribut [`autocomplete`](/
 
   - : Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement.
 
-    > **Note :** Pour la plupart des navigateurs modernes, utiliser `autocomplete="off"` n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir [l'article sur l'attribut `autocomplete` et les champs des formulaires de connexion](/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).
+    > [!NOTE]
+    > Pour la plupart des navigateurs modernes, utiliser `autocomplete="off"` n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir [l'article sur l'attribut `autocomplete` et les champs des formulaires de connexion](/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).
 
 - `on`
   - : Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
@@ -138,7 +140,8 @@ Pour plus d'informations, voir la documentation de l'attribut [`autocomplete`](/
 
 Voir [la spécification WHATWG](https://html.spec.whatwg.org/multipage/forms.html#autofill) pour plus de détails.
 
-> **Note :** À la différence des autres navigateurs, pour Firefox, l'attribut `autocomplete` contrôlera également si [l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) pour un champ `<input>`. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut `autocomplete` avec la valeur `off`, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut `autocomplete` ne devrait pas s'appliquer à l'élément `<input>` d'après son type. Voir [bug 654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
+> [!NOTE]
+> À la différence des autres navigateurs, pour Firefox, l'attribut `autocomplete` contrôlera également si [l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) pour un champ `<input>`. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut `autocomplete` avec la valeur `off`, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut `autocomplete` ne devrait pas s'appliquer à l'élément `<input>` d'après son type. Voir [bug 654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
 
 ## Exemples
 
diff --git a/files/fr/web/html/attributes/capture/index.md b/files/fr/web/html/attributes/capture/index.md
index 8e5b0114bc050c..e71ca441dba7b5 100644
--- a/files/fr/web/html/attributes/capture/index.md
+++ b/files/fr/web/html/attributes/capture/index.md
@@ -14,7 +14,8 @@ L'attribut `capture` prend pour valeur une chaîne de caractères qui spécifie
 | `user`        | La caméra et/ou le microphone faisant face à l'utilisateur devraient être utilisés. |
 | `environment` | La caméra et/ou le microphone orientés vers l'extérieur devraient être utilisés.    |
 
-> **Note :** Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.
+> [!NOTE]
+> Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.
 
 ## Exemples
 
diff --git a/files/fr/web/html/attributes/crossorigin/index.md b/files/fr/web/html/attributes/crossorigin/index.md
index 65e361380d4219..274a88e3663d6c 100644
--- a/files/fr/web/html/attributes/crossorigin/index.md
+++ b/files/fr/web/html/attributes/crossorigin/index.md
@@ -21,7 +21,8 @@ Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout u
 
 Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé `anonymous`.
 
-> **Note :** Avant Firefox 83, l'attribut `crossorigin` n'était pas pris en charge pour `rel="icon"` ; il existe également [un bug sur Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645).
+> [!NOTE]
+> Avant Firefox 83, l'attribut `crossorigin` n'était pas pris en charge pour `rel="icon"` ; il existe également [un bug sur Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645).
 
 ## Exemples
 
diff --git a/files/fr/web/html/attributes/disabled/index.md b/files/fr/web/html/attributes/disabled/index.md
index d7d9d1fba5fff9..a490c18e2a4719 100644
--- a/files/fr/web/html/attributes/disabled/index.md
+++ b/files/fr/web/html/attributes/disabled/index.md
@@ -11,7 +11,8 @@ L'attribut `disabled` est utilisé par [`<button>`](/fr/docs/Web/HTML/Element/Bu
 
 Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple `fieldset` ; s'il n'y a pas d'élément contenant avec l'attribut `disabled` défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un [`<optgroup>`](/fr/docs/Web/HTML/Element/Optgroup), le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.
 
-> **Note :** Si un [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset) est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende ([`<legend>`](/fr/docs/Web/HTML/Element/Legend)).
+> [!NOTE]
+> Si un [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset) est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende ([`<legend>`](/fr/docs/Web/HTML/Element/Legend)).
 
 Lorsqu'un élément de support a l'attribut `disabled` est appliqué, la pseudo-classe [`:disabled`](/fr/docs/Web/CSS/:disabled) s'y applique également. Inversement, les éléments qui prennent en charge l'attribut `disabled` mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe [`:enabled`](/fr/docs/Web/CSS/:enabled).
 
@@ -25,7 +26,8 @@ La différence entre `disabled` et [`readonly`](/fr/docs/Web/HTML/Attributes/rea
 
 Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, [`required`](/fr/docs/Web/HTML/Attributes/required) n'a aucun effet sur les entrées dont l'attribut `disabled` est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que [`pattern`](/fr/docs/Web/HTML/Attributes/pattern), n'ont aucun effet, tant que le contrôle n'est pas activé.
 
-> **Note :** L'attribut `required` n'est pas autorisé sur les entrées pour lesquelles l'attribut `disabled` est spécifié.
+> [!NOTE]
+> L'attribut `required` n'est pas autorisé sur les entrées pour lesquelles l'attribut `disabled` est spécifié.
 
 ### Utilisation
 
diff --git a/files/fr/web/html/attributes/max/index.md b/files/fr/web/html/attributes/max/index.md
index c7c9e720142f64..af22b4489f0008 100644
--- a/files/fr/web/html/attributes/max/index.md
+++ b/files/fr/web/html/attributes/max/index.md
@@ -111,7 +111,8 @@ Si la valeur dépasse la valeur maximale autorisée, l'attribut JavaScript [`val
   </tbody>
 </table>
 
-> **Note :** Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
+> [!NOTE]
+> Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
 
 Voir la [validation côté client](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) et [`rangeOverflow`](/fr/docs/Web/API/ValidityState/rangeOverflow) pour plus d'informations.
 
diff --git a/files/fr/web/html/attributes/min/index.md b/files/fr/web/html/attributes/min/index.md
index 66c486ee6f00e8..56f468c2c27836 100644
--- a/files/fr/web/html/attributes/min/index.md
+++ b/files/fr/web/html/attributes/min/index.md
@@ -109,7 +109,8 @@ Valable pour les types de saisie numérique, y compris les types [`date`](/fr/do
   </tbody>
 </table>
 
-> **Note :** Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
+> [!NOTE]
+> Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
 
 Voir la [validation côté client](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) et [`rangeUnderflow`](/fr/docs/Web/API/ValidityState/rangeUnderflow) pour plus d'informations.
 
diff --git a/files/fr/web/html/attributes/pattern/index.md b/files/fr/web/html/attributes/pattern/index.md
index 0b707d36322da3..29bcab73cc70a8 100644
--- a/files/fr/web/html/attributes/pattern/index.md
+++ b/files/fr/web/html/attributes/pattern/index.md
@@ -13,7 +13,8 @@ La valeur de cet attribut doit être une expression rationnelle JavaScript valid
 
 Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.
 
-> **Note :** On pourra utiliser l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.
+> [!NOTE]
+> On pourra utiliser l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.
 
 Certains types d'`<input>` qui prennent en charge l'attribut `pattern` (notamment [`email`](/fr/docs/Web/HTML/Element/Input/email) et [`url`](/fr/docs/Web/HTML/Element/Input/url)) ont des contraintes particulières qui doivent également être respectées. Si l'attribut `pattern` n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule [`typeMismatch`](/fr/docs/Web/API/ValidityState/typeMismatch) vaudra `true`.
 
diff --git a/files/fr/web/html/attributes/readonly/index.md b/files/fr/web/html/attributes/readonly/index.md
index c0234af1990576..eb050ad631146f 100644
--- a/files/fr/web/html/attributes/readonly/index.md
+++ b/files/fr/web/html/attributes/readonly/index.md
@@ -11,7 +11,8 @@ L'attribut `readonly` est pris en charge par les types [`text`](/fr/docs/Web/HTM
 
 L'attribut n'est pas pris en charge ou pertinent pour [`<select>`](/fr/docs/Web/HTML/Element/select) ou les types d'entrée qui ne sont déjà pas mutables, comme [`checkbox`](/fr/docs/Web/HTML/Element/Input/checkbox) et [`radio`](/fr/docs/Web/HTML/Element/Input/radio) ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée [`file`](/fr/docs/Web/HTML/Element/Input/file). [`range`](/fr/docs/Web/HTML/Element/Input/range) et [`color`](/fr/docs/Web/HTML/Element/Input/color), car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden), car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris `image`.
 
-> **Note :** Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut `readonly` ne s'applique pas.
+> [!NOTE]
+> Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut `readonly` ne s'applique pas.
 
 Lorsqu'une entrée possède l'attribut `readonly`, la pseudo-classe [`:read-only`](/fr/docs/Web/CSS/:read-only) s'y applique également. Inversement, les entrées qui prennent en charge l'attribut `readonly` mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe [`:read-write`](/fr/docs/Web/CSS/:read-write).
 
@@ -23,7 +24,8 @@ Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une int
 
 Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.
 
-> **Note :** L'attribut `required` n'est pas autorisé sur les entrées pour lesquelles l'attribut `readonly` est spécifié.
+> [!NOTE]
+> L'attribut `required` n'est pas autorisé sur les entrées pour lesquelles l'attribut `readonly` est spécifié.
 
 ### Validation des contraintes
 
diff --git a/files/fr/web/html/attributes/rel/index.md b/files/fr/web/html/attributes/rel/index.md
index 2b2d138ea93e2b..d1dd5c2f154060 100644
--- a/files/fr/web/html/attributes/rel/index.md
+++ b/files/fr/web/html/attributes/rel/index.md
@@ -49,7 +49,8 @@ S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leur attribut [
 
 **Note :** L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut [`sizes`](sizes), comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard [`apple-touch-icon`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) et [`apple-touch-startup-image`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6) respectivement.
 
-> **Note :** Le type de lien `shortcut` est souvent vu avant `icon`, mais ce type de lien est non conforme, ignoré et **les auteurs web ne doivent plus l'utiliser**.
+> [!NOTE]
+> Le type de lien `shortcut` est souvent vu avant `icon`, mais ce type de lien est non conforme, ignoré et **les auteurs web ne doivent plus l'utiliser**.
 
 - `alternate`
 
@@ -85,7 +86,8 @@ S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leur attribut [
       <link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français">
       ```
 
-    > **Note :** L'attribut obsolète `rev="made"` est traité comme `rel="alternate"`.
+    > [!NOTE]
+    > L'attribut obsolète `rev="made"` est traité comme `rel="alternate"`.
 
 - `author`
   - : Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), le mot-clé `author` crée un lien hypertexte. Avec [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), il indique que le document lié (ou `mailto:`) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément [`<article>`](/fr/docs/Web/HTML/Element/article) s'il en existe un, sinon le document entier. Pour [`<link>`](/fr/docs/Web/HTML/Element/link), il représente l'auteur du document entier.
@@ -111,7 +113,8 @@ S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leur attribut [
 
     S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leurs attributs [`media`](media), [`type`](type), et [`sizes`](sizes) pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.
 
-    > **Note :** Avant Firefox 83, l'attribut [`crossorigin`](/fr/docs/Web/HTML/Attributes/crossorigin) n'était pas pris en charge pour `rel="icon"` ; il existe également [un problème pour Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645).
+    > [!NOTE]
+    > Avant Firefox 83, l'attribut [`crossorigin`](/fr/docs/Web/HTML/Attributes/crossorigin) n'était pas pris en charge pour `rel="icon"` ; il existe également [un problème pour Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645).
     >
     > L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut [`sizes`](sizes), comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard [`apple-touch-icon`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) et [`apple-touch-startup-image`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6).
     >
@@ -125,7 +128,8 @@ S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leur attribut [
     <link rel="license" href="#license" />
     ```
 
-    > **Note :** Bien que reconnu, le synonyme `copyright` est incorrect et doit être évité.
+    > [!NOTE]
+    > Bien que reconnu, le synonyme `copyright` est incorrect et doit être évité.
 
 - `manifest`
   - : [Manifeste de l'application Web](/fr/docs/Web/Manifest). Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».
@@ -159,7 +163,8 @@ S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leur attribut [
 
   - : Similaire au mot-clé [next](#next), pertinent pour les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), les valeurs `prev` indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.
 
-    > **Note :** Le synonyme `previous` est incorrect et ne doit pas être utilisé.
+    > [!NOTE]
+    > Le synonyme `previous` est incorrect et ne doit pas être utilisé.
 
 - `search`
 
diff --git a/files/fr/web/html/attributes/rel/noopener/index.md b/files/fr/web/html/attributes/rel/noopener/index.md
index 582a886756e9af..5d09e4d2251d58 100644
--- a/files/fr/web/html/attributes/rel/noopener/index.md
+++ b/files/fr/web/html/attributes/rel/noopener/index.md
@@ -11,7 +11,8 @@ Ceci est tout spécialement utile lors de l'ouverture de liens non vérifiés/fi
 
 Veuillez noter que lorsque `noopener` est utilisé, les noms de cibles non vides et différents de `_top`, `_self` et `_parent` sont tous traités en tant que `_blank` pour déterminer si le lien doit s'ouvrir ou non dans un nouvel onglet/fenêtre.
 
-> **Note :** l'utilisation de `target="_blank"` sur des éléments `<a>` fournit désormais implicitement le même comportement pour l'attribut `rel` que si l'on avait utilisé `rel="noopener"`, c'est à dire l'absence de mise en place de `window.opener`. Voir la [compatibilité navigateur](/fr/docs/Web/HTML/Element/a#browser_compatibility) pour plus d'informations sur l'implémentation actuelle dans les navigateurs.
+> [!NOTE]
+> L'utilisation de `target="_blank"` sur des éléments `<a>` fournit désormais implicitement le même comportement pour l'attribut `rel` que si l'on avait utilisé `rel="noopener"`, c'est à dire l'absence de mise en place de `window.opener`. Voir la [compatibilité navigateur](/fr/docs/Web/HTML/Element/a#browser_compatibility) pour plus d'informations sur l'implémentation actuelle dans les navigateurs.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/attributes/rel/preload/index.md b/files/fr/web/html/attributes/rel/preload/index.md
index c63e468bbf909b..70bb186edfc70e 100644
--- a/files/fr/web/html/attributes/rel/preload/index.md
+++ b/files/fr/web/html/attributes/rel/preload/index.md
@@ -80,9 +80,11 @@ De nombreux différents types de contenu peuvent être préchargés. Les valeurs
 
 - `video`&nbsp;: un fichier vidéo, typiquement intégré avec l'élément {{htmlelement("video")}}.
 
-> **Note :** le préchargement de l'élément `video` est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs.
+> [!NOTE]
+> Le préchargement de l'élément `video` est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs.
 
-> **Note :** pour davantage de détails sur ces valeurs et sur la façon dont la spécification <i lang="en">Preload</i> prévoit de les traiter, consultez [<i lang="en">link element extensions</i> (en anglais)](https://w3c.github.io/preload/#link-element-extensions). Notez également que la liste complète des valeurs acceptées par l'attribut `as` est déterminé par la spécification <i lang="en">Fetch</i> — voir la spécification [<i lang="en">request destinations</i> (en anglais)](https://fetch.spec.whatwg.org/#concept-request-destination).
+> [!NOTE]
+> Pour davantage de détails sur ces valeurs et sur la façon dont la spécification <i lang="en">Preload</i> prévoit de les traiter, consultez [<i lang="en">link element extensions</i> (en anglais)](https://w3c.github.io/preload/#link-element-extensions). Notez également que la liste complète des valeurs acceptées par l'attribut `as` est déterminé par la spécification <i lang="en">Fetch</i> — voir la spécification [<i lang="en">request destinations</i> (en anglais)](https://fetch.spec.whatwg.org/#concept-request-destination).
 
 ## Inclure un type MIME
 
diff --git a/files/fr/web/html/attributes/required/index.md b/files/fr/web/html/attributes/required/index.md
index b65c73d5038995..d67c09137a5a96 100644
--- a/files/fr/web/html/attributes/required/index.md
+++ b/files/fr/web/html/attributes/required/index.md
@@ -15,7 +15,8 @@ Dans le cas d'un groupe de boutons [`radio`](/fr/docs/Web/HTML/Element/Input/rad
 
 Dans le cas d'un même groupe nommé de types d'entrée [`checkbox`](/fr/docs/Web/HTML/Element/Input/checkbox), seules les cases à cocher avec l'attribut `required` sont obligatoires.
 
-> **Note :** Le réglage `aria-required="true"` indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.
+> [!NOTE]
+> Le réglage `aria-required="true"` indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.
 
 ## Interactions entre attributs
 
diff --git a/files/fr/web/html/attributes/step/index.md b/files/fr/web/html/attributes/step/index.md
index 03b26be7f672ac..7da7264929b0fd 100644
--- a/files/fr/web/html/attributes/step/index.md
+++ b/files/fr/web/html/attributes/step/index.md
@@ -131,7 +131,8 @@ Les valeurs valides comprennent `1,2`, `3,2`, `5,2`, `7,2`, `9,2`, `11,2`, et ai
 
 {{EmbedLiveSample("L'impact_de_min_sur_step","",50)}}
 
-> **Note :** Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
+> [!NOTE]
+> Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
 
 Voir [Validation côté client](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) et [`stepMismatch`](/fr/docs/Web/API/ValidityState/stepMismatch) pour plus d'informations.
 
diff --git a/files/fr/web/html/constraint_validation/index.md b/files/fr/web/html/constraint_validation/index.md
index dc90625e7b904e..2dda57f0a63d75 100644
--- a/files/fr/web/html/constraint_validation/index.md
+++ b/files/fr/web/html/constraint_validation/index.md
@@ -11,7 +11,8 @@ La création de formulaires web a toujours été une tâche complexe. Bien que l
 
 Pour une introduction à ces concepts avec des exemples, voir [le tutoriel sur la validation des formulaires](/fr/docs/Learn/Forms/Form_validation).
 
-> **Note :** La validation des contraintes HTML ne signifie pas qu'il n'est plus nécessaire de vérifier _côté serveur_. Même si cela réduit les risques d'envoi de formulaires invalides, des acteurs malveillants pourraient passer outre ces vérifications côté client. Aussi, assurez-vous de toujours valider les contraintes de saisie côté serveur, en étant cohérent avec ce qui est fait côté client.
+> [!NOTE]
+> La validation des contraintes HTML ne signifie pas qu'il n'est plus nécessaire de vérifier _côté serveur_. Même si cela réduit les risques d'envoi de formulaires invalides, des acteurs malveillants pourraient passer outre ces vérifications côté client. Aussi, assurez-vous de toujours valider les contraintes de saisie côté serveur, en étant cohérent avec ce qui est fait côté client.
 
 ## Contraintes intrinsèques et contraintes de base
 
@@ -190,7 +191,7 @@ En complément de la validation native effectuée par le navigateur, on peut man
 
 On qualifie parfois un appel à `checkValidity()` de validation _statique_ des contraintes, en opposition à `reportValidity()` ou à l'envoi du formulaire qui constituent une validation _interactive_.
 
-> **Note :**
+> [!NOTE]
 >
 > - Si l'attribut [`novalidate`](/fr/docs/Web/HTML/Element/form#novalidate) est placé sur l'élément [`<form>`](/fr/docs/Web/HTML/Element/form), la validation interactive des contraintes n'a pas lieu.
 > - Appeler la méthode `submit()` d'un objet [`HTMLFormElement`](/fr/docs/Web/API/HTMLFormElement) ne déclenchera pas de validation des contraintes. Autrement dit, cette méthode envoie les données du formulaire au serveur, même si elles ne respectent pas les contraintes. Pour passer par la validation, on pourra appeler la méthode `click()` du bouton d'envoi.
@@ -205,7 +206,8 @@ Le principe consiste à déclencher une fonction JavaScript lorsqu'un évènemen
 
 Le format utilisé pour les codes postaux varie d'un pays à l'autre. Certains pays autorisent un préfixe avec le code du pays (comme `D-` en Allemagne, `F-` en France, etc.), d'autres ont des codes postaux avec un nombre précis de chiffres et d'autres encore, comme au Royaume-Uni, ont des structures plus complexes, où on peut avoir des lettres à certaines positions.
 
-> **Note :** Ce qui suit ne constitue pas une bibliothèque exhaustive de validation des codes postaux, il ne s'agit que d'un exemple.
+> [!NOTE]
+> Ce qui suit ne constitue pas une bibliothèque exhaustive de validation des codes postaux, il ne s'agit que d'un exemple.
 
 Pour cet exemple, nous allons ajouter un script de vérification pour ce formulaire&nbsp;:
 
diff --git a/files/fr/web/html/content_categories/index.md b/files/fr/web/html/content_categories/index.md
index 9b0d865774697e..f335fca2b53c50 100644
--- a/files/fr/web/html/content_categories/index.md
+++ b/files/fr/web/html/content_categories/index.md
@@ -13,7 +13,8 @@ Il y a trois types différents de catégories de contenu :
 - Les catégories de contenu relatives aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ;
 - Les catégories de contenu spécifiques qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier
 
-> **Note :** un discours plus détaillé sur ces catégories de contenu et de leurs fonctionnalités comparatives dépasse le cadre de cet article ; pour en savoir plus, vous pouvez lire les [parties correspondantes de la spécification HTML](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content) (en).
+> [!NOTE]
+> Un discours plus détaillé sur ces catégories de contenu et de leurs fonctionnalités comparatives dépasse le cadre de cet article ; pour en savoir plus, vous pouvez lire les [parties correspondantes de la spécification HTML](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content) (en).
 
 ![](content_categories_venn.png)
 
@@ -42,7 +43,8 @@ Les éléments appartenant à cette catégorie sont ceux créant une nouvelle [s
 
 Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}.
 
-> **Note :** Il ne faut pas confondre ce modèle de contenu avec la catégorie de [racine de sectionnement](/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement) qui isole un contenu par rapport à la structure (ou plan) principale.
+> [!NOTE]
+> Il ne faut pas confondre ce modèle de contenu avec la catégorie de [racine de sectionnement](/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement) qui isole un contenu par rapport à la structure (ou plan) principale.
 
 ### Contenu de titre
 
@@ -50,7 +52,8 @@ Le contenu de titre définit le titre d'une section, qu'elle soit marquée par u
 
 Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} et {{HTMLElement("hgroup")}}.
 
-> **Note :** Bien qu'il soit probable qu'un élément {{HTMLElement("header")}} comporte du contenu de titre, il n'est pas lui-même un contenu de titre.
+> [!NOTE]
+> Bien qu'il soit probable qu'un élément {{HTMLElement("header")}} comporte du contenu de titre, il n'est pas lui-même un contenu de titre.
 
 > **Note :** {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.
 
diff --git a/files/fr/web/html/element/a/index.md b/files/fr/web/html/element/a/index.md
index debce68d3e4227..5edc36e30fa793 100644
--- a/files/fr/web/html/element/a/index.md
+++ b/files/fr/web/html/element/a/index.md
@@ -23,7 +23,7 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
     La définition d'une valeur la suggère comme nom de fichier. Les caractères `/` et `\` sont convertis en caractères de soulignement (`_`). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - `download` ne fonctionne que pour [les URLs de même origine](/fr/docs/Web/Security/Same-origin_policy), ou les schémas `blob:` et `data:`.
     > - Si l'en-tête `Content-Disposition` comporte des informations différentes de celles de l'attribut `download`, le comportement résultant peut différer :
@@ -58,7 +58,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
     - `_parent` : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme `_self`.
     - `_top` : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme `_self`.
 
-    > **Note :** Définir `target="_blank"` sur les éléments `<a>` fournit implicitement le même comportement `rel` que définir [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`. Voir la [compatibilité des navigateurs](#browser_compatibility) pour le support.
+    > [!NOTE]
+    > Définir `target="_blank"` sur les éléments `<a>` fournit implicitement le même comportement `rel` que définir [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`. Voir la [compatibilité des navigateurs](#browser_compatibility) pour le support.
 
 - **`type`**
   - : Donne des indications sur le format de l'URL liée avec un [Type MIME](/fr/docs/Glossary/MIME_type). Aucune fonctionnalité intégrée.
@@ -69,7 +70,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
   - : Fait allusion aux [encodages des caractères](/fr/docs/Glossary/character_encoding) de l'URL liée.
 
-    > **Note :** Cet attribut est déprécié et **ne doit pas être utilisé par les auteurs**. Utilisez l'en-tête HTTP [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) sur l'URL liée.
+    > [!NOTE]
+    > Cet attribut est déprécié et **ne doit pas être utilisé par les auteurs**. Utilisez l'en-tête HTTP [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) sur l'URL liée.
 
 - **`coords`** {{Deprecated_Inline}}
   - : Utilisé avec [l'attribut `shape`](#shape). Une liste de coordonnées séparées par des virgules.
@@ -77,7 +79,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
   - : Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, `id` et `name` pouvaient tous deux être utilisés sur `<a>`, pour autant qu'ils aient des valeurs identiques.
 
-    > **Note :** Utilisez l'attribut universel [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) à la place.
+    > [!NOTE]
+    > Utilisez l'attribut universel [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) à la place.
 
 - **`rev`** {{Deprecated_Inline}}
   - : Spécifiait un lien inverse ; l'opposé de [l'attribut `rel`](#rel). Déprécié pour avoir été très confus.
@@ -85,7 +88,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
   - : La forme de la région de l'hyperlien dans une carte d'image.
 
-    > **Note :** Utilisez plutôt l'élément [`<area>`](/fr/docs/Web/HTML/Element/area) pour les cartes d'images.
+    > [!NOTE]
+    > Utilisez plutôt l'élément [`<area>`](/fr/docs/Web/HTML/Element/area) pour les cartes d'images.
 
 ## Propriétés
 
@@ -247,7 +251,8 @@ a {
 
 {{EmbedLiveSample('')}}
 
-> **Note :** Vous pouvez utiliser `href="#top"` ou le fragment vide (`href="#"`) pour créer un lien vers le haut de la page actuelle, [comme défini dans la spécification HTML](https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier).
+> [!NOTE]
+> Vous pouvez utiliser `href="#top"` ou le fragment vide (`href="#"`) pour créer un lien vers le haut de la page actuelle, [comme défini dans la spécification HTML](https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier).
 
 ### Créer un lien avec une adresse électronique
 
diff --git a/files/fr/web/html/element/acronym/index.md b/files/fr/web/html/element/acronym/index.md
index b8ad58ddadec27..9c958ad7bc8a40 100644
--- a/files/fr/web/html/element/acronym/index.md
+++ b/files/fr/web/html/element/acronym/index.md
@@ -5,11 +5,13 @@ slug: Web/HTML/Element/acronym
 
 {{HTMLSidebar}}
 
-> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
+> [!WARNING]
+> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
 L'élément HTML **`<acronym>`**, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.
 
-> **Note :** Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. **Les développeuses et développeurs web devraient utiliser l'élément [`<abbr>`](/fr/docs/Web/HTML/Element/abbr) à la place**.
+> [!NOTE]
+> Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. **Les développeuses et développeurs web devraient utiliser l'élément [`<abbr>`](/fr/docs/Web/HTML/Element/abbr) à la place**.
 
 ## Attributs
 
@@ -19,7 +21,8 @@ Cet élément n'a pas d'autres attributs que les [attributs universels](/fr/docs
 
 Cet élément implémente l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement).
 
-> **Note :** Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
+> [!NOTE]
+> Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
 
 ## Exemples
 
diff --git a/files/fr/web/html/element/area/index.md b/files/fr/web/html/element/area/index.md
index aeb1bee5829681..392065ed648be5 100644
--- a/files/fr/web/html/element/area/index.md
+++ b/files/fr/web/html/element/area/index.md
@@ -133,7 +133,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
     Cet attribut doit uniquement être utilisé si l'attribut [`href`](#attr-href) est présent.
 
-    > **Note :** La définition de `target="_blank"` sur les éléments `<area>` fournit implicitement le même comportement `rel` que la définition de [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`. Voir la [compatibilité des navigateurs](#browser_compatibility) pour les informations sur son support.
+    > [!NOTE]
+    > La définition de `target="_blank"` sur les éléments `<area>` fournit implicitement le même comportement `rel` que la définition de [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`. Voir la [compatibilité des navigateurs](#browser_compatibility) pour les informations sur son support.
 
 ### Attributs dépréciés ou obsolètes
 
@@ -143,7 +144,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
   - : Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si **href** ne l'est pas et _vice versa_.
 
-    > **Note :** Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut `href` suffit.
+    > [!NOTE]
+    > Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut `href` suffit.
 
 - **`tabindex`** {{deprecated_inline}}
   - : Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.
diff --git a/files/fr/web/html/element/audio/index.md b/files/fr/web/html/element/audio/index.md
index fdafb501e848dc..cc225a01552ac6 100644
--- a/files/fr/web/html/element/audio/index.md
+++ b/files/fr/web/html/element/audio/index.md
@@ -21,7 +21,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
   - : Un attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio.
 
-    > **Note :** Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre [guide sur la lecture automatique](/fr/docs/Web/Media/Autoplay_guide) pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction _autoplay_.
+    > [!NOTE]
+    > Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre [guide sur la lecture automatique](/fr/docs/Web/Media/Autoplay_guide) pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction _autoplay_.
 
 - **`controls`**
   - : Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.
@@ -40,7 +41,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
   - : Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont connectés à l'aide de câbles (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.). Voir [cette proposition de spécification](https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute) pour plus d'informations.
 
-    > **Note :** Dans Safari, vous pouvez utiliser [`x-webkit-airplay="deny"`](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html) comme solution de repli.
+    > [!NOTE]
+    > Dans Safari, vous pouvez utiliser [`x-webkit-airplay="deny"`](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html) comme solution de repli.
 
 - **`loop`**
   - : Un attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.
@@ -57,7 +59,7 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attribu
 
     La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur `metadata`.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - L'attribut `autoplay` a la priorité sur `preload`. Si `autoplay` est spécifié, le navigateur devrait évidemment commencer à télécharger l'audio pour le lire.
     > - La spécification n'oblige pas le navigateur à suivre la valeur de cet attribut ; il s'agit d'une simple indication.
@@ -139,7 +141,8 @@ Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprim
 - [`HTMLMediaElement.textTracks`](/fr/docs/Web/API/HTMLMediaElement/textTracks)
   - : Un écouteur `addtrack` peut être ajouté à cet objet [`TextTrackList`](/fr/docs/Web/API/TextTrackList) afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.
 
-> **Note :** Bien qu'on parle ici d'un élément `<audio>`, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.
+> [!NOTE]
+> Bien qu'on parle ici d'un élément `<audio>`, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.
 
 Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément `<audio>` :
 
diff --git a/files/fr/web/html/element/base/index.md b/files/fr/web/html/element/base/index.md
index a87aaa8533d47d..a6656a640f79a0 100644
--- a/files/fr/web/html/element/base/index.md
+++ b/files/fr/web/html/element/base/index.md
@@ -67,7 +67,8 @@ Il est possible d'accéder à l'URL de base d'un document via un script en utili
 
 Les [attributs universels](/fr/docs/Web/HTML/Global_attributes) peuvent être utilisés sur cet élément.
 
-> **Attention :** Si l'un des attributs suivants est spécifié, cet élément **doit** venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut `href` de [`<link>`](/fr/docs/Web/HTML/Element/link).
+> [!WARNING]
+> Si l'un des attributs suivants est spécifié, cet élément **doit** venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut `href` de [`<link>`](/fr/docs/Web/HTML/Element/link).
 
 - **`href`**
   - : L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.
diff --git a/files/fr/web/html/element/big/index.md b/files/fr/web/html/element/big/index.md
index 1db3b29dbe051f..83083b0b75816c 100644
--- a/files/fr/web/html/element/big/index.md
+++ b/files/fr/web/html/element/big/index.md
@@ -5,11 +5,13 @@ slug: Web/HTML/Element/big
 
 {{HTMLSidebar}}
 
-> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
+> [!WARNING]
+> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
 L'élément HTML **`<big>`** (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de `small` à `medium`, ou de `large` à `x-large`) jusqu'à atteindre la taille maximale autorisée par le navigateur.
 
-> **Note :** Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés [CSS](/fr/docs/Web/CSS) pour remplacer cet élément.
+> [!NOTE]
+> Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés [CSS](/fr/docs/Web/CSS) pour remplacer cet élément.
 
 ## Attributs
 
@@ -67,7 +69,8 @@ Cet exemple utilise la propriété CSS [`font-size`](/fr/docs/Web/CSS/font-size)
 
 Cet élément implémente l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement).
 
-> **Note :** Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
+> [!NOTE]
+> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/element/br/index.md b/files/fr/web/html/element/br/index.md
index e0462a082071c2..fa00e03ef46486 100644
--- a/files/fr/web/html/element/br/index.md
+++ b/files/fr/web/html/element/br/index.md
@@ -11,7 +11,8 @@ L'élément HTML **`<br>`** crée un saut de ligne (un retour chariot) dans le t
 
 Comme vous pouvez le voir dans l'exemple ci-dessus, un élément `<br>` est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le `<br>` recommence au début de la ligne suivante du bloc de texte.
 
-> **Note :** Attention, `<br>` ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété [CSS](/fr/docs/Web/CSS) [`margin`](/fr/docs/Web/CSS/margin) sur l'élément HTML [`<p>`](/fr/docs/Web/HTML/Element/p).
+> [!NOTE]
+> Attention, `<br>` ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété [CSS](/fr/docs/Web/CSS) [`margin`](/fr/docs/Web/CSS/margin) sur l'élément HTML [`<p>`](/fr/docs/Web/HTML/Element/p).
 
 ## Attributs
 
diff --git a/files/fr/web/html/element/canvas/index.md b/files/fr/web/html/element/canvas/index.md
index d2fbc1e554897b..b317b842ca4e03 100644
--- a/files/fr/web/html/element/canvas/index.md
+++ b/files/fr/web/html/element/canvas/index.md
@@ -127,7 +127,8 @@ La taille maximale d'un élément `<canvas>` dépend du navigateur utilisé. Voi
 | Safari     | 32 767 pixels    | 32 767 pixels    | 268 435 456 pixels (soit 16 384 x 16 384) |
 | IE         | 8 192 pixels     | 8 192 pixels     | ?                                         |
 
-> **Note :** Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.
+> [!NOTE]
+> Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.
 
 ## Exemples
 
diff --git a/files/fr/web/html/element/caption/index.md b/files/fr/web/html/element/caption/index.md
index 71775989aa868f..e230e48ec475d4 100644
--- a/files/fr/web/html/element/caption/index.md
+++ b/files/fr/web/html/element/caption/index.md
@@ -84,7 +84,8 @@ On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes)
     - `bottom`
       - : La légende est affichée en dessous du tableau
 
-    > **Note :** Ne pas utiliser cet attribut. Il a été déprécié. L'élément `<caption>` devrait être mis en forme grâce au [CSS](/fr/docs/Web/CSS). Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS [`caption-side`](/fr/docs/Web/CSS/caption-side) et [`text-align`](/fr/docs/Web/CSS/text-align).
+    > [!NOTE]
+    > Ne pas utiliser cet attribut. Il a été déprécié. L'élément `<caption>` devrait être mis en forme grâce au [CSS](/fr/docs/Web/CSS). Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS [`caption-side`](/fr/docs/Web/CSS/caption-side) et [`text-align`](/fr/docs/Web/CSS/text-align).
 
 ## Notes d'utilisation
 
diff --git a/files/fr/web/html/element/center/index.md b/files/fr/web/html/element/center/index.md
index 5251ffae1d2ac2..17f3281d7f4517 100644
--- a/files/fr/web/html/element/center/index.md
+++ b/files/fr/web/html/element/center/index.md
@@ -5,7 +5,8 @@ slug: Web/HTML/Element/center
 
 {{HTMLSidebar}}
 
-> **Attention :** Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.
+> [!WARNING]
+> Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.
 
 L'élément **`<center>`** est un [élément de bloc](/fr/docs/Web/HTML/Block-level_elements) qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément [`<body>`](/fr/docs/Web/HTML/Element/body)).
 
@@ -15,7 +16,8 @@ Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la proprié
 
 Cet élément implémente l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement).
 
-> **Note :** Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
+> [!NOTE]
+> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
 
 ## Exemple 1
 
diff --git a/files/fr/web/html/element/col/index.md b/files/fr/web/html/element/col/index.md
index 8ac6e2668aecb3..7a8e1ba2938a83 100644
--- a/files/fr/web/html/element/col/index.md
+++ b/files/fr/web/html/element/col/index.md
@@ -92,7 +92,7 @@ Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils
 
     Si cet attribut n'est pas défini, sa valeur est héritée du [`align`](/fr/docs/Web/HTML/Element/colgroup#attr-align) de l'élément [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup) auquel appartient cet `<col>`. S'il n'y en a pas, la valeur `left` est supposée.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - Pour obtenir le même effet que les valeurs `left`, `center`, `right` ou `justify` :
     >
@@ -119,7 +119,7 @@ Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils
     - `middle`, permet de centrer le texte dans la cellule ;
     - and `top`, placera le texte aussi près du haut de la cellule que possible.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - N'essayez pas de définir la propriété [`vertical-align`](/fr/docs/Web/CSS/vertical-align) sur un sélecteur donnant un élément `<col>`. Comme les éléments [`<td>`](/fr/docs/Web/HTML/Element/td) ne sont pas des descendants de l'élément `<col>`, ils n'en hériteront pas.
     > - Si le tableau n'utilise pas d'attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), utilisez le sélecteur CSS `td:nth-child(an+b)` où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété `vertical-align` peut être utilisée.
diff --git a/files/fr/web/html/element/colgroup/index.md b/files/fr/web/html/element/colgroup/index.md
index bf9e88e13db95d..23c2b620c2cc7c 100644
--- a/files/fr/web/html/element/colgroup/index.md
+++ b/files/fr/web/html/element/colgroup/index.md
@@ -97,8 +97,7 @@ Comme pour tous les éléments, on peut utiliser [les attributs universels](/fr/
 
   - : Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément `<colgroup>` couvre. S'il n'est pas présent, sa valeur par défaut est `1`.
 
-    > **Note :**
-    >
+    > [!NOTE]
     > Cet attribut est appliqué sur les attributs du groupe de colonnes, il n'a aucun effet sur les règles de style CSS qui lui sont associées ni, a fortiori, sur les cellules des membres du groupe de la colonne.
     >
     > - L'attribut `span` n'est pas autorisé s'il y a un ou plusieurs éléments `<col>` dans le `<colgroup>`.
@@ -119,7 +118,7 @@ Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils
 
     Si cet attribut n'est pas défini, la valeur `left` est adoptée. Les éléments [`<col>`](/fr/docs/Web/HTML/Element/col) descendants peuvent remplacer cette valeur en utilisant leur propre attribut [`align`](/fr/docs/Web/HTML/Element/col#attr-align).
 
-    > **Note :**
+    > [!NOTE]
     >
     > - N'essayez pas de définir la propriété [`text-align`](/fr/docs/Web/CSS/text-align) sur un sélecteur donnant un élément [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup). Comme les éléments [`<td>`](/fr/docs/Web/HTML/Element/td) ne sont pas des descendants de l'élément [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup), ils n'en hériteront pas.
     > - Si le tableau n'utilise pas d'attribut [code>colspan](/fr/docs/Web/HTML/Element/td#attr-colspan), utilisez un `td:nth-child(an+b)` sélecteur CSS par colonne, où a est le nombre total de colonnes du tableau et b est la position ordinale de cette colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété `text-align` peut être utilisée.
@@ -144,7 +143,7 @@ Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils
     - `middle`, permet de centrer le texte dans la cellule ;
     - and `top`, placera le texte aussi près du haut de la cellule que possible.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - N'essayez pas de définir la propriété [`vertical-align`](/fr/docs/Web/CSS/vertical-align) sur un sélecteur donnant un élément `<col>`. Comme les éléments [`<td>`](/fr/docs/Web/HTML/Element/td) ne sont pas des descendants de l'élément `<col>`, ils n'en hériteront pas.
     > - Si le tableau n'utilise pas d'attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), utilisez le sélecteur CSS `td:nth-child(an+b)` où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété `vertical-align` peut être utilisée.
diff --git a/files/fr/web/html/element/details/index.md b/files/fr/web/html/element/details/index.md
index 22392a50c242ae..b435c00ef2fe87 100644
--- a/files/fr/web/html/element/details/index.md
+++ b/files/fr/web/html/element/details/index.md
@@ -11,7 +11,8 @@ La plupart du temps, le contrôle utilisé pour cet élément est un triangle qu
 
 {{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}
 
-> **Note :** L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.
+> [!NOTE]
+> L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.
 
 Un widget `<details>` peut être dans l'un des deux états suivants. L'état par défaut _fermé_ affiche uniquement le triangle et l'étiquette à l'intérieur du `<summary>` (ou une chaîne par défaut définie par [l'agent utilisateur](/fr/docs/Glossary/User_agent) si aucun `<summary>`).
 
@@ -21,7 +22,8 @@ Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur l
 
 Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.
 
-> **Note :** Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.
+> [!NOTE]
+> Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.
 
 Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS `display: list-item` à l'élément [`<summary>`](/fr/docs/Web/HTML/Element/summary). Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir [Personnaliser l'apparence](#personnaliser_lapparence) pour plus de détails.
 
@@ -101,7 +103,8 @@ Comme tous les éléments HTML, cet élément accepte les [attributs universels]
 
   - : Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément `<details>` — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.
 
-    > **Note :** Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, `open="false"` rend les détails visibles, car cet attribut est booléen.
+    > [!NOTE]
+    > Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, `open="false"` rend les détails visibles, car cet attribut est booléen.
 
 ## Évènements
 
diff --git a/files/fr/web/html/element/dfn/index.md b/files/fr/web/html/element/dfn/index.md
index 52241a96c73723..a0e24d693e06a4 100644
--- a/files/fr/web/html/element/dfn/index.md
+++ b/files/fr/web/html/element/dfn/index.md
@@ -92,7 +92,8 @@ Le terme à définir est identifié selon ces règles :
 2. Si le `<dfn>` contient un seul élément enfant et n'a pas de contenu textuel propre, et que l'élément enfant est un élément [`<abbr>`](/fr/docs/Web/HTML/Element/abbr) avec un attribut `title` lui-même, alors la valeur exacte du `<abbr>` de l'élément `title` est le terme défini.
 3. Sinon, le contenu textuel de l'élément `<dfn>` est le terme défini. Ceci est illustré [dans le premier exemple ci-dessous](#basic_identification_of_a_term).
 
-> **Note :** Si l'élément `<dfn>` possède un attribut `title`, il _doit_ contenir le terme défini et aucun autre texte.
+> [!NOTE]
+> Si l'élément `<dfn>` possède un attribut `title`, il _doit_ contenir le terme défini et aucun autre texte.
 
 ### Liens vers des éléments de type `<dfn>`
 
diff --git a/files/fr/web/html/element/dialog/index.md b/files/fr/web/html/element/dialog/index.md
index 0d8628268c4d0c..f71d18089b50d4 100644
--- a/files/fr/web/html/element/dialog/index.md
+++ b/files/fr/web/html/element/dialog/index.md
@@ -17,11 +17,13 @@ JavaScript peut être utilisé pour afficher l'élément `<dialog>`. L'utilisati
 
 Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-> **Attention :** L'attribut `tabindex` ne doit pas être utilisé sur l'élément `<dialog>`.
+> [!WARNING]
+> L'attribut `tabindex` ne doit pas être utilisé sur l'élément `<dialog>`.
 
 - `open`
   - : Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être affichée. Il est recommandé d'utiliser les méthodes `.show()` ou `.showModal()` afin d'afficher les boîtes de dialogue, plutôt que l'attribut `open`. Si un élément `<dialog>` est ouvert à l'aide de l'attribut `open`, il s'agira d'une boîte non-modale.
-    > **Note :** Bien qu'il soit possible de basculer entre l'état ouvert et l'état fermé des boîtes de dialogue ne bloquant pas l'interraction en modifiant la présence de l'attribut `open`, cette approche n'est pas recommandée.
+    > [!NOTE]
+    > Bien qu'il soit possible de basculer entre l'état ouvert et l'état fermé des boîtes de dialogue ne bloquant pas l'interraction en modifiant la présence de l'attribut `open`, cette approche n'est pas recommandée.
 
 ## Notes d'utilisation
 
diff --git a/files/fr/web/html/element/dir/index.md b/files/fr/web/html/element/dir/index.md
index 15de71c05effbd..9a735b687df505 100644
--- a/files/fr/web/html/element/dir/index.md
+++ b/files/fr/web/html/element/dir/index.md
@@ -5,11 +5,13 @@ slug: Web/HTML/Element/dir
 
 {{HTMLSidebar}}
 
-> **Attention :** Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.
+> [!WARNING]
+> Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.
 
 L'élément HTML **`<dir>`** (pour _directory_) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément [`<ul>`](/fr/docs/Web/HTML/Element/ul) qui permet de représenter des listes et, entre autres, des listes de fichiers.
 
-> **Attention :** Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément [`<ul>`](/fr/docs/Web/HTML/Element/ul). De plus, aucun navigateur majeur ne prend en charge cet élément.
+> [!WARNING]
+> Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément [`<ul>`](/fr/docs/Web/HTML/Element/ul). De plus, aucun navigateur majeur ne prend en charge cet élément.
 
 ## Interface DOM
 
@@ -23,7 +25,8 @@ Comme pour tous les autres éléments HTML, on peut utiliser [les attributs univ
 
   - : Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs.
 
-    > **Attention :** Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément [`<dir>`](/fr/docs/Web/HTML/Element/dir) doit être mis en forme en utilisant [CSS](/fr/docs/Web/CSS). Pour obtenir un effect visuel similaire à l'attribut `compact`, la propriété CSS [`line-height`](/fr/docs/Web/CSS/line-height) peut être utilisé avec la valeur `80%`.
+    > [!WARNING]
+    > Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément [`<dir>`](/fr/docs/Web/HTML/Element/dir) doit être mis en forme en utilisant [CSS](/fr/docs/Web/CSS). Pour obtenir un effect visuel similaire à l'attribut `compact`, la propriété CSS [`line-height`](/fr/docs/Web/CSS/line-height) peut être utilisé avec la valeur `80%`.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/element/div/index.md b/files/fr/web/html/element/div/index.md
index 74008ffa358f15..5643f90478dc2d 100644
--- a/files/fr/web/html/element/div/index.md
+++ b/files/fr/web/html/element/div/index.md
@@ -92,7 +92,8 @@ En tant que conteneur « pur », l'élément `<div>` ne représente rien en soi.
 
 Comme tous les autres éléments HTML, cet élément accepte [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-> **Note :** L'attribut **`align`** est désormais obsolète et ne doit plus être appliqué pour un `<div>`. On privilégiera l'utilisation des propriétés et outils CSS (tels que [la grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) ou [les boîtes flexibles (flexbox)](/fr/docs/Glossary/Flexbox)) pour aligner et positionner des éléments `<div>`.
+> [!NOTE]
+> L'attribut **`align`** est désormais obsolète et ne doit plus être appliqué pour un `<div>`. On privilégiera l'utilisation des propriétés et outils CSS (tels que [la grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) ou [les boîtes flexibles (flexbox)](/fr/docs/Glossary/Flexbox)) pour aligner et positionner des éléments `<div>`.
 
 ## Notes d'utilisation
 
diff --git a/files/fr/web/html/element/embed/index.md b/files/fr/web/html/element/embed/index.md
index a5bd57be98e3d6..e841afe8367deb 100644
--- a/files/fr/web/html/element/embed/index.md
+++ b/files/fr/web/html/element/embed/index.md
@@ -9,7 +9,8 @@ L'élément HTML **`<embed>`** permet d'intégrer du contenu externe à cet endr
 
 {{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}
 
-> **Note :** Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.
+> [!NOTE]
+> Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.
 
 Il faut garder à l'esprit que la plupart des navigateurs ont déprécié voire retiré la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur `<embed>` si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.
 
diff --git a/files/fr/web/html/element/fieldset/index.md b/files/fr/web/html/element/fieldset/index.md
index d7e3ba79fd78fe..9f9c57413ad318 100644
--- a/files/fr/web/html/element/fieldset/index.md
+++ b/files/fr/web/html/element/fieldset/index.md
@@ -23,7 +23,8 @@ Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Globa
 
   - : Le nom associé au groupe.
 
-    > **Note :** L'étiquette du groupe de contrôle est donné par le premier élément enfant [`<legend>`](/fr/docs/Web/HTML/Element/Legend) du `<fieldset>`.
+    > [!NOTE]
+    > L'étiquette du groupe de contrôle est donné par le premier élément enfant [`<legend>`](/fr/docs/Web/HTML/Element/Legend) du `<fieldset>`.
 
 ## Mise en forme avec CSS
 
diff --git a/files/fr/web/html/element/font/index.md b/files/fr/web/html/element/font/index.md
index 653b5bae20a241..460075b21af25d 100644
--- a/files/fr/web/html/element/font/index.md
+++ b/files/fr/web/html/element/font/index.md
@@ -5,11 +5,13 @@ slug: Web/HTML/Element/font
 
 {{HTMLSidebar}}
 
-> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.
+> [!WARNING]
+> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.
 
 L'élément HTML **`<font>`** définit la taille, la couleur et la police de son contenu.
 
-> **Attention :** Ne pas utiliser cet élément ! Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.
+> [!WARNING]
+> Ne pas utiliser cet élément ! Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.
 >
 > À partir de HTML 4, HTML ne véhicule plus d'informations de style (en dehors de l'élément [`<style>`](/fr/docs/Web/HTML/Element/style) ou de l'attribut **style** de chaque élément). Pour tout nouveau développement web, le style doit être écrit en utilisant le [CSS](/fr/docs/Web/CSS) uniquement.
 >
diff --git a/files/fr/web/html/element/form/index.md b/files/fr/web/html/element/form/index.md
index 182394c3d14165..f67384a93f5e53 100644
--- a/files/fr/web/html/element/form/index.md
+++ b/files/fr/web/html/element/form/index.md
@@ -98,7 +98,8 @@ Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Globa
 
   - : Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.
 
-    > **Note :** Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut [`accept`](/fr/docs/Web/HTML/Element/Input#attr-accept) de l'élément `<input type=file>`.
+    > [!NOTE]
+    > Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut [`accept`](/fr/docs/Web/HTML/Element/Input#attr-accept) de l'élément `<input type=file>`.
 
 - `accept-charset`
   - : Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie [le même encodage que celui de la page](/fr/docs/Web/HTTP/Headers/Content-Encoding).
@@ -163,7 +164,8 @@ Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire
 
     Cette valeur peut être remplacée par un attribut [`formtarget`](/fr/docs/Web/HTML/Element/Button#attr-formtarget) sur un [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit), ou [`<input type="image">`](/fr/docs/Web/HTML/Element/Input/image).
 
-    > **Note :** La définition de `target="_blank"` sur les éléments `<form>` fournit implicitement le même comportement `rel` que la définition de [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`.
+    > [!NOTE]
+    > La définition de `target="_blank"` sur les éléments `<form>` fournit implicitement le même comportement `rel` que la définition de [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`.
 
 ## Exemples
 
diff --git a/files/fr/web/html/element/frameset/index.md b/files/fr/web/html/element/frameset/index.md
index f539f8254d1db7..7582564f0d3d99 100644
--- a/files/fr/web/html/element/frameset/index.md
+++ b/files/fr/web/html/element/frameset/index.md
@@ -5,11 +5,13 @@ slug: Web/HTML/Element/frameset
 
 {{HTMLSidebar}}
 
-> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.
+> [!WARNING]
+> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.
 
 L'élément HTML **`<frameset>`** est utilisé pour contenir les éléments [`<frame>`](/fr/docs/Web/HTML/Element/frame).
 
-> **Note :** L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), cet élément n'est généralement pas utilisé par les sites web modernes.
+> [!NOTE]
+> L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), cet élément n'est généralement pas utilisé par les sites web modernes.
 
 ## Attributs
 
diff --git a/files/fr/web/html/element/head/index.md b/files/fr/web/html/element/head/index.md
index 2f34535f885528..a9401ac1a1baf9 100644
--- a/files/fr/web/html/element/head/index.md
+++ b/files/fr/web/html/element/head/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/head
 
 L'élément HTML **\<head>** fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.
 
-> **Note :** L'élément `<head>` contient principalement des données destinées au traitement automatisé et pas nécessairement lisibles par des humains. Pour afficher des informations lisibles pour les utilisateurs dans des en-têtes ou titre, voir l'élément {{HTMLElement("header")}}.
+> [!NOTE]
+> L'élément `<head>` contient principalement des données destinées au traitement automatisé et pas nécessairement lisibles par des humains. Pour afficher des informations lisibles pour les utilisateurs dans des en-têtes ou titre, voir l'élément {{HTMLElement("header")}}.
 
 ## Attributs
 
diff --git a/files/fr/web/html/element/heading_elements/index.md b/files/fr/web/html/element/heading_elements/index.md
index e983820eb6c440..4a6474fe5e059d 100644
--- a/files/fr/web/html/element/heading_elements/index.md
+++ b/files/fr/web/html/element/heading_elements/index.md
@@ -59,7 +59,8 @@ Ces éléments incluent uniquement les [attributs universels](/fr/docs/Web/HTML/
 
 Bien qu'il soit permis par le standard HTML d'utiliser plusieurs éléments `<h1>` sur une même page tant que ceux-ci ne sont pas [imbriqués](#imbrication), cela est considéré comme une mauvaise pratique. Une page devrait généralement avoir un seul élément `<h1>` qui décrit le contenu de la page (semblable à l'élément [`<title>`](/fr/docs/Web/HTML/Element/title)).
 
-> **Note :** L'imbrication de plusieurs éléments `<h1>` au sein [d'éléments sectionnants](/fr/docs/Web/HTML/Element#sectionnement_du_contenu) imbriqués était autorisée dans d'anciennes versions du standard HTML. Toutefois, cela a toujours été considéré comme une mauvaise pratique et ce n'est plus conforme. Pour en savoir plus, vous pouvez lire le billet [<i lang="en">There Is No Document Outline Algorithm</i> d'Adrian Roselli (en anglais)](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html).
+> [!NOTE]
+> L'imbrication de plusieurs éléments `<h1>` au sein [d'éléments sectionnants](/fr/docs/Web/HTML/Element#sectionnement_du_contenu) imbriqués était autorisée dans d'anciennes versions du standard HTML. Toutefois, cela a toujours été considéré comme une mauvaise pratique et ce n'est plus conforme. Pour en savoir plus, vous pouvez lire le billet [<i lang="en">There Is No Document Outline Algorithm</i> d'Adrian Roselli (en anglais)](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html).
 
 Mieux vaudra donc utiliser un seul élément `<h1>` par page et [l'imbrication de titres d'autres niveaux](#imbrication) sans sauter de niveaux.
 
diff --git a/files/fr/web/html/element/html/manifest/index.md b/files/fr/web/html/element/html/manifest/index.md
index 7aeed32482eb10..22deebee180fc8 100644
--- a/files/fr/web/html/element/html/manifest/index.md
+++ b/files/fr/web/html/element/html/manifest/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/html/manifest
 
 L'attribut **`manifest`** de l'élément `<html>` indique une URL d'un manifeste de cache d'application à télécharger pendant les premières étapes du chargement de la page.
 
-> **Note :** La mise en cache utilisant un manifeste a été dépréciée. Les <i lang="en">service workers</i> doivent être utilisés à la place.
+> [!NOTE]
+> La mise en cache utilisant un manifeste a été dépréciée. Les <i lang="en">service workers</i> doivent être utilisés à la place.
 
 L'attribut `manifest` a un effet limité aux premières étapes de chargement de la page. Aussi, le modifier en JavaScript avec les interfaces du DOM usuelles n'aura pas d'effet, il faudra à la place utiliser l'interface [`Window.applicationCache`](/fr/docs/Web/API/Window/applicationCache).
 
diff --git a/files/fr/web/html/element/iframe/index.md b/files/fr/web/html/element/iframe/index.md
index 8e0acffaf1a458..6bde6cc8028b0c 100644
--- a/files/fr/web/html/element/iframe/index.md
+++ b/files/fr/web/html/element/iframe/index.md
@@ -11,7 +11,8 @@ L'élément HTML **`<iframe>`** représente un [contexte de navigation](/fr/docs
 
 Chaque contexte de navigation possède son propre [historique](/fr/docs/Web/API/History) et son propre [document actif](/fr/docs/Web/API/Document). Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. [`Window`](/fr/docs/Web/API/Window)).
 
-> **Attention :** Chaque contexte de navigation créé par un élément `<iframe>` représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'_iframes_ que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.
+> [!WARNING]
+> Chaque contexte de navigation créé par un élément `<iframe>` représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'_iframes_ que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.
 
 <table class="properties">
   <tbody>
@@ -98,13 +99,15 @@ Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Globa
 
   - : Cet attribut, lorsqu'il vaut `true`, indique que l'_iframe_ intégrée peut être passée en plein écran via la méthode[`Element.requestFullscreen()`](/fr/docs/Web/API/Element/requestFullScreen).
 
-    > **Note :** Cet attribut est considéré comme historique et a été redéfini avec `allow="fullscreen"`.
+    > [!NOTE]
+    > Cet attribut est considéré comme historique et a été redéfini avec `allow="fullscreen"`.
 
 - `allowpaymentrequest`
 
   - : Cet attribut, lorsqu'il vaut `true`, permet à l'_iframe_ intégrée d'appeler l'API [Payment Request](/fr/docs/Web/API/Payment_Request_API).
 
-    > **Note :** Cet attribut est considéré comme historique et a été redéfini avec `allow="payment"`.
+    > [!NOTE]
+    > Cet attribut est considéré comme historique et a été redéfini avec `allow="payment"`.
 
 - `csp` {{experimental_inline}}
   - : L'attribut `csp` définit [la politique de sécurité du contenu](/fr/docs/Web/HTTP/CSP) que le document intégré doit respecter. Voir [`HTMLIFrameElement.csp`](/fr/docs/Web/API/HTMLIFrameElement/csp) pour plus de détails.
@@ -151,7 +154,7 @@ Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Globa
     - `allow-top-navigation` : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.
     - `allow-top-navigation-by-user-activation` : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - Lorsque le document intégré possède la même origine que la page principale, il est **fortement déconseillé** d'employer `allow-scripts` et `allow-same-origin` simultanément, car cela permet de retirer l'attribut `sandbox` via un programme, c'est donc aussi sûr que de ne pas utiliser l'attribut `sandbox`.
     > - La mise en bac à sable (_sandboxing_) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un _iframe_ sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.
diff --git a/files/fr/web/html/element/img/index.md b/files/fr/web/html/element/img/index.md
index 036d30a35be5f1..236cded3c8e475 100644
--- a/files/fr/web/html/element/img/index.md
+++ b/files/fr/web/html/element/img/index.md
@@ -60,7 +60,8 @@ On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes)
 
   - : Définit une description textuelle alternative pour l'image.
 
-    > **Note :** Il se peut que les navigateurs n'affichent pas l'image, cela peut se produire si&nbsp;:
+    > [!NOTE]
+    > Il se peut que les navigateurs n'affichent pas l'image, cela peut se produire si&nbsp;:
     >
     > - Le navigateur n'est pas doté d'une interface visuelle
     > - La personne a configuré son navigateur pour ne pas afficher les images (afin d'économiser de la bande passante ou pour des raisons de vie privée)
@@ -119,13 +120,15 @@ On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes)
 
   - : La hauteur intrinsèque de l'image, exprimée en pixels. Cette valeur doit être un nombre entier, sans unité.
 
-    > **Note :** Inclure `height` et [`width`](#width) permet au navigateur de calculer les proportions de l'image avant son chargement. Ces proportions sont utilisées pour réserver l'espace nécessaire afin d'afficher l'image et de réduire voire d'empêcher tout décalage à l'affichage, permettant ainsi une navigation plus agréable et de meilleures performances.
+    > [!NOTE]
+    > Inclure `height` et [`width`](#width) permet au navigateur de calculer les proportions de l'image avant son chargement. Ces proportions sont utilisées pour réserver l'espace nécessaire afin d'afficher l'image et de réduire voire d'empêcher tout décalage à l'affichage, permettant ainsi une navigation plus agréable et de meilleures performances.
 
 - `ismap`
 
   - : Cet attribut booléen indique que l'image fait partie d'une [carte côté serveur](https://en.wikipedia.org/wiki/Image_map#Server-side). Dans ce cas, les coordonnées du clic sur l'image sont envoyés au serveur.
 
-    > **Note :** Cet attribut est uniquement autorisé lorsque l'élément `<img>` est un descendant d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) disposant d'un attribut `href` valide. Cela fournit une alternative lorsque la navigation se fait sans dispositif de pointage.
+    > [!NOTE]
+    > Cet attribut est uniquement autorisé lorsque l'élément `<img>` est un descendant d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) disposant d'un attribut `href` valide. Cela fournit une alternative lorsque la navigation se fait sans dispositif de pointage.
 
 - `loading`
 
@@ -137,8 +140,10 @@ On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes)
 
       - : Le chargement de l'image est retardé jusqu'à ce que celle-ci soit située à une certaine distance, définie par le navigateur, de la zone d'affichage. L'idée est d'éviter de consommer de la bande passante et des ressources réseaux avant d'être relativement certain que l'image est nécessaire. Pour la plupart des cas d'usage, cela permet d'améliorer les performances.
 
-      > **Note :** Le retardement du chargement est uniquement activé lorsque JavaScript est activé dans le navigateur. Il s'agit d'une mesure pour limiter le pistage. En effet, si les scripts sont désactivés pour le navigateur et que le chargement retardé est actif, le pistage d'un utilisateur en fonction de sa position sur la page serait toujours possible (via des images placées à intervalle régulier sur la page).
-      > **Note :** Les images avec `loading` qui vaut `lazy` ne seront jamais chargées si elles n'ont pas d'intersection avec une partie visible d'un élément. Fournir les attributs `width` et `height` pour les images chargées à la demande règle ce problème et est [recommandé par la spécification](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element).
+      > [!NOTE]
+      > Le retardement du chargement est uniquement activé lorsque JavaScript est activé dans le navigateur. Il s'agit d'une mesure pour limiter le pistage. En effet, si les scripts sont désactivés pour le navigateur et que le chargement retardé est actif, le pistage d'un utilisateur en fonction de sa position sur la page serait toujours possible (via des images placées à intervalle régulier sur la page).
+      > [!NOTE]
+      > Les images avec `loading` qui vaut `lazy` ne seront jamais chargées si elles n'ont pas d'intersection avec une partie visible d'un élément. Fournir les attributs `width` et `height` pour les images chargées à la demande règle ce problème et est [recommandé par la spécification](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element).
 
 - `referrerpolicy`
 
@@ -200,7 +205,8 @@ On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes)
 
   - : L'URL partielle (commençant par `#`) d'une [carte d'image](/fr/docs/Web/HTML/Element/map) associée à l'élément.
 
-    > **Note :** Cet attribut est invalide si l'élément `<img>` est à l'intérieur d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) ou d'un élément [`<button>`](/fr/docs/Web/HTML/Element/button).
+    > [!NOTE]
+    > Cet attribut est invalide si l'élément `<img>` est à l'intérieur d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) ou d'un élément [`<button>`](/fr/docs/Web/HTML/Element/button).
 
 ### Attributs dépréciés
 
@@ -231,7 +237,8 @@ On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes)
 
   - : Un lien vers une description plus détaillée de l'image. Les valeurs pouvaient être une URL ou l'identifiant d'un autre élément.
 
-    > **Note :** Cet attribut est mentionné dans la spécification [HTML 5.2 du W3C](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc), mais a été retiré [du standard évolutif HTML du WHATWG](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element). Son avenir est incertain et mieux vaut utiliser une alternative WAI-ARIA comme [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) ou [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details).
+    > [!NOTE]
+    > Cet attribut est mentionné dans la spécification [HTML 5.2 du W3C](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc), mais a été retiré [du standard évolutif HTML du WHATWG](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element). Son avenir est incertain et mieux vaut utiliser une alternative WAI-ARIA comme [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) ou [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details).
 
 - `name` {{deprecated_inline}}
 
diff --git a/files/fr/web/html/element/index.md b/files/fr/web/html/element/index.md
index eed4fd82f9b8ba..5ae1495a3376b2 100644
--- a/files/fr/web/html/element/index.md
+++ b/files/fr/web/html/element/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Cette page répertorie tous les [éléments](/fr/docs/Glossary/Element) [HTML](/fr/docs/Glossary/HTML), qui sont créés à l'aide de [balises](/fr/docs/Glossary/Tag). Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.
 
-> **Note :** Pour plus d'informations sur les bases des éléments et attributs HTML, voir [l'article Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started).
+> [!NOTE]
+> Pour plus d'informations sur les bases des éléments et attributs HTML, voir [l'article Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started).
 
 ## Racine principale
 
@@ -223,7 +224,8 @@ Les composants web (ou <i lang="en">web components</i> en anglais) permettent de
 
 ## Éléments obsolètes ou dépréciés
 
-> **Attention :** Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. **Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.** Ces éléments uniquement sont listés ici à des fins d'information.
+> [!WARNING]
+> Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. **Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.** Ces éléments uniquement sont listés ici à des fins d'information.
 
 | Élément                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                         |
 | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/fr/web/html/element/input/button/index.md b/files/fr/web/html/element/input/button/index.md
index 39822b0a39dc97..da52730d1f4bc0 100644
--- a/files/fr/web/html/element/input/button/index.md
+++ b/files/fr/web/html/element/input/button/index.md
@@ -9,7 +9,8 @@ Les éléments {{HTMLElement("input")}} de type **`button`** sont affichés comm
 
 {{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}
 
-> **Note :** Bien que les éléments `<input>` de type `"button"` représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.
+> [!NOTE]
+> Bien que les éléments `<input>` de type `"button"` représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.
 
 ## Valeur
 
@@ -101,7 +102,8 @@ function updateBtn() {
 
 {{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}
 
-> **Note :** Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.
+> [!NOTE]
+> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.
 
 ### Désactiver et activer un bouton
 
@@ -167,7 +169,8 @@ function disableBtn() {
 
 {{EmbedLiveSample("Exemple_2", 650, 60)}}
 
-> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/button#autocomplete) peut être utilisé afin de contrôler cette fonctionnalité.
+> [!NOTE]
+> À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/button#autocomplete) peut être utilisé afin de contrôler cette fonctionnalité.
 
 ## Validation
 
diff --git a/files/fr/web/html/element/input/checkbox/index.md b/files/fr/web/html/element/input/checkbox/index.md
index 32b0f1bd84a0d2..aa48cf4c6f3909 100644
--- a/files/fr/web/html/element/input/checkbox/index.md
+++ b/files/fr/web/html/element/input/checkbox/index.md
@@ -39,7 +39,8 @@ Dans cet exemple, on a le nom (l'attribut `name`) `subscribe` utilisé pour la c
 
 Si l'attribut `value` n'était pas renseigné, la valeur par défaut serait `on` (dans l'exemple, les données envoyées au serveur auraient eu la forme `subscribe=on`).
 
-> **Note :** Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, ni le nom ni la valeur ne sont envoyés au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme `value=unchecked`)&nbsp;; la valeur n'est pas transmise au serveur du tout. Si on veut envoyer une valeur par défaut lorsque la case à cocher est décochée, une solution pourrait être d'utiliser du JavaScript pour créer un élément [`<input type="hidden">`](/fr/docs/Web/HTML/Element/input/hidden).
+> [!NOTE]
+> Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, ni le nom ni la valeur ne sont envoyés au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme `value=unchecked`)&nbsp;; la valeur n'est pas transmise au serveur du tout. Si on veut envoyer une valeur par défaut lorsque la case à cocher est décochée, une solution pourrait être d'utiliser du JavaScript pour créer un élément [`<input type="hidden">`](/fr/docs/Web/HTML/Element/input/hidden).
 
 ## Attributs supplémentaires
 
@@ -48,7 +49,8 @@ En plus des attributs qui sont partagés par l'ensemble des éléments [`<input>
 - `checked`
 
   - : Un attribut booléen qui indique si la case est cochée par défaut à l'ouverture de la page. Cet attribut n'indique _pas_ si la case est actuellement cochée&nbsp;: si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL `checked` de l'objet [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) est mis à jour).
-    > **Note :** À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut `value` qui est envoyé (ou la valeur `on` si aucun attribut `value` n'est présent).
+    > [!NOTE]
+    > À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut `value` qui est envoyé (ou la valeur `on` si aucun attribut `value` n'est présent).
     > À la différence des autres navigateurs, Firefox [conserve l'état coché placé dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un champ `<input>` après les rechargements de la page. L'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/input#autocomplete) peut être utilisé afin de contrôler cette fonctionnalité.
 
 - `value`
@@ -161,7 +163,8 @@ function updateDisplay() {
 
 {{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}
 
-> **Note :** Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée&nbsp;: aucune donnée n'est envoyée au serveur.
+> [!NOTE]
+> Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée&nbsp;: aucune donnée n'est envoyée au serveur.
 
 ## Validation
 
diff --git a/files/fr/web/html/element/input/color/index.md b/files/fr/web/html/element/input/color/index.md
index 4f56b2b8f3dc1e..277b136ae61b70 100644
--- a/files/fr/web/html/element/input/color/index.md
+++ b/files/fr/web/html/element/input/color/index.md
@@ -15,7 +15,8 @@ L'apparence du contrôle de sélection des couleurs peut grandement varier d'un
 
 L'attribut [`value`](/fr/docs/Web/HTML/Element/input#value) d'un élément `<input type="color">` est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour _Green_ en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.
 
-> **Note :** Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur `"#000000"` (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de `"#000000"`.
+> [!NOTE]
+> Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur `"#000000"` (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de `"#000000"`.
 
 ## Utiliser les contrôles de saisie des couleurs
 
diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md
index cd221fb8bd3346..c42fc2058ef36f 100644
--- a/files/fr/web/html/element/input/date/index.md
+++ b/files/fr/web/html/element/input/date/index.md
@@ -51,7 +51,8 @@ Il est possible de fournir une valeur par défaut en renseignant l'attribut [`va
 
 {{EmbedLiveSample('', 600, 40)}}
 
-> **Note :** Le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à-dire les quatre chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour).
+> [!NOTE]
+> Le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à-dire les quatre chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour).
 
 On peut également récupérer la valeur de la date en JavaScript grâce à la propriété [`HTMLInputElement.value`](/fr/docs/Web/API/HTMLInputElement)&nbsp;:
 
@@ -86,11 +87,13 @@ L'attribut `step` est un nombre qui indique le «&nbsp;pas&nbsp;» suivi par le
 
 Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide.
 
-> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
+> [!NOTE]
+> Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
 
 Pour les champs `date`, la valeur de `step` est exprimée en jours et est traité comme un nombre de millisecondes égal à 86&nbsp;400&nbsp;000 fois la valeur de `step`. La valeur par défaut de `step` est 1 (ce qui correspond à un jour).
 
-> **Note :** Utiliser `any` comme valeur pour `step` produira le même effet que la valeur `1` pour les champs `date`.
+> [!NOTE]
+> Utiliser `any` comme valeur pour `step` produira le même effet que la valeur `1` pour les champs `date`.
 
 ## Utilisation des contrôles de saisie des dates
 
@@ -134,7 +137,8 @@ On peut utiliser les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min)
 
 On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années.
 
-> **Note :** On devrait également pouvoir utiliser l'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.
+> [!NOTE]
+> On devrait également pouvoir utiliser l'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.
 
 ### Contrôler la taille du champ de saisie
 
@@ -194,7 +198,8 @@ input:valid + span:after {
 }
 ```
 
-> **Attention :** La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.
+> [!WARNING]
+> La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.
 
 ## Gérer la prise en charge des navigateurs
 
@@ -457,7 +462,8 @@ daySelect.onchange = function () {
 };
 ```
 
-> **Note :** Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
+> [!NOTE]
+> Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md
index a4a77ef55d79e6..287f556a1f08b8 100644
--- a/files/fr/web/html/element/input/datetime-local/index.md
+++ b/files/fr/web/html/element/input/datetime-local/index.md
@@ -59,7 +59,8 @@ Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui repr
 
 On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut `value`. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisatrice ou l'utilisateur. En revanche, l'attribut `value` sera toujours formaté de la façon suivante&nbsp;: `yyyy-MM-ddThh:mm`. Lorsque la valeur est envoyée au serveur, elle aura donc ce format&nbsp;: `partydate=2017-06-01T08:30`.
 
-> **Note :** Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/Web/HTTP/Methods/GET), les deux points (`:`) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser [`encodeURI()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/encodeURI).
+> [!NOTE]
+> Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/Web/HTTP/Methods/GET), les deux points (`:`) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser [`encodeURI()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/encodeURI).
 
 En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). Par exemple&nbsp;:
 
@@ -92,7 +93,8 @@ L'attribut `step` est un nombre qui indique le «&nbsp;pas&nbsp;» suivi par le
 
 Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide.
 
-> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
+> [!NOTE]
+> Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
 
 Pour les champs `datetime-local`, la valeur de l'attribut `step` est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de `step` est 60 (soit 1 minute ou 60&nbsp;000 millisecondes).
 
@@ -144,7 +146,8 @@ Par conséquent&nbsp;:
 - Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées.
 - Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. [Validation](#validation)).
 
-> **Note :** L'attribut `step` devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.
+> [!NOTE]
+> L'attribut `step` devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.
 
 ### Contrôler la taille du champ
 
@@ -233,7 +236,8 @@ input:valid + span:after {
 }
 ```
 
-> **Attention :** La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.
+> [!WARNING]
+> La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.
 
 ## Gérer la prise en charge des navigateurs
 
@@ -573,7 +577,8 @@ daySelect.onchange = function () {
 };
 ```
 
-> **Note :** Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
+> [!NOTE]
+> Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/element/input/email/index.md b/files/fr/web/html/element/input/email/index.md
index 631b457624c29c..60b27363605ad6 100644
--- a/files/fr/web/html/element/input/email/index.md
+++ b/files/fr/web/html/element/input/email/index.md
@@ -11,7 +11,8 @@ Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `typ
 
 La valeur saisie dans le champ est automatiquement validée pour vérifier s'il s'agit d'une chaîne de caractères vide ou d'une adresse mail valide (ou une liste de telles adresses) avant que le formulaire soit envoyé. Les pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) sont automatiquement appliquées selon la validité des champs afin d'indiquer visuellement si la valeur courante du champ est une adresse mail valide ou non.
 
-> **Note :** Les navigateurs qui ne prennent pas en charge le type `email` emploieront un élément `<input>` [`"text"`](/fr/docs/Web/HTML/Element/Input/text) à la place.
+> [!NOTE]
+> Les navigateurs qui ne prennent pas en charge le type `email` emploieront un élément `<input>` [`"text"`](/fr/docs/Web/HTML/Element/Input/text) à la place.
 
 <table class="properties">
   <tbody>
@@ -74,7 +75,8 @@ Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si
 
 Un attribut booléen qui indique, s'il est présent, que plusieurs adresses électroniques peuvent être saisies en étant séparées par des virgules (et éventuellement des espaces). Voir la section sur [la saisie de plusieurs adresses](#gérer_plusieurs_adresses_mail) ci-après.
 
-> **Note :** Normalement, lorsque l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) est indiqué, la personne remplissant le formulaire doit saisir une adresse mail valide pour que le champ soit considéré valide. Toutefois, si l'attribut `multiple` est ajouté, une liste de zéro adresses (une chaîne de caractères vide ou un texte constitué uniquement d'espaces) sera une valeur valide. Autrement dit, la personne remplissant le formulaire n'est pas obligée de saisir une adresse lorsque `multiple` est présent, quelle que soit la valeur de `required`.
+> [!NOTE]
+> Normalement, lorsque l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) est indiqué, la personne remplissant le formulaire doit saisir une adresse mail valide pour que le champ soit considéré valide. Toutefois, si l'attribut `multiple` est ajouté, une liste de zéro adresses (une chaîne de caractères vide ou un texte constitué uniquement d'espaces) sera une valeur valide. Autrement dit, la personne remplissant le formulaire n'est pas obligée de saisir une adresse lorsque `multiple` est présent, quelle que soit la valeur de `required`.
 
 ### `pattern`
 
@@ -82,7 +84,8 @@ L'attribut `pattern` est une expression rationnelle que doit respecter la valeur
 
 Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.
 
-> **Note :** L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.
+> [!NOTE]
+> L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.
 
 Voir [la section sur l'utilisation de cet attribut ci-après](#validation_grâce_à_une_expression_rationnelle) pour plus d'exemples.
 
@@ -92,13 +95,15 @@ L'attribut `placeholder` est une chaîne de caractères fournissant une courte i
 
 Si le contenu du contrôle respecte une directionnalité donnée ([LTR](/fr/docs/Glossary/ltr) ou [RTL](/fr/docs/Glossary/rtl)) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode&nbsp;: voir [Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls).
 
-> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire, et car il peut causer certains problèmes avec le contenu. Voir [la page sur `<input>`](/fr/docs/Web/HTML/Element/Input) pour plus d'informations.
+> [!NOTE]
+> On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire, et car il peut causer certains problèmes avec le contenu. Voir [la page sur `<input>`](/fr/docs/Web/HTML/Element/Input) pour plus d'informations.
 
 ### `readonly`
 
 Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript, qui définirait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
+> [!NOTE]
+> Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
 
 ### `size`
 
@@ -112,7 +117,8 @@ Les adresses mails font partie des informations les plus fréquentes dans les fo
 
 On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à une utilisatrice existante ou un utilisateur existant du site, ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée.
 
-> **Note :** Il est également important de rappeler qu'une utilisatrice ou un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site _ne doit pas_ reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique _côté serveur_ dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.).
+> [!NOTE]
+> Il est également important de rappeler qu'une utilisatrice ou un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site _ne doit pas_ reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique _côté serveur_ dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.).
 
 ### Un champ `email` simple
 
@@ -227,7 +233,8 @@ Lorsqu'on utilise l'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist)
 
 Il existe deux niveaux de validation pour les champs de saisie de type `email`. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.
 
-> **Attention :** La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.
+> [!WARNING]
+> La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.
 
 ### Validation simple
 
@@ -240,7 +247,8 @@ Les navigateurs qui implémentent le type `email` fournissent une validation aut
 
 Les pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non — voir [Validation des données de formulaires](/fr/docs/Learn/Forms/Form_validation) pour en apprendre davantage.
 
-> **Note :** La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, voir [le bug 15489 du W3C](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489).
+> [!NOTE]
+> La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, voir [le bug 15489 du W3C](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489).
 
 ### Validation grâce à une expression rationnelle
 
@@ -320,7 +328,8 @@ C'est pour cela qu'on indique la chaîne de caractères «&nbsp;Merci de fournir
 
 ![](adresse-electronique-mauvais-motif.png)
 
-> **Note :** Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.
+> [!NOTE]
+> Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.
 
 ## Exemples
 
diff --git a/files/fr/web/html/element/input/file/index.md b/files/fr/web/html/element/input/file/index.md
index 5c0225f11e18db..3749537761cd65 100644
--- a/files/fr/web/html/element/input/file/index.md
+++ b/files/fr/web/html/element/input/file/index.md
@@ -13,7 +13,7 @@ Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"file"`**
 
 L'attribut [`value`](/fr/docs/Web/HTML/Element/input#value) contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété `HTMLInputElement.files`.
 
-> **Note :**
+> [!NOTE]
 >
 > 1. Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript [grâce à la propriété `FileList`](/fr/docs/Using_files_from_web_applications#getting_information_about_selected_files).
 > 2. Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (`""`).
@@ -69,7 +69,8 @@ En complément des attributs précédents, les éléments `<input type="file">`
 
 L'attribut booléen `webkitdirectory`, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples.
 
-> **Note :** Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, `webkitdirectory` est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.
+> [!NOTE]
+> Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, `webkitdirectory` est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.
 
 ## Identifiants de type de fichier
 
@@ -113,7 +114,8 @@ Ce fragment de code HTML produira le résultat suivant :
 
 {{EmbedLiveSample('Un_exemple_simple', 650, 60)}}
 
-> **Note :** Vous pouvez également trouver cet exemple sur GitHub — [avec le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html) et [la démonstration](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
+> [!NOTE]
+> Vous pouvez également trouver cet exemple sur GitHub — [avec le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html) et [la démonstration](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
 
 Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément `<input type="file">` fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.
 
@@ -134,7 +136,8 @@ Chaque objet `File` contient les informations suivantes :
 - `type` : une chaîne de caractères ({{domxref("DOMString")}}) qui représente [le type MIME](/fr/docs/Glossaire/Type_MIME) du fichier.
 - `webkitRelativePath`{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut [`webkitdirectory`](/fr/docs/Web/HTML/Element/input#webkitdirectory). _Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution._
 
-> **Note :** Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL `HTMLInputElement.files`. Pour Firefox, cela a été ajouté avec la version 57 (cf. [bug Firefox 1384030](https://bugzil.la/1384030)).
+> [!NOTE]
+> Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL `HTMLInputElement.files`. Pour Firefox, cela a été ajouté avec la version 57 (cf. [bug Firefox 1384030](https://bugzil.la/1384030)).
 
 ### Restreindre les types de fichiers acceptés
 
@@ -175,7 +178,8 @@ Voici le résultat produit :
 
 {{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}
 
-> **Note :** Vous pouvez également consulter cet exemple sur GitHub — [voir le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html).
+> [!NOTE]
+> Vous pouvez également consulter cet exemple sur GitHub — [voir le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html).
 
 Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).
 
@@ -199,7 +203,8 @@ Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il
 
 Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété `HTMLInputElement.files`. On montre aussi quelques astuces.
 
-> **Note :** Le code source complet de cet exemple est disponible sur GitHub — [file-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html) ([voir la démonstration _live_ associée](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.
+> [!NOTE]
+> Le code source complet de cet exemple est disponible sur GitHub — [file-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html) ([voir la démonstration _live_ associée](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.
 
 Tout d'abord, voici le fragment de code HTML utilisé :
 
@@ -298,7 +303,8 @@ var preview = document.querySelector(".preview");
 input.style.opacity = 0;
 ```
 
-> **Note :** La propriété [`opacity`](/fr/docs/Web/CSS/opacity) est utilisée pour masquer l'élément `<input>` plutôt que [`visibility: hidden`](/fr/docs/Web/CSS/visibility) ou [`display: none`](/fr/docs/Web/CSS/display). En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.
+> [!NOTE]
+> La propriété [`opacity`](/fr/docs/Web/CSS/opacity) est utilisée pour masquer l'élément `<input>` plutôt que [`visibility: hidden`](/fr/docs/Web/CSS/visibility) ou [`display: none`](/fr/docs/Web/CSS/display). En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.
 
 Ensuite, on ajoute [un gestionnaire d'évènement](/fr/docs/Web/API/EventTarget/addEventListener) à l'élément `<input>` afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction `updateImageDisplay()` que nous décrirons juste après.
 
diff --git a/files/fr/web/html/element/input/hidden/index.md b/files/fr/web/html/element/input/hidden/index.md
index 59633da37d5972..6247343de51a8c 100644
--- a/files/fr/web/html/element/input/hidden/index.md
+++ b/files/fr/web/html/element/input/hidden/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/input/hidden
 
 Les éléments {{HTMLElement("input")}} de type **`"hidden"`** permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.
 
-> **Note :** La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)
+> [!NOTE]
+> La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)
 
 ## Exemple simple
 
@@ -17,13 +18,15 @@ Les éléments {{HTMLElement("input")}} de type **`"hidden"`** permettent aux d
 
 {{EmbedLiveSample('Exemple_simple', 600, 40)}}
 
-> **Note :** Attention, les évènements DOM [`input`](/fr/docs/Web/API/HTMLElement/input_event) et [`change`](/fr/docs/Web/API/HTMLElement/change_event) ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec `hiddenInput.focus()`).
+> [!NOTE]
+> Attention, les évènements DOM [`input`](/fr/docs/Web/API/HTMLElement/input_event) et [`change`](/fr/docs/Web/API/HTMLElement/change_event) ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec `hiddenInput.focus()`).
 
 ## Valeur
 
 L'attribut [`value`](/fr/docs/Web/HTML/Element/input#value) de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).
 
-> **Attention :** Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type `hidden` ne doit donc pas être utilisé comme mécanisme de sécurité.
+> [!WARNING]
+> Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type `hidden` ne doit donc pas être utilisé comme mécanisme de sécurité.
 
 ## Attributs supplémentaires
 
@@ -59,7 +62,8 @@ Les champs masqués sont également employés afin de stocker des jetons de séc
 
 Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle [Cross Site Request Forgery (CSRF)](https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery)).
 
-> **Note :** Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.
+> [!NOTE]
+> Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.
 
 ## Validation
 
@@ -138,7 +142,8 @@ Le serveur génèrera la page HTML avec l'identifiant `"postID"` qui contient l'
 
 {{EmbedLiveSample('Exemples', '100%', 200)}}
 
-> **Note :** Vous pouvez consulter l'exemple sur GitHub (cf. [le code source](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)).
+> [!NOTE]
+> Vous pouvez consulter l'exemple sur GitHub (cf. [le code source](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)).
 
 Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :
 
diff --git a/files/fr/web/html/element/input/image/index.md b/files/fr/web/html/element/input/image/index.md
index ec6c5420acd531..26be97c782de62 100644
--- a/files/fr/web/html/element/input/image/index.md
+++ b/files/fr/web/html/element/input/image/index.md
@@ -53,7 +53,8 @@ L'attribut `alt` fournit une chaîne de caractères alternative à utiliser si l
 
 Ainsi, si un bouton graphique affiche une image avec une icône ou une image avec un texte "Se connecter", l'attribut `alt` devrait être renseigné avec une valeur comme `Se connecter`.
 
-> **Note :** Bien que l'attribut `alt` soit optionnel sur le plan technique, il devrait en pratique toujours être inclus afin de maximiser l'utilisabilité du contenu.
+> [!NOTE]
+> Bien que l'attribut `alt` soit optionnel sur le plan technique, il devrait en pratique toujours être inclus afin de maximiser l'utilisabilité du contenu.
 
 D'un point de vue fonctionnel, l'attribut `alt` de `<input type="image">` `alt` se comporte de façon analogue à l'attribut [`alt`](/fr/docs/Web/HTML/Element/Img#attr-alt) des éléments [`<img>`](/fr/docs/Web/HTML/Element/Img).
 
diff --git a/files/fr/web/html/element/input/index.md b/files/fr/web/html/element/input/index.md
index 38f18b4ba39de3..6c45433b0b8c35 100644
--- a/files/fr/web/html/element/input/index.md
+++ b/files/fr/web/html/element/input/index.md
@@ -320,13 +320,15 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
   - : Un attribut booléen qui, s'il est présent, indique que le contrôle devrait automatiquement recevoir le focus lorsque le chargement de la page est terminé (ou lorsque l'élément [`<dialog>`](/fr/docs/Web/HTML/Element/dialog) qui contient ce contrôle a été affiché).
 
-    > **Note :** Un élément avec l'attribut `autofocus` pourra recevoir le focus avant le déclenchement de l'évènement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event).
+    > [!NOTE]
+    > Un élément avec l'attribut `autofocus` pourra recevoir le focus avant le déclenchement de l'évènement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event).
 
     Il ne peut pas y avoir plus d'un élément du document avec l'attribut `autofocus`. Si l'attribut est placé sur plus d'un élément, c'est le premier qui reçoit le focus.
 
     L'attribut `autofocus` ne peut pas être utilisé sur les champs de type `hidden`, car ces derniers sont masqués et ne peuvent pas recevoir le focus.
 
-    > **Attention :** Affecter le focus de façon automatique peut être source de confusion pour les personnes qui utilisent des lecteurs d'écran ou qui ont des difficultés cognitives. En effet, avec l'affectation d'`autofocus`, les lecteurs d'écran «&nbsp;téléportent&nbsp;» la personne jusqu'au contrôle, sans avertissement préalable.
+    > [!WARNING]
+    > Affecter le focus de façon automatique peut être source de confusion pour les personnes qui utilisent des lecteurs d'écran ou qui ont des difficultés cognitives. En effet, avec l'affectation d'`autofocus`, les lecteurs d'écran «&nbsp;téléportent&nbsp;» la personne jusqu'au contrôle, sans avertissement préalable.
 
     On fera particulièrement attention à l'accessibilité en appliquant l'attribut `autofocus`. Le focus automatique peut entraîner le défilement de la page au chargement et faire apparaître le clavier logiciel sur certains appareils tactiles. Bien qu'un lecteur d'écran puisse annoncer le libellé du contrôle qui reçoit le focus, il n'annoncera rien avant le libellé. De même, une personne sans déficience visuelle sur un petit écran manquera certainement le contexte créé par le contenu qui précède.
 
@@ -336,7 +338,8 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
   - : Cet attribut booléen est valide pour les types `radio` et `checkbox`. Lorsqu'il est présent sur un contrôle de type `radio`, il indique que ce bouton radio sera celui sélectionné parmi le groupe de boutons radio qui partagent le même nom. Lorsqu'il est présent sur un contrôle de type `checkbox`, il indique que la case est cochée par défaut au chargement de la page. Attention, il _n'indique pas_ que la case est actuellement cochée, si l'état de la case à cocher change, l'attribut ne reflète pas ce changement (seul l'attribut IDL [`HTMLInputElement.checked`](/fr/docs/Web/API/HTMLInputElement) est mis à jour).
 
-    > **Note :** À la différence des autres contrôles de saisie, la valeur d'une case à cocher ou d'un bouton radio est uniquement incluse dans les données envoyées s'ils sont sélectionnés. Si c'est le cas, le nom et la valeur des contrôles sélectionnés sont envoyés.
+    > [!NOTE]
+    > À la différence des autres contrôles de saisie, la valeur d'une case à cocher ou d'un bouton radio est uniquement incluse dans les données envoyées s'ils sont sélectionnés. Si c'est le cas, le nom et la valeur des contrôles sélectionnés sont envoyés.
     >
     > Ainsi, si une case à cocher dont l'attribut `name` vaut `fruit` et dont l'attribut `value` vaut `cerise`, si la case est cochée, les données envoyées avec le formulaire contiendront `fruit=cerise`. Si la case à cocher n'est pas active, elle ne fera pas partie des données envoyées. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut `value` est `on`.
 
@@ -363,7 +366,8 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
     Plus précisément, les champs désactivés ne reçoivent pas les évènements [`click`](/fr/docs/Web/API/Element/click_event) et ne sont pas envoyés avec le formulaire.
 
-    > **Note :** Bien que cela ne soit pas nécessaire selon la spécification, par défaut, Firefox [fera persister l'état désactivé obtenu dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) pour un champ `<input>` même après des rechargements de la page. C'est l'attribut [`autocomplete`](#autocomplete) qui contrôle cette fonctionnalité.
+    > [!NOTE]
+    > Bien que cela ne soit pas nécessaire selon la spécification, par défaut, Firefox [fera persister l'état désactivé obtenu dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) pour un champ `<input>` même après des rechargements de la page. C'est l'attribut [`autocomplete`](#autocomplete) qui contrôle cette fonctionnalité.
 
 - `form`
 
@@ -371,7 +375,8 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
     L'attribut `form` permet ainsi de placer un champ n'importe où dans le document tout en l'associant à un formulaire du document situé autre part.
 
-    > **Note :** Un champ peut uniquement être associé avec un seul formulaire.
+    > [!NOTE]
+    > Un champ peut uniquement être associé avec un seul formulaire.
 
 - `formaction`
   - : Uniquement valide pour les types `image` et `submit`. Voir la page détaillée sur [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit).
@@ -459,7 +464,8 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
     À l'exécution de ce code, `nomInvite` correspondra à l'objet [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) associé au champ `invite`, et de même l'objet `tailleChat` correspondra à l'objet du DOM associé au champ avec le nom `taille-chat`.
 
-    > **Attention :** On évitera de donner aux éléments de formulaire un nom qui correspond à une propriété native du DOM. Cela surchargerait la propriété ou la méthode native pour pointer vers le champ correspondant.
+    > [!WARNING]
+    > On évitera de donner aux éléments de formulaire un nom qui correspond à une propriété native du DOM. Cela surchargerait la propriété ou la méthode native pour pointer vers le champ correspondant.
 
 - `pattern`
 
@@ -467,7 +473,8 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
     Si l'attribut `pattern` est présent mais sans valeur ou que celle-ci est valide, aucune expression rationnelle n'est appliquée et l'attribut est ignoré. Si la valeur de `pattern` est valide et que la valeur du champ ne respecte pas le motif, le champ échouera à [la validation des contraintes](/fr/docs/Web/Guide/HTML/Constraint_validation) et empêchera l'envoi du formulaire.
 
-    > **Note :** En utilisant l'attribut `pattern`, il faut également informer l'utilisatrice ou l'utilisateur quant au format attendu, en ajoutant un texte explicatif à proximité. On peut aussi inclure un attribut [`title`](#title) pour expliquer les contraintes à respecter&nbsp;: la plupart des navigateurs afficheront le titre sous la forme d'une bulle d'information. Attention, une explication visible est nécessaire pour une accessibilité correcte, la bulle d'information fournie par `title` n'est qu'une amélioration secondaire.
+    > [!NOTE]
+    > En utilisant l'attribut `pattern`, il faut également informer l'utilisatrice ou l'utilisateur quant au format attendu, en ajoutant un texte explicatif à proximité. On peut aussi inclure un attribut [`title`](#title) pour expliquer les contraintes à respecter&nbsp;: la plupart des navigateurs afficheront le titre sous la forme d'une bulle d'information. Attention, une explication visible est nécessaire pour une accessibilité correcte, la bulle d'information fournie par `title` n'est qu'une amélioration secondaire.
 
     Voir [la validation côté client](#validation_côté_client) pour plus d'information.
 
@@ -475,7 +482,8 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
   - : Valide pour les champs de type `text`, `search`, `url`, `tel`, `email`, `password`, et `number`, cet attribut est une chaîne de caractères qui fournit une brève indication quant au type d'information attendu dans le champ. Sa valeur devrait être un mot ou une courte phrase qui indique le type de données attendu plutôt qu'une explication ou une consigne. Le texte de cet attribut _ne doit pas_ inclure de retour chariot ou de saut de ligne. Ainsi, si un champ est destiné à la saisie d'un prénom et que le libellé est «&nbsp;Prénom&nbsp;», une valeur appropriée pour cet attribut pourra être `"ex. Mustafa"`.
 
-    > **Note :** Sur le plan sémantique, l'attribut `placeholder` n'est pas aussi utile que d'autres méthodes pour expliquer le formulaire. Il peut aussi causer certains problèmes inattendus avec le contenu. Voir [les libellés](#libellés) pour plus d'informations.
+    > [!NOTE]
+    > Sur le plan sémantique, l'attribut `placeholder` n'est pas aussi utile que d'autres méthodes pour expliquer le formulaire. Il peut aussi causer certains problèmes inattendus avec le contenu. Voir [les libellés](#libellés) pour plus d'informations.
 
 - `popovertarget`
 
@@ -523,7 +531,8 @@ Certains attributs non-standard supplémentaires sont listés après les descrip
 
     Ainsi, si on a `<input type="number" min="10" step="2">`, tout entier pair, supérieur ou égal à `10` sera valide. Si `step` est absent, par exemple avec `<input type="number">`, tous les nombres entiers seront valides mais les nombres décimaux (comme `4.2`) seront invalides, car la valeur par défaut de `step` vaut `1` pour le type `number`. Afin que `4.2` soit valide, on devra utiliser la valeur `any`, ou `0.1`, ou `0.2` pour l'attribut `step`, ou encore une valeur de `min` dont la partie fractionnaire vaut `.2`, par exemple `<input type="number" min="-5.2">`
 
-    > **Note :** Lorsque la donnée saisie ne respecte pas l'incrément, la valeur est considérée comme invalide pour la validation des contraintes et l'élément sera ciblé par la pseudo-classe `:invalid`.
+    > [!NOTE]
+    > Lorsque la donnée saisie ne respecte pas l'incrément, la valeur est considérée comme invalide pour la validation des contraintes et l'élément sera ciblé par la pseudo-classe `:invalid`.
 
     Voir [la validation côté client](#validation_côté_client) pour plus d'information.
 
@@ -854,11 +863,13 @@ L'attribut [`placeholder`](#placeholder) permet d'indiquer un texte qui apparaî
 
 Le texte fourni par `placeholder` n'est pas accessible pour les lecteurs d'écran et dès que la personne saisit une valeur, ou si le contrôle a déjà une valeur, il disparaît. Les navigateurs qui ont une fonctionnalité de traduction automatique pourraient ignorer les attributs lors de la traduction, ce qui signifie que `placeholder` pourrait ne pas être traduit.
 
-> **Note :** Évitez d'utiliser [`placeholder`](#placeholder) si vous pouvez. Pour ajouter un libellé sur un élément `<input>`, on utilisera l'élément [`<label>`](/fr/docs/Web/HTML/Element/Label).
+> [!NOTE]
+> Évitez d'utiliser [`placeholder`](#placeholder) si vous pouvez. Pour ajouter un libellé sur un élément `<input>`, on utilisera l'élément [`<label>`](/fr/docs/Web/HTML/Element/Label).
 
 ### Validation côté client
 
-> **Attention :** La validation côté client est utile mais _ne garantit pas_ que le serveur reçoit des données valides. Si les données doivent respecter un format donné, il faudra _toujours_ les vérifier côté serveur et renvoyer [une réponse HTTP `400`](/fr/docs/Web/HTTP/Status/400) si le format est invalide.
+> [!WARNING]
+> La validation côté client est utile mais _ne garantit pas_ que le serveur reçoit des données valides. Si les données doivent respecter un format donné, il faudra _toujours_ les vérifier côté serveur et renvoyer [une réponse HTTP `400`](/fr/docs/Web/HTTP/Status/400) si le format est invalide.
 
 En complément des pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) qui permettent de cibler les contrôles selon leur état de validité, le navigateur fournit une validation côté client pour chaque tentative d'envoi du formulaire. À l'envoi du formulaire, si un des contrôles échoue à respecter les contraintes, les navigateurs qui implémentent cette fonctionnalité afficheront un message d'erreur sur le premier contrôle du formulaire qui est invalide, le message pouvant être un message par défaut selon le type d'erreur ou un message choisi par le site.
 
@@ -1017,7 +1028,8 @@ En résumé&nbsp;:
 - Ainsi, si la valeur du champ est invalide lorsqu'on clique sur le bouton d'envoi, un des messages spécifiques est affiché.
 - Si la valeur est valide, le formulaire est envoyé sans problème. Pour cela, il faut annuler la vérification de validité spécifique en appelant `setCustomValidity()` avec une chaîne de caractères vide. C'est ce qu'on fait à chaque fois qu'un évènement `input` est déclenché. Sans ça, si une validité spécifique avait précédemment été définie, le champ serait toujours considéré comme invalide, même si la valeur courante était valide lors de l'envoi.
 
-> **Note :** On veillera à toujours valider les contraintes côté client et côté serveur. La validation des contraintes du navigateur ne se substitue pas à la vérification côté serveur. En effet, des valeurs invalides peuvent toujours être envoyées par des navigateurs obsolètes ou par des acteurs malveillants.
+> [!NOTE]
+> On veillera à toujours valider les contraintes côté client et côté serveur. La validation des contraintes du navigateur ne se substitue pas à la vérification côté serveur. En effet, des valeurs invalides peuvent toujours être envoyées par des navigateurs obsolètes ou par des acteurs malveillants.
 
 ### Localisation
 
diff --git a/files/fr/web/html/element/input/month/index.md b/files/fr/web/html/element/input/month/index.md
index 5e97e464773cd7..96440d54dfaf4c 100644
--- a/files/fr/web/html/element/input/month/index.md
+++ b/files/fr/web/html/element/input/month/index.md
@@ -105,7 +105,8 @@ Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut
 
 Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. La valeur de l'attribut `value` peut toutefois être modifiée grâce à du code JavaScript, qui changerait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura aucun effet si l'attribut `readonly` est défini.
+> [!NOTE]
+> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura aucun effet si l'attribut `readonly` est défini.
 
 ### `step`
 
@@ -113,7 +114,8 @@ L'attribut `step` est un nombre qui indique le «&nbsp;pas&nbsp;» suivi par le
 
 Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide.
 
-> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
+> [!NOTE]
+> Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
 
 Pour les champs `month`, la valeur de l'attribut `step` est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1.
 
@@ -227,7 +229,8 @@ input:valid + span:after {
 }
 ```
 
-> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour la personne naviguant le site de modifier le code HTML ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
+> [!WARNING]
+> Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour la personne naviguant le site de modifier le code HTML ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
 ## Gérer la prise en charge des navigateurs
 
@@ -423,7 +426,8 @@ function populateYears() {
 }
 ```
 
-> **Note :** Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia](https://fr.wikipedia.org/wiki/Numérotation_ISO_des_semaines#Années_longues)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
+> [!NOTE]
+> Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia](https://fr.wikipedia.org/wiki/Numérotation_ISO_des_semaines#Années_longues)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/element/input/number/index.md b/files/fr/web/html/element/input/number/index.md
index 29516160323543..e188c390de408e 100644
--- a/files/fr/web/html/element/input/number/index.md
+++ b/files/fr/web/html/element/input/number/index.md
@@ -11,7 +11,8 @@ Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémente
 
 {{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}
 
-> **Note :** Si un navigateur ne prend pas en charge le type `number`, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. [`text`](/fr/docs/Web/HTML/Element/Input/text)).
+> [!NOTE]
+> Si un navigateur ne prend pas en charge le type `number`, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. [`text`](/fr/docs/Web/HTML/Element/Input/text)).
 
 <table class="properties">
   <tbody>
@@ -75,13 +76,15 @@ L'attribut `placeholder` est une chaîne de caractères fournissant une courte i
 
 Si le contenu du contrôle respecte une directionnalité donnée ([LTR](/fr/docs/Glossary/ltr) ou [RTL](/fr/docs/Glossary/rtl)) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode — voir [Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus de détails.
 
-> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
+> [!NOTE]
+> On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
 
 ### `readonly`
 
 Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript, qui définirait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
+> [!NOTE]
+> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
 
 ### `step`
 
@@ -89,7 +92,8 @@ L'attribut `step` est un nombre qui définit la granularité de la valeur ou le
 
 Lorsque la chaîne de caractères `any` est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre `min` et `max`) est valide.
 
-> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants).
+> [!NOTE]
+> Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants).
 
 Pour les champs de type `number`, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a `min` qui vaut -10 et `value` qui vaut 1.5, si on a `step` qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,…, -0.5, -1.5, -2.5,… seront valides.
 
@@ -97,9 +101,11 @@ Pour les champs de type `number`, l'incrément par défaut est 1 et ne permet do
 
 Les éléments `<input type="number">` simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique inclura des boutons avec des curseurs pour augmenter/réduire la valeur.
 
-> **Attention :** On notera qu'une utilisatrice ou un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir [le bug 1398528](https://bugzilla.mozilla.org/show_bug.cgi?id=1398528)).
+> [!WARNING]
+> On notera qu'une utilisatrice ou un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir [le bug 1398528](https://bugzilla.mozilla.org/show_bug.cgi?id=1398528)).
 
-> **Note :** Il est important de rappeler qu'une utilisatrice ou un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.
+> [!NOTE]
+> Il est important de rappeler qu'une utilisatrice ou un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.
 
 De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisatrice ou l'utilisateur appuie sur un tel contrôle.
 
@@ -116,7 +122,8 @@ Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numér
 
 Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) est utilisé, la valeur vide n'est plus considérée valide.
 
-> **Note :** N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté [comme un nombre à virgule flottante](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number) (autrement dit, un nombre qui n'est pas [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) ou [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity)).
+> [!NOTE]
+> N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté [comme un nombre à virgule flottante](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number) (autrement dit, un nombre qui n'est pas [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) ou [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity)).
 
 ### Indicateurs de saisie — <i lang="en">placeholders</i>
 
@@ -268,7 +275,8 @@ input:valid + span:after {
 
 Ici, on a utilisé les pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:valid`](/fr/docs/Web/CSS/:valid) afin d'afficher une icône selon le cas, à côté de l'élément [`<span>`](/fr/docs/Web/HTML/Element/span) adjacent. On utilise un élément `<span>` séparé pour plus de flexibilité&nbsp;: certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date#validation)).
 
-> **Attention :** la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisatrice ou l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).
+> [!WARNING]
+> La validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisatrice ou l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).
 
 ### Utilisation d'un motif de validation
 
@@ -392,7 +400,8 @@ switchBtn.addEventListener("click", function () {
 
 Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettra à jour les valeurs affichées lorsque l'utilisatrice ou l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle).
 
-> **Note :** Lorsqu'on clique sur le bouton, on retire l'attribut `required` du champ de saisie masqué et on vide l'attribut `value` afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné.
+> [!NOTE]
+> Lorsqu'on clique sur le bouton, on retire l'attribut `required` du champ de saisie masqué et on vide l'attribut `value` afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/element/input/password/index.md b/files/fr/web/html/element/input/password/index.md
index 39ce8a3b6060d3..6e634592f146ee 100644
--- a/files/fr/web/html/element/input/password/index.md
+++ b/files/fr/web/html/element/input/password/index.md
@@ -13,7 +13,8 @@ Un tel élément se présente comme un contrôle de saisie de texte sur une lign
 
 La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisatrice ou l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et virtuel, on peut éviter de faire trop d'erreurs.
 
-> **Note :** Les différents formulaires qui permettent d'envoyer des données sensibles (telles que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisatrice ou l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article [mots de passe non sécurisés](/fr/docs/Web/Security/Insecure_passwords) pour Firefox).
+> [!NOTE]
+> Les différents formulaires qui permettent d'envoyer des données sensibles (telles que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisatrice ou l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article [mots de passe non sécurisés](/fr/docs/Web/Security/Insecure_passwords) pour Firefox).
 
 <table class="properties">
   <tbody>
@@ -46,7 +47,8 @@ La valeur de l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) d'
 
 Si l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section [Validation](#validation) ci-après.
 
-> **Note :** Il n'est pas possible d'utiliser les caractères de fin de ligne (<i lang="en">line feed</i>) (code U+000A) et de retour chariot (<i lang="en">carriage return</i>) (code U+000D) dans la valeur d'un champ `password`. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.
+> [!NOTE]
+> Il n'est pas possible d'utiliser les caractères de fin de ligne (<i lang="en">line feed</i>) (code U+000A) et de retour chariot (<i lang="en">carriage return</i>) (code U+000D) dans la valeur d'un champ `password`. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.
 
 ## Attributs supplémentaires
 
@@ -70,7 +72,8 @@ L'attribut `pattern` est une expression rationnelle que doit respecter la valeur
 
 Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.
 
-> **Note :** L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.
+> [!NOTE]
+> L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.
 
 Voir [la section sur l'utilisation de cet attribut ci-après](#validation) pour plus d'exemples.
 
@@ -82,13 +85,15 @@ L'attribut `placeholder` est une chaîne de caractères fournissant une courte i
 
 Si le contenu du contrôle respecte une directionnalité donnée ([LTR](/fr/docs/Glossary/ltr) ou [RTL](/fr/docs/Glossary/rtl)) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode — voir [Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus de détails.
 
-> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
+> [!NOTE]
+> On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
 
 ### `readonly`
 
 Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript, qui définirait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
+> [!NOTE]
+> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
 
 ### `size`
 
diff --git a/files/fr/web/html/element/input/radio/index.md b/files/fr/web/html/element/input/radio/index.md
index aa8c48e8e853fe..75b845fbe6b180 100644
--- a/files/fr/web/html/element/input/radio/index.md
+++ b/files/fr/web/html/element/input/radio/index.md
@@ -58,7 +58,8 @@ Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les d
 
 Si l'attribut `value` n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera `on` pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu `"contact=on"` ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs `value` !
 
-> **Note :** Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.
+> [!NOTE]
+> Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.
 
 Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut `checked` sur l'un des boutons afin d'avoir une option sélectionnée par défaut.
 
@@ -164,7 +165,8 @@ Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut b
 
 Ici, c'est le premier bouton radio qui sera sélectionné par défaut.
 
-> **Note :** Si l'attribut `checked` est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.
+> [!NOTE]
+> Si l'attribut `checked` est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.
 
 ### Fournir une plus grande zone de sélection
 
diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md
index f61a2885c94573..dbc3fcb487ab3d 100644
--- a/files/fr/web/html/element/input/range/index.md
+++ b/files/fr/web/html/element/input/range/index.md
@@ -96,7 +96,8 @@ L'attribut `step` est un nombre qui définit la granularité à laquelle la vale
 
 Si cet attribut utilise la chaîne de caractère `any`, cela signifie qu'il n'y a aucune contrainte d'incrément et que toute valeur est autorisée (sous réserve de respecter les autres contraintes, comme celles indiquées par [`min`](#min) et [`max`](#max)).
 
-> **Note :** Lorsque les données saisies dans le contrôle ne respectent pas l'incrément, [l'agent utilisateur](/fr/docs/Glossary/User_agent) pourra arrondir à la valeur valide la plus proche, en privilégiant les nombres les plus grands si les deux options valides environnantes sont à égale distance.
+> [!NOTE]
+> Lorsque les données saisies dans le contrôle ne respectent pas l'incrément, [l'agent utilisateur](/fr/docs/Glossary/User_agent) pourra arrondir à la valeur valide la plus proche, en privilégiant les nombres les plus grands si les deux options valides environnantes sont à égale distance.
 
 Par défaut, l'incrément utilisé pour les champs de type `range` vaut 1 et on ne peut alors saisir que des entiers à moins que la valeur de base ne soit pas entière. Ainsi, si on définit `min` avec -10 et `value` avec 1.5, un attribut `step` qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.
 
@@ -108,7 +109,8 @@ Voir [l'attribut HTML `step`](/fr/docs/Web/HTML/Attributes/step).
 
 Semblable à la propriété CSS non-standard `moz-orient` qui agit sur les éléments [`<progress>`](/fr/docs/Web/HTML/Element/Progress) et [`<meter>`](/fr/docs/Web/HTML/Element/Meter), l'attribut `orient` définit l'orientation de la piste pour le contrôle d'intervalle. Les valeurs possibles incluent `horizontal` pour un affichage horizontal et `vertical` pour un affichage vertical.
 
-> **Note :** Les attributs suivants ne s'appliquent pas aux contrôles d'intervalle (`<input type="range">`)&nbsp;: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src`, et `width`. Si l'un de ces attributs est inclus, il sera ignoré.
+> [!NOTE]
+> Les attributs suivants ne s'appliquent pas aux contrôles d'intervalle (`<input type="range">`)&nbsp;: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src`, et `width`. Si l'un de ces attributs est inclus, il sera ignoré.
 
 ## Exemples
 
@@ -307,7 +309,8 @@ Il est possible d'ajouter des étiquettes grâce à l'attribut [`label`](/fr/doc
   </tbody>
 </table>
 
-> **Note :** Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) est mis en forme avec CSS et [`display`](/fr/docs/Web/CSS/display)`: none;`, ce qui le masque.
+> [!NOTE]
+> Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) est mis en forme avec CSS et [`display`](/fr/docs/Web/CSS/display)`: none;`, ce qui le masque.
 
 ### Créer des contrôles d'intervalle verticaux
 
diff --git a/files/fr/web/html/element/input/reset/index.md b/files/fr/web/html/element/input/reset/index.md
index 38b60d1ce7f0b6..e449922cdcefe0 100644
--- a/files/fr/web/html/element/input/reset/index.md
+++ b/files/fr/web/html/element/input/reset/index.md
@@ -9,7 +9,8 @@ Les éléments {{HTMLElement("input")}} de type **`"reset"`** sont affichés sou
 
 {{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
 
-> **Note :** Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.
+> [!NOTE]
+> Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.
 
 ## Valeur
 
@@ -79,7 +80,8 @@ Dans cet exemple, on utilise la touche <kbd>r</kbd> (il faudra donc appuyer sur
 
 {{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}
 
-> **Note :** Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le _design_ du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.
+> [!NOTE]
+> Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le _design_ du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.
 
 ### Désactiver/Activer un bouton
 
@@ -91,9 +93,11 @@ Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribu
 
 On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut `disabled` pour la passer de `true` à `false` et _vice versa_ (par exemple avec une instruction telle que `btn.disabled = true`).
 
-> **Note :** Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton).
+> [!NOTE]
+> Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton).
 
-> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/button#autocomplete) peut être utilisé afin de contrôler cette fonctionnalité.
+> [!NOTE]
+> À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/button#autocomplete) peut être utilisé afin de contrôler cette fonctionnalité.
 
 ## Validation
 
diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md
index 5cd9685fa85dc8..16a4e60bb430bf 100644
--- a/files/fr/web/html/element/input/search/index.md
+++ b/files/fr/web/html/element/input/search/index.md
@@ -80,7 +80,8 @@ L'attribut `pattern`, lorsqu'il est utilisé, est une expression rationnelle qui
 
 Si aucune expression rationnelle n'est fournie ou que celle-ci est invalide, aucune contrainte de format ne sera appliquée et cet attribut sera ignoré complètement.
 
-> **Note :** On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ.
+> [!NOTE]
+> On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ.
 
 Voir la section [Indiquer un motif](#indiquer_un_motif) pour plus de détails et un exemple.
 
@@ -90,13 +91,15 @@ L'attribut `placeholder` est une chaîne de caractères qui fournit une indicati
 
 Si le contenu du contrôle utilise une direction (écriture de gauche à droite ou de droite à gauche), mais que le texte indicatif doit être présenté dans la direction inverse, vous pouvez utiliser des caractères de formatage pour l'algorithme bidirectionnel Unicode dans la valeur. Voir [Comment utiliser des contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus d'informations.
 
-> **Note :** On évitera d'utiliser l'attribut `placeholder` si possible. Il n'est pas aussi utile que d'autres sur le plan sémantique pour expliquer le formulaire et il peut causer des problèmes techniques avec le contenu. Voir [L'utilisation de libellés et de textes indicatifs](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
+> [!NOTE]
+> On évitera d'utiliser l'attribut `placeholder` si possible. Il n'est pas aussi utile que d'autres sur le plan sémantique pour expliquer le formulaire et il peut causer des problèmes techniques avec le contenu. Voir [L'utilisation de libellés et de textes indicatifs](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
 
 ### `readonly`
 
 Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité dans le formulaire. La valeur du champ (portée par l'attribut `value`) peut toutefois être modifiée par du code JavaScript, qui changerait la propriété `value` rattachée à l'interface [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué.
+> [!NOTE]
+> Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué.
 
 ### `size`
 
@@ -175,7 +178,8 @@ Cet exemple produira le résultat suivant&nbsp;:
 
 `q` est la valeur la plus communément utilisée pour l'attribut `name` des champs de recherche mais cette valeur spécifique n'est pas obligatoire. Lorsque le formulaire est envoyé, les données envoyées au serveur auront la forme `q=termederecherche`.
 
-> **Note :** Il est toujours nécessaire de fournir une valeur pour l'attribut [`name`](/fr/docs/Web/HTML/Element/Input#attr-name), sinon aucune valeur ne sera envoyée.
+> [!NOTE]
+> Il est toujours nécessaire de fournir une valeur pour l'attribut [`name`](/fr/docs/Web/HTML/Element/Input#attr-name), sinon aucune valeur ne sera envoyée.
 
 ### Différences entre les champs de recherche et les champs texte
 
@@ -239,7 +243,8 @@ Voici le résultat obtenu grâce à ce fragment HTML&nbsp;:
 
 Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.
 
-> **Note :** Voir [Panneaux/points de repère](/fr/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.
+> [!NOTE]
+> Voir [Panneaux/points de repère](/fr/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.
 
 ### Paramétrer la taille physique
 
@@ -267,7 +272,8 @@ On obtient une boîte de recherche plus large qu'auparavant&nbsp;:
 
 Les éléments `<input>` de type `search` possèdent les mêmes fonctionnalités de validation que les éléments `<input type="text">`. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.
 
-> **Note :** Attention, la validation des données d'un formulaire de recherche HTML par le client _ne doit pas remplacer_ la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.
+> [!NOTE]
+> Attention, la validation des données d'un formulaire de recherche HTML par le client _ne doit pas remplacer_ la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.
 
 ### Une note sur la mise en forme
 
diff --git a/files/fr/web/html/element/input/submit/index.md b/files/fr/web/html/element/input/submit/index.md
index b8d2c7f14f392c..2111547d5affe6 100644
--- a/files/fr/web/html/element/input/submit/index.md
+++ b/files/fr/web/html/element/input/submit/index.md
@@ -148,7 +148,8 @@ Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit
 
 {{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}
 
-> **Note :** Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.
+> [!NOTE]
+> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.
 
 ### Activer et désactiver un bouton d'envoi
 
@@ -160,9 +161,11 @@ Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen un
 
 Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM `disabled` avec la valeur `true` ou `false` en JavaScript (avec une instruction similaire à `btn.disabled = true`).
 
-> **Note :** Voir la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton) pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.
+> [!NOTE]
+> Voir la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton) pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.
 
-> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/button#autocomplete) peut être utilisé afin de contrôler cette fonctionnalité.
+> [!NOTE]
+> À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/button#autocomplete) peut être utilisé afin de contrôler cette fonctionnalité.
 
 ## Validation
 
diff --git a/files/fr/web/html/element/input/tel/index.md b/files/fr/web/html/element/input/tel/index.md
index b2b7aee569254a..8d28a2d94cf343 100644
--- a/files/fr/web/html/element/input/tel/index.md
+++ b/files/fr/web/html/element/input/tel/index.md
@@ -11,7 +11,8 @@ Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `typ
 
 Bien que les champs de saisie de numéro de téléphone soient fonctionnellement identiques aux champs de saisie textuels (`<input type="text">`), ils permettent, notamment pour les navigateurs mobiles, de présenter un clavier optimisé pour la saisie d'un numéro de téléphone. L'utilisation d'un tel champ permet également d'appliquer une validation personnalisée de façon ciblée.
 
-> **Note :** Les navigateurs qui ne prennent pas en charge le type `tel` utiliseront à la place un contrôle [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text).
+> [!NOTE]
+> Les navigateurs qui ne prennent pas en charge le type `tel` utiliseront à la place un contrôle [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text).
 
 ## Résumé technique
 
@@ -82,7 +83,8 @@ L'attribut `pattern`, lorsqu'il est utilisé, est une expression rationnelle qui
 
 Si aucune expression rationnelle n'est fournie ou que celle-ci est invalide, aucune contrainte de format ne sera appliquée et cet attribut sera ignoré complètement.
 
-> **Note :** On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ.
+> [!NOTE]
+> On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ.
 
 Voir [Utiliser un format particulier](#utiliser_un_format_particulier) pour plus de détails et un exemple.
 
@@ -92,13 +94,15 @@ L'attribut `placeholder` est une chaîne de caractères qui fournit une indicati
 
 Si le contenu du contrôle utilise une direction (écriture de gauche à droite ou de droite à gauche), mais que le texte indicatif doit être présenté dans la direction inverse, vous pouvez utiliser des caractères de formatage pour l'algorithme bidirectionnel Unicode dans la valeur. Voir [comment utiliser des contrôles Unicode pour le texte bidirectionnel](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus d'informations.
 
-> **Note :** On évitera d'utiliser l'attribut `placeholder` si possible. Il n'est pas aussi utile que d'autres sur le plan sémantique pour expliquer le formulaire et il peut causer des problèmes techniques avec le contenu. Voir [Utilisation de libellés et de textes indicatifs](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
+> [!NOTE]
+> On évitera d'utiliser l'attribut `placeholder` si possible. Il n'est pas aussi utile que d'autres sur le plan sémantique pour expliquer le formulaire et il peut causer des problèmes techniques avec le contenu. Voir [Utilisation de libellés et de textes indicatifs](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations.
 
 ### `readonly`
 
 Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité dans le formulaire. La valeur du champ (portée par l'attribut `value`) peut toutefois être modifiée par du code JavaScript, qui changerait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué.
+> [!NOTE]
+> Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué.
 
 ### `size`
 
@@ -131,7 +135,8 @@ Les valeurs autorisées sont&nbsp;: `go`, `done`, `next`, `search`, et `send`. L
 
 Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'une utilisatrice ou un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.
 
-> **Note :** Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. [Validation](#validation) ci-après).
+> [!NOTE]
+> Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. [Validation](#validation) ci-après).
 
 ### Claviers adaptés
 
@@ -198,7 +203,8 @@ Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de larg
 
 {{EmbedLiveSample("", 600, 40)}}
 
-> **Note :** Ces deux attributs jouent un rôle lors de la [validation](#validation). Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.
+> [!NOTE]
+> Ces deux attributs jouent un rôle lors de la [validation](#validation). Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.
 
 ### Fournir une valeur par défaut
 
@@ -235,7 +241,8 @@ Avec l'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) contenant ce
 
 Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.
 
-> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
+> [!WARNING]
+> Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
 ### Rendre la valeur obligatoire
 
diff --git a/files/fr/web/html/element/input/text/index.md b/files/fr/web/html/element/input/text/index.md
index ea355f8af7d2f0..ac86edfd28df93 100644
--- a/files/fr/web/html/element/input/text/index.md
+++ b/files/fr/web/html/element/input/text/index.md
@@ -90,7 +90,8 @@ L'attribut `pattern` est une expression rationnelle que doit respecter la valeur
 
 Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.
 
-> **Note :** L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.
+> [!NOTE]
+> L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.
 
 Voir [la section sur l'utilisation d'un motif de validation](#utiliser_un_motif_de_validation) pour plus de détails et un exemple.
 
@@ -100,13 +101,15 @@ L'attribut `placeholder` est une chaîne de caractères fournissant une courte i
 
 Si le contenu du contrôle respecte une directionnalité donnée ([LTR](/fr/docs/Glossary/ltr) ou [RTL](/fr/docs/Glossary/rtl)) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode — voir [Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus d'informations.
 
-> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire, et car il peut causer certains problèmes avec le contenu. Voir la section [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) de [la page sur l'élément `<input>`](/fr/docs/Web/HTML/Element/Input) pour plus d'informations.
+> [!NOTE]
+> On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire, et car il peut causer certains problèmes avec le contenu. Voir la section [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) de [la page sur l'élément `<input>`](/fr/docs/Web/HTML/Element/Input) pour plus d'informations.
 
 ### `readonly`
 
 Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript qui définirait la propriété `value` rattachée à l'interface [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
+> [!NOTE]
+> Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
 
 ### `size`
 
@@ -227,7 +230,8 @@ La taille physique du champ de saisie peut être adaptée grâce à l'attribut [
 
 Les éléments `<input>` de type `text` ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.
 
-> **Note :** La validation des données de formulaire HTML _ne doit pas_ remplacer des scripts de vérification côté serveur. En effet, il est très facile à modifier le code HTML du site pour outrepasser ou même désactiver les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur sans passer par le formulaire. Si votre serveur ne valide pas les données reçues, des données potentiellement mal formatées (ou trop abondantes, du mauvais type et ainsi de suite) pourraient causer des dommages à votre base de données.
+> [!NOTE]
+> La validation des données de formulaire HTML _ne doit pas_ remplacer des scripts de vérification côté serveur. En effet, il est très facile à modifier le code HTML du site pour outrepasser ou même désactiver les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur sans passer par le formulaire. Si votre serveur ne valide pas les données reçues, des données potentiellement mal formatées (ou trop abondantes, du mauvais type et ainsi de suite) pourraient causer des dommages à votre base de données.
 
 ### Un aparté sur la mise en forme
 
@@ -354,7 +358,8 @@ Voici le résultat qui est alors obtenu&nbsp;:
 
 Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères.
 
-> **Note :** Si on indique `minlength` mais pas `required`, la valeur saisie est considérée comme valide car l'utilisatrice ou l'utilisateur peut ne pas saisir de valeur.
+> [!NOTE]
+> Si on indique `minlength` mais pas `required`, la valeur saisie est considérée comme valide car l'utilisatrice ou l'utilisateur peut ne pas saisir de valeur.
 
 ### Utiliser un motif de validation
 
diff --git a/files/fr/web/html/element/input/time/index.md b/files/fr/web/html/element/input/time/index.md
index 5a74f9a07d73ca..129c5e113fc766 100644
--- a/files/fr/web/html/element/input/time/index.md
+++ b/files/fr/web/html/element/input/time/index.md
@@ -144,7 +144,8 @@ Lorsqu'un formulaire contenant un champ `time` est envoyé, la valeur est encod
 
 En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de type `time` gèrent les attributs suivants.
 
-> **Note :** À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine **périodique**. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique `min` avec la valeur `14:00` et `max` avec la valeur `2:00`, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant. Pour plus de détails, voir la section [avoir un minimum et un maximum autour de minuit](#avoir_un_minimum_et_un_maximum_autour_de_minuit).
+> [!NOTE]
+> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine **périodique**. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique `min` avec la valeur `14:00` et `max` avec la valeur `2:00`, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant. Pour plus de détails, voir la section [avoir un minimum et un maximum autour de minuit](#avoir_un_minimum_et_un_maximum_autour_de_minuit).
 
 ### `list`
 
@@ -162,7 +163,8 @@ Une chaîne de caractères, au format `hh:mm`, qui indique l'heure la plus tôt
 
 Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. La valeur de l'attribut `value` peut, toutefois, être modifiée avec du code JavaScript qui modifierait la valeur de la propriété `value` sur l'objet [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Puisqu'un champ en lecture seule ne peut pas avoir de valeur, `required` n'a pas d'effet sur les champs qui ont également `readonly` présent.
+> [!NOTE]
+> Puisqu'un champ en lecture seule ne peut pas avoir de valeur, `required` n'a pas d'effet sur les champs qui ont également `readonly` présent.
 
 ### `step`
 
@@ -170,7 +172,8 @@ L'attribut `step` est un nombre qui définit la granularité à laquelle la vale
 
 Si cet attribut utilise la chaîne de caractère `any`, cela signifie qu'il n'y a aucune contrainte d'incrément et que toute valeur est autorisée (sous réserve de respecter les autres contraintes, comme celles indiquées par [`min`](#min) et [`max`](#max)).
 
-> **Note :** Lorsque les données saisies dans le contrôle ne respectent pas l'incrément, [l'agent utilisateur](/fr/docs/Glossary/User_agent) pourra arrondir à la valeur valide la plus proche, en privilégiant les nombres les plus grands si les deux options valides environnantes sont à égale distance.
+> [!NOTE]
+> Lorsque les données saisies dans le contrôle ne respectent pas l'incrément, [l'agent utilisateur](/fr/docs/Glossary/User_agent) pourra arrondir à la valeur valide la plus proche, en privilégiant les nombres les plus grands si les deux options valides environnantes sont à égale distance.
 
 Pour les champs de type `time`, la valeur de l'attribut `step` est exprimée en secondes (avec un facteur de multiplication de `1000` puisque la valeur numérique sous-jacente est exprimée en millisecondes). Par défaut, la valeur de l'incrément est `60`, ce qui correspond à 1 minute.
 
@@ -199,7 +202,8 @@ Dans sa forme la plus simple, `<input type="time">` n'est accompagné que d'un 
 
 L'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs.
 
-> **Note :** L'effet de cette propriété peut être étrange selon les navigateurs, elle n'est donc pas complètement fiable.
+> [!NOTE]
+> L'effet de cette propriété peut être étrange selon les navigateurs, elle n'est donc pas complètement fiable.
 
 La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à-dire 1 minute), le contrôle `time` affichera alors une troisième section pour les secondes après les heures et les minutes&nbsp;:
 
@@ -218,7 +222,8 @@ Pour Firefox, il n'y a pas de flèches et `step` n'est pas utilisé. Toutefois,
 
 Cet attribut ne semble pas avoir d'effet pour Edge.
 
-> **Note :** L'utilisation de `step` semble causer des problèmes de validation (voir la section qui suit).
+> [!NOTE]
+> L'utilisation de `step` semble causer des problèmes de validation (voir la section qui suit).
 
 ## Validation
 
@@ -325,7 +330,8 @@ Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec u
 
 {{EmbedLiveSample('', 600, 120)}}
 
-> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
+> [!WARNING]
+> Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
 ## Gérer la prise en charge des navigateurs
 
diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md
index 5b5302f44bb50b..41962290843679 100644
--- a/files/fr/web/html/element/input/url/index.md
+++ b/files/fr/web/html/element/input/url/index.md
@@ -11,7 +11,8 @@ Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `typ
 
 La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) sont appliquées automatiquement selon le cas de figure.
 
-> **Note :** Les navigateurs qui ne prennent pas en charge le type `url` utiliseront à la place un élément [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text).
+> [!NOTE]
+> Les navigateurs qui ne prennent pas en charge le type `url` utiliseront à la place un élément [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text).
 
 <table class="properties">
   <tbody>
@@ -81,7 +82,8 @@ L'attribut `pattern`, lorsqu'il est utilisé, est une expression rationnelle qui
 
 Si aucune expression rationnelle n'est fournie ou que celle-ci est invalide, aucune contrainte de format ne sera appliquée et cet attribut sera ignoré complètement.
 
-> **Note :** On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ.
+> [!NOTE]
+> On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ.
 
 Voir [la section ci-après sur le format](#utiliser_un_format_particulier) pour plus de détails et d'exemples.
 
@@ -89,7 +91,8 @@ Voir [la section ci-après sur le format](#utiliser_un_format_particulier) pour
 
 Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité dans le formulaire. La valeur du champ (portée par l'attribut `value`) peut toutefois être modifiée par du code JavaScript, qui changerait la propriété `value` rattachée à l'interface [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué.
+> [!NOTE]
+> Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué.
 
 ### `size`
 
@@ -139,7 +142,8 @@ Lorsqu'on crée un champ avec un attribut `type` qui vaut `url`, on obtient une
 
 Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien. Seule une vérification de format est effectuée.
 
-> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
+> [!WARNING]
+> Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
 ### Un simple champ
 
@@ -203,7 +207,8 @@ Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractèr
 
 {{EmbedLiveSample("", 600, 40)}}
 
-> **Note :** Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle sera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec `maxlength`.
+> [!NOTE]
+> Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle sera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec `maxlength`.
 
 ### Fournir des valeurs par défaut
 
@@ -259,7 +264,8 @@ Il est aussi possible d'inclure des attributs [`label`](/fr/docs/Web/HTML/Elemen
 
 Il existe deux niveaux de validation pour les contrôles de type `url`. Tout d'abord, le contrôle natif, toujours présent qui s'assure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.
 
-> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
+> [!WARNING]
+> Il est également important de vérifier le format de la valeur saisie côté serveur&nbsp;! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
 ### Validation simple
 
@@ -355,7 +361,8 @@ Il est conseillé d'utiliser l'attribut [`title`](/fr/docs/Web/HTML/Global_attri
 
 C'est pourquoi nous avons écrit «&nbsp;L'URL doit être sur le domaine maboite&nbsp;» qui est plus détaillé.
 
-> **Note :** Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.
+> [!NOTE]
+> Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.
 
 ## Exemples
 
diff --git a/files/fr/web/html/element/input/week/index.md b/files/fr/web/html/element/input/week/index.md
index 3a240772c6b3f7..7cdee8ef207ee8 100644
--- a/files/fr/web/html/element/input/week/index.md
+++ b/files/fr/web/html/element/input/week/index.md
@@ -97,7 +97,8 @@ Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut
 
 Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. La valeur de l'attribut `value` peut, toutefois, être modifiée avec du code JavaScript qui modifierait la valeur de la propriété `value` de l'objet [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement).
 
-> **Note :** Puisqu'un champ en lecture seule ne peut pas avoir de valeur, `required` n'a pas d'effet sur les champs qui ont également `readonly` présent.
+> [!NOTE]
+> Puisqu'un champ en lecture seule ne peut pas avoir de valeur, `required` n'a pas d'effet sur les champs qui ont également `readonly` présent.
 
 ### `step`
 
@@ -105,7 +106,8 @@ L'attribut `step` est un nombre qui indique le «&nbsp;pas&nbsp;» suivi par le
 
 Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide.
 
-> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
+> [!NOTE]
+> Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie.
 
 Pour les champs de type `week`, la valeur de l'attribut `step` est indiquée en nombre de semaine et le facteur de multiplication est 604&nbsp;800&nbsp;000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de `step` est 1, qui indique une semaine. La base à partir de laquelle incrémenter par défaut est -259&nbsp;200&nbsp;000 qui correspond à la première semaine de 1970 (`1970-W01`).
 
@@ -220,7 +222,8 @@ Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas
 
 ![](validation-controle-type-week-chrome.png)
 
-> **Attention :** la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour une utilisatrice ou un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.
+> [!WARNING]
+> La validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour une utilisatrice ou un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.
 
 ## Gérer la prise en charge des navigateurs
 
@@ -352,7 +355,8 @@ function populateWeeks() {
 }
 ```
 
-> **Note :** Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
+> [!NOTE]
+> Attention, certaines années peuvent contenir 53 semaines&nbsp;! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
 ## Spécifications
 
diff --git a/files/fr/web/html/element/ins/index.md b/files/fr/web/html/element/ins/index.md
index b30f9b8f6142af..eecbef18d20d3e 100644
--- a/files/fr/web/html/element/ins/index.md
+++ b/files/fr/web/html/element/ins/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/ins
 
 L'élément HTML **`<ins>`** représente un fragment de texte qui a été ajouté dans un document.
 
-> **Note :** À l'inverse, on pourra utiliser l'élément {{HTMLElement("del")}} afin de représenter un fragment de texte supprimé.
+> [!NOTE]
+> À l'inverse, on pourra utiliser l'élément {{HTMLElement("del")}} afin de représenter un fragment de texte supprimé.
 
 {{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}
 
diff --git a/files/fr/web/html/element/kbd/index.md b/files/fr/web/html/element/kbd/index.md
index 3159d2ae65082f..bc6257a4a0eb02 100644
--- a/files/fr/web/html/element/kbd/index.md
+++ b/files/fr/web/html/element/kbd/index.md
@@ -23,7 +23,8 @@ D'autres éléments peuvent être utilisés en association avec `<kbd>` afin de
 - Imbriquer un élément `<kbd>` dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (_echo_) à l'utilisateur. Cf. [Saisie restituée](#saisie_restituée), ci-après.
 - Imbriquer un élément `<samp>` dans un élément `<kbd>` permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. [Représenter les options de saisies à l'écran](#représenter_les_options_de_saisies_à_l'écran) ci-après.
 
-> **Note :** Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément `<kbd>`. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.
+> [!NOTE]
+> Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément `<kbd>`. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.
 
 ## Exemples
 
diff --git a/files/fr/web/html/element/label/index.md b/files/fr/web/html/element/label/index.md
index 9683064e9fdcaf..ab0953fb1d1e73 100644
--- a/files/fr/web/html/element/label/index.md
+++ b/files/fr/web/html/element/label/index.md
@@ -33,13 +33,15 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ
 
   - : L'identifiant (la valeur de l'attribut [`id`](/fr/docs/Web/HTML/Global_attributes#id)) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément.
 
-    > **Note :** Un élément label peut simultanément avoir un attribut `for` et contenir un élément de contrôle tant que l'attribut `for` pointe vers l'élément contenu.
+    > [!NOTE]
+    > Un élément label peut simultanément avoir un attribut `for` et contenir un élément de contrôle tant que l'attribut `for` pointe vers l'élément contenu.
 
 - `form`
 
   - : L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément \<label> doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire.
 
-    > **Note :** La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut [`form`](/fr/docs/Web/HTML/Global_attributes#form). Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou `null` s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut `null`).
+    > [!NOTE]
+    > La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut [`form`](/fr/docs/Web/HTML/Global_attributes#form). Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou `null` s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut `null`).
 
 ## Notes d'utilisation
 
diff --git a/files/fr/web/html/element/legend/index.md b/files/fr/web/html/element/legend/index.md
index 29b24552f7163f..18aee747db4b64 100644
--- a/files/fr/web/html/element/legend/index.md
+++ b/files/fr/web/html/element/legend/index.md
@@ -31,7 +31,8 @@ Cet élément contient uniquement [les attributs universels](/fr/docs/Web/HTML/A
 
 {{EmbedLiveSample("Exemples","100%","100%")}}
 
-> **Note :** Voir la page sur {{HTMLElement("form")}} pour d'autres exemples qui utilisent `<legend>`.
+> [!NOTE]
+> Voir la page sur {{HTMLElement("form")}} pour d'autres exemples qui utilisent `<legend>`.
 
 ## Résumé technique
 
diff --git a/files/fr/web/html/element/li/index.md b/files/fr/web/html/element/li/index.md
index f9448e0c0ec187..0fb9410f8b464c 100644
--- a/files/fr/web/html/element/li/index.md
+++ b/files/fr/web/html/element/li/index.md
@@ -17,9 +17,11 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Attributs_univ
 
   - : Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut **value** n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}).
 
-    > **Note :** Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.
+    > [!NOTE]
+    > Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.
 
-    > **Note :** Avant Gecko 9.0, des valeurs négatives étaient incorrectement converties en 0. A partir de Gecko 9.0, toutes les valeurs entières ont été correctement analysées.
+    > [!NOTE]
+    > Avant Gecko 9.0, des valeurs négatives étaient incorrectement converties en 0. A partir de Gecko 9.0, toutes les valeurs entières ont été correctement analysées.
 
 - `type` {{Deprecated_inline}}
 
@@ -33,7 +35,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Attributs_univ
 
     Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent.
 
-    > **Note :** Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.
+    > [!NOTE]
+    > Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.
 
 ## Exemples
 
@@ -85,7 +88,8 @@ Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Attributs_univ
 
 {{EmbedLiveSample("Liste_non_ordonnée")}}
 
-> **Note :** Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.
+> [!NOTE]
+> Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.
 
 ## Résumé technique
 
diff --git a/files/fr/web/html/element/link/index.md b/files/fr/web/html/element/link/index.md
index 205cd1a32fac2b..e831bd493e8e7f 100644
--- a/files/fr/web/html/element/link/index.md
+++ b/files/fr/web/html/element/link/index.md
@@ -112,7 +112,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ
 
   - : Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être [une requête média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries). Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - En HTML4, la valeur de cet attribut était une liste de descripteurs de médias ([des types ou des groupes de média](/fr/docs/Web/CSS/@media)) séparés par des espaces, par exemple `print` `screen` `aural` `braille`. HTML5 étend cet attribut à l'ensemble [des requêtes média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) qui forment un surensemble des valeurs autorisées en HTML 4.
     > - Les navigateurs qui ne prennent pas en charge [les requêtes média CSS3](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.
@@ -136,7 +136,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ
     - `any` : l'icône peut être redimensionnée à volonté car elle utilise un format vectoriel (par exemple `image/svg+xml`).
     - une liste de tailles, séparées par des espaces, dont chacune est de la forme `<largeur en pixels>x<hauteur en pixels>` ou `<largeur en pixels>X<hauteur en pixels>`. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.
 
-    > **Note :**
+    > [!NOTE]
     >
     > - La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, [`sizes`](/fr/docs/Web/HTML/Global_attributes#sizes) ne contient qu'un seul élément.
     > - Safari sur iOS ne prend pas en charge cet attribut mais utilise des types de lien non-standards pour définir l'icône utilisé dans la barre du site ou pour le lancer : `apple-touch-icon` et `apple-touch-startup-icon`.
@@ -152,7 +152,8 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ
 
   - : Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est `iso-8859-1`.
 
-    > **Note :** cet attribut est obsolète **et ne doit pas être utilisé**. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.
+    > [!NOTE]
+    > Cet attribut est obsolète **et ne doit pas être utilisé**. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.
 
 - `methods` {{Non-standard_inline}}
   - : La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir [la page MSDN sur la propriété `methods`](https://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx).
@@ -162,9 +163,11 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ
 
   - : La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut [`href`](/fr/docs/Web/HTML/Element/link#href)). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut `rel`. [Les types de lien](/fr/docs/Web/HTML/Types_de_lien) utilisés pour cet attribut sont semblables aux valeurs autorisés par [`rel`](/fr/docs/Web/HTML/Element/link#rel).
 
-    > **Note :** cet attribut est obsolète en HTML5 **et ne doit pas être utilisé**. Pour obtenir le même effet, on utilisera l'attribut [`rel`](/fr/docs/Web/HTML/Element/link#rel) avec la valeur réciproque [pour le type de lien](/fr/docs/Web/HTML/Types_de_lien), (`made` devrait par exemple être remplacé par `author`). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.
+    > [!NOTE]
+    > Cet attribut est obsolète en HTML5 **et ne doit pas être utilisé**. Pour obtenir le même effet, on utilisera l'attribut [`rel`](/fr/docs/Web/HTML/Element/link#rel) avec la valeur réciproque [pour le type de lien](/fr/docs/Web/HTML/Types_de_lien), (`made` devrait par exemple être remplacé par `author`). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.
 
-    > **Note :** La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut `rev` comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.
+    > [!NOTE]
+    > La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut `rev` comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.
 
 - `target`{{Non-standard_inline}}
   - : Cet attribut définit le nom de la _frame_ ou de la fenêtre qui contient la ressource liée ou qui affichera la ressource liée.
@@ -214,7 +217,8 @@ Il est possible de déterminer si une feuille de style a été chargée en écou
   onerror="sheetError()" />
 ```
 
-> **Note :** L'évènement `load` est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.
+> [!NOTE]
+> L'évènement `load` est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.
 
 ### Exemples avec `preload`
 
diff --git a/files/fr/web/html/element/menu/index.md b/files/fr/web/html/element/menu/index.md
index 61ff9a02dc1ed1..6f1ac62d4d3750 100644
--- a/files/fr/web/html/element/menu/index.md
+++ b/files/fr/web/html/element/menu/index.md
@@ -21,7 +21,8 @@ Les éléments `<menu>` et [`<ul>`](/fr/docs/Web/HTML/Element/ul) représentent
 
 L'élément connexe [`<menuitem>`](/fr/docs/Web/HTML/Element/menuitem) a été déprécié.
 
-> **Note :** Dans d'anciennes versions de la spécification HTML, l'élément `<menu>` pouvait être utilisé pour représenter un menu contextuel. Cette fonctionnalité est désormais considérée comme obsolète et ne fait plus partie de la spécification.
+> [!NOTE]
+> Dans d'anciennes versions de la spécification HTML, l'élément `<menu>` pouvait être utilisé pour représenter un menu contextuel. Cette fonctionnalité est désormais considérée comme obsolète et ne fait plus partie de la spécification.
 
 ## Exemples
 
diff --git a/files/fr/web/html/element/meta/index.md b/files/fr/web/html/element/meta/index.md
index 10f0a613c8179a..9e2cd81aed6592 100644
--- a/files/fr/web/html/element/meta/index.md
+++ b/files/fr/web/html/element/meta/index.md
@@ -20,7 +20,8 @@ L'élément HTML **`<meta>`** représente toute information de métadonnées qui
 
 Comme tous les autres éléments, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-> **Note :** Il faut préciser que l'attribut [`name`](#name) possède une signification spécifique pour l'élément `<meta>` et que l'attribut [`itemprop`](/fr/docs/Web/HTML/Global_attributes#itemprop) ne doit pas être utilisé quand l'un de ces attributs suivant est déjà défini&nbsp;: [`name`](#name), [`http-equiv`](#http-equiv) ou [`charset`](#charset).
+> [!NOTE]
+> Il faut préciser que l'attribut [`name`](#name) possède une signification spécifique pour l'élément `<meta>` et que l'attribut [`itemprop`](/fr/docs/Web/HTML/Global_attributes#itemprop) ne doit pas être utilisé quand l'un de ces attributs suivant est déjà défini&nbsp;: [`name`](#name), [`http-equiv`](#http-equiv) ou [`charset`](#charset).
 
 - `charset`
 
@@ -34,7 +35,8 @@ Comme tous les autres éléments, cet élément inclut [les attributs universels
       - : Cette valeur permet de créer des [règles de gestion de contenu (CSP)](/fr/docs/Web/HTTP/Headers/Content-Security-Policy) pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.
     - `content-type`
       - : Ce champ d'attribut définit le [type MIME](/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types) du document, suivi du jeu de caractères utilisé pour l'encodage du document. Si cette valeur est utilisée, l'attribut `content` doit valoir `"text/html; charset=utf-8"`. Cette formulation est équivalente à un élément `<meta>` ayant l'attribut [`charset`](#charset), et les mêmes restrictions s'appliquent quant à l'emplacement dans le document (1024 premiers octets).
-        > **Note :** Cette valeur peut uniquement être utilisée pour les documents servis avec le type `text/html`. Elle ne peut pas être utilisée pour les documents servis avec un type MIME XML.
+        > [!NOTE]
+        > Cette valeur peut uniquement être utilisée pour les documents servis avec le type `text/html`. Elle ne peut pas être utilisée pour les documents servis avec un type MIME XML.
     - `default-style`
       - : Le nom de [la feuille de style CSS](/fr/docs/Web/CSS) par défaut.
     - `x-ua-compatible`
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 5319fd5349ca9c..3efdfc2ae3d700 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -1019,7 +1019,7 @@
 /ja/docs/DOM/window.setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/DOM/window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/DOM/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
-/ja/docs/DOM/window.sidebar	/ja/docs/Web/API/Window/sidebar
+/ja/docs/DOM/window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/DOM/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
 /ja/docs/DOM/window.status	/ja/docs/Web/API/Window/status
 /ja/docs/DOM/window.status-redirect-1	/ja/docs/Web/API/Window/status
@@ -1226,7 +1226,7 @@
 /ja/docs/DOM:window.setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/DOM:window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/DOM:window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
-/ja/docs/DOM:window.sidebar	/ja/docs/Web/API/Window/sidebar
+/ja/docs/DOM:window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/DOM:window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
 /ja/docs/DOM:window.status	/ja/docs/Web/API/Window/status
 /ja/docs/DOM:window.statusbar	/ja/docs/Web/API/Window/statusbar
@@ -2539,7 +2539,6 @@
 /ja/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
 /ja/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
 /ja/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces	/ja/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
-/ja/docs/Tutorials	/ja/docs/orphaned/Tutorials
 /ja/docs/Tutorials/Using_CSS_gradients	/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients
 /ja/docs/Upcoming_Firefox_features_for_developers	/ja/docs/Mozilla/Firefox/Releases/4
 /ja/docs/Updating_extensions_for_Firefox_2	/ja/docs/Mozilla/Firefox/Releases/2/Updating_extensions
@@ -3184,6 +3183,7 @@
 /ja/docs/Web/API/Window/restore	/ja/docs/Web/API/Window/moveTo
 /ja/docs/Web/API/Window/setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/Web/API/Window/setTimeout	/ja/docs/Web/API/setTimeout
+/ja/docs/Web/API/Window/sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/Web/API/Window/transitioncancel_event	/ja/docs/Web/API/Element/transitioncancel_event
 /ja/docs/Web/API/Window/transitionend_event	/ja/docs/Web/API/Element/transitionend_event
 /ja/docs/Web/API/Window/transitionrun_event	/ja/docs/Web/API/Element/transitionrun_event
@@ -3486,7 +3486,7 @@
 /ja/docs/Web/API/window.setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/Web/API/window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/Web/API/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
-/ja/docs/Web/API/window.sidebar	/ja/docs/Web/API/Window/sidebar
+/ja/docs/Web/API/window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/Web/API/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
 /ja/docs/Web/API/window.status	/ja/docs/Web/API/Window/status
 /ja/docs/Web/API/window.statusbar	/ja/docs/Web/API/Window/statusbar
@@ -4164,7 +4164,7 @@
 /ja/docs/Web/HTTP/Headers/Feature-Policy/accelerometer	/ja/docs/Web/HTTP/Headers/Permissions-Policy/accelerometer
 /ja/docs/Web/HTTP/Headers/Feature-Policy/ambient-light-sensor	/ja/docs/Web/HTTP/Headers/Permissions-Policy/ambient-light-sensor
 /ja/docs/Web/HTTP/Headers/Feature-Policy/autoplay	/ja/docs/Web/HTTP/Headers/Permissions-Policy/autoplay
-/ja/docs/Web/HTTP/Headers/Feature-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy/battery
+/ja/docs/Web/HTTP/Headers/Feature-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Feature-Policy/camera	/ja/docs/Web/HTTP/Headers/Permissions-Policy/camera
 /ja/docs/Web/HTTP/Headers/Feature-Policy/display-capture	/ja/docs/Web/HTTP/Headers/Permissions-Policy/display-capture
 /ja/docs/Web/HTTP/Headers/Feature-Policy/document-domain	/ja/docs/Web/HTTP/Headers/Permissions-Policy/document-domain
@@ -4180,6 +4180,7 @@
 /ja/docs/Web/HTTP/Headers/Feature-Policy/web-share	/ja/docs/Web/HTTP/Headers/Permissions-Policy/web-share
 /ja/docs/Web/HTTP/Headers/Feature-Policy/xr	/ja/docs/conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
+/ja/docs/Web/HTTP/Headers/Permissions-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Set-Cookie2	/ja/docs/Web/HTTP/Headers/Set-Cookie
 /ja/docs/Web/HTTP/Index	/ja/docs/Web/HTTP
 /ja/docs/Web/HTTP/Link_prefetching_FAQ	/ja/docs/Glossary/Prefetch
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index b35a3e14481145..663195890c96e1 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13984,6 +13984,16 @@
     "modified": "2020-10-15T22:00:39.694Z",
     "contributors": ["yyss", "mk-tool"]
   },
+  "Web/API/Window/external": {
+    "modified": "2019-03-23T23:50:31.021Z",
+    "contributors": [
+      "teoli",
+      "AshfaqHossain",
+      "kohei.yoshino",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/Window/fetch": {
     "modified": "2020-10-15T21:41:32.875Z",
     "contributors": [
@@ -14525,16 +14535,6 @@
       "Potappo"
     ]
   },
-  "Web/API/Window/sidebar": {
-    "modified": "2019-03-23T23:50:31.021Z",
-    "contributors": [
-      "teoli",
-      "AshfaqHossain",
-      "kohei.yoshino",
-      "ethertank",
-      "Potappo"
-    ]
-  },
   "Web/API/Window/sizeToContent": {
     "modified": "2019-03-23T23:51:38.117Z",
     "contributors": ["teoli", "khalid32", "ethertank", "Potappo"]
@@ -21931,10 +21931,6 @@
     "modified": "2020-10-15T22:11:22.688Z",
     "contributors": ["mfuji09"]
   },
-  "Web/HTTP/Headers/Permissions-Policy/battery": {
-    "modified": "2020-10-15T22:34:41.072Z",
-    "contributors": ["mfuji09"]
-  },
   "Web/HTTP/Headers/Permissions-Policy/camera": {
     "modified": "2020-10-15T22:11:23.091Z",
     "contributors": ["mfuji09"]
@@ -30420,10 +30416,6 @@
     "modified": "2019-04-13T00:54:00.142Z",
     "contributors": ["wbamberg", "Marsf", "Okome"]
   },
-  "orphaned/Tutorials": {
-    "modified": "2019-03-23T23:15:45.631Z",
-    "contributors": ["shinnn"]
-  },
   "orphaned/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility": {
     "modified": "2019-03-23T22:00:20.926Z",
     "contributors": ["mfuji09", "yyss"]
diff --git a/files/ja/conflicting/web/api/element/clientheight/index.md b/files/ja/conflicting/web/api/element/clientheight/index.md
index 3b4d31190005ef..5f9d00363c8e65 100644
--- a/files/ja/conflicting/web/api/element/clientheight/index.md
+++ b/files/ja/conflicting/web/api/element/clientheight/index.md
@@ -6,7 +6,8 @@ original_slug: Web/API/Document/height
 
 {{APIRef("DOM")}} {{deprecated_header}}
 
-> **メモ:** Gecko 6.0 より `document.height` には対応しなくなりました。代わりに `document.body.clientHeight` を使用してください。 {{domxref("element.clientHeight")}} を参照してください。
+> [!NOTE]
+> Gecko 6.0 より `document.height` には対応しなくなりました。代わりに `document.body.clientHeight` を使用してください。 {{domxref("element.clientHeight")}} を参照してください。
 
 現在の {{domxref("document")}} オブジェクトの高さを返します。多くの場合、これは現在の文書の {{HTMLElement("body")}} 要素の高さと同じ値です。
 
diff --git a/files/ja/conflicting/web/api/element/clientwidth/index.md b/files/ja/conflicting/web/api/element/clientwidth/index.md
index 2fd4d69e06d584..023072e9cba26e 100644
--- a/files/ja/conflicting/web/api/element/clientwidth/index.md
+++ b/files/ja/conflicting/web/api/element/clientwidth/index.md
@@ -6,7 +6,8 @@ original_slug: Web/API/Document/width
 
 {{APIRef("DOM")}} {{deprecated_header}}
 
-> **メモ:** Gecko 6.0 より `document.width` には対応しなくなりました。代わりに `document.body.clientWidth` を使用してください。 {{domxref("element.clientWidth")}} を参照してください。
+> [!NOTE]
+> Gecko 6.0 より `document.width` には対応しなくなりました。代わりに `document.body.clientWidth` を使用してください。 {{domxref("element.clientWidth")}} を参照してください。
 
 現在の文書の {{HTMLElement("body")}} 要素の現在の幅をピクセル値で返します。
 
diff --git a/files/ja/conflicting/web/api/eventtarget/addeventlistener_380cb5f366307beb2c072f74e561ee98/index.md b/files/ja/conflicting/web/api/eventtarget/addeventlistener_380cb5f366307beb2c072f74e561ee98/index.md
index cd7ca3ae4eaa2b..145624b54815fe 100644
--- a/files/ja/conflicting/web/api/eventtarget/addeventlistener_380cb5f366307beb2c072f74e561ee98/index.md
+++ b/files/ja/conflicting/web/api/eventtarget/addeventlistener_380cb5f366307beb2c072f74e561ee98/index.md
@@ -8,7 +8,8 @@ original_slug: Web/API/EventListener
 
 **`EventListener`** インターフェイスは、{{domxref("EventTarget")}} オブジェクトによってディスパッチされたイベントを処理できるオブジェクトを表します。
 
-> **メモ:** レガシーコンテンツとの互換性が必要なため、`EventListener` は、関数、`handleEvent()` メソッドをもつオブジェクト両方を受け入れます。
+> [!NOTE]
+> レガシーコンテンツとの互換性が必要なため、`EventListener` は、関数、`handleEvent()` メソッドをもつオブジェクト両方を受け入れます。
 > これを以下の [例](#例) に示します。
 
 ## プロパティ
diff --git a/files/ja/conflicting/web/api/htmlinputelement/index.md b/files/ja/conflicting/web/api/htmlinputelement/index.md
index 335d70dcec73df..ba0cb8347986d8 100644
--- a/files/ja/conflicting/web/api/htmlinputelement/index.md
+++ b/files/ja/conflicting/web/api/htmlinputelement/index.md
@@ -8,7 +8,8 @@ original_slug: Web/API/HTMLInputElement/mozGetFileNameArray
 
 **`HTMLInputElement.mozGetFileNameArray()`** メソッドは、 HTML の `input` 要素上でユーザーによって選択されたファイルの名前の配列を返します。
 
-> **メモ:** このメソッドは Gecko に特有のものであり、他のブラウザーでは利用できません。加えて、ウェブページで利用した場合にエラーが発生します。
+> [!NOTE]
+> このメソッドは Gecko に特有のものであり、他のブラウザーでは利用できません。加えて、ウェブページで利用した場合にエラーが発生します。
 
 ## 構文
 
diff --git a/files/ja/conflicting/web/api/text/index.md b/files/ja/conflicting/web/api/text/index.md
index e1f472cfd69d98..69f3981382282f 100644
--- a/files/ja/conflicting/web/api/text/index.md
+++ b/files/ja/conflicting/web/api/text/index.md
@@ -9,7 +9,8 @@ original_slug: Web/API/Text/replaceWholeText
 **`replaceWholeText()`** は {{domxref("Text")}} インターフェイスのメソッドで、ノードのテキストと、*論理的に隣接するすべてのテキストノード*を指定されたテキストで置き換えます。
 置換されたノードは、現在のノードを含め、置換テキストを受け取るものでない限り、削除されます。
 
-> **メモ:** 現代のブラウザーで同じ効果を達成するには、 {{domxref("Node.textContent")}}, {{domxref("Element.innerHTML")}}, {{domxref("HTMLElement.innerText")}}, {{domxref("CharacterData.replaceData()")}} を使用することを検討してください。
+> [!NOTE]
+> 現代のブラウザーで同じ効果を達成するには、 {{domxref("Node.textContent")}}, {{domxref("Element.innerHTML")}}, {{domxref("HTMLElement.innerText")}}, {{domxref("CharacterData.replaceData()")}} を使用することを検討してください。
 
 ## 構文
 
@@ -27,7 +28,8 @@ replaceWholeText(content)
 
 置き換えられた文字列の {{domxref("Text")}} ノード、または置き換える文字列が　`""` であった場合は `null` です。
 
-> **メモ:** 返されるノードは、現在のノードが読み取り専用でない限り、現在のノードです。読み取り専用であった場合は、同じ型のテキストノードが新たに生成され、そのノードが置換された位置に挿入されたものとします。
+> [!NOTE]
+> 返されるノードは、現在のノードが読み取り専用でない限り、現在のノードです。読み取り専用であった場合は、同じ型のテキストノードが新たに生成され、そのノードが置換された位置に挿入されたものとします。
 
 ### 例外
 
diff --git a/files/ja/conflicting/web/css/cursor/index.md b/files/ja/conflicting/web/css/cursor/index.md
index a86bcdaf887a4a..7d02e46f164053 100644
--- a/files/ja/conflicting/web/css/cursor/index.md
+++ b/files/ja/conflicting/web/css/cursor/index.md
@@ -54,7 +54,8 @@ Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が
 
 Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。
 
-> **メモ:** Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。
+> [!NOTE]
+> Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。
 
 Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。
 
diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.md b/files/ja/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.md
index 584163614ed373..46d96e343d6ef1 100644
--- a/files/ja/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.md
+++ b/files/ja/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.md
@@ -7,7 +7,8 @@ original_slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned
 
 開発者が [`SharedArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) オブジェクトを再び作成できるように、標準化作業が進行中ですが、スレッドをまたがってこれらを使用するために変更が必要です (例えば、 `postMessage()` で `SharedArrayBuffer` オブジェクトを使用すると、既定で例外が発生します）。これらの変更により、サイト間の分離がさらに進み、共有メモリーで作成できる高解像度タイマーを使った攻撃の影響を軽減するのに役立ちます。
 
-> **メモ:** Firefox 79 以降では、この記事で説明している機能は既定で有効になります。
+> [!NOTE]
+> Firefox 79 以降では、この記事で説明している機能は既定で有効になります。
 >
 > Chrome はこれらの制約をデスクトップ版の Chrome 92 と Android 版の Chrome 88 から始めました。
 
diff --git a/files/ja/conflicting/web/security/certificate_transparency/index.md b/files/ja/conflicting/web/security/certificate_transparency/index.md
index a57b3d211f5dd1..83b35bf7684b1d 100644
--- a/files/ja/conflicting/web/security/certificate_transparency/index.md
+++ b/files/ja/conflicting/web/security/certificate_transparency/index.md
@@ -6,7 +6,8 @@ original_slug: Web/HTTP/Public_Key_Pinning
 
 {{HTTPSidebar}}{{deprecated_header}}
 
-> **メモ:** Public Key Pinning の仕組みは [Certificate Transparency](/ja/docs/Web/Security/Certificate_Transparency) および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。
+> [!NOTE]
+> Public Key Pinning の仕組みは [Certificate Transparency](/ja/docs/Web/Security/Certificate_Transparency) および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。
 
 **HTTP Public Key Pinning** ({{Glossary("HPKP")}}) は、ウェブクライアントに特定の公開鍵をあるウェブサーバーに関連付けさせることで、偽造された証明書による{{Glossary("MITM", "中間者攻撃")}}のリスクを減少させるためのセキュリティ機能でした。これは最近のブラウザーでは削除され、対応がなくなりました。
 
@@ -14,7 +15,8 @@ original_slug: Web/HTTP/Public_Key_Pinning
 
 HPKP は _Trust on First Use_ ({{Glossary("TOFU")}}) 技術の 1 つです。 HPKP の HTTP ヘッダーがウェブサーバーからクライアントへ最初に送信されて以降、そのウェブサーバーに紐付く公開鍵はクライアントで一定期間記憶されます。クライアントが再びそのサーバーを訪れた際は、既に HPKP で記憶したフィンガープリントと一致する公開鍵が、証明書チェインにおいて最低 1 つの証明書に含まれていることを確認します。そのサーバーから送信されてきた公開鍵が不明なものだった場合、クライアントはユーザーに警告を表示します。
 
-> **メモ:** Firefox および Chrome は、認証された証明書チェーンが (内蔵の証明書ではなく) **ユーザー定義の証明書**であった場合、**ピン留めによる認証を無効化します**。つまり、独自のルート証明書をインポートしたユーザーに対しては、ピン留めによる警告が表示されません。
+> [!NOTE]
+> Firefox および Chrome は、認証された証明書チェーンが (内蔵の証明書ではなく) **ユーザー定義の証明書**であった場合、**ピン留めによる認証を無効化します**。つまり、独自のルート証明書をインポートしたユーザーに対しては、ピン留めによる警告が表示されません。
 
 ## HPKP の有効化
 
@@ -33,11 +35,13 @@ Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubDomains]
 - `report-uri` {{optional_inline}}
   - : このパラメータは省略可能です。ピンの検証に失敗した際に、失敗した旨を報告する URL を指定します。
 
-> **メモ:** 現在の仕様では、本番系で運用されていないバックアップ用の第 2 のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。
+> [!NOTE]
+> 現在の仕様では、本番系で運用されていないバックアップ用の第 2 のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。
 
 ### Base64 エンコードされた公開鍵情報を抽出するには
 
-> **メモ:** 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。
+> [!NOTE]
+> 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。
 
 まずは証明書や鍵ファイルから公開鍵情報を抽出し、それを Base64 でエンコードする必要があります。
 
@@ -85,9 +89,11 @@ Public-Key-Pins:
 
 HPKP ヘッダーを送信するのに必要な具体的な手順はウェブサーバーによって異なります。
 
-> **メモ:** 以下の例では、2 か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。
+> [!NOTE]
+> 以下の例では、2 か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。
 
-> **警告:** HPKP の設定を間違えると、ユーザーが長期間接続できなくなってしまう可能性があります！バックアップの証明書を用意したり、CA の証明書をピン留めすることを推奨します。
+> [!WARNING]
+> HPKP の設定を間違えると、ユーザーが長期間接続できなくなってしまう可能性があります！バックアップの証明書を用意したり、CA の証明書をピン留めすることを推奨します。
 
 #### Apache
 
diff --git a/files/ja/games/anatomy/index.md b/files/ja/games/anatomy/index.md
index 9bb4b6a91e8588..19531b24fa90c7 100644
--- a/files/ja/games/anatomy/index.md
+++ b/files/ja/games/anatomy/index.md
@@ -37,7 +37,8 @@ window.main = function () {
 main(); //メインループ開始
 ```
 
-> **メモ:** ここで議論されている`main()` 関数はそれぞれ、ループコンテンツを行う前に新しい`requestAnimationFrame`をスケジュールしています。これは間違っているのではありませんし、ベストプラクティスを考慮しています。前もって次の `requestAnimationFrame` を呼び出すことはブラウザーが適宜それを正しい時に受け取ることを保証します。たとえあなたの現在のフレームが VSync window を見失ってしまったとしてもです。
+> [!NOTE]
+> ここで議論されている`main()` 関数はそれぞれ、ループコンテンツを行う前に新しい`requestAnimationFrame`をスケジュールしています。これは間違っているのではありませんし、ベストプラクティスを考慮しています。前もって次の `requestAnimationFrame` を呼び出すことはブラウザーが適宜それを正しい時に受け取ることを保証します。たとえあなたの現在のフレームが VSync window を見失ってしまったとしてもです。
 
 上のコードは 2 つの宣言があります。 最初の宣言はある関数をグローバル変数として `main()` と呼ばれる関数を作成します。この関数はいくつかの仕事をして同時にブラウザーにそれ自身を `window.requestAnimationFrame()` を使って呼ぶように言います。ふたつ目の宣言は `main()` 関数 - それは最初の宣言で定義されたのですが、それを呼びます。`main()` は 2 つ目の宣言で一度だけ呼ばれて毎回それを呼ぶ度に次のフレームでやるべきことのキューに配置していくので、`main()` はあなたのフレームレートと同期します。
 
@@ -72,7 +73,8 @@ main(); //メインループ開始
 
 ブラウザーがこの IIFE に出くわすと、メインループを定義してすぐさま次のフレームにキューします。これで何のオブジェクトにもアタッチされなくなり、`main()` (もしくは `main()` のためのメソッド) は残りのアプリケーションで使用可能な未使用の名前になり、何か別に定義してもよくなりました。
 
-> **メモ:** 実際は、次の `requestAnimationFrame()` を if 構文で防ぐほうがより一般的で、`cancelAnimationFrame()` を呼ぶことはそれよりも一般的ではありません。
+> [!NOTE]
+> 実際は、次の `requestAnimationFrame()` を if 構文で防ぐほうがより一般的で、`cancelAnimationFrame()` を呼ぶことはそれよりも一般的ではありません。
 
 2 つ目の問題 - つまり、メインループを止めるという問題に関しては、`main()` を `{{ domxref("window.cancelAnimationFrame()") }}` によって呼び出しをキャンセルする必要があるでしょう。あなたは一番最後に `requestAnimationFrame()` が呼ばれたときに `cancelAnimationFrame()` に `requestAnimationFrame()` で得た ID トークンを渡す必要があります。 こんな風な場合を想定してください - あなたのゲームの関数と変数が `MyGame` と呼ばれる名前空間に備え付けられています。先述の例を拡張すると、メインループはこんな風になります。
 
@@ -120,7 +122,8 @@ window.cancelAnimationFrame( MyGame.stopMain );
 
 限られた時間の中での話をしましたが、たくさんのウェブブラウザーには _High Resolution Time_ というツールがあります。{{ domxref("Date") }} オブジェクトはもはやタイミングオブジェクトとして認識されていません - なぜかというと、不正確でシステムクロックによって書き換えられてしまうからです。High Resolution Time は一方で `navigationStart` (前のドキュメントがアンロードされた時) からのミリ秒を数えます。この値は小数点値として誤差 1000 分の 1 ミリ秒の正確さで返ってきます。`{{ domxref("DOMHighResTimeStamp") }}` という風に馴染みが深いですが、実際は浮動小数点値として考えてください。
 
-> **メモ:** いくつかのシステム(ハードウェアであれソフトウェアであれ)のうちマイクロ秒の正確さが担保されていないものは最低ミリ秒単位の正確さが許容されています。しかし、可能であれば 0.001 ミリ秒の正確さを提供します。
+> [!NOTE]
+> いくつかのシステム(ハードウェアであれソフトウェアであれ)のうちマイクロ秒の正確さが担保されていないものは最低ミリ秒単位の正確さが許容されています。しかし、可能であれば 0.001 ミリ秒の正確さを提供します。
 
 この値はそれ自体ではとても有効ではありません。なぜなら、無用なイベントに対しての相対値だからです。しかし、他のタイムスタンプから引き算されることで正確にそれら 2 つのイベント間の時間がいくらなのか決定することができます。これらのタイムスタンプを習得するには`window.performance.now()` を呼んで、結果を変数として格納してください。
 
@@ -157,7 +160,8 @@ var tNow = window.performance.now();
 
 メインループに関しては難しい決断をしなくてはなりません。どんな決断かというとどうやって正確な時間の経過をシミュレーションしようかということです。もし毎フレームコントロールが必要なら、どれくらいの頻度であなたのゲームが更新され、描画されるかを決定しなければなりません。ひょっとしたら更新と描画を別の頻度でしたいとさえ考えるかもしれません。またもう一つ考えないといけないのは、あなたのゲームがユーザーのシステムがゲームの仕事量に及ばない場合にどうやったらいい感じに失敗するだろうかということです。こういう場合を考えてみましょう - ユーザーのインプットを扱ってゲームの状態を描画するたびに更新するとします。以下に展開していきましょう。
 
-> **メモ:** メインループがどうやって時間を扱うかを変更することはデバッグ地獄です。どんな場合でも。要求を注意深く考慮してからメインループに取り掛かりましょう。
+> [!NOTE]
+> メインループがどうやって時間を扱うかを変更することはデバッグ地獄です。どんな場合でも。要求を注意深く考慮してからメインループに取り掛かりましょう。
 
 ### ブラウザーゲームはほとんどの場合こんな感じになっているべきだ
 
@@ -222,7 +226,8 @@ var tNow = window.performance.now();
 
 更新と描画をばらばらにした例は次のようになるはずです。デモンストレーションのために、この例は三番目の項目をもとにしていますが、読みやすくするために Web Workers を使わないようにしています。(あと、正直に言うと、書きやすくするためでもあるんですけどね)。
 
-> **警告:** この例は特に技術的なレビューが必要です。
+> [!WARNING]
+> この例は特に技術的なレビューが必要です。
 
 ```
 /*
diff --git a/files/ja/games/index.md b/files/ja/games/index.md
index 6758f67ea94e1a..85608030ccc08b 100644
--- a/files/ja/games/index.md
+++ b/files/ja/games/index.md
@@ -15,7 +15,8 @@ MDN ゲーム開発センターにようこそ! サイトのこのエリアで
 
 またゲーム開発に良く使われる API 情報の全部を簡単に探せるリファレンスセクションもあります。
 
-> **メモ:** ウェブでゲームを作るには HTML, CSS, and JavaScript のようなコア技術を利用します。[学習領域](/ja/docs/Learn)は基本から始めるのに良い場所です。
+> [!NOTE]
+> ウェブでゲームを作るには HTML, CSS, and JavaScript のようなコア技術を利用します。[学習領域](/ja/docs/Learn)は基本から始めるのに良い場所です。
 
 ## ネイティブゲームをウェブに移植する
 
diff --git a/files/ja/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md b/files/ja/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md
index be3626b0891d0e..5159c5d0759b0d 100644
--- a/files/ja/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md
+++ b/files/ja/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md
@@ -84,7 +84,8 @@ knotBBox.containsPoint(point);
 knotBbox.intersectsBox(otherBox);
 ```
 
-> **メモ:** これは、`Box3` が別のものを _完全に_ 包んでいるかどうかをチェックする `Box3.containsBox` メソッドとは異なります。
+> [!NOTE]
+> これは、`Box3` が別のものを _完全に_ 包んでいるかどうかをチェックする `Box3.containsBox` メソッドとは異なります。
 
 #### `Sphere` 対 `Sphere`
 
diff --git a/files/ja/games/techniques/3d_collision_detection/index.md b/files/ja/games/techniques/3d_collision_detection/index.md
index 559444f2f492f0..13d4f760b073a7 100644
--- a/files/ja/games/techniques/3d_collision_detection/index.md
+++ b/files/ja/games/techniques/3d_collision_detection/index.md
@@ -17,7 +17,8 @@ slug: Games/Techniques/3D_collision_detection
 
 ![Animated rotating knot showing the virtual rectangular box shrink and grow as the knots rotates within it. The box does not rotate.](rotating_knot.gif)
 
-> **メモ:** この手法の実際の実装については、[Three.js を使用したバウンディングボリューム](/ja/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)の記事を確認してください。
+> [!NOTE]
+> この手法の実際の実装については、[Three.js を使用したバウンディングボリューム](/ja/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)の記事を確認してください。
 
 ### 点 対 AABB
 
@@ -96,7 +97,8 @@ function isPointInsideSphere(point, sphere) {
 }
 ```
 
-> **メモ:** 上記のコードは平方根を特徴としており、計算にコストがかかる可能性があります。 これを回避する簡単な最適化は、距離の2乗と半径の2乗を比較することで構成されているため、最適化された方程式には、代わりに `distanceSqr < sphere.radius * sphere.radius` が含まれます。
+> [!NOTE]
+> 上記のコードは平方根を特徴としており、計算にコストがかかる可能性があります。 これを回避する簡単な最適化は、距離の2乗と半径の2乗を比較することで構成されているため、最適化された方程式には、代わりに `distanceSqr < sphere.radius * sphere.radius` が含まれます。
 
 ### 球 対 球
 
diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
index 8d8187c93a7638..4b1d2311caba5e 100644
--- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
+++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
@@ -47,7 +47,8 @@ A-Frame で何かを作るために環境設定を始めましょう。デモを
 
 シーンは、すべてが起こる場所です。このデモでは新しいオブジェクトを作成したら、それら全てをシーンへ追加していきます。そうすることで、それらのオブジェクトが画面上に表示されるようになります。 A-Frame の中では、シーンは [Scene エンティティ](https://aframe.io/docs/core/scene.html)で表現されます。
 
-> **メモ:** エンティティは任意の要素です — box や cylinder や cone のようなオブジェクトだけでなく、camera、light、sound sourceもエンティティです。
+> [!NOTE]
+> エンティティは任意の要素です — box や cylinder や cone のようなオブジェクトだけでなく、camera、light、sound sourceもエンティティです。
 
 `<body>` 要素の中に `<a-scene>` 要素を追加して、シーンを作成しましょう。
 
@@ -65,7 +66,8 @@ A-Frame で何かを作るために環境設定を始めましょう。デモを
 
 いくつかの定義済み引数、 `color`、`position`、`rotation` が含まれています。かなり分かりやすいと思いますが、立方体の色や 3D シーン内の位置、そして立方体の回転状態を定義しています。
 
-> **メモ:** 距離の値 (例えば、立方体の y 方向の位置) は単位がなく、シーンに適切と思える好きな単位 — ミリメートル、メートル、フィート、マイル — と考えてください。あなた次第です。
+> [!NOTE]
+> 距離の値 (例えば、立方体の y 方向の位置) は単位がなく、シーンに適切と思える好きな単位 — ミリメートル、メートル、フィート、マイル — と考えてください。あなた次第です。
 
 ### 背景の追加: スカイボックス
 
diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md
index b62aa3a05a024f..1873c40e1afdcc 100644
--- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md
+++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md
@@ -103,7 +103,8 @@ var camera = new BABYLON.FreeCamera(
 
 Babylon.js では多くの[カメラ](https://doc.babylonjs.com/divingDeeper/cameras)が利用可能です。 `FreeCamera` は最も基本的で汎用的なカメラです。初期化するためには、 3 つの引数を渡す必要があります。使用したい名前、三次元空間での位置の座標、そして追加したいシーンです。
 
-> **メモ:** ここで、`BABYLON.Vector3()` メソッドが使用されていることにお気づきでしょう。これはシーン上の 3D 位置を定義するものです。 Babylon.js には、ベクトル、色、行列などを扱うための完全な数学ライブラリーがバンドルされています。
+> [!NOTE]
+> ここで、`BABYLON.Vector3()` メソッドが使用されていることにお気づきでしょう。これはシーン上の 3D 位置を定義するものです。 Babylon.js には、ベクトル、色、行列などを扱うための完全な数学ライブラリーがバンドルされています。
 
 ## 光あれ
 
@@ -129,7 +130,8 @@ var box = BABYLON.Mesh.CreateBox("box", 2, scene);
 
 メッシュはエンジンが幾何学的な図形を作成する方法なので、後で簡単に素材を適用することができます。この例では、 `Mesh.CreateBox` メソッドを使用して、独自の名前とサイズとして 2、そしてどのシーンに追加するかを宣言してボックスを作成します。
 
-> **メモ:** サイズや位置の値（ボックスのサイズなど）は単位がなく、基本的にミリメートル、メートル、フィート、マイルなど、シーンに適した値を設定することができます。
+> [!NOTE]
+> サイズや位置の値（ボックスのサイズなど）は単位がなく、基本的にミリメートル、メートル、フィート、マイルなど、シーンに適した値を設定することができます。
 
 今、保存して更新すると、オブジェクトは正方形のように見えます。なぜなら、カメラに面しているからです。オブジェクトの良いところは、シーン上で好きなように動かせることです。例えば、回転させたり、拡大縮小したりできます。複数の面が見えるように、ボックスに少し回転を加えてみましょう。もう一度、これらの線を前の線の下に追加してください。
 
diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
index 8a883a23e774da..b678cc49ef2a2a 100644
--- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
+++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
@@ -19,7 +19,8 @@ PlayCanvas では、機能紹介を兼ねたデモをいくつか公開してい
 
 ![A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.](playcanvas-demos.png)
 
-> **メモ:** さらに事例をご覧になる場合は[特集されているデモ](https://playcanvas.com/explore)も確認してください。
+> [!NOTE]
+> さらに事例をご覧になる場合は[特集されているデモ](https://playcanvas.com/explore)も確認してください。
 
 ## エンジンとエディターの違い
 
diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
index afb0d36e7234bd..3ff2cd77b3eafe 100644
--- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
+++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
@@ -7,7 +7,8 @@ slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
 
 ゲームの一般的な 3D シーンは、たとえ最もシンプルなものであっても、座標系に配置された図形、それらを実際に見るためのカメラ、見栄えを良くするためのライトや素材、生き生きと見せるためのアニメーションなど、標準的なアイテムが含まれています。 **Three.js** は、他の 3D ライブラリーと同様に、一般的な 3D 機能をより迅速に実装するためのヘルパー関数が組み込まれています。この記事では、開発環境の設定、必要な HTML の構成、 Three の基本オブジェクト、基本的なデモの作成方法など、 Three を使用するための本当の基本を紹介します。
 
-> **メモ:** 私たちは Three を有名な [WebGL](/ja/docs/Web/API/WebGL_API)ライブラリーの 1 つであり、簡単に使い始められるという理由で選びました。Three が他の WebGL ライブラリーと比べて優秀だというつもりはありません。 [CopperLicht](https://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [PlayCanvas](https://playcanvas.com/) など、気軽に試してみてください。
+> [!NOTE]
+> 私たちは Three を有名な [WebGL](/ja/docs/Web/API/WebGL_API)ライブラリーの 1 つであり、簡単に使い始められるという理由で選びました。Three が他の WebGL ライブラリーと比べて優秀だというつもりはありません。 [CopperLicht](https://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [PlayCanvas](https://playcanvas.com/) など、気軽に試してみてください。
 
 ## 環境構築
 
@@ -99,7 +100,8 @@ scene.add(camera);
 
 これらの値を試してみて、シーンで見えるものがどのように変わるかを見てみるとよいでしょう。
 
-> **メモ:** これらの座標（カメラの z 位置など）の引数に決まった単位は存在しないため、シーンに適している単位 (ミリメートル、メートル、フィートやマイルでも) で構いません。あなたの決めるところです。
+> [!NOTE]
+> これらの座標（カメラの z 位置など）の引数に決まった単位は存在しないため、シーンに適している単位 (ミリメートル、メートル、フィートやマイルでも) で構いません。あなたの決めるところです。
 
 ## シーンのレンダリング
 
diff --git a/files/ja/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/ja/games/techniques/3d_on_the_web/glsl_shaders/index.md
index 60ade105da52e2..cf02b0441d4e57 100644
--- a/files/ja/games/techniques/3d_on_the_web/glsl_shaders/index.md
+++ b/files/ja/games/techniques/3d_on_the_web/glsl_shaders/index.md
@@ -31,7 +31,8 @@ GLSL は JavaScript ほど直感的ではありません。 GLSL は強く型付
 
 これらのシェーダーの動作を説明する簡単なデモを作成しましょう。 最初に [Three.js のチュートリアル](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)を読んで、シーンの概念、そのオブジェクト、およびマテリアルを把握してください。
 
-> **メモ:** シェーダーを作成するために Three.js やその他のライブラリーを使用する必要はなく、純粋な [WebGL](/ja/docs/Web/API/WebGL_API) (Web Graphics Library) で十分です。 ここでは Three.js を使用して、背景となるコードを非常に単純でわかりやすくしているため、シェーダーのコードに集中することができます。 Three.js やその他の 3D ライブラリーは、多くのことを抽象化します。 このような例を生の WebGL で作成する場合は、実際に機能させるために多くの追加コードを作成する必要があります。
+> [!NOTE]
+> シェーダーを作成するために Three.js やその他のライブラリーを使用する必要はなく、純粋な [WebGL](/ja/docs/Web/API/WebGL_API) (Web Graphics Library) で十分です。 ここでは Three.js を使用して、背景となるコードを非常に単純でわかりやすくしているため、シェーダーのコードに集中することができます。 Three.js やその他の 3D ライブラリーは、多くのことを抽象化します。 このような例を生の WebGL で作成する場合は、実際に機能させるために多くの追加コードを作成する必要があります。
 
 ### 環境設定
 
diff --git a/files/ja/games/techniques/3d_on_the_web/webxr/index.md b/files/ja/games/techniques/3d_on_the_web/webxr/index.md
index 6bdaaa3f902f8e..47099b2decec19 100644
--- a/files/ja/games/techniques/3d_on_the_web/webxr/index.md
+++ b/files/ja/games/techniques/3d_on_the_web/webxr/index.md
@@ -7,7 +7,8 @@ slug: Games/Techniques/3D_on_the_web/WebXR
 
 仮想現実の概念自体は新しいものではありませんが、今ではそれをあるべき姿で機能させるためのテクノロジーと、それをウェブアプリケーションで活用するための JavaScript API があります。 この記事では、ゲームでの使用の観点から WebVR を紹介しています。
 
-> **メモ:** WebVR API は [WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) に置き換えられました。 WebVR は標準として承認されることはなく、ごく少数のブラウザーが既定で実装および有効化し、少数の機器に対応していました。
+> [!NOTE]
+> WebVR API は [WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) に置き換えられました。 WebVR は標準として承認されることはなく、ごく少数のブラウザーが既定で実装および有効化し、少数の機器に対応していました。
 
 ## VR 機器
 
@@ -15,13 +16,15 @@ Oculus Rift の人気とその他の多くの機器が間もなく市場に登
 
 ![](hmds.jpg)
 
-> **メモ:** 詳細については [WebVR の概念](/ja/docs/Web/API/WebVR_API/Concepts) をご覧ください。
+> [!NOTE]
+> 詳細については [WebVR の概念](/ja/docs/Web/API/WebVR_API/Concepts) をご覧ください。
 
 ## WebVR API
 
 [WebVR API](/ja/docs/Web/API/WebVR_API) は、コンピューターに接続された VR 機器の情報とヘッドセットの位置/向き/速度/加速度の情報をキャプチャし、それをゲームやその他のアプリケーションで使用できる有用なデータに変換するための中心的な API です。
 
-> **メモ:** もちろん、ゲームの作成に役立つ他の API もあります。 例えば、コントロール入力用の [ゲームパッド API](/ja/docs/Web/API/Gamepad_API) や、モバイルでのディスプレイの方向を扱うための [Device Orientation API](/ja/docs/Web/Events/Detecting_device_orientation) などです。
+> [!NOTE]
+> もちろん、ゲームの作成に役立つ他の API もあります。 例えば、コントロール入力用の [ゲームパッド API](/ja/docs/Web/API/Gamepad_API) や、モバイルでのディスプレイの方向を扱うための [Device Orientation API](/ja/docs/Web/Events/Detecting_device_orientation) などです。
 
 ### ブラウザーの対応と仕様書の状態
 
diff --git a/files/ja/games/techniques/audio_for_web_games/index.md b/files/ja/games/techniques/audio_for_web_games/index.md
index 9e2f1bad32908f..540b405dfdfa46 100644
--- a/files/ja/games/techniques/audio_for_web_games/index.md
+++ b/files/ja/games/techniques/audio_for_web_games/index.md
@@ -26,9 +26,11 @@ slug: Games/Techniques/Audio_for_Web_Games
 
 このように音声を再生するには、その一部を再生する必要があります。そのためには、音声サンプルの最後に一瞬の無音を入れるのが効果的です。この無音部分にジャンプして再生し、一時停止することで、JavaScript を使用して任意の時点でそのファイルを再生できるようになります。[自動再生ポリシーの最善の手法はこちら](/ja/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy)で詳しく説明されています。
 
-> **メモ:** もしブラウザーがあなたに音量を変更することを許可するならば、ファイルを音量ゼロで再生することも可能でしょう（後述）。また、音声を再生後に即時停止することは、音声の小さな断片が再生されないことを保証しない、ということにも注意してください。
+> [!NOTE]
+> もしブラウザーがあなたに音量を変更することを許可するならば、ファイルを音量ゼロで再生することも可能でしょう（後述）。また、音声を再生後に即時停止することは、音声の小さな断片が再生されないことを保証しない、ということにも注意してください。
 
-> **メモ:** モバイルのホーム画面にウェブアプリを追加することで特性が変化してしまうかもしれません。今のところ、 iOS 上の自動再生がこのケースに当てはまるようです。可能であれば、いくつかのデバイスとプラットフォームでコードがどう動くか試すべきです。
+> [!NOTE]
+> モバイルのホーム画面にウェブアプリを追加することで特性が変化してしまうかもしれません。今のところ、 iOS 上の自動再生がこのケースに当てはまるようです。可能であれば、いくつかのデバイスとプラットフォームでコードがどう動くか試すべきです。
 
 ### 音量
 
@@ -40,7 +42,8 @@ slug: Games/Techniques/Audio_for_Web_Games
 
 {{domxref("HTMLMediaElement")}} インターフェイスが備える [多くのプロパティ](/ja/docs/Web/API/HTMLMediaElement#properties) はトラックが再生可能な状態にあるかどうかを決定する助けになります。
 
-> **メモ:** 色々な意味でバッファリングの概念は時代遅れです。バイトレンジリクエストが許容される限り（これが既定の振る舞いです）、先行する内容のダウンロードの必要なしに音声の任意の点に飛ぶことができるべきです。しかしながら、先読みは依然として便利です。それなしでは、再生が始められるようになる前に、常にいくらかのクライアント・サーバー間通信が必要になるでしょう。
+> [!NOTE]
+> 色々な意味でバッファリングの概念は時代遅れです。バイトレンジリクエストが許容される限り（これが既定の振る舞いです）、先行する内容のダウンロードの必要なしに音声の任意の点に飛ぶことができるべきです。しかしながら、先読みは依然として便利です。それなしでは、再生が始められるようになる前に、常にいくらかのクライアント・サーバー間通信が必要になるでしょう。
 
 ### 並行した音声再生
 
@@ -118,11 +121,14 @@ slug: Games/Techniques/Audio_for_Web_Games
 
 [モバイルとデスクトップの HTMLMediaElement に対応している完全な互換性表](/ja/docs/Web/API/HTMLMediaElement#ブラウザーの互換性)があります。
 
-> **メモ:** 音声の同時再生は私たちの[同時音声テストの例](https://jsfiddle.net/dmkyaq0r/)を使ってテストされますが、そこでは標準の音声 API を使って 3 つの音声の同時再生を試しています。
+> [!NOTE]
+> 音声の同時再生は私たちの[同時音声テストの例](https://jsfiddle.net/dmkyaq0r/)を使ってテストされますが、そこでは標準の音声 API を使って 3 つの音声の同時再生を試しています。
 
-> **メモ:** 単純な自動再生機能は私たちの[自動再生テストの例](https://jsfiddle.net/vpdspp2b/)でテストされます。
+> [!NOTE]
+> 単純な自動再生機能は私たちの[自動再生テストの例](https://jsfiddle.net/vpdspp2b/)でテストされます。
 
-> **メモ:** 音量の可変性は私たちの[音量テストの例](https://jsfiddle.net/7ta12vw4/)でテストされます。
+> [!NOTE]
+> 音量の可変性は私たちの[音量テストの例](https://jsfiddle.net/7ta12vw4/)でテストされます。
 
 ## モバイルの回避処理
 
@@ -191,11 +197,14 @@ myAudio.addEventListener(
 );
 ```
 
-> **メモ:** JSFiddle　上で[私たちの音声スプライトプレイヤーライブ](https://jsfiddle.net/59vwaame/)を試すことができます。
+> [!NOTE]
+> JSFiddle　上で[私たちの音声スプライトプレイヤーライブ](https://jsfiddle.net/59vwaame/)を試すことができます。
 
-> **メモ:** 上に詳述したように、モバイルでは、スタートボタンが押されるといったようなユーザー開始イベントからコードを発動させる必要があるかもしれません。
+> [!NOTE]
+> 上に詳述したように、モバイルでは、スタートボタンが押されるといったようなユーザー開始イベントからコードを発動させる必要があるかもしれません。
 
-> **メモ:** ビットレートに気をつけてください。低ビットレートのエンコードではファイルサイズは小さくなりますが、シーク精度も低くなります。
+> [!NOTE]
+> ビットレートに気をつけてください。低ビットレートのエンコードではファイルサイズは小さくなりますが、シーク精度も低くなります。
 
 ### バックグラウンドミュージック (BGM)
 
@@ -209,7 +218,8 @@ myAudio.addEventListener(
 
 実現可能なクロスブラウザー戦略は、標準の `<audio>` 要素を使用して基本的な音声を提供し、対応している場合はウェブオーディオ API を使用して体験を拡張することでしょう。
 
-> **メモ:** 重要なのは、 iOS Safari がウェブオーディオ API に対応していることです。つまり、iOS 向けのネイティブ品質の音声で、ウェブベースのゲームを書くことが可能になりました。
+> [!NOTE]
+> 重要なのは、 iOS Safari がウェブオーディオ API に対応していることです。つまり、iOS 向けのネイティブ品質の音声で、ウェブベースのゲームを書くことが可能になりました。
 
 ウェブオーディオ API は音声再生の正確な時刻と制御を可能にするので、ゲームの没入感を高める重要な要素である、特定の瞬間にサンプルを再生するために使用することができます。ゲームの没入感を高めるには、爆発の後に轟音が続くのではなく、轟音と一緒に爆発してほしいものです。
 
@@ -375,7 +385,8 @@ trackEls.forEach((el, i) => {
 
 ゲーム世界の文脈では、異なる状況で使用されるループやサンプルがあるかもしれません。よりシームレスな体験のために、他のトラックと同期させることができると便利です。
 
-> **メモ:** この例では、次の曲を導入する前にビートが終了するのを待ちません。トラックの BPM (Beats Per Minute) がわかっていれば、このようにすることができます。
+> [!NOTE]
+> この例では、次の曲を導入する前にビートが終了するのを待ちません。トラックの BPM (Beats Per Minute) がわかっていれば、このようにすることができます。
 
 新しい曲の導入は、ビート／バー／フレーズなど、 BGM を分割したい単位で行うと、より自然に聞こえることがあります。
 
@@ -396,9 +407,11 @@ if (offset === 0) {
 }
 ```
 
-> **メモ:** こちらの JSFiddle で、私たちの[待ち時間計算機のコードを試す](https://jsfiddle.net/c87z11jj/2/)ことができます（今回はバーに同期しています）。
+> [!NOTE]
+> こちらの JSFiddle で、私たちの[待ち時間計算機のコードを試す](https://jsfiddle.net/c87z11jj/2/)ことができます（今回はバーに同期しています）。
 
-> **メモ:** 最初の引数が 0 またはコンテキスト `currentTime` よりも小さい場合、再生は直ちに開始されます。
+> [!NOTE]
+> 最初の引数が 0 またはコンテキスト `currentTime` よりも小さい場合、再生は直ちに開始されます。
 
 ### 場所つきの音声
 
diff --git a/files/ja/games/techniques/controls_gamepad_api/index.md b/files/ja/games/techniques/controls_gamepad_api/index.md
index ae5aad9fb74770..d414d233ad40c2 100644
--- a/files/ja/games/techniques/controls_gamepad_api/index.md
+++ b/files/ja/games/techniques/controls_gamepad_api/index.md
@@ -37,7 +37,8 @@ Hungry Fridge ゲームのフルバージョンが最初に構築され、次に
 
 以下に説明するコードは、Hungry Fridge ゲームのフルバージョンからのものですが、デモのものとほぼ同じです。唯一の違いは、フルバージョンでは、スーパーターボモードを使用してゲームを起動するかどうかを決定する`ターボ`変数。 これは独立して機能するので、ゲームパッドが接続されていなくてもオンにすることができます。
 
-> **メモ:** イースターエッグの時間: ゲームパッドを接続せずにデスクトップで Super Turbo Hungry Fridge を起動する隠しオプションがあります。スクリーンの右上にあるゲームパッドアイコンをクリックします。 それはスーパーターボモードでゲームを起動し、あなたはキーボードで冷蔵庫を制御することができます。タレットを左右に回すたには A と D、撃つためには W、移動の多面実は矢印キーを使います。
+> [!NOTE]
+> イースターエッグの時間: ゲームパッドを接続せずにデスクトップで Super Turbo Hungry Fridge を起動する隠しオプションがあります。スクリーンの右上にあるゲームパッドアイコンをクリックします。 それはスーパーターボモードでゲームを起動し、あなたはキーボードで冷蔵庫を制御することができます。タレットを左右に回すたには A と D、撃つためには W、移動の多面実は矢印キーを使います。
 
 ## 実装
 
diff --git a/files/ja/games/techniques/webrtc_data_channels/index.md b/files/ja/games/techniques/webrtc_data_channels/index.md
index 5afa568c84ad0a..8ad992c3775fca 100644
--- a/files/ja/games/techniques/webrtc_data_channels/index.md
+++ b/files/ja/games/techniques/webrtc_data_channels/index.md
@@ -21,7 +21,8 @@ WebRTC データチャネルを使用すると、ピアとのアクティブな
 
 使用できるライブラリーの一つに[p2p](https://github.com/js-platform/p2p)ライブラリーがあります。このライブラリーは、ピア接続を作成し、ストリームとデータチャネルを設定するための簡単なAPIを提供しています。また、ブローカーサーバーコンポーネントとホスティングブローカーもあり、自分で設定する代わりに使用することができます。
 
-> **メモ:** 近々、ここにコンテンツを追加していく予定です。
+> [!NOTE]
+> 近々、ここにコンテンツを追加していく予定です。
 
 ## 原典情報
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_phaser/index.md b/files/ja/games/tutorials/2d_breakout_game_phaser/index.md
index 3251282fcfda59..ef95e7bd3cd7c7 100644
--- a/files/ja/games/tutorials/2d_breakout_game_phaser/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_phaser/index.md
@@ -40,7 +40,8 @@ slug: Games/Tutorials/2D_breakout_game_Phaser
 
 その後、好きなフレームワークを選んで、プロジェクトに使用することができます。私たちは、良いサポートとコミュニティが利用でき、プラグインの良いセットがある、堅実なフレームワークである Phaser を選びました。フレームワークは、開発時間を短縮し、退屈な部分を引き受けてくれるので、あなたは楽しいことに集中することができます。しかし、フレームワークは常に完璧というわけではありません。予期せぬことが起こったり、フレームワークが提供しない機能を書きたい場合、純粋な JavaScript の知識が必要になります。
 
-> **メモ:** この連載記事は、ゲーム開発の体験型ワークショップの素材として使用することができます。また、Phaser を使ったゲーム開発についての講演を行う場合、このチュートリアルを元にした [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) を使用することができます。
+> [!NOTE]
+> この連載記事は、ゲーム開発の体験型ワークショップの素材として使用することができます。また、Phaser を使ったゲーム開発についての講演を行う場合、このチュートリアルを元にした [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) を使用することができます。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
index 48ccd11ab9e70b..84a86868dd749d 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
@@ -100,7 +100,8 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}
 
-> **メモ:** 壁に当たるたびにボールの色をランダムに変えてみてください。
+> [!NOTE]
+> 壁に当たるたびにボールの色をランダムに変えてみてください。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
index d3fa29649337ec..1263f82808b620 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
@@ -104,7 +104,8 @@ drawBricks();
 
 {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/Lu3vtejz/","","395")}}
 
-> **メモ:** 行や列にあるブロックの数や位置を替えてみましょう。
+> [!NOTE]
+> 行や列にあるブロックの数や位置を替えてみましょう。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
index 83adf456480a6d..64040cde7666e4 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
@@ -127,7 +127,8 @@ collisionDetection();
 
 {{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}
 
-> **メモ:** ボールの色をブロックに当たったときに変えましょう。
+> [!NOTE]
+> ボールの色をブロックに当たったときに変えましょう。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
index a154c8a9f1f0a7..65d0e0fb1aa7e4 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
@@ -105,7 +105,8 @@ ctx.closePath();
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}
 
-> **メモ:** 与えられた図形の大きさや色を変えてみましょう。
+> [!NOTE]
+> 与えられた図形の大きさや色を変えてみましょう。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
index 2ead4ecb1d2cc0..c80d2609c0aa8e 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
@@ -98,7 +98,8 @@ requestAnimationFrame(draw);
 
 {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}
 
-> **メモ:** ライフの数とパドルでボールが跳ねる角度を替えてみましょう。
+> [!NOTE]
+> ライフの数とパドルでボールが跳ねる角度を替えてみましょう。
 
 ## ゲームクリア - 今のところは
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
index 421d588af34fc4..c3ae1151d9e977 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
@@ -77,7 +77,8 @@ if (y + dy < ballRadius) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/L61c9y50/","","395")}}
 
-> **メモ:** ボールがパドルに当たったときに速く動くようにしましょう。
+> [!NOTE]
+> ボールがパドルに当たったときに速く動くようにしましょう。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.md
index dfd638ba5ad6b2..877bede3381a96 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.md
@@ -32,9 +32,11 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
 
 まずは JavaScript だけで始めるのがウェブゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークは JavaScript 言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単に JavaScript で自分なりの解を出すということもできるのです。
 
-> **メモ:** ゲームライブラリーを用いた 2D ウェブゲーム開発に興味があるのであれば、このシリーズに対応する [Phaser を使ったブロック崩しゲーム](/ja/docs/Games/Tutorials/2D_breakout_game_Phaser)も参照してください。
+> [!NOTE]
+> ゲームライブラリーを用いた 2D ウェブゲーム開発に興味があるのであれば、このシリーズに対応する [Phaser を使ったブロック崩しゲーム](/ja/docs/Games/Tutorials/2D_breakout_game_Phaser)も参照してください。
 
-> **メモ:** このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいた [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) も利用できます。
+> [!NOTE]
+> このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいた [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) も利用できます。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
index 29a1700bc47620..e1efa14c671ada 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
@@ -42,7 +42,8 @@ function mouseMoveHandler(e) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}
 
-> **メモ:** パドル動作の境界を調節して、Canvasの両端でもパドルの半分ではなく全体が見えるようにしてください。
+> [!NOTE]
+> パドル動作の境界を調節して、Canvasの両端でもパドルの半分ではなく全体が見えるようにしてください。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
index d739a61f78e80a..f60bd232524bfa 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
@@ -134,7 +134,8 @@ function draw() {
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}
 
-> **メモ:** 動くボールの速さや向きを変えてみましょう。
+> [!NOTE]
+> 動くボールの速さや向きを変えてみましょう。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
index 0833939cf1d30e..1e75888e109e03 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
@@ -118,7 +118,8 @@ drawPaddle();
 
 {{JSFiddleEmbed("https://jsfiddle.net/L9xfn4up/1/","","395")}}
 
-> **メモ:** パドルを速く、または遅く動くようにしたり、大きさを変えたりしてみましょう。
+> [!NOTE]
+> パドルを速く、または遅く動くようにしたり、大きさを変えたりしてみましょう。
 
 ## 次のステップ
 
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
index 41ea97860775f1..0a8ec560fef046 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
@@ -100,7 +100,8 @@ function collisionDetection() {
 
 {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}
 
-> **メモ:** ブロックに当たるたびにより多くのポイントを追加し、ゲームの終わりに集めたポイントの数を表示するようにしましょう。
+> [!NOTE]
+> ブロックに当たるたびにより多くのポイントを追加し、ゲームの終わりに集めたポイントの数を表示するようにしましょう。
 
 ## 次のステップ
 
diff --git a/files/ja/glossary/base64/index.md b/files/ja/glossary/base64/index.md
index 078f0e04638d20..a8c06b98262472 100644
--- a/files/ja/glossary/base64/index.md
+++ b/files/ja/glossary/base64/index.md
@@ -36,7 +36,8 @@ Base64 の 1 文字はデータのちょうど 6 ビット分を表します。
 - {{domxref("Window.btoa()")}}（{{domxref("WorkerGlobalScope.btoa()", "ワーカーでも利用可能", "", "nocode")}}）: バイナリーデータの文字列から Base64 エンコード方式の ASCII 文字列を作成します（"btoa" は "binary to ASCII" と読んでください）。
 - {{domxref("Window.atob()")}}（{{domxref("WorkerGlobalScope.atob()", "ワーカーでも利用可能", "", "nocode")}}）: Base64 エンコード方式の文字列をデコードします（"atob" は "ASCII to binary" と読んでください）。
 
-> **メモ:** Base64 はテキストエンコードではなくバイナリーエンコード方式ですが、`btoa` と `atob` はウェブプラットフォームがバイナリーデータ型に対応する前に追加されました。その結果、2 つの関数は文字列を使用してバイナリーデータを表しており、各文字の{{glossary("code point", "コードポイント")}}が各バイトの値を表します。このため、`btoa` は任意のテキストデータをエンコードするために使用することができます。例えば、テキストや HTML 文書の Base64 `data:` URL を作成する場合などです。
+> [!NOTE]
+> Base64 はテキストエンコードではなくバイナリーエンコード方式ですが、`btoa` と `atob` はウェブプラットフォームがバイナリーデータ型に対応する前に追加されました。その結果、2 つの関数は文字列を使用してバイナリーデータを表しており、各文字の{{glossary("code point", "コードポイント")}}が各バイトの値を表します。このため、`btoa` は任意のテキストデータをエンコードするために使用することができます。例えば、テキストや HTML 文書の Base64 `data:` URL を作成する場合などです。
 >
 > しかし、バイトとコードポイントの対応が確実に成り立つのは `0x7f` までのコードポイントだけです。さらに、`0xff` を超えるコードポイントは、1 バイトの最大値を超えるために `btoa` でエラーが発生します。次の節では、任意の Unicode テキストをエンコードするときに、この制限を回避するためにどのように作業するかについて詳しく説明します。
 
diff --git a/files/ja/glossary/block-level_content/index.md b/files/ja/glossary/block-level_content/index.md
index 2583a622a95d8e..2c83b8947e12d1 100644
--- a/files/ja/glossary/block-level_content/index.md
+++ b/files/ja/glossary/block-level_content/index.md
@@ -11,9 +11,11 @@ CSS において、ブロックレイアウトに関係するコンテンツは*
 
 ブロックレイアウトでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。各ボックスの左の外辺は、格納するブロックの左の辺に接します。ブロックレベル要素は常に新しい行から始まります。英語やアラビア語のような横書きでは、親要素（コンテナー）の水平空間全体と、コンテンツを含む高さに等しい垂直空間を占めるため、「ブロック」を作成することになります。
 
-> **メモ:** 上記のブロックレイアウトの動作は、包含ブロックの書字方向 ([`writing-mode`](/ja/docs/Web/CSS/writing-mode)) が[既定値](/ja/docs/Web/CSS/writing-mode#formal_definition)と異なる場合には変わります。
+> [!NOTE]
+> 上記のブロックレイアウトの動作は、包含ブロックの書字方向 ([`writing-mode`](/ja/docs/Web/CSS/writing-mode)) が[既定値](/ja/docs/Web/CSS/writing-mode#formal_definition)と異なる場合には変わります。
 
-> **メモ:** HTML (_HyperText Markup Language_) の要素は従来、「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS において定義されています。
+> [!NOTE]
+> HTML (_HyperText Markup Language_) の要素は従来、「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS において定義されています。
 
 ## 例
 
diff --git a/files/ja/glossary/breadcrumb/index.md b/files/ja/glossary/breadcrumb/index.md
index e90d5e477df57e..cb078891a13e9f 100644
--- a/files/ja/glossary/breadcrumb/index.md
+++ b/files/ja/glossary/breadcrumb/index.md
@@ -15,7 +15,8 @@ l10n:
 
 パンくずリストが適切に機能していれば、ユーザーはウェブサイト内での現在位置を確かめ、どのように今のページに到着したのかを知ることができます。そのおかげで、ユーザーはすでに見たページに簡単に戻ることができますし、余計なクリックをせずに上の階層のページに移動することができます。
 
-> **メモ:** パンくずナビゲーションメニュー専用の[意味づけされた HTML 要素](https://html.spec.whatwg.org/multipage/semantics-other.html#rel-up)はありませんが、一般的にその階層構造を表すのには {{htmlelement("ol")}} 要素が使用されます。
+> [!NOTE]
+> パンくずナビゲーションメニュー専用の[意味づけされた HTML 要素](https://html.spec.whatwg.org/multipage/semantics-other.html#rel-up)はありませんが、一般的にその階層構造を表すのには {{htmlelement("ol")}} 要素が使用されます。
 
 ## 関連情報
 
diff --git a/files/ja/glossary/call_stack/index.md b/files/ja/glossary/call_stack/index.md
index 3aad349b0fb102..c9c31e4d33626f 100644
--- a/files/ja/glossary/call_stack/index.md
+++ b/files/ja/glossary/call_stack/index.md
@@ -35,14 +35,16 @@ greeting();
 1. `greeting()` 関数の呼び出しまで、すべての関数を無視する。
 2. `greeting()` 関数をコールスタックリストに追加する。
 
-   > **メモ:** コールスタックリスト:
+   > [!NOTE]
+   > コールスタックリスト:
    > \- greeting
 
 3. `greeting()` 関数の中にあるコードのすべての行を実行する。
 4. `sayHi()` 関数の呼び出しまで移動する。
 5. コールスタックリストに `sayHi()` 関数を追加する。
 
-   > **メモ:** コールスタックリスト:
+   > [!NOTE]
+   > コールスタックリスト:
    > \- greeting
    > \- sayHi
 
@@ -50,13 +52,15 @@ greeting();
 7. 実行を `sayHi()` を呼び出した行に戻し、 `greeting()` 関数の残りの実行を続ける。
 8. `sayHi()` 関数をコールスタックリストから削除する。
 
-   > **メモ:** コールスタックリスト:
+   > [!NOTE]
+   > コールスタックリスト:
    > \- greeting
 
 9. `greeting()` 関数の中のすべてを実行したら、これを呼び出した行に戻り、残りの JavaScript コードの実行を続ける。
 10. `greeting()` 関数をコールスタックリストから削除する。
 
-    > **メモ:** コールスタックリスト:
+    > [!NOTE]
+    > コールスタックリスト:
     > 空
 
 空のコールスタックで始め、関数を呼び出す度に、自動的にそれがコールスタックに追加され、コードをすべて実行した後、自動的にコールスタックから削除されます。最後に、またからのスタックで終了します。
diff --git a/files/ja/glossary/certificate_authority/index.md b/files/ja/glossary/certificate_authority/index.md
index a150f5f2aaae04..0b3bf1f1e7f21c 100644
--- a/files/ja/glossary/certificate_authority/index.md
+++ b/files/ja/glossary/certificate_authority/index.md
@@ -11,7 +11,8 @@ slug: Glossary/Certificate_authority
 
 認証局は、インターネットの[公開鍵基盤](https://ja.wikipedia.org/wiki/公開鍵基盤)の一部で、ブラウザーがウェブサイトの身元を確認し、 SSL （および HTTPS）で安全に接続できるようにするものです。
 
-> **メモ:** ウェブブラウザーには、あらかじめ「ルート証明書」のリストが搭載されています。ブラウザーはこれらを使って、ウェブサイトの証明書がルート証明書に「チェインバック」する（つまり、ルート証明書の所有者や中間認証局に信頼されている）認証局によって署名されていることを確実にチェックすることができる。最終的に、このプロセスは、すべての認証局が証明書に署名する前に適切な身元確認を行うことに依存しています。
+> [!NOTE]
+> ウェブブラウザーには、あらかじめ「ルート証明書」のリストが搭載されています。ブラウザーはこれらを使って、ウェブサイトの証明書がルート証明書に「チェインバック」する（つまり、ルート証明書の所有者や中間認証局に信頼されている）認証局によって署名されていることを確実にチェックすることができる。最終的に、このプロセスは、すべての認証局が証明書に署名する前に適切な身元確認を行うことに依存しています。
 
 ## 関連情報
 
diff --git a/files/ja/glossary/composite_operation/index.md b/files/ja/glossary/composite_operation/index.md
index c73b6b5de1ad80..f355dda0f75592 100644
--- a/files/ja/glossary/composite_operation/index.md
+++ b/files/ja/glossary/composite_operation/index.md
@@ -15,7 +15,8 @@ CSS では、 CSS ルールのプロパティの値がそのプロパティの
 - **追加**: 効果値は基盤値に追加されます。
 - **累積**: 効果値は基礎値に結合されます。
 
-> **メモ:** CSSの合成演算はアニメーションにのみ適用されます。
+> [!NOTE]
+> CSSの合成演算はアニメーションにのみ適用されます。
 
 ## 関連情報
 
diff --git a/files/ja/glossary/entity/index.md b/files/ja/glossary/entity/index.md
index af9006755a8031..31257928979062 100644
--- a/files/ja/glossary/entity/index.md
+++ b/files/ja/glossary/entity/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Entity
 
 {{glossary("HTML")}} **エンティティ**とは、アンパサンド (`&`) で始まりセミコロン (`;`)で終わるテキスト (文字列) のひと固まりです。エンティティは（通常は HTML コードとして解釈される）予約済み文字や、(ノーブレークスペースのように) 見えない文字を表示するためによく使用されます。標準キーボードでは入力が難しい文字の代わりに使用することもできます。
 
-> **メモ:** 多くの文字は覚えやすいエンティティです。例えば、コピーライト記号 (`©`) のエンティティは `&copy;` です。覚えにくものとしては、`&#8212;` や `&#x2014;` があります。[リファレンス表](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)や[デコーダーツール](https://mothereff.in/html-entities)を使用してみてください。
+> [!NOTE]
+> 多くの文字は覚えやすいエンティティです。例えば、コピーライト記号 (`©`) のエンティティは `&copy;` です。覚えにくものとしては、`&#8212;` や `&#x2014;` があります。[リファレンス表](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)や[デコーダーツール](https://mothereff.in/html-entities)を使用してみてください。
 
 ## 予約済み文字
 
diff --git a/files/ja/glossary/entity_header/index.md b/files/ja/glossary/entity_header/index.md
index 93961eb61d8f84..a2790818dc3457 100644
--- a/files/ja/glossary/entity_header/index.md
+++ b/files/ja/glossary/entity_header/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{GlossarySidebar}}
 
-> **警告:** 現在の HTTP/1.1 仕様書では、エンティティ、エンティティヘッダー、エンティティ本体を参照することはなくなりました。一部のフィールドは{{glossary("Representation header", "表現ヘッダー")}}フィールドとして参照されるようになりました。
+> [!WARNING]
+> 現在の HTTP/1.1 仕様書では、エンティティ、エンティティヘッダー、エンティティ本体を参照することはなくなりました。一部のフィールドは{{glossary("Representation header", "表現ヘッダー")}}フィールドとして参照されるようになりました。
 
 エンティティヘッダーは {{glossary("HTTP_header", "HTTP ヘッダー")}}の一種で、 HTTP メッセージの本体を説明します（すなわちメッセージ本体についてのメタデータです）。エンティティヘッダーには、 {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}}, {{HTTPHeader("Content-Type")}}, {{HTTPHeader("Expires")}}, などがあります。エンティティヘッダーは HTTP のリクエストおよびレスポンスの両方に存在することがあります。
 
diff --git a/files/ja/glossary/first-class_function/index.md b/files/ja/glossary/first-class_function/index.md
index 079921152b7926..1835c205bdd52e 100644
--- a/files/ja/glossary/first-class_function/index.md
+++ b/files/ja/glossary/first-class_function/index.md
@@ -41,7 +41,8 @@ greeting(sayHello, "JavaScript!");
 
 ここでは `sayHello()` 関数を `greeting()` 関数の引数として渡しており、関数を**変数**として扱っていることを示しています。
 
-> **メモ:** 他の関数へ引数として渡される関数は、**{{glossary("Callback function", "コールバック関数")}}** と呼ばれます。 _`sayHello` はコールバック関数です。_
+> [!NOTE]
+> 他の関数へ引数として渡される関数は、**{{glossary("Callback function", "コールバック関数")}}** と呼ばれます。 _`sayHello` はコールバック関数です。_
 
 ### 関数を返す
 
@@ -55,7 +56,8 @@ function sayHello() {
 
 この例では、関数を他の関数から返す必要があります。 - _関数を返すことができるのは、 JavaScript では関数を値として扱っているからです。_
 
-> **メモ:** 関数を返す関数は**高階関数**と呼ばれます。
+> [!NOTE]
+> 関数を返す関数は**高階関数**と呼ばれます。
 
 ## 関連情報
 
diff --git a/files/ja/glossary/http_header/index.md b/files/ja/glossary/http_header/index.md
index 945b77a46e7a5a..a26228b9cbf001 100644
--- a/files/ja/glossary/http_header/index.md
+++ b/files/ja/glossary/http_header/index.md
@@ -48,7 +48,8 @@ X-Cache: Hit from cloudfront
 X-Cache-Info: cached
 ```
 
-> **メモ:** 仕様書の古いバージョンでは次のようになっていました。
+> [!NOTE]
+> 仕様書の古いバージョンでは次のようになっていました。
 >
 > - {{Glossary("General header", "一般ヘッダー")}}: リクエストとレスポンスの両方に適用されるヘッダーですが、最終的に本体で送信されるデータとは関係がありません。
 > - {{Glossary("Entity header", "エンティティヘッダー")}}: コンテンツの長さや MIME タイプなど、エンティティの本体に関する詳細情報を含むヘッダー（これは、これで表現メタデータヘッダーと呼ばれるもののスーパーセットです）。
diff --git a/files/ja/glossary/index.md b/files/ja/glossary/index.md
index 58e066197a266d..ea117736d45300 100644
--- a/files/ja/glossary/index.md
+++ b/files/ja/glossary/index.md
@@ -10,6 +10,8 @@ slug: Glossary
 
 サイドバーから用語集を選択することができます。
 
-> **メモ:** この用語集は、現在も進行中です。[新しい項目を書いたり](/ja/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary)、既存のものをより良くすることで改善に協力することができます。
+> [!NOTE]
+> この用語集は、現在も進行中です。[新しい項目を書いたり](/ja/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary)、既存のものをより良くすることで改善に協力することができます。
 
-> **メモ:** 日本語訳注: 英語版に存在する用語を訳す場合、ページタイトルを「Array (配列)」のように、英語の後に日本語を併記するようにしてください (タイトルを翻訳する場合)。
+> [!NOTE]
+> 日本語訳注: 英語版に存在する用語を訳す場合、ページタイトルを「Array (配列)」のように、英語の後に日本語を併記するようにしてください (タイトルを翻訳する場合)。
diff --git a/files/ja/glossary/inline-level_content/index.md b/files/ja/glossary/inline-level_content/index.md
index 47b292035dbdda..f39d1f977199d4 100644
--- a/files/ja/glossary/inline-level_content/index.md
+++ b/files/ja/glossary/inline-level_content/index.md
@@ -13,7 +13,8 @@ CSS において、インラインレイアウトに関係するコンテンツ
 
 ![inline layout](inline_layout.png)
 
-> **メモ:** HTML (_HyperText Markup Language_) の要素は従来、「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS において定義されています。
+> [!NOTE]
+> HTML (_HyperText Markup Language_) の要素は従来、「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS において定義されています。
 
 ## 例
 
diff --git a/files/ja/glossary/method/index.md b/files/ja/glossary/method/index.md
index 6be3041ee45e15..c7c3a6e3ffd017 100644
--- a/files/ja/glossary/method/index.md
+++ b/files/ja/glossary/method/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Method
 
 **メソッド**は{{glossary("object","オブジェクト")}}の{{glossary("property","プロパティ")}}である{{glossary("function", "関数")}}です。メソッドには 2 種類があります。オブジェクトインスタンスごとに内蔵されたタスクとして実行される*インスタンスメソッド*と、オブジェクトのコンストラクターで直接呼び出しを行うタスクである*{{Glossary("static method", "静的メソッド")}}*です。
 
-> **メモ:** JavaScript では、関数自身はオブジェクトです。そういう意味では、メソッドは実際には関数への{{glossary("object reference", "オブジェクト参照")}}です。
+> [!NOTE]
+> JavaScript では、関数自身はオブジェクトです。そういう意味では、メソッドは実際には関数への{{glossary("object reference", "オブジェクト参照")}}です。
 
 ## 詳細情報
 
diff --git a/files/ja/glossary/serializable_object/index.md b/files/ja/glossary/serializable_object/index.md
index f677fa45a974e2..1bc657543c8354 100644
--- a/files/ja/glossary/serializable_object/index.md
+++ b/files/ja/glossary/serializable_object/index.md
@@ -24,4 +24,5 @@ l10n:
 すべてのオブジェクトが、シリアライズ可能なオブジェクトとは限りません。
 シリアライズ可能なオブジェクトについては、[構造化複製アルゴリズム > 対応済みの型](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#対応済みの型)に一覧があります。
 
-> **メモ:** シリアライズ可能なオブジェクトは、[Web IDL ファイル](https://github.com/w3c/webref/tree/main/ed/idl) に `[Serializable]` 属性で示されています。
+> [!NOTE]
+> シリアライズ可能なオブジェクトは、[Web IDL ファイル](https://github.com/w3c/webref/tree/main/ed/idl) に `[Serializable]` 属性で示されています。
diff --git a/files/ja/glossary/tls/index.md b/files/ja/glossary/tls/index.md
index aa80efcbd7cc3e..81d9aee6036b82 100644
--- a/files/ja/glossary/tls/index.md
+++ b/files/ja/glossary/tls/index.md
@@ -9,7 +9,8 @@ slug: Glossary/TLS
 
 最新のブラウザーはすべて TLS プロトコルに対応しており、有効な{{Glossary("Digital certificate", "デジタル証明書")}}の提供をサーバーに要求してその身元を確認し、安全な接続を確立します。クライアントとサーバーの両者がそれぞれのデジタル証明書を提供すれば、相互に認証することができます。
 
-> **メモ:** TLS 1.0 と 1.1 への対応は、2020 年の初頭にすべての主要なブラウザーから削除される予定です。今後はウェブサーバーが TLS 1.2 や 1.3 に対応していることを確認する必要があります。 Firefox はバージョン 74 時点で、古いバージョンの TLS を使用しているサーバーに接続する場合に [Secure Connection Failed](https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect) エラーを返すようになる予定です ([Firefox バグ 1606734](https://bugzil.la/1606734))。
+> [!NOTE]
+> TLS 1.0 と 1.1 への対応は、2020 年の初頭にすべての主要なブラウザーから削除される予定です。今後はウェブサーバーが TLS 1.2 や 1.3 に対応していることを確認する必要があります。 Firefox はバージョン 74 時点で、古いバージョンの TLS を使用しているサーバーに接続する場合に [Secure Connection Failed](https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect) エラーを返すようになる予定です ([Firefox バグ 1606734](https://bugzil.la/1606734))。
 
 1. 仕様書
 
diff --git a/files/ja/glossary/transient_activation/index.md b/files/ja/glossary/transient_activation/index.md
index ebed2c998a985a..3b695cae157b3f 100644
--- a/files/ja/glossary/transient_activation/index.md
+++ b/files/ja/glossary/transient_activation/index.md
@@ -16,7 +16,8 @@ _一時的な有効化_ を必要とする API の例は､[ユーザーによ
 
 プログラムから現在のウインドウの一時的な有効化の状態を参照するには､{{domxref("UserActivation.isActive")}} プロパティを参照します｡
 
-> **メモ:** 一時的な有効化は (他の操作によって更新されなければ) タイムアウトによって無効になり､API によって「消費される」こともあります｡最初にセットされた後はリセットされないユーザーによる有効化は、{{Glossary("Sticky activation", "粘着的な有効化")}}を参照してください。
+> [!NOTE]
+> 一時的な有効化は (他の操作によって更新されなければ) タイムアウトによって無効になり､API によって「消費される」こともあります｡最初にセットされた後はリセットされないユーザーによる有効化は、{{Glossary("Sticky activation", "粘着的な有効化")}}を参照してください。
 
 ## 関連情報
 
diff --git a/files/ja/glossary/vendor_prefix/index.md b/files/ja/glossary/vendor_prefix/index.md
index 667075afab7d90..146164aee1d2c1 100644
--- a/files/ja/glossary/vendor_prefix/index.md
+++ b/files/ja/glossary/vendor_prefix/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Vendor_Prefix
 
 ブラウザーベンダー (提供元) は、時に試験的または非標準な CSS プロパティおよび JavaScript API に接頭辞を追加することがあります。これにより、開発者は標準化プロセスの中で、理論上は、ウェブ開発者のコードを壊すことなく新しいアイデアを試すことができます。開発者は、ブラウザーの振る舞いが標準化されるまで、接頭辞を外したプロパティを導入するのを待つべきです。
 
-> **メモ:** ブラウザーベンダーは、実験的な機能にベンダー接頭辞をつけることをやめるようになってきています。ウェブ開発者は、実験的な機能であるにもかかわらず、実運用のウェブサイトで使用し続けてきました。これはブラウザーベンダーが互換性を維持して、新しい機能を導入することを困難にしてしまいました。これはシェアの小さなブラウザーにとっても有害で、有名なウェブサイトを読み込むために他のブラウザーの接頭辞を追加せざるを得ない結果になりました。
+> [!NOTE]
+> ブラウザーベンダーは、実験的な機能にベンダー接頭辞をつけることをやめるようになってきています。ウェブ開発者は、実験的な機能であるにもかかわらず、実運用のウェブサイトで使用し続けてきました。これはブラウザーベンダーが互換性を維持して、新しい機能を導入することを困難にしてしまいました。これはシェアの小さなブラウザーにとっても有害で、有名なウェブサイトを読み込むために他のブラウザーの接頭辞を追加せざるを得ない結果になりました。
 >
 > 最近は、実験的な機能をユーザーが制御するフラグや設定によって隠して追加するようにし、より早く安定状態になるようにより小さな仕様を作成する傾向があります。
 
diff --git a/files/ja/glossary/void_element/index.md b/files/ja/glossary/void_element/index.md
index fad6c4950d01f0..e2bed53956400f 100644
--- a/files/ja/glossary/void_element/index.md
+++ b/files/ja/glossary/void_element/index.md
@@ -44,7 +44,8 @@ HTML 要素の開始タグの末尾に `/` （スラッシュ）文字がある
 
 子ノードを保有できない SVG と MathML 要素の開始タグは、自己完結型であることをマークすることが許されています。このような場合、要素の開始タグが自己完結型とマークされていれば、その要素は終了タグを持つべきではありません。
 
-> **メモ:** 開始タグの末尾にある `/` (スラッシュ) 文字の前に、引用されていない属性値が直接ある場合（間に空白がない場合）、スラッシュはパーサーによって破棄されるのではなく、属性値の一部となります。例えば、`<img src=http://www.example.com/logo.svg/>` というマークアップは `src` 属性の値が `http://www.example.com/logo.svg/` であることを意味します - これは URL が間違っていることを意味します。
+> [!NOTE]
+> 開始タグの末尾にある `/` (スラッシュ) 文字の前に、引用されていない属性値が直接ある場合（間に空白がない場合）、スラッシュはパーサーによって破棄されるのではなく、属性値の一部となります。例えば、`<img src=http://www.example.com/logo.svg/>` というマークアップは `src` 属性の値が `http://www.example.com/logo.svg/` であることを意味します - これは URL が間違っていることを意味します。
 
 ## 関連情報
 
diff --git a/files/ja/glossary/xforms/index.md b/files/ja/glossary/xforms/index.md
index f87eee52fc1a36..5b6d2230b089ab 100644
--- a/files/ja/glossary/xforms/index.md
+++ b/files/ja/glossary/xforms/index.md
@@ -7,4 +7,5 @@ slug: Glossary/XForms
 
 **XForms** はウェブフォームを構築し、フォームのデータを {{glossary("XML")}} 形式で処理するための慣例です。
 
-> **メモ:** もう主要なブラウザーは XForms に対応していません。 — 代わりに [HTML5 フォーム](/ja/docs/Learn/Forms)を使うことをお勧めします。
+> [!NOTE]
+> もう主要なブラウザーは XForms に対応していません。 — 代わりに [HTML5 フォーム](/ja/docs/Learn/Forms)を使うことをお勧めします。
diff --git a/files/ja/learn/accessibility/accessibility_troubleshooting/index.md b/files/ja/learn/accessibility/accessibility_troubleshooting/index.md
index 4a4b651bb2052e..409101a0258846 100644
--- a/files/ja/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/ja/learn/accessibility/accessibility_troubleshooting/index.md
@@ -39,7 +39,8 @@ l10n:
 
 この評価の開始時点であなたがサイトを表示したとき、いくつかの違いや問題を見つけることでしょう。これは主にマークアップ中の違いが原因であり、CSS が正しく適用されずにスタイリングの問題を引き起こしています。心配しないでください。以降の節でそれらの問題を修正します！
 
-> **メモ:** 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+> [!NOTE]
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
 ## プロジェクトの概要
 
@@ -55,7 +56,8 @@ l10n:
 2. スクリーンリーダーのユーザーがナビゲートしやすいように、記事のテキストを変更できますか？
 3. サイトのナビゲーションメニュー (`<div class="nav"></div>` で囲まれた部分) は正しい HTML 意味づけ要素の中に入れることでよりアクセシブルになったかもしれません。どれを変更する必要がありますか？変更してください。
 
-> **メモ:** タグをスタイル付けする CSS ルールセレクターは、意味づけされた見出しのために適切に変更する必要があります。段落要素を加えると、スタイルもより良く見えることに気がつくでしょう。
+> [!NOTE]
+> タグをスタイル付けする CSS ルールセレクターは、意味づけされた見出しのために適切に変更する必要があります。段落要素を加えると、スタイルもより良く見えることに気がつくでしょう。
 
 ### 画像
 
diff --git a/files/ja/learn/accessibility/css_and_javascript/index.md b/files/ja/learn/accessibility/css_and_javascript/index.md
index 4c45dc838d1f3a..00360f01f1e895 100644
--- a/files/ja/learn/accessibility/css_and_javascript/index.md
+++ b/files/ja/learn/accessibility/css_and_javascript/index.md
@@ -193,7 +193,8 @@ a:active {
 
 問題を起こさない程度に十分にコントラストが大きいかどうかを調べる簡単な方法があります。前景色と背景色を入力して調べることができる、コントラストのチェック用ツールが、オンライン上にいくつもあります。たとえば、WebAIM の [Color Contrast Checker](https://webaim.org/resources/contrastchecker/) は、簡単に使えますし、色のコントラストに関して WCAG の基準に適合するためには何を行えば良いのかについて、説明もしてくれます。
 
-> **メモ:** コントラスト比を高くすることによって、光沢のある画面のスマートフォンまたはタブレットを使う人が陽光のような明るい環境でページを読みやすくもなるでしょう。
+> [!NOTE]
+> コントラスト比を高くすることによって、光沢のある画面のスマートフォンまたはタブレットを使う人が陽光のような明るい環境でページを読みやすくもなるでしょう。
 
 もう一つ別のコツは、標識や案内について色だけに頼らないことです。というのも、色だけに頼るのは、色が見えない人々にとってまったく良くないからです。必須のフォーム・フィールドを赤でマークする代わりに、たとえば、アスタリスクと赤でマークしましょう。
 
@@ -252,7 +253,8 @@ JavaScript に頼りすぎると、しばしば問題が起きます。ときど
 
 この種のフォーム検証は控えめで、 JavaScript が利用できなくてもフォームを全く問題なく使用することができます。また、良識あるフォーム実装であればサーバー側の検証も有効にします。悪意のあるユーザーが（例えば JavaScript をブラウザーでオフにすることで）クライアント側の検証を回避することはあまりにも簡単にできるからです。クライアント側の検証は、エラーを報告するのに実に有益です。ユーザーは、サーバーとのやり取りや ページの再読み込みを待つ必要がなく、自分が犯した間違いを即座に知ることができます。これは間違いなくユーザビリティの向上です。
 
-> **メモ:** この単純なデモではサーバー側の検査を実装していません。
+> [!NOTE]
+> この単純なデモではサーバー側の検査を実装していません。
 
 このフォーム検査も、とてもアクセシブルにしておきました。 {{htmlelement("label")}} 要素を用いて、フォームラベルがそのラベルの入力欄に曖昧な点なしに紐付けられるようにして、それによってスクリーンリーダーがラベルを一緒に読み上げられるようにしました。
 
@@ -282,7 +284,8 @@ function validate(e) {
 }
 ```
 
-> **メモ:** この例では、絶対的な位置指定を用いてエラーメッセージボックスを隠したり見せたりしています。 visibility や display などの他の方法を使っているわけではありません。なぜなら、絶対的な位置指定は、スクリーンリーダーがコンテンツを読めるようにしておくことを妨げないからです。
+> [!NOTE]
+> この例では、絶対的な位置指定を用いてエラーメッセージボックスを隠したり見せたりしています。 visibility や display などの他の方法を使っているわけではありません。なぜなら、絶対的な位置指定は、スクリーンリーダーがコンテンツを読めるようにしておくことを妨げないからです。
 
 現実のフォーム検査は、これよりもっと複雑でしょう。入力された名前が実際に名前のようであることを確認したいかもしれませんし、入力された年齢が実際に数値であり、かつ現実的である (たとえば、負数ではなく、4 桁でもない、など) ということを確認したいかもしれません。ここでは、各入力フィールドに値が入れられたことを確認する (`if (testItem.input.value === '')` という) 簡単な検査を実装しただけです。
 
@@ -317,9 +320,11 @@ function createLink(testItem) {
 
 もっと詳細に [WAI-ARIA](/ja/docs/Learn/Accessibility/WAI-ARIA_basics) を扱う次の記事で、これらの属性について説明します。
 
-> **メモ:** HTML フォームには `required` 属性や `min`/`minlength` 属性や `max`/`maxlength` 属性のような組み込みの検査の仕組みがあること (より詳しくは、{{htmlelement("input")}} 要素のリファレンスを参照) について考える読者もおそらくいることでしょう。このデモでは、結局これらの属性は使いませんでした。これらの属性についてのブラウザー間での対応が当てにならないからです（たとえば IE10 以上のみでの対応だったり、Safari が対応していなかったりします）。
+> [!NOTE]
+> HTML フォームには `required` 属性や `min`/`minlength` 属性や `max`/`maxlength` 属性のような組み込みの検査の仕組みがあること (より詳しくは、{{htmlelement("input")}} 要素のリファレンスを参照) について考える読者もおそらくいることでしょう。このデモでは、結局これらの属性は使いませんでした。これらの属性についてのブラウザー間での対応が当てにならないからです（たとえば IE10 以上のみでの対応だったり、Safari が対応していなかったりします）。
 
-> **メモ:** WebAIM の [Usable and Accessible Form Validation and Error Recovery](https://webaim.org/techniques/formvalidation/) は、アクセシブルなフォーム検査についてのさらに有用な情報をいくつか教えてくれます。
+> [!NOTE]
+> WebAIM の [Usable and Accessible Form Validation and Error Recovery](https://webaim.org/techniques/formvalidation/) は、アクセシブルなフォーム検査についてのさらに有用な情報をいくつか教えてくれます。
 
 ### JavaScript のアクセシビリティのその他の問題
 
diff --git a/files/ja/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md b/files/ja/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
index 28efd3084cd3ff..a6ccecd1a0d929 100644
--- a/files/ja/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
+++ b/files/ja/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが [CSS と JavaScript のアクセシビリティのベストプラクティス](/ja/docs/Learn/Accessibility/CSS_and_JavaScript)の記事を理解したかどうかを評価することです。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -23,7 +24,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/css/css-a11y1-download.html)しましょう。
 
@@ -40,7 +41,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/css/css-a11y2-download.html)しましょう。
 
@@ -50,6 +51,6 @@ l10n:
 
 しかし、このアプリはとてもアクセシビリティが悪く、今の状態ではマウスでしか操作することができません。 HTML と JavaScript でキーボードからもアクセスできるように追加してほしいのです。
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/js/js/js1-download.html)しましょう。
diff --git a/files/ja/learn/accessibility/html/index.md b/files/ja/learn/accessibility/html/index.md
index 21d3f456bffc73..edc64b5929d979 100644
--- a/files/ja/learn/accessibility/html/index.md
+++ b/files/ja/learn/accessibility/html/index.md
@@ -56,7 +56,8 @@ HTML の `<button>` は、ある種の適切なスタイルが（おそらくそ
 
 それでは、ここからアクセシブルな HTML をより詳しく見てゆきましょう。
 
-> **メモ:** 自分のローカルコンピューターにスクリーンリーダーを用意することは良い考えです。そうすれば、以下に示す例について、ある程度のテストができます。より詳しくは、[スクリーンリーダー](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#スクリーンリーダー)を参照してください。
+> [!NOTE]
+> 自分のローカルコンピューターにスクリーンリーダーを用意することは良い考えです。そうすれば、以下に示す例について、ある程度のテストができます。より詳しくは、[スクリーンリーダー](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#スクリーンリーダー)を参照してください。
 
 ## 良いセマンティクス
 
@@ -254,7 +255,8 @@ HTML の `<button>` は、ある種の適切なスタイルが（おそらくそ
 
 レイアウトを作る際に考慮すべきもう一つの事柄は、上記の例に見られるように HTML の意味的要素を用いることです（[コンテンツ区分](/ja/docs/Web/HTML/Element#コンテンツ区分)を参照）。入れ子になった {{htmlelement("div")}} 要素だけを使ってレイアウトを作ることもできますが、適切な区分要素を使って、主要なナビゲーション ({{htmlelement("nav")}}) やフッター ({{htmlelement("footer")}}) や繰り返し現れるコンテンツ単位 ({{htmlelement("article")}}) などを囲う方が良いのです。これらの区分け要素は、いまナビゲートしている最中のコンテンツについての追加的な手がかりをユーザーに与えられるように、スクリーンリーダー（および他のツール）に追加的な意味（セマンティクス）を提供してくれます（スクリーンリーダーの対応とはどのようなものなのかについての考え方に関しては、[Screen Reader Support for new HTML5 Section Elements](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/) を参照）。
 
-> **メモ:** 優れた意味づけと魅力的なレイアウトに加え、コンテンツは、そのソースの順序が論理的に意味をなしていなければなりません。後で CSS を使って常に好きな場所に配置することはできますが、最初にソースの順序を正しくしておくことで、スクリーンリーダーで読み上げられる内容が意味のあるものとなるのです。
+> [!NOTE]
+> 優れた意味づけと魅力的なレイアウトに加え、コンテンツは、そのソースの順序が論理的に意味をなしていなければなりません。後で CSS を使って常に好きな場所に配置することはできますが、最初にソースの順序を正しくしておくことで、スクリーンリーダーで読み上げられる内容が意味のあるものとなるのです。
 
 ### UI コントロール
 
@@ -264,11 +266,13 @@ UI コントロールのアクセシビリティに対する一つの重要な
 
 ![3 つのボタンの中にそれぞれ "Click me!" "Click me too!" "And me!" というテキストが表示されています。3 つ目のボタンには、現在のタブのフォーカスを示す青い輪郭線があります。](button-focused-unfocused.png)
 
-> **メモ:** 開発者ツールで、ページのタブ順序を示すオーバーレイを有効にすることができます。詳細な情報は、[アクセシビリティインスペクター > タブ移動順序を表示](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order) を参照してください。
+> [!NOTE]
+> 開発者ツールで、ページのタブ順序を示すオーバーレイを有効にすることができます。詳細な情報は、[アクセシビリティインスペクター > タブ移動順序を表示](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order) を参照してください。
 
 その後、エンター / リターンキーを押すと、フォーカスの当たっているリンクをたどったり、ボタンを押したりすることもできますし（ボタンにメッセージ警告を出させるための JavaScript を含めておきました）、テキスト入力欄にテキストを入力するためのタイピングを開始することもできます。他のフォーム要素には別のコントロールがあります。たとえば、{{htmlelement("select")}} 要素は、選択肢を表示させ、上下の矢印キーを用いて選択肢の間を行き来することができます。
 
-> **メモ:** 異なるブラウザーでは、異なるキーボードコントロールオプションを使用可能としている場合があります。さらに詳しいことは、[ネイティブなキーボードアクセシビリティを使う](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#ネイティブなキーボード・アクセシビリティを使う) を参照してください。
+> [!NOTE]
+> 異なるブラウザーでは、異なるキーボードコントロールオプションを使用可能としている場合があります。さらに詳しいことは、[ネイティブなキーボードアクセシビリティを使う](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#ネイティブなキーボード・アクセシビリティを使う) を参照してください。
 
 基本的に、適切な要素を使用するだけで、この動作を自由に得ることができます。
 
@@ -387,7 +391,8 @@ UI コントロールのテキストラベルはあらゆるユーザーにと
 </p>
 ```
 
-> **メモ:** リンクの実装とベストプラクティスに関するさらなる情報を、[ハイパーリンクの生成](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) という記事で知ることができます。また、いくつかの良い例と悪い例を、[good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) と [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) で見ることもできます。
+> [!NOTE]
+> リンクの実装とベストプラクティスに関するさらなる情報を、[ハイパーリンクの生成](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) という記事で知ることができます。また、いくつかの良い例と悪い例を、[good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) と [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) で見ることもできます。
 
 フォームラベルも重要です。各フォーム入力欄に何を入力する必要があるのかについての手がかりを与えてくれるからです。以下のものは、十分に筋の通った例のように見えます。
 
@@ -454,7 +459,8 @@ UI コントロールのテキストラベルはあらゆるユーザーにと
 - 表の見出しは、 {{htmlelement("th")}} 要素を用いて定義されています。さらに、`scope` 属性を使って、その見出しが行に対する見出しなのか列に対する見出しなのかを指定することもできます。こうすると、スクリーンリーダーが一つの単位として処理できる、データの完全なグループが示されることになります。
 - {{htmlelement("caption")}} 要素と、`<table>` の `summary` 属性は、どちらも似たような役割を果たします。表に対する代替テキストとして機能し、スクリーンリーダーのユーザーに対して、表の中身についての有用で手短な要約を示すのです。一般的には `<caption>` 要素の方が、目の見えるユーザーもそのコンテンツにアクセスでき、有益な情報を探すことができるため、好ましいとされています。実のところ、両方が必要であるわけではありません。
 
-> **メモ:** アクセシブルなデータ表にまつわる更なる詳細は、[HTML 表の発展的な機能とアクセシビリティ](/ja/docs/Learn/HTML/Tables/Advanced) という記事を参照してください。
+> [!NOTE]
+> アクセシブルなデータ表にまつわる更なる詳細は、[HTML 表の発展的な機能とアクセシビリティ](/ja/docs/Learn/HTML/Tables/Advanced) という記事を参照してください。
 
 ## 代替テキスト
 
@@ -484,7 +490,8 @@ UI コントロールのテキストラベルはあらゆるユーザーにと
 
 1 枚目の画像は、スクリーンリーダーで閲覧したときに、実際のところ大した手助けをユーザーに与えてはくれません。たとえば VoiceOver は、"/dinosaur.png, image" と読み上げます。なんらかの手助けを提供しようとしてファイル名を読み上げるわけです。この例では、ユーザーは、少なくともこれがある種の恐竜なのだと知ることでしょうが、機械で生成されたファイル名とともにファイルが（たとえばディジタルカメラから）アップロードされる場合もよくありますし、そうしたファイル名は画像の中身に対する文脈を何も与えてはくれないでしょう。
 
-> **メモ:** これが、画像の中にテキストコンテンツを記載してはいけない理由です。スクリーンリーダーではアクセスできないからです。他にも、選択できない、コピー＆ペーストできないなどのデメリットがあります。とにかくやめておきましょう。
+> [!NOTE]
+> これが、画像の中にテキストコンテンツを記載してはいけない理由です。スクリーンリーダーではアクセスできないからです。他にも、選択できない、コピー＆ペーストできないなどのデメリットがあります。とにかくやめておきましょう。
 
 スクリーンリーダーは、2 枚目の画像に出くわすと、alt 属性を丸々読み上げます。つまり、「赤いティラノサウルスレックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります」と読み上げます。
 
@@ -498,7 +505,8 @@ UI コントロールのテキストラベルはあらゆるユーザーにと
 
 考慮すべきことのひとつは、画像がコンテンツの中で意味をもっているのか、それとも純粋に視覚的な装飾であり、意味をもたないのか、ということです。もし装飾用であれば、`alt` 属性の値として空のテキストを書くか（[空の alt 属性](#空の_alt_属性)を参照）、CSS の背景画像としてページに記載するだけにした方がよいでしょう。
 
-> **メモ:** 画像の実装とベストプラクティスについての更なる多くの情報については、[HTML の画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)と[レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)をお読みください。
+> [!NOTE]
+> 画像の実装とベストプラクティスについての更なる多くの情報については、[HTML の画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)と[レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)をお読みください。
 
 文脈のある追加的な情報をどうしても提示したい場合、その情報は、画像の周囲のテキストの中か、あるいは、上記のように `title` 属性の内部に入れるべきです。この場合、ほとんどのスクリーンリーダーは、alt テキストと、title 属性と、ファイル名とを読み上げるでしょう。さらに、マウスオーバーしたときには、ブラウザーが title テキストをツールチップとして表示します。
 
@@ -547,7 +555,8 @@ HTML には、{{htmlelement("figure")}} と {{htmlelement("figcaption")}} とい
 
 `alt` を含めないようにする代わりに空の `alt` を用いる理由は、`alt` が与えられていない場合には多くのスクリーンリーダーが画像の URL を丸々全部発声するからです。上記の例において画像は、その画像が結びつけられている見出しに対する視覚的装飾として機能しています。このような場合、および、画像が単に装飾にすぎず中身の価値がない場合には、空の `alt` を `img` 要素に入れるべきです。別の選択肢は、[`role="presentation"`](/ja/docs/Web/Accessibility/ARIA/Roles/presentation_role) という ARIA の [`role`](/ja/docs/Web/Accessibility/ARIA/Roles) 属性を使うことです。こうすることによっても、スクリーンリーダーに代替テキスト（`alt` テキスト）を読み上げるのをやめさせることができます。
 
-> **メモ:** もし可能なら、単なる修飾であるような画像を表示するのには CSS を使うべきです。
+> [!NOTE]
+> もし可能なら、単なる修飾であるような画像を表示するのには CSS を使うべきです。
 
 ## リンクについての追加事項
 
diff --git a/files/ja/learn/accessibility/index.md b/files/ja/learn/accessibility/index.md
index 9f80145827f8c2..d34b253e3c531f 100644
--- a/files/ja/learn/accessibility/index.md
+++ b/files/ja/learn/accessibility/index.md
@@ -27,7 +27,8 @@ Firefox のアクセシビリティインスペクターは、ウェブページ
 
 このモジュールの大半の理解には、少なくとも [HTML](/ja/docs/Learn/HTML), [CSS](/ja/docs/Learn/CSS), [JavaScript](/ja/docs/Learn/JavaScript) の最初の 2 モジュールを通して読むのが良いでしょうし、 たぶんもっと良いのは、関連するテクノロジートピックを進めるにつれて、関連するアクセシビリティの部分を進めるのが良いでしょう。
 
-> **メモ:** 自分のファイルを作れない コンピューター/タブレット/その他の端末で作業する場合、コードの実例の大半を [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) などのオンラインコーディングプログラム内で試すことができます。
+> [!NOTE]
+> 自分のファイルを作れない コンピューター/タブレット/その他の端末で作業する場合、コードの実例の大半を [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) などのオンラインコーディングプログラム内で試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/accessibility/mobile/index.md b/files/ja/learn/accessibility/mobile/index.md
index 4a395ac04899fa..ae880bc176ed62 100644
--- a/files/ja/learn/accessibility/mobile/index.md
+++ b/files/ja/learn/accessibility/mobile/index.md
@@ -70,7 +70,8 @@ TalkBack をオフにしたい場合は、
 2. \[ユーザー補助] > \[TalkBack] に移動します。
 3. スライダースイッチに移動してアクティブにすると、オフになります。
 
-> **メモ:** 連続した動きで上にスワイプしてから左にスワイプすると、いつでもホーム画面にアクセスできます。複数のホーム画面がある場合は、左右に 2 本指でスワイプすることでそれらの間を移動できます。
+> [!NOTE]
+> 連続した動きで上にスワイプしてから左にスワイプすると、いつでもホーム画面にアクセスできます。複数のホーム画面がある場合は、左右に 2 本指でスワイプすることでそれらの間を移動できます。
 
 TalkBack ジェスチャーのより完全なリストについては、[TalkBack ジェスチャーを利用する](https://support.google.com/accessibility/android/answer/6151827?hl=ja)を参照してください。
 
@@ -115,7 +116,8 @@ TalkBack を使用すると、端末上のどこに移動しても、グロー
 7. ダブルタップして選択します。これで、見出しと ARIA のランドマークの間を移動するために左右にスワイプすることができます。
 8. デフォルトモードに戻るには、上にスワイプしてから右にスワイプしてローカルコンテキストメニューに再度入り、\[デフォルト] を選択してからダブルタップしてアクティブにします。
 
-> **メモ:** より完全なドキュメントは [Android で TalkBack を使ってみる](https://support.google.com/accessibility/android/answer/6283677?hl=ja)をご覧ください。
+> [!NOTE]
+> より完全なドキュメントは [Android で TalkBack を使ってみる](https://support.google.com/accessibility/android/answer/6283677?hl=ja)をご覧ください。
 
 ### iOS VoiceOver
 
@@ -123,7 +125,8 @@ VoiceOver のモバイル版は iOS オペレーティングシステムに組
 
 VoiceOver　を有効にするには、「設定」アプリで _アクセシビリティ > VoiceOver_ を選択します。　VoiceOver のスライダーを押して有効にします（このページには他にも　VoiceOver　関連のオプションがいくつかあります）。
 
-> **メモ:** 古い iOS 端末では VoiceOver メニューは _設定_ > _一般_ > _アクセシビリティ_ > *VoiceOver*にあります。
+> [!NOTE]
+> 古い iOS 端末では VoiceOver メニューは _設定_ > _一般_ > _アクセシビリティ_ > *VoiceOver*にあります。
 
 VoiceOver が有効になると、iOS の基本的なコントロールジェスチャーは次のように少し違います。
 
@@ -225,7 +228,8 @@ panel.ontouchend = stopMove;
 - ダウンロードした画像サイズを節約する。一般的に、小型画面の端末は、デスクトップと同等の大きさの画像を必要としませんし、低速のネットワーク接続上にある可能性が高くなります。したがって、必要に応じて狭い画面の端末に小さい画像を提供することが賢明です。[レスポンシブ画像のテクニック](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)を使用してこれを扱えます。
 - 高解像度について考える。多くのモバイル端末は高解像度の画面を持っているため、ディスプレイがくっきりと鮮明に見えるようにするために、より高解像度の画像が必要です。ここでも、レスポンシブ画像テクニックを使用して、必要に応じて画像を提供できます。さらに、SVG ベクター画像フォーマットを使用して多くの画像要件を満たすことができます。これは今日のブラウザー間で十分にサポートされています。SVG はファイルサイズが小さく、表示されているサイズに関係なく鮮明に保たれます（詳細は[ウェブにベクターグラフィックスを追加する](/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)を参照）。
 
-> **メモ:** レスポンシブデザインのテクニックについては、MDN の他の場所で説明されているため、ここでは詳しく説明しません（上記のリンクを参照）。
+> [!NOTE]
+> レスポンシブデザインのテクニックについては、MDN の他の場所で説明されているため、ここでは詳しく説明しません（上記のリンクを参照）。
 
 ### 特定のモバイルに関する考慮事項
 
diff --git a/files/ja/learn/accessibility/multimedia/index.md b/files/ja/learn/accessibility/multimedia/index.md
index bdb09554c1fed1..9658608311720a 100644
--- a/files/ja/learn/accessibility/multimedia/index.md
+++ b/files/ja/learn/accessibility/multimedia/index.md
@@ -260,13 +260,15 @@ player.ontimeupdate = () => {
 
 しかし、いくつかのエッジケースもあります。例えば、スプレッドシートやグラフの資料を使用したミーティングの録音音声があるかもしれません。その場合、それらの資料が音声とトランスクリプトとともに提供されていることを確認するべきであり、特にトランスクリプトの中でそれらの資料に言及されている箇所をリンクとすることが大事です。これは聴覚障碍の方だけでなく、すべてのユーザーの助けになります。
 
-> **メモ:** 音声トランスクリプトは、一般的に様々なユーザーグループを助けます。聴覚障碍の人へ音声に含まれたコンテンツにアクセスを提供するように、音声をダウンロードすることが困難な狭い帯域のユーザーのことを考えて見ましょう。パブやバーのような騒音の多い環境で、雑音のために音声を聞くことが難しいユーザーのことも考えて見ましょう。
+> [!NOTE]
+> 音声トランスクリプトは、一般的に様々なユーザーグループを助けます。聴覚障碍の人へ音声に含まれたコンテンツにアクセスを提供するように、音声をダウンロードすることが困難な狭い帯域のユーザーのことを考えて見ましょう。パブやバーのような騒音の多い環境で、雑音のために音声を聞くことが難しいユーザーのことも考えて見ましょう。
 
 ## 映像のテキストトラック
 
 聴覚障碍者、視覚障碍者、そして他のユーザー（狭い帯域のユーザーや、映像に収録されている言語を理解できないユーザーなど）映像にアクセシビリティを持たせるには、映像コンテンツにテキストトラックを記載する必要があります。
 
-> **メモ:** テキストトラックは障碍者だけでなく他のユーザーにとっても便利になる可能性があります。例えば、うるさい環境 (スポーツ中継を流している混雑したバーなど) にいるために音声が聞こえないユーザーや、他の人を邪魔したくない静かな場所 (図書館など) にいるユーザーなどです。
+> [!NOTE]
+> テキストトラックは障碍者だけでなく他のユーザーにとっても便利になる可能性があります。例えば、うるさい環境 (スポーツ中継を流している混雑したバーなど) にいるために音声が聞こえないユーザーや、他の人を邪魔したくない静かな場所 (図書館など) にいるユーザーなどです。
 
 これは新しい概念ではありません — テレビ放送では、かなり長い間クローズドキャプションを提供しています。
 
@@ -324,7 +326,8 @@ HTML のメディア再生と共に表示させるためには、次のことを
 
 詳細は [HTML の動画へのキャプションと字幕の追加](/ja/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)を読んでください。あなたは、GitHub で GIan Devlin によって作られた[例](http://iandevlin.github.io/mdn/video-player-with-captions/)をこの記事と併せて見ることができます。([ソースコード](https://github.com/iandevlin/iandevlin.github.io/tree/main/mdn/video-player-with-captions) も見てください) この例では JavaScript を使用して、ユーザーが異なる言語の字幕を選択できるようになっています。字幕を表示するためには、"CC" ボタンをクリックして英語、ドイツ語、スペイン後のオプションを選択する必要があります。
 
-> **メモ:** テキストトラックは {{glossary("SEO")}} でも役に立ちます。検索エンジンはテキストによって更新されるためです。検索エンジンは、テキストトラックによって映像の途中に直接リンクすることさえできます。
+> [!NOTE]
+> テキストトラックは {{glossary("SEO")}} でも役に立ちます。検索エンジンはテキストによって更新されるためです。検索エンジンは、テキストトラックによって映像の途中に直接リンクすることさえできます。
 
 ## スキルをテストしましょう
 
diff --git a/files/ja/learn/accessibility/test_your_skills_colon__html_accessibility/index.md b/files/ja/learn/accessibility/test_your_skills_colon__html_accessibility/index.md
index d4f6c6c8e70e21..4f7f29c67af5dc 100644
--- a/files/ja/learn/accessibility/test_your_skills_colon__html_accessibility/index.md
+++ b/files/ja/learn/accessibility/test_your_skills_colon__html_accessibility/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [HTML: アクセシビリティの良き基本](/ja/docs/Learn/Accessibility/HTML)の記事を理解したかどうかを評価することです。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -23,7 +24,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/html/html-a11y1.html", '100%', 1100)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/html/html-a11y1-download.html)しましょう。
 
@@ -39,7 +40,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/html/html-a11y2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/html/html-a11y2-download.html)しましょう。
 
@@ -55,7 +56,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/html/html-a11y3.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/html/html-a11y3-download.html)しましょう。
 
@@ -70,6 +71,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/html/html-a11y4.html", '100%', 1100)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/html/html-a11y4-download.html)しましょう。
diff --git a/files/ja/learn/accessibility/wai-aria_basics/index.md b/files/ja/learn/accessibility/wai-aria_basics/index.md
index ded230d282e90a..ab973c85ac1506 100644
--- a/files/ja/learn/accessibility/wai-aria_basics/index.md
+++ b/files/ja/learn/accessibility/wai-aria_basics/index.md
@@ -70,7 +70,8 @@ l10n:
 
 WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ API（スクリーンリーダーはここから情報を取得する）によって提供される情報を除いて、それらはウェブページに何の影響も与えないという点です。 WAI-ARIA はウェブページの構造や DOM に影響を与えませんが、 CSS の要素選択で利用することが可能です。
 
-> **メモ:** ARIA ロールの使用方法と追加情報へのリンクを含む便利なリストを確認することができます。WAI-ARIA の仕様書では[ロールの定義](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)（英語）を、このサイトでは [ARIA ロール](/ja/docs/Web/Accessibility/ARIA/Roles)を参照してください。
+> [!NOTE]
+> ARIA ロールの使用方法と追加情報へのリンクを含む便利なリストを確認することができます。WAI-ARIA の仕様書では[ロールの定義](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)（英語）を、このサイトでは [ARIA ロール](/ja/docs/Web/Accessibility/ARIA/Roles)を参照してください。
 >
 > この仕様では、プロパティと状態の追加情報を含んだリストも確認することができます。 [状態とプロパティの定義（すべての `aria-*` 属性）](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def)（英語）を見てください。
 
@@ -90,7 +91,8 @@ WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ A
 
 この記事では、全ての WAI-ARIA の機能と詳細についてカバーするわけではありません。 代わりに、あなたが知るべき最も重要な WAI-ARIA の機能についてカバーします。 もしサポートの詳細について何も記述してしない場合は、その機能が十分にサポートされていると想定してください。 この例外がある場合は、明確に記述します。
 
-> **メモ:** JavaScript ライブラリーには WAI-ARIA をサポートしているものがありますが、それはライブラリーが複雑なフォームコントロールのような UI を生成した場合に、アクセシビリティを向上させるための ARIA 属性を追加することを意味します。 迅速な UI 開発のためにサードパーティーの JavaScript ライブラリーを探しているのであれば、その決断を下す際、UI のアクセシビリティのサポートを重要な要素として必ず考慮すべきです。 良い例としては、 jQuery UI（[jQuery UI について: ディープアクセシビリティサポート](https://jqueryui.com/about/#deep-accessibility-support)（英語）を見てください）、 [ExtJS](https://www.sencha.com/products/extjs/) 、 [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html) があります。
+> [!NOTE]
+> JavaScript ライブラリーには WAI-ARIA をサポートしているものがありますが、それはライブラリーが複雑なフォームコントロールのような UI を生成した場合に、アクセシビリティを向上させるための ARIA 属性を追加することを意味します。 迅速な UI 開発のためにサードパーティーの JavaScript ライブラリーを探しているのであれば、その決断を下す際、UI のアクセシビリティのサポートを重要な要素として必ず考慮すべきです。 良い例としては、 jQuery UI（[jQuery UI について: ディープアクセシビリティサポート](https://jqueryui.com/about/#deep-accessibility-support)（英語）を見てください）、 [ExtJS](https://www.sencha.com/products/extjs/) 、 [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html) があります。
 
 ### いつ WAI-ARIA を使うべきか
 
@@ -109,7 +111,8 @@ WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ A
 
 もう一度言いますが、必要な時だけ使ってください。
 
-> **メモ:** 実際のさまざまなユーザーによってあなたのサイトをテストすることも忘れないでください — 障害のないユーザー、スクリーンリーダーを使用するユーザー、キーボードナビゲーションを使用するユーザーなどです。 どれだけうまく動作するかという点で、彼らはあなたよりもうまく観察してくれるでしょう。
+> [!NOTE]
+> 実際のさまざまなユーザーによってあなたのサイトをテストすることも忘れないでください — 障害のないユーザー、スクリーンリーダーを使用するユーザー、キーボードナビゲーションを使用するユーザーなどです。 どれだけうまく動作するかという点で、彼らはあなたよりもうまく観察してくれるでしょう。
 
 ## 実践的な WAI-ARIA の実装
 
@@ -241,7 +244,8 @@ const intervalID = setInterval(showQuote, 10000);
 
 これにより、コンテンツの更新があった際にスクリーンリーダーがその内容を読み上げてくれるようになります。
 
-> **メモ:** ほとんどのブラウザーは、`file://` URL から HTTP リクエストを行おうとすると、セキュリティ例外を発生します。 例えば、ファイルを直接（ダブルクリックなどで）ブラウザーに読み込んだ場合などです。[ローカルテストサーバーを設定するには](/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)を参照してください。
+> [!NOTE]
+> ほとんどのブラウザーは、`file://` URL から HTTP リクエストを行おうとすると、セキュリティ例外を発生します。 例えば、ファイルを直接（ダブルクリックなどで）ブラウザーに読み込んだ場合などです。[ローカルテストサーバーを設定するには](/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)を参照してください。
 
 加えて、考慮すべきことがあります。 テキストの更新された部分だけを読み上げるべきかどうかです。 常に見出し全体を読み上げる方が、何を読み上げられているかをユーザーが認識できるという点で望ましいかもしれません。 その対象に [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) プロパティを追加することで、このような動作を得ることができます。 手元の `<section>` の開始タグを再度更新して、次のようにしてください。
 
@@ -251,7 +255,8 @@ const intervalID = setInterval(showQuote, 10000);
 
 この `aria-atomic="true"` 属性が、更新された一部分だけではなく、要素全体のコンテンツを 1 つのまとまりとして読み上げるようスクリーンリーダーに伝えます。
 
-> **メモ:** 完成した例は [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) をご覧ください（もしくは[動作版をご覧ください](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)）。
+> [!NOTE]
+> 完成した例は [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) をご覧ください（もしくは[動作版をご覧ください](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)）。
 
 > **メモ:** [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) プロパティは、ライブリージョンが更新された際に何が読み上げられるかを制御するのに非常に役に立ちます。 例えば、追加や削除をされた内容だけを読み上げさせることもできます。
 
@@ -319,7 +324,8 @@ ARIA を使用して、更に先へ踏み込むこともできるでしょうし
 
 すべての入力要素に、必ず {{HTMLelement('label')}} を付けてください。スクリーンリーダーの中には、プレースホルダーテキストをアナウンスするものもありますが、ほとんどはそうではありません。フォームコントロールに [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) および [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) によってアクセス可能な名前を提供するという代替手段もあります。しかし、`for` 属性を持つ `<label>` 要素は、マウスユーザーを含むすべてのユーザーに対してユーザビリティを提供するため、好ましい方法です。
 
-> **メモ:** この完成した例を、[`form-validation-updated.html`](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html) においてライブ版で見られます。
+> [!NOTE]
+> この完成した例を、[`form-validation-updated.html`](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html) においてライブ版で見られます。
 
 また、古典的な {{htmlelement("label")}} 要素以上の、ある種の先進的なフォームのラベルづけ技法も、WAI-ARIA によって可能になります。 晴眼者のユーザーに対してラベルを可視にしたくない箇所にラベルを設けるために [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) プロパティを使うことについては、すでに述べました（上記の [道しるべ/ランドマーク](#道しるべランドマーク_signpostlandmark) の節を参照）。 別のプロパティを使う別のラベルづけ技法も、いくつかあります。 例えば、`<label>` 以外の要素をラベルとして指定したいとき、または、同じラベルで複数のフォーム入力欄にラベルづけをしたいときに [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) を使うとか、別の情報をフォーム入力欄に関連づけてその情報も同様に読み上げさせたいときに [`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使うとかいったものです。 より詳しくは、WebAIM の [高度なフォームのラベル付け](https://webaim.org/techniques/forms/advanced)（英語）の記事を参照してください。
 
@@ -369,7 +375,8 @@ WAI-ARIA ロールを用いてこれを修正できます。 [`fake-div-buttons.
 
 スクリーンリーダーを使ってこれを試すと、「クリックしてください！ボタン」のようなフレーズでボタンが報告されるようになります。これはずっと良いことですが、[`button` ロールのドキュメント](/ja/docs/Web/Accessibility/ARIA/Roles/button_role)で説明されているように、<kbd>Enter</kbd> やクリックイベントの処理など、ユーザーが期待するネイティブなボタン機能をすべて追加する必要があります。
 
-> **メモ:** とはいえ、可能な箇所では正しい意味的要素を使うことの方が常に良いのだ、ということを忘れないようにしてください。 もしボタンを作りたいなら、そして {{htmlelement("button")}} 要素が使えるなら、{{htmlelement("button")}} 要素を使うべきです。
+> [!NOTE]
+> とはいえ、可能な箇所では正しい意味的要素を使うことの方が常に良いのだ、ということを忘れないようにしてください。 もしボタンを作りたいなら、そして {{htmlelement("button")}} 要素が使えるなら、{{htmlelement("button")}} 要素を使うべきです。
 
 #### 複雑なウィジェットを通じてユーザーを案内する
 
@@ -416,7 +423,8 @@ WAI-ARIA ロールを用いてこれを修正できます。 [`fake-div-buttons.
 </div>
 ```
 
-> **メモ:** ここでの最も際立った変更点は、この例にもともと存在していたリンクを削除して、単にリスト項目をタブとして使ったことです。 このようにした理由は、スクリーンリーダーのユーザーにとっての物事の紛らわしさを減らせるからであり（これらのリンクは、実際にどこかへ連れて行ってくれるものではなく、ただ見かけを変化させるだけのものなのです）、また、セット機能における setsize/position が、よりうまく機能できるようになるからです。 setsize/position がリンク上に設定されている場合、ブラウザーは、「3 分の 1」「3 分の 2」などではなく、常に「1 分の 1」と報告し続けます。
+> [!NOTE]
+> ここでの最も際立った変更点は、この例にもともと存在していたリンクを削除して、単にリスト項目をタブとして使ったことです。 このようにした理由は、スクリーンリーダーのユーザーにとっての物事の紛らわしさを減らせるからであり（これらのリンクは、実際にどこかへ連れて行ってくれるものではなく、ただ見かけを変化させるだけのものなのです）、また、セット機能における setsize/position が、よりうまく機能できるようになるからです。 setsize/position がリンク上に設定されている場合、ブラウザーは、「3 分の 1」「3 分の 2」などではなく、常に「1 分の 1」と報告し続けます。
 
 ARIA 機能は次のように使われます。
 
@@ -435,7 +443,8 @@ ARIA 機能は次のように使われます。
 
 わたしたちの検査では、この新たな構造は、物事を全体的に改善するのに確かに役立ちました。 今や、タブはタブとして認識されます（例えば、スクリーンリーダーが「タブ」と話します）し、選択されたタブは、そのタブ名で読み上げられて「選択中」と示されますし、スクリーンリーダーは、どのタブ番号のところに今いるのかということも教えてくれます。 さらに、 `aria-hidden` の設定（まさに隠されていないタブのみに、 `aria-hidden="false"` と設定されている）のおかげで、隠されていないコンテンツのみが、ナビゲートして下ってゆける唯一のコンテンツとなっており、このことは、選択されたコンテンツを見つけやすくなったことを意味します。
 
-> **メモ:** スクリーンリーダーに読み上げさせたくないと明示的に思うものが何かある場合、スクリーンリーダーに対して、`aria-hidden="true"` 属性を与えることができます。
+> [!NOTE]
+> スクリーンリーダーに読み上げさせたくないと明示的に思うものが何かある場合、スクリーンリーダーに対して、`aria-hidden="true"` 属性を与えることができます。
 
 ## スキルをテストしましょう
 
diff --git a/files/ja/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md b/files/ja/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md
index 8629fe76dc3855..9adb7ffc5b008e 100644
--- a/files/ja/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md
+++ b/files/ja/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[WAI-ARIA の基本](/ja/docs/Learn/Accessibility/WAI-ARIA_basics)の記事を理解したかどうかを評価することです。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -21,7 +22,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/aria/aria1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/aria/aria1-download.html)しましょう。
 
@@ -36,7 +37,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/aria/aria2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/html-css/aria/aria2-download.html)しましょう。
 
@@ -46,6 +47,6 @@ l10n:
 
 ここでの問題は、 DOM が新しい説明を表示させるために変更されたとき、スクリーンリーダーは何が変更されたのかわからないということです。説明の変更がスクリーンリーダーによってアナウンスされるように更新することはできますか。
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/accessibility/tasks/js/aria/aria-js1-download.html)しましょう。
diff --git a/files/ja/learn/accessibility/what_is_accessibility/index.md b/files/ja/learn/accessibility/what_is_accessibility/index.md
index c5fab76f866f5c..e250b16595832e 100644
--- a/files/ja/learn/accessibility/what_is_accessibility/index.md
+++ b/files/ja/learn/accessibility/what_is_accessibility/index.md
@@ -43,7 +43,8 @@ l10n:
 
 障碍のある人は障碍のない人と同じくらい多様であり、よってその障碍も同じくらい多様です。ここでの重要な教訓は、あなたがコンピューターの向こうでウェブをどのように使うかを考え、他の人がどのように使っているかを学習し始めることです — あなたはユーザーとは違います。考慮すべき障碍の主な種類を、ウェブコンテンツにアクセスするために使う特別なツール（**支援技術**、**assistive technology** や **AT** として知られるもの）とともに以下に説明します。
 
-> **メモ:** 世界保健機構 (WHO) の[障碍と健康](https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health)（英語）の報告によると、「10 億人以上の人（世界人口の約 15%）が何らかの障碍を持っています」し、「1 億～ 1 億 9000 万人の大人に目立った機能障碍があります」
+> [!NOTE]
+> 世界保健機構 (WHO) の[障碍と健康](https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health)（英語）の報告によると、「10 億人以上の人（世界人口の約 15%）が何らかの障碍を持っています」し、「1 億～ 1 億 9000 万人の大人に目立った機能障碍があります」
 
 ### 視覚障碍者
 
diff --git a/files/ja/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md b/files/ja/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md
index 5fce97893123c6..8ac1db11364c96 100644
--- a/files/ja/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md
+++ b/files/ja/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md
@@ -44,7 +44,8 @@ _利用可能なアクティブラーニングはまだありません。[ぜひ
 
 Paciello Group の [Color Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) をダウンロードし、インストールしてみましょう。
 
-> **メモ:** 他にも、 WebAIM の [Color Contrast Checker](https://webaim.org/resources/contrastchecker/) のようなコントラストチェッカーがオンライン上に多数あります。ローカルチェッカーをお勧めするのは、色の数値を探すための画面上のカラーピッカーがパッケージされているからです。
+> [!NOTE]
+> 他にも、 WebAIM の [Color Contrast Checker](https://webaim.org/resources/contrastchecker/) のようなコントラストチェッカーがオンライン上に多数あります。ローカルチェッカーをお勧めするのは、色の数値を探すための画面上のカラーピッカーがパッケージされているからです。
 
 例えば、このページの色をカラーコントラストアナライザーで調べて、結果を確認してみましょう。
 
@@ -158,7 +159,8 @@ span.subheading {
 
 もっと簡単でしょう？これは、[すべての現行ブラウザー](https://caniuse.com/#search=rem)で動作するので、この単位は気軽に使用してください。
 
-> **メモ:** Opera Mini は rem のフォントサイズに対応していないことにお気づきかもしれません。結局は独自のフォントサイズを設定することになるので、わざわざフォント単位を与える必要はありません。
+> [!NOTE]
+> Opera Mini は rem のフォントサイズに対応していないことにお気づきかもしれません。結局は独自のフォントサイズを設定することになるので、わざわざフォント単位を与える必要はありません。
 
 #### なぜ比例単位を使用するのか
 
@@ -169,7 +171,8 @@ span.subheading {
 - フォントを `rem` 単位で記述すると、ほとんどのブラウザーはとても満足するはずです。
 - 古いブラウザーには、自身の内部エンジンでフォントを表示させましょう。ブラウザーのエンジンは、CSS のプロパティや 値に対応できない場合は無視するので、デザイナーのビジョンに忠実でなくても、ウェブサイトが使用できるようになります。古いブラウザーは、いずれは消えていくものです。
 
-> **メモ:** ご使用のブラウザーによって異なるかもしれません。古いブラウザーに合わせなければならない場合は、 `em` を使用し、もう少し計算する必要があります。
+> [!NOTE]
+> ご使用のブラウザーによって異なるかもしれません。古いブラウザーに合わせなければならない場合は、 `em` を使用し、もう少し計算する必要があります。
 
 ### 行の長さ
 
diff --git a/files/ja/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/ja/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
index dc8292d8e1f037..182a013e5de5b7 100644
--- a/files/ja/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
+++ b/files/ja/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
@@ -46,7 +46,8 @@ _利用可能なアクティブラーニングはまだありません。[ぜひ
 
 はじめに友人と 1 時間ディスカッションするのは良いことですが、不十分です。自分のアイディアを具現化するためにどのような道をたどらなければならないかを明確に把握するためには、座ってアイディアを体系化する必要があります。これを行うには、紙とペンと、少なくとも次の質問に答えるための時間が必要です。
 
-> **メモ:** プロジェクトのアイディア化を実行するための方法は無数にあります。ここにそれらすべてを提示することはできません (一冊の本では不十分です)。ここでは、プロフェッショナルが[プロジェクトの理念](<https://en.wikipedia.org/wiki/Ideation_(idea_generation)>)、[プロジェクト計画](https://en.wikipedia.org/wiki/Project_planning)、および[プロジェクト管理](https://en.wikipedia.org/wiki/Project_management)と呼ぶものを処理する簡単な方法を紹介します。
+> [!NOTE]
+> プロジェクトのアイディア化を実行するための方法は無数にあります。ここにそれらすべてを提示することはできません (一冊の本では不十分です)。ここでは、プロフェッショナルが[プロジェクトの理念](<https://en.wikipedia.org/wiki/Ideation_(idea_generation)>)、[プロジェクト計画](https://en.wikipedia.org/wiki/Project_planning)、および[プロジェクト管理](https://en.wikipedia.org/wiki/Project_management)と呼ぶものを処理する簡単な方法を紹介します。
 
 ### 本当にしたいことは何ですか？
 
diff --git a/files/ja/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/ja/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
index 23779e0d7cea08..c02aa533997d9f 100644
--- a/files/ja/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
+++ b/files/ja/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
@@ -99,7 +99,8 @@ FTP は本質的に安全ではないので、 SFTP - 最近ではほとんど
 
 ホスティングプロバイダーは、ウェブサイトが消費する{{Glossary("Bandwidth", "帯域幅")}}の量に応じて料金を請求します。これは、一定時間内に何人の人々やウェブクローリングロボットがコンテンツにアクセスしたか、またコンテンツがどれだけのサーバー空間を占有したかによって決まります。動画を YouTube, Dailymotion, Vimeo などの専用サービスに格納するのが一般的なのは、このためです。例えば、プロバイダーは「合理的な」帯域幅の使用のために、 1 日あたりの訪問者を数千人までに制限しているプランを提供しているかもしれません。ただし、これはプロバイダによって定義が異なるため、注意が必要です。信頼性の高い、有料の、私用ホスティングは、月額 10 〜 15 ドル程度を要することに留意してください。
 
-> **メモ:** 「無制限」の帯域幅というものは存在しません。膨大な量の帯域幅を消費する場合は、膨大な金額を支払うことが予想されます。
+> [!NOTE]
+> 「無制限」の帯域幅というものは存在しません。膨大な量の帯域幅を消費する場合は、膨大な金額を支払うことが予想されます。
 
 ### ドメイン名
 
diff --git a/files/ja/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/ja/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
index 61ac7266ed0db5..39c2fb92b22092 100644
--- a/files/ja/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
+++ b/files/ja/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
@@ -57,7 +57,8 @@ VSCode については、以下の無料拡張機能を調べると良いでし
 
 これを実現するためのもう一つの方法は、 Python の `http.server` モジュールを使用することです。
 
-> **メモ:** 古いバージョンの Python (バージョン 2.7 まで) では、`SimpleHTTPServer` という名前の似たようなモジュールが提供されていました。Python 2.x を使用している場合、`http.server` の使用をすべて `SimpleHTTPServer` に置き換えることで、このガイドを実行することができます。しかし、最新バージョンの Python を使用することをお勧めします。
+> [!NOTE]
+> 古いバージョンの Python (バージョン 2.7 まで) では、`SimpleHTTPServer` という名前の似たようなモジュールが提供されていました。Python 2.x を使用している場合、`http.server` の使用をすべて `SimpleHTTPServer` に置き換えることで、このガイドを実行することができます。しかし、最新バージョンの Python を使用することをお勧めします。
 
 このためには次のようにします。
 
@@ -101,7 +102,8 @@ VSCode については、以下の無料拡張機能を調べると良いでし
 
 5. 既定では、これはローカルウェブサーバー上のディレクトリーの内容を 8000 番ポート上で実行します。このサーバーにアクセスするには、ウェブブラウザーで `localhost:8000` の URL に移動します。ここにディレクトリーの内容が表示されるので、実行する HTML ファイルをクリックしてください。
 
-> **メモ:** すでに 8000 番ポートで何かが稼働している場合は、 server コマンドを実行して別のポート番号を選択することができます。例えば `python3 -m http.server 7800` (Python 3.x) または `python -m SimpleHTTPServer 7800` (Python 2.x) です。これで `localhost:7800` でコンテンツにアクセスできます。
+> [!NOTE]
+> すでに 8000 番ポートで何かが稼働している場合は、 server コマンドを実行して別のポート番号を選択することができます。例えば `python3 -m http.server 7800` (Python 3.x) または `python -m SimpleHTTPServer 7800` (Python 2.x) です。これで `localhost:7800` でコンテンツにアクセスできます。
 
 ## サーバー側の言語をローカルで実行
 
diff --git a/files/ja/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/ja/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
index 67208f81129ab1..7249aaae3dd30b 100644
--- a/files/ja/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/ja/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -41,7 +41,8 @@ l10n:
 
 SFTP クライアントには、いくつもの選択肢があります。ここのデモは [FileZilla](https://filezilla-project.org/) を使うことにします。 Windows、macOS、Linux で使え、無料だからです。 FileZilla をインストールするには、 [FileZilla ダウンロードページ](https://filezilla-project.org/download.php?type=client)に移動し、大きなダウンロードボタンをクリックしてから、通常の方法でインストーラーファイルからインストールします。
 
-> **メモ:** もちろん他にもたくさんの選択肢があります。詳しくは[公開ツール](/ja/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#公開ツール)を参照してください。
+> [!NOTE]
+> もちろん他にもたくさんの選択肢があります。詳しくは[公開ツール](/ja/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#公開ツール)を参照してください。
 
 FileZilla アプリケーションを開きます。次のようなものが表示されます。
 
@@ -71,7 +72,8 @@ FileZilla アプリケーションを開きます。次のようなものが表
 
 ![ブラウザーで見たデモジラの個人ウェブサイト。空っぽです。](demozilla-empty.png)
 
-> **メモ:** ホスティングプロバイダーによっては、最初にあなたのウェブアドレスに行ったときに、「このウェブサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。
+> [!NOTE]
+> ホスティングプロバイダーによっては、最初にあなたのウェブアドレスに行ったときに、「このウェブサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。
 
 SFTP クライアントを遠隔のサーバーに接続するには、次の手順を実行します。
 
diff --git a/files/ja/learn/common_questions/tools_and_setup/using_github_pages/index.md b/files/ja/learn/common_questions/tools_and_setup/using_github_pages/index.md
index b2532c746f1ea9..a23d95ac7925b9 100644
--- a/files/ja/learn/common_questions/tools_and_setup/using_github_pages/index.md
+++ b/files/ja/learn/common_questions/tools_and_setup/using_github_pages/index.md
@@ -43,7 +43,8 @@ GitHub にコードをアップロードする最良の方法は、コマンド
 
 ![端末またはコマンドプロンプトが開きました。コマンドは入力されていません。](command-line.png)
 
-> **メモ:** コマンドラインに不安がある場合は、[Git グラフィカルユーザーインターフェイス](https://git-scm.com/downloads/guis)を使用して、同じ作業を行うことも検討できます。
+> [!NOTE]
+> コマンドラインに不安がある場合は、[Git グラフィカルユーザーインターフェイス](https://git-scm.com/downloads/guis)を使用して、同じ作業を行うことも検討できます。
 
 すべてのオペレーティングシステムには、コマンドラインツールが付属しています。
 
diff --git a/files/ja/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/ja/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
index ae9818ac82c053..1d5a2fa63717bb 100644
--- a/files/ja/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
+++ b/files/ja/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
@@ -9,7 +9,8 @@ l10n:
 
 最近のブラウザーにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういった資産にアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザーの開発者ツールの使い方について説明します。
 
-> **メモ:** 下のサンプルを実行していく前に、[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)の記事の中で作りあげる、[初心者向けウェブサイトの例](https://mdn.github.io/beginner-html-site-scripted/)を開いてください。後ほどこれを使って説明します。
+> [!NOTE]
+> 下のサンプルを実行していく前に、[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)の記事の中で作りあげる、[初心者向けウェブサイトの例](https://mdn.github.io/beginner-html-site-scripted/)を開いてください。後ほどこれを使って説明します。
 
 ## ブラウザーの開発者ツールの開き方
 
diff --git a/files/ja/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/ja/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
index e1ba64c75c18ab..8bd362baeda17d 100644
--- a/files/ja/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
+++ b/files/ja/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
@@ -181,7 +181,8 @@ _利用可能なアクティブラーニングはまだありません。[ぜひ
 
 ウェブサイトを公開する準備が整ったら、ウェブページをウェブサーバーにアップロードする必要があります。さまざまなプロバイダーからサーバー上のスペースを購入できます（[ウェブ上で何かをするためにどれくらいコストがかかる？](/ja/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)を参照）。どのプロバイダーを使用するかが決まったら、プロバイダーは通常、SFTP URL、ユーザー名、パスワード、およびそれらのサーバーへの接続に必要なその他の情報の形式で、アクセス情報をメールで送信します。(S)FTPは今や幾分時代遅れになっていて、 [RSync](https://ja.wikipedia.org/wiki/Rsync) や [Git/GitHub](https://docs.github.com/ja/pages/configuring-a-custom-domain-for-your-github-pages-site) のような他のアップロードシステムが普及し始めていることを覚えておいてください。
 
-> **メモ:** FTP は本質的に安全ではありません。ホスティングプロバイダーが安全な接続、例えば SSH を介した SFTP または RSync の使用を許可していることを確認してください。
+> [!NOTE]
+> FTP は本質的に安全ではありません。ホスティングプロバイダーが安全な接続、例えば SSH を介した SFTP または RSync の使用を許可していることを確認してください。
 
 ウェブサーバーを作成する際、ウェブサーバーにファイルをアップロードすることは非常に重要なステップなので、[別の記事](/ja/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)で詳しく説明します。ここでは、単純な機能に限った無料 (S)FTP クライアントの例を示すにとどめます。
 
diff --git a/files/ja/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/ja/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
index f168dbc1d8776e..7a728053f043e1 100644
--- a/files/ja/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
+++ b/files/ja/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
@@ -45,7 +45,8 @@ l10n:
 
 2 つのコンピューターが通信を必要とする時、物理的に (通常は[イーサネットケーブル](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%BC%E3%82%B5%E3%83%8D%E3%83%83%E3%83%88#%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB)) や無線 ([Wi-Fi](https://ja.wikipedia.org/wiki/Wi-Fi) や [Bluetooth](https://ja.wikipedia.org/wiki/Bluetooth) など) で接続する必要があります。現在のすべてのコンピューターでは通信を維持することができます。
 
-> **メモ:** 残りの記事では物理ケーブルのみ説明を行いますが、無線ネットワークでも同じように動きます。
+> [!NOTE]
+> 残りの記事では物理ケーブルのみ説明を行いますが、無線ネットワークでも同じように動きます。
 
 ![2 台のコンピューターの相互リンク](internet-schema-1.png)
 
diff --git a/files/ja/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/ja/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index 8b89afa556e6a8..2d6eaaeba9cd68 100644
--- a/files/ja/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/ja/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -71,7 +71,8 @@ _利用可能なアクティブラーニングはまだありません。[ぜひ
 - **スクリプト** — ページへのインタラクティブ機能を追加
 - **メディア** — 画像、音楽、動画など
 
-> **メモ:** ブラウザーは {{Glossary("PDF")}} ファイルや画像などのような他の文書も表示することができますが、**ウェブページ**という用語は、特に HTML 文書を指します。それ以外の場合、単に**文書 (またはドキュメント)** という用語を使用します。
+> [!NOTE]
+> ブラウザーは {{Glossary("PDF")}} ファイルや画像などのような他の文書も表示することができますが、**ウェブページ**という用語は、特に HTML 文書を指します。それ以外の場合、単に**文書 (またはドキュメント)** という用語を使用します。
 
 ウェブ上で利用可能なすべてのウェブページには、固有のアドレスを使用して到達することができます。ページにアクセスするには、そのアドレスをブラウザーのアドレスバーに入力するだけです。
 
diff --git a/files/ja/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/ja/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
index 532328436dcfaa..a662ca4256c98b 100644
--- a/files/ja/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
+++ b/files/ja/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
@@ -72,7 +72,8 @@ l10n:
 
 レジストラーと呼ばれる会社が、ドメイン名のレジストリーを使用して、あなたをドメイン名に結び付ける技術的および管理的情報を保持します。
 
-> **メモ:** ドメイン名によっては、追跡を担当しているレジストラーではない可能性があります。たとえば、`.fire` の下のすべてのドメイン名は Amazon によって管理されています。
+> [!NOTE]
+> ドメイン名によっては、追跡を担当しているレジストラーではない可能性があります。たとえば、`.fire` の下のすべてのドメイン名は Amazon によって管理されています。
 
 #### 利用可能なドメイン名を探す
 
@@ -136,7 +137,8 @@ NOT FOUND
 3. フォームに必要事項をすべて記入してください。希望するドメイン名のスペルを間違えていないことを特に確認してください。支払いが済んだら、手遅れです。
 4. レジストラーは、ドメイン名が正しく登録されたことを知らせます。数時間以内に、すべての DNS サーバーがあなたの DNS 情報を受信するでしょう。
 
-> **メモ:** この過程で、レジストラーは現実世界の住所を尋ねます。国によっては、有効な住所を提供できないとレジストラーがドメインを強制的に閉鎖する可能性があるため、正しく入力するようにしてください。
+> [!NOTE]
+> この過程で、レジストラーは現実世界の住所を尋ねます。国によっては、有効な住所を提供できないとレジストラーがドメインを強制的に閉鎖する可能性があるため、正しく入力するようにしてください。
 
 #### DNS の更新
 
diff --git a/files/ja/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/ja/learn/common_questions/web_mechanics/what_is_a_url/index.md
index dfdec860b09050..2f0db455aac0d5 100644
--- a/files/ja/learn/common_questions/web_mechanics/what_is_a_url/index.md
+++ b/files/ja/learn/common_questions/web_mechanics/what_is_a_url/index.md
@@ -46,9 +46,11 @@ URL はさまざまな部分で構成されていますが、必須のものと
 
 ![完全 URL](mdn-url-all.png)
 
-> **メモ:** URL を通常の郵便の住所として考えることもできます。スキーム (_scheme_) は利用したい郵便サービス、ドメイン名 (_domain name_) は市町村、ポート番号 (_port_) は郵便番号のようなもの、パス (_path_) は郵便物を届けるべき建物、引数 (_parameters_) はその建物の部屋番号など追加情報、アンカー (_anchor_) は実際の宛先人物を表します。
+> [!NOTE]
+> URL を通常の郵便の住所として考えることもできます。スキーム (_scheme_) は利用したい郵便サービス、ドメイン名 (_domain name_) は市町村、ポート番号 (_port_) は郵便番号のようなもの、パス (_path_) は郵便物を届けるべき建物、引数 (_parameters_) はその建物の部屋番号など追加情報、アンカー (_anchor_) は実際の宛先人物を表します。
 
-> **メモ:** URL に関しては[いくつかの追加の部分と追加のルール](https://ja.wikipedia.org/wiki/Uniform_Resource_Locator)がありますが、これらは普通のユーザーとウェブ開発者には関係ありません。気にしないでください。これを知る必要はありませんし、 URL のすべての機能を使用する必要もありません。
+> [!NOTE]
+> URL に関しては[いくつかの追加の部分と追加のルール](https://ja.wikipedia.org/wiki/Uniform_Resource_Locator)がありますが、これらは普通のユーザーとウェブ開発者には関係ありません。気にしないでください。これを知る必要はありませんし、 URL のすべての機能を使用する必要もありません。
 
 ## スキーム
 
@@ -65,7 +67,8 @@ URL の最初の部分は**スキーム**で、ブラウザーがリソースを
 - ドメインは、どのウェブサーバーを要求しているのかを示します。通常は[ドメイン名](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)ですが、 {{Glossary("IP address", "IP アドレス")}}を使うこともあります（ただし、これは利便性に欠けるので稀です）。
 - ポートは、ウェブサーバー上のリソースにアクセスするために使用される技術的な「門」 を示します。ウェブサーバーが HTTP プロトコルの標準ポート（HTTP は 80、 HTTPS は 443）を使用してリソースへのアクセスを許可している場合は、通常、この項目は省略されます。それ以外の場合は必須です。
 
-> **メモ:** スキームとオーソリティの間の区切り文字は `://` です。コロンはスキームと URL の次の部分を分離し、 `//` は URL の次の部分がオーソリティであることを示します。
+> [!NOTE]
+> スキームとオーソリティの間の区切り文字は `://` です。コロンはスキームと URL の次の部分を分離し、 `//` は URL の次の部分がオーソリティであることを示します。
 >
 > オーソリティを使用しない URL の一例として、メールクライアント (`mailto:foobar`) があります。これはスキームを含んでいますが、オーソリティ部分を使用していません。したがって、コロンの後には 2 つのスラッシュがなく、スキームとメールアドレスの間の区切り文字としてのみ機能します。
 
@@ -98,7 +101,8 @@ URL の最初の部分は**スキーム**で、ブラウザーがリソースを
 - 画像（{{HTMLElement("img")}} 要素による）、動画（{{HTMLElement("video")}} 要素による）、音声と音楽（{{HTMLElement("audio")}} 要素による）などのメディアを表示する
 - {{HTMLElement("iframe")}} 要素により、他の HTML 文書を表示する
 
-> **メモ:** URL を指定してページの一部としてリソースを読み込む際（`<script>`, `<audio>`, `<img>`, `<video>` を使用する場合など）は、 HTTP と HTTPS の URL のみを使用してください。いくつかの例外はあります（注目すべきは `data:` です。[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) を参照してください）。たとえば FTP を使用しても、安全になることはなく、多くのブラウザーでは対応していません。
+> [!NOTE]
+> URL を指定してページの一部としてリソースを読み込む際（`<script>`, `<audio>`, `<img>`, `<video>` を使用する場合など）は、 HTTP と HTTPS の URL のみを使用してください。いくつかの例外はあります（注目すべきは `data:` です。[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) を参照してください）。たとえば FTP を使用しても、安全になることはなく、多くのブラウザーでは対応していません。
 
 {{Glossary("CSS")}} や {{Glossary("JavaScript")}} などの他の技術は、URL を広範囲に使用し、真にウェブの中核です。
 
diff --git a/files/ja/learn/css/building_blocks/a_cool_looking_box/index.md b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.md
index 791faa5ee7a4d5..2a0c8263b92c3e 100644
--- a/files/ja/learn/css/building_blocks/a_cool_looking_box/index.md
+++ b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.md
@@ -36,7 +36,8 @@ l10n:
 また、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターを使用することもできます。
 これらのオンラインエディターのいずれかに HTML を貼り付けて CSS を入力してください。
 
-> **メモ:** もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
+> [!NOTE]
+> もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
 ## プロジェクトの概要
 
diff --git a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md
index afff0547b8892b..d5a206f3ce728c 100644
--- a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md
+++ b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md
@@ -206,7 +206,8 @@ CSS でブレンドモードを使用するプロパティは、次の 2 つが
 
 こちらの [blend-modes.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) サンプルページ（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/blend-modes.html)を参照）、および {{cssxref("&lt;blend-mode&gt;")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。
 
-> **メモ:** ブレンドモードもまたとても新しいもので、フィルターよりも対応が進んでいません。Edge はまだ対応していませんし、Safari はブレンドモードオプションのいくつかだけに対応しています。
+> [!NOTE]
+> ブレンドモードもまたとても新しいもので、フィルターよりも対応が進んでいません。Edge はまだ対応していませんし、Safari はブレンドモードオプションのいくつかだけに対応しています。
 
 ### background-blend-mode
 
@@ -316,7 +317,8 @@ CSS シェイプ仕様により、長方形以外の図形にテキストを回
 
 この例のシェイプは画像ファイルのコンテンツに反応しているわけではありません。代わりに、 circle 関数が画像ファイルの中央を中心点として取り、あたかもファイルの中央にコンパスを置いて、ファイルの中に収まる円を描画したかのようになります。その円の周りをテキストが流れるのです。
 
-> **メモ:** Firefox では、開発者ツールの[シェイプインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)を使用してシェイプを検査することができます。
+> [!NOTE]
+> Firefox では、開発者ツールの[シェイプインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)を使用してシェイプを検査することができます。
 
 `circle()` 関数はいくつか定義されている基本的なシェイプの一つに過ぎませんが、シェイプを作成する方法はいくつもあります。CSS シェイプの詳細情報とサンプルコードについては、MDN の [CSS シェイプガイド](/ja/docs/Web/CSS/CSS_shapes/Overview_of_shapes)を参照してください。
 
@@ -335,7 +337,8 @@ CSS シェイプ仕様により、長方形以外の図形にテキストを回
 
 本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。
 
-> **メモ:** 完全な `-webkit-background-clip: text` のコードの例については、[background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) を参照してください（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/background-clip-text.html)も参照）。
+> [!NOTE]
+> 完全な `-webkit-background-clip: text` のコードの例については、[background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) を参照してください（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/background-clip-text.html)も参照）。
 
 ## まとめ
 
diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
index 15cdfb832e73ef..ba37031c798da6 100644
--- a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -110,7 +110,8 @@ CSS の {{cssxref("background")}} プロパティは、このレッスンで説
 
 {{cssxref("background-position")}} プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。これは、ボックスの左上端を `(0,0)` とし、ボックスを水平軸 (`x`) と垂直軸 (`y`) に沿って位置指定する座標系を使用します。
 
-> **メモ:** 既定の `background-position` の値は `(0,0)` です。
+> [!NOTE]
+> 既定の `background-position` の値は `(0,0)` です。
 
 最も一般的な `background-position` の値は、2 個の値をとります—水平方向、垂直方向の順で値を指定します。
 
@@ -176,7 +177,8 @@ CSS の {{cssxref("background")}} プロパティは、このレッスンで説
 
 これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。
 
-> **メモ:** グラデーションを通常の背景画像と同じように重ね合わせることができます。
+> [!NOTE]
+> グラデーションを通常の背景画像と同じように重ね合わせることができます。
 
 他の `background-*` プロパティも、 `background-image` と同じ方法でカンマ区切りの値を持つことができます。
 
@@ -268,7 +270,8 @@ background-position:
 }
 ```
 
-> **メモ:** top, right, bottom, left の各方向の境界線を指定するプロパティには、HTML 文書の書字方向 (writing mode) と結びついた*論理*プロパティ (_logical_ property) が割り当てられています（書字方向は、左から右、右から左、上から下といったテキストの方向を制御するものです）。次回のレッスンでは、[テキスト方向の扱](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)に応じたこれらの方法を探ります。
+> [!NOTE]
+> top, right, bottom, left の各方向の境界線を指定するプロパティには、HTML 文書の書字方向 (writing mode) と結びついた*論理*プロパティ (_logical_ property) が割り当てられています（書字方向は、左から右、右から左、上から下といったテキストの方向を制御するものです）。次回のレッスンでは、[テキスト方向の扱](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)に応じたこれらの方法を探ります。
 
 境界線にはさまざまなスタイルを指定できます。以下の例では、ボックスの 4 辺にそれぞれ異なる境界線スタイルを使用しています。境界線の色、幅、スタイルを試して、境界線の動作を確認しましょう。
 
diff --git a/files/ja/learn/css/building_blocks/box_model_tasks/index.md b/files/ja/learn/css/building_blocks/box_model_tasks/index.md
index 430a465e1926ae..72d58c9d6e8fdc 100644
--- a/files/ja/learn/css/building_blocks/box_model_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/box_model_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/box-models-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -48,7 +49,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/mbp-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -64,6 +65,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/inline-block-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md
index 996ebe79b06bd9..e02b6599becc0c 100644
--- a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -77,7 +77,8 @@ CSS は **Cascading Style Sheets** の略で、最初の単語であるカスケ
 
 いくつかのプロパティは継承されません。例えば、要素に {{cssxref("width")}} 50% と設定した場合、すべての子孫要素は親の幅の 50% の幅を取得しません。もしそんなことになるのら CSS を使うととてもイライラするでしょう。
 
-> **メモ:** MDN の CSS プロパティリファレンスページには、「公式定義」という技術情報ボックスがあり、そのプロパティに関するいくつかのデータポイント（継承されるかどうかなど）が記載されています。例として、[color プロパティの公式定義の節](/ja/docs/Web/CSS/color#公式定義)を参照してください。
+> [!NOTE]
+> MDN の CSS プロパティリファレンスページには、「公式定義」という技術情報ボックスがあり、そのプロパティに関するいくつかのデータポイント（継承されるかどうかなど）が記載されています。例として、[color プロパティの公式定義の節](/ja/docs/Web/CSS/color#公式定義)を参照してください。
 
 ## これらの概念がどう連携するか理解する
 
@@ -114,7 +115,8 @@ CSS は、継承を制御するための 5 つ の特別なユニバーサルプ
 - {{cssxref("unset")}}
   - : プロパティを自然な値にリセットします。つまり、プロパティが自然に継承される場合は `inherit` のように動作し、そうでない場合は `initial` のように動作します。
 
-> **メモ:** それぞれについて、またこれらがどのように動作するのかについては、[オリジンの種類](/ja/docs/Web/CSS/Cascade#オリジンの種類)を参照してください。
+> [!NOTE]
+> それぞれについて、またこれらがどのように動作するのかについては、[オリジンの種類](/ja/docs/Web/CSS/Cascade#オリジンの種類)を参照してください。
 
 リンクのリストを見ると、ユニバーサル値 (universal values) がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。
 
@@ -175,7 +177,8 @@ CSS の一括指定プロパティ [`all`](/ja/docs/Web/CSS/all) を使用して
 - **クラス**: この列は、クラスセレクター、属性セレクター、擬似クラスが全体のセレクターの中に含まれている場合に 1 点ずつ評価します。
 - **要素**: この列は、要素セレクターまたは擬似要素が全体のセレクターの中に含まれている場合に 1 点ずつ評価します。
 
-> **メモ:** 全称セレクター ([`*`](/ja/docs/Web/CSS/Universal_selectors))、[結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`、`>`、`~`、' ')、詳細度調整セレクター[`:where()`](/ja/docs/Web/CSS/:where)とその引数は、詳細度に影響しません。
+> [!NOTE]
+> 全称セレクター ([`*`](/ja/docs/Web/CSS/Universal_selectors))、[結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`、`>`、`~`、' ')、詳細度調整セレクター[`:where()`](/ja/docs/Web/CSS/:where)とその引数は、詳細度に影響しません。
 
 否定 ([`:not()`](/ja/docs/Web/CSS/:not))、関係セレクター ([`:has()`](/ja/docs/Web/CSS/:has))、match-any ([`:is()`](/ja/docs/Web/CSS/:is)) 擬似クラス、 [CSS 入れ子](/ja/docs/Web/CSS/CSS_nesting/Nesting_and_specificity)自身は、詳細度に影響を与えませんが、それらの引数や入れ子ルールには影響を及ぼします。それぞれが詳細度重みアルゴリズムに寄与する詳細度の重みは、最も大きな重みを持っている引数または入れ子ルールのセレクターの詳細度です。
 
@@ -199,7 +202,8 @@ CSS の一括指定プロパティ [`all`](/ja/docs/Web/CSS/all) を使用して
 - セレクター 3 と 4 は、リンクの文字色のスタイル設定をめぐって競合しています。2 つ目のセレクターが勝って、テキストを白にします。これは、要素セレクターが 1 つ少ないものの、足りないセレクターをクラスセレクターに入れ替えたためで、これはいくつの要素セレクターよりも比重が大きいからです。勝者の詳細度は、1-1-3 対 1-0-4 です。
 - セレクター 5 ～ 7 は、マウスを当てたときのリンクの境界線のスタイル設定をめぐって競合しています。セレクター 6 は、0-2-3 対 0-2-4 の詳細度でセレクター 5 に明らかに負けています。セレクター 6 には、連鎖する要素のセレクターが 1 つ少ないからです。しかし、セレクター 7 はセレクター 5 と同じ数のサブセレクターを持ちますが、要素がクラスセレクターに置き換えられているため、セレクター 5 と 6 の両方に勝っています。つまり、0-3-3 の詳細度が 0-2-3、0-2-4 に対して勝利します。
 
-> **メモ:** セレクターの種類ごとにはそれぞれレベルの詳細度があり、より低い詳細度レベルのセレクターによって上書きすることはできません。例えば _100 万 の_**クラス**セレクターを組み合わせても、_1 つ の_ **ID** セレクターのルールを上書きすることはできません。
+> [!NOTE]
+> セレクターの種類ごとにはそれぞれレベルの詳細度があり、より低い詳細度レベルのセレクターによって上書きすることはできません。例えば _100 万 の_**クラス**セレクターを組み合わせても、_1 つ の_ **ID** セレクターのルールを上書きすることはできません。
 >
 > 詳細度を評価する最良の方法は、詳細度の高いものから始めて、必要に応じて低いものへ移動しながら、個別に点数をつけることです。ある列のセレクターのスコアが同点である場合のみ、次の列を評価する必要があります。そうでない場合は、詳細度の低いセレクターは詳細度の高いセレクターを上書きすることができないため、無視することができます。
 
@@ -224,7 +228,8 @@ CSS の一括指定プロパティ [`all`](/ja/docs/Web/CSS/all) を使用して
 3. 両方の要素には `better` という [`class`](/ja/docs/Web/HTML/Global_attributes#class) がありますが、2 番目 の要素には `winning` という [`id`](/ja/docs/Web/HTML/Global_attributes#id) もあります。ID はクラスよりも**より高い詳細度**があるため（ページ上では ID を持つ要素は一意に 1 つ しか置けないのに対し、同じクラスを持つ多くの要素がありえるため、ID セレクターの方が**非常に限定的**になります）、2 番目の要素には赤い背景色と 1 ピクセルの黒い境界線が適用され、最初の要素についてはクラスで指定されたように灰色の背景色となり、境界線は消えます。
 4. 2 番目 の要素は赤い背景が適用されていますが、あるはずの境界線はありません。なぜでしょうか？ 2 つ目のルールに `!important` フラグがあるためです。`border: none` の後に `!important` フラグを追加すると、ID セレクターの方がより高い詳細度であっても、この宣言が前のルールの `border` 値に勝利するということです。
 
-> **メモ:** important 宣言を上書きする唯一の方法は、同じ詳細度を持つ別の important 宣言をソースの順番で後に記載するか、より高い詳細度を持つものを記載するか、前のカスケードレイヤーに important 宣言を記載することです（まだ、カスケードレイヤーについて触れていません）。
+> [!NOTE]
+> important 宣言を上書きする唯一の方法は、同じ詳細度を持つ別の important 宣言をソースの順番で後に記載するか、より高い詳細度を持つものを記載するか、前のカスケードレイヤーに important 宣言を記載することです（まだ、カスケードレイヤーについて触れていません）。
 
 `!important` フラグを使用しなければならない状況の 1 つ としては、コアにある CSS モジュールを編集できない CMS で作業している等で、他の方法では難しい場合にスタイルを実際にオーバーライドしたい場合等があります。でも本当に、回避できる場合は使用しないでください。
 
@@ -247,7 +252,8 @@ CSS の一括指定プロパティ [`all`](/ja/docs/Web/CSS/all) を使用して
 5. ユーザースタイルシートにおける important 宣言。
 6. ユーザーエージェントスタイルシートにおける important 宣言。
 
-> **メモ:** 優先順位は `!important` でフラグづけされたスタイルでは逆転します。ウェブ開発者のスタイルシートがユーザーのスタイルシートを上書きするのは理にかなっているので、デザインは意図したとおりに保たれます。しかし、上記のように、ユーザーがウェブ開発者のスタイルを上書きするのに有益な理由がある場合もあり、その場合はルールに `!important` を使用して実現することができます。
+> [!NOTE]
+> 優先順位は `!important` でフラグづけされたスタイルでは逆転します。ウェブ開発者のスタイルシートがユーザーのスタイルシートを上書きするのは理にかなっているので、デザインは意図したとおりに保たれます。しかし、上記のように、ユーザーがウェブ開発者のスタイルを上書きするのに有益な理由がある場合もあり、その場合はルールに `!important` を使用して実現することができます。
 
 ### カスケードレイヤーの順序
 
@@ -278,7 +284,8 @@ CSS をカスケードレイヤーで宣言する場合、優先順位はレイ
 
 **スコープ近接性**は、スコープされた要素間の競合を解決するメカニズムです。スコープ近接性は、2 つのスコープに競合するスタイル設定がある場合、 DOM ツリー階層からスコープルートへの移動数が最も少ないスタイルが優先されるという状態です。詳細と例は [`@scope` の競合の解決方法](/ja/docs/Web/CSS/@scope#scope_の競合の解決方法)を参照してください。
 
-> **メモ:** スコープの近接性はソースの順序よりも優先されますが、[重要度](/ja/docs/Web/CSS/important)、[レイヤー](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)、[詳細度](/ja/docs/Web/CSS/Specificity)のような他にも優先度の高い仕様があれば、そちらが優先されます。
+> [!NOTE]
+> スコープの近接性はソースの順序よりも優先されますが、[重要度](/ja/docs/Web/CSS/important)、[レイヤー](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)、[詳細度](/ja/docs/Web/CSS/Specificity)のような他にも優先度の高い仕様があれば、そちらが優先されます。
 
 ## スキルテスト
 
diff --git a/files/ja/learn/css/building_blocks/cascade_layers/index.md b/files/ja/learn/css/building_blocks/cascade_layers/index.md
index fb9fe4fab67c0f..a46ffad4cd02fc 100644
--- a/files/ja/learn/css/building_blocks/cascade_layers/index.md
+++ b/files/ja/learn/css/building_blocks/cascade_layers/index.md
@@ -134,7 +134,8 @@ CSS の C は "Cascading" （カスケード）の略です。スタイルが連
 
 3 つのメソッドはすべて、その名前を持つレイヤーがまだ初期化されていない場合に、レイヤーを作成します。レイヤー名が `@layer` のアットルールまたは `layer()` による `@import` で指定されなかった場合、新しい無名 (unnamed) のレイヤーが作成されます。
 
-> **メモ:** レイヤーの優先順位は、作成された順番です。レイヤーに含まれないスタイル、すなわち「非レイヤースタイル」は、最終的な暗黙のラベルに一緒にカスケードされます。
+> [!NOTE]
+> レイヤーの優先順位は、作成された順番です。レイヤーに含まれないスタイル、すなわち「非レイヤースタイル」は、最終的な暗黙のラベルに一緒にカスケードされます。
 
 レイヤーの入れ子について説明する前に、レイヤーを作成する 3 つの方法についてもう少し詳しく説明しましょう。
 
@@ -210,7 +211,8 @@ body {
 
 無名レイヤーは、レイヤーに名前を付けずにスタイルを割り当てることで作成されます。無名レイヤーにスタイルを追加することができるのは、その作成時のみです。
 
-> **メモ:** レイヤー名を指定せずに `@layer` を使用すると、さらに無名レイヤーが作成されます。これは、前回存在した無名レイヤーにスタイルを追加することはありません。
+> [!NOTE]
+> レイヤー名を指定せずに `@layer` を使用すると、さらに無名レイヤーが作成されます。これは、前回存在した無名レイヤーにスタイルを追加することはありません。
 
 アットルール `@layer` は、名前があってもなくてもレイヤーを作成し、名前があるレイヤーがすでに存在する場合はレイヤーにスタイルを追加します。最初の無名レイヤーを `<anonymous(01)>` と呼び、2つ目を `<anonymous(02)>` と呼びましたが、これは説明するためだけのものです。これらは実際には無名レイヤーです。これらを参照したり、追加のスタイルを設定したりする方法はありません。
 
@@ -262,7 +264,8 @@ body {
   (width >= 32rem);
 ```
 
-> **メモ:** スタイルシートをリンクする {{HTMLElement('link')}} の方法に相当するものはありません。スタイルシート内で `@layer` を使用できない場合、スタイルシートをレイヤーにインポートするために `@import` を使用します。
+> [!NOTE]
+> スタイルシートをリンクする {{HTMLElement('link')}} の方法に相当するものはありません。スタイルシート内で `@layer` を使用できない場合、スタイルシートをレイヤーにインポートするために `@import` を使用します。
 
 ## 入れ子のカスケードレイヤーの概要
 
diff --git a/files/ja/learn/css/building_blocks/cascade_tasks/index.md b/files/ja/learn/css/building_blocks/cascade_tasks/index.md
index 7b7fc2774de99b..074f65c102297d 100644
--- a/files/ja/learn/css/building_blocks/cascade_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/cascade_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS における継承の制御](/ja/docs/Learn/CSS/Building_blocks/Selectors)の全般的なプロパティ値を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/cascade/cascade-download.html)しましょう。
 
@@ -41,6 +42,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascadelayer.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/cascade/cascadelayer-download.html)しましょう。
diff --git a/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
index 781bf1f750f40a..cea928dfc0c766 100644
--- a/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
+++ b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
@@ -37,7 +37,8 @@ l10n:
 また、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターを使用することもできます。
 これらのオンラインエディターのいずれかに HTML を貼り付けて CSS を入力してください。
 
-> **メモ:** もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
+> [!NOTE]
+> もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
 ## プロジェクト概要
 
diff --git a/files/ja/learn/css/building_blocks/debugging_css/index.md b/files/ja/learn/css/building_blocks/debugging_css/index.md
index 19d87f984fffc4..166bdf9d8fa4d5 100644
--- a/files/ja/learn/css/building_blocks/debugging_css/index.md
+++ b/files/ja/learn/css/building_blocks/debugging_css/index.md
@@ -86,7 +86,8 @@ HTML の右側にある[ルールビュー](https://firefox-source-docs.mozilla.
 
 ![開発者ツールパネル、新しいプロパティをルールに追加し、フォントのオートコンプリートを開く](inspecting3-font-size.png)
 
-> **メモ:** ルールビューには他にも便利な機能があります。**たとえば**、無効な値の宣言には**取り消し線が引か**れています。詳しくは、[CSS の確認と編集](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)をご覧ください。
+> [!NOTE]
+> ルールビューには他にも便利な機能があります。**たとえば**、無効な値の宣言には**取り消し線が引か**れています。詳しくは、[CSS の確認と編集](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)をご覧ください。
 
 ## ボックスモデルについて
 
@@ -102,7 +103,8 @@ HTML の右側にある[ルールビュー](https://firefox-source-docs.mozilla.
 
 ![開発ツールのレイアウトセクション](inspecting4-box-model.png)
 
-> **メモ:** 詳細については、[ボックスモデルの調査と検査](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_the_box_model/index.html)をご覧ください。
+> [!NOTE]
+> 詳細については、[ボックスモデルの調査と検査](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_the_box_model/index.html)をご覧ください。
 
 ## 詳細度に関する問題の解決
 
diff --git a/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.md
index 5a5e22b74db488..f10ac959e9f632 100644
--- a/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -37,7 +37,8 @@ l10n:
 また、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターを使用することもできます。
 これらのオンラインエディターのいずれかに HTML を貼り付けて CSS を入力し、[この URL](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) を使用して `<img>` 要素を画像ファイルに指定することができます。
 
-> **メモ:** もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
+> [!NOTE]
+> もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
 ## プロジェクト概要
 
@@ -71,7 +72,8 @@ CSS リソースファイルで提供されているセレクターとルール
 - フッターの内側の `<p>` を 15 px の有効フォントサイズ (ただし `em`s で表示) とフッターのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。
 - 最後のちょっとしたタッチとして、`<article>` の内側の段落に適切なパディング値を指定して、その左端が `<h2>` とフッターの段落に揃うようにし、読みやすくなるように色をかなり明るい色に設定します。
 
-> **メモ:** 2 番目のルールセットは `<html>` 要素に `font-size: 10px;` を設定することに注意してください。これは `<html>` のすべての子孫について、em はデフォルトの 16 px ではなく 10 px になることを意味します (これはもちろん、階層内で問題の子孫と `<html>` の間に別の `font-size` が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。
+> [!NOTE]
+> 2 番目のルールセットは `<html>` 要素に `font-size: 10px;` を設定することに注意してください。これは `<html>` のすべての子孫について、em はデフォルトの 16 px ではなく 10 px になることを意味します (これはもちろん、階層内で問題の子孫と `<html>` の間に別の `font-size` が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。
 
 その他の考慮事項
 
diff --git a/files/ja/learn/css/building_blocks/images_media_form_elements/index.md b/files/ja/learn/css/building_blocks/images_media_form_elements/index.md
index 4553ce3f1d27e5..f2dd6e6ff617cc 100644
--- a/files/ja/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/ja/learn/css/building_blocks/images_media_form_elements/index.md
@@ -106,7 +106,8 @@ HTML には、ウェブ開発者が必須フィールド、さらには入力す
 
 {{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}
 
-> **警告:** フォーム要素のスタイルを変更するときは、ユーザーがフォーム要素であることをユーザーに明確に伝えるように注意する必要があります。周囲のコンテンツとほとんど見分けがつかない境界線や背景のないフォーム入力を作成することもできますが、これにより認識や入力が非常に難しくなります。
+> [!WARNING]
+> フォーム要素のスタイルを変更するときは、ユーザーがフォーム要素であることをユーザーに明確に伝えるように注意する必要があります。周囲のコンテンツとほとんど見分けがつかない境界線や背景のないフォーム入力を作成することもできますが、これにより認識や入力が非常に難しくなります。
 
 [ウェブフォームのスタイル設定](/ja/docs/Learn/Forms/Styling_web_forms)に関するレッスンで説明したように、より複雑な入力タイプの多くはオペレーティングシステムによってレンダリングされ、スタイル設定にアクセスできません。そのため、フォームは訪問者によってかなり違って見えることを常に想定し、複雑なフォームをいくつかのブラウザーでテストする必要があります。
 
@@ -172,7 +173,8 @@ textarea {
 }
 ```
 
-> **メモ:** 正規化スタイルシートは、すべてのプロジェクトで使用する一連のベースラインスタイルを作成するために、多くの開発者によって使用されています。通常、これらは上記で説明したものと同様のことを行います。 CSS で独自の作業を行う前に、ブラウザー間で異なるものがすべて一貫した既定に設定されていることを確認してください。ブラウザーは通常、以前より一貫性があるため、以前ほど重要ではありません。ただし、1 つの例を見てみたい場合は、 [Normalize.css](https://necolas.github.io/normalize.css/) をチェックしてください。これは、多くのプロジェクトでベースとして使用されている非常に人気のあるスタイルシートです。
+> [!NOTE]
+> 正規化スタイルシートは、すべてのプロジェクトで使用する一連のベースラインスタイルを作成するために、多くの開発者によって使用されています。通常、これらは上記で説明したものと同様のことを行います。 CSS で独自の作業を行う前に、ブラウザー間で異なるものがすべて一貫した既定に設定されていることを確認してください。ブラウザーは通常、以前より一貫性があるため、以前ほど重要ではありません。ただし、1 つの例を見てみたい場合は、 [Normalize.css](https://necolas.github.io/normalize.css/) をチェックしてください。これは、多くのプロジェクトでベースとして使用されている非常に人気のあるスタイルシートです。
 
 フォームのスタイル設定の詳細については、これらのガイドの HTML セクションにある 2 つの記事をご覧ください。
 
diff --git a/files/ja/learn/css/building_blocks/images_tasks/index.md b/files/ja/learn/css/building_blocks/images_tasks/index.md
index 38620aa294f5b0..645dc4b2604542 100644
--- a/files/ja/learn/css/building_blocks/images_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/images_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、[画像、メディア、フォーム要素](/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements)のような特殊な要素が CSS でどのように扱われるかを理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/images/object-fit-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -46,6 +47,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/images/form-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/building_blocks/index.md b/files/ja/learn/css/building_blocks/index.md
index 3c56838d938ffb..8a2104a9a64bce 100644
--- a/files/ja/learn/css/building_blocks/index.md
+++ b/files/ja/learn/css/building_blocks/index.md
@@ -20,7 +20,8 @@ l10n:
 3. [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)で説明されている HTML についての基礎知識に慣れ親しんでいること。
 4. [CSS の第一歩](/ja/docs/Learn/CSS/First_steps)で説明されている CSS の基本について理解していること。
 
-> **メモ:** 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったオンラインコーディングプログラムで試すことが可能です
+> [!NOTE]
+> 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったオンラインコーディングプログラムで試すことが可能です
 
 ## ガイド
 
diff --git a/files/ja/learn/css/building_blocks/organizing/index.md b/files/ja/learn/css/building_blocks/organizing/index.md
index 6c868336670fd4..8d87cce2854352 100644
--- a/files/ja/learn/css/building_blocks/organizing/index.md
+++ b/files/ja/learn/css/building_blocks/organizing/index.md
@@ -387,7 +387,8 @@ CSS を整理する 1 つの方法は、スタイルシートを小さなスタ
 @use "foundation";
 ```
 
-> **メモ:** Sass を試す簡単な方法は、[CodePen](https://codepen.io) を使用することです。これを有効にすると、 CodePen が Sass パーサーを実行してくれるので、通常の CSS を適用したウェブページを見ることができます。CSS チュートリアルでは、CodePen のデモでプレーンな CSS ではなく Sass を使用しているのを見つけることがありますので、少しでも知っておくと便利です。
+> [!NOTE]
+> Sass を試す簡単な方法は、[CodePen](https://codepen.io) を使用することです。これを有効にすると、 CodePen が Sass パーサーを実行してくれるので、通常の CSS を適用したウェブページを見ることができます。CSS チュートリアルでは、CodePen のデモでプレーンな CSS ではなく Sass を使用しているのを見つけることがありますので、少しでも知っておくと便利です。
 
 #### ポストプロセッサー
 
diff --git a/files/ja/learn/css/building_blocks/overflow_tasks/index.md b/files/ja/learn/css/building_blocks/overflow_tasks/index.md
index ca05679859e7d9..54f7d5900c839e 100644
--- a/files/ja/learn/css/building_blocks/overflow_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/overflow_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS のオーバーフローとその管理方法](/ja/docs/Learn/CSS/Building_blocks/Overflowing_content)方法を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -23,7 +24,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/overflow/overflow-scroll-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -39,6 +40,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1200)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/overflow/overflow-hidden-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.md
index 3072cb60127e6c..742e99287819ac 100644
--- a/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -120,7 +120,8 @@ HTML の学習で学んだように、要素はマークアップについてさ
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
 
-> **メモ:** 新しい値 `s` もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別する照合を強制しますが、これはブラウザーではあまり対応されておらず、HTML の文脈ではあまり役に立ちません。
+> [!NOTE]
+> 新しい値 `s` もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別する照合を強制しますが、これはブラウザーではあまり対応されておらず、HTML の文脈ではあまり役に立ちません。
 
 ## 次のステップ
 
diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.md b/files/ja/learn/css/building_blocks/selectors/combinators/index.md
index 9075e256c73599..d8d24dc27787e3 100644
--- a/files/ja/learn/css/building_blocks/selectors/combinators/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.md
@@ -121,7 +121,8 @@ p img {
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}}
 
-> **メモ:** 上の例では、 `&` 入れ子セレクターは必須ではありませんが、これを追加することで、CSSの入れ子が使用されていることを明示的に示すことができます。
+> [!NOTE]
+> 上の例では、 `&` 入れ子セレクターは必須ではありませんが、これを追加することで、CSSの入れ子が使用されていることを明示的に示すことができます。
 
 ## 結合子の使用
 
diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 07245dd95a67d2..e7efec1741c56c 100644
--- a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -54,7 +54,8 @@ l10n:
 - [`:only-child`](/ja/docs/Web/CSS/:only-child)
 - [`:invalid`](/ja/docs/Web/CSS/:invalid)
 
-> **メモ:** 擬似クラスや要素の前に要素セレクターを書かずに書くことは有効です。この例では、 `:first-child` と書けば、段落の最初の子要素だけでなく、 `<article>` 要素の最初の子要素であるすべての要素に適用されます。 `:first-child` は `*:first-child` と等価だからです。しかし、通常は複数の要素を制御したいので、より詳細度を上げる必要があります。
+> [!NOTE]
+> 擬似クラスや要素の前に要素セレクターを書かずに書くことは有効です。この例では、 `:first-child` と書けば、段落の最初の子要素だけでなく、 `<article>` 要素の最初の子要素であるすべての要素に適用されます。 `:first-child` は `*:first-child` と等価だからです。しかし、通常は複数の要素を制御したいので、より詳細度を上げる必要があります。
 
 ### ユーザー操作擬似クラス
 
@@ -71,7 +72,8 @@ l10n:
 
 擬似要素はダブルコロン `::` で始まります。擬似要素の例は `::before` です。
 
-> **メモ:** 一部の初期の擬似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の擬似要素に対応しています。
+> [!NOTE]
+> 一部の初期の擬似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の擬似要素に対応しています。
 
 たとえば、段落の最初の行を選択する場合は、それを `<span>` 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1 行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTML を追加してこれを確実に行うことは不可能です。
 
diff --git a/files/ja/learn/css/building_blocks/selectors/selectors_tasks/index.md b/files/ja/learn/css/building_blocks/selectors/selectors_tasks/index.md
index 55646eb125b679..0c3ad272a642ef 100644
--- a/files/ja/learn/css/building_blocks/selectors/selectors_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/selectors_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -29,7 +30,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/type-download.html)しましょう。
 
@@ -50,7 +51,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/class-id-download.html)しましょう。
 
@@ -70,7 +71,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/pseudo-download.html)しましょう。
 
@@ -89,7 +90,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/combinators-download.html)しましょう。
 
@@ -109,6 +110,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/attribute-links-download.html)しましょう。
diff --git a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index e2de91b9247718..4e7ad78a70ab4f 100644
--- a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -106,9 +106,11 @@ ID セレクターは大文字と小文字を区別し、ピリオドではな
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
 
-> **警告:** 文書内で同じ ID を複数回使用すると、スタイル設定のためには動作するように見えるかもしれませんが、このようなことはしないでください。不正なコードになり、多くの場所でおかしな挙動を発生させます。
+> [!WARNING]
+> 文書内で同じ ID を複数回使用すると、スタイル設定のためには動作するように見えるかもしれませんが、このようなことはしないでください。不正なコードになり、多くの場所でおかしな挙動を発生させます。
 
-> **メモ:** ID セレクターは{{cssxref("specificity", "詳細度")}}が高くなっています。これは、 ID セレクターに一致することに基づいて適用されるスタイルが、クラスセレクターや要素型セレクターを含む他のセレクターに基づいて適用されるスタイルに優先するということです。 ID はページ内で一度しか出現せず、 ID セレクターの詳細度が高いので、 ID の代わりに要素にクラスを追加することが推奨されます。もし ID を使用することだけが要素を対象とする唯一の方法である場合、おそらくマークアップにアクセスすることができず、編集することができないため、[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)の中で ID を使用すること、例えば `p[id="header"]` のようにすることを検討してください。[詳細度を学びましょう](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)。
+> [!NOTE]
+> ID セレクターは{{cssxref("specificity", "詳細度")}}が高くなっています。これは、 ID セレクターに一致することに基づいて適用されるスタイルが、クラスセレクターや要素型セレクターを含む他のセレクターに基づいて適用されるスタイルに優先するということです。 ID はページ内で一度しか出現せず、 ID セレクターの詳細度が高いので、 ID の代わりに要素にクラスを追加することが推奨されます。もし ID を使用することだけが要素を対象とする唯一の方法である場合、おそらくマークアップにアクセスすることができず、編集することができないため、[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)の中で ID を使用すること、例えば `p[id="header"]` のようにすることを検討してください。[詳細度を学びましょう](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)。
 
 ## 次の記事
 
diff --git a/files/ja/learn/css/building_blocks/sizing_tasks/index.md b/files/ja/learn/css/building_blocks/sizing_tasks/index.md
index 239f951cbbb40c..79b06ffa3f3e55 100644
--- a/files/ja/learn/css/building_blocks/sizing_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/sizing_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS でのアイテムのサイズ設定](/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)の様々な方法を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/color-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -41,7 +42,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/sizing/percentages-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -57,6 +58,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/sizing/max-width-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/building_blocks/tables_tasks/index.md b/files/ja/learn/css/building_blocks/tables_tasks/index.md
index 0e85e7ba2f9517..aeda9ee065eb52 100644
--- a/files/ja/learn/css/building_blocks/tables_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/tables_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS で HTML の表をスタイル設定](/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements)する方法を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -36,6 +37,6 @@ l10n:
 
 - 表のレイアウトをもう少し予測しやすいものにするにはどうしたらよいでしょうか。既定では表の段組みがどのようにサイズ調整されているか、そしてこの動作を見出しの幅に応じて列のサイズを調整するように変更する方法を考えてみましょう。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/images/form-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md b/files/ja/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
index 0231e233e8295a..e612789079886d 100644
--- a/files/ja/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
+++ b/files/ja/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS のボックスの背景と境界線](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -29,7 +30,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/box-models-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -49,6 +50,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/inline-block-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/building_blocks/the_box_model/index.md b/files/ja/learn/css/building_blocks/the_box_model/index.md
index 304b3c80426df3..ac72d28627de17 100644
--- a/files/ja/learn/css/building_blocks/the_box_model/index.md
+++ b/files/ja/learn/css/building_blocks/the_box_model/index.md
@@ -72,7 +72,8 @@ HTML 要素の中には、 `<a>`、`<span>`、`<em>`、`<strong>` のように
 
 CSS のレイアウトのより詳しい学習をする段階では、 [`flex`](/ja/docs/Learn/CSS/CSS_layout/Flexbox) を始めとしたボックスが持つことができる他の様々な内部値、例えば [`grid`](/ja/docs/Learn/CSS/CSS_layout/Grids) などに出会うでしょう。
 
-> **メモ:** display の値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、[ブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)に関する MDN ガイドを参照してください。
+> [!NOTE]
+> display の値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、[ブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)に関する MDN ガイドを参照してください。
 
 ## さまざまな表示型の例
 
@@ -139,7 +140,8 @@ CSS でブロックボックスを構成するものとしては、以下のも
 
 ![標準ボックスモデルを使用している場合のボックスサイズを示しています。](standard-box-model.png)
 
-> **メモ:** マージンは、ボックスの実際のサイズにはカウントされません。確かに、ボックスがページ上で占める合計スペースに影響しますが、ボックスの外側のスペースにのみ影響します。ボックスの領域は境界線で停止し、マージンまでは達しません。
+> [!NOTE]
+> マージンは、ボックスの実際のサイズにはカウントされません。確かに、ボックスがページ上で占める合計スペースに影響しますが、ボックスの外側のスペースにのみ影響します。ボックスの領域は境界線で停止し、マージンまでは達しません。
 
 ### CSS 代替ボックスモデル
 
diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.md b/files/ja/learn/css/building_blocks/values_and_units/index.md
index 8068cae5992bc2..d9cb25bd6dd5bc 100644
--- a/files/ja/learn/css/building_blocks/values_and_units/index.md
+++ b/files/ja/learn/css/building_blocks/values_and_units/index.md
@@ -11,7 +11,8 @@ CSS ルールには[宣言](/ja/docs/Web/CSS/Syntax#css_declarations)が含ま
 CSS を使用するそれぞれのプロパティには、どのような値を使用することができるかを記述する**値型**があります。
 このレッスンでは、最も頻繁に使用する値の型と、それが何であるか、そしてそれらがどのように動作するかを見ていきます。
 
-> **メモ:** それぞれの [CSS プロパティページ](/ja/docs/Web/CSS/Reference#index)には、そのプロパティで使用することができる、値の種類を示す構文の節があります。
+> [!NOTE]
+> それぞれの [CSS プロパティページ](/ja/docs/Web/CSS/Reference#index)には、そのプロパティで使用することができる、値の種類を示す構文の節があります。
 
 <table>
   <tbody>
@@ -42,9 +43,11 @@ CSS を使用するそれぞれのプロパティには、どのような値を
 
 CSS の仕様書や MDN のプロパティページでは、[`<color>`](/ja/docs/Web/CSS/color_value) や {{cssxref("length")}} のような角括弧で囲まれた値を見かけることがあります。特定のプロパティに有効な値型として `<color>` が表示されている場合、 [`<color>`](/ja/docs/Web/CSS/color_value) のリファレンスページに掲載されているように、そのプロパティの値として有効な色を使用することができることを意味しています。
 
-> **メモ:** CSS の値型は _データ型_ と呼ばれます。これらの用語は基本的に同じ意味です。 CSS の中でデータ型と呼ばれるものを見かけますが、これは実に値型のおしゃれな言い方に過ぎません。 _値_ という用語は、使用している値型に対応している具体的な表現を参照します。
+> [!NOTE]
+> CSS の値型は _データ型_ と呼ばれます。これらの用語は基本的に同じ意味です。 CSS の中でデータ型と呼ばれるものを見かけますが、これは実に値型のおしゃれな言い方に過ぎません。 _値_ という用語は、使用している値型に対応している具体的な表現を参照します。
 
-> **メモ:** CSS の値は角括弧 (`<`, `>`) で囲むことが多く、 CSS のプロパティによって違います。> 例えば、 {{cssxref("color")}} プロパティや [`<color>`](/ja/docs/Web/CSS/color_value) データ型があります。
+> [!NOTE]
+> CSS の値は角括弧 (`<`, `>`) で囲むことが多く、 CSS のプロパティによって違います。> 例えば、 {{cssxref("color")}} プロパティや [`<color>`](/ja/docs/Web/CSS/color_value) データ型があります。
 > これは同様に角括弧を使用する HTML の要素は違いますので、混同しないでください。しかし、これは、文脈から明らかであるべきであることを覚えておいてください。
 
 次の例では、キーワードを使用して章立ての色を設定し、かつ背景色を `rgb()` 関数を使って指定します。
@@ -247,7 +250,8 @@ p {
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 600)}}
 
-> **メモ:** CSS で値として数を使用する場合、その値を引用符で囲んではなりません。
+> [!NOTE]
+> CSS で値として数を使用する場合、その値を引用符で囲んではなりません。
 
 ## 色
 
@@ -293,7 +297,8 @@ RGB 値を直接作成する場合、 [`rgb()`](/ja/docs/Web/CSS/color_value/rgb
 
 `rgb()` には 4 番目の引数を渡すことができ、これは色のアルファチャンネルを表します。この値を `0` に設定すると色は完全に透明になり、 `1` に設定すると完全に不透明になります。この中間の値を指定すると、さまざまな透過率を得ることができます。
 
-> **メモ:** 色にアルファチャンネルを設定する場合、先ほど見てきた {{cssxref("opacity")}} プロパティを使用するのとは異なる点があります。 opacity を使用すると、要素とその中のすべてのものを不透明にしますが、 RGB にアルファ引数付きの色を使用すると、指定した色だけを不透明にします。
+> [!NOTE]
+> 色にアルファチャンネルを設定する場合、先ほど見てきた {{cssxref("opacity")}} プロパティを使用するのとは異なる点があります。 opacity を使用すると、要素とその中のすべてのものを不透明にしますが、 RGB にアルファ引数付きの色を使用すると、指定した色だけを不透明にします。
 
 下記の例では、色つきボックスの包含ブロックに背景画像を追加しています。アルファチャンネルの値が小さいほど、背景がより透けて見えることに注目してください。
 
@@ -301,7 +306,8 @@ RGB 値を直接作成する場合、 [`rgb()`](/ja/docs/Web/CSS/color_value/rgb
 
 **この例では、アルファチャンネルの値を変えてみて、それが色出力にどのように影響するかを見てみましょう。**
 
-> **メモ:** 古いバージョンの CSS では、 `rgb()` 構文はアルファ引数に対応しておらず、そのために `rgba()` という別な関数を使用する必要がありました。最近では `rgb()` にアルファ引数を渡すことができます。 `rgba()` 関数は `rgb()` の別名です。
+> [!NOTE]
+> 古いバージョンの CSS では、 `rgb()` 構文はアルファ引数に対応しておらず、そのために `rgba()` という別な関数を使用する必要がありました。最近では `rgb()` にアルファ引数を渡すことができます。 `rgba()` 関数は `rgb()` の別名です。
 
 ### SRGB 値
 
@@ -345,7 +351,8 @@ RGB の例を HSL の色に更新すると次のようになります。
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 900)}}
 
-> **メモ:** CSS の古いバージョンでは、 `hsl()` 構文はアルファ引数に対応していませんでした。そのためには `hsla()` という別の関数を使用する必要がありました。最近では `hsl()` にアルファ引数を渡すことができますが、古いウェブサイトとの後方互換性のために `hsla()` 構文も対応しており、`hsl()` とまったく同じ動作があります。
+> [!NOTE]
+> CSS の古いバージョンでは、 `hsl()` 構文はアルファ引数に対応していませんでした。そのためには `hsla()` という別の関数を使用する必要がありました。最近では `hsl()` にアルファ引数を渡すことができますが、古いウェブサイトとの後方互換性のために `hsla()` 構文も対応しており、`hsl()` とまったく同じ動作があります。
 
 ## 画像
 
diff --git a/files/ja/learn/css/building_blocks/values_tasks/index.md b/files/ja/learn/css/building_blocks/values_tasks/index.md
index b4c5e5bb9e2805..30165c7bc01d56 100644
--- a/files/ja/learn/css/building_blocks/values_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/values_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS プロパティで使われる様々な種類の値と単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -29,7 +30,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/color-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -50,7 +51,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/length-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -66,6 +67,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/position-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/building_blocks/writing_modes_tasks/index.md b/files/ja/learn/css/building_blocks/writing_modes_tasks/index.md
index 2f90e80d0fbfa5..6af784b3e2bd34 100644
--- a/files/ja/learn/css/building_blocks/writing_modes_tasks/index.md
+++ b/files/ja/learn/css/building_blocks/writing_modes_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS の書字方向と論理的プロパティを使用した様々なテキストの方向を扱う](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)方法を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/writing-modes/writing-mode-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -41,7 +42,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/writing-modes/logical-width-height-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -57,6 +58,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/writing-modes/logical-mbp-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/css/css_layout/flexbox_skills/index.md b/files/ja/learn/css/css_layout/flexbox_skills/index.md
index 4d59e338ad04c2..ec2a6ef62c508f 100644
--- a/files/ja/learn/css/css_layout/flexbox_skills/index.md
+++ b/files/ja/learn/css/css_layout/flexbox_skills/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、[フレックスボックスとフレックスアイテム](/ja/docs/Learn/CSS/CSS_layout/Flexbox)がどのように動作するか理解しているかどうかを評価することです。以下にフレックスボックスを使用して作成する 4 つの一般的なデザインパターンを示します。課題はそれらを構築することです。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox1-download.html)しましょう。
 
@@ -45,7 +46,7 @@ l10n:
 
 - これで最初のアイテムを他のアイテムの 2 倍の大きさにできますか？
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox2-download.html)しましょう。
 
@@ -61,7 +62,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox3-download.html)しましょう。
 
@@ -75,6 +76,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 1100)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox4-download.html)しましょう。
diff --git a/files/ja/learn/css/css_layout/floats_skills/index.md b/files/ja/learn/css/css_layout/floats_skills/index.md
index e34ee0dbc548c3..8c248ccf5b5b36 100644
--- a/files/ja/learn/css/css_layout/floats_skills/index.md
+++ b/files/ja/learn/css/css_layout/floats_skills/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、 [CSS の浮動ボックス](/ja/docs/Learn/CSS/CSS_layout/Floats)を理解しているかを評価するために、 {{CSSxRef("float")}} と {{CSSxRef("clear")}} プロパティと値、そして浮動ボックスをクリアするその他の方法を使用することです。今までに扱った素材のさまざまな要素を使用する、 3 つの小さな課題に取り組んでいただきます。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -23,7 +24,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 900)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float1-download.html)しましょう。
 
@@ -39,7 +40,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float2-download.html)しましょう。
 
@@ -53,6 +54,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float3-download.html)しましょう。
diff --git a/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.md
index adb5573b115c2c..b77ca974f74038 100644
--- a/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.md
+++ b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.md
@@ -40,7 +40,8 @@ HTML 文書とスタイルシートはコンピューターのディレクトリ
 また、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) のようなオンラインエディターを使用することもできます。
 オンラインエディターを使用する場合、画像をアップロードし、 `src` 属性の値を新しい画像の場所を指すように置き換える必要があります。
 
-> **メモ:** 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+> [!NOTE]
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
 ### プロジェクト概要
 
diff --git a/files/ja/learn/css/css_layout/grid_skills/index.md b/files/ja/learn/css/css_layout/grid_skills/index.md
index 6e71218c413402..4b1231a36403b5 100644
--- a/files/ja/learn/css/css_layout/grid_skills/index.md
+++ b/files/ja/learn/css/css_layout/grid_skills/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、[グリッドとグリッドアイテム](/ja/docs/Learn/CSS/CSS_layout/Grids)の動作を理解しているかどうかを評価することです。今までに使用した素材のさまざまな要素を使用する、いくつかの小さな課題に取り組んでいただきます。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid1-download.html)しましょう。
 
@@ -43,7 +44,7 @@ l10n:
 
 - これで、ソースの項目の順番を変えずに、最初の項目が一番上に表示されるようにすることができますか？
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid2-download.html)しましょう。
 
@@ -57,7 +58,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid3-download.html)しましょう。
 
@@ -71,6 +72,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 2000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid4-download.html)しましょう。
diff --git a/files/ja/learn/css/css_layout/grids/index.md b/files/ja/learn/css/css_layout/grids/index.md
index 5aaaa7fe0ac15e..77b4090efea3bc 100644
--- a/files/ja/learn/css/css_layout/grids/index.md
+++ b/files/ja/learn/css/css_layout/grids/index.md
@@ -213,7 +213,8 @@ body {
 
 {{ EmbedLiveSample('Gaps_between_tracks', '100%', 250) }}
 
-> **メモ:** gap` プロパティ（`column-gap`、`row-gap`、`gap`）は、接頭辞として `grid-` を使用していました。仕様は変更されましたが、接頭辞は別名として維持されます。安全な側に立ち、コードをより強固なものにするのであれば、両方のプロパティを追加することができます。
+> [!NOTE]
+> gap` プロパティ（`column-gap`、`row-gap`、`gap`）は、接頭辞として `grid-` を使用していました。仕様は変更されましたが、接頭辞は別名として維持されます。安全な側に立ち、コードをより強固なものにするのであれば、両方のプロパティを追加することができます。
 >
 > ```css
 > .container {
@@ -471,7 +472,8 @@ aside {
 
 {{ EmbedLiveSample('Line-based_placement', '100%', 550) }}
 
-> **メモ:** 最後の列または行の線をターゲットとして値 `-1` を使用することができ、負の値を使用して終点から数えることもできます。 しかしこれは明示的グリッドに対してのみ有効です。 値 `-1` は、[暗黙的グリッド](/ja/docs/Glossary/Grid)の終点の線をターゲットにしません。
+> [!NOTE]
+> 最後の列または行の線をターゲットとして値 `-1` を使用することができ、負の値を使用して終点から数えることもできます。 しかしこれは明示的グリッドに対してのみ有効です。 値 `-1` は、[暗黙的グリッド](/ja/docs/Glossary/Grid)の終点の線をターゲットにしません。
 
 ## grid-template-areas での配置
 
diff --git a/files/ja/learn/css/css_layout/index.md b/files/ja/learn/css/css_layout/index.md
index 77f1cd3f3af085..7cdd89c8506170 100644
--- a/files/ja/learn/css/css_layout/index.md
+++ b/files/ja/learn/css/css_layout/index.md
@@ -17,7 +17,8 @@ l10n:
 2. [CSS 入門](/ja/docs/Learn/CSS/First_steps)で説明したように、CSS の基本を容易にこなせること。
 3. [ボックスの装飾](/ja/docs/Learn/CSS/Building_blocks)の方法を理解していること。
 
-> **メモ:** 使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。
+> [!NOTE]
+> 使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/css/css_layout/introduction/index.md b/files/ja/learn/css/css_layout/introduction/index.md
index f449b9a7ec7636..c33db98038c2bf 100644
--- a/files/ja/learn/css/css_layout/introduction/index.md
+++ b/files/ja/learn/css/css_layout/introduction/index.md
@@ -66,7 +66,8 @@ CSS のページレイアウト技術によって、ウェブページに含ま
 
 上下に並んで表示される要素は**ブロック**要素と呼ばれています。それに対して、**インライン**要素は段落内の個々の単語と同じように横に並んで表示されています。
 
-> **メモ:** ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向 (Block Direction) と呼ばれます。 ブロック方向は、英語などの横書きモード (Horizontal Writing Mode) の言語では垂直に走ります。 日本語のような縦書きモード (Vertical Writing Mode) では、どの言語でも水平に走ります。 対応するインライン方向 (Inline Direction) は、インラインコンテンツ（文など）が走る方向です。
+> [!NOTE]
+> ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向 (Block Direction) と呼ばれます。 ブロック方向は、英語などの横書きモード (Horizontal Writing Mode) の言語では垂直に走ります。 日本語のような縦書きモード (Vertical Writing Mode) では、どの言語でも水平に走ります。 対応するインライン方向 (Inline Direction) は、インラインコンテンツ（文など）が走る方向です。
 
 CSS で何かをレイアウトするとその要素を通常フローから遠ざけることになりますが、ページ上の多くの要素は通常フローにしたがって適宜レイアウトされます。これが、構造化された HTML 文書から始めることが非常に重要である理由です。 なぜなら、多くの要素のレイアウトに一から悪戦苦闘するかわりに、あらかじめ多くのものがレイアウトされている現状で作業できるからです。
 
@@ -160,7 +161,8 @@ CSS でページレイアウトを実現するための主な方法は、すべ
 
 {{ EmbedLiveSample('Setting_the_flex_property', '300', '200') }}
 
-> **メモ:** これはフレックスボックスで可能なことの非常に短い紹介です。 詳細については、[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)の記事を参照してください。
+> [!NOTE]
+> これはフレックスボックスで可能なことの非常に短い紹介です。 詳細については、[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)の記事を参照してください。
 
 ## グリッドレイアウト
 
@@ -254,7 +256,8 @@ CSS でページレイアウトを実現するための主な方法は、すべ
 
 {{ EmbedLiveSample('Placing_items_on_the_grid', '300', '330') }}
 
-> **メモ:** これら 2 つの例は、グリッドレイアウトの機能のほんの一部です。詳細については、[グリッドレイアウト](/ja/docs/Learn/CSS/CSS_layout/Grids)の記事を参照してください。
+> [!NOTE]
+> これら 2 つの例は、グリッドレイアウトの機能のほんの一部です。詳細については、[グリッドレイアウト](/ja/docs/Learn/CSS/CSS_layout/Grids)の記事を参照してください。
 
 このガイドの残りの部分では、他のレイアウト方法について説明します。 これは、ページの主なレイアウト構造にとってはそれほど重要ではありませんが、それでも特定のタスクを達成するのに役立ちます。 各レイアウトタスクの性質を理解することで、デザインの特定の構成要素を見たときに、それに最も適したレイアウトの種類が明らかになることがすぐにわかります。
 
@@ -320,7 +323,8 @@ p {
 
 {{ EmbedLiveSample('Floats', '100%', 600) }}
 
-> **メモ:** 浮動要素については、[float と clear](/ja/docs/Learn/CSS/CSS_layout/Floats) のプロパティに関するレッスンで詳しく説明しています。 フレックスボックスやグリッドレイアウトなどの技術が登場する前は、浮動要素は段組みレイアウトの作成方法として使用されていました。 あなたはまだウェブ上でこれらの方法に出くわすかもしれません。これらについては、[過去のレイアウト手法](/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)に関するレッスンで説明します。
+> [!NOTE]
+> 浮動要素については、[float と clear](/ja/docs/Learn/CSS/CSS_layout/Floats) のプロパティに関するレッスンで詳しく説明しています。 フレックスボックスやグリッドレイアウトなどの技術が登場する前は、浮動要素は段組みレイアウトの作成方法として使用されていました。 あなたはまだウェブ上でこれらの方法に出くわすかもしれません。これらについては、[過去のレイアウト手法](/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)に関するレッスンで説明します。
 
 ## 位置指定のテクニック
 
@@ -594,7 +598,8 @@ body {
 
 {{ EmbedLiveSample('Sticky_positioning', '100%', 200) }}
 
-> **メモ:** 位置指定の詳細については、[位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)の記事をご覧ください。
+> [!NOTE]
+> 位置指定の詳細については、[位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)の記事をご覧ください。
 
 ## 表レイアウト
 
@@ -673,7 +678,8 @@ form p {
 
 この例は [css-tables-example.html](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) でもライブで見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)も見る）。
 
-> **メモ:** 表レイアウトは、このページの他のトピックとは異なり、古いアプリケーションであるため、このモジュールではこれ以上取り上げません。
+> [!NOTE]
+> 表レイアウトは、このページの他のトピックとは異なり、古いアプリケーションであるため、このモジュールではこれ以上取り上げません。
 
 ## 段組みレイアウト
 
diff --git a/files/ja/learn/css/css_layout/legacy_layout_methods/index.md b/files/ja/learn/css/css_layout/legacy_layout_methods/index.md
index 35ffde85876e96..52cfcf2b99ff56 100644
--- a/files/ja/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/ja/learn/css/css_layout/legacy_layout_methods/index.md
@@ -124,7 +124,8 @@ div:nth-of-type(2) {
 
 ここでは、すべての幅にパーセントを使用していることに気付くでしょう。 これは、さまざまな画面サイズに合わせて調整し、小さい画面サイズで列幅に同じ比率を維持する、**リキッドレイアウト**（liquid layout）を作成するため、非常に良い戦略です。 ブラウザーウィンドウの幅を調整して確認してください。 これはレスポンシブウェブデザインのための貴重なツールです。
 
-> **メモ:** この例は [0_two-column-layout.html](https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) で実行できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html)も見る）。
+> [!NOTE]
+> この例は [0_two-column-layout.html](https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) で実行できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html)も見る）。
 
 ## 単純な過去のグリッドフレームワークを作成する
 
@@ -213,7 +214,8 @@ body {
 
 これで、一番上の単一列の行がグリッドとしてきちんとレイアウトされます。
 
-> **メモ:** また、各列に薄い赤色を指定したので、各列がどれだけのスペースを占めているかを正確に確認できます。
+> [!NOTE]
+> また、各列に薄い赤色を指定したので、各列がどれだけのスペースを占めているかを正確に確認できます。
 
 複数列にまたがるコンテナーのレイアウトには、必要な列数（足す、その間の溝）に合わせて {{cssxref("width")}} の値を調整するための特別なクラスを指定する必要があります。 コンテナーが 2〜12 列にまたがるようにするために、追加のクラスを作成する必要があります。 それぞれの幅は、その列数の列幅に溝幅を加えた結果です。 溝幅は常に列数より 1 つ少なくなります。
 
@@ -260,7 +262,8 @@ CSS の最後に次を追加してください。
 
 これらのクラスを作成したら、グリッド上にさまざまな幅の列を配置できます。 効果を確認するには、ページを保存してブラウザーで読み込みます。
 
-> **メモ:** 上記の例がうまくいかない場合は、GitHub の[完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html)と比較してみてください（[ライブでも見られます](https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)）。
+> [!NOTE]
+> 上記の例がうまくいかない場合は、GitHub の[完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html)と比較してみてください（[ライブでも見られます](https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)）。
 
 要素のクラスを変更したり、コンテナーを追加したり削除したりして、レイアウトの変更方法を確認してください。 例えば、2 行目を次のようにすることができます。
 
@@ -375,7 +378,8 @@ body {
 
 コードを保存してブラウザーに読み込み、ビューポートの幅を変更してみます — 列の幅は適切に調整されるはずです。
 
-> **メモ:** 上記の例がうまくいかない場合は、[GitHub の完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html)と比較してみてください（[ライブでも見られます](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)）。
+> [!NOTE]
+> 上記の例がうまくいかない場合は、[GitHub の完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html)と比較してみてください（[ライブでも見られます](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)）。
 
 ### calc() 関数を使ったより簡単な計算
 
@@ -479,13 +483,15 @@ CSS でコンテナー要素を 1 列幅だけオフセットするクラスを
 <div class="col span5 offset-by-one">14</div>
 ```
 
-> **メモ:** オフセット用のスペースを確保するために、またがる列の数を減らす必要があることに注意してください！
+> [!NOTE]
+> オフセット用のスペースを確保するために、またがる列の数を減らす必要があることに注意してください！
 
 違いを確認するには、ロードとリフレッシュを試してみるか、[fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-offset.html) の例を確認してください（[ライブでも見られます](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)）。 完成した例は次のようになります。
 
 ![グリッドには 2 つの行があります。 1 行目には同じ幅の 12 個の項目があり、 2 行目には幅の異なる 4 個の項目があります。項目 13 は 1 列、項目 14 は 5 列、項目 15 は 3 列、項目 16 は 2 列にわたります。アイテム 14 は 'offset-by-one' クラスが適用されており、 2 つ目ではなく 3 つ目の列から始まり、 2 行目の 2 つ目の列に 1 列分の幅の空き空間が残ります。](offset-grid-finished.png)
 
-> **メモ:** 特別な演習として、`offset-by-two` クラスを実装できますか？
+> [!NOTE]
+> 特別な演習として、`offset-by-two` クラスを実装できますか？
 
 ### 浮動ブロックのグリッドの制限
 
@@ -636,7 +642,8 @@ Skeleton を使い始めるためには、ラッパーの {{htmlelement("div")}}
 
 HTML ファイルを保存してブラウザーに読み込んで、効果を確認してください。
 
-> **メモ:** この例がうまく動作しない場合は、使用するウィンドウを広げてみてください（ウィンドウが狭すぎると、ここで記述されているようにグリッドが表示されません）。この例がうまく動作しない場合は、[html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html) ファイルと比較してみてください（[ライブでも見られます](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)）。
+> [!NOTE]
+> この例がうまく動作しない場合は、使用するウィンドウを広げてみてください（ウィンドウが狭すぎると、ここで記述されているようにグリッドが表示されません）。この例がうまく動作しない場合は、[html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html) ファイルと比較してみてください（[ライブでも見られます](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)）。
 
 `skeleton.css` ファイルを見ると、これがどのように機能するかがわかります。 例えば、Skeleton には、 "three columns" クラスを追加して要素をスタイルするための次の定義があります。
 
diff --git a/files/ja/learn/css/css_layout/media_queries/index.md b/files/ja/learn/css/css_layout/media_queries/index.md
index 894ade714b9bec..ec18bee8da2a4b 100644
--- a/files/ja/learn/css/css_layout/media_queries/index.md
+++ b/files/ja/learn/css/css_layout/media_queries/index.md
@@ -64,11 +64,14 @@ l10n:
 }
 ```
 
-> **メモ:** ここでのメディア種別は、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。
+> [!NOTE]
+> ここでのメディア種別は、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。
 
-> **メモ:** レベル 3 のメディアクエリー仕様には、他にも多くのメディア種別が定義されています。 これらは非推奨であり、避けるべきです。
+> [!NOTE]
+> レベル 3 のメディアクエリー仕様には、他にも多くのメディア種別が定義されています。 これらは非推奨であり、避けるべきです。
 
-> **メモ:** メディア種別はオプションです。 メディアクエリーでメディア種別を指定しない場合、メディアクエリーは既定ですべてのメディア種別用になります。
+> [!NOTE]
+> メディア種別はオプションです。 メディアクエリーでメディア種別を指定しない場合、メディアクエリーは既定ですべてのメディア種別用になります。
 
 ### メディア特性の規則
 
diff --git a/files/ja/learn/css/css_layout/multicol_skills/index.md b/files/ja/learn/css/css_layout/multicol_skills/index.md
index f04c1367e6034b..9916b91762cb8a 100644
--- a/files/ja/learn/css/css_layout/multicol_skills/index.md
+++ b/files/ja/learn/css/css_layout/multicol_skills/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、[CSS 段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)を、{{CSSxRef("column-count")}}、{{CSSxRef("column-width")}}、{{CSSxRef("column-gap")}}、{{CSSxRef("column-span")}}、{{CSSxRef("column-rule")}} プロパティや値を含めて理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、 3 つの小さな課題を行っていただきます。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol1-download.html)しましょう。
 
@@ -41,7 +42,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol2-download.html)しましょう。
 
@@ -55,6 +56,6 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol3-download.html)しましょう。
diff --git a/files/ja/learn/css/css_layout/multiple-column_layout/index.md b/files/ja/learn/css/css_layout/multiple-column_layout/index.md
index e5cf3b64309ebc..1e40229b08e537 100644
--- a/files/ja/learn/css/css_layout/multiple-column_layout/index.md
+++ b/files/ja/learn/css/css_layout/multiple-column_layout/index.md
@@ -212,7 +212,8 @@ body {
 
 要素をすべての段にまたがるようにすることができます。この場合、コンテンツはまたがる要素が登場したところで途切れ、その要素の下で続き、新しい段組みが作成されます。要素をすべての段組みにまたがるようにするには、 `all` を {{cssxref("column-span")}} プロパティに指定します。
 
-> **メモ:** 要素を一部の列にのみまたがるようにすることはできません。プロパティは `none`（これが既定値です）か `all` の値しか示すことができません。
+> [!NOTE]
+> 要素を一部の列にのみまたがるようにすることはできません。プロパティは `none`（これが既定値です）か `all` の値しか示すことができません。
 
 ```css hidden
 body {
diff --git a/files/ja/learn/css/css_layout/position_skills/index.md b/files/ja/learn/css/css_layout/position_skills/index.md
index ab775a5a0a9ec6..15d58a84c3f0f7 100644
--- a/files/ja/learn/css/css_layout/position_skills/index.md
+++ b/files/ja/learn/css/css_layout/position_skills/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、CSS の {{CSSxRef("position")}} プロパティと値を使用した [CSS の位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)を理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、2 つの小さな課題を行っていただきます。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -29,7 +30,7 @@ l10n:
 
 - 追加課題として、 target をテキストの下に表示するように変更できますか？
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/position/position1-download.html)しましょう。
 
@@ -43,7 +44,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1300)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/position/position2-download.html)しましょう。
 
diff --git a/files/ja/learn/css/css_layout/positioning/index.md b/files/ja/learn/css/css_layout/positioning/index.md
index 02ce4c2e5611d4..cdd36d55cdd3ee 100644
--- a/files/ja/learn/css/css_layout/positioning/index.md
+++ b/files/ja/learn/css/css_layout/positioning/index.md
@@ -55,7 +55,8 @@ HTML 要素に適用できるさまざまな種類の位置指定があります
 
 保存してリフレッシュしても、2 段落目の背景色が更新されていることを除けば、まったく違いはありません。 これは問題ありません。 前にも述べたように、静的位置指定は既定のふるまいです！
 
-> **メモ:** この時点でのライブ例は [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/1_static-positioning.html)）。
+> [!NOTE]
+> この時点でのライブ例は [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/1_static-positioning.html)）。
 
 ## 相対位置指定
 
@@ -76,7 +77,8 @@ top: 30px;
 left: 30px;
 ```
 
-> **メモ:** これらのプロパティの値は、論理的に想定される任意の[単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)（ピクセル、mm、rem、% など）をとることができます。
+> [!NOTE]
+> これらのプロパティの値は、論理的に想定される任意の[単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)（ピクセル、mm、rem、% など）をとることができます。
 
 保存して再読み込みすると、次のような結果になります。
 
@@ -139,7 +141,8 @@ span {
 
 かっこいいですよね？はい、おそらくこれはあなたが期待していたものではなかったでしょう。上と左を指定したのに、なぜ下と右に移動したのでしょうか？ 最初は非論理的に聞こえるかもしれませんが、これは相対的位置指定が機能する方法です。位置指定したボックスの指定した側を反対方向に押す見えない力を考える必要があります。 例えば、`top: 30px;` と指定した場合、力がボックスの上側を押して、箱の上側が 30px 下向きに移動します。
 
-> **メモ:** この時点でのライブ例は [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/2_relative-positioning.html)）。
+> [!NOTE]
+> この時点でのライブ例は [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/2_relative-positioning.html)）。
 
 ## 絶対位置指定
 
@@ -216,11 +219,14 @@ span {
 
 次に、要素の位置が変更されたことに注意してください。 これは、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の絶対位置指定でのふるまいが異なるためです。 通常の文書レイアウトフロー内での相対的な位置に基づいて要素を配置するのではなく, 要素がそれぞれの包含要素の側からあるべき距離を指定します。 したがって、この場合は、絶対位置指定要素は「包含要素」の上側から 30 ピクセル、左側から 30 ピクセルとなるようにします。（この場合、「包含要素」とは、**最初の包含ブロック** (initial containing block) のことです。詳細については、以下のセクションを参照してください。）
 
-> **メモ:** 必要に応じて、 {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} を使用して要素のサイズを変更することができます。 位置指定要素に `top: 0; bottom: 0; left: 0; right: 0; margin: 0;` を設定して、何が起こるか見てみてください。後で元に戻しましょう。
+> [!NOTE]
+> 必要に応じて、 {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} を使用して要素のサイズを変更することができます。 位置指定要素に `top: 0; bottom: 0; left: 0; right: 0; margin: 0;` を設定して、何が起こるか見てみてください。後で元に戻しましょう。
 
-> **メモ:** そう、マージンはなお位置指定要素に影響します。 しかしながら、マージンの相殺はそうではありません。
+> [!NOTE]
+> そう、マージンはなお位置指定要素に影響します。 しかしながら、マージンの相殺はそうではありません。
 
-> **メモ:** この時点でのライブ例は [`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/3_absolute-positioning.html)）。
+> [!NOTE]
+> この時点でのライブ例は [`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/3_absolute-positioning.html)）。
 
 ### 位置指定コンテキスト
 
@@ -295,7 +301,8 @@ span {
 
 位置指定要素は、{{htmlelement("body")}} 要素を基準にして配置されます。
 
-> **メモ:** この時点でのライブ例は [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/4_positioning-context.html)）。
+> [!NOTE]
+> この時点でのライブ例は [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/4_positioning-context.html)）。
 
 ### z-index の紹介
 
@@ -393,7 +400,8 @@ p:nth-of-type(1) {
 
 `z-index` は、単位のないインデックス値のみを受け入れることに注意してください。 1 つの要素を z 軸の 23 ピクセル上に配置するように指定することはできません。そのようには機能しません。 より大きい値はより小さい値より上になり、どんな値を使うかはあなた次第です。 2 と 3 を使用するのと、300 と 40000 では同じ効果が得られます。
 
-> **メモ:** この時点でのライブ例は [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/5_z-index.html)）。
+> [!NOTE]
+> この時点でのライブ例は [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/5_z-index.html)）。
 
 ## 固定位置指定
 
@@ -495,7 +503,8 @@ p:nth-of-type(1) {
 
 {{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}
 
-> **メモ:** この時点でのライブ例は [`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/6_fixed-positioning.html)）。
+> [!NOTE]
+> この時点でのライブ例は [`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/6_fixed-positioning.html)）。
 
 ## 粘着位置指定
 
@@ -664,7 +673,8 @@ body {
 
 粘着要素は「スクロール機構」を持つ最も近い祖先（[position](/ja/docs/Web/CSS/position) プロパティによって決定する）に相対的に「粘着」します。
 
-> **メモ:** このライブ例は [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html)）。
+> [!NOTE]
+> このライブ例は [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html)）。
 
 ## スキルテスト
 
diff --git a/files/ja/learn/css/css_layout/practical_positioning_examples/index.md b/files/ja/learn/css/css_layout/practical_positioning_examples/index.md
index 8e644d93c6e63b..da5632bd394725 100644
--- a/files/ja/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/ja/learn/css/css_layout/practical_positioning_examples/index.md
@@ -32,7 +32,8 @@ l10n:
 
 ![Tab 1 が選択されています。 'Tab 2' と 'Tab 3' は他の 2 種類のタブです。選択されたタブのコンテンツだけが表示されます。タブが選択されると、タブの文字色が黒から白に、背景色がオレンジレッドからサドルブラウンに変わります。](tabbed-info-box.png)
 
-> **メモ:** 完成した例は、[info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) でライブで確認できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。
+> [!NOTE]
+> 完成した例は、[info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) でライブで確認できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。
 
 「別々のタブを別々のウェブページとして作成し、タブをクリックして別々のページに移動させて同様の効果を生み出すだけでよいのではないでしょうか？」と考えるかもしれません。 このコードならもっと簡単なものになりますが、実際には個々の「ページ」ビューは実際には新しくロードされたウェブページになるため、ビュー間で情報を保存し、この機能をより大きな UI デザインに統合するのは難しくなります。
 
@@ -133,7 +134,8 @@ body {
 }
 ```
 
-> **メモ:** この例では、チェーンの先頭に `.info-box` を持つ子孫セレクターを使用しています。 これは、他のコンテンツがすでに含まれているページに、ページの他の部分に適用されているスタイルを妨げることなく、この機能を挿入できるようにするためです。
+> [!NOTE]
+> この例では、チェーンの先頭に `.info-box` を持つ子孫セレクターを使用しています。 これは、他のコンテンツがすでに含まれているページに、ページの他の部分に適用されているスタイルを妨げることなく、この機能を挿入できるようにするためです。
 
 次に、水平方向のタブのスタイルを設定します。 リスト項目は、一列に並ぶようにすべて左にフロートさせ、行頭記号（bullet）を取り除くために {{cssxref("list-style-type")}} を `none` に設定し、{{cssxref("width")}} を `150px` に設定しているので、それらは情報ボックス全体にうまく収まります。 {{htmlelement("a")}} 要素は {{cssxref("display")}}`: inline-block` に設定されているので、一列に並んでいてもスタイル可能で、他のさまざまなプロパティを使用して、タブボタンに適したスタイルになっています。
 
@@ -254,7 +256,8 @@ function setTabHandler(tab, tabPos) {
 
 ![Info-box は 3 つのタブを持つコンテナーで、最初のタブが選択され、最初のタブのコンテンツのみが表示されます。固定位置が指定されました。インフォボックスはウィンドウの左上隅に位置指定され、幅は 452 ピクセルです。ウィンドウの残りの右半分は、偽コンテンツのコンテナーが占めています。偽コンテンツのコンテナーはウィンドウよりも高く、スクロール可能です。ページがスクロールされると、情報ボックスは画面の同じ位置に固定されたまま、右側のコンテナーは移動します。](fixed-info-box.png)
 
-> **メモ:** 完成した例は、[fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) でライブで確認できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/fixed-info-box.html)）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。
+> [!NOTE]
+> 完成した例は、[fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) でライブで確認できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/fixed-info-box.html)）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。
 
 出発点として、記事の最初のセクションで完成させた例を使用するか、Github リポジトリーから [info-box.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html) のローカルコピーを作成することができます。
 
@@ -292,7 +295,8 @@ function setTabHandler(tab, tabPos) {
 </section>
 ```
 
-> **メモ:** お好みにより、偽のコンテンツを本物のコンテンツに変更してもかまいません。
+> [!NOTE]
+> お好みにより、偽のコンテンツを本物のコンテンツに変更してもかまいません。
 
 ### 既存の CSS への変更
 
@@ -335,7 +339,8 @@ function setTabHandler(tab, tabPos) {
 
 ![画面の左 60% に空白の画面、右 40% 幅のパネルに情報が表示されます。右上には「疑問符」のアイコン。この「疑問符」アイコンを押すと、パネルが画面にスライドして表示されます。](hidden-sliding-panel.png)
 
-> **メモ:** 完成した例は、[hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) でライブで確認できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/hidden-info-panel.html)）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。
+> [!NOTE]
+> 完成した例は、[hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) でライブで確認できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/hidden-info-panel.html)）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。
 
 まず始めに、Github リポジトリーから [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) のローカルコピーを作成します。 これは前の例から続いていないので、新鮮な出発点ファイルが必要です。 ファイル内の HTML を見てみましょう。
 
@@ -351,7 +356,8 @@ function setTabHandler(tab, tabPos) {
 
 {{htmlelement("label")}} 要素と {{htmlelement("input")}} 要素から始めましょう — `<label>` 要素は通常、アクセシビリティの目的でテキストラベルをフォーム要素に関連付けるために使用します（スクリーンリーダーのユーザーが、どの説明がどのフォーム要素に対応しているかを確認できるようにします）。 ここでは、`for` 属性と `id` 属性を使用して `<input>` チェックボックスに関連付けられています。
 
-> **メモ:** 情報アイコンとして機能するために、HTML に特別な疑問符文字を入れました。 これは、パネルを表示/非表示にするために押されるボタンを表します。
+> [!NOTE]
+> 情報アイコンとして機能するために、HTML に特別な疑問符文字を入れました。 これは、パネルを表示/非表示にするために押されるボタンを表します。
 
 ここでは、これらの要素を少し異なる目的で使用します — `<label>` 要素のもう 1 つの便利な副作用は、チェックボックス自体だけでなく、チェックボックスのラベルをクリックしてチェックボックスをチェックできることです。 これはよく知られた[チェックボックスハック](https://css-tricks.com/the-checkbox-hack/)（英語）をもたらしました。 それはボタンを切り替えることによって要素を制御する JavaScript フリーの方法を提供します。 制御する要素は、他の 2 つに続く {{htmlelement("aside")}} 要素です（簡潔にするために、上記のコードリストからそのコンテンツを省略しました）。
 
diff --git a/files/ja/learn/css/css_layout/responsive_design/index.md b/files/ja/learn/css/css_layout/responsive_design/index.md
index 3e636d1386820b..1b1418453477a2 100644
--- a/files/ja/learn/css/css_layout/responsive_design/index.md
+++ b/files/ja/learn/css/css_layout/responsive_design/index.md
@@ -134,7 +134,8 @@ HTML は基本的にレスポンシブ、つまり流動的です。CSS を含
 }
 ```
 
-> **メモ:** 例として、フレックスボックスを使用して上記の単純なレスポンシブレイアウトを構築しました。ブレークポイントを使用して画面が大きくなったときに段組みに切り替え、{{cssxref('max-width')}} で本文コンテンツのサイズを制限しています。[例](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/flex-based-rwd.html)。
+> [!NOTE]
+> 例として、フレックスボックスを使用して上記の単純なレスポンシブレイアウトを構築しました。ブレークポイントを使用して画面が大きくなったときに段組みに切り替え、{{cssxref('max-width')}} で本文コンテンツのサイズを制限しています。[例](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/flex-based-rwd.html)。
 
 ### CSS グリッド
 
@@ -211,7 +212,8 @@ h1 {
 
 ![見出しが大きい 2 段レイアウト。](mdn-rwd-font-desktop.png)
 
-> **メモ:** この例を実際に見てください。[例](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-rwd.html)。
+> [!NOTE]
+> この例を実際に見てください。[例](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-rwd.html)。
 
 この書体へのアプローチが示すように、メディアクエリーをページのレイアウトの変更のみに制限する必要はありません。 これらを使用して任意の要素を微調整し、代わりとなる画面サイズでより使いやすく魅力的にすることができます。
 
@@ -237,7 +239,8 @@ h1 {
 
 これは、見出しのフォントサイズを指定する必要があるのは一度だけで、モバイル用にメディアクエリーで再定義せずともよいことを意味します。ビューポートのサイズを大きくするにつれて、フォントは徐々に大きくなります。
 
-> **メモ:** 実際のこの例を見てください。[例](https://mdn.github.io/css-examples/learn/rwd/type-vw.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-vw.html)。
+> [!NOTE]
+> 実際のこの例を見てください。[例](https://mdn.github.io/css-examples/learn/rwd/type-vw.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-vw.html)。
 
 ## ビューポートメタタグ
 
diff --git a/files/ja/learn/css/css_layout/rwd_skills/index.md b/files/ja/learn/css/css_layout/rwd_skills/index.md
index a76ff106624701..06411393b155ad 100644
--- a/files/ja/learn/css/css_layout/rwd_skills/index.md
+++ b/files/ja/learn/css/css_layout/rwd_skills/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、[メディアクエリーの使用方法](/ja/docs/Learn/CSS/CSS_layout/Media_queries)を理解しているかどうかを評価し、実践的な課題でレスポンシブウェブデザインを身につけてもらうことです。この課題をクリアするために必要な知識は、 [CSS レイアウトモジュール](/ja/docs/Learn/CSS/CSS_layout)のレイアウトレッスンに完全に含まれています。
 
-> **メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
diff --git a/files/ja/learn/css/first_steps/getting_started/index.md b/files/ja/learn/css/first_steps/getting_started/index.md
index 9a7dadd5ea4e7e..0440fca7ebeeab 100644
--- a/files/ja/learn/css/first_steps/getting_started/index.md
+++ b/files/ja/learn/css/first_steps/getting_started/index.md
@@ -71,7 +71,8 @@ HTML 文書から始めましょう。あなたのコンピューターのフォ
 </html>
 ```
 
-> **メモ:** もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。
+> [!NOTE]
+> もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。
 
 ## 文書に CSS を追加
 
@@ -214,7 +215,8 @@ h1 + p {
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
-> **メモ:** ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクターをこのコースの後にある[セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)の記事で見ていきます。
+> [!NOTE]
+> ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクターをこのコースの後にある[セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)の記事で見ていきます。
 
 ## 状態に基づくスタイル設定
 
@@ -244,7 +246,8 @@ a:hover {
 
 リンクをホバーすると下線が消えるようにしていますが、どんな状態でも下線が消えているようにできます。ただし実際のサイトでは、ページを見ている人に、リンクはリンクであることを知らせるのを忘れないようにしてください。下線を残すのは、ユーザーが慣れているように、テキスト内にリンクがあることを伝える重要な手掛かりになります。CSS に含まれるあらゆるものには、変更によって文章を使いづらくするおそれがあることを強調しておきます。
 
-> **メモ:** MDN の記事で、[アクセシビリティ](/ja/docs/Learn/Accessibility)についての注意をたびたび目にするでしょう。これについて語る時は、ウェブページがどんな人にも理解でき、使えるものである必要性に言及しています。
+> [!NOTE]
+> MDN の記事で、[アクセシビリティ](/ja/docs/Learn/Accessibility)についての注意をたびたび目にするでしょう。これについて語る時は、ウェブページがどんな人にも理解でき、使えるものである必要性に言及しています。
 >
 > 訪問者はマウス付きコンピューターやタッチスクリーン付き電話で見ているかもしれません。あるいはスクリーンリーダーで文章を読んでいることや、大きな文字をつかう必要があることや、キーボードだけを使っていることもあるでしょう。
 >
diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.md b/files/ja/learn/css/first_steps/how_css_is_structured/index.md
index cf3df7be27e27e..27f47cd4dad54b 100644
--- a/files/ja/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.md
@@ -201,7 +201,8 @@ h1, h2, .intro
 
 上記のセレクターを使った CSS ルールを作ってみてください。セレクターによってスタイル付けされる HTML を追加します。上記の構文に馴染みのないものがあれば、 MDN を検索してみてください。
 
-> **メモ:** 次のモジュールの記事 [CSS セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors) で、セレクターについてより詳しく学ぶことができます。
+> [!NOTE]
+> 次のモジュールの記事 [CSS セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors) で、セレクターについてより詳しく学ぶことができます。
 
 ### 詳細度
 
@@ -274,9 +275,11 @@ CSS のプロパティと値は大文字と小文字を区別しません。そ
 - **{{cssxref("color")}}**
 - **{{cssxref("border")}}**
 
-> **警告:** プロパティが不明だった場合、または指定されたプロパティの値が妥当ではなかった場合は、宣言が*無効*なものとして扱われます。ブラウザーの CSS エンジンはこれを完全に無視します。
+> [!WARNING]
+> プロパティが不明だった場合、または指定されたプロパティの値が妥当ではなかった場合は、宣言が*無効*なものとして扱われます。ブラウザーの CSS エンジンはこれを完全に無視します。
 
-> **警告:** CSS（および他のウェブ標準）では、言語ごとに綴りに揺れがあったり確実でない場合には、アメリカ綴りを標準とすることが合意されています。例えば、 `color` は `color` と綴るべきであり、 `colour` では動作しません。
+> [!WARNING]
+> CSS（および他のウェブ標準）では、言語ごとに綴りに揺れがあったり確実でない場合には、アメリカ綴りを標準とすることが合意されています。例えば、 `color` は `color` と綴るべきであり、 `colour` では動作しません。
 
 ### 関数
 
@@ -408,7 +411,8 @@ background-attachment: fixed;
 
 **これはどのように動作するのかに慣れるために、自分自身で CSS の練習で宣言（上記）を使用してみてください。異なる値で実験してみるのもよいでしょう。**
 
-> **警告:** CSS の一括指定を使用する際に、省略した値がどのようにリセットされるかはあまり目立たない側面です。 CSS 一括指定で指定されていない値は初期値に戻ります。これは、 CSS 一括指定で省略された値は、**以前に設定された値を上書きしてしまう**可能性があることを意味します。
+> [!WARNING]
+> CSS の一括指定を使用する際に、省略した値がどのようにリセットされるかはあまり目立たない側面です。 CSS 一括指定で指定されていない値は初期値に戻ります。これは、 CSS 一括指定で省略された値は、**以前に設定された値を上書きしてしまう**可能性があることを意味します。
 
 ## コメント
 
@@ -530,7 +534,8 @@ div p + p {padding-top: 0;}
 
 自分のプロジェクトでは、個人的な好みに応じてコードを書式化します。チームプロジェクトでは、チームやプロジェクトに独自のスタイルガイドがあるかもしれません。
 
-> **警告:** CSS 宣言ではホワイトスペースが値を区切っていますが、**プロパティ名にホワイトスペースが含まれることはありません。**
+> [!WARNING]
+> CSS 宣言ではホワイトスペースが値を区切っていますが、**プロパティ名にホワイトスペースが含まれることはありません。**
 
 例えば、以下の宣言は正しい CSS です。
 
diff --git a/files/ja/learn/css/first_steps/index.md b/files/ja/learn/css/first_steps/index.md
index a8f972bde3a720..8b9c1ea60010e6 100644
--- a/files/ja/learn/css/first_steps/index.md
+++ b/files/ja/learn/css/first_steps/index.md
@@ -17,7 +17,8 @@ CSS (Cascading Style Sheets) はウェブページをスタイリングしたり
 2. [基本的なソフトウェアのインストール](/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software)で説明されている基本的な作業環境と、[ファイルの扱い方](/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files)で説明されているファイルの作り方や管理の仕方について理解していること。
 3. [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)で説明されている HTML についての基礎知識に慣れ親しんでいること。
 
-> **メモ:** 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったオンラインコーディングプログラムで試すことが可能です。
+> [!NOTE]
+> 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったオンラインコーディングプログラムで試すことが可能です。
 
 ## ガイド
 
diff --git a/files/ja/learn/css/first_steps/styling_a_biography_page/index.md b/files/ja/learn/css/first_steps/styling_a_biography_page/index.md
index d69242fa287f81..5192ec446fb766 100644
--- a/files/ja/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/ja/learn/css/first_steps/styling_a_biography_page/index.md
@@ -31,7 +31,8 @@ l10n:
 
 下のライブエディターで試すこともできますし、[開始点ファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/getting-started/biog-download.html/)して自分のエディターで作業することもできます。これは、 HTML と開始点の CSS （文書内の見出し）の両方を含む単一のページです。できれば、この CSS を別のファイルに移し、ローカルコンピューターで例を作成するときにリンクしてください。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
diff --git a/files/ja/learn/css/first_steps/what_is_css/index.md b/files/ja/learn/css/first_steps/what_is_css/index.md
index c52e78e479ef4e..f168499d215597 100644
--- a/files/ja/learn/css/first_steps/what_is_css/index.md
+++ b/files/ja/learn/css/first_steps/what_is_css/index.md
@@ -52,7 +52,8 @@ l10n:
 
 文書を **表現する** とは、それを使いやすいフォームに変換することを意味します。{{Glossary("Mozilla Firefox","Firefox")}}、{{Glossary("Google Chrome","Chrome")}}、{{Glossary("Microsoft Edge","Edge")}} といった{{Glossary("browser","ブラウザー")}} はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。
 
-> **メモ:** ブラウザーは時に{{Glossary("User agent","ユーザーエージェント")}}と呼ばれることがありますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。
+> [!NOTE]
+> ブラウザーは時に{{Glossary("User agent","ユーザーエージェント")}}と呼ばれることがありますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。
 
 CSS は、例えば見出しやリンクの [色](/ja/docs/Web/CSS/color_value) や [フォントサイズ](/ja/docs/Web/CSS/font-size)の変更といったごく基本的なテキストのスタイル付けにも使えます。例えば、[1 段のテキストをレイアウトして](/ja/docs/Web/CSS/Layout_cookbook/Column_layouts)メインコンテンツ領域と関連情報のためのサイドバーに分けるといったレイアウト作成に使うこともできます。[アニメーション](/ja/docs/Web/CSS/CSS_animations)のような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。
 
diff --git a/files/ja/learn/css/howto/add_a_shadow/index.md b/files/ja/learn/css/howto/add_a_shadow/index.md
index 952099b790f50d..4f8a93a46a4706 100644
--- a/files/ja/learn/css/howto/add_a_shadow/index.md
+++ b/files/ja/learn/css/howto/add_a_shadow/index.md
@@ -26,7 +26,8 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/howto/box-shadow-button.html", '100%', 500)}}
 
-> **メモ:** この例では `inset` を使用していません。これは、シャドウが既定のドロップシャドウであり、シャドウの上にボックスがあることを意味しています。インセットシャドウは、コンテンツがページに押し込まれているかのように、ボックスの内側に現れます。
+> [!NOTE]
+> この例では `inset` を使用していません。これは、シャドウが既定のドロップシャドウであり、シャドウの上にボックスがあることを意味しています。インセットシャドウは、コンテンツがページに押し込まれているかのように、ボックスの内側に現れます。
 
 ## 関連情報
 
diff --git a/files/ja/learn/css/howto/add_a_text_shadow/index.md b/files/ja/learn/css/howto/add_a_text_shadow/index.md
index a4618314d0efcf..5dbf83f2697bc6 100644
--- a/files/ja/learn/css/howto/add_a_text_shadow/index.md
+++ b/files/ja/learn/css/howto/add_a_text_shadow/index.md
@@ -24,4 +24,5 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/howto/text-shadow.html", '100%', 500)}}
 
-> **メモ:** テキストシャドウを使用すると、簡単にテキストを読みづらくなる場合があります。低コントラストのテキストを読むことが困難な閲覧者のために、選択した色が読みやすく、十分な[色コントラスト](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)になっていることを確認しておいてください。
+> [!NOTE]
+> テキストシャドウを使用すると、簡単にテキストを読みづらくなる場合があります。低コントラストのテキストを読むことが困難な閲覧者のために、選択した色が読みやすく、十分な[色コントラスト](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)になっていることを確認しておいてください。
diff --git a/files/ja/learn/css/howto/center_an_item/index.md b/files/ja/learn/css/howto/center_an_item/index.md
index 35d8b60cbdf73a..f4d6528b076a00 100644
--- a/files/ja/learn/css/howto/center_an_item/index.md
+++ b/files/ja/learn/css/howto/center_an_item/index.md
@@ -17,7 +17,8 @@ CSS を使用して、あるボックスを別のボックスの中に配置す
 
 {{EmbedGHLiveSample("css-examples/howto/center.html", '100%', 700)}}
 
-> **メモ:** このテクニックを使用して、1 つ以上の要素を別の要素の中に配置することができます。上の例では、{{cssxref("justify-content")}} と {{cssxref("align-items")}} の値を任意の有効な値に変更してみてください。
+> [!NOTE]
+> このテクニックを使用して、1 つ以上の要素を別の要素の中に配置することができます。上の例では、{{cssxref("justify-content")}} と {{cssxref("align-items")}} の値を任意の有効な値に変更してみてください。
 
 ## 関連情報
 
diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.md b/files/ja/learn/css/howto/create_fancy_boxes/index.md
index 874f82ba5814eb..c5560ef7870a67 100644
--- a/files/ja/learn/css/howto/create_fancy_boxes/index.md
+++ b/files/ja/learn/css/howto/create_fancy_boxes/index.md
@@ -118,7 +118,8 @@ CSS ボックスは、CSS で装飾されたウェブページの構成要素で
 
 {{ EmbedLiveSample('Backgrounds', '100%', '200') }}
 
-> **メモ:** グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、[Lea Verou の CSS パターン](https://projects.verou.me/css3patterns/)（英語）を見てください。グラデーションについてもっと知りたい場合は、気軽に[専用の記事](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)を見てください。
+> [!NOTE]
+> グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、[Lea Verou の CSS パターン](https://projects.verou.me/css3patterns/)（英語）を見てください。グラデーションについてもっと知りたい場合は、気軽に[専用の記事](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)を見てください。
 
 ## 擬似要素
 
diff --git a/files/ja/learn/css/howto/css_faq/index.md b/files/ja/learn/css/howto/css_faq/index.md
index 86b298f5bfa4f0..ef5cec8342211b 100644
--- a/files/ja/learn/css/howto/css_faq/index.md
+++ b/files/ja/learn/css/howto/css_faq/index.md
@@ -64,7 +64,8 @@ HTML の要素は、 `id` 属性と `class` 属性の片方または両方を持
 - class を使用すると、複数の要素のスタイルを設定できるため、id セレクターを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です
 - class セレクターは id セレクターよりも[詳細度](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#詳細度)が低いため、必要に応じてオーバーライドする方が簡単です
 
-> **メモ:** 詳しくは[セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)もご覧ください。
+> [!NOTE]
+> 詳しくは[セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)もご覧ください。
 
 ## プロパティを既定値に戻すには
 
@@ -265,9 +266,11 @@ div {
 text-stroke: 4px navy;
 ```
 
-> **メモ:** 接頭辞付きプロパティの処理の詳細については、[クロスブラウザーテスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)モジュールの[一般的な HTML および CSS の問題の処理 - CSS 接頭辞の処理](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#handling_css_prefixes)を参照してください。
+> [!NOTE]
+> 接頭辞付きプロパティの処理の詳細については、[クロスブラウザーテスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)モジュールの[一般的な HTML および CSS の問題の処理 - CSS 接頭辞の処理](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#handling_css_prefixes)を参照してください。
 
-> **メモ:** ブラウザー接頭辞付き CSS プロパティの一覧は、[Mozilla CSS 拡張](/ja/docs/Web/CSS/Mozilla_Extensions), [WebKit CSS 拡張](/ja/docs/Web/CSS/WebKit_Extensions) を参照してください。
+> [!NOTE]
+> ブラウザー接頭辞付き CSS プロパティの一覧は、[Mozilla CSS 拡張](/ja/docs/Web/CSS/Mozilla_Extensions), [WebKit CSS 拡張](/ja/docs/Web/CSS/WebKit_Extensions) を参照してください。
 
 ## z-index は位置指定へどのように関係するのか?
 
@@ -275,4 +278,5 @@ z-index プロパティは、要素を積み重ねる順序を指定します。
 
 z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (`position:absolute`、`position:relative`、または `position:fixed`) を持つ要素に対してのみ機能します。
 
-> **メモ:** 詳細については、[位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)の学習の記事、特に [z-index の紹介](/ja/docs/Learn/CSS/CSS_layout/Positioning#z-index_の紹介)の節を参照してください。
+> [!NOTE]
+> 詳細については、[位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)の学習の記事、特に [z-index の紹介](/ja/docs/Learn/CSS/CSS_layout/Positioning#z-index_の紹介)の節を参照してください。
diff --git a/files/ja/learn/css/howto/generated_content/index.md b/files/ja/learn/css/howto/generated_content/index.md
index cb05414e5e6477..670397b62676bb 100644
--- a/files/ja/learn/css/howto/generated_content/index.md
+++ b/files/ja/learn/css/howto/generated_content/index.md
@@ -11,7 +11,8 @@ l10n:
 
 CSS の重要な利点の一つが、文書のスタイルをそのコンテンツから分離しやすくすることです。しかし、あるコンテンツを文書の一部としてではなく、スタイルシートの一部として指定することが理にかなっている場合もあります。テキストや画像の内容が文書の構造に密接に関連している場合は、スタイルシートの中で指定することができます。
 
-> **メモ:** スタイルシート内で記述されたコンテンツは、 DOM の一部にはなりません。
+> [!NOTE]
+> スタイルシート内で記述されたコンテンツは、 DOM の一部にはなりません。
 
 スタイルシートでコンテンツを指定すると、厄介な問題が発生することがあります。例えば、スタイルシートが複数の言語の文書で共有されていることがあります。スタイルシートの中で翻訳が必要なコンテンツを指定する場合は、スタイルシートのその部分を別なファイルに置き、適切な言語版の文書にリンクするようにする必要があります。
 
diff --git a/files/ja/learn/css/howto/highlight_first_line/index.md b/files/ja/learn/css/howto/highlight_first_line/index.md
index 22d70c509aec5c..3285c53422d63b 100644
--- a/files/ja/learn/css/howto/highlight_first_line/index.md
+++ b/files/ja/learn/css/howto/highlight_first_line/index.md
@@ -21,7 +21,8 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/howto/highlight_first_line.html", '100%', 750)}}
 
-> **メモ:** すべての擬似要素はこのように動作します。それらは、文書内に要素を挿入したかのように振る舞いますが、実行時に表示されるコンテンツに基づいて動的にそうします。
+> [!NOTE]
+> すべての擬似要素はこのように動作します。それらは、文書内に要素を挿入したかのように振る舞いますが、実行時に表示されるコンテンツに基づいて動的にそうします。
 
 ## 擬似要素と他のセレクターの組み合わせ
 
@@ -29,7 +30,8 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/howto/highlight_first_line2.html", '100%', 700)}}
 
-> **メモ:** 擬似要素を[複雑セレクター](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#複雑セレクター)または[複合セレクター](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#複合セレクター)で他のセレクターと組み合わせた場合、擬似要素はセレクターの中で、他のすべての要素の後に置かなければなりません。
+> [!NOTE]
+> 擬似要素を[複雑セレクター](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#複雑セレクター)または[複合セレクター](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#複合セレクター)で他のセレクターと組み合わせた場合、擬似要素はセレクターの中で、他のすべての要素の後に置かなければなりません。
 
 ## 関連情報
 
diff --git a/files/ja/learn/css/howto/make_box_transparent/index.md b/files/ja/learn/css/howto/make_box_transparent/index.md
index a7b8352d2d5ffc..6c505cc8a33302 100644
--- a/files/ja/learn/css/howto/make_box_transparent/index.md
+++ b/files/ja/learn/css/howto/make_box_transparent/index.md
@@ -23,7 +23,8 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/howto/opacity.html", '100%', 770)}}
 
-> **メモ:** 画像を重ねる場合は、テキストと背景のコントラストが十分に保たれるように注意してください。そうしないと、コンテンツが読みづらくなる可能性があります。
+> [!NOTE]
+> 画像を重ねる場合は、テキストと背景のコントラストが十分に保たれるように注意してください。そうしないと、コンテンツが読みづらくなる可能性があります。
 
 ## 関連情報
 
diff --git a/files/ja/learn/css/index.md b/files/ja/learn/css/index.md
index 8579c87eff68c2..47e2005dbebd3c 100644
--- a/files/ja/learn/css/index.md
+++ b/files/ja/learn/css/index.md
@@ -7,7 +7,7 @@ slug: Learn/CSS
 
 Cascading Style Sheets — {{glossary("CSS")}} — は{{glossary("HTML")}} を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造と{{glossary("Semantics","意味論")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者になりたいですか？
 >
diff --git a/files/ja/learn/css/styling_text/fundamentals/index.md b/files/ja/learn/css/styling_text/fundamentals/index.md
index 83dd0303f638c3..51a26b3618773d 100644
--- a/files/ja/learn/css/styling_text/fundamentals/index.md
+++ b/files/ja/learn/css/styling_text/fundamentals/index.md
@@ -32,14 +32,16 @@ l10n:
 
 HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素の[コンテンツボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、{{htmlelement("br")}} 要素を使用して手動で改行を強制しない限り改行を作成しません。
 
-> **メモ:** 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)の記事に戻って見直してください。
+> [!NOTE]
+> 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)の記事に戻って見直してください。
 
 テキストを装飾するために使用される CSS プロパティは、一般的に次の 2 つのカテゴリーに分類されます。 この記事では、これらのプロパティを個別に説明します。
 
 - **フォントスタイル**: テキストに適用されるフォントに影響するプロパティで、適用するフォント、大きさ、太字、斜体などに影響します。
 - **テキストのレイアウトスタイル**: テキストの間隔やその他のレイアウト機能に影響するプロパティで、例えば、行間や文字間のスペースや、コンテンツボックス内でのテキストの配置方法などを操作できます。
 
-> **メモ:** 要素内のテキストはすべて単一の実体として影響を受けることに注意してください。 テキストの一部分を（{{htmlelement("span")}} や {{htmlelement("strong")}} など）適切な要素で囲んだり、[::first-letter](/ja/docs/Web/CSS/::first-letter)（要素のテキストの最初の文字を選択）、[::first-line](/ja/docs/Web/CSS/::first-line)（要素のテキストの最初の行を選択）、[::selection](/ja/docs/Web/CSS/::selection)（現在カーソルで強調表示されているテキストを選択）のようなテキスト固有の擬似要素を使用しない限り、テキストの一部分を選択して装飾することはできません。
+> [!NOTE]
+> 要素内のテキストはすべて単一の実体として影響を受けることに注意してください。 テキストの一部分を（{{htmlelement("span")}} や {{htmlelement("strong")}} など）適切な要素で囲んだり、[::first-letter](/ja/docs/Web/CSS/::first-letter)（要素のテキストの最初の文字を選択）、[::first-line](/ja/docs/Web/CSS/::first-line)（要素のテキストの最初の行を選択）、[::selection](/ja/docs/Web/CSS/::selection)（現在カーソルで強調表示されているテキストを選択）のようなテキスト固有の擬似要素を使用しない限り、テキストの一部分を選択して装飾することはできません。
 
 ## フォント
 
@@ -161,9 +163,11 @@ p {
   </tbody>
 </table>
 
-> **メモ:** さまざまなリソースの中で、[cssfontstack.com](http://www.cssfontstack.com/) ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。
+> [!NOTE]
+> さまざまなリソースの中で、[cssfontstack.com](http://www.cssfontstack.com/) ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。
 
-> **メモ:** ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、**ウェブフォント**（web fonts）です。 これはもう少し複雑で、このモジュールの後の別の記事でこれを議論するでしょう。
+> [!NOTE]
+> ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、**ウェブフォント**（web fonts）です。 これはもう少し複雑で、このモジュールの後の別の記事でこれを議論するでしょう。
 
 #### 既定のフォント
 
@@ -270,7 +274,8 @@ p {
 
 > **メモ:** `Trebuchet MS` のような空白を含むフォントファミリー名も、引用符で囲むことなく使用することができますが、エスケープの間違いを避けるために、空白、数字、ハイフン以外の句読点を含むフォントファミリー名は引用符で囲むことをお勧めします。
 
-> **警告:** 一般的なファミリー名や CSS 全体のキーワードと誤解される可能性のあるフォントファミリー名は、引用符で囲む必要があります。フォントファミリー名は {{cssxref("custom-ident")}} または {{cssxref("string")}} として記述することができますが、 `initial` や `inherit` のような CSS 全体のプロパティ値と同じであるフォントファミリー名や、 `sans-serif` や `fantasy` のような CSS の一般的なフォントファミリー名と同じ名前があるフォントファミリー名は、引用符で囲んだ文字列として記述しなければなりません。そうでない場合、フォントファミリー名は同等の CSS キーワードまたは一般的なフォントファミリー名であると解釈されます。キーワードとして使用する場合、`serif`、`sans-serif`、`monospace`、`cursive`、`fantasy` といった一般的なフォントファミリー名とグローバル CSS キーワードは、引用符で囲んでは**いけません**。文字列は CSS キーワードとして解釈されないためです。
+> [!WARNING]
+> 一般的なファミリー名や CSS 全体のキーワードと誤解される可能性のあるフォントファミリー名は、引用符で囲む必要があります。フォントファミリー名は {{cssxref("custom-ident")}} または {{cssxref("string")}} として記述することができますが、 `initial` や `inherit` のような CSS 全体のプロパティ値と同じであるフォントファミリー名や、 `sans-serif` や `fantasy` のような CSS の一般的なフォントファミリー名と同じ名前があるフォントファミリー名は、引用符で囲んだ文字列として記述しなければなりません。そうでない場合、フォントファミリー名は同等の CSS キーワードまたは一般的なフォントファミリー名であると解釈されます。キーワードとして使用する場合、`serif`、`sans-serif`、`monospace`、`cursive`、`fantasy` といった一般的なフォントファミリー名とグローバル CSS キーワードは、引用符で囲んでは**いけません**。文字列は CSS キーワードとして解釈されないためです。
 
 #### font-family の例
 
@@ -464,7 +469,8 @@ p {
 
 {{ EmbedLiveSample('複数の影', '100%', 260) }}
 
-> **メモ:** Sitepoint の記事 [Moonlighting with CSS text-shadow](https://www.sitepoint.com/moonlighting-css-text-shadow/) で、`text-shadow` の使い方のより興味深い例を見ることができます。
+> [!NOTE]
+> Sitepoint の記事 [Moonlighting with CSS text-shadow](https://www.sitepoint.com/moonlighting-css-text-shadow/) で、`text-shadow` の使い方のより興味深い例を見ることができます。
 
 ## テキストのレイアウト
 
diff --git a/files/ja/learn/css/styling_text/index.md b/files/ja/learn/css/styling_text/index.md
index dda3d9c7ac3d6d..d8c9044faa66c8 100644
--- a/files/ja/learn/css/styling_text/index.md
+++ b/files/ja/learn/css/styling_text/index.md
@@ -11,7 +11,8 @@ CSS 言語の基本を習得したら、次に取り組むべき CSS のトピ
 
 このモジュールを始める前に、[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)のモジュールで説明したようにすでに HTML についての基本的な知識があり、[CSS 入門](/ja/docs/Learn/CSS/Introduction_to_CSS)で説明したように CSS の基本に慣れている必要があります。
 
-> **メモ:** 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、[JSBin](https://jsbin.com/)、[Glitch](https://glitch.com/) のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。
+> [!NOTE]
+> 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、[JSBin](https://jsbin.com/)、[Glitch](https://glitch.com/) のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。
 
 ## ガイド
 
diff --git a/files/ja/learn/css/styling_text/styling_links/index.md b/files/ja/learn/css/styling_text/styling_links/index.md
index 207ce99de50b65..be40ad199f0283 100644
--- a/files/ja/learn/css/styling_text/styling_links/index.md
+++ b/files/ja/learn/css/styling_text/styling_links/index.md
@@ -92,7 +92,8 @@ p {
 
 {{ EmbedLiveSample('Default_styles', '100%', 130) }}
 
-> **メモ:** このページのリンク例はすべて、それぞれのウィンドウの一番上にリンクしています。 空のフラグメント（`href="#"`）を使用しているのは、単純な例を作成し、それぞれの {{HTMLElement("iframe")}} に格納されているライブサンプルが壊れないようにするためです。
+> [!NOTE]
+> このページのリンク例はすべて、それぞれのウィンドウの一番上にリンクしています。 空のフラグメント（`href="#"`）を使用しているのは、単純な例を作成し、それぞれの {{HTMLElement("iframe")}} に格納されているライブサンプルが壊れないようにするためです。
 
 興味深いことに、これらの既定のスタイルは、1990 年代半ばのブラウザーの初期の頃のものとほぼ同じです。 これは、ユーザーがこの動作を知っており、予期するようになったためです。リンクのスタイルが異なると、多くの人が混乱してしまうでしょう。 これは、リンクのスタイルを設定してはいけないという意味ではなく、予想される動作から大きく外れてはいけないということです。 少なくとも次のことをするべきです。
 
@@ -105,7 +106,8 @@ p {
 - {{cssxref("cursor")}} でマウスポインターのスタイルを設定します。よっぽどの理由がない限り、これはオフにしないでください。
 - {{cssxref("outline")}} でテキストの輪郭線を設定します。輪郭線を境界線に似ていますが、唯一の違いは、境界線はボックス内の空間を占めるのに対し、輪郭線は空間を占めずに背景の上に置かれるだけという点です。輪郭線はアクセシビリティの向上に役立つので、他の方法でリンクがフォーカスされたことを表さない限り、除去しないでください。
 
-> **メモ:** リンクのスタイルは上記のプロパティに限定されているいるわけではありません。好きなプロパティを自由に使用できます。
+> [!NOTE]
+> リンクのスタイルは上記のプロパティに限定されているいるわけではありません。好きなプロパティを自由に使用できます。
 
 ### リンクのスタイル設定
 
diff --git a/files/ja/learn/css/styling_text/styling_lists/index.md b/files/ja/learn/css/styling_text/styling_lists/index.md
index 8bb24913fdaa80..1a5e86f598fc77 100644
--- a/files/ja/learn/css/styling_text/styling_lists/index.md
+++ b/files/ja/learn/css/styling_text/styling_lists/index.md
@@ -275,7 +275,8 @@ ul {
 
 {{ EmbedLiveSample('reversed', '100%', 150) }}
 
-> **メモ:** 逆方向のリストに `start` 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。
+> [!NOTE]
+> 逆方向のリストに `start` 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。
 
 ### 値
 
@@ -296,7 +297,8 @@ ul {
 
 {{ EmbedLiveSample('value', '100%', 150) }}
 
-> **メモ:** 数値以外の {{cssxref("list-style-type")}} を使用している場合でも、`value` 属性に同等の数値を使用する必要があります。
+> [!NOTE]
+> 数値以外の {{cssxref("list-style-type")}} を使用している場合でも、`value` 属性に同等の数値を使用する必要があります。
 
 ## アクティブラーニング: ネストしたリストの装飾
 
diff --git a/files/ja/learn/css/styling_text/typesetting_a_homepage/index.md b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.md
index 4e3fa44f441c81..df6a55d8a81d79 100644
--- a/files/ja/learn/css/styling_text/typesetting_a_homepage/index.md
+++ b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.md
@@ -33,7 +33,8 @@ l10n:
 
 あるいは、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディターのいずれかに入力し、[この URL](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png) を使用して背景画像を指定することができます。
 
-> **メモ:** 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+> [!NOTE]
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
 ## プロジェクトの概要
 
diff --git a/files/ja/learn/css/styling_text/web_fonts/index.md b/files/ja/learn/css/styling_text/web_fonts/index.md
index 30f261c638b5d7..8d5e69d5c92117 100644
--- a/files/ja/learn/css/styling_text/web_fonts/index.md
+++ b/files/ja/learn/css/styling_text/web_fonts/index.md
@@ -96,7 +96,8 @@ html {
 
 いずれの場合も、フォントパッケージを展開します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1 つのフォントファイルを使用することを考慮してください。
 
-> **メモ:** 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）
+> [!NOTE]
+> 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）
 
 ### 必要なコードの生成
 
@@ -153,7 +154,8 @@ html {
 
 ![ウェブフォントによるアクティブラーニングの演習の完成デザイン。このページには 2 つの見出しと 3 つの段落があります。ページには、異なるフォントと異なるサイズのテキストが含まれています。](web-font-example.png)
 
-> **メモ:** これがうまくいかない場合は、自分のバージョンと完成したファイルとを比較してみてください。 [web-font-finished.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.html) と [web-font-finished.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.css) を見てください。 [GitHub からコードをダウンロード](https://github.com/mdn/learning-area/tree/main/css/styling-text/web-fonts)するか、[完成した例をライブ実行](https://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)することができます。
+> [!NOTE]
+> これがうまくいかない場合は、自分のバージョンと完成したファイルとを比較してみてください。 [web-font-finished.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.html) と [web-font-finished.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.css) を見てください。 [GitHub からコードをダウンロード](https://github.com/mdn/learning-area/tree/main/css/styling-text/web-fonts)するか、[完成した例をライブ実行](https://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)することができます。
 
 ## オンラインフォントサービスの使用
 
@@ -168,7 +170,8 @@ html {
 5. 表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。
 6. 次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。
 
-> **メモ:** 自分の作品を私たちの作品と比べてみる必要がある場合は、完成版を [google-font.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.html) および [google-font.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.css) で見ることができます（[ライブで見る](https://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)）。
+> [!NOTE]
+> 自分の作品を私たちの作品と比べてみる必要がある場合は、完成版を [google-font.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.html) および [google-font.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.css) で見ることができます（[ライブで見る](https://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)）。
 
 ## @font-face の詳細
 
@@ -191,7 +194,8 @@ Fontsquirrel によって生成された `@font-face` 構文を調べてみま
 - `src`: これらの行は CSS にインポートされるフォントファイルへのパス（`url` 部分）と各フォントファイルの形式（`format` 部分）を指定します。 どの場合も後者の部分はオプションですが、ブラウザーが使用できるフォントをすばやく見つけることができるため、宣言すると有益です。複数の宣言をカンマで区切ってリストすることができます。ブラウザーはそれらを検索し、最初に理解できるとわかったものを使用します。従って、先に WOFF2 のようなより新しくより良い形式を置き、そして後に TTF のようなより古くあまり良くない形式を置くのが最善です。
 - {{cssxref("font-weight")}}/{{cssxref("font-style")}}: これらの行はフォントの太さ、およびイタリックかどうかを指定します。 同じフォントの複数の太さをインポートする場合は、フォントファミリーのすべての異なるメンバーに異なる名前を付けるのではなく、それらの太さ/スタイルを指定して、異なる値の {{cssxref("font-weight")}}/{{cssxref("font-style")}} を使用することができます。 [@font-face tip: define font-weight and font-style to keep your CSS simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)（英語）によって Roger Johansson が何をすべきかをより詳細に示しています。
 
-> **メモ:** ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、{{cssxref("@font-face/unicode-range", "unicode-range")}} の値でウェブフォントで使用する特定の文字範囲を指定することもできます。対応しているブラウザーでは、ページに指定した文字が含まれている場合にのみフォントがダウンロードされるため、不要なダウンロードを省くことができます。Drew McLellan による [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/)（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。
+> [!NOTE]
+> ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、{{cssxref("@font-face/unicode-range", "unicode-range")}} の値でウェブフォントで使用する特定の文字範囲を指定することもできます。対応しているブラウザーでは、ページに指定した文字が含まれている場合にのみフォントがダウンロードされるため、不要なダウンロードを省くことができます。Drew McLellan による [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/)（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。
 
 ## 可変フォント
 
diff --git a/files/ja/learn/forms/advanced_form_styling/index.md b/files/ja/learn/forms/advanced_form_styling/index.md
index 8dc607475e74a3..beb10fd3128393 100644
--- a/files/ja/learn/forms/advanced_form_styling/index.md
+++ b/files/ja/learn/forms/advanced_form_styling/index.md
@@ -114,7 +114,8 @@ input[type="search"] {
 
 {{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}}
 
-> **メモ:** 検索フィールドでは、Edge と Chrome で入力がフォーカスされないときに "x" の削除アイコンが消えるが、Safari では残ることに気づくこともあるでしょう。CSS で消すには、`input[type="search"]::-webkit-search-cancel-button { display: none; }`を使用できますが、フォーカス時のアイコンも取り除き、見た目が元に戻らないようです。
+> [!NOTE]
+> 検索フィールドでは、Edge と Chrome で入力がフォーカスされないときに "x" の削除アイコンが消えるが、Safari では残ることに気づくこともあるでしょう。CSS で消すには、`input[type="search"]::-webkit-search-cancel-button { display: none; }`を使用できますが、フォーカス時のアイコンも取り除き、見た目が元に戻らないようです。
 
 ### チェックボックスとラジオボタンのスタイル設定
 
@@ -320,7 +321,8 @@ button {
 }
 ```
 
-> **メモ:** 多数のブラウザーで同時にこの例をテストしたい場合、[ライブ版をここで見つけてください](https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html) ([ソースコードも見てください](https://github.com/mdn/learning-area/blob/main/html/forms/styling-examples/ugly-controls.html))。
+> [!NOTE]
+> 多数のブラウザーで同時にこの例をテストしたい場合、[ライブ版をここで見つけてください](https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html) ([ソースコードも見てください](https://github.com/mdn/learning-area/blob/main/html/forms/styling-examples/ugly-controls.html))。
 >
 > また JavaScript をページに追加してコントロール自身の下にあるファイルピッカー自身で選択されたファイルを一覧しているのを心に留めておいてください。これは [`<input type="file">`](/ja/docs/Web/HTML/Element/input/file#例) リファレンスページの例を簡単にしたバージョンです。
 
@@ -424,7 +426,8 @@ select {
 
 しかし、コントロールの内部部品（日付をピックアップするのに使うポップアップカレンダー、値を増減するスピナーなど）はまったくスタイル設定できず、 `appearance: none;` を使ってもスタイルを除去できません。スタイル設定を完全に制御する必要がある場合は、カスタムコントロールを生成するライブラリーを使うか、自分で作らなければなりません。
 
-> **メモ:** ここでも[`<input type="number">`](/ja/docs/Web/HTML/Element/input/number) は触れる価値があります、これもまた、値を増加/減少させるために使用することができるスピナーがあるので、同じ問題に悩まされる可能性があります。しかし、 `number` 型の場合、収集するデータはより単純で、代わりに `tel` 入力型を使用するのも簡単です。これは `text` のような外観ですが、タッチキーボードを搭載した機器ではテンキーを表示することができます。
+> [!NOTE]
+> ここでも[`<input type="number">`](/ja/docs/Web/HTML/Element/input/number) は触れる価値があります、これもまた、値を増加/減少させるために使用することができるスピナーがあるので、同じ問題に悩まされる可能性があります。しかし、 `number` 型の場合、収集するデータはより単純で、代わりに `tel` 入力型を使用するのも簡単です。これは `text` のような外観ですが、タッチキーボードを搭載した機器ではテンキーを表示することができます。
 
 ### Range 入力型
 
diff --git a/files/ja/learn/forms/basic_native_form_controls/index.md b/files/ja/learn/forms/basic_native_form_controls/index.md
index e2c2dba5aa6f0e..5874fb964ca2be 100644
--- a/files/ja/learn/forms/basic_native_form_controls/index.md
+++ b/files/ja/learn/forms/basic_native_form_controls/index.md
@@ -34,13 +34,15 @@ l10n:
 - よく使われる入力型である {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}}, {{HTMLelement('input/text', 'text')}}
 - すべてのフォームコントロールに共通する属性のいくつか
 
-> **メモ:** 次の 2 回分の記事で、 HTML5 で追加された、もっと強力なフォームコントロールを取り上げます。より高度なリファレンスを読みたい方は、 [HTML フォーム要素のリファレンス](/ja/docs/Web/HTML/Element#フォーム)、全般的には [`<input>` 型](/ja/docs/Web/HTML/Element/input) のリファレンスを参照してください。
+> [!NOTE]
+> 次の 2 回分の記事で、 HTML5 で追加された、もっと強力なフォームコントロールを取り上げます。より高度なリファレンスを読みたい方は、 [HTML フォーム要素のリファレンス](/ja/docs/Web/HTML/Element#フォーム)、全般的には [`<input>` 型](/ja/docs/Web/HTML/Element/input) のリファレンスを参照してください。
 
 ## テキスト入力フィールド
 
 テキスト入力 ({{htmlelement("input")}}) フィールドは、最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。
 
-> **メモ:** HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使ってリッチテキストの編集（太字、斜体など）を実現することはできません。見かけるリッチテキストエディターは、すべて HTML、CSS、JavaScript で作成されたカスタムウィジェットです。
+> [!NOTE]
+> HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使ってリッチテキストの編集（太字、斜体など）を実現することはできません。見かけるリッチテキストエディターは、すべて HTML、CSS、JavaScript で作成されたカスタムウィジェットです。
 
 すべてのテキストフィールドに共通する動作があります。
 
@@ -55,7 +57,8 @@ l10n:
 
 単一行のテキストフィールドを生成するには、 {{HTMLElement("input")}} 要素で [`type`](/ja/docs/Web/HTML/Element/input#type) 属性値を `text` に設定するか、 [`type`](/ja/docs/Web/HTML/Element/input#type) 属性を省略するかします (`text` が既定値です)。この属性の `text` の値は、 [`type`](/ja/docs/Web/HTML/Element/input#type) 属性に指定した値をブラウザーに認識できない場合 (たとえば `type="color"` を指定した場合で、ブラウザーがネイティブの色ピッカーに対応していない場合) の代替値になります。
 
-> **メモ:** GitHub の [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) に、すべての単一行テキストフィールド型の例があります ([ライブで確認できます](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html))。
+> [!NOTE]
+> GitHub の [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) に、すべての単一行テキストフィールド型の例があります ([ライブで確認できます](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html))。
 
 基本的な単一行のテキストフィールドの例を示します。
 
@@ -71,7 +74,8 @@ l10n:
 
 この文書内で使用しているスクリーンショットは、macOS 上の Chrome ブラウザーで撮影したものです。ブラウザーによって、これらのフィールドやボタンに若干の違いがあるかもしれませんが、基本的なハイライト手法は同じです。
 
-> **メモ:** 特定の検証制約を強制する [`type`](/ja/docs/Web/HTML/Element/input#type) 属性の値、例えば color、email、url 入力型については、次の記事の [HTML5 の入力型](/ja/docs/Learn/Forms/HTML5_input_types)で説明します。
+> [!NOTE]
+> 特定の検証制約を強制する [`type`](/ja/docs/Web/HTML/Element/input#type) 属性の値、例えば color、email、url 入力型については、次の記事の [HTML5 の入力型](/ja/docs/Learn/Forms/HTML5_input_types)で説明します。
 
 #### パスワードフィールド
 
@@ -109,7 +113,8 @@ l10n:
 
 これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特徴です。ほとんどのフォームウィジェットでは、フォームを送信すると [`name`](/ja/docs/Web/HTML/Element/input#name) 属性を持つすべてのウィジェットが、値が入力されていなくても送信されます。チェック可能項目では、チェックされている場合にのみ値が送信されます。チェックされていない場合は、 name も含めて何も送信されません。チェックされているが値がない場合、 name が _on_ という値で送信されます。
 
-> **メモ:** この節の例は、[checkable-items.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html) として GitHub にあります（[ライブで確認できます](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)）。
+> [!NOTE]
+> この節の例は、[checkable-items.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html) として GitHub にあります（[ライブで確認できます](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)）。
 
 最大限のユーザビリティ/アクセシビリティを実現するために、関連する項目のリストをそれぞれ {{htmlelement("fieldset")}} で囲み、リストの全体的な説明を示す {{htmlelement("legend")}} で囲むことをお勧めします。 {{htmlelement("label")}}/{{htmlelement("input")}} 要素の個々のペアは、それぞれ独自のリスト項目（または同様のもの）に含める必要があります。関連した {{htmlelement('label')}} はラジオボタンやチェックボックスの直前または直後に、 {{htmlelement("legend")}} の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。
 
@@ -152,7 +157,8 @@ l10n:
 
 ![macOS の Chrome 115 での既定、フォーカス、無効のチェックボックス](checkboxes.png)
 
-> **メモ:** チェックボックスやラジオボタンで読み込み時に [`checked`](/ja/docs/Web/HTML/Element/input/checkbox#checked) 属性が付いていれば、チェック状態が解除されても {{cssxref(':default')}} 擬似クラスに一致します。現在チェックされているものは {{cssxref(':checked')}} 擬似クラスに一致します。
+> [!NOTE]
+> チェックボックスやラジオボタンで読み込み時に [`checked`](/ja/docs/Web/HTML/Element/input/checkbox#checked) 属性が付いていれば、チェック状態が解除されても {{cssxref(':default')}} 擬似クラスに一致します。現在チェックされているものは {{cssxref(':checked')}} 擬似クラスに一致します。
 
 チェックボックスにはオンとオフになるという性質があるため、チェックボックスはトグルボタンと考えられており、多くの開発者やデザイナーが既定のチェックボックスのスタイルを拡張して、トグルスイッチのように見えるボタンを作成しています。[ここで動作する例を](https://mdn.github.io/learning-area/html/forms/toggle-switch-example/)見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/toggle-switch-example/index.html)も見られます）。
 
@@ -245,7 +251,8 @@ input {
 
 > **メモ:** `image` 入力型もボタンとしてレンダリングされます。それについては後で触れます。
 
-> **メモ:** この節の例は [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html) として GitHub にあります（[ライブで確認できます](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)）。
+> [!NOTE]
+> この節の例は [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html) として GitHub にあります（[ライブで確認できます](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)）。
 
 以下に、それぞれのボタンの `<input>` 型と、同等の `<button>` 型の例を示します。
 
diff --git a/files/ja/learn/forms/form_validation/index.md b/files/ja/learn/forms/form_validation/index.md
index e14c8ca7f9cd81..f22a32367f972f 100644
--- a/files/ja/learn/forms/form_validation/index.md
+++ b/files/ja/learn/forms/form_validation/index.md
@@ -57,7 +57,8 @@ l10n:
 - **ユーザーのデータを保護したい。** ユーザーに安全なパスワードを入力させることで、アカウント情報を保護しやすくなります。
 - **自分たちを守りたい。** 悪意のあるユーザーが保護のないフォームを悪用して、そのフォームを一部に持つアプリケーションに危害を加える方法がたくさんあります。[ウェブサイトセキュリティ](/ja/docs/Learn/Server-side/First_steps/Website_security)を参照してください。
 
-  > **警告:** クライアントからサーバーに渡されたデータを信用しないでください。フォームが正しく検証を行い、クライアント側で悪意のある入力を防いでいるとしても、悪意のあるユーザーはネットワークリクエストを改ざんすることができます。
+  > [!WARNING]
+  > クライアントからサーバーに渡されたデータを信用しないでください。フォームが正しく検証を行い、クライアント側で悪意のある入力を防いでいるとしても、悪意のあるユーザーはネットワークリクエストを改ざんすることができます。
 
 ## 様々な種類のフォーム検証
 
@@ -92,7 +93,8 @@ l10n:
 - 要素が CSS の {{cssxref(":invalid")}} 擬似クラスに一致し、エラーによっては他の UI 擬似クラス（{{cssxref(":out-of-range")}} など）に一致することもあります。これにより、不正な要素に特定のスタイルを適用することができます。
 - ユーザーがデータを送信しようとすると、ブラウザーはフォームをブロックしてエラーメッセージを表示します。
 
-> **メモ:** サーバーへの送信を中断するエラーがいくつかあります。 {{domxref('validityState.badInput', 'badInput')}}、{{domxref('validityState.patternMismatch','patternMismatch')}}、{{domxref('validityState.rangeOverflow','rangeOverflow')}} または{{domxref('validityState.rangeUnderflow','rangeUnderflow')}}、{{domxref('validityState.stepMismatch','stepMismatch')}}、{{domxref('validityState.tooLong','tooLong')}} または{{domxref('validityState.tooShort','tooShort')}}、{{domxref('validityState.typeMismatch','typeMismatch')}}、{{domxref('validityState.valueMissing','valueMissing')}}、または {{domxref('validityState.customError','customError')}} が含まれます。
+> [!NOTE]
+> サーバーへの送信を中断するエラーがいくつかあります。 {{domxref('validityState.badInput', 'badInput')}}、{{domxref('validityState.patternMismatch','patternMismatch')}}、{{domxref('validityState.rangeOverflow','rangeOverflow')}} または{{domxref('validityState.rangeUnderflow','rangeUnderflow')}}、{{domxref('validityState.stepMismatch','stepMismatch')}}、{{domxref('validityState.tooLong','tooLong')}} または{{domxref('validityState.tooShort','tooShort')}}、{{domxref('validityState.typeMismatch','typeMismatch')}}、{{domxref('validityState.valueMissing','valueMissing')}}、または {{domxref('validityState.customError','customError')}} が含まれます。
 
 ## 入力要素の制約の検証
 
@@ -162,13 +164,15 @@ input:valid {
 
 {{EmbedLiveSample("The_required_attribute", "100%", 80)}}
 
-> **メモ:** この例は GitHub の [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) で見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html)も見てください）。
+> [!NOTE]
+> この例は GitHub の [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) で見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html)も見てください）。
 
 値のないままフォームを送信してみましょう。妥当ではない入力がどのようにフォーカスされるか注意しましょう。デフォルトのエラーメッセージ（「このフィールドは入力必須です。」）が表示され、フォームの送信を抑止します。
 
 `required` 属性に対応している要素にこの属性がある場合、その要素に値があるかないかによって、要素が {{cssxref(':required')}} 擬似クラスに一致するかどうかが決まります。もし {{HTMLElement("input")}} に値がなければ、`input` は{{cssxref(':invalid')}} 擬似クラスに一致します。
 
-> **メモ:** 使い勝手を良くするために、フォームのフィールドが必要なときにはユーザーに通知しましょう。
+> [!NOTE]
+> 使い勝手を良くするために、フォームのフィールドが必要なときにはユーザーに通知しましょう。
 > これは使い勝手だけに良いというわけではなく、WCAG [アクセシビリティ](/ja/docs/Learn/Accessibility) ガイドラインで求められています。
 > また、本当に必要とする場合にのみ必須にしましょう。例えば誰かの性別や肩書などの情報は本当に必要でしょうか？
 
@@ -213,7 +217,8 @@ input:valid {
 
 {{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}
 
-> **メモ:** GitHub の [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) でライブ例を見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-pattern.html)も見てください）。
+> [!NOTE]
+> GitHub の [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) でライブ例を見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-pattern.html)も見てください）。
 
 この例では、{{HTMLElement("input")}} 要素は "banana"、"Banana"、"cherry"、"Cherry" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた "Aa" のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。
 
@@ -289,7 +294,8 @@ div {
 
 {{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}
 
-> **メモ:** GitHub の [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) でライブサンプルを見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-length.html)も見てください）
+> [!NOTE]
+> GitHub の [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) でライブサンプルを見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-length.html)も見てください）
 
 > **メモ:** `<input type="number">` （および、 `range` や `date` のような他の型）は [`step`](/ja/docs/Web/HTML/Attributes/step) 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では `step` 属性を入れていませんので、既定値の `1` となります。つまり 3.2 のような浮動小数でも、不正になります。
 
@@ -402,7 +408,8 @@ input:focus:invalid {
 
 入力値と、それをサポートする入力型の制約に使える属性の完全なリストは、[検証関連属性](/ja/docs/Web/HTML/Constraint_validation#検証関連属性)を見てください。
 
-> **メモ:** GitHub の [full-example.html](https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html) でライブサンプルを見ることができます([ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/full-example.html)も見てください)
+> [!NOTE]
+> GitHub の [full-example.html](https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html) でライブサンプルを見ることができます([ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/full-example.html)も見てください)
 
 ## JavaScript を使用したフォーム検証
 
@@ -490,7 +497,8 @@ email.addEventListener("input", (event) => {
 
 {{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 120)}}
 
-> **メモ:** この例は GitHub の [custom-error-message.html](https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html) で見ることができます （[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html)も見てください）。
+> [!NOTE]
+> この例は GitHub の [custom-error-message.html](https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html) で見ることができます （[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html)も見てください）。
 
 #### より詳細な例
 
@@ -517,7 +525,8 @@ email.addEventListener("input", (event) => {
 
 `<span>` 要素の中にエラーメッセージを表示させようとしています。 `<span>`にセットされた [`aria-live`](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。
 
-> **メモ:** ここでの要点は、フォームに `novalidate` 属性をつけると、フォームがエラーメッセージのバブルを表示するのを停止して、その代わり DOM 内にカスタムエラーメッセージを選択した方法で表示させられることです。
+> [!NOTE]
+> ここでの要点は、フォームに `novalidate` 属性をつけると、フォームがエラーメッセージのバブルを表示するのを停止して、その代わり DOM 内にカスタムエラーメッセージを選択した方法で表示させられることです。
 
 この CSS はフォームの見栄えを少し良くして、入力データが無効なときの見た目のフィードバックを提供します。
 
@@ -642,7 +651,8 @@ function showError() {
 
 {{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}
 
-> **メモ:** GitHub の [detailed-custom-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html) に例があります（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/detailed-custom-validation.html)見てください）。
+> [!NOTE]
+> GitHub の [detailed-custom-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html) に例があります（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/detailed-custom-validation.html)見てください）。
 
 制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。
 
diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/index.md b/files/ja/learn/forms/how_to_build_custom_form_controls/index.md
index b7bfa2d45ebeb6..6510d2ea585c92 100644
--- a/files/ja/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/ja/learn/forms/how_to_build_custom_form_controls/index.md
@@ -11,7 +11,8 @@ HTML フォームで使用可能なコントロールだけでは十分でない
 
 本記事では、そのようなコントロールの作り方を見ていきます。そのための例として、 {{HTMLElement("select")}} 要素の再構築に取り組みます。このほかに独自コントロール作成をどういう方法でするか、いつするか、またそれが意味をなすのかや、コントロール作成が必須なときに何に気をつけるべきかを扱います。
 
-> **メモ:** ここではコントロールの構築に注目しており、汎用かつ再利用可能なコードの作成法は見ていきません。それには JavaScript の少なからぬコードや未知のコンテキストでの DOM 操作の組み合わせによるものであり、本記事の対象から外れます。
+> [!NOTE]
+> ここではコントロールの構築に注目しており、汎用かつ再利用可能なコードの作成法は見ていきません。それには JavaScript の少なからぬコードや未知のコンテキストでの DOM 操作の組み合わせによるものであり、本記事の対象から外れます。
 
 ## デザイン、構造、セマンティクス
 
@@ -74,7 +75,8 @@ HTML フォームで使用可能なコントロールだけでは十分でない
 - [UXDesign.com](https://uxdesign.com/)
 - [The UX Design section of SmashingMagazine](https://www.smashingmagazine.com/)
 
-> **メモ:** さらにほとんどのシステムでは、使用できる選択肢すべてを見るために {{HTMLElement("select")}} 要素を開く手段があります (これは {{HTMLElement("select")}} 要素をマウスでクリックするのと同じです)。これは Windows では <kbd>Alt</kbd> + <kbd>Down</kbd> キー で実現できますが、この例では実装しません。しかし、仕組みはすでに `click` イベント向けに実装されていますので、行うのは簡単です。
+> [!NOTE]
+> さらにほとんどのシステムでは、使用できる選択肢すべてを見るために {{HTMLElement("select")}} 要素を開く手段があります (これは {{HTMLElement("select")}} 要素をマウスでクリックするのと同じです)。これは Windows では <kbd>Alt</kbd> + <kbd>Down</kbd> キー で実現できますが、この例では実装しません。しかし、仕組みはすでに `click` イベント向けに実装されていますので、行うのは簡単です。
 
 ## HTML の構造とセマンティクスの定義
 
@@ -164,7 +166,8 @@ HTML フォームで使用可能なコントロールだけでは十分でない
 }
 ```
 
-> **メモ:** 選択肢のリストに高さと幅を与えないように `transform: scale(1, 0)` も使えます。
+> [!NOTE]
+> 選択肢のリストに高さと幅を与えないように `transform: scale(1, 0)` も使えます。
 
 ### 美しくする
 
@@ -649,7 +652,8 @@ HTML フォームで使用可能なコントロールだけでは十分でない
 
 デザインや構造の準備ができましたので、コントロールが実際に動作するようにするための JavaScript コードを記述できます。
 
-> **警告:** 以下は教育目的のコードであり、そのままで使用するべきではありません。ご覧のとおり、さまざまな箇所に将来性のないものや古いブラウザーで動作しないものがあります。また、本番のコードでは最適化すべき冗長な箇所もあります。
+> [!WARNING]
+> 以下は教育目的のコードであり、そのままで使用するべきではありません。ご覧のとおり、さまざまな箇所に将来性のないものや古いブラウザーで動作しないものがあります。また、本番のコードでは最適化すべき冗長な箇所もあります。
 
 ### なぜ動作しないのか?
 
@@ -913,7 +917,8 @@ window.addEventListener("load", () => {
 
 {{EmbedLiveSample("With_JS",120,130)}}
 
-> **メモ:** コードを本当に汎用かつ再利用可能にしたい場合はクラスを切り替えるのではなく、単に {{HTMLElement("select")}} 要素を隠すためのコントロールのクラスを追加して、ページ内にあるすべての {{HTMLElement("select")}} 要素の後ろにカスタムコントロールを表す DOM ツリーを動的に追加する方がはるかによいでしょう。
+> [!NOTE]
+> コードを本当に汎用かつ再利用可能にしたい場合はクラスを切り替えるのではなく、単に {{HTMLElement("select")}} 要素を隠すためのコントロールのクラスを追加して、ページ内にあるすべての {{HTMLElement("select")}} 要素の後ろにカスタムコントロールを表す DOM ツリーを動的に追加する方がはるかによいでしょう。
 
 ### 作業をより簡単に
 
diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/index.md b/files/ja/learn/forms/how_to_structure_a_web_form/index.md
index 3c3052e81bb840..34acf687936481 100644
--- a/files/ja/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.md
@@ -36,7 +36,8 @@ l10n:
 
 前の記事ですでにこれを見ています。
 
-> **警告:** フォームの中にフォームを入れ子にすることは厳格に禁じられています。これは予期せぬ動作を発生するおそれがあるので、悪い考えです。
+> [!WARNING]
+> フォームの中にフォームを入れ子にすることは厳格に禁じられています。これは予期せぬ動作を発生するおそれがあるので、悪い考えです。
 
 {{HTMLElement("form")}} 要素の外部でもフォームウィジェットを使用できますが、そのフォームウィジェットは [`form`](/ja/docs/Web/HTML/Element/input#form) 属性を用いて関連付けなければ、どのフォームに対しても何も行わないことに注意してください。これは、フォーム内に包含されていないコントロールを明示的にフォームへ紐付けられるように導入されました。
 
@@ -70,7 +71,8 @@ l10n:
 </form>
 ```
 
-> **メモ:** この例は [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) で見ることができます([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html))。
+> [!NOTE]
+> この例は [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) で見ることができます([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html))。
 
 この例では、スクリーンリーダーは最初のウィジェットを "Fruit juice size small"、2 番目を "Fruit juice size medium"、3 番目を "Fruit juice size large" と読み上げるでしょう。
 
@@ -119,7 +121,8 @@ l10n:
 </form>
 ```
 
-> **メモ:** この例は [checkbox-label.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/checkbox-label.html) で見ることができます([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html))。
+> [!NOTE]
+> この例は [checkbox-label.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/checkbox-label.html) で見ることができます([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html))。
 
 ### 複数のラベル
 
@@ -163,9 +166,11 @@ l10n:
 - 2 つ目の例では、少し明確になります "name star name edit text required" というようにラベルが入力と一緒に読み上げられます。しかしラベルはまだ別々に読み上げられます。少し混乱しやすいですが、これは `<input>` と関連したラベルがあるためまだ良いでしょう。
 - 3 つ目の例が最も良いです — 実際のラベルがすべて一緒に読み上げられ、 "name required edit text" のようにラベルと入力が一緒に読み上げられます。
 
-> **メモ:** スクリーンリーダーによっては、少し異なる結果になる場合もあります。これは VoiceOver (と同様に動作する NVDA)でテストしています。あなたの体験を聞きたいです。
+> [!NOTE]
+> スクリーンリーダーによっては、少し異なる結果になる場合もあります。これは VoiceOver (と同様に動作する NVDA)でテストしています。あなたの体験を聞きたいです。
 
-> **メモ:** この例は GitHub の [required-labels.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/required-labels.html) で見ることができます([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html))。2 や 3 のコメントを外したバージョンの例を実行しないでください — 複数の label と複数の同じ input ID があると、スクリーンリーダーは確実に混乱します!
+> [!NOTE]
+> この例は GitHub の [required-labels.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/required-labels.html) で見ることができます([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html))。2 や 3 のコメントを外したバージョンの例を実行しないでください — 複数の label と複数の同じ input ID があると、スクリーンリーダーは確実に混乱します!
 
 ## フォームで使用される一般的な HTML 構造
 
diff --git a/files/ja/learn/forms/html5_input_types/index.md b/files/ja/learn/forms/html5_input_types/index.md
index 113cf515b43d1a..052546aa74ddfe 100644
--- a/files/ja/learn/forms/html5_input_types/index.md
+++ b/files/ja/learn/forms/html5_input_types/index.md
@@ -29,7 +29,8 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** この記事のたいていの機能はブラウザー間で広く対応されています。例外は注記しておきます。ブラウザーの対応についての詳細は、[HTML フォーム要素のリファレンス](/ja/docs/Web/HTML/Element#フォーム)、特に [\<input> 型](/ja/docs/Web/HTML/Element/input)リファレンスを見てください。
+> [!NOTE]
+> この記事のたいていの機能はブラウザー間で広く対応されています。例外は注記しておきます。ブラウザーの対応についての詳細は、[HTML フォーム要素のリファレンス](/ja/docs/Web/HTML/Element#フォーム)、特に [\<input> 型](/ja/docs/Web/HTML/Element/input)リファレンスを見てください。
 
 HTML フォームコントロールの見た目はデザイナーの仕様により全く異なるため、ウェブ開発者はときどき独自のフォームコントロールを作成します。これは上級のチュートリアル — [カスタムフォームウィジェットの作成方法](/ja/docs/Learn/Forms/How_to_build_custom_form_controls) — で扱います。
 
@@ -55,7 +56,8 @@ HTML フォームコントロールの見た目はデザイナーの仕様によ
 
 ![既定でアットマークが付いている、 Android 版 Firefox のメールアドレス入力キーボード](fx-android-email-type-keyboard.jpg)
 
-> **メモ:** 基本的なテキスト入力型の例は [basic input の例](https://mdn.github.io/learning-area/html/forms/basic-input-examples/)にあります（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/basic-input-examples/index.html) も見てください）。
+> [!NOTE]
+> 基本的なテキスト入力型の例は [basic input の例](https://mdn.github.io/learning-area/html/forms/basic-input-examples/)にあります（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/basic-input-examples/index.html) も見てください）。
 
 これは新しい入力型を使う良い理由であり、こうした端末のユーザーの使い勝手を向上させます。
 
@@ -67,7 +69,8 @@ HTML フォームコントロールの見た目はデザイナーの仕様によ
 
 既定の制約では `a@b` は有効なメールアドレスです。これは既定では `email` 入力型はイントラネットのメールアドレスを許可しているためです。異なる検証動作を実装するには、[`pattern`](/ja/docs/Web/HTML/Attributes/pattern) 属性を用いたり、エラーメッセージをカスタムできます。この機能の使い方は後の [クライアント側の検証](/ja/docs/Learn/Forms/Form_validation)の記事で話します。
 
-> **メモ:** 入力データがメールアドレスでない場合、{{cssxref(':invalid')}} 擬似クラスがマッチして、{{domxref('validityState.typeMismatch')}} プロパティは `true` を返します。
+> [!NOTE]
+> 入力データがメールアドレスでない場合、{{cssxref(':invalid')}} 擬似クラスがマッチして、{{domxref('validityState.typeMismatch')}} プロパティは `true` を返します。
 
 ## 検索フィールド
 
@@ -117,7 +120,8 @@ URL を入力するための特殊な型のフィールドは、 `url` の値を
 
 ![Android 用 Firefox の URL キーボードの例で、既定でスラッシュが表示されています。](fx-android-url-type-keyboard.jpg)
 
-> **メモ:** URL が正しい形式であっても、それが必ずしも実際存在する場所を参照しているとは限りません。
+> [!NOTE]
+> URL が正しい形式であっても、それが必ずしも実際存在する場所を参照しているとは限りません。
 
 ## 数値フィールド
 
@@ -191,7 +195,8 @@ price.addEventListener("input", () => {
 
 ここでは `range` 入力と `output` を 2 つの変数に保存しています。次に `output` の [`textContent`](/ja/docs/Web/API/Node/textContent) を入力の `value` ですぐにセットします。最後に、イベントリスナーをセットして、range スライダーが移動するといつも、`output` の `textContent` を新しい値に更新します。
 
-> **メモ:** CSS Tricks に、このテーマに応じた素晴らしいチュートリアルがあります。 [The Output Element](https://css-tricks.com/the-output-element/) です。
+> [!NOTE]
+> CSS Tricks に、このテーマに応じた素晴らしいチュートリアルがあります。 [The Output Element](https://css-tricks.com/the-output-element/) です。
 
 ## 日付と時刻ピッカー
 
diff --git a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.md b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.md
index 45e3331fe5a2c0..4083b324d2169c 100644
--- a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.md
+++ b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.md
@@ -178,7 +178,8 @@ Modernizr.load({
 
 Modernizr チームは[すばらしいポリフィルのリスト](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)を管理しています。必要なポリフィルを選びましょう。
 
-> **メモ:** Modernizr は、控えめな JavaScript や グレイスフルでグラデーションのテクニックに取り組むことを支援するためのすばらしい機能を搭載しています。[Modernizr のドキュメント](https://modernizr.com/docs/)をご覧ください。
+> [!NOTE]
+> Modernizr は、控えめな JavaScript や グレイスフルでグラデーションのテクニックに取り組むことを支援するためのすばらしい機能を搭載しています。[Modernizr のドキュメント](https://modernizr.com/docs/)をご覧ください。
 
 ### パフォーマンスに注意を払う
 
diff --git a/files/ja/learn/forms/index.md b/files/ja/learn/forms/index.md
index 0029ddbc60e41e..cfd983656cedb7 100644
--- a/files/ja/learn/forms/index.md
+++ b/files/ja/learn/forms/index.md
@@ -17,7 +17,8 @@ l10n:
 
 上記のテキストは、なぜ私たちがウェブフォームを HTML、CSS、JavaScript のトピックに混ぜるのではなく、独立したモジュールにしたかを示す良い指標です。フォーム要素は他のほとんどの HTML 要素よりも複雑であり、またフォーム要素を最大限に活用するためには、関連する CSS と JavaScript のテクニックを密接に組み合わせる必要があります。
 
-> **メモ:** 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、（大半の）コード例を [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったオンラインコーディングプログラムで試すことができます。
+> [!NOTE]
+> 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、（大半の）コード例を [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったオンラインコーディングプログラムで試すことができます。
 
 ## 導入ガイド
 
diff --git a/files/ja/learn/forms/other_form_controls/index.md b/files/ja/learn/forms/other_form_controls/index.md
index 0f7e2771502732..8f3a8048315949 100644
--- a/files/ja/learn/forms/other_form_controls/index.md
+++ b/files/ja/learn/forms/other_form_controls/index.md
@@ -53,7 +53,8 @@ l10n:
 
 ![Mac OSX の Firefox 71 と Safari 13、 Windows 10 の Edge 18、Yandex 14、Firefox、Chrome で、既定、フォーカス中、無効状態の 'textarea' 要素を示しています。](textarea_basic.png)
 
-> **メモ:** 多少面白いテキストエリアの使用例は、このシリーズの最初の記事の[例](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html) が見つかります ([ソースコードも見てください](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html))。
+> [!NOTE]
+> 多少面白いテキストエリアの使用例は、このシリーズの最初の記事の[例](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html) が見つかります ([ソースコードも見てください](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html))。
 
 ### 複数行レンダリングの制御
 
@@ -82,7 +83,8 @@ l10n:
 
 ドロップダウンコントロールは、ユーザーがさまざまな選択肢から選択できるようにすることを、ユーザーインターフェイスのスペースをあまり取らずに実現するシンプルな方法です。HTML には、**選択ボックス**と**自動補完ボックス**という 2 種類のドロップダウンコントロールがあります。どちらの場合も相互作用は同じです。コントロールを有効にすると、ブラウザーにはユーザーが選択できる値のリストが表示されます。
 
-> **メモ:** すべてのドロップダウンボックスの例は、GitHub の [drop-down-content.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/drop-down-content.html)にあります ([ライブでもご覧ください](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html))。
+> [!NOTE]
+> すべてのドロップダウンボックスの例は、GitHub の [drop-down-content.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/drop-down-content.html)にあります ([ライブでもご覧ください](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html))。
 
 ### 選択ボックス
 
@@ -163,7 +165,8 @@ l10n:
 
 {{EmbedLiveSample("Multiple_choice_select_box", 120, 120)}}
 
-> **メモ:** 複数選択可能な選択ボックスの場合、選択ボックスはドロップダウンコンテンツとして値を表示しないことに気づくでしょう - 代わりに、すべての値がリストに一度に表示され、選択肢の [`size`](/ja/docs/Web/HTML/Attributes/size)属性はウィジェットの高さを決定します。
+> [!NOTE]
+> 複数選択可能な選択ボックスの場合、選択ボックスはドロップダウンコンテンツとして値を表示しないことに気づくでしょう - 代わりに、すべての値がリストに一度に表示され、選択肢の [`size`](/ja/docs/Web/HTML/Attributes/size)属性はウィジェットの高さを決定します。
 
 > **メモ:** {{HTMLElement("select")}} 要素に対応しているすべてのブラウザーは、 [`multiple`](/ja/docs/Web/HTML/Element/select#multiple) 属性にも対応しています。
 
@@ -243,7 +246,8 @@ l10n:
 
 このほかにも、これまで述べてきたような目立つものではありませんが、状況によっては有用なフォーム機能がいくつかありますので、簡単にご紹介しておきましょう。
 
-> **メモ:** この節の例は GitHub 上の [other-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/other-examples.html) にあります（[ライブでも確認してください](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)）。
+> [!NOTE]
+> この節の例は GitHub 上の [other-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/other-examples.html) にあります（[ライブでも確認してください](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)）。
 
 ### メーターとプログレスバー
 
diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.md b/files/ja/learn/forms/sending_and_retrieving_form_data/index.md
index 6d3c56006463fe..81ede4fc4b7cde 100644
--- a/files/ja/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.md
@@ -42,7 +42,8 @@ l10n:
 
 クライアント側において、HTML フォームはサーバーへデータを送信する HTTP リクエストを組み立てるのための、便利でユーザーに使いやすい手段でしかありません。フォームによって、ユーザーが HTTP リクエストで渡す情報を提供することができるようになります。
 
-> **メモ:** どのようにクライアント/サーバー構成が動作するかについてもっと知りたい場合は、[サーバーサイドウェブサイトプログラミング入門](/ja/docs/Learn/Server-side/First_steps)モジュールをお読みください。
+> [!NOTE]
+> どのようにクライアント/サーバー構成が動作するかについてもっと知りたい場合は、[サーバーサイドウェブサイトプログラミング入門](/ja/docs/Learn/Server-side/First_steps)モジュールをお読みください。
 
 ## クライアント側: データ送信方法の定義
 
@@ -70,7 +71,8 @@ l10n:
 <form>…</form>
 ```
 
-> **メモ:** HTTPS (secure HTTP) プロトコルを使用して URL を指定することができます。このようにすると、フォーム自体が HTTP でアクセスされる安全ではないページで提供される場合でも、データはリクエストの残りの部分とともに暗号化されます。一方、フォームが安全なページ提供されていても、[`action`](/ja/docs/Web/HTML/Element/form#action) 属性で安全ではない HTTP の URL を指定すると、どのブラウザーでもデータを送信する際にユーザーに対してセキュリティの警告を表示します。これは、データが暗号化されないためです。
+> [!NOTE]
+> HTTPS (secure HTTP) プロトコルを使用して URL を指定することができます。このようにすると、フォーム自体が HTTP でアクセスされる安全ではないページで提供される場合でも、データはリクエストの残りの部分とともに暗号化されます。一方、フォームが安全なページ提供されていても、[`action`](/ja/docs/Web/HTML/Element/form#action) 属性で安全ではない HTTP の URL を指定すると、どのブラウザーでもデータを送信する際にユーザーに対してセキュリティの警告を表示します。これは、データが暗号化されないためです。
 
 非ファイル型のフォームコントロールの名前/値は&記号で結合された `name=value` ペアでサーバーに送られます。`action` の値は、サーバー側の検証を含め入力データを扱うサーバーのファイルです。サーバーは応答して、一般的にはデータを処理して `action` 属性で定義された URL を読み込み、新しいページの読み込み (または `action` が同じページを指している場合は既存ページのリフレッシュ)を引き起こします。
 
@@ -120,7 +122,8 @@ GET /?say=Hi&to=Mom HTTP/2.0
 Host: foo.com
 ```
 
-> **メモ:** この例は GitHub にあります。— [get-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/get-method.html) を参照してください （[ライブはこちら](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)）.
+> [!NOTE]
+> この例は GitHub にあります。— [get-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/get-method.html) を参照してください （[ライブはこちら](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)）.
 
 > **メモ:** `action` の URL スキームが `file:` などのクエリーを処理しないものであった場合は、データは追加されません。
 
@@ -159,7 +162,8 @@ say=Hi&to=Mom
 
 `Content-Length` ヘッダーは本文の長さを、また `Content-Type` ヘッダーはサーバーに送信するリソースの種類を表します。これらのヘッダーについて少し説明しましょう。
 
-> **メモ:** この例は GitHub で見つけることができます。— [post-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/post-method.html) を参照してください ([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html))。
+> [!NOTE]
+> この例は GitHub で見つけることができます。— [post-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/post-method.html) を参照してください ([ライブ版も見てください](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html))。
 
 > **メモ:** `action` の URL スキームが `data:` などのリクエスト本体を処理できないものであった場合は、代わりに `GET` メソッドが使用されます。
 
@@ -205,7 +209,8 @@ say=Hi&to=Mom
 
 ![それ以外の空白のウェブページに "hi mom" と表示された場合、 POST メソッドでフォームデータを PHP ファイルに送信した後のレスポンスとして受け取ったデータ](php-result.png)
 
-> **メモ:** この例はブラウザーにローカルに読み込んだ時には動作しません。— ブラウザーは PHP コードを解釈できないので、フォームがブラウザーに送信されると、PHP ファイルをダウンロードしようとするでしょう。動作させるためには、この例を何らかの PHP サーバー経由で実行する必要があります。ローカルの PHP のテストには、[MAMP](https://www.mamp.info/en/downloads/) (Mac および Windows) や [AMPPS](https://ampps.com/download) (Mac, Windows, Linux) がいいでしょう。
+> [!NOTE]
+> この例はブラウザーにローカルに読み込んだ時には動作しません。— ブラウザーは PHP コードを解釈できないので、フォームがブラウザーに送信されると、PHP ファイルをダウンロードしようとするでしょう。動作させるためには、この例を何らかの PHP サーバー経由で実行する必要があります。ローカルの PHP のテストには、[MAMP](https://www.mamp.info/en/downloads/) (Mac および Windows) や [AMPPS](https://ampps.com/download) (Mac, Windows, Linux) がいいでしょう。
 >
 > なお、MAMP を使って MAMP Pro がない (または MAMP Pro デモトライアルの有効期限が切れた) 場合、動作させるのにトラブルが起こるかもしれません。再び動作させるには MAMP アプリを閉じて、_MAMP_ > _Preferences_ > *PHP*メニューから "Standard Version:" を "7.2.x" (x はあなたがどのバージョンをインストールしたかによります)にするといいことがわかっています。
 
@@ -235,7 +240,8 @@ if __name__ == "__main__":
 - [form.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/templates/form.html): 以前に [POST メソッド](#post_メソッド)の節で見たフォームと同じですが、`action` が `\{{ url_for('hello') }}` に設定されています (これは [Jinja](https://jinja.palletsprojects.com) テンプレートで、基本的に HTML ですが、波括弧の中にウェブサーバーで実行されている Python のコードの呼び出しを含めることができます。`url_for('hello')` は基本的に、「フォームが送信されたら `/hello` にリダイレクトしてください」と言っています。)
 - [greeting.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/templates/greeting.html): このテンプレートは、表示時に渡された 2 つの小さいデータを表示する行だけを含みます。`/hello` の URL が呼び出されるときに実行される、前述の `hello()` 関数によって行われます。
 
-> **メモ:** 繰り返しますが、このコードはブラウザーに直接読み込もうとしても動作しません。Python は PHP とは若干異なる動作をします。— ローカルでこのコードを実行するには、[Python/PIP をインストール](/ja/docs/Learn/Server-side/Django/development_environment#python_3_のインストール)する必要があり、それから `pip3 install flask` を使用して Flask をインストールしてください。この時点で `python3 python-example.py` を実行し、ブラウザーで `localhost:5042` に移動することで実行することができるでしょう。
+> [!NOTE]
+> 繰り返しますが、このコードはブラウザーに直接読み込もうとしても動作しません。Python は PHP とは若干異なる動作をします。— ローカルでこのコードを実行するには、[Python/PIP をインストール](/ja/docs/Learn/Server-side/Django/development_environment#python_3_のインストール)する必要があり、それから `pip3 install flask` を使用して Flask をインストールしてください。この時点で `python3 python-example.py` を実行し、ブラウザーで `localhost:5042` に移動することで実行することができるでしょう。
 
 ### その他の言語やフレームワーク
 
@@ -262,7 +268,8 @@ if __name__ == "__main__":
 
 言うまでもなく、これらのフレームワークを使用したとしても、フォームでの作業が必ずしも*簡単に*なるとは限りません。しかし、すべての機能を自分で 1 から書こうとするよりずっと簡単で、また多くの時間を節約できるでしょう。
 
-> **メモ:** サーバー側言語やフレームワークまで説明することはこの記事の範囲を超えます。上記のリンクが参考になりますので、学習してみてください。
+> [!NOTE]
+> サーバー側言語やフレームワークまで説明することはこの記事の範囲を超えます。上記のリンクが参考になりますので、学習してみてください。
 
 ## 特別な場合: ファイル送信
 
@@ -292,7 +299,8 @@ if __name__ == "__main__":
 </form>
 ```
 
-> **メモ:** 多くのサーバーは悪用を防ぐために、ファイルや HTTP リクエストの長さを制限しています。
+> [!NOTE]
+> 多くのサーバーは悪用を防ぐために、ファイルや HTTP リクエストの長さを制限しています。
 
 ## 一般的なセキュリティへの配慮
 
diff --git a/files/ja/learn/forms/sending_forms_through_javascript/index.md b/files/ja/learn/forms/sending_forms_through_javascript/index.md
index 5526a5185a57fd..4bd8e6ec495bf8 100644
--- a/files/ja/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/ja/learn/forms/sending_forms_through_javascript/index.md
@@ -105,7 +105,8 @@ btn.addEventListener("click", () => {
 
 {{EmbedLiveSample("Building_an_XMLHttpRequest_manually", "100%", 50)}}
 
-> **メモ:** この {{domxref("XMLHttpRequest")}} の使用は、第三者のウェブサイトにデータを送信したい場合にも、同一オリジンポリシーの対象となります。オリジン間リクエストの場合は、 [CORS と HTTP のアクセス制御](/ja/docs/Web/HTTP/CORS)が必要です。
+> [!NOTE]
+> この {{domxref("XMLHttpRequest")}} の使用は、第三者のウェブサイトにデータを送信したい場合にも、同一オリジンポリシーの対象となります。オリジン間リクエストの場合は、 [CORS と HTTP のアクセス制御](/ja/docs/Web/HTTP/CORS)が必要です。
 
 ### XMLHttpRequest と FormData オブジェクトの使用
 
diff --git a/files/ja/learn/forms/styling_web_forms/index.md b/files/ja/learn/forms/styling_web_forms/index.md
index 7dfd7308147852..ec176b19791f82 100644
--- a/files/ja/learn/forms/styling_web_forms/index.md
+++ b/files/ja/learn/forms/styling_web_forms/index.md
@@ -67,7 +67,8 @@ CSS が利用できるようになっても、ユーザーがそれぞれのブ
 
 [フォームへの高度なスタイル設定](/ja/docs/Learn/Forms/Advanced_form_styling)および[カスタムウィジェットの作成方法](/ja/docs/Learn/Forms/How_to_build_custom_form_controls)の記事で、これらのスタイル設定の方法を説明します。
 
-> **メモ:** フォームコントロールの内部コンポーネントにスタイル設定するプロプライエタリな CSS 擬似要素、例えば {{cssxref('::-moz-range-track')}} がありますが、これはブラウザー同士で整合していないので、これに頼るべきではありません。これについては後程でも触れます。
+> [!NOTE]
+> フォームコントロールの内部コンポーネントにスタイル設定するプロプライエタリな CSS 擬似要素、例えば {{cssxref('::-moz-range-track')}} がありますが、これはブラウザー同士で整合していないので、これに頼るべきではありません。これについては後程でも触れます。
 
 ## 単純なフォームウィジェットのスタイル設定
 
@@ -367,7 +368,8 @@ button:focus {
 
 ![上記のようにスタイル設定と微調整を行った後の、フォームの最終的な外観とレイアウト](updated-form-screenshot.jpg)
 
-> **メモ:** 例が期待どおり動かず、私たちのバージョンを確認したい場合は、 GitHub を参照してください。[ライブ版](https://mdn.github.io/learning-area/html/forms/postcard-example/)を見てください（[ソースコード](https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example)も見てください）。
+> [!NOTE]
+> 例が期待どおり動かず、私たちのバージョンを確認したい場合は、 GitHub を参照してください。[ライブ版](https://mdn.github.io/learning-area/html/forms/postcard-example/)を見てください（[ソースコード](https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example)も見てください）。
 
 ## スキルテスト
 
diff --git a/files/ja/learn/forms/test_your_skills_colon__advanced_styling/index.md b/files/ja/learn/forms/test_your_skills_colon__advanced_styling/index.md
index de1283736eeefa..bb85e19267977d 100644
--- a/files/ja/learn/forms/test_your_skills_colon__advanced_styling/index.md
+++ b/files/ja/learn/forms/test_your_skills_colon__advanced_styling/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[フォームへの高度なスタイル設定](/ja/docs/Learn/Forms/Advanced_form_styling)および [UI 擬似クラス](/ja/docs/Learn/Forms/UI_pseudo-classes)の記事を理解したかどうかを評価することです。.
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -30,7 +31,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/advanced-styling/advanced-styling1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/advanced-styling/advanced-styling1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -49,7 +50,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/advanced-styling/advanced-styling2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/advanced-styling/advanced-styling2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -62,6 +63,6 @@ l10n:
 1. まずすべて、どの入力が入力されなければならないかを視覚的に示すために、固有のスタイル設定を提供してください。
 2. 2 つ目は、各入力に指定されたデータが有効かどうかを視覚的に示す有益なインジケーターを提供することです。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/advanced-styling/advanced-styling3-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/forms/test_your_skills_colon__basic_controls/index.md b/files/ja/learn/forms/test_your_skills_colon__basic_controls/index.md
index 41a39d25d208f6..808ac80a1e205a 100644
--- a/files/ja/learn/forms/test_your_skills_colon__basic_controls/index.md
+++ b/files/ja/learn/forms/test_your_skills_colon__basic_controls/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[基本的なネイティブフォームコントロール](/ja/docs/Learn/Forms/Basic_native_form_controls)の記事を理解したかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/basic-controls/basic-controls1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/basic-controls/basic-controls1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -42,7 +43,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/basic-controls/basic-controls2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/basic-controls/basic-controls2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -58,6 +59,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/basic-controls/basic-controls3.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/basic-controls/basic-controls3-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/forms/test_your_skills_colon__form_structure/index.md b/files/ja/learn/forms/test_your_skills_colon__form_structure/index.md
index f16040704847ef..1ba8c9e3c0a501 100644
--- a/files/ja/learn/forms/test_your_skills_colon__form_structure/index.md
+++ b/files/ja/learn/forms/test_your_skills_colon__form_structure/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[フォームの構築方法](/ja/docs/Learn/Forms/How_to_structure_a_web_form)の記事を理解したかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -23,6 +24,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/form-structure/form-structure1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/form-structure/form-structure1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/forms/test_your_skills_colon__form_validation/index.md b/files/ja/learn/forms/test_your_skills_colon__form_validation/index.md
index cded4fd88a8a58..9c4f7692392a2d 100644
--- a/files/ja/learn/forms/test_your_skills_colon__form_validation/index.md
+++ b/files/ja/learn/forms/test_your_skills_colon__form_validation/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[Client-side form validation](/ja/docs/Learn/Forms/Form_validation)の記事を理解したかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -23,7 +24,7 @@ l10n:
 
 フォームを送信してみてください。上記の制約が続くまで送信されず、適切なエラーメッセージが表示されるはずです。フォームフィールドが有効か不正かを表示させる単純な CSS を追加することを検討してください。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/form-validation/form-validation1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -35,11 +36,12 @@ l10n:
 2. ユーザーのメールアドレスはすべて、1 文字以上の英字（小文字または大文字）または数字の後に "@bigcorp.eu" が続きます。
 3. 電話番号フィールドに長さの検証が存在する場合は、それを除去し、10 桁を受け入れられるように設定します。10 桁を連続して入力するか、3 桁、3 桁、4 桁のパターンをスペース、ダッシュ、ドットのいずれかで区切って入力してください。
 
-> **メモ:** 正規表現は実に難しいものですが、絶望しないでください。助けを求めることは恥ずかしいことではありません。[正規表現リファレンス](/ja/docs/Web/JavaScript/Guide/Regular_expressions)や、[Stack Overflow](https://stackoverflow.com/) で検索すれば、これらの質問に答えるのに必要なものはすべて見つかります。
+> [!NOTE]
+> 正規表現は実に難しいものですが、絶望しないでください。助けを求めることは恥ずかしいことではありません。[正規表現リファレンス](/ja/docs/Web/JavaScript/Guide/Regular_expressions)や、[Stack Overflow](https://stackoverflow.com/) で検索すれば、これらの質問に答えるのに必要なものはすべて見つかります。
 
 この場合も、フォームフィールドが有効か無効かを表示させる単純な CSS を追加することを検討するとよいでしょう。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/form-validation/form-validation2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -50,6 +52,6 @@ l10n:
 1. 入力必須とし、最小 10 文字とします。
 2. 入力された値がメールアドレスであるかどうか、十分な長さであるかどうかを調べるイベントリスナーを追加してください。メールアドレスに見えないか、短すぎる場合は、適切なカスタムエラーメッセージをユーザーに提供してください。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/form-validation/form-validation3-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/forms/test_your_skills_colon__html5_controls/index.md b/files/ja/learn/forms/test_your_skills_colon__html5_controls/index.md
index 9a0dbf0831f18d..65086858f81a36 100644
--- a/files/ja/learn/forms/test_your_skills_colon__html5_controls/index.md
+++ b/files/ja/learn/forms/test_your_skills_colon__html5_controls/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが [HTML5 の入力型](/ja/docs/Learn/Forms/HTML5_input_types)の記事を理解したかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -26,7 +27,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/html5-controls/html5-controls1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -42,6 +43,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/html5-controls/html5-controls2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/forms/test_your_skills_colon__other_controls/index.md b/files/ja/learn/forms/test_your_skills_colon__other_controls/index.md
index dfd59c8f0a03e0..7443d5608c18b4 100644
--- a/files/ja/learn/forms/test_your_skills_colon__other_controls/index.md
+++ b/files/ja/learn/forms/test_your_skills_colon__other_controls/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[Other form controls](/ja/docs/Learn/Forms/Other_form_controls)の記事を理解したかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -26,7 +27,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls1.html", '100%', 500)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/other-controls/other-controls1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -42,7 +43,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls2.html", '100%', 500)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/other-controls/other-controls2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -58,6 +59,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls3.html", '100%', 500)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/other-controls/other-controls3-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/forms/test_your_skills_colon__styling_basics/index.md b/files/ja/learn/forms/test_your_skills_colon__styling_basics/index.md
index 30d84b193d9819..7f911c80a95dee 100644
--- a/files/ja/learn/forms/test_your_skills_colon__styling_basics/index.md
+++ b/files/ja/learn/forms/test_your_skills_colon__styling_basics/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[ウェブフォームへのスタイル設定](/ja/docs/Learn/Forms/Styling_web_forms)の記事を理解したかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -21,6 +22,6 @@ l10n:
 2. その上で、入力フィールドとボタンに一貫性のある素敵なスタイル設定を追加してください。
 3. 何らかのレイアウト技術を使用して、入力フィールドとラベルがきれいに並ぶようにします。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の開始点をダウンロード](https://github.com/mdn/learning-area/blob/main/html/forms/tasks/styling-basics/styling-basics1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.md b/files/ja/learn/forms/ui_pseudo-classes/index.md
index 0f8d1f06cc1413..3d32913085f153 100644
--- a/files/ja/learn/forms/ui_pseudo-classes/index.md
+++ b/files/ja/learn/forms/ui_pseudo-classes/index.md
@@ -58,7 +58,8 @@ l10n:
 
 他にもたくさんありますが、上に挙げたものが明らかに最も有用です。中にはとても特殊でニッチな問題を解決することを目的としたものもあります。上に挙げた UI 擬似クラスはブラウザーの対応が充実していますが、もちろん、対象とするユーザーに対して確実に動作するよう、フォームの実装を慎重にテストする必要があります。
 
-> **メモ:** ここで説明する多くの擬似クラスは、検証状態（データが有効か無効か）に基づくフォームコントロールのスタイル設定に関係しています。検証制約の設定と操作については、次の記事「[クライアントサイドのフォーム検証](/ja/docs/Learn/Forms/Form_validation)」で詳しく説明しますが、今は混乱しないようにフォーム検証に関して単純にしておきます。
+> [!NOTE]
+> ここで説明する多くの擬似クラスは、検証状態（データが有効か無効か）に基づくフォームコントロールのスタイル設定に関係しています。検証制約の設定と操作については、次の記事「[クライアントサイドのフォーム検証](/ja/docs/Learn/Forms/Form_validation)」で詳しく説明しますが、今は混乱しないようにフォーム検証に関して単純にしておきます。
 
 ## 入力が必須か否かによるスタイル設定
 
@@ -113,9 +114,11 @@ input:optional {
 
 次の節では、 `:required` を使用して必須項目を示すより良い例を見ていきます。これは、生成コンテンツを使用することについても掘り下げます。
 
-> **メモ:** おそらく `:optional` 擬似クラスを使用することはあまりないでしょう。フォームコントロールは既定でオプションなので、オプションのスタイル設定を既定値で行い、必要なコントロールのスタイルを上から追加すればよいのです。
+> [!NOTE]
+> おそらく `:optional` 擬似クラスを使用することはあまりないでしょう。フォームコントロールは既定でオプションなので、オプションのスタイル設定を既定値で行い、必要なコントロールのスタイルを上から追加すればよいのです。
 
-> **メモ:** 同じ名前のラジオボタン群の中の 1 つのラジオボタンに `required` 属性が設定されている場合、すべてのラジオボタンは 1 つが選択されるまで無効ですが、属性が割り当てられたものだけが実際に {{cssxref(':required')}} に一致することになります。
+> [!NOTE]
+> 同じ名前のラジオボタン群の中の 1 つのラジオボタンに `required` 属性が設定されている場合、すべてのラジオボタンは 1 つが選択されるまで無効ですが、属性が割り当てられたものだけが実際に {{cssxref(':required')}} に一致することになります。
 
 ## 擬似クラスでコンテンツを生成する
 
@@ -262,7 +265,8 @@ input:valid + span::before {
 
 先ほどと同様に、`<span>` を `position: relative` に設定し、生成されるコンテンツを相対的に配置できるようにします。そして、フォームのデータが有効か無効かによって、それぞれ緑色のチェックと赤色のクロスで、異なる生成コンテンツを絶対に配置するようにします。無効なデータに少し緊急性を追加するために、無効なときに入力フィールドに太い赤のボーダーを指定しました。
 
-> **メモ:** ここで `::before` を使用してラベルを追加したのは、 `::after` を既に "required" ラベルのために使用していたからです。
+> [!NOTE]
+> ここで `::before` を使用してラベルを追加したのは、 `::after` を既に "required" ラベルのために使用していたからです。
 
 次のもので試してみてください。
 
@@ -274,7 +278,8 @@ input:valid + span::before {
 
 上で触れたように、他にも2つの関連する擬似クラスがあります。 {{cssxref(":in-range")}} と {{cssxref(":out-of-range")}} です。これらは、 [`min`](/ja/docs/Web/HTML/Element/input#min) と [`max`](/ja/docs/Web/HTML/Element/input#max) によって範囲指定された数値入力フィールドに対して、そのデータがそれぞれ指定した範囲内または範囲外にあるときに一致させます。
 
-> **メモ:** 数値の入力型とは、 `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` のことです。
+> [!NOTE]
+> 数値の入力型とは、 `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` のことです。
 
 注目すべきは、データが範囲内にある入力フィールドは `:valid` 擬似クラスに一致し、データが範囲外である入力フィールドは `:invalid` 擬似クラスに一致することです。では、なぜこの 2 つが存在するのでしょうか？実に意味論上の問題です。範囲外であるということは無効であることを伝えるためのより具体的なものなので、入力が範囲外であるというと、単に「無効」と言うよりユーザーに役立つ可能性があります。両方を提供することもできます。
 
@@ -328,7 +333,8 @@ input:out-of-range + span::after {
 
 これはとてもうまく動作します。最初にページを読み込むと、赤いバツ印と枠線とともに "Required" が表示されます。有効な年齢（12 ～ 120 歳の範囲）を入力すると、入力フィールドは有効になります。しかし、年齢を範囲外の値に変更すると、 "Required" の代わりに "Outside allowable value range" というメッセージが表示されます。
 
-> **メモ:** 無効な値や範囲外の値を入力するには、実際にフォームにフォーカスを当てて、キーボードを使用して入力する必要があります。スピナーボタンでは、許容範囲外の値まで増加/減少させることはできません。
+> [!NOTE]
+> 無効な値や範囲外の値を入力するには、実際にフォームにフォーカスを当てて、キーボードを使用して入力する必要があります。スピナーボタンでは、許容範囲外の値まで増加/減少させることはできません。
 
 ## 有効/無効や読み取り専用/読み書き可能の入力フィールドをスタイル設定する
 
@@ -477,7 +483,8 @@ textarea:read-write {
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}
 
-> **メモ:** また、 `:enabled` と `:read-write` は、入力要素の既定の状態を記述する擬似クラスで、おそらくほとんど使用することはないでしょう。
+> [!NOTE]
+> また、 `:enabled` と `:read-write` は、入力要素の既定の状態を記述する擬似クラスで、おそらくほとんど使用することはないでしょう。
 
 ## ラジオボタンとチェックボックスの状態 — チェック済み、既定、不定
 
@@ -567,7 +574,8 @@ input:default ~ span::after {
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-default.html", '100%', 200)}}
 
-> **メモ:** この例は GitHub の [radios-checked-default.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html) でもライブで見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-default.html) も参照してください）。
+> [!NOTE]
+> この例は GitHub の [radios-checked-default.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html) でもライブで見ることができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-default.html) も参照してください）。
 
 `:indeterminate` の例では、既定値で選択されたラジオボタンがありません。これは重要なことで、もしあれば、スタイル設定する不定値の状態は存在しません。不確定なラジオボタンには以下の CSS でスタイルを設定しています。
 
@@ -594,7 +602,8 @@ input[type="radio"]:indeterminate {
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html", '100%', 200)}}
 
-> **メモ:** この例は GitHub の [radios-checked-indeterminate.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html) でライブで見ることもできます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-indeterminate.html) も参照してください）。
+> [!NOTE]
+> この例は GitHub の [radios-checked-indeterminate.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html) でライブで見ることもできます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-indeterminate.html) も参照してください）。
 
 > **メモ:** [`indeterminate` 状態を含む興味深い例](/ja/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) が [`<input type="checkbox">`](/ja/docs/Web/HTML/Element/input/checkbox) リファレンスページに掲載されていますので、参考にしてください。
 
diff --git a/files/ja/learn/forms/user_input_methods/index.md b/files/ja/learn/forms/user_input_methods/index.md
index 77b4b6ab42065c..b44f65749e6cc4 100644
--- a/files/ja/learn/forms/user_input_methods/index.md
+++ b/files/ja/learn/forms/user_input_methods/index.md
@@ -37,7 +37,8 @@ window.addEventListener("keyup", handleKeyUp, true);
 
 `handleKeyDown` と `handleKeyUp` は、`keydown` と `keyup` イベントについての制御を実装する関数です。
 
-> **メモ:** キーボードイベントについて、より知りたい人は[イベントリファレンス](/ja/docs/Web/Reference/Events) と {{domxref("KeyboardEvent")}} ガイドをご確認ください。
+> [!NOTE]
+> キーボードイベントについて、より知りたい人は[イベントリファレンス](/ja/docs/Web/Reference/Events) と {{domxref("KeyboardEvent")}} ガイドをご確認ください。
 
 #### マウス
 
@@ -60,13 +61,15 @@ element.addEventListener("touchmove", handleMove, false);
 
 ここでの `element` は、あなたがタッチイベントを登録したい DOM 要素です。
 
-> **メモ:** タッチイベントでできることについての更なる情報は、[タッチイベントガイド](/ja/docs/Web/API/Touch_events)を読んでください。
+> [!NOTE]
+> タッチイベントでできることについての更なる情報は、[タッチイベントガイド](/ja/docs/Web/API/Touch_events)を読んでください。
 
 #### ポインターイベント
 
 マウス、指でのタッチ、ペン入力など複数の入力形式が内蔵されているデバイスを扱う時、これら全ての異なる制御の仕組みを機能させるソリューションを開発することは難しいかもしれません。[Pointer Events](http://www.w3.org/TR/pointerevents/) は、デバイス毎の扱いを標準化することにより、開発者がデバイスを横断してイベントを管理することをより簡単にするのに役立ちます。マウスカーソル、ペン、タッチ（マルチタッチを含む）、またはその他のポインティング入力デバイスによって、ポインターはスクリーン上のあらゆる接点となることができます。汎用的なポインター入力を扱うためのイベントは、`pointerdown`、`pointermove`、`pointerup`、`pointerover`、`pointerout` などのマウス用のイベントとよく似ています。
 
-> **メモ:** Pointer Events はまだ広くサポートされていませんが、[pointer.js polyfill](https://github.com/mozilla/pointer.js) は Mozilla Github で利用可能です。
+> [!NOTE]
+> Pointer Events はまだ広くサポートされていませんが、[pointer.js polyfill](https://github.com/mozilla/pointer.js) は Mozilla Github で利用可能です。
 
 ### コントロールの実装
 
@@ -80,7 +83,8 @@ element.addEventListener("touchmove", handleMove, false);
 element.requestPointerLock();
 ```
 
-> **メモ:** 全てのチュートリアルとリファレンスは、[Pointer Lock API](/ja/docs/Web/API/Pointer_Lock_API) のページを読んでください。
+> [!NOTE]
+> 全てのチュートリアルとリファレンスは、[Pointer Lock API](/ja/docs/Web/API/Pointer_Lock_API) のページを読んでください。
 
 #### 画面の向き
 
@@ -88,7 +92,8 @@ element.requestPointerLock();
 
 画面の向きのデータは {{domxref("screen.orientation")}} 属性、または [`orientation`](/ja/docs/Web/CSS/@media/orientation) メディア特性を通して取得することができます。`screen.orientation` が変化した時、{{domxref("screen.orientationchange")}} イベントがスクリーンオブジェクトで発火されます。{{domxref("screen.lockOrientation")}} メソッドを呼ぶことで画面の向きを固定することができます。また、{{domxref("screen.unlockOrientation")}} メソッドはそれまで設定されていた画面のロックを全て解除します。
 
-> **メモ:** Screen Orientation API についてのより多くの情報は[画面の向きの管理](/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)で確認することができます。
+> [!NOTE]
+> Screen Orientation API についてのより多くの情報は[画面の向きの管理](/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)で確認することができます。
 
 #### 全画面
 
@@ -107,7 +112,8 @@ if (elem.requestFullscreen) {
 }
 ```
 
-> **メモ:** 全画面の機能性をあなたのアプリケーションに追加することについてもっと知るには、私たちの[全画面モードの使用](/ja/docs/Web/API/Fullscreen_API)についてのドキュメントを読んでください。
+> [!NOTE]
+> 全画面の機能性をあなたのアプリケーションに追加することについてもっと知るには、私たちの[全画面モードの使用](/ja/docs/Web/API/Fullscreen_API)についてのドキュメントを読んでください。
 
 #### ドラッグ＆ドロップ
 
@@ -138,7 +144,8 @@ if (elem.requestFullscreen) {
 <div contenteditable="true">このテキストは閲覧者が編集することができます。</div>
 ```
 
-> **メモ:** 互換性や例、その他リソースに関する情報は [コンテンツを編集可能にするガイド](/ja/docs/Web/Guide/HTML/Editable_content)で確認することができます。
+> [!NOTE]
+> 互換性や例、その他リソースに関する情報は [コンテンツを編集可能にするガイド](/ja/docs/Web/Guide/HTML/Editable_content)で確認することができます。
 
 ## 例
 
diff --git a/files/ja/learn/forms/your_first_form/index.md b/files/ja/learn/forms/your_first_form/index.md
index b97724f53b686f..4b524c572f7199 100644
--- a/files/ja/learn/forms/your_first_form/index.md
+++ b/files/ja/learn/forms/your_first_form/index.md
@@ -69,7 +69,8 @@ l10n:
 - `action` 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します。
 - `method` 属性は、データを送信するために使用する HTTP メソッド（`get` または `post`）を定義します。
 
-> **メモ:** これらの属性がどのように働くかについて、詳しくは[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data)で説明しています。
+> [!NOTE]
+> これらの属性がどのように働くかについて、詳しくは[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data)で説明しています。
 
 今のところは、上の {{htmlelement("form")}} 要素を HTML の {{htmlelement("body")}} に追加します。
 
@@ -163,7 +164,8 @@ l10n:
 
 フォームの HTML コードの記述ができました。このフォームを保存してブラウザーで見てみてください。今のところ、かなり不格好であることがわかると思います。
 
-> **メモ:** 作成した HTML コードが正しくないと思われる場合は、完成例と比較してみてください — [first-form.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form.html) にあります ([ライブ版も参照](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html))。
+> [!NOTE]
+> 作成した HTML コードが正しくないと思われる場合は、完成例と比較してみてください — [first-form.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form.html) にあります ([ライブ版も参照](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html))。
 
 フォームをきれいにスタイル付けするのは、なかなか難しいものです。フォームのスタイル付けを詳しく教えるのはこの記事の範囲外なので、とりあえず見た目が問題ないように CSS を追加してもらうだけにしておきましょう。
 
@@ -247,7 +249,8 @@ button {
 
 保存して再読み込みすると、フォームがよりきれいになりました。
 
-> **メモ:** GitHub の [first-form-styled.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html) にあります([ライブ版も確認](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html))。
+> [!NOTE]
+> GitHub の [first-form-styled.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html) にあります([ライブ版も確認](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html))。
 
 ## ウェブサーバーへのデータの送信
 
diff --git a/files/ja/learn/getting_started_with_the_web/css_basics/index.md b/files/ja/learn/getting_started_with_the_web/css_basics/index.md
index f6d2883dd35682..c033e8035a50c6 100644
--- a/files/ja/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/ja/learn/getting_started_with_the_web/css_basics/index.md
@@ -164,7 +164,8 @@ CSS の基本をいくつか勉強しましたので、`style.css` ファイル
    }
    ```
 
-   > **メモ:** CSS の `/*` と `*/` の間にあるものは何でも **CSS コメント**になります。ブラウザーはコードをレンダリングするときにこれを無視します。 CSS コメントはコードや論理について役立つメモを書くための方法です。
+   > [!NOTE]
+   > CSS の `/*` と `*/` の間にあるものは何でも **CSS コメント**になります。ブラウザーはコードをレンダリングするときにこれを無視します。 CSS コメントはコードや論理について役立つメモを書くための方法です。
 
 4. 次に、 HTML 本文内にテキストを配置する要素 ({{htmlelement("Heading_Elements", "h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}) のフォントの大きさを設定します。また、見出しを中央揃えにします。最後に、 2 つ目のルールセット (下記) を展開して、行の高さや文字の間隔などの設定を行い、本文のコンテンツを読みやすくしましょう。
 
@@ -281,7 +282,8 @@ img {
 
 {{htmlelement("body")}} は**ブロック**要素であるため、ページの中でスペースを占めます。ブロック要素は、マージンやその他の余白を開ける値を適用することができます。一方、画像は**インライン**要素です。インライン要素にマージンやその他の余白を開ける値を適用することはできません。画像にマージンを適用するには、`display: block;` を使用して画像にブロックレベルの動作を指定する必要があります。
 
-> **メモ:** 上記の手順は、本体に設定されている幅 (600 ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をあふれ、ページの残りの部分にはみ出します。これを修正するには、1) [画像編集ソフト](https://ja.wikipedia.org/wiki/%E3%83%9A%E3%82%A4%E3%83%B3%E3%83%88%E3%82%BD%E3%83%95%E3%83%88)を使用して画像の幅を縮小するか、2) CSS を使用して、 {{cssxref("width")}} プロパティでより小さな値を `<img>` 要素に設定し、画像の大きさを変更します。
+> [!NOTE]
+> 上記の手順は、本体に設定されている幅 (600 ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をあふれ、ページの残りの部分にはみ出します。これを修正するには、1) [画像編集ソフト](https://ja.wikipedia.org/wiki/%E3%83%9A%E3%82%A4%E3%83%B3%E3%83%88%E3%82%BD%E3%83%95%E3%83%88)を使用して画像の幅を縮小するか、2) CSS を使用して、 {{cssxref("width")}} プロパティでより小さな値を `<img>` 要素に設定し、画像の大きさを変更します。
 
 > **メモ:** `display: block;` や、ブロックレベル/インラインの区別がまだ理解できなくても心配しないでください。 CSS の勉強を続けていくうちに意味が分かってくるはずです。さまざまな display の値の違いについて詳しくは、 MDN の [display のリファレンスページ](/ja/docs/Web/CSS/display)を参照してください。
 
diff --git a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.md
index 11c4505c922894..f3c6b665fd3bc6 100644
--- a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -34,7 +34,8 @@ l10n:
 3. **`styles` フォルダー**: このフォルダーには、コンテンツのスタイルを設定するための CSS コード（例えばテキストと背景色の設定など）を入れます。 `styles` というフォルダーを `test-site` のフォルダーの中に作成してください。
 4. **`scripts` フォルダー**: このフォルダーには、サイトに対話機能を追加するために使用されるすべての JavaScript コード（クリックされたときにデータを読み込むボタンなど）が含まれます。 `scripts` というフォルダーを `test-site` のフォルダーの中に作成します。
 
-> **メモ:** Windows では、既定で有効になっている**既知のファイルの種類の拡張子を表示しない**というオプションがあるため、ファイル名の表示に問題が発生することがあります。一般に、 Windows エクスプローラーで **\[フォルダーオプション...]** オプションを選択し、**\[登録されている拡張子は表示しない]** チェックボックスをオフにし、 **\[OK]** をクリックすることで、これをオフにすることができます。お使いの Windows のバージョンに関する詳細な情報については、ウェブで検索してください。
+> [!NOTE]
+> Windows では、既定で有効になっている**既知のファイルの種類の拡張子を表示しない**というオプションがあるため、ファイル名の表示に問題が発生することがあります。一般に、 Windows エクスプローラーで **\[フォルダーオプション...]** オプションを選択し、**\[登録されている拡張子は表示しない]** チェックボックスをオフにし、 **\[OK]** をクリックすることで、これをオフにすることができます。お使いの Windows のバージョンに関する詳細な情報については、ウェブで検索してください。
 
 ## ファイルパス
 
@@ -73,7 +74,8 @@ l10n:
 
 今のところ、これが知る必要があるすべてです。
 
-> **メモ:** Windows のファイルシステムでは、スラッシュ (/) ではなくバックスラッシュまたは￥記号を使用します（例 : `C:\Windows`）。これは HTML では使用できません。Windows でウェブサイトを開発している場合でも、コード内ではスラッシュを使用する必要があります。
+> [!NOTE]
+> Windows のファイルシステムでは、スラッシュ (/) ではなくバックスラッシュまたは￥記号を使用します（例 : `C:\Windows`）。これは HTML では使用できません。Windows でウェブサイトを開発している場合でも、コード内ではスラッシュを使用する必要があります。
 
 ## 他にするべきこと
 
diff --git a/files/ja/learn/getting_started_with_the_web/html_basics/index.md b/files/ja/learn/getting_started_with_the_web/html_basics/index.md
index 16ac1e3e6d62d5..ca6cd1feec037e 100644
--- a/files/ja/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/ja/learn/getting_started_with_the_web/html_basics/index.md
@@ -49,7 +49,8 @@ My cat is very grumpy
 2. 属性名とそれに続く等号
 3. 引用符で囲まれた属性の値
 
-> **メモ:** ASCII のホワイトスペース（または `"` `'` `` ` `` `=` `<` `>` のいずれかの文字）を含まない単純な属性値は引用符を省略することができますが、コードを一貫性のあるものにし、理解を容易にするため、すべての属性値を引用符で囲むことをお勧めします。
+> [!NOTE]
+> ASCII のホワイトスペース（または `"` `'` `` ` `` `=` `<` `>` のいずれかの文字）を含まない単純な属性値は引用符を省略することができますが、コードを一貫性のあるものにし、理解を容易にするため、すべての属性値を引用符で囲むことをお勧めします。
 
 ### 要素の入れ子
 
@@ -126,7 +127,8 @@ alt テキストのキーワードは「説明文」です。 alt テキスト
 
 画像に良い代替文字列を付けてみましょう。
 
-> **メモ:** アクセシビリティについて詳しくは [MDN のアクセシビリティのページ](/ja/docs/Learn/Accessibility)を参照してください。
+> [!NOTE]
+> アクセシビリティについて詳しくは [MDN のアクセシビリティのページ](/ja/docs/Learn/Accessibility)を参照してください。
 
 ## テキストのマークアップ
 
@@ -144,11 +146,13 @@ alt テキストのキーワードは「説明文」です。 alt テキスト
 <h4>孫見出し</h4>
 ```
 
-> **メモ:** HTML の中で `<!--` と `-->` の間にあるものは、すべて **HTML コメント**です。ブラウザーは、コードを表示する際にコメントを無視します。つまり、コメントはページ上では表示されず、コードの中に表示されるだけです。 HTMLコメントは、コードやロジックに関する有用なメモを書き込むためのものです。
+> [!NOTE]
+> HTML の中で `<!--` と `-->` の間にあるものは、すべて **HTML コメント**です。ブラウザーは、コードを表示する際にコメントを無視します。つまり、コメントはページ上では表示されず、コードの中に表示されるだけです。 HTMLコメントは、コードやロジックに関する有用なメモを書き込むためのものです。
 
 それでは、あなたの HTML の {{htmlelement("img")}} 要素の上に適切なタイトルを付けてみましょう。
 
-> **メモ:** 見出しレベル 1 には、暗黙のスタイルがあることがわかりますね。テキストを大きくしたり、太くしたりするために見出し要素を使用しないでください。見出し要素は[アクセシビリティ](/ja/docs/Learn/Accessibility/HTML#テキストコンテンツ)や [SEO などの理由](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure)で使用されているからです。段階を飛ばすことなく、意味のある見出しの並びをページ上に作るようにしてください。
+> [!NOTE]
+> 見出しレベル 1 には、暗黙のスタイルがあることがわかりますね。テキストを大きくしたり、太くしたりするために見出し要素を使用しないでください。見出し要素は[アクセシビリティ](/ja/docs/Learn/Accessibility/HTML#テキストコンテンツ)や [SEO などの理由](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure)で使用されているからです。段階を飛ばすことなく、意味のある見出しの並びをページ上に作るようにしてください。
 
 ### 段落
 
diff --git a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.md b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.md
index ec54e232f8fc82..6a147d5e4c3bc0 100644
--- a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -33,7 +33,8 @@ JavaScript は、最も人気のある現代のウェブ技術のひとつです
 
 しかし、 JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、_"hello world!"_ を表示する例（[基本的なプログラミング例の標準](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program)）を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。
 
-> **警告:** これまでこのコースに沿って進めてきていない場合は、[このサンプルコードをダウンロードして](https://codeload.github.com/mdn/beginner-html-site-styled/zip/refs/heads/gh-pages)作業を進めてください。
+> [!WARNING]
+> これまでこのコースに沿って進めてきていない場合は、[このサンプルコードをダウンロードして](https://codeload.github.com/mdn/beginner-html-site-styled/zip/refs/heads/gh-pages)作業を進めてください。
 
 1. 最初にテストサイトに行き、 `scripts` という名前の新しいフォルダーを作成してください。それから、この scripts フォルダーの中に `main.js` という新しいファイルを作成して保存してください。
 2. `index.html` ファイルの `</body>` 終了タグの直前に新しい行で、以下の新しい要素を追加してください。
@@ -54,7 +55,8 @@ JavaScript は、最も人気のある現代のウェブ技術のひとつです
 
 !["hello world" の見出しが firefox のロゴの上にある](hello-world.png)
 
-> **メモ:** 上記の説明で {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、**ブラウザーがファイルに現れる順番でコードを読み込むからです**。
+> [!NOTE]
+> 上記の説明で {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、**ブラウザーがファイルに現れる順番でコードを読み込むからです**。
 >
 > JavaScript が先に読み込まれ、まだ読み込まれていない HTML に影響を与えることになると、問題が生じる可能性があります。 JavaScript を HTML ページの下部に配置することは、この依存関係に対応する一つの方法です。その他の方法については、[スクリプトの読み込み方針](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#スクリプトの読み込み方針)をご覧ください。
 
@@ -64,13 +66,15 @@ JavaScript を使用して、見出しの文字列が _Hello world!_ に変更
 
 その後、 `myHeading` 変数の {{domxref("Node.textContent", "textContent")}} プロパティ（見出しの内容を表す）の値を _Hello world!_ に設定します。
 
-> **メモ:** 上の例で使用した機能はどちらも[ドキュメントオブジェクトモデル (DOM) API](/ja/docs/Web/API/Document_Object_Model) の一部であり、これを使って文書を操作することができます。
+> [!NOTE]
+> 上の例で使用した機能はどちらも[ドキュメントオブジェクトモデル (DOM) API](/ja/docs/Web/API/Document_Object_Model) の一部であり、これを使って文書を操作することができます。
 
 ## 言語の短期集中コース
 
 どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！
 
-> **警告:** この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 [ブラウザー開発ツールを探る](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を参照してください。
+> [!WARNING]
+> この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 [ブラウザー開発ツールを探る](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を参照してください。
 
 ### 変数
 
@@ -80,11 +84,14 @@ JavaScript を使用して、見出しの文字列が _Hello world!_ に変更
 let myVariable;
 ```
 
-> **メモ:** 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは [Your Guide to Semicolons in JavaScript](https://www.codecademy.com/resources/blog/your-guide-to-semicolons-in-javascript/) を参照してください。
+> [!NOTE]
+> 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは [Your Guide to Semicolons in JavaScript](https://www.codecademy.com/resources/blog/your-guide-to-semicolons-in-javascript/) を参照してください。
 
-> **メモ:** 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります([変数の命名規則についてはこの記事](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#変数)を参照してください)。自信がない場合は、有効かどうか[変数名を調べる](https://mothereff.in/js-variables)ことができます。
+> [!NOTE]
+> 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります([変数の命名規則についてはこの記事](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#変数)を参照してください)。自信がない場合は、有効かどうか[変数名を調べる](https://mothereff.in/js-variables)ことができます。
 
-> **メモ:** JavaScript は大文字と小文字を区別します。 `myVariable` は `myvariable` とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。
+> [!NOTE]
+> JavaScript は大文字と小文字を区別します。 `myVariable` は `myvariable` とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。
 
 変数を宣言したら、以下のように値を割り当てることができます。
 
@@ -256,7 +263,8 @@ myVariable = "Steve";
 
 他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、[式と演算子](/ja/docs/Web/JavaScript/Reference/Operators)を参照してください。
 
-> **メモ:** データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに `'35' + '25'` と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 `35 + 25` を入力すれば、正しい結果が得られます。
+> [!NOTE]
+> データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに `'35' + '25'` と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 `35 + 25` を入力すれば、正しい結果が得られます。
 
 ### 条件文
 
diff --git a/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.md
index 69ee8ad0e9c12f..570f7108daf349 100644
--- a/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -65,11 +65,13 @@ l10n:
    さらに、"_Initialize this repository with a README"_ ボックスをチェックし、 _Create repository_ をクリックしてください。![](github-create-repo.png)
 4. ウェブサイトのフォルダーをリポジトリーの中にドラッグアンドドロップしたら、 _Commit changes_ をクリックしましょう。
 
-   > **メモ:** フォルダーの中に `index.html` ファイルがあるかを確認しましょう。
+   > [!NOTE]
+   > フォルダーの中に `index.html` ファイルがあるかを確認しましょう。
 
 5. では、ウェブサイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザー名が chrisdavidmills なら、[chrisdavidmills.github.io](https://chrisdavidmills.github.io/) に移動しましょう。
 
-   > **メモ:** ウェブサイトに使えるようになるには少し時間がかかるかもしれません。ウェブサイトがすぐに表示されない場合は、少し待ってみてください。そしてもう一度試してみましょう。
+   > [!NOTE]
+   > ウェブサイトに使えるようになるには少し時間がかかるかもしれません。ウェブサイトがすぐに表示されない場合は、少し待ってみてください。そしてもう一度試してみましょう。
 
 もっと詳しく知りたい人は [GitHub Pages Help](https://docs.github.com/en/pages/getting-started-with-github-pages) を見てください。
 
diff --git a/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index e236d0b38b9c6e..72607b16d0b003 100644
--- a/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -19,7 +19,8 @@ l10n:
 2. **主題についてどんな情報を表現しようとしていますか？** タイトルといくつかの段落、それからページに表示させたい画像を考えます。
 3. **ウェブサイトをどんな外見にしますか？** 簡単で大まかな言葉で言うと？背景色は？適切なフォントはフォーマル？漫画？太字で派手？繊細？
 
-> **メモ:** 複雑なプロジェクトでは、色、フォント、ページのアイテム間の余白、適切な文体など、詳細なガイドラインが必要です。これは、デザインガイド、デザインシステム、ブランドブックなどと呼ばれます。一例として、 [Firefox Photon Design System](https://design.firefox.com/photon/)があります。
+> [!NOTE]
+> 複雑なプロジェクトでは、色、フォント、ページのアイテム間の余白、適切な文体など、詳細なガイドラインが必要です。これは、デザインガイド、デザインシステム、ブランドブックなどと呼ばれます。一例として、 [Firefox Photon Design System](https://design.firefox.com/photon/)があります。
 
 ## デザインをスケッチする
 
@@ -27,7 +28,8 @@ l10n:
 
 ![紙に描いたウェブサイトのラフ画とスケッチ](website-drawing-scan.png)
 
-> **メモ:** 現実の複雑なウェブサイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディターや Web の技術を使って、デジタルのモックアップを作るのです。
+> [!NOTE]
+> 現実の複雑なウェブサイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディターや Web の技術を使って、デジタルのモックアップを作るのです。
 >
 > 多くの場合、ウェブの開発チームには、グラフィックデザイナーと{{Glossary("UX", "ユーザーエクスペリエンス")}} (UX) デザイナーがいます。グラフィックデザイナーは、ウェブサイトの見た目を作り上げます。 UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーがウェブサイトでどういう経験をし、どのように操作するかということを考えます。
 
@@ -67,7 +69,8 @@ l10n:
 1. Google のサーバーからフォントを読み込むために、コードに参照を追加する。
 2. 自分のシステムにフォントファイルをダウンロードし、フォントをホスティングし、ウェブサイトのコードでホスティングしたコピーを使用する。
 
-> **メモ:** Google フォントでホスティングされているフォントを提供すると、フォントサービスがユーザーの IP アドレスを公開するため、EU のデータプライバシー規則である [GDPR](https://gdpr.eu/what-is-gdpr) に抵触する可能性があります。これが問題になりそうな場合は、2 つ目の選択肢を選んでください。
+> [!NOTE]
+> Google フォントでホスティングされているフォントを提供すると、フォントサービスがユーザーの IP アドレスを公開するため、EU のデータプライバシー規則である [GDPR](https://gdpr.eu/what-is-gdpr) に抵触する可能性があります。これが問題になりそうな場合は、2 つ目の選択肢を選んでください。
 
 また、Arial、Times New Roman、Courier New などの[セーフウェブフォント](https://web.mit.edu/jmorzins/www/fonts.html)を使用することもできます。
 
diff --git a/files/ja/learn/html/cheatsheet/index.md b/files/ja/learn/html/cheatsheet/index.md
index d0660e98d6b35d..ae3292d5e47c7b 100644
--- a/files/ja/learn/html/cheatsheet/index.md
+++ b/files/ja/learn/html/cheatsheet/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{Glossary("HTML")}} を使用しているとき、HTML タグを正しく使用する方法や適用方法を簡単に覚える方法があるととても便利です。MDN は広範にわたる [HTML ドキュメント](/ja/docs/Web/HTML/Element) と深い解説の [HTML ハウツー](/ja/docs/Learn/HTML/Howto)を提供しています。しかし、多くの場合、手っ取り早くヒントを得たいものです。そのため、早見表では、よく使用するコードの断片をすばやく正確に使用することができるようにしています。
 
-> **メモ:** HTML タグは、見た目ではなく、意味づけのために使用しなければなりません。 常に {{Glossary("CSS")}} を使って指定されたタグの見た目をガラリと変えることが可能なので、HTML を使用する際は、見た目よりも意味を重視するようにしましょう。
+> [!NOTE]
+> HTML タグは、見た目ではなく、意味づけのために使用しなければなりません。 常に {{Glossary("CSS")}} を使って指定されたタグの見た目をガラリと変えることが可能なので、HTML を使用する際は、見た目よりも意味を重視するようにしましょう。
 
 ## インライン要素
 
@@ -238,7 +239,8 @@ format&#x3C;/code>.</pre
 
 一方で「ブロック要素」は、ウェブページの横幅いっぱいまでを占めます。ブロック要素は、ウェブページの幅いっぱいに配置され、横に並ぶわけではありません。文章の段落や積み木のように積み重ねられます。
 
-> **メモ:** この早見表は、固有の構造を表したり、特別な意味づけをするいくつかの要素に限定しているため、[`div`](/ja/docs/Web/HTML/Element/div) 要素は意図的に含まれていません。`div` 要素は何らかの構造を表すものではなく、特別な意味づけを持っているわけでもありません。
+> [!NOTE]
+> この早見表は、固有の構造を表したり、特別な意味づけをするいくつかの要素に限定しているため、[`div`](/ja/docs/Web/HTML/Element/div) 要素は意図的に含まれていません。`div` 要素は何らかの構造を表すものではなく、特別な意味づけを持っているわけでもありません。
 
 <table class="standard-table">
   <thead>
diff --git a/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
index d1b3ccb3eb8cb4..85c86804f238e4 100644
--- a/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
+++ b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
@@ -32,7 +32,8 @@ l10n:
   </tbody>
 </table>
 
-> **警告:** この記事では、クライアント側のイメージマップについてのみ説明します。 ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。
+> [!WARNING]
+> この記事では、クライアント側のイメージマップについてのみ説明します。 ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。
 
 ## イメージマップとその欠点
 
diff --git a/files/ja/learn/html/howto/define_terms_with_html/index.md b/files/ja/learn/html/howto/define_terms_with_html/index.md
index a39e994ba4ee44..d47ebd348ca035 100644
--- a/files/ja/learn/html/howto/define_terms_with_html/index.md
+++ b/files/ja/learn/html/howto/define_terms_with_html/index.md
@@ -50,7 +50,8 @@ HTML は、インラインであろうと構造化された用語集であろう
 <p><dfn>Firefox</dfn> は、Mozilla Foundation によって作成されたウェブブラウザーです。</p>
 ```
 
-> **メモ:** 太字のもう 1 つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、[強調を示すタグ](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#強調と重要性)があります。
+> [!NOTE]
+> 太字のもう 1 つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、[強調を示すタグ](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#強調と重要性)があります。
 
 ### 特別な場合: 略語
 
@@ -62,7 +63,8 @@ HTML は、インラインであろうと構造化された用語集であろう
 </p>
 ```
 
-> **メモ:** HTML 仕様は実際には略語を拡張するために [`title` 属性を用意しています](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-abbr-element)（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 `title` の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様に[これを認めています](https://html.spec.whatwg.org/multipage/dom.html#attr-title)（英語）。
+> [!NOTE]
+> HTML 仕様は実際には略語を拡張するために [`title` 属性を用意しています](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-abbr-element)（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 `title` の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様に[これを認めています](https://html.spec.whatwg.org/multipage/dom.html#attr-title)（英語）。
 
 ### アクセシビリティの向上
 
@@ -84,7 +86,8 @@ HTML は、インラインであろうと構造化された用語集であろう
 
 説明リストは、用語とそれに対応する説明のリスト（例: 定義リスト、辞書の項目、よくある質問、キーと値のペア）です。
 
-> **メモ:** 説明リストは、[対話をマークアップするのには適していません](https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)（英語）。対話は話し手を直接記述しないためです。こちらに[対話をマークアップするための推奨事項](https://html.spec.whatwg.org/multipage/semantics-other.html#conversations)（英語）があります。
+> [!NOTE]
+> 説明リストは、[対話をマークアップするのには適していません](https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)（英語）。対話は話し手を直接記述しないためです。こちらに[対話をマークアップするための推奨事項](https://html.spec.whatwg.org/multipage/semantics-other.html#conversations)（英語）があります。
 
 説明された用語は、 {{htmlelement("dt")}} 要素内にあります。 対応する説明が直ちに続き、 1 つ以上の {{htmlelement("dd")}} 要素に含まれています。 説明リスト全体を {{htmlelement("dl")}} 要素で囲みます。
 
@@ -109,7 +112,8 @@ HTML は、インラインであろうと構造化された用語集であろう
 </dl>
 ```
 
-> **メモ:** 基本的なパターンは、ご覧の通り、 `<dt>` の用語と `<dd>` の説明を交互に並べるというものです。もし 2 つ以上の用語が続けて出てきた場合、続く説明はそれらすべての用語に適用されます。もし 2 つ以上の説明文が同列にある場合、それらはすべて最後に指定された用語に適用されます。
+> [!NOTE]
+> 基本的なパターンは、ご覧の通り、 `<dt>` の用語と `<dd>` の説明を交互に並べるというものです。もし 2 つ以上の用語が続けて出てきた場合、続く説明はそれらすべての用語に適用されます。もし 2 つ以上の説明文が同列にある場合、それらはすべて最後に指定された用語に適用されます。
 
 ### 視覚的な出力を改善する
 
diff --git a/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.md
index b1697a7b9799e2..3c6ef63734e8d4 100644
--- a/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.md
+++ b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.md
@@ -32,7 +32,8 @@ JavaScript を活用して、あなたのウェブページを次のレベルに
 
 {{Glossary("JavaScript")}} はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることが*できます*が、JavaScript は全く新しいレベルの可能性を開きます。
 
-> **メモ:** この記事では、 JavaScript が効果を発揮するために必要な HTML コードに取り組みます。 JavaScript そのものを学びたい場合は、 [JavaScript の基本](/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)の記事から始めることができます。JavaScript についてすでに知っている場合や、他にもプログラミング言語の経験がある場合は、[JavaScript ガイド](/ja/docs/Web/JavaScript/Guide)に直接進むことをお勧めします。
+> [!NOTE]
+> この記事では、 JavaScript が効果を発揮するために必要な HTML コードに取り組みます。 JavaScript そのものを学びたい場合は、 [JavaScript の基本](/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)の記事から始めることができます。JavaScript についてすでに知っている場合や、他にもプログラミング言語の経験がある場合は、[JavaScript ガイド](/ja/docs/Web/JavaScript/Guide)に直接進むことをお勧めします。
 
 ## HTML から JavaScript を起動する方法
 
diff --git a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 1c3caaed0042b3..66296080b1a42c 100644
--- a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -488,7 +488,8 @@ textarea.onkeyup = () => {
 
 {{EmbedLiveSample('Abbreviation_example', '100%', '150')}}
 
-> **メモ:** 以前のバージョンの HTML では {{htmlelement("acronym")}} 要素にも対応していましたが、省略形と頭字語の両方を表現するために `<abbr>` を使用することにしたため、 HTML 仕様から削除されました。`<acronym>` は使用すべきではありません。
+> [!NOTE]
+> 以前のバージョンの HTML では {{htmlelement("acronym")}} 要素にも対応していましたが、省略形と頭字語の両方を表現するために `<abbr>` を使用することにしたため、 HTML 仕様から削除されました。`<acronym>` は使用すべきではありません。
 
 ### アクティブラーニング: 略語のマークアップ
 
diff --git a/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.md
index 5b85edaafe4461..ce40a9e68f230e 100644
--- a/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -40,7 +40,8 @@ l10n:
 ハイパーリンクによって、文書を他の文書やリソースにリンクしたり、文書の特定の部分にリンクしたり、ウェブアドレスでアプリを利用できるようにすることができます。
 ほとんどすべてのウェブコンテンツはリンクに変換することができ、クリックするか他の方法でアクティブにすると、ウェブブラウザーは別のウェブアドレス ({{glossary("URL")}}) に移動します。
 
-> **メモ:** URL は HTML ファイルや、テキストファイル、画像、テキスト文書、動画や音声ファイルや、その他ウェブに載せられるものを指すことができます。
+> [!NOTE]
+> URL は HTML ファイルや、テキストファイル、画像、テキスト文書、動画や音声ファイルや、その他ウェブに載せられるものを指すことができます。
 > ウェブブラウザーがそのファイルを表示または処理する方法を知らない場合、ファイルを開くか（この場合、ファイルを開くまたは処理する役目は端末上の適切なネイティブアプリに委ねられます）、ファイルをダウンロードするか（この場合、後で扱いを試すことができます）を尋ねられます。
 
 例えば、 BBC のホームページには、複数のニュース記事だけでなく、サイトのさまざまなエリア（ナビゲーション機能）、ログイン/登録ページ（ユーザーツール）などを指し示すリンクが多数掲載されています。
@@ -97,7 +98,8 @@ img {
 これにより、MDN ロゴがリンクになります。
 {{EmbedLiveSample('Image links', '100%', 150)}}
 
-> **メモ:** ウェブで画像を使用する方法については、今後の記事で詳しくご紹介します。
+> [!NOTE]
+> ウェブで画像を使用する方法については、今後の記事で詳しくご紹介します。
 
 ### title 属性による補足情報の追加
 
@@ -117,7 +119,8 @@ img {
 
 {{EmbedLiveSample('Adding supporting information with the title attribute', '100%', 150)}}
 
-> **メモ:** リンクのタイトルはマウスを当てないと表示されないため、キーボード操作やタッチ画面でウェブページを操作している人は、タイトル情報にアクセスしにくいという問題があります。
+> [!NOTE]
+> リンクのタイトルはマウスを当てないと表示されないため、キーボード操作やタッチ画面でウェブページを操作している人は、タイトル情報にアクセスしにくいという問題があります。
 > タイトルの情報がページのユーザビリティにとって本当に重要であれば、通常のテキストに入れるなどして、すべてのユーザーがアクセスできるように表示する必要があります。
 
 ### アクティブラーニング: 独自のサンプルリンクを作成する
@@ -163,7 +166,8 @@ URL はファイルを見つけるためにパスを使います。パスはフ
   <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
   ```
 
-> **メモ:** 例えば `../../../complex/path/to/my/file.html` のように、必要に応じて、これらの機能の複数のインスタンスを複雑な URL に組み合わせることができます。
+> [!NOTE]
+> 例えば `../../../complex/path/to/my/file.html` のように、必要に応じて、これらの機能の複数のインスタンスを複雑な URL に組み合わせることができます。
 
 ### 文書フラグメント
 
@@ -306,7 +310,8 @@ HTML 文書の上部だけでなく、HTML 文書の特定の部分（**文書
 
 ![シンプルな HTML ナビゲーションメニューの例。ホーム、ピクチャー、プロジェクト、ソーシャルの各メニューがあります。](navigation-example.png)
 
-> **メモ:** 行き詰まったり、正しいかどうかわからない場合は、[ナビゲーションメニューのマークアップ](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/navigation-menu-marked-up)ディレクトリーをチェックして正しい答えを確認できます。
+> [!NOTE]
+> 行き詰まったり、正しいかどうかわからない場合は、[ナビゲーションメニューのマークアップ](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/navigation-menu-marked-up)ディレクトリーをチェックして正しい答えを確認できます。
 
 ## メールのリンク
 
@@ -336,7 +341,8 @@ HTML 文書の上部だけでなく、HTML 文書の特定の部分（**文書
 </a>
 ```
 
-> **メモ:** 各フィールドの値は URL エンコードされている必要があります。つまり、非印刷文字（タブ、改行、改ページなどの不可視文字）とスペースの[パーセントエスケープ](http://en.wikipedia.org/wiki/Percent-encoding)が含まれています。
+> [!NOTE]
+> 各フィールドの値は URL エンコードされている必要があります。つまり、非印刷文字（タブ、改行、改ページなどの不可視文字）とスペースの[パーセントエスケープ](http://en.wikipedia.org/wiki/Percent-encoding)が含まれています。
 > また、疑問符 (`?`) を使用してメイン URL とフィールド値を区別し、アンパサンド (&) を使用して `mailto:` URL 内の各フィールドを区別します。
 > これは標準の URL クエリー表記です。 [GET メソッド](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data#get_メソッド)を読んで、どの URL クエリー表記がより一般的に使用されているかを理解してください。
 
diff --git a/files/ja/learn/html/introduction_to_html/debugging_html/index.md b/files/ja/learn/html/introduction_to_html/debugging_html/index.md
index 17451027864201..4d49d7a9379f58 100644
--- a/files/ja/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/ja/learn/html/introduction_to_html/debugging_html/index.md
@@ -58,7 +58,8 @@ HTML は Rust ほど理解するのが複雑ではありません。ブラウザ
 
 HTML 自体は構文エラーに悩まされません。ブラウザーが構文解析エラーを許容して解析するからです。つまり、構文エラーがあってもページは表示されます。ブラウザーには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるので、たとえそれが期待したものでなくても、実行することはできます。もちろん、これはまだ問題になる可能性があります。
 
-> **メモ:** ウェブの世界が最初に構築されたとき、 HTML はそれほど厳格には解析されませんでした。これは、構文が絶対的に正しいことを確認するよりも、人々がコンテンツを公開できることのほうが重要であると判断されたためです。ウェブは、最初からもっと厳密なものであったなら、おそらく今日のような人気はなかったでしょう。
+> [!NOTE]
+> ウェブの世界が最初に構築されたとき、 HTML はそれほど厳格には解析されませんでした。これは、構文が絶対的に正しいことを確認するよりも、人々がコンテンツを公開できることのほうが重要であると判断されたためです。ウェブは、最初からもっと厳密なものであったなら、おそらく今日のような人気はなかったでしょう。
 
 ### アクティブラーニング: 寛容なコードの学習
 
@@ -158,7 +159,8 @@ HTML コードの寛容な性質を学習する時が来ました。
   example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>
   ```
 
-  > **メモ:** 閉じ引用符が抜けている属性は、文書の残りの部分が属性の内容として解釈されるため、開始要素になる可能性があります。
+  > [!NOTE]
+  > 閉じ引用符が抜けている属性は、文書の残りの部分が属性の内容として解釈されるため、開始要素になる可能性があります。
 
 - "Unclosed element `ul`": {{htmlelement("ul")}} 要素は正しく閉じられているので、これはあまり役に立ちません。閉じ引用符がないために {{htmlelement("a")}} 要素が閉じられていないので、このエラーが発生しています。
 
diff --git a/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.md
index 5a97ed517361a6..2d3462e00bfe0c 100644
--- a/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -55,7 +55,8 @@ l10n:
 
 ![大見出し、ナビゲーションメニュー、本文、サイドバー、フッターのシンプルなウェブサイト構成例です。](sample-website.png)
 
-> **メモ:** 上の画像は、HTML で定義することができる文書の主要な節を示したものです。しかし、ここで示すページのレイアウトや色、フォントなどの「見た目」は、[CSS](/ja/docs/Learn/CSS) を HTML に適用することで実現されています。
+> [!NOTE]
+> 上の画像は、HTML で定義することができる文書の主要な節を示したものです。しかし、ここで示すページのレイアウトや色、フォントなどの「見た目」は、[CSS](/ja/docs/Learn/CSS) を HTML に適用することで実現されています。
 >
 > このモジュールでは CSS は教えませんが、HTMLの基本的な理解ができたら、[CSS の第一歩](/ja/docs/Learn/CSS/First_steps)モジュールに進んで、サイトのスタイル設定を始めてみてください。
 
@@ -241,7 +242,8 @@ HTML コードでは、それらの*機能*に基づいてコンテンツのセ
 
 これは必ずしも `<aside>` ではありません。必ずしもページのメインコンテンツに関連しているわけではないからです（どこからでも見られるようにしたいのです）。ページのメインコンテンツの一部ではないので、`<section>` の使用を特に保証するものではありません。したがって、この場合は `<div>` で問題ありません。スクリーンリーダーのユーザーが見つけやすいように、道標として見出しを追加しました。
 
-> **警告:** div はとても便利に使用できるため、つい使いすぎてしまいがちです。意味的な価値を持たないので、 HTML コードを煩雑にするだけです。これらを使用するのは、意味的にもっと良い解決策がない場合に限るように注意し、使用箇所を最小限に抑えるようにしなければ、文書の更新や維持に苦労することになります。
+> [!WARNING]
+> div はとても便利に使用できるため、つい使いすぎてしまいがちです。意味的な価値を持たないので、 HTML コードを煩雑にするだけです。これらを使用するのは、意味的にもっと良い解決策がない場合に限るように注意し、使用箇所を最小限に抑えるようにしなければ、文書の更新や維持に苦労することになります。
 
 ### 改行と水平線
 
@@ -301,7 +303,8 @@ HTML コードでは、それらの*機能*に基づいてコンテンツのセ
 
 自身が作成したウェブサイトのために上記のアクティブラーニングを実行してみてください。何についてサイトを作りたいですか？
 
-> **メモ:** 作業をどこかに保存してください。後で必要になるかもしれません。
+> [!NOTE]
+> 作業をどこかに保存してください。後で必要になるかもしれません。
 
 ## まとめ
 
diff --git a/files/ja/learn/html/introduction_to_html/getting_started/index.md b/files/ja/learn/html/introduction_to_html/getting_started/index.md
index 000e0f1e078f07..fc82e5dab4e243 100644
--- a/files/ja/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/ja/learn/html/introduction_to_html/getting_started/index.md
@@ -48,7 +48,8 @@ My cat is very grumpy
 <p>My cat is very grumpy</p>
 ```
 
-> **メモ:** HTML の要素は大文字小文字を区別しません。つまり大文字でも小文字でも書くことができます。例えば {{htmlelement("title")}} 要素は `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` などと書くことができて、どれも正しく動作します。しかし、すべての要素を小文字で書くことが、一貫性や信頼性、その他の理由のために最良の習慣です。
+> [!NOTE]
+> HTML の要素は大文字小文字を区別しません。つまり大文字でも小文字でも書くことができます。例えば {{htmlelement("title")}} 要素は `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` などと書くことができて、どれも正しく動作します。しかし、すべての要素を小文字で書くことが、一貫性や信頼性、その他の理由のために最良の習慣です。
 
 ## HTML 要素の構成
 
@@ -228,7 +229,8 @@ textarea.onkeyup = () => {
 
 {{ EmbedLiveSample('Void_elements', 700, 300, "", "") }}
 
-> **メモ:** HTML では、例えば `<img src="images/cat.jpg" alt="cat" />` のように、空要素のタグの末尾に `/` を追加する必要はありません。しかし、これは有効な構文であり、 HTML を有効な XML にしたい場合に使うことがあります。
+> [!NOTE]
+> HTML では、例えば `<img src="images/cat.jpg" alt="cat" />` のように、空要素のタグの末尾に `/` を追加する必要はありません。しかし、これは有効な構文であり、 HTML を有効な XML にしたい場合に使うことがあります。
 
 ## 属性
 
@@ -514,7 +516,8 @@ textarea.onkeyup = () => {
 3. 新規テキストファイルの中で「貼り付け」します。
 4. `index.html` という名前でファイルを保存します。
 
-> **メモ:** 元となる HTML テンプレートは [MDN 学習領域 GitHub リポジトリー](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html)にも置いてあります。
+> [!NOTE]
+> 元となる HTML テンプレートは [MDN 学習領域 GitHub リポジトリー](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html)にも置いてあります。
 
 ウェブブラウザーでこのファイルを開くとレンダリングされた HTML 文書が表示されます。コードを編集した場合は、ブラウザー上でページの更新（または、再読み込み）を行うと編集結果が反映されます。最初はこんな表示です。
 
@@ -677,7 +680,8 @@ textarea.onkeyup = () => {
 
 HTML 要素の内容でどれだけホワイトスペースを使用したとしても（1 つ以上の空白文字だけでなく、改行も含みます）、 HTML パーサーはコードをレンダリングする際に、ホワイトスペースの並びを 1 文字の空白に縮小します。では、なぜこれほど多くのホワイトスペースを使用するのでしょうか。その答えは、読みやすさにあります。
 
-> **メモ:** 訳注: 全角空白はホワイトスペースに含まれず、空白の縮小の対象にもなりません。
+> [!NOTE]
+> 訳注: 全角空白はホワイトスペースに含まれず、空白の縮小の対象にもなりません。
 
 コードをきれいに整形すると、何をしようとしているのかがわかりやすくなります。この HTML では、入れ子になっている各要素を、中に入っている要素よりも空白 2 文字分多く字下げしています。整形スタイル（それぞれの字下げレベルを空白何文字分にするか、など）はあなた次第ですが、書式化は検討した方がいいでしょう。
 
@@ -709,7 +713,8 @@ HTML では、`<`、`>`、`"`、`'`、`&` の各文字が特殊文字として
 
 {{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "") }}
 
-> **メモ:** 他の記号に実体参照を使用する必要はありません。現代のブラウザーは、HTML の[文字エンコーディングが UTF-8 に設定](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#html_文書の文字コードを指定する)されていれば、実際の記号を正しく扱うことができるからです。
+> [!NOTE]
+> 他の記号に実体参照を使用する必要はありません。現代のブラウザーは、HTML の[文字エンコーディングが UTF-8 に設定](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#html_文書の文字コードを指定する)されていれば、実際の記号を正しく扱うことができるからです。
 
 ## HTML のコメント
 
@@ -733,7 +738,8 @@ HTML のコメントを書くには、特別なマーカーである `<!--` と
 
 この時点で、あなたは HTML がどのようなものか、そしてどのように動作するのか、基本的なレベルで理解できたはずです。また、いくつかの要素や属性を書くことができるようになっているはずです。このモジュールの後続の記事では、ここで紹介したトピックのいくつかをさらに詳しく説明し、また、この言語の他の概念も表示する予定です。
 
-> **メモ:** HTML を学び始めたら、[CSS](/ja/docs/Learn/CSS) の基本を学ぶことも検討してみてください。CSS は、ウェブページのスタイル設定に使用される言語です。例えば、フォントや色を変更したり、ページのレイアウトを変更したりすることができます。HTML と CSS がうまく協調しながら動作することがおわかりいただけると思います。
+> [!NOTE]
+> HTML を学び始めたら、[CSS](/ja/docs/Learn/CSS) の基本を学ぶことも検討してみてください。CSS は、ウェブページのスタイル設定に使用される言語です。例えば、フォントや色を変更したり、ページのレイアウトを変更したりすることができます。HTML と CSS がうまく協調しながら動作することがおわかりいただけると思います。
 
 ## 関連情報
 
diff --git a/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.md
index 05e7d39ce87f7a..f37572eb320146 100644
--- a/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -990,7 +990,8 @@ HTML5 では `<b>`、`<i>`、`<u>` が新しい、やや混乱しやすい意味
 - {{HTMLElement('b')}} は、伝統的に太字で伝えられている意味を伝えるために使用されます。キーワード、製品名、リードセンテンス...
 - {{HTMLElement('u')}} は、下線で伝統的に伝えられている意味を伝えるために使用されます。適切な名前、スペルミス...
 
-> **メモ:** 人々は下線をハイパーリンクと強く関連付けています。したがって、ウェブ上では、リンクのみに下線を引くのが最善です。ウェブ上では、意味的に適切な場合は `<u>` 要素を使用しますが、 CSS を使用して既定の下線をより適切なものに変更することを検討してください。以下の例はその方法を示しています。
+> [!NOTE]
+> 人々は下線をハイパーリンクと強く関連付けています。したがって、ウェブ上では、リンクのみに下線を引くのが最善です。ウェブ上では、意味的に適切な場合は `<u>` 要素を使用しますが、 CSS を使用して既定の下線をより適切なものに変更することを検討してください。以下の例はその方法を示しています。
 
 ```html
 <!-- scientific names -->
diff --git a/files/ja/learn/html/introduction_to_html/index.md b/files/ja/learn/html/introduction_to_html/index.md
index c857ada66b0751..8aaa0dbdd240af 100644
--- a/files/ja/learn/html/introduction_to_html/index.md
+++ b/files/ja/learn/html/introduction_to_html/index.md
@@ -9,7 +9,7 @@ l10n:
 
 本来、{{glossary("HTML")}} は、{{Glossary("Element","要素")}}で構成される言語です。 HTML は、テキストの断片に、文書の中で様々な意味（段落なのか、箇条書きなのか、表の一部なのか）を与え、文書を論理的なセクションに構成し（ヘッダーを持つのか、コンテンツを 3 段組にするのか、ナビゲーションメニューを持つのか）、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の 2 つについて紹介し、 HTML を理解する上で知る必要がある基本的な概念や文法について紹介します。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
@@ -21,7 +21,8 @@ l10n:
 
 このモジュールを始めるにあたり、 HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用する (つまり、ただ見てコンテンツを消費する) ための基本的な知識を持っている必要があります。[基本的なソフトウェアをインストールする](/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software)に挙がっている基本的な作業環境を整えておき、[ファイルを扱う](/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files)にあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)」の一部です。
 
-> **メモ:** 独自のファイルを作成する能力のないコンピューター/タブレット/その他の端末で作業している場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) などのオンラインコーディングプログラムで（ほとんどの）コード例を試してみることができます。
+> [!NOTE]
+> 独自のファイルを作成する能力のないコンピューター/タブレット/その他の端末で作業している場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) などのオンラインコーディングプログラムで（ほとんどの）コード例を試してみることができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.md
index c7b99df705159e..29f9eae1a60902 100644
--- a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.md
+++ b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -49,7 +49,8 @@ l10n:
 
 この課題を開始するには、[マークアップする必要がある生のテキスト](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt)と、HTML に[含める必要がある CSS](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/marking-up-a-letter-start/css.txt) を入手します。テキストエディターを使用して新しい `.html` ファイルを作成し、作業を行います（または、 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) などのサイトを使用して課題を行います）。
 
-> **メモ:** もし行き詰まったら、私たちに助けを求めてください。このページの下にある[評価またはさらなるヘルプ](#評価またはさらなるヘルプ)の節をご覧ください。
+> [!NOTE]
+> もし行き詰まったら、私たちに助けを求めてください。このページの下にある[評価またはさらなるヘルプ](#評価またはさらなるヘルプ)の節をご覧ください。
 
 ## 簡単なプロジェクト
 
diff --git a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
index 5251285976b59b..df6f847778d125 100644
--- a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
+++ b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
@@ -43,7 +43,8 @@ zip ファイルには以下のものが含まれています。
 
 例はローカルコンピューターで作成するか、あるいは [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) などのサイトを使用して作業してください。
 
-> **メモ:** 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+> [!NOTE]
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
 ## プロジェクト概要
 
diff --git a/files/ja/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md b/files/ja/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
index 85c695e383c459..c17a7e82dd427c 100644
--- a/files/ja/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
+++ b/files/ja/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[高度な意味的特徴をマークアップする有名ではない HTML 要素](/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)を使用する方法を理解しているかどうかを評価することです。
 
-> **メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。
 >
 > 行き詰まったら、助けを求めましょう。このページの最下部の[評価またはさらなるヘルプ](#評価またはさらなるヘルプ)の節をご覧ください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/advanced-text/advanced-text1-download.html)しましょう。
 
@@ -46,7 +47,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/advanced-text/advanced-text2-download.html)しましょう。
 
diff --git a/files/ja/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md b/files/ja/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
index ca92a48274377f..8db9abe246359f 100644
--- a/files/ja/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
+++ b/files/ja/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが [HTML でのテキストのマークアップ](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals)を行う方法を理解しているかどうかを評価することです。
 
-> **メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。
 >
 > 行き詰まったら、助けを求めましょう。このページの最下部の[評価またはさらなるヘルプ](#評価またはさらなるヘルプ)の節をご覧ください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/basic-text/basic-text1-download.html)しましょう。
 
@@ -41,7 +42,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/basic-text/basic-text2-download.html)しましょう。
 
@@ -57,7 +58,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/basic-text/basic-text3-download.html)しましょう。
 
diff --git a/files/ja/learn/html/introduction_to_html/test_your_skills_colon__links/index.md b/files/ja/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
index 876485b2e55d4d..b9d26f5965b252 100644
--- a/files/ja/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
+++ b/files/ja/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが [HTML でのハイパーリンクの実装](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を行う方法を理解しているかどうかを評価することです。
 
-> **メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。
+> [!NOTE]
+> 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。
 >
 > 行き詰まったら、助けを求めましょう。このページの最下部の[評価またはさらなるヘルプ](#評価またはさらなるヘルプ)の節をご覧ください。
 
@@ -22,13 +23,14 @@ l10n:
 - 2 つ目のリンクは、ユーザーの既定のメールアプリケーションで、受信者を "whales\@example.com" に設定してメールを開くためのリンクに変更しましょう。
 - メールの件名が「クジラについての質問」と自動的に記入されるように設定すると、ボーナスポイントも得られます。
 
-> **メモ:** この例の 2 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。
+> [!NOTE]
+> この例の 2 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。
 
 下記のライブコードを更新して、完成例を再現してみてください。
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/links/links1-download.html)しましょう。
 
@@ -41,13 +43,14 @@ l10n:
 - 3 つ目のリンクは、UK の Google 画像検索にリンクしてください。ベース URL は `https://www.google.co.uk` で、画像検索は `imghp` というサブディレクトリーに配置されています。
 - 4 つ目のリンクは、現在のページの一番下にある段落にリンクしましょう。これは `bottom` という ID が付いています。
 
-> **メモ:** この例で最初の 3 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。
+> [!NOTE]
+> この例で最初の 3 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。
 
 下記のライブコードを更新して、完成例を再現してみてください。
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 800)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/links/links2-download.html)しましょう。
 
@@ -58,13 +61,14 @@ l10n:
 - リンクテキストの書き方が悪い既存の段落を選び、良いリンクテキストがあるように書き直しましょう。
 - 警告を追加する必要があるリンクには、警告を追加しましょう。
 
-> **メモ:** この例における最初と 3 つ目のリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。
+> [!NOTE]
+> この例における最初と 3 つ目のリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。
 
 下記のライブコードを更新して、完成例を再現してみてください。
 
 {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/links/links3-download.html)しましょう。
 
diff --git a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 6bb085daae7e2d..536345e1967e9e 100644
--- a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -104,7 +104,8 @@ HTML のヘッド部は {{htmlelement("head")}} 要素の内容です。 {{htmle
 
 ![英語と日本語を含むウェブページで、文字コードを latin に設定した場合。日本語の文字が正しく表示されません。](bad-encoding.png)
 
-> **メモ:** ブラウザーによっては（例えば Chrome では）自動的に正しくないエンコーディングを修正しますので、お使いのブラウザーによっては、この問題が見られないこともあります。それでもなお、その他のブラウザーでの問題を避けるため、とにかくページに `utf-8` エンコーディングを設定すべきです。
+> [!NOTE]
+> ブラウザーによっては（例えば Chrome では）自動的に正しくないエンコーディングを修正しますので、お使いのブラウザーによっては、この問題が見られないこともあります。それでもなお、その他のブラウザーでの問題を避けるため、とにかくページに `utf-8` エンコーディングを設定すべきです。
 
 ### アクティブラーニング: 文字エンコーディングで実験する
 
@@ -157,9 +158,11 @@ description は検索エンジンの結果ページにも使われます。練
 
    ![Yahoo での "Mozilla Developer Network" の検索結果](mdn-search-result.png)
 
-> **メモ:** Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう。これはサイトリンクと呼ばれ、[Google ウェブマスターツール](https://search.google.com/search-console/about) で設定されます。これは Google 検索エンジンでサイトの検索結果を改善する方法です。
+> [!NOTE]
+> Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう。これはサイトリンクと呼ばれ、[Google ウェブマスターツール](https://search.google.com/search-console/about) で設定されます。これは Google 検索エンジンでサイトの検索結果を改善する方法です。
 
-> **メモ:** 多くの `<meta>` 機能はもう使われていません。例えば、`<meta>` 要素の keyword (`<meta name="keywords" content="fill, in, your, keywords, here">`) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。
+> [!NOTE]
+> 多くの `<meta>` 機能はもう使われていません。例えば、`<meta>` 要素の keyword (`<meta name="keywords" content="fill, in, your, keywords, here">`) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。
 
 ### メタデータの他の種類
 
@@ -234,7 +237,8 @@ and HTML Apps." />
 
 これらの種類のアイコンをすべて実装することを今すぐには心配しないでください。これはかなり高度な機能であり、コースを進めるためにこのような知識があることを期待することはありません。そのため、他のウェブサイトのソースコードを閲覧しているときに、このようなものがあることに気付いたときのために、その内容を知っておくことが主な目的です。
 
-> **メモ:** もし、サイトがセキュリティを向上させるために Content Security Policy (CSP) を使用している場合、ポリシーがファビコンに適用されます。ファビコンが読み込まれないという問題に遭遇したら、 {{HTTPHeader("Content-Security-Policy")}} ヘッダーの [`img-src` ディレクティブ](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/img-src)がアクセスを妨害していないかを確認してください。
+> [!NOTE]
+> もし、サイトがセキュリティを向上させるために Content Security Policy (CSP) を使用している場合、ポリシーがファビコンに適用されます。ファビコンが読み込まれないという問題に遭遇したら、 {{HTTPHeader("Content-Security-Policy")}} ヘッダーの [`img-src` ディレクティブ](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/img-src)がアクセスを妨害していないかを確認してください。
 
 ## HTML に CSS と JavaScript を追加する
 
@@ -267,7 +271,8 @@ and HTML Apps." />
 - JavaScript が空のリストをページに追加しました。リスト内のどこかをクリックすると、ダイアログボックスが現れてリストの新しい要素となるテキストを入力するように求められます。 OK ボタンを押すと。リストに新しい要素が加わります。リストに既にある要素をクリックすると、ダイアログボックスが現れ要素の名前を変えることができます。
 - CSS によって背景は緑になり文字が大きくなっています。 JavaScript によってページに加えられたいくつかのコンテンツもスタイルが適用されます（黒い境界線の付いた赤いバーは、 JS が生成したリストに CSS が追加したスタイルです）。
 
-> **メモ:** このアクティブラーニングで行き詰まって CSS/JS が適用できなくなってしまった場合は、 [css-and-js.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/css-and-js.html) サンプルページをチェックしてみてください。
+> [!NOTE]
+> このアクティブラーニングで行き詰まって CSS/JS が適用できなくなってしまった場合は、 [css-and-js.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/css-and-js.html) サンプルページをチェックしてみてください。
 
 ## 文書の主要な言語の設定
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index 38980df7eb57f0..c5ab2582df49ff 100644
--- a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -27,7 +27,8 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** この記事は SVG を教えるためのものではありません。 SVG が何であるかと、ウェブページに追加する方法について説明します。
+> [!NOTE]
+> この記事は SVG を教えるためのものではありません。 SVG が何であるかと、ウェブページに追加する方法について説明します。
 
 ## ベクターグラフィックとは何か？
 
@@ -44,7 +45,8 @@ l10n:
 
 ![2 つの星の画像が拡大表示され、1 つがくっきりとしており、もう一方はギザギザになっている](raster-vector-zoomed.png)
 
-> **メモ:** 上の画像は実際には全て PNG です — いずれの場合も、左の星はラスター画像を表し、右の星はベクター画像を表します。 実際の例については、[vector-versus-raster.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) デモを参照してください！
+> [!NOTE]
+> 上の画像は実際には全て PNG です — いずれの場合も、左の星はラスター画像を表し、右の星はベクター画像を表します。 実際の例については、[vector-versus-raster.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) デモを参照してください！
 
 さらに、ベクター画像ファイルは、画像内のすべてのピクセルの情報ではなく、一握りのアルゴリズムを保持するだけで済むので、ラスター同等物よりもはるかに軽くなります。
 
@@ -84,7 +86,8 @@ SVG にはこれまで説明したもの以外にも、いくつかの長所が
 
 ラスターグラフィックは、前述の理由から、写真などの複雑な高精度画像に対しては、ほぼ間違いなく優れています。
 
-> **メモ:** Inkscape では、スペースを節約するためにファイルを Plain SVG として保存してください。 また、[ウェブ用の SVG を作成する方法について説明しているこの記事](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html) (英語) を参照してください。
+> [!NOTE]
+> Inkscape では、スペースを節約するためにファイルを Plain SVG として保存してください。 また、[ウェブ用の SVG を作成する方法について説明しているこの記事](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html) (英語) を参照してください。
 
 ## ページへの SVG の追加
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.md
index 70c6a28ae63a52..fd205bfc7f751d 100644
--- a/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -42,7 +42,8 @@ l10n:
 
 [`alt` 属性は後で説明します](#代替テキスト)。
 
-> **メモ:** 続行する前に、[URL とパスに関する簡単な入門](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#url_とパスに関する簡単な入門)を読んで、相対 URL と絶対 URL の記憶を更新してください。
+> [!NOTE]
+> 続行する前に、[URL とパスに関する簡単な入門](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#url_とパスに関する簡単な入門)を読んで、相対 URL と絶対 URL の記憶を更新してください。
 
 例えば、画像が `dinosaur.jpg` というファイル名で、HTML ページと同じディレクトリーにある場合、画像を次のように埋め込むことができます。
 
@@ -58,7 +59,8 @@ l10n:
 
 他も同様です。
 
-> **メモ:** 検索エンジンは画像ファイル名も読み込み、SEO に向けてカウントします。したがって、画像にわかりやすいファイル名を付けてください。 `dinosaur.jpg` は `img835.png` よりも優れています。
+> [!NOTE]
+> 検索エンジンは画像ファイル名も読み込み、SEO に向けてカウントします。したがって、画像にわかりやすいファイル名を付けてください。 `dinosaur.jpg` は `img835.png` よりも優れています。
 
 例えば次のように、絶対 URL を使用して画像を埋め込むこともできます。
 
@@ -70,7 +72,8 @@ l10n:
 
 もし自分で画像を作成していないのであれば、その画像が公開されているライセンスの条件下で使用する許可をあなたが持っていることを確認してください（詳しくは下記の[メディア資産とライセンス](#メディア資産とライセンス)をご覧ください）。
 
-> **警告:** 他人のウェブサイトでホスティングされている画像を、**許可なく** src 属性で指しては**いけません**。これは「ホットリンク」と呼ばれます。誰かがページにアクセスしたときに画像を配信するための帯域幅のコストを他の誰かが負担することになるため、一般に倫理的に問題があると考えられています。
+> [!WARNING]
+> 他人のウェブサイトでホスティングされている画像を、**許可なく** src 属性で指しては**いけません**。これは「ホットリンク」と呼ばれます。誰かがページにアクセスしたときに画像を配信するための帯域幅のコストを他の誰かが負担することになるため、一般に倫理的に問題があると考えられています。
 
 先のコードスニペットは、絶対 URL でも相対 URL でも、以下のような結果になります。
 
@@ -78,7 +81,8 @@ l10n:
 
 > **メモ:** {{htmlelement("img")}} や {{htmlelement("video")}} のような要素は、**置換要素**と呼ばれることがあります。これは、要素の内容とサイズが、要素自体の内容ではなく、外部リソース（画像ファイルや動画ファイルなど）によって定義されているためです。詳しくは[置換要素](/ja/docs/Web/CSS/Replaced_element)を参照してください。
 
-> **メモ:** この節で仕上げた例は、 [Github で実行する](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html)ことができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/images-in-html/index.html)も参照してください）。
+> [!NOTE]
+> この節で仕上げた例は、 [Github で実行する](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html)ことができます（[ソースコード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/images-in-html/index.html)も参照してください）。
 
 ### 代替テキスト
 
@@ -112,7 +116,8 @@ l10n:
 
 基本的には、画像が見えないときでも、実用的な使い勝手を提供することが鍵です。これにより、すべてのユーザーにコンテンツが欠落していないことが保証されます。ブラウザーの画像をオフにして、どのように見えるかを確認してください。画像が見えない場合に、すぐに役立つ代替テキストがどれほどあるかがすぐに理解できます。
 
-> **メモ:** 詳細については、[代替テキストのガイド](/ja/docs/Learn/Accessibility/HTML#代替テキスト)を参照してください。
+> [!NOTE]
+> 詳細については、[代替テキストのガイド](/ja/docs/Learn/Accessibility/HTML#代替テキスト)を参照してください。
 
 ### 幅と高さ
 
@@ -171,7 +176,8 @@ HTML で `width` 属性と `height` 属性を用いて画像の実際の大き
 
 この機能の歴史に関する優れた記事は、 [Setting height and width on images is important again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) を参照してください。
 
-> **メモ:** これまでに述べたように、 HTML 属性を使って画像の実際の大きさを指定するのは良い習慣ですが、画像のサイズ変更にこれらを使用するべきではありません。
+> [!NOTE]
+> これまでに述べたように、 HTML 属性を使って画像の実際の大きさを指定するのは良い習慣ですが、画像のサイズ変更にこれらを使用するべきではありません。
 >
 > 画像サイズを大きく設定しすぎると、画像が粗くなったり、ぼやけたり、小さすぎたりして、ユーザーのニーズに合っていない画像をダウンロードすることになり、帯域幅を浪費することになります。また、正しい[アスペクト比](https://ja.wikipedia.org/wiki/アスペクト比)を維持しないと、画像が歪んでいってしまうかもしれません。ウェブページに画像を掲載する前に、画像エディターを使用して正しいサイズにしましょう。
 >
@@ -379,7 +385,8 @@ textarea.onkeyup = function () {
 
 従うべき固有の仕様については、該当するライセンスを参照してください。
 
-> **メモ:** 寛容なライセンスの文脈で「コピーレフト」という用語を見かけることがあります。コピーレフトライセンス（[GNU 一般公衆ライセンス (GPL)](https://www.gnu.org/licenses/gpl-3.0.en.html)や "Share Alike" クリエイティブコモンズライセンスなど）は、派生作品の場合、元と同じライセンスでリリースする必要があると規定しています。
+> [!NOTE]
+> 寛容なライセンスの文脈で「コピーレフト」という用語を見かけることがあります。コピーレフトライセンス（[GNU 一般公衆ライセンス (GPL)](https://www.gnu.org/licenses/gpl-3.0.en.html)や "Share Alike" クリエイティブコモンズライセンスなど）は、派生作品の場合、元と同じライセンスでリリースする必要があると規定しています。
 
 コピーレフトライセンスは、ソフトウェアの世界では有名です。基本的な考え方は、コピーレフトでライセンスされた自分のプロジェクトのコードで構築された新しいプロジェクト（これは元ソフトウェアの「フォーク」として知られています）も、同じコピーレフトライセンスで使用許諾する必要があるということです。これによって、自分の新しいプロジェクトのソースコードも、確実に、他の人が研究したり変更したりして利用できるようにします。一般に、 GPL の6ようなソフトウェアのために立案されたライセンスは、ソフトウェア以外の作品を念頭に置いて立案されたものではないので、ソフトウェア以外の著作物にとって良いライセンスとはみなされないことに注意してください。
 
@@ -441,7 +448,8 @@ textarea.onkeyup = function () {
 
 {{htmlelement("figcaption")}} 要素は、キャプションが {{htmlelement("figure")}} 要素の他のコンテンツを説明していることをブラウザーと支援技術に伝えます。
 
-> **メモ:** アクセシビリティの観点から、キャプションと [`alt`](/ja/docs/Web/HTML/Element/img#alt) テキストには明確な役割があります。キャプションは画像を見ることができる人にも利益をもたらしますが、[`alt`](/ja/docs/Web/HTML/Element/img#alt) テキストは欠けている画像と同じ機能を提供します。したがって、キャプションと `alt` テキストは、画像がなくなったときに両方が表示されるため、同じことを言うべきではありません。ブラウザーで画像をオフにして見た目を確認してみてください。
+> [!NOTE]
+> アクセシビリティの観点から、キャプションと [`alt`](/ja/docs/Web/HTML/Element/img#alt) テキストには明確な役割があります。キャプションは画像を見ることができる人にも利益をもたらしますが、[`alt`](/ja/docs/Web/HTML/Element/img#alt) テキストは欠けている画像と同じ機能を提供します。したがって、キャプションと `alt` テキストは、画像がなくなったときに両方が表示されるため、同じことを言うべきではありません。ブラウザーで画像をオフにして見た目を確認してみてください。
 
 図表は画像である必要はありません。それは次のようにコンテンツの独立した単位です。
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
index 0c5cfd458622cf..57b6bb2fe71a6e 100644
--- a/files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[画像と HTML への埋め込み](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)を行う方法を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images1-download.html)しましょう。
 
@@ -37,7 +38,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images2-download.html)しましょう。
 
@@ -49,6 +50,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 1000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images3-download.html)しましょう。
diff --git a/files/ja/learn/html/multimedia_and_embedding/index.md b/files/ja/learn/html/multimedia_and_embedding/index.md
index eb5420ced20698..1c1b3815b25bad 100644
--- a/files/ja/learn/html/multimedia_and_embedding/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/index.md
@@ -13,7 +13,8 @@ l10n:
 
 このモジュールを開始する前に、[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)で述べられてきた、HTML の基本についてのある程度の知識が求められます。このモジュール（や似たようなもの）を一通り終えていない場合、まずそちらを一通り終えてから戻ってきてください。
 
-> **メモ:** 自分自身のファイルを作れないコンピューター/タブレット/その他の端末で作業している場合、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) のようなオンラインコーティングプログラムにてコードの実例（の大半）を試すことができます。
+> [!NOTE]
+> 自分自身のファイルを作れないコンピューター/タブレット/その他の端末で作業している場合、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) のようなオンラインコーティングプログラムにてコードの実例（の大半）を試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index 585f05262e2bfc..ad04744822b4be 100644
--- a/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -34,7 +34,8 @@ l10n:
 
 それ以外に、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターを使用することもできます。
 
-> **メモ:** 例の HTML ファイルには、ページのスタイルを設定するための CSS がかなり多く含まれています。 CSS に触れる必要はなく、 {{htmlelement("body")}} 要素内の HTML を操作するだけです。正しいマークアップを挿入していれば、スタイルは正しく表示されます。
+> [!NOTE]
+> 例の HTML ファイルには、ページのスタイルを設定するための CSS がかなり多く含まれています。 CSS に触れる必要はなく、 {{htmlelement("body")}} 要素内の HTML を操作するだけです。正しいマークアップを挿入していれば、スタイルは正しく表示されます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -56,7 +57,8 @@ l10n:
 
 次に、 `red-panda.jpg` の 1200 ピクセル幅のランドスケープバージョンと、パンダをより近くに見せてくれる 600 ピクセル幅のポートレートバージョンを作成します。 繰り返しますが、簡単に識別できるように、判りやすい名前にしてください。 これらの両方のコピーを `index.html` と同じディレクトリーに保存してください。
 
-> **メモ:** JPG 画像と PNG 画像は最適化して、できるだけ小さくして、それでも見栄えを良くしてください。 [tinypng.com](https://tinypng.com/) は簡単にこれを行うための素晴らしいサービスです。
+> [!NOTE]
+> JPG 画像と PNG 画像は最適化して、できるだけ小さくして、それでも見栄えを良くしてください。 [tinypng.com](https://tinypng.com/) は簡単にこれを行うための素晴らしいサービスです。
 
 ### ヘッダーにロゴを追加する
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 635b4e757e3908..9eb547f24d0138 100644
--- a/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -247,7 +247,8 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X
 - [`sandbox`](/ja/docs/Web/HTML/Element/iframe#sandbox)
   - : この属性は、他の `<iframe>` の機能よりも若干現代的なブラウザー(たとえば、IE 10 以上)で機能し、高度なセキュリティ設定を要求します。これについては、次のセクションで詳しく説明します。
 
-> **メモ:** 速度を向上させるためには、メインコンテンツの読み込みが完了した後に iframe の `src` 属性を JavaScript で設定することをお勧めします。これにより、ページがより早く使用できるようになり、公式ページの読み込み時間が短縮されます（重要な {{glossary("SEO")}} の測定基準）。
+> [!NOTE]
+> 速度を向上させるためには、メインコンテンツの読み込みが完了した後に iframe の `src` 属性を JavaScript で設定することをお勧めします。これにより、ページがより早く使用できるようになり、公式ページの読み込み時間が短縮されます（重要な {{glossary("SEO")}} の測定基準）。
 
 ### セキュリティ上の懸念
 
@@ -287,13 +288,15 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X
 
 絶対に必要な場合は、権限を（`sandbox=""` 属性値内に） 1 つずつ追加することができます。使用可能なすべてのオプションについては、 [`sandbox`](/ja/docs/Web/HTML/Element/iframe#sandbox) のリファレンスの記事を参照してください。重要な注意点の 1 つは、 `sandbox` 属性に `allow-scripts` と `allow-same-origin` の両方を追加しないことです。この場合、埋め込みコンテンツは、サイトのスクリプトの実行を停止する同一オリジンセキュリティポリシーをバイパスし、 JavaScript を使用してサンドボックスを完全に無効にすることができます。
 
-> **メモ:** 攻撃者が欺いて悪意のあるコンテンツ（iframe 外にある）を直接訪問させることができれば、サンドボックスは保護を提供しません。特定のコンテンツが悪意のあるコンテンツ（ユーザー生成コンテンツなど）である可能性がある場合は、別の{{glossary("domain","ドメイン")}}からメインサイトへ配信してください。
+> [!NOTE]
+> 攻撃者が欺いて悪意のあるコンテンツ（iframe 外にある）を直接訪問させることができれば、サンドボックスは保護を提供しません。特定のコンテンツが悪意のあるコンテンツ（ユーザー生成コンテンツなど）である可能性がある場合は、別の{{glossary("domain","ドメイン")}}からメインサイトへ配信してください。
 
 #### CSP ディレクティブの設定
 
 {{Glossary("CSP")}} は **[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)** の略で、HTML 文書のセキュリティを強化するために設計された[一連の HTTP ヘッダー](/ja/docs/Web/HTTP/Headers/Content-Security-Policy)（ウェブサーバーから配信されたときにウェブページとともに送信されるメタデータ）を提供します。`<iframe>` を保護する場合、[適切な X-Frame-Options ヘッダーを送信するようにサーバーを構成](/ja/docs/Web/HTTP/Headers/X-Frame-Options)できます。これにより、他のウェブサイトがそのウェブページにあなたのコンテンツを埋め込むのを防ぐことができます（[クリックジャッキング](/ja/docs/Glossary/Clickjacking)や他の攻撃のホストを可能にする）。以前に見たように、これはまさに MDN 開発者が行ったことです。
 
-> **メモ:** Frederik Braun 氏の投稿 [X-Frame-Options セキュリティヘッダーについて](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/)（英語）で、このトピックの背景情報を読むことができます。明らかに、これは、この記事の説明の範囲外です。
+> [!NOTE]
+> Frederik Braun 氏の投稿 [X-Frame-Options セキュリティヘッダーについて](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/)（英語）で、このトピックの背景情報を読むことができます。明らかに、これは、この記事の説明の範囲外です。
 
 ## \<embed> 要素と \<object> 要素
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.md
index 8b4bffe6b76ebb..5685c7adff2f44 100644
--- a/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -57,7 +57,8 @@ l10n:
 
 この種の問題は、ウェブが最初に登場したとき、90 年代前半から中期の頃には存在しませんでした。 — ウェブをブラウズする唯一の端末はデスクトップとラップトップであったため、ブラウザーの技術者や仕様書の著者は解決策を実装することを考えませんでした。 *レスポンシブ画像技術*は上記のような問題を解決するために最近になって実装され、ブラウザーに様々な画像ファイル、どれも表示するものは同じですが、ピクセル数が異なる様々な画像（解像度の切り替え）、異なる領域の取り方が異なる様々な画像（アートディレクション）を含めることができます。
 
-> **メモ:** この記事で説明している新機能 — [`srcset`](/ja/docs/Web/HTML/Element/img#srcset)/[`sizes`](/ja/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}} — は、現行のデスクトップおよびモバイルブラウザーのすべてが対応しています。
+> [!NOTE]
+> この記事で説明している新機能 — [`srcset`](/ja/docs/Web/HTML/Element/img#srcset)/[`sizes`](/ja/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}} — は、現行のデスクトップおよびモバイルブラウザーのすべてが対応しています。
 
 ## レスポンシブ画像の作り方
 
@@ -104,7 +105,8 @@ l10n:
 2. 空白
 3. メディア条件が成立したときに埋める**スロットの幅** (`480px`)
 
-> **メモ:** スロットの幅は、絶対幅（例: `480px`）ではなく、ビューポートからの相対幅（例: `50vw`）を提供することができます。ただし、パーセント値は指定できません。最後のスロットの幅にはメディア条件がないことにお気づきでしょうか （これは、どのメディア条件も真でない場合に選択される既定値です）。ブラウザーは最初の一致する条件以降を無視するので、メディア条件をどのように並べるか注意してください。
+> [!NOTE]
+> スロットの幅は、絶対幅（例: `480px`）ではなく、ビューポートからの相対幅（例: `50vw`）を提供することができます。ただし、パーセント値は指定できません。最後のスロットの幅にはメディア条件がないことにお気づきでしょうか （これは、どのメディア条件も真でない場合に選択される既定値です）。ブラウザーは最初の一致する条件以降を無視するので、メディア条件をどのように並べるか注意してください。
 
 したがって、これらの属性を使用すると、ブラウザーは次のようになります。
 
@@ -115,13 +117,15 @@ l10n:
 
 以上です！ この時点で、480px のビューポート幅を持つ対応しているブラウザーがこのページを読み込むと、`(max-width: 600px)` メディア条件が真となるため、ブラウザーは `480px` のスロットを選択します。`elva-fairy-480w.jpg` の固有幅 (`480w`) が最も近いため、これが読み込まれます。 800px の画像は 128KB ですが、480px の画像は 63KB で 65KB の節約になります。 今、これが多くの写真があるページだったと想像してみてください。 この技術を使用することで、モバイルユーザーは多くの帯域幅を節約できます。
 
-> **メモ:** デスクトップのブラウザーでテストする場合、ブラウザーでウィンドウ幅を最も狭く設定したときに狭い画像を読み込むことができない場合は、ビューポートの値を確認してください（ブラウザー の JavaScript コンソールに移動して `document.querySelector('html').clientWidth` と入力すると、おおよその値を確認することができます）。さまざまなブラウザーでのウィンドウ幅の最小値が保有されており、それは思ったよりも広いかもしれません。モバイルブラウザーでテストする場合、 Firefox の `about:debugging` ページのようなツールを使用して、デスクトップの開発者ツールを使用してモバイルに読み込まれたページを検査することができます。
+> [!NOTE]
+> デスクトップのブラウザーでテストする場合、ブラウザーでウィンドウ幅を最も狭く設定したときに狭い画像を読み込むことができない場合は、ビューポートの値を確認してください（ブラウザー の JavaScript コンソールに移動して `document.querySelector('html').clientWidth` と入力すると、おおよその値を確認することができます）。さまざまなブラウザーでのウィンドウ幅の最小値が保有されており、それは思ったよりも広いかもしれません。モバイルブラウザーでテストする場合、 Firefox の `about:debugging` ページのようなツールを使用して、デスクトップの開発者ツールを使用してモバイルに読み込まれたページを検査することができます。
 >
 > どの画像が読み込まれたかを確認するには、 Firefox の開発者ツールの[ネットワークモニター](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)タブや、Chrome の開発者ツールの[ネットワーク](https://developer.chrome.com/docs/devtools/network/)パネルを使用することができます。Chrome では、既にダウンロードされた画像を拾わないように、[キャッシュを無効](https://stackoverflow.com/a/7000899/13725861)にすることができます。
 
 これらの機能に対応していない古いブラウザーはこれらを無視し、 [`src`](/ja/docs/Web/HTML/Element/img#src) 属性で参照されている画像を通常の方法で読み込みます。
 
-> **メモ:** 文書の {{htmlelement("head")}} には、 `<meta name="viewport" content="width=device-width">` という行があります。 これは、モバイルブラウザーがウェブページを読み込むために実際のビューポート幅を使用するように強制します。（一部のモバイルブラウザーでは、ビューポート幅について嘘をつき、大きなビューポート幅でページを読み込み、読み込んだページを縮小するため、レスポンシブ画像やデザインにはあまり役に立ちません。 これについては、今後のモジュールで詳しく説明します。）
+> [!NOTE]
+> 文書の {{htmlelement("head")}} には、 `<meta name="viewport" content="width=device-width">` という行があります。 これは、モバイルブラウザーがウェブページを読み込むために実際のビューポート幅を使用するように強制します。（一部のモバイルブラウザーでは、ビューポート幅について嘘をつき、大きなビューポート幅でページを読み込み、読み込んだページを縮小するため、レスポンシブ画像やデザインにはあまり役に立ちません。 これについては、今後のモジュールで詳しく説明します。）
 
 ### 解像度の切り替え: 同じサイズ、異なる解像度
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 70fc872faff337..f2b3d23978b0e5 100644
--- a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -44,7 +44,8 @@ l10n:
 
 音声/動画ファイルの作成方法は、完全に別のスキルが必要なため、ここでは教えません。私たちは、自分自身で実験するために、[音声や動画のファイルの例とコード](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/video-and-audio-content) を提供しています。
 
-> **メモ:** ここで始める前に、 [YouTube](https://www.youtube.com/)、[Dailymotion](http://www.dailymotion.com)、[Vimeo](https://vimeo.com/) のような OVP （オンライン動画プロバイダー）と [Soundcloud](https://soundcloud.com/) のようなオンライン音声プロバイダーがあることも知っておく必要があります。そのような企業は、動画をホストして消費するための便利で簡単な方法を提供するので、莫大な帯域幅の消費を心配する必要はありません。 OVP は通常、ウェブページに動画や音声を埋め込むための既製コードを提供しています。その道を行くなら、この記事で取り上げるいくつかの困難を避けることができます。この種のサービスについては、次の記事でもう少し詳しく説明します。
+> [!NOTE]
+> ここで始める前に、 [YouTube](https://www.youtube.com/)、[Dailymotion](http://www.dailymotion.com)、[Vimeo](https://vimeo.com/) のような OVP （オンライン動画プロバイダー）と [Soundcloud](https://soundcloud.com/) のようなオンライン音声プロバイダーがあることも知っておく必要があります。そのような企業は、動画をホストして消費するための便利で簡単な方法を提供するので、莫大な帯域幅の消費を心配する必要はありません。 OVP は通常、ウェブページに動画や音声を埋め込むための既製コードを提供しています。その道を行くなら、この記事で取り上げるいくつかの困難を避けることができます。この種のサービスについては、次の記事でもう少し詳しく説明します。
 
 ### \<video> 要素
 
@@ -104,7 +105,8 @@ l10n:
 
 #### ブラウザーが対応しているメディアファイル
 
-> **メモ:** MP3 や MP4/H.264 などの一般的な形式は優れていますが、特許に阻まれています。つまり、ベースとなっている技術の一部または全部に応じた特許が存在するのです。米国では、 MP3 は 2017 年まで、 H.264 は少なくとも 2027 年までの特許が適用されています。
+> [!NOTE]
+> MP3 や MP4/H.264 などの一般的な形式は優れていますが、特許に阻まれています。つまり、ベースとなっている技術の一部または全部に応じた特許が存在するのです。米国では、 MP3 は 2017 年まで、 H.264 は少なくとも 2027 年までの特許が適用されています。
 >
 > これらの特許のために、これらのコーデックに対応するために実装しようとするブラウザーは、通常、膨大なライセンス料を支払わなければなりません。さらに、制限のあるソフトウェアを避けて、オープンな形式だけを使用することを好む人々もいます。このような法的・選好的な理由から、ウェブ開発者は、視聴者全員を取り込むために複数の形式に対応しなければならないことが分かっています。
 
@@ -209,7 +211,8 @@ HTML 動画に含めることができる他の多くの機能があります。
 
 ![再生ボタン、タイマー、音量コントロール、および進行状況バーを備えたシンプルなオーディオプレーヤー](audio-player.png)
 
-> **メモ:** Github で[音声デモをライブで実行する](https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)こともできます (オーディオプレーヤーの[ソースコード](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)も参照してください)。
+> [!NOTE]
+> Github で[音声デモをライブで実行する](https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)こともできます (オーディオプレーヤーの[ソースコード](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)も参照してください)。
 
 ビジュアルコンポーネントがないため、動画プレーヤーよりもスペースが小さくなります。音声を再生するコントロールを表示するだけで済みます。 HTML 動画とのその他の相違点は次のとおりです。
 
@@ -229,7 +232,8 @@ HTML 動画に含めることができる他の多くの機能があります。
 
 音声や動画の中で話されている言葉を文字起こししたものを、このような人たちに提供できたらいいと思いませんか？ HTML 動画のおかげで、それが可能になりました。そのためには、 [WebVTT](/ja/docs/Web/API/WebVTT_API) ファイル形式と {{htmlelement("track")}} 要素を使用します。
 
-> **メモ:** 「文字起こし」とは、「話し言葉をテキストとして書き留める」という意味です。出来上がったテキストが「文字起こししたもの」です。
+> [!NOTE]
+> 「文字起こし」とは、「話し言葉をテキストとして書き留める」という意味です。出来上がったテキストが「文字起こししたもの」です。
 
 WebVTT は、複数の文字列と、それぞれの文字列が動画の中で表示されるべき時間、さらには限定的なスタイル設定/位置情報などのメタデータを含むテキストファイルを書くための形式です。これらの文字列は**キュー**と呼ばれ、異なる目的で使用されるいくつかの種類のキューがあります。最も一般的なキューは以下の通りです。
 
@@ -277,7 +281,8 @@ WEBVTT
 
 詳しくは、[HTML 動画にキャプションと字幕を追加する](/ja/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)をご覧ください。Github には Ian Devlin によって書かれた[この記事の例](http://iandevlin.github.io/mdn/video-player-with-captions/)があります ([ソースコード](https://github.com/iandevlin/iandevlin.github.io/tree/main/mdn/video-player-with-captions)も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、\[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。
 
-> **メモ:** テキストトラックは検索エンジンが特にテキスト上で成功するため、 {{glossary("SEO")}} にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。
+> [!NOTE]
+> テキストトラックは検索エンジンが特にテキスト上で成功するため、 {{glossary("SEO")}} にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。
 
 ### アクティブラーニング: 自分の音声と動画を埋め込む
 
diff --git a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
index 56a8e7330b2200..b5b0fe24c5ead6 100644
--- a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
+++ b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが [HTML への動画および音声コンテンツの埋め込み](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)を行う方法、および [object、iframe およびその他の埋め込み技術](/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)の使い方を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -25,7 +26,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed1.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/media-embed/mediaembed1-download.html)しましょう。
 
@@ -46,7 +47,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/media-embed/mediaembed2-download.html)しましょう。
 
@@ -61,6 +62,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed3.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/media-embed/mediaembed3-download.html)しましょう。
diff --git a/files/ja/learn/html/tables/advanced/index.md b/files/ja/learn/html/tables/advanced/index.md
index 654eb8df141c26..699fee57838605 100644
--- a/files/ja/learn/html/tables/advanced/index.md
+++ b/files/ja/learn/html/tables/advanced/index.md
@@ -57,7 +57,8 @@ l10n:
 2. 表に適切なキャプションを追加します。
 3. コードを保存してブラウザーで開くと、コードがどのように見えるかがわかります。
 
-> **メモ:** GitHub で私たちのバージョンを見ることができます。 [timetable-caption.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/timetable-caption.html) を見てください（[ライブもご覧ください](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)）。
+> [!NOTE]
+> GitHub で私たちのバージョンを見ることができます。 [timetable-caption.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/timetable-caption.html) を見てください（[ライブもご覧ください](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)）。
 
 ## \<thead>、\<tbody>、\<tfoot> を用いて構造を追加
 
@@ -97,13 +98,15 @@ l10n:
 
 7. 保存して更新し、結果を確認します。 `<tbody>` 要素と `<tfoot>` 要素が適切に配置されていない場合は、同じスタイルを適用するためにはるかに複雑なセレクター/規則を記述する必要があります。
 
-> **メモ:** 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう（[CSS 入門](/ja/docs/Learn/CSS/First_steps)は始めるのに良い場所です。 [スタイル設定された表](/ja/docs/Learn/CSS/Building_blocks/Styling_tables)に関する具体的な記事もあります）。
+> [!NOTE]
+> 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう（[CSS 入門](/ja/docs/Learn/CSS/First_steps)は始めるのに良い場所です。 [スタイル設定された表](/ja/docs/Learn/CSS/Building_blocks/Styling_tables)に関する具体的な記事もあります）。
 
 最終的な票は、次のようになるでしょう。
 
 {{ EmbedGHLiveSample('learning-area/html/tables/advanced/spending-record-finished.html', '100%', 400) }}
 
-> **メモ:** GitHub で [spending-record-finished.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record-finished.html) として見ることもできます。
+> [!NOTE]
+> GitHub で [spending-record-finished.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record-finished.html) として見ることもできます。
 
 ## ネストした表
 
@@ -331,7 +334,8 @@ th {
 </tbody>
 ```
 
-> **メモ:** この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 `scope` アプローチは通常ほとんどの表に十分です。
+> [!NOTE]
+> この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 `scope` アプローチは通常ほとんどの表に十分です。
 
 ### アクティブラーニング: scope と headers で遊ぶ
 
@@ -339,7 +343,8 @@ th {
 2. この表をより適切にするために適切な `scope` 属性を追加してみてください。
 3. 最後に、最初のファイルの別のコピーを作成して、今度は、`id` 属性と `headers` 属性を使用して表にアクセスしやすくします。
 
-> **メモ:** 完成した例と照らし合わせて作業内容を確認できます — [items-sold-scope.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-scope.html)([ライブもご覧ください](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html))および [items-sold-headers.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-headers.html)([ライブもご覧ください](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html))。
+> [!NOTE]
+> 完成した例と照らし合わせて作業内容を確認できます — [items-sold-scope.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-scope.html)([ライブもご覧ください](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html))および [items-sold-headers.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-headers.html)([ライブもご覧ください](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html))。
 
 ## まとめ
 
diff --git a/files/ja/learn/html/tables/basics/index.md b/files/ja/learn/html/tables/basics/index.md
index 56e8f561127da9..95d4b119224de7 100644
--- a/files/ja/learn/html/tables/basics/index.md
+++ b/files/ja/learn/html/tables/basics/index.md
@@ -298,7 +298,8 @@ th {
 
 {{EmbedLiveSample("Result")}}
 
-> **メモ:** GitHub では [simple-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/simple-table.html) としても見つけることができます ([こちらも参照してください](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html))。
+> [!NOTE]
+> GitHub では [simple-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/simple-table.html) としても見つけることができます ([こちらも参照してください](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html))。
 
 ## \<th> 要素による見出しの追加
 
@@ -369,13 +370,15 @@ th {
 2. 表の見出しを視覚的にも意味的にも見出しとして認識させるには、**[`<th>`](/ja/docs/Web/HTML/Element/th)** 要素を使用します ('th' は 'table header' を表します)。これは `<td>` とまったく同じように機能しますが、通常のセルではなく見出しを表す点が異なります。HTML を開き、表の見出しを囲む全ての `<td>` 要素を `<th>` 要素に変更してください。
 3. HTML を保存してブラウザーにロードすると、見出しが見出しらしく見えます。
 
-> **メモ:** 完成した例は GitHub の [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table-fixed.html) にあります ([こちらもご覧ください](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html))。
+> [!NOTE]
+> 完成した例は GitHub の [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table-fixed.html) にあります ([こちらもご覧ください](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html))。
 
 ### なぜ見出しは便利なのか
 
 私たちはすでにこの質問に部分的に答えました。見出しがはっきり目立つと、探しているデータを見つけやすく、デザインは一般的に見栄えがよくなります。
 
-> **メモ:** 表の見出しには既定のスタイルがいくつかあります。表に独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。
+> [!NOTE]
+> 表の見出しには既定のスタイルがいくつかあります。表に独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。
 
 表見出しには、`scope` 属性 (次の記事で学ぶことになります) とともに、追加の利点もあります。それらを使用すると、各見出しを同じ行または列のすべてのデータに関連付けることで、表をよりアクセスしやすくすることができます。これにより、スクリーンリーダーはデータの行全体または列全体を一度に読み取ることができます。これは非常に便利です。
 
@@ -437,7 +440,8 @@ th {
 3. 最後に、`rowspan` を使用して "Horse" と "Chicken" を 2 行にまたがるようにします。
 4. 改善を確認するには、ブラウザーでコードを保存して開きます。
 
-> **メモ:** 完成した例は GitHub の [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html) にあります ([こちらもご覧ください](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html))。
+> [!NOTE]
+> 完成した例は GitHub の [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html) にあります ([こちらもご覧ください](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html))。
 
 ## 列への共通のスタイル設定
 
@@ -446,7 +450,8 @@ th {
 先に進む前に、この記事で最後に紹介する機能があります。
 HTML では、データの列全体のスタイル情報を 1 か所にまとめて定義することができます — **[`<col>`](/ja/docs/Web/HTML/Element/col)** 要素と **[`<colgroup>`](/ja/docs/Web/HTML/Element/colgroup)** 要素です。列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の `<td>` や `<th>` ごとにスタイル情報を指定するか、{{cssxref(":nth-child")}} などの複雑なセレクターを使用する必要があります。
 
-> **メモ:** このような列ののスタイル設定は、[いくつかのプロパティに制限されます](https://www.w3.org/TR/CSS22/tables.html#columns)。[`border`](/ja/docs/Web/CSS/border)、[`background`](/ja/docs/Web/CSS/background)、[`width`](/ja/docs/Web/CSS/width)、[`visibility`](/ja/docs/Web/CSS/visibility) です。他のプロパティを設定するには、列内のすべての `<td>` や `<th>` にスタイルを設定するか、{{cssxref(":nth-child")}} のような複雑なセレクターを使用する必要があります。
+> [!NOTE]
+> このような列ののスタイル設定は、[いくつかのプロパティに制限されます](https://www.w3.org/TR/CSS22/tables.html#columns)。[`border`](/ja/docs/Web/CSS/border)、[`background`](/ja/docs/Web/CSS/background)、[`width`](/ja/docs/Web/CSS/width)、[`visibility`](/ja/docs/Web/CSS/visibility) です。他のプロパティを設定するには、列内のすべての `<td>` や `<th>` にスタイルを設定するか、{{cssxref(":nth-child")}} のような複雑なセレクターを使用する必要があります。
 
 次の簡単な例を見てください。
 
@@ -521,7 +526,8 @@ th {
 
 `colspan` や `rowspan` と同じように、`span` はスタイルを適用したい列の数を指定する単位なしの数値を取ります。
 
-> **メモ:** 表、列、およびその列の表セルがすべて別個のスタイル設定である場合、セルに適用されたスタイルは表の上に描画される列スタイルの上に描画されます。これは、表のレイヤーが最初にレンダリングされ、次に列のレイヤーがレンダリングされ、[セルのレイヤーが他のすべての表のレイヤーの最上位にレンダリングされる](/ja/docs/Web/HTML/Element/table#table_layers_and_transparency)ためです。
+> [!NOTE]
+> 表、列、およびその列の表セルがすべて別個のスタイル設定である場合、セルに適用されたスタイルは表の上に描画される列スタイルの上に描画されます。これは、表のレイヤーが最初にレンダリングされ、次に列のレイヤーがレンダリングされ、[セルのレイヤーが他のすべての表のレイヤーの最上位にレンダリングされる](/ja/docs/Web/HTML/Element/table#table_layers_and_transparency)ためです。
 
 ### アクティブラーニング: colgroup と col
 
diff --git a/files/ja/learn/html/tables/index.md b/files/ja/learn/html/tables/index.md
index 20522d39d21ff7..456da987ca1037 100644
--- a/files/ja/learn/html/tables/index.md
+++ b/files/ja/learn/html/tables/index.md
@@ -13,7 +13,8 @@ HTML でのとてもよくある仕事は表データの構造化で、数々の
 
 このモジュールを学習する前に、HTML の基本について既に理解している必要があります。[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)を参照してください。
 
-> **メモ:** もしあなたが自分のファイルを作成することのできないコンピューターやタブレットなどの端末で作業をしているならば、 インターネット上の [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/)といったコーディングプログラムを用いてほとんどのコードの例を試してみることができます。
+> [!NOTE]
+> もしあなたが自分のファイルを作成することのできないコンピューターやタブレットなどの端末で作業をしているならば、 インターネット上の [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/)といったコーディングプログラムを用いてほとんどのコードの例を試してみることができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/html/tables/structuring_planet_data/index.md b/files/ja/learn/html/tables/structuring_planet_data/index.md
index 213e2fcdce4b53..e9233641e8bc1f 100644
--- a/files/ja/learn/html/tables/structuring_planet_data/index.md
+++ b/files/ja/learn/html/tables/structuring_planet_data/index.md
@@ -28,7 +28,8 @@ l10n:
 
 この評価を開始するには、ローカルコンピューターの新しいディレクトリーに、[blank-template.html](https://github.com/mdn/learning-area/blob/main/html/tables/assessment-start/blank-template.html)、[minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/assessment-start/minimal-table.css)、および [planets-data.txt](https://github.com/mdn/learning-area/blob/main/html/tables/assessment-start/planets-data.txt) のローカルコピーを作成します。
 
-> **メモ:** 代わりとして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) や [Glitch](https://glitch.com/) のようなサイトを使って評価することもできます。
+> [!NOTE]
+> 代わりとして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) や [Glitch](https://glitch.com/) のようなサイトを使って評価することもできます。
 >
 > 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
diff --git a/files/ja/learn/index.md b/files/ja/learn/index.md
index 9cd2da35ff1da8..45b0efd5db6b76 100644
--- a/files/ja/learn/index.md
+++ b/files/ja/learn/index.md
@@ -24,7 +24,7 @@ MDN 学習領域へようこそ。この一連の記事は、ウェブ開発の
 
 > **メモ:** [用語集](/ja/docs/Glossary)には、用語の定義が記載されています。また、ウェブ開発に関する特定の質問がある場合は、[よくある質問](/ja/docs/Learn/Common_questions)の節で解決できることがあるかもしれません。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
@@ -70,7 +70,8 @@ MDN のウェブ開発の学習セクションには、自己完結型の課題
 - 上記リンクの**スキルテスト**課題には、採点ガイドと資料が <https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/tasks/conditionals> にあります。
 - 上記リンクの**評価試験**には、採点ガイドと資料が <https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/gallery> にあります。
 
-> **メモ:** 課題と評価のための採点ガイドと他のリソースのほとんどは [`mdn/learning-area`](https://github.com/mdn/learning-area/) で利用できますが、一部は [`mdn/css-examples`](https://github.com/mdn/css-examples/tree/main/learn) にあります。
+> [!NOTE]
+> 課題と評価のための採点ガイドと他のリソースのほとんどは [`mdn/learning-area`](https://github.com/mdn/learning-area/) で利用できますが、一部は [`mdn/css-examples`](https://github.com/mdn/css-examples/tree/main/learn) にあります。
 
 ## サンプルコードの入手
 
diff --git a/files/ja/learn/javascript/asynchronous/index.md b/files/ja/learn/javascript/asynchronous/index.md
index e1816e33bdc539..1eac1c0ae82e47 100644
--- a/files/ja/learn/javascript/asynchronous/index.md
+++ b/files/ja/learn/javascript/asynchronous/index.md
@@ -9,7 +9,7 @@ l10n:
 
 このモジュールでは{{Glossary("asynchronous", "非同期")}} {{Glossary("JavaScript")}} に触れ、なぜそれが重要なのか、そして、潜在的なブロッキング処理（例えばサーバーからリソースを取得する）に効果的に対処するためにどうやって使うのかを見ていきます。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドウェブ開発者を目指す方へ
 >
@@ -21,7 +21,8 @@ l10n:
 
 非同期 JavaScript はとても高度なトピックなので、事前に [JavaScript の第一歩](/ja/docs/Learn/JavaScript/First_steps)と [JavaScript の構成要素](/ja/docs/Learn/JavaScript/Building_blocks)のモジュールに取り組んでおくことをおすすめします。
 
-> **メモ:** ファイルを作成する手段のないコンピューター・タブレット・その他の端末をお使いの場合、（ほとんどの）コード例は [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com) などのオンラインエディターでも試すことができます。
+> [!NOTE]
+> ファイルを作成する手段のないコンピューター・タブレット・その他の端末をお使いの場合、（ほとんどの）コード例は [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com) などのオンラインエディターでも試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/javascript/asynchronous/introducing_workers/index.md b/files/ja/learn/javascript/asynchronous/introducing_workers/index.md
index 5651105d8ee54d..f934dd175d59bb 100644
--- a/files/ja/learn/javascript/asynchronous/introducing_workers/index.md
+++ b/files/ja/learn/javascript/asynchronous/introducing_workers/index.md
@@ -226,7 +226,8 @@ function generatePrimes(quota) {
 
 `generatePrimes()` 関数は同期関数と同じですが、値を返す代わりに、終了したらメインスクリプトにメッセージを送ります。このために {{domxref("DedicatedWorkerGlobalScope/postMessage", "postMessage()")}} 関数を使用します。これは `addEventListener()` と同様にワーカーのグローバル関数です。すでに見たように、メイン スクリプトはこのメッセージを待ち受けしており、メッセージを受信すると DOM を更新します。
 
-> **メモ:** このサイトを実行するには、ローカルのウェブサーバーを実行する必要があります。file:// URL はワーカーを読み込むことができないからです。[ローカルテストサーバーの設定] (/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) のガイドを参照してください。これで、［素数の生成］をクリックすると、メインページが応答し続けるようになるはずです。
+> [!NOTE]
+> このサイトを実行するには、ローカルのウェブサーバーを実行する必要があります。file:// URL はワーカーを読み込むことができないからです。[ローカルテストサーバーの設定] (/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) のガイドを参照してください。これで、［素数の生成］をクリックすると、メインページが応答し続けるようになるはずです。
 >
 > 例の作成や実行に問題がある場合は、[完成版](https://github.com/mdn/learning-area/blob/main/javascript/asynchronous/workers/finished) を確認し、[ライブ](https://mdn.github.io/learning-area/javascript/asynchronous/workers/finished)で試してみることができます。
 
diff --git a/files/ja/learn/javascript/asynchronous/promises/index.md b/files/ja/learn/javascript/asynchronous/promises/index.md
index 20eddd4d6b7e4a..dbc45ece713b62 100644
--- a/files/ja/learn/javascript/asynchronous/promises/index.md
+++ b/files/ja/learn/javascript/asynchronous/promises/index.md
@@ -30,7 +30,8 @@ l10n:
 
 ## fetch() API の使用
 
-> **メモ:** この記事では、ページからブラウザーの JavaScript コンソールにコードサンプルをコピーすることで、プロミスを探ります。設定するには、以下のようにしてください。
+> [!NOTE]
+> この記事では、ページからブラウザーの JavaScript コンソールにコードサンプルをコピーすることで、プロミスを探ります。設定するには、以下のようにしてください。
 >
 > 1. ブラウザーのタブを開いて <https://example.org> を開いてください。
 > 2. その他部の中で、[ブラウザーの開発者ツール](/ja/docs/Learn/Common_questions/What_are_browser_developer_tools)の JavaScript コンソールを開いてください。
diff --git a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md
index af69506cce1cf9..dc2bfdf087464b 100644
--- a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -43,13 +43,15 @@ alert("これはメッセージです");
 
 `alert` 関数には制限があります。メッセージを変更することはできますが、色やアイコンなど、それ以外の部分を簡単には変えられません。もっと楽しくできるやつを作りましょう。
 
-> **メモ:** この例はすべての現行ブラウザーで問題なく動作するはずですが、少し古いブラウザーではスタイル設定が少しおかしく見えるかもしれません。この実習は Firefox、Opera、Chrome のような現行ブラウザーで行うことをお勧めします。
+> [!NOTE]
+> この例はすべての現行ブラウザーで問題なく動作するはずですが、少し古いブラウザーではスタイル設定が少しおかしく見えるかもしれません。この実習は Firefox、Opera、Chrome のような現行ブラウザーで行うことをお勧めします。
 
 ## 基本的な関数
 
 最初に、基本的な関数を組み立てていきましょう。
 
-> **メモ:** 関数に名前を付ける方針としては、[変数の名前付けのルール](/ja/docs/Learn/JavaScript/First_steps/Variables#変数の名前付けのルール)と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです。関数ならすぐ後に括弧が付きますが、変数には付きません。
+> [!NOTE]
+> 関数に名前を付ける方針としては、[変数の名前付けのルール](/ja/docs/Learn/JavaScript/First_steps/Variables#変数の名前付けのルール)と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです。関数ならすぐ後に括弧が付きますが、変数には付きません。
 
 1. [function-start.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-start.html) ファイルにアクセスして、ローカルコピーを作成するところから始めます。HTML は単純です。 body にはボタン一つしかありません。特製メッセージボックス用の基本的な CSS スタイルと、JavaScript を追加していく用の空の {{htmlelement("script")}} 要素が含まれています。
 2. 次に、`<script>` 要素の中に以下を追加して下さい。
@@ -287,7 +289,8 @@ btn.addEventListener("click", displayMessage());
 
    （今はそうでもないですが）小さな機能がどれほど有益なものになりつつあるか、おわかりいただけると思います。
 
-> **メモ:** サンプルをうまく動作させることができない場合は、コードを [GitHub の完成バージョン](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-stage-4.html)と比較して（[ライブで確認](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)してください）チェックしてください。もしくは私たちにヘルプを依頼してください。
+> [!NOTE]
+> サンプルをうまく動作させることができない場合は、コードを [GitHub の完成バージョン](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-stage-4.html)と比較して（[ライブで確認](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)してください）チェックしてください。もしくは私たちにヘルプを依頼してください。
 
 ## スキルテスト
 
diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.md b/files/ja/learn/javascript/building_blocks/conditionals/index.md
index 13fc45306deabc..da706805990af4 100644
--- a/files/ja/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/ja/learn/javascript/building_blocks/conditionals/index.md
@@ -305,7 +305,8 @@ switch (式) {
 6. `case` 節 (上記 3. から 5. ) は好きなだけ書くことができます。
 7. 上記 3. から 5.の `case` 節と全く同じコードパターンで書かれている `default` キーワードがあります。違いは `default` の後ろに選択肢が書かれていないことです。また、後ろに続くコードがないので、ここには `break` 文が必要ありません。もし、選択肢のどれにもマッチするものがない場合に既定のオプションとして実行されます。
 
-> **メモ:** 評価する式の値が不明な値にならないのであれば、`default` 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、`default` 節を書くことで対応が可能です。
+> [!NOTE]
+> 評価する式の値が不明な値にならないのであれば、`default` 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、`default` 節を書くことで対応が可能です。
 
 ### switch の例
 
@@ -415,7 +416,8 @@ select.addEventListener("change", () =>
 
 さらに、三項演算子を含む [onchange](/ja/docs/Web/API/HTMLElement/change_event) イベントリスナーがあります。`select.value === 'black'` という条件式で始まっています。この式が `true` であるならば、`update()` 関数を引数に `'black'`、`'white'` を指定して実行します (つまり、背景色を黒、文字色を白に設定します)。この式が `false` であるならば、`update()` 関数を引数に `'white'`、`'black'` を指定して実行します (つまり、背景色を逆にします)。
 
-> **メモ:** この例は [GitHub でも公開しています](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-ternary.html)。（[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)でも確認できます。）
+> [!NOTE]
+> この例は [GitHub でも公開しています](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-ternary.html)。（[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)でも確認できます。）
 
 ## アクティブラーニング: 単純なカレンダー
 
diff --git a/files/ja/learn/javascript/building_blocks/event_bubbling/index.md b/files/ja/learn/javascript/building_blocks/event_bubbling/index.md
index 12af14e369be3f..860c6dde5ec88a 100644
--- a/files/ja/learn/javascript/building_blocks/event_bubbling/index.md
+++ b/files/ja/learn/javascript/building_blocks/event_bubbling/index.md
@@ -1,226 +1,417 @@
 ---
-title: イベントターゲットの比較
+title: イベントのバブリング
 slug: Learn/JavaScript/Building_blocks/Event_bubbling
-original_slug: Web/API/Event/Comparison_of_Event_Targets
 l10n:
-  sourceCommit: 196cc4ff3068a59b962a3fe1cbb960eb72ef542b
+  sourceCommit: c20c12fab32381b983b4148d712fda227d34e2bd
 ---
 
-{{ ApiRef() }}
-
-イベントハンドラーを書くときに、どのイベントターゲットを調べればいいのか迷うことはよくあります。この記事では、ターゲットプロパティの使い方を明確にします。
-
-検討すべきターゲットは 5 つあります。
-
-<table class="no-markdown">
-  <thead>
-    <tr>
-      <th>プロパティ</th>
-      <th>定義場所</th>
-      <th>目的</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code><a href="/ja/docs/Web/API/Event/target">event.target</a></code>
-      </td>
-      <td>
-        <a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface"
-          >DOM Event Interface</a
-        >
-      </td>
-      <td>
-        このイベントを発行した呼び出しの左側にある DOM 要素。
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code
-          ><a href="/ja/docs/Web/API/Event/currentTarget"
-            >event.currentTarget</a
-          ></code
-        >
-      </td>
-      <td>
-        <a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface"
-          >DOM Event Interface</a
-        >
-      </td>
-      <td>
-        その <a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> が現在処理されている <a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"
-          ><code>EventTarget</code></a> です。イベントキャプチャとバブリングが発生すると、この値は変化します。
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code
-          ><a href="/ja/docs/Web/API/MouseEvent/relatedTarget"
-            >event.relatedTarget</a
-          ></code
-        >
-      </td>
-      <td>
-        <a
-          href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent"
-          >DOM MouseEvent Interface</a
-        >
-      </td>
-      <td>イベントのセカンダリーターゲットを特定します。</td>
-    </tr>
-    <tr>
-      <td>
-        <code
-          ><a href="/ja/docs/Web/API/Event/explicitOriginalTarget"
-            >event<code>.explicitOriginalTarget</code></a
-          ></code
-        >
-      </td>
-      <td>
-        <a href="https://dxr.mozilla.org/mozilla-central/source/dom/webidl/Event.webidl">Event.webidl</a>
-      </td>
-      <td>
-        {{ Non-standard_inline() }} イベントが無名の境界通過以外の理由で再ターゲットされた場合、再ターゲットが発生する前にターゲットに設定されます。例えば、マウスイベントがテキストノードの上で発生した場合、その親ノードに再ターゲットされます（[Firefox バグ 185889](https://bugzil.la/185889)）。その場合、 <code>.target</code> は親ノードを表示し、<code>.explicitOriginalTarget</code> はテキストノードを表示します。
-        <code>.originalTarget</code> とは異なり、<code>.explicitOriginalTarget</code> には無名コンテンツが含まれることはありません。
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code
-          ><a href="/ja/docs/Web/API/Event/originalTarget"
-            >event.originalTarget</a
-          ></code
-        >
-      </td>
-      <td>
-        <a href="https://dxr.mozilla.org/mozilla-central/source/dom/webidl/Event.webidl">Event.webidl</a>
-      </td>
-      <td>
-        {{ Non-standard_inline() }} 再ターゲットされる前の、イベントの本来のターゲットです。詳細は <a href="/ja/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> を参照してください。
-      </td>
-    </tr>
-    <tr>
-      <td>event.composedTarget</td>
-      <td>
-        <a href="https://dxr.mozilla.org/mozilla-central/source/dom/webidl/Event.webidl">Event.webidl</a>
-      </td>
-      <td>
-        {{ Non-standard_inline() }} Shadow DOM から合成する前の、イベントの元の非ネイティブターゲット。
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-### `explicitOriginalTarget` と `originalTarget` の使用
-
-> **メモ:** これらのプロパティは、 Mozilla ベースのブラウザーでのみ利用可能です。
-
-### 例
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+
+ウェブページは見出し、テキストの段落、画像、ボタンなどの「要素」で構成されており、これらの要素に発生するイベントを待ち受けすることができることを見てきました。例えば、ボタンにリスナーを追加すると、ユーザーがボタンをクリックしたときに実行することができます。
+
+また、これらの要素は他の要素の中に「入れ子」にすることができます。例えば、{{htmlelement("button")}} は {{htmlelement("div")}} 要素の中に置くことができます。この場合、 `<div>` 要素を親要素、 `<button>` 要素を子要素と呼びます。
+
+この章では、親要素にイベントリスナーを追加し、ユーザーが子要素をクリックするとどうなるかを見ていきます。
+
+## イベントのバブリングの紹介
+
+### 親要素へのリスナーの設定
+
+このようなウェブページがあるとします。
 
 ```html
-<!doctype html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Comparison of Event Targets</title>
-    <style>
-      table {
-        border-collapse: collapse;
-        height: 150px;
-        width: 100%;
-      }
-      td {
-        border: 1px solid #ccc;
-        font-weight: bold;
-        padding: 5px;
-        min-height: 30px;
-      }
-      .standard {
-        background-color: #99ff99;
-      }
-      .non-standard {
-        background-color: #902d37;
-      }
-    </style>
-  </head>
-  <body>
-    <table>
-      <thead>
-        <tr>
-          <td class="standard">
-            Original target dispatching the event <small>event.target</small>
-          </td>
-          <td class="standard">
-            Target who's event listener is being processed
-            <small>event.currentTarget</small>
-          </td>
-          <td class="standard">
-            Identify other element (if any) involved in the event
-            <small>event.relatedTarget</small>
-          </td>
-          <td class="non-standard">
-            If there was a retargeting of the event for some reason
-            <small> event.explicitOriginalTarget</small> contains the target
-            before retargeting (never contains anonymous targets)
-          </td>
-          <td class="non-standard">
-            If there was a retargeting of the event for some reason
-            <small> event.originalTarget</small> contains the target before
-            retargeting (may contain anonymous targets)
-          </td>
-        </tr>
-      </thead>
-      <tr>
-        <td id="target"></td>
-        <td id="currentTarget"></td>
-        <td id="relatedTarget"></td>
-        <td id="explicitOriginalTarget"></td>
-        <td id="originalTarget"></td>
-      </tr>
-    </table>
+<div id="container">
+  <button>ここをクリック</button>
+</div>
+<pre id="output"></pre>
+```
+
+ここではボタンは別の要素 {{HTMLElement("div")}} の中にあります。ここでは、`<div>` 要素は、それを格納する要素の**親**であると言います。親要素にクリックイベントハンドラーを追加し、ボタンをクリックするとどうなるでしょうか？
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
+}
+
+const container = document.querySelector("#container");
+container.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Setting a listener on a parent element', '100%', 200, "", "") }}
+
+ユーザーがボタンをクリックすると、親のクリックイベントが発生することが分かります。
+
+```plain
+DIV 要素をクリックしました
+```
+
+これで、このボタンは `<div>` の中にあるので、ボタンをクリックすると、その中にある要素も暗黙のうちにクリックしたことになることが分かります。
+
+### バブリングの例
+
+ボタンとその親にイベントリスナーを追加したらどうなるでしょうか？
+
+```html
+<body>
+  <div id="container">
+    <button>ここをクリック</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+ボタンとその親 (`<div>`)、そして両方を格納する {{HTMLElement("body")}} 要素にクリックイベントハンドラーを追加してみましょう。
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Bubbling example', '100%', 200, "", "") }}
+
+ユーザーがボタンをクリックすると、3つの要素すべてでクリックイベントが発行されることが分かります。
+
+```plain
+BUTTON 要素をクリックしました
+DIV 要素をクリックしました
+BODY 要素をクリックしました
+```
+
+この場合は次のようになります。
+
+- ボタンのクリックが最初に発行されます。
+- その親（`<div>`要素）のクリックが続きます。
+- `<div>` 要素の親（`<body>` 要素）のクリックが続きます。
+
+このことを、クリックされた最も内側の要素からイベントが**バブルアップ**すると言います。
+
+この動作は有益なこともあれば、予期せぬ問題を発生させることもあります。この節では、この動作が引き起こす問題を見て、解決策を探ります。
+
+### 動画プレイヤーの例
+
+この例では、最初は非表示になっている動画と、「動画を表示」と表示されたボタンがページにあります。以下のように操作したいと思います。
+
+- ユーザーが「動画を表示」ボタンをクリックしたら、動画を含むボックスを表示させますが、動画の再生はまだ始めません。
+- ユーザーが動画をクリックすると、動画の再生を開始します。
+- ユーザーが動画以外のボックスのどこかをクリックしたら、ボックスを非表示にします。
+
+HTML はこのようになります。
+
+```html-nolint
+<button>動画を表示</button>
+
+<div class="hidden">
+  <video>
+    <source
+      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+      type="video/webm" />
+    <p>
+      このブラウザーは HTML の動画に対応していません。
+      代わりに<a href="rabbit320.mp4">動画へのリンク</a>があります。
+    </p>
+  </video>
+</div>
+```
+
+以下のものがあります。
+
+- `<button>` 要素
+- `<div>` 要素で、初期状態では `class="hidden"` 属性がある
+- `<video>` 要素（`<div>` 要素の中にある）
+
+CSS を使用して、`"hidden"` クラスを設定した要素を非表示にしています。
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+JavaScript はこのようになります。
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+video.addEventListener("click", () => video.play());
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+これは 3 つの `'click'` イベントリスナーを追加します。
+
+- 1 つは `<button>` で、これは `<video>` を格納した `<div>` を表示させます。
+- 1 つは `<video>` で、これは動画の再生を始めるものです。
+- 1 つは `<div>` で、動画を非表示にします。
+
+これがどのように動作するのか見てみましょう。
+
+{{ EmbedLiveSample('Video_player_example', '100%', 500) }}
+
+ボタンをクリックすると、ボックスとコンテナーそのものが表示されます。しかし、動画をクリックすると、動画の再生は始まりますが、ボックスは再び非表示になります。
+
+動画は `<div>` の中にあり、その一部なので、動画をクリックすると両方のイベント ハンドラーが実行され、このような動作が発生します。
+
+### stopPropagation() でこの問題を修正する
+
+前の節で見たように、イベントのバブリングは時に問題を引き起こすことがありますが、それを防ぐ方法があります。
+[`Event`](/ja/docs/Web/API/Event) オブジェクトには [`stopPropagation()`](/ja/docs/Web/API/Event/stopPropagation) という関数があり、イベントハンドラー内で呼び出されると、そのイベントが他の要素にバブリングするのを防ぎます。
+
+JavaScript を次のように変更することで、現在の問題を修正することができます。
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+
+video.addEventListener("click", (event) => {
+  event.stopPropagation();
+  video.play();
+});
+
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+ここでやっていることは、`<video>` 要素の `'click'` イベントハンドラーのイベントオブジェクトに対して `stopPropagation()` を呼び出しているだけです。これにより、そのイベントがボックスまで上がってくるのを止めることができます。これで、ボタンと動画の両方をクリックしてみてください。
+
+{{EmbedLiveSample("Fixing the problem with stopPropagation()", '100%', 500)}}
+
+```html-nolint hidden
+<button>動画を表示</button>
+
+<div class="hidden">
+  <video>
+    <source
+      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+      type="video/webm" />
     <p>
-      Clicking on the text will show the difference between
-      explicitOriginalTarget, originalTarget, and target
+      このブラウザーは HTML の動画に対応していません。
+      代わりに<a href="rabbit320.mp4">動画へのリンク</a>があります。
     </p>
-    <script>
-      function handleClicks(e) {
-        document.getElementById("target").innerHTML = e.target;
-        document.getElementById("currentTarget").innerHTML = e.currentTarget;
-        document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
-        document.getElementById("explicitOriginalTarget").innerHTML =
-          e.explicitOriginalTarget;
-        document.getElementById("originalTarget").innerHTML = e.originalTarget;
-      }
-
-      function handleMouseover(e) {
-        document.getElementById("target").innerHTML = e.target;
-        document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
-      }
-
-      document.addEventListener("click", handleClicks, false);
-      document.addEventListener("mouseover", handleMouseover, false);
-    </script>
-  </body>
-</html>
-```
-
-### `target` と `relatedTarget` の使用
-
-`mouseover` イベントの `relatedTarget` プロパティは、マウスが以前乗っていたノードを保持します。 `mouseout` イベントでは、マウスが移動した先のノードが保持されます。
-
-| イベント種別 | [event.target](/ja/docs/Web/API/Event/target) | [event.relatedTarget](/ja/docs/Web/API/MouseEvent/relatedTarget) |
-| ------------ | --------------------------------------------- | ---------------------------------------------------------------- |
-| `mouseover`  | ポインティングデバイスが入った EventTarget    | ポインティングデバイスが出た EventTarget                         |
-| `mouseout`   | ポインティングデバイスが出た EventTarget      | ポインティングデバイスが入った EventTarget                       |
-
-#### 例
-
-```xml
-<hbox id="outer">
-  <hbox id="inner"
-        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
-        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
-        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
-</hbox>
+  </video>
+</div>
+```
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+## イベントのキャプチャ
+
+イベント伝播の別の形態として、「イベントキャプチャ」があります。これはイベントバブリングのようなものですが、順序が逆になります。つまり、イベントは対象となる最も内側の要素で最初に発生し、その後、入れ子の要素が浅くなっていくのではなく、イベントは最も入れ子の浅い要素で最初に発生し、その後、対象とする要素に達するまで、入れ子の要素が深くなっていきます。
+
+イベントのキャプチャは既定では無効です。有効にするには `addEventListener()` で `capture` オプションを渡す必要があります。
+
+この例は、`capture`オプションを使用していることを除けば、先ほど見た[バブリングの例](#バブリングの例)と同じです。
+
+```html
+<body>
+  <div id="container">
+    <button>ここをクリック</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick, { capture: true });
+container.addEventListener("click", handleClick, { capture: true });
+button.addEventListener("click", handleClick);
 ```
+
+{{ EmbedLiveSample('Event capture', '100%', 200, "", "") }}
+
+この場合、メッセージの順番は逆になります。`<body>` イベントハンドラーが最初に起動し、続いて `<div>` イベントハンドラーが起動し、続いて `<button>` イベントハンドラーが起動します。
+
+```plain
+BODY 要素をクリックしました
+DIV 要素をクリックしました
+BUTTON 要素をクリックしました
+```
+
+なぜわざわざキャプチャとバブリングの両方を使うのでしょうか。昔、ブラウザー間の互換性が今よりずっと低かった頃、Netscape はイベントキャプチャのみを使用し、インターネットエクスプローラーはイベントバブリングのみを使用していました。W3C が動作を標準化し、コンセンサスを得ようと決めたとき、彼らは現行ブラウザーに実装されている、この両方を含むシステムに行き着きました。
+
+既定では、ほとんどすべてのイベントハンドラーはバブリングフェーズで登録され、この方がほとんどの場合において意味があります。
+
+## イベントの委譲
+
+前節では、イベントバブリングが発生させる問題と、それを修正する方法について見ていきました。しかし、イベントバブリングは単に迷惑なだけではありません。具体的な例としては、**イベント委譲** があります。この方法では、ユーザーが多数の子要素のいずれかを操作したときにコードを実行したい場合、子要素にイベントリスナーを個別に設定するのではなく、子要素の親要素にイベントリスナーを設定し、子要素で発生したイベントが親要素にバブルアップされるようにします。
+
+最初の例に戻りましょう。ユーザーがボタンをクリックしたときにページ全体の背景色を設定しました。その代わりに、ページが 16 のタイルに分割されていて、ユーザーがタイルをクリックしたときに各タイルにランダムな色を設定したいとします。
+
+こちらが HTML です。
+
+```html
+<div id="container">
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+</div>
+```
+
+タイルのサイズと位置を設定するために、ちょっとした CSS を設定します。
+
+```css
+.tile {
+  height: 100px;
+  width: 25%;
+  float: left;
+}
+```
+
+これで JavaScript で、すべてのタイルにクリックイベントハンドラーを追加することができます。しかし、よりシンプルで効率的なオプションは、親にクリックイベントハンドラーを設定し、ユーザーがタイルをクリックしたときにハンドラーが確実に実行されるようにイベントバブリングに頼っていることです。
+
+```js
+function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+function bgChange() {
+  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
+  return rndCol;
+}
+
+const container = document.querySelector("#container");
+
+container.addEventListener("click", (event) => {
+  event.target.style.backgroundColor = bgChange();
+});
+```
+
+出力は以下のとおりです（クリックしてみてください）。
+
+{{ EmbedLiveSample('Event delegation', '100%', 430, "", "") }}
+
+> [!NOTE]
+> この例では、`event.target` を使用して、イベントの対象となった要素（つまり、最も内側の要素）を取得しています。もし、このイベントを処理した要素（この用途ではコンテナー）にアクセスしたい場合は、`event.currentTarget` を使用することができます。
+
+> [!NOTE]
+> 完全なソースコードは [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html) を参照してください。こちらの[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)も参照してください。
+
+## `target` および `currentTarget`
+
+このページで紹介した例をよく見ていくと、クリックされた要素にアクセスするためにイベントオブジェクトの 2 つの異なるプロパティを使用していることがわかります。[親要素へのリスナーの設定](#親要素へのリスナーの設定)では、{{domxref("Event.currentTarget", "event.currentTarget")}}を使用しています。しかし、[イベント移譲](#イベント移譲)では、{{domxref("Event.target", "event.target")}} を使用しています。
+
+`target` は最初にイベントが発生した要素を参照し、`currentTarget` はこのイベントハンドラーが接続されている要素を参照するという違いがあります。
+
+イベントがバブルアップしている間 `target` は同じままですが、`currentTarget` は階層内の接続されている要素が異なれば、イベントハンドラーも異なります。
+
+上の[バブリングの例](#バブリングの例)を少しアレンジすると、このことがわかります。先ほどと同じ HTML を使用しています。
+
+```html
+<body>
+  <div id="container">
+    <button>ここをクリック</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+JavaScript はほとんど同じですが、`target` と `currentTarget` の両方をログ出力しています。
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  const logTarget = `Target: ${e.target.tagName}`;
+  const logCurrentTarget = `Current target: ${e.currentTarget.tagName}`;
+  output.textContent += `${logTarget}, ${logCurrentTarget}\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+ボタンをクリックしたとき、イベントハンドラーがボタン自身、`<div>`、`<body>` のいずれに接続されていても、`target` は常にボタン要素であることに注意してください。しかし、`currentTarget` は現在実行しているイベントハンドラーの要素を特定します。
+
+{{embedlivesample("target and currentTarget")}}
+
+`target` プロパティは、上記の[イベント移譲](#イベント移譲)の例のように、イベント移譲でよく使用します。
+
+## スキルテスト
+
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: イベント](/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)を参照してください。
+
+## まとめ
+
+これで、この早い段階でウェブイベントについて知っておくべきことはすべてわかったはずです。
+前述したように、イベントは実のところ JavaScript のコアには属しません。ブラウザーの Web API で定義されています。
+
+また、JavaScript が使用されるさまざまなコンテキストには、異なるイベントモデルがあることを理解することが重要です。Web API から、ブラウザーの WebExtensions や Node.js (サーバーサイド JavaScript) などの他の領域までです。
+これでこれらの領域をすべて理解できるとは思っていませんが、ウェブ開発を学習していく上で、イベントの基本を理解しておくことはとても役に立ちます。
+
+> [!NOTE]
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+
+## 関連情報
+
+- [domevents.dev](https://domevents.dev/) — 探究を通して DOM イベントシステムの動作について学ぶことができる、とても有益なインタラクティブな遊び場アプリです。
+- [イベントリファレンス](/ja/docs/Web/Events)
+- [Event order](https://www.quirksmode.org/js/events_order.html) （キャプチャとバブリングの議論） — Peter-Paul Koch による素晴らしい作品です。
+
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/ja/learn/javascript/building_blocks/events/index.md b/files/ja/learn/javascript/building_blocks/events/index.md
index 477305fce31cc0..ba1bc16b195d71 100644
--- a/files/ja/learn/javascript/building_blocks/events/index.md
+++ b/files/ja/learn/javascript/building_blocks/events/index.md
@@ -53,7 +53,8 @@ l10n:
 このようなコードのブロックが、イベントに応答して実行するように定義されている場合、**イベントハンドラーを登録**していると言います。
 なお、イベントハンドラーは時に **イベントリスナー** と呼ばれることがあります。目的からすれば言い換えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を待ち受けし、イベントハンドラーは発生したイベントに応答して動作するコードです。
 
-> **メモ:** ウェブのイベントは JavaScript のコア言語の一部ではありません。それらはブラウザーに組み込まれた API の一部として定義されています。
+> [!NOTE]
+> ウェブのイベントは JavaScript のコア言語の一部ではありません。それらはブラウザーに組み込まれた API の一部として定義されています。
 
 ### 例: クリックイベントの扱い
 
@@ -313,15 +314,18 @@ function bgChange(e) {
 btn.addEventListener("click", bgChange);
 ```
 
-> **メモ:** この例の[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/random-color-eventobject.html)が GitHub 上にあります（また、[ライブ実行を見る](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)ことができます）。
+> [!NOTE]
+> この例の[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/random-color-eventobject.html)が GitHub 上にあります（また、[ライブ実行を見る](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)ことができます）。
 
 イベントオブジェクト **e** が関数に含まれていて、関数内で `e.target` — これはボタン自身 — の背景色スタイルを設定しているのがわかるでしょう。
 イベントオブジェクトの `target` プロパティは、常にイベントが生じた要素への参照となっています。
 ですから、この例ではページではなく、ボタンの背景色がランダムに変わります。
 
-> **メモ:** 下記の[イベントの移譲](#イベントの移譲)の節で、 `event.target` を使用している例があります。
+> [!NOTE]
+> 下記の[イベントの移譲](#イベントの移譲)の節で、 `event.target` を使用している例があります。
 
-> **メモ:** イベントオブジェクトには好きな名前が使えます。イベントハンドラー関数のカッコの中に使いたい名前を書くだけです。
+> [!NOTE]
+> イベントオブジェクトには好きな名前が使えます。イベントハンドラー関数のカッコの中に使いたい名前を書くだけです。
 > `e`/`evt`/`event` が開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。
 > 常に一貫性を保つことは良いことです。自分自身に対しても、可能であれば他の人に対しても。
 
@@ -409,7 +413,8 @@ form.addEventListener("submit", (e) => {
 
 {{ EmbedLiveSample('Preventing_default_behavior', '100%', 180, "", "") }}
 
-> **メモ:** ソースコード全体については、 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html) を（および[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)も）ご覧ください。
+> [!NOTE]
+> ソースコード全体については、 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html) を（および[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)も）ご覧ください。
 
 ## イベントのバブリング
 
@@ -748,9 +753,11 @@ container.addEventListener("click", (event) => {
 
 {{ EmbedLiveSample('Event delegation', '100%', 430, "", "") }}
 
-> **メモ:** この例では、 `event.target` を使用して、イベントの対象となった要素（つまり、最も内側の要素）を取得しています。もし、このイベントを処理した要素（この場合はコンテナー）にアクセスしたい場合は、 `event.currentTarget` を使用することができます。
+> [!NOTE]
+> この例では、 `event.target` を使用して、イベントの対象となった要素（つまり、最も内側の要素）を取得しています。もし、このイベントを処理した要素（この場合はコンテナー）にアクセスしたい場合は、 `event.currentTarget` を使用することができます。
 
-> **メモ:** 完全なソースコードは [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html) を参照してください。こちらから[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)も確認してください。
+> [!NOTE]
+> 完全なソースコードは [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html) を参照してください。こちらから[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)も確認してください。
 
 ## ウェブページだけではない
 
@@ -778,7 +785,8 @@ The [HTTP connect event docs](https://nodejs.org/api/http.html#event-connect) pr
 また、JavaScript が使用されるさまざまなコンテキストには、異なるイベントモデルがあることを理解することも重要です。ウェブ API から、ブラウザー WebExtensions や Node.js (サーバーサイド JavaScript) など、他にもさまざまな分野があります。
 これでこれらの領域をすべて理解できるとは思っていませんが、ウェブ開発者を学習していく上で、イベントの基本的なことを理解しておくことはとても役に立ちます。
 
-> **メモ:** もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+> [!NOTE]
+> もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
 ## 関連情報
 
diff --git a/files/ja/learn/javascript/building_blocks/functions/index.md b/files/ja/learn/javascript/building_blocks/functions/index.md
index 9d2c41a1802f2f..97bec2c49cc5c6 100644
--- a/files/ja/learn/javascript/building_blocks/functions/index.md
+++ b/files/ja/learn/javascript/building_blocks/functions/index.md
@@ -71,7 +71,8 @@ const myNumber = Math.random();
 
 私たちは関数を使ってきました。
 
-> **メモ:** これらの機能に慣れるために、必要なときにはこういった行をあなたのブラウザーの JavaScript コンソールにいつでも入力してみてください。
+> [!NOTE]
+> これらの機能に慣れるために、必要なときにはこういった行をあなたのブラウザーの JavaScript コンソールにいつでも入力してみてください。
 
 JavaScript 言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動（走らせたり実行する事の別の言い方）するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは、背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++のような低レベルのシステム言語で書かれています。
 
@@ -126,13 +127,15 @@ myFunction();
 // 関数を一度呼び出す
 ```
 
-> **メモ:** この形で関数を作成することは、**関数宣言**とも呼ばれます。関数定義の上で関数を呼び出してもうまく動作するように、常に巻き上げが行われます。
+> [!NOTE]
+> この形で関数を作成することは、**関数宣言**とも呼ばれます。関数定義の上で関数を呼び出してもうまく動作するように、常に巻き上げが行われます。
 
 ## 関数の引数
 
 関数によっては、呼び出す際に**引数**を指定することが求められるものがあります。これは関数の括弧の中に記載する必要がある値で、関数が正しく動作するために必要な値です。
 
-> **メモ:** 引数はパラメーター、プロパティ、属性などと呼ばれることもあります。
+> [!NOTE]
+> 引数はパラメーター、プロパティ、属性などと呼ばれることもあります。
 
 例えば、ブラウザー内蔵の [Math.random()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 関数は引数を要求しません。呼び出されると、常に 0 から 1 の間の乱数を返します。
 
@@ -147,7 +150,8 @@ const myText = "I am a string";
 const newString = myText.replace("string", "sausage");
 ```
 
-> **メモ:** 複数の引数を指定する必要がある場合は、カンマで区切ります。
+> [!NOTE]
+> 複数の引数を指定する必要がある場合は、カンマで区切ります。
 
 ### オプション引数
 
@@ -199,7 +203,8 @@ function myFunction() {
 
 これは名前がないため、**無名関数**と呼ばれます。無名関数は、ある関数が他の関数を引数として受け取ることを想定している場合に多く見られます。この場合、関数の引数はしばしば匿名関数として渡されます。
 
-> **メモ:** この形で関数を作成することは、**関数式**とも呼ばれます。関数宣言とは異なり、関数式は巻き上げが行われません。
+> [!NOTE]
+> この形で関数を作成することは、**関数式**とも呼ばれます。関数宣言とは異なり、関数式は巻き上げが行われません。
 
 ### 無名関数の例
 
@@ -276,7 +281,8 @@ textBox.addEventListener("keydown", (event) =>
 
 アロー関数を使用することで、コードをより短く、読み取りやすくすることができますので、使用することをお勧めします。詳しくは、 [JavaScript ガイドのアロー関数の節](/ja/docs/Web/JavaScript/Guide/Functions#アロー関数) や、[アロー関数のリファレンスページ](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions) を参照してください。
 
-> **メモ:** アロー関数と通常の関数には微妙な違いがあります。それらはこの入門ガイドの範囲外であり、ここで説明したようなケースで違いが生じることはほとんどありません。詳しくは[アロー関数のリファレンスドキュメント](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を参照してください。
+> [!NOTE]
+> アロー関数と通常の関数には微妙な違いがあります。それらはこの入門ガイドの範囲外であり、ここで説明したようなケースで違いが生じることはほとんどありません。詳しくは[アロー関数のリファレンスドキュメント](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を参照してください。
 
 ### アロー関数のライブサンプル
 
@@ -347,7 +353,8 @@ function greeting() {
 
 呼び出したい関数はどちらも `greeting()` と呼ばれていますが、 `first.js` ファイルの `greeting()` 関数にしかアクセスすることができません（2 つ目は無視されます）。さらに、（`second.js`ファイルで）変数 `name` に新しい値を割り当てようとするとエラーになります。既に `const` で宣言されているので、再代入できないからです。
 
-> **メモ:** この例を [GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) できます（[ソースコード](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)はこちら）。
+> [!NOTE]
+> この例を [GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) できます（[ソースコード](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)はこちら）。
 
 コードの一部を関数の中に閉じ込めておくことは、このような問題を避けることができ、最善の手法と考えられています。
 
@@ -449,7 +456,8 @@ function greeting() {
 
    今度は `a()` と `b()` の両方の呼び出しで、迷惑な "[ReferenceError: _variable name_ is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)" エラーが返されます。これは `output()` 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
 
-> **メモ:** 同じスコープルールはループ（`for() { }` など）と条件ブロック（`if() { }` など）には適用されません。それらはとてもよく似ていますが、同じものではありません。混乱しないように注意してください。
+> [!NOTE]
+> 同じスコープルールはループ（`for() { }` など）と条件ブロック（`if() { }` など）には適用されません。それらはとてもよく似ていますが、同じものではありません。混乱しないように注意してください。
 
 > **メモ:** [ReferenceError: "x" is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined) というエラーは、遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。
 
diff --git a/files/ja/learn/javascript/building_blocks/image_gallery/index.md b/files/ja/learn/javascript/building_blocks/image_gallery/index.md
index 1a4c31a19db129..f8ef7adcf0eef8 100644
--- a/files/ja/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/ja/learn/javascript/building_blocks/image_gallery/index.md
@@ -32,7 +32,8 @@ JavaScript の基本的な構成要素を見てきたところで、これから
 
 別の方法として、オンラインエディターを使用することもできます。例えば、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などです。
 
-> **メモ:** もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+> [!NOTE]
+> もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
 ## プロジェクト概要
 
diff --git a/files/ja/learn/javascript/building_blocks/index.md b/files/ja/learn/javascript/building_blocks/index.md
index 20436a10741e5d..f5918f0e659539 100644
--- a/files/ja/learn/javascript/building_blocks/index.md
+++ b/files/ja/learn/javascript/building_blocks/index.md
@@ -9,7 +9,7 @@ l10n:
 
 このモジュールでは、条件文、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
@@ -21,7 +21,8 @@ l10n:
 
 このモジュールを始める前に、[HTML](/ja/docs/Learn/HTML/Introduction_to_HTML) や [CSS](/ja/docs/Learn/CSS/First_steps) の基本に慣れておくべきです。また前のモジュールの [JavaScript の第一歩](/ja/docs/Learn/JavaScript/First_steps) も終了させておくべきです。
 
-> **メモ:** もしあなたが作業しているコンピューターやタブレット、その他の端末で自分でファイルを作れない場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったようなオンラインコーディングプログラムで（ほとんどの場合）試すことができます。
+> [!NOTE]
+> もしあなたが作業しているコンピューターやタブレット、その他の端末で自分でファイルを作れない場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったようなオンラインコーディングプログラムで（ほとんどの場合）試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.md b/files/ja/learn/javascript/building_blocks/looping_code/index.md
index 44103f1385602a..882d8f20484459 100644
--- a/files/ja/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/ja/learn/javascript/building_blocks/looping_code/index.md
@@ -534,7 +534,8 @@ while (i < cats.length) {
 console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 ```
 
-> **メモ:** これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)を見ることもできます）。
+> [!NOTE]
+> これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)を見ることもできます）。
 
 [do...while](/ja/docs/Web/JavaScript/Reference/Statements/do...while) ループはとてもよく似ていますが、while 構造の別な形です。
 
@@ -573,9 +574,11 @@ do {
 console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 ```
 
-> **メモ:** こちらも、これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)を見ることもできます）。
+> [!NOTE]
+> こちらも、これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)を見ることもできます）。
 
-> **警告:** while と do...while では、すべてのループと同様に、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が false となるようにする必要があります。
+> [!WARNING]
+> while と do...while では、すべてのループと同様に、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が false となるようにする必要があります。
 > そうしなければループは永遠に進み、ブラウザーはそれ強制的に停止させるか、クラッシュします。これは**無限ループ**と呼ばれます。
 
 ## アクティブラーニング: 発射のカウントダウン
@@ -599,7 +602,8 @@ console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 
 - イテレーターを含めることを忘れないでください！ですが、この例では各反復の後にカウント（アップではなく）ダウンするため、`i++` は要らないでしょう。減少方向にどうやって反復するのでしょうか？
 
-> **メモ:** あなたがループ（例えば while(i>=0)）からタイピングを始めると、ブラウザーが固まってしまうかもしれません。終了条件をまだ入力していないからです。注意して下さい。この問題に対処するにはコメントの中にコードを書き始めて、完了してからコメントを削除することです。
+> [!NOTE]
+> あなたがループ（例えば while(i>=0)）からタイピングを始めると、ブラウザーが固まってしまうかもしれません。終了条件をまだ入力していないからです。注意して下さい。この問題に対処するにはコメントの中にコードを書き始めて、完了してからコメントを削除することです。
 
 間違えた場合は、［リセット］ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、［解答を表示］を押して解決策を見てください。
 
@@ -982,7 +986,8 @@ do {
 } while (条件)
 ```
 
-> **メモ:** 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度な[ループと反復処理ガイド](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration)をお読みください。
+> [!NOTE]
+> 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度な[ループと反復処理ガイド](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration)をお読みください。
 
 ## スキルテスト
 
diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.md b/files/ja/learn/javascript/building_blocks/return_values/index.md
index f6b1da4644d1ff..18957b89c832e2 100644
--- a/files/ja/learn/javascript/building_blocks/return_values/index.md
+++ b/files/ja/learn/javascript/building_blocks/return_values/index.md
@@ -166,7 +166,8 @@ ctx.arc(500, 200, 35, 0, 2 * Math.PI);
 - if 文で、数値でないものが入力された場合にエラーメッセージを表示します。この条件は、式 `isNaN(num)` が `true` を返すかどうかチェックします。 [`isNaN()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN) 関数は `num` が数値でないかどうかを検査します。数値でない場合は `true` を返し、そうであれば `false` を返します。
 - もしこの条件が `false` を返した場合、`num` の値は数値であり、関数が段落要素内に数値の二乗、三乗、階乗の値を示す文を表示します。この文では `squared()`、`cubed()`、`factorial()` の各関数を呼び出し、必要な値を計算します。
 
-> **メモ:** もしサンプルがうまく動作しない場合は、[GitHub 上の完成版](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-library-finished.html)と比較などしてみてください（[ライブ実行でも確認](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)できます）。またはお問い合わせください。
+> [!NOTE]
+> もしサンプルがうまく動作しない場合は、[GitHub 上の完成版](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-library-finished.html)と比較などしてみてください（[ライブ実行でも確認](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)できます）。またはお問い合わせください。
 
 ## あなたの番
 
diff --git a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
index 5fd98dd7ddb087..a0a1ae4b8ebe8b 100644
--- a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
+++ b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[コードでの意思決定 — 条件文](/ja/docs/Learn/JavaScript/Building_blocks/conditionals)を理解したかどうかを判定することです。
 
-> **メモ:** コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
+> [!NOTE]
+> コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
 > エラーがある場合、ページの結果パネルまたはブラウザーの JavaScript コンソールでログ出力するので、助けになります。
 >
 > もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
@@ -29,7 +30,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/conditionals/conditionals1-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -56,7 +57,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals2.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/conditionals/conditionals2-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -77,6 +78,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals3.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/conditionals/conditionals3-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
diff --git a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__events/index.md b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
index a94ade8f25bd0c..d38a6e3eb987cf 100644
--- a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
+++ b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[イベント入門](/ja/docs/Learn/JavaScript/Building_blocks/Events)の記事を理解したかどうかを判定することです。
 
-> **メモ:** コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
+> [!NOTE]
+> コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
 > エラーがある場合、ページの結果パネルまたはブラウザーの JavaScript コンソールでログ出力するので、助けになります。
 >
 > もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
@@ -30,7 +31,7 @@ HTML は変更しないでください。 JavaScript のみを変更してくだ
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/events/events1-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -46,7 +47,7 @@ HTML は変更しないでください。 JavaScript のみを変更してくだ
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events2.html", '100%', 650)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/events/events2-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -60,6 +61,6 @@ HTML は変更しないでください。 JavaScript のみを変更してくだ
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events3.html", '100%', 600)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/events/events3-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
diff --git a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
index b4c3f3a86e96f4..59b2d67530efc2 100644
--- a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
+++ b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[関数 — 再利用可能なコードブロック](/ja/docs/Learn/JavaScript/Building_blocks/Functions)、[独自の関数を作る](/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)、[関数の返値](/ja/docs/Learn/JavaScript/Building_blocks/Return_values)を理解したかどうかを判定することです。
 
-> **メモ:** コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
+> [!NOTE]
+> コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
 > エラーがある場合、ページの結果パネルまたはブラウザーの JavaScript コンソールでログ出力するので、助けになります。
 >
 > もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
@@ -28,7 +29,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/functions/functions1-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -48,7 +49,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions2.html", '100%', 700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/functions/functions2-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -64,7 +65,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions3.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/functions/functions3-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -76,6 +77,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions4.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/functions/functions4-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
diff --git a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
index c14dda9e2c88db..9dd7de700d095c 100644
--- a/files/ja/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
+++ b/files/ja/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[ループするコード](/ja/docs/Learn/JavaScript/Building_blocks/Looping_code)を理解したかどうかを判定することです。
 
-> **メモ:** コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
+> [!NOTE]
+> コードをダウンロードして、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに入力することで解答を試すことができます。
 >
 > もし行き詰まったら、私たちの[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
 
@@ -23,7 +24,7 @@ l10n:
 
 最初のループの課題では、単純なループを作成して、指定された `myArray` の項目をすべて読み込み、リストアイテム（つまり、 [`<li>`](/ja/docs/Web/HTML/Element/li) 要素）として画面に出力し、指定された `list` に追加します。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/loops/loops1-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -41,7 +42,7 @@ l10n:
 
 前回の課題では使用しなかった種類のループを使用しましょう。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/loops/loops2-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
 
@@ -57,6 +58,6 @@ l10n:
 
 前回までの 2 つの課題では使用しなかった種類のループを使用しましょう。
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の状態をダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/loops/loops3-download.html)すると、自分のエディターまたはオンラインエディターで作業することができます。
diff --git a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md
index 4da8d877427ebb..47ea629a83a80c 100644
--- a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -49,7 +49,8 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 
 クライアント側とサーバー側のストレージが一緒に使用されることがよくあります。例えば、音楽ファイル（ウェブゲームや音楽プレーヤーアプリケーションで使用できる）を一括してダウンロードし、クライアント側のデータベースに格納し、必要に応じて再生できるようにすることができます。ユーザーが音楽ファイルをダウンロードするのは最初だけで、その後でアクセスした場合はデータベースから取得することになります。
 
-> **メモ:** クライアント側ストレージ API を使用して格納できるデータの量には上限があります（おそらく個々の API ごとと、総量の両方）。正確な上限はブラウザーによって異なり、またユーザーの設定に基づく可能性もあります。詳細な情報は[ブラウザーのストレージ制限と削除基準](/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)を参照してください。
+> [!NOTE]
+> クライアント側ストレージ API を使用して格納できるデータの量には上限があります（おそらく個々の API ごとと、総量の両方）。正確な上限はブラウザーによって異なり、またユーザーの設定に基づく可能性もあります。詳細な情報は[ブラウザーのストレージ制限と削除基準](/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)を参照してください。
 
 ### 古い流儀: クッキー
 
@@ -236,7 +237,8 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid
 
 > **メモ:** [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。
 
-> **メモ:** 完成版のソースのうち `<script src="index.js" defer></script>` という行では、`defer` 属性により、ページを読み込み終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。
+> [!NOTE]
+> 完成版のソースのうち `<script src="index.js" defer></script>` という行では、`defer` 属性により、ページを読み込み終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。
 
 ## 複雑なデータを保存する — IndexedDB
 
@@ -289,7 +291,8 @@ IndexedDB API の詳細については、[IndexedDB の使用](/ja/docs/Web/API/
 
    IndexedDB でこれを扱うには、リクエストオブジェクトを作成します（これは好きなように名付けることができます。ここでは `openRequest` と名付けているので、何のためのオブジェクトかは明らかでしょう）。そして、リクエストが完全に完了したり、失敗したりしたときにコードを実行するために、イベントハンドラーを使用します。
 
-   > **メモ:** バージョン番号は重要です。もし、データベースをアップグレードしたい場合（例えば、テーブル構造を変更するなど）、バージョンを上げ、 `upgradeneeded` ハンドラー（下記参照）の内部で異なるスキーマを指定するなどして、コードを再度実行する必要があります。このチュートリアルでは、データベースのアップグレードについては触れません。
+   > [!NOTE]
+   > バージョン番号は重要です。もし、データベースをアップグレードしたい場合（例えば、テーブル構造を変更するなど）、バージョンを上げ、 `upgradeneeded` ハンドラー（下記参照）の内部で異なるスキーマを指定するなどして、コードを再度実行する必要があります。このチュートリアルでは、データベースのアップグレードについては触れません。
 
 3. 前回追加した部分のすぐ下に、次のイベントハンドラーを追加してください。
 
@@ -692,7 +695,8 @@ if ("serviceWorker" in navigator) {
 }
 ```
 
-> **メモ:** 指定された `sw.js` ファイルへのパスは、コードを含む JavaScript ファイルではなく、サイトのオリジンからの相対パスです。サービスワーカーは `https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js` にあります。オリジンは `https://mdn.github.io` なので、指定されたパスは `/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js` である必要があります。もし、この例を自分自身でホスティングしたい場合は、これを適宜変更する必要があります。これはかなり紛らわしいですが、セキュリティ上の理由からこのように作業する必要があるのです。
+> [!NOTE]
+> 指定された `sw.js` ファイルへのパスは、コードを含む JavaScript ファイルではなく、サイトのオリジンからの相対パスです。サービスワーカーは `https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js` にあります。オリジンは `https://mdn.github.io` なので、指定されたパスは `/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js` である必要があります。もし、この例を自分自身でホスティングしたい場合は、これを適宜変更する必要があります。これはかなり紛らわしいですが、セキュリティ上の理由からこのように作業する必要があるのです。
 
 #### サービスワーカーのインストール
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index 492bae7bf3649b..4c5b0ce6501d54 100644
--- a/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -72,7 +72,8 @@ HTML の [マルチメディアと埋め込み](/ja/docs/Learn/HTML/Multimedia_a
 
 代替コンテンツは、キャンバスのコンテンツに代わる有益なコンテンツを提供する必要があります。例えば、常に更新される株価のグラフをレンダリングしている場合、代替コンテンツは最新の株価グラフの静止画像で、`alt` テキストで株価の内容を言ったり、個々の株価ページへのリンクのリストを表示したりすることができます。
 
-> **メモ:** キャンバスのコンテンツはスクリーンリーダーにアクセスできません。キャンバス要素自体に直接 [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性の値として説明テキストを含めるか、開始タグと閉じられた `<canvas>` タグ内に代替コンテンツを記述してください。キャンバスのコンテンツは DOM に所属しませんが、その中にある代替コンテンツは所属します。
+> [!NOTE]
+> キャンバスのコンテンツはスクリーンリーダーにアクセスできません。キャンバス要素自体に直接 [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性の値として説明テキストを含めるか、開始タグと閉じられた `<canvas>` タグ内に代替コンテンツを記述してください。キャンバスのコンテンツは DOM に所属しませんが、その中にある代替コンテンツは所属します。
 
 ### キャンバスの作成とサイズ変更
 
@@ -104,7 +105,8 @@ HTML の [マルチメディアと埋め込み](/ja/docs/Learn/HTML/Multimedia_a
 
    また、複数の等号で代入を一斉に連結しているのがわかると思います。これは JavaScript で許可されており、複数の変数をすべて同じ値にしたい場合に有効なテクニックです。キャンバスの幅と高さは、変数 width/height で簡単にアクセスできるようにしたいと思いました。後で利用できるようにするために有用な値だからです（たとえば、キャンバスの幅のちょうど半分の大きさのものを描きたい場合など）。
 
-> **メモ:** 一般に、画像のサイズは、上記で説明したように、 HTML 属性または DOM プロパティを使用して設定する必要があります。 CSS を使用することもできますが、サイズ設定はキャンバスがレンダリングされた後に行われるため、他の画像と同様に（レンダリングされたキャンバスは単なる画像です）、画像がピクセル化したり歪んだりする可能性があるという問題があります。
+> [!NOTE]
+> 一般に、画像のサイズは、上記で説明したように、 HTML 属性または DOM プロパティを使用して設定する必要があります。 CSS を使用することもできますが、サイズ設定はキャンバスがレンダリングされた後に行われるため、他の画像と同様に（レンダリングされたキャンバスは単なる画像です）、画像がピクセル化したり歪んだりする可能性があるという問題があります。
 
 ### キャンバスのコンテキストと最終セットアップを取得する
 
@@ -116,7 +118,8 @@ HTML の [マルチメディアと埋め込み](/ja/docs/Learn/HTML/Multimedia_a
 const ctx = canvas.getContext("2d");
 ```
 
-> **メモ:** 他にも、 WebGL の場合は `webgl`、WebGL 2 の場合は `webgl2` などのコンテキスト値を選ぶことができますが、この記事では必要ありません。
+> [!NOTE]
+> 他にも、 WebGL の場合は `webgl`、WebGL 2 の場合は `webgl2` などのコンテキスト値を選ぶことができますが、この記事では必要ありません。
 
 これでキャンバスには下地ができ、描画する準備ができました。これで `ctx` 変数に {{domxref("CanvasRenderingContext2D")}} オブジェクトが格納され、キャンバス上でのすべての描画処理にはこのオブジェクトの操作が必要となります。
 
@@ -192,7 +195,8 @@ ctx.fillRect(0, 0, width, height);
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles/index.html", '100%', 250)}}
 
-> **メモ:** 完成版のコードは GitHub で [2_canvas_rectangles](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles) にあります。
+> [!NOTE]
+> 完成版のコードは GitHub で [2_canvas_rectangles](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles) にあります。
 
 ### パスの描画
 
@@ -281,7 +285,8 @@ ctx.fill();
 
    `arc()` は 6 つの引数を取ります。最初の 2 つは円弧の中心の位置を指定します (それぞれ X と Y)。3 番目は円の半径、4 番目と 5 番目は円を描く開始角度と終了角度を指定し（つまり 0 と 360 度を指定すると完全な円になります）、6 番目は円を反時計回りに描くか（反時計回り）時計回りに描くか（`false` は時計回り）を定義します。
 
-   > **メモ:** 0度は水平方向で右側です。
+   > [!NOTE]
+   > 0度は水平方向で右側です。
 
 2. もうひとつ、円弧を加えてみましょう。
 
@@ -302,9 +307,11 @@ ctx.fill();
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths/index.html", '100%', 200)}}
 
-> **メモ:** 完成したコードは、 GitHub で [3_canvas_paths](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths) として利用可能です。
+> [!NOTE]
+> 完成したコードは、 GitHub で [3_canvas_paths](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths) として利用可能です。
 
-> **メモ:** ベジェ曲線などの高度なパス描画機能については、[キャンバスでの図形の描画](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)チュートリアルをご覧ください。
+> [!NOTE]
+> ベジェ曲線などの高度なパス描画機能については、[キャンバスでの図形の描画](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)チュートリアルをご覧ください。
 
 ### テキスト
 
@@ -340,7 +347,8 @@ canvas.setAttribute("aria-label", "Canvas text");
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text/index.html", '100%', 180)}}
 
-> **メモ:** 完成したコードは、 GitHub で [4_canvas_text](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text) として利用することができます。
+> [!NOTE]
+> 完成したコードは、 GitHub で [4_canvas_text](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text) として利用することができます。
 
 どんなものが出来上がるか、遊んでみてください。キャンバスのテキストで利用できるオプションについては、[テキストの描画](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text)に詳細な情報があります。
 
@@ -391,7 +399,8 @@ canvas.setAttribute("aria-label", "Canvas text");
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images/index.html", '100%', 260)}}
 
-> **メモ:** 完成したコードは、 GitHub で [5_canvas_images](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images) として利用することができます。
+> [!NOTE]
+> 完成したコードは、 GitHub で [5_canvas_images](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images) として利用することができます。
 
 ## ループとアニメーション
 
@@ -469,7 +478,8 @@ canvas.setAttribute("aria-label", "Canvas text");
 - length`と`moveOffset` の値で遊んでみる。
 - 上で記載したが使用しなかった `rand()` 関数を使用して乱数を導入する。
 
-> **メモ:** 完成したコードは、GitHub で [6_canvas_for_loop](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop) として利用することができます。
+> [!NOTE]
+> 完成したコードは、GitHub で [6_canvas_for_loop](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop) として利用することができます。
 
 ### アニメーション
 
@@ -477,7 +487,8 @@ canvas.setAttribute("aria-label", "Canvas text");
 
 JavaScript で、関数を 1 秒間に数回繰り返し実行することができる関数がいくつかありますが、ここでの目的に最適なのは {{domxref("window.requestAnimationFrame()")}} です。これは 1 つの引数を取ります - 各フレームに対して実行したい関数の名前です。次にブラウザーが画面の内側へ更新する準備ができたとき、その関数が呼び出されます。その関数がアニメーションの新しい更新を描画し、関数の終わりの直前に再び `requestAnimationFrame()` を呼び出すと、アニメーションループが実行され続けます。ループは `requestAnimationFrame()` の呼び出しをやめるか、呼び出した後、フレームが呼び出される前に {{domxref("window.cancelAnimationFrame()")}} を呼び出すと終わりになります。
 
-> **メモ:** アニメーションを使用し終わったら、メインコードから `cancelAnimationFrame()` を呼び出して、まだ実行されるのを待っている更新がないことを確認するのは良い習慣です。
+> [!NOTE]
+> アニメーションを使用し終わったら、メインコードから `cancelAnimationFrame()` を呼び出して、まだ実行されるのを待っている更新がないことを確認するのは良い習慣です。
 
 ブラウザーは、アニメーションを一定の速度で実行したり、見えないものをアニメーションさせるのに無駄なリソースを使わないようにするなど、複雑な細部にわたって作業しています。
 
@@ -514,7 +525,8 @@ loop();
 4. 手順 2 で保存した設定を {{domxref("CanvasRenderingContext2D.restore", "restore()")}} を使用して復元します。
 5. `requestAnimationFrame()` を呼び出して、アニメーションの次のフレームを描画するように予約します。
 
-> **メモ:** ここでは `save()` と `restore()` は取り上げませんが、これらは[座標変換](/ja/docs/Web/API/Canvas_API/Tutorial/Transformations)のチュートリアル (とそれに続くもの) でうまく説明されています。
+> [!NOTE]
+> ここでは `save()` と `restore()` は取り上げませんが、これらは[座標変換](/ja/docs/Web/API/Canvas_API/Tutorial/Transformations)のチュートリアル (とそれに続くもの) でうまく説明されています。
 
 ### 簡単なキャラクターのアニメーション
 
@@ -625,7 +637,8 @@ loop();
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation/index.html", '100%', 260)}}
 
-> **メモ:** 最終的なコードは、GitHub 上の [7_canvas_walking_animation](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation) として利用できます。
+> [!NOTE]
+> 最終的なコードは、GitHub 上の [7_canvas_walking_animation](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation) として利用できます。
 
 ### 簡単なお絵描きアプリ
 
@@ -808,7 +821,8 @@ WebGLライブラリーを使って何かを作成する簡単な例を見てみ
 
 [完成したコードは GitHub で見つける](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-cube)ことができます。
 
-> **メモ:** GitHub リポジトリーには、もうひとつ興味深い 3D 立方体の例である [Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube) ([see it live also](https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/)) も掲載されています。これは {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して、コンピューターのウェブカメラから動画ストリームを受け取り、それをテクスチャとして立方体の横に投影しています。
+> [!NOTE]
+> GitHub リポジトリーには、もうひとつ興味深い 3D 立方体の例である [Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube) ([see it live also](https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/)) も掲載されています。これは {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して、コンピューターのウェブカメラから動画ストリームを受け取り、それをテクスチャとして立方体の横に投影しています。
 
 ## まとめ
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md
index 6af899594bcfa0..e7746883f0a686 100644
--- a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -55,7 +55,8 @@ l10n:
 - ページの更新が非常に速く、ページの更新を待つ必要がないため、サイトがより速く、より応答的に感じられることになります。
 - 更新のたびにダウンロードされるデータがいくらか減るので、帯域の無駄が少なくなります。これは、ブロードバンド接続のデスクトップではそれほど大きな問題ではないかもしれませんが、モバイル端末や高速なインターネットサービスを持たない国では大きな問題です。
 
-> **メモ:** 初期の頃、この一般的な技術は [Asynchronous](/ja/docs/Glossary/Asynchronous) JavaScript and XML ([Ajax](/ja/docs/Glossary/AJAX)) と呼ばれていましたが、これは XML データをリクエストする傾向があるためでした。最近では通常このようなことはありませんが（JSON をリクエストすることの方が多いでしょう）、結果的には同じことであり、 "Ajax" という用語は今でもこの技術を説明するのによく使用されています。
+> [!NOTE]
+> 初期の頃、この一般的な技術は [Asynchronous](/ja/docs/Glossary/Asynchronous) JavaScript and XML ([Ajax](/ja/docs/Glossary/AJAX)) と呼ばれていましたが、これは XML データをリクエストする傾向があるためでした。最近では通常このようなことはありませんが（JSON をリクエストすることの方が多いでしょう）、結果的には同じことであり、 "Ajax" という用語は今でもこの技術を説明するのによく使用されています。
 
 さらに高速化するために、一部のサイトでは、最初にリクエストされたときにユーザーのコンピューターに資産や データを保存しています。つまり、その後の訪問では、ページを最初に読み込むたびに新しいコピーをダウンロードせずに、 ローカルバージョンを使用するのです。コンテンツは、更新されたときだけサーバーから再読み込みされます。
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/index.md b/files/ja/learn/javascript/client-side_web_apis/index.md
index 634dc938188ad0..c58c42536efb3d 100644
--- a/files/ja/learn/javascript/client-side_web_apis/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/index.md
@@ -9,7 +9,7 @@ l10n:
 
 ウェブサイトやアプリケーション用にクライアント側の JavaScript を書いていると、すぐに**アプリケーションプログラミングインターフェイス** (**A**pplication **P**rogramming **I**nterfaces、**API**) にでくわします。API とはブラウザーやサイトが動作している OS の様々な面を操作したり、他のウェブサイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
@@ -23,7 +23,8 @@ l10n:
 
 [HTML](/ja/docs/Learn/HTML) と [CSS](/ja/docs/Learn/CSS) に関する基礎知識も役に立つでしょう。
 
-> **メモ:** もし自分のファイルを作成できないような端末上で作業しているなら、大半のコード例を [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) のようなオンラインプログラム作成・実行環境で試してみることもできます。
+> [!NOTE]
+> もし自分のファイルを作成できないような端末上で作業しているなら、大半のコード例を [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) のようなオンラインプログラム作成・実行環境で試してみることもできます。
 
 ## ガイド
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.md b/files/ja/learn/javascript/client-side_web_apis/introduction/index.md
index 878a01f343c1da..e25654f81820c2 100644
--- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.md
@@ -45,7 +45,8 @@ _画像提供: [超タコ足コンセント](https://www.flickr.com/photos/easy-
 
 それと同じことで、そうですね、例えば 3 次元グラフィックのプログラムを JavaScript や Python のような高水準言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピューターの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。
 
-> **メモ:** API という語についてもっと詳しいことは [API の用語解説](/ja/docs/Glossary/API) を参照して下さい。
+> [!NOTE]
+> API という語についてもっと詳しいことは [API の用語解説](/ja/docs/Glossary/API) を参照して下さい。
 
 ### クライアントサイド JavaScript での API
 
@@ -94,7 +95,8 @@ _画像提供: [超タコ足コンセント](https://www.flickr.com/photos/easy-
 - [Twilio API](https://www.twilio.com/) は、自分のアプリに音声や動画の通話機能を作成したり、SMS/MMS を送信したりなどするためのフレームワークを提供します。
 - [Mastodon API](https://docs.joinmastodon.org/api/) を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。
 
-> **メモ:** サードパーティ API については [Programmable Web API directory](http://www.programmableweb.com/category/all/apis) でもっと多くの情報を見られます。
+> [!NOTE]
+> サードパーティ API については [Programmable Web API directory](http://www.programmableweb.com/category/all/apis) でもっと多くの情報を見られます。
 
 ## API はどのように動作するのか
 
@@ -104,7 +106,8 @@ _画像提供: [超タコ足コンセント](https://www.flickr.com/photos/easy-
 
 コードは 1 つ以上の [JavaScript オブジェクト](/ja/docs/Learn/JavaScript/Objects)を使用して API と対話します。オブジェクトは API が使用するデータ（オブジェクトプロパティに含まれる）、および API が利用可能にする機能（オブジェクトメソッドに含まれる）のコンテナーとして機能します。
 
-> **メモ:** もし、まだオブジェクトがどのように動作するのかよくわからない場合は、先に進む前に [JavaScript オブジェクト](/ja/docs/Learn/JavaScript/Objects)モジュールに戻って練習をしてください。
+> [!NOTE]
+> もし、まだオブジェクトがどのように動作するのかよくわからない場合は、先に進む前に [JavaScript オブジェクト](/ja/docs/Learn/JavaScript/Objects)モジュールに戻って練習をしてください。
 
 ウェブオーディオ API の例に戻ってみましょう。ウェブオーディオ API はとても複雑な API で、たくさんのオブジェクトから成り立っています。わかりやすいものでいうと下記が挙げられます。
 
@@ -173,7 +176,8 @@ audioElement.addEventListener("ended", () => {
 });
 ```
 
-> **メモ:** 気づいた方もいるかも知れませんが、音声を再生・停止する `play()` と `pause()` メソッドは ウェブオーディオ API の一部ではなく、 {{domxref("HTMLMediaElement")}} API の一部です。これらは異なりますが、密接に関連しています。
+> [!NOTE]
+> 気づいた方もいるかも知れませんが、音声を再生・停止する `play()` と `pause()` メソッドは ウェブオーディオ API の一部ではなく、 {{domxref("HTMLMediaElement")}} API の一部です。これらは異なりますが、密接に関連しています。
 
 次に {{domxref("GainNode")}} を、 {{domxref("BaseAudioContext/createGain", "AudioContext.createGain()")}} を使用して作成します。このオブジェクトを使用して音声全体の音量を調整し、スライダーの値が変更される度にオーディオグラフのゲイン（音量）の値を変更する別のイベントハンドラーを作成します。
 
@@ -225,7 +229,8 @@ Ball.prototype.draw = function () {
 };
 ```
 
-> **メモ:** この実例を[弾むボールのデモ](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html) で見られます（[ライブ実行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html) も見てください）。
+> [!NOTE]
+> この実例を[弾むボールのデモ](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html) で見られます（[ライブ実行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html) も見てください）。
 
 ### 状態の変化を捉えるのにイベントを使う
 
@@ -273,7 +278,8 @@ WebAPI 機能は、 JavaScript や他のウェブ技術（例えば [同一オ
 
 ウェブオーディオ API や {{domxref("HTMLMediaElement")}} API には、[自動再生ポリシー](/ja/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy)と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。
 
-> **メモ:** ブラウザーの厳格さによっては、このようなセキュリティ機構により、例がローカルでは動作しなくなる場合があります。つまり、ローカルの例のファイルをウェブサーバーから実行するのではなく、ブラウザーに読み込んだ場合です。執筆時点では、ウェブオーディオ API の例はローカルでは Google Chrome で動作しません。動作する前に、GitHub にアップロードする必要がありました。
+> [!NOTE]
+> ブラウザーの厳格さによっては、このようなセキュリティ機構により、例がローカルでは動作しなくなる場合があります。つまり、ローカルの例のファイルをウェブサーバーから実行するのではなく、ブラウザーに読み込んだ場合です。執筆時点では、ウェブオーディオ API の例はローカルでは Google Chrome で動作しません。動作する前に、GitHub にアップロードする必要がありました。
 
 ## まとめ
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 1f8c2d0ea4367d..f264769b9542a7 100644
--- a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -71,7 +71,8 @@ l10n:
 
 ![ドキュメントオブジェクトモデルをツリー構造で表現したもの。トップノードは doctype と HTML 要素です。 HTML の子ノードには、 head と body が記載されます。それぞれの子要素が分岐となる。テキストは、空白も含めてすべて表示されます。](dom-screenshot.png)
 
-> **メモ:** この DOM ツリーの図は Ian Hickson の [Live DOM viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/) を使って作成しました。
+> [!NOTE]
+> この DOM ツリーの図は Ian Hickson の [Live DOM viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/) を使って作成しました。
 
 ツリーのそれぞれの項目は、ノードと呼ばれます。上の図では、ノードには要素（`HTML`、`HEAD`、`META` などと識別される）を表すものや 、テキスト（`#text` と識別される）を表すものがあることが分かります。[他の種類のノード](/ja/docs/Web/API/Node/nodeType)もありますが、よく見かけるものはこれらのものです。
 
@@ -217,7 +218,8 @@ linkPara.parentNode.removeChild(linkPara);
    </p>
    ```
 
-> **メモ:** JavaScript のプロパティ版では、 CSS スタイルが小文字のキャメルケースで書かれているのに対し、 CSS 版はハイフン区切りで書かれていることに注意してください（例: `backgroundColor` と `background-color`）。これらを混合しないように注意してください。さもなければ、これは動作しません。
+> [!NOTE]
+> JavaScript のプロパティ版では、 CSS スタイルが小文字のキャメルケースで書かれているのに対し、 CSS 版はハイフン区切りで書かれていることに注意してください（例: `backgroundColor` と `background-color`）。これらを混合しないように注意してください。さもなければ、これは動作しません。
 
 ドキュメントのスタイルを動的にいじる際によく使われる別のやり方をこれから見ていきましょう。
 
@@ -250,7 +252,8 @@ linkPara.parentNode.removeChild(linkPara);
 
 次の節では、 DOM API をより有用に使用する方法を見ていきます。
 
-> **メモ:** 私たちの [dom-example.html の完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html) のデモが GitHub にあります（[ライブ実行版も](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
+> [!NOTE]
+> 私たちの [dom-example.html の完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html) のデモが GitHub にあります（[ライブ実行版も](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
 
 ## アクティブラーニング: 動的な買い物リスト
 
@@ -278,7 +281,8 @@ linkPara.parentNode.removeChild(linkPara);
 10. 削除ボタンにイベントハンドラーを追加して、クリックされたらボタンが含まれているリスト項目全体を削除するようにします。
 11. 最後に、[`focus()`](/ja/docs/Web/API/HTMLElement/focus) メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。
 
-> **メモ:** 本当にどうしようもなく詰まったら、私たちの[完成版の買い物リスト](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)を見てください（[ライブ実行版](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)も見てください）。
+> [!NOTE]
+> 本当にどうしようもなく詰まったら、私たちの[完成版の買い物リスト](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)を見てください（[ライブ実行版](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)も見てください）。
 
 ## まとめ
 
diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 0540e4d5c68257..f5531256332ca5 100644
--- a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -40,7 +40,8 @@ l10n:
 
 [Simple Mapquest API の例](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/mapquest)を参考に、サードパーティ API とブラウザー API の違いを説明します。
 
-> **メモ:** 一度に[すべてのコード例を取得](/ja/docs/Learn#コード例の入手)したいかもしれませんが、その場合は、それぞれの節で必要な例ファイルをリポジトリーから検索すればよいでしょう。
+> [!NOTE]
+> 一度に[すべてのコード例を取得](/ja/docs/Learn#コード例の入手)したいかもしれませんが、その場合は、それぞれの節で必要な例ファイルをリポジトリーから検索すればよいでしょう。
 
 ### サードパーティのサーバーにある
 
@@ -80,7 +81,8 @@ const map = L.mapquest.map("map", {
 
 これが、Mapquest API が単純な地図を描くために必要なすべての情報です。接続しているサーバーは、表示されている地域の正しい地図タイルを表示するなど、複雑なものをすべて処理します。
 
-> **メモ:** API の中には、機能へのアクセスをわずかに異なる方法で処理するものがあり、開発者はデータを取得するために特定の URL パターンに対して HTTP リクエストを行う必要があります。これらは [RESTful API と呼ばれ、後で例が出てきます](#restful_api_—_nytimes)。
+> [!NOTE]
+> API の中には、機能へのアクセスをわずかに異なる方法で処理するものがあり、開発者はデータを取得するために特定の URL パターンに対して HTTP リクエストを行う必要があります。これらは [RESTful API と呼ばれ、後で例が出てきます](#restful_api_—_nytimes)。
 
 ### 通常は API キーが必要です
 
@@ -96,7 +98,8 @@ L.mapquest.key = "YOUR-API-KEY-HERE";
 
 この行では、アプリケーションで使用する API キーまたは開発者キーを指定します。アプリケーションの開発者は、キーを取得して API の機能へのアクセス許可を得るためにコードに含める必要があります。この例では、プレースホルダーを用意しました。
 
-> **メモ:** 独自の例を作成するときは、プレースホルダーの代わりに独自の API キーを使用します。
+> [!NOTE]
+> 独自の例を作成するときは、プレースホルダーの代わりに独自の API キーを使用します。
 
 他の API では、少し異なる方法でキーを含める必要があるかもしれませんが、ほとんどのパターンは比較的似ています。
 
@@ -164,7 +167,8 @@ L.marker([53.480759, -2.242631], {
 
 ドキュメントに記載されているその他のオプションを試してみて、何ができるか見てみましょう。Mapquest には、道案内や検索など、かなり高度な機能があります。
 
-> **メモ:** サンプルがうまく動作しない場合は、[完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/mapquest/finished/script.js)のコードをチェックしてみてください。
+> [!NOTE]
+> サンプルがうまく動作しない場合は、[完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/mapquest/finished/script.js)のコードをチェックしてみてください。
 
 ## RESTful API — NYTimes
 
@@ -249,9 +253,11 @@ L.marker([53.480759, -2.242631], {
 https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats&fq=document_type:("article")&begin_date=20170301&end_date=20170312
 ```
 
-> **メモ:** どのような URL 引数を含めることができるかについての詳細は、[NYTimes developer docs](https://developer.nytimes.com/) を参照してください。
+> [!NOTE]
+> どのような URL 引数を含めることができるかについての詳細は、[NYTimes developer docs](https://developer.nytimes.com/) を参照してください。
 
-> **メモ:** この例では初歩的なフォームデータの検証を行っています — 検索語フィールドは、フォームを送信する前に入力しなければなりません (`required` 属性を使用して達成されます)。日付フィールドには `pattern` 属性が指定されており、値が 8 個の数字 (`pattern="[0-9]{8}"`) で構成されていないと送信されません。これらがどのように機能するかについての詳細は[フォームデータ検証](/ja/docs/Learn/Forms/Form_validation)を参照してください。
+> [!NOTE]
+> この例では初歩的なフォームデータの検証を行っています — 検索語フィールドは、フォームを送信する前に入力しなければなりません (`required` 属性を使用して達成されます)。日付フィールドには `pattern` 属性が指定されており、値が 8 個の数字 (`pattern="[0-9]{8}"`) で構成されていないと送信されません。これらがどのように機能するかについての詳細は[フォームデータ検証](/ja/docs/Learn/Forms/Form_validation)を参照してください。
 
 ### API からデータを要求する
 
@@ -371,7 +377,8 @@ function displayResults(json) {
 
    2 番目の関数は逆の方法でほぼ正確に同じように動作しますが、`pageNumber` がすでに 0 ではないことを確認するという余分なステップを踏まなければなりません — もしフェッチリクエストがマイナスの `page` 引数で実行された場合、エラーを引き起こす可能性があります。もし `pageNumber` がすでに 0 であれば、処理能力を無駄にしないように、単に関数から [`return`](/ja/docs/Web/JavaScript/Reference/Statements/return) します（すでに最初のページにいるのであれば、同じ結果を再び読み込む必要はありません）。
 
-> **メモ:** 完成した [NYTimes API のサンプルコードは GitHub で見ることができます](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) （[ライブ動作はこちら](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)）。
+> [!NOTE]
+> 完成した [NYTimes API のサンプルコードは GitHub で見ることができます](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) （[ライブ動作はこちら](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)）。
 
 ## YouTube の例
 
diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.md b/files/ja/learn/javascript/first_steps/a_first_splash/index.md
index bed808b017c775..bab2f77568c8c4 100644
--- a/files/ja/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.md
@@ -28,7 +28,8 @@ JavaScript の理論や何ができるかを学んだところで、実践的な
 
 ここでは実に明確な目標を設定したいと思います。この記事の終わりまでに JavaScript を習得することや、あなたに依頼するコードをすべて理解することは期待されていません。その代わりに、 JavaScript の機能がどのように連携して動作するのか、 JavaScript を書くことがどのような感じなのか、そのイメージをつかんでもらいたいと思います。この後の記事で、ここで示した機能をすべてさらに詳しく説明しますので、すぐに理解できなくても心配しないでください。
 
-> **メモ:** JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、概念は大体同じです。
+> [!NOTE]
+> JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、概念は大体同じです。
 
 ## プログラマーのように考える
 
@@ -140,7 +141,8 @@ let resetButton;
 
 - 最後の 2 つの変数は、プレイヤーが予想した回数を記録するため 1 を（プレイヤーが何回予想したかの回数を追跡します）、そしてまだ存在していない（あとで追加する）リセットボタンへの参照を保持します。
 
-> **メモ:** 変数や定数についてはこのコースの間、[必要な情報を保管する — 変数](/ja/docs/Learn/JavaScript/First_steps/Variables)を始めとして何度も出てきます。
+> [!NOTE]
+> 変数や定数についてはこのコースの間、[必要な情報を保管する — 変数](/ja/docs/Learn/JavaScript/First_steps/Variables)を始めとして何度も出てきます。
 
 ### 関数
 
@@ -164,7 +166,8 @@ checkGuess();
 
 <kbd>Return</kbd>/<kbd>Enter</kbd> を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。
 
-> **メモ:** 関数については後の記事、[関数 — 再利用可能なコードブロック](/ja/docs/Learn/JavaScript/Building_blocks/Functions)で詳しく学びます。
+> [!NOTE]
+> 関数については後の記事、[関数 — 再利用可能なコードブロック](/ja/docs/Learn/JavaScript/Building_blocks/Functions)で詳しく学びます。
 
 ### 演算子
 
diff --git a/files/ja/learn/javascript/first_steps/arrays/index.md b/files/ja/learn/javascript/first_steps/arrays/index.md
index 50e08bc47c1f08..ff8b78189f0f34 100644
--- a/files/ja/learn/javascript/first_steps/arrays/index.md
+++ b/files/ja/learn/javascript/first_steps/arrays/index.md
@@ -84,7 +84,8 @@ console.log(shopping.length); // 5
    // 買い物リストは [ "タヒーニ", "牛乳", "チーズ", "ハム", "麺" ] に変更されています。
    ```
 
-   > **メモ:** 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます。
+   > [!NOTE]
+   > 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます。
 
 3. なお、配列の中の配列を多次元配列と呼びます。 2 つの角括弧を連結することで、それ自身が別の配列の中にある配列の中の項目にアクセスすることができます。例えば、 `random` 配列（前の節を参照）の 3 番目の項目である配列の中の 1 つの項目にアクセスするには、次のようにします。
 
@@ -225,7 +226,8 @@ console.log(longer); // [ "名古屋", "鹿児島" ]
 
 データが長い長い文字列の中に含まれていて、それを使いやすい形に分割して操作したいときがあります。例えばデータを表形式で表示するというようなときです。それには{{jsxref("String.prototype.split()","split()")}} メソッドが使用できます。このメソッドは文字列を分割するのに使用する文字を引数として取り、文字列をその文字で区切った部分文字列の配列に分割します。
 
-> **メモ:** 実際のところ、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。
+> [!NOTE]
+> 実際のところ、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。
 
 1. それではどのように動くか試してみましょう。まずは文字列をコンソールに作ります。
 
@@ -466,7 +468,8 @@ body {
 
 次の例では、もう少し単純に、検索ボックスのある、ダミーの検索サイトを用意しました。検索ボックスに文字が入力されたら、直前 5 つの検索語がリストに表示されます。検索された語が 5 を超えたら最後の検索語が削除されるようになります。新しい検索語が先頭に追加されるので、常に 5 つの検索語が表示されます。
 
-> **メモ:** 本当の検索アプリでは、前回の検索語をクリックすることでその検索に戻れて、実際に検索結果が表示されることでしょう！ただし、今は単純にしておきましょう。
+> [!NOTE]
+> 本当の検索アプリでは、前回の検索語をクリックすることでその検索に戻れて、実際に検索結果が表示されることでしょう！ただし、今は単純にしておきましょう。
 
 アプリを完成させるには...
 
diff --git a/files/ja/learn/javascript/first_steps/index.md b/files/ja/learn/javascript/first_steps/index.md
index 414df191a0a63b..3777ff036f0cba 100644
--- a/files/ja/learn/javascript/first_steps/index.md
+++ b/files/ja/learn/javascript/first_steps/index.md
@@ -9,7 +9,7 @@ l10n:
 
 最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何？」や「どのようなもの？」や「何ができる？」といったような基本的な質問に答えます。その後、変数や文字列、 数値、配列といったような言語の内容をお話しします。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者になりたいですか？
 >
@@ -25,7 +25,8 @@ l10n:
 - [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)
 - [CSS の第一歩](/ja/docs/Learn/CSS/First_steps)
 
-> **メモ:** 作業しているコンピューターやタブレットなどの端末で、自分でファイルを作れない場合は、 [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったようなオンラインコーディングプログラムで（ほとんどの場合）試すことができます。
+> [!NOTE]
+> 作業しているコンピューターやタブレットなどの端末で、自分でファイルを作れない場合は、 [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったようなオンラインコーディングプログラムで（ほとんどの場合）試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/javascript/first_steps/math/index.md b/files/ja/learn/javascript/first_steps/math/index.md
index e6cdca90249b59..4631ec4bb2ed1b 100644
--- a/files/ja/learn/javascript/first_steps/math/index.md
+++ b/files/ja/learn/javascript/first_steps/math/index.md
@@ -49,7 +49,8 @@ l10n:
 
 さらにちょっといいことを教えましょう。いくつかの他のプログラミング言語とは違い、JavaScript には数値（整数と小数の両方）を表すデータ型が一つしかありません。わかりますか？{{jsxref("Number","数値型 (Number)")}} で、これは整数と小数の両方です。これは JavaScript でどんな型の数値を扱おうとも、それらを全く同じように扱うことが可能だということを意味します。
 
-> **メモ:** 実は、JavaScript には 2 つ目の数値型である {{Glossary("BigInt")}} があり、これはとても大きな整数に使います。しかしこのコースの目的としては、`Number` の値だけに関心を持つことにします。
+> [!NOTE]
+> 実は、JavaScript には 2 つ目の数値型である {{Glossary("BigInt")}} があり、これはとても大きな整数に使います。しかしこのコースの目的としては、`Number` の値だけに関心を持つことにします。
 
 ### 私にとってすべては数字
 
@@ -178,9 +179,11 @@ myNumber = Number(myNumber) + 3;
   </tbody>
 </table>
 
-> **メモ:** 演算に使用される数のことを{{Glossary("Operand", "オペランド")}}と呼ぶことがあります。
+> [!NOTE]
+> 演算に使用される数のことを{{Glossary("Operand", "オペランド")}}と呼ぶことがあります。
 
-> **メモ:** べき乗が、よく似た動作をする古い {{jsxref("Math.pow()")}} メソッドを使って表現されているのを見ることがあるかもしれません。たとえば、 `Math.pow(7, 3)` では、 `7` が基数で `3` が指数であるため、式の結果は `343` になります。 `Math.pow(7, 3)` は `7**3` と同じです。
+> [!NOTE]
+> べき乗が、よく似た動作をする古い {{jsxref("Math.pow()")}} メソッドを使って表現されているのを見ることがあるかもしれません。たとえば、 `Math.pow(7, 3)` では、 `7` が基数で `3` が指数であるため、式の結果は `343` になります。 `Math.pow(7, 3)` は `7**3` と同じです。
 
 たぶん基本的な数学を教える必要はないでしょうが、ここに出てくる文法を理解しているかをテストしたいと思います。書き方を覚えるため、以下に示す例を[開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)に入力してみましょう。
 
@@ -234,7 +237,8 @@ num2 + num1 / 8 + 2;
 
 実際に実行し、結果を見てみてください。
 
-> **メモ:** JavaScript の演算子とその優先順位については[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)で確認することができます。
+> [!NOTE]
+> JavaScript の演算子とその優先順位については[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)で確認することができます。
 
 ## インクリメント演算子とデクリメント演算子
 
@@ -271,7 +275,8 @@ num2--;
 num2;
 ```
 
-> **メモ:** 変数の前に演算子を置くことで、ブラウザーにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は `++num1` や `--num2` のように入力してみてください。
+> [!NOTE]
+> 変数の前に演算子を置くことで、ブラウザーにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は `++num1` や `--num2` のように入力してみてください。
 
 ## 代入演算子
 
@@ -345,7 +350,8 @@ let y = 4; // y には 4 が入る
 x *= y; // x は 12 になる
 ```
 
-> **メモ:** もっとたくさんの[代入演算子があります](/ja/docs/Web/JavaScript/Guide/Expressions_and_operators#代入演算子)が、とりあえず今は基本的なものだけ知っておけばよいでしょう。
+> [!NOTE]
+> もっとたくさんの[代入演算子があります](/ja/docs/Web/JavaScript/Guide/Expressions_and_operators#代入演算子)が、とりあえず今は基本的なものだけ知っておけばよいでしょう。
 
 ## アクティブラーニング: canvas のボックスのサイズを変更する
 
@@ -379,7 +385,8 @@ x *= y; // x は 12 になる
 | `<=`   | 以下なり   | 左辺の値が右辺の値以下であることを判定します           | `3 <= 2`      |
 | `>=`   | 以上なり   | 左辺の値が右辺の値以上であることを判定します           | `5 >= 4`      |
 
-> **メモ:** もしかしたら `==` や `!=` といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらも JavaScript の有効な演算子ですが、`===` や `!==` とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。
+> [!NOTE]
+> もしかしたら `==` や `!=` といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらも JavaScript の有効な演算子ですが、`===` や `!==` とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。
 
 もし、これらの値をコンソールに入力したら、すべて `true` または `false` の値を返します。これは前回の記事で言及した、真偽値です。真偽値はとても便利です。コードで判断をすることを可能にしてくれます。また選択肢を選ぶときには毎回使うことになるでしょう。例えば以下のような場合に。
 
@@ -418,7 +425,8 @@ function updateBtn() {
 
 等価演算子が `updateBtn()` 関数の中で使用されていることがわかりますね。今回の場合は数値が同じ値かを判定するためには使用していません。ボタンの内容として設定されている文字列が、特定の文字列であるかどうかを比較しています。ただし、原理的には同じ働きです。もしボタンに「起動する」と書かれていれば、押されたときにボタンのラベルが「停止する」に代わります。もしボタンに「停止する」と書かれていれば、再度入れ替わって元に戻ります。
 
-> **メモ:** 2 つの状態を行き来するこのような操作を一般的に**トグル**といいます。スイッチの ON/OFF のように、ある状態がもう一つの状態にトグル (切り替え) するといいます。
+> [!NOTE]
+> 2 つの状態を行き来するこのような操作を一般的に**トグル**といいます。スイッチの ON/OFF のように、ある状態がもう一つの状態にトグル (切り替え) するといいます。
 
 ## スキルをテストしよう!
 
@@ -430,6 +438,7 @@ function updateBtn() {
 
 次の章では文字列と、文字列を JavaScript で操作する方法について見ていきます。
 
-> **メモ:** もし数学が好きで、 JavaScript にどう実装されているかをもっと知りたいのであれば、MDN の JavaScript のメインの章に詳細がたくさん載っています。まずは[数値と日付](/ja/docs/Web/JavaScript/Guide/Numbers_and_dates)や[式と演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_operators)辺りの記事から読むのがいいでしょう。
+> [!NOTE]
+> もし数学が好きで、 JavaScript にどう実装されているかをもっと知りたいのであれば、MDN の JavaScript のメインの章に詳細がたくさん載っています。まずは[数値と日付](/ja/docs/Web/JavaScript/Guide/Numbers_and_dates)や[式と演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_operators)辺りの記事から読むのがいいでしょう。
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
diff --git a/files/ja/learn/javascript/first_steps/silly_story_generator/index.md b/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
index cdb3884f8f2a23..52ce9143ac2527 100644
--- a/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
@@ -35,7 +35,8 @@ l10n:
 
 その代わりに、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) のようなサイトを使って評価試験を実施できます。 HTML、CSS、JavaScript をオンラインエディターに貼り付けてください。使っているオンラインエディターが独立した JavaScript パネルを持っていない場合、 HTML ページ内の `<script>` 要素内に書いても問題ありません。
 
-> **メモ:** 行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
+> [!NOTE]
+> 行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
 ## プロジェクトの要点
 
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
index 06e3dd47bea754..50f69dd33a1f0c 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、[配列](/ja/docs/Learn/JavaScript/First_steps/Arrays)の記事を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
@@ -23,7 +24,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/arrays/arrays1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -39,7 +40,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/arrays/arrays2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -56,7 +57,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [このタスクのための準備済みファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/arrays/arrays3-download.html) して、自分のエディターまたはオンラインエディターで動かせるようにしましょう。
 
@@ -71,6 +72,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays4.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/arrays/arrays4-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
index 4cf51843930c36..addb6bef721730 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、[JavaScript での基本演算 — 数値と演算子](/ja/docs/Learn/JavaScript/First_steps/Math) の記事を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 > コードにエラーがある場合、このページの結果パネルまたは JavaScript コンソールでログ出力されます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
@@ -32,7 +33,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/math/math1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -51,7 +52,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math2.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/math/math2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -64,6 +65,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math3.html", '100%', 550)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/math/math3-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__strings/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
index d781c263300ba2..fe8f48b40ab73e 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
@@ -9,11 +9,13 @@ l10n:
 
 このスキルテストの目的は、[テキストの扱い — JavaScript での文字列](/ja/docs/Learn/JavaScript/First_steps/Strings)および[便利な文字列メソッド](/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods)の記事を理解しているかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
 
-> **メモ:** 下記の例では、コードにエラーがある場合、ページ上の結果パネル（またはダウンロードするバージョンの場合は、 ブラウザーの JavaScript コンソール）に出力されるので、答えを見つけるのに役立ちます。
+> [!NOTE]
+> 下記の例では、コードにエラーがある場合、ページ上の結果パネル（またはダウンロードするバージョンの場合は、 ブラウザーの JavaScript コンソール）に出力されるので、答えを見つけるのに役立ちます。
 
 ## 文字列 1
 
@@ -28,7 +30,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/strings/strings1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -44,7 +46,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/strings/strings2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -60,7 +62,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/strings/strings3-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -79,6 +81,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/strings/strings4-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
index fcb61d712476d4..cb4778a011d551 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このスキルテストの目的は、あなたが[/ja/docs/Learn/JavaScript/First_steps/Variables](/ja/docs/Learn/JavaScript/First_steps/Variables)の記事を理解したかどうかを評価することです。
 
-> **メモ:** このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
+> [!NOTE]
+> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
 > コードにエラーがある場合、このページの結果パネルまたは JavaScript コンソールでログ出力されます。
 >
 > もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
@@ -26,7 +27,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/variables/variables1-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -38,7 +39,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/variables/variables2-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
 
@@ -50,6 +51,6 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/variables/variables3-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.md b/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
index 15bb1b1df5c2fc..0cf13de4b96a4c 100644
--- a/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
@@ -397,7 +397,8 @@ textarea.onkeyup = () => {
 3. この最新の変数を部分文字列として用いて、小文字の文字列の先頭の文字を大文字に置き換えます。この置き換え処理の結果を別の新しい変数に格納します。
 4. 変数 `result` の値を、`city` ではなく最終結果と等しくなるように変更します。
 
-> **メモ:** ヒント — 文字列メソッドの引数は文字列リテラルである必要はなく、変数であっても、メソッドを呼び出す変数であってもかまいません。
+> [!NOTE]
+> ヒント — 文字列メソッドの引数は文字列リテラルである必要はなく、変数であっても、メソッドを呼び出す変数であってもかまいません。
 
 ```html-nolint hidden
 <h2>出力結果</h2>
diff --git a/files/ja/learn/javascript/first_steps/variables/index.md b/files/ja/learn/javascript/first_steps/variables/index.md
index e636181f1aaa83..88dc74c0f0465f 100644
--- a/files/ja/learn/javascript/first_steps/variables/index.md
+++ b/files/ja/learn/javascript/first_steps/variables/index.md
@@ -86,7 +86,8 @@ buttonB.onclick = () => {
 
 変数についてもう一つ特筆すべき点は、変数には文字列や数字だけでなく、何でも格納できるということです。複雑なデータや、すごいことをする関数全体ですら保持できます。先に進めばさらに理解できるようになるでしょう。
 
-> **メモ:** 変数に値を「格納する」と言っていますが、これは重要な区別です。変数は値を保持するもので、値そのものではありません。つまり値の箱です。物を入れる段ボール箱のようなものだと思ってください。
+> [!NOTE]
+> 変数に値を「格納する」と言っていますが、これは重要な区別です。変数は値を保持するもので、値そのものではありません。つまり値の箱です。物を入れる段ボール箱のようなものだと思ってください。
 
 ![JavaScript の変数の例を示す 3 つの 3 次元の段ボール箱のスクリーンショットです。各ボックスには、さまざまな JavaScript のデータ型を表す仮想的な値が格納されています。サンプル値はそれぞれ "Bob", true, 35 です。](boxes.png)
 
@@ -101,7 +102,8 @@ let myAge;
 
 ここでは 2 つの変数 `myName` と `myAge` を宣言しています。それではこの 2 つの行をブラウザーのコンソールに入力してみましょう。続けて、好きな名前で変数を作ってみましょう。
 
-> **メモ:** JavaScript では、命令の行末ごとにセミコロン (`;`) を書かなければなりません。1 行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。
+> [!NOTE]
+> JavaScript では、命令の行末ごとにセミコロン (`;`) を書かなければなりません。1 行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。
 
 今実行している環境に値が存在するかどうか、変数名を入力して確かめることができます。例えば、
 
@@ -116,7 +118,8 @@ myAge;
 scoobyDoo;
 ```
 
-> **メモ:** 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。
+> [!NOTE]
+> 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。
 
 ## 変数の初期化
 
@@ -169,7 +172,8 @@ logName();
 var myName;
 ```
 
-> **メモ:** ウェブコンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1 行ずつ入力してもうまくいきません。
+> [!NOTE]
+> ウェブコンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1 行ずつ入力してもうまくいきません。
 
 これは**巻き上げ**が行われるため、動作します。件名に関する詳細については [var の巻き上げ](/ja/docs/Web/JavaScript/Reference/Statements/var#var_の巻き上げ)を読んでください。
 
@@ -200,7 +204,8 @@ myName = "Bob";
 
 これらの理由と複数の理由から、コードでは `var` よりも `let` を使用することをお勧めします。古いブラウザーの対応を明確に書いている場合を除き、2015 年以降、現代のすべてのブラウザーが `let` に対応しているため、`var` を使用する理由はなくなりました。
 
-> **メモ:** このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。[Chrome のコンソールの機能](https://goo.gle/devtools-const-repl)には、`let` と `const` による変数の再宣言が許可されているものがあります。
+> [!NOTE]
+> このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。[Chrome のコンソールの機能](https://docs.google.com/document/d/1NP_FnHr4WCZRp7exgUklvNiXrH3nujcfwvp2pzMQ8-0/edit#heading=h.7y5hynxk52e9)には、`let` と `const` による変数の再宣言が許可されているものがあります。
 >
 > ```plain
 > > let myName = "Chris";
@@ -233,7 +238,8 @@ myAge = 40;
 - 変数名は大文字・小文字を区別します。`myage` と `myAge` は違うものになります。
 - 最後に、JavaScript の予約語 ( これは JavaScript の文法を構成する単語のことです) を変数名には付けないようにしましょう。`var`、`function`、`let`、`for` 等を変数名として使用することは出来ません。ブラウザーはそれを異なるように解釈し、結果としてエラーとなるでしょう。
 
-> **メモ:** 避けるべき予約語の一覧は[字句文法 — キーワード](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#keywords)にあります。
+> [!NOTE]
+> 避けるべき予約語の一覧は[字句文法 — キーワード](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#keywords)にあります。
 
 良い名前の例：
 
diff --git a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
index 43011e2a032c8d..6643147ac91f29 100644
--- a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
@@ -108,7 +108,8 @@ API は大まかに 2 種類に分けられます。
   このウェブ技術を使用してすごいことをやってのける人たちがいます。 [Chrome Experiments](https://experiments.withgoogle.com/collection/chrome) や [webglsamples](https://webglsamples.org/) などのページを見てください。
 - [音声と動画の API](/ja/docs/Web/Media/Audio_and_video_delivery)、たとえば {{domxref("HTMLMediaElement")}} や {{domxref("WebRTC API", "WebRTC")}} などは適切な音声・動画をウェブページで再生したり、ウェブカメラの動画を撮って他の人のコンピューターで流したりするような、マルチメディアの可能性を示してくれます（私たちの [Snapshot demo](https://chrisdavidmills.github.io/snapshot/) を見てみてください）。
 
-> **メモ:** 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といった最近のブラウザーを使うとよいでしょう。
+> [!NOTE]
+> 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といった最近のブラウザーを使うとよいでしょう。
 > プロダクションコードを提供する（顧客に実際のコードを納品する）段になったら、[クロスブラウザーテスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)を読んでみるとよいでしょう。
 
 **サードパーティ API** はブラウザーには組み込まれておらず、さらに普通はウェブ上のどこかからそのコードと情報を探さなければなりません。例えば、
@@ -116,7 +117,8 @@ API は大まかに 2 種類に分けられます。
 - [Twitter API](https://developer.twitter.com/en/docs) を使用すると、ウェブサイトに最新のツイートを表示させることができます。
 - [Google マップ API](https://developers.google.com/maps/) や [OpenStreetMap API](https://wiki.openstreetmap.org/wiki/API) を使用すると、ウェブサイトに専用の地図を埋め込み、付加機能を付けることもできます。
 
-> **メモ:** このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ [クライアントサイドウェブ API モジュール](/ja/docs/Learn/JavaScript/Client-side_web_APIs) で扱っています。
+> [!NOTE]
+> このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ [クライアントサイドウェブ API モジュール](/ja/docs/Learn/JavaScript/Client-side_web_APIs) で扱っています。
 
 ワクワクすることはもっとたくさんあります！ ですが、まだ興奮しすぎないでください。24 時間程度の勉強だけでは、Facebook や Google マップや Instagram は作れません。まずはやらなければならない基本がたくさんあるのです。さあ、先に進みましょう！
 
@@ -138,7 +140,8 @@ JavaScript のごく一般的な用途は、(先ほど例示した) Document Obj
 ブラウザーのそれぞれのタブは、コードを実行するための入れ物を個別に持ちます (この入れ物を技術的用語では「実行環境」と呼びます)。つまり、それぞれのタブ内でコードは完全に分かれて実行されており、あるタブで動いているコードは他のタブや他のウェブサイトのコードに、直接的には干渉できません。これは良いセキュリティ対策です。
 互いに干渉することが出来てしまえば、ウェブの悪党たちは、他のタブで開いているウェブサイトから情報を盗み出したり、もっとひどいことをするためにコードを書き始めることでしょう。
 
-> **メモ:** 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。
+> [!NOTE]
+> 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。
 
 ### JavaScript の実行順序
 
@@ -162,7 +165,8 @@ function updateName() {
 もし、最初の 2 行を入れ替えた場合、動かなくなってしまいます。代わりに[ブラウザーの開発者コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)に `Uncaught ReferenceError: Cannot access 'button' before initialization` というエラーが出るでしょう。
 この意味は `button` オブジェクトがまだ初期化されていないため、イベントリスナーが設定できないということを表しています。
 
-> **メモ:** これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。
+> [!NOTE]
+> これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。
 
 ### インタープリターとコンパイルコード
 
@@ -237,12 +241,14 @@ CSS では {{htmlelement("link")}} 要素を使用することで外部のスタ
 
 5. ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、下に表示されるようになりましたね。
 
-> **メモ:** もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。
+> [!NOTE]
+> もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。
 > コピーしてコードを書いたファイルは `.html` というファイル名ですか？
 > {{htmlelement("script")}} 要素を `</head>` タグの直前に追加しましたか？
 > JavaScript を上の例の通りに書きましたか？ **JavaScript は大文字小文字を区別しますので、見えている通りに書かなければなりません。正しく書いていなければ、動いてくれません。**
 
-> **メモ:** GitHub にあるこちらのバージョン、[apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) ([ライブ](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html))でも見ることもできます。
+> [!NOTE]
+> GitHub にあるこちらのバージョン、[apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) ([ライブ](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html))でも見ることもできます。
 
 ### 外部 JavaScript
 
@@ -276,7 +282,8 @@ CSS では {{htmlelement("link")}} 要素を使用することで外部のスタ
    コードを整理して、複数の HTML ファイルから再利用できるようにするには、このようにするのが良いでしょう。
    大きなスクリプトの塊がないほうが、HTML も読みやすくなります。
 
-> **メモ:** GitHub でこちらのバージョンも見られます。[apply-javascript-external.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) と [script.js](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/script.js) です ([ライブでも見られます](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html))。
+> [!NOTE]
+> GitHub でこちらのバージョンも見られます。[apply-javascript-external.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) と [script.js](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/script.js) です ([ライブでも見られます](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html))。
 
 ### インライン JavaScript ハンドラー
 
@@ -321,7 +328,8 @@ for (const button of buttons) {
 これは `onclick` 属性よりも少し長いかもしれませんが、ページ上にいくつボタンがあっても、またいくつ追加されたり削除されたりしても、すべてのボタンに対して機能します。
 JavaScript は変更する必要がありません。
 
-> **メモ:** 自分の `apply-javascript.html` ファイルを編集して、いくつかボタンを追加してみて下さい。
+> [!NOTE]
+> 自分の `apply-javascript.html` ファイルを編集して、いくつかボタンを追加してみて下さい。
 > 再度読み込むとどのボタンを押しても段落が作られるのがわかるでしょう。
 > 素敵でしょう。
 
@@ -353,7 +361,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
 この場合、スクリプトと HTML の両方が同時に読み込まれ、コードが機能します。
 
-> **メモ:** 外部の場合は、`defer` 属性が問題を解決したため、`DOMContentLoaded` イベントを使用する必要はありませんでした。
+> [!NOTE]
+> 外部の場合は、`defer` 属性が問題を解決したため、`DOMContentLoaded` イベントを使用する必要はありませんでした。
 > `defer` は外部スクリプトに対してのみ機能するため、内蔵の例では `defer` による解決策を使用しませんでした。
 
 この問題に対する昔ながらの解決策は、すべての HTML が解釈された後に読み込まれるように、 body の下部に（たとえば `</body>` タグの直前に） script 要素を置くことでした。
@@ -462,7 +471,8 @@ for (const button of buttons) {
 }
 ```
 
-> **メモ:** 一般的にコメントは多いほうが少ないよりも優れていますが、変数が何であるかを説明する (変数名はおそらくもっと直感的にするべきです) ため、または非常に単純な操作を説明する (コードが複雑すぎるかもしれません) ために、多くのコメントを追加する場合は注意が必要です。
+> [!NOTE]
+> 一般的にコメントは多いほうが少ないよりも優れていますが、変数が何であるかを説明する (変数名はおそらくもっと直感的にするべきです) ため、または非常に単純な操作を説明する (コードが複雑すぎるかもしれません) ために、多くのコメントを追加する場合は注意が必要です。
 
 ## まとめ
 
diff --git a/files/ja/learn/javascript/first_steps/what_went_wrong/index.md b/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
index 9633d509a83835..791933247187d5 100644
--- a/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
@@ -42,7 +42,8 @@ l10n:
 1. はじめに、コピーしたファイルをお好みのテキストエディターとブラウザーで開きます。
 2. ゲームで遊んでみてください。気づきましたか。 "Submit guess" ボタンを押しても動きません！
 
-> **メモ:** 修正したい、自分自身でうまくいかないバージョンのゲーム例があるかもしれません。それでも、私たちがここで教えているテクニックを学ぶために、私たちのバージョンで記事を読み終えて作業してほしいと思います。そうすれば、自分の例を修正することができます。
+> [!NOTE]
+> 修正したい、自分自身でうまくいかないバージョンのゲーム例があるかもしれません。それでも、私たちがここで教えているテクニックを学ぶために、私たちのバージョンで記事を読み終えて作業してほしいと思います。そうすれば、自分の例を修正することができます。
 
 それでは、開発者コンソールで構文エラーがあるか調べてみましょう。それからエラーを修正します。以下でその方法を説明します。
 
@@ -63,7 +64,8 @@ l10n:
 
 3. テキストエディターで 86 行目を見てみましょう。
 
-   > **警告:** エラーメッセージは 86 行目ではないかもしれません。
+   > [!WARNING]
+   > エラーメッセージは 86 行目ではないかもしれません。
    >
    > ローカルマシンでライブサーバーを起動する拡張機能を持つコードエディターを使用している場合、余分なコードが挿入されます。このため、開発者ツールは 86 行目以外でエラーが発生したと掲載されます。
 
@@ -94,7 +96,8 @@ l10n:
 
    同じエラーですが、ブラウザーによって記述の仕方が異なります。
 
-   > **メモ:** このエラーは関数内部（`checkGuess() { }` ブロックの中）で発生しているため、ページを読み込んだだけでは出てきませんでした。後に続く[関数の記事](/ja/docs/Learn/JavaScript/Building_blocks/Functions)を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の `checkGuess()` 関数が実行されるまで実行されず、エラーも発生していませんでした。
+   > [!NOTE]
+   > このエラーは関数内部（`checkGuess() { }` ブロックの中）で発生しているため、ページを読み込んだだけでは出てきませんでした。後に続く[関数の記事](/ja/docs/Learn/JavaScript/Building_blocks/Functions)を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の `checkGuess()` 関数が実行されるまで実行されず、エラーも発生していませんでした。
 
 4. エラーで指定された行番号は 80 です。 80 行目を見ていくと、以下のコードがあります。
 
@@ -114,7 +117,8 @@ l10n:
    console.log(lowOrHi);
    ```
 
-   > **メモ:** このコードは、 49 行目で `lowOrHi` を設定しようとした後、その値をコンソールに出力します。詳しい情報は {{domxref("console/log_static", "console.log()")}} を参照してください。
+   > [!NOTE]
+   > このコードは、 49 行目で `lowOrHi` を設定しようとした後、その値をコンソールに出力します。詳しい情報は {{domxref("console/log_static", "console.log()")}} を参照してください。
 
 7. ファイルを保存して再度ブラウザーで読み込みます。そして `console.log()` の結果をコンソールで見てみましょう。 ![同じデモのスクリーンショット。コンソールには 1 つのログ文が表示され、単に "null" と表示されています。](console-log-output.png) 確かにこの時点では `lowOrHi` の値は `null` で、Firefox のエラーメッセージ `lowOrHi is null` と一致しています。つまり、49行目に問題があることは間違いありません。 [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) の値は「何もない」、つまり「値がない」という意味です。つまり、要素に `lowOrHi` を設定するコードは間違っているのです。
 
diff --git a/files/ja/learn/javascript/index.md b/files/ja/learn/javascript/index.md
index a1951f8a6a35c6..804fc000f2dc6e 100644
--- a/files/ja/learn/javascript/index.md
+++ b/files/ja/learn/javascript/index.md
@@ -26,7 +26,7 @@ JavaScript の基本をよく理解できたら、より高度なトピックに
 
 ## モジュール
 
-> **注目:**
+> [!CALLOUT]
 >
 > **現代の JavaScript に関する私たちの考え方**
 >
diff --git a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.md
index 20b3260a245be1..62e62c17ec4619 100644
--- a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -32,7 +32,8 @@ l10n:
 
 または、評価のために、 [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) を使うことができます。これらのオンラインエディターに HTML、CSS や JavaScript を貼り付けることができます。もしあなたが使用しているオンラインエディターが、別々の JavaScript/CSS のパネルを持っていない場合は、HTML内の `<script>`/`<style>` 要素を使って、インラインで書くことができます。
 
-> **メモ:** 行き詰まった場合は、サポートを依頼してください。このページの下部にある[評価とさらなる支援](#評価とさらなる支援)の節を参照してください。
+> [!NOTE]
+> 行き詰まった場合は、サポートを依頼してください。このページの下部にある[評価とさらなる支援](#評価とさらなる支援)の節を参照してください。
 
 ## ヒントと tips
 
diff --git a/files/ja/learn/javascript/objects/classes_in_javascript/index.md b/files/ja/learn/javascript/objects/classes_in_javascript/index.md
index 9a925a3bfdded6..ae34bb0c9f92f7 100644
--- a/files/ja/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/ja/learn/javascript/objects/classes_in_javascript/index.md
@@ -126,7 +126,8 @@ class Professor extends Person {
 
 新しい `Professor` が作成されたときに `teaches` を設定したいので、`name` と `teaches` を引数に取るコンストラクターを定義します。このコンストラクターが最初に行うことは、{{jsxref("Operators/super", "super()")}} を使ってスーパークラスのコンストラクターを呼び出すことで、`name` の引数を渡す。スーパークラスのコンストラクターは `name` を設定する処理を行います。その後、`Professor` コンストラクターは、`teaches` プロパティを設定します。
 
-> **メモ:** サブクラスが自分自身で初期化を行う場合は、最初に `super()` を用いてスーパークラスのコンストラクターを呼び出し、スーパークラスのコンストラクターが期待する引数をすべて渡す**必要があります**。
+> [!NOTE]
+> サブクラスが自分自身で初期化を行う場合は、最初に `super()` を用いてスーパークラスのコンストラクターを呼び出し、スーパークラスのコンストラクターが期待する引数をすべて渡す**必要があります**。
 
 また、スーパークラスの `introduceSelf()` メソッドをオーバーライドし、新しいメソッド `grade()` を追加して、論文を採点するようにしました（この教授はとても優秀ではなく、論文にランダムに成績を割り当てるだけです）。
 
diff --git a/files/ja/learn/javascript/objects/index.md b/files/ja/learn/javascript/objects/index.md
index a1b7bd037409a3..543c15df73627d 100644
--- a/files/ja/learn/javascript/objects/index.md
+++ b/files/ja/learn/javascript/objects/index.md
@@ -9,7 +9,7 @@ l10n:
 
 JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の最上部に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化して、便利なデータコンテナーとして動作する独自のオブジェクトを作成することもできます。JavaScript のオブジェクト指向の性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、このモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見ていきます。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者になりたい方へ
 >
@@ -23,7 +23,8 @@ JavaScript では、文字列や配列などの JavaScript のコア機能から
 
 また、JavaScript オブジェクトを詳細に調べる前に、JavaScript の基本についていくらか精通している必要があります。このモジュールを試す前に、[JavaScript の第一歩](/ja/docs/Learn/JavaScript/First_steps) と [JavaScript の構成要素](/ja/docs/Learn/JavaScript/Building_blocks)を通して学習してください。
 
-> **メモ:** もしあなたが作業しているコンピューター、タブレット、その他の端末で自分でファイルを作れない場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。
+> [!NOTE]
+> もしあなたが作業しているコンピューター、タブレット、その他の端末で自分でファイルを作れない場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/javascript/objects/json/index.md b/files/ja/learn/javascript/objects/json/index.md
index 8c0c1e41717c8d..3cf2899a289882 100644
--- a/files/ja/learn/javascript/objects/json/index.md
+++ b/files/ja/learn/javascript/objects/json/index.md
@@ -31,7 +31,8 @@ JavaScript Object Notation (JSON) は、構造化データを表現するため
 
 JSON は文字列として存在します。ですので、ネットワークを通してデータを転送したい場合に便利です。 JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。 JavaScript にはこれらを相互に変換できるメソッドを持った [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) というグローバルなオブジェクトがあるので、変換は難しくありません。
 
-> **メモ:** 文字列をネイティブオブジェクトへ変換することは「デシリアライズ」 (_deserialization_) と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは「シリアライズ」 (_serialization_) と呼ばれています。
+> [!NOTE]
+> 文字列をネイティブオブジェクトへ変換することは「デシリアライズ」 (_deserialization_) と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは「シリアライズ」 (_serialization_) と呼ばれています。
 
 JSON 文字列はそれ自身をファイルとして格納することもできます。 `.json` という拡張子の付いたただのテキストファイルで、 {{glossary("MIME type", "MIME タイプ")}}は `application/json` です。
 
@@ -98,7 +99,8 @@ superHeroes["members"][1]["powers"][2];
 4. そのオブジェクト内で、 `powers` プロパティへアクセスするため, `["powers"]` と指定します。
 5. `powers` プロパティは選択したヒーローの能力を含んだ配列となっており、その中の 3 番目が欲しいので、 `[2]` と記述します。
 
-> **メモ:** 上記の JSON は [JSONTest.html](https://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) で参照することができます（ページ内の[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/JSONTest.html)を参照してください）。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。
+> [!NOTE]
+> 上記の JSON は [JSONTest.html](https://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) で参照することができます（ページ内の[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/JSONTest.html)を参照してください）。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。
 
 ## JSON の配列
 
@@ -259,9 +261,11 @@ function populateHeroes(obj) {
 5. 別の `for` ループを使用して、今のヒーローの超能力を反復処理します。それぞれに対して `<li>` 要素を作成し、中に超能力を入れ、 `listItem` に `<ul>` 要素（`myList`）を `appendChild()` で追加します。
 6. 最後に、 `<h2>`、`<p>`、`<ul>` を `<article>` (`myArticle`) の中に追加してから、その `<article>` を `<section>` の中に追加します。これらを追加する順序は重要で、これが HTML の中で表示される順序になります。
 
-> **メモ:** 試してみるための例が上手く取得できなかった場合は、 [heroes-finished.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes-finished.html) ソースコードを参照してみてください（こちらで[ライブ実行](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)もできます）。
+> [!NOTE]
+> 試してみるための例が上手く取得できなかった場合は、 [heroes-finished.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes-finished.html) ソースコードを参照してみてください（こちらで[ライブ実行](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)もできます）。
 
-> **メモ:** もし、 JavaScript オブジェクトへのアクセスに使用しているドット/ブラケット記法がよく分からない場合は、 [superheroes.json](https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) を別のタブやテキストエディターで開き、それを参照しながら JavaScript を読んでみるとよいでしょう。また、ドットやブラケット記法の詳細については、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事を見返してみてください。
+> [!NOTE]
+> もし、 JavaScript オブジェクトへのアクセスに使用しているドット/ブラケット記法がよく分からない場合は、 [superheroes.json](https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) を別のタブやテキストエディターで開き、それを参照しながら JavaScript を読んでみるとよいでしょう。また、ドットやブラケット記法の詳細については、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事を見返してみてください。
 
 ### 最上位の関数の呼び出し
 
diff --git a/files/ja/learn/javascript/objects/object-oriented_programming/index.md b/files/ja/learn/javascript/objects/object-oriented_programming/index.md
index 86e9f494f877e3..61d2cbbeb23001 100644
--- a/files/ja/learn/javascript/objects/object-oriented_programming/index.md
+++ b/files/ja/learn/javascript/objects/object-oriented_programming/index.md
@@ -9,7 +9,8 @@ l10n:
 
 オブジェクト指向プログラミング (OOP) は、Java や C++ をはじめとする多くのプログラミング言語の基本となるプログラミングパラダイムです。この記事では、OOP の基本的な概念について説明します。主に**クラスとインスタンス**、**継承**、**カプセル化**の 3 つの概念を説明します。これは、特に JavaScript を参照することなくこれらの概念を記述することになるので、すべての例は{{Glossary("Pseudocode", "擬似コード")}}で示されます。
 
-> **メモ:** 正確には、ここで記述されている機能は、**クラスベース**または「古典的」OOP と呼ばれる OOP の特定のスタイルのものです。人々が OOP について語るとき、一般的にはこの種類を意味します。
+> [!NOTE]
+> 正確には、ここで記述されている機能は、**クラスベース**または「古典的」OOP と呼ばれる OOP の特定のスタイルのものです。人々が OOP について語るとき、一般的にはこの種類を意味します。
 
 その後、JavaScript で、コンストラクターとプロトタイプチェーンがこれらの OOP の概念にどのように関連しているか、またどのように異なるかを見ていきます。次の記事では、オブジェクト指向のプログラムを実装するために、JavaScript の追加機能を紹介します。
 
diff --git a/files/ja/learn/javascript/objects/object_building_practice/index.md b/files/ja/learn/javascript/objects/object_building_practice/index.md
index 315fbe815d2bb6..5aa5f0199895fb 100644
--- a/files/ja/learn/javascript/objects/object_building_practice/index.md
+++ b/files/ja/learn/javascript/objects/object_building_practice/index.md
@@ -291,7 +291,8 @@ function loop() {
 
 デモを保存して再読み込みし、ボールがぶつかった時に色が変わるのを見てください。
 
-> **メモ:** この例題を動かすのに困った時は、あなたの JavaScript コードを私たちの[完成版](https://github.com/mdn/learning-area/blob/main/javascript/oojs/bouncing-balls/main-finished.js)と比べてみてください（[ライブ実行版](https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html)も見られます）。
+> [!NOTE]
+> この例題を動かすのに困った時は、あなたの JavaScript コードを私たちの[完成版](https://github.com/mdn/learning-area/blob/main/javascript/oojs/bouncing-balls/main-finished.js)と比べてみてください（[ライブ実行版](https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html)も見られます）。
 
 ## まとめ
 
diff --git a/files/ja/learn/javascript/objects/object_prototypes/index.md b/files/ja/learn/javascript/objects/object_prototypes/index.md
index 5362e310e2115c..056bb3c26fc8fd 100644
--- a/files/ja/learn/javascript/objects/object_prototypes/index.md
+++ b/files/ja/learn/javascript/objects/object_prototypes/index.md
@@ -75,7 +75,8 @@ myObject.toString(); // "[object Object]"
 
 JavaScript ですべてのオブジェクトは、その**プロトタイプ**と呼ばれる組み込みプロパティを持っています。プロトタイプはそれ自体がオブジェクトなので、プロトタイプは自分自身でプロトタイプを持ち、**プロトタイプチェーン**と呼ばれるものを持ちます。自分自身でプロトタイプに`null`を持つプロトタイプに到達すると、その連鎖は終わります。
 
-> **メモ:** オブジェクトのプロトタイプを指し示すプロパティは `prototype` という名前では**ありません**。その名前は標準ではありませんが、実際にはすべてのブラウザーが [`__proto__`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) を使用しています。オブジェクトのプロトタイプにアクセスする標準的な方法は {{jsxref("Object/getPrototypeOf", "Object.getPrototypeOf()")}} メソッドです。
+> [!NOTE]
+> オブジェクトのプロトタイプを指し示すプロパティは `prototype` という名前では**ありません**。その名前は標準ではありませんが、実際にはすべてのブラウザーが [`__proto__`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) を使用しています。オブジェクトのプロトタイプにアクセスする標準的な方法は {{jsxref("Object/getPrototypeOf", "Object.getPrototypeOf()")}} メソッドです。
 
 オブジェクトのプロパティにアクセスしようとしたとき、オブジェクト自身にプロパティが見つからない場合は、プロトタイプを検索してプロパティを探します。それでもプロパティが見つからない場合は、プロトタイプのプロトタイプが検索され、プロパティが得られるか、チェーンの終わりに達するか、その場合は `undefined` を返すまで、そのような具合に繰り返します。
 
@@ -216,7 +217,8 @@ console.log(Object.hasOwn(irma, "name")); // true
 console.log(Object.hasOwn(irma, "greet")); // false
 ```
 
-> **メモ:** ここでは静的でない {{jsxref("Object/hasOwnProperty", "Object.hasOwnProperty()")}} メソッドを用いることもできますが、できれば `Object.hasOwn()` を用いることをお勧めします。
+> [!NOTE]
+> ここでは静的でない {{jsxref("Object/hasOwnProperty", "Object.hasOwnProperty()")}} メソッドを用いることもできますが、できれば `Object.hasOwn()` を用いることをお勧めします。
 
 ## プロトタイプと継承
 
diff --git a/files/ja/learn/javascript/objects/test_your_skills_colon__json/index.md b/files/ja/learn/javascript/objects/test_your_skills_colon__json/index.md
index 31cde3d3843574..b1790b880126ed 100644
--- a/files/ja/learn/javascript/objects/test_your_skills_colon__json/index.md
+++ b/files/ja/learn/javascript/objects/test_your_skills_colon__json/index.md
@@ -9,11 +9,13 @@ l10n:
 
 このスキルテストの目的は、[JSON の操作](/ja/docs/Learn/JavaScript/Objects/JSON)の記事を理解できたかどうかを評価することです。
 
-> **メモ:** 下記のインタラクティブエディターで解答を試すことができますが、コードをダウンロードして、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) などのオンラインツールを使用して作業すると便利です。
+> [!NOTE]
+> 下記のインタラクティブエディターで解答を試すことができますが、コードをダウンロードして、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) などのオンラインツールを使用して作業すると便利です。
 >
 > もし行き詰まった場合は、このページの下にある「評価またはさらなる支援」(#評価またはさらなる支援)の節を参照して、私たちに支援を要求してください。
 
-> **メモ:** 下記の例では、コードにエラーがある場合、ページ上の結果パネルに出力されるので、答え合わせをするのに役立ちます（ダウンロードした場合には、ブラウザーの JavaScript コンソールに出力されます）。
+> [!NOTE]
+> 下記の例では、コードにエラーがある場合、ページ上の結果パネルに出力されるので、答え合わせをするのに役立ちます（ダウンロードした場合には、ブラウザーの JavaScript コンソールに出力されます）。
 
 ## JSON 1
 
@@ -35,7 +37,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身でエディターやオンラインエディターで作業する場合は、[この作業の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/oojs/tasks/json/json1-download.html)しましょう。
 
diff --git a/files/ja/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md b/files/ja/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
index 434b3b39cc0640..1092e7fab199a7 100644
--- a/files/ja/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
+++ b/files/ja/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
@@ -9,11 +9,13 @@ l10n:
 
 このスキルテストの目的は、[JavaScript でのクラス](/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)の記事を理解できたかどうかを評価することです。
 
-> **メモ:** 下記のインタラクティブエディターで解答を試すことができますが、コードをダウンロードして、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) などのオンラインツールを使用して作業すると便利です。
+> [!NOTE]
+> 下記のインタラクティブエディターで解答を試すことができますが、コードをダウンロードして、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) などのオンラインツールを使用して作業すると便利です。
 >
 > もし行き詰まった場合は、このページの下にある「評価とさらなる支援」(#評価とさらなる支援)の節を参照して、私たちに支援を要求してください。
 
-> **メモ:** 下記の例では、コードにエラーがある場合、ページ上の結果パネルに出力されるので、答え合わせをするのに役立ちます（ダウンロードした場合には、ブラウザーの JavaScript コンソールに出力されます）。
+> [!NOTE]
+> 下記の例では、コードにエラーがある場合、ページ上の結果パネルに出力されるので、答え合わせをするのに役立ちます（ダウンロードした場合には、ブラウザーの JavaScript コンソールに出力されます）。
 
 ## OOJS 1
 
@@ -32,7 +34,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs1.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身でエディターやオンラインエディターで作業する場合は、[この作業の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/oojs/tasks/oojs/oojs1-download.html)しましょう。
 
@@ -46,7 +48,7 @@ l10n:
 
 {{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs2.html", '100%', 400)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > 自分自身でエディターやオンラインエディターで作業する場合は、[この作業の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/javascript/oojs/tasks/oojs/oojs2-download.html)しましょう。
 
diff --git a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
index 90bce5d1af2785..c937c772a80e6a 100644
--- a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
+++ b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
@@ -7,11 +7,13 @@ slug: Learn/JavaScript/Objects/Test_your_skills:_Object_basics
 
 このスキルテストの目的は、[JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の理解度をテストすることです。
 
-> **メモ:** 以下のインタラクティブなエディターでソリューションを試すこともできますが、コードをダウンロードし、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/)や[Glitch](https://glitch.com/)のようなオンラインツールを使用してタスクを実行すると役立つ場合があります。
+> [!NOTE]
+> 以下のインタラクティブなエディターでソリューションを試すこともできますが、コードをダウンロードし、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/)や[Glitch](https://glitch.com/)のようなオンラインツールを使用してタスクを実行すると役立つ場合があります。
 >
 > 行き詰まった場合は、助けを求めてください — このページの下部にある評価またはさらなる支援セクションを参照してください。
 
-> **メモ:** 以下の例では、コードにエラーがある場合、ページの結果パネルに出力され、答えを見つけ出すのに役立ちます（ダウンロード可能なバージョンの場合は、ブラウザーの JavaScript コンソールに）
+> [!NOTE]
+> 以下の例では、コードにエラーがある場合、ページの結果パネルに出力され、答えを見つけ出すのに役立ちます（ダウンロード可能なバージョンの場合は、ブラウザーの JavaScript コンソールに）
 
 ## オブジェクトの基本 1
 
diff --git a/files/ja/learn/mathml/first_steps/fractions_and_roots/index.md b/files/ja/learn/mathml/first_steps/fractions_and_roots/index.md
index d86863abc04314..45a0f876e0f4ac 100644
--- a/files/ja/learn/mathml/first_steps/fractions_and_roots/index.md
+++ b/files/ja/learn/mathml/first_steps/fractions_and_roots/index.md
@@ -255,7 +255,8 @@ checkboxes.forEach((checkbox) => {
 
 {{ EmbedLiveSample('Stretchy_radical_symbols', 700, 200, "", "") }}
 
-> **警告:** 伸縮を可能にするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が必要です。前回の例は[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)を使用しています。
+> [!WARNING]
+> 伸縮を可能にするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が必要です。前回の例は[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)を使用しています。
 
 ## 線のない分数
 
diff --git a/files/ja/learn/mathml/first_steps/getting_started/index.md b/files/ja/learn/mathml/first_steps/getting_started/index.md
index 4b82d17fc9cced..47adf9a445d280 100644
--- a/files/ja/learn/mathml/first_steps/getting_started/index.md
+++ b/files/ja/learn/mathml/first_steps/getting_started/index.md
@@ -65,7 +65,8 @@ MathML は HTML と同じ構文を用いて要素と属性のツリーを表し
 
 {{ EmbedLiveSample('Inserting_formulas_in_HTML', 700, 100, "", "") }}
 
-> **警告:** 分数の代わりに "1 3" と表示される場合は、ブラウザーが MathML に対応していない可能性があります。詳しくは[ブラウザー互換性表](/ja/docs/Web/MathML/Element/math#browser_compatibility)を調べてください。
+> [!WARNING]
+> 分数の代わりに "1 3" と表示される場合は、ブラウザーが MathML に対応していない可能性があります。詳しくは[ブラウザー互換性表](/ja/docs/Web/MathML/Element/math#browser_compatibility)を調べてください。
 
 ### display 属性
 
@@ -96,9 +97,11 @@ MathML は HTML と同じ構文を用いて要素と属性のツリーを表し
 
 また、現れる微妙な変化にもお気づきでしょう。分数のテキストと縦の空間が少し大きくなります。 `display="block"` 属性がないと、周囲のテキストの流れを避けるために高さが最小になります。 `display="block"` 属性を使うと、その代わりに数式の読みやすさが優先されます。
 
-> **メモ:** これは LaTeX の _inline_ 数式（ドル記号 `$...$` で区切られる）と _display_ 数式（`\[...\]` で区切られる）の概念に対応しています。
+> [!NOTE]
+> これは LaTeX の _inline_ 数式（ドル記号 `$...$` で区切られる）と _display_ 数式（`\[...\]` で区切られる）の概念に対応しています。
 
-> **メモ:** このプロパティは `<math display="block">`の場合、初期状態では `normal`、それ以外の場合は `compact` になります。MathMLのサブツリーによっては、このプロパティが自動的に `compact` になることがありますが、この入門チュートリアルではこの微妙な点は無視します。繰り返しますが、これは LaTeX に似ています。
+> [!NOTE]
+> このプロパティは `<math display="block">`の場合、初期状態では `normal`、それ以外の場合は `compact` になります。MathMLのサブツリーによっては、このプロパティが自動的に `compact` になることがありますが、この入門チュートリアルではこの微妙な点は無視します。繰り返しますが、これは LaTeX に似ています。
 
 ## \<mrow> 要素でのグループ化
 
diff --git a/files/ja/learn/mathml/first_steps/index.md b/files/ja/learn/mathml/first_steps/index.md
index 18a95fcf5aa4f1..96ced2fbc87bdb 100644
--- a/files/ja/learn/mathml/first_steps/index.md
+++ b/files/ja/learn/mathml/first_steps/index.md
@@ -9,7 +9,7 @@ l10n:
 
 MathML はウェブページに数式を書くために使用するマークアップ言語です。このモジュールでは、MathML がどのように動作するのか、構文はどのように見えるのか、HTML の中で MathML を使用し始めるにはどうすればよいのか、といった基本的なことから、MathML を使いこなすための穏やかな道のりを提供します。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
@@ -25,7 +25,8 @@ MathML はウェブページに数式を書くために使用するマークア
 2. [基本的なソフトウェアのインストール](/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software)で詳しく説明しているように、基本的な作業環境を設定し、[ファイルの取り扱い](/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files)で詳しく説明しているように、ファイルを作成し管理する方法を理解していること。
 3. [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)で記述されているように、 HTML の基本的な知識に慣れていること。
 
-> **メモ:** 自分自身でファイルを作成する能力のないコンピューター/タブレット/他の端末で作業している場合は、 [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) のようなオンラインコーディングプログラムでコード例を試すことができます。
+> [!NOTE]
+> 自分自身でファイルを作成する能力のないコンピューター/タブレット/他の端末で作業している場合は、 [JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) のようなオンラインコーディングプログラムでコード例を試すことができます。
 
 ## ガイド
 
diff --git a/files/ja/learn/mathml/first_steps/scripts/index.md b/files/ja/learn/mathml/first_steps/scripts/index.md
index fc2595496b8045..adb47827546a22 100644
--- a/files/ja/learn/mathml/first_steps/scripts/index.md
+++ b/files/ja/learn/mathml/first_steps/scripts/index.md
@@ -83,7 +83,8 @@ l10n:
 - `<msubsup>` 要素の 2 つ目と 3 つ目の子は、それぞれ 1 つ目の子の下付き文字と上付き文字として添付されます。
 - 添字内のテキストは小さくなります。
 
-> **メモ:** MathML 要素 `<msub>` と `<msup>` は HTML の [`<sub>`](/ja/docs/Web/HTML/Element/sub) や [`<sup>`](/ja/docs/Web/HTML/Element/sup) 要素とは異なります。これらにより、テキストに限らず、任意の MathML サブツリーを添字として提供することができます。
+> [!NOTE]
+> MathML 要素 `<msub>` と `<msup>` は HTML の [`<sub>`](/ja/docs/Web/HTML/Element/sub) や [`<sup>`](/ja/docs/Web/HTML/Element/sup) 要素とは異なります。これらにより、テキストに限らず、任意の MathML サブツリーを添字として提供することができます。
 
 ## 真下付き文字と真上付き文字
 
@@ -361,7 +362,8 @@ math {
 
 これで、下カッコ "⎵" と右向き矢印 "→" は、置換された値の幅に応じて水平方向に伸びることがわかりました。 `<mrow>` 内の伸縮しない兄弟の高さに応じて、[いくつかの縦方向の演算子は伸縮できる](/ja/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators) ことを思い出してください。同様に、いくつかの水平方向の演算子は `<munder>`、`<mover>`、`<munderover>` 要素内の伸縮しない兄弟の幅に応じて伸縮を行います。
 
-> **メモ:** 伸縮は `<munder>`、`<mover>` 、`<munderover>` 要素のどの子要素に対しても、真下付き文字や真上付き文字に限らず行うことができます。
+> [!NOTE]
+> 伸縮は `<munder>`、`<mover>` 、`<munderover>` 要素のどの子要素に対しても、真下付き文字や真上付き文字に限らず行うことができます。
 
 ### 大きな演算子と制限
 
@@ -470,7 +472,8 @@ math {
 - 大きな演算子: 演算子は `<math>` タグに `display="block"` 属性がある場合、より大きな字形で描画されます。
 - 移動制限: 演算子に付けられた真下付き文字と真上付き文字は `<math>` タグに `display="block"` 属性がない場合、それぞれ下付き文字と上付き文字として表示されます。
 
-> **メモ:** 「大きな演算子」特性は添字とは無関係ですが、この特性が付いた演算子はを保有する演算子は一般的に添字が付きます。移動制限特性は、`<munder>` と `<mover>` 要素にも適用されます。
+> [!NOTE]
+> 「大きな演算子」特性は添字とは無関係ですが、この特性が付いた演算子はを保有する演算子は一般的に添字が付きます。移動制限特性は、`<munder>` と `<mover>` 要素にも適用されます。
 
 ## まとめ
 
diff --git a/files/ja/learn/mathml/first_steps/tables/index.md b/files/ja/learn/mathml/first_steps/tables/index.md
index e3d5ba6578206b..6a85cfa71283f1 100644
--- a/files/ja/learn/mathml/first_steps/tables/index.md
+++ b/files/ja/learn/mathml/first_steps/tables/index.md
@@ -214,7 +214,8 @@ MathML の表形式要素は [HTML 表](/ja/docs/Learn/HTML/Tables)要素と似
 
 {{ EmbedLiveSample('allowing_cells_to_span_multiple_rows_and_columns', 700, 200, "", "") }}
 
-> **メモ:** 歴史的な理由から、列をまたがるための MathML 属性は `colspan` ではなく `columnspan` と呼ばれています。
+> [!NOTE]
+> 歴史的な理由から、列をまたがるための MathML 属性は `colspan` ではなく `columnspan` と呼ばれています。
 
 ## 高度なレイアウトの使用法
 
diff --git a/files/ja/learn/mathml/first_steps/text_containers/index.md b/files/ja/learn/mathml/first_steps/text_containers/index.md
index 24054609599bd5..1496aaeb9b4b2c 100644
--- a/files/ja/learn/mathml/first_steps/text_containers/index.md
+++ b/files/ja/learn/mathml/first_steps/text_containers/index.md
@@ -166,7 +166,8 @@ document.getElementById("clearOutput").addEventListener("click", () => {
 </math>
 ```
 
-> **メモ:** 指定されたテキストコンテンツにどのトークン要素を使用するかを決めるのは難しい場合があります。実際には、間違った要素を選んでも大きな問題が発生することはありません。なぜなら、すべてのトークン要素はブラウザー実装によって一般的に同じようにレンダリングされるからです（視覚的な表示と支援技術のために）。しかし、`<mi>` 要素と `<mo>` 要素には特別な判別する機能があるので注意が必要です。それらは以下の節で説明します。
+> [!NOTE]
+> 指定されたテキストコンテンツにどのトークン要素を使用するかを決めるのは難しい場合があります。実際には、間違った要素を選んでも大きな問題が発生することはありません。なぜなら、すべてのトークン要素はブラウザー実装によって一般的に同じようにレンダリングされるからです（視覚的な表示と支援技術のために）。しかし、`<mi>` 要素と `<mo>` 要素には特別な判別する機能があるので注意が必要です。それらは以下の節で説明します。
 
 ## \<mi> の自動的なイタリック化
 
@@ -197,7 +198,8 @@ document.getElementById("clearOutput").addEventListener("click", () => {
 
 {{ EmbedLiveSample('Reverting automatic italicization of <mi>', 700, 50) }}
 
-> **メモ:** この変換を適用することができますが、通常は専用の[数学用英数字記号](https://ja.wikipedia.org/wiki/数学用英数字記号)を使用します。
+> [!NOTE]
+> この変換を適用することができますが、通常は専用の[数学用英数字記号](https://ja.wikipedia.org/wiki/数学用英数字記号)を使用します。
 
 ## \<mo> の演算子プロパティ
 
@@ -316,7 +318,8 @@ document.getElementById("showSolution").addEventListener(
 
 {{ EmbedLiveSample('active_learning_spot_the_difference', 700, 500, "", "") }}
 
-> **メモ:** 明らかな違いは、 MathML ではソースコードがより冗長になることです。このチュートリアルはこの言語を学ぶためのものですが、実際には MathML のコンテンツは一般的に手動では書かれません。詳しい情報は [MathML を書く](/ja/docs/Web/MathML/Authoring)のページを参照してください。
+> [!NOTE]
+> 明らかな違いは、 MathML ではソースコードがより冗長になることです。このチュートリアルはこの言語を学ぶためのものですが、実際には MathML のコンテンツは一般的に手動では書かれません。詳しい情報は [MathML を書く](/ja/docs/Web/MathML/Authoring)のページを参照してください。
 
 ### アクティブラーニング: 伸縮演算子
 
@@ -456,7 +459,8 @@ document.getElementById("clearOutput").addEventListener("click", () => {
 </math>
 ```
 
-> **警告:** 伸縮できるようにするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が要求されます。前回の例は[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)に頼っています。
+> [!WARNING]
+> 伸縮できるようにするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が要求されます。前回の例は[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)に頼っています。
 
 ## まとめ
 
diff --git a/files/ja/learn/mathml/index.md b/files/ja/learn/mathml/index.md
index dba3d6f9a64f90..cff371cf1205f8 100644
--- a/files/ja/learn/mathml/index.md
+++ b/files/ja/learn/mathml/index.md
@@ -9,9 +9,10 @@ l10n:
 
 Mathematical Markup Language、または {{glossary("MathML")}} は、分数、上付き/下付き、基数、行列、積分、級数などを用いてウェブページに数式を書くために使用するマークアップ言語です。元々は独立した XML 言語として設計されましたが、MathML は一般的に {{Glossary('HTML')}} 文書内に埋め込まれ、HTML の拡張として見ることができます。
 
-> **警告:** 実際には、 MathML コンテンツは[軽量マークアップ言語](https://ja.wikipedia.org/wiki/軽量マークアップ言語)（[LaTeX](https://ja.wikipedia.org/wiki/LaTeX) など）や[グラフィカルユーザーインターフェイス](https://ja.wikipedia.org/wiki/グラフィカルユーザインタフェース)を使用して生成されます。ウェブページに数式を統合するだけであれば、 [MathML の記述](/ja/docs/Web/MathML/Authoring)のページのヒントで十分です。
+> [!WARNING]
+> 実際には、 MathML コンテンツは[軽量マークアップ言語](https://ja.wikipedia.org/wiki/軽量マークアップ言語)（[LaTeX](https://ja.wikipedia.org/wiki/LaTeX) など）や[グラフィカルユーザーインターフェイス](https://ja.wikipedia.org/wiki/グラフィカルユーザインタフェース)を使用して生成されます。ウェブページに数式を統合するだけであれば、 [MathML の記述](/ja/docs/Web/MathML/Authoring)のページのヒントで十分です。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
diff --git a/files/ja/learn/performance/multimedia/index.md b/files/ja/learn/performance/multimedia/index.md
index 3e890721ce2817..d35355f4127c7b 100644
--- a/files/ja/learn/performance/multimedia/index.md
+++ b/files/ja/learn/performance/multimedia/index.md
@@ -33,7 +33,8 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** これは、ウェブ上でのマルチメディア配信を最適化するための高レベルな入門書であり、一般的な原則とテクニックに応じたものです。より詳細なガイドについては、 <https://web.dev/learn/images> を参照してください。
+> [!NOTE]
+> これは、ウェブ上でのマルチメディア配信を最適化するための高レベルな入門書であり、一般的な原則とテクニックに応じたものです。より詳細なガイドについては、 <https://web.dev/learn/images> を参照してください。
 
 ## なぜマルチメディアを最適化するのか
 
@@ -61,7 +62,8 @@ l10n:
 
 最適なファイル形式は、通常、画像の性格によって異なります。
 
-> **メモ:** 画像の種類に関する一般的な情報は、[画像ファイルの種類と形式ガイド](/ja/docs/Web/Media/Formats/Image_types)を参照してください。
+> [!NOTE]
+> 画像の種類に関する一般的な情報は、[画像ファイルの種類と形式ガイド](/ja/docs/Web/Media/Formats/Image_types)を参照してください。
 
 [SVG](/ja/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics) 形式は、色が少なく、写真のようにリアルでない画像に適しています。この場合、ソースがベクターグラフィック形式で利用できることが必要です。そのような画像がビットマップとしてしか存在しない場合は、[PNG](/ja/docs/Web/Media/Formats/Image_types#png_portable_network_graphics) が予備のフォーマットとして選ばれます。この種類のモチーフの例としては、ロゴ、イラスト、図表、アイコンなどがあります（メモ: SVG はアイコンフォントよりもはるかに優れています！）。どちらの形式も透過に対応しています。
 
@@ -79,7 +81,8 @@ SVGを最適化するための良いオンラインツールとしては、[SVGO
 
 - [WebP](/ja/docs/Web/Media/Formats/Image_types#webp_画像) — 画像とアニメーション画像の両方に最適な選択肢です。WebP は PNG や JPEG よりもはるかに優れた圧縮率を持ち、より高い色深度、アニメーションフレーム、透過率などに対応しています（ただし、プログレッシブ表示には対応していません）。macOS デスクトップ Big Sur の Safari 14 以前を除く、主要なブラウザーで対応しています。
 
-  > **メモ:** Apple が [Safari 14 で WebP の対応を発表](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)しているにもかかわらず、 Safari のバージョン 16.0 より前では、 macOS の 11/Big Sur より前のデスクトップ版では正常に `.webp 画像が表示されなせん、 iOS 14 の Safari では `.webp` 画像が正しく表示されます。
+  > [!NOTE]
+  > Apple が [Safari 14 で WebP の対応を発表](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)しているにもかかわらず、 Safari のバージョン 16.0 より前では、 macOS の 11/Big Sur より前のデスクトップ版では正常に `.webp 画像が表示されなせん、 iOS 14 の Safari では `.webp` 画像が正しく表示されます。
 
 - [AVIF](/ja/docs/Web/Media/Formats/Image_types#avif_画像) — 高性能でロイヤリティフリーの画像形式であるため、画像とアニメーション画像の両方に適しています（WebP よりもさらに効率的ですが、対応はそれほど広くありません）。これで Chrome、Opera、Firefox で対応しています。[以前の画像形式を AVIF に変換するオンラインツール](https://avif.io/)も参照してください。
 - **JPEG2000** — かつては JPEG の後継とされていましたが、Safari でのみ対応しています。プログレッシブ表示にも対応していません。
diff --git a/files/ja/learn/performance/perceived_performance/index.md b/files/ja/learn/performance/perceived_performance/index.md
index f4134434a8dfde..b568bf3f058b5a 100644
--- a/files/ja/learn/performance/perceived_performance/index.md
+++ b/files/ja/learn/performance/perceived_performance/index.md
@@ -39,7 +39,8 @@ l10n:
 
 知覚的なパフォーマンスを向上させるための一般的なルールは、通常、処理が完全に完了するまで（何か情報を提供するまで）ユーザーを待たせるよりも、すばやくレスポンスを提供し、定期的に状況を更新したほうが良いというものです。例 えば、ページを読み込むとき、画像や他のリソースをすべて待つよりも、テキストが到着した時点で表示する方が良いでしょう。たとえコンテンツが完全にダウンロードされていなくても、ユーザーは何かが起こっていることを確認でき、コンテンツを操作し始めることができる。
 
-> **メモ:** 何かが起こるのを受動的に待っているユーザーよりも、積極的に関与したり、気を引いたり、楽しませたりしているユーザーの方が、時間がすばやく経過するように見えるようです。可能な限り、タスクの完了を待っているユーザーに積極的に関わり、情報を提供しましょう。
+> [!NOTE]
+> 何かが起こるのを受動的に待っているユーザーよりも、積極的に関与したり、気を引いたり、楽しませたりしているユーザーの方が、時間がすばやく経過するように見えるようです。可能な限り、タスクの完了を待っているユーザーに積極的に関わり、情報を提供しましょう。
 
 同様に、ユーザーが長時間実行する処理を行うためにリンクをクリックすると、すぐに「読み込み中アニメーション」を表示したほうが良いでしょう。処理にかかる時刻は変わりませんが、サイトがよりレスポンスよく感じられ、ユーザーは何か有益な作業に取り組んでいることを認識できます。
 
diff --git a/files/ja/learn/performance/what_is_web_performance/index.md b/files/ja/learn/performance/what_is_web_performance/index.md
index 43c7a451564a1d..52cbe81e916954 100644
--- a/files/ja/learn/performance/what_is_web_performance/index.md
+++ b/files/ja/learn/performance/what_is_web_performance/index.md
@@ -47,7 +47,8 @@ _\* 次の記事で扱う主観的な[知覚的パフォーマンス](/ja/docs/L
 
 まとめると、たくさんの要素がパフォーマンスに影響を与えます。レイテンシー、アプリケーションのサイズ、DOM ノードの数、リクエストされるリソースの数、JavaScript の性能、CPU 負荷、その他いろいろです。それらの読み込みとレスポンスの時間を小さくすることが重要です。それから、ユーザーの体験上後で必要になる部分を同期で読み込むなどして、サイトが利用可能になる時間をできる限り早くすることでレイテンシーを感じさせないようにするといった追加の要素も重要です。
 
-> **メモ:** ウェブのパフォーマンスには、Time to load、Frames per second、[Time to interactive](/ja/docs/Glossary/Time_to_interactive) のような客観的や測定結果とコンテンツの読み込みがどれくらい長く感じられるかといった主観的な経験の両方が含まれます。
+> [!NOTE]
+> ウェブのパフォーマンスには、Time to load、Frames per second、[Time to interactive](/ja/docs/Glossary/Time_to_interactive) のような客観的や測定結果とコンテンツの読み込みがどれくらい長く感じられるかといった主観的な経験の両方が含まれます。
 
 ## コンテンツはどのように描画されるか
 
diff --git a/files/ja/learn/server-side/configuring_server_mime_types/index.md b/files/ja/learn/server-side/configuring_server_mime_types/index.md
index bae4c6b55ab5b2..e16ee848b7dc8c 100644
--- a/files/ja/learn/server-side/configuring_server_mime_types/index.md
+++ b/files/ja/learn/server-side/configuring_server_mime_types/index.md
@@ -62,7 +62,8 @@ JavaScript の MIME タイプに関する情報を探していると、JavaScrip
 
 ブラウザーはこれらの代替 MIME タイプのいずれか、いくつか、またはすべてに対応しているかもしれませんが、JavaScript ファイルの MIME タイプを示すには、`text/javascript` **のみ**を使用しましょう。
 
-> **メモ:** 詳しくは [MIME タイプ（IANA メディア種別）](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)をご覧ください。
+> [!NOTE]
+> 詳しくは [MIME タイプ（IANA メディア種別）](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)をご覧ください。
 
 ## 設定する MIME タイプの決定方法
 
diff --git a/files/ja/learn/server-side/django/development_environment/index.md b/files/ja/learn/server-side/django/development_environment/index.md
index b2968881a51ee0..c5e4d55aeaa849 100644
--- a/files/ja/learn/server-side/django/development_environment/index.md
+++ b/files/ja/learn/server-side/django/development_environment/index.md
@@ -49,7 +49,8 @@ Django は、インストール場所と設定の方法に関して非常に柔
 
 これらのオプションは、それぞれわずかに異なる構成とセットアップを必要とします。以下のサブセクションでは、いくつかの選択肢について説明します。この記事の残りの部分では、いくつかオペレーティングシステムに Django をセットアップする方法を説明します。このモジュールの残りの部分は、セットアップが済んでいる想定です。
 
-> **メモ:** その他のインストールオプションについては、Django の公式ドキュメントでカバーされています。[下記で適切なドキュメント](#関連情報)にリンクしています。
+> [!NOTE]
+> その他のインストールオプションについては、Django の公式ドキュメントでカバーされています。[下記で適切なドキュメント](#関連情報)にリンクしています。
 
 #### どのオペレーティングシステムに対応しているか
 
@@ -81,13 +82,15 @@ Django は 4 つの主要なデータベース（PostgreSQL、MySQL、Oracle、S
 
 この記事（とこのモジュールのほとんど）では、データをファイルに保存する SQLite データベースを使用します。 SQLite は軽量データベースとしての使用を目的としており、高度な並行性はサポートできません。 ただし、主に読み取り専用のアプリケーションには最適です。
 
-> **メモ:** Django は、標準ツール（django-admin）を使用してウェブサイトプロジェクトを開始するときに、デフォルトで SQLite を使用するように設定されています。 これは、追加の設定やセットアップが不要なため、入門には最適な選択です。
+> [!NOTE]
+> Django は、標準ツール（django-admin）を使用してウェブサイトプロジェクトを開始するときに、デフォルトで SQLite を使用するように設定されています。 これは、追加の設定やセットアップが不要なため、入門には最適な選択です。
 
 #### システム全体または Python の仮想環境にインストールするには
 
 Python3 をインストールすると、すべての Python3 コードで共有される単一のグローバル環境が得られます。 環境に好きな Python パッケージをインストールすることはできますが、一度に 1 つのパッケージしかインストールできません。
 
-> **メモ:** グローバル環境にインストールされた Python アプリケーションは、お互いに衝突する可能性があります（例えば、同じパッケージの異なるバージョンに依存する場合）。
+> [!NOTE]
+> グローバル環境にインストールされた Python アプリケーションは、お互いに衝突する可能性があります（例えば、同じパッケージの異なるバージョンに依存する場合）。
 
 Django をデフォルト/グローバル環境にインストールすると、コンピューター上で Django の 1 つのバージョンのみを対象にできます。 古いバージョンに依存しているウェブサイトを維持しながら、新しいウェブサイト（Django の最新バージョンを使用）を作成したい場合、これは問題になる可能性があります。
 
@@ -101,7 +104,8 @@ Django を使用するには、オペレーティングシステムに Python 
 
 このセクションでは、Ubuntu Linux 16.04、macOS X、および Windows 10 の Python のバージョンを確認し、必要に応じて新しいバージョンをインストールする方法を簡単に説明します。
 
-> **メモ:** 使用しているプラットフォームによっては、オペレーティングシステム独自のパッケージマネージャやその他のメカニズムを使って Python/pip をインストールできます。ほとんどのプラットフォームでは、 <https://www.python.org/downloads/> から必要なインストールファイルをダウンロードし、適切なプラットフォーム固有の方法を使用してインストールできます。
+> [!NOTE]
+> 使用しているプラットフォームによっては、オペレーティングシステム独自のパッケージマネージャやその他のメカニズムを使って Python/pip をインストールできます。ほとんどのプラットフォームでは、 <https://www.python.org/downloads/> から必要なインストールファイルをダウンロードし、適切なプラットフォーム固有の方法を使用してインストールできます。
 
 ### Ubuntu 22.04
 
@@ -119,7 +123,8 @@ python3 -V
 sudo apt install python3-pip
 ```
 
-> **メモ:** Python 3.10 は [Django 5.0 で対応している] 最も古いバージョンです(https://docs.djangoproject.com/en/5.0/faq/install/#what-python-version-can-i-use-with-django)。
+> [!NOTE]
+> Python 3.10 は [Django 5.0 で対応している] 最も古いバージョンです(https://docs.djangoproject.com/en/5.0/faq/install/#what-python-version-can-i-use-with-django)。
 > このチュートリアルでは最新版の Python を使用する必要はありませんが、使用したい場合はインターネットに手順があります。
 
 ### macOS
@@ -176,7 +181,8 @@ Windows インストーラーには、既定で pip3（Python パッケージマ
 py -3 -m pip list
 ```
 
-> **メモ:** インストーラーは、上記のコマンドが動作するために必要なものすべてをセットアップする必要があります。Python が見つからないというメッセージが表示された場合は、システムパスに追加する必要があります。
+> [!NOTE]
+> インストーラーは、上記のコマンドが動作するために必要なものすべてをセットアップする必要があります。Python が見つからないというメッセージが表示された場合は、システムパスに追加する必要があります。
 > インストーラーを再度動作させ、"Modify" を選択し、2 つ目のページにある "Add Python to environment variables" というラベル付けされたボックスにチェックを入れることで実行できます。
 
 ## Python 3 および pip3 の呼び出し
@@ -295,7 +301,8 @@ source ~/.bash_profile
 
 この時点で、たくさんのスクリプトが実行されているのが見えるかもしれません（Ubuntu のインストールと同じスクリプトです）。これで `mkvirtualenv` コマンドを使って新しい仮想環境を作成することができるはずです。
 
-> **メモ:** ファインダーで編集する起動ファイルが見つからない場合は、端末で nano を使用して開くこともできます。
+> [!NOTE]
+> ファインダーで編集する起動ファイルが見つからない場合は、端末で nano を使用して開くこともできます。
 >
 > bash を使用していると想定すると、コマンドは以下のようになります。
 >
@@ -338,7 +345,8 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get
 
 これで、Django をインストールして開発を開始できる仮想環境の中に入りました。
 
-> **メモ:** これ以降、この記事（と実際にはモジュール）では、上でセットアップしたような Python 仮想環境内でコマンドが実行されると仮定してください。
+> [!NOTE]
+> これ以降、この記事（と実際にはモジュール）では、上でセットアップしたような Python 仮想環境内でコマンドが実行されると仮定してください。
 
 ### 仮想環境の使用
 
@@ -371,7 +379,8 @@ python3 -m django --version
 py -3 -m django --version
 ```
 
-> **メモ:** 上記の Windows コマンドで django モジュールが存在すると表示されない場合は、次のようにしてみてください。
+> [!NOTE]
+> 上記の Windows コマンドで django モジュールが存在すると表示されない場合は、次のようにしてみてください。
 >
 > ```bash
 > py -m django --version
@@ -381,7 +390,8 @@ py -3 -m django --version
 > コマンドに問題がある場合は `-3` 修飾子を除外してみてください。
 > Linux/macOS では、コマンドは `python3` です。
 
-> **警告:** このモジュールの残りの部分は、 Python 3 (`python3`) を呼び出すために Linux コマンドを使用します。Windows で作業している場合は、単にこの接頭辞を`py -3`に置き換えてください。
+> [!WARNING]
+> このモジュールの残りの部分は、 Python 3 (`python3`) を呼び出すために Linux コマンドを使用します。Windows で作業している場合は、単にこの接頭辞を`py -3`に置き換えてください。
 
 ## Git および GitHub によるソースコード管理
 
@@ -390,7 +400,8 @@ py -3 -m django --version
 SCM ツールには、git、Mercurial、Perforce、SVN (Subversion)、CVS (Concurrent Versions System) など多くの種類があり、Bitbucket、GitHub、GitLab のようなクラウド SCM ホストもあります。
 このチュートリアルでは、最も人気のあるクラウドベースのソースコードホスティングサービスの一つである [GitHub](https://github.com/) でコードをホストし、 **git** ツールを使用してソースコードをローカルで管理し、必要に応じて GitHub に送信します。
 
-> **メモ:** SCM ツールを使用することは、良いソフトウェア開発の活動です。
+> [!NOTE]
+> SCM ツールを使用することは、良いソフトウェア開発の活動です。
 > この説明では、git と GitHub の基本的な使い方を提供します。
 > 詳しくは [Learning Git](https://docs.github.com/en/get-started/quickstart/git-and-github-learning-resources) をご覧ください。
 
@@ -425,7 +436,8 @@ Git（と GitHub）は、コードを格納する最上位の「バケツ」と
    - 新しいリポジトリーの説明を "Local Library website written in Django" と入力します。
    - リポジトリーは "Public" を選択します (既定)。
 
-     > **警告:** この設定により、すべてのソースコードが見えるようになります。
+     > [!WARNING]
+     > この設定により、すべてのソースコードが見えるようになります。
      > 非公開でない限り、資格情報や他にも機密性の高い素材をリポジトリーに格納しないようにしてください。
 
    - _Add .gitignore_ の選択リストで **Python** が選べます。
@@ -467,7 +479,8 @@ Git（と GitHub）は、コードを格納する最上位の「バケツ」と
 
 1. コマンドプロンプト/端末で、最初に GitHub から最新バージョンのソースを「フェッチ」（取得）し、次にプル（取得し、現在のブランチにマージ）します。
 
-   > **メモ:** この段階は、ソースをクローンしたばかりで、それが最新であることがわかるので、厳密には必要ではありません。
+   > [!NOTE]
+   > この段階は、ソースをクローンしたばかりで、それが最新であることがわかるので、厳密には必要ではありません。
    > しかし一般的には、変更を加える前に GitHub からソースを更新する必要があります。
 
    ```bash
@@ -577,7 +590,8 @@ python3 manage.py runserver
 py -3 manage.py runserver
 ```
 
-> **メモ:** この時点では、 "unapplied migration(s)" という警告は無視できます。
+> [!NOTE]
+> この時点では、 "unapplied migration(s)" という警告は無視できます。
 
 サーバーが稼働したら、ローカルウェブブラウザーで `http://127.0.0.1:8000/` という URL に移動して、サイトを表示できます。次のようなサイトが表示されます。
 
diff --git a/files/ja/learn/server-side/django/index.md b/files/ja/learn/server-side/django/index.md
index 6ef645360c3b9d..99f053750d1636 100644
--- a/files/ja/learn/server-side/django/index.md
+++ b/files/ja/learn/server-side/django/index.md
@@ -15,7 +15,8 @@ Django は、Python で書かれた高機能なサーバーサイドウェブフ
 
 プログラミングの概念と [Python](/ja/docs/Glossary/Python) に関する一般的な知識はあるとよいですが、主要概念を理解していることは必須ではありません。
 
-> **メモ:** Python は、初心者が読んで理解しやすい最も簡単なプログラミング言語の 1 つです。つまり、このモジュールをより理解したいのであれば、インターネット上の多数の無料の書籍やチュートリアルがあなたを助けてくれます。（新しいプログラマーは python.org wiki の [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) ページをチェックすると良いでしょう。）
+> [!NOTE]
+> Python は、初心者が読んで理解しやすい最も簡単なプログラミング言語の 1 つです。つまり、このモジュールをより理解したいのであれば、インターネット上の多数の無料の書籍やチュートリアルがあなたを助けてくれます。（新しいプログラマーは python.org wiki の [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) ページをチェックすると良いでしょう。）
 
 ## ガイド
 
diff --git a/files/ja/learn/server-side/django/introduction/index.md b/files/ja/learn/server-side/django/introduction/index.md
index 02ed46d87a8f1d..8193771ed29155 100644
--- a/files/ja/learn/server-side/django/introduction/index.md
+++ b/files/ja/learn/server-side/django/introduction/index.md
@@ -64,7 +64,8 @@ Django は当初、2003 年から 2005 年の間に、新聞のウェブサイ
 
 Django は、2008 年 9 月の最初のマイルストーンリリース (1.0) から、最新のリリースバージョンである 4.0 (2022) まで、成長を続けています。 各リリースでは、新しい種類のデータベース、テンプレートエンジン、キャッシュのサポートから、「汎用」ビュー機能とクラスの追加（プログラミングタスクで開発者が記述しなければならないコード量を削減します）などの新機能追加やバグフィックスがありました。
 
-> **メモ:** Django のウェブサイトの[リリースノート](https://docs.djangoproject.com/en/stable/releases/)をチェックして、最近のバージョンで何が変わったのか、どのような作業が Django を改善しているのか確認してください。
+> [!NOTE]
+> Django のウェブサイトの[リリースノート](https://docs.djangoproject.com/en/stable/releases/)をチェックして、最近のバージョンで何が変わったのか、どのような作業が Django を改善しているのか確認してください。
 
 Django は現在、活発なオープンソースプロジェクトであり、何千人ものユーザーと協力者がいます。元々の起源に関連するいくつかの機能はまだありますが、Django はあらゆる種類のウェブサイトを開発できる汎用フレームワークに進化しました。
 
@@ -99,7 +100,8 @@ Django のウェブアプリケーションは、通常、これらの各ステ
 - **モデル:** モデルは、アプリケーションのデータ構造を定義し、データベース内のレコードを管理（追加、変更、削除）および照会するための機能を提供する Python オブジェクトです。
 - **テンプレート:** テンプレートは、ファイルの構造やレイアウト（HTML ページなど）を定義するテキストファイルで、プレースホルダーを使用して実際のコンテンツを表します。 ビューは、モデルから取得したデータと HTML テンプレートを使用して動的に HTML ページを作成できます。 テンプレートを使用して、あらゆる種類のファイル（HTML である必要はありません!）の構造を定義できます。
 
-> **メモ:** Django はこの構成を「モデルビューテンプレート (Model View Template, MVT)」アーキテクチャと呼んでいます。これは[ビューモデルコントローラー (MVC)](/ja/docs/Glossary/MVC) アーキテクチャとよく似ています。
+> [!NOTE]
+> Django はこの構成を「モデルビューテンプレート (Model View Template, MVT)」アーキテクチャと呼んでいます。これは[ビューモデルコントローラー (MVC)](/ja/docs/Glossary/MVC) アーキテクチャとよく似ています。
 
 以下の節は、Django アプリのこれらの主要な部分がどのようなものかを示すものです（コースの後半で開発環境を整えた後、より詳しく説明します）。
 
@@ -141,7 +143,8 @@ def index(request):
     return HttpResponse('Hello from Django!')
 ```
 
-> **メモ:** Python についての豆知識:
+> [!NOTE]
+> Python についての豆知識:
 >
 > - [Python モジュール](https://docs.python.org/3/tutorial/modules.html)は、コードで使用したい関数を別々のファイルに格納した「ライブラリー」です。ここでは、`from django.http import HttpResponse` によって `HttpResponse` オブジェクトを `django.http` モジュールからインポートし、ビューで使用できるようにします。モジュールからオブジェクトの一部または全部をインポートする方法は他にもあります。
 > - 関数は、上記のように `def` キーワードを使用して宣言し、名前付きの引数は関数の名前の後に括弧内に列挙します。行全体はコロンで終わります。次の行がどのように**インデント**されているかに注意してください。インデントは重要です。コード行が特定のブロックの内側にあることを指定しています（必須のインデントは、 Python の重要な機能であり、 Python コードが読みやすい理由の 1 つです）。
@@ -172,7 +175,8 @@ class Team(models.Model):
     team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
 ```
 
-> **メモ:** Python についての豆知識:
+> [!NOTE]
+> Python についての豆知識:
 >
 > - Python は「オブジェクト指向プログラミング」に対応しています。これは、データとそのデータを操作するための関数を含むオブジェクトにコードを組み上げるプログラミングのスタイルです。オブジェクトは、他のオブジェクトから継承/拡張/派生することができ、関連するオブジェクト間の共通の動作を共有できます。 Python では `class` キーワードを使用してオブジェクトの「青写真」を定義します。クラス内のモデルに基づくオブジェクトタイプの複数のインスタンスを作成できます。
 >
diff --git a/files/ja/learn/server-side/django/skeleton_website/index.md b/files/ja/learn/server-side/django/skeleton_website/index.md
index 6c39a8aaa7aabb..be394757f7f3fd 100644
--- a/files/ja/learn/server-side/django/skeleton_website/index.md
+++ b/files/ja/learn/server-side/django/skeleton_website/index.md
@@ -20,7 +20,8 @@ slug: Learn/Server-side/Django/skeleton_website
 1. `django-admin` ツールを使ってプロジェクトフォルダー、基本的なテンプレートファイル、プロジェクト管理スクリプト(**manage.py**)を作ります .
 2. **manage.py** は１つ以上のアプリケーションを作ります。
 
-   > **メモ:** ウェブサイトは 1 つ以上のセクションから成ります。例えば、メインサイト、ブログ、ウィキ、ダウンロードエリアなど。Django は、これらのコンポーネントを別々のアプリケーションとして作成することを助けてくれます。それらは、必要なら異なるプロジェクトで再利用できます。
+   > [!NOTE]
+   > ウェブサイトは 1 つ以上のセクションから成ります。例えば、メインサイト、ブログ、ウィキ、ダウンロードエリアなど。Django は、これらのコンポーネントを別々のアプリケーションとして作成することを助けてくれます。それらは、必要なら異なるプロジェクトで再利用できます。
 
 3. プロジェクトにアプリケーションを含めるために登録します。
 4. url/path マッパーはそれらのアプリケーションを結びつけます。
@@ -86,7 +87,8 @@ locallibrary/
 python3 manage.py startapp catalog
 ```
 
-> **メモ:** 上記コマンドは Linux や macOS X 用です。Windows のコマンドは: `py -3 manage.py startapp catalog`
+> [!NOTE]
+> 上記コマンドは Linux や macOS X 用です。Windows のコマンドは: `py -3 manage.py startapp catalog`
 >
 > もし Windows を使っているなら、このモジュール（manage.py）を使う際は`python3` を `py -3` に変更して下さい。
 >
@@ -115,7 +117,8 @@ locallibrary/
 - "マイグレーション"を格納するためのマイグレーションフォルダーモデルを変更した場合に自動的にデータベースの変更をするためのファイル
 - **\_\_init\_\_.py** — Django/Python がこのフォルダーを [Python Package](https://docs.python.org/3/tutorial/modules.html#packages) であると認識するためにここに作られた空のファイル。そうすることで、このオブジェクトは他のプロジェクトでも使用できる。
 
-> **メモ:** 上記ファイルリストに何か欠けているものがあることに気づきましたか？ ビューやモデルがある一方で、URL マッピング、テンプレート、静的ファイルの配置場所はありません。それらの作り方も以後説明します。(それらは全てのサイトで必須ではないですが、この例では必要になります。).
+> [!NOTE]
+> 上記ファイルリストに何か欠けているものがあることに気づきましたか？ ビューやモデルがある一方で、URL マッピング、テンプレート、静的ファイルの配置場所はありません。それらの作り方も以後説明します。(それらは全てのサイトで必須ではないですが、この例では必要になります。).
 
 ## catalog アプリケーションの登録
 
@@ -137,7 +140,8 @@ INSTALLED_APPS = [
 
 追加した新しい行はアプリケーションの構成オブジェクト(`CatalogConfig`) を指定しており、それはアプリケーション作成時に**/locallibrary/catalog/apps.py** によって生成されています。
 
-> **メモ:** すでにたくさんの他の`INSTALLED_APPS` (`MIDDLEWARE`も同様。設定ファイルのさらに下の方にあります)が存在していることに気づいたでしょう。これらは、[Django administration site](/ja/docs/Learn/Server-side/Django/Admin_site) をサポートすること可能にし、その結果、Django が使用するたくさんの機能(セッション、認証など)をサポートします。
+> [!NOTE]
+> すでにたくさんの他の`INSTALLED_APPS` (`MIDDLEWARE`も同様。設定ファイルのさらに下の方にあります)が存在していることに気づいたでしょう。これらは、[Django administration site](/ja/docs/Learn/Server-side/Django/Admin_site) をサポートすること可能にし、その結果、Django が使用するたくさんの機能(セッション、認証など)をサポートします。
 
 ## データベースの指定
 
@@ -202,7 +206,8 @@ urlpatterns = [
 
 The URL mappings are managed through the `urlpatterns` variable, which is a Python _list_ of `path()` functions. Each `path()` function either associates a URL pattern to a _specific view_, which will be displayed when the pattern is matched, or with another list of URL pattern testing code (in this second case, the pattern becomes the "base URL" for patterns defined in the target module). The `urlpatterns` list initially defines a single function that maps all URLs with the pattern _admin/_ to the module `admin.site.urls` , which contains the Administration application's own URL mapping definitions.
 
-> **メモ:** The route in `path()` is a string defining a URL pattern to match. This string might include a named variable (in angle brackets), e.g. `'catalog/<id>/'`. This pattern will match a URL like **/catalog/**_any_chars_**/** and pass _any_chars_ to the view as a string with parameter name `id`). We discuss path methods and route patterns further in later topics.
+> [!NOTE]
+> The route in `path()` is a string defining a URL pattern to match. This string might include a named variable (in angle brackets), e.g. `'catalog/<id>/'`. This pattern will match a URL like **/catalog/**_any_chars_**/** and pass _any_chars_ to the view as a string with parameter name `id`). We discuss path methods and route patterns further in later topics.
 
 Add the lines below to the bottom of the file in order to add a new list item to the `urlpatterns` list. This new item includes a `path()` that forwards requests with the pattern `catalog/` to the module `catalog.urls` (the file with the relative URL **/catalog/urls.py**).
 
@@ -251,7 +256,8 @@ from django.conf.urls.static import static
 urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 ```
 
-> **メモ:** There are a number of ways to extend the `urlpatterns` list (above we just appended a new list item using the `+=` operator to clearly separate the old and new code). We could have instead just included this new pattern-map in the original list definition:
+> [!NOTE]
+> There are a number of ways to extend the `urlpatterns` list (above we just appended a new list item using the `+=` operator to clearly separate the old and new code). We could have instead just included this new pattern-map in the original list definition:
 >
 > ```python
 > urlpatterns = [
@@ -292,19 +298,22 @@ python3 manage.py makemigrations
 python3 manage.py migrate
 ```
 
-> **警告:** You'll need to run the above commands every time your models change in a way that will affect the structure of the data that needs to be stored (including both addition and removal of whole models and individual fields).
+> [!WARNING]
+> You'll need to run the above commands every time your models change in a way that will affect the structure of the data that needs to be stored (including both addition and removal of whole models and individual fields).
 
 The `makemigrations` command _creates_ (but does not apply) the migrations for all applications installed in your project (you can specify the application name as well to just run a migration for a single project). This gives you a chance to checkout the code for these migrations before they are applied — when you're a Django expert you may choose to tweak them slightly!
 
 The `migrate` command actually applies the migrations to your database (Django tracks which ones have been added to the current database).
 
-> **メモ:** See [Migrations](https://docs.djangoproject.com/en/2.0/topics/migrations/) (Django docs) for additional information about the lesser-used migration commands.
+> [!NOTE]
+> See [Migrations](https://docs.djangoproject.com/en/2.0/topics/migrations/) (Django docs) for additional information about the lesser-used migration commands.
 
 ### Running the website
 
 During development you can test the website by first serving it using the _development web server_, and then viewing it on your local web browser.
 
-> **メモ:** The development web server is not robust or performant enough for production use, but it is a very easy way to get your Django website up and running during development to give it a convenient quick test. By default it will serve the site to your local computer (`http://127.0.0.1:8000/)`, but you can also specify other computers on your network to serve to. For more information see [django-admin and manage.py: runserver](https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver) (Django docs).
+> [!NOTE]
+> The development web server is not robust or performant enough for production use, but it is a very easy way to get your Django website up and running during development to give it a convenient quick test. By default it will serve the site to your local computer (`http://127.0.0.1:8000/)`, but you can also specify other computers on your network to serve to. For more information see [django-admin and manage.py: runserver](https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver) (Django docs).
 
 Run the _development web server_ by calling the `runserver` command (in the same directory as **manage.py**):
 
@@ -326,11 +335,13 @@ Once the server is running you can view the site by navigating to `http://127.0.
 
 Don't worry! This error page is expected because we don't have any pages/urls defined in the `catalogs.urls` module (which we're redirected to when we get an URL to the root of the site).
 
-> **メモ:** The above page demonstrates a great Django feature — automated debug logging. An error screen will be displayed with useful information whenever a page cannot be found, or any error is raised by the code. In this case we can see that the URL we've supplied doesn't match any of our URL patterns (as listed). The logging will be turned off during production (when we put the site live on the Web), in which case a less informative but more user-friendly page will be served.
+> [!NOTE]
+> The above page demonstrates a great Django feature — automated debug logging. An error screen will be displayed with useful information whenever a page cannot be found, or any error is raised by the code. In this case we can see that the URL we've supplied doesn't match any of our URL patterns (as listed). The logging will be turned off during production (when we put the site live on the Web), in which case a less informative but more user-friendly page will be served.
 
 At this point we know that Django is working!
 
-> **メモ:** You should re-run migrations and re-test the site whenever you make significant changes. It doesn't take very long!
+> [!NOTE]
+> You should re-run migrations and re-test the site whenever you make significant changes. It doesn't take very long!
 
 ## 自分でやってみよう
 
diff --git a/files/ja/learn/server-side/express_nodejs/development_environment/index.md b/files/ja/learn/server-side/express_nodejs/development_environment/index.md
index 7960629ceed7d1..92365abe764ebd 100644
--- a/files/ja/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/ja/learn/server-side/express_nodejs/development_environment/index.md
@@ -36,7 +36,8 @@ _Node_ と _npm_ パッケージマネージャーは、準備されたバイナ
 
 _npm_ は [MVC パターン](/ja/docs/Glossary/MVC)に従ったスケルトンの _Express_ ウェブアプリケーションを作成するための便利なツールである _Express Application Generator_ を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。
 
-> **メモ:** 他のウェブフレームワークとは異なり、開発環境には独立した開発用のウェブサーバーは含まれていません。_Node_/_Express_ では、ウェブアプリケーションが独自のウェブサーバーを作成して実行します。
+> [!NOTE]
+> 他のウェブフレームワークとは異なり、開発環境には独立した開発用のウェブサーバーは含まれていません。_Node_/_Express_ では、ウェブアプリケーションが独自のウェブサーバーを作成して実行します。
 
 [テキストエディター](/ja/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors)やコード編集用の IDE、コードの異なるバージョンを安全に管理するための [Git](https://git-scm.com/) などのソース管理マネジメントツールなど、一般的な開発環境の一部である他の周辺ツールもあります。これらの種類のツール (特にテキストエディター) が既にインストールされていると仮定しています。
 
@@ -63,7 +64,7 @@ _Express_ は常に最新のバージョンを使うべきです。
 _Express_ を使用するには、 _Nodejs_ と [Node Package Manager (npm)](https://docs.npmjs.com/) をオペレーティングシステムにインストールする必要があります。
 これを簡単にするために、最初に node バージョンマネージャをインストールし、それを使用して最新の LTS(Long Term Supported) バージョンの node と npm をインストールします。
 
-> **メモ:** <https://nodejs.org/en/> で提供されているインストーラーを使って nodejs と npm をインストールすることもできます（「ほとんどのユーザーに推奨」されている LTS ビルドをダウンロードするボタンを選択します）。また、[お使いの OS のパッケージマネージャーを使用してインストールする](https://nodejs.org/ja/download/package-manager/) こともできます。
+> [!NOTE] > <https://nodejs.org/en/> で提供されているインストーラーを使って nodejs と npm をインストールすることもできます（「ほとんどのユーザーに推奨」されている LTS ビルドをダウンロードするボタンを選択します）。また、[お使いの OS のパッケージマネージャーを使用してインストールする](https://nodejs.org/ja/download/package-manager/) こともできます。
 > node バージョンマネージャを使用することを強く推奨します。バージョンマネージャを使用することで、 node と npm の具体的なバージョンのインストール、アップグレード、切り替えが簡単になります。
 
 ### Windows
@@ -85,7 +86,8 @@ nvm install lts
 nvm use 20.11.0
 ```
 
-> **メモ:** 「アクセス拒否」の警告が表示される場合は、管理者権限でこのコマンドをプロンプトで実行する必要があります。
+> [!NOTE]
+> 「アクセス拒否」の警告が表示される場合は、管理者権限でこのコマンドをプロンプトで実行する必要があります。
 
 コマンド `nvm --help` を使用して、利用できるすべてのノードのバージョンやダウンロードした NVM のバージョンの一覧など、他にもコマンドラインオプションを探すことができます。
 
@@ -155,7 +157,8 @@ _Nodejs_ パッケージマネージャー _npm_ もインストールされて
 
    このコードは "http" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバーを作成 (`createServer()`) します。次に、スクリプトはサーバーをテストするために使用できるブラウザー URL についてのメッセージをコンソールに出力します。 `createServer()` 関数は、HTTP リクエストを受信したときに呼び出されるコールバック関数を引数として取ります。これは HTTP ステータスコード 200 ("OK") とプレーンテキスト "Hello World" のレスポンスを返します。
 
-   > **メモ:** このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。
+   > [!NOTE]
+   > このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。
 
 2. コマンドプロンプトで `hellonode.js` ファイルと同じディレクトリーに移動し、次のようにスクリプト名とともに `node` を呼び出してサーバーを起動します。
 
@@ -176,7 +179,8 @@ _Nodejs_ パッケージマネージャー _npm_ もインストールされて
 Node 自体の次に、[npm](https://docs.npmjs.com/) は Node アプリケーションを操作するための最も重要なツールです。
 `npm` は、アプリケーションが開発、テスト、運用に必要なパッケージ（JavaScript ライブラリー）を取得するために使用されます。また、開発プロセスで使用されるテストやツールを実行するために使用されることもあります。
 
-> **メモ:** Node の観点からすると、Express は npm を使用してインストールしてから独自のコードで必要とするもう 1 つのパッケージです。
+> [!NOTE]
+> Node の観点からすると、Express は npm を使用してインストールしてから独自のコードで必要とするもう 1 つのパッケージです。
 
 手動で npm を使用して、必要な各パッケージを別々に取り出すことができます。通常、代わりに [package.json](https://docs.npmjs.com/files/package.json) というプレーンテキストの定義ファイルを使用して依存関係を管理します。このファイルにはパッケージの名前、バージョン、説明、実行する初期ファイル、プロダクション依存関係、開発依存関係、それが動作可能な _Node_ のバージョンなど、特定の JavaScript "package" に対するすべての依存関係が一覧表示されます。**package.json** ファイルには、npm がアプリケーションを取得して実行するために必要なものがすべて含まれている必要があります (再利用可能なライブラリーを作成している場合は、この定義を使用してパッケージを npm リポジトリーにアップロードし、他のユーザーが利用できるようにします)。
 
@@ -184,7 +188,8 @@ Node 自体の次に、[npm](https://docs.npmjs.com/) は Node アプリケー
 
 次の手順では npm を使用してパッケージをダウンロードし、それをプロジェクトの依存関係に保存してから、それを Node アプリケーションで要求する方法を示します。
 
-> **メモ:** ここでは Express パッケージを取得してインストールするための手順を示します。後で、このパッケージなどが Express Application Generator を使用してすでにどのように指定されているかを示します。この節は npm がどのように機能するのか、および Application Generator によって何が作成されているのかを理解するのに役立ちます。
+> [!NOTE]
+> ここでは Express パッケージを取得してインストールするための手順を示します。後で、このパッケージなどが Express Application Generator を使用してすでにどのように指定されているかを示します。この節は npm がどのように機能するのか、および Application Generator によって何が作成されているのかを理解するのに役立ちます。
 
 1. まず、新しいアプリケーション用のディレクトリーを作成し、そこに移動します。
 
@@ -294,7 +299,8 @@ npm install eslint --save-dev
   }
 ```
 
-> **メモ:** 「[リンター](<https://en.wikipedia.org/wiki/Lint_(software)>)」は一連のコーディングのベストプラクティスに準拠しているかどうかを認識して報告するために、ソフトウェアで静的分析を実行するツールです。
+> [!NOTE]
+> 「[リンター](<https://en.wikipedia.org/wiki/Lint_(software)>)」は一連のコーディングのベストプラクティスに準拠しているかどうかを認識して報告するために、ソフトウェアで静的分析を実行するツールです。
 
 ### タスクの実行
 
@@ -332,7 +338,8 @@ npm run lint
 npm install express-generator -g
 ```
 
-> **メモ:** Ubuntu や macOS では、この行の接頭辞に `sudo` を付ける必要があるかもしれません。`-g` フラグを指定すると、ツールをグローバルにインストールして、どこからでも呼び出すことができます。
+> [!NOTE]
+> Ubuntu や macOS では、この行の接頭辞に `sudo` を付ける必要があるかもしれません。`-g` フラグを指定すると、ツールをグローバルにインストールして、どこからでも呼び出すことができます。
 
 既定の設定で "helloworld" という名前の Express アプリを作成するには、作成する場所に移動して、図のようにアプリを実行します。
 
@@ -340,7 +347,8 @@ npm install express-generator -g
 express helloworld
 ```
 
-> **メモ:** 古いバージョン (< 8.2.0) の nodejs を使用していない限り、インストールをスキップして[npx](https://github.com/npm/npx#readme) で express-generator を実行することもできます。
+> [!NOTE]
+> 古いバージョン (< 8.2.0) の nodejs を使用していない限り、インストールをスキップして[npx](https://github.com/npm/npx#readme) で express-generator を実行することもできます。
 > これはインストールしてから `express-generator` を実行するのと同じ効果がありますが、パッケージをシステムにインストールするわけではありません。
 >
 > ```bash
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
index 1523e8b060b040..fc32e7a66adcf6 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
@@ -87,7 +87,8 @@ Run the application and open your browser to <http://localhost:3000/>. Select th
 
 ![Author Detail Page - Express Local Library site](LocalLibary_Express_Author_Detail.png)
 
-> **メモ:** The appearance of the author _lifespan_ dates is ugly! We'll address that in the final challenge in this article.
+> [!NOTE]
+> The appearance of the author _lifespan_ dates is ugly! We'll address that in the final challenge in this article.
 
 ## Next steps
 
diff --git a/files/ja/learn/server-side/express_nodejs/forms/index.md b/files/ja/learn/server-side/express_nodejs/forms/index.md
index 3aab544ae73be3..8a404a6dd5640a 100644
--- a/files/ja/learn/server-side/express_nodejs/forms/index.md
+++ b/files/ja/learn/server-side/express_nodejs/forms/index.md
@@ -19,7 +19,8 @@ slug: Learn/Server-side/Express_Nodejs/forms
 
 このチュートリアルでは、上記の操作を Express で実行する方法を紹介します。途中で、サンプルとして地域図書館のウェブサイトを拡張して、ユーザーがライブラリーからアイテムを作成、編集、削除できるようにします。
 
-> **メモ:** サンプルとして準備されている地域図書館のウェブサイトは認証済みユーザーのみに閲覧を制限する方法については書いてないので、現時点ではどのユーザーでもデータベースに変更を加えることができます。
+> [!NOTE]
+> サンプルとして準備されている地域図書館のウェブサイトは認証済みユーザーのみに閲覧を制限する方法については書いてないので、現時点ではどのユーザーでもデータベースに変更を加えることができます。
 
 ### HTML フォーム
 
@@ -92,7 +93,8 @@ npm install express-validator
 
 #### express-validator の使用
 
-> **メモ:** Github の[express-validator](https://github.com/ctavan/express-validator#express-validator)ガイドに API の概要が書かれています。(カスタムバリデータの作成を含む) すべての機能を知るには、これを読むことをお勧めします。以下では、サンプルの「地域図書館」にとって有用なサブセットだけを取り上げます。
+> [!NOTE]
+> Github の[express-validator](https://github.com/ctavan/express-validator#express-validator)ガイドに API の概要が書かれています。(カスタムバリデータの作成を含む) すべての機能を知るには、これを読むことをお勧めします。以下では、サンプルの「地域図書館」にとって有用なサブセットだけを取り上げます。
 
 コントローラでバリデータを使うには、以下のように **'express-validator/check'** と **'express-validator/filter'**モジュールから使いたい関数を要求(require)しなければなりません。
 
@@ -119,7 +121,8 @@ const { sanitizeBody } = require("express-validator/filter");
       .isAlpha().withMessage('Name must be alphabet letters.'),
   ```
 
-  > **メモ:** また、上記のように `trim()` のようなインラインサニタイザーを追加することもできます。しかし、ここで適用されるサニタイザは検証ステップにのみ適用されます。最終的な出力をサニタイザ処理したい場合は、以下のように別のサニタイザメソッドを使用する必要があります。
+  > [!NOTE]
+  > また、上記のように `trim()` のようなインラインサニタイザーを追加することもできます。しかし、ここで適用されるサニタイザは検証ステップにのみ適用されます。最終的な出力をサニタイザ処理したい場合は、以下のように別のサニタイザメソッドを使用する必要があります。
 
 - [`sanitizeBody(fields)`](https://github.com/ctavan/express-validator#sanitizebodyfields): サニタイズするフィールドを指定します。サニタイズ操作は、このメソッドにデイジーチェーン接続されます。例えば、以下の `escape()` サニタイズ操作は、JavaScript のクロスサイトスクリプティング攻撃で使用される可能性のある HTML 文字（例えば「'」、「"」、「&」など）を name 変数から削除します。
 
@@ -162,7 +165,8 @@ For this project we will simplify the implementation by stating that a form can
 - Create an object using objects that already exist (so users will have to create any required `Author` and `Genre` instances before attempting to create any `Book` objects).
 - Delete an object if it is not referenced by other objects (so for example, you won't be able to delete a `Book` until all associated `BookInstance` objects have been deleted).
 
-> **メモ:** A more "robust" implementation might allow you to create the dependent objects when creating a new object, and delete any object at any time (for example, by deleting dependent objects, or by removing references to the deleted object from the database).
+> [!NOTE]
+> A more "robust" implementation might allow you to create the dependent objects when creating a new object, and delete any object at any time (for example, by deleting dependent objects, or by removing references to the deleted object from the database).
 
 ### Routes
 
diff --git a/files/ja/learn/server-side/express_nodejs/index.md b/files/ja/learn/server-side/express_nodejs/index.md
index 3b42f4f1d9851b..cc12427f57cd2b 100644
--- a/files/ja/learn/server-side/express_nodejs/index.md
+++ b/files/ja/learn/server-side/express_nodejs/index.md
@@ -13,7 +13,8 @@ Express は、JavaScript で書かれ、Node.js 実行環境内でホストさ
 
 このモジュールを始める前に、サーバーサイドのウェブプログラミングとウェブフレームワークが何かを理解する必要があります。理想的なのは[サーバーサイドのウェブサイトプログラミングの第一歩](/ja/docs/Learn/Server-side/First_steps)モジュールのトピックを読むことです。プログラミングの概念と [JavaScript](/ja/docs/Web/JavaScript) の一般的な知識があることを強くお勧めしますが、中核となる概念を理解するために不可欠ではありません。
 
-> **メモ:** このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。[JavaScript](/ja/docs/Web/JavaScript)、[JavaScript ガイド](/ja/docs/Web/JavaScript/Guide)、[JavaScript の基本](/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)、[JavaScript](/ja/docs/Learn/JavaScript)(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための[追加の API](https://nodejs.org/dist/latest-v10.x/docs/api/) を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。
+> [!NOTE]
+> このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。[JavaScript](/ja/docs/Web/JavaScript)、[JavaScript ガイド](/ja/docs/Web/JavaScript/Guide)、[JavaScript の基本](/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)、[JavaScript](/ja/docs/Learn/JavaScript)(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための[追加の API](https://nodejs.org/dist/latest-v10.x/docs/api/) を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。
 >
 > このガイドは Node.js と Express を使った作業についての情報を提供します。インターネットや本には他にもたくさんの優れたリソースがあります。これらのうち一部は [How do I get started with Node.js](https://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js/5511507) (StackOverflow) と [What are the best resources for learning Node.js?](https://www.quora.com/What-is-the-greatest-resource-for-learning-Node-js-for-a-newbie) (Quora) からリンクされています。
 
diff --git a/files/ja/learn/server-side/express_nodejs/introduction/index.md b/files/ja/learn/server-side/express_nodejs/introduction/index.md
index f1a405a417a182..a177cdc3245985 100644
--- a/files/ja/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/ja/learn/server-side/express_nodejs/introduction/index.md
@@ -100,7 +100,8 @@ Node HTTP パッケージを使用することで、Node.js で簡単な ウェ
 
 Express 自体はかなりシンプルですが、開発者はほぼすべてのウェブ開発問題に対応する互換性のあるミドルウェアパッケージを作成しています。Cookie、セッション、ユーザーログイン、URL 引数、POST データ、セキュリティヘッダーなどを扱うライブラリーがあります。Express チームが管理するミドルウェアパッケージのリストは、[Express Middleware](http://expressjs.com/en/resources/middleware.html) (一般的なサードパーティパッケージのリストとともに) にあります。
 
-> **メモ:** この柔軟性は両刃の剣です。ほぼすべての問題や要件に対応するミドルウェアパッケージがありますが、適切なパッケージを使用して作業することは時には挑戦になることがあります。アプリケーションを構造化する「正しい方法」もなく、インターネット上で見つかる多くの例は最適ではないし、ウェブアプリケーションを開発するために必要なことのほんの一部を示しているだけです。
+> [!NOTE]
+> この柔軟性は両刃の剣です。ほぼすべての問題や要件に対応するミドルウェアパッケージがありますが、適切なパッケージを使用して作業することは時には挑戦になることがあります。アプリケーションを構造化する「正しい方法」もなく、インターネット上で見つかる多くの例は最適ではないし、ウェブアプリケーションを開発するために必要なことのほんの一部を示しているだけです。
 
 ## Node と Express はどこから来たのですか？
 
@@ -176,7 +177,8 @@ const app = express();
 
 独自のモジュールを作成して、同じ方法でインポートすることもできます。
 
-> **メモ:** あなたは自身のモジュールを作成したいと思うでしょう、これはあなたが自身のコードを管理しやすい部品に分けることを可能にします 。ちなみに、モノリシックな単一ファイルのアプリケーションは理解し維持するのが難しいです。モジュールを使用すると、明示的にエクスポートした変数のみがインポートされるため、モジュールを使用すると名前空間を管理するのにも役立ちます。
+> [!NOTE]
+> あなたは自身のモジュールを作成したいと思うでしょう、これはあなたが自身のコードを管理しやすい部品に分けることを可能にします 。ちなみに、モノリシックな単一ファイルのアプリケーションは理解し維持するのが難しいです。モジュールを使用すると、明示的にエクスポートした変数のみがインポートされるため、モジュールを使用すると名前空間を管理するのにも役立ちます。
 
 オブジェクトをモジュールの外部で利用可能にするには、それらを `exports` オブジェクトの追加プロパティとして公開するだけです。たとえば、以下の **square.js** モジュールは `area()` メソッドと `perimeter()` メソッドをエクスポートしたファイルです。
 
@@ -196,7 +198,8 @@ const square = require("./square"); //  require() にはファイル拡張子を
 console.log(`The area of a square with a width of 4 is ${square.area(4)}`);
 ```
 
-> **メモ:** モジュールへの絶対パス (または最初に行ったように名前) を指定することもできます。
+> [!NOTE]
+> モジュールへの絶対パス (または最初に行ったように名前) を指定することもできます。
 
 一度に 1 つのプロパティを構築するのではなく、1 つの割り当てで完全なオブジェクトをエクスポートする場合は、次のように `module.exports` に割り当てます (これを実行して、エクスポートオブジェクトのルートをコンストラクタまたは他の関数にすることもできます)。
 
@@ -238,9 +241,11 @@ Node はシングルスレッドのイベント駆動型実行環境であるた
 
 非同期 API がアプリケーションに完了したことを通知するにはいくつかの方法があります。最も一般的な方法は、非同期 API を呼び出すときにコールバック関数を登録することです。これは、操作が完了したときにコールバックされます。 これが上記で使用されているアプローチです。
 
-> **メモ:** コールバックを使用することは、順番に実行しなければならない一連の従属非同期操作がある場合、かなり「面倒」になる可能性があります。これは、複数レベルのネストされたコールバックをもたらすためです。この問題は一般に「コールバック地獄」として知られています。この問題は、[async](https://www.npmjs.com/package/async) などのモジュールを使用した優れたコーディング方法（<http://callbackhell.com/> を参照）、または[プロミス](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)または [async/await](/ja/docs/Web/JavaScript/Reference/Statements/async_function) などのネイティブの JavaScript 機能へのリファクタリングによっても軽減できます。Node はコールバック→プロミスの変換を人間工学的に行うために [`utils.promisify`](https://nodejs.org/api/util.html#utilpromisifyoriginal) という関数を提供しています。
+> [!NOTE]
+> コールバックを使用することは、順番に実行しなければならない一連の従属非同期操作がある場合、かなり「面倒」になる可能性があります。これは、複数レベルのネストされたコールバックをもたらすためです。この問題は一般に「コールバック地獄」として知られています。この問題は、[async](https://www.npmjs.com/package/async) などのモジュールを使用した優れたコーディング方法（<http://callbackhell.com/> を参照）、または[プロミス](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)または [async/await](/ja/docs/Web/JavaScript/Reference/Statements/async_function) などのネイティブの JavaScript 機能へのリファクタリングによっても軽減できます。Node はコールバック→プロミスの変換を人間工学的に行うために [`utils.promisify`](https://nodejs.org/api/util.html#utilpromisifyoriginal) という関数を提供しています。
 
-> **メモ:** Node と Express の一般的な規約は、エラー優先コールバックを使うことです。この規約では、コールバック関数の最初の値はエラー値ですが、後続の引数には成功データが含まれます。 なぜこのアプローチがこのブログで役に立つのかについての良い説明があります：[Node.js の方法 - エラーファーストコールバックについて](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js) (fredkschott.com)。
+> [!NOTE]
+> Node と Express の一般的な規約は、エラー優先コールバックを使うことです。この規約では、コールバック関数の最初の値はエラー値ですが、後続の引数には成功データが含まれます。 なぜこのアプローチがこのブログで役に立つのかについての良い説明があります：[Node.js の方法 - エラーファーストコールバックについて](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js) (fredkschott.com)。
 
 ### ルートハンドラーの作成
 
@@ -308,7 +313,8 @@ app.use("/wiki", wiki);
 
 ミドルウェアは静的ファイルの提供からエラー処理、HTTP レスポンスの圧縮まで、Express アプリケーションで広く使用されています。ルート関数は HTTP クライアントにレスポンスを返すことで HTTP リクエスト - レスポンスサイクルを終了しますが、ミドルウェア関数は通常、リクエストまたはレスポンスに対して何らかの操作を実行してから、「スタック」内の次の機能を呼び出します。これは、より多くのミドルウェアまたはルートハンドラーの場合があります。ミドルウェアが呼び出される順序はアプリ開発者次第です。
 
-> **メモ:** ミドルウェアは任意の操作を実行し、任意のコードを実行し、リクエストおよびレスポンスオブジェクトに変更を加えることができ、またリクエスト - レスポンスサイクルを終了することもできます。サイクルが終了しない場合は、`next()` を呼び出して次のミドルウェア機能に制御を渡す必要があります (そうでない場合、リクエストは中断されたままになります)。
+> [!NOTE]
+> ミドルウェアは任意の操作を実行し、任意のコードを実行し、リクエストおよびレスポンスオブジェクトに変更を加えることができ、またリクエスト - レスポンスサイクルを終了することもできます。サイクルが終了しない場合は、`next()` を呼び出して次のミドルウェア機能に制御を渡す必要があります (そうでない場合、リクエストは中断されたままになります)。
 
 Cookie の操作、セッション、ユーザー認証、リクエスト `POST` および JSON データへのアクセス、ロギングなどの一般的なウェブ開発タスクを簡素化するために、ほとんどのアプリはサードパーティ製ミドルウェアを使用します。[Express チームが管理するミドルウェアパッケージのリスト](http://expressjs.com/ja/resources/middleware.html)を見つけることができます。(他の人気のあるサードパーティのパッケージも含みます)。他の Express パッケージは npm パッケージマネージャーで入手できます。
 
@@ -328,7 +334,8 @@ app.use(logger("dev"));
 // …
 ```
 
-> **メモ:** ミドルウェアおよびルーティング機能は、宣言されている順序で呼び出されます。ミドルウェアによっては、順序が重要です (たとえば、セッションミドルウェアが cookie ミドルウェアに依存している場合は、最初に cookie ハンドラーを追加する必要があります)。ほとんどの場合、ミドルウェアはルートを設定する前に呼び出されます。そうでないとルートハンドラーがミドルウェアによって追加された機能にアクセスすることはできません。
+> [!NOTE]
+> ミドルウェアおよびルーティング機能は、宣言されている順序で呼び出されます。ミドルウェアによっては、順序が重要です (たとえば、セッションミドルウェアが cookie ミドルウェアに依存している場合は、最初に cookie ハンドラーを追加する必要があります)。ほとんどの場合、ミドルウェアはルートを設定する前に呼び出されます。そうでないとルートハンドラーがミドルウェアによって追加された機能にアクセスすることはできません。
 
 あなたは自身のミドルウェア機能を書くことができ、そうする必要があるでしょう (エラー処理コードを作成するためだけの場合)。ミドルウェア関数とルートハンドラーコールバックの**唯一の**違いは、ミドルウェア関数が次に `next` 引数を持つことです。ミドルウェア関数はリクエストサイクルを完了させるものではない場合に呼び出されます (ミドルウェア関数が呼び出されるとき、その中には呼び出される _next_ 関数が含まれていなければなりません)。
 
@@ -357,7 +364,8 @@ app.get("/", a_middleware_function);
 app.listen(3000);
 ```
 
-> **メモ:** 上記ではミドルウェア関数を別々に宣言してからコールバックとして設定しています。以前のルートハンドラー関数では、使用時にコールバック関数を宣言しました。JavaScript では、どちらの方法も有効です。
+> [!NOTE]
+> 上記ではミドルウェア関数を別々に宣言してからコールバックとして設定しています。以前のルートハンドラー関数では、使用時にコールバック関数を宣言しました。JavaScript では、どちらの方法も有効です。
 
 Express の資料には、Express ミドルウェアの[使用](https://expressjs.com/ja/guide/using-middleware.html)および[作成](https://expressjs.com/ja/guide/writing-middleware.html)に関するより優れた資料があります。
 
@@ -416,9 +424,11 @@ app.use(function (err, req, res, next) {
 
 Express にはエラーハンドラーが組み込まれています。これは、アプリで発生する可能性がある残りのエラーを処理します。 このデフォルトのエラー処理ミドルウェア関数は、ミドルウェア関数スタックの最後に追加されます。`next()` にエラーを渡し、それをエラーハンドラーで処理しなかった場合、それは組み込みエラーハンドラーによって処理されます。エラーはスタックトレースとともにクライアントに書き込まれます。
 
-> **メモ:** スタックトレースは実稼働環境に含まれていません。プロダクションモードで実行するには、環境変数 `NODE_ENV` を '`production`' に設定する必要があります。
+> [!NOTE]
+> スタックトレースは実稼働環境に含まれていません。プロダクションモードで実行するには、環境変数 `NODE_ENV` を '`production`' に設定する必要があります。
 
-> **メモ:** HTTP 404 およびその他の "エラー" ステータスコードはエラーとして扱われません。これらを処理したい場合は、ミドルウェア関数を追加して処理することができます。詳しくは [FAQ](http://expressjs.com/ja/starter/faq.html#how-do-i-handle-404-responses) を見てください。
+> [!NOTE]
+> HTTP 404 およびその他の "エラー" ステータスコードはエラーとして扱われません。これらを処理したい場合は、ミドルウェア関数を追加して処理することができます。詳しくは [FAQ](http://expressjs.com/ja/starter/faq.html#how-do-i-handle-404-responses) を見てください。
 
 詳しくは[エラー処理](http://expressjs.com/ja/guide/error-handling.html)（Express ドキュメント） を参照してください。
 
diff --git a/files/ja/learn/server-side/express_nodejs/mongoose/index.md b/files/ja/learn/server-side/express_nodejs/mongoose/index.md
index 13b822b3d4b5b7..5237791ef277c5 100644
--- a/files/ja/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/ja/learn/server-side/express_nodejs/mongoose/index.md
@@ -80,17 +80,20 @@ NPM パッケージマネージャのサイトには、多数の ODM/ORM ソリ
 
 この図には、モデル間の関係 (それらの多重度も含む) も示されています。多重度は、関係内に存在する可能性がある各モデルの番号 (最大および最小) を示す図上の番号です。たとえば、ボックス間の接続線は、`Book` と `Genre` が関連していることを示しています。`Book` モデルに近い数字は、ジャンルに 0 個以上の Book がある必要があることを示しており、線のもう一方の端にある`Genre` の隣の数字は、本に 0 個以上の関連する`Genre`があることを示しています。
 
-> **メモ:** 下記の Mongoose 入門書で説明されているように、1 つのモデルだけで documents/models 間の関係を定義するフィールドがあるほうがよいでしょう (他のモデルで関連する `_id` を検索することによって逆の関係を見つけることができます)。以下では、Book スキーマの Book/Genre と Book/Author の関係、および BookInstance スキーマの Book/BookInstance の関係を定義します。この選択は多少恣意的でした - 他のスキーマでも同じようにフィールドを持つことができました。
+> [!NOTE]
+> 下記の Mongoose 入門書で説明されているように、1 つのモデルだけで documents/models 間の関係を定義するフィールドがあるほうがよいでしょう (他のモデルで関連する `_id` を検索することによって逆の関係を見つけることができます)。以下では、Book スキーマの Book/Genre と Book/Author の関係、および BookInstance スキーマの Book/BookInstance の関係を定義します。この選択は多少恣意的でした - 他のスキーマでも同じようにフィールドを持つことができました。
 
 ![Mongoose Library Model with correct cardinality](Library%20Website%20-%20Mongoose_Express.png)
 
-> **メモ:** 次のセクションでは、モデルの定義方法と使用方法を説明する基本的な入門書を提供します。お読みになったところで、上の図の各モデルをどのように構築するかを検討してください。
+> [!NOTE]
+> 次のセクションでは、モデルの定義方法と使用方法を説明する基本的な入門書を提供します。お読みになったところで、上の図の各モデルをどのように構築するかを検討してください。
 
 ## Mongoose 入門書
 
 このセクションでは、Mongoose を MongoDB データベースに接続する方法、スキーマとモデルを定義する方法、そして基本的なクエリーを作成する方法の概要を説明します。
 
-> **メモ:** この入門書は、npm の [Mongoose クイックスタート](https://www.npmjs.com/package/mongoose)と[公式ドキュメント](http://mongoosejs.com/docs/guide.html)に "大きく影響を受けています"。
+> [!NOTE]
+> この入門書は、npm の [Mongoose クイックスタート](https://www.npmjs.com/package/mongoose)と[公式ドキュメント](http://mongoosejs.com/docs/guide.html)に "大きく影響を受けています"。
 
 ### Mongoose と MongoDB のインストール
 
@@ -102,7 +105,8 @@ npm install mongoose
 
 Mongoose をインストールすると、MongoDB データベースドライバを含むすべての依存関係が追加されますが、MongoDB 自体はインストールされません。 MongoDB サーバーをインストールする場合は、さまざまな OS 用の[インストーラーをここからダウンロード](https://www.mongodb.com/download-center)してローカルにインストールできます。クラウドベースの MongoDB インスタンスを使用することもできます。
 
-> **メモ:** このチュートリアルでは、mLab クラウドベースの Database as a Service [サンドボックス層](https://mlab.com/plans/pricing/)として使用してデータベースを提供します。これは開発に適しており、オペレーティングシステムの "インストール" に依存しないため (database-as-a-service も本番データベースに使用することができる 1 つのアプローチです)、チュートリアルに適しています。
+> [!NOTE]
+> このチュートリアルでは、mLab クラウドベースの Database as a Service [サンドボックス層](https://mlab.com/plans/pricing/)として使用してデータベースを提供します。これは開発に適しており、オペレーティングシステムの "インストール" に依存しないため (database-as-a-service も本番データベースに使用することができる 1 つのアプローチです)、チュートリアルに適しています。
 
 ### MongoDB への接続
 
@@ -134,7 +138,8 @@ db.on("error", console.error.bind(console, "MongoDB connection error:"));
 
 その後、スキーマは `mongoose.model()` メソッドを使用してモデルに "コンパイル" されます。モデルを作成したら、それを使用して特定のタイプのオブジェクトを検索、作成、更新、および削除できます。
 
-> **メモ:** 各モデルは MongoDB データベース内のドキュメントのコレクションにマップされます。ドキュメントはモデル `Schema` で定義されたフィールド/スキーマタイプを含みます。
+> [!NOTE]
+> 各モデルは MongoDB データベース内のドキュメントのコレクションにマップされます。ドキュメントはモデル `Schema` で定義されたフィールド/スキーマタイプを含みます。
 
 #### スキーマの定義
 
@@ -174,7 +179,8 @@ var SomeModel = mongoose.model("SomeModel", SomeModelSchema);
 
 最初の引数はあなたのモデル用に作成されるコレクションの単数形の名前です (Mongoose は上記の SomeModel モデル用のデータベースコレクションを作成します)、そして 2 番目の引数はモデルの作成に使用したいスキーマです。
 
-> **メモ:** モデルクラスを定義したら、それらを使用してレコードを作成、更新、または削除し、クエリーを実行してすべてのレコードまたは特定のレコードのサブセットを取得できます。これを行う方法をモデルの使用セクションで、そしてビューを作成するときに示します。
+> [!NOTE]
+> モデルクラスを定義したら、それらを使用してレコードを作成、更新、または削除し、クエリーを実行してすべてのレコードまたは特定のレコードのサブセットを取得できます。これを行う方法をモデルの使用セクションで、そしてビューを作成するときに示します。
 
 #### スキーマ型 (フィールド)
 
@@ -250,7 +256,8 @@ var breakfastSchema = new Schema({
 
 Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.
 
-> **メモ:** We will use a virtual property in the library to define a unique URL for each model record using a path and the record's `_id` value.
+> [!NOTE]
+> We will use a virtual property in the library to define a unique URL for each model record using a path and the record's `_id` value.
 
 For more information see [Virtuals](http://mongoosejs.com/docs/guide.html#virtuals) (Mongoose documentation).
 
@@ -321,7 +328,8 @@ Athlete.find({ sport: "Tennis" }, "name age", function (err, athletes) {
 
 If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.
 
-> **メモ:** All callbacks in Mongoose use the pattern `callback(error, result)`. If an error occurs executing the query, the `error` parameter will contain an error document and `result` will be null. If the query is successful, the `error` parameter will be null, and the `result` will be populated with the results of the query.
+> [!NOTE]
+> All callbacks in Mongoose use the pattern `callback(error, result)`. If an error occurs executing the query, the `error` parameter will contain an error document and `result` will be null. If the query is successful, the `error` parameter will be null, and the `result` will be populated with the results of the query.
 
 If you don't specify a callback then the API will return a variable of type [Query](http://mongoosejs.com/docs/api.html#query-js). You can use this query object to build up your query and then execute it (with a callback) later using the `exec()` method.
 
@@ -364,7 +372,8 @@ The [find()](http://mongoosejs.com/docs/api.html#query_Query-find) method gets a
 - [`findOne()`](http://mongoosejs.com/docs/api.html#query_Query-findOne): Finds a single document that matches the specified criteria.
 - [`findByIdAndRemove()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove), [`findByIdAndUpdate()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate), [`findOneAndRemove()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove), [`findOneAndUpdate()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate): Finds a single document by `id` or criteria and either update or remove it. These are useful convenience functions for updating and removing records.
 
-> **メモ:** There is also a [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count) method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.
+> [!NOTE]
+> There is also a [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count) method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.
 
 There is a lot more you can do with queries. For more information see: [Queries](http://mongoosejs.com/docs/queries.html) (Mongoose docs).
 
@@ -425,7 +434,8 @@ Story.findOne({ title: "Bob goes sledding" })
   });
 ```
 
-> **メモ:** Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's `stories` array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.
+> [!NOTE]
+> Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's `stories` array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.
 >
 > A better way is to get the `_id` of our _author_, then use `find()` to search for this in the author field across all stories.
 >
@@ -476,7 +486,8 @@ Now that we understand something of what Mongoose can do and how we want to desi
 
 For this tutorial, we're going to use [mLab](https://mlab.com/welcome/)'s free cloud-hosted "[sandbox](https://mlab.com/plans/pricing/)" database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because mLab is a popular _database as a service_ vendor that you might reasonably choose for your production database (other popular choices at the time of writing include [Compose](https://www.compose.com/), [ScaleGrid](https://scalegrid.io/pricing.html) and [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)).
 
-> **メモ:** If you prefer you can set up a MongoDb database locally by downloading and installing the [appropriate binaries for your system](https://www.mongodb.com/download-center). The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.
+> [!NOTE]
+> If you prefer you can set up a MongoDb database locally by downloading and installing the [appropriate binaries for your system](https://www.mongodb.com/download-center). The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.
 
 You will first need to [create an account](https://mlab.com/signup/) with mLab (this is free, and just requires that you enter basic contact details and acknowledge their terms of service).
 
@@ -593,7 +604,8 @@ module.exports = mongoose.model("Author", AuthorSchema);
 
 We've also declared a [virtual](#Virtual_properties) for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.
 
-> **メモ:** Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.
+> [!NOTE]
+> Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.
 > At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!
 
 At the end of the module, we export the model.
@@ -685,7 +697,8 @@ In order to test the models (and to create some example books and other items th
 
 1. Download (or otherwise create) the file [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) inside your _express-locallibrary-tutorial_ directory (in the same level as `package.json`).
 
-   > **メモ:** You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
+   > [!NOTE]
+   > You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
 
 2. Enter the following commands in the project root to install the _async_ module that is required by the script (we'll discuss this in later tutorials, )
 
diff --git a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md
index d98ba811601f73..70f9fd17cb62b5 100644
--- a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -19,7 +19,8 @@ slug: Learn/Server-side/Express_Nodejs/skeleton_website
 
 次のセクションでは、アプリケーションジェネレーターを呼び出す方法を示し、さまざまな ビュー/CSS オプションについて簡単に説明します。また、スケルトンウェブサイトの構造についても説明します。最後に、ウェブサイトを実行してそれが機能することを確認する方法を紹介します。
 
-> **メモ:** Express アプリケーションジェネレーターは、Express アプリケーション用の唯一のジェネレーターというわけではありません。また、生成されたプロジェクトはファイルやディレクトリーを構造化する唯一実行可能な方法というわけではありません。しかしながら、生成されたサイトは、拡張と理解が容易なモジュール構造を持っています。最小限の Express アプリケーションについては、[Hello world の例](https://expressjs.com/ja/starter/hello-world.html) (Express ドキュメント) を参照してください。
+> [!NOTE]
+> Express アプリケーションジェネレーターは、Express アプリケーション用の唯一のジェネレーターというわけではありません。また、生成されたプロジェクトはファイルやディレクトリーを構造化する唯一実行可能な方法というわけではありません。しかしながら、生成されたサイトは、拡張と理解が容易なモジュール構造を持っています。最小限の Express アプリケーションについては、[Hello world の例](https://expressjs.com/ja/starter/hello-world.html) (Express ドキュメント) を参照してください。
 
 ## アプリケーションジェネレーターを使用する
 
@@ -58,13 +59,15 @@ express
 
 `--view` を使用してビュー (テンプレート) エンジンを選択したり、`--css` を使用して CSS 生成エンジンを選択したりすることもできます。
 
-> **メモ:** テンプレートエンジンを選択するためのその他のオプション (`--hogan`、`--ejs`、`--hbs` など) は推奨されません。`--view` (または `-v`)を使用してください。
+> [!NOTE]
+> テンプレートエンジンを選択するためのその他のオプション (`--hogan`、`--ejs`、`--hbs` など) は推奨されません。`--view` (または `-v`)を使用してください。
 
 ### どのビューエンジンを使うべきですか？
 
 Express Application Generator を使用すると、[EJS](https://www.npmjs.com/package/ejs)、[Hbs](http://github.com/donpark/hbs)、[Pug](https://pugjs.org/api/getting-started.html) (Jade)、[Twig](https://www.npmjs.com/package/twig)、[Vash](https://www.npmjs.com/package/vash) など、一般的なビュー/テンプレートエンジンを多数設定できます。ただし、ビューオプションを指定しない場合はデフォルトで Jade が選択されます。 Express 自体は、[一般的な](https://github.com/expressjs/express/wiki#template-engines)他のテンプレート言語の多くをサポートすることができます。
 
-> **メモ:** ジェネレーターでサポートされていないテンプレートエンジンを使用したい場合は、[Express でテンプレートエンジンを使用する](https://expressjs.com/ja/guide/using-template-engines.html) (Express ドキュメント) およびターゲットビューエンジンのドキュメントを参照してください。
+> [!NOTE]
+> ジェネレーターでサポートされていないテンプレートエンジンを使用したい場合は、[Express でテンプレートエンジンを使用する](https://expressjs.com/ja/guide/using-template-engines.html) (Express ドキュメント) およびターゲットビューエンジンのドキュメントを参照してください。
 
 一般的に、あなたが必要とするすべての機能を提供し、あなたがより早く生産的になることを可能にするテンプレートエンジンを選ぶべきです ー もしくは言い換えれば、同じ方法で、他のコンポーネントを選択するということです。テンプレートエンジンを比較する際に考慮すべき点がいくつかあります。
 
@@ -90,7 +93,8 @@ Express Application Generator を使用すると、[EJS](https://www.npmjs.com/p
 
 Express Application Generator を使用すると、最も一般的な CSS スタイルシートエンジン ([LESS](http://lesscss.org/)、[SASS](http://sass-lang.com/)、[Compass](http://compass-style.org/)、[Stylus](http://stylus-lang.com/)) を使用するように構成されたプロジェクトを作成できます。
 
-> **メモ:** CSS にはいくつかの制限があり、特定のタスクを困難にします。CSS スタイルシートエンジンを使用すると、CSS を定義するためのより強力な構文を使用してから、ブラウザーで使用するためにその定義を通常の CSS にコンパイルできます。
+> [!NOTE]
+> CSS にはいくつかの制限があり、特定のタスクを困難にします。CSS スタイルシートエンジンを使用すると、CSS を定義するためのより強力な構文を使用してから、ブラウザーで使用するためにその定義を通常の CSS にコンパイルできます。
 
 テンプレートエンジンと同様に、チームを最も生産的にすることができるスタイルシートエンジンを使用する必要があります。このプロジェクトでは、CSS 要件が他のものを使用することを正当化するのに十分に複雑ではないため、通常の CSS (デフォルト) を使用します。
 
@@ -234,7 +238,8 @@ npm install -g nodemon
   DEBUG=express-locallibrary-tutorial:* npm run devstart
   ```
 
-> **メモ:** プロジェクト内のファイルを編集した場合は、サーバーが再起動します (またはコマンドプロンプトで `rs` と入力していつでも再起動できます)。あなたはまだページを更新するためにブラウザーを再読み込みする必要があるでしょう。
+> [!NOTE]
+> プロジェクト内のファイルを編集した場合は、サーバーが再起動します (またはコマンドプロンプトで `rs` と入力していつでも再起動できます)。あなたはまだページを更新するためにブラウザーを再読み込みする必要があるでしょう。
 >
 > "start" は実際には名前付きスクリプトにマップされた NPM コマンドなので、ここでは単に `npm start` ではなく "`npm run <scriptname>`" を呼び出す必要があります。起動スクリプトのコマンドを置き換えることもできますが、開発中は nodemon を使用するだけなので、新しいスクリプトコマンドを作成するのが理にかなっています。
 
@@ -361,7 +366,8 @@ var indexRouter = require("./routes/index");
 var usersRouter = require("./routes/users");
 ```
 
-> **メモ:** この時点で、モジュールをインポートしたばかりです。 実際にはまだそのルートを使用していません (これはファイルの少し下まで行われます)。
+> [!NOTE]
+> この時点で、モジュールをインポートしたばかりです。 実際にはまだそのルートを使用していません (これはファイルの少し下まで行われます)。
 
 次に、インポートした Express モジュールを使ってアプリオブジェクトを作成し、それを使ってビュー (テンプレート) エンジンを設定します。エンジンの設定には 2 つの部分があります。まず、 '`views`' の値を設定して、テンプレートが保存されるフォルダーを指定します (この場合はサブフォルダーの **/views**)。それから '`view engine`' の値を設定してテンプレートライブラリー (この場合は "pug") を指定します。
 
@@ -392,7 +398,8 @@ app.use("/", indexRouter);
 app.use("/users", usersRouter);
 ```
 
-> **メモ:** 上記で指定されたパス ('/' と '`/users'`) は、インポートされたファイルで定義されているルートの接頭辞として扱われます。たとえば、インポートされたユーザーモジュールが `/profile` のルートを定義している場合は、`/users/profile` でそのルートにアクセスします。 ルートの詳細については後の記事で説明します。
+> [!NOTE]
+> 上記で指定されたパス ('/' と '`/users'`) は、インポートされたファイルで定義されているルートの接頭辞として扱われます。たとえば、インポートされたユーザーモジュールが `/profile` のルートを定義している場合は、`/users/profile` でそのルートにアクセスします。 ルートの詳細については後の記事で説明します。
 
 ファイルの最後のミドルウェアは、エラーと HTTP 404 レスポンス用のハンドラーメソッドを追加します。
 
diff --git a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
index cd5fd8b02b4742..47f90fc72355f2 100644
--- a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -45,7 +45,8 @@ _LocalLibrary_ は、この一連のチュートリアルの過程で作成お
 
 あなたが立ち往生したならば、[Github のここ](https://github.com/mdn/express-locallibrary-tutorial)で ウェブサイトの完全に開発されたバージョンを見つけることができます。
 
-> **メモ:** この文書でテストされた Node、Express、および他のモジュールの特定のバージョンは、プロジェクト [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) にリストされています。
+> [!NOTE]
+> この文書でテストされた Node、Express、および他のモジュールの特定のバージョンは、プロジェクト [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) にリストされています。
 
 ## まとめ
 
diff --git a/files/ja/learn/server-side/first_steps/client-server_overview/index.md b/files/ja/learn/server-side/first_steps/client-server_overview/index.md
index 5291c781e3fb72..5e8e9e18057d7e 100644
--- a/files/ja/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/ja/learn/server-side/first_steps/client-server_overview/index.md
@@ -60,7 +60,8 @@ HTML ページが返されると、ウェブブラウザーによってレンダ
 
 リンクをクリックするか（検索エンジンのホームページのように）サイトを検索することで簡単な `GET` リクエストをすることができます。たとえば、MDN で「クライアント - サーバーの概要」という用語を検索したときに送信される HTTP リクエストは、次のようになります（メッセージの一部はあなたのブラウザーや設定に依存するので、同一にはなりません）。
 
-> **メモ:** HTTP メッセージのフォーマットは「ウェブ標準」([RFC7230](https://www.rfc-editor.org/rfc/rfc7230.txt)) で定義されています。このレベルの詳細を知る必要はありませんが、少なくとも今、これら全てがどこから来たのかを知っています！
+> [!NOTE]
+> HTTP メッセージのフォーマットは「ウェブ標準」([RFC7230](https://www.rfc-editor.org/rfc/rfc7230.txt)) で定義されています。このレベルの詳細を知る必要はありませんが、少なくとも今、これら全てがどこから来たのかを知っています！
 
 #### リクエスト
 
@@ -188,13 +189,15 @@ X-Cache-Info: not cacheable; request wasn't a GET or HEAD
 Content-Length: 0
 ```
 
-> **メモ:** これらの例に示されている HTTP レスポンスとリクエストは [Fiddler](https://www.telerik.com/download/fiddler) アプリケーションを使ってキャプチャされました。しかし、ウェブスニファー（[WebSniffer](https://websniffer.com/) など）や、パケットアナライザー（[Wireshark](https://www.wireshark.org/)）などを使って同様の情報を得ることができます。これは自分で試すことができます。リンクされているツールを使用してから、サイト内を移動してプロファイル情報を編集し、さまざまなリクエストとレスポンスを確認します。最近のほとんどのブラウザーには、ネットワークリクエストを監視するツール（たとえば、Firefox の[ネットワークモニタツール](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)）もあります。
+> [!NOTE]
+> これらの例に示されている HTTP レスポンスとリクエストは [Fiddler](https://www.telerik.com/download/fiddler) アプリケーションを使ってキャプチャされました。しかし、ウェブスニファー（[WebSniffer](https://websniffer.com/) など）や、パケットアナライザー（[Wireshark](https://www.wireshark.org/)）などを使って同様の情報を得ることができます。これは自分で試すことができます。リンクされているツールを使用してから、サイト内を移動してプロファイル情報を編集し、さまざまなリクエストとレスポンスを確認します。最近のほとんどのブラウザーには、ネットワークリクエストを監視するツール（たとえば、Firefox の[ネットワークモニタツール](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)）もあります。
 
 ## 静的サイト
 
 *静的サイト*は、特定のリソースがリクエストされたときはいつでもサーバーから同じハードコードされたコンテンツを返すものです。たとえば、製品に関するページが `/static/myproduct1.html` にある場合、この同じページがすべてのユーザーに返されます。サイトに他の似たような製品を追加するならば、別のページ (例えば `myproduct2.html`) を追加する必要があるでしょう。これは本当に非効率的になり始めます — 何千もの製品ページにたどり着くとどうなるでしょう？ 各ページ (基本的なページテンプレート、構造など) に渡って多くのコードを繰り返すことになります。ページ構造について何か変更したい場合 (たとえば、新しい「関連商品」セクションを追加するなど) 各ページを個別に変更する必要があります。
 
-> **メモ:** ページ数が少なく、すべてのユーザーに同じコンテンツを送信したい場合は、静的サイトが優れています。ただし、ページ数が増えると、管理に多大なコストがかかる可能性があります。
+> [!NOTE]
+> ページ数が少なく、すべてのユーザーに同じコンテンツを送信したい場合は、静的サイトが優れています。ただし、ページ数が増えると、管理に多大なコストがかかる可能性があります。
 
 前回の記事で見た静的サイトのアーキテクチャ図をもう一度見て、これがどのように機能するのかを要約しましょう。
 
diff --git a/files/ja/learn/server-side/first_steps/index.md b/files/ja/learn/server-side/first_steps/index.md
index 73db87d3cc4f08..61b05b042f61fe 100644
--- a/files/ja/learn/server-side/first_steps/index.md
+++ b/files/ja/learn/server-side/first_steps/index.md
@@ -32,7 +32,8 @@ l10n:
 - [ウェブサイトのセキュリティ](/ja/docs/Learn/Server-side/First_steps/Website_security)
   - : ウェブサイトのセキュリティでは、ウェブサイトのデザインと使用方法のあらゆる面で警戒が必要です。この入門記事ではウェブサイトのセキュリティの第一人者にはなりませんが、脅威がどこから発生するのか、そして最も一般的な攻撃に対してウェブアプリケーションを強化するために何ができるのかを理解するのに役立ちます。
 
-> **メモ:** このトピックでは、サーバーサイドフレームワークと、それらを使用してウェブサイトを作成する方法について説明します。クライアントサイドの JavaScript フレームワークの情報を探している場合は、[クライアントサイドの JavaScript フレームワークを理解する](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)を参照してください。
+> [!NOTE]
+> このトピックでは、サーバーサイドフレームワークと、それらを使用してウェブサイトを作成する方法について説明します。クライアントサイドの JavaScript フレームワークの情報を探している場合は、[クライアントサイドの JavaScript フレームワークを理解する](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)を参照してください。
 
 ## 課題
 
diff --git a/files/ja/learn/server-side/first_steps/introduction/index.md b/files/ja/learn/server-side/first_steps/introduction/index.md
index 56c7a6adb71d8b..da97af56bc468b 100644
--- a/files/ja/learn/server-side/first_steps/introduction/index.md
+++ b/files/ja/learn/server-side/first_steps/introduction/index.md
@@ -88,7 +88,8 @@ MDN のサーバーサイドプログラミング入門コースにようこそ
 
 フレームワークは、クライアントサイドコードでもサーバーサイドコードで使われます。しかし、くり返しになりますが、両者には明確な差があり、フレームワークも同じものではありえません。クライアントサイドウェブフレームワークが配置と表現力を改善するだけなのに対し、サーバーサイドウェブフレームワークはウェブサーバーに共通する機能を提供しています。それを使わないとすると、多くの機能を自分で実装する必要があります。例えば、対話セッション、ユーザー認証、データベースへのアクセス、ライブラリーの雛型化はフレームワークで実現できます。
 
-> **メモ:** クライアントサイドフレームワークは、クライアントサイドコードの開発を加速するのによく使われます。いっぽう、すべてのコードを手作りすることも可能です。実際のところ、単純なユーザーインターフェイスしか必要としない小規模なウェブサイトであれば、手作りの方が短期間で効率的な開発ができます。
+> [!NOTE]
+> クライアントサイドフレームワークは、クライアントサイドコードの開発を加速するのによく使われます。いっぽう、すべてのコードを手作りすることも可能です。実際のところ、単純なユーザーインターフェイスしか必要としない小規模なウェブサイトであれば、手作りの方が短期間で効率的な開発ができます。
 >
 > これに反して、ウェブアプリのサーバーサイドコンポーネントの開発は、フレームワークなしでは考えられません。HTTP サーバーのように重要な機能を最初から、例えば Python で記述するのは、非常に困難なことです。ところが Django のようの Python ウェブフレームワークなら、すぐに使えるし、多くの有用なツールも提供されます。
 
@@ -112,7 +113,8 @@ MDN のサーバーサイドプログラミング入門コースにようこそ
 
 情報がデータベースに保管されているので、他のビジネスシステムが読み取ったり、変更することも可能です。例えば、商品が店舗で売れようと、オンラインで売れようと、一括して在庫を管理できるようになります。
 
-> **メモ:** 以下の例を見れば、サーバーサイドコードが、情報の効率的な保管と提供に役立つことが実感できるでしょう。
+> [!NOTE]
+> 以下の例を見れば、サーバーサイドコードが、情報の効率的な保管と提供に役立つことが実感できるでしょう。
 >
 > 1. [アマゾン](https://www.amazon.co.jp)などの通販サイトを見てください。
 > 2. キーワードを与えて商品を検索します。検索結果はさまざまですが、結果のページの構造は一定です。
@@ -142,7 +144,8 @@ MDN のサーバーサイドプログラミング入門コースにようこそ
 
 実際の例としては、 SNS サイトが挙げられます。このサイトでは、ユーザーが投稿したコンテンツを誰に見せるか、誰のコンテンツが自分のフィードに現れるかを決めることができます。
 
-> **メモ:** コンテンツへのアクセスを制限している実例を見てみましょう。銀行のオンラインサイトにアクセスすると、何が見えますか？あなたの口座にログインすると、どんな情報が出てきますか？どれが変更できますか？銀行側にしか変更できない情報は何でしょう？
+> [!NOTE]
+> コンテンツへのアクセスを制限している実例を見てみましょう。銀行のオンラインサイトにアクセスすると、何が見えますか？あなたの口座にログインすると、どんな情報が出てきますか？どれが変更できますか？銀行側にしか変更できない情報は何でしょう？
 
 ### セッションや途中状態の情報を保管する
 
@@ -150,7 +153,8 @@ MDN のサーバーサイドプログラミング入門コースにようこそ
 
 この機能により、ユーザーのログイン履歴を知ることで、電子メールや過去に購入した商品へのリンクを表示できます。オンラインゲームであれば、途中結果を保存して、そこから再開できるできるようになります。
 
-> **メモ:** 購読型の新聞サイト（例えば[The Age](http://www.theage.com.au/)など）を開いて、無料で記事を読んでみてください。数時間か数日読み続けると、購読について説明するページに誘導され、それ以上記事が読めなくなります。これはクッキーで保管されたセッション情報を活用する一例です。（訳注：日本の新聞サイトでは、最初に無料登録を求められますが、そのあとは同じです。）
+> [!NOTE]
+> 購読型の新聞サイト（例えば[The Age](http://www.theage.com.au/)など）を開いて、無料で記事を読んでみてください。数時間か数日読み続けると、購読について説明するページに誘導され、それ以上記事が読めなくなります。これはクッキーで保管されたセッション情報を活用する一例です。（訳注：日本の新聞サイトでは、最初に無料登録を求められますが、そのあとは同じです。）
 
 ### 通知やメッセージを送る
 
@@ -162,7 +166,8 @@ MDN のサーバーサイドプログラミング入門コースにようこそ
 - アマゾンは、過去の買い物や閲覧の履歴から、あなたが興味を持ちそうな商品を、お勧めとして定期的にメールしてきます。
 - ウェブサーバーは、記憶容量の不足や、あやしいアクセスがあったとき、サイト管理者に注意を促すメールを送ってくることがあります。
 
-> **メモ:** いちばんよくある通知の例は、登録確認のお知らせでしょう。興味のある大規模サイト（Google、Amazon、Instagram など）ならどこでもいいので、電子メールアドレスを使ってアカウント作ってみてください。すぐに電子メールが届いて、登録完了を知らせてくるか、登録を確認してアカウントを有効にするよう求められます。
+> [!NOTE]
+> いちばんよくある通知の例は、登録確認のお知らせでしょう。興味のある大規模サイト（Google、Amazon、Instagram など）ならどこでもいいので、電子メールアドレスを使ってアカウント作ってみてください。すぐに電子メールが届いて、登録完了を知らせてくるか、登録を確認してアカウントを有効にするよう求められます。
 
 ### データを分析する
 
@@ -170,7 +175,8 @@ MDN のサーバーサイドプログラミング入門コースにようこそ
 
 例えばアマゾンや Google は、どちらも以前の検索（や購入）をもとに、商品の宣伝を表示します。
 
-> **メモ:** Facebook ユーザーの方は、自分のフィードにある投稿を見てください。 記事が、時間順になっていないときがあります。新しい投稿より、「いいね！」が多いもののほうがリストの前の方に現れたりします。
+> [!NOTE]
+> Facebook ユーザーの方は、自分のフィードにある投稿を見てください。 記事が、時間順になっていないときがあります。新しい投稿より、「いいね！」が多いもののほうがリストの前の方に現れたりします。
 >
 > サイトに表示される広告を見てください。その中には、他のサイトで閲覧したものがあります。Facebook がどんなアルゴリズムでコンテンツや広告を処理しているのか不明な点もありますが、あなたの「いいね！」や閲覧履歴をもとにしていることだけは確かです。
 
diff --git a/files/ja/learn/server-side/first_steps/web_frameworks/index.md b/files/ja/learn/server-side/first_steps/web_frameworks/index.md
index a3e254b5b9634c..4a7a02f4fc4813 100644
--- a/files/ja/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/ja/learn/server-side/first_steps/web_frameworks/index.md
@@ -143,7 +143,8 @@ def youngest(request):
 
 たとえば、Django テンプレートシステムでは、"double-handlebars" 構文 (例えば `\{{ variable_name }}`) を使って変数を指定することができます。これは、ページがレンダリングされるときにビュー関数から渡された値に置き換えられます。テンプレートシステムは式のサポート (構文: `{% expression %}`) も提供します。これによりテンプレートは、渡されたリスト値を繰り返すような単純な操作を実行できます。
 
-> **メモ:** Jinja2 (Python)、handlebars (JavaScript)、moustache (JavaScript) など、他の多くのテンプレートシステムでも同様の構文が使用されています。
+> [!NOTE]
+> Jinja2 (Python)、handlebars (JavaScript)、moustache (JavaScript) など、他の多くのテンプレートシステムでも同様の構文が使用されています。
 
 以下のコードスニペットはこれがどのように機能するかを示しています。前のセクションの「最年少チーム」の例を続けると、HTML テンプレートにはビューによって `youngest_teams` というリスト変数が渡されます。HTML スケルトンの内部には、最初に `youngest_teams` 変数が存在するかどうかを確認し、次に for ループ内でそれを繰り返す式があります。各イテレーションで、テンプレートはチームの `team_name` 値をリストアイテムに表示します。
 
@@ -210,7 +211,8 @@ def youngest(request):
 
 以下のサーバーサイドフレームワークは、執筆時点で入手可能な最も人気のあるものの一部を表しています。オープンソースで、活発に開発されており、熱心なコミュニティがドキュメントを作成し、ディスカッション掲示板でユーザーを支援しています。また、多数の有名ウェブサイトで使用されています。他にも基本的なインターネット検索を使用して見つけられる多くの素晴らしいサーバーサイドフレームワークがあります。
 
-> **メモ:** 説明は (一部) フレームワークウェブサイトから引用しています。
+> [!NOTE]
+> 説明は (一部) フレームワークウェブサイトから引用しています。
 
 ### Django (Python)
 
diff --git a/files/ja/learn/server-side/first_steps/website_security/index.md b/files/ja/learn/server-side/first_steps/website_security/index.md
index 6b49b493e8e57c..52f79d02ba977a 100644
--- a/files/ja/learn/server-side/first_steps/website_security/index.md
+++ b/files/ja/learn/server-side/first_steps/website_security/index.md
@@ -34,7 +34,8 @@ l10n:
 
 この記事の残りの部分では、いくつかの一般的な脅威と、サイトを保護するために実行できる簡単な手順の詳細について説明します。
 
-> **メモ:** これは導入トピックであり、ウェブサイトのセキュリティについて考え始めるのに役立つように設計されていますが、網羅的なものではありません。
+> [!NOTE]
+> これは導入トピックであり、ウェブサイトのセキュリティについて考え始めるのに役立つように設計されていますが、網羅的なものではありません。
 
 ## ウェブサイトのセキュリティ上の脅威
 
@@ -44,7 +45,8 @@ l10n:
 
 XSS は、攻撃者がウェブサイト*を通じて*他のユーザーのブラウザーにクライアントサイドのスクリプトを挿入することを可能にする一連の攻撃を表すために使用される用語です。注入されたコードはサイトからブラウザーに送信されるため、コードは*信頼されており*、ユーザーのサイト認証 Cookie を攻撃者に送信するなどのことが可能です。攻撃者が Cookie を持っていると、あたかもユーザーであるかのようにサイトにログインし、クレジットカードの詳細へのアクセス、連絡先の詳細の表示、パスワードの変更など、ユーザーができることなら何でもできます。
 
-> **メモ:** XSS 脆弱性は、他のどの種類のセキュリティの脅威よりも歴史的に一般的です。
+> [!NOTE]
+> XSS 脆弱性は、他のどの種類のセキュリティの脅威よりも歴史的に一般的です。
 
 XSS 脆弱性は、サイトが挿入されたスクリプトをブラウザーに返す方法に基づいて、*反射型*と*蓄積型*に分けられます。
 
@@ -79,7 +81,8 @@ SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WH
 
 この種の攻撃を回避するには、SQL クエリーに渡されるユーザーデータがクエリーの性質を変更できないようにする必要があります。これを行う 1 つの方法は、SQL で特別な意味を持つユーザー入力内のすべての文字を[エスケープ](https://ja.wikipedia.org/wiki/エスケープ文字)することです。
 
-> **メモ:** SQL ステートメントは、**'** 文字を文字列リテラルの開始と終了として扱います。この文字の前に円記号を入れる (**\\'**) ことで、シンボルをエスケープし、代わりにそれを文字 (文字列の一部) として扱うように SQL に指示します。
+> [!NOTE]
+> SQL ステートメントは、**'** 文字を文字列リテラルの開始と終了として扱います。この文字の前に円記号を入れる (**\\'**) ことで、シンボルをエスケープし、代わりにそれを文字 (文字列の一部) として扱うように SQL に指示します。
 
 次の文では、**'** 文字をエスケープします。SQL は名前を太字の文字列全体として解釈します (これは非常に奇妙な名前ですが、有害ではありません)。
 
@@ -89,7 +92,8 @@ SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo W
 
 ウェブフレームワークはしばしばあなたのためにエスケープする文字の面倒を見るでしょう。たとえば、Django はクエリーセット (モデルクエリー) に渡されたユーザーデータが確実にエスケープされるようにします。
 
-> **メモ:** このセクションは[ここウィキペディア](ja.wikipedia.org/wiki/SQLインジェクション)の情報に大きく依存しています。
+> [!NOTE]
+> このセクションは[ここウィキペディア](ja.wikipedia.org/wiki/SQLインジェクション)の情報に大きく依存しています。
 
 ### クロスサイトリクエストフォージェリ (CSRF)
 
@@ -101,7 +105,8 @@ CSRF 攻撃は、悪意のあるユーザーが他のユーザーの資格情報
 
 その結果、取引サイトにログインしている間に \[送信] ボタンをクリックしたすべてのユーザーが取引を行うことになります。 Josh は金持ちになります。
 
-> **メモ:** ここでのトリックは、Josh がユーザーの cookie (またはアクセス資格情報) にアクセスする必要がないことです。ユーザーのブラウザーはこの情報を保存し、関連するサーバーへのすべてのリクエストに自動的に含めます。
+> [!NOTE]
+> ここでのトリックは、Josh がユーザーの cookie (またはアクセス資格情報) にアクセスする必要がないことです。ユーザーのブラウザーはこの情報を保存し、関連するサーバーへのすべてのリクエストに自動的に含めます。
 
 この種の攻撃を防ぐ 1 つの方法は、サーバーが `POST` リクエストにユーザー固有のサイト生成のシークレット情報を含めることを要求することです。転送に使用されるウェブフォームを送信するときに、シークレットがサーバーによって提供されます。この方法では、サーバーからユーザーに提供されているシークレットを知っている必要があるため、 Josh は独自のフォームを作成できません。たとえ彼がシークレットを見つけて特定のユーザーのためにフォームを作成したとしても、彼はもはやその同じフォームを使用してすべてのユーザーを攻撃することはできないでしょう。
 
@@ -123,7 +128,8 @@ CSRF 攻撃は、悪意のあるユーザーが他のユーザーの資格情報
 
 ウェブアプリケーションがブラウザーからのデータを信頼している場合、前のセクションのセキュリティ上の悪用のほとんどすべてが成功します。ウェブサイトのセキュリティを向上させるために他に何をしても、ブラウザーから表示される前、SQL クエリーで使用される前、または OS やファイルシステムの呼び出しに渡される前に、すべてのユーザー発信データをサニタイズする必要があります。
 
-> **警告:** ウェブサイトのセキュリティについて学ぶことができる最も重要な教訓は、**ブラウザーからのデータを決して信用しない**ことです。これには `GET` リクエスト、`POST` リクエスト、HTTP ヘッダーと Cookie、およびユーザーがアップロードしたファイルの URL 引数のデータが含まれますが、これらに限りません。すべての受信データを常にチェックしてサニタイズしてください。常に最悪の事態を想定してください。
+> [!WARNING]
+> ウェブサイトのセキュリティについて学ぶことができる最も重要な教訓は、**ブラウザーからのデータを決して信用しない**ことです。これには `GET` リクエスト、`POST` リクエスト、HTTP ヘッダーと Cookie、およびユーザーがアップロードしたファイルの URL 引数のデータが含まれますが、これらに限りません。すべての受信データを常にチェックしてサニタイズしてください。常に最悪の事態を想定してください。
 
 あなたが取れる他の具体的な対策はいくつかあります：
 
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index 97aae83387346a..f88318aec0b79b 100644
--- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -37,7 +37,8 @@ JavaScript フレームワークは、最新のフロントエンドウェブ開
 
 ## React のチュートリアル
 
-> **メモ:** この React のチュートリアルは 2023 年 1 月に、React/ReactDOM 18.2.0 と create-react-app 5.0.1 で動作確認を行いました。
+> [!NOTE]
+> この React のチュートリアルは 2023 年 1 月に、React/ReactDOM 18.2.0 と create-react-app 5.0.1 で動作確認を行いました。
 >
 > もし、コードとサンプルのバージョンとを確認する必要があれば、 [todo-react リポジトリー](https://github.com/mdn/todo-react)で最新版を見ることができます。実行中のライブバージョンについては、 <https://mdn.github.io/todo-react/> から確認ができます。
 
@@ -58,7 +59,8 @@ JavaScript フレームワークは、最新のフロントエンドウェブ開
 
 ## Ember のチュートリアル
 
-> **メモ:** この Ember チュートリアルは 2020 年 5 月に Ember/Ember CLI version 3.18.0 で動作確認を行いました。
+> [!NOTE]
+> この Ember チュートリアルは 2020 年 5 月に Ember/Ember CLI version 3.18.0 で動作確認を行いました。
 >
 > もし、コードとサンプルのバージョンとを確認する必要があれば、[ember-todomvc-tutorial リポジトリー](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc) で最新版を見ることができます。実行中のライブバージョンについては <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> から確認ができます（ただしチュートリアルで取り扱っていない機能も含まれています）。
 
@@ -77,7 +79,8 @@ JavaScript フレームワークは、最新のフロントエンドウェブ開
 
 ## Vue のチュートリアル
 
-> **メモ:** この Vue チュートリアルは 2023 年 1 月に、Vue 3.2.45 で動作確認を行いました。
+> [!NOTE]
+> この Vue チュートリアルは 2023 年 1 月に、Vue 3.2.45 で動作確認を行いました。
 >
 > もし、コードとサンプルのバージョンとを確認する必要があれば、 [todo-vue リポジトリー](https://github.com/mdn/todo-vue)で最新版を見ることができます。実行中のライブバージョンについては <https://mdn.github.io/todo-vue/> から確認ができます。
 
@@ -102,7 +105,8 @@ JavaScript フレームワークは、最新のフロントエンドウェブ開
 
 ## Svelte のチュートリアル
 
-> **メモ:** Svelte のチュートリアルは 2020 年 8 月に、 Svelte 3.24.1 でテストしました。
+> [!NOTE]
+> Svelte のチュートリアルは 2020 年 8 月に、 Svelte 3.24.1 でテストしました。
 >
 > もし、コードとサンプルのバージョンとを確認する必要があれば、 [mdn-svelte-tutorial](https://github.com/opensas/mdn-svelte-tutorial) リポジトリーで最新版を見ることができます。実行中のライブバージョンについては <https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2> から確認ができます。
 
@@ -125,7 +129,8 @@ JavaScript フレームワークは、最新のフロントエンドウェブ開
 
 ## Angular のチュートリアル
 
-> **メモ:** この Angular のチュートリアルは 2022 年 5 月に、 Angular CLI (NG) 13.3.4 で動作確認を行いました。
+> [!NOTE]
+> この Angular のチュートリアルは 2022 年 5 月に、 Angular CLI (NG) 13.3.4 で動作確認を行いました。
 
 - [1. Angular を始める](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
   - : この記事では、Angular が提供するものを確認し、前提条件をインストールしてサンプルアプリを設定し、Angular の基本的なアーキテクチャを確認します。
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
index 67708da9f01414..333816d6130065 100644
--- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
@@ -192,7 +192,8 @@ Vue のおかげで、 UI を構築するために独自の関数を作成する
 
 このモジュールに含まれるフレームワークはそれぞれ大規模で活発なコミュニティを持っているので、それぞれのフレームワークのエコシステムは開発者の経験を向上させるツールを提供します。これらのツールによって、テスト(アプリケーションがあるべきように動作することを保証する) や lint (コードがエラーフリーでスタイルが一貫していることを保証する)のようなものを簡単に追加できます。
 
-> **メモ:** ウェブツールのコンセプトについてもっと詳しく知りたい方は、[クライアントサイドツールの概要](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)をご覧ください。
+> [!NOTE]
+> ウェブツールのコンセプトについてもっと詳しく知りたい方は、[クライアントサイドツールの概要](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)をご覧ください。
 
 ### コンパートメント化
 
@@ -263,7 +264,8 @@ JavaScript とブラウザーのネイティブ機能を使用してルーター
 | Vue       | モダン (IE9+ in Vue 2)              | HTML-based    | HTML-based, JSX, Pug   | [公式ドキュメント](https://cli.vuejs.org/guide/browser-compatibility.html)         |
 | Ember     | モダン (IE9+ in Ember version 2.18) | Handlebars    | Handlebars, TypeScript | [公式ドキュメント](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) |
 
-> **メモ:** 「HTML-based」と説明した DSL には正式な名前がありません。これらは実際には真の DSL ではありませんが、非標準の HTML であるため、強調する価値があると考えられます。
+> [!NOTE]
+> 「HTML-based」と説明した DSL には正式な名前がありません。これらは実際には真の DSL ではありませんが、非標準の HTML であるため、強調する価値があると考えられます。
 
 ### フレームワークには強力なコミュニティがありますか？
 
@@ -297,7 +299,8 @@ Vue チームは [Vue を他の一般的なフレームワークと徹底的に
 
 このモジュールで説明されているフレームワークはすべて、クライアントサイドのレンダリングだけでなくサーバーサイドのレンダリングもサポートしています。 React については [Next.js](https://nextjs.org/) 、Vue については [Nuxt](https://nuxtjs.com/)（はい、わかりにくいです、いいえ、これらのプロジェクトは関係ありません!）、 Ember の場合は [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot)、 Angular の場合は [Angular Universal](https://angular.io/guide/universal) をチェックしてください。
 
-> **メモ:** SSR ソリューションの中にはコミュニティによって作成および保守されているものもありますが、フレームワークの保守者によって提供される「公式」ソリューションもあります。
+> [!NOTE]
+> SSR ソリューションの中にはコミュニティによって作成および保守されているものもありますが、フレームワークの保守者によって提供される「公式」ソリューションもあります。
 
 ### 静的サイトジェネレーター
 
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
index b452d176081cf3..dd2bc78c375bbc 100644
--- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
@@ -85,7 +85,8 @@ export default function Todo() {
 }
 ```
 
-> **メモ:** コンポーネントは常に何かを返さなければなりません。もし今後あなたが何も返さないコンポーネントをレンダリングしようとしたら、React はブラウザーにエラーを表示するでしょう。
+> [!NOTE]
+> コンポーネントは常に何かを返さなければなりません。もし今後あなたが何も返さないコンポーネントをレンダリングしようとしたら、React はブラウザーにエラーを表示するでしょう。
 
 これで `Todo` コンポーネントは完成しました。`App.js` で、ファイルの先頭付近に次の行を追加して `Todo` をインポートします。
 
@@ -234,7 +235,8 @@ ReactDOM.render(<App tasks={DATA} />, document.getElementById("root"));
 
 この配列は、 App コンポーネントで `props.tasks` として利用できるようになりました。よかったら `console.log()` で確認してください。
 
-> **メモ:** すべて大文字の（`ALL_CAPS` のような）定数名に JavaScript で特別な意味があるわけではありません。他の開発者に「このデータはここで定義された後は変更されません」と伝えるための慣習です。
+> [!NOTE]
+> すべて大文字の（`ALL_CAPS` のような）定数名に JavaScript で特別な意味があるわけではありません。他の開発者に「このデータはここで定義された後は変更されません」と伝えるための慣習です。
 
 ## 反復処理によるレンダリング
 
@@ -370,7 +372,8 @@ function FilterButton(props) {
 export default FilterButton;
 ```
 
-> **メモ:** ここでは、最初に `<Todo />` コンポーネントで行ったのと同じ間違いをしていることに気づくかもしれません。つまり、それぞれのボタンは同じものになるということです。これでいいのです。このコンポーネントの修正は、後ほどで行います。（[フィルターボタンへ戻る](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)）
+> [!NOTE]
+> ここでは、最初に `<Todo />` コンポーネントで行ったのと同じ間違いをしていることに気づくかもしれません。つまり、それぞれのボタンは同じものになるということです。これでいいのです。このコンポーネントの修正は、後ほどで行います。（[フィルターボタンへ戻る](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)）
 
 ## すべてのコンポーネントのインポート
 
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index 41c67b3858915e..294903734bc985 100644
--- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -76,7 +76,8 @@ const header = (
 );
 ```
 
-> **メモ:** このスニペットの括弧は JSX に固有のものではなく、あなたのアプリケーションに影響を与えません。それらは、あなた（またあなたのコンピューター）にとって、内部の複数行のコードが同じ式の一部であるという意味です。次のように header を定義することもできます。
+> [!NOTE]
+> このスニペットの括弧は JSX に固有のものではなく、あなたのアプリケーションに影響を与えません。それらは、あなた（またあなたのコンピューター）にとって、内部の複数行のコードが同じ式の一部であるという意味です。次のように header を定義することもできます。
 >
 > ```jsx-nolint
 > const header = <header>
@@ -142,7 +143,8 @@ npm create vite@latest moz-todo-react -- --template react
 
 これは `moz-todo-react` ディレクトリーを作成し、Vite の `react` テンプレートを使用します。
 
-> **メモ:** npm コマンドに `create` などの引数を渡すには `--` が必要で、 `--template react` 引数は Vite に React テンプレートを使用するように指示します。
+> [!NOTE]
+> npm コマンドに `create` などの引数を渡すには `--` が必要で、 `--template react` 引数は Vite に React テンプレートを使用するように指示します。
 
 このコマンドが成功すると、端末にいくつかのメッセージが表示されます。新しいディレクトリーに `cd` し、アプリの依存関係をインストールし、アプリを実行するように促すテキストが表示されているはずです。2 つのコマンドから始めましょう。端末で以下を実行してください。
 
@@ -204,7 +206,8 @@ moz-todo-react
 
 この場所を所有することで、`npm run dev` を実行するたびにブラウザーに `http://localhost:3000` でアプリが開くようになります。
 
-> **メモ:** ここでは、定義済みの npm スクリプトではなく、直接 `vite` に引数を渡しているので、余分な `--` は必要ありません。
+> [!NOTE]
+> ここでは、定義済みの npm スクリプトではなく、直接 `vite` に引数を渡しているので、余分な `--` は必要ありません。
 
 ## 最初の React コンポーネント — `<App />` の探検
 
@@ -457,7 +460,8 @@ function App(props) {
 
 ファイルを保存し、ブラウザーで調べてください。何もコンテンツがない空白の背景が見えるでしょう。これは、もう定義されていない `subject` 変数を読み込もうとしているためです。`<h1>Hello {subject}!</h1>` の行をコメントアウトすることで修正されます。
 
-> **メモ:** コードエディターが JSX の構文解析を理解している場合（現行のエディターはほとんど理解しています）、内蔵のコメントショートカット `Ctrl + /`（Windows の場合）または `Cmd + /`（macOS の場合）を使用して、すばやくコメントを作成することができます。
+> [!NOTE]
+> コードエディターが JSX の構文解析を理解している場合（現行のエディターはほとんど理解しています）、内蔵のコメントショートカット `Ctrl + /`（Windows の場合）または `Cmd + /`（macOS の場合）を使用して、すばやくコメントを作成することができます。
 
 その行をコメントアウトしてファイルを保存してください。今度は、"Click me!" ボタンが表示されるはずです。ブラウザーの開発者コンソールを開くための、次のようなメッセージが表示されます。
 
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index efd08ed629066d..3ab5c991189242 100644
--- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -9,7 +9,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_
 
 例えば、React でアイディアを検証するためにアプリを試作してみることになったとします(いわゆる、Proof of Concept - 概念実証)。ユーザーが作業したいタスクを追加、編集、削除することができ、また、タスクを削除せずに完了とすることができるアプリです。この記事では、基本的な `App` コンポーネントの構造とスタイルを整え、後から追加する個々のコンポーネントの定義とインタラクティブな機能の準備を行っていきます。
 
-> **メモ:** コードを我々のバージョンと照らし合わせる必要がある場合は、我々の [todo-react](https://github.com/mdn/todo-react) リポジトリーからサンプルの React アプリコードの完成版を確認することができます。実際に動作しているアプリのバージョンについては、<https://mdn.github.io/todo-react-build/> を参照してください。
+> [!NOTE]
+> コードを我々のバージョンと照らし合わせる必要がある場合は、我々の [todo-react](https://github.com/mdn/todo-react) リポジトリーからサンプルの React アプリコードの完成版を確認することができます。実際に動作しているアプリのバージョンについては、<https://mdn.github.io/todo-react-build/> を参照してください。
 
 | 前提条件： | [HTML](/ja/docs/Learn/HTML) 、[CSS](/ja/docs/Learn/CSS) 、[JavaScript](/ja/docs/Learn/JavaScript) の基本的な知識を持っていること。また [ターミナル/コマンドライン](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) に関する知識を持っていること。 |
 | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
index f0ce359b855b3c..a82be34cd060b4 100644
--- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
@@ -52,7 +52,8 @@ Svelte は HTML と CSS、そして JavaScript という昔ながらのウェブ
 
 現時点での主な欠点はまだ若いフレームワークであるということです。若いということは、そのエコシステムは成熟したフレームワークよりもツール、サポート、プラグイン、明確な使用パターンなどが限られており、求人も少ないです。しかし、今まで紹介した利点は、あなたが Svelte を探究することへの関心を持ってもらうのに十分なはずです。
 
-> **メモ:** 2020 年より、Svelteは最も要望の多かった機能の 1 つである [TypeScript を公式にサポート](https://svelte.jp/blog/svelte-and-typescript)するようになりました。このチュートリアルシリーズの後半で確認していきます。
+> [!NOTE]
+> 2020 年より、Svelteは最も要望の多かった機能の 1 つである [TypeScript を公式にサポート](https://svelte.jp/blog/svelte-and-typescript)するようになりました。このチュートリアルシリーズの後半で確認していきます。
 
 このチュートリアルシリーズに戻って、より詳細な作成方法について学ぶ前に [Svelte チュートリアル](https://svelte.jp/tutorial/basics)で基本的なコンセプトを簡単に確認することを推奨します。完了までの所要時間は約 30 分です。
 
@@ -107,7 +108,8 @@ npm install
 npm run dev
 ```
 
-> **メモ:** degit は魔法のようなものではありません。ただ最新バージョンにあたる git リポジトリーの内容をダウンロードして解凍しているだけです。これは `git clone` を使うよりもはるかに高速です。なぜならリポジトリーの履歴全てをダウンロードしたり、完全なローカルクローンを作ったりしないためです。
+> [!NOTE]
+> degit は魔法のようなものではありません。ただ最新バージョンにあたる git リポジトリーの内容をダウンロードして解凍しているだけです。これは `git clone` を使うよりもはるかに高速です。なぜならリポジトリーの履歴全てをダウンロードしたり、完全なローカルクローンを作ったりしないためです。
 
 `npm run dev` を実行すると Svelte がアプリケーションのコンパイルとビルドを行います。するとローカルサーバーとして `localhost:8080` が起動します。Svelte はファイルの更新を監視して、ソースファイルに変更があった場合、アプリを自動的に再コンパイルして更新を行います。なおブラウザーには次のように表示されます。
 
@@ -183,7 +185,8 @@ moz-todo-svelte
 <!-- ここにマークアップ (0 個以上の HTML 要素) を記述 -->
 ```
 
-> **メモ:** コンポーネントの形式についての詳細は、[Svelte のドキュメント](https://svelte.jp/docs#component-format) を参照してください。
+> [!NOTE]
+> コンポーネントの形式についての詳細は、[Svelte のドキュメント](https://svelte.jp/docs#component-format) を参照してください。
 
 以上を踏まえてスターターテンプレートに付属の `src/App.svelte` ファイルを見てみましょう。以下のようになっているはずです。
 
@@ -425,7 +428,8 @@ npm run dev
 
 Git と GitHub について詳しく知りたい場合は、有益なガイドへのリンクがまとめられている [Git と GitHub](/ja/docs/Learn/Tools_and_testing/GitHub) を参照してください。
 
-> **メモ:** Git リポジトリーをクローンせずにファイルだけをダウンロードしたい場合は、`npx degit opensas/mdn-svelte-tutorial` のように degit ツールを使うことができます。`npx degit opensas/mdn-svelte-tutorial/01-getting-started` で特定のフォルダーをダウンロードすることもできます。degit はローカルの git リポジトリーを作成せずに指定したフォルダーのファイルだけをダウンロードします。
+> [!NOTE]
+> Git リポジトリーをクローンせずにファイルだけをダウンロードしたい場合は、`npx degit opensas/mdn-svelte-tutorial` のように degit ツールを使うことができます。`npx degit opensas/mdn-svelte-tutorial/01-getting-started` で特定のフォルダーをダウンロードすることもできます。degit はローカルの git リポジトリーを作成せずに指定したフォルダーのファイルだけをダウンロードします。
 
 ### Svelte REPL の活用
 
@@ -454,11 +458,13 @@ REPL を使い始めるには、ブラウザーを開いて <https://svelte.dev/
 
 REPL 上のファイルを変更するたびに Svelte はアプリを再コンパイルして Result タブを更新します。アプリを共有したい時は URL を共有してください。例えば、このチュートリアルシリーズの完成版アプリを実行している REPL へのリンクは <https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2> です。
 
-> **メモ:** URL で Svelte のバージョンを指定できることに注目してください。これは Svelte の特定のバージョンに関連する問題を報告する際に役立ちます。
+> [!NOTE]
+> URL で Svelte のバージョンを指定できることに注目してください。これは Svelte の特定のバージョンに関連する問題を報告する際に役立ちます。
 
 各記事の最初と最後に REPL を提供しているため、すぐにでもコーディングを開始することができます。
 
-> **メモ:** 現在のところ、REPL はフォルダー名を正しく扱えません。もし REPL 上でチュートリアルを行っている場合は、ルートフォルダー内に全てのコンポーネントを作成してください。例えばコード中に `import Todos from './components/Todos.svelte'` などのパスを見つけたら、 `import Todos from './Todos.svelte'` などのフラットな URL に置き換えるだけです。
+> [!NOTE]
+> 現在のところ、REPL はフォルダー名を正しく扱えません。もし REPL 上でチュートリアルを行っている場合は、ルートフォルダー内に全てのコンポーネントを作成してください。例えばコード中に `import Todos from './components/Todos.svelte'` などのパスを見つけたら、 `import Todos from './Todos.svelte'` などのフラットな URL に置き換えるだけです。
 
 ## これまでのコード
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
index 41fce9486f0daa..5064badfc947b6 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -49,13 +49,15 @@ l10n:
 
 そのため、この記事では、障碍のある人々を取り巻くブラウザー間の問題やテストの問題に応じた内容を取り上げます。 モジュール内の他の場所で、[レスポンシブデザイン](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#responsive_design_problems)と[パフォーマンス](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#performance_issues)のような他の分野についてはすでに説明しました。
 
-> **メモ:** ウェブ開発における多くのことと同様に、アクセシビリティは 100% 成功したかどうかではありません。 特にサイトが複雑になるにつれて、100% のアクセシビリティを全てのコンテンツに対して達成することはほとんど不可能です。 その代わりに、防御的なコーディングを介して、できるだけ多くの人があなたのコンテンツのできるだけ多くにアクセスできるようにし、ベストプラクティスに従うようにする努力をします。
+> [!NOTE]
+> ウェブ開発における多くのことと同様に、アクセシビリティは 100% 成功したかどうかではありません。 特にサイトが複雑になるにつれて、100% のアクセシビリティを全てのコンテンツに対して達成することはほとんど不可能です。 その代わりに、防御的なコーディングを介して、できるだけ多くの人があなたのコンテンツのできるだけ多くにアクセスできるようにし、ベストプラクティスに従うようにする努力をします。
 
 ## よくあるアクセシビリティの問題
 
 このセクションでは、従うべきベストプラクティスと共に、特定の技術と結びつけて、ウェブのアクセシビリティに関して生じる主な問題のいくつかと、サイトが正しい方向に進んでいるかどうかを確認するための簡単なテストについて、詳細を説明します。
 
-> **メモ:** アクセシビリティは道徳的に正しいことであり、ビジネスには適していますし（多くの障碍のあるユーザー、モバイルデバイスのユーザーなどが重要な市場セグメントを提示しています）、ウェブ資産を障碍のある人々がアクセスできないようにすることは、世界の多くの地域で法律にも違反しています。 詳しくは[アクセシビリティのガイドラインと法律](/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_guidelines_and_the_law)を読んでください。
+> [!NOTE]
+> アクセシビリティは道徳的に正しいことであり、ビジネスには適していますし（多くの障碍のあるユーザー、モバイルデバイスのユーザーなどが重要な市場セグメントを提示しています）、ウェブ資産を障碍のある人々がアクセスできないようにすることは、世界の多くの地域で法律にも違反しています。 詳しくは[アクセシビリティのガイドラインと法律](/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_guidelines_and_the_law)を読んでください。
 
 ### HTML
 
@@ -122,7 +124,8 @@ l10n:
 
 ![対話するネイティブ要素の既定動作のサンプルを示す 3 つのボタンのスクリーンショット。 3 つ目のボタンは、フォーカスの状態を示す青い枠でハイライトされています。](button-focused-unfocused.png)
 
-> **メモ:** Firefox では、ページのタブ順を示すオーバーレイを有効にすることもできます。詳しくは、[アクセシビリティインスペクター > ウェブページのタブ順序を表示する](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order) を参照してください。
+> [!NOTE]
+> Firefox では、ページのタブ順を示すオーバーレイを有効にすることもできます。詳しくは、[アクセシビリティインスペクター > ウェブページのタブ順序を表示する](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order) を参照してください。
 
 次に <kbd>Enter</kbd> / <kbd>Return</kbd> を押してフォーカスのあるリンクをたどるか、ボタンを押すか（ボタンにメッセージを知らせるための JavaScript が含まれています）、テキスト入力にテキストを入力するためにタイプし始めることができます（他のフォーム要素には異なるコントロールがあります。 例えば、{{htmlelement("select")}} 要素では、<kbd>上下の矢印</kbd>キーを使用してそのオプションを表示したり切り替えたりできます）。
 
@@ -130,7 +133,8 @@ l10n:
 
 - Safari では、既定ではリンクをタブ操作することはできません。 これを有効にするには、Safari の \[環境設定] を開き、\[詳細] に移動し、\[Tab キーを押してウェブページの各項目をハイライトする] チェックボックスをオンにする必要があります。古いバージョンの macOS を使用している場合は、Apple の macOS ユーザーガイドの [Mac でキーボードをマウスのように使用する](https://support.apple.com/ja-jp/guide/mac-help/mchlp1399/mac)を参照してください。
 
-> **警告:** あなたが書く新しいページのどれでも、この種のテストを実行するべきです — 機能がキーボードによってアクセスできることを確認してください。
+> [!WARNING]
+> あなたが書く新しいページのどれでも、この種のテストを実行するべきです — 機能がキーボードによってアクセスできることを確認してください。
 
 この例では、正しい仕事に正しい意味論的要素を使用することの重要性を強調しています。 任意の要素を、CSS でリンクやボタンのように見せたり、JavaScript でリンクやボタンのように振る舞うようにスタイルすることは可能ですが、実際にはリンクやボタンにはならず、あなたはこれらの要素が無料で与えるアクセシビリティの多くを失うでしょう。 あなたがそれを避けることができるならばしないでください。
 
@@ -149,7 +153,8 @@ select:focus {
 }
 ```
 
-> **メモ:** CSS を使用して既定のフォーカススタイルを取り除く場合は、デザインに適した他のスタイルに置き換えてください。これは非常に有用なアクセシビリティツールであり、取り除くべきではありません。
+> [!NOTE]
+> CSS を使用して既定のフォーカススタイルを取り除く場合は、デザインに適した他のスタイルに置き換えてください。これは非常に有用なアクセシビリティツールであり、取り除くべきではありません。
 
 #### キーボードアクセシビリティを組み込む
 
@@ -170,13 +175,15 @@ select:focus {
 
    ここでは、`document` オブジェクトにリスナーを追加して、キーボードのボタンが押されたことを検出します。 イベントオブジェクトの [`code`](/ja/docs/Web/API/KeyboardEvent/code) プロパティを使ってどのボタンが押されたかをチェックし、 <kbd>Return</kbd>/<kbd>Enter</kbd> と一致するコードであれば、`document.activeElement.onclick()` を使用してボタンの `onclick` ハンドラーに格納されている関数を実行します。 [`activeElement`](/ja/docs/Web/API/Document/activeElement) は現在ページにフォーカスしている要素を与えます。
 
-> **メモ:** この手法は、イベントハンドラープロパティ（`onclick` など）を使ってオリジナルのイベントハンドラーを設定した場合にのみ機能します。 `addEventListener` は機能しません。 これは、機能を再構築するための非常に面倒な作業です。 それに他にも問題があるはずです。 そもそも正しい要素を正しい仕事に使うほうがよいでしょう。
+> [!NOTE]
+> この手法は、イベントハンドラープロパティ（`onclick` など）を使ってオリジナルのイベントハンドラーを設定した場合にのみ機能します。 `addEventListener` は機能しません。 これは、機能を再構築するための非常に面倒な作業です。 それに他にも問題があるはずです。 そもそも正しい要素を正しい仕事に使うほうがよいでしょう。
 
 #### 代替テキスト
 
 代替テキストは、アクセシビリティにとってとても重要です。ある人が視覚障碍または聴覚障碍を抱えているためにコンテンツを見たり聞いたりすることができなくなると、これが問題になります。 最も単純な代替テキストは、控え目な `alt` 属性で、関連するコンテンツを含む全ての画像に含めるべきです。 これはスクリーンリーダーが拾ってユーザーに読み上げるために、ページ上にその意味と内容をうまく伝える画像の説明を含むべきです。
 
-> **メモ:** 詳しくは、[代替テキスト](/ja/docs/Learn/Accessibility/HTML#代替テキスト)をお読みください。
+> [!NOTE]
+> 詳しくは、[代替テキスト](/ja/docs/Learn/Accessibility/HTML#代替テキスト)をお読みください。
 
 欠落している代替テキストは、アクセシビリティ[監査ツール](#監査ツール)を使用するなど、さまざまな方法でテストできます。
 
@@ -190,13 +197,15 @@ HTML には、他に存在しない要素間のコンテキストと関係を提
 
 次に、フォームの {{htmlelement("label")}} 要素は、フォームをアクセス可能にすることを可能にする中心的な機能の 1 つです。 フォームの悩みは、各フォーム入力にどのデータを入力するべきかを示すためにラベルが必要なことです。 各ラベルを {{htmlelement("label")}} 内に含めて相方のフォーム入力に明確にリンクする必要があり（各 `<label>` の `for` 属性値はフォーム要素の `id` 値と一致する必要があります）、ソース順が完全に論理的ではなくても（これは公平であるべきです）、それは意味があります。
 
-> **メモ:** リンクテキストとフォームラベルの詳細については、[わかりやすいテキストラベル](/ja/docs/Learn/Accessibility/HTML#意味の通るテキストラベル)を参照してください。
+> [!NOTE]
+> リンクテキストとフォームラベルの詳細については、[わかりやすいテキストラベル](/ja/docs/Learn/Accessibility/HTML#意味の通るテキストラベル)を参照してください。
 
 最後に、データ表について簡単に説明します。 基本的なデータ表は非常に簡単なマークアップで書くことができますが（bad-table.html の[ライブ](https://mdn.github.io/learning-area/accessibility/html/bad-table.html)と[ソース](https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html)を見る）、問題があります。スクリーンリーダーのユーザーがデータのグループとして行や列を関連付ける方法はありません。これを行うには、ヘッダー行がどれであるか、そしてそれらが行、列などを見出ししているかどうかを知る必要があります。 これはそのような表に対しては視覚的にしかできません。
 
 代わりに punk-bands-complete.html の例（[ライブ](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)、[ソース](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html)）を見ると、表のヘッダー（{{htmlelement("th")}} と `scope` 属性）、{{htmlelement("caption")}} 要素など、いくつかのアクセシビリティ補助機能が働いていることがわかります。
 
-> **メモ:** アクセス可能な表の詳細については、[アクセシブルなデータ表](/ja/docs/Learn/Accessibility/HTML#accessible_data_tables)を参照してください。
+> [!NOTE]
+> アクセス可能な表の詳細については、[アクセシブルなデータ表](/ja/docs/Learn/Accessibility/HTML#accessible_data_tables)を参照してください。
 
 ### CSS
 
@@ -214,7 +223,8 @@ CSS は HTML よりもはるかに少ない基本的なアクセシビリティ
 
 もう 1 つのヒントは、道標や情報を色だけに頼らないようにすることです。 これは、色が見えない人には良くないでしょう。 例えば、必須のフォームフィールドを赤でマークする代わりに、赤いアスタリスクでマークします。
 
-> **メモ:** コントラスト比が高いと、光沢のある画面を備えたスマートフォンやタブレットを使用している人は誰でも、日光のような明るい環境にいるときにページを読みやすくなります。
+> [!NOTE]
+> コントラスト比が高いと、光沢のある画面を備えたスマートフォンやタブレットを使用している人は誰でも、日光のような明るい環境にいるときにページを読みやすくなります。
 
 #### コンテンツを隠す
 
@@ -239,7 +249,8 @@ JavaScript はアクセシビリティに関して CSS と同じ種類の問題
 - クライアント側のフォーム検証を提供します。 これは、サーバーがデータをチェックするのを待たずに、フォームエントリーに関する問題をユーザーにすばやく知らせるものです。 利用できない場合でもフォームは機能しますが、検証が遅くなる可能性があります。
 - キーボードのみのユーザーがアクセスできる HTML の `<video>` のカスタムコントロールを提供します（前述したように、既定のブラウザーコントロールはほとんどのブラウザーでキーボードからアクセスできません）。
 
-> **メモ:** WebAIM の[Accessible JavaScript](https://webaim.org/techniques/javascript/)（英語）は、アクセス可能な JavaScript の考慮事項に関する有用な詳細をいくつか提供します。
+> [!NOTE]
+> WebAIM の[Accessible JavaScript](https://webaim.org/techniques/javascript/)（英語）は、アクセス可能な JavaScript の考慮事項に関する有用な詳細をいくつか提供します。
 
 より複雑な JavaScript による実装はアクセシビリティに問題をもたらす可能性があります — できる限りのことをする必要があります。 例えば、[WebGL](/ja/docs/Glossary/WebGL) を 100% を使用して書かれた複雑な 3D ゲームを視覚障碍者が利用できるようにすることは期待できませんが、マウス以外のユーザーが使用できるように[キーボードコントロール](/ja/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)を実装し、色覚異常のある人にも使えるように配色に十分なコントラストがあるようにすることができます。
 
@@ -291,7 +302,8 @@ Wabe を使って例を見てみましょう。
 2. ページの上部にあるテキスト入力ボックスに [bad-semantics.html](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) の例の URL を入力してください。その後、 Enter キーを押すか、入力ボックスの右端にある矢印をクリック/タップしてください。
 3. サイトは、アクセシビリティの問題についての説明を回答する必要があります。表示されたアイコンをクリックすると、 Wave の評価によって特定された各課題に関する詳細情報が表示されます。
 
-> **メモ:** このようなツールは、アクセシビリティの問題を全て自分で解決するのに十分ではありません。 全体像を把握するには、これらの組み合わせ、知識と経験、ユーザーテストなどが必要です。
+> [!NOTE]
+> このようなツールは、アクセシビリティの問題を全て自分で解決するのに十分ではありません。 全体像を把握するには、これらの組み合わせ、知識と経験、ユーザーテストなどが必要です。
 
 ### 自動化ツール
 
@@ -318,7 +330,8 @@ aXe は `npm` を使ってもインストール可能で、[Grunt](https://grunt
 
 いくつかの異なるスクリーンリーダーを使っていくつかのテストを行い、それらがどのように機能するのか、またどのようにテストするのかについての一般的な考えを説明しましょう。
 
-> **メモ:** WebAIM の[スクリーンリーダーの互換性のための設計](https://webaim.org/techniques/screenreader/)（英語）では、スクリーンリーダーの使用方法とスクリーンリーダーに最適な機能についての役立つ情報が提供されています。 いくつかの興味深いスクリーンリーダーの使用統計については、[第 9 回スクリーンリーダーのユーザー調査の結果](https://webaim.org/projects/screenreadersurvey9/#used)（英語）も参照してください。
+> [!NOTE]
+> WebAIM の[スクリーンリーダーの互換性のための設計](https://webaim.org/techniques/screenreader/)（英語）では、スクリーンリーダーの使用方法とスクリーンリーダーに最適な機能についての役立つ情報が提供されています。 いくつかの興味深いスクリーンリーダーの使用統計については、[第 9 回スクリーンリーダーのユーザー調査の結果](https://webaim.org/projects/screenreadersurvey9/#used)（英語）も参照してください。
 
 #### VoiceOver
 
@@ -326,7 +339,8 @@ VoiceOver（VO）は Mac / iPhone / iPad には無料で含まれているので
 
 オンにするには、<kbd>Cmd</kbd> + <kbd>Fn</kbd> + <kbd>F5</kbd> を押します。 今までに VO を使ったことがない場合は、ようこそ画面が表示され、そこで VO を起動するかどうかを選択できます。 また、使い方を学ぶためにかなり役に立つチュートリアルを実行することもできます。 再びオフにするには、もう一度 <kbd>Cmd</kbd> + <kbd>Fn</kbd> + <kbd>F5</kbd> を押します。
 
-> **メモ:** チュートリアルは少なくとも一度は実行するべきです — これは VO を学ぶ上で非常に便利な方法です。
+> [!NOTE]
+> チュートリアルは少なくとも一度は実行するべきです — これは VO を学ぶ上で非常に便利な方法です。
 
 VO がオンになっていると、ディスプレイはほぼ同じに見えますが、画面の左下に、現在選択されている VO に関する情報を含む黒いボックスが表示されます。 現在の選択範囲も黒枠で強調表示されます — この強調表示は **VO カーソル**と呼ばれます。
 
@@ -450,7 +464,8 @@ NVDA は Windows 専用で、インストールする必要があります。
 
 NVDA を使用するには、「NVDA 修飾キー」を多用します — これは、実際の NVDA のショートカットキーに加えて、それらを機能させるために押す必要があるキーです。 このような修飾キーを使用するのは、スクリーンリーダーに共通で、他のコマンドとコマンドが衝突しないようにするためです。 NVDA の場合、修飾キーは <kbd>Insert</kbd>（既定）、または <kbd>CapsLock</kbd>（\[OK] を押す前に NVDA へようこそダイアログボックスの最初のチェックボックスをオンにして選択できます）のいずれかになります。
 
-> **メモ:** NVDA は、VoiceOver よりも、それがどこにあるのか、また何をしているのかを強調する方法という点では微妙です。 見出しやリストなどをスクロールしているとき、あなたが選択している項目は一般的に微妙なアウトラインでハイライトされますが、これはいつも全てのことに当てはまるわけではありません。 完全に迷子になった場合は、<kbd>Ctrl</kbd> + <kbd>F5</kbd> を押して現在のページを更新し、もう一度上から始めることができます。
+> [!NOTE]
+> NVDA は、VoiceOver よりも、それがどこにあるのか、また何をしているのかを強調する方法という点では微妙です。 見出しやリストなどをスクロールしているとき、あなたが選択している項目は一般的に微妙なアウトラインでハイライトされますが、これはいつも全てのことに当てはまるわけではありません。 完全に迷子になった場合は、<kbd>Ctrl</kbd> + <kbd>F5</kbd> を押して現在のページを更新し、もう一度上から始めることができます。
 
 NVDA にはたくさんのキーボードコマンドがありますので、ここではそれら全てをリストしません。 ウェブページのテストに必要な基本的なものは、次の表のとおりです。 ショートカットキーでは、<kbd>NVDA</kbd> は「NVDA 修飾キー」を意味します。
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
index 2266e1726554d3..c280b6255e53b4 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
@@ -41,7 +41,8 @@ l10n:
 
 次の記事では、自分自身で Selenium ベースのテストシステムを設定する方法を見ていきます。この記事では、タスクランナーを設定し、上記のような商用システムの基本的な機能を使用する方法を見ていきます。
 
-> **メモ:** 上記の 2 つのカテゴリーは相互に排他的ではありません。 Sauce Labs や LambdaTest のようなサービスに API 経由でアクセスし、ブラウザー横断テストを実行し、結果を返すタスクランナーを設定することは可能です。下記でも見ていきます。
+> [!NOTE]
+> 上記の 2 つのカテゴリーは相互に排他的ではありません。 Sauce Labs や LambdaTest のようなサービスに API 経由でアクセスし、ブラウザー横断テストを実行し、結果を返すタスクランナーを設定することは可能です。下記でも見ていきます。
 
 ## タスクランナーを使用してテストツールを自動化
 
@@ -66,7 +67,8 @@ l10n:
    npm install npm@latest -g
    ```
 
-> **メモ:** 上記のコマンドが権限エラーで失敗する場合は、 [npm のパーミッションを修正](https://docs.npmjs.com/getting-started/fixing-npm-permissions/)することで解決します。
+> [!NOTE]
+> 上記のコマンドが権限エラーで失敗する場合は、 [npm のパーミッションを修正](https://docs.npmjs.com/getting-started/fixing-npm-permissions/)することで解決します。
 
 自分のプロジェクトで Node/npm ベースのパッケージを使用し始めるには、プロジェクトディレクトリーを npm プロジェクトとして設定する必要があります。これは簡単にできます。
 
@@ -344,7 +346,8 @@ Gulp でできることはまだあります。 [Gulp プラグインディレ
 
 その後、段階的に API を使用してプログラム的に機能にアクセスすることができます。このようなアプリは、自動テストを作成するために、自分自身でローカルの Selenium 環境などのタスクランナーと組み合わせることができることを意味しています。
 
-> **メモ:** 他にも利用できる商用ブラウザーテストシステムはありますが、この記事では LambdaTest、Sauce Labs、BrowserStack に焦点を当てます。これらが必ずしも利用できる最高のツールだとは言いませんが、初心者でも単純に取得し実行することができる良いツールです。
+> [!NOTE]
+> 他にも利用できる商用ブラウザーテストシステムはありますが、この記事では LambdaTest、Sauce Labs、BrowserStack に焦点を当てます。これらが必ずしも利用できる最高のツールだとは言いませんが、初心者でも単純に取得し実行することができる良いツールです。
 
 ### LambdaTest
 
@@ -353,7 +356,8 @@ Gulp でできることはまだあります。 [Gulp プラグインディレ
 1. 始めるには [LambdaTest](https://accounts.lambdatest.com/register) に無料登録しましょう。
 2. ログインしてください。メールアドレスを確認した後、自動的にログインされます。
 
-> **メモ:** 他のクラウドベースのブラウザー横断テストサービスプロバイダーとは異なり、LambdaTestは、あなたが彼らのプラットフォームに生涯アクセスするフリーミアムアカウントを提供しています。プレミアムプランとフリーミアムプランの唯一の違いは、使用量にあります。 Selenium Grid を利用した自動化テストの場合、 LambdaTest は月 60 分の無料テストを提供しています。
+> [!NOTE]
+> 他のクラウドベースのブラウザー横断テストサービスプロバイダーとは異なり、LambdaTestは、あなたが彼らのプラットフォームに生涯アクセスするフリーミアムアカウントを提供しています。プレミアムプランとフリーミアムプランの唯一の違いは、使用量にあります。 Selenium Grid を利用した自動化テストの場合、 LambdaTest は月 60 分の無料テストを提供しています。
 
 #### 基本的な機能: 手動テスト
 
@@ -369,7 +373,8 @@ LambdaTest にサインインすると、 LambdaTest ダッシュボードに移
 4. 内蔵の画像エディターで、同僚にプッシュする前にスクリーンショットにハイライトをつけましょう。![バグをハイライト](mark-as-bug-3.png)
 5. バグとしてマークボタンを使用することで、 Jira、Asana、Trello などの多くのサードパーティツールにバグをプッシュすることができます。これにより、 LambdaTest のテストセッションから自分のプロジェクト管理インスタンスに直接バグをログ出力することができます。 [LambdaTest のサードパーティー統合](https://www.lambdatest.com/integrations)をすべて調べてください。
 
-> **メモ:** テストセッションで撮影された動画や画像は、すべて LambdaTest のギャラリー、テストログ、課題トラッカーに記録されます。
+> [!NOTE]
+> テストセッションで撮影された動画や画像は、すべて LambdaTest のギャラリー、テストログ、課題トラッカーに記録されます。
 
 ### Sauce Labs
 
@@ -398,7 +403,8 @@ Sauce Labs トライアルを始めましょう。
 
 セッションを停止すると、 Manual Tests タブを返し、始めるには前回のマニュアルセッションの各項目が表示されます。これらの項目をクリックすると、そのセッションの詳細なデータが表示されます。ここでは、スクリーンショットをダウンロードしたり、セッションの動画を見たり、データログを出力したりすることができます。
 
-> **メモ:** これはすでにとても有益なことで、これらのエミュレーターや仮想マシンをすべて自分で設定するよりもはるかに便利です。
+> [!NOTE]
+> これはすでにとても有益なことで、これらのエミュレーターや仮想マシンをすべて自分で設定するよりもはるかに便利です。
 
 #### 高度な方法: Sauce Labs API
 
@@ -471,7 +477,8 @@ BrowserStack Live ダッシュボードでは、テストしたい端末とブ
 
 ![テスト端末](browserstack-test-device-sized.png)
 
-> **メモ:** モバイル端末の選択肢の横にある青い端末アイコンは、実際の端末でテストすることを指示するもので、このアイコンのない選択肢はエミュレーターで実行します。
+> [!NOTE]
+> モバイル端末の選択肢の横にある青い端末アイコンは、実際の端末でテストすることを指示するもので、このアイコンのない選択肢はエミュレーターで実行します。
 
 アドレスバーに URL を入力したり、他のコントロールを実際の端末と同じように使用することができます。対応している端末（MacBook など）のタッチパッドで、端末からクリップボードへのコピー＆ペースト、マウスドラッグによる上下のスクロール、適切なジェスチャー（ピンチ／ズーム、 2 本指でのスクロールなど）を使用することもできます。すべての機能がすべての端末で利用できるわけではないことに注意してください。
 
@@ -493,7 +500,8 @@ BrowserStack Live ダッシュボードでは、テストしたい端末とブ
 - _Features_ - 現在の設定が対応している機能（クリップボードへのコピー、ジェスチャー対応など）を表示させます。
 - _Stop_ - セッションを終了します。
 
-> **メモ:** これはすでにとても有益なことで、これらのエミュレータや仮想マシンをすべて自分で設定するよりもはるかに便利です。
+> [!NOTE]
+> これはすでにとても有益なことで、これらのエミュレータや仮想マシンをすべて自分で設定するよりもはるかに便利です。
 
 #### その他の基本機能
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
index 2182a1ac93ffd4..7e7fbc25ea3c76 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
@@ -155,7 +155,8 @@ JavaScript の機能検出テストの例をすでに見ました。一般的に
     }
     ```
 
-    > **メモ:** 上の例の二重 `NOT` (`!!`) は、結果を歪める可能性のある{{glossary("Truthy", "真値")}}/{{glossary("Falsy", "偽値")}}ではなく、「適切な」論理値を返すように強制する方法です。
+    > [!NOTE]
+    > 上の例の二重 `NOT` (`!!`) は、結果を歪める可能性のある{{glossary("Truthy", "真値")}}/{{glossary("Falsy", "偽値")}}ではなく、「適切な」論理値を返すように強制する方法です。
 
 - 要素におけるメソッドの固有の返値
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index f9c92ecc2e2b71..6adf53fb749783 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -45,7 +45,8 @@ HTML/CSS に起因するブラウザー間のエラーを減らす方法を見
 
 基本的には、HTML と CSS のコードが整形式で、構文エラーがないかどうかをチェックすることです。
 
-> **メモ:** CSS と HTML に関する一般的な問題の 1 つは、異なる CSS ルールが互いに矛盾が生じるときに発生します。 サードパーティのコードを使用している場合、これは特に問題になる可能性があります。たとえば、CSS フレームワークを使用して、それが使用しているクラス名の 1 つが別の目的ですでに使用されているものと衝突しているとします。 または、ある種のサードパーティ API (たとえば広告バナーの生成) によって生成された HTML に、すでに別の目的で使用されているクラス名または ID が含まれていることもあります。これが起こらないようにするには、最初に使用しているツールを調べて、それらを中心にコードを設計する必要があります。また、「名前空間付き」 CSS も価値があります。ウィジェットがある場合は、それが明確なクラスを持っていることを確認してから、このクラスでウィジェット内の要素を選択するセレクターを起動します。そうすれば競合は起こりにくくなります。例えば、 `.audio-player ul a` です。
+> [!NOTE]
+> CSS と HTML に関する一般的な問題の 1 つは、異なる CSS ルールが互いに矛盾が生じるときに発生します。 サードパーティのコードを使用している場合、これは特に問題になる可能性があります。たとえば、CSS フレームワークを使用して、それが使用しているクラス名の 1 つが別の目的ですでに使用されているものと衝突しているとします。 または、ある種のサードパーティ API (たとえば広告バナーの生成) によって生成された HTML に、すでに別の目的で使用されているクラス名または ID が含まれていることもあります。これが起こらないようにするには、最初に使用しているツールを調べて、それらを中心にコードを設計する必要があります。また、「名前空間付き」 CSS も価値があります。ウィジェットがある場合は、それが明確なクラスを持っていることを確認してから、このクラスでウィジェット内の要素を選択するセレクターを起動します。そうすれば競合は起こりにくくなります。例えば、 `.audio-player ul a` です。
 
 ### 検証
 
@@ -75,7 +76,8 @@ CSS にも同様の話があります — プロパティ名が正しくつづ
 
 ほとんどのブラウザーに使用されている開発者ツールは、主に CSS のエラーを発見するための有益なツールも備えています。
 
-> **メモ:** ブラウザーが不正な形式のマークアップを自動的に修正しようとするため、 HTML エラーは開発ツールではそれほど簡単には表示されない傾向があります。 W3C バリデーターは HTML エラーを取得するための最良の方法です — 上の[検証](#検証)をご覧ください。
+> [!NOTE]
+> ブラウザーが不正な形式のマークアップを自動的に修正しようとするため、 HTML エラーは開発ツールではそれほど簡単には表示されない傾向があります。 W3C バリデーターは HTML エラーを取得するための最良の方法です — 上の[検証](#検証)をご覧ください。
 
 例えば、Firefox の CSSインスペクターでは、適用されていない CSS 宣言が警告の三角形とともに反転して表示されます。警告の三角形にカーソルを合わせると、説明的なエラーメッセージが提供されます。
 
@@ -141,7 +143,8 @@ HTML の [`<video>`](/ja/docs/Web/HTML/Element/video), [`<audio>`](/ja/docs/Web/
 
 {{EmbedGHLiveSample("learning-area/tools-testing/cross-browser-testing/html-css/forms-test", '100%', 150)}}
 
-> **メモ:** GitHub で [forms-test.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html) として実行することもできます（[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/forms-test.html)も参照してください）。
+> [!NOTE]
+> GitHub で [forms-test.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html) として実行することもできます（[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/forms-test.html)も参照してください）。
 
 例を表示すると、データを入力しようとして、 UI 機能が動作しているのがわかります。動的キーボードを備えた端末では、型専用のキーパッドが表示されます。対応していないブラウザーでは、入力は通常のテキスト入力に既定され、ユーザーは正しい情報を入力することができます。
 
@@ -153,7 +156,8 @@ CSS は間違いなく HTML よりも代替性に優れています。ブラウ
 
 ![角丸、インセットシャドウ、ドロップシャドウの赤い錠剤型ボタン](blingy-button.png)
 
-> **メモ:** GitHub で [forms-test.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) として実行することもできます（[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)も参照してください）。
+> [!NOTE]
+> GitHub で [forms-test.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) として実行することもできます（[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)も参照してください）。
 
 ボタンにはスタイル設定をする宣言がいくつもありますが、最も興味深いのは以下の 2 つです。
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md
index 5ca1714a85505e..a273e15f0e2b66 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.md
@@ -84,7 +84,8 @@ l10n:
 
 潜在的な問題のある部分のリストをコンパイルする必要があります。
 
-> **メモ:** 技術に関するブラウザーの対応情報は、MDN、すなわちあなたが今いるサイトでさまざまな機能を見ていくことで見つけることができます。また、 [caniuse.com](https://caniuse.com/) にも有益な情報があります。
+> [!NOTE]
+> 技術に関するブラウザーの対応情報は、MDN、すなわちあなたが今いるサイトでさまざまな機能を見ていくことで見つけることができます。また、 [caniuse.com](https://caniuse.com/) にも有益な情報があります。
 
 これらの詳細について合意したら、サイトの開発を始めることができます。
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index 2cbe7aba44e082..bb818d0a9e4e79 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -66,7 +66,7 @@ if (window.XMLHttpRequest) {
 - [this](/ja/docs/Web/JavaScript/Reference/Operators/this) が、どのスコープに適用されるのか、したがってその値が意図通りなのかが混乱しています。 ["this" とは何か](/ja/docs/Learn/JavaScript/Objects/Basics#this_とは何か)で軽く紹介されています。[これ](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143)のような例も勉強してください。この例では、 `this` スコープを別な変数に保存し、その変数を入れ子関数で使用する典型的なパターンを示しているので、正しい `this` スコープに機能を適用していることを確認できます。
 - グローバル変数で反復処理するループ内で関数を誤って使用する（より一般的には「スコープを間違える」）。
 
-> **注目:**
+> [!CALLOUT]
 > 例えば、 [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) （[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)を参照）では、 `var` で定義した変数を使って10回の反復処理をループし、そのたびに段落を作成して [onclick](/ja/docs/Web/API/Element/click_event) イベントハンドラーを追加しています。クリックされると、それぞれにその番号（作成した時点での `i` の値）を格納したアラートメッセージが表示されるようにします。なぜなら、 `for` ループはネストされた関数を呼び出す前にすべての反復処理を行うからです。
 >
 > 最も簡単な解決策は、反復処理変数を `var` の代わりに `let` で宣言することです。動作するバージョンについては [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html) （[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/good-for-loop.html)も参照）を参照してください。
@@ -105,7 +105,8 @@ npm install -g jshint
 
 これらのツールを [Gulp](https://gulpjs.com/) や [Webpack](https://webpack.github.io/) のようなタスクランナー/ビルドツールと使用して、開発中に JavaScript を自動的に検証することもできます。（後の記事で[テストツールを自動化するタスクランナーの使用](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#using_a_task_runner_to_automate_testing_tools)を参照してください） ESLint のオプションについては [ESLint integrations](https://eslint.org/docs/user-guide/integrations) を参照してください。 JSHint は Grunt ですぐに対応しており、他にも [Webpack 用の JSHint loader](https://github.com/webpack-contrib/jshint-loader) などの統合があります。
 
-> **メモ:** ESLint は JSHint よりも設定や構成が少し面倒ですが、より強力です。
+> [!NOTE]
+> ESLint は JSHint よりも設定や構成が少し面倒ですが、より強力です。
 
 ### ブラウザーの開発者ツール
 
@@ -179,7 +180,8 @@ fetch(requestURL).then((response) => {
 
 残念ながら、まだ同じエラーが出ています。ブラウザー開発者ツールのより洗練された機能、 Firefox でいうところの [JavaScript デバッガー](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)を使って、この問題を調査してみましょう。
 
-> **メモ:** 他のブラウザーでも似たツールが利用できます。 Chrome の[ソースタブ](https://developer.chrome.com/docs/devtools/#sources)、 Safari の Debugger （[Safari Web Development Tools](https://developer.apple.com/safari/tools/)を参照）などです。
+> [!NOTE]
+> 他のブラウザーでも似たツールが利用できます。 Chrome の[ソースタブ](https://developer.chrome.com/docs/devtools/#sources)、 Safari の Debugger （[Safari Web Development Tools](https://developer.apple.com/safari/tools/)を参照）などです。
 
 Firefoxでは、デバッガータブは次のようになります。
 
@@ -208,7 +210,8 @@ Firefoxでは、デバッガータブは次のようになります。
 
 あなた自身でこの問題を解決してみてください。まずは {{domxref("Response")}} オブジェクトのドキュメントをご覧ください。もし行き詰まったら、 <https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-fixed> に修正されたソースコードがあります。
 
-> **メモ:** デバッガーのタブには、例えば条件付きブレークポイントやウォッチ式など、ここでは指定し ていない他にも有益な機能がたくさんあります。より多くの情報については、[デバッガー](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)ページを参照してください。
+> [!NOTE]
+> デバッガーのタブには、例えば条件付きブレークポイントやウォッチ式など、ここでは指定し ていない他にも有益な機能がたくさんあります。より多くの情報については、[デバッガー](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)ページを参照してください。
 
 ### パフォーマンスの問題
 
@@ -219,7 +222,8 @@ Firefoxでは、デバッガータブは次のようになります。
 - API を使用する場合、使用していないときは API 機能を必ずオフにしてください。 API 呼び出しによっては処理能力を実に高く消費することがあります。例えば、動画ストリームを表示させる場合、それが見えないときは必ずオフにしてください。 Geolocation の呼び出しを繰り返し使用して端末の位置を追跡する場合は、ユーザーが使用するのを止めたときにオフにするようにしてください。
 - アニメーションは実にパフォーマンスコストがかかります。多くの JavaScript ライブラリーは JavaScript でプログラムされたアニメーション機能を提供していますが、 JavaScript よりも [CSSアニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) (または新進の [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)) のようなブラウザーネイティブ機能でアニメーションを行う方が、はるかにコストパフォーマンスが高いです。 Brian Birtles の [Animating like you just don't care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) を読むと、アニメーションにコストがかかる理由や、アニメーションのパフォーマンスを向上させるためのヒント、ウェブアニメーションAPIに関する情報など、実に有益な理論が書かれています。
 
-> **メモ:** Addy Osmani の [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/) には、 JavaScript のパフォーマンスを向上させるための多くの詳細と優れたヒントが格納されています。
+> [!NOTE]
+> Addy Osmani の [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/) には、 JavaScript のパフォーマンスを向上させるための多くの詳細と優れたヒントが格納されています。
 
 ## ブラウザー間の JavaScript の問題
 
@@ -236,7 +240,8 @@ Firefoxでは、デバッガータブは次のようになります。
 
 新機能への対応にはいくつか戦略がありますが、最も一般的なものを見てみましょう。
 
-> **メモ:** もちろん、必要に応じて組み合わせることもできます。例えば、ある機能が対応しているかどうかを判断するために機能検出を使用することができます。対応していない場合は、ポリフィルや ライブラリーを読み込むコードを実行して、対応していない部分を処理することができます。
+> [!NOTE]
+> もちろん、必要に応じて組み合わせることもできます。例えば、ある機能が対応しているかどうかを判断するために機能検出を使用することができます。対応していない場合は、ポリフィルや ライブラリーを読み込むコードを実行して、対応していない部分を処理することができます。
 
 #### 機能検出
 
@@ -264,7 +269,8 @@ CSS 機能が対応している場合にスタイルを適用したい場合は
 
 最後に、機能検出を**ブラウザー検出**（具体的にどのブラウザーがサイトにアクセスしているかを検出すること）と混同しないでください。これはひどい行為なので、まったくお勧めできません。詳細は後述の[ブラウザー検出をしない](#ブラウザー検出をしない)を参照してください。
 
-> **メモ:** 機能検出については、このモジュールの後の方で、専用の記事で詳しく述べます。
+> [!NOTE]
+> 機能検出については、このモジュールの後の方で、専用の記事で詳しく述べます。
 
 #### ライブラリー
 
@@ -283,7 +289,8 @@ JavaScript ライブラリーには、いくつかの主な種類がある傾向
 
 基本的なレベルでのライブラリーの使い方は、ライブラリーのファイル（JavaScript、場合によっては CSS やその他の依存関係も）をダウンロードし、ページに添付する（例えば {{htmlelement("script")}} 要素で）ことです。しかし、このようなライブラリーには、 [Bower](https://bower.io/) コンポーネントとしてインストールしたり、 [Webpack](https://webpack.github.io/) モジュールバンドラーに依存関係として記載するなど、他にも多くの使用方法があります。より詳細な情報については、ライブラリーの個別のインストールページを読む必要があります。
 
-> **メモ:** JavaScript のフレームワークである [Ember](https://emberjs.com/) や [Angular](https://angularjs.org/) もウェブ上で見かけます。ライブラリーは個々の問題を解決したり、既存のウェブサイトに取り込んだりするのに多いのに対し、フレームワークは複雑なウェブアプリケーションを開発するための完全なソリューションという傾向があります。
+> [!NOTE]
+> JavaScript のフレームワークである [Ember](https://emberjs.com/) や [Angular](https://angularjs.org/) もウェブ上で見かけます。ライブラリーは個々の問題を解決したり、既存のウェブサイトに取り込んだりするのに多いのに対し、フレームワークは複雑なウェブアプリケーションを開発するための完全なソリューションという傾向があります。
 
 #### ポリフィル
 
@@ -317,9 +324,11 @@ JavaScript ライブラリーには、いくつかの主な種類がある傾向
 5. [フェッチ](/ja/docs/Web/API/fetch)に対応していないブラウザーで読み込んでも、花の画像が現れるはずです。
    ![Fetch basic example という見出しと紫の花の写真](fetch-image.jpg)
 
-> **メモ:** 完成版は [fetch-polyfill-finished.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) にあります（[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)も参照してください）。
+> [!NOTE]
+> 完成版は [fetch-polyfill-finished.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) にあります（[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)も参照してください）。
 
-> **メモ:** 繰り返しになりますが、これから出会う様々なポリフィルを使用する方法はたくさんあります - それぞれのポリフィルのドキュメントを参照してください。
+> [!NOTE]
+> 繰り返しになりますが、これから出会う様々なポリフィルを使用する方法はたくさんあります - それぞれのポリフィルのドキュメントを参照してください。
 
 「なぜポリフィルは必要がなくても、常にコードを読み込むべきなのか」と思うかもしれません。これは良い点です。サイトが複雑になり、より多くのライブラリーやポリフィルなどを使用するようになると、多くの余分なコードを読み込むようになり、特に性能の低い端末ではパフォーマンスに影響を及ぼし始める可能性があります。必要なファイルだけを読み込むのが意味あることです。
 
@@ -371,7 +380,8 @@ function loadScript(src, done) {
 
 最新の JavaScript の機能を使用したい人のために人気が出てきているもう一つのオプションは、最近の ECMAScript の機能を使用するコードを、古いブラウザーで作業するバージョンに変換することです。
 
-> **メモ:** これは「トランスパイル」と呼ばれます。（C コードで言うような）コンピューターで実行するためにコードを低レベルにコンパイルするのではなく、同じような抽象度で存在する構文に変更することで、同じように使用することができますが、状況は少し異なります（この場合、 JavaScript のある種類を別の種類に変換します）。
+> [!NOTE]
+> これは「トランスパイル」と呼ばれます。（C コードで言うような）コンピューターで実行するためにコードを低レベルにコンパイルするのではなく、同じような抽象度で存在する構文に変更することで、同じように使用することができますが、状況は少し異なります（この場合、 JavaScript のある種類を別の種類に変換します）。
 
 よく使われるトランスパイラーは [Babel.js](https://babeljs.io/) ですが、他にもあります。
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
index b29747d8bcd148..26069f59113d48 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
@@ -42,7 +42,8 @@ l10n:
 
 以下の節では、この形式で対応表を作り上げていきます。
 
-> **メモ:** Yahoo は最初にこの手法を、[Graded browser Support](https://github.com/yui/yui3/wiki/Graded-Browser-Support) アプローチとして広めました。
+> [!NOTE]
+> Yahoo は最初にこの手法を、[Graded browser Support](https://github.com/yui/yui3/wiki/Graded-Browser-Support) アプローチとして広めました。
 
 ### 視聴者が最も使用するブラウザーを予測する
 
@@ -63,7 +64,8 @@ Opera Mini は[複雑な JavaScript を実行する能力がとても低い](htt
 
 もし、対象となるユーザーがほとんど別の場所にいる場合は、一般的なブラウザーや OS が上記とは異なる形になる可能性があります。
 
-> **メモ:** 「うちの会社の社長はブラックベリーを使用しているから、そっちで見栄えがするようにしたほうがいい」というのも、考えることができるんです。
+> [!NOTE]
+> 「うちの会社の社長はブラックベリーを使用しているから、そっちで見栄えがするようにしたほうがいい」というのも、考えることができるんです。
 
 ### ブラウザーの統計
 
@@ -99,7 +101,8 @@ Opera Mini は[複雑な JavaScript を実行する能力がとても低い](htt
 
 左側のメニューから _ユーザー > テクノロジー > ブラウザーと OS_ を選択すると、ユーザーが使用するブラウザーや演算子を確認することができます。
 
-> **メモ:** Google アナリティクスを使用する場合、誤解を招くような偏見に注意する必要があります。例えば、「Firefox モバイルのユーザーがいない」という情報は、Firefox モバイルにわざわざ対応していないということにつながるかもしれません。しかし、最初の段階でサイトが Firefox モバイルで壊れていた場合、Firefox モバイルユーザーは一人もいないことになります。
+> [!NOTE]
+> Google アナリティクスを使用する場合、誤解を招くような偏見に注意する必要があります。例えば、「Firefox モバイルのユーザーがいない」という情報は、Firefox モバイルにわざわざ対応していないということにつながるかもしれません。しかし、最初の段階でサイトが Firefox モバイルで壊れていた場合、Firefox モバイルユーザーは一人もいないことになります。
 
 ### その他の考慮事項
 
@@ -171,9 +174,11 @@ A グレード:
 
 下記では、他にも様々なオプションがあることを説明します。
 
-> **メモ:** 一般に公開された端末ラボを作成する取り組みもあります。[Open Device Labs](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/) を参照してください。
+> [!NOTE]
+> 一般に公開された端末ラボを作成する取り組みもあります。[Open Device Labs](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/) を参照してください。
 
-> **メモ:** アクセシビリティについても考慮する必要があります。アクセシビリティのテストを容易にするために、マシンにインストールできる有益なツールがいくつかありますが、このコースの後半にある「よくあるアクセシビリティの問題の処理」の記事で、それらのツールを取り扱います。
+> [!NOTE]
+> アクセシビリティについても考慮する必要があります。アクセシビリティのテストを容易にするために、マシンにインストールできる有益なツールがいくつかありますが、このコースの後半にある「よくあるアクセシビリティの問題の処理」の記事で、それらのツールを取り扱います。
 
 ### エミュレーター
 
@@ -191,13 +196,15 @@ A グレード:
 - [Opera Mini](https://dev.opera.com/articles/installing-opera-mini-on-your-computer/) をテストしたい場合は、自分自身でエミュレートすることができます。
 - Windows Mobile OS 用のエミュレーターも利用できます。[Windows Phone Emulator for Windows Phone 8](<https://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx>) や [Microsoft Emulator for Windows 10 Mobile を使ったテスト](https://docs.microsoft.com/windows/uwp/debug-test-perf/test-with-the-emulator) （これらはWindows 上でのみ動作する）を参照してください。
 
-> **メモ:** 多くのエミュレーターは、実際には仮想マシンを使用する必要があります（下記参照）。このような場合、指定された手順が提供されたり、仮想マシンの使用がエミュレーターのインストーラーに組み込まれたりすることがよくあります。
+> [!NOTE]
+> 多くのエミュレーターは、実際には仮想マシンを使用する必要があります（下記参照）。このような場合、指定された手順が提供されたり、仮想マシンの使用がエミュレーターのインストーラーに組み込まれたりすることがよくあります。
 
 ### 仮想マシン
 
 仮想マシンは、デスクトップコンピューター上で動作するアプリケーションで、自分自身で仮想ハードディスク（多くはホストマシンのハードディスク上に存在する単一の大きなファイルで表される）に区分されたオペレーティングシステム全体のエミュレーションを実行することができます。 [Parallels](https://www.parallels.com/)、[VMWare](https://www.vmware.com/)、[Virtual Box](https://www.virtualbox.org/wiki/Downloads) などの有名な仮想マシンアプリが利用でき、個人的には後者が無料なので気に入っています。
 
-> **メモ:** 仮想マシンのエミュレーションを実行するには、多くのハードディスク空間が利用できる必要があります。エミュレートする各オペレーティングシステムは、多くのメモリーを占めることがあります。インストールするたびに必要なハードディスク空間を選ぶ傾向があります。10GB 程度でも十分ですが、オペレーティングシステムを確実に実行するために 50GB 以上を推奨する情報もあります。ほとんどの仮想マシンアプリで提供された良いオプションは、**動的に割り当てられた**ハードドライブを作成し、必要に応じて拡大・縮小させることです。
+> [!NOTE]
+> 仮想マシンのエミュレーションを実行するには、多くのハードディスク空間が利用できる必要があります。エミュレートする各オペレーティングシステムは、多くのメモリーを占めることがあります。インストールするたびに必要なハードディスク空間を選ぶ傾向があります。10GB 程度でも十分ですが、オペレーティングシステムを確実に実行するために 50GB 以上を推奨する情報もあります。ほとんどの仮想マシンアプリで提供された良いオプションは、**動的に割り当てられた**ハードドライブを作成し、必要に応じて拡大・縮小させることです。
 
 Virtual Box を使用するには、次のことを行う必要があります。
 
@@ -217,7 +224,8 @@ Virtual Box を使用するには、次のことを行う必要があります
 
 ![特定の仕様に合わせた Virtual Box をインストールする方法](virtualbox-installer.png)
 
-> **警告:** この時点で仮想マシンにインストールしたいオペレーティングシステムのイメージが利用できることを確認し、すぐにインストールする必要があります。この点で処理を取り消すと、仮想マシンが使用不能になり、削除して再度作成しなければならなくなることがあります。これは致命的なものではありませんが、面倒です。
+> [!WARNING]
+> この時点で仮想マシンにインストールしたいオペレーティングシステムのイメージが利用できることを確認し、すぐにインストールする必要があります。この点で処理を取り消すと、仮想マシンが使用不能になり、削除して再度作成しなければならなくなることがあります。これは致命的なものではありませんが、面倒です。
 
 処理が完全に終了すると、ホストコンピューター上のウィンドウ内で OS を実行している仮想マシンがあるはずです。
 
@@ -230,7 +238,8 @@ Virtual Box を使用するには、次のことを行う必要があります
 - Windows 10 と Edge 14
 - Windows 10 と Edge 13
 
-> **メモ:** 仮想マシンのもう一つの良いところは、仮想ディスクイメージがかなり自己完結していることです。チームで作業している場合、1 つの仮想ディスクイメージを作成し、それをコピーして周りに渡すことができます。ただ、Windows やその他のライセンス製品であれば、それらのコピーをすべて実行するのに必要なライセンスがあることを確認してください。
+> [!NOTE]
+> 仮想マシンのもう一つの良いところは、仮想ディスクイメージがかなり自己完結していることです。チームで作業している場合、1 つの仮想ディスクイメージを作成し、それをコピーして周りに渡すことができます。ただ、Windows やその他のライセンス製品であれば、それらのコピーをすべて実行するのに必要なライセンスがあることを確認してください。
 
 ### 自動化と商用アプリ
 
@@ -262,9 +271,11 @@ Virtual Box を使用するには、次のことを行う必要があります
 
 これらの手順は、テストするブラウザーが可能な限り「純粋」であること、つまり、テスト結果に影響を与えるようなものがインストールされていないことを確認するためのものです。
 
-> **メモ:** ハードウェアを利用できる場合は、ローエンドの携帯電話など端末でサイトをテストすることも有益なオプションです。サイトの規模が大きくなり、より多くの機能を搭載すると、サイトの速度が低下する可能性が高くなるので、パフォーマンスをより考慮するように始める必要があります。ローエンドの端末で機能を実現するようにすれば、ハイエンドの端末でも良い使い勝手が得られる可能性が高くなります。
+> [!NOTE]
+> ハードウェアを利用できる場合は、ローエンドの携帯電話など端末でサイトをテストすることも有益なオプションです。サイトの規模が大きくなり、より多くの機能を搭載すると、サイトの速度が低下する可能性が高くなるので、パフォーマンスをより考慮するように始める必要があります。ローエンドの端末で機能を実現するようにすれば、ハイエンドの端末でも良い使い勝手が得られる可能性が高くなります。
 
-> **メモ:** サーバーサイドの開発環境の中には、サイトの変更を一部のユーザーだけにロールアウトするための有益なメカニズムを提供しているものがあり、別の開発サーバーを使用することなく、一部のユーザーによって機能をテストしてもらうための有益なメカニズムを提供しています。その例が、[Django Waffle Flags](https://github.com/django-waffle/django-waffle) です。
+> [!NOTE]
+> サーバーサイドの開発環境の中には、サイトの変更を一部のユーザーだけにロールアウトするための有益なメカニズムを提供しているものがあり、別の開発サーバーを使用することなく、一部のユーザーによって機能をテストしてもらうための有益なメカニズムを提供しています。その例が、[Django Waffle Flags](https://github.com/django-waffle/django-waffle) です。
 
 ## まとめ
 
diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
index 98fd98653e66b0..d1a52ea07a9a5a 100644
--- a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
+++ b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
@@ -40,7 +40,8 @@ WebDriver のインストール方法と使用方法は、テストの作成と
 
 Node.js を使用した Selenium テストの作成と実行については、始める前にすばやく簡単に行うことができ、フロントエンド開発者にはもっと使い慣れた環境を提供する予定です。
 
-> **メモ:** 他のサーバーサイド環境で WebDriver を使用する方法を知りたい場合は、 [Platforms Supported by Selenium](https://www.selenium.dev/downloads/) もチェックしてください。
+> [!NOTE]
+> 他のサーバーサイド環境で WebDriver を使用する方法を知りたい場合は、 [Platforms Supported by Selenium](https://www.selenium.dev/downloads/) もチェックしてください。
 
 ### Node で Selenium のセットアップ
 
@@ -51,7 +52,8 @@ Node.js を使用した Selenium テストの作成と実行については、
    npm install selenium-webdriver
    ```
 
-> **メモ:** 以前に selenium-webdriver をインストールしてブラウザードライバーをダウンロードした場合でも、これらの手順を実行することをお勧めします。すべてが最新であることを確認する必要があります。
+> [!NOTE]
+> 以前に selenium-webdriver をインストールしてブラウザードライバーをダウンロードした場合でも、これらの手順を実行することをお勧めします。すべてが最新であることを確認する必要があります。
 
 次に、 WebDriver がテストしたいブラウザーを制御するために、関連するドライバーをダウンロードする必要があります。どこから取得するかは、 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) ページに詳細があります（最初の節の表を見てください）。もちろん、いくつかのブラウザーは OS 固有のものですが、主要な OS で利用できる Firefox と Chrome に絞って説明します。
 
@@ -59,7 +61,8 @@ Node.js を使用した Selenium テストの作成と実行については、
 2. ホームユーザーディレクトリーのルートなど、移動しやすい場所に展開します。
 3. `chromedriver` と `geckodriver` ドライバーの場所をシステムの `PATH` 変数に追加してください。これは、ハードディスクのルートから、ドライバーを格納するディレクトリーへの絶対パスでなければなりません。例えば、macOS マシンを使用していて、ユーザー名が bob で、ドライバーをホームフォルダーのルートに置くとしたら、パスは `/Users/bob` となります。
 
-> **メモ:** もう一度言っておきますが、 `PATH` に追加するパスは、ドライバーそのものへのパス ではなく、ドライバーを格納するディレクトリーへのパスである必要があります。これはよく間違えられます。
+> [!NOTE]
+> もう一度言っておきますが、 `PATH` に追加するパスは、ドライバーそのものへのパス ではなく、ドライバーを格納するディレクトリーへのパスである必要があります。これはよく間違えられます。
 
 macOS システムとほとんどの Linux システムで `PATH` 変数を設定するには、次のようにします。
 
@@ -110,7 +113,8 @@ Windows で `PATH` 変数を設定するには、[How can I add a new folder to
    })();
    ```
 
-   > **メモ:** この関数は {{glossary("IIFE")}} （即時実行関数式）です。
+   > [!NOTE]
+   > この関数は {{glossary("IIFE")}} （即時実行関数式）です。
 
 3. 端末で、自分のプロジェクトフォルダー内にいることを確認し、以下のコマンドを入力します。
 
@@ -218,7 +222,8 @@ const { Builder, Browser } = require("selenium-webdriver");
 driver.get("http://www.google.com");
 ```
 
-> **メモ:** この章とその下記の機能の詳細については、[WebDriver クラスリファレンス](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html)を参照してください。
+> [!NOTE]
+> この章とその下記の機能の詳細については、[WebDriver クラスリファレンス](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html)を参照してください。
 
 リソースを指す URL であればなんでも使用することができます。ローカル文書をテストするためには `file://` URL を含めることもできます。
 
@@ -463,7 +468,8 @@ const driver = new Builder().forBrowser("firefox").build();
 
 これで WebDriver はフォームフィールドを形成する前に 2 秒間待機します。そして、 `getAttribute()` を使用して `value` 属性値を取得して値が埋まっているかどうか（空でないかどうか）を検査し、空でなければコンソールにメッセージを出力します。
 
-> **メモ:** また、 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait) と呼ばれるメソッドがあります。これは、ある条件を一定時間繰り返しテストし、コードの実行を継続します。これも [util ライブラリー](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html)を使用しています。 util ライブラリーは `wait()` とともに使用する一般的な条件を定義しています。
+> [!NOTE]
+> また、 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait) と呼ばれるメソッドがあります。これは、ある条件を一定時間繰り返しテストし、コードの実行を継続します。これも [util ライブラリー](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html)を使用しています。 util ライブラリーは `wait()` とともに使用する一般的な条件を定義しています。
 
 ### 使用後のドライバーのシャットダウン
 
@@ -590,9 +596,11 @@ Selenium テストを LambdaTest 上でリモート動作させるのはとて
    [![LambdaTest Automation Dashboard](automation-logs-1.jpg)](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/Automation-logs-1.jpg)
    テストビルド内のすべてのテストについて、ネットワーク、コマンド、例外、Selenium ログを取得できます。また、Selenium スクリプトの実行を録画した動画も探すことができます。
 
-> **メモ:** LambdaTest Automation Dashboard の _HELP_ ボタンをクリックすると、LambdaTest オートメーションを始めるには十分な情報が提供されます。また、[Node JS で最初の Selenium スクリプトを実行する](https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/)ことに関する私たちの文書化にも対応しています。
+> [!NOTE]
+> LambdaTest Automation Dashboard の _HELP_ ボタンをクリックすると、LambdaTest オートメーションを始めるには十分な情報が提供されます。また、[Node JS で最初の Selenium スクリプトを実行する](https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/)ことに関する私たちの文書化にも対応しています。
 
-> **メモ:** テストのためのケイパビリティオブジェクトを手で書きたくない場合は、 [Selenium Desired Capabilities Generator](https://www.lambdatest.com/capabilities-generator/) を用いて生成することができます。
+> [!NOTE]
+> テストのためのケイパビリティオブジェクトを手で書きたくない場合は、 [Selenium Desired Capabilities Generator](https://www.lambdatest.com/capabilities-generator/) を用いて生成することができます。
 
 ### BrowserStack
 
@@ -658,9 +666,11 @@ BrowserStack で Selenium テストをリモートで動作するように取得
 
 テストのリンクをクリックすると、新しい画面が取得され、テストの録画動画や、テストに関連する複数の詳細なログ情報を見ることができます。
 
-> **メモ:** Browserstack 自動化ダッシュボードの _Resources_ メニューオプションには、自動テストを実行するために使用するための有益な情報が豊富に格納されています。ノード固有の情報については、 [Node JS Documentation for writing automate test scripts in Node JS](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs) を参照してください。 BrowserStack で使用することができますすべての有益なことを見つけるために、ドキュメントを探索してください。
+> [!NOTE]
+> Browserstack 自動化ダッシュボードの _Resources_ メニューオプションには、自動テストを実行するために使用するための有益な情報が豊富に格納されています。ノード固有の情報については、 [Node JS Documentation for writing automate test scripts in Node JS](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs) を参照してください。 BrowserStack で使用することができますすべての有益なことを見つけるために、ドキュメントを探索してください。
 
-> **メモ:** テストのためのケイパビリティオブジェクトを手で書きたくなければ、 ドキュメントにあるジェネレーターを使用して生成することができます。 [Run your first test](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test) を参照ください。
+> [!NOTE]
+> テストのためのケイパビリティオブジェクトを手で書きたくなければ、 ドキュメントにあるジェネレーターを使用して生成することができます。 [Run your first test](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test) を参照ください。
 
 #### プログラムによる BrowserStack テストの詳細の入力
 
@@ -794,9 +804,11 @@ Sauce Labs 上で Selenium テストをリモートで実行するための取
 5. これで [Sauce Labs Automated Test dashboard](https://app.saucelabs.com/dashboard/tests) のページに行くと、テストが掲載されています。ここから動画やスクリーンショット、他にもそのようなデータを見ることができます。
    ![Sauce Labs automated test](sauce_labs_automated_test.png)
 
-> **メモ:** Sauce Labs の [Platform Configurator](https://saucelabs.com/platform/platform-configurator#/) は、テストしたいブラウザー/OS に基づいて、ドライバーインスタンスに供給するケイパビリティオブジェクトを生成する有益なツールです。
+> [!NOTE]
+> Sauce Labs の [Platform Configurator](https://saucelabs.com/platform/platform-configurator#/) は、テストしたいブラウザー/OS に基づいて、ドライバーインスタンスに供給するケイパビリティオブジェクトを生成する有益なツールです。
 
-> **メモ:** Sauce Labs と Selenium を使用したテストに関する有益な詳細については、 [Getting Started with Selenium for Automated Website Testing](https://docs.saucelabs.com/web-apps/automated-testing/selenium/) と [Instant Selenium Node.js Tests](https://docs.saucelabs.com/web-apps/automated-testing/selenium/sample-scripts/#nodejs) を調べてください。
+> [!NOTE]
+> Sauce Labs と Selenium を使用したテストに関する有益な詳細については、 [Getting Started with Selenium for Automated Website Testing](https://docs.saucelabs.com/web-apps/automated-testing/selenium/) と [Instant Selenium Node.js Tests](https://docs.saucelabs.com/web-apps/automated-testing/selenium/sample-scripts/#nodejs) を調べてください。
 
 #### Sauce Labs テストの詳細をプログラムで書き込む
 
diff --git a/files/ja/learn/tools_and_testing/github/index.md b/files/ja/learn/tools_and_testing/github/index.md
index 3e5b60ffc9fd9c..51c98e624677b0 100644
--- a/files/ja/learn/tools_and_testing/github/index.md
+++ b/files/ja/learn/tools_and_testing/github/index.md
@@ -18,9 +18,10 @@ VCS は本質的に、ソフトウェア開発のためのものです。
 
 VCS は、上記のニーズを満たすツールを提供します。 [Git](https://git-scm.com/) は VCS の一例であり、 [GitHub](https://github.com/) は Git サーバーに加えて、コードの問題点の報告、レビューツール、タスクの割り当てやタスクの状態管理などのプロジェクト管理機能など、個人やチームで git リポジトリーを扱うための実に便利なツールを提供するウェブサイト＋インフラです。
 
-> **メモ:** Git は実際には*分散*バージョン管理システムです。つまり、コードベースを含むリポジトリーの完全なコピーが、自分のコンピューター (そして他の全員のコンピューター) に作られます。自分のコピーに変更を加え、その変更をサーバーにプッシュします。サーバーでは、管理者があなたの変更をマスターコピーにマージするかどうかを決定します。
+> [!NOTE]
+> Git は実際には*分散*バージョン管理システムです。つまり、コードベースを含むリポジトリーの完全なコピーが、自分のコンピューター (そして他の全員のコンピューター) に作られます。自分のコピーに変更を加え、その変更をサーバーにプッシュします。サーバーでは、管理者があなたの変更をマスターコピーにマージするかどうかを決定します。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
@@ -40,7 +41,8 @@ Git と GitHub を使用するには、以下のものが必要です。
 
 また、ディレクトリー間の移動、ファイルの作成、システムの `PATH` の変更など、基本的な端末の知識があることが望ましいです。
 
-> **メモ:** GitHub が Git で使えるサイトやツールセットとして唯一のものではありません。 GitLab のような他のツールもありますし、自分で Git サーバーを立ち上げて GitHub の代わりに使うこともできます。このコースでは、 GitHub を使った方法だけを紹介しています。
+> [!NOTE]
+> GitHub が Git で使えるサイトやツールセットとして唯一のものではありません。 GitLab のような他のツールもありますし、自分で Git サーバーを立ち上げて GitHub の代わりに使うこともできます。このコースでは、 GitHub を使った方法だけを紹介しています。
 
 ## ガイド
 
@@ -57,7 +59,8 @@ Git と GitHub を使用するには、以下のものが必要です。
 - [Mastering issues (from GitHub)](https://guides.github.com/features/issues/) (英語)
   - : 課題 (issue) とは、 GitHub プロジェクトのフォーラムのようなものです。質問をしたり問題を報告したりすることができ、そこで更新を管理することができます (たとえば、問題を修正する人を割り当てたり、問題を明確にしたり、問題が修正されたことを人々に知らせたりすることができます)。この記事では、課題について知っておくべきことを説明します。
 
-> **メモ:** Git や GitHub でできることは**他にもたくさん**ありますが、以上のことは Git を効果的に使い始めるために最低限知っておくべきことだと思います。 Git の理解が深まるにつれ、より複雑なコマンドを使い始めると簡単に間違えてしまうことに気づくでしょう。心配しないでください。プロのウェブ開発者であっても、 Git が分かりにくいと感じることがあり、ウェブ上で解決策を探したり、 [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) や [Dangit, git!](https://dangitgit.com/) のようなサイトを参考にして問題を解決することがよくあります。
+> [!NOTE]
+> Git や GitHub でできることは**他にもたくさん**ありますが、以上のことは Git を効果的に使い始めるために最低限知っておくべきことだと思います。 Git の理解が深まるにつれ、より複雑なコマンドを使い始めると簡単に間違えてしまうことに気づくでしょう。心配しないでください。プロのウェブ開発者であっても、 Git が分かりにくいと感じることがあり、ウェブ上で解決策を探したり、 [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) や [Dangit, git!](https://dangitgit.com/) のようなサイトを参考にして問題を解決することがよくあります。
 
 ## 関連情報
 
diff --git a/files/ja/learn/tools_and_testing/index.md b/files/ja/learn/tools_and_testing/index.md
index 783303e23d5f84..9f71aff81b4744 100644
--- a/files/ja/learn/tools_and_testing/index.md
+++ b/files/ja/learn/tools_and_testing/index.md
@@ -11,9 +11,10 @@ slug: Learn/Tools_and_testing
 
 あなたが使用すべきツールを考え出すことは難しい処理でありえるため、私たちは一連の記事を書いて、利用可能なツールの種類、あなたのためにできること、現在の業界のお気に入りを利用する方法をお伝えします。
 
-> **メモ:** このトピックでは多数のツールを参照していますが、必ずしもこれらのツールを最良または唯一の方法として推奨しているわけではなく、動作していてサポートしているためです。ほとんどの場合、他にも方法がありますが、古いものは時代遅れで、間違いなく新しいものが出てきます。
+> [!NOTE]
+> このトピックでは多数のツールを参照していますが、必ずしもこれらのツールを最良または唯一の方法として推奨しているわけではなく、動作していてサポートしているためです。ほとんどの場合、他にも方法がありますが、古いものは時代遅れで、間違いなく新しいものが出てきます。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
diff --git a/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
index c758be505a8abd..6707fe62eab9dc 100644
--- a/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
+++ b/files/ja/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
@@ -118,7 +118,8 @@ Windows で選択するオプションに関しては、WSL をインストー
 - ファイルの内容をページごとに表示: `less`, `cat`
 - テキストのストリームを操作および変換 (たとえば、HTML ファイル内の `<div>` のすべてのインスタンスを `<article>` に変更します。): `awk`, `tr`, `sed`
 
-> **メモ:** ウェブには、コマンドラインをさらに深く掘り下げた優れたチュートリアルが多数あります。これは簡単な紹介にすぎません。
+> [!NOTE]
+> ウェブには、コマンドラインをさらに深く掘り下げた優れたチュートリアルが多数あります。これは簡単な紹介にすぎません。
 
 これらのツールのいくつかをコマンドラインで使用する方法を見てみましょう。先に進む前に、端末プログラムを開きます。
 
@@ -144,7 +145,8 @@ cd Desktop
 cd ..
 ```
 
-> **メモ:** 存在することがわかっている名前をすべて入力するのではなく、<kbd>tab</kbd> キーを使用して自動補完することは、非常に便利な端末のショートカットです。たとえば、上記の 2 つのコマンドを入力した後、 `cd D` と入力して <kbd>tab</kbd> を押してみてください。現在のディレクトリーに存在する場合、ディレクトリー名 `Desktop` が自動補完されます。前進するときは、このことを念頭に置いてください。
+> [!NOTE]
+> 存在することがわかっている名前をすべて入力するのではなく、<kbd>tab</kbd> キーを使用して自動補完することは、非常に便利な端末のショートカットです。たとえば、上記の 2 つのコマンドを入力した後、 `cd D` と入力して <kbd>tab</kbd> を押してみてください。現在のディレクトリーに存在する場合、ディレクトリー名 `Desktop` が自動補完されます。前進するときは、このことを念頭に置いてください。
 
 行きたいディレクトリーが深くネストされている場合、そこに到達するためのパスを知る必要があります。これは通常、ファイルシステムの構造に慣れるにつれて簡単になりますが、パスがわからない場合は、通常、`ls` コマンド (以下を参照) を組み合わせて、パスをクリックして見つけることができます。Explorer/Finder ウィンドウを使用して、現在の場所に関連するディレクトリーの場所を確認します。
 
@@ -164,7 +166,8 @@ cd Desktop/project/src
 
 パスの先頭にスラッシュを含めると、パスが絶対パスになることに注意してください (例: `/Users/your-user-name/Desktop`)。上記のように先頭のスラッシュを省略すると、パスは現在の作業ディレクトリーからの相対パスになります。これは、ウェブブラウザーの URL で表示されるものとまったく同じです。先頭のスラッシュは「ウェブサイトのルート」を意味し、スラッシュを省略すると「現在のページに関連する URL」を意味します。
 
-> **メモ:** Windows では、スラッシュの代わりにバックスラッシュを使用します。 `cd Desktop\project\src` — これは非常に奇妙に思えるかもしれませんが、その理由に興味がある場合は、マイクロソフトのプリンシパルエンジニアの 1 人の[この YouTube クリップをご覧ください](https://www.youtube.com/watch?v=5T3IJfBfBmI) 。
+> [!NOTE]
+> Windows では、スラッシュの代わりにバックスラッシュを使用します。 `cd Desktop\project\src` — これは非常に奇妙に思えるかもしれませんが、その理由に興味がある場合は、マイクロソフトのプリンシパルエンジニアの 1 人の[この YouTube クリップをご覧ください](https://www.youtube.com/watch?v=5T3IJfBfBmI) 。
 
 ### ディレクトリーの内容の一覧表示
 
@@ -194,9 +197,11 @@ ls -l
 
 ![A vanilla macOS terminal and a more colorful custom macOS terminal, showing a file listing - the result of running the ls -l command](mac-terminals-ls.png)
 
-> **メモ:** 各コマンドで使用できるオプションを正確に確認するには、[man ページ](https://en.wikipedia.org/wiki/Man_page) を参照してください。これを行うには、 `man` コマンドの後に、検索するコマンドの名前を入力します ( `man ls` など)。これにより、端末のデフォルトのテキストファイルビューアー(たとえば、私の端末では [`less`](<https://en.wikipedia.org/wiki/Less_(Unix)>)) で man ページが開きます。その後、矢印キーまたは同様のメカニズムを使用してページをスクロールできる必要があります。man ページには、すべてのオプションが非常に詳細にリストされています。最初は少し戸惑うかもしれませんが、少なくとも必要な場合はそこにあることを知っています。man ページを読み終えたら、テキストビューアーの quit コマンドを使用して終了する必要があります (`less` の "q"。明らかでない場合は、ウェブで検索して見つける必要がある場合があります)。
+> [!NOTE]
+> 各コマンドで使用できるオプションを正確に確認するには、[man ページ](https://en.wikipedia.org/wiki/Man_page) を参照してください。これを行うには、 `man` コマンドの後に、検索するコマンドの名前を入力します ( `man ls` など)。これにより、端末のデフォルトのテキストファイルビューアー(たとえば、私の端末では [`less`](<https://en.wikipedia.org/wiki/Less_(Unix)>)) で man ページが開きます。その後、矢印キーまたは同様のメカニズムを使用してページをスクロールできる必要があります。man ページには、すべてのオプションが非常に詳細にリストされています。最初は少し戸惑うかもしれませんが、少なくとも必要な場合はそこにあることを知っています。man ページを読み終えたら、テキストビューアーの quit コマンドを使用して終了する必要があります (`less` の "q"。明らかでない場合は、ウェブで検索して見つける必要がある場合があります)。
 
-> **メモ:** 複数のオプションを指定してコマンドを同時に実行するには、通常、 `ls -lah` や `ls -ltrh` のように、ダッシュ文字の後にすべてのオプションを 1 つの文字列に入れることができます。`ls` の man ページを見て、これらの追加オプションが何をするかを調べてみてください!
+> [!NOTE]
+> 複数のオプションを指定してコマンドを同時に実行するには、通常、 `ls -lah` や `ls -ltrh` のように、ダッシュ文字の後にすべてのオプションを 1 つの文字列に入れることができます。`ls` の man ページを見て、これらの追加オプションが何をするかを調べてみてください!
 
 2 つの基本的なコマンドについて説明したので、ディレクトリーを少し調べて、ある場所から次の場所に移動できるかどうかを確認してください。
 
@@ -213,7 +218,8 @@ ls -l
 - `cp` — 使い方は `mv` と似ていますが、`cp` は指定された最初の場所と 2 番目に指定された場所にファイルのコピーを作成します。たとえば、`cp mdn-example.txt mdn-example.txt.bak` は、`mdn-example.txt.bak` という名前の `mdn-example.txt` のコピーを作成します (もちろん、必要に応じて別の名前にすることもできます）。
 - `rm` — 指定されたファイルを削除します。たとえば、 `rm mdn-example.txt` は `mdn-example.txt` という単一のファイルを削除します。この削除は永続的であり、デスクトップユーザーインターフェイスにあるごみ箱から元に戻すことはできないことに注意してください。
 
-> **メモ:** 多くの端末コマンドでは、アスタリスクを「ワイルドカード」文字として使用できます。これは、「任意の文字列」を意味します。これにより、潜在的に多数のファイルに対して一度に操作を実行でき、そのすべてが指定されたパターンに一致します。例として、 `rm mdn-*` は `mdn-` で始まるすべてのファイルを削除します。`rm mdn-*.bak` は、 `mdn-`で始まり `.bak` で終わるすべてのファイルを削除します。
+> [!NOTE]
+> 多くの端末コマンドでは、アスタリスクを「ワイルドカード」文字として使用できます。これは、「任意の文字列」を意味します。これにより、潜在的に多数のファイルに対して一度に操作を実行でき、そのすべてが指定されたパターンに一致します。例として、 `rm mdn-*` は `mdn-` で始まるすべてのファイルを削除します。`rm mdn-*.bak` は、 `mdn-`で始まり `.bak` で終わるすべてのファイルを削除します。
 
 ## 端末 — 有害と見なされますか?
 
@@ -390,7 +396,8 @@ Stdin is read if it is piped to Prettier and no files are given.
 たとえそれが長くても、少なくとも使用法情報に目を通すことは常に価値があります。
 ツールがどのように使用されることを意図しているかをよりよく理解するのに役立ちます。
 
-> **メモ:** 最初に Prettier をローカルにインストールしていない場合、`npx prettier` を実行すると、*そのコマンドだけ*で、Prettier の最新バージョンがダウンロードされて実行されます。
+> [!NOTE]
+> 最初に Prettier をローカルにインストールしていない場合、`npx prettier` を実行すると、*そのコマンドだけ*で、Prettier の最新バージョンがダウンロードされて実行されます。
 > 素晴らしいと思われるかもしれませんが、Prettier の新しいバージョンでは出力がわずかに変更される場合があります。
 > ローカルにインストールして、フォーマットに使用している Prettier のバージョンを変更する準備が整うまで修正します。
 
diff --git a/files/ja/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md b/files/ja/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
index 0bbab5bf542a03..58dbdaf09f8e7a 100644
--- a/files/ja/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
+++ b/files/ja/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
@@ -132,7 +132,8 @@ git status
    git commit -m 'committing initial code'
    ```
 
-   > **メモ:** コミットメッセージには自由に何を書き込んでも構いませんが、適切なコミットメッセージに関する役立つヒントがウェブ上にいくつかあります。変更の内容を明確に説明できるように、短く簡潔に説明するようにしてください。
+   > [!NOTE]
+   > コミットメッセージには自由に何を書き込んでも構いませんが、適切なコミットメッセージに関する役立つヒントがウェブ上にいくつかあります。変更の内容を明確に説明できるように、短く簡潔に説明するようにしてください。
 
 3. 最後にコードを GitHub でホストされているリポジトリーにプッシュする必要があります。今すぐそうしましょう。
    GitHub で <https://github.com/new> にアクセスし、このコードをホストする独自のリポジトリーを作成します。
@@ -165,11 +166,13 @@ git status
 
    この時点で、 Git がプッシュの送信を許可する前に、ユーザー名とパスワードの入力を求められます。これは、前のスクリーンショットに見られるように、 SSH オプションではなく HTTPS オプションを使用したためです。このためには、 GitHub ユーザー名が必要です。次に、 2 要素認証 (2FA) が有効になっていない場合は、 GitHub パスワードが必要です。可能であれば 2FA を使用することを常にお勧めしますが、その場合は「個人アクセストークン」も使用する必要があることに注意してください。 GitHub のヘルプページには、[その入手方法を説明する優れた簡単なチュートリアル](https://docs.github.com/en/authentication/keeper-your-account-and-data-secure/creating-a-personal-access)が記載されています。
 
-> **メモ:** SSH オプションを使用して、GitHub にプッシュするたびにユーザー名とパスワードを入力する必要をなくすことに興味がある場合は、 [このチュートリアルでその方法を説明します](https://docs.github.com/en/authentication/) 。
+> [!NOTE]
+> SSH オプションを使用して、GitHub にプッシュするたびにユーザー名とパスワードを入力する必要をなくすことに興味がある場合は、 [このチュートリアルでその方法を説明します](https://docs.github.com/en/authentication/) 。
 
 この最後のコマンドは、ブランチ `main` を使用して、 `github` と呼ばれる「リモート」の場所（github.com でホストされているリポジトリーです。好きな名前にすることができます）にコードをプッシュする（別名パブリッシュする）ように git に指示します。ブランチにはまったく遭遇しませんでしたが、 `main` ブランチが作業のデフォルトの場所であり、git がそこから開始されます。これは Netlify が検索するデフォルトのブランチでもあり、便利です。
 
-> **メモ:** 2020 年 10 月まで、GitHub のデフォルト ブランチは `master` でしたが、さまざまな社会的理由により `main` に切り替えられました。この古いデフォルトブランチは、遭遇するさまざまなプロジェクトに表示される可能性があることに注意してください。ただし、独自のプロジェクトには `main` を使用することをお勧めします。
+> [!NOTE]
+> 2020 年 10 月まで、GitHub のデフォルト ブランチは `master` でしたが、さまざまな社会的理由により `main` に切り替えられました。この古いデフォルトブランチは、遭遇するさまざまなプロジェクトに表示される可能性があることに注意してください。ただし、独自のプロジェクトには `main` を使用することをお勧めします。
 
 プロジェクトを Git でコミットし、GitHub リポジトリーにプッシュしたら、ツールチェーンの次のステップは、GitHub を Netlify に接続して、プロジェクトをウェブ上でライブデプロイできるようにすることです。
 
@@ -177,7 +180,8 @@ git status
 
 GitHub から Netlify へのデプロイは、手順さえわかれば、特にこのプロジェクトのような「静的ウェブサイト」の場合、驚くほど簡単です。
 
-> **メモ:** 開発ワークフローの改善に役立つ [Netlify のガイドとチュートリアル](https://www.netlify.com/blog/tutorials/)も多数あります。
+> [!NOTE]
+> 開発ワークフローの改善に役立つ [Netlify のガイドとチュートリアル](https://www.netlify.com/blog/tutorials/)も多数あります。
 
 これをやってみましょう。
 
diff --git a/files/ja/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md b/files/ja/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
index 66a66f9f89d130..201897aff88802 100644
--- a/files/ja/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
+++ b/files/ja/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
@@ -28,7 +28,8 @@ l10n:
 
 ツールとその使用方法の組み合わせは実際に無限にあります。この記事と次の記事で説明したことは、プロジェクトで注目のツールを使用できる _1 つの_ 方法にすぎません。
 
-> **メモ:** これらのツールのすべてをコマンドラインで実行する必要があるわけではないことも繰り返し述べておきます。 現在のコードエディター (VS Code など) の _多く_ は、プラグインを介して多数のツールの統合をサポートしています。
+> [!NOTE]
+> これらのツールのすべてをコマンドラインで実行する必要があるわけではないことも繰り返し述べておきます。 現在のコードエディター (VS Code など) の _多く_ は、プラグインを介して多数のツールの統合をサポートしています。
 
 ## ツールチェーンのケーススタディの事例紹介
 
@@ -106,7 +107,8 @@ l10n:
 
 第 2 章で初めて説明した npm を使用してツールをインストールします。Node.js と npm がすでにインストールされている必要がありますが、インストールされていない場合は、[そのセクションを参照してください](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups)。
 
-> **メモ:** インストールプロセスから分かりませんが、 npm をインストールすると、 npx と呼ばれる補完ツールもインストールされます。 この章の後半では、プロジェクトのローカル依存関係としてインストールされているツールの実行に役立つ npx を使用します。
+> [!NOTE]
+> インストールプロセスから分かりませんが、 npm をインストールすると、 npx と呼ばれる補完ツールもインストールされます。 この章の後半では、プロジェクトのローカル依存関係としてインストールされているツールの実行に役立つ npx を使用します。
 
 npm は、ツールチェーンの後続の部分をインストールするために使用されます。 ただし、まず最初に、リビジョン管理を支援するために git をインストールします。
 
@@ -152,7 +154,8 @@ Prettier がインストールされたので、コンピューター上のど
 prettier --write ./src/index.html
 ```
 
-> **メモ:** 上記のコマンドでは、 `--write` フラグを指定して Prettier を使用しています。 Prettier は、これが「コードフォーマットに問題があれば、それを修正してからファイルを保存してください」という意味であると理解しています。これは開発プロセスには問題ありませんがフラグなしで `prettier` を使用することもでき、ファイルのチェックのみが行われます。ファイルをチェックする(保存しない)ことはリリース前に実行されるチェック、つまり「適切にフォーマットされていないコードをリリースしない」などの目的に役立ちます。
+> [!NOTE]
+> 上記のコマンドでは、 `--write` フラグを指定して Prettier を使用しています。 Prettier は、これが「コードフォーマットに問題があれば、それを修正してからファイルを保存してください」という意味であると理解しています。これは開発プロセスには問題ありませんがフラグなしで `prettier` を使用することもでき、ファイルのチェックのみが行われます。ファイルをチェックする(保存しない)ことはリリース前に実行されるチェック、つまり「適切にフォーマットされていないコードをリリースしない」などの目的に役立ちます。
 
 各ファイルに対して最初のコマンドを実行するのは大変なので、これを実行する単一のコマンドがあれば便利です ( lint ツールにも同じことが言えます)。
 
@@ -162,7 +165,8 @@ prettier --write ./src/index.html
 - 特別な「 git hooks 」を使用して、コミット前にコードがフォーマットされているかどうかをテストします。
 - コードエディタープラグインを使用して、ファイルが保存されるたびに Prettier コマンドを実行します。
 
-> **メモ:** git hooks とは何ですか? Git (GitHub ではありません) は、git で実行するタスク(コードのコミットなど)にプレアクションとポストアクションを付加できるシステムを提供します。 git hooks は(この著者の意見では)少し複雑すぎるかもしれませんが、一度導入すると非常に強力になります。 hooks の使用に興味がある場合は、 [Husky](https://github.com/typicode/husky) を参照すると、 hooks を使用するためのルートが大幅に簡素化されます。
+> [!NOTE]
+> git hooks とは何ですか? Git (GitHub ではありません) は、git で実行するタスク(コードのコミットなど)にプレアクションとポストアクションを付加できるシステムを提供します。 git hooks は(この著者の意見では)少し複雑すぎるかもしれませんが、一度導入すると非常に強力になります。 hooks の使用に興味がある場合は、 [Husky](https://github.com/typicode/husky) を参照すると、 hooks を使用するためのルートが大幅に簡素化されます。
 
 VS Code の場合、便利な拡張機能の 1 つは [Prettier Code Formatter by Esben Petersen](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) です。これを使うと、VSCode は保存時にコードを自動的に整形してくれます。これは、HTML、CSS、JavaScript、JSON、マークダウンなど、作業中のプロジェクト内のすべてのファイルが適切にフォーマットされることを意味します。エディターに必要なのは、「 Format On Save 」を有効にすることだけです。
 
@@ -196,7 +200,8 @@ ESLint は npm 経由でインストールされるため、第 2 章の説明
 ✖ 3 problems (3 errors, 0 warnings)
 ```
 
-> **メモ:** 次の節で ESLint をインストールしますが、今は気にしないでください。
+> [!NOTE]
+> 次の節で ESLint をインストールしますが、今は気にしないでください。
 
 他のツールと同様にコードエディターとの統合サポートは通常 ESLint に適しており、問題が発生したときにリアルタイムのフィードバックを提供できるため、より便利になる可能性があります。
 
@@ -256,7 +261,8 @@ OK、プロジェクトの初期設定を済ませましょう。
 
 これでプロジェクトのファイルが揃いました。これでとりあえずは完了です！
 
-> **メモ:** ローカルマシンでプロジェクトをセットアップするには、解凍したフォルダーのルートディレクトリーに移動し、その場所で端末を開き、端末で `npm install` コマンドを実行する。これにより、 `package.json` ファイルに記載されているプロジェクトの依存関係がすべてインストールされます。
+> [!NOTE]
+> ローカルマシンでプロジェクトをセットアップするには、解凍したフォルダーのルートディレクトリーに移動し、その場所で端末を開き、端末で `npm install` コマンドを実行する。これにより、 `package.json` ファイルに記載されているプロジェクトの依存関係がすべてインストールされます。
 
 #### ツールのインストール
 
@@ -418,7 +424,8 @@ npm install --save-dev parcel-bundler
 
    Parcel は、react、react-dom、react-async-hook、date-fns、およびformat-numberを含む、コードで使用する依存関係もインストールします。したがって、最初の実行は通常のParcelの実行よりも時間がかかります。
 
-   > **メモ:** もしプロジェクトでParcelを実行して `Error: ENOENT: no such file or directory` というエラーが表示された場合は、プロセスを<kbd>Ctrl</kbd> + <kbd>C</kbd>で停止してから再度実行してください。
+   > [!NOTE]
+   > もしプロジェクトでParcelを実行して `Error: ENOENT: no such file or directory` というエラーが表示された場合は、プロセスを<kbd>Ctrl</kbd> + <kbd>C</kbd>で停止してから再度実行してください。
 
    サーバーは現在、表示されたURL（この場合は localhost:1234）で実行されています。
 
diff --git a/files/ja/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md b/files/ja/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md
index b2c7a198a82186..cfb5cca5d3956e 100644
--- a/files/ja/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md
+++ b/files/ja/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md
@@ -61,7 +61,8 @@ npm (と JavaScript と Node ベースのパッケージマネージャー) の
 
 ローカルの依存関係が本当に輝いていることを確認するには、既存のプロジェクトをダウンロードして実行するだけです。ーそれが機能し、すべての依存関係が箱から出してすぐに機能する場合、コードが移植可能であるという事実に感謝するローカル依存関係があります。
 
-> **メモ:** 利用可能なパッケージマネージャーは npm だけではありません。成功し、人気のある代替パッケージマネージャーは [Yarn](https://yarnpkg.com/) です。Yarn は別のアルゴリズムを使用して依存関係を解決します。これは、より高速なユーザー エクスペリエンスを意味します。[pnpm](https://pnpm.js.org/) など、他の多くの新しいクライアントもあります。
+> [!NOTE]
+> 利用可能なパッケージマネージャーは npm だけではありません。成功し、人気のある代替パッケージマネージャーは [Yarn](https://yarnpkg.com/) です。Yarn は別のアルゴリズムを使用して依存関係を解決します。これは、より高速なユーザー エクスペリエンスを意味します。[pnpm](https://pnpm.js.org/) など、他の多くの新しいクライアントもあります。
 
 ## パッケージレジストリー
 
@@ -202,7 +203,8 @@ Server running at http://localhost:1234
 ✨  Built in 193ms.
 ```
 
-> **メモ:** 「command not found」エラーを端末が返す場合は、上記のコマンドを `npx` ユーティリティ、つまり `npx parcel index.html`で実行してみてください。
+> [!NOTE]
+> 「command not found」エラーを端末が返す場合は、上記のコマンドを `npx` ユーティリティ、つまり `npx parcel index.html`で実行してみてください。
 
 これで、完全な JavaScript パッケージ エコシステムを活用する準備が整いました。まず、 `http://localhost:1234` で実行されているローカルウェブサーバーがあります。ここにアクセスすると、今のところ何も表示されませんが、すばらしいのは、アプリに変更を加えると、Parcel がアプリを再構築してサーバーを自動的に更新するため、更新の効果をすぐに確認できることです。
 
@@ -298,7 +300,8 @@ dist/index.html                   288 B    753ms
 
 このプロジェクトをサーバーにリリースする場合、`dist` フォルダー内のファイルのみをリリースします。Parcel は、すべてのファイル名の変更を自動的に処理してくれました。Parcel が自動的に実行した変更を確認できるように、 `dist/index.html` のソースコードを確認することをお勧めします。
 
-> **メモ:** 執筆時点では、Parcel 2 はリリースされていませんでした。ただし、Parcel の作成者はツールに少し異なる名前を付けることに良識があったため、これらのコマンドはすべて引き続き機能します。Parcel 1.x をインストールするには、 `parcel-bundler` をインストールする必要がありますが、parcel 2.x は `parcel` をインストールします。
+> [!NOTE]
+> 執筆時点では、Parcel 2 はリリースされていませんでした。ただし、Parcel の作成者はツールに少し異なる名前を付けることに良識があったため、これらのコマンドはすべて引き続き機能します。Parcel 1.x をインストールするには、 `parcel-bundler` をインストールする必要がありますが、parcel 2.x は `parcel` をインストールします。
 
 利用可能なツールはたくさんあり、JavaScript パッケージのエコシステムは前例のない速度で成長していますが、これには長所と短所があります。常に改善が行われており、良くも悪くも選択肢が増え続けています。圧倒的なツールの選択に直面した場合、おそらく最も重要な教訓は、選択したツールで何ができるかを学ぶことです。
 
@@ -318,7 +321,8 @@ npm と pnpm は、コマンド ラインの観点からは似ています。実
 
 多くの場合、インストールプロセスに関しては、yarn は npm よりも高速であると考えられています(マイレージは異なる場合があります)。依存関係のインストール(およびコンピューターへのコピー)を待つためにかなりの時間が浪費される可能性があるため、これは開発者にとって重要です。
 
-> **メモ:** npm パッケージマネージャーは、同じ名前を共有していても、npm レジストリーからパッケージをインストールする必要は**ありません**。pnpm と Yarn は、npm と同じ `package.json` 形式を使用でき、npm およびその他のパッケージレジストリーから任意のパッケージをインストールできます。
+> [!NOTE]
+> npm パッケージマネージャーは、同じ名前を共有していても、npm レジストリーからパッケージをインストールする必要は**ありません**。pnpm と Yarn は、npm と同じ `package.json` 形式を使用でき、npm およびその他のパッケージレジストリーから任意のパッケージをインストールできます。
 
 パッケージマネージャーで実行する一般的なアクションを確認しましょう。
 
diff --git a/files/ja/mdn/community/issues/index.md b/files/ja/mdn/community/issues/index.md
index 9a39647a010d24..b11fbcd416cff3 100644
--- a/files/ja/mdn/community/issues/index.md
+++ b/files/ja/mdn/community/issues/index.md
@@ -124,7 +124,8 @@ CSS プロパティページのテンプレートは[こちら](/ja/docs/MDN/Wri
 その他の種類のバグについては、[その課題を開く](#課題の報告に関するガイドライン)ことから始めてください。その課題に取り組む意思を示すコメントを追加し、可能であれば、提案する解決策や問題を修正するための手順を記述してください。
 MDN Web Docs チームがその課題が正当なものであることを確認し、提案された解決策を承認するために、その課題がトリアージされるのを待ちましょう。
 
-> **メモ:** 課題のトリアージが行われる前にプルリクエストを開くと、リンクされた課題が無効と判断されたり、解決策が MDN Web Docs チームが期待するものと一致しない場合、あなたの時間と労力が無駄になってしまう可能性があります。
+> [!NOTE]
+> 課題のトリアージが行われる前にプルリクエストを開くと、リンクされた課題が無効と判断されたり、解決策が MDN Web Docs チームが期待するものと一致しない場合、あなたの時間と労力が無駄になってしまう可能性があります。
 > 課題のトリアージが完了したら、その課題を自分に割り当ててください。
 
 [課題に取り組む際のガイドライン](#課題を作業するためのガイドライン)を使用し、以下のように適切なソースを更新して、問題を修正するようにしてください。
@@ -222,4 +223,5 @@ MDN Web Docs の GitHub 組織のメンテナーまたはオーナーであれ
 - `document not written`: 課題がまだ書かれていない必要な文書に関係している場合、通常はリンクがその文書を指しているため、このラベルを設定します。
 - `needs content update`: `mdn/content` リポジトリーと同様の修正を他のリポジトリーに行う必要がある場合の課題に、このラベルを設定してください。
 
-  > **メモ:** トリアージプロセスが完了したら、 `needs triage` のラベルを剥がしてください。
+  > [!NOTE]
+  > トリアージプロセスが完了したら、 `needs triage` のラベルを剥がしてください。
diff --git a/files/ja/mdn/community/learn_forum/index.md b/files/ja/mdn/community/learn_forum/index.md
index 9cb32bbb0f57cb..aad7823531a3d2 100644
--- a/files/ja/mdn/community/learn_forum/index.md
+++ b/files/ja/mdn/community/learn_forum/index.md
@@ -35,4 +35,5 @@ MDN でウェブ開発を学ぶセクションに現れるトピックに基づ
 
 もし何か助けが必要な場合は、[コミュニケーション手段](/ja/docs/MDN/Community/Communication_channels)で助けを求めてください。
 
-> **メモ:** 重要: 何よりも、忍耐強く、友好的で、親切であること。忘れないでください — これらの人々のほとんどは初心者です。
+> [!NOTE]
+> 重要: 何よりも、忍耐強く、友好的で、親切であること。忘れないでください — これらの人々のほとんどは初心者です。
diff --git a/files/ja/mdn/community/roles_teams/index.md b/files/ja/mdn/community/roles_teams/index.md
index 5c51539b220d6f..e8b5d5cf532715 100644
--- a/files/ja/mdn/community/roles_teams/index.md
+++ b/files/ja/mdn/community/roles_teams/index.md
@@ -110,7 +110,8 @@ What info needs to be retained? Should we use the term 'partner maintainer' or i
 - 自分のプロジェクトに月 16 時間以上作業することに同意していること。
 - 2 ヶ月に 1 度開催されるコミュニティミーティングに参加している。
 
-> **メモ:** この役割にふさわしいと思う人がいれば、[メンテナーを推薦](#メンテナーを推薦)することができます。
+> [!NOTE]
+> この役割にふさわしいと思う人がいれば、[メンテナーを推薦](#メンテナーを推薦)することができます。
 
 **権限:**
 
@@ -121,7 +122,8 @@ What info needs to be retained? Should we use the term 'partner maintainer' or i
 オーナーは、ユーザーと [GitHub チーム](https://github.com/orgs/mdn/teams)の管理、[MDN 組織](https://github.com/mdn)内のリポジトリーへのアクセスの管理、リポジトリー設定の管理、本番環境への展開など、幅広い権限を持ちます。
 オーナーは、他の協力者ロールのすべての要件に拘束されます。
 
-> **メモ:** オーナーの役割は、現在は Mozilla スタッフに限定されています。
+> [!NOTE]
+> オーナーの役割は、現在は Mozilla スタッフに限定されています。
 
 **要件:**
 
diff --git a/files/ja/mdn/writing_guidelines/attrib_copyright_license/index.md b/files/ja/mdn/writing_guidelines/attrib_copyright_license/index.md
index 86a00f6dde8fe1..ca947df86c06ce 100644
--- a/files/ja/mdn/writing_guidelines/attrib_copyright_license/index.md
+++ b/files/ja/mdn/writing_guidelines/attrib_copyright_license/index.md
@@ -15,7 +15,8 @@ MDN Web Docs のコンテンツは無料で利用でき、様々なオープン
 
 #### ドキュメント
 
-> **メモ:** MDN Web Docs のコンテンツは、 Mozilla の内外の執筆者の協力により作成されています。特に明記されていない限り、コンテンツは [Creative Commons Attribution-ShareAlike license](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA), v2.5 もしくはそれ以上のバージョンの条件の下で利用可能です。
+> [!NOTE]
+> MDN Web Docs のコンテンツは、 Mozilla の内外の執筆者の協力により作成されています。特に明記されていない限り、コンテンツは [Creative Commons Attribution-ShareAlike license](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA), v2.5 もしくはそれ以上のバージョンの条件の下で利用可能です。
 
 ここでのコンテンツの再利用は、元のコンテンツと同じライセンス、CC-BY-SA v2.5 またはそれ以降のバージョン、の下で公開する必要があります。 MDN Web Docs のコンテンツを再利用する場合、"Mozilla Contributors" だけでなく、元ののコンテンツにも帰属することを確認する必要があります。出典となるコンテンツの特定のページへのハイパーリンク（オンライン）または URL （印刷物）入れてください。例：この記事の帰属表示を提供するには、次のように書きます。
 
@@ -35,7 +36,8 @@ MDN Web Docs のコンテンツは無料で利用でき、様々なオープン
 
 MDN Web Docs に協力したい場合は、 Attribution-ShareAlike ライセンス（または編集中のページで既に指定されている代替ライセンス）で文書を公開し、サンプルコードは [Creative Commons CC-0](https://creativecommons.org/publicdomain/zero/1.0/) （パブリックドメインへの寄付）で公開する必要があります。
 
-> **警告:** 新しいページをその他のライセンスで作成してはいけません。
+> [!WARNING]
+> 新しいページをその他のライセンスで作成してはいけません。
 
 **ユーザーから提供された資料の著作権については、著作者がそれを第三者に譲渡しない限り、著作者に帰属するものとします。**
 
@@ -53,7 +55,8 @@ MDN は可能な限り独自のコンテンツで構成すべきです。
 
 ### コンテンツを再利用または転載する場合
 
-> **メモ:** コンテンツを転載する正当な理由がない限り、私たちはおそらく「ノー」と言います。
+> [!NOTE]
+> コンテンツを転載する正当な理由がない限り、私たちはおそらく「ノー」と言います。
 > MDN 執筆チームの決定は最終的なものです。
 
 誰かが以前自分のブログで公開した記事を MDN に寄贈したい場合や、複雑なリファレンスシートを MDN にコピーする意味がある場合、転載する正当な理由があるかもしれません。このような場合は、事前に MDN チームに相談してください。
diff --git a/files/ja/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md b/files/ja/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
index dac90ead3c3f43..eed1089e86a1ea 100644
--- a/files/ja/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
+++ b/files/ja/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
@@ -21,7 +21,8 @@ MDN Web Docs で、ある技術が実験的 (experimental) と記述されてい
 - 対応するレンダリングエンジンの数に関係なく、環境設定やフラグなどの設定変更によってのみ対応している。
 - 定義している仕様が、後方互換性のない方法で大幅に変更される可能性がある（つまり、その機能に依存する既存のコードを破壊する可能性がある）。
 
-> **メモ:** 1 つのレンダリングエンジンでしかリリースされていない機能は、他のレンダリングエンジンのプレビュービルドで（あるいは環境設定やフラグを設定することで）利用できても、実験的とみなされます。
+> [!NOTE]
+> 1 つのレンダリングエンジンでしかリリースされていない機能は、他のレンダリングエンジンのプレビュービルドで（あるいは環境設定やフラグを設定することで）利用できても、実験的とみなされます。
 
 以下の条件を 1 つ以上満たす場合、技術の**実験的**の状態ではなくなる可能性があります。
 
@@ -47,7 +48,8 @@ MDN Web Docs で非推奨 (**deprecated**) という用語は、推奨されな
 MDN Web Docs において、廃止 (**obsolete**) という用語は、過去には、もう推奨されないだけでなく、ブラウザーに実装されなくなった API や技術を示すために使用されていました。
 **廃止**と**非推奨**の区別はあまり有益ではないため、 MDN Web Docs では**廃止**という用語は使用しなくなりました。
 
-> **メモ:** もし、**廃止**の用語を見つけたら、それを削除するか、**非推奨**という言葉で置き換えてください。
+> [!NOTE]
+> もし、**廃止**の用語を見つけたら、それを削除するか、**非推奨**という言葉で置き換えてください。
 
 ## コンテンツ削除のガイドライン
 
@@ -55,7 +57,8 @@ MDN Web Docs において、廃止 (**obsolete**) という用語は、過去に
 
 ここでは、何かが仕様から削除されたときにどうするかを決定するのに役立つガイドラインをいくつか紹介します。
 
-> **メモ:** この説明では、「アイテム」という言葉は、要素や要素の属性、インターフェイスや個々のメソッド、プロパティ、インターフェイスの他にもメンバーなど、仕様の一部となり得る何らかのものを意味して使用されています。
+> [!NOTE]
+> この説明では、「アイテム」という言葉は、要素や要素の属性、インターフェイスや個々のメソッド、プロパティ、インターフェイスの他にもメンバーなど、仕様の一部となり得る何らかのものを意味して使用されています。
 
 ### アイテムが実装されなかった場合
 
@@ -101,7 +104,8 @@ MDN Web Docs において、廃止 (**obsolete**) という用語は、過去に
 このような場合、何が真実なのか、例えば、ブラウザーは実際にどうしているかを考慮し、「重要」なメモを書いて最新の状態を要約してください。
 例えば、 2019 年 1 月時点の [`inputmode`](/ja/docs/Web/HTML/Global_attributes/inputmode) グローバル属性には競合があり、次のように要約されています。<!-- この仕様の競合に関する警告例は、そのページにはもう存在しません。他に例を見つけることもできませんでした。 -->
 
-> **警告:** 仕様の競合があります。 WHATWG 仕様では [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode) がリストアップされており、最近のブラウザーはこれに対応する方向で動いています。
+> [!WARNING]
+> 仕様の競合があります。 WHATWG 仕様では [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode) がリストアップされており、最近のブラウザーはこれに対応する方向で動いています。
 > しかし [W3C HTML 5.2 仕様書](https://html.spec.whatwg.org/multipage/index.html#contents)ではこれをリストアップしていません（つまり廃止とマークしています）。
 > 合意が得られるまでは、 WHATWG の定義が正しいと考えるべきでしょう。
 
diff --git a/files/ja/mdn/writing_guidelines/howto/creating_moving_deleting/index.md b/files/ja/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
index 2f9d092ce8e4cc..e9eef64494ad9b 100644
--- a/files/ja/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
@@ -11,12 +11,14 @@ l10n:
 
 ## ページの作成
 
-> **注目:** 訳注:
+> [!CALLOUT]
+> 訳注:
 > この記事は英語版のページを作成する方法を示しています。翻訳記事を作成する場合は、 [MDN Web Docs のローカライズ](/ja/docs/MDN/Community/Contributing/Translated_content)を参照してください。
 
 MDN Web Docs のすべてのページは Markdown 形式で書かれています。内容は `index.md` という名前のファイルに書かれ、自分自身で固有のディレクトリーに格納されます。ディレクトリー名はページの名前を表します。例えば、 `align-content` が新しい CSS プロパティであり、新しいリファレンスページを作成したい場合、 `en-us/web/css` に `align-content` という名前のフォルダーを作成し、その中に `index.md` という名前のファイルを作成してください。
 
-> **メモ:** ディレクトリーの名前はページのスラッグとは少し異なります。特に、スラッグは文章の大文字小文字の規則に従います。
+> [!NOTE]
+> ディレクトリーの名前はページのスラッグとは少し異なります。特に、スラッグは文章の大文字小文字の規則に従います。
 
 たくさんの異なる[ページの種類](/ja/docs/MDN/Writing_guidelines/Page_structures/Page_types)があり、特定の構造とそれに対応しているページテンプレートがありますので、取りかかる場合はそれをコピーしてください。
 
@@ -108,7 +110,8 @@ MDN Web Docs から文書を除去されるべきなのは、特別な事情が
 yarn content delete <document-slug> [locale]
 ```
 
-> **メモ:** MDN Web Docs からページを削除するには `yarn content delete` コマンドを使用する必要があります。リポジトリーからディレクトリーを削除するだけではいけません。 `yarn content delete` コマンドは `_wikihistory.json` ファイルの更新など、他にも必要な変更を処理します。
+> [!NOTE]
+> MDN Web Docs からページを削除するには `yarn content delete` コマンドを使用する必要があります。リポジトリーからディレクトリーを削除するだけではいけません。 `yarn content delete` コマンドは `_wikihistory.json` ファイルの更新など、他にも必要な変更を処理します。
 
 削除したい既存の文書のスラッグ（例: `Learn/Accessibility`）を指定し、オプションで既存の文書のロケール（既定では `en-US`）を続けてください。
 
@@ -149,7 +152,8 @@ yarn content delete <document-slug> [locale]
 
 5. プルリクエストを作成します。
 
-> **メモ:** 削除したいページのスラッグに特殊文字が格納されている場合は、次のように引用符で囲んで記述してください。
+> [!NOTE]
+> 削除したいページのスラッグに特殊文字が格納されている場合は、次のように引用符で囲んで記述してください。
 >
 > ```bash
 > yarn content delete "Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50)"
diff --git a/files/ja/mdn/writing_guidelines/howto/document_a_css_property/index.md b/files/ja/mdn/writing_guidelines/howto/document_a_css_property/index.md
index 8d5af91ab9289f..b71971b2185542 100644
--- a/files/ja/mdn/writing_guidelines/howto/document_a_css_property/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/document_a_css_property/index.md
@@ -15,7 +15,8 @@ l10n:
 
 まず、どのプロパティを文書化するかを決定する必要があります。ページが欠けていることに気づいたり、[問題リスト](https://github.com/mdn/content/issues)で報告されているコンテンツの欠落を見たことがあるかもしれません。 CSS プロパティの詳細については、その関連する仕様（たとえば [W3C 仕様](https://www.w3.org/Style/CSS/) や、Gecko や Blink などのレンダリングエンジンで使われている非標準のプロパティに関するバグレポート）を見つける必要があります。
 
-> **メモ:** W3C の仕様を使うときは、常に **Editor's Draft** （左側の赤いバナーに注目してください）を使用し、公開版（例: Working Draft）は使用しないでください。 Editor's Draft は常に最終版に近いのです。
+> [!NOTE]
+> W3C の仕様を使うときは、常に **Editor's Draft** （左側の赤いバナーに注目してください）を使用し、公開版（例: Working Draft）は使用しないでください。 Editor's Draft は常に最終版に近いのです。
 
 実装と仕様が乖離している場合、遠慮なく実装のバグに言及してください。以下のようなことが起きている可能性があります。
 
diff --git a/files/ja/mdn/writing_guidelines/howto/images_media/index.md b/files/ja/mdn/writing_guidelines/howto/images_media/index.md
index 5c6dbb291f1e1f..fa07109b9c230e 100644
--- a/files/ja/mdn/writing_guidelines/howto/images_media/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/images_media/index.md
@@ -121,7 +121,8 @@ MDN Web Docs は動画が多いサイトではありませんが、動画コン
 - 動画にはアクセシビリティの問題があります。一般にテキストよりも制作費がかかりますが、特にローカライズやスクリーンリーダーの利用者が使えるようにするのが大変です。
 - 最後の点に加えて、動画は、テキストコンテンツよりも編集・更新・保守がはるかに困難です。
 
-> **メモ:** 動画を作るときにも、これらの問題を念頭に置いて、少しでも軽減できるように工夫するとよいでしょう。
+> [!NOTE]
+> 動画を作るときにも、これらの問題を念頭に置いて、少しでも軽減できるように工夫するとよいでしょう。
 
 多くの人気の動画サイトがあり、多くの動画チュートリアルを提供しています。
 MDN は動画主体のサイトではありませんが、動画は特定の文脈で MDN に登場することがあります。
@@ -222,7 +223,8 @@ macOS をお使いの場合は、 QuickTime Player が利用できるはずで
   すべての人が高解像度で動画を見ることができるわけではありません。
   後処理で特定の部分をズームすることができますが、事前にアプリをズームするのも良い考えです。
 
-> **メモ:** あまりにズームしすぎて、見せている UI が見慣れなくなったり、醜く見えたりならないようにしてください。
+> [!NOTE]
+> あまりにズームしすぎて、見せている UI が見慣れなくなったり、醜く見えたりならないようにしてください。
 
 ### 録画
 
@@ -232,7 +234,8 @@ macOS をお使いの場合は、 QuickTime Player が利用できるはずで
 
 最後に 1 ～ 2 秒の間を置いて、流れの結果を示すことを忘れないでください。
 
-> **メモ:** QuickTime Player のような本当にシンプルなツールを使っていて、何らかの理由で後処理ができない場合、見せたい領域を表示するために正しいサイズのウィンドウをセットアップしておく必要があります。 Firefox DevTools の [Rulers Tool](https://firefox-source-docs.mozilla.org/devtools-user/rulers/index.html) を使うと、ビューポートが録画に適したアスペクト比になっていることを確認することができます。
+> [!NOTE]
+> QuickTime Player のような本当にシンプルなツールを使っていて、何らかの理由で後処理ができない場合、見せたい領域を表示するために正しいサイズのウィンドウをセットアップしておく必要があります。 Firefox DevTools の [Rulers Tool](https://firefox-source-docs.mozilla.org/devtools-user/rulers/index.html) を使うと、ビューポートが録画に適したアスペクト比になっていることを確認することができます。
 
 ### 後処理
 
@@ -255,7 +258,8 @@ macOS をお使いの場合は、 QuickTime Player が利用できるはずで
 現在 MDN で動画を表示するには YouTube にアップロードする必要があります。例えば [mozhacks](https://www.youtube.com/user/mozhacks/videos) チャンネルなどです。
 もし適切な場所がなければ、 MDN スタッフにアップロードを依頼してください。
 
-> **メモ:** 動画がページの文脈から意味をなさない場合は "unlisted" としてマークしてください（短い動画であれば、おそらく意味をなさないでしょう）。
+> [!NOTE]
+> 動画がページの文脈から意味をなさない場合は "unlisted" としてマークしてください（短い動画であれば、おそらく意味をなさないでしょう）。
 
 ### 埋め込み
 
diff --git a/files/ja/mdn/writing_guidelines/howto/index.md b/files/ja/mdn/writing_guidelines/howto/index.md
index 48b503d0cd6d21..a44d4ed18a3ece 100644
--- a/files/ja/mdn/writing_guidelines/howto/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/index.md
@@ -9,6 +9,7 @@ l10n:
 
 MDN Web Docs 執筆ガイドラインのこの章では、MDN Web Docs に協力する際の固有のタスクを達成するためのすべてのステップバイステップ情報を掲載しています。マークダウンの使用方法、用語集への項目の追加方法、ページの移動や削除方法などなどです。（GitHub を通して行う）協力の方法についての詳細は、[協力ガイドライン](/ja/docs/MDN/Community/Contributing)をご覧ください。
 
-> **メモ:** この章では、あなたが協力ガイドラインをすべて読み、`mdn/content` リポジトリーを熟知し、git と GitHub の使用方法を知っていることを想定しています。
+> [!NOTE]
+> この章では、あなたが協力ガイドラインをすべて読み、`mdn/content` リポジトリーを熟知し、git と GitHub の使用方法を知っていることを想定しています。
 
 {{LandingPageListSubpages}}
diff --git a/files/ja/mdn/writing_guidelines/howto/json_structured_data/index.md b/files/ja/mdn/writing_guidelines/howto/json_structured_data/index.md
index 7196eb1f4abe94..08376a3fbf4e36 100644
--- a/files/ja/mdn/writing_guidelines/howto/json_structured_data/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/json_structured_data/index.md
@@ -21,7 +21,8 @@ GroupData はまさにそれを行います。それぞれの API について
 
 ### GroupData の構造
 
-> **警告:** このファイルに掲載されている存在しないファイルは無視されます（en-US では）。
+> [!WARNING]
+> このファイルに掲載されている存在しないファイルは無視されます（en-US では）。
 
 `GroupData.json` の項目は次のような構造です。
 
@@ -55,7 +56,8 @@ GroupData はまさにそれを行います。それぞれの API について
 
 - `"API_の名前"`
   - : このキーは `\{{APIRef("API_の名前")}}` のようなサイドバーマクロで使用する ID であり、サイドバー自体に表示される名前でもあります。賢く選んでください。
-    > **警告:** サイドバーに表示される名前を変更したい場合は、その名前を表示しているすべてのページを編集する必要があります。
+    > [!WARNING]
+    > サイドバーに表示される名前を変更したい場合は、その名前を表示しているすべてのページを編集する必要があります。
 - `"overview"`
   - : これは 1 つのページ、概要ページを格納するリストです。 `"API_の名前"` テキストのリンクとして使用します。値はページのタイトルで、ページは `web/api/` ディレクトリーになければなりません。
 - `"guides"`
@@ -74,7 +76,8 @@ GroupData はまさにそれを行います。それぞれの API について
 
 他の 2 つのキー、 `"dictionaries"` と `"callbacks"` がありますが、同じ原理で処理します。これらのエンティティを自分自身のページで文書化しなくなりましたので、これらの使用は非推奨です。また、新しい項目を追加するべきではありません（少しずつ除去していきます）。
 
-> **メモ:** また、どのキーも必須ではありません。 非推奨でないものは省略するのではなく、空リストで追加するのがよい習慣です（これを強制する予定です）。これは、値がないことが意識的な選択であることを示すものです。
+> [!NOTE]
+> また、どのキーも必須ではありません。 非推奨でないものは省略するのではなく、空リストで追加するのがよい習慣です（これを強制する予定です）。これは、値がないことが意識的な選択であることを示すものです。
 
 ### GroupData の更新プロセス
 
@@ -86,7 +89,8 @@ GroupData はまさにそれを行います。それぞれの API について
 
 ## InterfaceData: インターフェイスの継承の記録
 
-> **メモ:** 将来的には、 w3c/webref で利用できるデータからこのファイルを自動生成したいと思っています。
+> [!NOTE]
+> 将来的には、 w3c/webref で利用できるデータからこのファイルを自動生成したいと思っています。
 
 `InterfaceData` はインターフェイスの階層構造を記述しています。継承が掲載されています。以前は、それぞれのインターフェイスで実装されている ミックスインも掲載されていました。しかし、この使い方は非推奨です。 MDN が更新されるのと同じペースで、このファイルからミックスインを除去します。
 
@@ -103,7 +107,8 @@ GroupData はまさにそれを行います。それぞれの API について
 }
 ```
 
-> **メモ:** ミックスインは非推奨です。新しいインターフェイスでは、 `"impl"` はすべて空リストでなければなりません。
+> [!NOTE]
+> ミックスインは非推奨です。新しいインターフェイスでは、 `"impl"` はすべて空リストでなければなりません。
 
 `"親インターフェイスの名前"` の値はリストではなく単一の項目で、必須です。他のインターフェイスを継承していないインターフェイスを掲載してはいけません。
 
diff --git a/files/ja/mdn/writing_guidelines/howto/markdown_in_mdn/index.md b/files/ja/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
index 669439299e41b4..2bd03ca8453060 100644
--- a/files/ja/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
@@ -196,7 +196,8 @@ const greeting = "I'm a bad example";
 #### メモ（英語版では Note）
 
 ```md
-> **メモ:** これがメモの書き方です。
+> [!NOTE]
+> これがメモの書き方です。
 >
 > 複数行を入れることもできます。
 ```
@@ -212,14 +213,16 @@ const greeting = "I'm a bad example";
 
 この HTML は次のように、強調ボックスとして描画されます。
 
-> **メモ:** これがメモの書き方です。
+> [!NOTE]
+> これがメモの書き方です。
 >
 > 複数行を入れることもできます。
 
 #### 警告（英語版では Warning）
 
 ```md
-> **警告:** これが警告の書き方です。
+> [!WARNING]
+> これが警告の書き方です。
 >
 > 複数の段落を入れることもできます。
 ```
@@ -235,7 +238,8 @@ const greeting = "I'm a bad example";
 
 この HTML は次のように、強調ボックスとして描画されます。
 
-> **警告:** これが警告の書き方です。
+> [!WARNING]
+> これが警告の書き方です。
 >
 > 複数の段落を入れることもできます。
 
@@ -258,7 +262,7 @@ const greeting = "I'm a bad example";
 
 この HTML は次のように、強調ボックスとして描画されます。
 
-> **注目:**
+> [!CALLOUT]
 >
 > **これがコールアウトの書き方です。**
 >
@@ -273,7 +277,8 @@ const greeting = "I'm a bad example";
 例えば、ドイツ語の "Warnung" を "Warning" に使用した場合、ドイツ語のページではこう書きます。
 
 ```md
-> **Warnung:** So schreibt man eine Warnung.
+> [!WARNING]
+> So schreibt man eine Warnung.
 ```
 
 これは次のように表示されます。
@@ -289,7 +294,8 @@ const greeting = "I'm a bad example";
 この例はコードブロックを含んでいます。
 
 ````md
-> **メモ:** これがメモの書き方です。
+> [!NOTE]
+> これがメモの書き方です。
 >
 > コードブロックを含むことができます。
 >
@@ -313,7 +319,8 @@ const greeting = "I'm a bad example";
 
 この HTML は次のようにコードブロックと一緒に描画されます。
 
-> **メモ:** これがメモの書き方です。
+> [!NOTE]
+> これがメモの書き方です。
 >
 > コードブロックを含むことができます。.
 >
diff --git a/files/ja/mdn/writing_guidelines/howto/research_technology/index.md b/files/ja/mdn/writing_guidelines/howto/research_technology/index.md
index 47b8bf06e2c94c..24671709c79989 100644
--- a/files/ja/mdn/writing_guidelines/howto/research_technology/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/research_technology/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{MDNSidebar}}
 
-> **注目:** 訳注:
+> [!CALLOUT]
+> 訳注:
 > MDN Web Docs では、日本語版の記事を最初から作成するのではなく、まず英語版の記事を作成してから日本語訳するようにしてください。
 
 この記事では、技術を文書化する手法についての便利な情報を提供します。
@@ -49,7 +50,8 @@ MDN Web Docs で文書化や更新を始めるには、実際に書き始める
 
 ある技術を文書化する過程で、何度もサンプルコードを書いたりデモを作ったりすることになるでしょうが、まずその技術がどのように動作するのかに親しむことから始めるのはとても有益です。これは実に有益な練習です。なぜなら、用途（開発者がこの技術を使う理由）をよく理解し、同時にサンプルコードを開発するのに役立つからです。
 
-> **メモ:** 仕様書が最近更新され、たとえば、ある手法が定義されなくなったが、古い手法がまださまざまなブラウザーで動作する、というような場合、古い手法と新しい手法をカバーするために、両方を同じ場所に文書に配置しなければならないことが多いでしょう。
+> [!NOTE]
+> 仕様書が最近更新され、たとえば、ある手法が定義されなくなったが、古い手法がまださまざまなブラウザーで動作する、というような場合、古い手法と新しい手法をカバーするために、両方を同じ場所に文書に配置しなければならないことが多いでしょう。
 > 助けが必要な場合は、入手したデモを参照するか、技術連絡先に依頼してください。
 
 ## 執筆または更新するページのリストを作成
diff --git a/files/ja/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md b/files/ja/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
index c18e02259c343a..1c79a4298114f6 100644
--- a/files/ja/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{MDNSidebar}}
 
-> **注目:** 訳注:
+> [!CALLOUT]
+> 訳注:
 > MDN Web Docs では、日本語版の記事を最初から作成するのではなく、まず英語版の記事を作成してから日本語訳するようにしてください。
 
 この記事では、 [MDN Web Docs の用語集](/ja/docs/Glossary)に項目を追加したりリンクしたりする方法について説明します。
@@ -34,7 +35,8 @@ l10n:
 できれば、 2 文以内にしてください。
 説明を読めばどんな人であってもただちに理解できるような説明であるようにしてください。
 
-> **メモ:** インターネット上にある他の定義やコンテンツをコピー＆ペーストしないでください。
+> [!NOTE]
+> インターネット上にある他の定義やコンテンツをコピー＆ペーストしないでください。
 > （特にウィキペディアは、ライセンスの版の幅が小さいため、 MDN とは互換性がありません。）用語集の項目は独自の内容にしてください。
 
 #### 良い用語集の項目を書く
diff --git a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md
index ca16ba29538b60..bf14958fe7a27f 100644
--- a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/index.md
@@ -46,7 +46,8 @@ API を文書化する過程で、何度もデモを作ることになるでし
 
 API が変更された場合、参考にしたり学んだりする既存のデモが古くなっていないか注意する必要があります。デモで使われている主な構成要素が、最新の仕様と一致しているかどうかを確認してください。また、最新のブラウザーでは動作しないかもしれませんが、後方互換性のために古い機能に対応し続けていることが多いので、これはあまり信頼できるテストではありません。
 
-> **メモ:** 最近仕様が更新され。例えばあるメソッドの定義が変わったが、古いメソッドがまだブラウザーで動作する場合、古いメソッドと新しいメソッドをカバーするために、同じ場所で両方の記事を作成しなければならないことがよくあります。
+> [!NOTE]
+> 最近仕様が更新され。例えばあるメソッドの定義が変わったが、古いメソッドがまだブラウザーで動作する場合、古いメソッドと新しいメソッドをカバーするために、同じ場所で両方の記事を作成しなければならないことがよくあります。
 > 困ったときは、見つけたデモを参考にしたり、担当のエンジニアに聞いたりしてください。
 
 ### 執筆や更新が必要な記事のリストを作成する
@@ -64,7 +65,8 @@ API リファレンスには、一般的に次のようなページが含まれ
 7. 概念/ガイドページ
 8. 例
 
-> **メモ:** この記事では。例として[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API)を参照します。
+> [!NOTE]
+> この記事では。例として[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API)を参照します。
 
 #### 概要ページ
 
@@ -95,7 +97,8 @@ API の概要ページは、 API の役割、最上位のインターフェイ
 - Slug: _AudioNode_
 - URL: [https://developer.mozilla.org/ja/docs/Web/API/AudioNode](/ja/docs/Web/API/AudioNode)
 
-> **メモ:** インターフェイスに登場するメンバーはすべて文書化します。以下のルールに留意してください。
+> [!NOTE]
+> インターフェイスに登場するメンバーはすべて文書化します。以下のルールに留意してください。
 
 - このインターフェイスを実装したオブジェクトのプロトタイプ上で定義されているメソッド（インスタンスメソッド）と、実際のクラス自身で定義されるメソッド（静的メソッド）を文書化します。
   まれに同じインターフェイスに両方が存在する場合は、ページ内で別々の節に（静的メソッド／インスタンスメソッドとして）記載します。
@@ -242,7 +245,8 @@ API ランディングページは、 API の規模によって長さが大き
    - _このインターフェイスは固有のメソッドを実装していませんが、 \\{{domxref("XYZ")}}, および \\{{domxref("XYZ2")}} からメソッドを継承しています。_
    - _このインターフェイスには \\{{domxref("XYZ")}}, および \\{{domxref("XYZ2")}} から継承したプロパティもあります。_
 
-   > **メモ:** 読み取り専用のプロパティには \\{{ReadOnlyInline}} マクロを、その \\{{domxref}} リンクと同じ行に設置すると、小さくてかっこいい「読み取り専用」バッジを生成します。（必要に応じて、\\{{experimentalInline}}, \\{{non-standard_Inline}}, \\{{deprecatedInline}} マクロの後に使用してください）。
+   > [!NOTE]
+   > 読み取り専用のプロパティには \\{{ReadOnlyInline}} マクロを、その \\{{domxref}} リンクと同じ行に設置すると、小さくてかっこいい「読み取り専用」バッジを生成します。（必要に応じて、\\{{experimentalInline}}, \\{{non-standard_Inline}}, \\{{deprecatedInline}} マクロの後に使用してください）。
 
 6. **例**: API の主要な機能の典型的な使用法を示すコードリストを入れてください。すべてのコードを列挙するのではなく、そのうちの興味深い部分のみを並べてください。完全なコードのリストを紹介する場合は。例の全体を含んだ [GitHub](https://github.com/) リポジトリーを参照することができます。また、 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) の機能を使って作成したライブサンプルにリンクすることもできます（もちろん、クライアント側のコードしか使用していなければですが）。サンプルが視覚的であれば、MDN [ライブサンプル](/ja/docs/MDN/Writing_guidelines/Page_structures/Live_samples) 機能を使ってページ内でライブ実行できるようにすることができます。
 7. **仕様書一覧表**: ここに、仕様書一覧表を入れる必要があります。詳しくは「仕様書参照表の作成」の節をご覧ください。
diff --git a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
index c9b7dc678239a3..e7a8e547a20452 100644
--- a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
@@ -29,7 +29,8 @@ WebIDL は[その仕様書](https://webidl.spec.whatwg.org/)で定義されて
 - Chromium については、 Google もその拡張機能を説明する[ドキュメント](https://www.chromium.org/blink/webidl/)を作成しました。
 - WebCore については、Apple もその方言に関する[ページ](https://trac.webkit.org/wiki/WebKitIDL)を公開しています。
 
-> **メモ:** ここでは、記事を書くときに最も役に立つ WebIDL のサブセットのみを説明します。実装者にとって便利なアノテーションは他にもたくさんあります。完全な概要を知るには、上記のリンク先の 4 つの記事を参照してください。
+> [!NOTE]
+> ここでは、記事を書くときに最も役に立つ WebIDL のサブセットのみを説明します。実装者にとって便利なアノテーションは他にもたくさんあります。完全な概要を知るには、上記のリンク先の 4 つの記事を参照してください。
 
 ## インターフェイス
 
@@ -168,7 +169,8 @@ interface DedicatedWorkerGlobalScope : WorkerGlobalScope {…}
 
 ### 設定
 
-> **メモ:** この情報は Gecko 固有のものであり、ブラウザー互換性 の節でのみ使用されるべきものです。
+> [!NOTE]
+> この情報は Gecko 固有のものであり、ブラウザー互換性 の節でのみ使用されるべきものです。
 
 Gecko では、コンストラクター、プロパティ、メソッドを含む部分インターフェイスの可用性は、プリファレンス（通常 "pref" と呼ばれます）によって制御されることがあります。これは WebIDL でもマークされています。
 
@@ -228,7 +230,8 @@ readonly attribute MediaError? error;
 - そのページの最初の文章で、説明を次のように始めてください。 _**HTMLMediaElement.error`** プロパティは読み取り専用で..._。
 - インターフェイスページの説明を _...を返します_ で始めてください。
 
-> **メモ:** 値を「返す」と表現できるのは、読み取り専用のプロパティのみです。読み取り専用でないプロパティは、値を設定するために使用することもできます。
+> [!NOTE]
+> 値を「返す」と表現できるのは、読み取り専用のプロパティのみです。読み取り専用でないプロパティは、値を設定するために使用することもできます。
 
 ### 例外の発生
 
@@ -277,7 +280,8 @@ _このプロパティは読み取り専用ですが、変更されても（厳
 
 インターフェイスオブジェクトの場合、既定では、内部オブジェクトへの参照を返すことになっています。このことは、インターフェイスページの短い説明と、特定のサブページの説明の両方で言及しなければなりません。
 
-> **メモ:** オブジェクトを返すプロパティで使われるキーワード `readonly` は、参照に適用されるものです（内部のオブジェクトは変更できません）。返されたオブジェクトのプロパティは、関連するインターフェイスで読み取り専用とされていても、変更することができます。
+> [!NOTE]
+> オブジェクトを返すプロパティで使われるキーワード `readonly` は、参照に適用されるものです（内部のオブジェクトは変更できません）。返されたオブジェクトのプロパティは、関連するインターフェイスで読み取り専用とされていても、変更することができます。
 
 API は時として、*新しい*オブジェクト、あるいは内部のオブジェクトの*コピー*を返さなければなりません。このような場合、 WebIDL では `[NewObject]` 注釈を使用します。
 
@@ -310,7 +314,8 @@ _**`HTMLMediaElement.buffered`** プロパティは読み取り専用で、新
 
 ### 環境設定
 
-> **メモ:** この情報は Gecko 固有のものであり、ブラウザー互換性の節でのみ使用すべきものです。
+> [!NOTE]
+> この情報は Gecko 固有のものであり、ブラウザー互換性の節でのみ使用すべきものです。
 
 Gecko では、いくつかのプロパティの使用可否は、環境設定によって制御されている場合があります。これは WebIDL でもマークされています。
 
@@ -321,7 +326,8 @@ Gecko では、いくつかのプロパティの使用可否は、環境設定
 
 ここで `media.webvtt.enabled` は `textTracks` プロパティを制御します。
 
-> **メモ:** 環境設定の既定値は、 WebIDL では直接利用できません（Gecko を使用する製品ごとに異なる場合があります）。
+> [!NOTE]
+> 環境設定の既定値は、 WebIDL では直接利用できません（Gecko を使用する製品ごとに異なる場合があります）。
 
 ## メソッド
 
@@ -376,7 +382,8 @@ DOMString canPlayType(DOMString type);
 
 ### 環境設定
 
-> **メモ:** この情報は Gecko 固有のものであり、ブラウザーの互換性の節でのみ使用するようにしてください。
+> [!NOTE]
+> この情報は Gecko 固有のものであり、ブラウザーの互換性の節でのみ使用するようにしてください。
 
 Gecko では、いくつかのメソッドの利用可否は環境設定によって制御される場合があります。これは WebIDL でもマークされています。
 
@@ -389,7 +396,8 @@ Gecko では、いくつかのメソッドの利用可否は環境設定によ
 
 ここでは `media.webvtt.enabled` が `addTextTrack()` メソッドを制御しています。
 
-> **メモ:** 環境設定の既定値は、WebIDL では直接利用できません（Gecko を使用する製品ごとに異なる場合があります）。
+> [!NOTE]
+> 環境設定の既定値は、WebIDL では直接利用できません（Gecko を使用する製品ごとに異なる場合があります）。
 
 ## 特殊なメソッド
 
@@ -414,7 +422,8 @@ serializer; // 標準版
 
 `toJSON()` メソッドは他のインターフェイスのメソッドと同様に掲載され、独自のサブページがあります（例: {{domxref("Performance.toJSON()") }}）。
 
-> **メモ:** WebIDL 仕様では、`jsonifier` の代わりに `serializer` を使用しています。これは Gecko では使われていません。非標準的な、おそらく初期の提案である `jsonifier` だけが mozilla-central で見つかりました。
+> [!NOTE]
+> WebIDL 仕様では、`jsonifier` の代わりに `serializer` を使用しています。これは Gecko では使われていません。非標準的な、おそらく初期の提案である `jsonifier` だけが mozilla-central で見つかりました。
 
 ### イテレーター風のメソッド
 
diff --git a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
index 5412fc608a7378..53c9f2611a7174 100644
--- a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
@@ -100,10 +100,12 @@ API サイドバーを作成するには、次の 3 つの手順を実行する
 7. `"dictionaries"` — API の一部であるすべての辞書を一覧にした文字列の配列。
    一般的に、特別な意味がある場合や、複数のページから参照する必要がある場合を除き、複数のプロパティやメソッドで使用される辞書のみをここにリストアップすべきです。
    "CryptoKeyPair" は [https://developer.mozilla.org/ja/docs/Web/API/CryptoKeyPair](/ja/docs/Web/API/CryptoKeyPair) へのリンクを生成します。
-   > **メモ:** MDN は、辞書を別個に文書化することをやめつつあります。
+   > [!NOTE]
+   > MDN は、辞書を別個に文書化することをやめつつあります。
    > 可能な限り、これらは使用される場所でオブジェクトとして記述するようになりました。
 8. `"types"` — API で定義されている型定義子と列挙型の配列。リストを短くするために、特別に重要なものや複数のページから参照されるものだけをリストアップすることもできます。
-   > **メモ:** MDN は型定義子を個別に文書化することをやめつつあります。
+   > [!NOTE]
+   > MDN は型定義子を個別に文書化することをやめつつあります。
    > 可能な限り、これらが使用されている箇所で値として記述されるようになりました。
 9. `"callbacks"` — 値は、その API で定義されているすべてのコールバック型のリストを含む配列です。コールバック型を含む API であっても、このグループを使用する必要はないと思われるかもしれません。
    コールバック型を含む API でも、このグループを全く使用する必要がないと感じるかもしれません。なぜなら、コールバック型は個別にドキュメント化しても意味がないことが多いからです。
diff --git a/files/ja/mdn/writing_guidelines/page_structures/banners_and_notices/index.md b/files/ja/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
index c4334c7eaa6624..c875e5dc48e9ef 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
@@ -49,7 +49,8 @@ browser-compat-data リポジトリーに格納されるステータスに合わ
 
 値を変更するのであれば、 [browser-compat-data リポジトリーで機能の状態を更新](/ja/docs/MDN/Writing_guidelines/Page_structures/Feature_status#how_to_add_or_update_feature_statuses)してください。
 
-> **メモ:** コンテンツ内でこれらのマクロを手動で更新することはできますが、ブラウザー互換性データと一致しない値は置き換えられたり除去されたりします。
+> [!NOTE]
+> コンテンツ内でこれらのマクロを手動で更新することはできますが、ブラウザー互換性データと一致しない値は置き換えられたり除去されたりします。
 
 > **メモ:** `\{{SeeCompatTable}}`、`\{{Deprecated_Header}}`、`\{{Non-standard_Header}}` のバナーがあるページは、ページメタデータにそれぞれ `experimental`、`deprecated`、`non-standard` のステータス値があります。
 > このメタデータは、ヘッダーと同じときに自動的に更新されます。
@@ -64,7 +65,8 @@ browser-compat-data リポジトリーに格納されるステータスに合わ
 - その機能のランディングページにこのバナーを追加します（その機能のすべてのサブページではありません）。
 
   ```text
-  > **警告:** この機能は現在 <number> 件のブラウザーベンダーが反対しています。反対意見の詳細については、[規格の状況](#規格の状況)の節を参照してください。
+  > [!WARNING]
+  > この機能は現在 <number> 件のブラウザーベンダーが反対しています。反対意見の詳細については、[規格の状況](#規格の状況)の節を参照してください。
   ```
 
   - `<number>` は、その機能に反対しているブラウザーベンダーの数に置き換えます。
diff --git a/files/ja/mdn/writing_guidelines/page_structures/code_examples/index.md b/files/ja/mdn/writing_guidelines/page_structures/code_examples/index.md
index e5cc724ff9cdc0..9ce034bfe438f7 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/code_examples/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/code_examples/index.md
@@ -9,7 +9,8 @@ l10n:
 
 MDN では、ウェブプラットフォームの機能の使い方を示すために、ページ中に数多くのコードサンプルが挿入されています。この記事では、ページにコードサンプルを追加するためのさまざまな仕組みと、どのような場合にどのような仕組みを使うべきかについて説明します。
 
-> **メモ:** もし、コードを入れる様々な方法ではなく、 MDN の記事に現れるコードのスタイルやゴミ取りについてアドバイスが欲しいなら、[コードスタイルガイド](/ja/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide)を参照してください。
+> [!NOTE]
+> もし、コードを入れる様々な方法ではなく、 MDN の記事に現れるコードのスタイルやゴミ取りについてアドバイスが欲しいなら、[コードスタイルガイド](/ja/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide)を参照してください。
 
 ## 利用できるコードサンプルの種類
 
diff --git a/files/ja/mdn/writing_guidelines/page_structures/compatibility_tables/index.md b/files/ja/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
index f8ea07fcad7133..ff47c6cfc80cc6 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
@@ -27,7 +27,8 @@ BCD データを MDN ページに取り込むには、BCD ソースファイル
 互換性データのクエリー文字列は、ページのフロントマターで `browser-compat` キーを指定してください。
 例えば、{{domxref("AbortController")}} の場合、以下のように追加します。
 
-> **注目:** 訳注：
+> [!CALLOUT]
+> 訳注：
 > 日本語に翻訳された記事には `browser-compat` キーは追加しないでください。省略しても英語版のフロントマターが参照されるため、不要です。あると混乱の原因になります。[参考](https://github.com/mdn/translated-content/issues/7849#issuecomment-1224316755)）
 
 ```md
diff --git a/files/ja/mdn/writing_guidelines/page_structures/live_samples/index.md b/files/ja/mdn/writing_guidelines/page_structures/live_samples/index.md
index 2e811ee4a90cb0..046f49c0e9fcba 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/live_samples/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/live_samples/index.md
@@ -144,7 +144,8 @@ p.fancy {
 
   - : サンプルが入っているページのスラッグです。これは省略可能で、指定されていない場合、サンプルはマクロが使用されたのと同じページから取得されます。
 
-    > **警告:** この引数は非推奨です。新しいサンプルでは使用せず、既存のサンプルで見かけたら削除してください。私たちは積極的にその使用を削除しており、使用されなくなった時点でサポートを終了する予定です。
+    > [!WARNING]
+    > この引数は非推奨です。新しいサンプルでは使用せず、既存のサンプルで見かけたら削除してください。私たちは積極的にその使用を削除しており、使用されなくなった時点でサポートを終了する予定です。
 
 #### LiveSampleLink マクロ
 
@@ -219,7 +220,8 @@ p.fancy {
 
 それぞれのコードはコードブロックにあり、各ブロックはブロックごとに言語ごとに適切にマークされていなければなりません。ほとんどの場合、これは既に行われていますが、コードの各部分が正しい構文で構成されていることを確認することは、常に二重チェックしておく価値があります。これは、コードブロックに `language-type` という言語識別子をつけます。ここで _language-type_ は、ブロックに含まれる言語の種類で、 `html`、`css`、`js` などになります。
 
-> **メモ:** 言語ごとに複数のブロックを設置することができます。その場合はすべて連結されます。これによって、コードの塊を置き、その後でその動作の説明を置き、さらに別な塊を置くというようなことができます。これにより、ライブサンプルと説明文を組み合わせたチュートリアルなどを簡単に作成することができます。
+> [!NOTE]
+> 言語ごとに複数のブロックを設置することができます。その場合はすべて連結されます。これによって、コードの塊を置き、その後でその動作の説明を置き、さらに別な塊を置くというようなことができます。これにより、ライブサンプルと説明文を組み合わせたチュートリアルなどを簡単に作成することができます。
 
 HTML、CSS、JavaScript コードのコードブロックがそれぞれの言語の構文強調表示に対して正しく設定されていることを確認してください。
 
@@ -332,7 +334,8 @@ el.onclick = function () {
 分かりやすくするために、この例ではログ出力コードとそれを使用するコードを区切り、ログ出力コードを最初に表示しています。
 一般的に自分自身でサンプルを実装する場合は、ログ出力する要素を他の UI 要素の下記に配置する必要があります。
 
-> **メモ:** サンプルの一部としてログ出力結果を表示することで、 `console.log()` を使用するよりもはるかに使いやすくなります。
+> [!NOTE]
+> サンプルの一部としてログ出力結果を表示することで、 `console.log()` を使用するよりもはるかに使いやすくなります。
 
 #### HTML
 
@@ -398,9 +401,11 @@ incrementButton.addEventListener("click", () => {
 分かりやすくするために、この例ではログ出力コードとそれを使用するコードを区切り、ログ出力コードを最初に表示しています。
 一般的に、自分自身でサンプルを実装する場合、ログ出力要素を他の UI 要素の下記に配置する必要があります。
 
-> **メモ:** サンプルの一部としてログ出力を表示することは、`console.log()`を使用するよりもずっと使い勝手が良くなります。
+> [!NOTE]
+> サンプルの一部としてログ出力を表示することは、`console.log()`を使用するよりもずっと使い勝手が良くなります。
 
-> **メモ:** もっと完全な例は [`DataTransfer.effectAllowed`](/ja/docs/Web/API/DataTransfer/effectAllowed#setting_effectallowed) を参照してください。
+> [!NOTE]
+> もっと完全な例は [`DataTransfer.effectAllowed`](/ja/docs/Web/API/DataTransfer/effectAllowed#setting_effectallowed) を参照してください。
 
 #### HTML
 
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md
index e42ded357fffb3..f3294a08ac9685 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_constructor_subpage_template/index.md
@@ -106,7 +106,8 @@ _このマクロを使用するには、 Markdown ファイルの逆引用符と
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md
index e2f9a2efd1b251..f9574b233d50a7 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md
@@ -136,7 +136,8 @@ _以下の一覧のプロパティに加え、親インターフェイスであ
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_landing_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_landing_page_template/index.md
index a30572b2c3d86f..9ff0f0f46f9361 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_landing_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_landing_page_template/index.md
@@ -137,7 +137,8 @@ _インターフェイス名_ は以下の API を拡張し、挙げた機能を
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md
index e1f596c83d03a0..fee1608005dfe9 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md
@@ -86,7 +86,8 @@ l10n:
 - `parameter2`
   - : 同様です。
 
-> **メモ:** この節は必須です。引数がない場合は、定義リストの代わりに「なし。」と記述してください。
+> [!NOTE]
+> この節は必須です。引数がない場合は、定義リストの代わりに「なし。」と記述してください。
 
 ### 返値
 
@@ -127,7 +128,8 @@ l10n:
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md
index 10051c634a85f7..d85130c31ea32b 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md
@@ -90,7 +90,8 @@ l10n:
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_reference_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_reference_page_template/index.md
index 1642c8979ee93d..5a2931852258ad 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/api_reference_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/api_reference_page_template/index.md
@@ -133,7 +133,8 @@ _親インターフェイスである `\{{DOMxRef("NameOfParentInterface")}}` 
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md
index 39ee49d31d59dc..7c9c674641e0cb 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md
@@ -67,7 +67,8 @@ ARIA ロールのページは `title` を `ARIA: Name Of The Role` と、 `slug`
 - 属性値の変更
   - : それぞれの説明
 
-> **メモ:** このロールや属性を使用する意味づけについての注意事項を記載してください。 ARIA 使用の最初のルールは、要素を再利用し、それをアクセシビリティにするために ARIA ロール、状態、プロパティを**追加**する代わりに、要求される意味づけと動作がすでに組み込まれているネイティブ機能を使用することができるということです。そして、下記のベストプラクティスの節に詳細を紹介してください。
+> [!NOTE]
+> このロールや属性を使用する意味づけについての注意事項を記載してください。 ARIA 使用の最初のルールは、要素を再利用し、それをアクセシビリティにするために ARIA ロール、状態、プロパティを**追加**する代わりに、要求される意味づけと動作がすでに組み込まれているネイティブ機能を使用することができるということです。そして、下記のベストプラクティスの節に詳細を紹介してください。
 
 ## 例
 
@@ -79,7 +80,8 @@ ARIA ロールのページは `title` を `ARIA: Name Of The Role` と、 `slug`
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md
index ffd618c48da8b6..d3dc83ce427e8e 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md
@@ -146,7 +146,8 @@ _このマクロを使用するには、 Markdown ファイルの逆引用符と
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md
index 032a5c97ea373c..64af194b88cafa 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/css_property_page_template/index.md
@@ -129,7 +129,8 @@ _このマクロを使用するには、 Markdown ファイルの逆引用符と
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md
index 40370c9d390883..6dc4f7c01d693a 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md
@@ -91,7 +91,8 @@ _このマクロを使用するには、 Markdown ファイルの逆引用符と
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
index 7f1286863beec2..6694acd4cbdecc 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
@@ -102,7 +102,8 @@ l10n:
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md
index 45cb3c5c6c8521..a7d81d1648b44e 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md
@@ -119,7 +119,8 @@ NameOfTheHeader: <directive1>, <directive2>, …
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md b/files/ja/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md
index 52c382ffbf313f..9d6faedbe07bbb 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md
@@ -109,7 +109,8 @@ _このマクロを使用するには、 Markdown ファイルの逆引用符と
 
 詳しくは、[サンプルコード](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples)を追加する方法のガイドをご覧ください。
 
-> **メモ:** 他のページで紹介されている例にリンクしたい場合もあるでしょう。
+> [!NOTE]
+> 他のページで紹介されている例にリンクしたい場合もあるでしょう。
 >
 > **シナリオ 1:** このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。
 >
diff --git a/files/ja/mdn/writing_guidelines/page_structures/sidebars/index.md b/files/ja/mdn/writing_guidelines/page_structures/sidebars/index.md
index f70f622197cb19..49aec945247f73 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/sidebars/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/sidebars/index.md
@@ -107,7 +107,8 @@ l10n:
 
 サイドバーに記載するリンクが決まったら、[サイドバーマクロ案を添えて Yari に](https://github.com/mdn/yari/blob/main/kumascript/macros/)プルリクエストを送信してください。
 
-> **メモ:** この `<section>` はフロントマターとページコンテンツの間ではなく、文書の最後に追加する必要があります。 1 ページに 1 つのサイドバーしか作成されないので、フロントマターの後に記載されているマクロは除去しなければなりません。
+> [!NOTE]
+> この `<section>` はフロントマターとページコンテンツの間ではなく、文書の最後に追加する必要があります。 1 ページに 1 つのサイドバーしか作成されないので、フロントマターの後に記載されているマクロは除去しなければなりません。
 
 [マクロのソースコード](https://github.com/mdn/yari/tree/main/kumascript/macros)は GitHub で公開されています。各マクロには、引数がある場合はその引数も含め、マクロ自体の文書化が記載されています。
 
diff --git a/files/ja/mdn/writing_guidelines/page_structures/syntax_sections/index.md b/files/ja/mdn/writing_guidelines/page_structures/syntax_sections/index.md
index 7ffc3ef5922cb2..9ed74a735e9b52 100644
--- a/files/ja/mdn/writing_guidelines/page_structures/syntax_sections/index.md
+++ b/files/ja/mdn/writing_guidelines/page_structures/syntax_sections/index.md
@@ -27,7 +27,8 @@ slice(start, end)
 ```
 ````
 
-> **メモ:** この用途で使用するマークアップ言語は `js-nolint` で、`js` は JavaScript の構文強調表示を使用することを示します。
+> [!NOTE]
+> この用途で使用するマークアップ言語は `js-nolint` で、`js` は JavaScript の構文強調表示を使用することを示します。
 > JavaScript の構文の節では `-nolint` も必要です。なぜなら、構文の節は意図的に「まったく」JavaScript ではないので、リンターに「修正」してほしくないからです (返値と行末のセミコロンが省略されます)。
 
 ### 全般的なスタイルルール
@@ -189,7 +190,8 @@ splice(start, deleteCount, item1, item2, /* …, */ itemN)
 
 リスト内の各引数の名前は、マークダウンコードのフェンス記法 `` ` ` `` に格納する必要があります。
 
-> **メモ:** その機能が何も引数を取らない場合は、「引数」の項を設置する必要はありませんが、中身を「なし」として設置しても構いません。
+> [!NOTE]
+> その機能が何も引数を取らない場合は、「引数」の項を設置する必要はありませんが、中身を「なし」として設置しても構いません。
 
 #### 返値の項
 
@@ -207,7 +209,8 @@ splice(start, deleteCount, item1, item2, /* …, */ itemN)
 
 例外の名前と説明を説明リストに記述してください。
 
-> **メモ:** その機能で発生する例外がない場合は「例外」の項を設置する必要はありませんが、中身を「なし」として設置しても構いません。
+> [!NOTE]
+> その機能で発生する例外がない場合は「例外」の項を設置する必要はありませんが、中身を「なし」として設置しても構いません。
 
 ### プロパティの場合
 
@@ -232,7 +235,8 @@ JavaScript の組み込みオブジェクトのリファレンスページは、
 
 CSS プロパティページには「構文」の節があり、ふつうはページの先頭にありますが、次第に、機能の典型的な使用方法を示すブロックを含む節や、その機能が何を行うかを説明するライブデモ（例えば {{CSSxRef("animation")}} を参照）の下に見られるようになっています。
 
-> **メモ:** このようにしているのは、 CSS の形式文法が複雑であり、 MDN の読者の多くが必要としておらず、初心者にとってとっつきにくいからです。実際の構文と例が多くの人にとってより有用です。
+> [!NOTE]
+> このようにしているのは、 CSS の形式文法が複雑であり、 MDN の読者の多くが必要としておらず、初心者にとってとっつきにくいからです。実際の構文と例が多くの人にとってより有用です。
 
 構文の節の中には、次のような内容が見られるでしょう。
 
diff --git a/files/ja/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md b/files/ja/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
index 3ca032d9141c1a..17012ed3c8ca20 100644
--- a/files/ja/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
+++ b/files/ja/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
@@ -51,7 +51,8 @@ MDN Web Docs では、私たちはオープンな技術を支援しています
 
 MDN Web Docs のチームは、オープンウェブプラットフォームの文書化に集中しています。この分野の技術を MDN Web Docs での文書化の対象として検討したい場合、文書を書き、完成後もそれを維持することをいとわないコミュニティが集まっている必要があります。私たちのチームは、そのような場合、編集やフィードバックなどの指導を喜んで提供しますが、それ以上のリソースは持ち合わせていません。
 
-> **メモ:** MDN Web Docs の作業は GitHub と「公開の場」で行われます。あなたのチームは、 git と GitHub に精通し、オープンソースで一緒に作業することに抵抗がないことが望まれます。
+> [!NOTE]
+> MDN Web Docs の作業は GitHub と「公開の場」で行われます。あなたのチームは、 git と GitHub に精通し、オープンソースで一緒に作業することに抵抗がないことが望まれます。
 
 ## 新技術の選択プロセス
 
@@ -79,7 +80,8 @@ MDN Web Docs で文書化するのに適していると思われる技術があ
 
 この段階で何百ページもの詳細な情報を提供する必要はありません（むしろ、提供しない方が良いでしょう）。この点については、それぞれ数段落程度で十分です。
 
-> **メモ:** MDN Web Docs は主に英語 (en-US) のサイトです。プロジェクトの主要言語は、米国英語である必要があります。
+> [!NOTE]
+> MDN Web Docs は主に英語 (en-US) のサイトです。プロジェクトの主要言語は、米国英語である必要があります。
 
 ### 回答の待機中
 
diff --git a/files/ja/mdn/writing_guidelines/what_we_write/index.md b/files/ja/mdn/writing_guidelines/what_we_write/index.md
index e6336f6730ec19..23bdc09fcd7850 100644
--- a/files/ja/mdn/writing_guidelines/what_we_write/index.md
+++ b/files/ja/mdn/writing_guidelines/what_we_write/index.md
@@ -58,7 +58,8 @@ MDN Web Docs にコンテンツを提案したい場合は、投稿する前に
 
 また、[SVG](/ja/docs/Web/SVG), [XML](/ja/docs/Web/XML), [WebAssembly](/ja/docs/WebAssembly), [アクセシビリティ](/ja/docs/Learn/Accessibility)など、より幅広いトピックについても文書化しています。さらに、これらの技術に関する豊富な[学習ガイド](/ja/docs/Learn)や[用語集](/ja/docs/Glossary)を提供しています。
 
-> **メモ:** バックエンドテクノロジーには、別の文書化の場所があり、 MDN Web Docs はこれにとって代わるつもりはありませんが、[いくつかの例外はあります](/ja/docs/Learn/Server-side)。
+> [!NOTE]
+> バックエンドテクノロジーには、別の文書化の場所があり、 MDN Web Docs はこれにとって代わるつもりはありませんが、[いくつかの例外はあります](/ja/docs/Learn/Server-side)。
 
 MDN Web Docs のすべてのコンテンツは、それが掲載されている技術分野に関連したものでなければなりません。投稿者は、書き方やコードサンプルなどについて、この [MDN 執筆ガイドライン](/ja/docs/MDN/Writing_guidelines) に従うことが期待されています。
 
diff --git a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
index 2d0bcf1d2192db..1c943bf14dc47d 100644
--- a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
+++ b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
@@ -21,7 +21,8 @@ Prettier はすべてのコードを書式化し、スタイルの一貫性を
 
 ## 完全な HTML 文書
 
-> **メモ:** この章のガイドラインは、完全な HTML 文書を表示する必要がある場合にのみ適用されます。通常、機能を示すにはスニペットで十分です。 [EmbedLiveSample マクロ](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples#従来型ライブサンプル)を使用している場合、 HTML スニペットを載せるだけで、表示時に自動的に完全な HTML 文書の中に挿入されます。
+> [!NOTE]
+> この章のガイドラインは、完全な HTML 文書を表示する必要がある場合にのみ適用されます。通常、機能を示すにはスニペットで十分です。 [EmbedLiveSample マクロ](/ja/docs/MDN/Writing_guidelines/Page_structures/Code_examples#従来型ライブサンプル)を使用している場合、 HTML スニペットを載せるだけで、表示時に自動的に完全な HTML 文書の中に挿入されます。
 
 ### 文書型宣言
 
diff --git a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
index d31ec5813790fa..fd4d157e3efbab 100644
--- a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
+++ b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
@@ -58,7 +58,8 @@ Prettier はすべてのコードを書式化し、スタイルの一貫性を
 
 コードブロックが擬似コードであったり、コマンドの出力であったり、プログラミング言語でない場合は、明示的に言語を `plain` に設定してください。
 
-> **警告:** もし希望する言語が MDN でまだ対応していない場合、コードブロックの言語を似た言語に設定しないでください。そうすると、 Prettier の書式や構文強調表示で意図しない副作用が発生することがあります。
+> [!WARNING]
+> もし希望する言語が MDN でまだ対応していない場合、コードブロックの言語を似た言語に設定しないでください。そうすると、 Prettier の書式や構文強調表示で意図しない副作用が発生することがあります。
 
 ### コード行の長さ
 
diff --git a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
index dc753e07a7129a..153c57fc0e45fb 100644
--- a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
+++ b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
@@ -514,7 +514,8 @@ switch 文は少し厄介です。
   }
   ```
 
-> **メモ:** 回復可能なエラーだけが捕捉され、処理されるべきであるということを覚えておいてください。回復不可能なエラーはすべてスルーされ、コールスタックにバブルアップされるべきです。
+> [!NOTE]
+> 回復可能なエラーだけが捕捉され、処理されるべきであるということを覚えておいてください。回復不可能なエラーはすべてスルーされ、コールスタックにバブルアップされるべきです。
 
 ## オブジェクト
 
@@ -724,7 +725,8 @@ age != 25;
   const s = d / t;
   ```
 
-> **メモ:** 人間が読める意味のある名前を使わなくても良いのは、ループのイテレーターに `i` や `j` などを使用するような、非常に一般的に認識されている慣習が存在する場合だけです。
+> [!NOTE]
+> 人間が読める意味のある名前を使わなくても良いのは、ループのイテレーターに `i` や `j` などを使用するような、非常に一般的に認識されている慣習が存在する場合だけです。
 
 ### 変数の宣言
 
diff --git a/files/ja/mdn/writing_guidelines/writing_style_guide/index.md b/files/ja/mdn/writing_guidelines/writing_style_guide/index.md
index 4ea93f59c42361..bdab328ef493ba 100644
--- a/files/ja/mdn/writing_guidelines/writing_style_guide/index.md
+++ b/files/ja/mdn/writing_guidelines/writing_style_guide/index.md
@@ -11,7 +11,8 @@ l10n:
 
 これらのガイドラインは、ウェブサイト全体の言語とスタイルの一貫性を確保するためのものです。とはいえ、私たちは形式よりも内容に関心を持っていますので、投稿する前に執筆スタイルガイドをすべて学ぶ必要はないと思ってください。ただし、後で他の投稿者があなたの作業をこのガイドに適合するように編集した場合でも、怒ったり驚いたりしないでください。また、あなたがコンテンツのプルリクエストを提出する際に、レビュアーがこのスタイルガイドを指し示すかもしれません。
 
-> **メモ:** このガイドの言語的な側面は、主に英語の文書に適用されます。他の言語では、独自のスタイルガイドがあるかもしれません（作成することも歓迎されます）。これらは、それぞれのローカライズチームのページのサブページとして公開すべきです。しかし、このガイドは、コンテンツの形式や構成に関しても参照されるべきです。
+> [!NOTE]
+> このガイドの言語的な側面は、主に英語の文書に適用されます。他の言語では、独自のスタイルガイドがあるかもしれません（作成することも歓迎されます）。これらは、それぞれのローカライズチームのページのサブページとして公開すべきです。しかし、このガイドは、コンテンツの形式や構成に関しても参照されるべきです。
 >
 > **訳注:** 2017 年 12 月現在、日本語独自コンテンツとしてのスタイルガイドは未作成だが、下記の資料が参考になります。
 >
@@ -115,7 +116,8 @@ MDN は幅広く、多様な読者を抱えています。
 
 - **正**: "A confirmation dialog asks the user if they want to allow the web page to make use of their webcam."
 
-> **メモ:** MDN Web Docs では、一般に「[単数形の 'they'](http://en.wikipedia.org/wiki/Singular_they)」として知られている、三人称複数型を中性名詞として使う（つまり、"they"、"them"、"their"、"theirs" を使う）ことを許容しています。
+> [!NOTE]
+> MDN Web Docs では、一般に「[単数形の 'they'](http://en.wikipedia.org/wiki/Singular_they)」として知られている、三人称複数型を中性名詞として使う（つまり、"they"、"them"、"their"、"theirs" を使う）ことを許容しています。
 
 ユーザーを複数とするとこうなります。
 
@@ -158,7 +160,8 @@ MDN Web Docs で書くことの第一の目標は、常にオープンなウェ
   - **例を追加する**。すべての引数、あるいは少なくとも初級から中級レベルのユーザーが使用する可能性のある引数（またはプロパティや属性）と、追加の説明が必要な高度な引数を網羅した例を用意する必要があります。それぞれの例の前には、その例が何をするのか、それを理解するためにはどのような知識が必要なのかなどの概要を示す必要があります。例の後（または例の一部の間）には、コードがどのように動作するかを説明する文章が必要です。例の詳細やエラー処理についても手を抜いてはいけません。読者は例をコピー＆ペーストして自分のプロジェクトで使用するでしょうから、そのコードが本番サイトで使用されることになるでしょう。より有用な情報は、[サンプルコードのガイドライン](/ja/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide)を参照してください。
   - **使用例を説明する**。説明されている機能について、特に一般的な使用例がある場合は、それについて話してください。一般的な開発上の問題を解決するために文書化された方法を読者が理解すると仮定するのではなく、実際にその利用例についての節を追加し、例とその例がどのように機能するかを説明するテキストを追加してください。
   - **画像情報を追加する**。すべての画像や図に適切な [`alt`](/ja/docs/Web/HTML/Element/img#alt) テキストを入れてください。このテキストは、表などのキャプションと同様に重要です。スパイダーは画像をクロールすることができないため、 [`alt`](/ja/docs/Web/HTML/Element/img#alt) テキストによって、埋め込まれたメディアに含まれるコンテンツを検索エンジンのクローラーに伝えることができます。
-    > **メモ:** 検索エンジンのランキングを操作するために、キーワードを入れすぎたり、関係のないキーワードを使ったりすることは、良い慣習ではありません。このような行為は発見されやすく、罰せられる傾向にあります。
+    > [!NOTE]
+    > 検索エンジンのランキングを操作するために、キーワードを入れすぎたり、関係のないキーワードを使ったりすることは、良い慣習ではありません。このような行為は発見されやすく、罰せられる傾向にあります。
     > 同様に、ページのサイズや検索順位を上げるために、反復的で役に立たない内容や、キーワードの塊を実際のページ内に追加するようなことも**しないでください**。これは、コンテンツの読みやすさと検索結果の両方に悪影響を及ぼします。
   - **トピックの内容を重視する**。特定のキーワードではなく、記事のトピックに沿ってコンテンツを書く方がはるかに良いことです。実際、多くの SEO 担当者は、記事の長さに応じて 5 ～ 100 種類のキーワード（ショートテール、ミディアムテール、ロングテール）をリストアップし、記事に含めるようにしています。そうすることで、表現が多様化し、繰り返しが少なくなります。
 
@@ -219,7 +222,8 @@ MDN Web Docs で書くことの第一の目標は、常にオープンなウェ
   | N.B.   | _nota bene_      | note well               |
   | P.S.   | _post scriptum_  | postscript              |
 
-  > **メモ:** ラテン語の略記表現が有用かどうか常に考えるようにしましょう。めったに使われないようなものは、多くの読者にとっては理解できず、他のものと勘違いしてしまうこともありえます。
+  > [!NOTE]
+  > ラテン語の略記表現が有用かどうか常に考えるようにしましょう。めったに使われないようなものは、多くの読者にとっては理解できず、他のものと勘違いしてしまうこともありえます。
   >
   > 使用するあなたが正しく使用することを肝に銘じてください。例えば、 "e.g." と "i.e." の取り違えはよくある間違いです。
 
@@ -238,7 +242,8 @@ MDN Web Docs で書くことの第一の目標は、常にオープンなウェ
 
 本文では標準的な英語の大文字表記ルールを使用し、 "World Wide Web" は大文字で表記してください。 "web" （単独または修飾語としての使用）および "internet" は小文字を使用してもかまいません。
 
-> **メモ:** このガイドラインは以前のバージョンからの変更であり、 MDN では "Web" と "Internet" がたくさん使われているのを見かけるかもしれません。
+> [!NOTE]
+> このガイドラインは以前のバージョンからの変更であり、 MDN では "Web" と "Internet" がたくさん使われているのを見かけるかもしれません。
 > 他の変更を行う際にこれらを変更するのは自由ですが、大文字小文字を変更するためだけにこの記事を編集する必要はありません。
 
 キーボードのキーは、すべて大文字にするのではなく、文章形の大文字を使用してください。
@@ -461,7 +466,8 @@ MDN Web Docs では、特定の状況下において外部リンクを許可し
 - MDN Web Docs を使用してスパムを広めようとすること。
 - リンクの宛先を難読化するショートリンク
 
-> **メモ:** 外部リンクを追加する前に、MDN Web Docs 内のコンテンツを相互参照することを検討してください。内部リンクはメンテナンスが簡単で、MDN Web Docs の全体が読者にとってより価値のあるものになります。
+> [!NOTE]
+> 外部リンクを追加する前に、MDN Web Docs 内のコンテンツを相互参照することを検討してください。内部リンクはメンテナンスが簡単で、MDN Web Docs の全体が読者にとってより価値のあるものになります。
 
 - **良質な外部リンク**: 良い外部リンクは、関連性があり、持続性があり、広く信頼されているリソースに読者を連れて行きます。以下のような外部コンテンツへのリンクを設定することをお勧めします。
 
@@ -480,7 +486,8 @@ MDN Web Docs では、特定の状況下において外部リンクを許可し
 
 - **自己宣伝やスパム行為に該当するリンク**: 個人的なブログ記事、カンファレンスでの講演、GitHub リポジトリーには価値がありますが、自身のリソースへのリンクは利益相反があるように見えてしまう可能性があります。ビジネスや個人的なつながりがあるリソースにリンクする前に、よく考えてください。
 
-  > **メモ:** リンク先とビジネスや個人的な関係がある場合は、プルリクエストでその関係を開示する必要があります。そうしないと、MDN Web Docs への継続的な参加が危ぶまれる可能性があります。
+  > [!NOTE]
+  > リンク先とビジネスや個人的な関係がある場合は、プルリクエストでその関係を開示する必要があります。そうしないと、MDN Web Docs への継続的な参加が危ぶまれる可能性があります。
 
 そのようなリンクが適切である場合もあります。例えば、あなたがある仕様書の編集者で、その仕様書に関連する文書化に貢献している場合、その仕様書へのリンクは期待されるものであり、許容されるものです。しかし、あなたはあなたとリンクの関係を明らかにしなければなりません。
 
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.md
index a5e80f8fc3d289..0f82cbb3547260 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.md
@@ -24,4 +24,5 @@ slug: Mozilla/Add-ons/WebExtensions/API/alarms/Alarm
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.md
index 93953848fa070d..fd15811519959d 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.md
@@ -33,4 +33,5 @@ browser.alarms.clear(
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
index 868400ecd0a24a..575076bac251fd 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
@@ -30,4 +30,5 @@ browser.alarms.clearAll(
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.md
index 9500e93be23d00..b10579b465bc08 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.md
@@ -77,7 +77,8 @@ chrome.alarms.create("my-periodic-alarm", {
 });
 ```
 
-> **メモ:** この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.md
index 72d6d7f97de22e..d2d2c1d4d7e232 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.md
@@ -33,4 +33,5 @@ browser.alarms.get(
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.md
index fbcd0979d89c62..91223cc6c80efb 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.md
@@ -57,6 +57,6 @@ getAlarms.then(gotAll);
 
 {{WebExtExamples}}
 
-> **メモ:**
+> [!NOTE]
 >
 > この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/index.md
index 1b2620e3bb306b..3ed4fd8facea4a 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/index.md
@@ -36,4 +36,5 @@ slug: Mozilla/Add-ons/WebExtensions/API/alarms
 
 {{Compat}} {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md b/files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
index 9c06d2aacbe363..7d34300e1310be 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
@@ -43,4 +43,5 @@ browser.alarms.onAlarm.hasListener(listener)
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API に基づいています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
index 0f264f50d11db6..df042bc5d2dad7 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
@@ -30,7 +30,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode
 - `children` {{optional_inline}}
   - : 各要素がノードの子要素を表す、{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} の {{jsxref("array")}} です。リストの要素は UI に表示されているのと同じ順序で並びます。フォルダー以外の場合は省略されます。
 
-> **メモ:** 現在、ブックマークリストのセパレータをこのオブジェクトで表すことはできません。
+> [!NOTE]
+> 現在、ブックマークリストのセパレータをこのオブジェクトで表すことはできません。
 
 ## ブラウザーの互換性
 
@@ -38,7 +39,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
index 6db8f07409a936..5bc090dbe2b0e9 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
@@ -17,7 +17,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeUnmodifiable
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.md
index d4a228e21195cc..2d300c1a244fa4 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.md
@@ -51,7 +51,8 @@ chrome.bookmarks.create(
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-create) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-create) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
index 62f4adf408a368..9bf7461c721a5d 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/CreateDetails
 
 `CreateDetails` 型は、新しいブックマークやフォルダーのプロパティを表すためのオブジェクト型です。{{WebExtAPIRef("bookmarks.create()")}} メソッドの呼び出し時に渡します。
 
-> **メモ:** 現在、ブックマークリストのセパレータをこのオブジェクト型で表すことはできません。
+> [!NOTE]
+> 現在、ブックマークリストのセパレータをこのオブジェクト型で表すことはできません。
 
 ## 値の型
 
@@ -28,7 +29,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/CreateDetails
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.md
index 7c57924f7f2665..3f2d4caf6e488a 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.md
@@ -52,7 +52,8 @@ function doesBookmarkExist(bookmarkId) {
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-get) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいて作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-get) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいて作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
index 971a839d0e515e..5beb4b2fe83e5a 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
@@ -78,7 +78,8 @@ function toggleBookmark(folderNode, title, url) {
 
 そうではなかった場合、新しいブックマークを作成するために {{WebExtAPIRef("bookmarks.create()")}} が呼び出します。この際、引数 `folderNode` で与えられていたフォルダー ID を新しい親フォルダーの ID に指定し、合わせて `title` と `url` も指定します。
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getChildren) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getChildren) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
index 8c24901d15eb36..6a2f110a1d2b24 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
@@ -47,7 +47,8 @@ chrome.bookmarks.getRecent(1, gotMostRecent);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getRecent) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいて作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getRecent) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいて作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
index 29a2cb4b6749fb..bfd0657289921f 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
@@ -71,7 +71,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getSubTree) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getSubTree) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
index 9535ade7de301a..f97605ef2a5326 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
@@ -65,7 +65,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getTree) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getTree) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.md
index f1edbd608df587..e5de664172b0fe 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.md
@@ -70,7 +70,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
index 10b7f636f9c382..b8b2c50756b1e8 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
@@ -69,7 +69,8 @@ function moveToFolder(bookmarkId, destinationId) {
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium `の`[`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-move) API に基づいています。また、このドキュメント は [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium `の`[`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-move) API に基づいています。また、このドキュメント は [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
index 72fab8bac46088..f98e96e06c0bdd 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
@@ -77,7 +77,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
index 83a237c5742a81..8a1016c9932116 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
@@ -71,7 +71,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License. に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License. に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md
index 16b9baf338bcf1..415a3140467c39 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md
@@ -49,7 +49,8 @@ browser.bookmarks.onCreated.hasListener(listener)
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md
index f85f6d51bb58cc..caed244ae44eb7 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md
@@ -58,7 +58,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License. に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License. に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
index 288a1556c8797f..fe7d653c7d978d 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
@@ -58,7 +58,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
index 0b28c0f7c177c4..f294304693bcba 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
@@ -80,7 +80,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge compatibility の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge compatibility の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md
index 77448db335d0de..be9ac1ee424bff 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md
@@ -76,7 +76,8 @@ chrome.browserAction.onClicked.addListener(handleClick);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
index f5a951fabd5b2f..dcb848059cd676 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
@@ -48,7 +48,8 @@ chrome.bookmarks.remove(bookmarkItemId");
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
index 999e6ce7d12063..b8da0110d75acd 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
@@ -53,7 +53,8 @@ chrome.bookmarks.search({ title: "MDN" }, removeMDN);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
index c36b6884d20930..f8a07f1d599584 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
@@ -84,7 +84,8 @@ chrome.browserAction.onClicked.addListener(checkActiveTab);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-search) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> この API は Chromium の [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-search) API に基づいています。また、このドキュメントは [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) における Chromium のコードから作成されています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.md b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
index 9db2df590dec1e..1480f60448edbb 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
@@ -66,7 +66,8 @@ chrome.bookmarks.search({ title: "MDN" }, updateFolders);
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API. This documentation is derived from [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) in the Chromium code.Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
+> [!NOTE]
+> This API is based on Chromium's [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-update) API. This documentation is derived from [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) in the Chromium code.Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md b/files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
index 26ba2c889da0cd..50b20d5f0ed404 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
@@ -22,7 +22,8 @@ RGBA 色を定義する、4 つの 0 から 255 の整数の`配列`です。4 
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の[`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction#type-ColorArray) API に基づいています。このドキュメントは Chromium コードの [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)から派生したものです。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、Creative Commons Attribution 3.0 United States License のもとにここに含まれています。
+> [!NOTE]
+> この API は Chromium の[`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction#type-ColorArray) API に基づいています。このドキュメントは Chromium コードの [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)から派生したものです。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、Creative Commons Attribution 3.0 United States License のもとにここに含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.md b/files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
index 3cbeff6cf9f730..e6313a602ad1dc 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
@@ -48,7 +48,8 @@ browser.browserAction.onClicked.addListener((tab) => {
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction#method-disable) API. This documentation is derived from [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction#method-disable) API. This documentation is derived from [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.md b/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.md
index 362f515a2328b6..7bc646697339f3 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.md
@@ -67,7 +67,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/browserAction
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction) API に基づいています。この文書は Chromium コードの [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) から得ています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction) API に基づいています。この文書は Chromium コードの [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json) から得ています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md b/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
index 6eaaf9a8588a28..cd82c56b121d9c 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
@@ -56,7 +56,8 @@ browser.browserAction.onClicked.addListener((tab) => {
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の[`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction#event-onClicked) API に基づいています。このドキュメントは Chromium コードの[`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)から派生したものです。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、Creative Commons Attribution 3.0 United States License のもとにここに含まれています。
+> [!NOTE]
+> この API は Chromium の[`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction#event-onClicked) API に基づいています。このドキュメントは Chromium コードの[`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)から派生したものです。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、Creative Commons Attribution 3.0 United States License のもとにここに含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.md b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.md
index 1581e38a72ca0d..4739efaa1f0598 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.md
@@ -65,7 +65,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/browsingData
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
index b23cd1e519381a..206309cebd5db5 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
@@ -50,7 +50,8 @@ browser.browsingData.removeCache({}).then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData) API に基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.browsingData`](https://developer.chrome.com/extensions/browsingData) API に基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/clipboard/index.md b/files/ja/mozilla/add-ons/webextensions/api/clipboard/index.md
index 4bfa6158a8d9db..1def035e4fe42d 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/clipboard/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/clipboard/index.md
@@ -24,4 +24,5 @@ slug: Mozilla/Add-ons/WebExtensions/API/clipboard
 
 {{Compat}} {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.clipboard`](https://developer.chrome.com/apps/clipboard) API に基づきます。
+> [!NOTE]
+> この API は Chromium の [`chrome.clipboard`](https://developer.chrome.com/apps/clipboard) API に基づきます。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md b/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md
index baf7651f4f336b..6738bc6ae2ece0 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.md
@@ -67,4 +67,5 @@ fetch(browser.runtime.getURL("image.png"))
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.clipboard`](https://developer.chrome.com/docs/extensions/reference/clipboard/) API をベースにしています。
+> [!NOTE]
+> この API は Chromium の [`chrome.clipboard`](https://developer.chrome.com/docs/extensions/reference/clipboard/) API をベースにしています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/commands/index.md b/files/ja/mozilla/add-ons/webextensions/api/commands/index.md
index a0087723f43370..b71e0c02fd6040 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/commands/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/commands/index.md
@@ -26,7 +26,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/commands
 
 {{Compat}} {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.commands`](https://developer.chrome.com/extensions/commands) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.commands`](https://developer.chrome.com/extensions/commands) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.md b/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.md
index 5b7b483a7b7f75..dcedf2568f7347 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.md
@@ -60,7 +60,8 @@ gettingAll.then(logCookies);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.cookies`](https://developer.chrome.com/extensions/cookies#type-Cookie) API に基づいています。 また、このドキュメントは [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.cookies`](https://developer.chrome.com/extensions/cookies#type-Cookie) API に基づいています。 また、このドキュメントは [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/cookies/index.md b/files/ja/mozilla/add-ons/webextensions/api/cookies/index.md
index f84d10e1c80502..e234a94c7f5097 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/cookies/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/cookies/index.md
@@ -77,7 +77,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/cookies
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API に基づいています。また、このドキュメントは [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API に基づいています。また、このドキュメントは [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/index.md b/files/ja/mozilla/add-ons/webextensions/api/devtools/index.md
index b5e88510a7fdd9..60a8393b880bae 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/devtools/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/index.md
@@ -24,7 +24,8 @@ l10n:
 
 {{Compat}}
 
-> **メモ:** この API は Chromium の [`chrome.devtools`](https://developer.chrome.com/docs/extensions/mv2/devtools/) API に基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.devtools`](https://developer.chrome.com/docs/extensions/mv2/devtools/) API に基づいています。
 >
 > Microsoft Edge の互換性データは、 Microsoft Corporation によって提供され、 Creative Commons Attribution 3.0 United States License の下でここに記載されています。
 
diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
index 0e6ba61478a9cc..b0797b4df394ad 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
@@ -161,7 +161,8 @@ inspectButton.addEventListener("click", () => {
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.devtools`](https://developer.chrome.com/extensions/devtools) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.devtools`](https://developer.chrome.com/extensions/devtools) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
index d7efce396880df..c8608c2ae1fa11 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow
 
 {{AddonSidebar}}
 
-> **メモ:** このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。この API は [Chrome devtools APIs](https://developer.chrome.com/extensions/devtools) に基づいていますが、Firefox では実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 [Limitations of the devtools APIs](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs) を見てください。
+> [!NOTE]
+> このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。この API は [Chrome devtools APIs](https://developer.chrome.com/extensions/devtools) に基づいていますが、Firefox では実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 [Limitations of the devtools APIs](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs) を見てください。
 
 `devtools.inspectedWindow` API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。
 
@@ -27,7 +28,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow
 
 {{Compat}}{{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.devtools.inspectedWindow`](https://developer.chrome.com/extensions/devtools_inspectedWindow) API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.devtools.inspectedWindow`](https://developer.chrome.com/extensions/devtools_inspectedWindow) API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md
index 9115b573659e65..5c686ed7dcd969 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.md
@@ -40,7 +40,8 @@ browser.runtime.onMessage.addListener(handleMessage);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.devtools`](https://developer.chrome.com/extensions/devtools) API に基づいています。Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。
+> [!NOTE]
+> この API は Chromium の [`chrome.devtools`](https://developer.chrome.com/extensions/devtools) API に基づいています。Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.md b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.md
index fa0ad7c04076f8..5495137d444063 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/devtools/network
 
 {{AddonSidebar}}
 
-> **メモ:** このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。この API は [Chrome devtools APIs](https://developer.chrome.com/extensions/devtools) に基づいていますが、Firefox では実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 [Limitations of the devtools APIs](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs) を見てください。
+> [!NOTE]
+> このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。この API は [Chrome devtools APIs](https://developer.chrome.com/extensions/devtools) に基づいていますが、Firefox では実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 [Limitations of the devtools APIs](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs) を見てください。
 
 `devtools.network` API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。
 
@@ -22,7 +23,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/devtools/network
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.devtools.network`](https://developer.chrome.com/extensions/devtools_network) API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.devtools.network`](https://developer.chrome.com/extensions/devtools_network) API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.md b/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.md
index 4258604257ed72..89f5376e51e05e 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/devtools/panels
 
 {{AddonSidebar}}
 
-> **メモ:** この API は [Chrome devtools APIs](https://developer.chrome.com/extensions/devtools) に基づいていますが、Firefox では実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 [Limitations of the devtools APIs](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs) を見てください。
+> [!NOTE]
+> この API は [Chrome devtools APIs](https://developer.chrome.com/extensions/devtools) に基づいていますが、Firefox では実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 [Limitations of the devtools APIs](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs) を見てください。
 
 `devtools.panels` API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。
 
@@ -47,7 +48,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/devtools/panels
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.devtools.panels`](https://developer.chrome.com/extensions/devtools_panels) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.devtools.panels`](https://developer.chrome.com/extensions/devtools_panels) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/dom/openorclosedshadowroot/index.md b/files/ja/mozilla/add-ons/webextensions/api/dom/openorclosedshadowroot/index.md
index e6f8b837ea6108..ff90b7a74ba352 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/dom/openorclosedshadowroot/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/dom/openorclosedshadowroot/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/dom/openOrClosedShadowRoot
 
 {{APIRef("Shadow DOM")}}{{non-standard_header}}
 
-> **メモ:** この API は [WebExtensions](/ja/docs/Mozilla/Add-ons/WebExtensions) でのみ使用できます。
+> [!NOTE]
+> この API は [WebExtensions](/ja/docs/Mozilla/Add-ons/WebExtensions) でのみ使用できます。
 
 `Element.openOrClosedShadowRoot` は読み取り専用プロパティで、この要素が保持しているシャドウルートを、 {{DOMxRef("ShadowRoot.mode", "mode")}} が `open` であるか `closed` であるかに関わらず表します。
 
diff --git a/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.md b/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.md
index f5b2269ca0c2b6..a83f235179add6 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.md
@@ -81,7 +81,8 @@ downloading.then(onStartedDownload, onFailed);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.downloads`](https://developer.chrome.com/extensions/downloads#method-download) API を元にしています。
+> [!NOTE]
+> この API は Chromium の [`chrome.downloads`](https://developer.chrome.com/extensions/downloads#method-download) API を元にしています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/downloads/index.md b/files/ja/mozilla/add-ons/webextensions/api/downloads/index.md
index 0202f318e8943e..f3c2a9cef74989 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/downloads/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/downloads/index.md
@@ -78,7 +78,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/downloads
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.downloads`](https://developer.chrome.com/extensions/downloads) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.downloads`](https://developer.chrome.com/extensions/downloads) API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/events/index.md b/files/ja/mozilla/add-ons/webextensions/api/events/index.md
index e7e026cd1a8079..f844be762c71af 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/events/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/events/index.md
@@ -22,7 +22,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/events
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.events`](https://developer.chrome.com/extensions/events) API に基づいています。また、このドキュメントは [`events.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/events.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.events`](https://developer.chrome.com/extensions/events) API に基づいています。また、このドキュメントは [`events.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/events.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/extension/index.md b/files/ja/mozilla/add-ons/webextensions/api/extension/index.md
index a8b2c185a0a5f8..146b892a375dc4 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/extension/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/extension/index.md
@@ -47,7 +47,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/extension
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.extension`](https://developer.chrome.com/extensions/extension) API に基づいています。また、このドキュメントは [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.extension`](https://developer.chrome.com/extensions/extension) API に基づいています。また、このドキュメントは [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md
index 84885dd037633b..529c46edce4491 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md
@@ -22,7 +22,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/extensionTypes/ImageDetails
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.extensionTypes`](https://developer.chrome.com/extensions/extensionTypes#type-ImageDetails) API に基づいています。このドキュメントは [`extension_types.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/extension_types.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.extensionTypes`](https://developer.chrome.com/extensions/extensionTypes#type-ImageDetails) API に基づいています。このドキュメントは [`extension_types.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/extension_types.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.md b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.md
index fdc7923a5f9650..ddb3de8cc8202f 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.md
@@ -24,7 +24,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/extensionTypes
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.extensionTypes`](https://developer.chrome.com/extensions/extensionTypes) API に基づいています。また、このドキュメントは [`extension_types.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/extension_types.json)における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.extensionTypes`](https://developer.chrome.com/extensions/extensionTypes) API に基づいています。また、このドキュメントは [`extension_types.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/extension_types.json)における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md
index 109bf1b7128020..bed8d545e582df 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md
@@ -23,7 +23,8 @@ JavaScript や CSS がどの時点でタブに挿入されるか。
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.extensionTypes`](https://developer.chrome.com/extensions/extensionTypes#type-RunAt) API に基づいています。また、このドキュメントは [`extension_types.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/extension_types.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.extensionTypes`](https://developer.chrome.com/extensions/extensionTypes#type-RunAt) API に基づいています。また、このドキュメントは [`extension_types.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/extension_types.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.md b/files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.md
index ea2330c483beda..916a6a68172589 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.md
@@ -30,7 +30,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/history/HistoryItem
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.history`](https://developer.chrome.com/extensions/history#type-HistoryItem) API に基づいています。また、このドキュメントは [`history.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/history.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.history`](https://developer.chrome.com/extensions/history#type-HistoryItem) API に基づいています。また、このドキュメントは [`history.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/history.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/history/index.md b/files/ja/mozilla/add-ons/webextensions/api/history/index.md
index f35578480be130..54225e543d7317 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/history/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/history/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/history
 
 ブラウザー履歴とやりとりする `history` API を使用します。
 
-> **メモ:** downloads は [`HistoryItem`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/HistoryItem) オブジェクトとして扱われるのに注意します。このため、ダウンロードのために [`history.onVisited`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/onVisited) も発火します。
+> [!NOTE]
+> downloads は [`HistoryItem`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/HistoryItem) オブジェクトとして扱われるのに注意します。このため、ダウンロードのために [`history.onVisited`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/onVisited) も発火します。
 
 ブラウザー履歴はユーザーが訪れたページの時間順の記録です。history API では次の事ができます:
 
@@ -62,7 +63,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/history
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.history`](https://developer.chrome.com/extensions/history) API に基づいています。また、このドキュメントは [`history.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/history.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.history`](https://developer.chrome.com/extensions/history) API に基づいています。また、このドキュメントは [`history.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/history.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md b/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md
index 2b95bd8be96cf6..0b9f6897b827c7 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md
@@ -59,7 +59,8 @@ detecting.then(onLanguageDetected);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-detectLanguage) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
+> [!NOTE]
+> この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-detectLanguage) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md b/files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md
index dff1b1caa74275..a78aa234d0817c 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md
@@ -41,7 +41,8 @@ gettingAcceptLanguages.then(onGot);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-getAcceptLanguages) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
+> [!NOTE]
+> この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-getAcceptLanguages) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.md b/files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.md
index 9d095f4d5cbbcd..1382dcfaad6162 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.md
@@ -71,7 +71,8 @@ console.log(message);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-getMessage) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
+> [!NOTE]
+> この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-getMessage) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md b/files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md
index ccc1c6a42283ef..3e6578af9830bb 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md
@@ -36,7 +36,8 @@ console.log(uiLanguage);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-getUILanguage) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
+> [!NOTE]
+> この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#method-getUILanguage) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/index.md b/files/ja/mozilla/add-ons/webextensions/api/i18n/index.md
index da99acd1c43393..9aada0aa740490 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/i18n/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/index.md
@@ -36,7 +36,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/i18n
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
+> [!NOTE]
+> この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.md b/files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.md
index b4780e581e3411..0cd1d4bf31c70a 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.md
@@ -17,7 +17,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/i18n/LanguageCode
 
 {{WebExtExamples}}
 
-> **メモ:** この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#type-LanguageCode) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
+> [!NOTE]
+> この API は、Chromium の [`chrome.i18n`](https://developer.chrome.com/extensions/i18n#type-LanguageCode) API を基にしています。このドキュメンテーションは、Chromium コード内の [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) に由来しています。Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md b/files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md
index 7a37a5a64ebc28..14fdc9f1d6fd8e 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md
@@ -63,7 +63,8 @@ name には、次の文字が使用できます:
 - \_ (アンダースコア)
 - @
 
-> **メモ:** @@ で始まる name を定義してはいけません。この名前は [事前定義されたメッセージ](/ja/Add-ons/WebExtensions/Internationalization#Predefined_messages) で予約されています。
+> [!NOTE]
+> @@ で始まる name を定義してはいけません。この名前は [事前定義されたメッセージ](/ja/Add-ons/WebExtensions/Internationalization#Predefined_messages) で予約されています。
 
 ### message
 
diff --git a/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.md b/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.md
index 1689299232a98c..244f8116772069 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.md
@@ -39,4 +39,5 @@ var redirectURL = browser.identity.getRedirectURL();
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.identity`](https://developer.chrome.com/extensions/identity) API に基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います
+> [!NOTE]
+> この API は Chromium の [`chrome.identity`](https://developer.chrome.com/extensions/identity) API に基づいています。Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います
diff --git a/files/ja/mozilla/add-ons/webextensions/api/identity/index.md b/files/ja/mozilla/add-ons/webextensions/api/identity/index.md
index 86190e68d8cc5f..02fe12cca8b1e9 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/identity/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/identity/index.md
@@ -34,7 +34,8 @@ identity API は {{WebExtAPIRef("identity.launchWebAuthFlow()")}} 関数を提
 
 しかし、ループバックアドレスはドメイン検証を必要としない受け入れ可能な代替手段です（[RFC 8252, section 7.3](https://datatracker.ietf.org/doc/html/rfc8252#section-7.3) に基づいています）。Firefox 86 からは、`http://127.0.0.1/mozoauth2/[identity.getRedirectURL()]` が返す URL のサブドメイン] という形式のループバックアドレスをリダイレクト URL の値として許可しています。
 
-> **メモ:** Firefox 75 からは {{WebExtAPIRef("identity.getRedirectURL()")}} が返すリダイレクト URL を使用する必要があります。それ以前のバージョンでは、任意のリダイレクト URL を指定することができました。
+> [!NOTE]
+> Firefox 75 からは {{WebExtAPIRef("identity.getRedirectURL()")}} が返すリダイレクト URL を使用する必要があります。それ以前のバージョンでは、任意のリダイレクト URL を指定することができました。
 >
 > Firefox 86 以降は、記述されている特殊なループバックアドレスも使用することができます。
 
@@ -62,7 +63,8 @@ identity API は {{WebExtAPIRef("identity.launchWebAuthFlow()")}} 関数を提
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.identity`](https://developer.chrome.com/docs/extensions/reference/identity/) API に基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.identity`](https://developer.chrome.com/docs/extensions/reference/identity/) API に基づいています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/idle/index.md b/files/ja/mozilla/add-ons/webextensions/api/idle/index.md
index 8d8fddb14c9d48..4d83d9ee27f4d4 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/idle/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/idle/index.md
@@ -32,7 +32,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/idle
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.idle`](https://developer.chrome.com/extensions/idle) API. This documentation is derived from [`idle.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/idle.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.idle`](https://developer.chrome.com/extensions/idle) API. This documentation is derived from [`idle.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/idle.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/management/index.md b/files/ja/mozilla/add-ons/webextensions/api/management/index.md
index 0bee016fee5954..11bcaca765dffd 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/management/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/management/index.md
@@ -60,7 +60,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/management
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.management`](https://developer.chrome.com/extensions/management) API に基づいています。この文書は Chromium code の [`management.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/management.json) から派生しています。Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> この API は Chromium の [`chrome.management`](https://developer.chrome.com/extensions/management) API に基づいています。この文書は Chromium code の [`management.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/management.json) から派生しています。Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <pre class="hidden">// Copyright 2012 The Chromium Authors. All rights reserved.
 //
diff --git a/files/ja/mozilla/add-ons/webextensions/api/menus/index.md b/files/ja/mozilla/add-ons/webextensions/api/menus/index.md
index d0fcd060684137..b6d3240d374add 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/menus/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/menus/index.md
@@ -160,7 +160,8 @@ browser.menus.create(
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.contextMenus`](https://developer.chrome.com/extensions/contextMenus) API. This documentation is derived from [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json) in the Chromium code.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.contextMenus`](https://developer.chrome.com/extensions/contextMenus) API. This documentation is derived from [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json) in the Chromium code.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.md b/files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.md
index ac1634c7193b77..ab0f36b3e7bb5d 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.md
@@ -64,7 +64,8 @@ browser.menus.onClicked.addListener((info, tab) => {
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.contextMenus`](https://developer.chrome.com/extensions/contextMenus#event-onClicked) API. This documentation is derived from [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json) in the Chromium code.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.contextMenus`](https://developer.chrome.com/extensions/contextMenus#event-onClicked) API. This documentation is derived from [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json) in the Chromium code.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/notifications/index.md b/files/ja/mozilla/add-ons/webextensions/api/notifications/index.md
index 6d186be11742f0..2e921444bf2dbe 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/notifications/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/notifications/index.md
@@ -48,4 +48,5 @@ OS の通知メカニズムを使って、ユーザーへの通知を表示し
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.notifications`](https://developer.chrome.com/extensions/notifications) API.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.notifications`](https://developer.chrome.com/extensions/notifications) API.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/omnibox/index.md b/files/ja/mozilla/add-ons/webextensions/api/omnibox/index.md
index 03f48fd1f6e518..589f1aaafff451 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/omnibox/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/omnibox/index.md
@@ -47,4 +47,5 @@ omnibox API は、ユーザーが拡張機能で定義されたキーワード
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.omnibox`](https://developer.chrome.com/extensions/omnibox) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.omnibox`](https://developer.chrome.com/extensions/omnibox) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.md b/files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.md
index e88429b2332ef6..d70d1845bf9423 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.md
@@ -58,7 +58,8 @@ browser.pageAction.onClicked.addListener(function () {});
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.pageAction`](https://developer.chrome.com/extensions/pageAction#event-onClicked) API. This documentation is derived from [`page_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.pageAction`](https://developer.chrome.com/extensions/pageAction#event-onClicked) API. This documentation is derived from [`page_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/permissions/index.md b/files/ja/mozilla/add-ons/webextensions/api/permissions/index.md
index 2661c944977cc3..060bdf94555f31 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/permissions/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/permissions/index.md
@@ -56,4 +56,5 @@ To use the permissions API, decide which permissions your extension can request
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.permissions`](https://developer.chrome.com/extensions/permissions) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.permissions`](https://developer.chrome.com/extensions/permissions) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/privacy/index.md b/files/ja/mozilla/add-ons/webextensions/api/privacy/index.md
index 353cf66966adf4..4a372f3a8b525b 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/privacy/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/privacy/index.md
@@ -24,7 +24,8 @@ privacy API を使うには、"privacy" [API パーミッション](/ja/Add-ons/
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.privacy`](https://developer.chrome.com/extensions/privacy) API.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.privacy`](https://developer.chrome.com/extensions/privacy) API.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/proxy/index.md b/files/ja/mozilla/add-ons/webextensions/api/proxy/index.md
index dc8334aca550e1..7cc5428ed8fea8 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/proxy/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/proxy/index.md
@@ -141,4 +141,5 @@ browser.runtime.onMessage.addListener(handleMessage);
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/index.md b/files/ja/mozilla/add-ons/webextensions/api/runtime/index.md
index d707747c80c41e..5196560376b9f8 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/runtime/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/index.md
@@ -103,7 +103,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/runtime
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime) API に基づいています。また、このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime) API に基づいています。また、このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md b/files/ja/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md
index 8b2b2c9894d4d7..6c4879fc886c86 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md
@@ -70,7 +70,8 @@ setCookie.then(logCookie, logError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/docs/extensions/reference/runtime/#property-lastError) API に基づいています。また、このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium から作成されています。
+> [!NOTE]
+> この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/docs/extensions/reference/runtime/#property-lastError) API に基づいています。また、このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium から作成されています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md b/files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md
index 52729209c9f275..3f330470d5b56e 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md
@@ -33,7 +33,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/runtime/MessageSender
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#type-MessageSender) API に基づいています。このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#type-MessageSender) API に基づいています。このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md b/files/ja/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md
index dbabccb9a01268..f973dc540456b2 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md
@@ -68,7 +68,8 @@ browser.runtime.onInstalled.addListener(handleInstalled);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/docs/extensions/reference/runtime/#event-onInstalled) API に基づいています。また、このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/docs/extensions/reference/runtime/#event-onInstalled) API に基づいています。また、このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md b/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md
index ffa86db9309b51..cbacde75fdce5b 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md
@@ -18,7 +18,8 @@ l10n:
 
 `onMessage()` リスナーに受信させるメッセージを送るには、{{WebExtAPIRef("runtime.sendMessage()")}}、または (コンテンツスクリプトにメッセージを送るときは) {{WebExtAPIRef("tabs.sendMessage()")}} を使います。
 
-> **メモ:** 同じ種類のメッセージに対する `onMessage` リスナーを複数作ることは避けてください。複数のリスナーが実行される順番は保証されていないからです。
+> [!NOTE]
+> 同じ種類のメッセージに対する `onMessage` リスナーを複数作ることは避けてください。複数のリスナーが実行される順番は保証されていないからです。
 >
 > 特定のリスナーへのメッセージ伝送を保証したいときは、[コネクションベースのメッセージ](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#コネクションベースのメッセージ)を使ってください。
 
@@ -34,7 +35,8 @@ l10n:
 - イベントリスナーから `true` を返す。こうすることで、リスナーから復帰した後でも `sendResponse` 関数が有効なままになるため、後で実行することができます。[例を参照してください](#sendresponse_を使用した非同期の応答の送信)。
 - イベントリスナーから `Promise` を返して、応答が準備できた後にそれを解決する (またはエラーの場合は拒否する)。[例を参照してください](#プロミスを使用した非同期の応答の送信)。
 
-> **メモ:** また、[コネクションベースのメッセージ](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#コネクションベースのメッセージ)を使うこともできます。
+> [!NOTE]
+> また、[コネクションベースのメッセージ](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#コネクションベースのメッセージ)を使うこともできます。
 
 ## 構文
 
@@ -281,7 +283,8 @@ browser.runtime.onMessage.addListener(handleMessage);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#event-onMessage) API. このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#event-onMessage) API. このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md b/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md
index 58ef575ec94cf8..4e98af484218a1 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md
@@ -46,7 +46,8 @@ opening.then(onOpened, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#method-openOptionsPage) API. This documentation is derived from [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#method-openOptionsPage) API. This documentation is derived from [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md b/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md
index 2591566cd9ddc5..a2e8588e947727 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md
@@ -108,7 +108,8 @@ browser.runtime.onMessage.addListener(handleMessage);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#method-sendMessage) API に基づいています。このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#method-sendMessage) API に基づいています。このドキュメントは [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/sessions/index.md b/files/ja/mozilla/add-ons/webextensions/api/sessions/index.md
index e74aa20add2844..f6a7c7302c3755 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/sessions/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/sessions/index.md
@@ -61,7 +61,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/sessions
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.sessions`](https://developer.chrome.com/extensions/sessions) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.sessions`](https://developer.chrome.com/extensions/sessions) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.md b/files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.md
index e35bfe09fb51ff..1de5652a81faf9 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.md
@@ -45,7 +45,8 @@ sidebarAction API は Opera の [sidebarAction API](https://dev.opera.com/extens
 
 - [annotate-page](https://github.com/mdn/webextensions-examples/tree/master/annotate-page)
 
-> **メモ:** This API is based on Opera's [`chrome.sidebarAction`](https://dev.opera.com/extensions/sidebar-action-api/) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Opera's [`chrome.sidebarAction`](https://dev.opera.com/extensions/sidebar-action-api/) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/index.md
index c8a1357dabc8cb..7d7cedce8a9c57 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/index.md
@@ -20,7 +20,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage
 
 {{domxref("Window.localStorage")}}とこの API は似ていますが、拡張機能関連のデータを格納する際に拡張コード内で `Window.localStorage` を使わないことを推奨します。Firefox はプライバシー上の理由で、ブラウザー履歴やデータを消去などをする場合、localStorage API を利用して保存されたデータも消去します。しかし [`storage.local`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/local) API を利用して保存されたデータはこれらの場合でも保持されます。
 
-> **メモ:** ストレージ領域内は暗号化されていないため、ユーザーの機密情報を保存すべきではありません。
+> [!NOTE]
+> ストレージ領域内は暗号化されていないため、ユーザーの機密情報を保存すべきではありません。
 
 ## 型
 
@@ -51,7 +52,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.md
index b9d8d21a51d582..7e88eba18e04ad 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.md
@@ -39,7 +39,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage/local
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-local) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json)における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-local) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json)における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
index 84b45b277109e9..7348e2ab7b6f21 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
@@ -46,4 +46,5 @@ clearStorage.then(onCleared, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
index 595e7c44ecdf5c..2ad2cd395074ad 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
@@ -28,7 +28,8 @@ let gettingItem = browser.storage.<storageType>.get(
 
 成功時は `keys` で指定されたストレージ領域内のアイテム全てを含む `results` オブジェクトを引数に持つ [`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。
 
-> **警告:** 52 より前の Firefox バージョンのコンテンツスクリプトで使用する場合、 `browser.storage.local.get()` で返される Promise は 1 つのオブジェクトを持つ配列を引数に持ちます。配列内のオブジェクトは上記に記述したようにストレージ領域内の `keys` を持っています。 The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as `chrome.storage.local.get()`, it correctly passes an Object to the callback function.
+> [!WARNING]
+> 52 より前の Firefox バージョンのコンテンツスクリプトで使用する場合、 `browser.storage.local.get()` で返される Promise は 1 つのオブジェクトを持つ配列を引数に持ちます。配列内のオブジェクトは上記に記述したようにストレージ領域内の `keys` を持っています。 The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as `chrome.storage.local.get()`, it correctly passes an Object to the callback function.
 
 ## ブラウザーの互換性
 
@@ -132,4 +133,5 @@ chrome.storage.local.get("kitten", (items) => {
 });
 ```
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md
index d29faf52a23a53..4a72df7e3564a3 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.md
@@ -34,4 +34,5 @@ var gettingSpace = browser.storage.<storageType>.getBytesInUse(
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.md
index dae42806eb4408..9f52f070b56335 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.md
@@ -30,7 +30,8 @@ StorageArea はオブジェクト型です。
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage#type-StorageArea) API に模度づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium [`chrome.storage`](https://developer.chrome.com/extensions/storage#type-StorageArea) API に模度づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md
index 5137cd320b3322..b96fb063fa7282 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.md
@@ -51,4 +51,5 @@ removeKitten.then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
index f77c807d6f99b6..065117ae98e7cf 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
@@ -80,4 +80,5 @@ browser.storage.local.get("monster").then(gotMonster, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.md
index f68c9684b97a27..0bdeac2da571aa 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.md
@@ -22,7 +22,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageChange
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.md b/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.md
index 58f9f48aa3d90b..bf2e9fac32b058 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.md
@@ -34,7 +34,8 @@ Firefox の場合、ユーザーは `"about:preferences"` の "Sync 設定" オ
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-sync) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-sync) API に基づいています。また、このドキュメントは [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
index faa09b907a91f9..3848e0c8ab9c19 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
@@ -54,7 +54,8 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{Compat}}
 
-> **メモ:** この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-captureVisibleTab) API に基づいています。このドキュメントは [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-captureVisibleTab) API に基づいています。このドキュメントは [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.md
index 51f0ab76b77439..22b85958b22ea1 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.md
@@ -39,7 +39,8 @@ var creating = browser.tabs.create(
 
       - : `真理値`。ウィンドウ内で選択されるかどうかを指定します。デフォルトは`true`。
 
-        > **警告:** このプロパティは非推奨です。Firefox ではサポートされません。代わりに`active`を使用してください。
+        > [!WARNING]
+        > このプロパティは非推奨です。Firefox ではサポートされません。代わりに`active`を使用してください。
 
     - `url`{{optional_inline}}
 
@@ -90,7 +91,8 @@ browser.browserAction.onClicked.addListener(function () {
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の[`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-create) API に基づいています。 このドキュメントは [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の[`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-create) API に基づいています。 このドキュメントは [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) における Chromium のコードに基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
index 6a48728bc2ad34..95b10e6920f833 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
@@ -59,7 +59,8 @@ querying.then(duplicateFirstTab, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromiums の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-duplicate) API に基づいています。 This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromiums の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-duplicate) API に基づいています。 This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
index 100223aaf7fbf4..4a3626452dfd48 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
@@ -134,7 +134,8 @@ executing.then(onExecuted, onError);
 
 {{Compat}}
 
-> **メモ:** この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) API に基づいています。このドキュメントは [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) における Chromium のコードに基づいています。
+> [!NOTE]
+> この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-executeScript) API に基づいています。このドキュメントは [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) における Chromium のコードに基づいています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.md
index 1bfc78552e1187..577035fe916153 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.md
@@ -49,7 +49,8 @@ browser.tabs.onActivated.addListener(logListener);
 
 {{Compat}}
 
-> **メモ:** This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-get) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-get) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/index.md
index 094c4899c1782c..5fd5167ae1c4f8 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/index.md
@@ -152,7 +152,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md
index 95b1fdb84ad8f5..f111d8f7657c77 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md
@@ -24,7 +24,8 @@ This object contains a boolean indicating whether the tab is muted, and the reas
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#type-MutedInfo) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#type-MutedInfo) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md
index a75b24ba0d5dc8..1c2e6459825be4 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.md
@@ -24,7 +24,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/MutedInfoReason
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の[`chrome.tabs`](https://developer.chrome.com/extensions/tabs#type-MutedInfoReason) API に基づいています。このドキュメントは Chromium コードの[`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)から派生したものです。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、Creative Commons Attribution 3.0 United States License のもとにここに含まれています。
+> [!NOTE]
+> この API は Chromium の[`chrome.tabs`](https://developer.chrome.com/extensions/tabs#type-MutedInfoReason) API に基づいています。このドキュメントは Chromium コードの[`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)から派生したものです。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、Creative Commons Attribution 3.0 United States License のもとにここに含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
index d711d68e379a41..dbe21df9813bb8 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
@@ -55,7 +55,8 @@ browser.tabs.onCreated.addListener(handleCreated);
 
 {{Compat}}
 
-> **メモ:** この API は Chromium の[`chrome.tabs`](https://developer.chrome.com/extensions/tabs#event-onCreated) API に基づいています。このドキュメンテーションは Chromium code の中の[`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)からの派生です。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、ここに the Creative Commons Attribution 3.0 United States License のもとで含まれています。
+> [!NOTE]
+> この API は Chromium の[`chrome.tabs`](https://developer.chrome.com/extensions/tabs#event-onCreated) API に基づいています。このドキュメンテーションは Chromium code の中の[`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)からの派生です。Microsoft Edge の互換性データは Microsoft Corporation から提供されており、ここに the Creative Commons Attribution 3.0 United States License のもとで含まれています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.md
index 790bdaa174ea73..3c60a4f3609721 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.md
@@ -182,7 +182,8 @@ querying.then(logTabs, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-duplicate) API に基づいています。 This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-duplicate) API に基づいています。 This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.md
index 1a2abc4dcf9273..cae2d16359f791 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.md
@@ -64,7 +64,8 @@ removing.then(onRemoved, onError);
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-remove) API に基づいています。 This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> この API は Chromium の [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-remove) API に基づいています。 This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.md b/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.md
index bd4031bdef8d77..db6ad222dc2d3a 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.md
@@ -74,7 +74,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/Tab
 - `windowId`
   - : `integer`. このタブのホストのウィンドウの ID。
 
-> **メモ:** In extension background scripts, the only properties that are available are tabId and **windowId.**
+> [!NOTE]
+> In extension background scripts, the only properties that are available are tabId and **windowId.**
 
 ## ブラウザーの互換性
 
@@ -82,7 +83,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/Tab
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#type-Tab) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#type-Tab) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/theme/index.md b/files/ja/mozilla/add-ons/webextensions/api/theme/index.md
index 449e4b1a62e7e2..201abbe2cc10ab 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/theme/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/theme/index.md
@@ -9,7 +9,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/theme
 
 この API を使用するには、拡張機能の [manifest.json](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json) ファイルで "theme" [パーミッション](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) を要求しなければなりません。
 
-> **メモ:** バックグランドファイルでテーマをセットアップする場合、'theme' [パーミッション](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)を宣言しなければなりません。さもなければ、manifest の [theme](/ja/Add-ons/WebExtensions/manifest.json/theme) 関数を使用できません。
+> [!NOTE]
+> バックグランドファイルでテーマをセットアップする場合、'theme' [パーミッション](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)を宣言しなければなりません。さもなければ、manifest の [theme](/ja/Add-ons/WebExtensions/manifest.json/theme) 関数を使用できません。
 
 ## 型
 
diff --git a/files/ja/mozilla/add-ons/webextensions/api/topsites/index.md b/files/ja/mozilla/add-ons/webextensions/api/topsites/index.md
index 28199bca795cd9..9e9ad080cd54d8 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/topsites/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/topsites/index.md
@@ -27,7 +27,8 @@ topSites API を使うには "topSites" の [API パーミッション](/ja/Add-
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.topSites`](https://developer.chrome.com/extensions/topSites) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.topSites`](https://developer.chrome.com/extensions/topSites) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/types/index.md b/files/ja/mozilla/add-ons/webextensions/api/types/index.md
index 5dce7a94783722..068f18ab9a8c73 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/types/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/types/index.md
@@ -16,7 +16,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/types
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.types`](https://developer.chrome.com/extensions/types) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.types`](https://developer.chrome.com/extensions/types) API.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.md b/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.md
index c248a067b471fc..16cf83bd3b2b79 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.md
@@ -76,7 +76,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/webNavigation
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation) API. This documentation is derived from [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.webNavigation`](https://developer.chrome.com/extensions/webNavigation) API. This documentation is derived from [`web_navigation.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.md b/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.md
index edbac056eafb20..84627a05e86f17 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.md
@@ -54,7 +54,8 @@ websocket が ws\:// and wss\:// としてリクエストするものも含め
 
 これを行うには、イベント `addListener()` の `extraInfoSpec` の引数に"blocking"の値のオプションを渡す必要があります。これによりリスナーが同期します。このリスナーでは {{WebExtAPIRef("webRequest.BlockingResponse", "BlockingResponse")}} オブジェクトを返すことができ、このオブジェクトは加えた修正を指し示します: 例えば、送信したい修正後のリクエストヘッダーなど。
 
-> **警告:** Non-HTTP(S) protocols do not currently support `"blocking"` functionality, so modifying these requests is not available at this time. See [Firefox バグ 1475832](https://bugzil.la/1475832) for more details.
+> [!WARNING]
+> Non-HTTP(S) protocols do not currently support `"blocking"` functionality, so modifying these requests is not available at this time. See [Firefox バグ 1475832](https://bugzil.la/1475832) for more details.
 
 ## セキュリティ情報へのアクセス
 
@@ -130,7 +131,8 @@ TLS ハンドシェイクについて詳しく読むことができますが、
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest) API. This documentation is derived from [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.webRequest`](https://developer.chrome.com/extensions/webRequest) API. This documentation is derived from [`web_request.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/windows/index.md b/files/ja/mozilla/add-ons/webextensions/api/windows/index.md
index 016be913fe6128..ec038f48a5240c 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/windows/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/windows/index.md
@@ -57,7 +57,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/windows
 
 {{WebExtExamples("h2")}}
 
-> **メモ:** This API is based on Chromium's [`chrome.windows`](https://developer.chrome.com/extensions/windows) API. This documentation is derived from [`windows.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.windows`](https://developer.chrome.com/extensions/windows) API. This documentation is derived from [`windows.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.md b/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.md
index 28eb9799d7b982..01f16a50e6ba82 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.md
@@ -32,7 +32,8 @@ macOS の互換性: macOS 10.10 から、ウィンドウの既定の最大化動
 
 {{WebExtExamples}}
 
-> **メモ:** この API は Chromium の [`chrome.windows`](https://developer.chrome.com/docs/extensions/reference/windows/#type-WindowState) API に基づいています。この記事は Chromium コードの [`windows.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json) から派生しています。
+> [!NOTE]
+> この API は Chromium の [`chrome.windows`](https://developer.chrome.com/docs/extensions/reference/windows/#type-WindowState) API に基づいています。この記事は Chromium コードの [`windows.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json) から派生しています。
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.md b/files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.md
index 03e12e065b3a19..84a1fe37d93592 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.md
@@ -22,7 +22,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/windows/WindowType
 
 {{WebExtExamples}}
 
-> **メモ:** This API is based on Chromium's [`chrome.windows`](https://developer.chrome.com/extensions/windows#type-WindowType) API. This documentation is derived from [`windows.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.windows`](https://developer.chrome.com/extensions/windows#type-WindowType) API. This documentation is derived from [`windows.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.md b/files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.md
index 2bfc048b203d3a..ae7dbea4b5bfc6 100644
--- a/files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json
 
 {{Compat}}
 
-> **メモ:** Microsoft Edge の互換性データは Microsoft Corporation により提供され、Creative Commons Attribution 3.0 United States License の下でこのページに含めています。
+> [!NOTE]
+> Microsoft Edge の互換性データは Microsoft Corporation により提供され、Creative Commons Attribution 3.0 United States License の下でこのページに含めています。
 
 ## 関連情報
 
diff --git a/files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md b/files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md
index 9e9ace609239f9..267e0f453bc5fb 100644
--- a/files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
 
 {{WebExtAllCompatTables}}
 
-> **メモ:** Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
+> [!NOTE]
+> Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
 
 ## 関連情報
 
diff --git a/files/ja/mozilla/add-ons/webextensions/content_scripts/index.md b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.md
index 4e8df67d884d22..8d01b0146cfefe 100644
--- a/files/ja/mozilla/add-ons/webextensions/content_scripts/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.md
@@ -15,7 +15,8 @@ l10n:
 
 コンテンツスクリプトは、[WebExtension API の小さなサブセット](#webextension_api)にしかアクセスできませんが、メッセージングシステムを使用して [バックグラウンドスクリプトと通信](#バックグラウンドスクリプトとの通信)し、WebExtension API に間接的にアクセスすることができます。
 
-> **メモ:** コンテンツスクリプトは次のドメインでブロックされます。
+> [!NOTE]
+> コンテンツスクリプトは次のドメインでブロックされます。
 >
 > - accounts-static.cdn.mozilla.net
 > - accounts.firefox.com
@@ -137,7 +138,8 @@ window.confirm("Are you sure?"); // calls the original window.confirm()
 ]
 ```
 
-> **メモ:** Firefox ではコンテンツスクリプトからページスクリプトによって生成された JavaScript オブジェクトにアクセスしたり、ページスクリプトにコンテンツスクリプトの JavaScript オブジェクトを公開できるようにする API が提供されます。
+> [!NOTE]
+> Firefox ではコンテンツスクリプトからページスクリプトによって生成された JavaScript オブジェクトにアクセスしたり、ページスクリプトにコンテンツスクリプトの JavaScript オブジェクトを公開できるようにする API が提供されます。
 >
 > 詳しくは[ページスクリプトとオブジェクトを共有する](/ja/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts)のページを見てください。
 
@@ -178,23 +180,27 @@ window.confirm("Are you sure?"); // calls the original window.confirm()
 
 コンテンツスクリプトは通常の [`window.XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) と [`window.fetch()`](/ja/docs/Web/API/Fetch_API) API を使ってリクエストを作成できます。
 
-> **メモ:** Firefox では、コンテンツスクリプトの（例えば、[`fetch()`](/ja/docs/Web/API/Fetch_API/Using_Fetch) を使った）リクエストは、拡張機能のコンテキストで起こるので、ページコンテンツを参照する URL を絶対 URL で提供せねばなりません。
+> [!NOTE]
+> Firefox では、コンテンツスクリプトの（例えば、[`fetch()`](/ja/docs/Web/API/Fetch_API/Using_Fetch) を使った）リクエストは、拡張機能のコンテキストで起こるので、ページコンテンツを参照する URL を絶対 URL で提供せねばなりません。
 >
 > Chrome では、リクエストはページのコンテキストで起こるので、相対 URL で行われます。例えば、`/api` は `https://[現在のページの URL]/api` に送られます。
 
 コンテンツスクリプトは拡張機能の他の部分と同一のクロスドメイン権限を取得します。よって拡張機能が `manifest.json` の [`permissions`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) キーを使ってあるドメインのクロスドメインアクセスを要求している場合、コンテンツスクリプトも同様にそのドメインのアクセスを取得します。
 
-> **メモ:** Manifest V3 を使用する場合、出力先サーバーが [CORS](/ja/docs/Web/HTTP/CORS) を使用してオプトインするとき、コンテンツスクリプトはオリジン間リクエストを実行できます。ただし、コンテンツスクリプトではホスト権限は動作しませんが、通常の拡張ページではまだ動作しています。
+> [!NOTE]
+> Manifest V3 を使用する場合、出力先サーバーが [CORS](/ja/docs/Web/HTTP/CORS) を使用してオプトインするとき、コンテンツスクリプトはオリジン間リクエストを実行できます。ただし、コンテンツスクリプトではホスト権限は動作しませんが、通常の拡張ページではまだ動作しています。
 
 これは、コンテンツスクリプトでより特権的な XHR とフェッチインスタンスを公開することによって達成されます。これは、ページ自身からのリクエストのように、[`Origin`](/ja/docs/Web/HTTP/Headers/Origin) および [`Referer`](/ja/docs/Web/HTTP/Header/Referer) ヘッダーを設定しない副作用があります。これは、クロスオリジンの性質を明らかにしないリクエストを行うにはよく望ましいとされることです。
 
-> **メモ:** Manifest V2 の Firefox では、コンテンツ自身によって送信されたかのように振る舞うリクエストを実行する必要がある拡張機能は、代わりに `content.XMLHttpRequest` と `content.fetch()` を使用することができます。
+> [!NOTE]
+> Manifest V2 の Firefox では、コンテンツ自身によって送信されたかのように振る舞うリクエストを実行する必要がある拡張機能は、代わりに `content.XMLHttpRequest` と `content.fetch()` を使用することができます。
 >
 > クロスブラウザー拡張機能にとってこれらの存在は機能検出となります。
 >
 > Manifest V3 では `content.XMLHttpRequest` と `content.fetch()` が利用できないため、このようなことは起こりえません。
 
-> **メモ:** Chrome ではバージョン 73 から、Firefox ではバージョン 101 からマニフェスト V3 を使用する場合、コンテンツスクリプトは、その中で実行されるページと同じ [CORS](/ja/docs/Web/HTTP/CORS) ポリシーが適用されるようになりました。バックエンドスクリプトのみ、昇格したクロスドメイン特権があります。[Chrome Extension コンテンツスクリプトにおける Cross-Origin Requests の変更点](https://www.chromium.org/Home/chromium-security/extension-content-script-fetches)を参照してください。
+> [!NOTE]
+> Chrome ではバージョン 73 から、Firefox ではバージョン 101 からマニフェスト V3 を使用する場合、コンテンツスクリプトは、その中で実行されるページと同じ [CORS](/ja/docs/Web/HTTP/CORS) ポリシーが適用されるようになりました。バックエンドスクリプトのみ、昇格したクロスドメイン特権があります。[Chrome Extension コンテンツスクリプトにおける Cross-Origin Requests の変更点](https://www.chromium.org/Home/chromium-security/extension-content-script-fetches)を参照してください。
 
 ## バックグラウンドスクリプトとの通信
 
@@ -533,7 +539,8 @@ In page script, window.y: undefined
 
 同じことは [`setTimeout()`](/ja/docs/Web/API/setTimeout)、[`setInterval()`](/ja/docs/Web/API/setInterval)、[`Function()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function) にも言えます。
 
-> **警告:** ページのコンテキストでコードを実行するときは特に注意してください！
+> [!WARNING]
+> ページのコンテキストでコードを実行するときは特に注意してください！
 >
 > ページの環境が悪意をはらんだウェブページにコントロールされ、期待しない方法であなたが操作するオブジェクトを再定義するかもしれません。
 >
diff --git a/files/ja/mozilla/add-ons/webextensions/examples/index.md b/files/ja/mozilla/add-ons/webextensions/examples/index.md
index 84a025e4d4eb51..7527e0335d891f 100644
--- a/files/ja/mozilla/add-ons/webextensions/examples/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/examples/index.md
@@ -9,7 +9,8 @@ slug: Mozilla/Add-ons/WebExtensions/Examples
 
 これらのサンプルは Firefox Nightly で動作します。ほとんどのものがより早期の Firefox でも動作しますが、拡張機能の manifest.json に指定されている [`strict_min_version`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) キーを確認してください。
 
-> **警告:** いくつかの例では、特定のドメインまたはページでのみ動作します。制限事項の詳細は、各サンプルの readme ファイルに記載されています。どの例も既定ではプライベートブラウジングウィンドウでは動作しません。詳細は「[プライベートブラウジングでの拡張機能](https://support.mozilla.org/en-US/kb/extensions-private-browsing#w_enabling-or-disabling-extensions-in-private-windows)」をご覧ください。
+> [!WARNING]
+> いくつかの例では、特定のドメインまたはページでのみ動作します。制限事項の詳細は、各サンプルの readme ファイルに記載されています。どの例も既定ではプライベートブラウジングウィンドウでは動作しません。詳細は「[プライベートブラウジングでの拡張機能](https://support.mozilla.org/en-US/kb/extensions-private-browsing#w_enabling-or-disabling-extensions-in-private-windows)」をご覧ください。
 
 これらの例を試してみる場合は、リポジトリーをクローンしてから下記のようにしてください。
 
@@ -17,7 +18,8 @@ slug: Mozilla/Add-ons/WebExtensions/Examples
 2. コマンドラインで拡張機能のソースフォルダーを開き、 [web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) を使用して拡張機能を実行する。拡張機能は Firefox を再起動するまで読み込まれたままになります。
 3. Firefox で **ファイル** > **ファイルを開く** を使用し、 [build](https://github.com/mdn/webextensions-examples/tree/master/build) フォルダーにある例を探す。 `build` フォルダーにはビルドされ署名されたバージョンのすべての例が置いてあります。これは例を永続的にインストールします。
 
-> **警告:** この例の WebExtension を addons.mozilla.org (AMO) に投稿しないでください、WebExtension の例を実行するのに署名をする必要はありません。単に上記の手順に従ってください。
+> [!WARNING]
+> この例の WebExtension を addons.mozilla.org (AMO) に投稿しないでください、WebExtension の例を実行するのに署名をする必要はありません。単に上記の手順に従ってください。
 
 リポジトリーに貢献したい方は、是非とも [pull request](https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md) を送ってください！
 
diff --git a/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md b/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md
index 6fba09f14ecf39..d9be328a7b50b4 100644
--- a/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
 
 {{AddonSidebar}}
 
-> **メモ:** このページでは、Firefox 55 に存在する devtools API について説明しています。この API は[Chrome devtools APIs](https://developer.chrome.com/extensions/devtools)に基づいていますが、まだ Firefox では実装されていないため、ここでは説明していません。現在欠けている機能を確認するには、[devtools API の制限](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs)を参照してください。
+> [!NOTE]
+> このページでは、Firefox 55 に存在する devtools API について説明しています。この API は[Chrome devtools APIs](https://developer.chrome.com/extensions/devtools)に基づいていますが、まだ Firefox では実装されていないため、ここでは説明していません。現在欠けている機能を確認するには、[devtools API の制限](/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs)を参照してください。
 
 WebExtensions API を使用して、ブラウザーの組み込み開発者ツールを拡張できます。 devtools 拡張機能を作成するには、[manifest.json](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json) に "[devtools_page](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page)" キーを含めます:
 
@@ -80,7 +81,8 @@ browser.devtools.panels
 
 - コンテンツスクリプトとは異なり、**`devtools.inspectedWindow.eval()`** を使用してロードされたスクリプトは「[DOM のクリーンビュー](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#DOM_access)」を取得**しません**。つまり、ページスクリプトによって行われたページの変更を確認できます。
 
-> **メモ:** DOM のクリーンビューはセキュリティ機能であり、ネイティブ DOM 関数の動作を再定義することにより、悪意のあるページが拡張機能をだますことを防ぐのに役立つことに注意してください。これは eval() を使用する際に非常に注意する必要があることを意味し、可能であれば通常のコンテンツスクリプトを使用する必要があります。
+> [!NOTE]
+> DOM のクリーンビューはセキュリティ機能であり、ネイティブ DOM 関数の動作を再定義することにより、悪意のあるページが拡張機能をだますことを防ぐのに役立つことに注意してください。これは eval() を使用する際に非常に注意する必要があることを意味し、可能であれば通常のコンテンツスクリプトを使用する必要があります。
 
 `devtools.inspectedWindow.eval()` を使用してロードされたスクリプトも、コンテンツスクリプトで定義された JavaScript 変数を認識しません。
 
diff --git a/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.md b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.md
index 4a10f3d11051c2..7209b78acf345f 100644
--- a/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.md
@@ -144,15 +144,18 @@ document.querySelector("form").addEventListener("submit", saveOptions);
 - 文書が読み込まれた時、"color" の値を [`storage.sync.get()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get) を使ってストレージから取り出します。値が未設定なら、既定の "blue" を用います。これで値を `sync` ストレージ領域から取得できます。
 - ユーザーが "Save" を押して送信した時、テキストボックスの値を [`storage.sync.set()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set) を用いて保存します。これで値を `sync` ストレージ領域に保存できます。
 
-> **メモ:** 別々の .js ファイルの指定が必要です。インライン JavaScript は使用できません。
+> [!NOTE]
+> 別々の .js ファイルの指定が必要です。インライン JavaScript は使用できません。
 
 ローカルストレージがふさわしいと感じる場合、代わりにローカルストレージに設定値を保存できます。
 
-> **メモ:** Firefox の `storage.sync` の実装はアドオン ID に依存しているのに注意します。`storage.sync` を使う場合、上記 manifest にあるように、manifest.json の [`applications`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications) キーに拡張機能の ID をセットしておく必要があります。
+> [!NOTE]
+> Firefox の `storage.sync` の実装はアドオン ID に依存しているのに注意します。`storage.sync` を使う場合、上記 manifest にあるように、manifest.json の [`applications`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications) キーに拡張機能の ID をセットしておく必要があります。
 
 最後に、ストレージから枠の色を読むのに "borderify.js" を更新します:
 
-> **警告:** バージョン 52 より前の Firefox の [browser.storage.local.get()](/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get) のバグにより、下記のコードは機能しません。バージョン 52 より前の Firefox で動作させるには、`onGot()` の中で 2 回出てくる `item.color` を `item[0].color` に変えないといけません。
+> [!WARNING]
+> バージョン 52 より前の Firefox の [browser.storage.local.get()](/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get) のバグにより、下記のコードは機能しません。バージョン 52 より前の Firefox で動作させるには、`onGot()` の中で 2 回出てくる `item.color` を `item[0].color` に変えないといけません。
 
 ```js
 function onError(error) {
diff --git a/files/ja/mozilla/add-ons/webextensions/internationalization/index.md b/files/ja/mozilla/add-ons/webextensions/internationalization/index.md
index da75ae7a973971..53169fdc3e8a7d 100644
--- a/files/ja/mozilla/add-ons/webextensions/internationalization/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/internationalization/index.md
@@ -9,7 +9,8 @@ l10n:
 
 [WebExtensions](/ja/docs/Mozilla/Add-ons/WebExtensions) API には、拡張機能を国際化するとても簡単なモジュール — [i18n](/ja/docs/Mozilla/Add-ons/WebExtensions/API/i18n) があります。この記事ではその機能を見てみて、どのように動作するのかの実例を提供します。WebExtensions API を使った拡張機能用の i18n システムは、[i18n.js](http://i18njs.com/) のような、よくある i10n 用 JavaScript ライブラリーと同様です。
 
-> **メモ:** この記事の見本の拡張機能— [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n) — は GitHub で入手できます。以下の節を進んでいくのに合わせてコードを追ってください。
+> [!NOTE]
+> この記事の見本の拡張機能— [notify-link-clicks-i18n](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n) — は GitHub で入手できます。以下の節を進んでいくのに合わせてコードを追ってください。
 
 ## 国際化拡張機能の中身
 
diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/index.md b/files/ja/mozilla/add-ons/webextensions/manifest.json/index.md
index b39ef20b62526b..c8804fb9c53dbe 100644
--- a/files/ja/mozilla/add-ons/webextensions/manifest.json/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/index.md
@@ -33,7 +33,8 @@ browser.runtime.getManifest().version;
 
 下記のブロックには一般的な manifest keys の基本文法を示します。
 
-> **メモ:** これはコピー・ペーストできるような使われ方のつもりではないのに注意してください: どのキーが必要かは開発している拡張機能に依存します。
+> [!NOTE]
+> これはコピー・ペーストできるような使われ方のつもりではないのに注意してください: どのキーが必要かは開発している拡張機能に依存します。
 
 完全な例は [Example extensions](/ja/docs/Mozilla/Add-ons/WebExtensions/Examples) を見てください。
 
diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.md b/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.md
index d4b4dedf5f5bd9..a2422e1a862343 100644
--- a/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.md
@@ -147,7 +147,8 @@ API 権限には、拡張機能から使用したい [WebExtension API](/ja/docs
 
 例えば、ユーザーがブラウザーアクションをクリックした時に現在のページでスクリプトを実行する拡張機能を考えます。`activeTab` 権限がない場合、拡張機能は `<all_urls>` の host 権限を要求する必要があります。しかし、これは拡張機能に必要以上の力を与えています。アクティブなタブで単にユーザーアクションに応答する代わりに、*任意のタブ*で、*任意の時*に、スクリプトを実行できます。
 
-> **メモ:** ユーザー操作 (例：クリック) が発生したときに存在していたタブ／データにのみアクセスできます。アクティブなタブが移動すると (例：読み込みの終了やその他のイベントにより)、権限はそのタブへのアクセスを許可しなくなります。
+> [!NOTE]
+> ユーザー操作 (例：クリック) が発生したときに存在していたタブ／データにのみアクセスできます。アクティブなタブが移動すると (例：読み込みの終了やその他のイベントにより)、権限はそのタブへのアクセスを許可しなくなります。
 
 通常、 `activeTab` が付与されるタブは、 1 つのケースを除いて、単に現在アクティブなタブです。 {{webextAPIref("menus")}} API では、ユーザーがタブをコンテキストクリックしたときに表示されるメニュー項目を作成することができます (つまり、ユーザーがあるタブから別のタブに切り替えることができるタブトリップの要素)。
 
diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md b/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md
index 51aa0609486b3c..539abc8835e45e 100644
--- a/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md
@@ -66,7 +66,8 @@ moz-extension://<extension-UUID>/images/my-image.png
 
 `<extension-UUID>` は拡張機能の ID **ではありません。**これは各ブラウザーインスタンス用にランダムに生成されます。これはウェブサイトがインストールしている拡張機能を調べることで指紋を取ることを防止します。
 
-> **メモ:** Chrome では、拡張機能の ID は固定です。リソースを `web_accessible_resouce` に指定すると、`chrome-extension://<your-extension-id>/<path/to/resouce>` でアクセス可能です。
+> [!NOTE]
+> Chrome では、拡張機能の ID は固定です。リソースを `web_accessible_resouce` に指定すると、`chrome-extension://<your-extension-id>/<path/to/resouce>` でアクセス可能です。
 
 この URL を取得する推奨される方法は、[`browser.runtime.getURL`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/getURL) API を使用して、 manifest.json の相対パスとして渡すことです:
 
diff --git a/files/ja/mozilla/add-ons/webextensions/match_patterns/index.md b/files/ja/mozilla/add-ons/webextensions/match_patterns/index.md
index b12a279e927e0f..76fa23e1654918 100644
--- a/files/ja/mozilla/add-ons/webextensions/match_patterns/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/match_patterns/index.md
@@ -11,7 +11,8 @@ slug: Mozilla/Add-ons/WebExtensions/Match_patterns
 
 ## マッチパターンの構造
 
-> **メモ:** ブラウザーによってはサポートしていないスキームがあります。
+> [!NOTE]
+> ブラウザーによってはサポートしていないスキームがあります。
 > 詳しくは[ブラウザー互換性テーブル](/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#Browser_compatibility)を見てください。
 
 すべてのマッチパターンは文字列で指定します。特別な値 [`<all_urls>`](/ja/Add-ons/WebExtensions/Match_patterns#%3Call_urls%3E) を除き、マッチパターンは３つの部分から成り立っています。 _scheme_, _host_, _path_ です。 scheme と host の間は `://` で句切られます。
@@ -55,7 +56,8 @@ _path_ の値は、URL パスに [URL クエリーストリング](https://en.wi
 
 [URL フラグメント識別子](https://en.wikipedia.org/wiki/Fragment_identifier)や、`#` の後についているものは、_path_ とみなされません。
 
-> **メモ:** path パターン文字列にポート番号を含めるべきではありません。`http://localhost:1234/*` のようにポート番号を追加するとマッチパターンは無視されます。しかし、`http://localhost:1234` は `http://localhost/*` にマッチします。
+> [!NOTE]
+> path パターン文字列にポート番号を含めるべきではありません。`http://localhost:1234/*` のようにポート番号を追加するとマッチパターンは無視されます。しかし、`http://localhost:1234` は `http://localhost/*` にマッチします。
 
 ### \<all_urls>
 
diff --git a/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.md b/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.md
index d1a2c7ad5031cc..50614310f54477 100644
--- a/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.md
@@ -59,7 +59,8 @@ document.body.appendChild(header);
 
 {{EmbedYouTube("lxf2Tkg6U1M")}}
 
-> **メモ:** このビデオでは [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/) で動作するコンテンツスクリプトを示していますが、現在このサイトではコンテンツスクリプトはブロックされています。
+> [!NOTE]
+> このビデオでは [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/) で動作するコンテンツスクリプトを示していますが、現在このサイトではコンテンツスクリプトはブロックされています。
 
 ## 自動でページを変更する
 
@@ -118,7 +119,8 @@ modify-page/
 
 {{EmbedYouTube("zX4Bcv8VctA")}}
 
-> **メモ:** このビデオでは [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/) で動作するコンテンツスクリプトを示していますが、現在このサイトではコンテンツスクリプトはブロックされています。
+> [!NOTE]
+> このビデオでは [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/) で動作するコンテンツスクリプトを示していますが、現在このサイトではコンテンツスクリプトはブロックされています。
 
 ## メッセージ
 
@@ -129,7 +131,8 @@ modify-page/
 | メッセージ送信 | [`browser.runtime.sendMessage()`](</ja/Add-ons/WebExtensions/API/runtime#sendMessage()>) | [`browser.tabs.sendMessage()`](/ja/Add-ons/WebExtensions/API/Tabs/sendMessage) |
 | メッセージ受信 | [`browser.runtime.onMessage`](/ja/Add-ons/WebExtensions/API/runtime/onMessage)           | [`browser.runtime.onMessage`](/ja/Add-ons/WebExtensions/API/runtime#onMessage) |
 
-> **メモ:** このワンオフメッセージを送る通信メソッドに加えて、[メッセージ交換するコネクションベースの方法](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging)も使えます。これらのオプションを選択するアドバイスは、[ワンオフメッセージとコネクションベースのメッセージのいずれかを選択する](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Choosing_between_one-off_messages_and_connection-based_messaging)を見てください。
+> [!NOTE]
+> このワンオフメッセージを送る通信メソッドに加えて、[メッセージ交換するコネクションベースの方法](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging)も使えます。これらのオプションを選択するアドバイスは、[ワンオフメッセージとコネクションベースのメッセージのいずれかを選択する](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Choosing_between_one-off_messages_and_connection-based_messaging)を見てください。
 
 例を更新して、バックグラウンドスクリプトからメッセージを送信する方法を示します。
 
@@ -183,7 +186,8 @@ browser.runtime.onMessage.addListener(eatPageReceiver);
 
 [`tabs.executeScript()`](/ja/Add-ons/WebExtensions/API/tabs/executeScript) は非同期関数であり、リスナーが "page-eater.js" に追加された後にのみメッセージを送信するために、"page-eater.js" を実行した後に呼び出される `onExecuted` を使用します。
 
-> **メモ:** Ctrl+Shift+J (Mac では Cmd+Shift+J) を押します。もしくは `web-ext run --bc` で [Browser Console](/ja/docs/Tools/Browser_Console) を開きバックグラウンドスクリプトの `console.log` を見ます。または、 [Add-on Debugger](/ja/Add-ons/Add-on_Debugger) を使用して、ブレークポイントを設定することもできます。 現在、[web-ext から 直接 Add-on Debugger を起動する](https://github.com/mozilla/web-ext/issues/759) 方法はありません。
+> [!NOTE]
+> Ctrl+Shift+J (Mac では Cmd+Shift+J) を押します。もしくは `web-ext run --bc` で [Browser Console](/ja/docs/Tools/Browser_Console) を開きバックグラウンドスクリプトの `console.log` を見ます。または、 [Add-on Debugger](/ja/Add-ons/Add-on_Debugger) を使用して、ブレークポイントを設定することもできます。 現在、[web-ext から 直接 Add-on Debugger を起動する](https://github.com/mozilla/web-ext/issues/759) 方法はありません。
 
 コンテンツスクリプトからバックグラウンドページにメッセージを戻したい場合は、 [`runtime.sendMessage()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage) の代わりに [`tabs.sendMessage()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage) を使用します。
 
@@ -195,7 +199,8 @@ browser.runtime.sendMessage({
 });
 ```
 
-> **メモ:** これらの例はすべて JavaScript を注入します。 [`tabs.insertCSS()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS) 関数を使用してプログラムで CSS を挿入することもできます。
+> [!NOTE]
+> これらの例はすべて JavaScript を注入します。 [`tabs.insertCSS()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS) 関数を使用してプログラムで CSS を挿入することもできます。
 
 ## 関連項目
 
diff --git a/files/ja/mozilla/add-ons/webextensions/native_messaging/index.md b/files/ja/mozilla/add-ons/webextensions/native_messaging/index.md
index df7a9dc4fde8c5..d2050cb669ff25 100644
--- a/files/ja/mozilla/add-ons/webextensions/native_messaging/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/native_messaging/index.md
@@ -66,9 +66,11 @@ GitHub の "webextensions-examples" リポジトリーの ["`native-messaging`"
 }
 ```
 
-> **メモ:** Chrome は [browser_specific_settings](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) キーに対応していません。 Chrome に同等の WebExtension をインストールするには、このキーを含まない別のマニフェストを使用する必要があります。以下の [Chrome の非互換性](#chrome_での非互換性)を参照してください。
+> [!NOTE]
+> Chrome は [browser_specific_settings](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) キーに対応していません。 Chrome に同等の WebExtension をインストールするには、このキーを含まない別のマニフェストを使用する必要があります。以下の [Chrome の非互換性](#chrome_での非互換性)を参照してください。
 
-> **メモ:** オプションの権限を使用する場合、権限が付与されていることを確認し、必要に応じて {{WebExtAPIRef("permissions")}} API でユーザーに権限を要求してからネイティブアプリケーションと通信してください。
+> [!NOTE]
+> オプションの権限を使用する場合、権限が付与されていることを確認し、必要に応じて {{WebExtAPIRef("permissions")}} API でユーザーに権限を要求してからネイティブアプリケーションと通信してください。
 
 ### アプリマニフェスト
 
@@ -92,7 +94,8 @@ GitHub の "webextensions-examples" リポジトリーの ["`native-messaging`"
 
 この設定では、 `"ping_pong@example.org"` という ID の 拡張機能において `"ping_pong"` という名前を {{WebExtAPIRef("runtime")}} API の関数に渡すことによる接続が許可されます。 アプリケーション自体は `"/path/to/native-messaging/app/ping_pong.py"` です。
 
-> **メモ:** Chrome は、 WebExtension の ID を使用して、`allowed_origins` という別のキーで許可される拡張機能を識別します。詳しくは [Chrome のドキュメント](https://developer.chrome.com/docs/apps/nativeMessaging/#native-messaging-host)を参照し、以下の [Chrome での非互換性](#chrome_での非互換性)を参照してください。
+> [!NOTE]
+> Chrome は、 WebExtension の ID を使用して、`allowed_origins` という別のキーで許可される拡張機能を識別します。詳しくは [Chrome のドキュメント](https://developer.chrome.com/docs/apps/nativeMessaging/#native-messaging-host)を参照し、以下の [Chrome での非互換性](#chrome_での非互換性)を参照してください。
 
 ### Windows セットアップ
 
@@ -136,7 +139,8 @@ python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"
 
   - このキーの既定値は、アプリケーションマニフェストへのパスへのパスとなります。
 
-> **メモ:** GitHub にあるサンプルを元に作業を行う場合は、ブラウザーに WebExtension をインストールする前に、 [readme のこの部分](https://github.com/SphinxKnight/webextensions-examples/tree/master/native-messaging#windows-setup)を読み、 `check_config_win.py` の出力をチェックしてください。
+> [!NOTE]
+> GitHub にあるサンプルを元に作業を行う場合は、ブラウザーに WebExtension をインストールする前に、 [readme のこの部分](https://github.com/SphinxKnight/webextensions-examples/tree/master/native-messaging#windows-setup)を読み、 `check_config_win.py` の出力をチェックしてください。
 
 ## メッセージの交換
 
@@ -157,7 +161,8 @@ python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"
 - アプリマニフェストの完全パス
 - (Firefox 55 以降で) 起動元のアドオンの ID (manifest.json の [browser_specific_settings](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) キーにて指定)
 
-> **メモ:** Chrome では引数の扱いが異なります。
+> [!NOTE]
+> Chrome では引数の扱いが異なります。
 >
 > - Linux と Macでは、Chrome は引数を、拡張機能が開始するオリジンを次の形: `chrome-extension://[extensionID]`で渡します。これによりアプリは拡張機能を識別できます。
 > - Windowsでは、Chrome は 2 つの引数を渡します、 1 つ目は拡張機能のオリジンで、 2 つ目はアプリを開始するChrome ネイティブウィンドウのハンドルです。
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md
index 50f02196b155fb..477b23c0d25aab 100644
--- a/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
 
 {{AddonSidebar}}
 
-> **メモ:** この機能は Firefox 54 以降で利用できます。
+> [!NOTE]
+> この機能は Firefox 54 以降で利用できます。
 
 拡張機能が開発者にとって有用なツールを提供する場合、その UI をブラウザーの開発者ツールに新しいパネルとして追加することが可能です。
 
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/index.md b/files/ja/mozilla/add-ons/webextensions/user_interface/index.md
index 6426a61fd1dae0..6f56a37a6f4bf9 100644
--- a/files/ja/mozilla/add-ons/webextensions/user_interface/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/user_interface/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/user_interface
 
 WebExtension API を使った機能拡張には、いくつかのユーザーインターフェイスオプションが提供されていて、ユーザーがこれによって機能を利用できます。この節では、下記にこのオプションの要約と、それぞれのユーザーインターフェイスオプションの詳細な導入とがあります。
 
-> **メモ:** 機能拡張でこれらの UI コンポーネントを使って優れた使い勝手を実現するためのアドバイスとして、[ユーザーエクスペリエンスのベストプラクティス](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/) （英語）の記事を見てください。
+> [!NOTE]
+> 機能拡張でこれらの UI コンポーネントを使って優れた使い勝手を実現するためのアドバイスとして、[ユーザーエクスペリエンスのベストプラクティス](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/) （英語）の記事を見てください。
 
 <table class="standard-table">
   <thead>
diff --git a/files/ja/mozilla/add-ons/webextensions/working_with_files/index.md b/files/ja/mozilla/add-ons/webextensions/working_with_files/index.md
index f16a5588c94320..8256dc694e3609 100644
--- a/files/ja/mozilla/add-ons/webextensions/working_with_files/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/working_with_files/index.md
@@ -25,7 +25,8 @@ browser.downloads.download({ url: "https://example.org/image.png" });
 
 ユーザーが `saveAs` パラメーターで指定した場所にダウンロードさせることもできます。
 
-> **メモ:** Using [URL.createObjectURL()](/ja/docs/Web/API/URL/createObjectURL) you can also download files and blobs defined in your JavaScript, which can include local content retrieved from IndexedDB.
+> [!NOTE]
+> Using [URL.createObjectURL()](/ja/docs/Web/API/URL/createObjectURL) you can also download files and blobs defined in your JavaScript, which can include local content retrieved from IndexedDB.
 
 ダウンロード API はダウンロードをキャンセル、停止、再開、消去、削除することもできます; ダウンロードマネージャーでダウンロード済みのファイルを探します; コンピューターのファイルマネージャーでダウンロード済みのファイルを表示します; 関連付けられたアプリケーションでそのファイルを開きます。
 
@@ -42,7 +43,8 @@ API リファレンス: [downloads API](/ja/docs/Mozilla/Add-ons/WebExtensions/A
 ガイド: [Using files from web applications](/ja/docs/Using_files_from_web_applications)
 API リファレンス: [HTML input element](/ja/docs/Web/HTML/Element/input/file) | [DOM File API](/ja/docs/Web/API/File)
 
-> **メモ:** 選択したフォルダーの全ファイルにアクセスや処理したい場合、`<input type="file" webkitdirectory="true"/>` を使ってフォルダーを選択して、そこにある全ファイルを返すようにできます。
+> [!NOTE]
+> 選択したフォルダーの全ファイルにアクセスや処理したい場合、`<input type="file" webkitdirectory="true"/>` を使ってフォルダーを選択して、そこにある全ファイルを返すようにできます。
 
 ## ドラッグアンドドロップを使って拡張機能でファイルを開く
 
@@ -129,7 +131,8 @@ Once the blob URL has been revoked any attempt to load it will result in an erro
 Example: [Store Collected Images](https://github.com/mdn/webextensions-examples/tree/master/store-collected-images/webextension-plain)
 API References: [idb-file-storage library](https://rpl.github.io/idb-file-storage/)
 
-> **メモ:** You can also use the full Web [IndexedDB API](/ja/docs/Web/API/IndexedDB_API) to store data from your extension. This can be useful where you need to store data that isn't handled well by the simple key/value pairs offered by the DOM [Storage API](/ja/Add-ons/WebExtensions/API/Storage).
+> [!NOTE]
+> You can also use the full Web [IndexedDB API](/ja/docs/Web/API/IndexedDB_API) to store data from your extension. This can be useful where you need to store data that isn't handled well by the simple key/value pairs offered by the DOM [Storage API](/ja/Add-ons/WebExtensions/API/Storage).
 
 ## ローカルアプリでファイルを処理する
 
diff --git a/files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md b/files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md
index 63488b417d5abf..f405b0023b4e5a 100644
--- a/files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md
@@ -17,7 +17,8 @@ slug: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
 
 その次には、API で提供されるその他のいろいろな機能を見て終わります。
 
-> **メモ:** There are some Tab API features covered elsewhere. These are the methods you can use to manipulate tab content with scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, and {{WebExtAPIRef("tabs.executeScript")}}). If you want more information on these methods, see the Concepts article [Content scripts](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) and the how-to guide [Modify a web page](/ja/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page).
+> [!NOTE]
+> There are some Tab API features covered elsewhere. These are the methods you can use to manipulate tab content with scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, and {{WebExtAPIRef("tabs.executeScript")}}). If you want more information on these methods, see the Concepts article [Content scripts](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) and the how-to guide [Modify a web page](/ja/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page).
 
 ## 権限と Tabs API
 
@@ -76,7 +77,8 @@ Tabs API 機能の大半では権限は不要ですが、次の例外はあり
 }
 ```
 
-> **メモ:** 次のことに注意します:
+> [!NOTE]
+> 次のことに注意します:
 >
 > - **tabs.html は `browser_action` の `default_popup` で定義されていること。**これはユーザーが拡張機能のツールバーアイコンをクリックするといつでも表示されます。
 > - **権限にタブが入っていること。**これはタブリスト機能をサポートするのに必要であり、なぜなら拡張機能がポップアップに表示するためにタブのタイトルを読み取るためです。
@@ -241,7 +243,7 @@ The following functions are available:
 - update the tab's URL—effectively browse to a new page—({{WebExtAPIRef("tabs.update")}}).
 - reload the tab's page ({{WebExtAPIRef("tabs.reload")}}).
 
-> **メモ:**
+> [!NOTE]
 >
 > These functions all require the ID (or IDs) of the tab they are manipulating:
 >
diff --git a/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md
index bf87472368ecec..1c77203f380145 100644
--- a/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md
@@ -123,7 +123,8 @@ Firefox の場合: [about:debugging](/ja/docs/Tools/about:debugging) ページ
 
 {{EmbedYouTube("rxBQl2Z9IBQ")}}
 
-> **メモ:** ただ addons.mozilla.org では試さないで! このドメインでは現在、コンテンツスクリプトがブロックされています。
+> [!NOTE]
+> ただ addons.mozilla.org では試さないで! このドメインでは現在、コンテンツスクリプトがブロックされています。
 
 もう少し実験をします。コンテンツスクリプトを編集して、枠線の色を変更したり、ページのコンテンツに何か他の操作を加えてみましょう。コンテンツスクリプトを保存し、"about:debugging"の"再読み込み"ボタンをクリックして拡張機能ファイルを再読み込みすると、加えた変更がすぐに反映されているはずです。
 
diff --git a/files/ja/mozilla/firefox/experimental_features/index.md b/files/ja/mozilla/firefox/experimental_features/index.md
index c86c3d5a728bdb..364479825d6287 100644
--- a/files/ja/mozilla/firefox/experimental_features/index.md
+++ b/files/ja/mozilla/firefox/experimental_features/index.md
@@ -14,7 +14,8 @@ slug: Mozilla/Firefox/Experimental_features
 
 実験的な機能は、 [Firefox 設定エディター](https://support.mozilla.org/ja/kb/about-config-editor-firefox) (Firefox のアドレスバーに `about:config` と入力) を使って、以下に示す関連する*設定*を変更することで、有効または無効にすることができます。
 
-> **メモ:** 編集者の方へ - これらの表に機能を追加する際には、リンク `[Firefox バグ <number>](https://bugzil.la/<number>)` を使って関連するバグへのリンクを含めるようにしてください。
+> [!NOTE]
+> 編集者の方へ - これらの表に機能を追加する際には、リンク `[Firefox バグ <number>](https://bugzil.la/<number>)` を使って関連するバグへのリンクを含めるようにしてください。
 
 ## HTML
 
@@ -1705,7 +1706,8 @@ Android 版 Firefox で、 [AV1 形式のメディア](/ja/docs/Web/Media/Format
 
 [`Clear-Site-Data`](/ja/docs/Web/HTTP/Headers/Clear-Site-Data) HTTP レスポンスヘッダーの `cache` ディレクティブは、リクエストしているウェブサイトのブラウザーキャッシュをクリアします。
 
-> **メモ:** これは元々既定で有効でしたが、バージョン 9 4で優先順位が付けられました ([Firefox バグ 1729291](https://bugzil.la/1729291))。
+> [!NOTE]
+> これは元々既定で有効でしたが、バージョン 9 4で優先順位が付けられました ([Firefox バグ 1729291](https://bugzil.la/1729291))。
 
 <table>
   <thead>
diff --git a/files/ja/mozilla/firefox/releases/10/index.md b/files/ja/mozilla/firefox/releases/10/index.md
index a46ee61cb66b89..c4c85c20e1d895 100644
--- a/files/ja/mozilla/firefox/releases/10/index.md
+++ b/files/ja/mozilla/firefox/releases/10/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/10
 
 Gecko 10.0 を搭載した Firefox 10 は米国時間 2012 年 1 月 31 日にリリースされました。このページでは、開発者に影響する Firefox 10 の変更点をまとめています。
 
-> **メモ:** Firefox 10 は、2 桁の数値で表記される最初のリリースです。これにより、一部の UserAgent 検出スクリプトで問題が発生するおそれがあります。そのようなスクリプトや、ページに埋め込まれているサードパーティのソフトウェア (ライブラリーなど) で UserAgent 検出を行っているものの確認を行うようにしてください。この点に関する詳細情報は、hack.mozilla.org の記事 [Firefox goes 2-digit article on](http://hacks.mozilla.org/2012/01/firefox-goes-2-digit-time-to-check-your-ua-sniffing-scripts/) をご覧ください。
+> [!NOTE]
+> Firefox 10 は、2 桁の数値で表記される最初のリリースです。これにより、一部の UserAgent 検出スクリプトで問題が発生するおそれがあります。そのようなスクリプトや、ページに埋め込まれているサードパーティのソフトウェア (ライブラリーなど) で UserAgent 検出を行っているものの確認を行うようにしてください。この点に関する詳細情報は、hack.mozilla.org の記事 [Firefox goes 2-digit article on](http://hacks.mozilla.org/2012/01/firefox-goes-2-digit-time-to-check-your-ua-sniffing-scripts/) をご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
@@ -113,7 +114,8 @@ IndexedDB を最新のドラフト仕様に更新するための大きな進展
 
 アドオンを Firefox 10 へ対応させる際に発生すると思われる問題の概要に関しては、[Updating add-ons for Firefox 10](/ja/docs/Firefox/Updating_add-ons_for_Firefox_10) をご覧ください。
 
-> **メモ:** 古い [`PRBool`](/ja/docs/PRBool) データ形式は退役されました。これを参照する文書では、どこでも代わりに標準 C++ `bool` 形式を使用します。現時点では文書が更新されていませんが、将来更新されますので留意してください。
+> [!NOTE]
+> 古い [`PRBool`](/ja/docs/PRBool) データ形式は退役されました。これを参照する文書では、どこでも代わりに標準 C++ `bool` 形式を使用します。現時点では文書が更新されていませんが、将来更新されますので留意してください。
 
 ### Manifests
 
diff --git a/files/ja/mozilla/firefox/releases/19/index.md b/files/ja/mozilla/firefox/releases/19/index.md
index 7ab315f02f59a4..edb0b800ed4120 100644
--- a/files/ja/mozilla/firefox/releases/19/index.md
+++ b/files/ja/mozilla/firefox/releases/19/index.md
@@ -41,7 +41,8 @@ Firefox 19 で、[XForms](/ja/docs/XForms) のサポートを[**削除しまし
 
 ## アドオン開発者と Mozilla 開発者向けの変更点
 
-> **メモ:** Firefox 19 での重要な変更点は、[`nsresult`](/ja/docs/XPCOM_API_Reference/nsresult) が強い型付けになったことです。これは戻り値の処理ミスによって発生するバグの発見を容易にしますが、この点を誤って仮定している場合に既存のコードで不具合が発生する可能性があります。
+> [!NOTE]
+> Firefox 19 での重要な変更点は、[`nsresult`](/ja/docs/XPCOM_API_Reference/nsresult) が強い型付けになったことです。これは戻り値の処理ミスによって発生するバグの発見を容易にしますが、この点を誤って仮定している場合に既存のコードで不具合が発生する可能性があります。
 
 - `getBrowserSelection()` が、テキスト入力フィールドで選択されているテキストを返すようになりました。このため、ユーザーがパスワードフィールドではないテキスト入力フィールドでテキストを選択したときに、`gContextMenu.isTextSelected` が `true` になります ([Firefox バグ 565717](https://bugzil.la/565717))。
 - [Dict.jsm](/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm): [`Dict()`](/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary) が JSON 文字列を受け入れるようになりました。[`Dict.toJSON()`](</ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()>) メソッドが追加され、これは JSON 文字列を返します ([Firefox バグ 727967](https://bugzil.la/727967))。
diff --git a/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.md b/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.md
index eb4cffe97c9297..7c01c66f31a50c 100644
--- a/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.md
+++ b/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.md
@@ -42,7 +42,8 @@ navigator.registerContentHandler(
 
 これを最も簡単に行う方法というのは、単に設定（あるいは オプション、ご使用のプラットフォームによります）ウィンドウの フィード パネルという既存のユーザーインターフェイスを使用することです。
 
-> **メモ:** Firefox 8 よりフィードパネルは無くなっています。フィードリーダーの開発者が、Web フィードの処理の為のオプションをご自分で追加する場合、上記の同様の JavaScript コードを実装することをお勧めします。
+> [!NOTE]
+> Firefox 8 よりフィードパネルは無くなっています。フィードリーダーの開発者が、Web フィードの処理の為のオプションをご自分で追加する場合、上記の同様の JavaScript コードを実装することをお勧めします。
 
 これも拡張機能からプログラムで行うこともできます。フィードリーダに使うアプリケーションのパス名を `browser.feeds.handlers.application` オプションの値に設定することで可能です。
 
diff --git a/files/ja/mozilla/firefox/releases/3.5/icc_color_correction_in_firefox/index.md b/files/ja/mozilla/firefox/releases/3.5/icc_color_correction_in_firefox/index.md
index 99284beb9a3452..09d66e638cdec5 100644
--- a/files/ja/mozilla/firefox/releases/3.5/icc_color_correction_in_firefox/index.md
+++ b/files/ja/mozilla/firefox/releases/3.5/icc_color_correction_in_firefox/index.md
@@ -45,7 +45,8 @@ slug: Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox
 | 2   | 飽和。 これは、色相の精度を保つことを犠牲にして、色の鮮やかさを維持する。 これは、チャートやダイアグラム、色調の正確な複製がそれほど重要ではないうちに、色が「ポップ」するその他のメディアに特に便利です。                                   |
 | 3   | ICC-絶対比色分析。 これは、スポットカラーや、色域内の色を変更しないので、あるメディアを別のものでシミュレートする場合に最も便利です。                                                                                                        |
 
-> **メモ:** Firefox 3.5 では、perceptual、media-relative、および saturation のインテントがすべて同じようにレンダリングされます。
+> [!NOTE]
+> Firefox 3.5 では、perceptual、media-relative、および saturation のインテントがすべて同じようにレンダリングされます。
 
 ### 警告
 
diff --git a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.md b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.md
index 2924364ac2b9d0..b8f371d42b5b8a 100644
--- a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.md
+++ b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.md
@@ -33,7 +33,8 @@ l10n:
 
 これまでに、一部の拡張機能に影響すると思われる API の変更がいくつも行われています (まだ今後も変更は行われるでしょう)。私たちは現在、これらの変更の完全なリストを作成中です。
 
-> **メモ:** もし拡張機能が、まだ [`Install.js`](/ja/docs/Install.js) スクリプトを[インストールマニフェスト](/ja/docs/Install_Manifests) の代わりに、使っている場合は、今回インストールマニフェストに移行していただく必要があります。Firefox 3 は XPI ファイル内の `install.js` スクリプトをサポートしません。
+> [!NOTE]
+> もし拡張機能が、まだ [`Install.js`](/ja/docs/Install.js) スクリプトを[インストールマニフェスト](/ja/docs/Install_Manifests) の代わりに、使っている場合は、今回インストールマニフェストに移行していただく必要があります。Firefox 3 は XPI ファイル内の `install.js` スクリプトをサポートしません。
 
 ### インストールマニフェストに翻訳を追加する
 
diff --git a/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.md b/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.md
index a9f5f88cecfcee..3bdcae71fa4f51 100644
--- a/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.md
+++ b/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.md
@@ -63,7 +63,8 @@ content mypackage location/ contentaccessible=yes
 
 これは頻繁に必要となるものではありませんが、ウェブからのアクセスが必要な、まれなケースのために用意されています。Firefox はユーザーに拡張が `contentaccessible` フラグをこのような方法で用いることで潜在的セキュリティリスクになることを警告するかもしれないことに注意してください。
 
-> **メモ:** Firefox 2 では `contentaccessible` フラグが認識されない (フラグを含む行全体が無視されてしまう) ことから、アドオンを Firefox 2 と Firefox 3 の両方に対応させたい場合は、以下のように指定します。```
+> [!NOTE]
+> Firefox 2 では `contentaccessible` フラグが認識されない (フラグを含む行全体が無視されてしまう) ことから、アドオンを Firefox 2 と Firefox 3 の両方に対応させたい場合は、以下のように指定します。```
 > content mypackage location/
 > content mypackage location/ contentaccessible=yes
 >
diff --git a/files/ja/mozilla/firefox/releases/3/wai_aria_live_regions_api_support/index.md b/files/ja/mozilla/firefox/releases/3/wai_aria_live_regions_api_support/index.md
index 1bb585af343d43..35a1f815b74c56 100644
--- a/files/ja/mozilla/firefox/releases/3/wai_aria_live_regions_api_support/index.md
+++ b/files/ja/mozilla/firefox/releases/3/wai_aria_live_regions_api_support/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Firefox/Releases/3/WAI_ARIA_Live_Regions_API_Support
 
 {{FirefoxSidebar}}
 
-> **警告:** これらの注釈は、スクリーンリーダーの開発者向けです。 開発者は、[ARIA ライブリージョン開発者のドキュメント](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)を使用する必要があります。
+> [!WARNING]
+> これらの注釈は、スクリーンリーダーの開発者向けです。 開発者は、[ARIA ライブリージョン開発者のドキュメント](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)を使用する必要があります。
 
 Firefox 3 には、Mozilla エンジンがドキュメントのライブ変更を公開する方法に対する重要な改善が含まれています。
 
diff --git a/files/ja/mozilla/firefox/releases/4/index.md b/files/ja/mozilla/firefox/releases/4/index.md
index aca68a4650cf7e..1220949bf76fc5 100644
--- a/files/ja/mozilla/firefox/releases/4/index.md
+++ b/files/ja/mozilla/firefox/releases/4/index.md
@@ -9,7 +9,8 @@ Firefox 4 （6 月後半にベータ版リリースが予定されています
 
 これらの機能の多くはすでに [Firefox 4 beta](http://www.mozilla.com/en-US/firefox/beta/) リリース、もしくは（冒険心にあふれているなら）[ナイトリー trunk ビルド](http://nightly.mozilla.org/) で試すことできます。
 
-> **メモ:** この記事は作成中であり、このページからリンクされている記事もまた同様です。多くの記事名が仮名であり、いくつかのトピックは複数の記事に分割されるかもしれません。
+> [!NOTE]
+> この記事は作成中であり、このページからリンクされている記事もまた同様です。多くの記事名が仮名であり、いくつかのトピックは複数の記事に分割されるかもしれません。
 
 ## ウェブ開発者向け機能
 
@@ -216,7 +217,8 @@ JavaScript 1.8.5 で実装される変更の概要については、[JavaScript
 - [ウェブコンソールの利用](/ja/docs/Using_the_Web_Console)
   - : ウェブコンソールツールはウェブ開発者および拡張開発者のデバッグ作業の補助に役立ちます。
 
-> **メモ:** Gecko 2.0 のメモ(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)エラーコンソールは Firefox 4 からデフォルトで無効化されます。`devtools.errorconsole.enabled 設定を` `true` に変更し、ブラウザーを再起動することで再び有効にすることができます。
+> [!NOTE]
+> Gecko 2.0 のメモ(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)エラーコンソールは Firefox 4 からデフォルトで無効化されます。`devtools.errorconsole.enabled 設定を` `true` に変更し、ブラウザーを再起動することで再び有効にすることができます。
 
 ## Mozilla およびアドオン開発者向けの変更
 
diff --git a/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.md b/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.md
index f269ccc06de2d0..3860c179b1f441 100644
--- a/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.md
+++ b/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/4/The_add-on_bar
 
 Firefox 4 よりウィンドウの下部に新しいツールバーを実装する為、ブラウザーウィンドウの下部からステータスバーが削除されます。この新しいツールバーは ID "addon-bar" を持った、標準の XUL `<toolbar>` です。アドオンはこのバーにコンテンツを挿入することが可能であり、また、ユーザーはツールバーのカスタマイズ中にボタンをアドオンバーにドラッグすることができます。これがアドオンバーと旧ステータスバーの間の主な相違点です。標準のツールバーであるため、どの XUL 要素でもアドオンバーに配置することができます。
 
-> **メモ:** 当面は、Firefox にはステータスバーが存在することを期待するアドオンがうまく動作するようにするためのシムが噛ませてあります。但しこれは一時的な措置であり、じきに削除されます。アドオンをアップデートしてください。
+> [!NOTE]
+> 当面は、Firefox にはステータスバーが存在することを期待するアドオンがうまく動作するようにするためのシムが噛ませてあります。但しこれは一時的な措置であり、じきに削除されます。アドオンをアップデートしてください。
 
 ## アドオンバーに要素を加える
 
diff --git a/files/ja/mozilla/firefox/releases/5/index.md b/files/ja/mozilla/firefox/releases/5/index.md
index 8a3543a508fde5..8e6f4a68c713de 100644
--- a/files/ja/mozilla/firefox/releases/5/index.md
+++ b/files/ja/mozilla/firefox/releases/5/index.md
@@ -79,7 +79,8 @@ Firefox 5 は Gecko 5.0 ベースのブラウザーで、2011 年 6 月 21 日
 
 すでに開発済みのアドオンを Firefox 5 向けにアップデートを行う方法については [Firefox 5 へのアドオンのアップデート方法](/ja/docs/Firefox/Updating_add-ons_for_Firefox_5)をご覧ください。
 
-> **メモ:** Firefox 5 は他のメジャーリリース版の Firefox と同様に、再コンパイルされたバイナリーコンポーネントが必要となります。詳しくは[バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces)をご覧ください。
+> [!NOTE]
+> Firefox 5 は他のメジャーリリース版の Firefox と同様に、再コンパイルされたバイナリーコンポーネントが必要となります。詳しくは[バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces)をご覧ください。
 
 ### JavaScript コードモジュールに対する変更点
 
diff --git a/files/ja/mozilla/firefox/releases/57/index.md b/files/ja/mozilla/firefox/releases/57/index.md
index e29a4872be51aa..3630672d714588 100644
--- a/files/ja/mozilla/firefox/releases/57/index.md
+++ b/files/ja/mozilla/firefox/releases/57/index.md
@@ -13,7 +13,8 @@ Firefox 57 (別名 Firefox Quantum) は、米国時間 2017 年 11 月 14 日に
 
 Firefox 57 は、Firefox を徹底的に再構築してパフォーマンス、安定性、外見を大きく向上させることを目指す [Firefox Quantum](https://wiki.mozilla.org/Quantum) エンジニアリングプロジェクトにちなんで **Quantum** というリリース名が与えられました。Firefox 57 はこれらの改善点の一部をリリースする最初のバージョンであり、祝福を求めていました。
 
-> **メモ:** このリリースの Quantum の特徴について詳しくは、Dan Callahan による記事 [Firefox Quantum Developer Edition: the fastest Firefox ever with Photon UI and better tooling](https://hacks.mozilla.org/2017/09/firefox-quantum-developer-edition-fastest-firefox-ever/) をご覧ください。
+> [!NOTE]
+> このリリースの Quantum の特徴について詳しくは、Dan Callahan による記事 [Firefox Quantum Developer Edition: the fastest Firefox ever with Photon UI and better tooling](https://hacks.mozilla.org/2017/09/firefox-quantum-developer-edition-fastest-firefox-ever/) をご覧ください。
 
 [Firefox's new parallel CSS engine](https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/)、別名 **Quantum CSS** または **Stylo** はデスクトップ版の Firefox 57 でデフォルトで有効であり、モバイル版の Firefox は追って有効化します。多くのパフォーマンス向上は別として、開発者が何らかの大きな違いに気づくことがあってはいけません。Stylo には多くの小規模な機能差がありますが、Gecko で取り除くべき非標準の動作を修正するために実装したものです。このような差異は、適宜リファレンスのページやリリースノートに掲載します ([Quantum CSS に関する補足](#quantum_css_に関する補足) を参照)。
 
@@ -90,7 +91,8 @@ _変更なし。_
 
 - SCTP メッセージの end-of-record (EOR) フラグを使用することにより、{{DOMxRef("RTCDataChannel")}} で任意のサイズ (256kiB が相互運用性が高いのですが、最大 1GiB まで) のメッセージをサポートしました。詳しくは [Understanding message size limits](/ja/docs/Web/API/WebRTC_API/Using_data_channels#understanding_message_size_limits) をご覧ください ([Firefox バグ 979417](https://bugzil.la/979417))。
 
-  > **メモ:** Firefox は、複数のソースの SCTP メッセージを多重化する機能を提供する SCTP ndata プロトコルが未サポートですので、大きなデータオブジェクトを送信すると他のすべての SCTP 通信で著しい遅延が発生する可能性があります。Firefox の ndata サポートの実装および展開の進捗を追跡するには、[Firefox バグ 1381145](https://bugzil.la/1381145) をご覧ください。
+  > [!NOTE]
+  > Firefox は、複数のソースの SCTP メッセージを多重化する機能を提供する SCTP ndata プロトコルが未サポートですので、大きなデータオブジェクトを送信すると他のすべての SCTP 通信で著しい遅延が発生する可能性があります。Firefox の ndata サポートの実装および展開の進捗を追跡するには、[Firefox バグ 1381145](https://bugzil.la/1381145) をご覧ください。
 
 - {{DOMxRef("RTCDataChannel.send()")}} メソッドで、送信しようとしたメッセージのサイズが受信側の {{Glossary("user agent","ユーザーエージェント")}} と互換性がない場合に `TypeError` 例外を発生できるようになりました (これは [Firefox バグ 979417](https://bugzil.la/979417) の一部として実装しました)。
 - [MediaStream Recording API](/ja/docs/Web/API/MediaStream_Recording_API) を更新し、録画中に発生した問題を報告するために送信される {{domxref("MediaRecorder/error_event", "error")}} イベントを一般的なイベントから {{DOMxRef("MediaRecorderErrorEvent")}} 型にしました。
@@ -125,7 +127,8 @@ _変更なし。_
 
 ## アドオン開発者と Mozilla 開発者向けの変更点
 
-> **メモ:** Firefox 57 より、XPCOM ベースのアドオンのサポートを全面的に廃止します。すべての拡張機能は新しい [ブラウザー拡張機能](/ja/docs/Mozilla/Add-ons/WebExtensions) (WebExtensions としても知られています) への移行が必要であり、そうしなければ動作しません。
+> [!NOTE]
+> Firefox 57 より、XPCOM ベースのアドオンのサポートを全面的に廃止します。すべての拡張機能は新しい [ブラウザー拡張機能](/ja/docs/Mozilla/Add-ons/WebExtensions) (WebExtensions としても知られています) への移行が必要であり、そうしなければ動作しません。
 
 ### WebExtensions
 
diff --git a/files/ja/mozilla/firefox/releases/59/index.md b/files/ja/mozilla/firefox/releases/59/index.md
index 7f07efaa0d5edf..4aa7b4ca451106 100644
--- a/files/ja/mozilla/firefox/releases/59/index.md
+++ b/files/ja/mozilla/firefox/releases/59/index.md
@@ -67,7 +67,8 @@ _変更なし。_
 
 - {{domxref("MediaStreamTrack")}} の {{domxref("MediaStreamTrack.muted")}} プロパティ、および {{domxref("MediaStreamTrack.mute_event", "mute")}} イベントと {{domxref("MediaStreamTrack.unmute_event", "unmute")}} イベント、さらにこれに対応するイベントハンドラーである {{domxref("MediaStreamTrack.mute_event", "onmute")}} と {{domxref("MediaStreamTrack.unmute_event", "onunmute")}} を実装しました。トラックの `muted` 状態は、トラックが今のところメディアデータを提供できないことを示します。
 
-  > **メモ:** トラックの `muted` 状態は、一般的に考えられているトラックのミュートやミュート解除として役に立つものではありません。代わりに {{domxref("MediaStreamTrack.enabled", "enabled")}} プロパティを使用します。`enabled` を `false` に設定すると、トラックは空のフレームだけを出力します。
+  > [!NOTE]
+  > トラックの `muted` 状態は、一般的に考えられているトラックのミュートやミュート解除として役に立つものではありません。代わりに {{domxref("MediaStreamTrack.enabled", "enabled")}} プロパティを使用します。`enabled` を `false` に設定すると、トラックは空のフレームだけを出力します。
 
 - Android 版 Firefox 59 で Apple の HTTPS Live Streaming (HLS) を、音声および映像の両方でサポートしました。この非標準プロトコルは、モバイル環境においてモバイルストリーミングのためにこのプロトコルを必要とするサイトの互換性を向上するためにサポートしました。現在、デスクトップ版 Firefox にこのプロトコルを実装する予定はありません。
 - それぞれの RTP ストリームのソースの情報を提供するため、{{domxref("RTCRtpReceiver")}} の {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} および {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} メソッドを実装しました。ただし、公開前に仕様書が変更されましたので、デフォルトで設定項目 `media.peerconnection.rtpsourcesapi.enable` によってこれらを無効化しました ([Firefox バグ 1363667](https://bugzil.la/1363667), [Firefox バグ 1430213](https://bugzil.la/1430213), [Firefox バグ 1433236](https://bugzil.la/1433236))。
diff --git a/files/ja/mozilla/firefox/releases/6/index.md b/files/ja/mozilla/firefox/releases/6/index.md
index 034e95d441aead..4af600b618190f 100644
--- a/files/ja/mozilla/firefox/releases/6/index.md
+++ b/files/ja/mozilla/firefox/releases/6/index.md
@@ -113,7 +113,8 @@ Firefox 6 は Gecko 6.0 ベースのブラウザーで、2011 年 8 月 16 日
 
 Firefox 6 へアドオンを対応させるために必要な作業の概要は [アドオンの Firefox 6 対応](/ja/docs/Firefox/Updating_add-ons_for_Firefox_6) をご覧ください。
 
-> **メモ:** Firefox 6 では、従来のメジャーリリースと同様に、バイナリーコンポーネントをコンパイルし直す必要があります。詳しくは [バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces) をご覧ください。
+> [!NOTE]
+> Firefox 6 では、従来のメジャーリリースと同様に、バイナリーコンポーネントをコンパイルし直す必要があります。詳しくは [バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces) をご覧ください。
 
 ### JavaScript コードモジュール
 
diff --git a/files/ja/mozilla/firefox/releases/68/index.md b/files/ja/mozilla/firefox/releases/68/index.md
index 321d5a462cc3bf..8fc0a1a801f2ea 100644
--- a/files/ja/mozilla/firefox/releases/68/index.md
+++ b/files/ja/mozilla/firefox/releases/68/index.md
@@ -144,7 +144,8 @@ _変更なし。_
 - ストリームの "最初の音声トラック" の ID が辞書順で最初に来るトラックであると定義する現行の仕様書に準拠するよう、{{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode", "MediaStreamAudioSourceNode()")}} コンストラクターを更新しました ([Firefox バグ 1324548](https://bugzil.la/1324548))。
 - {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} は安全でないコンテキストから使用できなくなりました。使用を試みると `NotAllowedError` 例外が発生します。安全なコンテキストは HTTPS を使用して読み込むもの、`file:///` スキームを使用して示すもの、`localhost` から読み込むものです。今のところ、必要であれば設定項目 `media.getusermedia.insecure.enabled` を `true` に設定すると、`getUserMedia()` を安全でないコンテキストから呼び出すことを再有効化できます ([Firefox バグ 1335740](https://bugzil.la/1335740))。
 
-  > **メモ:** 将来、Firefox は {{domxref("navigator.mediaDevices")}} プロパティも安全でないコンテキストで廃止して、{{domxref("MediaDevices")}} API へのアクセスを完全に遮断する予定です。**これは Nightly ビルドですでに実施しています。**
+  > [!NOTE]
+  > 将来、Firefox は {{domxref("navigator.mediaDevices")}} プロパティも安全でないコンテキストで廃止して、{{domxref("MediaDevices")}} API へのアクセスを完全に遮断する予定です。**これは Nightly ビルドですでに実施しています。**
 
 #### 廃止
 
diff --git a/files/ja/mozilla/firefox/releases/7/index.md b/files/ja/mozilla/firefox/releases/7/index.md
index 81a5520ba4da84..648820a2553b56 100644
--- a/files/ja/mozilla/firefox/releases/7/index.md
+++ b/files/ja/mozilla/firefox/releases/7/index.md
@@ -84,7 +84,8 @@ Firefox 7 は 2011 年 9 月 27 日にリリースされました。このペー
 
 これらの変更は、アドオン開発者と、Mozilla 本体のコードに関わっている開発者の双方に影響するものです。アドオン開発者は [アドオンの Firefox 7 対応](/ja/docs/Firefox/Updating_extensions_for_Firefox_7) に書かれている追加情報も参照してください。
 
-> **メモ:** Firefox 7 では、従来のメジャーリリースと同様に、バイナリーコンポーネントをコンパイルし直す必要があります。詳しくは [バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces) をご覧ください。
+> [!NOTE]
+> Firefox 7 では、従来のメジャーリリースと同様に、バイナリーコンポーネントをコンパイルし直す必要があります。詳しくは [バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces) をご覧ください。
 
 ### JavaScript コードモジュール
 
diff --git a/files/ja/mozilla/firefox/releases/75/index.md b/files/ja/mozilla/firefox/releases/75/index.md
index 3e90d1c20adf58..231d6cf656deb7 100644
--- a/files/ja/mozilla/firefox/releases/75/index.md
+++ b/files/ja/mozilla/firefox/releases/75/index.md
@@ -36,7 +36,8 @@ Firefox 75 は、米国時間 2020 年 4 月 7 日にリリースされました
 - [`role="comment"`](/ja/docs/Web/Accessibility/ARIA/Roles/Comment_role) ([Firefox バグ 1608969](https://bugzil.la/1608969))
 - `aria-details` で複数の ID ([Firefox バグ 1608883](https://bugzil.la/1608883))
 
-> **メモ:** macOS では、はじめに Apple が Safari で Apple 方式の属性として VoiceOver へ公開するものを定義することを待っており、それらに一式に従う計画です。
+> [!NOTE]
+> macOS では、はじめに Apple が Safari で Apple 方式の属性として VoiceOver へ公開するものを定義することを待っており、それらに一式に従う計画です。
 
 ### JavaScript
 
diff --git a/files/ja/mozilla/firefox/releases/8/index.md b/files/ja/mozilla/firefox/releases/8/index.md
index 6cd25e049bbe3f..232ac70efef2f8 100644
--- a/files/ja/mozilla/firefox/releases/8/index.md
+++ b/files/ja/mozilla/firefox/releases/8/index.md
@@ -87,7 +87,8 @@ Firefox 8 は 2011 年 11 月 8 日にリリースされました。このペー
 
 アドオンを Firefox 8 互換にする際に必要となりそうな変更点は [Updating add-ons for Firefox 8](/ja/docs/Firefox/Updating_add-ons_for_Firefox_8) にまとめられています。
 
-> **メモ:** Firefox 8 では、従来のメジャーリリースと同様に、バイナリーコンポーネントをコンパイルし直す必要があります。詳しくは [バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces) をご覧ください。
+> [!NOTE]
+> Firefox 8 では、従来のメジャーリリースと同様に、バイナリーコンポーネントをコンパイルし直す必要があります。詳しくは [バイナリーインターフェイス](/ja/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces) をご覧ください。
 
 ### XPCOM
 
diff --git a/files/ja/mozilla/firefox/releases/82/index.md b/files/ja/mozilla/firefox/releases/82/index.md
index 83f4245b324b76..90a1b6acb161f5 100644
--- a/files/ja/mozilla/firefox/releases/82/index.md
+++ b/files/ja/mozilla/firefox/releases/82/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/82
 
 このページでは、開発者に影響する Firefox 82 の変更点をまとめています。Firefox 82 は、2020 年 10 月 20 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [Coming through with Firefox 82](https://hacks.mozilla.org/2020/10/coming-through-with-firefox-82/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [Coming through with Firefox 82](https://hacks.mozilla.org/2020/10/coming-through-with-firefox-82/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/83/index.md b/files/ja/mozilla/firefox/releases/83/index.md
index 9f464060bfce44..21ebe7f7ea3544 100644
--- a/files/ja/mozilla/firefox/releases/83/index.md
+++ b/files/ja/mozilla/firefox/releases/83/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/83
 
 このページでは、開発者に影響する Firefox 83 の変更点をまとめています。Firefox 83 は、2020 年 11 月 17 日にリリースされました。
 
-> **メモ:** Mozilla hacks の [Firefox 83 is upon us](https://hacks.mozilla.org/2020/11/firefox-83-is-upon-us/) もご覧ください。
+> [!NOTE]
+> Mozilla hacks の [Firefox 83 is upon us](https://hacks.mozilla.org/2020/11/firefox-83-is-upon-us/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/84/index.md b/files/ja/mozilla/firefox/releases/84/index.md
index a5fbbbb3ca73a6..91f91f6830b17e 100644
--- a/files/ja/mozilla/firefox/releases/84/index.md
+++ b/files/ja/mozilla/firefox/releases/84/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このページでは、開発者に影響する Firefox 84 の変更点をまとめています。Firefox 84 は、2020 年 12 月 15 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [And now for … Firefox 84](https://hacks.mozilla.org/2020/12/and-now-for-firefox-84/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [And now for … Firefox 84](https://hacks.mozilla.org/2020/12/and-now-for-firefox-84/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/85/index.md b/files/ja/mozilla/firefox/releases/85/index.md
index 3e91f6f8b63028..80fd370da7076b 100644
--- a/files/ja/mozilla/firefox/releases/85/index.md
+++ b/files/ja/mozilla/firefox/releases/85/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このページでは、開発者に影響する Firefox 85 の変更点をまとめています。Firefox 85 は、2021 年 1 月 26 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [January brings us Firefox 85](https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [January brings us Firefox 85](https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/86/index.md b/files/ja/mozilla/firefox/releases/86/index.md
index c178901dffdf6b..4c72c35185e2f9 100644
--- a/files/ja/mozilla/firefox/releases/86/index.md
+++ b/files/ja/mozilla/firefox/releases/86/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このページでは、開発者に影響する Firefox 86 の変更点をまとめています。Firefox 86 は、米国時間 2021 年 2 月 23 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [A Fabulous February Firefox — 86!](https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [A Fabulous February Firefox — 86!](https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/87/index.md b/files/ja/mozilla/firefox/releases/87/index.md
index fe552e8203c377..18212040e1b79e 100644
--- a/files/ja/mozilla/firefox/releases/87/index.md
+++ b/files/ja/mozilla/firefox/releases/87/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このページでは、開発者に影響する Firefox 87 の変更点をまとめています。Firefox 87 は、米国時間 2021 年 3 月 23 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [In March, we see Firefox 87](https://hacks.mozilla.org/2021/03/in-march-we-see-firefox-87/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [In March, we see Firefox 87](https://hacks.mozilla.org/2021/03/in-march-we-see-firefox-87/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/88/index.md b/files/ja/mozilla/firefox/releases/88/index.md
index 409b08b268069a..415dc43459aaf5 100644
--- a/files/ja/mozilla/firefox/releases/88/index.md
+++ b/files/ja/mozilla/firefox/releases/88/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/88
 
 このページでは、開発者に影響する Firefox 88 の変更点をまとめています。Firefox 88 は、米国時間 2021 年 4 月 19 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [Never too late for Firefox 88](https://hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [Never too late for Firefox 88](https://hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/89/index.md b/files/ja/mozilla/firefox/releases/89/index.md
index 191c605710f4f9..80bb98a1cab422 100644
--- a/files/ja/mozilla/firefox/releases/89/index.md
+++ b/files/ja/mozilla/firefox/releases/89/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/89
 
 このページでは、開発者に影響する Firefox 89 の変更点をまとめています。Firefox 89 は、米国時間 2021 年 6 月 1 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [Looking fine with Firefox 89](https://hacks.mozilla.org/2021/06/looking-fine-with-firefox-89/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [Looking fine with Firefox 89](https://hacks.mozilla.org/2021/06/looking-fine-with-firefox-89/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/90/index.md b/files/ja/mozilla/firefox/releases/90/index.md
index 562fde8e1de3da..e5abb3b2078a87 100644
--- a/files/ja/mozilla/firefox/releases/90/index.md
+++ b/files/ja/mozilla/firefox/releases/90/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/90
 
 このページでは、開発者に影響する Firefox 90 の変更点をまとめています。Firefox 90 は、米国時間 2021 年 7 月 13 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [Getting lively with Firefox 90](https://hacks.mozilla.org/2021/07/getting-lively-with-firefox-90/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [Getting lively with Firefox 90](https://hacks.mozilla.org/2021/07/getting-lively-with-firefox-90/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/91/index.md b/files/ja/mozilla/firefox/releases/91/index.md
index 1fb31f075c4411..114463ece1d0ac 100644
--- a/files/ja/mozilla/firefox/releases/91/index.md
+++ b/files/ja/mozilla/firefox/releases/91/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このページでは、開発者に影響する Firefox 91 の変更点をまとめています。Firefox 91 は 2021 年 8 月 10 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [Hopping on Firefox 91](https://hacks.mozilla.org/2021/08/hopping-on-firefox-91/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [Hopping on Firefox 91](https://hacks.mozilla.org/2021/08/hopping-on-firefox-91/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/mozilla/firefox/releases/92/index.md b/files/ja/mozilla/firefox/releases/92/index.md
index 059025c5ea1926..adfc8d1d7b7083 100644
--- a/files/ja/mozilla/firefox/releases/92/index.md
+++ b/files/ja/mozilla/firefox/releases/92/index.md
@@ -7,7 +7,8 @@ slug: Mozilla/Firefox/Releases/92
 
 このページでは、開発者に影響する Firefox 92 の変更点をまとめています。Firefox 92 は 2021 年 9 月 7 日にリリースされました。
 
-> **メモ:** Mozilla Hacks の [Time for a review of Firefox 92](https://hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/) もご覧ください。
+> [!NOTE]
+> Mozilla Hacks の [Time for a review of Firefox 92](https://hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/) もご覧ください。
 
 ## ウェブ開発者向けの変更点一覧
 
diff --git a/files/ja/orphaned/code_snippets/toolbar/index.md b/files/ja/orphaned/code_snippets/toolbar/index.md
index 00c7c3cb4811ba..630a0fe596e18d 100644
--- a/files/ja/orphaned/code_snippets/toolbar/index.md
+++ b/files/ja/orphaned/code_snippets/toolbar/index.md
@@ -14,7 +14,8 @@ slug: orphaned/Code_snippets/Toolbar
 
 スタマイズされたツールバーパレット用のツールバーボタンを入れて、あなたの拡張を開発・配布したとしても、デフォルトではボタンは有効になりません。ユーザーはボタンをツールバーへドラッグする必要があります。下のコードを利用することで、あなたのボタンが最初のインストールおよび XPI の再起動後にデフォルトで表示されるようにできます。
 
-> **メモ:** ボタンをデフォルトで追加するのは、正しく行うのが非常に難しいという点で、ほぼ間違いなく悪習慣です。ユーザーはあなたがボタンを追加したツールバーを非表示にしているかもしれませんし、追加したコードが正常に動作しないようにツールバーをカスタマイズしているかもしれません。
+> [!NOTE]
+> ボタンをデフォルトで追加するのは、正しく行うのが非常に難しいという点で、ほぼ間違いなく悪習慣です。ユーザーはあなたがボタンを追加したツールバーを非表示にしているかもしれませんし、追加したコードが正常に動作しないようにツールバーをカスタマイズしているかもしれません。
 >
 > Firefox がこの目的に API を提供することに対しては、バグが立てられています。need the bug #
 
diff --git a/files/ja/orphaned/creating_toolbar_buttons/index.md b/files/ja/orphaned/creating_toolbar_buttons/index.md
index 4ff01846686169..186f638f7d195c 100644
--- a/files/ja/orphaned/creating_toolbar_buttons/index.md
+++ b/files/ja/orphaned/creating_toolbar_buttons/index.md
@@ -13,7 +13,8 @@ slug: orphaned/Creating_toolbar_buttons
 
 文書をオーバレイするには、その文書の URI を知らなければなりません。よくオーバレイされる文書の URI は [このページの最後](#.E3.82.88.E3.81.8F.E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E3.81.95.E3.82.8C.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E6.8C.81.E3.81.A4.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E3.83.AA.E3.82.B9.E3.83.88) にあります。
 
-> **メモ:** 
+> [!NOTE]
+> 
 > _chrome://messenger/content/mailWindowOverlay.xul_
 > にオーバレイする人がいます。これによって mailWindowOverlay.xul が適用されるすべてのウィンドウ（たとえばメインウィンドウやメッセージ表示ウィンドウ）にボタンが現れます。確認してください。
 
diff --git a/files/ja/orphaned/tutorials/index.md b/files/ja/orphaned/tutorials/index.md
deleted file mode 100644
index 1f21c18382c293..00000000000000
--- a/files/ja/orphaned/tutorials/index.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: チュートリアル
-slug: orphaned/Tutorials
----
-
-SDK を使用したアドオンの開発方法を実践的に説明したページの一覧です。
-
----
-
-### はじめに
-
-- [インストール](/en-US/Add-ons/SDK/Tutorials/Installation)
-  - : Windows、OS X および Linux 上で、SDK をダウンロード、インストール、および初期化します。
-- [トラブルシューティング](/en-US/Add-ons/SDK/Tutorials/Troubleshooting)
-  - : よくある問題を解決する場合や、支援を求める場合のヒントを説明します。
-
-- [入門](/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx)
-  - : シンプルなアドオンを作成を始めるための手順の概略です。
-
-### ユーザーインターフェイスの作成
-
-- [ツールバーボタンの追加](/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar)
-  - : Firefox アドオンツールバーにボタンを追加します。
-- [Firefox へのメニュー項目の追加](/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox)
-  - : Firefox のメインメニューにアイテムを追加します。
-- [ポップアップの表示](/en-US/Add-ons/SDK/Tutorials/Display_a_Popup)
-  - : HTML および JavaScript を使用して実装したポップアップダイアログを表示します。
-- [コンテキストメニュー項目の追加](/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item)
-  - : Firefox のコンテキストメニューに項目を追加します。
-
----
-
-### ブラウザーの操作
-
-- [ウェブページを開く](/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page)
-  - : tabs モジュールを用いて、新しいタブまたはウィンドウでウェブページを開き、そのコンテンツにアクセスします。
-- [ページの読み込みを確認する](/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load)
-  - : tabs モジュールを用いて、新しいウェブページが読み込まれたときに通知を受け取り、それらのウェブページのコンテンツにアクセスします。
-
-- [開いているタブの一覧を表示する](/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs)
-  - : tabs モジュールを用いて、現在開いているすべてのタブに対して反復処理を行い、それらのコンテンツにアクセスします。
-
-### ウェブページの変更
-
-- [URL に基づいたウェブページの変更](/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL)
-  - : URL に基づいてウェブページを検索するフィルタを作成します。フィルタに一致する URL のウェブページを読み込んだときに、フィルタ内の指定したスクリプトを実行します。
-- [アクティブなウェブページの変更](/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab)
-  - : 現在アクティブなウェブページに、動的にスクリプトを読み込みます。
-
----
-
-### 開発テクニック
-
-- [ログの出力](/en-US/Add-ons/SDK/Tutorials/Logging)
-  - : 診断を行うために、メッセージをコンソールにログとして出力します。
-- [再利用可能なモジュールの作成](/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules)
-  - : アドオンを別個のモジュールとして体系化し、開発、デバッグ、およびメンテナンスを容易にします。 また、作成したモジュールが入った再利用可能なパッケージを作成し、他の開発者もそのモジュールを使用できるようにします。
-- [ユニットテスト](/en-US/Add-ons/SDK/Tutorials/Unit_testing)
-  - : SDK のテストフレームワークを使用して、ユニットテストを作成し実行します。
-- [Chrome 権限](/en-US/Add-ons/SDK/Tutorials/Chrome_authority)
-  - : この権限を使用すると、アドオンが Components オブジェクトにアクセスできるので、どんな XPCOM オブジェクトでも読み込んで使用できるようになります。
-- [イベントターゲットの作成](/en-US/Add-ons/SDK/Tutorials/Creating_event_targets)
-  - : 定義したオブジェクトがイベントを発生させられるようにします。
-- [読み込みと読み込み解除の確認](/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload)
-  - : Firefox にアドオンが読み込まれたり、読み込み解除されたりしたときに通知を受け取ります。またコマンドラインからアドオンに引数を渡します。
-- [サードパーティーモジュールの使用](/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox)
-  - : SDK 自体に含まれていない追加のモジュールをインストールして使用します。
-- [ローカライゼーション](/en-US/Add-ons/SDK/Tutorials/l10n)
-  - : ローカライズ可能なコードを作成します。
-- [モバイル開発](/en-US/Add-ons/SDK/Tutorials/Mobile_development)
-  - : Android 用 Firefox モバイルのアドオン開発を始める手順を説明します。
-- [アドオン用のデバッガー](/en-US/Add-ons/SDK/Tutorials/Mobile_development)
-  - : アドオン内の JavaScript のデバッグを行います。
-
----
-
-### 応用
-
-- [アノテーターアドオン](/en-US/Add-ons/SDK/Tutorials/Annotator)
-  - : より複雑なアドオンの開発作業を順を追って説明します。
diff --git a/files/ja/orphaned/web/api/document_object_model/events/index.md b/files/ja/orphaned/web/api/document_object_model/events/index.md
index 94e5137c8beee4..b94f24bdc7f8d6 100644
--- a/files/ja/orphaned/web/api/document_object_model/events/index.md
+++ b/files/ja/orphaned/web/api/document_object_model/events/index.md
@@ -32,7 +32,8 @@ function greet(event){
 
 これが最近のウェブページで使われる方法です。
 
-> **メモ:** Internet Explorer 6 から 8 はこの方法をサポートせず、 {{domxref("EventTarget.attachEvent")}} という似た API を代わりにサポートします。ブラウザー間の互換性を確保するには、数多くある JavaScript ライブラリのうちの一つを使用してください。
+> [!NOTE]
+> Internet Explorer 6 から 8 はこの方法をサポートせず、 {{domxref("EventTarget.attachEvent")}} という似た API を代わりにサポートします。ブラウザー間の互換性を確保するには、数多くある JavaScript ライブラリのうちの一つを使用してください。
 
 さらに詳細を知りたい場合は {{domxref("EventTarget.addEventListener")}} のリファレンスを参照してください。
 
@@ -44,7 +45,8 @@ function greet(event){
 
 HTML 属性に書かれたこの JavaScript コードには、 `event` 引数を通してイベントオブジェクトが渡されます。[返値は HTML の仕様で定義された特別な方法で処理されます](http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm)。
 
-> **警告:** この方法は避けてください。これはマークアップを増加させ、可読性を下げます。コンテンツと振る舞いが正しく分離されておらず、バグの発見が困難になります。
+> [!WARNING]
+> この方法は避けてください。これはマークアップを増加させ、可読性を下げます。コンテンツと振る舞いが正しく分離されておらず、バグの発見が困難になります。
 
 ### DOM 要素のプロパティ
 
diff --git a/files/ja/orphaned/web/css/color_value/hexadecimal_rgb/index.md b/files/ja/orphaned/web/css/color_value/hexadecimal_rgb/index.md
index 8fcdb5e5ef5f23..75f938a686752b 100644
--- a/files/ja/orphaned/web/css/color_value/hexadecimal_rgb/index.md
+++ b/files/ja/orphaned/web/css/color_value/hexadecimal_rgb/index.md
@@ -27,7 +27,8 @@ slug: orphaned/Web/CSS/color_value/hexadecimal_rgb
 - `A` または `AA` {{optional_inline}}
   - : 色の透明度を示す**アルファ**成分を `0` から `ff` (255) までの 16 進数（大文字と小文字を区別しない）で指定します。数字が 1 桁の場合は同じ数字 2 桁と解釈されます。`e` は `ee` を意味します。`0` は完全な透明色を、`ff` は完全な不透明色を表します。
 
-> **メモ:** この構文は大文字と小文字を区別しないため `#00ff00` は `#00FF00` と同値です。
+> [!NOTE]
+> この構文は大文字と小文字を区別しないため `#00ff00` は `#00FF00` と同値です。
 
 ## 例
 
diff --git a/files/ja/related/index.md b/files/ja/related/index.md
index 27262bf5da9cbb..6426affb010e4f 100644
--- a/files/ja/related/index.md
+++ b/files/ja/related/index.md
@@ -7,7 +7,8 @@ l10n:
 
 この節は、MDN の中心的な任務ではない（つまり、ウェブ標準技術ではない）けれども、それでもウェブに関連し、ウェブ開発者にとって興味深い技術に関する文書化のためのホームです。
 
-> **メモ:** これらの文書化リソースは、一般に MDN ライターチームによってメンテナンスされていません。これらのリソースに関する提案や問い合わせがある場合は、それらの技術のランディングページで、関連するメンテナンスチームの連絡先を調べてみてください。
+> [!NOTE]
+> これらの文書化リソースは、一般に MDN ライターチームによってメンテナンスされていません。これらのリソースに関する提案や問い合わせがある場合は、それらの技術のランディングページで、関連するメンテナンスチームの連絡先を調べてみてください。
 
 ## 技術リスト
 
diff --git a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
index becdc3450fae83..1e2fa95137ee29 100644
--- a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
+++ b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
@@ -44,7 +44,8 @@ _例 2: タブウィジェットはどのようにして視覚的にスタイル
 
 **ARIA**は、開発者がマークアップに特別な属性を追加することによって、ウィジェットをより詳細に記述することができるようにしています。標準的な HTML タグと、動的なウェブアプリケーションで得られるデスクトップスタイルのコントロールとの間のギャップを埋めるために設計された ARIA は、ほとんどの慣れた UI ウィジェットの挙動を記述する役割と状態を提供します。
 
-> **警告:** これらの多くは、ブラウザーが現代の HTML の機能に完全には対応していなかったため、後に追加されたものです。**開発者は常に、ARIA を使用するよりも正しい意味づけの HTML 要素を使用することを優先すべきです**。
+> [!WARNING]
+> これらの多くは、ブラウザーが現代の HTML の機能に完全には対応していなかったため、後に追加されたものです。**開発者は常に、ARIA を使用するよりも正しい意味づけの HTML 要素を使用することを優先すべきです**。
 
 ARIA 仕様書は 3 種類の属性に分けられています: ロール、ステート、プロパティです。ロールは HTML 4 において他の方法で利用できないウィジェット、例えばスライダー、メニューバー、タブ、ダイアログなどを説明します。プロパティはこれらのウィジェットの特徴、例えばドラッグ可能、必須の要素がある、関連づけられたポップアップがあるなどを説明します。ステートは要素について支援技術に伝える現在の対話状態、例えば動作中、無効、選択中、不可視などの状態を説明します。
 
@@ -155,7 +156,8 @@ ARIA では、開発者が要素の意味づけの役割を宣言することが
 
 ### 非同期のコンテンツ変更
 
-> **メモ:** 作成中です。[ライブリージョン](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) もご覧ください。
+> [!NOTE]
+> 作成中です。[ライブリージョン](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) もご覧ください。
 
 ## キーボード操作
 
diff --git a/files/ja/web/accessibility/aria/aria_live_regions/index.md b/files/ja/web/accessibility/aria/aria_live_regions/index.md
index e551e3c1941710..2f12ef52a54346 100644
--- a/files/ja/web/accessibility/aria/aria_live_regions/index.md
+++ b/files/ja/web/accessibility/aria/aria_live_regions/index.md
@@ -29,7 +29,8 @@ l10n:
 
 JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。
 
-> **メモ:** 支援技術はライブリージョンへのコンテンツの _動的な_ 変更を通知します。
+> [!NOTE]
+> 支援技術はライブリージョンへのコンテンツの _動的な_ 変更を通知します。
 > `aria-live` 属性もしくは 特化したライブリージョン `role` （例えば `role="alert"` ）を、変更をアナウンスしたい要素に含めることで有効になりますが、変更が起こる前にこれらの属性が追加されている必要があります。 —　最初からマークアップに含まれていても、 JavaScript で動的に追加しても構いません。
 
 ## ライブリージョン
diff --git a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md
index 80a1c76ee5b837..8c3734cf539082 100644
--- a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md
+++ b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md
@@ -23,7 +23,8 @@ DOM フォーカスのある要素がコンボボックス、テキストボッ
 
 `aria-activedescendant` の値は、制御される要素の自分自身で所有している要素を参照します。例えば、コンボボックスでは、コンボボックスにフォーカスが当たったまま、コンボボックス要素の `aria-activedescendant` の値は、コンボボックスによって制御されるポップアップリストボックスの子孫を参照します。
 
-> **メモ:** この属性はいくつかのロールにのみ対応しています。例えば、 `dialog` は `aria-activedescendant` に対応していません。コンボボックスがダイアログを開いた場合、DOMフォーカスはコンボボックスからダイアログに移ります。
+> [!NOTE]
+> この属性はいくつかのロールにのみ対応しています。例えば、 `dialog` は `aria-activedescendant` に対応していません。コンボボックスがダイアログを開いた場合、DOMフォーカスはコンボボックスからダイアログに移ります。
 
 > **メモ:** `listbox`、`grid`、`tree` のポップアップの子孫にフォーカスが当たった場合、DOM フォーカスは combobox に残り、combobox には `aria-activedescendant` が設定され、ポップアップ内でフォーカスされた要素を参照する値が設定されます。
 
diff --git a/files/ja/web/accessibility/aria/attributes/aria-disabled/index.md b/files/ja/web/accessibility/aria/attributes/aria-disabled/index.md
index 0ce3166cba0a99..6849ef3b0698c8 100644
--- a/files/ja/web/accessibility/aria/attributes/aria-disabled/index.md
+++ b/files/ja/web/accessibility/aria/attributes/aria-disabled/index.md
@@ -21,7 +21,8 @@ HTML の [`disabled`](/ja/docs/Web/HTML/Element/input#disabled) 論理属性が
 
 これらの場合、そのコントロールの機能は制限されているか「無効」になっていますが、標準のキーボードナビゲーションを使ってユーザーにこれらの要素を探してもらいたいと思うかもしれません。開発者は JavaScript を使用して、要素の機能を完全に無効にし、同時に要素の現れ方も変えて、目の見えるユーザーには無効であることがわかるようにする必要があります。
 
-> **メモ:** 無効の状態は、 `aria-disabled="true"` を持つ要素と、そのフォーカス可能なすべての子孫要素に適用されます。コンテナー要素にこの属性を使用する場合は注意が必要です。特に、あるコンテナーがフォームコントロールとリンクの両方を持つことができるような場合、フォームコントロールは無効状態であることを公開しますが、リンクは「無効」であることを<strong>伝えない</strong>という意図があるかもしれません。
+> [!NOTE]
+> 無効の状態は、 `aria-disabled="true"` を持つ要素と、そのフォーカス可能なすべての子孫要素に適用されます。コンテナー要素にこの属性を使用する場合は注意が必要です。特に、あるコンテナーがフォームコントロールとリンクの両方を持つことができるような場合、フォームコントロールは無効状態であることを公開しますが、リンクは「無効」であることを<strong>伝えない</strong>という意図があるかもしれません。
 
 HTML の `disabled` 属性ではなく `aria-disabled` 属性を使用するもう一つの理由は、無効としてマークする必要があるカスタムコントロールを作成したが、`disabled` 属性を使用できる要素を使用していない場合です。例えば、以下のスニペットでは `<div>` を使用して、無効とマークする必要があるカスタムボタンを作成しています。しかし、 `<div>` 要素は `disabled` 属性を期待しませんし、尊重しません。たとえ `role="button"` が指定されたとしても、公開される ARIA ロールを変更することはできません。このようなカスタムコントロールを無効にするには `aria-disabled` 属性が必要とされます。
 
@@ -52,7 +53,8 @@ HTML の `disabled` 属性ではなく `aria-disabled` 属性を使用するも
 
 ネイティブの HTML 属性ではなく `aria-disabled` を使用する場合、もう一つ留意すべきことは、 ARIA 属性は Windows 高コントラストモードにおいて、要素が無効であることを視覚的に伝えるためには、必要な手動スタイル設定が要求されるということです。
 
-> **メモ:** CSS の [`pointer-events: none;`](/ja/docs/Web/CSS/pointer-events) を使用して要素をクリックできないようにしている場合は、 JavaScript による対話も無効にしてください。 `pointer-events: none;` はマウスクリックを防ぎますが、キーボードから要素をアクティブにすることを防ぐことはできません。
+> [!NOTE]
+> CSS の [`pointer-events: none;`](/ja/docs/Web/CSS/pointer-events) を使用して要素をクリックできないようにしている場合は、 JavaScript による対話も無効にしてください。 `pointer-events: none;` はマウスクリックを防ぎますが、キーボードから要素をアクティブにすることを防ぐことはできません。
 
 ```js
 function onClick(event) {
diff --git a/files/ja/web/accessibility/aria/attributes/aria-grabbed/index.md b/files/ja/web/accessibility/aria/attributes/aria-grabbed/index.md
index 210bba677d3c43..58590184921cb8 100644
--- a/files/ja/web/accessibility/aria/attributes/aria-grabbed/index.md
+++ b/files/ja/web/accessibility/aria/attributes/aria-grabbed/index.md
@@ -21,7 +21,8 @@ l10n:
 
 `aria-grabbed` プロパティは WAI-ARIA の将来のバージョンで新しい機能に置き換わることが予定されており、非推奨です。
 
-> **メモ:** ARIA はアクセシビリティのある機能を実現するものではありません。 ARIA は、機能の意図する動作を伝えるだけです。
+> [!NOTE]
+> ARIA はアクセシビリティのある機能を実現するものではありません。 ARIA は、機能の意図する動作を伝えるだけです。
 
 ## 値
 
diff --git a/files/ja/web/accessibility/aria/attributes/aria-hidden/index.md b/files/ja/web/accessibility/aria/attributes/aria-hidden/index.md
index f115fe7b69a94b..251ff304c37a10 100644
--- a/files/ja/web/accessibility/aria/attributes/aria-hidden/index.md
+++ b/files/ja/web/accessibility/aria/attributes/aria-hidden/index.md
@@ -29,7 +29,8 @@ l10n:
 
 支援技術から見えるようにレンダリングされたコンテンツを隠すために `aria-hidden` を使用する場合は注意してください。冗長なコンテンツや余計なコンテンツを除去することで、支援技術のユーザーの使い勝手が改善される場合でない限り、可視コンテンツを隠すべきではありません。アクセシビリティ API から可視コンテンツを除去することを考えることができるのは、支援技術に対して同一または同等の意味や機能が公開されている場合だけです。
 
-> **メモ:** 支援技術から視覚的にレンダリングされたコンテンツを非表示にする場合は、すべての障碍を考慮してください。支援技術のユーザーは視覚的な障碍を持つ人ばかりではありません。目に見えるコンテンツがアクセシビリティ API のテキストコンテンツと照合しない場合、目の見えるユーザーにとって使い勝手に悪影響が出ます。
+> [!NOTE]
+> 支援技術から視覚的にレンダリングされたコンテンツを非表示にする場合は、すべての障碍を考慮してください。支援技術のユーザーは視覚的な障碍を持つ人ばかりではありません。目に見えるコンテンツがアクセシビリティ API のテキストコンテンツと照合しない場合、目の見えるユーザーにとって使い勝手に悪影響が出ます。
 
 表面的には、 `aria-hidden="true"` と `role="presentation"` とその対義語である `role="none"` は似ているように見えますが、それぞれの意図は異なります。
 
diff --git a/files/ja/web/accessibility/aria/attributes/aria-labelledby/index.md b/files/ja/web/accessibility/aria/attributes/aria-labelledby/index.md
index df52c63afaa0f4..55ce2a37c3c730 100644
--- a/files/ja/web/accessibility/aria/attributes/aria-labelledby/index.md
+++ b/files/ja/web/accessibility/aria/attributes/aria-labelledby/index.md
@@ -21,7 +21,8 @@ l10n:
 
 `aria-labelledby` および [`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) 属性は、どちらも代替テキストを計算するために他の要素を参照します。 `aria-labelledby` は要素にアクセシブル名を提供する短いテキストを参照します。 `aria-describedby` は説明を提供する詳しいコンテンツを参照するために使用します。インタラクティブ要素のアクセシブル名に適切な短いラベル付けを提供する要素が DOM にない場合、 `aria-label` を使用してインタラクティブ要素のアクセシブル名を定義します。
 
-> **メモ:** アメリカ英語では、この属性は "labeledby" と綴られるとみなされますが、 "labelledby" という綴りが確立されており、アクセシビリティ API で使用されています。
+> [!NOTE]
+> アメリカ英語では、この属性は "labeledby" と綴られるとみなされますが、 "labelledby" という綴りが確立されており、アクセシビリティ API で使用されています。
 
 次の例では `aria-labelledby` を用いて、兄弟要素のテキストコンテンツを使用してチェックボックス入力にアクセシブル名を提供しています。
 
diff --git a/files/ja/web/accessibility/aria/attributes/aria-live/index.md b/files/ja/web/accessibility/aria/attributes/aria-live/index.md
index c773a29238f531..d0b44ada0abe24 100644
--- a/files/ja/web/accessibility/aria/attributes/aria-live/index.md
+++ b/files/ja/web/accessibility/aria/attributes/aria-live/index.md
@@ -55,7 +55,8 @@ l10n:
 
 ライブリージョンは要素とそのすべての子孫を含みます。コンテンツの更新時に設定されていなかった場合、`aria-live` の値は有効な `aria-live` 属性の値が設定されている最も近い祖先から決まります。`off` に設定されている場合、または更新された要素と DOM ツリー内のすべての祖先ノードで属性が完全に除外されている場合、ユーザーには通知されません。しかし、ライブリージョンに移動した場合、ユーザーは更新を聞くことができます。
 
-> **警告:** 中断はユーザーを混乱させたり、現在の課題を完了させなくさせる可能性があるため、`assertive` の値は緊急でない限り使用しないでください。
+> [!WARNING]
+> 中断はユーザーを混乱させたり、現在の課題を完了させなくさせる可能性があるため、`assertive` の値は緊急でない限り使用しないでください。
 
 ## 値
 
diff --git a/files/ja/web/accessibility/aria/attributes/aria-multiline/index.md b/files/ja/web/accessibility/aria/attributes/aria-multiline/index.md
index 16b10c94bfc1c8..1282d63546d032 100644
--- a/files/ja/web/accessibility/aria/attributes/aria-multiline/index.md
+++ b/files/ja/web/accessibility/aria/attributes/aria-multiline/index.md
@@ -13,7 +13,8 @@ l10n:
 
 ユーザーのフォーカスが複数行 {{HTMLElement('textarea')}} にあるとき、キー入力は改行を挿入します。 [`textbox`](/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role) ロールが設定された要素にのみ受け入れられ、 `aria-multiline` 属性は、テキストボックスが複数行の入力を受け入れるか、単一の行のみを受け入れるかを支援技術に示し、入力するデータの型やキーストロークが何をするかを設定します。
 
-> **メモ:** 可能な場合は、 HTML の {{HTMLElement('input')}} または {{HTMLElement('textarea')}} を使用してください。これらは意味づけと動作が組み込まれており、 ARIA 属性やスクリプトを必要とせず、キーボード対応が組み込まれているからです。
+> [!NOTE]
+> 可能な場合は、 HTML の {{HTMLElement('input')}} または {{HTMLElement('textarea')}} を使用してください。これらは意味づけと動作が組み込まれており、 ARIA 属性やスクリプトを必要とせず、キーボード対応が組み込まれているからです。
 
 `aria-multiline="true"` が設定されている場合、テキストボックスウィジェットは HTML の {{HTMLElement('textarea')}} のように入力内の改行を受け入れることを意味しています。この属性を持たない、または値が `false` に設定されている `textbox` のロールを持つ要素は単純なテキストボックスです。
 
diff --git a/files/ja/web/accessibility/aria/attributes/index.md b/files/ja/web/accessibility/aria/attributes/index.md
index bb67e98ca5d162..eed69d955397c1 100644
--- a/files/ja/web/accessibility/aria/attributes/index.md
+++ b/files/ja/web/accessibility/aria/attributes/index.md
@@ -9,7 +9,8 @@ l10n:
 
 <abbr>ARIA</abbr> 属性は、アクセシビリティツリーで定義された要素の状態やプロパティを変更することが可能です。
 
-> **メモ:** ARIA はアクセシビリティツリーを変更するだけで、支援技術がコンテンツをユーザーにどのように表示するかを変更します。ARIA は要素の機能や動作を何らかの形で変更するものではありません。意味づけられた HTML 要素を本来の目的や既定値で使用しない場合は、JavaScript を使って動作やフォーカス、ARIA の状態を管理する必要があります。
+> [!NOTE]
+> ARIA はアクセシビリティツリーを変更するだけで、支援技術がコンテンツをユーザーにどのように表示するかを変更します。ARIA は要素の機能や動作を何らかの形で変更するものではありません。意味づけられた HTML 要素を本来の目的や既定値で使用しない場合は、JavaScript を使って動作やフォーカス、ARIA の状態を管理する必要があります。
 
 ## ARIA 属性の種類
 
diff --git a/files/ja/web/accessibility/aria/index.md b/files/ja/web/accessibility/aria/index.md
index a2edb3f07404b3..9de29694936cbc 100644
--- a/files/ja/web/accessibility/aria/index.md
+++ b/files/ja/web/accessibility/aria/index.md
@@ -31,11 +31,13 @@ Accessible Rich Internet Applications **(ARIA)** は[ロール](/ja/docs/Web/Acc
 
 ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、アクセシビリティのある JavaScript ウィジェット、フォームのヒント、エラーメッセージ、ライブコンテンツ更新などを可能にします。
 
-> **警告:** これらのウィジェットの多くは、代のブラウザーで完全に対応しています。意味的に正しい HTML 要素が存在するのであれば、 **ARIA を使用するよりも、その要素を使用したほうがいいでしょう**。例えば、ネイティブな要素には[キーボードのアクセシビリティ](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)やロール、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで（同等の）ブラウザーの動作を模倣する責任があります。
+> [!WARNING]
+> これらのウィジェットの多くは、代のブラウザーで完全に対応しています。意味的に正しい HTML 要素が存在するのであれば、 **ARIA を使用するよりも、その要素を使用したほうがいいでしょう**。例えば、ネイティブな要素には[キーボードのアクセシビリティ](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)やロール、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで（同等の）ブラウザーの動作を模倣する責任があります。
 
 [ARIA の最初のルール](https://www.w3.org/TR/using-aria/#rule1) は、「要素を再利用し、それをアクセシブルにするために ARIA のロール、状態、プロパティを追加する代わりに、要求される意味づけと動作がすでに組み込まれているネイティブの HTML 要素または属性を使用することができるなら、そうすること」です。
 
-> **メモ:** 「ARIA なしは悪い ARIA に勝る」という言葉があります。 [100 万以上のホームページを対象とした WebAim の調査](https://webaim.org/projects/million/#aria)では、 ARIA を表示しているホームページは、 ARIA を表示していないホームページに比べて、検出されたエラーが平均 41% 多いことが分かりました。 ARIA はウェブページをよりアクセシビリティの高いものにするために設計されていますが、誤った使用をしてしまうと、良いことより害悪が勝ることがあります。
+> [!NOTE]
+> 「ARIA なしは悪い ARIA に勝る」という言葉があります。 [100 万以上のホームページを対象とした WebAim の調査](https://webaim.org/projects/million/#aria)では、 ARIA を表示しているホームページは、 ARIA を表示していないホームページに比べて、検出されたエラーが平均 41% 多いことが分かりました。 ARIA はウェブページをよりアクセシビリティの高いものにするために設計されていますが、誤った使用をしてしまうと、良いことより害悪が勝ることがあります。
 
 プログレスバーウィジェットのためのマークアップです。
 
@@ -79,7 +81,8 @@ function updateProgress(percentComplete) {
 
 > **メモ:** `min` 属性は {{HTMLElement('progress')}} 要素では許可されません。その最小値は常に `0` です。
 
-> **メモ:** HTML のランドマーク要素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} など）は、組み込みの暗黙の ARIA ロールを持っているので、それらを重複指定する必要はありません。
+> [!NOTE]
+> HTML のランドマーク要素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} など）は、組み込みの暗黙の ARIA ロールを持っているので、それらを重複指定する必要はありません。
 
 ## 対応
 
diff --git a/files/ja/web/accessibility/aria/multipart_labels/index.md b/files/ja/web/accessibility/aria/multipart_labels/index.md
index dce582d82bacb2..b4f0831ba45ff8 100644
--- a/files/ja/web/accessibility/aria/multipart_labels/index.md
+++ b/files/ja/web/accessibility/aria/multipart_labels/index.md
@@ -45,7 +45,8 @@ body {
 
 JAWS 8.0 はラベルを発見する独自のロジックを持っており、常に HTML 文書で見つけたテキストボックスの accessibleName より優先します。 JAWS 8 で、上記の例からラベルを受け入れるようにする方法は見つかっていません。しかし NVDA や Window-Eyes の動作は良好であり、また Linux での Orca も問題がありません。
 
-> **メモ:** TBD: さらに互換性情報を追加する
+> [!NOTE]
+> TBD: さらに互換性情報を追加する
 
 ## ARIA を使用せずに実現できるか
 
diff --git a/files/ja/web/accessibility/aria/roles/alert_role/index.md b/files/ja/web/accessibility/aria/roles/alert_role/index.md
index 69905b00c37d1b..c97ec3e89af8e1 100644
--- a/files/ja/web/accessibility/aria/roles/alert_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/alert_role/index.md
@@ -23,7 +23,8 @@ l10n:
 
 `alert` ロールはアラートメッセージを格納するノードに追加されるものであり、アラートを発生させる要素には追加され**ません**。アラートは [assertive ライブリージョン](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) です。 `role="alert"` を設定することは、[`aria-live="assertive"`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live) と [`aria-atomic="true"`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) を設定することと同じです。これらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーとの対話も必要ありません。
 
-> **警告:** その押しつけがましい性質から、`alert` ロールは控えめに、ユーザーの緊急な注意が要求される状況でだけ使用してください。
+> [!WARNING]
+> その押しつけがましい性質から、`alert` ロールは控えめに、ユーザーの緊急な注意が要求される状況でだけ使用してください。
 
 [`alert`](https://www.w3.org/TR/wai-aria-1.1/#alert) ロールは 5 つの[ライブリージョン](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)のロールのうちの 1 つです。緊急性の低い動的な変更には、`aria-live="polite"` を含めたり、[`status`](/ja/docs/Web/Accessibility/ARIA/Roles/status_role) のような他のライブリージョンのロールを使用するなど、より控えめな方法を使用してください。ユーザーがアラートを閉じることが期待される場合は、代わりに [`alertdialog`](/ja/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) ロールを使用してください。
 
diff --git a/files/ja/web/accessibility/aria/roles/alertdialog_role/index.md b/files/ja/web/accessibility/aria/roles/alertdialog_role/index.md
index b4481e4b1d164d..c7dfa53927e209 100644
--- a/files/ja/web/accessibility/aria/roles/alertdialog_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/alertdialog_role/index.md
@@ -19,7 +19,8 @@ slug: Web/Accessibility/ARIA/Roles/alertdialog_role
 
 その緊急性のために、アラートダイアログは常にモーダルでなければなりません。
 
-> **メモ:** このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、`alertdialog` がここで使用する適切なロールではない可能性があります。 その場合は、代わりに `alert` ロールを使用するべきです（[ARIA: `alert` ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role)の説明を参照）。
+> [!NOTE]
+> このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、`alertdialog` がここで使用する適切なロールではない可能性があります。 その場合は、代わりに `alert` ロールを使用するべきです（[ARIA: `alert` ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role)の説明を参照）。
 
 ### ユーザーエージェントと支援技術への影響
 
@@ -32,7 +33,8 @@ slug: Web/Accessibility/ARIA/Roles/alertdialog_role
 
 アラートダイアログが正しくラベル付けされ、ダイアログ内のコントロールにフォーカスが移動したら、スクリーンリーダーは、フォーカスが当たっている要素をアナウンスする前に、ダイアログのアクセス可能なロール、名前、およびオプションの説明をアナウンスするべきです。
 
-> **メモ:** 支援技術がこの技術をどのように処理するかについては、意見が異なる場合があります。 上記の情報はそれらの意見の一つであり、したがって規範的なものではありません。
+> [!NOTE]
+> 支援技術がこの技術をどのように処理するかについては、意見が異なる場合があります。 上記の情報はそれらの意見の一つであり、したがって規範的なものではありません。
 
 ### 例
 
diff --git a/files/ja/web/accessibility/aria/roles/application_role/index.md b/files/ja/web/accessibility/aria/roles/application_role/index.md
index 267bf52ff74875..aa15178a6c6760 100644
--- a/files/ja/web/accessibility/aria/roles/application_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/application_role/index.md
@@ -57,7 +57,8 @@ slug: Web/Accessibility/ARIA/Roles/application_role
 - 属性値の変更
   - : `aria-activedescendant` は、アプリケーションコンテナー内のフォーカスを管理するために使用します。 フォーカスやインタラクションのポイントを変更するキーボードやその他のアプリケーションのイベントに応じて設定します。
 
-> **メモ:** アプリケーション (`application`) ロールには、関連する HTML ウィジェットがないため、完全に自由形式です。 アプリケーションの作成者は、ユーザーがフォーカスのリンボに拘束されたり、ユーザーが抜け出せないものの中にフォーカスを閉じ込められたりしないようにするために全面的な責任を負う必要があります。 ページの他の部分にある通常のウェブコンテンツに戻ることを含む、インタラクションの全ての側面を処理する必要があります。 賢明に、そして慎重に使用してください！
+> [!NOTE]
+> アプリケーション (`application`) ロールには、関連する HTML ウィジェットがないため、完全に自由形式です。 アプリケーションの作成者は、ユーザーがフォーカスのリンボに拘束されたり、ユーザーが抜け出せないものの中にフォーカスを閉じ込められたりしないようにするために全面的な責任を負う必要があります。 ページの他の部分にある通常のウェブコンテンツに戻ることを含む、インタラクションの全ての側面を処理する必要があります。 賢明に、そして慎重に使用してください！
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/article_role/index.md b/files/ja/web/accessibility/aria/roles/article_role/index.md
index ab62e2b8bc907e..912940bfe00b4c 100644
--- a/files/ja/web/accessibility/aria/roles/article_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/article_role/index.md
@@ -17,7 +17,8 @@ slug: Web/Accessibility/ARIA/Roles/article_role
 
 この例では、同じように構成され、関連している 2 つの記事を 1 ページに並べて表示しています。
 
-> **メモ:** 記事 (`article`) ロールを持つ `<div>` ではなく、`<article>` 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。
+> [!NOTE]
+> 記事 (`article`) ロールを持つ `<div>` ではなく、`<article>` 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。
 
 `role="article"` を使用する代わりに、{{htmlelement("article")}} 要素を使用することができます。
 
@@ -63,7 +64,8 @@ slug: Web/Accessibility/ARIA/Roles/article_role
 - 属性値の変更
   - : フィードを作成するときは、各記事 (`article`) ロールの `aria-posinset` 属性と `aria-setsize` 属性を適切な値に設定します。 `aria-posinset` は、1 ベースであることに注意してください。
 
-> **メモ:** 常にネイティブの要素を使用してください。 記事 (`article`) ロールを持つ `<div>` ではなく、{{htmlelement("article")}} 要素を使用するべきです。
+> [!NOTE]
+> 常にネイティブの要素を使用してください。 記事 (`article`) ロールを持つ `<div>` ではなく、{{htmlelement("article")}} 要素を使用するべきです。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/button_role/index.md b/files/ja/web/accessibility/aria/roles/button_role/index.md
index a53037ffd2d3ec..0cc48fe11107d9 100644
--- a/files/ja/web/accessibility/aria/roles/button_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/button_role/index.md
@@ -268,7 +268,8 @@ function toggleButton(element) {
 
 ボタンはインタラクティブなコントロールであるため、フォーカス可能です。 ボタン (`button`) ロールがそれ自体ではフォーカスできない要素 (`<span>`、`<div>`、`<p>` など) に追加された場合、ボタンをフォーカス可能にするには `tabindex` 属性を使用する必要があります。
 
-> **警告:** ボタンロールでリンクをマークアップするときは注意してください。 ボタンは <kbd>Space</kbd> キーや <kbd>Enter</kbd> キーを使用して操作することが期待されますが、リンクは <kbd>Enter</kbd> キーを使用して操作することが期待されます。つまり、リンクをボタンのような振る舞いで使用する場合、 `role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、<kbd>Space</kbd> キーを待ち受けするキーイベントハンドラーを追加する必要もあります。
+> [!WARNING]
+> ボタンロールでリンクをマークアップするときは注意してください。 ボタンは <kbd>Space</kbd> キーや <kbd>Enter</kbd> キーを使用して操作することが期待されますが、リンクは <kbd>Enter</kbd> キーを使用して操作することが期待されます。つまり、リンクをボタンのような振る舞いで使用する場合、 `role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、<kbd>Space</kbd> キーを待ち受けするキーイベントハンドラーを追加する必要もあります。
 
 ボタン (`button`) ロールを使用すると、スクリーンリーダーは要素をボタンとしてアナウンスします。 通常、「クリック」の後にボタンのアクセス可能な名前が続きます。 アクセス可能な名前は、要素のコンテンツ、または `aria-label` の値、または `aria-labelledby` 属性によって参照される要素、または含まれている場合は説明のいずれかです。
 
diff --git a/files/ja/web/accessibility/aria/roles/cell_role/index.md b/files/ja/web/accessibility/aria/roles/cell_role/index.md
index abe4ada8ef6b85..7831460ac685bf 100644
--- a/files/ja/web/accessibility/aria/roles/cell_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/cell_role/index.md
@@ -32,7 +32,8 @@ l10n:
 
 セルには、 [`aria-colindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindex), [`aria-colspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colspan), [`aria-rowindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex), [`aria-rowspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) など、表形式データ構造内のセルの位置を明確にする多数のプロパティ属性を含めることができます。
 
-> **メモ:** 可能であれば、ネイティブな HTML 表要素 ({{HTMLElement('table')}} を、表の行要素 ({{HTMLElement('tr')}} および表のセル要素 ({{HTMLElement('td')}} と共に使用することを強く推奨します。
+> [!NOTE]
+> 可能であれば、ネイティブな HTML 表要素 ({{HTMLElement('table')}} を、表の行要素 ({{HTMLElement('tr')}} および表のセル要素 ({{HTMLElement('td')}} と共に使用することを強く推奨します。
 
 ### 関連する WAI-ARIA のロール、ステート、プロパティ
 
diff --git a/files/ja/web/accessibility/aria/roles/checkbox_role/index.md b/files/ja/web/accessibility/aria/roles/checkbox_role/index.md
index 8460a62d85d473..b5ac5f767b158c 100644
--- a/files/ja/web/accessibility/aria/roles/checkbox_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/checkbox_role/index.md
@@ -133,7 +133,8 @@ function changeCheckbox(event) {
 
 - スクリーンリーダーは、要素をチェックボックスとしてアナウンスし、任意でアクティブ化する方法を説明する必要があります。
 
-> **メモ:** 支援技術がこの手法をどのように扱うべきかについては、意見が異なる場合があります。 上記の情報はそれらの意見の 1 つであり、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がこの手法をどのように扱うべきかについては、意見が異なる場合があります。 上記の情報はそれらの意見の 1 つであり、したがって規範的ではありません。
 
 ## ベストプラクティス
 
diff --git a/files/ja/web/accessibility/aria/roles/dialog_role/index.md b/files/ja/web/accessibility/aria/roles/dialog_role/index.md
index 9aab1106577014..69571c9a50fa3a 100644
--- a/files/ja/web/accessibility/aria/roles/dialog_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/dialog_role/index.md
@@ -46,7 +46,8 @@ slug: Web/Accessibility/ARIA/Roles/dialog_role
 </div>
 ```
 
-> **メモ:** なお、非仮想モードで動作するスクリーンリーダーが認識するために、ダイアログのタイトルと説明のテキストがフォーカス可能である必要はありません。 ARIA のダイアログロールとラベル付けの手法を組み合わせることで、スクリーンリーダーは、フォーカスがダイアログに移動したときにダイアログの情報をアナウンスするべきです。
+> [!NOTE]
+> なお、非仮想モードで動作するスクリーンリーダーが認識するために、ダイアログのタイトルと説明のテキストがフォーカス可能である必要はありません。 ARIA のダイアログロールとラベル付けの手法を組み合わせることで、スクリーンリーダーは、フォーカスがダイアログに移動したときにダイアログの情報をアナウンスするべきです。
 
 ### 必要な JavaScript 機能
 
@@ -76,7 +77,8 @@ slug: Web/Accessibility/ARIA/Roles/dialog_role
 
 ダイアログが正しくラベル付けされ、フォーカスがダイアログ内の要素 (多くの場合、ボタンなどのインタラクティブな要素) に移動された時、スクリーンリーダーは、フォーカスされた要素をアナウンスするとともに、ダイアログのアクセス可能なロール、名前、および任意で説明をアナウンスするべきです。
 
-> **メモ:** 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があり、アナウンスの順序は使用する支援技術によって異なる場合があります。 上記の情報はこれらの意見の 1 つであり、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があり、アナウンスの順序は使用する支援技術によって異なる場合があります。 上記の情報はこれらの意見の 1 つであり、したがって規範的ではありません。
 
 ## 例
 
@@ -119,7 +121,8 @@ slug: Web/Accessibility/ARIA/Roles/dialog_role
 
 ### 注
 
-> **メモ:** キーボードユーザーがダイアログ外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーのユーザーは、スクリーンリーダーの仮想カーソルを使用してそのコンテンツにナビゲートできるかもしれません。 開発者は、モーダルダイアログがアクティブな間、モーダルダイアログ外のコンテンツに全てのユーザーがアクセスできないようにすることが重要です。
+> [!NOTE]
+> キーボードユーザーがダイアログ外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーのユーザーは、スクリーンリーダーの仮想カーソルを使用してそのコンテンツにナビゲートできるかもしれません。 開発者は、モーダルダイアログがアクティブな間、モーダルダイアログ外のコンテンツに全てのユーザーがアクセスできないようにすることが重要です。
 
 ## 仕様
 
diff --git a/files/ja/web/accessibility/aria/roles/figure_role/index.md b/files/ja/web/accessibility/aria/roles/figure_role/index.md
index 9cb32196f4aca2..66d44f89883223 100644
--- a/files/ja/web/accessibility/aria/roles/figure_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/figure_role/index.md
@@ -57,7 +57,8 @@ ARIA の図表 (`figure`) ロールは、適切な意味論がまだ存在しな
 
 一般的には、本文から図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。
 
-> **メモ:** 可能な限り、適切な意味論の HTML 要素を使用して図表とそのキャプション ({{htmlelement("figure")}} と {{htmlelement("figcaption")}}) をマークアップするべきです。 詳しくは、[ベストプラクティス](#best_practices)を参照してください。
+> [!NOTE]
+> 可能な限り、適切な意味論の HTML 要素を使用して図表とそのキャプション ({{htmlelement("figure")}} と {{htmlelement("figcaption")}}) をマークアップするべきです。 詳しくは、[ベストプラクティス](#best_practices)を参照してください。
 
 ### 関連する WAI-ARIA のロール、ステート、プロパティ
 
diff --git a/files/ja/web/accessibility/aria/roles/form_role/index.md b/files/ja/web/accessibility/aria/roles/form_role/index.md
index caa9994d9308ba..0557801da60f9b 100644
--- a/files/ja/web/accessibility/aria/roles/form_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/form_role/index.md
@@ -13,7 +13,8 @@ slug: Web/Accessibility/ARIA/Roles/form_role
 
 これは、ユーザーの連絡先を収集して保存するフォームです。
 
-> **警告:** 十分に正当な理由がない限り、ARIA の フォーム (`form`) ロールではなく、HTML の {{htmlelement("form")}} 要素を使用してフォームコントロールを格納してください。 HTML の `<form>` 要素は、支援技術にフォームがあることを伝えるのに十分です。
+> [!WARNING]
+> 十分に正当な理由がない限り、ARIA の フォーム (`form`) ロールではなく、HTML の {{htmlelement("form")}} 要素を使用してフォームコントロールを格納してください。 HTML の `<form>` 要素は、支援技術にフォームがあることを伝えるのに十分です。
 
 ## 説明
 
diff --git a/files/ja/web/accessibility/aria/roles/grid_role/index.md b/files/ja/web/accessibility/aria/roles/grid_role/index.md
index 276a4d3e522aaa..c1e862b94a6823 100644
--- a/files/ja/web/accessibility/aria/roles/grid_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/grid_role/index.md
@@ -68,7 +68,8 @@ slug: Web/Accessibility/ARIA/Roles/grid_role
 - [aria-readonly](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-readonly_attribute)
   - : ユーザーがグリッドをナビゲートできるが、グリッドの値を変更できない場合は、`aria-readonly` を `true` に設定するべきです。 デフォルト値は `false` です。
 
-> **メモ:** 多くのユースケースでは、HTML の表 ([`table`](/ja/docs/Web/HTML/Element/table)) 要素で十分であり、その要素にはすでに多くの ARIA ロールが含まれています。
+> [!NOTE]
+> 多くのユースケースでは、HTML の表 ([`table`](/ja/docs/Web/HTML/Element/table)) 要素で十分であり、その要素にはすでに多くの ARIA ロールが含まれています。
 
 ### キーボードインタラクション
 
diff --git a/files/ja/web/accessibility/aria/roles/group_role/index.md b/files/ja/web/accessibility/aria/roles/group_role/index.md
index d4994590df60c9..c2c91bdf28fc33 100644
--- a/files/ja/web/accessibility/aria/roles/group_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/group_role/index.md
@@ -29,7 +29,8 @@ slug: Web/Accessibility/ARIA/Roles/group_role
 - スクリーンリーダーは、フォーカスが最初にその中のコントロールに着くとグループをアナウンスし、もし [`aria-describedby`](http://www.w3.org/TR/wai-aria/#aria-describedby) が設定されていれば、その説明が読み上げられます。 これに続いて、フォーカスされたコントロールをアナウンスすることができます。
 - スクリーン拡大鏡でグループが拡大されることがあります。
 
-> **メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ### 例
 
diff --git a/files/ja/web/accessibility/aria/roles/heading_role/index.md b/files/ja/web/accessibility/aria/roles/heading_role/index.md
index 7e8edbccf23387..383ebc2ed69667 100644
--- a/files/ja/web/accessibility/aria/roles/heading_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/heading_role/index.md
@@ -31,7 +31,8 @@ slug: Web/Accessibility/ARIA/Roles/heading_role
 - 属性値の変更
   - : コンテンツを動的に挿入しない限り、通常は必要ありません。 万一そのようなことがあるならば、新しく追加された見出しには、文書構造の残りの部分と整合性のある値を持つ `aria-level` 属性が必要です。
 
-> **メモ:** 見出し (`heading`) ロールと `aria-level` を持つ `<div>` または `<span>` を使用する代わりに、ネイティブの `<h1>` から `<h6>` 要素を使用して、このテキストが見出しであり、構造のどの部分を表しているかを示すことを検討してください。
+> [!NOTE]
+> 見出し (`heading`) ロールと `aria-level` を持つ `<div>` または `<span>` を使用する代わりに、ネイティブの `<h1>` から `<h6>` 要素を使用して、このテキストが見出しであり、構造のどの部分を表しているかを示すことを検討してください。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/index.md b/files/ja/web/accessibility/aria/roles/index.md
index b2c14f2e70b773..91216af0a4c111 100644
--- a/files/ja/web/accessibility/aria/roles/index.md
+++ b/files/ja/web/accessibility/aria/roles/index.md
@@ -135,9 +135,11 @@ ARIA のロールには 6 つのカテゴリーがあります。
 
 [command](/ja/docs/Web/Accessibility/ARIA/Roles/command_role), [composite](/ja/docs/Web/Accessibility/ARIA/Roles/composite_role), [input](/ja/docs/Web/Accessibility/ARIA/Roles/input_role), [landmark](/ja/docs/Web/Accessibility/ARIA/Roles/landmark_role), [range](/ja/docs/Web/Accessibility/ARIA/Roles/range_role), [roletype](/ja/docs/Web/Accessibility/ARIA/Roles/roletype_role), [section](/ja/docs/Web/Accessibility/ARIA/Roles/section_role), [sectionhead](/ja/docs/Web/Accessibility/ARIA/Roles/sectionhead_role), [select](/ja/docs/Web/Accessibility/ARIA/Roles/select_role), [structure](/ja/docs/Web/Accessibility/ARIA/Roles/structure_role), [widget](/ja/docs/Web/Accessibility/ARIA/Roles/widget_role), [window](/ja/docs/Web/Accessibility/ARIA/Roles/window_role) は使用しないでください。
 
-> **メモ:** サイトやアプリケーションで 抽象ロールを使用しないでください。これらはブラウザーが使用するものです。これらは参照用にのみ含まれています。
+> [!NOTE]
+> サイトやアプリケーションで 抽象ロールを使用しないでください。これらはブラウザーが使用するものです。これらは参照用にのみ含まれています。
 
-> **警告:** "抽象ロールはオントロジーに使用されます。作者はコンテンツで抽象ロールを使用しては**なりません**。" - <abbr>WAI-ARIA</abbr> 仕様書
+> [!WARNING]
+> "抽象ロールはオントロジーに使用されます。作者はコンテンツで抽象ロールを使用しては**なりません**。" - <abbr>WAI-ARIA</abbr> 仕様書
 
 ## MDN で定義されているロール
 
diff --git a/files/ja/web/accessibility/aria/roles/link_role/index.md b/files/ja/web/accessibility/aria/roles/link_role/index.md
index 2ccb06ab683062..6cab14639a51fa 100644
--- a/files/ja/web/accessibility/aria/roles/link_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/link_role/index.md
@@ -11,7 +11,8 @@ slug: Web/Accessibility/ARIA/Roles/link_role
 
 `link` ロールは、アプリケーションまたは外部にあるリソースへのハイパーリンクを作成する要素を識別するために使用されます。 このロールが要素に追加されると、タブを使用してリンクへのフォーカスを変更したり、リンクの実行にスペースやエンターを使用することができます。
 
-> **メモ:** 可能であれば、ネイティブ要素は古いユーザーエージェントや支援技術によって広くサポートされているため、`link` ロールではなくネイティブの {{HTMLElement("a")}} 要素を使用することをお勧めします。 ネイティブ {{HTMLElement("a")}} 要素は、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件もサポートしています。
+> [!NOTE]
+> 可能であれば、ネイティブ要素は古いユーザーエージェントや支援技術によって広くサポートされているため、`link` ロールではなくネイティブの {{HTMLElement("a")}} 要素を使用することをお勧めします。 ネイティブ {{HTMLElement("a")}} 要素は、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件もサポートしています。
 
 [`tabindex`](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex) 属性は、タブの順序で要素の位置を直接指定するために、このロールで任意に使用できます。
 
diff --git a/files/ja/web/accessibility/aria/roles/list_role/index.md b/files/ja/web/accessibility/aria/roles/list_role/index.md
index 4765c9dead0f64..f09185d9d3c138 100644
--- a/files/ja/web/accessibility/aria/roles/list_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/list_role/index.md
@@ -19,7 +19,8 @@ ARIA のリスト (`list`) ロールは、項目のリストを識別するた
 
 リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。
 
-> **警告:** 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、[ベストプラクティス](#best_practices)を参照してください。
+> [!WARNING]
+> 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、[ベストプラクティス](#best_practices)を参照してください。
 
 ### 関連する WAI-ARIA のロール、ステート、プロパティ
 
@@ -64,11 +65,13 @@ HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA
 </ol>
 ```
 
-> **メモ:** ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
+> [!NOTE]
+> ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
 
 余談ですが、意味論的な HTML 要素である `ol` または `ul` を使用してプレゼンテーション ([`presentation`](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role)) ロールを適用する場合、ARIA ではリスト項目 (`listitem`) 要素に親のリスト (`list`) 要素が必須であるため、各子 `li` 要素はプレゼンテーション (`presentation`) ロールを継承することに注意してください。 そのため、`li` 要素は支援技術には公開されませんが、ネストされたリストを含め、これらの `li` 要素の内部に含まれる要素は、支援技術からは見えることになります。
 
-> **メモ:** タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
+> [!NOTE]
+> タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
 
 ## 仕様
 
diff --git a/files/ja/web/accessibility/aria/roles/listbox_role/index.md b/files/ja/web/accessibility/aria/roles/listbox_role/index.md
index edfcfe4bf37a25..114a941e7a4cf0 100644
--- a/files/ja/web/accessibility/aria/roles/listbox_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/listbox_role/index.md
@@ -140,7 +140,8 @@ HTML の選択要素や、1 項目しか選択できない場合はラジオボ
 2. 選択状態を反映するようにオプションの外観を変更します。
 3. オプションを選択の解除へトグルしている場合でも、リストボックスの `aria-activedescendant` の値を、ユーザーが直前にインタラクトしたオプションの `id` に更新します。
 
-> **メモ:** ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 `<option>` 要素を子孫に持つ `<select>` 要素は、必要な全てのインタラクションをネイティブに処理します。
+> [!NOTE]
+> ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 `<option>` 要素を子孫に持つ `<select>` 要素は、必要な全てのインタラクションをネイティブに処理します。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/listitem_role/index.md b/files/ja/web/accessibility/aria/roles/listitem_role/index.md
index 85c40284ac84b6..bf43e2d969db58 100644
--- a/files/ja/web/accessibility/aria/roles/listitem_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/listitem_role/index.md
@@ -19,7 +19,8 @@ ARIA のリスト項目 (`listitem`) ロールは、項目のリスト内の項
 
 リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。
 
-> **警告:** 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、[ベストプラクティス](#best_practices)を参照してください。
+> [!WARNING]
+> 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、[ベストプラクティス](#best_practices)を参照してください。
 
 ### 関連する WAI-ARIA のロール、ステート、プロパティ
 
@@ -64,9 +65,11 @@ ARIA のリスト項目 (`listitem`) ロールは、項目のリスト内の項
 </ol>
 ```
 
-> **メモ:** ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
+> [!NOTE]
+> ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
 
-> **メモ:** タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
+> [!NOTE]
+> タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
 
 ## 仕様
 
diff --git a/files/ja/web/accessibility/aria/roles/log_role/index.md b/files/ja/web/accessibility/aria/roles/log_role/index.md
index 77eac9b21ccd2a..3b9a01027d288f 100644
--- a/files/ja/web/accessibility/aria/roles/log_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/log_role/index.md
@@ -25,7 +25,8 @@ slug: Web/Accessibility/ARIA/Roles/log_role
 - `aria-live="assertive"` が設定されておらず、ユーザーが中断されている場合を除き、スクリーンリーダーは、ユーザーがアイドル状態のときにログ内の変更をアナウンスするべきです。
 - スクリーン拡大鏡は、ログ更新が発生したことを視覚的に示すことができます。
 
-> **メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ### 例
 
diff --git a/files/ja/web/accessibility/aria/roles/presentation_role/index.md b/files/ja/web/accessibility/aria/roles/presentation_role/index.md
index 3fed1ab7c2553f..0f1d78a0364550 100644
--- a/files/ja/web/accessibility/aria/roles/presentation_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/presentation_role/index.md
@@ -11,7 +11,8 @@ slug: Web/Accessibility/ARIA/Roles/presentation_role
 
 ## ユーザーエージェントと支援技術への影響
 
-> **メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/progressbar_role/index.md b/files/ja/web/accessibility/aria/roles/progressbar_role/index.md
index ed9083c159953d..dce0ef6284488d 100644
--- a/files/ja/web/accessibility/aria/roles/progressbar_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/progressbar_role/index.md
@@ -15,7 +15,8 @@ slug: Web/Accessibility/ARIA/Roles/progressbar_role
 
 プログレスバーがページの特定の領域のロード進捗状況を説明している場合、作者は、[aria-describedby](http://www.w3.org/TR/wai-aria/#aria-describedby) を使用してステータスを指し示すべきであり、ロードが完了するまで領域の [aria-busy](http://www.w3.org/TR/wai-aria/#aria-busy) 属性を `true` に設定する**べき**です（SHOULD）。 これは常に読み取り専用なので、ユーザーはプログレスバーの値を変更することはできません。
 
-> **メモ:** 支援技術は、[aria-valuetext](http://www.w3.org/TR/wai-aria/#aria-valuetext) が指定されていない限り、`aria-valuemin` の値と `aria-valuemax` の値の間の範囲のパーセントとして、`aria-valuenow` の値を一般にレンダリングします。 この計算に適した方法で、`aria-valuemin`、`aria-valuemax`、`aria-valuenow` の値を設定することをお勧めします。
+> [!NOTE]
+> 支援技術は、[aria-valuetext](http://www.w3.org/TR/wai-aria/#aria-valuetext) が指定されていない限り、`aria-valuemin` の値と `aria-valuemax` の値の間の範囲のパーセントとして、`aria-valuenow` の値を一般にレンダリングします。 この計算に適した方法で、`aria-valuemin`、`aria-valuemax`、`aria-valuenow` の値を設定することをお勧めします。
 
 > **メモ:** `progressbar` ロールを持つ要素の暗黙の [`aria-readonly`](http://www.w3.org/TR/wai-aria/#aria-readonly) の値は `true` です。
 
@@ -23,7 +24,8 @@ slug: Web/Accessibility/ARIA/Roles/progressbar_role
 
 スクリーンリーダーは進捗状況の更新が発生したときにアナウンスするべきです。 プログレスバーにラベルが付いている場合は、ラベルテキストも同様に述べるべきです。
 
-> **メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/radio_role/index.md b/files/ja/web/accessibility/aria/roles/radio_role/index.md
index f8ce848c66e84f..1ccc52b3bb8e91 100644
--- a/files/ja/web/accessibility/aria/roles/radio_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/radio_role/index.md
@@ -48,7 +48,8 @@ l10n:
 
 `role` 属性は意味づけを追加するだけです。 [HTML radio](/ja/docs/Web/HTML/Element/input/radio) にネイティブに備わっている機能はすべて JavaScript と HTML の [`tabindex`](/ja/docs/Web/HTML/Global_attributes/tabindex) 属性で追加する必要があります。
 
-> **メモ:** ARIA の最初のルールは、ネイティブの HTML 要素や属性が要求される意味づけや動作を持っている場合、要素を再利用して ARIA を追加する代わりにそれを使用することです。代わりに、ネイティブの [HTML `<input type="radio">`](/ja/docs/Web/HTML/Element/input/radio) （{{HTMLElement('label')}} が関連付けられたもの）を使用してください。
+> [!NOTE]
+> ARIA の最初のルールは、ネイティブの HTML 要素や属性が要求される意味づけや動作を持っている場合、要素を再利用して ARIA を追加する代わりにそれを使用することです。代わりに、ネイティブの [HTML `<input type="radio">`](/ja/docs/Web/HTML/Element/input/radio) （{{HTMLElement('label')}} が関連付けられたもの）を使用してください。
 
 ```html
 <fieldset>
diff --git a/files/ja/web/accessibility/aria/roles/row_role/index.md b/files/ja/web/accessibility/aria/roles/row_role/index.md
index 534f9e1bc8e4d5..0c5a213162595b 100644
--- a/files/ja/web/accessibility/aria/roles/row_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/row_role/index.md
@@ -39,7 +39,8 @@ ARIA の行を作成するには、コンテナー要素に行ロール (`role="
 
 表形式の構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションを提供する場合や、ユーザーインターフェイスでセルの順序を入れ替えたり、ドラッグアンドドロップなどで個々のセルの順序を変更したりできる場合は、代わりにグリッド ([`grid`](/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role)) やツリーグリッド ([`treegrid`](/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_role)) を使用してください。
 
-> **メモ:** 可能な限り、ネイティブな HTML の表要素 (`<table>`) を表の行要素 (`<tr>`) と共に使用することを強く推奨します。
+> [!NOTE]
+> 可能な限り、ネイティブな HTML の表要素 (`<table>`) を表の行要素 (`<tr>`) と共に使用することを強く推奨します。
 
 ### 関連する WAI-ARIA のロール、ステート、プロパティ
 
@@ -109,7 +110,8 @@ ARIA の行を作成するには、コンテナー要素に行ロール (`role="
 
 無し。 ソート可能な列については、列ヘッダー ([`columnheader`](/ja/docs/Web/Accessibility/ARIA/Roles/columnheader_role)) ロールを参照してください。
 
-> **メモ:** ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを**追加する**ことでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 可能な限り、ARIA の表ロールの代わりに HTML の `<table>` 要素を使用してください。
+> [!NOTE]
+> ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを**追加する**ことでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 可能な限り、ARIA の表ロールの代わりに HTML の `<table>` 要素を使用してください。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/rowgroup_role/index.md b/files/ja/web/accessibility/aria/roles/rowgroup_role/index.md
index aaedbc8498116a..ee8d0f5c32d8d3 100644
--- a/files/ja/web/accessibility/aria/roles/rowgroup_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/rowgroup_role/index.md
@@ -33,7 +33,8 @@ slug: Web/Accessibility/ARIA/Roles/rowgroup_role
 
 ARIA の表ヘッダー、表フッター、表本体を作成するには、行グループロール (`role="rowgroup"`) を要素に追加します。 その行グループは、1 つ以上の行のグループを含むグリッド、表、またはツリーグリッド内にネストするべきです。 各行には子のセルが含まれています。 これらのセルには、列や行のヘッダー、プレーンなセルやグリッドセルとさまざまな種類のセルがあります。
 
-> **メモ:** 可能な限り、ネイティブな HTML の表要素（`<table>`）を表ヘッダー（`<thead>`）、表フッター（`<tfoot>`）、表本体（`<tbody>`）の要素と共に使用することを強く推奨します。
+> [!NOTE]
+> 可能な限り、ネイティブな HTML の表要素（`<table>`）を表ヘッダー（`<thead>`）、表フッター（`<tfoot>`）、表本体（`<tbody>`）の要素と共に使用することを強く推奨します。
 
 ### 関連する WAI-ARIA のロール、ステート、プロパティ
 
@@ -59,7 +60,8 @@ ARIA の表ヘッダー、表フッター、表本体を作成するには、行
 
 無し。
 
-> **メモ:** ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを**追加する**ことでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 可能な限り、ARIA の表ロールの代わりに HTML の `<table>` 要素を使用してください。
+> [!NOTE]
+> ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを**追加する**ことでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 可能な限り、ARIA の表ロールの代わりに HTML の `<table>` 要素を使用してください。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/slider_role/index.md b/files/ja/web/accessibility/aria/roles/slider_role/index.md
index 456b9b6734d608..050d713e9d6cb2 100644
--- a/files/ja/web/accessibility/aria/roles/slider_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/slider_role/index.md
@@ -21,7 +21,8 @@ slug: Web/Accessibility/ARIA/Roles/slider_role
 
 ## ユーザーエージェントと支援技術への影響
 
-> **メモ:** 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/spinbutton_role/index.md b/files/ja/web/accessibility/aria/roles/spinbutton_role/index.md
index 11f77d363b607b..c9dcb1b2f86fff 100644
--- a/files/ja/web/accessibility/aria/roles/spinbutton_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/spinbutton_role/index.md
@@ -31,7 +31,8 @@ ARIA は、プログレスバー、メーター、スライダー、スピンボ
 
 これら 3 つの範囲はすべて同じ ARIA の状態とプロパティを持ちますが、 `spinbutton` ロールは唯一の読み書き可能な範囲です。それはユーザーが操作することで値が変わる唯一のものです。そのため、フォーカスを受け取ることができなければなりません。さらに、キーボード操作、マウスクリック、タッチ操作に対応していなければなりません。
 
-> **警告:** スピンボタンの値を変更するために、タッチベースの支援技術は、キーイベントを合成することによって値を増減するためのユーザージェスチャーに応答する必要があります。
+> [!WARNING]
+> スピンボタンの値を変更するために、タッチベースの支援技術は、キーイベントを合成することによって値を増減するためのユーザージェスチャーに応答する必要があります。
 > `spinbutton` ロール（およびすべての範囲ウィジェット）を使用する前に、タッチが主な入力メカニズムである端末で支援技術を使用してスピンボタンウィジェットを完全にテストしてください。
 
 #### 共通の属性
diff --git a/files/ja/web/accessibility/aria/roles/status_role/index.md b/files/ja/web/accessibility/aria/roles/status_role/index.md
index cf48ff054ae0c0..4b43915790725e 100644
--- a/files/ja/web/accessibility/aria/roles/status_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/status_role/index.md
@@ -27,7 +27,8 @@ slug: Web/Accessibility/ARIA/Roles/status_role
 - スクリーンリーダーは、現在のステータスをアナウンスするための特別なキーを提供することがあり、これはステータスのライブリージョンの内容を提示するべきです。 `aria-live="assertive"` が設定されている場合を除いて、ユーザーがアイドル状態になったときにアナウンスするべきです。
 - スクリーン拡大鏡でステータスが拡大されることがあります。
 
-> **メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ### 例
 
diff --git a/files/ja/web/accessibility/aria/roles/switch_role/index.md b/files/ja/web/accessibility/aria/roles/switch_role/index.md
index 46f14acf48242e..d492f54e8bba9f 100644
--- a/files/ja/web/accessibility/aria/roles/switch_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/switch_role/index.md
@@ -54,7 +54,8 @@ ARIA のスイッチ (**`switch`**) ロールは、チェックボックス ([`c
 
 - スクリーンリーダーは、要素をスイッチとしてアナウンスし、任意でスイッチをアクティブ化する方法についての指示を提供するべきです。
 
-> **メモ:** 支援技術がこのロールをどのように扱うべきかについては、さまざまな意見があります。 上記は推奨される実践方法の 1 つであり、他の情報源とは異なる場合があります。
+> [!NOTE]
+> 支援技術がこのロールをどのように扱うべきかについては、さまざまな意見があります。 上記は推奨される実践方法の 1 つであり、他の情報源とは異なる場合があります。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/tab_role/index.md b/files/ja/web/accessibility/aria/roles/tab_role/index.md
index 03bac68d02f8ca..4597f1933b16c6 100644
--- a/files/ja/web/accessibility/aria/roles/tab_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/tab_role/index.md
@@ -39,7 +39,8 @@ ARIA のタブ (`tab`) ロールは、タブリスト (`tablist`) 内のイン
 
 ### 必要な JavaScript 機能
 
-> **メモ:** JavaScript を使用せずにタブのような機能を構築する方法はありますが、コンテンツを含むアクセス可能なタブに上記で必要とされるのと同じ機能のセットを提供する HTML と CSS のみの代替の組み合わせはありません。
+> [!NOTE]
+> JavaScript を使用せずにタブのような機能を構築する方法はありますが、コンテンツを含むアクセス可能なタブに上記で必要とされるのと同じ機能のセットを提供する HTML と CSS のみの代替の組み合わせはありません。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/table_role/index.md b/files/ja/web/accessibility/aria/roles/table_role/index.md
index 884afaff2dd0a0..167e80f51e0fab 100644
--- a/files/ja/web/accessibility/aria/roles/table_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/table_role/index.md
@@ -38,7 +38,8 @@ ARIA の role 属性の table 値は、このロールを含む要素を、ネ
 
 `role="table"` を持つ要素はセルを含む行を持つ静的な表構造です。 表の個々のセル内のウィジェットはインタラクティブになることがありますが、セルはフォーカス可能または選択可能ではありません。 可能な限りネイティブの HTML {{htmlelement("table")}} 要素を使用することを強くお勧めします。
 
-> **警告:** 表が選択状態を維持している場合、2 次元ナビゲーションを使用している場合、またはユーザーがセルの順序を並べ替えることができる場合は、代わりにグリッド（[`grid`](/ja/docs/Web/Accessibility/ARIA/Roles/grid_role)）またはツリーグリッド（[`treegrid`](/ja/docs/Web)）を使用します。
+> [!WARNING]
+> 表が選択状態を維持している場合、2 次元ナビゲーションを使用している場合、またはユーザーがセルの順序を並べ替えることができる場合は、代わりにグリッド（[`grid`](/ja/docs/Web/Accessibility/ARIA/Roles/grid_role)）またはツリーグリッド（[`treegrid`](/ja/docs/Web)）を使用します。
 
 ARIA の表を作成するには、`role="table"` をコンテナ要素に追加します。 そのコンテナ内では、各行に `role="row"` を設定し、子セルを含ませます。 各セルには、列ヘッダー（`columnheader`）、行ヘッダー（`rowheader`）、または単なるセル（[`cell`](/ja/docs/Web/Accessibility/ARIA/Roles/cell_role)）のいずれかのロールがあります。 行は、表の子になることも、行グループ（[`rowgroup`](/ja/docs/Web/Accessibility/ARIA/Roles/rowgroup_role)）内になることもあります。
 
@@ -48,7 +49,8 @@ ARIA の表を作成するには、`role="table"` をコンテナ要素に追加
 
 表構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用してください。 インタラクションが個々のセルの選択状態を提供する場合、左から右へ、上から下へのナビゲーションを提供する場合、またはユーザーインターフェイスでセルの順序の並べ替えやドラッグアンドドロップなどの個々のセルの順序の変更を許可する場合、代わりに [`grid`](/ja/docs/Web/Accessibility/ARIA/Roles/grid_role) または [`treegrid`](/ja/docs/Web) を使用してください。
 
-> **メモ:** 可能な限りネイティブの [HTML の表要素](/ja/docs/Learn/HTML/Tables/Advanced)を使用することを強くお勧めします。
+> [!NOTE]
+> 可能な限りネイティブの [HTML の表要素](/ja/docs/Learn/HTML/Tables/Advanced)を使用することを強くお勧めします。
 
 ### 関連する WAI-ARIA のロール、ステート、プロパティ
 
@@ -73,7 +75,8 @@ ARIA の表を作成するには、`role="table"` をコンテナ要素に追加
 
 無し。 ソート可能な列については、 [`columnheader`](/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role) ロールを参照してください。
 
-> **メモ:** ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを**追加して**アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の `table` ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。
+> [!NOTE]
+> ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを**追加して**アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の `table` ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/term_role/index.md b/files/ja/web/accessibility/aria/roles/term_role/index.md
index 854828c3455cd1..048d6e3603d437 100644
--- a/files/ja/web/accessibility/aria/roles/term_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/term_role/index.md
@@ -15,7 +15,8 @@ l10n:
 
 `role="term"` をリンクのような対話的要素に使用しないでください。支援技術ユーザーが要素と対話するのを妨害する可能性があるからです。また、用語そのものがアクセシビリティ名なので、 [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) や [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) は使用しないでください。
 
-> **警告:** アクセシブル名は用語そのものでなければなりませんので、`aria-label` や `aria-labelledby` は使用しないでください。
+> [!WARNING]
+> アクセシブル名は用語そのものでなければなりませんので、`aria-label` や `aria-labelledby` は使用しないでください。
 
 ### 関連付けられる WAI-ARIA ロール、ステート、プロパティ
 
diff --git a/files/ja/web/accessibility/aria/roles/textbox_role/index.md b/files/ja/web/accessibility/aria/roles/textbox_role/index.md
index a5f981fcac35ed..7bb62457577c7a 100644
--- a/files/ja/web/accessibility/aria/roles/textbox_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/textbox_role/index.md
@@ -82,7 +82,8 @@ l10n:
 - フォーカスイベントハンドラーと aria-activedescendant 属性
   - : テキストボックスとリストボックスで構成されるコンボボックスなどの複合ウィジェットを実装する場合は、ハンドラーを使用して `aria-activedescendant` 属性を管理する必要があります。 この手法を使用する前に、ターゲットとするブラウザーが現在対応していることを確認してください。 詳細については、[aria-descendant の仕様書](https://www.w3.org/TR/wai-aria/#aria-activedescendant)（英語）を参照してください。
 
-> **メモ:** ARIA の `textbox` ロールの代わりに `type="text"` の {{HTMLElement("input")}} 要素、または {{HTMLElement("textarea")}} 要素を使用する方が良い方法です。 どちらの意味づけされた要素を使用する場合でも、ARIA の `textbox` ロールは必要ありません。 [HTML で ARIA を使用する場合の注意](https://www.w3.org/TR/aria-in-html/)（英語）を参照してください。
+> [!NOTE]
+> ARIA の `textbox` ロールの代わりに `type="text"` の {{HTMLElement("input")}} 要素、または {{HTMLElement("textarea")}} 要素を使用する方が良い方法です。 どちらの意味づけされた要素を使用する場合でも、ARIA の `textbox` ロールは必要ありません。 [HTML で ARIA を使用する場合の注意](https://www.w3.org/TR/aria-in-html/)（英語）を参照してください。
 
 ## ユーザーエージェントと支援技術への影響
 
@@ -96,7 +97,8 @@ l10n:
 - スクリーンリーダーは、フォーカスが最初にテキストボックスに着くと、そのラベルとロールをアナウンスするべきです。 コンテンツも含まれている場合は、これを通常のテキストボックスの場合と同様にアナウンスするべきです。
 - スクリーン拡大鏡でテキストボックスが拡大することができること。
 
-> **メモ:** 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ## 例
 
diff --git a/files/ja/web/accessibility/aria/roles/toolbar_role/index.md b/files/ja/web/accessibility/aria/roles/toolbar_role/index.md
index cf087841a06a0d..a341edde83b4bb 100644
--- a/files/ja/web/accessibility/aria/roles/toolbar_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/toolbar_role/index.md
@@ -11,7 +11,8 @@ slug: Web/Accessibility/ARIA/Roles/toolbar_role
 
 ### ユーザーエージェントと支援技術への影響
 
-> **メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
+> [!NOTE]
+> 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
 
 ### 例
 
diff --git a/files/ja/web/accessibility/understanding_colors_and_luminance/index.md b/files/ja/web/accessibility/understanding_colors_and_luminance/index.md
index 57206ab0c75930..b622c4a18add07 100644
--- a/files/ja/web/accessibility/understanding_colors_and_luminance/index.md
+++ b/files/ja/web/accessibility/understanding_colors_and_luminance/index.md
@@ -126,7 +126,8 @@ RGBはCRTを使用することを反映したハードウェア指向のもの
 
 しかし、アクセシビリティに関する標準と規格の作成は、特に色のコントラスト比に適用される sRGB 色空間を主に使用しています。
 
-> **メモ:** 今日、ウェブコンテンツを表示するために使用されているほとんどすべてのシステムは、 sRGB エンコード方式を想定しています。コンテンツの処理と表示に別の色空間を使用することがわかっていない限り、作成者は sRGB 色空間を使用して評価する必要があります。他にも色空間を用いる場合は、[最小コントラスト比](https://webaim.org/articles/contrast/#sc143)の原則を適用してください。
+> [!NOTE]
+> 今日、ウェブコンテンツを表示するために使用されているほとんどすべてのシステムは、 sRGB エンコード方式を想定しています。コンテンツの処理と表示に別の色空間を使用することがわかっていない限り、作成者は sRGB 色空間を使用して評価する必要があります。他にも色空間を用いる場合は、[最小コントラスト比](https://webaim.org/articles/contrast/#sc143)の原則を適用してください。
 
 ### 色値の問い合わせ
 
diff --git a/files/ja/web/accessibility/understanding_wcag/operable/index.md b/files/ja/web/accessibility/understanding_wcag/operable/index.md
index 887ce429bc8a15..ed73ab45a496d8 100644
--- a/files/ja/web/accessibility/understanding_wcag/operable/index.md
+++ b/files/ja/web/accessibility/understanding_wcag/operable/index.md
@@ -7,7 +7,8 @@ slug: Web/Accessibility/Understanding_WCAG/Operable
 
 この記事では、ウェブコンテンツ・アクセシビリティガイドライン（WCAG）2.0 および 2.1 の**操作可能**原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法についての実用的なアドバイスを提供します。 操作可能とは、ユーザーインターフェイス・コンポーネントとナビゲーションが操作可能でなければならないということです。
 
-> **メモ:** 操作可能の W3C の定義とそのガイドラインおよび達成基準を読むには、[原則 2: 操作可能 — ユーザーインターフェイス・コンポーネントとナビゲーションが操作可能でなければならない](https://www.w3.org/TR/WCAG21/#operable)（英語）を参照してください。
+> [!NOTE]
+> 操作可能の W3C の定義とそのガイドラインおよび達成基準を読むには、[原則 2: 操作可能 — ユーザーインターフェイス・コンポーネントとナビゲーションが操作可能でなければならない](https://www.w3.org/TR/WCAG21/#operable)（英語）を参照してください。
 
 ## ガイドライン 2.1 — キーボードアクセス可能: キーボードから全ての機能を利用可能にする
 
diff --git a/files/ja/web/accessibility/understanding_wcag/perceivable/index.md b/files/ja/web/accessibility/understanding_wcag/perceivable/index.md
index e73a3123496a58..a82568c22ec165 100644
--- a/files/ja/web/accessibility/understanding_wcag/perceivable/index.md
+++ b/files/ja/web/accessibility/understanding_wcag/perceivable/index.md
@@ -9,7 +9,8 @@ l10n:
 
 この記事では、ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.0 および 2.1 の**知覚可能**原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法についての実用的なアドバイスを提供します。 知覚可能とは、ユーザーが自分の感覚の 1 つ以上を使用して何らかの方法でそれを知覚できなければならないということです。
 
-> **メモ:** 知覚可能の W3C 定義とそのガイドラインおよび達成基準を読むには、[原則 1: 知覚可能 — 情報とユーザーインターフェイス・コンポーネントが、ユーザーが認識できる方法で提示可能である必要があります](https://www.w3.org/TR/WCAG21/#perceivable)（英語）を参照してください。
+> [!NOTE]
+> 知覚可能の W3C 定義とそのガイドラインおよび達成基準を読むには、[原則 1: 知覚可能 — 情報とユーザーインターフェイス・コンポーネントが、ユーザーが認識できる方法で提示可能である必要があります](https://www.w3.org/TR/WCAG21/#perceivable)（英語）を参照してください。
 
 ## ガイドライン 1.1 — 非テキストコンテンツのための代替テキストの提供
 
diff --git a/files/ja/web/accessibility/understanding_wcag/robust/index.md b/files/ja/web/accessibility/understanding_wcag/robust/index.md
index 4123d487adaf57..9538cf2c72cfd6 100644
--- a/files/ja/web/accessibility/understanding_wcag/robust/index.md
+++ b/files/ja/web/accessibility/understanding_wcag/robust/index.md
@@ -7,7 +7,8 @@ slug: Web/Accessibility/Understanding_WCAG/Robust
 
 この記事では、ウェブコンテンツ・アクセシビリティガイドライン（WCAG）2.0 および 2.1 の**堅牢**原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法についての実用的なアドバイスを提供します。 堅牢とは、支援技術を含む多種多様なユーザーエージェントによって確実に解釈されることができるほど十分に堅牢でなければならないと述べています。 これは通常、ウェブ標準に準拠し、[厳密にテスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)することによって実現できます。
 
-> **メモ:** W3C の堅牢の定義とそのガイドラインおよび達成基準を読むには、[原則 4: 堅牢 — コンテンツは、支援技術を含むさまざまなユーザーエージェントによって確実に解釈されるよう十分に堅牢である必要があります](https://www.w3.org/TR/WCAG21/#robust)（英語）を参照してください。
+> [!NOTE]
+> W3C の堅牢の定義とそのガイドラインおよび達成基準を読むには、[原則 4: 堅牢 — コンテンツは、支援技術を含むさまざまなユーザーエージェントによって確実に解釈されるよう十分に堅牢である必要があります](https://www.w3.org/TR/WCAG21/#robust)（英語）を参照してください。
 
 ## ガイドライン 4.1 — 互換性: 支援技術を含む現在および将来のユーザーエージェントとの互換性を最大化する
 
diff --git a/files/ja/web/accessibility/understanding_wcag/understandable/index.md b/files/ja/web/accessibility/understanding_wcag/understandable/index.md
index 33d562a40c8603..487b4351e788e8 100644
--- a/files/ja/web/accessibility/understanding_wcag/understandable/index.md
+++ b/files/ja/web/accessibility/understanding_wcag/understandable/index.md
@@ -7,7 +7,8 @@ slug: Web/Accessibility/Understanding_WCAG/Understandable
 
 この記事では、ウェブコンテンツ・アクセシビリティガイドライン（WCAG）2.0 および 2.1 の**理解可能**原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法について実用的なアドバイスを提供します。 理解可能とは、情報とユーザーインターフェイスの操作が理解可能でなければならないと述べています。
 
-> **メモ:** 理解可能の W3C の定義とそのガイドラインおよび達成基準を読むには、[原則 3: 理解可能 — 情報とユーザーインターフェイスの操作が理解可能でなければならない](https://www.w3.org/TR/WCAG21/#understandable)（英語）を参照してください。
+> [!NOTE]
+> 理解可能の W3C の定義とそのガイドラインおよび達成基準を読むには、[原則 3: 理解可能 — 情報とユーザーインターフェイスの操作が理解可能でなければならない](https://www.w3.org/TR/WCAG21/#understandable)（英語）を参照してください。
 
 ## ガイドライン 3.1 — 読みやすさ: テキストコンテンツを読みやすく理解しやすいものにする
 
diff --git a/files/ja/web/api/abortcontroller/abort/index.md b/files/ja/web/api/abortcontroller/abort/index.md
index 55e5e2b0e0a186..30b50b6ade5109 100644
--- a/files/ja/web/api/abortcontroller/abort/index.md
+++ b/files/ja/web/api/abortcontroller/abort/index.md
@@ -3,13 +3,13 @@ title: "AbortController: abort() メソッド"
 short-title: abort()
 slug: Web/API/AbortController/abort
 l10n:
-  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+  sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-**`abort()`** は {{domxref("AbortController")}} インターフェイスのメソッドで、 DOM リクエストを完了前に中止します。
-これは[フェッチリクエスト](/ja/docs/Web/API/fetch)、あらゆるレスポンス本体の消費、ストリームを中止することができます。
+**`abort()`** は {{domxref("AbortController")}} インターフェイスのメソッドで、非同期操作を完了前に中止します。
+これは[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)、あらゆるレスポンス本体の消費、ストリームを中止することができます。
 
 ## 構文
 
@@ -34,7 +34,7 @@ abort(reason)
 
 最初に {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使用してコントローラーを作成し、関連する {{domxref("AbortSignal")}} オブジェクトへの参照を {{domxref("AbortController.signal")}} プロパティを使用して取り込みます。
 
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
 
 ```js
 const controller = new AbortController();
diff --git a/files/ja/web/api/abortcontroller/abortcontroller/index.md b/files/ja/web/api/abortcontroller/abortcontroller/index.md
index 91b115980d88b9..c5efb513d061b8 100644
--- a/files/ja/web/api/abortcontroller/abortcontroller/index.md
+++ b/files/ja/web/api/abortcontroller/abortcontroller/index.md
@@ -3,10 +3,10 @@ title: "AbortController: AbortController() コンストラクター"
 short-title: AbortController()
 slug: Web/API/AbortController/AbortController
 l10n:
-  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+  sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`AbortController()`** は、新しい {{domxref("AbortController")}} オブジェクトインスタンスを生成します。
 
@@ -26,7 +26,7 @@ new AbortController()
 
 最初に {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使用してコントローラーを作成し、関連する {{domxref("AbortSignal")}} オブジェクトへの参照を {{domxref("AbortController.signal")}} プロパティを使用して取り込みます。
 
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{ signal }`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{ signal }`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
 
 ```js
 const controller = new AbortController();
diff --git a/files/ja/web/api/abortcontroller/index.md b/files/ja/web/api/abortcontroller/index.md
index 96e1f5d984b554..37b594c3b0a35e 100644
--- a/files/ja/web/api/abortcontroller/index.md
+++ b/files/ja/web/api/abortcontroller/index.md
@@ -2,39 +2,42 @@
 title: AbortController
 slug: Web/API/AbortController
 l10n:
-  sourceCommit: bca8d1ab2bc4f5a1ef6b39c454b0229539178e98
+  sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`AbortController`** インターフェイスは 1 つ以上のウェブリクエストをいつでも中断することを可能にするコントローラーオブジェクトを表します。
 
-新しい `AbortController` オブジェクトを新しく生成するには、 {{domxref("AbortController.AbortController()", "AbortController()")}} コンストラクターを使うことができます。 DOM リクエストとの送信は、 {{domxref("AbortSignal")}} オブジェクトを使って行われます。
+新しい `AbortController` オブジェクトは、 {{domxref("AbortController.AbortController()", "AbortController()")}} コンストラクターを使って新しく生成することができます。非同期操作の通信は、{{domxref("AbortSignal")}} オブジェクトを使って行われます。
 
 ## コンストラクター
 
-- {{domxref("AbortController()")}}
+- {{domxref("AbortController.AbortController()", "AbortController()")}}
   - : 新しい `AbortController` オブジェクトインスタンスを生成します。
 
-## プロパティ
+## インスタンスプロパティ
 
 - {{domxref("AbortController.signal")}} {{ReadOnlyInline}}
-  - : {{domxref("AbortSignal")}} オブジェクトのインスタンスを返します。 このオブジェクトは、 DOM リクエストの送信や中断に使用します。
+  - : {{domxref("AbortSignal")}} オブジェクトのインスタンスを返します。 このオブジェクトは、非同期操作の通信や中断に使用します。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("AbortController.abort()")}}
-  - : DOM リクエストが完了する前に中断します。これは、[フェッチリクエスト](/ja/docs/Web/API/fetch)、あらゆるレスポンス本体やストリームを中断することができます。
+  - : 非同期操作が完了する前に中断します。これは、[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)や、あらゆるレスポンス本体やストリームを中断することができます。
 
 ## 例
 
-> **メモ:** 他の例が {{domxref("AbortSignal")}} のリファレンスにあります。
+> [!NOTE]
+> 他の例が {{domxref("AbortSignal")}} のリファレンスにあります。
 
 この後の短いコードで、[フェッチ API](/ja/docs/Web/API/Fetch_API) を使用して動画をダウンロードします。
 
 まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、 {{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。
 
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が行われると、リクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、 {{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が行われると、リクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、 {{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
+
+`abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` という名前の `DOMException` で拒否されます。
 
 ```js
 let controller;
@@ -52,20 +55,36 @@ abortBtn.addEventListener("click", () => {
   }
 });
 
-function fetchVideo() {
+async function fetchVideo() {
   controller = new AbortController();
   const signal = controller.signal;
-  fetch(url, { signal })
-    .then((response) => {
-      console.log("Download complete", response);
-    })
-    .catch((err) => {
-      console.error(`Download error: ${err.message}`);
-    });
+
+  try {
+    const response = await fetch(url, { signal });
+    console.log("Download complete", response);
+    // process response further
+  } catch (err) {
+    console.error(`Download error: ${err.message}`);
+  }
 }
 ```
 
-> **メモ:** `abort()` が呼ばれると、`fetch()` のプロミスは `AbortError` と呼ばれる `DOMException` で失敗します。
+`fetch()` が履行された後で、レスポンス本体を読み込む前にリクエストが中止された場合、レスポンス本体を読み込もうとすると `AbortError` 例外が発生して拒否されます。
+
+```js
+async function get() {
+  const controller = new AbortController();
+  const request = new Request("https://example.org/get", {
+    signal: controller.signal,
+  });
+
+  const response = await fetch(request);
+  controller.abort();
+  // 次の行で `AbortError` が発生する
+  const text = await response.text();
+  console.log(text);
+}
+```
 
 [GitHub に完全に動作する例](https://github.com/mdn/dom-examples/tree/main/abort-api)があります。また、[ライブでの実行](https://mdn.github.io/dom-examples/abort-api/)も確認してください。
 
diff --git a/files/ja/web/api/abortcontroller/signal/index.md b/files/ja/web/api/abortcontroller/signal/index.md
index 140a7ac9e7e640..2db5f05ece74d2 100644
--- a/files/ja/web/api/abortcontroller/signal/index.md
+++ b/files/ja/web/api/abortcontroller/signal/index.md
@@ -3,12 +3,12 @@ title: "AbortController: signal プロパティ"
 short-title: signal
 slug: Web/API/AbortController/signal
 l10n:
-  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+  sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-**`signal`** は {{domxref("AbortController")}} インターフェイスの読み取り専用プロパティで、求めに応じて DOM リクエストと連携したり中止したりするために使用される {{domxref("AbortSignal")}} オブジェクトインスタンスを返します。
+**`signal`** は {{domxref("AbortController")}} インターフェイスの読み取り専用プロパティで、求めに応じて非同期操作とやりとりしたり中止したりするために使用される {{domxref("AbortSignal")}} オブジェクトインスタンスを返します。
 
 ## 値
 
@@ -20,7 +20,7 @@ l10n:
 
 最初に {{domxref("AbortController.AbortController", "AbortController()")}} コンストラクターを使用してコントローラーを作成し、関連する {{domxref("AbortSignal")}} オブジェクトへの参照を {{domxref("AbortController.signal")}} プロパティを使用して取り込みます。
 
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
 
 ```js
 const controller = new AbortController();
diff --git a/files/ja/web/api/abortsignal/abort_event/index.md b/files/ja/web/api/abortsignal/abort_event/index.md
index 7ec8d3e856de07..9aefd30a0b28e4 100644
--- a/files/ja/web/api/abortsignal/abort_event/index.md
+++ b/files/ja/web/api/abortsignal/abort_event/index.md
@@ -1,11 +1,12 @@
 ---
 title: "AbortSignal: abort イベント"
+short-title: abort
 slug: Web/API/AbortSignal/abort_event
 l10n:
-  sourceCommit: 02e1bfcad5fd0de845fb033d331c3c027afa2d6e
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`abort`** は {{domxref("AbortSignal")}} のイベントで、関連するリクエストが中止されたとき、つまり {{domxref("AbortController.abort()")}} を使用して中止されたときに発行されます。
 
diff --git a/files/ja/web/api/abortsignal/abort_static/index.md b/files/ja/web/api/abortsignal/abort_static/index.md
index 8300cc0a31687b..44a948db9ef7d2 100644
--- a/files/ja/web/api/abortsignal/abort_static/index.md
+++ b/files/ja/web/api/abortsignal/abort_static/index.md
@@ -1,11 +1,14 @@
 ---
-title: AbortSignal.abort()
+title: "AbortSignal: abort() 静的メソッド"
+short-title: abort()
 slug: Web/API/AbortSignal/abort_static
+l10n:
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-静的な **`AbortSignal.abort()`** メソッドは、既に中止と設定されている（かつ {{domxref("AbortSignal/abort_event", "abort")}} イベントが発生していない） {{domxref("AbortSignal") }} を返します。
+**`AbortSignal.abort()`** は静的メソッドで、既に中止と設定されている（かつ {{domxref("AbortSignal/abort_event", "abort")}} イベントが発生していない） {{domxref("AbortSignal")}} を返します。
 
 これは、以下のコードの一連で行うものです。
 
@@ -17,13 +20,14 @@ return controller.signal;
 
 これは、例えば、フェッチメソッドの中止ロジックを実行するために渡される可能性があります （つまり、意図したフェッチ処理が開始されていなくても中止ロジックが実行されるように コードが構成されていることがあります）。
 
-> **メモ:** このメソッドは {{JSxRef("Promise.reject")}} と同じような目的を持っています。
+> [!NOTE]
+> このメソッドは {{JSxRef("Promise.reject")}} と同じような目的を持っています。
 
 ## 構文
 
 ```js-nolint
-abort()
-abort(reason)
+AbortSignal.abort()
+AbortSignal.abort(reason)
 ```
 
 ### 引数
diff --git a/files/ja/web/api/abortsignal/aborted/index.md b/files/ja/web/api/abortsignal/aborted/index.md
index 2542c175cc7396..6efddea518c5ee 100644
--- a/files/ja/web/api/abortsignal/aborted/index.md
+++ b/files/ja/web/api/abortsignal/aborted/index.md
@@ -1,13 +1,14 @@
 ---
-title: AbortSignal.aborted
+title: "AbortSignal: aborted プロパティ"
+short-title: aborted
 slug: Web/API/AbortSignal/aborted
 l10n:
-  sourceCommit: 02e1bfcad5fd0de845fb033d331c3c027afa2d6e
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-**`aborted`** は読み取り専用プロパティで、そのシグナルが通信している DOM リクエストが中止されているか (`true`)、されていないか (`false`) を示す値を返します。
+**`aborted`** は読み取り専用プロパティで、そのシグナルがやりとりしている非同期操作が中止されているか (`true`)、されていないか (`false`) を示す値を返します。
 
 ## 値
 
diff --git a/files/ja/web/api/abortsignal/any_static/index.md b/files/ja/web/api/abortsignal/any_static/index.md
index 8916b8a8f4fed5..ee28ccbbf71755 100644
--- a/files/ja/web/api/abortsignal/any_static/index.md
+++ b/files/ja/web/api/abortsignal/any_static/index.md
@@ -1,13 +1,14 @@
 ---
 title: "AbortSignal: any() 静的メソッド"
+short-title: any()
 slug: Web/API/AbortSignal/any_static
 l10n:
-  sourceCommit: 32f666e453bdb8c93d305075453b6e304cae94de
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-静的メソッド **`AbortSignal.any()`** は、中止シグナルが入った反復可能オブジェクトを受け取り、{{domxref("AbortSignal")}} を返します。返される中止シグナルは、渡された反復可能オブジェクト内の中止シグナルのいずれかが中止された時中止されます。{{domxref("AbortSignal.reason", "中止の理由","","true")}}は、中止された最初のシグナルの理由に設定されます。渡された中止シグナルのいずれかが既に中止されている場合は、既に中止と設定されている {{domxref("AbortSignal")}} を返します。
+**`AbortSignal.any()`** は静的メソッドで、中止シグナルが入った反復可能オブジェクトを受け取り、{{domxref("AbortSignal")}} を返します。返される中止シグナルは、渡された反復可能オブジェクト内の中止シグナルのいずれかが中止された時中止されます。{{domxref("AbortSignal.reason", "中止の理由","","true")}}は、中止された最初のシグナルの理由に設定されます。渡された中止シグナルのいずれかが既に中止されている場合は、既に中止と設定されている {{domxref("AbortSignal")}} を返します。
 
 ## 構文
 
diff --git a/files/ja/web/api/abortsignal/index.md b/files/ja/web/api/abortsignal/index.md
index 49286970da9ec0..a0b55d7e056f36 100644
--- a/files/ja/web/api/abortsignal/index.md
+++ b/files/ja/web/api/abortsignal/index.md
@@ -2,45 +2,49 @@
 title: AbortSignal
 slug: Web/API/AbortSignal
 l10n:
-  sourceCommit: a662e542a529a0f8c86b60d85abe0035093c86d1
+  sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-**`AbortSignal`** インターフェイスは DOM リクエスト（フェッチなど）と通信し、必要に応じて {{domxref("AbortController")}} オブジェクトを介して中止することを可能にするシグナルオブジェクトを表します。
+**`AbortSignal`** インターフェイスは非同期操作（フェッチリクエストなど）とやりとりし、必要に応じて {{domxref("AbortController")}} オブジェクトを介して中止することを可能にするシグナルオブジェクトを表します。
 
 {{InheritanceDiagram}}
 
 ## インスタンスプロパティ
 
-_AbortSignal インターフェイスには、親インターフェイスである {{domxref("EventTarget")}} から継承しているプロパティもあります。_
+_親インターフェイスである {{domxref("EventTarget")}} から継承しているプロパティもあります。_
 
 - {{domxref("AbortSignal.aborted")}} {{ReadOnlyInline}}
-  - : 論理値で、シグナルが通信しているリクエスト（または複数のリクエスト）が中止されているか (`true`)、中止されていないか (`false`) を表します。
+  - : 論理値で、このシグナルが通信しているリクエスト（または複数のリクエスト）が中止されているか (`true`)、中止されていないか (`false`) を表します。
 - {{domxref("AbortSignal.reason")}} {{ReadOnlyInline}}
-  - : シグナルが中止されると、中止の理由を提供する JavaScript の値です。
+  - : シグナルが中止されたとき、中止の理由を提供する JavaScript の値です。
 
 ## 静的メソッド
 
-- {{domxref("AbortSignal.abort()")}}
-  - : 既に中止と設定された **`AbortSignal`** を返します。
-- {{domxref("AbortSignal.any()")}}
-  - : 指定された中止シグナルのいずれかが中止された時中止となる **`AbortSignal`** を返します。
-- {{domxref("AbortSignal.timeout()")}}
-  - : 指定された時間の後で自動的に中止となる **`AbortSignal`** インターフェイスを返します。
+_親インターフェイスである {{domxref("EventTarget")}} から継承しているメソッドもあります。_
+
+- {{domxref("AbortSignal/abort_static", "AbortSignal.abort()")}}
+  - : 既に中止と設定された `AbortSignal` を返します。
+- {{domxref("AbortSignal/any_static", "AbortSignal.any()")}}
+  - : 指定された中止シグナルのいずれかが中止された時中止となる `AbortSignal` を返します。
+- {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}}
+  - : 指定された時間の後で自動的に中止となる `AbortSignal` インターフェイスを返します。
 
 ## インスタンスメソッド
 
-_**`AbortSignal`** インターフェイスには、親インターフェイスである {{domxref("EventTarget")}} から継承しているメソッドもあります。_
+_親インターフェイスである {{domxref("EventTarget")}} から継承しているメソッドもあります。_
 
 - {{domxref("AbortSignal.throwIfAborted()")}}
   - : シグナルが中止された場合、シグナルの中止理由 ({{domxref("AbortSignal.reason", "reason")}}) で例外を発生させ、それ以外の場合は何もしません。
 
 ## イベント
 
-[`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使うか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかして、このイベントを待ち受けしてください。
+_親インターフェイスである {{DOMxRef("EventTarget")}} から継承しているイベントもあります。_
+
+{{domxref("EventTarget.addEventListener", "addEventListener()")}} を使うか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかして、このイベントを待ち受けしてください。
 
-- [`abort`](/ja/docs/Web/API/AbortSignal/abort_event)
+- {{domxref("AbortSignal/abort_event", "abort")}}
   - : このシグナルが通信している DOM リクエストが中断されたとき、呼び出されます。
     `onabort` プロパティを介しても利用可能です。
 
@@ -52,42 +56,63 @@ _**`AbortSignal`** インターフェイスには、親インターフェイス
 
 まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、{{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。
 
-[読み込みリクエスト](/ja/docs/Web/API/fetch) が初期化すると、 `AbortSignal` をリクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして渡します。これによりシグナルと読み込みリクエストのコントローラーが関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch) が初期化すると、 `AbortSignal` をリクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして渡します。これによりシグナルと読み込みリクエストのコントローラーが関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
 下記では、フェッチ処理が 2 つ目のイベントリスナーで中止されていることがわかります。このイベントリスナーは、中止ボタン (`abortBtn`) がクリックされたときに起動します。
 
-```js
-const controller = new AbortController();
-const signal = controller.signal;
+`abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` という名前の `DOMException` で拒否されます。
 
+```js
+let controller;
 const url = "video.mp4";
+
 const downloadBtn = document.querySelector(".download");
 const abortBtn = document.querySelector(".abort");
 
 downloadBtn.addEventListener("click", fetchVideo);
 
 abortBtn.addEventListener("click", () => {
-  controller.abort();
-  console.log("Download aborted");
+  if (controller) {
+    controller.abort();
+    console.log("ダウンロードを中止しました");
+  }
 });
 
-function fetchVideo() {
-  fetch(url, { signal })
-    .then((response) => {
-      console.log("Download complete", response);
-    })
-    .catch((err) => {
-      console.error(`Download error: ${err.message}`);
-    });
+async function fetchVideo() {
+  controller = new AbortController();
+  const signal = controller.signal;
+
+  try {
+    const response = await fetch(url, { signal });
+    console.log("ダウンロードが完了しました", response);
+    // さらにレスポンスを処理
+  } catch (err) {
+    console.error(`ダウンロードエラー: ${err.message}`);
+  }
 }
 ```
 
-> **メモ:** `abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` で失敗します。
+`fetch()` が履行された後で、レスポンス本体を読み込む前にリクエストが中止された場合、レスポンス本体を読み込もうとすると `AbortError` 例外が発生して拒否されます。
+
+```js
+async function get() {
+  const controller = new AbortController();
+  const request = new Request("https://example.org/get", {
+    signal: controller.signal,
+  });
+
+  const response = await fetch(request);
+  controller.abort();
+  // 次の行で `AbortError` が発生する
+  const text = await response.text();
+  console.log(text);
+}
+```
 
-You can find a [full working example on GitHub](https://github.com/mdn/dom-examples/tree/main/abort-api); you can also see it [running live](https://mdn.github.io/dom-examples/abort-api/).
+[GitHub に完全に動作する例](https://github.com/mdn/dom-examples/tree/main/abort-api)があります。[実行可能な例](https://mdn.github.io/dom-examples/abort-api/)を見ることもできます。
 
 ### タイムアウトによるフェッチ操作の中止
 
-もしタイムアウトで処理を中断する必要がある場合は、静的な {{domxref("AbortSignal.timeout()") }} メソッドを使用することができます。
+もしタイムアウトで処理を中断する必要がある場合は、静的な {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}} メソッドを使用することができます。
 これは、指定のミリ秒後に自動的にタイムアウトする `AbortSignal` を返すものです。
 
 下記のコードでは、ファイルのダウンロードに成功するか、 5 秒後にタイムアウトエラーが発生した場合にどのように処理するかを示しています。
@@ -119,31 +144,83 @@ try {
 
 ### タイムアウトまたは明示的な中止を伴うフェッチの中止
 
-`fetch()` は複数のシグナルを組み合わせられるようには設計されていないので、 {{domxref("AbortController.abort()")}} の呼び出しまたは `AbortSignal` のタイムアウトのどちらかでダウンロードを中止することは「直接」はできません（ただし、前の例のように、停止ボタンなどのブラウザー内蔵の仕組みからタイムアウトシグナルを中止することができます）。
-
-複数のシグナルに対してトリガーを発生させるには、デイジーチェーン接続する必要があります。
-次のコードは、別個のタイマーのハンドラーで {{domxref("AbortController.abort()")}} を呼び出す方法を示しています。
+複数のシグナルから中止したい場合は、{{domxref("AbortSignal/any_static", "AbortSignal.any()")}}を使用して単一のシグナルに結合することができます。次の例では、 {{domxref("Window/fetch", "fetch")}} を使用してこの例を示しています。
 
 ```js
 try {
   const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 5000);
-  const res = await fetch(url, { signal: controller.signal });
+  const timeoutSignal = AbortSignal.timeout(5000);
+  const res = await fetch(url, {
+    // どちらかのシグナルが中止されると、フェッチは中止される
+    signal: AbortSignal.any([controller.signal, timeoutSignal]),
+  });
   const body = await res.json();
 } catch (e) {
   if (e.name === "AbortError") {
-    // Notify the user of abort.
-    // Note this will never be a timeout error!
+    // ユーザーに中止を通知
+  } else if (e.name === "TimeoutError") {
+    // ユーザーにタイムアウトを通知
   } else {
-    // A network error, or some other problem.
+    // ネットワークエラー、またはその他の問題
     console.log(`Type: ${e.name}, Message: ${e.message}`);
   }
-} finally {
-  clearTimeout(timeoutId);
 }
 ```
 
-> **メモ:** {{domxref("AbortSignal.timeout()")}} を使用したときとは異なり、最終的な中止がタイムアウトによって発生したのかどうかを判断する方法はありません。
+> **メモ:** {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}} を使用したときとは異なり、最終的な中止がタイムアウトによって発生したのかどうかを判断する方法はありません。
+
+### 中止可能な API の実装
+
+中止対応を必要とする API は `AbortSignal` オブジェクトを受け入れることができ、必要なときに中止シグナル処理を発生させるためにその状態を使用することができます。
+
+{{jsxref("Promise")}} ベースの API は、`AbortSignal` の中止 {{domxref("AbortSignal.reason", "reason")}} で未確定のプロミスを拒否することで、中止シグナルに応答する必要があります。
+例えば、次の `myCoolPromiseAPI` はシグナルを受け取ってプロミスを返します。
+シグナルが既に中止されている場合、または中止イベントが検出された場合、プロミスは直ちに拒否されます。
+そうでない場合は完全に完了し、プロミスを解決します。
+
+```js
+function myCoolPromiseAPI(/* …, */ { signal }) {
+  return new Promise((resolve, reject) => {
+    // シグナルがすでに中止されている場合は、プロミスを拒否するために直ちに例外を発生
+    if (signal.aborted) {
+      reject(signal.reason);
+    }
+
+    // API の主目的を実行
+    // 終了したら resolve(result) を呼び出す。
+
+    // 'abort' シグナルを監視
+    signal.addEventListener("abort", () => {
+      // 主な処理を停止
+      // 中止される理由でプロミスを拒否する
+      reject(signal.reason);
+    });
+  });
+}
+```
+
+このAPIは、次のように使用します。
+処理を中止するために {{domxref("AbortController.abort()")}} が呼び出されていることに注意しましょう。
+
+```js
+const controller = new AbortController();
+const signal = controller.signal;
+
+startSpinner();
+
+myCoolPromiseAPI({ /* …, */ signal })
+  .then((result) => {})
+  .catch((err) => {
+    if (err.name === "AbortError") return;
+    showUserErrorMessage();
+  })
+  .then(() => stopSpinner());
+
+controller.abort();
+```
+
+プロミスを返さない API も同じような反応をするかもしれません。
+場合によっては、そのシグナルを吸収する意味があるかもしれません。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/abortsignal/throwifaborted/index.md b/files/ja/web/api/abortsignal/throwifaborted/index.md
index 11befad05d33e2..6756e60dabd0e6 100644
--- a/files/ja/web/api/abortsignal/throwifaborted/index.md
+++ b/files/ja/web/api/abortsignal/throwifaborted/index.md
@@ -1,17 +1,18 @@
 ---
-title: AbortSignal.throwIfAborted()
+title: "AbortSignal: throwIfAborted() メソッド"
+short-title: throwIfAborted()
 slug: Web/API/AbortSignal/throwIfAborted
 l10n:
-  sourceCommit: 8d27f508bd2c6270918fb3b047d73b57e8b949d3
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-**`throwIfAborted()`**メソッドは、シグナルが中止された場合、シグナルの中止理由 ({{domxref("AbortSignal.reason", "reason")}}) の例外を発生させ、それ以外の場合は何もしません。
+**`throwIfAborted()`** メソッドは、シグナルが中止された場合、シグナルの中止理由 ({{domxref("AbortSignal.reason", "reason")}}) の例外を発生させ、それ以外の場合は何もしません。
 
 中止に対応させる必要がある API は、{{domxref("AbortSignal")}} オブジェクトを受け入れ、 `throwIfAborted()` を使用して [`abort`](/ja/docs/Web/API/AbortSignal/abort_event) イベントが発生するとテストして例外を発生するようにすることができます。
 
-このメソッドは、シグナルを受け取る関数に渡すのではなく、コード内の特定の点で処理を中止するために使用することもできます。
+このメソッドは、シグナルを受け取る関数に渡すのではなく、コード内の特定の時点で処理を中止するために使用することもできます。
 
 ## 構文
 
@@ -54,59 +55,6 @@ async function waitForCondition(func, targetValue, { signal } = {}) {
 ループを反復処理するたびに、 `throwIfAborted()` を使用して、もし処理が中止された場合にはシグナルの `reason` を例外として投げます（それ以外の場合は何もしません）。
 シグナルが中止された場合、 `waitForCondition()` のプロミスが拒否されます。
 
-### 中止可能な API の実装
-
-中止することを対応する必要がある API は `AbortSignal` オブジェクトを受け入れ、必要なときにその状態を使用して中止シグナル処理を開始させることができます。
-
-{{jsxref("Promise")}} ベースの API は、`AbortSignal` の中止理由 ({{domxref("AbortSignal.reason", "reason")}}) で未確定のプロミスを拒否して、中止シグナルに応答する必要があります。
-例えば、シグナルを受け取ってプロミスを返す以下の `myCoolPromiseAPI` を考えてみましょう。
-シグナルが既に中止されている場合、あるいは中止イベントが検出された場合、プロミスは直ちに拒否されます。
-そうでなければ、プロミスは完全に終了し、プロミスを解決します。
-
-```js
-function myCoolPromiseAPI(/* … ,*/ { signal }) {
-  return new Promise((resolve, reject) => {
-    // If the signal is already aborted, immediately throw in order to reject the promise.
-    if (signal.aborted) {
-      reject(signal.reason);
-    }
-
-    // Perform the main purpose of the API
-    // Call resolve(result) when done.
-
-    // Watch for 'abort' signals
-    signal.addEventListener("abort", () => {
-      // Stop the main operation
-      // Reject the promise with the abort reason.
-      reject(signal.reason);
-    });
-  });
-}
-```
-
-そして、 API は次のように使用されるかもしれません。
-処理を中止するために {{domxref("AbortController.abort()")}} が呼び出されることに注意してください。
-
-```js
-const controller = new AbortController();
-const signal = controller.signal;
-
-startSpinner();
-
-myCoolPromiseAPI({ /* … ,*/ signal })
-  .then((result) => {})
-  .catch((err) => {
-    if (err.name === "AbortError") return;
-    showUserErrorMessage();
-  })
-  .then(() => stopSpinner());
-
-controller.abort();
-```
-
-プロミスを返さない API も同じように反応するかもしれません。
-場合によっては、そのシグナルを吸収することが意味を持つかもしれません。
-
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/abortsignal/timeout_static/index.md b/files/ja/web/api/abortsignal/timeout_static/index.md
index 6488ee30755e54..007ebf59bc3bcf 100644
--- a/files/ja/web/api/abortsignal/timeout_static/index.md
+++ b/files/ja/web/api/abortsignal/timeout_static/index.md
@@ -1,24 +1,26 @@
 ---
-title: AbortSignal.timeout()
+title: "AbortSignal: timeout() 静的メソッド"
+short-title: timeout()
 slug: Web/API/AbortSignal/timeout_static
+l10n:
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-静的な **`AbortSignal.timeout()`** メソッドは、指定した時間が経過すると自動的に中止する {{domxref("AbortSignal")}} を返すものです。
+**`AbortSignal.timeout()`** は静的メソッドで、指定した時間が経過すると自動的に中止する {{domxref("AbortSignal")}} を返すものです。
 
-このシグナルは、タイムアウト時には `TimeoutError` {{domxref("DOMException")}} で、ブラウザーの停止ボタン（または他にも組み込まれた「停止」処理）を押した場合には `AbortError` {{domxref("DOMException")}} で中止されます。
+このシグナルは、タイムアウト時には `TimeoutError` {{domxref("DOMException")}} で、ブラウザーの停止ボタン（または他の組み込まれた「停止」処理）を押した場合には `AbortError` {{domxref("DOMException")}} で中止されます。
 これにより、通常ユーザーへの通知が必要なタイムアウトエラーと、そうでないユーザーによる中止の発生を UI で区別できます。
 
-タイムアウトは経過時間ではなく活動時間に基づきます。コードが実行されているワーカーがサスペンドされている場合や、文書がバックフォワードキャッシュ ("[bfcache](https://web.dev/bfcache/)") にある場合は、事実上一時停止されます。
+タイムアウトは経過時間ではなく活動時間に基づきます。コードが実行されているワーカーがサスペンドされている場合や、文書がバックフォワードキャッシュ ("[bfcache](https://web.dev/articles/bfcache)") にある場合は、事実上一時停止されます。
 
-> **メモ:** 執筆時点では、複数のシグナルを組み合わせる方法はありません。
-> つまり、タイムアウトシグナルを使用するか、{{domxref("AbortController.abort()")}}を呼び出してダウンロードを直接中止することはできません。
+複数のシグナルを組み合わせるには、{{domxref("AbortSignal/any_static", "AbortSignal.any()")}} を使用することができます。例えば、タイムアウトシグナルまたは {{domxref("AbortController.abort()")}} を呼び出してダウンロードを直接中止させることができます。
 
 ## 構文
 
 ```js-nolint
-timeout(time)
+AbortSignal.timeout(time)
 ```
 
 ### 引数
diff --git a/files/ja/web/api/abstractrange/index.md b/files/ja/web/api/abstractrange/index.md
index 77e071ad6bb2f5..7cebd2a4cb84ff 100644
--- a/files/ja/web/api/abstractrange/index.md
+++ b/files/ja/web/api/abstractrange/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`AbstractRange`** は抽象インターフェイスで、すべての {{Glossary("DOM")}} の範囲型を定義するための基本クラスです。 **range** は、文書内のコンテンツの区間の開始点と終了点を示すオブジェクトです。
 
-> **メモ:** 抽象インターフェイスなので、 `AbstractRange` タイプのオブジェクトを直接インスタンス化することはありません。代わりに {{domxref("Range")}} または {{domxref("StaticRange")}} インターフェイスを使用してください。これら 2 つのインターフェイスの異なる点を理解し、自分のニーズに合ったものを選ぶには、それぞれのインターフェイスのドキュメントを参照してください。
+> [!NOTE]
+> 抽象インターフェイスなので、 `AbstractRange` タイプのオブジェクトを直接インスタンス化することはありません。代わりに {{domxref("Range")}} または {{domxref("StaticRange")}} インターフェイスを使用してください。これら 2 つのインターフェイスの異なる点を理解し、自分のニーズに合ったものを選ぶには、それぞれのインターフェイスのドキュメントを参照してください。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/analysernode/index.md b/files/ja/web/api/analysernode/index.md
index 8ee6f939b8415c..17a6c6e47cf756 100644
--- a/files/ja/web/api/analysernode/index.md
+++ b/files/ja/web/api/analysernode/index.md
@@ -75,7 +75,8 @@ _親である {{domxref("AudioNode")}} から継承したメソッドもあり
 
 ## 例
 
-> **メモ:** 音声の視覚化を作成するための詳細は、[ウェブオーディオ API の視覚化](/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)のガイドを参照してください。
+> [!NOTE]
+> 音声の視覚化を作成するための詳細は、[ウェブオーディオ API の視覚化](/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)のガイドを参照してください。
 
 ### 基本的な使い方
 
diff --git a/files/ja/web/api/analysernode/smoothingtimeconstant/index.md b/files/ja/web/api/analysernode/smoothingtimeconstant/index.md
index 46112d53a6da22..e51838d9d58b88 100644
--- a/files/ja/web/api/analysernode/smoothingtimeconstant/index.md
+++ b/files/ja/web/api/analysernode/smoothingtimeconstant/index.md
@@ -18,7 +18,8 @@ doublet で、 `0` から `1` までの範囲内です（`0` は平均時間で
 
 専門用語では、[ブラックマンウィンドウ](https://webaudio.github.io/web-audio-api/#blackman-window)を適用し、時間による値の変化を平滑化します。ほとんどの場合、既定値で十分です。
 
-> **メモ:** 0～1 の範囲の外の値を設定するには、 `INDEX_SIZE_ERR` 例外が発生します。
+> [!NOTE]
+> 0～1 の範囲の外の値を設定するには、 `INDEX_SIZE_ERR` 例外が発生します。
 
 ## 例
 
diff --git a/files/ja/web/api/angle_instanced_arrays/index.md b/files/ja/web/api/angle_instanced_arrays/index.md
index 9499e50fed07cb..441b4166c17f48 100644
--- a/files/ja/web/api/angle_instanced_arrays/index.md
+++ b/files/ja/web/api/angle_instanced_arrays/index.md
@@ -11,7 +11,8 @@ l10n:
 
 WebGL 拡張機能は {{domxref("WebGLRenderingContext.getExtension()")}} メソッドを使用することで利用できるようになります。詳しくは、 [WebGL チュートリアル](/ja/docs/Web/API/WebGL_API/Tutorial) の [拡張機能の使用](/ja/docs/Web/API/WebGL_API/Using_Extensions)も参照してください。
 
-> **メモ:** この拡張機能は {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} のコンテキストでのみ利用可能です。 {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}} のコンテキストでは、この機能は既定で使用することができ、定数やメソッドは "`ANGLE`" 接尾辞なしで使用することができます。
+> [!NOTE]
+> この拡張機能は {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} のコンテキストでのみ利用可能です。 {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}} のコンテキストでは、この機能は既定で使用することができ、定数やメソッドは "`ANGLE`" 接尾辞なしで使用することができます。
 >
 > "ANGLE" という名前ですが、この拡張機能は ANGLE ライブラリーを使用していれば、 Windows でなくてもハードウェアが対応していればあらゆる端末で動作します。 "ANGLE" は単に、この拡張機能が ANGLE ライブラリーの作者によって書かれたことを示しているだけです。
 
@@ -37,7 +38,8 @@ WebGL 拡張機能は {{domxref("WebGLRenderingContext.getExtension()")}} メソ
 
 次の例は、与えられた図形を 1 回の draw 呼び出しで複数回描画する方法です。
 
-> **警告:** 以下は教育的なものであり、製品レベルのコードではありません。レンダリングループ内や使用直前にデータ/バッファーを構築することは、一般的に避けるべきです。
+> [!WARNING]
+> 以下は教育的なものであり、製品レベルのコードではありません。レンダリングループ内や使用直前にデータ/バッファーを構築することは、一般的に避けるべきです。
 
 ```js
 // 拡張機能を有効化
diff --git a/files/ja/web/api/animation/cancel/index.md b/files/ja/web/api/animation/cancel/index.md
index f42a967fc755c2..45e370ca6b1e33 100644
--- a/files/ja/web/api/animation/cancel/index.md
+++ b/files/ja/web/api/animation/cancel/index.md
@@ -10,7 +10,8 @@ l10n:
 
 ウェブアニメーション API の **`cancel()`** は {{domxref("Animation")}} インターフェイスのメソッドで、このアニメーションによって引き起こされたすべての {{domxref("KeyframeEffect")}}を初期化し、再生を中止します。
 
-> **メモ:** アニメ―ションをキャンセルした時、{{domxref("Animation.startTime", "startTime")}} と {{domxref("Animation.currentTime", "currentTime")}} は、 `null` に設定されます。
+> [!NOTE]
+> アニメ―ションをキャンセルした時、{{domxref("Animation.startTime", "startTime")}} と {{domxref("Animation.currentTime", "currentTime")}} は、 `null` に設定されます。
 
 ## 構文
 
diff --git a/files/ja/web/api/animation/cancel_event/index.md b/files/ja/web/api/animation/cancel_event/index.md
index 3e9a783eaf6b97..eaf57447e951af 100644
--- a/files/ja/web/api/animation/cancel_event/index.md
+++ b/files/ja/web/api/animation/cancel_event/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`cancel`** は {{domxref("Animation")}} インターフェイスのイベントで、{{domxref("Animation.cancel()")}} メソッドが呼び出された時や、アニメーションの再生が完了する前に要素から除去された時など、アニメーションが他の状態から `"idle"` 再生状態になった時に発行されます。
 
-> **メモ:** 最初からアイドル状態で新しいアニメーションを作成しても、新しいアニメーションの `cancel` イベントは発生しません。
+> [!NOTE]
+> 最初からアイドル状態で新しいアニメーションを作成しても、新しいアニメーションの `cancel` イベントは発生しません。
 
 ## 構文
 
diff --git a/files/ja/web/api/animation/finished/index.md b/files/ja/web/api/animation/finished/index.md
index e32167d796e8dd..db5ce1812c166e 100644
--- a/files/ja/web/api/animation/finished/index.md
+++ b/files/ja/web/api/animation/finished/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Animation.finished`** は [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) の読み取り専用プロパティで、アニメーションの再生が完了すると解決される {{jsxref("Promise")}} を返します。
 
-> **メモ:** アニメーションが `finished` の再生状態から離れる時点（つまり、再び再生を始める時点）ごとに、このプロパティに対して新しい `Promise` が作成されます。新しい `Promise` は新しいアニメーションシーケンスが完了すると解決されます。
+> [!NOTE]
+> アニメーションが `finished` の再生状態から離れる時点（つまり、再び再生を始める時点）ごとに、このプロパティに対して新しい `Promise` が作成されます。新しい `Promise` は新しいアニメーションシーケンスが完了すると解決されます。
 
 ## 値
 
diff --git a/files/ja/web/api/animation/playbackrate/index.md b/files/ja/web/api/animation/playbackrate/index.md
index 0ed50b953ecb9e..78634bba39f518 100644
--- a/files/ja/web/api/animation/playbackrate/index.md
+++ b/files/ja/web/api/animation/playbackrate/index.md
@@ -16,7 +16,8 @@ l10n:
 
 0、負、正の値を取ります。負の値ではアニメーションが反転します。この値は変倍率で、例えば 2 の値を指定すると再生速度が 2 倍になります。
 
-> **メモ:** アニメーションの `playbackRate` を `0` に設定すると、アニメーションは一時停止します（ただし、{{domxref("Animation.playstate", "playstate")}} は必ずしも `paused` にはなりません）。
+> [!NOTE]
+> アニメーションの `playbackRate` を `0` に設定すると、アニメーションは一時停止します（ただし、{{domxref("Animation.playstate", "playstate")}} は必ずしも `paused` にはなりません）。
 
 ## 例
 
diff --git a/files/ja/web/api/animation/ready/index.md b/files/ja/web/api/animation/ready/index.md
index 5d4c4ce235c7ae..636d4c9f675bf0 100644
--- a/files/ja/web/api/animation/ready/index.md
+++ b/files/ja/web/api/animation/ready/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Animation.ready`** は[ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) の読み取り専用プロパティで、アニメーションが再生可能になったときに解決するプロミス ({{jsxref("Promise")}}) を返します。アニメーションの[再生状態](/ja/docs/Web/API/Animation/playState)が `"pending"` になるたびに、またアニメーションが取り消される可能性があるときにも、新しいプロミスが作成されます。
 
-> **メモ:** 同じ {{jsxref("Promise")}} が保留中の `play` リクエストと保留中の `pause` リクエストの両方に使用されるので、プロミスが解決したときにアニメーションの状態を調べることをお勧めします。
+> [!NOTE]
+> 同じ {{jsxref("Promise")}} が保留中の `play` リクエストと保留中の `pause` リクエストの両方に使用されるので、プロミスが解決したときにアニメーションの状態を調べることをお勧めします。
 
 ## 値
 
diff --git a/files/ja/web/api/animationeffect/getcomputedtiming/index.md b/files/ja/web/api/animationeffect/getcomputedtiming/index.md
index 071009ff456d6f..62bd9eeea1a7fa 100644
--- a/files/ja/web/api/animationeffect/getcomputedtiming/index.md
+++ b/files/ja/web/api/animationeffect/getcomputedtiming/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `getComputedTiming()` は {{domxref("AnimationEffect")}} インターフェイスのメソッドで、このアニメーション効果のタイミングのプロパティの計算値を返します。
 
-> **メモ:** これらの値は、 `window.getComputedStyle(elem)` を使用して返される要素のスタイルの計算値と同等です。
+> [!NOTE]
+> これらの値は、 `window.getComputedStyle(elem)` を使用して返される要素のスタイルの計算値と同等です。
 
 ## 構文
 
diff --git a/files/ja/web/api/attr/index.md b/files/ja/web/api/attr/index.md
index b5c942898a7550..8f56b700a2d78a 100644
--- a/files/ja/web/api/attr/index.md
+++ b/files/ja/web/api/attr/index.md
@@ -21,7 +21,8 @@ l10n:
 | `myAttr` | `mynamespace` | _なし_         | `myAttr`         | `myAttr`      |
 | `myAttr` | `mynamespace` | `myns`         | `myAttr`         | `myns:myAttr` |
 
-> **メモ:** このインターフェイスは、SVG、HTML、MathML のいずれかの要素である {{domxref("Element")}} のツリー表現に存在する属性のみを表します。例えば {{HTMLElement("table")}} 要素に対する {{domxref("HTMLTableElement")}} のような、その要素に関連付けられたインターフェイスの*プロパティ*を表すことはありません。（属性とそれがどのようにプロパティに*反映*されるかについての詳細は{{Glossary("Attribute", "この記事")}}を参照してください。）
+> [!NOTE]
+> このインターフェイスは、SVG、HTML、MathML のいずれかの要素である {{domxref("Element")}} のツリー表現に存在する属性のみを表します。例えば {{HTMLElement("table")}} 要素に対する {{domxref("HTMLTableElement")}} のような、その要素に関連付けられたインターフェイスの*プロパティ*を表すことはありません。（属性とそれがどのようにプロパティに*反映*されるかについての詳細は{{Glossary("Attribute", "この記事")}}を参照してください。）
 
 ## インスタンスプロパティ
 
diff --git a/files/ja/web/api/attr/localname/index.md b/files/ja/web/api/attr/localname/index.md
index e2c9dcb8cc6444..3e913e40278341 100644
--- a/files/ja/web/api/attr/localname/index.md
+++ b/files/ja/web/api/attr/localname/index.md
@@ -11,7 +11,8 @@ l10n:
 
 ローカル名は、属性の作成時に大文字であっても小文字であっても、常に小文字になります。
 
-> **メモ:** HTML は SVG と MathML の要素に対して、固定された一連の名前空間のみに対応しています。これらは `xml` （`xml:lang` 属性）、 `xlink` （`xlink:href`, `xlink:show`, `xlink:target`, `xlink:title` 属性）、`xpath` です。
+> [!NOTE]
+> HTML は SVG と MathML の要素に対して、固定された一連の名前空間のみに対応しています。これらは `xml` （`xml:lang` 属性）、 `xlink` （`xlink:href`, `xlink:show`, `xlink:target`, `xlink:title` 属性）、`xpath` です。
 >
 > つまり、 HTML 要素の属性のローカル名は常にその修飾名と等しくなります。コロンは通常の文字として扱われます。 XML では、 SVG や MathML のように、コロンは接頭辞の終わりを表し、それ以前は名前空間となります。ローカル名は、修飾名と異なる場合があります。
 
diff --git a/files/ja/web/api/attr/namespaceuri/index.md b/files/ja/web/api/attr/namespaceuri/index.md
index 0b2cd34c0f0f72..cd0cf8910a32f8 100644
--- a/files/ja/web/api/attr/namespaceuri/index.md
+++ b/files/ja/web/api/attr/namespaceuri/index.md
@@ -12,7 +12,8 @@ l10n:
 名前空間 URI は {{domxref("Attr")}} の作成時に設定され、変更することができません。
 名前空間付きの属性は、 {{domxref("Element.setAttributeNS()")}} で作成することができます。
 
-> **メモ:** 属性は、装着されている要素から名前空間を継承しません。
+> [!NOTE]
+> 属性は、装着されている要素から名前空間を継承しません。
 > 属性に明示的に名前空間が与えられなかった場合は、名前空間なしになります。
 
 ブラウザーは名前空間の検証そのものは行いませんし、強制もしません。必要な検証を行うのは JavaScript アプリケーションに任されています。また、名前空間接頭辞は一度特定の属性ノードに関連づけられると、変更することができないので注意してください。
diff --git a/files/ja/web/api/attr/prefix/index.md b/files/ja/web/api/attr/prefix/index.md
index c261836bf4c66e..594d52741a60d0 100644
--- a/files/ja/web/api/attr/prefix/index.md
+++ b/files/ja/web/api/attr/prefix/index.md
@@ -11,7 +11,8 @@ l10n:
 
 接頭辞は、属性が作成されたときの大文字小文字に関わらず、常に小文字になります。
 
-> **メモ:** XML だけが名前空間に対応しています。 HTML は対応していません。つまり、 HTML 要素の属性の接頭辞は常に `null` になります。
+> [!NOTE]
+> XML だけが名前空間に対応しています。 HTML は対応していません。つまり、 HTML 要素の属性の接頭辞は常に `null` になります。
 
 また、`xml` （`xml:lang` 属性）、`xlink` （`xlink:href`, `xlink:show`, `xlink:target`, `xlink:title` 属性）、 `xpath` 名前空間だけに、 SVG と MathML 要素でのみ対応しています。
 
diff --git a/files/ja/web/api/audiobuffersourcenode/buffer/index.md b/files/ja/web/api/audiobuffersourcenode/buffer/index.md
index e1c2eab535140e..57a5f368c1a5a9 100644
--- a/files/ja/web/api/audiobuffersourcenode/buffer/index.md
+++ b/files/ja/web/api/audiobuffersourcenode/buffer/index.md
@@ -18,7 +18,8 @@ l10n:
 
 ## 例
 
-> **メモ:** 動作する完全な例は、[このコードをライブ実行](https://mdn.github.io/webaudio-examples/audio-buffer/)または[ソースを閲覧](https://github.com/mdn/webaudio-examples/blob/main/audio-buffer/index.html)してください。
+> [!NOTE]
+> 動作する完全な例は、[このコードをライブ実行](https://mdn.github.io/webaudio-examples/audio-buffer/)または[ソースを閲覧](https://github.com/mdn/webaudio-examples/blob/main/audio-buffer/index.html)してください。
 
 ```js
 const myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
diff --git a/files/ja/web/api/audiocontext/createmediastreamdestination/index.md b/files/ja/web/api/audiocontext/createmediastreamdestination/index.md
index 36684ae6217d0d..d22a67a70a9f3d 100644
--- a/files/ja/web/api/audiocontext/createmediastreamdestination/index.md
+++ b/files/ja/web/api/audiocontext/createmediastreamdestination/index.md
@@ -87,7 +87,8 @@ createMediaStreamDestination()
 </html>
 ```
 
-> **メモ:** Github で[実際に動作する例を閲覧](https://mdn.github.io/webaudio-examples/create-media-stream-destination/index.html)したり、[ソースコードを読む](https://github.com/mdn/webaudio-examples/blob/master/create-media-stream-destination/index.html)ことができます。
+> [!NOTE]
+> Github で[実際に動作する例を閲覧](https://mdn.github.io/webaudio-examples/create-media-stream-destination/index.html)したり、[ソースコードを読む](https://github.com/mdn/webaudio-examples/blob/master/create-media-stream-destination/index.html)ことができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/audiolistener/forwardx/index.md b/files/ja/web/api/audiolistener/forwardx/index.md
index 3611927c4b8ecb..efa19810afdfec 100644
--- a/files/ja/web/api/audiolistener/forwardx/index.md
+++ b/files/ja/web/api/audiolistener/forwardx/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `forwardX` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、聞き手が向いている前方向を定義する方向ベクトルの x 値を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/forwardy/index.md b/files/ja/web/api/audiolistener/forwardy/index.md
index e6c49f03d844c9..88dbe068d7f0ec 100644
--- a/files/ja/web/api/audiolistener/forwardy/index.md
+++ b/files/ja/web/api/audiolistener/forwardy/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `forwardY` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、聞き手が向いている前方向を定義する方向ベクトルの y 値を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/forwardz/index.md b/files/ja/web/api/audiolistener/forwardz/index.md
index 4e7e6cf20954f5..5468e0f091df17 100644
--- a/files/ja/web/api/audiolistener/forwardz/index.md
+++ b/files/ja/web/api/audiolistener/forwardz/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `forwardZ` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、聞き手が向いている前方向を定義する方向ベクトルの z 値を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** The parameter is _a-rate_ when used with a {{domxref("PannerNode")}} whose {{domxref("PannerNode.panningModel", "panningModel")}} is set to equalpower, or _k-rate_ otherwise.
+> [!NOTE]
+> The parameter is _a-rate_ when used with a {{domxref("PannerNode")}} whose {{domxref("PannerNode.panningModel", "panningModel")}} is set to equalpower, or _k-rate_ otherwise.
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/index.md b/files/ja/web/api/audiolistener/index.md
index 9c308cb0f205dd..2e169486b9c1f4 100644
--- a/files/ja/web/api/audiolistener/index.md
+++ b/files/ja/web/api/audiolistener/index.md
@@ -15,7 +15,8 @@ l10n:
 
 ## インスタンスプロパティ
 
-> **メモ:** position、forward、up の値の設定と取得は異なる構文で行われます。取得は例えば `AudioListener.positionX` にアクセスすることで行われ、同じプロパティを設定するには `AudioListener.positionX.value` を使用することで行われます。仕様書の IDL でこれらの値が読み取り専用とマークされていないのはこのためです。
+> [!NOTE]
+> position、forward、up の値の設定と取得は異なる構文で行われます。取得は例えば `AudioListener.positionX` にアクセスすることで行われ、同じプロパティを設定するには `AudioListener.positionX.value` を使用することで行われます。仕様書の IDL でこれらの値が読み取り専用とマークされていないのはこのためです。
 
 - {{domxref("AudioListener.positionX")}}
   - : 右直交座標系における聞き手の水平位置を表します。既定値は 0 です。
@@ -43,7 +44,8 @@ l10n:
 - {{domxref("AudioListener.setPosition()")}} {{deprecated_inline}}
   - : 聞き手の位置を設定します。
 
-> **メモ:** これらのメソッドは非推奨ですが、現在、 Firefox で方向と位置を設定するための唯一の方法となっています。
+> [!NOTE]
+> これらのメソッドは非推奨ですが、現在、 Firefox で方向と位置を設定するための唯一の方法となっています。
 
 ## 非推奨の機能
 
diff --git a/files/ja/web/api/audiolistener/positionx/index.md b/files/ja/web/api/audiolistener/positionx/index.md
index 4086a438350024..afe50ea5bb8b90 100644
--- a/files/ja/web/api/audiolistener/positionx/index.md
+++ b/files/ja/web/api/audiolistener/positionx/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `positionX` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、3D 直行空間における聞き手の x 位置を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/positiony/index.md b/files/ja/web/api/audiolistener/positiony/index.md
index 9e0a62e925e38c..0c561e27bc615a 100644
--- a/files/ja/web/api/audiolistener/positiony/index.md
+++ b/files/ja/web/api/audiolistener/positiony/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `positionY` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、3D 直行空間における聞き手の y 位置を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/positionz/index.md b/files/ja/web/api/audiolistener/positionz/index.md
index 137a3e19427bbf..084ec6dff2b3a6 100644
--- a/files/ja/web/api/audiolistener/positionz/index.md
+++ b/files/ja/web/api/audiolistener/positionz/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `positionZ` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、3D 直行空間における聞き手の z 位置を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/setposition/index.md b/files/ja/web/api/audiolistener/setposition/index.md
index bcb12f02242891..6a6c46b6da6566 100644
--- a/files/ja/web/api/audiolistener/setposition/index.md
+++ b/files/ja/web/api/audiolistener/setposition/index.md
@@ -14,7 +14,8 @@ l10n:
 
 位置ベクトルの既定値は `(0, 0, 0)` です。
 
-> **メモ:** このメソッドは非推奨ですので、代わりに {{domxref("AudioListener.positionX", "positionX")}}, {{domxref("AudioListener.positionY", "positionY")}}, {{domxref("AudioListener.positionZ", "positionZ")}} の各プロパティを使用してください。
+> [!NOTE]
+> このメソッドは非推奨ですので、代わりに {{domxref("AudioListener.positionX", "positionX")}}, {{domxref("AudioListener.positionY", "positionY")}}, {{domxref("AudioListener.positionZ", "positionZ")}} の各プロパティを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/audiolistener/upx/index.md b/files/ja/web/api/audiolistener/upx/index.md
index 46f75b6371bff7..8913b2b63fd8a4 100644
--- a/files/ja/web/api/audiolistener/upx/index.md
+++ b/files/ja/web/api/audiolistener/upx/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `upX` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、聞き手が向いている上方向を定義する方向ベクトルの x 値を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/upy/index.md b/files/ja/web/api/audiolistener/upy/index.md
index 47dd69a1df6672..360fe4b718b6e4 100644
--- a/files/ja/web/api/audiolistener/upy/index.md
+++ b/files/ja/web/api/audiolistener/upy/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `upY` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、聞き手が向いている上方向を定義する方向ベクトルの y 値を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audiolistener/upz/index.md b/files/ja/web/api/audiolistener/upz/index.md
index 905503719edd8f..03d81e4a80d3d8 100644
--- a/files/ja/web/api/audiolistener/upz/index.md
+++ b/files/ja/web/api/audiolistener/upz/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `upZ` は {{ domxref("AudioListener") }} インターフェイスの読み取り専用プロパティで、聞き手が向いている上方向を定義する方向ベクトルの z 値を表す {{domxref("AudioParam")}} です。
 
-> **メモ:** この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
+> [!NOTE]
+> この引数は {{domxref("PannerNode")}} の {{domxref("PannerNode.panningModel", "panningModel")}} が equalpower に設定されているものと一緒に使用された場合は _a-rate_、そうでない場合は _k-rate_ となります。
 
 ## 値
 
diff --git a/files/ja/web/api/audionode/channelcountmode/index.md b/files/ja/web/api/audionode/channelcountmode/index.md
index fa651ac300ce42..b3ebac8bad7c11 100644
--- a/files/ja/web/api/audionode/channelcountmode/index.md
+++ b/files/ja/web/api/audionode/channelcountmode/index.md
@@ -33,7 +33,8 @@ l10n:
 
     以下の `AudioNode` の子におけるデフォルト値です: {{domxref("AudioDestinationNode")}}, {{domxref("AnalyserNode")}}, {{domxref("ChannelSplitterNode")}}, {{domxref("ChannelMergerNode")}}
 
-> **メモ:** 仕様書の以前のバージョンでは、{{domxref("ChannelSplitterNode")}} でのデフォルト値は `max` でした。
+> [!NOTE]
+> 仕様書の以前のバージョンでは、{{domxref("ChannelSplitterNode")}} でのデフォルト値は `max` でした。
 
 ## 例
 
diff --git a/files/ja/web/api/audioparam/exponentialramptovalueattime/index.md b/files/ja/web/api/audioparam/exponentialramptovalueattime/index.md
index 003f9e1eb0206e..13d7695c7351e9 100644
--- a/files/ja/web/api/audioparam/exponentialramptovalueattime/index.md
+++ b/files/ja/web/api/audioparam/exponentialramptovalueattime/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`exponentialRampToValueAtTime()`** は {{ domxref("AudioParam") }} インターフェイスのメソッドで、 {{domxref("AudioParam")}} の値を指数関数的に徐々に変化させます。変更は _直前の_ イベントで指定した時刻に始まり、`value` 引数で指定された新しい値まで指数関数的な変化が続き、 `endTime` 引数で指定された時刻に新しい値に到達します。
 
-> **メモ:** 指数関数的な変化は、周波数や再生レートを変化させる場合、直線的な変化よりも有益であると考えられています。これは、人間の耳の動作に起因しています。
+> [!NOTE]
+> 指数関数的な変化は、周波数や再生レートを変化させる場合、直線的な変化よりも有益であると考えられています。これは、人間の耳の動作に起因しています。
 
 ## 構文
 
@@ -66,7 +67,8 @@ expRampMinus.onclick = () => {
 };
 ```
 
-> **メモ:** 最後の関数で降下する値には、 0 ではなく 0.01 が使用されました。 0 を使用すると、 _invalid or illegal string_ エラーが発生するためです。
+> [!NOTE]
+> 最後の関数で降下する値には、 0 ではなく 0.01 が使用されました。 0 を使用すると、 _invalid or illegal string_ エラーが発生するためです。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/audioparam/setvaluecurveattime/index.md b/files/ja/web/api/audioparam/setvaluecurveattime/index.md
index 34e795475e049c..078f36afbd09ea 100644
--- a/files/ja/web/api/audioparam/setvaluecurveattime/index.md
+++ b/files/ja/web/api/audioparam/setvaluecurveattime/index.md
@@ -44,7 +44,8 @@ setValueCurveAtTime(values, startTime, duration)
 
 パラメーターの値が曲線を以下に完了したとき、その値は `values` 引数で指定した値の集合の最後の値と一致することが保証されます。
 
-> **メモ:** ウェブオーディオ API の初期の実装では、これが確実に保持されず、予期せぬ結果を発生させるものがありました。
+> [!NOTE]
+> ウェブオーディオ API の初期の実装では、これが確実に保持されず、予期せぬ結果を発生させるものがありました。
 
 ## 例
 
diff --git a/files/ja/web/api/audioprocessingevent/audioprocessingevent/index.md b/files/ja/web/api/audioprocessingevent/audioprocessingevent/index.md
index d89ba08bbf4b73..8f7eabfda043de 100644
--- a/files/ja/web/api/audioprocessingevent/audioprocessingevent/index.md
+++ b/files/ja/web/api/audioprocessingevent/audioprocessingevent/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`AudioProcessingEvent()`** コンストラクターは、新しい {{domxref("AudioProcessingEvent")}} オブジェクトを生成します。
 
-> **メモ:** 通常、このコンストラクターはコードから直接呼び出されることはありません。ブラウザー自身がオブジェクトを作成し、イベントハンドラーに提供するからです。
+> [!NOTE]
+> 通常、このコンストラクターはコードから直接呼び出されることはありません。ブラウザー自身がオブジェクトを作成し、イベントハンドラーに提供するからです。
 
 ## 構文
 
diff --git a/files/ja/web/api/audioprocessingevent/index.md b/files/ja/web/api/audioprocessingevent/index.md
index be00b658c2b0cd..0d3b8f08116ba9 100644
--- a/files/ja/web/api/audioprocessingevent/index.md
+++ b/files/ja/web/api/audioprocessingevent/index.md
@@ -11,7 +11,8 @@ l10n:
 
 このインターフェイスを持つ `audioprocess` イベントは、音声処理が必要なときに {{domxref("ScriptProcessorNode")}} で発生します。音声処理中、入力バッファーが読み込まれ、処理されて出力音声データが生成され、出力バッファーに書き込まれます。
 
-> **警告:** この機能は非推奨となったので、[`AudioWorklet`](/ja/docs/Web/API/AudioWorklet) で置き換えてください。
+> [!WARNING]
+> この機能は非推奨となったので、[`AudioWorklet`](/ja/docs/Web/API/AudioWorklet) で置き換えてください。
 
 {{InheritanceDiagram}}
 
@@ -39,7 +40,8 @@ _親プロパティである {{domxref("Event")}} から継承されたプロパ
 
 次の例は、`ScriptProcessorNode` を使用して、{{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} で読み込んだ音声を{{domxref("AudioDestinationNode")}} で処理し、入力トラック（バッファー）の各音声サンプルにホワイトノイズを追加し、{{domxref("AudioDestinationNode")}} を通して再生する方法を示しています。 各チャンネルと各サンプルフレームに対して、`scriptNode.onaudioprocess` 関数は関連する `audioProcessingEvent` を受け取り、それを用いて入力バッファー内の各チャンネルと各チャンネル内の各サンプルをループし、少量のホワイトノイズを追加してから、その結果をそれぞれのケースで出力サンプルに設定します。
 
-> **メモ:** 完全な動作する例は、GitHub の [script-processor-node](https://mdn.github.io/webaudio-examples/script-processor-node/) リポジトリーを参照してください（[ソースコード](https://github.com/mdn/webaudio-examples/blob/master/script-processor-node/index.html)にもアクセスできます）。
+> [!NOTE]
+> 完全な動作する例は、GitHub の [script-processor-node](https://mdn.github.io/webaudio-examples/script-processor-node/) リポジトリーを参照してください（[ソースコード](https://github.com/mdn/webaudio-examples/blob/master/script-processor-node/index.html)にもアクセスできます）。
 
 ```js
 const myScript = document.querySelector("script");
diff --git a/files/ja/web/api/audioscheduledsourcenode/stop/index.md b/files/ja/web/api/audioscheduledsourcenode/stop/index.md
index 34a0fce46a69d5..2b8c76b1f506bf 100644
--- a/files/ja/web/api/audioscheduledsourcenode/stop/index.md
+++ b/files/ja/web/api/audioscheduledsourcenode/stop/index.md
@@ -12,7 +12,8 @@ l10n:
 
 同じノードで `stop()` を呼び出すたびに、以前にスケジュールされた停止時刻のうち、まだ発生していない時刻が指定された時刻に置き換わります。ノードが既に停止している場合、このメソッドは何の効果もありません。
 
-> **メモ:** ノードの予定開始時刻の前に予定停止時刻が発生した場合、ノードは再生を開始しません。
+> [!NOTE]
+> ノードの予定開始時刻の前に予定停止時刻が発生した場合、ノードは再生を開始しません。
 
 ## 構文
 
diff --git a/files/ja/web/api/audiotrack/enabled/index.md b/files/ja/web/api/audiotrack/enabled/index.md
index ddf37771d94cb2..96dbe205099d2a 100644
--- a/files/ja/web/api/audiotrack/enabled/index.md
+++ b/files/ja/web/api/audiotrack/enabled/index.md
@@ -39,7 +39,8 @@ function swapCommentaryMain() {
 
 上記の `swapCommentaryMain()` 関数は、{{HTMLElement("video")}} 要素の `"main-video"` の音声トラック内で、{{domxref("AudioTrack.kind", "kind")}} の値が `"main"` と `"commentary"` である音声トラックを見つけます。 これらはプライマリ音声トラックと解説トラックを表します。
 
-> **メモ:** この例では、動画には各種類のトラックが 1 つずつしかないと想定していますが、必ずしもそうとは限りません。
+> [!NOTE]
+> この例では、動画には各種類のトラックが 1 つずつしかないと想定していますが、必ずしもそうとは限りません。
 
 次に、要素の音声トラックを、JavaScript の {{jsxref("Array.forEach", "forEach()")}} メソッドを使用してスキャンします（メディア要素の {{domxref("HTMLMediaElement.audioTracks", "audioTracks")}} プロパティは実際には JavaScript の配列ではありませんが、ほとんどの場合は同様にアクセスできます）。
 
diff --git a/files/ja/web/api/audioworkletglobalscope/registerprocessor/index.md b/files/ja/web/api/audioworkletglobalscope/registerprocessor/index.md
index e4a3a691f0b47f..9e76e3eac6155e 100644
--- a/files/ja/web/api/audioworkletglobalscope/registerprocessor/index.md
+++ b/files/ja/web/api/audioworkletglobalscope/registerprocessor/index.md
@@ -22,7 +22,8 @@ registerProcessor(name, processorCtor)
 - `processorCtor`
   - : {{domxref("AudioWorkletProcessor")}} から派生したクラスのコンストラクターです。
 
-> **メモ:** 処理器を登録すると、キーと値のペア `{ name: constructor }` が内部で {{domxref("AudioWorkletGlobalScope")}} に保存されます。登録した処理器をもとに {{domxref("AudioWorkletNode")}} を生成するとき、`name` が参照されます。指定の名前によって新しい処理器が内部で生成され、新しいノードと関連付けられます。
+> [!NOTE]
+> 処理器を登録すると、キーと値のペア `{ name: constructor }` が内部で {{domxref("AudioWorkletGlobalScope")}} に保存されます。登録した処理器をもとに {{domxref("AudioWorkletNode")}} を生成するとき、`name` が参照されます。指定の名前によって新しい処理器が内部で生成され、新しいノードと関連付けられます。
 
 ### 返値
 
diff --git a/files/ja/web/api/audioworkletnode/audioworkletnode/index.md b/files/ja/web/api/audioworkletnode/audioworkletnode/index.md
index e5c368d0f57acb..541f27b45ac1f9 100644
--- a/files/ja/web/api/audioworkletnode/audioworkletnode/index.md
+++ b/files/ja/web/api/audioworkletnode/audioworkletnode/index.md
@@ -29,7 +29,8 @@ new AudioWorkletNode(context, name, options)
 
     <!-- 仕様書ではこのオブジェクトは AudioWorkletNodeOptions と呼ばれています -->
 
-    > **メモ:** このオブジェクトに[構造化複製アルゴリズム](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)を適用した結果が内部で対応する {{domxref("AudioWorkletProcessor.AudioWorkletProcessor", "AudioWorkletProcessor()")}} コンストラクターに渡されます。
+    > [!NOTE]
+    > このオブジェクトに[構造化複製アルゴリズム](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)を適用した結果が内部で対応する {{domxref("AudioWorkletProcessor.AudioWorkletProcessor", "AudioWorkletProcessor()")}} コンストラクターに渡されます。
     > これにより、用いるユーザー定義の {{domxref("AudioWorkletProcessor")}} の初期化のカスタマイズが可能になります。
 
     - `numberOfInputs` {{optional_inline}}
diff --git a/files/ja/web/api/audioworkletnode/index.md b/files/ja/web/api/audioworkletnode/index.md
index 949d1e5f2bc633..ed67518b880c70 100644
--- a/files/ja/web/api/audioworkletnode/index.md
+++ b/files/ja/web/api/audioworkletnode/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{APIRef("Web Audio API")}}
 
-> **メモ:** このインターフェイスは[安全なコンテキスト](/ja/docs/Web/Security/Secure_Contexts)の外でも使用可能ですが、{{domxref("BaseAudioContext.audioWorklet")}} プロパティはそうではありません。そのため、独自の {{domxref("AudioWorkletProcessor")}} は安全なコンテキストの外では使用できません。
+> [!NOTE]
+> このインターフェイスは[安全なコンテキスト](/ja/docs/Web/Security/Secure_Contexts)の外でも使用可能ですが、{{domxref("BaseAudioContext.audioWorklet")}} プロパティはそうではありません。そのため、独自の {{domxref("AudioWorkletProcessor")}} は安全なコンテキストの外では使用できません。
 
 [ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) の **`AudioWorkletNode`** インターフェイスは、ユーザー定義の {{domxref("AudioNode")}} (他のノードとともに音声ルーティンググラフに接続できる) の基底クラスを表します。これは対応する {{domxref("AudioWorkletProcessor")}} (ウェブオーディオレンダリングスレッドで実際の音声処理を行う) を持ちます。
 
diff --git a/files/ja/web/api/audioworkletnode/port/index.md b/files/ja/web/api/audioworkletnode/port/index.md
index cf451045394828..210b7d0a66ae33 100644
--- a/files/ja/web/api/audioworkletnode/port/index.md
+++ b/files/ja/web/api/audioworkletnode/port/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("AudioWorkletNode")}} インターフェイスの読み取り専用プロパティ **`port`** は、関連付けられた {{domxref("MessagePort")}} を返します。これにより、ノードと対応する {{domxref("AudioWorkletProcessor")}} の間で双方向通信ができます。
 
-> **メモ:** チャネルのもう一方の端にあるポートは、処理器の {{domxref("AudioWorkletProcessor.port", "port")}} プロパティから参照できます。
+> [!NOTE]
+> チャネルのもう一方の端にあるポートは、処理器の {{domxref("AudioWorkletProcessor.port", "port")}} プロパティから参照できます。
 
 ## 値
 
diff --git a/files/ja/web/api/audioworkletprocessor/port/index.md b/files/ja/web/api/audioworkletprocessor/port/index.md
index 9230a8b328fe50..bf370fc1d5c6b4 100644
--- a/files/ja/web/api/audioworkletprocessor/port/index.md
+++ b/files/ja/web/api/audioworkletprocessor/port/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("AudioWorkletProcessor")}} インターフェイスの読み取り専用プロパティ **`port`** は、関連付けられた {{domxref("MessagePort")}} を返します。これは、処理器と対応する {{domxref("AudioWorkletNode")}} の間の通信に使用できます。
 
-> **メモ:** チャネルのもう一方の端は、ノードの {{domxref("AudioWorkletNode.port", "port")}} プロパティから参照できます。
+> [!NOTE]
+> チャネルのもう一方の端は、ノードの {{domxref("AudioWorkletNode.port", "port")}} プロパティから参照できます。
 
 ## 値
 
diff --git a/files/ja/web/api/audioworkletprocessor/process/index.md b/files/ja/web/api/audioworkletprocessor/process/index.md
index 23f8c7f2d8e16d..c15de07f6c0665 100644
--- a/files/ja/web/api/audioworkletprocessor/process/index.md
+++ b/files/ja/web/api/audioworkletprocessor/process/index.md
@@ -14,7 +14,8 @@ l10n:
 このメソッドは、処理器の対応する {{domxref("AudioWorkletNode")}} に音声ブロック (rendering quantum とも呼ばれる) が送られてくるたびに、音声レンダリングスレッドから同期で呼ばれます。
 すなわち、新しい音声ブロックが処理器で処理可能になるたびに、処理をするために `process()` 関数が呼ばれます。
 
-> **メモ:** 現在、音声データブロックの長さは常に 128 フレームです。すなわち、入力のそれぞれのチャンネルについて 128 個の 32 ビット浮動小数点数のサンプルが格納されています。しかし、この仕様を変更し、状況に応じて (たとえば、音声ハードウェアや CPU の使用の効率がブロックサイズを大きくすると上がる場合) 音声ブロックのサイズを変えることができるようにする計画がすでに進行中です。このため、特定のサイズを仮定するのではなく、_常にサンプル配列のサイズをチェックしなければなりません。_
+> [!NOTE]
+> 現在、音声データブロックの長さは常に 128 フレームです。すなわち、入力のそれぞれのチャンネルについて 128 個の 32 ビット浮動小数点数のサンプルが格納されています。しかし、この仕様を変更し、状況に応じて (たとえば、音声ハードウェアや CPU の使用の効率がブロックサイズを大きくすると上がる場合) 音声ブロックのサイズを変えることができるようにする計画がすでに進行中です。このため、特定のサイズを仮定するのではなく、_常にサンプル配列のサイズをチェックしなければなりません。_
 >
 > このサイズは時間とともに変わることも許される可能性があるので、最初のブロックだけを見てサンプルバッファーのサイズが常に同じだと仮定してはいけません。
 
diff --git a/files/ja/web/api/authenticatorassertionresponse/index.md b/files/ja/web/api/authenticatorassertionresponse/index.md
index 746192f95ebd86..5e92e6dafd26c4 100644
--- a/files/ja/web/api/authenticatorassertionresponse/index.md
+++ b/files/ja/web/api/authenticatorassertionresponse/index.md
@@ -9,7 +9,8 @@ slug: Web/API/AuthenticatorAssertionResponse
 
 このインターフェイスは {{domxref("AuthenticatorResponse")}} を継承しています。
 
-> **メモ:** このインターフェイスは最上位のコンテキストに限定されています。 {{HTMLElement("iframe")}} 要素の中で使用しても、何も効果がありません。
+> [!NOTE]
+> このインターフェイスは最上位のコンテキストに限定されています。 {{HTMLElement("iframe")}} 要素の中で使用しても、何も効果がありません。
 
 ## プロパティ
 
diff --git a/files/ja/web/api/authenticatorattestationresponse/index.md b/files/ja/web/api/authenticatorattestationresponse/index.md
index 0cb6008311121d..60b766808553ba 100644
--- a/files/ja/web/api/authenticatorattestationresponse/index.md
+++ b/files/ja/web/api/authenticatorattestationresponse/index.md
@@ -9,7 +9,8 @@ slug: Web/API/AuthenticatorAttestationResponse
 
 このインターフェイスは {{domxref("AuthenticatorResponse")}} を継承しています。
 
-> **メモ:** このインターフェイスは最上位のコンテキストに限定されています。 {{HTMLElement("iframe")}} 要素の中で使用しても、何も効果がありません。
+> [!NOTE]
+> このインターフェイスは最上位のコンテキストに限定されています。 {{HTMLElement("iframe")}} 要素の中で使用しても、何も効果がありません。
 
 ## プロパティ
 
diff --git a/files/ja/web/api/barprop/visible/index.md b/files/ja/web/api/barprop/visible/index.md
index 839973348cdd09..bc7ed3905c1bdc 100644
--- a/files/ja/web/api/barprop/visible/index.md
+++ b/files/ja/web/api/barprop/visible/index.md
@@ -14,7 +14,8 @@ l10n:
 
 {{jsxref("Boolean")}} は最上位のウィンドウが {{domxref("window.open")}} によって {{domxref("window.open", "request a popup window", "popup_feature", 1)}} で開かれた場合に真になります。
 
-> **メモ:** 過去には、これは使用するインターフェイス要素が表示されているかどうかを表していました。しかし、プライバシーの観点から、これは各インターフェイス要素の実際の可視性を表すことはできなくなりました。
+> [!NOTE]
+> 過去には、これは使用するインターフェイス要素が表示されているかどうかを表していました。しかし、プライバシーの観点から、これは各インターフェイス要素の実際の可視性を表すことはできなくなりました。
 
 ## 例
 
diff --git a/files/ja/web/api/baseaudiocontext/createanalyser/index.md b/files/ja/web/api/baseaudiocontext/createanalyser/index.md
index 46d0984e3440ba..d1dc84c465298a 100644
--- a/files/ja/web/api/baseaudiocontext/createanalyser/index.md
+++ b/files/ja/web/api/baseaudiocontext/createanalyser/index.md
@@ -12,7 +12,8 @@ l10n:
 
 > **メモ:** {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}} コンストラクターが {{domxref("AnalyserNode")}} を生成するのに推奨される方法です。 [AudioNode の作成](/ja/docs/Web/API/AudioNode#audionode_の生成)を参照してください。
 
-> **メモ:** このノードの詳しい説明は、 {{domxref("AnalyserNode")}} のページを参照してください。
+> [!NOTE]
+> このノードの詳しい説明は、 {{domxref("AnalyserNode")}} のページを参照してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/baseaudiocontext/createbuffer/index.md b/files/ja/web/api/baseaudiocontext/createbuffer/index.md
index acbbd78d52f4bb..4307c9015d7d41 100644
--- a/files/ja/web/api/baseaudiocontext/createbuffer/index.md
+++ b/files/ja/web/api/baseaudiocontext/createbuffer/index.md
@@ -12,7 +12,8 @@ l10n:
 
 音声バッファーの詳細については、 {{ domxref("AudioBuffer") }} のリファレンスページを参照してください。
 
-> **メモ:** 以前は `createBuffer()` が圧縮されたデータを受け取り、デコードされたサンプルを返すことができましたが、デコードがすべてメインスレッドで行われるため `createBuffer()` が他のコードの実行をブロックするので、この機能は仕様書から削除されました。非同期メソッド `decodeAudioData()` は同じことをします。 MP3 ファイルのような圧縮された音声を受け取り、{{ domxref("AudioBuffer") }} を直接返します。そして {{ domxref("AudioBufferSourceNode") }} で再生することができるのです。 MP3 を再生するような単純な用途では、 `decodeAudioData()` を使用する必要があります。
+> [!NOTE]
+> 以前は `createBuffer()` が圧縮されたデータを受け取り、デコードされたサンプルを返すことができましたが、デコードがすべてメインスレッドで行われるため `createBuffer()` が他のコードの実行をブロックするので、この機能は仕様書から削除されました。非同期メソッド `decodeAudioData()` は同じことをします。 MP3 ファイルのような圧縮された音声を受け取り、{{ domxref("AudioBuffer") }} を直接返します。そして {{ domxref("AudioBufferSourceNode") }} で再生することができるのです。 MP3 を再生するような単純な用途では、 `decodeAudioData()` を使用する必要があります。
 
 ## 構文
 
@@ -22,7 +23,8 @@ createBuffer(numOfChannels, length, sampleRate)
 
 ### 引数
 
-> **メモ:** 音声バッファーの仕組みと、これらの引数の意味についての詳しい説明は、基本概念ガイドの[音声バッファー：フレーム、サンプル、チャンネル](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#オーディオバッファー_フレーム、サンプル、チャンネルセクション)に書かれています。
+> [!NOTE]
+> 音声バッファーの仕組みと、これらの引数の意味についての詳しい説明は、基本概念ガイドの[音声バッファー：フレーム、サンプル、チャンネル](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#オーディオバッファー_フレーム、サンプル、チャンネルセクション)に書かれています。
 
 - `numOfChannels`
   - : 整数で、このバッファーが持つべきチャンネル数を表します。既定値は 1 で、すべてのユーザーエージェントは少なくとも 32 チャンネルに対応しなければなりません。
@@ -60,7 +62,8 @@ const buffer = audioCtx.createBuffer(1, 22050, 22050);
 
 この呼び出しを使用した場合、モノラルバッファー（1 チャネル）が得られ、 AudioContext が 44100Hz で動作している状態で再生すると、自動的に\*リサンプル\*されて 44100Hz となり（すなわち 44100 フレームになる）、 1.0 秒間（44100 フレーム / 44100Hz = 1 秒）になります。
 
-> **メモ:** 音声のリサンプリングは、画像のリサイズにとても似ています。 16 x 16 の画像を持っていて、それを 32 x 32 の領域いっぱいにしたい場合、それをリサイズ（リサンプリング）します。結果は、（リサイズのアルゴリズムによっては、ぼやけたりエッジが立ったりして）品質が落ちますが、うまくいき、リサイズした画像はよりスペースが小さくなります。リサンプルされた音声も全く同じで、スペースは節約できますが、実際には高い周波数のコンテンツ（高音）を適切に再生することはできません。
+> [!NOTE]
+> 音声のリサンプリングは、画像のリサイズにとても似ています。 16 x 16 の画像を持っていて、それを 32 x 32 の領域いっぱいにしたい場合、それをリサイズ（リサンプリング）します。結果は、（リサイズのアルゴリズムによっては、ぼやけたりエッジが立ったりして）品質が落ちますが、うまくいき、リサイズした画像はよりスペースが小さくなります。リサンプルされた音声も全く同じで、スペースは節約できますが、実際には高い周波数のコンテンツ（高音）を適切に再生することはできません。
 
 次は少し複雑な `createBuffer()` の例を見てみましょう。 3 秒間のバッファーを生成し、ホワイトノイズを書き込み、 {{domxref("AudioBufferSourceNode")}} で再生します。コメントでは、何が起こっているのかを明確に説明しています。 [コードをライブで実行](https://mdn.github.io/webaudio-examples/audio-buffer/)したり、[ソースを表示](https://github.com/mdn/webaudio-examples/blob/main/audio-buffer/index.html)したりすることができます。
 
diff --git a/files/ja/web/api/baseaudiocontext/createpanner/index.md b/files/ja/web/api/baseaudiocontext/createpanner/index.md
index b82c6de4655281..4d5c792f7b4b95 100644
--- a/files/ja/web/api/baseaudiocontext/createpanner/index.md
+++ b/files/ja/web/api/baseaudiocontext/createpanner/index.md
@@ -120,7 +120,8 @@ function positionPanner() {
 }
 ```
 
-> **メモ:** リスナーやパンナーの位置値をどのように設定すれば、画面上のビジュアルに適したサウンドになるかという点では、少し面倒な計算が必要となりますが、すこしやれば慣れる類のものです。
+> [!NOTE]
+> リスナーやパンナーの位置値をどのように設定すれば、画面上のビジュアルに適したサウンドになるかという点では、少し面倒な計算が必要となりますが、すこしやれば慣れる類のものです。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/baseaudiocontext/createperiodicwave/index.md b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.md
index 58a3cf4ef7bd01..da05cc28925149 100644
--- a/files/ja/web/api/baseaudiocontext/createperiodicwave/index.md
+++ b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.md
@@ -33,7 +33,8 @@ createPeriodicWave(real, imag, constraints)
     - `disableNormalization`
       - : `true` に設定すると、周期的な波の正規化を無効にします。既定値は `false` です。
 
-> **メモ:** 正規化した場合、結果の波は最大絶対ピーク値が 1 になります。
+> [!NOTE]
+> 正規化した場合、結果の波は最大絶対ピーク値が 1 になります。
 
 ### 返値
 
diff --git a/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.md b/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.md
index 52a6c02b3addbe..4ff49e0b0ecb60 100644
--- a/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.md
+++ b/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `createScriptProcessor()` は {{domxref("BaseAudioContext")}} インターフェイスのメソッドで、直接音声処理に用いられる {{domxref("ScriptProcessorNode")}} を生成します。
 
-> **メモ:** この機能は [AudioWorklet](/ja/docs/Web/API/AudioWorklet) と {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
+> [!NOTE]
+> この機能は [AudioWorklet](/ja/docs/Web/API/AudioWorklet) と {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
 
 ## 構文
 
@@ -31,9 +32,11 @@ createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels)
 - `numberOfOutputChannels`
   - : 整数で、このノードの出力のチャンネル数を指定します。既定値は 2 です。32 までの値に対応しています。
 
-> **警告:** Webkit は現在（バージョン 31）、このメソッドを呼び出すときに有効な `bufferSize` を渡すことを要求しています。
+> [!WARNING]
+> Webkit は現在（バージョン 31）、このメソッドを呼び出すときに有効な `bufferSize` を渡すことを要求しています。
 
-> **メモ:** numberOfInputChannels`と`numberOfOutputChannels` の両方が 0 にするのは無効です。
+> [!NOTE]
+> numberOfInputChannels`と`numberOfOutputChannels` の両方が 0 にするのは無効です。
 
 ### 返値
 
diff --git a/files/ja/web/api/baseaudiocontext/createwaveshaper/index.md b/files/ja/web/api/baseaudiocontext/createwaveshaper/index.md
index 79812601153904..b31265c6e113f7 100644
--- a/files/ja/web/api/baseaudiocontext/createwaveshaper/index.md
+++ b/files/ja/web/api/baseaudiocontext/createwaveshaper/index.md
@@ -31,7 +31,8 @@ createWaveShaper()
 以下の例では、 AudioContext を使用して波形整形ノードを作成する基本的な使い方を示しています。
 もっと完全な応用例や情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) の[デモ](https://mdn.github.io/webaudio-examples/voice-change-o-matic/)を参照してください（関連コードは [app.js の 108-193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照してください）。
 
-> **メモ:** シグモイド関数は、その自然な特性から、歪みカーブとしてよく使われます。例えば、その S 字形状は、より滑らかなサウンドを作り出すのに役立ちます。 [Stack Overflow](https://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion) に、以下のような歪み曲線のコードが掲載されていました。
+> [!NOTE]
+> シグモイド関数は、その自然な特性から、歪みカーブとしてよく使われます。例えば、その S 字形状は、より滑らかなサウンドを作り出すのに役立ちます。 [Stack Overflow](https://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion) に、以下のような歪み曲線のコードが掲載されていました。
 
 ```js
 const audioCtx = new AudioContext();
diff --git a/files/ja/web/api/baseaudiocontext/destination/index.md b/files/ja/web/api/baseaudiocontext/destination/index.md
index 33f87c7c47766b..77bce7212a80a8 100644
--- a/files/ja/web/api/baseaudiocontext/destination/index.md
+++ b/files/ja/web/api/baseaudiocontext/destination/index.md
@@ -16,7 +16,8 @@ l10n:
 
 ## 例
 
-> **メモ:** より完全な応用例や情報については、[Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモをご覧ください（関連するコードは [app.js の 108 - 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。
+> [!NOTE]
+> より完全な応用例や情報については、[Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモをご覧ください（関連するコードは [app.js の 108 - 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。
 
 ```js
 const audioCtx = new AudioContext();
diff --git a/files/ja/web/api/baseaudiocontext/listener/index.md b/files/ja/web/api/baseaudiocontext/listener/index.md
index 38823966e97ec7..c2b5d0ad087caa 100644
--- a/files/ja/web/api/baseaudiocontext/listener/index.md
+++ b/files/ja/web/api/baseaudiocontext/listener/index.md
@@ -16,7 +16,8 @@ l10n:
 
 ## 例
 
-> **メモ:** 完全な三次元音声空間処理の例は、 [panner-node](https://github.com/mdn/webaudio-examples/tree/main/panner-node) のデモを参照してください。
+> [!NOTE]
+> 完全な三次元音声空間処理の例は、 [panner-node](https://github.com/mdn/webaudio-examples/tree/main/panner-node) のデモを参照してください。
 
 ```js
 const audioCtx = new AudioContext();
diff --git a/files/ja/web/api/baseaudiocontext/samplerate/index.md b/files/ja/web/api/baseaudiocontext/samplerate/index.md
index ff0a0a632dfdf7..7fa28a1cc7ce5d 100644
--- a/files/ja/web/api/baseaudiocontext/samplerate/index.md
+++ b/files/ja/web/api/baseaudiocontext/samplerate/index.md
@@ -17,7 +17,8 @@ l10n:
 
 ## 例
 
-> **メモ:** 完全なウェブオーディオの実装の例は、[GitHub の MDN リポジトリー](https://github.com/mdn/webaudio-examples) にあるいずれかのウェブオーディオのデモを参照してください。
+> [!NOTE]
+> 完全なウェブオーディオの実装の例は、[GitHub の MDN リポジトリー](https://github.com/mdn/webaudio-examples) にあるいずれかのウェブオーディオのデモを参照してください。
 > ブラウザーのコンソールで `audioCtx.sampleRate` と入力してみてください。
 
 ```js
diff --git a/files/ja/web/api/battery_status_api/index.md b/files/ja/web/api/battery_status_api/index.md
index 0be1c527f0aad2..8d0f354a1d6181 100644
--- a/files/ja/web/api/battery_status_api/index.md
+++ b/files/ja/web/api/battery_status_api/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **バッテリー状態 API** は、 **バッテリー API** と呼ばれることの方が多いのですが、システムのバッテリー充電レベルに関する情報の提供、およびバッテリーレベルや充電状態が変化したときに発生するイベントによる通知を可能にします。これは、バッテリーが消耗したときにバッテリー消費を減らすためアプリのリソース使用状況を調整したり、データを失わないためにバッテリーが切れる前に変更点を保存したりするために使用できます。
 
-> **メモ:** この API は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API) では利用できません（{{domxref("WorkerNavigator")}} には公開されていません）。
+> [!NOTE]
+> この API は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API) では利用できません（{{domxref("WorkerNavigator")}} には公開されていません）。
 
 ## インターフェイス
 
diff --git a/files/ja/web/api/beacon_api/index.md b/files/ja/web/api/beacon_api/index.md
index 3bfa43400d25b9..7e5b0d7f583f80 100644
--- a/files/ja/web/api/beacon_api/index.md
+++ b/files/ja/web/api/beacon_api/index.md
@@ -13,7 +13,8 @@ Beacon API の主な用途は、クライアント側でのイベントやセッ
 
 この API を使用する動機と使用法の詳細は、{{domxref("navigator.sendBeacon()")}} メソッドのドキュメントを参照してください。
 
-> **メモ:** この API は [Web Workers](/ja/docs/Web/API/Web_Workers_API) では _使用できません_。({{domxref("WorkerNavigator")}} 経由では公開されていません)
+> [!NOTE]
+> この API は [Web Workers](/ja/docs/Web/API/Web_Workers_API) では _使用できません_。({{domxref("WorkerNavigator")}} 経由では公開されていません)
 
 ## インターフェイス
 
diff --git a/files/ja/web/api/beforeunloadevent/index.md b/files/ja/web/api/beforeunloadevent/index.md
index 903ad71320e30b..eb7ea9c903938f 100644
--- a/files/ja/web/api/beforeunloadevent/index.md
+++ b/files/ja/web/api/beforeunloadevent/index.md
@@ -13,7 +13,8 @@ l10n:
 
 Event の `returnValue` プロパティに空文字列でない値が代入されると、ダイアログボックスが現れ、ユーザーにページを離れるかどうかの確認を求めます（下記の例を参照）。値が指定されなかった場合、イベントはサイレントで処理されます。実装によっては、フレームまたは埋め込まれたフレームがユーザージェスチャまたはユーザーの操作を受け取った場合にのみ、ダイアログボックスを示すものもあります。詳しくは[ブラウザーの互換性](#ブラウザーの互換性)を参照してください。
 
-> **メモ:** セキュリティ上の理由から、返す文字列の代わりに、ウェブページの制御しない一般的な文字列のみが示されます。
+> [!NOTE]
+> セキュリティ上の理由から、返す文字列の代わりに、ウェブページの制御しない一般的な文字列のみが示されます。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/bluetooth/requestdevice/index.md b/files/ja/web/api/bluetooth/requestdevice/index.md
index 020c8c7d40f0ff..1831ac486fa6cb 100644
--- a/files/ja/web/api/bluetooth/requestdevice/index.md
+++ b/files/ja/web/api/bluetooth/requestdevice/index.md
@@ -102,7 +102,8 @@ requestDevice(options)
 そのため、要求されるサービスをリストアップすることが重要です。
 具体的な例としては、[`name`](#name) だけでフィルターをかける場合は、[`optionalServices`](#optionalservices) で必要なサービスを指定する必要があります。
 
-> **メモ:** たとえ `options` 引数が技術的にはオプションであっても、結果を返すためには `filters` に値を設定するか、`acceptAllDevices` に `true` を設定する必要があります。
+> [!NOTE]
+> たとえ `options` 引数が技術的にはオプションであっても、結果を返すためには `filters` に値を設定するか、`acceptAllDevices` に `true` を設定する必要があります。
 
 ### 返値
 
diff --git a/files/ja/web/api/cache/index.md b/files/ja/web/api/cache/index.md
index 2079d73c790727..af3f66a3a18863 100644
--- a/files/ja/web/api/cache/index.md
+++ b/files/ja/web/api/cache/index.md
@@ -13,9 +13,11 @@ l10n:
 
 また、定期的にキャッシュ項目を掃除する必要があります。各ブラウザーは、あるオリジンで使用できるキャッシュストレージの総量に厳しい制限を設けています。 `Cache` 容量の概算の使用量は {{domxref("StorageManager.estimate()")}} API を用いて確認することができます。ブラウザーはディスク容量の管理に最善を尽くしますが、あるオリジンのキャッシュストレージを削除することがあります。ブラウザーはふつう、あるオリジンのデータをすべて削除するか、まったく削除しないかのいずれかです。名前を用いてキャッシュをバージョン管理し、安全に操作できるスクリプトのバージョンからのみキャッシュを使用するようにしてください。詳細は、[古いキャッシュの削除](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers#古いキャッシュの削除)を確認してください。
 
-> **メモ:** キーの照合アルゴリズムは、値の中にある [VARY ヘッダー](https://www.fastly.com/blog/best-practices-using-vary-header)に依存しています。そのため、新しいキーを照合するには、キャッシュ内の項目のキーと値の両方を調べる必要があります。
+> [!NOTE]
+> キーの照合アルゴリズムは、値の中にある [VARY ヘッダー](https://www.fastly.com/blog/best-practices-using-vary-header)に依存しています。そのため、新しいキーを照合するには、キャッシュ内の項目のキーと値の両方を調べる必要があります。
 
-> **メモ:** キャッシュ API は HTTP のキャッシュヘッダーを尊重しません。
+> [!NOTE]
+> キャッシュ API は HTTP のキャッシュヘッダーを尊重しません。
 
 {{AvailableInWorkers}}
 
@@ -50,7 +52,8 @@ l10n:
 
 このコード例において、 `caches` は {{domxref("ServiceWorkerGlobalScope")}} のプロパティです。これは `CacheStorage` オブジェクトを保持し、 {{domxref("CacheStorage")}} インターフェイスでアクセスすることができます。
 
-> **メモ:** Chrome では、 `chrome://inspect/#service-workers` にアクセスして、登録されたサービスワーカーの下の "inspect" リンクをクリックすると、 [`service-worker.js`](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) スクリプトが行う様々なアクションのログ状態を見ることができます。
+> [!NOTE]
+> Chrome では、 `chrome://inspect/#service-workers` にアクセスして、登録されたサービスワーカーの下の "inspect" リンクをクリックすると、 [`service-worker.js`](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) スクリプトが行う様々なアクションのログ状態を見ることができます。
 
 ```js
 const CACHE_VERSION = 1;
diff --git a/files/ja/web/api/cache/keys/index.md b/files/ja/web/api/cache/keys/index.md
index d49b30afaa6297..101a54dfdd41c0 100644
--- a/files/ja/web/api/cache/keys/index.md
+++ b/files/ja/web/api/cache/keys/index.md
@@ -12,7 +12,8 @@ l10n:
 
 リクエストは、挿入されたのと同じ順序で返されます。
 
-> **メモ:** レスポンスに `VARY` ヘッダーが設定されている場合、URL が重複しているがヘッダーが異なるリクエストを返すことができます。
+> [!NOTE]
+> レスポンスに `VARY` ヘッダーが設定されている場合、URL が重複しているがヘッダーが異なるリクエストを返すことができます。
 
 ## 構文
 
diff --git a/files/ja/web/api/cachestorage/open/index.md b/files/ja/web/api/cachestorage/open/index.md
index 020446e57540f6..657257c889f61f 100644
--- a/files/ja/web/api/cachestorage/open/index.md
+++ b/files/ja/web/api/cachestorage/open/index.md
@@ -12,7 +12,8 @@ l10n:
 
 `CacheStorage` には、ウィンドウの {{domxref("Window.caches")}} プロパティまたはワーカーの {{domxref("WorkerGlobalScope.caches")}} を介してアクセスできます。
 
-> **メモ:** 指定した {{domxref("Cache")}} が存在しない場合、その `cacheName` で新しいキャッシュを作成し、この新しい {{domxref("Cache")}} オブジェクトに解決される {{jsxref("Promise")}} を返します。
+> [!NOTE]
+> 指定した {{domxref("Cache")}} が存在しない場合、その `cacheName` で新しいキャッシュを作成し、この新しい {{domxref("Cache")}} オブジェクトに解決される {{jsxref("Promise")}} を返します。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvas_api/index.md b/files/ja/web/api/canvas_api/index.md
index b95e1ca78ca08b..78e121fc502e53 100644
--- a/files/ja/web/api/canvas_api/index.md
+++ b/files/ja/web/api/canvas_api/index.md
@@ -87,7 +87,8 @@ ctx.fillRect(10, 10, 150, 100);
 - [ZIM](https://zimjs.com): 便利でキャンバス上のコンポーネントとコーディングの創造性の制御を提供し、アクセシビリティと数百のカラフルなチュートリアルがあります。
 - [Sprig](https://github.com/hackclub/sprig) は、キャンバスを使用する、初心者に優しいオープンソースのタイルベースのゲーム開発ライブラリです。
 
-> **メモ:** WebGL を使用する 2D および 3D のライブラリーについては [WebGL API](/ja/docs/Web/API/WebGL_API) を参照してください。
+> [!NOTE]
+> WebGL を使用する 2D および 3D のライブラリーについては [WebGL API](/ja/docs/Web/API/WebGL_API) を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
index 47d0607d7e5520..57c7a90d1204ad 100644
--- a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -9,7 +9,8 @@ l10n:
 
 [図形の描画](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)についての章では、既定の線と塗りつぶしのスタイルのみを使用しました。ここでは、私たちの絵を少しでも魅力的にするために、自由に使えるキャンバスのオプションについて探っていきます。色、線のスタイル、グラデーション、パターン、影を追加する方法を学びます。
 
-> **メモ:** キャンバスのコンテンツはスクリーンリーダーにはアクセシビリティがありません。キャンバスが純粋に装飾的な場合は、 `role="presentation"` を `<canvas>` の開始タグに記載してください。そうでない場合は、キャンバス要素自体に直接 [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性の値として説明テキストを入れるか、開始タグと閉じタグの中に代替コンテンツを入れてください。キャンバスのコンテンツは DOM の一部ではありませんが、中の代替コンテンツは DOM の一部です。
+> [!NOTE]
+> キャンバスのコンテンツはスクリーンリーダーにはアクセシビリティがありません。キャンバスが純粋に装飾的な場合は、 `role="presentation"` を `<canvas>` の開始タグに記載してください。そうでない場合は、キャンバス要素自体に直接 [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性の値として説明テキストを入れるか、開始タグと閉じタグの中に代替コンテンツを入れてください。キャンバスのコンテンツは DOM の一部ではありませんが、中の代替コンテンツは DOM の一部です。
 
 ## 色
 
@@ -257,7 +258,8 @@ draw();
 
 これを解決するには、パスの作成を非常に正確に行う必要があります。 `1.0` の幅の線はパスの両側へ半単位伸びることを知っていて、パスを (3.5,1) から (3.5,5) まで作成すると、 3 番目の画像のような状況になります。 `1.0` の線幅は完全に、正確に 1 ピクセルの縦線を埋めることになります。
 
-> **メモ:** 縦線の例では、 Y 位置はまだ整数のグリッド線位置を参照していることに注意してください。もしそうでなければ、端点で半分しかカバーしていないピクセルが見えるでしょう（ただし、この動作は、既定値が `butt` である現在の `lineCap` スタイルに依存していることにも注意してください。奇数幅の線に対して半ピクセル座標で一貫したストロークを計算するには、 `lineCap` スタイルを `square` にして、端点周りのストロークの外枠が自動的にピクセル全体を正確に覆うまで拡張します）。
+> [!NOTE]
+> 縦線の例では、 Y 位置はまだ整数のグリッド線位置を参照していることに注意してください。もしそうでなければ、端点で半分しかカバーしていないピクセルが見えるでしょう（ただし、この動作は、既定値が `butt` である現在の `lineCap` スタイルに依存していることにも注意してください。奇数幅の線に対して半ピクセル座標で一貫したストロークを計算するには、 `lineCap` スタイルを `square` にして、端点周りのストロークの外枠が自動的にピクセル全体を正確に覆うまで拡張します）。
 >
 > また、パスの始点と終点のみが影響を受けることに注意してください。パスが `closePath()` で閉じられると、始点と終点がなくなります。その代わりに、パスのすべての端点は、現在の `lineJoin` スタイルの設定（既定値は `miter`）を使用して、接続された区間の外側の境界線をそれらの交点まで自動的に拡張する効果があり、レンダリングストロークは、接続された区間が水平または垂直である場合にそれぞれの端点を中心としたピクセル全体を正確に覆うようになります。これらの追加ラインスタイルのデモについては、次の 2 つのセクションを参照してください。
 
@@ -727,7 +729,8 @@ draw();
 
 `shadowColor` プロパティは影の効果の色を示す CSS 標準の色の値です。は、既定では完全透過の黒です。
 
-> **メモ:** 影は `source-over` [合成操作](/ja/docs/Web/API/Canvas_API/Tutorial/Compositing)でのみ描画されます。
+> [!NOTE]
+> 影は `source-over` [合成操作](/ja/docs/Web/API/Canvas_API/Tutorial/Compositing)でのみ描画されます。
 
 ### 影付きテキストの例
 
diff --git a/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md
index 1fb2347ee12083..0c51008efeb039 100644
--- a/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -43,7 +43,8 @@ l10n:
 
 ユーザーの操作が必要ない場合は、提供されたコードを繰り返し実行する `setInterval()` 関数が利用できます。ゲームを作成したい場合、キーボードまたはマウスのイベントを使用したアニメーションを制御するためには `setTimeout()` が利用できます。{{domxref("EventTarget/addEventListener", "addEventListener()")}} を用いてイベントリスナーを設定することで、ユーザーの操作を取得し、アニメーション関数を実行します。
 
-> **メモ:** 以下の例では、{{domxref("window.requestAnimationFrame()")}} メソッドを使用してアニメーションを制御します。`requestAnimationFrame` メソッドは、フレームを描画する準備ができた時にシステムがアニメーションフレームを呼び出すことで、よりスムーズで効率的な方法でアニメーションを提供します。通常、コールバック回数は 1 秒あたり 60 回となり、バックグラウンドタブで実行している場合は、レートが低くなることがあります。特にゲームのアニメーションループの詳細については、[ゲーム開発](/ja/docs/Games)の[ビデオゲームの解剖学](/ja/docs/Games/Anatomy)を参照してください。
+> [!NOTE]
+> 以下の例では、{{domxref("window.requestAnimationFrame()")}} メソッドを使用してアニメーションを制御します。`requestAnimationFrame` メソッドは、フレームを描画する準備ができた時にシステムがアニメーションフレームを呼び出すことで、よりスムーズで効率的な方法でアニメーションを提供します。通常、コールバック回数は 1 秒あたり 60 回となり、バックグラウンドタブで実行している場合は、レートが低くなることがあります。特にゲームのアニメーションループの詳細については、[ゲーム開発](/ja/docs/Games)の[ビデオゲームの解剖学](/ja/docs/Games/Anatomy)を参照してください。
 
 ## アニメーションする太陽系
 
@@ -239,7 +240,8 @@ window.requestAnimationFrame(clock);
 
 ### 結果
 
-> **メモ:** 時計は 1 秒に 1 回しか更新されませんが、アニメーション画像は 1 秒間に 60 フレーム（またはウェブブラウザーの表示リフレッシュレート）で更新されます。
+> [!NOTE]
+> 時計は 1 秒に 1 回しか更新されませんが、アニメーション画像は 1 秒間に 60 フレーム（またはウェブブラウザーの表示リフレッシュレート）で更新されます。
 > 秒針をスイープさせて時計を表示するには、上記の `const sec` の定義をコメントアウトされたバージョンと置き換えてください。
 
 {{EmbedLiveSample("An_animated_clock", "180", "200")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md
index 1774a9bcd05730..102b5ddacdb066 100644
--- a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -17,7 +17,8 @@ l10n:
 
 一見すると、 {{HTMLElement("canvas")}} は {{HTMLElement("img")}} 要素と似ていますが、 `src` 属性と `alt` 属性がない点が明確に異なります。一方、 `<canvas>` には [`width`](/ja/docs/Web/HTML/Element/canvas#width) と [`height`](/ja/docs/Web/HTML/Element/canvas#height) の 2 つの属性のみがあります。これらはどちらもオプションで、 {{Glossary("DOM")}} [プロパティ](/ja/docs/Web/API/HTMLCanvasElement)を用いて設定することもできます。を利用できます。 `width` 属性と `height` 属性が指定されていない場合、キャンバスは幅 **300 ピクセル**、高さ **150 ピクセル**で初期化されます。要素の大きさは {{Glossary("CSS")}} で変更できますが、画像を描画される際にはそのレイアウト上の大きさに合わせて拡縮されます。 CSS での大きさは初期のキャンバスの比率を考慮しないため、歪んで表示されることになります。
 
-> **メモ:** 画像が歪んでいると感じた時は、 CSS を使用するのではなく、 `width` および `height` 属性を `<canvas>` の属性に明示的に指定してください。
+> [!NOTE]
+> 画像が歪んでいると感じた時は、 CSS を使用するのではなく、 `width` および `height` 属性を `<canvas>` の属性に明示的に指定してください。
 
 [`id`](/ja/docs/Web/HTML/Global_attributes/id) は `<canvas>` 要素に固有の属性ではありませんが、[HTML のグローバル属性](/ja/docs/Web/HTML/Global_attributes)の一つで、（[`class`](/ja/docs/Web/HTML/Global_attributes/class) のように）すべての HTML 要素に適用することができます。常に `id` を設定するようにすると、スクリプトから要素を特定しやすくなります。
 
@@ -81,7 +82,8 @@ if (canvas.getContext) {
 
 ここでは、この後の例で開始点として使用する、最小限のテンプレートを紹介します。
 
-> **メモ:** スクリプトを HTML に埋め込むのは、よいやり方ではありません。この例では分かりやすさのために、仕方なく埋め込んでいます。
+> [!NOTE]
+> スクリプトを HTML に埋め込むのは、よいやり方ではありません。この例では分かりやすさのために、仕方なく埋め込んでいます。
 
 ```html
 <!doctype html>
diff --git a/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md
index 08455db8fb7eb4..7028854656a39d 100644
--- a/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md
@@ -261,7 +261,8 @@ draw();
 
 `clockwise` 引数の文は最初と 3 番目の列では時計回りの円弧として 2 番目と 4 番目の列では反時計回りの円弧という結果になります。最後に、 `if` 文は上半分は輪郭を描画された円弧を、下半分は塗られた円弧を作ります。
 
-> **メモ:** この例では、ほかの例より若干大きなサイズである 150 x 200 ピクセルのキャンバスが必要です。
+> [!NOTE]
+> この例では、ほかの例より若干大きなサイズである 150 x 200 ピクセルのキャンバスが必要です。
 
 ```html hidden
 <html lang="en">
diff --git a/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
index c85fecc0619b14..edb1281f60e67b 100644
--- a/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
@@ -79,7 +79,8 @@ const myImageData = ctx.getImageData(left, top, width, height);
 
 このメソッドは (`left`,`top`)、(`left+width`, `top`)、(`left`, `top+height`)、(`left+width`, `top+height`) の点で四隅を表したキャンバスの領域のピクセルデータを表す `ImageData` オブジェクトを返します。点の座標は、キャンバスの座標空間の単位で指定します。
 
-> **メモ:** 返される `ImageData` オブジェクトで、キャンバスの外部にあるピクセルはすべて透明な黒色になります。
+> [!NOTE]
+> 返される `ImageData` オブジェクトで、キャンバスの外部にあるピクセルはすべて透明な黒色になります。
 
 このメソッドは、[キャンバスを使用した動画の操作](/ja/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)の記事でも説明しています。
 
@@ -284,7 +285,8 @@ function draw(img) {
 
 {{domxref("HTMLCanvasElement")}} は、画像を保存する際に役に立つ `toDataURL()` メソッドを提供します。これは、[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) として引数 `type` で指定した形式（既定値は [PNG](https://ja.wikipedia.org/wiki/Portable_Network_Graphics)）で表した画像を返します。返される画像の解像度は 96 dpi です。
 
-> **メモ:** CORS を使用せずに他の {{Glossary("origin")}} から取得したピクセルがキャンバスに含まれている場合、キャンバスは**汚染**され、その内容を読み取ったり保存したりできなくなることに注意してください。
+> [!NOTE]
+> CORS を使用せずに他の {{Glossary("origin")}} から取得したピクセルがキャンバスに含まれている場合、キャンバスは**汚染**され、その内容を読み取ったり保存したりできなくなることに注意してください。
 > [セキュリティと汚染されたキャンバス](/ja/docs/Web/HTML/CORS_enabled_image#セキュリティと汚染されたキャンバス)を参照してください。
 
 - {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/transformations/index.md b/files/ja/web/api/canvas_api/tutorial/transformations/index.md
index 9c9aca463124fd..ef14bb5e3b2fc8 100644
--- a/files/ja/web/api/canvas_api/tutorial/transformations/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/transformations/index.md
@@ -142,7 +142,8 @@ draw();
 
 この例は、まずはキャンバスの原点で長方形を回転するために `rotate()` メソッドを使用して、次に長方形自身の中心で回転するために `translate()` の助けを借りています。
 
-> **メモ:** 角度はラジアン (radians) で表しており、度数 (degrees) ではありません。これは `radians = (Math.PI/180)*degrees` のようにすると変換できます。
+> [!NOTE]
+> 角度はラジアン (radians) で表しており、度数 (degrees) ではありません。これは `radians = (Math.PI/180)*degrees` のようにすると変換できます。
 
 ```js
 function draw() {
diff --git a/files/ja/web/api/canvas_api/tutorial/using_images/index.md b/files/ja/web/api/canvas_api/tutorial/using_images/index.md
index 7c6a49e348c3a6..8679aa9bfed0d5 100644
--- a/files/ja/web/api/canvas_api/tutorial/using_images/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/using_images/index.md
@@ -116,7 +116,8 @@ function getMyVideo() {
 - {{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
   - : 引数 `image` で指定した画像を、座標 (`x`, `y`) に描画します。
 
-> **メモ:** SVG 画像は、ルート \<svg> 要素で幅と高さを指定しなければなりません。
+> [!NOTE]
+> SVG 画像は、ルート \<svg> 要素で幅と高さを指定しなければなりません。
 
 ### 例: シンプルな折れ線グラフ
 
@@ -166,7 +167,8 @@ draw();
 
 以下の例は画像を壁紙として使用して、キャンバス上で数回繰り返して貼り付けています。ループ処理によって、さまざまな場所に縮小した画像を貼り付けました。以下のコードでは、最初の `for` ループで行の繰り返し処理を行います。2 番目の `for` ループで列の繰り返し処理を行います。画像は元のサイズの 3 分の 1 である、 50x38 ピクセルに縮小しています。
 
-> **メモ:** 画像を拡大しすぎると不鮮明に、あるいは縮小しすぎると荒くなります。読みやすくしておかなければならない文字列が画像内にある場合は、サイズを変更しないほうがよいでしょう。
+> [!NOTE]
+> 画像を拡大しすぎると不鮮明に、あるいは縮小しすぎると荒くなります。読みやすくしておかなければならない文字列が画像内にある場合は、サイズを変更しないほうがよいでしょう。
 
 ```html hidden
 <html lang="en">
diff --git a/files/ja/web/api/canvasrenderingcontext2d/arcto/index.md b/files/ja/web/api/canvasrenderingcontext2d/arcto/index.md
index e921f1cbceff8f..257fabadd29cac 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/arcto/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/arcto/index.md
@@ -13,7 +13,8 @@ l10n:
 
 このメソッドは、主に角丸の図形を描画するのに使用されます。
 
-> **メモ:** 相対的に大きな半径を指定した場合、得られる角丸の描線が期待するものとは異なる可能性があります。円弧と連結する直線は円弧の半径に合うように描線されます。
+> [!NOTE]
+> 相対的に大きな半径を指定した場合、得られる角丸の描線が期待するものとは異なる可能性があります。円弧と連結する直線は円弧の半径に合うように描線されます。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/ja/web/api/canvasrenderingcontext2d/beginpath/index.md
index 3f6e9b1197081e..620ed1121cf2fb 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/beginpath/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/beginpath/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`CanvasRenderingContext2D.beginPath()`** はキャンバス 2D API のメソッドで、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合は、このメソッドを呼び出してください。
 
-> **メモ:** 新しいサブパス（つまり、現在のキャンバスの状態に一致するサブパス）を作成する場合、 {{domxref("CanvasRenderingContext2D.moveTo()")}} が使用できます。
+> [!NOTE]
+> 新しいサブパス（つまり、現在のキャンバスの状態に一致するサブパス）を作成する場合、 {{domxref("CanvasRenderingContext2D.moveTo()")}} が使用できます。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/clip/index.md b/files/ja/web/api/canvasrenderingcontext2d/clip/index.md
index 5a08599d5573c2..fb97fba9b9e04e 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/clip/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/clip/index.md
@@ -14,11 +14,13 @@ l10n:
 
 ![星形のクリッピング領域](canvas_clipping_path.png)
 
-> **メモ:** クリッピング領域は、パスに追加した図形からのみ構築されることに注意してください。
+> [!NOTE]
+> クリッピング領域は、パスに追加した図形からのみ構築されることに注意してください。
 > {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}} のようにキャンバスに直接描画する図形プリミティブでは動作しません。
 > 代わりに、 {{domxref("CanvasRenderingContext2D.rect()","rect()")}} を使用してパスに矩形図形を追加してから `clip()` を呼び出す必要があります。
 
-> **メモ:** クリップパスは直接元に戻すことはできません。 `clip()` を呼び出す前に {{domxref("CanvasRenderingContext2D/save", "save()")}} を使ってキャンバスの状態を保存し、クリップした領域で描画が完了したら {{domxref("CanvasRenderingContext2D/restore", "restore()")}} を使って復元する必要があります。
+> [!NOTE]
+> クリップパスは直接元に戻すことはできません。 `clip()` を呼び出す前に {{domxref("CanvasRenderingContext2D/save", "save()")}} を使ってキャンバスの状態を保存し、クリップした領域で描画が完了したら {{domxref("CanvasRenderingContext2D/restore", "restore()")}} を使って復元する必要があります。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/closepath/index.md b/files/ja/web/api/canvasrenderingcontext2d/closepath/index.md
index 25268dd9ab1bac..0e4044994c34a8 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/closepath/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/closepath/index.md
@@ -62,7 +62,8 @@ ctx.stroke();
 
 この例では、非接続のサブパス 3 つからなるスマイリーの顔マークを描画します。
 
-> **メモ:** すべての弧について、作成された後で `closePath()` が呼び出されていますが、最後の弧（サブパス）のみが閉じられます。
+> [!NOTE]
+> すべての弧について、作成された後で `closePath()` が呼び出されていますが、最後の弧（サブパス）のみが閉じられます。
 
 #### HTML
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/createconicgradient/index.md b/files/ja/web/api/canvasrenderingcontext2d/createconicgradient/index.md
index 62cdaa4e5c13bf..c3f1c37c7af58b 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/createconicgradient/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/createconicgradient/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このメソッドは扇形の {{domxref("CanvasGradient")}} を返します。図形に適用するには、グラデーションをまず {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} または {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} プロパティに割り当てる必要があります。
 
-> **メモ:** グラデーション座標はグローバル、つまり現在の座標空間からの相対座標です。図形に適用される場合、座標は図形の座標に対する相対的なものではありません。
+> [!NOTE]
+> グラデーション座標はグローバル、つまり現在の座標空間からの相対座標です。図形に適用される場合、座標は図形の座標に対する相対的なものではありません。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/ja/web/api/canvasrenderingcontext2d/createlineargradient/index.md
index bad8e13b6fb1bf..484710ff56029e 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/createlineargradient/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/createlineargradient/index.md
@@ -14,7 +14,8 @@ l10n:
 
 このメソッドは、線形の {{domxref("CanvasGradient")}} を返します。図形に適用するには、グラデーションを最初の {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} または {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} プロパティに割り当てる必要があります。
 
-> **メモ:** グラデーション座標はグローバル、 すなわち現在の座標空間に対する相対座標です。図形に適用される場合、座標は図形の座標に対する相対ではありません。
+> [!NOTE]
+> グラデーション座標はグローバル、 すなわち現在の座標空間に対する相対座標です。図形に適用される場合、座標は図形の座標に対する相対ではありません。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/createradialgradient/index.md b/files/ja/web/api/canvasrenderingcontext2d/createradialgradient/index.md
index 1b851ec848619f..f2c0488d8efdc9 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/createradialgradient/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/createradialgradient/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このメソッドは {{domxref("CanvasGradient")}} を返します。シェイプに適用するには、グラデーションをまず {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} または {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} プロパティに割り当てる必要があります。
 
-> **メモ:** グラデーション座標はグローバル、つまり現在の座標空間からの相対座標です。シェイプに適用された場合、座標はシェイプの座標に対する相対的なものではありません。
+> [!NOTE]
+> グラデーション座標はグローバル、つまり現在の座標空間からの相対座標です。シェイプに適用された場合、座標はシェイプの座標に対する相対的なものではありません。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.md
index 98ee5f37aab053..60f40227e1654b 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`CanvasRenderingContext2D.fillStyle`** は[キャンバス 2D API](/ja/docs/Web/API/Canvas_API) のプロパティで、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。既定値は `#000` (黒色)です。
 
-> **メモ:** 輪郭と塗りつぶしのスタイル例については、[キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)の[スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)をご覧ください。
+> [!NOTE]
+> 輪郭と塗りつぶしのスタイル例については、[キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)の[スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)をご覧ください。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/filltext/index.md b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.md
index bca1076bfd20c3..d6eb0c1d7118d3 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/filltext/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.md
@@ -13,7 +13,8 @@ l10n:
 
 テキストのフォントやレイアウト構成は、 {{domxref("CanvasRenderingContext2D.font","font")}}、{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction","direction")}} の各プロパティで定義されたものを使用して描画が行われます。
 
-> **メモ:** 文字列の文字の輪郭を描画するには、そのコンテキストで {{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} メソッドを呼び出してください。
+> [!NOTE]
+> 文字列の文字の輪郭を描画するには、そのコンテキストで {{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} メソッドを呼び出してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/ja/web/api/canvasrenderingcontext2d/getimagedata/index.md
index 065d39ca26ec4f..b7296e4cbb5c8c 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/getimagedata/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/getimagedata/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このメソッドは、キャンバスの変換行列の影響を受けません。指定された矩形がキャンパスの境界の外にはみ出る場合は、返される `ImageData` オブジェクトのキャンバスの外側の部分は透明な黒になります。
 
-> **メモ:** 画像データは、{{domxref("CanvasRenderingContext2D.putImageData()", "putImageData()")}} メソッドでキャンバスに描画できます。
+> [!NOTE]
+> 画像データは、{{domxref("CanvasRenderingContext2D.putImageData()", "putImageData()")}} メソッドでキャンバスに描画できます。
 
 [キャンバスとピクセル操作](/ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)に、`getImageData()` およびキャンバスの内容の一般的な操作に関するさらなる情報があります。
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
index 10f24c548a487d..8470d30751dff8 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このプロパティは、ピクセルアートを使用するゲームやその他のアプリで有用です。画像を拡大するとき、既定のリサイズアルゴリズムではピクセルがぼけてしまいます。このプロパティを `false` に設定すると、ピクセルの鮮明さを維持します。
 
-> **メモ:** 平滑化の品質は、 {{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}} プロパティで調整することができます。
+> [!NOTE]
+> 平滑化の品質は、 {{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}} プロパティで調整することができます。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md b/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md
index 0d1bc80f21b79d..aebadad10855f8 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`imageSmoothingQuality`** は {{domxref("CanvasRenderingContext2D")}} インターフェイスのプロパティで、[キャンバス API](/ja/docs/Web/API/Canvas_API) の一部です。画像の平滑化の品質を設定します。
 
-> **メモ:** このプロパティが効果を発揮するには、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} が `true` でなければなりません。
+> [!NOTE]
+> このプロパティが効果を発揮するには、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} が `true` でなければなりません。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/linecap/index.md b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.md
index f49808bd17ae7c..4f2c5a732c2fcd 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/linecap/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`CanvasRenderingContext2D.lineCap`** はキャンバス 2D API のプロパティで、描く線の端点の形状を設定します。
 
-> **メモ:** 線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} の各メソッドで描画されます。
+> [!NOTE]
+> 線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} の各メソッドで描画されます。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/ja/web/api/canvasrenderingcontext2d/linejoin/index.md
index 17b6814cd4ec9c..1c573b311c546b 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/linejoin/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/linejoin/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このプロパティは、接続された 2 つの線分の方向が同じであれば効果はありません。長さがゼロの縮退線分（つまり、すべての端点と制御点がまったく同じ位置にある）も無視されます。
 
-> **メモ:** 線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} メソッドを呼び出すことで描画することができます。
+> [!NOTE]
+> 線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} メソッドを呼び出すことで描画することができます。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/linewidth/index.md b/files/ja/web/api/canvasrenderingcontext2d/linewidth/index.md
index 80e36f286697aa..7347f5a7301537 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/linewidth/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/linewidth/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`CanvasRenderingContext2D.lineWidth`** はキャンバス 2D API のプロパティで、線の太さを設定します。
 
-> **メモ:** 線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} メソッドで描画することができます。
+> [!NOTE]
+> 線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} メソッドで描画することができます。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/miterlimit/index.md b/files/ja/web/api/canvasrenderingcontext2d/miterlimit/index.md
index f13cf5580087eb..c3ea3c05acca7b 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/miterlimit/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/miterlimit/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`CanvasRenderingContext2D.lineWidth`** はキャンバス 2D API のプロパティで、マイター制限の比率を設定します。
 
-> **メモ:** マイターについての詳細は、[スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)（[キャンバスチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)内）を参照してください。
+> [!NOTE]
+> マイターについての詳細は、[スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)（[キャンバスチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)内）を参照してください。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/putimagedata/index.md b/files/ja/web/api/canvasrenderingcontext2d/putimagedata/index.md
index 468be7475b6415..b8adcafbe3b1a6 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/putimagedata/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/putimagedata/index.md
@@ -110,7 +110,8 @@ putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
 
 ### ブラウザーの最適化によるデータの消失
 
-> **警告:** 乗算済みアルファカラー値との変換ではデータが劣化するため、`putImageData()` でピクセルを設定した直後でも、対応する `getImageData()` で異なる値として読み込まれる可能性があります。
+> [!WARNING]
+> 乗算済みアルファカラー値との変換ではデータが劣化するため、`putImageData()` でピクセルを設定した直後でも、対応する `getImageData()` で異なる値として読み込まれる可能性があります。
 
 #### JavaScript
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/rect/index.md b/files/ja/web/api/canvasrenderingcontext2d/rect/index.md
index f5e631337b8d88..316f6a42c0f5cf 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/rect/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/rect/index.md
@@ -9,7 +9,8 @@ slug: Web/API/CanvasRenderingContext2D/rect
 
 現在のパスを変更する他のメソッドと同様に、このメソッドも直接何かを描画するわけではありません。 矩形をキャンバスに描画するには、 {{domxref("CanvasRenderingContext2D.fill", "fill()")}} または {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} メソッドを使用することができます。
 
-> **メモ:** 矩形の作成とレンダリングを一度に行うには、 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} または {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} メソッドを使用してください。
+> [!NOTE]
+> 矩形の作成とレンダリングを一度に行うには、 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} または {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} メソッドを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.md
index eb5d9dde601523..3d0da47ba78b21 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.md
@@ -7,7 +7,8 @@ slug: Web/API/CanvasRenderingContext2D/setLineDash
 
 **`setLineDash()`** はキャンバス 2D API の {{domxref("CanvasRenderingContext2D")}} インターフェイスのメソッドで、線を描画するときに使用される線の模様を設定します。 これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。
 
-> **メモ:** 線の模様を実線に戻す場合には、指定する配列の中身を空にします。
+> [!NOTE]
+> 線の模様を実線に戻す場合には、指定する配列の中身を空にします。
 
 ## 構文
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md
index d81b471f4588ac..831749262d9f35 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API の **`CanvasRenderingContext2D.shadowBlur`** プロパティは、影にかかるぼかしの量を設定します。デフォルトは `0` (ぼかしなし) です。
 
-> **メモ:** 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ `shadowBlur`、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければなりません。
+> [!NOTE]
+> 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ `shadowBlur`、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければなりません。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md
index c4de2ef030e52e..1d1154a0dc530b 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md
@@ -11,7 +11,8 @@ Canvas 2D API の **`CanvasRenderingContext2D.shadowColor`** プロパティは
 
 描画時の影の不透明度は、塗りつぶしでは {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} の色の、線の描画では {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} の色の影響を受けることを覚えておいてください。
 
-> **メモ:** 影はプロパティ `shadowColor` が透明でない色に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければなりません。
+> [!NOTE]
+> 影はプロパティ `shadowColor` が透明でない色に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければなりません。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
index dc4aab5acfd305..c862b43e7301b3 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API の **`CanvasRenderingContext2D.shadowOffsetX`** プロパティは、影を横方向にずらす距離を設定します。
 
-> **メモ:** 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、`shadowOffsetX`、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければいけません。
+> [!NOTE]
+> 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、`shadowOffsetX`、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければいけません。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
index ab99da16959433..729f03beecdfdd 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API の **`CanvasRenderingContext2D.shadowOffsetY`** は、影を縦方向にずらす距離を設定します。
 
-> **メモ:** 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、`shadowOffsetY` のいずれかがゼロでない値に設定されていなければいけません。
+> [!NOTE]
+> 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、`shadowOffsetY` のいずれかがゼロでない値に設定されていなければいけません。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.md
index fe5103a7259a22..8411d5b6bc0493 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`CanvasRenderingContext2D.strokeStyle`** はキャンバス 2D API のプロパティで、図形の辺（輪郭）に使用する色、グラデーション、またはパターンを指定します。既定値は `#000` （黒色）です。
 
-> **メモ:** 輪郭と塗りつぶしのスタイル例については、[キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)の [スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) をご覧ください。
+> [!NOTE]
+> 輪郭と塗りつぶしのスタイル例については、[キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)の [スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) をご覧ください。
 
 ## 値
 
diff --git a/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.md
index dbfc921a0269dd..54a2d794dd5bef 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.md
+++ b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.md
@@ -11,7 +11,8 @@ l10n:
 
 このメソッドは現在のパスを変更することなく、直接キャンバスに描画を行います。その後の {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} や {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} には影響を与えません。
 
-> **メモ:** 輪郭線のみを描くのではなく、テキスト文字を塗りつぶすのであれば {{domxref('CanvasRenderingContext2D.fillText()', 'fillText()')}} メソッドを使用してください。
+> [!NOTE]
+> 輪郭線のみを描くのではなく、テキスト文字を塗りつぶすのであれば {{domxref('CanvasRenderingContext2D.fillText()', 'fillText()')}} メソッドを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/cdatasection/index.md b/files/ja/web/api/cdatasection/index.md
index 26021ebe453f38..b4f1e27c23f84e 100644
--- a/files/ja/web/api/cdatasection/index.md
+++ b/files/ja/web/api/cdatasection/index.md
@@ -27,7 +27,8 @@ XML では、CDATA セクションは次のようになります。
 
 CDATA セクションに許可されていない唯一の文字の並びは、閉じる文字の並びである `]]>` です。
 
-> **メモ:** CDATA セクションは HTML 内で使用すべきではありません。コメントと見なされ表示されません。
+> [!NOTE]
+> CDATA セクションは HTML 内で使用すべきではありません。コメントと見なされ表示されません。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/channel_messaging_api/using_channel_messaging/index.md b/files/ja/web/api/channel_messaging_api/using_channel_messaging/index.md
index 0aab73531f7b0d..a7c701f997a75d 100644
--- a/files/ja/web/api/channel_messaging_api/using_channel_messaging/index.md
+++ b/files/ja/web/api/channel_messaging_api/using_channel_messaging/index.md
@@ -17,7 +17,8 @@ slug: Web/API/Channel_Messaging_API/Using_channel_messaging
 
 一方、メッセージチャンネルは、異なる閲覧コンテキスト間でデータを受け渡すことを可能にする安全なチャンネルを提供することができます。
 
-> **メモ:** 詳細情報とアイデアについては、仕様の[ウェブ上のオブジェクト機能モデルの基礎としてのポート](https://html.spec.whatwg.org/multipage/comms.html#ports-as-the-basis-of-an-object-capability-model-on-the-web)（英語）のセクションが役に立つでしょう。
+> [!NOTE]
+> 詳細情報とアイデアについては、仕様の[ウェブ上のオブジェクト機能モデルの基礎としてのポート](https://html.spec.whatwg.org/multipage/comms.html#ports-as-the-basis-of-an-object-capability-model-on-the-web)（英語）のセクションが役に立つでしょう。
 
 ## 簡単な例
 
diff --git a/files/ja/web/api/characterdata/after/index.md b/files/ja/web/api/characterdata/after/index.md
index 3f6ab09fc2d6c0..890d591b2f59dd 100644
--- a/files/ja/web/api/characterdata/after/index.md
+++ b/files/ja/web/api/characterdata/after/index.md
@@ -46,7 +46,8 @@ h1TextNode.data;
 // "CharacterData.after()"
 ```
 
-> **メモ:** 現在のノードにテキストを追加したい場合は、 [`appendData()`](/ja/docs/Web/API/CharacterData/appendData) メソッドを使用すると現在のノードにデータを追加することができます。
+> [!NOTE]
+> 現在のノードにテキストを追加したい場合は、 [`appendData()`](/ja/docs/Web/API/CharacterData/appendData) メソッドを使用すると現在のノードにデータを追加することができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/characterdata/replacewith/index.md b/files/ja/web/api/characterdata/replacewith/index.md
index 2b4739df0ecfb5..2cf5fb8544e61d 100644
--- a/files/ja/web/api/characterdata/replacewith/index.md
+++ b/files/ja/web/api/characterdata/replacewith/index.md
@@ -22,7 +22,8 @@ replaceWith(nodes)
 - `nodes` {{optional_inline}}
   - : カンマ区切りの {{domxref("Node")}} オブジェクトまたは文字列のリストで、現在のノードを置き換えるものです。
 
-> **メモ:** 引数が渡されなかった場合、このメソッドはこのノードを DOM ツリーから取り除くだけの動作をします。
+> [!NOTE]
+> 引数が渡されなかった場合、このメソッドはこのノードを DOM ツリーから取り除くだけの動作をします。
 
 ### 返値
 
diff --git a/files/ja/web/api/clipboard/index.md b/files/ja/web/api/clipboard/index.md
index dce804dd65c35e..5b2e6f48821528 100644
--- a/files/ja/web/api/clipboard/index.md
+++ b/files/ja/web/api/clipboard/index.md
@@ -13,7 +13,8 @@ slug: Web/API/Clipboard
 
 `Clipboard` オブジェクトのメソッド呼び出しは、ユーザーが[権限 API](/ja/docs/Web/API/Permissions_API) を使用して `'clipboard-read'` や `'clipboard-write'` 権限を取得していないと、成功しません。
 
-> **メモ:** 現実には、ブラウザーがクリップボードへアクセスする場合に必要となることは、非常に多岐に渡ります。詳細は[クリップボードの可用性](#クリップボードの可用性)を参照してください。
+> [!NOTE]
+> 現実には、ブラウザーがクリップボードへアクセスする場合に必要となることは、非常に多岐に渡ります。詳細は[クリップボードの可用性](#クリップボードの可用性)を参照してください。
 
 </div>
 
diff --git a/files/ja/web/api/clipboard/read/index.md b/files/ja/web/api/clipboard/read/index.md
index 354bcbb540af37..df4cf4e99bc241 100644
--- a/files/ja/web/api/clipboard/read/index.md
+++ b/files/ja/web/api/clipboard/read/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Clipboard/read
 
 クリップボードから読み込みを行うためには、まず `"clipboard-read"` 権限を取得する必要があります。
 
-> **メモ:** 非同期のクリップボード API と[権限 API](/ja/docs/Web/API/Permissions_API) は、ほとんどのブラウザーでは組み込み途中の状態です。そのため、権限などが公式仕様とは異なっていることがよくあります。これらのメソッドを使う前に[互換性一覧表](#ブラウザーの互換性)を確認してください。
+> [!NOTE]
+> 非同期のクリップボード API と[権限 API](/ja/docs/Web/API/Permissions_API) は、ほとんどのブラウザーでは組み込み途中の状態です。そのため、権限などが公式仕様とは異なっていることがよくあります。これらのメソッドを使う前に[互換性一覧表](#ブラウザーの互換性)を確認してください。
 
 ## 構文
 
@@ -35,7 +36,8 @@ read();
 
 この例では、クリップボードの読み取りを確認または許可して、画像データを取得し、空のフレームに画像データを表示します。
 
-> **メモ:** 現時点では、Firefoxは `read()` を実装していますが、 `"clipboard-read"` 権限を認識しないため、[権限 API](/ja/docs/Web/API/Permissions_API) を使ってアクセス管理をしようとしてもうまくいきません。
+> [!NOTE]
+> 現時点では、Firefoxは `read()` を実装していますが、 `"clipboard-read"` 権限を認識しないため、[権限 API](/ja/docs/Web/API/Permissions_API) を使ってアクセス管理をしようとしてもうまくいきません。
 
 #### HTML
 
diff --git a/files/ja/web/api/clipboard/write/index.md b/files/ja/web/api/clipboard/write/index.md
index ee3ae2b5826985..2d9d89d6709c2d 100644
--- a/files/ja/web/api/clipboard/write/index.md
+++ b/files/ja/web/api/clipboard/write/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Clipboard/write
 
 [権限 API](/ja/docs/Web/API/Permissions_API) の `"clipboard-write"` 権限は、ページがアクティブなタブにあるときに自動的に付与されます。
 
-> **メモ:** 非同期クリップボード API に対するブラウザーの対応は、まだ実装の途上にあります。詳しくは、[互換性一覧表](#ブラウザーの互換性)と[クリップボードの可用性](/ja/docs/Web/API/Clipboard#クリップボードの可用性) を必ずチェックしてください。
+> [!NOTE]
+> 非同期クリップボード API に対するブラウザーの対応は、まだ実装の途上にあります。詳しくは、[互換性一覧表](#ブラウザーの互換性)と[クリップボードの可用性](/ja/docs/Web/API/Clipboard#クリップボードの可用性) を必ずチェックしてください。
 
 ## 構文
 
@@ -71,7 +72,8 @@ function copyCanvasContentsToClipboard(canvas, onDone, onError) {
 }
 ```
 
-> **メモ:** 一度に渡すことができるクリップボードの項目は 1 つだけです。
+> [!NOTE]
+> 一度に渡すことができるクリップボードの項目は 1 つだけです。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/clipboard/writetext/index.md b/files/ja/web/api/clipboard/writetext/index.md
index c9982ba57b6f06..7ecf5eebaa974e 100644
--- a/files/ja/web/api/clipboard/writetext/index.md
+++ b/files/ja/web/api/clipboard/writetext/index.md
@@ -6,7 +6,7 @@ slug: Web/API/Clipboard/writeText
 {{APIRef("Clipboard API")}}
 
 {{domxref("Clipboard")}} インターフェイスの **`writeText()`**
-メソッドは、指定されたテキスト文字列をシステムのクリップボードの書き込みます。テキストは {{domxref("Clipboard.read", "read()")}} または {{domxref("Clipboard.readText", "readText()")}} を使って読み戻すことができます。
+メソッドは、指定されたテキスト文字列をシステムのクリップボードに書き込みます。テキストは {{domxref("Clipboard.read", "read()")}} または {{domxref("Clipboard.readText", "readText()")}} を使って読み戻すことができます。
 
 [権限 API](/ja/docs/Web/API/Permissions_API) の `"clipboard-write"` 権限は、ページがアクティブなタブにあるときに自動的に付与されます。
 
diff --git a/files/ja/web/api/clipboard_api/index.md b/files/ja/web/api/clipboard_api/index.md
index 40ddc8e75956b6..4137c7eb496da2 100644
--- a/files/ja/web/api/clipboard_api/index.md
+++ b/files/ja/web/api/clipboard_api/index.md
@@ -9,9 +9,11 @@ l10n:
 
 **クリップボード API** は、クリップボードのコマンド (切り取り、コピー、貼り付け) に応答する機能や、システムクリップボードの非同期の読み取りや書き込みを行う機能を提供します。
 
-> **メモ:** クリップボードにアクセスするには、非推奨の {{domxref("document.execCommand()")}} メソッドよりもこの API を優先して使用してください。
+> [!NOTE]
+> クリップボードにアクセスするには、非推奨の {{domxref("document.execCommand()")}} メソッドよりもこの API を優先して使用してください。
 
-> **メモ:** この API は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)では利用できません。（{{domxref("WorkerNavigator")}} に公開されていません）。
+> [!NOTE]
+> この API は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)では利用できません。（{{domxref("WorkerNavigator")}} に公開されていません）。
 
 ## 概念と使用法
 
diff --git a/files/ja/web/api/clipboarditem/clipboarditem/index.md b/files/ja/web/api/clipboarditem/clipboarditem/index.md
index 2695ab610f1094..44465f7e494785 100644
--- a/files/ja/web/api/clipboarditem/clipboarditem/index.md
+++ b/files/ja/web/api/clipboarditem/clipboarditem/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ClipboardItem/ClipboardItem
 
 **`ClipboardItem()`** は{{domxref("Clipboard API", "クリップボード API", "", 1)}} のコンストラクターで、新しい {{domxref("ClipboardItem")}} オブジェクトを生成します。これは、{{domxref("Clipboard API", "クリップボード API", "", 1)}} で保存・取得するデータを表し、それぞれ {{domxref("clipboard.write()")}} と {{domxref("clipboard.read()")}} で操作します。
 
-> **メモ:** 画像形式の対応はブラウザーによって異なります。 {{domxref("Clipboard")}} インターフェイスについては、ブラウザーの互換性一覧表を参照してください。
+> [!NOTE]
+> 画像形式の対応はブラウザーによって異なります。 {{domxref("Clipboard")}} インターフェイスについては、ブラウザーの互換性一覧表を参照してください。
 
 ## 構文
 
@@ -25,13 +26,15 @@ new ClipboardItem(data, options);
     - `presentationStyle` {{optional_inline}}
       - : `unspecified`、`inline`、`attachment` の 3 つの文字列のうちの 1 つ。既定値は `unspecified`。
 
-> **メモ:** また、 {{domxref("Clipboard")}} インターフェイスの {{domxref("Clipboard.readText()")}} メソッドと {{domxref("Clipboard.writeText()")}} メソッドにより、テキストを扱うことができます。
+> [!NOTE]
+> また、 {{domxref("Clipboard")}} インターフェイスの {{domxref("Clipboard.readText()")}} メソッドと {{domxref("Clipboard.writeText()")}} メソッドにより、テキストを扱うことができます。
 
 ## 例
 
 以下の例では、 {{domxref("Fetch API")}} を使って PNG 画像をリクエストし、 {{domxref("Response.blob()", "responses' blob()")}} メソッドを用いて新しい {{domxref("ClipboardItem")}} を生成しています。このアイテムは、 {{domxref("Clipboard.write()")}} メソッドを用いて、クリップボードに書き込まれます。
 
-> **メモ:** 一度に渡すことができるクリップボードの項目は 1 つだけです。
+> [!NOTE]
+> 一度に渡すことができるクリップボードの項目は 1 つだけです。
 
 ```js
 async function writeClipImg() {
diff --git a/files/ja/web/api/clipboarditem/index.md b/files/ja/web/api/clipboarditem/index.md
index 6e229783b7b1a9..64a76900b8f3b0 100644
--- a/files/ja/web/api/clipboarditem/index.md
+++ b/files/ja/web/api/clipboarditem/index.md
@@ -11,9 +11,11 @@ slug: Web/API/ClipboardItem
 
 クリップボードの内容へのアクセスは[権限 API](/ja/docs/Web/API/Permissions_API) の下で制限されています。クリップボードへの書き込み権限は、ページがアクティブなタブにあるときに自動的に付与されます。 `clipboard-read` 権限は要求する必要があり、これはクリップボードからデータを読もうとすることで行えます。
 
-> **メモ:** テキストを扱うには、 {{domxref("Clipboard")}} インターフェイスの {{domxref("Clipboard.readText()")}} および {{domxref("Clipboard.writeText()")}} メソッドをご覧ください。
+> [!NOTE]
+> テキストを扱うには、 {{domxref("Clipboard")}} インターフェイスの {{domxref("Clipboard.readText()")}} および {{domxref("Clipboard.writeText()")}} メソッドをご覧ください。
 
-> **メモ:** 一度に渡すことができるクリップボードの項目は 1 つだけです。
+> [!NOTE]
+> 一度に渡すことができるクリップボードの項目は 1 つだけです。
 
 ## コンストラクター
 
diff --git a/files/ja/web/api/compositionevent/locale/index.md b/files/ja/web/api/compositionevent/locale/index.md
index f12d2b6dc0e404..5b1c1a311e78b8 100644
--- a/files/ja/web/api/compositionevent/locale/index.md
+++ b/files/ja/web/api/compositionevent/locale/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`locale`** は {{domxref("CompositionEvent")}} インターフェイスの読み取り専用のプロパティで、現在の入力システムのロケール（例えば、結合操作が IME に関連付けられているならばキーボードレイアウトのロケール）を返します。
 
-> **警告:** 対応しているブラウザーでも、このプロパティに含まれる値は信用しないでください。
+> [!WARNING]
+> 対応しているブラウザーでも、このプロパティに含まれる値は信用しないでください。
 > 技術的にはアクセス可能であるとしても、 {{domxref("CompositionEvent")}} を作成する際の設定方法が一貫している保証はありません。
 
 ## 値
diff --git a/files/ja/web/api/console/index.md b/files/ja/web/api/console/index.md
index 8325135894f44f..9cd293616d9c69 100644
--- a/files/ja/web/api/console/index.md
+++ b/files/ja/web/api/console/index.md
@@ -214,9 +214,11 @@ console.log(
 - {{cssxref("word-spacing")}} および {{cssxref("word-break")}}
 - {{cssxref("writing-mode")}}
 
-> **メモ:** 既定では、各コンソールメッセージはインライン要素のように動作します。`padding` や `margin` などのプロパティに何らかの効果を持たせたい場合は、`display` プロパティを `display: inline-block` に設定します。
+> [!NOTE]
+> 既定では、各コンソールメッセージはインライン要素のように動作します。`padding` や `margin` などのプロパティに何らかの効果を持たせたい場合は、`display` プロパティを `display: inline-block` に設定します。
 
-> **メモ:** 明るい配色と暗い配色の両方に対応するために、色を指定するときに {{cssxref("color_value/light-dark")}} を使用することができます。例えば `color: light-dark(#D00000, #FF4040);` とします。
+> [!NOTE]
+> 明るい配色と暗い配色の両方に対応するために、色を指定するときに {{cssxref("color_value/light-dark")}} を使用することができます。例えば `color: light-dark(#D00000, #FF4040);` とします。
 
 ### コンソールでのグループの使用
 
diff --git a/files/ja/web/api/console/profileend_static/index.md b/files/ja/web/api/console/profileend_static/index.md
index 3e4f788eeb7c52..2382be02c84599 100644
--- a/files/ja/web/api/console/profileend_static/index.md
+++ b/files/ja/web/api/console/profileend_static/index.md
@@ -5,7 +5,8 @@ slug: Web/API/console/profileend_static
 
 {{APIRef("Console API")}}{{Non-standard_header}}
 
-> **警告:** console.profile() の直後に本 API を呼び出すと、本 API が動作しないことがあります。これを回避するには、 setTimeout の中で 5ms 以上遅延させて呼び出してください。 [Firefox バグ 1240249](https://bugzil.la/1240249) を参照してください。
+> [!WARNING]
+> console.profile() の直後に本 API を呼び出すと、本 API が動作しないことがあります。これを回避するには、 setTimeout の中で 5ms 以上遅延させて呼び出してください。 [Firefox バグ 1240249](https://bugzil.la/1240249) を参照してください。
 
 **`console.profileEnd()`** メソッドは、 {{DOMxRef("console.profile()")}} で開始したプロファイルの記録を終了します。
 
diff --git a/files/ja/web/api/console/warn_static/index.md b/files/ja/web/api/console/warn_static/index.md
index 01b83f00aceaef..1c6ad5545065cd 100644
--- a/files/ja/web/api/console/warn_static/index.md
+++ b/files/ja/web/api/console/warn_static/index.md
@@ -9,7 +9,8 @@ slug: Web/API/console/warn_static
 
 {{AvailableInWorkers}}
 
-> **メモ:** Chrome と Firefox では、警告メッセージはウェブコンソール上で小さな感嘆符の隣に表示されます。
+> [!NOTE]
+> Chrome と Firefox では、警告メッセージはウェブコンソール上で小さな感嘆符の隣に表示されます。
 
 ## 構文
 
diff --git a/files/ja/web/api/constantsourcenode/constantsourcenode/index.md b/files/ja/web/api/constantsourcenode/constantsourcenode/index.md
index 72ccb03532485a..9e406efbd792a3 100644
--- a/files/ja/web/api/constantsourcenode/constantsourcenode/index.md
+++ b/files/ja/web/api/constantsourcenode/constantsourcenode/index.md
@@ -37,7 +37,8 @@ let audioContext = new AudioContext();
 let myConstantSource = new ConstantSourceNode(audioContext, { offset: 0.5 });
 ```
 
-> **メモ:** このコンストラクターで作成された新しい `ConstantSourceNode` は [`channelCount`](/ja/docs/Web/API/AudioNode/channelCount) が 2 になります。
+> [!NOTE]
+> このコンストラクターで作成された新しい `ConstantSourceNode` は [`channelCount`](/ja/docs/Web/API/AudioNode/channelCount) が 2 になります。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/constantsourcenode/index.md b/files/ja/web/api/constantsourcenode/index.md
index 367aa51c7850ba..66e71d8045439e 100644
--- a/files/ja/web/api/constantsourcenode/index.md
+++ b/files/ja/web/api/constantsourcenode/index.md
@@ -42,7 +42,8 @@ _親インターフェイスである {{domxref("AudioScheduledSourceNode")}} 
 
 _親インターフェイスである {{domxref("AudioScheduledSourceNode")}} からイベントを継承しています。_
 
-> **メモ:** 一部のブラウザーでは、このイベントの実装は {{domxref("AudioScheduledSourceNode")}} インターフェイスの一部となっています。
+> [!NOTE]
+> 一部のブラウザーでは、このイベントの実装は {{domxref("AudioScheduledSourceNode")}} インターフェイスの一部となっています。
 
 - {{domxref("AudioScheduledSourceNode.ended_event","ended")}}
   - : {{domxref('ConstantSourceNode')}} データの再生が停止するたびに発生します。
@@ -51,7 +52,8 @@ _親インターフェイスである {{domxref("AudioScheduledSourceNode")}} 
 
 _親インターフェイスである {{domxref("AudioScheduledSourceNode")}} からメソッドを継承しています。_
 
-> **メモ:** 一部のブラウザーでは、これらのメソッドの実装は {{domxref("AudioScheduledSourceNode")}} インターフェイスの一部となっています。
+> [!NOTE]
+> 一部のブラウザーでは、これらのメソッドの実装は {{domxref("AudioScheduledSourceNode")}} インターフェイスの一部となっています。
 
 - {{domxref("AudioScheduledSourceNode.start", "start()")}}
   - : 正確な時刻に音を再生するようにスケジュールします。
diff --git a/files/ja/web/api/contact_picker_api/index.md b/files/ja/web/api/contact_picker_api/index.md
index 56197d1af727f3..738ccfe9779d5d 100644
--- a/files/ja/web/api/contact_picker_api/index.md
+++ b/files/ja/web/api/contact_picker_api/index.md
@@ -9,7 +9,8 @@ l10n:
 
 連絡先ピッカー API (Contact Picker API) は、ユーザーが連絡先リストから項目を選択し、選択した項目の限定された詳細をウェブサイトやアプリケーションで共有できるようにします。
 
-> **メモ:** この API は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)では使用できません（{{domxref("WorkerNavigator")}} に公開されていません）。
+> [!NOTE]
+> この API は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)では使用できません（{{domxref("WorkerNavigator")}} に公開されていません）。
 
 ## 連絡先ピッカー API の概念と使用法
 
diff --git a/files/ja/web/api/convolvernode/index.md b/files/ja/web/api/convolvernode/index.md
index 62a07c51d45a27..8e618c057bd072 100644
--- a/files/ja/web/api/convolvernode/index.md
+++ b/files/ja/web/api/convolvernode/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ConvolverNode
 
 `ConvolverNode` は {{domxref("AudioNode")}} の一種で、与えられた {{domxref("AudioBuffer")}} を用いて線形畳み込みを行います。リバーブの実装によく用いられます。 `ConvolverNode` は常に 1 つの入力と、1 つの出力を持ちます。
 
-> **メモ:** 線形畳み込みの理論的な側面については、[Wikipedia の「畳み込み」](https://ja.wikipedia.org/wiki/%E7%95%B3%E3%81%BF%E8%BE%BC%E3%81%BF)を参照してください。
+> [!NOTE]
+> 線形畳み込みの理論的な側面については、[Wikipedia の「畳み込み」](https://ja.wikipedia.org/wiki/%E7%95%B3%E3%81%BF%E8%BE%BC%E3%81%BF)を参照してください。
 
 {{InheritanceDiagram}}
 
@@ -58,7 +59,8 @@ _固有のメソッドはありません。親である {{domxref("AudioNode")}}
 
 次の例は、コンボルバーノードを作成するための AudioContext の基本的な使い方を示しています。
 
-> **メモ:** 以下の例を完成させるために、インパルス応答を求める必要があります。応用例はこちらの [Codepen](https://codepen.io/DonKarlssonSan/pen/doVKRE) をご覧ください。
+> [!NOTE]
+> 以下の例を完成させるために、インパルス応答を求める必要があります。応用例はこちらの [Codepen](https://codepen.io/DonKarlssonSan/pen/doVKRE) をご覧ください。
 
 ```js
 let audioCtx = new window.AudioContext();
diff --git a/files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md b/files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md
index 93f5cbd60098cb..7a660bf5e34b2a 100644
--- a/files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md
+++ b/files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`CookieChangeEvent()`** コンストラクターは、{{domxref("CookieStore/change_event", "CookieStore.onchange()")}} に渡されるイベント型である新しい {{domxref("CookieChangeEvent")}} オブジェクトを生成します。このコンストラクターは、変更イベントが発生するとブラウザーにより呼ばれます。
 
-> **メモ:** このコンストラクターは、通常は製品のウェブサイトでは必要ありません。主な使用法は、このイベントのインスタンスが必要なテストです。
+> [!NOTE]
+> このコンストラクターは、通常は製品のウェブサイトでは必要ありません。主な使用法は、このイベントのインスタンスが必要なテストです。
 
 ## 構文
 
diff --git a/files/ja/web/api/cookiechangeevent/index.md b/files/ja/web/api/cookiechangeevent/index.md
index c23f022c420318..df732fe5427c6f 100644
--- a/files/ja/web/api/cookiechangeevent/index.md
+++ b/files/ja/web/api/cookiechangeevent/index.md
@@ -15,7 +15,8 @@ l10n:
 - Cookie が新規作成され、すぐに削除されます。この場合の `type` は `"deleted"` です。
 - Cookie が削除されます。この場合の `type` は `"deleted"` です。
 
-> **メモ:** 同じ名前・ドメイン・パスの他の Cookie が挿入されることにより置き換えられる Cookie は無視され、変更イベントを発生させません。
+> [!NOTE]
+> 同じ名前・ドメイン・パスの他の Cookie が挿入されることにより置き換えられる Cookie は無視され、変更イベントを発生させません。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/credential_management_api/index.md b/files/ja/web/api/credential_management_api/index.md
index cb9338cd9a4c9a..9942e53e821f3e 100644
--- a/files/ja/web/api/credential_management_api/index.md
+++ b/files/ja/web/api/credential_management_api/index.md
@@ -15,7 +15,8 @@ l10n:
 
 これらの問題に対処するために、資格情報管理 API は、ウェブサイトがさまざまな種類の資格情報を保存したり取得したりする方法を提供しています。これによりユーザーは、サイトにログインするために使用した連携アカウントを確認したり、期限切れのセッションに明示的なログインの手続きなしでセッションを再開したりすることができます。
 
-> **メモ:** この API は最上位のコンテキストのみに制限されています。 `get()` や `store()` を `<iframe>` 要素の中で呼び出すと、何もせずに解決します。
+> [!NOTE]
+> この API は最上位のコンテキストのみに制限されています。 `get()` や `store()` を `<iframe>` 要素の中で呼び出すと、何もせずに解決します。
 
 ### サブドメイン間で共有される資格情報
 
diff --git a/files/ja/web/api/credentialscontainer/create/index.md b/files/ja/web/api/credentialscontainer/create/index.md
index 53da2ee7ee4a8b..ac44919b7a6608 100644
--- a/files/ja/web/api/credentialscontainer/create/index.md
+++ b/files/ja/web/api/credentialscontainer/create/index.md
@@ -17,7 +17,8 @@ l10n:
 
 下記のリファレンスページでは、まず構文の節で、異なる API すべてに適用される一般的なメソッド呼び出し構造と引数を説明しています。この部分の後で、各 API に固有の引数、返値、例を提供する別個の節に分けています。
 
-> **メモ:** このメソッドは最上位の{{glossary("browsing context", "閲覧コンテキスト")}}（すなわち、ブラウザータブ内で直接実行している文書で、他の文書に埋め込まれていないもの）に限定されます。`<iframe>` 要素内から呼び出すと、何もせずに解決します。
+> [!NOTE]
+> このメソッドは最上位の{{glossary("browsing context", "閲覧コンテキスト")}}（すなわち、ブラウザータブ内で直接実行している文書で、他の文書に埋め込まれていないもの）に限定されます。`<iframe>` 要素内から呼び出すと、何もせずに解決します。
 
 ## 一般的な構文
 
@@ -366,7 +367,8 @@ navigator.credentials.create({ publicKey }).then((publicKeyCredential) => {
 
 このデータの一部は、この資格情報に対する将来の認証処理のためにサーバーに格納する必要があります。例えば、公開鍵、使用するアルゴリズム、許可されるトランスポートなどです。
 
-> **メモ:** 全体的にどのように作業が流れるかについての詳しい情報は、[キーペアを生成してユーザーを登録](/ja/docs/Web/API/Web_Authentication_API#creating_a_key_pair_and_registering_a_user)を参照してください。
+> [!NOTE]
+> 全体的にどのように作業が流れるかについての詳しい情報は、[キーペアを生成してユーザーを登録](/ja/docs/Web/API/Web_Authentication_API#creating_a_key_pair_and_registering_a_user)を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/css_font_loading_api/index.md b/files/ja/web/api/css_font_loading_api/index.md
index 0cce969b985f59..d1662bbca99e61 100644
--- a/files/ja/web/api/css_font_loading_api/index.md
+++ b/files/ja/web/api/css_font_loading_api/index.md
@@ -9,7 +9,8 @@ l10n:
 
 CSS フォント読み込み API は、フォントリソースを動的に読み込むためのイベントとインターフェイスを提供します。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます（`self.fonts` が{{domxref('FontFaceSet')}} にアクセスする機能を提供します）。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます（`self.fonts` が{{domxref('FontFaceSet')}} にアクセスする機能を提供します）。
 
 ## 概念と使用方法
 
diff --git a/files/ja/web/api/css_object_model/managing_screen_orientation/index.md b/files/ja/web/api/css_object_model/managing_screen_orientation/index.md
index 50e8591bf089e6..6816c0f8011b42 100644
--- a/files/ja/web/api/css_object_model/managing_screen_orientation/index.md
+++ b/files/ja/web/api/css_object_model/managing_screen_orientation/index.md
@@ -134,7 +134,8 @@ li {
   </tbody>
 </table>
 
-> **メモ:** orientation メディアクエリーは、実際は端末の向きではなくブラウザーウィンドウ (または iframe) の向きに応じて適用されます。
+> [!NOTE]
+> orientation メディアクエリーは、実際は端末の向きではなくブラウザーウィンドウ (または iframe) の向きに応じて適用されます。
 
 ## 画面の向きを固定する
 
@@ -164,7 +165,8 @@ screen.orientation.lock();
 
 ロックに成功した後に解決される[プロミス](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)を返します。
 
-> **メモ:** 画面のロックはウェブアプリケーションに依存します。アプリケーション A が `landscape` に固定し、アプリケーション B が `portrait` に固定した場合は、アプリケーション A から B に、または B から A に切り替えても {{domxref("Window.orientationchange_event", "orientationchange")}} イベントは発生しません。これは、双方のアプリケーションが自身の向きを維持しているためです。
+> [!NOTE]
+> 画面のロックはウェブアプリケーションに依存します。アプリケーション A が `landscape` に固定し、アプリケーション B が `portrait` に固定した場合は、アプリケーション A から B に、または B から A に切り替えても {{domxref("Window.orientationchange_event", "orientationchange")}} イベントは発生しません。これは、双方のアプリケーションが自身の向きを維持しているためです。
 >
 > ただし、ロックの要求を満たすために向きを変更しなければならない場合は、向きをロックすることでで {{domxref("Window.orientationchange_event", "orientationchange")}} イベントが発生する可能性があります。
 
diff --git a/files/ja/web/api/css_painting_api/guide/index.md b/files/ja/web/api/css_painting_api/guide/index.md
index 95ebe1f86871bb..969484ad7e2b63 100644
--- a/files/ja/web/api/css_painting_api/guide/index.md
+++ b/files/ja/web/api/css_painting_api/guide/index.md
@@ -18,7 +18,8 @@ CSS スタイルシートで使用される画像をプログラムで生成す
 
 ![ヘッダーの左下 3 分の 2 に「My Cool Header」と書かれたテキストと黄色の背景画像ブロック。](mycoolheader.png)
 
-> **メモ:** この記事の例全体の完全なソースは [https://github.com/mdn/dom-examples/tree/main/css-painting](https://github.com/mdn/dom-examples/tree/main/css-painting) にあり、例は [https://mdn.github.io/dom-examples/css-painting/](https://mdn.github.io/dom-examples/css-painting/) でライブで実行できます。
+> [!NOTE]
+> この記事の例全体の完全なソースは [https://github.com/mdn/dom-examples/tree/main/css-painting](https://github.com/mdn/dom-examples/tree/main/css-painting) にあり、例は [https://mdn.github.io/dom-examples/css-painting/](https://mdn.github.io/dom-examples/css-painting/) でライブで実行できます。
 
 ## CSS 描画ワークレット
 
@@ -421,7 +422,8 @@ CSS.paintWorklet.addModule("header-highlight.js");
 
 ## 引数を渡す
 
-> **メモ:** 次の例は、Chrome または Edge では `about://flags` にアクセスして、Experimental Web Platform features フラグを有効にする必要があります。
+> [!NOTE]
+> 次の例は、Chrome または Edge では `about://flags` にアクセスして、Experimental Web Platform features フラグを有効にする必要があります。
 
 CSS 描画 API を使用すると、カスタムプロパティや通常のプロパティにアクセスできるだけでなく、カスタム引数を `paint()` 関数に渡すこともできます。
 
diff --git a/files/ja/web/api/csscontainerrule/index.md b/files/ja/web/api/csscontainerrule/index.md
index 61b9e41e5b5938..003aa434b0a141 100644
--- a/files/ja/web/api/csscontainerrule/index.md
+++ b/files/ja/web/api/csscontainerrule/index.md
@@ -102,7 +102,8 @@ log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
 log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
 ```
 
-> **メモ:** この例のスタイルは、コードが正しいシートを探しやすいように、 id を持つインライン HTML の `style` 要素で定義しています。
+> [!NOTE]
+> この例のスタイルは、コードが正しいシートを探しやすいように、 id を持つインライン HTML の `style` 要素で定義しています。
 > また、長さをインデックスにして（例えば `document.styleSheets[document.styleSheets.length-1]`）文書から各例の正しいシートを探すこともできますが、そうすると各例の正しいシートを動作するのが複雑になります。
 
 出力例は下記の通りです。
diff --git a/files/ja/web/api/cssrule/csstext/index.md b/files/ja/web/api/cssrule/csstext/index.md
index 67db6dd9d4f373..f980404fa2fb6b 100644
--- a/files/ja/web/api/cssrule/csstext/index.md
+++ b/files/ja/web/api/cssrule/csstext/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`cssText`** は {{domxref("CSSRule")}} インターフェイスのプロパティで、 {{domxref("CSSStyleSheet")}} スタイルルールの実際のテキストを返します。
 
-> **メモ:** このプロパティを要素のスタイルの {{domxref("CSSStyleDeclaration.cssText")}} と混同しないでください。
+> [!NOTE]
+> このプロパティを要素のスタイルの {{domxref("CSSStyleDeclaration.cssText")}} と混同しないでください。
 
 このプロパティは、[仕様化](https://www.w3.org/TR/cssom-1/#changes-from-5-december-2013)されたとおり、*機能的に*変更のみで、かつ、暗黙的であることが指定されているため、直接設定することができなくなったことに注意してください。言い換えると、設定しようとしても警告もエラーもなく、_絶対に何も起こりません_。さらに、設定可能なサブプロパティもありません。従って、これを変更するには、スタイルシートの {{domxref("CSSRuleList", "cssRules")}}`[index]` プロパティおよび {{domxref("CSSStyleRule.selectorText", ".selectorText")}}、{{domxref("CSSStyleRule.style", ".style")}} （または、そのサブプロパティ）を使用してください。詳細は、[動的なスタイル情報の使用](/ja/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information)を参照してください。
 
diff --git a/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.md b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.md
index 5c9dfcad06747b..24e460e04951ff 100644
--- a/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.md
+++ b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **CSSStyleDeclaration.getPropertyCSSValue()** メソッドインターフェイスは、プロパティの CSS 値を含む {{domxref('CSSValue')}} を返します。プロパティ名が一括指定プロパティの場合は `null` を返すことに注意して下さい。
 
-> **メモ:** このインターフェイスは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。
+> [!NOTE]
+> このインターフェイスは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。
 >
 > この目的を達成するには、以下のものを使用することができます。
 >
diff --git a/files/ja/web/api/cssstylerule/style/index.md b/files/ja/web/api/cssstylerule/style/index.md
index bae2a852b675dc..3d3b4696639e96 100644
--- a/files/ja/web/api/cssstylerule/style/index.md
+++ b/files/ja/web/api/cssstylerule/style/index.md
@@ -38,7 +38,8 @@ let myRules = document.styleSheets[0].cssRules;
 console.log(myRules[0].style); // a CSSStyleDeclaration representing the declarations on the h1.
 ```
 
-> **メモ:** 宣言ブロックは、中括弧内に現れるスタイルルールの一部で、実際にスタイル定義を提供する部分です（セレクターについては、中括弧の前に来る部分）。
+> [!NOTE]
+> 宣言ブロックは、中括弧内に現れるスタイルルールの一部で、実際にスタイル定義を提供する部分です（セレクターについては、中括弧の前に来る部分）。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/cssstylesheet/index.md b/files/ja/web/api/cssstylesheet/index.md
index 13baeed479ff24..cdee222b768c0d 100644
--- a/files/ja/web/api/cssstylesheet/index.md
+++ b/files/ja/web/api/cssstylesheet/index.md
@@ -39,7 +39,8 @@ _親である {{domxref("StyleSheet")}} からプロパティを継承してい
 
   - : 生きた {{domxref("CSSRuleList")}} を返します。これは、スタイルシートを構成する {{domxref("CSSRule")}} オブジェクトの最新リストを維持します。
 
-  > **メモ:** 一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれた場合、`cssRules` にアクセスすると `SecurityError` が発生します。
+  > [!NOTE]
+  > 一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれた場合、`cssRules` にアクセスすると `SecurityError` が発生します。
 
 - {{domxref("CSSStyleSheet.ownerRule")}} {{ReadOnlyInline}}
   - : これが {{cssxref("@import")}} ルールを使用して文書にインポートされたスタイルシートである場合、`ownerRule` は、その {{domxref("CSSImportRule")}} を返します。そうでない場合、`null` を返します。
diff --git a/files/ja/web/api/cssstylesheet/removerule/index.md b/files/ja/web/api/cssstylesheet/removerule/index.md
index ec6140227dc3e5..4479c6f8df7d7d 100644
--- a/files/ja/web/api/cssstylesheet/removerule/index.md
+++ b/files/ja/web/api/cssstylesheet/removerule/index.md
@@ -9,7 +9,8 @@ l10n:
 
 旧式の {{domxref("CSSStyleSheet")}} の **`removeRule()`** メソッドは、スタイルシートオブジェクトからルールを削除します。これは、標準で推奨されるメソッド {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} と機能的に同じです。
 
-> **メモ:** これは古いメソッドであり、標準のメソッド {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} によって置き換えられました。代わりにこちらを使用してください。
+> [!NOTE]
+> これは古いメソッドであり、標準のメソッド {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} によって置き換えられました。代わりにこちらを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/cssstylesheet/replace/index.md b/files/ja/web/api/cssstylesheet/replace/index.md
index 892b7ef76b6ee9..dede21836f105b 100644
--- a/files/ja/web/api/cssstylesheet/replace/index.md
+++ b/files/ja/web/api/cssstylesheet/replace/index.md
@@ -23,7 +23,8 @@ replace(text)
 
   - : スタイルシートのコンテンツを置き換えるためのスタイルルールを格納した文字列。文字列に解釈可能なルールのリストが入っていない場合、値は空文字列に設定されます。
 
-    > **メモ:** もし `text` に渡されたルールの中に {{cssxref("@import")}} ルールでインポートされた外部スタイルシートがあった場合は、それらのルールは除去され、コンソールに警告が出力されます。
+    > [!NOTE]
+    > もし `text` に渡されたルールの中に {{cssxref("@import")}} ルールでインポートされた外部スタイルシートがあった場合は、それらのルールは除去され、コンソールに警告が出力されます。
 
 ### 返値
 
diff --git a/files/ja/web/api/cssstylesheet/replacesync/index.md b/files/ja/web/api/cssstylesheet/replacesync/index.md
index 06e509bc585abe..3bcd2182c11e87 100644
--- a/files/ja/web/api/cssstylesheet/replacesync/index.md
+++ b/files/ja/web/api/cssstylesheet/replacesync/index.md
@@ -23,7 +23,8 @@ replaceSync(text)
 
   - : スタイルシートのコンテンツを置き換えるためのスタイルルールを格納した文字列。文字列に解釈可能なルールのリストが入っていない場合、値は空文字列に設定されます。
 
-    > **メモ:** もし `text` に渡されたルールの中に {{cssxref("@import")}} ルールでインポートされた外部スタイルシートがあった場合は、それらのルールは除去され、コンソールに警告が出力されます。
+    > [!NOTE]
+    > もし `text` に渡されたルールの中に {{cssxref("@import")}} ルールでインポートされた外部スタイルシートがあった場合は、それらのルールは除去され、コンソールに警告が出力されます。
 
 ### 返値
 
diff --git a/files/ja/web/api/cssstylesheet/rules/index.md b/files/ja/web/api/cssstylesheet/rules/index.md
index 7c3f50b9ab3013..67f457210e80d6 100644
--- a/files/ja/web/api/cssstylesheet/rules/index.md
+++ b/files/ja/web/api/cssstylesheet/rules/index.md
@@ -10,7 +10,8 @@ l10n:
 **`rules`** は {{domxref("CSSStyleSheet")}} インターフェイスの非推奨の古いプロパティです。機能的には推奨される {{domxref("CSSStyleSheet.cssRules", "cssRules")}} プロパティと同じで、
 スタイルシートを構成する CSS ルールのライブ更新されるリストにアクセスすることができます。
 
-> **メモ:** 古いプロパティなので、`rules`は使用せず、代わりに推奨される {{domxref("CSSStyleSheet.cssRules", "cssRules")}} を使用しましょう。
+> [!NOTE]
+> 古いプロパティなので、`rules`は使用せず、代わりに推奨される {{domxref("CSSStyleSheet.cssRules", "cssRules")}} を使用しましょう。
 > `rules` がすぐに削除される可能性は低いですが、利用できる範囲はそれほど広くなく、これを使用するとサイトやアプリの互換性に問題が発生します。
 
 ## 値
diff --git a/files/ja/web/api/cssvalue/csstext/index.md b/files/ja/web/api/cssvalue/csstext/index.md
index 4432118d22f32f..140cd7db35d348 100644
--- a/files/ja/web/api/cssvalue/csstext/index.md
+++ b/files/ja/web/api/cssvalue/csstext/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`cssText`** は {{domxref("CSSValue")}} インターフェイスのプロパティで、 CSS プロパティの現在の計算値を表します。
 
-> **メモ:** このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。
+> [!NOTE]
+> このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。
 >
 > 目的を達成するためには、次のものを利用することができます。
 >
diff --git a/files/ja/web/api/cssvalue/cssvaluetype/index.md b/files/ja/web/api/cssvalue/cssvaluetype/index.md
index a8f97dd9cbb3cd..30c4d08e0a27c1 100644
--- a/files/ja/web/api/cssvalue/cssvaluetype/index.md
+++ b/files/ja/web/api/cssvalue/cssvaluetype/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`cssValueType`** は {{domxref("CSSValue")}} インターフェイスの読み取り専用プロパティで、 CSS プロパティの現在の計算値の型を表します。
 
-> **メモ:** このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。
+> [!NOTE]
+> このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。
 >
 > 目的を達成するためには、次のものを利用することができます。
 >
diff --git a/files/ja/web/api/cssvalue/index.md b/files/ja/web/api/cssvalue/index.md
index 2b679abc05e958..a7aca7614ae836 100644
--- a/files/ja/web/api/cssvalue/index.md
+++ b/files/ja/web/api/cssvalue/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`CSSValue`** インターフェイスは、 CSS プロパティの現在の計算値を表します。
 
-> **メモ:** このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。
+> [!NOTE]
+> このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。
 >
 > 目的を達成するためには、次のものを利用することができます。
 >
diff --git a/files/ja/web/api/customelementregistry/define/index.md b/files/ja/web/api/customelementregistry/define/index.md
index f5bc0ca95a6f7b..c3490563b9e2ca 100644
--- a/files/ja/web/api/customelementregistry/define/index.md
+++ b/files/ja/web/api/customelementregistry/define/index.md
@@ -136,7 +136,8 @@ customElements.define("popup-info", PopUpInfo);
                                     numbers on the back of your card."></popup-info>
 ```
 
-> **メモ:** 自律カスタム要素のコンストラクターは {{domxref("HTMLElement")}} を継承していなければなりません。
+> [!NOTE]
+> 自律カスタム要素のコンストラクターは {{domxref("HTMLElement")}} を継承していなければなりません。
 
 ### カスタム組み込み要素
 
diff --git a/files/ja/web/api/customelementregistry/index.md b/files/ja/web/api/customelementregistry/index.md
index 9a9dab05e99728..9e8fbbdd0238b3 100644
--- a/files/ja/web/api/customelementregistry/index.md
+++ b/files/ja/web/api/customelementregistry/index.md
@@ -61,7 +61,8 @@ class WordCount extends HTMLParagraphElement {
 customElements.define("word-count", WordCount, { extends: "p" });
 ```
 
-> **メモ:** CustomElementsRegistry は {{domxref("Window.customElements")}} プロパティを通して利用可能です。
+> [!NOTE]
+> CustomElementsRegistry は {{domxref("Window.customElements")}} プロパティを通して利用可能です。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/datatransfer/addelement/index.md b/files/ja/web/api/datatransfer/addelement/index.md
index 520df2cc24195a..1821799ab84f3c 100644
--- a/files/ja/web/api/datatransfer/addelement/index.md
+++ b/files/ja/web/api/datatransfer/addelement/index.md
@@ -9,7 +9,8 @@ slug: Web/API/DataTransfer/addElement
 
 **`DataTransfer.addElement()`** メソッドは、与えられた要素にドラッグソースを設定します。この要素は {{domxref("HTMLElement/drag_event", "drag")}} と {{domxref("HTMLElement/dragend_event", "dragend")}} イベントが発生する要素となり、既定のターゲット（ドラッグされたノード）とはなりません。
 
-> **メモ:** このメソッドは Firefox 固有です。
+> [!NOTE]
+> このメソッドは Firefox 固有です。
 
 ## 構文
 
diff --git a/files/ja/web/api/datatransfer/cleardata/index.md b/files/ja/web/api/datatransfer/cleardata/index.md
index 5facaee9e8145a..e9dc3cf75e80c7 100644
--- a/files/ja/web/api/datatransfer/cleardata/index.md
+++ b/files/ja/web/api/datatransfer/cleardata/index.md
@@ -11,7 +11,8 @@ slug: Web/API/DataTransfer/clearData
 
 このメソッドはドラッグ操作からファイルを削除*しない*ので、ドラッグに含まれるファイルがある場合、 `"Files"` 型の項目がオブジェクトの {{domxref("DataTransfer.types")}} の一覧に残る可能性があります。
 
-> **メモ:** このメソッドは、 {{domxref("HTMLElement/dragstart_event", "dragstart")}} イベントのハンドラーでのみ使用できます。ドラッグ操作のデータストアが書き込み可能なのはその時だけだからです。
+> [!NOTE]
+> このメソッドは、 {{domxref("HTMLElement/dragstart_event", "dragstart")}} イベントのハンドラーでのみ使用できます。ドラッグ操作のデータストアが書き込み可能なのはその時だけだからです。
 
 ## 構文
 
diff --git a/files/ja/web/api/datatransfer/index.md b/files/ja/web/api/datatransfer/index.md
index 2601fe0701a437..b0bf0d123d4674 100644
--- a/files/ja/web/api/datatransfer/index.md
+++ b/files/ja/web/api/datatransfer/index.md
@@ -35,7 +35,8 @@ slug: Web/API/DataTransfer
 
 {{SeeCompatTable}}
 
-> **メモ:** この節のすべてのプロパティは Gecko 固有のものです。
+> [!NOTE]
+> この節のすべてのプロパティは Gecko 固有のものです。
 
 - {{domxref("DataTransfer.mozCursor")}}
   - : ドラッグカーソルの状態を返します。主にタブドラッグの際のカーソルを制御するのに使います。
@@ -66,7 +67,8 @@ slug: Web/API/DataTransfer
 
 {{Non-standard_header()}}
 
-> **メモ:** この節のすべてのメソッドは Gecko 固有のものです。
+> [!NOTE]
+> この節のすべてのメソッドは Gecko 固有のものです。
 
 - {{domxref("DataTransfer.addElement()")}}
   - : ドラッグ元の要素を指定します。
diff --git a/files/ja/web/api/datatransferitem/webkitgetasentry/index.md b/files/ja/web/api/datatransferitem/webkitgetasentry/index.md
index 31d16fc6f4c234..5a03216d3e44ad 100644
--- a/files/ja/web/api/datatransferitem/webkitgetasentry/index.md
+++ b/files/ja/web/api/datatransferitem/webkitgetasentry/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("DataTransferItem")}} で記述された項目がファイルの場合、 `webkitGetAsEntry()` はそれを表す {{domxref("FileSystemFileEntry")}} または {{domxref("FileSystemDirectoryEntry")}} を返します。ファイルでない場合は `null` を返します。
 
-> **メモ:** この関数は、現時点では Firefox を含む非 WebKit ブラウザーでは `webkitGetAsEntry()` として実装されています。将来的には `getAsEntry()` に改名される可能性があるので、両方の関数を探して防御的なコードを記述すべきです。
+> [!NOTE]
+> この関数は、現時点では Firefox を含む非 WebKit ブラウザーでは `webkitGetAsEntry()` として実装されています。将来的には `getAsEntry()` に改名される可能性があるので、両方の関数を探して防御的なコードを記述すべきです。
 
 ## 構文
 
@@ -86,7 +87,8 @@ body {
 最初に、再帰的な関数である `scanFiles()` を見ていきましょう。
 この関数は、スキャンして処理するファイルシステムの項目を表す {{domxref("FileSystemEntry")}} を入力として受け取り（`item` 引数）、その内容のリストを格納する要素（`container` 引数）を受け取ります。
 
-> **メモ:** ディレクトリー内のすべてのファイルを読み込むには、空の配列を返すまで `readEntries` を繰り返し呼び出す必要があります。
+> [!NOTE]
+> ディレクトリー内のすべてのファイルを読み込むには、空の配列を返すまで `readEntries` を繰り返し呼び出す必要があります。
 > Chromium ベースのブラウザーでは、以下の例では最大 100 件までしか返しません。
 
 ```js
diff --git a/files/ja/web/api/dedicatedworkerglobalscope/close/index.md b/files/ja/web/api/dedicatedworkerglobalscope/close/index.md
index 88108eabbde8d7..42a8e16e05be8d 100644
--- a/files/ja/web/api/dedicatedworkerglobalscope/close/index.md
+++ b/files/ja/web/api/dedicatedworkerglobalscope/close/index.md
@@ -33,7 +33,8 @@ close();
 
 `close()` と `self.close()` は事実上同じです。どちらも `close()` がワーカーの内部スコープから呼び出されることを表します。
 
-> **メモ:** メインスレッドからワーカーを停止する方法もあります。{{domxref("Worker.terminate")}} メソッドです。
+> [!NOTE]
+> メインスレッドからワーカーを停止する方法もあります。{{domxref("Worker.terminate")}} メソッドです。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/delaynode/delaytime/index.md b/files/ja/web/api/delaynode/delaytime/index.md
index 737bff83554104..18a2c797f17b12 100644
--- a/files/ja/web/api/delaynode/delaytime/index.md
+++ b/files/ja/web/api/delaynode/delaytime/index.md
@@ -12,7 +12,8 @@ l10n:
 
 `delayTime` は秒単位で表し、その最小値は `0` です。最大値は作成時に、 {{domxref("BaseAudioContext.createDelay")}} メソッドの `maxDelayTime` 引数で定義されます。
 
-> **メモ:** 返される {{domxref("AudioParam")}} は読み取り専用ですが、表している値はそうではありません。
+> [!NOTE]
+> 返される {{domxref("AudioParam")}} は読み取り専用ですが、表している値はそうではありません。
 
 ## 値
 
diff --git a/files/ja/web/api/device_orientation_events/index.md b/files/ja/web/api/device_orientation_events/index.md
index ccef0888216b11..c3069b1c75a3e0 100644
--- a/files/ja/web/api/device_orientation_events/index.md
+++ b/files/ja/web/api/device_orientation_events/index.md
@@ -23,7 +23,8 @@ l10n:
 
 - ジェスチャー認識 — 例えば、「シェイク」ジェスチャーを認識し、ユーザーが機器を振ったときに入力エリアをクリアするなどのアクションを実行するために使用します。
 
-> **メモ:** この API はモバイルブラウザーが広く対応しています。デスクトップ専用のブラウザーでは、ハードウェアの違いによる制約もありますが、センサーを搭載した端末でのこの API の主な用途を考えると、これらの制約が重要な意味を持つことはほとんどありません。
+> [!NOTE]
+> この API はモバイルブラウザーが広く対応しています。デスクトップ専用のブラウザーでは、ハードウェアの違いによる制約もありますが、センサーを搭載した端末でのこの API の主な用途を考えると、これらの制約が重要な意味を持つことはほとんどありません。
 
 ## インターフェイス
 
diff --git a/files/ja/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md b/files/ja/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
index fd82e0f61b25d9..ac89e58f3a5b0f 100644
--- a/files/ja/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
+++ b/files/ja/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
@@ -31,7 +31,8 @@ l10n:
 - **y** 軸は画面の水平面にあり、正の方向が上端側を、負の方向が下端側を指します。
 - **z** 軸は画面やキーボードに直交しており、正の方向が画面から外側へ伸びていきます。
 
-> **メモ:** 携帯電話やタブレットでは、端末の方向が常に画面の標準的な方向に対して考慮され、これは、ほとんどの端末では「ポートレート」 (縦) の方向になります。ノートパソコンでは、方向はキーボードに対して考慮されます。補正するために端末の方向の変化を検知したい場合は、 [`change`](/ja/docs/Web/API/ScreenOrientation/change_event) イベントが使用できます。
+> [!NOTE]
+> 携帯電話やタブレットでは、端末の方向が常に画面の標準的な方向に対して考慮され、これは、ほとんどの端末では「ポートレート」 (縦) の方向になります。ノートパソコンでは、方向はキーボードに対して考慮されます。補正するために端末の方向の変化を検知したい場合は、 [`change`](/ja/docs/Web/API/ScreenOrientation/change_event) イベントが使用できます。
 
 ## 回転について
 
diff --git a/files/ja/web/api/devicemotionevent/acceleration/index.md b/files/ja/web/api/devicemotionevent/acceleration/index.md
index 2f9cf0abef4b2d..cbdc01837bbc7c 100644
--- a/files/ja/web/api/devicemotionevent/acceleration/index.md
+++ b/files/ja/web/api/devicemotionevent/acceleration/index.md
@@ -11,7 +11,8 @@ l10n:
 **`acceleration`** プロパティは、端末によって記録された加速度の量を[メートル毎秒毎秒 (m/s²)](https://ja.wikipedia.org/wiki/メートル毎秒毎秒)単位で返します。
 {{DOMxRef("DeviceMotionEvent.accelerationIncludingGravity")}} とは異なり、加速度値は重力の影響を含みません。
 
-> **メモ:** ハードウェアが加速度データから重力を除去する方法を知らない場合、{{DOMxRef("DeviceMotionEvent")}} にこの値が存在しないことがあります。この場合、代わりに {{DOMxRef("DeviceMotionEvent.accelerationIncludingGravity")}} を使用する必要があります。
+> [!NOTE]
+> ハードウェアが加速度データから重力を除去する方法を知らない場合、{{DOMxRef("DeviceMotionEvent")}} にこの値が存在しないことがあります。この場合、代わりに {{DOMxRef("DeviceMotionEvent.accelerationIncludingGravity")}} を使用する必要があります。
 
 ## 値
 
diff --git a/files/ja/web/api/devicemotionevent/index.md b/files/ja/web/api/devicemotionevent/index.md
index 4cdb4f8eebeb78..15c8fcaf7cf56b 100644
--- a/files/ja/web/api/devicemotionevent/index.md
+++ b/files/ja/web/api/devicemotionevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`DeviceMotionEvent`** インターフェイスは、ウェブ開発者に端末の位置と方向の変化のスピードに関する情報を提供します。
 
-> **警告:** 現在、Firefox と Chrome は同じ方法で座標を処理しません。これらを使用する際は、注意してください。
+> [!WARNING]
+> 現在、Firefox と Chrome は同じ方法で座標を処理しません。これらを使用する際は、注意してください。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/devicemotionevent/rotationrate/index.md b/files/ja/web/api/devicemotionevent/rotationrate/index.md
index 00fad09de511bd..8f125b13ba5175 100644
--- a/files/ja/web/api/devicemotionevent/rotationrate/index.md
+++ b/files/ja/web/api/devicemotionevent/rotationrate/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`DeviceMotionEvent.rotationRate`** は読み取り専用プロパティで、端末がそれぞれの軸を中心に回転している秒あたりの角度を返します。
 
-> **メモ:** ハードウェアがこの情報を提供できない場合、このプロパティは `null` を返します。
+> [!NOTE]
+> ハードウェアがこの情報を提供できない場合、このプロパティは `null` を返します。
 
 ## 値
 
diff --git a/files/ja/web/api/directoryentrysync/index.md b/files/ja/web/api/directoryentrysync/index.md
index 70b26242d5db38..28bedb8fd4ac72 100644
--- a/files/ja/web/api/directoryentrysync/index.md
+++ b/files/ja/web/api/directoryentrysync/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `DirectoryEntrySync` インターフェイスは、ファイルシステム内のディレクトリーを表します。ディレクトリー内のファイルの作成、読み込み、検索、および再帰的に削除するためのメソッドが含まれています。
 
-> **メモ:** このインターフェイスは非推奨で、標準路線ではなくなりました。
+> [!NOTE]
+> このインターフェイスは非推奨で、標準路線ではなくなりました。
 > _もう使用しないでください。_ 代わりに[ファイルおよびディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)を使用してください。
 
 ## 基本的なコンセプト
diff --git a/files/ja/web/api/document/activeelement/index.md b/files/ja/web/api/document/activeelement/index.md
index 5992af29790894..126eea93a9f3f9 100644
--- a/files/ja/web/api/document/activeelement/index.md
+++ b/files/ja/web/api/document/activeelement/index.md
@@ -15,7 +15,8 @@ l10n:
 
 通常、ユーザーはタブキーを押して、フォーカス可能な要素間でページ内のフォーカスを移動させ、スペースバーを使用して 1 つの要素をアクティブにします（つまり、ボタンを押したり、ラジオボタンをトグル切り替えしたりします）。どの要素にフォーカスが当たるかは、プラットフォームやブラウザーの現在の設定によって異なります。例えば、 macOS システムでは通常、既定では、テキスト入力要素以外の要素はフォーカスされません。
 
-> **メモ:** フォーカス（どの要素がユーザー入力イベントを受信しているか）と選択範囲（文書内で現在強調表示されている部分）は同じものではありません。現在の選択範囲は {{domxref("window.getSelection()")}} で取得することができます。
+> [!NOTE]
+> フォーカス（どの要素がユーザー入力イベントを受信しているか）と選択範囲（文書内で現在強調表示されている部分）は同じものではありません。現在の選択範囲は {{domxref("window.getSelection()")}} で取得することができます。
 
 ## 値
 
diff --git a/files/ja/web/api/document/adoptedstylesheets/index.md b/files/ja/web/api/document/adoptedstylesheets/index.md
index f88ea6e5583b1a..fc915cf0e5198a 100644
--- a/files/ja/web/api/document/adoptedstylesheets/index.md
+++ b/files/ja/web/api/document/adoptedstylesheets/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`adoptedStyleSheets`** は {{domxref("Document")}} インターフェイスのプロパティで、この文書で使用する構築されたスタイルシートの配列を設定するために使用します。
 
-> **メモ:** 構築されたスタイルシートとは、[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を用いてプログラムで作成されたスタイルシートのことです（ユーザーエージェントがスクリプトからスタイルシートをインポートしたり、{{HTMLElement('style')}} や {{CSSXref('@import')}} を使用してインポートしたり、{{HTMLElement('link')}} でリンクしたりする場合に作成されるスタイルシートとは異なります）。
+> [!NOTE]
+> 構築されたスタイルシートとは、[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を用いてプログラムで作成されたスタイルシートのことです（ユーザーエージェントがスクリプトからスタイルシートをインポートしたり、{{HTMLElement('style')}} や {{CSSXref('@import')}} を使用してインポートしたり、{{HTMLElement('link')}} でリンクしたりする場合に作成されるスタイルシートとは異なります）。
 
 このスタイルシートは、[`ShadowRoot.adoptedStyleSheets`](/ja/docs/Web/API/ShadowRoot/adoptedStyleSheets) プロパティを使用して、1 つ以上の {{domxref("ShadowRoot")}} インスタンスと共有することもできます。
 このスタイルシートを変更すると、それを採用しているすべてのオブジェクトに影響します。
diff --git a/files/ja/web/api/document/browsingtopics/index.md b/files/ja/web/api/document/browsingtopics/index.md
index 7797f37fdbd92f..e132cdc85ffc46 100644
--- a/files/ja/web/api/document/browsingtopics/index.md
+++ b/files/ja/web/api/document/browsingtopics/index.md
@@ -8,9 +8,11 @@ l10n:
 
 {{APIRef("Topics API")}}{{SeeCompatTable}}{{non-standard_header}}
 
-> **警告:** この機能は現在2つのブラウザーベンダーによって反対されています。反対の詳細については下記の[標準の位置づけ](/ja/docs/Web/API/Topics_API#standards_positions)の節を参照してください。
+> [!WARNING]
+> この機能は現在2つのブラウザーベンダーによって反対されています。反対の詳細については下記の[標準の位置づけ](/ja/docs/Web/API/Topics_API#standards_positions)の節を参照してください。
 
-> **メモ:** アプリケーションでこの機能を使用するには、[登録プロセス](/ja/docs/Web/Privacy/Privacy_sandbox/Enrollment)が要求されます。
+> [!NOTE]
+> アプリケーションでこの機能を使用するには、[登録プロセス](/ja/docs/Web/Privacy/Privacy_sandbox/Enrollment)が要求されます。
 
 `browsingTopics()` は {{domxref("Document")}} インターフェイスのメソッドで、ユーザーのトップトピックを表すオブジェクトの配列で履行されるプロミスを返します。これらのトピックは、その後のフェッチリクエストで広告技術プラットフォームに返すことができます。既定では、このメソッドは呼び出し側が監視する現在のページ訪問をブラウザーに記録するので、ページのホスト名を後でトピックの計算に使用することができます。
 
diff --git a/files/ja/web/api/document/characterset/index.md b/files/ja/web/api/document/characterset/index.md
index d7b3a8cd6f62e2..cb4659d26d92e8 100644
--- a/files/ja/web/api/document/characterset/index.md
+++ b/files/ja/web/api/document/characterset/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Document.characterSet`** プロパティは読み取り専用で、この文書の現在の表示に使われている[文字エンコーディング](/ja/docs/Glossary/Character_encoding)を表す文字列を返します。
 
-> **メモ:** 「文字セット」と「文字エンコーディング」は似ていますが違うものです。プロパティ名に反してエンコーディングを返します。
+> [!NOTE]
+> 「文字セット」と「文字エンコーディング」は似ていますが違うものです。プロパティ名に反してエンコーディングを返します。
 
 ## 値
 
diff --git a/files/ja/web/api/document/compatmode/index.md b/files/ja/web/api/document/compatmode/index.md
index 5a4e2fd50dbd5c..228ae64467e0a2 100644
--- a/files/ja/web/api/document/compatmode/index.md
+++ b/files/ja/web/api/document/compatmode/index.md
@@ -17,7 +17,8 @@ l10n:
 - "`BackCompat`" 文書が後方互換モードの場合。
 - "`CSS1Compat`" 文書が後方互換モードでない（標準準拠モードとも呼ばれる）または限定互換モード（「ほぼ標準準拠」モードとも呼ばれる）場合。
 
-> **メモ:** これらのモードはすべて標準で定義されましたので、より古い "standards" および "almost standards" の名前は無意味であり、もう標準では使用されません。
+> [!NOTE]
+> これらのモードはすべて標準で定義されましたので、より古い "standards" および "almost standards" の名前は無意味であり、もう標準では使用されません。
 
 ## 例
 
diff --git a/files/ja/web/api/document/contenttype/index.md b/files/ja/web/api/document/contenttype/index.md
index 89446afa319258..b3fcc54115da3d 100644
--- a/files/ja/web/api/document/contenttype/index.md
+++ b/files/ja/web/api/document/contenttype/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Document.contentType`** プロパティは読み取り専用で、文書がレンダリングされる MIME タイプを返します。これは HTTP ヘッダーやその他の MIME 情報のソースから来る可能性があり、ブラウザーや拡張機能によって行われる自動型変換の影響を受ける可能性があります。
 
-> **メモ:** このプロパティは {{HTMLElement("meta")}} 要素には影響されません。
+> [!NOTE]
+> このプロパティは {{HTMLElement("meta")}} 要素には影響されません。
 
 ### 値
 
diff --git a/files/ja/web/api/document/cookie/index.md b/files/ja/web/api/document/cookie/index.md
index dd84a229b2650f..790d5c238d10b0 100644
--- a/files/ja/web/api/document/cookie/index.md
+++ b/files/ja/web/api/document/cookie/index.md
@@ -37,12 +37,14 @@ document.cookie = newCookie;
     ドメインが指定されれば、サブドメインも常に含まれます。
     初期の仕様とは対照的に、ドメイン名の前のドットは無視されますが、ブラウザーはその様なドットを含むクッキーの設定を辞退することができます。
 
-    > **メモ:** ドメインは JavaScript のオリジンと一致している*必要があります*。
+    > [!NOTE]
+    > ドメインは JavaScript のオリジンと一致している*必要があります*。
     > 外部ドメインへのクッキーの設定は暗黙に無視されます。
 
   - `;expires=date-in-GMTString-format`: クッキーの期限です。もし `expires` も `max-age` も指定されていなければ、有効期限はセッションの終了までになります。
 
-    > **警告:** ユーザーのプライバシーを考慮するのであれば、ブラウザーの有効期限の管理に頼るのではなく、ウェブアプリの実装で指定した期間の経過後にクッキーを無効化することが重要です。
+    > [!WARNING]
+    > ユーザーのプライバシーを考慮するのであれば、ブラウザーの有効期限の管理に頼るのではなく、ウェブアプリの実装で指定した期間の経過後にクッキーを無効化することが重要です。
     > 多くのブラウザーはユーザーがクッキーを無期限に設定することができますが、これは安全ではありません。
 
     - 値の形式について知りたい方は、 {{jsxref("Date.toUTCString()")}} をご覧ください。
@@ -73,11 +75,14 @@ document.cookie = newCookie;
     これは、クッキーが他のドメインに送出されることを防ぐために、 domain 属性が存在してはいけないことも指示します。
     Chrome では、 path 属性は常にオリジンになります。
 
-  > **メモ:** ダッシュは接頭辞の一部とみなされます。
+  > [!NOTE]
+  > ダッシュは接頭辞の一部とみなされます。
 
-  > **メモ:** これらのフラグは `secure` 属性と一緒の場合のみ設定できます。
+  > [!NOTE]
+  > これらのフラグは `secure` 属性と一緒の場合のみ設定できます。
 
-> **メモ:** 上記のコードに見られるように、 `document.cookie` はネイティブの*セッター*及び*ゲッター*を持つ[アクセサープロパティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#description)であり、値を持つ [データプロパティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#description)では*ありません*。書き込んだものと読みこんだものは同じにはならず、常に JavaScript インタープリターに仲介されます。
+> [!NOTE]
+> 上記のコードに見られるように、 `document.cookie` はネイティブの*セッター*及び*ゲッター*を持つ[アクセサープロパティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#description)であり、値を持つ [データプロパティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#description)では*ありません*。書き込んだものと読みこんだものは同じにはならず、常に JavaScript インタープリターに仲介されます。
 
 ## 例
 
diff --git a/files/ja/web/api/document/createattribute/index.md b/files/ja/web/api/document/createattribute/index.md
index de97772b014a51..e9826e5f278aa9 100644
--- a/files/ja/web/api/document/createattribute/index.md
+++ b/files/ja/web/api/document/createattribute/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Document.createAttribute()`** は、新しい属性ノードを生成して返します。生成されたオブジェクトは {{domxref("Attr")}} を実装したノードです。この方法では DOM は、特定の要素にどんな種類の属性を追加できるかを強制しません。
 
-> **メモ:** 引数に渡される文字列は小文字に変換されます。
+> [!NOTE]
+> 引数に渡される文字列は小文字に変換されます。
 
 ## 構文
 
diff --git a/files/ja/web/api/document/createelement/index.md b/files/ja/web/api/document/createelement/index.md
index d60538fce3fd5b..15108d37658b52 100644
--- a/files/ja/web/api/document/createelement/index.md
+++ b/files/ja/web/api/document/createelement/index.md
@@ -31,7 +31,8 @@ createElement(tagName, options)
 
 新しい {{domxref("Element")}} です。
 
-> **メモ:** 文書が {{domxref("HTMLDocument", "HTMLDocument", "", "1")}} である場合、新しい {{domxref("HTMLElement", "HTMLElement", "", "1")}} を返しますが、これが最も一般的です。それ以外の場合は新しい {{domxref("Element","Element","","1")}} を返します。
+> [!NOTE]
+> 文書が {{domxref("HTMLDocument", "HTMLDocument", "", "1")}} である場合、新しい {{domxref("HTMLElement", "HTMLElement", "", "1")}} を返しますが、これが最も一般的です。それ以外の場合は新しい {{domxref("Element","Element","","1")}} を返します。
 
 ## 例
 
diff --git a/files/ja/web/api/document/createelementns/index.md b/files/ja/web/api/document/createelementns/index.md
index 11685b050ecfc8..062a6b7902afb9 100644
--- a/files/ja/web/api/document/createelementns/index.md
+++ b/files/ja/web/api/document/createelementns/index.md
@@ -91,7 +91,8 @@ createElementNS(namespaceURI, qualifiedName, options)
 </page>
 ```
 
-> **メモ:** 上記の例は XHTML 文書では推奨されていないインラインスクリプトを使用しています。この部分的な例は実際には XUL 文書に埋め込んだ XHTML があるものですが、それでもこの推奨事項は適用されます。
+> [!NOTE]
+> 上記の例は XHTML 文書では推奨されていないインラインスクリプトを使用しています。この部分的な例は実際には XUL 文書に埋め込んだ XHTML があるものですが、それでもこの推奨事項は適用されます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/createtouch/index.md b/files/ja/web/api/document/createtouch/index.md
index 8c14a567d7643e..1966fe3ea509b5 100644
--- a/files/ja/web/api/document/createtouch/index.md
+++ b/files/ja/web/api/document/createtouch/index.md
@@ -20,7 +20,8 @@ createTouch(view, target, identifier, pageX, pageY, screenX, screenY)
 
 ### 引数
 
-> **メモ:** すべての引数が省略可能です。
+> [!NOTE]
+> すべての引数が省略可能です。
 
 - `view`
   - : タッチが発生した {{DOMxRef("window")}} です。
@@ -37,7 +38,8 @@ createTouch(view, target, identifier, pageX, pageY, screenX, screenY)
 - `screenY`
   - : {{DOMxRef("Touch.screenY")}} の値です。
 
-> **メモ:** このメソッドの以前のバージョンでは、以下の追加の引数を含んでいましたが、これらの引数は下記の標準のいずれにも含まれていません。従って、これらの引数は非推奨であり、使用されないと考えてください。
+> [!NOTE]
+> このメソッドの以前のバージョンでは、以下の追加の引数を含んでいましたが、これらの引数は下記の標準のいずれにも含まれていません。従って、これらの引数は非推奨であり、使用されないと考えてください。
 
 - `clientX`
   - : {{DOMxRef("Touch.clientX")}} の値です。
diff --git a/files/ja/web/api/document/domcontentloaded_event/index.md b/files/ja/web/api/document/domcontentloaded_event/index.md
index 2a84ebf5caf839..2dcf14bf2354f0 100644
--- a/files/ja/web/api/document/domcontentloaded_event/index.md
+++ b/files/ja/web/api/document/domcontentloaded_event/index.md
@@ -70,7 +70,8 @@ if (document.readyState === "loading") {
 }
 ```
 
-> **メモ:** ここでは競合条件はありません。 `if` チェックと `addEventListener()` 呼び出しの間に文書が読み込まれることはあり得ません。JavaScript には run-to-completion という意味づけがあります。つまり、イベントループのある特定のタイミングで文書が読み込まれていたとしても、次のサイクルまで読み込まれることはなく、その時には `doSomething` ハンドラーはすでに取り付けられており、発生します。
+> [!NOTE]
+> ここでは競合条件はありません。 `if` チェックと `addEventListener()` 呼び出しの間に文書が読み込まれることはあり得ません。JavaScript には run-to-completion という意味づけがあります。つまり、イベントループのある特定のタイミングで文書が読み込まれていたとしても、次のサイクルまで読み込まれることはなく、その時には `doSomething` ハンドラーはすでに取り付けられており、発生します。
 
 ### ライブサンプル
 
diff --git a/files/ja/web/api/document/evaluate/index.md b/files/ja/web/api/document/evaluate/index.md
index 44252c5e7f632e..b8887c6ebca3d8 100644
--- a/files/ja/web/api/document/evaluate/index.md
+++ b/files/ja/web/api/document/evaluate/index.md
@@ -43,24 +43,28 @@ evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result)
       - : 単一の論理値を含む結果セット。例えば、 `not()` 関数を使用した _xpath_ 式に有用です。
     - `UNORDERED_NODE_ITERATOR_TYPE` (`4`)
       - : 式に一致するすべてのノードを含む結果セット。結果セット内のノードは、必ずしも文書内に現れる順番とは限りません。
-        > **メモ:** この型の結果は、文書内のノードへの参照を格納します。
+        > [!NOTE]
+        > この型の結果は、文書内のノードへの参照を格納します。
         > ノードを変更すると、イテレーターは無効になります。
         > ノードを変更した後、結果を反復処理しようとするとエラーになります。
     - `ORDERED_NODE_ITERATOR_TYPE` (`5`)
       - : 式に一致するすべてのノードを含む結果セット。結果セット内のノードは、文書内に現れる順序と同じです。
-        > **メモ:** この型の結果は、文書内のノードへの参照を格納します。
+        > [!NOTE]
+        > この型の結果は、文書内のノードへの参照を格納します。
         > ノードを変更すると、イテレーターは無効になります。
         > ノードを変更した後、結果を反復処理しようとするとエラーになります。
     - `UNORDERED_NODE_SNAPSHOT_TYPE` (`6`)
       - : 式に一致するすべてのノードのスナップショットを格納した結果セット。結果セット内のノードは、必ずしも文書内のノードと同じ順序ではありません。
-        > **メモ:** この型の結果はスナップショットで、基本的に一致するノードのリストです。
+        > [!NOTE]
+        > この型の結果はスナップショットで、基本的に一致するノードのリストです。
         > スナップショットノードを変更することで、文書に変更を加えることができます。
         > 文書を変更してもスナップショットは無効にはなりません。
         > しかし、文書が変更された場合、スナップショットは文書の現在の状態と一致しないことがあります。
         > ノードが移動されたり、変更されたり、追加されたり、除去されたりすることがあるからです。
     - `ORDERED_NODE_SNAPSHOT_TYPE` (`7`)
       - : 式に一致するすべてのノードのスナップショットを含む結果セット。結果セット内のノードは、文書内に現れる順序と同じです。
-        > **メモ:** この型の結果はスナップショットで、基本的に一致するノードのリストです。
+        > [!NOTE]
+        > この型の結果はスナップショットで、基本的に一致するノードのリストです。
         > スナップショットノードを変更することで、文書に変更を加えることができます。
         > 文書を変更してもスナップショットは無効にはなりません。
         > しかし、文書が変更された場合、スナップショットは文書の現在の状態と一致しないことがあります。
diff --git a/files/ja/web/api/document/execcommand/index.md b/files/ja/web/api/document/execcommand/index.md
index ac8946fead68e4..97816e9fc19de1 100644
--- a/files/ja/web/api/document/execcommand/index.md
+++ b/files/ja/web/api/document/execcommand/index.md
@@ -121,7 +121,8 @@ execCommand(aCommandName, aShowDefaultUI, aValueArgument)
     - `useCSS` {{Deprecated_inline}}
 
       - : 生成するマークアップに HTML タグと CSS のどちらを使用するかを切り替えます。引数として true または false の真偽値が必要です。
-        > **メモ:** この引数は論理が逆です（つまり、`false` で CSS が使用され、`true` で HTML が使用される）。これは `styleWithCSS` に置き換えられ、非推奨になりました。
+        > [!NOTE]
+        > この引数は論理が逆です（つまり、`false` で CSS が使用され、`true` で HTML が使用される）。これは `styleWithCSS` に置き換えられ、非推奨になりました。
 
     - `styleWithCSS`
       - : `useCSS` コマンドを置き換えるものです。`true` はマークアップ時に `style` 属性が生成または変更され、false では書式要素が生成されます。
diff --git a/files/ja/web/api/document/exitfullscreen/index.md b/files/ja/web/api/document/exitfullscreen/index.md
index 85b031ff3f862e..a7b5de5dbad423 100644
--- a/files/ja/web/api/document/exitfullscreen/index.md
+++ b/files/ja/web/api/document/exitfullscreen/index.md
@@ -41,7 +41,8 @@ document.onclick = (event) => {
 };
 ```
 
-> **メモ:** もっと完全な例については、[`Element.requestFullscreen()` の例](/ja/docs/Web/API/Element/requestFullscreen#%E4%BE%8B)をご覧ください。
+> [!NOTE]
+> もっと完全な例については、[`Element.requestFullscreen()` の例](/ja/docs/Web/API/Element/requestFullscreen#%E4%BE%8B)をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/forms/index.md b/files/ja/web/api/document/forms/index.md
index 40ba94b4ea88e0..854d8a84a93995 100644
--- a/files/ja/web/api/document/forms/index.md
+++ b/files/ja/web/api/document/forms/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`forms`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、文書内に含まれるすべての {{HTMLElement("form")}} を列挙した {{domxref("HTMLCollection")}} を返します。
 
-> **メモ:** 同様に、{{domxref("HTMLFormElement.elements")}} プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。
+> [!NOTE]
+> 同様に、{{domxref("HTMLFormElement.elements")}} プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。
 
 ## 値
 
diff --git a/files/ja/web/api/document/fullscreen/index.md b/files/ja/web/api/document/fullscreen/index.md
index 2374a160270209..05c3e8f0ae034c 100644
--- a/files/ja/web/api/document/fullscreen/index.md
+++ b/files/ja/web/api/document/fullscreen/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このプロパティは読み取り専用ですが、変更されても（厳格モードでも）例外を投げません。セッターは何もしないので、無視されます。
 
-> **メモ:** このプロパティは非推奨であり、文書が全画面モードになっているかどうかは、 {{DOMxRef("Document.fullscreenElement")}} が `null` ではないことで確認することができます。
+> [!NOTE]
+> このプロパティは非推奨であり、文書が全画面モードになっているかどうかは、 {{DOMxRef("Document.fullscreenElement")}} が `null` ではないことで確認することができます。
 
 ## 返値
 
diff --git a/files/ja/web/api/document/getelementbyid/index.md b/files/ja/web/api/document/getelementbyid/index.md
index 19eaa974b7dcf8..1626a3499cb243 100644
--- a/files/ja/web/api/document/getelementbyid/index.md
+++ b/files/ja/web/api/document/getelementbyid/index.md
@@ -12,7 +12,8 @@ l10n:
 
 ID を持たない要素にアクセスする必要がある場合は、 {{domxref("Document.querySelector", "querySelector()")}} で何らかの{{Glossary("CSS selector", "セレクター")}}を使用して要素を検索することができます。
 
-> **メモ:** ID は文書内で固有である必要があります。単一の文書内で 2 つ以上の要素が同じ ID であった場合、このメソッドは最初に見つかった要素を返します。
+> [!NOTE]
+> ID は文書内で固有である必要があります。単一の文書内で 2 つ以上の要素が同じ ID であった場合、このメソッドは最初に見つかった要素を返します。
 
 ## 構文
 
@@ -20,7 +21,8 @@ ID を持たない要素にアクセスする必要がある場合は、 {{domxr
 getElementById(id)
 ```
 
-> **メモ:** メソッド名における `"Id"` の部分は、関数のコードに対して正しくなければなりません。 `getElementByID()` は自然に見えるかもしれませんが、正しくなく動作しません。
+> [!NOTE]
+> メソッド名における `"Id"` の部分は、関数のコードに対して正しくなければなりません。 `getElementByID()` は自然に見えるかもしれませんが、正しくなく動作しません。
 
 ### 引数
 
diff --git a/files/ja/web/api/document/getelementsbyclassname/index.md b/files/ja/web/api/document/getelementsbyclassname/index.md
index 6e4060eabf7d8d..53b72d78fe9a15 100644
--- a/files/ja/web/api/document/getelementsbyclassname/index.md
+++ b/files/ja/web/api/document/getelementsbyclassname/index.md
@@ -12,7 +12,8 @@ l10n:
 
 {{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。
 
-> **警告:** これは生きた {{domxref("HTMLCollection")}} です。DOM の変更は、その都度配列に反映されます。この配列で選択された要素がセレクターに該当しなくなった場合は、 自動的に除去されます。反復処理する際には、このことに注意しましょう。
+> [!WARNING]
+> これは生きた {{domxref("HTMLCollection")}} です。DOM の変更は、その都度配列に反映されます。この配列で選択された要素がセレクターに該当しなくなった場合は、 自動的に除去されます。反復処理する際には、このことに注意しましょう。
 
 ## 構文
 
diff --git a/files/ja/web/api/document/getelementsbytagnamens/index.md b/files/ja/web/api/document/getelementsbytagnamens/index.md
index 9bf488e83d02a3..c09d50eaf25dfd 100644
--- a/files/ja/web/api/document/getelementsbytagnamens/index.md
+++ b/files/ja/web/api/document/getelementsbytagnamens/index.md
@@ -27,11 +27,13 @@ getElementsByTagNameNS(namespace, name)
 
 見つかった要素の生きた {{DOMxRef("NodeList")}}（但し下記のメモを参照）で、ツリーに現れる順です。
 
-> **メモ:** W3C の仕様書では返値は `NodeList` であるとされていますが、Firefox ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。
+> [!NOTE]
+> W3C の仕様書では返値は `NodeList` であるとされていますが、Firefox ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。
 > Opera は `NodeList` を返しますが、 `namedItem` メソッドを実装しているので、 `HTMLCollection` と同様になります。2012 年 1 月時点で、 WebKit ブラウザーのみが純粋な `NodeList` の値を返します。
 > 詳しくは [bug 14869](https://bugzil.la/14869) を参照してください。
 
-> **メモ:** 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。
+> [!NOTE]
+> 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。
 > 詳しくは [Firefox 3.6 の開発者リリースノート](/ja/docs/Mozilla/Firefox/Releases/3.6#dom)および {{domxref("Element.getElementsByTagNameNS")}} のブラウザーの互換性のメモをご覧ください。
 
 ## 例
diff --git a/files/ja/web/api/document/hasfocus/index.md b/files/ja/web/api/document/hasfocus/index.md
index dd9c9ccbf05ef9..6f5d48c71db466 100644
--- a/files/ja/web/api/document/hasfocus/index.md
+++ b/files/ja/web/api/document/hasfocus/index.md
@@ -11,7 +11,8 @@ l10n:
 **`hasFocus()`** は {{domxref("Document")}} インターフェイスのメソッドで、文書または文書内の何れかの要素がフォーカスを持っているかどうかを示す論理値を返します。
 このメソッドは、文書内のアクティブな要素がフォーカスを持っているかどうかを特定するために使用することができます。
 
-> **メモ:** 文書を見ている時、文書内でフォーカスを持つ要素は常に[アクティブ要素](/ja/docs/Web/API/Document/activeElement)ですが、アクティブ要素がフォーカスを持っているとは限りません。
+> [!NOTE]
+> 文書を見ている時、文書内でフォーカスを持つ要素は常に[アクティブ要素](/ja/docs/Web/API/Document/activeElement)ですが、アクティブ要素がフォーカスを持っているとは限りません。
 > 例えば、フォアグラウンドになっていないポップアップウィンドウ内のアクティブ要素はフォーカスを持ちません。
 
 ## 構文
diff --git a/files/ja/web/api/document/hasstorageaccess/index.md b/files/ja/web/api/document/hasstorageaccess/index.md
index 5a16798d1bed65..a77ebb83f9dbb3 100644
--- a/files/ja/web/api/document/hasstorageaccess/index.md
+++ b/files/ja/web/api/document/hasstorageaccess/index.md
@@ -12,7 +12,8 @@ l10n:
 
 詳しくは [ストレージアクセス API](/ja/docs/Web/API/Storage_Access_API) を参照してください。
 
-> **メモ:** このメソッドは {{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} の別名です。{{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} のためにこのメソッドを削除する予定はありません。
+> [!NOTE]
+> このメソッドは {{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} の別名です。{{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} のためにこのメソッドを削除する予定はありません。
 
 ## 構文
 
@@ -33,7 +34,8 @@ hasStorageAccess()
 1. ユーザーがサードパーティクッキーをブロックするブラウザー設定をアクティブにしている場合があります。この場合、サードパーティのクッキーにはまだアクセスできないにもかかわらず、`true` が返されるかもしれません。このような状況を処理するには、クッキーの値が回復不可能になるようなエラーを適切に処理しなければなりません。例えば、個人設定へのアクセスがブロックされていることをユーザーに知らせ、それを使用するには再度サインインするよう促してください。
 2. ブラウザーは既定で、サードパーティクッキーへのアクセスをブロックしない場合があります。この場合、サードパーティクッキーがアクセス可能であっても `false` が返されるかもしれませんし、ストレージへのアクセスは（つまり {{domxref("Document.requestStorageAccess()")}} を通して）リクエストされる必要はないでしょう。この課題を回避するには、{{domxref("Document.cookie")}} に問い合わせてクッキーがアクセス可能かどうかを探し、アクセス可能でない場合は {{domxref("Document.requestStorageAccess()")}} を呼び出します。
 
-> **メモ:** プロミスが解決され、関数が元々呼び出されたときにユーザージェスチャーイベントが処理されていた場合、解決ハンドラーはユーザーによるジェスチャーが処理されているかのように実行サレルるので、ユーザーによるアクティブ化が要求される API を呼び出すことができます。
+> [!NOTE]
+> プロミスが解決され、関数が元々呼び出されたときにユーザージェスチャーイベントが処理されていた場合、解決ハンドラーはユーザーによるジェスチャーが処理されているかのように実行サレルるので、ユーザーによるアクティブ化が要求される API を呼び出すことができます。
 
 ### 例外
 
@@ -55,7 +57,8 @@ document.hasStorageAccess().then((hasAccess) => {
 });
 ```
 
-> **メモ:** より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
+> [!NOTE]
+> より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md b/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md
index 88348fcffd7b78..c1214088c99045 100644
--- a/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md
+++ b/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md
@@ -50,7 +50,8 @@ document.hasUnpartitionedCookieAccess().then((hasAccess) => {
 });
 ```
 
-> **メモ:** より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
+> [!NOTE]
+> より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/implementation/index.md b/files/ja/web/api/document/implementation/index.md
index 5339a86804cc30..a22fd5fcf90425 100644
--- a/files/ja/web/api/document/implementation/index.md
+++ b/files/ja/web/api/document/implementation/index.md
@@ -26,7 +26,8 @@ console.log(`DOM ${modName} ${modVer} supported?: ${conformTest}`);
 // ログ: "DOM HTML 2.0 supported?: true" （hasFeature は常に true を返す）
 ```
 
-> **警告:** これを昨日検出に使用しないでください。 `hasFeature()` メソッドは常に true を返します。
+> [!WARNING]
+> これを昨日検出に使用しないでください。 `hasFeature()` メソッドは常に true を返します。
 
 ## メモ
 
diff --git a/files/ja/web/api/document/importnode/index.md b/files/ja/web/api/document/importnode/index.md
index d68bf63c6e766d..1cc1bd268f8440 100644
--- a/files/ja/web/api/document/importnode/index.md
+++ b/files/ja/web/api/document/importnode/index.md
@@ -54,7 +54,8 @@ document.getElementById("container").appendChild(newNode);
 - {{domXref("document.importNode()")}} でクローンする、または
 - {{domXref("document.adoptNode()")}} で移行する
 
-> **メモ:** Firefox は今のところこのルールを強制していませんが、将来の互換性を改善するために、このルールに従うことを強く推奨します。
+> [!NOTE]
+> Firefox は今のところこのルールを強制していませんが、将来の互換性を改善するために、このルールに従うことを強く推奨します。
 
 {{domXref("Node.ownerDocument")}} の問題に関して詳しくは、W3C DOM FAQ を参照してください。
 
diff --git a/files/ja/web/api/document/laststylesheetset/index.md b/files/ja/web/api/document/laststylesheetset/index.md
index 374b72b3ab9146..2491ea4e4f02d9 100644
--- a/files/ja/web/api/document/laststylesheetset/index.md
+++ b/files/ja/web/api/document/laststylesheetset/index.md
@@ -14,7 +14,8 @@ l10n:
 
 最も新しく設定されたスタイルシートセットを示します。現在のスタイルシートセットが {{domxref("document.selectedStyleSheetSet")}} を設定することで変更されたものでない場合、返値は `null` になります。
 
-> **メモ:** この値は {{domxref("document.enableStyleSheetsForSet()")}} が呼び出された時に変化しません。
+> [!NOTE]
+> この値は {{domxref("document.enableStyleSheetsForSet()")}} が呼び出された時に変化しません。
 
 ## 例
 
diff --git a/files/ja/web/api/document/plugins/index.md b/files/ja/web/api/document/plugins/index.md
index 53fafba2310ed6..027bfbaa8e0d2e 100644
--- a/files/ja/web/api/document/plugins/index.md
+++ b/files/ja/web/api/document/plugins/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`plugins`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、現在の文書内にある {{HTMLElement("embed")}} 要素を表す 1 つ以上の {{domxref("HTMLEmbedElement")}} を含んだ {{domxref("HTMLCollection")}} オブジェクトを返します。
 
-> **メモ:** インストールされているプラグインの一覧には、このメソッドでなく [Navigator.plugins](/ja/docs/Web/API/Navigator/plugins) を使用してください。
+> [!NOTE]
+> インストールされているプラグインの一覧には、このメソッドでなく [Navigator.plugins](/ja/docs/Web/API/Navigator/plugins) を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/document/prerenderingchange_event/index.md b/files/ja/web/api/document/prerenderingchange_event/index.md
index 33500cd30e06fe..20c05e5166b9c7 100644
--- a/files/ja/web/api/document/prerenderingchange_event/index.md
+++ b/files/ja/web/api/document/prerenderingchange_event/index.md
@@ -38,7 +38,8 @@ if (document.prerendering) {
 }
 ```
 
-> **メモ:** 事前レンダリングが完了するまで遅らせたいアクティビティの種類については、[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) ランディングページ、特に[安全でない投機的読み込み条件](/ja/docs/Web/API/Speculation_Rules_API#安全でない投機的読み込み条件)の節を参照してください。
+> [!NOTE]
+> 事前レンダリングが完了するまで遅らせたいアクティビティの種類については、[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) ランディングページ、特に[安全でない投機的読み込み条件](/ja/docs/Web/API/Speculation_Rules_API#安全でない投機的読み込み条件)の節を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/queryselector/index.md b/files/ja/web/api/document/queryselector/index.md
index 942fe79258f8af..e60ec82dbab02d 100644
--- a/files/ja/web/api/document/queryselector/index.md
+++ b/files/ja/web/api/document/queryselector/index.md
@@ -10,7 +10,8 @@ l10n:
 
 {{domxref("Document")}} の **`querySelector()`** メソッドは、指定されたセレクターまたはセレクター群に一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は `null` を返します。
 
-> **メモ:** 照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。
+> [!NOTE]
+> 照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。
 
 ## 構文
 
@@ -23,7 +24,8 @@ querySelector(selectors)
 - `selectors`
   - : 文字列で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。そうでない場合は `SyntaxError` が発生します。セレクターとその管理の方法の詳細について、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors)を参照してください。
 
-> **メモ:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](#特殊文字のエスケープ)を参照してください。
+> [!NOTE]
+> 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](#特殊文字のエスケープ)を参照してください。
 
 ### 返値
 
diff --git a/files/ja/web/api/document/queryselectorall/index.md b/files/ja/web/api/document/queryselectorall/index.md
index b2bad34cea741e..fc125cd6d170c3 100644
--- a/files/ja/web/api/document/queryselectorall/index.md
+++ b/files/ja/web/api/document/queryselectorall/index.md
@@ -21,13 +21,15 @@ querySelectorAll(selectors)
 - `selectors`
   - : 文字列で、照合対象となる 1 つまたは複数のセレクターを含みます。この文字列は妥当な [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors)でなければならず、そうでない場合は `SyntaxError` 例外が発生します。セレクターの仕様と要素の識別の詳細は、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors)を参照してください。複数のセレクターをカンマで区切って指定することができます。
 
-> **メモ:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/API/Document/querySelector#特殊文字のエスケープ)を参照してください。
+> [!NOTE]
+> 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/API/Document/querySelector#特殊文字のエスケープ)を参照してください。
 
 ### 返値
 
 ライブではない {{domxref("NodeList")}} で、指定されたセレクターの少なくとも 1 つに一致する要素ごとに {{domxref("Element")}} を一つずつ含みます。または一致するものがなければ空の {{domxref("NodeList")}} です。
 
-> **メモ:** 指定された `selectors` が [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含む場合、返されるリストは常に空になります。
+> [!NOTE]
+> 指定された `selectors` が [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含む場合、返されるリストは常に空になります。
 
 ### 例外
 
diff --git a/files/ja/web/api/document/requeststorageaccess/index.md b/files/ja/web/api/document/requeststorageaccess/index.md
index dbd23e76e82dea..30865c97758025 100644
--- a/files/ja/web/api/document/requeststorageaccess/index.md
+++ b/files/ja/web/api/document/requeststorageaccess/index.md
@@ -12,7 +12,8 @@ l10n:
 
 サードパーティクッキーにアクセスする権限が既に与えられているかどうかを調べるには、{{domxref("Permissions.query()")}} を呼び出して、特性名 `"storage-access"`を指定してください。
 
-> **メモ:** この機能の使用は、サーバーに設定する {{httpheader("Permissions-Policy/storage-access", "storage-access")}} [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)によってブロックされる場合があります。さらに、文書は、許可リスト、ブロックリスト、端末上の分類、ユーザー設定、[クリックジャッキング](/ja/docs/Glossary/Clickjacking)防止の経験則、またはユーザーに明示的な許可を求めるプロンプトのような、ブラウザー固有の追加のチェックに合格する必要があります。
+> [!NOTE]
+> この機能の使用は、サーバーに設定する {{httpheader("Permissions-Policy/storage-access", "storage-access")}} [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)によってブロックされる場合があります。さらに、文書は、許可リスト、ブロックリスト、端末上の分類、ユーザー設定、[クリックジャッキング](/ja/docs/Glossary/Clickjacking)防止の経験則、またはユーザーに明示的な許可を求めるプロンプトのような、ブラウザー固有の追加のチェックに合格する必要があります。
 
 ## 構文
 
@@ -100,7 +101,8 @@ document.requestStorageAccess({ localStorage: true }).then(
 );
 ```
 
-> **メモ:** より完全な例については、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
+> [!NOTE]
+> より完全な例については、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/requeststorageaccessfor/index.md b/files/ja/web/api/document/requeststorageaccessfor/index.md
index 72465ea2bc091a..3b1f285b0189d8 100644
--- a/files/ja/web/api/document/requeststorageaccessfor/index.md
+++ b/files/ja/web/api/document/requeststorageaccessfor/index.md
@@ -3,7 +3,7 @@ title: "Document: requestStorageAccessFor() メソッド"
 short-title: requestStorageAccessFor()
 slug: Web/API/Document/requestStorageAccessFor
 l10n:
-  sourceCommit: b97c61b40d8b71532d54fe5af1eab4ca014605ec
+  sourceCommit: 0ebc78fd61acddbe9505330f006b706ac786456d
 ---
 
 {{APIRef("Storage Access API")}}{{SeeCompatTable}}
@@ -64,7 +64,8 @@ navigator.permissions.query({
 });
 ```
 
-> **メモ:** この機能の使用は、サーバーに設定する {{httpheader("Permissions-Policy/storage-access", "storage-access")}} [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)（ストレージアクセス API の残りの部分をコントロールするものと同じ）によってブロックされる可能性があります。さらに、許可リスト、ブロックリスト、端末上の分類、ユーザー設定、アンチ[クリックジャッキング](/ja/docs/Glossary/Clickjacking)の経験則など、 ブラウザー独自のチェックも通過しなければなりません。
+> [!NOTE]
+> この機能の使用は、サーバーに設定する {{httpheader("Permissions-Policy/storage-access", "storage-access")}} [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)（ストレージアクセス API の残りの部分をコントロールするものと同じ）によってブロックされる可能性があります。さらに、許可リスト、ブロックリスト、端末上の分類、ユーザー設定、アンチ[クリックジャッキング](/ja/docs/Glossary/Clickjacking)の経験則など、 ブラウザー独自のチェックも通過しなければなりません。
 
 ## 例
 
@@ -84,7 +85,7 @@ function rSAFor() {
 }
 ```
 
-`requestStorageAccessFor()` の呼び出しが成功した後、[CORS](/ja/docs/Web/HTTP/CORS) / [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) を含む場合、クロスサイトリクエストはクッキーを入れることができます。このようなリクエストは [`credentials: "include"`](/ja/docs/Web/API/fetch#credentials) オプションを用い、リソースは `crossorigin="use-credentials"` 属性を記載しなければなりません。
+`requestStorageAccessFor()` の呼び出しが成功した後、[CORS](/ja/docs/Web/HTTP/CORS) / [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) を含む場合、クロスサイトリクエストはクッキーを入れることができます。このようなリクエストは [`credentials: "include"`](/ja/docs/Web/API/RequestInit#credentials) オプションを用い、リソースは `crossorigin="use-credentials"` 属性を記載しなければなりません。
 
 例えば、次のようにします。
 
@@ -101,7 +102,8 @@ function checkCookie() {
 }
 ```
 
-> **メモ:** より完全な例については、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
+> [!NOTE]
+> より完全な例については、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/securitypolicyviolation_event/index.md b/files/ja/web/api/document/securitypolicyviolation_event/index.md
index 999a02ab11522f..7cb6892f638d18 100644
--- a/files/ja/web/api/document/securitypolicyviolation_event/index.md
+++ b/files/ja/web/api/document/securitypolicyviolation_event/index.md
@@ -14,7 +14,8 @@ l10n:
 
 ハンドラーは `onsecuritypolicyviolation` イベントハンドラープロパティを使用するか、{{domxref("EventTarget.addEventListener()")}} を使用して割り当てることができます。
 
-> **メモ:** このイベントのハンドラーは最上位のオブジェクト（{{domxref("Window")}} や {{domxref("Document")}} など）に追加することをお勧めします。HTML 要素にプロパティが存在する間は、要素が読み込まれるまでプロパティにハンドラーを割り当てることはできず、その時刻にはすでにこのイベントは発生しています。
+> [!NOTE]
+> このイベントのハンドラーは最上位のオブジェクト（{{domxref("Window")}} や {{domxref("Document")}} など）に追加することをお勧めします。HTML 要素にプロパティが存在する間は、要素が読み込まれるまでプロパティにハンドラーを割り当てることはできず、その時刻にはすでにこのイベントは発生しています。
 
 ## 構文
 
diff --git a/files/ja/web/api/document/selectedstylesheetset/index.md b/files/ja/web/api/document/selectedstylesheetset/index.md
index 31d29f98bded99..f62c0eb43fb9d7 100644
--- a/files/ja/web/api/document/selectedstylesheetset/index.md
+++ b/files/ja/web/api/document/selectedstylesheetset/index.md
@@ -16,7 +16,8 @@ l10n:
 
 このプロパティに値を設定することは、 {{domxref("document.enableStyleSheetsForSet()")}} を `currentStyleSheetSet` の値で呼び出し、 `lastStyleSheetSet` の値をその値に設定することに等価です。
 
-> **メモ:** この属性の値は生きています。スタイルシートの `disabled` 属性を変更すると、この属性の値に影響します。
+> [!NOTE]
+> この属性の値は生きています。スタイルシートの `disabled` 属性を変更すると、この属性の値に影響します。
 
 ## 例
 
diff --git a/files/ja/web/api/document/selectionchange_event/index.md b/files/ja/web/api/document/selectionchange_event/index.md
index 76388876644d06..dd8cb26beca872 100644
--- a/files/ja/web/api/document/selectionchange_event/index.md
+++ b/files/ja/web/api/document/selectionchange_event/index.md
@@ -14,7 +14,8 @@ l10n:
 
 このイベントは `selectionchange` のイベントリスナーを追加するか、`onselectionchange` イベントハンドラーを使用して処理することができます。
 
-> **メモ:** このイベントは {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素のテキスト選択が変更されたときに発行される `selectionchange` イベントとは異なります。詳しくは{{domxref("HTMLInputElement.selectionchange_event")}}を参照してください。
+> [!NOTE]
+> このイベントは {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素のテキスト選択が変更されたときに発行される `selectionchange` イベントとは異なります。詳しくは{{domxref("HTMLInputElement.selectionchange_event")}}を参照してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/document/timeline/index.md b/files/ja/web/api/document/timeline/index.md
index 545b688bbfed58..99b6258ab4de1d 100644
--- a/files/ja/web/api/document/timeline/index.md
+++ b/files/ja/web/api/document/timeline/index.md
@@ -15,7 +15,8 @@ l10n:
 このタイムラインは {{domxref("Performance.timeOrigin")}} からの時刻をミリ秒単位で表します。
 基準時刻以前はタイムラインはアクティブではなく、 {{domxref("AnimationTimeline.currentTime", "currentTime")}} は `null` になります。
 
-> **メモ:** アクティブでない文書（{{domxref("Window")}}、{{htmlelement("iframe")}}、{{htmlelement("frame")}} に関連付けられていない {{domxref("Document")}}）に関連付けられている文書タイムラインもアクティブではないと見なされます。
+> [!NOTE]
+> アクティブでない文書（{{domxref("Window")}}、{{htmlelement("iframe")}}、{{htmlelement("frame")}} に関連付けられていない {{domxref("Document")}}）に関連付けられている文書タイムラインもアクティブではないと見なされます。
 
 ## 値
 
diff --git a/files/ja/web/api/document/write/index.md b/files/ja/web/api/document/write/index.md
index d2bce409a33d15..efc3d39cb4721c 100644
--- a/files/ja/web/api/document/write/index.md
+++ b/files/ja/web/api/document/write/index.md
@@ -76,9 +76,11 @@ write(markup)
 
 > **メモ:** `document.write` は [deferred](/ja/docs/Web/HTML/Element/script#attr-defer) または [asynchronous](/ja/docs/Web/HTML/Element/script#attr-async) のスクリプト内では無視され、エラーコンソールに "A call to `document.write()` from an asynchronously-loaded external script was ignored" などのメッセージが表示されます。
 
-> **メモ:** Edge のみ、`document.write()` を {{HTMLElement("iframe")}} 内で複数回呼び出すと、 SCRIPT70: Permission denied エラーが発生します。
+> [!NOTE]
+> Edge のみ、`document.write()` を {{HTMLElement("iframe")}} 内で複数回呼び出すと、 SCRIPT70: Permission denied エラーが発生します。
 
-> **メモ:** Chrome 55 からは、キャッシュされていない HTTP の場合、`document.write()` を通じて挿入された `<script>` 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、[document.write() に対する介入](https://developer.chrome.com/blog/removing-document-write/)をご覧ください。
+> [!NOTE]
+> Chrome 55 からは、キャッシュされていない HTTP の場合、`document.write()` を通じて挿入された `<script>` 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、[document.write() に対する介入](https://developer.chrome.com/blog/removing-document-write/)をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/document/xmlencoding/index.md b/files/ja/web/api/document/xmlencoding/index.md
index 36db34c4e8bc72..1089c74104e7f0 100644
--- a/files/ja/web/api/document/xmlencoding/index.md
+++ b/files/ja/web/api/document/xmlencoding/index.md
@@ -10,7 +10,8 @@ l10n:
 
 XML 宣言によって決定されたエンコード方式を返します。未指定または不明の場合は `null` となります。
 
-> **警告:** この属性を使用しないでください。この属性は DOM Level 4 仕様から除去され、Firefox 10.0 では対応していません。
+> [!WARNING]
+> この属性を使用しないでください。この属性は DOM Level 4 仕様から除去され、Firefox 10.0 では対応していません。
 
 以下の XML 宣言を想像してください。
 
diff --git a/files/ja/web/api/document_object_model/introduction/index.md b/files/ja/web/api/document_object_model/introduction/index.md
index d18669c312cd14..42ee004677c012 100644
--- a/files/ja/web/api/document_object_model/introduction/index.md
+++ b/files/ja/web/api/document_object_model/introduction/index.md
@@ -91,7 +91,8 @@ DOM を使い始めるのに、特別なものは必要ありません。
 
 このページでは、様々なオブジェクトと型をなるべく簡単な方法で説明します。しかし、API に渡される、注意しなければならないデータ型はたくさんあります。
 
-> **メモ:** DOM を使用するコードの大部分は HTML 文書の操作を中心としているため、DOM 内のノードを**要素**と呼ぶのが一般的ですが、厳密にはすべてのノードが要素というわけではありません。
+> [!NOTE]
+> DOM を使用するコードの大部分は HTML 文書の操作を中心としているため、DOM 内のノードを**要素**と呼ぶのが一般的ですが、厳密にはすべてのノードが要素というわけではありません。
 
 以下の表はこれらのデータの種類を簡単に説明しています。
 
diff --git a/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
index 6c17daaeb8e8b5..50aa77f8ca29f9 100644
--- a/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
+++ b/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
@@ -9,7 +9,8 @@ l10n:
 
 この記事では、強力で基本的な DOM レベル 1 のメソッドと、それを JavaScript からどのように使用するかを概観します。どのようにして HTML 要素を動的に生成、アクセス、制御、削除するかを学ぶことができます。ここで紹介する DOM メソッドは HTML に限ったものではなく、XML に対しても用いることができます。ここで用意しているデモは、すべての最近のブラウザーで正常に動作します。
 
-> **メモ:** ここで紹介する DOM メソッドは ドキュメントオブジェクトモデル（コア）レベル 1 仕様の一部に過ぎません。DOM レベル 1 には HTML ドキュメント特有のメソッド (DOM 1 HTML) と共に、一般的なドキュメントアクセスと操作（DOM 1 コア）のためのメソッドが含まれています。
+> [!NOTE]
+> ここで紹介する DOM メソッドは ドキュメントオブジェクトモデル（コア）レベル 1 仕様の一部に過ぎません。DOM レベル 1 には HTML ドキュメント特有のメソッド (DOM 1 HTML) と共に、一般的なドキュメントアクセスと操作（DOM 1 コア）のためのメソッドが含まれています。
 
 ## 動的な HTML の表の生成
 
@@ -332,7 +333,8 @@ sample1.html における基本的な表の生成の手順は次の通りです
 
 そして、この例では結果を表示するために、内容が `myceltext` のデータである新しいテキストノードを作成し、`<body>` 要素の子として追加します。
 
-> **メモ:** オブジェクトがテキストノードである場合、data 属性を使用して当該ノードのテキスト内容を得ることができます。
+> [!NOTE]
+> オブジェクトがテキストノードである場合、data 属性を使用して当該ノードのテキスト内容を得ることができます。
 
 ```js
 myBody = document.getElementsByTagName("body")[0];
diff --git a/files/ja/web/api/documentfragment/getelementbyid/index.md b/files/ja/web/api/documentfragment/getelementbyid/index.md
index 4cb87f9fda53b4..8a993c53b7af9a 100644
--- a/files/ja/web/api/documentfragment/getelementbyid/index.md
+++ b/files/ja/web/api/documentfragment/getelementbyid/index.md
@@ -12,7 +12,8 @@ l10n:
 
 ID を持っていない要素へアクセスする必要がある場合は、{{domxref("Document.querySelector", "querySelector()")}} を使用すると任意の{{Glossary("CSS selector", "セレクター")}}を用いて要素を検索することができます。
 
-> **メモ:** ID は単一の文書フラグメント内で一意である必要があります。2 つ以上の要素が単一の文書フラグメント内で同じ ID を持っている場合、このメソッドは最初に見つかった要素を返します。
+> [!NOTE]
+> ID は単一の文書フラグメント内で一意である必要があります。2 つ以上の要素が単一の文書フラグメント内で同じ ID を持っている場合、このメソッドは最初に見つかった要素を返します。
 
 ## 構文
 
@@ -20,7 +21,8 @@ ID を持っていない要素へアクセスする必要がある場合は、{{
 getElementById(id)
 ```
 
-> **メモ:** コードが機能するためには、このメソッドの名前における `"Id"` という大文字小文字の表記を正確にしなければなりません。`getElementByID()` のほうが自然に見えますが、正しくなく機能しません。
+> [!NOTE]
+> コードが機能するためには、このメソッドの名前における `"Id"` という大文字小文字の表記を正確にしなければなりません。`getElementByID()` のほうが自然に見えますが、正しくなく機能しません。
 
 ### 引数
 
diff --git a/files/ja/web/api/domexception/index.md b/files/ja/web/api/domexception/index.md
index c4d73f3768bd3e..2ddebdb20faa71 100644
--- a/files/ja/web/api/domexception/index.md
+++ b/files/ja/web/api/domexception/index.md
@@ -37,7 +37,8 @@ l10n:
 - 古いコード値: `6`、古い定数名: `NO_DATA_ALLOWED_ERR`
 - 古いコード値: `16`、古い定数名: `VALIDATION_ERR`
 
-> **メモ:** 歴史的には、エラーは、その値があるように定義された名前付き変数に対応する数値によって識別されていたため、下記の項目の一部は、これまで使用していた古いコード値と定数名を示しています。
+> [!NOTE]
+> 歴史的には、エラーは、その値があるように定義された名前付き変数に対応する数値によって識別されていたため、下記の項目の一部は、これまで使用していた古いコード値と定数名を示しています。
 
 - `IndexSizeError`
   - : インデックスが許可された範囲から外れています。例えば、{{domxref("Range")}} オブジェクトで発生することがあります。（古いコード: `1`、古い定数名: `INDEX_SIZE_ERR`）
diff --git a/files/ja/web/api/dompointreadonly/dompointreadonly/index.md b/files/ja/web/api/dompointreadonly/dompointreadonly/index.md
index c092ae89bc8569..4198e62b0c18b2 100644
--- a/files/ja/web/api/dompointreadonly/dompointreadonly/index.md
+++ b/files/ja/web/api/dompointreadonly/dompointreadonly/index.md
@@ -31,7 +31,8 @@ new DOMPointReadOnly(x, y, z, w)
 - `w` {{optional_inline}}
   - : 視点位置 w を浮動小数点数で指定します。既定値は 1 です。
 
-> **メモ:** これらの値はそれぞれ*無制限*の数と呼ばれるものです。有限の浮動小数点数に加えて、±{{jsxref("Infinity")}} や {{jsxref("NaN")}} のような特別な値も使用することができます。
+> [!NOTE]
+> これらの値はそれぞれ*無制限*の数と呼ばれるものです。有限の浮動小数点数に加えて、±{{jsxref("Infinity")}} や {{jsxref("NaN")}} のような特別な値も使用することができます。
 
 ### 返値
 
diff --git a/files/ja/web/api/domtokenlist/item/index.md b/files/ja/web/api/domtokenlist/item/index.md
index aa0f617beff3da..19d27b9ae6cece 100644
--- a/files/ja/web/api/domtokenlist/item/index.md
+++ b/files/ja/web/api/domtokenlist/item/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`item()`** は {{domxref("DOMTokenList")}} インターフェイスのメソッドで、リスト内の項目をその位置から取得します。
 
-> **メモ:** このメソッドは[ブラケット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors#ブラケット表記法)と等価です。
+> [!NOTE]
+> このメソッドは[ブラケット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors#ブラケット表記法)と等価です。
 > したがって、 `aList.item(i)` は `aList[i]` と同じです。
 
 ## 構文
diff --git a/files/ja/web/api/element/afterscriptexecute_event/index.md b/files/ja/web/api/element/afterscriptexecute_event/index.md
index c2209164940a8c..9bb2eea4d2ebbf 100644
--- a/files/ja/web/api/element/afterscriptexecute_event/index.md
+++ b/files/ja/web/api/element/afterscriptexecute_event/index.md
@@ -8,7 +8,8 @@ l10n:
 
 {{APIRef}}{{Non-standard_header}}
 
-> **警告:** このイベントは仕様の初期バージョンでの提案でした。頼りにしないでください。
+> [!WARNING]
+> このイベントは仕様の初期バージョンでの提案でした。頼りにしないでください。
 
 **`afterscriptexecute`** イベントは、スクリプトの実行が完了した後に発行されます。
 
diff --git a/files/ja/web/api/element/animate/index.md b/files/ja/web/api/element/animate/index.md
index ec480da46c9b90..1a9d4c599bf52c 100644
--- a/files/ja/web/api/element/animate/index.md
+++ b/files/ja/web/api/element/animate/index.md
@@ -10,7 +10,8 @@ l10n:
 
 {{domxref("Element")}} インターフェイスの **`animate()`** メソッドは、新しい {{domxref("Animation")}} を生成し、この要素へ適用し、そしてアニメーションの再生を行うショートカットメソッドです。生成した {{domxref("Animation")}} オブジェクトのインスタンスを返します。
 
-> **メモ:** 要素には複数のアニメーションを適用することができます。{{domxref("Element.getAnimations()")}} を呼び出すと、要素に作用するアニメーションのリストを取得することができます。
+> [!NOTE]
+> 要素には複数のアニメーションを適用することができます。{{domxref("Element.getAnimations()")}} を呼び出すと、要素に作用するアニメーションのリストを取得することができます。
 
 ## 構文
 
diff --git a/files/ja/web/api/element/ariachecked/index.md b/files/ja/web/api/element/ariachecked/index.md
index 7d9ff2b5af7438..fb8524d7ddbcdb 100644
--- a/files/ja/web/api/element/ariachecked/index.md
+++ b/files/ja/web/api/element/ariachecked/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaChecked`** は {{domxref("Element")}} インターフェイスプロパティで、チェックボックスやラジオボタン、その他のチェック状態のあるウィジェットの現在の "checked" 状態を示す [`aria-checked`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-checked) 属性の値を反映します。
 
-> **メモ:** 可能な限り、HTML の {{htmlelement("input")}} 要素で `type="checkbox"` を使用してください。この要素には意味づけがあり、ARIA 属性は必要ありません。
+> [!NOTE]
+> 可能な限り、HTML の {{htmlelement("input")}} 要素で `type="checkbox"` を使用してください。この要素には意味づけがあり、ARIA 属性は必要ありません。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariadisabled/index.md b/files/ja/web/api/element/ariadisabled/index.md
index a3bf3083ac21bc..c7a2788d6bfe56 100644
--- a/files/ja/web/api/element/ariadisabled/index.md
+++ b/files/ja/web/api/element/ariadisabled/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaDisabled`** は {{domxref("Element")}} インターフェイスのプロパティで、[`aria-disabled`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) 属性の値を反映し、要素が知覚可能だが無効であり、編集や他の処理をすることはできないことを示します。
 
-> **メモ:** 可能であれば、{{htmlelement("input")}} 要素に `type="button"` を使用するか、{{htmlelement("button")}} 要素を使用してください。これらの要素は意味づけが組み込まれており、ARIA 属性を必要としないからです。
+> [!NOTE]
+> 可能であれば、{{htmlelement("input")}} 要素に `type="button"` を使用するか、{{htmlelement("button")}} 要素を使用してください。これらの要素は意味づけが組み込まれており、ARIA 属性を必要としないからです。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariahaspopup/index.md b/files/ja/web/api/element/ariahaspopup/index.md
index 5bcaa723921869..d53d0544c477cd 100644
--- a/files/ja/web/api/element/ariahaspopup/index.md
+++ b/files/ja/web/api/element/ariahaspopup/index.md
@@ -29,7 +29,8 @@ l10n:
 - `"dialog"`
   - : この要素にはダイアログであるポップアップがあります。
 
-> **警告:** 様々な `aria-haspopup` 値への対応は、属性を指定する要素によって異なる可能性があることに注意してください。`aria-haspopup` を使用する際には、ARIA 仕様に準拠し、必要なブラウザーや支援技術でテストした際に期待通りの動作をするようにしてください。
+> [!WARNING]
+> 様々な `aria-haspopup` 値への対応は、属性を指定する要素によって異なる可能性があることに注意してください。`aria-haspopup` を使用する際には、ARIA 仕様に準拠し、必要なブラウザーや支援技術でテストした際に期待通りの動作をするようにしてください。
 
 ## 例
 
diff --git a/files/ja/web/api/element/arialevel/index.md b/files/ja/web/api/element/arialevel/index.md
index a47c8e93e385e4..c8f4f520b51ba5 100644
--- a/files/ja/web/api/element/arialevel/index.md
+++ b/files/ja/web/api/element/arialevel/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaLevel`** は {{domxref("Element")}} インターフェイスのプロパティで、構造内の要素の階層レベルを定義する `aria-level` 属性の値を反映します。
 
-> **メモ:** 使用可能な場合は、HTML の {{htmlelement("Heading_Elements", "h1")}} または他の正しい見出しレベルを使用してください。
+> [!NOTE]
+> 使用可能な場合は、HTML の {{htmlelement("Heading_Elements", "h1")}} または他の正しい見出しレベルを使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariamultiline/index.md b/files/ja/web/api/element/ariamultiline/index.md
index faba7825d641ff..72352a32885c73 100644
--- a/files/ja/web/api/element/ariamultiline/index.md
+++ b/files/ja/web/api/element/ariamultiline/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaMultiLine`** は {{domxref("Element")}} インターフェイスのプロパティで、テキストボックスが複数行の入力を受け入れるか単一の行だけを受け入れるかを示す [`aria-multiline`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) 属性の値を反映します。
 
-> **メモ:** 可能であれば、HTMLの {{htmlelement("input")}} 要素で `type="text"` を使用するか、{{htmlelement("textarea")}} を使用してください。これらは意味づけが組み込まれており、ARIA 属性を必要としないからです。
+> [!NOTE]
+> 可能であれば、HTMLの {{htmlelement("input")}} 要素で `type="text"` を使用するか、{{htmlelement("textarea")}} を使用してください。これらは意味づけが組み込まれており、ARIA 属性を必要としないからです。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariamultiselectable/index.md b/files/ja/web/api/element/ariamultiselectable/index.md
index e8e70d3da3d643..7d477e4a1cbbbc 100644
--- a/files/ja/web/api/element/ariamultiselectable/index.md
+++ b/files/ja/web/api/element/ariamultiselectable/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaMultiSelectable`** は {{domxref("Element")}} インターフェイスのプロパティで、[`aria-multiselectable`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) 属性の値を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。
 
-> **メモ:** 可能であれば、HTML の {{htmlelement("select")}} 要素を使用してください。これは意味づけが組み込まれており、ARIA 属性を必要としないからです。
+> [!NOTE]
+> 可能であれば、HTML の {{htmlelement("select")}} 要素を使用してください。これは意味づけが組み込まれており、ARIA 属性を必要としないからです。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariaplaceholder/index.md b/files/ja/web/api/element/ariaplaceholder/index.md
index d39240bf562555..433fc76e647931 100644
--- a/files/ja/web/api/element/ariaplaceholder/index.md
+++ b/files/ja/web/api/element/ariaplaceholder/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaPlaceholder`** は {{domxref("Element")}} インターフェイスのプロパティで、`aria-placeholder` 属性の値を反映します。この属性は、コントロールに値がない場合表示する、ユーザーのデータ入力を助けることを意図した短いヒントを定義します。
 
-> **メモ:** 可能であれば、HTML の {{htmlelement("input")}} 要素の `type="text"` と {{htmlelement("textarea")}} を使用してください。これらは意味づけがあり、ARIA 属性を必要としません。
+> [!NOTE]
+> 可能であれば、HTML の {{htmlelement("input")}} 要素の `type="text"` と {{htmlelement("textarea")}} を使用してください。これらは意味づけがあり、ARIA 属性を必要としません。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariapressed/index.md b/files/ja/web/api/element/ariapressed/index.md
index 9d24566409952e..09db00398a5ea6 100644
--- a/files/ja/web/api/element/ariapressed/index.md
+++ b/files/ja/web/api/element/ariapressed/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaPressed`** は {{domxref("Element")}} インターフェイスのプロパティで、トグルボタンの現在の押下状態を示す [`aria-pressed`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性の値を反映します。
 
-> **メモ:** 可能であれば、HTML の {{htmlelement("input")}} 要素に `type="button"` を使用するか、{{htmlelement("button")}} 要素を使用すると、意味づけが組み込まれており、ARIA 属性を持つ必要がありません。
+> [!NOTE]
+> 可能であれば、HTML の {{htmlelement("input")}} 要素に `type="button"` を使用するか、{{htmlelement("button")}} 要素を使用すると、意味づけが組み込まれており、ARIA 属性を持つ必要がありません。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariareadonly/index.md b/files/ja/web/api/element/ariareadonly/index.md
index 0818989aa6cabb..7b5f7b852d11c7 100644
--- a/files/ja/web/api/element/ariareadonly/index.md
+++ b/files/ja/web/api/element/ariareadonly/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaReadOnly`** は {{domxref("Element")}} インターフェイスのプロパティで、要素が編集不可であるが、それ以外は操作可能であることを示す [`aria-readonly`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) 属性の値を反映します。
 
-> **メモ:** 可能であれば、HTML の {{htmlelement("input")}} 要素の `type="text"` と {{htmlelement("textarea")}} を使用してください。これらは意味づけがあり、ARIA 属性を必要としません。
+> [!NOTE]
+> 可能であれば、HTML の {{htmlelement("input")}} 要素の `type="text"` と {{htmlelement("textarea")}} を使用してください。これらは意味づけがあり、ARIA 属性を必要としません。
 
 ## 値
 
diff --git a/files/ja/web/api/element/ariarequired/index.md b/files/ja/web/api/element/ariarequired/index.md
index ff5e3f4abab44d..5b37c0fb246872 100644
--- a/files/ja/web/api/element/ariarequired/index.md
+++ b/files/ja/web/api/element/ariarequired/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaRequired`** は {{domxref("Element")}} インターフェイスのプロパティで、フォームを送信する前にユーザー入力が必要であることを示す `aria-required` 属性の値を反映します。
 
-> **メモ:** 使用可能な場合は、HTML の {{htmlelement("input")}} 要素で `type="text"` と {{htmlelement("textarea")}} を使用してください。
+> [!NOTE]
+> 使用可能な場合は、HTML の {{htmlelement("input")}} 要素で `type="text"` と {{htmlelement("textarea")}} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/auxclick_event/index.md b/files/ja/web/api/element/auxclick_event/index.md
index 767027c66b92f5..dba20d72e122ff 100644
--- a/files/ja/web/api/element/auxclick_event/index.md
+++ b/files/ja/web/api/element/auxclick_event/index.md
@@ -158,7 +158,8 @@ h1 {
 
 {{EmbedLiveSample("Examples", 640, 300)}}
 
-> **メモ:** 3 ボタンマウスを使用している場合、左以外のボタンがクリックされると、`onauxclick` ハンドラーが実行されることがわかります（通常、ゲーミングマウスの「特殊」ボタンも含みます）。
+> [!NOTE]
+> 3 ボタンマウスを使用している場合、左以外のボタンがクリックされると、`onauxclick` ハンドラーが実行されることがわかります（通常、ゲーミングマウスの「特殊」ボタンも含みます）。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/element/beforescriptexecute_event/index.md b/files/ja/web/api/element/beforescriptexecute_event/index.md
index 6bcf58f13b1a2f..e88b0c4e93b4ee 100644
--- a/files/ja/web/api/element/beforescriptexecute_event/index.md
+++ b/files/ja/web/api/element/beforescriptexecute_event/index.md
@@ -8,7 +8,8 @@ l10n:
 
 {{APIRef}}{{Non-standard_header}}
 
-> **警告:** このイベントは仕様の初期バージョンでの提案でした。頼りにしないでください。
+> [!WARNING]
+> このイベントは仕様の初期バージョンでの提案でした。頼りにしないでください。
 
 **`beforescriptexecute`** イベントは、スクリプトが実行しようとされているときに発生します。このイベントをキャンセルすると、スクリプトの実行が阻止されます。
 
diff --git a/files/ja/web/api/element/checkvisibility/index.md b/files/ja/web/api/element/checkvisibility/index.md
index e4a913cabb87b5..bb670ea80c07fa 100644
--- a/files/ja/web/api/element/checkvisibility/index.md
+++ b/files/ja/web/api/element/checkvisibility/index.md
@@ -42,7 +42,8 @@ checkVisibility(options)
       - : `true` を指定すると、{{cssxref("visibility")}} プロパティの値によって要素が不可視になっているかどうかを調べます。
         既定では `false` です。
 
-        > **メモ:** 不可視の要素には、[`visibility: hidden`](/ja/docs/Web/CSS/visibility#hidden) が設定された要素や、[`visibility: collapse`](/ja/docs/Web/CSS/visibility#collapse) が設定された要素が含まれます。
+        > [!NOTE]
+        > 不可視の要素には、[`visibility: hidden`](/ja/docs/Web/CSS/visibility#hidden) が設定された要素や、[`visibility: collapse`](/ja/docs/Web/CSS/visibility#collapse) が設定された要素が含まれます。
 
     - `checkOpacity`
       - : [`opacityProperty`](#opacityproperty) の過去の別名です。
diff --git a/files/ja/web/api/element/click_event/index.md b/files/ja/web/api/element/click_event/index.md
index ac4c4b6b55c0c5..1b9c663e8a4b75 100644
--- a/files/ja/web/api/element/click_event/index.md
+++ b/files/ja/web/api/element/click_event/index.md
@@ -30,7 +30,8 @@ onclick = (event) => {};
 
 {{InheritanceDiagram("PointerEvent")}}
 
-> **メモ:** この仕様書の以前のバージョンでは、このイベントのイベント型は {{domxref("MouseEvent")}} でした。 Firefox と Safari では今でもこの型で渡されます。
+> [!NOTE]
+> この仕様書の以前のバージョンでは、このイベントのイベント型は {{domxref("MouseEvent")}} でした。 Firefox と Safari では今でもこの型で渡されます。
 
 ## イベントプロパティ
 
diff --git a/files/ja/web/api/element/clientheight/index.md b/files/ja/web/api/element/clientheight/index.md
index 08fb5fb7fe3d6a..d62e51fa7095c6 100644
--- a/files/ja/web/api/element/clientheight/index.md
+++ b/files/ja/web/api/element/clientheight/index.md
@@ -14,7 +14,8 @@ l10n:
 
 `clientHeight` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientHeight` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight)。
 
-> **メモ:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+> [!NOTE]
+> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md
index 2e3d7825eeea28..45cb7d026b8b85 100644
--- a/files/ja/web/api/element/clientleft/index.md
+++ b/files/ja/web/api/element/clientleft/index.md
@@ -10,9 +10,11 @@ l10n:
 
 要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。`clientLeft` は、左マージンまたは左パディングを含みません。`clientLeft` は読み取り専用です。
 
-> **メモ:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+> [!NOTE]
+> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-> **メモ:** 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。
+> [!NOTE]
+> 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。
 
 ## 値
 
diff --git a/files/ja/web/api/element/clienttop/index.md b/files/ja/web/api/element/clienttop/index.md
index 95b46a1574c555..a6b8ae9fdadd43 100644
--- a/files/ja/web/api/element/clienttop/index.md
+++ b/files/ja/web/api/element/clienttop/index.md
@@ -12,7 +12,8 @@ l10n:
 
 たまたま、2 つの位置（`offsetTop` とクライアント領域の上端）の間にあるのは、要素の境界だけです。これは、 `offsetTop` が（マージンではなく）境界の上端の位置を示し、クライアント領域は境界の直下から始まるからです（クライアント領域はパディングを含みます）。したがって、 **clientTop** 値は常に "border-top-width" に対する `.getComputedStyle()` 値の整数部分と一致します。（実際には Math.round(parseFloat()) かもしれません。）例えば、計算された "border-top-width" が 0 の場合、 **`clientTop`** も 0 になります。
 
-> **メモ:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+> [!NOTE]
+> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/clientwidth/index.md b/files/ja/web/api/element/clientwidth/index.md
index f96bc9bc9d7420..7875226e1b3653 100644
--- a/files/ja/web/api/element/clientwidth/index.md
+++ b/files/ja/web/api/element/clientwidth/index.md
@@ -12,7 +12,8 @@ l10n:
 
 `clientWidth` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientWidth` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth)。
 
-> **メモ:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+> [!NOTE]
+> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/contentvisibilityautostatechange_event/index.md b/files/ja/web/api/element/contentvisibilityautostatechange_event/index.md
index 868f6361f09075..33caa6e1a03180 100644
--- a/files/ja/web/api/element/contentvisibilityautostatechange_event/index.md
+++ b/files/ja/web/api/element/contentvisibilityautostatechange_event/index.md
@@ -24,7 +24,8 @@ addEventListener("contentvisibilityautostatechange", (event) => {});
 oncontentvisibilityautostatechange = (event) => {};
 ```
 
-> **メモ:** イベントオブジェクトの型は {{domxref("ContentVisibilityAutoStateChangeEvent")}} です。
+> [!NOTE]
+> イベントオブジェクトの型は {{domxref("ContentVisibilityAutoStateChangeEvent")}} です。
 
 ## 例
 
diff --git a/files/ja/web/api/element/contextmenu_event/index.md b/files/ja/web/api/element/contextmenu_event/index.md
index 9b80b924df00fb..12e3b5c9d3f803 100644
--- a/files/ja/web/api/element/contextmenu_event/index.md
+++ b/files/ja/web/api/element/contextmenu_event/index.md
@@ -14,7 +14,8 @@ l10n:
 
 右クリックイベントが（イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出して）無効化されていない場合は、対象となる要素で `contextmenu` イベントが発行されます。
 
-> **メモ:** Firefox における例外: <kbd>Shift</kbd> キーを押しながら右クリックすると、`contextmenu` イベントが発生せずにコンテキストメニューが表示されます。
+> [!NOTE]
+> Firefox における例外: <kbd>Shift</kbd> キーを押しながら右クリックすると、`contextmenu` イベントが発生せずにコンテキストメニューが表示されます。
 
 ## 構文
 
@@ -90,7 +91,8 @@ _親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承
 
 この例では、最初の段落で `contextmenu` イベントが発行されたときに、`preventDefault()` を使って `contextmenu` イベントの既定のアクションをキャンセルしています。その結果、第 1 段落は右クリックしても何も起こらず、第 2 段落にはブラウザーが提供する標準的なコンテキストメニューが表示されることになります。
 
-> **メモ:** Firefox では、<kbd>Shift</kbd> キーを押しながら右クリックすると、`contextmenu` イベントが発生せずにコンテキストメニューが表示されます。そのため、イベントをキャンセルしてもコンテキストメニューの表示を止めることはできません。
+> [!NOTE]
+> Firefox では、<kbd>Shift</kbd> キーを押しながら右クリックすると、`contextmenu` イベントが発生せずにコンテキストメニューが表示されます。そのため、イベントをキャンセルしてもコンテキストメニューの表示を止めることはできません。
 
 ### HTML
 
diff --git a/files/ja/web/api/element/dommousescroll_event/index.md b/files/ja/web/api/element/dommousescroll_event/index.md
index 325fa0f6c36952..c56066b394c4f4 100644
--- a/files/ja/web/api/element/dommousescroll_event/index.md
+++ b/files/ja/web/api/element/dommousescroll_event/index.md
@@ -42,11 +42,13 @@ onDOMMouseScroll = (event) => {};
 
 イベントがページ単位での上スクロールを表している場合、`detail` の値は -32768 になります。イベントがページ単位での下スクロールを表す場合、値は +32768 になります。その他の値はスクロールする行数を表し、その方向は値の符号で示されます。
 
-> **メモ:** 信頼できるイベントは、`detail` に 0 を指定して送信されることはありません。
+> [!NOTE]
+> 信頼できるイベントは、`detail` に 0 を指定して送信されることはありません。
 
 信頼できるイベントは 0 では発生しません。
 
-> **メモ:** プラットフォームのネイティブマウスホイールイベントがピクセル単位のスクロール距離しか提供していない場合、またはユーザーが速度をカスタマイズできる場合、値はイベントのターゲットの最も近いスクロール可能な祖先要素の行の高さを使用して計算されます。その要素のフォントサイズが `mousewheel.min_line_scroll_amount` よりも小さい場合、その環境設定の値が行の高さとして使用されます。
+> [!NOTE]
+> プラットフォームのネイティブマウスホイールイベントがピクセル単位のスクロール距離しか提供していない場合、またはユーザーが速度をカスタマイズできる場合、値はイベントのターゲットの最も近いスクロール可能な祖先要素の行の高さを使用して計算されます。その要素のフォントサイズが `mousewheel.min_line_scroll_amount` よりも小さい場合、その環境設定の値が行の高さとして使用されます。
 
 ## ブラウザーの互換性
 
diff --git a/files/ja/web/api/element/getanimations/index.md b/files/ja/web/api/element/getanimations/index.md
index d794a69d6d3198..10f3fc8ea46bd1 100644
--- a/files/ja/web/api/element/getanimations/index.md
+++ b/files/ja/web/api/element/getanimations/index.md
@@ -10,7 +10,8 @@ l10n:
 
 `getAnimations()` は {{domxref("Element")}} インターフェイスのメソッドで（`Animatable` ミックスインで指定されており）、この要素に影響を与える、あるいは将来的に影響を与える予定のすべての {{domxref("Animation")}} オブジェクトの配列を返します。オプションとして、子孫要素の {{domxref("Animation")}} オブジェクトも返すことができます。
 
-> **メモ:** この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API)が含まれます。
+> [!NOTE]
+> この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API)が含まれます。
 
 ## 構文
 
diff --git a/files/ja/web/api/element/getattributens/index.md b/files/ja/web/api/element/getattributens/index.md
index 0abc7296fb188e..dda4882304726b 100644
--- a/files/ja/web/api/element/getattributens/index.md
+++ b/files/ja/web/api/element/getattributens/index.md
@@ -27,7 +27,8 @@ getAttributeNS(namespace, name)
 
 指定された属性の文字列値です。その属性が存在しない場合、結果は `null` になります。
 
-> **メモ:** 古いバージョンの DOM 仕様書では、このメソッドが存在しない属性に対しては空文字列を返すと説明していました。しかし、 null の方が分かりやすいので、そのような実装はあまり行われませんでした。 DOM4 仕様書ではこのメソッドは存在しない属性に対して null を返すと書くようになりました。
+> [!NOTE]
+> 古いバージョンの DOM 仕様書では、このメソッドが存在しない属性に対しては空文字列を返すと説明していました。しかし、 null の方が分かりやすいので、そのような実装はあまり行われませんでした。 DOM4 仕様書ではこのメソッドは存在しない属性に対して null を返すと書くようになりました。
 
 ## 例
 
diff --git a/files/ja/web/api/element/getelementsbyclassname/index.md b/files/ja/web/api/element/getelementsbyclassname/index.md
index da15e8aa645f01..2baaedbf3834eb 100644
--- a/files/ja/web/api/element/getelementsbyclassname/index.md
+++ b/files/ja/web/api/element/getelementsbyclassname/index.md
@@ -33,7 +33,8 @@ getElementsByClassName(names)
 
 逆もしかりです。 `names` に一致しなくなったりツリーから外された要素は、すぐにコレクションから除外されます。
 
-> **メモ:** クラス名は[後方互換モード](/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)では大文字・小文字が区別されず、それ以外では区別されます。
+> [!NOTE]
+> クラス名は[後方互換モード](/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)では大文字・小文字が区別されず、それ以外では区別されます。
 
 ## 例
 
diff --git a/files/ja/web/api/element/id/index.md b/files/ja/web/api/element/id/index.md
index 5b52db6f2a842e..e6c3957a5b7220 100644
--- a/files/ja/web/api/element/id/index.md
+++ b/files/ja/web/api/element/id/index.md
@@ -14,7 +14,8 @@ l10n:
 
 `id` はよく {{domxref("Document.getElementById()", "getElementById()")}} で特定の要素を受け取るために使用します。他の一般的な用途としては、要素の [ID をセレクターとして](/ja/docs/Web/CSS/ID_selectors) [CSS](/ja/docs/Web/CSS) で文書をスタイル付けするために使用されます。
 
-> **メモ:** 識別子は大文字小文字の区別がありますが、大文字小文字の区別だけで見分ける ID を作ることは避けてください。
+> [!NOTE]
+> 識別子は大文字小文字の区別がありますが、大文字小文字の区別だけで見分ける ID を作ることは避けてください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/index.md b/files/ja/web/api/element/index.md
index eb8216ad5859f6..a104aea10f5fa7 100644
--- a/files/ja/web/api/element/index.md
+++ b/files/ja/web/api/element/index.md
@@ -57,7 +57,8 @@ _`Element` は、親インターフェイスである {{DOMxRef("Node")}}、お
 
   - : この要素の名前空間の URI。名前空間がない場合は `null` になります。
 
-    > **メモ:** Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) 名前空間内に存在します。
+    > [!NOTE]
+    > Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) 名前空間内に存在します。
 
 - {{DOMxRef("Element.nextElementSibling")}} {{ReadOnlyInline}}
   - : `Element` で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ `null` になります。
diff --git a/files/ja/web/api/element/innerhtml/index.md b/files/ja/web/api/element/innerhtml/index.md
index ea28a83c8e9d38..d6ae5f43f3c3a9 100644
--- a/files/ja/web/api/element/innerhtml/index.md
+++ b/files/ja/web/api/element/innerhtml/index.md
@@ -37,13 +37,15 @@ let contents = myElement.innerHTML;
 
 これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。
 
-> **メモ:** 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。
+> [!NOTE]
+> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。
 
 ### 要素の中身の置き換え
 
 `innerHTML` の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。
 
-> **メモ:** 挿入される文字列に悪意のある内容が含まれる可能性がある場合、[セキュリティ上のリスク](#セキュリティの考慮事項)になります。
+> [!NOTE]
+> 挿入される文字列に悪意のある内容が含まれる可能性がある場合、[セキュリティ上のリスク](#セキュリティの考慮事項)になります。
 > ユーザーが提供したデータを挿入する場合は、 {{domxref("Element.setHTML()")}} を使用するよう常に検討してください。こちらは挿入する前に無害化を行います。
 
 例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。
@@ -125,7 +127,8 @@ el.innerHTML = name; // アラートが表示される
 - {{domxref("Element.setHTML()")}} で DOM に挿入する前にテキストを無害化する。
 - プレーンテキストを挿入する際には、代わりに {{domxref("Node.textContent")}} を使用する。これは渡されたコンテンツを HTML として解釈するのではなく、生のテキストとして挿入します。
 
-> **警告:** プロジェクトに対して何らかの形のセキュリティレビューが行われた場合、 `innerHTML` は多くの場合で、コードが拒絶される結果になります。
+> [!WARNING]
+> プロジェクトに対して何らかの形のセキュリティレビューが行われた場合、 `innerHTML` は多くの場合で、コードが拒絶される結果になります。
 > 例えば、[ブラウザー拡張機能](/ja/docs/Mozilla/Add-ons/WebExtensions)の中で [`innerHTML` を使用した場合](https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation)、拡張機能を [addons.mozilla.org](https://addons.mozilla.org/) に提出すると、自動レビュープロセスを通過できないでしょう。
 > 代替方法については、[ページへ外部コンテンツを安全に挿入する](/ja/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page)を参照してください。
 
diff --git a/files/ja/web/api/element/keydown_event/index.md b/files/ja/web/api/element/keydown_event/index.md
index 6f478f004da58b..59e1d0e801ce8a 100644
--- a/files/ja/web/api/element/keydown_event/index.md
+++ b/files/ja/web/api/element/keydown_event/index.md
@@ -55,7 +55,8 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 
   - : 文字列で、このイベントが表す物理キーのコード値を返します。
 
-    > **警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
+    > [!WARNING]
+    > これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
 
 - {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
@@ -69,7 +70,8 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 
   - : 文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。
 
-    > **メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
+    > [!NOTE]
+    > このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
 
 - {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
   - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記の[キーボード上の位置](/ja/docs/Web/API/KeyboardEvent#キーボード上の位置)にあります。
diff --git a/files/ja/web/api/element/keypress_event/index.md b/files/ja/web/api/element/keypress_event/index.md
index bca0451e5fa9aa..a99f839f1180db 100644
--- a/files/ja/web/api/element/keypress_event/index.md
+++ b/files/ja/web/api/element/keypress_event/index.md
@@ -12,7 +12,8 @@ l10n:
 
 文字値を生成するキーの例としては、アルファベットキー、数字キー、区切り記号キーが挙げられます。文字値を生成しないキーの例としては、 <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, <kbd>Meta</kbd> のような修飾キーが挙げられます。
 
-> **警告:** このイベントは非推奨になりましたので、代わりに [`beforeinput`](/ja/docs/Web/API/HTMLElement/beforeinput_event) または [`keydown`](/ja/docs/Web/API/Element/keydown_event) を使用してください。
+> [!WARNING]
+> このイベントは非推奨になりましたので、代わりに [`beforeinput`](/ja/docs/Web/API/HTMLElement/beforeinput_event) または [`keydown`](/ja/docs/Web/API/Element/keydown_event) を使用してください。
 
 ## 構文
 
@@ -42,7 +43,8 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 
   - : 文字列で、このイベントが表す物理キーのコード値を返します。
 
-    > **警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
+    > [!WARNING]
+    > これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
 
 - {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
@@ -56,7 +58,8 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 
   - : 文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。
 
-    > **メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
+    > [!NOTE]
+    > このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
 
 - {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
   - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、[キーボード上の位置](/ja/docs/Web/API/KeyboardEvent#キーボード上の位置)にあります。
diff --git a/files/ja/web/api/element/keyup_event/index.md b/files/ja/web/api/element/keyup_event/index.md
index e42389d30a8441..d035f16ba84fc9 100644
--- a/files/ja/web/api/element/keyup_event/index.md
+++ b/files/ja/web/api/element/keyup_event/index.md
@@ -53,7 +53,8 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 
   - : 文字列で、このイベントが表す物理キーのコード値を返します。
 
-    > **警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
+    > [!WARNING]
+    > これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
 
 - {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
@@ -67,7 +68,8 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 
   - : 文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。
 
-    > **メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
+    > [!NOTE]
+    > このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
 
 - {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
   - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、[キーボード上の位置](/ja/docs/Web/API/KeyboardEvent#キーボード上の位置)にあります。
diff --git a/files/ja/web/api/element/localname/index.md b/files/ja/web/api/element/localname/index.md
index c6487f94b86316..3f2c98eee6902e 100644
--- a/files/ja/web/api/element/localname/index.md
+++ b/files/ja/web/api/element/localname/index.md
@@ -57,7 +57,8 @@ l10n:
 </ecomm:business>
 ```
 
-> **メモ:** このプロパティは内部 DOM ストレージの大文字小文字を忠実に返しますが、{{domxref("element.tagName", "tagName")}} プロパティは HTML DOM における HTML 要素でを大文字で返します。
+> [!NOTE]
+> このプロパティは内部 DOM ストレージの大文字小文字を忠実に返しますが、{{domxref("element.tagName", "tagName")}} プロパティは HTML DOM における HTML 要素でを大文字で返します。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/element/mousewheel_event/index.md b/files/ja/web/api/element/mousewheel_event/index.md
index a0b57cff1b7fc6..dbbebd10dc44ad 100644
--- a/files/ja/web/api/element/mousewheel_event/index.md
+++ b/files/ja/web/api/element/mousewheel_event/index.md
@@ -10,7 +10,8 @@ l10n:
 
 古い標準外の **`mousewheel`** イベントは、このイベントは {{domxref("Element")}} で非同期に発生し、マウスホイールまたは類似の機器を操作している間の更新を提供します。`mousewheel` イベントはどの標準にも含まれておらず、いくつかのブラウザーで実装されていましたが、Firefox で実装されることはありませんでした。
 
-> **メモ:** この古いイベントの代わりに、標準の {{domxref("Element.wheel_event", "wheel")}} イベントを使用してください。
+> [!NOTE]
+> この古いイベントの代わりに、標準の {{domxref("Element.wheel_event", "wheel")}} イベントを使用してください。
 
 ## 構文
 
@@ -59,7 +60,8 @@ _このインターフェイスには、祖先である {{DOMxRef("MouseEvent")}
 
 {{domxref("UIEvent/detail", "detail")}} プロパティの値は常にゼロです。ただし、Opera では `detail` は Firefox 専用の {{domxref("Element.DOMMouseScroll_event", "DOMMouseScroll")}} イベントの `detail` 値はスクロール距離を行単位で示し、負の値はスクロール移動が下方向または右方向であることを示し、正の値は上方向または左方向であることを示します。
 
-> **メモ:** macOS では、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。
+> [!NOTE]
+> macOS では、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。
 
 Linux では、`2` または `-2` がネイティブのホイールイベントごとに設定されます。
 
diff --git a/files/ja/web/api/element/mozmousepixelscroll_event/index.md b/files/ja/web/api/element/mozmousepixelscroll_event/index.md
index 651814f861c4d9..87cfa485ce90dd 100644
--- a/files/ja/web/api/element/mozmousepixelscroll_event/index.md
+++ b/files/ja/web/api/element/mozmousepixelscroll_event/index.md
@@ -10,7 +10,8 @@ l10n:
 
 Firefox 専用の、標準外、かつ廃止予定の **MozMousePixelScroll`** イベントは、マウスホイールなどが操作されたときに {{domxref("Element")}} で非同期に発生します。これは {{ domxref("MouseScrollEvent") }} インターフェイスで表されます。
 
-> **メモ:** この標準外の旧式のイベントは使用しないでください。代わりに、常に標準の {{domxref("Element.wheel_event", "wheel")}} イベントを使用してください。
+> [!NOTE]
+> この標準外の旧式のイベントは使用しないでください。代わりに、常に標準の {{domxref("Element.wheel_event", "wheel")}} イベントを使用してください。
 
 ## 構文
 
@@ -34,7 +35,8 @@ onMozMousePixelScroll = (event) => {};
 
 プラットフォームのネイティブマウスホイールイベントが行またはページ単位でスクロール距離を示している場合、`detail` の値はその値と、ターゲット要素を含む最も近い祖先のスクロール可能要素の行の高さまたはページの幅/高さを使用して計算されます。
 
-> **メモ:** macOSでは、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。
+> [!NOTE]
+> macOSでは、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。
 
 イベントが正当なものであれば、`detail` の値が 0 になることはありません。
 
diff --git a/files/ja/web/api/element/queryselectorall/index.md b/files/ja/web/api/element/queryselectorall/index.md
index dfb646d6e6bea9..675977951bc03c 100644
--- a/files/ja/web/api/element/queryselectorall/index.md
+++ b/files/ja/web/api/element/queryselectorall/index.md
@@ -24,13 +24,15 @@ querySelectorAll(selectors)
 
     なお、セレクターは `querySelectorAll()` が呼ばれた特定の要素だけでなく、文書全体に適用されることに注意してください。セレクターを `querySelectorAll()` が呼び出された要素に限定するには、セレクターの最初に [`:scope`](/ja/docs/Web/CSS/:scope) 擬似クラスを記述してください。[セレクターのスコープ](#セレクターのスコープ)の例を参照してください。
 
-> **メモ:** 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#エスケープシーケンス)を参照してください。
+> [!NOTE]
+> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#エスケープシーケンス)を参照してください。
 
 ### 返値
 
 生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。
 
-> **メモ:** 指定された `selectors` が [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含む場合、返されるリストは常に空になります。
+> [!NOTE]
+> 指定された `selectors` が [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含む場合、返されるリストは常に空になります。
 
 ### 例外
 
diff --git a/files/ja/web/api/element/requestpointerlock/index.md b/files/ja/web/api/element/requestpointerlock/index.md
index 4c84c241f3d67f..db90915ef5efca 100644
--- a/files/ja/web/api/element/requestpointerlock/index.md
+++ b/files/ja/web/api/element/requestpointerlock/index.md
@@ -30,7 +30,8 @@ requestPointerLock(options)
 
 {{jsxref("Promise")}} で、{{jsxref("undefined")}} に解決します。
 
-> **メモ:** ブラウザーによっては、プロミスバージョンの `requestPointerLock()` に対応していないものもあります。
+> [!NOTE]
+> ブラウザーによっては、プロミスバージョンの `requestPointerLock()` に対応していないものもあります。
 
 ## 例
 
diff --git a/files/ja/web/api/element/scrollheight/index.md b/files/ja/web/api/element/scrollheight/index.md
index 5ef799d4f198cd..004aa8fe2c76de 100644
--- a/files/ja/web/api/element/scrollheight/index.md
+++ b/files/ja/web/api/element/scrollheight/index.md
@@ -14,7 +14,8 @@ l10n:
 
 `scrollHeight` の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その `scrollHeight` は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。
 
-> **メモ:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。
+> [!NOTE]
+> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/scrollleft/index.md b/files/ja/web/api/element/scrollleft/index.md
index fb2e15dfd49ff1..68185c1d1685e3 100644
--- a/files/ja/web/api/element/scrollleft/index.md
+++ b/files/ja/web/api/element/scrollleft/index.md
@@ -18,7 +18,8 @@ l10n:
 - 指定された値が `0` より小さかったら（右書きの要素では `0` より大きかったら）、 `scrollLeft` は `0` に設定されます。
 - 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollLeft` は最大値に設定されます。
 
-> **警告:** 画面拡大を使用するシステムでは、 `scrollLeft` が小数になることがあります。
+> [!WARNING]
+> 画面拡大を使用するシステムでは、 `scrollLeft` が小数になることがあります。
 
 ## 値
 
diff --git a/files/ja/web/api/element/scrolltop/index.md b/files/ja/web/api/element/scrolltop/index.md
index 6406a0b4b6d955..c89ba172a4fdc0 100644
--- a/files/ja/web/api/element/scrolltop/index.md
+++ b/files/ja/web/api/element/scrolltop/index.md
@@ -20,7 +20,8 @@ l10n:
 
 `scrollTop` がルート要素（`<html>` 要素）に対して使用されると、ウィンドウの `scrollY` が返されます。[これは `scrollTop` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop)。
 
-> **警告:** 画面の拡大縮小を使用するシステムでは、`scrollTop` が小数になることがあります。
+> [!WARNING]
+> 画面の拡大縮小を使用するシステムでは、`scrollTop` が小数になることがあります。
 
 ## 値
 
diff --git a/files/ja/web/api/element/scrollwidth/index.md b/files/ja/web/api/element/scrollwidth/index.md
index 49f30520610909..4f6c8514e4ff3d 100644
--- a/files/ja/web/api/element/scrollwidth/index.md
+++ b/files/ja/web/api/element/scrollwidth/index.md
@@ -12,7 +12,8 @@ l10n:
 
 `scrollWidth` の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、垂直スクロールバー（ある場合）は含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 `scrollWidth` は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。
 
-> **メモ:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+> [!NOTE]
+> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/element/securitypolicyviolation_event/index.md b/files/ja/web/api/element/securitypolicyviolation_event/index.md
index cfac446d38f8ea..b3f16b9ea993fc 100644
--- a/files/ja/web/api/element/securitypolicyviolation_event/index.md
+++ b/files/ja/web/api/element/securitypolicyviolation_event/index.md
@@ -15,7 +15,8 @@ l10n:
 
 ハンドラーは `onsecuritypolicyviolation` プロパティを使用するか、{{domxref("EventTarget.addEventListener()")}} を使用して割り当てることができます。
 
-> **メモ:** このイベントのハンドラーは最上位のオブジェクト（{{domxref("Window")}} や {{domxref("Document")}} など）に追加する必要があります。
+> [!NOTE]
+> このイベントのハンドラーは最上位のオブジェクト（{{domxref("Window")}} や {{domxref("Document")}} など）に追加する必要があります。
 > HTML 要素にプロパティが存在する間は、要素が読み込まれるまでプロパティにイベントハンドラーを割り当てることはできません。
 
 ## 構文
diff --git a/files/ja/web/api/element/setcapture/index.md b/files/ja/web/api/element/setcapture/index.md
index 9320bfbdba0990..4064db0c15c01d 100644
--- a/files/ja/web/api/element/setcapture/index.md
+++ b/files/ja/web/api/element/setcapture/index.md
@@ -10,7 +10,8 @@ l10n:
 
 mousedown イベントの処理中にこのメソッドを呼び出すと、マウスボタンが離されるか {{domxref("document.releaseCapture()")}} が呼び出されるまで、この要素にすべてのマウスイベントを捕捉します。
 
-> **警告:** このインターフェイスにはブラウザー間の対応がほとんどありませんでした。おそらくお探しのものは {{domxref("element.setPointerCapture")}} （ポインターイベント API）でしょう。
+> [!WARNING]
+> このインターフェイスにはブラウザー間の対応がほとんどありませんでした。おそらくお探しのものは {{domxref("element.setPointerCapture")}} （ポインターイベント API）でしょう。
 
 ## 構文
 
diff --git a/files/ja/web/api/element/sethtml/index.md b/files/ja/web/api/element/sethtml/index.md
index 0796c174475b75..dbfb0f54a43aa1 100644
--- a/files/ja/web/api/element/sethtml/index.md
+++ b/files/ja/web/api/element/sethtml/index.md
@@ -15,7 +15,8 @@ l10n:
 既定の `Sanitizer()` 設定では、{{HTMLElement("script")}} タグ、カスタム要素、コメントを含む XSS 関連の入力が取り除かれます。
 無害化の設定は {{domxref("Sanitizer.Sanitizer", "Sanitizer()")}} コンストラクターのオプションを使用してカスタマイズすることができます。
 
-> **メモ:** 対象となる要素がまだない場合など、後の時点で DOM に文字列を挿入する必要がある場合は、このメソッドの代わりに {{domxref("Sanitizer.sanitizeFor()")}} を使用してください。
+> [!NOTE]
+> 対象となる要素がまだない場合など、後の時点で DOM に文字列を挿入する必要がある場合は、このメソッドの代わりに {{domxref("Sanitizer.sanitizeFor()")}} を使用してください。
 
 ## 構文
 
@@ -59,7 +60,8 @@ document
 // 結果 (文字列): "abc def"
 ```
 
-> **メモ:** この例では既定の無害化を使用しています。
+> [!NOTE]
+> この例では既定の無害化を使用しています。
 > {{domxref("Sanitizer/Sanitizer","Sanitizer")}} コンストラクターで無害化のオプションを構成することができます。
 
 ## 仕様書
diff --git a/files/ja/web/api/element/sethtmlunsafe/index.md b/files/ja/web/api/element/sethtmlunsafe/index.md
index 21bdfb0d50a7e0..c5b457bfa0205b 100644
--- a/files/ja/web/api/element/sethtmlunsafe/index.md
+++ b/files/ja/web/api/element/sethtmlunsafe/index.md
@@ -14,7 +14,8 @@ l10n:
 
 HTML の文字列が特定のシャドウホストに複数の[宣言的シャドウルート](/ja/docs/Web/HTML/Element/template#宣言的シャドウ_dom)を定義している場合、最初の {{domxref("ShadowRoot")}} だけが作成されます。以降の宣言は、そのシャドウルート内の `<template>` 要素として解釈できます。
 
-> **メモ:** このメソッドは、HTML の文字列が宣言的なシャドウルートを格納する可能性がある場合に、{{domxref("Element.innerHTML")}} の代わりに使用しましょう。
+> [!NOTE]
+> このメソッドは、HTML の文字列が宣言的なシャドウルートを格納する可能性がある場合に、{{domxref("Element.innerHTML")}} の代わりに使用しましょう。
 
 ## 構文
 
diff --git a/files/ja/web/api/element/setpointercapture/index.md b/files/ja/web/api/element/setpointercapture/index.md
index bf73aa717baf5c..07f2be133e5732 100644
--- a/files/ja/web/api/element/setpointercapture/index.md
+++ b/files/ja/web/api/element/setpointercapture/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`setPointerCapture()`** は {{domxref("Element")}} インターフェイスのメソッドで、特定の要素をこれ以降のポインターイベントの*キャプチャターゲット*として指定するために使用します。（{{domxref("Element.releasePointerCapture()")}} を介して、または {{domxref("Element/pointerup_event", "pointerup")}} イベントが発生して）キャプチャが解放されるまで、それ以降のポインターのイベントはキャプチャ要素をターゲットにします。
 
-> **メモ:** ポインターキャプチャ設定後、それ以降のポインターイベントはキャプチャ対象の要素内で発生したとみなされます。よって、 `pointerover`、`pointerenter`、`pointerleave`、`pointerout` は**発生しません**。
+> [!NOTE]
+> ポインターキャプチャ設定後、それ以降のポインターイベントはキャプチャ対象の要素内で発生したとみなされます。よって、 `pointerover`、`pointerenter`、`pointerleave`、`pointerout` は**発生しません**。
 > タッチ画面の機器などで[直接操作](https://w3c.github.io/pointerevents/#dfn-direct-manipulation)をしているブラウザーでは、 `pointerdown` イベント発生時に要素に対してポインターキャプチャが[自動的に適用](https://w3c.github.io/pointerevents/#dfn-implicit-pointer-capture)されます。ポインターキャプチャの解放は {{domxref('element.releasePointerCapture')}} メソッドを手動で呼び出したとき、または `pointerup` もしくは `pointercancel` イベント発生時に自動的に行われます。
 
 ### ポインターキャプチャの概要
diff --git a/files/ja/web/api/elementinternals/ariahidden/index.md b/files/ja/web/api/elementinternals/ariahidden/index.md
index a878077eb3b323..01d8b00c20716a 100644
--- a/files/ja/web/api/elementinternals/ariahidden/index.md
+++ b/files/ja/web/api/elementinternals/ariahidden/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ariaHidden`** は {{domxref("ElementInternals")}} インターフェイスのプロパティで、[`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) 属性の値を反映し、要素がアクセシビリティ API に公開されているかどうかを示します。
 
-> **メモ:** aria 属性を `ElementInternals` に設定すると、カスタム要素に既定の意味づけを定義することができます。これらは作成者が定義した属性によって上書きされる可能性がありますが、作成者が属性を削除したり、まったく追加しなかった場合でも、確実に既定の意味づけを保持することができます。より詳しい情報は、 [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object) を参照してください。
+> [!NOTE]
+> aria 属性を `ElementInternals` に設定すると、カスタム要素に既定の意味づけを定義することができます。これらは作成者が定義した属性によって上書きされる可能性がありますが、作成者が属性を削除したり、まったく追加しなかった場合でも、確実に既定の意味づけを保持することができます。より詳しい情報は、 [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object) を参照してください。
 
 ## 値
 
diff --git a/files/ja/web/api/elementinternals/index.md b/files/ja/web/api/elementinternals/index.md
index 319f8254f8ae4b..fcc5de6570c132 100644
--- a/files/ja/web/api/elementinternals/index.md
+++ b/files/ja/web/api/elementinternals/index.md
@@ -34,7 +34,8 @@ l10n:
 
 `ElementInternals` インターフェイスには以下のプロパティもあります。
 
-> **メモ:** これらは、カスタム要素に既定のアクセシビリティ上の意味を定義できるようにするために取り込まれています。これらは作者が定義した属性によって上書きされる可能性がありますが、作者が属性を削除したり追加しなかったりした場合でも、既定の意味が保持されるようにします。詳しくは、 [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object) を参照してください。
+> [!NOTE]
+> これらは、カスタム要素に既定のアクセシビリティ上の意味を定義できるようにするために取り込まれています。これらは作者が定義した属性によって上書きされる可能性がありますが、作者が属性を削除したり追加しなかったりした場合でも、既定の意味が保持されるようにします。詳しくは、 [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object) を参照してください。
 
 - {{domxref("ElementInternals.ariaAtomic")}}
   - : [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) 属性を反映した文字列で、[`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。
diff --git a/files/ja/web/api/elementinternals/setformvalue/index.md b/files/ja/web/api/elementinternals/setformvalue/index.md
index 6c3bfa3957d576..8af29fdc35994d 100644
--- a/files/ja/web/api/elementinternals/setformvalue/index.md
+++ b/files/ja/web/api/elementinternals/setformvalue/index.md
@@ -25,7 +25,8 @@ setFormValue(value, state)
   - : {{domxref("File")}}、文字列、{{domxref("FormData")}} のいずれかで、ユーザーの入力を表します。
     これにより、アプリケーションは必要に応じて、ユーザーが送信した情報を、ユーザーが入力した形式で再表示することができます。
 
-> **メモ:** 一般的に、 `state` はユーザーがー指定した情報を渡すために、 `value` はサニタイズ後、サーバーに送信するのに適した情報を渡すために使用されます。
+> [!NOTE]
+> 一般的に、 `state` はユーザーがー指定した情報を渡すために、 `value` はサニタイズ後、サーバーに送信するのに適した情報を渡すために使用されます。
 > たとえば、カスタム要素で日付の入力を求められた場合、ユーザーは「3/15/2019」と入力するかもしれません。
 > これは `state` です。
 > サーバーは `2019-03-15` という日付書式を期待しているので、この書式の日付が `value` として渡されます。
diff --git a/files/ja/web/api/elementinternals/setvalidity/index.md b/files/ja/web/api/elementinternals/setvalidity/index.md
index 07ceeae14c6e51..f8547aae5ef601 100644
--- a/files/ja/web/api/elementinternals/setvalidity/index.md
+++ b/files/ja/web/api/elementinternals/setvalidity/index.md
@@ -45,7 +45,8 @@ setValidity(flags, message, anchor)
     - `customError`
       - : 論理値で、この要素の {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} メソッドを呼び出すことで、要素のカスタム有効性メッセージが空でない文字列に設定されたかどうかを示します。
 
-    > **メモ:** すべてのフラグを `false` に設定し、この要素がすべての制約の検証に合格したことを示すには、空のオブジェクト `{}` を渡してください。この場合、 `message` も渡す必要はありません。
+    > [!NOTE]
+    > すべてのフラグを `false` に設定し、この要素がすべての制約の検証に合格したことを示すには、空のオブジェクト `{}` を渡してください。この場合、 `message` も渡す必要はありません。
 
 - `message` {{Optional_Inline}}
   - : `flags` が `true` の場合に設定されるメッセージを含む文字列。すべての `flags` が `false` の場合のみ、この引数はオプションとなります。
diff --git a/files/ja/web/api/event/bubbles/index.md b/files/ja/web/api/event/bubbles/index.md
index 266edad69fef57..d7bbdbadf1ceb5 100644
--- a/files/ja/web/api/event/bubbles/index.md
+++ b/files/ja/web/api/event/bubbles/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`bubbles`** は {{domxref("Event")}} インターフェイスの読み取り専用プロパティで、イベントが DOM ツリーをバブリングするかしないかを示します。
 
-> **メモ:** バブリングについての詳細は、[イベントのバブリングとキャプチャ](/ja/docs/Learn/JavaScript/Building_blocks/Events#イベントのバブリングとキャプチャリング)を参照してください。
+> [!NOTE]
+> バブリングについての詳細は、[イベントのバブリングとキャプチャ](/ja/docs/Learn/JavaScript/Building_blocks/Events#イベントのバブリングとキャプチャリング)を参照してください。
 
 ## 値
 
diff --git a/files/ja/web/api/event/currenttarget/index.md b/files/ja/web/api/event/currenttarget/index.md
index 63c7f487e9ab5b..b2dd05b85ce140 100644
--- a/files/ja/web/api/event/currenttarget/index.md
+++ b/files/ja/web/api/event/currenttarget/index.md
@@ -37,7 +37,8 @@ document.body.addEventListener("click", hide, false);
 // 周辺をクリックすると段落が消えます。
 ```
 
-> **メモ:** イベント処理中*だけ* `event.currentTarget` の値は利用可能です。
+> [!NOTE]
+> イベント処理中*だけ* `event.currentTarget` の値は利用可能です。
 > もし {{DOMxRef("console.log()")}} で `event` オブジェクトを変数に格納し、コンソールで `currentTarget` キーを探すと、その値は `null` となります
 > `console.log(event.currentTarget)` を使ってコンソールで表示するか、 [`debugger`](/ja/docs/Web/JavaScript/Reference/Statements/debugger) 文を使ってコードの実行を一時停止し、 `event.currentTarget` の値を表示させる必要があります。
 
diff --git a/files/ja/web/api/event/index.md b/files/ja/web/api/event/index.md
index 64b1a47d43d562..bb3ca919003f56 100644
--- a/files/ja/web/api/event/index.md
+++ b/files/ja/web/api/event/index.md
@@ -15,7 +15,8 @@ l10n:
 
 多くの DOM 要素は、これらのイベントを受け入れる（または「待ち受けする」）ように設定することができ、それに応じてコードを実行してイベントを処理する（または「取り扱う」）ことができます。イベントハンドラーはふつう、様々な [HTML 要素](/ja/docs/Web/HTML/Element)（`<button>`, `<div>`, `<span>`, など）に [`EventTarget.addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使用して結び付けられ（または「装着され」）、これが一般に古い HTML の[イベントハンドラー属性](/ja/docs/Web/HTML/Global_attributes)を使用する方法を置き換えています。さらに、このようなハンドラーは正しく追加されたら、必要に応じて [`removeEventListener()`](/ja/docs/Web/API/EventTarget/removeEventListener) を使用して切り離すことができます。
 
-> **メモ:** 1 つの要素が、まったく同じイベントに対して複数のハンドラーを持つこともできます。特に、別々の独立したコードモジュールが、それぞれ独立した目的のためにハンドラーを装着する場合（例えば、広告モジュールと統計モジュールの両方がビデオ視聴を監視しているウェブページ）です。
+> [!NOTE]
+> 1 つの要素が、まったく同じイベントに対して複数のハンドラーを持つこともできます。特に、別々の独立したコードモジュールが、それぞれ独立した目的のためにハンドラーを装着する場合（例えば、広告モジュールと統計モジュールの両方がビデオ視聴を監視しているウェブページ）です。
 
 数多くの入れ子になった要素があり、それぞれに独自のイベントハンドラーがあった場合、イベントの処理はとても複雑になります。特に、親要素が子要素と全く同じイベントを受け取る場合、「空間的に」重なり合っているので、技術的にはイベントは両方で発生し、そのようなイベントの処理順序は、トリガーされた各ハンドラーの[イベントのバブリングとキャプチャ](/ja/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)の設定次第で決まります。
 
diff --git a/files/ja/web/api/event/preventdefault/index.md b/files/ja/web/api/event/preventdefault/index.md
index 0a456f9300dda6..de87e93e0aec1b 100644
--- a/files/ja/web/api/event/preventdefault/index.md
+++ b/files/ja/web/api/event/preventdefault/index.md
@@ -3,10 +3,10 @@ title: "Event: preventDefault() メソッド"
 short-title: preventDefault()
 slug: Web/API/Event/preventDefault
 l10n:
-  sourceCommit: 32b07aa5b6ac4799a88e7b87a4d8333643ab6427
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{apiref("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`preventDefault()`** は {{domxref("Event")}} インターフェイスのメソッドで、{{Glossary("user agent", "ユーザーエージェント")}}に、このイベントが明示的に処理されない場合に、その既定のアクションを通常どおりに行うべきではないことを伝えます。
 
@@ -78,7 +78,7 @@ function checkboxClick(event) {
 
 #### CSS
 
-ユーザが無効なキーを押したときに描画する警告ボックスには、CSS を少し使用します。
+ユーザーが無効なキーを押したときに描画する警告ボックスには、CSS を少し使用します。
 
 ```css
 .warning {
diff --git a/files/ja/web/api/eventsource/close/index.md b/files/ja/web/api/eventsource/close/index.md
index 7abc0326a41c73..eef4fe20697d65 100644
--- a/files/ja/web/api/eventsource/close/index.md
+++ b/files/ja/web/api/eventsource/close/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`close()`** は {{domxref("EventSource")}} インターフェイスのメソッドで、コネクションが構築されていればそれを閉じ、 {{domxref("EventSource.readyState")}} 属性を `2` （接続終了）に設定します。
 
-> **メモ:** コネクションが既に閉じられていた場合、このメソッドは何も行いません。
+> [!NOTE]
+> コネクションが既に閉じられていた場合、このメソッドは何も行いません。
 
 ## 構文
 
@@ -37,7 +38,8 @@ button.onclick = () => {
 };
 ```
 
-> **メモ:** 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
+> [!NOTE]
+> 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/eventsource/eventsource/index.md b/files/ja/web/api/eventsource/eventsource/index.md
index c1468bf4346ede..e0c767712bbf17 100644
--- a/files/ja/web/api/eventsource/eventsource/index.md
+++ b/files/ja/web/api/eventsource/eventsource/index.md
@@ -41,7 +41,8 @@ evtSource.onmessage = (e) => {
 };
 ```
 
-> **メモ:** 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
+> [!NOTE]
+> 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/eventsource/index.md b/files/ja/web/api/eventsource/index.md
index bf1f046f85dddc..b78969d1c64862 100644
--- a/files/ja/web/api/eventsource/index.md
+++ b/files/ja/web/api/eventsource/index.md
@@ -71,7 +71,8 @@ evtSource.onmessage = (e) => {
 
 受信されたそれぞれのイベントは、 `EventSource` オブジェクトの `onmessage` イベントハンドラーを実行させます。ここでは、新しい {{HTMLElement("li")}} 要素を生成してその中にメッセージのデータを書き込み、この要素を文書の中にある既存のリスト要素に追加します。
 
-> **メモ:** この例の全容が GitHub にあります。[Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events) をご覧ください。
+> [!NOTE]
+> この例の全容が GitHub にあります。[Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events) をご覧ください。
 
 名前付きのイベントを待ち受けするには、送信されるイベントの種類ごとにリスナーが必要になります。
 
diff --git a/files/ja/web/api/eventsource/readystate/index.md b/files/ja/web/api/eventsource/readystate/index.md
index b712cd6d29e1b5..40c813c47a0996 100644
--- a/files/ja/web/api/eventsource/readystate/index.md
+++ b/files/ja/web/api/eventsource/readystate/index.md
@@ -24,7 +24,8 @@ const evtSource = new EventSource("sse.php");
 console.log(evtSource.readyState);
 ```
 
-> **メモ:** 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
+> [!NOTE]
+> 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/eventsource/url/index.md b/files/ja/web/api/eventsource/url/index.md
index 9a660d3d303c1f..df897cd4d16c77 100644
--- a/files/ja/web/api/eventsource/url/index.md
+++ b/files/ja/web/api/eventsource/url/index.md
@@ -20,7 +20,8 @@ const evtSource = new EventSource("sse.php");
 console.log(evtSource.url);
 ```
 
-> **メモ:** 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
+> [!NOTE]
+> 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/eventsource/withcredentials/index.md b/files/ja/web/api/eventsource/withcredentials/index.md
index 33b8dc224c7de3..60d05c8194aa3f 100644
--- a/files/ja/web/api/eventsource/withcredentials/index.md
+++ b/files/ja/web/api/eventsource/withcredentials/index.md
@@ -20,7 +20,8 @@ const evtSource = new EventSource("sse.php");
 console.log(evtSource.withCredentials);
 ```
 
-> **メモ:** 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
+> [!NOTE]
+> 完全な例は GitHub で見られます。 [PHP を用いた簡単な SSE のデモ](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/eventtarget/addeventlistener/index.md b/files/ja/web/api/eventtarget/addeventlistener/index.md
index bce731ab8c42f2..b1db90dce81b47 100644
--- a/files/ja/web/api/eventtarget/addeventlistener/index.md
+++ b/files/ja/web/api/eventtarget/addeventlistener/index.md
@@ -1,15 +1,16 @@
 ---
 title: "EventTarget: addEventListener() メソッド"
+short-title: addEventListener()
 slug: Web/API/EventTarget/addEventListener
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: ded971d7fec855c2b81fde8809172697f2e227c1
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`addEventListener()`** は {{domxref("EventTarget")}} インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
 
-対象としてよくあるものは {{domxref("Element")}}、{{domxref("Document")}}、{{domxref("Window")}} ですが、イベントに対応したあらゆるオブジェクトが対象になることができます （{{domxref("XMLHttpRequest")}} など）。
+対象としてよくあるものは {{domxref("Element")}}、{{domxref("Document")}}、{{domxref("Window")}} ですが、イベントに対応したあらゆるオブジェクトが対象になることができます（{{domxref("IDBRequest")}} など）。
 
 > **メモ:** `addEventListener()` メソッドは、イベントリスナーを登録するための*推奨される*方法です。以下のような長所があります。
 >
@@ -17,9 +18,10 @@ l10n:
 > - `onXYZ` プロパティを使用するのとは対照的に、リスナーが起動されるときのフェーズ（キャプチャとバブリング）をより細かく制御できます。
 > - HTML や SVG の要素だけでなく、あらゆるイベントターゲットで動作します。
 
-`addEventListener()` は関数または {{domxref("EventTarget.addEventListener", "EventListener")}} を実装したオブジェクトを、呼び出される {{domxref("EventTarget")}} における指定されたイベント種別のイベントリスナーのリストに加えることで動作します。その関数やオブジェクトが既にターゲットのイベントリスナーのリストにあった場合は、その関数やオブジェクトが二重に追加されることはありません。
+`addEventListener()` メソッドは、関数または `handleEvent()` 関数を実装したオブジェクトを、呼び出される {{domxref("EventTarget")}} における指定されたイベント種別のイベントリスナーのリストに加えることで動作します。その関数やオブジェクトが既にターゲットのイベントリスナーのリストにあった場合は、その関数やオブジェクトが二重に追加されることはありません。
 
-> **メモ:** ある無名関数が特定のターゲットでイベントリスナーのリストに登録されており、後のコードで同じ無名関数が `addEventListener` の呼び出しに指定された場合、2 つ目の関数*も*そのターゲットのイベントリスナーのリストに追加されます。
+> [!NOTE]
+> ある無名関数が特定のターゲットでイベントリスナーのリストに登録されており、後のコードで同じ無名関数が `addEventListener` の呼び出しに指定された場合、2 つ目の関数*も*そのターゲットのイベントリスナーのリストに追加されます。
 >
 > 実際、無名関数は、*同じ*変更のないソースコードで定義されて繰り返し呼び出されても、**繰り返しの中でも**同一にはなりません。
 >
@@ -41,17 +43,22 @@ addEventListener(type, listener, useCapture)
 - `type`
   - : 対象とする[イベントの種類](/ja/docs/Web/Events)を表す文字列です。
 - `listener`
-  - : 指定された種類のイベントが発生するときに通知（{{domxref("Event")}} インターフェースを実装しているオブジェクト）を受け取るオブジェクト。これは `null` であるか、`handleEvent()` メソッドのあるオブジェクトか、JavaScript の[関数](/ja/docs/Web/JavaScript/Guide/Functions)の何れかでなければなりません。コールバックについて詳しくは、[イベントリスナーのコールバック](#イベントリスナーのコールバック)を参照してください。
+  - : 指定された種類のイベントが発生するときに通知（{{domxref("Event")}} インターフェイスを実装しているオブジェクト）を受け取るオブジェクト。これは `null` であるか、`handleEvent()` メソッドのあるオブジェクトか、JavaScript の[関数](/ja/docs/Web/JavaScript/Guide/Functions)のいずれかでなければなりません。コールバックについて詳しくは、[イベントリスナーのコールバック](#イベントリスナーのコールバック)を参照してください。
 - `options` {{optional_inline}}
 
-  - : 対象のイベントリスナーの特性を指定する、オプションのオブジェクトです。次のオプションが使用できます。
+  - : 対象のイベントリスナーの特性を指定する、オプションのオブジェクトです。
+    次のオプションが使用できます。
 
     - `capture` {{optional_inline}}
       - : 論理値で、この型のイベントが DOM ツリーで下に位置する `EventTarget` に配信 (dispatch) される前に、登録された `listener` に配信されることを示します。指定されていない場合は、既定で `false` になります。
     - `once` {{optional_inline}}
       - : 論理値で、 `listener` の呼び出しを一回のみのとしたいかどうかを値で指定します。 `true` を指定すると、 `listener` は一度実行された時に自動的に削除されます。指定されていない場合は、既定で `false` になります。
     - `passive` {{optional_inline}}
-      - : 論理値で、 `true` ならば、 `listener` で指定された関数が {{domxref("Event.preventDefault", "preventDefault()")}} を呼び出さないことを示します。呼び出されたリスナーが `preventDefault()` を呼び出すと、ユーザーエージェントは何もせず、コンソールに警告を出力します。指定されていない場合、既定で `false` になります。ただし、Safari 以外のブラウザーでは、{{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}}、{{domxref("Element/touchmove_event", "touchmove")}} の各イベントでは `true` になります。詳細は[パッシブリスナーによるスクロールの性能改善](#パッシブリスナーによるスクロールの性能改善)をご覧ください。
+
+      - : 論理値で、`true` ならば、 `listener` で指定された関数が {{domxref("Event.preventDefault", "preventDefault()")}} を呼び出さないことを示します。呼び出されたリスナーが `preventDefault()` を呼び出すと、ユーザーエージェントは何もせず、コンソールに警告を出力します。
+
+      このオプションが指定されていない場合、既定で `false` になります。ただし、Safari 以外のブラウザーでは、{{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}}、{{domxref("Element/touchmove_event", "touchmove")}} の各イベントでは `true` になります。詳細は[パッシブリスナーの使用](#パッシブリスナーの使用)をご覧ください。
+
     - `signal` {{optional_inline}}
       - : {{domxref("AbortSignal")}} です。指定された `AbortSignal` オブジェクトの {{domxref("AbortController/abort()", "abort()")}} メソッドが呼び出された時に、リスナーが削除されます。指定されていない場合は、`AbortSignal` がリスナーに関連付けられません。
 
@@ -60,11 +67,12 @@ addEventListener(type, listener, useCapture)
   - : 論理値で、この型のイベントが、DOM ツリー内の下の `EventTarget` に配信される*前*に、登録された `listener` に配信されるかどうかを示します。ツリーを上方向にバブリングしているイベントは、キャプチャを使用するように指定されたリスナーを起動しません。イベントのバブリングとキャプチャは、両方の要素がそのイベントのハンドラーを登録している場合に、別の要素内に入れ子になっている要素で発生するイベントを伝播する 2 つの方法です。イベント伝播モードは、要素がイベントを受け取る順番を決定します。詳細な説明は [DOM Level 3 Events](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow) と [JavaScript Event order](https://www.quirksmode.org/js/events_order.html#link4) を参照してください。
     指定されていない場合、 `useCapture` は既定で `false` となります。
 
-    > **メモ:** イベントターゲットに登録されたイベントリスナーは、キャプチャフェーズやバブリングフェーズではなく、ターゲットフェーズのイベントになります。
-    > キャプチャリングフェーズのイベントリスナーは、キャプチャリングフェーズ以外のイベントリスナーよりも先に呼び出されます。
+    > [!NOTE]
+    > イベントターゲットに登録されたイベントリスナーは、キャプチャフェーズやバブリングフェーズではなく、ターゲットフェーズのイベントになります。
+    > キャプチャフェーズのイベントリスナーは、キャプチャフェーズ以外のイベントリスナーよりも先に呼び出されます。
 
 - `wantsUntrusted` {{optional_inline}} {{non-standard_inline}}
-  - : `true` の場合、このリスナーはウェブコンテンツによって発行された合成イベント (カスタムイベント) を受け取ります (ブラウザーの{{glossary("chrome", "クローム")}}では既定で `false` ですが、一般のウェブページでは `true` です)。この引数は、主にアドオンやブラウザー自身の役に立つものです。
+  - : Firefox (Gecko) 独自の引数です。`true` の場合、このリスナーはウェブコンテンツによって発行された合成イベント (カスタムイベント) を受け取ります (ブラウザーの{{glossary("chrome", "クローム")}}では既定で `false` ですが、一般のウェブページでは `true` です)。この引数は、主にアドオンやブラウザー自身の役に立つものです。
 
 ### 返値
 
@@ -74,18 +82,18 @@ addEventListener(type, listener, useCapture)
 
 ### イベントリスナーのコールバック
 
-イベントリスナーには、コールバック関数または `handleEvent()` メソッドを持つオブジェクトの何れかをコールバック関数として指定することができます。
+イベントリスナーには、コールバック関数または `handleEvent()` メソッドを持つオブジェクトのいずれかをコールバック関数として指定することができます。
 
 コールバック関数自体は、 `handleEvent()` メソッドと同じ引数と返値を持ちます。つまり、コールバック関数は発生したイベントを説明する {{domxref("Event")}} に基づくオブジェクトを唯一の引数として受け付け、何も返しません。
 
 たとえば、次のイベントハンドラーコールバックは、 {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} および {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} の両方を処理するために使用することができます。
 
 ```js
-function eventHandler(event) {
+function handleEvent(event) {
   if (event.type === "fullscreenchange") {
-    /* handle a full screen toggle */
+    /* 全画面モードへの切り替えを処理 */
   } else {
-    /* handle a full screen toggle error */
+    /* 全画面モードへの切り替えエラーを処理 */
   }
 }
 ```
@@ -134,9 +142,208 @@ someElement.addEventListener(
 
 ここでは、 {{domxref("Element/mouseup_event", "mouseup")}} イベントのリスナーを `someElement` 要素に追加しています。第 3 引数の `passiveSupported` が `true` である場合、 `options` オブジェクトを `passive` を `true` に設定して指定しています。そうでない場合は、論理値を渡す必要があることがわかっているので、 `useCapture` 引数の値として `false` を渡しています。
 
-ご希望であれば、 [Modernizr](https://modernizr.com/docs) や [Detect It](https://github.com/rafgraph/detect-it) のようなサードパーティ製のライブラリーを使用してこのテストを行うことができます。
+[機能検出の実装](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)のドキュメントや [Web Incubator Community Group](https://wicg.github.io/admin/charter.html) の [`EventListenerOptions`](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection) に関する説明で詳しく学ぶことができます。
+
+### ハンドラー内での "this" の値
+
+イベントハンドラーが発行された要素を参照することはよくあることで、似たような要素の設定に汎用ハンドラーを使用する場合などに便利です。
+
+ハンドラー関数を `addEventListener()` を使用して要素に装着する場合、ハンドラー内の {{jsxref("Operators/this","this")}} の値は要素を参照します。ハンドラーに渡すイベント引数の `currentTarget` プロパティの値と同じになります。
+
+```js
+my_element.addEventListener("click", function (e) {
+  console.log(this.className); // my_element の className をログ出力
+  console.log(e.currentTarget === this); // `true` をログ出力
+});
+```
+
+注意点として、[アロー関数は自分自身で `this` コンテキストを持つことはありません](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#メソッドとしては使用不可)。
+
+```js
+my_element.addEventListener("click", (e) => {
+  console.log(this.className); // 警告: `this` は `my_element` ではない
+  console.log(e.currentTarget === this); // `false` をログ出力
+});
+```
+
+イベントハンドラー（例えば、{{domxref("Element.click_event", "onclick")}}）が HTML ソースの要素に指定されている場合、属性値の JavaScript コードは実質的にハンドラー関数にラップされ、`addEventListener()` と整合する方法で `this` の値にバインドされます。コード内に `this` が現れた場合は、要素への参照を表します。
+
+```html
+<table id="my_table" onclick="console.log(this.id);">
+  <!-- `this` が table にバインドされ、'my_table' がログ出力される -->
+  …
+</table>
+```
+
+属性値内のコードによって呼び出された関数内の `this` の値は、[標準ルール](/ja/docs/Web/JavaScript/Reference/Operators/this) に従って動作することに注意してください。これは次の例で表示されます。
+
+```html
+<script>
+  function logID() {
+    console.log(this.id);
+  }
+</script>
+<table id="my_table" onclick="logID();">
+  <!-- 呼び出された際、`this` はグローバルオブジェクトを指す -->
+  …
+</table>
+```
+
+`logID()` 内の `this` の値はグローバルオブジェクト {{domxref("Window")}} への参照です（[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)の場合は `undefined`）。
+
+#### bind() を使用した "this" の設定
+
+{{jsxref("Function.prototype.bind()")}} メソッドを使用すると、修正された `this` コンテキストをその後のすべての呼び出しに使用することができます。ただし、リスナーへの参照を保持しておく必要があることに注意してください。
 
-[Web Incubator Community Group](https://wicg.github.io/admin/charter.html) の [`EventListenerOptions`](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection) の記事を参考にしてください。
+これは `bind()` を使用した例と使用しない例です。
+
+```js
+class Something {
+  name = "Something Good";
+  constructor(element) {
+    // bind によって、修正された `this` コンテキストを `onclick2` に代入される
+    this.onclick2 = this.onclick2.bind(this);
+    element.addEventListener("click", this.onclick1, false);
+    element.addEventListener("click", this.onclick2, false); // Trick
+  }
+  onclick1(event) {
+    console.log(this.name); // undefined（`this` が要素であるため）
+  }
+  onclick2(event) {
+    console.log(this.name); // 'Something Good'（`this` が Something インターフェイスに結び付けられているため）
+  }
+}
+
+const s = new Something(document.body);
+```
+
+もう一つの解決策は、`handleEvent()` と呼ばれる特別な関数を使用してイベントを捕捉することです。
+
+```js
+class Something {
+  name = "Something Good";
+  constructor(element) {
+    // この場合のリスナーは `this` であり、 this.handleEvent ではないことに注意
+    element.addEventListener("click", this, false);
+    element.addEventListener("dblclick", this, false);
+  }
+  handleEvent(event) {
+    console.log(this.name); // 'Something Good'（新しく作成されたオブジェクトに結び付けられているため）
+    switch (event.type) {
+      case "click":
+        // ここにいくらかのコード…
+        break;
+      case "dblclick":
+        // ここにいくらかのコード…
+        break;
+    }
+  }
+}
+
+const s = new Something(document.body);
+```
+
+`this` への参照を処理するもう一つの方法は、別個の `this` コンテキストを作成しないアロー関数を使用することです。
+
+```js
+class SomeClass {
+  name = "Something Good";
+
+  register() {
+    window.addEventListener("keydown", (e) => {
+      this.someMethod(e);
+    });
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch (e.code) {
+      case "ArrowUp":
+        // ここにいくらかのコード…
+        break;
+      case "ArrowDown":
+        // ここにいくらかのコード…
+        break;
+    }
+  }
+}
+
+const myObject = new SomeClass();
+myObject.register();
+```
+
+### イベントリスナーのデータの出し入れ
+
+イベントリスナーは {{domxref("Event")}} または `Event` のサブクラスの引数を 1 つだけ取りますが、これは自動的にリスナーに渡され、返値は無視されます。
+したがって、イベントリスナーにデータを取得したり、イベントリスナーからデータを取得したりするには、引数と返値でデータを渡すのではなく、代わりに[クロージャ](/ja/docs/Web/JavaScript/Closures)を作成する必要があります。
+
+イベントリスナーとして渡された関数は、その関数を格納する外部スコープで宣言されたすべての変数にアクセスすることができます。
+
+```js
+const myButton = document.getElementById("my-button-id");
+let someString = "Data";
+
+myButton.addEventListener("click", () => {
+  console.log(someString);
+  // 最初のクリックでは 'Data' となり、
+  // 2 番目のクリックでは 'Data Again' となる
+
+  someString = "Data Again";
+});
+
+console.log(someString); // 期待される値: 'Data' （'Data Again' とはならない）
+```
+
+関数スコープに関する詳細情報は、[関数ガイド](/ja/docs/Web/JavaScript/Guide/Functions#関数のスコープ)をお読みください。
+
+### メモリーの問題
+
+```js
+const elts = document.getElementsByTagName("*");
+
+// ケース 1
+for (const elt of elts) {
+  elt.addEventListener(
+    "click",
+    (e) => {
+      // 何かを行う
+    },
+    false,
+  );
+}
+
+// ケース 2
+function processEvent(e) {
+  // 何かを行う
+}
+
+for (const elt of elts) {
+  elt.addEventListener("click", processEvent, false);
+}
+```
+
+上記の 1 つ目のケースでは、ループの繰り返しごとに新しい（無名の）ハンドラー関数が作成されます。一方、 2 つ目のケースでは、以前に宣言した同じ関数がイベントハンドラーとして使用され、作成されるハンドラー関数が 1 つであるため、メモリー消費量が少なくなります。さらに、最初のケースでは、無名関数への参照が保持されないため、 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} を呼び出すことができません（ここでは、ループが生成する可能性がある複数の無名関数への参照が保持されません）。2 番目のケースでは、`processEvent` が関数の参照なので、`myElement.removeEventListener("click", processEvent, false)` を実行することが可能です。
+
+実は、メモリー消費に関しては、関数参照を保持しないことが本当の問題ではなく、むしろ、*静的*な関数参照を保持しないことが問題なのです。
+
+### パッシブリスナーの使用
+
+イベントに既定のアクションがある場合、例えば、既定でコンテナーをスクロールする {{domxref("Element/wheel_event", "wheel")}} イベントの場合、イベントリスナーが {{domxref("Event.preventDefault()")}} を呼び出して既定のアクションをキャンセルするかどうかを事前に知ることができないため、ブラウザーは一般的にイベントリスナーが完了するまで既定のアクションを開始することができません。イベントリスナーの実行に時間がかかりすぎると、既定のアクションが実行されるまでに、{{glossary("jank", "ジャンク")}}と呼ばれる顕著な遅延が発生する可能性があります。
+
+`passive` オプションを `true` に設定することで、イベントリスナーは既定のアクションを取り消される可能性がないことを宣言します。リスナーが {{domxref("Event.preventDefault()")}} を呼び出しても、効果はありません。
+
+`addEventListener()` の仕様書では、`passive` オプションの既定値は常に `false` であると定義しています。しかし、パッシブリスナーのスクロールパフォーマンスの利点を古いコードで実現するために、最近のブラウザーでは {{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}}、{{domxref("Element/touchmove_event", "touchmove")}} の各イベントの `passive` オプションの既定値が、文書レベルノード {{domxref("Window")}}、{{domxref("Document")}}、{{domxref("Document.body")}} においては `true` に変更されています。これにより、イベントリスナーが[イベントが取り消される可能性](/ja/docs/Web/API/Event/preventDefault)を防ぐことができるので、ユーザーがスクロールしている間にページのレンダリングをブロックすることはありません。
+
+そのため、（既定値に頼らずに）その動作を上書きして `passive` オプションを確実に `false` にしたい場合は、明示的にこのオプションを `false` に設定する必要があります。
+
+基本的な {{domxref("Element/scroll_event", "scroll")}} イベントについて、`passive` の値を気にする必要はありません。
+取り消される可能性がないため、イベントリスナーがページのレンダリングをブロックすることはありません。
+
+パッシブリスナーの効果を示す例については[パッシブリスナーによるスクロールの性能改善](#パッシブリスナーによるスクロールの性能改善)を参照してください。
+
+### 古いブラウザーの場合
+
+`addEventListener()` の引数 `options` に対応していない古いブラウザーでは、これを使用しようとすると、[機能検出](#オプションの対応の安全な検出)を適切に使用しない限り、引数 `useCapture` が使用できなくなります。
 
 ## 例
 
@@ -172,7 +379,7 @@ const el = document.getElementById("outside");
 el.addEventListener("click", modifyText, false);
 ```
 
-このコードの中で、 `modifyText()` が `addEventListener()` を使用して登録された `click` イベントのリスナーです。表の中のどこかをクリックすると、ハンドラーまでバブリングし、 `modifyText()` が実行されます。
+このコードの中で、 `modifyText()` は `click` イベントのリスナーであり、`addEventListener()` を使用して登録されています。表の中のどこかをクリックすると、ハンドラーまでバブリングし、`modifyText()` が実行されます。
 
 #### 結果
 
@@ -215,7 +422,7 @@ function modifyText() {
 }
 ```
 
-上の例では、2 行目の内容が "three" に変わった後に、 `addEventListener()` に渡した {{domxref("AbortController")}} から `abort()` を呼び出すようにコードを変更しました。その結果、クリックイベントを待ち受けするコードがなくなったので、値は永遠に "three" のままとなります。
+上の例では、2 行目のコンテンツが "three" に変更された後に、 `addEventListener()` の呼び出しに渡した {{domxref("AbortController")}} から `abort()` を呼び出すように、前回のコードを変更しています。その結果、クリックイベントを待ち受けするコードがなくなったので、値は永遠に "three" のままとなります。
 
 #### 結果
 
@@ -266,7 +473,7 @@ el.addEventListener(
 
 ### アロー関数を使用したイベントリスナー
 
-この例はアロー関数表記を使用して実装された、簡単なイベントリスナーを紹介しています。
+この例はアロー関数記法を使用して実装された、簡単なイベントリスナーを紹介しています。
 
 #### HTML
 
@@ -305,7 +512,7 @@ el.addEventListener(
 
 {{EmbedLiveSample('Event_listener_with_an_arrow_function')}}
 
-なお、無名関数とアロー関数は似ており、違いは `this` を結び付けるかどうかです。無名関数 (および従来のすべての JavaScript 関数) は固有の `this` を作成するのに対し、アロー関数はそれを含む関数の `this` を継承します。
+なお、無名関数とアロー関数は似ており、違いは `this` を結び付けるかどうかです。無名関数（および従来のすべての JavaScript 関数）は固有の `this` を作成するのに対し、アロー関数はそれを含む関数の `this` を継承します。
 
 つまり、アロー関数を使用したときは、それを含む関数の変数や定数をイベントハンドラーで利用することができます。
 
@@ -319,13 +526,16 @@ el.addEventListener(
   <div class="middle" target="_blank">
     middle, capture & none-capture
     <a class="inner1" href="https://www.mozilla.org" target="_blank">
-      inner1, passive & preventDefault(which is not allowed)
+      inner1, パッシブ & preventDefault（許可されていない）
     </a>
     <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
-      inner2, none-passive & preventDefault(not open new page)
+      inner2, パッシブ & preventDefault（新しいページを開かない）
     </a>
   </div>
 </div>
+<hr />
+<button class="clear-button">ログをクリア</button>
+<section class="demo-logs"></section>
 ```
 
 #### CSS
@@ -358,8 +568,31 @@ el.addEventListener(
 }
 ```
 
+```css hidden
+.demo-logs {
+  width: 530px;
+  height: 16rem;
+  background-color: #ddd;
+  overflow-x: auto;
+  padding: 1rem;
+}
+```
+
 #### JavaScript
 
+```js hidden
+const clearBtn = document.querySelector(".clear-button");
+const demoLogs = document.querySelector(".demo-logs");
+
+function log(msg) {
+  demoLogs.innerText += `${msg}\n`;
+}
+
+clearBtn.addEventListener("click", () => {
+  demoLogs.innerText = "";
+});
+```
+
 ```js
 const outer = document.querySelector(".outer");
 const middle = document.querySelector(".middle");
@@ -393,27 +626,27 @@ inner1.addEventListener("click", passiveHandler, passive);
 inner2.addEventListener("click", nonePassiveHandler, nonePassive);
 
 function onceHandler(event) {
-  alert("outer, once");
+  log("outer、once");
 }
 function noneOnceHandler(event) {
-  alert("outer, none-once, default");
+  log("outer、非 once、既定値\n");
 }
 function captureHandler(event) {
   //event.stopImmediatePropagation();
-  alert("middle, capture");
+  log("middle、capture");
 }
 function noneCaptureHandler(event) {
-  alert("middle, none-capture, default");
+  log("middle、非 capture、既定値");
 }
 function passiveHandler(event) {
-  // Unable to preventDefault inside passive event listener invocation.
+  // パッシブイベントリスナーの呼び出しの中では preventDefault は実行できない
   event.preventDefault();
-  alert("inner1, passive, open new page");
+  log("inner1、passive、新しいページを開く");
 }
 function nonePassiveHandler(event) {
   event.preventDefault();
   //event.stopPropagation();
-  alert("inner2, none-passive, default, not open new page");
+  log("inner2、非 passive、既定値、新しいページを開かない");
 }
 ```
 
@@ -421,7 +654,7 @@ function nonePassiveHandler(event) {
 
 外側、中央、内側のコンテナーをそれぞれクリックして、オプションがどのように動作するかを確認してください。
 
-{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '') }}
+{{ EmbedLiveSample('options_の使い方の例', 600, 630) }}
 
 `options` オブジェクトで特定の値を使用する前に、ユーザーのブラウザーがその値に対応していることを確認するのが良いでしょう。これらは歴史的にすべてのブラウザーがサポートしてきたわけではない追加要素であるからです。詳細は[オプションの対応の安全な検出](#オプションの対応の安全な検出)を参照してください。
 
@@ -481,292 +714,96 @@ addListener();
 
 {{EmbedLiveSample('Event_listener_with_multiple_options')}}
 
-## その他の注意事項
-
-### ハンドラー内での "this" の値
-
-一連の類似した要素に対して一般的なハンドラーを使いたい場合のように、イベントハンドラーが実行される要素を参照したいということがたびたびあります。
-
-ハンドラー関数を `addEventListener()` を使って要素に装着したとき、ハンドラーの中の {{jsxref("Operators/this","this")}} の値は要素への参照となります。これはハンドラーに渡された event 引数の `currentTarget` プロパティの値と同じです。
-
-```js
-my_element.addEventListener("click", function (e) {
-  console.log(this.className); // logs the className of my_element
-  console.log(e.currentTarget === this); // logs `true`
-});
-```
-
-[アロー関数は独自の `this` コンテキストを持たない](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#メソッドとして使われるアロー関数)ことをお忘れなく。
-
-```js
-my_element.addEventListener("click", (e) => {
-  console.log(this.className); // WARNING: `this` is not `my_element`
-  console.log(e.currentTarget === this); // logs `false`
-});
-```
-
-イベントハンドラー（例えば {{domxref("Element.click_event", "onclick")}}）が HTML ソース内の要素に指定されていた場合、属性値の JavaScript コードは、 `addEventListener()` を使用するような方法で `this` の値を結び付けたハンドラー関数に置き換えられます。コード内に `this` が現れた場合には、要素への参照を表します。
+### パッシブリスナーによるスクロールの性能改善
 
-```html
-<table id="my_table" onclick="console.log(this.id);">
-  <!-- `this` refers to the table; logs 'my_table' -->
-  …
-</table>
-```
+次の例は `passive` を設定した効果を示しています。テキストとチェックボックスを含む {{htmlelement("div")}} があります。
 
-`this` の値は、属性値の中のコード*によって呼び出される*関数内では、[標準的な規則](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って動作することに注意してください。これは次の例で示されています。
+#### HTML
 
 ```html
-<script>
-  function logID() {
-    console.log(this.id);
-  }
-</script>
-<table id="my_table" onclick="logID();">
-  <!-- when called, `this` will refer to the global object -->
-  …
-</table>
-```
-
-`this` は `logID()` 内においては、グローバルオブジェクト {{domxref("Window")}} (または[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)の場合は `undefined` になります。
-
-#### bind() を使用した this の指定
-
-{{jsxref("Function.prototype.bind()")}} メソッドで、その関数のすべての呼び出しにおいて `this` として使用される値を指定できます。これを使えば、関数がどこから呼び出されるかによって `this` の値が変わってしまうというややこしい問題を簡単に回避できます。ただし、リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります。
-
-以下は `bind()` を使った場合と使わない場合の例です。
-
-```js
-const Something = function (element) {
-  // |this| is a newly created object
-  this.name = "Something Good";
-  this.onclick1 = function (event) {
-    console.log(this.name); // this は element なので undefined になります
-  };
-
-  this.onclick2 = function (event) {
-    console.log(this.name); // this は新しく生成されたオブジェクトに結び付けられているので、 'Something Good' と出力されます
-  };
-
-  // bind によって、固定の `this` コンテキストを onclick2 に割り当てる
-  this.onclick2 = this.onclick2.bind(this);
-
-  element.addEventListener("click", this.onclick1, false);
-  element.addEventListener("click", this.onclick2, false); // これが仕掛けです
-};
-const s = new Something(document.body);
-```
-
-もうひとつの解決策は、あらゆるイベントを捕捉する `handleEvent()` という特別な関数を使用することです。
-
-```js
-const Something = function (element) {
-  // |this| is a newly created object
-  this.name = "Something Good";
-  this.handleEvent = function (event) {
-    console.log(this.name); // this は新しく生成されたオブジェクトに結び付けられているので、 'Something Good' と出力されます
-    switch (event.type) {
-      case "click":
-        // 処理
-        break;
-      case "dblclick":
-        // 処理
-        break;
-    }
-  };
-
-  // この場合のリスナーは this であって this.handleEvent でないことに注意してください
-  element.addEventListener("click", this, false);
-  element.addEventListener("dblclick", this, false);
+<div id="container">
+  <p>
+    But down there it would be dark now, and not the lovely lighted aquarium she
+    imagined it to be during the daylight hours, eddying with schools of tiny,
+    delicate animals floating and dancing slowly to their own serene currents
+    and creating the look of a living painting. That was wrong, in any case. The
+    ocean was different from an aquarium, which was an artificial environment.
+    The ocean was a world. And a world is not art. Dorothy thought about the
+    living things that moved in that world: large, ruthless and hungry. Like us
+    up here.
+  </p>
+</div>
 
-  // リスナーは適切に削除できます
-  element.removeEventListener("click", this, false);
-  element.removeEventListener("dblclick", this, false);
-};
-const s = new Something(document.body);
+<div>
+  <input type="checkbox" id="passive" name="passive" checked />
+  <label for="passive">パッシブ</label>
+</div>
 ```
 
-_this_ の参照を扱うためのもう一つの方法は、 `EventListener` にアクセスする必要のあるフィールドを含むオブジェクトのメソッドを呼び出す関数を渡すことです。
-
-```js
-class SomeClass {
-  constructor() {
-    this.name = "Something Good";
-  }
-
-  register() {
-    const that = this;
-    window.addEventListener("keydown", (e) => {
-      that.someMethod(e);
-    });
-  }
-
-  someMethod(e) {
-    console.log(this.name);
-    switch (e.keyCode) {
-      case 5:
-        // ここにいくらかのコード...
-        break;
-      case 6:
-        // ここにいくらかのコード...
-        break;
-    }
-  }
+```css hidden
+#container {
+  width: 150px;
+  height: 200px;
+  overflow: scroll;
+  margin: 2rem 0;
+  padding: 0.4rem;
+  border: 1px solid black;
 }
-
-const myObject = new SomeClass();
-myObject.register();
 ```
 
-### イベントリスナーのデータの出し入れ
-
-イベントリスナーは離島のようなもので、データを渡すのも、ましてや実行後にデータを取り戻すのも至難の業だと思われるかもしれません。
-イベントリスナーは引数を、[イベントオブジェクト](/ja/docs/Learn/JavaScript/Building_blocks/Events#event_objects) 1 つしかとらず、これは自動的にリスナーに渡され、返値は無視されます。
-では、どのようにデータを取り込んだり、戻したりすればよいのでしょうか。これには良い方法がいくつかあります。
-
-#### "this" を使用したイベントリスナーへのデータの入力
-
-[前述](#bind_を使用した_this_の指定)の通り、 `Function.prototype.bind()` を使用すると `this` 参照変数を通じてイベントリスナーに値を渡すことができます。
-
-```js
-const myButton = document.getElementById("my-button-id");
-const someString = "Data";
-
-myButton.addEventListener(
-  "click",
-  function () {
-    console.log(this); // 期待される値: 'Data'
-  }.bind(someString),
-);
-```
-
-この方法は、イベントリスナーの中からプログラムでイベントリスナーがどの HTML 要素で発生したかを知る必要がない場合に適しています。これを行う主な利点は、実際に引数リストにデータを渡す場合とほぼ同じ方法でイベントリスナーがデータを受け取ることです。
-
-#### 外部スコープのプロパティを使用したイベントリスナーへのデータの入力
+#### JavaScript
 
-外部スコープに（`const`, `let` を付けた）変数宣言が含まれている場合、そのスコープで宣言されたすべての内部関数はその変数にアクセスすることができます（外部関数/内部関数については[こちら](/ja/docs/Glossary/Function#different_types_of_functions)を、変数スコープについては[こちら](/ja/docs/Web/JavaScript/Reference/Statements/var#暗黙のグローバル変数と関数スコープの外部)を参照してください）。したがって、イベントリスナーの外部からデータにアクセスする最も簡単な方法の 1 つは、イベントリスナーが宣言されているスコープにアクセスできるようにすることです。
+このコードは、コンテナーの {{domxref("Element/wheel_event", "wheel")}} イベントにリスナーを追加するもので、既定ではコンテナーをスクロールします。リスナーは長時間実行する処理を実行します。初期状態では、リスナーは `passive` オプションで追加され、チェックボックスがトグル切り替えされるたびに、コードは `passive` オプションをトグル切り替えします。
 
 ```js
-const myButton = document.getElementById("my-button-id");
-let someString = "Data";
-
-myButton.addEventListener("click", () => {
-  console.log(someString); // 期待される値: 'Data'
-
-  someString = "Data Again";
+const passive = document.querySelector("#passive");
+passive.addEventListener("change", (event) => {
+  container.removeEventListener("wheel", wheelHandler);
+  container.addEventListener("wheel", wheelHandler, {
+    passive: passive.checked,
+    once: true,
+  });
 });
 
-console.log(someString); // 期待される値: 'Data' (will never output 'Data Again')
-```
-
-> **メモ:** 内側のスコープは外側のスコープにある `const`, `let` 変数にアクセスすることができますが、イベントリスナーの定義後に、同じ外側のスコープ内でこれらの変数にアクセスできるようになることは期待できません。なぜでしょうか？単純に、イベントリスナーが実行される頃には、イベントリスナーが定義されたスコープは既に実行を終了しているからです。
-
-#### オブジェクトを用いたイベントリスナーのデータの出し入れ
-
-JavaScript のほとんどの関数とは異なり、オブジェクトはそのオブジェクトを参照する変数がメモリー内に存在する限り、メモリー内に保持されます。それに加えて、オブジェクトはプロパティを持つことができ、参照によって渡すことができることから、スコープ間でデータを共有するための有力な候補となります。これについて調べてみましょう。
-
-> **メモ:** JavaScript の関数は厳密にはオブジェクトです。 (そのため、プロパティを持つことができ、メモリー内に永続的に存在する変数に代入されていれば、実行終了後もメモリー内に保持されます。)
-
-オブジェクトを参照する変数がメモリーに存在する限り、オブジェクトのプロパティを使用してメモリーにデータを格納することができるので、実際にそれらを使用して、イベントリスナーにデータを渡し、イベントハンドラーが実行された後でデータに変更があった場合には、それを戻すことができます。この例を考えてみましょう。
-
-```js
-const myButton = document.getElementById("my-button-id");
-const someObject = { aProperty: "Data" };
-
-myButton.addEventListener("click", () => {
-  console.log(someObject.aProperty); // 期待される値: 'Data'
-
-  someObject.aProperty = "Data Again"; // 値を変更
+const container = document.querySelector("#container");
+container.addEventListener("wheel", wheelHandler, {
+  passive: true,
+  once: true,
 });
 
-setInterval(() => {
-  if (someObject.aProperty === "Data Again") {
-    console.log("Data Again: True");
-    someObject.aProperty = "Data"; // 次のイベントの実行を待つために値を初期化
+function wheelHandler() {
+  function isPrime(n) {
+    for (let c = 2; c <= Math.sqrt(n); ++c) {
+      if (n % c === 0) {
+        return false;
+      }
+    }
+    return true;
   }
-}, 5000);
-```
-
-この例では、イベントリスナーとインターバル関数の両方が定義されているスコープは、 `someObject.aProperty` の元の値が変更される前に実行を終了していたとしても、イベントリスナーとインターバル関数の両方で `someObject` がメモリー内に (*参照*によって) 持続するため、両方とも同じデータにアクセスできます (つまり、一方がデータを変更したときに、もう一方がその変更に対応できます)。
-
-> **メモ:** オブジェクトは参照で変数に格納されます。つまり、実際のデータのメモリーの場所だけが変数に格納されます。とりわけ、これはオブジェクトを「格納」する変数が、実際に同じオブジェクト参照が代入 (「格納」) されている他の変数に影響を与えることができるということです。 2 つの変数が同じオブジェクトを参照している場合 (例えば、 `let a = b = {aProperty: 'Yeah'};`)、どちらかから変数のデータを変更すると、もう一方の変数に影響を与えます。
-
-> **メモ:** オブジェクトは参照によって変数に格納されているので、関数の実行を停止した後も、関数からオブジェクトを返す (データを失わないようにメモリーに保存しておく) ことができます。
-
-### メモリーの問題
-
-```js
-const elts = document.getElementsByTagName("*");
 
-// ケース 1
-for (const elt of elts) {
-  elt.addEventListener(
-    "click",
-    (e) => {
-      // 何かを行う
-    },
-    false,
-  );
-}
+  const quota = 1000000;
+  const primes = [];
+  const maximum = 1000000;
 
-// ケース 2
-function processEvent(e) {
-  // 何かを行う
-}
+  while (primes.length < quota) {
+    const candidate = Math.floor(Math.random() * (maximum + 1));
+    if (isPrime(candidate)) {
+      primes.push(candidate);
+    }
+  }
 
-for (const elt of elts) {
-  elt.addEventListener("click", processEvent, false);
+  console.log(primes);
 }
 ```
 
-上記の 1 つ目のケースでは、ループの繰り返しごとに新しい（無名の）ハンドラー関数が作成されます。一方、 2 つ目のケースでは、以前に宣言した同じ関数がイベントハンドラーとして使用され、作成されるハンドラー関数が 1 つであるため、メモリー消費量が少なくなります。さらに、最初のケースでは、無名関数への参照が保持されないため、 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} を呼び出すことができません（ここでは、ループが生成する可能性がある複数の無名関数への参照が保持されません）。2 番目のケースでは、`processEvent` が関数の参照なので、`myElement.removeEventListener("click", processEvent, false)` を実行することが可能です。
-
-実は、メモリー消費に関しては、関数参照を保持しないことが本当の問題ではなく、むしろ、*静的*な関数参照を保持しないことが問題なのです。
-
-### パッシブリスナーによるスクロールの性能改善
-
-以下の例にあるように、`passive` の値を `true` に設定すると、パフォーマンスを最適化し、アプリケーションのパフォーマンスが劇的に向上する可能性があります。
-
-```js
-/* 機能検出 */
-let passiveIfSupported = false;
-
-try {
-  window.addEventListener(
-    "test",
-    null,
-    Object.defineProperty({}, "passive", {
-      get() {
-        passiveIfSupported = { passive: true };
-      },
-    }),
-  );
-} catch (err) {}
-
-window.addEventListener(
-  "scroll",
-  (event) => {
-    /* 何かを行う */
-    // event.preventDefault(); は使用できない
-  },
-  passiveIfSupported,
-);
-```
-
-`addEventListener()` の仕様では、`passive` オプションの既定値は常に `false` です。しかし、これはタッチイベントやホイールイベントを扱うイベントリスナーがスクロールを処理しようとしている間にブラウザーのメインスレッドをブロックする可能性をもたらすため、スクロール処理中の性能が大幅に低下する結果になる可能性があります。
-
-この問題を防ぐため、Safari 以外のブラウザーでは、文書レベルのノードである {{domxref("Window")}}、{{domxref("Document")}}、{{domxref("Document.body")}} のに対する {{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}}、{{domxref("Element/touchmove_event", "touchmove")}} イベントの `passive` オプションの既定値が `true` に変更されました。これにより、イベントリスナーが[イベントをキャンセルする](/ja/docs/Web/API/Event/preventDefault)ことができなくなるため、ユーザーがスクロールしている間、ページレンダリングをブロックすることがなくなります。
-
-> **メモ:** この変更された動作を実装しているブラウザー（およびそれらのブラウザーのバージョン）を知りたい場合は、下記の互換性一覧表を参照してください。
-
-そのため、その動作を上書きして、すべてのブラウザーで `passive` オプションが `false` になるようにしたい場合は、（既定値に頼らず）明示的にオプションを `false` に設定する必要があります。
+#### 結果
 
-基本的な {{domxref("Element/scroll_event", "scroll")}} イベントの `passive` の値を気にする必要はありません。
-もともとキャンセル不可であるため、イベントリスナーはいずれにせよページのレンダリングをブロックすることはありません。
+効果は次の通りです。
 
-### 古いブラウザー
+- 初期状態では、リスナーはパッシブであるため、ホイールでコンテナーをスクロールしようとするとすぐにスクロールします。
+- 「パッシブ」のチェックを外して、ホイールを使用してコンテナーをスクロールしようとすると、コンテナーがスクロールするまでに顕著な遅延があります。
 
-`addEventListener()` の `options` 引数に対応していない古いブラウザーでは、正しく[機能検出](#オプションの対応の安全な検出)をせずに使おうとすると、 `useCapture` 引数が使用できないことがあります。
+{{EmbedLiveSample("Improving scroll performance using passive listeners", 100, 300)}}
 
 ## 仕様書
 
diff --git a/files/ja/web/api/eventtarget/dispatchevent/index.md b/files/ja/web/api/eventtarget/dispatchevent/index.md
index d104e41b3e4d63..e881b80feb6ba7 100644
--- a/files/ja/web/api/eventtarget/dispatchevent/index.md
+++ b/files/ja/web/api/eventtarget/dispatchevent/index.md
@@ -1,19 +1,21 @@
 ---
 title: "EventTarget: dispatchEvent() メソッド"
+short-title: dispatchEvent()
 slug: Web/API/EventTarget/dispatchEvent
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: 8ac73df2fbe2c88d8649fcb006dcde098616c723
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
-**`dispatchEvent()`** は {{domxref("EventTarget")}} のメソッドで、 {{domxref("Event")}} をそのオブジェクトへ送り、関連する[イベントリスナー](/ja/docs/Web/API/EventTarget/addEventListener)を（同期的に）適切に起動させます。通常のイベント処理ルール（キャプチャとオプションのバブリングフェーズを含む）は `dispatchEvent()` で手動で配信されたイベントにも適用されます。
+**`dispatchEvent()`** は {{domxref("EventTarget")}} のメソッドで、 {{domxref("Event")}} をそのオブジェクトへ送り、関連するイベントリスナーを（同期的に）適切に起動させます。通常のイベント処理ルール（キャプチャとオプションのバブリングフェーズを含む）は `dispatchEvent()` で手動で配信されたイベントにも適用されます。
 
 `dispatchEvent()` の呼び出しは、イベントを発行させるための最後のステップです。イベントは既に {{domxref("Event/Event", "Event()")}} コンストラクターを使って作成され、初期化されているはずです。
 
-> **メモ:** このメソッドを呼び出すとき、 {{domxref("Event.target")}} プロパティは現在の `EventTarget` に初期化されます。
+> [!NOTE]
+> このメソッドを呼び出すとき、 {{domxref("Event.target")}} プロパティは現在の `EventTarget` に初期化されます。
 
-「ネイティブ」イベントがブラウザーによって発生し、[イベントループ](/ja/docs/Web/JavaScript/Event_loop)を介して非同期にイベントハンドラーを呼び出すのとは異なり、 `dispatchEvent()` はイベントハンドラーを*同期的に*呼び出します。適用可能なすべてのイベントハンドラが呼び出され、 `dispatchEvent()` から戻る前に返されます。
+「ネイティブ」イベントがブラウザーによって発生し、[イベントループ](/ja/docs/Web/JavaScript/Event_loop)を介して非同期にイベントハンドラーを呼び出すのとは異なり、 `dispatchEvent()` はイベントハンドラーを*同期的に*呼び出します。適用可能なすべてのイベントハンドラーが呼び出され、 `dispatchEvent()` から戻る前に返されます。
 
 ## 構文
 
@@ -35,7 +37,8 @@ dispatchEvent(event)
 - `InvalidStateError` {{domxref("DomException")}}
   - : イベントの初期化時に、イベントの種類が指定されなかった場合に発生します。
 
-> **警告:** イベントハンドラーで発生した例外は、捕捉されない例外として報告されます。イベントハンドラーはネストされたコールスタック上で実行されます。イベントハンドラーが完了するまで呼び出し元はブロックされますが、例外は呼び出し元まで伝搬しません。
+> [!WARNING]
+> イベントハンドラーで発生した例外は、捕捉されない例外として報告されます。イベントハンドラーはネストされたコールスタック上で実行されます。イベントハンドラーが完了するまで呼び出し元はブロックされますが、例外は呼び出し元まで伝搬しません。
 
 ## 例
 
diff --git a/files/ja/web/api/eventtarget/eventtarget/index.md b/files/ja/web/api/eventtarget/eventtarget/index.md
index b5c6cd724177b0..19db53f3e038b7 100644
--- a/files/ja/web/api/eventtarget/eventtarget/index.md
+++ b/files/ja/web/api/eventtarget/eventtarget/index.md
@@ -1,11 +1,12 @@
 ---
 title: "EventTarget: EventTarget() コンストラクター"
+short-title: EventTarget()
 slug: Web/API/EventTarget/EventTarget
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`EventTarget()`** コンストラクターは、新しい {{domxref("EventTarget")}} オブジェクトのインスタンスを作成します。
 
@@ -27,29 +28,63 @@ new EventTarget()
 
 ## 例
 
+### カウンターの実装
+
+この例では、 `increment()` メソッドと `decrement()` メソッドを持つ `Counter` クラスを実装します。これらのメソッドが呼び出されると、カスタムイベント `"valuechange"` が発生します。
+
+#### HTML
+
+```html
+<button id="dec" aria-label="Decrement">-</button>
+<span id="currentValue">0</span>
+<button id="inc" aria-label="Increment">+</button>
+```
+
+#### JavaScript
+
 ```js
-class MyEventTarget extends EventTarget {
-  constructor(mySecret) {
+class Counter extends EventTarget {
+  constructor(initialValue = 0) {
     super();
-    this._secret = mySecret;
+    this.value = initialValue;
+  }
+
+  #emitChangeEvent() {
+    this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value }));
   }
 
-  get secret() {
-    return this._secret;
+  increment() {
+    this.value++;
+    this.#emitChangeEvent();
+  }
+
+  decrement() {
+    this.value--;
+    this.#emitChangeEvent();
   }
 }
 
-let myEventTarget = new MyEventTarget(5);
-let value = myEventTarget.secret; // === 5
-myEventTarget.addEventListener("foo", (e) => {
-  myEventTarget._secret = e.detail;
+const initialValue = 0;
+const counter = new Counter(initialValue);
+document.querySelector("#currentValue").innerText = initialValue;
+
+counter.addEventListener("valuechange", (event) => {
+  document.querySelector("#currentValue").innerText = event.detail;
+});
+
+document.querySelector("#inc").addEventListener("click", () => {
+  counter.increment();
 });
 
-let event = new CustomEvent("foo", { detail: 7 });
-myEventTarget.dispatchEvent(event);
-let newValue = myEventTarget.secret; // === 7
+document.querySelector("#dec").addEventListener("click", () => {
+  counter.decrement();
+});
 ```
 
+#### 結果
+
+{{EmbedLiveSample("Implementing a counter")}}
+
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/eventtarget/index.md b/files/ja/web/api/eventtarget/index.md
index 0a47d008e7c2d5..e2ed2bb930c450 100644
--- a/files/ja/web/api/eventtarget/index.md
+++ b/files/ja/web/api/eventtarget/index.md
@@ -2,15 +2,15 @@
 title: EventTarget
 slug: Web/API/EventTarget
 l10n:
-  sourceCommit: 049632675ccb83fe2e257c43071d366d3f80ee2b
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{ApiRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`EventTarget`** インターフェイスは、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装します。
 言い換えると、イベントのターゲットはすべて、このインターフェイスに関する 3 つのメソッドを実装しています。
 
-{{domxref("Element")}} とその子、{{domxref("Document")}}、{{domxref("Window")}} は、最も一般的なイベントターゲットですが、他のオブジェクトも、例えば {{domxref("XMLHttpRequest")}}、{{domxref("AudioNode")}}、{{domxref("AudioContext")}} などもイベントターゲットになります。
+{{domxref("Element")}} とその子、{{domxref("Document")}}、{{domxref("Window")}} は、最も一般的なイベントターゲットですが、他のオブジェクト、例えば {{domxref("IDBRequest")}}、{{domxref("AudioNode")}}、{{domxref("AudioContext")}} などもイベントターゲットになります。
 
 多くのイベントターゲット (要素、文書、ウィンドウを含む) は、[イベントハンドラー](/ja/docs/Web/Events/Event_handlers)を設定するのに `onイベント名` プロパティや属性を使用することもできます。
 
diff --git a/files/ja/web/api/eventtarget/removeeventlistener/index.md b/files/ja/web/api/eventtarget/removeeventlistener/index.md
index 0e0006df4e1d66..50afc4360dd00a 100644
--- a/files/ja/web/api/eventtarget/removeeventlistener/index.md
+++ b/files/ja/web/api/eventtarget/removeeventlistener/index.md
@@ -1,11 +1,12 @@
 ---
 title: "EventTarget: removeEventListener() メソッド"
+short-title: removeEventListener()
 slug: Web/API/EventTarget/removeEventListener
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
 
 **`removeEventListener()`** は {{domxref("EventTarget")}} インターフェイスのメソッドで、以前に {{domxref("EventTarget.addEventListener()")}} で登録されたイベントリスナーを取り外します。
 取り外されるイベントリスナーはイベントの型、イベントリスナー関数そのもの、照合プロセスに影響を与えるさまざまな任意のオプションを使用して識別します。
@@ -90,7 +91,7 @@ element.removeEventListener("mousedown", handleMouseDown, false); // 成功
 element.removeEventListener("mousedown", handleMouseDown, true); // 失敗
 ```
 
-この点については、いくつかのブラウザのリリースで一貫性がないことに注意してください。特に理由がない限り、`addEventListener()` の呼び出しで使用したのと同じ値を `removeEventListener()` の呼び出しでも使用することが賢明でしょう。
+この点については、いくつかのブラウザーのリリースで一貫性がないことに注意してください。特に理由がない限り、`addEventListener()` の呼び出しで使用したのと同じ値を `removeEventListener()` の呼び出しでも使用することが賢明でしょう。
 
 ## 例
 
diff --git a/files/ja/web/api/fetch_api/index.md b/files/ja/web/api/fetch_api/index.md
index 13e95b5045d2d8..cf25fa86bf99f7 100644
--- a/files/ja/web/api/fetch_api/index.md
+++ b/files/ja/web/api/fetch_api/index.md
@@ -2,22 +2,18 @@
 title: フェッチ API
 slug: Web/API/Fetch_API
 l10n:
-  sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce
+  sourceCommit: f2426e77139097d22e45eb44c6b7849d86fb6462
 ---
 
-{{DefaultAPISidebar("Fetch API")}}
+{{DefaultAPISidebar("Fetch API")}} {{AvailableInWorkers}}
 
-フェッチ API は（ネットワーク越しの通信を含む）リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。
+フェッチ API は（ネットワーク越しの通信を含む）リソース取得のためのインターフェイスを提供しています。これは {{DOMxRef("XMLHttpRequest")}} をより強力かつ柔軟に置き換えたものです。
 
-{{AvailableInWorkers}}
+## 概念と使用方法
 
-## 概念と利用方法
+フェッチ API は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト（他にもネットワークリクエストに関係すること）と、CORS や HTTP の Origin ヘッダーの意味づけのような関連の概念を使用します。
 
-フェッチでは、 {{DOMxRef("Request")}} および {{DOMxRef("Response")}} オブジェクト（およびネットワークリクエストに関わるその他のもの）の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。
-
-また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義しています。この定義は、現行の分散している個別の定義を置き換えるものです。
-
-リソースを取得するためのリクエストは、 {{DOMxRef("fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。
+リクエストを行い、リソースを読み取るには、{{DOMxRef("Window.fetch", "fetch()")}} メソッドを使用します。これは {{DOMxRef("Window")}} と {{DOMxRef("WorkerGlobalScope", "Worker")}} コンテキストの両方でグローバルメソッドです。このため、リソースを取得するほとんどのコンテキストで利用できます。
 
 `fetch()` メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。これは {{JSxRef("Promise")}} を返します。これはサーバーがヘッダーで返答するとすぐに、**サーバーレスポンスが HTTP エラーステータスであったとしても**、 {{DOMxRef("Response")}} に解決します。第 2 引数は任意で、 `init` オプションオブジェクトを渡すことができます（{{DOMxRef("Request")}} を参照してください）。
 
@@ -25,25 +21,11 @@ l10n:
 
 {{DOMxRef("Request.Request", "Request()")}} および {{DOMxRef("Response.Response", "Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith()")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。
 
-### jQuery との違い
-
-`fetch` は主に 3 つの点で `jQuery.ajax()` と異なります。
-
-- `fetch()` から返されたプロミスは、レスポンスが HTTP `404` や `500` であっても、 **HTTP エラーステータスで拒否されません**。代わりに、正常に解決され (`ok` ステータスが `false` に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。
-- `fetch()` は _credentials_ の[初期化オプション](/ja/docs/Web/API/fetch#引数)を（`include` に）設定しない限り、**オリジンをまたいだ Cookie を送信しません**。
-
-  - [2018 年 4 月](https://github.com/whatwg/fetch/pull/585)、に仕様の既定の認証情報ポリシーが `'same-origin'` に変更され、古いネイティブの fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。
-  - これらのブラウザーより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに `'same-origin'` を[初期化オプション](/ja/docs/Web/API/fetch#引数) に設定した認証情報を必ず含めてください。
-
-> **メモ:** フェッチ API の詳しい利用方法は [フェッチの使用](/ja/docs/Web/API/Fetch_API/Using_Fetch)を参照してください。また [フェッチの基本概念](/ja/docs/Web/API/Fetch_API/Basic_concepts)では、フェッチ API の基本概念が解説されています。
-
-### フェッチの中止
-
-未完了の `fetch()` （または `XMLHttpRequest`）の操作を中止するには、 {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイスを使用してください。
+フェッチ API の詳しい利用方法は [フェッチの使用](/ja/docs/Web/API/Fetch_API/Using_Fetch)を参照してください。
 
 ## Fetch インターフェイス
 
-- {{DOMxRef("fetch()")}}
+- {{DOMxRef("Window.fetch", "fetch()")}}
   - : `fetch()` メソッドはリソース取得のために使用されます。
 - {{DOMxRef("Headers")}}
   - : リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。
@@ -67,4 +49,3 @@ l10n:
 - [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS)
 - [HTTP](/ja/docs/Web/HTTP)
 - [フェッチのポリフィル](https://github.com/github/fetch)
-- [フェッチの基本概念](/ja/docs/Web/API/Fetch_API/Basic_concepts)
diff --git a/files/ja/web/api/fetch_api/using_fetch/index.md b/files/ja/web/api/fetch_api/using_fetch/index.md
index b4cca6a909246e..8699638252c2a1 100644
--- a/files/ja/web/api/fetch_api/using_fetch/index.md
+++ b/files/ja/web/api/fetch_api/using_fetch/index.md
@@ -2,491 +2,598 @@
 title: フェッチ API の使用
 slug: Web/API/Fetch_API/Using_Fetch
 l10n:
-  sourceCommit: aae16b81e18d13dd006d418983558578563e9746
+  sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
 ---
 
 {{DefaultAPISidebar("Fetch API")}}
 
-[フェッチ API](/ja/docs/Web/API/Fetch_API) は、リクエストやレスポンスといった[プロトコル](/ja/docs/Glossary/Protocol)を操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの {{domxref("fetch()")}} メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。
+[フェッチ API](/ja/docs/Web/API/Fetch_API) は、HTTP リクエストを行い、レスポンスを処理するための JavaScript インターフェイスを提供します。
 
-コールバックベースの API である {{domxref("XMLHttpRequest")}} とは異なり、Fetch は Promise ベースであり、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API) で簡単に使用できる優れた代替手段を提供します。Fetch は、[CORS](/ja/docs/Web/HTTP/CORS) やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。
+フェッチは {{domxref("XMLHttpRequest")}} の現代の置き換えです。コールバックを使用する `XMLHttpRequest` とは異なり、フェッチはプロミスベースで、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)や[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) のような現代のウェブの機能と統合されています。
 
-基本的なフェッチリクエストは、以下のコードを見てください。
+フェッチ API では、{{domxref("Window/fetch", "fetch()")}} を呼び出してリクエストを行います。これは {{domxref("Window", "ウィンドウ", "", "nocode")}}と{{domxref("WorkerGlobalScope", "ワーカー", "", "nocode")}}の両方のコンテキストでグローバル関数として利用できます。このコンテキストには {{domxref("Request")}} オブジェクトか、フェッチする URL を格納した文字列、およびリクエストを構成するためのオプション引数を渡します。
+
+`fetch()` 関数は {{jsxref("Promise")}} を返します。このプロミスはサーバーのレスポンスを表す {{domxref("Response")}} オブジェクトで履行されます。レスポンスに対して適切なメソッドを呼び出すと、リクエストのステータスを調べたり、レスポンス本体をテキストや JSON など様々な形式で取り出すことができます。
+
+以下は `fetch()` を使用してサーバーから JSON データを取得する最小限の関数です。
 
 ```js
-async function logMovies() {
-  const response = await fetch("http://example.com/movies.json");
-  const movies = await response.json();
-  console.log(movies);
+async function getData() {
+  const url = "https://example.org/products.json";
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`レスポンスステータス: ${response.status}`);
+    }
+
+    const json = await response.json();
+    console.log(json);
+  } catch (error) {
+    console.error(error.message);
+  }
 }
 ```
 
-これはネットワーク越しに JSON ファイルを取得してパースし、コンソールにデータを出力するスクリプトです。 `fetch()` の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 {{domxref("Response")}} オブジェクトで解決するプロミスを返します。
+URL を格納した文字列を宣言し、`fetch()` を呼び出して、余計なオプションを付けずに URL を渡します。
 
-{{domxref("Response")}} は、実際の JSON レスポンス本体を直接持っているのではなく、 HTTP レスポンス全体を表現するものです。 {{domxref("Response")}} オブジェクトから JSON の本体の内容を抽出するには、 {{domxref("Response.json()", "json()")}} メソッドを使用します。これはレスポンス本体のテキストを JSON として解釈した結果で解決する第 2 のプロミスを返します。
+`fetch()` 関数は何かエラーがあるとプロミスを拒否しますが、サーバーが {{httpstatus("404")}} のようなエラーステータスで応答した場合は拒否しません。したがって、レスポンスのステータスも調べて、OK でない場合はエラーを throw します。
 
-> **メモ:** 本体の内容が他の形式である場合に展開する同様の方法は、[本体](#本体)の節を参照してください。
+そうでない場合は、`Response` の {{domxref("Response.json()", "json()")}} メソッドを呼び出して、レスポンス本体のコンテンツを {{glossary("JSON")}} として取得し、その値の一つをログ出力します。`fetch()` 自体と同様に、 `json()` はレスポンス本体のコンテンツにアクセスする他のすべてのメソッドと同様に非同期であることに注意してください。
 
-フェッチリクエストは、受け取るリソースからの指示ではなく、[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/Headers/Content-Security-Policy)の `connect-src` ディレクティブによって制御されます。
+このページの残りの部分では、このプロセスのさまざまな段階を詳しく見ていきます。
 
-## リクエストオプションの適用
+## リクエストを行う
 
-`fetch()` メソッドには 2 つ目の引数を適用することができ、 `init` オブジェクトで様々な種類の設定を制御することができます。
+リクエストを行うには、 `fetch()` を呼び出して、次のものを渡します。
 
-すべての設定可能なオプションや詳しい説明については、 {{domxref("fetch()")}} を参照してください。
+1. フェッチするリソースの定義。これは以下のいずれかです。
+   - URL を格納した文字列。
+   - {{domxref("URL")}} のインスタンスなどのオブジェクト、すなわち URL を格納した文字列を生成する{{glossary("stringifier", "文字列化子")}}のあるもの。
+   - {{domxref("Request")}} のインスタンス。
+2. オプションとして、リクエストを構成するためのオプションを含むオブジェクト。
 
-```js
-// POST メソッドの実装の例
-async function postData(url = "", data = {}) {
-  // 既定のオプションには * が付いています
-  const response = await fetch(url, {
-    method: "POST", // *GET, POST, PUT, DELETE, etc.
-    mode: "cors", // no-cors, *cors, same-origin
-    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
-    credentials: "same-origin", // include, *same-origin, omit
-    headers: {
-      "Content-Type": "application/json",
-      // 'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    redirect: "follow", // manual, *follow, error
-    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
-    body: JSON.stringify(data), // 本体のデータ型は "Content-Type" ヘッダーと一致させる必要があります
-  });
-  return response.json(); // JSON のレスポンスをネイティブの JavaScript オブジェクトに解釈
-}
+この節では、よく使用するオプションを見ていきます。指定されるすべてのオプションについては、[`fetch()`](/ja/docs/Web/API/Window/fetch) リファレンスページを参照してください。
+
+### メソッドの設定
 
-postData("https://example.com/answer", { answer: 42 }).then((data) => {
-  console.log(data); // `data.json()` の呼び出しで解釈された JSON データ
+既定では、`fetch()` は {{httpmethod("GET")}} リクエストを行いますが、`method` オプションを使用すれば、別の[リクエストメソッド](/ja/docs/Web/HTTP/Methods)を使用することができます。
+
+```js
+const response = await fetch("https://example.org/post", {
+  method: "POST",
+  // ...
 });
 ```
 
-なお、 `mode: "no-cors"` はリクエスト中の限られたヘッダーにしか許可されていません。
+`mode` オプションが `no-cors` に設定されている場合、 `method` は `GET`、`POST`、`HEAD` のいずれかでなければなりません。
 
-- `Accept`
-- `Accept-Language`
-- `Content-Language`
-- `Content-Type` のうち、値が `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain` のいずれかのもの
+### 本体の設定
 
-## fetch の中止
+リクエスト本体はリクエストの内容です。クライアントがサーバーに送るものです。`GET` リクエストでは本体を含めることはできませんが、{{httpmethod("POST")}} や {{httpmethod("PUT")}} リクエストのようにサーバーにコンテンツを送信するリクエストでは有益です。例えば、サーバーにファイルをアップロードしたい場合、`POST` リクエストを行い、リクエスト本体にファイルを含めることができます。
 
-未完了の `fetch()` 操作を中止するには、{{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイスを使用します。
+リクエスト本体を設定するには、`body` オプションとして渡します。
 
 ```js
-const controller = new AbortController();
-const signal = controller.signal;
-const url = "video.mp4";
+const response = await fetch("https://example.org/post", {
+  body: JSON.stringify({ username: "example" }),
+  // ...
+});
+```
 
-const downloadBtn = document.querySelector("#download");
-const abortBtn = document.querySelector("#abort");
+本体は、以下いずれかの型のインスタンスとして指定できます。
 
-downloadBtn.addEventListener("click", async () => {
-  try {
-    const response = await fetch(url, { signal });
-    console.log("Download complete", response);
-  } catch (error) {
-    console.error(`Download error: ${error.message}`);
-  }
+- 文字列
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("TypedArray")}}
+- {{jsxref("DataView")}}
+- {{domxref("Blob")}}
+- {{domxref("File")}}
+- {{domxref("URLSearchParams")}}
+- {{domxref("FormData")}}
+
+レスポンス本体と同様に、リクエスト本体はストリームであり、リクエストを作成するとストリームを読み込むので、リクエストが本体を含む場合、2 回作成することはできないことに注意してください。
+
+```js example-bad
+const request = new Request("https://example.org/post", {
+  method: "POST",
+  body: JSON.stringify({ username: "example" }),
 });
 
-abortBtn.addEventListener("click", () => {
-  controller.abort();
-  console.log("Download aborted");
+const response1 = await fetch(request);
+console.log(response1.status);
+
+// 例外が発生: "Body has already been consumed."
+const response2 = await fetch(request);
+console.log(response2.status);
+```
+
+その代わりに、リクエストを送信する前に{{domxref("Request.clone()", "複製を作成する", "", "nocode")}}する必要があります。
+
+```js
+const request1 = new Request("https://example.org/post", {
+  method: "POST",
+  body: JSON.stringify({ username: "example" }),
 });
+
+const request2 = request1.clone();
+
+const response1 = await fetch(request1);
+console.log(response1.status);
+
+const response2 = await fetch(request2);
+console.log(response2.status);
 ```
 
-## 資格情報つきのリクエストの送信
+詳しくは、[ロックされ妨害されたストリーム](#ロックされ妨害されたストリーム)を参照してください。
 
-ブラウザーに資格情報のついたリクエストを送るようにするには、同一オリジンの場合もオリジン間の呼び出しの場合も、 `credentials: 'include'` を `init` オブジェクトに追加して `fetch()` メソッドに渡してください。
+### ヘッダーの設定
+
+リクエストヘッダーは、リクエストに関する情報をサーバーに与えます。例えば {{httpheader("Content-Type")}} ヘッダーは、リクエスト本体の形式をサーバーに指示します。多くのヘッダーはブラウザーが自動的に設定し、スクリプトでは設定できません。これらは{{glossary("Forbidden header name", "禁止ヘッダー名")}}と呼ばれています。
+
+リクエストヘッダーを設定するには、`headers` オプションに割り当ててください。
+
+ここには `ヘッダー名: ヘッダー値` の形でプロパティを格納したオブジェクトリテラルを渡すことができます。
 
 ```js
-fetch("https://example.com", {
-  credentials: "include",
+const response = await fetch("https://example.org/post", {
+  headers: {
+    "Content-Type": "application/json",
+  },
+  // .,.
 });
 ```
 
-> **メモ:** `Access-Control-Allow-Origin` は `credentials: 'include'` を含むリクエストでは、ワイルドカードを使用することを禁止しています。このような場合、正確なオリジンを提供する必要があります。 CORS unblocker 拡張機能を使用している場合でも、リクエストは失敗します。
+あるいは、{{domxref("Headers")}} オブジェクトを構築し、{{domxref("Headers.append()")}} を使用してそのオブジェクトにヘッダーを追加し、`Headers` オブジェクトを `headers` オプションに割り当てることもできます。
 
-> **メモ:** この設定に関係なく、ブラウザーはプリフライトリクエストで資格情報を送信しないようにしてください。詳細については、 [CORS 資格情報を含むリクエスト](/ja/docs/Web/HTTP/CORS#資格情報を含むリクエスト)を参照してください。
+```js
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
 
-リクエスト URL が呼び出しスクリプトと同一オリジンの場合だけ資格情報を送りたい場合、 `credentials: 'same-origin'` を追加します。
+const response = await fetch("https://example.org/post", {
+  headers: myHeaders,
+  // .,.
+});
+```
+
+`mode` オプションが `no-cors` に設定されている場合、{{glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}のみを設定することができます。
+
+### POST リクエストを行う
+
+`method`、`body`、`headers` オプションを組み合わせることで、POST リクエストを作ることができます。
 
 ```js
-// オリジン 'https://example.com' で呼び出すスクリプトです。
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
 
-fetch("https://example.com", {
-  credentials: "same-origin",
+const response = await fetch("https://example.org/post", {
+  method: "POST",
+  body: JSON.stringify({ username: "example" }),
+  headers: myHeaders,
 });
 ```
 
-ブラウザーがリクエストに資格情報を含めないことを保証するには、代わりに `credentials: 'omit'` を使用してください。
+### オリジン間リクエストを行う
+
+オリジン間のリクエストができるかどうかは `mode` オプションの値で決まります。これは `cors`、`no-cors`、`same-origin` の 3 つの値のいずれかを取ります。
+
+- 既定では `mode` は `cors` に設定され、リクエストがオリジンをまたぐものであれば、[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) の仕組みを使用することを意味しています。これは以下のことを意味しています。
+
+  - リクエストが[単純リクエスト](/ja/docs/Web/HTTP/CORS#simple_requests)の場合、リクエストは常に送信されますが、サーバーは正しい {{httpheader("Access-Control-Allow-Origin")}} ヘッダーで応答しなければなりません。
+  - リクエストが単純なリクエストでない場合、ブラウザーは[プリフライトリクエスト](/ja/docs/Web/HTTP/CORS#preflighted_requests)を送信して、サーバーが CORS を理解し、リクエストを許可しているか調べ、サーバーが適切な CORS ヘッダーでプリフライトリクエストに応答しない限り、実際のリクエストは送信されません。
+
+- `mode` を `same-origin` に設定すると、オリジン間のリクエストを完全に禁止します。
+
+- `mode` を `no-cors` に設定すると、リクエストは単純なリクエストでなりません。これにより、設定するヘッダーは制限され、メソッドは `GET`、`HEAD`、`POST` に制限されます。
+
+### 資格情報を含める
+
+資格情報とはクッキー、{{glossary("TLS")}} クライアント証明書、またはユーザー名とパスワードを格納した認証ヘッダーのことです。
+
+ブラウザーが資格情報を送信するかどうか、および **`Set-Cookie`** レスポンスヘッダーを尊重するかどうかを制御するには、`credentials` オプションを設定します。
+
+- `omit`: リクエストに資格情報を送信したり、レスポンスに資格情報を含めたりしません。
+- `same-origin` （既定値）: 同一オリジンのリクエストに対してのみ資格情報を送信し、含めます。
+- `include`: オリジンをまたいだ場合であっても常に資格情報を含めます。
+
+クッキーの [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 属性が `Strict` または `Lax` に設定されている場合、`credentials` が `include` に設定されていても、クッキーはサイトをまたいで送信されないことに注意してください。
+
+そのため、たとえ `credentials` が `include` に設定されていても、サーバーはレスポンスに {{httpheader("Access-Control-Allow-Credentials")}} ヘッダーを記載することで、資格情報を含めることに同意しなければなりません。さらに、この状況ではサーバーは {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーでクライアントの元のサーバーを明示的に指定しなければなりません（つまり、`*` は許可されません）。
+
+つまり、`credentials` が `include` に設定されていて、リクエストがオリジンをまたぐ場合、次のようになります。
+
+- リクエストが [単純リクエスト](/ja/docs/Web/HTTP/CORS#単純リクエスト)の場合、リクエストは資格情報と共に送信されますが、サーバーは {{httpheader("Access-Control-Allow-Credentials")}} と {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーを設定しなければなりません。サーバーが正しいヘッダーを設定した場合、資格情報を含むレスポンスが呼び出し元に配送されます。
+
+- リクエストが単純なリクエストでない場合、ブラウザーは資格情報なしの[プリフライトリクエスト](/ja/docs/Web/HTTP/CORS#プリフライトリクエスト)を送信し、サーバーは {{httpheader("Access-Control-Allow-Credentials")}} と {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーを設定しなければ、ブラウザーは呼び出し元にネットワークエラーを返します。サーバーが正しいヘッダーを設定した場合、ブラウザーは資格情報を含む本当のリクエストに続き、資格情報を含む本当のレスポンスを呼び出し元に送ります。
+
+### `Request` オブジェクトの作成
+
+{{domxref("Request.Request()", "Request()")}} コンストラクターは `fetch()` 自体と同じ引数を取ります。これは、オプションを `fetch()` に渡す代わりに、同じオプションを `Request()` コンストラクターに渡して、そのオブジェクトを `fetch()` に渡すことができるということです。
+
+例えば、次のようなコードを用いて `fetch()` にオプションを渡すことで POST リクエストを行うことができます。
 
 ```js
-fetch("https://example.com", {
-  credentials: "omit",
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
+
+const response = await fetch("https://example.org/post", {
+  method: "POST",
+  body: JSON.stringify({ username: "example" }),
+  headers: myHeaders,
 });
 ```
 
-## JSON データのアップロード
-
-{{domxref("fetch()")}} を使って JSON エンコードしたデータを POST します。
+しかし、同じ引数を `Request()` コンストラクターに渡すように書き換えることもできます。
 
 ```js
-async function postJSON(data) {
-  try {
-    const response = await fetch("https://example.com/profile", {
-      method: "POST", // or 'PUT'
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    });
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
 
-    const result = await response.json();
-    console.log("Success:", result);
-  } catch (error) {
-    console.error("Error:", error);
-  }
-}
+const myRequest = new Request("https://example.org/post", {
+  method: "POST",
+  body: JSON.stringify({ username: "example" }),
+  headers: myHeaders,
+});
 
-const data = { username: "example" };
-postJSON(data);
+const response = await fetch(myRequest);
 ```
 
-## ファイルのアップロード
-
-ファイルは HTML の `<input type="file" />` input 要素と、{{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使ってアップロードできます。
+これは、2 つ目の引数を使用してプロパティの一部を変更しながら、 別のリクエストからリクエストを作成することができるということでもあります。
 
 ```js
-async function upload(formData) {
+async function post(request) {
   try {
-    const response = await fetch("https://example.com/profile/avatar", {
-      method: "PUT",
-      body: formData,
-    });
+    const response = await fetch(request);
     const result = await response.json();
-    console.log("Success:", result);
+    console.log("成功:", result);
   } catch (error) {
-    console.error("Error:", error);
+    console.error("エラー:", error);
   }
 }
 
-const formData = new FormData();
-const fileField = document.querySelector('input[type="file"]');
+const request1 = new Request("https://example.org/post", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify({ username: "example1" }),
+});
 
-formData.append("username", "abc123");
-formData.append("avatar", fileField.files[0]);
+const request2 = new Request(request1, {
+  body: JSON.stringify({ username: "example2" }),
+});
 
-upload(formData);
+post(request1);
+post(request2);
 ```
 
-## 複数のファイルのアップロード
+## リクエストの中止
+
+リクエストを中止できるようにするには、{{domxref("AbortController")}} を作成し、{{domxref("AbortSignal")}} をリクエストの `signal` プロパティに割り当てます。
 
-ファイルのアップロードは、 HTML の `<input type="file" multiple />` 入力要素と {{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使用して行うことができます。
+リクエストを中止するには、コントローラーの {{domxref("AbortController.abort()", "abort()")}} メソッドを呼び出します。`fetch()` を呼び出すと、例外 `AbortError` が発生してプロミスが拒否されます。
 
 ```js
-async function uploadMultiple(formData) {
+const controller = new AbortController();
+
+const fetchButton = document.querySelector("#fetch");
+fetchButton.addEventListener("click", async () => {
   try {
-    const response = await fetch("https://example.com/posts", {
-      method: "POST",
-      body: formData,
+    console.log("フェッチを開始");
+    const response = await fetch("https://example.org/get", {
+      signal: controller.signal,
     });
-    const result = await response.json();
-    console.log("Success:", result);
-  } catch (error) {
-    console.error("Error:", error);
+    console.log(`レスポンス: ${response.status}`);
+  } catch (e) {
+    console.error(`エラー: ${e}`);
   }
-}
-
-const photos = document.querySelector('input[type="file"][multiple]');
-const formData = new FormData();
-
-formData.append("title", "My Vegas Vacation");
-
-for (const [i, photo] of Array.from(photos.files).entries()) {
-  formData.append(`photos_${i}`, photo);
-}
+});
 
-uploadMultiple(formData);
+const cancelButton = document.querySelector("#cancel");
+cancelButton.addEventListener("click", () => {
+  controller.abort();
+  console.log("フェッチを中止");
+});
 ```
 
-### テキストファイルの 1 行ずつの処理
-
-レスポンスから読み込まれる塊は、行の境界できれいに分割されておらず、文字列ではなく Uint8Array になっています。テキストファイルを読み取って一行ずつ処理したい場合、これらの複雑な処理を行うのはあなた次第です。次の例は、行イテレーターを作成することでこれを行う方法の一つを示しています（簡単にするため、テキストは UTF-8 であると仮定しており、読み取りエラーは処理していません）。
+`fetch()` が履行された後で、レスポンス本体を読み込む前にリクエストが中止された場合、レスポンス本体を読み込もうとすると `AbortError` 例外が発生して拒否されます。
 
 ```js
-async function* makeTextFileLineIterator(fileURL) {
-  const utf8Decoder = new TextDecoder("utf-8");
-  const response = await fetch(fileURL);
-  const reader = response.body.getReader();
-  let { value: chunk, done: readerDone } = await reader.read();
-  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+async function get() {
+  const controller = new AbortController();
+  const request = new Request("https://example.org/get", {
+    signal: controller.signal,
+  });
 
-  const newline = /\r?\n/gm;
-  let startIndex = 0;
-  let result;
+  const response = await fetch(request);
+  controller.abort();
+  // 次の行では `AbortError` が発生
+  const text = await response.text();
+  console.log(text);
+}
+```
 
-  while (true) {
-    const result = newline.exec(chunk);
-    if (!result) {
-      if (readerDone) break;
-      const remainder = chunk.substr(startIndex);
-      ({ value: chunk, done: readerDone } = await reader.read());
-      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
-      startIndex = newline.lastIndex = 0;
-      continue;
-    }
-    yield chunk.substring(startIndex, result.index);
-    startIndex = newline.lastIndex;
-  }
+## レスポンスの処理
 
-  if (startIndex < chunk.length) {
-    // Last line didn't end in a newline char
-    yield chunk.substr(startIndex);
-  }
-}
+ブラウザーがサーバーからレスポンスステータスとヘッダーを受け取るとすぐに（潜在的にはレスポンス本体を受け取る前に）、`fetch()` が返すプロミスは {{domxref("Response")}} オブジェクトで履行されます。
 
-async function run() {
-  for await (const line of makeTextFileLineIterator(urlOfFile)) {
-    processLine(line);
-  }
-}
+### レスポンスステータスのチェック
 
-run();
-```
+`fetch()` が返すプロミスは、ネットワークエラーや不正なスキームなどのエラーでは拒否されます。しかし、サーバーが {{httpstatus("404")}} のようなエラーで応答した場合、 `fetch()` は `Response` で履行されるので、レスポンス本体を読み込む前にステータスを調べる必要があります。
 
-## フェッチが成功したかの確認
+{{domxref("Response.status")}} プロパティはステータスコードを数値で指示し、{{domxref("Response.ok")}} プロパティはステータスが [200 番台](/ja/docs/Web/HTTP/Status#成功レスポンス)の場合は `true` を返します。
 
-{{domxref("fetch()")}} のプロミスは、ネットワークエラーに遭遇したりサーバー側の CORS の設定（通常はアクセス権の問題など）が間違っていたりすると、 {{jsxref("TypeError")}} で拒否されます。例えば、 404 はネットワークエラーにはなりません。 `fetch()` が成功したかどうかを正確に判定するには、プロミスが解決された後で、 {{domxref("Response.ok")}} プロパティが true になっているかを確認してください。次のようなコードになるでしょう。
+よくあるパターンは、`ok` の値を調べて `false` なら例外を発生させることです。
 
 ```js
-async function fetchImage() {
+async function getData() {
+  const url = "https://example.org/products.json";
   try {
-    const response = await fetch("flowers.jpg");
+    const response = await fetch(url);
     if (!response.ok) {
-      throw new Error("Network response was not OK");
+      throw new Error(`レスポンスステータス: ${response.status}`);
     }
-    const myBlob = await response.blob();
-    myImage.src = URL.createObjectURL(myBlob);
+    // ...
   } catch (error) {
-    console.error("There has been a problem with your fetch operation:", error);
+    console.error(error.message);
   }
 }
 ```
 
-## 独自のリクエストオブジェクトの提供
+### レスポンス型のチェック
+
+レスポンスには {{domxref("Response.type", "type")}} プロパティがあり、以下のいずれかになります。
+
+- `basic`: リクエストが同一オリジンリクエストだった。
+- `cors`: リクエストがオリジン間の CORS リクエストだった。
+- `opaque`: リクエストは `no-cors` モードで行われた単純なオリジン間リクエストだった。
+- `opaqueredirect`: リクエストで `redirect` オプションが `manual` に設定されており、サーバーが[リダイレクトステータス](/ja/docs/Web/HTTP/Status#リダイレクトメッセージ)を返した。
+
+型はレスポンスに入りうる内容を、以下のように決定します。
+
+- 基本レスポンスは{{glossary("Forbidden response header name", "禁止レスポンスヘッダー名")}}リストにあるレスポンスヘッダーを除外します。
+
+- CORS レスポンスは {{glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}リストのレスポンスヘッダーのみを含みます。
 
-`fetch()` の呼び出しに、リクエストしたいリソースへのパスを渡す代わりに、{{domxref("Request.Request","Request()")}} コンストラクターを使用して Request オブジェクトを作成し、 `fetch()` メソッドの引数として渡すこともできます。
+- 不透明なレスポンスと不透明なリダイレクトレスポンスは `status` が `0`、ヘッダーリストが空、そして本体が `null` になります。
+
+### ヘッダーのチェック
+
+リクエストと同じように、レスポンスにも {{domxref("Response.headers", "headers")}} オブジェクトである {{domxref("Headers")}} プロパティがあり、 レスポンス型に基づく除外に従って、スクリプトに公開されるレスポンスヘッダーが格納されます。
+
+この一般的な用途は、本体を読もうとする前にコンテンツ型を調べることです。
 
 ```js
-async function fetchImage(request) {
+async function fetchJSON(request) {
   try {
     const response = await fetch(request);
-    if (!response.ok) {
-      throw new Error("Network response was not OK");
+    const contentType = response.headers.get("content-type");
+    if (!contentType || !contentType.includes("application/json")) {
+      throw new TypeError("残念、受信したのは JSON ではなかった！");
     }
-    const myBlob = await response.blob();
-    myImage.src = URL.createObjectURL(myBlob);
+    // それ以外の場合、本体を JSON として読み取れる
   } catch (error) {
-    console.error("Error:", error);
+    console.error("エラー:", error);
   }
 }
-
-const myHeaders = new Headers();
-
-const myRequest = new Request("flowers.jpg", {
-  method: "GET",
-  headers: myHeaders,
-  mode: "cors",
-  cache: "default",
-});
-
-fetchImage(myRequest);
 ```
 
-`Request()` は、 `fetch()` メソッドとまったく同じ引数を受け入れます。既存のリクエストオブジェクトを渡して、コピーを作成することもできます。
-
-```js
-const anotherRequest = new Request(myRequest, myInit);
-```
+### レスポンス本体の読み取り
 
-リクエストとレスポンスの本体は一度しか使用できないので、これはかなり有益なことです。
-このようにコピーを作成することで、リクエストやレスポンスを効果的に使用することができ、使用した場合には `init` オプションを変更することができます。
-コピーは本体が読み込まれる前に作成されなければなりません。
+`Response` インターフェイスには、本体のコンテンツ全体を様々な形式で取得するためのメソッドがあります。
 
-> **メモ:** {{domxref("Request.clone","clone()")}} メソッドを利用してコピーを生成することもできます。コピーを作成するどちらの方法でも、元のリクエストまたはレスポンスの 本体がすでに読まれている場合は失敗しますが、複製されたレスポンスまたは リクエストの本体を読んでも、元で読み取り済みとマークされることはありません。
+- {{domxref("Response.arrayBuffer()")}}
+- {{domxref("Response.blob()")}}
+- {{domxref("Response.formData()")}}
+- {{domxref("Response.json()")}}
+- {{domxref("Response.text()")}}
 
-## Headers
+これらはすべて非同期メソッドで、本体のコンテンツで履行される {{jsxref("Promise")}} を返します。
 
-{{domxref("Headers")}} インターフェイスでは、 {{domxref("Headers.Headers","Headers()")}} コンストラクターを使用して、ヘッダーオブジェクトを作成することができます。ヘッダーオブジェクトは、シンプルな複数の名前と値のマップです。
+この例では、画像を読み取って {{domxref("Blob")}} として読み込み、それを使用してオブジェクト URL を作成することができます。
 
 ```js
-const content = "Hello World";
-const myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
-```
+const image = document.querySelector("img");
 
-コンストラクターに配列の配列またはオブジェクトリテラルを渡すことで、同じことが実現できます。
+const url = "flowers.jpg";
 
-```js
-const myHeaders = new Headers({
-  "Content-Type": "text/plain",
-  "Content-Length": content.length.toString(),
-  "X-Custom-Header": "ProcessThisImmediately",
-});
+async function setImage() {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`レスポンスステータス: ${response.status}`);
+    }
+    const blob = await response.blob();
+    const objectURL = URL.createObjectURL(blob);
+    image.src = objectURL;
+  } catch (e) {
+    console.error(e);
+  }
+}
 ```
 
-ヘッダーの中身を見たり、検索することができます。
-
-```js
-console.log(myHeaders.has("Content-Type")); // true
-console.log(myHeaders.has("Set-Cookie")); // false
-myHeaders.set("Content-Type", "text/html");
-myHeaders.append("X-Custom-Header", "AnotherValue");
+このメソッドでは、レスポンス本体が適切な形式でない場合に例外が発生します。例えば、JSONとして解釈できないレスポンスに対して `json()` を呼び出した場合などです。
 
-console.log(myHeaders.get("Content-Length")); // 11
-console.log(myHeaders.get("X-Custom-Header")); // ['ProcessThisImmediately', 'AnotherValue']
+### レスポンス本体のストリーミング
 
-myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.get("X-Custom-Header")); // null
-```
+リクエスト本体とレスポンス本体は、実際には {{domxref("ReadableStream")}} オブジェクトであり、それらを読むときは常にコンテンツをストリーミングしています。これはメモリー効率が良くなります。呼び出し側が `json()` のようなメソッドを使用してレスポンスを取得する前に、 ブラウザーがレスポンス全体をメモリーにバッファリングする必要がないからです。
 
-いくつかの操作は{{domxref("Service_Worker_API","サービスワーカー", "", 1)}}でしか役立ちませんが、ヘッダーを操作するためのより良い API を提供しています。
+また、これは呼び出し側がコンテンツを受信したときに増加しながら処理できることを意味しています。
 
-Headers のメソッドはすべて、有効な HTTP ヘッダーではない名前が渡されたときは `TypeError` が発生します。 immutable ガード（[下記参照](#ガード)）がかかっている場合に変更操作を行った場合も `TypeError` が発生します。それ以外の場合は、暗黙に失敗します。例を示します。
+例えば、大きなテキストファイルを読み取って、それを何か方法で処理したり、ユーザーに表示したりする `GET` リクエストを考えてみましょう。
 
 ```js
-const myResponse = Response.error();
-try {
-  myResponse.headers.set("Origin", "http://mybank.com");
-} catch (e) {
-  console.log("銀行のふりをしないで下さい！");
+const url = "https://www.example.org/a-large-file.txt";
+
+async function fetchText(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`レスポンスステータス: ${response.status}`);
+    }
+
+    const text = await response.text();
+    console.log(text);
+  } catch (e) {
+    console.error(e);
+  }
 }
 ```
 
-ヘッダーの良い使用方法としては、以下のように、処理を行う前に、コンテンツタイプが正しいかどうか判定する等の使い方があります。
+上記のように {{domxref("Response.text()")}} を使用することができますが、ファイル全体を受信するまで待たなければなりません。
+
+代わりにレスポンスをストリーミングすると、本体をネットワークから受信した塊のままで処理することができます。
 
 ```js
-async function fetchJSON(request) {
+const url = "https://www.example.org/a-large-file.txt";
+
+async function fetchTextAsStream(url) {
   try {
-    const response = await fetch(request);
-    const contentType = response.headers.get("content-type");
-    if (!contentType || !contentType.includes("application/json")) {
-      throw new TypeError("Oops, we haven't got JSON!");
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`レスポンスステータス: ${response.status}`);
     }
-    const jsonData = await response.json();
-    // process your data further
-  } catch (error) {
-    console.error("Error:", error);
+
+    const stream = response.body.pipeThrough(new TextDecoderStream());
+    for await (const value of stream) {
+      console.log(value);
+    }
+  } catch (e) {
+    console.error(e);
   }
 }
 ```
 
-### ガード
-
-ヘッダーは、リクエストで送信でき、レスポンスで受信できます。また、どの情報が変更できる（または、すべき）かといったさまざまな制限があります。そのため、ヘッダーには _guard_ プロパティがあります。これはリクエストやレスポンスに含まれませんが、ヘッダーオブジェクトでできる変更操作に影響を与えます。
-
-設定できるガード値には以下のものがあります。
-
-- `none`: 既定値です。
-- `request`: リクエストから得たヘッダーオブジェクト ({{domxref("Request.headers")}}) を保護します。
-- `request-no-cors`: {{domxref("Request.mode")}} が `no-cors` で生成されたリクエストから得たヘッダーオブジェクトを保護します。
-- `response`: レスポンスから得たヘッダーオブジェクト ({{domxref("Response.headers")}}) を保護します。
-- `immutable`: ヘッダーを読み取り専用にします。主にサービスワーカーで使用されます。
+この例では、{{jsxref("Statements/for-await...of", "iterate asynchronously", "", "nocode")}} ストリームを処理し、到着したそれぞれの塊を処理しています。
 
-> **メモ:** `response` のガードされたヘッダーオブジェクトに `Content-Length` ヘッダーを追加したり設定したりすることはできません。同様に、レスポンスヘッダーに `Set-Cookie` を挿入することもできません。サービスワーカーは合成されたレスポンスでクッキーを設定することはできません。
+このように本体に直接アクセスすると、レスポンスの生のバイト列を取得し、それを自分で変換しなければならないことに注意しましょう。この場合、{{domxref("ReadableStream.pipeThrough()")}} を呼び出して {{domxref("TextDecoderStream")}} にレスポンスを通し、UTF-8 エンコードされた本体データをテキストとしてデコードします。
 
-## Response オブジェクト
+### テキストファイルを 1 行ずつ処理する
 
-すでに見てきたように、 {{domxref("Response")}} インスタンスは、 `fetch()` プロミスが解決 (resolve) されたときに返値として渡されます。
+下記の例では、テキストリソースを取得し、それを行ごとに処理し、正規表現を使って行末を探しています。分かりやすいように、テキストは UTF-8 を想定し、読み取りエラーは処理しません。
 
-使用できる主なレスポンスプロパティには、以下のものがあります。
+```js
+async function* makeTextFileLineIterator(fileURL) {
+  const response = await fetch(fileURL);
+  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
 
-- {{domxref("Response.status")}} — 整数値 (既定値は 200) で、 HTTP ステータスコードが入ります。
-- {{domxref("Response.statusText")}} — HTTP ステータスコードに対応するメッセージの文字列 (既定値は "")。なお、 HTTP/2 ではステータスメッセージに[対応していません](https://fetch.spec.whatwg.org/#concept-response-status-message)。
-- {{domxref("Response.ok")}} — 上述の例で使用したように、これは HTTP ステータスコードが 200-299 の範囲にあるかどうかをチェックする略記法です。これは論理値を返します。
+  let { value: chunk, done: readerDone } = await reader.read();
+  chunk = chunk || "";
 
-Response オブジェクトは JavaScript で動的に作ることもできます。これは{{domxref("Service_Worker_API", "サービスワーカー", "", 1)}}で非常に役立ちます。例えばリクエストを受け取ったときに {{domxref("FetchEvent.respondWith","respondWith()")}} メソッドによってカスタマイズされたレスポンスを返すようなときに役立ちます。
+  const newline = /\r?\n/gm;
+  let startIndex = 0;
+  let result;
 
-```js
-const myBody = new Blob();
-
-addEventListener("fetch", (event) => {
-  // ServiceWorker intercepting a fetch
-  event.respondWith(
-    new Response(myBody, {
-      headers: { "Content-Type": "text/plain" },
-    }),
-  );
-});
-```
+  while (true) {
+    const result = newline.exec(chunk);
+    if (!result) {
+      if (readerDone) break;
+      const remainder = chunk.substr(startIndex);
+      ({ value: chunk, done: readerDone } = await reader.read());
+      chunk = remainder + (chunk || "");
+      startIndex = newline.lastIndex = 0;
+      continue;
+    }
+    yield chunk.substring(startIndex, result.index);
+    startIndex = newline.lastIndex;
+  }
 
-{{domxref("Response.Response","Response()")}} コンストラクターは、オプションとして 2 つの引数をとることができます。レスポンス本体と初期化オブジェクトです。 ({{domxref("Request.Request","Request()")}} が受け取れるものと似ています。)
+  if (startIndex < chunk.length) {
+    // Last line didn't end in a newline char
+    yield chunk.substring(startIndex);
+  }
+}
 
-> **メモ:** 静的メソッド {{domxref("Response/error_static","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response/redirect_static","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。
+async function run(urlOfFile) {
+  for await (const line of makeTextFileLineIterator(urlOfFile)) {
+    processLine(line);
+  }
+}
 
-## 本体
+function processLine(line) {
+  console.log(line);
+}
 
-リクエストにもレスポンスにも本体データが含まれています。本体は以下のタイプのいずれかのインスタンスです。
+run("https://www.example.org/a-large-file.txt");
+```
 
-- {{jsxref("ArrayBuffer")}}
-- {{jsxref("TypedArray")}} （Uint8Array など）
-- {{jsxref("DataView")}}
-- {{domxref("Blob")}}
-- {{domxref("File")}}
-- {{jsxref("String")}}、または文字列リテラル
-- {{domxref("URLSearchParams")}}
-- {{domxref("FormData")}}
+### ロックされ妨害されたストリーム
 
-{{domxref("Request")}} および {{domxref("Response")}} インターフェイスは本体を展開するために以下のメソッドを持っています。これらはすべて最終的に実際の内容で解決されるプロミスを返します。
+リクエスト本体とレスポンス本体がストリームであることの結果は以下のとおりです：
 
-- {{domxref("Request.arrayBuffer()")}} / {{domxref("Response.arrayBuffer()")}}
-- {{domxref("Request.blob()")}} / {{domxref("Response.blob()")}}
-- {{domxref("Request.formData()")}} / {{domxref("Response.formData()")}}
-- {{domxref("Request.json()")}} / {{domxref("Response.json()")}}
-- {{domxref("Request.text()")}} / {{domxref("Response.text()")}}
+- `ReadableStream.getReader()` を使用してストリームにリーダーが接続されている場合、そのストリームはロックされ、他の誰もストリームを読むことができません。
+- もしストリームから何らかのコンテンツが読み取られた場合、ストリームは妨害され、ストリームから読み取ることはできません。
 
-これらはテキストでないデータを XHR よりはるかに楽に扱うことができます。
+これは、同じレスポンス（またはリクエスト）本体を複数回読み取ることは不可能であるということです。
 
-リクエスト本体は、 body 引数を渡すことによって設定することができます。
+```js example-bad
+async function getData() {
+  const url = "https://example.org/products.json";
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`レスポンスステータス: ${response.status}`);
+    }
 
-```js
-const form = new FormData(document.getElementById("login-form"));
-fetch("/login", {
-  method: "POST",
-  body: form,
-});
+    const json1 = await response.json();
+    const json2 = await response.json(); // 例外が発生
+  } catch (error) {
+    console.error(error.message);
+  }
+}
 ```
 
-リクエストとレスポンス（および `fetch()` 関数の拡張）は、自動的にコンテンツ種別を決定しようとします。リクエストもまた、指定されていなければ自動で `Content-Type` ヘッダーを設定しようとします。
+本体を複数回読み込む必要がある場合は、本体を読み込む前に {{domxref("Response.clone()")}} を呼び出す必要があります。
 
-## 使用可能かどうかの判別
+```js
+async function getData() {
+  const url = "https://example.org/products.json";
+  try {
+    const response1 = await fetch(url);
+    if (!response1.ok) {
+      throw new Error(`レスポンスステータス: ${response1.status}`);
+    }
 
-Fetch API が利用できるかどうかは、{{domxref("Headers")}}、{{domxref("Request")}}、{{domxref("Response")}}、{{domxref("fetch()")}} のいずれかが {{domxref("Window")}} もしくは {{domxref("Worker")}} のスコープで参照できるかどうかによって判断できます。例を挙げます。
+    const response2 = response1.clone();
 
-```js
-if (window.fetch) {
-  // ここで fetch リクエストを実行
-} else {
-  // XMLHttpRequest で何か実行する？
+    const json1 = await response1.json();
+    const json2 = await response2.json();
+  } catch (error) {
+    console.error(error.message);
+  }
 }
 ```
 
-## `jQuery.ajax()` との差異
+これは[サービスワーカーのオフラインキャッシュ実装](/ja/docs/Web/Progressive_web_apps/Guides/Caching)でよくあるパターンです。サービスワーカーはアプリにレスポンスを返しますが、同時にレスポンスをキャッシュすることも望んでいます。そのため、レスポンスを複製して元を返し、複製をキャッシュします。
 
-`fetch` の仕様は、 `jQuery.ajax()` とは特に以下の点で異なっています。
+```js
+async function cacheFirst(request) {
+  const cachedResponse = await caches.match(request);
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+  try {
+    const networkResponse = await fetch(request);
+    if (networkResponse.ok) {
+      const cache = await caches.open("MyCache_1");
+      cache.put(request, networkResponse.clone());
+    }
+    return networkResponse;
+  } catch (error) {
+    return Response.error();
+  }
+}
 
-- `fetch()` から返されるプロミスは、レスポンスが HTTP 404 や 500 を返す HTTP エラーステータスの場合でも拒否されません。サーバーがヘッダーで応答すると、プロミスは直ちに正常に解決します（レスポンスが 200-299 の範囲にない場合は、レスポンスの {{domxref("Response/ok", "ok")}} プロパティが `false` に設定されます）。拒否されるのは、ネットワーク障害があった場合や、何かがリクエストの完了を妨げた場合のみです。
-- [`credentials`](/ja/docs/Web/API/fetch#credentials) オプションを `include` に設定しない限り、`fetch()` は次のように動作します。
-  - オリジン間リクエストではクッキーを送信しません。
-  - オリジン間のレスポンスでは、送り返されたクッキーを設定しません。
-  - 2018 年 8 月現在、既定の資格情報ポリシーは same-origin に変更されています。
+self.addEventListener("fetch", (event) => {
+  if (precachedResources.includes(url.pathname)) {
+    event.respondWith(cacheFirst(event.request));
+  }
+});
+```
 
 ## 関連情報
 
 - [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
-- [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS)
+- [ストリーム API](/ja/docs/Web/API/Streams_API)
+- [CORS](/ja/docs/Web/HTTP/CORS)
 - [HTTP](/ja/docs/Web/HTTP)
-- [フェッチのポリフィル](https://github.com/github/fetch)
 - [Fetch の例 (GitHub)](https://github.com/mdn/dom-examples/tree/main/fetch)
diff --git a/files/ja/web/api/file/file/index.md b/files/ja/web/api/file/file/index.md
index dbf09db9c208e3..d3935d5a05f148 100644
--- a/files/ja/web/api/file/file/index.md
+++ b/files/ja/web/api/file/file/index.md
@@ -3,33 +3,36 @@ title: "File: File() コンストラクター"
 short-title: File()
 slug: Web/API/File/File
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c
 ---
 
-{{APIRef("File")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
 
 **`File()`** コンストラクターは、新しい {{domxref("File")}} オブジェクトのインスタンスを生成します。
 
 ## 構文
 
 ```js-nolint
-new File(bits, name)
-new File(bits, name, options)
+new File(fileBits, fileName)
+new File(fileBits, fileName, options)
 ```
 
 ### 引数
 
-- `bits`
-  - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト、例えば {{jsxref("Array")}}、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、{{domxref("Blob")}}、文字列、またはそのような要素を混合させたものを {{domxref("File")}} 内に格納します。なお、文字列は JavaScript の UTF-16 文字列ではなく、UTF-8 でエンコードされます。
-- `name`
+- `fileBits`
+  - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト、例えば {{jsxref("Array")}}、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、{{domxref("Blob")}}、文字列、またはそのような要素を混合させたものを {{domxref("File")}} 内に格納します。
+    なお、文字列は JavaScript の UTF-16 文字列ではなく、UTF-8 でエンコードされます。
+- `fileName`
   - : 文字列で、ファイル名またはファイルへのパスを表します。
 - `options` {{optional_inline}}
 
   - : ファイルのオプション属性を含むオプションオブジェクト。利用可能なオプションは以下の通りです。
 
-    - `type`
+    - `type` {{optional_inline}}
       - : ファイルの中に入るコンテンツの MIME タイプを表す文字列です。既定値は `""` です。
-    - `lastModified`
+    - `endings` {{optional_inline}}
+      - : データがテキストの場合、コンテンツ内の改行文字 (`\n`) をどのように解釈するか。既定値である `transparent` は、改行文字を変更せずにblobにコピーします。改行文字をホストシステムのネイティブ規約に変換するには、値 `native` を指定します。
+    - `lastModified` {{optional_inline}}
       - : UNIX 元期からのミリ秒単位で、ファイルが最後に更新された時刻を表す数値です。既定値は {{jsxref("Date.now()")}} です。
 
 ## 例
diff --git a/files/ja/web/api/file/index.md b/files/ja/web/api/file/index.md
index fb09cd0a48ec84..225efedded66b9 100644
--- a/files/ja/web/api/file/index.md
+++ b/files/ja/web/api/file/index.md
@@ -2,16 +2,16 @@
 title: File
 slug: Web/API/File
 l10n:
-  sourceCommit: 2a09bee9b36fd9a53c1bce641297021bfe274a33
+  sourceCommit: 0ebc78fd61acddbe9505330f006b706ac786456d
 ---
 
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
 
 **`File`** インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。
 
 `File` オブジェクトは通常、{{HTMLElement("input")}} 要素を使用してファイルを選択した結果として返される {{DOMxRef("FileList")}} オブジェクト、またはドラッグ＆ドロップ操作の {{DOMxRef("DataTransfer")}} オブジェクトから取得します。
 
-`File` オブジェクトは特別な種類の {{DOMxRef("Blob")}} オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static")}}、{{DOMxRef("createImageBitmap()")}}、{{DOMxRef("XMLHttpRequest", "", "send()")}} は、`Blob` と `File` の両方を受け付けます。
+`File` オブジェクトは特別な種類の {{DOMxRef("Blob")}} オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{domxref("Window.fetch", "fetch()")}} の [`body`](/ja/docs/Web/API/RequestInit#body) オプション、{{DOMxRef("XMLHttpRequest.send()")}} は、`Blob` と `File` の両方を受け付けます。
 
 詳しい情報や例は、[ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications) を参照してください。
 
@@ -24,34 +24,20 @@ l10n:
 
 ## インスタンスプロパティ
 
-- {{DOMxRef("File.prototype.lastModified")}} {{ReadOnlyInline}}
+_`File` インターフェイスには {{DOMxRef("Blob")}} インターフェイスから継承したプロパティもあります。_
+
+- {{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}
   - : ファイルの最終更新時刻を、 UNIX 元期 (1970 年 1 月 1 日深夜) からの経過ミリ秒数で返します。
-- {{DOMxRef("File.prototype.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
+- {{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
   - : `File` オブジェクトが参照しているファイルの最終更新時刻の {{JSxRef("Date")}} を返します。
-- {{DOMxRef("File.prototype.name")}} {{ReadOnlyInline}}
+- {{DOMxRef("File.name")}} {{ReadOnlyInline}}
   - : `File` オブジェクトが参照しているファイルの名前を返します。
-- {{DOMxRef("File.prototype.webkitRelativePath")}} {{ReadOnlyInline}}
-  - : {{DOMxRef("File")}} の URL の相対パスを返します。
-
-`File` は {{DOMxRef("Blob")}} を実装しているので、以下のようなプロパティも利用できます。
-
-- {{DOMxRef("Blob.size")}} {{ReadOnlyInline}}
-  - : ファイルのサイズをバイト単位で返します。
-- {{DOMxRef("File.prototype.type")}} {{ReadOnlyInline}}
-  - : ファイルの [MIME](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types) タイプを返します。
+- {{DOMxRef("File.webkitRelativePath")}} {{ReadOnlyInline}}
+  - : `File` の URL の相対パスを返します。
 
 ## インスタンスメソッド
 
-_`File` インターフェイスはメソッドを定義せず、{{DOMxRef("Blob")}} インターフェイスからメソッドを継承しています。_
-
-- {{DOMxRef("Blob.prototype.slice()", "Blob.prototype.slice([start[, end[, contentType]]])")}}
-  - : ソース `Blob` の指定したバイト数の範囲のデータを含む新しい `Blob` オブジェクトを返します。
-- {{DOMxRef("Blob.prototype.stream()")}}
-  - : `File` を {{DOMxRef("ReadableStream")}} に変換し、`File` の内容を読み込めるようにします。
-- {{DOMxRef("Blob.prototype.text()")}}
-  - : `File` をストリームに変換し、最後まで読み込みます。これは、文字列（テキスト）で解決するプロミスを返します。
-- {{DOMxRef("Blob.prototype.arrayBuffer()")}}
-  - : `File` をストリームに変換し、最後まで読み込みます。 {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
+_`File` インターフェイスには {{DOMxRef("Blob")}} インターフェイスから継承したメソッドもあります。_
 
 ## 仕様書
 
diff --git a/files/ja/web/api/file/lastmodified/index.md b/files/ja/web/api/file/lastmodified/index.md
index 1960b12530ac1a..ba61075adbe4ec 100644
--- a/files/ja/web/api/file/lastmodified/index.md
+++ b/files/ja/web/api/file/lastmodified/index.md
@@ -3,12 +3,12 @@ title: "File: lastModified プロパティ"
 short-title: lastModified
 slug: Web/API/File/lastModified
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: 3b5a1c0dfd59257c0a51052a9efa7b0108f8ecca
 ---
 
-{{APIRef("File")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
 
-**`File.lastModified`** は読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期（1970 年 1 月 1 日の深夜 0 時）からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。
+**`lastModified`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期（1970 年 1 月 1 日の深夜 0 時）からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。
 
 ## 値
 
@@ -74,12 +74,15 @@ console.log(fileWithoutDate.lastModified); // returns current time
 
 ## 時間の精度の低下
 
-タイミング攻撃やフィンガープリンティングに対する保護機能を提供するために、 `someFile.lastModified` の精度がブラウザーの設定に応じて丸められることがあります。
-Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。
+タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)に対する保護機能を提供するために、 `someFile.lastModified` の精度がブラウザーの設定に応じて丸められることがあります。
+Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、既定で 2 ミリ秒になります。この場合、精度は 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方になります。
+
+例えば、時刻の精度を下げた場合、`someFile.lastModified` の結果は常に 2 の倍数になり、`privacy.resistFingerprinting` を有効にした場合は 100 の倍数（または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）になります。
 
 ```js
 // Firefox 60 での時間の制度の低下 (2ms)
 someFile.lastModified;
+// 取りうる値:
 // 1519211809934
 // 1519211810362
 // 1519211811670
@@ -87,14 +90,13 @@ someFile.lastModified;
 
 // `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
 someFile.lastModified;
+// 取りうる値:
 // 1519129853500
 // 1519129858900
 // 1519129864400
 // …
 ```
 
-Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。
-
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/file/lastmodifieddate/index.md b/files/ja/web/api/file/lastmodifieddate/index.md
index 6b7f6c1323d7c4..f9ace3a00f6747 100644
--- a/files/ja/web/api/file/lastmodifieddate/index.md
+++ b/files/ja/web/api/file/lastmodifieddate/index.md
@@ -3,16 +3,16 @@ title: "File: lastModifiedDate プロパティ"
 short-title: lastModifiedDate
 slug: Web/API/File/lastModifiedDate
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 3b5a1c0dfd59257c0a51052a9efa7b0108f8ecca
 ---
 
-{{APIRef("File API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+{{APIRef("File API")}}{{AvailableInWorkers}}{{Deprecated_Header}}{{Non-standard_Header}}
 
-**`File.lastModifiedDate`** 読み取り専用プロパティは、ファイルの最終更新日を返します。最終更新日がわからないファイルは、現在の日付を返します。
+**`lastModifiedDate`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、ファイルの最終更新日を返します。最終更新日がわからないファイルは、現在の日付を返します。
 
 ## 値
 
-[`Date`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) オブジェクトで、ファイルが最後に変更された日時を表します。
+{{JSXRef("Global_Objects/Date", "Date")}} オブジェクトで、ファイルが最後に変更された日時を表します。
 
 ## 例
 
@@ -27,31 +27,32 @@ for (const file of fileInput.files) {
 
 ## 時間の精度の低下
 
-タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)に対する保護機能を提供するために、 `someFile.lastModifiedDate.getTime()` の精度がブラウザーの設定に応じて丸められることがあります。
+タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)に対する保護機能を提供するために、 `someFile.lastModified` の精度がブラウザーの設定に応じて丸められることがあります。
+Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、既定で 2 ミリ秒になります。この場合、精度は 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方になります。
 
-Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。
+例えば、時刻の精度を下げた場合、`someFile.lastModified` の結果は常に 2 の倍数になり、`privacy.resistFingerprinting` を有効にした場合は 100 の倍数（または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）になります。
 
 ```js
 // Firefox 60 での時間の制度の低下 (2ms)
-someFile.lastModifiedDate.getTime();
+someFile.lastModified;
+// 取りうる値:
 // 1519211809934
 // 1519211810362
 // 1519211811670
 // …
 
 // `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
-someFile.lastModifiedDate.getTime();
+someFile.lastModified;
+// 取りうる値:
 // 1519129853500
 // 1519129858900
 // 1519129864400
 // …
 ```
 
-Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。
-
 ## 仕様書
 
-_ファイル API 仕様の初期のドラフトにありますが、このプロパティは削除されており、現在は非標準です。代わりに{{domxref("File.lastModified")}} を使用してください。_
+_ファイル API 仕様の初期の草稿にありますが、このプロパティは削除されており、現在は標準外です。代わりに {{domxref("File.lastModified")}} を使用してください。_
 
 ## ブラウザーの互換性
 
diff --git a/files/ja/web/api/file/name/index.md b/files/ja/web/api/file/name/index.md
index f6ad5518f74748..a64053155faf47 100644
--- a/files/ja/web/api/file/name/index.md
+++ b/files/ja/web/api/file/name/index.md
@@ -3,12 +3,12 @@ title: "File: name プロパティ"
 short-title: name
 slug: Web/API/File/name
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c
 ---
 
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
 
-{{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。
+**`name`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、この {{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。
 
 ## 値
 
diff --git a/files/ja/web/api/file/webkitrelativepath/index.md b/files/ja/web/api/file/webkitrelativepath/index.md
index 9086d006befbf2..b0f875eff607ab 100644
--- a/files/ja/web/api/file/webkitrelativepath/index.md
+++ b/files/ja/web/api/file/webkitrelativepath/index.md
@@ -3,12 +3,12 @@ title: "File: webkitRelativePath プロパティ"
 short-title: webkitRelativePath
 slug: Web/API/File/webkitRelativePath
 l10n:
-  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+  sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6
 ---
 
-{{APIRef("File API")}}
+{{APIRef("File and Directory Entries API")}}{{AvailableInWorkers}}
 
-**`File.webkitRelativePath`** は、[`webkitdirectory`](/ja/docs/Web/HTML/Element/input#webkitdirectory) 属性が設定された {{HTMLElement("input")}} 要素で、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を持つ読み取り専用のプロパティです。
+**`webkitRelativePath`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、[`webkitdirectory`](/ja/docs/Web/HTML/Element/input#webkitdirectory) 属性が設定された {{HTMLElement("input")}} 要素において、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を保持します。
 
 ## 値
 
@@ -16,7 +16,7 @@ l10n:
 
 ## 例
 
-この例では、ユーザーが 1 つまたは複数のディレクトリーを選択することができるディレクトリーピッカーが表示されます。 {{domxref("HTMLElement/change_event", "change")}} イベントが発生すると、選択されたディレクトリ階層に含まれるすべてのファイルのリストが生成され、表示されます。
+この例では、ユーザーが 1 つまたは複数のディレクトリーを選択することができるディレクトリーピッカーが表示されます。 {{domxref("HTMLElement/change_event", "change")}} イベントが発生すると、選択されたディレクトリー階層に含まれるすべてのファイルのリストが生成され、表示されます。
 
 ### HTML
 
diff --git a/files/ja/web/api/file_and_directory_entries_api/introduction/index.md b/files/ja/web/api/file_and_directory_entries_api/introduction/index.md
index 9688fe780f774b..ae1189d8307406 100644
--- a/files/ja/web/api/file_and_directory_entries_api/introduction/index.md
+++ b/files/ja/web/api/file_and_directory_entries_api/introduction/index.md
@@ -7,7 +7,7 @@ l10n:
 
 {{DefaultAPISidebar("File and Directory Entries API")}}
 
-[ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API) は、ウェブアプリケーションがナビゲートできるローカルファイルシステムをシミュレートします。サンドボックス化された仮想ファイルシステムでファイルやディレクトリの読み取り、書き込み、作成ができるアプリを開発できます。
+[ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API) は、ウェブアプリケーションがナビゲートできるローカルファイルシステムをシミュレートします。サンドボックス化された仮想ファイルシステムでファイルやディレクトリーの読み取り、書き込み、作成ができるアプリを開発できます。
 
 ファイルとディレクトリー項目 API は、他にも関連する API と対話します。このAPIはファイルライター API をベースに構築されており、さらにファイル API をベースに構築されています。それぞれの API は異なる機能を追加しています。これらの API はウェブアプリケーションにとって大きな進化を遂げ、これで大量のデータをキャッシュして処理できるようになりました。
 
diff --git a/files/ja/web/api/file_api/using_files_from_web_applications/index.md b/files/ja/web/api/file_api/using_files_from_web_applications/index.md
index 263c80938df12b..d0d521bcba6626 100644
--- a/files/ja/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/ja/web/api/file_api/using_files_from_web_applications/index.md
@@ -286,7 +286,7 @@ function handleFiles(files) {
 
 各画像には CSS クラス `obj` が追加されており、DOM ツリーで簡単に見つけることができます。また、各画像に `file` 属性を追加し、画像の {{DOMxRef("File")}} を指定しています。これにより、後で実際にアップロードする画像を取得することができます。{{DOMxRef("Node.appendChild()")}} を使用して、文書のプレビュー領域に新しいサムネイルを追加します。
 
-次に、画像の読み込みと `img` 要素へのアタッチを非同期で処理するための {{DOMxRef("FileReader")}} を確立します。新しい `FileReader` オブジェクトを作成した後、その `onload` 関数を設定し、`readAsDataURL()` を呼び出してバックグラウンドで読み込み処理を開始します。画像ファイルのコンテンツ全体が読み込まれると、それらは `data:` URL に変換され、`onload` コールバックに渡されます。このルーチンの実装では、`img` 要素の `src` 属性が読み込まれた画像に設定され、その結果、画像がユーザの画面のサムネイルに表示されます。
+次に、画像の読み込みと `img` 要素へのアタッチを非同期で処理するための {{DOMxRef("FileReader")}} を確立します。新しい `FileReader` オブジェクトを作成した後、その `onload` 関数を設定し、`readAsDataURL()` を呼び出してバックグラウンドで読み込み処理を開始します。画像ファイルのコンテンツ全体が読み込まれると、それらは `data:` URL に変換され、`onload` コールバックに渡されます。このルーチンの実装では、`img` 要素の `src` 属性が読み込まれた画像に設定され、その結果、画像がユーザーの画面のサムネイルに表示されます。
 
 ## オブジェクト URL を利用する
 
@@ -308,7 +308,7 @@ URL.revokeObjectURL(objectURL);
 
 この例では、オブジェクト URL を使用して画像のサムネイルを表示しています。さらに、ファイル名やサイズなどの他のファイル情報も表示します。
 
-インターフェースとなる HTML は次のようになります。
+インターフェイスとなる HTML は次のようになります。
 
 ```html
 <input
@@ -390,7 +390,7 @@ function handleFiles() {
 
 {{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}
 
-## 例: ユーザが選択したファイルを送信
+## 例: ユーザーが選択したファイルを送信
 
 もう１つは、ユーザーが選択したファイルやファイル (先ほどの例で選択した画像など) をサーバーにアップロードできるようにすることです。これは非常に簡単に非同期で行うことができます。
 
diff --git a/files/ja/web/api/file_system_api/origin_private_file_system/index.md b/files/ja/web/api/file_system_api/origin_private_file_system/index.md
index 85c03de5a5179d..3dd5c0db8ad9fe 100644
--- a/files/ja/web/api/file_system_api/origin_private_file_system/index.md
+++ b/files/ja/web/api/file_system_api/origin_private_file_system/index.md
@@ -13,7 +13,7 @@ l10n:
 
 [ファイルシステムアクセス API](https://wicg.github.io/file-system-access/) は、[ファイルシステム API](/ja/docs/Web/API/File_System_API) を拡張したもので、は、ピッカーメソッドを使ったファイルへのアクセスを提供します。例えば、
 
-1. {{domxref("Window.showOpenFilePicker()")}} では、ユーザがアクセスするファイルを選択することができ、その結果、 {{domxref("FileSystemFileHandle")}} オブジェクトが返されます。
+1. {{domxref("Window.showOpenFilePicker()")}} では、ユーザーがアクセスするファイルを選択することができ、その結果、 {{domxref("FileSystemFileHandle")}} オブジェクトが返されます。
 2. {{domxref("FileSystemFileHandle.getFile()")}} を呼び出してファイルの内容にアクセスし、 {{domxref("FileSystemFileHandle.createWritable()")}} / {{domxref("FileSystemWritableFileStream.write()")}} を使用して内容を変更します。
 3. {{domxref("FileSystemHandle.requestPermission()", "FileSystemHandle.requestPermission({mode:'readwrite'})")}} は、変更を保存する許可をユーザーにリクエストするために使用されます。
 4. ユーザーが許可リクエストを受け入れると、変更は元のファイルに保存されます。
diff --git a/files/ja/web/api/filereader/readystate/index.md b/files/ja/web/api/filereader/readystate/index.md
index 0bb651699e93e9..75a116b0edb055 100644
--- a/files/ja/web/api/filereader/readystate/index.md
+++ b/files/ja/web/api/filereader/readystate/index.md
@@ -20,7 +20,7 @@ l10n:
 - `LOADING`
   - : readAs メソッドが呼び出されました。 {{domxref("File")}} または {{domxref("Blob")}} が読み取り中であり、まだエラーは発生していません。
 - `DONE`
-  - : 読み取り操作が完了しています。これは、 {{domxref("File")}} または {{domxref("Blob")}} の全体がメモリに読み込まれたか、ファイル読み取りエラーが発生したか、 {{domxref("FileReader.abort()", "abort()")}} が呼び出され、読み取りがキャンセルされたか、いずれかを意味します。
+  - : 読み取り操作が完了しています。これは、 {{domxref("File")}} または {{domxref("Blob")}} の全体がメモリーに読み込まれたか、ファイル読み取りエラーが発生したか、 {{domxref("FileReader.abort()", "abort()")}} が呼び出され、読み取りがキャンセルされたか、いずれかを意味します。
 
 ## 例
 
diff --git a/files/ja/web/api/filesystemdirectoryentry/createreader/index.md b/files/ja/web/api/filesystemdirectoryentry/createreader/index.md
new file mode 100644
index 00000000000000..324113172315e8
--- /dev/null
+++ b/files/ja/web/api/filesystemdirectoryentry/createreader/index.md
@@ -0,0 +1,71 @@
+---
+title: "FileSystemDirectoryEntry: createReader() メソッド"
+short-title: createReader()
+slug: Web/API/FileSystemDirectoryEntry/createReader
+l10n:
+  sourceCommit: 23228f1b9c756862dac77b238ca74c2e5bd3c9dc
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+{{domxref("FileSystemDirectoryEntry")}} インターフェイスの **`createReader()`** メソッドは、これは、ディレクトリーの項目を読み取るために使用することができる、{{domxref("FileSystemDirectoryReader")}} オブジェクトを返します。
+
+## 構文
+
+```js-nolint
+createReader()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+ディレクトリー項目を読み込むために使用することができる {{domxref("FileSystemDirectoryReader")}} オブジェクト。
+
+## 例
+
+この例では、指定した {{domxref("FileSystemDirectoryEntry")}} の項目をすべて読み取って配列で返す `readDirectory()` という非同期関数を作成しています。
+
+```js
+async function readDirectory(directory) {
+  const dirReader = directory.createReader();
+  const entries = [];
+
+  while (true) {
+    const results = await new Promise((resolve, reject) => {
+      dirReader.readEntries(resolve, reject);
+    });
+
+    if (!results.length) {
+      break;
+    }
+
+    for (const entry of results) {
+      entries.push(entry);
+    }
+  }
+
+  return entries;
+}
+```
+
+これは、{{domxref("FileSystemDirectoryReader.readEntries", "readEntries()")}} を繰り返し呼び出してディレクトリー内のすべての項目を取得し、各項目を配列に連結することで動作します。空の配列を返すと、すべての項目が読み込まれたことになり、ループが終わります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemDirectoryReader")}}
+- {{domxref("FileSystemDirectoryEntry")}}
+- {{domxref("FileSystemFileEntry")}}
+- {{domxref("FileSystemEntry")}}
diff --git a/files/ja/web/api/filesystemdirectoryentry/getdirectory/index.md b/files/ja/web/api/filesystemdirectoryentry/getdirectory/index.md
new file mode 100644
index 00000000000000..86e9a1c5ba7a8c
--- /dev/null
+++ b/files/ja/web/api/filesystemdirectoryentry/getdirectory/index.md
@@ -0,0 +1,113 @@
+---
+title: "FileSystemDirectoryEntry: getDirectory() メソッド"
+short-title: getDirectory()
+slug: Web/API/FileSystemDirectoryEntry/getDirectory
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+{{domxref("FileSystemDirectoryEntry")}} インターフェイスのメソッド **`getDirectory()`** は、呼び出されたディレクトリーをルートとするディレクトリーサブツリーのどこかに格納されているディレクトリーに対応する {{domxref("FileSystemDirectoryEntry")}} オブジェクトを返します。
+
+## 構文
+
+```js-nolint
+getDirectory()
+getDirectory(path)
+getDirectory(path, options)
+getDirectory(path, options, successCallback)
+getDirectory(path, options, successCallback, errorCallback)
+```
+
+### 引数
+
+- `path` {{optional_inline}}
+  - : メソッドが呼び出されたディレクトリーへの絶対パスまたは相対パスを表す文字列で、どのディレクトリー項目を返すかを記述します。
+    絶対パスはセキュリティ上の理由から使用することができない場合があります。
+- `options` {{optional_inline}}
+  - : 項目がない場合に作成するかどうか、ファイルがすでに存在する場合にエラーとするかどうかを指定するオブジェクトです。これらのオプションは、現在のところウェブのコンテキストでは有益ではありません。
+    詳しくは [options 引数](#options_引数)の節を参照してください。
+- `successCallback` {{optional_inline}}
+  - : {{domxref("FileSystemDirectoryEntry")}} が作成されたら呼び出されるメソッド。このメソッドは単一の引数、つまり問題のディレクトリーを表す `FileSystemDirectoryEntry` オブジェクトを受け取ります。
+- `errorCallback` {{optional_inline}}
+  - : エラーが発生した場合に呼び出されるメソッドです。唯一の引数として、発生したエラーを説明する {{domxref("DomException")}} オブジェクトを受け取ります。
+
+#### `options` 引数
+
+`options` 引数オブジェクトは、以下の引数を受け入れます。
+
+- `create` {{optional_inline}}
+  - : このプロパティが `true` で、リクエストされたディレクトリーが存在しない場合、ユーザーエージェントはそれを作成する必要があります。
+    既定値は `false` です。
+    親ディレクトリーはすでに存在している必要があります。
+- `exclusive` {{optional_inline}}
+  - : もし `true` で `create` オプションも `true` であれば、呼び出す前にディレクトリーが存在してはいけません。
+    その代わり、呼び出し時に新たに作成することが可能でなければなりません。
+    既定値は `false` です。この引数は `create` が `false` の場合には無視されます。
+
+下記の表は、対象とするディレクトリーのパスが既に存在するかどうかに応じて、これらのフラグを可能な限り組み合わせた場合の結果を記述したものです。
+
+| `create` オプション | `exclusive` オプション | パスの条件                         | 結果                                                                                                                                                 |
+| ------------------- | ---------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `false`             | _無視_                 | パスが存在してディレクトリーである | `successCallback` が {{domxref("FileSystemDirectoryEntry")}} で呼び出される。                                                                        |
+| `false`             | _無視_                 | パスが存在しているがファイルである | `errorCallback` が適切なエラーコードで呼び出される（コールバックが提供されていた場合）。                                                             |
+| `true`              | `false`                | パスが存在する                     | 既存のディレクトリーが除去され、新しいディレクトリーに置き換わる。次に `successCallback` が {{domxref("FileSystemDirectoryEntry")}} で呼び出される。 |
+| `true`              | `false`                | パスが存在しない                   | ディレクトリーが作成され、{{domxref("FileSystemDirectoryEntry")}} が `successCallback` に渡される。                                                  |
+| `true`              | `true`                 | パスが存在する                     | `errorCallback` は `FileError.PATH_EXISTS_ERR` のような適切なエラーで呼び出されます。                                                                |
+| `true`              | `true`                 | パスが存在しない                   | ディレクトリーが作成され、{{domxref("FileSystemDirectoryEntry")}} が `successCallback` に渡される。                                                  |
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- `NotFoundError` {{domxref("DOMException")}}
+  - : `create` オプションが指定されず（または `false` を指定します）、ディレクトリーが存在しない場合に発生します。
+- `SecurityError` {{domxref("DOMException")}}
+  - : ディレクトリーへのアクセスリクエストがセキュリティ上の理由で拒否された場合に発生します。
+- `TypeMismatchError` {{domxref("DOMException")}}
+  - : 指定したパスがディレクトリーでない場合に発生します。おそらくファイルですが、パイプのような対応していないファイル記述子かもしれません。
+
+## 例
+
+この例では、指定した言語のユーザー辞書を含む JSON ファイルをユーザーのアプリデータディレクトリー内に格納し、その辞書を読み込むことを仕事とする関数を表示しています。
+
+```js
+let dictionary = null;
+
+function loadDictionaryForLanguage(appDataDirEntry, lang) {
+  dictionary = null;
+
+  appDataDirEntry.getDirectory("Dictionaries", {}, (dirEntry) => {
+    dirEntry.getFile(`${lang}-dict.json`, {}, (fileEntry) => {
+      fileEntry.file((dictFile) => {
+        let reader = new FileReader();
+
+        reader.addEventListener("loadend", () => {
+          dictionary = JSON.parse(reader.result);
+        });
+
+        reader.readAsText(dictFile);
+      });
+    });
+  });
+}
+```
+
+`loadDictionaryForLanguage()` 関数は、まず `getDirectory()` を使用して、指定したアプリのデータディレクトリー内にある "Dictionaries" という名前のサブフォルダーを表す {{domxref("FileSystemDirectoryEntry")}} オブジェクトを取得します。この成功コールバックは、結果のディレクトリー項目オブジェクトを受け取り、{{domxref("FileSystemDirectoryEntry.getFile", "getFile()")}} を呼び出して、辞書ファイルを表す {{domxref("FileSystemFileEntry")}} オブジェクトを取得します。読み込みが成功すると （{{domxref("FileReader/loadend_event", "loadend")}} イベントが発生することで示されます）、読み込まれたテキストは {{jsxref("JSON.parse()")}} に渡され、JavaScript オブジェクトに再構成されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemDirectoryEntry")}}
diff --git a/files/ja/web/api/filesystemdirectoryentry/getfile/index.md b/files/ja/web/api/filesystemdirectoryentry/getfile/index.md
new file mode 100644
index 00000000000000..dee7103d257bbe
--- /dev/null
+++ b/files/ja/web/api/filesystemdirectoryentry/getfile/index.md
@@ -0,0 +1,113 @@
+---
+title: "FileSystemDirectoryEntry: getFile() メソッド"
+short-title: getFile()
+slug: Web/API/FileSystemDirectoryEntry/getFile
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+{{domxref("FileSystemDirectoryEntry")}} インターフェイスのメソッド **`getFile()`** は、呼び出されたディレクトリーをルートとするディレクトリーサブツリーのどこかに格納されているファイルに対応する {{domxref("FileSystemFileEntry")}} オブジェクトを返します。
+
+## 構文
+
+```js-nolint
+getFile()
+getFile(path)
+getFile(path, options)
+getFile(path, options, successCallback)
+getFile(path, options, successCallback, errorCallback)
+```
+
+### 引数
+
+- `path` {{optional_inline}}
+  - : メソッドが呼び出されるディレクトリーにおいて、どのファイルの項目を返すかを記述する相対パスを指定する文字列。
+- `options` {{optional_inline}}
+  - : 項目がない場合に作成するかどうか、ファイルがすでに存在する場合にエラーとするかどうかを指定するオブジェクトです。これらのオプションは、現在のところウェブのコンテキストでは有益ではありません。
+    詳しくは [options 引数](#options_引数)の節を参照してください。
+- `successCallback` {{optional_inline}}
+  - : {{domxref("FileSystemFileEntry")}} が作成されたら呼び出されるメソッド。
+    このメソッドは単一の引数、つまり問題のファイルを表す `FileSystemFileEntry` オブジェクトを受け取ります。
+- `errorCallback` {{optional_inline}}
+  - : エラーが発生した場合に呼び出されるメソッドです。唯一の引数として、発生したエラーを説明する {{domxref("DOMException")}} オブジェクトを受け取ります。
+
+#### `options` 引数
+
+`options` 引数オブジェクトは、以下の引数を受け入れます。
+
+- `create` {{optional_inline}}
+  - : このプロパティが `true` で、リクエストされたファイルが存在しない場合、ユーザーエージェントはそれを作成する必要があります。
+    既定値は `false` です。
+    親ディレクトリーはすでに存在している必要があります。
+- `exclusive` {{optional_inline}}
+  - : もし `true` で `create` オプションも `true` であれば、呼び出す前にファイルが存在してはいけません。
+    その代わり、呼び出し時に新たに作成することが可能でなければなりません。
+    既定値は `false` です。この引数は `create` が `false` の場合には無視されます。
+
+下記の表は、対象とするファイルのパスが既に存在するかどうかに応じて、これらのフラグを可能な限り組み合わせた場合の結果を記述したものです。
+
+| `create` オプション | `exclusive` オプション | パスの条件                               | 結果                                                                                                                                |
+| ------------------- | ---------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `false`             | _無視_                 | パスが存在してファイルである             | `successCallback` が {{domxref("FileSystemFileEntry")}} で呼び出される。                                                            |
+| `false`             | _無視_                 | パスが存在しているがディレクトリーである | `errorCallback` が適切なエラーコードで呼び出される（コールバックが提供されていた場合）。                                            |
+| `true`              | `false`                | パスが存在する                           | 既存のファイルが除去され、新しいファイルに置き換わる。次に `successCallback` が {{domxref("FileSystemFileEntry")}} で呼び出される。 |
+| `true`              | `false`                | パスが存在しない                         | ファイルが作成され、{{domxref("FileSystemFileEntry")}} が `successCallback` に渡される。                                            |
+| `true`              | `true`                 | パスが存在する                           | `errorCallback` は `FileError.PATH_EXISTS_ERR` のような適切なエラーで呼び出されます。                                               |
+| `true`              | `true`                 | パスが存在しない                         | ファイルが作成され、{{domxref("FileSystemFileEntry")}} が `successCallback` に渡される。                                            |
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- `NotFoundError` {{domxref("DOMException")}}
+  - : `create` オプションが指定されず（または `false` を指定します）、ファイルが存在しない場合に発生します。
+- `SecurityError` {{domxref("DOMException")}}
+  - : ファイルへのアクセスリクエストがセキュリティ上の理由で拒否された場合に発生します。
+- `TypeMismatchError` {{domxref("DOMException")}}
+  - : 指定したパスがファイルでない場合に発生します。おそらくファイルですが、パイプのような対応していないファイル記述子かもしれません。これはユーザーエージェントにある程度依存します。
+
+## 例
+
+この例では、指定した言語のユーザー辞書を含む JSON ファイルをユーザーのアプリデータディレクトリー内に格納し、その辞書を読み込むことを仕事とする関数を表示しています。
+
+```js
+let dictionary = null;
+
+function loadDictionaryForLanguage(appDataDirEntry, lang) {
+  dictionary = null;
+
+  appDataDirEntry.getDirectory("Dictionaries", {}, (dirEntry) => {
+    dirEntry.getFile(`${lang}-dict.json`, {}, (fileEntry) => {
+      fileEntry.file((dictFile) => {
+        let reader = new FileReader();
+
+        reader.addEventListener("loadend", () => {
+          dictionary = JSON.parse(reader.result);
+        });
+
+        reader.readAsText(dictFile);
+      });
+    });
+  });
+}
+```
+
+`loadDictionaryForLanguage()` 関数は、まず `getDirectory()` を使用して、指定したアプリのデータディレクトリー内にある "Dictionaries" という名前のサブフォルダーを表す {{domxref("FileSystemDirectoryEntry")}} オブジェクトを取得します。この成功コールバックは、結果のディレクトリー項目オブジェクトを受け取り、{{domxref("FileSystemDirectoryEntry.getFile", "getFile()")}} を呼び出して、辞書ファイルを表す {{domxref("FileSystemFileEntry")}} オブジェクトを取得します。読み込みが成功すると （{{domxref("FileReader/loadend_event", "loadend")}} イベントが発生することで示されます）、読み込まれたテキストは {{jsxref("JSON.parse()")}} に渡され、JavaScript オブジェクトに再構成されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemFileEntry")}}
diff --git a/files/ja/web/api/filesystemdirectoryentry/index.md b/files/ja/web/api/filesystemdirectoryentry/index.md
index ff43735b96bc5a..35f6963425211a 100644
--- a/files/ja/web/api/filesystemdirectoryentry/index.md
+++ b/files/ja/web/api/filesystemdirectoryentry/index.md
@@ -1,40 +1,48 @@
 ---
 title: FileSystemDirectoryEntry
 slug: Web/API/FileSystemDirectoryEntry
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{APIRef("File System API")}}{{SeeCompatTable}}
+{{APIRef("File and Directory Entries API")}}
 
-**`FileSystemDirectoryEntry`** は [File and Directory Entries API](/ja/docs/Web/API/File_and_Directory_Entries_API) のインターフェイスで、ファイルシステム内のディレクトリを表します。これはディレクトリ内のファイルにアクセスして操作する方法と、ディレクトリ内のエントリにアクセスする方法を提供します。
+**`FileSystemDirectoryEntry`** は[ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API) のインターフェイスで、ファイルシステム内のディレクトリーを表します。これはディレクトリー内のファイルにアクセスして操作する方法と、ディレクトリー内のエントリーにアクセスする方法を提供します。
+
+{{InheritanceDiagram}}
 
 ## 基本概念
 
-{{domxref("FileSystemDirectoryEntry.getDirectory", "getDirectory()")}} を呼び出して新しいディレクトリを作成することができます。サブディレクトリを作成する場合は、各子ディレクトリを順番に作成します。まだ存在しない親ディレクトリを含むフルパスを使用してディレクトリを作成しようとすると、エラーが返されます。したがって、親ディレクトリを作成した後、新しいパスを再帰的に追加して階層を作成します。
+{{domxref("FileSystemDirectoryEntry.getDirectory", "getDirectory()")}} を呼び出して新しいディレクトリーを作成することができます。サブディレクトリーを作成する場合は、各子ディレクトリーを順番に作成します。まだ存在しない親ディレクトリーを含むフルパスを使用してディレクトリーを作成しようとすると、エラーが返されます。したがって、親ディレクトリーを作成した後、新しいパスを再帰的に追加して階層を作成します。
 
 ### 例
 
-次のコードスニペットでは、 "Documents" というディレクトリを作成します。
+次のコードスニペットでは、 "Documents" というディレクトリーを作成します。
 
 ```js
-// Taking care of the browser-specific prefixes.
-window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
+// ブラウザー固有の接頭辞を取る
+window.requestFileSystem =
+  window.requestFileSystem || window.webkitRequestFileSystem;
 window.directoryEntry = window.directoryEntry || window.webkitDirectoryEntry;
 
-...
-
-function onFs(fs){
-  fs.root.getDirectory('Documents', {create:true}, function(directoryEntry){
-    //directoryEntry.isFile === false
-    //directoryEntry.isDirectory === true
-    //directoryEntry.name === 'Documents'
-    //directoryEntry.fullPath === '/Documents'
-
-    }, onError);
-
-  }
+// …
+
+function onFs(fs) {
+  fs.root.getDirectory(
+    "Documents",
+    { create: true },
+    (directoryEntry) => {
+      //directoryEntry.isFile === false
+      //directoryEntry.isDirectory === true
+      //directoryEntry.name === 'Documents'
+      //directoryEntry.fullPath === '/Documents'
+    },
+    onError,
+  );
+}
 
 // 一時記憶装置でファイルシステムを開く
-window.requestFileSystem(TEMPORARY, 1024*1024 /*1MB*/, onFs, onError);
+window.requestFileSystem(TEMPORARY, 1024 * 1024 /*1MB*/, onFs, onError);
 ```
 
 ## プロパティ
@@ -46,29 +54,24 @@ _このインターフェイスは独自のプロパティを持っていませ
 _このインターフェイスは、親インターフェイスである {{domxref("FileSystemEntry")}} からメソッドを継承しています。_
 
 - {{domxref("FileSystemDirectoryEntry.createReader", "createReader()")}}
-  - : このディレクトリ内のエントリを読み込むために使用できる {{domxref("FileSystemDirectoryReader")}} オブジェクトを作成します。
+  - : このディレクトリー内のエントリーを読み込むために使用できる {{domxref("FileSystemDirectoryReader")}} オブジェクトを作成します。
 - {{domxref("FileSystemDirectoryEntry.getDirectory", "getDirectory()")}}
-  - : メソッドが呼び出されるディレクトリを基準に、指定されたパスにあるディレクトリを表す {{domxref("FileSystemDirectoryEntry")}} オブジェクトを返します。
+  - : メソッドが呼び出されるディレクトリーを基準に、指定されたパスにあるディレクトリーを表す {{domxref("FileSystemDirectoryEntry")}} オブジェクトを返します。
 - {{domxref("FileSystemDirectoryEntry.getFile", "getFile()")}}
-  - : メソッドが呼び出されるディレクトリに対する相対パスを指定して、ディレクトリの階層内にあるファイルを表す {{domxref("FileSystemFileEntry")}} オブジェクトを返します。
-
-### 廃止されたメソッド
-
-- {{domxref("FileSystemDirectoryEntry.removeRecursively", "removeRecursively()")}}
-  - : サブディレクトリのコンテンツを含むディレクトリとそのすべてのコンテンツを削除します。これは仕様から削除されました。
+  - : メソッドが呼び出されるディレクトリーに対する相対パスを指定して、ディレクトリーの階層内にあるファイルを表す {{domxref("FileSystemFileEntry")}} オブジェクトを返します。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザの互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- [File and Directory Entries API](/ja/docs/Web/API/File_and_Directory_Entries_API)
-- [File System API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
 - {{domxref("FileSystemDirectoryReader")}}
 - {{domxref("FileSystemEntry")}}
 - {{domxref("FileSystemFileEntry")}}
diff --git a/files/ja/web/api/filesystemdirectoryentry/removerecursively/index.md b/files/ja/web/api/filesystemdirectoryentry/removerecursively/index.md
new file mode 100644
index 00000000000000..bf0b9f61277c0f
--- /dev/null
+++ b/files/ja/web/api/filesystemdirectoryentry/removerecursively/index.md
@@ -0,0 +1,77 @@
+---
+title: "FileSystemDirectoryEntry: removeRecursively() メソッド"
+short-title: removeRecursively()
+slug: Web/API/FileSystemDirectoryEntry/removeRecursively
+l10n:
+  sourceCommit: e4cc8b707a1056c14a6316079798b95cb39b725f
+---
+
+{{APIRef("File and Directory Entries API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+{{domxref("FileSystemDirectoryEntry")}} インターフェイスの **`removeRecursively()`** メソッドは、ディレクトリーとそのコンテンツをすべて除去し、子孫のファイルとディレクトリーのサブツリー全体を階層的に反復処理します。
+
+単一のファイルや空のディレクトリーを除去するには、{{domxref("FileSystemEntry.remove()")}} を使用することもできます。
+
+## 構文
+
+```js-nolint
+removeRecursively(successCallback)
+removeRecursively(successCallback, errorCallback)
+```
+
+### 引数
+
+- `successCallback`
+  - : ディレクトリーの削除処理が完了したら呼び出す関数です。コールバックには引数はありません。
+- `errorCallback` {{optional_inline}}
+  - : ディレクトリーのサブツリーを除去しようとしてエラーが発生した場合に呼び出される関数です。発生したエラーを説明する {{domxref("FileError")}} を入力として受け取ります。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+エラーが発生して `errorCallback` が呼び出された場合、単一の引数、つまりエラーを記述した {{domxref("FileError")}} オブジェクトが渡されます。{{domxref("FileError.code")}} は、以下のように入力したエラーの型を指定します。
+
+- `FileError.INVALID_MODIFICATION_ERR`
+  - : ルートディレクトリーを除去しようとしましたが、これは許可されていません。
+- `FileError.NO_MODIFICATION_ALLOWED_ERR`
+  - : ファイルシステムの状態が変更を許可していません。
+- `FileError.NOT_FOUND_ERR`
+  - : {{domxref("FileSystemDirectoryEntry")}} が表すディレクトリーがもう存在しません。
+- `FileError.NOT_READABLE_ERR`
+  - : ディレクトリーにアクセスできません。他のアプリケーションで使用されているか、オペレーティングシステムレベルでロックされている可能性があります。
+- `FileError.SECURITY_ERR`
+
+  - : セキュリティ上の理由でディレクトリーを除去できませんでした。取りうる理由は次の通りです。
+
+    - ディレクトリーやその内容は、ウェブアプリケーションからアクセスするには安全ではないかもしれません。
+    - ファイルシステムを呼び出す回数が多すぎます。
+    - ユーザーエージェントまたはオペレーティングシステムによって提起される、セキュリティに関する他の懸念。
+
+> **メモ:** 削除できないファイルが 1 つ以上格納されているディレクトリーを削除しようとした場合、またはいくつかのファイルを削除している最中にエラーが発生した場合、いくつかのファイルが削除されないことがあります。これを監視し、処理するために `errorCallback` を提供する必要があります。
+
+## 例
+
+```js
+directory.removeRecursively(
+  () => {
+    /* ディレクトリーは正常に除去された */
+  },
+  () => {
+    /* ディレクトリーの除去中にエラーが発生した */
+  },
+);
+```
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemDirectoryEntry")}}
+- {{domxref("FileSystemEntry.remove()")}}
diff --git a/files/ja/web/api/filesystementry/copyto/index.md b/files/ja/web/api/filesystementry/copyto/index.md
new file mode 100644
index 00000000000000..41ca0ed89a4d1e
--- /dev/null
+++ b/files/ja/web/api/filesystementry/copyto/index.md
@@ -0,0 +1,81 @@
+---
+title: "FileSystemEntry: copyTo() メソッド"
+short-title: copyTo()
+slug: Web/API/FileSystemEntry/copyTo
+l10n:
+  sourceCommit: e4cc8b707a1056c14a6316079798b95cb39b725f
+---
+
+{{APIRef("File and Directory Entries API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+{{domxref("FileSystemEntry")}} インターフェイスの **`copyTo()`** メソッドは、この項目で指定したファイルをファイルシステムの新しい場所にコピーします。
+
+典型的な制限事項がいくつかあります。
+
+- ディレクトリーはそれ自体にコピーすることができません。
+- 新しい名前を指定しない限り、項目は親ディレクトリーにコピーされません。
+- ディレクトリーをコピーする場合、コピーは常に再帰的で、サブフォルダーを省くことはできません。
+
+## 構文
+
+```js-nolint
+copyTo(newParent)
+copyTo(newParent, newName)
+copyTo(newParent, newName, successCallback)
+copyTo(newParent, newName, successCallback, errorCallback)
+```
+
+### 引数
+
+- `newParent`
+  - : コピー処理の宛先ディレクトリーを指定する {{domxref("FileSystemDirectoryEntry")}} オブジェクト。
+- `newName` {{optional_inline}}
+  - : この引数が指定された場合、コピーにはこの文字列が新しいファイル名またはディレクトリー名として指定されます。
+- `successCallback` {{optional_inline}}
+  - : コピー処理が完全に完了したときに呼び出される関数。
+    コピーされたアイテムの新しい詳細を提供する {{domxref("FileSystemEntry")}} ベースのオブジェクトです。
+- `errorCallback` {{optional_inline}}
+  - : オプションのコールバックで、アイテムのコピー中にエラーが発生した場合に実行されます。
+    単一の引数として、何が間違っていたのかを記述する {{domxref("FileError")}} があります。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- `FileError.INVALID_MODIFICATION_ERR`
+  - : リクエストされた演算子には、ディレクトリーの内部や自分自身で子ディレクトリーを移動したり、同じディレクトリー内の項目を名前変更せずにコピーするなど、不可能な変更が含まれています。
+- `FileError.QUOTA_EXCEEDED_ERR`
+  - : 処理がユーザーのストレージクォータを超えたか、処理を運営するのに十分なストレージ空間が残っていません。
+
+## 例
+
+この例は、一時的なログファイルをより永続的な "log" ディレクトリ－に移動させる方法を示しています。
+
+```js
+workingDirectory.getFile(
+  "tmp/log.txt",
+  {},
+  (fileEntry) => {
+    workingDirectory.getDirectory(
+      "log",
+      {},
+      (dirEntry) => {
+        fileEntry.copyTo(dirEntry);
+      },
+      handleError,
+    );
+  },
+  handleError,
+);
+```
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
diff --git a/files/ja/web/api/filesystementry/filesystem/index.md b/files/ja/web/api/filesystementry/filesystem/index.md
new file mode 100644
index 00000000000000..810b5a765b8c5b
--- /dev/null
+++ b/files/ja/web/api/filesystementry/filesystem/index.md
@@ -0,0 +1,38 @@
+---
+title: "FileSystemEntry: filesystem プロパティ"
+short-title: filesystem
+slug: Web/API/FileSystemEntry/filesystem
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+**`filesystem`** は {{domxref("FileSystemEntry")}} インターフェイスの読み取り専用プロパティで、この項目が存在するファイルシステムを表す {{domxref("FileSystem")}} オブジェクトが入ります。
+
+## 値
+
+{{domxref("FileSystem")}} で、この `FileSystemEntry` で記述されているファイルまたはディレクトリーがあるファイルシステムを表します。
+
+## 例
+
+この例は、ファイルを格納するファイルシステムのルートディレクトリーの {{domxref("FileSystemDirectoryEntry")}} を取得します。
+
+```js
+let rootDirEntry = fileEntry.filesystem.root;
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemEntry")}}
+- {{domxref("FileSystem")}}
diff --git a/files/ja/web/api/filesystementry/fullpath/index.md b/files/ja/web/api/filesystementry/fullpath/index.md
new file mode 100644
index 00000000000000..d624a5728d9ebb
--- /dev/null
+++ b/files/ja/web/api/filesystementry/fullpath/index.md
@@ -0,0 +1,54 @@
+---
+title: "FileSystemEntry: fullPath プロパティ"
+short-title: fullPath
+slug: Web/API/FileSystemEntry/fullPath
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+**`fullPath`** は {{domxref("FileSystemEntry")}} インターフェイスの読み取り専用プロパティで、ファイルシステムのルートから項目が表すファイルまでの完全な絶対パスを指定する文字列を返します。
+
+これは、ルートディレクトリーからの相対パスと考えることもでき、"/" を先頭につけて絶対パスとすることもできます。
+
+## 値
+
+文字列で、項目のフルパスを示します。
+
+## 例
+
+この例は、ファイルシステムを指定して呼び出される関数を示しています。この関数は、`data.json` という名前のファイルに対して {{domxref("FileSystemFileEntry")}} を取得し、そのフルパスを返します。
+
+```js
+function gotFileSystem(fs) {
+  let path = "";
+
+  fs.root.getFile(
+    "data.json",
+    { create: true, exclusive: true },
+    (entry) => {
+      path = fullPath;
+    },
+    handleError(error),
+  );
+
+  return path;
+}
+```
+
+ファイルのフルパスが`"/data.json"`であることは、私たち自身が見ているので、明らかに、これは多少作為的なものですが、それを知らないシナリオのための概念です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemEntry")}}
diff --git a/files/ja/web/api/filesystementry/getmetadata/index.md b/files/ja/web/api/filesystementry/getmetadata/index.md
new file mode 100644
index 00000000000000..d1d2eea854cb14
--- /dev/null
+++ b/files/ja/web/api/filesystementry/getmetadata/index.md
@@ -0,0 +1,72 @@
+---
+title: "FileSystemEntry: getMetadata() メソッド"
+short-title: getMetadata()
+slug: Web/API/FileSystemEntry/getMetadata
+l10n:
+  sourceCommit: e4cc8b707a1056c14a6316079798b95cb39b725f
+---
+
+{{APIRef("File and Directory Entries API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+{{domxref("FileSystemEntry")}} の **`getMetadata()`** インターフェイスは、更新日時やサイズなどファイルシステム項目に関する情報を持つ {{domxref("Metadata")}} オブジェクトを取得します。
+
+## 構文
+
+```js-nolint
+getMetadata(successCallback)
+getMetadata(successCallback, errorCallback)
+```
+
+### 引数
+
+- `successCallback`
+  - : コピー処理が完全に完了したときに呼び出される関数。
+    単一の引数として、ファイルに関する情報を持つ {{domxref("Metadata")}} オブジェクトを受け取ります。
+- `errorCallback` {{optional_inline}}
+  - : オプションのコールバックで、メタデータの検索中にエラーが発生した場合に実行されます。引数は単一の {{domxref("FileError")}} で、何が間違っていたのかを記述します。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- `FileError.NOT_FOUND_ERR`
+  - : {{domxref("FileSystemEntry")}} は存在しない項目を参照しています。
+- `FileError.SECURITY_ERR`
+  - : セキュリティ制限により、リクエストされたメタデータを取得できません。
+
+## 例
+
+この例では、一時フォルダー内のログファイルのサイズを調べ、それが 1 メガバイトを超えた場合、それを別のディレクトリーに移します。
+
+```js
+workingDirectory.getFile(
+  "tmp/log.txt",
+  {},
+  (fileEntry) => {
+    fileEntry.getMetadata((metadata) => {
+      if (metadata.size > 1048576) {
+        workingDirectory.getDirectory(
+          "log",
+          {},
+          (dirEntry) => {
+            fileEntry.moveTo(dirEntry);
+          },
+          handleError,
+        );
+      }
+    });
+  },
+  handleError,
+);
+```
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
diff --git a/files/ja/web/api/filesystementry/getparent/index.md b/files/ja/web/api/filesystementry/getparent/index.md
new file mode 100644
index 00000000000000..d10a3d81c3c55f
--- /dev/null
+++ b/files/ja/web/api/filesystementry/getparent/index.md
@@ -0,0 +1,88 @@
+---
+title: "FileSystemEntry: getParent() メソッド"
+short-title: getParent()
+slug: Web/API/FileSystemEntry/getParent
+l10n:
+  sourceCommit: e4cc8b707a1056c14a6316079798b95cb39b725f
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+{{domxref("FileSystemEntry")}} は **`getParent()`** インターフェイスのメソッドで、{{domxref("FileSystemDirectoryEntry")}} を取得します。
+
+## 構文
+
+```js-nolint
+getParent(successCallback, errorCallback)
+getParent(successCallback)
+```
+
+### 引数
+
+- `successCallback`
+  - : 親ディレクトリーの項目が取得されたときに呼び出される関数です。コールバックは単一の引数として、親ディレクトリーを表す {{domxref("FileSystemDirectoryEntry")}} オブジェクトを受け取ります。ルートディレクトリーの親は、ルートディレクトリーそのものとみなされます。
+- `errorCallback` {{optional_inline}}
+  - : オプションのコールバックで、エラーが発生した場合に実行されます。引数は単一の {{domxref("DOMException")}} で、何が間違っていたのかを説明します。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- `FileError.INVALID_STATE_ERR`
+  - : ファイルシステムの状態が許可していないため、処理を実行できませんでした。この例は、例えば、ファイルシステムのキャッシュ状態と実際の状態が異なる場合に発生する可能性があります。
+- `FileError.NOT_FOUND_ERR`
+  - : 指定したパスが得られませんでした。
+- `FileError.SECURITY_ERR`
+  - : セキュリティ上の制限により、親ディレクトリーの情報を取得することができません。
+
+## 例
+
+この例では、変数 `fileEntry` で指定したファイルの名前を `"newname.html"` に変更します。
+
+```js
+fileEntry.getParent(
+  (parent) => {
+    fileEntry.moveTo(parent, "newname.html", (updatedEntry) => {
+      console.log(
+        `ファイル ${fileEntry.name} は newname.html に改名されました。`,
+      );
+    });
+  },
+  (error) => {
+    console.error(
+      `エラーが発生: ${fileEntry.name} を newname.html に改名できませんでした。`,
+    );
+  },
+);
+```
+
+これは、ファイルが現在置かれているディレクトリーを表す {{domxref("FileSystemDirectoryEntry")}} オブジェクトを最初に取得することで実現します。次に、{{domxref("FileSystemEntry.moveTo", "moveTo()")}} を使用して、そのディレクトリー内のファイル名を変更します。
+
+## プロミスの使用
+
+現在のところ、このメソッドの {{jsxref("Promise")}} ベースのバージョンはありません。しかし、単純なヘルパー関数を作成して、このように適応させることはできます。
+
+```js
+function getParentPromise(entry) {
+  return new Promise((resolve, reject) => {
+    entry.getParent(resolve, reject);
+  });
+}
+```
+
+同様の手法は、ファイルとディレクトリー項目 API の他の場所でも見ることができます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
diff --git a/files/ja/web/api/filesystementry/index.md b/files/ja/web/api/filesystementry/index.md
new file mode 100644
index 00000000000000..b26197d8f3a9ef
--- /dev/null
+++ b/files/ja/web/api/filesystementry/index.md
@@ -0,0 +1,95 @@
+---
+title: FileSystemEntry
+slug: Web/API/FileSystemEntry
+l10n:
+  sourceCommit: bd15d43260b7e72b1066c04d9d9f3b79129c619c
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+**`FileSystemEntry`** は ファイルとディレクトリーの項目 API のインターフェイスで、ファイルシステム内の単一の項目を表します。項目はファイルでもディレクトリーでも構いません（ディレクトリーは {{domxref("FileSystemDirectoryEntry")}} インターフェイスで表します）。この API には、ファイルを操作するためのメソッド（コピー、移動、削除、読み込みなど）が含まれます。また、また、この API が指すファイルに関する情報（ファイル名、ルートから項目までのパスなど）も含まれます。
+
+## 基本概念
+
+直接 `FileSystemEntry` オブジェクトを作成することはありません。代わりに、他の API を使用してこのインターフェイスに基づくオブジェクトを受け取ります。このインターフェイスは、{{domxref("FileSystemFileEntry")}} および {{domxref("FileSystemDirectoryEntry")}} インターフェイスの基底クラスとなっており、それぞれファイルとディレクトリーを表すファイルシステム項目に固有の機能を提供します。
+
+`FileSystemEntry` インターフェイスには、ファイルやディレクトリーを操作するためのメソッドが記載されていますが、項目の URL を取得するための便利なメソッド、 [`toURL()`](#tourl) も含まれています。また、新しい URL スキーム `filesystem:` も導入されています。
+
+Google Chrome では、`filesystem:` スキームを使用することで、アプリのオリジンに含まれるすべてのファイルとフォルダーを確認することができます。アプリのオリジンのルートディレクトリーに `filesystem:` スキームを使用するだけです。例えば、アプリが [`http://www.example.com`](https://www.example.com) にある場合、`filesystem:http://www.example.com/temporary/` をタブで開きます。Chrome はアプリのオリジンに含まれるすべてのファイルとフォルダーの読み取り専用のリストを表示します。
+
+### 例
+
+`toURL()` がどのように動作するのかの例を見るには、この[メソッドの説明](#tourl)を参照してください。下記のスニペットは、ファイル名でファイルを除去する方法を示しています。
+
+```js
+// ブラウザー固有の接頭辞を世話する
+window.requestFileSystem =
+  window.requestFileSystem || window.webkitRequestFileSystem;
+
+// …
+
+// 一時ストレージを持つファイルシステムを開く
+window.requestFileSystem(
+  TEMPORARY,
+  1024 * 1024 /*1MB*/,
+  (fs) => {
+    fs.root.getFile(
+      "log.txt",
+      {},
+      (fileEntry) => {
+        fileEntry.remove(() => {
+          console.log("ファイルが削除されました。");
+        }, onError);
+      },
+      onError,
+    );
+  },
+  onError,
+);
+```
+
+## インスタンスプロパティ
+
+_このインターフェイスには以下のプロパティがあります。_
+
+- {{domxref("FileSystemEntry.filesystem", "filesystem")}} {{ReadOnlyInline}}
+  - : この項目があるファイルシステムを表す {{domxref("FileSystem")}} オブジェクト。
+- {{domxref("FileSystemEntry.fullPath", "fullPath")}} {{ReadOnlyInline}}
+  - : ファイルシステムのルートから項目までの完全な絶対パスを指定された文字列。 "/" 文字を先頭につけた、ルートディレクトリーからの相対パスと考えることもできます。
+- {{domxref("FileSystemEntry.isDirectory", "isDirectory")}} {{ReadOnlyInline}}
+  - : 論理値。この項目がディレクトリーを表している場合は `true`、そうでない場合は `false` となります。
+- {{domxref("FileSystemEntry.isFile", "isFile")}} {{ReadOnlyInline}}
+  - : 論理値で、その項目がファイルを表している場合は `true` となります。ファイルでない場合は `false` です。
+- {{domxref("FileSystemEntry.name", "name")}} {{ReadOnlyInline}}
+  - : 項目の名前（パスの最後の "/" の後の部分）が入った文字列。
+
+## インスタンスメソッド
+
+_このインターフェイスには以下のメソッドがあります。_
+
+- {{domxref("FileSystemEntry.copyTo", "copyTo()")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : ファイルまたはディレクトリーをファイルシステムの新しい場所にコピーします。
+- {{domxref("FileSystemEntry.getMetadata", "getMetadata()")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : ファイルの更新日時やサイズなどのメタデータを取得します。
+- {{domxref("FileSystemEntry.getParent", "getParent()")}}
+  - : この項目の親ディレクトリーを表す {{domxref("FileSystemDirectoryEntry")}} を返します。
+- {{domxref("FileSystemEntry.moveTo", "moveTo()")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : ファイルまたはディレクトリーをファイルシステム上の新しい場所に移動させるか、ファイルまたはディレクトリーの名前を変更します。
+- {{domxref("FileSystemEntry.remove", "remove()")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : 指定したファイルまたはディレクトリーを除去されます。削除されるのは空のディレクトリーだけです。
+- {{domxref("FileSystemEntry.toURL", "toURL()")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : この項目を識別する URL を作成して返します。この URL は URL スキーム `"filesystem:"` を使用します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemFileEntry")}} と {{domxref("FileSystemDirectoryEntry")}} は `FileSystemEntry` が基底クラスです。
diff --git a/files/ja/web/api/filesystementry/isdirectory/index.md b/files/ja/web/api/filesystementry/isdirectory/index.md
new file mode 100644
index 00000000000000..f98cbccb4a891c
--- /dev/null
+++ b/files/ja/web/api/filesystementry/isdirectory/index.md
@@ -0,0 +1,50 @@
+---
+title: "FileSystemEntry: isDirectory プロパティ"
+short-title: isDirectory
+slug: Web/API/FileSystemEntry/isDirectory
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+**`isDirectory`** は {{domxref("FileSystemEntry")}} インターフェイスの読み取り専用プロパティで、項目がディレクトリーを表している場合は `true`（{{domxref("FileSystemDirectoryEntry")}} であることを意味しています）、表していない場合は `false` です。
+
+また、{{domxref("FileSystemEntry.isFile", "isFile")}} を使用して、項目がファイルであるかどうかを判断することもできます。
+
+> **警告:** ディレクトリーでない項目はファイルであると想定してはいけません。
+> 多くのオペレーティングシステムには他にもファイル記述子の型があります。必要に応じて `isDirectory` と `isFile` の両方を使用して、その項目が確実に作業する方法を知っているものであることを確認してください。
+
+## 値
+
+論理値で、{{domxref("FileSystemEntry")}} がディレクトリーであるかどうかを示します。
+
+## 例
+
+この例では、このプロパティを使用して、項目をディレクトリーとして処理するか、ファイルとして処理するかを決定する方法を示します。どちらの項目でもない場合は、適切なメッセージとともにエラーハンドラーが呼び出されます。
+
+```js
+if (entry.isDirectory) {
+  processSubdirectory(entry);
+} else if (entry.isFile) {
+  processFile(entry);
+} else {
+  displayErrorMessage("対応していないファイルシステム項目が指定されました。");
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemEntry")}}
+- {{domxref("FileSystemEntry.isFile")}}
+- {{domxref("FileSystemDirectoryEntry")}}
diff --git a/files/ja/web/api/filesystementry/isfile/index.md b/files/ja/web/api/filesystementry/isfile/index.md
new file mode 100644
index 00000000000000..f4be6c85144065
--- /dev/null
+++ b/files/ja/web/api/filesystementry/isfile/index.md
@@ -0,0 +1,50 @@
+---
+title: "FileSystemEntry: isFile プロパティ"
+short-title: isFile
+slug: Web/API/FileSystemEntry/isFile
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+**`isFile`** は {{domxref("FileSystemEntry")}} インターフェイスの読み取り専用プロパティで、項目がファイルを表している場合は `true`（{{domxref("FileSystemFileEntry")}} であることを意味しています）、表していない場合は `false` です。
+
+また、{{domxref("FileSystemEntry.isDirectory", "isDirectory")}} を使用して、項目がディレクトリーであるかどうかを判断することもできます。
+
+> **警告:** ファイルでない項目はディレクトリーであると想定してはいけません。
+> 多くのオペレーティングシステムには他にもファイル記述子の型があります。必要に応じて `isDirectory` と `isFile` の両方を使用して、その項目が確実に作業する方法を知っているものであることを確認してください。
+
+## 値
+
+論理値で、{{domxref("FileSystemEntry")}} がファイルであるかどうかを示します。
+
+## 例
+
+この例では、このプロパティを使用して、項目をディレクトリーとして処理するか、ファイルとして処理するかを決定する方法を示します。どちらの項目でもない場合は、適切なメッセージとともにエラーハンドラーが呼び出されます。
+
+```js
+if (entry.isDirectory) {
+  processSubdirectory(entry);
+} else if (entry.isFile) {
+  processFile(entry);
+} else {
+  displayErrorMessage("対応していないファイルシステム項目が指定されました。");
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemEntry")}}
+- {{domxref("FileSystemEntry.isDirectory")}}
+- {{domxref("FileSystemFileEntry")}}
diff --git a/files/ja/web/api/filesystementry/moveto/index.md b/files/ja/web/api/filesystementry/moveto/index.md
new file mode 100644
index 00000000000000..15e664517759e7
--- /dev/null
+++ b/files/ja/web/api/filesystementry/moveto/index.md
@@ -0,0 +1,88 @@
+---
+title: "FileSystemEntry: moveTo() メソッド"
+short-title: moveTo()
+slug: Web/API/FileSystemEntry/moveTo
+l10n:
+  sourceCommit: e4cc8b707a1056c14a6316079798b95cb39b725f
+---
+
+{{APIRef("File and Directory Entries API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+{{domxref("FileSystemEntry")}} インターフェイスの **`moveTo()`** メソッドは、この項目で指定したファイルをファイルシステムの新しい場所に移動します。
+
+一般的な制限もあります。
+
+- ディレクトリーはそれ自身の中に移動することはできません。
+- 新しい名前を指定しない限り、項目を親ディレクトリーに移動することはできません。
+  新しい名前を指定することで、 `moveTo()` を名前の変更処理と兼用することができます。
+- ディレクトリーを移動する場合、移動は常に再帰的に行われます。
+- 既存のディレクトリーを置き換えるようなファイルの移動や、既存のファイルを置き換えるようなディレクトリーの移動はできません。しかし、ファイルはファイルを置き換えることができ、ディレクトリーはディレクトリーを置き換えることができます。
+- ディレクトリーが空の場合のみ上書きできます。
+
+## 構文
+
+```js-nolint
+moveTo(newParent, newName)
+moveTo(newParent, newName, successCallback)
+moveTo(newParent, newName, successCallback, errorCallback)
+```
+
+### 引数
+
+- `newParent`
+  - : 移動処理の宛先ディレクトリーを指定する {{domxref("FileSystemDirectoryEntry")}} オブジェクト。
+- `newName` {{optional_inline}}
+  - : この引数が指定された場合、この項目にはこの文字列がファイルやディレクトリーの新しい名前となります。
+- `successCallback` {{optional_inline}}
+  - : 移動処理が完全に完了したときに呼び出される関数。
+    移動されたアイテムの新しい詳細を提供する {{domxref("FileSystemEntry")}} ベースのオブジェクトです。
+- `errorCallback` {{optional_inline}}
+  - : オプションのコールバックで、アイテムの移動中にエラーが発生した場合に実行されます。
+    単一の引数として、何が間違っていたのかを記述する {{domxref("FileError")}} があります。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- `FileError.INVALID_MODIFICATION_ERR`
+  - : リクエストされた演算子には、ディレクトリーの内部や自分自身で子ディレクトリーを移動したり、同じディレクトリー内の項目を名前変更せずにコピーするなど、不可能な変更が含まれています。
+- `FileError.QUOTA_EXCEEDED_ERR`
+  - : 処理がユーザーのストレージクォータを超えたか、処理を運営するのに十分なストレージ空間が残っていません。
+
+## 例
+
+この例は、一時的なログファイルが 1 メガバイトを超えた場合に、より永続的な "log" ディレクトリ－に移動させる方法を示しています。
+
+```js
+workingDirectory.getFile(
+  "tmp/log.txt",
+  {},
+  (fileEntry) => {
+    fileEntry.getMetadata((metadata) => {
+      if (metadata.size > 1048576) {
+        workingDirectory.getDirectory(
+          "log",
+          {},
+          (dirEntry) => {
+            fileEntry.moveTo(dirEntry);
+          },
+          handleError,
+        );
+      }
+    });
+  },
+  handleError,
+);
+```
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemEntry.copyTo()")}}
diff --git a/files/ja/web/api/filesystementry/name/index.md b/files/ja/web/api/filesystementry/name/index.md
new file mode 100644
index 00000000000000..16616fab23eb57
--- /dev/null
+++ b/files/ja/web/api/filesystementry/name/index.md
@@ -0,0 +1,40 @@
+---
+title: "FileSystemEntry: name プロパティ"
+short-title: name
+slug: Web/API/FileSystemEntry/name
+l10n:
+  sourceCommit: ce85e3fb7865330e4ac2a6dad25db5cf5d27ea74
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+**`name`** は {{domxref("FileSystemEntry")}} インターフェイスの読み取り専用プロパティで、この項目の名前を指定する文字列を返します。これは、親ディレクトリー内の項目（{{domxref("FileSystemEntry.fullPath", "fullPath")}} プロパティが示すパスの最後の部品）です。
+
+## 値
+
+項目の名前を示す文字列。
+
+## 例
+
+この例では `isFileWithExtension()` という関数を示しています。この関数は、指定した {{domxref("FileSystemEntry")}} がファイルであり、かつそのファイル名が指定された拡張子で終わっている場合に true を返します。
+
+```js
+function isFileWithExtension(entry, extension) {
+  return entry.isFile && entry.name.endsWith(`.${extension}`);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemEntry")}}
+- {{domxref("FileSystemEntry.fullPath")}}
diff --git a/files/ja/web/api/filesystementry/remove/index.md b/files/ja/web/api/filesystementry/remove/index.md
new file mode 100644
index 00000000000000..8fc9f5a6c13280
--- /dev/null
+++ b/files/ja/web/api/filesystementry/remove/index.md
@@ -0,0 +1,71 @@
+---
+title: "FileSystemEntry: remove() メソッド"
+short-title: remove()
+slug: Web/API/FileSystemEntry/remove
+l10n:
+  sourceCommit: e4cc8b707a1056c14a6316079798b95cb39b725f
+---
+
+{{APIRef("File and Directory Entries API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+{{domxref("FileSystemEntry")}} インターフェイスの **`remove()`** メソッドは、ファイルシステムからファイルまたはディレクトリーを除去します。ディレクトリーは空でなければ除去されません。
+
+ディレクトリーとそのコンテンツおよびサブディレクトリーをすべて再帰的に削除するには、代わりに {{domxref("FileSystemDirectoryEntry.removeRecursively()")}} を呼び出します。
+
+## 構文
+
+```js-nolint
+remove(successCallback)
+remove(successCallback, errorCallback)
+```
+
+### 引数
+
+- `successCallback`
+  - : ファイルが正常に除去されると呼び出される関数。
+- `errorCallback` {{optional_inline}}
+  - : ファイルの除去に失敗した場合に呼び出されるオプションのコールバック。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- `FileError.INVALID_MODIFICATION_ERR`
+  - : 指定した項目がファイルシステムのルートディレクトリーであったか、指定した項目が空でないディレクトリーであった場合。
+- `FileError.INVALID_STATE_ERR`
+  - : ファイルシステムのキャッシュ状態がディスク上の状態と矛盾しているため、安全上の理由からファイルを削除できませんでした。
+- `FileError.NO_MODIFICATION_ALLOWED_ERR`
+  - : ファイルシステムの状態がファイルやディレクトリーの除去を許可していません。
+- `FileError.NOT_FOUND_ERR`
+  - : ファイルまたはディレクトリーが存在しません。
+- `FileError.SECURITY_ERR`
+  - : 権限や他にもアクセスする制約があるため、またはファイルリソースに呼び出される数が多すぎるため、項目を除去できませんでした。
+
+## 例
+
+この例では、一時的な作業ファイルを削除します。
+
+```js
+workingDirectory.getFile(
+  "tmp/workfile.json",
+  {},
+  (fileEntry) => {
+    fileEntry.remove(() => {
+      /* ファイルの削除に成功 */
+    });
+  },
+  handleError,
+);
+```
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemDirectoryEntry.removeRecursively()")}}
diff --git a/files/ja/web/api/filesystementry/tourl/index.md b/files/ja/web/api/filesystementry/tourl/index.md
new file mode 100644
index 00000000000000..16dc3b8b3cb210
--- /dev/null
+++ b/files/ja/web/api/filesystementry/tourl/index.md
@@ -0,0 +1,58 @@
+---
+title: "FileSystemEntry: toURL() メソッド"
+short-title: toURL()
+slug: Web/API/FileSystemEntry/toURL
+l10n:
+  sourceCommit: b0870830e4c02596ca6c501f8f8b468a917eafc2
+---
+
+{{APIRef("File and Directory Entry API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+{{domxref("FileSystemEntry")}} インターフェイスの **`toURL()`** メソッドは、ファイルシステム項目を識別するために使用することができる URL を格納した文字列を作成して返します。
+これは `src` 属性や `href` 属性の値として使用することができる新しい URL スキーム `filesystem:` を公開することで行われます。
+
+## 構文
+
+```js-nolint
+toURL()
+toURL(mimeType)
+```
+
+### 引数
+
+- `mimeType` {{optional_inline}}
+  - : オプションの文字列で、ファイルを解釈するときに使用する MIME タイプを指定します。これは、ユーザーエージェントが自動的に認識しない型を持つファイルに対処するために使用することができます。この引数が省略された場合、ユーザーエージェントは標準アルゴリズムを使用してファイルを識別します。
+
+### 返値
+
+HTML コンテンツ内の文書参照として使用することができる URL を含む文字列、または URL を生成できない場合は空文字列（ファイルシステムの実装が `toURL()` をサポートしていない場合など）。
+
+## 例
+
+ウェブサイトやアプリで利用できるファイルシステムに画像ファイルに対応する {{domxref("FileSystemFileEntry")}} がある場合、`toURL()` を呼び出すと HTML の中で使用することができます。自分のサイトが `http://my-awesome-website.woot` にあり、一時ファイルシステムに `awesomesauce.jpg` という名前の画像ファイルがある場合、`toURL()` が返す URL は（ブラウザー実装によっては）`"filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"` のようなものになるかもしれません。
+
+これを使用するコードは次のようになるでしょう。
+
+```js
+let img = document.createElement("img");
+
+img.src = imageFileEntry.toURL();
+document.body.appendChild(img);
+```
+
+コードの前に述べたシナリオを想定すると、結果は次のような HTML が文書の終わりに追加されることになります。
+
+```html
+<img
+  src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg" />
+```
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の紹介](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemDirectoryEntry.removeRecursively()")}}
diff --git a/files/ja/web/api/filesystemfilehandle/index.md b/files/ja/web/api/filesystemfilehandle/index.md
index 50cf229b19a7c2..7122037b70b69f 100644
--- a/files/ja/web/api/filesystemfilehandle/index.md
+++ b/files/ja/web/api/filesystemfilehandle/index.md
@@ -81,7 +81,7 @@ async function writeFile(fileHandle, contents) {
 
 - 同期式のファイルアクセスハンドルを作成します。
 - ファイルのサイズを取得し、格納用の {{jsxref("ArrayBuffer")}} を作成します。
-- ファイルの内容をそのバッファに読み込みます。
+- ファイルの内容をそのバッファーに読み込みます。
 - メッセージをエンコードし、ファイルの終端に書き込みます。
 - 変更をディスクに保存し、アクセスハンドルを閉じます。
 
@@ -98,7 +98,7 @@ onmessage = async (e) => {
 
   // ファイルのサイズを取得する
   const fileSize = accessHandle.getSize();
-  // ファイルの内容をバッファに読み込む
+  // ファイルの内容をバッファーに読み込む
   const buffer = new DataView(new ArrayBuffer(fileSize));
   const readBuffer = accessHandle.read(buffer, { at: 0 });
 
diff --git a/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md b/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md
index 1137f18ca3386b..48162648e94a35 100644
--- a/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md
+++ b/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md
@@ -27,7 +27,7 @@ truncate(newSize)
 ### 例外
 
 - `InvalidStateError` {{domxref("DOMException")}}
-  - : 対応するアクセスハンドルが既に閉じられているか、ファイルのバイナリデータの変更が失敗したとき投げられます。
+  - : 対応するアクセスハンドルが既に閉じられているか、ファイルのバイナリーデータの変更が失敗したとき投げられます。
 - `QuotaExceededError` {{domxref("DOMException")}}
   - : `newSize` がファイルのもとのサイズより大きく、ブラウザーの[ストレージ制限](/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)を超えるとき投げられます。
 
diff --git a/files/ja/web/api/fontface/fontface/index.md b/files/ja/web/api/fontface/fontface/index.md
index 10cd628a7b7018..40d66e0de51032 100644
--- a/files/ja/web/api/fontface/fontface/index.md
+++ b/files/ja/web/api/fontface/fontface/index.md
@@ -63,7 +63,7 @@ new FontFace(family, source, descriptors)
 ### 例外
 
 - `SyntaxError` {{domxref("DOMException")}}
-  - : 記述子の文字列が、対応する {{cssxref("@font-face")}} 記述子の文法に照合しないか、指定するバイナリソースを読み込むことができない場合に発生します。
+  - : 記述子の文字列が、対応する {{cssxref("@font-face")}} 記述子の文法に照合しないか、指定するバイナリーソースを読み込むことができない場合に発生します。
     このエラーでは {{domxref("FontFace.status")}} が `error` に設定されます。
 
 ## 例
diff --git a/files/ja/web/api/fullscreen_api/index.md b/files/ja/web/api/fullscreen_api/index.md
index 699148e04679f9..b5f915881fb9c4 100644
--- a/files/ja/web/api/fullscreen_api/index.md
+++ b/files/ja/web/api/fullscreen_api/index.md
@@ -11,7 +11,7 @@ l10n:
 
 API の使い方についての詳細は、 [全画面 API ガイド](/ja/docs/Web/API/Fullscreen_API/Guide)をご覧ください。
 
-> **メモ:** この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。ベンダーに依存せずに全画面 API にアクセスできる [Fscreen](https://github.com/rafgraph/fscreen) のようなライブラリのー使用を検討したほうが良いかもしれません。
+> **メモ:** この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。ベンダーに依存せずに全画面 API にアクセスできる [Fscreen](https://github.com/rafgraph/fscreen) のようなライブラリーのー使用を検討したほうが良いかもしれません。
 
 ## インターフェイス
 
@@ -33,7 +33,7 @@ _全画面 API 自体に独自のインターフェイスはありません。
 
 ## インスタンスプロパティ
 
-_{{DOMxRef("Document")}} インターフェイスはこのインターフェースは、全画面モードに対応していて利用できるかどうか、全画面モードが現在有効であれば、どの要素が画面を使用しているかを判断するために使用できるプロパティを提供します_。
+_{{DOMxRef("Document")}} インターフェイスはこのインターフェイスは、全画面モードに対応していて利用できるかどうか、全画面モードが現在有効であれば、どの要素が画面を使用しているかを判断するために使用できるプロパティを提供します_。
 
 - {{DOMxRef("Document.fullscreenElement")}} / {{DOMxRef("ShadowRoot.fullscreenElement")}}
   - : `fullscreenElement` プロパティで、現在全画面モードで表示されている DOM （またはシャドウ DOM）上の要素 ({{DOMxRef("Element")}}) が分かります。これが `null` の場合、文書（またはシャドウ DOM）は全画面モードになっていません。
diff --git a/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md
index d3606c25f3e113..5ad91d630d782a 100644
--- a/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -107,14 +107,14 @@ window.addEventListener("gamepadconnected", (e) => {
 
 - `id`: コントローラーに関する情報を含んだ文字列です。これは厳密には指定されていなく、Firefox では、コントローラーの USB ベンダと製品 ID を含んでいる 2 つの 4 桁 16 進数字列、およびドライバーから提供されるようなコントローラーの名前といった 3 つの情報が、ダッシュ (`-`) により分離され含まれています。この情報はユーザーへの有益なフィードバックを表示するとともに、デバイスのコントロールのマッピングを見つけることができるようにします。
 - `index`: 現在システムに接続されているゲームパッドごとに固有の整数。この値は複数のコントローラーを区別するために使用できます。デバイスを切断してから新しいデバイスを接続すると、以前のインデックスが再利用されることに注意してください。
-- `mapping`: ブラウザがデバイス上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。現在、サポートされている既知のレイアウト - [標準のゲームパッド](https://w3c.github.io/gamepad/gamepad.html#remapping)は 1 つしかありません。ブラウザがデバイス上のコントロールをそのレイアウトにマッピングできる場合、 `mapping` プロパティは文字列 `standard` に設定されます。
+- `mapping`: ブラウザーがデバイス上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。現在、サポートされている既知のレイアウト - [標準のゲームパッド](https://w3c.github.io/gamepad/gamepad.html#remapping)は 1 つしかありません。ブラウザーがデバイス上のコントロールをそのレイアウトにマッピングできる場合、 `mapping` プロパティは文字列 `standard` に設定されます。
 - `connected`:ゲームパッドがシステムに接続されているかどうかを示すブール値。もし接続されている場合は `True`。接続されていない場合は `False` が設定されます。
 - `buttons`: デバイス上に存在するボタンを表す {{ domxref("GamepadButton") }} オブジェクトの配列。各 {{ domxref("GamepadButton") }} には、`pressed` プロパティと `value` のプロパティがあります。
 
   - `pressed` プロパティは、ボタンが現在押されている (`true`) か押されていない (`false`) かを示すブール値です。>
   - `value` プロパティは、現代の多くのゲームパッドのトリガなど、アナログボタンの表示を有効にするために使用される浮動小数点値です。値は 0.0..1.0 の範囲に正規化され、 0.0 は押されていないボタンを表し、 1.0 は完全に押されたボタンを表します。
 
-- `axes`: デバイス上に軸があるコントロールを表す配列 (例：アナログサムスティック)。 配列の各エントリは-1.0〜1.0 の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。
+- `axes`: デバイス上に軸があるコントロールを表す配列 (例：アナログサムスティック)。 配列の各エントリーは-1.0〜1.0 の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。
 - `timestamp`: このゲームパッドのデータが最後に更新された時刻を表す {{ domxref("DOMHighResTimeStamp") }} を返します。この値により、開発者は `axes` と `button` のデータがハードウェアから更新されたかどうかを判断できます。 値は、 {{ domxref("PerformanceTiming") }} インターフェイスの `navigationStart` 属性との相対値でなければなりません。 値は単調に増加します。つまり、更新の順序を決定するために比較することができます。新しい値は常に古い値よりも大きいか等しいためです。このプロパティは現在 Firefox ではサポートされていません。
 
 > **メモ:** Gamepad オブジェクトは、セキュリティ上の理由から {{ domxref("Window") }} オブジェクトではなく {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントで使用できます。一度参照を取得すると、そのプロパティでゲームパッドの現在の状態に関する情報を照会できます。 このオブジェクトは、ゲームパッドの状態が変わるたびに更新されます。
@@ -123,7 +123,7 @@ window.addEventListener("gamepadconnected", (e) => {
 
 1 つのゲームパッドの接続情報を表示する簡単な例を見てみましょう (後続のゲームパッド接続を無視します)。ゲームパッドの右側にある 4 つのゲームパッドボタンを使用してボールを画面の周りに移動できます。[デモをライブで見ることができ](http://chrisdavidmills.github.io/gamepad-buttons/)ことができ、Github で[ソースコードを見つけることができます](https://github.com/chrisdavidmills/gamepad-buttons/tree/master)。
 
-まず、いくつかの変数を宣言します。接続情報が書き込まれる `gamepadInfo` のパラグラフ、移動する `ball`、`requestAnimation Frame` の ID として機能する `start` 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザフォークで使用されます。
+まず、いくつかの変数を宣言します。接続情報が書き込まれる `gamepadInfo` のパラグラフ、移動する `ball`、`requestAnimation Frame` の ID として機能する `start` 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザーフォークで使用されます。
 
 ```js
 const gamepadInfo = document.getElementById("gamepad-info");
diff --git a/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md b/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
index be37744079a5c9..44dd5b815027cf 100644
--- a/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
+++ b/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
@@ -11,7 +11,7 @@ HTML ドラッグ & ドロップインターフェイスは、ウェブアプリ
 
 ドラッグ & ドロップの主な手順は、ドロップゾーン（ファイルドロップの対象要素）を定義することと、 {{domxref("HTMLElement/drop_event", "drop")}} および {{domxref("HTMLElement/dragover_event", "dragover")}} イベントのイベントハンドラーを定義することです。これらの手順は、コード例を含め、下記で記述します。完全なソースコードは [MDN のドラッグ & ドロップリポジトリー](https://github.com/mdn/dom-examples/tree/main/drag-and-drop)で利用できます（プルリクエストや issue を歓迎します）。
 
-なお、 {{domxref("HTML_Drag_and_Drop_API","HTML ドラッグ & ドロップ", "", 1)}}では、ファイルのドラッグ & ドロップに対応するために 2 つの異なる形の API を定義しています。一方の API は {{domxref("DataTransfer")}} インターフェイスで、もう一方の API は {{domxref("DataTransferItem")}} と {{domxref("DataTransferItemList")}} インターフェイスです。この例では、両方の API の使用方法を説明します （そして、Gecko 固有のインターフェースは一切使用しません）。
+なお、 {{domxref("HTML_Drag_and_Drop_API","HTML ドラッグ & ドロップ", "", 1)}}では、ファイルのドラッグ & ドロップに対応するために 2 つの異なる形の API を定義しています。一方の API は {{domxref("DataTransfer")}} インターフェイスで、もう一方の API は {{domxref("DataTransferItem")}} と {{domxref("DataTransferItemList")}} インターフェイスです。この例では、両方の API の使用方法を説明します （そして、Gecko 固有のインターフェイスは一切使用しません）。
 
 ## ドロップゾーンの定義
 
diff --git a/files/ja/web/api/navigator/appname/index.md b/files/ja/web/api/navigator/appname/index.md
index 646f99c94dca3a..ba24600901bd4b 100644
--- a/files/ja/web/api/navigator/appname/index.md
+++ b/files/ja/web/api/navigator/appname/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Navigator.appName`** プロパティの値は、どのブラウザーでも常に "`Netscape`" です。このプロパティは互換性ためだけに維持されています。
 
-> **メモ:** このプロパティが実際のブラウザー名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Netscape`" を返します。
+> [!NOTE]
+> このプロパティが実際のブラウザー名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Netscape`" を返します。
 
 ### 値
 
diff --git a/files/ja/web/api/navigator/appversion/index.md b/files/ja/web/api/navigator/appversion/index.md
index b1d82d466f588e..9c135c685d1dc4 100644
--- a/files/ja/web/api/navigator/appversion/index.md
+++ b/files/ja/web/api/navigator/appversion/index.md
@@ -10,7 +10,8 @@ l10n:
 
 "`4.0`" またはそのブラウザーのバージョン情報を表す文字列のどちらかを返します。
 
-> **メモ:** このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。
+> [!NOTE]
+> このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。
 
 ## 値
 
diff --git a/files/ja/web/api/navigator/cookieenabled/index.md b/files/ja/web/api/navigator/cookieenabled/index.md
index 03b0b3cf5d8f9e..86c0fa82d40649 100644
--- a/files/ja/web/api/navigator/cookieenabled/index.md
+++ b/files/ja/web/api/navigator/cookieenabled/index.md
@@ -16,9 +16,11 @@ l10n:
 
 論理値です。
 
-> **メモ:** ブラウザーがサードパーティのクッキーをブロックするように構成されていた場合で、 `navigator.cookieEnabled` がサードパーティの iframe の中で呼び出された場合、 Safari, Edge Spartan, IE では `true` を返します (この場合にクッキーを設定しようとしても失敗するにもかかわらず)。 Firefox および Chromium ベースのブラウザーでは `false` を返します。
+> [!NOTE]
+> ブラウザーがサードパーティのクッキーをブロックするように構成されていた場合で、 `navigator.cookieEnabled` がサードパーティの iframe の中で呼び出された場合、 Safari, Edge Spartan, IE では `true` を返します (この場合にクッキーを設定しようとしても失敗するにもかかわらず)。 Firefox および Chromium ベースのブラウザーでは `false` を返します。
 
-> **メモ:** ウェブブラウザーは特定の場面で特定のクッキーを書き込むことを阻止することがあります。例えば、 Chrome ベースのブラウザーや、 Firefox の一部の実験的なバージョンでは、 [`SameSite=None`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 属性の付いたクッキーを作成することを許可しませんが、 HTTPS 上で生成され `Secure` 属性がある場合は例外です。
+> [!NOTE]
+> ウェブブラウザーは特定の場面で特定のクッキーを書き込むことを阻止することがあります。例えば、 Chrome ベースのブラウザーや、 Firefox の一部の実験的なバージョンでは、 [`SameSite=None`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 属性の付いたクッキーを作成することを許可しませんが、 HTTPS 上で生成され `Secure` 属性がある場合は例外です。
 
 ## 例
 
diff --git a/files/ja/web/api/navigator/geolocation/index.md b/files/ja/web/api/navigator/geolocation/index.md
index b847271aea9fb4..4e5bf87e6494ce 100644
--- a/files/ja/web/api/navigator/geolocation/index.md
+++ b/files/ja/web/api/navigator/geolocation/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Navigator.geolocation`** は読み取り専用のプロパティで、ウェブコンテンツが端末の位置情報にアクセスするための {{domxref("Geolocation")}} オブジェクトを返します。これにより、ウェブサイトやアプリがユーザーの現在の位置に応じた結果を提供できるようになります。
 
-> **メモ:** セキュリティ上の理由により、ウェブページが位置情報にアクセスしようとする時、ユーザーにアクセス許可が求められます。その方法やポリシーはブラウザーによって異なることに注意してください。
+> [!NOTE]
+> セキュリティ上の理由により、ウェブページが位置情報にアクセスしようとする時、ユーザーにアクセス許可が求められます。その方法やポリシーはブラウザーによって異なることに注意してください。
 
 ## 値
 
diff --git a/files/ja/web/api/navigator/getbattery/index.md b/files/ja/web/api/navigator/getbattery/index.md
index 3f2e2a232d271b..73690897ca365a 100644
--- a/files/ja/web/api/navigator/getbattery/index.md
+++ b/files/ja/web/api/navigator/getbattery/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`getBattery()`** メソッドは、システムのバッテリーに関する情報を提供します。これは {{domxref("BatteryManager")}} オブジェクトで解決されるバッテリーのプロミスを返し、バッテリーの状態を監視するために処理できるいくつかの新しいイベントを提供します。これは[バッテリー状態 API](/ja/docs/Web/API/Battery_Status_API) を実装しています。詳細、API の使用ガイド、サンプルコードについては、そのドキュメントを参照してください。
 
-> **メモ:** ブラウザーによっては、この機能へのアクセスは {{HTTPHeader("Feature-Policy")}} の {{HTTPHeader("Feature-Policy/battery","battery")}} ディレクティブで制御されます。
+> [!NOTE]
+> ブラウザーによっては、この機能へのアクセスは {{HTTPHeader("Feature-Policy")}} の {{HTTPHeader("Feature-Policy/battery","battery")}} ディレクティブで制御されます。
 
 ## 構文
 
@@ -33,7 +34,8 @@ getBattery()
 
   - : ユーザーエージェントは安全でないコンテキストではバッテリー情報を公開しませんが、このメソッドが安全でないコンテキストから呼び出されました。
 
-    > **メモ:** 一部のユーザーエージェントの古いバージョンでは、安全でないコンテキストでこの機能の利用を許可していることがあります。
+    > [!NOTE]
+    > 一部のユーザーエージェントの古いバージョンでは、安全でないコンテキストでこの機能の利用を許可していることがあります。
 
 - `NotAllowedError`
   - : 現在この例外を発生させるユーザーエージェントはありませんが、仕様書では以下のような動作が記述されています。
diff --git a/files/ja/web/api/navigator/getusermedia/index.md b/files/ja/web/api/navigator/getusermedia/index.md
index d1705dd2bcc2a3..bc937c0121c5ad 100644
--- a/files/ja/web/api/navigator/getusermedia/index.md
+++ b/files/ja/web/api/navigator/getusermedia/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Navigator/getUserMedia
 
 許可が与えられた場合、それらの機器から動画や音声のトラックを持つ `MediaStream` が、指定された成功コールバックに配信されます。許可が拒否された場合や、互換性のある入力機器が存在しない場合、その他のエラー条件が発生した場合は、何が問題となったかを説明する {{domxref("MediaStreamError")}} オブジェクトを伴ってエラーコールバックが実行されます。ユーザーがまったく選択をしなかった場合は、どちらのコールバックも実行されません。
 
-> **メモ:** これは古いメソッドです。代わりに新しい {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} を使用してください。技術的には非推奨ではありませんが、この古いコールバックの版はそのようにマークされていますので、新しいプロミスを返す版を使用するよう強くお勧めします。
+> [!NOTE]
+> これは古いメソッドです。代わりに新しい {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} を使用してください。技術的には非推奨ではありませんが、この古いコールバックの版はそのようにマークされていますので、新しいプロミスを返す版を使用するよう強くお勧めします。
 
 ## 構文
 
@@ -92,7 +93,8 @@ if (navigator.getUserMedia) {
 
 ## ブラウザーの互換性
 
-> **警告:** 新しいコードでは代わりに {{domxref("MediaDevices.getUserMedia")}} を使用してください。
+> [!WARNING]
+> 新しいコードでは代わりに {{domxref("MediaDevices.getUserMedia")}} を使用してください。
 
 {{Compat}}
 
diff --git a/files/ja/web/api/navigator/platform/index.md b/files/ja/web/api/navigator/platform/index.md
index eaf9e2f2a536ef..eb20fc986a76a8 100644
--- a/files/ja/web/api/navigator/platform/index.md
+++ b/files/ja/web/api/navigator/platform/index.md
@@ -11,7 +11,8 @@ l10n:
 ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。
 **`platform`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、ユーザーのブラウザーが動作しているプラットフォームを特定する文字列を返します。
 
-> **メモ:** 一般的に、このようなメソッドやプロパティを使用してユーザー環境の情報を探そうとするコードを書くことは可能な限り避け、代わりに[機能検出](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)を行うコードを書くべきです。
+> [!NOTE]
+> 一般的に、このようなメソッドやプロパティを使用してユーザー環境の情報を探そうとするコードを書くことは可能な限り避け、代わりに[機能検出](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)を行うコードを書くべきです。
 
 ## 値
 
diff --git a/files/ja/web/api/navigator/product/index.md b/files/ja/web/api/navigator/product/index.md
index c2ba6b9670df7b..2df26c845b28b0 100644
--- a/files/ja/web/api/navigator/product/index.md
+++ b/files/ja/web/api/navigator/product/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Navigator.product`** プロパティの値は、どのブラウザーでも常に "`Gecko`" です。このプロパティは互換性のためだけに維持されています。
 
-> **メモ:** このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Gecko`" を返します。
+> [!NOTE]
+> このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Gecko`" を返します。
 
 ### 値
 
diff --git a/files/ja/web/api/navigator/registerprotocolhandler/index.md b/files/ja/web/api/navigator/registerprotocolhandler/index.md
index 208a1ef52433b5..1d6a76b411df36 100644
--- a/files/ja/web/api/navigator/registerprotocolhandler/index.md
+++ b/files/ja/web/api/navigator/registerprotocolhandler/index.md
@@ -16,7 +16,8 @@ registerProtocolHandler(scheme, url);
 registerProtocolHandler(scheme, url, title);
 ```
 
-> **メモ:** 非推奨の `title` 引数が付いたものは、互換性のために推奨されます（下記の引数情報を参照してください）。
+> [!NOTE]
+> 非推奨の `title` 引数が付いたものは、互換性のために推奨されます（下記の引数情報を参照してください）。
 
 ### 引数
 
@@ -30,14 +31,16 @@ registerProtocolHandler(scheme, url, title);
   - : ハンドラーの URL を指定する文字列。
     **この URL には `%s` を含める必要があり**、これは取り扱う URL を[エスケープした](/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)もので置き換得られるプレイスホルダーとして扱われます。
 
-    > **メモ:** ハンドラーの URL は `https` スキームを使用する必要があります。古いブラウザーは `http` にも対応しています。
+    > [!NOTE]
+    > ハンドラーの URL は `https` スキームを使用する必要があります。古いブラウザーは `http` にも対応しています。
 
 - `title` {{deprecated_inline}}
 
   - : ハンドラーを表す人間が読めるタイトル文字列です。
     **これはユーザーに表示されます**。例えば、「このサイトで [スキーム] のリンクを扱うことを許可しますか？」と尋ねたり、ブラウザーの設定で登録されたハンドラーの一覧に表示されたりします。
 
-    > **メモ:** タイトルはなりすましの懸念から仕様から削除されました。
+    > [!NOTE]
+    > タイトルはなりすましの懸念から仕様から削除されました。
     > しかし `title` は一部のブラウザーが**まだ必要としている**ため、設定する必要があります（[下記の互換性一覧表](#ブラウザーの互換性)をご覧ください）。
     > 更新された仕様に対応しているブラウザーはほとんどの場合、タイトルを受け付けますが、無視します。
 
diff --git a/files/ja/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/ja/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
index 226f0f61fae928..652a0166ff7a2f 100644
--- a/files/ja/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
+++ b/files/ja/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
@@ -37,7 +37,8 @@ navigator.registerProtocolHandler(
 
 ![](protocolregister.png)
 
-> **メモ:** URL テンプレートが提供されるとき、登録する URL は登録が行われようとするウェブページと同じドメインである**必要があります**。異なるドメインであった場合は、登録は失敗します。 例えば `http://example.com/homepage.html` では `http://example.com/handle_mailto/%s` はプロトコルハンドラーとして登録可能ですが、 `http://example.org/handle_mailto/%s` はプロトコルハンドラーとして登録することはできません。
+> [!NOTE]
+> URL テンプレートが提供されるとき、登録する URL は登録が行われようとするウェブページと同じドメインである**必要があります**。異なるドメインであった場合は、登録は失敗します。 例えば `http://example.com/homepage.html` では `http://example.com/handle_mailto/%s` はプロトコルハンドラーとして登録可能ですが、 `http://example.org/handle_mailto/%s` はプロトコルハンドラーとして登録することはできません。
 
 同じプロトコルハンドラーを 2 回以上登録すると、そのプロトコルハンドラーが既に登録済みであることを示す別のポップアップが表示されます。従って、プロトコルハンドラーの登録を呼び出すのを防ぐために、以下のように既に登録済みであるかどうかを確認するのが良いでしょう。
 
@@ -91,7 +92,8 @@ http://www.google.co.uk/?uri=web+burger:cheeseburger
 
 サーバー側コードは、クエリー文字列の引数を展開し、要求されたアクションを行います。
 
-> **メモ:** サーバー側コードには `href` 属性の値の**全体**が渡されます。つまり、サーバー側コードは、そのデータからプロトコルを解釈しなければならないということです。
+> [!NOTE]
+> サーバー側コードには `href` 属性の値の**全体**が渡されます。つまり、サーバー側コードは、そのデータからプロトコルを解釈しなければならないということです。
 
 ### 例
 
diff --git a/files/ja/web/api/navigator/useragent/index.md b/files/ja/web/api/navigator/useragent/index.md
index 0885ce3da1c22a..2c8d071640de1c 100644
--- a/files/ja/web/api/navigator/useragent/index.md
+++ b/files/ja/web/api/navigator/useragent/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`Navigator.userAgent`** は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。
 
-> **メモ:** 仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。
+> [!NOTE]
+> 仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。
 >
 > また、ブラウザーのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。
 
diff --git a/files/ja/web/api/navigatoruadata/gethighentropyvalues/index.md b/files/ja/web/api/navigatoruadata/gethighentropyvalues/index.md
index 0d797a41b29c5c..5c7e07f4bee0b2 100644
--- a/files/ja/web/api/navigatoruadata/gethighentropyvalues/index.md
+++ b/files/ja/web/api/navigatoruadata/gethighentropyvalues/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`getHighEntropyValues()`** は {{domxref("NavigatorUAData")}} インターフェイスのメソッドで、ユーザーエージェントが返す _高エントロピー_ 値を格納した辞書オブジェクトで解決される {{jsxref("Promise")}} を返し案す。
 
-> **メモ:** 「高エントロピー」「低エントロピー」という用語は、これらの値がブラウザーについて明らかにする情報の量を示します。
+> [!NOTE]
+> 「高エントロピー」「低エントロピー」という用語は、これらの値がブラウザーについて明らかにする情報の量を示します。
 > プロパティとして返される値は、低エントロピーであり、ユーザーを特定する可能性は低いと判断されます。
 > {{domxref("NavigatorUAData.getHighEntropyValues()")}} が返す値は、より多くの情報を明らかにする可能性があります。
 > そのため、これらの値は {{jsxref("Promise")}} によって取得され、ブラウザーがユーザーの許可を求めたり、他のチェックを行ったりする時間を確保することができます。
diff --git a/files/ja/web/api/navigatoruadata/index.md b/files/ja/web/api/navigatoruadata/index.md
index 4157c178651612..907dd3bfc7582d 100644
--- a/files/ja/web/api/navigatoruadata/index.md
+++ b/files/ja/web/api/navigatoruadata/index.md
@@ -11,7 +11,8 @@ l10n:
 
 このオブジェクトのインスタンスは {{domxref("Navigator.userAgentData")}} を呼び出すことによって返されます。そのため、このインターフェイスにはコンストラクターはありません。
 
-> **メモ:** 「高エントロピー」と「低エントロピー」という用語は、これらの値がブラウザーについて明らかにする情報の量を参照しています。プロパティとして返される値は、低エントロピーであり、ユーザーを特定する可能性が低いと判断されます。 {{domxref("NavigatorUAData.getHighEntropyValues()")}} によって返される値は、より多くの情報を明らかにする可能性があります。そのため、これらの値は {{jsxref("Promise")}} によって取得され、ブラウザーがユーザーの許可を要求したり、他のチェックを行ったりするための時間を確保することができます。
+> [!NOTE]
+> 「高エントロピー」と「低エントロピー」という用語は、これらの値がブラウザーについて明らかにする情報の量を参照しています。プロパティとして返される値は、低エントロピーであり、ユーザーを特定する可能性が低いと判断されます。 {{domxref("NavigatorUAData.getHighEntropyValues()")}} によって返される値は、より多くの情報を明らかにする可能性があります。そのため、これらの値は {{jsxref("Promise")}} によって取得され、ブラウザーがユーザーの許可を要求したり、他のチェックを行ったりするための時間を確保することができます。
 
 ## インスタンスプロパティ
 
diff --git a/files/ja/web/api/navigatoruadata/tojson/index.md b/files/ja/web/api/navigatoruadata/tojson/index.md
index 19bcc4545eecf7..3bf7c499ed78c0 100644
--- a/files/ja/web/api/navigatoruadata/tojson/index.md
+++ b/files/ja/web/api/navigatoruadata/tojson/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`toJSON()`** は {{domxref("NavigatorUAData")}} インターフェイスのメソッドで、インターフェースは、 `NavigatorUAData` オブジェクトの低エントロピーのプロパティの JSON 表現を返す _シリアライザー_ です。
 
-> **メモ:** 高エントロピーと低エントロピーという用語は、これらの値がブラウザーについて明らかにする情報の量を参照します。このメソッドで返される低エントロピーの値は、ユーザーを特定できるような情報を明らかにしない値です。高エントロピーの値は {{domxref("NavigatorUAData.getHighEntropyValues()")}} メソッドによってのみ返すことができます。
+> [!NOTE]
+> 高エントロピーと低エントロピーという用語は、これらの値がブラウザーについて明らかにする情報の量を参照します。このメソッドで返される低エントロピーの値は、ユーザーを特定できるような情報を明らかにしない値です。高エントロピーの値は {{domxref("NavigatorUAData.getHighEntropyValues()")}} メソッドによってのみ返すことができます。
 
 ## 構文
 
diff --git a/files/ja/web/api/ndefrecord/index.md b/files/ja/web/api/ndefrecord/index.md
index e50e49bcbe61be..68e1dfb8fce54a 100644
--- a/files/ja/web/api/ndefrecord/index.md
+++ b/files/ja/web/api/ndefrecord/index.md
@@ -22,7 +22,8 @@ l10n:
   - : このレコードの {{Glossary("MIME type", "MIME タイプ")}}です。この値は `recordType` が `"mime"` と等しくない場合は `null` になります。
 - {{DOMxRef("NDEFRecord.id")}} {{Experimental_Inline}} {{ReadOnlyInline}}
   - : レコード識別子、レコードを識別するために使用される絶対または相対 URL を返します。
-    > **メモ:** 識別子の一意性は、レコードの生成者によってのみ強制されます。
+    > [!NOTE]
+    > 識別子の一意性は、レコードの生成者によってのみ強制されます。
 - {{DOMxRef("NDEFRecord.data")}} {{Experimental_Inline}} {{ReadOnlyInline}}
   - : このレコードのペイロードの生のバイト列が入った {{jsxref("DataView")}} を返します。
 - {{DOMxRef("NDEFRecord.encoding")}} {{Experimental_Inline}} {{ReadOnlyInline}}
diff --git a/files/ja/web/api/node/appendchild/index.md b/files/ja/web/api/node/appendchild/index.md
index 5f4d01ddf17dfc..40324b0217e00c 100644
--- a/files/ja/web/api/node/appendchild/index.md
+++ b/files/ja/web/api/node/appendchild/index.md
@@ -14,7 +14,8 @@ l10n:
 
 `appendChild()` は、新しく追加されたノードを返します。また、子が {{domxref("DocumentFragment")}} であれば、空になったフラグメントを返します。
 
-> **メモ:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。
+> [!NOTE]
+> このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。
 
 ## 構文
 
diff --git a/files/ja/web/api/node/contains/index.md b/files/ja/web/api/node/contains/index.md
index d6cfc4016f2cca..b99507a8b12489 100644
--- a/files/ja/web/api/node/contains/index.md
+++ b/files/ja/web/api/node/contains/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`contains()`** は {{domxref("Node")}} インターフェイスのメソッドで、あるノードが指定されたノードの子孫であるか、すなわち、このノード自体であるか、直接の子ノード ({{domxref("Node.childNodes", "childNodes")}}) の何れかであるか、直接の子ノードの子ノードの何れかであるか（以下同様）を示す論理値を返します。
 
-> **メモ:** ノードは自分自身に**含まれます**。
+> [!NOTE]
+> ノードは自分自身に**含まれます**。
 
 ## 構文
 
diff --git a/files/ja/web/api/node/firstchild/index.md b/files/ja/web/api/node/firstchild/index.md
index 86001a37632601..8dd054aa653fe5 100644
--- a/files/ja/web/api/node/firstchild/index.md
+++ b/files/ja/web/api/node/firstchild/index.md
@@ -11,7 +11,8 @@ l10n:
 
 このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。
 
-> **メモ:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。
+> [!NOTE]
+> このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。
 > {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。
 > 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。
 
diff --git a/files/ja/web/api/node/isdefaultnamespace/index.md b/files/ja/web/api/node/isdefaultnamespace/index.md
index aceda3c27bbcb1..4751cae05692b3 100644
--- a/files/ja/web/api/node/isdefaultnamespace/index.md
+++ b/files/ja/web/api/node/isdefaultnamespace/index.md
@@ -10,7 +10,8 @@ l10n:
 **`isDefaultNamespace()`** は {{domxref("Node")}} インターフェイスのメソッドで、名前空間 URI を引数として受け取ります。
 その名前空間がこのノードの既定の名前空間である場合は `true` を返し、そうでない場合は `false` を返します。
 
-> **メモ:** 既定の名前空間は、 HTML 要素では常に `""` です。 SVG 要素では、 `xmlns` 属性で設定されます。
+> [!NOTE]
+> 既定の名前空間は、 HTML 要素では常に `""` です。 SVG 要素では、 `xmlns` 属性で設定されます。
 
 ## 構文
 
diff --git a/files/ja/web/api/node/isequalnode/index.md b/files/ja/web/api/node/isequalnode/index.md
index eb209283140090..8488ace9c544a6 100644
--- a/files/ja/web/api/node/isequalnode/index.md
+++ b/files/ja/web/api/node/isequalnode/index.md
@@ -20,7 +20,8 @@ isEqualNode(otherNode)
 
 - `otherNode`
   - : 比較対象となる {{domxref("Node")}} です。
-    > **メモ:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+    > [!NOTE]
+    > この引数は省略可能ではありませんが、 `null` に設定することはできます。
 
 ### 返値
 
diff --git a/files/ja/web/api/node/issamenode/index.md b/files/ja/web/api/node/issamenode/index.md
index 92d6673970ae73..6c1e88e1d5735e 100644
--- a/files/ja/web/api/node/issamenode/index.md
+++ b/files/ja/web/api/node/issamenode/index.md
@@ -22,7 +22,8 @@ isSameNode(otherNode)
 
 - `otherNode`
   - : 検査対象となる {{domxref("Node")}} です。
-    > **メモ:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+    > [!NOTE]
+    > この引数は省略可能ではありませんが、 `null` に設定することはできます。
 
 ### 返値
 
diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md
index d15ea582ab51eb..b9097d641e383d 100644
--- a/files/ja/web/api/node/lastchild/index.md
+++ b/files/ja/web/api/node/lastchild/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`lastChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。子ノードがない場合は `null` を返します。
 
-> **メモ:** このプロパティは、このノードの最後の子ノードである任意の種類のノードを返す。
+> [!NOTE]
+> このプロパティは、このノードの最後の子ノードである任意の種類のノードを返す。
 > {{domxref("Text")}} や {{domxref("Comment")}} ノードである可能性があります。
 > 他の要素の子である最後の {{domxref("Element")}} を取得したい場合は、{{domxref("Element.lastElementChild")}} の使用を検討してください。
 
diff --git a/files/ja/web/api/node/lookupnamespaceuri/index.md b/files/ja/web/api/node/lookupnamespaceuri/index.md
index 21cca65bdff7f6..963c6726e47857 100644
--- a/files/ja/web/api/node/lookupnamespaceuri/index.md
+++ b/files/ja/web/api/node/lookupnamespaceuri/index.md
@@ -19,7 +19,8 @@ lookupNamespaceURI(prefix)
 
 - `prefix`
   - : 検索する接頭辞です。
-    > **メモ:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+    > [!NOTE]
+    > この引数は省略可能ではありませんが、 `null` に設定することはできます。
 
 ### 返値
 
diff --git a/files/ja/web/api/node/lookupprefix/index.md b/files/ja/web/api/node/lookupprefix/index.md
index 6f79d7aa0f96ff..2524739bd47555 100644
--- a/files/ja/web/api/node/lookupprefix/index.md
+++ b/files/ja/web/api/node/lookupprefix/index.md
@@ -20,7 +20,8 @@ lookupPrefix(namespace)
 
 - `namespace`
   - : 接頭辞を検索するための名前空間の入った文字列です。
-    > **メモ:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+    > [!NOTE]
+    > この引数は省略可能ではありませんが、 `null` に設定することはできます。
 
 ### 返値
 
diff --git a/files/ja/web/api/node/nextsibling/index.md b/files/ja/web/api/node/nextsibling/index.md
index 09f2f9d8e64e95..b0ed47b6a22d8d 100644
--- a/files/ja/web/api/node/nextsibling/index.md
+++ b/files/ja/web/api/node/nextsibling/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`nextSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親の {{domxref("Node.childNodes","childNodes")}} の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。
 
-> **メモ:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。
+> [!NOTE]
+> ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。
 > そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や [`Node.previousSibling`](/ja/docs/Web/API/Node/previousSibling) を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
 >
 > [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。
diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md
index c2cbcd6fe793ea..3168e42d8c5cb9 100644
--- a/files/ja/web/api/node/previoussibling/index.md
+++ b/files/ja/web/api/node/previoussibling/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にある ノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。
 
-> **メモ:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。
+> [!NOTE]
+> ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。
 > そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
 >
 > [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。
diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md
index 0abe45e4d441bf..7a8d1ad8098ef8 100644
--- a/files/ja/web/api/node/removechild/index.md
+++ b/files/ja/web/api/node/removechild/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`removeChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。
 
-> **メモ:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。
+> [!NOTE]
+> 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。
 > これは、後のコードで再利用することができます。
 >
 > `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/ja/docs/Web/JavaScript/Memory_management)されます。
diff --git a/files/ja/web/api/node/replacechild/index.md b/files/ja/web/api/node/replacechild/index.md
index 7f12c4274dbf90..d3b29ab55db1ed 100644
--- a/files/ja/web/api/node/replacechild/index.md
+++ b/files/ja/web/api/node/replacechild/index.md
@@ -19,11 +19,13 @@ replaceChild(newChild, oldChild)
 
 - `newChild`
   - : `oldChild` を置き換える新しいノードです。
-    > **警告:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。
+    > [!WARNING]
+    > 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。
 - `oldChild`
   - : 置き換えられる子ノードです。
 
-> **メモ:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。
+> [!NOTE]
+> 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。
 > [`Element.replaceWith()`](/ja/docs/Web/API/Element/replaceWith) は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。
 
 ### 返値
diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md
index d4aec4852c1d03..06ce95b724b9a1 100644
--- a/files/ja/web/api/node/textcontent/index.md
+++ b/files/ja/web/api/node/textcontent/index.md
@@ -17,12 +17,14 @@ l10n:
 
 - ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、`textContent` は [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) を返します。
 
-  > **メモ:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、`document.documentElement.textContent` を使用する方法があります。
+  > [!NOTE]
+  > 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、`document.documentElement.textContent` を使用する方法があります。
 
 - ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、[テキストノード](/ja/docs/Web/API/Text)の場合、`textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
 - 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。）
 
-> **警告:** ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。
+> [!WARNING]
+> ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。
 
 ### innerText との違い
 
diff --git a/files/ja/web/api/notification/actions/index.md b/files/ja/web/api/notification/actions/index.md
index a742f93d610e51..39b0ea07d967f3 100644
--- a/files/ja/web/api/notification/actions/index.md
+++ b/files/ja/web/api/notification/actions/index.md
@@ -11,7 +11,8 @@ l10n:
 
 アクションは、 [`showNotification()`](/ja/docs/Web/API/ServiceWorkerRegistration/showNotification) メソッドと [`Notification()`](/ja/docs/Web/API/Notification/Notification) コンストラクターの第 2 引数の `actions` オプションで設定します。
 
-> **メモ:** ブラウザーは通常、特定の通知のために表示されるアクションの最大数を制限します。静的な {{DOMxRef("Notification.maxActions")}} プロパティをチェックして、制限値を把握してください。
+> [!NOTE]
+> ブラウザーは通常、特定の通知のために表示されるアクションの最大数を制限します。静的な {{DOMxRef("Notification.maxActions")}} プロパティをチェックして、制限値を把握してください。
 
 ## 値
 
diff --git a/files/ja/web/api/notification/close/index.md b/files/ja/web/api/notification/close/index.md
index 33c9e088fddc67..acfd5674652396 100644
--- a/files/ja/web/api/notification/close/index.md
+++ b/files/ja/web/api/notification/close/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `close()` は {{domxref("Notification")}} インターフェイスのメソッドで、表示された通知を閉じたり削除したりするために使用されます。
 
-> **メモ:** この API は、一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。この API の正しい使用方法は、ユーザーに関係がなくなった通知を除去することです（例えば、メッセージアプリなどで、ユーザーが既にウェブページ上の通知を読んだ場合や、音楽アプリですでに次の曲が始まっているため、曲の変更を行うための通知を閉じるなど）。
+> [!NOTE]
+> この API は、一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。この API の正しい使用方法は、ユーザーに関係がなくなった通知を除去することです（例えば、メッセージアプリなどで、ユーザーが既にウェブページ上の通知を読んだ場合や、音楽アプリですでに次の曲が始まっているため、曲の変更を行うための通知を閉じるなど）。
 
 ## 構文
 
diff --git a/files/ja/web/api/notification/dir/index.md b/files/ja/web/api/notification/dir/index.md
index 928a9c715d9ad9..3bfb2d4d6f13f5 100644
--- a/files/ja/web/api/notification/dir/index.md
+++ b/files/ja/web/api/notification/dir/index.md
@@ -20,7 +20,8 @@ l10n:
 - `rtl`
   - : 右書き。
 
-> **メモ:** 多くのブラウザーは明示的な ltr や rtl の設定を無視し、ブラウザー全体の設定どおりに実行するようです。
+> [!NOTE]
+> 多くのブラウザーは明示的な ltr や rtl の設定を無視し、ブラウザー全体の設定どおりに実行するようです。
 
 ## 例
 
diff --git a/files/ja/web/api/notification/index.md b/files/ja/web/api/notification/index.md
index 291b274462ff2a..f8c8f706f6b591 100644
--- a/files/ja/web/api/notification/index.md
+++ b/files/ja/web/api/notification/index.md
@@ -131,7 +131,8 @@ function notifyMe() {
 
 このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの {{htmlelement("iframe")}} から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 [To-do リストの例](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)（また、[ライブで動作するアプリ](https://mdn.github.io/dom-examples/to-do-notifications/)）を参照してください。
 
-> **メモ:** 上記の例では、通知をユーザーの操作（ボタンのクリック）から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っています。
+> [!NOTE]
+> 上記の例では、通知をユーザーの操作（ボタンのクリック）から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っています。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/notification/requestpermission_static/index.md b/files/ja/web/api/notification/requestpermission_static/index.md
index 1ac19a0d900df7..3714103fd5150e 100644
--- a/files/ja/web/api/notification/requestpermission_static/index.md
+++ b/files/ja/web/api/notification/requestpermission_static/index.md
@@ -5,7 +5,8 @@ slug: Web/API/Notification/requestPermission_static
 
 {{APIRef("Web Notifications")}}{{securecontext_header}}
 
-> **メモ:** Safari はまだ、許可を得るのにコールバック構文を使用します。適切に機能を検出してコードを実行する方法の良い例として、[通知 API の使用](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API)をご覧ください。
+> [!NOTE]
+> Safari はまだ、許可を得るのにコールバック構文を使用します。適切に機能を検出してコードを実行する方法の良い例として、[通知 API の使用](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API)をご覧ください。
 
 **`requestPermission()`** は {{domxref("Notification")}} インターフェイスのメソッドで、ユーザーに現在のオリジンが通知を表示することを許可するよう要求します。
 
@@ -70,7 +71,8 @@ function notifyMe() {
 
 このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの {{htmlelement("iframe")}} から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 [To-do リストの例](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)（また、[ライブで動作するアプリ](https://mdn.github.io/dom-examples/to-do-notifications/)）を参照してください。
 
-> **メモ:** 上記の例では、通知をユーザーの操作（ボタンのクリック）から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン 72 からすでにこれを行っており、 Safari もしばらく前からこれを行っています。
+> [!NOTE]
+> 上記の例では、通知をユーザーの操作（ボタンのクリック）から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン 72 からすでにこれを行っており、 Safari もしばらく前からこれを行っています。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/notification/requireinteraction/index.md b/files/ja/web/api/notification/requireinteraction/index.md
index 7022bbc3eceff7..90309ae55a904b 100644
--- a/files/ja/web/api/notification/requireinteraction/index.md
+++ b/files/ja/web/api/notification/requireinteraction/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`requireInteraction`** は {{domxref("Notification")}} インターフェイスの読み取り専用プロパティで、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示す論理値を返します。
 
-> **メモ:** これは最初に、 {{domxref("Notification.Notification()")}} コンストラクターの option オブジェクトの `requireInteraction` が `true` の状態で生成されたときに設定されることがあります。
+> [!NOTE]
+> これは最初に、 {{domxref("Notification.Notification()")}} コンストラクターの option オブジェクトの `requireInteraction` が `true` の状態で生成されたときに設定されることがあります。
 
 ## 値
 
diff --git a/files/ja/web/api/notifications_api/index.md b/files/ja/web/api/notifications_api/index.md
index 833eb60f8fba3a..adcf4a871fdcb6 100644
--- a/files/ja/web/api/notifications_api/index.md
+++ b/files/ja/web/api/notifications_api/index.md
@@ -26,13 +26,15 @@ btn.addEventListener("click", function () {
 
 ここでは、ユーザーはこのオリジンからの通知を許可するかどうかを選択できます。一度決定がなされると、現在のセッションの間はその設定が保存されます。
 
-> **メモ:** Firefox 44 からは、通知と[プッシュ通知](/ja/docs/Web/API/Push_API)の許可が統合されました。通知に許可が与えられれば、プッシュ通知も同時に有効になります。
+> [!NOTE]
+> Firefox 44 からは、通知と[プッシュ通知](/ja/docs/Web/API/Push_API)の許可が統合されました。通知に許可が与えられれば、プッシュ通知も同時に有効になります。
 
 つぎに、新しい通知は {{domxref("Notification.Notification","Notification()")}} コンストラクターを使って作られます。このコンストラクターには、必須の title 引数と、オプションを指定する引数として options オブジェクトを与えることができます。オプションには、テキストの方向、本文テキスト、表示アイコン、通知サウンドなどが指定可能です。
 
 さらに、通知 API の仕様には、いくつかの[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) が定義されており、サービスワーカーが通知を発行できるようになっています。
 
-> **メモ:** 自分のアプリでの通知の詳しい使い方については、[通知 API の使用](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API)を参照してください。
+> [!NOTE]
+> 自分のアプリでの通知の詳しい使い方については、[通知 API の使用](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API)を参照してください。
 
 ## 通知インターフェイス
 
diff --git a/files/ja/web/api/notifications_api/using_the_notifications_api/index.md b/files/ja/web/api/notifications_api/using_the_notifications_api/index.md
index 6f6e9bac583525..08a18a0b0b49b2 100644
--- a/files/ja/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/ja/web/api/notifications_api/using_the_notifications_api/index.md
@@ -102,7 +102,8 @@ function askNotificationPermission() {
 
 コードの重複を避けるために、このスニペットの最初のメインブロックである `handlePermission()` 関数の中に、多少のハウスキーピングコードを格納しています。この内部では、 `Notification.permission` の値を明示的に設定し (古いバージョンの Chrome では自動的に設定できないものがありました)、ユーザーが許可ダイアログで選択した内容に応じてボタンを表示・非表示にしています。すでに許可されている場合は表示したくありませんが、ユーザーが許可を拒否することを選択した場合は、後で変更できるようにしたいと考えています。
 
-> **メモ:** バージョン 37 より前の Chrome では、 {{domxref("Notification.requestPermission()")}} を `load` イベントのハンドラー内で呼び出すことを許可していませんでした ([issue 274284](https://bugs.chromium.org/p/chromium/issues/detail?id=274284) をご覧ください)。
+> [!NOTE]
+> バージョン 37 より前の Chrome では、 {{domxref("Notification.requestPermission()")}} を `load` イベントのハンドラー内で呼び出すことを許可していませんでした ([issue 274284](https://bugs.chromium.org/p/chromium/issues/detail?id=274284) をご覧ください)。
 
 ### requestPermission() プロミスの機能検出
 
@@ -148,9 +149,11 @@ document.addEventListener("visibilitychange", function () {
 });
 ```
 
-> **メモ:** この API は、 (現代のブラウザーで) 一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。
+> [!NOTE]
+> この API は、 (現代のブラウザーで) 一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。
 
-> **メモ:** "close" イベントを受け取ったとき、それが通知を閉じたユーザーであるという保証はありません。これは仕様書に準拠しており、以下のように記載されています。「通知が基礎となる通知プラットフォームによって、またはユーザーによって閉じられるとき、その通知のための閉じるステップを実行しなければなりません。」
+> [!NOTE]
+> "close" イベントを受け取ったとき、それが通知を閉じたユーザーであるという保証はありません。これは仕様書に準拠しており、以下のように記載されています。「通知が基礎となる通知プラットフォームによって、またはユーザーによって閉じられるとき、その通知のための閉じるステップを実行しなければなりません。」
 
 ## Notification イベント
 
diff --git a/files/ja/web/api/offlineaudiocompletionevent/index.md b/files/ja/web/api/offlineaudiocompletionevent/index.md
index cbc787b837a2ca..8881be364c343d 100644
--- a/files/ja/web/api/offlineaudiocompletionevent/index.md
+++ b/files/ja/web/api/offlineaudiocompletionevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 [ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) の `OfflineAudioCompletionEvent` このインターフェイスは、 {{domxref("OfflineAudioContext")}} の処理が終了した際に発生するイベントを表します。 {{domxref("OfflineAudioContext/complete_event", "complete")}} イベントがこのインターフェイスで使用されます。
 
-> **メモ:** このインターフェイスは非推奨とされています。過去の経緯からまだ対応していますが、ブラウザーがプロミス版の {{domxref("OfflineAudioContext.startRendering")}} に対応してくると、このインターフェイスはまもなく廃止され、必要なくなる予定です。
+> [!NOTE]
+> このインターフェイスは非推奨とされています。過去の経緯からまだ対応していますが、ブラウザーがプロミス版の {{domxref("OfflineAudioContext.startRendering")}} に対応してくると、このインターフェイスはまもなく廃止され、必要なくなる予定です。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/offlineaudiocompletionevent/offlineaudiocompletionevent/index.md b/files/ja/web/api/offlineaudiocompletionevent/offlineaudiocompletionevent/index.md
index b7aa142ae448c4..69337906ed6a6c 100644
--- a/files/ja/web/api/offlineaudiocompletionevent/offlineaudiocompletionevent/index.md
+++ b/files/ja/web/api/offlineaudiocompletionevent/offlineaudiocompletionevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`OfflineAudioCompletionEvent()`** は[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) のコンストラクターで、新しい {{domxref("OfflineAudioCompletionEvent")}} オブジェクトを生成します。
 
-> **メモ:** 一般的にコンストラクターを手動で使用することはないでしょう。
+> [!NOTE]
+> 一般的にコンストラクターを手動で使用することはないでしょう。
 > `OfflineAudioCompletionEvent` イベントは、古い理由のため {{domxref("OfflineAudioContext")}} インスタンスに配信されます。
 
 ## 構文
diff --git a/files/ja/web/api/offlineaudiocontext/index.md b/files/ja/web/api/offlineaudiocontext/index.md
index 000819394227e8..88246e82422b8f 100644
--- a/files/ja/web/api/offlineaudiocontext/index.md
+++ b/files/ja/web/api/offlineaudiocontext/index.md
@@ -54,7 +54,8 @@ _親インターフェイスである {{domxref("BaseAudioContext")}} からの
 
 この時点で、別の音声コンテキストを作成し、その中に {{domxref("AudioBufferSourceNode")}} を作成し、そのバッファーをプロミス `AudioBuffer` と等しくなるように設定します。これは単純な標準音声グラフの一部として再生されます。
 
-> **メモ:** 動作する例については、 [offline-audio-context-promise](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/) の GitHub リポジトリーを参照してください（[ソースコード](https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise)も参照してください）。
+> [!NOTE]
+> 動作する例については、 [offline-audio-context-promise](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/) の GitHub リポジトリーを参照してください（[ソースコード](https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise)も参照してください）。
 
 ```js
 // オンラインとオフラインのオーディオコンテキストを定義
diff --git a/files/ja/web/api/offlineaudiocontext/startrendering/index.md b/files/ja/web/api/offlineaudiocontext/startrendering/index.md
index 6bdbce4bf9eb66..661766374008cb 100644
--- a/files/ja/web/api/offlineaudiocontext/startrendering/index.md
+++ b/files/ja/web/api/offlineaudiocontext/startrendering/index.md
@@ -35,7 +35,8 @@ startRendering()
 
 この時点で、別の音声コンテキストを作成し、その中に {{domxref("AudioBufferSourceNode")}} を作成し、そのバッファーをプロミス `AudioBuffer` と等しくなるように設定します。これは単純な標準音声グラフの一部として再生されます。
 
-> **メモ:** 動作する例については、 [offline-audio-context-promise](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/) を GitHub リポジトリーで参照してください（[ソースコード](https://github.com/mdn/webaudio-examples)も参照）。
+> [!NOTE]
+> 動作する例については、 [offline-audio-context-promise](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/) を GitHub リポジトリーで参照してください（[ソースコード](https://github.com/mdn/webaudio-examples)も参照）。
 
 ```js
 // define online and offline audio context
diff --git a/files/ja/web/api/oscillatornode/detune/index.md b/files/ja/web/api/oscillatornode/detune/index.md
index 756e14e1da828f..8d4dfc23f1178f 100644
--- a/files/ja/web/api/oscillatornode/detune/index.md
+++ b/files/ja/web/api/oscillatornode/detune/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `detune` は {{ domxref("OscillatorNode") }} インターフェイスのプロパティで、 [a-rate](/ja/docs/Web/API/AudioParam#a-rate) の {{domxref("AudioParam")}} であり、発振器の離調を[セント](<https://ja.wikipedia.org/wiki/セント_(音楽)>)で表します。
 
-> **メモ:** 返される `AudioParam` は読み取り専用ですが、それが表す値は読み取り専用ではありません。
+> [!NOTE]
+> 返される `AudioParam` は読み取り専用ですが、それが表す値は読み取り専用ではありません。
 
 ## 値
 
diff --git a/files/ja/web/api/oscillatornode/frequency/index.md b/files/ja/web/api/oscillatornode/frequency/index.md
index 6ff9ebe92483b8..6b3dbd2e1c7a30 100644
--- a/files/ja/web/api/oscillatornode/frequency/index.md
+++ b/files/ja/web/api/oscillatornode/frequency/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`frequency`** は {{ domxref("OscillatorNode") }} インターフェイスのプロパティで、 [a-rate](/ja/docs/Web/API/AudioParam#a-rate) の {{domxref("AudioParam")}} であり、これは発振器の周波数をヘルツ単位で表します。
 
-> **メモ:** 返される `AudioParam` は読み取り専用ですが、それが表す値は読み取り専用ではありません。
+> [!NOTE]
+> 返される `AudioParam` は読み取り専用ですが、それが表す値は読み取り専用ではありません。
 
 ## 値
 
diff --git a/files/ja/web/api/pannernode/index.md b/files/ja/web/api/pannernode/index.md
index f18cf0ec0f61b7..464aca9e5faf0a 100644
--- a/files/ja/web/api/pannernode/index.md
+++ b/files/ja/web/api/pannernode/index.md
@@ -49,7 +49,8 @@ l10n:
 
 _親である {{domxref("AudioNode")}} からプロパティを継承しています。_
 
-> **メモ:** 向きと位置の設定と取得は異なる方法で行います。これは、これらの値が {{domxref("AudioParam")}} として保存されてるためです。値の取得は `PannerNode.positionX` のように行えますが、同じ属性に対して値を設定するには `PannerNode.positionX.value` のように行います。そのため、これらの値は、WebIDL にあるように、読み取り専用とは定義されていません。
+> [!NOTE]
+> 向きと位置の設定と取得は異なる方法で行います。これは、これらの値が {{domxref("AudioParam")}} として保存されてるためです。値の取得は `PannerNode.positionX` のように行えますが、同じ属性に対して値を設定するには `PannerNode.positionX.value` のように行います。そのため、これらの値は、WebIDL にあるように、読み取り専用とは定義されていません。
 
 - {{domxref("PannerNode.coneInnerAngle")}}
   - : 倍精度実数値で、円錐の角度を度単位で記述し、その内側では容量が減少しません。
diff --git a/files/ja/web/api/pannernode/setorientation/index.md b/files/ja/web/api/pannernode/setorientation/index.md
index d0d623c5ec9990..9df115e495353f 100644
--- a/files/ja/web/api/pannernode/setorientation/index.md
+++ b/files/ja/web/api/pannernode/setorientation/index.md
@@ -8,7 +8,8 @@ l10n:
 
 {{APIRef("Web Audio API")}}{{Deprecated_Header}}
 
-> **メモ:** この非推奨メソッドを置き換えるために推奨される方法は、 [`orientationX`](/ja/docs/Web/API/PannerNode/orientationX), [`orientationY`](/ja/docs/Web/API/PannerNode/orientationY), [`orientationZ`](/ja/docs/Web/API/PannerNode/orientationZ) 属性を直接設定することです。
+> [!NOTE]
+> この非推奨メソッドを置き換えるために推奨される方法は、 [`orientationX`](/ja/docs/Web/API/PannerNode/orientationX), [`orientationY`](/ja/docs/Web/API/PannerNode/orientationY), [`orientationZ`](/ja/docs/Web/API/PannerNode/orientationZ) 属性を直接設定することです。
 
 `setOrientation()` は {{ domxref("PannerNode") }} インターフェイスのメソッドで、音声ソースの再生方向を定義します。
 
diff --git a/files/ja/web/api/pannernode/setposition/index.md b/files/ja/web/api/pannernode/setposition/index.md
index 3bf22ffdc5d277..cc87978a49849f 100644
--- a/files/ja/web/api/pannernode/setposition/index.md
+++ b/files/ja/web/api/pannernode/setposition/index.md
@@ -8,7 +8,8 @@ l10n:
 
 {{APIRef("Web Audio API")}}{{Deprecated_Header}}
 
-> **メモ:** この非推奨メソッドを置き換えるために推奨される方法は、 [`positionX`](/ja/docs/Web/API/PannerNode/positionX), [`positionY`](/ja/docs/Web/API/PannerNode/positionY), [`positionZ`](/ja/docs/Web/API/PannerNode/positionZ) 属性を直接設定することです。
+> [!NOTE]
+> この非推奨メソッドを置き換えるために推奨される方法は、 [`positionX`](/ja/docs/Web/API/PannerNode/positionX), [`positionY`](/ja/docs/Web/API/PannerNode/positionY), [`positionZ`](/ja/docs/Web/API/PannerNode/positionZ) 属性を直接設定することです。
 
 `setPosition()` は {{ domxref("PannerNode") }} インターフェイスのメソッドで、リスナー（{{domxref("BaseAudioContext.listener")}} 属性に格納されている {{domxref("AudioListener")}} オブジェクトで表されます）に対する音源の相対位置を定義します。 3 つの引数 `x`, `y`, `z` は単位がなく、正しい直交座標系を使用して 3D 空間における音源の位置を記述します。
 
diff --git a/files/ja/web/api/payment_request_api/index.md b/files/ja/web/api/payment_request_api/index.md
index 7009bbe4d5a346..599733943a7311 100644
--- a/files/ja/web/api/payment_request_api/index.md
+++ b/files/ja/web/api/payment_request_api/index.md
@@ -17,7 +17,8 @@ l10n:
 
 完全なガイドは、[決済リクエスト API の使用](/ja/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)を参照してください。
 
-> **メモ:** オリジンを跨いだ {{htmlelement("iframe")}} 要素内では、[`allowpaymentrequest`](/ja/docs/Web/HTML/Element/iframe#allowpaymentrequest) 属性が設定されている場合のみ、 API が利用可能です。
+> [!NOTE]
+> オリジンを跨いだ {{htmlelement("iframe")}} 要素内では、[`allowpaymentrequest`](/ja/docs/Web/HTML/Element/iframe#allowpaymentrequest) 属性が設定されている場合のみ、 API が利用可能です。
 
 ## インターフェイス
 
diff --git a/files/ja/web/api/payment_request_api/using_the_payment_request_api/index.md b/files/ja/web/api/payment_request_api/using_the_payment_request_api/index.md
index d565abd78d7b8b..4b2b2205301bcb 100644
--- a/files/ja/web/api/payment_request_api/using_the_payment_request_api/index.md
+++ b/files/ja/web/api/payment_request_api/using_the_payment_request_api/index.md
@@ -13,7 +13,8 @@ l10n:
 
 この節では、決済リクエスト API を使用して決済を行うための基本的な方法を詳しく説明します。
 
-> **メモ:** この節のコードスニペットは、[Feature detect support デモ](https://github.com/mdn/dom-examples/blob/main/payment-request/feature-detect-support.html)から引用しています。
+> [!NOTE]
+> この節のコードスニペットは、[Feature detect support デモ](https://github.com/mdn/dom-examples/blob/main/payment-request/feature-detect-support.html)から引用しています。
 
 ### 新しい決済リクエストオブジェクトの作成
 
@@ -142,7 +143,8 @@ if (window.PaymentRequest) {
 }
 ```
 
-> **メモ:** コードの全体は、[Feature detect support デモ](https://mdn.github.io/dom-examples/payment-request/feature-detect-support.html)を参照してください。
+> [!NOTE]
+> コードの全体は、[Feature detect support デモ](https://mdn.github.io/dom-examples/payment-request/feature-detect-support.html)を参照してください。
 
 ## ユーザーが決済できるかを調べる
 
@@ -178,7 +180,8 @@ if (window.PaymentRequest) {
 }
 ```
 
-> **メモ:** コードの全体は、[Customizing the payment button デモ](https://mdn.github.io/dom-examples/payment-request/customize-button-can-make-payment.html)を参照してください。
+> [!NOTE]
+> コードの全体は、[Customizing the payment button デモ](https://mdn.github.io/dom-examples/payment-request/customize-button-can-make-payment.html)を参照してください。
 
 ### 価格がすべて判明する前に調べる
 
@@ -241,7 +244,8 @@ function onServerCheckoutDetailsRetrieved(checkoutObject) {
 }
 ```
 
-> **メモ:** コードの全体は、[Checking user can make payments before prices are known デモ](https://mdn.github.io/dom-examples/payment-request/check-user-can-make-payment.html)を参照してください。
+> [!NOTE]
+> コードの全体は、[Checking user can make payments before prices are known デモ](https://mdn.github.io/dom-examples/payment-request/check-user-can-make-payment.html)を参照してください。
 
 ## ユーザーがアプリを持っていない場合に、決済アプリを推薦する
 
@@ -277,7 +281,8 @@ checkoutButton.addEventListener("click", () => {
 });
 ```
 
-> **メモ:** コードの全体は、[Recommending a payment app when user has no apps デモ](https://mdn.github.io/dom-examples/payment-request/recommend-payment-app.html)を参照してください。
+> [!NOTE]
+> コードの全体は、[Recommending a payment app when user has no apps デモ](https://mdn.github.io/dom-examples/payment-request/recommend-payment-app.html)を参照してください。
 
 ## 決済成功後の追加ユーザーインターフェイスの表示
 
@@ -300,7 +305,8 @@ request
   });
 ```
 
-> **メモ:** コードの全体は、[Show additional user interface after successful payment デモ](https://mdn.github.io/dom-examples/payment-request/show-additional-ui-after-payment.html)を参照してください。
+> [!NOTE]
+> コードの全体は、[Show additional user interface after successful payment デモ](https://mdn.github.io/dom-examples/payment-request/show-additional-ui-after-payment.html)を参照してください。
 
 ## トランザクションの事前承認
 
@@ -342,7 +348,8 @@ self.addEventListener("canmakepayment", (evt) => {
 
 この決済ハンドラーは、`https://example.com/preauth` のスコープでサービスワーカーの中に常駐させる必要があります。
 
-> **メモ:** コードの全体は、[Pre-authorizing transactions デモ](https://mdn.github.io/dom-examples/payment-request/pre-authorize-transaction.html)を参照してください。
+> [!NOTE]
+> コードの全体は、[Pre-authorizing transactions デモ](https://mdn.github.io/dom-examples/payment-request/pre-authorize-transaction.html)を参照してください。
 
 ## 関連情報
 
diff --git a/files/ja/web/api/paymentaddress/index.md b/files/ja/web/api/paymentaddress/index.md
index d27a4a9ff2ddad..2defec4964a265 100644
--- a/files/ja/web/api/paymentaddress/index.md
+++ b/files/ja/web/api/paymentaddress/index.md
@@ -34,7 +34,8 @@ l10n:
 - {{domxref('PaymentAddress.sortingCode')}} {{readonlyinline}} {{deprecated_inline}}
   - : 文字列で、フランスで使用されているような郵便ソートコードを提供します。
 
-> **メモ:** 値が指定されていないプロパティには、空の文字列が含まれています。
+> [!NOTE]
+> 値が指定されていないプロパティには、空の文字列が含まれています。
 
 ## メソッド
 
diff --git a/files/ja/web/api/paymentrequest/canmakepayment/index.md b/files/ja/web/api/paymentrequest/canmakepayment/index.md
index 2c0de69291b929..ca11729917628b 100644
--- a/files/ja/web/api/paymentrequest/canmakepayment/index.md
+++ b/files/ja/web/api/paymentrequest/canmakepayment/index.md
@@ -27,7 +27,8 @@ canMakePayment()
 
 {{domxref('PaymentRequest.PaymentRequest()','PaymentRequest')}} コンストラクターを使用してリクエストをインスタンス化する際に、ユーザーエージェントが提供した決済手段のいずれかに対応していれば `true` に解決する {{jsxref("Promise")}} を論理値に変換します．決済を処理できない場合、プロミスは `false` の値を受け取ります。
 
-> **メモ:** これを何度も呼び出すと、ブラウザーは返されるプロミスを `DOMException` で拒否するかもしれません。
+> [!NOTE]
+> これを何度も呼び出すと、ブラウザーは返されるプロミスを `DOMException` で拒否するかもしれません。
 
 ## 例
 
diff --git a/files/ja/web/api/paymentrequest/show/index.md b/files/ja/web/api/paymentrequest/show/index.md
index 93dae6a70def77..0832bc59bb1cc1 100644
--- a/files/ja/web/api/paymentrequest/show/index.md
+++ b/files/ja/web/api/paymentrequest/show/index.md
@@ -11,7 +11,8 @@ l10n:
 
 すべての文書において、一度に処理することができる決済リクエストは 1 つだけです。一度 `PaymentRequest` の `show()` メソッドが呼び出されると、他の `show()` の呼び出しに対しては、返すプロミスが決済リクエストの結果を示す {{domxref("PaymentResponse") }} で履行されるか、エラーで拒否されるまで `AbortError` によって拒否されるようになります。
 
-> **メモ:** 現実には、詳細仕様ではできないことになっているにもかかわらず、Firefox を含むいくつかのブラウザーでは、一度に複数のアクティブな決済リクエストに対応しています。
+> [!NOTE]
+> 現実には、詳細仕様ではできないことになっているにもかかわらず、Firefox を含むいくつかのブラウザーでは、一度に複数のアクティブな決済リクエストに対応しています。
 
 アーキテクチャが `show()` を呼び出して決済インターフェイスをインスタンス化した時点で、必ずしもすべてのデータが準備できているとは限らない場合、`detailsPromise` 引数を指定して、データが準備できた時点で履行される {{jsxref("Promise")}} を提供します。これを指定された場合、`show()`はプロミスが履行されるまでユーザーが決済インターフェイスと対話することを許可しないので、ユーザーが決済プロセスに関与する前にデータを更新することができます。
 
diff --git a/files/ja/web/api/performance/getentries/index.md b/files/ja/web/api/performance/getentries/index.md
index f69238cb6ba4fd..019437d5104ce0 100644
--- a/files/ja/web/api/performance/getentries/index.md
+++ b/files/ja/web/api/performance/getentries/index.md
@@ -12,7 +12,8 @@ l10n:
 
 特定の型や特定の名前を持つパフォーマンス項目だけに関心がある場合は、 {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} や {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} を参照してください。
 
-> **メモ:** このメソッドは新しいパフォーマンス項目を通知しません。このメソッドを呼び出した時点でパフォーマンスタイムラインに存在している項目のみを取得します。
+> [!NOTE]
+> このメソッドは新しいパフォーマンス項目を通知しません。このメソッドを呼び出した時点でパフォーマンスタイムラインに存在している項目のみを取得します。
 > 利用できるようになった項目の通知を受け取るには、 {{domxref("PerformanceObserver")}} を使用してください。
 
 以下の項目型はこのメソッドではまったく対応しておらず、これらの型の項目が存在したとしても返されません。
diff --git a/files/ja/web/api/performance/getentriesbyname/index.md b/files/ja/web/api/performance/getentriesbyname/index.md
index ab94f4ce2bbaf1..94388f853b9f02 100644
--- a/files/ja/web/api/performance/getentriesbyname/index.md
+++ b/files/ja/web/api/performance/getentriesbyname/index.md
@@ -12,7 +12,8 @@ l10n:
 
 特定の型のパフォーマンス項目だけに関心がある場合は、 {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} を参照してください。すべてのパフォーマンス項目の場合は、 {{domxref("Performance.getEntries", "getEntries()")}} を参照してください。
 
-> **メモ:** このメソッドは新しいパフォーマンス項目を通知しません。このメソッドを呼び出した時点でパフォーマンスタイムラインに存在している項目のみを取得します。
+> [!NOTE]
+> このメソッドは新しいパフォーマンス項目を通知しません。このメソッドを呼び出した時点でパフォーマンスタイムラインに存在している項目のみを取得します。
 > 利用できるようになった項目の通知を受け取るには、 {{domxref("PerformanceObserver")}} を使用してください。
 
 以下の項目型はこのメソッドではまったく対応しておらず、これらの型の項目が存在したとしても返されません。
diff --git a/files/ja/web/api/performance/getentriesbytype/index.md b/files/ja/web/api/performance/getentriesbytype/index.md
index 89fd6e91fd07a6..30c4af89b57058 100644
--- a/files/ja/web/api/performance/getentriesbytype/index.md
+++ b/files/ja/web/api/performance/getentriesbytype/index.md
@@ -12,7 +12,8 @@ l10n:
 
 特定の名前のパフォーマンス項目に関心がある場合は、 {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} を参照してください。すべてのパフォーマンス項目の場合は、 {{domxref("Performance.getEntries", "getEntries()")}} を参照してください。
 
-> **メモ:** このメソッドは新しいパフォーマンス項目を通知しません。このメソッドを呼び出した時点でパフォーマンスタイムラインに存在している項目のみを取得します。
+> [!NOTE]
+> このメソッドは新しいパフォーマンス項目を通知しません。このメソッドを呼び出した時点でパフォーマンスタイムラインに存在している項目のみを取得します。
 > 利用できるようになった項目の通知を受け取るには、 {{domxref("PerformanceObserver")}} を使用してください。
 
 以下の項目型はこのメソッドではまったく対応しておらず、これらの型の項目が存在したとしても返されません。
diff --git a/files/ja/web/api/performance/navigation/index.md b/files/ja/web/api/performance/navigation/index.md
index 2bac47320fd7d8..6e6c338ebb3129 100644
--- a/files/ja/web/api/performance/navigation/index.md
+++ b/files/ja/web/api/performance/navigation/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このプロパティはワーカーでは利用できません。
 
-> **警告:** このプロパティは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} を使用してください。
+> [!WARNING]
+> このプロパティは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/performance/now/index.md b/files/ja/web/api/performance/now/index.md
index 18b9de2d28b57a..f684c9c4e9d7c0 100644
--- a/files/ja/web/api/performance/now/index.md
+++ b/files/ja/web/api/performance/now/index.md
@@ -79,8 +79,8 @@ console.log(`Call to doSomething took ${t1 - t0} milliseconds.`);
 
 タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)から保護するために、 `performance.now()` はサイトの分離状態に基づいて粗くなります。
 
-- 独立したコンテキストでの解像度: 5 ミリ秒
-- 独立していないコンテキストでの解像度: 100 ミリ秒
+- 独立したコンテキストでの解像度: 5 マイクロ秒
+- 独立していないコンテキストでの解像度: 100 マイクロ秒
 
 {{HTTPHeader("Cross-Origin-Opener-Policy")}} と {{HTTPHeader("Cross-Origin-Embedder-Policy")}} ヘッダーを使用して、サイトをオリジン間分離します。
 
diff --git a/files/ja/web/api/performance/timing/index.md b/files/ja/web/api/performance/timing/index.md
index ae730487e0f8f7..b46807eac11e42 100644
--- a/files/ja/web/api/performance/timing/index.md
+++ b/files/ja/web/api/performance/timing/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このプロパティはワーカーでは使用できません。
 
-> **警告:** このプロパティは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} を使用してください。
+> [!WARNING]
+> このプロパティは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/performance/tojson/index.md b/files/ja/web/api/performance/tojson/index.md
index 5a9c3c7f9bb518..18b2122d421f7f 100644
--- a/files/ja/web/api/performance/tojson/index.md
+++ b/files/ja/web/api/performance/tojson/index.md
@@ -26,7 +26,8 @@ toJSON()
 
 返された JSON には {{domxref("Performance.eventCounts", "eventCounts")}} プロパティが格納されていません。これは、{{domxref("EventCounts")}} 型であり、`toJSON()` 操作を提供していないからです。
 
-> **メモ:** JSON オブジェクトには、非推奨の {{domxref("performance.timing")}} および {{domxref("performance.navigation")}} プロパティのシリアライズが格納されています。新しい {{domxref("PerformanceNavigationTiming")}} インターフェイスの JSON 表現を取得するには、代わりに {{domxref("PerformanceNavigationTiming.toJSON()")}} を呼び出してください。
+> [!NOTE]
+> JSON オブジェクトには、非推奨の {{domxref("performance.timing")}} および {{domxref("performance.navigation")}} プロパティのシリアライズが格納されています。新しい {{domxref("PerformanceNavigationTiming")}} インターフェイスの JSON 表現を取得するには、代わりに {{domxref("PerformanceNavigationTiming.toJSON()")}} を呼び出してください。
 
 ## 例
 
diff --git a/files/ja/web/api/performance_api/resource_timing/index.md b/files/ja/web/api/performance_api/resource_timing/index.md
index 5da271fa60ee21..8012a60ad1ee1e 100644
--- a/files/ja/web/api/performance_api/resource_timing/index.md
+++ b/files/ja/web/api/performance_api/resource_timing/index.md
@@ -11,7 +11,8 @@ slug: Web/API/Performance_API/Resource_timing
 
 このドキュメントでは、`Resource Timing` インターフェイスの概要を説明します。例を含むインターフェイスの詳細については、各インターフェイスのリファレンスページ、[リソースタイミング API の使用](/ja/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API)、および [あわせて参照](#あわせて参照) セクションの参照を参照してください。リソースタイミング処理モデルのグラフィック表示については、[リソースタイミングフェーズ](https://w3c.github.io/resource-timing/#process)の図を参照してください。
 
-> **メモ:** The `PerformanceResourceTiming` interface extends the {{domxref("PerformanceEntry")}} for {{domxref("PerformanceEntry","performance entries", "", 1)}} which have an {{domxref("PerformanceEntry.entryType","entryType")}} of "`resource`".
+> [!NOTE]
+> The `PerformanceResourceTiming` interface extends the {{domxref("PerformanceEntry")}} for {{domxref("PerformanceEntry","performance entries", "", 1)}} which have an {{domxref("PerformanceEntry.entryType","entryType")}} of "`resource`".
 
 ## High-resolution タイムスタンプ
 
@@ -23,7 +24,8 @@ The unit of `DOMHighResTimeStamp` is milliseconds and should be accurate to 5 µ
 
 An application can get timestamps for the various stages used to load a resource. The first property in the processing model is {{domxref("PerformanceEntry.startTime","startTime")}} which returns the timestamp immediately before the resource loading process begins. The {{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} timestamps follows and redirect processing (if applicable) and preceeds DNS lookup. The next stages are {{domxref('PerformanceResourceTiming.connectStart','connectStart')}} and {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} which are the timestamps immediately before and after connecting to the server, respectively. The last three timestamps are, in order: {{domxref('PerformanceResourceTiming.requestStart','requestStart')}} - the timestamp before the browser starts requesting the resource from the server; {{domxref('PerformanceResourceTiming.responseStart','responseStart')}} - the timestamp after the browser receives the first byte of the response from the server; and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}} - the timestamp after the browser receives the last byte of the resource. If the resource is loaded via a secure connection a {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} timestamp will be available between the connection start and end events.
 
-> **メモ:** When {{Glossary("CORS")}} is in effect, many of these values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the `Timing-Allow-Origin` HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.
+> [!NOTE]
+> When {{Glossary("CORS")}} is in effect, many of these values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the `Timing-Allow-Origin` HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.
 >
 > The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: `redirectStart`, `redirectEnd`, `domainLookupStart`, `domainLookupEnd`, `connectStart`, `connectEnd`, `secureConnectionStart`, `requestStart`, and `responseStart`.
 
diff --git a/files/ja/web/api/performancenavigation/index.md b/files/ja/web/api/performancenavigation/index.md
index 9834afb5b41146..98b144f82d6f3a 100644
--- a/files/ja/web/api/performancenavigation/index.md
+++ b/files/ja/web/api/performancenavigation/index.md
@@ -9,7 +9,8 @@ l10n:
 
 古い **`PerformanceNavigation`** インターフェイスは、現在のドキュメントへのナビゲーションがどのように行われたかに関する情報を表します。
 
-> **警告:** このインターフェイスは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。
+> [!WARNING]
+> このインターフェイスは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。
 > 代わりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
 
 この型のオブジェクトは、{{domxref("Performance.navigation")}} 読み取り専用属性を呼び出すことによって取得できます。
diff --git a/files/ja/web/api/performancenavigation/redirectcount/index.md b/files/ja/web/api/performancenavigation/redirectcount/index.md
index 53b6e1855c4342..c8d8e401db532e 100644
--- a/files/ja/web/api/performancenavigation/redirectcount/index.md
+++ b/files/ja/web/api/performancenavigation/redirectcount/index.md
@@ -9,7 +9,8 @@ l10n:
 
 古い **`PerformanceNavigation.redirectCount`** プロパティは読み取り専用で、ページに到達する前に行われたリダイレクトの数を表す `unsigned short` を返します。
 
-> **警告:** このインターフェイスは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。
+> [!WARNING]
+> このインターフェイスは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。
 > 代わりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
 
 ## 値
diff --git a/files/ja/web/api/performancenavigation/type/index.md b/files/ja/web/api/performancenavigation/type/index.md
index 95c3b5e28349ce..bc7d2d6617662c 100644
--- a/files/ja/web/api/performancenavigation/type/index.md
+++ b/files/ja/web/api/performancenavigation/type/index.md
@@ -9,7 +9,8 @@ l10n:
 
 古い **`PerformanceNavigation.type`** プロパティは読み取り専用で、このページへの移動方法を表す定数を含む `unsigned short` を返します。
 
-> **警告:** このインターフェイスは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
+> [!WARNING]
+> このインターフェイスは [Navigation Timing Level 2 仕様書](https://w3c.github.io/navigation-timing/#obsolete)では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/performanceobserverentrylist/index.md b/files/ja/web/api/performanceobserverentrylist/index.md
index 5cc4d741b4d95c..cf22f8ab11d75d 100644
--- a/files/ja/web/api/performanceobserverentrylist/index.md
+++ b/files/ja/web/api/performanceobserverentrylist/index.md
@@ -7,7 +7,8 @@ slug: Web/API/PerformanceObserverEntryList
 
 **`PerformanceObserverEntryList`** インターフェイスは、{{domxref("PerformanceObserver.observe","observe()")}} メソッドを介して明示的に*監視された* {{domxref("PerformanceEntry","パフォーマンスイベント", '', 'true')}} のリストです。
 
-> **メモ:** このインターフェイスは {{domxref("Window")}} と {{domxref("Worker")}} に公開されています。
+> [!NOTE]
+> このインターフェイスは {{domxref("Window")}} と {{domxref("Worker")}} に公開されています。
 
 ## メソッド
 
diff --git a/files/ja/web/api/performanceresourcetiming/initiatortype/index.md b/files/ja/web/api/performanceresourcetiming/initiatortype/index.md
index b97ede5f5797d4..63fca7e4bca5ac 100644
--- a/files/ja/web/api/performanceresourcetiming/initiatortype/index.md
+++ b/files/ja/web/api/performanceresourcetiming/initiatortype/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`initiatorType`** は読み取り専用プロパティで、リソースの読み込みを開始したウェブプラットフォームの機能を表す文字列です。
 
-> **メモ:** このプロパティは、読み込まれるコンテンツの種類を表すものではありません。`.css` ファイルは {{HTMLElement("link")}} 要素を使用して読み込むことができ、 `initiatorType` が `link` となります。CSS ファイルで `background: url()` を使用して画像を読み込んだ場合、 `initiatorType` は `img` ではなく `css` になります。
+> [!NOTE]
+> このプロパティは、読み込まれるコンテンツの種類を表すものではありません。`.css` ファイルは {{HTMLElement("link")}} 要素を使用して読み込むことができ、 `initiatorType` が `link` となります。CSS ファイルで `background: url()` を使用して画像を読み込んだ場合、 `initiatorType` は `img` ではなく `css` になります。
 
 ## 値
 
diff --git a/files/ja/web/api/performancetiming/fetchstart/index.md b/files/ja/web/api/performancetiming/fetchstart/index.md
index d26bccc4ee273a..ea40a3d40ac690 100644
--- a/files/ja/web/api/performancetiming/fetchstart/index.md
+++ b/files/ja/web/api/performancetiming/fetchstart/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{APIRef("Performance API")}}{{Deprecated_Header}}
 
-> **警告:** このプロパティのこのインターフェイスは [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete) で非推奨になりました。かわりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
+> [!WARNING]
+> このプロパティのこのインターフェイスは [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete) で非推奨になりました。かわりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
 
 レガシーな読み取り専用プロパティ **`PerformanceTiming.fetchStart`** は、ブラウザーが HTTP 要求により文書を読み込む準備ができた時刻を UNIX エポックからのミリ秒で表す `unsigned long long` 値を返します。この時刻は、任意のアプリケーションキャッシュをチェックする _前_ です。
 
diff --git a/files/ja/web/api/performancetiming/index.md b/files/ja/web/api/performancetiming/index.md
index eceb4ec5bbc5b7..84a245e3c5d0ef 100644
--- a/files/ja/web/api/performancetiming/index.md
+++ b/files/ja/web/api/performancetiming/index.md
@@ -5,7 +5,8 @@ slug: Web/API/PerformanceTiming
 
 {{APIRef("Navigation Timing")}}{{Deprecated_Header}}
 
-> **警告:** このインターフェイスは <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 仕様</a>では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
+> [!WARNING]
+> このインターフェイスは <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 仕様</a>では非推奨です。代わりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
 
 **`PerformanceTiming`** インターフェイスは、下位互換性のために維持されている古いインターフェイスであり、現在のページの読み込み中および使用中に発生するさまざまなイベントに関するパフォーマンスタイミング情報を提供するプロパティを含みます。ページを記述する `PerformanceTiming` オブジェクトは {{domxref("Performance.timing", "window.performance.timing")}} プロパティを使用して取得します。
 
diff --git a/files/ja/web/api/performancetiming/navigationstart/index.md b/files/ja/web/api/performancetiming/navigationstart/index.md
index 306fb10671a6fd..03d1878cafc82d 100644
--- a/files/ja/web/api/performancetiming/navigationstart/index.md
+++ b/files/ja/web/api/performancetiming/navigationstart/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{APIRef("Performance API")}}{{Deprecated_Header}}
 
-> **警告:** このプロパティのこのインターフェイスは、[Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete) で非推奨になりました。
+> [!WARNING]
+> このプロパティのこのインターフェイスは、[Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete) で非推奨になりました。
 > かわりに {{domxref("PerformanceNavigationTiming")}} インターフェイスを使用してください。
 
 レガシーな読み取り専用プロパティ **`PerformanceTiming.navigationStart`** は、同じブラウジングコンテキストの前の文書のアンロードのプロンプトが終了した直後の時刻を UNIX エポックからのミリ秒数で表す `unsigned long long` 値を返します。前の文書が無い場合は、この値は {{domxref("PerformanceTiming.fetchStart")}} と同じになります。
diff --git a/files/ja/web/api/permissions/query/index.md b/files/ja/web/api/permissions/query/index.md
index 4a5096e425dbc9..ed4f6f63f8af6e 100644
--- a/files/ja/web/api/permissions/query/index.md
+++ b/files/ja/web/api/permissions/query/index.md
@@ -28,7 +28,8 @@ query(permissionDescriptor)
     - `sysex` （Midi のみ）
       - : システムエクスクルーシブメッセージが必要か受信するかどうかを示します。 既定値は `false` です。
 
-> **メモ:** Firefox 44 以降、[通知](/ja/docs/Web/API/Notifications_API)と[プッシュ](/ja/docs/Web/API/Push_API)の権限が統合されました。 （例えば、ユーザーによって、関連する権限のダイアログにより）権限が与えられた場合、 `navigator.permissions.query()` は `notifications` と `push` の両方に対して `true` を返します。
+> [!NOTE]
+> Firefox 44 以降、[通知](/ja/docs/Web/API/Notifications_API)と[プッシュ](/ja/docs/Web/API/Push_API)の権限が統合されました。 （例えば、ユーザーによって、関連する権限のダイアログにより）権限が与えられた場合、 `navigator.permissions.query()` は `notifications` と `push` の両方に対して `true` を返します。
 
 > **メモ:** `persistent-storage` 権限は、[ストレージ API](https://storage.spec.whatwg.org/) のとおりに、オリジンがそのストレージとして永続的ボックス（すなわち永続的ストレージ（[persistent storage](https://storage.spec.whatwg.org/#persistence)））を使用することを許可します。
 
diff --git a/files/ja/web/api/permissions/revoke/index.md b/files/ja/web/api/permissions/revoke/index.md
index c06128a1346e5c..9ab8c756b38293 100644
--- a/files/ja/web/api/permissions/revoke/index.md
+++ b/files/ja/web/api/permissions/revoke/index.md
@@ -29,7 +29,8 @@ revoke(descriptor)
     - `sysex` （MIDI のみ）
       - : システムエクスクルーシブメッセージが必要か受信するかどうかを示します。 既定値は `false` です。
 
-> **メモ:** Firefox 44 以降、[通知](/ja/docs/Web/API/Notifications_API) と[プッシュ](/ja/docs/Web/API/Push_API)の権限は統合されました。 （例えば、ユーザーによって、関連する権限のダイアログにより）権限が与えられた場合、　`navigator.permissions.query()` は `notifications` と `push` の両方に対して `true` を返します。
+> [!NOTE]
+> Firefox 44 以降、[通知](/ja/docs/Web/API/Notifications_API) と[プッシュ](/ja/docs/Web/API/Push_API)の権限は統合されました。 （例えば、ユーザーによって、関連する権限のダイアログにより）権限が与えられた場合、　`navigator.permissions.query()` は `notifications` と `push` の両方に対して `true` を返します。
 
 > **メモ:** `persistent-storage` 権限は、[ストレージ API](https://storage.spec.whatwg.org/) のとおりに、オリジンがそのストレージとして永続的ボックス（すなわち永続的ストレージ（[persistent storage](https://storage.spec.whatwg.org/#persistence)））を使用することを許可します。
 
diff --git a/files/ja/web/api/permissions_api/using_the_permissions_api/index.md b/files/ja/web/api/permissions_api/using_the_permissions_api/index.md
index 4e725e0b6bc6a2..aa3f4b2e89ed4d 100644
--- a/files/ja/web/api/permissions_api/using_the_permissions_api/index.md
+++ b/files/ja/web/api/permissions_api/using_the_permissions_api/index.md
@@ -103,7 +103,8 @@ function revokePermission() {
 }
 ```
 
-> **メモ:** Firefox 51 以降、[Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) で設計が問題になっているため、`revoke()` 関数はデフォルトで無効になっています。 設定 `dom.permissions.revoke.enable` を `true` に設定することで再度有効にすることができます。
+> [!NOTE]
+> Firefox 51 以降、[Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) で設計が問題になっているため、`revoke()` 関数はデフォルトで無効になっています。 設定 `dom.permissions.revoke.enable` を `true` に設定することで再度有効にすることができます。
 
 ### パーミッションの状態の変更への対応
 
diff --git a/files/ja/web/api/plugin/index.md b/files/ja/web/api/plugin/index.md
index f178895cb3d3bf..8f59da4254cb36 100644
--- a/files/ja/web/api/plugin/index.md
+++ b/files/ja/web/api/plugin/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Plugin
 
 Plugin` インターフェイスは、 ブラウザーのプラグインに関する情報を提供します。
 
-> **メモ:** 最新のブラウザーでは、 `Plugin` オブジェクトのプロパティを列挙することができなくなりました。
+> [!NOTE]
+> 最新のブラウザーでは、 `Plugin` オブジェクトのプロパティを列挙することができなくなりました。
 
 ## プロパティ
 
diff --git a/files/ja/web/api/pointer_events/index.md b/files/ja/web/api/pointer_events/index.md
index 67725070750bec..c11614279378af 100644
--- a/files/ja/web/api/pointer_events/index.md
+++ b/files/ja/web/api/pointer_events/index.md
@@ -9,7 +9,8 @@ l10n:
 
 今日のウェブコンテンツの多くは、ユーザーのポインティング機器がマウスであることを前提としています。しかし、多くの端末がペンやスタイラス、タッチ面のような他の種類のポインティング入力機器に対応しているので、既存のポインティング機器のイベントモデルへの拡張が必要であり、そして[ポインターイベント](#ポインターイベント)はその必要性に応じます。
 
-> **メモ:** ポインターイベントは[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)では*利用できません*。
+> [!NOTE]
+> ポインターイベントは[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)では*利用できません*。
 
 ポインターイベントは、ポインティング機器に対して発生する DOM イベントです。 これらは、マウス、ペンやスタイラス、（1 本以上の指でなどの）タッチなどのポインティング入力機器を処理する単一の DOM イベントモデルを作成するように設計されています。
 
diff --git a/files/ja/web/api/pointer_events/using_pointer_events/index.md b/files/ja/web/api/pointer_events/using_pointer_events/index.md
index fa60cfffb6fde7..a2cde49074aee3 100644
--- a/files/ja/web/api/pointer_events/using_pointer_events/index.md
+++ b/files/ja/web/api/pointer_events/using_pointer_events/index.md
@@ -22,7 +22,8 @@ l10n:
 
 ## 例
 
-> **メモ:** 以下のテキストでは、表面との接触を説明するときに「指」という用語を使用していますが、もちろんスタイラス、マウス、その他の場所を指す方法でもかまいません。
+> [!NOTE]
+> 以下のテキストでは、表面との接触を説明するときに「指」という用語を使用していますが、もちろんスタイラス、マウス、その他の場所を指す方法でもかまいません。
 
 ### キャンバスの作成
 
diff --git a/files/ja/web/api/pointer_lock_api/index.md b/files/ja/web/api/pointer_lock_api/index.md
index a26442c2a3b5c0..c31a77e4689714 100644
--- a/files/ja/web/api/pointer_lock_api/index.md
+++ b/files/ja/web/api/pointer_lock_api/index.md
@@ -37,7 +37,8 @@ canvas.requestPointerLock =
 canvas.requestPointerLock();
 ```
 
-> **メモ:** ユーザーが[既定のロック解除ジェスチャ](https://w3c.github.io/pointerlock/#dfn-default-unlock-gesture)でポインターロックを解除した場合、またはこの文書に対して以前にポインターロックが入力されていない場合、[エンゲージメントジェスチャ](https://w3c.github.io/pointerlock/#dfn-engagement-gesture)の結果として生成されるイベントを [`requestPointerLock`](https://w3c.github.io/pointerlock/#dom-element-requestpointerlock) が成功する前に、文書内で受信する必要があります。（<https://w3c.github.io/pointerlock/#extensions-to-the-element-interface> より）
+> [!NOTE]
+> ユーザーが[既定のロック解除ジェスチャ](https://w3c.github.io/pointerlock/#dfn-default-unlock-gesture)でポインターロックを解除した場合、またはこの文書に対して以前にポインターロックが入力されていない場合、[エンゲージメントジェスチャ](https://w3c.github.io/pointerlock/#dfn-engagement-gesture)の結果として生成されるイベントを [`requestPointerLock`](https://w3c.github.io/pointerlock/#dom-element-requestpointerlock) が成功する前に、文書内で受信する必要があります。（<https://w3c.github.io/pointerlock/#extensions-to-the-element-interface> より）
 
 ### pointerLockElement と exitPointerLock()
 
@@ -106,7 +107,8 @@ function lockError(e) {
 }
 ```
 
-> **メモ:** Firefox 50 まで、上記のイベントは `moz` 接頭辞を付加していました。
+> [!NOTE]
+> Firefox 50 まで、上記のイベントは `moz` 接頭辞を付加していました。
 
 ## Mouse イベントの拡張
 
diff --git a/files/ja/web/api/pointerevent/index.md b/files/ja/web/api/pointerevent/index.md
index b2f524b03723b4..252626895d325d 100644
--- a/files/ja/web/api/pointerevent/index.md
+++ b/files/ja/web/api/pointerevent/index.md
@@ -56,7 +56,8 @@ _このインターフェイスは、{{domxref("MouseEvent")}} および {{domxr
 
 `PointerEvent` インターフェイスには、複数の種類のイベントがあります。 どのイベントが発生したかを判断するには、イベントの {{ domxref("Event.type", "type") }} プロパティを調べてください。
 
-> **メモ:** 多くの場合、ポインターとマウスの両方のイベントが送信されることに注意することが重要です（ポインター固有でないコードでもユーザーと対話できるようにするため）。 ポインターイベントを使用する場合は、{{ domxref("event.preventDefault()") }} を呼び出してマウスイベントが共に送信されないようにする必要があります。
+> [!NOTE]
+> 多くの場合、ポインターとマウスの両方のイベントが送信されることに注意することが重要です（ポインター固有でないコードでもユーザーと対話できるようにするため）。 ポインターイベントを使用する場合は、{{ domxref("event.preventDefault()") }} を呼び出してマウスイベントが共に送信されないようにする必要があります。
 
 - {{domxref('Element/pointerover_event', 'pointerover')}}
   - : このイベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。
diff --git a/files/ja/web/api/popover_api/using/index.md b/files/ja/web/api/popover_api/using/index.md
index 607ab29e30b2e7..85435ec883a9fd 100644
--- a/files/ja/web/api/popover_api/using/index.md
+++ b/files/ja/web/api/popover_api/using/index.md
@@ -17,7 +17,8 @@ l10n:
 <div id="mypopover" popover>ポップオーバーコンテンツ</div>
 ```
 
-> **メモ:** 値なしで `popover` 属性を追加すると、 `popover="auto"` を設定するのと同じになります。
+> [!NOTE]
+> 値なしで `popover` 属性を追加すると、 `popover="auto"` を設定するのと同じになります。
 
 この属性を追加すると、{{cssxref("display", "display: none")}} をその要素に設定することで、ページ読み込み時に非表示にすることができます。ポップオーバーの表示・非表示を切り替えるには、いくつかの制御ボタンを追加する必要があります。{{htmlelement("button")}}（または {{htmlelement("input")}} の `type="button"`）に [`popovertarget`](/ja/docs/Web/HTML/Element/button#popovertarget) 属性を、制御するポップオーバーの ID を値として設定することすることにより、ポップオーバー制御ボタンに設定することができます。
 
@@ -417,7 +418,8 @@ html {
 
 {{ EmbedLiveSample("Transitioning a popover", "100%", "200") }}
 
-> **メモ:** ポップオーバーは表示されるたびに `display: none` から `display: block` に変わるので、項目がトランジションするたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルにトランジションします。ポップオーバーが閉じられたとき、 `[popover]:popover-open` 状態から既定の `[popover]` 状態にトランジションします。
+> [!NOTE]
+> ポップオーバーは表示されるたびに `display: none` から `display: block` に変わるので、項目がトランジションするたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルにトランジションします。ポップオーバーが閉じられたとき、 `[popover]:popover-open` 状態から既定の `[popover]` 状態にトランジションします。
 >
 > このような場合、出現時と消滅時のスタイル設定を異なる形にすることが可能です。このことの証明については、[開始スタイルを使用する場合のデモ](/ja/docs/Web/CSS/@starting-style#開始スタイルを使用する場合のデモ)の例を参照してください。
 
diff --git a/files/ja/web/api/popstateevent/popstateevent/index.md b/files/ja/web/api/popstateevent/popstateevent/index.md
index 67dd78602a74c3..812a8bca902466 100644
--- a/files/ja/web/api/popstateevent/popstateevent/index.md
+++ b/files/ja/web/api/popstateevent/popstateevent/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`PopStateEvent()`** コンストラクターは、新しい {{domxref("PopStateEvent")}} オブジェクトを生成します。
 
-> **メモ:** ウェブ開発者は通常このコンストラクタを呼び出す必要はありません。ブラウザーは {{domxref("Window/popstate_event", "popstate")}} イベントを発行するときにこれらのオブジェクトを生成するからです。
+> [!NOTE]
+> ウェブ開発者は通常このコンストラクタを呼び出す必要はありません。ブラウザーは {{domxref("Window/popstate_event", "popstate")}} イベントを発行するときにこれらのオブジェクトを生成するからです。
 
 ## 構文
 
diff --git a/files/ja/web/api/processinginstruction/index.md b/files/ja/web/api/processinginstruction/index.md
index 13779da5768af4..d031e1747fd98f 100644
--- a/files/ja/web/api/processinginstruction/index.md
+++ b/files/ja/web/api/processinginstruction/index.md
@@ -13,7 +13,8 @@ l10n:
 
 処理命令は [XML 宣言](/ja/docs/Web/XML/XML_introduction#xml_declaration)とは異なることがあります。
 
-> **メモ:** ユーザー定義の処理命令は "`xml`" で始めることはできません。 `xml` 接頭辞を持つ処理命令のターゲット名は、 XML 仕様書によって特定の標準的な用途のために予約されているからです（例えば、 `<?xml-stylesheet ?>` などを見てください）。
+> [!NOTE]
+> ユーザー定義の処理命令は "`xml`" で始めることはできません。 `xml` 接頭辞を持つ処理命令のターゲット名は、 XML 仕様書によって特定の標準的な用途のために予約されているからです（例えば、 `<?xml-stylesheet ?>` などを見てください）。
 
 例えば、次のようなものです。
 
diff --git a/files/ja/web/api/publickeycredential/getclientextensionresults/index.md b/files/ja/web/api/publickeycredential/getclientextensionresults/index.md
index b0cb2eb1be7fca..c1bb7aa3ea3b8d 100644
--- a/files/ja/web/api/publickeycredential/getclientextensionresults/index.md
+++ b/files/ja/web/api/publickeycredential/getclientextensionresults/index.md
@@ -9,9 +9,11 @@ slug: Web/API/PublicKeyCredential/getClientExtensionResults
 
 `PublicKeyCredential` の生成または読み出し中 (それぞれ {{domxref("CredentialsContainer.create()","navigator.credentials.create()")}} および {{domxref("CredentialsContainer.get()","navigator.credentials.get()")}} で実施) に、それぞれ {{domxref("PublicKeyCredentialCreationOptions.extensions")}} および {{domxref("PublicKeyCredentialRequestOptions.extensions")}} によって与えられる別々の拡張機能のために、クライアントが処理する「専用の」処理を持つことができます。
 
-> **メモ:** 拡張機能はオプションであり、ブラウザーによって認識する拡張機能は異なります。すべての拡張機能はクライアントが処理することはオプションです。ブラウザーが指定された拡張機能を知らない場合、失敗としてはいけません。
+> [!NOTE]
+> 拡張機能はオプションであり、ブラウザーによって認識する拡張機能は異なります。すべての拡張機能はクライアントが処理することはオプションです。ブラウザーが指定された拡張機能を知らない場合、失敗としてはいけません。
 
-> **メモ:** このプロパティは最上位のコンテキストでしか使えない可能性があり、例えば {{HTMLElement("iframe")}} の中では利用できません。
+> [!NOTE]
+> このプロパティは最上位のコンテキストでしか使えない可能性があり、例えば {{HTMLElement("iframe")}} の中では利用できません。
 
 ## 構文
 
@@ -27,7 +29,8 @@ mapArrayBuffer = publicKeyCredential.getClientExtensionResults()
 
 {{jsxref("ArrayBuffer")}} の形で、クライアントが様々な拡張機能を処理した結果です。拡張子の識別子と、クライアントが処理した後の結果の対応表を返します。このオブジェクトには拡張機能の識別子と処理の結果の対応表が入っています。
 
-> **警告:** 2019 年 3 月時点で、 `appId` ({{domxref("PublicKeyCredentialRequestOptions.extensions")}} の生成の間に使用される) のみ、 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=818303) および [Edge](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/windows-integration/web-authentication#api-surface) が対応しています。 Firefox は[どの拡張機能にも対応していない](https://bugzilla.mozilla.org/show_bug.cgi?id=1370728)ようです。
+> [!WARNING]
+> 2019 年 3 月時点で、 `appId` ({{domxref("PublicKeyCredentialRequestOptions.extensions")}} の生成の間に使用される) のみ、 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=818303) および [Edge](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/windows-integration/web-authentication#api-surface) が対応しています。 Firefox は[どの拡張機能にも対応していない](https://bugzilla.mozilla.org/show_bug.cgi?id=1370728)ようです。
 
 ## 例
 
diff --git a/files/ja/web/api/publickeycredential/id/index.md b/files/ja/web/api/publickeycredential/id/index.md
index d8d93feb43c444..1e8522ad0b57ed 100644
--- a/files/ja/web/api/publickeycredential/id/index.md
+++ b/files/ja/web/api/publickeycredential/id/index.md
@@ -11,7 +11,8 @@ l10n:
 
 このプロパティは {{domxref("PublicKeyCredential.rawId")}} の [base64url エンコード](/ja/docs/Glossary/Base64)版です。
 
-> **メモ:** このプロパティは最上位のコンテキストでのみ使用することができ、例えば {{HTMLElement("iframe")}} では使用することができません。
+> [!NOTE]
+> このプロパティは最上位のコンテキストでのみ使用することができ、例えば {{HTMLElement("iframe")}} では使用することができません。
 
 ## 値
 
diff --git a/files/ja/web/api/publickeycredential/index.md b/files/ja/web/api/publickeycredential/index.md
index 412b647413299c..5e183000821d0b 100644
--- a/files/ja/web/api/publickeycredential/index.md
+++ b/files/ja/web/api/publickeycredential/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{InheritanceDiagram}}
 
-> **メモ:** このインターフェイスは最上位のコンテキストに限定されています。 {{HTMLElement("iframe")}} 要素の中で使用しても、何も効果がありません。
+> [!NOTE]
+> このインターフェイスは最上位のコンテキストに限定されています。 {{HTMLElement("iframe")}} 要素の中で使用しても、何も効果がありません。
 
 ## インスタンスプロパティ
 
diff --git a/files/ja/web/api/publickeycredential/isuserverifyingplatformauthenticatoravailable_static/index.md b/files/ja/web/api/publickeycredential/isuserverifyingplatformauthenticatoravailable_static/index.md
index d31d39d6d161f2..676219eaea406d 100644
--- a/files/ja/web/api/publickeycredential/isuserverifyingplatformauthenticatoravailable_static/index.md
+++ b/files/ja/web/api/publickeycredential/isuserverifyingplatformauthenticatoravailable_static/index.md
@@ -13,7 +13,8 @@ slug: Web/API/PublicKeyCredential/isUserVerifyingPlatformAuthenticatorAvailable_
 - Windows Hello (Windows)
 - Android の端末アンロック（指紋認証、顔認証、PIN、など）
 
-> **メモ:** このメソッドは最上位のコンテキストでのみ使用することができます。例えば {{HTMLElement("iframe")}} では使用できません。
+> [!NOTE]
+> このメソッドは最上位のコンテキストでのみ使用することができます。例えば {{HTMLElement("iframe")}} では使用できません。
 
 ## 構文
 
@@ -29,9 +30,11 @@ isUserVerifyingPlatformAuthenticatorAvailable()
 
 ユーザーを認証するプラットフォーム認証が利用できるかどうかを示す論理値に解決する {{jsxref("Promise")}} です。
 
-> **メモ:** このメソッドは静的メソッドであり、インスタンスではなく {{domxref("PublicKeyCredential")}} インターフェイス上で直接呼び出されます。
+> [!NOTE]
+> このメソッドは静的メソッドであり、インスタンスではなく {{domxref("PublicKeyCredential")}} インターフェイス上で直接呼び出されます。
 
-> **メモ:** 以前の版の仕様では、論理値は、そのような認証装置が存在することを開示することに対するユーザーの同意も伝えていました。
+> [!NOTE]
+> 以前の版の仕様では、論理値は、そのような認証装置が存在することを開示することに対するユーザーの同意も伝えていました。
 
 ## 例
 
diff --git a/files/ja/web/api/publickeycredential/rawid/index.md b/files/ja/web/api/publickeycredential/rawid/index.md
index a5d33024be1978..1fdede90b60d4e 100644
--- a/files/ja/web/api/publickeycredential/rawid/index.md
+++ b/files/ja/web/api/publickeycredential/rawid/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{domxref("PublicKeyCredential.id")}} プロパティはこの識別子が [base64url エンコード](/ja/docs/Glossary/Base64)されたものです。
 
-> **メモ:** このプロパティは最上位のコンテキストでしか使えません。例えば {{HTMLElement("iframe")}} の中では利用できません。
+> [!NOTE]
+> このプロパティは最上位のコンテキストでしか使えません。例えば {{HTMLElement("iframe")}} の中では利用できません。
 
 ### 値
 
diff --git a/files/ja/web/api/publickeycredential/response/index.md b/files/ja/web/api/publickeycredential/response/index.md
index 78e3f77858f331..56691722c4b186 100644
--- a/files/ja/web/api/publickeycredential/response/index.md
+++ b/files/ja/web/api/publickeycredential/response/index.md
@@ -19,9 +19,11 @@ l10n:
 - このレスポンス
 - 要求を検証するためのクライアントの拡張機能 （{{domxref("PublicKeyCredential.getClientExtensionResults()")}} で指定されたもの）
 
-> **メモ:** 既存の資格情報の取得を検証する場合、 `PublicKeyCredential` オブジェクト全体とクライアント拡張機能が依存している側のサーバーに必要です。
+> [!NOTE]
+> 既存の資格情報の取得を検証する場合、 `PublicKeyCredential` オブジェクト全体とクライアント拡張機能が依存している側のサーバーに必要です。
 
-> **メモ:** このプロパティは最上位のコンテキストでのみ使用することができます。例えば {{HTMLElement("iframe")}} では使用することができません。
+> [!NOTE]
+> このプロパティは最上位のコンテキストでのみ使用することができます。例えば {{HTMLElement("iframe")}} では使用することができません。
 
 ## 値
 
diff --git a/files/ja/web/api/push_api/index.md b/files/ja/web/api/push_api/index.md
index 34a174bc131739..44ed31c31e6901 100644
--- a/files/ja/web/api/push_api/index.md
+++ b/files/ja/web/api/push_api/index.md
@@ -11,7 +11,8 @@ l10n:
 
 ## プッシュ通知の概念と使い方
 
-> **警告:** PushManager のサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。
+> [!WARNING]
+> PushManager のサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。
 >
 > - [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
 > - [Preventing CSRF and XSRF Attacks](https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/)
diff --git a/files/ja/web/api/pushmanager/haspermission/index.md b/files/ja/web/api/pushmanager/haspermission/index.md
index a1bf46a7e39035..8f61494a74086d 100644
--- a/files/ja/web/api/pushmanager/haspermission/index.md
+++ b/files/ja/web/api/pushmanager/haspermission/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`PushManager.hasPermission()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、 {{jsxref("Promise")}} を返します。このプロミスは、ウェブアプリへのリクエストの `PushPermissionStatus` に解決し、 `granted`, `denied`, `default` のいずれかになります。
 
-> **メモ:** この機能は {{domxref("PushManager.permissionState()")}} メソッドに置き換えられました。
+> [!NOTE]
+> この機能は {{domxref("PushManager.permissionState()")}} メソッドに置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/api/pushmanager/permissionstate/index.md b/files/ja/web/api/pushmanager/permissionstate/index.md
index 41d902a8ed672b..5358fa0d117726 100644
--- a/files/ja/web/api/pushmanager/permissionstate/index.md
+++ b/files/ja/web/api/pushmanager/permissionstate/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`permissionState()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、プッシュマネージャーの許可状態を示す文字列で解決される {{jsxref("Promise")}} を返します。許可状態は、`'prompt'` か `'denied'`、`'granted'` のいずれかです。
 
-> **メモ:** Firefox 44 では、[通知](/ja/docs/Web/API/Notifications_API)と[プッシュ](/ja/docs/Web/API/Push_API)の許可が統合されています。
+> [!NOTE]
+> Firefox 44 では、[通知](/ja/docs/Web/API/Notifications_API)と[プッシュ](/ja/docs/Web/API/Push_API)の許可が統合されています。
 > 通知が許可された場合、プッシュも利用できます。
 
 ## 構文
diff --git a/files/ja/web/api/pushmanager/register/index.md b/files/ja/web/api/pushmanager/register/index.md
index cc802cd02241b8..673eccf030c29b 100644
--- a/files/ja/web/api/pushmanager/register/index.md
+++ b/files/ja/web/api/pushmanager/register/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`register`** メソッドは、システムにプッシュ通知の新しい端点をリクエストするために使用します。
 
-> **メモ:** このメソッドは {{domxref("PushManager.subscribe()")}} に置き換えられました。
+> [!NOTE]
+> このメソッドは {{domxref("PushManager.subscribe()")}} に置き換えられました。
 
 ## 構文
 
@@ -28,7 +29,8 @@ register()
 
 メソッドの呼び出しに成功したら、リクエストの `result` が端点の URL を表す文字列になります。
 
-> **メモ:** この URL が必要なくなったら、 {{domxref("PushManager.unregister()")}} を使用して自分自身を掃除してください。
+> [!NOTE]
+> この URL が必要なくなったら、 {{domxref("PushManager.unregister()")}} を使用して自分自身を掃除してください。
 
 ## 例
 
diff --git a/files/ja/web/api/pushmanager/registrations/index.md b/files/ja/web/api/pushmanager/registrations/index.md
index b90596521867e2..e9334ef624a40e 100644
--- a/files/ja/web/api/pushmanager/registrations/index.md
+++ b/files/ja/web/api/pushmanager/registrations/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`registrations`** メソッドは、プッシュ通知の端点登録の存在に関してシステムに問い合わせするために使用します。
 
-> **メモ:** このメソッドは {{domxref("PushManager.getSubscription()")}} メソッドに置き換えられました。
+> [!NOTE]
+> このメソッドは {{domxref("PushManager.getSubscription()")}} メソッドに置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/api/pushmanager/subscribe/index.md b/files/ja/web/api/pushmanager/subscribe/index.md
index ffaf879ade3862..21637ce5d30e13 100644
--- a/files/ja/web/api/pushmanager/subscribe/index.md
+++ b/files/ja/web/api/pushmanager/subscribe/index.md
@@ -29,7 +29,8 @@ subscribe(options)
     - `applicationServerKey`
       - : Base64 でエンコードされた文字列または {{jsxref("ArrayBuffer")}} で、プッシュサーバーがアプリケーションサーバーを認証するために使用する[楕円曲線 DSA](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9ADSA) P-256 公開鍵が入ります。指定した場合は、アプリケーションサーバーから発するすべてのメッセージで [VAPID](https://tools.ietf.org/html/rfc8292) 認証スキームを使用しなければならず、また対応する秘密鍵で署名した JWT を含めなければなりません。この鍵は、データを暗号化するために使用する ECDH 鍵と**_同じではありません_**。詳しくは "[Using VAPID with WebPush](https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/)" をご覧ください。
 
-    > **メモ:** この引数は Chrome や Edge など、一部のブラウザーでは必須です。
+    > [!NOTE]
+    > この引数は Chrome や Edge など、一部のブラウザーでは必須です。
 
 ### 返値
 
diff --git a/files/ja/web/api/pushmanager/unregister/index.md b/files/ja/web/api/pushmanager/unregister/index.md
index 30bf8e755e28d0..500656a242e018 100644
--- a/files/ja/web/api/pushmanager/unregister/index.md
+++ b/files/ja/web/api/pushmanager/unregister/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`unregister()`** メソッドは、システムに特定の端点の登録を脱退して削除するよう依頼するために使用していました。
 
-> **メモ:** 更新された API では、サブスクリプションは {{domxref("PushSubscription.unsubscribe()")}} メソッドで脱退することができます。
+> [!NOTE]
+> 更新された API では、サブスクリプションは {{domxref("PushSubscription.unsubscribe()")}} メソッドで脱退することができます。
 
 ## 構文
 
diff --git a/files/ja/web/api/pushsubscription/subscriptionid/index.md b/files/ja/web/api/pushsubscription/subscriptionid/index.md
index a4ec22f889c996..651ef8e613505e 100644
--- a/files/ja/web/api/pushsubscription/subscriptionid/index.md
+++ b/files/ja/web/api/pushsubscription/subscriptionid/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`subscriptionId`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、このプッシュサブスクリプションに関連するサブスクリプション ID が入った文字列を返します。
 
-> **警告:** この機能の代わりに、同じインターフェイスの {{domxref("PushSubscription.endPoint")}} プロパティを使用してください。
+> [!WARNING]
+> この機能の代わりに、同じインターフェイスの {{domxref("PushSubscription.endPoint")}} プロパティを使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/range/comparenode/index.md b/files/ja/web/api/range/comparenode/index.md
index babdba7ef9e378..664156d2882df2 100644
--- a/files/ja/web/api/range/comparenode/index.md
+++ b/files/ja/web/api/range/comparenode/index.md
@@ -21,7 +21,8 @@ l10n:
 - `NODE_INSIDE` (`3`)
   - : Node はこの Range より後に始まり、前に終わる。すなわち、ノードは完全にこの Range に選択されている。
 
-> **警告:** このメソッドは [Gecko 1.9](/ja/docs/Mozilla/Firefox/Releases/3) から[削除され](/ja/docs/Mozilla/Firefox/Releases/3/Site_compatibility)、唯一実装していた Firefox の将来のバージョンでは存在しません。使用可能な限り早く {{DOMxRef("Range.compareBoundaryPoints()")}} に切り替えるべきです。
+> [!WARNING]
+> このメソッドは [Gecko 1.9](/ja/docs/Mozilla/Firefox/Releases/3) から[削除され](/ja/docs/Mozilla/Firefox/Releases/3/Site_compatibility)、唯一実装していた Firefox の将来のバージョンでは存在しません。使用可能な限り早く {{DOMxRef("Range.compareBoundaryPoints()")}} に切り替えるべきです。
 
 以下の関数が置き換えの関数として使用できます。
 
diff --git a/files/ja/web/api/readablebytestreamcontroller/close/index.md b/files/ja/web/api/readablebytestreamcontroller/close/index.md
index 81becfc594a09c..7c797fcebe8e10 100644
--- a/files/ja/web/api/readablebytestreamcontroller/close/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/close/index.md
@@ -12,7 +12,8 @@ l10n:
 
 これは、そのデータソースが使い果たされたとき/完全に完了したときに、基盤ソースによって呼び出される可能性があります。
 
-> **メモ:** リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取ってしまうとストリームは閉じられます。
+> [!NOTE]
+> リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取ってしまうとストリームは閉じられます。
 > しかし、 `close()` が呼び出されたときに、未処理で部分的に書き込まれた {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} がある場合、ストリームはエラーになります。
 
 ## 構文
diff --git a/files/ja/web/api/readablestream/readablestream/index.md b/files/ja/web/api/readablestream/readablestream/index.md
index fa6a52de537346..fcfa17e0a8ab00 100644
--- a/files/ja/web/api/readablestream/readablestream/index.md
+++ b/files/ja/web/api/readablestream/readablestream/index.md
@@ -51,7 +51,8 @@ new ReadableStream(underlyingSource, queuingStrategy)
     - `size(chunk)`
       - : 引数 `chunk` を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。
 
-    > **メモ:** 独自のカスタム `queuingStrategy` を定義するか、このオブジェクト値に {{domxref("ByteLengthQueuingStrategy")}} または {{domxref("CountQueuingStrategy")}} のインスタンスを使用できます。 `queuingStrategy` が指定されていない場合、使用される既定値は、最高水準点が 1 の `CountQueuingStrategy` と同じです。
+    > [!NOTE]
+    > 独自のカスタム `queuingStrategy` を定義するか、このオブジェクト値に {{domxref("ByteLengthQueuingStrategy")}} または {{domxref("CountQueuingStrategy")}} のインスタンスを使用できます。 `queuingStrategy` が指定されていない場合、使用される既定値は、最高水準点が 1 の `CountQueuingStrategy` と同じです。
 
 ### 返値
 
diff --git a/files/ja/web/api/readablestreambyobreader/cancel/index.md b/files/ja/web/api/readablestreambyobreader/cancel/index.md
index f61460fce40eca..f3d0ece9a6ba2b 100644
--- a/files/ja/web/api/readablestreambyobreader/cancel/index.md
+++ b/files/ja/web/api/readablestreambyobreader/cancel/index.md
@@ -11,7 +11,8 @@ l10n:
 **`cancel()`** は {{domxref("ReadableStreamBYOBReader")}} インターフェイスのメソッドで、ストリームがキャンセルされたときに解決するプロミス ({{jsxref("Promise")}}) を返します。
 このメソッドを呼び出すと、コンシューマーがストリームへの関心を失ったことを示します。
 
-> **メモ:** リーダーがアクティブな場合、 `cancel()` メソッドは、関連するストリームの場合（{{domxref("ReadableStream.cancel()")}}）と同じように振る舞います。
+> [!NOTE]
+> リーダーがアクティブな場合、 `cancel()` メソッドは、関連するストリームの場合（{{domxref("ReadableStream.cancel()")}}）と同じように振る舞います。
 
 ## 構文
 
diff --git a/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md b/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md
index 04810700ac8160..1ea3859b13efd5 100644
--- a/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md
+++ b/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ReadableStreamBYOBReader()`** コンストラクターは、`ReadableStreamBYOBReader` オブジェクトのインスタンスを作成して返します。
 
-> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドに `"byob"` を引数につけて使用してください。
+> [!NOTE]
+> 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドに `"byob"` を引数につけて使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/readablestreamdefaultreader/cancel/index.md b/files/ja/web/api/readablestreamdefaultreader/cancel/index.md
index 54996c04ece3f2..da01f10b62999f 100644
--- a/files/ja/web/api/readablestreamdefaultreader/cancel/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/cancel/index.md
@@ -12,7 +12,8 @@ l10n:
 
 キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入っている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、 {{domxref("ReadableStreamDefaultController.close()")}} を使用します。
 
-> **メモ:** リーダーがアクティブな場合、`cancel()` メソッドは、関連付けられたストリームの場合 ({{domxref("ReadableStream.cancel()")}}) と同じように振る舞います。
+> [!NOTE]
+> リーダーがアクティブな場合、`cancel()` メソッドは、関連付けられたストリームの場合 ({{domxref("ReadableStream.cancel()")}}) と同じように振る舞います。
 
 ## 構文
 
diff --git a/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md b/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
index edbc164d02d9e8..210f9ed93d8b58 100644
--- a/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`ReadableStreamDefaultReader()`** コンストラクターは、`ReadableStreamDefaultReader` オブジェクトのインスタンスを作成して返します。
 
-> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドを使用してください。
+> [!NOTE]
+> 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/api/relativeorientationsensor/index.md b/files/ja/web/api/relativeorientationsensor/index.md
index 238ab20ded3049..08f246bf51a92b 100644
--- a/files/ja/web/api/relativeorientationsensor/index.md
+++ b/files/ja/web/api/relativeorientationsensor/index.md
@@ -36,7 +36,8 @@ _固有のイベントはありません。祖先の {{domxref('Sensor')}} か
 
 以下の例は、だいたい [Intel の Orientation Phone demo](https://intel.github.io/generic-sensor-demos/orientation-phone/) をもとにしており、1 秒に 60 回の周期を設定して `RelativeOrientationSensor` のインスタンスを生成しています。
 
-> **メモ:** もとにした Intel のデモでは `AbsoluteOrientationSensor` を用いています。測定ごとに、{{domxref('OrientationSensor.quaternion')}} を用いて電話の視覚的なモデルを回転しています。
+> [!NOTE]
+> もとにした Intel のデモでは `AbsoluteOrientationSensor` を用いています。測定ごとに、{{domxref('OrientationSensor.quaternion')}} を用いて電話の視覚的なモデルを回転しています。
 
 ```js
 const options = { frequency: 60, referenceFrame: "device" };
diff --git a/files/ja/web/api/request/index.md b/files/ja/web/api/request/index.md
index d04c89331e918c..ed75710c6ec029 100644
--- a/files/ja/web/api/request/index.md
+++ b/files/ja/web/api/request/index.md
@@ -62,7 +62,8 @@ l10n:
 - {{domxref("Request.text()")}}
   - : リクエストの本体のテキスト表現で解決するプロミスを返します。
 
-> **メモ:** リクエストの本体の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。
+> [!NOTE]
+> リクエストの本体の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。
 
 ## 例
 
@@ -100,7 +101,8 @@ const credentials = request.credentials;
 const bodyUsed = request.bodyUsed;
 ```
 
-> **メモ:** body の型は {{domxref("Blob")}}, {{jsxref("ArrayBuffer")}}, {{jsxref("TypedArray")}}, {{jsxref("DataView")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, {{jsxref("String")}} オブジェクトのいずれか、および文字列リテラルのみですので、 JSON オブジェクトを本体に追加するには、そのオブジェクトの文字列化をする必要があります。
+> [!NOTE]
+> body の型は {{domxref("Blob")}}, {{jsxref("ArrayBuffer")}}, {{jsxref("TypedArray")}}, {{jsxref("DataView")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, {{jsxref("String")}} オブジェクトのいずれか、および文字列リテラルのみですので、 JSON オブジェクトを本体に追加するには、そのオブジェクトの文字列化をする必要があります。
 
 すると `Request` オブジェクトを、例えば {{domxref("fetch()")}} 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。
 
diff --git a/files/ja/web/api/request/request/index.md b/files/ja/web/api/request/request/index.md
index e10f8e4c70adf2..cfbfe3734ec3a0 100644
--- a/files/ja/web/api/request/request/index.md
+++ b/files/ja/web/api/request/request/index.md
@@ -159,7 +159,8 @@ const myRequest = new Request("flowers.jpg", myOptions);
 const copy = new Request(myRequest);
 ```
 
-> **メモ:** 最後の使い方は[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内でのみ使用できます。
+> [!NOTE]
+> 最後の使い方は[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内でのみ使用できます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/requestinit/index.md b/files/ja/web/api/requestinit/index.md
new file mode 100644
index 00000000000000..d6263ad83a8668
--- /dev/null
+++ b/files/ja/web/api/requestinit/index.md
@@ -0,0 +1,285 @@
+---
+title: RequestInit
+slug: Web/API/RequestInit
+l10n:
+  sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
+---
+
+{{APIRef("Fetch API")}}
+
+**`RequestInit`** は[フェッチ API](/ja/docs/Web/API/Fetch_API) の辞書で、フェッチリクエストを構成するのに使用する一連のオプションを表します。
+
+`RequestInit` オブジェクトは {{domxref("Request.Request()", "Request()")}} コンストラクターに渡したり、直絶 [`fetch()`](/ja/docs/Web/API/Window/fetch) 関数呼び出しに渡したりすることができます。
+
+また、`Request` を `RequestInit` で作成し、その `Request` を `fetch()` に別の `RequestInit` と一緒に渡すこともできます。この場合、両方の場所で同じオプションが設定されていれば、直接 `fetch()` に渡された値が使用されます。
+
+## インスタンスプロパティ
+
+- `attributionReporting` {{optional_inline}} {{experimental_inline}}
+
+  - : このリクエストのレスポンスに JavaScript ベースの[属性ソース](/ja/docs/Web/API/Attribution_Reporting_API/Registering_sources#javascript-based_event_sources)または[属性トリガー](/ja/docs/Web/API/Attribution_Reporting_API/Registering_triggers#javascript-based_attribution_triggers)を登録できるようにしたいことを示します。`attributionReporting` は以下のプロパティを格納するオブジェクトです。
+
+    - `eventSourceEligible`
+      - : 論理値。`true` に設定すると、このリクエストのレスポンスは属性ソースの登録の対象となります。`false` に設定すると、対象になりません。
+    - `triggerEligible`
+      - : 論理値。`true` に設定すると、このリクエストのレスポンスは属性トリガーの登録の対象となります。`false` に設定すると、対象になりません。
+
+    詳しくは [Attribution Reporting API](/ja/docs/Web/API/Attribution_Reporting_API) を参照してください。
+
+- `body` {{optional_inline}}
+
+  - : サーバーに送信する内容を含むリクエスト本体です。例えば {{httpmethod("POST")}} または {{httpmethod("PUT")}} リクエストで使用されます。 以下のいずれかの型のインスタンスとして指定します。
+
+    - 文字列
+    - {{jsxref("ArrayBuffer")}}
+    - {{domxref("Blob")}}
+    - {{jsxref("DataView")}}
+    - {{domxref("File")}}
+    - {{domxref("FormData")}}
+    - {{jsxref("TypedArray")}}
+    - {{domxref("URLSearchParams")}}
+
+    詳しくは[本体の設定](/ja/docs/Web/API/Fetch_API/Using_Fetch#setting_a_body)を参照してください。
+
+- `browsingTopics` {{optional_inline}} {{experimental_inline}}
+
+  - : 論理値で、現在のユーザーのために選択されたトピックを、 リクエストに関連付けられた {{httpheader("Sec-Browsing-Topics")}} ヘッダーで送ることを指定します。
+
+    詳しくは [Using the Topics API](/ja/docs/Web/API/Topics_API/Using) を参照してください。
+
+- `cache` {{optional_inline}}
+
+  - : リクエストに使用したい[キャッシュモード](/ja/docs/Web/API/Request/cache)を指定します。以下の値のいずれかを指定します。
+
+    - `default`
+
+      - : ブラウザーはリクエストに一致するレスポンスを HTTP キャッシュから探します。
+
+        - 一致したものがあり[新しい](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)場合、それをキャッシュから返します。
+        - もし一致するものがあっても[古い](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)場合は、ブラウザーはリモートサーバーに[条件付きリクエスト](/ja/docs/Web/HTTP/Conditional_requests)を行います。サーバーがリソースが変更されていないことを示した場合、そのリソースはキャッシュから返されます。そうでなければ、リソースはサーバーからダウンロードされ、キャッシュが更新されます。
+        - 一致するものがない場合、ブラウザーは通常のリクエストを行い、ダウンロードされたリソースでキャッシュを更新します。
+
+    - `no-store`
+      - : ブラウザーは最初にキャッシュを見ずにリモートサーバーからリソースを取得し、ダウンロードしたリソースでキャッシュを更新しません。
+    - `reload`
+      - : ブラウザーは最初のキャッシュを見ずにリモートサーバーからリソースを取得しますが、ダウンロードしたリソースでキャッシュを更新します。
+    - `no-cache`
+
+      - : ブラウザーは、リクエストに一致するレスポンスがないか、HTTP キャッシュを探します。
+
+        - 一致するものがあれば、新しいか古いかを問わず、ブラウザーはリモートサーバーに[条件付きリクエスト](/ja/docs/Web/HTTP/Conditional_requests)を行います。サーバーがリソースが変更されていないことを示した場合、そのリソースはキャッシュから返されます。そうでなければ、リソースはサーバーからダウンロードされ、キャッシュが更新されます。
+        - 一致するものがない場合、ブラウザーは通常のリクエストを行い、ダウンロードされたリソースでキャッシュを更新します。
+
+    - `force-cache`
+
+      - : ブラウザーは、リクエストに一致するレスポンスを HTTP キャッシュから探します。
+
+        - 一致するものがあれば、新しいか古いかを問わず、それをキャッシュから返します。
+        - 一致するものがない場合、ブラウザーは通常のリクエストを行い、ダウンロードされたリソースでキャッシュを更新します。
+
+    - `only-if-cached`
+
+      - : ブラウザーは、リクエストに一致するレスポンスを HTTP キャッシュから探します。 {{experimental_inline}}
+
+        - 一致するものがあれば、新しいか古いかを問わず、それをキャッシュから返します。
+        - 一致するものがない場合は、ネットワークエラーを返します。
+
+    `"only-if-cached"` モードはリクエストの [`mode`](/ja/docs/Web/API/Request/mode) が `"same-origin"` である場合にのみ使用することができます。リクエストの `redirect` プロパティが `"follow"` で、かつ `"same-origin"` モードに違反していなければ、キャッシュされたリダイレクトに従います。
+
+- `credentials` {{optional_inline}}
+
+  - : ブラウザーがリクエストと共に資格情報を送るかどうか、また **`Set-Cookie`** レスポンスヘッダーを尊重するかどうかを制御します。資格情報とはクッキー、{{glossary("TLS")}} クライアント証明書、またはユーザー名とパスワードを格納した認証ヘッダーです。このオプションには以下の任意の値が指定できます。
+
+    - `omit`
+      - : リクエストで資格情報を送信したり、レスポンスに資格情報を含めたりしません。
+    - `same-origin`
+      - : 同一オリジンのリクエストに対してのみ資格情報を送信し、含めます。
+    - `include`
+      - : オリジン間リクエストであっても、常に資格情報を含めます。
+
+    オリジン間のリクエストに資格情報を含めると、{{glossary("CSRF")}} 攻撃を受けやすくなる可能性があります。そのため、`credentials` が `include` に設定されていても、{{httpheader("Access-Control-Allow-Credentials")}} をレスポンスに含めることで、サーバーも資格情報を含めることに同意する必要があります。さらに、この状況ではサーバーは{{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーでクライアントのオリジンのサーバーを明示的に指定しなければなりません（つまり、`*` は許可されません）。
+
+    詳しくは[資格情報を含める](/ja/docs/Web/API/Fetch_API/Using_Fetch#including_credentials)を参照してください。
+
+    既定値は `same-origin` です。
+
+- `headers` {{optional_inline}}
+
+  - : リクエストに追加したいヘッダーで、 {{domxref("Headers")}} オブジェクト、またはキーがヘッダー名で値がヘッダー値であるオブジェクトリテラルが入ります。
+
+    多くのヘッダーはブラウザーによって自動的に設定され、スクリプトによって設定することはできません。これらは{{glossary("Forbidden header name", "禁止ヘッダー名")}}と呼ばれています。
+
+    `mode` オプションが `no-cors` に設定されている場合、{{glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}のみを設定することができます。
+
+    詳しくは[ヘッダーの設定](/ja/docs/Web/API/Fetch_API/Using_Fetch#ヘッダーの設定)を参照してください。
+
+- `integrity`
+
+  - : このリクエストの[サブリソース完全性](/ja/docs/Web/Security/Subresource_Integrity)の値を保持します。
+
+    これは {{htmlelement("script")}} 要素に [`integrity`](/ja/docs/Web/HTML/Element/script#integrity) 属性を設定したときと同じように、リソースをフェッチしたときに調べられます。ブラウザーはフェッチされたリソースの {{glossary("Cryptographic_hash_function", "hash")}} を指定されたアルゴリズムで計算し、その結果が指定された値と一致しない場合、ネットワークエラーでフェッチリクエストを拒否します。
+
+    このオプションは `<hash-algo>-<hash-source>` という書式です。
+
+    - `<hash-algo>` は `sha256`、`sha384`、`sha512` のいずれかです。
+    - `<hash-source>` は指定したハッシュアルゴリズムでリソースをハッシュした結果の {{glossary("base64", "Base64 エンコーディング")}}です。
+
+    既定値は空文字列です。
+
+- `keepalive` {{optional_inline}}
+
+  - : 論理値。`true` の場合、リクエストが完了する前にリクエストを行ったページがアンロードされても、ブラウザーはリクエストを中止しません。これにより、セッションの終わりにアナリティクスを送信するときに、{{domxref("Navigator.sendBeacon()")}} の代わりとしてフェッチリクエストを機能させることができます。
+
+    キープアライブリクエストの本体サイズは 64 キロバイトに制限されています。
+
+    既定値は `false` です。
+
+- `method` {{optional_inline}}
+
+  - : [リクエストメソッド](/ja/docs/Web/HTTP/Methods)です。
+
+    既定値は {{httpmethod("GET")}} です。
+
+- `mode` {{optional_inline}}
+
+  - : 以下の値のいずれかです。
+
+    - `same-origin`
+      - : 完全にオリジン間リクエストを許可しません。
+    - `cors`
+      - : このリクエストがオリジン間リクエストであった場合、[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) の仕組みを使用します。
+    - `no-cors`
+      - : このリクエストは[単純リクエスト](/ja/docs/Web/HTTP/CORS#単純リクエスト)でなければならず、設定するヘッダーを {{glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}に制限し、メソッドを `GET`、`HEAD`、`POST` に制限します。
+    - `navigate`
+      - : HTML ナビゲーションでのみ使用します。`navigate` リクエストは文書間を移動するときにのみ作成されます。
+    - `websocket`
+      - : [WebSocket](/ja/docs/Web/API/WebSockets_API) 接続を確立するときのみ使用します。
+
+    詳しくは、[オリジン間リクエストを行う](/ja/docs/Web/API/Fetch_API/Using_Fetch#making_cross-origin_requests)を参照してください。
+
+    既定値は `cors` です。
+
+- `priority` {{optional_inline}}
+
+  - : 同じ種類の他のリクエストに対する、この読み込みリクエストの優先度を指定します。以下の文字列のいずれかでなければなりません。
+
+    - `high`
+      - : 同じ種類の他のリクエストに対する優先度の高いフェッチリクエスト。
+    - `low`
+      - : 同じ種類の他のリクエストと相対した、優先度の低いフェッチリクエスト。
+    - `auto`
+      - : 同じ種類の他のリクエストに対するフェッチリクエストの優先度を自動的に決定します。
+
+    既定値は `auto` です。
+
+- `redirect` {{optional_inline}}
+
+  - : サーバーが[リダイレクトステータス](/ja/docs/Web/HTTP/Status#リダイレクトメッセージ)でレスポンスした場合のブラウザー動作を決定します。以下の値のいずれかです。
+
+    - `follow`
+      - : 自動的にリダイレクトを行います。
+    - `error`
+      - : リダイレクトステータスを返ると、ネットワークエラーでプロミスを拒否します。
+    - `manual`
+      - : ほとんどすべてのフィールドがフィルターされたレスポンスを返し、サービスワーカーがそのレスポンスを格納して、後で再生できるようにします。
+
+    既定値は `follow` です。
+
+- `referrer` {{optional_inline}}
+
+  - : リクエストの {{httpheader("Referer")}} ヘッダーに使用する値を指定する文字列。以下のいずれかを指定します。
+
+    - 同じオリジンの相対 URL または絶対 URL
+      - : 参照するヘッダー `Referer` を指定された値に設定します。相対 URL はリクエストを行ったページの URL に対して相対的に解決されます。
+    - 空文字列
+      - : `Referer` ヘッダーを除外します。
+    - `about:client`
+      - : ヘッダー `Referer` にはリクエストのコンテキスト（例えばリクエストを行ったページの URL）の既定値を設定します。
+
+    既定値は `about:client` です。
+
+- `referrerPolicy` {{optional_inline}}
+  - : 文字列で、{{httpheader("Referer")}} ヘッダーのポリシーを設定します。このオプションの構文と意味づけは {{httpheader("Referrer-Policy")}} ヘッダーの場合とまったく同じです。
+- `signal` {{optional_inline}}
+  - : {{domxref("AbortSignal")}} です。このオプションを設定すると、対応する `AbortController` で {{domxref("AbortController.abort()", "abort()")}} を呼び出すことでリクエストを中止することができます。
+
+## 例
+
+### `fetch()` にオプションを渡す
+
+この例では、`method`、`body`、`headers` オプションを [`fetch()`](/ja/docs/Web/API/Window/fetch) メソッド呼び出しに直接渡しています。
+
+```js
+async function post() {
+  const response = await fetch("https://example.org/post", {
+    method: "POST",
+    body: JSON.stringify({ username: "example" }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  console.log(response.status);
+}
+```
+
+### `Request()` コンストラクターにオプションを渡す
+
+この例では {{domxref("Request")}} を作成し、そのコンストラクタに同じオプション設定をして `fetch()` にリクエストを渡します。
+
+```js
+async function post() {
+  const request = new Request("https://example.org/post", {
+    method: "POST",
+    body: JSON.stringify({ username: "example" }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const response = await fetch(request);
+
+  console.log(response.status);
+}
+```
+
+### `Request()` と `fetch()` の両方にオプションを渡す
+
+この例では {{domxref("Request")}} を作成し、 `method`、`headers`、`body` オプションをコンストラクタに渡します。そして、`body` と `referrer` オプションとともに `fetch()` にリクエストを渡します。
+
+```js
+async function post() {
+  const request = new Request("https://example.org/post", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ username: "example1" }),
+  });
+
+  const response = await fetch(request, {
+    body: JSON.stringify({ username: "example2" }),
+    referrer: "",
+  });
+
+  console.log(response.status);
+}
+```
+
+この場合、リクエストは以下のオプションと共に送信されます。
+
+- `method: "POST"`
+- `headers: {"Content-Type": "application/json"}`
+- `body: '{"username":"example2"}'`
+- `referrer: ""`
+
+## 仕様書
+
+{{Specifications}}
+
+## 関連情報
+
+- [フェッチの使用](/ja/docs/Web/API/Fetch_API/Using_Fetch)
+- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
+- [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS)
+- [HTTP](/ja/docs/Web/HTTP)
diff --git a/files/ja/web/api/resizeobserver/index.md b/files/ja/web/api/resizeobserver/index.md
index ccbf6f342a68d6..7fd5046005b9cd 100644
--- a/files/ja/web/api/resizeobserver/index.md
+++ b/files/ja/web/api/resizeobserver/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`ResizeObserver`** インターフェイスは、要素 ({{domxref('Element')}}) のコンテンツまたは境界ボックス、または {{domxref('SVGElement')}} のバウンディングボックスの大きさが変化したことを報告します。
 
-> **メモ:** コンテンツボックスは、コンテンツを配置できるボックスです。つまり、境界ボックスからパディングを引いたものです。境界とパディングの説明は[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)を参照してください。
+> [!NOTE]
+> コンテンツボックスは、コンテンツを配置できるボックスです。つまり、境界ボックスからパディングを引いたものです。境界とパディングの説明は[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)を参照してください。
 
 ## コンストラクター
 
diff --git a/files/ja/web/api/resizeobserverentry/borderboxsize/index.md b/files/ja/web/api/resizeobserverentry/borderboxsize/index.md
index 89a60897f89c1d..ef7bc0aa5ac552 100644
--- a/files/ja/web/api/resizeobserverentry/borderboxsize/index.md
+++ b/files/ja/web/api/resizeobserverentry/borderboxsize/index.md
@@ -19,7 +19,8 @@ l10n:
 - `inlineSize`
   - : 監視された要素の境界ボックスのインライン方向の長さ。書字方向 ({{cssxref("writing-mode")}}) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。
 
-> **メモ:** 書字方向やブロック・インラインの寸法についての詳しい説明は、[テキスト方向の操作](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)をご覧ください。
+> [!NOTE]
+> 書字方向やブロック・インラインの寸法についての詳しい説明は、[テキスト方向の操作](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)をご覧ください。
 
 ## 例
 
diff --git a/files/ja/web/api/resizeobserverentry/contentboxsize/index.md b/files/ja/web/api/resizeobserverentry/contentboxsize/index.md
index 5fc9da4d237945..7f7a71cf4c6a59 100644
--- a/files/ja/web/api/resizeobserverentry/contentboxsize/index.md
+++ b/files/ja/web/api/resizeobserverentry/contentboxsize/index.md
@@ -19,7 +19,8 @@ l10n:
 - `inlineSize`
   - : 監視された要素のコンテンツボックスのインライン方向の長さ。書字方向 ({{cssxref("writing-mode")}}) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。
 
-> **メモ:** 書字方向やブロック・インラインの寸法についての詳しい説明は、[テキスト方向の操作](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)をご覧ください。
+> [!NOTE]
+> 書字方向やブロック・インラインの寸法についての詳しい説明は、[テキスト方向の操作](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)をご覧ください。
 
 ## 例
 
diff --git a/files/ja/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md b/files/ja/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md
index 9a61ecbe7c802c..04c46b77a41eb8 100644
--- a/files/ja/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md
+++ b/files/ja/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md
@@ -21,7 +21,8 @@ l10n:
   - : 監視されている要素のコンテンツボックスのインライン方向の長さをデバイスピクセル単位で示します。
     書字方向 ({{cssxref("writing-mode")}}) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。
 
-> **メモ:** 書字方向やブロック・インラインの寸法についての詳しい情報は、[テキスト方向の操作](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)をご覧ください。
+> [!NOTE]
+> 書字方向やブロック・インラインの寸法についての詳しい情報は、[テキスト方向の操作](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)をご覧ください。
 
 ## 例
 
diff --git a/files/ja/web/api/resizeobserverentry/index.md b/files/ja/web/api/resizeobserverentry/index.md
index a2f67015e2d13e..32dcd56705de67 100644
--- a/files/ja/web/api/resizeobserverentry/index.md
+++ b/files/ja/web/api/resizeobserverentry/index.md
@@ -22,7 +22,8 @@ l10n:
 - {{domxref('ResizeObserverEntry.target')}} {{ReadOnlyInline}}
   - : 監視対象の {{domxref('Element')}} または {{domxref("SVGElement")}} オブジェクト。
 
-> **メモ:** コンテンツボックスは、コンテンツを配置できるボックスで、境界ボックスからパディングと境界の幅を除いたものを意味します。境界ボックスは、コンテンツ、パディング、境界を包含します。さらなる説明は[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)を参照してください。
+> [!NOTE]
+> コンテンツボックスは、コンテンツを配置できるボックスで、境界ボックスからパディングと境界の幅を除いたものを意味します。境界ボックスは、コンテンツ、パディング、境界を包含します。さらなる説明は[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)を参照してください。
 
 ## インスタンスメソッド
 
diff --git a/files/ja/web/api/response/body/index.md b/files/ja/web/api/response/body/index.md
index e9e5ac1aa95cb1..378279462adf8f 100644
--- a/files/ja/web/api/response/body/index.md
+++ b/files/ja/web/api/response/body/index.md
@@ -16,7 +16,8 @@ l10n:
 
 ストリームは[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)で、 {{domxref("ReadableStreamBYOBReader")}} を用いたゼロコピー移譲に対応しています。
 
-> **メモ:** 現在のブラウザーは、本体なしのレスポンス（例えば、 [`HEAD`](/ja/docs/Web/HTTP/Methods/HEAD) リクエストに対するレスポンスや、 [`204 No Content`](/ja/docs/Web/HTTP/Status/204) レスポンス）には `body` プロパティを `null` に設定するという仕様に実際には適合していません。
+> [!NOTE]
+> 現在のブラウザーは、本体なしのレスポンス（例えば、 [`HEAD`](/ja/docs/Web/HTTP/Methods/HEAD) リクエストに対するレスポンスや、 [`204 No Content`](/ja/docs/Web/HTTP/Status/204) レスポンス）には `body` プロパティを `null` に設定するという仕様に実際には適合していません。
 
 ## 例
 
diff --git a/files/ja/web/api/response/error_static/index.md b/files/ja/web/api/response/error_static/index.md
index 37f84cdba34fbb..b72bc4e62f7370 100644
--- a/files/ja/web/api/response/error_static/index.md
+++ b/files/ja/web/api/response/error_static/index.md
@@ -7,10 +7,12 @@ slug: Web/API/Response/error_static
 
 **`error()`** は {{domxref("Response")}} インターフェイスのメソッドで、ネットワークエラーに関連付けられた新規の `Response` オブジェクトを返します。
 
-> **メモ:** これは主に[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)に関連しています。エラーメソッドは、必要に応じてエラーを返す為に使用されます。
+> [!NOTE]
+> これは主に[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)に関連しています。エラーメソッドは、必要に応じてエラーを返す為に使用されます。
 > エラーレスポンスの {{domxref("Response.type","type")}} は `error` に設定されています。
 
-> **メモ:** "エラー" の `Response` は実際にスクリプトに公開されません。 {{domxref("fetch()")}} に対するそのようなレスポンスは、プロミスを拒否します。
+> [!NOTE]
+> "エラー" の `Response` は実際にスクリプトに公開されません。 {{domxref("fetch()")}} に対するそのようなレスポンスは、プロミスを拒否します。
 
 ## 構文
 
diff --git a/files/ja/web/api/response/formdata/index.md b/files/ja/web/api/response/formdata/index.md
index a1f6b917c04f78..093ffd9842072a 100644
--- a/files/ja/web/api/response/formdata/index.md
+++ b/files/ja/web/api/response/formdata/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`formData()`** は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} のストリームを取得して完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決されるプロミスを返します。
 
-> **メモ:** これは主に[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)に関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために `formData()` を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。
+> [!NOTE]
+> これは主に[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)に関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために `formData()` を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。
 
 ## 構文
 
diff --git a/files/ja/web/api/response/redirect_static/index.md b/files/ja/web/api/response/redirect_static/index.md
index b5d1fb4d21bca2..d266917ef66343 100644
--- a/files/ja/web/api/response/redirect_static/index.md
+++ b/files/ja/web/api/response/redirect_static/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Response/redirect_static
 
 **`redirect()`** は {{domxref("Response")}} インターフェイスのメソッドで、指定された URL へのリダイレクトをもたらす `Response` を返します。
 
-> **メモ:** これは主に[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) に関連しています。
+> [!NOTE]
+> これは主に[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) に関連しています。
 > 制御するサービスワーカーは、ページのリクエストに介入し、希望通りにリダイレクトすることができます。
 > もしサービスワーカーが上流に送信を行うと、実際に本当のリダイレクトが発生します。
 
diff --git a/files/ja/web/api/response/redirected/index.md b/files/ja/web/api/response/redirected/index.md
index 1defb6d4b4459d..eec1fe023e434b 100644
--- a/files/ja/web/api/response/redirected/index.md
+++ b/files/ja/web/api/response/redirected/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`redirected`** は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、このレスポンスがリダイレクトされたリクエストの結果であるかどうかを示します。
 
-> **メモ:** redirected に頼ってリダイレクトをフィルタリングしていると、偽造されたリダイレクトによって、コンテンツが期待通りに動作しなくなることが簡単に起こります。
+> [!NOTE]
+> redirected に頼ってリダイレクトをフィルタリングしていると、偽造されたリダイレクトによって、コンテンツが期待通りに動作しなくなることが簡単に起こります。
 > その代わり、 {{domxref("fetch()")}} を呼び出すときにフィルタリングを行うべきです。
 > これを行う例を示した[リダイレクトの禁止](#リダイレクトの禁止)を参照してください。
 
diff --git a/files/ja/web/api/response/type/index.md b/files/ja/web/api/response/type/index.md
index dd8705f55a059f..169bfc62c6780b 100644
--- a/files/ja/web/api/response/type/index.md
+++ b/files/ja/web/api/response/type/index.md
@@ -22,7 +22,8 @@ l10n:
 - `opaqueredirect`: フェッチリクエストが `redirect: "manual"` で行われました。
   このレスポンスの status は 0、headers は空、body は null、トレーラーは空です。
 
-> **メモ:** "error" レスポンスは実際にスクリプトに公開されることはありません。 {{domxref("fetch()")}} に対するそのようなレスポンスは、プロミスを拒否します。
+> [!NOTE]
+> "error" レスポンスは実際にスクリプトに公開されることはありません。 {{domxref("fetch()")}} に対するそのようなレスポンスは、プロミスを拒否します。
 
 ## 値
 
diff --git a/files/ja/web/api/rsahashedkeygenparams/index.md b/files/ja/web/api/rsahashedkeygenparams/index.md
index 5c5696d565c4a5..9a42b2c5714e19 100644
--- a/files/ja/web/api/rsahashedkeygenparams/index.md
+++ b/files/ja/web/api/rsahashedkeygenparams/index.md
@@ -21,7 +21,8 @@ l10n:
 
   - : 用いる[ダイジェスト関数](/ja/docs/Web/API/SubtleCrypto/digest)の名前を表す文字列です。`SHA-256`, `SHA-384`, `SHA-512` のうちのいずれかを指定できます。
 
-    > **警告:** 技術的にはここに `SHA-1` を指定することもできますが、SHA-1 は脆弱であるとみなされているため強く非推奨です。
+    > [!WARNING]
+    > 技術的にはここに `SHA-1` を指定することもできますが、SHA-1 は脆弱であるとみなされているため強く非推奨です。
 
 ## 例
 
diff --git a/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.md b/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
index 76d2514bba744e..d4e478c5170ad6 100644
--- a/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
+++ b/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
@@ -15,7 +15,8 @@ slug: Web/API/RTCPeerConnection/canTrickleIceCandidates
 
 論理値で、リモートピアーがトリクル ICE 候補を受け入れることができる場合は `true`、受け入れることができない場合は `false` となります。リモートピアーが確立されていない場合、この値は `null` となります。
 
-> **メモ:** このプロパティの値は、ローカルピアーが {{domxref("RTCPeerConnection.setRemoteDescription()") }}を呼び出した時点で決定されます。
+> [!NOTE]
+> このプロパティの値は、ローカルピアーが {{domxref("RTCPeerConnection.setRemoteDescription()") }}を呼び出した時点で決定されます。
 > ICE　エージェントがリモートピアーがトリクル ICE 候補に対応しているかどうかを判断するために、指定された説明が使用されます。
 
 ## 例
diff --git a/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.md b/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.md
index c755b3573ced70..9589aa72653d5b 100644
--- a/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.md
+++ b/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.md
@@ -47,7 +47,8 @@ new RTCPeerConnection(configuration);
         1 つの接続で使用される資格情報は 1 つだけですが、複数のアルゴリズムに資格情報を提供することで、状況によっては接続に成功する確率が向上する場合があります。
         詳しくは、[資格情報の使用](#資格情報の使用)を参照してください。
 
-        > **メモ:** この構成オプションは、最初に指定した後は変更できません。いったん資格情報が設定されると、今後 {{domxref("RTCPeerConnection.setConfiguration()")}} を呼び出す際には、このプロパティは無視されます。
+        > [!NOTE]
+        > この構成オプションは、最初に指定した後は変更できません。いったん資格情報が設定されると、今後 {{domxref("RTCPeerConnection.setConfiguration()")}} を呼び出す際には、このプロパティは無視されます。
 
     - `iceCandidatePoolSize` {{optional_inline}}
 
@@ -55,7 +56,8 @@ new RTCPeerConnection(configuration);
         既定値は 0 （候補の先読みをしない）です。
         接続を試みる前に ICE エージェントに ICE 候補のフェッチを開始させ、 {{domxref("RTCPeerConnection.setLocalDescription()")}} が呼ばれたときにすでに検査できるようにすると、よりすばやく接続できるようになる場合があります。
 
-        > **メモ:** ICE 候補者プールのサイズを変更すると、ICE の収集が開始されるきっかけとなる場合があります。
+        > [!NOTE]
+        > ICE 候補者プールのサイズを変更すると、ICE の収集が開始されるきっかけとなる場合があります。
 
     - `iceServers` {{optional_inline}}
       - : ICE エージェントが使用するサーバーを記述した {{domxref("RTCIceServer")}} オブジェクトの配列です。
diff --git a/files/ja/web/api/screen/lockorientation/index.md b/files/ja/web/api/screen/lockorientation/index.md
index d8d321f5fda38b..b1f384d5e90564 100644
--- a/files/ja/web/api/screen/lockorientation/index.md
+++ b/files/ja/web/api/screen/lockorientation/index.md
@@ -7,9 +7,11 @@ slug: Web/API/Screen/lockOrientation
 
 **`lockOrientation()`** は {{DOMxRef("Screen")}} インターフェイスのメソッドで、画面を特定の方向にロックします。
 
-> **警告:** この機能は非推奨であり、仕様をさけてください。代わりに {{DOMxRef("ScreenOrientation.lock()")}} メソッドを使用してください。
+> [!WARNING]
+> この機能は非推奨であり、仕様をさけてください。代わりに {{DOMxRef("ScreenOrientation.lock()")}} メソッドを使用してください。
 
-> **メモ:** このメソッドはインストールされたウェブアプリまたは[全画面モード](/ja/docs/Web/API/Fullscreen_API)のウェブページでのみ動作します。
+> [!NOTE]
+> このメソッドはインストールされたウェブアプリまたは[全画面モード](/ja/docs/Web/API/Fullscreen_API)のウェブページでのみ動作します。
 
 ## 構文
 
@@ -44,7 +46,8 @@ lockOrientation(orientation);
     - `default`
       - : 端末に自然な向きによって `portrait-primary` または `landscape-primary` が選ばれます。たとえば、ディスプレイの解像度が 1280\*800 なら、 `default` は `landscape` になるでしょうし、800\*1280 なら、 `default` は `portrait` になるでしょう。
 
-> **メモ:** 複数のロックが同時に指定されることがあります。そのため、 1 つの向きにのみロックがセットされた場合には、画面の向きはロックが解除されるまで決して変更されません。もしそうでなければ、端末がロックされた向きを含む複数の向きの間で、画面の向きが 1 つの向きから別の向きへと移り変わってしまうことになります。
+> [!NOTE]
+> 複数のロックが同時に指定されることがあります。そのため、 1 つの向きにのみロックがセットされた場合には、画面の向きはロックが解除されるまで決して変更されません。もしそうでなければ、端末がロックされた向きを含む複数の向きの間で、画面の向きが 1 つの向きから別の向きへと移り変わってしまうことになります。
 
 ### 返値
 
diff --git a/files/ja/web/api/screen/unlockorientation/index.md b/files/ja/web/api/screen/unlockorientation/index.md
index 700e3ba0af769b..01ce1a4a98989f 100644
--- a/files/ja/web/api/screen/unlockorientation/index.md
+++ b/files/ja/web/api/screen/unlockorientation/index.md
@@ -7,9 +7,11 @@ slug: Web/API/Screen/unlockOrientation
 
 **`Screen.unlockOrientation()`** メソッドは、ページやアプリによって設定されているすべての画面のロックを除去します。代わりに {{DOMxRef("ScreenOrientation.unlock()")}} を使用してください。
 
-> **警告:** この機能は非推奨であり、代わりに {{DOMxRef("ScreenOrientation.unlock()")}} メソッドを使用してください。
+> [!WARNING]
+> この機能は非推奨であり、代わりに {{DOMxRef("ScreenOrientation.unlock()")}} メソッドを使用してください。
 
-> **メモ:** このメソッドはインストールされたウェブアプリまたは[全画面モード](/ja/docs/Web/Guide/DOM/Using_full_screen_mode)のウェブページでのみ動作します。
+> [!NOTE]
+> このメソッドはインストールされたウェブアプリまたは[全画面モード](/ja/docs/Web/Guide/DOM/Using_full_screen_mode)のウェブページでのみ動作します。
 
 ## 構文
 
diff --git a/files/ja/web/api/screen_capture_api/using_screen_capture/index.md b/files/ja/web/api/screen_capture_api/using_screen_capture/index.md
index 2de99f9a7263a7..cf13b8e9664403 100644
--- a/files/ja/web/api/screen_capture_api/using_screen_capture/index.md
+++ b/files/ja/web/api/screen_capture_api/using_screen_capture/index.md
@@ -9,7 +9,8 @@ l10n:
 
 この記事では、画面キャプチャ API とその {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} メソッドを使用して、 [WebRTC](/ja/docs/Web/API/WebRTC_API) 会議セッション中に画面の一部または全部をストリーミング、録音、共有用に取得する方法を検証していきます。
 
-> **メモ:** 最近のバージョンの [WebRTC adapter.js shim](https://github.com/webrtcHacks/adapter) には `getDisplayMedia()` の実装が含まれており、画面共有をサポートしているが現在の標準 API を実装していないブラウザーで画面共有を可能にすることができるので便利かもしれません。これは、少なくとも Chrome、Edge、Firefox で動作します。
+> [!NOTE]
+> 最近のバージョンの [WebRTC adapter.js shim](https://github.com/webrtcHacks/adapter) には `getDisplayMedia()` の実装が含まれており、画面共有をサポートしているが現在の標準 API を実装していないブラウザーで画面共有を可能にすることができるので便利かもしれません。これは、少なくとも Chrome、Edge、Firefox で動作します。
 
 ## 画面の内容のキャプチャ
 
@@ -90,11 +91,13 @@ options オブジェクトに渡す `video` と `audio` オブジェクトには
 
 キャプチャするコンテンツが選択されるまで、どのような制約も適用されません。制約は、結果のストリームに表示される内容を変更します。たとえば、動画に {{domxref("MediaTrackConstraints.width", "width")}} 制約を指定すると、ユーザーが共有する領域を選択した後に動画を拡大縮小することによって適用されます。ソース自体のサイズに制約を設けるものではありません。
 
-> **メモ:** 制約によって、画面共有 API でキャプチャ可能なソースのリストが変更されることは決してありません。このため、ウェブアプリケーションでは、1 つの項目が残るまでソースリストを制限することによって、ユーザーに特定のコンテンツを共有するように強制することはできません。
+> [!NOTE]
+> 制約によって、画面共有 API でキャプチャ可能なソースのリストが変更されることは決してありません。このため、ウェブアプリケーションでは、1 つの項目が残るまでソースリストを制限することによって、ユーザーに特定のコンテンツを共有するように強制することはできません。
 
 表示のキャプチャが行われている間、画面共有を行っているマシンは、共有が行われていることをユーザーに認識させるために、何らかのインジケーターを表示します。
 
-> **メモ:** プライバシーとセキュリティ上の理由から、画面共有のソースは {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} を使って列挙することができないようになっています。これに関連して、`getDisplayMedia()` で利用できるソースに変更があった場合も、 {{domxref("MediaDevices/devicechange_event", "devicechange")}} イベントは送信されません。
+> [!NOTE]
+> プライバシーとセキュリティ上の理由から、画面共有のソースは {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} を使って列挙することができないようになっています。これに関連して、`getDisplayMedia()` で利用できるソースに変更があった場合も、 {{domxref("MediaDevices/devicechange_event", "devicechange")}} イベントは送信されません。
 
 ### 共有音声のキャプチャ
 
diff --git a/files/ja/web/api/scriptprocessornode/audioprocess_event/index.md b/files/ja/web/api/scriptprocessornode/audioprocess_event/index.md
index ec3850b245d7ae..3b95fc74418a97 100644
--- a/files/ja/web/api/scriptprocessornode/audioprocess_event/index.md
+++ b/files/ja/web/api/scriptprocessornode/audioprocess_event/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("ScriptProcessorNode")}} インターフェイスの `audioprocess` イベントは、スクリプトプロセッサーの入力バッファーが処理される準備ができた時発火します。
 
-> **メモ:** この機能は [AudioWorklets](/ja/docs/Web/API/AudioWorklet) および {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
+> [!NOTE]
+> この機能は [AudioWorklets](/ja/docs/Web/API/AudioWorklet) および {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
 
 このイベントはキャンセル不可で、バブルしません。
 
diff --git a/files/ja/web/api/scriptprocessornode/buffersize/index.md b/files/ja/web/api/scriptprocessornode/buffersize/index.md
index 2911aef8aff744..3660cbe556e12d 100644
--- a/files/ja/web/api/scriptprocessornode/buffersize/index.md
+++ b/files/ja/web/api/scriptprocessornode/buffersize/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("ScriptProcessorNode")}} インターフェイスの `bufferSize` プロパティは、入力と出力両方のバッファーサイズを表す整数をサンプルフレーム数単位で返します。この値は `256` 〜 `16384` の範囲の 2 のべき乗を取りえます。
 
-> **メモ:** この機能は [AudioWorklets](/ja/docs/Web/API/AudioWorklet) および {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
+> [!NOTE]
+> この機能は [AudioWorklets](/ja/docs/Web/API/AudioWorklet) および {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/scriptprocessornode/index.md b/files/ja/web/api/scriptprocessornode/index.md
index eadb1efe63bcfa..b65b08f8bce607 100644
--- a/files/ja/web/api/scriptprocessornode/index.md
+++ b/files/ja/web/api/scriptprocessornode/index.md
@@ -9,7 +9,8 @@ slug: Web/API/ScriptProcessorNode
 
 {{InheritanceDiagram}}
 
-> **メモ:** この機能は [AudioWorklets](/ja/docs/Web/API/AudioWorklet) と {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
+> [!NOTE]
+> この機能は [AudioWorklets](/ja/docs/Web/API/AudioWorklet) と {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。
 
 `ScriptProcessorNode` インターフェイスは {{domxref("AudioNode")}} 音声処理モジュールであり、入力音声データを含む 2 つのバッファーと処理後の出力音声データを含む 1 つのバッファーにリンクされています。入力バッファーに新しいデータが入るたびに {{domxref("AudioProcessingEvent")}} インターフェイスを実装したイベントがオブジェクトに送られ、出力バッファーがデータでいっぱいになるとイベントハンドラーは終了します。
 
diff --git a/files/ja/web/api/selection/index.md b/files/ja/web/api/selection/index.md
index e2baa1a33b0cc4..3a7a50c13a4773 100644
--- a/files/ja/web/api/selection/index.md
+++ b/files/ja/web/api/selection/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Selection
 
 ユーザーは、左から右（文書順）または右から左（文書と逆順）に選択することができます。アンカー (**_anchor_**) はユーザーが選択を開始した場所、フォーカス (**_focus_**) はユーザーが選択を終了した場所である。デスクトップマウスで選択する場合、アンカーはマウスボタンを押した場所に置かれ、フォーカスはマウスボタンを離した場所に置かれます。
 
-> **メモ:** アンカーとフォーカスは、選択範囲の開始位置と終了位置と混同しないようにしましょう。アンカーはフォーカスの前に置かれることもあればその逆もあり、 選択の方向によって異なります。
+> [!NOTE]
+> アンカーとフォーカスは、選択範囲の開始位置と終了位置と混同しないようにしましょう。アンカーはフォーカスの前に置かれることもあればその逆もあり、 選択の方向によって異なります。
 
 ## プロパティ
 
@@ -102,7 +103,8 @@ Safari と Chrome は（Firefox と異なり）現在、プログラムで選択
 2. 選択 API のメソッドが呼び出され、編集ホスト内の選択範囲に新たな選択範囲が発生します。
 3. その後、フォーカスは編集ホストに移ります。
 
-> **メモ:** 選択 API のメソッドは編集ホストにのみフォーカスを移動でき、他のフォーカス可能な要素には移動できません（例: {{HTMLElement("a")}}）。
+> [!NOTE]
+> 選択 API のメソッドは編集ホストにのみフォーカスを移動でき、他のフォーカス可能な要素には移動できません（例: {{HTMLElement("a")}}）。
 
 上記の動作は、以下のメソッドを使用して選択された場合にも適用されます。
 
@@ -138,7 +140,8 @@ Safari と Chrome は（Firefox と異なり）現在、プログラムで選択
 
   - : 選択範囲の _フォーカス_ は、選択範囲の終点です。マウスで選択する場合、フォーカスは文書内でマウスボタンが離された位置にあります。ユーザーがマウスやキーボードを使用して選択範囲を変更すると、フォーカスは移動した選択範囲の終点になります。
 
-    > **メモ:** これは、{{DOMxRef("document.activeElement")}}が返すような、文書のフォーカスされた要素と同じものではありません。
+    > [!NOTE]
+    > これは、{{DOMxRef("document.activeElement")}}が返すような、文書のフォーカスされた要素と同じものではありません。
 
 - **範囲**
 
diff --git a/files/ja/web/api/selection_api/index.md b/files/ja/web/api/selection_api/index.md
index f6c0c325cddf96..06f929d26d22c6 100644
--- a/files/ja/web/api/selection_api/index.md
+++ b/files/ja/web/api/selection_api/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{DefaultAPISidebar("Selection API")}}
 
-> **メモ:** この API は [Web Workers](/ja/docs/Web/API/Web_Workers_API) では _使用できません_。({{domxref("WorkerNavigator")}} 経由では公開されていません)
+> [!NOTE]
+> この API は [Web Workers](/ja/docs/Web/API/Web_Workers_API) では _使用できません_。({{domxref("WorkerNavigator")}} 経由では公開されていません)
 
 **Selection API** は、開発者がドキュメントのユーザーに選択されている部分にアクセスしたり操作したりできるようにします。
 
diff --git a/files/ja/web/api/server-sent_events/index.md b/files/ja/web/api/server-sent_events/index.md
index ce3f079ef1209f..5d9f871ef30ad9 100644
--- a/files/ja/web/api/server-sent_events/index.md
+++ b/files/ja/web/api/server-sent_events/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Server-sent_events
 
 {{AvailableInWorkers}}
 
-> **メモ:** Firefox は現在、サービスワーカーでのサーバー送信イベントの使用に対応していません（専用ワーカーと共有ワーカーでは対応しています）。 [Firefox バグ 1681218](https://bugzil.la/1681218) を参照してください。
+> [!NOTE]
+> Firefox は現在、サービスワーカーでのサーバー送信イベントの使用に対応していません（専用ワーカーと共有ワーカーでは対応しています）。 [Firefox バグ 1681218](https://bugzil.la/1681218) を参照してください。
 
 ## 概念と使用方法
 
diff --git a/files/ja/web/api/server-sent_events/using_server-sent_events/index.md b/files/ja/web/api/server-sent_events/using_server-sent_events/index.md
index 53a64e52dd699d..37c5188b3893f7 100644
--- a/files/ja/web/api/server-sent_events/using_server-sent_events/index.md
+++ b/files/ja/web/api/server-sent_events/using_server-sent_events/index.md
@@ -96,7 +96,8 @@ while (true) {
 上記のコードは、イベント種別が "ping" のイベントを毎秒生成します。それぞれのイベントのデータは、 JSON オブジェクトで、イベントが生成された時刻を ISO 8601 形式のタイムスタンプで表します。またランダムな間隔で、単純なメッセージ（イベント種別なし）を送信します。
 ループは接続状態にかかわらず実行し続けられますので、接続が閉じられたとき（例えばクライアントがページを閉じたとき）にループから脱出するためのチェックが含まれています。
 
-> **メモ:** この記事にあるコードを使用した完全な例が GitHub にあります。 [Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events) を参照してください。
+> [!NOTE]
+> この記事にあるコードを使用した完全な例が GitHub にあります。 [Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events) を参照してください。
 
 ## エラー処理
 
@@ -120,7 +121,8 @@ evtSource.close();
 
 イベントストリームは単純なテキストデータのストリームで、 [UTF-8](/ja/docs/Glossary/UTF-8) でエンコードされていなければなりません。イベントストリームのメッセージは、 2 つの改行文字で区切られます。行の先頭の文字がコロンであった場合はコメントとみなされ、無視されます。
 
-> **メモ:** コメント行を使用して、接続がタイムアウトになることを防ぐことができます。サーバーは接続を維持するために、定期的にコメントを送信することがあります。
+> [!NOTE]
+> コメント行を使用して、接続がタイムアウトになることを防ぐことができます。サーバーは接続を維持するために、定期的にコメントを送信することがあります。
 
 それぞれのメッセージは、そのメッセージのフィールドを列挙した 1 行以上のテキストで構成されています。各フィールドは、フィールド名、コロン、そのフィールドの値のテキストデータで表現されます。
 
@@ -139,7 +141,8 @@ evtSource.close();
 
 他のフィールド名は、すべて無視されます。
 
-> **メモ:** 行にコロンが含まれない場合は行全体がフィールド名とし、値は空文字列として扱います。
+> [!NOTE]
+> 行にコロンが含まれない場合は行全体がフィールド名とし、値は空文字列として扱います。
 
 ### 例
 
diff --git a/files/ja/web/api/service_worker_api/index.md b/files/ja/web/api/service_worker_api/index.md
index 45f3d56f5cf1b1..e7f647c44c201a 100644
--- a/files/ja/web/api/service_worker_api/index.md
+++ b/files/ja/web/api/service_worker_api/index.md
@@ -20,11 +20,14 @@ l10n:
 
 サービスワーカーはセキュリティ上の理由から、 HTTPS 通信でのみ動作します。最も重要なことは、HTTP 接続は{{Glossary("MitM", "中間者")}}攻撃による悪意のあるコード注入の影響を受けやすく、こうした強力な API へのアクセスを許可されると、その攻撃はより悪いものになる可能性があるということです。Firefox では[プライベートブラウジングモード](https://support.mozilla.org/ja/kb/private-browsing-use-firefox-without-history)でサービスワーカー API を利用することはできません。
 
-> **メモ:** Firefox では、テストのためにサービスワーカーを HTTP (安全ではない) 上で実行することができます。これは、 **HTTP による サービスワーカー を有効化 (ツールボックスを開いたとき)** オプションを Firefox Devtools 設定メニューでチェックするだけです。
+> [!NOTE]
+> Firefox では、テストのためにサービスワーカーを HTTP (安全ではない) 上で実行することができます。これは、 **HTTP による サービスワーカー を有効化 (ツールボックスを開いたとき)** オプションを Firefox Devtools 設定メニューでチェックするだけです。
 
-> **メモ:** サービスワーカーは [AppCache](https://alistapart.com/article/application-cache-is-a-douchebag/) のような、この分野における以前の試みより勝っています。以前のものは、あなたがしようとしていることを想定していなかったり、想定が正しくなかったときに壊れたりしていたのに対して、サービスワーカーはあなたがすべてを細かく制御することができるためです。
+> [!NOTE]
+> サービスワーカーは [AppCache](https://alistapart.com/article/application-cache-is-a-douchebag/) のような、この分野における以前の試みより勝っています。以前のものは、あなたがしようとしていることを想定していなかったり、想定が正しくなかったときに壊れたりしていたのに対して、サービスワーカーはあなたがすべてを細かく制御することができるためです。
 
-> **メモ:** サービスワーカーは[プロミス](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)を頻繁に使用して、レスポンスが来るのを待ってから、成功または失敗のアクションで応答します。プロミスのアーキテクチャはこの領域に対して理想的なものです。
+> [!NOTE]
+> サービスワーカーは[プロミス](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)を頻繁に使用して、レスポンスが来るのを待ってから、成功または失敗のアクションで応答します。プロミスのアーキテクチャはこの領域に対して理想的なものです。
 
 ### 登録
 
diff --git a/files/ja/web/api/service_worker_api/using_service_workers/index.md b/files/ja/web/api/service_worker_api/using_service_workers/index.md
index ae949fff70d96c..8beec5751e8403 100644
--- a/files/ja/web/api/service_worker_api/using_service_workers/index.md
+++ b/files/ja/web/api/service_worker_api/using_service_workers/index.md
@@ -89,7 +89,8 @@ registerServiceWorker();
 
 1 つのサービスワーカーで、多数のページを制御することができます。スコープ内のページが読み込まれるたびに、サービスワーカーはそのページにインストールされて動作します。そのため、サービスワーカースクリプト内でのグローバル変数の扱いには注意が必要だということを心にとどめておいてください。各ページが固有のワーカーを持つわけではありません。
 
-> **メモ:** サービスワーカーの良いところは、以上で見てきたような機能の検出をすることで、サービスワーカーに対応していないブラウザーでもオンラインで期待通りの流儀でアプリを使用することができることです。
+> [!NOTE]
+> サービスワーカーの良いところは、以上で見てきたような機能の検出をすることで、サービスワーカーに対応していないブラウザーでもオンラインで期待通りの流儀でアプリを使用することができることです。
 
 #### サービスワーカーの登録に失敗する理由
 
@@ -142,7 +143,8 @@ self.addEventListener("install", (event) => {
 
 > **メモ:** [ウェブストレージ API (`localStorage`)](/ja/docs/Web/API/Web_Storage_API) はサービスワーカーキャッシュと同じように動作しますが、同期処理であるため、サービスワーカー内では許可されていません。
 
-> **メモ:** 必要であれば、 [IndexedDB](/ja/docs/Web/API/IndexedDB_API) をサービスワーカー内でデータ保存のために使用することができます。
+> [!NOTE]
+> 必要であれば、 [IndexedDB](/ja/docs/Web/API/IndexedDB_API) をサービスワーカー内でデータ保存のために使用することができます。
 
 ### リクエストに対するカスタムレスポンス
 
diff --git a/files/ja/web/api/serviceworker/postmessage/index.md b/files/ja/web/api/serviceworker/postmessage/index.md
index c7ba8a18466bd7..2829d66399dd1e 100644
--- a/files/ja/web/api/serviceworker/postmessage/index.md
+++ b/files/ja/web/api/serviceworker/postmessage/index.md
@@ -37,7 +37,8 @@ postMessage(message, transfer)
 
     移譲可能なオブジェクトとは、{{jsxref("ArrayBuffer")}}、{{domxref("MessagePort")}}、{{domxref("ImageBitmap")}} などのクラスのインスタンスであり、移譲可能なオブジェクトです。`transfer` の値として、`null` は受け入れられません。
 
-> **メモ:** パラメータ `options` と `transfer` は、同時に使用することはできません。
+> [!NOTE]
+> パラメータ `options` と `transfer` は、同時に使用することはできません。
 
 ### 返値
 
diff --git a/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md
index 5251dd2d2c5f38..749c5665f306b0 100644
--- a/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md
@@ -34,7 +34,8 @@ onpushsubscriptionchange = (event) => {};
 
 サービスワーカーとアプリサーバー間で加入情報を同期するのに別の方法を使用することを検討するか、 `fetch()` を使用するコードが、データ交換の試行が失敗した場合を処理するのに十分堅牢であることを確認してください。
 
-> **メモ:** この仕様書の早期の草稿では、このイベントは {{domxref("PushSubscription")}} が期限切れになった時に送信されるよう定義されていました。
+> [!NOTE]
+> この仕様書の早期の草稿では、このイベントは {{domxref("PushSubscription")}} が期限切れになった時に送信されるよう定義されていました。
 
 ## 例
 
diff --git a/files/ja/web/api/serviceworkerregistration/active/index.md b/files/ja/web/api/serviceworkerregistration/active/index.md
index a6cd76f965357a..ee35c3d6e7ab39 100644
--- a/files/ja/web/api/serviceworkerregistration/active/index.md
+++ b/files/ja/web/api/serviceworkerregistration/active/index.md
@@ -11,9 +11,11 @@ l10n:
 
 クライアントの URL が登録のスコープ内にある場合、アクティブワーカーは {{domxref("Client")}} を制御します（{{domxref("ServiceWorkerContainer.register")}} が最初に呼び出されたときに設定された `scope` オプション）。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
-> **メモ:** アクティブワーカーが `activating` になると、ランタイムスクリプトエラーやアクティブワーカーの強制終了でもアクティブワーカーが `activated` になります。
+> [!NOTE]
+> アクティブワーカーが `activating` になると、ランタイムスクリプトエラーやアクティブワーカーの強制終了でもアクティブワーカーが `activated` になります。
 
 ## 値
 
diff --git a/files/ja/web/api/serviceworkerregistration/index.md b/files/ja/web/api/serviceworkerregistration/index.md
index 9a0aad74532d98..66ed38b3d14161 100644
--- a/files/ja/web/api/serviceworkerregistration/index.md
+++ b/files/ja/web/api/serviceworkerregistration/index.md
@@ -11,7 +11,8 @@ l10n:
 
 サービスワーカー登録の存続期間は、対応するサービスワーカークライアントの存続期間内でそれらを表す `ServiceWorkerRegistration` オブジェクトの存続期間を超えています。 ブラウザーは、アクティブな `ServiceWorkerRegistration` オブジェクトの永続的なリストを維持します。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/serviceworkerregistration/installing/index.md b/files/ja/web/api/serviceworkerregistration/installing/index.md
index 174090a9b4d9b6..2065b8f8eee68b 100644
--- a/files/ja/web/api/serviceworkerregistration/installing/index.md
+++ b/files/ja/web/api/serviceworkerregistration/installing/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`installing`** は {{domxref("ServiceWorkerRegistration")}} インターフェイスのプロパティで、{{domxref("ServiceWorker.state")}} がインストール中 (`installing`) のサービスワーカーを返します。 このプロパティは、最初は `null` に設定されています。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 値
 
diff --git a/files/ja/web/api/serviceworkerregistration/scope/index.md b/files/ja/web/api/serviceworkerregistration/scope/index.md
index b6327d9f0d7bbb..87b6ca4ae1b807 100644
--- a/files/ja/web/api/serviceworkerregistration/scope/index.md
+++ b/files/ja/web/api/serviceworkerregistration/scope/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`scope`** は {{domxref("ServiceWorkerRegistration")}} インターフェイスの読み取り専用プロパティで、サービスワーカー登録の一意の識別子を返します。 サービスワーカーは、 {{domxref("ServiceWorker")}} を登録する文書と同じオリジンにある必要があります。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 値
 
diff --git a/files/ja/web/api/serviceworkerregistration/shownotification/index.md b/files/ja/web/api/serviceworkerregistration/shownotification/index.md
index 77945e6bbe16fa..63a1db27c79245 100644
--- a/files/ja/web/api/serviceworkerregistration/shownotification/index.md
+++ b/files/ja/web/api/serviceworkerregistration/shownotification/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `showNotification()` は {{domxref("ServiceWorkerRegistration")}} インターフェイスのメソッドで、アクティブなサービスワーカー上で通知を作成します。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 構文
 
diff --git a/files/ja/web/api/serviceworkerregistration/unregister/index.md b/files/ja/web/api/serviceworkerregistration/unregister/index.md
index cec5e14ca26da5..32244ca577e5fa 100644
--- a/files/ja/web/api/serviceworkerregistration/unregister/index.md
+++ b/files/ja/web/api/serviceworkerregistration/unregister/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`unregister()`** は {{domxref("ServiceWorkerRegistration")}} インターフェイスのメソッドで、サービスワーカーの登録を解除し、プロミス ({{jsxref("Promise")}}) を返します。 登録が見つからなかった場合、プロミスは `false` に解決されます。 それ以外の場合は、登録解除したかどうかに関係なく、`true` に解決されます（誰かが同じスコープで {{domxref("ServiceWorkerContainer.register()")}} を同時に呼び出した場合は、登録解除されない場合があります）。 サービスワーカーは、登録解除される前に進行中の操作を完了します。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 構文
 
diff --git a/files/ja/web/api/serviceworkerregistration/update/index.md b/files/ja/web/api/serviceworkerregistration/update/index.md
index a4aa78e1f401c3..d1f3616d4cb462 100644
--- a/files/ja/web/api/serviceworkerregistration/update/index.md
+++ b/files/ja/web/api/serviceworkerregistration/update/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`update()`** は {{domxref("ServiceWorkerRegistration")}} インターフェイスのメソッドで、サービスワーカーの更新を試みます。 ワーカーのスクリプト URL を読み取り、新しいワーカーが現在のワーカーとバイト単位で同一でない場合は、新しいワーカーをインストールします。 前回の読み取りが 24 時間以上前であった場合、ワーカーの読み取り時にブラウザーのキャッシュをバイパスします。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 構文
 
diff --git a/files/ja/web/api/serviceworkerregistration/waiting/index.md b/files/ja/web/api/serviceworkerregistration/waiting/index.md
index 226d030418034e..cae3e58002f314 100644
--- a/files/ja/web/api/serviceworkerregistration/waiting/index.md
+++ b/files/ja/web/api/serviceworkerregistration/waiting/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`waiting`** は {{domxref("ServiceWorkerRegistration")}} インターフェイスのプロパティで、サービスワーカーのうち {{domxref("ServiceWorker.state")}} がインストール済み (`installed`) のものを返します。 このプロパティは、最初は `null` に設定されています。
 
-> **メモ:** この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> この機能は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 値
 
diff --git a/files/ja/web/api/setinterval/index.md b/files/ja/web/api/setinterval/index.md
index faad246c61085e..7032fe289170f1 100644
--- a/files/ja/web/api/setinterval/index.md
+++ b/files/ja/web/api/setinterval/index.md
@@ -41,7 +41,8 @@ setInterval(func, delay, arg0, arg1, /* … ,*/ argN)
 
 `setInterval()` と {{domxref("setTimeout()")}} は同じ ID プールを共有しており、 `clearInterval()` と {{domxref("clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。
 
-> **メモ:** 引数 `delay` は、符号付き 32 ビット整数に変換されます。 IDL における符号付き整数の定義によって、`delay` は事実上 2147483647ms に制限されます。
+> [!NOTE]
+> 引数 `delay` は、符号付き 32 ビット整数に変換されます。 IDL における符号付き整数の定義によって、`delay` は事実上 2147483647ms に制限されます。
 
 ## 例
 
diff --git a/files/ja/web/api/sharedworker/index.md b/files/ja/web/api/sharedworker/index.md
index 484e75e1f7a238..c07ee6d9ecee5c 100644
--- a/files/ja/web/api/sharedworker/index.md
+++ b/files/ja/web/api/sharedworker/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`SharedWorker`** インターフェイスは、ウィンドウ、iframe、ワーカーなど複数の閲覧コンテキストからアクセスできる、特定の種類のワーカーを表します。これらは専用ワーカーとは異なるインターフェイスを実装しており、異なるグローバルコンテキストである {{domxref("SharedWorkerGlobalScope")}} を持ちます。
 
-> **メモ:** SharedWorkerが複数の閲覧コンテキストからアクセスできる場合、それらの閲覧コンテキストはすべて、まったく同じオリジン（同じプロトコル、ホスト、ポート）を共有している必要があります。
+> [!NOTE]
+> SharedWorkerが複数の閲覧コンテキストからアクセスできる場合、それらの閲覧コンテキストはすべて、まったく同じオリジン（同じプロトコル、ホスト、ポート）を共有している必要があります。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/sharedworker/sharedworker/index.md b/files/ja/web/api/sharedworker/sharedworker/index.md
index 092091a63a2c91..a8129c14c1c40b 100644
--- a/files/ja/web/api/sharedworker/sharedworker/index.md
+++ b/files/ja/web/api/sharedworker/sharedworker/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`SharedWorker()`** コンストラクターは、指定された URL でスクリプトを実行する {{domxref("SharedWorker")}} オブジェクトを作成します。このスクリプトは[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy)に従わなければなりません。
 
-> **メモ:** ブラウザーメーカー間で、 data URL が同じ元であるかどうかについての見解の相違があります。 Firefox 10.0 以降では data URL を受け入れることができますが、他のすべてのブラウザーではその限りではありません。
+> [!NOTE]
+> ブラウザーメーカー間で、 data URL が同じ元であるかどうかについての見解の相違があります。 Firefox 10.0 以降では data URL を受け入れることができますが、他のすべてのブラウザーではその限りではありません。
 
 ## 構文
 
diff --git a/files/ja/web/api/sharedworkerglobalscope/close/index.md b/files/ja/web/api/sharedworkerglobalscope/close/index.md
index 3d893c5183e55f..6c140758e3f8b5 100644
--- a/files/ja/web/api/sharedworkerglobalscope/close/index.md
+++ b/files/ja/web/api/sharedworkerglobalscope/close/index.md
@@ -33,7 +33,8 @@ close();
 
 `close()` と `self.close()` は事実上同じです。どちらもワーカーの内部スコープから `close()` が呼び出されることを表しています。
 
-> **メモ:** メインスレッドからワーカーを停止する方法もあります。{{domxref("Worker.terminate")}} メソッドです。
+> [!NOTE]
+> メインスレッドからワーカーを停止する方法もあります。{{domxref("Worker.terminate")}} メソッドです。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/speculation_rules_api/index.md b/files/ja/web/api/speculation_rules_api/index.md
index 390e942e381229..9e014b133d6e4c 100644
--- a/files/ja/web/api/speculation_rules_api/index.md
+++ b/files/ja/web/api/speculation_rules_api/index.md
@@ -11,7 +11,8 @@ l10n:
 
 投機ルール API は、広く利用できる [`<link rel="prefetch">`](/ja/docs/Web/HTML/Attributes/rel/prefetch) 機能の代替となるもので、 Chrome のみの非推奨である [`<link rel="prerender">`](/ja/docs/Web/HTML/Attributes/rel/prerender) 機能を置き換えるようにも設計されています。先読みされる文書や事前レンダリングされる文書を指定するための、より表現力があり構成しやすい構文とともに、これらの技術に対して多くの改善点を提供します。
 
-> **メモ:** 投機ルール API はサブリソースの先読みを処理しません。そのためには `<link rel="prefetch">` を使用する必要があります。
+> [!NOTE]
+> 投機ルール API はサブリソースの先読みを処理しません。そのためには `<link rel="prefetch">` を使用する必要があります。
 
 ## 概念と使用方法
 
@@ -44,7 +45,8 @@ l10n:
 
 利用可能な構文の全般的な説明は、 [`<script type="speculationrules">`](/ja/docs/Web/HTML/Element/script/type/speculationrules) を参照してください。
 
-> **メモ:** 投機ルールは `<script>` 要素を使用するので、サイトが含まれるのであれば {{httpheader("Content-Security-Policy")}} の [`script-src`](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) ディレクティブで明示的に許可する必要があります。これは `'inline-speculation-rules'` のソースを hash- または nonce-source とともに追加することで行われます。
+> [!NOTE]
+> 投機ルールは `<script>` 要素を使用するので、サイトが含まれるのであれば {{httpheader("Content-Security-Policy")}} の [`script-src`](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) ディレクティブで明示的に許可する必要があります。これは `'inline-speculation-rules'` のソースを hash- または nonce-source とともに追加することで行われます。
 
 ### 先読みの使用
 
@@ -56,7 +58,8 @@ l10n:
 
 同一サイトおよびサイト間の先読みは動作しますが、サイト間の先読みは制限されます（両者の違いの説明は ["same-site "と "cross-site"](https://web.dev/articles/same-site-same-origin#same-site-cross-site) を参照してください）。プライバシーの理由から、サイト間での先読みは、現在のところ、ユーザーが出力先のサイトにクッキーを設定しない場合にのみ動作します。サイトが前回設定されたクッキーに基づいて、先読みされたページ（実際には一度も訪問していないかもしれません）を通してユーザーの活動を追跡できるようになることは望ましくありません。
 
-> **メモ:** 将来的には {{httpheader("Supports-Loading-Mode")}} ヘッダーでオプトインが提供される予定ですが、執筆時点では実装されていません。
+> [!NOTE]
+> 将来的には {{httpheader("Supports-Loading-Mode")}} ヘッダーでオプトインが提供される予定ですが、執筆時点では実装されていません。
 
 投機ルールの先読みに対応しているブラウザーでは、古い先読み機構、すなわち [`<link rel="prefetch">`](/ja/docs/Web/HTML/Attributes/rel/prefetch) や {{domxref("fetch()")}} に `priority: "low"` オプションを設定します。なぜなら、投機ルールの先読みはナビゲーションのためのものであり、一般的なリソースの先読みではないからです。
 
@@ -77,9 +80,11 @@ l10n:
 
 事前レンダリングは、メモリとネットワーク帯域幅を使用します。事前レンダリングされたコンテンツにユーザーが移動しない場合、これらは無駄になります（ただし、ヘッダーが許可していれば結果は HTTP キャッシュに保存され、後で使用することができるかもしれません）。事前レンダリングの先行コストは、先読みよりもずっと大きくなります。また、コンテンツを事前レンダリングするのが安全でなくなるような条件もあります（詳しくは、[安全でない投機的読み込み条件](#安全でない投機的読み込み条件)を参照してください）。そのため事前レンダリングは、ユーザーがそのページに移動する可能性が高く、ユーザーの体感的な利点が余分なコストに見合うと考えられるようなケースを慎重に考慮し、控えめに採用することが推奨されます。
 
-> **メモ:** 潜在的なリソースの浪費を考慮すると、事前レンダリングされた場合、 {{htmlelement("iframe")}} をレンダリングするのとほぼ同じ量のリソースを使用します。
+> [!NOTE]
+> 潜在的なリソースの浪費を考慮すると、事前レンダリングされた場合、 {{htmlelement("iframe")}} をレンダリングするのとほぼ同じ量のリソースを使用します。
 
-> **メモ:** 多くの API は、事前レンダリング時もしくは有効化されるまで、自動的に延期されます。詳しくは[事前レンダリング中に延期または制限されるプラットフォーム機能](#事前レンダリング中に延期または制限されるプラットフォーム機能)を参照してください。
+> [!NOTE]
+> 多くの API は、事前レンダリング時もしくは有効化されるまで、自動的に延期されます。詳しくは[事前レンダリング中に延期または制限されるプラットフォーム機能](#事前レンダリング中に延期または制限されるプラットフォーム機能)を参照してください。
 
 事前レンダリングされた文書は、既定では同一オリジンの文書に制限されています。異なるオリジンであっても、同じサイトの事前レンダリングは可能です。そのためには、 {{httpheader("Supports-Loading-Mode")}} ヘッダーに `credentialed-prerender` という値を指定して、ナビゲーションターゲットがオプトインする必要があります。現時点では、異なるサイトの事前レンダリングはできません。
 
@@ -221,13 +226,15 @@ if (document.prerendering) {
 
 このような問題は、リクエストが来たときに {{httpheader("Sec-Purpose", "Sec-Purpose: prefetch")}} ヘッダーを監視し、問題のある機能を延期する固有のコードを実行することで、サーバー上で軽減することができます。その後、ページが実際に移動されたときに、必要であれば JavaScript で延期された機能を起動することができます。
 
-> **メモ:** 検出コードの詳細は、[先読みおよび事前レンダリングされたページの検出](#先読みおよび事前レンダリングされたページの検出)の節にあります。
+> [!NOTE]
+> 検出コードの詳細は、[先読みおよび事前レンダリングされたページの検出](#先読みおよび事前レンダリングされたページの検出)の節にあります。
 
 機能が JavaScript が実行される通常の状況下でのみ発生するのであれば、 JavaScript は起動するまで実行されないので、先読みは安全です。
 
 また、サーバーがレンダリングした文書が、ユーザーが現在のページで取り得る操作によってコンテンツが変化するような文書を先読みすることは、潜在的に危険です。例えば、フラッシュセールのページや映画館の座席地図などです。このようなケースを注意深くテストし、ページが読み込まれたらコンテンツを更新することで、このような課題を軽減してください。これらのケースの詳細については、[状態の変化をサーバー側でレンダリングする場合](#状態の変化をサーバー側でレンダリングする場合)を参照してください。
 
-> **メモ:** ブラウザーは先読みされたページを破棄する前に短時間キャッシュします（例えば Chrome は 5 分間キャッシュします）ので、どのような場合でもユーザーは最大 5 分前のコンテンツを見ることになります。
+> [!NOTE]
+> ブラウザーは先読みされたページを破棄する前に短時間キャッシュします（例えば Chrome は 5 分間キャッシュします）ので、どのような場合でもユーザーは最大 5 分前のコンテンツを見ることになります。
 
 最後のヒントは、 {{glossary("robots.txt")}} ファイルに許可されていないとして掲載されている URL を監査することです。通常、この URL は認証されたユーザーのみがアクセスできるページを指しているため、検索エンジンの検索結果に含めることができません。これらの多くは問題ないでしょうが、先読みされるのに安全でない（つまり記述されている条件を示している） URL を探すのに良い場所となります。
 
diff --git a/files/ja/web/api/speechrecognition/index.md b/files/ja/web/api/speechrecognition/index.md
index e430f0b58fe21d..e21f4d21800eec 100644
--- a/files/ja/web/api/speechrecognition/index.md
+++ b/files/ja/web/api/speechrecognition/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`SpeechRecognition`** は[ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API) のインターフェイスで、 認識サービスの制御インターフェイスです。これは、認識サービスから送信された {{domxref("SpeechRecognitionEvent")}} も処理します。
 
-> **メモ:** Chrome など一部のブラウザーでは、ウェブページ上で音声認識を使用するとサーバーベースの認識エンジンが使用されます。音声を認識処理するためにウェブサービスへ送信するため、オフラインでは動作しません。
+> [!NOTE]
+> Chrome など一部のブラウザーでは、ウェブページ上で音声認識を使用するとサーバーベースの認識エンジンが使用されます。音声を認識処理するためにウェブサービスへ送信するため、オフラインでは動作しません。
 
 {{InheritanceDiagram}}
 
diff --git a/files/ja/web/api/speechrecognitionevent/emma/index.md b/files/ja/web/api/speechrecognitionevent/emma/index.md
index 62ce8bb894dde8..65291420574d8d 100644
--- a/files/ja/web/api/speechrecognitionevent/emma/index.md
+++ b/files/ja/web/api/speechrecognitionevent/emma/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`emma`** は {{domxref("SpeechRecognitionEvent")}} インターフェイスの読み取り専用プロパティで、結果の Extensible MultiModal Annotation markup language (EMMA) — XML — 表現を返します。
 
-> **メモ:** EMMA は [EMMA: Extensible MultiModal Annotation markup language](https://www.w3.org/TR/emma/) 仕様書で定められています。この仕様書に複数の EMMA の例があります。
+> [!NOTE]
+> EMMA は [EMMA: Extensible MultiModal Annotation markup language](https://www.w3.org/TR/emma/) 仕様書で定められています。この仕様書に複数の EMMA の例があります。
 
 ## 値
 
diff --git a/files/ja/web/api/speechsynthesiserrorevent/speechsynthesiserrorevent/index.md b/files/ja/web/api/speechsynthesiserrorevent/speechsynthesiserrorevent/index.md
index 45574b7aff650a..0be47435a61f22 100644
--- a/files/ja/web/api/speechsynthesiserrorevent/speechsynthesiserrorevent/index.md
+++ b/files/ja/web/api/speechsynthesiserrorevent/speechsynthesiserrorevent/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`SpeechSynthesisErrorEvent()`** コンストラクターは新しい {{domxref("SpeechSynthesisErrorEvent")}} オブジェクトを生成します。
 
-> **メモ:** ウェブ開発者は、通常このコンストラクターを呼び出す必要はありません。イベントを発生させるときに、ブラウザー自身がこれらのオブジェクトを生成するからです。
+> [!NOTE]
+> ウェブ開発者は、通常このコンストラクターを呼び出す必要はありません。イベントを発生させるときに、ブラウザー自身がこれらのオブジェクトを生成するからです。
 
 ## 構文
 
diff --git a/files/ja/web/api/speechsynthesisevent/elapsedtime/index.md b/files/ja/web/api/speechsynthesisevent/elapsedtime/index.md
index dcef7eaee67caf..6b1829e2a206b6 100644
--- a/files/ja/web/api/speechsynthesisevent/elapsedtime/index.md
+++ b/files/ja/web/api/speechsynthesisevent/elapsedtime/index.md
@@ -14,7 +14,8 @@ l10n:
 
 経過時間を秒単位で格納した浮動小数点数です。
 
-> **メモ:** 初期のバージョンの仕様書では、ミリ秒単位の経過時刻が必要でした。
+> [!NOTE]
+> 初期のバージョンの仕様書では、ミリ秒単位の経過時刻が必要でした。
 > ブラウザーの[互換性一覧表](#ブラウザーの互換性)を確認してください。
 
 ## 例
diff --git a/files/ja/web/api/speechsynthesisevent/speechsynthesisevent/index.md b/files/ja/web/api/speechsynthesisevent/speechsynthesisevent/index.md
index db7413e83eec58..88b1e4c5bf35e9 100644
--- a/files/ja/web/api/speechsynthesisevent/speechsynthesisevent/index.md
+++ b/files/ja/web/api/speechsynthesisevent/speechsynthesisevent/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`SpeechSynthesisEvent()`** コンストラクターは、新しい {{domxref("SpeechSynthesisEvent")}} オブジェクトを生成します。
 
-> **メモ:** ウェブ開発者は、通常このコンストラクターを呼び出す必要はありません。イベントを発生させるときに、ブラウザー自身がこれらのオブジェクトを生成するからです。
+> [!NOTE]
+> ウェブ開発者は、通常このコンストラクターを呼び出す必要はありません。イベントを発生させるときに、ブラウザー自身がこれらのオブジェクトを生成するからです。
 
 ## 構文
 
diff --git a/files/ja/web/api/storage/clear/index.md b/files/ja/web/api/storage/clear/index.md
index 13df1734cd5c30..c0ed090e0d90f3 100644
--- a/files/ja/web/api/storage/clear/index.md
+++ b/files/ja/web/api/storage/clear/index.md
@@ -38,7 +38,8 @@ function populateStorage() {
 }
 ```
 
-> **メモ:** 現実世界の例としては、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> [!NOTE]
+> 現実世界の例としては、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/storage/getitem/index.md b/files/ja/web/api/storage/getitem/index.md
index 66c5eb72ced23d..35dd3b328c19ea 100644
--- a/files/ja/web/api/storage/getitem/index.md
+++ b/files/ja/web/api/storage/getitem/index.md
@@ -45,7 +45,8 @@ function setStyles() {
 }
 ```
 
-> **メモ:** 現実世界の例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> [!NOTE]
+> 現実世界の例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/storage/index.md b/files/ja/web/api/storage/index.md
index e75cc1359f1577..bde95c3bcaeab7 100644
--- a/files/ja/web/api/storage/index.md
+++ b/files/ja/web/api/storage/index.md
@@ -63,7 +63,8 @@ function setStyles() {
 }
 ```
 
-> **メモ:** 完全に動作する例として実行する様子を見るために、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> [!NOTE]
+> 完全に動作する例として実行する様子を見るために、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/storage/key/index.md b/files/ja/web/api/storage/key/index.md
index 64248c19a3116f..e7e20844ffc160 100644
--- a/files/ja/web/api/storage/key/index.md
+++ b/files/ja/web/api/storage/key/index.md
@@ -45,7 +45,8 @@ for (let i = 0; i < localStorage.length; i++) {
 }
 ```
 
-> **メモ:** 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> [!NOTE]
+> 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/storage/length/index.md b/files/ja/web/api/storage/length/index.md
index 38184abfd99470..063320548fb1cd 100644
--- a/files/ja/web/api/storage/length/index.md
+++ b/files/ja/web/api/storage/length/index.md
@@ -28,7 +28,8 @@ function populateStorage() {
 }
 ```
 
-> **メモ:** 現実世界の例として、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> [!NOTE]
+> 現実世界の例として、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/storage/removeitem/index.md b/files/ja/web/api/storage/removeitem/index.md
index 29051c0e176f0e..e6ba54a0749250 100644
--- a/files/ja/web/api/storage/removeitem/index.md
+++ b/files/ja/web/api/storage/removeitem/index.md
@@ -54,7 +54,8 @@ function populateStorage() {
 }
 ```
 
-> **メモ:** 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> [!NOTE]
+> 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/storage/setitem/index.md b/files/ja/web/api/storage/setitem/index.md
index 8beadc4fa13518..ca94b7ec52d4f1 100644
--- a/files/ja/web/api/storage/setitem/index.md
+++ b/files/ja/web/api/storage/setitem/index.md
@@ -43,7 +43,8 @@ function populateStorage() {
 }
 ```
 
-> **メモ:** 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> [!NOTE]
+> 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
 
 `Storage` は文字列の格納と取り出しにのみ対応しています。他にもデータ型を保存したい場合は、文字列に変換する必要があります。プレーンなオブジェクトや配列の場合は {{jsxref("JSON.stringify()")}} を使用します。
 
diff --git a/files/ja/web/api/storage_access_api/index.md b/files/ja/web/api/storage_access_api/index.md
index 7e3f92687106ae..771695836a7e58 100644
--- a/files/ja/web/api/storage_access_api/index.md
+++ b/files/ja/web/api/storage_access_api/index.md
@@ -60,7 +60,8 @@ Storage Access API のメソッドは、{{domxref("Document")}} インターフ
 - {{domxref("Document.requestStorageAccess()")}}
   - : ファーストパーティストレージへのアクセスが許可された場合に解決し、アクセスが拒否された場合に拒否する {{jsxref("Promise")}} を返します。
 
-> **メモ:** ユーザーとのやり取りは、これらの両方のメソッドによって返される Promise に伝播し、呼び出し元は、ユーザーからの 2 回目のクリックを必要とせずに、ユーザーとのやり取りを必要とするアクションを実行できます。 例えば、呼び出し元は、Firefox のポップアップブロッカーをトリガーせずに、解決した Promise からポップアップウィンドウを開くことができます。
+> [!NOTE]
+> ユーザーとのやり取りは、これらの両方のメソッドによって返される Promise に伝播し、呼び出し元は、ユーザーからの 2 回目のクリックを必要とせずに、ユーザーとのやり取りを必要とするアクションを実行できます。 例えば、呼び出し元は、Firefox のポップアップブロッカーをトリガーせずに、解決した Promise からポップアップウィンドウを開くことができます。
 
 ## \<iframe> サンドボックスの拡張
 
diff --git a/files/ja/web/api/storage_api/index.md b/files/ja/web/api/storage_api/index.md
index fd133f9d5a54d3..ddfb1f20ead83f 100644
--- a/files/ja/web/api/storage_api/index.md
+++ b/files/ja/web/api/storage_api/index.md
@@ -47,7 +47,8 @@ slug: Web/API/Storage_API
 
 サイトやアプリに **`"persistent-storage"`** 機能のパーミッションがある場合は、{{domxref("StorageManager.persist()")}} メソッドを使用して、そのボックスを永続的にすることを要求できます。また利用特性や他の測定基準により、ユーザーエージェントがサイトのストレージユニットを永続的にすることを決定することも可能です。`"persistent-storage"` 機能のパーミッション関連のフラグ、アルゴリズム、およびタイプはすべてパーミッションの標準デフォルトに設定されています。ただし、**パーミッションの状態**（permission state）はオリジン全体で同じでなければならず、パーミッションの状態が `"granted"` （付与）されていない場合（何らかの理由で永続的ストレージ機能へのアクセスが拒否された場合）、そのオリジンのサイトストレージユニットのボックスモードは常に `"best-effort"` になります。
 
-> **メモ:** パーミッションの取得と管理の詳細については、[Permissions API の使用](/ja/docs/Web/API/Permissions_API/Using_the_Permissions_API)を参照してください。
+> [!NOTE]
+> パーミッションの取得と管理の詳細については、[Permissions API の使用](/ja/docs/Web/API/Permissions_API/Using_the_Permissions_API)を参照してください。
 
 サイトストレージユニットを消去するとき、オリジンのボックスは単一の実体として扱われます。ユーザーエージェントがそれを消去する必要があり、ユーザーが承認した場合、個々の API からデータのみを消去する手段を提供するのではなく、データストア全体を消去します。
 
diff --git a/files/ja/web/api/storagemanager/getdirectory/index.md b/files/ja/web/api/storagemanager/getdirectory/index.md
index d50243f8a62703..efee890d847913 100644
--- a/files/ja/web/api/storagemanager/getdirectory/index.md
+++ b/files/ja/web/api/storagemanager/getdirectory/index.md
@@ -69,7 +69,8 @@ onmessage = async (e) => {
 };
 ```
 
-> **メモ:** 仕様の以前のバージョンでは、{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}・{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}・{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}}・{{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} は誤って非同期メソッドとされていました。これは現在では[変更されています](https://github.com/whatwg/fs/issues/7)が、まだ非同期バージョンをサポートしているブラウザーもあります。
+> [!NOTE]
+> 仕様の以前のバージョンでは、{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}・{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}・{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}}・{{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} は誤って非同期メソッドとされていました。これは現在では[変更されています](https://github.com/whatwg/fs/issues/7)が、まだ非同期バージョンをサポートしているブラウザーもあります。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/streams_api/index.md b/files/ja/web/api/streams_api/index.md
index 7cc863ee58bb7d..c31693ca4b26c4 100644
--- a/files/ja/web/api/streams_api/index.md
+++ b/files/ja/web/api/streams_api/index.md
@@ -29,7 +29,8 @@ l10n:
 
 {{domxref("WritableStream")}} を使用してストリームにデータを書き込むこともできます。
 
-> **メモ:** ストリームの理論と実践の詳細については、[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)の記事をご覧ください。
+> [!NOTE]
+> ストリームの理論と実践の詳細については、[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)の記事をご覧ください。
 
 ## ストリームのインターフェイス
 
diff --git a/files/ja/web/api/streams_api/using_readable_byte_streams/index.md b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
index 580d155e25ad0f..9d9da646e1e703 100644
--- a/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
+++ b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
@@ -12,7 +12,8 @@ l10n:
 
 この記事では、読み取り可能なバイトストリームと通常の「既定」ストリームとの比較、およびそれらをどのように作成し、使用するかについて説明します。
 
-> **メモ:** 読み取り可能なバイトストリームは、「通常の」読み取り可能なストリームとほとんど同じであり、概念もほとんどすべて同じです。
+> [!NOTE]
+> 読み取り可能なバイトストリームは、「通常の」読み取り可能なストリームとほとんど同じであり、概念もほとんどすべて同じです。
 > この記事は、あなたがすでにそれらの概念を理解していることを想定しており、（もしそうであれば）表面的にしか取り上げません。
 > 関連する概念に慣れていない方は、先に[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[ストリームの概念と使用法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)、[ストリーム API の概要](/ja/docs/Web/API/Streams_API/Concepts) を読んでください。
 
@@ -67,7 +68,8 @@ l10n:
 元の基盤がストリームにデータを送信するために移譲と待ち行列の両方を使用することができるように、リーダーは様々な点で意図的に遅延しています。
 背圧対応は実演されていません。
 
-> **メモ:** 既定のリーダーでは、基盤バイトソースも使用することができます。
+> [!NOTE]
+> 既定のリーダーでは、基盤バイトソースも使用することができます。
 > 自動バッファー割り当てが有効になっている場合、コントローラーは、リーダーからの未処理のリクエストがあり、ストリームの内部キューが空である場合に、ゼロコピー移譲用に修正されたサイズのバッファーを供給します。
 > 自動バッファー割り当てが有効になっていない場合、バイトストリームのデータはすべて常に待ち行列に入れられます。
 > これは、"pull: underlying byte source "の例で表示させた動作に似ています。
@@ -418,7 +420,8 @@ reader.closed
 `read()` メソッドはランダムなデータの「擬似乱数」の大きさのブロックを、指定された位置から提供されたバッファーに読み込みます。
 `close()` メソッドは何かするわけではありません。ストリームのコンストラクターを定義する際に、ソースを閉じる場所を示すために指定されただけです。
 
-> **メモ:** 類似しているクラスは、すべての「プルソース」の例に使用しています。
+> [!NOTE]
+> 類似しているクラスは、すべての「プルソース」の例に使用しています。
 > ここで表示させているのは、あくまで情報です（模擬であることがわかるように）。
 
 ```js
diff --git a/files/ja/web/api/streams_api/using_readable_streams/index.md b/files/ja/web/api/streams_api/using_readable_streams/index.md
index c631e352493da6..478edede9c1c3e 100644
--- a/files/ja/web/api/streams_api/using_readable_streams/index.md
+++ b/files/ja/web/api/streams_api/using_readable_streams/index.md
@@ -9,9 +9,11 @@ l10n:
 
 JavaScript 開発者として、ネットワークを介して受信したデータのストリームをチャンクごとにプログラムで読み取り、操作することはとても便利です。しかし、ストリーム API の読み取り可能なストリームの機能はどのように使用するのでしょうか。この記事では、その基本について説明します。
 
-> **メモ:** この記事は、読者が読み取り可能なストリームの用途を理解し、高レベルの概念を理解していることを前提としています。 そうでない場合は、まず[ストリームの概念と使用方法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)と[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)の記事を読んでから、戻ってくることをお勧めします。
+> [!NOTE]
+> この記事は、読者が読み取り可能なストリームの用途を理解し、高レベルの概念を理解していることを前提としています。 そうでない場合は、まず[ストリームの概念と使用方法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)と[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)の記事を読んでから、戻ってくることをお勧めします。
 
-> **メモ:** 書き込み可能なストリームに関する情報を探しているのであれば、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)を見てみてください。
+> [!NOTE]
+> 書き込み可能なストリームに関する情報を探しているのであれば、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)を見てみてください。
 
 ## いくつかの例を見つける
 
@@ -163,7 +165,8 @@ fetch("http://example.com/somefile.txt")
   .catch((err) => console.error(err));
 ```
 
-> **メモ:** この関数は `pump()` が自分自身を呼び出すかのように見え、深い再帰につながる可能性があります。しかし、 `pump` は非同期であり、それぞれの `pump()` の呼び出しはプロミスハンドラーの終わりにあるため、実際にはプロミスハンドラーの連鎖に類似しています。
+> [!NOTE]
+> この関数は `pump()` が自分自身を呼び出すかのように見え、深い再帰につながる可能性があります。しかし、 `pump` は非同期であり、それぞれの `pump()` の呼び出しはプロミスハンドラーの終わりにあるため、実際にはプロミスハンドラーの連鎖に類似しています。
 
 ストリームの読み取りは、プロミスではなく async/awaitを使用して書くとさらに簡単です。
 
@@ -416,7 +419,8 @@ async function logChunks(url, { signal }) {
 下記のログ出力例では、コードが実行されているか、ブラウザーが `ReadableStream` の非同期反復処理に対応していないことを表示しています。
 正しい辺には取得したチャンクが表示されます。フェッチを停止するにはキャンセルボタンを押します。
 
-> **メモ:** このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストのチャンクを生成する `ReadableStream` を返すだけです。
+> [!NOTE]
+> このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストのチャンクを生成する `ReadableStream` を返すだけです。
 > 下記左列の「基盤ソース」は模擬ソースで生成されるデータで、右列はコンシューマーからのログ出力です。
 > （模擬ソースのコードは例に関係ないので表示しません。）
 
diff --git a/files/ja/web/api/streams_api/using_writable_streams/index.md b/files/ja/web/api/streams_api/using_writable_streams/index.md
index 3690b025e01ea0..6a06a5781b1944 100644
--- a/files/ja/web/api/streams_api/using_writable_streams/index.md
+++ b/files/ja/web/api/streams_api/using_writable_streams/index.md
@@ -9,9 +9,11 @@ l10n:
 
 JavaScript 開発者として、プログラムでストリームにデータを書き込むことはとても便利です。この記事では、[ストリーム API](/ja/docs/Web/API/Streams_API) の書き込み可能なストリームの機能について説明します。
 
-> **メモ:** この記事は、書き込み可能なストリームの用途を理解し、高レベルの概念を理解していることを前提としています。 そうでない場合は、まず[ストリームの概念と使用方法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)と[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)の記事を読んでから、戻ってくることをお勧めします。
+> [!NOTE]
+> この記事は、書き込み可能なストリームの用途を理解し、高レベルの概念を理解していることを前提としています。 そうでない場合は、まず[ストリームの概念と使用方法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)と[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)の記事を読んでから、戻ってくることをお勧めします。
 
-> **メモ:** 読み取り可能なストリームに関する情報を探している場合は、代わりに[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)や[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)をご覧ください。
+> [!NOTE]
+> 読み取り可能なストリームに関する情報を探している場合は、代わりに[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)や[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)をご覧ください。
 
 ## 例の紹介
 
diff --git a/files/ja/web/api/structuredclone/index.md b/files/ja/web/api/structuredclone/index.md
index 02b09868e3a11f..3f6911cf23eff7 100644
--- a/files/ja/web/api/structuredclone/index.md
+++ b/files/ja/web/api/structuredclone/index.md
@@ -62,7 +62,8 @@ console.assert(clone.itself === clone); // 循環参照も保持されている
 [移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)（のみ）が複製先のオブジェクトに複製する代わりに移譲することができます。この場合、 `options` 引数の `transfer` プロパティを使用します。
 移譲により、元のオブジェクトは使用不可能になります。
 
-> **メモ:** これが役立つ場面として、バッファー内のデータを保存する前に非同期で検証する場合です。
+> [!NOTE]
+> これが役立つ場面として、バッファー内のデータを保存する前に非同期で検証する場合です。
 > データを保存する前にバッファーが変更されるのを避けるために、バッファーをクローンしてそのデータを検証することができます。
 > また、データを「移譲」すれば、元のバッファーに手を加えようとしても失敗するので、偶発的な悪用を防ぐことができます。
 
diff --git a/files/ja/web/api/subtlecrypto/decrypt/index.md b/files/ja/web/api/subtlecrypto/decrypt/index.md
index 14cd7d148d8886..ebb64e4e5d4e4d 100644
--- a/files/ja/web/api/subtlecrypto/decrypt/index.md
+++ b/files/ja/web/api/subtlecrypto/decrypt/index.md
@@ -54,7 +54,8 @@ decrypt(algorithm, key, data)
 
 ## 例
 
-> **メモ:** GitHub 上の[動作例を試してみてください](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
+> [!NOTE]
+> GitHub 上の[動作例を試してみてください](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
 
 ### RSA-OAEP
 
diff --git a/files/ja/web/api/subtlecrypto/derivebits/index.md b/files/ja/web/api/subtlecrypto/derivebits/index.md
index ca36bbf34d8b9b..559fb32604b79a 100644
--- a/files/ja/web/api/subtlecrypto/derivebits/index.md
+++ b/files/ja/web/api/subtlecrypto/derivebits/index.md
@@ -55,7 +55,8 @@ deriveBits(algorithm, baseKey, length)
 
 ## 例
 
-> **メモ:** GitHub 上の[動作例を試してみてください](https://mdn.github.io/dom-examples/web-crypto/derive-bits/index.html)。
+> [!NOTE]
+> GitHub 上の[動作例を試してみてください](https://mdn.github.io/dom-examples/web-crypto/derive-bits/index.html)。
 
 ### ECDH
 
diff --git a/files/ja/web/api/subtlecrypto/derivekey/index.md b/files/ja/web/api/subtlecrypto/derivekey/index.md
index 3a8eeb73c254e3..526d91ac48703d 100644
--- a/files/ja/web/api/subtlecrypto/derivekey/index.md
+++ b/files/ja/web/api/subtlecrypto/derivekey/index.md
@@ -87,7 +87,8 @@ PBKDF2 は [RFC 2898](https://datatracker.ietf.org/doc/html/rfc2898) で定義
 
 ## 例
 
-> **メモ:** GitHub の[動作例を試してみる](https://mdn.github.io/dom-examples/web-crypto/derive-key/index.html)ことができます。
+> [!NOTE]
+> GitHub の[動作例を試してみる](https://mdn.github.io/dom-examples/web-crypto/derive-key/index.html)ことができます。
 
 ### ECDH
 
diff --git a/files/ja/web/api/subtlecrypto/digest/index.md b/files/ja/web/api/subtlecrypto/digest/index.md
index bce2b2c1dd1435..c41a0893e93cb3 100644
--- a/files/ja/web/api/subtlecrypto/digest/index.md
+++ b/files/ja/web/api/subtlecrypto/digest/index.md
@@ -90,9 +90,11 @@ digest(algorithm, data)
   </tbody>
 </table>
 
-> **警告:** SHA-1 は現在脆弱であると見なされているため、暗号化アプリケーションには使用しないでください。
+> [!WARNING]
+> SHA-1 は現在脆弱であると見なされているため、暗号化アプリケーションには使用しないでください。
 
-> **メモ:** キー付きハッシュメッセージ認証コード ([HMAC](/ja/docs/Glossary/HMAC)) の作成方法をここで探している場合は、代わりに [SubtleCrypto.sign()](/ja/docs/Web/API/SubtleCrypto/sign#hmac) を使用する必要があります。
+> [!NOTE]
+> キー付きハッシュメッセージ認証コード ([HMAC](/ja/docs/Glossary/HMAC)) の作成方法をここで探している場合は、代わりに [SubtleCrypto.sign()](/ja/docs/Web/API/SubtleCrypto/sign#hmac) を使用する必要があります。
 
 ## 例
 
diff --git a/files/ja/web/api/subtlecrypto/encrypt/index.md b/files/ja/web/api/subtlecrypto/encrypt/index.md
index 8241c7c05fd9ca..37cbab34ecb1a0 100644
--- a/files/ja/web/api/subtlecrypto/encrypt/index.md
+++ b/files/ja/web/api/subtlecrypto/encrypt/index.md
@@ -89,7 +89,8 @@ CTR モードでは、メッセージのブロックが暗号化されるたび
 
 基本的には、ノンスはカウンターブロックが一つのメッセージから次のメッセージに再利用されないことを保証し、カウンターはカウンターブロックが単一のメッセージ内で再利用されないことを保証します。
 
-> **メモ:** 詳しくは [Appendix B of the NIST SP800-38A standard](https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D) を参照してください。
+> [!NOTE]
+> 詳しくは [Appendix B of the NIST SP800-38A standard](https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D) を参照してください。
 
 ### AES-CBC
 
@@ -103,7 +104,8 @@ CTR モードでは、メッセージのブロックが暗号化されるたび
 
 ## 例
 
-> **メモ:** GitHub の[動作例を試してみる](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)ことができます。
+> [!NOTE]
+> GitHub の[動作例を試してみる](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)ことができます。
 
 ### RSA-OAEP
 
diff --git a/files/ja/web/api/subtlecrypto/exportkey/index.md b/files/ja/web/api/subtlecrypto/exportkey/index.md
index 59e02654886745..de0237d7c0f442 100644
--- a/files/ja/web/api/subtlecrypto/exportkey/index.md
+++ b/files/ja/web/api/subtlecrypto/exportkey/index.md
@@ -53,7 +53,8 @@ exportKey(format, key)
 
 ## 例
 
-> **メモ:** GitHub 上の[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/export-key/index.html)ことができます。
+> [!NOTE]
+> GitHub 上の[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/export-key/index.html)ことができます。
 
 ### Raw エクスポート
 
diff --git a/files/ja/web/api/subtlecrypto/generatekey/index.md b/files/ja/web/api/subtlecrypto/generatekey/index.md
index faf070e549bc94..fda0022719b911 100644
--- a/files/ja/web/api/subtlecrypto/generatekey/index.md
+++ b/files/ja/web/api/subtlecrypto/generatekey/index.md
@@ -65,7 +65,8 @@ generateKey(algorithm, extractable, keyUsages)
 
 ## 例
 
-> **メモ:** GitHub 上で[動く例を試す](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)ことができます。
+> [!NOTE]
+> GitHub 上で[動く例を試す](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)ことができます。
 
 ### RSA 鍵ペアの生成
 
diff --git a/files/ja/web/api/subtlecrypto/importkey/index.md b/files/ja/web/api/subtlecrypto/importkey/index.md
index f14e77b1e5dd35..abee51ca08015d 100644
--- a/files/ja/web/api/subtlecrypto/importkey/index.md
+++ b/files/ja/web/api/subtlecrypto/importkey/index.md
@@ -170,7 +170,8 @@ JSON ウェブ鍵は次のようなものです（これは EC 秘密鍵です
 
 ## 例
 
-> **メモ:** You can [try the working examples](https://mdn.github.io/dom-examples/web-crypto/import-key/index.html) on GitHub.
+> [!NOTE]
+> You can [try the working examples](https://mdn.github.io/dom-examples/web-crypto/import-key/index.html) on GitHub.
 
 ### Raw インポート
 
diff --git a/files/ja/web/api/subtlecrypto/index.md b/files/ja/web/api/subtlecrypto/index.md
index 4f1531b7faf91c..0b93835b1044cf 100644
--- a/files/ja/web/api/subtlecrypto/index.md
+++ b/files/ja/web/api/subtlecrypto/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`SubtleCrypto`** は[ウェブ暗号化 API](/ja/docs/Web/API/Web_Crypto_API) のインターフェイスで、数々の低水準の暗号化関数を提供します。 `SubtleCrypto` の機能にアクセスするには、 {{domxref("crypto_property", "crypto")}} プロパティから取得した {{domxref("Crypto")}} オブジェクトの {{domxref("Crypto.subtle", "subtle")}} プロパティを使用します。
 
-> **警告:** このAPIは、数多くの低レベル暗号プリミティブを提供しています。これらを悪用するのはとても簡単で、その落とし穴は非常に微妙なものです。
+> [!WARNING]
+> このAPIは、数多くの低レベル暗号プリミティブを提供しています。これらを悪用するのはとても簡単で、その落とし穴は非常に微妙なものです。
 >
 > 基本的な暗号機能を正しく使用すると想定されていても、安全な鍵管理と全体的なセキュリティシステムの設計を正しく行うのは非常に難しく、一般的にはセキュリティの専門家の領域です。
 >
diff --git a/files/ja/web/api/subtlecrypto/sign/index.md b/files/ja/web/api/subtlecrypto/sign/index.md
index c47e4b74b5d82e..7c2052b03c506f 100644
--- a/files/ja/web/api/subtlecrypto/sign/index.md
+++ b/files/ja/web/api/subtlecrypto/sign/index.md
@@ -82,7 +82,8 @@ HMAC アルゴリズムは、 [FIPS 198-1 標準](https://csrc.nist.gov/csrc/med
 
 ## 例
 
-> **メモ:** GitHub の[動作例](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)をご覧ください。
+> [!NOTE]
+> GitHub の[動作例](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)をご覧ください。
 
 ### RSASSA-PKCS1-v1_5
 
diff --git a/files/ja/web/api/subtlecrypto/unwrapkey/index.md b/files/ja/web/api/subtlecrypto/unwrapkey/index.md
index 98f097f96b3a30..8217040e7d420d 100644
--- a/files/ja/web/api/subtlecrypto/unwrapkey/index.md
+++ b/files/ja/web/api/subtlecrypto/unwrapkey/index.md
@@ -88,7 +88,8 @@ unwrapKey(format, wrappedKey, unwrappingKey, unwrapAlgo, unwrappedKeyAlgo, extra
 
 ## 例
 
-> **メモ:** GitHub 上で[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/unwrap-key/index.html)ことができます。
+> [!NOTE]
+> GitHub 上で[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/unwrap-key/index.html)ことができます。
 
 ### "raw" キーのラップ解除
 
diff --git a/files/ja/web/api/subtlecrypto/verify/index.md b/files/ja/web/api/subtlecrypto/verify/index.md
index 998c0b446a506f..737448000d97b3 100644
--- a/files/ja/web/api/subtlecrypto/verify/index.md
+++ b/files/ja/web/api/subtlecrypto/verify/index.md
@@ -52,7 +52,8 @@ verify(algorithm, key, signature, data)
 
 ## 例
 
-> **メモ:** GitHub 上の[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)ことができます。
+> [!NOTE]
+> GitHub 上の[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)ことができます。
 
 ### RSASSA-PKCS1-v1_5
 
diff --git a/files/ja/web/api/subtlecrypto/wrapkey/index.md b/files/ja/web/api/subtlecrypto/wrapkey/index.md
index d2c449df417c6e..9d795bc5289f8f 100644
--- a/files/ja/web/api/subtlecrypto/wrapkey/index.md
+++ b/files/ja/web/api/subtlecrypto/wrapkey/index.md
@@ -81,7 +81,8 @@ AES-KW は [RFC 3394](https://datatracker.ietf.org/doc/html/rfc3394) で定義
 
 ## 例
 
-> **メモ:** GitHub で[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/wrap-key/index.html)ことができます。
+> [!NOTE]
+> GitHub で[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/wrap-key/index.html)ことができます。
 
 ### Raw ラップ
 
diff --git a/files/ja/web/api/svggraphicselement/index.md b/files/ja/web/api/svggraphicselement/index.md
index 4484405c8b5fe6..1adeb97b2772eb 100644
--- a/files/ja/web/api/svggraphicselement/index.md
+++ b/files/ja/web/api/svggraphicselement/index.md
@@ -9,7 +9,8 @@ slug: Web/API/SVGGraphicsElement
 
 {{InheritanceDiagram(600, 120)}}
 
-> **メモ:** このインターフェイスは SVG 2 で導入され、 SVG 1.1 で導入された {{domxref("SVGLocatable")}} および {{domxref("SVGTransformable")}} インターフェイスを置き換えています。
+> [!NOTE]
+> このインターフェイスは SVG 2 で導入され、 SVG 1.1 で導入された {{domxref("SVGLocatable")}} および {{domxref("SVGTransformable")}} インターフェイスを置き換えています。
 
 ## プロパティ
 
diff --git a/files/ja/web/api/text/wholetext/index.md b/files/ja/web/api/text/wholetext/index.md
index 88cccf1804d124..75dd044dd0e752 100644
--- a/files/ja/web/api/text/wholetext/index.md
+++ b/files/ja/web/api/text/wholetext/index.md
@@ -11,7 +11,8 @@ l10n:
 テキストは文書中の順序で連結されます。
 これにより、任意のテキストノードを指定し、隣接するすべてのテキストを 1 つの文字列として取得することができます。
 
-> **メモ:** これは {{domxref("Node.normalize()")}} を呼び出してそのテキストノードの値を読み取るのに似ていますが、ツリーを変更することはありません。
+> [!NOTE]
+> これは {{domxref("Node.normalize()")}} を呼び出してそのテキストノードの値を読み取るのに似ていますが、ツリーを変更することはありません。
 
 ## 値
 
diff --git a/files/ja/web/api/touch/index.md b/files/ja/web/api/touch/index.md
index 6b56e4f6db4e13..6dc73181e27ceb 100644
--- a/files/ja/web/api/touch/index.md
+++ b/files/ja/web/api/touch/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{ domxref("Touch.radiusX") }}、{{ domxref("Touch.radiusY") }}、{{ domxref("Touch.rotationAngle") }} により、ユーザーと画面が接触した*タッチ領域 (touch area)* を表します。これは指を使うような、精度が低いポインティングデバイスを扱う場合に役立ちます。これらの値は、接触した領域全体（ユーザの指先など）に可能な限り合う楕円を表すように設定されます
 
-> **メモ:** プロパティの値の多くは、ハードウェア依存です。例えば、表面を押さえる力を検出する手段を持たない機器では、`force` の値が常に 0 になるでしょう。これは `radiusX` や `radiusY` にもあてはまります。ハードウェアがひとつの点しか通知できない場合は、これらの値が 1 になるでしょう。
+> [!NOTE]
+> プロパティの値の多くは、ハードウェア依存です。例えば、表面を押さえる力を検出する手段を持たない機器では、`force` の値が常に 0 になるでしょう。これは `radiusX` や `radiusY` にもあてはまります。ハードウェアがひとつの点しか通知できない場合は、これらの値が 1 になるでしょう。
 
 ## コンストラクター
 
diff --git a/files/ja/web/api/touch_events/index.md b/files/ja/web/api/touch_events/index.md
index 07c7a36ace7401..955e9351f6986c 100644
--- a/files/ja/web/api/touch_events/index.md
+++ b/files/ja/web/api/touch_events/index.md
@@ -33,7 +33,8 @@ l10n:
 
 ここでは一度に複数のタッチ点を取得しており、ユーザーが一度に複数の指で {{HTMLElement("canvas")}} に描くことができるようになっています。このサンプルはタッチイベントに対応しているブラウザーのみで動作します。
 
-> **メモ:** ここからはタッチ面への接触を表すときに「指」という表現を使用しますが、当然ながらスタイラスなど他の接触法も使用できます。
+> [!NOTE]
+> ここからはタッチ面への接触を表すときに「指」という表現を使用しますが、当然ながらスタイラスなど他の接触法も使用できます。
 
 ### キャンバスの作成
 
@@ -266,7 +267,8 @@ function log(msg) {
 
 {{EmbedLiveSample('Example','100%', 900)}}
 
-> **メモ:** 一般的には、 この例はタッチイベントを提供するプラットフォームで動作します。
+> [!NOTE]
+> 一般的には、 この例はタッチイベントを提供するプラットフォームで動作します。
 > このようなイベントをシミュレートできるデスクトッププラットフォームでテストすることができます。
 >
 > - Firefox では[レスポンシブデザインモード](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html#toggling-responsive-design-mode)の「タッチシミュレーション」を有効にしてください（ページの再読み込みが必要な場合があります）。
diff --git a/files/ja/web/api/touchevent/metakey/index.md b/files/ja/web/api/touchevent/metakey/index.md
index ad7a7c0091067d..e4811ddeccc420 100644
--- a/files/ja/web/api/touchevent/metakey/index.md
+++ b/files/ja/web/api/touchevent/metakey/index.md
@@ -12,7 +12,8 @@ l10n:
 
 このプロパティは{{ReadOnlyInline}}です。
 
-> **メモ:** Macintosh のキーボードでは、これは <kbd>⌘ Command</kbd> キーです。 Windows のキーボードでは、これは Windows キー (<kbd>⊞</kbd>) です。
+> [!NOTE]
+> Macintosh のキーボードでは、これは <kbd>⌘ Command</kbd> キーです。 Windows のキーボードでは、これは Windows キー (<kbd>⊞</kbd>) です。
 
 ## 値
 
diff --git a/files/ja/web/api/touchevent/touches/index.md b/files/ja/web/api/touchevent/touches/index.md
index 640ee17c82dc10..31eb1e2c75742c 100644
--- a/files/ja/web/api/touchevent/touches/index.md
+++ b/files/ja/web/api/touchevent/touches/index.md
@@ -12,7 +12,8 @@ l10n:
 
 何本の別個の指が画面に触れていると識別されるか、と考えればよいでしょう。
 
-> **メモ:** 配列内のタッチは必ずしも発生順（配列の i 番目の要素が発生した i 番目のタッチ）に並んでいるとは限りません。固有の順序を想定することはできません。タッチの発生順序を決定するには、 `touch` オブジェクト ID を使用してください。
+> [!NOTE]
+> 配列内のタッチは必ずしも発生順（配列の i 番目の要素が発生した i 番目のタッチ）に並んでいるとは限りません。固有の順序を想定することはできません。タッチの発生順序を決定するには、 `touch` オブジェクト ID を使用してください。
 
 ## 値
 
diff --git a/files/ja/web/api/touchevent/touchevent/index.md b/files/ja/web/api/touchevent/touchevent/index.md
index e312ef68a9ae2d..6f4554bb5f3c58 100644
--- a/files/ja/web/api/touchevent/touchevent/index.md
+++ b/files/ja/web/api/touchevent/touchevent/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`TouchEvent()`** コンストラクターは新しい {{domxref("TouchEvent")}} オブジェクトを生成します。
 
-> **メモ:** このコンストラクタを使用して合成イベントを作成した場合、セキュリティ上の理由から、そのイベントは信頼されません。
+> [!NOTE]
+> このコンストラクタを使用して合成イベントを作成した場合、セキュリティ上の理由から、そのイベントは信頼されません。
 > ブラウザーが生成した `TouchEvent` オブジェクトのみが信頼され、信頼されたイベントのみが既定のアクションを発生させます。
 
 ## 構文
diff --git a/files/ja/web/api/touchlist/index.md b/files/ja/web/api/touchlist/index.md
index 4cf4cd38bf4ebd..b5e82b333a4ef3 100644
--- a/files/ja/web/api/touchlist/index.md
+++ b/files/ja/web/api/touchlist/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`TouchList`** インターフェイスは、タッチ面上の接触点のリストを表します。例えば、ユーザーがタッチ面（画面やトラックパッドなど）を 3 本指で操作している場合、対応する `TouchList` オブジェクトは 1 本の指あたり 1 つの {{domxref("Touch")}} オブジェクトを持ち、全部で 3 項目になります。
 
-> **メモ:** このインターフェイスは[変更不可能なリストを作成しようとするもの](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)で、すでに使用しているコードを壊さないために対応しているだけです。現代の API では、代わりに ECMAScript の配列型をラップした型を使用しているので、ECMAScript の配列のように扱うことができ、同時にその使用方法に追加の意味づけをすることができます（例えば、アイテムを読み取り専用にする）。
+> [!NOTE]
+> このインターフェイスは[変更不可能なリストを作成しようとするもの](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)で、すでに使用しているコードを壊さないために対応しているだけです。現代の API では、代わりに ECMAScript の配列型をラップした型を使用しているので、ECMAScript の配列のように扱うことができ、同時にその使用方法に追加の意味づけをすることができます（例えば、アイテムを読み取り専用にする）。
 
 ## インスタンスプロパティ
 
diff --git a/files/ja/web/api/transformstream/transformstream/index.md b/files/ja/web/api/transformstream/transformstream/index.md
index df9f8e6b270ad8..fbff25853fd41c 100644
--- a/files/ja/web/api/transformstream/transformstream/index.md
+++ b/files/ja/web/api/transformstream/transformstream/index.md
@@ -52,7 +52,8 @@ new TransformStream(transformer, writableStrategy, readableStrategy)
     - `size(chunk)`
       - : 引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。
 
-> **メモ:** 自分自身で独自の `readableStrategy` や `writableStrategy` を定義したり、オブジェクト値に対して {{domxref("ByteLengthQueuingStrategy")}} や {{domxref("CountQueuingStrategy")}} のインスタンスを使用したりすることができます。
+> [!NOTE]
+> 自分自身で独自の `readableStrategy` や `writableStrategy` を定義したり、オブジェクト値に対して {{domxref("ByteLengthQueuingStrategy")}} や {{domxref("CountQueuingStrategy")}} のインスタンスを使用したりすることができます。
 
 ## 例
 
diff --git a/files/ja/web/api/ui_events/keyboard_event_key_values/index.md b/files/ja/web/api/ui_events/keyboard_event_key_values/index.md
index e3b2e7f2b2db6a..8c0d679346cb3b 100644
--- a/files/ja/web/api/ui_events/keyboard_event_key_values/index.md
+++ b/files/ja/web/api/ui_events/keyboard_event_key_values/index.md
@@ -2958,7 +2958,8 @@ Linux で GTK を使ってアクセント記号やその他の特殊文字を生
 - [ANSI/CEA-2014-B](https://shop.cta.tech/products/web-based-protocol-and-framework-for-remote-user-interface-on-upnp-networks-and-the-internet): UPnP™ ネットワークとインターネット上のリモートユーザーインターフェイスのためのウェブベースのプロトコルとフレームワーク
 - [Android KeyEvent key code values](https://developer.android.com/reference/android/view/KeyEvent.html)
 
-> **メモ:** リモコンには通常、[マルチメディアキー](#マルチメディアキー)や[音声制御キー](#音声制御キー)のように、すでに他の場所で定義されている値を持つキーが記載されています。それらのキーの値は、それらの表内の文書化されたものと一致します。
+> [!NOTE]
+> リモコンには通常、[マルチメディアキー](#マルチメディアキー)や[音声制御キー](#音声制御キー)のように、すでに他の場所で定義されている値を持つキーが記載されています。それらのキーの値は、それらの表内の文書化されたものと一致します。
 
 <table class="no-markdown">
   <thead>
@@ -4385,7 +4386,7 @@ Linux で GTK を使ってアクセント記号やその他の特殊文字を生
 
 これらのキーはキーボードのテンキーにあります。しかし、すべてがすべてのキーボードに存在するわけではありません。一般的なテンキーには <kbd>0</kbd> から <kbd>9</kbd> までの数字キーがありますが（`"0"` から `"9"` までのエンコード方式）、マルチメディアキーボードの中には、それ以上の数字のために追加の数字キーがあるものもあります。
 
-> **メモ:** <kbd>10</kbd> キーが存在する場合、 `key` の値が `"0"` のイベントを生成します。
+> [!NOTE] > <kbd>10</kbd> キーが存在する場合、 `key` の値が `"0"` のイベントを生成します。
 
 <table class="no-markdown">
   <thead>
diff --git a/files/ja/web/api/uievent/inituievent/index.md b/files/ja/web/api/uievent/inituievent/index.md
index cd1de242ae8087..25539fd5367924 100644
--- a/files/ja/web/api/uievent/inituievent/index.md
+++ b/files/ja/web/api/uievent/inituievent/index.md
@@ -12,7 +12,8 @@ l10n:
 
 この方法で初期化されるイベントは {{ domxref("Document.createEvent()") }} で作成されている必要があります。このメソッドでイベントを設定するには、 {{ domxref("EventTarget.dispatchEvent()") }} を使用してイベントを発行する前に行う必要があります。発行された後は、何もしません。
 
-> **警告:** このメソッドは非推奨なので、もう使用しないでください。
+> [!WARNING]
+> このメソッドは非推奨なので、もう使用しないでください。
 >
 > 代わりに、 {{domxref("UIEvent.UIEvent", "UIEvent()")}} などの具体的なイベントのコンストラクターを使用してください。[イベントの作成と起動](/ja/docs/Web/Events/Creating_and_triggering_events)のページで、これらの使用方法について詳しく説明しています。
 
diff --git a/files/ja/web/api/uievent/uievent/index.md b/files/ja/web/api/uievent/uievent/index.md
index 0a43662fa4a741..6159607a14cb3a 100644
--- a/files/ja/web/api/uievent/uievent/index.md
+++ b/files/ja/web/api/uievent/uievent/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`UIEvent()`** コンストラクターは新しい {{domxref("UIEvent")}} を生成します。
 
-> **メモ:** このコンストラクターを使用して合成イベントを作成した場合、セキュリティ上の理由から、そのイベントは信頼されません。
+> [!NOTE]
+> このコンストラクターを使用して合成イベントを作成した場合、セキュリティ上の理由から、そのイベントは信頼されません。
 > ブラウザーで生成された `UIEvent`` オブジェクトのみが信頼され、信頼されたイベントのみが既定のアクションを発生させます。
 
 ## 構文
diff --git a/files/ja/web/api/uievent/which/index.md b/files/ja/web/api/uievent/which/index.md
index 6a961bc761ad57..7896eed82845e4 100644
--- a/files/ja/web/api/uievent/which/index.md
+++ b/files/ja/web/api/uievent/which/index.md
@@ -17,7 +17,8 @@ l10n:
 {{domxref("KeyboardEvent")}} においては、 `event.which` は、英数字キーと非英数字キーのどちらが押されたかに応じて、押された特定のキーに対する数値のコードを含んでいます。
 詳しくは非推奨の {{domxref("KeyboardEvent.charCode")}} と {{domxref("KeyboardEvent.keyCode")}} を参照してください。
 
-> **メモ:** 新しいコードでは {{domxref("KeyboardEvent.key")}} または {{domxref("KeyboardEvent.code")}} を検討してください。
+> [!NOTE]
+> 新しいコードでは {{domxref("KeyboardEvent.key")}} または {{domxref("KeyboardEvent.code")}} を検討してください。
 
 ### MouseEvent の値 {{Non-standard_Inline}}
 
@@ -30,7 +31,8 @@ l10n:
 
 左利き用に設定されたマウスの場合、ボタンの動作は逆になります。この場合、値は右から左に読み取られます。
 
-> **メモ:** 新しいコードでは {{domxref("MouseEvent.button")}} を検討してください。
+> [!NOTE]
+> 新しいコードでは {{domxref("MouseEvent.button")}} を検討してください。
 
 ## 例
 
diff --git a/files/ja/web/api/url/canparse_static/index.md b/files/ja/web/api/url/canparse_static/index.md
index b2ab9fcfbd2757..e2c8cbe96935b5 100644
--- a/files/ja/web/api/url/canparse_static/index.md
+++ b/files/ja/web/api/url/canparse_static/index.md
@@ -30,7 +30,8 @@ URL.canParse(url, base)
   - : `url` が相対 URL の場合に使用するベース URL を表す文字列です。
     指定されなかった場合、既定値は `undefined` です。
 
-> **メモ:** 引数 `url` と `base` はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。
+> [!NOTE]
+> 引数 `url` と `base` はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。
 > 具体的な例としては、既存の {{domxref("URL")}} オブジェクトをどちらの引数にも使用することができ、そのオブジェクトの {{domxref("URL.href", "href")}} プロパティに文字列化されます。
 
 ### 返値
diff --git a/files/ja/web/api/url/createobjecturl_static/index.md b/files/ja/web/api/url/createobjecturl_static/index.md
index 1fb47e75dbf104..8c50d87adbf6cd 100644
--- a/files/ja/web/api/url/createobjecturl_static/index.md
+++ b/files/ja/web/api/url/createobjecturl_static/index.md
@@ -16,7 +16,8 @@ URL の寿命は、それを作成したウィンドウ内の {{domxref("documen
 
 {{AvailableInWorkers}}
 
-> **メモ:** この機能はメモリーリークを生み出す可能性があるため、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内で利用することは*できません*。
+> [!NOTE]
+> この機能はメモリーリークを生み出す可能性があるため、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内で利用することは*できません*。
 
 ## 構文
 
@@ -49,7 +50,8 @@ URL.createObjectURL(object)
 
 古いバージョンの Media Source 仕様書では、 {{HTMLElement("video")}} 要素にストリームを添付するには {{domxref("MediaStream")}} にオブジェクト URL を生成する必要があるとしてます。 これはもう必要なく、ブラウザーはこのようにする対応を削除してきています。
 
-> **警告:** もし {{domxref("URL/createObjectURL_static", "createObjectURL()")}} でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
+> [!WARNING]
+> もし {{domxref("URL/createObjectURL_static", "createObjectURL()")}} でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/url/revokeobjecturl_static/index.md b/files/ja/web/api/url/revokeobjecturl_static/index.md
index 27207be176a4f9..e4917f08d6b645 100644
--- a/files/ja/web/api/url/revokeobjecturl_static/index.md
+++ b/files/ja/web/api/url/revokeobjecturl_static/index.md
@@ -14,7 +14,8 @@ l10n:
 
 {{AvailableInWorkers}}
 
-> **メモ:** このメソッドは、{{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるため、サービスワーカーからは利用できません。
+> [!NOTE]
+> このメソッドは、{{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるため、サービスワーカーからは利用できません。
 
 ## 構文
 
diff --git a/files/ja/web/api/url/url/index.md b/files/ja/web/api/url/url/index.md
index 6bdaed8b1b35dc..3ee42f49422202 100644
--- a/files/ja/web/api/url/url/index.md
+++ b/files/ja/web/api/url/url/index.md
@@ -31,7 +31,8 @@ new URL(url, base)
   - : `url` が相対 URL の場合に使用するベース URL を表す文字列です。
     指定されなかった場合、既定値は `undefined` です。
 
-> **メモ:** 引数 `url` と `base` はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。
+> [!NOTE]
+> 引数 `url` と `base` はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。
 > 具体的な例としては、既存の {{domxref("URL")}} オブジェクトをどちらの引数にも使用することができ、そのオブジェクトの {{domxref("URL.href", "href")}} プロパティに文字列化されます。
 
 ### 例外
diff --git a/files/ja/web/api/urlsearchparams/keys/index.md b/files/ja/web/api/urlsearchparams/keys/index.md
index 085f633303e61d..de06263916153c 100644
--- a/files/ja/web/api/urlsearchparams/keys/index.md
+++ b/files/ja/web/api/urlsearchparams/keys/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`keys()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを反復処理できる{{jsxref("Iteration_protocols",'イテレーター')}}を返します。 キーは文字列です。
 
-> **メモ:** このメソッドは[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
+> [!NOTE]
+> このメソッドは[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 構文
 
diff --git a/files/ja/web/api/urlsearchparams/tostring/index.md b/files/ja/web/api/urlsearchparams/tostring/index.md
index a5e73fea3f0135..fadcabb218bc0c 100644
--- a/files/ja/web/api/urlsearchparams/tostring/index.md
+++ b/files/ja/web/api/urlsearchparams/tostring/index.md
@@ -10,7 +10,8 @@ l10n:
 
 **`toString()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、URL での使用に適したクエリー文字列を返します。
 
-> **メモ:** このメソッドは、疑問符のないクエリー文字列を返します。これは、それを含む [window.location.search](/ja/docs/Web/API/HTMLAnchorElement/search) とは異なります。
+> [!NOTE]
+> このメソッドは、疑問符のないクエリー文字列を返します。これは、それを含む [window.location.search](/ja/docs/Web/API/HTMLAnchorElement/search) とは異なります。
 
 {{availableinworkers}}
 
diff --git a/files/ja/web/api/usbdevice/clearhalt/index.md b/files/ja/web/api/usbdevice/clearhalt/index.md
index f46d12126062b9..816d8c1b266467 100644
--- a/files/ja/web/api/usbdevice/clearhalt/index.md
+++ b/files/ja/web/api/usbdevice/clearhalt/index.md
@@ -30,7 +30,8 @@ clearHalt(direction, endpointNumber)
 
 以下の例は、データ転送の結果の `'stall'` 状態をチェックしてクリアする方法を示します。
 
-> **メモ:** USB デバイスにどのようなデータを渡すことができ、それをどのように渡すかは、デバイスに固有で独特です。
+> [!NOTE]
+> USB デバイスにどのようなデータを渡すことができ、それをどのように渡すかは、デバイスに固有で独特です。
 
 ```js
 while (true) {
diff --git a/files/ja/web/api/usbdevice/opened/index.md b/files/ja/web/api/usbdevice/opened/index.md
index 7bf3295bad7501..de6cc0d51ea93f 100644
--- a/files/ja/web/api/usbdevice/opened/index.md
+++ b/files/ja/web/api/usbdevice/opened/index.md
@@ -17,7 +17,8 @@ l10n:
 
 この例では、複数の色がある LED を搭載した仮想の USB デバイスを扱います。この例は、{{domxref("USBDevice.controlTransferOut")}} を呼び出して LED の色を設定する前にデバイスが開かれているかを確認する方法を示します。
 
-> **メモ:** USB デバイスにどのようなデータを渡すか、そしてどのようにそれを渡すかは、各デバイスに固有で独特です。
+> [!NOTE]
+> USB デバイスにどのようなデータを渡すか、そしてどのようにそれを渡すかは、各デバイスに固有で独特です。
 
 ```js
 async function setDeviceColor(usbDevice, r, g, b) {
diff --git a/files/ja/web/api/validitystate/patternmismatch/index.md b/files/ja/web/api/validitystate/patternmismatch/index.md
index 4bece38abae5ad..7b649fbf01f64d 100644
--- a/files/ja/web/api/validitystate/patternmismatch/index.md
+++ b/files/ja/web/api/validitystate/patternmismatch/index.md
@@ -62,7 +62,8 @@ input:invalid {
 
 この場合、値の長さを決定するのはパターンであるため、値が長すぎたり短すぎたりした場合に発生するのは `patternMismatch` であり、 {{domxref('validityState.tooLong')}} や {{domxref('validityState.tooShort')}} ではないことに注意してください。代わりに [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) と [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) 属性を使用していたら、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になるかもしれません。
 
-> **メモ:** pattern 属性がない場合、 `{{HTMLElement("input/email", "email")}}` 入力型は、少なくとも `x@y` に一致する必要があり、 `{{HTMLElement("input/url", "url")}}` 型は、少なくとも x: に一致する必要があります。無効な場合、pattern 属性がない場合（またはその入力型で pattern 属性が無効な場合）は {{domxref('validityState.typeMismatch')}} が true になります。
+> [!NOTE]
+> pattern 属性がない場合、 `{{HTMLElement("input/email", "email")}}` 入力型は、少なくとも `x@y` に一致する必要があり、 `{{HTMLElement("input/url", "url")}}` 型は、少なくとも x: に一致する必要があります。無効な場合、pattern 属性がない場合（またはその入力型で pattern 属性が無効な場合）は {{domxref('validityState.typeMismatch')}} が true になります。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/view_transitions_api/index.md b/files/ja/web/api/view_transitions_api/index.md
index d5183b971aa4d9..7fe86926feba02 100644
--- a/files/ja/web/api/view_transitions_api/index.md
+++ b/files/ja/web/api/view_transitions_api/index.md
@@ -24,7 +24,8 @@ l10n:
 
 ビュートランジション API は、要求される DOM の変更とトランジションアニメーションをより簡単に処理する方法を提供します。
 
-> **メモ:** ビュートランジション API は、現在のところ文書間のビュートランジションを可能にするものではありませんが、これは将来の仕様レベルで計画されており、活発に作業されています。
+> [!NOTE]
+> ビュートランジション API は、現在のところ文書間のビュートランジションを可能にするものではありませんが、これは将来の仕様レベルで計画されており、活発に作業されています。
 
 ### 基本的なビュートランジションの作成
 
diff --git a/files/ja/web/api/vrdisplay/cancelanimationframe/index.md b/files/ja/web/api/vrdisplay/cancelanimationframe/index.md
index 8fa9f18bfebd98..c32fd52b7c70e8 100644
--- a/files/ja/web/api/vrdisplay/cancelanimationframe/index.md
+++ b/files/ja/web/api/vrdisplay/cancelanimationframe/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/cancelAnimationFrame
 
 **`cancelAnimationFrame()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、 {{domxref("Window.cancelAnimationFrame")}} の特別な実装であり、 {{domxref("VRDisplay.requestAnimationFrame()")}} で登録したコールバックを登録解除します．
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 構文
 
@@ -85,7 +86,8 @@ function drawVRScene() {
 }
 ```
 
-> **メモ:** 完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
+> [!NOTE]
+> 完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplay/capabilities/index.md b/files/ja/web/api/vrdisplay/capabilities/index.md
index b908e85ddb345d..9f342c992c2b36 100644
--- a/files/ja/web/api/vrdisplay/capabilities/index.md
+++ b/files/ja/web/api/vrdisplay/capabilities/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/capabilities
 
 **`capabilities`** は {{domxref("VRDisplay")}} インターフェイスの読み取り専用プロパティで、 `VRDisplay` の様々な利用可能な機能を示す {{domxref("VRDisplayCapabilities")}} オブジェクトを返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ### 値
 
diff --git a/files/ja/web/api/vrdisplay/depthfar/index.md b/files/ja/web/api/vrdisplay/depthfar/index.md
index 543e8b5433a8f7..994cca6cbb6f6d 100644
--- a/files/ja/web/api/vrdisplay/depthfar/index.md
+++ b/files/ja/web/api/vrdisplay/depthfar/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/depthFar
 
 **`depthFar`** は {{domxref("VRDisplay")}} インターフェイスのプロパティで、 [eye view frustum](https://en.wikipedia.org/wiki/Viewing_frustum) (ビューフラスタム；つまりシーンの可視領域の境界) の far 平面を定義している z-depth の取得と設定を行います．
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 一般的にはこの値をそのままにしておきますが、低速のコンピューターでパフォーマンスを向上させる場合は、この値を小さくするとよいでしょう。
 
diff --git a/files/ja/web/api/vrdisplay/depthnear/index.md b/files/ja/web/api/vrdisplay/depthnear/index.md
index 5c4f80b051c848..bd3caf253008b7 100644
--- a/files/ja/web/api/vrdisplay/depthnear/index.md
+++ b/files/ja/web/api/vrdisplay/depthnear/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/depthNear
 
 **`depthNear`** は {{domxref("VRDisplay")}} インターフェイスのプロパティで、 [eye view frustum](https://en.wikipedia.org/wiki/Viewing_frustum) (ビューフラスタム；つまりシーンの可視領域の境界) の near 平面を定義している z-depth の取得と設定を行います。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 一般的には、この値をそのままにしておきますが、遅いコンピューターでパフォーマンスを向上させようとしている場合や、ニアバウンダリーをより遠くに作ることで UI が意味をなす場合などは、この値を大きくするとよいでしょう。
 
diff --git a/files/ja/web/api/vrdisplay/displayid/index.md b/files/ja/web/api/vrdisplay/displayid/index.md
index 6a44cc74e98d04..61818ecb178d84 100644
--- a/files/ja/web/api/vrdisplay/displayid/index.md
+++ b/files/ja/web/api/vrdisplay/displayid/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/displayId
 
 **`displayId`** は {{domxref("VRDisplay")}} インターフェイスの読み取り専用プロパティで、この特定の `VRDisplay` の識別子を返します。これは、 [Gamepad API](/ja/docs/Web/API/Gamepad_API) の関連付けポイントとしても使用されます( {{domxref("Gamepad.displayId")}} を参照)。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ### 値
 
diff --git a/files/ja/web/api/vrdisplay/displayname/index.md b/files/ja/web/api/vrdisplay/displayname/index.md
index 473c7853a48b20..e2468c0640dca1 100644
--- a/files/ja/web/api/vrdisplay/displayname/index.md
+++ b/files/ja/web/api/vrdisplay/displayname/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/displayName
 
 **`displayName`** は {{domxref("VRDisplay")}} インターフェイスの読み取り専用プロパティで、 `VRDisplay` を識別する人間が読める名前を返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 これは通常、 "Oculus VR HMD (HMD)" や "Oculus VR HMD (Sensor)" のようなものになります。
 
diff --git a/files/ja/web/api/vrdisplay/exitpresent/index.md b/files/ja/web/api/vrdisplay/exitpresent/index.md
index a4c78682862c7b..ee953a605ed4bc 100644
--- a/files/ja/web/api/vrdisplay/exitpresent/index.md
+++ b/files/ja/web/api/vrdisplay/exitpresent/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/exitPresent
 
 **`exitPresent()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、この `VRDisplay` がシーンを表示するのを停止します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 構文
 
@@ -74,7 +75,8 @@ if (navigator.getVRDisplays) {
 }
 ```
 
-> **メモ:** この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
+> [!NOTE]
+> この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplay/geteyeparameters/index.md b/files/ja/web/api/vrdisplay/geteyeparameters/index.md
index a69078010d63f6..3844a3a8026bb9 100644
--- a/files/ja/web/api/vrdisplay/geteyeparameters/index.md
+++ b/files/ja/web/api/vrdisplay/geteyeparameters/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/getEyeParameters
 
 **`getEyeParameters()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、指定された目の視線パラメーターを持つ {{domxref("VREyeParameters")}} オブジェクトを返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/api/vrdisplay/getframedata/index.md b/files/ja/web/api/vrdisplay/getframedata/index.md
index ff463b161a2903..29558012d9257b 100644
--- a/files/ja/web/api/vrdisplay/getframedata/index.md
+++ b/files/ja/web/api/vrdisplay/getframedata/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/getFrameData
 
 **`getFrameData()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、 {{domxref("VRFrameData")}} オブジェクトを受け取り、現在のフレームをレンダリングするために必要な情報を入力します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 現在のフレームの {{domxref("VRPose")}} とビューおよび投影行列が含まれます。
 
@@ -90,7 +91,8 @@ function drawVRScene() {
 }
 ```
 
-> **メモ:** この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
+> [!NOTE]
+> この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplay/getimmediatepose/index.md b/files/ja/web/api/vrdisplay/getimmediatepose/index.md
index 81367a5c230c0a..900999c1511060 100644
--- a/files/ja/web/api/vrdisplay/getimmediatepose/index.md
+++ b/files/ja/web/api/vrdisplay/getimmediatepose/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/getImmediatePose
 
 **`getImmediatePose()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、 `VRDisplay` の現在のポーズを定義した {{domxref("VRPose")}} オブジェクトを返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/api/vrdisplay/getlayers/index.md b/files/ja/web/api/vrdisplay/getlayers/index.md
index f2dac7c537bb93..4e534d82902c7c 100644
--- a/files/ja/web/api/vrdisplay/getlayers/index.md
+++ b/files/ja/web/api/vrdisplay/getlayers/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/getLayers
 
 **`getLayers()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、 `VRDisplay` が現在表示しているレイヤーを返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/api/vrdisplay/getpose/index.md b/files/ja/web/api/vrdisplay/getpose/index.md
index 435ba252b3ed77..36e6d65c330855 100644
--- a/files/ja/web/api/vrdisplay/getpose/index.md
+++ b/files/ja/web/api/vrdisplay/getpose/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/getPose
 
 **`getPose()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、現在のフレームが実際に描画される時点の未来の `VRDisplay` の予測ポーズを決める {{domxref("VRPose")}} オブジェクトを返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 >
 > こちらでも非推奨でした。 — 代わりに {{domxref("VRDisplay.getFrameData()")}} で {{domxref("VRPose")}} オブジェクトを受け取ってください。
 
diff --git a/files/ja/web/api/vrdisplay/index.md b/files/ja/web/api/vrdisplay/index.md
index f56f15f0172544..d7e08efc3513f5 100644
--- a/files/ja/web/api/vrdisplay/index.md
+++ b/files/ja/web/api/vrdisplay/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay
 
 **`VRDisplay`** は [WebVR API](/ja/docs/Web/API/WebVR_API) のインターフェイスで、この API が対応している VR 機器を表します。機器 ID や説明文のような汎用的な情報が含まれており、 VR シーンの表示を開始するためのメソッドや、視線パラメーターやディスプレイの備える機能の取得、その他の重要な機能を含んでいます。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 {{domxref("Navigator.getVRDisplays()")}} を呼び出すことで、すべての接続されている VR 機器の配列が返されます。
 
@@ -71,7 +72,8 @@ if (navigator.getVRDisplays) {
 }
 ```
 
-> **メモ:** この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で確認できます。
+> [!NOTE]
+> この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で確認できます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplay/isconnected/index.md b/files/ja/web/api/vrdisplay/isconnected/index.md
index d692f8aa1e4936..86e61cff0c3741 100644
--- a/files/ja/web/api/vrdisplay/isconnected/index.md
+++ b/files/ja/web/api/vrdisplay/isconnected/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/isConnected
 
 **`isConnected`** は {{domxref("VRDisplay")}} インターフェイスの読み取り専用プロパティで、この `VRDisplay` がコンピューターに接続されているかどうかを示す論理値を返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ### 値
 
diff --git a/files/ja/web/api/vrdisplay/ispresenting/index.md b/files/ja/web/api/vrdisplay/ispresenting/index.md
index 99a576e4216338..35031b7a4106e4 100644
--- a/files/ja/web/api/vrdisplay/ispresenting/index.md
+++ b/files/ja/web/api/vrdisplay/ispresenting/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/isPresenting
 
 **`isPresenting`** は {{domxref("VRDisplay")}} インターフェイスの読み取り専用プロパティで、 `VRDisplay` が現在コンテンツを表示中かどうかを示す論理値を返します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ### 値
 
@@ -36,7 +37,8 @@ function onVRExitPresent() {
 }
 ```
 
-> **メモ:** このコードスニペットは [Google's VR Presentation demo](https://github.com/toji/webvr.info/blob/master/samples/03-vr-presentation.html) から取ったものです。
+> [!NOTE]
+> このコードスニペットは [Google's VR Presentation demo](https://github.com/toji/webvr.info/blob/master/samples/03-vr-presentation.html) から取ったものです。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplay/requestanimationframe/index.md b/files/ja/web/api/vrdisplay/requestanimationframe/index.md
index 8ee71edc624d18..0b5335cf965712 100644
--- a/files/ja/web/api/vrdisplay/requestanimationframe/index.md
+++ b/files/ja/web/api/vrdisplay/requestanimationframe/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/requestAnimationFrame
 
 **`requestAnimationFrame()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、 {{domxref("Window.requestAnimationFrame")}} の特別な実装です．このメソッドは `VRDisplay` がレンダリングされている間、新しいフレームが来るたびに呼び出されるコールバック関数を含みます。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 - `VRDisplay` がシーンを表示していないときは、 {{domxref("Window.requestAnimationFrame")}} と等価に動作します。
 - `VRDisplay` が表示されている場合は、ネイティブのリフレッシュレートでコールバックが呼び出されます。
@@ -90,7 +91,8 @@ function drawVRScene() {
 }
 ```
 
-> **メモ:** この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
+> [!NOTE]
+> この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplay/requestpresent/index.md b/files/ja/web/api/vrdisplay/requestpresent/index.md
index b0d40d81393653..b2ff8b7a72632b 100644
--- a/files/ja/web/api/vrdisplay/requestpresent/index.md
+++ b/files/ja/web/api/vrdisplay/requestpresent/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/requestPresent
 
 **`requestPresent()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、`VRDisplay` へのシーン表示を開始します。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 構文
 
@@ -80,7 +81,8 @@ if (navigator.getVRDisplays) {
 }
 ```
 
-> **メモ:** この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
+> [!NOTE]
+> この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplay/resetpose/index.md b/files/ja/web/api/vrdisplay/resetpose/index.md
index efbc4b7a0fdb1b..79909dc79a941e 100644
--- a/files/ja/web/api/vrdisplay/resetpose/index.md
+++ b/files/ja/web/api/vrdisplay/resetpose/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/resetPose
 
 **`resetPose()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、`VRDisplay` のポーズをリセットして、現在の {{domxref("VRPose.position")}} と {{domxref("VRPose.orientation")}} を "原点/ゼロ位置" の値として扱います。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 `resetPost()` を呼出した後は、 {{domxref("VRDisplay.getPose()")}}/{{domxref("VRDisplay.getImmediatePose()")}} から返された未来予測ポーズは、`resetPose()` が最後に呼び出された時点からの相対的な `VRDisplay` の位置になります。また、`resetPose()` が最後に呼び出された時点の VR ディスプレイのヨー (yaw) を前方として扱います。
 
diff --git a/files/ja/web/api/vrdisplay/stageparameters/index.md b/files/ja/web/api/vrdisplay/stageparameters/index.md
index f7bcbce6ab1dc4..e42db5f1fcb1e3 100644
--- a/files/ja/web/api/vrdisplay/stageparameters/index.md
+++ b/files/ja/web/api/vrdisplay/stageparameters/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/stageParameters
 
 **`stageParameters`** は {{domxref("VRDisplay")}} インターフェイスの読み取り専用プロパティで、 `VRDisplay` がルームスケール体験をサポートしている場合に、ルームスケールパラメーターを持つ {{domxref("VRStageParameters")}} オブジェクトを返します．
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ### 値
 
diff --git a/files/ja/web/api/vrdisplay/submitframe/index.md b/files/ja/web/api/vrdisplay/submitframe/index.md
index b55fe06e5db251..7fee6d08e3038e 100644
--- a/files/ja/web/api/vrdisplay/submitframe/index.md
+++ b/files/ja/web/api/vrdisplay/submitframe/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRDisplay/submitFrame
 
 **`submitFrame()`** は {{domxref("VRDisplay")}} インターフェイスのメソッドで、 `VRDisplay` 内に現在表示中の {{domxref("VRLayerInit")}} の現在の状態をキャプチャします。
 
-> **メモ:** このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このプロパティは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 その後、 {{domxref("VRPose")}} と {{domxref("getFrameData()")}} の最後の呼び出しによって提供された行列を使用してフレームがレンダリングされる必要があります。
 
@@ -88,7 +89,8 @@ function drawVRScene() {
 }
 ```
 
-> **メモ:** この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
+> [!NOTE]
+> この完全なコードは [raw-webgl-example](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js) で見ることができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/vrdisplaycapabilities/canpresent/index.md b/files/ja/web/api/vrdisplaycapabilities/canpresent/index.md
index 98b711ac14d29e..22863d7bc09a6d 100644
--- a/files/ja/web/api/vrdisplaycapabilities/canpresent/index.md
+++ b/files/ja/web/api/vrdisplaycapabilities/canpresent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`canPresent`** は {{domxref("VRDisplayCapabilities")}} インターフェイスの読み取り専用プロパティで、VR ディスプレイが（HMD を通じて）コンテンツを表示可能かどうかの状態を論理値で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 これは、 6 自由度追跡が可能であるものの、 {{domxref("VRDisplay.requestPresent()")}} が意味を持たない「マジックウィンドウ」機器を識別するのに有益な機能です。`canPresent` が `false` の場合、 {{domxref("VRDisplay.requestPresent()")}} の呼び出しは失敗し、 {{domxref("VRDisplay.getEyeParameters()")}} は `null` を返します。
 
diff --git a/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md b/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
index c232aa472e3531..d181c214f0a8d1 100644
--- a/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
+++ b/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
@@ -7,11 +7,13 @@ l10n:
 
 {{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 **`hasExternalDisplay`** は {{domxref("VRDisplayCapabilities")}} インターフェイスの読み取り専用プロパティで、VR ディスプレイがこの端末の主ディスプレイから分離しているどうかを示す論理値を返します。
 
-> **メモ:** 表示中の VR コンテンツがその端末の他のコンテンツを隠してしまう場合 `false` を返します。この場合、アプリは VR コンテンツのミラーリングしようとしたり、 VR ではない UI を更新しようとすべきではありません。こうしたコンテンツは表示されないからです。
+> [!NOTE]
+> 表示中の VR コンテンツがその端末の他のコンテンツを隠してしまう場合 `false` を返します。この場合、アプリは VR コンテンツのミラーリングしようとしたり、 VR ではない UI を更新しようとすべきではありません。こうしたコンテンツは表示されないからです。
 
 ## 値
 
diff --git a/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.md b/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.md
index d46853d8fe9d7b..2d83dd190257ce 100644
--- a/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.md
+++ b/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`hasOrientation`** は {{domxref("VRDisplayCapabilities")}} インターフェイスの読み取り専用プロパティで、その VR ディスプレイがトラッキング機能を持っていて向き情報を取得できれば `true` を返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrdisplaycapabilities/hasposition/index.md b/files/ja/web/api/vrdisplaycapabilities/hasposition/index.md
index 56f2deb9fe45ef..1459d1f47f25d2 100644
--- a/files/ja/web/api/vrdisplaycapabilities/hasposition/index.md
+++ b/files/ja/web/api/vrdisplaycapabilities/hasposition/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`hasPosition`** は {{domxref("VRDisplayCapabilities")}} インターフェイスの読み取り専用プロパティで、その VR ディスプレイがトラッキング機能を備えていて位置情報を返すことができるれば `true` を返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrdisplaycapabilities/index.md b/files/ja/web/api/vrdisplaycapabilities/index.md
index 0b8e600a073037..eeee543fc8d902 100644
--- a/files/ja/web/api/vrdisplaycapabilities/index.md
+++ b/files/ja/web/api/vrdisplaycapabilities/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`VRDisplayCapabilities`** は [WebVR API](/ja/docs/Web/API/WebVR_API) のインターフェイスで、 {{domxref("VRDisplay")}} の利用可能な機能を示しています。この機能は，例えば位置情報を返すことが可能か、といった VR 機器の動作可能テストに使うことができます。
 
-> **メモ:** このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 このインターフェイスには {{domxref("VRDisplay.capabilities")}} プロパティを通じてアクセスできます．
 
diff --git a/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.md b/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.md
index a7f0e8bd00d45a..d9c8a2886c0717 100644
--- a/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.md
+++ b/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`maxLayers`** は {{domxref("VRDisplayCapabilities")}} インターフェイスの読み取り専用プロパティで、その VR ディスプレイが同時に表示できる {{domxref("VRLayerInit")}} の最大値を示す数値を返します（例えば {{domxref("Display.requestPresent()")}} が受け取ることのできる配列の最大長です）。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ### 値
 
diff --git a/files/ja/web/api/vrdisplayevent/display/index.md b/files/ja/web/api/vrdisplayevent/display/index.md
index dcc532abe0763a..007a489752d4f5 100644
--- a/files/ja/web/api/vrdisplayevent/display/index.md
+++ b/files/ja/web/api/vrdisplayevent/display/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`display`** は {{domxref("VRDisplayEvent")}} インターフェイスの読み取り専用プロパティで、このイベントに関連付けられた {{domxref("VRDisplay")}} を返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrdisplayevent/index.md b/files/ja/web/api/vrdisplayevent/index.md
index bd7a53c375641e..c5679a99b43bb5 100644
--- a/files/ja/web/api/vrdisplayevent/index.md
+++ b/files/ja/web/api/vrdisplayevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`VRDisplayEvent`** は [WebVR API](/ja/docs/Web/API/WebVR_API) のインターフェイスで、 WebVR 関連イベントのイベントオブジェクトを表します（[WebVR ウインドウ拡張機能のリスト](/ja/docs/Web/API/WebVR_API#window)を参照）。
 
-> **メモ:** このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## コンストラクター
 
diff --git a/files/ja/web/api/vrdisplayevent/reason/index.md b/files/ja/web/api/vrdisplayevent/reason/index.md
index 25866cabba07da..5f0c4b236dd6eb 100644
--- a/files/ja/web/api/vrdisplayevent/reason/index.md
+++ b/files/ja/web/api/vrdisplayevent/reason/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`reason`** は {{domxref("VRDisplayEvent")}} インターフェイスの読み取り専用プロパティで、イベントが発生した理由を人間可読な形で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrdisplayevent/vrdisplayevent/index.md b/files/ja/web/api/vrdisplayevent/vrdisplayevent/index.md
index 5bea02cf09b030..20caec3cb843fc 100644
--- a/files/ja/web/api/vrdisplayevent/vrdisplayevent/index.md
+++ b/files/ja/web/api/vrdisplayevent/vrdisplayevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`VRDisplayEvent()`** コンストラクターは、 {{domxref("VRDisplayEvent")}} オブジェクトを作成します。
 
-> **メモ:** このコンストラクターは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このコンストラクターは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/api/vreyeparameters/fieldofview/index.md b/files/ja/web/api/vreyeparameters/fieldofview/index.md
index 1914eab7ea7e4c..b1c62dd26c1818 100644
--- a/files/ja/web/api/vreyeparameters/fieldofview/index.md
+++ b/files/ja/web/api/vreyeparameters/fieldofview/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`fieldOfView`** は{{domxref("VREyeParameters")}} インターフェイスの読み取り専用プロパティで、現在の眼の視野角を表します．この値は瞳孔間距離 (IPD) をユーザーが調整すると、それに応じて変化します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vreyeparameters/index.md b/files/ja/web/api/vreyeparameters/index.md
index 76eb2575d046a9..760fc36f2bdbc0 100644
--- a/files/ja/web/api/vreyeparameters/index.md
+++ b/files/ja/web/api/vreyeparameters/index.md
@@ -9,11 +9,13 @@ l10n:
 
 **`VREyeParameters`** は [WebVR API](/ja/docs/Web/API/WebVR_API) のインターフェイスで、指定した目のためにシーンを正しくレンダリングするためのすべての情報（視界の情報を含む）を表します。
 
-> **メモ:** このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 このインターフェイスは {{domxref("VRDisplay.getEyeParameters()")}} メソッドを通じてアクセスできます。
 
-> **警告:** このインターフェイスは、ビューおよび投影行列を計算するために使用すべきではありません。ハードウェアの互換性を可能な限り確保するために、{{domxref("VRFrameData")}} で指定された行列を使用してください。
+> [!WARNING]
+> このインターフェイスは、ビューおよび投影行列を計算するために使用すべきではありません。ハードウェアの互換性を可能な限り確保するために、{{domxref("VRFrameData")}} で指定された行列を使用してください。
 
 ## インスタンスプロパティ
 
diff --git a/files/ja/web/api/vreyeparameters/maximumfieldofview/index.md b/files/ja/web/api/vreyeparameters/maximumfieldofview/index.md
index ed44c9850cc4d8..3bd44f8fa31708 100644
--- a/files/ja/web/api/vreyeparameters/maximumfieldofview/index.md
+++ b/files/ja/web/api/vreyeparameters/maximumfieldofview/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`maximumFieldOfView`** は {{domxref("VREyeParameters")}} インターフェイスの読み取り専用プロパティで、現在の目における最大の視野を示します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vreyeparameters/minimumfieldofview/index.md b/files/ja/web/api/vreyeparameters/minimumfieldofview/index.md
index bf8975c2b4c76b..ae95ebc8920367 100644
--- a/files/ja/web/api/vreyeparameters/minimumfieldofview/index.md
+++ b/files/ja/web/api/vreyeparameters/minimumfieldofview/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`minimumFieldOfView`** は {{domxref("VREyeParameters")}} インターフェイスの読み取り専用プロパティで、現在の目における最小の視野を示します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vreyeparameters/offset/index.md b/files/ja/web/api/vreyeparameters/offset/index.md
index 5e025be4ea08ed..486970846b591a 100644
--- a/files/ja/web/api/vreyeparameters/offset/index.md
+++ b/files/ja/web/api/vreyeparameters/offset/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`offset`** は {{domxref("VREyeParameters")}} インターフェイスの読み取り専用プロパティで、は、ユーザーの目と目の間の中心点から目の中心までのオフセットを表します。単位はメートルです。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 この値は、ユーザーの瞳孔間距離（IPD）の半分で あるべきですが、指定された目のヘッドセットの中心点からレンズの中心点までの距離を表してもかまいません。
 
@@ -17,7 +18,8 @@ l10n:
 
 ユーザーの目と目の間の中心点から目の中心までのオフセットをメートル単位で記述したベクトルを表す {{jsxref("Float32Array")}} です。
 
-> **メモ:** 左目の値は負の値、右目の値は正の値になります。
+> [!NOTE]
+> 左目の値は負の値、右目の値は正の値になります。
 
 ## 例
 
diff --git a/files/ja/web/api/vreyeparameters/renderheight/index.md b/files/ja/web/api/vreyeparameters/renderheight/index.md
index faf07cdfc8482b..c14342d5e7ecff 100644
--- a/files/ja/web/api/vreyeparameters/renderheight/index.md
+++ b/files/ja/web/api/vreyeparameters/renderheight/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`renderHeight`** は {{domxref("VREyeParameters")}} インターフェイスの読み取り専用プロパティで、それぞれの目のビューポートの推奨レンダーターゲットの高さを、ピクセル単位で表します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 これは既にデバイスピクセル単位なので、 [Window.devicePixelRatio](/ja/docs/Web/API/Window/devicePixelRatio) を [HTMLCanvasElement.height](/ja/docs/Web/API/HTMLCanvasElement/height) に設定する前に掛け合わせる必要はありません。
 
diff --git a/files/ja/web/api/vreyeparameters/renderwidth/index.md b/files/ja/web/api/vreyeparameters/renderwidth/index.md
index 52103e162608c5..41de0a1e0ccd7c 100644
--- a/files/ja/web/api/vreyeparameters/renderwidth/index.md
+++ b/files/ja/web/api/vreyeparameters/renderwidth/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`renderWidth`** は {{domxref("VREyeParameters")}} インターフェイスの読み取り専用プロパティでそれぞれの目のビューポートの推奨レンダーターゲットの幅を、ピクセル単位で表します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 これは既にデバイスピクセル単位なので、 [Window.devicePixelRatio](/ja/docs/Web/API/Window/devicePixelRatio) を [HTMLCanvasElement.width](/ja/docs/Web/API/HTMLCanvasElement/width) に設定する前に掛け合わせる必要はありません。
 
diff --git a/files/ja/web/api/vrfieldofview/downdegrees/index.md b/files/ja/web/api/vrfieldofview/downdegrees/index.md
index 79766a44cc0126..a614ef2b89cfd9 100644
--- a/files/ja/web/api/vrfieldofview/downdegrees/index.md
+++ b/files/ja/web/api/vrfieldofview/downdegrees/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`downDegrees`** は {{domxref("VRFieldOfView")}} インターフェイスの読み取り専用プロパティで、視野が下方向に何度広がっているかを返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrfieldofview/index.md b/files/ja/web/api/vrfieldofview/index.md
index 8851200f805466..65d3f9c2aa09e6 100644
--- a/files/ja/web/api/vrfieldofview/index.md
+++ b/files/ja/web/api/vrfieldofview/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`VRFieldOfView`** は [WebVR API](/ja/docs/Web/API/WebVR_API) のインターフェイスで、中心点からの視野を示す 4 つの角度で定義される視界を表現します。
 
-> **メモ:** このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## プロパティ
 
diff --git a/files/ja/web/api/vrfieldofview/leftdegrees/index.md b/files/ja/web/api/vrfieldofview/leftdegrees/index.md
index d99ca746a01244..37a0fa8b0672e4 100644
--- a/files/ja/web/api/vrfieldofview/leftdegrees/index.md
+++ b/files/ja/web/api/vrfieldofview/leftdegrees/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`leftDegrees`** は {{domxref("VRFieldOfView")}} インターフェイスの読み取り専用プロパティで、視野が左方向に何度広がっているかを返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrfieldofview/rightdegrees/index.md b/files/ja/web/api/vrfieldofview/rightdegrees/index.md
index ed9e5f9a21433c..840b77257e3c8b 100644
--- a/files/ja/web/api/vrfieldofview/rightdegrees/index.md
+++ b/files/ja/web/api/vrfieldofview/rightdegrees/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`rightDegrees`** は {{domxref("VRFieldOfView")}} インターフェイスの読み取り専用プロパティで、視野が右方向に何度広がっているかを返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrfieldofview/updegrees/index.md b/files/ja/web/api/vrfieldofview/updegrees/index.md
index 9bba7f005a26e3..8841e8917f3b72 100644
--- a/files/ja/web/api/vrfieldofview/updegrees/index.md
+++ b/files/ja/web/api/vrfieldofview/updegrees/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`upDegrees`** は {{domxref("VRFieldOfView")}} インターフェイスの読み取り専用プロパティで、視野が上方向に何度広がっているかを返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrframedata/index.md b/files/ja/web/api/vrframedata/index.md
index 9c2b9673440b86..62dda407f400fd 100644
--- a/files/ja/web/api/vrframedata/index.md
+++ b/files/ja/web/api/vrframedata/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRFrameData
 
 **`VRFrameData`** は [WebVR API]("/ja/docs/Web/API/WebVR_API) のインターフェイスで、 VR シーンの 1 つのフレームを描画するのに必要となるすべての情報を表現します。 {{domxref("VRDisplay.getFrameData()")}} で構築します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## コンストラクター
 
diff --git a/files/ja/web/api/vrframedata/leftprojectionmatrix/index.md b/files/ja/web/api/vrframedata/leftprojectionmatrix/index.md
index bfdae09b41f67d..2ea948a4e908c1 100644
--- a/files/ja/web/api/vrframedata/leftprojectionmatrix/index.md
+++ b/files/ja/web/api/vrframedata/leftprojectionmatrix/index.md
@@ -7,11 +7,13 @@ slug: Web/API/VRFrameData/leftProjectionMatrix
 
 **`leftProjectionMatrix`** は {{domxref("VRFrameData")}} インタフェースの読み取り専用プロパティで、 4 行 4 列の行列を表す {{jsxref("Float32Array")}} を返します。この行列は、左目の描画に利用される射影を表します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 この値は、 WebGL の {{domxref("WebGLRenderingContext.uniformMatrix", "uniformMatrix4fv")}} 関数へ直接渡されるでしょう。
 
-> **警告:** アプリケーションは、この行列を改変せずに使用することを強く薦めます。描画時にこの射影行列の使用に失敗すると、表現されたフレームは歪んだり、正しく揃わなかったりし、その結果として、様々な度合いのユーザの不快感を生みます。
+> [!WARNING]
+> アプリケーションは、この行列を改変せずに使用することを強く薦めます。描画時にこの射影行列の使用に失敗すると、表現されたフレームは歪んだり、正しく揃わなかったりし、その結果として、様々な度合いのユーザの不快感を生みます。
 
 ## 値
 
diff --git a/files/ja/web/api/vrframedata/leftviewmatrix/index.md b/files/ja/web/api/vrframedata/leftviewmatrix/index.md
index 79b85106a248f9..c1877ab8ed7388 100644
--- a/files/ja/web/api/vrframedata/leftviewmatrix/index.md
+++ b/files/ja/web/api/vrframedata/leftviewmatrix/index.md
@@ -7,11 +7,13 @@ slug: Web/API/VRFrameData/leftViewMatrix
 
 **`leftViewMatrix`** は {{domxref("VRFrameData")}} インターフェイスの読み取り専用プロパティで、 4 行 4 列の行列を表す {{jsxref("Float32Array")}} を返します。この行列は、左目の描画に利用されるビュー変換を表します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 この値は、 WebGL の {{domxref("WebGLRenderingContext.uniformMatrix", "uniformMatrix4fv")}} 関数へ直接渡されるでしょう。
 
-> **警告:** 描画時にアプリケーションがこの行列を使用することを強く薦めます。
+> [!WARNING]
+> 描画時にアプリケーションがこの行列を使用することを強く薦めます。
 
 ## 値
 
diff --git a/files/ja/web/api/vrframedata/pose/index.md b/files/ja/web/api/vrframedata/pose/index.md
index 5990774ac27465..78d14359e98aed 100644
--- a/files/ja/web/api/vrframedata/pose/index.md
+++ b/files/ja/web/api/vrframedata/pose/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRFrameData/pose
 
 **`pose`** は {{domxref("VRFrameData")}} インターフェイスの読み取り専用プロパティで、現在の {{domxref("VRFrameData.timestamp")}} の時点での {{domxref("VRDisplay")}} の {{domxref("VRPose")}} を返します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrframedata/rightprojectionmatrix/index.md b/files/ja/web/api/vrframedata/rightprojectionmatrix/index.md
index 490fc9184f3fd7..69e06b07085464 100644
--- a/files/ja/web/api/vrframedata/rightprojectionmatrix/index.md
+++ b/files/ja/web/api/vrframedata/rightprojectionmatrix/index.md
@@ -7,11 +7,13 @@ slug: Web/API/VRFrameData/rightProjectionMatrix
 
 **`rightProjectionMatrix`** は {{domxref("VRFrameData")}} インタフェースの読み取り専用プロパティで、 4 行 4 列の行列を表す {{jsxref("Float32Array")}} を返します。この行列は、右目の描画に利用される射影を表します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 この値は、 WebGL の {{domxref("WebGLRenderingContext.uniformMatrix", "uniformMatrix4fv")}} 関数へ直接渡されるでしょう。
 
-> **警告:** アプリケーションは、この行列を改変せずに使用することを強く薦めます。描画時にこの射影行列の使用に失敗すると、表現されたフレームは歪んだり、正しく揃わなかったりし、その結果として、様々な度合いのユーザの不快感を生みます。
+> [!WARNING]
+> アプリケーションは、この行列を改変せずに使用することを強く薦めます。描画時にこの射影行列の使用に失敗すると、表現されたフレームは歪んだり、正しく揃わなかったりし、その結果として、様々な度合いのユーザの不快感を生みます。
 
 ## 値
 
diff --git a/files/ja/web/api/vrframedata/rightviewmatrix/index.md b/files/ja/web/api/vrframedata/rightviewmatrix/index.md
index 4826b1e8e4bd19..8d25df7e524120 100644
--- a/files/ja/web/api/vrframedata/rightviewmatrix/index.md
+++ b/files/ja/web/api/vrframedata/rightviewmatrix/index.md
@@ -7,11 +7,13 @@ slug: Web/API/VRFrameData/rightViewMatrix
 
 **`rightViewMatrix`** は {{domxref("VRFrameData")}} インターフェイスの読み取り専用プロパティで、 4 行 4 列の行列を表す {{jsxref("Float32Array")}} を返します。この行列は、右目の描画に利用されるビュー変換を表します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 この値は、 WebGL の {{domxref("WebGLRenderingContext.uniformMatrix", "uniformMatrix4fv")}} 関数へ直接渡されるでしょう。
 
-> **警告:** 描画時にアプリケーションがこの行列を使用することを強く薦めます。
+> [!WARNING]
+> 描画時にアプリケーションがこの行列を使用することを強く薦めます。
 
 ## 値
 
diff --git a/files/ja/web/api/vrframedata/timestamp/index.md b/files/ja/web/api/vrframedata/timestamp/index.md
index c73db0a6408059..85ee957cafdd62 100644
--- a/files/ja/web/api/vrframedata/timestamp/index.md
+++ b/files/ja/web/api/vrframedata/timestamp/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRFrameData/timestamp
 
 **`timestamp`** は {{domxref("VRFrameData")}} インターフェイスの読み取り専用プロパティで、フレームの更新が発生した時刻を表す、常に増加するタイムスタンプ値を返します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 タイムスタンプは、位置状態データがハードウェアから更新されたかどうかを判断するのに便利です。値は常に増加していくので、更新の順序を決定するために比較することができます。新しい値は常に古い値より大きいか等しくなります。
 
diff --git a/files/ja/web/api/vrframedata/vrframedata/index.md b/files/ja/web/api/vrframedata/vrframedata/index.md
index 4a64c40686df2b..9b4d1765c954fd 100644
--- a/files/ja/web/api/vrframedata/vrframedata/index.md
+++ b/files/ja/web/api/vrframedata/vrframedata/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRFrameData/VRFrameData
 
 **`VRFrameData()`** コンストラクターは、 {{domxref("VRFrameData")}} オブジェクトのインスタンスを生成します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/api/vrlayerinit/index.md b/files/ja/web/api/vrlayerinit/index.md
index c306f023c80d12..8bf9efc1191fc1 100644
--- a/files/ja/web/api/vrlayerinit/index.md
+++ b/files/ja/web/api/vrlayerinit/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRLayerInit
 
 **`VRLayerInit`** 辞書は [WebVR API](/ja/docs/Web/API/WebVR_API) の辞書で、 VR ディスプレイに表示したいコンテンツレイヤー （{{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}}） を表します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 `VRLayerInit` オブジェクトは {{domxref("VRDisplay.getLayers()")}} メソッドを使用して受ける取り、 {{domxref("VRDisplay.requestPresent()")}} メソッドを使用して表示することができます。
 
diff --git a/files/ja/web/api/vrlayerinit/leftbounds/index.md b/files/ja/web/api/vrlayerinit/leftbounds/index.md
index b05cb36ee5db32..1ffa5bd384a6fb 100644
--- a/files/ja/web/api/vrlayerinit/leftbounds/index.md
+++ b/files/ja/web/api/vrlayerinit/leftbounds/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRLayerInit/leftBounds
 
 **`leftBounds`** は {{domxref("VRLayerInit")}} インターフェイス（辞書）のプロパティで、 {{domxref("VRDisplay")}} によってコンテンツが表示されるキャンバスの左側のテクスチャ境界を定義します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrlayerinit/rightbounds/index.md b/files/ja/web/api/vrlayerinit/rightbounds/index.md
index dca8092f93cb41..1009ae66edbcd4 100644
--- a/files/ja/web/api/vrlayerinit/rightbounds/index.md
+++ b/files/ja/web/api/vrlayerinit/rightbounds/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRLayerInit/rightBounds
 
 **`rightBounds`** は {{domxref("VRLayerInit")}} インターフェイス（辞書）のプロパティで、 {{domxref("VRDisplay")}} によってコンテンツが表示されるキャンバスの右側のテクスチャ境界を定義します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrlayerinit/source/index.md b/files/ja/web/api/vrlayerinit/source/index.md
index 40b8befdca9ef0..75855f16141b3f 100644
--- a/files/ja/web/api/vrlayerinit/source/index.md
+++ b/files/ja/web/api/vrlayerinit/source/index.md
@@ -7,7 +7,8 @@ slug: Web/API/VRLayerInit/source
 
 **`source`** は {{domxref("VRLayerInit")}} インターフェイス（辞書）のプロパティで、 {{domxref("VRDisplay")}} によってコンテンツが表示されるキャンバスを定義します。
 
-> **メモ:** このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
+> [!NOTE]
+> このインターフェイスは、古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。 [WebXR Device API](https://immersive-web.github.io/webxr/)に置き換えられました。
 
 ## 値
 
diff --git a/files/ja/web/api/vrpose/angularacceleration/index.md b/files/ja/web/api/vrpose/angularacceleration/index.md
index 0ff4403e34ec6e..954f377dfb595f 100644
--- a/files/ja/web/api/vrpose/angularacceleration/index.md
+++ b/files/ja/web/api/vrpose/angularacceleration/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`angularAcceleration`** は {{domxref("VRPose")}} インターフェイスのプロパティで、現在の {{domxref("VRPose.timestamp")}} における {{domxref("VRDisplay")}} の角加速度ベクトルを表す配列を、メートル/秒/秒単位で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 言い換えれば、センサーが `x`、`y`、`z` 軸を中心に回転したときの現在の加速度です。
 
diff --git a/files/ja/web/api/vrpose/angularvelocity/index.md b/files/ja/web/api/vrpose/angularvelocity/index.md
index b01e7a1cfe724f..5b3be9a5c72119 100644
--- a/files/ja/web/api/vrpose/angularvelocity/index.md
+++ b/files/ja/web/api/vrpose/angularvelocity/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`angularVelocity`** は {{domxref("VRPose")}} インターフェイスの読み取り専用プロパティで、現在の {{domxref("VRPose.timestamp")}} における {{domxref("VRDisplay")}} の角速度ベクトルを表す配列を、ラジアン/秒単位で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 言い換えれば、センサーが `x`、`y`、`z` 軸を中心に回転したときの現在の速度です。
 
diff --git a/files/ja/web/api/vrpose/index.md b/files/ja/web/api/vrpose/index.md
index 16a320d830f8a9..75d19380d3d73d 100644
--- a/files/ja/web/api/vrpose/index.md
+++ b/files/ja/web/api/vrpose/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`VRPose`** は [WebVR API](/ja/docs/Web/API/WebVR_API) のインターフェイスで、特定のタイムスタンプにおける VR センサーの状態（向き、位置、速度、加速度の情報を含みます）を示します。
 
-> **メモ:** このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 このインターフェイスには、 {{domxref("VRDisplay.getPose()")}} と {{domxref("VRDisplay.getFrameData()")}} メソッドを通じてアクセスします。 {{domxref("VRDisplay.getPose()")}} は非推奨です。
 
diff --git a/files/ja/web/api/vrpose/linearacceleration/index.md b/files/ja/web/api/vrpose/linearacceleration/index.md
index 612b73e3cc5ded..d0819c4960688e 100644
--- a/files/ja/web/api/vrpose/linearacceleration/index.md
+++ b/files/ja/web/api/vrpose/linearacceleration/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`linearAcceleration`** は {{domxref("VRPose")}} インターフェイスの読み取り専用プロパティで、現在の {{domxref("VRPose.timestamp")}} における {{domxref("VRDisplay")}} の直線加速度ベクトルを表す配列を、メートル/秒/秒単位で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 言い換えれば、 `x`、`y`、`z` 軸に沿ったセンサーの現在の加速度です。
 
diff --git a/files/ja/web/api/vrpose/linearvelocity/index.md b/files/ja/web/api/vrpose/linearvelocity/index.md
index 64ab3dfb826e58..0461017640b9c6 100644
--- a/files/ja/web/api/vrpose/linearvelocity/index.md
+++ b/files/ja/web/api/vrpose/linearvelocity/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`linearVelocity`** は {{domxref("VRPose")}} インターフェイスの読み取り専用プロパティで、 現在の {{domxref("VRPose.timestamp")}} における {{domxref("VRDisplay")}} の線速度ベクトルを表す配列を、メートル/秒の単位で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 言い換えれば、センサーが `x`, `y`, `z` 軸に沿って移動している現在の速度です。
 
diff --git a/files/ja/web/api/vrpose/orientation/index.md b/files/ja/web/api/vrpose/orientation/index.md
index 8109a553c40d94..2da1969b987251 100644
--- a/files/ja/web/api/vrpose/orientation/index.md
+++ b/files/ja/web/api/vrpose/orientation/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`orientation`** は {{domxref("VRPose")}} インターフェイスの読み取り専用プロパティで、現在の {{domxref("VRPose.timestamp")}} におけるセンサーの方向を、クォータニオン値として返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 値は {{jsxref("Float32Array")}} で、以下の値から構成されます。
 
diff --git a/files/ja/web/api/vrpose/position/index.md b/files/ja/web/api/vrpose/position/index.md
index 358a2461d975d5..21e9ffce83ac81 100644
--- a/files/ja/web/api/vrpose/position/index.md
+++ b/files/ja/web/api/vrpose/position/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`position`** は {{domxref("VRPose")}} インターフェイスの読み取り専用プロパティで、 現在の {{domxref("VRPose.timestamp")}} の位置を 3D ベクトルで返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 座標系は次の通りです。
 
@@ -19,13 +20,15 @@ l10n:
 
 位置は原点からのメートル単位で、この点はセンサーの最初の読み取り位置か、 {{domxref("VRDisplay.resetPose()")}} が最後に呼び出された時点のセンサーの位置のどちらかとなります。
 
-> **メモ:** 既定では、すべての位置は座ったままの空間位置として指定されます。この点を {{domxref("VRStageParameters.sittingToStandingTransform")}} で変換すると（例えばルームディスプレイで作業する場合）、この点は立っている空間の位置に変換されます。
+> [!NOTE]
+> 既定では、すべての位置は座ったままの空間位置として指定されます。この点を {{domxref("VRStageParameters.sittingToStandingTransform")}} で変換すると（例えばルームディスプレイで作業する場合）、この点は立っている空間の位置に変換されます。
 
 ## 値
 
 {{jsxref("Float32Array")}} です。または VR センサーが位置データを提供できない場合は null になります。
 
-> **メモ:** ユーザーエージェントは、ネックモデリングなどの技術によってエミュレートされた 位置値を提供することがあります。 その場合も {{domxref("VRDisplayCapabilities.hasPosition")}} を false として報告する必要があります。
+> [!NOTE]
+> ユーザーエージェントは、ネックモデリングなどの技術によってエミュレートされた 位置値を提供することがあります。 その場合も {{domxref("VRDisplayCapabilities.hasPosition")}} を false として報告する必要があります。
 
 ## 例
 
diff --git a/files/ja/web/api/vrstageparameters/index.md b/files/ja/web/api/vrstageparameters/index.md
index 4b034dbdae94d5..d5cae0b4d3a7dd 100644
--- a/files/ja/web/api/vrstageparameters/index.md
+++ b/files/ja/web/api/vrstageparameters/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`VRStageParameters`** は [WebVR API](/ja/docs/Web/API/WebVR_API) のインターフェイスで，ルームスケール体験に対応している機器用にステージエリアを記述する値を表現しています。
 
-> **メモ:** このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このインターフェイスは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 このインターフェイスには {{domxref("VRDisplay.stageParameters")}} プロパティを通じてアクセスできます。
 
diff --git a/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.md b/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.md
index 08273df1647b9c..86621b5ae2d183 100644
--- a/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.md
+++ b/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`sittingToStandingTransform`** は {{domxref("VRStageParameters")}} インターフェイスの読み取り専用プロパティで、 {{domxref("VRFrameData")}} の座位空間ビュー行列を立位空間に変換する行列です。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 基本的には、レンダリングされたビューを座っている状態から立っている状態に変換するために、WebGL コードにこの値を渡すことができます。
 
diff --git a/files/ja/web/api/vrstageparameters/sizex/index.md b/files/ja/web/api/vrstageparameters/sizex/index.md
index c212f8d9adab18..2645c8b0c2a41d 100644
--- a/files/ja/web/api/vrstageparameters/sizex/index.md
+++ b/files/ja/web/api/vrstageparameters/sizex/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`sizeX`** は {{domxref("VRStageParameters")}} インターフェイスの読み取り専用プロパティで、プレイエリア境界の幅をメートル単位で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 境界は、安全性を目的として、床の平面上に軸に沿った矩形として定義されています。コンテンツは、この境界を超えてユーザが動いてしまうような動作をすべてきではありません。しかし、ユーザは境界を無視して動くこと自体は可能で、ユーザ位置がこの矩形境界の外側になることもあります。矩形の中心は、立位空間座標における (0,0,0) です。
 
diff --git a/files/ja/web/api/vrstageparameters/sizey/index.md b/files/ja/web/api/vrstageparameters/sizey/index.md
index f5702bc0f425e8..87d7043602a2f0 100644
--- a/files/ja/web/api/vrstageparameters/sizey/index.md
+++ b/files/ja/web/api/vrstageparameters/sizey/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`sizeY`** は {{domxref("VRStageParameters")}} インターフェイスの読み取り専用プロパティで、プレイエリア境界の奥行きをメートル単位で返します。
 
-> **メモ:** このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
+> [!NOTE]
+> このプロパティは古い [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) の一部でした。これは [WebXR 機器 API](https://immersive-web.github.io/webxr/) に置き換えられました。
 
 境界は、安全性を目的として、床の平面上に軸に沿った矩形として定義されています。コンテンツは、この境界を超えてユーザが動いてしまうような動作をすべてきではありません; しかし、ユーザは境界を無視して動くこと自体は可能で、ユーザ位置がこの矩形境界の外側になることもあります。矩形の中心は、立位空間座標における (0,0,0) です。
 
diff --git a/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.md
index 82ee31f49e94b7..be70235734c6ad 100644
--- a/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.md
+++ b/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.md
@@ -89,7 +89,8 @@ CSS にこける同等の値の表し方とは異なる形で表現されてい
 - 1 つ目は間隔時間はミリ秒単位で表現されています。3 秒という指定ではなく、3000 ミリ秒です。{{domxref("setTimeout()")}} や {{domxref("Window.requestAnimationFrame()")}} と同じように、ウェブアニメーション API はミリ秒でしか値を取りません。
 - もう 1 つは `iteration-count` ではなく `iterations` ということです。
 
-> **メモ:** CSS アニメーションで使用される用語とウェブアニメーションで利用される用語とではいくつか小さな違いがあります。例えば、ウェブアニメーションは `"infinite"` という文字列を利用しない代わりに JavaScript の予約語である `Infinity` を利用します。そして、 `timing-function` の代わりに `easing` を利用します。既定の [animation-timing-function](/ja/docs/Web/CSS/animation-timing-function) が簡単な `ease` である CSS アニメーションとは異なり、Web Animation API ではデフォルトのイージングは `linear` (線形)であるため、ここではイージング値をリストにしていません。
+> [!NOTE]
+> CSS アニメーションで使用される用語とウェブアニメーションで利用される用語とではいくつか小さな違いがあります。例えば、ウェブアニメーションは `"infinite"` という文字列を利用しない代わりに JavaScript の予約語である `Infinity` を利用します。そして、 `timing-function` の代わりに `easing` を利用します。既定の [animation-timing-function](/ja/docs/Web/CSS/animation-timing-function) が簡単な `ease` である CSS アニメーションとは異なり、Web Animation API ではデフォルトのイージングは `linear` (線形)であるため、ここではイージング値をリストにしていません。
 
 #### パーツをまとめる
 
diff --git a/files/ja/web/api/web_audio_api/advanced_techniques/index.md b/files/ja/web/api/web_audio_api/advanced_techniques/index.md
index 13f28e59cf141c..15961dca6e0846 100644
--- a/files/ja/web/api/web_audio_api/advanced_techniques/index.md
+++ b/files/ja/web/api/web_audio_api/advanced_techniques/index.md
@@ -9,7 +9,8 @@ l10n:
 
 このチュートリアルでは、音の作成と変更、時間とスケジューリングについて述べます。サンプルの読み込み、エンベロープ、フィルター、ウェーブテーブル、周波数変調を紹介します。これらの用語に慣れていて、ウェブオーディオAPIによるアプリケーションの入門を探しているなら、あなたは正しい場所に来ました。
 
-> **メモ:** 下記デモのソースコードは GitHub の MDN [webaudio-examples](https://github.com/mdn/webaudio-examples) リポジトリーの [step-sequencer](https://github.com/mdn/webaudio-examples/tree/master/step-sequencer) サブディレクトリーにあります。[ライブデモ](https://mdn.github.io/webaudio-examples/step-sequencer/)を見ることもできます。
+> [!NOTE]
+> 下記デモのソースコードは GitHub の MDN [webaudio-examples](https://github.com/mdn/webaudio-examples) リポジトリーの [step-sequencer](https://github.com/mdn/webaudio-examples/tree/master/step-sequencer) サブディレクトリーにあります。[ライブデモ](https://mdn.github.io/webaudio-examples/step-sequencer/)を見ることもできます。
 
 ## デモ
 
@@ -67,7 +68,8 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** 私たちがこのインストゥルメントを作成したのは、音を良くするためではなく、デモコードを提供するためです。このデモは、そのようなインストの非常に単純化されたバージョンを表します。音はダイアルアップモデムに基づいています。このような機器がどのような音で鳴るのかご存じない方は、[こちらで試聴できます](https://soundcloud.com/john-pemberton/modem-dialup)。
+> [!NOTE]
+> 私たちがこのインストゥルメントを作成したのは、音を良くするためではなく、デモコードを提供するためです。このデモは、そのようなインストの非常に単純化されたバージョンを表します。音はダイアルアップモデムに基づいています。このような機器がどのような音で鳴るのかご存じない方は、[こちらで試聴できます](https://soundcloud.com/john-pemberton/modem-dialup)。
 
 ## 音声コンテキストの作成
 
@@ -94,7 +96,8 @@ const wave = new PeriodicWave(audioCtx, {
 });
 ```
 
-> **メモ:** この例では、波動テーブルは非常に多くの値があるため、別個の JavaScript ファイル (`wavetable.js`) で保持されています。 [Google Chrome Labs のウェブオーディオ API の例](https://github.com/GoogleChromeLabs/web-audio-samples/)で得られる[波形テーブルのリポジトリー](https://github.com/GoogleChromeLabs/web-audio-samples/tree/main/src/demos/wavetable-synth/wave-tables)から取りました。
+> [!NOTE]
+> この例では、波動テーブルは非常に多くの値があるため、別個の JavaScript ファイル (`wavetable.js`) で保持されています。 [Google Chrome Labs のウェブオーディオ API の例](https://github.com/GoogleChromeLabs/web-audio-samples/)で得られる[波形テーブルのリポジトリー](https://github.com/GoogleChromeLabs/web-audio-samples/tree/main/src/demos/wavetable-synth/wave-tables)から取りました。
 
 ### 発振器
 
@@ -242,7 +245,8 @@ osc.start(time);
 osc.stop(time + pulseTime);
 ```
 
-> **メモ:** また、作成するどちらの発振器にも既定値の波形テーブルを使用する必要はありません。前と同じように波形テーブルと周期波メソッドを使用できます。最小のノードで、多くの可能性があります。
+> [!NOTE]
+> また、作成するどちらの発振器にも既定値の波形テーブルを使用する必要はありません。前と同じように波形テーブルと周期波メソッドを使用できます。最小のノードで、多くの可能性があります。
 
 ### パルスのユーザーコントロール
 
@@ -344,7 +348,8 @@ for (let i = 0; i < bufferSize; i++) {
 }
 ```
 
-> **メモ:** なぜ -1～1 なのでしょうか？ファイルやスピーカーに音を出力する場合、 0dB が上限のスケール（メディアや DAC の固定的な数値の限界）を表す数値が必要です。浮動小数点の音声では、 1 は信号の数学的処理をするために「上限」に割り当てられる便利な数字です。そのため、発振器、ノイズジェネレーター、そして他の音源は、通常 -1 から 1 の範囲の双極信号を出力します。ブラウザーはこの範囲外の値をクランプします。
+> [!NOTE]
+> なぜ -1～1 なのでしょうか？ファイルやスピーカーに音を出力する場合、 0dB が上限のスケール（メディアや DAC の固定的な数値の限界）を表す数値が必要です。浮動小数点の音声では、 1 は信号の数学的処理をするために「上限」に割り当てられる便利な数字です。そのため、発振器、ノイズジェネレーター、そして他の音源は、通常 -1 から 1 の範囲の双極信号を出力します。ブラウザーはこの範囲外の値をクランプします。
 
 ### バッファーソースの作成
 
@@ -370,7 +375,8 @@ noise.start();
 
 ピンクまたはブラウンノイズの範囲にあるものが必要です。高い周波数と単発の低い周波数をカットしたいのです。バンドパスバイクワッドフィルターを選びましょう。
 
-> **メモ:** ウェブオーディオ API には、 {{domxref("BiquadFilterNode")}} と {{domxref("IIRFilterNode")}} の 2 つの種類のフィルタノードがあります。ほとんどの場合、バイクワッドフィルタで十分です - ローパス、ハイパス、バンドパスなどの様々な種類があります。しかし、もっと特注のものを探しているのであれば、 IIR フィルターが良い選択肢かもしれません。詳しくは [IIR フィルターの使用](/ja/docs/Web/API/Web_Audio_API/Using_IIR_filters)を参照してください。
+> [!NOTE]
+> ウェブオーディオ API には、 {{domxref("BiquadFilterNode")}} と {{domxref("IIRFilterNode")}} の 2 つの種類のフィルタノードがあります。ほとんどの場合、バイクワッドフィルタで十分です - ローパス、ハイパス、バンドパスなどの様々な種類があります。しかし、もっと特注のものを探しているのであれば、 IIR フィルターが良い選択肢かもしれません。詳しくは [IIR フィルターの使用](/ja/docs/Web/API/Web_Audio_API/Using_IIR_filters)を参照してください。
 
 この配線は、前に見たのと同じです。 {{domxref("BiquadFilterNode")}} を作成し、必要なプロパティを設定し、グラフを通して接続します。例えば、バンドパス型で周波数を設定するには、中間周波数を調整します。しかし、ローパスでは、一番上の周波数を設定します。
 
@@ -499,7 +505,8 @@ async function setupSample() {
 }
 ```
 
-> **メモ:** 上記の関数を簡単に変更し、ファイルの配列を引き継いでループさせ、複数のサンプルを読み込むことができます。このテクニックは、より複雑なインストゥルメントやゲームに便利でしょう。
+> [!NOTE]
+> 上記の関数を簡単に変更し、ファイルの配列を引き継いでループさせ、複数のサンプルを読み込むことができます。このテクニックは、より複雑なインストゥルメントやゲームに便利でしょう。
 
 We can now use `setupSample()` like so:
 
@@ -574,7 +581,8 @@ function playSample(audioContext, audioBuffer, time) {
 }
 ```
 
-> **メモ:** この音声ファイルは [soundbible.com から引用](https://soundbible.com/1573-DTMF-Tones.html)しました。
+> [!NOTE]
+> この音声ファイルは [soundbible.com から引用](https://soundbible.com/1573-DTMF-Tones.html)しました。
 
 ## 時刻に合わせた音声の再生
 
@@ -582,7 +590,8 @@ function playSample(audioContext, audioBuffer, time) {
 
 `for` ループの中で再生するように音色をスケジュールすることもできますが、この場合の最大の問題は再生中に更新することで、そのための UI コントロールはすでに実装しています。また、楽器全体の BPM コントロールを検討するのも実にいいでしょう。音符がいつ演奏されるかを先に見て、それをキューに入れるのです。 `currentTime` プロパティで正確な時刻に始めることができ、変更も考えることができます。
 
-> **メモ:** この記事は、 [Chris Wilson's A Tale Of Two Clocks (2013)](https://web.dev/audio-scheduling/) の記事を大幅に縮小したもので、このメソッドについてもっと詳しく書かれています。ここですべてを繰り返す意味はありませんが、この記事を読んでこのメソッドを使用することを強くお勧めします。ここでのコードの多くは彼の[メトロノームの例](https://github.com/cwilso/metronome/blob/master/js/metronome.js)から引用しています。彼はこの記事の中で参照しています。
+> [!NOTE]
+> この記事は、 [Chris Wilson's A Tale Of Two Clocks (2013)](https://web.dev/audio-scheduling/) の記事を大幅に縮小したもので、このメソッドについてもっと詳しく書かれています。ここですべてを繰り返す意味はありませんが、この記事を読んでこのメソッドを使用することを強くお勧めします。ここでのコードの多くは彼の[メトロノームの例](https://github.com/cwilso/metronome/blob/master/js/metronome.js)から引用しています。彼はこの記事の中で参照しています。
 
 既定の BPM (beats per minute) を設定することから始めましょう。この BPM はユーザーも制御することができます。
 
diff --git a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
index b02ffc9f0b2fa1..c4ff470469687a 100644
--- a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
+++ b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
@@ -19,7 +19,8 @@ slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
 4. 例えばあなたのシステムのスピーカーなど、音声の最終的な行き先の選択。
 5. 音声効果を（あるのならば）かけた後、最後に選択した行き先へ届いて終了する、音声源からの接続の確立。
 
-> **メモ:** 信号上で利用できるオーディオチャンネルの数字は、2.0 や 5.1 のように、しばしば、数値の形式で表現されます。これは[channel notation](https://en.wikipedia.org/wiki/Surround_sound#Channel_notation)と呼ばれます。最初の数値は、該当の信号が含んでいるオーディオチャンネルの数です。ピリオドの後にある数値は、低音増強用出力として確保されているチャンネルの数を示しています。それらはしばしば**サブウーファー**とも称されます。
+> [!NOTE]
+> 信号上で利用できるオーディオチャンネルの数字は、2.0 や 5.1 のように、しばしば、数値の形式で表現されます。これは[channel notation](https://en.wikipedia.org/wiki/Surround_sound#Channel_notation)と呼ばれます。最初の数値は、該当の信号が含んでいるオーディオチャンネルの数です。ピリオドの後にある数値は、低音増強用出力として確保されているチャンネルの数を示しています。それらはしばしば**サブウーファー**とも称されます。
 
 ![A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.](webaudioAPI_en.svg)
 
@@ -57,7 +58,8 @@ slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
 
 バッファが再生されると、最も左のサンプルフレームが聞こえ、次にそのサンプルフレームのすぐ隣のサンプルフレームが続いてゆきます。ステレオの場合、両方のチャンネルから同時に聴こえます。サンプルフレームは、チャンネルの数とは独立しているため非常に便利であり、正確に音声を取り扱う有効な手段として、時間を表現してくれます。
 
-> **メモ:** フレーム数から秒数を得るためには、フレーム数をサンプルレートで単に除算するだけです。サンプル数からフレーム数を得るためには、チャンネル数で単に除算するだけです。
+> [!NOTE]
+> フレーム数から秒数を得るためには、フレーム数をサンプルレートで単に除算するだけです。サンプル数からフレーム数を得るためには、チャンネル数で単に除算するだけです。
 
 以下はいくつかの単純なサンプルです:
 
@@ -81,7 +83,8 @@ var buffer = context.createBuffer(1, 22050, 22050);
 
 この呼び出しをする場合、モノラルバッファーをチャンネル数 1 で取得し、AudioContext 上で 44100Hz にて再生される際に自動で 44100Hz へ*再サンプリングされ*(したがって 44100 フレームとなり)、1 秒間続きます: 44100 フレーム/44100Hz = 1 秒。
 
-> **メモ:** オーディオの再サンプリングは、画像のサイズ変更と非常に似たものです。例えば 16x16 の画像があり、32x32 のスペースを満たしたいとします。サイズ変更(あるいは再サンプリング)を行い、結果として(サイズ変更アルゴリズムの違いに依存して、ぼやけたりエッジができたりと)画質の低下を伴いますが、スペースを減らすサイズ変更済み画像が作れます。再サンプリングされたオーディオもまったく同じです。スペースを保てるものの、実際には高音域のコンテンツや高音を適切に再現することはできません。
+> [!NOTE]
+> オーディオの再サンプリングは、画像のサイズ変更と非常に似たものです。例えば 16x16 の画像があり、32x32 のスペースを満たしたいとします。サイズ変更(あるいは再サンプリング)を行い、結果として(サイズ変更アルゴリズムの違いに依存して、ぼやけたりエッジができたりと)画質の低下を伴いますが、スペースを減らすサイズ変更済み画像が作れます。再サンプリングされたオーディオもまったく同じです。スペースを保てるものの、実際には高音域のコンテンツや高音を適切に再現することはできません。
 
 ### バッファーセクションの平面性対交差性
 
@@ -363,7 +366,8 @@ Web Audio API は、音声処理に適することを理由に、平面的なバ
 - {{domxref("AnalyserNode.getByteTimeDomainData()")}}
   - : 現在の波形データまたはタイムドメインデータを渡された{{domxref("Uint8Array")}}型配列(符号なしバイト配列)にコピーします。
 
-> **メモ:** より詳しい情報は、Web Audio API 記事中の [Visualizations with Web Audio API](/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) を参照してください。
+> [!NOTE]
+> より詳しい情報は、Web Audio API 記事中の [Visualizations with Web Audio API](/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) を参照してください。
 
 ## 立体化
 
@@ -377,7 +381,8 @@ Web Audio API は、音声処理に適することを理由に、平面的なバ
 
 ![We see the position, up and front vectors of an AudioListener, with the up and front vectors at 90° from the other.](WebAudioListenerReduced.png)
 
-> **メモ:** より詳しい情報は、[Web audio spatialization basics](/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) を参照してください。
+> [!NOTE]
+> より詳しい情報は、[Web audio spatialization basics](/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) を参照してください。
 
 ## ファンインとファンアウト
 
diff --git a/files/ja/web/api/web_audio_api/index.md b/files/ja/web/api/web_audio_api/index.md
index 41a135f6ef8a05..f97481cdce3727 100644
--- a/files/ja/web/api/web_audio_api/index.md
+++ b/files/ja/web/api/web_audio_api/index.md
@@ -31,7 +31,8 @@ l10n:
 
 ウェブオーディオ API では、立体音響を制御することもできます。*ソースリスナーモデル*に基づいたシステムを使用することで、*パンモデル*を制御し、音源の移動 (またはリスナーの移動) によって引き起こされる*距離に起因する減衰*を処理することができます。
 
-> **メモ:** ウェブオーディオ API の理論に関する詳細は [ウェブオーディオ API の基本概念](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) をご覧ください。
+> [!NOTE]
+> ウェブオーディオ API の理論に関する詳細は [ウェブオーディオ API の基本概念](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) をご覧ください。
 
 ## ウェブオーディオ API が対象とする人
 
diff --git a/files/ja/web/api/web_audio_api/using_web_audio_api/index.md b/files/ja/web/api/web_audio_api/using_web_audio_api/index.md
index 789dea6229c8ad..652c82538a5caf 100644
--- a/files/ja/web/api/web_audio_api/using_web_audio_api/index.md
+++ b/files/ja/web/api/web_audio_api/using_web_audio_api/index.md
@@ -46,7 +46,8 @@ const audioContext = new AudioContext();
 
 これを実行するとどうなるのでしょうか。 {{domxref("BaseAudioContext")}} が自動的に生成され、オンライン音声コンテキストに拡張されます。これを行うのは、ライブサウンドを再生しようとしているからです。
 
-> **メモ:** 音声データを処理したいだけ、例えば、バッファリングとストリーミングのみを行い再生するのでなければ、 {{domxref("OfflineAudioContext")}} を作成するようにしたほうが良いかもしれません。
+> [!NOTE]
+> 音声データを処理したいだけ、例えば、バッファリングとストリーミングのみを行い再生するのでなければ、 {{domxref("OfflineAudioContext")}} を作成するようにしたほうが良いかもしれません。
 
 ## 音声の読み込み
 
@@ -56,7 +57,8 @@ const audioContext = new AudioContext();
 <audio src="myCoolTrack.mp3" type="audio/mpeg"></audio>
 ```
 
-> **メモ:** 読み込もうとしている音声ファイルが別なドメインにある場合は、 `crossorigin` 属性を使用する必要があるでしょう。詳しくは[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) を参照してください。
+> [!NOTE]
+> 読み込もうとしている音声ファイルが別なドメインにある場合は、 `crossorigin` 属性を使用する必要があるでしょう。詳しくは[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) を参照してください。
 
 Web Audio API を使用してできるすばらしいことをすべて利用するためには、この要素で入力元をつかみ、作成したコンテキストに*送り込む*ことが必要です。幸いにもちょうどこれを行うメソッド — {{domxref("AudioContext.createMediaElementSource")}} が存在します。
 
@@ -68,7 +70,8 @@ const audioElement = document.querySelector("audio");
 const track = audioContext.createMediaElementSource(audioElement);
 ```
 
-> **メモ:** 上記の `<audio>` 要素は DOM 内では {{domxref("HTMLMediaElement")}} 型のオブジェクトで表され、これは独自の機能のセットを持っています。これらはすべてそのままです。 Web Audio API で音声を利用できるようにするだけです。
+> [!NOTE]
+> 上記の `<audio>` 要素は DOM 内では {{domxref("HTMLMediaElement")}} 型のオブジェクトで表され、これは独自の機能のセットを持っています。これらはすべてそのままです。 Web Audio API で音声を利用できるようにするだけです。
 
 ## 音声の制御
 
@@ -165,7 +168,8 @@ gain の既定値は 1 です。これは現在の音量を同じに維持しま
 <input type="range" id="volume" min="0" max="2" value="1" step="0.01" />
 ```
 
-> **メモ:** range 入力は、音声ノードの値を更新するのに実に手軽な入力型です。 range の値を音声ノードの引数に直接設定したり、使用したりすることができます。
+> [!NOTE]
+> range 入力は、音声ノードの値を更新するのに実に手軽な入力型です。 range の値を音声ノードの引数に直接設定したり、使用したりすることができます。
 
 それでは、ユーザーが値を変更したときに入力された値を取得して gain の値を更新するようにしましょう。
 
@@ -181,7 +185,8 @@ volumeControl.addEventListener(
 );
 ```
 
-> **メモ:** ノードオブジェクトの値 (例えば `GainNode.gain`) は単純な値ではなく、実際には {{domxref("AudioParam")}} 型のオブジェクト — これが引数と呼ばれています。なぜかといえば、 `GainNode.gain` の `value` プロパティを設定しなければならず、 `gain` を直接設定するだけではないからです。これによってはるかに柔軟になり、例えば特定の値のセットを引数で渡して、一定の期間にわたって変化させたりすることができます。
+> [!NOTE]
+> ノードオブジェクトの値 (例えば `GainNode.gain`) は単純な値ではなく、実際には {{domxref("AudioParam")}} 型のオブジェクト — これが引数と呼ばれています。なぜかといえば、 `GainNode.gain` の `value` プロパティを設定しなければならず、 `gain` を直接設定するだけではないからです。これによってはるかに柔軟になり、例えば特定の値のセットを引数で渡して、一定の期間にわたって変化させたりすることができます。
 
 素晴らしい、ユーザーがトラックの音量を追更新できるようになりました。ミュート機能を追加したい場合も gain ノードは完全なノードです。
 
@@ -204,7 +209,8 @@ const pannerOptions = { pan: 0 };
 const panner = new StereoPannerNode(audioContext, pannerOptions);
 ```
 
-> **メモ:** ノードを作成するコンストラクターメソッドは、いまのところすべてのブラウザーで対応されている訳ではありません。古いファクトリメソッドの方がより広く対応されています。
+> [!NOTE]
+> ノードを作成するコンストラクターメソッドは、いまのところすべてのブラウザーで対応されている訳ではありません。古いファクトリメソッドの方がより広く対応されています。
 
 個々の値の範囲は -1 (はるか左) と 1 (はるか右) の間です。今回も range 型の入力でこの引数を変更できるようにしましょう。
 
diff --git a/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index d38393528cb74a..7a1326a72ad424 100644
--- a/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 
 Web Audio API の最も興味深い機能の 1 つは、オーディオソースから周波数、波形、その他のデータを抽出し、それを使用してビジュアライゼーションを作成する機能です。この記事では、方法について説明し、いくつかの基本的な使用例を示します。
 
-> **メモ:** すべてのコードスニペットの実際の例は、[Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) のデモでご覧いただけます。
+> [!NOTE]
+> すべてのコードスニペットの実際の例は、[Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) のデモでご覧いただけます。
 
 ## 基本的な概念
 
@@ -27,7 +28,8 @@ analyser.connect(distortion);
 distortion.connect(audioCtx.destination);
 ```
 
-> **メモ:** 入力がソースに対し、直接または別のノードを介して接続されているかぎり、アナライザの出力を別のノードに接続する必要はありません。
+> [!NOTE]
+> 入力がソースに対し、直接または別のノードを介して接続されているかぎり、アナライザの出力を別のノードに接続する必要はありません。
 
 アナライザノードは、{{domxref("AnalyserNode.fftSize")}}プロパティ値（指定されていない場合は、デフォルトは 2048 です）として指定する内容に応じて、特定の周波数ドメインで高速フーリエ変換（fft）を使用してオーディオデータをキャプチャします。
 
@@ -209,4 +211,5 @@ draw();
 
 ![a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API/bar-graph.png)
 
-> **メモ:** この記事に記載されている例では、{{domxref("AnalyserNode.getByteFrequencyData()")}}と{{domxref("AnalyserNode.getByteTimeDomainData()")}}で使用法が示されています。実際の例は{{domxref("AnalyserNode.getFloatFrequencyData()")}}と{{domxref("AnalyserNode.getFloatTimeDomainData()")}}にあるので、私たちの [Voice-change-O-matic-float-data](http://mdn.github.io/voice-change-o-matic-float-data/) デモを参照してください（[ソースコード](https://github.com/mdn/voice-change-o-matic-float-data)も参照してください）— これは、元の [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) とまったく同じですが、符号なしバイトデータではなく、Float データを使用しています。
+> [!NOTE]
+> この記事に記載されている例では、{{domxref("AnalyserNode.getByteFrequencyData()")}}と{{domxref("AnalyserNode.getByteTimeDomainData()")}}で使用法が示されています。実際の例は{{domxref("AnalyserNode.getFloatFrequencyData()")}}と{{domxref("AnalyserNode.getFloatTimeDomainData()")}}にあるので、私たちの [Voice-change-O-matic-float-data](http://mdn.github.io/voice-change-o-matic-float-data/) デモを参照してください（[ソースコード](https://github.com/mdn/voice-change-o-matic-float-data)も参照してください）— これは、元の [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) とまったく同じですが、符号なしバイトデータではなく、Float データを使用しています。
diff --git a/files/ja/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/ja/web/api/web_audio_api/web_audio_spatialization_basics/index.md
index 1a733dbe00a356..e4b10cd3221452 100644
--- a/files/ja/web/api/web_audio_api/web_audio_spatialization_basics/index.md
+++ b/files/ja/web/api/web_audio_api/web_audio_spatialization_basics/index.md
@@ -20,7 +20,8 @@ WebXR やゲームには実に有益です。
 3D 空間では、リアルな音声を実現する唯一の方法です。 [three.js](https://threejs.org/) や [A-frame](https://aframe.io/) のようなライブラリーは、音を扱うときにその可能性を利用します。
 完全な 3D 空間内で音を移動させる必要はなく、 2D 平面だけに限定することもできるので、もし 2D ゲームを計画していたとしても、このノードは探していたノードになるでしょう。
 
-> **メモ:** 単純な左右のステレオパンニング効果を作成する、一般的な用途に対処するために設計された {{domxref("StereoPannerNode")}} もあります。
+> [!NOTE]
+> 単純な左右のステレオパンニング効果を作成する、一般的な用途に対処するために設計された {{domxref("StereoPannerNode")}} もあります。
 > これは使用するのがはるかに簡単ですが、明らかに汎用性には遠く及びません。
 > 単純なステレオパンニング効果が欲しいだけなら、 [StereoPannerNode の例](https://mdn.github.io/webaudio-examples/stereo-panner-node/) （[ソースコードを参照](https://github.com/mdn/webaudio-examples/tree/main/stereo-panner-node)）で必要なものはすべて得られるでしょう。
 
@@ -35,7 +36,8 @@ WebXR やゲームには実に有益です。
 ラジカセを移動させると、それに応じて音が変化し、部屋の左右に移されるとパンしたり、ユーザーから遠ざかると小さくなったり、スピーカーがユーザーから離れるように回転したりします。
 これは `PannerNode` オブジェクトインスタンスの様々なプロパティをその動きに関連して設定することで、空間化をエミュレートしています。
 
-> **メモ:** ヘッドフォンを使用するか、コンピューターに接続するサラウンドサウンドシステムがあれば、はるかに良い経験ができます。
+> [!NOTE]
+> ヘッドフォンを使用するか、コンピューターに接続するサラウンドサウンドシステムがあれば、はるかに良い経験ができます。
 
 ## 音声リスナーの作成
 
@@ -541,7 +543,8 @@ playButton.addEventListener(
 この記事で、ウェブオーディオの空間設定がどのように動作するのか、また {{domxref("PannerNode")}} プロパティがそれぞれ何をするのか（かなりいくつかあります）について、ご理解いただけたかと思います。
 値の操作が難しい場合もあり、使用する用途によっては正しい値を取得するのに時間がかかることもあります。
 
-> **メモ:** さまざまなブラウザー間で、音声の空間化には若干の違いがあります。
+> [!NOTE]
+> さまざまなブラウザー間で、音声の空間化には若干の違いがあります。
 > パナーノードは、ボンネットの中でとても複雑な計算をします。
 > ここには[たくさんのテスト](https://wpt.fyi/results/webaudio/the-audio-api/the-pannernode-interface?label=stable&aligned=true)があるので、異なるプラットフォーム間でこのノードの内部動作の状態を追跡することができます。
 
diff --git a/files/ja/web/api/web_authentication_api/index.md b/files/ja/web/api/web_authentication_api/index.md
index ac5d2134d3a97d..b85d1436b74912 100644
--- a/files/ja/web/api/web_authentication_api/index.md
+++ b/files/ja/web/api/web_authentication_api/index.md
@@ -117,7 +117,8 @@ _図 2 - 図 1 と同様、ウェブ認証による認証手順と各アクシ
 
 ### 使用法の例
 
-> **警告:** セキュリティの観点から、ウェブ認証の呼び出し（{{domxref('CredentialsContainer.create','create()')}} や {{domxref('CredentialsContainer.get','get()')}}）が保留されている間にブラウザーウィンドウのフォーカスが失われると、呼び出しはキャンセルされます。
+> [!WARNING]
+> セキュリティの観点から、ウェブ認証の呼び出し（{{domxref('CredentialsContainer.create','create()')}} や {{domxref('CredentialsContainer.get','get()')}}）が保留されている間にブラウザーウィンドウのフォーカスが失われると、呼び出しはキャンセルされます。
 
 ```js
 // 登録のサンプル引数
diff --git a/files/ja/web/api/web_bluetooth_api/index.md b/files/ja/web/api/web_bluetooth_api/index.md
index 3ea8a921bb047d..de1c500d9db81f 100644
--- a/files/ja/web/api/web_bluetooth_api/index.md
+++ b/files/ja/web/api/web_bluetooth_api/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Web Bluetooth API は、Bluetooth Low Energy の周辺機器に接続して操作する機能を提供します。
 
-> **メモ:** この API は [Web Workers](/ja/docs/Web/API/Web_Workers_API) では _使用できません_ 。({{domxref("WorkerNavigator")}} 経由では公開されていません)
+> [!NOTE]
+> この API は [Web Workers](/ja/docs/Web/API/Web_Workers_API) では _使用できません_ 。({{domxref("WorkerNavigator")}} 経由では公開されていません)
 
 ## インターフェイス
 
diff --git a/files/ja/web/api/web_components/using_custom_elements/index.md b/files/ja/web/api/web_components/using_custom_elements/index.md
index b90e7bed7cad62..a47cef72808dc3 100644
--- a/files/ja/web/api/web_components/using_custom_elements/index.md
+++ b/files/ja/web/api/web_components/using_custom_elements/index.md
@@ -126,7 +126,8 @@ customElements.define("popup-info", PopupInfo);
   back of your card."></popup-info>
 ```
 
-> **メモ:** こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js) を見ることができます。
+> [!NOTE]
+> こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js) を見ることができます。
 
 ### 内部スタイルと外部スタイル
 
@@ -183,7 +184,8 @@ customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 
 通常のように `<ul>` を使用していますが、カスタム要素の名前が `is` 属性で指定されています。
 
-> **メモ:** 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/main.js)はこちらにあります。
+> [!NOTE]
+> 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/main.js)はこちらにあります。
 
 ## ライフサイクルコールバックの使用
 
diff --git a/files/ja/web/api/web_components/using_templates_and_slots/index.md b/files/ja/web/api/web_components/using_templates_and_slots/index.md
index 29db5d2a20539e..8d67728ae21dc8 100644
--- a/files/ja/web/api/web_components/using_templates_and_slots/index.md
+++ b/files/ja/web/api/web_components/using_templates_and_slots/index.md
@@ -115,9 +115,11 @@ HTML 文書に次のように追加するだけで利用できるようになり
 </my-paragraph>
 ```
 
-> **メモ:** スロットに挿入することができるノードは「スロット可能 (Slottable)」ノードと呼ばれます。ノードがスロットに挿入されたとき、「スロットされている」と言います。
+> [!NOTE]
+> スロットに挿入することができるノードは「スロット可能 (Slottable)」ノードと呼ばれます。ノードがスロットに挿入されたとき、「スロットされている」と言います。
 
-> **メモ:** 無名の {{HTMLElement("slot")}} には、カスタム要素のトップレベルの子ノードのうち [`slot`](/ja/docs/Web/HTML/Global_attributes#slot) 属性を持たないすべてのノードが入ります。これにはテキストノードも含まれます。
+> [!NOTE]
+> 無名の {{HTMLElement("slot")}} には、カスタム要素のトップレベルの子ノードのうち [`slot`](/ja/docs/Web/HTML/Global_attributes#slot) 属性を持たないすべてのノードが入ります。これにはテキストノードも含まれます。
 
 簡単な例での説明は以上です。
 もっと実行してみたい場合は、 [GitHub 上にあります](https://github.com/mdn/web-components-examples/tree/main/simple-template)（[ライブ実行版](https://mdn.github.io/web-components-examples/simple-template/)もあります）。
@@ -136,7 +138,8 @@ HTML 文書に次のように追加するだけで利用できるようになり
 
 また、まだレンダリングされていない場合でも、 {{HTMLElement("template")}} を使用することで、テンプレートとしてのコンテナーの目的がより意味的に明確になるはずです。また、 {{HTMLElement("template")}} には、 {{HTMLElement("td")}} のような、 {{HTMLElement("div")}} に追加すると消えてしまうような項目を直接追加することができます。
 
-> **メモ:** 完全な例は [element-details](https://github.com/mdn/web-components-examples/tree/main/element-details) で（[ライブ実行版](https://mdn.github.io/web-components-examples/element-details/)も）参照することができます。
+> [!NOTE]
+> 完全な例は [element-details](https://github.com/mdn/web-components-examples/tree/main/element-details) で（[ライブ実行版](https://mdn.github.io/web-components-examples/element-details/)も）参照することができます。
 
 ### template をスロットと共に作成
 
diff --git a/files/ja/web/api/web_crypto_api/index.md b/files/ja/web/api/web_crypto_api/index.md
index d873c50a962956..c703a59e10fc76 100644
--- a/files/ja/web/api/web_crypto_api/index.md
+++ b/files/ja/web/api/web_crypto_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Web_Crypto_API
 
 **Web Crypto API** は、暗号化を使用してシステムを構築するためにスクリプトが暗号化プリミティブを使用することを可能にするインターフェイスです。
 
-> **警告:** Web Crypto API は、低レベルの暗号化プリミティブを多数提供しています。それらは非常に使い方を間違えやすく、そして関連する落とし穴は非常に微妙である場合もあります。
+> [!WARNING]
+> Web Crypto API は、低レベルの暗号化プリミティブを多数提供しています。それらは非常に使い方を間違えやすく、そして関連する落とし穴は非常に微妙である場合もあります。
 >
 > 基本的な暗号機能を正しく使用していると仮定しても、安全な鍵管理と全体的なセキュリティシステムの設計を正しく理解するのは非常に難しく、一般的にセキュリティ分野のスペシャリストの領域です。
 >
diff --git a/files/ja/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md b/files/ja/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md
index 13128a2ce4b938..9e9b4b6b51cf9e 100644
--- a/files/ja/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md
+++ b/files/ja/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md
@@ -113,7 +113,8 @@ async function hashTheseFiles(e) {
 
 「_ハッシュにソルトを加える_」という言葉を聞いたことがあるかもしれません。ここで扱っているトピックと直接は関係ないですが、知っておくのはいいでしょう。
 
-> **メモ:** この節ではパスワードのセキュリティを扱っていますが、SubtleCrypto が提供するハッシュ関数はこの用途には適しません。この用途には、`scrypt` や `bcrypt` などの高コストで遅いハッシュ関数が必要です。SHA は非常に速く高効率になるよう設計されているので、パスワードのハッシュ化には適しません。この節は純粋な興味のためのものです。Web Crypto API をクライアントでパスワードをハッシュ化するために用いてはいけません。
+> [!NOTE]
+> この節ではパスワードのセキュリティを扱っていますが、SubtleCrypto が提供するハッシュ関数はこの用途には適しません。この用途には、`scrypt` や `bcrypt` などの高コストで遅いハッシュ関数が必要です。SHA は非常に速く高効率になるよう設計されているので、パスワードのハッシュ化には適しません。この節は純粋な興味のためのものです。Web Crypto API をクライアントでパスワードをハッシュ化するために用いてはいけません。
 
 ハッシュ化がよく使われるのはパスワードです。ユーザーのパスワードを平文で保存したいことは決してないでしょう。それは単純にひどい考えです。かわりにユーザーのパスワードのハッシュを保存することで、ハッカーがユーザー名とパスワードのデータベースを入手してももとのパスワードを復元できないようにします。細かいことに気がつく人は、既知のパスワードのリストから生成したハッシュを入手したパスワードのハッシュのリストと比較することで、もとのパスワードを入手できるということに気付くかもしれません。パスワードに文字列を連結すると、ハッシュが変わり、一致しなくなります。これは **ソルト** として知られています。もう一つの厄介な問題は、それぞれのパスワードで同じソルトを用いると、同じハッシュに対応するパスワードは同じもとのパスワードになってしまうことです。このため、1 個のパスワードが分かると、一致するすべてのパスワードがわかってしまいます。
 
diff --git a/files/ja/web/api/web_nfc_api/index.md b/files/ja/web/api/web_nfc_api/index.md
index fc1050011fe4f3..639c90f3a0372f 100644
--- a/files/ja/web/api/web_nfc_api/index.md
+++ b/files/ja/web/api/web_nfc_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Web_NFC_API
 
 ウェブ NFC API では、 NFC によるデータ交換を軽量な NFC Data Exchange Format (NDEF) メッセージにて行うことができます。
 
-> **メモ:** デバイスやタグは、ウェブ NFC で使用するために NDEF レコード形式に対応するよう に特別にフォーマットし記録する必要があります。低レベルの操作は現在 API で対応していませんが、そのような機能を追加する API についての公開討論が行われています。
+> [!NOTE]
+> デバイスやタグは、ウェブ NFC で使用するために NDEF レコード形式に対応するよう に特別にフォーマットし記録する必要があります。低レベルの操作は現在 API で対応していませんが、そのような機能を追加する API についての公開討論が行われています。
 
 ## インターフェイス
 
diff --git a/files/ja/web/api/web_periodic_background_synchronization_api/index.md b/files/ja/web/api/web_periodic_background_synchronization_api/index.md
index f9fa1e775ebd8f..35c31b0a983cab 100644
--- a/files/ja/web/api/web_periodic_background_synchronization_api/index.md
+++ b/files/ja/web/api/web_periodic_background_synchronization_api/index.md
@@ -19,7 +19,8 @@ API が呼び出された際には最小の時間間隔が設定されますが
 
 この API はサービスワーカーに依存しているため、この API も安全なコンテキストでしか利用できません。
 
-> **メモ:** 執筆時点では、ウェブ定期バックグラウンド同期 API は、インストールされた[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps)を介してのみ利用可能です。
+> [!NOTE]
+> 執筆時点では、ウェブ定期バックグラウンド同期 API は、インストールされた[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps)を介してのみ利用可能です。
 
 ## ウェブ定期バックグラウンド同期インターフェイス
 
diff --git a/files/ja/web/api/web_share_api/index.md b/files/ja/web/api/web_share_api/index.md
index 75c8ea76395e41..f1efe165a20562 100644
--- a/files/ja/web/api/web_share_api/index.md
+++ b/files/ja/web/api/web_share_api/index.md
@@ -11,9 +11,11 @@ l10n:
 
 {{securecontext_header}}
 
-> **メモ:** この API は [ウェブワーカー](/ja/docs/Web/API/Web_Workers_API) では利用できません（{{domxref("WorkerNavigator")}} からは公開されていません）。
+> [!NOTE]
+> この API は [ウェブワーカー](/ja/docs/Web/API/Web_Workers_API) では利用できません（{{domxref("WorkerNavigator")}} からは公開されていません）。
 
-> **メモ:** この API を[ウェブ共有ターゲット API](/ja/docs/Web/Manifest/share_target) と混同しないでください。こちらはウェブサイトに自分自身が共有ターゲットであることを示させるものです。
+> [!NOTE]
+> この API を[ウェブ共有ターゲット API](/ja/docs/Web/Manifest/share_target) と混同しないでください。こちらはウェブサイトに自分自身が共有ターゲットであることを示させるものです。
 
 ## 概念と用途
 
diff --git a/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md
index ba35c7bdbec488..a03a1bfac76f65 100644
--- a/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md
+++ b/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -14,7 +14,8 @@ l10n:
 
 ウェブ音声 API には、このための中心的な制御インターフェイスである {{domxref("SpeechRecognition")}} と、文法や結果などを表現するためのいくつかの密接に関連したインターフェイスがあります。一般的に、音声認識には端末上で利用可能な既定の音声認識システムが使用されます。最近のほとんどの OS には音声コマンドを発行するための音声認識システムが搭載されています。macOS の Dictation、iOS の Siri、Windows 10 の Cortana、Android の Speech などを想像してください。
 
-> **メモ:** Chrome などの一部のブラウザーでは、ウェブページで音声認識を使用するためにサーバーベースの認識エンジンが必要です。音声が認識処理のためにウェブサービスに送信されるため、オフラインでは機能しません。
+> [!NOTE]
+> Chrome などの一部のブラウザーでは、ウェブページで音声認識を使用するためにサーバーベースの認識エンジンが必要です。音声が認識処理のためにウェブサービスに送信されるため、オフラインでは機能しません。
 
 ### デモ
 
diff --git a/files/ja/web/api/web_storage_api/index.md b/files/ja/web/api/web_storage_api/index.md
index c602e2ea71d219..6763fb79a5dabd 100644
--- a/files/ja/web/api/web_storage_api/index.md
+++ b/files/ja/web/api/web_storage_api/index.md
@@ -26,9 +26,11 @@ l10n:
 
 これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ（正確には、サポートするブラウザーは `Window` オブジェクトが `WindowLocalStorage` および `WindowSessionStorage` オブジェクトを実装しており、これらに `localStorage` および `sessionStorage` プロパティがあります）を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して `sessionStorage` と `localStorage` は、別の `Storage` オブジェクトを使用します。 これらは別々に制御されて機能します。
 
-> **メモ:** Firefox では、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。詳しくは、[ブラウザーのストレージ制限と削除基準](/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#firefox)を参照してください。
+> [!NOTE]
+> Firefox では、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。詳しくは、[ブラウザーのストレージ制限と削除基準](/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#firefox)を参照してください。
 
-> **メモ:** ユーザーが[サードパーティの Cookie を禁止している](https://support.mozilla.org/ja/kb/third-party-cookies-firefox-tracking-protection)（英語）場合は、サードパーティの iframe からウェブストレージにアクセスできません。
+> [!NOTE]
+> ユーザーが[サードパーティの Cookie を禁止している](https://support.mozilla.org/ja/kb/third-party-cookies-firefox-tracking-protection)（英語）場合は、サードパーティの iframe からウェブストレージにアクセスできません。
 
 ## ウェブストレージインターフェイス
 
diff --git a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
index 4d7386d61557e3..5500de27e6c1b0 100644
--- a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -21,7 +21,8 @@ localStorage["colorSetting"] = "#a4509b";
 localStorage.setItem("colorSetting", "#a4509b");
 ```
 
-> **メモ:** ウェブストレージ API (`setItem`, `getItem`, `removeItem`, `key`, `length`) の使用が推奨されているのは、単純なオブジェクトをキーと値の格納先として使うという[落とし穴](https://2ality.com/2012/01/objects-as-maps.html)を防ぐためです。
+> [!NOTE]
+> ウェブストレージ API (`setItem`, `getItem`, `removeItem`, `key`, `length`) の使用が推奨されているのは、単純なオブジェクトをキーと値の格納先として使うという[落とし穴](https://2ality.com/2012/01/objects-as-maps.html)を防ぐためです。
 
 Web Storage には、以下の 2 種類の仕組みがあります。
 
@@ -38,7 +39,8 @@ Web Storage には、以下の 2 種類の仕組みがあります。
 
 ### 利用可能かどうかの検証
 
-> **メモ:** この API は、すべての主要なブラウザーで利用可能です。利用できるかどうかのテストが必要なのは、とても古いブラウザーに対応しなければならない場合か、下記に記述する限られた状況においてのみです。
+> [!NOTE]
+> この API は、すべての主要なブラウザーで利用可能です。利用できるかどうかのテストが必要なのは、とても古いブラウザーに対応しなければならない場合か、下記に記述する限られた状況においてのみです。
 
 ローカルストレージに対応しているブラウザーは、 `window` オブジェクトに `localStorage` という名称のプロパティを持っています。しかし、単にプロパティが存在すると仮定してしまうと例外が発生する可能性があります。`localStorage` オブジェクトが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに対応していても、ページ上のスクリプトでは利用できる状態ではない場合があります。
 
@@ -99,7 +101,8 @@ if (storageAvailable("localStorage")) {
 
 ![Event output ページ](event-output.png)
 
-> **メモ:** 上記のリンクから実際のページを参照することができます。また、[ソースコードも確認できます](https://github.com/mdn/dom-examples/tree/main/web-storage)。
+> [!NOTE]
+> 上記のリンクから実際のページを参照することができます。また、[ソースコードも確認できます](https://github.com/mdn/dom-examples/tree/main/web-storage)。
 
 ### ストレージが存在しているかを確認する
 
diff --git a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
index e912f9f9b18d41..04a71ba74f945f 100644
--- a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
+++ b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
@@ -26,7 +26,8 @@ l10n:
 
 ## ワーカーで使用できる API
 
-> **メモ:** 掲載されている API に特定のバージョンのプラットフォームが対応している場合、一般にウェブワーカーで動作するとみなすことができます。
+> [!NOTE]
+> 掲載されている API に特定のバージョンのプラットフォームが対応している場合、一般にウェブワーカーで動作するとみなすことができます。
 
 以下の Web API はワーカーで利用することができます。 {{domxref("Broadcast_Channel_API","Broadcast Channel API")}}, {{domxref("Cache", "Cache API")}}, {{domxref("Channel_Messaging_API", "Channel Messaging API")}}, {{domxref("Console API", "Console API")}}, {{domxref("Crypto")}}, {{domxref("CustomEvent")}}, `DOMRequest` と `DOMCursor`, {{domxref("Fetch_API", "Fetch")}}, {{domxref("FileReader")}}, {{domxref("FileReaderSync")}} (only works in workers!), {{domxref("FormData")}}, {{domxref("ImageData")}}, {{domxref("IndexedDB_API", "IndexedDB")}}, [ネットワーク情報 API](/ja/docs/Web/API/Network_Information_API), {{domxref("Notifications_API", "通知", "", 1)}}, {{domxref("Performance")}}, {{domxref("PerformanceEntry")}}, {{domxref("PerformanceMeasure")}}, {{domxref("PerformanceMark")}}, {{domxref("PerformanceObserver")}}, {{domxref("PerformanceResourceTiming")}}, {{jsxref("Promise")}}, [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events), {{domxref("ServiceWorkerRegistration")}}, {{domxref("TextEncoder")}} と {{domxref("TextDecoder")}}, {{ domxref("URL") }}, [WebGL](/ja/docs/Web/API/WebGL_API) と {{domxref("OffscreenCanvas")}}, {{domxref("WebSocket")}}, {{domxref("XMLHttpRequest")}} （ただし `responseXML` および `channel` 属性は常に null）。
 
diff --git a/files/ja/web/api/web_workers_api/index.md b/files/ja/web/api/web_workers_api/index.md
index bf56aae07de88d..13a36a7c5141ee 100644
--- a/files/ja/web/api/web_workers_api/index.md
+++ b/files/ja/web/api/web_workers_api/index.md
@@ -46,7 +46,8 @@ l10n:
 
 ### 利用可能な Web API
 
-> **メモ:** 掲載されている API が特定のバージョンのプラットフォームで対応している場合、一般的にウェブワーカーでも利用可能とみなされます。また、 <https://worker-playground.glitch.me/> を使用して特定のオブジェクト/関数の 対応をテストすることもできます。
+> [!NOTE]
+> 掲載されている API が特定のバージョンのプラットフォームで対応している場合、一般的にウェブワーカーでも利用可能とみなされます。また、 <https://worker-playground.glitch.me/> を使用して特定のオブジェクト/関数の 対応をテストすることもできます。
 
 ワーカーで利用可能な Web APIは、{{domxref("Barcode_Detection_API","バーコード検出 API", "", 1)}}、{{domxref("Broadcast_Channel_API","放送チャンネル API", "", 1)}}、{{domxref("Cache", "キャッシュ API", "", 1)}}、{{domxref("Channel_Messaging_API", "チャンネルメッセージ API", "", 1)}}、{{domxref("Console API", "コンソール API", "", 1)}}, [ウェブ暗号化 API](/ja/docs/Web/API/Web_Crypto_API) ({{domxref("Crypto")}})、{{domxref("CustomEvent")}}、{{domxref("Encoding_API", "エンコーディング API", "", 1)}} ({{domxref("TextEncoder")}}、{{domxref("TextDecoder")}}、など）、{{domxref("Fetch_API", "フェッチ API", "", 1)}}、{{domxref("FileReader")}}、{{domxref("FileReaderSync")}} （ワーカーでのみ動作）、{{domxref("FormData")}}、{{domxref("ImageData")}}、{{domxref("IndexedDB_API", "IndexedDB")}}, [ネットワーク情報 API](/ja/docs/Web/API/Network_Information_API), {{domxref("Notifications_API", "通知 API", "", 1)}}、{{domxref("Performance_API","パフォーマンス API", "", 1)}} （{{domxref("Performance")}}、{{domxref("PerformanceEntry")}}、{{domxref("PerformanceMeasure")}}、{{domxref("PerformanceMark")}}、{{domxref("PerformanceObserver")}}、{{domxref("PerformanceResourceTiming")}}、など)、{{jsxref("Promise")}}、[サーバー送信イベント](/ja/docs/Web/API/Server-sent_events)、{{domxref("ServiceWorkerRegistration")}}、{{ domxref("URL_API","URL API", "", 1) }} （{{ domxref("URL")}} など)、[WebGL](/ja/docs/Web/API/WebGL_API) （{{domxref("OffscreenCanvas")}} による）、{{domxref("WebSocket")}}、{{domxref("XMLHttpRequest")}} です。
 
diff --git a/files/ja/web/api/web_workers_api/transferable_objects/index.md b/files/ja/web/api/web_workers_api/transferable_objects/index.md
index baebd77b99980b..a691864e4acfcd 100644
--- a/files/ja/web/api/web_workers_api/transferable_objects/index.md
+++ b/files/ja/web/api/web_workers_api/transferable_objects/index.md
@@ -88,7 +88,8 @@ console.log(original.byteLength); // 0
 ブラウザーの対応は、それぞれのオブジェクトの互換性情報の `transferable` サブ機能で示す必要があります（例として [`RTCDataChannel`](/ja/docs/Web/API/RTCDataChannel#ブラウザーの互換性) を参照してください）。
 この記事を書いている時点では、すべての移譲可能なオブジェクトでこの情報が更新されているわけではありません。
 
-> **メモ:** 移譲可能なオブジェクトは [Web IDL ファイル](https://github.com/w3c/webref/tree/main/ed/idl) の中で `[Transferable]` という属性でマークアップされています。
+> [!NOTE]
+> 移譲可能なオブジェクトは [Web IDL ファイル](https://github.com/w3c/webref/tree/main/ed/idl) の中で `[Transferable]` という属性でマークアップされています。
 
 ## 関連情報
 
diff --git a/files/ja/web/api/web_workers_api/using_web_workers/index.md b/files/ja/web/api/web_workers_api/using_web_workers/index.md
index 4214c8f3bfd767..73514a462ed481 100644
--- a/files/ja/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/ja/web/api/web_workers_api/using_web_workers/index.md
@@ -17,7 +17,8 @@ l10n:
 
 ワーカーのコンテキストは、専用ワーカー（単一のスクリプトで利用される標準的なワーカー）の場合は {{domxref("DedicatedWorkerGlobalScope")}} オブジェクトで表されます（共有ワーカーの場合は {{domxref("SharedWorkerGlobalScope")}} です）。専用ワーカーは、最初にワーカーを起動したスクリプトだけがアクセスできます。一方、共有ワーカーは複数のスクリプトからアクセスできます。
 
-> **メモ:** ワーカーのリファレンスドキュメントや追加のガイドについては、[ウェブワーカー API のトップページ](/ja/docs/Web/API/Web_Workers_API)をご覧ください。
+> [!NOTE]
+> ワーカーのリファレンスドキュメントや追加のガイドについては、[ウェブワーカー API のトップページ](/ja/docs/Web/API/Web_Workers_API)をご覧ください。
 
 ワーカースレッドでは、どのようなコードでも実行できますが、いくつかの制限があります。例えば、ワーカー内から直接 DOM を操作することはできません。また {{domxref("window")}} オブジェクトの既定のメソッドやプロパティで、使用できないものがあります。それでも、`window` 配下にある多数の項目、たとえば [WebSocket](/ja/docs/Web/API/WebSockets_API) や、 [IndexedDB](/ja/docs/Web/API/IndexedDB_API) のようなデータストレージ機構などを使用できます。詳しくは[ワーカーで使用できる関数やクラス](/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)をご覧ください。
 
@@ -93,9 +94,11 @@ myWorker.onmessage = (e) => {
 
 ここではメッセージイベントからデータを取り出して、結果の段落の `textContent` へ格納しています。それで、ユーザーは計算結果を見ることができます。
 
-> **メモ:** メインのスクリプトスレッドで `onmessage` および `postMessage()` を使用するときは `Worker` オブジェクトにぶら下げなければなりませんが、ワーカー内ではそのようにする必要はありません。これは、ワーカー内ではそれ自身が実質的なグローバルスコープになるためです。
+> [!NOTE]
+> メインのスクリプトスレッドで `onmessage` および `postMessage()` を使用するときは `Worker` オブジェクトにぶら下げなければなりませんが、ワーカー内ではそのようにする必要はありません。これは、ワーカー内ではそれ自身が実質的なグローバルスコープになるためです。
 
-> **メモ:** メッセージをメインスレッドとワーカーの間でやりとりするとき、共有されるのではなく、複製または「移譲」（移動）されます。詳しい解説は、[ワーカーとのデータ転送の詳細](#ワーカーとのデータ転送の詳細)をご覧ください。
+> [!NOTE]
+> メッセージをメインスレッドとワーカーの間でやりとりするとき、共有されるのではなく、複製または「移譲」（移動）されます。詳しい解説は、[ワーカーとのデータ転送の詳細](#ワーカーとのデータ転送の詳細)をご覧ください。
 
 ### ワーカーの終了
 
@@ -141,7 +144,8 @@ importScripts(
 
 ブラウザーはそれぞれのスクリプトを読み込み、実行します。ワーカーは各スクリプトのグローバルオブジェクトを使用できます。スクリプトを読み込むことができない場合は `NETWORK_ERROR` を発生させて、それ以降のコードを実行しません。それでも、すでに実行されたコード（{{domxref("setTimeout()")}} で繰り延べされているコードを含みます）は動作します。`importScripts()` メソッドより**後方**にある関数の宣言は、常にコードの残りの部分より先に評価されることから、同様に保持されます。
 
-> **メモ:** スクリプトは順不同にダウンロードされることがありますが、実行は `importScripts()` に渡したファイル名の順に行います。これは同期的に行われます。すべてのスクリプトの読み込みと実行が行われるまで `importScripts()` から戻りません。
+> [!NOTE]
+> スクリプトは順不同にダウンロードされることがありますが、実行は `importScripts()` に渡したファイル名の順に行います。これは同期的に行われます。すべてのスクリプトの読み込みと実行が行われるまで `importScripts()` から戻りません。
 
 ## 共有ワーカー
 
@@ -149,9 +153,11 @@ importScripts(
 
 ここでは、 専用ワーカーと共有ワーカーの違いについて注目します。この例では 2 つの HTML ページがあり、それぞれの JavaScript は同じ単一のワーカーファイルを使用するようになっています。
 
-> **メモ:** 共有ワーカーが複数の閲覧コンテキストからアクセスできる場合、すべての閲覧コンテキストはまったく同じオリジン (プロトコル、ホスト、ポート番号が同じ) になります。
+> [!NOTE]
+> 共有ワーカーが複数の閲覧コンテキストからアクセスできる場合、すべての閲覧コンテキストはまったく同じオリジン (プロトコル、ホスト、ポート番号が同じ) になります。
 
-> **メモ:** Firefox では、共有ワーカーはプライベートウィンドウとそれ以外に読み込まれた文書間で共有することができません ([Firefox バグ 1177621](https://bugzil.la/1177621))。
+> [!NOTE]
+> Firefox では、共有ワーカーはプライベートウィンドウとそれ以外に読み込まれた文書間で共有することができません ([Firefox バグ 1177621](https://bugzil.la/1177621))。
 
 ### 共有ワーカーの生成
 
@@ -165,7 +171,8 @@ const myWorker = new SharedWorker("worker.js");
 
 ポートへの接続は、メッセージを送信する前に `onmessage` イベントハンドラーを使用して暗黙的に行うか、あるいは `start()` メソッドを使用して明示的に開始するかしなければなりません。 `start()` の呼び出しは、`addEventListener()` メソッドで `message` イベントを拾い上げる場合にのみ必要です。
 
-> **メモ:** ポート接続を開始するために `start()` メソッドを使用するとき、双方向の通信が必要である場合は親スレッドとワーカーの両方で呼び出さなければなりません。
+> [!NOTE]
+> ポート接続を開始するために `start()` メソッドを使用するとき、双方向の通信が必要である場合は親スレッドとワーカーの両方で呼び出さなければなりません。
 
 ### 共有ワーカーとのメッセージのやりとり
 
@@ -815,9 +822,11 @@ function fibonacci(num) {
 
 ワーカーでできないことは、主に親ページに直接影響を与えることです。例えば、DOM を操作したり、そのページのオブジェクトを使用したりすることなどです。このような操作は、{{domxref("DedicatedWorkerGlobalScope.postMessage")}} を介してメインスクリプトにメッセージを送信し、イベントハンドラーで変更を行うといった間接的な方法で行う必要があります。
 
-> **メモ:** あるメソッドがワーカーで利用できるかどうかは、サイト <https://worker-playground.glitch.me/> を使ってテストできます。例えば、Firefox 84 でサイトに [EventSource](/ja/docs/Web/API/EventSource) と入力すると、サービスワーカーではサポートされていないが、専用ワーカーや共有ワーカーではサポートされていることがわかります。
+> [!NOTE]
+> あるメソッドがワーカーで利用できるかどうかは、サイト <https://worker-playground.glitch.me/> を使ってテストできます。例えば、Firefox 84 でサイトに [EventSource](/ja/docs/Web/API/EventSource) と入力すると、サービスワーカーではサポートされていないが、専用ワーカーや共有ワーカーではサポートされていることがわかります。
 
-> **メモ:** ワーカーで使用できる関数の完全なリストは、[ワーカーで使用できる関数とインターフェイス](< /ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers>)でご覧ください。
+> [!NOTE]
+> ワーカーで使用できる関数の完全なリストは、[ワーカーで使用できる関数とインターフェイス](< /ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers>)でご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/api/webgl_api/basic_2d_animation_example/index.md b/files/ja/web/api/webgl_api/basic_2d_animation_example/index.md
index 3b25049170146e..f5ae8f624545a2 100644
--- a/files/ja/web/api/webgl_api/basic_2d_animation_example/index.md
+++ b/files/ja/web/api/webgl_api/basic_2d_animation_example/index.md
@@ -203,7 +203,8 @@ function buildShaderProgram(shaderInfo) {
 
 次に、指定されたシェーダーのリスト内の各シェーダーに対して、`compileShader()` 関数を呼び出してコンパイルし、ビルドするシェーダー関数の ID とタイプを渡します。前述のように、これらの各オブジェクトには、シェーダーコードが存在する `<script>` 要素の ID とシェーダーのタイプが含まれます。コンパイルされたシェーダーは、{{domxref("WebGLRenderingContext.attachShader", "gl.attachShader()")}} へ渡すことでシェーダープログラムにアタッチされます。
 
-> **メモ:** 実際には、ここよりさらに一歩進んで、`<script>` 要素の `type` 属性の値を見て、シェーダーのタイプを判断できます。
+> [!NOTE]
+> 実際には、ここよりさらに一歩進んで、`<script>` 要素の `type` 属性の値を見て、シェーダーのタイプを判断できます。
 
 すべてのシェーダーがコンパイルされると、{{domxref("WebGLRenderingContext.linkProgram", "gl.linkProgram()")}} を使用してプログラムがリンクされます。
 
diff --git a/files/ja/web/api/webgl_api/matrix_math_for_the_web/index.md b/files/ja/web/api/webgl_api/matrix_math_for_the_web/index.md
index b4ffa25d59fbec..ea3dc03c8d270f 100644
--- a/files/ja/web/api/webgl_api/matrix_math_for_the_web/index.md
+++ b/files/ja/web/api/webgl_api/matrix_math_for_the_web/index.md
@@ -146,7 +146,8 @@ let identityMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 let someMatrixResult = multiplyMatrices(identityMatrix, someMatrix);
 ```
 
-> **警告:** これらの行列関数は、説明を明確にするために書かれており、速度やメモリ管理のためには書かれていません。 これらの関数は多くの新しい配列を作成しますが、これはガベージコレクションのために、リアルタイム操作に特にコストがかかる可能性があります。 実際の製品コードでは、最適化された関数を使用するのが最善です。 [glMatrix](https://glmatrix.net/) は、速度とパフォーマンスに重点を置いたライブラリーの例です。 glMatrix ライブラリーの焦点は、更新ループの前に割り当てられるターゲット配列を持つことです。
+> [!WARNING]
+> これらの行列関数は、説明を明確にするために書かれており、速度やメモリ管理のためには書かれていません。 これらの関数は多くの新しい配列を作成しますが、これはガベージコレクションのために、リアルタイム操作に特にコストがかかる可能性があります。 実際の製品コードでは、最適化された関数を使用するのが最善です。 [glMatrix](https://glmatrix.net/) は、速度とパフォーマンスに重点を置いたライブラリーの例です。 glMatrix ライブラリーの焦点は、更新ループの前に割り当てられるターゲット配列を持つことです。
 
 ## 平行移動行列
 
diff --git a/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
index 5cad426668bfef..3567478c79c968 100644
--- a/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
+++ b/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
@@ -15,7 +15,8 @@ l10n:
 
 このプロジェクトは、行列操作を行うために [glMatrix](https://glmatrix.net/) ライブラリーを使用しますので、プロジェクトのインクルードする必要があります。 CDN からコピーを読み込みます。
 
-> **メモ:** "index.html" を更新すると、次のようになります。
+> [!NOTE]
+> "index.html" を更新すると、次のようになります。
 
 ```html
 <!doctype html>
@@ -60,7 +61,8 @@ WebGL コンテンツを描画するときに実行される 2 つのシェー
 
 以下の頂点シェーダーは、 `aVertexPosition` と呼ばれる定義した属性から頂点の位置の値を受け取ります。次に、その位置に `uProjectionMatrix` （投影行列）および `uModelViewMatrix` モデルビュー行列）という 2 つの 4 x 4 行列を乗算します。結果は `gl_Position` に設定されます。投影行列およびその他の行列の詳細については、[この記事が役立つ場合があります](https://webglfundamentals.org/webgl/lessons/ja/webgl-3d-perspective.html)。
 
-> **メモ:** このコードを `main()` 関数に追加してください。
+> [!NOTE]
+> このコードを `main()` 関数に追加してください。
 
 ```js
 // 頂点シェーダーのプログラム
@@ -84,7 +86,8 @@ const vsSource = `
 
 この場合、照明を使用せずに白い正方形を描画するだけなので、毎回単純に白を返します。
 
-> **メモ:** このコードを `main()` 関数に追加してください。
+> [!NOTE]
+> このコードを `main()` 関数に追加してください。
 
 ```js
 const fsSource = `
@@ -98,7 +101,8 @@ const fsSource = `
 
 2 つのシェーダーを定義したので、それらを WebGL に渡してコンパイルし、リンクする必要があります。以下のコードは `loadShader()` を呼び出して 2 つのシェーダーを作成し、シェーダーの種類とソースを渡します。次にプログラムを作成し、シェーダーを接続してそれらをリンクします。コンパイルまたはリンクが失敗した場合、コードはアラートを表示します。
 
-> **メモ:** これらの 2 つの関数を "webgl-demo.js" スクリプトに追加してください。
+> [!NOTE]
+> これらの 2 つの関数を "webgl-demo.js" スクリプトに追加してください。
 
 ```js
 //
@@ -168,7 +172,8 @@ function loadShader(gl, type, source) {
 4. シェーダーのコンパイルが成功したか確かめるため、シェーダーの引数である `gl.COMPILE_STATUS` をチェックします。この引数を得るために {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}} を呼び出し、シェーダーとチェックしたい引数の名前 (`gl.COMPILE_STATUS`) を指定します。もし `false` ならばシェーダーがコンパイルに失敗したということであり、 {{domxref("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}} を用いてコンパイラから得たログと共にアラートを表示します。そしてシェーダーを削除し、シェーダーの読み込みに失敗したことを示すため `null` を返します。
 5. シェーダーのコンパイルに成功した場合、コンパイルされたシェーダーを呼び出し元に返します。
 
-> **メモ:** このコードを `main()` 関数に追加してください。
+> [!NOTE]
+> このコードを `main()` 関数に追加してください。
 
 ```js
 // シェーダープログラムを初期化する。ここで頂点への
@@ -178,7 +183,8 @@ const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
 
 シェーダープログラムを作成した後、 WebGL が入力に割り当てた位置を調べる必要があります。この場合、 1 つの属性と 2 つのユニフォームがあります。属性はバッファーから値を受け取ります。頂点シェーダーは実行される度にその属性に割り当てられたバッファーから次の値を受け取ります。[ユニフォーム](/ja/docs/Web/API/WebGL_API/Data#uniforms)は JavaScript のグローバル変数に似ており、シェーダーのどの実行時においても値は不変です。属性とユニフォームの位置は、単一のシェーダープログラムに固有のものなので、それらをまとめて保存して、簡単に受け渡しできるようにします。
 
-> **メモ:** このコードを `main()` 関数に追加してください。
+> [!NOTE]
+> このコードを `main()` 関数に追加してください。
 
 ```js
 // シェーダープログラムを使用するために必要な情報をすべて収集する。
@@ -202,7 +208,8 @@ const programInfo = {
 
 これを行うのに `initBuffers()` 関数を使用しますが、これは別な [JavaScript モジュール](/ja/docs/Web/JavaScript/Guide/Modules)に実装します。より高度な WebGL の概念に踏み込むにつれて、この操作はより多くの（そしてより複雑な） 3D オブジェクトを作成するために拡張していきます。
 
-> **メモ:** "init-buffers.js" という新しいファイルを作成し、以下の内容にしてください。
+> [!NOTE]
+> "init-buffers.js" という新しいファイルを作成し、以下の内容にしてください。
 
 ```js
 function initBuffers(gl) {
@@ -243,7 +250,8 @@ export { initBuffers };
 
 シェーダーが確立され、位置が参照され、正方形の平面の頂点位置がバッファーに格納されたら、実際にシーンをレンダリングすることができます。これは `drawScene()` 関数で行いますが、これも別の JavaScript モジュールで実装します。
 
-> **メモ:** "draw-scene.js" という新しいファイルを作成し、以下の内容にしてください。
+> [!NOTE]
+> "draw-scene.js" という新しいファイルを作成し、以下の内容にしてください。
 
 ```js
 function drawScene(gl, programInfo, buffers) {
@@ -339,14 +347,16 @@ export { drawScene };
 
 最後に、 `initBuffers()` と `drawScene()` を呼び出してみましょう。
 
-> **メモ:** このコードを "webgl-demo.js" ファイルの先頭に追加してください。
+> [!NOTE]
+> このコードを "webgl-demo.js" ファイルの先頭に追加してください。
 
 ```js
 import { initBuffers } from "./init-buffers.js";
 import { drawScene } from "./draw-scene.js";
 ```
 
-> **メモ:** このコードを `main()` 関数の末尾に追加してください。
+> [!NOTE]
+> このコードを `main()` 関数の末尾に追加してください。
 
 ```js
 // ここでは、これから描画するすべてのオブジェクトを
diff --git a/files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
index 724edb3f862819..57d3a3a7732f6a 100644
--- a/files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
+++ b/files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
@@ -11,7 +11,8 @@ l10n:
 
 この例では、実際にはカメラを回転させることで、正方形を回転させているように見せていきます。最初に、カメラの現在の回転を追跡する変数が必要です。
 
-> **メモ:** このコードを "webgl-demo.js" スクリプトの始めに追加してください。
+> [!NOTE]
+> このコードを "webgl-demo.js" スクリプトの始めに追加してください。
 
 ```js
 let squareRotation = 0.0;
@@ -20,7 +21,8 @@ let deltaTime = 0;
 
 ここで `drawScene()` 関数を更新して、カメラを描画するときに現在の回転を適用する必要があります。カメラを正方形の初期描画位置に移動させた後、回転を適用します。
 
-> **メモ:** "draw-scene.js" モジュールで、 `drawScene()` 関数の宣言を更新し、使用する回転を渡せるようにします。
+> [!NOTE]
+> "draw-scene.js" モジュールで、 `drawScene()` 関数の宣言を更新し、使用する回転を渡せるようにします。
 
 ```js-nolint
 function drawScene(gl, programInfo, buffers, squareRotation) {
@@ -41,7 +43,8 @@ mat4.rotate(
 
 実際にアニメーションさせるには、 `squareRotation` の値を時間とともに変化させるコードを追加する必要があります。
 
-> **メモ:** このコードを `main()` 関数の終わりに追加し、既存の `drawScene()` の呼び出しを置き換えてください。
+> [!NOTE]
+> このコードを `main()` 関数の終わりに追加し、既存の `drawScene()` の呼び出しを置き換えてください。
 
 ```js
 let then = 0;
diff --git a/files/ja/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/ja/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
index 244a10d98511e7..84bbf90a7fb9e5 100644
--- a/files/ja/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
+++ b/files/ja/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
@@ -13,14 +13,16 @@ l10n:
 
 始めに、ビデオフレームを取り出すのに使う {{ HTMLElement("video") }} 要素を作成します。
 
-> **メモ:** この宣言を "webgl-demo.js" スクリプトの始めに追加しましょう。
+> [!NOTE]
+> この宣言を "webgl-demo.js" スクリプトの始めに追加しましょう。
 
 ```js
 // 動画がテクスチャにコピーできる場合は true に設定する
 let copyVideo = false;
 ```
 
-> **メモ:** この関数を "webgl-demo.js" スクリプトに追加しましょう。
+> [!NOTE]
+> この関数を "webgl-demo.js" スクリプトに追加しましょう。
 
 ```js
 function setupVideo(url) {
@@ -77,7 +79,8 @@ WebGL にテクスチャデータを提供するために使用するために
 
 次に変更するのは `initTexture()` です。画像ファイルを読み込む必要がなくなったため、とても単純になります。画像を読み込む代わりに、空のテクスチャオブジェクトを作成して、後で使用するフィルターを設定します。
 
-> **メモ:** "webgl-demo.js" の `loadTexture()` 関数を以下のコードに置き換えましょう。
+> [!NOTE]
+> "webgl-demo.js" の `loadTexture()` 関数を以下のコードに置き換えましょう。
 
 ```js
 function initTexture(gl) {
@@ -117,7 +120,8 @@ function initTexture(gl) {
 }
 ```
 
-> **メモ:** 以下の関数を "webgl-demo.js" に追加しましょう。
+> [!NOTE]
+> 以下の関数を "webgl-demo.js" に追加しましょう。
 
 ```js
 function updateTexture(gl, texture, video) {
@@ -148,7 +152,8 @@ const texture = initTexture(gl);
 const video = setupVideo("Firefox.mp4");
 ```
 
-> **メモ:** また、[Firefox.mp4](https://github.com/mdn/dom-examples/blob/main/webgl-examples/tutorial/sample8/Firefox.mp4) ファイルを JavaScript ファイルと同じローカルディレクトリーにダウンロードする必要があります。
+> [!NOTE]
+> また、[Firefox.mp4](https://github.com/mdn/dom-examples/blob/main/webgl-examples/tutorial/sample8/Firefox.mp4) ファイルを JavaScript ファイルと同じローカルディレクトリーにダウンロードする必要があります。
 
 > **メモ:** `main()` 関数で、 `render()` 関数をこのように置き換えましょう。
 
diff --git a/files/ja/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md b/files/ja/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
index 0015cd5022813b..d4b72f096deb7e 100644
--- a/files/ja/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
+++ b/files/ja/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
@@ -15,7 +15,8 @@ l10n:
 
 始めに `initBuffers()` のコードを更新して、立方体の頂点の位置を示すバッファーを構築しましょう。この方法は平面の正方形を作る場合と同じですが、頂点が 24 個（1 面につき 4 個）ありますので、コードは多少長くなります。
 
-> **メモ:** "init-buffers.js" モジュールの `initPositionBuffer()` 関数で、 `positions` 宣言を次のコードに置き換えてください。
+> [!NOTE]
+> "init-buffers.js" モジュールの `initPositionBuffer()` 関数で、 `positions` 宣言を次のコードに置き換えてください。
 
 ```js
 const positions = [
@@ -41,7 +42,8 @@ const positions = [
 
 頂点に z 成分を追加したので、 `vertexPosition` 属性の `numComponents` を 3 に更新する必要があります。
 
-> **メモ:** "draw-scene.js" モジュールの `setPositionAttribute()` 関数で、定数 `numComponents` を `2` から `3` に変更しましょう。
+> [!NOTE]
+> "draw-scene.js" モジュールの `setPositionAttribute()` 関数で、定数 `numComponents` を `2` から `3` に変更しましょう。
 
 ```js
 const numComponents = 3;
@@ -51,7 +53,8 @@ const numComponents = 3;
 
 24 個の座標それぞれについて、色の配列を作成しなければなりません。このコードでは始めに各面の色を定義します。次にループを用いてこれらの配列を各頂点の色情報に変換しています。
 
-> **メモ:** "init-buffers.js" モジュールの `initColorBuffer()` 関数で、 `colors` 宣言を次のコードに置き換えましょう。
+> [!NOTE]
+> "init-buffers.js" モジュールの `initColorBuffer()` 関数で、 `colors` 宣言を次のコードに置き換えましょう。
 
 ```js
 const faceColors = [
@@ -78,7 +81,8 @@ for (var j = 0; j < faceColors.length; ++j) {
 
 頂点の配列が生成されたら、要素の配列を構築する必要があります。
 
-> **メモ:** "init-buffer.js" モジュールに以下の関数を追加しましょう。
+> [!NOTE]
+> "init-buffer.js" モジュールに以下の関数を追加しましょう。
 
 ```js
 function initIndexBuffer(gl) {
@@ -144,7 +148,8 @@ function initIndexBuffer(gl) {
 
 次に、この新しい関数を `initBuffers()` から呼び出して、作成したバッファー を返す必要があります。
 
-> **メモ:** "init-buffers.js" モジュールの `initBuffers()` 関数の終わりに以下のコードを追加し、既存の `return` 文を置き換えましょう。
+> [!NOTE]
+> "init-buffers.js" モジュールの `initBuffers()` 関数の終わりに以下のコードを追加し、既存の `return` 文を置き換えましょう。
 
 ```js
 const indexBuffer = initIndexBuffer(gl);
@@ -167,7 +172,8 @@ return {
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
 ```
 
-> **メモ:** "draw-scene.js" モジュールの `drawScene()` 関数で、 2 つの `gl.uniformMatrix4fv` 呼び出しの後で、 `gl.drawArrays()` 行を含むブロックを以下のブロックに置き換えましょう。
+> [!NOTE]
+> "draw-scene.js" モジュールの `drawScene()` 関数で、 2 つの `gl.uniformMatrix4fv` 呼び出しの後で、 `gl.drawArrays()` 行を含むブロックを以下のブロックに置き換えましょう。
 
 ```js
 {
@@ -182,13 +188,15 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
 
 最後に、変数 `squareRotation` を `cubeRotation` に置き換えて、 x 軸周りの 2 つ目の回転を追加してみましょう。
 
-> **メモ:** "webgl-demo.js" ファイルの始めには、 `squareRotation` 宣言を次の行に置き換えましょう。
+> [!NOTE]
+> "webgl-demo.js" ファイルの始めには、 `squareRotation` 宣言を次の行に置き換えましょう。
 
 ```js
 let cubeRotation = 0.0;
 ```
 
-> **メモ:** 関数 `drawScene()` の宣言で、 `squareRotation` を `cubeRotation` に置き換えましょう。
+> [!NOTE]
+> 関数 `drawScene()` の宣言で、 `squareRotation` を `cubeRotation` に置き換えましょう。
 
 ```js-nolint
 function drawScene(gl, programInfo, buffers, cubeRotation) {
diff --git a/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
index 26420c1cf69029..74123cbe805be4 100644
--- a/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
+++ b/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
@@ -15,7 +15,8 @@ GL ではオブジェクトは頂点の集合を用いて構築され、各頂
 
 例えば、四隅が異なる色（赤、青、緑、白）である正方形にグラデーションを作成したいとします。始めに行うことは、4 つの頂点にこれらの色を設定することです。これを行うには、まず頂点の色の配列を作成し、次にその配列を WebGL のバッファーに格納します。これらは、以下に挙げるコードを `initBuffers()` 関数に追加することで実行します。
 
-> **メモ:** 以下の関数を `init-buffers.js` モジュールに追加してください。
+> [!NOTE]
+> 以下の関数を `init-buffers.js` モジュールに追加してください。
 
 ```js-nolint
 function initColorBuffer(gl) {
@@ -51,7 +52,8 @@ return {
 
 これらの色を使用するには、カラーバッファーから適切な色を引き出すように頂点シェーダーを更新する必要があります。
 
-> **メモ:** 以下のように `main()` 関数の `vsSource` 宣言を更新してください。
+> [!NOTE]
+> 以下のように `main()` 関数の `vsSource` 宣言を更新してください。
 
 ```js
 // 頂点シェーダープログラム
@@ -78,7 +80,8 @@ const vsSource = `
 
 各ピクセルの補間色を取得するために、フラグメントシェーダーを `vColor` から値を取得するように変更する必要があります。
 
-> **メモ:** 以下のように `main()` 関数の `fsSource` 宣言を更新してください。
+> [!NOTE]
+> 以下のように `main()` 関数の `fsSource` 宣言を更新してください。
 
 ```js
 // フラグメントシェーダープログラム
@@ -119,7 +122,8 @@ const programInfo = {
 
 次に、 `drawScene()` は正方形を描画するときにこれらの色を使用する必要があります。
 
-> **メモ:** 以下の関数を `draw-scene.js` モジュールに追加してください。
+> [!NOTE]
+> 以下の関数を `draw-scene.js` モジュールに追加してください。
 
 ```js
 // カラーバッファーから vertexColor 属性に色を取り出す方法を WebGL に
diff --git a/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
index f58ff8828740f9..4a1d6c159778bf 100644
--- a/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
+++ b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
@@ -13,9 +13,11 @@ l10n:
 
 始めに、テクスチャを読み込むコードを追加します。今回は単一のテクスチャを用いて、そのテクスチャを立方体の全 6 面に貼り付けますが、テクスチャがいくつある場合でも同じ方法が適用できます。
 
-> **メモ:** テクスチャの読み込みは[クロスドメインのルール](/ja/docs/Web/HTTP/CORS)に従うことへの注意が重要です。すなわち、コンテンツが CORS で認可されているサイトからのみ、テクスチャを読み込むことができます。詳しくは以下の[ドメインをまたぐテクスチャ](#ドメインをまたぐテクスチャ)を参照してください。
+> [!NOTE]
+> テクスチャの読み込みは[クロスドメインのルール](/ja/docs/Web/HTTP/CORS)に従うことへの注意が重要です。すなわち、コンテンツが CORS で認可されているサイトからのみ、テクスチャを読み込むことができます。詳しくは以下の[ドメインをまたぐテクスチャ](#ドメインをまたぐテクスチャ)を参照してください。
 
-> **メモ:** これら 2 つの関数を "webgl-demo.js" スクリプトに追加しましょう。
+> [!NOTE]
+> これら 2 つの関数を "webgl-demo.js" スクリプトに追加しましょう。
 
 ```js
 //
@@ -114,7 +116,8 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
 そのため、レンダリング時に画像テクスチャが間違った方向になるのを防ぐために、 [`pixelStorei()`](/ja/docs/Web/API/WebGLRenderingContext/pixelStorei) を `gl.UNPACK_FLIP_Y_WEBGL` 引数を `true` に設定して呼び出す必要があります。
 
-> **メモ:** 以下のコードを `main()` 関数の `initBuffers()` を呼び出した直後に追加してください。
+> [!NOTE]
+> 以下のコードを `main()` 関数の `initBuffers()` を呼び出した直後に追加してください。
 
 ```js
 // テクスチャの読み込み
@@ -123,13 +126,15 @@ const texture = loadTexture(gl, "cubetexture.png");
 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 ```
 
-> **メモ:** 最後に、 [cubetexture.png](https://raw.githubusercontent.com/mdn/dom-examples/main/webgl-examples/tutorial/sample6/cubetexture.png) ファイルを JavaScript ファイルと同じローカルディレクトリーにダウンロードしましょう。
+> [!NOTE]
+> 最後に、 [cubetexture.png](https://raw.githubusercontent.com/mdn/dom-examples/main/webgl-examples/tutorial/sample6/cubetexture.png) ファイルを JavaScript ファイルと同じローカルディレクトリーにダウンロードしましょう。
 
 ## テクスチャを表面にマッピングする
 
 以上で、テクスチャの読み込みと使用する準備ができました。しかしテクスチャが使用できるようになるには、まず立方体の面の頂点にテクスチャの座標をマッピングする必要があります。これには `initBuffers()` にある、立方体の各面に色を設定する既存のコードを置き換えます。
 
-> **メモ:** この関数を "init-buffer.js" モジュールに追加しましょう。
+> [!NOTE]
+> この関数を "init-buffer.js" モジュールに追加しましょう。
 
 ```js
 function initTextureBuffer(gl) {
@@ -171,13 +176,15 @@ function initTextureBuffer(gl) {
 
 次に、色バッファーの代わりにテクスチャー座標バッファーを作成して返すように `initBuffers()` を更新する必要があります。
 
-> **メモ:** "init-buffers.js" モジュールの `initBuffers()` 関数で、 `initColorBuffer()` の呼び出しを以下の行に置き換えましょう。
+> [!NOTE]
+> "init-buffers.js" モジュールの `initBuffers()` 関数で、 `initColorBuffer()` の呼び出しを以下の行に置き換えましょう。
 
 ```js
 const textureCoordBuffer = initTextureBuffer(gl);
 ```
 
-> **メモ:** "init-buffers.js" モジュールの `initBuffers()` 関数で、 `return` 文を以下に置き換えましょう。
+> [!NOTE]
+> "init-buffers.js" モジュールの `initBuffers()` 関数で、 `return` 文を以下に置き換えましょう。
 
 ```js
 return {
@@ -195,7 +202,8 @@ return {
 
 頂点シェーダーを、色データを取得する代わりに、テクスチャ座標データを取得するように置き換える必要があります。
 
-> **メモ:** 以下のように `main()` 関数の `vsSource` 宣言を更新しましょう。
+> [!NOTE]
+> 以下のように `main()` 関数の `vsSource` 宣言を更新しましょう。
 
 ```js
 const vsSource = `
@@ -220,7 +228,8 @@ const vsSource = `
 
 フラグメントシェーダーも同様に更新する必要があります。
 
-> **メモ:** 以下のように `main()` 関数の `fsSource` 宣言を更新しましょう。
+> [!NOTE]
+> 以下のように `main()` 関数の `fsSource` 宣言を更新しましょう。
 
 ```js
 const fsSource = `
@@ -262,7 +271,8 @@ const programInfo = {
 
 `drawScene()` 関数の変更点は簡単です。
 
-> **メモ:** "draw-scene.js" モジュールの `drawScene()` 関数内に、以下の関数を追加しましょう。
+> [!NOTE]
+> "draw-scene.js" モジュールの `drawScene()` 関数内に、以下の関数を追加しましょう。
 
 ```js
 // テクスチャ座標をバッファーから取り出す方法を webgl に伝える。
@@ -285,7 +295,8 @@ function setTextureAttribute(gl, buffers, programInfo) {
 }
 ```
 
-> **メモ:** "draw-scene.js" モジュールの `drawScene()` 関数内で、 `setColorAttribute()` の呼び出しを以下の行に置き換えましょう。
+> [!NOTE]
+> "draw-scene.js" モジュールの `drawScene()` 関数内で、 `setColorAttribute()` の呼び出しを以下の行に置き換えましょう。
 
 ```js
 setTextureAttribute(gl, buffers, programInfo);
diff --git a/files/ja/web/api/webgl_api/using_extensions/index.md b/files/ja/web/api/webgl_api/using_extensions/index.md
index 90277e5d0f4ee6..b85a58831dc88e 100644
--- a/files/ja/web/api/webgl_api/using_extensions/index.md
+++ b/files/ja/web/api/webgl_api/using_extensions/index.md
@@ -7,7 +7,8 @@ slug: Web/API/WebGL_API/Using_Extensions
 
 WebGL は姉妹 API (OpenGL や OpenGL ES) と同様に、拡張機能に対応しています。拡張機能の完全な一覧は [Khronos WebGL Extension レジストリー](http://www.khronos.org/registry/webgl/extensions/)で確認できます。
 
-> **メモ:** 他の GL API とは異なり、WebGL の拡張機能は明示的に要求した場合に限り使用できます。
+> [!NOTE]
+> 他の GL API とは異なり、WebGL の拡張機能は明示的に要求した場合に限り使用できます。
 
 ## 正規拡張機能名とベンダー接頭辞と設定
 
diff --git a/files/ja/web/api/webgl_api/webgl_model_view_projection/index.md b/files/ja/web/api/webgl_api/webgl_model_view_projection/index.md
index bbbc2c23ff6210..a5e908546003e0 100644
--- a/files/ja/web/api/webgl_api/webgl_model_view_projection/index.md
+++ b/files/ja/web/api/webgl_api/webgl_model_view_projection/index.md
@@ -9,7 +9,8 @@ l10n:
 
 この記事では、 [WebGL](/ja/docs/Web/API/WebGL_API) プロジェクト内でデータを取得し、それを適切な空間に投影して画面に表示する方法について説明します。並進、拡縮、回転行列を使用した基本的な行列計算の知識があることを前提としています。3D シーンを構成するときに通常使用される中心的な 3 つの行列である、モデル、ビュー、投影行列について説明します。
 
-> **メモ:** この記事は [MDN コンテンツキット](https://github.com/gregtatum/mdn-model-view-projection)としても利用可能です。また、 `MDN` グローバルオブジェクトの下で利用可能な[ユーティリティ関数](https://github.com/gregtatum/mdn-webgl)のコレクションを使用しています。
+> [!NOTE]
+> この記事は [MDN コンテンツキット](https://github.com/gregtatum/mdn-model-view-projection)としても利用可能です。また、 `MDN` グローバルオブジェクトの下で利用可能な[ユーティリティ関数](https://github.com/gregtatum/mdn-webgl)のコレクションを使用しています。
 
 ## モデル、ビュー、投影行列
 
@@ -33,7 +34,8 @@ WebGL プログラムでは、通常、データは自分の座標系で GPU に
 
 この例では、画面上に 2D ボックスを描画するカスタム `WebGLBox` オブジェクトを作成します。
 
-> **メモ:** WebGLBox のそれぞれの例のコードは、この [GitHub リポジトリー](https://github.com/gregtatum/mdn-model-view-projection/tree/master/lessons)にあり、セクションごとに整理されています。また、各セクションの一番下に JSFiddle へのリンクがあります。
+> [!NOTE]
+> WebGLBox のそれぞれの例のコードは、この [GitHub リポジトリー](https://github.com/gregtatum/mdn-model-view-projection/tree/master/lessons)にあり、セクションごとに整理されています。また、各セクションの一番下に JSFiddle へのリンクがあります。
 
 #### WebGLBox コンストラクター
 
@@ -411,7 +413,8 @@ gl.uniformMatrix4fv(
 gl_Position = model * vec4(position, 1.0);
 ```
 
-> **メモ:** JavaScript で行列の乗算はカスタム関数を要求されますが、シェーダーでは単純な \* 演算子で言語に組み込まれています。
+> [!NOTE]
+> JavaScript で行列の乗算はカスタム関数を要求されますが、シェーダーでは単純な \* 演算子で言語に組み込まれています。
 
 ### 結果
 
diff --git a/files/ja/web/api/webgl_color_buffer_float/index.md b/files/ja/web/api/webgl_color_buffer_float/index.md
index 29b7142baf4fe1..cd345a9753febf 100644
--- a/files/ja/web/api/webgl_color_buffer_float/index.md
+++ b/files/ja/web/api/webgl_color_buffer_float/index.md
@@ -11,7 +11,8 @@ l10n:
 
 WebGL 拡張は {{domxref("WebGLRenderingContext.getExtension()")}} メソッドを使用することで利用することができます。詳細な情報については、[WebGL チュートリアル](/ja/docs/Web/API/WebGL_API/Using_Extensions)の [Using Extensions](/ja/docs/Web/API/WebGL_API/Tutorial) も参照してください。
 
-> **メモ:** この拡張機能は {{domxref("WebGLRenderingContext", "WebGL 1", "", 1)}} コンテキストでのみ利用することができます。 {{domxref("WebGL2RenderingContext", "WebGL 2", "", 1)}} では {{domxref("EXT_color_buffer_float")}} 拡張を使用してください。
+> [!NOTE]
+> この拡張機能は {{domxref("WebGLRenderingContext", "WebGL 1", "", 1)}} コンテキストでのみ利用することができます。 {{domxref("WebGL2RenderingContext", "WebGL 2", "", 1)}} では {{domxref("EXT_color_buffer_float")}} 拡張を使用してください。
 >
 > {{domxref("OES_texture_float")}} 拡張は、暗黙にこの拡張を有効にします。
 
diff --git a/files/ja/web/api/webglrenderingcontext/uniform/index.md b/files/ja/web/api/webglrenderingcontext/uniform/index.md
index 015004e9b09c07..9126b78ff896e4 100644
--- a/files/ja/web/api/webglrenderingcontext/uniform/index.md
+++ b/files/ja/web/api/webglrenderingcontext/uniform/index.md
@@ -7,7 +7,8 @@ slug: Web/API/WebGLRenderingContext/uniform
 
 **`WebGLRenderingContext.uniform[1234][fi][v]()`** は [WebGL API](/ja/docs/Web/API/WebGL_API) のメソッドで、ユニフォーム変数の値を指定します。プログラムオブジェクトで定義されたすべてのアクティブなユニフォーム変数は、プログラムオブジェクトが正常にリンクされたときに 0 に初期化されます。それらは、プログラムオブジェクトのリンクが成功し、再び 0 に初期化されるまで、このメソッドの呼び出しによって割り当てられた値を保持します。
 
-> **メモ:** ここで書かれている関数の多くは WebGL 2 インターフェイスで拡張されており、
+> [!NOTE]
+> ここで書かれている関数の多くは WebGL 2 インターフェイスで拡張されており、
 > {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}} 以下にあります。
 
 ## 構文
diff --git a/files/ja/web/api/webgpu_api/index.md b/files/ja/web/api/webgpu_api/index.md
index ab9ec264f1e878..d2cf9e9af5a9a1 100644
--- a/files/ja/web/api/webgpu_api/index.md
+++ b/files/ja/web/api/webgpu_api/index.md
@@ -37,7 +37,8 @@ WebGPU は、最近の GPU API と互換性があり、より「webby」な感
   - 個別 GPU: 独自の基板にあり、CPU からは分離されています。
   - ソフトウェア「GPU」: CPU 上で実装されています。
 
-  > **メモ:** 上記の図では、GPU が 1 個だけあるデバイスを仮定しています。
+  > [!NOTE]
+  > 上記の図では、GPU が 1 個だけあるデバイスを仮定しています。
 
 - OS の一部であるネイティブ GPU API (たとえば macOS 上の Metal) は、ネイティブアプリケーションが GPU の機能を用いることができるプログラミングインターフェイスです。API 命令がドライバーを通じて GPU に送られ、結果を受け取ります。上記の図ではネイティブ API およびドライバーが 1 個だけあるデバイスを仮定していますが、システムが GPU とやり取りするための複数のネイティブ OS API やドライバーを持つことも可能です。
 - ブラウザーの WebGPU 実装は、ネイティブ GPU API ドライバーを通じた GPU とのやり取りを扱います。WebGPU のアダプターが、あなたのコード上で下層のシステムで利用可能な物理 GPU とドライバーを効率よく表します。
@@ -132,7 +133,8 @@ fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
 `;
 ```
 
-> **メモ:** ここでのデモではシェーダーコードをテンプレートリテラルに格納していますが、WebGPU プログラムに渡すテキストとして取得しやすい場所ならどこに格納することもできます。たとえば、シェーダーを {{htmlelement("script")}} 要素の中に格納し、{{domxref("Node.textContent")}} を用いて内容を取り出す方法もよく用いられます。WGSL 用の正しい MIME タイプは `text/wgsl` です。
+> [!NOTE]
+> ここでのデモではシェーダーコードをテンプレートリテラルに格納していますが、WebGPU プログラムに渡すテキストとして取得しやすい場所ならどこに格納することもできます。たとえば、シェーダーを {{htmlelement("script")}} 要素の中に格納し、{{domxref("Node.textContent")}} を用いて内容を取り出す方法もよく用いられます。WGSL 用の正しい MIME タイプは `text/wgsl` です。
 
 シェーダーコードを WebGPU で利用できるようにするには、シェーダーコードをディスクリプターオブジェクトのプロパティとして {{domxref("GPUDevice.createShaderModule()")}} に渡し、{{domxref("GPUShaderModule")}} の中に格納する必要があります。これは、たとえば以下のように行います。
 
@@ -159,7 +161,8 @@ context.configure({
 });
 ```
 
-> **メモ:** 使用するテクスチャーの形式を決めるベストプラクティスは、{{domxref("GPU.getPreferredCanvasFormat()")}} メソッドを用いることです。これは、ユーザーのデバイス用の最も効率的な形式 (`bgra8unorm` または `rgba8unorm`) を選択します。
+> [!NOTE]
+> 使用するテクスチャーの形式を決めるベストプラクティスは、{{domxref("GPU.getPreferredCanvasFormat()")}} メソッドを用いることです。これは、ユーザーのデバイス用の最も効率的な形式 (`bgra8unorm` または `rgba8unorm`) を選択します。
 
 ### バッファを生成して三角形データを書き込む
 
@@ -479,7 +482,8 @@ WebGPU の呼び出しは、GPU 処理の中で非同期で検証されます。
 
 explainer で、WebGPU のエラー処理についての詳細情報を得ることができます。[Object validity and destroyed-ness](https://gpuweb.github.io/gpuweb/explainer/#invalid-and-destroyed) および [Errors](https://gpuweb.github.io/gpuweb/explainer/#errors) を参照してください。[WebGPU Error Handling best practices](https://toji.dev/webgpu-best-practices/error-handling) には有用な実世界での例やアドバイスがあります。
 
-> **メモ:** WebGL でエラーを処理する歴史上の方法は、エラーの情報を返す {{domxref("WebGLRenderingContext.getError", "getError()")}} メソッドを提供することです。これはエラーを同期式で返し、効率がよくないという問題があります。これを呼び出すごとに GPU との往復のやりとりを行い、これまで発行した処理がすべて完了するまで待つ必要があります。さらに、状態モデルはフラット、すなわち関係ないコードの間でエラーが漏れる可能性があります。WebGPU の作者はこれらの点を改善することにしました。
+> [!NOTE]
+> WebGL でエラーを処理する歴史上の方法は、エラーの情報を返す {{domxref("WebGLRenderingContext.getError", "getError()")}} メソッドを提供することです。これはエラーを同期式で返し、効率がよくないという問題があります。これを呼び出すごとに GPU との往復のやりとりを行い、これまで発行した処理がすべて完了するまで待つ必要があります。さらに、状態モデルはフラット、すなわち関係ないコードの間でエラーが漏れる可能性があります。WebGPU の作者はこれらの点を改善することにしました。
 
 ## インターフェイス
 
diff --git a/files/ja/web/api/webrtc_api/build_a_phone_with_peerjs/index.md b/files/ja/web/api/webrtc_api/build_a_phone_with_peerjs/index.md
index 94fe7a913ed493..b18d9dc12e572f 100644
--- a/files/ja/web/api/webrtc_api/build_a_phone_with_peerjs/index.md
+++ b/files/ja/web/api/webrtc_api/build_a_phone_with_peerjs/index.md
@@ -24,7 +24,8 @@ WebRTC の主な課題の 1 つが、使用したり開発したりするのが
 
 始める前に、 [node](https://nodejs.org/en/download/) と [Yarn](https://classic.yarnpkg.com/en/docs/install) がインストールされていることを確認してください（後の記事の説明では Yarn を想定していますが、推奨するなら [npm](https://docs.npmjs.com/getting-started/) や他のマネージャを使用するのも自由です）。
 
-> **メモ:** 手順を追うほうが学習しやすいという方には、この[コードによるチュートリアル](https://github.com/SamsungInternet/WebPhone/tree/master/tutorial)も提供していますので、代わりに使用してください。
+> [!NOTE]
+> 手順を追うほうが学習しやすいという方には、この[コードによるチュートリアル](https://github.com/SamsungInternet/WebPhone/tree/master/tutorial)も提供していますので、代わりに使用してください。
 
 ### 目次
 
diff --git a/files/ja/web/api/window/sidebar/index.md b/files/ja/web/api/window/external/index.md
similarity index 97%
rename from files/ja/web/api/window/sidebar/index.md
rename to files/ja/web/api/window/external/index.md
index 20e41b5adcff2c..bed5e9e252f91d 100644
--- a/files/ja/web/api/window/sidebar/index.md
+++ b/files/ja/web/api/window/external/index.md
@@ -1,6 +1,7 @@
 ---
 title: Window.sidebar
-slug: Web/API/Window/sidebar
+slug: Web/API/Window/external
+original_slug: Web/API/Window/sidebar
 ---
 
 {{APIRef}} {{Deprecated_Header}}
diff --git a/files/ja/web/api/window/fetch/index.md b/files/ja/web/api/window/fetch/index.md
index 3d28967d5777b3..83c95f6f5725f8 100644
--- a/files/ja/web/api/window/fetch/index.md
+++ b/files/ja/web/api/window/fetch/index.md
@@ -1,20 +1,20 @@
 ---
-title: fetch() グローバル関数
+title: "Window: fetch() メソッド"
+short-title: fetch()
 slug: Web/API/Window/fetch
-original_slug: Web/API/fetch
 l10n:
-  sourceCommit: bb75692ff9b82320169ed3f27fcc5136c86b8d21
+  sourceCommit: 80d3325431bf238f06c986c2dc78944ac5227372
 ---
 
 {{APIRef("Fetch API")}}
 
-**`fetch()`** はグローバルのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。
+**`fetch()`** は {{domxref("Window")}} インターフェイスのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。
 
-このプロミスはそのリクエストに対するレスポンスを表す {{domxref("Response")}} で解決します。
+このプロミスは、そのリクエストに対するレスポンスを表す {{domxref("Response")}} で解決します。
 
-{{domxref("fetch()")}} のプロミスはネットワークエラーが発生した場合（普通は権限の問題があったときなど）のみ拒否されます。 {{domxref("fetch()")}} のプロミスは HTTP エラー（`404` など）では拒否*されません*。代わりに、 `then()` ハンドラーで {{domxref("Response.ok")}} や {{domxref("Response.status")}} プロパティをチェックする必要があります。
-
-`WindowOrWorkerGlobalScope` は {{domxref("Window")}} と {{domxref("WorkerGlobalScope")}} の両方で実装されています。これはつまり `fetch()` メソッドは、リソースを取得したいと思うような大部分コンテキストで使用可能ということです。
+`fetch()` のプロミスは、ネットワークエラーが発生した場合（普通は権限の問題がaったときなど）のみ拒否されます。
+`fetch()` のプロミスは、サーバーがエラーを示す HTTP ステータスコード（`404`、`504` など）を返しても拒否されません。
+代わりに、 `then()` ハンドラーで {{domxref("Response.ok")}} や {{domxref("Response.status")}} プロパティをチェックする必要があります。
 
 `fetch()` メソッドは取得するリソースのディレクティブではなく、[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/Headers/Content-Security-Policy)の `connect-src` ディレクティブによって制御されます。
 
@@ -33,76 +33,12 @@ fetch(resource, options)
 
   - : 取得したいリソースを定義します。以下のどちらかが使用できます。
 
-    - 文字列または{{Glossary("stringifier", "文字列化")}}できるその他のオブジェクト（{{domxref("URL")}} オブジェクトを含む）。取得したいリソースの直接の URL を含む文字列です。
+    - 文字列または{{Glossary("stringifier", "文字列化")}}できるその他のオブジェクト（{{domxref("URL")}} オブジェクトを含む）。取得したいリソースの直接の URL を含む文字列です。この URL は、文書内の {{domxref("Node.baseURI", "baseURI")}}、ワーカーコンテキストでは {{domxref("WorkerGlobalScope.location")}} となります。
     - {{domxref("Request")}} オブジェクト。
 
 - `options` {{optional_inline}}
 
-  - : リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。
-
-    - `method`
-      - : リクエストするメソッド、`"GET"`、`"POST"` など。既定値は `"GET"` です。
-        なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。
-        (この動作は Firefox 65 で修正されました。 [Firefox バグ 1508661](https://bugzil.la/1508661) を参照)
-        [RFC 9110](https://www.rfc-editor.org/rfc/rfc9110#name-overview) のメソッドのいずれかと大文字小文字を区別せずに照合する文字列は、自動的に大文字になります。
-        （`PATCH` のような）カスタムメソッドを使用したい場合は、自分で大文字にする必要があります。
-    - `headers`
-
-      - : リクエストに追加したいヘッダーで、 {{domxref("Headers")}} オブジェクトまたは {{jsxref("String")}} 値を持つオブジェクトリテラルで指定してください。
-        なお、[一部の名前は禁止されています](/ja/docs/Glossary/Forbidden_header_name)。
-
-        > **メモ:** HTTP の [`Authorization`](/ja/docs/Web/HTTP/Headers/Authorization) ヘッダーがリクエストに追加される場合がありますが、そのリクエストがオリジン間でリダイレクトされた場合は削除されます。
-
-    - `body`
-      - : リクエストに追加したい本体です。これには {{domxref("Blob")}}, {{jsxref("ArrayBuffer")}}, {{jsxref("TypedArray")}}, {{jsxref("DataView")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, 文字列オブジェクトまたはリテラル、 {{domxref("ReadableStream")}} オブジェクトなどが使用できます。これは最新の利用可能状況で、まだ実験的なものです。[互換性情報](/ja/docs/Web/API/Request#ブラウザーの互換性)を調べて、あなたがこれを使用できるかどうかを確認してください。メソッドが `GET` や `HEAD` の場合は使用できないので注意してください。
-    - `mode`
-      - : リクエストで使用する[モード](/ja/docs/Web/API/Request/mode)です。例えば `cors`、`no-cors`、`same-origin` などです。
-    - `credentials`
-
-      - : ブラウザーが資格情報を使用して何を行うか（[クッキー](/ja/docs/Web/HTTP/Cookies)、 [HTTP 認証](/ja/docs/Web/HTTP/Authentication)項目、 TLS クライアント証明書）を制御します。以下の文字列のうちの何れかでなければなりません。
-
-        - `omit`
-          - : リクエストから資格情報を除外し、レスポンスで返される資格情報（{{HTTPHeader("Set-Cookie")}} ヘッダーなど）を無視するようブラウザーに指示します。
-        - `same-origin`
-          - : 同一オリジンの URL へのリクエストに資格情報を記載し、同一オリジンの URL からのレスポンスで送り返されるすべての資格情報を使用するようブラウザーに指示します。**これが既定値です。**
-        - `include`
-
-          - : ブラウザーに、同一オリジンおよびオリジン間リクエストの両方に資格情報を記載し、レスポンスで送り返された資格情報を常に使用するように指示します。
-
-            > **メモ:** 資格情報は単純な、そして「最終的な」オリジン間リクエストに記載することができますが、 [CORS プリフライトリクエスト](/ja/docs/Web/HTTP/CORS#preflight_requests_and_credentials)には記載されるべきではありません。
-
-    - `cache`
-      - : 文字列で、このリクエストがブラウザーの [HTTP キャッシュ](/ja/docs/Web/HTTP/Caching)にどう作用するかを示します。利用可能な値は `default`, `no-store`, `reload`, `no-cache`, `force-cache`, `only-if-cached` で、 {{domxref("Request")}} オブジェクトの {{domxref("Request/cache", "cache")}} プロパティの記事に記述されています。
-    - `redirect`
-
-      - : リダイレクトレスポンスを取り扱う方法を示します。
-
-        - `follow`
-          - : 自動的にリダイレクトを行います。他の方法が指定されていない限り、リダイレクトモードは `follow` に設定されます。
-        - `error`
-          - : リダイレクトが発生した場合は、エラーで中止します。
-        - `manual`
-          - : 呼び出し側は、レスポンスを別のコンテキストで処理する予定です。
-            詳しくは [WHATWG fetch standard](https://fetch.spec.whatwg.org/#concept-request-redirect-mode) を参照してください。
-
-    - `referrer`
-      - : 文字列で、リクエストのリファラーを指定します。これは同じオリジンの URL、 `about:client`、空文字列のいずれかを取ることができます。
-    - `referrerPolicy`
-      - : リクエストで使用する[リファラーポリシー](https://w3c.github.io/webappsec-referrer-policy/#referrer-policies)を指定します。使用可能な値は、 `no-referrer`, `no-referrer-when-downgrade`, `same-origin`, `origin`, `strict-origin`, `origin-when-cross-origin`, `strict-origin-when-cross-origin`, `unsafe-url` のいずれかです。
-    - `integrity`
-      - : リクエストの[サブリソース完全性](/ja/docs/Web/Security/Subresource_Integrity)の値を保持します（`sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=` など）。
-    - `keepalive`
-      - : `keepalive` オプションは、ページの終了後のリクエストを許可するのに使用されます。 `keepalive` フラグつきのフェッチは {{domxref("Navigator.sendBeacon()")}} API の置き換えです。
-    - `signal`
-      - : {{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由でフェッチリクエストと通信したり望む場合には中止したりできます。
-    - `priority`
-      - : 同じ種類の他のリクエストに対する、この読み込みリクエストの優先度を指定します。以下の文字列のいずれかでなければなりません。
-        - `high`
-          - : 同じ種類の他のリクエストに対する優先度の高いフェッチリクエスト。
-        - `low`
-          - : 同じ種類の他のリクエストと相対した、優先度の低いフェッチリクエスト。
-        - `auto`
-          - : 同じ種類の他のリクエストに対するフェッチリクエストの優先度を自動的に決定します（既定値）。
+  - : リクエストに適用する独自の設定を含む {{domxref("RequestInit")}} オブジェクトです。
 
 ### 返値
 
@@ -112,8 +48,10 @@ fetch(resource, options)
 
 - `AbortError` {{domxref("DOMException")}}
   - : {{domxref("AbortController")}} の {{domxref("AbortController.abort", "abort()")}} メソッドの呼び出しによりリクエストが中止された。
+- `NotAllowedError` {{domxref("DOMException")}}
+  - : [トピック API](/ja/docs/Web/API/Topics_API) を使用することが、[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)の {{httpheader('Permissions-Policy/browsing-topics','browsing-topics')}} によって特別に禁止されており、そして `fetch()` リクエストが `browsingTopics: true` で行われたときに発生します。
 - {{jsxref("TypeError")}}
-  - : 以下の理由で発生します。
+  - : 以下の理由で発生する可能性があります。
 
 <table>
   <thead>
@@ -123,6 +61,10 @@ fetch(resource, options)
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td>権限ポリシーによるブロック</td>
+      <td><a href="/ja/docs/Web/API/Attribution_Reporting_API">Attribution Reporting API</a> の使用は、<a href="/ja/docs/Web/HTTP/Headers/Permissions-Policy/attribution-reporting"><code>attribution-reporting</code></a> {{httpheader("Permissions-Policy")}} で、<code>fetch()</code> リクエストが <code>attributionReporting</code> を指定して行われました。</td>
+    </tr>
     <tr>
       <td>ヘッダー名が無効である。</td>
       <td>
@@ -152,7 +94,7 @@ fetch('https://example.com/', { headers });
     </tr>
     <tr>
       <td>
-        URLまたはスキームが無効であるか、フェッチが対応していないスキームを使用しているか、または特定のリクエストモードに対応していないスキームを使用している。
+        URL またはスキームが無効であるか、フェッチが対応していないスキームを使用しているか、または特定のリクエストモードに対応していないスキームを使用している。
       </td>
       <td>
         <pre>
@@ -207,7 +149,7 @@ fetch('https://example.com/', { method: 'CONNECT' });
     </tr>
     <tr>
       <td>
-        リクエストモードが "no-cors" であり、リクエストメソッドが CORS-safe に掲載されているメソッド（<code>'GET'</code>, <code>'HEAD'</code>, <code>'POST'</code>）でない場合。
+        リクエストモードが "no-cors" であり、リクエストメソッドが CORS セーフリストに掲載されているメソッド（<code>'GET'</code>, <code>'HEAD'</code>, <code>'POST'</code>）でない場合。
       </td>
       <td>
         <pre>
@@ -247,7 +189,8 @@ const myImage = document.querySelector("img");
 
 const myRequest = new Request("flowers.jpg");
 
-fetch(myRequest)
+window
+  .fetch(myRequest)
   .then((response) => {
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
@@ -260,47 +203,44 @@ fetch(myRequest)
   });
 ```
 
-[Fetch with init then Request の例](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-with-init-then-request/index.html)（[Fetch Request init のライブ版](https://mdn.github.io/dom-examples/fetch/fetch-with-init-then-request/)) では上記の内容に加えて、`fetch()` を呼び出すとき、初期化オブジェクト `init` を渡しています。
+[Fetch Request with init の例](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request-with-init)（[Fetch Request init のライブ版](https://mdn.github.io/dom-examples/fetch/fetch-request-with-init)）では上記の内容に加えて、`fetch()` を呼び出すとき、初期化オブジェクト `init` を渡しています。
+この場合、{{HTTPHeader("Cache-Control")}} 値を設定することで、どのようなキャッシュレスポンスであれば問題ないかを示すことができます。
 
 ```js
 const myImage = document.querySelector("img");
+const reqHeaders = new Headers();
 
-const myHeaders = new Headers();
-myHeaders.append("Accept", "image/jpeg");
+// キャッシュされたレスポンスは、それが 1 週間以上前のものでなければ問題ない
+reqHeaders.set("Cache-Control", "max-age=604800");
 
-const myInit = {
-  method: "GET",
-  headers: myHeaders,
-  mode: "cors",
-  cache: "default",
+const options = {
+  headers: reqHeaders,
 };
 
-const myRequest = new Request("flowers.jpg");
+// init をヘッダーと一緒に "options" オブジェクトとして渡す
+const req = new Request("flowers.jpg", options);
 
-fetch(myRequest, myInit).then((response) => {
-  // …
+fetch(req).then((response) => {
+  // ...
 });
 ```
 
 同様に `init` オブジェクトを `Request` コンストラクターに渡しても、同じ効果が得られます。
 
 ```js
-const myRequest = new Request("flowers.jpg", myInit);
+const req = new Request("flowers.jpg", options);
 ```
 
 `init` の `headers` でオブジェクトリテラルを使用することもできます。
 
 ```js
-const myInit = {
-  method: "GET",
+const options = {
   headers: {
-    Accept: "image/jpeg",
+    "Cache-Control": "max-age=60480",
   },
-  mode: "cors",
-  cache: "default",
 };
 
-const myRequest = new Request("flowers.jpg", myInit);
+const req = new Request("flowers.jpg", options);
 ```
 
 ## 仕様書
@@ -313,6 +253,7 @@ const myRequest = new Request("flowers.jpg", myInit);
 
 ## 関連情報
 
+- {{domxref("WorkerGlobalScope.fetch()")}}
 - [フェッチ API](/ja/docs/Web/API/Fetch_API)
 - [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
 - [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS)
diff --git a/files/ja/web/css/@media/index.md b/files/ja/web/css/@media/index.md
index a860fa26303e04..433c717bed5d0a 100644
--- a/files/ja/web/css/@media/index.md
+++ b/files/ja/web/css/@media/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media
 
 **`@media`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、1 つまたは複数の[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。
 
-> **メモ:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。
+> [!NOTE]
+> JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。
 
 {{EmbedInteractiveExample("pages/tabbed/at-rule-media.html", "tabbed-standard")}}
 
@@ -51,7 +52,8 @@ slug: Web/CSS/@media
 - `speech`
   - : 音声合成向けのものです。
 
-> **メモ:** CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。
+> [!NOTE]
+> CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。
 > `aural` タイプは `speech` に置き換えられましたが、これも同様です。
 
 ### メディア特性
@@ -145,7 +147,8 @@ _論理演算子_ `not`, `and`, `only` を使うと、複雑なメディアク
     カンマで区切られたクエリーのリストの中にある場合は、適用された特定のクエリーのみを反転します。
     `not` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。
 
-    > **メモ:** レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。
+    > [!NOTE]
+    > レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。
 
 - `only`
   - : クエリー全体が一致する場合にのみスタイルを適用します。
diff --git a/files/ja/web/css/@media/orientation/index.md b/files/ja/web/css/@media/orientation/index.md
index 6cd47abb9cb798..50861d3d1f0e4a 100644
--- a/files/ja/web/css/@media/orientation/index.md
+++ b/files/ja/web/css/@media/orientation/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/orientation
 
 **`orientation`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}} (または[ページ付きメディア](/ja/docs/Web/CSS/Paged_media)ではページボックス) の向きを調べるために使用することができます。
 
-> **メモ:** この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。
+> [!NOTE]
+> この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。
 
 ## 構文
 
diff --git a/files/ja/web/css/@media/prefers-reduced-data/index.md b/files/ja/web/css/@media/prefers-reduced-data/index.md
index 45e675a1f8a9ea..c5f92855d2ca72 100644
--- a/files/ja/web/css/@media/prefers-reduced-data/index.md
+++ b/files/ja/web/css/@media/prefers-reduced-data/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/@media/prefers-reduced-data
 
 {{CSSRef}}{{SeeCompatTable}}
 
-> **メモ:** この特性は、どのユーザーエージェントも対応しておらず、その仕様が変更される可能性があります。
+> [!NOTE]
+> この特性は、どのユーザーエージェントも対応しておらず、その仕様が変更される可能性があります。
 
 **`prefers-reduced-data`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#メディア特性)で、ユーザーがウェブコンテンツのインターネット通信を削減するようリクエストしていることを検出するために使用します。
 
@@ -22,7 +23,8 @@ slug: Web/CSS/@media/prefers-reduced-data
 
 ## 例
 
-> **メモ:** 現在、この特性を実装しているブラウザーはありませんので、以下の例は動作しません。
+> [!NOTE]
+> 現在、この特性を実装しているブラウザーはありませんので、以下の例は動作しません。
 
 この例では、 `montserrat-regular.woff2` フォントファイルは先読みもダウンロードもされません。もしユーザーがデータを削減従っているのであれば、この場合「[システムフォントスタック](https://css-tricks.com/snippets/css/system-font-stack/)」が予備フォントとして機能することになります。
 
diff --git a/files/ja/web/css/@media/prefers-reduced-motion/index.md b/files/ja/web/css/@media/prefers-reduced-motion/index.md
index 0287962ca95aff..f7d1f912ddae16 100644
--- a/files/ja/web/css/@media/prefers-reduced-motion/index.md
+++ b/files/ja/web/css/@media/prefers-reduced-motion/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/@media/prefers-reduced-motion
 
 **`prefers-reduced-motion`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。
 
-> **警告:** このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。
+> [!WARNING]
+> このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。
 
 ## 構文
 
diff --git a/files/ja/web/css/@namespace/index.md b/files/ja/web/css/@namespace/index.md
index 5ed087a9853ad4..8b0792a9db401f 100644
--- a/files/ja/web/css/@namespace/index.md
+++ b/files/ja/web/css/@namespace/index.md
@@ -34,7 +34,8 @@ slug: Web/CSS/@namespace
 
 [HTML5](/ja/docs/Glossary/HTML5) では、既知の[外来要素](https://html.spec.whatwg.org/#foreign-elements)へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に `xmlns` 属性が存在しなくても XHTML 名前空間 (`http://www.w3.org/1999/xhtml`) に含まれているかのように動作します。また [\<svg>](/ja/docs/Web/SVG/Element/svg) および [\<math>](/ja/docs/Web/MathML/Element/math) 要素は、適切な名前空間（`http://www.w3.org/2000/svg` および `http://www.w3.org/1998/Math/MathML`）が割り当てられます。
 
-> **メモ:** XML では、属性に直接接頭辞を定義しない限り（_例_: `xlink:href`）、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。
+> [!NOTE]
+> XML では、属性に直接接頭辞を定義しない限り（_例_: `xlink:href`）、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。
 
 ## 形式文法
 
diff --git a/files/ja/web/css/@page/index.md b/files/ja/web/css/@page/index.md
index 3668587dfa49c5..286ac09ede4a2c 100644
--- a/files/ja/web/css/@page/index.md
+++ b/files/ja/web/css/@page/index.md
@@ -30,7 +30,8 @@ slug: Web/CSS/@page
 
 `@page` アットルールには、 CSS オブジェクトモデルインターフェイスの {{domxref("CSSPageRule")}} からアクセスできます。
 
-> **メモ:** W3C は、ビューポートに関する {{cssxref("&lt;length&gt;")}} の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。
+> [!NOTE]
+> W3C は、ビューポートに関する {{cssxref("&lt;length&gt;")}} の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。
 
 ## 形式文法
 
diff --git a/files/ja/web/css/@scope/index.md b/files/ja/web/css/@scope/index.md
index 11d04952f53569..b72fbdac03fa2a 100644
--- a/files/ja/web/css/@scope/index.md
+++ b/files/ja/web/css/@scope/index.md
@@ -78,7 +78,8 @@ body
 
 スコープルートセレクターである `.article-body` は、ルールセットが適用される DOM ツリーのスコープの上限を定義し、スコープリミットセレクターである `figure` は下限を定義します。その結果、クラスが `article-body` である `<section>` の中にある {{htmlelement("img")}} 要素のみが選択され、{{htmlelement("figure")}} 要素の中は選択されません。
 
-> **メモ:** このような上限と下限のあるスコープは、一般に**ドーナツスコープ**と呼ばれています。
+> [!NOTE]
+> このような上限と下限のあるスコープは、一般に**ドーナツスコープ**と呼ばれています。
 
 `article-body` クラスを持つ `<section>` 内の画像をすべて選択したい場合は、スコープリミットセレクターを省略できます。
 
@@ -108,7 +109,8 @@ body
 </section>
 ```
 
-> **メモ:** 重要なことは、 `@scope` はセレクターのアプリケーションを固有の DOM サブツリーに分離することはできますが、適用されるスタイルをサブツリー内に完全に分離することはできないということです。（例えば {{cssxref("color")}} や {{cssxref("font-family")}} のように）子から継承されるプロパティは、設定するスコープのを超えて継承されます。
+> [!NOTE]
+> 重要なことは、 `@scope` はセレクターのアプリケーションを固有の DOM サブツリーに分離することはできますが、適用されるスタイルをサブツリー内に完全に分離することはできないということです。（例えば {{cssxref("color")}} や {{cssxref("font-family")}} のように）子から継承されるプロパティは、設定するスコープのを超えて継承されます。
 
 ### `:scope` 擬似クラス
 
@@ -275,7 +277,8 @@ body
 
 これで一番内側の段落は正しく黒く色づけされました。これは、 `.light-theme` のスコープルートからは DOM ツリーの階層が1階層しか離れておらず、 `.dark-theme` のスコープルートからは 2 階層しか離れていないためです。したがって、 light スタイルが勝ちます。
 
-> **メモ:** スコープの近さはソースの順序を上書きしますが、[重要度](/ja/docs/Web/CSS/important)、[レイヤー](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)、[詳細度](/ja/docs/Web/CSS/Specificity)のような他にも優先度の高い仕様によって上書きされます。
+> [!NOTE]
+> スコープの近さはソースの順序を上書きしますが、[重要度](/ja/docs/Web/CSS/important)、[レイヤー](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)、[詳細度](/ja/docs/Web/CSS/Specificity)のような他にも優先度の高い仕様によって上書きされます。
 
 ## 形式文法
 
diff --git a/files/ja/web/css/@starting-style/index.md b/files/ja/web/css/@starting-style/index.md
index de5e1aefe249be..ad23216cfedada 100644
--- a/files/ja/web/css/@starting-style/index.md
+++ b/files/ja/web/css/@starting-style/index.md
@@ -291,7 +291,8 @@ html {
 - `display` をトランジション後の要素のリストに追加することで、アニメーションする要素が出現・消滅の両方のアニメーション中に確実に表示される（`display: block` などの `display` の可視値に設定する）ようにします。これがなければ、消滅アニメーションは表示されません。その結果、ポップオーバーはただ消えてしまいます。アニメーションを有効にするために、 [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) 値も一括指定で設定されていることに注意してください。
 - [`overlay`](/ja/docs/Web/CSS/overlay) をトランジション後の要素のリストに追加して、要素を最上位レイヤーから除去するのをアニメーションが終わるまで確実に延期するようにします。これは、このような単純なアニメーションでは大差ありませんが、より複雑なケースでは、これを行わないと、要素がオーバーレイからすばやく除去され、アニメーションが滑らかでなくなったり、効果的でなくなったりすることがあります。この場合も、アニメーションを行うには `transition-behavior: allow-discrete` が必要です。
 
-> **メモ:** また、開いたときにポップオーバーの背後に現れる [`::backdrop`](/ja/docs/Web/CSS/::backdrop) のトランジションも記載し、暗転するアニメーションも提供しています。 `[popover]:popover-open::backdrop` はポップオーバーが開くための背景を選択するために使用します。
+> [!NOTE]
+> また、開いたときにポップオーバーの背後に現れる [`::backdrop`](/ja/docs/Web/CSS/::backdrop) のトランジションも記載し、暗転するアニメーションも提供しています。 `[popover]:popover-open::backdrop` はポップオーバーが開くための背景を選択するために使用します。
 
 #### 結果
 
@@ -299,7 +300,8 @@ html {
 
 {{ EmbedLiveSample("Animating a popover", "100%", "200") }}
 
-> **メモ:** ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、表示トランジションが発生するたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。
+> [!NOTE]
+> ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、表示トランジションが発生するたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。
 
 > **メモ:** {{htmlelement("dialog")}} 要素とその背景の表示・非表示を遷移させる例は、 `<dialog>` リファレンスページの[ダイアログ要素の遷移](/ja/docs/Web/HTML/Element/dialog#transitioning_dialog_elements)で探すことができます。
 
diff --git a/files/ja/web/css/_colon_-moz-broken/index.md b/files/ja/web/css/_colon_-moz-broken/index.md
index 04a707769d5205..13d98d17826d43 100644
--- a/files/ja/web/css/_colon_-moz-broken/index.md
+++ b/files/ja/web/css/_colon_-moz-broken/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-broken
 
 **`:-moz-broken`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions) であり、壊れた画像リンクを表している要素に一致します。
 
-> **メモ:** このセレクターは、主にテーマ開発者が使用することを意図しているものです。
+> [!NOTE]
+> このセレクターは、主にテーマ開発者が使用することを意図しているものです。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_-moz-first-node/index.md b/files/ja/web/css/_colon_-moz-first-node/index.md
index 378c9cf608043e..6c984cc050e99d 100644
--- a/files/ja/web/css/_colon_-moz-first-node/index.md
+++ b/files/ja/web/css/_colon_-moz-first-node/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-first-node
 
 **`:-moz-first-node`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、他の要素の最初の子要素であるあらゆる要素を表します。 {{Cssxref(":first-child")}} とは異なり、最初の子要素の前に（ホワイトスペース以外の）テキストがあると一致しません。
 
-> **メモ:** 要素の先頭にあるホワイトスペースは `:-moz-first-node` の決定において無視されます。
+> [!NOTE]
+> 要素の先頭にあるホワイトスペースは `:-moz-first-node` の決定において無視されます。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_-moz-last-node/index.md b/files/ja/web/css/_colon_-moz-last-node/index.md
index 7ed22639c3ba9c..f14f43bff046f8 100644
--- a/files/ja/web/css/_colon_-moz-last-node/index.md
+++ b/files/ja/web/css/_colon_-moz-last-node/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-last-node
 
 **`:-moz-last-node`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、他の要素の最後の子要素であるあらゆる要素を表します。 {{Cssxref(":last-child")}} とは異なり、最後の子要素の後に（ホワイトスペース以外の）テキストがあると一致しません。
 
-> **メモ:** 要素の末尾にあるホワイトスペースは `:-moz-last-node` の決定において無視されます。
+> [!NOTE]
+> 要素の末尾にあるホワイトスペースは `:-moz-last-node` の決定において無視されます。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_-moz-loading/index.md b/files/ja/web/css/_colon_-moz-loading/index.md
index 3daa5302709f0e..ea38811efbd477 100644
--- a/files/ja/web/css/_colon_-moz-loading/index.md
+++ b/files/ja/web/css/_colon_-moz-loading/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-loading
 
 **`:-moz-loading`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、読み込みが開始されていないために表示できない要素、例えばまだ到着が開始されていない画像などに一致します。なお、読み込み*中*の画像は、この擬似クラスには一致*しません*。
 
-> **メモ:** このセレクターは主にテーマ開発者が使用するためのものです。
+> [!NOTE]
+> このセレクターは主にテーマ開発者が使用するためのものです。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md b/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md
index 68127a6e14d339..30c6eaa7787dca 100644
--- a/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md
+++ b/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md
@@ -7,9 +7,11 @@ slug: Web/CSS/:-moz-locale-dir_ltr
 
 **`:-moz-locale-dir(ltr)`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、ユーザーインターフェイスが左から右へ向けて表示される要素に一致します。これは設定の `intl.uidirection.locale` （_`locale`_ は現在のロケール）が "ltr" に設定されていることで特定されます。
 
-> **メモ:** 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。
+> [!NOTE]
+> 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。
 
-> **警告:** このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。
+> [!WARNING]
+> このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md b/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md
index 4a272a60fe6a2e..fda39b941fa54e 100644
--- a/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md
+++ b/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md
@@ -7,9 +7,11 @@ slug: Web/CSS/:-moz-locale-dir_rtl
 
 **`:-moz-locale-dir(rtl)`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の `intl.uidirection.locale` （`locale` は現在のロケール）が "rtl" に設定されていることで特定されます。
 
-> **メモ:** 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。
+> [!NOTE]
+> 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。
 
-> **警告:** このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致しません。
+> [!WARNING]
+> このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致しません。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_active/index.md b/files/ja/web/css/_colon_active/index.md
index c4a87997facffc..4244ceb9808fd8 100644
--- a/files/ja/web/css/_colon_active/index.md
+++ b/files/ja/web/css/_colon_active/index.md
@@ -15,7 +15,8 @@ l10n:
 
 `:active` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス （{{cssxref(":link")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるように、他のすべてのリンク関連ルールの後に `:active` ルールを置いてください。
 
-> **メモ:** 複数ボタンのマウスを使うシステムでは、 CSS 3 は `:active` 擬似クラスは主ボタン、つまり右手用のマウスではふつう最も左のボタンにのみ適用しなければならないと定義しています。
+> [!NOTE]
+> 複数ボタンのマウスを使うシステムでは、 CSS 3 は `:active` 擬似クラスは主ボタン、つまり右手用のマウスではふつう最も左のボタンにのみ適用しなければならないと定義しています。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_autofill/index.md b/files/ja/web/css/_colon_autofill/index.md
index 552b7e2e0684ad..5dc91519e34249 100644
--- a/files/ja/web/css/_colon_autofill/index.md
+++ b/files/ja/web/css/_colon_autofill/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:autofill
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-autofill.html", "tabbed-shorter")}}
 
-> **メモ:** 多くのブラウザーのユーザーエージェントスタイルシートでは、 `:-webkit-autofill` スタイル定義に `!important` を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。
+> [!NOTE]
+> 多くのブラウザーのユーザーエージェントスタイルシートでは、 `:-webkit-autofill` スタイル定義に `!important` を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。
 >
 > ```css
 > background-color: rgb(232, 240, 254) !important;
diff --git a/files/ja/web/css/_colon_blank/index.md b/files/ja/web/css/_colon_blank/index.md
index 40bf7c485f4ce1..00ffbb11e4acac 100644
--- a/files/ja/web/css/_colon_blank/index.md
+++ b/files/ja/web/css/_colon_blank/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/:blank
 
 {{CSSRef}}{{SeeCompatTable}}
 
-> **メモ:** セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。
+> [!NOTE]
+> セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。
 >
 > [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967) を参照してください。
 
diff --git a/files/ja/web/css/_colon_checked/index.md b/files/ja/web/css/_colon_checked/index.md
index db3cd049d7216c..dd4acf1cf7029d 100644
--- a/files/ja/web/css/_colon_checked/index.md
+++ b/files/ja/web/css/_colon_checked/index.md
@@ -19,7 +19,8 @@ slug: Web/CSS/:checked
 
 ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。
 
-> **メモ:** ブラウザーは `<option>` を[置換要素](/ja/docs/Web/CSS/Replaced_element)として扱うことが多いので、 `:checked` 擬似クラスでスタイルが適用される部分の大きさはブラウザーによって異なります。
+> [!NOTE]
+> ブラウザーは `<option>` を[置換要素](/ja/docs/Web/CSS/Replaced_element)として扱うことが多いので、 `:checked` 擬似クラスでスタイルが適用される部分の大きさはブラウザーによって異なります。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_dir/index.md b/files/ja/web/css/_colon_dir/index.md
index 6cfcc855982f0b..5c8c3b8bf03eb2 100644
--- a/files/ja/web/css/_colon_dir/index.md
+++ b/files/ja/web/css/_colon_dir/index.md
@@ -18,7 +18,8 @@ slug: Web/CSS/:dir
 
 > **メモ:** `:dir()` 擬似クラスは `[dir=…]` [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)と等価ではないことに注意してください。後者は HTML の [`dir`](/ja/docs/Web/HTML/Global_attributes#dir) 属性を選択しますが、これがない要素は、書字方向が親から継承されていても無視します。（同様に、 `[dir=rtl]` と `[dir=ltr]` は `auto` の値に一致しません。）それに対して、 `:dir()` は継承された場合も含め、{{glossary("user agent", "ユーザーエージェント")}}が計算した値で選択します。
 
-> **メモ:** HTML では、書字方向は [`dir`](/ja/docs/Web/HTML/Global_attributes#dir) 属性で指定されます。他の文書型では異なる方法があるかもしれません。
+> [!NOTE]
+> HTML では、書字方向は [`dir`](/ja/docs/Web/HTML/Global_attributes#dir) 属性で指定されます。他の文書型では異なる方法があるかもしれません。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_first-child/index.md b/files/ja/web/css/_colon_first-child/index.md
index 113590f9901560..c3a15271e6c1c1 100644
--- a/files/ja/web/css/_colon_first-child/index.md
+++ b/files/ja/web/css/_colon_first-child/index.md
@@ -17,7 +17,8 @@ p:first-child {
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-first-child.html", "tabbed-shorter")}}
 
-> **メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
+> [!NOTE]
+> 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_first/index.md b/files/ja/web/css/_colon_first/index.md
index 3fe1a37b69ddce..a5907da19435e0 100644
--- a/files/ja/web/css/_colon_first/index.md
+++ b/files/ja/web/css/_colon_first/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/:first
 }
 ```
 
-> **メモ:** この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、{{cssxref("widows")}}、ページ区切りのみです。さらに、マージンを定義するときには[絶対的な長さ](/ja/docs/Web/CSS/length#absolute_length_units)の単位のみしか使用できません。他のすべてのプロパティは無視されます。
+> [!NOTE]
+> この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、{{cssxref("widows")}}、ページ区切りのみです。さらに、マージンを定義するときには[絶対的な長さ](/ja/docs/Web/CSS/length#absolute_length_units)の単位のみしか使用できません。他のすべてのプロパティは無視されます。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_focus/index.md b/files/ja/web/css/_colon_focus/index.md
index 09483998ce8e76..20b55f334f8c1a 100644
--- a/files/ja/web/css/_colon_focus/index.md
+++ b/files/ja/web/css/_colon_focus/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-focus.html", "tabbed-shorter")}}
 
-> **メモ:** この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を*含む*要素を選択したい場合は、{{CSSxRef(":focus-within")}} を使用してください。
+> [!NOTE]
+> この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を*含む*要素を選択したい場合は、{{CSSxRef(":focus-within")}} を使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_host-context/index.md b/files/ja/web/css/_colon_host-context/index.md
index 69412b49a8ac3a..74e0cf891555e4 100644
--- a/files/ja/web/css/_colon_host-context/index.md
+++ b/files/ja/web/css/_colon_host-context/index.md
@@ -13,7 +13,8 @@ l10n:
 
 この典型的な使用例として、例えば `h1` のような子孫セレクター式を使用して、 `<h1>` の中にあるカスタム要素のインスタンスのみを選択することができます。例えば、 `<body>` に `.dark-theme` クラスが適用されたときに異なる文字色を適用するような場合です。
 
-> **メモ:** これは、シャドウ DOM の外で使用しても効果はありません。
+> [!NOTE]
+> これは、シャドウ DOM の外で使用しても効果はありません。
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-host-context.html", "tabbed-shorter")}}
 
diff --git a/files/ja/web/css/_colon_host/index.md b/files/ja/web/css/_colon_host/index.md
index 47f43f13ed2783..e13ad0d7859bcf 100644
--- a/files/ja/web/css/_colon_host/index.md
+++ b/files/ja/web/css/_colon_host/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`:host`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、その CSS を含む[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。
 
-> **メモ:** これはシャドウ DOM の外で使われたときには効果がありません。
+> [!NOTE]
+> これはシャドウ DOM の外で使われたときには効果がありません。
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-host.html", "tabbed-shorter")}}
 
diff --git a/files/ja/web/css/_colon_host_function/index.md b/files/ja/web/css/_colon_host_function/index.md
index d903a794079402..a8f84cd7da0f2f 100644
--- a/files/ja/web/css/_colon_host_function/index.md
+++ b/files/ja/web/css/_colon_host_function/index.md
@@ -11,7 +11,8 @@ l10n:
 
 この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは {{CSSxRef(":host-context", ":host-context()")}} の仕事です。
 
-> **メモ:** 他にも、 {{CSSxRef(":is", ":is()")}} や {{CSSxRef(":not", ":not()")}} のような関数型擬似クラスは、引数として複合セレクターのリストを受け入れますが、 `:host()` は単一の複合セレクターを受け入れます。さらに、 `:is()` と `:not()` が引数の詳細度しか考慮しないのに対して、 `:host()` の詳細度は擬似クラスの詳細度**および**引数の詳細度の両方です。
+> [!NOTE]
+> 他にも、 {{CSSxRef(":is", ":is()")}} や {{CSSxRef(":not", ":not()")}} のような関数型擬似クラスは、引数として複合セレクターのリストを受け入れますが、 `:host()` は単一の複合セレクターを受け入れます。さらに、 `:is()` と `:not()` が引数の詳細度しか考慮しないのに対して、 `:host()` の詳細度は擬似クラスの詳細度**および**引数の詳細度の両方です。
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-host_function.html", "tabbed-shorter")}}
 
diff --git a/files/ja/web/css/_colon_in-range/index.md b/files/ja/web/css/_colon_in-range/index.md
index a3de7711e7721b..9fd6eb88d3da0e 100644
--- a/files/ja/web/css/_colon_in-range/index.md
+++ b/files/ja/web/css/_colon_in-range/index.md
@@ -19,7 +19,8 @@ input:in-range {
 
 この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。
 
-> **メモ:** この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
+> [!NOTE]
+> この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
 
 ## 構文
 
@@ -85,7 +86,8 @@ input:out-of-range + label::after {
 
 {{EmbedLiveSample('Examples', 600, 140)}}
 
-> **メモ:** 空の `<input>` は範囲外としてカウントされず、 `:out-of-range` 擬似クラスセレクターで選択されることはありません。空の入力を選択するための [`:blank`](/ja/docs/Web/CSS/:blank) 擬似クラスがありますが、この記事を書いている時点では、実験的で対応が十分ではありません。また、 `required` 属性と [`:invalid`](/ja/docs/Web/CSS/:invalid) 擬似クラスを使用すると、入力を必須にするためのより一般的なロジックとスタイルを提供できます (`:invalid` は空白*および*範囲外の入力のスタイルを指定します)。
+> [!NOTE]
+> 空の `<input>` は範囲外としてカウントされず、 `:out-of-range` 擬似クラスセレクターで選択されることはありません。空の入力を選択するための [`:blank`](/ja/docs/Web/CSS/:blank) 擬似クラスがありますが、この記事を書いている時点では、実験的で対応が十分ではありません。また、 `required` 属性と [`:invalid`](/ja/docs/Web/CSS/:invalid) 擬似クラスを使用すると、入力を必須にするためのより一般的なロジックとスタイルを提供できます (`:invalid` は空白*および*範囲外の入力のスタイルを指定します)。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/_colon_is/index.md b/files/ja/web/css/_colon_is/index.md
index 97f21a68999990..3b6fa67857e7bb 100644
--- a/files/ja/web/css/_colon_is/index.md
+++ b/files/ja/web/css/_colon_is/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`:is()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。
 
-> **メモ:** 元々は `:matches()` （と `:any()`）という名前でしたが、[CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258) で `:is()` に改名されました。
+> [!NOTE]
+> 元々は `:matches()` （と `:any()`）という名前でしたが、[CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258) で `:is()` に改名されました。
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}}
 
diff --git a/files/ja/web/css/_colon_lang/index.md b/files/ja/web/css/_colon_lang/index.md
index 96e05ce3493fb2..d160b28d282a71 100644
--- a/files/ja/web/css/_colon_lang/index.md
+++ b/files/ja/web/css/_colon_lang/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-function-lang.html", "tabbed-shorter")}}
 
-> **メモ:** HTML では、言語は [`lang`](/ja/docs/Web/HTML/Global_attributes#lang) 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。
+> [!NOTE]
+> HTML では、言語は [`lang`](/ja/docs/Web/HTML/Global_attributes#lang) 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_last-child/index.md b/files/ja/web/css/_colon_last-child/index.md
index a1ef38b2971e52..2a49393e3f0627 100644
--- a/files/ja/web/css/_colon_last-child/index.md
+++ b/files/ja/web/css/_colon_last-child/index.md
@@ -17,7 +17,8 @@ p:last-child {
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-last-child.html", "tabbed-shorter")}}
 
-> **メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
+> [!NOTE]
+> 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_left/index.md b/files/ja/web/css/_colon_left/index.md
index f2e401c614b435..1cc5b51c94984e 100644
--- a/files/ja/web/css/_colon_left/index.md
+++ b/files/ja/web/css/_colon_left/index.md
@@ -16,7 +16,8 @@ slug: Web/CSS/:left
 
 そのページが左側か右側かは、文書の主な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば `:left` ページになります。
 
-> **メモ:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。
+> [!NOTE]
+> この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_link/index.md b/files/ja/web/css/_colon_link/index.md
index ef07400806a499..2ff43a91d67e51 100644
--- a/files/ja/web/css/_colon_link/index.md
+++ b/files/ja/web/css/_colon_link/index.md
@@ -13,7 +13,8 @@ l10n:
 
 `:link` および [`:visited`](/ja/docs/Web/CSS/:visited) 擬似クラスによって定義されたスタイルは、以降のユーザー操作の擬似クラス（{{cssxref(":hover")}} または {{cssxref(":active")}}）によって上書きされる可能性があります。適切にリンクにスタイルを適用するには、 `:link` ルールを他のすべてのリンク関連ルールの前に置き、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。
 
-> **メモ:** 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。
+> [!NOTE]
+> 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_nth-last-child/index.md b/files/ja/web/css/_colon_nth-last-child/index.md
index de847f0c5c6124..d38fc65fb39726 100644
--- a/files/ja/web/css/_colon_nth-last-child/index.md
+++ b/files/ja/web/css/_colon_nth-last-child/index.md
@@ -17,7 +17,8 @@ slug: Web/CSS/:nth-last-child
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-last-child.html", "tabbed-shorter")}}
 
-> **メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。
+> [!NOTE]
+> この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_nth-last-of-type/index.md b/files/ja/web/css/_colon_nth-last-of-type/index.md
index e5814f1dcfb223..7723d4a3a4ea11 100644
--- a/files/ja/web/css/_colon_nth-last-of-type/index.md
+++ b/files/ja/web/css/_colon_nth-last-of-type/index.md
@@ -17,7 +17,8 @@ p:nth-last-of-type(4n) {
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-last-of-type.html", "tabbed-shorter")}}
 
-> **メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。
+> [!NOTE]
+> この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_nth-of-type/index.md b/files/ja/web/css/_colon_nth-of-type/index.md
index 685d2f9a407ff1..523406a49ed2b6 100644
--- a/files/ja/web/css/_colon_nth-of-type/index.md
+++ b/files/ja/web/css/_colon_nth-of-type/index.md
@@ -73,7 +73,8 @@ p.fancy:nth-of-type(2n + 1) {
 
 {{EmbedLiveSample('Basic_example', 250, 250)}}
 
-> **メモ:** このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。
+> [!NOTE]
+> このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/_colon_only-child/index.md b/files/ja/web/css/_colon_only-child/index.md
index 99f8d92c782e0f..e455c6d5feeb5f 100644
--- a/files/ja/web/css/_colon_only-child/index.md
+++ b/files/ja/web/css/_colon_only-child/index.md
@@ -16,7 +16,8 @@ p:only-child {
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-child.html", "tabbed-shorter")}}
 
-> **メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
+> [!NOTE]
+> 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_only-of-type/index.md b/files/ja/web/css/_colon_only-of-type/index.md
index ab22025a780708..3e193a1710cc54 100644
--- a/files/ja/web/css/_colon_only-of-type/index.md
+++ b/files/ja/web/css/_colon_only-of-type/index.md
@@ -16,7 +16,8 @@ p:only-of-type {
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-of-type.html", "tabbed-shorter")}}
 
-> **メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
+> [!NOTE]
+> 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_out-of-range/index.md b/files/ja/web/css/_colon_out-of-range/index.md
index 9782e352eae914..8ca1df9490d1e1 100644
--- a/files/ja/web/css/_colon_out-of-range/index.md
+++ b/files/ja/web/css/_colon_out-of-range/index.md
@@ -19,7 +19,8 @@ input:out-of-range {
 
 この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。
 
-> **メモ:** この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
+> [!NOTE]
+> この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_right/index.md b/files/ja/web/css/_colon_right/index.md
index 54d5090e7254e1..0a28d67ee33fdf 100644
--- a/files/ja/web/css/_colon_right/index.md
+++ b/files/ja/web/css/_colon_right/index.md
@@ -16,7 +16,8 @@ slug: Web/CSS/:right
 
 そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。
 
-> **メモ:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。
+> [!NOTE]
+> この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_user-invalid/index.md b/files/ja/web/css/_colon_user-invalid/index.md
index 45921f0f8dc90f..da7c62cc492ac6 100644
--- a/files/ja/web/css/_colon_user-invalid/index.md
+++ b/files/ja/web/css/_colon_user-invalid/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:user-invalid
 
 `:user-invalid` 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 {{CSSxRef(":invalid")}}, {{CSSxRef(":out-of-range")}}, {{CSSxRef(":required")}} で空欄の要素に一致します。
 
-> **メモ:** この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。
+> [!NOTE]
+> この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_user-valid/index.md b/files/ja/web/css/_colon_user-valid/index.md
index 310e0fba1ba0c4..961328c50dc1ff 100644
--- a/files/ja/web/css/_colon_user-valid/index.md
+++ b/files/ja/web/css/_colon_user-valid/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:user-valid
 
 **`:user-valid`** は CSS の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、[制約検証](/ja/docs/Learn/Forms#constraint_validation)に基づき値の検証が正しく行われた有効なフォーム要素を表します。ただし、 {{cssxref(":valid")}} とは異なり、ユーザーが操作した後にのみ一致します。
 
-> **メモ:** この擬似クラスは標準外の `:-moz-ui-valid` 擬似クラスと同じように動作します。
+> [!NOTE]
+> この擬似クラスは標準外の `:-moz-ui-valid` 擬似クラスと同じように動作します。
 
 この擬似クラスは、以下の基準に則って適用されます。
 
diff --git a/files/ja/web/css/_colon_valid/index.md b/files/ja/web/css/_colon_valid/index.md
index 6de61c93ab791d..d0ccd777a19584 100644
--- a/files/ja/web/css/_colon_valid/index.md
+++ b/files/ja/web/css/_colon_valid/index.md
@@ -68,7 +68,8 @@ input:valid + span::before {
 
 生成されたコンテンツを相対的に配置できるように `<span>` を `position: relative` に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。
 
-> **メモ:** これらのラベルを追加するために `::before` を使ったのは、すでに `::after` を "required" ラベルに使っていたからです。
+> [!NOTE]
+> これらのラベルを追加するために `::before` を使ったのは、すでに `::after` を "required" ラベルに使っていたからです。
 
 以下で試してみることができます。
 
diff --git a/files/ja/web/css/_colon_visited/index.md b/files/ja/web/css/_colon_visited/index.md
index c432b354d8f5b6..062f04c63ef75f 100644
--- a/files/ja/web/css/_colon_visited/index.md
+++ b/files/ja/web/css/_colon_visited/index.md
@@ -23,7 +23,8 @@ l10n:
 - これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 {{domxref("window.getComputedStyle")}} メソッドは嘘をつき、 `:visited` 状態ではない色の値を返します。
 - [`<link>`](/ja/docs/Web/HTML/Element/link) 要素は `:visited` に一致することはありません。
 
-> **メモ:** これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector)を参照してください。
+> [!NOTE]
+> これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector)を参照してください。
 
 ## 構文
 
diff --git a/files/ja/web/css/_colon_where/index.md b/files/ja/web/css/_colon_where/index.md
index 426c2ca37934dd..280c7d266011ed 100644
--- a/files/ja/web/css/_colon_where/index.md
+++ b/files/ja/web/css/_colon_where/index.md
@@ -129,7 +129,8 @@ footer a {
 
 しかし、 `:where()` 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされます。
 
-> **メモ:** この例は GitHub からも見ることができます。 [is-where](https://mdn.github.io/css-examples/is-where/) を参照してください。
+> [!NOTE]
+> この例は GitHub からも見ることができます。 [is-where](https://mdn.github.io/css-examples/is-where/) を参照してください。
 
 {{EmbedLiveSample('Examples', '100%', 600)}}
 
diff --git a/files/ja/web/css/_doublecolon_after/index.md b/files/ja/web/css/_doublecolon_after/index.md
index 2f521bd8f63e7c..95149d05b37a42 100644
--- a/files/ja/web/css/_doublecolon_after/index.md
+++ b/files/ja/web/css/_doublecolon_after/index.md
@@ -22,7 +22,8 @@ a::after {
 
 {{CSSSyntax}}
 
-> **メモ:** CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。
+> [!NOTE]
+> CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。
 
 ## 例
 
diff --git a/files/ja/web/css/_doublecolon_before/index.md b/files/ja/web/css/_doublecolon_before/index.md
index 07a528cf75802f..8c47344400a0fa 100644
--- a/files/ja/web/css/_doublecolon_before/index.md
+++ b/files/ja/web/css/_doublecolon_before/index.md
@@ -22,7 +22,8 @@ a::before {
 
 {{CSSSyntax}}
 
-> **メモ:** CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::before` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:before` も使用できます。
+> [!NOTE]
+> CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::before` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:before` も使用できます。
 
 ## 例
 
diff --git a/files/ja/web/css/_doublecolon_first-letter/index.md b/files/ja/web/css/_doublecolon_first-letter/index.md
index 8300708162c54f..f277b7f4e17bf7 100644
--- a/files/ja/web/css/_doublecolon_first-letter/index.md
+++ b/files/ja/web/css/_doublecolon_first-letter/index.md
@@ -17,7 +17,8 @@ l10n:
 - 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の `IJ` などです。この場合、連字の両方の文字が `::first-letter` 擬似要素で選択されます。
 - {{ cssxref("::before") }} 擬似要素と {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 `::first-letter` は生成されたこのコンテンツの最初の文字に一致します。
 
-> **メモ:** CSS では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。
+> [!NOTE]
+> CSS では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。
 >
 > オランダ語の `IJ` のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。
 
diff --git a/files/ja/web/css/_doublecolon_first-line/index.md b/files/ja/web/css/_doublecolon_first-line/index.md
index 382aea81dc11ed..7e05f1a7797563 100644
--- a/files/ja/web/css/_doublecolon_first-line/index.md
+++ b/files/ja/web/css/_doublecolon_first-line/index.md
@@ -16,7 +16,8 @@ p::first-line {
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-element-first-line.html", "tabbed-shorter")}}
 
-> **メモ:** CSS3 では `::first-line` という (二重コロン付き) 表記が、[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された `:first-line` も使用できます。
+> [!NOTE]
+> CSS3 では `::first-line` という (二重コロン付き) 表記が、[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された `:first-line` も使用できます。
 
 ## 利用可能なプロパティ
 
diff --git a/files/ja/web/css/_doublecolon_marker/index.md b/files/ja/web/css/_doublecolon_marker/index.md
index e0e9576f7bb8c4..1f6986322dd28b 100644
--- a/files/ja/web/css/_doublecolon_marker/index.md
+++ b/files/ja/web/css/_doublecolon_marker/index.md
@@ -22,7 +22,8 @@ l10n:
 - {{CSSxRef("content")}} プロパティ
 - すべての[アニメーション](/ja/docs/Web/CSS/CSS_animations#プロパティ)および[トランジション](/ja/docs/Web/CSS/CSS_transitions#プロパティ)プロパティ
 
-> **メモ:** 仕様書では、将来的にさらなる CSS プロパティに対応する可能性があるとしています。
+> [!NOTE]
+> 仕様書では、将来的にさらなる CSS プロパティに対応する可能性があるとしています。
 
 ## 構文
 
diff --git a/files/ja/web/css/_doublecolon_placeholder/index.md b/files/ja/web/css/_doublecolon_placeholder/index.md
index 0f4c5b56cbefae..3938c8da188596 100644
--- a/files/ja/web/css/_doublecolon_placeholder/index.md
+++ b/files/ja/web/css/_doublecolon_placeholder/index.md
@@ -13,7 +13,8 @@ l10n:
 
 セレクターに `::placeholder` を使ったルールを使用できるのは、 {{cssxref("::first-line")}} 擬似要素が適用できる CSS プロパティだけです。
 
-> **メモ:** 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。
+> [!NOTE]
+> 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。
 
 ## 構文
 
diff --git a/files/ja/web/css/_doublecolon_view-transition-group/index.md b/files/ja/web/css/_doublecolon_view-transition-group/index.md
index 6bcee7bdfceacf..3145a0484b3e03 100644
--- a/files/ja/web/css/_doublecolon_view-transition-group/index.md
+++ b/files/ja/web/css/_doublecolon_view-transition-group/index.md
@@ -28,7 +28,8 @@ html::view-transition-group(*) {
 
 「古い」ビュー状態と「新しい」ビュー状態の両方がある場合、ビュートランジションスタイルシートのスタイルは、この擬似要素の {{cssxref("width")}} と {{cssxref("height")}} を「古い」ビュー状態の境界ボックスのサイズから「新しい」ビュー状態の境界ボックスのサイズにアニメーションさせます。
 
-> **メモ:** ビュートランジションスタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書の[トランジション擬似要素の設定](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)および[擬似要素スタイルの更新](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)の節を参照してください。
+> [!NOTE]
+> ビュートランジションスタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書の[トランジション擬似要素の設定](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)および[擬似要素スタイルの更新](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)の節を参照してください。
 
 さらに、要素の変換は、「古い」ビュー状態の画面空間変換から新しいビュー状態の画面空間変換へアニメーションします。アニメーションしているプロパティの値はトランジションを始める時点に決定されるため、このスタイル設定は動的に生成されます。
 
diff --git a/files/ja/web/css/animation-composition/index.md b/files/ja/web/css/animation-composition/index.md
index 080bb7101d6c42..856c2942e87edc 100644
--- a/files/ja/web/css/animation-composition/index.md
+++ b/files/ja/web/css/animation-composition/index.md
@@ -30,7 +30,8 @@ animation-composition: revert-layer;
 animation-composition: unset;
 ```
 
-> **メモ:** 複数の値をカンマ区切りで `animation-*` プロパティに指定すると、{{cssxref("animation-name")}}が出現した順にアニメーションに適用されます。アニメーションと合成の数が異なる場合、`animation-composition` プロパティに列挙されている値は、最初の `animation-name` から最後の `animation-name` まで循環し、すべてのアニメーションに `animation-composition` 値が割り当てるまで繰り返されます。より詳しい情報は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定)を参照してください。
+> [!NOTE]
+> 複数の値をカンマ区切りで `animation-*` プロパティに指定すると、{{cssxref("animation-name")}}が出現した順にアニメーションに適用されます。アニメーションと合成の数が異なる場合、`animation-composition` プロパティに列挙されている値は、最初の `animation-name` から最後の `animation-name` まで循環し、すべてのアニメーションに `animation-composition` 値が割り当てるまで繰り返されます。より詳しい情報は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定)を参照してください。
 
 ### 値
 
@@ -70,7 +71,8 @@ animation-composition: unset;
 - `add` を指定すると、 `0%` のキーフレームの合成効果値は `blur(5px) blur(10px)` になります。
 - `accumulate` を指定すると、 `0%` のキーフレームの合成効果値は `blur(15px)` になります。
 
-> **メモ:** 合成演算は、キーフレーム内で指定することもできます。その場合、指定した合成演算は、まずそのキーフレーム内の各プロパティに対して使用され、次に次のキーフレーム内の各プロパティに対して使用されます。
+> [!NOTE]
+> 合成演算は、キーフレーム内で指定することもできます。その場合、指定した合成演算は、まずそのキーフレーム内の各プロパティに対して使用され、次に次のキーフレーム内の各プロパティに対して使用されます。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/animation-duration/index.md b/files/ja/web/css/animation-duration/index.md
index ca5a15f9b8162f..f5a7f590b18d80 100644
--- a/files/ja/web/css/animation-duration/index.md
+++ b/files/ja/web/css/animation-duration/index.md
@@ -49,7 +49,8 @@ animation-duration: unset;
     - `animation-fill-mode` が `forwards` または `both` に設定した場合、アニメーションの最後のフレームは `animation-delay` が経過した後に、 `animation-direction` で定義したように表示されます。
     - `animation-fill-mode` を `none` に設定すると、アニメーションは目に見える効果はありません。
 
-> **メモ:** 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は `0s` と等価に解釈するかもしれません。
+> [!NOTE]
+> 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は `0s` と等価に解釈するかもしれません。
 
 > **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。
 
diff --git a/files/ja/web/css/animation-range/index.md b/files/ja/web/css/animation-range/index.md
index d9842ccc51e413..4867fb2bc8e449 100644
--- a/files/ja/web/css/animation-range/index.md
+++ b/files/ja/web/css/animation-range/index.md
@@ -78,12 +78,14 @@ animation-range: entry 10% 90%;
 
     `<timeline-range-name>` の値に `<length-percentage>` が含まれていない場合、それが `animation-range-start` の値であれば `0%`、`animation-range-end` の値であれば `100%` が既定値になります。
 
-    > **メモ:** 上記の説明からこれらの値が意味していることを視覚化するのはとても難しいです。幸いなことに、 [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) はこれらが意味していることを視覚的に分かりやすく表示してくれます。
+    > [!NOTE]
+    > 上記の説明からこれらの値が意味していることを視覚化するのはとても難しいです。幸いなことに、 [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) はこれらが意味していることを視覚的に分かりやすく表示してくれます。
 
 - `<timeline-range-name> <length-percentage>`
   - : 指定したタイムライン範囲の開始から測定された、指定したタイムライン範囲内の指定したパーセント値または距離に等しい組み合わせ値。
 
-> **メモ:** スクロールポート（詳細は{{glossary("Scroll container", "スクロールコンテナー")}}を参照）とは、名前付きビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされる範囲のことです。既定値では、これはスクロールポートの全範囲ですが、 {{cssxref("view-timeline-inset")}} プロパティを使用して調整することができます。
+> [!NOTE]
+> スクロールポート（詳細は{{glossary("Scroll container", "スクロールコンテナー")}}を参照）とは、名前付きビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされる範囲のことです。既定値では、これはスクロールポートの全範囲ですが、 {{cssxref("view-timeline-inset")}} プロパティを使用して調整することができます。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/animation-timeline/index.md b/files/ja/web/css/animation-timeline/index.md
index 9b1121f6ea81d0..1853b4c2613aed 100644
--- a/files/ja/web/css/animation-timeline/index.md
+++ b/files/ja/web/css/animation-timeline/index.md
@@ -77,7 +77,8 @@ animation-timeline: unset;
 
   - : {{cssxref('scroll-timeline-name')}} または {{cssxref('view-timeline-name')}} プロパティ（または {{cssxref('scroll-timeline')}} または {{cssxref('view-timeline')}} 一括指定プロパティ）で前回宣言された名前付きタイムラインを識別する {{cssxref('dashed-ident')}} です。
 
-    > **メモ:** 2 つ以上のタイムラインが同じ名前を持っている場合、カスケード内で最後に宣言されたものが使用されます。また、指定された名前に一致するタイムラインが見つからない場合、アニメーションはタイムラインに関連付けられません。
+    > [!NOTE]
+    > 2 つ以上のタイムラインが同じ名前を持っている場合、カスケード内で最後に宣言されたものが使用されます。また、指定された名前に一致するタイムラインが見つからない場合、アニメーションはタイムラインに関連付けられません。
 
     > **メモ:** [`<dashed-ident>`](/ja/docs/Web/CSS/dashed-ident) 値は `--` で始まる必要があります。これにより、標準 CSS キーワードとの名前の衝突を避けることができます。
 
@@ -185,7 +186,8 @@ animation-timeline: unset;
 下記の CSS では、 `animation-timeline` プロパティで指定されたタイムラインに従って、交互に回転する正方形を定義しています。
 この場合、タイムラインは `scroll(block nearest)` によって指定されます。これは、スクロールバーを持つ最も近い祖先要素のブロック方向のスクロールバーを選択することを意味しています。
 
-> **メモ:** 実は `block` と `nearest` が既定値の引数なので、`scroll()` だけを使用することができました。
+> [!NOTE]
+> 実は `block` と `nearest` が既定値の引数なので、`scroll()` だけを使用することができました。
 
 ```css
 #square {
diff --git a/files/ja/web/css/animation-timeline/scroll/index.md b/files/ja/web/css/animation-timeline/scroll/index.md
index 041fc301184e27..a03759da7eac17 100644
--- a/files/ja/web/css/animation-timeline/scroll/index.md
+++ b/files/ja/web/css/animation-timeline/scroll/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`scroll()`** は [CSS 関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{cssxref("animation-timeline")}} と共に使用することができます。 {{cssxref("animation-timeline")}} はスクロール可能な要素 (_scroller_) とスクロールバーの軸を示し、現在の要素をアニメーションさせるための無名スクロール進行タイムラインを提供します。スクロール進行タイムラインは、スクローラーを上下（または左右）にスクロールすることで進行します。スクロール範囲内の位置は進行のパーセント値に変換されます。先頭は 0% で、末尾は 100% です。
 
-> **メモ:** 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。
+> [!NOTE]
+> 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。
 
 > **メモ:** `scroll()` を使用するたびに、[ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) に {{domxref("ScrollTimeline")}} の固有のインスタンスが対応付けられます。
 
@@ -62,7 +63,8 @@ animation-timeline: scroll(x self);
     - `x`
       - : スクロールコンテナーの横軸にあるスクロールバー。
 
-> **メモ:** スクローラーと軸の値は、任意の順序で指定することができます。
+> [!NOTE]
+> スクローラーと軸の値は、任意の順序で指定することができます。
 
 ### 形式文法
 
@@ -91,7 +93,8 @@ animation-timeline: scroll(x self);
 下記の CSS では、`animation-timeline`プロパティで指定されたタイムラインに従って、交互に回転する正方形を定義しています。
 この場合、タイムラインは `scroll(block nearest)` によって指定されます。これはスクロールバーを保有する最も近い祖先要素のブロック方向のスクロールバーを選択することを意味しています。
 
-> **メモ:** 実は `block` と `nearest` は既定値なので、`scroll()` だけを使用することができました。
+> [!NOTE]
+> 実は `block` と `nearest` は既定値なので、`scroll()` だけを使用することができました。
 
 ```css
 #square {
diff --git a/files/ja/web/css/animation-timeline/view/index.md b/files/ja/web/css/animation-timeline/view/index.md
index 27f51db9bdbeb8..e81cd483599316 100644
--- a/files/ja/web/css/animation-timeline/view/index.md
+++ b/files/ja/web/css/animation-timeline/view/index.md
@@ -11,7 +11,8 @@ l10n:
 
 関数の引数には、タイムラインの進行が追跡されるスクロールバーの軸と、主体が表示されているとみなされるボックスの位置を調整するインセットを指定します。
 
-> **メモ:** 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。
+> [!NOTE]
+> 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。
 
 > **メモ:** `view()` を使用するたびに、[ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) に {{domxref("ViewTimeline")}} の固有のインスタンスが対応付けられます。
 
@@ -68,7 +69,8 @@ animation-timeline: view(x 200px auto);
     - end
       - : スクロールポートの末尾からの内方オフセット。
 
-> **メモ:** 軸とインセットの値は、任意の順序で指定することができます。
+> [!NOTE]
+> 軸とインセットの値は、任意の順序で指定することができます。
 
 ### 形式文法
 
diff --git a/files/ja/web/css/appearance/index.md b/files/ja/web/css/appearance/index.md
index 5412b2aa471254..f900909cb8bc5c 100644
--- a/files/ja/web/css/appearance/index.md
+++ b/files/ja/web/css/appearance/index.md
@@ -13,7 +13,8 @@ l10n:
 
 標準化以前は、このプロパティによって、ボタンやチェックボックスのような要素をウィジェットとして表示できました。しかし、これは誤った機能であると考えられ、現在では標準的なキーワードのみを使用することが推奨されています。
 
-> **メモ:** ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。
+> [!NOTE]
+> ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。
 
 ## 構文
 
diff --git a/files/ja/web/css/background-image/index.md b/files/ja/web/css/background-image/index.md
index a6d1a86a3a7cb5..990c981ab6a5c5 100644
--- a/files/ja/web/css/background-image/index.md
+++ b/files/ja/web/css/background-image/index.md
@@ -17,7 +17,8 @@ l10n:
 
 指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を `none` 値であるかのように処理します。
 
-> **メモ:** たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
+> [!NOTE]
+> たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
 
 ## 構文
 
diff --git a/files/ja/web/css/background-size/index.md b/files/ja/web/css/background-size/index.md
index 6947a7f72edadd..1ed7750cc88a25 100644
--- a/files/ja/web/css/background-size/index.md
+++ b/files/ja/web/css/background-size/index.md
@@ -84,7 +84,8 @@ background-size: unset;
 - CSS の {{cssxref("&lt;gradient&gt;")}} には内在的な寸法も内在的な比率もありません。
 - {{cssxref("element", "element()")}} 関数によって作成された背景画像では、それを作成する要素の内在的な寸法と比率を使用します。
 
-> **メモ:** Gecko では、 [`element()`](/ja/docs/Web/CSS/element) 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な内在的な比率を持ちます。これは標準外の動作です。
+> [!NOTE]
+> Gecko では、 [`element()`](/ja/docs/Web/CSS/element) 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な内在的な比率を持ちます。これは標準外の動作です。
 
 内在的な寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。
 
@@ -99,14 +100,16 @@ background-size: unset;
   - 画像に一方だけ内在的な寸法があり、内在的な比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と内在的な比率を使用して計算されます。
   - 画像に一方だけ内在的な寸法があり、内在的な比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。
 
-  > **メモ:** SVG 画像には [`preserveAspectRatio`](/ja/docs/Web/SVG/Attribute/preserveAspectRatio) 属性があり、既定では `contain` と同等です。明示的に `background-size` が設定されると `preserveAspectRatio` が無視されます。
+  > [!NOTE]
+  > SVG 画像には [`preserveAspectRatio`](/ja/docs/Web/SVG/Attribute/preserveAspectRatio) 属性があり、既定では `contain` と同等です。明示的に `background-size` が設定されると `preserveAspectRatio` が無視されます。
 
 - **`background-size` の一方が `auto` でもう一方が `auto` ではない場合:**
 
   - 画像に内在的な比率がある場合は、指定された寸法まで変倍されます。指定されていない方の寸法は指定された寸法と内在的な比率を使用して計算されます。
   - 画像に内在的な比率がない場合は、指定された寸法まで変倍されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような内在的な寸法がない場合、背景配置領域の適切な寸法になります。
 
-  > **メモ:** 内在的な寸法や比率を持たないベクター画像の背景の変倍は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。
+  > [!NOTE]
+  > 内在的な寸法や比率を持たないベクター画像の背景の変倍は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/border-bottom-left-radius/index.md b/files/ja/web/css/border-bottom-left-radius/index.md
index eae96365052990..85a123b2aef534 100644
--- a/files/ja/web/css/border-bottom-left-radius/index.md
+++ b/files/ja/web/css/border-bottom-left-radius/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/border-bottom-left-radius
 
 背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。
 
-> **メモ:** このプロパティの値が `border-bottom-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
+> [!NOTE]
+> このプロパティの値が `border-bottom-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-bottom-right-radius/index.md b/files/ja/web/css/border-bottom-right-radius/index.md
index fbdb2bde6a4018..72fea9979f275c 100644
--- a/files/ja/web/css/border-bottom-right-radius/index.md
+++ b/files/ja/web/css/border-bottom-right-radius/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/border-bottom-right-radius
 
 背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。
 
-> **メモ:** このプロパティの値が `border-bottom-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
+> [!NOTE]
+> このプロパティの値が `border-bottom-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-bottom-style/index.md b/files/ja/web/css/border-bottom-style/index.md
index df4abb25fef351..9b617d75ec0e50 100644
--- a/files/ja/web/css/border-bottom-style/index.md
+++ b/files/ja/web/css/border-bottom-style/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
 
-> **メモ:** 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。
+> [!NOTE]
+> 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-bottom-width/index.md b/files/ja/web/css/border-bottom-width/index.md
index d45ed3d3513583..8e9d23ad787a88 100644
--- a/files/ja/web/css/border-bottom-width/index.md
+++ b/files/ja/web/css/border-bottom-width/index.md
@@ -42,7 +42,8 @@ border-bottom-width: unset;
     - `medium`
     - `thick`
 
-> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
+> [!NOTE]
+> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/border-image/index.md b/files/ja/web/css/border-image/index.md
index 15879d3ffcc608..91abc5f234d833 100644
--- a/files/ja/web/css/border-image/index.md
+++ b/files/ja/web/css/border-image/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/border-image.html")}}
 
-> **メモ:** 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。仕様では厳密には要求されていませんが、{{cssxref("border-style")}} が `none` または {{cssxref("border-width")}} が `0` の場合、境界画像を描画しないブラウザーもあります。
+> [!NOTE]
+> 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。仕様では厳密には要求されていませんが、{{cssxref("border-style")}} が `none` または {{cssxref("border-width")}} が `0` の場合、境界画像を描画しないブラウザーもあります。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/border-left-style/index.md b/files/ja/web/css/border-left-style/index.md
index c4f0f9d7e0ad1f..668f6acf622a80 100644
--- a/files/ja/web/css/border-left-style/index.md
+++ b/files/ja/web/css/border-left-style/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/border-left-style.html")}}
 
-> **メモ:** 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。
+> [!NOTE]
+> 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-left-width/index.md b/files/ja/web/css/border-left-width/index.md
index 8481862f1fdaaa..8fe5e96b7ffb70 100644
--- a/files/ja/web/css/border-left-width/index.md
+++ b/files/ja/web/css/border-left-width/index.md
@@ -42,7 +42,8 @@ border-left-width: unset;
     - `medium`
     - `thick`
 
-> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
+> [!NOTE]
+> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/border-radius/index.md b/files/ja/web/css/border-radius/index.md
index 0b9b59cd511c85..f001b50a3dd239 100644
--- a/files/ja/web/css/border-radius/index.md
+++ b/files/ja/web/css/border-radius/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/border-radius
 
 `border-radius` プロパティは {{cssxref("border-collapse")}} が `collapse` の table 要素には適用されません。
 
-> **メモ:** 他の一括指定プロパティと同様、個別のサブプロパティは `border-radius:0 0 inherit inherit` のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
+> [!NOTE]
+> 他の一括指定プロパティと同様、個別のサブプロパティは `border-radius:0 0 inherit inherit` のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/border-right-style/index.md b/files/ja/web/css/border-right-style/index.md
index f9d1d70d5fee4b..4ed00ee55c7172 100644
--- a/files/ja/web/css/border-right-style/index.md
+++ b/files/ja/web/css/border-right-style/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/border-right-style.html")}}
 
-> **メモ:** 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。
+> [!NOTE]
+> 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-right-width/index.md b/files/ja/web/css/border-right-width/index.md
index 4dd1dacff95ad4..f834b250326998 100644
--- a/files/ja/web/css/border-right-width/index.md
+++ b/files/ja/web/css/border-right-width/index.md
@@ -42,7 +42,8 @@ border-right-width: unset;
     - `medium`
     - `thick`
 
-> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
+> [!NOTE]
+> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/border-top-left-radius/index.md b/files/ja/web/css/border-top-left-radius/index.md
index 85fa7d34801aa3..f275f574e65e72 100644
--- a/files/ja/web/css/border-top-left-radius/index.md
+++ b/files/ja/web/css/border-top-left-radius/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/border-top-left-radius
 
 背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。
 
-> **メモ:** このプロパティの値が `border-top-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
+> [!NOTE]
+> このプロパティの値が `border-top-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-top-right-radius/index.md b/files/ja/web/css/border-top-right-radius/index.md
index bd4feb61f8c9e5..3f384cfc1c8e80 100644
--- a/files/ja/web/css/border-top-right-radius/index.md
+++ b/files/ja/web/css/border-top-right-radius/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/border-top-right-radius
 
 画像または単色が背景になっている場合、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。
 
-> **メモ:** このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
+> [!NOTE]
+> このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-top-style/index.md b/files/ja/web/css/border-top-style/index.md
index 743201361ce21f..5c5320a564815c 100644
--- a/files/ja/web/css/border-top-style/index.md
+++ b/files/ja/web/css/border-top-style/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/border-top-style.html")}}
 
-> **メモ:** 仕様書では、異なるスタイルの境界線を角でどのように接続するかを定義していません。
+> [!NOTE]
+> 仕様書では、異なるスタイルの境界線を角でどのように接続するかを定義していません。
 
 ## 構文
 
diff --git a/files/ja/web/css/border-top-width/index.md b/files/ja/web/css/border-top-width/index.md
index a217162f93231c..988caae951946a 100644
--- a/files/ja/web/css/border-top-width/index.md
+++ b/files/ja/web/css/border-top-width/index.md
@@ -42,7 +42,8 @@ border-top-width: unset;
     - `medium`
     - `thick`
 
-> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
+> [!NOTE]
+> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/border-width/index.md b/files/ja/web/css/border-width/index.md
index 9ad7c9e4021d57..90664e0e6617cc 100644
--- a/files/ja/web/css/border-width/index.md
+++ b/files/ja/web/css/border-width/index.md
@@ -66,7 +66,8 @@ border-width: unset;
     - `medium`
     - `thick`
 
-> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
+> [!NOTE]
+> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/border/index.md b/files/ja/web/css/border/index.md
index 64de18bfafb493..ecfb58eaf20703 100644
--- a/files/ja/web/css/border/index.md
+++ b/files/ja/web/css/border/index.md
@@ -44,7 +44,8 @@ border: unset;
 
 `border` プロパティは、以下に挙げる値の 1 ～ 3 つを使用して指定します。値の順序は関係ありません。
 
-> **メモ:** style が指定されていない場合は境界線は表示されません。 style の既定値が `none` だからです。
+> [!NOTE]
+> style が指定されていない場合は境界線は表示されません。 style の既定値が `none` だからです。
 
 ### 値
 
diff --git a/files/ja/web/css/box-align/index.md b/files/ja/web/css/box-align/index.md
index 80380463287286..9d003124e044d1 100644
--- a/files/ja/web/css/box-align/index.md
+++ b/files/ja/web/css/box-align/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
 
-> **警告:** このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。
+> [!WARNING]
+> このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。
 
 **`box-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、交差軸方向に子要素をどう整列させるかを定義します。ボックス内に余分な空間がある場合にかぎり、その効果を確認することができます。
 
diff --git a/files/ja/web/css/box-direction/index.md b/files/ja/web/css/box-direction/index.md
index e3ec3735a3c1e2..4aa6935789c182 100644
--- a/files/ja/web/css/box-direction/index.md
+++ b/files/ja/web/css/box-direction/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/box-direction
 
 {{CSSRef}}{{Non-standard_header}}
 
-> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった `box-direction` は `flex-direction` に置き換えられたので、 `-moz-box-direction` は XUL でのみ使用されます。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
+> [!WARNING]
+> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった `box-direction` は `flex-direction` に置き換えられたので、 `-moz-box-direction` は XUL でのみ使用されます。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
 **`box-direction`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。
 
diff --git a/files/ja/web/css/box-edge/index.md b/files/ja/web/css/box-edge/index.md
index bad01265054d9a..ca3d27089d7529 100644
--- a/files/ja/web/css/box-edge/index.md
+++ b/files/ja/web/css/box-edge/index.md
@@ -75,7 +75,8 @@ box-edge キーワードは `<visual-box>`, `<layout-box>`, `<paint-box>`, `<coo
 - `view-box`
 
   - : 最も近い SVG ビューポート要素の 元ボックスを参照します。元ボックスは、その要素の {{svgattr("viewBox")}} 属性によって確立された初期 SVG ユーザー座標系の幅と高さを持つ長方形です。元ボックスは、その左上隅がその[座標系](/ja/docs/Web/CSS/CSSOM_view/Coordinate_systems)の原点に固定されるように配置されます。 CSS では `view-box` は `border-box` として扱われます。
-    > **メモ:** SVG ビューポートが原点に固定されていない場合、元ボックスは SVG ビューポートに対応しません。
+    > [!NOTE]
+    > SVG ビューポートが原点に固定されていない場合、元ボックスは SVG ビューポートに対応しません。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/box-flex-group/index.md b/files/ja/web/css/box-flex-group/index.md
index d6cd69f6d40017..205c82876ea490 100644
--- a/files/ja/web/css/box-flex-group/index.md
+++ b/files/ja/web/css/box-flex-group/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/box-flex-group
 
 {{CSSRef}}{{Non-standard_Header}}
 
-> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。
+> [!WARNING]
+> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。
 
 **`box-flex-group`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスボックスの子要素をフレックスグループに割り当てます。
 
diff --git a/files/ja/web/css/box-flex/index.md b/files/ja/web/css/box-flex/index.md
index e8a76f7a992a98..8e79b324c32c88 100644
--- a/files/ja/web/css/box-flex/index.md
+++ b/files/ja/web/css/box-flex/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/box-flex
 
 {{CSSRef}}{{Non-standard_Header}}
 
-> **警告:** このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '`box-flex`' (このプロパティの元になったもの) または '`-webkit-box-flex`' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
+> [!WARNING]
+> このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '`box-flex`' (このプロパティの元になったもの) または '`-webkit-box-flex`' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
 **`-moz-box-flex`** および **`-webkit-box-flex`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 `-moz-box` または `-webkit-box` が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。
 
diff --git a/files/ja/web/css/box-lines/index.md b/files/ja/web/css/box-lines/index.md
index 3e68dd13f23928..ced1725884e0cc 100644
--- a/files/ja/web/css/box-lines/index.md
+++ b/files/ja/web/css/box-lines/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/box-lines
 
 {{CSSRef}}{{Non-standard_header}}
 
-> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
+> [!WARNING]
+> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
 **`box-lines`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。
 
diff --git a/files/ja/web/css/box-ordinal-group/index.md b/files/ja/web/css/box-ordinal-group/index.md
index 49a203468a3ae7..2f99c0d3a870a3 100644
--- a/files/ja/web/css/box-ordinal-group/index.md
+++ b/files/ja/web/css/box-ordinal-group/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/box-ordinal-group
 
 {{CSSRef}}{{Non-standard_Header}}
 
-> **警告:** これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。
+> [!WARNING]
+> これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。
 
 **`box-ordinal-group`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。
 
diff --git a/files/ja/web/css/box-orient/index.md b/files/ja/web/css/box-orient/index.md
index e654280d502389..eb7ecd0dc426e2 100644
--- a/files/ja/web/css/box-orient/index.md
+++ b/files/ja/web/css/box-orient/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/box-orient
 
 {{CSSRef}}{{Non-standard_header}}
 
-> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
+> [!WARNING]
+> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
 **`box-orient`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。
 
diff --git a/files/ja/web/css/box-pack/index.md b/files/ja/web/css/box-pack/index.md
index 071dd7c93d9f27..c661806c46bb51 100644
--- a/files/ja/web/css/box-pack/index.md
+++ b/files/ja/web/css/box-pack/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/box-pack
 
 {{CSSRef}}{{Non-standard_header}}
 
-> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
+> [!WARNING]
+> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。
 
 **`-moz-box-pack`** および **`-webkit-box-pack`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 `-moz-box` または `-webkit-box` がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に空間がある場合のみ見ることができます。
 
diff --git a/files/ja/web/css/box-sizing/index.md b/files/ja/web/css/box-sizing/index.md
index 00b644f4eea807..4ebe456454dcf4 100644
--- a/files/ja/web/css/box-sizing/index.md
+++ b/files/ja/web/css/box-sizing/index.md
@@ -18,7 +18,8 @@ slug: Web/CSS/box-sizing
 
   `box-sizing: border-box` はブラウザーが {{htmlelement("table")}}, {{htmlelement("select")}}, {{htmlelement("button")}} の各要素、また {{htmlelement("input")}} 要素のうち type が `{{htmlelement("input/radio", "radio")}}`, `{{htmlelement("input/checkbox", "checkbox")}}`, `{{htmlelement("input/reset", "reset")}}`, `{{htmlelement("input/button", "button")}}`, `{{htmlelement("input/submit", "submit")}}`, `{{htmlelement("input/color", "color")}}`, `{{htmlelement("input/search", "search")}}` であるものに対して使用する既定のスタイル付けです。
 
-> **メモ:** 要素をレイアウトする際には、 `box-sizing` を `border-box` に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 `position: relative` または `position: absolute` を使用する場合、 `box-sizing: content-box` を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。
+> [!NOTE]
+> 要素をレイアウトする際には、 `box-sizing` を `border-box` に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 `position: relative` または `position: absolute` を使用する場合、 `box-sizing: content-box` を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。
 
 ## 構文
 
diff --git a/files/ja/web/css/break-after/index.md b/files/ja/web/css/break-after/index.md
index 2358c8ddaef1d9..63e58bfaec636d 100644
--- a/files/ja/web/css/break-after/index.md
+++ b/files/ja/web/css/break-after/index.md
@@ -106,7 +106,8 @@ break-after: unset;
 | `avoid`          | `avoid`     |
 | `always`         | `page`      |
 
-> **メモ:** ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。
+> [!NOTE]
+> ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/break-before/index.md b/files/ja/web/css/break-before/index.md
index 85426929420b0f..a8dd84350a9240 100644
--- a/files/ja/web/css/break-before/index.md
+++ b/files/ja/web/css/break-before/index.md
@@ -106,7 +106,8 @@ break-before: unset;
 | `avoid`           | `avoid`      |
 | `always`          | `page`       |
 
-> **メモ:** ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。
+> [!NOTE]
+> ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/calc-keyword/index.md b/files/ja/web/css/calc-keyword/index.md
index 28d7115faba135..36211c82eb8bf8 100644
--- a/files/ja/web/css/calc-keyword/index.md
+++ b/files/ja/web/css/calc-keyword/index.md
@@ -1,18 +1,17 @@
 ---
-title: <calc-constant>
+title: <calc-keyword>
 slug: Web/CSS/calc-keyword
-original_slug: Web/CSS/calc-constant
 l10n:
-  sourceCommit: fb1c7f8985e4c4142f482f809366e3cba6b96b94
+  sourceCommit: 62ebcab471aceef4d843e57e310dae4ab1eda94a
 ---
 
 {{CSSRef}}
 
-**`<calc-constant>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 `e` や `pi` のようなよく定義された定数を表します。これらの数学定数を何桁も手作業で入力したり、計算したりする必要はなく、利便性のために CSS によって直接提供されています。
+**`<calc-keyword>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 `e` や `pi` のようなよく定義された定数を表します。これらの数学定数を何桁も手作業で入力したり、計算したりする必要はなく、利便性のために CSS によって直接提供されています。
 
 ## 構文
 
-`<calc-constant>` 型は、 [CSS 数学関数](/ja/docs/Web/CSS/CSS_Functions#数学関数)で使用される数値の定数を定義します。
+`<calc-keyword>` 型は、 [CSS 数学関数](/ja/docs/Web/CSS/CSS_Functions#数学関数)で使用される数値の定数を定義します。
 
 ### 値
 
@@ -66,7 +65,7 @@ l10n:
 - `line-height: e;` は無効ですが、 `line-height: calc(e);` は有効です。
 - `rotate(1rad * pi);` は動作しません。 {{CSSxRef("transform-function/rotate", "rotate()")}} は数学関数ではないからです。 `rotate(calc(1rad * pi));` を使用してください。
 
-数学関数では、 `<calc-constant>` 値は {{CSSxRef("number")}} 値として評価されるので、 `e` と `pi` は数値定数として動作します。
+数学関数では、 `<calc-keyword>` 値は {{CSSxRef("number")}} 値として評価されるので、 `e` と `pi` は数値定数として動作します。
 
 `infinity` と `NaN` は少し異なり、退化した数値定数とみなされます。
 技術的には数値ではありませんが、 {{CSSxRef("number")}} 値として動作するので、例えば無限大の {{CSSxRef("length")}} を取得するには `calc(infinity * 1px)` のような式が必要となります。
diff --git a/files/ja/web/css/caret-color/index.md b/files/ja/web/css/caret-color/index.md
index d3e5c8cf0ba9ea..4ec31cb121d2cd 100644
--- a/files/ja/web/css/caret-color/index.md
+++ b/files/ja/web/css/caret-color/index.md
@@ -41,7 +41,8 @@ caret-color: unset;
 
   - : ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("&lt;color&gt;","currentcolor","#currentcolor_keyword")}} ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが `currentcolor`、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。
 
-    > **メモ:** ユーザーエージェントは `auto` の値に `currentcolor` (通常はアニメーション可能) を使用することがありますが、 `auto` はトランジションやアニメーションでは補完されません。
+    > [!NOTE]
+    > ユーザーエージェントは `auto` の値に `currentcolor` (通常はアニメーション可能) を使用することがありますが、 `auto` はトランジションやアニメーションでは補完されません。
 
 - {{cssxref("&lt;color&gt;")}}
   - : キャレットの色です。
diff --git a/files/ja/web/css/cascade/index.md b/files/ja/web/css/cascade/index.md
index aef7f59702b4c9..c16cf55ae77267 100644
--- a/files/ja/web/css/cascade/index.md
+++ b/files/ja/web/css/cascade/index.md
@@ -183,7 +183,8 @@ li {
 margin-left: 3px;
 ```
 
-> **メモ:** ユーザー CSS で定義された宣言は、より高い詳細度を持つかもしれませんが、カスケードアルゴリズムのオリジンと重要性が詳細度アルゴリズムの前に適用されるため、選択されることはありません。カスケードレイヤーで定義された宣言は、コードの後半に来るかもしれませんが、カスケードレイヤーの通常のスタイルが通常の非レイヤーのスタイルより優先順位が低いため、優先順位もありません。 出現の順序\_は、オリジン、重要度、および詳細度の両方が等しい場合にのみ重要である。
+> [!NOTE]
+> ユーザー CSS で定義された宣言は、より高い詳細度を持つかもしれませんが、カスケードアルゴリズムのオリジンと重要性が詳細度アルゴリズムの前に適用されるため、選択されることはありません。カスケードレイヤーで定義された宣言は、コードの後半に来るかもしれませんが、カスケードレイヤーの通常のスタイルが通常の非レイヤーのスタイルより優先順位が低いため、優先順位もありません。 出現の順序\_は、オリジン、重要度、および詳細度の両方が等しい場合にのみ重要である。
 
 ## 作成者スタイル: インラインスタイル、レイヤー、優先度
 
@@ -374,7 +375,8 @@ p {
 
 この例では、 `repeatedName` という名前の別個のアニメーション宣言が 3 つ存在します。 `animation: infinite 5s alternate repeatedName` が段落に適用されると、 1 つのアニメーションだけが適用されます。レイヤー化されていない CSS で定義されたキーフレームアニメーションは、オリジンとカスケードレイヤーの優先順位に基づいて、レイヤーのキーフレームアニメーション宣言より優先されます。この例では、要素のフォントサイズのみがアニメーション化されます。
 
-> **メモ:** 重要なアニメーションはありません。 {{cssxref('@keyframes')}} ブロック内のプロパティ宣言で、値の一部として `!important` を含むものは無視されるからです。
+> [!NOTE]
+> 重要なアニメーションはありません。 {{cssxref('@keyframes')}} ブロック内のプロパティ宣言で、値の一部として `!important` を含むものは無視されるからです。
 
 ## スタイルの初期化
 
diff --git a/files/ja/web/css/clear/index.md b/files/ja/web/css/clear/index.md
index a8d27daff57fa2..68082ec93a6ab1 100644
--- a/files/ja/web/css/clear/index.md
+++ b/files/ja/web/css/clear/index.md
@@ -17,7 +17,8 @@ l10n:
 
 解除されることに関連する浮動要素は、その前の浮動要素と[同一のブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)内の先行する浮動要素です。
 
-> **メモ:** 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その要素の [`display`](/ja/docs/Web/CSS/display) プロパティの値を [`flow-root`](/ja/docs/Web/CSS/display#flow-root) に設定してください。
+> [!NOTE]
+> 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その要素の [`display`](/ja/docs/Web/CSS/display) プロパティの値を [`flow-root`](/ja/docs/Web/CSS/display#flow-root) に設定してください。
 >
 > ```css
 > #container {
diff --git a/files/ja/web/css/clip-path/index.md b/files/ja/web/css/clip-path/index.md
index ef905ed7cddb25..6b7d9334a3b502 100644
--- a/files/ja/web/css/clip-path/index.md
+++ b/files/ja/web/css/clip-path/index.md
@@ -89,7 +89,8 @@ clip-path: unset;
 - `none`
   - : クリッピングパスは作成されません。
 
-> **メモ:** 計算値が **`none`** 以外の場合は、新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)を生成します。これは、 {{cssxref("opacity")}} が `1` 以外の値の場合と同様です。
+> [!NOTE]
+> 計算値が **`none`** 以外の場合は、新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)を生成します。これは、 {{cssxref("opacity")}} が `1` 以外の値の場合と同様です。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/clip/index.md b/files/ja/web/css/clip/index.md
index 4f0825e614f3eb..daa9b3286f384d 100644
--- a/files/ja/web/css/clip/index.md
+++ b/files/ja/web/css/clip/index.md
@@ -23,7 +23,8 @@ clip: unset;
 
 ## 構文
 
-> **メモ:** 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。
+> [!NOTE]
+> 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。
 
 ### 値
 
diff --git a/files/ja/web/css/color_value/color/index.md b/files/ja/web/css/color_value/color/index.md
index f827408a1c39dd..1aef3861eff32a 100644
--- a/files/ja/web/css/color_value/color/index.md
+++ b/files/ja/web/css/color_value/color/index.md
@@ -75,9 +75,11 @@ color(from <color> colorspace c1 c2 c3[ / A])
   - `r`, `g`, `b`: `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020` における RGB ベースの色空間のための色チャンネル値
   - `x`, `y`, `z`: `xyz`, `xyz-d50`, `xyz-d65` における CIE XYZ ベースの色空間のための色チャンネル値
 
-    > **メモ:** これらの値は通常 `0` と `1` の間ですが、上で説明したように、これらの範囲外であってもかまいません。
+    > [!NOTE]
+    > これらの値は通常 `0` と `1` の間ですが、上で説明したように、これらの範囲外であってもかまいません。
 
-    > **メモ:** XYZ ベースの色空間を指定した `color()` 関数の内部で `r`, `g`, `b` 値を参照したり、RGB ベースの色空間を指定した `color()` 関数の内部で `x`, `y`, `z` 値を参照したり、他にも文字を参照したりすることは無効です。関数内で利用できる元の色チャンネルの値は、指定する色空間の型と一致しなければなりません。
+    > [!NOTE]
+    > XYZ ベースの色空間を指定した `color()` 関数の内部で `r`, `g`, `b` 値を参照したり、RGB ベースの色空間を指定した `color()` 関数の内部で `x`, `y`, `z` 値を参照したり、他にも文字を参照したりすることは無効です。関数内で利用できる元の色チャンネルの値は、指定する色空間の型と一致しなければなりません。
 
 - `alpha`: `0` から `1` までの `<number>` で表される色の透過率。
 
@@ -114,7 +116,8 @@ color(from hsl(0 100% 50%) xyz x y 0.5)
 /* 計算後の出力色: color(xyz-d65 0.412426 0.212648 0.5) */
 ```
 
-> **メモ:** 上述したように、出力色が元の色と異なる色モデルを用いている場合、元の色は背景の出力色と同じモデルに変換され、互換性のある（つまり同じチャンネルを使用する）方法で表すことができます。例えば {{cssxref("color_value/hsl", "hsl()")}} の色 `hsl(0 100% 50%)` は、上の最初の例では `color(srgb 1 0 0)` に変換され、 2 つ目の例では `color(xyz 0.412426 0.212648 0.5)` に変換されます。
+> [!NOTE]
+> 上述したように、出力色が元の色と異なる色モデルを用いている場合、元の色は背景の出力色と同じモデルに変換され、互換性のある（つまり同じチャンネルを使用する）方法で表すことができます。例えば {{cssxref("color_value/hsl", "hsl()")}} の色 `hsl(0 100% 50%)` は、上の最初の例では `color(srgb 1 0 0)` に変換され、 2 つ目の例では `color(xyz 0.412426 0.212648 0.5)` に変換されます。
 
 この章でこれまで見てきた例では、アルファチャンネルは元の色にも出力色にも明示的に指定されていませんでした。出力色のアルファチャンネルを指定しない場合、既定値として元の色のアルファチャンネルと同じ値が指定されます。元の色のアルファチャンネルを指定しない場合（相対色でない場合）、既定値は `1` です。したがって、上記の例では、原点と出力のアルファチャンネルの値は `1` となります。
 
@@ -138,7 +141,8 @@ color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(
 /* 計算後の出力色: color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */
 ```
 
-> **メモ:** 元の色チャンネルの値は `<number>` 値に解決されるため、通常チャンネルが `<percentage>`、`<angle>` などの値を受け入れるような用途であっても、計算で使用する際には値を追加する必要があります。例えば `<percentage>` を `<number>` に加えても動作しません。
+> [!NOTE]
+> 元の色チャンネルの値は `<number>` 値に解決されるため、通常チャンネルが `<percentage>`、`<angle>` などの値を受け入れるような用途であっても、計算で使用する際には値を追加する必要があります。例えば `<percentage>` を `<number>` に加えても動作しません。
 
 ### 形式文法
 
diff --git a/files/ja/web/css/color_value/hsl/index.md b/files/ja/web/css/color_value/hsl/index.md
index 9c0099985e8d41..054879e7f48576 100644
--- a/files/ja/web/css/color_value/hsl/index.md
+++ b/files/ja/web/css/color_value/hsl/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`hsl()`** 関数記法は、 {{glossary("RGB", "sRGB")}} 色を _色相_、_彩度_、_明度_ の成分によって表現します。オプションの _アルファ_ 成分は、その色の透明度を表します。
 
-> **メモ:** 古い `hsla()` 構文は `hsl()` の別名です。同じ引数を受け付け、同じように動作します。
+> [!NOTE]
+> 古い `hsla()` 構文は `hsl()` の別名です。同じ引数を受け付け、同じように動作します。
 
 {{EmbedInteractiveExample("pages/css/function-hsl.html")}}
 
@@ -37,7 +38,8 @@ hsl(120deg 75% 25% / 0.6)
 - `A` {{optional_inline}}
   - : {{CSSXref("&lt;alpha-value&gt;")}} またはキーワード `none` であり、数値 `1` が `100%` (完全に不透明) を意味します。
 
-> **メモ:** この関数記法は sRGB 値にシリアライズされ、赤、緑、青の成分の値はシリアライズの際に丸められる可能性があります。
+> [!NOTE]
+> この関数記法は sRGB 値にシリアライズされ、赤、緑、青の成分の値はシリアライズの際に丸められる可能性があります。
 
 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。
 
diff --git a/files/ja/web/css/color_value/hwb/index.md b/files/ja/web/css/color_value/hwb/index.md
index 95abe6c5b51efe..9c77050e0af4db 100644
--- a/files/ja/web/css/color_value/hwb/index.md
+++ b/files/ja/web/css/color_value/hwb/index.md
@@ -36,7 +36,8 @@ hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
 
   - : {{CSSXref("&lt;alpha-value&gt;")}} またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。
 
-> **メモ:** この関数記法は sRGB 値に直列化され、赤、緑、青の成分の値は直列化の際に丸められる可能性があります。
+> [!NOTE]
+> この関数記法は sRGB 値に直列化され、赤、緑、青の成分の値は直列化の際に丸められる可能性があります。
 
 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。
 
diff --git a/files/ja/web/css/color_value/index.md b/files/ja/web/css/color_value/index.md
index ef66d5c9bf9ffd..36c4bb07268991 100644
--- a/files/ja/web/css/color_value/index.md
+++ b/files/ja/web/css/color_value/index.md
@@ -128,7 +128,8 @@ color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
 color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
 ```
 
-> **メモ:** 両方の色から成分が欠落している場合、この成分は補間後に欠落します。
+> [!NOTE]
+> 両方の色から成分が欠落している場合、この成分は補間後に欠落します。
 
 #### 異なる色空間からの色の補間: 類似成分
 
diff --git a/files/ja/web/css/color_value/lab/index.md b/files/ja/web/css/color_value/lab/index.md
index 17949cddb3553d..117166da2dc23d 100644
--- a/files/ja/web/css/color_value/lab/index.md
+++ b/files/ja/web/css/color_value/lab/index.md
@@ -30,7 +30,8 @@ lab(52.2345% 40.1645 59.9971 / .5);
 - `A` {{optional_inline}}
   - : {{CSSXref("&lt;alpha-value&gt;")}} またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。
 
-> **メモ:** 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。
+> [!NOTE]
+> 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。
 > この場合は特別で、 `100%` は `L` 値では `100`、 `a` 値と `b` 値では `125` となります。
 
 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。
diff --git a/files/ja/web/css/color_value/lch/index.md b/files/ja/web/css/color_value/lch/index.md
index bce506024411c7..ffc278d954181d 100644
--- a/files/ja/web/css/color_value/lch/index.md
+++ b/files/ja/web/css/color_value/lch/index.md
@@ -30,7 +30,8 @@ lch(52.2345% 72.2 56.2 / .5);
 - `A` {{optional_inline}}
   - : {{CSSXref("&lt;alpha-value&gt;")}} またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。
 
-> **メモ:** 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。
+> [!NOTE]
+> 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。
 > この場合は特別で、 `100%` は `L` 値では `100`、 `C` 値では `150` となります。
 
 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。
diff --git a/files/ja/web/css/color_value/light-dark/index.md b/files/ja/web/css/color_value/light-dark/index.md
index 8c420d0f0ebf2c..bd12da4cc7ce96 100644
--- a/files/ja/web/css/color_value/light-dark/index.md
+++ b/files/ja/web/css/color_value/light-dark/index.md
@@ -108,7 +108,8 @@ code {
 
 `light-dark()` 関数を有効にするだけでなく、 `color-scheme` プロパティは文書内のセクションのユーザーの配色を上書きすることができます。ページセクションに明暗の配色のみを使用するように強制するには、 `color-scheme` プロパティを `light` または `dark` に設定するだけです。
 
-> **メモ:** 一般的にはこのようなことはすべきではありません。ここではデモのために使用しています。ユーザーが環境設定をした場合、通常はユーザーの環境設定を上書きしてはいけません。
+> [!NOTE]
+> 一般的にはこのようなことはすべきではありません。ここではデモのために使用しています。ユーザーが環境設定をした場合、通常はユーザーの環境設定を上書きしてはいけません。
 
 ```css
 .light {
diff --git a/files/ja/web/css/color_value/rgb/index.md b/files/ja/web/css/color_value/rgb/index.md
index b97b1f3421d1ec..f926182c591417 100644
--- a/files/ja/web/css/color_value/rgb/index.md
+++ b/files/ja/web/css/color_value/rgb/index.md
@@ -64,7 +64,8 @@ rgb(from <color> R G B[ / A])
 
 > **メモ:** `rgba()` エイリアスも相対色の出力や起点色の指定に使用できます。`rgba()` を使用して相対色を出力する場合、カンマのないモダン構文を使用する必要があります。
 
-> **メモ:** 完全な可視スペクトルを表現するために、相対 `rgb()` 色関数の出力は `color(srgb)` にシリアライズされます。つまり、{{DOMxRef("HTMLElement.style")}} プロパティまたは {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} メソッドを介して出力色をクエリすると、出力色が [`color(srgb ...)`](/ja/docs/Web/CSS/color_value/color) 値として返されます。
+> [!NOTE]
+> 完全な可視スペクトルを表現するために、相対 `rgb()` 色関数の出力は `color(srgb)` にシリアライズされます。つまり、{{DOMxRef("HTMLElement.style")}} プロパティまたは {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} メソッドを介して出力色をクエリすると、出力色が [`color(srgb ...)`](/ja/docs/Web/CSS/color_value/color) 値として返されます。
 
 #### 相対色出力チャネル成分の定義
 
@@ -107,7 +108,8 @@ rgb(from hsl(0 100% 50%) r 80 80)
 
 最終的な出力色は、sRGB 色空間の `rgb(255 80 80)` に相当します：`color(srgb 1 0.313726 0.313726)`。
 
-> **メモ:** 前述したように、出力色が起点色と異なるカラーモデルを使用している場合、起点色はバックグラウンドで出力色と同じモデルまたは空間に変換され、互換性のある方法で表現されます（つまり、同じチャネルを使用します）。
+> [!NOTE]
+> 前述したように、出力色が起点色と異なるカラーモデルを使用している場合、起点色はバックグラウンドで出力色と同じモデルまたは空間に変換され、互換性のある方法で表現されます（つまり、同じチャネルを使用します）。
 
 これまでに見てきた例は、起点および出力において、アルファチャネルが明示的に指定されていません。出力色のアルファチャネルが指定されていない場合、起点色のアルファチャネルと同じ値になります。起点色のアルファチャネルが指定されていない場合（かつそれが相対色でない場合）、デフォルト値は `1` です。したがって、上記の例の起点色および出力色のアルファチャネル値は `1` です。
 
@@ -127,7 +129,8 @@ rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
 rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))
 ```
 
-> **メモ:** 起点色のチャネルは `<number>` 値に解決されるため、通常チャネルが `<percentage>`、`<angle>`、または他の値タイプを受け入れる場合でも、計算で使用する際には数値を加える必要があります。例えば `<percentage>` を `<number>` に加えることはできません。
+> [!NOTE]
+> 起点色のチャネルは `<number>` 値に解決されるため、通常チャネルが `<percentage>`、`<angle>`、または他の値タイプを受け入れる場合でも、計算で使用する際には数値を加える必要があります。例えば `<percentage>` を `<number>` に加えることはできません。
 
 ### 形式文法
 
diff --git a/files/ja/web/css/column-fill/index.md b/files/ja/web/css/column-fill/index.md
index c3538c100fce2f..574f0f37e7362d 100644
--- a/files/ja/web/css/column-fill/index.md
+++ b/files/ja/web/css/column-fill/index.md
@@ -90,7 +90,8 @@ p.fill-balance {
 
 {{Compat}}
 
-> **警告:** 仕様上の未解決の問題により、 `column-fill` にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。
+> [!WARNING]
+> 仕様上の未解決の問題により、 `column-fill` にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。
 >
 > 特に、 `column-fill: auto` を使用して連続的に段を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の段をすべての内容物で埋めます。
 
diff --git a/files/ja/web/css/column-rule/index.md b/files/ja/web/css/column-rule/index.md
index 70b5975d422f91..2e88e65ab346d7 100644
--- a/files/ja/web/css/column-rule/index.md
+++ b/files/ja/web/css/column-rule/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/column-rule
 
 これは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)であり、一回の便利な宣言で個別の `column-rule-*` プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。
 
-> **メモ:** 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。
+> [!NOTE]
+> 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。
 
 ## 構文
 
diff --git a/files/ja/web/css/computed_value/index.md b/files/ja/web/css/computed_value/index.md
index 2caba4f8bf52be..7035d863c5fbd1 100644
--- a/files/ja/web/css/computed_value/index.md
+++ b/files/ja/web/css/computed_value/index.md
@@ -14,7 +14,8 @@ slug: Web/CSS/computed_value
 
 しかしながら、いくつかのプロパティ (`width`, `margin-right`, `text-indent`, `top` など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント値で指定された値はパーセント値で計算された値に変わります。さらに、 `line-height` に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、[使用値](/ja/docs/Web/CSS/used_value)が定義された場合、絶対値になります。
 
-> **メモ:** DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は[解決値](/ja/docs/Web/CSS/resolved_value)を返しますが、これはプロパティによって[計算値](/ja/docs/Web/CSS/computed_value)であるか[使用値](/ja/docs/Web/CSS/used_value)であるかが変わります。
+> [!NOTE]
+> DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は[解決値](/ja/docs/Web/CSS/resolved_value)を返しますが、これはプロパティによって[計算値](/ja/docs/Web/CSS/computed_value)であるか[使用値](/ja/docs/Web/CSS/used_value)であるかが変わります。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/contain/index.md b/files/ja/web/css/contain/index.md
index c80d40f2d90091..405d987a8b6857 100644
--- a/files/ja/web/css/contain/index.md
+++ b/files/ja/web/css/contain/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/contain
 
 このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。
 
-> **メモ:** (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。
+> [!NOTE]
+> (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。
 >
 > 1. 新しい[包含ブロック](/ja/docs/Web/CSS/Containing_block) ({{cssxref("position")}} プロパティが `absolute` または `fixed` である子孫を対象とする)。
 > 2. 新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)。
diff --git a/files/ja/web/css/container-name/index.md b/files/ja/web/css/container-name/index.md
index 510629c25aa583..0be19f5aa4c298 100644
--- a/files/ja/web/css/container-name/index.md
+++ b/files/ja/web/css/container-name/index.md
@@ -74,7 +74,8 @@ container-name: unset;
 格納コンテキストを作成するには、 CSS で要素に `container-type` プロパティを追加します。
 次の例では、カードのメタ情報用と投稿の抜粋用の 2 つのコンテナーを作成しています。
 
-> **メモ:** これらの宣言のための一括指定構文は {{cssxref("container")}} ページで説明されています。
+> [!NOTE]
+> これらの宣言のための一括指定構文は {{cssxref("container")}} ページで説明されています。
 
 ```css
 .post-meta {
diff --git a/files/ja/web/css/containing_block/index.md b/files/ja/web/css/containing_block/index.md
index 61902c4ad540c8..718133ad8defe4 100644
--- a/files/ja/web/css/containing_block/index.md
+++ b/files/ja/web/css/containing_block/index.md
@@ -38,7 +38,8 @@ slug: Web/CSS/Containing_block
    3. {{cssxref("filter")}} の値が `none` 以外、または `will-change` の値が `filter` の場合 (Firefox のみで動作)。
    4. {{cssxref("contain")}} の値が `paint` の場合 (例 `contain: paint;`)
 
-> **メモ:** ルート要素 ({{HTMLElement("html")}}) が包含ブロックである場合、**初期包含ブロック**と呼ばれる矩形になります。これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。
+> [!NOTE]
+> ルート要素 ({{HTMLElement("html")}}) が包含ブロックである場合、**初期包含ブロック**と呼ばれる矩形になります。これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。
 
 ## 包含ブロックからのパーセント値の計算
 
diff --git a/files/ja/web/css/content-visibility/index.md b/files/ja/web/css/content-visibility/index.md
index accc54f7c52bb9..20ca235e09a680 100644
--- a/files/ja/web/css/content-visibility/index.md
+++ b/files/ja/web/css/content-visibility/index.md
@@ -53,7 +53,8 @@ content-visibility: unset;
 
 `content-visibility` を [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)でアニメーションさせる場合、 `content-visibility` に [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) を設定する必要があります。これにより、 `content-visibility` のトランジションが有効になります。
 
-> **メモ:** 要素の `content-visibility` 値をトランジションさせるとき、 [`display`](/ja/docs/Web/CSS/display#display_のアニメーション) をトランジションさせるときのように、 [`@starting-style`](/ja/docs/Web/CSS/@starting-style) ブロックを使用して、トランジションするプロパティの開始値の集合を提供する必要はありません。これは `content-visibility` が `display` のように要素を DOM から隠すのではなく、要素のコンテンツのレンダリングをスキップするだけだからです。
+> [!NOTE]
+> 要素の `content-visibility` 値をトランジションさせるとき、 [`display`](/ja/docs/Web/CSS/display#display_のアニメーション) をトランジションさせるときのように、 [`@starting-style`](/ja/docs/Web/CSS/@starting-style) ブロックを使用して、トランジションするプロパティの開始値の集合を提供する必要はありません。これは `content-visibility` が `display` のように要素を DOM から隠すのではなく、要素のコンテンツのレンダリングをスキップするだけだからです。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/counter-increment/index.md b/files/ja/web/css/counter-increment/index.md
index 3e38749e745f49..c58df07cc2db92 100644
--- a/files/ja/web/css/counter-increment/index.md
+++ b/files/ja/web/css/counter-increment/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/counter-increment
 
 {{EmbedInteractiveExample("pages/css/counter-increment.html")}}
 
-> **メモ:** カウンターの値は CSS の {{cssxref("counter-reset")}} プロパティを使用して任意の値にリセットすることができます。
+> [!NOTE]
+> カウンターの値は CSS の {{cssxref("counter-reset")}} プロパティを使用して任意の値にリセットすることができます。
 
 ## 構文
 
diff --git a/files/ja/web/css/counter-set/index.md b/files/ja/web/css/counter-set/index.md
index 408fe8bcd2798e..012e8d84faa4bb 100644
--- a/files/ja/web/css/counter-set/index.md
+++ b/files/ja/web/css/counter-set/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/counter-set
 
 {{EmbedInteractiveExample("pages/css/counter-set.html")}}
 
-> **メモ:** カウンターの値は {{cssxref("counter-increment")}} プロパティを使用して増減させることができます。
+> [!NOTE]
+> カウンターの値は {{cssxref("counter-increment")}} プロパティを使用して増減させることができます。
 
 ## 構文
 
diff --git a/files/ja/web/css/cross-fade/index.md b/files/ja/web/css/cross-fade/index.md
index 6c1baf27b05031..05de4519923e87 100644
--- a/files/ja/web/css/cross-fade/index.md
+++ b/files/ja/web/css/cross-fade/index.md
@@ -12,7 +12,8 @@ l10n:
 
 ## 構文
 
-> **警告:** 仕様書と現在の実装とで構文が異なっています。
+> [!WARNING]
+> 仕様書と現在の実装とで構文が異なっています。
 > 仕様書の構文を先に説明します。
 
 ### 仕様書上の構文
diff --git a/files/ja/web/css/css_animated_properties/index.md b/files/ja/web/css/css_animated_properties/index.md
index abb2274bc192f3..2e9f72bc391627 100644
--- a/files/ja/web/css/css_animated_properties/index.md
+++ b/files/ja/web/css/css_animated_properties/index.md
@@ -9,9 +9,11 @@ l10n:
 
 [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)および[トランジション](/ja/docs/Web/CSS/CSS_transitions)**アニメーション可能な**プロパティの概念に頼っており、特に指定しない限り、すべての CSS プロパティはアニメーション可能です。各プロパティのアニメーションの種類は、このプロパティに対する値の[結合](https://drafts.csswg.org/css-values/#combining-values)方法（補間、追加、累積）を決定します。トランジションは補間のみを使用しますが、アニメーションは 3 つの組み合わせ方法をすべてを使用することができます。
 
-> **メモ:** 各 CSS プロパティのアニメーションの種類は、その「公式定義」表に掲載されています（例: {{CSSXref("color", "", "#公式定義")}}）。
+> [!NOTE]
+> 各 CSS プロパティのアニメーションの種類は、その「公式定義」表に掲載されています（例: {{CSSXref("color", "", "#公式定義")}}）。
 
-> **メモ:** 各 CSS データ型の補間方法は、その「補間」節に記述されています（例: {{CSSXref("&lt;length&gt;", "", "#補間")}}）。
+> [!NOTE]
+> 各 CSS データ型の補間方法は、その「補間」節に記述されています（例: {{CSSXref("&lt;length&gt;", "", "#補間")}}）。
 
 ## アニメーションの種類
 
@@ -21,7 +23,8 @@ l10n:
 
   - : このプロパティはアニメーション可能ではありません。アニメーションのキーフレームに掲載されていても処理されず、ビュートランジションのアニメーションにも影響されません。
 
-    > **メモ:** アニメーション可能でないプロパティのみを対象とするアニメーション効果は、アニメーション効果の通常の動作（例えば、 {{DOMXref("Element/animationstart_event", "animationstart")}} イベントを発行する）を示します。
+    > [!NOTE]
+    > アニメーション可能でないプロパティのみを対象とするアニメーション効果は、アニメーション効果の通常の動作（例えば、 {{DOMXref("Element/animationstart_event", "animationstart")}} イベントを発行する）を示します。
 
 - 離散
 
diff --git a/files/ja/web/css/css_animations/using_css_animations/index.md b/files/ja/web/css/css_animations/using_css_animations/index.md
index fe3ffca1d1327c..9a51795f5d16ef 100644
--- a/files/ja/web/css/css_animations/using_css_animations/index.md
+++ b/files/ja/web/css/css_animations/using_css_animations/index.md
@@ -46,7 +46,8 @@ CSS スタイルでアニメーションのタイミングを定義するため
 
 ## 例
 
-> **メモ:** (2017年以前の) 古いブラウザーでは、接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、`-webkit` 接頭辞を付加したプロパティも含まれています。
+> [!NOTE]
+> (2017年以前の) 古いブラウザーでは、接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、`-webkit` 接頭辞を付加したプロパティも含まれています。
 
 ### 文字列がブラウザーのウィンドウを横切る
 
@@ -89,7 +90,8 @@ p {
 </p>
 ```
 
-> **メモ:** アニメーションを見るにはページを再読み込みしてください。
+> [!NOTE]
+> アニメーションを見るにはページを再読み込みしてください。
 
 {{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}
 
@@ -142,7 +144,8 @@ p {
 
 これはブラウザーに、アニメーションの流れの 75% 経過時点で見出しの左マージンを 25% に、また幅を 150% にするよう設定します。
 
-> **メモ:** アニメーションを見るにはページを再読み込みしてください。
+> [!NOTE]
+> アニメーションを見るにはページを再読み込みしてください。
 
 {{EmbedLiveSample("Adding_another_keyframe","100%","250")}}
 
@@ -244,7 +247,8 @@ p {
 }
 ```
 
-> **メモ:** 詳しくは、 {{cssxref("animation")}} のリファレンスページをご覧ください。
+> [!NOTE]
+> 詳しくは、 {{cssxref("animation")}} のリファレンスページをご覧ください。
 
 ### 複数のアニメーションプロパティ値の設定
 
@@ -374,7 +378,8 @@ function listener(event) {
 
 そしてこちらはライブ出力です。
 
-> **メモ:** アニメーションを見るにはページを再読み込みしてください。
+> [!NOTE]
+> アニメーションを見るにはページを再読み込みしてください。
 
 {{EmbedLiveSample('Using_animation_events', '600', '300')}}
 
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index 2568f2efb3853c..3117819124a775 100644
--- a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables
 
 [ボックス配置仕様書](/ja/docs/Web/CSS/CSS_Box_Alignment)は、様々なレイアウト方式でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方式に共通のボックス配置の共通機能について説明している、中心となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを併せて読んでください。
 
-> **メモ:** 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。
+> [!NOTE]
+> 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。
 
 ## align-content と justify-content
 
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index 8d71b9e815470a..39dd9aa2465425 100644
--- a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout
 
 段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。
 
-> **メモ:** 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。
+> [!NOTE]
+> 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。
 
 ## align-content と justify-content
 
diff --git a/files/ja/web/css/css_box_alignment/index.md b/files/ja/web/css/css_box_alignment/index.md
index 7186e5b2a43b03..144d93adc27085 100644
--- a/files/ja/web/css/css_box_alignment/index.md
+++ b/files/ja/web/css/css_box_alignment/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_box_alignment
 
 CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。
 
-> **メモ:** ボックス配置がどのように適用されるかは、各レイアウト方式のドキュメントに詳しく記載されています。
+> [!NOTE]
+> ボックス配置がどのように適用されるかは、各レイアウト方式のドキュメントに詳しく記載されています。
 
 ## 古い配置方法
 
@@ -156,7 +157,8 @@ CSS は伝統的に、配置機能がとても制約されていました。{{cs
 
 {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 700)}}
 
-> **メモ:** 初期のグリッドの実装は `-gap` プロパティに `grid-` 接頭辞を付けていました。すべてのブラウザーが接頭辞なしのプロパティに対応していますが、例やチュートリアルでは古いプロパティである {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, {{cssxref("gap", "grid-gap")}} を見かけることがあるかもしれません。接頭辞つきのものは接頭辞なしの物の別名として保持される予定です。
+> [!NOTE]
+> 初期のグリッドの実装は `-gap` プロパティに `grid-` 接頭辞を付けていました。すべてのブラウザーが接頭辞なしのプロパティに対応していますが、例やチュートリアルでは古いプロパティである {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, {{cssxref("gap", "grid-gap")}} を見かけることがあるかもしれません。接頭辞つきのものは接頭辞なしの物の別名として保持される予定です。
 
 また、スペース配分キーワードを使用したり、アイテムに余白を設けたりすると、表示される視覚的な溝が大きくなる場合がありますので注意してください。
 
diff --git a/files/ja/web/css/css_box_model/index.md b/files/ja/web/css/css_box_model/index.md
index b41375e2698932..ff94592046efc6 100644
--- a/files/ja/web/css/css_box_model/index.md
+++ b/files/ja/web/css/css_box_model/index.md
@@ -32,7 +32,8 @@ CSS のボックスは、テキスト、画像、その他の HTML 要素が表
 
 ## リファレンス
 
-> **メモ:** 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの書字方向に関係するフローに関連したプロパティは、[論理的プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)で定義されています。
+> [!NOTE]
+> 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの書字方向に関係するフローに関連したプロパティは、[論理的プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)で定義されています。
 
 #### ボックスのマージンを制御するプロパティ
 
diff --git a/files/ja/web/css/css_box_sizing/index.md b/files/ja/web/css/css_box_sizing/index.md
new file mode 100644
index 00000000000000..8bf4063739496f
--- /dev/null
+++ b/files/ja/web/css/css_box_sizing/index.md
@@ -0,0 +1,153 @@
+---
+title: CSS ボックスサイズ指定
+slug: Web/CSS/CSS_box_sizing
+l10n:
+  sourceCommit: 2ef2c905a7322f5a533cf7c96ec5a337fc614359
+---
+
+{{CSSRef}}
+
+**CSS ボックスサイズ指定**モジュールは、要素のサイズをどのようにコンテンツに合わせるか、または特定のレイアウトコンテキストに合わせるかを開発者が指定できるようにします。このモジュールでは、サイズ指定、最小サイズ指定、最大サイズ指定のプロパティを定義しており、コンテンツに基づく{{glossary("intrinsic size", "内在サイズ")}}とコンテキストに基づく[外在](/ja/docs/Glossary/Intrinsic_Size#外在サイズ)サイズを表すキーワードで CSS サイズ指定のプロパティを拡張します。
+
+要素は、外在的にも内在的にもサイズを設定することができます。[CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)は、要素の大きさを明示的に、つまり「外在的」に設定するためのページに相対的なプロパティ、たとえば `width`、`height`、`padding`、`margin` などのプロパティ（[CSS 背景と境界](/ja/docs/Web/CSS/CSS_backgrounds_and_borders)モジュールで定義されている `border` プロパティも含む）を定義しています。この CSS ボックスサイズ指定モジュールは、CSS ボックスモデルモジュールを拡張し、コンテンツのサイズに基づいて要素のサイズを設定することで、要素を内在的にサイズ指定できるようにします。
+
+このモジュールで導入されたサイズ指定値は、[サイズの封じ込め](/ja/docs/Web/CSS/CSS_containment/Using_CSS_containment#サイズの封じ込め)を持つ要素が、内在サイズが何も指定されていないかのようにサイズ指定されるのではなく、そのフロー内コンテンツの幅と高さが指定された明示的な内在サイズと一致するように、明示的な内在サイズを取ることができるようになります。
+
+このモジュールでは、要素のボックスのアスペクト比を定義する機能も導入されました。つまり、ブラウザーは指定されたアスペクト比を維持するために、いずれかの寸法が自動的にサイズ調整される限り、要素の寸法を自動的に調整することができます。
+
+[論理的プロパティと値モジュール](/ja/docs/Web/CSS/CSS_logical_properties_and_values)は、ボックスモデルとボックスサイズ指定モジュールで利用可能なプロパティを拡張し、対応する物理ボックスモデルと内在ボックスサイズ指定プロパティの書字方向に相対的である等価なものを含むように拡張しています。
+
+## リファレンス
+
+### プロパティ
+
+- {{cssxref("aspect-ratio")}}
+- {{cssxref("box-sizing")}}
+- {{cssxref("contain-intrinsic-block-size")}}
+- {{cssxref("contain-intrinsic-height")}}
+- {{cssxref("contain-intrinsic-inline-size")}}
+- {{cssxref("contain-intrinsic-size")}}
+- {{cssxref("contain-intrinsic-width")}}
+- {{cssxref("height")}}
+- {{cssxref("max-height")}}
+- {{cssxref("max-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("min-width")}}
+- {{cssxref("width")}}
+
+> [!NOTE]
+> CSS ボックスサイズ指定モジュールでは、まだ実装されていない `min-intrinsic-sizing` プロパティを導入しています。
+
+### データ型と値
+
+- {{cssxref("ratio")}} データ型
+- {{cssxref("min-content")}} 値
+- {{cssxref("max-content")}} 値
+- {{cssxref("fit-content")}} 値
+- {{cssxref("fit-content_function", "fit-content()")}} 関数
+
+> [!NOTE]
+> CSS ボックスサイズ指定モジュールでは、ボックスサイズ指定プロパティにまだ実装されていないサイズ指定値として、`stretch` と `contain` キーワードを導入しています。
+
+### 関数
+
+- [`fit-content()`](/ja/docs/Web/CSS/fit-content_function)
+
+### 用語集の用語
+
+- {{glossary("intrinsic size", "内在サイズ")}}
+
+## ガイド
+
+- [アスペクト比を理解する](/ja/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)
+
+  - : `aspect-ratio` プロパティについて学び、置換要素と非置換要素のアスペクト比について議論し、一般的なアスペクト比の使用例を検討します。
+
+- [CSS ボックスモデルの紹介](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+
+  - : CSS の基本概念のひとつであるボックスモデルについての解説です。このモデルは、CSS が要素をどのようにレイアウトするかを定義するもので、コンテンツ、パディング、境界、マージン領域などが含まれます。
+
+- [マージンの相殺をマスターする](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
+
+  - : 隣接する 2 つのマージンが 1 つに折りたたまれることがあります。この記事では、この現象がいつ、なぜ起こるのか、そしてどのように制御するのかについて説明します。
+
+- [視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)
+
+  - : 視覚整形モデルを説明します。
+
+- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+
+  - : 内在的なサイズ調整について、{{CSSxRef("flex-grow")}}、{{CSSxRef("flex-shrink")}}、{{CSSxRef("flex-basis")}} を使用して主軸に沿ってフレックスアイテムのサイズと柔軟性を制御する方法を理解する前段階として説明します。
+
+## 関連概念
+
+- [CSS 論理的プロパティ](/ja/docs/Web/CSS/CSS_logical_properties_and_values)モジュール
+  - {{CSSxRef("min-inline-size")}}
+  - {{CSSxRef("block-size")}}
+  - {{CSSxRef("inline-size")}}
+  - {{CSSxRef("max-block-size")}}
+  - {{CSSxRef("max-inline-size")}}
+  - {{CSSxRef("min-block-size")}}
+  - {{CSSxRef("min-inline-size")}}
+  - {{CSSxRef("margin-block")}}
+  - {{CSSxRef("margin-inline")}}
+  - {{CSSxRef("padding-block")}}
+  - {{CSSxRef("padding-inline")}}
+  - {{CSSxRef("border-block")}}
+  - {{CSSxRef("border-inline")}}
+  - {{CSSxRef("contain-intrinsic-block-size")}}
+  - {{CSSxRef("contain-intrinsic-inline-size")}}
+  - {{CSSxRef("overflow-block")}}
+  - {{CSSxRef("overflow-inline")}}
+  - {{CSSxRef("overscroll-behavior-block")}}
+  - {{CSSxRef("overscroll-behavior-inline")}}
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール
+  - {{cssxref("margin")}} 一括指定プロパティ
+  - {{cssxref("margin-bottom")}}
+  - {{cssxref("margin-left")}}
+  - {{cssxref("margin-right")}}
+  - {{cssxref("margin-top")}}
+  - {{cssxref("margin-trim")}}
+  - {{cssxref("padding")}} 一括指定プロパティ
+  - {{cssxref("padding-bottom")}}
+  - {{cssxref("padding-left")}}
+  - {{cssxref("padding-right")}}
+  - {{cssxref("padding-top")}}
+- [CSS 背景と境界](/ja/docs/Web/CSS/CSS_backgrounds_and_borders)モジュール
+  - {{cssxref("border")}} 一括指定プロパティ
+  - {{cssxref("border-width")}} 一括指定プロパティ
+  - {{cssxref("border-bottom-width")}}
+  - {{cssxref("border-left-width")}}
+  - {{cssxref("border-right-width")}}
+  - {{cssxref("border-top-width")}}
+- [CSS オーバーフロー](/ja/docs/Web/CSS/CSS_overflow)モジュール
+  - {{CSSxRef("overflow")}} 一括指定プロパティ
+  - {{CSSxRef("overflow-block")}}
+  - {{CSSxRef("overflow-clip-margin")}}
+  - {{CSSxRef("overflow-inline")}}
+  - {{CSSxRef("overflow-x")}}
+  - {{CSSxRef("overflow-y")}}
+  - {{CSSxRef("text-overflow")}}
+- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)モジュール
+  - {{CSSxRef("grid")}}
+  - {{CSSxRef("grid-auto-columns")}}
+  - {{CSSxRef("grid-auto-rows")}}
+  - {{CSSxRef("grid-template-columns")}}
+  - {{CSSxRef("grid-template-rows")}}
+  - {{CSSxRef("repeat")}}
+  - {{CSSxRef("minmax")}} 関数
+- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール
+  - {{CSSxRef("flex-basis")}}
+  - {{CSSxRef("flex")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## 関連情報
+
+- [CSS 表示](/ja/docs/Web/CSS/CSS_display)モジュール
+- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール
+- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)モジュール
+- [CSS 位置指定レイアウト](/ja/docs/Web/CSS/CSS_positioned_layout)モジュール
+- [CSS 断片化](/ja/docs/Web/CSS/CSS_fragmentation)モジュール
diff --git a/files/ja/web/css/css_cascade/index.md b/files/ja/web/css/css_cascade/index.md
index 03f8f96c8d6b2e..db0f396f1be40e 100644
--- a/files/ja/web/css/css_cascade/index.md
+++ b/files/ja/web/css/css_cascade/index.md
@@ -13,7 +13,8 @@ CSS の基本設計原則の一つに、ルールのカスケードがありま
 
 逆のことも起こりえます。プロパティの値を定義する宣言がないこともあります。 CSS カスケードモジュールは、これらの欠落した値を、継承またはプロパティの初期値からどのように設定するかを定義します。
 
-> **メモ:** ページコンテキストとそのマージンボックスの指定値を探すルールは、[CSS ページモジュール](/ja/docs/Web/CSS/CSS_paged_media)に記述されています。
+> [!NOTE]
+> ページコンテキストとそのマージンボックスの指定値を探すルールは、[CSS ページモジュール](/ja/docs/Web/CSS/CSS_paged_media)に記述されています。
 
 ## リファレンス
 
diff --git a/files/ja/web/css/css_colors/applying_color/index.md b/files/ja/web/css/css_colors/applying_color/index.md
index 53af55db5e4d4a..d3a0c21d67ac62 100644
--- a/files/ja/web/css/css_colors/applying_color/index.md
+++ b/files/ja/web/css/css_colors/applying_color/index.md
@@ -207,7 +207,8 @@ th {
 
 {{EmbedLiveSample("HSL 関数表記", 300, 260)}}
 
-> **メモ:** 色相の単位を省略した場合は度 (`deg`) と見なされます。
+> [!NOTE]
+> 色相の単位を省略した場合は度 (`deg`) と見なされます。
 
 ## 色の活用
 
@@ -303,7 +304,8 @@ th {
 }
 ```
 
-> **メモ:** こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は `text-decoration: underline wavy #88ff88` をサポートしていないからです。
+> [!NOTE]
+> こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は `text-decoration: underline wavy #88ff88` をサポートしていないからです。
 
 最後に、`.boxRight` クラスで右に描画されるボックス固有のプロパティを記述します。これは、先のボックスの隣に表示されるように、ボックスを右に浮かす設定をしています。そして、以下のように色を設定しています。
 
@@ -325,7 +327,8 @@ th {
 
 {{EmbedLiveSample("例: 色の選択", 525, 275)}}
 
-> **メモ:** macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。
+> [!NOTE]
+> macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。
 
 #### HTML
 
@@ -407,7 +410,8 @@ colorPicker.addEventListener(
 
 ベースカラーを決める際には、ウェブコンテンツから色を選択できるブラウザー拡張機能が特に便利です。拡張機能の中には、こういった作業を支援するために特別に設計されたものもあります。例えば、ウェブサイトの [ColorZilla](https://www.colorzilla.com/) はウェブから色を選ぶためのスポイトツールの拡張機能 ([Chrome](https://www.colorzilla.com/chrome) / [Firefox](https://www.colorzilla.com/firefox)) を提供しています。また、様々なサイズの領域やページの選択すた領域のピクセルの色の平均を取ることもできます。
 
-> **メモ:** 色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。
+> [!NOTE]
+> 色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。
 
 #### パレットを豊かにする
 
@@ -421,7 +425,8 @@ colorPicker.addEventListener(
 
 パレットをデザインする際には、これらのツールが典型的に生成する色に加えて、白 (またはほぼ白)、黒 (またはほぼ黒)、グレーの濃淡などの中核となる中性的な色を加える必要があることも念頭に置いてください。
 
-> **メモ:** 通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。
+> [!NOTE]
+> 通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。
 
 ### 色理論に関する参考文献
 
@@ -438,7 +443,8 @@ colorPicker.addEventListener(
 
 少なくとも[色覚異常](https://ja.wikipedia.org/wiki/色覚異常)についての基礎的な調査はしておいた方が良いでしょう。いくつかの種類がありますが、最も一般的なのは赤緑色覚異常で、赤と緑の色を区別しづらいものです。他にも、特定の色の違いを見分けることができないものから、全く色が見えないものまであります。
 
-> **メモ:** 最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。
+> [!NOTE]
+> 最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。
 
 色覚異常については、以下の記事をご覧ください。
 
diff --git a/files/ja/web/css/css_containment/container_size_and_style_queries/index.md b/files/ja/web/css/css_containment/container_size_and_style_queries/index.md
index 1dc5fc630f04c8..7b622d32731499 100644
--- a/files/ja/web/css/css_containment/container_size_and_style_queries/index.md
+++ b/files/ja/web/css/css_containment/container_size_and_style_queries/index.md
@@ -361,7 +361,8 @@ output {
 
 `unset` または `gibberish` を入力すると、 JavaScript は {{HTMLElement("body")}} の `style` を `--theme: unset` または `--theme: gibberish` に更新します。どちらも色ではありません。どちらも不正な色であり、無視されます。これは初期値が継承され、変更されないことを意味しています。 `style(-theme)` は偽を返し、 `style(-theme: red)` は真を返します。
 
-> **メモ:** カスタムプロパティを宣言するときは、 `@property` を {{cssxref("@property/syntax", "syntax")}} 記述子とともに使用するようにしてください。そうすれば、ブラウザーは正しく計算値を比較することができます。
+> [!NOTE]
+> カスタムプロパティを宣言するときは、 `@property` を {{cssxref("@property/syntax", "syntax")}} 記述子とともに使用するようにしてください。そうすれば、ブラウザーは正しく計算値を比較することができます。
 
 ### 入れ子のクエリー
 
diff --git a/files/ja/web/css/css_counter_styles/using_css_counters/index.md b/files/ja/web/css/css_counter_styles/using_css_counters/index.md
index c0b284c675288f..9a68c411954ed2 100644
--- a/files/ja/web/css/css_counter_styles/using_css_counters/index.md
+++ b/files/ja/web/css/css_counter_styles/using_css_counters/index.md
@@ -113,7 +113,8 @@ counter-reset: reversed(section);
 
 {{cssxref("counter-increment")}} に負の値を指定すると、カウンター値が減少します。
 
-> **メモ:** 逆行ではないカウンターを減少させるには、 {{cssxref("counter-increment")}} を使うこともできます。
+> [!NOTE]
+> 逆行ではないカウンターを減少させるには、 {{cssxref("counter-increment")}} を使うこともできます。
 > 逆行カウンターを使用する主な利点は、既定の初期値と、 `list-item` カウンターが自動的に逆行カウンターを減少させてくれることです。
 
 ### list-item カウンター
diff --git a/files/ja/web/css/css_display/block_formatting_context/index.md b/files/ja/web/css/css_display/block_formatting_context/index.md
index f39c922c1b4212..9e7dd03d09b09e 100644
--- a/files/ja/web/css/css_display/block_formatting_context/index.md
+++ b/files/ja/web/css/css_display/block_formatting_context/index.md
@@ -32,7 +32,8 @@ l10n:
 - 外部の浮動要素を追いやります。
 - [マージンの相殺](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)を抑止します。
 
-> **メモ:** フレックス／グリッドコンテナー ({{ cssxref("display") }}: flex/grid/inline-flex/inline-grid) は新しいフレックス／グリッド整形コンテキストを確立します。これは、レイアウト以外はブロック整形コンテキストに類似しています。フレックス／グリッドコンテナーの中に利用できる浮動子要素はありませんが、外部の浮動要素を除外したり、マージンの折りたたみを抑制したりすることはできます。
+> [!NOTE]
+> フレックス／グリッドコンテナー ({{ cssxref("display") }}: flex/grid/inline-flex/inline-grid) は新しいフレックス／グリッド整形コンテキストを確立します。これは、レイアウト以外はブロック整形コンテキストに類似しています。フレックス／グリッドコンテナーの中に利用できる浮動子要素はありませんが、外部の浮動要素を除外したり、マージンの折りたたみを抑制したりすることはできます。
 
 ## 例
 
diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
index 995e564448a971..f01a57d592da5e 100644
--- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
+++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
@@ -73,7 +73,8 @@ CSS の gap プロパティは `row-gap` と `column-gap` の一括指定で、
 
 次のライブ例では、折り返しのないフレックスコンテナーを使用しています。3 番目のアイテムは他のアイテムよりも内容物が多いのですが、 `visibility: collapse` に設定されているため、フレックスコンテナーはこのアイテムを表示するために必要な高さの*支柱*を保持しています。CSS から `visibility: collapse` を削除したり、値を `visible` に変更したりすると、アイテムが現れ、折り畳まれていないアイテムに空間が再分配されますが、フレックスコンテナーの高さは変わりません。
 
-> **メモ:** Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。
+> [!NOTE]
+> Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。
 
 {{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}
 
diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md
index b09d062e41d208..9dd22291616187 100644
--- a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md
+++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md
@@ -44,7 +44,8 @@ l10n:
 
 > 「文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の \*-reverse 値をソース順序の修正の代用として利用してはいけません。」
 
-> **メモ:** 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。
+> [!NOTE]
+> 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。
 
 以下の例ではリンクからリンクにタブ移動した際に、どれが強調されているかわかりやすいように focus スタイルを加えています。`flex-direction` を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。
 
diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
index 5d28bc5965d0bd..8e0dc96f774f75 100644
--- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
+++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
@@ -9,7 +9,8 @@ l10n:
 
 この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。
 
-> **メモ:** CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。
+> [!NOTE]
+> CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。
 
 ## ボックス配置モジュール
 
@@ -99,7 +100,8 @@ CSS の `writing-mode` プロパティを文書全体の書字方向を変更す
 
 レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。
 
-> **警告:** 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。
+> [!WARNING]
+> 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。
 
 また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。
 
diff --git a/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
index 957293509ede3f..07211a79c6af42 100644
--- a/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
+++ b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
@@ -55,7 +55,8 @@ slug: Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow
 
 マージンの相殺については、[マージンの相殺](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)の記事で詳しく解説しています。
 
-> **メモ:** マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。
+> [!NOTE]
+> マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。
 >
 > ![](box-model.png)
 
diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md
index 23552b6cef8deb..a7e658a1413fe8 100644
--- a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md
+++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/CSS_fonts/OpenType_fonts_guide
 
 合字や lining 字形 (小文字のように見える 'oldstyle' とは対照的に、均等に並ぶ数字) のような広範な特性セットに加えて、スタイリスティックセット (一緒に使用することを意図した字形のいくつかの特定の異体字を含む場合がある)、代替字形 (文字 'a' の 1 つまたは複数の異体字の場合がある)、あるいは東アジアの言語のための言語固有の変更など、非常に特殊なものもあります。後者の場合、これらの変更は、その言語を適切に表現するために実際に必要なものであり、他のほとんどの OpenType 機能のようなスタイル上の好みよりも重要です。
 
-> **警告:** フォントの特性を利用するために多くの CSS 属性が定義されていますが、残念ながらその多くは完全には実装されていません。これらはすべて定義されており、ここで紹介されていますが、多くは下位レベルの {{cssxref("font-feature-settings")}} プロパティでのみ動作します。両方の方法で動作するように CSS を記述することは可能ですが、これは面倒なことになります。すべてに `font-feature-settings` を使う場合の問題点は、個々の特性を変更するたびに、文字列全体を再定義しなければならないことです (可変フォントを {{cssxref("font-variation-settings")}} で操作するのと似ています)。
+> [!WARNING]
+> フォントの特性を利用するために多くの CSS 属性が定義されていますが、残念ながらその多くは完全には実装されていません。これらはすべて定義されており、ここで紹介されていますが、多くは下位レベルの {{cssxref("font-feature-settings")}} プロパティでのみ動作します。両方の方法で動作するように CSS を記述することは可能ですが、これは面倒なことになります。すべてに `font-feature-settings` を使う場合の問題点は、個々の特性を変更するたびに、文字列全体を再定義しなければならないことです (可変フォントを {{cssxref("font-variation-settings")}} で操作するのと似ています)。
 
 ## フォントの特性の有無の確認
 
@@ -37,7 +38,8 @@ slug: Web/CSS/CSS_fonts/OpenType_fonts_guide
 
 考慮すべき特性がいくつかあります。ここでは、W3C の仕様書に記載されている主な属性やオプションに沿ってグループ化し、説明しています。
 
-> **メモ:** 以下の例では、プロパティといくつかの組み合わせ例を、同等の低水準構文とともに示しています。ブラウザーの実装に不整合があるため、完全には一致しないかもしれませんが、多くの場合、一つ目の例は二つ目の例と一致します。表示されている書体は、Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script、Kokoro です (すべて入手可能で無料で使用でき、ほとんどは Google Fonts やその他のサービスで提供されています)。
+> [!NOTE]
+> 以下の例では、プロパティといくつかの組み合わせ例を、同等の低水準構文とともに示しています。ブラウザーの実装に不整合があるため、完全には一致しないかもしれませんが、多くの場合、一つ目の例は二つ目の例と一致します。表示されている書体は、Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script、Kokoro です (すべて入手可能で無料で使用でき、ほとんどは Google Fonts やその他のサービスで提供されています)。
 
 ### カーニング ({{cssxref("font-kerning")}})
 
@@ -122,7 +124,8 @@ OpenType 特性の一般的な使用例の 1 つに、適切なスモールキ
 
 {{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
 
-> **メモ:** これらのグリフはフォントサンプルからコピーされたもので、散文を意図したものではありません。
+> [!NOTE]
+> これらのグリフはフォントサンプルからコピーされたもので、散文を意図したものではありません。
 
 ### フォントの異体字の一括指定 ({{Cssxref("font-variant")}})
 
diff --git a/files/ja/web/css/css_fonts/variable_fonts_guide/index.md b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md
index daabcaad67c88e..2f090165e15f30 100644
--- a/files/ja/web/css/css_fonts/variable_fonts_guide/index.md
+++ b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_fonts/Variable_fonts_guide
 
 **可変フォント** (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、可変フォントの使用を開始するために知っておく必要があるすべての内容を説明します。
 
-> **メモ:** OS で可変フォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS は可変フォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールで可変フォントを使用できません。
+> [!NOTE]
+> OS で可変フォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS は可変フォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールで可変フォントを使用できません。
 
 ## 可変フォント: 何であるか、何が違うのか
 
@@ -78,7 +79,8 @@ font-variation-settings: "wght" 375;
 
 幅 (`wdth` タグで表される) は、文字の幅をどれだけ狭くするか、あるいは広くするか (植字用語でいう condensed または extended) というデザイン上の軸を定義します。これは通常、CSS で {{cssxref("font-stretch")}} プロパティを使用して設定され、値は「通常」(100%) の上または下のパーセント値で表されます。与えられた数値がフォントにエンコードされた範囲外である場合、ブラウザーは許容される最も近い値でフォントをレンダリングしなければなりません。
 
-> **メモ:** % 記号は `font-variation-settings` を使用する上では不要です。
+> [!NOTE]
+> % 記号は `font-variation-settings` を使用する上では不要です。
 
 ```css
 font-stretch: 115%;
@@ -190,7 +192,8 @@ font-variation-settings: "GRAD" 88;
 }
 ```
 
-> **メモ:** この例では、上限の度数に特定の値が設定されていませんが、軸があることを示すことで、ブラウザーが直立かイタリックかを判断できるようになっています (イタリックはオンかオフしかないことを思い出してください)。
+> [!NOTE]
+> この例では、上限の度数に特定の値が設定されていませんが、軸があることを示すことで、ブラウザーが直立かイタリックかを判断できるようになっています (イタリックはオンかオフしかないことを思い出してください)。
 
 #### イタリック体のみを含み、直立文字を含まないフォントの例
 
@@ -216,7 +219,8 @@ font-variation-settings: "GRAD" 88;
 }
 ```
 
-> **メモ:** すべてのブラウザーがフォント指定形式の完全な構文を実装しているわけではないので、慎重にテストしてください。可変フォントに対応しているブラウザーはすべて、形式を format-variations ではなく、ファイル形式だけに設定してもレンダリングされますが (例：`woff2-variations` ではなく `woff2`)、可能であれば適切な構文を使用することをお勧めします。
+> [!NOTE]
+> すべてのブラウザーがフォント指定形式の完全な構文を実装しているわけではないので、慎重にテストしてください。可変フォントに対応しているブラウザーはすべて、形式を format-variations ではなく、ファイル形式だけに設定してもレンダリングされますが (例：`woff2-variations` ではなく `woff2`)、可能であれば適切な構文を使用することをお勧めします。
 
 > **メモ:** `font-weight`, `font-stretch`, `font-style` に値の範囲を指定した場合は、適切な属性 (すなわち `font-weight` や `font-stretch`) を使用していると、ブラウザーがその範囲外の軸をレンダリングしようとしないようにしますが、`font-variation-settings` で無効な値を指定した場合には、それを阻止することはできませんので注意して使用してください。
 
diff --git a/files/ja/web/css/css_functions/index.md b/files/ja/web/css/css_functions/index.md
index bbcd8e948595cf..c1684e0245a6e2 100644
--- a/files/ja/web/css/css_functions/index.md
+++ b/files/ja/web/css/css_functions/index.md
@@ -22,7 +22,8 @@ selector {
 
 関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によっては、複数の引数がカンマで区切られていたり、空白を使用していたりします。
 
-> **メモ:** CSS 値関数はプロパティ値として使用しますので、擬似クラスと混同しないでください。[関数形式の擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#関数擬似クラス)、[言語擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#言語擬似クラス)、または一部の[ツリー構造擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#ツリー構造擬似クラス)は引数を必要としますが、値関数ではありません。[条件付きアットルール](/ja/docs/Web/CSS/At-rule#conditional_group_rules)も値関数ではありません。括弧はグループ化のために使用しています。
+> [!NOTE]
+> CSS 値関数はプロパティ値として使用しますので、擬似クラスと混同しないでください。[関数形式の擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#関数擬似クラス)、[言語擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#言語擬似クラス)、または一部の[ツリー構造擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#ツリー構造擬似クラス)は引数を必要としますが、値関数ではありません。[条件付きアットルール](/ja/docs/Web/CSS/At-rule#conditional_group_rules)も値関数ではありません。括弧はグループ化のために使用しています。
 
 ## 座標変換関数
 
diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index 0bf0cce530134d..9ff31d4a8d98f6 100644
--- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -478,7 +478,8 @@ CSS グリッドレイアウトについて学び、使っていく中で、こ
 
 {{ EmbedLiveSample('Positioning_items_against_lines', '230', '450') }}
 
-> **メモ:** Firefox の開発者ツールで[グリッドインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。
+> [!NOTE]
+> Firefox の開発者ツールで[グリッドインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。
 
 ### 線による配置の一括指定
 
@@ -529,7 +530,8 @@ _グリッドセル_ は、グリッド上の最も小さな単位です。コ
 }
 ```
 
-> **メモ:** グリッドが最初にブラウザーに実装されたとき、 {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} に `grid-` の接頭辞がつき、それぞれ `grid-column-gap`, `grid-row-gap`, `grid-gap` のようになっていました。
+> [!NOTE]
+> グリッドが最初にブラウザーに実装されたとき、 {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} に `grid-` の接頭辞がつき、それぞれ `grid-column-gap`, `grid-row-gap`, `grid-gap` のようになっていました。
 >
 > ブラウザーはすべて接頭辞なしの値に対応しましたが、接頭辞付きの版も安全に利用できるよう保守されるでしょう。
 
diff --git a/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
index 44be6c68855eeb..30485220c7e078 100644
--- a/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
+++ b/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
@@ -464,7 +464,8 @@ l10n:
 
 CSS Grid 仕様書では、{{cssxref("column-gap")}} と {{cssxref("row-gap")}} プロパティを使って、列と行のトラックの間に溝を追加する機能があります。これらは、段組みレイアウトにおける {{cssxref("column-gap")}} プロパティと同様の働きをする間隔を指定します。
 
-> **メモ:** グリッドがブラウザーに初めて搭載されたとき、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}、{{cssxref("gap")}} プロパティには、それぞれ `grid-` という接頭辞が付けられ、`grid-column-gap`、`grid-row-gap`、`grid-gap` となっていました。
+> [!NOTE]
+> グリッドがブラウザーに初めて搭載されたとき、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}、{{cssxref("gap")}} プロパティには、それぞれ `grid-` という接頭辞が付けられ、`grid-column-gap`、`grid-row-gap`、`grid-gap` となっていました。
 >
 > ブラウザーのレンダリングエンジンはこの接頭辞を削除するように更新されていますが、接頭辞付きのバージョンは別名として維持されるため、安全に使用することができます。
 
diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md
index 00312da21e12f5..53cad2bf810782 100644
--- a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md
+++ b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
 
 **画像スプライト**は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1 枚の画像として送信した方が、メモリーや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。
 
-> **メモ:** HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。
+> [!NOTE]
+> HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。
 
 ## 実装
 
diff --git a/files/ja/web/css/css_media_queries/printing/index.md b/files/ja/web/css/css_media_queries/printing/index.md
index 03c3b87e9bc8b2..f7f9cd6645dba5 100644
--- a/files/ja/web/css/css_media_queries/printing/index.md
+++ b/files/ja/web/css/css_media_queries/printing/index.md
@@ -123,7 +123,8 @@ slug: Web/CSS/CSS_media_queries/Printing
 </html>
 ```
 
-> **メモ:** 古いバージョン Internet Explorer は、非表示の {{HTMLElement("iframe")}} の印刷することができません。
+> [!NOTE]
+> 古いバージョン Internet Explorer は、非表示の {{HTMLElement("iframe")}} の印刷することができません。
 
 ## 関連情報
 
diff --git a/files/ja/web/css/css_media_queries/using_media_queries/index.md b/files/ja/web/css/css_media_queries/using_media_queries/index.md
index 14783043b2af37..39092206177bca 100644
--- a/files/ja/web/css/css_media_queries/using_media_queries/index.md
+++ b/files/ja/web/css/css_media_queries/using_media_queries/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 - {{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの [HTML](/ja/docs/Web/HTML) 要素で `media=` 属性を付けて特定のメディアを対象とする。
 - [メディアの状態の検査と監視](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)をするために、[JavaScript](/ja/docs/Web/JavaScript) で {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用する
 
-> **メモ:** このページの例では説明のために CSS の `@media` を使用していますが、基本構文はすべての種類のメディアクエリーで共通です。
+> [!NOTE]
+> このページの例では説明のために CSS の `@media` を使用していますが、基本構文はすべての種類のメディアクエリーで共通です。
 
 ## 構文
 
@@ -93,7 +94,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 `and` 演算子は、複数のメディア特性を 1 つのメディアクエリーに結合することもできます。一方で `not` 演算子は、メディアクエリーを反転し、基本的に普通の意味とは逆になります。
 `only` 演算子は古いブラウザーでスタイルが適用されるのを防止します。
 
-> **メモ:** 多くの場合、 `all` メディア種別が他のタイプが指定されない場合に既定で使用されます。
+> [!NOTE]
+> 多くの場合、 `all` メディア種別が他のタイプが指定されない場合に既定で使用されます。
 > しかし、 `not` または `only` 演算子を使用する場合は、メディア種別を明示的に指定する必要があります。
 
 ### 複数の種別または特性の組み合わせ
@@ -167,7 +169,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリーを作れるよう構文が拡張されました。
 Level 4 はこのようなクエリーを書くために*範囲コンテキスト*を追加しています。例えば、幅について `max-` の特性を使用する場合は、以下のように書くことができます。
 
-> **メモ:** Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は [`@media` ブラウザー互換性一覧表](/ja/docs/Web/CSS/@media#ブラウザーの互換性)を参照してください。
+> [!NOTE]
+> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は [`@media` ブラウザー互換性一覧表](/ja/docs/Web/CSS/@media#ブラウザーの互換性)を参照してください。
 
 ```css
 @media (max-width: 30em) { ... }
diff --git a/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md b/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md
index 1b3740d38acdf8..84adea1269f328 100644
--- a/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md
+++ b/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_multicol_layout/Spanning_balancing_columns
 
 このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。
 
-> **メモ:** このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。
+> [!NOTE]
+> このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。
 
 ## 段抜き
 
diff --git a/files/ja/web/css/css_nesting/using_css_nesting/index.md b/files/ja/web/css/css_nesting/using_css_nesting/index.md
index 2ab3fd4ae10b08..e0cddfafb1f3bd 100644
--- a/files/ja/web/css/css_nesting/using_css_nesting/index.md
+++ b/files/ja/web/css/css_nesting/using_css_nesting/index.md
@@ -13,7 +13,8 @@ CSS 入れ子は、 CSS プリプロセッサーで事前にコンパイルさ
 
 このガイドでは、CSSで入れ子を配置するさまざまな方法を示します。
 
-> **メモ:** 仕様の初期のバージョンでは、 [`&` 入れ子セレクター](/ja/docs/Web/CSS/Nesting_selector)がないと、[型セレクター](/ja/docs/Web/CSS/Type_selectors) を入れ子にすることができませんでした。これは更新され、`&` 入れ子セレクタは必要なくなりました。執筆時点で（2023 年 8 月）、 Firefox は新しいバージョンの仕様に対応していますが、 Chrome と Safariは 古いバージョンの仕様に対応しており、型セレクターの入れ子には `&` 入れ子セレクターを使用する必要があります。
+> [!NOTE]
+> 仕様の初期のバージョンでは、 [`&` 入れ子セレクター](/ja/docs/Web/CSS/Nesting_selector)がないと、[型セレクター](/ja/docs/Web/CSS/Type_selectors) を入れ子にすることができませんでした。これは更新され、`&` 入れ子セレクタは必要なくなりました。執筆時点で（2023 年 8 月）、 Firefox は新しいバージョンの仕様に対応していますが、 Chrome と Safariは 古いバージョンの仕様に対応しており、型セレクターの入れ子には `&` 入れ子セレクターを使用する必要があります。
 
 ## 子セレクター
 
@@ -55,7 +56,8 @@ parent child {
 
 この例では、 `&` 入れ子セレクターを使用しない場合と使用する場合で、 `<label>` 内の `<input>` は `<label>` の兄弟である `<input>` と異なる形でスタイル設定されています。これは `&` 入れ子セレクターを除外した場合の影響を示しています。
 
-> **メモ:** この例は、入れ子仕様の以前の仕様書と現在の仕様書を実装したブラウザーで出力が異なることを示しています。 Chrome や Safari で実装されている 2023 年 8 月以前の入れ子仕様では、 `&` の結合子が必須となっています。ブラウザーが現在の仕様に対応している場合、どちらの例も 2 番目の例と一致します。
+> [!NOTE]
+> この例は、入れ子仕様の以前の仕様書と現在の仕様書を実装したブラウザーで出力が異なることを示しています。 Chrome や Safari で実装されている 2023 年 8 月以前の入れ子仕様では、 `&` の結合子が必須となっています。ブラウザーが現在の仕様に対応している場合、どちらの例も 2 番目の例と一致します。
 
 #### 入れ子セレクターなし
 
@@ -402,7 +404,8 @@ h2 {
 }
 ```
 
-> **警告:** これは CSS の入れ子ではできません。[結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators)を用いない場合、入れ子のセレクターは[要素型セレクター](/ja/docs/Web/CSS/Type_selectors)として扱われます。連結を許可すると、これが壊れてしまいます。
+> [!WARNING]
+> これは CSS の入れ子ではできません。[結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators)を用いない場合、入れ子のセレクターは[要素型セレクター](/ja/docs/Web/CSS/Type_selectors)として扱われます。連結を許可すると、これが壊れてしまいます。
 
 [複合セレクター](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector)では、要素型セレクターを最初に入力しなければなりません。 `&Element` （[要素型セレクター](/ja/docs/Web/CSS/Type_selectors)）を書くと、 CSS セレクターとセレクターブロック全体が無効になります。要素型セレクターを最初に入力しなければならないので、複合セレクターは `Element&` と書かなければなりません。
 
diff --git a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
index 4b7ef49149a007..b05a938ef84785 100644
--- a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
+++ b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
@@ -45,7 +45,8 @@ l10n:
 - 重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。
 - 重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。
 
-> **メモ:** 重ね合わせコンテキストを作れるのは一部の要素に限定されるため、重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。それ自身の重ね合わせコンテキストを作らない要素は、その親の重ね合わせコンテキストに*同化される*、と言えます。
+> [!NOTE]
+> 重ね合わせコンテキストを作れるのは一部の要素に限定されるため、重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。それ自身の重ね合わせコンテキストを作らない要素は、その親の重ね合わせコンテキストに*同化される*、と言えます。
 
 ## 例
 
diff --git a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
index 5c84f7856e3ec6..c558f775d10936 100644
--- a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
+++ b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
@@ -32,7 +32,8 @@ DIV #2 に正の (ゼロでなく auto でもない) z-index 値が代入され
   - DIV #2 (`z-index`: 1)
   - DIV #4 (`z-index`: 2)
 
-> **メモ:** DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。
+> [!NOTE]
+> DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。
 
 ## 例
 
diff --git a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
index 511312ef315ef2..71234ff15fe845 100644
--- a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
+++ b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
@@ -24,7 +24,8 @@ DIV #2 (`z-index`: 2) が DIV #3 (`z-index`: 1) よりも上にあることが
 
     - DIV #4 (`z-index`: 10)
 
-> **メモ:** 一般に、 HTML の階層構造と重ね合わせコンテキストの階層構造は異なるということを覚えておくと良いでしょう。重ね合わせコンテキストの階層構造では、重ね合わせコンテキストを作らない要素はその親要素に吸収されます。
+> [!NOTE]
+> 一般に、 HTML の階層構造と重ね合わせコンテキストの階層構造は異なるということを覚えておくと良いでしょう。重ね合わせコンテキストの階層構造では、重ね合わせコンテキストを作らない要素はその親要素に吸収されます。
 
 ## 例
 
diff --git a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
index 7c18cbad416897..06b5a0d2b887af 100644
--- a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
+++ b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
@@ -43,7 +43,8 @@ l10n:
 
 この問題を回避するには、異なるレベル間のメニューの重なりを取り除くか、独自 (で異なった) `z-index` 値を クラスセレクターではなく ID セレクターを通じて設定するか、 HTML の階層構造をなくすかしてください。
 
-> **メモ:** ソースコードを見ると、絶対位置指定されたコンテナーとなる要素内に、第 2 階層と第 3 階層のメニューを作る DIV があることがわかります。この方法は、一度にすべてをグループ化し、位置づけするのに便利です。
+> [!NOTE]
+> ソースコードを見ると、絶対位置指定されたコンテナーとなる要素内に、第 2 階層と第 3 階層のメニューを作る DIV があることがわかります。この方法は、一度にすべてをグループ化し、位置づけするのに便利です。
 
 ## 例
 
@@ -164,4 +165,5 @@ div.lev3 {
 - [重ね合わせコンテキストの例 1](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2 階層の HTML 構造で、最終階層の `z-index`
 - [重ね合わせコンテキストの例 2](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2 階層の HTML 構造、全レベルの `z-index`
 
-> **メモ:** 実は、サンプル画像は間違っているようです。第 2 階層の 2 つ目が第 3 階層に重複しているのは、第 2 階層が半透明であるため、新しい重ね合わせコンテキストが作成されるからです。基本的に、このサンプルページ全体が誤っており、誤解を招きます。
+> [!NOTE]
+> 実は、サンプル画像は間違っているようです。第 2 階層の 2 つ目が第 3 階層に重複しているのは、第 2 階層が半透明であるため、新しい重ね合わせコンテキストが作成されるからです。基本的に、このサンプルページ全体が誤っており、誤解を招きます。
diff --git a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
index b5a9042a5a3ef5..5be56f0c742f7e 100644
--- a/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
+++ b/files/ja/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
@@ -16,7 +16,8 @@ l10n:
 
 位置指定要素、位置指定なしの要素についての説明は、[位置指定の種類](/ja/docs/Web/CSS/position#位置の種類)を参照してください。
 
-> **メモ:** 位置指定なしの要素（下記の例の DIV #4）の `opacity` の値を変更すると、その要素の背景と境界が、浮動要素や位置指定要素の上に飛び出し、おかしな結果になります。これは、仕様書の中で、 `opacity` の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです（[What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) を参照してください）。
+> [!NOTE]
+> 位置指定なしの要素（下記の例の DIV #4）の `opacity` の値を変更すると、その要素の背景と境界が、浮動要素や位置指定要素の上に飛び出し、おかしな結果になります。これは、仕様書の中で、 `opacity` の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです（[What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) を参照してください）。
 
 ## 例
 
diff --git a/files/ja/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md b/files/ja/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
index e1f33988e3d37d..cacdd7521f4750 100644
--- a/files/ja/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
+++ b/files/ja/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
@@ -19,7 +19,7 @@ l10n:
 | レイヤー X     | `z-index` が正の値のレイヤー |
 | 最上位レイヤー | 観ている人に最も近い         |
 
-> **メモ:**
+> [!NOTE]
 >
 > - `z-index` プロパティが定義されていなければ、要素は既定の描画レイヤー 0 (ゼロ) に描画されます。
 > - 同じ `z-index` 値を持つ要素が複数あれば (＝同じレイヤー上にある場合)、 [z-index なしの重ね合わせ](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index)で説明した重ね合わせ規則が当てはまります。
diff --git a/files/ja/web/css/css_scoping/index.md b/files/ja/web/css/css_scoping/index.md
index 793d080d119a9f..edebf576394aa5 100644
--- a/files/ja/web/css/css_scoping/index.md
+++ b/files/ja/web/css/css_scoping/index.md
@@ -69,7 +69,8 @@ CSS スタイルには、グローバルスコープと、{{Glossary("shadow tre
   - {{DOMxRef("HTMLTemplateElement")}} インターフェイス
   - {{DOMxRef("ShadowRoot")}} インターフェイス
 
-> **メモ:** セレクターが一致する参照点（またはスコープ）となる要素を表す {{CSSXref(":scope")}} 擬似クラスは、名前とは裏腹に、[セレクター](/ja/docs/Web/CSS/CSS_selectors)モジュールで定義されています。これは CSS スコープモジュールとは無関係で、シャドウ DOM のスコープ機構に関連するスコープに焦点を当てています。
+> [!NOTE]
+> セレクターが一致する参照点（またはスコープ）となる要素を表す {{CSSXref(":scope")}} 擬似クラスは、名前とは裏腹に、[セレクター](/ja/docs/Web/CSS/CSS_selectors)モジュールで定義されています。これは CSS スコープモジュールとは無関係で、シャドウ DOM のスコープ機構に関連するスコープに焦点を当てています。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/css_scroll_snap/index.md b/files/ja/web/css/css_scroll_snap/index.md
index b202af5befc7e4..a596f4367bfd87 100644
--- a/files/ja/web/css/css_scroll_snap/index.md
+++ b/files/ja/web/css/css_scroll_snap/index.md
@@ -53,4 +53,5 @@ slug: Web/CSS/CSS_scroll_snap
 
 個々のプロパティページにて、それぞれのプロパティのブラウザー互換性情報を詳しく説明しています。
 
-> **メモ:** このモジュールの以前のバージョンはスクロールスナップ点と呼ばれており、非推奨になりました。CSS スクロールスナップが現在の実装です。新旧の仕様の対応方法の概要については、[ブラウザーの互換性のガイド](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)を参照してください。
+> [!NOTE]
+> このモジュールの以前のバージョンはスクロールスナップ点と呼ばれており、非推奨になりました。CSS スクロールスナップが現在の実装です。新旧の仕様の対応方法の概要については、[ブラウザーの互換性のガイド](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)を参照してください。
diff --git a/files/ja/web/css/css_syntax/error_handling/index.md b/files/ja/web/css/css_syntax/error_handling/index.md
index 03086b7b8f607e..92d075bb34327a 100644
--- a/files/ja/web/css/css_syntax/error_handling/index.md
+++ b/files/ja/web/css/css_syntax/error_handling/index.md
@@ -121,13 +121,15 @@ p {
 
 この例では、各ブロックの最後の宣言 — `display: flex;` と `border-radius: 50%;` — は、すべてのブラウザーで有効です。[カスケード](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#ソース順)には[出現順](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)ルールがあるため、ブラウザーは理解できる接頭辞の宣言を適用し、それらの値を標準の接頭辞なしバージョンで上書きします。
 
-> **メモ:** 接頭辞の付いたプロパティやプロパティ値を含めることは、可能な限り避けてください。どうしても使用する必要がある場合は、接頭辞付きバージョンを接頭辞なしバージョンの前に宣言してください。
+> [!NOTE]
+> 接頭辞の付いたプロパティやプロパティ値を含めることは、可能な限り避けてください。どうしても使用する必要がある場合は、接頭辞付きバージョンを接頭辞なしバージョンの前に宣言してください。
 
 ### 末尾の自動終了におけるエラー
 
 ルール、宣言、関数、文字列、コメントが終了せずにスタイルシートが終了すると、パーサーは閉じていないものを自動的にすべて閉じます。
 
-> **メモ:** これは、外部スタイルシート、 HTML の {{HTMLElement("style")}} 要素内のセレクターブロック、[`style`](/ja/docs/Web/HTML/Global_attributes/style) 属性内のインラインルールに当てはまります。
+> [!NOTE]
+> これは、外部スタイルシート、 HTML の {{HTMLElement("style")}} 要素内のセレクターブロック、[`style`](/ja/docs/Web/HTML/Global_attributes/style) 属性内のインラインルールに当てはまります。
 
 最後のセミコロンからスタイルシートの終わりまでの内容が有効であれば、たとえ不完全であっても、 CSS は正常に構文解析されます。例えば、 {{htmlelement("style")}} を閉じる前に `@keyframe` 宣言を閉じなかった場合でも、アニメーションは有効になります。
 
diff --git a/files/ja/web/css/css_syntax/index.md b/files/ja/web/css/css_syntax/index.md
index 5e906c1f5e165c..7d5a24c9b55786 100644
--- a/files/ja/web/css/css_syntax/index.md
+++ b/files/ja/web/css/css_syntax/index.md
@@ -15,7 +15,8 @@ l10n:
 
 - なし
 
-> **メモ:** このモジュールは、 {{cssxref("@charset")}} は実際のアットルールではなく、スタイルシートが文法チェックされるときに省略されるべき認識されない古いルールであると明示しています。
+> [!NOTE]
+> このモジュールは、 {{cssxref("@charset")}} は実際のアットルールではなく、スタイルシートが文法チェックされるときに省略されるべき認識されない古いルールであると明示しています。
 
 ## リファレンス
 
diff --git a/files/ja/web/css/css_transforms/index.md b/files/ja/web/css/css_transforms/index.md
index 31aed8cb3f0d06..20cdc298299ffe 100644
--- a/files/ja/web/css/css_transforms/index.md
+++ b/files/ja/web/css/css_transforms/index.md
@@ -23,7 +23,8 @@ l10n:
 
 上の例の立方体は 6 つの `<div>` 要素で構成されており、すべて CSS でスタイル設定されて立方体の面を構成しています。立方体は 2D や 3D のキャンバスコンテキストを使用して描画されていないので、**他の DOM 要素を検査するのと同じように**、ブラウザーの開発者ツールで立方体の面を検査することができます。ブラウザー開発者ツールの要素ピッカーを使用して、立方体の位置と回転を変換しながら、立方体のさまざまな面を調べてみてください。
 
-> **メモ:** 3D 回転を含む座標変換を適用する場合、順序はが座標変換結果に影響します。上の例では、座標変換は平行移動、変倍、回転、歪めを行います。回転は X → Y → Z の順に適用されます。
+> [!NOTE]
+> 3D 回転を含む座標変換を適用する場合、順序はが座標変換結果に影響します。上の例では、座標変換は平行移動、変倍、回転、歪めを行います。回転は X → Y → Z の順に適用されます。
 
 [この例のソースを GitHub で確認](https://github.com/mdn/css-examples/blob/main/modules/transforms.html)できます。
 
diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.md b/files/ja/web/css/css_transforms/using_css_transforms/index.md
index 13d3f72e22cf85..1579bfc635e618 100644
--- a/files/ja/web/css/css_transforms/using_css_transforms/index.md
+++ b/files/ja/web/css/css_transforms/using_css_transforms/index.md
@@ -11,7 +11,8 @@ l10n:
 
 CSS 座標変換は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。座標変換には、回転 (rotation)、歪め (skewing)、変倍 (scaling)、平行移動 (translation) などがあり、平面と 3D 空間の両方で行われます。
 
-> **警告:** 座標変換可能な要素だけが `transform` することができます。つまり、レイアウトが CSS [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)によって管理されるすべての要素です。ただし、[置換ではないインラインボックス](/ja/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)は除きます。
+> [!WARNING]
+> 座標変換可能な要素だけが `transform` することができます。つまり、レイアウトが CSS [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)によって管理されるすべての要素です。ただし、[置換ではないインラインボックス](/ja/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)は除きます。
 
 ## CSS 座標変換のプロパティ
 
diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.md b/files/ja/web/css/css_transitions/using_css_transitions/index.md
index 82f49a15d363bb..7d73ddfe8069b0 100644
--- a/files/ja/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/ja/web/css/css_transitions/using_css_transitions/index.md
@@ -279,7 +279,8 @@ function showHide() {
 
 ## JavaScript の例
 
-> **メモ:** 次のような場合の直後にトランジションを使用する場合は注意してください。
+> [!NOTE]
+> 次のような場合の直後にトランジションを使用する場合は注意してください。
 >
 > - `.appendChild()` を使用して DOM に要素を追加したとき
 > - 要素の `display: none;` プロパティを外したとき
diff --git a/files/ja/web/css/cssom_view/coordinate_systems/index.md b/files/ja/web/css/cssom_view/coordinate_systems/index.md
index e380e5ef83e37c..8d63a94fc15891 100644
--- a/files/ja/web/css/cssom_view/coordinate_systems/index.md
+++ b/files/ja/web/css/cssom_view/coordinate_systems/index.md
@@ -19,7 +19,8 @@ l10n:
 
 3つ目の次元を用いてオブジェクトを前から後ろに重ねる場合、 Z 軸を使用します。 Z 軸は、視聴者から画面の表面へと向かいます。CSS の z-index 属性は、位置を指定した要素がこの軸のどこに位置するかに影響し、見る人から遠ざかったり近づいたりする効果を与えます。
 
-> **メモ:** 実際には、これらの座標系の定義や方向は、 {{cssxref("transform")}} などの CSS プロパティを使って変更することができます。しかし、ここでは標準的な座標系についてだけ説明します。
+> [!NOTE]
+> 実際には、これらの座標系の定義や方向は、 {{cssxref("transform")}} などの CSS プロパティを使って変更することができます。しかし、ここでは標準的な座標系についてだけ説明します。
 
 ## 標準 CSSOM 座標系
 
diff --git a/files/ja/web/css/display-inside/index.md b/files/ja/web/css/display-inside/index.md
index a0b3862214d626..b37e7afba9e7c6 100644
--- a/files/ja/web/css/display-inside/index.md
+++ b/files/ja/web/css/display-inside/index.md
@@ -32,7 +32,8 @@ l10n:
 - `ruby`
   - : 要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
 
-> **メモ:** 2 つの値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
+> [!NOTE]
+> 2 つの値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
 
 ## 形式文法
 
diff --git a/files/ja/web/css/display-listitem/index.md b/files/ja/web/css/display-listitem/index.md
index bbeeffd9bd6a83..14e0d3b5691fda 100644
--- a/files/ja/web/css/display-listitem/index.md
+++ b/files/ja/web/css/display-listitem/index.md
@@ -15,7 +15,8 @@ l10n:
 
 `list-item` は {{CSSxRef("&lt;display-outside&gt;")}} キーワードのいずれかと、 {{CSSxRef("&lt;display-inside&gt;")}} の `flow` または `flow-root` キーワードと組み合わせることもできます。
 
-> **メモ:** 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で `flow` になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が `block` になります。
+> [!NOTE]
+> 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で `flow` になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が `block` になります。
 
 ## 形式文法
 
diff --git a/files/ja/web/css/display-outside/index.md b/files/ja/web/css/display-outside/index.md
index 08cd8f81d69ec9..113984b6118bd2 100644
--- a/files/ja/web/css/display-outside/index.md
+++ b/files/ja/web/css/display-outside/index.md
@@ -18,7 +18,8 @@ l10n:
 - `inline`
   - : 要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
 
-> **メモ:** 2 つの値の構文に対応しているブラウザーは、**外部** `display` 値（`display: block` や `display: inline` など）のみが指定されていると、内部表示種別を `flow` に設定します（`display: block flow` や `display: inline flow` など）。
+> [!NOTE]
+> 2 つの値の構文に対応しているブラウザーは、**外部** `display` 値（`display: block` や `display: inline` など）のみが指定されていると、内部表示種別を `flow` に設定します（`display: block flow` や `display: inline flow` など）。
 > これは単一のキーワード構文との下位互換性があります。
 
 ## 形式文法
diff --git a/files/ja/web/css/display/index.md b/files/ja/web/css/display/index.md
index 58bae2eb675543..5488dbd7eed62e 100644
--- a/files/ja/web/css/display/index.md
+++ b/files/ja/web/css/display/index.md
@@ -70,9 +70,11 @@ CSS の `display` プロパティは、キーワード値を使用して指定
     - `inline`
       - : この要素は、自身の前後に改行を生成しない 1 つ以上のインラインボックスを生成します。通常のフローでは、次の要素は、空間があれば同じ行になります。
 
-> **メモ:** 複数キーワードの構文に対応しているブラウザーでは、**外側**の値のみがあるのを見つけると（`display: block` や `display: inline` が指定されている場合など）、内側の値を `flow` に設定します。（例えば、 `display: block flow` や `display: inline flow` のように。）
+> [!NOTE]
+> 複数キーワードの構文に対応しているブラウザーでは、**外側**の値のみがあるのを見つけると（`display: block` や `display: inline` が指定されている場合など）、内側の値を `flow` に設定します。（例えば、 `display: block flow` や `display: inline flow` のように。）
 
-> **メモ:** 古いブラウザーでも確実にレイアウトが機能するように、 1 つの値の構文を使用することができます。例えば、 `display: inline flex` には次のように代替を指定することができます。
+> [!NOTE]
+> 古いブラウザーでも確実にレイアウトが機能するように、 1 つの値の構文を使用することができます。例えば、 `display: inline flex` には次のように代替を指定することができます。
 >
 > ```css
 > .container {
@@ -108,7 +110,8 @@ CSS の `display` プロパティは、キーワード値を使用して指定
     - `ruby` {{Experimental_Inline}}
       - : 要素は、インラインレベル要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
 
-> **メモ:** 複数キーワードの構文に対応しているブラウザーは、**内側**の表示種別のみが指定されていると（`display: flex` や `display: grid` など）、外側の表示種別を `block` に設定します（`display: block flex` や `display: block grid` など）。
+> [!NOTE]
+> 複数キーワードの構文に対応しているブラウザーは、**内側**の表示種別のみが指定されていると（`display: flex` や `display: grid` など）、外側の表示種別を `block` に設定します（`display: block flex` や `display: block grid` など）。
 
 ### リスト項目
 
@@ -119,7 +122,8 @@ CSS の `display` プロパティは、キーワード値を使用して指定
 
 `list-item` は {{CSSxRef("&lt;display-outside&gt;")}} キーワードのいずれかと、 {{CSSxRef("&lt;display-inside&gt;")}} の `flow` または `flow-root` キーワードと組み合わせることもできます。
 
-> **メモ:** 複数キーワードの構文に対応しているブラウザーでは、内側の表示種別がないと既定で `flow` になります。
+> [!NOTE]
+> 複数キーワードの構文に対応しているブラウザーでは、内側の表示種別がないと既定で `flow` になります。
 > 外側の表示種別が指定されないと、基本ボックスは外側の表示種別が `block` になります。
 
 ### 内部
diff --git a/files/ja/web/css/display/multi-keyword_syntax_of_display/index.md b/files/ja/web/css/display/multi-keyword_syntax_of_display/index.md
index 17b3474bc500d7..2c78203aff8dc8 100644
--- a/files/ja/web/css/display/multi-keyword_syntax_of_display/index.md
+++ b/files/ja/web/css/display/multi-keyword_syntax_of_display/index.md
@@ -9,7 +9,8 @@ l10n:
 
 [CSS 表示モジュール](/ja/docs/Web/CSS/CSS_display)は、 CSS [`display`](/ja/docs/Web/CSS/display) プロパティの複数キーワード構文を定義しています。このガイドでは、複数キーワード構文を解説します。
 
-> **メモ:** 複数キーワード構文は、「2 値構文」または「複数値構文」とも呼ばれています。
+> [!NOTE]
+> 複数キーワード構文は、「2 値構文」または「複数値構文」とも呼ばれています。
 
 ## display プロパティの値を変更するとどうなるのか
 
diff --git a/files/ja/web/css/easing-function/index.md b/files/ja/web/css/easing-function/index.md
index a955f30a8e1335..d83074042a2df6 100644
--- a/files/ja/web/css/easing-function/index.md
+++ b/files/ja/web/css/easing-function/index.md
@@ -312,7 +312,8 @@ steps(2, start)
 steps(2)
 ```
 
-> **メモ:** アニメーションに複数の停止点がある場合、 `steps()` 関数で指定した手順がそれぞれの節に適用されます。したがって、3 つの区間と `steps(2)` を持つアニメーションは、区間ごとに 2 つずつ、合計で 6 つの段階を持つことになります。
+> [!NOTE]
+> アニメーションに複数の停止点がある場合、 `steps()` 関数で指定した手順がそれぞれの節に適用されます。したがって、3 つの区間と `steps(2)` を持つアニメーションは、区間ごとに 2 つずつ、合計で 6 つの段階を持つことになります。
 
 以下のイージング関数は不正です。
 
diff --git a/files/ja/web/css/field-sizing/index.md b/files/ja/web/css/field-sizing/index.md
index 5473a73654b078..f9ba4f9b85d118 100644
--- a/files/ja/web/css/field-sizing/index.md
+++ b/files/ja/web/css/field-sizing/index.md
@@ -183,7 +183,8 @@ HTML は 2 つの `<select>` 要素の組を含んでいます。 1 つは `fiel
 </div>
 ```
 
-> **メモ:** アクセシビリティのために各フィールドに意味のあるテキストによる説明を関連付けるために、各フォームコントロールに {{htmlelement("label")}} 要素を含めることがベストプラクティスです（詳しくは[意味のあるテキストラベル](/ja/docs/Learn/Accessibility/HTML#meaningful_text_labels)を参照してください）。この例は純粋にフォームコントロールの視覚レンダリングの側面に焦点を当てているため、この例ではそうしていませんが、本番コードにはフォームラベルを記載するようにしてください。
+> [!NOTE]
+> アクセシビリティのために各フィールドに意味のあるテキストによる説明を関連付けるために、各フォームコントロールに {{htmlelement("label")}} 要素を含めることがベストプラクティスです（詳しくは[意味のあるテキストラベル](/ja/docs/Learn/Accessibility/HTML#meaningful_text_labels)を参照してください）。この例は純粋にフォームコントロールの視覚レンダリングの側面に焦点を当てているため、この例ではそうしていませんが、本番コードにはフォームラベルを記載するようにしてください。
 
 #### CSS
 
diff --git a/files/ja/web/css/filter-function/drop-shadow/index.md b/files/ja/web/css/filter-function/drop-shadow/index.md
index 162ba366c85727..f9f14f06026789 100644
--- a/files/ja/web/css/filter-function/drop-shadow/index.md
+++ b/files/ja/web/css/filter-function/drop-shadow/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/filter-function/drop-shadow
 
 ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。
 
-> **メモ:** この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 `box-shadow` プロパティは要素の*ボックス全体*の背後に長方形の影を作成しますが、 `drop-shadow()` フィルター関数は*画像自体*の形 (アルファチャネル) に合った影を作成します。
+> [!NOTE]
+> この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 `box-shadow` プロパティは要素の*ボックス全体*の背後に長方形の影を作成しますが、 `drop-shadow()` フィルター関数は*画像自体*の形 (アルファチャネル) に合った影を作成します。
 
 ## 構文
 
diff --git a/files/ja/web/css/filter-function/opacity/index.md b/files/ja/web/css/filter-function/opacity/index.md
index 2f011325bd15fe..5d5f2678723bad 100644
--- a/files/ja/web/css/filter-function/opacity/index.md
+++ b/files/ja/web/css/filter-function/opacity/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/filter-function/opacity
 
 {{EmbedInteractiveExample("pages/css/function-opacity.html")}}
 
-> **メモ:** この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。
+> [!NOTE]
+> この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。
 
 ## 構文
 
diff --git a/files/ja/web/css/fit-content/index.md b/files/ja/web/css/fit-content/index.md
index 62c1291547bbec..45719ac8768bd5 100644
--- a/files/ja/web/css/fit-content/index.md
+++ b/files/ja/web/css/fit-content/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトされたボックスの大きさとして使用される場合、最大寸法と最小寸法は、コンテンツの寸法を参照します。
 
-> **メモ:** CSS Sizing の仕様書では、 {{cssxref("fit-content_function", "fit-content()")}} という関数も定義されています。このページではキーワード版について詳しく説明します。
+> [!NOTE]
+> CSS Sizing の仕様書では、 {{cssxref("fit-content_function", "fit-content()")}} という関数も定義されています。このページではキーワード版について詳しく説明します。
 
 ## 構文
 
diff --git a/files/ja/web/css/flex-basis/index.md b/files/ja/web/css/flex-basis/index.md
index 54a6fd4473230b..f480f5dd482631 100644
--- a/files/ja/web/css/flex-basis/index.md
+++ b/files/ja/web/css/flex-basis/index.md
@@ -19,7 +19,8 @@ l10n:
 
 ![Firefox の Flexbox インスペクターでは、アイテムが縮小された後のサイズが表示されます。](firefox-flex-basis.png)
 
-> **メモ:** (`auto` 以外の) `flex-basis` と `width` (または `flex-direction: column` の場合は `height`) の両方が要素に設定されていた場合、 `flex-basis` が優先されます。
+> [!NOTE]
+> (`auto` 以外の) `flex-basis` と `width` (または `flex-direction: column` の場合は `height`) の両方が要素に設定されていた場合、 `flex-basis` が優先されます。
 
 ## 構文
 
@@ -64,7 +65,8 @@ flex-basis: unset;
 
   - : フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。
 
-    > **メモ:** この値はフレックスボックスレイアウトの初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) または [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。
+    > [!NOTE]
+    > この値はフレックスボックスレイアウトの初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) または [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。
     >
     > - もともと、`flex-basis:auto` は「自身の `width` または `height` プロパティを参照する」という意味でした。
     > - その後 `flex-basis:auto` の意味が自動拡大縮小設定に変わり、また「自身の `width` または `height` プロパティを参照する」キーワードとして "main-size" を導入しました。これは [Firefox バグ 1032922](https://bugzil.la/1032922) で実装しました。
diff --git a/files/ja/web/css/float/index.md b/files/ja/web/css/float/index.md
index f5804a7e834298..dc37520c7e46c9 100644
--- a/files/ja/web/css/float/index.md
+++ b/files/ja/web/css/float/index.md
@@ -32,7 +32,8 @@ _浮動要素_ (floating element) とは、`float` の計算値が `none` 以外
 | `inline-grid`        | `grid`     |
 | _その他_             | _変更なし_ |
 
-> **メモ:** JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは `float` に対応していますが、古いブラウザーは `cssFloat` という綴りになります。これは、ハイフン区切りの CSS 名は DOM メンバーとして{{Glossary("camel_case", "キャメルケース")}}で綴るというルールの例外でした（これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 \<label> の "for" を "htmlFor" とする必要があったりするのと同じです）。
+> [!NOTE]
+> JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは `float` に対応していますが、古いブラウザーは `cssFloat` という綴りになります。これは、ハイフン区切りの CSS 名は DOM メンバーとして{{Glossary("camel_case", "キャメルケース")}}で綴るというルールの例外でした（これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 \<label> の "for" を "htmlFor" とする必要があったりするのと同じです）。
 
 ## 構文
 
diff --git a/files/ja/web/css/font-optical-sizing/index.md b/files/ja/web/css/font-optical-sizing/index.md
index 29e7bd37795085..2586b0126056a8 100644
--- a/files/ja/web/css/font-optical-sizing/index.md
+++ b/files/ja/web/css/font-optical-sizing/index.md
@@ -76,7 +76,8 @@ p {
 }
 ```
 
-> **メモ:** 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — がテストに適しています。 [GitHub からダウンロード](https://github.com/googlefonts/amstelvar/releases)できます。
+> [!NOTE]
+> 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — がテストに適しています。 [GitHub からダウンロード](https://github.com/googlefonts/amstelvar/releases)できます。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/font-size/index.md b/files/ja/web/css/font-size/index.md
index 1d16cebba1ba3b..43435bdb45bb8e 100644
--- a/files/ja/web/css/font-size/index.md
+++ b/files/ja/web/css/font-size/index.md
@@ -60,7 +60,8 @@ font-size: unset;
 - {{cssxref("&lt;percentage&gt;")}}
   - : 正の {{cssxref("&lt;percentage&gt;")}} 値で、親要素のフォントサイズからの相対値です。
 
-> **メモ:** アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。
+> [!NOTE]
+> アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。
 
 ## 解説
 
@@ -76,7 +77,8 @@ font-size: unset;
 
 フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを `16px` 、子要素を `larger` とした場合、子要素のフォントサイズは親要素の `16px` より大きくレンダリングされます。
 
-> **メモ:** フォントサイズを `px` で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、[_アクセシブル_](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3)ではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。
+> [!NOTE]
+> フォントサイズを `px` で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、[_アクセシブル_](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3)ではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。
 
 <h3 id="Ems">em</h3>
 
diff --git a/files/ja/web/css/font-smooth/index.md b/files/ja/web/css/font-smooth/index.md
index 3e7183a455d05a..c8662f6cc53df9 100644
--- a/files/ja/web/css/font-smooth/index.md
+++ b/files/ja/web/css/font-smooth/index.md
@@ -25,14 +25,16 @@ font-smooth: revert;
 font-smooth: unset;
 ```
 
-> **メモ:** WebKit は同様のプロパティを別な値 **`-webkit-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。
+> [!NOTE]
+> WebKit は同様のプロパティを別な値 **`-webkit-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。
 >
 > - `auto` - ブラウザーの決定に任せる (利用可能であればアンチエイリアスのサブピクセルを使用します。これが既定値)
 > - `none` - フォントを滑らかにする処理をオフにします。表示されるテキストの辺はギザギザで鮮明になります。
 > - `antialiased` - サブピクセルではなく、ピクセルレベルでフォントを滑らかにします。暗い背景に明るい文字の場合、サブピクセルレンダリングからアンチエイリアスに切り替えることで、より明るく見えるようになります。
 > - `subpixel-antialiased` - 多くの非 Retina ディスプレイでは、これが最も鮮明なテキストになります。
 
-> **メモ:** Firefox は同様のプロパティを別な値 **`-moz-osx-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。
+> [!NOTE]
+> Firefox は同様のプロパティを別な値 **`-moz-osx-font-smoothing`** として実装しています。これは Mac OS X/macOS でのみ動作します。
 >
 > - `auto` - フォントを滑らかにする処理の最適化をブラウザーが選択します。ふつうは `grayscale` です。
 > - `grayscale` - サブピクセルではなくグレースケールのアンチエイリアスで、テキストを描画します。暗い背景に明るいテキストを表示する際に、サブピクセルレンダリングからアンチエイリアシングに切り替えることで、より明るく見えるようになります。
diff --git a/files/ja/web/css/font-stretch/index.md b/files/ja/web/css/font-stretch/index.md
index a90bcadc9b1638..632971210d05dc 100644
--- a/files/ja/web/css/font-stretch/index.md
+++ b/files/ja/web/css/font-stretch/index.md
@@ -214,7 +214,8 @@ td {
 
 {{Specifications}}
 
-> **メモ:** CSS プロパティ `font-stretch` は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。
+> [!NOTE]
+> CSS プロパティ `font-stretch` は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。
 
 ## ブラウザーの互換性
 
diff --git a/files/ja/web/css/font-style/index.md b/files/ja/web/css/font-style/index.md
index 79df5d41505b87..0522b1dd6537e8 100644
--- a/files/ja/web/css/font-style/index.md
+++ b/files/ja/web/css/font-style/index.md
@@ -48,7 +48,8 @@ font-style: unset;
 
 TrueType または OpenType の可変フォントでは、 `"slnt"` 変数が oblique の傾く角度を様々に実装するために使用され、 `"ital"` 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。
 
-> **メモ:** 次の例を動作させるには、 CSS Fonts Level 4 の `font-style: oblique` が `<angle>` を受け入れる構文に対応したブラウザーが必要です。デモは `font-style: oblique 23deg;` を読み込みます。この値を変更すると、テキストの傾きが変わるのを確認することができます。
+> [!NOTE]
+> 次の例を動作させるには、 CSS Fonts Level 4 の `font-style: oblique` が `<angle>` を受け入れる構文に対応したブラウザーが必要です。デモは `font-style: oblique 23deg;` を読み込みます。この値を変更すると、テキストの傾きが変わるのを確認することができます。
 
 {{EmbedGHLiveSample("css-examples/variable-fonts/oblique.html", '100%', 860)}}
 
diff --git a/files/ja/web/css/font-variant-alternates/index.md b/files/ja/web/css/font-variant-alternates/index.md
index f3ae33f7b8c256..fb91429a21e25c 100644
--- a/files/ja/web/css/font-variant-alternates/index.md
+++ b/files/ja/web/css/font-variant-alternates/index.md
@@ -56,7 +56,8 @@ font-variant-alternates: unset;
 
   - : この関数は、[フルーロン](https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3)およびその他の飾り書体などの装飾を有効にします。 OpenType の `ornm` の値に相当します (例: `ornm 2`)。
 
-    > **メモ:** テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。
+    > [!NOTE]
+    > テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。
 
 - `annotation()`
   - : この関数は、丸数字や鏡文字などの注釈表記を有効にします。この函数は丸数字又は鏡文字などの表記を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `nalt` の値に相当します (例: `nalt 2`)。
@@ -101,7 +102,8 @@ p {
 
 ### 結果
 
-> **メモ:** この例を有効にするには、 OpenType フォントの _Leitura Display Swashes_ をインストールする必要があります。試験用途の無償版が、 [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes) などにあります。
+> [!NOTE]
+> この例を有効にするには、 OpenType フォントの _Leitura Display Swashes_ をインストールする必要があります。試験用途の無償版が、 [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes) などにあります。
 
 {{ EmbedLiveSample('Enabling swash glyphs') }}
 
diff --git a/files/ja/web/css/font-variation-settings/index.md b/files/ja/web/css/font-variation-settings/index.md
index 9801fcbf12b83b..1c6b018411ba4f 100644
--- a/files/ja/web/css/font-variation-settings/index.md
+++ b/files/ja/web/css/font-variation-settings/index.md
@@ -81,7 +81,8 @@ font-variation-settings: unset;
 
 カスタム軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得ます。例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も 4 文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。
 
-> **メモ:** 登録済みの軸のタグは小文字のタグを使用するのに対し、カスタム軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。
+> [!NOTE]
+> 登録済みの軸のタグは小文字のタグを使用するのに対し、カスタム軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。
 
 オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。
 
diff --git a/files/ja/web/css/gradient/conic-gradient/index.md b/files/ja/web/css/gradient/conic-gradient/index.md
index 12e02fdab1a761..9e23ef29079ae7 100644
--- a/files/ja/web/css/gradient/conic-gradient/index.md
+++ b/files/ja/web/css/gradient/conic-gradient/index.md
@@ -56,7 +56,8 @@ background: conic-gradient(
 
 `<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
 
-> **メモ:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。
+> [!NOTE]
+> 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。
 
 ### 扇型グラデーションの構成
 
diff --git a/files/ja/web/css/gradient/repeating-conic-gradient/index.md b/files/ja/web/css/gradient/repeating-conic-gradient/index.md
index c79504015c90e2..b863b22a1bf82b 100644
--- a/files/ja/web/css/gradient/repeating-conic-gradient/index.md
+++ b/files/ja/web/css/gradient/repeating-conic-gradient/index.md
@@ -46,7 +46,8 @@ background: repeating-conic-gradient(
 
 `<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
 
-> **メモ:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。
+> [!NOTE]
+> 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。
 
 ### 反復扇形グラデーションの理解
 
diff --git a/files/ja/web/css/gradient/repeating-linear-gradient/index.md b/files/ja/web/css/gradient/repeating-linear-gradient/index.md
index 043bbfb3367f5c..4c1e739f6fcdbb 100644
--- a/files/ja/web/css/gradient/repeating-linear-gradient/index.md
+++ b/files/ja/web/css/gradient/repeating-linear-gradient/index.md
@@ -122,7 +122,8 @@ body {
 
 最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。
 
-> **メモ:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+> [!NOTE]
+> 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/gradient/repeating-radial-gradient/index.md b/files/ja/web/css/gradient/repeating-radial-gradient/index.md
index c54e572c246f29..173d47b5425a77 100644
--- a/files/ja/web/css/gradient/repeating-radial-gradient/index.md
+++ b/files/ja/web/css/gradient/repeating-radial-gradient/index.md
@@ -47,7 +47,8 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
     | `farthest-side`   | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。               |
     | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。                                                  |
 
-    > **メモ:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。
+    > [!NOTE]
+    > この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。
 
 - `<color-stop>`
   - : 色経由点の {{cssxref("&lt;color&gt;")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("&lt;percentage&gt;")}} または {{cssxref("&lt;length&gt;")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。
@@ -132,7 +133,8 @@ where <extent-keyword> = closest-corner | closest-side | farthest-corner | farth
 
 楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。
 
-> **メモ:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。
+> [!NOTE]
+> 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/grid-area/index.md b/files/ja/web/css/grid-area/index.md
index 5a9f99556a34ef..cd939fbd49207f 100644
--- a/files/ja/web/css/grid-area/index.md
+++ b/files/ja/web/css/grid-area/index.md
@@ -68,7 +68,8 @@ grid-area: unset;
 
   - : '`<custom-ident>-start`'/'`<custom-ident>-end`' という名前の付いた線がある場合、そのような最初の線グリッドのアイテムの配置に関与します。
 
-    > **メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-area: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します（その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り）。
+    > [!NOTE]
+    > 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-area: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します（その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り）。
 
     そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。
 
diff --git a/files/ja/web/css/grid-auto-columns/index.md b/files/ja/web/css/grid-auto-columns/index.md
index ce1f67396cf455..0a20f8a3004fef 100644
--- a/files/ja/web/css/grid-auto-columns/index.md
+++ b/files/ja/web/css/grid-auto-columns/index.md
@@ -89,7 +89,8 @@ grid-auto-columns: unset;
 
     {{cssxref("minmax", "minmax()")}} 表記の外で使用した場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、 `minmax(min-content,max-content)` と同様の動作をします。
 
-    > **メモ:** トラックの寸法が `auto` の場合は、{{cssxref("align-content")}}と{{cssxref("justify-content")}}のプロパティによって引き伸ばすことができます。従って既定では、 `auto` サイズのトラックはグリッドコンテナーの残りの空間を占めます。
+    > [!NOTE]
+    > トラックの寸法が `auto` の場合は、{{cssxref("align-content")}}と{{cssxref("justify-content")}}のプロパティによって引き伸ばすことができます。従って既定では、 `auto` サイズのトラックはグリッドコンテナーの残りの空間を占めます。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/grid-auto-rows/index.md b/files/ja/web/css/grid-auto-rows/index.md
index 5a94c94c489f07..ad5be13316ff59 100644
--- a/files/ja/web/css/grid-auto-rows/index.md
+++ b/files/ja/web/css/grid-auto-rows/index.md
@@ -88,7 +88,8 @@ grid-auto-rows: unset;
 
     {{cssxref("minmax", "minmax()")}} 記法の外で使用された場合、 `auto` は上記の最小値と最大値の間の範囲を表します。多くの場合は `minmax(min-content,max-content)` のように動作します。
 
-    > **メモ:** トラックの寸法が `auto` の場合（かつ `auto` だけの場合）は、 {{cssxref("align-content")}} および {{cssxref("justify-content")}} プロパティによって引き伸ばすことができます。
+    > [!NOTE]
+    > トラックの寸法が `auto` の場合（かつ `auto` だけの場合）は、 {{cssxref("align-content")}} および {{cssxref("justify-content")}} プロパティによって引き伸ばすことができます。
     > 従って既定では、トラックの寸法が `auto` の場合、グリッドコンテナー内の残りの空間を占有します。
 
 ## 公式定義
diff --git a/files/ja/web/css/grid-column-end/index.md b/files/ja/web/css/grid-column-end/index.md
index 1ea7eb4f538eaf..4125114ea1f240 100644
--- a/files/ja/web/css/grid-column-end/index.md
+++ b/files/ja/web/css/grid-column-end/index.md
@@ -45,7 +45,8 @@ grid-column-end: unset;
 
   - : '\<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。
 
-    > **メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。
+    > [!NOTE]
+    > 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。
 
     そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。
 
diff --git a/files/ja/web/css/grid-column-start/index.md b/files/ja/web/css/grid-column-start/index.md
index c759a980bdf1e2..1ca74dd7e26b30 100644
--- a/files/ja/web/css/grid-column-start/index.md
+++ b/files/ja/web/css/grid-column-start/index.md
@@ -53,7 +53,8 @@ grid-column-start: unset;
 
   - : `<custom-ident>-start` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。
 
-    > **メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します （その前に `foo-start` という名前の線が明示的に存在しない限り）。
+    > [!NOTE]
+    > 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します （その前に `foo-start` という名前の線が明示的に存在しない限り）。
 
     そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。
 
diff --git a/files/ja/web/css/grid-column/index.md b/files/ja/web/css/grid-column/index.md
index c6d47072cb77d3..b559fab2c78796 100644
--- a/files/ja/web/css/grid-column/index.md
+++ b/files/ja/web/css/grid-column/index.md
@@ -70,7 +70,8 @@ grid-column: unset;
 
   - : `<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。
 
-    > **メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。
+    > [!NOTE]
+    > 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。
 
     そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。
 
diff --git a/files/ja/web/css/grid-row-end/index.md b/files/ja/web/css/grid-row-end/index.md
index ff4107ae0e666a..90a2d81cb1e583 100644
--- a/files/ja/web/css/grid-row-end/index.md
+++ b/files/ja/web/css/grid-row-end/index.md
@@ -45,7 +45,8 @@ grid-row-end: unset;
 
   - : `<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。
 
-    > **メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。
+    > [!NOTE]
+    > 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。
 
     そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。
 
diff --git a/files/ja/web/css/grid-row-start/index.md b/files/ja/web/css/grid-row-start/index.md
index d7275e61f99cdb..41e2699f7e9744 100644
--- a/files/ja/web/css/grid-row-start/index.md
+++ b/files/ja/web/css/grid-row-start/index.md
@@ -53,7 +53,8 @@ grid-row-start: unset;
 
   - : `<custom-ident>-start` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。
 
-    > **メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に `foo-start` という名前の線が明示的に存在しない限り)。
+    > [!NOTE]
+    > 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に `foo-start` という名前の線が明示的に存在しない限り)。
 
 そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。
 
diff --git a/files/ja/web/css/grid-row/index.md b/files/ja/web/css/grid-row/index.md
index a15b45dc5fad5a..f70c51fb264a06 100644
--- a/files/ja/web/css/grid-row/index.md
+++ b/files/ja/web/css/grid-row/index.md
@@ -69,7 +69,8 @@ grid-row: unset;
 
   - : `<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。
 
-    > **メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。
+    > [!NOTE]
+    > 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。
 
     そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。
 
diff --git a/files/ja/web/css/grid-template-columns/index.md b/files/ja/web/css/grid-template-columns/index.md
index 3162e49cfde2d0..af711177a707f6 100644
--- a/files/ja/web/css/grid-template-columns/index.md
+++ b/files/ja/web/css/grid-template-columns/index.md
@@ -79,7 +79,8 @@ grid-template-columns: unset;
 
     {{cssxref("minmax", "minmax()")}} 表記以外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、 `minmax(min-content,max-content)` と同じように動作します。
 
-    > **メモ:** トラックの寸法が `auto` の場合（そして `auto` だけの場合）、 {{cssxref("align-content")}} および {{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。既定では、 `auto` のサイズのトラックがグリッドコンテナーの残りの空間を占めます。
+    > [!NOTE]
+    > トラックの寸法が `auto` の場合（そして `auto` だけの場合）、 {{cssxref("align-content")}} および {{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。既定では、 `auto` のサイズのトラックがグリッドコンテナーの残りの空間を占めます。
 
 - `{{cssxref("fit-content_function", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}`
   - : `max(minimum, min(limit, max-content))` という式を表し、ここで _minimum_ は `auto` の最小値 （常に {{cssxref("min-content")}} の最小値に等しいわけではありませんが、そうなることが多い） を表し、 _limit_ は fit-content() に引数として渡されるトラックの大きさを計算する関数です。これは基本的に `minmax(auto, max-content)` と `minmax(auto, limit)` の小さい方として計算されます。
diff --git a/files/ja/web/css/grid-template-rows/index.md b/files/ja/web/css/grid-template-rows/index.md
index 24848a656159fb..8825312b7b7286 100644
--- a/files/ja/web/css/grid-template-rows/index.md
+++ b/files/ja/web/css/grid-template-rows/index.md
@@ -80,7 +80,8 @@ grid-template-rows: unset;
 
     {{cssxref("minmax", "minmax()")}} の外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、`minmax(min-content,max-content)` と同じように動作します。
 
-    > **メモ:** トラックの寸法が `auto` の場合 (そして `auto` の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。
+    > [!NOTE]
+    > トラックの寸法が `auto` の場合 (そして `auto` の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。
 
 - {{cssxref("fit-content_function", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
   - : `min(max-content, max(auto, argument))` の式を表し、 `auto` と同様に（すなわち `minmax(auto, max-content)` と）計算されますが、トラックの寸法が `auto` の最小値よりも大きい場合は _argument_ でクランプされるところが異なります。
diff --git a/files/ja/web/css/grid-template/index.md b/files/ja/web/css/grid-template/index.md
index e205f083a7e223..30d9ec68dbbfee 100644
--- a/files/ja/web/css/grid-template/index.md
+++ b/files/ja/web/css/grid-template/index.md
@@ -61,7 +61,8 @@ grid-template: unset;
 
   - : {{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には `auto` が設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は `none` が設定されます)。
 
-    > **メモ:** これらのトラックリストに {{cssxref("repeat", "repeat()")}} 関数を使うことはできません。トラックは「ASCII アート」内の行列と一対一の関係で視覚的に並んでいるためです。
+    > [!NOTE]
+    > これらのトラックリストに {{cssxref("repeat", "repeat()")}} 関数を使うことはできません。トラックは「ASCII アート」内の行列と一対一の関係で視覚的に並んでいるためです。
 
 > **メモ:** {{cssxref("grid")}} 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、（`grid-template` ではなく） `grid` を使用してください。
 
diff --git a/files/ja/web/css/grid/index.md b/files/ja/web/css/grid/index.md
index 467675764a4023..66d6ad577a8b27 100644
--- a/files/ja/web/css/grid/index.md
+++ b/files/ja/web/css/grid/index.md
@@ -13,7 +13,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/grid.html")}}
 
-> **メモ:** 指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、溝に関するプロパティはこの一括指定では初期化されません。
+> [!NOTE]
+> 指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、溝に関するプロパティはこの一括指定では初期化されません。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/hex-color/index.md b/files/ja/web/css/hex-color/index.md
index 144304493364c2..d6090bcc8f6362 100644
--- a/files/ja/web/css/hex-color/index.md
+++ b/files/ja/web/css/hex-color/index.md
@@ -31,7 +31,8 @@ l10n:
 - `A` または `AA` {{optional_inline}}
   - : 色のアルファ成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `e` が `ee` になるように複製されます。 `0` または `00` は完全に透明な色で、 `f` または `ff` は完全に不透明な色です。
 
-> **メモ:** 構文は大文字小文字の区別がなく、 `#00ff00` は `#00FF00` と同じです。
+> [!NOTE]
+> 構文は大文字小文字の区別がなく、 `#00ff00` は `#00FF00` と同じです。
 
 ## 例
 
diff --git a/files/ja/web/css/hue-interpolation-method/index.md b/files/ja/web/css/hue-interpolation-method/index.md
index 55477589280604..b6bd96ffc091e4 100644
--- a/files/ja/web/css/hue-interpolation-method/index.md
+++ b/files/ja/web/css/hue-interpolation-method/index.md
@@ -28,7 +28,8 @@ decreasing hue
 
 任意の色相角の組は{{Glossary("color wheel", "色相環")}}上の 2 つの半径に対応し、円周を補間可能な 2 つの弧に切り分けます。どちらの弧も最初の半径で始まり 2 つ目の半径で終わりますが、一方は時計回りに、もう一方は反時計回りに進みます。
 
-> **メモ:** 以下の説明と図は、色相角が時計回りに増加する色相環に基づいています。角度の増加が反時計回りの処理になる色相環があることに注意してください。
+> [!NOTE]
+> 以下の説明と図は、色相角が時計回りに増加する色相環に基づいています。角度の増加が反時計回りの処理になる色相環があることに注意してください。
 
 色相角 `θ1` と `θ2` のペアは範囲 `[0deg, 360deg)` に正規化され、 `θ1` から `θ2` への補間時にどの円弧を使用するかを決定するアルゴリズムが 4 つあります。
 
diff --git a/files/ja/web/css/hue/index.md b/files/ja/web/css/hue/index.md
index 21657ef9b534dc..e7464b10526929 100644
--- a/files/ja/web/css/hue/index.md
+++ b/files/ja/web/css/hue/index.md
@@ -14,7 +14,8 @@ The **`<hue>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/C
 
 上の色相環は [sRGB](https://ja.wikipedia.org/wiki/SRGB) 色空間におけるすべての角度の色相を表示させています。具体的な例では、赤は `0deg`、黄は `60deg`、ライムは `120deg`、シアンは `180deg`、青は `240deg`、マゼンタは `300deg` です。
 
-> **メモ:** 具体的な色相に対応する角度は色空間によって異なります。例えば、 sRGB の緑の色相角は、 sRGB 色空間では `120deg` ですが、 CIELAB 色空間では `134.39deg` です。
+> [!NOTE]
+> 具体的な色相に対応する角度は色空間によって異なります。例えば、 sRGB の緑の色相角は、 sRGB 色空間では `120deg` ですが、 CIELAB 色空間では `134.39deg` です。
 
 以下の表は、 sRGB （{{CSSXref("color_value/hsl", "hsl()")}} および {{CSSXref("color_value/hwb", "hwb()")}}）、 CIELAB （{{CSSXref("color_value/lch", "lch()")}} で用いる）、 Oklab （{{CSSXref("color_value/oklch", "oklch()")}}）の色空間での主な色を示します。
 
diff --git a/files/ja/web/css/hyphens/index.md b/files/ja/web/css/hyphens/index.md
index 899ed7393cc30e..0ea05451310950 100644
--- a/files/ja/web/css/hyphens/index.md
+++ b/files/ja/web/css/hyphens/index.md
@@ -9,11 +9,13 @@ slug: Web/CSS/hyphens
 
 {{EmbedInteractiveExample("pages/css/hyphens.html")}}
 
-> **メモ:** 上記のデモでは、 "An extra­ordinarily long English word!" に非表示の `&shy;` の文字が含まれており、 `An extra&shy;­ordinarily long English word!` のようになっています。この文字は `hyphens: manual;` が指定された場合にハイフンを挿入することができる位置を示しています。
+> [!NOTE]
+> 上記のデモでは、 "An extra­ordinarily long English word!" に非表示の `&shy;` の文字が含まれており、 `An extra&shy;­ordinarily long English word!` のようになっています。この文字は `hyphens: manual;` が指定された場合にハイフンを挿入することができる位置を示しています。
 
 ハイフネーションの規則は言語に依存します。 HTML では言語は [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、[`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性を使用する必要があります。
 
-> **メモ:** どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。
+> [!NOTE]
+> どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。
 
 ## 構文
 
@@ -52,7 +54,8 @@ hyphens: unset;
 - U+00AD (SHY)
   - : 不可視の「ソフト」ハイフン ("**s**oft" **hy**phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 `&shy;` を使用してソフトハイフンを挿入することができます。
 
-> **メモ:** HTML の [`<wbr>`](/ja/docs/Web/HTML/Element/wbr) 要素によって改行が行われた場合、ハイフンは挿入されません。
+> [!NOTE]
+> HTML の [`<wbr>`](/ja/docs/Web/HTML/Element/wbr) 要素によって改行が行われた場合、ハイフンは挿入されません。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/image-rendering/index.md b/files/ja/web/css/image-rendering/index.md
index 88d75ee4ce96b6..6f950b6adb58f0 100644
--- a/files/ja/web/css/image-rendering/index.md
+++ b/files/ja/web/css/image-rendering/index.md
@@ -99,7 +99,8 @@ img {
 
 {{Compat}}
 
-> **メモ:** 仕様書の例にあるようなピクセルアートの拡大縮小には `crisp-edges` を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。[Firefox](https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727) では、 `pixelated` は最近傍法として解釈されますが、 `auto` と `crisp-edges` はトリリニア法または線形で補間されます。
+> [!NOTE]
+> 仕様書の例にあるようなピクセルアートの拡大縮小には `crisp-edges` を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。[Firefox](https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727) では、 `pixelated` は最近傍法として解釈されますが、 `auto` と `crisp-edges` はトリリニア法または線形で補間されます。
 >
 > Chromium と Safari (WebKit) での動作については、 [`GetInterpolationQuality`](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&q=GetInterpolationQuality&g=0&l=1160) 関数と [`CSSPrimitiveValue::operator ImageRendering()`](https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324) をそれぞれ参照してください。
 
diff --git a/files/ja/web/css/image-resolution/index.md b/files/ja/web/css/image-resolution/index.md
index ed37ad154e2558..4298e936de2819 100644
--- a/files/ja/web/css/image-resolution/index.md
+++ b/files/ja/web/css/image-resolution/index.md
@@ -36,7 +36,8 @@ image-resolution: unset;
 - `snap`
   - : `snap` キーワードが指定された場合、計算された解像度は、指定された解像度を、画像の 1 ピクセルを端末の整数のピクセルにマッピングする最も近い値に丸めたものになります。解像度が画像から取得された場合、使用される固有の解像度は、画像のネイティブ解像度を同様に調整したものになります。
 
-> **メモ:** SVG などのベクター形式は内在解像度を持たないので、このプロパティはベクター画像には影響しません。
+> [!NOTE]
+> SVG などのベクター形式は内在解像度を持たないので、このプロパティはベクター画像には影響しません。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/image/image-set/index.md b/files/ja/web/css/image/image-set/index.md
index 362d9c859f91c4..fccead38ea1304 100644
--- a/files/ja/web/css/image/image-set/index.md
+++ b/files/ja/web/css/image/image-set/index.md
@@ -63,7 +63,8 @@ image-set(
 
 {{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}}
 
-> **メモ:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では（標準のプロパティを追加していない開発者の互換性を確保するために） `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。
+> [!NOTE]
+> 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では（標準のプロパティを追加していない開発者の互換性を確保するために） `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。
 
 ### image-set() を使用して別な画像形式を提供
 
diff --git a/files/ja/web/css/image/image/index.md b/files/ja/web/css/image/image/index.md
index 472cd70b1e64e2..d326e09c9e1716 100644
--- a/files/ja/web/css/image/image/index.md
+++ b/files/ja/web/css/image/image/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("&lt;image&gt;")}} を {{CSSxRef("url", "url()")}} 関数に似た様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。
 
-> **メモ:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '<code>HTMLImageElement</code> のコンストラクターである <code>Image()</code>', '', 1)}} と混同しないでください。
+> [!NOTE]
+> CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '<code>HTMLImageElement</code> のコンストラクターである <code>Image()</code>', '', 1)}} と混同しないでください。
 
 ## 構文
 
diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md
index 7ffb5af0316565..1992ef886fb89d 100644
--- a/files/ja/web/css/image/index.md
+++ b/files/ja/web/css/image/index.md
@@ -49,7 +49,8 @@ CSS はオブジェクトの*実際の*寸法を、 (1) _内在的な寸法_、
 - 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像の内在的な寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。
 - 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。
 
-> **メモ:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。
+> [!NOTE]
+> すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。
 
 ## アクセシビリティの考慮
 
diff --git a/files/ja/web/css/important/index.md b/files/ja/web/css/important/index.md
index 0f75faaf41958f..18001dc3afefe1 100644
--- a/files/ja/web/css/important/index.md
+++ b/files/ja/web/css/important/index.md
@@ -27,7 +27,8 @@ selector {
 
 宣言が重要な場合、優先順位は逆になります。ユーザーエージェントスタイルシートで重要であるとマーク付けされた宣言は、ユーザースタイルシートでのすべての重要な宣言を上書きします。同様に、ユーザースタイルシートにおけるすべての重要な宣言は、作者スタイルシートにおけるすべての重要な宣言を上書きします。最後に、すべての重要な宣言は、すべてのアニメーションよりも引き継がれます。
 
-> **メモ:** important 宣言はすべてアニメーションに引き継がれます。[@keyframes アニメーション](/ja/docs/Web/CSS/@keyframes)宣言内では `!important` は無効です。
+> [!NOTE]
+> important 宣言はすべてアニメーションに引き継がれます。[@keyframes アニメーション](/ja/docs/Web/CSS/@keyframes)宣言内では `!important` は無効です。
 
 重要な宣言の優先順位を逆転させることで、パーソナライズされた配色や大きなフォントなどの特別なニーズを持つユーザーが、そのユーザーのスタイルシートでいくつかの宣言を重要なものとしてマークすることにより、必要に応じて作者スタイルを上書きできることを確実に保持します。また、悪意のある拡張機能が重要なユーザーエージェントスタイルを上書きできないようにすることで、機能を破壊したり、セキュリティに悪影響を与えたりしないことも保証します。
 
diff --git a/files/ja/web/css/index.md b/files/ja/web/css/index.md
index c4e233efe23259..6301005324d19c 100644
--- a/files/ja/web/css/index.md
+++ b/files/ja/web/css/index.md
@@ -22,7 +22,7 @@ CSS 2.1 以降、仕様の範囲が大幅に拡大し、CSS モジュールご
 - CSS リファレンス
   - : CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの[包括的な CSS リファレンス](/ja/docs/Web/CSS/Reference)です。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
diff --git a/files/ja/web/css/initial_value/index.md b/files/ja/web/css/initial_value/index.md
index f540474f81dc2f..d0ad6464c742c6 100644
--- a/files/ja/web/css/initial_value/index.md
+++ b/files/ja/web/css/initial_value/index.md
@@ -12,7 +12,8 @@ slug: Web/CSS/initial_value
 
 {{cssxref("initial")}} キーワードを使用すると、明示的に初期値を指定することができます。
 
-> **メモ:** 初期値をブラウザーのスタイルシートで指定された値と混同しないでください。
+> [!NOTE]
+> 初期値をブラウザーのスタイルシートで指定された値と混同しないでください。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/integer/index.md b/files/ja/web/css/integer/index.md
index 47e64f99e074da..2b881038337428 100644
--- a/files/ja/web/css/integer/index.md
+++ b/files/ja/web/css/integer/index.md
@@ -13,7 +13,8 @@ l10n:
 
 `<integer>` データ型は 1 桁から数桁の 10 進数、 0 から 9 までを含み、任意でその前に単一の `+` または `-` の符号が付きます。整数に関連付けられた単位はありません。
 
-> **メモ:** 有効な `<integer>` の値の公式な範囲はなく、仕様書は範囲を指定していません。
+> [!NOTE]
+> 有効な `<integer>` の値の公式な範囲はなく、仕様書は範囲を指定していません。
 
 ## 補間
 
diff --git a/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.md
index 83a12b9f4b8830..c6c2f443e4770f 100644
--- a/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.md
+++ b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.md
@@ -19,11 +19,12 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロードする](https://github.com/mdn/css-examples/blob/main/css-cookbook/breadcrumb-navigation--download.html)
 
-> **メモ:** 上の例では、複合セレクターを使用して、最後以外のすべての `li` の前にコンテンツを挿入しています。これは、最初の要素を除くすべての `li` 要素を対象とする複合セレクターを使用しても実現できます。
+> [!NOTE]
+> 上の例では、複合セレクターを使用して、最後以外のすべての `li` の前にコンテンツを挿入しています。これは、最初の要素を除くすべての `li` 要素を対象とする複合セレクターを使用しても実現できます。
 >
 > ```css
 > .breadcrumb li:not(:first-child)::before {
diff --git a/files/ja/web/css/layout_cookbook/card/index.md b/files/ja/web/css/layout_cookbook/card/index.md
index 397257ba934789..49270ef6f75715 100644
--- a/files/ja/web/css/layout_cookbook/card/index.md
+++ b/files/ja/web/css/layout_cookbook/card/index.md
@@ -21,7 +21,7 @@ slug: Web/CSS/Layout_cookbook/Card
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html)
 
@@ -40,7 +40,8 @@ slug: Web/CSS/Layout_cookbook/Card
 
 暗黙的にグリッドに作成された行は、既定で自動的にサイズ変更されるため、トラックにフッターがある場合は自動的にサイズ変更されます。 したがって、これは追加されたコンテンツに合わせられます。
 
-> **メモ:** 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 Grid Level 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。
+> [!NOTE]
+> 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 Grid Level 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。
 
 ## 有用な代替策またはその他の方法
 
diff --git a/files/ja/web/css/layout_cookbook/center_an_element/index.md b/files/ja/web/css/layout_cookbook/center_an_element/index.md
index 26c5a767e629a9..d27be242f1bec3 100644
--- a/files/ja/web/css/layout_cookbook/center_an_element/index.md
+++ b/files/ja/web/css/layout_cookbook/center_an_element/index.md
@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/Center_an_element
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html)
 
diff --git a/files/ja/web/css/layout_cookbook/column_layouts/index.md b/files/ja/web/css/layout_cookbook/column_layouts/index.md
index 7470e0f1b4b014..7b5447cbe892fd 100644
--- a/files/ja/web/css/layout_cookbook/column_layouts/index.md
+++ b/files/ja/web/css/layout_cookbook/column_layouts/index.md
@@ -29,7 +29,7 @@ slug: Web/CSS/Layout_cookbook/Column_layouts
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html)
 
@@ -47,7 +47,7 @@ slug: Web/CSS/Layout_cookbook/Column_layouts
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html)
 
@@ -55,7 +55,7 @@ slug: Web/CSS/Layout_cookbook/Column_layouts
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html)
 
@@ -71,7 +71,7 @@ slug: Web/CSS/Layout_cookbook/Column_layouts
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html)
 
diff --git a/files/ja/web/css/layout_cookbook/grid_wrapper/index.md b/files/ja/web/css/layout_cookbook/grid_wrapper/index.md
index ebba9ed6e4c939..d215dc1b7cf707 100644
--- a/files/ja/web/css/layout_cookbook/grid_wrapper/index.md
+++ b/files/ja/web/css/layout_cookbook/grid_wrapper/index.md
@@ -15,7 +15,7 @@ slug: Web/CSS/Layout_cookbook/Grid_wrapper
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロードする](https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html)
 
diff --git a/files/ja/web/css/layout_cookbook/index.md b/files/ja/web/css/layout_cookbook/index.md
index 7b0634a83df4d3..a450ecf83e9642 100644
--- a/files/ja/web/css/layout_cookbook/index.md
+++ b/files/ja/web/css/layout_cookbook/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/Layout_cookbook
 
 CSS レイアウト料理帳は、よくあるレイアウトパターンや、自分のサイトに実装する可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。
 
-> **メモ:** CSS のレイアウトが初めてならば、最初に [CSS レイアウト学習モジュール](/ja/docs/Learn/CSS/CSS_layout)を見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。
+> [!NOTE]
+> CSS のレイアウトが初めてならば、最初に [CSS レイアウト学習モジュール](/ja/docs/Learn/CSS/CSS_layout)を見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。
 
 ## レシピ
 
diff --git a/files/ja/web/css/layout_cookbook/list_group_with_badges/index.md b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.md
index c3249834e41df4..473e0e75528f1d 100644
--- a/files/ja/web/css/layout_cookbook/list_group_with_badges/index.md
+++ b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.md
@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/List_group_with_badges
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html)
 
diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.md b/files/ja/web/css/layout_cookbook/media_objects/index.md
index 366f240a64a638..176c78ea0d6bc6 100644
--- a/files/ja/web/css/layout_cookbook/media_objects/index.md
+++ b/files/ja/web/css/layout_cookbook/media_objects/index.md
@@ -23,7 +23,7 @@ slug: Web/CSS/Layout_cookbook/Media_objects
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 2700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロードする](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html)
 
@@ -45,7 +45,7 @@ slug: Web/CSS/Layout_cookbook/Media_objects
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 3000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html)
 
diff --git a/files/ja/web/css/layout_cookbook/pagination/index.md b/files/ja/web/css/layout_cookbook/pagination/index.md
index 9d5693022502b5..6aaf43b07656e6 100644
--- a/files/ja/web/css/layout_cookbook/pagination/index.md
+++ b/files/ja/web/css/layout_cookbook/pagination/index.md
@@ -21,7 +21,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/main/css-cookbook/pagination--download.html)
 
diff --git a/files/ja/web/css/layout_cookbook/split_navigation/index.md b/files/ja/web/css/layout_cookbook/split_navigation/index.md
index ed68fd7e83f8f4..ecad952373d8e3 100644
--- a/files/ja/web/css/layout_cookbook/split_navigation/index.md
+++ b/files/ja/web/css/layout_cookbook/split_navigation/index.md
@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/Split_Navigation
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html)
 
diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.md b/files/ja/web/css/layout_cookbook/sticky_footers/index.md
index 375f370fcdf669..944bead8b07202 100644
--- a/files/ja/web/css/layout_cookbook/sticky_footers/index.md
+++ b/files/ja/web/css/layout_cookbook/sticky_footers/index.md
@@ -20,11 +20,12 @@ slug: Web/CSS/Layout_cookbook/Sticky_footers
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html)
 
-> **メモ:** この例と以下の例では、ライブ例がうまくいくように、 wrapper に `min-height: 100%` に設定して使用しています。 また、{{htmlelement("body")}} の {{cssxref("min-height")}} を `100vh` に設定し、それをグリッドコンテナーとして使用することで、ページ全体でこれを実現することもできます。
+> [!NOTE]
+> この例と以下の例では、ライブ例がうまくいくように、 wrapper に `min-height: 100%` に設定して使用しています。 また、{{htmlelement("body")}} の {{cssxref("min-height")}} を `100vh` に設定し、それをグリッドコンテナーとして使用することで、ページ全体でこれを実現することもできます。
 
 ## 行った選択
 
diff --git a/files/ja/web/css/layout_mode/index.md b/files/ja/web/css/layout_mode/index.md
index 885f3d50c669bb..3ca5cd42d1d5b0 100644
--- a/files/ja/web/css/layout_mode/index.md
+++ b/files/ja/web/css/layout_mode/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/Layout_mode
 - [_フレックスボックスレイアウト_](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)は、滑らかに大きさが変更できる複雑なページのレイアウトに使われます。
 - [_グリッドレイアウト_](/ja/docs/Web/CSS/CSS_grid_layout)は、固定グリッドを基準にした要素配置に使われます。
 
-> **メモ:** レイアウトモードによって、使える [CSS プロパティ](/ja/docs/Web/CSS/Reference)に制限があります。多くは 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。
+> [!NOTE]
+> レイアウトモードによって、使える [CSS プロパティ](/ja/docs/Web/CSS/Reference)に制限があります。多くは 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。
 
 ## 関連情報
 
diff --git a/files/ja/web/css/length/index.md b/files/ja/web/css/length/index.md
index d439e5394b714e..e6b417e835905b 100644
--- a/files/ja/web/css/length/index.md
+++ b/files/ja/web/css/length/index.md
@@ -15,14 +15,16 @@ l10n:
 
 `<length>` データ型は一つの {{cssxref("&lt;number&gt;")}} とそれに続く以下に挙げる単位の一つから成ります。すべての CSS サイズと同様に、数値と単位リテラルの間に空白は置きません。数値が `0` の場合、長さの単位を指定することはオプションです。
 
-> **メモ:** 負の `<length>` 値を許容するプロパティとそうでないプロパティがあります。
+> [!NOTE]
+> 負の `<length>` 値を許容するプロパティとそうでないプロパティがあります。
 
 長さの[指定値](/ja/docs/Web/CSS/specified_value) (_specified length_) は、その量と単位で表します。長さの[計算値](/ja/docs/Web/CSS/computed_value) (_computed length_) は、指定した長さを絶対長に分解したもので、単位は判別されません。
 
 `<length>` の単位には相対的なものと絶対的なものがあります。相対的な長さは、他の距離から見た長さを表します。単位によって、この距離は特定の文字の大きさであったり、[行の高さ](/ja/docs/Web/CSS/line-height)であったり、{{Glossary("viewport", "ビューポート")}}の大きさであったりします。
 相対的な長さの単位を使用するスタイルシートは、ある出力環境から別の出力環境へ、より簡単に変倍することができます。
 
-> **メモ:** 子要素は親要素に指定した相対値を継承するのではなく、計算値を継承します。
+> [!NOTE]
+> 子要素は親要素に指定した相対値を継承するのではなく、計算値を継承します。
 
 ## 相対的な長さの単位
 
@@ -32,7 +34,8 @@ CSS の相対的な長さの単位は、フォント、コンテナー、ビュ
 
 フォントの長さは、 `<length>` の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性サイズで定義します。
 
-> **メモ:** これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更してもページの縦方向のリズムを維持する、変倍可能なレイアウトを作るためによく使われます。
+> [!NOTE]
+> これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更してもページの縦方向のリズムを維持する、変倍可能なレイアウトを作るためによく使われます。
 
 - `cap`
   - : その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。
@@ -91,17 +94,20 @@ CSS の相対的な長さの単位は、フォント、コンテナー、ビュ
 
     動的ビューポート単位は接頭辞 `dv` で表し、結果として `dv*` ビューポートパーセント値の単位になります。動的ビューポートパーセント値の単位のサイズは、ビューポート自体が変更されなくても安定しません。
 
-    > **メモ:** 動的ビューポートサイズはより細かく制御でき、柔軟性がありますが、動的ビューポートサイズに基づいてビューポートパーセント値の単位を使用すると、ユーザーがページをスクロールしている間にコンテンツのサイズを変更させる可能性があります。これはユーザーインターフェイスの劣化につながり、パフォーマンスヒットを発生させる可能性があります。
+    > [!NOTE]
+    > 動的ビューポートサイズはより細かく制御でき、柔軟性がありますが、動的ビューポートサイズに基づいてビューポートパーセント値の単位を使用すると、ユーザーがページをスクロールしている間にコンテンツのサイズを変更させる可能性があります。これはユーザーインターフェイスの劣化につながり、パフォーマンスヒットを発生させる可能性があります。
 
 - **既定ビューポートサイズ**
 
   - : 既定ビューポートサイズはブラウザーによって定義されます。ビューポートパーセント値の単位の動作結果は、小ビューポートサイズ、大ビューポートサイズ、 2 つの間の中間サイズ、動的ビューポートサイズのいずれかに基づくビューポートパーセント値の単位と同等になる可能性があります。
 
-    > **メモ:** 例えば、あるブラウザーは既定で高さのビューポートパーセント値の単位 (`vh`) を実装しているかもしれませんが、これは大ビューポートパーセント値の高さ単位 (`lvh`) と同じです。といった具合に、ブラウザーインターフェイスが展開されている間、全ページ表示のコンテンツが見えなくなる可能性があります。
+    > [!NOTE]
+    > 例えば、あるブラウザーは既定で高さのビューポートパーセント値の単位 (`vh`) を実装しているかもしれませんが、これは大ビューポートパーセント値の高さ単位 (`lvh`) と同じです。といった具合に、ブラウザーインターフェイスが展開されている間、全ページ表示のコンテンツが見えなくなる可能性があります。
 
 ビューポートパーセント値の長さは、 `<length>` を初期[包含ブロック](/ja/docs/Web/CSS/Containing_block)のサイズに対するパーセント値で定義し、この値は{{Glossary("viewport", "ビューポート")}}またはページ領域、つまり文書内の可視部分のサイズに基づいています。初期包含ブロックの高さや幅が変更されると、それに基づいてサイズ調整される要素はそれに応じて変倍されます。下記のように、ビューポートサイズのそれぞれに対応するビューポートパーセント値の長さの単位が変化します。
 
-> **メモ:** ビューポートの長さは {{cssxref("@page")}} 宣言ブロックでは無効になります。
+> [!NOTE]
+> ビューポートの長さは {{cssxref("@page")}} 宣言ブロックでは無効になります。
 
 - `vh`
 
@@ -183,7 +189,8 @@ CSS の相対的な長さの単位は、フォント、コンテナー、ビュ
 
 高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。
 
-> **メモ:** たくさんのユーザーが、テキストが読みやすくなるよう{{Glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、（`em` や `rem` のような）相対的な単位が適しています。
+> [!NOTE]
+> たくさんのユーザーが、テキストが読みやすくなるよう{{Glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、（`em` や `rem` のような）相対的な単位が適しています。
 
 - `px`
   - : 1 ピクセルです。画面表示では、伝統的に端末の 1 ピクセル (ドット) を表します。しかし、*プリンター*や*高解像度の画面*では、 CSS の 1 ピクセルが端末の複数ピクセルになることがあります。 `1px` = `1in / 96` です。
diff --git a/files/ja/web/css/list-style-image/index.md b/files/ja/web/css/list-style-image/index.md
index 2964a8c897c84b..af9bdc44bfb8a6 100644
--- a/files/ja/web/css/list-style-image/index.md
+++ b/files/ja/web/css/list-style-image/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/list-style-image
 
 {{EmbedInteractiveExample("pages/css/list-style-image.html")}}
 
-> **メモ:** このプロパティはリスト項目、つまり、`{{cssxref("display")}}: list-item;` が指定された要素に対して適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
+> [!NOTE]
+> このプロパティはリスト項目、つまり、`{{cssxref("display")}}: list-item;` が指定された要素に対して適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
 
 ## 構文
 
diff --git a/files/ja/web/css/list-style-position/index.md b/files/ja/web/css/list-style-position/index.md
index 28752482c639a5..775467680b8376 100644
--- a/files/ja/web/css/list-style-position/index.md
+++ b/files/ja/web/css/list-style-position/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/list-style-position
 
 多くの場合、一括指定の {{cssxref("list-style")}} を使ったほうが便利です。
 
-> **メモ:** このプロパティはリスト項目に対して適用されます。つまり、 `{{cssxref("display")}}: list-item;` が指定された要素です。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素が該当します。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
+> [!NOTE]
+> このプロパティはリスト項目に対して適用されます。つまり、 `{{cssxref("display")}}: list-item;` が指定された要素です。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素が該当します。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
 
 なお、 `list-style-position: inside` を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については [Firefox バグ 36854](https://bugzil.la/36854) をご覧ください。
 
diff --git a/files/ja/web/css/list-style/index.md b/files/ja/web/css/list-style/index.md
index 7ec7e003bb1a14..c99164ba4033a1 100644
--- a/files/ja/web/css/list-style/index.md
+++ b/files/ja/web/css/list-style/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/list-style
 
 {{EmbedInteractiveExample("pages/css/list-style.html")}}
 
-> **メモ:** このプロパティはリスト項目、すなわち `{{cssxref("display")}}: list-item;` の要素に適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists) {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。
+> [!NOTE]
+> このプロパティはリスト項目、すなわち `{{cssxref("display")}}: list-item;` の要素に適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists) {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/mask-border-slice/index.md b/files/ja/web/css/mask-border-slice/index.md
index a8a90e4aecc78c..fb9e60e22c0543 100644
--- a/files/ja/web/css/mask-border-slice/index.md
+++ b/files/ja/web/css/mask-border-slice/index.md
@@ -90,7 +90,8 @@ Chromium ベースのブラウザーは、このプロパティの古い版 —
 
 > **メモ:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。
 
-> **メモ:** fill キーワードは、要素の内容を表示したい場合には設定する必要があります。
+> [!NOTE]
+> fill キーワードは、要素の内容を表示したい場合には設定する必要があります。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/mask/index.md b/files/ja/web/css/mask/index.md
index cd9c910ebde7d4..2c0cd622661fde 100644
--- a/files/ja/web/css/mask/index.md
+++ b/files/ja/web/css/mask/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/mask
 
 **`mask`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、指定された位置での画像のマスクまたは切り取りによって要素を (部分的または全体的に) 隠します。
 
-> **メモ:** 以下のプロパティに加えて、`mask` 一括指定は {{cssxref("mask-border")}} を初期値にリセットします。そのため、カスケード内の初期のマスク設定を上書きするには、他の一括指定や個々のプロパティではなく、`mask` 一括指定を使用することをお勧めします。これにより、`mask-border` もリセットされ、新しいスタイルが適用されるようになります。
+> [!NOTE]
+> 以下のプロパティに加えて、`mask` 一括指定は {{cssxref("mask-border")}} を初期値にリセットします。そのため、カスケード内の初期のマスク設定を上書きするには、他の一括指定や個々のプロパティではなく、`mask` 一括指定を使用することをお勧めします。これにより、`mask-border` もリセットされ、新しいスタイルが適用されるようになります。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/max-block-size/index.md b/files/ja/web/css/max-block-size/index.md
index d3dc4759590188..d54ffadb283516 100644
--- a/files/ja/web/css/max-block-size/index.md
+++ b/files/ja/web/css/max-block-size/index.md
@@ -67,7 +67,8 @@ max-block-size: unset;
 
 > **メモ:** `writing-mode` の値のうち `sideways-lr` および `sideways-rl` は設計プロセスの後期に CSS 書字方向s Level 3 仕様書から削除されました。これらは Level 4 で復活する可能性があります。
 
-> **メモ:** 書字方向の `lr`, `lr-tb`, `rl`, `rb`, `rb-tl` は {{Glossary("HTML")}} のコンテキストでは許可されなくなりました。 {{Glossary("SVG")}} 1.x コンテキストでのみ利用できる可能性があります。
+> [!NOTE]
+> 書字方向の `lr`, `lr-tb`, `rl`, `rb`, `rb-tl` は {{Glossary("HTML")}} のコンテキストでは許可されなくなりました。 {{Glossary("SVG")}} 1.x コンテキストでのみ利用できる可能性があります。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/mozilla_extensions/index.md b/files/ja/web/css/mozilla_extensions/index.md
index 2d751a9aa944ab..d878f9aa96414c 100644
--- a/files/ja/web/css/mozilla_extensions/index.md
+++ b/files/ja/web/css/mozilla_extensions/index.md
@@ -9,7 +9,8 @@ Firefox などの Mozilla アプリケーションは、いくつもの特別な
 
 ## Mozilla 独自のプロパティと擬似クラス (ウェブサイトで使用しないでください)
 
-> **メモ:** これらのプロパティと擬似クラスは、Firefox などの Mozilla アプリケーション内でのみ動作するものであり、標準化されていません。これら標準外のプロパティの一部は、[XUL](/ja/docs/Mozilla/Tech/XUL) 要素にのみ適用されます。
+> [!NOTE]
+> これらのプロパティと擬似クラスは、Firefox などの Mozilla アプリケーション内でのみ動作するものであり、標準化されていません。これら標準外のプロパティの一部は、[XUL](/ja/docs/Mozilla/Tech/XUL) 要素にのみ適用されます。
 
 ### B
 
@@ -65,7 +66,8 @@ Firefox などの Mozilla アプリケーションは、いくつもの特別な
 
 ## 以前は独自だったが標準化されたもの
 
-> **メモ:** CSS の互換性を最大化するため、以下の接頭辞付きのものではなく、接頭辞なしの標準プロパティを使用してください。これらは、標準化されて接頭辞なしの形式が対応され次第、接頭辞付きのバージョンは順次破棄されます。
+> [!NOTE]
+> CSS の互換性を最大化するため、以下の接頭辞付きのものではなく、接頭辞なしの標準プロパティを使用してください。これらは、標準化されて接頭辞なしの形式が対応され次第、接頭辞付きのバージョンは順次破棄されます。
 
 ### A
 
diff --git a/files/ja/web/css/nesting_selector/index.md b/files/ja/web/css/nesting_selector/index.md
index 2e44ca518231f9..f503f5fe0db425 100644
--- a/files/ja/web/css/nesting_selector/index.md
+++ b/files/ja/web/css/nesting_selector/index.md
@@ -9,7 +9,8 @@ l10n:
 
 CSS の **`&` 入れ子セレクター**は、 [CSS 入れ子](/ja/docs/Web/CSS/CSS_nesting)を使用する場合に、親子ルールの関係を明示的に示します。このセレクターは、入れ子になっている子ルールのセレクターを親要素に対して相対的なものにします。入れ子セレクター `&` がない場合、子ルールセレクターは子要素を選択します。子ルールセレクターは {{cssxref(":is", ":is()")}} 内にあるのと同じ[詳細度](/ja/docs/Web/CSS/CSS_nesting/Nesting_and_specificity)の重みを持ちます。
 
-> **メモ:** 子ルールは子要素セレクターという意味ではありません。子ルールは `&` 入れ子セレクターを使用することによって、親要素を対象とすることも子要素を対象とすることもできます。
+> [!NOTE]
+> 子ルールは子要素セレクターという意味ではありません。子ルールは `&` 入れ子セレクターを使用することによって、親要素を対象とすることも子要素を対象とすることもできます。
 
 入れ子スタイルルールで使用しない場合、 `&` 入れ子セレクターは[スコープルート](/ja/docs/Web/CSS/:scope)を表します。
 
diff --git a/files/ja/web/css/object-position/index.md b/files/ja/web/css/object-position/index.md
index 919d4e1ecda475..b9019a9b044e9b 100644
--- a/files/ja/web/css/object-position/index.md
+++ b/files/ja/web/css/object-position/index.md
@@ -49,7 +49,8 @@ object-position: unset;
 - {{cssxref("&lt;position&gt;")}}
   - : 要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値です。相対値または絶対値のオフセットを指定できます。
 
-> **メモ:** 置換要素がボックス外にはみ出る位置も指定できます。
+> [!NOTE]
+> 置換要素がボックス外にはみ出る位置も指定できます。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/offset-rotate/index.md b/files/ja/web/css/offset-rotate/index.md
index df7603f5c66b90..85ded09d3aafcf 100644
--- a/files/ja/web/css/offset-rotate/index.md
+++ b/files/ja/web/css/offset-rotate/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/offset-rotate
 
 {{EmbedInteractiveExample("pages/css/offset-rotate.html")}}
 
-> **メモ:** 初期のころの仕様書では、このプロパティを `motion-rotation` と呼んでいました。
+> [!NOTE]
+> 初期のころの仕様書では、このプロパティを `motion-rotation` と呼んでいました。
 
 ## 構文
 
diff --git a/files/ja/web/css/offset/index.md b/files/ja/web/css/offset/index.md
index 5acf7173330ff2..90c9a52fd32a67 100644
--- a/files/ja/web/css/offset/index.md
+++ b/files/ja/web/css/offset/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/offset
 
 **`offset`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。
 
-> **メモ:** 仕様書の早期の版では、このプロパティを `motion` と呼んでいました。
+> [!NOTE]
+> 仕様書の早期の版では、このプロパティを `motion` と呼んでいました。
 
 {{EmbedInteractiveExample("pages/css/offset.html")}}
 
diff --git a/files/ja/web/css/outline/index.md b/files/ja/web/css/outline/index.md
index 9d4ec9c1db4485..d905761a01961c 100644
--- a/files/ja/web/css/outline/index.md
+++ b/files/ja/web/css/outline/index.md
@@ -44,7 +44,8 @@ outline: unset;
 
 `outline` プロパティは以下に挙げた 1 ～ 3 つの値を用いて指定することができます。値は順不同です。すべての一括指定プロパティと同様に、除外したサブ値はその[初期値](/ja/docs/Web/CSS/initial_value)に設定されます。
 
-> **メモ:** 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が `none` だからです。特筆すべき例外は `input` 要素で、ブラウザーが既定のスタイルを与えます。
+> [!NOTE]
+> 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が `none` だからです。特筆すべき例外は `input` 要素で、ブラウザーが既定のスタイルを与えます。
 
 ### 値
 
diff --git a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md
index 508539ab92fb53..a5425d11ef18e2 100644
--- a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md
+++ b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md
@@ -52,7 +52,8 @@ body {
 }
 ```
 
-> **メモ:** 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に `overflow-anchor: auto` を指定しても、その部分でスクロールアンカリングは動作しません。
+> [!NOTE]
+> 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に `overflow-anchor: auto` を指定しても、その部分でスクロールアンカリングは動作しません。
 
 ### 抑制トリガー
 
@@ -67,7 +68,8 @@ body {
 
 さらに、スクロールボックス内の任意の場所で {{cssxref("position")}} を変更した場合もスクロールアンカリングが無効になります。
 
-> **メモ:** バグ [Firefox バグ 1584285](https://bugzil.la/1584285) で、Firefox Nightly に `layout.css.scroll-anchoring.suppressions.enabled` フラグが追加され、これらのトリガーを無効化できるようになりました。
+> [!NOTE]
+> バグ [Firefox バグ 1584285](https://bugzil.la/1584285) で、Firefox Nightly に `layout.css.scroll-anchoring.suppressions.enabled` フラグが追加され、これらのトリガーを無効化できるようになりました。
 
 ## その他の解説
 
diff --git a/files/ja/web/css/overflow_value/index.md b/files/ja/web/css/overflow_value/index.md
index aa9037ab63d575..1371036ea9bd28 100644
--- a/files/ja/web/css/overflow_value/index.md
+++ b/files/ja/web/css/overflow_value/index.md
@@ -30,7 +30,8 @@ l10n:
 - `auto`
   - : はみ出したコンテンツは要素のパディングボックスで切り取られ、はみ出したコンテンツはスクロールして表示することができます。 `scroll` とは異なり、ユーザーエージェントはコンテンツがはみ出した場合のみスクロールバーを表示し、既定ではスクロールバーを非表示にします。コンテンツが要素のパディングボックス内に収まる場合、 `visible` と同じように見えますが、新しい整形コンテキストが確立されます。この値が設定された要素ボックスはスクロールコンテナーになります。
 
-> **メモ:** キーワード値 `overlay` は `auto` の古い値の別名です。 `overlay` を指定すると、スクロールバーは空間を占めるのではなく、コンテンツの上に描画されます。
+> [!NOTE]
+> キーワード値 `overlay` は `auto` の古い値の別名です。 `overlay` を指定すると、スクロールバーは空間を占めるのではなく、コンテンツの上に描画されます。
 
 ## 例
 
diff --git a/files/ja/web/css/overlay/index.md b/files/ja/web/css/overlay/index.md
index c01474c126408f..457ed3051d7de6 100644
--- a/files/ja/web/css/overlay/index.md
+++ b/files/ja/web/css/overlay/index.md
@@ -11,7 +11,8 @@ l10n:
 
 `overlay` はブラウザーによってのみ設定することができることに注意してください。作成者のスタイルは要素の `overlay` 値を変更することはできません。しかし、要素に設定する[トランジションする要素のリスト](/ja/docs/Web/CSS/transition-property)に `overlay` を追加することはできます。これにより、最上位レイヤーからの除去が延期され、すぐに消えずにアニメーションが発生するようになります。
 
-> **メモ:** オーバーレイ `overlay` のアニメーションをトランジションさせるには、 [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) を設定する必要があります。 `overlay` のアニメーションは通常の[離散アニメーション](/ja/docs/Web/CSS/CSS_animated_properties#離散)と異なり、開始状態か終了状態かに関わらず、可視状態（つまり `auto`）がトランジションの再生時間全体にわたって常に表示されます。
+> [!NOTE]
+> オーバーレイ `overlay` のアニメーションをトランジションさせるには、 [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) を設定する必要があります。 `overlay` のアニメーションは通常の[離散アニメーション](/ja/docs/Web/CSS/CSS_animated_properties#離散)と異なり、開始状態か終了状態かに関わらず、可視状態（つまり `auto`）がトランジションの再生時間全体にわたって常に表示されます。
 
 ## 構文
 
@@ -140,7 +141,8 @@ html {
 
 {{ EmbedLiveSample("Transitioning a popover", "100%", "200") }}
 
-> **メモ:** ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、出現トランジションのたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。
+> [!NOTE]
+> ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、出現トランジションのたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。
 >
 > このような場合、出現時と消滅時のスタイル設定を異なるものにすることが可能です。この証明は[スタイル設定を使用する場合のデモンストレーション](/ja/docs/Web/CSS/@starting-style#demonstration_of_when_starting_styles_are_used)の例を参照してください。
 
diff --git a/files/ja/web/css/padding/index.md b/files/ja/web/css/padding/index.md
index bb6f70a44f98ae..616255de7b8d46 100644
--- a/files/ja/web/css/padding/index.md
+++ b/files/ja/web/css/padding/index.md
@@ -13,7 +13,8 @@ l10n:
 
 要素のパディング領域とは、コンテンツと境界との間の領域のことです。
 
-> **メモ:** パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の*周り*に追加の領域を作成します。
+> [!NOTE]
+> パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の*周り*に追加の領域を作成します。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/page-break-after/index.md b/files/ja/web/css/page-break-after/index.md
index 068719bf9023c7..239c5dd8074938 100644
--- a/files/ja/web/css/page-break-after/index.md
+++ b/files/ja/web/css/page-break-after/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/page-break-after
 
 {{CSSRef}}
 
-> **警告:** このプロパティは {{cssxref("break-after")}} プロパティで置き換えられました。
+> [!WARNING]
+> このプロパティは {{cssxref("break-after")}} プロパティで置き換えられました。
 
 **`page-break-after`** は CSS のプロパティで、現在の要素の*後で*改ページが行われるように調整します。
 
diff --git a/files/ja/web/css/page-break-before/index.md b/files/ja/web/css/page-break-before/index.md
index 845afaa32f9375..4706ac157f359d 100644
--- a/files/ja/web/css/page-break-before/index.md
+++ b/files/ja/web/css/page-break-before/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/page-break-before
 
 {{CSSRef}}
 
-> **警告:** このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。
+> [!WARNING]
+> このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。
 
 **`page-break-before`** CSS プロパティは、現在の要素の*前で*改ページが行われるように調整します。
 
diff --git a/files/ja/web/css/page-break-inside/index.md b/files/ja/web/css/page-break-inside/index.md
index 89a8ae10c75c89..1d383f818bf675 100644
--- a/files/ja/web/css/page-break-inside/index.md
+++ b/files/ja/web/css/page-break-inside/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/page-break-inside
 
 {{CSSRef}}
 
-> **警告:** このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。
+> [!WARNING]
+> このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。
 
 CSS の **`page-break-inside`** プロパティは、現在の要素の*内側の* 改ページを調整します。
 
diff --git a/files/ja/web/css/paint-order/index.md b/files/ja/web/css/paint-order/index.md
index c60efb1c0ad564..b883a77b0c04d0 100644
--- a/files/ja/web/css/paint-order/index.md
+++ b/files/ja/web/css/paint-order/index.md
@@ -26,7 +26,8 @@ paint-order: markers stroke fill; /* マーカー、輪郭、塗りつぶしの
 
 一つの値で指定されると、それが最初に描画され、続いて他の二つが互いの既定の順序で描画されます。二つの値が指定されると、指定された順序で描画を行い、続いて指定されなかった一つが描画されます。
 
-> **メモ:** このプロパティの場合、マーカーは `marker-*` プロパティ (例えば [`marker-start`](/ja/docs/Web/SVG/Attribute/marker-start)) および [`<marker>`](/ja/docs/Web/SVG/Element/marker) 要素を使用した SVG 図形を描く場合のみ適用されます。 HTML テキストには適用されませんので、その場合は `stroke` および `fill` の順序のみが指定できます。
+> [!NOTE]
+> このプロパティの場合、マーカーは `marker-*` プロパティ (例えば [`marker-start`](/ja/docs/Web/SVG/Attribute/marker-start)) および [`<marker>`](/ja/docs/Web/SVG/Element/marker) 要素を使用した SVG 図形を描く場合のみ適用されます。 HTML テキストには適用されませんので、その場合は `stroke` および `fill` の順序のみが指定できます。
 
 ### 値
 
diff --git a/files/ja/web/css/percentage/index.md b/files/ja/web/css/percentage/index.md
index 8487f99ab02955..7b68aaabb80cc6 100644
--- a/files/ja/web/css/percentage/index.md
+++ b/files/ja/web/css/percentage/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<percentage>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 {{CSSxRef("width")}}、 {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}、 {{CSSxRef("font-size")}} など、たくさんのプロパティでパーセント値を使うことができます。
 
-> **メモ:** 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("&lt;length&gt;")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。
+> [!NOTE]
+> 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("&lt;length&gt;")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。
 
 ## 構文
 
diff --git a/files/ja/web/css/place-content/index.md b/files/ja/web/css/place-content/index.md
index 1cc318452241f0..f73af67bbb327b 100644
--- a/files/ja/web/css/place-content/index.md
+++ b/files/ja/web/css/place-content/index.md
@@ -48,7 +48,8 @@ place-content: unset;
 
 最初の値は {{CSSxRef("align-content")}} プロパティの値で、2 番目の値は {{CSSxRef("justify-content")}} の値です。
 
-> **メモ:** 2 番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。
+> [!NOTE]
+> 2 番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。
 
 ### 値
 
diff --git a/files/ja/web/css/position/index.md b/files/ja/web/css/position/index.md
index aabc713ca3a8ef..f59ab832fb2d09 100644
--- a/files/ja/web/css/position/index.md
+++ b/files/ja/web/css/position/index.md
@@ -56,7 +56,8 @@ position: unset;
 
     この値は、常に新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)を生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先（`overflow` が `hidden`, `scroll`, `auto`, `overlay` として作成されたもの）に「粘着」します。
 
-    > **メモ:** 要素を粘着させる必要がある軸に対して、少なくとも 1 つの [inset](/ja/docs/Web/CSS/inset) プロパティ（{{cssxref("top")}}, {{cssxref("inset-block-start")}}, {{cssxref("right")}}, {{cssxref("inset-inline-end")}} など）を `auto` 以外の値に設定する必要があります。軸の `inset` プロパティが両方とも `auto` に設定されている場合、その軸では `sticky` 値は `relative` として動作します。
+    > [!NOTE]
+    > 要素を粘着させる必要がある軸に対して、少なくとも 1 つの [inset](/ja/docs/Web/CSS/inset) プロパティ（{{cssxref("top")}}, {{cssxref("inset-block-start")}}, {{cssxref("right")}}, {{cssxref("inset-inline-end")}} など）を `auto` 以外の値に設定する必要があります。軸の `inset` プロパティが両方とも `auto` に設定されている場合、その軸では `sticky` 値は `relative` として動作します。
 
 ## 解説
 
diff --git a/files/ja/web/css/pseudo-classes/index.md b/files/ja/web/css/pseudo-classes/index.md
index 696df0d034da35..5baaf3feb48e5a 100644
--- a/files/ja/web/css/pseudo-classes/index.md
+++ b/files/ja/web/css/pseudo-classes/index.md
@@ -20,7 +20,8 @@ button:hover {
 
 擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴（例えば {{CSSxRef(":visited")}}）、内容物の状態（例えばフォーム要素における {{CSSxRef(":checked")}}）、マウスポインターの位置（例えばマウスポインターが要素上にあるかを知ることができる {{CSSxRef(":hover")}}）といった外的要因との関係についてスタイルを適用することができるようになります。
 
-> **メモ:** 擬似クラスとは対照的に、[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は要素の*特定の部分*にスタイルを適用するために使います。
+> [!NOTE]
+> 擬似クラスとは対照的に、[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は要素の*特定の部分*にスタイルを適用するために使います。
 
 ## 表示状態擬似クラス
 
diff --git a/files/ja/web/css/pseudo-elements/index.md b/files/ja/web/css/pseudo-elements/index.md
index 1adc90ee233eb2..fc5fcba7fb8149 100644
--- a/files/ja/web/css/pseudo-elements/index.md
+++ b/files/ja/web/css/pseudo-elements/index.md
@@ -82,7 +82,8 @@ T
 
 - {{CSSxRef("::target-text")}} {{Experimental_Inline}}
 
-> **メモ:** ブラウザーは元の 4 つの擬似要素、 `::before`、`::after`、`::first-line`、`::first-letter` のみで単一コロンの構文に対応しています。
+> [!NOTE]
+> ブラウザーは元の 4 つの擬似要素、 `::before`、`::after`、`::first-line`、`::first-letter` のみで単一コロンの構文に対応しています。
 
 ## 仕様書
 
diff --git a/files/ja/web/css/reference/index.md b/files/ja/web/css/reference/index.md
index fa927d2d4acd4f..a3fc7e07fbed34 100644
--- a/files/ja/web/css/reference/index.md
+++ b/files/ja/web/css/reference/index.md
@@ -53,7 +53,8 @@ div.menu-bar li:hover > ul {
 
 ## 索引
 
-> **メモ:** この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。
+> [!NOTE]
+> この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。
 
 {{CSS_Ref}}
 
diff --git a/files/ja/web/css/resolution/index.md b/files/ja/web/css/resolution/index.md
index 34d1d5c6ba89f4..611ed492f86e3c 100644
--- a/files/ja/web/css/resolution/index.md
+++ b/files/ja/web/css/resolution/index.md
@@ -26,7 +26,8 @@ l10n:
 - `x`
   - : `dppx` の別名です。
 
-> **メモ:** 仮に値 `0` に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると `0` は無効で、`0dpi`、`0dpcm`、`0dppx` のどれも表しません。
+> [!NOTE]
+> 仮に値 `0` に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると `0` は無効で、`0dpi`、`0dpcm`、`0dppx` のどれも表しません。
 
 ## 例
 
diff --git a/files/ja/web/css/revert/index.md b/files/ja/web/css/revert/index.md
index 411e9497c1e3bb..5e3a67ecbe1437 100644
--- a/files/ja/web/css/revert/index.md
+++ b/files/ja/web/css/revert/index.md
@@ -19,7 +19,8 @@ l10n:
 
 revert は、リセットした要素の子に適用されているルールには影響しません（ただし、子に対する親のルールの効果は除去されます）。つまり、すべてのセクションに `color: green` を設定し、特定のセクションに `all: revert` を設定した場合、そのセクションの色は黒になります。しかし、すべての段落を赤にするルールがある場合、すべての段落はすべてのセクションで赤のままです。
 
-> **メモ:** revert は単なる値です。 `revert` の値は[詳細度](/ja/docs/Web/CSS/Specificity)を使用して上書きすることができます。
+> [!NOTE]
+> revert は単なる値です。 `revert` の値は[詳細度](/ja/docs/Web/CSS/Specificity)を使用して上書きすることができます。
 
 > **メモ:** `revert` キーワードは {{cssxref("initial")}} キーワードとは異なりますし、混同しないでください。これは CSS の仕様書でプロパティごとに定義された[初期値](/ja/docs/Web/CSS/initial_value)です。それに対して、既定値はユーザーエージェントのスタイルシートが CSS セレクターに基づいて定義しています。
 >
diff --git a/files/ja/web/css/scaling_of_svg_backgrounds/index.md b/files/ja/web/css/scaling_of_svg_backgrounds/index.md
index a4ae1537e71e2e..fd82a0cd470727 100644
--- a/files/ja/web/css/scaling_of_svg_backgrounds/index.md
+++ b/files/ja/web/css/scaling_of_svg_backgrounds/index.md
@@ -20,7 +20,8 @@ SVG 画像の柔軟性を踏まえると、{{ cssxref("background-image") }} プ
 
 注目すべきは、サイズ調整アルゴリズムは画像の寸法と比率、あるいはその有無にしか注意を払わないということです。固定された寸法の SVG 画像は、同じサイズのラスター画像と同じように扱われます。
 
-> **メモ:** CSS で SVG を異なる縦横比に引き伸ばそうとする場合、例えばページの背景に引き伸ばそうとする場合、 SVG に `preserveAspectRatio="none"` が含まれていることを確認してください。詳しくは {{svgattr("preserveAspectRatio")}} を探して下さい。
+> [!NOTE]
+> CSS で SVG を異なる縦横比に引き伸ばそうとする場合、例えばページの背景に引き伸ばそうとする場合、 SVG に `preserveAspectRatio="none"` が含まれていることを確認してください。詳しくは {{svgattr("preserveAspectRatio")}} を探して下さい。
 
 ## ソース画像の例
 
@@ -66,7 +67,8 @@ SVG 画像の柔軟性を踏まえると、{{ cssxref("background-image") }} プ
 
 これで、この画像に異なる拡大縮小をするとどうなるかの例を見てみましょう。下記の例では、長方形は幅 300 ピクセル、高さ 200 ピクセルです。また、背景には {{ cssxref("background-repeat") }} があり、わかりやすくするために no-repeat に設定されています。
 
-> **メモ:** 下記のスクリーンショットは、**期待される**レンダリングを示しています。現在、すべてのブラウザーで正しく表示されるわけではありません。
+> [!NOTE]
+> 下記のスクリーンショットは、**期待される**レンダリングを示しています。現在、すべてのブラウザーで正しく表示されるわけではありません。
 
 ### 両方の寸法が固定長に指定されている場合
 
diff --git a/files/ja/web/css/scroll-margin-inline/index.md b/files/ja/web/css/scroll-margin-inline/index.md
index 06babe6c364b10..1617d53747647d 100644
--- a/files/ja/web/css/scroll-margin-inline/index.md
+++ b/files/ja/web/css/scroll-margin-inline/index.md
@@ -124,7 +124,8 @@ scroll-margin 系のプロパティは、このボックスをスナップポー
 
 つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの末尾から `1rem`、3 番目の `<div>` のインラインの末尾から `2rem` のところでスナップすることになります。
 
-> **メモ:** ここでは `scroll-margin` をインライン軸 (この場合は X 軸) の先頭*と*末尾に一度に設定していますが、実際に関係するのは末尾側だけです。例えば `scroll-margin-inline: 0 1rem` や `scroll-margin-inline-end: 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。
+> [!NOTE]
+> ここでは `scroll-margin` をインライン軸 (この場合は X 軸) の先頭*と*末尾に一度に設定していますが、実際に関係するのは末尾側だけです。例えば `scroll-margin-inline: 0 1rem` や `scroll-margin-inline-end: 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。
 
 #### 結果
 
diff --git a/files/ja/web/css/scroll-margin/index.md b/files/ja/web/css/scroll-margin/index.md
index 2de6037e28800f..f432cc9213d722 100644
--- a/files/ja/web/css/scroll-margin/index.md
+++ b/files/ja/web/css/scroll-margin/index.md
@@ -128,7 +128,8 @@ scroll-margin: unset;
 
 つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` の左端から `1rem`、3 番目の `<div>` の左端から `2rem` のところでスナップすることになります。
 
-> **メモ:** ここでは `scroll-margin` をすべての辺に一度に設定していますが、実際に関係するのは先頭側だけです。例えば `scroll-margin-inline-start: 1rem` や `scroll-margin: 0 0 0 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。
+> [!NOTE]
+> ここでは `scroll-margin` をすべての辺に一度に設定していますが、実際に関係するのは先頭側だけです。例えば `scroll-margin-inline-start: 1rem` や `scroll-margin: 0 0 0 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。
 
 #### 結果
 
diff --git a/files/ja/web/css/scroll-timeline-axis/index.md b/files/ja/web/css/scroll-timeline-axis/index.md
index 6a28ccc73dc534..7793652de49327 100644
--- a/files/ja/web/css/scroll-timeline-axis/index.md
+++ b/files/ja/web/css/scroll-timeline-axis/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`scroll-timeline-axis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロール可能な要素（_スクローラー_）を上下（または左右）にスクロールすることで進行する _名前付きスクロール進行タイムライン_ アニメーションのタイムラインを提供するために使用されるスクロールバーの方向を指定するために使用します。 `scroll-timeline` はタイムラインを提供するスクローラーに設定します。詳しくは [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を参照してください。
 
-> **メモ:** スクローラー要素が軸方向のコンテナーをはみ出さないか、はみ出した部分が隠されているかクリップされている場合、スクロール進行タイムラインは作成されません。
+> [!NOTE]
+> スクローラー要素が軸方向のコンテナーをはみ出さないか、はみ出した部分が隠されているかクリップされている場合、スクロール進行タイムラインは作成されません。
 
 `scroll-timeline-axis` および {{cssxref("scroll-timeline-name")}} プロパティは [`scroll-timeline`](/ja/docs/Web/CSS/scroll-timeline) 一括指定プロパティを使用して設定することもできます。
 
diff --git a/files/ja/web/css/scroll-timeline-name/index.md b/files/ja/web/css/scroll-timeline-name/index.md
index 84f8eaa1492544..1f4234cd182184 100644
--- a/files/ja/web/css/scroll-timeline-name/index.md
+++ b/files/ja/web/css/scroll-timeline-name/index.md
@@ -11,7 +11,8 @@ l10n:
 
 この名前はその後、 [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) 宣言で参照され、スクロールアクションを通してアニメーションの進行を使用するコンテナーの要素を示します。
 
-> **メモ:** 要素が軸方向の寸法においてそのコンテナーをオーバーフローしない場合、またはオーバーフローが非表示またはクリップされる場合、タイムラインは作成されません。
+> [!NOTE]
+> 要素が軸方向の寸法においてそのコンテナーをオーバーフローしない場合、またはオーバーフローが非表示またはクリップされる場合、タイムラインは作成されません。
 
 {{cssxref("scroll-timeline-axis")}} および `scroll-timeline-name` プロパティは [`scroll-timeline`](/ja/docs/Web/CSS/scroll-timeline) 一括指定プロパティを使用して設定することもできます。
 
diff --git a/files/ja/web/css/scroll-timeline/index.md b/files/ja/web/css/scroll-timeline/index.md
index 08aa8ee8ad1a75..f670266e617907 100644
--- a/files/ja/web/css/scroll-timeline/index.md
+++ b/files/ja/web/css/scroll-timeline/index.md
@@ -13,7 +13,8 @@ l10n:
 
 この名前は、[`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) 宣言で参照され、スクロールアクションを通してアニメーションの進行を使用するコンテナーの要素を示します。
 
-> **メモ:** スクローラーが軸方向の寸法でコンテナーをオーバーフローしない場合、またはオーバーフローが非表示またはクリッピングされている場合、タイムラインは作成されません。
+> [!NOTE]
+> スクローラーが軸方向の寸法でコンテナーをオーバーフローしない場合、またはオーバーフローが非表示またはクリッピングされている場合、タイムラインは作成されません。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/scrollbar-color/index.md b/files/ja/web/css/scrollbar-color/index.md
index a7d64bb9740401..c5e99d6e963df3 100644
--- a/files/ja/web/css/scrollbar-color/index.md
+++ b/files/ja/web/css/scrollbar-color/index.md
@@ -53,7 +53,8 @@ scrollbar-color: unset;
       </tbody>
     </table>
 
-    > **メモ:** ユーザーエージェントはビューポートのルート要素に、何らかの `scrollbar-color` の値を適用しなければなりません。
+    > [!NOTE]
+    > ユーザーエージェントはビューポートのルート要素に、何らかの `scrollbar-color` の値を適用しなければなりません。
 
 ## アクセシビリティの考慮
 
diff --git a/files/ja/web/css/scrollbar-width/index.md b/files/ja/web/css/scrollbar-width/index.md
index 8ec757213a8130..15b9dd00ee152c 100644
--- a/files/ja/web/css/scrollbar-width/index.md
+++ b/files/ja/web/css/scrollbar-width/index.md
@@ -49,7 +49,8 @@ scrollbar-width: unset;
       </tbody>
     </table>
 
-    > **メモ:** ユーザーエージェントは、ビューポートのルート要素に何らかの `scrollbar-width` の値を設定する必要があります。
+    > [!NOTE]
+    > ユーザーエージェントは、ビューポートのルート要素に何らかの `scrollbar-width` の値を設定する必要があります。
 
 ## アクセシビリティの考慮
 
diff --git a/files/ja/web/css/specificity/index.md b/files/ja/web/css/specificity/index.md
index f433209e5c30e1..c346c8c936c2bb 100644
--- a/files/ja/web/css/specificity/index.md
+++ b/files/ja/web/css/specificity/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/Specificity
 
 **詳細度** (Specificity) は、ある要素に最も関連性の高い [CSS 宣言](/ja/docs/Learn/CSS/First_steps/What_is_CSS#css_の構文)を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、[CSS セレクター](/ja/docs/Web/CSS/Reference#セレクター)の重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。
 
-> **メモ:** ブラウザーは、[カスケードのオリジンと重要度](/ja/docs/Web/CSS/Cascade)を決定した後に、詳細度を検討します。言い換えれば、プロパティ宣言が競合している場合、そのプロパティの優先順位を保有する 1 つの[カスケードのオリジンとレイヤー](/ja/docs/Web/CSS/@layer)のセレクター間でのみ、詳細度が関連し比較されます。優先順位を持つカスケードレイヤーで競合する宣言のセレクターの詳細度が等しいとき、出現順序が関連するようになります。
+> [!NOTE]
+> ブラウザーは、[カスケードのオリジンと重要度](/ja/docs/Web/CSS/Cascade)を決定した後に、詳細度を検討します。言い換えれば、プロパティ宣言が競合している場合、そのプロパティの優先順位を保有する 1 つの[カスケードのオリジンとレイヤー](/ja/docs/Web/CSS/@layer)のセレクター間でのみ、詳細度が関連し比較されます。優先順位を持つカスケードレイヤーで競合する宣言のセレクターの詳細度が等しいとき、出現順序が関連するようになります。
 
 ## 詳細度の計算方法
 
diff --git a/files/ja/web/css/syntax/index.md b/files/ja/web/css/syntax/index.md
index 529e5aef5f8bd8..0c1e45475bc665 100644
--- a/files/ja/web/css/syntax/index.md
+++ b/files/ja/web/css/syntax/index.md
@@ -32,7 +32,8 @@ CSS 宣言ブロックは以下の図のように表すことができます。
 
 ![css syntax - declarations block.png](declaration-block.png)
 
-> **メモ:** 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の [`style`](/ja/docs/Web/HTML/Global_attributes#style) 属性の中に置くことができます。
+> [!NOTE]
+> 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の [`style`](/ja/docs/Web/HTML/Global_attributes#style) 属性の中に置くことができます。
 
 ## CSS のルールセット
 
@@ -46,7 +47,8 @@ CSS のルールセット (またはルール) は下記の図のように表現
 
 ページの要素は複数のセレクターに一致する可能性があり、あるプロパティが複数のルールで異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用しなければならないことを定義しています。これを[カスケード](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)アルゴリズムと呼びます。
 
-> **メモ:** 単一のセレクターで構成されるルールセットを複数まとめて表記する方法の一つとして、ルールセットをセレクターの集合で記述することが挙げられますが、各ルールセットの妥当性を上手くまとめるものではない点に注意しましょう。
+> [!NOTE]
+> 単一のセレクターで構成されるルールセットを複数まとめて表記する方法の一つとして、ルールセットをセレクターの集合で記述することが挙げられますが、各ルールセットの妥当性を上手くまとめるものではない点に注意しましょう。
 >
 > 基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、*セレクター*全体が妥当ではないこととなり、ルール全体も (妥当ではないものとして) 無視されます。</div>
 
diff --git a/files/ja/web/css/text-decoration-skip/index.md b/files/ja/web/css/text-decoration-skip/index.md
index ba04c2bfa8c886..26ac09a303c3c3 100644
--- a/files/ja/web/css/text-decoration-skip/index.md
+++ b/files/ja/web/css/text-decoration-skip/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/text-decoration-skip
 
 **`text-decoration-skip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。
 
-> **メモ:** 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。
+> [!NOTE]
+> 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。
 
 ```css
 /* キーワード値 */
diff --git a/files/ja/web/css/text-decoration-thickness/index.md b/files/ja/web/css/text-decoration-thickness/index.md
index 771713c5bf4f2b..939758edecdc0e 100644
--- a/files/ja/web/css/text-decoration-thickness/index.md
+++ b/files/ja/web/css/text-decoration-thickness/index.md
@@ -91,7 +91,8 @@ text-decoration-thickness: unset;
 
 {{Specifications}}
 
-> **メモ:** このプロパティは `text-decoration-width` と呼ばれていましたが、 2019 年に `text-decoration-thickness` に更新されました。
+> [!NOTE]
+> このプロパティは `text-decoration-width` と呼ばれていましたが、 2019 年に `text-decoration-thickness` に更新されました。
 
 ## ブラウザーの互換性
 
diff --git a/files/ja/web/css/text-rendering/index.md b/files/ja/web/css/text-rendering/index.md
index 72672934f3bb5f..e4e1a4be683792 100644
--- a/files/ja/web/css/text-rendering/index.md
+++ b/files/ja/web/css/text-rendering/index.md
@@ -45,7 +45,8 @@ text-rendering: unset;
 
     しかし、 `geometricPrecision` は — レンダリングエンジンが完全に対応していれば — なめらかにテキストを拡縮することができます。倍率が大きい場合、文字列の描画があまり美しくならないかもしれませんが、寸法は Windows や Linux が対応しているフォントの大きさに切り上げられたり切り捨てられたりせず、期待通りになります。
 
-    > **メモ:** WebKit は指定された値を厳密に適用しますが、 Gecko は値を `optimizeLegibility` と同様に扱います。
+    > [!NOTE]
+    > WebKit は指定された値を厳密に適用しますが、 Gecko は値を `optimizeLegibility` と同様に扱います。
 
 ## 公式定義
 
diff --git a/files/ja/web/css/text-transform/index.md b/files/ja/web/css/text-transform/index.md
index 921928914ca5ae..bf70fc781f3728 100644
--- a/files/ja/web/css/text-transform/index.md
+++ b/files/ja/web/css/text-transform/index.md
@@ -22,7 +22,8 @@ l10n:
 
 言語は HTML の [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性や XML の [`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性で定義します。
 
-> **メモ:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。
+> [!NOTE]
+> これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。
 
 ## 構文
 
diff --git a/files/ja/web/css/text-wrap-mode/index.md b/files/ja/web/css/text-wrap-mode/index.md
index 005ed77201b6ac..8dacd8c24001f2 100644
--- a/files/ja/web/css/text-wrap-mode/index.md
+++ b/files/ja/web/css/text-wrap-mode/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`text-wrap-mode`** は CSS プロパティで、要素内のテキストを折り返すかどうかを制御します。様々な値で、ブロック要素のコンテンツを折り返す代替方法を提供します。また、{{CSSXRef("text-wrap")}} の一括指定を使って設定したり、リセットしたりすることができます。
 
-> **メモ:** このプロパティの名前は、 CSSWG がより良い名前を探すまでのプレースホルダーです。
+> [!NOTE]
+> このプロパティの名前は、 CSSWG がより良い名前を探すまでのプレースホルダーです。
 
 {{EmbedInteractiveExample("pages/css/text-wrap-mode.html")}}
 
@@ -47,7 +48,8 @@ text-wrap-style: unset;
 
 ## 例
 
-> **メモ:** このプロパティのブラウザーの対応状況を調べてください。
+> [!NOTE]
+> このプロパティのブラウザーの対応状況を調べてください。
 
 ### 折り返すコンテンツ
 
diff --git a/files/ja/web/css/time/index.md b/files/ja/web/css/time/index.md
index 6379c53964c2c0..aaf42eb657b66d 100644
--- a/files/ja/web/css/time/index.md
+++ b/files/ja/web/css/time/index.md
@@ -13,7 +13,8 @@ l10n:
 
 `<time>` データ型は、 {{cssxref("&lt;number&gt;")}} の直後に下記の単位を続けます。省略可能ですが、その前に単一の `+` または `-` を付けることもあります。どの単位の場合も、単位と数字との間には空白を置きません。
 
-> **メモ:** 数値の `0` は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効であり、 `0s` または `0ms` を表すものではありません。
+> [!NOTE]
+> 数値の `0` は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効であり、 `0s` または `0ms` を表すものではありません。
 
 ### 単位
 
diff --git a/files/ja/web/css/touch-action/index.md b/files/ja/web/css/touch-action/index.md
index ba3785a49c0136..0df0b1ed53d19f 100644
--- a/files/ja/web/css/touch-action/index.md
+++ b/files/ja/web/css/touch-action/index.md
@@ -31,7 +31,8 @@ touch-action: unset;
 
 ジェスチャーが開始されると、ブラウザーはタッチ要素の `touch-action` の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 `touch-action` は通常、その要素の子孫のいずれかに `touch-action` を明示的に指定する必要なく、独自の動作を持つ最上位の要素にのみ適用されます。
 
-> **メモ:** ジェスチャーが開始された後、 `touch-action` の値を変更しても、現在のジェスチャーの動作には影響を与えません。
+> [!NOTE]
+> ジェスチャーが開始された後、 `touch-action` の値を変更しても、現在のジェスチャーの動作には影響を与えません。
 
 ## 構文
 
diff --git a/files/ja/web/css/transform-function/index.md b/files/ja/web/css/transform-function/index.md
index bc7ac7f40a6354..dc84f115c5e02f 100644
--- a/files/ja/web/css/transform-function/index.md
+++ b/files/ja/web/css/transform-function/index.md
@@ -103,9 +103,11 @@ CSS (および多くのコンピューターグラフィック) では、原点
 
 しかし、主要な座標変換のうち平行移動は線形ではなく、従ってこの記法を使用する場合は特例とする必要があります。平行移動のベクトル `(tx, ty)` は、二つの追加の引数で別に表現しなければなりません。
 
-> **メモ:** 直交座標よりも難解ですが、[射影幾何学](https://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E5%B9%BE%E4%BD%95%E5%AD%A6)の[同次座標](https://en.wikipedia.org/wiki/Homogeneous_coordinates)は 3 × 3 の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。
+> [!NOTE]
+> 直交座標よりも難解ですが、[射影幾何学](https://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E5%B9%BE%E4%BD%95%E5%AD%A6)の[同次座標](https://en.wikipedia.org/wiki/Homogeneous_coordinates)は 3 × 3 の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。
 
-> **メモ:** 座標変換関数は `transform` プロパティで使用されますが、個々の変換プロパティ（{{cssxref("translate")}}、{{cssxref("scale")}}、{{cssxref("rotate")}}）では使用されません。
+> [!NOTE]
+> 座標変換関数は `transform` プロパティで使用されますが、個々の変換プロパティ（{{cssxref("translate")}}、{{cssxref("scale")}}、{{cssxref("rotate")}}）では使用されません。
 
 ## 例
 
diff --git a/files/ja/web/css/transform-function/rotate3d/index.md b/files/ja/web/css/transform-function/rotate3d/index.md
index f1ab6388822837..fa11efe3b8002b 100644
--- a/files/ja/web/css/transform-function/rotate3d/index.md
+++ b/files/ja/web/css/transform-function/rotate3d/index.md
@@ -13,7 +13,8 @@ l10n:
 
 3D 空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル \[0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。
 
-> **メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+> [!NOTE]
+> 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
 
 ## 構文
 
diff --git a/files/ja/web/css/transform-function/rotatex/index.md b/files/ja/web/css/transform-function/rotatex/index.md
index 59a511921f8779..8ebe83d7bb434f 100644
--- a/files/ja/web/css/transform-function/rotatex/index.md
+++ b/files/ja/web/css/transform-function/rotatex/index.md
@@ -15,7 +15,8 @@ l10n:
 
 > **メモ:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。
 
-> **メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+> [!NOTE]
+> 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
 
 ## 構文
 
diff --git a/files/ja/web/css/transform-function/rotatey/index.md b/files/ja/web/css/transform-function/rotatey/index.md
index bb6dbf2a8b2a01..5704dfd2455188 100644
--- a/files/ja/web/css/transform-function/rotatey/index.md
+++ b/files/ja/web/css/transform-function/rotatey/index.md
@@ -15,7 +15,8 @@ l10n:
 
 > **メモ:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。
 
-> **メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+> [!NOTE]
+> 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
 
 ## 構文
 
diff --git a/files/ja/web/css/transform-function/rotatez/index.md b/files/ja/web/css/transform-function/rotatez/index.md
index 06ce4670188924..e63e06fdaa9aa7 100644
--- a/files/ja/web/css/transform-function/rotatez/index.md
+++ b/files/ja/web/css/transform-function/rotatez/index.md
@@ -15,7 +15,8 @@ l10n:
 
 > **メモ:** `rotateZ(a)` は `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。
 
-> **メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+> [!NOTE]
+> 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
 
 ## 構文
 
diff --git a/files/ja/web/css/transform-function/translatez/index.md b/files/ja/web/css/transform-function/translatez/index.md
index dd27645d278a67..d9adc4e0f079a4 100644
--- a/files/ja/web/css/transform-function/translatez/index.md
+++ b/files/ja/web/css/transform-function/translatez/index.md
@@ -105,7 +105,8 @@ div {
 
 なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。
 
-> **メモ:** 変換の合成は交換可能ではないので、異なる関数を書く順番は重要です。具体的な例として、一般的には `perspective()` を `translateZ()` の前に配置します。
+> [!NOTE]
+> 変換の合成は交換可能ではないので、異なる関数を書く順番は重要です。具体的な例として、一般的には `perspective()` を `translateZ()` の前に配置します。
 
 ### 結果
 
diff --git a/files/ja/web/css/transform/index.md b/files/ja/web/css/transform/index.md
index 01d743a8c29948..6fca8d57f2a69d 100644
--- a/files/ja/web/css/transform/index.md
+++ b/files/ja/web/css/transform/index.md
@@ -13,7 +13,8 @@ l10n:
 
 このプロパティに `none` 以外の値が設定されていると、[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)が作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` であるすべての要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)として扱われます。
 
-> **警告:** 座標変換可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、[置換要素でないインラインボックス](/ja/docs/Glossary/Inline-level_content)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)を除くすべての要素です。
+> [!WARNING]
+> 座標変換可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、[置換要素でないインラインボックス](/ja/docs/Glossary/Inline-level_content)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)を除くすべての要素です。
 
 ## 構文
 
diff --git a/files/ja/web/css/transition-behavior/index.md b/files/ja/web/css/transition-behavior/index.md
index 8f721c6af00326..fb1e7e3ab1615a 100644
--- a/files/ja/web/css/transition-behavior/index.md
+++ b/files/ja/web/css/transition-behavior/index.md
@@ -162,7 +162,8 @@ html {
 
 {{ EmbedLiveSample("Transitioning a popover", "100%", "200") }}
 
-> **メモ:** ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、表示トランジションが発生するたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。
+> [!NOTE]
+> ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、表示トランジションが発生するたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。
 >
 > このような場合、出現時と消滅時で異なるスタイル設定が可能です。この例については、[開始スタイルを使用する場合のデモ](/ja/docs/Web/CSS/@starting-style#開始スタイルを使用する場合のデモ)を参照してください。
 
diff --git a/files/ja/web/css/unicode-bidi/index.md b/files/ja/web/css/unicode-bidi/index.md
index 7b7b2594232cd8..a7d3eb464cd467 100644
--- a/files/ja/web/css/unicode-bidi/index.md
+++ b/files/ja/web/css/unicode-bidi/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/unicode-bidi
 
 `unicode-bidi` と {{cssxref("direction")}} プロパティだけは、 {{cssxref("all")}} 一括指定プロパティによる影響を受けません。
 
-> **警告:** このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを**上書きすべきではありません**。
+> [!WARNING]
+> このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを**上書きすべきではありません**。
 
 ## 構文
 
diff --git a/files/ja/web/css/used_value/index.md b/files/ja/web/css/used_value/index.md
index 603d4360fcb1b5..99a469b22759d0 100644
--- a/files/ja/web/css/used_value/index.md
+++ b/files/ja/web/css/used_value/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/used_value
 
 {{glossary("user agent", "ユーザーエージェント")}}が計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ ({{cssxref("width")}} や {{cssxref("line-height")}} など) の使用値はピクセル数です。一括指定プロパティ ({{cssxref("background")}} など) の使用値は、各成分 ({{cssxref("background-color")}} や {{cssxref("background-size")}} など) のプロパティに、 {{cssxref("position")}} や {{cssxref("float")}} が加味されたものと一致します。
 
-> **メモ:** DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API が返すのは[解決値](/ja/docs/Web/CSS/resolved_value)であり、これはプロパティによって[計算値](/ja/docs/Web/CSS/computed_value)または[使用値](/ja/docs/Web/CSS/used_value)のどちらかになります。
+> [!NOTE]
+> DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API が返すのは[解決値](/ja/docs/Web/CSS/resolved_value)であり、これはプロパティによって[計算値](/ja/docs/Web/CSS/computed_value)または[使用値](/ja/docs/Web/CSS/used_value)のどちらかになります。
 
 ## 例
 
diff --git a/files/ja/web/css/user-modify/index.md b/files/ja/web/css/user-modify/index.md
index 1576f4fad32ed2..77dcf0ed9a4cec 100644
--- a/files/ja/web/css/user-modify/index.md
+++ b/files/ja/web/css/user-modify/index.md
@@ -20,7 +20,8 @@ user-modify: revert;
 user-modify: unset;
 ```
 
-> **警告:** このプロパティは [`contenteditable`](/ja/docs/Web/HTML/Global_attributes#contenteditable) 属性に置き換えられました。
+> [!WARNING]
+> このプロパティは [`contenteditable`](/ja/docs/Web/HTML/Global_attributes#contenteditable) 属性に置き換えられました。
 
 ## 構文
 
diff --git a/files/ja/web/css/user-select/index.md b/files/ja/web/css/user-select/index.md
index 7db3d2158b2511..d4eb584e8f3cf4 100644
--- a/files/ja/web/css/user-select/index.md
+++ b/files/ja/web/css/user-select/index.md
@@ -53,7 +53,8 @@ user-select: unset;
 
   - : 要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。
 
-> **メモ:** CSS UI 4 では、 [`user-select: element` が `contain` に名称が変わります。](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05)
+> [!NOTE]
+> CSS UI 4 では、 [`user-select: element` が `contain` に名称が変わります。](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05)
 
 ## 公式定義
 
diff --git a/files/ja/web/css/using_css_custom_properties/index.md b/files/ja/web/css/using_css_custom_properties/index.md
index 30d4458c8d594d..62bd5d90356ee5 100644
--- a/files/ja/web/css/using_css_custom_properties/index.md
+++ b/files/ja/web/css/using_css_custom_properties/index.md
@@ -13,7 +13,8 @@ l10n:
 
 カスタムプロパティはカスケードの対象であり、親から値を継承します。
 
-> **メモ:** 変数は、メディアクエリーやコンテナークエリーの中では動作しません。{{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。{{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテナークエリーの中では使用できません。
+> [!NOTE]
+> 変数は、メディアクエリーやコンテナークエリーの中では動作しません。{{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。{{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテナークエリーの中では使用できません。
 
 ## 基本的な使用方法
 
@@ -35,7 +36,8 @@ element {
 
 但し、これは常にこうしなければならないわけではありません。カスタムプロパティのスコープを制限する良い理由があるかもしれません。
 
-> **メモ:** カスタムプロパティの名前は大文字小文字を区別します。 — `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。
+> [!NOTE]
+> カスタムプロパティの名前は大文字小文字を区別します。 — `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。
 
 前述の通り、普通のプロパティ値の代わりに {{cssxref("var", "var()")}} 関数の中でカスタムプロパティ名を使用することで、カスタムプロパティの値を使用することができます。
 
@@ -193,7 +195,8 @@ CSS 中に同じ宣言が繰り返し出てくることに注意してくださ
 
 [`var()`](/ja/docs/Web/CSS/var) 関数を使用して、指定された変数が定義されていない場合の**代替値**を複数定義することができます。[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)および[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) で作業するときに便利なことがあります。
 
-> **メモ:** 代替値はブラウザーの互換性を修正するためには使用されません。ブラウザーが CSS カスタムプロパティに対応していない場合、代替値は助けになりません。これは CSS カスタムプロパティに対応しているブラウザーのための単なるバックアップであり、与えられた変数が定義されていなかったり、無効な値であったりした場合に別な値を選択させるためのものです。
+> [!NOTE]
+> 代替値はブラウザーの互換性を修正するためには使用されません。ブラウザーが CSS カスタムプロパティに対応していない場合、代替値は助けになりません。これは CSS カスタムプロパティに対応しているブラウザーのための単なるバックアップであり、与えられた変数が定義されていなかったり、無効な値であったりした場合に別な値を選択させるためのものです。
 
 関数の最初の引数は、代替される[カスタムプロパティ](https://www.w3.org/TR/css-variables/#custom-property)の名前です。関数の二番目の引数は、もしあれば、参照された[カスタムプロパティ](https://www.w3.org/TR/css-variables/#custom-property)が無効であった場合に代わりに使用される代替値です。この関数は引数を 2 つだけ受け付けるので、最初のカンマの後のものは、すべて二番目の引数として割り当てます。二番目の引数が無効な場合、次のように代替処理は失敗します。
 
@@ -216,7 +219,8 @@ CSS 中に同じ宣言が繰り返し出てくることに注意してくださ
 
 代替としてのカスタムプロパティを含めるには、上記の二番目の例のようにすることが、複数の代替値を提供するための正しい方法です。この技法は変数全体を解釈するのにより時間が掛かるので、性能上の問題が見られます。
 
-> **メモ:** 代替値の構文は、[カスタムプロパティ](https://www.w3.org/TR/css-variables/#custom-property)の場合のように、カンマを使用することができます。例えば、 `var(--foo, red, blue)` は `red, blue` という代替値を定義します。最初のカンマから関数の終わりまでが代替値とみなされます。
+> [!NOTE]
+> 代替値の構文は、[カスタムプロパティ](https://www.w3.org/TR/css-variables/#custom-property)の場合のように、カンマを使用することができます。例えば、 `var(--foo, red, blue)` は `red, blue` という代替値を定義します。最初のカンマから関数の終わりまでが代替値とみなされます。
 
 ## 値と妥当性
 
diff --git a/files/ja/web/css/value_definition_syntax/index.md b/files/ja/web/css/value_definition_syntax/index.md
index ed2cf6f425c2fd..6a4084dbc9c9b6 100644
--- a/files/ja/web/css/value_definition_syntax/index.md
+++ b/files/ja/web/css/value_definition_syntax/index.md
@@ -103,7 +103,8 @@ bold && <length>
 - `bold`。どちらの成分も出現しなければなりません。
 - `bold 1em bold`。どちらの成分も 1 度だけ出現しなければなりません。
 
-> **メモ:** 並列は二重アンパサンドより優先されます。例えば `bold thin && <length>` は `[ bold thin ] && <length>` と同じ意味です。これは `bold thin <length>` や `<length> bold thin` を含みますが、`bold <length> thin` は含みません。
+> [!NOTE]
+> 並列は二重アンパサンドより優先されます。例えば `bold thin && <length>` は `[ bold thin ] && <length>` と同じ意味です。これは `bold thin <length>` や `<length> bold thin` を含みますが、`bold <length> thin` は含みません。
 
 ### 二重バー
 
@@ -124,7 +125,8 @@ bold && <length>
 - `blue yellow`。各成分は最大で 1 回だけ出現できます。
 - `bold`。どの対象の値もこのキーワードを使えません。
 
-> **メモ:** 二重アンパサンドは二重バーより優先されます。例えば `bold || thin && <length>` は `bold || [ thin && <length> ]` と同じ意味です。 `bold`, `thin <length>`, `bold thin <length>`, `thin <length> bold` を含みますが、`<length> bold thin` は 含みません。 bold を省略しないのなら、`thin && <length>` 成分全体よりも前か後ろに置く必要があるからです。
+> [!NOTE]
+> 二重アンパサンドは二重バーより優先されます。例えば `bold || thin && <length>` は `bold || [ thin && <length> ]` と同じ意味です。 `bold`, `thin <length>`, `bold thin <length>`, `thin <length> bold` を含みますが、`<length> bold thin` は 含みません。 bold を省略しないのなら、`thin && <length>` 成分全体よりも前か後ろに置く必要があるからです。
 
 ### 単一バー
 
@@ -150,7 +152,8 @@ bold && <length>
 - `center 3%`。各成分は 1 つだけ存在しなければなりません。
 - `3em 4.5em`。成分は最大で 1 回だけ存在できます。
 
-> **メモ:** 二重バーは単一バーより優先されます。例えば `bold | thin || <length>` は `bold | [ thin || <length> ]` と同じ意味です。`bold`, `thin`, `<length>`, `<length> thin`, や `thin <length>` を含みますが、`bold <length>` は含みません。`|` 結合子の両側それぞれから 1 つだけ対象が存在できるからです。
+> [!NOTE]
+> 二重バーは単一バーより優先されます。例えば `bold | thin || <length>` は `bold | [ thin || <length> ]` と同じ意味です。`bold`, `thin`, `<length>`, `<length> thin`, や `thin <length>` を含みますが、`bold <length>` は含みません。`|` 結合子の両側それぞれから 1 つだけ対象が存在できるからです。
 
 ## 成分値の乗算子
 
diff --git a/files/ja/web/css/var/index.md b/files/ja/web/css/var/index.md
index a0b2901fe5b935..35ea624cc50309 100644
--- a/files/ja/web/css/var/index.md
+++ b/files/ja/web/css/var/index.md
@@ -17,7 +17,8 @@ slug: Web/CSS/var
 
 {{csssyntax}}
 
-> **メモ:** 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。
+> [!NOTE]
+> 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。
 
 ### 値
 
diff --git a/files/ja/web/css/view-timeline-axis/index.md b/files/ja/web/css/view-timeline-axis/index.md
index 557cca43655389..a2c70c0ca02337 100644
--- a/files/ja/web/css/view-timeline-axis/index.md
+++ b/files/ja/web/css/view-timeline-axis/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`view-timeline-axis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロール可能な要素（_スクローラー_）内の要素（主体要素）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインのアニメーションのタイムラインを提供するために使用される、スクロールバーの方向を指定するために使用します。 `view-timeline-axis` は主体要素に設定します。詳しくは [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を参照してください。
 
-> **メモ:** スクローラーの軸方向の寸法がコンテナーをあふれていない場合、またはあふれた部分が非表示またはクリッピングされている場合、タイムラインは作成されません。
+> [!NOTE]
+> スクローラーの軸方向の寸法がコンテナーをあふれていない場合、またはあふれた部分が非表示またはクリッピングされている場合、タイムラインは作成されません。
 
 `view-timeline-axis` および {{cssxref("view-timeline-name")}} の各プロパティは、 [`view-timeline`](/ja/docs/Web/CSS/view-timeline) 一括指定プロパティを使用して設定することもできます。
 
diff --git a/files/ja/web/css/view-timeline-name/index.md b/files/ja/web/css/view-timeline-name/index.md
index 86a7b36055c653..6829245d5ae24a 100644
--- a/files/ja/web/css/view-timeline-name/index.md
+++ b/files/ja/web/css/view-timeline-name/index.md
@@ -12,7 +12,8 @@ l10n:
 既定では、主体要素がスクローラーの一方の端に初めて表示されるとタイムラインは 0% になり、反対側の端に達すると 100% になります。
 この名前は [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) 宣言で参照され、タイムラインの進行に合わせてアニメーションする要素を示します。これは主体要素である場合もありますが、そうである必要はありません。主体がスクロール領域を移動する際に異なる要素をアニメーションさせることができます。
 
-> **メモ:** 要素が軸方向の寸法でそのコンテナーをはみ出さない場合、またははみ出した部分が隠されているかクリップされている場合、タイムラインは作成されません。
+> [!NOTE]
+> 要素が軸方向の寸法でそのコンテナーをはみ出さない場合、またははみ出した部分が隠されているかクリップされている場合、タイムラインは作成されません。
 
 {{cssxref("view-timeline-axis")}} および `view-timeline-name` プロパティは [`view-timeline`](/ja/docs/Web/CSS/scroll-timeline) 一括指定プロパティを使用して設定することもできます。
 
diff --git a/files/ja/web/css/view-timeline/index.md b/files/ja/web/css/view-timeline/index.md
index 877289e844b922..d6aaddcbb47b06 100644
--- a/files/ja/web/css/view-timeline/index.md
+++ b/files/ja/web/css/view-timeline/index.md
@@ -14,7 +14,8 @@ l10n:
 `view-timeline` は 2 つの構成値、名前付き進行タイムラインの名前とオプションのスクロール軸の値持つことができます。
 この名前は [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) 宣言で参照され、タイムラインの進行に合わせてアニメーションする要素を示します。これは主体要素である場合もありますが、そうである必要はありません。主体がスクロール領域を移動する際に異なる要素をアニメーションさせることができます。
 
-> **メモ:** 要素が軸方向の寸法でそのコンテナーをはみ出さない場合、またははみ出した部分が隠されているかクリップされている場合、タイムラインは作成されません。
+> [!NOTE]
+> 要素が軸方向の寸法でそのコンテナーをはみ出さない場合、またははみ出した部分が隠されているかクリップされている場合、タイムラインは作成されません。
 
 ## 構成要素のプロパティ
 
diff --git a/files/ja/web/css/visual_formatting_model/index.md b/files/ja/web/css/visual_formatting_model/index.md
index 12766f30eaf306..63a8ebf1fece49 100644
--- a/files/ja/web/css/visual_formatting_model/index.md
+++ b/files/ja/web/css/visual_formatting_model/index.md
@@ -36,7 +36,8 @@ CSS はソース文書を読み取り、キャンバスにレンダリングし
 
 それから、それぞれの要素について、 CSS はその要素の `display` プロパティの値に応じてゼロ個以上のボックスを生成します。
 
-> **メモ:** ボックスはよく display の種類によって参照されます。例えば、 `display: block` の要素によって生成されたボックスは「ブロックボックス」と呼ばれたり、単に「ブロック」と呼ばれたりします。ただし、ブロックボックス、ブロックレベルボックス、ボックスコンテナーはすべて微妙に異なることに注意してください。詳しくは下記の[ブロックボックス](#ブロックボックス)を参照してください。
+> [!NOTE]
+> ボックスはよく display の種類によって参照されます。例えば、 `display: block` の要素によって生成されたボックスは「ブロックボックス」と呼ばれたり、単に「ブロック」と呼ばれたりします。ただし、ブロックボックス、ブロックレベルボックス、ボックスコンテナーはすべて微妙に異なることに注意してください。詳しくは下記の[ブロックボックス](#ブロックボックス)を参照してください。
 
 ## 主ボックス
 
diff --git a/files/ja/web/css/webkit_extensions/index.md b/files/ja/web/css/webkit_extensions/index.md
index 43b94ba62e12b8..4d28f8cec1e469 100644
--- a/files/ja/web/css/webkit_extensions/index.md
+++ b/files/ja/web/css/webkit_extensions/index.md
@@ -9,7 +9,8 @@ Safari や Chrome のような WebKit または blink ベースのアプリケ
 
 ## WebKit 独自のプロパティ
 
-> **メモ:** ウェブサイトで使用しないでください。これらのプロパティは WebKit アプリケーションでしか動作しません。
+> [!NOTE]
+> ウェブサイトで使用しないでください。これらのプロパティは WebKit アプリケーションでしか動作しません。
 
 ### A
 
@@ -169,7 +170,8 @@ Safari や Chrome のような WebKit または blink ベースのアプリケ
 
 ## 以前は独自プロパティであったものが標準化されたもの
 
-> **メモ:** CSS の互換性を最大化するために、以下に挙げた接頭辞付きのプロパティの代わりに接頭辞のない標準のプロパティを使用してください。
+> [!NOTE]
+> CSS の互換性を最大化するために、以下に挙げた接頭辞付きのプロパティの代わりに接頭辞のない標準のプロパティを使用してください。
 
 ### A
 
@@ -330,7 +332,8 @@ Safari や Chrome のような WebKit または blink ベースのアプリケ
 
 以下のプロパティは Firefox が `-webkit-` 接頭辞付きで対応しています。多くのものは同様に接頭辞なしでも対応しています。前述の[以前は独自プロパティであったものが標準化されたもの](#以前は独自プロパティであったものが標準化されたもの)を参照してください。
 
-> **メモ:** 多数のウェブサイトが古いコードで -webkit- 接頭辞の付いたプロパティを使用しているため、 Edge や Firefox は -webkit- 接頭辞のついた多くのプロパティを -moz-, -ms-, 接頭辞なしの同等のプロパティに転送しています。
+> [!NOTE]
+> 多数のウェブサイトが古いコードで -webkit- 接頭辞の付いたプロパティを使用しているため、 Edge や Firefox は -webkit- 接頭辞のついた多くのプロパティを -moz-, -ms-, 接頭辞なしの同等のプロパティに転送しています。
 
 ### A
 
@@ -467,7 +470,8 @@ Safari や Chrome のような WebKit または blink ベースのアプリケ
 
 \* 標準化されました。
 
-> **メモ:** セレクターのチェーンまたはグループ内に無効な擬似クラスがあった場合、セレクターのリスト全体が無効になります。
+> [!NOTE]
+> セレクターのチェーンまたはグループ内に無効な擬似クラスがあった場合、セレクターのリスト全体が無効になります。
 
 ## 擬似要素
 
@@ -507,7 +511,8 @@ Safari や Chrome のような WebKit または blink ベースのアプリケ
 
 \* 標準化されました。
 
-> **メモ:** 一般に、セレクターのチェーンまたはグループ内に無効な擬似要素または擬似クラスがあった場合、セレクターのリスト全体が無効になります。 (擬似クラスではない) 擬似要素に -webkit- という接頭辞が付いている場合、 Firefox 63 以降, Blink, WebKit, Gecko のブラウザーはセレクターのリストを妥当とみなし、無効にしないようにします。</p>
+> [!NOTE]
+> 一般に、セレクターのチェーンまたはグループ内に無効な擬似要素または擬似クラスがあった場合、セレクターのリスト全体が無効になります。 (擬似クラスではない) 擬似要素に -webkit- という接頭辞が付いている場合、 Firefox 63 以降, Blink, WebKit, Gecko のブラウザーはセレクターのリストを妥当とみなし、無効にしないようにします。</p>
 
 ## メディア特性
 
diff --git a/files/ja/web/events/event_handlers/index.md b/files/ja/web/events/event_handlers/index.md
index a261711b0c5016..28218570004109 100644
--- a/files/ja/web/events/event_handlers/index.md
+++ b/files/ja/web/events/event_handlers/index.md
@@ -17,7 +17,8 @@ slug: Web/Events/Event_handlers
 
 ハンドラーの登録には、推奨される方法が 2 つあります。イベントハンドラーのコードは、ターゲットとなる要素の対応する _onevent_ プロパティに割り当てて、イベントが起動されたときに実行されるようにするか、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用して、ハンドラーを要素のリスナーとして登録するかすることができます。いずれの場合も、ハンドラーは [`Event` インターフェイス](/ja/docs/Web/API/Event) (または[派生インターフェイス](/ja/docs/Web/API/Event#introduction)) に準拠したオブジェクトを受け取ります。主な違いは、イベントリスナーのメソッドを使うと、複数のイベントハンドラーを追加 (または削除) できることです。
 
-> **警告:** 第 3 の方法として、 HTML の onevent 属性を使ってイベントハンドラーを設定する方法がありますが、お勧めしません。これはマークアップを膨張させ、可読性を低下させ、デバッグを困難にします。詳しくは、[インラインイベントハンドラー](/ja/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these)を参照してください。
+> [!WARNING]
+> 第 3 の方法として、 HTML の onevent 属性を使ってイベントハンドラーを設定する方法がありますが、お勧めしません。これはマークアップを膨張させ、可読性を低下させ、デバッグを困難にします。詳しくは、[インラインイベントハンドラー](/ja/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these)を参照してください。
 
 ### onevent プロパティの使用
 
@@ -44,7 +45,8 @@ btn.onclick = greet;
 
 要素にイベントハンドラーを設定する最も柔軟な方法は、 {{domxref("EventTarget.addEventListener")}} メソッドを使用することです。この方法では、複数のリスナーを 1 つの要素に割り当てることができ、必要に応じて ({{domxref("EventTarget.removeEventListener")}} を使用して) リスナーを削除することができます。
 
-> **メモ:** イベントハンドラーの追加と削除ができることで、例えば、同じボタンで状況によって異なるアクションを実行することができます。また、より複雑なプログラムでは、古い、使われていないイベントハンドラーを整理することで、効率を上げることができます。
+> [!NOTE]
+> イベントハンドラーの追加と削除ができることで、例えば、同じボタンで状況によって異なるアクションを実行することができます。また、より複雑なプログラムでは、古い、使われていないイベントハンドラーを整理することで、効率を上げることができます。
 
 以下では、単純な `greet()` 関数をクリックイベントのリスナーまたはイベントハンドラーとして設定する方法を示します (必要に応じて、名前付き関数の代わりにラムダ関数を使用することもできます)。繰り返しますが、イベントは、イベントハンドラーの第一引数として渡されます。
 
diff --git a/files/ja/web/events/index.md b/files/ja/web/events/index.md
index 834e95d1af3d93..13d1554be395b1 100644
--- a/files/ja/web/events/index.md
+++ b/files/ja/web/events/index.md
@@ -11,7 +11,8 @@ l10n:
 
 この記事では、興味のありそうな*主な*イベントの種類 (アニメーション、クリップボード、ワーカーなど) と、それらの種類のイベントを実装する主なクラスの索引を提供します。最後には、ドキュメント化されたすべてのイベントの一覧を掲載しています。
 
-> **メモ:** このページでは、ウェブ上で遭遇する最も一般的なイベントの多くをリストアップしています。ここに掲載されていないイベントを探している場合は、 MDN の他の部分でその名前、トピック領域、関連する仕様書を検索してみてください。
+> [!NOTE]
+> このページでは、ウェブ上で遭遇する最も一般的なイベントの多くをリストアップしています。ここに掲載されていないイベントを探している場合は、 MDN の他の部分でその名前、トピック領域、関連する仕様書を検索してみてください。
 
 ## イベント索引
 
diff --git a/files/ja/web/exslt/exsl/object-type/index.md b/files/ja/web/exslt/exsl/object-type/index.md
index a10f39cd61ee5a..53e1a27b43ee60 100644
--- a/files/ja/web/exslt/exsl/object-type/index.md
+++ b/files/ja/web/exslt/exsl/object-type/index.md
@@ -7,7 +7,8 @@ slug: Web/EXSLT/exsl/object-type
 
 `exsl:object-type()` は、指定されたオブジェクトの型を示す文字列を返します。
 
-> **メモ:** ほとんどの [XSLT](/ja/docs/Web/XSLT) オブジェクトの型は、安全に他の型へ自動変換されることがあります。しかし、自動変換によってはエラーを発生させることになります。特に、ノードセットでないものをノードセットとして扱うと、そのようになります。この機能により、名前付きテンプレートや拡張関数の作者は、簡単に引数値に柔軟性を持たせることができます。
+> [!NOTE]
+> ほとんどの [XSLT](/ja/docs/Web/XSLT) オブジェクトの型は、安全に他の型へ自動変換されることがあります。しかし、自動変換によってはエラーを発生させることになります。特に、ノードセットでないものをノードセットとして扱うと、そのようになります。この機能により、名前付きテンプレートや拡張関数の作者は、簡単に引数値に柔軟性を持たせることができます。
 
 ## 構文
 
diff --git a/files/ja/web/html/attributes/accept/index.md b/files/ja/web/html/attributes/accept/index.md
index ed41f8969a7cc0..d4f9ad6b0bcb15 100644
--- a/files/ja/web/html/attributes/accept/index.md
+++ b/files/ja/web/html/attributes/accept/index.md
@@ -103,7 +103,8 @@ div {
 
 {{EmbedLiveSample('A_basic_example', 650, 60)}}
 
-> **メモ:** この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。
+> [!NOTE]
+> この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。
 
 ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。
 
diff --git a/files/ja/web/html/attributes/autocomplete/index.md b/files/ja/web/html/attributes/autocomplete/index.md
index a11922cd59e188..04fbc23ced5611 100644
--- a/files/ja/web/html/attributes/autocomplete/index.md
+++ b/files/ja/web/html/attributes/autocomplete/index.md
@@ -15,7 +15,8 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種
 
 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に `autocomplete` 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ {{HTMLElement("form")}} 要素、または `<form>` 要素で `id` がその要素の [`form`](/ja/docs/Web/HTML/Element/input#form) 属性で指定されているものの `autocomplete` 属性の値を使用します（詳しくは、 `<form>` の [`autocomplete`](/ja/docs/Web/HTML/Element/form#autocomplete) 属性をご覧ください）。
 
-> **メモ:** 自動補完を提供するために、ユーザーエージェントは `<input>`/`<select>`/`<textarea>` 要素に次のことを要求することがあります。
+> [!NOTE]
+> 自動補完を提供するために、ユーザーエージェントは `<input>`/`<select>`/`<textarea>` 要素に次のことを要求することがあります。
 >
 > 1. `name` や `id` 属性を持つこと
 > 2. `<form>` 要素の子孫であること
@@ -29,7 +30,8 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種
 
   - : ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。
 
-    > **メモ:** ほとんどの現行ブラウザーでは `autocomplete` 属性を "`off`" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 [autocomplete 属性とログインフィールド](/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields)をご覧ください。
+    > [!NOTE]
+    > ほとんどの現行ブラウザーでは `autocomplete` 属性を "`off`" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 [autocomplete 属性とログインフィールド](/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields)をご覧ください。
 
 - "`on`"
   - : ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。
@@ -149,7 +151,8 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種
 
 詳しくは [WHATWG 仕様書](https://html.spec.whatwg.org/multipage/forms.html#autofill) をご覧ください。
 
-> **メモ:** Firefox は他のブラウザーとは異なり、 `autocomplete` 属性で、ページを再読み込みしても `<input>` を [動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) を制御します。この維持機能は、既定で有効です。 `autocomplete` 属性の値に `off` を設定すると、この機能を無効化できます。またこの設定は、`type` 属性が通常 `autocomplete` を適用しない値である `<input>` 要素でも有効です。 [Firefox バグ 654072](https://bugzil.la/654072) をご覧ください。
+> [!NOTE]
+> Firefox は他のブラウザーとは異なり、 `autocomplete` 属性で、ページを再読み込みしても `<input>` を [動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) を制御します。この維持機能は、既定で有効です。 `autocomplete` 属性の値に `off` を設定すると、この機能を無効化できます。またこの設定は、`type` 属性が通常 `autocomplete` を適用しない値である `<input>` 要素でも有効です。 [Firefox バグ 654072](https://bugzil.la/654072) をご覧ください。
 
 ## 例
 
diff --git a/files/ja/web/html/attributes/capture/index.md b/files/ja/web/html/attributes/capture/index.md
index ffd82a9149c64d..80fdd6f6860378 100644
--- a/files/ja/web/html/attributes/capture/index.md
+++ b/files/ja/web/html/attributes/capture/index.md
@@ -18,7 +18,8 @@ l10n:
 | `user`        | ユーザー側のカメラやマイクを使用します。 |
 | `environment` | 外向きのカメラやマイクを使用します。     |
 
-> **メモ:** capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。
+> [!NOTE]
+> capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-capture.html", "tabbed-standard")}}
 
diff --git a/files/ja/web/html/attributes/index.md b/files/ja/web/html/attributes/index.md
index a72cedf8bdb7dc..759bf7193614be 100644
--- a/files/ja/web/html/attributes/index.md
+++ b/files/ja/web/html/attributes/index.md
@@ -1333,7 +1333,8 @@ HTML では、論理属性に許されている値の制約を定義していま
 
 ## イベントハンドラー属性
 
-> **警告:** イベントハンドラーコンテンツ属性を使用することは推奨されません。HTML と JavaScript が混在すると保守性の低いコードになることが多く、またイベントハンドラー属性の実行はコンテンツセキュリティポリシーによってブロックされることがあります。
+> [!WARNING]
+> イベントハンドラーコンテンツ属性を使用することは推奨されません。HTML と JavaScript が混在すると保守性の低いコードになることが多く、またイベントハンドラー属性の実行はコンテンツセキュリティポリシーによってブロックされることがあります。
 
 上の表に掲載されている属性の他に、グローバル[イベントハンドラー](/ja/docs/Web/Events/Event_handlers#using_onevent_properties)（[`onclick`](/ja/docs/Web/API/Element/click_event) など）も、すべての要素の[コンテンツ属性](##コンテンツ属性と_idl_属性)として指定することができます。
 
diff --git a/files/ja/web/html/attributes/max/index.md b/files/ja/web/html/attributes/max/index.md
index cbf9e339bdea0c..ee4e3bbbfe0263 100644
--- a/files/ja/web/html/attributes/max/index.md
+++ b/files/ja/web/html/attributes/max/index.md
@@ -73,7 +73,8 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。
+> [!NOTE]
+> ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。
 
 詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。
 
diff --git a/files/ja/web/html/attributes/min/index.md b/files/ja/web/html/attributes/min/index.md
index 35aefceb219236..496af55e0c4180 100644
--- a/files/ja/web/html/attributes/min/index.md
+++ b/files/ja/web/html/attributes/min/index.md
@@ -73,7 +73,8 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。
+> [!NOTE]
+> ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。
 
 詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。
 
diff --git a/files/ja/web/html/attributes/readonly/index.md b/files/ja/web/html/attributes/readonly/index.md
index 3d09b441a8e80a..5b5cea33e5e4e8 100644
--- a/files/ja/web/html/attributes/readonly/index.md
+++ b/files/ja/web/html/attributes/readonly/index.md
@@ -19,7 +19,8 @@ l10n:
 
 この属性は {{HTMLElement("select")}} や、 `{{HTMLElement("input/checkbox","checkbox")}}` や `{{HTMLElement("input/radio","radio")}}` のように既に変更不可能な入力型、 `{{HTMLElement("input/file","file")}}` 入力型のように定義上初期状態で値を設定できない入力型は対応していません。 `{{HTMLElement("input/range","range")}}` や `{{HTMLElement("input/color","color")}}` は、どちらも既定値があります。 `{{HTMLElement("input/hidden","hidden")}}` も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、`image` を含め、すべて対応していません。
 
-> **メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。
+> [!NOTE]
+> テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。
 
 入力に `readonly` 属性が設定されている場合、 {{cssxref(":read-only")}} 擬似クラスも適用されます。逆に、 `readonly` 属性に対応していても、この属性が設定されていない入力欄は、 {{cssxref(":read-write")}} 擬似クラスに一致します。
 
diff --git a/files/ja/web/html/attributes/rel/index.md b/files/ja/web/html/attributes/rel/index.md
index 81d78dfb9231b3..cf19d73153ef0b 100644
--- a/files/ja/web/html/attributes/rel/index.md
+++ b/files/ja/web/html/attributes/rel/index.md
@@ -107,7 +107,8 @@ l10n:
 
     {{htmlelement('link')}} では、文書全体の作者を表します。
 
-    > **メモ:** 歴史的な理由から、廃止された属性値 `rev="made"` は `rel="author"` として扱われます。
+    > [!NOTE]
+    > 歴史的な理由から、廃止された属性値 `rev="made"` は `rel="author"` として扱われます。
 
 - `bookmark`
   - : {{htmlelement('a')}} および {{htmlelement('area')}} 属性の `rel` 属性の値として使用されます。最も近い祖先 {{htmlelement('article')}} 要素がある場合、そのパーマリンクを与えます。祖先となる `<article>` 要素がない場合、リンクしている要素が最も近いとされるセクションのパーマリンクを与えます。
@@ -133,7 +134,8 @@ l10n:
 
     > **メモ:** [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) 属性は `rel="icon"` においては Chromium ベースのブラウザーは対応していません。[公開 Chromium issue](https://crbug.com/1121645) を参照してください。
 
-    > **メモ:** Apple の iOS では、他のモバイルブラウザーのように、ウェブクリップやスタートアップのプレースホルダー用のウェブページのアイコンを選択するために、このリンク種別や [`sizes`](/ja/docs/Web/HTML/Element/link#sizes) 属性を使用していません。
+    > [!NOTE]
+    > Apple の iOS では、他のモバイルブラウザーのように、ウェブクリップやスタートアップのプレースホルダー用のウェブページのアイコンを選択するために、このリンク種別や [`sizes`](/ja/docs/Web/HTML/Element/link#sizes) 属性を使用していません。
     > 代わりに、標準外の [`apple-touch-icon`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) および [`apple-touch-startup-image`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6) をそれぞれ使用しています。
 
     > **メモ:** `shortcut` リンク種別が `icon` の前に見られることが良くありますが、このリンク種別は適合するものではなく、無視されるので**使用しないでください**。
@@ -146,7 +148,8 @@ l10n:
     <link rel="license" href="#license" />
     ```
 
-    > **メモ:** 認識はされているものの、同義語の `copyright` は正しくないため使用しないでください。
+    > [!NOTE]
+    > 認識はされているものの、同義語の `copyright` は正しくないため使用しないでください。
 
 - `manifest` {{Experimental_Inline}}
   - : [ウェブアプリマニフェスト](/ja/docs/Web/Manifest)です。オリジンをまたいだ読み取りのための CORS プロトコルの使用に必要です。
diff --git a/files/ja/web/html/attributes/rel/prefetch/index.md b/files/ja/web/html/attributes/rel/prefetch/index.md
index b8f269ce8190a8..f68e02578af488 100644
--- a/files/ja/web/html/attributes/rel/prefetch/index.md
+++ b/files/ja/web/html/attributes/rel/prefetch/index.md
@@ -11,7 +11,8 @@ l10n:
 
 結果はディスク上の HTTP キャッシュに保存されます。このため、現在のページで使用していないサブリソースを先読みするのに有益です。また、ユーザーがサイト内で次に訪れるであろう文書を先読みするために使用することもできます。ただし、その結果、ヘッダーに注意する必要があります。例えば、 [Cache-Control](/ja/docs/Web/HTTP/Headers/Cache-Control) ヘッダーは先読みをブロックする可能性があります（`no-cache` や `no-store` など）。
 
-> **メモ:** このような制限があるため、対応している場合には、代わりに[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) を文書の先読みに使用することをお勧めします。
+> [!NOTE]
+> このような制限があるため、対応している場合には、代わりに[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) を文書の先読みに使用することをお勧めします。
 
 `<link rel="prefetch">` は、機能的には `fetch()` を `priority: "low"` オプション付きで呼び出すのと同等ですが、前者は一般的に優先度がさらに低く、リクエストに [`Sec-Purpose: prefetch`](/ja/docs/Web/HTTP/Headers/Sec-Purpose) ヘッダーが設定されます。一般的にブラウザーは、先読みするリソースには事前読み込みリソース（`<link rel="preload">` でリクエストされたものなど）よりも低い優先度を与えることに注意してください。現在のページは次のページよりも重要です。
 
diff --git a/files/ja/web/html/attributes/rel/preload/index.md b/files/ja/web/html/attributes/rel/preload/index.md
index 0635804af2b7db..793ed958b38284 100644
--- a/files/ja/web/html/attributes/rel/preload/index.md
+++ b/files/ja/web/html/attributes/rel/preload/index.md
@@ -67,7 +67,8 @@ l10n:
 
 > **メモ:** `font` および `fetch` の事前読み込みには、 `crossorigin` 属性を設定する必要があります。下記の [CORS を使用したフェッチ](#cors_を使用したフェッチ)を参照してください。
 
-> **メモ:** 使用されると予想されるこれらの値やウェブ機能について、もっと詳細のことは、 HTML の仕様書、 [Link type "preload"](https://html.spec.whatwg.org/#match-preload-type) を参照してください。また、フェッチの仕様書で管理されている `as` 属性の値の完全な一覧は、 [request destinations](https://fetch.spec.whatwg.org/#concept-request-destination) を参照してください。
+> [!NOTE]
+> 使用されると予想されるこれらの値やウェブ機能について、もっと詳細のことは、 HTML の仕様書、 [Link type "preload"](https://html.spec.whatwg.org/#match-preload-type) を参照してください。また、フェッチの仕様書で管理されている `as` 属性の値の完全な一覧は、 [request destinations](https://fetch.spec.whatwg.org/#concept-request-destination) を参照してください。
 
 ## MIME タイプを含める
 
diff --git a/files/ja/web/html/attributes/step/index.md b/files/ja/web/html/attributes/step/index.md
index ce2c19eec6189d..10a8454424c59a 100644
--- a/files/ja/web/html/attributes/step/index.md
+++ b/files/ja/web/html/attributes/step/index.md
@@ -109,7 +109,8 @@ input:invalid {
 
 {{EmbedLiveSample("min_impact_on_step","100%",55)}}
 
-> **メモ:** ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスに一致します。
+> [!NOTE]
+> ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスに一致します。
 
 詳しくは[クライアント側制約検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。
 
diff --git a/files/ja/web/html/constraint_validation/index.md b/files/ja/web/html/constraint_validation/index.md
index 2b38740026e195..b730000ac9e217 100644
--- a/files/ja/web/html/constraint_validation/index.md
+++ b/files/ja/web/html/constraint_validation/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Constraint_validation
 
 これらの概念の基本的な入門 (サンプル付き) は、[フォーム検証チュートリアル](/ja/docs/Learn/Forms/Form_validation)をご覧ください。
 
-> **メモ:** HTML5 の制約検証は、*サーバー側*での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少すると思われますが、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。
+> [!NOTE]
+> HTML5 の制約検証は、*サーバー側*での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少すると思われますが、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。
 
 ## 組み込みの基本的な制約
 
@@ -210,7 +211,7 @@ HTML5 では、基本的な制約は 2 通りの方法で定義されます。
 
 `checkValidity()` を呼び出すことは、制約を*静的*に検証するといい、`reportValidity()` を呼び出したり、フォームを送信したりすることは、制約を*対話的*に検証するといいます。
 
-> **メモ:**
+> [!NOTE]
 >
 > - [`novalidate`](/ja/docs/Web/HTML/Element/form#novalidate) 属性が {{ HTMLElement("form") }} 要素に設定されている場合、制約の*対話的*な検証は行われません。
 > - `submit()` メソッドを [`HTMLFormElement`](/ja/docs/Web/API/HTMLFormElement) インターフェイスで呼び出しても、制約検証は行われません。言い換えれば、このメソッドは制約を満たさなくてもフォームデータをサーバーに送信します。代わりに送信ボタンの `click()` メソッドを呼び出してください。
@@ -225,7 +226,8 @@ JavaScript と制約 API を使用すると、より複雑な制約を実装す
 
 郵便番号の形式は、国によって異なります。ほとんどの国では、国コードの前に任意の接頭辞を付けることができるだけでなく（ドイツでは `D-`、フランスやスイスでは `F-` のように）、固定の桁数しかない郵便番号を持つ国もありますし、イギリスのように、特定の位置にアルファベットを入れることができる、より複雑な構造を持つ国もあります。
 
-> **メモ:** これは包括的な郵便番号検証ライブラリーではなく、主要概念のデモンストレーションです。
+> [!NOTE]
+> これは包括的な郵便番号検証ライブラリーではなく、主要概念のデモンストレーションです。
 
 例として、この単純なフォームの制約検証をチェックするスクリプトを追加します。
 
diff --git a/files/ja/web/html/content_categories/index.md b/files/ja/web/html/content_categories/index.md
index b65c1f7e1af011..8b15ff7d448108 100644
--- a/files/ja/web/html/content_categories/index.md
+++ b/files/ja/web/html/content_categories/index.md
@@ -15,7 +15,8 @@ l10n:
 - フォーム関連コンテンツカテゴリー。これはフォーム関連の要素に共通のルールを定義します。
 - 固有のコンテンツカテゴリー。これはいくつかの要素だけ、場合によっては特定の文脈でだけ使われる、稀なカテゴリーです。
 
-> **メモ:** コンテンツカテゴリーとその機能比較についての詳細な説明は、この記事の範囲外です。詳しく知りたければ、 [HTML 仕様書の関連部分](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content)を読みましょう。
+> [!NOTE]
+> コンテンツカテゴリーとその機能比較についての詳細な説明は、この記事の範囲外です。詳しく知りたければ、 [HTML 仕様書の関連部分](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content)を読みましょう。
 
 [![様々なコンテンツカテゴリーの相互関係を示すベン図。以下の節では、これらの関係をテキストで説明します。](content_categories_venn.png)](content_categories_venn.png)
 
diff --git a/files/ja/web/html/element/a/index.md b/files/ja/web/html/element/a/index.md
index 93307ae59a1a43..7f87aa83dd9e1a 100644
--- a/files/ja/web/html/element/a/index.md
+++ b/files/ja/web/html/element/a/index.md
@@ -29,7 +29,7 @@ l10n:
 
     - 値を定義すると、ファイル名として提案します。 `/` および `\` はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。
 
-    > **メモ:**
+    > [!NOTE]
     >
     > - `download` は[同一オリジンの URL](/ja/docs/Web/Security/Same-origin_policy) と、 `blob:`、 `data:` の各スキームでのみ動作します。
     > - ブラウザーがダウンロードをどのように扱うかは、ブラウザー、ユーザーの設定、その他の要因によって異なります。ダウンロードを開始する前にユーザーにプロンプトが表示されたり、ファイルが自動的に保存されたり、外部のアプリケーションまたはブラウザー自体で自動的に開いたりすることがあります。
@@ -88,7 +88,8 @@ l10n:
 
   - : リンク先 URL の{{Glossary("character encoding", "文字エンコーディング")}}のヒントでした。
 
-    > **メモ:** この属性は廃止されており、**ページ作者が使用すべきではありません**。リンク先の URL で HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。
+    > [!NOTE]
+    > この属性は廃止されており、**ページ作者が使用すべきではありません**。リンク先の URL で HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。
 
 - `coords` {{Deprecated_Inline}}
   - : [`shape` 属性](#shape)とともに使用されます。カンマ区切りの座標のリストです。
@@ -96,7 +97,8 @@ l10n:
 
   - : ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば `id` 属性と `name` 属性を `<a>` 要素内で同時に使用できました。
 
-    > **メモ:** 代わりにグローバル属性の [`id`](/ja/docs/Web/HTML/Global_attributes#id) を使用してください。
+    > [!NOTE]
+    > 代わりにグローバル属性の [`id`](/ja/docs/Web/HTML/Global_attributes#id) を使用してください。
 
 - `rev` {{Deprecated_Inline}}
   - : この属性は、逆方向のリンクを指定します。 [`rel` 属性](#rel)と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。
@@ -104,7 +106,8 @@ l10n:
 
   - : イメージマップ内のハイパーリンクの領域の形状です。
 
-    > **メモ:** イメージマップについては {{HTMLElement("area")}} 要素を使用してください。
+    > [!NOTE]
+    > イメージマップについては {{HTMLElement("area")}} 要素を使用してください。
 
 ## 例
 
diff --git a/files/ja/web/html/element/acronym/index.md b/files/ja/web/html/element/acronym/index.md
index 349f21517cdc99..66e6745153cace 100644
--- a/files/ja/web/html/element/acronym/index.md
+++ b/files/ja/web/html/element/acronym/index.md
@@ -11,7 +11,8 @@ l10n:
 
 **`<acronym>`** は [HTML](/ja/docs/Web/HTML) の要素で、頭字語または略語の単語を構成する文字の並びを明示することができます。
 
-> **警告:** この要素は使用しないでください。代わりに {{HTMLElement("abbr")}} 要素を使用してください。
+> [!WARNING]
+> この要素は使用しないでください。代わりに {{HTMLElement("abbr")}} 要素を使用してください。
 
 ## 属性
 
diff --git a/files/ja/web/html/element/audio/index.md b/files/ja/web/html/element/audio/index.md
index 51f3a9c0f20e75..e0d277685b40b4 100644
--- a/files/ja/web/html/element/audio/index.md
+++ b/files/ja/web/html/element/audio/index.md
@@ -23,7 +23,8 @@ l10n:
 
   - : 論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
 
-    > **メモ:** 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。[自動再生ガイド](/ja/docs/Web/Media/Autoplay_guide)には autoplay の正しい使い方についての追加情報があります。
+    > [!NOTE]
+    > 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。[自動再生ガイド](/ja/docs/Web/Media/Autoplay_guide)には autoplay の正しい使い方についての追加情報があります。
 
 - `controls`
 
@@ -50,7 +51,8 @@ l10n:
 
   - : 論理属性で、有線 (HDMI, DVI, など) や無線技術 (Miracast, Chromecast, DLNA, AirPlay, など) で接続された機器のリモート再生機能を無効にするために使用します。詳しくは[この提案中の仕様書](https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute)をご覧ください。
 
-    > **メモ:** Safari では、代替として [`x-webkit-airplay="deny"`](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html) を使用することができます。
+    > [!NOTE]
+    > Safari では、代替として [`x-webkit-airplay="deny"`](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html) を使用することができます。
 
 - `loop`
   - : 論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。
@@ -67,7 +69,7 @@ l10n:
 
     既定値はブラウザーによって異なります。仕様書では `metadata` にするよう助言しています。
 
-    > **メモ:**
+    > [!NOTE]
     >
     > - `autoplay` 属性は `preload` より優先します。`autoplay` を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。
     > - 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。
diff --git a/files/ja/web/html/element/base/index.md b/files/ja/web/html/element/base/index.md
index 86afb5a123c7d2..6342f318776da7 100644
--- a/files/ja/web/html/element/base/index.md
+++ b/files/ja/web/html/element/base/index.md
@@ -54,7 +54,8 @@ l10n:
 
 この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。
 
-> **警告:** 以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素、例えば {{HTMLElement("link")}} の `href` 属性などの前に置く**必要があります**。
+> [!WARNING]
+> 以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素、例えば {{HTMLElement("link")}} の `href` 属性などの前に置く**必要があります**。
 
 - `href`
   - : 文書全体を通して相対 URL に使用される基底 URL です。絶対 URL と相対 URL が使用できます。
diff --git a/files/ja/web/html/element/big/index.md b/files/ja/web/html/element/big/index.md
index e102c04b84fde8..cbe5b2c55e6d1c 100644
--- a/files/ja/web/html/element/big/index.md
+++ b/files/ja/web/html/element/big/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<big>`** は [HTML](/ja/docs/Web/HTML) の非推奨の要素で、内包するテキストを周りの文字列よりも 1 段階大きいフォントの大きさで描画します（例えば `medium` が `large` になります）。大きさはブラウザーの最大フォントの大きさに制限されます。
 
-> **警告:** この要素は仕様書から削除され、もう使用するべきではありません。ウェブ開発者は CSS の {{cssxref("font-size")}} プロパティを使用して、フォントの大きさを調整してください。
+> [!WARNING]
+> この要素は仕様書から削除され、もう使用するべきではありません。ウェブ開発者は CSS の {{cssxref("font-size")}} プロパティを使用して、フォントの大きさを調整してください。
 
 ## 属性
 
diff --git a/files/ja/web/html/element/br/index.md b/files/ja/web/html/element/br/index.md
index 601bb4cf022cf3..59c60d4b6d9663 100644
--- a/files/ja/web/html/element/br/index.md
+++ b/files/ja/web/html/element/br/index.md
@@ -13,7 +13,8 @@ l10n:
 
 上記の例に見られるように、 `<br>` 要素はテキストを改行したい場所にそれぞれ含められます。 `<br>` の後のテキストは、テキストブロックの次の行の先頭から再開されます。
 
-> **メモ:** 段落の間を開けるために `<br>` を使わないでください。それぞれを {{htmlelement("p")}} 要素で囲み、 [CSS](/ja/docs/Web/CSS) の {{cssxref('margin')}} プロパティで間隔を制御してください。
+> [!NOTE]
+> 段落の間を開けるために `<br>` を使わないでください。それぞれを {{htmlelement("p")}} 要素で囲み、 [CSS](/ja/docs/Web/CSS) の {{cssxref('margin')}} プロパティで間隔を制御してください。
 
 ## 属性
 
diff --git a/files/ja/web/html/element/canvas/index.md b/files/ja/web/html/element/canvas/index.md
index e6c002f9e3043a..3186844156080d 100644
--- a/files/ja/web/html/element/canvas/index.md
+++ b/files/ja/web/html/element/canvas/index.md
@@ -111,7 +111,8 @@ l10n:
 | Safari     | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (つまり 16,384 x 16,384) |
 | IE         | 8,192 pixels  | 8,192 pixels  | ?                                           |
 
-> **メモ:** 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。
+> [!NOTE]
+> 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。
 
 ## 例
 
diff --git a/files/ja/web/html/element/caption/index.md b/files/ja/web/html/element/caption/index.md
index e87e7109cb2eeb..27e6f354f78639 100644
--- a/files/ja/web/html/element/caption/index.md
+++ b/files/ja/web/html/element/caption/index.md
@@ -32,7 +32,8 @@ l10n:
     - `bottom`
       - : キャプションを表の下側に表示します。
 
-    > **警告:** この属性は非推奨ですので使用しないでください。{{HTMLElement("caption")}} 要素にスタイルを適用するには、[CSS](/ja/docs/Web/CSS) プロパティの {{cssxref("caption-side")}} および {{cssxref("text-align")}} を使用してください。
+    > [!WARNING]
+    > この属性は非推奨ですので使用しないでください。{{HTMLElement("caption")}} 要素にスタイルを適用するには、[CSS](/ja/docs/Web/CSS) プロパティの {{cssxref("caption-side")}} および {{cssxref("text-align")}} を使用してください。
 
 ## 使用上の注意
 
diff --git a/files/ja/web/html/element/datalist/index.md b/files/ja/web/html/element/datalist/index.md
index 887ea4a205931a..c7abdf0dc6b603 100644
--- a/files/ja/web/html/element/datalist/index.md
+++ b/files/ja/web/html/element/datalist/index.md
@@ -46,7 +46,8 @@ l10n:
 {{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/date", "date")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}} の各型は、日付や時刻を便利に選択できるようなインターフェイスを表示することができます。
 あらかじめ定義された値をそこに示すことで、ユーザーはすばやく制御値を満たすことができます。
 
-> **メモ:** type に対応していない場合、単純なテキストフィールドを作成する `text` 型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。
+> [!NOTE]
+> type に対応していない場合、単純なテキストフィールドを作成する `text` 型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。
 
 ```html
 <input type="time" list="popularHours" />
diff --git a/files/ja/web/html/element/details/index.md b/files/ja/web/html/element/details/index.md
index a6bfb113bc83f1..219d79fe0b2174 100644
--- a/files/ja/web/html/element/details/index.md
+++ b/files/ja/web/html/element/details/index.md
@@ -29,7 +29,8 @@ CSS を使用して折り畳みウィジェットのスタイルを設定する
 
   - : この論理属性は、現在詳細（つまり `<details>` 要素の内容）が現在表示されていることを示します。この属性がある場合は詳細が表示され、この属性がない場合は非表示になります。既定では、この属性は存在しないため、詳細は表示されません。
 
-    > **メモ:** 詳細を非表示にするには、この属性を完全に削除する必要があります。この属性は論理属性なので、 `open="false"` では詳細が表示状態になります。
+    > [!NOTE]
+    > 詳細を非表示にするには、この属性を完全に削除する必要があります。この属性は論理属性なので、 `open="false"` では詳細が表示状態になります。
 
 ## イベント
 
diff --git a/files/ja/web/html/element/dfn/index.md b/files/ja/web/html/element/dfn/index.md
index 611b2d73d8d377..576c6e38449525 100644
--- a/files/ja/web/html/element/dfn/index.md
+++ b/files/ja/web/html/element/dfn/index.md
@@ -29,7 +29,8 @@ l10n:
 2. `<dfn>` が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素が `title` 属性を持つ {{HTMLElement("abbr")}} 要素である場合は、 `<abbr>` 要素の `title` の値が定義する用語です。
 3. それ以外では、 `<dfn>` 要素の文字列コンテンツが定義される用語です。これは[以下の最初の例](#基本的な用語の識別)で示します。
 
-> **メモ:** もし `<dfn>` 要素に `title` 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。
+> [!NOTE]
+> もし `<dfn>` 要素に `title` 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。
 
 ### `<dfn>` 要素へのリンク
 
diff --git a/files/ja/web/html/element/dir/index.md b/files/ja/web/html/element/dir/index.md
index e67459a8faed8b..74629327a01524 100644
--- a/files/ja/web/html/element/dir/index.md
+++ b/files/ja/web/html/element/dir/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<dir>`** は [HTML](/ja/docs/Web/HTML) の要素で、{{Glossary("user agent","ユーザーエージェント")}}が適用するスタイルやアイコンを用いて表示する、ファイルやフォルダーのディレクトリーのコンテナーとして使われます。この要素は廃止されたので使わないで下さい。代わりに、ファイル一覧を含め、一覧には {{HTMLElement("ul")}} 要素を使用してください。
 
-> **警告:** この要素は使用しないでください。この要素は HTML の初期の仕様で定義されていましたが、 HTML 4 で非推奨要素に指定され、完全に廃止されました。
+> [!WARNING]
+> この要素は使用しないでください。この要素は HTML の初期の仕様で定義されていましたが、 HTML 4 で非推奨要素に指定され、完全に廃止されました。
 
 ## DOM インターフェイス
 
diff --git a/files/ja/web/html/element/em/index.md b/files/ja/web/html/element/em/index.md
index 1a15f3285352f8..20bcfc0420944d 100644
--- a/files/ja/web/html/element/em/index.md
+++ b/files/ja/web/html/element/em/index.md
@@ -21,7 +21,8 @@ l10n:
 
 通常、この要素はイタリック体で表示されます。しかしながら、単にイタリック体のスタイルを適用するために用いるべきではありません。そのような場合は CSS の {{cssxref("font-style")}} によるスタイル付けを使用してください。著作物（書籍、演劇、歌など）の題名を示すためには、 {{HTMLElement("cite")}} 要素を使用してください。学名や他の言語の単語のようによくイタリック体が使われるような、トーンやムードが異なるテキストをマークするには {{HTMLElement("i")}} 要素を使用してください。これらも通常、斜体のスタイルとなりますが、異なる意味を持っています。周辺のテキストよりも高い重要性を持つテキストを示すためには、{{HTMLElement("strong")}} 要素を使用してください。
 
-> **メモ:** （訳注）日本語フォントでは斜体を持たないフォントが多く、斜体で表示されないことがあります。
+> [!NOTE]
+> （訳注）日本語フォントでは斜体を持たないフォントが多く、斜体で表示されないことがあります。
 
 ### \<i> と \<em>
 
diff --git a/files/ja/web/html/element/embed/index.md b/files/ja/web/html/element/embed/index.md
index 6d0cc0e2debb24..f8cd773742d958 100644
--- a/files/ja/web/html/element/embed/index.md
+++ b/files/ja/web/html/element/embed/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}
 
-> **メモ:** 本文書は、[HTML Living Standard](https://html.spec.whatwg.org/#the-embed-element) の一部として定義された要素についてのみ記載します。以前の標準化されていない要素の実装については扱いません。
+> [!NOTE]
+> 本文書は、[HTML Living Standard](https://html.spec.whatwg.org/#the-embed-element) の一部として定義された要素についてのみ記載します。以前の標準化されていない要素の実装については扱いません。
 
 最近のほとんどのブラウザーは、ブラウザーのプラグインの対応を非推奨にして削除しているため、サイトを平均的なユーザーのブラウザーで操作できるようにしたいのであれば、 `<embed>` に頼ることは賢明ではないということを意識しておいてください。
 
diff --git a/files/ja/web/html/element/fieldset/index.md b/files/ja/web/html/element/fieldset/index.md
index 99ab4cdb7bb01e..899699345cd77e 100644
--- a/files/ja/web/html/element/fieldset/index.md
+++ b/files/ja/web/html/element/fieldset/index.md
@@ -25,7 +25,8 @@ l10n:
 
   - : グループに関連付けられた名前です。
 
-    > **メモ:** fieldset 要素自身のラベルの役割は、その最初の子要素として配置した {{HTMLElement("legend")}} 要素が担います。
+    > [!NOTE]
+    > fieldset 要素自身のラベルの役割は、その最初の子要素として配置した {{HTMLElement("legend")}} 要素が担います。
 
 ## CSS でのスタイル付け
 
diff --git a/files/ja/web/html/element/font/index.md b/files/ja/web/html/element/font/index.md
index cb152c203c6e22..9a5ec3fff83ab9 100644
--- a/files/ja/web/html/element/font/index.md
+++ b/files/ja/web/html/element/font/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<font>`** は [HTML](/ja/docs/Web/HTML) の要素で、その内容のフォントサイズ、文字色、使用フォントを定義します。
 
-> **警告:** この要素を使用しないでください。 CSS の[フォント](/ja/docs/Web/CSS/CSS_fonts)のプロパティを使用してテキストにスタイル設定してください。
+> [!WARNING]
+> この要素を使用しないでください。 CSS の[フォント](/ja/docs/Web/CSS/CSS_fonts)のプロパティを使用してテキストにスタイル設定してください。
 
 ## 属性
 
diff --git a/files/ja/web/html/element/heading_elements/index.md b/files/ja/web/html/element/heading_elements/index.md
index d94a851d02e2fb..901b2e94299ca0 100644
--- a/files/ja/web/html/element/heading_elements/index.md
+++ b/files/ja/web/html/element/heading_elements/index.md
@@ -25,7 +25,8 @@ l10n:
 
 1 つのページに複数の `<h1>` 要素を使用することは HTML 標準では認められていますが（[入れ子](#入れ子)でない限り）、これはよい習慣とはみなされません。1 つのページには、ページの内容を説明する 1 つの `<h1>` 要素（文書の [`<title> 要素`](/ja/docs/Web/HTML/Element/title)と同様）を置くのが一般的です。
 
-> **メモ:** 入れ子になった[コンテンツ区分要素](/ja/docs/Web/HTML/Element#コンテンツ区分)の中で複数の `<h1>` 要素を入れ子にすることは、HTML 標準の古いバージョンでは認められていました。しかし、これはよい習慣とはみなされず、現在は非適合となっています。詳しくは、[There Is No Document Outline Algorithm](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html) をご覧ください。
+> [!NOTE]
+> 入れ子になった[コンテンツ区分要素](/ja/docs/Web/HTML/Element#コンテンツ区分)の中で複数の `<h1>` 要素を入れ子にすることは、HTML 標準の古いバージョンでは認められていました。しかし、これはよい習慣とはみなされず、現在は非適合となっています。詳しくは、[There Is No Document Outline Algorithm](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html) をご覧ください。
 
 1 ページに 1 つの `<h1>` を使用し、レベルをスキップせずに[見出しを入れ子](#入れ子)にすることを推奨します。
 
diff --git a/files/ja/web/html/element/iframe/index.md b/files/ja/web/html/element/iframe/index.md
index db0aa442a9ca57..f52023e737195d 100644
--- a/files/ja/web/html/element/iframe/index.md
+++ b/files/ja/web/html/element/iframe/index.md
@@ -13,7 +13,8 @@ l10n:
 
 それぞれの閲覧コンテキストにはそれぞれの[文書](/ja/docs/Web/API/Document)があり、URL ナビゲーションができます。それぞれの埋め込み閲覧コンテキストのナビゲーションは、最上位の閲覧コンテキストの[セッション履歴](/ja/docs/Web/API/History)で直線化されます。他の閲覧コンテキストを埋め込んでいる閲覧コンテキストは、_親閲覧コンテキスト_ と呼ばれます。_最上位_ の閲覧コンテキスト（親を持たないもの）は、通常はブラウザーのウィンドウで、 {{domxref("Window")}} オブジェクトで表されます。
 
-> **警告:** それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で `<iframe>` を使用するごとに、必要となるメモリやその他の計算リソースが増加します。理論的には好きなだけ `<iframe>` を使用することができますが、パフォーマンスの問題を確認してください。
+> [!WARNING]
+> それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で `<iframe>` を使用するごとに、必要となるメモリやその他の計算リソースが増加します。理論的には好きなだけ `<iframe>` を使用することができますが、パフォーマンスの問題を確認してください。
 
 ## 属性
 
@@ -29,13 +30,15 @@ l10n:
 
   - : この `<iframe>` が {{domxref("Element.requestFullscreen", "requestFullscreen()")}} を呼び出して全画面モードにすることができる場合は、 `true` に設定します。
 
-    > **メモ:** この属性は古い属性とみなされており、 `allow="fullscreen"` として再定義されました。
+    > [!NOTE]
+    > この属性は古い属性とみなされており、 `allow="fullscreen"` として再定義されました。
 
 - `allowpaymentrequest` {{Experimental_Inline}}
 
   - : 異なるオリジンの `<iframe>` で [支払いリクエスト API](/ja/docs/Web/API/Payment_Request_API) の実行を許可する場合は `true` に設定します。
 
-    > **メモ:** この属性は古い属性とみなされており、 `allow="payment"` として再定義されました。
+    > [!NOTE]
+    > この属性は古い属性とみなされており、 `allow="payment"` として再定義されました。
 
 - `credentialless` {{Experimental_Inline}} {{Non-standard_Inline}}
 
@@ -90,7 +93,7 @@ l10n:
     - `allow-top-navigation-by-user-activation`: リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。
     - `allow-top-navigation-to-custom-protocols`: ブラウザーに組み込まれている、または[ウェブサイトによって登録された](/ja/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers) `http` 以外のプロトコルへのナビゲーションを可能にします。この機能は `allow-popups` や `allow-top-navigation` キーワードでも有効になります。
 
-    > **メモ:**
+    > [!NOTE]
     >
     > - 埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、 `allow-scripts` と `allow-same-origin` を同時に使用すると、埋め込まれた文書から `sandbox` 属性を削除することができるようになるため、**絶対に避けるべき**です。 `sandbox` 属性をまったく使用しないよりも安全ではなくなります。
     > - 攻撃者がサンドボックス化した `iframe` の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは*別のオリジン*から提供するようにもしてください。
diff --git a/files/ja/web/html/element/img/index.md b/files/ja/web/html/element/img/index.md
index fef7cf24729a41..114422233d263b 100644
--- a/files/ja/web/html/element/img/index.md
+++ b/files/ja/web/html/element/img/index.md
@@ -61,7 +61,8 @@ SVG は、異なるサイズでも正確に描画する必要がある画像に
 
   - : この属性は、画像を説明する代替文字列を定義します。
 
-    > **メモ:** ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。
+    > [!NOTE]
+    > ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。
     >
     > - 視覚ブラウザー以外のブラウザー（視覚障碍者向けのものを含む）で閲覧された場合
     > - ユーザーが画像を非表示に設定している場合（帯域の節約、プライバシー上の理由）
@@ -132,7 +133,8 @@ SVG は、異なるサイズでも正確に描画する必要がある画像に
 
   - : 論理属性で、この画像が[サーバーサイドマップ](https://en.wikipedia.org/wiki/Image_map#Server-side)の一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。
 
-    > **メモ:** この属性は `<img>` 要素が、有効な [`href`](/ja/docs/Web/HTML/Element/a#href) 属性を持つ {{htmlelement("a")}} 要素の子孫である場合に限り許可されます。これにより、ポインティングデバイスを持たないユーザーのフォールバック先を提供します。
+    > [!NOTE]
+    > この属性は `<img>` 要素が、有効な [`href`](/ja/docs/Web/HTML/Element/a#href) 属性を持つ {{htmlelement("a")}} 要素の子孫である場合に限り許可されます。これにより、ポインティングデバイスを持たないユーザーのフォールバック先を提供します。
 
 - `loading`
 
@@ -144,7 +146,8 @@ SVG は、異なるサイズでも正確に描画する必要がある画像に
 
       - : 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。
 
-      > **メモ:** 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。
+      > [!NOTE]
+      > 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。
 
 - `referrerpolicy`
 
@@ -223,7 +226,8 @@ SVG は、異なるサイズでも正確に描画する必要がある画像に
 
   - : 画像の詳細な説明へのリンクです。有効な値は、 {{glossary("URL")}} または要素の [`id`](/ja/docs/Web/HTML/Global_attributes#id) です。
 
-    > **メモ:** この属性は、最新の {{glossary("W3C")}} のバージョンである [HTML 5.2](https://html.spec.whatwg.org/multipage/obsolete.html#element-attrdef-img-longdesc) でも言及されていますが、 {{glossary("WHATWG")}} の [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) では完全に削除されています。将来が不確実なので、代わりに、[`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) または[`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details) のような {{glossary("WAI")}}-{{glossary("ARIA")}} の代替手段を使用してください。
+    > [!NOTE]
+    > この属性は、最新の {{glossary("W3C")}} のバージョンである [HTML 5.2](https://html.spec.whatwg.org/multipage/obsolete.html#element-attrdef-img-longdesc) でも言及されていますが、 {{glossary("WHATWG")}} の [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) では完全に削除されています。将来が不確実なので、代わりに、[`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) または[`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details) のような {{glossary("WAI")}}-{{glossary("ARIA")}} の代替手段を使用してください。
 
 - `name` {{deprecated_inline}}
   - : 要素の名前です。代わりに [`id`](/ja/docs/Web/HTML/Global_attributes#id) 属性を使用してください。
@@ -288,7 +292,8 @@ SVG は、異なるサイズでも正確に描画する必要がある画像に
 
 {{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}
 
-> **メモ:** その場で大きさを変更してみるには、{{LiveSampleLink('Using_the_srcset_and_sizes_attributes', 'この例を別なページで表示')}}させる必要があり、そうすればコンテンツ領域の大きさを実際に使用することができます。
+> [!NOTE]
+> その場で大きさを変更してみるには、{{LiveSampleLink('Using_the_srcset_and_sizes_attributes', 'この例を別なページで表示')}}させる必要があり、そうすればコンテンツ領域の大きさを実際に使用することができます。
 
 ## セキュリティとプライバシーの考慮事項
 
diff --git a/files/ja/web/html/element/index.md b/files/ja/web/html/element/index.md
index b41b428b2eacdd..a0b77e40772afe 100644
--- a/files/ja/web/html/element/index.md
+++ b/files/ja/web/html/element/index.md
@@ -11,7 +11,8 @@ l10n:
 
 この一覧は、考えているものを見つけやすいように、機能別にグループ化しています。アルファベット順のすべての要素の一覧は、このページと同様に各要素ページのサイドバーにあります。
 
-> **メモ:** HTML 要素や属性の基礎について詳しくは、 [HTML 入門の記事で要素の節](/ja/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks)をご覧ください。
+> [!NOTE]
+> HTML 要素や属性の基礎について詳しくは、 [HTML 入門の記事で要素の節](/ja/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks)をご覧ください。
 
 ## メインルート
 
@@ -226,7 +227,8 @@ HTML には、インタラクティブなユーザーインターフェイスを
 
 ## 廃止または非推奨の要素
 
-> **警告:** 以下は非推奨の古い HTML 要素であり、使用するべきものではありません。 **新たなプロジェクトではこれらを使用せず、また既存のプロジェクトでも可能な限りこれらを置き換えてください。** この一覧は、情報提供のために記載しています。
+> [!WARNING]
+> 以下は非推奨の古い HTML 要素であり、使用するべきものではありません。 **新たなプロジェクトではこれらを使用せず、また既存のプロジェクトでも可能な限りこれらを置き換えてください。** この一覧は、情報提供のために記載しています。
 
 | 要素                         | 説明                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/ja/web/html/element/input/button/index.md b/files/ja/web/html/element/input/button/index.md
index ce6a21b33a6dd4..17989d7b572963 100644
--- a/files/ja/web/html/element/input/button/index.md
+++ b/files/ja/web/html/element/input/button/index.md
@@ -103,7 +103,8 @@ function updateButton() {
 
 {{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}
 
-> **メモ:** 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。
+> [!NOTE]
+> 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。
 
 ### ボタンの無効化と有効化
 
@@ -169,7 +170,8 @@ function disableButton() {
 
 {{EmbedLiveSample("Inheriting_the_disabled_state", 650, 100)}}
 
-> **メモ:** Firefox は他のブラウザーと異なり、ページが再読み込みされた後でも `<input>` 要素の `disabled` 状態を維持します。回避するには、 `<input>` 要素の [`autocomplete`](/ja/docs/Web/HTML/Element/input#autocomplete) 属性を `off` に設定します。（詳しくは [Firefox バグ 654072](https://bugzil.la/654072) を参照してください。）
+> [!NOTE]
+> Firefox は他のブラウザーと異なり、ページが再読み込みされた後でも `<input>` 要素の `disabled` 状態を維持します。回避するには、 `<input>` 要素の [`autocomplete`](/ja/docs/Web/HTML/Element/input#autocomplete) 属性を `off` に設定します。（詳しくは [Firefox バグ 654072](https://bugzil.la/654072) を参照してください。）
 
 ## 検証
 
diff --git a/files/ja/web/html/element/input/checkbox/index.md b/files/ja/web/html/element/input/checkbox/index.md
index fe96c232a464a1..29dd60bbac9a34 100644
--- a/files/ja/web/html/element/input/checkbox/index.md
+++ b/files/ja/web/html/element/input/checkbox/index.md
@@ -37,7 +37,8 @@ l10n:
 
 `value` 属性が省略された場合は、チェックボックスの既定値は `on` ですので、その場合の送信されるデータは `subscribe=on` となります。
 
-> **メモ:** フォームが送信されたとき、チェックボックスがチェックされていない場合、名前も値もサーバーに送信されません。HTML のみでチェックボックスがチェックされていない状態を表す方法（`value=unchecked` のように）はありません。チェックボックスがチェックされていないときの既定値を送信したい場合は、JavaScript を記述して、フォーム内にチェックされていない状態を示す値を持つ {{HTMLElement("input/hidden", '&lt;input type="hidden"&gt;')}} を作成することで実現できます。
+> [!NOTE]
+> フォームが送信されたとき、チェックボックスがチェックされていない場合、名前も値もサーバーに送信されません。HTML のみでチェックボックスがチェックされていない状態を表す方法（`value=unchecked` のように）はありません。チェックボックスがチェックされていないときの既定値を送信したい場合は、JavaScript を記述して、フォーム内にチェックされていない状態を示す値を持つ {{HTMLElement("input/hidden", '&lt;input type="hidden"&gt;')}} を作成することで実現できます。
 
 ## 追加の属性
 
@@ -46,7 +47,8 @@ l10n:
 - `checked`
 
   - : [論理](/ja/docs/Glossary/Boolean/HTML)属性で、チェックボックスが既定で（ページが読み込まれたときに）チェックされているかどうかを示します。チェックボックスが現在チェックされているかどうかを示すものでは*ありません*。チェックボックスの状態が変化した場合、このコンテンツ属性は変化を反映しません。（{{domxref("HTMLInputElement")}} の `checked` IDL 属性のみが更新されます。）
-    > **メモ:** 他の入力コントロールとは異なり、チェックボックスの値は現在 `checked` の状態にある場合のみ、送信データに含まれます。その場合、チェックボックスの `value` 属性の値、または `value` が設定されていない場合は `on` が入力欄の値として報告されます。
+    > [!NOTE]
+    > 他の入力コントロールとは異なり、チェックボックスの値は現在 `checked` の状態にある場合のみ、送信データに含まれます。その場合、チェックボックスの `value` 属性の値、または `value` が設定されていない場合は `on` が入力欄の値として報告されます。
     > 他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して `<input>` の[チェック状態を維持します](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。この機能を制御するには [`autocomplete`](/ja/docs/Web/HTML/Element/input#autocomplete) 属性を使用してください。
 
 - `value`
@@ -162,7 +164,8 @@ function updateDisplay() {
 
 {{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}
 
-> **メモ:** 未決定状態のチェックボックスを持つフォームを送信すると、チェックボックスがチェックされていない場合と同じ結果になります。 — チェックボックスを表すデータは送られません。
+> [!NOTE]
+> 未決定状態のチェックボックスを持つフォームを送信すると、チェックボックスがチェックされていない場合と同じ結果になります。 — チェックボックスを表すデータは送られません。
 
 ## 検証
 
diff --git a/files/ja/web/html/element/input/color/index.md b/files/ja/web/html/element/input/color/index.md
index 610cd74146cfc5..288a49847c141a 100644
--- a/files/ja/web/html/element/input/color/index.md
+++ b/files/ja/web/html/element/input/color/index.md
@@ -19,7 +19,8 @@ CSS の色表現には他にも色名、関数表記、アルファ値つきの
 
 {{HTMLElement("input")}} 要素で型が `color` のものの [`value`](/ja/docs/Web/HTML/Element/input#value) は、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。
 
-> **メモ:** 有効な、不透明な *16 進表現*の RGB カラーではない値を設定した場合は、結果的に `#000000` に設定されます。特に、CSS で標準化されている色名や、CSS 関数を値の設定に使用することはできません。HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。`#009900aa` のような 9 文字の 16 進表記で色を設定すると、結果的に `#000000` に設定されます。
+> [!NOTE]
+> 有効な、不透明な *16 進表現*の RGB カラーではない値を設定した場合は、結果的に `#000000` に設定されます。特に、CSS で標準化されている色名や、CSS 関数を値の設定に使用することはできません。HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。`#009900aa` のような 9 文字の 16 進表記で色を設定すると、結果的に `#000000` に設定されます。
 
 ## カラー入力欄の使用
 
diff --git a/files/ja/web/html/element/input/date/index.md b/files/ja/web/html/element/input/date/index.md
index ad037b85859a54..748bb4b1808a97 100644
--- a/files/ja/web/html/element/input/date/index.md
+++ b/files/ja/web/html/element/input/date/index.md
@@ -27,7 +27,8 @@ l10n:
 
 {{EmbedLiveSample('Value', 600, 40)}}
 
-> **メモ:** 表示される日付の書式は実際の `value` とは異なります。 — 表示される日付はユーザーのブラウザーに設定されたロケールに基づいた書式になりますが、解釈される `value` は常に `yyyy-mm-dd` の書式です。
+> [!NOTE]
+> 表示される日付の書式は実際の `value` とは異なります。 — 表示される日付はユーザーのブラウザーに設定されたロケールに基づいた書式になりますが、解釈される `value` は常に `yyyy-mm-dd` の書式です。
 
 JavaScript での日付値を取得したり設定したりするには、次のように {{domxref("HTMLInputElement")}} の `value` および `valueAsNumber` プロパティで行うことができます。
 
@@ -62,7 +63,8 @@ console.log(dateControl.valueAsNumber); // 1496275200000 と JavaScript タイ
 
 文字列値の `any` は刻みがないことを意味し、（[`min`](#min) や [`max`](#max) のようなほかの制約を除けば）どの値でも許可されます。
 
-> **メモ:** ユーザーによって入力されたデータが step 設定に従っていない場合、{{Glossary("user agent", "ユーザーエージェント")}}は最も近い有効な値に丸める可能性があり、同じ距離の値が 2 つあった場合は、正の方向の値を優先します。
+> [!NOTE]
+> ユーザーによって入力されたデータが step 設定に従っていない場合、{{Glossary("user agent", "ユーザーエージェント")}}は最も近い有効な値に丸める可能性があり、同じ距離の値が 2 つあった場合は、正の方向の値を優先します。
 
 `date` 入力欄では、 `step` の値は日単位で指定します。また、 86,400,000 に `step` を乗じた値に等しいミリ秒数として扱われます（数値はミリ秒単位であるため）。 `step` の既定値は `1` であり、 1 日を表します。
 
@@ -170,7 +172,8 @@ input:valid + span::after {
 }
 ```
 
-> **警告:** クライアント側のフォーム検証は、サーバー上の検証の代用にはなりません。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。
+> [!WARNING]
+> クライアント側のフォーム検証は、サーバー上の検証の代用にはなりません。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。
 
 ## ブラウザーの互換性の扱い
 
@@ -419,7 +422,8 @@ daySelect.onchange = () => {
 };
 ```
 
-> **メモ:** 53 週ある年もあることを忘れないでください（[年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。
+> [!NOTE]
+> 53 週ある年もあることを忘れないでください（[年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。
 
 ## 技術的概要
 
diff --git a/files/ja/web/html/element/input/datetime-local/index.md b/files/ja/web/html/element/input/datetime-local/index.md
index c24814b2ed225e..413eb89567db2a 100644
--- a/files/ja/web/html/element/input/datetime-local/index.md
+++ b/files/ja/web/html/element/input/datetime-local/index.md
@@ -34,7 +34,8 @@ l10n:
 
 一点気を付けなければならないことは、表示される日付と時刻の書式は実際の `value` とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーのロケールによって書式化されますが、日付や時刻の `value` は常に `YYYY-MM-DDThh:mm` の書式です。例えば、上記の値をサーバーに送信すると、 `partydate=2024-06-01T08:30` のようになります。
 
-> **メモ:** このようなデータが HTTP の [`GET`](/ja/docs/Web/HTTP/Methods/GET) を通じて送信されると、コロン文字を URL 引数に含めるために、 `partydate=2024-06-01T08%3A30` のようにエスケープする必要があることもお忘れなく。これを行う方法の一つとして {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} を参照してください。
+> [!NOTE]
+> このようなデータが HTTP の [`GET`](/ja/docs/Web/HTTP/Methods/GET) を通じて送信されると、コロン文字を URL 引数に含めるために、 `partydate=2024-06-01T08%3A30` のようにエスケープする必要があることもお忘れなく。これを行う方法の一つとして {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} を参照してください。
 
 次のように、 JavaScript で {{domxref("HTMLInputElement")}} の `value` プロパティを使用して日付の値を取得したり設定したりすることもできます。
 
@@ -65,7 +66,8 @@ dateControl.value = "2017-06-01T08:30";
 
 文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（[`min`](#min) や [`max`](#max) など、他の制約には制限されます）。
 
-> **メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
+> [!NOTE]
+> ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
 
 `datetime-local` 入力欄では、 `step` の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 `step` の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。
 
@@ -162,7 +164,8 @@ input:valid + span::after {
 }
 ```
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、誤った種類のデータなど）が送信された場合に問題が発生するおそれがあります。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、誤った種類のデータなど）が送信された場合に問題が発生するおそれがあります。
 
 > **メモ:** `datetime-local` の入力欄では、日時の値は常に `YYYY-MM-DDThh:mm` の書式に正規化されます。
 
diff --git a/files/ja/web/html/element/input/email/index.md b/files/ja/web/html/element/input/email/index.md
index bbeccf1e5300d2..0d34efbfd110ea 100644
--- a/files/ja/web/html/element/input/email/index.md
+++ b/files/ja/web/html/element/input/email/index.md
@@ -47,7 +47,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 論理属性で、存在する場合、ユーザーが複数のメールアドレスを、カンマと任意のホワイトスペースで区切ったリストを入力できることを示します。詳しくは[複数のメールアドレスの許可](#複数のメールアドレスの許可)または [HTML 属性: multiple](/ja/docs/Web/HTML/Attributes/multiple) を参照してください。
 
-> **メモ:** 通常、 [`required`](/ja/docs/Web/HTML/Element/input#required) 属性を指定すると、ユーザーは入力欄に妥当なメールアドレスを入力しなければなりません。しかし、 `multiple` 属性を追加すると、ゼロ個のメールアドレス（空文字列、またはホワイトスペースのみの文字列）が妥当な値になります。言い換えれば、 `multiple` が指定されていると、 `required` の値に関係なく、ユーザーはメールアドレスを一つも入力する必要がありません。
+> [!NOTE]
+> 通常、 [`required`](/ja/docs/Web/HTML/Element/input#required) 属性を指定すると、ユーザーは入力欄に妥当なメールアドレスを入力しなければなりません。しかし、 `multiple` 属性を追加すると、ゼロ個のメールアドレス（空文字列、またはホワイトスペースのみの文字列）が妥当な値になります。言い換えれば、 `multiple` が指定されていると、 `required` の値に関係なく、ユーザーはメールアドレスを一つも入力する必要がありません。
 
 ### pattern
 
@@ -65,13 +66,15 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-> **メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
+> [!NOTE]
+> 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
 
 ### readonly
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### size
 
@@ -85,7 +88,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 しかし、指定された文字列が、実際に存在するメールアドレスであるかどうか、サイトのユーザーに一致するか、他の方法で利用できるかを保証するには不十分です。単に入力欄の値がメールアドレスの形式に沿っているかを保証するだけです。
 
-> **メモ:** ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。
+> [!NOTE]
+> ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。
 
 ### 単純な email 型の入力欄
 
@@ -202,7 +206,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 `email` 入力欄で利用できる内容の検証には 2 つのレベルがあります。まず、すべての {{HTMLElement("input")}} で提供される標準的なレベルの検証があります。これは、入力内容が有効なメールアドレスであるための要件を満たしているかどうかを自動的に確認するものです。しかし、もし特別なニーズがあるなら、それを満たすために追加のフィルタリングを追加するオプションもあります。
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。
 
 ### 基本的な検証
 
@@ -214,7 +219,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 フォーム検証の仕組みと、 {{cssxref(":valid")}} や {{cssxref(":invalid")}} 擬似クラスを使用して、現在の値が有効かどうかに基づいて入力欄のスタイルを設定する方法については、[フォームデータの検証](/ja/docs/Learn/Forms/Form_validation)を参照してください。
 
-> **メモ:** 国際ドメイン名と HTML でのメールアドレスの検証については、仕様上の問題があることが知られています。詳しくは [W3C bug 15489](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489) を参照してください。
+> [!NOTE]
+> 国際ドメイン名と HTML でのメールアドレスの検証については、仕様上の問題があることが知られています。詳しくは [W3C bug 15489](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489) を参照してください。
 
 ### パターンによる検証
 
@@ -294,7 +300,8 @@ label::after {
 
 ![有効なメールアドレスですが、入力がエラー状態になっており、入力からポップアウトで「入力された値がフィールドに指定された書式と異なります: Best Startup Ever 社のメールアドレスのみを入力してください」と表示されている様子。](email-pattern-match-bad.png)
 
-> **メモ:** もし、検証用の正規表現を書いていて、うまく動作しない場合は、ブラウザーのコンソールを確認してください。問題を解決するための有用なエラーメッセージが表示されているかもしれません。
+> [!NOTE]
+> もし、検証用の正規表現を書いていて、うまく動作しない場合は、ブラウザーのコンソールを確認してください。問題を解決するための有用なエラーメッセージが表示されているかもしれません。
 
 ## 例
 
diff --git a/files/ja/web/html/element/input/file/index.md b/files/ja/web/html/element/input/file/index.md
index b7632f27d3bf9b..56d0dda9ed2d03 100644
--- a/files/ja/web/html/element/input/file/index.md
+++ b/files/ja/web/html/element/input/file/index.md
@@ -15,7 +15,8 @@ l10n:
 
 ファイル入力欄の [`value`](/ja/docs/Web/HTML/Element/input#value) 属性には、選択されたファイルへのパスを表す文字列が入ります。ファイルが選択されていない場合は、値は空文字列 (`""`) になります。ユーザーが複数のファイルを選択すると、`value` は選択されたファイルのリストのうち最初のファイルを表します。その他のファイルは [input 要素の `HTMLInputElement.files` プロパティ](/ja/docs/Web/API/File_API/Using_files_from_web_applications#選択されたファイルについての情報の取得)を使って得ることができます。
 
-> **メモ:** 文字列には[常に `C:\fakepath\` の接頭辞が付き](https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly)、ファイルの実際のパスにはなりません。疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するためです。
+> [!NOTE]
+> 文字列には[常に `C:\fakepath\` の接頭辞が付き](https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly)、ファイルの実際のパスにはなりません。疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するためです。
 
 ## 追加の属性
 
@@ -96,7 +97,8 @@ div {
 
 {{EmbedLiveSample('A_basic_example', 650, 90)}}
 
-> **メモ:** この例は GitHub にもあります。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。
+> [!NOTE]
+> この例は GitHub にもあります。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。
 
 ユーザーの端末やオペレーティングシステムに関わらず、ファイル入力欄にはユーザーがファイルを選択することができるファイル選択ダイアログを開くボタンがあります。
 
@@ -121,7 +123,8 @@ div {
 - `webkitRelativePath` {{non-standard_inline}}
   - : ディレクトリー選択ダイアログ (つまり、 [`webkitdirectory`](#webkitdirectory) 属性が設定されている `file` ダイアログ) で選択されたベースディレクトリーからのファイルの相対パスを表す文字列です。_これは標準外なので使用するには注意してください。_
 
-> **メモ:** 最近のブラウザーはすべて、 `HTMLInputElement.files` の値を取得だけではなく設定もできるようになっています。これが最も後に追加されたのは Firefox で、バージョン 57 で追加されました (see [Firefox バグ 1384030](https://bugzil.la/1384030))。
+> [!NOTE]
+> 最近のブラウザーはすべて、 `HTMLInputElement.files` の値を取得だけではなく設定もできるようになっています。これが最も後に追加されたのは Firefox で、バージョン 57 で追加されました (see [Firefox バグ 1384030](https://bugzil.la/1384030))。
 
 ### 受け付けるファイル型の制限
 
@@ -162,7 +165,8 @@ div {
 
 {{EmbedLiveSample('Limiting_accepted_file_types', 650, 90)}}
 
-> **メモ:** この例は GitHub にもあります。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-with-accept.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html)を確認してください。
+> [!NOTE]
+> この例は GitHub にもあります。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-with-accept.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html)を確認してください。
 
 同じように見えるかもしれませんが、この入力欄でファイルを選択しようとすると、このファイル選択ダイアログでは `accept` の値で指定されたファイル形式しか選択できません。 (細かい動きはブラウザーやオペレーティングシステムによって異なります)。
 
@@ -205,7 +209,8 @@ elem.click();
 
 この例では、この例では、 `HTMLInputElement.files` プロパティで利用できるファイル情報を利用する、さらに高度なファイル選択ダイアログを示し、またいくつか巧妙なテクニックを示します。
 
-> **メモ:** この例の完全なソースコードは GitHub — [file-example.html](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-example.html) ([ライブ版もあります](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)) で見ることができます。 CSS については説明しません。 JavaScript が中心です。
+> [!NOTE]
+> この例の完全なソースコードは GitHub — [file-example.html](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-example.html) ([ライブ版もあります](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)) で見ることができます。 CSS については説明しません。 JavaScript が中心です。
 
 最初に、 HTML を見てみましょう。
 
@@ -303,7 +308,8 @@ const preview = document.querySelector(".preview");
 input.style.opacity = 0;
 ```
 
-> **メモ:** ファイル入力欄を非表示にするために {{cssxref("opacity")}} を使用し、 {{cssxref("visibility", "visibility: hidden")}} や {{cssxref("display", "display: none")}} を使用しないのは、支援技術が後二者のファイル入力欄が対話可能ではないと解釈するからです。
+> [!NOTE]
+> ファイル入力欄を非表示にするために {{cssxref("opacity")}} を使用し、 {{cssxref("visibility", "visibility: hidden")}} や {{cssxref("display", "display: none")}} を使用しないのは、支援技術が後二者のファイル入力欄が対話可能ではないと解釈するからです。
 
 次に、[イベントリスナー](/ja/docs/Web/API/EventTarget/addEventListener)を入力欄に追加して、選択された値の変化 (この場合、ファイルが選択されたこと) を監視します。イベントリスナーは独自の `updateImageDisplay()` 関数を呼び出します。
 
diff --git a/files/ja/web/html/element/input/hidden/index.md b/files/ja/web/html/element/input/hidden/index.md
index b6b4226bf9a075..af5e7467c4c0c1 100644
--- a/files/ja/web/html/element/input/hidden/index.md
+++ b/files/ja/web/html/element/input/hidden/index.md
@@ -15,7 +15,8 @@ l10n:
 
 {{HTMLElement("input")}} 要素の [`value`](/ja/docs/Web/HTML/Element/input#value) 属性は、フォームをサーバーに送信する時に含めたい隠しデータを含みます。これは特に、ユーザーインターフェイスを通じで編集したり確認したりすることはできませんが、ブラウザーの開発者ツールから値を編集することはできます。
 
-> **警告:** ページのコンテンツ内では値がユーザーに表示されませんが、ブラウザーの開発者ツールや「ソースを表示」機能を使用して、見たり編集したりすることができます。 `hidden` の入力欄をセキュリティの形として当てにしないでください。
+> [!WARNING]
+> ページのコンテンツ内では値がユーザーに表示されませんが、ブラウザーの開発者ツールや「ソースを表示」機能を使用して、見たり編集したりすることができます。 `hidden` の入力欄をセキュリティの形として当てにしないでください。
 
 ## 追加の属性
 
@@ -47,7 +48,8 @@ l10n:
 
 これで悪意のあるユーザーが偽のフォームを作成して、銀行に成りすまし、騙されやすいユーザーを騙して別なところに送金させるようなことを防ぐことができます。この種の攻撃は[クロスサイトリクエストフォージェリ (CSRF)](/ja/docs/Learn/Server-side/First_steps/Website_security#クロスサイトリクエストフォージェリ_csrf) と呼ばれており、非常に多くの信頼されているサーバー側フレームワークがこのような攻撃を防ぐために隠した秘密を使用しています。
 
-> **メモ:** 前述のように、隠し入力欄に秘密を配置することは、本質的に安全ではありません。鍵の組み合わせやエンコーディングによって実現すべきものです。隠し入力欄の値は秘密とデータを関連付け、フォームがサーバーに送信されるときに自動的に含められます。本当にウェブサイトを安全にするには、よく設計された秘密を使用する必要があります。
+> [!NOTE]
+> 前述のように、隠し入力欄に秘密を配置することは、本質的に安全ではありません。鍵の組み合わせやエンコーディングによって実現すべきものです。隠し入力欄の値は秘密とデータを関連付け、フォームがサーバーに送信されるときに自動的に含められます。本当にウェブサイトを安全にするには、よく設計された秘密を使用する必要があります。
 
 ## 検証
 
@@ -120,7 +122,8 @@ textarea {
 
 {{ EmbedLiveSample('Examples', '100%', 200) }}
 
-> **メモ:** この例は GitHub にもあります ([ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/hidden-input-example/index.html)および[ライブでの動作の確認](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)も参照してください)。
+> [!NOTE]
+> この例は GitHub にもあります ([ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/hidden-input-example/index.html)および[ライブでの動作の確認](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)も参照してください)。
 
 送信されるとき、サーバーへ送信されるフォームデータは以下のようになります。
 
diff --git a/files/ja/web/html/element/input/index.md b/files/ja/web/html/element/input/index.md
index 796fe682f013dd..b5a0db6c560bde 100644
--- a/files/ja/web/html/element/input/index.md
+++ b/files/ja/web/html/element/input/index.md
@@ -369,7 +369,8 @@ l10n:
 
     `autofocus` は `hidden` 型の入力欄にはフォーカスを受け取ることができないため、使用することができません。
 
-    > **警告:** フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。`autofocus` が割り当てられると、スクリーンリーダーは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。
+    > [!WARNING]
+    > フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。`autofocus` が割り当てられると、スクリーンリーダーは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。
 
     `autofocus` 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。スクリーンリーダーはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。
 
@@ -379,7 +380,8 @@ l10n:
 
   - : `radio` 型と `checkbox` 型の両方で有効で、`checked` は論理属性です。`radio` 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。`checkbox` 型に存在した場合、(ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものでは<em>ありません</em>。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。（[`HTMLInputElement` の `checked` IDL 属性](/ja/docs/Web/API/HTMLInputElement)のみが更新されます。）
 
-    > **メモ:** 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 `checked` の状態にある場合だけ送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。
+    > [!NOTE]
+    > 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 `checked` の状態にある場合だけ送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。
     >
     > 例えば、`name` が `fruit` で、`value` が `cherry` であるチェックボックスがチェックされていると、送信されるフォームデータには `fruit=cherry` が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の `value` は `on` です。
 
@@ -407,7 +409,8 @@ l10n:
 
     特に、無効になった入力欄は {{domxref("Element/click_event", "click")}} イベントを受け取らず、フォームと共に送信されることもありません。
 
-    > **メモ:** 仕様書で要件とはされていませんが、Firefox は既定で、ページを再読み込みしても `<input>` を [動的に無効化した状態を維持します](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。この機能は [`autocomplete`](#autocomplete) 属性で制御することができます。
+    > [!NOTE]
+    > 仕様書で要件とはされていませんが、Firefox は既定で、ページを再読み込みしても `<input>` を [動的に無効化した状態を維持します](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。この機能は [`autocomplete`](#autocomplete) 属性で制御することができます。
 
 - `form`
 
@@ -415,7 +418,8 @@ l10n:
 
     `form` 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。
 
-    > **メモ:** 入力欄は一つのフォームとしか関連付けることができません。
+    > [!NOTE]
+    > 入力欄は一つのフォームとしか関連付けることができません。
 
 - `formaction`
   - : `image` および `submit` 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。
@@ -505,7 +509,8 @@ l10n:
 
     このコードを実行すると、`guestName` が {{domxref("HTMLInputElement")}} の `guest` フィールドに、`hatSize` が `hat-size` フィールドのオブジェクトになります。
 
-    > **警告:** フォームの組み込みプロパティに対応する `name` をフォーム要素に与えないようにしてください。そうすると、対応する入力欄に参照するとき、定義済みのプロパティやメソッドを上書きしてしまうからです。
+    > [!WARNING]
+    > フォームの組み込みプロパティに対応する `name` をフォーム要素に与えないようにしてください。そうすると、対応する入力欄に参照するとき、定義済みのプロパティやメソッドを上書きしてしまうからです。
 
 - `pattern`
 
@@ -573,7 +578,8 @@ l10n:
 
     例えば、`<input type="number" min="10" step="2">` とすると、`10` 以上の偶数の整数であればすべて有効となります。`<input type="number">` のように省略された場合は、整数であれば何でも有効ですが、浮動小数点実数 (`4.2` など) は `step` の既定値が `1` なので有効ではありません。`4.2` を有効にするためには、`step` に `any`、0.1、0.2 に設定するか、`min` の値を `.2` で終わる数に（例えば `<input type="number" min="-5.2">` に）設定する必要があります。
 
-    > **メモ:** ユーザーが入力したデータが刻みの設定に従っていない場合、その値は制約検証で無効とみなされ、`:invalid` 擬似クラスに一致するようになります。
+    > [!NOTE]
+    > ユーザーが入力したデータが刻みの設定に従っていない場合、その値は制約検証で無効とみなされ、`:invalid` 擬似クラスに一致するようになります。
 
     詳しくは[クライアント側の検証](#クライアント側の検証)を参照してください。
 
@@ -973,11 +979,13 @@ HTML の要素に色を追加することの関する詳しい情報は、次の
 
 プレイスホルダーは、スクリーンリーダーがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりした場合、プレイスホルダーは非表示になります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップすることがあります。すなわち `placeholder` は翻訳されないことがあります。
 
-> **メモ:** 避けることができるのであれば、[`placeholder`](#placeholder) 属性を使用しないでください。`<input>` 要素にラベルを付ける必要があるのであれば、{{HTMLElement("label")}} 属性を使用してください。
+> [!NOTE]
+> 避けることができるのであれば、[`placeholder`](#placeholder) 属性を使用しないでください。`<input>` 要素にラベルを付ける必要があるのであれば、{{HTMLElement("label")}} 属性を使用してください。
 
 ### クライアント側の検証
 
-> **警告:** クライアント側の検証は便利ですが、サーバーが有効なデータを受け取ることを保証するものではありません。データが特定の形式でなければならない場合は、必ずサーバー側でも検証を行い、形式が無効な場合は [HTTP の `400` レスポンス](/ja/docs/Web/HTTP/Status/400)を返してください。
+> [!WARNING]
+> クライアント側の検証は便利ですが、サーバーが有効なデータを受け取ることを保証するものではありません。データが特定の形式でなければならない場合は、必ずサーバー側でも検証を行い、形式が無効な場合は [HTTP の `400` レスポンス](/ja/docs/Web/HTTP/Status/400)を返してください。
 
 上記の [UI 擬似クラス](#ui_擬似クラス)の節で述べたように、CSS を用いて、それぞれの入力欄の現在の状態に基づく {{cssxref(":valid")}} または {{cssxref(":invalid")}} の UI 状態に基づいて入力欄にスタイル設定をすることに加え、フォームを送信（しようと）したときに、ブラウザーはクライアント側の検証を行います。フォームを送信する時に、制約検証に不合格になったフォームコントロールがある場合、対応しているブラウザーは、最初の無効なフォームコントロールにエラーメッセージを表示します。エラー種別に基づいた既定のメッセージを表示したり、ユーザーが設定したメッセージを表示したりします。
 
@@ -1147,9 +1155,11 @@ nameInput.addEventListener("invalid", () => {
 - 結果として、送信ボタンが押されたときに入力値が有効ではない場合は、独自のエラーメッセージのうちの一つが表示されます。
 - 有効である場合は、期待通りに送信されます。この場合、独自の検証は `setCustomValidity()` を空文字列で呼び出すことで中断されます。従って、`input` イベントが発生するたびにこれが行われます。以前、独自の検証が設定され、これを行わないと、送信時に有効な値を持っていたとしても、入力欄は無効であるとして登録されます。
 
-> **メモ:** 常に、クライアント側とサーバー側の両方で入力値の制約を検証するようにしてください。制約検証は、*サーバー側*での検証の必要性をなくすものではありません。古いブラウザーや悪意のある人物によって、無効な値が送信される可能性があります。
+> [!NOTE]
+> 常に、クライアント側とサーバー側の両方で入力値の制約を検証するようにしてください。制約検証は、*サーバー側*での検証の必要性をなくすものではありません。古いブラウザーや悪意のある人物によって、無効な値が送信される可能性があります。
 
-> **メモ:** Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — `x-moz-errormessage` — に対応していました。これはバージョン 66 で削除されました（[Firefox バグ 1513890](https://bugzil.la/1513890) を参照）。
+> [!NOTE]
+> Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — `x-moz-errormessage` — に対応していました。これはバージョン 66 で削除されました（[Firefox バグ 1513890](https://bugzil.la/1513890) を参照）。
 
 ### ローカライズ
 
diff --git a/files/ja/web/html/element/input/month/index.md b/files/ja/web/html/element/input/month/index.md
index 25e3fa421a16cc..28b2163c9d27aa 100644
--- a/files/ja/web/html/element/input/month/index.md
+++ b/files/ja/web/html/element/input/month/index.md
@@ -92,7 +92,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。
 しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### step
 
@@ -101,7 +102,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（[`min`](#min) や [`max`](#max) など、他の制約には制限されます）。
 
-> **メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
+> [!NOTE]
+> ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
 
 `month` 入力欄では、 `step` の値は月数で指定され、倍率は 1 です (数値も月単位であるため)。
 `step` の既定値は 1 ヶ月です。
@@ -226,7 +228,8 @@ input:valid + span::after {
 }
 ```
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。
 > HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。
 > HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。
 > サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。
@@ -448,7 +451,8 @@ function populateYears() {
 }
 ```
 
-> **メモ:** 53 週ある年もあることを忘れないでください（[年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。
+> [!NOTE]
+> 53 週ある年もあることを忘れないでください（[年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。
 
 ## 技術的概要
 
diff --git a/files/ja/web/html/element/input/number/index.md b/files/ja/web/html/element/input/number/index.md
index d7e906c9b048d1..97f78dc9eb9e10 100644
--- a/files/ja/web/html/element/input/number/index.md
+++ b/files/ja/web/html/element/input/number/index.md
@@ -51,13 +51,15 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-> **メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
+> [!NOTE]
+> 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
 
 ### `readonly`
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### `step`
 
@@ -65,7 +67,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（[`min`](#min) や [`max`](#max) など、他の制約には制限されます）。
 
-> **メモ:** ユーザーが入力したデータが刻みの設定に従わない場合、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸めることがあります。
+> [!NOTE]
+> ユーザーが入力したデータが刻みの設定に従わない場合、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸めることがあります。
 
 `number` 入力欄の既定の刻み値は `1` であり、刻みの基準値が整数ではない場合を*除いて*、整数の入力のみを許可します。
 
@@ -79,9 +82,11 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 `<input type="number">` 要素は、フォームに数値を入力するユーザーインターフェイスとロジックを構築する際に、作業を簡略化するのに役立ちます。 `type` の値に正しく `number` を設定して数値入力を作成すると、入力された文字列が数値かどうかが自動的に検証されるようになり、通常は値を 1 つずつ上下するための上下ボタンの組み合わせが表示されます。
 
-> **警告:** 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。ブラウザーによって、無効な文字を許可するものとしないものがあります。 [Firefox バグ 1398528](https://bugzil.la/1398528) を参照してください。
+> [!WARNING]
+> 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。ブラウザーによって、無効な文字を許可するものとしないものがあります。 [Firefox バグ 1398528](https://bugzil.la/1398528) を参照してください。
 
-> **メモ:** ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。
+> [!NOTE]
+> ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。
 
 モバイルブラウザーでは、ユーザーが値を入力しようとした時に、数値入力に適した特別なキーボードを表示することで、使い勝手をさらに向上させます。
 
@@ -252,7 +257,8 @@ input:valid + span::after {
 
 別な `<span>` 要素に入れたのは自由度を高めるためです。ブラウザーによっては一部の種類のフォーム入力欄において、あまり効果的に生成コンテンツを表示できないことがあります（[`<input type="date">` の検証](/ja/docs/Web/HTML/Element/input/date#validation)の節の例を読んでください）。
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。
 >
 > 誰かが HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML をバイパスし、サーバーに直接データを送信することも可能です。
 >
@@ -383,7 +389,8 @@ switchBtn.addEventListener("click", () => {
 
 （なお、ここではメートルとフィート/インチの間の変換は行っていませんが、実際のウェブアプリケーションではおそらく行うでしょう。）
 
-> **メモ:** ユーザーがボタンをクリックしたとき、 `required` 属性を非表示にする入力欄から削除し、 `value` 属性を空にしています。これは入力欄の両方の組が入力されていなくてもフォームを送信することができるようにしています。これはユーザーが意図していないデータをフォームが送信しないことを保証するものでもあります。
+> [!NOTE]
+> ユーザーがボタンをクリックしたとき、 `required` 属性を非表示にする入力欄から削除し、 `value` 属性を空にしています。これは入力欄の両方の組が入力されていなくてもフォームを送信することができるようにしています。これはユーザーが意図していないデータをフォームが送信しないことを保証するものでもあります。
 >
 > これを行わないと、フィート/インチ**と**メートルの両方を入力してフォームを送信することができてしまいます。
 
diff --git a/files/ja/web/html/element/input/password/index.md b/files/ja/web/html/element/input/password/index.md
index 881ee8e105f343..952bf6b7fa730f 100644
--- a/files/ja/web/html/element/input/password/index.md
+++ b/files/ja/web/html/element/input/password/index.md
@@ -17,7 +17,8 @@ l10n:
 ブラウザーによっては、入力された文字を一瞬だけ表示して見えなくするものや、ユーザーがプレーンテキストの表示のオン・オフを切り替えられるものがあります。
 どちらの手法も、ユーザーが意図したとおりのパスワードが入力されたかどうかを調べるのに役立ちますが、モバイル端末では特に難しい場合があります。
 
-> **メモ:** パスワードのような機密情報が含まれているフォーム（ログインフォームなど）は、 HTTPS で送信するべきです。
+> [!NOTE]
+> パスワードのような機密情報が含まれているフォーム（ログインフォームなど）は、 HTTPS で送信するべきです。
 > 多くのブラウザーで、安全ではないログインフォームに対して警告を行う仕組みが実装されています。詳細は[安全でないパスワード](/ja/docs/Web/Security/Insecure_passwords)を参照してください。
 
 ## 値
@@ -26,7 +27,8 @@ l10n:
 
 [`pattern`](/ja/docs/Web/HTML/Element/input#pattern) 属性が指定されている場合、`password` コントロールの内容は、その値が検証に合格した場合のみ、妥当とみなされます。詳細は[検証](#検証)を参照してください。
 
-> **メモ:** 改行文字の LF (U+000A) と CR (U+000D) は `password` の値には許容されません。パスワードコントロールに値がセットされるとき、LF および CR は値から取り除かれます。
+> [!NOTE]
+> 改行文字の LF (U+000A) と CR (U+000D) は `password` の値には許容されません。パスワードコントロールに値がセットされるとき、LF および CR は値から取り除かれます。
 
 ## 追加の属性
 
@@ -60,13 +62,15 @@ l10n:
 
 コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-> **メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
+> [!NOTE]
+> 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
 
 ### readonly
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement","HTMLInputElement.value")}} プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### size
 
diff --git a/files/ja/web/html/element/input/radio/index.md b/files/ja/web/html/element/input/radio/index.md
index e9cb226b401c5f..8278713e03db2b 100644
--- a/files/ja/web/html/element/input/radio/index.md
+++ b/files/ja/web/html/element/input/radio/index.md
@@ -64,7 +64,8 @@ l10n:
 
 HTML で `value` 属性を省略すると、送信されたフォームデータのそのグループには `on` の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータが `contact=on` となるため有益ではありません。ですから、 `value` 属性を設定することを忘れないようにしてください。
 
-> **メモ:** フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。
+> [!NOTE]
+> フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。
 
 実際には、フォームがグループ内のラジオボタンをまったく選択しない状態で送信するのを許可することは一般的ではないので、既定で一つを `checked` 状態を設定しておくことには意味があります。下記の[既定のラジオボタンの選択](#既定のラジオボタンの選択)を参照してください。
 
@@ -170,7 +171,8 @@ form.addEventListener(
 
 この場合、最初のラジオボタンは既定で選択されるようになります。
 
-> **メモ:** 複数のラジオボタンに `checked` 属性を指定した場合、後から指定したものが先に指定したものを上書きします。つまり、最後に `checked` されたラジオボタンが選択されることになります。これは、一度に選択できるラジオボタンはグループ内の 1 つだけであり、ユーザーエージェントは新しいラジオボタンがチェックされるたびに、他のラジオボタンの選択を自動的に解除するからです。
+> [!NOTE]
+> 複数のラジオボタンに `checked` 属性を指定した場合、後から指定したものが先に指定したものを上書きします。つまり、最後に `checked` されたラジオボタンが選択されることになります。これは、一度に選択できるラジオボタンはグループ内の 1 つだけであり、ユーザーエージェントは新しいラジオボタンがチェックされるたびに、他のラジオボタンの選択を自動的に解除するからです。
 
 ### ラジオボタンのヒット領域を大きくする
 
@@ -273,7 +275,8 @@ button:active {
 
 ここで最も注目すべきは、{{cssxref("appearance")}} プロパティ（一部のブラウザーで対応しているために必要な接頭辞付き）を使用している点です。既定で、ラジオボタン（と[チェックボックス](/ja/docs/Web/HTML/Element/input/checkbox)）は、それらのコントロールのためのオペレーティングシステムのネイティブスタイルでスタイル設定されています。 `appearance: none` を指定することで、ネイティブのスタイル設定を完全に削除し、自分自身でスタイルを作成することができます。ここでは、 {{cssxref("border")}} と {{cssxref("border-radius")}} と {{cssxref("transition")}} を使用して、ラジオ選択のアニメーションがあるように作成しています。また、 {{cssxref(":checked")}} 擬似クラスが、選択時のラジオボタンの外観のスタイルを指定するために使用されていることに注目してください。
 
-> **メモ:** もし {{cssxref("appearance")}} プロパティを使用したい場合は、とても慎重にテストする必要があります。このプロパティはほとんどの現代のブラウザーで対応していますが、その実装は大きく異なっています。古いブラウザーでは、キーワード `none` でさえ異なる形で同じ効果を持たず、まったく対応していないブラウザーもあります。最新のブラウザーでは、そのような違いは小さくなっています。
+> [!NOTE]
+> もし {{cssxref("appearance")}} プロパティを使用したい場合は、とても慎重にテストする必要があります。このプロパティはほとんどの現代のブラウザーで対応していますが、その実装は大きく異なっています。古いブラウザーでは、キーワード `none` でさえ異なる形で同じ効果を持たず、まったく対応していないブラウザーもあります。最新のブラウザーでは、そのような違いは小さくなっています。
 
 {{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}
 
diff --git a/files/ja/web/html/element/input/range/index.md b/files/ja/web/html/element/input/range/index.md
index c3224df9859873..1de4eef7e10639 100644
--- a/files/ja/web/html/element/input/range/index.md
+++ b/files/ja/web/html/element/input/range/index.md
@@ -59,7 +59,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 この値は [`max`](/ja/docs/Web/HTML/Attributes/max) 属性の値以下でなければなりません。 HTML の [`min`](/ja/docs/Web/HTML/Attributes/min) 属性を参照してください。
 
-> **メモ:** もし `min` と `max` の値が等しかったり、`max` の値が `min` の値より低かったりすると、ユーザーはその範囲を操作することができなくなります。
+> [!NOTE]
+> もし `min` と `max` の値が等しかったり、`max` の値が `min` の値より低かったりすると、ユーザーはその範囲を操作することができなくなります。
 
 ### step
 
@@ -67,7 +68,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 `step` 属性には文字列値 `any` を設定することもできます。この `step` 値は、刻み間隔を意味せず、指定した範囲内で任意の値が許されることを意味します（他にも [`min`](#min) や [`max`](#max) のような制約がある場合は除きます）。対応しているブラウザーでこのように動作するのかについては、[step を `any` に設定](#step_を_any_に設定)の例を参照してください。
 
-> **メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
+> [!NOTE]
+> ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
 
 `range` 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を*除いて*、整数の入力のみを許可します。例えば、 `min` に -10 を、 `value` に 1.5 を設定した場合、 `step` が 1 の場合は正の方向に 1.5, 2.5, 3.5,… など、負の方向に -0.5, -1.5, -2.5,… などのみが許可されます。 [HTML の `step` 属性](/ja/docs/Web/HTML/Attributes/step)を参照してください。</p>
 
@@ -77,7 +79,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える `orient` 属性は、範囲スライダーの向きを定義する定義します。値は `horizontal` が範囲を水平方向に描画することを、 `vertical` が範囲を垂直に描画することを意味します。
 
-> **メモ:** input 型の属性のうち、 `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src` は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。
+> [!NOTE]
+> input 型の属性のうち、 `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src` は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。
 
 ## 例
 
@@ -171,7 +174,8 @@ input.addEventListener("input", (event) => {
 
 コードの重複を防ぐために、同じ {{HTMLElement("datalist")}} を複数の `<input type="range">` 要素や他の {{HTMLElement("input")}} 型に再利用することができます。
 
-> **メモ:** 下記の例のように[ラベルを表示する](#ラベルの追加)こともしたい場合は、それぞれの範囲の入力に対して `datalist` が必要です。
+> [!NOTE]
+> 下記の例のように[ラベルを表示する](#ラベルの追加)こともしたい場合は、それぞれの範囲の入力に対して `datalist` が必要です。
 
 #### HTML
 
diff --git a/files/ja/web/html/element/input/reset/index.md b/files/ja/web/html/element/input/reset/index.md
index 04f83b8fa295ea..0debcfbd018057 100644
--- a/files/ja/web/html/element/input/reset/index.md
+++ b/files/ja/web/html/element/input/reset/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
 
-> **メモ:** 通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります（[送信ボタン](/ja/docs/Web/HTML/Element/input/submit)をクリックしようとしているときにクリックしてしまうことが多いです）。
+> [!NOTE]
+> 通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります（[送信ボタン](/ja/docs/Web/HTML/Element/input/submit)をクリックしようとしているときにクリックしてしまうことが多いです）。
 
 ## 値
 
@@ -93,7 +94,8 @@ l10n:
 
 実行時に `disabled` を `true` または `false` に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは `btn.disabled = true` や `btn.disabled = false` のようになります。
 
-> **メモ:** ボタンの有効化や無効化についてのより詳しい情報は、 [`<input type="button">`](/ja/docs/Web/HTML/Element/input/button#ボタンの無効化と有効化) のページを参照してください。
+> [!NOTE]
+> ボタンの有効化や無効化についてのより詳しい情報は、 [`<input type="button">`](/ja/docs/Web/HTML/Element/input/button#ボタンの無効化と有効化) のページを参照してください。
 
 ## 検証
 
diff --git a/files/ja/web/html/element/input/search/index.md b/files/ja/web/html/element/input/search/index.md
index c0b43426be2840..d0503546ec2144 100644
--- a/files/ja/web/html/element/input/search/index.md
+++ b/files/ja/web/html/element/input/search/index.md
@@ -57,13 +57,15 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 コントロールの内容がある書字方向（{{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-> **メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
+> [!NOTE]
+> 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
 
 ### readonly
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### size
 
@@ -200,7 +202,8 @@ Mozilla 拡張で、ユーザーがフィールドを編集中に <kbd>Enter</kb
 
 前回の例から見かけ上の違いはありませんが、スクリーンリーダーのユーザーは追加情報を得る方法があります。
 
-> **メモ:** このようなアクセシビリティ機能の詳細ついては、 [Signposts/Landmarks](/ja/docs/Learn/Accessibility/WAI-ARIA_basics#道しるべランドマーク_signpostlandmark) をご覧ください。
+> [!NOTE]
+> このようなアクセシビリティ機能の詳細ついては、 [Signposts/Landmarks](/ja/docs/Learn/Accessibility/WAI-ARIA_basics#道しるべランドマーク_signpostlandmark) をご覧ください。
 
 ### 物理的な入力要素の寸法
 
@@ -228,7 +231,8 @@ Mozilla 拡張で、ユーザーがフィールドを編集中に <kbd>Enter</kb
 
 `search` 型の `<input>` 要素は、通常の `text` 入力欄と同じ検証機能が利用できます。一般に検索ボックスに検証機能を使うことはあまりないでしょう。多くの場合、ユーザーは何でも入力できますが、既存の形式のデータに対して検索を行う場合など、考慮するべきケースも多少あります。
 
-> **メモ:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。
+> [!NOTE]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。
 
 ### スタイルにおけるメモ
 
diff --git a/files/ja/web/html/element/input/submit/index.md b/files/ja/web/html/element/input/submit/index.md
index 51dc243d6e8d89..e92a4c25f86cf2 100644
--- a/files/ja/web/html/element/input/submit/index.md
+++ b/files/ja/web/html/element/input/submit/index.md
@@ -158,7 +158,8 @@ l10n:
 
 実行時に `disabled` を `true` または `false` に設定することで、ボタンを有効にしたり無効にしたりすることができます。JavaScript では、 `btn.disabled = true` または `btn.disabled = false` のようになります。
 
-> **メモ:** ボタンの有効化や無効化についてのさらなる考えは、 [`<input type="button">`](/ja/docs/Web/HTML/Element/input/button#ボタンの無効化と有効化) ページを参照してください。
+> [!NOTE]
+> ボタンの有効化や無効化についてのさらなる考えは、 [`<input type="button">`](/ja/docs/Web/HTML/Element/input/button#ボタンの無効化と有効化) ページを参照してください。
 
 ## 検証
 
diff --git a/files/ja/web/html/element/input/tel/index.md b/files/ja/web/html/element/input/tel/index.md
index 556db5a17b1346..b822c9d924e292 100644
--- a/files/ja/web/html/element/input/tel/index.md
+++ b/files/ja/web/html/element/input/tel/index.md
@@ -55,13 +55,15 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-> **メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#labels)を参照してください。
+> [!NOTE]
+> 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#labels)を参照してください。
 
 ### readonly
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### size
 
@@ -159,7 +161,8 @@ Mozilla 拡張で、ユーザーがフィールドを編集中に <kbd>Enter</kb
 
 {{EmbedLiveSample("Element_value_length", 600, 40) }}
 
-> **メモ:** 上記の属性は[検証](#検証)に影響します。 - 上記の例では、値の長さが 9 文字未満、または 14 文字以上の場合、入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。
+> [!NOTE]
+> 上記の属性は[検証](#検証)に影響します。 - 上記の例では、値の長さが 9 文字未満、または 14 文字以上の場合、入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。
 
 ### 既定のオプションの提供
 
@@ -201,7 +204,8 @@ Mozilla 拡張で、ユーザーがフィールドを編集中に <kbd>Enter</kb
 
 以前にも触れましたが、電話番号で万能のクライアント側検証方法を提供することは非常に困難です。では、どうすればいいのでしょうか。いくつかの選択肢を考えてみましょう。
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。
 
 ### 電話番号を必須にする
 
diff --git a/files/ja/web/html/element/input/text/index.md b/files/ja/web/html/element/input/text/index.md
index 373505bd7d2577..5aa4c1e8584291 100644
--- a/files/ja/web/html/element/input/text/index.md
+++ b/files/ja/web/html/element/input/text/index.md
@@ -57,13 +57,15 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-> **メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のアクセシビリティの考慮](/ja/docs/Web/HTML/Element/input#アクセシビリティの考慮)を参照してください。
+> [!NOTE]
+> 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のアクセシビリティの考慮](/ja/docs/Web/HTML/Element/input#アクセシビリティの考慮)を参照してください。
 
 ### `readonly`
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### `size`
 
@@ -178,7 +180,8 @@ Mozilla 拡張で、ユーザーがフィールドを編集中に <kbd>Enter</kb
 
 `text` 型の `<input>` 要素には、適用される自動的な検証はありませんが（基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです）、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。
 
-> **メモ:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。
+> [!NOTE]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。
 
 ### スタイル付けのメモ
 
diff --git a/files/ja/web/html/element/input/time/index.md b/files/ja/web/html/element/input/time/index.md
index d02940f8d3a277..8899dc55564e95 100644
--- a/files/ja/web/html/element/input/time/index.md
+++ b/files/ja/web/html/element/input/time/index.md
@@ -105,7 +105,8 @@ startTime.addEventListener(
 
 すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 `time` 型の入力欄は次の属性にも対応しています。
 
-> **メモ:** 多くのデータ型とは異なり、時刻値は**周期的範囲**を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 `min` を `14:00` に、 `max` を `2:00` に設定すると、許可される時間の値は午後 2 時から始まり、深夜を経て次の日の午前 2 時で終わります。詳しくは、この記事の[最小値と最大値が真夜中をまたぐようにする](#最小値と最大値が真夜中をまたぐようにする)の節をご覧ください。
+> [!NOTE]
+> 多くのデータ型とは異なり、時刻値は**周期的範囲**を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 `min` を `14:00` に、 `max` を `2:00` に設定すると、許可される時間の値は午後 2 時から始まり、深夜を経て次の日の午前 2 時で終わります。詳しくは、この記事の[最小値と最大値が真夜中をまたぐようにする](#最小値と最大値が真夜中をまたぐようにする)の節をご覧ください。
 
 ### list
 
@@ -123,7 +124,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用のフィールドは値を持つことができないので、 `required` は `readonly` 属性が指定された入力には何の効果もありません。
+> [!NOTE]
+> 読み取り専用のフィールドは値を持つことができないので、 `required` は `readonly` 属性が指定された入力には何の効果もありません。
 
 ### step
 
@@ -131,7 +133,8 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（[`min`](#min) や [`max`](#max) など、他の制約には制限されます）。
 
-> **メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
+> [!NOTE]
+> ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
 
 `time` 入力欄では、 `step` の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 `step` の既定値は 60 であり、 60 秒 (1 分、60,000 ミリ秒) を表します。
 
@@ -160,7 +163,8 @@ _現時点で、 `time` 入力欄で `step` に `any` の値が何を意味す
 
 [`step`](/ja/docs/Web/HTML/Element/input#step) 属性を使用して、時刻を上下させるときに加減する時間の大きさを変更することができます（例えば、小さな矢印ウィジェットをクリックしたときに 10 分単位で時刻が動くように）。
 
-> **メモ:** このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。
+> [!NOTE]
+> このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。
 
 これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は 60 秒、または 1 分です。 60 秒 (1 分) よりも小さな値を指定した場合は、 `time` 入力欄は時と分の隣に秒の入力領域を表示します。
 
@@ -284,7 +288,8 @@ if (input.validity.valid && input.type === "time") {
 
 {{ EmbedLiveSample('Making_times_required', 600, 120) }}
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。
 
 ## ブラウザーの互換性の扱い
 
diff --git a/files/ja/web/html/element/input/url/index.md b/files/ja/web/html/element/input/url/index.md
index 68f046b063e69d..58e2b98ab88eda 100644
--- a/files/ja/web/html/element/input/url/index.md
+++ b/files/ja/web/html/element/input/url/index.md
@@ -60,13 +60,15 @@ list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要
 
 コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。
 
-> **メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
+> [!NOTE]
+> 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[`<input>` のラベル](/ja/docs/Web/HTML/Element/input#ラベル)を参照してください。
 
 ### readonly
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### size
 
@@ -114,7 +116,8 @@ URL 入力欄を `type` に適切な値 `url` を指定して作成すると、
 
 しかし、指定されたテキストが実際に存在する URL であるか、サイトのユーザーに対応しているか、またはその他の方法で受け入れられるかを確認するには、これだけでは不十分であることに注意することが重要です。これは、フィールドの値が URL として適切にフォーマットされていることを保証するものです。
 
-> **メモ:** ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。
+> [!NOTE]
+> ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。
 
 ### 単純な URL 入力欄
 
@@ -178,7 +181,8 @@ URL 入力欄を `type` に適切な値 `url` を指定して作成すると、
 
 {{EmbedLiveSample("Element_value_length", 600, 40) }}
 
-> **メモ:** 上記の属性は[検証](#検証)に影響します。最短長より短い値や最大長より長い値の入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。
+> [!NOTE]
+> 上記の属性は[検証](#検証)に影響します。最短長より短い値や最大長より長い値の入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。
 
 ### 既定のオプションの提供
 
@@ -234,7 +238,8 @@ URL 入力欄を `type` に適切な値 `url` を指定して作成すると、
 
 `url` 入力欄で利用できる内容の検証には 2 つのレベルがあります。まず、すべての {{HTMLElement("input")}} で提供される標準的なレベルの検証があります。これは、入力内容が有効な URL であるための要件を満たしているかどうかを自動的に確認するものです。しかし、もし特別なニーズがあるなら、それを満たすために追加のフィルタリングを追加するオプションもあります。
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。
 
 ### 基本的な検証
 
@@ -328,7 +333,8 @@ input:valid + span::after {
 
 そのため、「URL は myco ドメインのものを入力してください」という文字列を指定しています。こうすることで、エラーメッセージ全体が「入力された値がフィールドに指定された書式と異なります。URL は myco ドメインのものを入力してください。」のようになります。
 
-> **メモ:** もし、検証用の正規表現を書いていて、うまく動作しない場合は、ブラウザーのコンソールを確認してください。問題を解決するための有用なエラーメッセージが表示されているかもしれません。
+> [!NOTE]
+> もし、検証用の正規表現を書いていて、うまく動作しない場合は、ブラウザーのコンソールを確認してください。問題を解決するための有用なエラーメッセージが表示されているかもしれません。
 
 ## 例
 
diff --git a/files/ja/web/html/element/input/week/index.md b/files/ja/web/html/element/input/week/index.md
index 2ccaa635403734..41605a8feaeaf9 100644
--- a/files/ja/web/html/element/input/week/index.md
+++ b/files/ja/web/html/element/input/week/index.md
@@ -57,7 +57,8 @@ weekControl.value = "2017-W45";
 
 論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。
 
-> **メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
+> [!NOTE]
+> 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。
 
 ### step
 
@@ -65,7 +66,8 @@ weekControl.value = "2017-W45";
 
 文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（[`min`](#min) や [`max`](#max) など、他の制約には制限されます）。
 
-> **メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
+> [!NOTE]
+> ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
 
 `week` 入力欄では、 `step` の値は週数で指定され、 604,800,000 が乗じられます（ミリ秒単位の数値であるため)。 `step` の既定値は 1 であり、 1 週を表します。既定の刻みの既定値は -259,200,000 で、これは 1970 年の最初の週 (`1970-W01`) です。
 
@@ -180,7 +182,8 @@ input:valid + span::after {
 
 ![週番号フォームコントロールには、週番号があるべき場所に2本のダッシュがあります。黄色の警告マークと「このフィールドに入力してください」というポップアップが、入力のフォーカスリングと同じ青色でハイライトされている 2 つのダッシュから発せられています。](week-validation-chrome.png)
 
-> **警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。
+> [!WARNING]
+> HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。
 
 ## ブラウザーの互換性の扱い
 
@@ -315,7 +318,8 @@ function populateWeeks() {
 }
 ```
 
-> **メモ:** 53 週ある年もあることを忘れないでください（[年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。
+> [!NOTE]
+> 53 週ある年もあることを忘れないでください（[年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。
 
 ## 技術的概要
 
diff --git a/files/ja/web/html/element/kbd/index.md b/files/ja/web/html/element/kbd/index.md
index 33d70fd4788318..f99b6edd568fa0 100644
--- a/files/ja/web/html/element/kbd/index.md
+++ b/files/ja/web/html/element/kbd/index.md
@@ -25,7 +25,8 @@ l10n:
 - `<kbd>` 要素を {{HTMLElement("samp")}} 要素の中で使用すると、システムからユーザーにエコーバックされた入力を表します。以下の[入力のエコーバック](#入力のエコーバック)の例を参照してください。
 - 一方、 `<kbd>` 要素の中で `<samp>` 要素を使用すると、メニューやメニュー項目の名前、画面上に表示されているボタンの名前など、システムによって表示された文字列に基づく入力を表します。以下の[画面上に表示された入力の選択肢の表現](#画面上に表示された入力の選択肢の表現)を参照してください。
 
-> **メモ:** 専用のスタイルを定義して、 `<kbd>` 要素における既定のフォントの選択を上書きすることができますが、ユーザー設定によっては CSS より優先されることがあります。
+> [!NOTE]
+> 専用のスタイルを定義して、 `<kbd>` 要素における既定のフォントの選択を上書きすることができますが、ユーザー設定によっては CSS より優先されることがあります。
 
 ## 例
 
@@ -62,9 +63,11 @@ l10n:
 
 ここでは外側の `<kbd>` 要素でキー入力操作全体を囲み、それぞれのキーの組み合わせを記述するために、それぞれのキーを囲んでいます。
 
-> **メモ:** 常にこのように囲む必要はありません。外側の `<kbd>` 要素を省略して簡略化しても構いません。言い換えれば、単に `<kbd>Ctrl</kbd>+<kbd>N</kbd>` と表現するのも完全に有効です。
+> [!NOTE]
+> 常にこのように囲む必要はありません。外側の `<kbd>` 要素を省略して簡略化しても構いません。言い換えれば、単に `<kbd>Ctrl</kbd>+<kbd>N</kbd>` と表現するのも完全に有効です。
 >
-> **メモ:** しかし、スタイルシートによっては、このように重ねて囲んだ方が便利だと感じられるかもしれません。
+> [!NOTE]
+> しかし、スタイルシートによっては、このように重ねて囲んだ方が便利だと感じられるかもしれません。
 
 ##### 結果
 
diff --git a/files/ja/web/html/element/label/index.md b/files/ja/web/html/element/label/index.md
index a0d556e58f8844..c14509b369da6c 100644
--- a/files/ja/web/html/element/label/index.md
+++ b/files/ja/web/html/element/label/index.md
@@ -45,7 +45,8 @@ l10n:
 
   - : `for` 属性の値は単一の [`id`](/ja/docs/Web/HTML/Global_attributes#id) でなければならず、これは `<label>` 要素と同一の文書内にある[ラベル付け可能](/ja/docs/Web/HTML/Content_categories#ラベル付け可能)なフォーム関連要素のものです。従って、この `label` 要素が関連付けられるのはフォームコントロール 1 つだけです。
 
-    > **メモ:** プログラムから `for` 属性を設定する場合は、 [`htmlFor`](/ja/docs/Web/API/HTMLLabelElement/htmlFor) を使用してください。
+    > [!NOTE]
+    > プログラムから `for` 属性を設定する場合は、 [`htmlFor`](/ja/docs/Web/API/HTMLLabelElement/htmlFor) を使用してください。
 
     文書内で `for` 属性の値に一致する `id` 属性を持つ最初の要素が、この `label` 要素の _ラベル対象コントロール_ になります（その `id` を持つ要素が実際に [ラベル付け可能要素](https://html.spec.whatwg.org/multipage/forms.html#category-label) である場合）。このラベル付け可能な要素でない場合は、 `for` 属性は何も効果がありません。もし、文書の後半に `id` の値に一致する他の要素があったとしても、それらは考慮されません。
 
diff --git a/files/ja/web/html/element/li/index.md b/files/ja/web/html/element/li/index.md
index da83079bbf89f2..e9ca5bb9235d09 100644
--- a/files/ja/web/html/element/li/index.md
+++ b/files/ja/web/html/element/li/index.md
@@ -29,7 +29,8 @@ l10n:
 
     もし親の {{HTMLElement("ol")}} 要素で使用されていた場合は、それよりも優先されます。
 
-    > **メモ:** この属性は非推奨になっています。代わりに CSS の {{cssxref("list-style-type")}} プロパティを使用してください。
+    > [!NOTE]
+    > この属性は非推奨になっています。代わりに CSS の {{cssxref("list-style-type")}} プロパティを使用してください。
 
 ## 例
 
diff --git a/files/ja/web/html/element/link/index.md b/files/ja/web/html/element/link/index.md
index 1b42fd160b7ce5..70a7cfd7fb4cd5 100644
--- a/files/ja/web/html/element/link/index.md
+++ b/files/ja/web/html/element/link/index.md
@@ -238,7 +238,8 @@ l10n:
     - `any`: `image/svg+xml` のようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。
     - ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ `<幅のピクセル数>x<高さのピクセル数>` または `<幅のピクセル数>X<高さのピクセル数>` という形式です。それぞれのサイズがリソースに含まれていることが必要です。
 
-    > **メモ:** ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、 [`sizes`](#sizes) 属性はエントリーが 1 個だけになります。
+    > [!NOTE]
+    > ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、 [`sizes`](#sizes) 属性はエントリーが 1 個だけになります。
     > アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。 ICO の方が一般的であり、複数ブラウザーの対応 (特に IE の古いバージョン) が重要である場合はこの形式を使用してください。
 
 - `title`
@@ -266,7 +267,8 @@ l10n:
   - : この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は {{rfc(2045)}} で定義されている文字セットの、スペースまたはカンマで区切られたリストです。
     既定値は `iso-8859-1` です。
 
-    > **メモ:** この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。
+    > [!NOTE]
+    > この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。
 
 - `rev` {{deprecated_inline}}
 
@@ -274,7 +276,8 @@ l10n:
     従って、この属性は `rel` 属性の値と比べたときに逆向きの関係を定義します。
     この属性向けの[リンク種別の値](/ja/docs/Web/HTML/Attributes/rel)は、[`rel`](#rel) 向けの値と似ています。
 
-    > **メモ:** 代わりに、逆の意味の[リンク種別の値](/ja/docs/Web/HTML/Attributes/rel)を与えた [`rel`](#rel) 属性を使用してください。例えば `made` は `author` に置き換えます。また、この属性は「リビジョン」 (revision) を表すものではないので、バージョン番号を指定してはいけませんが、残念ながらいくつものサイトでそのように使用されています。
+    > [!NOTE]
+    > 代わりに、逆の意味の[リンク種別の値](/ja/docs/Web/HTML/Attributes/rel)を与えた [`rel`](#rel) 属性を使用してください。例えば `made` は `author` に置き換えます。また、この属性は「リビジョン」 (revision) を表すものではないので、バージョン番号を指定してはいけませんが、残念ながらいくつものサイトでそのように使用されています。
 
 ## 例
 
diff --git a/files/ja/web/html/element/menu/index.md b/files/ja/web/html/element/menu/index.md
index b8fe81eea65c97..fc32ef99ecaca1 100644
--- a/files/ja/web/html/element/menu/index.md
+++ b/files/ja/web/html/element/menu/index.md
@@ -19,7 +19,8 @@ l10n:
 
 `<menu>` 要素と {{HTMLElement("ul")}} 要素はともに順序なしリストの項目を表すものです。主な違いは、{{HTMLElement("ul")}} は主に項目の表示を目的とするのに対し、 `<menu>` 要素は操作を行うための対話型の項目のためのものです。関連する {{HTMLElement("menuitem")}} 要素は非推奨になりました。
 
-> **メモ:** HTML 仕様書の初期の版では、`<menu>` 要素にはコンテキストメニューとしての追加の用途がありました。この機能は廃止されたと考えており、仕様書にはありません。
+> [!NOTE]
+> HTML 仕様書の初期の版では、`<menu>` 要素にはコンテキストメニューとしての追加の用途がありました。この機能は廃止されたと考えており、仕様書にはありません。
 
 ## 例
 
diff --git a/files/ja/web/html/element/meta/index.md b/files/ja/web/html/element/meta/index.md
index c042270cebaa4a..1bbd2de3d8a9d8 100644
--- a/files/ja/web/html/element/meta/index.md
+++ b/files/ja/web/html/element/meta/index.md
@@ -122,7 +122,7 @@ l10n:
       - [`content`](#content) 属性に正の整数が 1 つだけ含まれている場合は、ページを再読み込みするまでの秒数。
       - [`content`](#content) 属性に正の整数と、その後に文字列 '`;url=`' と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。
 
-      > **警告:**
+      > [!WARNING]
       >
       > `refresh` の値で設定されたページは、時間間隔が短すぎになるという危険性があります。画面の内側から読み上げるような支援技術を利用している人は、自動的にリダイレクトされる前にページの内容を読み、理解することができないかもしれません。また、弱視の人にとっても、突然に予告なくページ内容が更新されると、混乱させる可能性があります。
       >
diff --git a/files/ja/web/html/element/meta/name/index.md b/files/ja/web/html/element/meta/name/index.md
index e9c430e6504e20..dfd72ec0e8a812 100644
--- a/files/ja/web/html/element/meta/name/index.md
+++ b/files/ja/web/html/element/meta/name/index.md
@@ -13,7 +13,8 @@ HTML 仕様書は、以下の一連の標準メタデータ名を定義してい
 
 - `application-name`: ウェブページで動作しているアプリケーションの名前です。
 
-  > **メモ:** ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる {{HTMLElement("title")}} 要素とは異なります。
+  > [!NOTE]
+  > ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる {{HTMLElement("title")}} 要素とは異なります。
   >
   > - 単なるウェブサイトにはアプリケーション名を定義するべきではありません。
 
@@ -75,7 +76,8 @@ CSS Device Adaptation 仕様書は、以下のメタデータ名を定義して
   | `user-scalable` | `yes` または `no`                             | `no` に設定された場合は、ユーザーがウェブページを拡大縮小することができなくなります。既定値は `yes` です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。                                                                                                                                                                                                                                                   |
   | `viewport-fit`  | `auto`, `contain`, `cover`                    | `auto` の値は、初期レイアウトのビューポートに影響を与えず、ウェブページ全体が表示されます。`contain` の値は、ディスプレイに内接する最大の長方形に合わせてビューポートが拡大されることを意味します。`cover` の値は、ビューポートが端末のディスプレイいっぱいになるように縮小されることを意味します。重要なコンテンツがディスプレイの外に出てしまわないように、 [safe-area-inset-\*](/ja/docs/Web/CSS/env) 変数を使用することを強くお勧めします。 |
 
-  > **メモ:** この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。
+  > [!NOTE]
+  > この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。
   >
   > - 既定値は、端末やブラウザーによって異なる場合があります。
   > - Firefox for Mobile でのこの宣言については、[こちらの記事](/ja/docs/Mobile/Viewport_meta_tag)を参照してください。
@@ -109,7 +111,8 @@ CSS Device Adaptation 仕様書は、以下のメタデータ名を定義して
   | `noimageindex` | このページをインデックスされた画像の参照ページとして表示しないよう要求します。 | [Google](https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives)                                                                                                                                                                   |
   | `nocache`      | `noarchive` と同等です。                                                       | [Bing](https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240)                                                                                                                                                                                                     |
 
-  > **メモ:** 協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。
+  > [!NOTE]
+  > 協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。
   >
   > - ロボットがこれらのルールを読むためには、ページにアクセスする必要があります。帯域幅の消費を防ぐには、 _{{Glossary("robots.txt")}}_ ファイルを使用してください。
   > - ページを削除したい場合、 `noindex` で行うことができますが、ロボットがそのページに再びアクセスした後のことになります。 `robots.txt` ファイルが再訪問を妨害していないことを確認してください。
diff --git a/files/ja/web/html/element/nobr/index.md b/files/ja/web/html/element/nobr/index.md
index cc467e0bf6aa7f..1c7b68bf3b345e 100644
--- a/files/ja/web/html/element/nobr/index.md
+++ b/files/ja/web/html/element/nobr/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<nobr>`** は [HTML](/ja/docs/Web/HTML) の要素で、その内包する文字列の自動改行を無効化します。行内に収まらない文字列は、領域からはみ出てレンダリングされるか、スクロールバーを伴って表示されます。
 
-> **警告:** この要素は広く対応されていますが、この要素は標準の要素であったことは**ない**ため、使用するべきではありません。代わりに、 CSS プロパティの {{CSSxRef("white-space")}} を次のように使用してください。
+> [!WARNING]
+> この要素は広く対応されていますが、この要素は標準の要素であったことは**ない**ため、使用するべきではありません。代わりに、 CSS プロパティの {{CSSxRef("white-space")}} を次のように使用してください。
 
 ```html
 <span style="white-space: nowrap;">Long line with no breaks</span>
diff --git a/files/ja/web/html/element/noembed/index.md b/files/ja/web/html/element/noembed/index.md
index c1bd9e2fb4a3fb..da55ca5b98149a 100644
--- a/files/ja/web/html/element/noembed/index.md
+++ b/files/ja/web/html/element/noembed/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<noembed>`** は [HTML](/ja/docs/Web/HTML) の要素で、廃止された、標準外の方法であり、 {{HTMLElement("embed")}} 要素に対応していないブラウザーや、ユーザーが仕様とした種類の[埋め込みコンテンツ](/ja/docs/Web/HTML/Content_categories#埋め込みコンテンツ)に対応していないブラウザーで代替または「フォールバック」コンテンツを提供するものです。これは HTML 4.01 で非推奨となり、代替コンテンツは {{HTMLElement("object")}} 要素の開始タグと終了タグの間に配置されるようになりました。
 
-> **メモ:** 現在のところ、この要素はまだ多くのブラウザーで動作しますが、廃止されており、使用するべきではありません。代わりに {{HTMLElement("object")}} 要素の開始タグと終了タグの間にフォールバックコンテンツを入れて使用して下さい。
+> [!NOTE]
+> 現在のところ、この要素はまだ多くのブラウザーで動作しますが、廃止されており、使用するべきではありません。代わりに {{HTMLElement("object")}} 要素の開始タグと終了タグの間にフォールバックコンテンツを入れて使用して下さい。
 
 ## 例
 
diff --git a/files/ja/web/html/element/ol/index.md b/files/ja/web/html/element/ol/index.md
index bc20af0a7f8b6d..3aecbfeadec9b4 100644
--- a/files/ja/web/html/element/ol/index.md
+++ b/files/ja/web/html/element/ol/index.md
@@ -31,7 +31,8 @@ l10n:
 
     指定された種類は、異なる [`type`](/ja/docs/Web/HTML/Element/li#type) 属性が内部の {{HTMLElement("li")}} 要素で使用されない限り、リスト全体に使用されます。
 
-    > **メモ:** （項目が番号や文字で参照される法律文書や技術文書のように）リスト番号の種類に重要性がない限り、代わりに CSS の {{CSSxRef("list-style-type")}} プロパティを使用してください。
+    > [!NOTE]
+    > （項目が番号や文字で参照される法律文書や技術文書のように）リスト番号の種類に重要性がない限り、代わりに CSS の {{CSSxRef("list-style-type")}} プロパティを使用してください。
 
 ## 使用上の注意
 
diff --git a/files/ja/web/html/element/optgroup/index.md b/files/ja/web/html/element/optgroup/index.md
index 41ef235c61bec6..21e708daf21f64 100644
--- a/files/ja/web/html/element/optgroup/index.md
+++ b/files/ja/web/html/element/optgroup/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}
 
-> **メモ:** optgroup 要素を入れ子にすることはできません。
+> [!NOTE]
+> optgroup 要素を入れ子にすることはできません。
 
 ## 属性
 
diff --git a/files/ja/web/html/element/picture/index.md b/files/ja/web/html/element/picture/index.md
index cce03b0c1c879c..4e5a3504aa0e4b 100644
--- a/files/ja/web/html/element/picture/index.md
+++ b/files/ja/web/html/element/picture/index.md
@@ -25,7 +25,8 @@ l10n:
 - **アートディレクション**。様々な `media` の条件に合わせて画像を切り抜いたり変更したりする (例えば、小さな画面では、詳細すぎない、より簡単な版の画像を読み込むなど)。
 - 特定の形式に対応していないブラウザーに対して、**代替画像形式を提供する**。
 
-  > **メモ:** 例えば、[AVIF](/ja/docs/Web/Media/Formats/Image_types#avif_画像) や [WEBP](/ja/docs/Web/Media/Formats/Image_types#webp_画像) と言った新しい形式には多くの利点がありますが、ブラウザーが対応していない可能性があります。対応している画像形式のリストは、[画像ファイルの種類と形式ガイド](/ja/docs/Web/Media/Formats/Image_types)にあります。
+  > [!NOTE]
+  > 例えば、[AVIF](/ja/docs/Web/Media/Formats/Image_types#avif_画像) や [WEBP](/ja/docs/Web/Media/Formats/Image_types#webp_画像) と言った新しい形式には多くの利点がありますが、ブラウザーが対応していない可能性があります。対応している画像形式のリストは、[画像ファイルの種類と形式ガイド](/ja/docs/Web/Media/Formats/Image_types)にあります。
 
 - 見る人の画面に最も適合する画像を読み込むことで、**通信帯域を節約しページの読み込みをより速くする**。
 
@@ -87,7 +88,8 @@ DPI の高い（高解像度の）ディスプレイのために高解像度版
 
 {{cssxref("object-position")}} プロパティを使用して、要素の枠内で画像の位置を調整したり、 {{cssxref("object-fit")}} プロパティを使用して、枠内に合わせるための画像の寸法を変更する方法を制御したりすることができます。
 
-> **メモ:** これらのプロパティは `<picture>` 要素**ではなく**、子の `<img>` 要素に用いてください。
+> [!NOTE]
+> これらのプロパティは `<picture>` 要素**ではなく**、子の `<img>` 要素に用いてください。
 
 ## 例
 
diff --git a/files/ja/web/html/element/plaintext/index.md b/files/ja/web/html/element/plaintext/index.md
index d1ac8e683505c7..1998d5e5f18884 100644
--- a/files/ja/web/html/element/plaintext/index.md
+++ b/files/ja/web/html/element/plaintext/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<plaintext>`** は [HTML](/ja/docs/Web/HTML) の要素で、開始タグ以降のすべてを生のテキストとして表示し、それ以降の HTML を無視します。開始タグ以降は全て生のテキスト扱いになるので、終了タグはありません。
 
-> **警告:** この要素は使用しないで下さい。
+> [!WARNING]
+> この要素は使用しないで下さい。
 >
 > - `<plaintext>` は HTML 2 より非推奨となっており、全てのブラウザーが実装しているわけではありません。実装しているブラウザーでも、一貫していません。
 > - `<plaintext>` は廃止されています。この要素を受け付けるブラウザーは {{HTMLElement("pre")}} 要素と同様に扱い、内部の HTML を解釈する場合もあります。
diff --git a/files/ja/web/html/element/progress/index.md b/files/ja/web/html/element/progress/index.md
index ab5e0bc9be4f13..b328e464ec5cbe 100644
--- a/files/ja/web/html/element/progress/index.md
+++ b/files/ja/web/html/element/progress/index.md
@@ -85,7 +85,8 @@ l10n:
 
 `<progress>` を使用する場合、ふつうはアクセシビリティのあるラベルを提供しましょう。ARIA 標準のラベル付け属性 [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) や [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) を `role="progressbar"` の要素と同様に使用できますが、`<progress>` を用いる場合、代わりに {{htmlelement("label")}} 要素を使用することができます。
 
-> **メモ:** 要素のタグの間に配置されたテキストはアクセシビリティラベルではありません。この要素に対応していない古いブラウザー用の代替用としてのみ推奨されます。
+> [!NOTE]
+> 要素のタグの間に配置されたテキストはアクセシビリティラベルではありません。この要素に対応していない古いブラウザー用の代替用としてのみ推奨されます。
 
 #### 例
 
diff --git a/files/ja/web/html/element/samp/index.md b/files/ja/web/html/element/samp/index.md
index 6a485d2bbf4f96..feaebb46f57931 100644
--- a/files/ja/web/html/element/samp/index.md
+++ b/files/ja/web/html/element/samp/index.md
@@ -27,7 +27,8 @@ samp {
 }
 ```
 
-> **メモ:** ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要な場合は、代わりに {{HTMLElement("output")}} 要素を使用してください。
+> [!NOTE]
+> ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要な場合は、代わりに {{HTMLElement("output")}} 要素を使用してください。
 
 ## 例
 
diff --git a/files/ja/web/html/element/script/index.md b/files/ja/web/html/element/script/index.md
index 7d30c35fdcda3f..aeb463b9e37264 100644
--- a/files/ja/web/html/element/script/index.md
+++ b/files/ja/web/html/element/script/index.md
@@ -74,7 +74,8 @@ l10n:
 
     `defer` 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 `DOMContentLoaded` イベントの発生が抑制されます。
 
-    > **警告:** この属性は、 `src` 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。
+    > [!WARNING]
+    > この属性は、 `src` 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。
     >
     > `defer` 属性は[モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)には効果がありません。既定で延期が行われます。
 
@@ -112,7 +113,8 @@ l10n:
     - `strict-origin-when-cross-origin`: 同一オリジンのリクエストを行う際は URL 全体を送信しますが、プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信し、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) にはヘッダーを送信しません。
     - `unsafe-url`: リファラーはオリジンとパスを含みます (ただし、[フラグメント](/ja/docs/Web/API/HTMLAnchorElement/hash)、[パスワード](/ja/docs/Web/API/HTMLAnchorElement/password)、[ユーザー名](/ja/docs/Web/API/HTMLAnchorElement/username)は含みません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、**安全ではありません**。
 
-    > **メモ:** 既定値および `referrerpolicy` に対応していない場合の代替値は空文字列 (`""`) です。 `referrerpolicy` が `<script>` 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は `strict-origin-when-cross-origin` と同等のものとして扱われます。
+    > [!NOTE]
+    > 既定値および `referrerpolicy` に対応していない場合の代替値は空文字列 (`""`) です。 `referrerpolicy` が `<script>` 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は `strict-origin-when-cross-origin` と同等のものとして扱われます。
 
 - `src`
   - : この属性は外部スクリプトの URI を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。
diff --git a/files/ja/web/html/element/script/type/index.md b/files/ja/web/html/element/script/type/index.md
index 04a5563eef77de..0b2b2a6ea6716d 100644
--- a/files/ja/web/html/element/script/type/index.md
+++ b/files/ja/web/html/element/script/type/index.md
@@ -30,7 +30,8 @@ l10n:
     開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。
     他の属性は、`src` 属性も含めてすべて無視されます。
 
-> **メモ:** 以前のブラウザーでは、この種類は埋め込んだり（`src` 属性によって）インポートしたりするコードのスクリプト言語を識別していました。
+> [!NOTE]
+> 以前のブラウザーでは、この種類は埋め込んだり（`src` 属性によって）インポートしたりするコードのスクリプト言語を識別していました。
 
 ## 仕様書
 
diff --git a/files/ja/web/html/element/script/type/speculationrules/index.md b/files/ja/web/html/element/script/type/speculationrules/index.md
index a8d483ac351153..3cff834cb80857 100644
--- a/files/ja/web/html/element/script/type/speculationrules/index.md
+++ b/files/ja/web/html/element/script/type/speculationrules/index.md
@@ -67,7 +67,8 @@ JSON 構造は最上位のレベルに 1 つ以上のフィールドを格納し
 - `"prerender"` {{optional_inline}}
   - : 関連文書が完全にダウンロードされ、レンダリングされ、不可視のタブに読み込まれるべき、将来起こりうるナビゲーションのルール。これには、すべてのサブリソースを読み込むこと、すべての JavaScript を実行すること、さらにはサブリソースを読み込んで JavaScript によって開始されるデータ フェッチを実行することが含まれます。これらの文書に移動すると、移動は即座に行われ、大幅なパフォーマンスの向上につながります。
 
-> **メモ:** 先読みと先読みを効果的に使用する方法の詳細については[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) のメインページを参照してください。
+> [!NOTE]
+> 先読みと先読みを効果的に使用する方法の詳細については[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) のメインページを参照してください。
 
 各アクションフィールドは配列を格納し、配列は 1 つ以上のオブジェクトを格納します。各オブジェクトには、URL と関連の引数の集合を定義する単一のルールが格納されます。
 
@@ -83,7 +84,8 @@ JSON 構造は最上位のレベルに 1 つ以上のフィールドを格納し
 
   - : ルールを解釈するブラウザーが持つ機能を表す文字列の配列で、 指定した URL にルールを適用する場合に利用できます。
 
-    > **警告:** 指定した条件を満たせないブラウザーでは、[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) に対応していても、先読みは自動的に失敗します。
+    > [!WARNING]
+    > 指定した条件を満たせないブラウザーでは、[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) に対応していても、先読みは自動的に失敗します。
 
     取りうる値は次の通りです。
 
@@ -97,7 +99,8 @@ JSON 構造は最上位のレベルに 1 つ以上のフィールドを格納し
 - `"referrer_policy"` {{optional_inline}}
   - : ルールで指定された URL をリクエストするときに使用する特定のリファラーポリシー文字列を表します - 使用可能な値については [`Referrer-Policy`](/ja/docs/Web/HTTP/Headers/Referrer-Policy) を参照してください。この目的は、参照するページが（既定で、または `Referrer-Policy` を使用して）既に保有しているポリシーよりも、投機的リクエストに特定の厳しいポリシーを設定することを許可することです。投機ルールで設定された緩いポリシーは、参照するページで設定された厳しいポリシーを上書きすることはありません。
 
-> **メモ:** 投機ルールは `<script>` 要素を使用するので、サイトに [`Content-Security-Policy`](/ja/docs/Web/HTTP/Headers/Content-Security-Policy) の [`script-src`](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) ディレクティブが指定されている場合は、明示的に許可する必要があります。これは `"inline-speculation-rules"` 値を hash- または nonce-source で追加することで行われます。
+> [!NOTE]
+> 投機ルールは `<script>` 要素を使用するので、サイトに [`Content-Security-Policy`](/ja/docs/Web/HTTP/Headers/Content-Security-Policy) の [`script-src`](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) ディレクティブが指定されている場合は、明示的に許可する必要があります。これは `"inline-speculation-rules"` 値を hash- または nonce-source で追加することで行われます。
 
 ### さらなる例
 
diff --git a/files/ja/web/html/element/search/index.md b/files/ja/web/html/element/search/index.md
index c1944037f01d42..6093a5500e7922 100644
--- a/files/ja/web/html/element/search/index.md
+++ b/files/ja/web/html/element/search/index.md
@@ -75,7 +75,8 @@ l10n:
 
 {{EmbedLiveSample('Web app search')}}
 
-> **メモ:** JavaScript を使用していないユーザーもいること、そして JavaScript が正常にダウンロードされ、解釈され、実行されるまでは、どのユーザーも JavaScript を実行していないことを忘れずにしてください。ユーザーが JavaScript を無効にしていても、確実にサイトのコンテンツにアクセスできるように保証してください。
+> [!NOTE]
+> JavaScript を使用していないユーザーもいること、そして JavaScript が正常にダウンロードされ、解釈され、実行されるまでは、どのユーザーも JavaScript を実行していないことを忘れずにしてください。ユーザーが JavaScript を無効にしていても、確実にサイトのコンテンツにアクセスできるように保証してください。
 
 ### 複数の検索
 
diff --git a/files/ja/web/html/element/select/index.md b/files/ja/web/html/element/select/index.md
index 09e8ec7a9fa3de..9d103724fbabf7 100644
--- a/files/ja/web/html/element/select/index.md
+++ b/files/ja/web/html/element/select/index.md
@@ -47,7 +47,8 @@ l10n:
 
   - : コントロールがスクロールするリストボックスとして表示される場合（つまり、 `multiple` が指定されている場合）、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。既定値は `0` です。
 
-    > **メモ:** HTML 仕様書によると、 size 属性の初期値は `1` であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、 Mozilla は当分の間、 Firefox でも `0` を返し続けることを選択しました。
+    > [!NOTE]
+    > HTML 仕様書によると、 size 属性の初期値は `1` であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、 Mozilla は当分の間、 Firefox でも `0` を返し続けることを選択しました。
 
 ## 使用上の注意
 
@@ -57,7 +58,8 @@ l10n:
 
 マウスを使用すると、 <kbd>Ctrl</kbd>、<kbd>Command</kbd>、<kbd>Shift</kbd> キー（オペレーティングシステムによって異なります）を押しながらクリックすることで、複数の項目を選択または解除することができます。
 
-> **警告:** キーボードから連続していない複数の項目を選択する仕組みは、今のところ Firefox でしか動作しないようです。
+> [!WARNING]
+> キーボードから連続していない複数の項目を選択する仕組みは、今のところ Firefox でしか動作しないようです。
 >
 > macOS では、 <kbd>Ctrl</kbd> + <kbd>↑</kbd> および <kbd>Ctrl</kbd> + <kbd>↓</kbd> のショートカットが、 OS 既定の _Mission Control_ および _Application windows_ のショートカットと競合するため、動作させるためにはこれらをオフにしなければならないでしょう。
 
@@ -187,7 +189,8 @@ l10n:
 - 親ラッパーの `<select>` のコンテキスト（[`<option>`](/ja/docs/Web/HTML/Element/option) 要素）を複製し、追加の HTML 要素と JavaScript を使用して標準の期待される動作を再実装します。これには、キーボードアクセシビリティを提供するための基本的なタブの動作が含まれます。
 - 状態と CSS を管理するために、いくつかの標準ネイティブの `属性` を新しい要素の `data-attributes` に対応付けします。
 
-> **メモ:** すべてのネイティブ機能をサポートしているわけではありません。これは標準的な HTML から始まりますが、 JSON データ、カスタム HTML、または他のソリューションから始めても同じ結果を得ることができます。
+> [!NOTE]
+> すべてのネイティブ機能をサポートしているわけではありません。これは標準的な HTML から始まりますが、 JSON データ、カスタム HTML、または他のソリューションから始めても同じ結果を得ることができます。
 
 #### HTML
 
diff --git a/files/ja/web/html/element/slot/index.md b/files/ja/web/html/element/slot/index.md
index c1c92b87e4fdd0..e01232d95ed423 100644
--- a/files/ja/web/html/element/slot/index.md
+++ b/files/ja/web/html/element/slot/index.md
@@ -65,7 +65,8 @@ l10n:
 </template>
 ```
 
-> **メモ:** この完全な例は、 [element-details](https://github.com/mdn/web-components-examples/tree/main/element-details) で見ることができます（[ライブ実行](https://mdn.github.io/web-components-examples/element-details/)もご覧ください）。また、[テンプレートとスロットの利用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)にも説明があります。
+> [!NOTE]
+> この完全な例は、 [element-details](https://github.com/mdn/web-components-examples/tree/main/element-details) で見ることができます（[ライブ実行](https://mdn.github.io/web-components-examples/element-details/)もご覧ください）。また、[テンプレートとスロットの利用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)にも説明があります。
 
 ## 技術的概要
 
diff --git a/files/ja/web/html/element/strike/index.md b/files/ja/web/html/element/strike/index.md
index 6c1c6799bdc54a..5294a60dd386ec 100644
--- a/files/ja/web/html/element/strike/index.md
+++ b/files/ja/web/html/element/strike/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<strike>`** は [HTML](/ja/docs/Web/HTML) の要素で、テキストの上に取り消し線（水平線）を引きます。
 
-> **警告:** この要素は HTML 4 および XHTML 1 で非推奨になり、HTML5 で廃止されました。意味的に適切であれば、すなわち、*削除された*コンテンツを表すのであれば、代わりに {{HTMLElement("del")}} を使用してください。それ以外の場合は {{HTMLElement("s")}} を使用してください。
+> [!WARNING]
+> この要素は HTML 4 および XHTML 1 で非推奨になり、HTML5 で廃止されました。意味的に適切であれば、すなわち、*削除された*コンテンツを表すのであれば、代わりに {{HTMLElement("del")}} を使用してください。それ以外の場合は {{HTMLElement("s")}} を使用してください。
 
 ## 属性
 
diff --git a/files/ja/web/html/element/table/index.md b/files/ja/web/html/element/table/index.md
index fe79f06d72db21..fa1d5172547032 100644
--- a/files/ja/web/html/element/table/index.md
+++ b/files/ja/web/html/element/table/index.md
@@ -317,7 +317,8 @@ document
 
 次の例では、 `document` にあるすべての `<table>` 要素のすべての `<th>` 要素にイベントハンドラーを追加しています。 `<tbody>` のすべての行を、行に含まれる `td` セルに基づいてソートします。
 
-> **メモ:** この方法では、 `<td>` 要素が子孫要素のない生のテキストで作成されていることを想定しています。
+> [!NOTE]
+> この方法では、 `<td>` 要素が子孫要素のない生のテキストで作成されていることを想定しています。
 
 ##### HTML
 
diff --git a/files/ja/web/html/element/td/index.md b/files/ja/web/html/element/td/index.md
index 2c56cad0c7f66f..7ed5e720a99574 100644
--- a/files/ja/web/html/element/td/index.md
+++ b/files/ja/web/html/element/td/index.md
@@ -28,7 +28,8 @@ l10n:
 
   - : この属性は、セルの内容の簡潔な説明を持ちます。読み上げソフトなど一部のユーザーエージェントは、内容自体の前にこの説明を提供することがあります。
 
-    > **メモ:** この属性は最新の標準で廃止されているため、使用しないでください。あるいは、省略した説明をセル内に置き、長い内容を **title** 属性に置くこともできます。
+    > [!NOTE]
+    > この属性は最新の標準で廃止されているため、使用しないでください。あるいは、省略した説明をセル内に置き、長い内容を **title** 属性に置くこともできます。
 
 - `align` {{deprecated_inline}}
 
@@ -42,7 +43,7 @@ l10n:
 
     この属性を設定しない場合は、値が `left` であるとみなされます。
 
-    > **メモ:**
+    > [!NOTE]
     >
     > - `left`, `center`, `right`, `justify` の値と同様の効果を得るには、 CSS の {{cssxref("text-align")}} プロパティを使用してください。
     > - 同様の効果を得るには、 {{cssxref("text-align")}} プロパティの値 [`char`](#char) を使用できます。
diff --git a/files/ja/web/html/element/template/index.md b/files/ja/web/html/element/template/index.md
index 526c922459ff61..8388e2f602cdf0 100644
--- a/files/ja/web/html/element/template/index.md
+++ b/files/ja/web/html/element/template/index.md
@@ -26,11 +26,13 @@ l10n:
 
       - : 内部シャドウルート DOM を JavaScript から隠します。
 
-    > **メモ:** HTML パーサーは、この属性が設定されているノードの最初の `<template>` に対して、DOM に {{domxref("ShadowRoot")}} オブジェクトを作成します。
+    > [!NOTE]
+    > HTML パーサーは、この属性が設定されているノードの最初の `<template>` に対して、DOM に {{domxref("ShadowRoot")}} オブジェクトを作成します。
     > この属性が設定されていない場合、または許可された値が設定されていない場合、あるいは `ShadowRoot` が既に同じ親に宣言的に作成されている場合は、{{domxref("HTMLTemplateElement")}} が作成されます。
     > {{domxref("HTMLTemplateElement")}} は、{{domxref("HTMLTemplateElement.shadowRootMode")}} を設定したりすることで、解釈後にシャドウルートに変更することはできません。
 
-    > **メモ:** 古いチュートリアルや例では、Chrome 90-110 で対応していた非標準の `shadowroot` 属性が見つかるかもしれません。この属性は削除され、標準の `shadowrootmode` 属性に置き換えられています。
+    > [!NOTE]
+    > 古いチュートリアルや例では、Chrome 90-110 で対応していた非標準の `shadowroot` 属性が見つかるかもしれません。この属性は削除され、標準の `shadowrootmode` 属性に置き換えられています。
 
 - `shadowrootclonable`
 
diff --git a/files/ja/web/html/element/textarea/index.md b/files/ja/web/html/element/textarea/index.md
index 7172cec9ef1204..a7d3402205c317 100644
--- a/files/ja/web/html/element/textarea/index.md
+++ b/files/ja/web/html/element/textarea/index.md
@@ -69,7 +69,8 @@ l10n:
 
   - : コントロールに何を入力できるかに関する、ユーザーへの助言です。プレースホルダーのテキスト内にあるキャリッジリターンやラインフィードは、ヒントを表示する際に改行として扱わなければなりません。
 
-    > **メモ:** プレースホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用*しない*でください。全体的な説明は、[`<input>` ラベル](/ja/docs/Web/HTML/Element/input#%E3%83%A9%E3%83%99%E3%83%AB)を参照してください。
+    > [!NOTE]
+    > プレースホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用*しない*でください。全体的な説明は、[`<input>` ラベル](/ja/docs/Web/HTML/Element/input#%E3%83%A9%E3%83%99%E3%83%AB)を参照してください。
 
 - `readonly`
   - : これは論理属性で、ユーザーがコントロールの値を変更できないことを示します。`disabled` 属性とは異なり、`readonly` 属性はユーザーがコントロールをクリックしたり選択することを妨げません。読み取り専用のコントロールの値は、フォームとともに送信可能です。
@@ -196,7 +197,8 @@ textarea {
 
 {{EmbedLiveSample('Example using "placeholder"')}}
 
-> **メモ:** プレースホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用*しない*でください。全体的な説明は、[ラベルとプレースホルダー](/ja/docs/Web/HTML/Element/input)を参照してください。
+> [!NOTE]
+> プレースホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用*しない*でください。全体的な説明は、[ラベルとプレースホルダー](/ja/docs/Web/HTML/Element/input)を参照してください。
 
 ### 無効と読み取り専用
 
diff --git a/files/ja/web/html/element/tfoot/index.md b/files/ja/web/html/element/tfoot/index.md
index 6641433e6486ca..b6d82a5832ece6 100644
--- a/files/ja/web/html/element/tfoot/index.md
+++ b/files/ja/web/html/element/tfoot/index.md
@@ -31,7 +31,7 @@ l10n:
 
     この属性が設定されていない場合は、`left` 値であるものとします。
 
-    > **メモ:**
+    > [!NOTE]
     >
     > - `left`, `center`, `right`, `justify` の値と同様の効果を得るには、 CSS の {{cssxref("text-align")}} プロパティを使用してください。
     > - CSS で `char` の値と同様の効果を得るには、 [`char`](#char) の値を {{cssxref("text-align")}} プロパティの値として使用することができます。
@@ -55,7 +55,8 @@ l10n:
     - `middle`: テキストをセル内の中央に置きます。
     - `top`: テキストを可能な限りセルの上端に近づけて配置します。
 
-    > **メモ:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。
+    > [!NOTE]
+    > この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。
 
 ## 例
 
diff --git a/files/ja/web/html/element/th/index.md b/files/ja/web/html/element/th/index.md
index 61c533ca672d70..aaef971cda20c9 100644
--- a/files/ja/web/html/element/th/index.md
+++ b/files/ja/web/html/element/th/index.md
@@ -48,7 +48,8 @@ l10n:
 
     この属性を設定しない場合は、値が `left` であるとみなされます。
 
-    > **メモ:** この属性は最新の標準仕様で廃止されたため、使用しないでください。
+    > [!NOTE]
+    > この属性は最新の標準仕様で廃止されたため、使用しないでください。
     >
     > - `left`, `center`, `right`, `justify` の値と同様の効果を得るには、 CSS の {{cssxref("text-align")}} プロパティを使用してください。
     > - `char` の値と同様の効果を得るには、 {{cssxref("text-align")}} プロパティに [`char`](#char) で使用する値と同じものを指定してください。
@@ -57,7 +58,8 @@ l10n:
 
   - : この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループの `id` です。
 
-    > **メモ:** この属性は最新の標準で廃止されているため、使用しないでください。代わりに [`scope`](#scope) 属性を使用してください。
+    > [!NOTE]
+    > この属性は最新の標準で廃止されているため、使用しないでください。代わりに [`scope`](#scope) 属性を使用してください。
 
 - `bgcolor` {{Deprecated_Inline}}
 
@@ -67,19 +69,22 @@ l10n:
 
   - : この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。 [`align`](#align) 属性を `char` に設定していない場合は、この属性を無視します。
 
-    > **メモ:** この属性は最新の標準で廃止されているため、使用しないでください。 CSS3 で同じ効果を得るには、 {{cssxref("text-align")}} プロパティの最初の値としてその文字を設定することができます。
+    > [!NOTE]
+    > この属性は最新の標準で廃止されているため、使用しないでください。 CSS3 で同じ効果を得るには、 {{cssxref("text-align")}} プロパティの最初の値としてその文字を設定することができます。
 
 - `charoff` {{deprecated_inline}}
 
   - : この属性は、 **char** 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。この値は、このシフトの長さを指定します。
 
-    > **メモ:** この属性は最新の標準で廃止されているため、使用しないでください。
+    > [!NOTE]
+    > この属性は最新の標準で廃止されているため、使用しないでください。
 
 - `height` {{deprecated_inline}}
 
   - : この属性はセルの高さの推奨値を定義するために使用されます。
 
-    > **メモ:** この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("height")}} プロパティを使用してください。
+    > [!NOTE]
+    > この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("height")}} プロパティを使用してください。
 
 - `valign` {{deprecated_inline}}
 
@@ -90,13 +95,15 @@ l10n:
     - `middle`: テキストをセル内の中央に置きます。
     - `top`: テキストを可能な限りセルの上端に近づけて配置します。
 
-    > **メモ:** この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。
+    > [!NOTE]
+    > この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。
 
 - `width` {{deprecated_inline}}
 
   - : この属性は、セルの推奨する幅を定義します。 {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} および {{domxref("HTMLTableElement.cellPadding", "cellpadding")}} プロパティで追加のスペースを追加し、また {{HTMLElement("col")}} の幅も影響を与えます。通常、列の幅が特定のセルを正常に表示できないほど狭く、またそのようなセルが存在する場合は、表示する際に幅を広げるでしょう。
 
-    > **メモ:** この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("width")}} プロパティを使用してください。
+    > [!NOTE]
+    > この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("width")}} プロパティを使用してください。
 
 ## 例
 
diff --git a/files/ja/web/html/element/thead/index.md b/files/ja/web/html/element/thead/index.md
index baf92ddecc4290..d34fab7e3a1ecb 100644
--- a/files/ja/web/html/element/thead/index.md
+++ b/files/ja/web/html/element/thead/index.md
@@ -29,7 +29,8 @@ l10n:
 
     この属性を設定しない場合は、値が `left` であるとみなされます。
 
-    > **警告:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。
+    > [!WARNING]
+    > この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。
     >
     > - 値の配置を指定するには、CSS の {{cssxref("text-align")}} プロパティを使用してください。
 
@@ -37,19 +38,22 @@ l10n:
 
   - : この属性は、列の各セルの背景色を定義します。6 桁の 16 進による色または名前付きの色を受け付けます。アルファ透過には対応していません。
 
-    > **メモ:** この属性は標準外であるため、使用しないでください。`thead` 要素は[CSS](/ja/docs/Web/CSS) の {{cssxref("background-color")}} プロパティを、適用可能な要素、たとえば `thead`, {{HTMLElement("tr")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}} のいずれかの要素で使用してください。
+    > [!NOTE]
+    > この属性は標準外であるため、使用しないでください。`thead` 要素は[CSS](/ja/docs/Web/CSS) の {{cssxref("background-color")}} プロパティを、適用可能な要素、たとえば `thead`, {{HTMLElement("tr")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}} のいずれかの要素で使用してください。
 
 - `char` {{deprecated_inline}}
 
   - : この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。[`align`](#align) 属性を `char` に設定していない場合は、この属性を無視します。
 
-    > **メモ:** この属性は最新の標準仕様で廃止された（そして対応していない）ため、使用しないでください。
+    > [!NOTE]
+    > この属性は最新の標準仕様で廃止された（そして対応していない）ため、使用しないでください。
 
 - `charoff` {{deprecated_inline}}
 
   - : この属性は、**char**属性で指定した揃え文字から列のデータをオフセットする文字数を示すために使用します。
 
-    > **メモ:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。
+    > [!NOTE]
+    > この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。
 
 - `valign` {{deprecated_inline}}
 
@@ -60,7 +64,8 @@ l10n:
     - `middle`: テキストをセル内の中央に置きます。
     - `top`: テキストを可能な限りセルの上端に近づけて配置します。
 
-    > **メモ:** この属性は最新の標準仕様で廃止された（そして対応していない）ため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。
+    > [!NOTE]
+    > この属性は最新の標準仕様で廃止された（そして対応していない）ため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。
 
 ## 例
 
diff --git a/files/ja/web/html/element/title/index.md b/files/ja/web/html/element/title/index.md
index 2c26312c42b29c..22e0d7a9b54c49 100644
--- a/files/ja/web/html/element/title/index.md
+++ b/files/ja/web/html/element/title/index.md
@@ -115,7 +115,8 @@ l10n:
 </title>
 ```
 
-> **メモ:** 現在のところ、ページの題名を動的に更新しても、スクリーンリーダーによって自動的にアナウンスされることはありません。ページの状態の大幅な変更を反映するためにページの題名を更新する場合は、[ARIA ライブリージョン](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)を使用する必要があるかもしれません。
+> [!NOTE]
+> 現在のところ、ページの題名を動的に更新しても、スクリーンリーダーによって自動的にアナウンスされることはありません。ページの状態の大幅な変更を反映するためにページの題名を更新する場合は、[ARIA ライブリージョン](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)を使用する必要があるかもしれません。
 
 - [MDN WCAG を理解する ― ガイドライン 2.4 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_—_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
 - [Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html)
diff --git a/files/ja/web/html/element/tr/index.md b/files/ja/web/html/element/tr/index.md
index 9b79e8ec4c8797..396a1b6b058ef2 100644
--- a/files/ja/web/html/element/tr/index.md
+++ b/files/ja/web/html/element/tr/index.md
@@ -40,7 +40,8 @@ l10n:
 
     `align` の値が明示的に設定されていない場合は、親ノードの値を継承します。
 
-    > **メモ:** 行内のセルで配置方法を指定するには、廃止された `align` 属性の代わりに CSS の {{CSSxRef("text-align")}} プロパティで `left`, `center`, `right`, `justify` を指定してください。文字ベースの配置方法を適用するには、 CSS の {{CSSxRef("text-align")}} プロパティに揃える文字 (`"."` や `","` など) を設定してください。
+    > [!NOTE]
+    > 行内のセルで配置方法を指定するには、廃止された `align` 属性の代わりに CSS の {{CSSxRef("text-align")}} プロパティで `left`, `center`, `right`, `justify` を指定してください。文字ベースの配置方法を適用するには、 CSS の {{CSSxRef("text-align")}} プロパティに揃える文字 (`"."` や `","` など) を設定してください。
 
 - `bgcolor` {{deprecated_inline}}
 
@@ -52,13 +53,15 @@ l10n:
 
   - : 文字列で、行のそれぞれの列のセルで揃える文字を設定します（同一の文字を使用して、それぞれの行の中心がほかの行と揃えられます）。典型的な値に、数値や金額を揃えようとするときのピリオド (`"."`) やカンマ (`","`) があります。 [`align`](#align) 属性が `char` ではない場合は、この属性は無視されます。
 
-    > **メモ:** この属性は廃止され、かつほとんど実装されていませんでした。 [`char`](#char) と同様の効果を得るには、 CSS の {{CSSxRef("text-align")}} プロパティの値として `char` の値を使用します（例えば `text-align: "."`）。
+    > [!NOTE]
+    > この属性は廃止され、かつほとんど実装されていませんでした。 [`char`](#char) と同様の効果を得るには、 CSS の {{CSSxRef("text-align")}} プロパティの値として `char` の値を使用します（例えば `text-align: "."`）。
 
 - `charoff` {{deprecated_inline}}
 
   - : 文字列で、 `char` 属性で指定した揃え文字から行のデータをオフセットする文字数を示します。例えば通貨単位の 100 分の 1 の値を使用する通貨 (例えばドルであり、100 セントに分割されます) の金額を表示するときは、一般的に値 2 を指定するでしょう。 `char` に `"."` を設定することと組み合わせると、列内の値が小数点できれいに揃い、セントの数値が小数点の右側へ適切に表示されます。
 
-    > **メモ:** この属性は廃止されただけでなく、ほとんど実装されていませんでした。
+    > [!NOTE]
+    > この属性は廃止されただけでなく、ほとんど実装されていませんでした。
 
 - `valign` {{deprecated_inline}}
 
diff --git a/files/ja/web/html/element/tt/index.md b/files/ja/web/html/element/tt/index.md
index a44e0bb5301509..1b26a02ef3a4a8 100644
--- a/files/ja/web/html/element/tt/index.md
+++ b/files/ja/web/html/element/tt/index.md
@@ -13,7 +13,8 @@ l10n:
 
 しかし、この要素は廃止されました。等幅フォントで表現する必要がある行内テキストには、より意味的に役立つ {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}}, {{HTMLElement("var")}} 要素を使用するか、中身を独自のブロックとして表現する場合は {{HTMLElement("pre")}} タグを使用してください。
 
-> **メモ:** 使用する場面に適切な意味的要素がない場合（例えば、一部のコンテンツを等幅フォントで表示する必要がある場合）は、 {{ HTMLElement("span") }} 要素を使用し、 CSS を使用して好きに整形することを検討してください。 {{cssxref("font-family")}} プロパティは始めるのにいいところです。
+> [!NOTE]
+> 使用する場面に適切な意味的要素がない場合（例えば、一部のコンテンツを等幅フォントで表示する必要がある場合）は、 {{ HTMLElement("span") }} 要素を使用し、 CSS を使用して好きに整形することを検討してください。 {{cssxref("font-family")}} プロパティは始めるのにいいところです。
 
 ## 属性
 
@@ -69,7 +70,8 @@ tt {
 
 既定では `<tt>` 要素はブラウザーの既定の等幅フォントを使って表示されます。前述の[既定のフォントの上書き](#既定のフォントの上書き)にある通り、 CSS で `tt セレクターを使用した規則を作成することで、これを上書きすることができます。
 
-> **メモ:** 既定の等幅フォントの設定を変更するユーザー設定が CSS よりも優先することがあります。
+> [!NOTE]
+> 既定の等幅フォントの設定を変更するユーザー設定が CSS よりも優先することがあります。
 
 この要素は HTML 4.01 では公式には非推奨にされませんでしたが、使用は避けて意味的要素や CSS を使用するとされていました。 `<tt>` 要素は HTML 5 で廃止されました。
 
diff --git a/files/ja/web/html/element/u/index.md b/files/ja/web/html/element/u/index.md
index 8bbc2cba9a0d44..d7d6262054316a 100644
--- a/files/ja/web/html/element/u/index.md
+++ b/files/ja/web/html/element/u/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<u>`** は [HTML](/ja/docs/Web/HTML) の要素で、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。
 
-> **警告:** この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の {{cssxref("text-decoration")}} プロパティを `underline` に設定したスタイルを適用してください。
+> [!WARNING]
+> この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の {{cssxref("text-decoration")}} プロパティを `underline` に設定したスタイルを適用してください。
 
 {{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}
 
@@ -23,7 +24,8 @@ l10n:
 
 他の純粋な整形要素と同様に、以前の HTML の下線 (`<u>`) 要素は HTML 4 で非推奨になりました。しかし `<u>` は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。
 
-> **メモ:** （既定で下線が引かれる）ハイパーリンクと誤認されるような方法で、（これも既定で下線が引かれる）`<u>` 要素を使用することは避けるように注意してください。
+> [!NOTE]
+> （既定で下線が引かれる）ハイパーリンクと誤認されるような方法で、（これも既定で下線が引かれる）`<u>` 要素を使用することは避けるように注意してください。
 
 ### 用途
 
diff --git a/files/ja/web/html/element/ul/index.md b/files/ja/web/html/element/ul/index.md
index 2d3856e1386162..3472b88461efaf 100644
--- a/files/ja/web/html/element/ul/index.md
+++ b/files/ja/web/html/element/ul/index.md
@@ -19,7 +19,8 @@ l10n:
 
   - : この論理属性は、コンパクトなスタイルでリストを描画するようブラウザーに指示するものです。この属性の解釈は{{glossary("user agent", "ユーザーエージェント")}}に委ねられ、またすべてのブラウザーで動作するものでもありません。
 
-    > **警告:** この属性は非推奨になっているため、使用しないでください。代わりに [CSS](/ja/docs/Web/CSS) を使用してください。 `compact` 属性と同様の効果を得るには、 CSS の {{cssxref("line-height")}} プロパティを用い、その値として `80%` を指定します。
+    > [!WARNING]
+    > この属性は非推奨になっているため、使用しないでください。代わりに [CSS](/ja/docs/Web/CSS) を使用してください。 `compact` 属性と同様の効果を得るには、 CSS の {{cssxref("line-height")}} プロパティを用い、その値として `80%` を指定します。
 
 - `type` {{Deprecated_inline}}
 
@@ -33,7 +34,8 @@ l10n:
 
     この属性が存在せず、[CSS](/ja/docs/Web/CSS) の {{ cssxref("list-style-type") }} プロパティがその要素に適用されていない場合は、ユーザーエージェントが行頭記号の種類を、リストの入れ子階層に応じて選択します。
 
-    > **警告:** この属性は非推奨なので使用しないでください。代替として [CSS](/ja/docs/Web/CSS) の {{ cssxref("list-style-type") }} プロパティを使用してください。
+    > [!WARNING]
+    > この属性は非推奨なので使用しないでください。代替として [CSS](/ja/docs/Web/CSS) の {{ cssxref("list-style-type") }} プロパティを使用してください。
 
 ## 使用上のメモ
 
diff --git a/files/ja/web/html/element/video/index.md b/files/ja/web/html/element/video/index.md
index 5cf0a2fb56ada2..c87b8a48ba7747 100644
--- a/files/ja/web/html/element/video/index.md
+++ b/files/ja/web/html/element/video/index.md
@@ -23,7 +23,8 @@ l10n:
 
   - : 論理属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
 
-    > **メモ:** 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。正しい自動再生の使い方についての追加情報は [autoplay ガイド](/ja/docs/Web/Media/Autoplay_guide)を参照してください。</div>
+    > [!NOTE]
+    > 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。正しい自動再生の使い方についての追加情報は [autoplay ガイド](/ja/docs/Web/Media/Autoplay_guide)を参照してください。</div>
 
     動画の自動再生を無効にするために `autoplay="false"` を指定しても機能しません。 `<video>` タグにこの属性があれば、動画が自動的に再生されます。自動再生を無効にするには、属性を完全に取り除くことが必要です。
 
@@ -79,7 +80,7 @@ l10n:
 
     既定値はブラウザーごとに異なります。仕様書では `metadata` を設定するよう助言しています。
 
-    > **メモ:**
+    > [!NOTE]
     >
     > - `autoplay` 属性は `preload` より優先します。`autoplay` を指定すると、言うまでもなくブラウザーは動画を再生するためにダウンロードを始めなければなりません。
     > - 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。
diff --git a/files/ja/web/html/element/xmp/index.md b/files/ja/web/html/element/xmp/index.md
index 7216fc1b776b25..052f3fc1a5cea5 100644
--- a/files/ja/web/html/element/xmp/index.md
+++ b/files/ja/web/html/element/xmp/index.md
@@ -11,7 +11,8 @@ l10n:
 
 **`<xmp>`** は [HTML](/ja/docs/Web/HTML) の要素で、その開始タグから終了タグまでの間のタグを HTML として解釈せず、等幅フォントでレンダリングします。 HTML2 仕様書では、これを 1 行当たり 80 文字を表示するのに充分な幅でレンダリングするよう推奨しています。
 
-> **メモ:** この要素は使用しないでください。
+> [!NOTE]
+> この要素は使用しないでください。
 >
 > - HTML3.2 から非推奨要素となっており、また一貫した実装も存在しません。そして HTML5 の言語からは完全に削除されています。
 > - 代わりに {{HTMLElement("pre")}} 要素か、意味的に適切であれば {{HTMLElement("code")}} 要素を使用してください。なお、マークアップとして解釈されないようにするには、 '`<`' の文字を '`&lt;`' としてエスケープする必要があります。
diff --git a/files/ja/web/html/global_attributes/accesskey/index.md b/files/ja/web/html/global_attributes/accesskey/index.md
index 6860597334db76..b6e629369bf929 100644
--- a/files/ja/web/html/global_attributes/accesskey/index.md
+++ b/files/ja/web/html/global_attributes/accesskey/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
 
-> **メモ:** WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の 1 つを使用します。
+> [!NOTE]
+> WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の 1 つを使用します。
 
 アクセスキーを有効にする方法は、ブラウザーやプラットフォームによって異なります。
 
diff --git a/files/ja/web/html/global_attributes/dir/index.md b/files/ja/web/html/global_attributes/dir/index.md
index 5f71566daebf15..5554047561f934 100644
--- a/files/ja/web/html/global_attributes/dir/index.md
+++ b/files/ja/web/html/global_attributes/dir/index.md
@@ -17,14 +17,16 @@ l10n:
 - `rtl`: _right to left_ を表し、右書きの言語（アラビア語など）に対して使用します。
 - `auto`: ユーザーエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字を解釈して、その方向を要素全体に適用する基本的なアルゴリズムを使用します。
 
-> **メモ:** この属性は、意味論的な位置づけが異なる場所を示す {{HTMLElement("bdo")}} 要素で必須です。
+> [!NOTE]
+> この属性は、意味論的な位置づけが異なる場所を示す {{HTMLElement("bdo")}} 要素で必須です。
 >
 > - この属性は {{HTMLElement("bdi")}} 要素に継承され**ません**。属性を設定しない場合の値は `auto` になります。
 > - この属性は、 CSS の {{cssxref("direction")}} プロパティや {{cssxref("unicode-bidi")}} プロパティで上書きできます。ただし、 CSS が有効かつ要素がこれらのプロパティに対応する場合に限ります。
 > - テキストの書字方向はその表示ではなく、内容に対して意味論的な関係がありますので、ウェブ開発者には、可能であれば関連する CSS プロパティの代わりにこの属性を使用することを推奨します。これにより、 CSS に対応しないブラウザーや CSS を無効化したブラウザーでもテキストが正しく表示されます。
 > - 値 `auto` は、ユーザーが入力して最終的にデータベースへ保存するデータなど、書字方向が不定のデータに対して使用してください。
 
-> **メモ:** ブラウザーではユーザーが {{ HTMLElement("input") }} や {{ HTMLElement("textarea") }} の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> および <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd> を使用します。 Firefox は <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> を使用しますが、 **`dir`** 属性の値は変更しません。
+> [!NOTE]
+> ブラウザーではユーザーが {{ HTMLElement("input") }} や {{ HTMLElement("textarea") }} の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> および <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd> を使用します。 Firefox は <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> を使用しますが、 **`dir`** 属性の値は変更しません。
 
 ## 仕様書
 
diff --git a/files/ja/web/html/global_attributes/draggable/index.md b/files/ja/web/html/global_attributes/draggable/index.md
index 54aed96b94118f..784c9a9668a0dc 100644
--- a/files/ja/web/html/global_attributes/draggable/index.md
+++ b/files/ja/web/html/global_attributes/draggable/index.md
@@ -17,7 +17,8 @@ l10n:
 - `true`: 要素がドラッグ可能であることを示す
 - `false`: 要素はドラッグ不可であることを示す
 
-> **警告:** この属性は _[列挙型](/ja/docs/Glossary/Enumerated)_ であり、_論理属性_ ではありません。 `true` または `false` の値が必須であり、 `<img draggable>` のような省略形は認められません。正しい使用法は `<img draggable="false">` です。
+> [!WARNING]
+> この属性は _[列挙型](/ja/docs/Glossary/Enumerated)_ であり、_論理属性_ ではありません。 `true` または `false` の値が必須であり、 `<img draggable>` のような省略形は認められません。正しい使用法は `<img draggable="false">` です。
 
 この属性が設定されなかった場合の既定値は `auto` であり、ブラウザーの既定のドラッグ動作であることを意味します。テキストの選択範囲、画像、リンクのみがドラッグ可能です。他の要素でドラッグ＆ドロップできるようにするためには {{domxref('HTMLElement.dragstart_event', 'ondragstart')}} イベントを設定する必要があります（こちらの[包括的なサンプル](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations)にあるように）。
 
diff --git a/files/ja/web/html/global_attributes/id/index.md b/files/ja/web/html/global_attributes/id/index.md
index 404d0f2335c431..430eb36dc293d3 100644
--- a/files/ja/web/html/global_attributes/id/index.md
+++ b/files/ja/web/html/global_attributes/id/index.md
@@ -11,11 +11,13 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
 
-> **警告:** この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません（ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 `ticket-18659` と `r45tgfe-freds&$@` を比べてみてください）。
+> [!WARNING]
+> この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません（ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 `ticket-18659` と `r45tgfe-freds&$@` を比べてみてください）。
 
 `id` の値に{{glossary("whitespace", "ホワイトスペース")}}文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる [`class`](/ja/docs/Web/HTML/Global_attributes#class) 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。
 
-> **メモ:** 技術的には、`id` 属性の値には{{glossary("whitespace", "ホワイトスペース")}}文字を除いて、どんな文字でも入れることができます。しかし、不注意によるエラーを避けるためには、{{glossary("ASCII")}} 文字、数字、`'_'`、`'-'` のみを使用し、`id` 属性の値は文字から始める必要があります。例えば、`.` は CSS では特別な意味を持ちます（[クラスセレクター](/ja/docs/Web/CSS/Class_selectors)として動作します）。CSS の中でそれをエスケープするように注意しない限り、`id` 属性の値の一部として認識されることはありません。この処理を忘れると、コードにバグが発生し、発見が困難になることがあります。
+> [!NOTE]
+> 技術的には、`id` 属性の値には{{glossary("whitespace", "ホワイトスペース")}}文字を除いて、どんな文字でも入れることができます。しかし、不注意によるエラーを避けるためには、{{glossary("ASCII")}} 文字、数字、`'_'`、`'-'` のみを使用し、`id` 属性の値は文字から始める必要があります。例えば、`.` は CSS では特別な意味を持ちます（[クラスセレクター](/ja/docs/Web/CSS/Class_selectors)として動作します）。CSS の中でそれをエスケープするように注意しない限り、`id` 属性の値の一部として認識されることはありません。この処理を忘れると、コードにバグが発生し、発見が困難になることがあります。
 
 ## 仕様書
 
diff --git a/files/ja/web/html/global_attributes/itemprop/index.md b/files/ja/web/html/global_attributes/itemprop/index.md
index 7d85222e800e0f..3548eb8c07a23a 100644
--- a/files/ja/web/html/global_attributes/itemprop/index.md
+++ b/files/ja/web/html/global_attributes/itemprop/index.md
@@ -196,7 +196,8 @@ ID が人間にとって読みやすくない場合、 ID の代わりに製品
 </div>
 ```
 
-> **メモ:** マイクロデータとマイクロデータがマークアップされる文書のコンテンツに関係はありません。
+> [!NOTE]
+> マイクロデータとマイクロデータがマークアップされる文書のコンテンツに関係はありません。
 
 ### 2 つの異なる方法でマークアップされた同じ構造化データ
 
@@ -284,7 +285,8 @@ ID が人間にとって読みやすくない場合、 ID の代わりに製品
 
    1. "`.`" (U+002E FULL STOP) 文字と "`:`" (U+003A COLON) 文字を含まず、所有者のアイテムプロパティ名 (公式な仕様で定義されないもの) として使用される文字列。
 
-> **メモ:** 上記の規則では、URL ではない値では ":" が許可されていません。そうでなければ URL と区別できないからです。 "." 文字をもつ値は、将来の拡張のために予約されています。空白文字は複数のトークンとして解析されるために許可されません。
+> [!NOTE]
+> 上記の規則では、URL ではない値では ":" が許可されていません。そうでなければ URL と区別できないからです。 "." 文字をもつ値は、将来の拡張のために予約されています。空白文字は複数のトークンとして解析されるために許可されません。
 
 ## 値
 
diff --git a/files/ja/web/html/global_attributes/itemscope/index.md b/files/ja/web/html/global_attributes/itemscope/index.md
index 92a7deee3d00f8..52ce9efee82216 100644
--- a/files/ja/web/html/global_attributes/itemscope/index.md
+++ b/files/ja/web/html/global_attributes/itemscope/index.md
@@ -191,7 +191,8 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** 手軽に HTML からマイクロデータを抽出するには、 Google の[リッチリザルトテストツール](https://search.google.com/test/rich-results)が便利です。上の HTML で試してみてください。
+> [!NOTE]
+> 手軽に HTML からマイクロデータを抽出するには、 Google の[リッチリザルトテストツール](https://search.google.com/test/rich-results)が便利です。上の HTML で試してみてください。
 
 </div>
 
diff --git a/files/ja/web/html/global_attributes/itemtype/index.md b/files/ja/web/html/global_attributes/itemtype/index.md
index bfbdc1e229fbad..e76f744d35a840 100644
--- a/files/ja/web/html/global_attributes/itemtype/index.md
+++ b/files/ja/web/html/global_attributes/itemtype/index.md
@@ -129,7 +129,8 @@ Google などの主要な検索エンジンは、構造化データのために
   </tbody>
 </table>
 
-> **メモ:** HTML からマイクロデータを抽出するのに手軽なツールとして、 Google の[構造化データテストツール](https://developers.google.com/search/docs/advanced/structured-data)があります。こちらの HTML で試してみてください。
+> [!NOTE]
+> HTML からマイクロデータを抽出するのに手軽なツールとして、 Google の[構造化データテストツール](https://developers.google.com/search/docs/advanced/structured-data)があります。こちらの HTML で試してみてください。
 
 #### HTML
 
diff --git a/files/ja/web/html/global_attributes/nonce/index.md b/files/ja/web/html/global_attributes/nonce/index.md
index d777b47946812b..944244466fc827 100644
--- a/files/ja/web/html/global_attributes/nonce/index.md
+++ b/files/ja/web/html/global_attributes/nonce/index.md
@@ -15,7 +15,8 @@ l10n:
 `nonce` 属性は、特定の要素、例えば特定のインラインスクリプトやスタイル要素を許可リスト化するのに有益なものです。
 [CSP](/ja/docs/Web/HTTP/CSP) の `unsafe-inline` ディレクティブの使用を避けることができ、すべてのインラインスクリプトまたはスタイルを許可リスト化することができます。
 
-> **メモ:** 安全でないインラインのスクリプトや スタイルのコンテンツを使用しない方法がない場合のみ、 `nonce` を使用してください。もし `nonce` が必要ないのであれば、使用しないでください。スクリプトが静的なものであれば、代わりに CSP ハッシュを使用することもできます。
+> [!NOTE]
+> 安全でないインラインのスクリプトや スタイルのコンテンツを使用しない方法がない場合のみ、 `nonce` を使用してください。もし `nonce` が必要ないのであれば、使用しないでください。スクリプトが静的なものであれば、代わりに CSP ハッシュを使用することもできます。
 > （[安全でないインラインスクリプト](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script)の使用上の注意を参照してください。）
 > 常に [CSP](/ja/docs/Web/HTTP/CSP) の保護を最大限に活用し、ノンスや安全でないインラインスクリプトを可能な限り避けるようにしてください。
 
diff --git a/files/ja/web/html/global_attributes/popover/index.md b/files/ja/web/html/global_attributes/popover/index.md
index f99d09b10d525e..2c136322e84cbd 100644
--- a/files/ja/web/html/global_attributes/popover/index.md
+++ b/files/ja/web/html/global_attributes/popover/index.md
@@ -27,7 +27,8 @@ l10n:
 <div popover id="my-popover">私から皆さんへ、こんにちは！</div>
 ```
 
-> **メモ:** MDN にあるポップオーバーの例の完全な例にアクセスするには、[ポップオーバー API 例のランディングページ](https://mdn.github.io/dom-examples/popover-api/)を参照してください。
+> [!NOTE]
+> MDN にあるポップオーバーの例の完全な例にアクセスするには、[ポップオーバー API 例のランディングページ](https://mdn.github.io/dom-examples/popover-api/)を参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/html/global_attributes/style/index.md b/files/ja/web/html/global_attributes/style/index.md
index b2ca3e4b8a1145..e99955bed73ea0 100644
--- a/files/ja/web/html/global_attributes/style/index.md
+++ b/files/ja/web/html/global_attributes/style/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
 
-> **メモ:** この属性は、意味的な情報を伝えるために使用してはいけません。すべてのスタイルが削除されたとしても、ページは依然として意味的にが正しくあるべきです。特に、無関係な情報を隠すために使用しないようにしてください。これには [`hidden`](/ja/docs/Web/HTML/Global_attributes/hidden) 属性を使用してください。
+> [!NOTE]
+> この属性は、意味的な情報を伝えるために使用してはいけません。すべてのスタイルが削除されたとしても、ページは依然として意味的にが正しくあるべきです。特に、無関係な情報を隠すために使用しないようにしてください。これには [`hidden`](/ja/docs/Web/HTML/Global_attributes/hidden) 属性を使用してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/html/global_attributes/tabindex/index.md b/files/ja/web/html/global_attributes/tabindex/index.md
index 8f128bff393a52..4f8d807f4bc9f4 100644
--- a/files/ja/web/html/global_attributes/tabindex/index.md
+++ b/files/ja/web/html/global_attributes/tabindex/index.md
@@ -13,11 +13,13 @@ l10n:
 
 値としては整数値を受け付け、値によって次のような様々な結果になります。
 
-> **メモ:** HTML 要素がレンダリングされ、その `tabindex` 属性が有効な整数値である場合、その要素は JavaScript で（[`focus()`](/ja/docs/Web/API/HTMLElement/focus) メソッドを呼び出すことで）フォーカスしたり、マウスクリックで視覚的にフォーカスしたりすることができます。特定の `tabindex` 値は、その要素が `tabbable` （キーボードによる連続したナビゲーション、通常は <kbd>Tab</kbd> キーで到達可能）であるかどうかを制御します。
+> [!NOTE]
+> HTML 要素がレンダリングされ、その `tabindex` 属性が有効な整数値である場合、その要素は JavaScript で（[`focus()`](/ja/docs/Web/API/HTMLElement/focus) メソッドを呼び出すことで）フォーカスしたり、マウスクリックで視覚的にフォーカスしたりすることができます。特定の `tabindex` 値は、その要素が `tabbable` （キーボードによる連続したナビゲーション、通常は <kbd>Tab</kbd> キーで到達可能）であるかどうかを制御します。
 
 - _負の数_ （正確な値は重要ではありませんが、ふつうは `tabindex="-1"`）は、その要素がキーボードの順次ナビゲーションでは到達できないことを意味します。
 
-  > **メモ:** tabindex="-1"` は、<kbd>Tab</kbd> キーで直接ナビゲートされるべきではないが、キーボードフォーカスを設定する必要のある要素に有益な場合があります。例としては、表示されたときにフォーカスされるべき画面外のモーダルウィンドウや、誤ったフォームを送信したときに直ちにフォーカスされるべきフォーム送信エラーメッセージなどが挙げられます。
+  > [!NOTE]
+  > tabindex="-1"` は、<kbd>Tab</kbd> キーで直接ナビゲートされるべきではないが、キーボードフォーカスを設定する必要のある要素に有益な場合があります。例としては、表示されたときにフォーカスされるべき画面外のモーダルウィンドウや、誤ったフォームを送信したときに直ちにフォーカスされるべきフォーム送信エラーメッセージなどが挙げられます。
 
 - `tabindex="0"` は、要素がキーボードの順次ナビゲーションで、`tabindex` が正の値の要素の後にフォーカスを持つことが可能であることを意味します。これらの要素のフォーカスナビゲーション順は、文書のソース内の順序で定義されます。
 - 正の数は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能であり、その順序は数値で定義されることを表します。つまり、 `tabindex="4"` は `tabindex="5"` よりも前にフォーカスが来ますが、 `tabindex="3"` よりも後だということです。複数の要素に同じ正の数の `tabindex` が指定された場合は、文書のソース内の互いの位置に従った順序になります。 `tabindex` の最大値は 32767 です。
@@ -27,7 +29,8 @@ l10n:
 
 フォーカス可能な HTML 要素の中には、[ユーザーエージェント](/ja/docs/Glossary/User_agent)によって、`tabindex` に `0` の既定値が与えられるものがあります。これらの要素は `href` 属性を持つ {{HTMLElement("a")}} または {{HTMLElement("area")}}、{{HTMLElement("button")}}、{{HTMLElement("frame")}} {{deprecated_inline}}、{{HTMLElement("iframe")}}、{{HTMLElement("input")}}、{{HTMLElement("object")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}、SVG の {{SVGElement("a")}} 要素、あるいは {{HTMLElement("details")}} 要素の概要を提供する {{HTMLElement("summary")}} 要素があります。開発者は既定の動作を変更しない限り、これらの要素に `tabindex` 属性を追加しないでください（例えば、負の値を記載すると、フォーカスされたナビゲーション順序から要素が削除されます）。
 
-> **警告:** tabindex 属性は {{HTMLElement("dialog")}} 要素に使用してはいけません。
+> [!WARNING]
+> tabindex 属性は {{HTMLElement("dialog")}} 要素に使用してはいけません。
 
 ## アクセシビリティの考慮事項
 
diff --git a/files/ja/web/html/index.md b/files/ja/web/html/index.md
index 2ffb7d55ca5b6a..a7f42178cb0909 100644
--- a/files/ja/web/html/index.md
+++ b/files/ja/web/html/index.md
@@ -26,7 +26,7 @@ HTML 要素は文書中で、 "`<`" および "`>`" で囲まれた要素名で
 - HTML リファレンス
   - : 広範な [HTML リファレンス](/ja/docs/Web/HTML/Reference)の章で、 HTML のすべての要素と属性についての詳細が分かります。
 
-> **注目:**
+> [!CALLOUT]
 >
 > #### フロントエンドのウェブ開発者を目指している方へ
 >
diff --git a/files/ja/web/html/microdata/index.md b/files/ja/web/html/microdata/index.md
index 95bb41d13bdda4..da7a558477c567 100644
--- a/files/ja/web/html/microdata/index.md
+++ b/files/ja/web/html/microdata/index.md
@@ -14,7 +14,8 @@ slug: Web/HTML/Microdata
 
 Google をはじめとする主要な検索エンジンは、構造化されたデータ [Schema.org](https://schema.org) に対応しています。この語彙は、タイプ名やプロパティ名の標準セットを定義しています。たとえば、 [Schema.org Music Event](https://schema.org/MusicEvent) はコンサートを表し、 [startDate](https://schema.org/startDate) と [location](https://schema.org/location) プロパティをコンサートの主要な詳細を指定するために併用します。この場合、 [Schema.org Music Event](https://schema.org/MusicEvent) は itemtype によって使用される URL となり、 startDate と location は [Schema.org Music Event](https://schema.org/MusicEvent) が定義する itemprop になります。
 
-> **メモ:** itemtype 属性の詳細は <https://schema.org/Thing> にあります。
+> [!NOTE]
+> itemtype 属性の詳細は <https://schema.org/Thing> にあります。
 
 マイクロデータの語彙は、アイテムのセマンティックスや意味を提供します。ウェブ開発者は専用の語彙を設計したり、 [schema.org](https://schema.org) のような広く使用されている語彙を利用したりすることができます。よく使用されるマークアップ語彙のコレクションは、 Schema.org によって提供されます。
 
@@ -142,7 +143,8 @@ Google、Microsoft、Yahoo! のような主要な検索エンジンの管理者
 
 {{ EmbedLiveSample('HTML', '', '100') }}
 
-> **メモ:** HTML からマイクロデータを抽出するための手軽なツールとして、 Google の[構造化データテストツール](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data)があります。上に示した HTML 上で試してみてください。
+> [!NOTE]
+> HTML からマイクロデータを抽出するための手軽なツールとして、 Google の[構造化データテストツール](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data)があります。上に示した HTML 上で試してみてください。
 
 ## ブラウザーの互換性
 
diff --git a/files/ja/web/http/authentication/index.md b/files/ja/web/http/authentication/index.md
index f2cd269a790a2d..7459d59cd5ed64 100644
--- a/files/ja/web/http/authentication/index.md
+++ b/files/ja/web/http/authentication/index.md
@@ -25,7 +25,8 @@ HTTP はアクセス制御と認証の基本的な枠組みを提供していま
 上記の全体的なメッセージの流れは、（すべてではありませんが）多くの[認証方式](#認証方式)で同じです。
 ヘッダーに含まれる実際の情報とそのエンコード方法は変わります。
 
-> **警告:** 上記の図で使用されている "Basic" 認証方式は、資格情報をエンコードしますが暗号化はしません。
+> [!WARNING]
+> 上記の図で使用されている "Basic" 認証方式は、資格情報をエンコードしますが暗号化はしません。
 > これは安全な接続 (HTTPS/TLS) を介して行わなければ完全に安全ではありません。
 
 ### プロキシー認証
diff --git a/files/ja/web/http/basics_of_http/data_urls/index.md b/files/ja/web/http/basics_of_http/data_urls/index.md
index d37938da39306f..52bb30c1a43847 100644
--- a/files/ja/web/http/basics_of_http/data_urls/index.md
+++ b/files/ja/web/http/basics_of_http/data_urls/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Basics_of_HTTP/Data_URLs
 
 **データ URL** は `data:` スキームが先頭についた URL で、小さなファイルをインラインで文書に埋め込むことができます。以前、 WHATWG で取り下げられるまでは "data URIs" と呼ばれていました。
 
-> **メモ:** 最近のブラウザーでは、データ URL はナビゲーションを担当する設定オブジェクトの起源を継承するのではなく、一意の不透明な起点として扱われます。
+> [!NOTE]
+> 最近のブラウザーでは、データ URL はナビゲーションを担当する設定オブジェクトの起源を継承するのではなく、一意の不透明な起点として扱われます。
 
 ## 構文
 
diff --git a/files/ja/web/http/basics_of_http/mime_types/index.md b/files/ja/web/http/basics_of_http/mime_types/index.md
index 47fefe0f2fb7e3..2b14f4bcb4de4d 100644
--- a/files/ja/web/http/basics_of_http/mime_types/index.md
+++ b/files/ja/web/http/basics_of_http/mime_types/index.md
@@ -12,7 +12,8 @@ MIME タイプは IETF の {{RFC(6838)}} で定義され、標準化されてい
 
 [Internet Assigned Numbers Authority (IANA)](https://www.iana.org/) はすべての公式の MIME タイプを管理しており、[Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml) ページで最新の完全な一覧を見ることができます。
 
-> **警告:** ブラウザーは URL を処理する方法を決定するために、_ファイル拡張子ではなく_ MIME タイプを使用しますので、ウェブサーバーは正しい MIME タイプをレスポンスの {{HTTPHeader("Content-Type")}} ヘッダーで送信することが重要です。
+> [!WARNING]
+> ブラウザーは URL を処理する方法を決定するために、_ファイル拡張子ではなく_ MIME タイプを使用しますので、ウェブサーバーは正しい MIME タイプをレスポンスの {{HTTPHeader("Content-Type")}} ヘッダーで送信することが重要です。
 > これが正しく構成されていないと、ブラウザーはファイルの中身を誤って解釈し、サイトが正しく動作しなかったり、ダウンロードファイルが誤って扱われたりすることがあります。
 
 ## MIME タイプの構造
@@ -155,7 +156,8 @@ JavaScript のコンテンツの中には、 `charset` 引数を MIME タイプ
 - `text/x-ecmascript` {{Non-standard_Inline}}
 - `text/x-javascript` {{Non-standard_Inline}}
 
-> **メモ:** ある{{Glossary("user agent", "ユーザーエージェント")}}がこれらのいずれか、またはすべてに対応していても、 `text/javascript` だけを使用するようにしてください。
+> [!NOTE]
+> ある{{Glossary("user agent", "ユーザーエージェント")}}がこれらのいずれか、またはすべてに対応していても、 `text/javascript` だけを使用するようにしてください。
 > このタイプは、現在および将来にわたって動作が保証されている唯一の MIME タイプです。
 
 ### 画像タイプ
diff --git a/files/ja/web/http/basics_of_http/resource_urls/index.md b/files/ja/web/http/basics_of_http/resource_urls/index.md
index e32983cb1128e3..10f15546d1be75 100644
--- a/files/ja/web/http/basics_of_http/resource_urls/index.md
+++ b/files/ja/web/http/basics_of_http/resource_urls/index.md
@@ -55,7 +55,8 @@ http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc
 
 しかし、特定の状況下で Firefox がウェブコンテンツにリソースを読み込む必要があります。 たとえば、ビュー・ソース・ページ (ビュー・ソースまたはビュー選択ソース) を開くと、 `resource:` URI を介して `viewsource.css` が必要です。ウェブコンテンツに公開する必要があるリソースは、 `resource://content-accessible/`という名前の新しい場所に移動されました。これは隔離されており、重要ではないリソースのみが含まれています。 このようにして、重要なリソースを公開し、ほとんどの脅威を排除できます。
 
-> **メモ:** ウェブと拡張機能の開発者がリソース URL をもう使用しようとしないことをお勧めします。彼らの使い方はうまくいきませんでした。そしてほとんどの使用法はこれ以上動作しません。
+> [!NOTE]
+> ウェブと拡張機能の開発者がリソース URL をもう使用しようとしないことをお勧めします。彼らの使い方はうまくいきませんでした。そしてほとんどの使用法はこれ以上動作しません。
 
 ## 仕様
 
diff --git a/files/ja/web/http/browser_detection_using_the_user_agent/index.md b/files/ja/web/http/browser_detection_using_the_user_agent/index.md
index 291bd6c6af4bbe..66561e2e3bad2b 100644
--- a/files/ja/web/http/browser_detection_using_the_user_agent/index.md
+++ b/files/ja/web/http/browser_detection_using_the_user_agent/index.md
@@ -11,7 +11,8 @@ l10n:
 
 しかし、ブラウザーや標準は完全ではなく、ブラウザーの判定を必要とする場合も稀にあります。ユーザーエージェント文字列を使用してブラウザーを判定することは簡単に見えますが、うまく行くようにするのは、実はとても難しい問題です。この文書では、これをできるだけ正しく行う方法を案内します。
 
-> **メモ:** 繰り返します。ユーザーエージェントを調べるのが良いことはめったにありません。問題を解決するには、もっと良い、もっと広く互換性のある方法が見つかるはずです。
+> [!NOTE]
+> 繰り返します。ユーザーエージェントを調べるのが良いことはめったにありません。問題を解決するには、もっと良い、もっと広く互換性のある方法が見つかるはずです。
 
 ## ブラウザーの判定を用いる前に考えること
 
@@ -273,4 +274,5 @@ addEventListener("resize", () =>
 
 要するに、モバイル端末を検出するには、ユーザーエージェント文字列のどこかに文字列 `Mobi` があるかどうかを探すことをお勧めします。
 
-> **メモ:** 端末が大きくて `Mobi` と表示されていない場合は、デスクトップサイトを提供してください（ベストプラクティスとして、デスクトップ機にタッチ画面が採用されつつあるので、どちらにしてもタッチ入力に対応するようにしてください）。
+> [!NOTE]
+> 端末が大きくて `Mobi` と表示されていない場合は、デスクトップサイトを提供してください（ベストプラクティスとして、デスクトップ機にタッチ画面が採用されつつあるので、どちらにしてもタッチ入力に対応するようにしてください）。
diff --git a/files/ja/web/http/caching/index.md b/files/ja/web/http/caching/index.md
index 70ef4b9cfdcdb5..81a4318cc2b050 100644
--- a/files/ja/web/http/caching/index.md
+++ b/files/ja/web/http/caching/index.md
@@ -258,7 +258,8 @@ If-None-Match: "33a64df5"
 
 しかし、リクエストされたリソースがこれで異なる `ETag` 値を持つようになったとサーバが判断した場合、サーバは代わりに `200 OK` とリソースの最新バージョンで応答します。
 
-> **メモ:** RFC9110 では、できれば `200` レスポンスに対して `ETag` と `Last-Modified` の両方を送信することを推奨しています。
+> [!NOTE]
+> RFC9110 では、できれば `200` レスポンスに対して `ETag` と `Last-Modified` の両方を送信することを推奨しています。
 > キャッシュの再検証の際に、 `If-Modified-Since` と `If-None-Match` の両方が存在する場合は、 `If-None-Match` を優先します。
 > キャッシュだけを考えているのであれば、 `Last-Modified` は不要だと思うかもしれません。
 > しかし、 `Last-Modified` はキャッシュに有益なだけではなく、コンテンツ管理 (CMS) システムが最終更新時刻を表示したり、クローラーがクロール頻度を調整したり、他にも様々な目的で使用する標準 HTTP ヘッダーです。
diff --git a/files/ja/web/http/client_hints/index.md b/files/ja/web/http/client_hints/index.md
index 11d115db4aaf7d..be8319d374eb3f 100644
--- a/files/ja/web/http/client_hints/index.md
+++ b/files/ja/web/http/client_hints/index.md
@@ -28,7 +28,8 @@ Accept-CH: Width, Downlink, Sec-CH-UA
 
 リクエストされなかった場合、クライアントイベントによって送信される可能性のある、[低エントロピーのクライアントヒントヘッダー](#低エントロピーヒント)も少しあります。
 
-> **メモ:** クライアントヒントは、 HTML で {{HTMLElement("meta")}} 要素に [`http-equiv`](/ja/docs/Web/HTML/Element/meta#attr-http-equiv) 属性を使用して指定することも可能です。
+> [!NOTE]
+> クライアントヒントは、 HTML で {{HTMLElement("meta")}} 要素に [`http-equiv`](/ja/docs/Web/HTML/Element/meta#attr-http-equiv) 属性を使用して指定することも可能です。
 >
 > ```html
 > <meta http-equiv="Accept-CH" content="Width, Downlink, Sec-CH-UA" />
@@ -107,7 +108,8 @@ Sec-CH-Prefers-Reduced-Motion: "reduce"
 
 クライアントヒントは、ウェブページの JavaScript で[ユーザーエージェントクライアントヒント API](/ja/docs/Web/API/User-Agent_Client_Hints_API) によって使用することができます。
 
-> **メモ:** サーバーは現在、 {{HTTPHeader("User-Agent")}} ヘッダーを解釈することによって、同じ情報のほとんどを取得することができます。
+> [!NOTE]
+> サーバーは現在、 {{HTTPHeader("User-Agent")}} ヘッダーを解釈することによって、同じ情報のほとんどを取得することができます。
 > 歴史的な理由から、このヘッダーはほとんど無関係な情報、および特定のユーザーを使用されるかもしれない情報を多く格納しています。
 > UA クライアントヒントは、望ましい情報を取得するための、より効率的でプライバシーを維持した方法を提供します。
 > 最終的にこの古い手法を置き換えることが期待されています。
diff --git a/files/ja/web/http/compression/index.md b/files/ja/web/http/compression/index.md
index b75362d81d71c6..281601e1b726a8 100644
--- a/files/ja/web/http/compression/index.md
+++ b/files/ja/web/http/compression/index.md
@@ -28,7 +28,8 @@ l10n:
 
 非可逆圧縮アルゴリズムは一般的に、可逆圧縮より効率がよくなります。
 
-> **メモ:** 特定の種類のファイルは圧縮が良好に機能しているため、通常は 2 度目の圧縮を行いません。実際のところ、大きなファイルの圧縮によって得られる追加の利益よりもオーバーヘッド (アルゴリズムは一般的に、初期のサイズに追加する辞書が必要です) のコストが上回る場合があります。圧縮済み形式のファイルで、以下の 2 つの技術は使用しないでください。
+> [!NOTE]
+> 特定の種類のファイルは圧縮が良好に機能しているため、通常は 2 度目の圧縮を行いません。実際のところ、大きなファイルの圧縮によって得られる追加の利益よりもオーバーヘッド (アルゴリズムは一般的に、初期のサイズに追加する辞書が必要です) のコストが上回る場合があります。圧縮済み形式のファイルで、以下の 2 つの技術は使用しないでください。
 
 ## エンドツーエンドの圧縮
 
diff --git a/files/ja/web/http/configuring_servers_for_ogg_media/index.md b/files/ja/web/http/configuring_servers_for_ogg_media/index.md
index a2726c6ab7e957..106a59e13c247b 100644
--- a/files/ja/web/http/configuring_servers_for_ogg_media/index.md
+++ b/files/ja/web/http/configuring_servers_for_ogg_media/index.md
@@ -37,7 +37,8 @@ When Gecko seeks through Ogg media to a specified time, it has to seek to the ne
 
 By default, [`ffmpeg2theora`](http://v2v.cc/~j/ffmpeg2theora/) uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well.
 
-> **メモ:** Of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance.
+> [!NOTE]
+> Of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance.
 
 ## preload 属性の使用を検討する
 
@@ -49,7 +50,8 @@ The HTML {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements provide
 
 ### Serve X-Content-Duration headers
 
-> **メモ:** As of [Firefox 41](/ja/Firefox/Releases/41), the `X-Content-Duration` header is no longer supported. See [Firefox バグ 1160695](https://bugzil.la/1160695) for more details.
+> [!NOTE]
+> As of [Firefox 41](/ja/Firefox/Releases/41), the `X-Content-Duration` header is no longer supported. See [Firefox バグ 1160695](https://bugzil.la/1160695) for more details.
 
 The Ogg format doesn't encapsulate the duration of media, so for the progress bar on the video controls to display the duration of the video, Gecko needs to determine the length of the media using other means.
 
@@ -71,7 +73,8 @@ One common way to reduce the load on a web server is to use [gzip or deflate com
 
 Also, Apache servers don't send the Content-Length response header if gzip encoding is used.
 
-> **メモ:** Starting in Gecko 2.0, Gecko will no longer request gzip or deflate compression when downloading media. The above is only relevant for Firefox 3.5/3.6.
+> [!NOTE]
+> Starting in Gecko 2.0, Gecko will no longer request gzip or deflate compression when downloading media. The above is only relevant for Firefox 3.5/3.6.
 
 ### Getting the duration of Ogg media
 
diff --git a/files/ja/web/http/connection_management_in_http_1.x/index.md b/files/ja/web/http/connection_management_in_http_1.x/index.md
index 8f73d407da4560..f65c4ee67d688c 100644
--- a/files/ja/web/http/connection_management_in_http_1.x/index.md
+++ b/files/ja/web/http/connection_management_in_http_1.x/index.md
@@ -15,7 +15,8 @@ HTTP/1.1 で、新たなモデルを 2 種類導入しました。持続的な
 
 ![HTTP/1.x の3つのコネクションモデルにおけるパフォーマンスの比較: 短命なコネクション、持続的なコネクション、 HTTP パイプライン](http1_x_connections.png)
 
-> **メモ:** HTTP/2 では、コネクションの管理モデルをさらに追加しました。
+> [!NOTE]
+> HTTP/2 では、コネクションの管理モデルをさらに追加しました。
 
 特筆すべき重要なポイントとして、 HTTP のコネクション管理は隣接したノードの間のコネクション、すなわち[エンドツーエンド](/ja/docs/Web/HTTP/Headers#e2e)ではなく[ホップバイホップ](/ja/docs/Web/HTTP/Headers#hbh)に適用されることがあります。クライアントと最初のプロキシの間で使用するモデルと、プロキシと宛先サーバー (または任意の中間プロキシ) の間で使用するモデルが異なることもあります。{{HTTPHeader("Connection")}} や {{HTTPHeader("Keep-Alive")}} といったコネクションモデルの定義にかかわる HTTP ヘッダーは、中間のノードが値を変更できる [ホップバイホップ](/ja/docs/Web/HTTP/Headers#hbh) ヘッダーです。
 
@@ -29,7 +30,8 @@ TCP のハンドシェイク自体は時間がかかる処理ですが、 TCP 
 
 このモデルは HTTP/1.0 で使用する既定のモデルです ({{HTTPHeader("Connection")}} ヘッダーが存在しない、あるいはヘッダーの値が `close` である場合)。 HTTP/1.1 では、 {{HTTPHeader("Connection")}} ヘッダーで `close` の値が送信された場合に限り、このモデルを使用します。
 
-> **メモ:** とても古い (持続的なコネクションをサポートしていない) システムを扱う場合を除き、あえてこのモデルを使用する理由はありません。
+> [!NOTE]
+> とても古い (持続的なコネクションをサポートしていない) システムを扱う場合を除き、あえてこのモデルを使用する理由はありません。
 
 ## 持続的なコネクション
 
@@ -45,7 +47,8 @@ HTTP/1.1 では既定で持続的であり、ヘッダーは不要になりま
 
 ## HTTP パイプライン
 
-> **メモ:** HTTP パイプラインは、現代のブラウザーでは既定で有効化されていません。
+> [!NOTE]
+> HTTP パイプラインは、現代のブラウザーでは既定で有効化されていません。
 >
 > - 不具合がある[プロキシ](https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7)がまだ一般的であり、これらは開発者が容易には予見あるいは診断できない、奇妙かつ一定しない挙動の原因になります。
 > - パイプラインの正しい実装は複雑です。転送するリソースのサイズ、効果的な [RTT](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E3%83%88%E3%83%AA%E3%83%83%E3%83%97%E3%82%BF%E3%82%A4%E3%83%A0) および帯域が、パイプラインによる改善に対して直接的な影響力を持ちます。これらがわからなければ、重要なメッセージがそうでないメッセージより遅れる場合があります。重要さの概念は、ページのレイアウト中に高まります!よって、 HTTP パイプラインはほとんどの場合でわずかな改善にしかなりません。
@@ -63,7 +66,8 @@ HTTP/1.1 では既定で持続的であり、ヘッダーは不要になりま
 
 ## ドメインシャーディング
 
-> **メモ:** 特別に必要である場合を除き、この非推奨の技術は使用しないでください。代わりに、 HTTP/2 に切り替えてください。 HTTP/2 では、ドメインシャーディングは有用ではありません。 HTTP/2 のコネクションは、並行した優先度がないリクエストをより上手に扱うことができます。また、ドメインシャーディングはパフォーマンスに悪影響を与えます。ほとんどの HTTP/2 実装では、最終的にドメインシャーディングに戻る [connection coalescing](https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/) と呼ばれる技術を使用しています。
+> [!NOTE]
+> 特別に必要である場合を除き、この非推奨の技術は使用しないでください。代わりに、 HTTP/2 に切り替えてください。 HTTP/2 では、ドメインシャーディングは有用ではありません。 HTTP/2 のコネクションは、並行した優先度がないリクエストをより上手に扱うことができます。また、ドメインシャーディングはパフォーマンスに悪影響を与えます。ほとんどの HTTP/2 実装では、最終的にドメインシャーディングに戻る [connection coalescing](https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/) と呼ばれる技術を使用しています。
 
 HTTP/1.x のコネクションはリクエストが整理されることもなく連続するため、十分な帯域を使用できない状況では最適化できません。その解決策として、ブラウザーはそれぞれのドメインに対して複数のコネクションを開いて、リクエストを並行して送信します。既定では一度に 2 から 3 つのコネクションですが、現在は主に 6 つの並列したコネクションへ増えています。この数をさらに増やそうとすると、サーバー側で [DoS](/ja/docs/Glossary/DOS_attack) 防御が発動する危険性があります。
 
diff --git a/files/ja/web/http/content_negotiation/index.md b/files/ja/web/http/content_negotiation/index.md
index 3ff684c851a176..76bd296a5861b0 100644
--- a/files/ja/web/http/content_negotiation/index.md
+++ b/files/ja/web/http/content_negotiation/index.md
@@ -48,7 +48,8 @@ HTTP/1.1 標準では、サーバー駆動型ネゴシエーションを開始
 
 ### `Accept-CH` ヘッダー {{experimental_inline}}
 
-> **メモ:** これは*クライアントヒント (Client Hints)* と呼ばれる**実験的**な技術の一部であり、現在は Chrome 46 以降が実装しています。 Device-Memory の値は Chrome 61 以降が実装しています。
+> [!NOTE]
+> これは*クライアントヒント (Client Hints)* と呼ばれる**実験的**な技術の一部であり、現在は Chrome 46 以降が実装しています。 Device-Memory の値は Chrome 61 以降が実装しています。
 
 {{HTTPHeader("Accept-CH")}} は実験的なもので、サーバーが適切なリソースを選択するために使用できる設定データを羅列します。有効な値は以下のとおりです。
 
@@ -60,7 +61,8 @@ HTTP/1.1 標準では、サーバー駆動型ネゴシエーションを開始
 
 ### `Accept-CH-Lifetime` ヘッダー
 
-> **メモ:** これは*クライアントヒント (Client Hints)* と呼ばれる**実験的**な技術の一部であり、 Chrome 61 以降でのみ利用できます。
+> [!NOTE]
+> これは*クライアントヒント (Client Hints)* と呼ばれる**実験的**な技術の一部であり、 Chrome 61 以降でのみ利用できます。
 
 {{HTTPHeader("Accept-CH-Lifetime")}} ヘッダーは、 `Accept-CH` ヘッダーの `Device-Memory` 値と共に使用され、端末がメモリーの量をサーバーと共有することを許可すべき時間を示します。値はミリ秒単位で与えられ、使用は任意です。
 
@@ -81,7 +83,8 @@ HTTP メッセージの圧縮はウェブサイトのパフォーマンスを向
 
 ### `User-Agent` ヘッダー
 
-> **メモ:** コンテンツの選択にこのヘッダーを使用することは、正当な使用方法ですが、ユーザーエージェントがどの機能に対応しているかを判断するためにこのヘッダーを頼ることは[悪い習慣であると考えられています](/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent)。
+> [!NOTE]
+> コンテンツの選択にこのヘッダーを使用することは、正当な使用方法ですが、ユーザーエージェントがどの機能に対応しているかを判断するためにこのヘッダーを頼ることは[悪い習慣であると考えられています](/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent)。
 
 {{HTTPHeader("User-Agent")}} ヘッダーは、リクエストを送信するブラウザーを識別します。この文字列には、空白区切りで*製品トークン*や*コメント*のリストが含まれることがあります。
 
diff --git a/files/ja/web/http/cookies/index.md b/files/ja/web/http/cookies/index.md
index 1204a4cf6f813a..384e0a5ef3f7ee 100644
--- a/files/ja/web/http/cookies/index.md
+++ b/files/ja/web/http/cookies/index.md
@@ -20,7 +20,8 @@ Cookie は主に、以下の 3 つの用途で使用されます。
 
 Cookie は、クライアント側の汎用的な記憶領域として使用されたことがあります。これは他にクライアントへデータを保存する手段がなかった頃は合理的でしたが、現在では新しいストレージ API を使用することが推奨されています。 Cookie はすべてのリクエストで送信されるので、（特にモバイルデータ通信で）性能を悪化させる可能性があります。クライアントストレージ向けの新しい API として、[ウェブストレージ API](/ja/docs/Web/API/Web_Storage_API) (`localStorage` および `sessionStorage`) と [IndexedDB](/ja/docs/Web/API/IndexedDB_API) があります。
 
-> **メモ:** 保存された Cookie (およびウェブページが使用できる他のストレージ) を確認するには、開発ツールの[ストレージインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/index.html)を有効化して、ストレージのツリーで Cookie を選択してください。
+> [!NOTE]
+> 保存された Cookie (およびウェブページが使用できる他のストレージ) を確認するには、開発ツールの[ストレージインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/index.html)を有効化して、ストレージのツリーで Cookie を選択してください。
 
 ## Cookie の作成
 
@@ -53,7 +54,8 @@ Host: www.example.org
 Cookie: yummy_cookie=choco; tasty_cookie=strawberry
 ```
 
-> **メモ:** 様々なサーバー側アプリケーションにおける `Set-Cookie` ヘッダーの使い方を紹介します。
+> [!NOTE]
+> 様々なサーバー側アプリケーションにおける `Set-Cookie` ヘッダーの使い方を紹介します。
 >
 > - [PHP](https://www.php.net/manual/ja/function.setcookie.php)
 > - [Node.JS](https://nodejs.org/dist/latest-v14.x/docs/api/http.html#http_response_setheader_name_value)
@@ -156,7 +158,8 @@ Cookie の仕組みの設計では、 Cookie が安全なオリジンに設定
 
 これらの接頭辞が付いていて、制約に適合していない Cookie は、送られてもブラウザーが拒否します。これにより、仮にサブドメインで接頭辞の付いた Cookie を作成した場合、サブドメインに限定されるか、完全に無視されるかします。アプリケーションサーバーは、ユーザーが認証されているか、あるいは CSRF トークンが正しいかどうかを判断するときに、特定の Cookie 名をチェックするだけなので、これはセッションの固定化に対する防御手段として効果的に機能します。
 
-> **メモ:** アプリケーションサーバ上では、ウェブアプリケーションは接頭辞を含む完全な Cookie 名をチェック*しなければなりません*。—ユーザーエージェントは、リクエストの {{HTTPHeader("Cookie")}} ヘッダーを送信する前に Cookie から接頭辞を削除*しません*。
+> [!NOTE]
+> アプリケーションサーバ上では、ウェブアプリケーションは接頭辞を含む完全な Cookie 名をチェック*しなければなりません*。—ユーザーエージェントは、リクエストの {{HTTPHeader("Cookie")}} ヘッダーを送信する前に Cookie から接頭辞を削除*しません*。
 
 Cookie の接頭辞とブラウザー対応の現在の状態については、 [Set-Cookie リファレンス記事の接頭辞の節](/ja/docs/Web/HTTP/Headers/Set-Cookie#クッキーの接頭辞)を参照してください。
 
@@ -177,7 +180,8 @@ JavaScript で生成された Cookie は `HttpOnly` フラグを含むことが
 
 ## セキュリティ
 
-> **メモ:** 情報を Cookie に保存するときは、すべての Cookie の値がエンドユーザーから見え、変更できることを理解しておいてください。アプリケーションによっては、サーバー側で検索される不透明な識別子を使用するか、 JSON ウェブトークンのような代替の認証/機密性メカニズムを調べたほうが良いかもしれません。
+> [!NOTE]
+> 情報を Cookie に保存するときは、すべての Cookie の値がエンドユーザーから見え、変更できることを理解しておいてください。アプリケーションによっては、サーバー側で検索される不透明な識別子を使用するか、 JSON ウェブトークンのような代替の認証/機密性メカニズムを調べたほうが良いかもしれません。
 
 Cookie への攻撃を緩和する方法には次のようなものがあります。
 
diff --git a/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
index ca4fa6a387c39d..c56a0510109fc0 100644
--- a/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
+++ b/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
@@ -21,7 +21,8 @@ Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz'
 
 例えば Apache では、サーバー構成（の中の `<Directory>`, `<Location>`, `<Files>`, `<VirtualHost>` のうち適切な節）に次のような行を追加してください。構成はふつう、 `.conf` ファイルまたは（一般的な名前は `httpd.conf` や `apache.conf`）または `.htaccess` ファイルにあります。
 
-> **警告:** オリジンの一部として HTTPS または HTTP プロトコルを記載する必要があります。
+> [!WARNING]
+> オリジンの一部として HTTPS または HTTP プロトコルを記載する必要があります。
 
 ```
 Header set Access-Control-Allow-Origin 'origin'
diff --git a/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md b/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md
index 740392131f6668..3bef3e482c4646 100644
--- a/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md
+++ b/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md
@@ -29,7 +29,8 @@ Access-Control-Allow-Origin: https://example.com
 Access-Control-Allow-Origin: *
 ```
 
-> **警告:** ワイルドカードを使用して、非公開の API へのアクセスをすべてのサイトに許可することは、悪い考えです。
+> [!WARNING]
+> ワイルドカードを使用して、非公開の API へのアクセスをすべてのサイトに許可することは、悪い考えです。
 
 何らかのサイトが CORS リクエストを `*` ワイルドカードを使用すること*なく* (たとえば資格情報を有効にする場合) 利用できるようにするには、サーバーにリクエストの `Origin` ヘッダーの値を読み取り、その値を `Access-Control-Allow-Origin` に設定することに加えて、一部のヘッダーがオリジンに応じて動的に設定されることを示すために `Vary: Origin` ヘッダーを設定する必要があります。
 
diff --git a/files/ja/web/http/cors/errors/index.md b/files/ja/web/http/cors/errors/index.md
index fffce2108405e3..ec5192d785e13d 100644
--- a/files/ja/web/http/cors/errors/index.md
+++ b/files/ja/web/http/cors/errors/index.md
@@ -28,7 +28,8 @@ reading the remote resource at https://some-url-here. (Reason:
 additional information here).
 ```
 
-> **メモ:** セキュリティ上の理由から、 CORS リクエストで何を失敗したかについては _JavaScript コードからは特定できません_。コードから分かることは、エラーが発生したことだけです。何を失敗したかを特定するための唯一の方法は、詳細をブラウザーのコンソールで見ることです。
+> [!NOTE]
+> セキュリティ上の理由から、 CORS リクエストで何を失敗したかについては _JavaScript コードからは特定できません_。コードから分かることは、エラーが発生したことだけです。何を失敗したかを特定するための唯一の方法は、詳細をブラウザーのコンソールで見ることです。
 
 ## CORS のエラーメッセージ
 
diff --git a/files/ja/web/http/cors/index.md b/files/ja/web/http/cors/index.md
index deb3f8d788ff21..be2aaeca014acc 100644
--- a/files/ja/web/http/cors/index.md
+++ b/files/ja/web/http/cors/index.md
@@ -63,7 +63,8 @@ CORS は様々なエラーで失敗することがありますが、セキュリ
   - {{HTTPHeader("Content-Type")}} （但し、下記の追加の要件に注意してください）
   - {{HTTPHeader("Range")}} （[単純範囲ヘッダー値](https://fetch.spec.whatwg.org/#simple-range-header-value)、例えば `bytes=256-` や `bytes=127-255` の場合）
 
-> **メモ:** Firefox は、まだ `Range` をセーフリストリクエストヘッダーとして実装していません。[バグ 1733981](https://bugzilla.mozilla.org/show_bug.cgi?id=1733981)を参照してください。
+> [!NOTE]
+> Firefox は、まだ `Range` をセーフリストリクエストヘッダーとして実装していません。[バグ 1733981](https://bugzilla.mozilla.org/show_bug.cgi?id=1733981)を参照してください。
 
 - {{HTTPHeader("Content-Type")}} ヘッダーで指定できる{{Glossary("MIME type", "メディア種別")}}に許されるタイプ/サブタイプの組み合わせは、以下のもののみです。
 
@@ -74,7 +75,8 @@ CORS は様々なエラーで失敗することがありますが、セキュリ
 - {{domxref("XMLHttpRequest")}} オブジェクトを使用してリクエストを行う場合は、 {{domxref("XMLHttpRequest.upload")}} プロパティから返されるオブジェクトにイベントリスナーが登録されていないこと。すなわち、 {{domxref("XMLHttpRequest")}} インスタンスを `xhr` とした場合、どのコードも `xhr.upload.addEventListener()` が呼び出してアップロードを監視するためのイベントリスナーを追加していないこと。
 - リクエストに {{domxref("ReadableStream")}} オブジェクトが使用されていないこと。
 
-> **メモ:** WebKit Nightly および Safari Technology Preview は、 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}}、{{HTTPHeader("Content-Language")}} ヘッダーの値に追加の制限を掛けています。これらのヘッダーが「標準外」の値の場合、 WebKit/Safari はそのリクエストが「単純リクエスト」の条件に合うとは判断しません。 WebKit/Safari がこれらのヘッダーのどの値を「標準外」と判断するかについては、以下の WebKit のバグを除いて文書化されていません。
+> [!NOTE]
+> WebKit Nightly および Safari Technology Preview は、 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}}、{{HTTPHeader("Content-Language")}} ヘッダーの値に追加の制限を掛けています。これらのヘッダーが「標準外」の値の場合、 WebKit/Safari はそのリクエストが「単純リクエスト」の条件に合うとは判断しません。 WebKit/Safari がこれらのヘッダーのどの値を「標準外」と判断するかについては、以下の WebKit のバグを除いて文書化されていません。
 >
 > - [Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language](https://bugs.webkit.org/show_bug.cgi?id=165178)
 > - [Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS](https://bugs.webkit.org/show_bug.cgi?id=165566)
@@ -160,7 +162,8 @@ xhr.send("<person><name>Arun</name></person>");
 
 ![プリフライトされたリクエストのイメージ図](preflight_correct.png)
 
-> **メモ:** 後述するように、実際の `POST` リクエストでは `Access-Control-Request-*` ヘッダーを含みません。`OPTIONS` リクエストのみで必要になります。
+> [!NOTE]
+> 後述するように、実際の `POST` リクエストでは `Access-Control-Request-*` ヘッダーを含みません。`OPTIONS` リクエストのみで必要になります。
 
 クライアントとサーバーとの間のやりとりの全容を見てみましょう。最初のやり取りは*プリフライトリクエスト/レスポンス*です。
 
@@ -269,7 +272,8 @@ Content-Type: text/plain
 
 ### 資格情報を含むリクエスト
 
-> **メモ:** 資格情報を含むリクエストを異なるドメインに行う場合、サードパーティクッキーポリシーも適用されます。このポリシーは、この章で説明しているように、サーバーやクライアントでの設定とは無関係に常に実施されます。
+> [!NOTE]
+> 資格情報を含むリクエストを異なるドメインに行う場合、サードパーティクッキーポリシーも適用されます。このポリシーは、この章で説明しているように、サーバーやクライアントでの設定とは無関係に常に実施されます。
 
 {{domxref("XMLHttpRequest")}} や [Fetch](/ja/docs/Web/API/Fetch_API) と CORS の両方によって明らかになる最も興味深い機能は、[HTTP クッキー](/ja/docs/Web/HTTP/Cookies)と HTTP 資格情報によってわかる「資格情報を含む」リクエストを作成することができることです。既定では、オリジン間の `XMLHttpRequest` または [Fetch](/ja/docs/Web/API/Fetch_API) の呼び出しにおいて、ブラウザーは資格情報を送信**しません**。 `XMLHttpRequest` オブジェクトまたは {{domxref("Request")}} のコンストラクターの呼び出し時に、特定のフラグを設定する必要があります。
 
@@ -331,7 +335,8 @@ Content-Type: text/plain
 
 CORS のプリフライトリクエストに資格情報を含めてはいけません。プリフライトリスクエストへの*レスポンス*には `Access-Control-Allow-Credentials: true` を指定して、実際のリクエストを資格情報付きで行うことができることを示す必要があります。
 
-> **メモ:** エンタープライズ認証サービスの中には、 [Fetch](https://fetch.spec.whatwg.org/#cors-protocol-and-credentials) 仕様書に反して、プリフライトリクエストで TLS クライアント証明書を送信することを要求するものがあります。
+> [!NOTE]
+> エンタープライズ認証サービスの中には、 [Fetch](https://fetch.spec.whatwg.org/#cors-protocol-and-credentials) 仕様書に反して、プリフライトリクエストで TLS クライアント証明書を送信することを要求するものがあります。
 >
 > Firefox 87 では、`network.cors_preflight.allow_client_cert` を `true` に設定することで、この準拠していない動作を有効にすることができます。([Firefox バグ 1511151](https://bugzil.la/1511151)). Chromium ベースのブラウザーでは現在、CORS プリフライトリクエストで TLS クライアント証明書を常に送信します ([Chrome bug 775438](https://bugs.chromium.org/p/chromium/issues/detail?id=775438))。
 
diff --git a/files/ja/web/http/cross-origin_resource_policy/index.md b/files/ja/web/http/cross-origin_resource_policy/index.md
index 5eb8a884d2d92d..b74e317ca1f626 100644
--- a/files/ja/web/http/cross-origin_resource_policy/index.md
+++ b/files/ja/web/http/cross-origin_resource_policy/index.md
@@ -9,7 +9,8 @@ slug: Web/HTTP/Cross-Origin_Resource_Policy
 
 CORP は既定で {{Glossary("same-origin policy")}} を超えた保護の追加レイヤーです。クロスオリジンリソースポリシーは、既定でクロスオリジンの読み込みを保護するメカニズムである、 [クロスオリジンリードブロッキング](https://fetch.spec.whatwg.org/#corb) (CORB)を補完します。
 
-> **メモ:** このポリシーは、既定で CORS セーフリストメソッド／ヘッダーに対して発行される、[`no-cors`](https://fetch.spec.whatwg.org/#concept-request-mode) リクエストに対してのみ有効です。
+> [!NOTE]
+> このポリシーは、既定で CORS セーフリストメソッド／ヘッダーに対して発行される、[`no-cors`](https://fetch.spec.whatwg.org/#concept-request-mode) リクエストに対してのみ有効です。
 
 このポリシーは*[レスポンスヘッダー](/ja/docs/Glossary/Response_header)*を介して表現されるため、実際のリクエストは防止されません。むしろ、ブラウザーは応答本文を削除することで*結果*が漏洩するのを防ぎます。
 
@@ -33,7 +34,8 @@ CORP は既定で {{Glossary("same-origin policy")}} を超えた保護の追加
 
   - : 同じ _{{Glossary("Site")}}_ からのリクエストのみリソースを読み込めます。
 
-    > **警告:** これは{{Glossary("origin", "オリジン")}}よりも安全性が低いものです。[2 つのオリジンが同じサイトであるかどうかをチェックするアルゴリズム](https://html.spec.whatwg.org/multipage/origin.html#same-site)は HTML 標準で定義されており、*登録可能なドメイン*をチェックします。
+    > [!WARNING]
+    > これは{{Glossary("origin", "オリジン")}}よりも安全性が低いものです。[2 つのオリジンが同じサイトであるかどうかをチェックするアルゴリズム](https://html.spec.whatwg.org/multipage/origin.html#same-site)は HTML 標準で定義されており、*登録可能なドメイン*をチェックします。
 
 - same-origin
   - : 同じ _{{Glossary("origin")}}_ (すなわち、スキーマ + ホスト + ポート) からのリクエストのみリソースを読み込めます。
diff --git a/files/ja/web/http/headers/accept-ch/index.md b/files/ja/web/http/headers/accept-ch/index.md
index ed91ba8e4386f6..45933cc90787a8 100644
--- a/files/ja/web/http/headers/accept-ch/index.md
+++ b/files/ja/web/http/headers/accept-ch/index.md
@@ -24,7 +24,8 @@ slug: Web/HTTP/Headers/Accept-CH
   </tbody>
 </table>
 
-> **メモ:** クライアントヒントには、安全なオリジン (TLS 経由) でのみアクセスできます。 Accept-CH ヘッダーと Accept-CH-Lifetime ヘッダーは、クライアントヒントが確実に送信されるように、すべての安全なリクエストに対して保持する必要があります。
+> [!NOTE]
+> クライアントヒントには、安全なオリジン (TLS 経由) でのみアクセスできます。 Accept-CH ヘッダーと Accept-CH-Lifetime ヘッダーは、クライアントヒントが確実に送信されるように、すべての安全なリクエストに対して保持する必要があります。
 
 ## 構文
 
@@ -41,7 +42,8 @@ Accept-CH-Lifetime: 86400
 Vary: DPR, Viewport-Width, Width
 ```
 
-> **メモ:** 受け入れられたクライアントのヒントに基づいて、[レスポンスを変更](/ja/docs/Glossary/Client_hints#Varying_Client_Hints)することを忘れないでください。
+> [!NOTE]
+> 受け入れられたクライアントのヒントに基づいて、[レスポンスを変更](/ja/docs/Glossary/Client_hints#Varying_Client_Hints)することを忘れないでください。
 
 ## ブラウザーの互換性
 
diff --git a/files/ja/web/http/headers/accept-charset/index.md b/files/ja/web/http/headers/accept-charset/index.md
index cdeb229bb53a45..9f9d7671483a25 100644
--- a/files/ja/web/http/headers/accept-charset/index.md
+++ b/files/ja/web/http/headers/accept-charset/index.md
@@ -9,7 +9,8 @@ slug: Web/HTTP/Headers/Accept-Charset
 
 サーバーが一致する文字エンコーディングを提供できない場合、理論的には {{HTTPStatus("406", "406 Not Acceptable")}} エラーコードを返すことができます。しかし、より使い勝手をよくするために、これはめったに行われず、 `Accept-Charset` ヘッダーは無視されます。
 
-> **メモ:** HTTP/1.1 の初期のバージョンでは、既定の文字エンコーディングを ISO-8859-1 と定義していました。これはすでに推奨されなくなっており、コンテンツ型ごとに個別に既定値が設定されるようになりました。
+> [!NOTE]
+> HTTP/1.1 の初期のバージョンでは、既定の文字エンコーディングを ISO-8859-1 と定義していました。これはすでに推奨されなくなっており、コンテンツ型ごとに個別に既定値が設定されるようになりました。
 >
 > UTF-8 への対応が進み、圧倒的に推奨される文字エンコーディングになっています。[設定に基づいたエントロピーを減少させることでより良いプライバシーを保証する](https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy)ために、すべてのブラウザーが `Accept-Charset` ヘッダーを省略しています。 Internet Explorer 8 以降、 Safari 5 以降、 Opera 11 以降、 Firefox 10 以降、 Chrome 27 以降は送信しなくなりました。
 
diff --git a/files/ja/web/http/headers/accept-encoding/index.md b/files/ja/web/http/headers/accept-encoding/index.md
index b9416c3ad4086c..34fedf4b62f75d 100644
--- a/files/ja/web/http/headers/accept-encoding/index.md
+++ b/files/ja/web/http/headers/accept-encoding/index.md
@@ -16,7 +16,7 @@ l10n:
 
 `identity` の値、つまりエンコードをしないということは、 `identity;q=0` または `*;q=0` で `identity` とは別な値が明確に設定されていない限り、サーバーは {{HTTPStatus("406")}} `Not Acceptable` エラーを返してはいけません。
 
-> **メモ:**
+> [!NOTE]
 >
 > - IANA レジストリーが[公式なコンテンツエンコーディングの完全なリスト](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)を管理しています。
 > - 他にも `bzip` および `bzip2` の 2 種類のエンコーディングが使用されることがありますが、標準ではありません。これはこれら 2 つの UNIX プログラムで使用されているアルゴリズムを実装しています。なお、前者は特許ライセンスの問題で開発終了しています。
diff --git a/files/ja/web/http/headers/accept-patch/index.md b/files/ja/web/http/headers/accept-patch/index.md
index 28aa5c5e01b31c..260fdc2ee23698 100644
--- a/files/ja/web/http/headers/accept-patch/index.md
+++ b/files/ja/web/http/headers/accept-patch/index.md
@@ -13,7 +13,7 @@ l10n:
 
 サポートされていないメディアタイプの PATCH リクエストを受信したサーバーは、{{HTTPStatus("415")}} `Unsupported Media Type`と、 1 つ以上のサポートされているメディアタイプを参照する Accept-Patch ヘッダーで応答する可能性があります。
 
-> **メモ:**
+> [!NOTE]
 >
 > - IANA レジストリーが[公式なコンテンツエンコーディングの完全なリスト](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)を管理しています。
 > - 他にも `bzip` および `bzip2` の 2 種類のエンコーディングが使用されることがありますが、標準ではありません。これはこれら 2 つの UNIX プログラムで使用されているアルゴリズムを実装しています。なお、前者は特許ライセンスの問題で開発終了しています。
diff --git a/files/ja/web/http/headers/authorization/index.md b/files/ja/web/http/headers/authorization/index.md
index d17b9c5b146152..cb0fb84662e111 100644
--- a/files/ja/web/http/headers/authorization/index.md
+++ b/files/ja/web/http/headers/authorization/index.md
@@ -46,7 +46,8 @@ Authorization: <type> <credentials>
     - コロンで結合したユーザー名とパスワード (`aladdin:opensesame`)。
     - 結果の文字列は [base64](/ja/docs/Glossary/Base64) でエンコードされます (`YWxhZGRpbjpvcGVuc2VzYW1l`)。
 
-    > **メモ:** Base64 エンコードは暗号化でもハッシュでもありません。この方法の安全性はクリアテキストで認証情報を送るのと同等です (Base64 は可逆エンコーディングです)。 Basic 認証は HTTPS との組み合わせで使用することをお勧めします。
+    > [!NOTE]
+    > Base64 エンコードは暗号化でもハッシュでもありません。この方法の安全性はクリアテキストで認証情報を送るのと同等です (Base64 は可逆エンコーディングです)。 Basic 認証は HTTPS との組み合わせで使用することをお勧めします。
 
 ## 例
 
diff --git a/files/ja/web/http/headers/clear-site-data/index.md b/files/ja/web/http/headers/clear-site-data/index.md
index a54412074dc795..431a8d3f37eeab 100644
--- a/files/ja/web/http/headers/clear-site-data/index.md
+++ b/files/ja/web/http/headers/clear-site-data/index.md
@@ -39,7 +39,8 @@ Clear-Site-Data: "*"
 
 ## ディレクティブ
 
-> **メモ:** すべてのディレクティブは[引用符で囲まれた文字列の文法](https://datatracker.ietf.org/doc/html/rfc7230#section-3.2.6)に従わなければなりません。二重引用符を含まないディレクティブは無効です。
+> [!NOTE]
+> すべてのディレクティブは[引用符で囲まれた文字列の文法](https://datatracker.ietf.org/doc/html/rfc7230#section-3.2.6)に従わなければなりません。二重引用符を含まないディレクティブは無効です。
 
 - `"cache"` {{Experimental_Inline}}
   - : サーバーが、レスポンス URL のオリジンに関するローカルにキャッシュされたデータ（つまり、ブラウザーキャッシュ、[HTTP キャッシュ](/ja/docs/Web/HTTP/Caching)を参照）の消去を望んでいることを示します。ブラウザーによっては、予備レンダリングページ、スクリプトキャッシュ、 WebGL シェーダーキャッシュ、アドレスバーのサジェスト等のようなものも消去します。
diff --git a/files/ja/web/http/headers/content-language/index.md b/files/ja/web/http/headers/content-language/index.md
index 9572ff89debced..16d95b1b66fe17 100644
--- a/files/ja/web/http/headers/content-language/index.md
+++ b/files/ja/web/http/headers/content-language/index.md
@@ -56,7 +56,8 @@ Content-Language: de-DE, en-CA
 - `language-tag`
   - : 複数の言語タグはカンマで区切られています。各言語タグはハイフン文字 ("`-`", `%x2D`) で区切られた、大文字小文字を区別しない 1 つ以上のサブタグのシーケンスです。ほとんどの場合、言語タグは関連する言語の広いファミリを識別するプライマリ言語サブタグ (たとえば、"`en`" = 英語) で構成され、オプションとして、その言語の範囲を絞り込むか狭める一連のサブタグ ("`en-CA`" = カナダで伝達される英語の種類) が続きます。
 
-> **メモ:** 言語タグは、使用される[言語コード](https://en.wikipedia.org/wiki/Language_code)の [ISO 639](https://en.wikipedia.org/wiki/ISO_639) 規格 ([ISO 639-1 のコードリスト](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)であることが多い) に依存する、[RFC 5646](https://tools.ietf.org/html/rfc5646) でフォーマットが定義されています。
+> [!NOTE]
+> 言語タグは、使用される[言語コード](https://en.wikipedia.org/wiki/Language_code)の [ISO 639](https://en.wikipedia.org/wiki/ISO_639) 規格 ([ISO 639-1 のコードリスト](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)であることが多い) に依存する、[RFC 5646](https://tools.ietf.org/html/rfc5646) でフォーマットが定義されています。
 
 ## 例
 
diff --git a/files/ja/web/http/headers/content-security-policy/block-all-mixed-content/index.md b/files/ja/web/http/headers/content-security-policy/block-all-mixed-content/index.md
index 47b4b2e307d48f..0f2ae0524aed7d 100644
--- a/files/ja/web/http/headers/content-security-policy/block-all-mixed-content/index.md
+++ b/files/ja/web/http/headers/content-security-policy/block-all-mixed-content/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{HTTPSidebar}}{{deprecated_header}}
 
-> **警告:** このディレクティブは、仕様上、廃止されたものとしてマークされています。すべての混合コンテンツは、自動アップグレードできない場合、ブロックされるようになりました。
+> [!WARNING]
+> このディレクティブは、仕様上、廃止されたものとしてマークされています。すべての混合コンテンツは、自動アップグレードできない場合、ブロックされるようになりました。
 
 HTTP の {{HTTPHeader("Content-Security-Policy")}} (CSP) **`block-all-mixed-content`** ディレクティブは、ページが HTTPS を使用しているときに HTTP で資産を読み込むことを防ぎます。
 
diff --git a/files/ja/web/http/headers/content-security-policy/index.md b/files/ja/web/http/headers/content-security-policy/index.md
index d383a4c6c4971c..47f34b4ec25273 100644
--- a/files/ja/web/http/headers/content-security-policy/index.md
+++ b/files/ja/web/http/headers/content-security-policy/index.md
@@ -42,7 +42,8 @@ Content-Security-Policy: <policy-directive>; <policy-directive>
 
   - : [ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)と、{{HTMLElement("frame")}} や {{HTMLElement("iframe")}} のような要素によって読み込まれる入れ子の閲覧コンテキストのための有効なソースを定義します。
 
-    > **警告:** 複合した閲覧コンテキストやワーカーを制御するには、 **`child-src`** の代わりに、それぞれ {{CSP("frame-src")}} および {{CSP("worker-src")}} を使用してください。
+    > [!WARNING]
+    > 複合した閲覧コンテキストやワーカーを制御するには、 **`child-src`** の代わりに、それぞれ {{CSP("frame-src")}} および {{CSP("worker-src")}} を使用してください。
 
 - {{CSP("connect-src")}}
   - : スクリプトインターフェイスによって読み込まれる URL を制限します。
diff --git a/files/ja/web/http/headers/content-security-policy/script-src/index.md b/files/ja/web/http/headers/content-security-policy/script-src/index.md
index 29301e85328104..9d8b10bd5d6ad1 100644
--- a/files/ja/web/http/headers/content-security-policy/script-src/index.md
+++ b/files/ja/web/http/headers/content-security-policy/script-src/index.md
@@ -76,7 +76,7 @@ document.getElementById("btn").addEventListener("click", doSomething);
 
 ### 安全ではないインラインスクリプト
 
-> **メモ:**
+> [!NOTE]
 > インラインスタイルとインラインスクリプトを禁止することは、CSP が提供するセキュリティ上の最大の利点の一つです。
 > どうしても使用しなければならない場合は、それらを許可する仕組みがいくつかあります。
 > ハッシュはインラインのスクリプトやスタイルに適用されますが、イベントハンドラーには適用されません。
diff --git a/files/ja/web/http/headers/content-security-policy/sources/index.md b/files/ja/web/http/headers/content-security-policy/sources/index.md
index 00a6bbc2e8ca71..5d527827eea8ab 100644
--- a/files/ja/web/http/headers/content-security-policy/sources/index.md
+++ b/files/ja/web/http/headers/content-security-policy/sources/index.md
@@ -39,7 +39,8 @@ HTTP の {{HTTPHeader("Content-Security-Policy")}} (CSP) ヘッダーディレ
     - `blob:` コンテンツのソースとして [`blob:` URI](/ja/docs/Web/API/Blob) が使えるようにします。
     - `filesystem:` コンテンツのソースとして [`filesystem:` URI](/ja/docs/Web/API/FileSystem) が使えるようにします。
 
-    > **メモ:** スキームソースがない場合、文書のオリジンのスキームが使用されます。
+    > [!NOTE]
+    > スキームソースがない場合、文書のオリジンのスキームが使用されます。
     > セキュアアップグレードは許可されているので、`https:` を使用して文書を読み込んだ場合、`example.com` は `https://example.com` に一致しますが、`http://example.com` には一致しません。
     > 詳しい情報は、 [CSP Level 3](https://www.w3.org/TR/CSP3/#match-url-to-source-list) を参照してください。
 
@@ -70,7 +71,8 @@ HTTP の {{HTTPHeader("Content-Security-Policy")}} (CSP) ヘッダーディレ
     例えば[安全でないインラインスクリプト](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script)を参照してください。
     ノンスを指定すると、最近のブラウザーは、ノンスの対応がない古いブラウザーのために設定されている可能性がある `'unsafe-inline'` を無視するようになります。
 
-    > **メモ:** CSP の `nonce` ソースは _ノンス指定可能_ な要素にのみ適用できます（例えば {{HTMLElement("img")}} 要素には `nonce` 属性がないので、この CSP ソースに関連付ける方法はありません）。
+    > [!NOTE]
+    > CSP の `nonce` ソースは _ノンス指定可能_ な要素にのみ適用できます（例えば {{HTMLElement("img")}} 要素には `nonce` 属性がないので、この CSP ソースに関連付ける方法はありません）。
 
 - `'<hash-algorithm>-<base64-value>'`
   - : スクリプトまたはスタイルの sha256, sha384, sha512 の何れかのハッシュです。
diff --git a/files/ja/web/http/headers/content-security-policy/style-src/index.md b/files/ja/web/http/headers/content-security-policy/style-src/index.md
index 499aea0367cdd5..7de3766770608e 100644
--- a/files/ja/web/http/headers/content-security-policy/style-src/index.md
+++ b/files/ja/web/http/headers/content-security-policy/style-src/index.md
@@ -98,7 +98,8 @@ document.querySelector("div").style.display = "none";
 
 ### 安全ではないインラインスタイル
 
-> **メモ:** インラインスタイルとインラインスクリプトを禁止することは、 CSP が提供する最大のセキュリティ上の利点の一つです。しかし、どうしても使用しなければならない場合は、それらを許可する仕組みがいくつかあります。
+> [!NOTE]
+> インラインスタイルとインラインスクリプトを禁止することは、 CSP が提供する最大のセキュリティ上の利点の一つです。しかし、どうしても使用しなければならない場合は、それらを許可する仕組みがいくつかあります。
 
 インラインスタイルを許可するために、 `'unsafe-inline'` を指定するか、インラインブロックに一致するノンスソースまたはハッシュソースを指定することができます。
 
diff --git a/files/ja/web/http/headers/device-memory/index.md b/files/ja/web/http/headers/device-memory/index.md
index 10de269b2e4624..3ad002d59f72ac 100644
--- a/files/ja/web/http/headers/device-memory/index.md
+++ b/files/ja/web/http/headers/device-memory/index.md
@@ -24,7 +24,8 @@ slug: Web/HTTP/Headers/Device-Memory
   </tbody>
 </table>
 
-> **メモ:** クライアントヒントには、安全なオリジン（TLS 経由）でのみアクセスできます。 サーバーは、{{HTTPHeader("Accept-CH")}} および {{HTTPHeader("Accept-CH-Lifetime")}} のレスポンスヘッダーを送信することによって、クライアントから `Device-Memory` ヘッダーを受信することを選択する必要があります。
+> [!NOTE]
+> クライアントヒントには、安全なオリジン（TLS 経由）でのみアクセスできます。 サーバーは、{{HTTPHeader("Accept-CH")}} および {{HTTPHeader("Accept-CH-Lifetime")}} のレスポンスヘッダーを送信することによって、クライアントから `Device-Memory` ヘッダーを受信することを選択する必要があります。
 
 ## 構文
 
diff --git a/files/ja/web/http/headers/dpr/index.md b/files/ja/web/http/headers/dpr/index.md
index ab8856fdd1b54c..f2cee82fe92309 100644
--- a/files/ja/web/http/headers/dpr/index.md
+++ b/files/ja/web/http/headers/dpr/index.md
@@ -24,7 +24,8 @@ slug: Web/HTTP/Headers/DPR
   </tbody>
 </table>
 
-> **メモ:** クライアントヒントには、安全なオリジン（TLS 経由）でのみアクセスできます。 サーバーは、{{HTTPHeader("Accept-CH")}} および {{HTTPHeader("Accept-CH-Lifetime")}} のレスポンスヘッダーを送信することによって、クライアントから `DPR` ヘッダーを受信することを選択する必要があります。
+> [!NOTE]
+> クライアントヒントには、安全なオリジン（TLS 経由）でのみアクセスできます。 サーバーは、{{HTTPHeader("Accept-CH")}} および {{HTTPHeader("Accept-CH-Lifetime")}} のレスポンスヘッダーを送信することによって、クライアントから `DPR` ヘッダーを受信することを選択する必要があります。
 
 ## 構文
 
diff --git a/files/ja/web/http/headers/expect-ct/index.md b/files/ja/web/http/headers/expect-ct/index.md
index 688227f2c767af..8eac7e8a9449b9 100644
--- a/files/ja/web/http/headers/expect-ct/index.md
+++ b/files/ja/web/http/headers/expect-ct/index.md
@@ -13,9 +13,11 @@ CT の要件は、以下のいずれかの仕組みで満たすことができ
 - ハンドシェイク中に送信される `signed_certificate_timestamp` 型の TLS 拡張
 - OCSP ステープリング (つまり、 `status_request` TLS 拡張) に対応し、 `SignedCertificateTimestampList` を提供すること
 
-> **メモ:** サイトが `Expect-CT` ヘッダーを有効にすると、ブラウザーが**[公開 CT ログ](https://www.certificate-transparency.org/known-logs)**に現れるサイトのすべての認証情報をチェックするよう要求します。
+> [!NOTE]
+> サイトが `Expect-CT` ヘッダーを有効にすると、ブラウザーが**[公開 CT ログ](https://www.certificate-transparency.org/known-logs)**に現れるサイトのすべての認証情報をチェックするよう要求します。
 
-> **メモ:** ブラウザーは、 HTTP では `Expect-CT` ヘッダーを**無視**し、 HTTPS 接続でのみ効果を発揮します。
+> [!NOTE]
+> ブラウザーは、 HTTP では `Expect-CT` ヘッダーを**無視**し、 HTTPS 接続でのみ効果を発揮します。
 
 > **メモ:** `Expect-CT` は 2021 年 6 月に廃止される可能性が高いです。 2018 年 5 月以降、新しい証明書は既定で SCT に対応することが期待されています。 2018 年 3 月以前の証明書は 39 ヶ月の有効期限が認められていましたが、それらが 2021 年 6 月にすべて失効します。
 
diff --git a/files/ja/web/http/headers/expires/index.md b/files/ja/web/http/headers/expires/index.md
index 5896a7146da964..f333f9b3e6c22a 100644
--- a/files/ja/web/http/headers/expires/index.md
+++ b/files/ja/web/http/headers/expires/index.md
@@ -9,7 +9,8 @@ slug: Web/HTTP/Headers/Expires
 
 値 0 のような無効な日付は過去の日付を表し、リソースがすでに有効期限切れであることを意味します。
 
-> **メモ:** レスポンスに `max-age` または `s-maxage` ディレクティブを持つ {{HTTPHeader("Cache-Control")}} ヘッダーがある場合、`Expires` ヘッダーは無視されます。
+> [!NOTE]
+> レスポンスに `max-age` または `s-maxage` ディレクティブを持つ {{HTTPHeader("Cache-Control")}} ヘッダーがある場合、`Expires` ヘッダーは無視されます。
 
 <table class="properties">
   <tbody>
diff --git a/files/ja/web/http/headers/from/index.md b/files/ja/web/http/headers/from/index.md
index 50248f453b7dd1..74864b31d607c3 100644
--- a/files/ja/web/http/headers/from/index.md
+++ b/files/ja/web/http/headers/from/index.md
@@ -9,7 +9,8 @@ slug: Web/HTTP/Headers/From
 
 ロボティックユーザーエージェント (クローラなど) を使用している場合は、`From` ヘッダーを送信する必要があります。ロボットが過度の不要なリクエストや無効なリクエストを送信しているなど、サーバーに問題が発生した場合は連絡できます。
 
-> **警告:** アクセス制御または認証には `From` ヘッダーを使用しないでください。
+> [!WARNING]
+> アクセス制御または認証には `From` ヘッダーを使用しないでください。
 
 <table class="properties">
   <tbody>
diff --git a/files/ja/web/http/headers/index.md b/files/ja/web/http/headers/index.md
index fedcf443f4f437..196575602ac0f7 100644
--- a/files/ja/web/http/headers/index.md
+++ b/files/ja/web/http/headers/index.md
@@ -326,7 +326,8 @@ HTTP [クライアントヒント](/ja/docs/Web/HTTP/Client_hints)は一連の
 - {{HTTPHeader("Sec-CH-UA-Prefers-Reduced-Motion")}} {{experimental_inline}}
   - : ユーザーの環境設定として、アニメーションやコンテンツレイアウトの変化が少ないことが推奨されていること。
 
-> **メモ:** ユーザーエージェントクライアントヒントは、データの漏洩に使用することができる[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)の委譲が必要であるため、[フェンスフレーム](/ja/docs/Web/API/Fenced_frame_API)内では利用できません。
+> [!NOTE]
+> ユーザーエージェントクライアントヒントは、データの漏洩に使用することができる[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)の委譲が必要であるため、[フェンスフレーム](/ja/docs/Web/API/Fenced_frame_API)内では利用できません。
 
 #### 端末クライアントヒント
 
diff --git a/files/ja/web/http/headers/keep-alive/index.md b/files/ja/web/http/headers/keep-alive/index.md
index a2b8a1809a6592..39c11da374da79 100644
--- a/files/ja/web/http/headers/keep-alive/index.md
+++ b/files/ja/web/http/headers/keep-alive/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Keep-Alive
 
 **`Keep-Alive`** 一般ヘッダーは、送信者が接続の仕組みや、タイムアウト値と最大リクエスト数の設定に使用される可能性があることをヒントとすることができます。
 
-> **メモ:** このヘッダーが意味を持つためには、 {{HTTPHeader("Connection")}} ヘッダーを "keep-alive" に設定する必要があります。
+> [!NOTE]
+> このヘッダーが意味を持つためには、 {{HTTPHeader("Connection")}} ヘッダーを "keep-alive" に設定する必要があります。
 
 > **警告:** {{HTTPHeader("Connection")}} や {{HTTPHeader("Keep-Alive")}} などの接続固有のヘッダーフィールドは [HTTP/2 では禁止されています](https://tools.ietf.org/html/rfc7540#section-8.1.2.2)。 Chrome と Firefox は HTTP/2 レスポンスでこれらを無視しますが、 Safari は HTTP/2 仕様の要件に準拠しており、これらを含むレスポンスは読み込まれません。
 
diff --git a/files/ja/web/http/headers/permissions-policy/battery/index.md b/files/ja/web/http/headers/permissions-policy/battery/index.md
deleted file mode 100644
index 678001b99f1fd7..00000000000000
--- a/files/ja/web/http/headers/permissions-policy/battery/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Feature-Policy: battery"
-slug: Web/HTTP/Headers/Permissions-Policy/battery
----
-
-{{HTTPSidebar}}{{SeeCompatTable}}
-
-HTTP の {{HTTPHeader("Feature-Policy")}} ヘッダーにおける `battery` ディレクティブは、現在の文書で {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} で得られる {{DOMxRef("BatteryManager")}} インターフェイスを通じて、端末のバッテリーに関する情報の収集を許可するかどうかを制御します。
-
-## 構文
-
-```
-Feature-Policy: battery <allowlist>;
-```
-
-- \<allowlist>
-  - : この機能を許可するオリジンのリストです。 [`Feature-Policy`](/ja/docs/Web/HTTP/Headers/Feature-Policy#%E6%A7%8B%E6%96%87) を参照してください。
-
-## 既定のポリシー
-
-`battery` の許可リストの既定値は `'self'` です。
-
-## 仕様書
-
-{{Specifications}}
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- {{HTTPHeader("Feature-Policy")}} ヘッダー
-- [機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)
-- [機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)
-- [Battery Status API](/ja/docs/Web/API/Battery_Status_API)
-- {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}}
-- {{DOMxRef("BatteryManager")}}
diff --git a/files/ja/web/http/headers/permissions-policy/fullscreen/index.md b/files/ja/web/http/headers/permissions-policy/fullscreen/index.md
index 009fff1db66d90..e4f8173f9f30e1 100644
--- a/files/ja/web/http/headers/permissions-policy/fullscreen/index.md
+++ b/files/ja/web/http/headers/permissions-policy/fullscreen/index.md
@@ -9,7 +9,8 @@ HTTP の {{HTTPHeader("Feature-Policy")}} ヘッダーにおける `fullscreen`
 
 既定では、最上位の文書およびその同じオリジンの子フレームが全画面モードを要求し、入ることができます。このディレクティブは別オリジンのフレームが全画面モードを使用することを許可したり拒否したりします。同じオリジンのフレームも含みます。
 
-> **メモ:** このディレクティブ (つまり `allow` 属性で設定したもの) と `allowfullscreen` 属性の両方が `<iframe>` 要素に存在する場合、このディレクティブが優先されます。以前は `fullscreen` ディレクティブが `allowfullscreen` 属性と同時に存在しないと動作しないバグがありましたが、Firefox 80 では修正されています ([Firefox バグ 1608358](https://bugzil.la/1608358))。
+> [!NOTE]
+> このディレクティブ (つまり `allow` 属性で設定したもの) と `allowfullscreen` 属性の両方が `<iframe>` 要素に存在する場合、このディレクティブが優先されます。以前は `fullscreen` ディレクティブが `allowfullscreen` 属性と同時に存在しないと動作しないバグがありましたが、Firefox 80 では修正されています ([Firefox バグ 1608358](https://bugzil.la/1608358))。
 
 ## 構文
 
diff --git a/files/ja/web/http/headers/permissions-policy/index.md b/files/ja/web/http/headers/permissions-policy/index.md
index fe8d279c3083d8..b07c63085f3a06 100644
--- a/files/ja/web/http/headers/permissions-policy/index.md
+++ b/files/ja/web/http/headers/permissions-policy/index.md
@@ -47,7 +47,8 @@ Permissions-Policy: <directive> <allowlist>
 
     機能はそれぞれ、既定の許可リストを持つよう定義されています。
 
-    > **メモ:** ディレクティブにはデフォルトの allowlist があり、 `Permissions-Policy` HTTP ヘッダーでは常に `*`, `self` または `none` になります。これらは個々の[ディレクティブのリファレンスページ](#ディレクティブ)で指定されています。 `<iframe>` の `allow` 属性では、デフォルトの動作は常に `src` です。
+    > [!NOTE]
+    > ディレクティブにはデフォルトの allowlist があり、 `Permissions-Policy` HTTP ヘッダーでは常に `*`, `self` または `none` になります。これらは個々の[ディレクティブのリファレンスページ](#ディレクティブ)で指定されています。 `<iframe>` の `allow` 属性では、デフォルトの動作は常に `src` です。
 
 ブラウザーがサポートしている場合、許可リストで複数の異なるサブドメインを明示的に指定する代わりに許可ポリシーのオリジンにワイルドカードを含めることができます。
 
diff --git a/files/ja/web/http/headers/permissions-policy/screen-wake-lock/index.md b/files/ja/web/http/headers/permissions-policy/screen-wake-lock/index.md
index 4ec4c402ee3a4d..68f37f8482d91f 100644
--- a/files/ja/web/http/headers/permissions-policy/screen-wake-lock/index.md
+++ b/files/ja/web/http/headers/permissions-policy/screen-wake-lock/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Permissions-Policy/screen-wake-lock
 
 HTTP の {{HTTPHeader("Feature-Policy")}} ヘッダーにおける **`screen-wake-lock`** ディレクティブは、現在の文書が [Screen Wake Lock API](/ja/docs/Web/API/Screen_Wake_Lock_API) を使用して、端末が画面を暗くしたりオフにしたりしないよう指示することを許可するかどうか制御します。
 
-> **メモ:** 早期の仕様書の草稿では、このディレクティブは `wake-lock` と呼ばれていました。
+> [!NOTE]
+> 早期の仕様書の草稿では、このディレクティブは `wake-lock` と呼ばれていました。
 
 ## 構文
 
diff --git a/files/ja/web/http/headers/proxy-authorization/index.md b/files/ja/web/http/headers/proxy-authorization/index.md
index a85ec2db4121e1..22909c41633ad0 100644
--- a/files/ja/web/http/headers/proxy-authorization/index.md
+++ b/files/ja/web/http/headers/proxy-authorization/index.md
@@ -41,7 +41,8 @@ Proxy-Authorization: <type> <credentials>
     - コロンで結合したユーザー名とパスワード (`aladdin:opensesame`)。
     - 結果の文字列は [Base64](/ja/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) でエンコードされます (`YWxhZGRpbjpvcGVuc2VzYW1l`)。
 
-    > **メモ:** Base64 エンコードは暗号化でもハッシュでもありません。この方法の安全性はクリアテキストで認証情報を送るのと同等です (Base64 は可逆エンコーディングです)。 Basic 認証は HTTPS との組み合わせで使用することをお勧めします。
+    > [!NOTE]
+    > Base64 エンコードは暗号化でもハッシュでもありません。この方法の安全性はクリアテキストで認証情報を送るのと同等です (Base64 は可逆エンコーディングです)。 Basic 認証は HTTPS との組み合わせで使用することをお勧めします。
 
 ## 例
 
diff --git a/files/ja/web/http/headers/referer/index.md b/files/ja/web/http/headers/referer/index.md
index f784f061b02ea4..b6b1e800634a31 100644
--- a/files/ja/web/http/headers/referer/index.md
+++ b/files/ja/web/http/headers/referer/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Referer
 
 **`Referer`** リクエストヘッダーには、現在リクエストされているページへのリンク先を持った直前のウェブページのアドレスが含まれています。 `Referer` ヘッダーにより、サーバーは人々がどこから訪問しに来たかを識別し、分析、ログ、キャッシュの最適化などに利用することができます。
 
-> **警告:** このヘッダーには無害な用途が多数ありますが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。 詳細情報と緩和策については [Referer header: privacy and security concerns](/ja/docs/Web/Security/Referer_header:_privacy_and_security_concerns) を参照してください。
+> [!WARNING]
+> このヘッダーには無害な用途が多数ありますが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。 詳細情報と緩和策については [Referer header: privacy and security concerns](/ja/docs/Web/Security/Referer_header:_privacy_and_security_concerns) を参照してください。
 
 なお、 referer は実際には "referrer" という単語のスペルミスです。詳しくは [Wikipedia の HTTP リファラ](https://ja.wikipedia.org/wiki/HTTPリファラ)を参照してください。
 
diff --git a/files/ja/web/http/headers/referrer-policy/index.md b/files/ja/web/http/headers/referrer-policy/index.md
index fc634553d38ada..71844869b33567 100644
--- a/files/ja/web/http/headers/referrer-policy/index.md
+++ b/files/ja/web/http/headers/referrer-policy/index.md
@@ -33,7 +33,8 @@ Referrer-Policy: strict-origin-when-cross-origin
 Referrer-Policy: unsafe-url
 ```
 
-> **メモ:** 元のヘッダー名である {{HTTPHeader("Referer")}} は "referrer" という語のスペルミスです。 `Referrer-Policy` ヘッダーはこのスペルミスをしていません。
+> [!NOTE]
+> 元のヘッダー名である {{HTTPHeader("Referer")}} は "referrer" という語のスペルミスです。 `Referrer-Policy` ヘッダーはこのスペルミスをしていません。
 
 ## ディレクティブ
 
@@ -54,13 +55,15 @@ Referrer-Policy: unsafe-url
 
   - : 同一オリジンのリクエストを行う際はオリジン、パス、クエリー文字列を送信します。オリジン間リクエストでは、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) にのみオリジンを送信します。安全性の低下する移動先 (HTTPS→HTTP) には {{HTTPHeader("Referer")}} ヘッダーを送信しません。
 
-    > **メモ:** これはポリシーが指定されていない場合や、与えられた値が無効であった場合の既定のポリシーです (仕様書改訂 [November 2020](https://github.com/whatwg/fetch/pull/1066) を参照) 。以前の既定値は `no-referrer-when-downgrade` でした。
+    > [!NOTE]
+    > これはポリシーが指定されていない場合や、与えられた値が無効であった場合の既定のポリシーです (仕様書改訂 [November 2020](https://github.com/whatwg/fetch/pull/1066) を参照) 。以前の既定値は `no-referrer-when-downgrade` でした。
 
 - `unsafe-url`
 
   - : セキュリティに関係なく、どのリクエストを行った場合でも、オリジン、パス、クエリー文字列を送信します。
 
-    > **警告:** このポリシーは、 HTTPS リソースの URL から安全ではないオリジンへプライベートである可能性がある情報を漏洩します。設定する場合は影響をよく検討してください。
+    > [!WARNING]
+    > このポリシーは、 HTTPS リソースの URL から安全ではないオリジンへプライベートである可能性がある情報を漏洩します。設定する場合は影響をよく検討してください。
 
 ## HTML との統合
 
@@ -82,7 +85,8 @@ HTML 内でリファラーポリシーを設定することもできます。例
 <a href="http://example.com" rel="noreferrer"></a>
 ```
 
-> **警告:** 上記のように、 `noreferrer` link 関係はダッシュ記号を用いずに記述されます。 {{HTMLElement("meta")}} 要素で文書全体のリファラーポリシーを指定するときはダッシュを<em>つけて</em> `<meta name="referrer" content="no-referrer">` のように記述します。
+> [!WARNING]
+> 上記のように、 `noreferrer` link 関係はダッシュ記号を用いずに記述されます。 {{HTMLElement("meta")}} 要素で文書全体のリファラーポリシーを指定するときはダッシュを<em>つけて</em> `<meta name="referrer" content="no-referrer">` のように記述します。
 
 ## CSS との統合
 
@@ -160,7 +164,8 @@ Referrer-Policy: no-referrer, strict-origin-when-cross-origin
 
 上記のシナリオでは、 `no-referrer` はブラウザーが `strict-origin-when-cross-origin` に対応していない場合のみ使用されます。
 
-> **メモ:** 複数の値を設定する方法は、 HTTP の `Referrer-Policy` ヘッダーのみが対応しており、 `referrerpolicy` 属性では対応していません。
+> [!NOTE]
+> 複数の値を設定する方法は、 HTTP の `Referrer-Policy` ヘッダーのみが対応しており、 `referrerpolicy` 属性では対応していません。
 
 ## ブラウザー固有の設定
 
diff --git a/files/ja/web/http/headers/set-cookie/index.md b/files/ja/web/http/headers/set-cookie/index.md
index 575e3b0ec20d29..45e4ac2ab959ce 100644
--- a/files/ja/web/http/headers/set-cookie/index.md
+++ b/files/ja/web/http/headers/set-cookie/index.md
@@ -8,7 +8,8 @@ slug: Web/HTTP/Headers/Set-Cookie
 **`Set-Cookie`** は HTTP のレスポンスヘッダーで、サーバーからユーザーエージェントへクッキーを送信するために使用され、ユーザーエージェントはそれを後でサーバーに送り返すことができます。
 複数のクッキーを送信するには、複数の **`Set-Cookie`** ヘッダーを同じレスポンスで送信してください。
 
-> **警告:** ブラウザーは、フロントエンドの JavaScript コードが `Set-Cookie` ヘッダーにアクセスするのをブロックします。これは、 Fetch 仕様が `Set-Cookie` を[禁止レスポンスヘッダー名](https://fetch.spec.whatwg.org/#forbidden-response-header-name)として定義しているためで、フロントエンドコードに公開されるすべてのレスポンスから[フィルタリング](https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0)しなければなりません。
+> [!WARNING]
+> ブラウザーは、フロントエンドの JavaScript コードが `Set-Cookie` ヘッダーにアクセスするのをブロックします。これは、 Fetch 仕様が `Set-Cookie` を[禁止レスポンスヘッダー名](https://fetch.spec.whatwg.org/#forbidden-response-header-name)として定義しているためで、フロントエンドコードに公開されるすべてのレスポンスから[フィルタリング](https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0)しなければなりません。
 
 詳細については、<a href="/ja/docs/Web/HTTP/Cookies">HTTP クッキーのガイド</a>を参照してください。
 
@@ -64,7 +65,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
     しかし、 RFC の仕様書で要求されているわけではありません。
     URL エンコーディングを使用すると、 `<cookie-value>` に許可される文字の要件を満たすのに役立ちます。
 
-    > **メモ:** 一部の `<cookie-name>` は特殊な意味を持ちます。
+    > [!NOTE]
+    > 一部の `<cookie-name>` は特殊な意味を持ちます。
     >
     > **`__Secure-` の接頭辞**: `__Secure-` (接頭辞にダッシュを含む) で始まるクッキー名は、 `secure` フラグを設定することが必要で、安全なページ (HTTPS) でなければなりません。
     >
@@ -78,7 +80,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
     指定されなかった場合は、クッキーは**セッションクッキー**の寿命になります。
     セッションはクライアントが終了したときに終了するので、セッションクッキーはその時点で削除されます。
 
-    > **警告:** 多くのウェブブラウザーはセッション復元と呼ばれる機能を持っており、これによってすべてのタブを保存し、次回ブラウザーを起動したときに復元することができます。ブラウザーを実際には閉じていないかのように、セッションクッキーも復元されます。
+    > [!WARNING]
+    > 多くのウェブブラウザーはセッション復元と呼ばれる機能を持っており、これによってすべてのタブを保存し、次回ブラウザーを起動したときに復元することができます。ブラウザーを実際には閉じていないかのように、セッションクッキーも復元されます。
 
     有効期限が設定されていた場合、期限はサーバーではなく、クッキーが設定されているクライアントからの相対時刻で設定されます。
 
@@ -107,7 +110,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
 
   - : クッキーが、リクエストが SSL と HTTPS プロトコルを使用して行われた場合にのみサーバーに送信されることを示します。ただし HTTP クッキーは、例えば情報が暗号化されないなど、安全ではない仕組みを継承しているので、機密な情報や敏感な情報を転送したり格納したりしないようにしてください。
 
-    > **メモ:** Secure を設定すると、Cookie 内の機密情報 (セッションキー、ログイン情報など) へのアクセスがすべて防げると思わないでください。この属性を持つクッキーは、クライアントのハードディスクにアクセスしたり、 `HttpOnly` クッキー属性が設定されていない場合に JavaScript からアクセスしたりすることで、依然として読み取り/変更が可能です。
+    > [!NOTE]
+    > Secure を設定すると、Cookie 内の機密情報 (セッションキー、ログイン情報など) へのアクセスがすべて防げると思わないでください。この属性を持つクッキーは、クライアントのハードディスクにアクセスしたり、 `HttpOnly` クッキー属性が設定されていない場合に JavaScript からアクセスしたりすることで、依然として読み取り/変更が可能です。
     >
     > 安全でないサイト (`http:`) では、 `Secure` 属性のクッキーを設定できません (Chrome 52、Firefox 52 以降)。Firefox では、`Secure` 属性が localhost で設定されている場合、https: の要件は無視されます (Firefox 75以降)。
 
@@ -189,7 +193,8 @@ Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com
 
 加えて、 `__Host-` の接頭辞が付いたクッキーは、 `/` (ホストの任意のパスという意味) を持つ必要があり、 `Domain` ディレクティブを持つことができません。
 
-> **警告:** クッキーの接頭辞を実装していないクライアントでは、これらの保証を受けることができず、クッキーは常に受け入れられます。
+> [!WARNING]
+> クッキーの接頭辞を実装していないクライアントでは、これらの保証を受けることができず、クッキーは常に受け入れられます。
 
 ```
 // どちらも安全な (HTTPS の) オリジンから受け入れられます
diff --git a/files/ja/web/http/headers/strict-transport-security/index.md b/files/ja/web/http/headers/strict-transport-security/index.md
index c8a2096e2b55aa..c4dd964251529c 100644
--- a/files/ja/web/http/headers/strict-transport-security/index.md
+++ b/files/ja/web/http/headers/strict-transport-security/index.md
@@ -47,7 +47,8 @@ Strict-Transport-Security: max-age=<expire-time>; preload
 
 HTTP の Strict Transport Security ヘッダーは、ブラウザーに対してサイトを HTTP を使用して読み込まず、サイトへのすべてのアクセスを、自動的に HTTP から HTTPS リクエストに変換するよう指示することができます。
 
-> **メモ:** サイトに HTTP を使用してアクセスしたとき、ブラウザーは `Strict-Transport-Security` ヘッダーを無視します。これは攻撃者が HTTP 接続に介入して、ヘッダーを挿入したり削除したりするかもしれないからです。ウェブサイトに HTTPS でアクセスして、証明書のエラーがない場合、ブラウザーはサイトが HTTPS でアクセスできることを知り、 `Strict-Transport-Security` ヘッダーを信用します。
+> [!NOTE]
+> サイトに HTTP を使用してアクセスしたとき、ブラウザーは `Strict-Transport-Security` ヘッダーを無視します。これは攻撃者が HTTP 接続に介入して、ヘッダーを挿入したり削除したりするかもしれないからです。ウェブサイトに HTTPS でアクセスして、証明書のエラーがない場合、ブラウザーはサイトが HTTPS でアクセスできることを知り、 `Strict-Transport-Security` ヘッダーを信用します。
 
 ### 事例
 
diff --git a/files/ja/web/http/headers/trailer/index.md b/files/ja/web/http/headers/trailer/index.md
index 9e1b8e65d0c5dc..577719d7ee7d69 100644
--- a/files/ja/web/http/headers/trailer/index.md
+++ b/files/ja/web/http/headers/trailer/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **Trailer** レスポンスヘッダーにより、メッセージ本体の送信中に動的に生成される可能性のあるメタデータ（メッセージの完全性チェック、デジタル署名、後処理のステータスなど）を提供するために、送信者がチャンクされたメッセージの終わりに追加のフィールドを含めることが可能になります。
 
-> **メモ:** トレーラーフィールドを許可するには、{{HTTPHeader("TE")}} リクエストヘッダーを "trailer" に設定する必要があります。
+> [!NOTE]
+> トレーラーフィールドを許可するには、{{HTTPHeader("TE")}} リクエストヘッダーを "trailer" に設定する必要があります。
 
 <table class="properties">
   <tbody>
diff --git a/files/ja/web/http/headers/upgrade/index.md b/files/ja/web/http/headers/upgrade/index.md
index 7a1d9fb32b430a..5b9c35773d4210 100644
--- a/files/ja/web/http/headers/upgrade/index.md
+++ b/files/ja/web/http/headers/upgrade/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Upgrade
 
 HTTP 1.1 (専用) の `Upgrade` ヘッダーは、すでに確立されたクライアントとサーバー間のプロトコルを、異なるプロトコルに（同じ転送プロトコルを通じて）アップグレードするために使用することができます。例えば、クライアントが HTTP 1.1 から HTTP 2.0 へ、または HTTP や HTTPS のコネクションを WebSocket へアップグレードすることができます。
 
-> **警告:** HTTP/2 は明確にこの仕組み／ヘッダーを使用することを禁止しています。これは HTTP/1.1 専用です。
+> [!WARNING]
+> HTTP/2 は明確にこの仕組み／ヘッダーを使用することを禁止しています。これは HTTP/1.1 専用です。
 
 <table class="properties">
   <tbody>
diff --git a/files/ja/web/http/headers/user-agent/firefox/index.md b/files/ja/web/http/headers/user-agent/firefox/index.md
index 34beb816fd4aca..8260d97f3b1eb2 100644
--- a/files/ja/web/http/headers/user-agent/firefox/index.md
+++ b/files/ja/web/http/headers/user-agent/firefox/index.md
@@ -24,7 +24,8 @@ Firefox 自身のユーザーエージェント文字列は、 4 つの部分に
 - `Firefox/firefoxversion` はブラウザーが Firefox であることを示すとともに、バージョン番号を提供します (例: "`17.0`")。
 - モバイル版は Firefox 10 より、 `geckotrail` と `firefoxversion` が同じです。
 
-> **メモ:** Gecko ベースのブラウザー向けに推奨する推定法（機能の検出を行う代わりにブラウザーエンジンの推定を行わ**なければならない**場合）は、 "`Gecko`" および "`rv:`" の文字列が存在するかの検出です。これは、他ブラウザーの一部に "`like Gecko`" というトークンが含まれるためです。
+> [!NOTE]
+> Gecko ベースのブラウザー向けに推奨する推定法（機能の検出を行う代わりにブラウザーエンジンの推定を行わ**なければならない**場合）は、 "`Gecko`" および "`rv:`" の文字列が存在するかの検出です。これは、他ブラウザーの一部に "`like Gecko`" というトークンが含まれるためです。
 
 Gecko ベースの他製品では下記 2 つの形式のいずれかであり、各トークンの意味は以下に記載した内容を除いて同じです。
 
@@ -45,11 +46,13 @@ Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0
 Mozilla/5.0 (Android 4.4; Tablet; rv:41.0) Gecko/41.0 Firefox/41.0
 ```
 
-> **メモ:** のバージョン番号は重要ではありません。バージョン番号を基に判断しないでください。
+> [!NOTE]
+> のバージョン番号は重要ではありません。バージョン番号を基に判断しないでください。
 
 ある機器のフォームファクター向けのコンテンツを決めるために好ましい方法は、CSS メディアクエリーの使用です。しかし機器のフォームファクターの対象コンテンツを決めるために UA 推定を用いている場合は、携帯電話フォームファクターでは **Mobi** (Opera Mobile が "Mobile" ではなく "Mobi" と表記するため) を検索するようにして、"Android" と機器のフォームファクターに対応関連があるとは**考えない**ようにしてください。そうすることで Firefox を他の携帯電話やタブレットのオペレーティングシステム向けに公開した場合や Android がラップトップ PC に使用された場合でもコードが動作します。また、タッチ対応端末を検出するには "Mobi" や "Tablet" を検索するのではなく、タッチ機能を検出してください。タブレットではないタッチ対応端末の場合もあります。
 
-> **メモ:** Firefox OS 端末では、オペレーティングシステムを示す部分がない形式となります (例: "Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0")。ウェブがプラットフォームです。
+> [!NOTE]
+> Firefox OS 端末では、オペレーティングシステムを示す部分がない形式となります (例: "Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0")。ウェブがプラットフォームです。
 
 ## Windows
 
@@ -179,7 +182,8 @@ Firefox OS のバージョン番号は UA 文字列に含まれませんが、 U
 | 2.2                         | 37                     |
 | 2.5                         | 44                     |
 
-> **メモ:** この対応関係は [Mercurial リポジトリー名](https://hg.mozilla.org/releases)から容易に判断できます。`mozilla-b2g` で始まるリポジトリーが Firefox OS のリリースリポジトリーであり、Firefox OS と Gecko の両バージョンがその名前に含まれています。
+> [!NOTE]
+> この対応関係は [Mercurial リポジトリー名](https://hg.mozilla.org/releases)から容易に判断できます。`mozilla-b2g` で始まるリポジトリーが Firefox OS のリリースリポジトリーであり、Firefox OS と Gecko の両バージョンがその名前に含まれています。
 
 Firefox OS のバージョン番号は 4 つの数字があります: `X.X.X.Y`. 始めの 2 つの数字は Mozilla の製品チームが管理しており、新機能を伴うバージョンを表します（例: v1.1、1.2 など）。3 番目の番号はセキュリティ更新向けの定期的なバージョンの識別 (最大 6 週間ごと) として増えていきます。4 番目の番号は OEM が管理します。
 
diff --git a/files/ja/web/http/headers/user-agent/index.md b/files/ja/web/http/headers/user-agent/index.md
index bf108265e043cd..cdb870781ac92c 100644
--- a/files/ja/web/http/headers/user-agent/index.md
+++ b/files/ja/web/http/headers/user-agent/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/User-Agent
 
 **User-Agent** {{Glossary("request header", "リクエストヘッダー")}}は、サーバーやネットワークピアがアプリケーション、オペレーティングシステム、ベンダーや、リクエストしている{{Glossary("user agent", "ユーザーエージェント")}}のバージョン等を識別できるようにする特性文字列です。
 
-> **警告:** ブラウザーによって異なるウェブページやサービスを提供することが、通常は悪い考えである理由については、[ユーザーエージェント文字列を用いたブラウザーの判定](/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent)をお読みください。
+> [!WARNING]
+> ブラウザーによって異なるウェブページやサービスを提供することが、通常は悪い考えである理由については、[ユーザーエージェント文字列を用いたブラウザーの判定](/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent)をお読みください。
 
 <table class="properties">
   <tbody>
diff --git a/files/ja/web/http/headers/www-authenticate/index.md b/files/ja/web/http/headers/www-authenticate/index.md
index 669531d80ef020..d3640d5a584c38 100644
--- a/files/ja/web/http/headers/www-authenticate/index.md
+++ b/files/ja/web/http/headers/www-authenticate/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/WWW-Authenticate
 
 HTTP の **`WWW-Authenticate`** レスポンスヘッダーは、リソースへのアクセス権を得るために使われる [HTTP 認証](/ja/docs/Web/HTTP/Authentication)メソッド (「チャレンジ」) を定義します。</p>
 
-> **メモ:** このヘッダーは、[一般的な HTTP 認証の枠組み](/ja/docs/Web/HTTP/Authentication#一般的な_http_認証の枠組み)の一部であり、多くの[認証方式](/ja/docs/Web/HTTP/Authentication#認証方式)で使用することができます。
+> [!NOTE]
+> このヘッダーは、[一般的な HTTP 認証の枠組み](/ja/docs/Web/HTTP/Authentication#一般的な_http_認証の枠組み)の一部であり、多くの[認証方式](/ja/docs/Web/HTTP/Authentication#認証方式)で使用することができます。
 > それぞれの「チャレンジ」には、サーバーが対応している方式と、その方式型に定義されている追加引数が記載されています。
 
 [HTTP 認証](/ja/docs/Web/HTTP/Authentication)を使用するサーバーは、保護されたリソースへのリクエストに対して {{HTTPStatus("401")}} `Unauthorized` レスポンスを返します。このレスポンスには、1 つ以上の `WWW-Authenticate` ヘッダーと 1 つ以上の{{Glossary("challenge", "チャレンジ")}}が含まれていなければならず、リソースへのアクセスにどのような認証方式が使用できるか (およびそれぞれの方式が必要とする追加データ) を示します。
@@ -74,7 +75,8 @@ WWW-Authenticate: Basic realm=<realm>, charset="UTF-8"
 
   - : [認証方式](/ja/docs/Web/HTTP/Authentication#認証方式)です。有名なものとしては、 [`Basic`](/ja/docs/Web/HTTP/Authentication#basic_認証方式)、`Digest`、`Negotiate`、`AWS4-HMAC-SHA256` などがあります (大文字小文字の区別なし)。
 
-    > **メモ:** 詳しい情報やオプションについては、[HTTP 認証 > 認証方式](/ja/docs/Web/HTTP/Authentication#認証方式)を参照してください。
+    > [!NOTE]
+    > 詳しい情報やオプションについては、[HTTP 認証 > 認証方式](/ja/docs/Web/HTTP/Authentication#認証方式)を参照してください。
 
 - **realm=**\<realm> {{optional_inline}}
   - : 保護領域を説明する文字列です。
@@ -148,11 +150,13 @@ Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
 
 `"Basic"` 認証では、資格情報はまず、ユーザー名とパスワードをコロンで結合し (`aladdin:opensesame`)、その結果の文字列を [`base64`](/ja/docs/Glossary/Base64) でエンコードすることで構築します (`YWxhZGRpbjpvcGVuc2VzYW1l`)。
 
-> **メモ:** Apache や nginx サーバーで HTTP Basic 認証を使用してサイトを保護する方法の例については、 <a href="/ja/docs/Web/HTTP/Authentication">HTTP 認証</a> を参照してください。
+> [!NOTE]
+> Apache や nginx サーバーで HTTP Basic 認証を使用してサイトを保護する方法の例については、 <a href="/ja/docs/Web/HTTP/Authentication">HTTP 認証</a> を参照してください。
 
 ### SHA-256 と MD5 を使用した Digest 認証
 
-> **メモ:** この例は、{{RFC("7616")}} "HTTP Digest Access Authentication" から引用しています (この仕様書の他の例では、`SHA-512`、`charset`、`userhash` の使用方法を示しています)。
+> [!NOTE]
+> この例は、{{RFC("7616")}} "HTTP Digest Access Authentication" から引用しています (この仕様書の他の例では、`SHA-512`、`charset`、`userhash` の使用方法を示しています)。
 
 クライアントは、Digest 認証で保護された URI "http://www.example.org/dir/index.html" の文書にアクセスしようとしています。
 この文書のユーザー名は "Mufasa" で、パスワードは "Circle of Life" です (各単語の間にスペースがあることに注意してください)。
diff --git a/files/ja/web/http/headers/x-forwarded-for/index.md b/files/ja/web/http/headers/x-forwarded-for/index.md
index f15d731aa4c382..729d983c74924c 100644
--- a/files/ja/web/http/headers/x-forwarded-for/index.md
+++ b/files/ja/web/http/headers/x-forwarded-for/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/X-Forwarded-For
 
 **X-Forwarded-For** (XFF) ヘッダーは、 HTTP プロキシーサーバーを通過してウェブサーバーへ接続したクライアントの、送信元 IP アドレスを特定するために事実上の標準となっているヘッダーです。
 
-> **警告:** このヘッダーを適切に使用しない場合、セキュリティリスクがあります。詳細は [セキュリティーとプライバシーの懸念](#セキュリティーとプライバシーの懸念) の項を確認してください。
+> [!WARNING]
+> このヘッダーを適切に使用しない場合、セキュリティリスクがあります。詳細は [セキュリティーとプライバシーの懸念](#セキュリティーとプライバシーの懸念) の項を確認してください。
 
 クライアントがサーバーに直接接続を行った場合、クライアントの IP アドレスはサーバーに送信されます。（そして、しばしばサーバーのアクセスログに記録されます）しかし、クライアントの接続が[フォワードプロキシー または リバースプロキシー](https://en.wikipedia.org/wiki/Proxy_server)を通過する場合はサーバーは最後のプロキシーの IP アドレスしかわからず、ほとんど役に立ちません。これは最後のプロキシーがサーバーの一部としてのロードバランサーである場合に特にあてはまります。そのため、より役に立つクライアント IP アドレスをサーバーに提供するために `X-Forwarded-For` リクエストヘッダーが用いられます。
 
diff --git a/files/ja/web/http/headers/x-frame-options/index.md b/files/ja/web/http/headers/x-frame-options/index.md
index a613b02bfb64fc..6388be5275a5df 100644
--- a/files/ja/web/http/headers/x-frame-options/index.md
+++ b/files/ja/web/http/headers/x-frame-options/index.md
@@ -46,7 +46,8 @@ X-Frame-Options: SAMEORIGIN
 
 ## 例
 
-> **メモ:** X-Frame-Options を {{HTMLElement("meta")}} 要素に設定しても意味がありません。例えば、`<meta http-equiv="X-Frame-Options" content="deny">` は効果がありません。使用しないでください。以下の例にあるように、 `X-Frame-Options` は HTTP ヘッダーを通じて設定された場合のみ動作します。
+> [!NOTE]
+> X-Frame-Options を {{HTMLElement("meta")}} 要素に設定しても意味がありません。例えば、`<meta http-equiv="X-Frame-Options" content="deny">` は効果がありません。使用しないでください。以下の例にあるように、 `X-Frame-Options` は HTTP ヘッダーを通じて設定された場合のみ動作します。
 
 ### Apache の設定
 
diff --git a/files/ja/web/http/headers/x-xss-protection/index.md b/files/ja/web/http/headers/x-xss-protection/index.md
index 722f1176909e5f..734a29acc84e6f 100644
--- a/files/ja/web/http/headers/x-xss-protection/index.md
+++ b/files/ja/web/http/headers/x-xss-protection/index.md
@@ -9,9 +9,10 @@ l10n:
 
 HTTP の **`X-XSS-Protection`** レスポンスヘッダーは Internet Explorer, Chrome, Safari の機能で、反射型クロスサイトスクリプティング ({{Glossary("Cross-site_scripting", "XSS")}}) 攻撃を検出したときに、ページの読み込みを停止するためのものです。サイトが強力な {{HTTPHeader("Content-Security-Policy")}} を実装しており、インライン JavaScript (`'unsafe-inline'`) の使用を無効にしている場合、これらの保護は現代のブラウザーではほとんど不要となります。
 
-> **警告:** この機能は、まだ {{Glossary("CSP")}} に対応していない古いブラウザーのユーザーを保護できるにもかかわらず、場合によっては、他の安全なウェブサイトで**XSS 保護機能が XSS の脆弱性を作り出す可能性**があります。詳細については、下記の節を参照してください。
+> [!WARNING]
+> この機能は、まだ {{Glossary("CSP")}} に対応していない古いブラウザーのユーザーを保護できるにもかかわらず、場合によっては、他の安全なウェブサイトで**XSS 保護機能が XSS の脆弱性を作り出す可能性**があります。詳細については、下記の節を参照してください。
 
-> **メモ:**
+> [!NOTE]
 >
 > - Chrome は [XSS Auditor を削除](https://chromestatus.com/feature/5021976655560704)しました。
 > - Firefox は対応しておらず、 [`X-XSS-Protection` を今後も実装しません](https://bugzilla.mozilla.org/show_bug.cgi?id=528661)
diff --git a/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md b/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md
index c9a832df07a674..a5cf4e1730ea1d 100644
--- a/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md
+++ b/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md
@@ -83,7 +83,7 @@ application/x-ns-proxy-autoconfig
 
 次に、 .pac 拡張子をこの MIME タイプに結び付けるようサーバーを設定してください。
 
-> **メモ:**
+> [!NOTE]
 >
 > - JavaScript 関数は常に単体のファイルで保存し、 HTML ファイルやその他のファイルに埋め込まないでください。
 > - この文書の最後にある例は完全なものです。ファイルを保存して使用するのに追加する必要がある構文はありません。 (もちろん、 JavaScript を編集して自分のサイトのドメイン名やサブネットマスクに合わせる必要があります。)
@@ -125,7 +125,8 @@ PAC ファイルを作成するために、以下の関数を使用できます
 
   - `ProxyConfig.bindings` {{deprecated_inline}}
 
-> **メモ:** 以下の例をテストするために、 pactester ([pacparser](https://github.com/manugarg/pacparser) パッケージの一部) を使用しました。
+> [!NOTE]
+> 以下の例をテストするために、 pactester ([pacparser](https://github.com/manugarg/pacparser) パッケージの一部) を使用しました。
 >
 > - PAC ファイルは `proxy.pac` という名前です
 > - コマンドライン: `pactester -p ~/pacparser-master/tests/proxy.pac -u https://www.mozilla.org` (引数 `host` に `www.mozilla.org` を、引数 `url` に `https://www.mozilla.org` を渡します)
@@ -318,7 +319,8 @@ myIpAddress();
 
 Firefox が動作しているマシンのサーバー IP アドレスを、ドット区切りの整数形式の文字列で返します。
 
-> **警告:** myIpAddress() は Linux マシンでは、 **`nslookup localhost`** が返すサーバーアドレスと同じ IP アドレスを返します。パブリック IP アドレスは返しません。
+> [!WARNING]
+> myIpAddress() は Linux マシンでは、 **`nslookup localhost`** が返すサーバーアドレスと同じ IP アドレスを返します。パブリック IP アドレスは返しません。
 
 #### 例
 
@@ -368,7 +370,8 @@ shExpMatch(str, shexp);
 
 特定のグロブ式の構文に対応しているかどうかは、ブラウザーによって異なります。 `*` （任意の数の文字に一致）と `?` （1 文字に一致）は常に対応していますが、 `[characters]` と `[^characters]` は（Firefoxを含む）いくつかの実装で追加的に対応しています。
 
-> **メモ:** クライアントが対応している場合、JavaScript の正規表現は通常 URL (および他の文字列) をパターン一致させるより強力で一貫した方法を提供します。
+> [!NOTE]
+> クライアントが対応している場合、JavaScript の正規表現は通常 URL (および他の文字列) をパターン一致させるより強力で一貫した方法を提供します。
 
 #### 例
 
@@ -385,7 +388,8 @@ shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); //
 weekdayRange(wd1, wd2, [gmt]);
 ```
 
-> **メモ:** （Firefox 49以前） 関数でこれらの引数を範囲として評価したい場合は、 wd1 が wd2 より小さくなければなりません。以下の警告を参照してください。
+> [!NOTE]
+> （Firefox 49以前） 関数でこれらの引数を範囲として評価したい場合は、 wd1 が wd2 より小さくなければなりません。以下の警告を参照してください。
 
 #### 引数
 
@@ -428,7 +432,8 @@ dateRange(<month1>, <year1>, <month2>, <year2>, [gmt])
 dateRange(<day1>, <month1>, <year1>, <day2>, <month2>, <year2>, [gmt])
 ```
 
-> **メモ:** （Firefox 49 以前）関数がこれらの引数を範囲として評価したい場合、 day1 は day2 よりも小さく、 month1 は month2 よりも小さく、 year1 は year2 よりも小さくなければなりません。以下の警告を参照してください。
+> [!NOTE]
+> （Firefox 49 以前）関数がこれらの引数を範囲として評価したい場合、 day1 は day2 よりも小さく、 month1 は month2 よりも小さく、 year1 は year2 よりも小さくなければなりません。以下の警告を参照してください。
 
 #### 引数
 
@@ -491,7 +496,8 @@ dateRange(1995, 1997);
 timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])
 ```
 
-> **メモ:** （Firefox 49以前）関数がこれらの引数を範囲として評価したい場合、カテゴリー hour1, min1, sec1 は、カテゴリー hour2, min2, sec2 よりも小さくなければなりません。下記の警告を参照してください。
+> [!NOTE]
+> （Firefox 49以前）関数がこれらの引数を範囲として評価したい場合、カテゴリー hour1, min1, sec1 は、カテゴリー hour2, min2, sec2 よりも小さくなければなりません。下記の警告を参照してください。
 
 #### 引数
 
@@ -545,7 +551,8 @@ alert("Error: shouldn't reach this clause."); // log a simple message
 
 ### ローカルホスト以外ではプロキシーを使用する
 
-> **メモ:** この後の例はすべて非常に特殊なものであるため、テストはしていません。
+> [!NOTE]
+> この後の例はすべて非常に特殊なものであるため、テストはしていません。
 
 完全修飾されていないホストや、ローカルドメインにあるホストはすべて直接接続されます。それ以外はすべて `w3proxy.mozilla.org:8080` を介して接続されます。プロキシーがダウンした場合、自動的に直接接続になります。
 
@@ -559,7 +566,8 @@ function FindProxyForURL(url, host) {
 }
 ```
 
-> **メモ:** これは、プロキシーが 1 つしかない場合の、最も単純で最も効率的な自動設定ファイルです。
+> [!NOTE]
+> これは、プロキシーが 1 つしかない場合の、最も単純で最も効率的な自動設定ファイルです。
 
 ## 例 2
 
@@ -583,7 +591,8 @@ function FindProxyForURL(url, host) {
 
 上記の例では、mozilla.org ドメインのローカルホスト以外のすべてにプロキシーを使用します。さらに例外として、ホスト `www.mozilla.org` と `merchant.mozilla.org` はプロキシーを経由して接続されることになります。
 
-> **メモ:** 効率化のための例外処理、 `localHostOrDomainIs()` の関数はローカルドメインにある URL に対してのみ実行され、すべての URL に対して実行されるわけではありません。上記の効率的な動作を実現するために、 _and_ 式の前に _or_ 式を括弧で囲むことに注意してください。
+> [!NOTE]
+> 効率化のための例外処理、 `localHostOrDomainIs()` の関数はローカルドメインにある URL に対してのみ実行され、すべての URL に対して実行されるわけではありません。上記の効率的な動作を実現するために、 _and_ 式の前に _or_ 式を括弧で囲むことに注意してください。
 
 ## 例 3
 
@@ -695,7 +704,8 @@ function FindProxyForURL(url, host) {
 }
 ```
 
-> **メモ:** 同じことは、先に記述した [`shExpMatch()`](#shexpmatch) 関数を使って実現することができます。
+> [!NOTE]
+> 同じことは、先に記述した [`shExpMatch()`](#shexpmatch) 関数を使って実現することができます。
 
 例:
 
@@ -705,7 +715,8 @@ if (shExpMatch(url, "http:*")) {
 }
 ```
 
-> **メモ:** autoconfig ファイルは CGI スクリプトによって出力することができます。これは例えば、クライアントの IP アドレス（CGI では `REMOTE_ADDR` 環境変数）に基づいて autoconfig ファイルが異なる動作をするようにする場合に便利です。
+> [!NOTE]
+> autoconfig ファイルは CGI スクリプトによって出力することができます。これは例えば、クライアントの IP アドレス（CGI では `REMOTE_ADDR` 環境変数）に基づいて autoconfig ファイルが異なる動作をするようにする場合に便利です。
 >
 > `isInNet()`, `isResolvable()`, `dnsResolve()` 関数の使用は、 DNS サーバーを参照する必要があるため、慎重に検討されるべきです。その他の autoconfig 関連の関数はすべて、 DNS サーバーを使用する必要のない単なる文字列一致関数である。プロキシーを使用した場合は、プロキシーが DNS ルックアップを行うため、 DNS サーバーへの影響が倍増する。ほとんどの場合、これらの関数は目的の結果を得るためには必要ない。
 
diff --git a/files/ja/web/http/redirections/index.md b/files/ja/web/http/redirections/index.md
index 334f3fcb347211..f08ef08dcb04c1 100644
--- a/files/ja/web/http/redirections/index.md
+++ b/files/ja/web/http/redirections/index.md
@@ -124,7 +124,8 @@ HTML リダイレクトと同様にすべてのリソースでは動作できず
 
 外部のリンクは貴重なユーザーを連れてきてくれるし、 SEO にも役立つため、リンクを壊したくはありません。よって、古い URL から新しい URL へのリダイレクトを設定します。
 
-> **メモ:** この手法は内部のリンクにも有効ですが、内部のリダイレクトは避けるようにしてください。リダイレクトは（追加の HTTP リクエストを行うため）性能の負担がかなりあります。内部のリンクを修正することでこれを避けられるのであれば、リンクを修正してください。
+> [!NOTE]
+> この手法は内部のリンクにも有効ですが、内部のリダイレクトは避けるようにしてください。リダイレクトは（追加の HTTP リクエストを行うため）性能の負担がかなりあります。内部のリンクを修正することでこれを避けられるのであれば、リンクを修正してください。
 
 ### 安全でないリクエストへの一時的なレスポンス
 
diff --git a/files/ja/web/http/session/index.md b/files/ja/web/http/session/index.md
index 191c8c7a707715..c50f34936c479f 100644
--- a/files/ja/web/http/session/index.md
+++ b/files/ja/web/http/session/index.md
@@ -19,7 +19,8 @@ HTTP/1.1 では第 3 段階の後にコネクションは閉じられなくな
 
 コンピューター上の HTTP サーバー用の、 TCP の既定のポートは 80 番です。8000 番や 8080 番など、ほかのポートを使用することもできます。読み込むページの URL はドメイン名とポート番号の両方を含みますが、後者は 80 番である場合に省略できます。詳しくは [Identifying resources on the Web](/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web) をご覧ください。
 
-> **メモ:** クライアントサーバーモデルでは、明示的な要求なくサーバーがクライアントにデータを送信することを認めていません。この問題を回避するために、ウェブ開発者はいくつかの技術を使用しています。 {{domxref("XMLHTTPRequest")}} や {{domxref("Fetch")}} API で定期的にサーバーに ping を送ったり、 [WebSockets API](/ja/docs/WebSockets) や同様のプロトコルを使用したりします。
+> [!NOTE]
+> クライアントサーバーモデルでは、明示的な要求なくサーバーがクライアントにデータを送信することを認めていません。この問題を回避するために、ウェブ開発者はいくつかの技術を使用しています。 {{domxref("XMLHTTPRequest")}} や {{domxref("Fetch")}} API で定期的にサーバーに ping を送ったり、 [WebSockets API](/ja/docs/WebSockets) や同様のプロトコルを使用したりします。
 
 ## クライアントの要求の送信
 
diff --git a/files/ja/web/http/status/102/index.md b/files/ja/web/http/status/102/index.md
index 72f2e72d600987..b3b1eefcaed1a6 100644
--- a/files/ja/web/http/status/102/index.md
+++ b/files/ja/web/http/status/102/index.md
@@ -11,7 +11,8 @@ HTTP **`102 Processing`** 情報ステータスレスポンスコードは、リ
 
 このステータスコードは、リクエストの処理に長時間かかるとサーバーが判断した場合のみ送信されます。これは、クライアントにリクエストがまだ死んでいないことを伝えます。
 
-> **メモ:** このステータスコードは非推奨になっており、もう送られるべきではありません。クライアントはまだ受け入れる可能性がありますが、単純に無視します。
+> [!NOTE]
+> このステータスコードは非推奨になっており、もう送られるべきではありません。クライアントはまだ受け入れる可能性がありますが、単純に無視します。
 
 ## ステータス
 
diff --git a/files/ja/web/http/status/208/index.md b/files/ja/web/http/status/208/index.md
index d8454b4cf8b16d..60dbcf65100d55 100644
--- a/files/ja/web/http/status/208/index.md
+++ b/files/ja/web/http/status/208/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{HTTPSidebar}}
 
-> **メモ:** いくつかのパスにリソースを _バインド_ する機能は {{Glossary("WebDAV")}} プロトコルの拡張です。(WebDAV サーバーにアクセスしているウェブアプリケーションが受信する可能性があります) ウェブページにアクセスしているブラウザーがこのステータスコードを受け取ることは無いでしょう。
+> [!NOTE]
+> いくつかのパスにリソースを _バインド_ する機能は {{Glossary("WebDAV")}} プロトコルの拡張です。(WebDAV サーバーにアクセスしているウェブアプリケーションが受信する可能性があります) ウェブページにアクセスしているブラウザーがこのステータスコードを受け取ることは無いでしょう。
 
 HTTP **`208 Already Reported`** レスポンスコードは、容量を節約し、競合を防ぐため、{{HTTPStatus("207")}} (`207 Multi-Status`) レスポンスで用いられます。
 同じリソースが (たとえばコレクションの一部として) 異なるパスで複数回要求された場合、最初のもののみ {{HTTPStatus("200")}} で報告されます。
diff --git a/files/ja/web/http/status/226/index.md b/files/ja/web/http/status/226/index.md
index fbf351c878476d..dd9a10a7f03bc7 100644
--- a/files/ja/web/http/status/226/index.md
+++ b/files/ja/web/http/status/226/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{HTTPSidebar}}
 
-> **メモ:** ブラウザーは HTTP で _デルタエンコーディング_ に対応していません。このステータスコードは特定のクライアントで用いられるカスタムされたサーバーから送り返されます。
+> [!NOTE]
+> ブラウザーは HTTP で _デルタエンコーディング_ に対応していません。このステータスコードは特定のクライアントで用いられるカスタムされたサーバーから送り返されます。
 
 デルタエンコーディングの文脈において、HTTP **`226 IM Used`** ステータスコードは受信した {{HTTPMethod("GET")}} リクエストに対する _デルタ_ を返していることを示すためにサーバーによって設定されます。
 
diff --git a/files/ja/web/http/status/304/index.md b/files/ja/web/http/status/304/index.md
index b7f5f83af105f8..de577efddb9022 100644
--- a/files/ja/web/http/status/304/index.md
+++ b/files/ja/web/http/status/304/index.md
@@ -9,7 +9,8 @@ HTTP **`304 Not Modified`** クライアントリダイレクトレスポンス
 
 {{HTTPStatus("200")}} `OK` と同等のレスポンスは {{HTTPHeader("Cache-Control")}}、{{HTTPHeader("Content-Location")}}、{{HTTPHeader("Date")}}、{{HTTPHeader("ETag")}}、{{HTTPHeader("Expires")}} および {{HTTPHeader("Vary")}} ヘッダーを含みます。
 
-> **メモ:** 多くのブラウザーの[開発ツールのネットワークパネル](/ja/docs/Tools/Network_Monitor)は `304` レスポンスにつながる追加のリクエストを作成するため、開発者はローカルキャッシュへのアクセスを見ることができます。
+> [!NOTE]
+> 多くのブラウザーの[開発ツールのネットワークパネル](/ja/docs/Tools/Network_Monitor)は `304` レスポンスにつながる追加のリクエストを作成するため、開発者はローカルキャッシュへのアクセスを見ることができます。
 
 ## ステータス
 
diff --git a/files/ja/web/http/status/308/index.md b/files/ja/web/http/status/308/index.md
index 26673bb4d6ff3f..50545f61694bc4 100644
--- a/files/ja/web/http/status/308/index.md
+++ b/files/ja/web/http/status/308/index.md
@@ -9,7 +9,8 @@ The HyperText Transfer Protocol (HTTP) **`308 Permanent Redirect`** リダイレ
 
 {{HTTPStatus("301")}} の場合は不正に {{HTTPMethod("GET")}} メソッドに変更される可能性があるのに対し、このコードの場合はリクエストメソッドと本文が変更されません。
 
-> **メモ:** ウェブアプリケーションによっては、 `308 Permanent Redirect` を標準外かつ他の目的に使用していることがあります。例えば、 Google Drive はアップロードが不完全に停止したことを表すために、 `308 Resume Incomplete` レスポンスを使用します。[\[1\]](https://developers.google.com/drive/v3/web/manage-uploads#resumable)
+> [!NOTE]
+> ウェブアプリケーションによっては、 `308 Permanent Redirect` を標準外かつ他の目的に使用していることがあります。例えば、 Google Drive はアップロードが不完全に停止したことを表すために、 `308 Resume Incomplete` レスポンスを使用します。[\[1\]](https://developers.google.com/drive/v3/web/manage-uploads#resumable)
 
 ## ステータス
 
diff --git a/files/ja/web/http/status/400/index.md b/files/ja/web/http/status/400/index.md
index df63be224b8684..d21de3e92c1515 100644
--- a/files/ja/web/http/status/400/index.md
+++ b/files/ja/web/http/status/400/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/400
 
 HyperText Transfer Protocol (HTTP) の **`400 Bad Request`** レスポンスステータスコードは、何らかのクライアント側のエラーであると分かったために、サーバーがそのリクエストを処理しない (できない) ことを表します (例えば、リクエストの構文が正しくない、リクエストメッセージのフレーミングが無効、リクエスト経路に偽りがあるなど)。
 
-> **警告:** クライアントは変更なしにこのリクエストを繰り返すべきではありません。
+> [!WARNING]
+> クライアントは変更なしにこのリクエストを繰り返すべきではありません。
 
 ## ステータス
 
diff --git a/files/ja/web/http/status/404/index.md b/files/ja/web/http/status/404/index.md
index 6ea7ab578185d9..0dcbd015a84d0a 100644
--- a/files/ja/web/http/status/404/index.md
+++ b/files/ja/web/http/status/404/index.md
@@ -29,7 +29,8 @@ ErrorDocument 404 /notfound.html
 
 独自の 404 ページの例については、この [404 ページ](https://konmari.com/404)を参照してください。
 
-> **メモ:** 適度なデザインのカスタマイズは良いことです。あなたの 404 ページをユーモアや思いやりのあるものにすることは自由ですが、ユーザーを混乱させないようにしてください。
+> [!NOTE]
+> 適度なデザインのカスタマイズは良いことです。あなたの 404 ページをユーモアや思いやりのあるものにすることは自由ですが、ユーザーを混乱させないようにしてください。
 
 ## 仕様書
 
diff --git a/files/ja/web/http/status/408/index.md b/files/ja/web/http/status/408/index.md
index 2283024d38dc24..12b51124b6b9d4 100644
--- a/files/ja/web/http/status/408/index.md
+++ b/files/ja/web/http/status/408/index.md
@@ -11,7 +11,8 @@ HyperText Transfer Protocol (HTTP) **`408 Request Timeout`** レスポンスス
 
 このレスポンスは HTTP 事前接続メカニズム使用してサーフィンを高速化するために、Chrome や、Firefox 27+、IE9 などの、いくつかのブラウザーでよく利用されます。
 
-> **メモ:** このメッセージを送信せずに接続をシャットダウンするサーバーもあります。
+> [!NOTE]
+> このメッセージを送信せずに接続をシャットダウンするサーバーもあります。
 
 ## ステータス
 
diff --git a/files/ja/web/http/status/410/index.md b/files/ja/web/http/status/410/index.md
index 8194342c640036..cf097bbb085d7a 100644
--- a/files/ja/web/http/status/410/index.md
+++ b/files/ja/web/http/status/410/index.md
@@ -9,7 +9,8 @@ HyperText Transfer Protocol (HTTP) の **`410 Gone`** クライエントエラ
 
 この状態が一時的なものか永久なのか分からない場合は、代わりに {{HTTPStatus(404)}} ステータスコードを使用してください。
 
-> **メモ:** 410 レスポンスは既定でキャッシュ可能です。
+> [!NOTE]
+> 410 レスポンスは既定でキャッシュ可能です。
 
 ## ステータス
 
diff --git a/files/ja/web/http/status/411/index.md b/files/ja/web/http/status/411/index.md
index e13914ccf7de11..6bddd351beec18 100644
--- a/files/ja/web/http/status/411/index.md
+++ b/files/ja/web/http/status/411/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/411
 
 HyperText Transfer Protocol (HTTP) **`411 Length Required`** クライアントエラーレスポンスコードは、サーバーが定義された {{HTTPHeader("Content-Length")}} ヘッダーのないリクエストの受け入れを拒否することを示します。
 
-> **メモ:** 仕様によっては、一連のチャンクでデータを送信する場合 `Content-Length` ヘッダは省略され、各チャンクの先頭に、現在のチャンクの長さを 16 進形式で追加する必要があります。詳細は {{HTTPHeader("Transfer-Encoding")}} を参照してください。
+> [!NOTE]
+> 仕様によっては、一連のチャンクでデータを送信する場合 `Content-Length` ヘッダは省略され、各チャンクの先頭に、現在のチャンクの長さを 16 進形式で追加する必要があります。詳細は {{HTTPHeader("Transfer-Encoding")}} を参照してください。
 
 ## ステータス
 
diff --git a/files/ja/web/http/status/422/index.md b/files/ja/web/http/status/422/index.md
index 4bcad9e5b7f6c0..f354b9e830e137 100644
--- a/files/ja/web/http/status/422/index.md
+++ b/files/ja/web/http/status/422/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/422
 
 The HyperText Transfer Protocol (HTTP) の **`422 Unprocessable Entity`** 応答状態コードは、サーバーが要求本文のコンテンツ型を理解でき、要求本文の構文が正しいものの、中に含まれている指示が処理できなかったことを表します。
 
-> **警告:** クライアントは修正なしにこの要求を繰り返すべきではありません。
+> [!WARNING]
+> クライアントは修正なしにこの要求を繰り返すべきではありません。
 
 ## 状態
 
diff --git a/files/ja/web/http/status/423/index.md b/files/ja/web/http/status/423/index.md
index 2479956ac505cf..a057b711ed7360 100644
--- a/files/ja/web/http/status/423/index.md
+++ b/files/ja/web/http/status/423/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{HTTPSidebar}}
 
-> **メモ:** リソースを _ロック_ する機能は、{{Glossary("WebDAV")}} サーバーの一部に固有のものです。ウェブページにアクセスしているブラウザーがこのステータスコードを受け取ることは無いはずです。これを受け取る間違った状況では、ブラウザーはこれを一般の `400` ステータスコードとして扱うでしょう。
+> [!NOTE]
+> リソースを _ロック_ する機能は、{{Glossary("WebDAV")}} サーバーの一部に固有のものです。ウェブページにアクセスしているブラウザーがこのステータスコードを受け取ることは無いはずです。これを受け取る間違った状況では、ブラウザーはこれを一般の `400` ステータスコードとして扱うでしょう。
 
 HTTP **`423 Locked`** エラーレスポンスコードは、対象のリソースが _ロックされている_、すなわちアクセスできないことを示します。コンテンツは、WebDAV の XML 形式で情報を含むべきです。
 
diff --git a/files/ja/web/http/status/501/index.md b/files/ja/web/http/status/501/index.md
index 2d59946038433f..28a42836dc4e65 100644
--- a/files/ja/web/http/status/501/index.md
+++ b/files/ja/web/http/status/501/index.md
@@ -15,7 +15,7 @@ HyperText Transfer Protocol (HTTP) の **`501 Not Implemented`** サーバーエ
 
 サーバーがそのメソッドを理解して*いて*、意図的に対応していない場合は、適切なレスポンスは {{HTTPStatus(405, "405 Method Not Allowed")}} です。
 
-> **メモ:**
+> [!NOTE]
 >
 > - 501 エラーは修正できるものではありませんが、アクセスしようとしているウェブサーバーで修正が必要です。
 > - 501 レスポンスは、その他のヘッダーのキャッシュの指示がない限り、既定でキャッシュ可能です。
diff --git a/files/ja/web/http/status/503/index.md b/files/ja/web/http/status/503/index.md
index 90cbb51223ed98..15f3e4606f0be8 100644
--- a/files/ja/web/http/status/503/index.md
+++ b/files/ja/web/http/status/503/index.md
@@ -9,7 +9,8 @@ HyperText Transfer Protocol (HTTP) の **`503 Service Unavailable`** サーバ
 
 一般的な原因は、サーバーがメンテナンス中のために停止していることや、過負荷状態になっていることです。このレスポンスは、一時的な条件に使用する必要があり、 {{HTTPHeader("Retry-After")}} HTTP ヘッダーには、もし可能であれば、サービスの復旧に要する予想時間を含めるべきです。
 
-> **メモ:** このレスポンスと共に、問題を分かりやすく説明するページを送信する必要があります。
+> [!NOTE]
+> このレスポンスと共に、問題を分かりやすく説明するページを送信する必要があります。
 
 503 のステータスはしばしば一時的な状態であり、レスポンスは頻繁にキャッシュされるべきではないため、このレスポンスと共に送信されるキャッシュ関連のヘッダーは注意する必要があります。
 
diff --git a/files/ja/web/javascript/closures/index.md b/files/ja/web/javascript/closures/index.md
index abae99ec640866..a2738f11179e33 100644
--- a/files/ja/web/javascript/closures/index.md
+++ b/files/ja/web/javascript/closures/index.md
@@ -244,7 +244,8 @@ console.log(counter2.value()); // 0.
 
 2 つのカウンターが互いに独立した状態を維持していることに注目してください。各クロージャは、独自のクロージャを介して異なるバージョンの `privateCounter` 変数を参照しています。カウンターのいずれかが呼び出されるたびに、この変数の値を変更することで、そのレキシカル環境が変化します。あるクロージャで変数値を変更しても、もう一方のクロージャの値には影響しません。
 
-> **メモ:** このようにしてクロージャを使うと、普通はオブジェクト指向プログラミングに付き物のいくつかの利点、具体的には*データの隠蔽*や*カプセル化*が利用できるようになります。
+> [!NOTE]
+> このようにしてクロージャを使うと、普通はオブジェクト指向プログラミングに付き物のいくつかの利点、具体的には*データの隠蔽*や*カプセル化*が利用できるようになります。
 
 ## クロージャのスコープチェーン
 
diff --git a/files/ja/web/javascript/data_structures/index.md b/files/ja/web/javascript/data_structures/index.md
index ce74ee0338be27..f0d481b13e653b 100644
--- a/files/ja/web/javascript/data_structures/index.md
+++ b/files/ja/web/javascript/data_structures/index.md
@@ -100,7 +100,8 @@ console.log(42 / -0); // -Infinity
 
 数値は概念的には「数学的な値」であり、常に暗黙のうちに浮動小数点`でエンコードされていますが、JavaScriptでは[ビット演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_operators#ビット演算子)を提供しています。ビット演算子を運営する場合、最初の数値は 32 ビット整数に変換されます。
 
-> **メモ:** ビット演算子で[ビットマスク](https://ja.wikipedia.org/wiki/マスク_%28情報工学%29)を使用すれば、 1 つの数値で複数の論理値を表現することも可能ですが、 JavaScript は（論理型の配列や名前付きプロパティに論理値が割り当てられたオブジェクトのような）論理値の集合を表現する手段を提供しているため、この行いは悪い習慣として見なされています。ビットマスクはコードの可読性、わかりやすさ、保守性を大きく損ないます。
+> [!NOTE]
+> ビット演算子で[ビットマスク](https://ja.wikipedia.org/wiki/マスク_%28情報工学%29)を使用すれば、 1 つの数値で複数の論理値を表現することも可能ですが、 JavaScript は（論理型の配列や名前付きプロパティに論理値が割り当てられたオブジェクトのような）論理値の集合を表現する手段を提供しているため、この行いは悪い習慣として見なされています。ビットマスクはコードの可読性、わかりやすさ、保守性を大きく損ないます。
 
 ローカルストレージの制限に対処しようとするときや、極端な用途（ネットワーク上の各ビットがカウントされる場合など）のように、非常に制約された環境では、このような技術を使用する必要がある場合があります。この技術は、サイズを最適化するために導ける最後の手段である場合にのみ考えることができます。
 
@@ -177,7 +178,8 @@ JavaScript では、オブジェクトはプロパティの集合として見る
 
 キーを、値を取り出したり保存したりするための 1 つまたは 2 つのアクセサー関数 (`get` および `set`) と関連づけるものです。
 
-> **メモ:** アクセサー _プロパティ_ であり、アクセサー _メソッド_ ではないことを認識することが重要です。関数を値として用いることで、JavaScript オブジェクトにクラスのようなアクセサーを表すことができますが、それはオブジェクトをクラスにするわけではありません。
+> [!NOTE]
+> アクセサー _プロパティ_ であり、アクセサー _メソッド_ ではないことを認識することが重要です。関数を値として用いることで、JavaScript オブジェクトにクラスのようなアクセサーを表すことができますが、それはオブジェクトをクラスにするわけではありません。
 
 アクセサープロパティには、以下の属性があります。
 
diff --git a/files/ja/web/javascript/guide/control_flow_and_error_handling/index.md b/files/ja/web/javascript/guide/control_flow_and_error_handling/index.md
index 1c2decef89d224..e9b99311e12ffc 100644
--- a/files/ja/web/javascript/guide/control_flow_and_error_handling/index.md
+++ b/files/ja/web/javascript/guide/control_flow_and_error_handling/index.md
@@ -36,7 +36,8 @@ while (x < 10) {
 
 ここでは `{ x++; }` がブロック文となります。
 
-> **メモ:** ECMAScript 2015 (6th edition) より前の JavaScript にはブロックスコープが**ありません**。古い JavaScript では、ブロック内で導入された変数のスコープは、そのブロックがある関数やスクリプトになり、それらの変数を設定した影響は、そのブロックを越えて持続します。つまり、*ブロック文はスコープを定義しない*ということです。
+> [!NOTE]
+> ECMAScript 2015 (6th edition) より前の JavaScript にはブロックスコープが**ありません**。古い JavaScript では、ブロック内で導入された変数のスコープは、そのブロックがある関数やスクリプトになり、それらの変数を設定した影響は、そのブロックを越えて持続します。つまり、*ブロック文はスコープを定義しない*ということです。
 >
 > 「単独の」ブロックも正しい構文ですが、C や Java のブロックで提供されるものとは異なる結果をもたらします。例えば、
 >
@@ -136,7 +137,8 @@ if ((x = y)) {
 
 上記以外の—オブジェクトを含む—すべての値は、条件文に渡されると `true` と評価されます。
 
-> **メモ:** プリミティブな真偽値の `true` と `false` を、{{jsxref("Boolean")}} オブジェクトの true や false という値と混同しないでください。
+> [!NOTE]
+> プリミティブな真偽値の `true` と `false` を、{{jsxref("Boolean")}} オブジェクトの true や false という値と混同しないでください。
 >
 > 例:
 >
@@ -263,7 +265,8 @@ throw {
 };
 ```
 
-> **メモ:** 例外を投げる際にオブジェクトを指定することができます。そして、`catch` ブロックでそのオブジェクトのプロパティを参照することができます。
+> [!NOTE]
+> 例外を投げる際にオブジェクトを指定することができます。そして、`catch` ブロックでそのオブジェクトのプロパティを参照することができます。
 
 ```js
 // UserException というオブジェクト型を作成
diff --git a/files/ja/web/javascript/guide/functions/index.md b/files/ja/web/javascript/guide/functions/index.md
index 81b65075551f05..189a576ef074e2 100644
--- a/files/ja/web/javascript/guide/functions/index.md
+++ b/files/ja/web/javascript/guide/functions/index.md
@@ -144,7 +144,8 @@ function square(n) {
 
 関数のスコープは自身が宣言された関数内、あるいは最上位で宣言されたのであればプログラム全体になります。
 
-> **メモ:** この動作は、上記の構文 (すなわち `function funcName(){}`) を用いて関数を定義したときに限ることに注意してください。次のコードは動作しません。
+> [!NOTE]
+> この動作は、上記の構文 (すなわち `function funcName(){}`) を用いて関数を定義したときに限ることに注意してください。次のコードは動作しません。
 >
 > これは、関数の巻き上げが*関数式*ではなく*関数宣言*でしか機能しないことを意味しています。
 >
@@ -484,7 +485,8 @@ var getCode = (function () {
 getCode(); // シークレットコードを返す
 ```
 
-> **メモ:** クロージャを使用する際に注意すべき落とし穴がいくつかあります。
+> [!NOTE]
+> クロージャを使用する際に注意すべき落とし穴がいくつかあります。
 >
 > 取り囲まれている関数で外部スコープの変数と同じ名前の変数を定義した場合、外部スコープにある変数を再び参照する方法がなくなります。 (プログラムが内部スコープを終了するまで、内部スコープ変数は外部変数を「上書き」します。)
 >
@@ -539,7 +541,8 @@ myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
 myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
 ```
 
-> **メモ:** 変数 `arguments` は「配列風の変数」であり、配列ではありません。添字が数値であることと `length` プロパティがあることで、配列風となってはいます。しかし、配列操作のメソッドのすべてを持っているわけではありません。
+> [!NOTE]
+> 変数 `arguments` は「配列風の変数」であり、配列ではありません。添字が数値であることと `length` プロパティがあることで、配列風となってはいます。しかし、配列操作のメソッドのすべてを持っているわけではありません。
 
 さらなる情報については、JavaScript リファレンスの {{jsxref("Function")}} オブジェクトをご覧ください。
 
diff --git a/files/ja/web/javascript/guide/grammar_and_types/index.md b/files/ja/web/javascript/guide/grammar_and_types/index.md
index 747ce1eb8c467f..153616e188eaac 100644
--- a/files/ja/web/javascript/guide/grammar_and_types/index.md
+++ b/files/ja/web/javascript/guide/grammar_and_types/index.md
@@ -25,7 +25,8 @@ JavaScript では、命令は{{Glossary("Statement", "文")}} (statement) と呼
 
 文が単独の行で書かれている場合、文の後にセミコロンは必要ではありません。しかし、行の中に複数の文が必要な場合は、セミコロンで区切る*必要*があります。
 
-> **メモ:** ECMAScript も文末に自動的にセミコロンを挿入するルールがあります ([ASI](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#自動セミコロン挿入))。（詳しくは、JavaScript の [字句文法](/ja/docs/Web/JavaScript/Reference/Lexical_grammar)についての詳細なリファレンスを参照してください。）
+> [!NOTE]
+> ECMAScript も文末に自動的にセミコロンを挿入するルールがあります ([ASI](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#自動セミコロン挿入))。（詳しくは、JavaScript の [字句文法](/ja/docs/Web/JavaScript/Reference/Lexical_grammar)についての詳細なリファレンスを参照してください。）
 
 必須ではないとしても、文の後に常にセミコロンを記述することをお勧めします。これによって、コード中にバグが発生する機会を減らすことができます。
 
@@ -57,7 +58,8 @@ JavaScript のソーステキストは左から右にスキャンされ、_ト
 
 コメントはホワイトスペースのように扱われ、スクリプトの実行から除外されます。
 
-> **メモ:** 一部の JavaScript ファイルの先頭で、`#!/usr/bin/env node` のような第三の種類のコメントを見かけることもあるかもしれません。
+> [!NOTE]
+> 一部の JavaScript ファイルの先頭で、`#!/usr/bin/env node` のような第三の種類のコメントを見かけることもあるかもしれません。
 >
 > これは**ハッシュバンコメント**構文と呼ばれ、スクリプトの実行に使用したい特定の JavaScript エンジンへのパスを指定するのに使用される特殊なコメントです。詳しくは[ハッシュバンコメント](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#ハッシュバンコメント)を参照してください。
 
@@ -299,7 +301,8 @@ z = "37" + 7; // "377"
 
 `parseInt` は整数のみを返すので、小数は切り捨てられます。
 
-> **メモ:** さらに、`parseInt` を使う最も良い方法は、常に基数を引数に含めるようにすることです。基数の引数は使用されている*基数*法を指定するのに使われます。
+> [!NOTE]
+> さらに、`parseInt` を使う最も良い方法は、常に基数を引数に含めるようにすることです。基数の引数は使用されている*基数*法を指定するのに使われます。
 
 ```js
 parseInt("101", 2); // 5
@@ -336,7 +339,8 @@ const coffees = ["French Roast", "Colombian", "Kona"];
 
 最上位のスクリプト内でリテラルを用いて配列を作成した場合、JavaScript は配列リテラルを含む式を評価するたびに配列を解釈します。さらに関数内で使用されたリテラルは、関数が呼び出されるたびに生成されます。
 
-> **メモ:** 配列リテラルは `Array` オブジェクトを生成します。`Array` オブジェクトの詳細は {{jsxref("Array")}} と[インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)をご覧ください。
+> [!NOTE]
+> 配列リテラルは `Array` オブジェクトを生成します。`Array` オブジェクトの詳細は {{jsxref("Array")}} と[インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)をご覧ください。
 
 #### 配列リテラルでの余分なカンマ
 
@@ -397,7 +401,8 @@ const myList = ["home", /* 空 */, "school", /* 空 */, ];
 
 論理型は 2 つのリテラル値、`true` と `false` があります。
 
-> **メモ:** プリミティブの論理型である `true` や `false` と、{{jsxref("Boolean")}} オブジェクトの `true` や `false` という値とを混同してはいけません。
+> [!NOTE]
+> プリミティブの論理型である `true` や `false` と、{{jsxref("Boolean")}} オブジェクトの `true` や `false` という値とを混同してはいけません。
 >
 > Boolean オブジェクトは、プリミティブの論理型のラッパーです。詳細は {{jsxref("Boolean")}} を参照してください。
 
@@ -458,7 +463,8 @@ JavaScript で数値リテラルには、様々な形の整数リテラルと、
 
 オブジェクトリテラルとは、プロパティ名とそれに関連付けられたオブジェクトの値との 0 個以上の組が波括弧 (`{}`) で囲まれたもので作られたリストです。
 
-> **警告:** オブジェクトリテラルを文の先頭で使わないようにしてください。 `{` がブロックの始まりと解釈されるため、エラー（または予期せぬ動作）を引き起こすことになります。
+> [!WARNING]
+> オブジェクトリテラルを文の先頭で使わないようにしてください。 `{` がブロックの始まりと解釈されるため、エラー（または予期せぬ動作）を引き起こすことになります。
 
 以下にオブジェクトリテラルの例を示します。`car` オブジェクトの最初の要素には `myCar` プロパティが定義され、新規文字列 `"Saturn"` が割り当てられています。2 番目の要素、`getCar` プロパティには関数 `(carTypes("Honda"))`; によって呼び出された結果が即座に割り当てられます。3 番目の要素、`special` プロパティには既存の変数 (`sales`) が使われています。
 
diff --git a/files/ja/web/javascript/guide/indexed_collections/index.md b/files/ja/web/javascript/guide/indexed_collections/index.md
index 809e569c9047a1..d64fa964e9cf59 100644
--- a/files/ja/web/javascript/guide/indexed_collections/index.md
+++ b/files/ja/web/javascript/guide/indexed_collections/index.md
@@ -45,7 +45,8 @@ const arr3 = [];
 arr3.length = arrayLength;
 ```
 
-> **メモ:** 上記のコードでは、`arrayLength` は `Number`（数値）である必要があります。さもないと、（指定した値の）単一の要素を持つ配列が生成されます。`arr.length` を呼び出すと `arrayLength` が返されますが、配列には要素が存在していません。この配列で {{jsxref("Statements/for...in","for...in")}} ループを実行しても、配列の要素は返されません。
+> [!NOTE]
+> 上記のコードでは、`arrayLength` は `Number`（数値）である必要があります。さもないと、（指定した値の）単一の要素を持つ配列が生成されます。`arr.length` を呼び出すと `arrayLength` が返されますが、配列には要素が存在していません。この配列で {{jsxref("Statements/for...in","for...in")}} ループを実行しても、配列の要素は返されません。
 
 上記のように新規に定義した変数に割り当てるだけでなく、新規または既存のオブジェクトのプロパティに配列を割り当てることができます。
 
@@ -115,7 +116,8 @@ emp[1] = "Phil Lesh";
 emp[2] = "August West";
 ```
 
-> **メモ:** 上記のコードで配列演算子（角括弧）内に整数ではない値を指定すると、配列要素ではなく配列を表すオブジェクトのプロパティとして作成されます。
+> [!NOTE]
+> 上記のコードで配列演算子（角括弧）内に整数ではない値を指定すると、配列要素ではなく配列を表すオブジェクトのプロパティとして作成されます。
 >
 > ```js
 > const arr = [];
@@ -385,7 +387,8 @@ a.forEach((element) => {
 
 コールバックを受け取る `forEach` メソッド（および下記のもの）は、配列全体を何らかの方法で反復処理するため、_反復処理メソッド_ として知られています。それぞれのメソッドは、オプションで `thisArg` という 2 つ目の引数を取ります。指定された場合、`thisArg`はコールバック関数の本体の中で `this` キーワードの値となります。指定されなかった場合、関数が明示的なオブジェクトコンテキストの外で呼び出される他のケースと同様に、`this` はグローバルオブジェクト（[`window`](/ja/docs/Web/API/Window)、[`globalThis`](/ja/docs/Web/JavaScript/Reference/Global_Objects/globalThis) など）を参照しています。これは関数が[厳格モードでない場合](/ja/docs/Web/JavaScript/Reference/Strict_mode)であり、関数が厳格モードの場合は `undefined` となります。
 
-> **メモ:** 上で紹介した `sort()` メソッドは反復処理メソッドではありません。そのコールバック関数は比較のためにのみ使用され、要素の順序に基づく特定の順序で呼び出されることはないためです。`sort()` は `thisArg` という引数も受け入れません。
+> [!NOTE]
+> 上で紹介した `sort()` メソッドは反復処理メソッドではありません。そのコールバック関数は比較のためにのみ使用され、要素の順序に基づく特定の順序で呼び出されることはないためです。`sort()` は `thisArg` という引数も受け入れません。
 
 [`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) はすべての配列アイテムごとにコールバック関数 `callback` を実行し、返値からなる新しい配列を返します。
 
diff --git a/files/ja/web/javascript/guide/iterators_and_generators/index.md b/files/ja/web/javascript/guide/iterators_and_generators/index.md
index b42d22a703fbaa..c87eed588a019a 100644
--- a/files/ja/web/javascript/guide/iterators_and_generators/index.md
+++ b/files/ja/web/javascript/guide/iterators_and_generators/index.md
@@ -70,7 +70,8 @@ while (!result.done) {
 console.log("Iterated over sequence of size: ", result.value); // [5 numbers returned, that took interval in between: 0 to 10]
 ```
 
-> **メモ:** 特定のオブジェクトがイテレーターであるかどうかは考えても知ることはできません。それが必要な場合は、[反復可能オブジェクト](#Iterables)を使用してください。
+> [!NOTE]
+> 特定のオブジェクトがイテレーターであるかどうかは考えても知ることはできません。それが必要な場合は、[反復可能オブジェクト](#Iterables)を使用してください。
 
 ## ジェネレーター関数
 
diff --git a/files/ja/web/javascript/guide/modules/index.md b/files/ja/web/javascript/guide/modules/index.md
index 3db62406a67b91..b7508464834833 100644
--- a/files/ja/web/javascript/guide/modules/index.md
+++ b/files/ja/web/javascript/guide/modules/index.md
@@ -29,7 +29,8 @@ JavaScript のプログラムはとても小さいものから始まりました
 
 このような機能はあまり役に立ちませんが、モジュールの説明が明確になるように意図的に単純にしています。
 
-> **メモ:** 使用例をダウンロードしてローカル実行する場合、ローカルのウェブサーバー上で実行する必要があります。
+> [!NOTE]
+> 使用例をダウンロードしてローカル実行する場合、ローカルのウェブサーバー上で実行する必要があります。
 
 ## 基本的な構造の例
 
@@ -43,7 +44,8 @@ modules/
     square.js
 ```
 
-> **メモ:** このガイドの使用例のファイル構造は、全て基本的に同一ですので、上記のファイル構造をよく見ることになるでしょう。
+> [!NOTE]
+> このガイドの使用例のファイル構造は、全て基本的に同一ですので、上記のファイル構造をよく見ることになるでしょう。
 
 modules ディレクトリーには、次の 2 つのモジュールがあります。
 
@@ -132,7 +134,8 @@ import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";
 
 このような書き方の動作している例は [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/basic-modules/main.js) にあります。
 
-> **メモ:** モジュールシステムの中には、相対パスでも絶対パスでもなく、ファイル拡張子もない `modules/square` のようなモジュール指定を使用するものがあります。
+> [!NOTE]
+> モジュールシステムの中には、相対パスでも絶対パスでもなく、ファイル拡張子もない `modules/square` のようなモジュール指定を使用するものがあります。
 > このような指定子は、最初に[インポートマップ](#importing_modules_using_import_maps)を定義しておけば、ブラウザー環境でも使用できます。
 
 スクリプトへ機能をインポートすると、同じファイル内で定義されているのと同じように使うことができます。次のコードは、`main.js` でインポートに続く部分です。
@@ -146,7 +149,8 @@ reportArea(square1.length, reportList);
 reportPerimeter(square1.length, reportList);
 ```
 
-> **メモ:** インポートされた値は、エクスポートされた機能の読み取り専用ビューとなります。`const` 変数と同様に、インポートされた変数を再代入することはできませんが、オブジェクト値のプロパティを変更することは可能です。値を再代入することができるのは、その値をエクスポートしているモジュールだけです。例として、[`import` のリファレンス](/ja/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter) を参照してください。
+> [!NOTE]
+> インポートされた値は、エクスポートされた機能の読み取り専用ビューとなります。`const` 変数と同様に、インポートされた変数を再代入することはできませんが、オブジェクト値のプロパティを変更することは可能です。値を再代入することができるのは、その値をエクスポートしているモジュールだけです。例として、[`import` のリファレンス](/ja/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter) を参照してください。
 
 ## インポートマップを使用したモジュールのインポート
 
@@ -258,7 +262,8 @@ import { name as squareName, draw } from "square";
 これにより、インポート URL の集合全体を、ある場所から別の場所に再マッピングすることができます。
 また、Node の環境で見られるような「パッケージとモジュール」の作業をエミュレートするために使用することもできます。
 
-> **メモ:** 末尾の `/` は、モジュール指定子キーがモジュール指定子の一部として指定することができることを示します。
+> [!NOTE]
+> 末尾の `/` は、モジュール指定子キーがモジュール指定子の一部として指定することができることを示します。
 > これが存在しない場合、ブラウザーはモジュール指定子キー全体にのみ一致します（置換します）。
 
 #### モジュールのパッケージ
@@ -303,7 +308,8 @@ Node のような環境では、モジュールとその依存関係を管理す
 パッケージマネージャーは、各モジュールが他のモジュールやその依存関係から確実に区切られるようにします。
 その結果、複雑なアプリケーションでは、モジュールグラフの異なる部分に複数の異なるバージョンで同じモジュールを複数回記載することができますが、ユーザーはこの複雑さについて考える必要はありません。
 
-> **メモ:** 相対パスを使用してバージョン管理を行うこともできますが、この方法は他にも、自分のプロジェクトに特定の構造を強制し、素のモジュール名を使用することができないなどの点で劣ります。
+> [!NOTE]
+> 相対パスを使用してバージョン管理を行うこともできますが、この方法は他にも、自分のプロジェクトに特定の構造を強制し、素のモジュール名を使用することができないなどの点で劣ります。
 
 インポートマップも同様に、アプリケーションに複数のバージョンの依存関係を保有し、同じモジュール指定子を使用してそれらを参照することができます。
 これを実装するために `scopes` キーを使用します。このキーでは、インポートを実行するスクリプトのパスに応じて使用されるモジュール指定子マップを提供することができます。
@@ -447,7 +453,8 @@ import randomSquare from "./modules/square.js";
 import { default as randomSquare } from "./modules/square.js";
 ```
 
-> **メモ:** エクスポートされる項目の名前を変更するために使われる as の文法については、以下の [Renaming imports and exports](#renaming_imports_and_exports) セクションで説明します。
+> [!NOTE]
+> エクスポートされる項目の名前を変更するために使われる as の文法については、以下の [Renaming imports and exports](#renaming_imports_and_exports) セクションで説明します。
 
 ## 名前の衝突を避ける
 
@@ -694,7 +701,8 @@ import("./modules/myModule.js").then((module) => {
 });
 ```
 
-> **メモ:** 動的インポートは、ブラウザー のメインスレッド、共有ワーカー、専用ワーカーで許可されています。
+> [!NOTE]
+> 動的インポートは、ブラウザー のメインスレッド、共有ワーカー、専用ワーカーで許可されています。
 > しかし、サービスワーカーやワークレットで `import()` を呼び出すと、例外が発生します。
 
 <!-- https://whatpr.org/html/6395/webappapis.html#hostimportmoduledynamically(referencingscriptormodule,-specifier,-promisecapability) -->
diff --git a/files/ja/web/javascript/guide/regular_expressions/cheatsheet/index.md b/files/ja/web/javascript/guide/regular_expressions/cheatsheet/index.md
index a393c0badb4c99..c676ab6bcab140 100644
--- a/files/ja/web/javascript/guide/regular_expressions/cheatsheet/index.md
+++ b/files/ja/web/javascript/guide/regular_expressions/cheatsheet/index.md
@@ -471,7 +471,8 @@ l10n:
 
 [数量詞](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers)は、一致する文字や表現の数を示します。
 
-> **メモ:** 以下の表の中で、*アイテム*は単一の文字だけでなく、[文字クラス](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes)、[Unicode プロパティエスケープ](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes)、[グループと後方参照](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Backreferences)を示すこともあります。
+> [!NOTE]
+> 以下の表の中で、*アイテム*は単一の文字だけでなく、[文字クラス](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes)、[Unicode プロパティエスケープ](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes)、[グループと後方参照](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Backreferences)を示すこともあります。
 
 <table class="standard-table">
   <thead>
@@ -615,4 +616,5 @@ l10n:
 - `UnicodePropertyValue`
   - : 下記の「値」の節に掲載されているトークンの 1 つです。多くの値には、別名や短縮形があります（例えば `General_Category` プロパティの値 `Decimal_Number` は `Nd`, `digit`, `Decimal_Number` と書くことができます）。ほとんどの値では、 `UnicodePropertyName` の部分と等号を省略することができます。 `UnicodePropertyName` を指定した場合、その値は指定されたプロパティの種類に対応するものでなければなりません。
 
-> **メモ:** 利用できるプロパティと値は膨大であるため、ここでは網羅的に記述することはせず、様々な例を提供することにします。
+> [!NOTE]
+> 利用できるプロパティと値は膨大であるため、ここでは網羅的に記述することはせず、様々な例を提供することにします。
diff --git a/files/ja/web/javascript/guide/regular_expressions/index.md b/files/ja/web/javascript/guide/regular_expressions/index.md
index 318eb8fbf93fef..4707358eb46695 100644
--- a/files/ja/web/javascript/guide/regular_expressions/index.md
+++ b/files/ja/web/javascript/guide/regular_expressions/index.md
@@ -39,7 +39,8 @@ JavaScript では、正規表現はオブジェクトでもあります。これ
 最後の例には記憶装置として用いられる丸括弧があります。
 パターンのこの部分に一致した箇所は、後で使用できるように記憶されます。詳しくは[グループの使用](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Backreferences#using_groups)を参照してください。
 
-> **メモ:** すでに正規表現の形式に慣れている方は、[早見表](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet)を見て特定のパターンや構造を素早く検索することもできます。
+> [!NOTE]
+> すでに正規表現の形式に慣れている方は、[早見表](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet)を見て特定のパターンや構造を素早く検索することもできます。
 
 ### 単純なパターンの使い方
 
@@ -412,7 +413,8 @@ Unicode の正規表現は、同様に異なる動作をします。 [`RegExp.pr
 
 ## 例
 
-> **メモ:** 複数の例が次の場所にあります。
+> [!NOTE]
+> 複数の例が次の場所にあります。
 >
 > - {{jsxref("RegExp/exec", "exec()")}}、{{jsxref("RegExp/test", "test()")}}、{{jsxref("String/match", "match()")}}、{{jsxref("String/matchAll", "matchAll()")}}、{{jsxref("String/search", "search()")}}、{{jsxref("String/replace", "replace()")}}、{{jsxref("String/split", "split()")}} のリファレンスページ
 > - ガイド記事の[文字クラス](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes)、[アサーション](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions)、[グループと後方参照](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Backreferences)、[数量詞](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers)、[Unicode プロパティエスケープ](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes)
diff --git a/files/ja/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/ja/web/javascript/guide/regular_expressions/quantifiers/index.md
index a9663f0db4b860..32c7d267281079 100644
--- a/files/ja/web/javascript/guide/regular_expressions/quantifiers/index.md
+++ b/files/ja/web/javascript/guide/regular_expressions/quantifiers/index.md
@@ -13,7 +13,8 @@ l10n:
 
 ## 種類
 
-> **メモ:** 以下の表の中で、*アイテム*は単一の文字だけでなく、[文字クラス](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes)、[Unicode プロパティエスケープ](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes)、[グループと後方参照](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Backreferences)を示すこともあります。
+> [!NOTE]
+> 以下の表の中で、*アイテム*は単一の文字だけでなく、[文字クラス](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes)、[Unicode プロパティエスケープ](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes)、[グループと後方参照](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Backreferences)を示すこともあります。
 
 <table class="standard-table">
   <thead>
diff --git a/files/ja/web/javascript/guide/typed_arrays/index.md b/files/ja/web/javascript/guide/typed_arrays/index.md
index 4ea838928b9de8..820f6526d89a7c 100644
--- a/files/ja/web/javascript/guide/typed_arrays/index.md
+++ b/files/ja/web/javascript/guide/typed_arrays/index.md
@@ -143,7 +143,8 @@ const amountDueView = new Float32Array(buffer, 20, 1);
 
 例えば、合計金額には `amountDueView[0]` でアクセスできます。
 
-> **メモ:** C 構造体における[データ構造の配置](http://ja.wikipedia.org/wiki/データ構造アライメント)は機種依存です。これらのデータ埋め込みの違いに注意および配慮してください。
+> [!NOTE]
+> C 構造体における[データ構造の配置](http://ja.wikipedia.org/wiki/データ構造アライメント)は機種依存です。これらのデータ埋め込みの違いに注意および配慮してください。
 
 ### 通常の配列への変換
 
diff --git a/files/ja/web/javascript/guide/using_classes/index.md b/files/ja/web/javascript/guide/using_classes/index.md
index 208f73a20a02aa..2c00f539169aab 100644
--- a/files/ja/web/javascript/guide/using_classes/index.md
+++ b/files/ja/web/javascript/guide/using_classes/index.md
@@ -101,7 +101,8 @@ MyClass.prototype.myMethod = function () {
 })();
 ```
 
-> **メモ:** プライベートフィールドとメソッドは、クラスにおける新しい機能であり、関数コンストラクターにおける同等の機能はありません。
+> [!NOTE]
+> プライベートフィールドとメソッドは、クラスにおける新しい機能であり、関数コンストラクターにおける同等の機能はありません。
 
 ### クラスの構築
 
@@ -418,7 +419,8 @@ class Color {
 }
 ```
 
-> **メモ:** このとき、`#` は特殊な識別子構文であり、フィールド名を文字列のように使用することはできないことに留意してください。`"#values" in anotherColor` は、プライベートフィールドではなく、文字通り `"#values"` というプロパティ名を探していくことになります。
+> [!NOTE]
+> このとき、`#` は特殊な識別子構文であり、フィールド名を文字列のように使用することはできないことに留意してください。`"#values" in anotherColor` は、プライベートフィールドではなく、文字通り `"#values"` というプロパティ名を探していくことになります。
 
 プライベートプロパティを使用するには、いくつかの制限があります。同じ名前を単一のクラスで 2 回宣言することはできませんし、削除することもできません。どちらも初期の構文エラーにつながります。
 
@@ -536,7 +538,8 @@ class MyClass {
 
 `Date` の例では、現在の日付を返す [`Date.now()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/now) メソッドにも遭遇しています。このメソッドは Date のインスタンスに属するものではなく、クラスそのものに属するものです。しかし、Dateインスタンスを扱うときに有益なメソッドであるため、グローバルな `DateNow()` 関数として公開するのではなく、`Date` クラスに搭載しています。
 
-> **メモ:** ユーティリティメソッドの接頭辞に、そのメソッドが扱うものを付けることは「名前空間化」と呼ばれ、良い習慣とされています。例えば、JavaScript では、古い接頭辞のない [`parseInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt) メソッドに加え、後から、数字を扱うためのメソッドであることを示すために [`Number.parseInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) メソッドが追加されました。
+> [!NOTE]
+> ユーティリティメソッドの接頭辞に、そのメソッドが扱うものを付けることは「名前空間化」と呼ばれ、良い習慣とされています。例えば、JavaScript では、古い接頭辞のない [`parseInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt) メソッドに加え、後から、数字を扱うためのメソッドであることを示すために [`Number.parseInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) メソッドが追加されました。
 
 [静的プロパティ](/ja/docs/Web/JavaScript/Reference/Classes/static)は、クラスの個々のインスタンスではなく、クラス自体に定義されるクラス機能のグループです。これらの機能には、次のようなものがあります。
 
diff --git a/files/ja/web/javascript/guide/using_promises/index.md b/files/ja/web/javascript/guide/using_promises/index.md
index d26debcda52309..148d3095169e00 100644
--- a/files/ja/web/javascript/guide/using_promises/index.md
+++ b/files/ja/web/javascript/guide/using_promises/index.md
@@ -204,7 +204,8 @@ Do that
 Do this, no matter what happened before
 ```
 
-> **メモ:** "Do this" のテキストは "Something failed" エラーが拒否をを引き起こしたため出力されないことに注意してください。
+> [!NOTE]
+> "Do this" のテキストは "Something failed" エラーが拒否をを引き起こしたため出力されないことに注意してください。
 
 ## よくある間違い
 
diff --git a/files/ja/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/ja/web/javascript/inheritance_and_the_prototype_chain/index.md
index a5f02e5f04177d..0c37b4fb691039 100644
--- a/files/ja/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/ja/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -21,7 +21,8 @@ JavaScript は動的であり、固定的な型がないことから、クラス
 
 JavaScript のオブジェクトはプロパティ（**自身のプロパティ**を指す）の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。
 
-> **メモ:** ECMAScript 標準に従い、 `someObject.[[Prototype]]` という表記を `someObject` のプロトタイプを示すのに使用しています。内部スロット `[[Prototype]]` には {{jsxref("Object.getPrototypeOf()")}} と {{jsxref("Object.setPrototypeOf()")}} 関数でアクセスすることができます。これは、標準ではないが、多くのJavaScriptエンジンで事実上実装されている JavaScript のアクセサー [`__proto__`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) と同等のものです。混乱を避けつつ簡潔にするために、ここでは `obj.__proto__` の使用を避け、代わりに `obj.[[Prototype]]` を使用することにします。これは `Object.getPrototypeOf(obj)` に対応するものです。
+> [!NOTE]
+> ECMAScript 標準に従い、 `someObject.[[Prototype]]` という表記を `someObject` のプロトタイプを示すのに使用しています。内部スロット `[[Prototype]]` には {{jsxref("Object.getPrototypeOf()")}} と {{jsxref("Object.setPrototypeOf()")}} 関数でアクセスすることができます。これは、標準ではないが、多くのJavaScriptエンジンで事実上実装されている JavaScript のアクセサー [`__proto__`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) と同等のものです。混乱を避けつつ簡潔にするために、ここでは `obj.__proto__` の使用を避け、代わりに `obj.[[Prototype]]` を使用することにします。これは `Object.getPrototypeOf(obj)` に対応するものです。
 >
 > これを関数の `func.prototype` プロパティと混同してはいけません。このプロパティは、指定された関数がコンストラクターとして使用されたときに作成されるオブジェクトのすべての「インスタンス」に割り当てられる `[[Prototype]]` を指定します。コンストラクター関数の `prototype` プロパティについては、[後の節](#コンストラクター)で説明します。
 
@@ -193,7 +194,8 @@ const boxes = [new Box(1), new Box(2), new Box(3)];
 
 `new Box(1)` は `Box` コンストラクター関数から生成された「インスタンス」と言います。 `Box.prototype` は前回作成した `boxPrototype` オブジェクトと大きな違いはなく、ただのオブジェクトです。コンストラクター関数から作成されたインスタンスは、自動的にコンストラクターの [`prototype`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) プロパティを `[[Prototype]]` として保有します。つまり、 `Object.getPrototypeOf(new Box()) === Box.prototype` となります。 `Constructor.prototype` は既定で [`constructor`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) という自身のプロパティを 1 つ持ち、これがコンストラクター関数自身を参照します。つまり、 `Box.prototype.constructor === Box` になります。これにより、あらゆるインスタンスから元のコンストラクターにアクセスできるようになります。
 
-> **メモ:** コンストラクター関数からプリミティブでない値が返された場合、その値が `new` 式の結果となります。この場合、`[[Prototype]]`は正しく結び付けられていないかもしれませんが、実際にはあまり起こらないはずです。
+> [!NOTE]
+> コンストラクター関数からプリミティブでない値が返された場合、その値が `new` 式の結果となります。この場合、`[[Prototype]]`は正しく結び付けられていないかもしれませんが、実際にはあまり起こらないはずです。
 
 上記のコンストラクター関数は、[クラス](/ja/docs/Web/JavaScript/Reference/Classes)で書き直すことができます。
 
@@ -265,7 +267,8 @@ const regexp = new RegExp("abc");
 
 例えば、 [`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) のような「配列のメソッド」は、単に `Array.prototype` で定義されたメソッドであり、そのため、すべての配列のインスタンスで自動的に利用することができます。
 
-> **警告:** かつて使用されていた誤った使い方が 1 つあります。 `Object.prototype` または他の組み込みプロトタイプのいずれかを拡張することです。この誤った使い方の例として、`Array.prototype.myMethod = function () {...}` を定義して、すべての配列インスタンスで `myMethod` できるようにするというものがあります。
+> [!WARNING]
+> かつて使用されていた誤った使い方が 1 つあります。 `Object.prototype` または他の組み込みプロトタイプのいずれかを拡張することです。この誤った使い方の例として、`Array.prototype.myMethod = function () {...}` を定義して、すべての配列インスタンスで `myMethod` できるようにするというものがあります。
 >
 > この誤った使い方は、「モンキーパッチ」と呼ばれています。モンキーパッチは前方互換性を損なう危険性があり、将来、言語がこのメソッドを別のシグネチャで追加した場合、コードが壊れてしまうからです。 [SmooshGate](https://developer.chrome.com/blog/smooshgate/) のような事件を引き起こし、 JavaScript が「ウェブを壊さない」ようにしようとするため、言語の進歩にとって非常に厄介な存在となりえます。
 >
@@ -367,7 +370,8 @@ console.log(doSomethingFromArrowFunction.prototype);
 }
 ```
 
-> **メモ:** Chrome のコンソールでは、 `[[Prototype]]` を使用してオブジェクトのプロトタイプを示しており、仕様の用語に従っています。Firefoxでは `<prototype>` を使用しています。一貫性を保つために、ここでは `[[Prototype]]` を使用します。
+> [!NOTE]
+> Chrome のコンソールでは、 `[[Prototype]]` を使用してオブジェクトのプロトタイプを示しており、仕様の用語に従っています。Firefoxでは `<prototype>` を使用しています。一貫性を保つために、ここでは `[[Prototype]]` を使用します。
 
 以下のように、 `doSomething()` のプロトタイプにプロパティを追加することができます。
 
diff --git a/files/ja/web/javascript/memory_management/index.md b/files/ja/web/javascript/memory_management/index.md
index a4a2323d1db86f..94ad3b2801115d 100644
--- a/files/ja/web/javascript/memory_management/index.md
+++ b/files/ja/web/javascript/memory_management/index.md
@@ -101,7 +101,8 @@ const a3 = a.concat(a2);
 
 ### 参照カウントのガベージコレクション
 
-> **メモ:** 現代のブラウザーで、ガベージコレクションに参照カウントを使用しているものはもうありません。
+> [!NOTE]
+> 現代のブラウザーで、ガベージコレクションに参照カウントを使用しているものはもうありません。
 
 これは、最も素朴なガベージコレクションアルゴリズムです。このアルゴリズムは、「あるオブジェクトが必要なくなった」ことを、「あるオブジェクトがその他のオブジェクトから参照されていない」ことと定義します。あるオブジェクトは、それに対する参照がゼロの時にガベージコレクション可能であると見なされます。
 
@@ -215,7 +216,8 @@ wm.set(key, { key });
 
 大まかなメンタルモデルとして、`WeakMap` は以下のような実装だと考えてください。
 
-> **警告:** これはポリフィルではなく、エンジンで実装されている方法（ガベージコレクション機構にフックしている）にも近いものです。
+> [!WARNING]
+> これはポリフィルではなく、エンジンで実装されている方法（ガベージコレクション機構にフックしている）にも近いものです。
 
 ```js
 class MyWeakMap {
diff --git a/files/ja/web/javascript/reference/classes/constructor/index.md b/files/ja/web/javascript/reference/classes/constructor/index.md
index 6c88c6862648ec..90536a7019e29c 100644
--- a/files/ja/web/javascript/reference/classes/constructor/index.md
+++ b/files/ja/web/javascript/reference/classes/constructor/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`constructor`** メソッドは、[クラス](/ja/docs/Web/JavaScript/Reference/Classes)で作成されたオブジェクトインスタンスの生成と初期化を行うための特殊なメソッドです。
 
-> **メモ:** このページでは `constructor` の構文を紹介します。すべてのオブジェクトに存在する `constructor` プロパティについては、 {{jsxref("Object.prototype.constructor")}} を参照してください。
+> [!NOTE]
+> このページでは `constructor` の構文を紹介します。すべてのオブジェクトに存在する `constructor` プロパティについては、 {{jsxref("Object.prototype.constructor")}} を参照してください。
 
 {{EmbedInteractiveExample("pages/js/classes-constructor.html")}}
 
@@ -61,7 +62,8 @@ constructor(...args) {
 }
 ```
 
-> **メモ:** 上記のような明示的なコンストラクターと既定のコンストラクターの異なる点は、後者が実際には[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)を呼び出して[引数のスプレッド](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を行わないことです。
+> [!NOTE]
+> 上記のような明示的なコンストラクターと既定のコンストラクターの異なる点は、後者が実際には[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)を呼び出して[引数のスプレッド](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を行わないことです。
 
 それがこのようなコードを動作させることができます。
 
diff --git a/files/ja/web/javascript/reference/classes/extends/index.md b/files/ja/web/javascript/reference/classes/extends/index.md
index 28a6ad3b43ea60..26727bf0183508 100644
--- a/files/ja/web/javascript/reference/classes/extends/index.md
+++ b/files/ja/web/javascript/reference/classes/extends/index.md
@@ -120,7 +120,8 @@ console.log(new ChildClass()); // TypeError: Derived constructors may only retur
 
 ### 組み込みクラスのサブクラス化
 
-> **警告:** 標準化委員会は、これまでの仕様にあった組み込みクラスにおけるサブクラス化メカニズムは過剰に設計されており、パフォーマンスとセキュリティへの無視できない影響を発生させているという見解を固めました。新しい組み込みメソッドはサブクラスについてあまり考慮されておらず、エンジンの実装者は[一部のサブクラス化メカニズムを除去するかどうか調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。組み込みクラスを拡張する際には、継承の代わりにコンポジションを使用することを検討してください。
+> [!WARNING]
+> 標準化委員会は、これまでの仕様にあった組み込みクラスにおけるサブクラス化メカニズムは過剰に設計されており、パフォーマンスとセキュリティへの無視できない影響を発生させているという見解を固めました。新しい組み込みメソッドはサブクラスについてあまり考慮されておらず、エンジンの実装者は[一部のサブクラス化メカニズムを除去するかどうか調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。組み込みクラスを拡張する際には、継承の代わりにコンポジションを使用することを検討してください。
 
 クラスを拡張する際に期待されることをいくつか示します。
 
diff --git a/files/ja/web/javascript/reference/classes/index.md b/files/ja/web/javascript/reference/classes/index.md
index d55bf0ae9dc698..274fa9eeb4108e 100644
--- a/files/ja/web/javascript/reference/classes/index.md
+++ b/files/ja/web/javascript/reference/classes/index.md
@@ -72,7 +72,8 @@ const Rectangle = class Rectangle2 {
 - [プライベートプロパティ](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)
   - : プライベートなものすべて
 
-> **メモ:** プライベート機能には、同じクラスで宣言するプロパティ名はすべて固有のものでなければならないという制約があります。他のすべてのパブリックプロパティにはこの制限はなく、同じ名前の複数のパブリックプロパティを持つことができ、最後のプロパティが他のプロパティを上書きします。これは[オブジェクト初期化子](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#重複したプロパティ名)での処理と同じです。
+> [!NOTE]
+> プライベート機能には、同じクラスで宣言するプロパティ名はすべて固有のものでなければならないという制約があります。他のすべてのパブリックプロパティにはこの制限はなく、同じ名前の複数のパブリックプロパティを持つことができ、最後のプロパティが他のプロパティを上書きします。これは[オブジェクト初期化子](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#重複したプロパティ名)での処理と同じです。
 
 さらに、特別なクラス要素の構文として、 [`constructor`](#コンストラクター) と[静的初期化ブロック](#静的初期化ブロック)の 2 つがあり、自分自身で参照します。
 
diff --git a/files/ja/web/javascript/reference/classes/private_properties/index.md b/files/ja/web/javascript/reference/classes/private_properties/index.md
index 9334debf3922f7..c9c848b0b47714 100644
--- a/files/ja/web/javascript/reference/classes/private_properties/index.md
+++ b/files/ja/web/javascript/reference/classes/private_properties/index.md
@@ -71,7 +71,8 @@ instance.#privateField; // Syntax error
 
 JavaScript は動的言語ですが、ハッシュ識別子の構文が特殊であり、構文レベルで通常のプロパティとは異なるため、このコンパイル時チェックを行うことができます。
 
-> **メモ:** Chrome コンソールで実行するコードは、クラス外からプライベートプロパティにアクセスすることができます。これは JavaScript の構文制限を開発者ツール限定で緩和したものです。
+> [!NOTE]
+> Chrome コンソールで実行するコードは、クラス外からプライベートプロパティにアクセスすることができます。これは JavaScript の構文制限を開発者ツール限定で緩和したものです。
 
 プロパティを持っていないオブジェクトからプライベートプロパティにアクセスすると、通常のプロパティのように `undefined` を返すのではなく、{{jsxref("TypeError")}} が発生します。
 
@@ -150,7 +151,8 @@ class Subclass extends ClassWithPrivateField {
 new Subclass(); // 開発者ツールでは Subclass {#privateField: 42, #subPrivateField: 23} と表示
 ```
 
-> **メモ:** 基底クラス `ClassWithPrivateField` の `#privateField` は `ClassWithPrivateField` のプライベートメンバーであり、派生クラス `Subclass` からはアクセスできません。
+> [!NOTE]
+> 基底クラス `ClassWithPrivateField` の `#privateField` は `ClassWithPrivateField` のプライベートメンバーであり、派生クラス `Subclass` からはアクセスできません。
 
 #### オーバーライドしたオブジェクトの返却
 
@@ -184,7 +186,8 @@ console.log(obj instanceof Stamper); // false
 new Stamper(obj); // Error: Initializing an object twice is an error with private fields
 ```
 
-> **警告:** これはとても混乱を招きかねないことです。一般的に、コンストラクターから任意のものを返すのは避けるようにしましょう。特に `this` に関係のないものを返すのは避けるようにしましょう。
+> [!WARNING]
+> これはとても混乱を招きかねないことです。一般的に、コンストラクターから任意のものを返すのは避けるようにしましょう。特に `this` に関係のないものを返すのは避けるようにしましょう。
 
 ### プライベート静的フィールド
 
diff --git a/files/ja/web/javascript/reference/classes/public_class_fields/index.md b/files/ja/web/javascript/reference/classes/public_class_fields/index.md
index 373bd61433ff95..0ed7c811640c16 100644
--- a/files/ja/web/javascript/reference/classes/public_class_fields/index.md
+++ b/files/ja/web/javascript/reference/classes/public_class_fields/index.md
@@ -142,7 +142,8 @@ console.log(instance.d); // 3
 console.log(instance.b); // undefined
 ```
 
-> **メモ:** これは[プライベートフィールド](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)ではより重要です。初期化されていないプライベートフィールドにアクセスすると、たとえプライベートフィールドが下記で宣言されていても {{jsxref("TypeError")}} が発生するからです。（プライベートフィールドが宣言されていない場合は、早期に {{jsxref("SyntaxError")}} となります。）
+> [!NOTE]
+> これは[プライベートフィールド](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)ではより重要です。初期化されていないプライベートフィールドにアクセスすると、たとえプライベートフィールドが下記で宣言されていても {{jsxref("TypeError")}} が発生するからです。（プライベートフィールドが宣言されていない場合は、早期に {{jsxref("SyntaxError")}} となります。）
 
 クラスフィールドは [`[[DefineOwnProperty]]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty) の意味づけ（本質的には {{jsxref("Object.defineProperty()")}}）を使用して追加されるため、派生クラスのフィールド宣言は基底クラスのセッターを呼び出すことはありません。この動作は、コンストラクターで `this.field = …` を使用するのとは異なります。
 
@@ -169,7 +170,8 @@ class DerivedWithConstructor extends Base {
 const instance2 = new DerivedWithConstructor(); // Logs 1
 ```
 
-> **メモ:** クラスフィールドの仕様が最終的に `[[DefineOwnProperty]]` の意味づけで決定される以前は、 [Babel](https://babeljs.io/) や [tsc](https://www.typescriptlang.org/) を含むほとんどのトランスパイラーはクラスフィールドを `DerivedWithConstructor` 形式に変換しており、クラスフィールドが標準化された後に微妙なバグが発生していました。
+> [!NOTE]
+> クラスフィールドの仕様が最終的に `[[DefineOwnProperty]]` の意味づけで決定される以前は、 [Babel](https://babeljs.io/) や [tsc](https://www.typescriptlang.org/) を含むほとんどのトランスパイラーはクラスフィールドを `DerivedWithConstructor` 形式に変換しており、クラスフィールドが標準化された後に微妙なバグが発生していました。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/classes/static/index.md b/files/ja/web/javascript/reference/classes/static/index.md
index 74b5df42588e14..e733875b1e17d7 100644
--- a/files/ja/web/javascript/reference/classes/static/index.md
+++ b/files/ja/web/javascript/reference/classes/static/index.md
@@ -9,7 +9,8 @@ slug: Web/JavaScript/Reference/Classes/static
 
 静的メソッドは多くの場合、オブジェクトの生成や複製を行う関数などのユーティリティ関数です。静的プロパティはキャッシュ、固定的な構成、その他の各インスタンスに複製する必要のないデータです。
 
-> **メモ:** クラスの文脈において、 MDN Web Docs のコンテンツではプロパティと[フィールド](/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields)という用語を同等のものとして使用しています。
+> [!NOTE]
+> クラスの文脈において、 MDN Web Docs のコンテンツではプロパティと[フィールド](/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields)という用語を同等のものとして使用しています。
 
 {{EmbedInteractiveExample("pages/js/classes-static.html", "taller")}}
 
@@ -86,7 +87,8 @@ console.log(SubClassWithStaticField.subStaticField); // "基底クラスの静
 
 静的フィールド初期化子と[静的初期化ブロック](/ja/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks)は、 1 つずつ評価されます。フィールド初期化子は、それより上のフィールド値を参照することはできますが、それより下のフィールド値を参照することはできません。静的メソッドはすべて事前に追加され、アクセスすることができますが、初期化されるフィールドより下のフィールドを参照している場合、呼び出すと期待した動作をしないことがあります。
 
-> **メモ:** これは[プライベート静的フィールド](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)ではより重要です。初期化されていないプライベートフィールドにアクセスすると、たとえそのプライベートフィールドが下で宣言されていたとしても、 {{jsxref("TypeError")}} が発生するからです。（プライベートフィールドが宣言されていない場合は、早期に {{jsxref("SyntaxError")}} となります。）
+> [!NOTE]
+> これは[プライベート静的フィールド](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)ではより重要です。初期化されていないプライベートフィールドにアクセスすると、たとえそのプライベートフィールドが下で宣言されていたとしても、 {{jsxref("TypeError")}} が発生するからです。（プライベートフィールドが宣言されていない場合は、早期に {{jsxref("SyntaxError")}} となります。）
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/classes/static_initialization_blocks/index.md b/files/ja/web/javascript/reference/classes/static_initialization_blocks/index.md
index c26790715832fb..23ad67274163f5 100644
--- a/files/ja/web/javascript/reference/classes/static_initialization_blocks/index.md
+++ b/files/ja/web/javascript/reference/classes/static_initialization_blocks/index.md
@@ -67,7 +67,8 @@ console.log(y); // 'Outer y'
 
 [静的フィールド](/ja/docs/Web/JavaScript/Reference/Classes/static)初期化子と静的初期化ブロックは、 1 つずつ評価されます。フィールド初期化子は、それより上のフィールド値を参照することはできますが、それより下のフィールド値を参照することはできません。静的メソッドはすべて事前に追加され、アクセスすることができますが、初期化されるフィールドより下のフィールドを参照している場合、呼び出すと期待した動作をしないことがあります。
 
-> **メモ:** これは[プライベート静的フィールド](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)ではより重要です。初期化されていないプライベートフィールドにアクセスすると、たとえそのプライベートフィールドが下で宣言されていたとしても、 {{jsxref("TypeError")}} が発生するからです。（プライベートフィールドが宣言されていない場合は、早期に {{jsxref("SyntaxError")}} となります。）
+> [!NOTE]
+> これは[プライベート静的フィールド](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)ではより重要です。初期化されていないプライベートフィールドにアクセスすると、たとえそのプライベートフィールドが下で宣言されていたとしても、 {{jsxref("TypeError")}} が発生するからです。（プライベートフィールドが宣言されていない場合は、早期に {{jsxref("SyntaxError")}} となります。）
 
 静的初期化ブロックはデコレーターを持つことができません（クラス自身は持つことができます）。
 
diff --git a/files/ja/web/javascript/reference/deprecated_and_obsolete_features/index.md b/files/ja/web/javascript/reference/deprecated_and_obsolete_features/index.md
index 9154684f5c242a..1db3a7a98aa0ec 100644
--- a/files/ja/web/javascript/reference/deprecated_and_obsolete_features/index.md
+++ b/files/ja/web/javascript/reference/deprecated_and_obsolete_features/index.md
@@ -53,7 +53,8 @@ console.log("b");
 | {{jsxref("RegExp.leftContext", "leftContext")}}   | 一番最近の一致に先行する部分文字列。                 |
 | {{jsxref("RegExp.rightContext", "rightContext")}} | 一番最近の一致の後に続く部分文字列。                 |
 
-> **警告:** これらの静的プロパティは、[外部コードと対話する際の問題](https://github.com/tc39/proposal-regexp-legacy-features/blob/master/subclass-restriction-motivation.md#legacy-static-properties-regexp1-etc)を発生させる可能性があるため、使用しないようにしましょう。
+> [!WARNING]
+> これらの静的プロパティは、[外部コードと対話する際の問題](https://github.com/tc39/proposal-regexp-legacy-features/blob/master/subclass-restriction-motivation.md#legacy-static-properties-regexp1-etc)を発生させる可能性があるため、使用しないようにしましょう。
 
 {{jsxref("RegExp/compile", "compile()")}} メソッドは非推奨です。代わりに新しい `RegExp` のインスタンスを構築してください。
 
diff --git a/files/ja/web/javascript/reference/errors/not_defined/index.md b/files/ja/web/javascript/reference/errors/not_defined/index.md
index 11a51d82408371..4babaf31d16dd5 100644
--- a/files/ja/web/javascript/reference/errors/not_defined/index.md
+++ b/files/ja/web/javascript/reference/errors/not_defined/index.md
@@ -21,7 +21,8 @@ ReferenceError: "x" is not defined
 
 どこかで存在しない変数を参照しています。この変数を宣言しておくか、現在のスクリプトまたは[スコープ](/ja/docs/Glossary/Scope)で利用可能であることを確認する必要があります。
 
-> **メモ:** ライブラリ (jQuery など) を読み込むとき、ライブラリの変数、例えば "$" にアクセスする前に読み込みが行われるかを確認してください。ライブラリを読み込む {{HTMLElement("script")}} 要素は、それを使用するコードよりも前に置いてください。
+> [!NOTE]
+> ライブラリ (jQuery など) を読み込むとき、ライブラリの変数、例えば "$" にアクセスする前に読み込みが行われるかを確認してください。ライブラリを読み込む {{HTMLElement("script")}} 要素は、それを使用するコードよりも前に置いてください。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/errors/too_much_recursion/index.md b/files/ja/web/javascript/reference/errors/too_much_recursion/index.md
index 10e4550b9535cf..9261fa4b9c1761 100644
--- a/files/ja/web/javascript/reference/errors/too_much_recursion/index.md
+++ b/files/ja/web/javascript/reference/errors/too_much_recursion/index.md
@@ -90,7 +90,8 @@ set name(name){
 }
 ```
 
-> **メモ:** この例では、セッターが呼び出されたとき、同じことを再度行うように指示されます。*つまり、処理しているのと同じプロパティに設定します。*これにより、関数は何度も何度も自分自身を呼び出し、無限に再帰が行われます。
+> [!NOTE]
+> この例では、セッターが呼び出されたとき、同じことを再度行うように指示されます。*つまり、処理しているのと同じプロパティに設定します。*これにより、関数は何度も何度も自分自身を呼び出し、無限に再帰が行われます。
 
 この問題は同じ変数がゲッターに使用される場合にも発生します。
 
diff --git a/files/ja/web/javascript/reference/functions/arguments/callee/index.md b/files/ja/web/javascript/reference/functions/arguments/callee/index.md
index 39314880d8368d..a2a18f4d2050f5 100644
--- a/files/ja/web/javascript/reference/functions/arguments/callee/index.md
+++ b/files/ja/web/javascript/reference/functions/arguments/callee/index.md
@@ -11,7 +11,8 @@ slug: Web/JavaScript/Reference/Functions/arguments/callee
 
 `callee` は `arguments` オブジェクトのプロパティです。これは、現在実行中の関数を、その関数本体の内部で参照するために使用することができます。これは、名前のない関数式（「無名関数」とも呼ばれる）の中など、関数名が不明な場合に便利です。
 
-> **警告:** ECMAScript 第 5 版では、 `arguments.callee()` を[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)で使用することを禁止しています。関数式に名前を付けるか、関数が自分自身を呼び出すような関数宣言を行うことで、 `arguments.callee()` の使用を避けることができます。
+> [!WARNING]
+> ECMAScript 第 5 版では、 `arguments.callee()` を[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)で使用することを禁止しています。関数式に名前を付けるか、関数が自分自身を呼び出すような関数宣言を行うことで、 `arguments.callee()` の使用を避けることができます。
 
 ### なぜ `arguments.callee` は ES5 厳格モードで削除されたのか
 
diff --git a/files/ja/web/javascript/reference/functions/arguments/index.md b/files/ja/web/javascript/reference/functions/arguments/index.md
index bb94d0505fd81b..cd697b0b52f1d6 100644
--- a/files/ja/web/javascript/reference/functions/arguments/index.md
+++ b/files/ja/web/javascript/reference/functions/arguments/index.md
@@ -11,9 +11,11 @@ slug: Web/JavaScript/Reference/Functions/arguments
 
 ## 解説
 
-> **メモ:** ES6 互換のコードを書く場合は、[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)が推奨されます。
+> [!NOTE]
+> ES6 互換のコードを書く場合は、[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)が推奨されます。
 
-> **メモ:** 「配列風」とは、 `arguments` が {{jsxref("Functions/arguments/length", "length")}} プロパティと 0 から始まる添字のプロパティを持っているものの、 {{JSxRef("Array")}} の組込みメソッド、例えば {{jsxref("Array.forEach", "forEach()")}} や {{jsxref("Array.map", "map()")}} を持っていないということです。詳しくは[解説](#解説)の節を見てください。
+> [!NOTE]
+> 「配列風」とは、 `arguments` が {{jsxref("Functions/arguments/length", "length")}} プロパティと 0 から始まる添字のプロパティを持っているものの、 {{JSxRef("Array")}} の組込みメソッド、例えば {{jsxref("Array.forEach", "forEach()")}} や {{jsxref("Array.map", "map()")}} を持っていないということです。詳しくは[解説](#解説)の節を見てください。
 
 `arguments` オブジェクトはすべての（[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)ではない）関数内で利用可能なローカル変数です。`arguments` オブジェクトを使うことにより、関数内で関数の引数を参照できます。このオブジェクトは、関数に渡された各引数に対する入力を含みます。最初の入力の添字は 0 から始まります。
 
diff --git a/files/ja/web/javascript/reference/functions/arrow_functions/index.md b/files/ja/web/javascript/reference/functions/arrow_functions/index.md
index ab4c45f9904e6f..c6683213b18a86 100644
--- a/files/ja/web/javascript/reference/functions/arrow_functions/index.md
+++ b/files/ja/web/javascript/reference/functions/arrow_functions/index.md
@@ -61,7 +61,8 @@ async (引数1, 引数2, ...引数N) => {
 
 伝統的な無名関数を、最も単純なアロー関数に段階的に分解してみましょう。それぞれの段階も有効なアロー関数です。
 
-> **メモ:** 従来の関数式とアロー関数は、構文以外にも異なる点があります。次のいくつかの節で、その動作の違いを詳しく紹介します。
+> [!NOTE]
+> 従来の関数式とアロー関数は、構文以外にも異なる点があります。次のいくつかの節で、その動作の違いを詳しく紹介します。
 
 ```js-nolint
 // 従来の無名関数
@@ -238,7 +239,8 @@ class C {
 }
 ```
 
-> **メモ:** クラスフィールドはインスタンスで定義され、プロトタイプでは定義されません。そのため、インスタンスを作成するたびに新しい関数参照が作成され、新しいクロージャが割り当てられます。
+> [!NOTE]
+> クラスフィールドはインスタンスで定義され、プロトタイプでは定義されません。そのため、インスタンスを作成するたびに新しい関数参照が作成され、新しいクロージャが割り当てられます。
 
 同様の理由で、[`call()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) の各メソッドは、アロー関数で呼び出されても有益ではありません。アロー関数は、アロー関数が定義されているスコープに基づいて `this` の値を定義しており、関数の呼び出し方によってこの値が変わることはないからです。
 
diff --git a/files/ja/web/javascript/reference/functions/get/index.md b/files/ja/web/javascript/reference/functions/get/index.md
index d0796b6fa67e78..f0d558c6583fc5 100644
--- a/files/ja/web/javascript/reference/functions/get/index.md
+++ b/files/ja/web/javascript/reference/functions/get/index.md
@@ -130,7 +130,8 @@ console.log(MyConstants.foo); // 'foo' です。静的ゲッターの値は変
 - 値がすぐに必要ではない場合。値を後で使用する、あるいはまったく使用しない場合がある状況。
 - 何度もアクセスされる値で、値が変更されないため再計算の必要がない、あるいは再計算すべきではない場合。
 
-> **メモ:** 値が変わると見込まれるプロパティで、遅延ゲッターを使用してはいけません。ゲッターが遅延である場合、値を再計算しないためです。
+> [!NOTE]
+> 値が変わると見込まれるプロパティで、遅延ゲッターを使用してはいけません。ゲッターが遅延である場合、値を再計算しないためです。
 >
 > なお、ゲッターの本質は「遅延」や「メモ化」ではありません。この動作を望む場合、この技術を実装する必要があります。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/every/index.md b/files/ja/web/javascript/reference/global_objects/array/every/index.md
index 65897cef334e2b..e8b803870a76e8 100644
--- a/files/ja/web/javascript/reference/global_objects/array/every/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/every/index.md
@@ -49,7 +49,8 @@ every(callbackFn, thisArg)
 - 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。
 
-> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
+> [!WARNING]
+> 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
 
 `every()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/filter/index.md b/files/ja/web/javascript/reference/global_objects/array/filter/index.md
index bc1b17ca749d96..461f83a0293ab5 100644
--- a/files/ja/web/javascript/reference/global_objects/array/filter/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/filter/index.md
@@ -49,7 +49,8 @@ filter(callbackFn, thisArg)
 - 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。
 
-> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
+> [!WARNING]
+> 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
 
 `filter()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/find/index.md b/files/ja/web/javascript/reference/global_objects/array/find/index.md
index ada3b1ea3d1e44..5e484f43eeb306 100644
--- a/files/ja/web/javascript/reference/global_objects/array/find/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/find/index.md
@@ -54,7 +54,8 @@ find(callbackFn, thisArg)
 - 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。
 
-> **警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
+> [!WARNING]
+> 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
 
 `find()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/findindex/index.md b/files/ja/web/javascript/reference/global_objects/array/findindex/index.md
index 4e5edaca85a707..ef6d87a0aab1a3 100644
--- a/files/ja/web/javascript/reference/global_objects/array/findindex/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/findindex/index.md
@@ -50,7 +50,8 @@ findIndex(callbackFn, thisArg)
 - 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。
 
-> **警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
+> [!WARNING]
+> 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
 
 `findIndex()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/findlast/index.md b/files/ja/web/javascript/reference/global_objects/array/findlast/index.md
index 41a7a85b7628a5..30380d39de8bef 100644
--- a/files/ja/web/javascript/reference/global_objects/array/findlast/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/findlast/index.md
@@ -58,7 +58,8 @@ findLast(callbackFn, thisArg)
 - 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。
 
-> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
+> [!WARNING]
+> 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
 
 `findLast()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md b/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md
index c9083b3f38ee32..7682798eb57b92 100644
--- a/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md
@@ -51,7 +51,8 @@ findLastIndex(callbackFn, thisArg)
 - 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。
 
-> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
+> [!WARNING]
+> 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
 
 `findLastIndex()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md
index 9ccfc5a2de788f..686f9df7e6f5a4 100644
--- a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md
@@ -47,7 +47,8 @@ forEach(callbackFn, thisArg)
 - 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。
 
-> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
+> [!WARNING]
+> 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
 
 `forEach()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
@@ -116,7 +117,8 @@ items.forEach((item) => {
 
 ### 配列の内容の出力
 
-> **メモ:** 配列の内容をコンソールに表示するために、配列の整形済みのバージョンを表示する {{domxref("Console/table", "console.table()")}} を使用することができます。
+> [!NOTE]
+> 配列の内容をコンソールに表示するために、配列の整形済みのバージョンを表示する {{domxref("Console/table", "console.table()")}} を使用することができます。
 >
 > 以下の例では同じことを `forEach()` を使用して行う他の方法を説明しています。
 
@@ -163,7 +165,8 @@ console.log(obj.sum); // 16
 
 `thisArg` 引数 (`this`) が `forEach()` に提供されているため、`callbackFn` の呼び出しのたびにこれが渡されます。コールバックはこれを `this` の値として使用します。
 
-> **メモ:** コールバック関数の受け渡しに[アロー関数式](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を使用した場合、`thisArg` 引数は、アロー関数が文法的に {{jsxref("Operators/this", "this")}} の値に結び付けられているため省略可能です。
+> [!NOTE]
+> コールバック関数の受け渡しに[アロー関数式](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を使用した場合、`thisArg` 引数は、アロー関数が文法的に {{jsxref("Operators/this", "this")}} の値に結び付けられているため省略可能です。
 
 ### オブジェクトをコピーする関数
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/from/index.md b/files/ja/web/javascript/reference/global_objects/array/from/index.md
index 5b92523a3c1570..64a3240cf39110 100644
--- a/files/ja/web/javascript/reference/global_objects/array/from/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/from/index.md
@@ -49,7 +49,8 @@ Array.from(arrayLike, mapFn, thisArg)
 
 `Array.from()` にはオプションで `mapFn` という引数があり、 {{jsxref("Array/map", "map()")}} と同様に、作成する配列のそれぞれの要素に対して関数を実行することができます。より明確には、`Array.from(obj, mapFn, thisArg)` は `Array.from(obj).map(mapFn, thisArg)` と同じ結果を保有します。ただし、`Array.from(obj).map(mapFn, thisArg)` は中間配列を作成せず、`mapFn` は配列全体を持たずに 2 つの引数 (`element`, `index`) を受け取るだけです。
 
-> **メモ:** この動作は[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)にとってより重要です。なぜなら、中間の配列は適切な型を入力するために必然的に値が切り捨てられるからです。 `Array.from()` は {{jsxref("TypedArray.from()")}} と同じシグネチャを持つために実装します。
+> [!NOTE]
+> この動作は[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)にとってより重要です。なぜなら、中間の配列は適切な型を入力するために必然的に値が切り捨てられるからです。 `Array.from()` は {{jsxref("TypedArray.from()")}} と同じシグネチャを持つために実装します。
 
 `Array.from()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `from()` メソッドを継承した場合、継承した `from()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数を `this` 値として指定することができます。反復可能オブジェクトが `arrayLike` として渡された場合、コンストラクターは引数なしで呼び出されます。配列風のオブジェクトが渡された場合、コンストラクターは配列風オブジェクトの[正規化された長さ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#length_プロパティの正規化)で呼び出されます。最終的な `length` は反復処理が完了したときに再び設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/index.md b/files/ja/web/javascript/reference/global_objects/array/index.md
index 642f70d8125349..700ab80fc0e228 100644
--- a/files/ja/web/javascript/reference/global_objects/array/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/index.md
@@ -379,7 +379,8 @@ f("a", "b"); // 'a+b'
 
 この節では、 JavaScript で一般的な配列操作の例をいくつか紹介します。
 
-> **メモ:** まだ配列の基本に慣れていない場合は、最初に [JavaScript の第一歩: 配列](/ja/docs/Learn/JavaScript/First_steps/Arrays) の[配列とは何かの説明](/ja/docs/Learn/JavaScript/First_steps/Arrays#配列とは何か)、およびよくある配列の操作の他の例を読んでみてください。
+> [!NOTE]
+> まだ配列の基本に慣れていない場合は、最初に [JavaScript の第一歩: 配列](/ja/docs/Learn/JavaScript/First_steps/Arrays) の[配列とは何かの説明](/ja/docs/Learn/JavaScript/First_steps/Arrays#配列とは何か)、およびよくある配列の操作の他の例を読んでみてください。
 
 ### 配列の作成
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/map/index.md b/files/ja/web/javascript/reference/global_objects/array/map/index.md
index 11cd3f3cd058ce..79100127a71ec8 100644
--- a/files/ja/web/javascript/reference/global_objects/array/map/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/map/index.md
@@ -47,7 +47,8 @@ map(callbackFn, thisArg)
 - 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。
 
-> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
+> [!WARNING]
+> 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
 
 `map()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/reduce/index.md b/files/ja/web/javascript/reference/global_objects/array/reduce/index.md
index 658cd3cf4cf177..d11594bdc8d10e 100644
--- a/files/ja/web/javascript/reference/global_objects/array/reduce/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/reduce/index.md
@@ -68,7 +68,8 @@ reduce(callbackFn, initialValue)
 - 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。
 
-> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
+> [!WARNING]
+> 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
 
 `reduce()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md
index f8dae97d248627..bdbe62d97594c3 100644
--- a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md
@@ -54,7 +54,8 @@ reduceRight(callbackFn, initialValue)
 - 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。
 
-> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
+> [!WARNING]
+> 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
 
 `reduceRight()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/some/index.md b/files/ja/web/javascript/reference/global_objects/array/some/index.md
index ba2420498ec8e4..0e3022af65ade1 100644
--- a/files/ja/web/javascript/reference/global_objects/array/some/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/some/index.md
@@ -51,7 +51,8 @@ some(callbackFn, thisArg)
 - 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
 - まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。
 
-> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
+> [!WARNING]
+> 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
 
 `some()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/sort/index.md b/files/ja/web/javascript/reference/global_objects/array/sort/index.md
index 66d3b866c6631b..868978f798fcd1 100644
--- a/files/ja/web/javascript/reference/global_objects/array/sort/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/sort/index.md
@@ -45,7 +45,8 @@ sort(compareFn)
 
 `sort()` メソッドは空のスロットを保持します。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の場合、空のスロットは配列の末尾に移動され、常にすべての `undefined` の後に置かれます。
 
-> **メモ:** UTF-16 では、`\uFFFF` を超える Unicode 文字は 2 つのサロゲートコード単位にエンコードされ、`\uD800` - `\uDFFF` の範囲になります。それぞれのコード単位の値は比較では別々に扱われます。したがって、`\uD855\uDE51` というサロゲートペアで形成される文字は、`\uFF3A` の文字よりも前に並べられます。
+> [!NOTE]
+> UTF-16 では、`\uFFFF` を超える Unicode 文字は 2 つのサロゲートコード単位にエンコードされ、`\uD800` - `\uDFFF` の範囲になります。それぞれのコード単位の値は比較では別々に扱われます。したがって、`\uD855\uDE51` というサロゲートペアで形成される文字は、`\uFF3A` の文字よりも前に並べられます。
 
 `compareFn` が与えられた場合、`undefined` 以外のすべての配列要素は比較関数の返値に基づきソートされます（`undefined` の要素はすべて、`compareFn` を呼び出すことなく配列の末尾へ並べられます）。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/values/index.md b/files/ja/web/javascript/reference/global_objects/array/values/index.md
index 2023096afd9a1a..2f6749212ac673 100644
--- a/files/ja/web/javascript/reference/global_objects/array/values/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/values/index.md
@@ -70,7 +70,8 @@ console.log(iterator.next().value); // undefined
 
 ### 反復可能オブジェクトの再利用
 
-> **警告:** 配列イテレーターオブジェクトは、一回のみ使用可能なオブジェクトになります。再利用しないでください。
+> [!WARNING]
+> 配列イテレーターオブジェクトは、一回のみ使用可能なオブジェクトになります。再利用しないでください。
 
 `values()` で返される反復可能オブジェクトは再利用できません。 `next().done = true` または `currentIndex > length` になった場合、 [`for...of` ループは終了](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#言語と反復処理プロトコルの対話)し、それ以降の反復処理は効果がありません。
 
diff --git a/files/ja/web/javascript/reference/global_objects/asyncgenerator/next/index.md b/files/ja/web/javascript/reference/global_objects/asyncgenerator/next/index.md
index fd8c4f687a2ba5..2fdc7958524bfb 100644
--- a/files/ja/web/javascript/reference/global_objects/asyncgenerator/next/index.md
+++ b/files/ja/web/javascript/reference/global_objects/asyncgenerator/next/index.md
@@ -64,7 +64,8 @@ asyncGen.next().then((res) => console.log(res)); // { value: undefined, done: tr
 
 この例では、`next` が値付きで呼び出されます。
 
-> **メモ:** 最初の呼び出しは、ジェネレーターが最初は何も出力しなかったため、何もログ出力しません。
+> [!NOTE]
+> 最初の呼び出しは、ジェネレーターが最初は何も出力しなかったため、何もログ出力しません。
 
 ```js
 // 非同期タスクです。実際にはもっと有益なことを使用していることを
diff --git a/files/ja/web/javascript/reference/global_objects/atomics/notify/index.md b/files/ja/web/javascript/reference/global_objects/atomics/notify/index.md
index 01ca14cdf9c73c..7256b241161e02 100644
--- a/files/ja/web/javascript/reference/global_objects/atomics/notify/index.md
+++ b/files/ja/web/javascript/reference/global_objects/atomics/notify/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Atomics/notify
 
 静的メソッドである **`Atomics.notify()`** は、待ち行列で休眠状態にあるエージェントに通知します。
 
-> **メモ:** この操作は共有された {{jsxref("Int32Array")}} に対してのみ動作します。
+> [!NOTE]
+> この操作は共有された {{jsxref("Int32Array")}} に対してのみ動作します。
 > 共有されていない `ArrayBuffer` オブジェクトでは `0` を返します。
 
 ## 構文
diff --git a/files/ja/web/javascript/reference/global_objects/atomics/wait/index.md b/files/ja/web/javascript/reference/global_objects/atomics/wait/index.md
index be676ee75c333a..02259e9011b613 100644
--- a/files/ja/web/javascript/reference/global_objects/atomics/wait/index.md
+++ b/files/ja/web/javascript/reference/global_objects/atomics/wait/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Atomics/wait
 
 **`Atomics.wait()`** は静的なメソッドで、 {{jsxref("Int32Array")}} 中の指定された位置に指定された値が保存されているかどうかを検証し、検証できるまでスリープ、もしくはタイムアウトします。返値は "`ok`", "`not-equal`", "`timed-out`" のいずれかです。
 
-> **メモ:** この操作は共有された {{jsxref("Int32Array")}} に対してのみ可能で、またメインスレッドでは実行できません。
+> [!NOTE]
+> この操作は共有された {{jsxref("Int32Array")}} に対してのみ可能で、またメインスレッドでは実行できません。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/boolean/index.md b/files/ja/web/javascript/reference/global_objects/boolean/index.md
index 4bab03caeb3906..00c5bb76b16ae5 100644
--- a/files/ja/web/javascript/reference/global_objects/boolean/index.md
+++ b/files/ja/web/javascript/reference/global_objects/boolean/index.md
@@ -48,7 +48,8 @@ const myString = new String("Hello"); // Stringオブジェクト
 const s = Boolean(myString); // true
 ```
 
-> **警告:** コンストラクターとして `Boolean` を使うことは滅多にありません。
+> [!WARNING]
+> コンストラクターとして `Boolean` を使うことは滅多にありません。
 
 ### 論理値への型強制
 
@@ -62,7 +63,8 @@ const s = Boolean(myString); // true
 - [`Symbol`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol) は `true` になります。
 - すべてのオブジェクトは `true` になります。
 
-> **メモ:** 非推奨のプロパティ [`document.all`](/ja/docs/Web/API/Document/all) はオブジェクトであるにもかかわらず、論理値に変換されると `false` になります。このプロパティはレガシーで非標準であるため、使用しないでください。
+> [!NOTE]
+> 非推奨のプロパティ [`document.all`](/ja/docs/Web/API/Document/all) はオブジェクトであるにもかかわらず、論理値に変換されると `false` になります。このプロパティはレガシーで非標準であるため、使用しないでください。
 
 > **注意:** [文字列への型強制](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)や[数値への型強制](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#number_coercion)などの他の型の変換とは異なり、論理値への型強制はオブジェクトからプリミティブに変換しようとするわけではありません。
 
diff --git a/files/ja/web/javascript/reference/global_objects/date/getday/index.md b/files/ja/web/javascript/reference/global_objects/date/getday/index.md
index 42c461db6eea55..43ab34f984ec30 100644
--- a/files/ja/web/javascript/reference/global_objects/date/getday/index.md
+++ b/files/ja/web/javascript/reference/global_objects/date/getday/index.md
@@ -34,7 +34,8 @@ const weekday = xmas95.getDay();
 console.log(weekday); // 1
 ```
 
-> **メモ:** 必要であれば、曜日の完全な名前 (例えば "`Monday`") は [`Intl.DateTimeFormat`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) に `options` 引数を設定することで取得することができます。このメソッドを使用すれば、国際化がより簡単になります。
+> [!NOTE]
+> 必要であれば、曜日の完全な名前 (例えば "`Monday`") は [`Intl.DateTimeFormat`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) に `options` 引数を設定することで取得することができます。このメソッドを使用すれば、国際化がより簡単になります。
 >
 > ```js
 > const options = { weekday: "long" };
diff --git a/files/ja/web/javascript/reference/global_objects/date/getmonth/index.md b/files/ja/web/javascript/reference/global_objects/date/getmonth/index.md
index ab75274d1e5a7b..a5633ea9ff5ea6 100644
--- a/files/ja/web/javascript/reference/global_objects/date/getmonth/index.md
+++ b/files/ja/web/javascript/reference/global_objects/date/getmonth/index.md
@@ -34,7 +34,8 @@ const month = xmas95.getMonth();
 console.log(month); // 11
 ```
 
-> **メモ:** 必要に応じて、月の完全な名前（例えば `January` ）は [`Intl.DateTimeFormat()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#options_の使用) に `options` 引数を付けることで取得することができます。このメソッドを使用すれば、国際化がより簡単になります。
+> [!NOTE]
+> 必要に応じて、月の完全な名前（例えば `January` ）は [`Intl.DateTimeFormat()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#options_の使用) に `options` 引数を付けることで取得することができます。このメソッドを使用すれば、国際化がより簡単になります。
 >
 > ```js
 > const options = { month: "long" };
diff --git a/files/ja/web/javascript/reference/global_objects/date/index.md b/files/ja/web/javascript/reference/global_objects/date/index.md
index 6a2619ef916684..7dd9bdd39390e4 100644
--- a/files/ja/web/javascript/reference/global_objects/date/index.md
+++ b/files/ja/web/javascript/reference/global_objects/date/index.md
@@ -9,7 +9,8 @@ l10n:
 
 JavaScript の **`Date`** オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。`Date` オブジェクトは、1970 年 1 月 1 日午前 0 時 (UTC)（元期）からのミリ秒を表す整数値をカプセル化しています。
 
-> **メモ:** TC39 は [Temporal](https://tc39.es/proposal-temporal/docs/index.html) という、新しい日付/時刻の API を開発しています。これについて詳しくは [Igalia のブログ](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/)を参照してください。まだ正式利用の準備はできていません。
+> [!NOTE]
+> TC39 は [Temporal](https://tc39.es/proposal-temporal/docs/index.html) という、新しい日付/時刻の API を開発しています。これについて詳しくは [Igalia のブログ](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/)を参照してください。まだ正式利用の準備はできていません。
 
 ## 解説
 
@@ -17,7 +18,8 @@ JavaScript の **`Date`** オブジェクトは、単一の瞬間の時刻をプ
 
 JavaScript の日付は基本的に、[元期](https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-time-values-and-time-range)として定義される UTC の 1970 年 1 月 1 日午前 0 時（[UNIX 元期](/ja/docs/Glossary/Unix_time)と同じ）から経過したミリ秒単位の時刻を指定します。このタイムスタンプはタイムゾーンに依存せず、歴史の一瞬を固有のものとして定義します。
 
-> **メモ:** Date オブジェクトの中核となる時刻の値は UTC ですが、日時やその部品を取得する基本的なメソッドは、すべてローカル（つまりホストシステム）のタイムゾーンとオフセットで動作します。
+> [!NOTE]
+> Date オブジェクトの中核となる時刻の値は UTC ですが、日時やその部品を取得する基本的なメソッドは、すべてローカル（つまりホストシステム）のタイムゾーンとオフセットで動作します。
 
 `Date` オブジェクトで表現できるタイムスタンプの最大値は、安全な整数の最大値（{{jsxref("Number.MAX_SAFE_INTEGER")}}、9,007,199,254,740,991）よりもわずかに小さくなります。`Date` オブジェクトは、元期に対して最大 ±8,640,000,000,000,000 ミリ秒、つまり±100,000,000（1 億）日を表します。これは紀元前 271821 年 4 月 20 日から西暦 275760 年 9 月 13 日までの範囲です。この範囲外の時刻を表そうとすると、`Date` オブジェクトは [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) のタイムスタンプ値を持ち、"Invalid Date" （無効な日時）となります。
 
@@ -37,7 +39,8 @@ console.log(new Date(8.64e15 + 1).toString()); // "Invalid Date"
 
 日付は内部的には単一の数値であるタイムスタンプで表されます。タイムスタンプを操作する際には、タイムスタンプを構造化された日時表現として解釈する必要があります。タイムスタンプを解釈する方法は常に 2 つあります。ローカル時刻として解釈する方法と、世界標準時を定義する協定世界時 (UTC) として解釈する方法です。ローカルタイムゾーンは `Date` オブジェクトには格納されず、ホスト環境（ユーザー端末）によって決定されます。
 
-> **メモ:** UTC を[グリニッジ標準時](https://ja.wikipedia.org/wiki/グリニッジ標準時) (GMT) と混同してはいけません。両者は常に同じではありません。これはリンク先のウィキペディアのページで詳しく説明されています。
+> [!NOTE]
+> UTC を[グリニッジ標準時](https://ja.wikipedia.org/wiki/グリニッジ標準時) (GMT) と混同してはいけません。両者は常に同じではありません。これはリンク先のウィキペディアのページで詳しく説明されています。
 
 例えば、タイムスタンプ 0 は歴史上の一意の瞬間を表しますが、2 つの方法で解釈することができます。
 
@@ -159,7 +162,8 @@ YYYY-MM-DDTHH:mm:ss.sssZ
 
 {{jsxref("Date/toISOString", "toISOString()")}} メソッドは、タイムゾーンのオフセットを常に `Z` (UTC) に設定した状態で、日付の文字列表現を日時文字列形式で返します。
 
-> **メモ:** 他の書式への対応は保証されていませんので、互換性を最大にするために、入力は上記の日時文字列の書式に準拠するようにしてください。しかし、{{rfc(2822)}} 形式のように、主要な実装ですべて対応している書式もあります。常に[ブラウザー横断テスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)を行い、対象とするブラウザーすべてで確実にコードが動作するようにしてください。様々な書式化に対応するには、ライブラリーが役立ちます。
+> [!NOTE]
+> 他の書式への対応は保証されていませんので、互換性を最大にするために、入力は上記の日時文字列の書式に準拠するようにしてください。しかし、{{rfc(2822)}} 形式のように、主要な実装ですべて対応している書式もあります。常に[ブラウザー横断テスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)を行い、対象とするブラウザーすべてで確実にコードが動作するようにしてください。様々な書式化に対応するには、ライブラリーが役立ちます。
 
 標準外の文字列は、タイムゾーンを含め、実装が望む方法で構文解析できます。ほとんどの実装では既定でローカルのタイムゾーンを使用します。実装は、境界外の日付部品に対して不正な日付を返すことを要求されませんが、通常はそうします。文字列は(上で定義されていません)境界内の日付要素を持つことができますが、実際には日付を表していません(例えば、"2月30日")。この場合、実装上の不整合が発生します。[`Date.parse()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#例) のページでは、このような非標準の例について詳しく説明しています。
 
@@ -294,7 +298,8 @@ YYYY-MM-DDTHH:mm:ss.sssZ
 
 以下の例で、 JavaScript の日時を生成するいくつかの方法を示します。
 
-> **メモ:** 文字列から日付を作成するには、動作に一貫性がありません。異なる書式を使用する際の注意点については[日時文字列形式](#日時文字列形式)を参照してください。
+> [!NOTE]
+> 文字列から日付を作成するには、動作に一貫性がありません。異なる書式を使用する際の注意点については[日時文字列形式](#日時文字列形式)を参照してください。
 
 ```js
 const today = new Date();
diff --git a/files/ja/web/javascript/reference/global_objects/date/parse/index.md b/files/ja/web/javascript/reference/global_objects/date/parse/index.md
index 5ec6915895a8df..4d3c1f6bc23399 100644
--- a/files/ja/web/javascript/reference/global_objects/date/parse/index.md
+++ b/files/ja/web/javascript/reference/global_objects/date/parse/index.md
@@ -47,7 +47,8 @@ Date.parse(dateString)
 
 ### 実装依存の日付形式へのフォールバック
 
-> **メモ:** この節では実装依存の動作を説明しており、実装間で一貫性がない可能性があります。
+> [!NOTE]
+> この節では実装依存の動作を説明しており、実装間で一貫性がない可能性があります。
 
 ECMAScript 仕様書は、文字列が標準の書式に準拠していない場合、この関数は実装固有の検出方法や実装固有の解析アルゴリズムにフォールバックすることがあり、解釈できない文字列や ISO 書式文字列における不正な要素値を含む日付を渡すと、 `Date.parse()` が {{jsxref("NaN")}} を返すと規定しています。
 
@@ -88,7 +89,8 @@ Date.parse("foo-bar 2014");
 
 ### 想定されるタイムゾーンの違い
 
-> **メモ:** この節では実装依存の動作を説明しており、実装間で一貫性がない可能性があります。
+> [!NOTE]
+> この節では実装依存の動作を説明しており、実装間で一貫性がない可能性があります。
 
 標準外の日付文字列である `"March 7, 2014"` を渡すと、 `parse()` はタイムゾーンとして地方時を想定しますが、 `"2014-03-07"` のような ISO 書式を与えると UTC をタイムゾーンとして想定します (ES5 および ECMAScript 2015 の仕様)。したがって、これらの文字列を使用して生成される {{jsxref("Date")}} オブジェクトは、システムが UTC の地方時に設定されていない限り、対応している ECMAScript のバージョンによって異なる時刻を表す可能性があります。つまり、同じように見える 2 つの日付文字列が、変換される文字列の形式によって 2 つの異なる値になる可能性があるということです。
 
@@ -112,7 +114,8 @@ Date.parse("2019-01-01T00:00:00");
 
 ### 標準外の日付文字列
 
-> **メモ:** この節では実装依存の動作を説明しており、実装間で一貫性がない可能性があります。
+> [!NOTE]
+> この節では実装依存の動作を説明しており、実装間で一貫性がない可能性があります。
 
 `IPOdate` が既存の {{jsxref("Date")}} オブジェクトならば、次のようにして、これを 1995 年 8 月 9 日 (地方時) にセットできます:
 
diff --git a/files/ja/web/javascript/reference/global_objects/date/tolocalestring/index.md b/files/ja/web/javascript/reference/global_objects/date/tolocalestring/index.md
index e04892976ae797..217accc6acae90 100644
--- a/files/ja/web/javascript/reference/global_objects/date/tolocalestring/index.md
+++ b/files/ja/web/javascript/reference/global_objects/date/tolocalestring/index.md
@@ -157,7 +157,8 @@ console.log(date.toLocaleString("en-US", { hour12: false }));
 // false in IE and Edge
 ```
 
-> **メモ:** 詳細および例についてはこの [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)をご覧ください。
+> [!NOTE]
+> 詳細および例についてはこの [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)をご覧ください。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/global_objects/error/index.md b/files/ja/web/javascript/reference/global_objects/error/index.md
index 0c155142100381..5ec673c3d0b6d7 100644
--- a/files/ja/web/javascript/reference/global_objects/error/index.md
+++ b/files/ja/web/javascript/reference/global_objects/error/index.md
@@ -151,7 +151,8 @@ try {
 }
 ```
 
-> **メモ:** もしあなたがライブラリを制作しているなら、利用者にエラーメッセージをパースするようお願いするよりも発生したエラーを区別するために Error の cause を使用すべきです。例については [Error の cause ページ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Error/cause#providing_structured_data_as_the_error_cause) をご覧ください。
+> [!NOTE]
+> もしあなたがライブラリを制作しているなら、利用者にエラーメッセージをパースするようお願いするよりも発生したエラーを区別するために Error の cause を使用すべきです。例については [Error の cause ページ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Error/cause#providing_structured_data_as_the_error_cause) をご覧ください。
 
 サブクラスのコンストラクターが `super()` を呼び出すときに `options` パラメーターを渡せば、[独自のエラー型](#独自のエラー型)も `cause` プロパティを利用できます。基底クラスのコンストラクター `Error()` は `options.cause` を読み取って、新しいエラーのインスタンスに `cause` プロパティを定義します。
 
@@ -175,7 +176,8 @@ StackOverflow の突っ込んだ議論、 ["What's a good way to extend Error in
 
 > **警告**: 組み込みのサブクラス化は、ES6 より古いコードに確実にトランスパイルできるわけではありません。なぜなら、 {{jsxref("Reflect.construct()")}} を使わずに特定の `new.target` を持つ基底クラスを構築する手段がないためです。[追加の設定](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend)を行うか、コンストラクターの最後で {{jsxref("Object/setPrototypeOf", "Object.setPrototypeOf(this, CustomError.prototype)")}} を手動で呼ぶ必要があります。そうしないと、構築されたインスタンスは `CustomError` のインスタンスになりません。詳しくは [the TypeScript FAQ](https://github.com/microsoft/TypeScript/wiki/FAQ#why-doesnt-extending-built-ins-like-error-array-and-map-work) をご覧ください。
 
-> **メモ:** ES2015 クラスを使用した場合、一部のブラウザはスタックトレース上に `CustomError` コンストラクターを含めます。
+> [!NOTE]
+> ES2015 クラスを使用した場合、一部のブラウザはスタックトレース上に `CustomError` コンストラクターを含めます。
 
 ```js
 class CustomError extends Error {
diff --git a/files/ja/web/javascript/reference/global_objects/escape/index.md b/files/ja/web/javascript/reference/global_objects/escape/index.md
index 0dc6fc4df55b90..43f92a1eec56e4 100644
--- a/files/ja/web/javascript/reference/global_objects/escape/index.md
+++ b/files/ja/web/javascript/reference/global_objects/escape/index.md
@@ -12,7 +12,8 @@ slug: Web/JavaScript/Reference/Global_Objects/escape
 
 The **`escape()`** 関数は、特定の文字を 16 進数のエスケープシーケンスで置き換えた新しい文字列を計算します。
 
-> **メモ:** この関数は、主に URL クエリー (URL の `?` に続く部分) に使われていました。 — "`\xHH`" の形式を使用して、ふつうの文字列リテラルをエスケープするためのものでは*ありません*。 (HH は 2 桁の 16 進数であり、より高い面の Unicode 文字には「\xHH\xHHxHH」という形式が使われます。)
+> [!NOTE]
+> この関数は、主に URL クエリー (URL の `?` に続く部分) に使われていました。 — "`\xHH`" の形式を使用して、ふつうの文字列リテラルをエスケープするためのものでは*ありません*。 (HH は 2 桁の 16 進数であり、より高い面の Unicode 文字には「\xHH\xHHxHH」という形式が使われます。)
 >
 > 文字列リテラル内のエスケープされた文字は、 `\x` を `%` に置き換えてから、 `decodeURIComponent()` 関数を使用することで展開することができます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/eval/index.md b/files/ja/web/javascript/reference/global_objects/eval/index.md
index 0759f75b5386fa..9e14457c12c805 100644
--- a/files/ja/web/javascript/reference/global_objects/eval/index.md
+++ b/files/ja/web/javascript/reference/global_objects/eval/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{jsSidebar("Objects")}}
 
-> **警告:** 文字列から JavaScript を実行することは、非常に大きなセキュリティリスクを伴います。`eval()` を使用すると、悪意のある者が任意のコードを実行することがあまりにも簡単になります。下記の [eval() を使わないでください!](#eval_を使わないでください!)を参照してください。
+> [!WARNING]
+> 文字列から JavaScript を実行することは、非常に大きなセキュリティリスクを伴います。`eval()` を使用すると、悪意のある者が任意のコードを実行することがあまりにも簡単になります。下記の [eval() を使わないでください!](#eval_を使わないでください!)を参照してください。
 
 **`eval()`** 関数は、文字列として表現された JavaScript コードを評価します。ソースはスクリプトとして解釈されます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/finalizationregistry/index.md b/files/ja/web/javascript/reference/global_objects/finalizationregistry/index.md
index b8dab42740ae71..3e3973bc1cdde9 100644
--- a/files/ja/web/javascript/reference/global_objects/finalizationregistry/index.md
+++ b/files/ja/web/javascript/reference/global_objects/finalizationregistry/index.md
@@ -11,7 +11,8 @@ slug: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry
 
 `FinalizationRegistry` は、レジストリーに登録されているオブジェクトが*回収*される (ガベージコレクションされる) 時に*クリーンアップコールバック*を要求する方法を提供します。(クリーンアップコールバックは*ファイナライザー*と呼ばれることもあります。)</p>
 
-> **メモ:** クリーンアップコールバックは、重要なプログラムロジックには使用しないでください。詳細は、[クリーンアップコールバックに関する注意事項](#notes_on_cleanup_callbacks)を参照してください。
+> [!NOTE]
+> クリーンアップコールバックは、重要なプログラムロジックには使用しないでください。詳細は、[クリーンアップコールバックに関する注意事項](#notes_on_cleanup_callbacks)を参照してください。
 
 コールバックで渡すレジストリーを作成します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/float16array/index.md b/files/ja/web/javascript/reference/global_objects/float16array/index.md
index 64a7fa63ffd27c..4f2ba4ac04e98d 100644
--- a/files/ja/web/javascript/reference/global_objects/float16array/index.md
+++ b/files/ja/web/javascript/reference/global_objects/float16array/index.md
@@ -11,7 +11,8 @@ l10n:
 
 `Float16Array` は隠された {{jsxref("TypedArray")}} クラスのサブクラスです。
 
-> **メモ:** Float16 のサポートは、JavaScript API と CPU アーキテクチャの両方において万能ではありません。これを使用すると、プラットフォームによってはパフォーマンスが低下する可能性があります。これは、[float-backed canvases](https://github.com/w3c/ColorWeb-CG/blob/main/canvas_float.md)、WebGPU、WebGL、[stable diffusion](https://github.com/huggingface/blog/blob/main/stable_diffusion.md) を含む深層学習モデルなど、高度に最適化されパフォーマンスに敏感なシステムとのやり取りを想定しています。
+> [!NOTE]
+> Float16 のサポートは、JavaScript API と CPU アーキテクチャの両方において万能ではありません。これを使用すると、プラットフォームによってはパフォーマンスが低下する可能性があります。これは、[float-backed canvases](https://github.com/w3c/ColorWeb-CG/blob/main/canvas_float.md)、WebGPU、WebGL、[stable diffusion](https://github.com/huggingface/blog/blob/main/stable_diffusion.md) を含む深層学習モデルなど、高度に最適化されパフォーマンスに敏感なシステムとのやり取りを想定しています。
 
 ## コンストラクター
 
diff --git a/files/ja/web/javascript/reference/global_objects/function/apply/index.md b/files/ja/web/javascript/reference/global_objects/function/apply/index.md
index 6ed9d90f014b4c..03c2ab28c79468 100644
--- a/files/ja/web/javascript/reference/global_objects/function/apply/index.md
+++ b/files/ja/web/javascript/reference/global_objects/function/apply/index.md
@@ -35,9 +35,11 @@ func.apply(thisArg, [ argsArray])
 
 ## 解説
 
-> **メモ:** 関数の構文は {{jsxref("Function.call", "call()")}} メソッドとほぼ同じですが、根本的な違いは `call()` メソッドは**連続した引数のリスト**を受け取るのに対して、 `apply()` メソッドが**引数の配列を 1 つだけ**受け取るという点です。
+> [!NOTE]
+> 関数の構文は {{jsxref("Function.call", "call()")}} メソッドとほぼ同じですが、根本的な違いは `call()` メソッドは**連続した引数のリスト**を受け取るのに対して、 `apply()` メソッドが**引数の配列を 1 つだけ**受け取るという点です。
 
-> **メモ:** 最初の引数が undefined または null の場合、配列の[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を使用して同様の結果を得ることができます。
+> [!NOTE]
+> 最初の引数が undefined または null の場合、配列の[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を使用して同様の結果を得ることができます。
 
 存在する関数を呼び出す時は通常と異なる `this` オブジェクトを渡すことができます。`this` はカレントオブジェクト、呼び出したオブジェクトを参照します。`apply` を用いることで、新たなオブジェクトのためにそのメソッドを書き直すことなく継承させることができます。
 
@@ -47,7 +49,8 @@ func.apply(thisArg, [ argsArray])
 
 ECMAScript 第 5 版以降では、配列風のオブジェクトも使えます。具体的には、`length` プロパティとその範囲 (0 から length-1 まで) の整数の名称のプロパティを持った、あらゆる種類のオブジェクトの利用を認めています。例えば、{{domxref("NodeList")}} や `{ 'length': 2, '0': 'eat', '1': 'bananas' }` のような独自のオブジェクトを利用できます。
 
-> **メモ:** Chrome 14 や Internet Explorer 9 などのブラウザーでは、配列風オブジェクトを扱えずに例外が発生します。
+> [!NOTE]
+> Chrome 14 や Internet Explorer 9 などのブラウザーでは、配列風オブジェクトを扱えずに例外が発生します。
 
 ## 例
 
@@ -136,7 +139,8 @@ Function.prototype.construct = function (aArgs) {
 };
 ```
 
-> **メモ:** 上記で使用している `Object.create()` メソッドは比較的新しいです。代わりの方法として、以下の例を検討してください。
+> [!NOTE]
+> 上記で使用している `Object.create()` メソッドは比較的新しいです。代わりの方法として、以下の例を検討してください。
 >
 > [`Object.prototype.__proto__`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) を利用:
 >
@@ -191,7 +195,8 @@ console.log(myInstance instanceof MyConstructor); // logs 'true'
 console.log(myInstance.constructor); // logs 'MyConstructor'
 ```
 
-> **メモ:** この非ネイティブな `Function.construct` メソッドはいくつかのネイティブ実装されたコンストラクタ (例えば {{jsxref("Date")}} のような物) と併用できません。このようなケースにおいては {{jsxref("Function.bind")}} メソッドを利用する必要があります。
+> [!NOTE]
+> この非ネイティブな `Function.construct` メソッドはいくつかのネイティブ実装されたコンストラクタ (例えば {{jsxref("Date")}} のような物) と併用できません。このようなケースにおいては {{jsxref("Function.bind")}} メソッドを利用する必要があります。
 >
 > 例えば `[2012, 11, 4]` のような配列を {{jsxref("Global_Objects/Date", "Date")}} コンストラクターに利用する事を考えてみてください。この場合では `new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()` のように書く必要があります。
 >
diff --git a/files/ja/web/javascript/reference/global_objects/function/bind/index.md b/files/ja/web/javascript/reference/global_objects/function/bind/index.md
index ade2c8fcbd4d2d..a3f4650d36132a 100644
--- a/files/ja/web/javascript/reference/global_objects/function/bind/index.md
+++ b/files/ja/web/javascript/reference/global_objects/function/bind/index.md
@@ -118,7 +118,8 @@ const boundGetX = retrieveX.bind(module);
 console.log(boundGetX()); // 81
 ```
 
-> **メモ:** この例を[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)で呼び出すと（例えば ECMAScript モジュール内や `"use strict"` ディレクティブを通して）、グローバルな `this` 値は不定となり、 `retrieveX` 呼び出しに失敗する原因となります。
+> [!NOTE]
+> この例を[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)で呼び出すと（例えば ECMAScript モジュール内や `"use strict"` ディレクティブを通して）、グローバルな `this` 値は不定となり、 `retrieveX` 呼び出しに失敗する原因となります。
 >
 > これを Node CommonJS モジュール内で実行すると、厳格モードかどうかに関わらず、最上位スコープの `this` は `globalThis` ではなく `module.exports` を指すようになります。しかし、関数内では、バインドされていない `this` の参照は、それでも「厳格モードでなければ `globalThis` 、厳格モードならば `undefined`」というルールに従います。したがって、厳格モードでない場合（既定）は、 `retrieveX` は `undefined` を返します。これは、 `this.x = 9` が、 `getX` が読んでいるオブジェクト (`globalThis`) とは異なるオブジェクト (`module.exports`) に書き込んでいるためです。
 
diff --git a/files/ja/web/javascript/reference/global_objects/function/call/index.md b/files/ja/web/javascript/reference/global_objects/function/call/index.md
index e42c045ed2d386..56ded7eb458822 100644
--- a/files/ja/web/javascript/reference/global_objects/function/call/index.md
+++ b/files/ja/web/javascript/reference/global_objects/function/call/index.md
@@ -21,7 +21,8 @@ func.call([thisArg[, arg1, arg2, ...argN]])
 
   - : `func` が呼び出されたときに `this` として使用される値です。
 
-    > **メモ:** 特定の場面では、 `thisArg` はメソッドから見える実際の値でない場合があります。
+    > [!NOTE]
+    > 特定の場面では、 `thisArg` はメソッドから見える実際の値でない場合があります。
     >
     > もし、そのメソッドが{{jsxref("Strict_mode", "厳格モード", "", 1)}}の関数ではなかった場合、 {{jsxref("Global_Objects/null", "null")}} と {{jsxref("Global_Objects/undefined", "undefined")}} はグローバルオブジェクトで置き換えられ、プリミティブ値はオブジェクトに変換されます。
 
@@ -38,7 +39,8 @@ func.call([thisArg[, arg1, arg2, ...argN]])
 
 `call()` は関数やメソッドに `this` の新しい値を提供します。 `call()` によって、いったんメソッドを書いてから、新しいオブジェクトへメソッドを書き直さずに他のオブジェクトへと継承することができます。
 
-> **メモ:** このメソッドの構文は {{jsxref("Function.prototype.apply", "apply()")}} とほぼ同じですが、基本的な違いは `call()` が**引数リスト**を受け取るのに対して、 `apply()` は**引数の単一の配列**を受け取る点です。
+> [!NOTE]
+> このメソッドの構文は {{jsxref("Function.prototype.apply", "apply()")}} とほぼ同じですが、基本的な違いは `call()` が**引数リスト**を受け取るのに対して、 `apply()` は**引数の単一の配列**を受け取る点です。
 
 ## 例
 
@@ -76,7 +78,8 @@ const fun = new Toy("robot", 40);
 
 ここでの無名関数の主な目的は、 print 関数をすべてのオブジェクトに追加することで、配列内のオブジェクトの正しいインデックスを表示できるようにします。実際には `this` の値としてオブジェクトを渡す必要ありませんが、例示の目的で使用しています。
 
-> **メモ:** オブジェクトを `this` の値として渡すことは厳密には必要ではありませんが、説明のために使用しました。
+> [!NOTE]
+> オブジェクトを `this` の値として渡すことは厳密には必要ではありませんが、説明のために使用しました。
 
 ```js
 const animals = [
@@ -130,7 +133,8 @@ function display() {
 display.call(); // sData value is Wisen
 ```
 
-> **メモ:** 厳格モードでは `this` の値は `undefined` になります。以下を参照してください。
+> [!NOTE]
+> 厳格モードでは `this` の値は `undefined` になります。以下を参照してください。
 
 ```js
 "use strict";
diff --git a/files/ja/web/javascript/reference/global_objects/function/name/index.md b/files/ja/web/javascript/reference/global_objects/function/name/index.md
index 35161529e2fe94..7eca2ee0348b75 100644
--- a/files/ja/web/javascript/reference/global_objects/function/name/index.md
+++ b/files/ja/web/javascript/reference/global_objects/function/name/index.md
@@ -9,7 +9,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Function/name
 
 {{EmbedInteractiveExample("pages/js/function-name.html")}}{{js_property_attributes(0,0,1)}}
 
-> **メモ:** 標準外であった ES2015 以前の実装では、`configurable` 属性も `false` であることに注意してください。
+> [!NOTE]
+> 標準外であった ES2015 以前の実装では、`configurable` 属性も `false` であることに注意してください。
 
 ## JavaScript の圧縮とミニファイ
 
@@ -158,7 +159,8 @@ var fooInstance = new Foo();
 console.log(fooInstance.constructor.name); // "Foo" と表示
 ```
 
-> **警告:** スクリプトインタープリターは、関数が自身の _name_ プロパティを持っていない場合に限り、組み込みの `Function.name` プロパティを設定します ([9.11.2. of the ECMAScript2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname) セクションをご覧ください)。しかし ES2015 では、_static_ キーワードを指定すると、その静的メソッドはクラスのコンストラクタ関数の OwnProperty として設定されます (ECMAScript2015, [14.5.14.21.b](https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation) + [12.2.6.9](https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation))。
+> [!WARNING]
+> スクリプトインタープリターは、関数が自身の _name_ プロパティを持っていない場合に限り、組み込みの `Function.name` プロパティを設定します ([9.11.2. of the ECMAScript2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname) セクションをご覧ください)。しかし ES2015 では、_static_ キーワードを指定すると、その静的メソッドはクラスのコンストラクタ関数の OwnProperty として設定されます (ECMAScript2015, [14.5.14.21.b](https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation) + [12.2.6.9](https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation))。
 
 従って、`name()` という静的メソッドを持つクラスでは、事実上そのクラス名を取得することはできません:
 
diff --git a/files/ja/web/javascript/reference/global_objects/generator/next/index.md b/files/ja/web/javascript/reference/global_objects/generator/next/index.md
index 0497b9aed4c5ec..78818ae77c88b6 100644
--- a/files/ja/web/javascript/reference/global_objects/generator/next/index.md
+++ b/files/ja/web/javascript/reference/global_objects/generator/next/index.md
@@ -76,7 +76,8 @@ page.next(); // { value: undefined, done: true }
 
 この例では `next` を値付きで呼び出しています。
 
-> **メモ:** 最初の呼び出しではジェネレーターが何も生成していないため、何もログを記録しません。
+> [!NOTE]
+> 最初の呼び出しではジェネレーターが何も生成していないため、何もログを記録しません。
 
 ```js
 function* gen() {
diff --git a/files/ja/web/javascript/reference/global_objects/intl/collator/collator/index.md b/files/ja/web/javascript/reference/global_objects/intl/collator/collator/index.md
index 3b611917dbaaa6..ad5f7e85a1687f 100644
--- a/files/ja/web/javascript/reference/global_objects/intl/collator/collator/index.md
+++ b/files/ja/web/javascript/reference/global_objects/intl/collator/collator/index.md
@@ -28,7 +28,8 @@ new Intl.Collator(locales, options);
 
     次の Unicode 拡張キーが使用可能です。
 
-    > **メモ:** これらのキーは通常、 `options` でも設定することができます（下記でリストアップします）。両方が設定されている場合は、 `options` のプロパティが優先されます。
+    > [!NOTE]
+    > これらのキーは通常、 `options` でも設定することができます（下記でリストアップします）。両方が設定されている場合は、 `options` のプロパティが優先されます。
 
     - `co`
       - : 特定のロケールにおける比較方法の変化形を指定します。指定可能な値は次の通りです。
@@ -48,7 +49,8 @@ new Intl.Collator(locales, options);
         - `trad`
         - `unihan`
         - `zhuyin`
-          > **メモ:** このオプションは `options` プロパティ "`collation`" からも設定できます。
+          > [!NOTE]
+          > このオプションは `options` プロパティ "`collation`" からも設定できます。
     - `kn`
       - : "1" < "2" < "10" のような数値照合順序を使用するかどうかを指定します。設定可能な値は "`true`" と "`false`" です。
         このオプションは、 `options` の "`numeric`" プロパティでも設定することができます。
@@ -80,13 +82,15 @@ new Intl.Collator(locales, options);
 
       - : "1" < "2" < "10" のように数値として比較を行うかどうかです。可能な値は `true` および `false` です。既定値は `false` です。
 
-        > **メモ:** このオプションは Unicode 拡張キーの `kn` でも設定することができます。両方が指定された場合は、この `options` のプロパティが優先されます。
+        > [!NOTE]
+        > このオプションは Unicode 拡張キーの `kn` でも設定することができます。両方が指定された場合は、この `options` のプロパティが優先されます。
 
     - `caseFirst`
 
       - : 大文字と小文字のどちらを先に並べるかです。指定可能な値は "`upper`", "`lower`", "`false`" （ロケールの既定の動作）です。大文字と小文字のどちらを先に並べるかは `options` のプロパティでも Unicode 拡張キーでも指定可能です。両方で指定された場合、 `options` プロパティの指定が優先されます。
 
-        > **メモ:** このオプションは Unicode 拡張キーの `kf` でも設定することができます。両方が指定された場合は、この `options` のプロパティが優先されます。
+        > [!NOTE]
+        > このオプションは Unicode 拡張キーの `kf` でも設定することができます。両方が指定された場合は、この `options` のプロパティが優先されます。
 
     - `collation`
       - : 特定のロケールにおける比較方法の変化形を指定します。指定可能な値は次の通りです。
@@ -106,7 +110,8 @@ new Intl.Collator(locales, options);
         - `trad`
         - `unihan`
         - `zhuyin`
-          > **メモ:** このオプションは Unicode 拡張キーの `co` でも設定することができます。両方が指定された場合は、この `options` のプロパティが優先されます。
+          > [!NOTE]
+          > このオプションは Unicode 拡張キーの `co` でも設定することができます。両方が指定された場合は、この `options` のプロパティが優先されます。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md
index f6b5a01f58c749..860961980944e8 100644
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md
@@ -63,7 +63,7 @@ new Intl.DateTimeFormat(locales, options);
 
       - : 日単位の期間の表現の仕方です。有効な値は、 "`narrow`", "`short`", " `long`" です。
 
-        > **メモ:**
+        > [!NOTE]
         >
         > - このオプションは12時間制を使用したときのみ効果があります。
         > - 多くのロケールでは幅の指定を無視して同じ文字列を使用します。
@@ -157,7 +157,8 @@ new Intl.DateTimeFormat(locales, options);
         - "`shortGeneric`" 一般的な場所を指定しない短い形式 (例 `PT`, `Los Angeles Zeit`).
         - "`longGeneric`" 一般的な場所を指定しない長い形式 (例 `Pacific Time`, `Nordamerikanische Westküstenzeit`)
 
-        > **メモ:** タイムゾーンの表示は、必要な文字列が利用できない場合、別の形式にフォールバックすることがあります。例えば、場所を指定しない形式では、 "Pacific Time" のように特定の国や都市の場所を指定せずにタイムゾーンを表示する必要がありますが、 "Los Angeles Time" のようなタイムゾーンにフォールバックする場合があります。
+        > [!NOTE]
+        > タイムゾーンの表示は、必要な文字列が利用できない場合、別の形式にフォールバックすることがあります。例えば、場所を指定しない形式では、 "Pacific Time" のように特定の国や都市の場所を指定せずにタイムゾーンを表示する必要がありますが、 "Los Angeles Time" のようなタイムゾーンにフォールバックする場合があります。
 
     それぞれの日付や時刻の部分のプロパティの既定値は {{jsxref("undefined")}} ですが、すべての部分のプロパティが {{jsxref("undefined")}} であった場合、 `year`, `month`, `day` は "`numeric`" であると想定されます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
index a6d49b0fd96915..0488801220436d 100644
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
@@ -77,7 +77,8 @@ let formattedDate = Intl.DateTimeFormat(undefined, {
 // false in IE and Edge
 ```
 
-> **メモ:** この [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)に詳細や例があります。
+> [!NOTE]
+> この [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)に詳細や例があります。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
index 506aefb4b47d42..079804b8a89bfe 100644
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
@@ -21,7 +21,8 @@ formatRangeToParts(startDate, endDate);
 
 このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表す*ロケール特有*のトークンを含む {{jsxref("Array")}} オブジェクトを返します。
 
-> **メモ:** 返値は現在のロケールで表示されるので、以下のものとは異なる可能性があります。
+> [!NOTE]
+> 返値は現在のロケールで表示されるので、以下のものとは異なる可能性があります。
 
 ```js
 let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md
index 74bf080979d94d..b0eaa0f0dbb068 100644
--- a/files/ja/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md
+++ b/files/ja/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md
@@ -11,7 +11,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTimeZones
 
 関連付けられた `Locale` で対応しているタイムゾーンを配列で返します。返されるタイムゾーンは [IANA タイムゾーン](https://en.wikipedia.org/wiki/Daylight_saving_time#IANA_time_zone_database) を表します。
 
-> **メモ:** Unicode 言語識別子が Unicode 地域サブタグシーケンスの `-` を含んでいない場合、返される値は `undefined` です。
+> [!NOTE]
+> Unicode 言語識別子が Unicode 地域サブタグシーケンスの `-` を含んでいない場合、返される値は `undefined` です。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/intl/supportedvaluesof/index.md b/files/ja/web/javascript/reference/global_objects/intl/supportedvaluesof/index.md
index 3f5d896950b5b9..5b03a56d3d164e 100644
--- a/files/ja/web/javascript/reference/global_objects/intl/supportedvaluesof/index.md
+++ b/files/ja/web/javascript/reference/global_objects/intl/supportedvaluesof/index.md
@@ -58,7 +58,8 @@ Intl.supportedValuesOf("calendar").forEach((calendar) => {
 });
 ```
 
-> **メモ:** 暦の値に関して返される配列には、常に値 `"gregory"` (グレゴリオ暦) が含まれます。
+> [!NOTE]
+> 暦の値に関して返される配列には、常に値 `"gregory"` (グレゴリオ暦) が含まれます。
 
 他の値も、同様にして取得できます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/map/groupby/index.md b/files/ja/web/javascript/reference/global_objects/map/groupby/index.md
index c6121b7acb49d0..765efa0ab61f61 100644
--- a/files/ja/web/javascript/reference/global_objects/map/groupby/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/groupby/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}}
 
-> **メモ:** 一部のブラウザーのあるバージョンでは、このメソッドは `Array.prototype.groupToMap()` というメソッドとして実装されていました。ウェブの互換性の問題により、現在は静的メソッドとして実装されています。詳細は[ブラウザーの互換性](#ブラウザーの互換性)を確認してください
+> [!NOTE]
+> 一部のブラウザーのあるバージョンでは、このメソッドは `Array.prototype.groupToMap()` というメソッドとして実装されていました。ウェブの互換性の問題により、現在は静的メソッドとして実装されています。詳細は[ブラウザーの互換性](#ブラウザーの互換性)を確認してください
 
 **Map.groupBy()** 静的メソッドは、指定されたコールバック関数によって返された値を使用して、指定された反復可能な要素をグループ化します。最終的に返される {{jsxref("Map")}} は、テスト関数からの一意な値をキーとして使用し、各グループの要素の配列を取得するために使用できます。
 
@@ -44,7 +45,8 @@ Map.groupBy(items, callbackFn)
 
 このメソッドは、時間の経過とともに変更される可能性のある特定のオブジェクトに関連する情報をグループ化する必要がある場合に便利です。オブジェクトが変更されても、返される `Map` のキーとして機能し続けるからです。代わりにオブジェクトの文字列表現を作成し、それを {{jsxref("Object.groupBy()")}} のグループ化キーとして使用する場合は、オブジェクトが変更されても元のオブジェクトとその表現との間のマッピングを維持する必要があります。
 
-> **メモ:** 返された `Map` のグループにアクセスするには、`Map` のキーとして元々使用されていたのと同じオブジェクトを使用する必要があります（ただし、そのオブジェクトのプロパティを変更することはできます）。たまたま同じ名前とプロパティを持つ別のオブジェクトを使うことはできません。
+> [!NOTE]
+> 返された `Map` のグループにアクセスするには、`Map` のキーとして元々使用されていたのと同じオブジェクトを使用する必要があります（ただし、そのオブジェクトのプロパティを変更することはできます）。たまたま同じ名前とプロパティを持つ別のオブジェクトを使うことはできません。
 
 `Map.groupBy` は `this` の値を読みません。どんなオブジェクトでも呼び出すことができ、新しい {{jsxref("Map")}} インスタンスが返されます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md b/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md
index 453d348e3ff966..5e43d0879187b0 100644
--- a/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md
@@ -24,7 +24,8 @@ Map[Symbol.species]
 
 species アクセサープロパティは `Map` オブジェクトのデフォルトコンストラクターを返します。サブクラスのコンストラクターは、コンストラクターに代入して変更することによりオーバーライドすることができます。
 
-> **メモ:** このプロパティは現在、どの `Map` のメソッドからも使われていません。
+> [!NOTE]
+> このプロパティは現在、どの `Map` のメソッドからも使われていません。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/math/index.md b/files/ja/web/javascript/reference/global_objects/math/index.md
index 4d07d6409060f8..19146dc636654e 100644
--- a/files/ja/web/javascript/reference/global_objects/math/index.md
+++ b/files/ja/web/javascript/reference/global_objects/math/index.md
@@ -13,7 +13,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Math
 
 他のグローバルオブジェクトと異なり、`Math` はコンストラクタではありません。`Math` オブジェクトのすべてのプロパティとメソッドは、静的です。円周率を表す定数 π は、`Math.PI` として参照でき、正弦関数は、 `Math.sin(x)` として呼び出すことができます (ここでの `x` は、メソッドの引数です)。定数は、 JavaScript における実数での完全な精度で定義されています。
 
-> **メモ:** 多くの `Math` 関数の精度は*実装に依存します*。
+> [!NOTE]
+> 多くの `Math` 関数の精度は*実装に依存します*。
 >
 > これは、ブラウザーごとに結果が異なる場合があることを意味し、同じ JavaScript エンジン上であっても、 OS やアーキテクチャが異なれば結果が異なる場合があります。
 
diff --git a/files/ja/web/javascript/reference/global_objects/math/trunc/index.md b/files/ja/web/javascript/reference/global_objects/math/trunc/index.md
index d731823458e25d..7d3ad746c9356a 100644
--- a/files/ja/web/javascript/reference/global_objects/math/trunc/index.md
+++ b/files/ja/web/javascript/reference/global_objects/math/trunc/index.md
@@ -50,7 +50,8 @@ Math.trunc(Infinity); // Infinity
 
 ### ビット単位の no-op を使った数値の切り捨て
 
-> **警告:** 無視できないエッジケースがあるため、これは `Math.trunc()` のポリフィルにはなりません。
+> [!WARNING]
+> 無視できないエッジケースがあるため、これは `Math.trunc()` のポリフィルにはなりません。
 
 ビット演算はオペランドを 32 ビット整数に変換します。一般的なテクニックは以下の通りです。
 
diff --git a/files/ja/web/javascript/reference/global_objects/number/epsilon/index.md b/files/ja/web/javascript/reference/global_objects/number/epsilon/index.md
index f0f824daf31858..22b29c0b29e4c3 100644
--- a/files/ja/web/javascript/reference/global_objects/number/epsilon/index.md
+++ b/files/ja/web/javascript/reference/global_objects/number/epsilon/index.md
@@ -78,7 +78,8 @@ console.log(equal(x + y, z, 2000 * Number.EPSILON)); // true
 
 大きさだけでなく、入力の*精度*も考慮することが重要です。例えば、数値がフォーム入力から収集され、入力値が `0.1` のステップでしか調整できない場合（すなわち [`<input type="number" step="0.1">`](/ja/docs/Web/HTML/Attributes/step)）、データは `0.1` の精度しかないので通常は `0.01` など、はるかに大きな許容差を認めることを意味します。
 
-> **メモ:** 有益な教訓：等値検査の閾値として、単純に `Number.EPSILON` を使用しないでくださ い。比較する数値の大きさや精度に適した閾値を使用してください。
+> [!NOTE]
+> 有益な教訓：等値検査の閾値として、単純に `Number.EPSILON` を使用しないでくださ い。比較する数値の大きさや精度に適した閾値を使用してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/global_objects/number/index.md b/files/ja/web/javascript/reference/global_objects/number/index.md
index 34b3e3fd0d9b05..ed0604e6e15c34 100644
--- a/files/ja/web/javascript/reference/global_objects/number/index.md
+++ b/files/ja/web/javascript/reference/global_objects/number/index.md
@@ -116,7 +116,8 @@ new Uint8Array([257, -257]); // Uint8Array(2) [ 1, 255 ]
 
 `Number` をコンストラクターとして（`new` を付けて）呼び出すと、{{jsxref("Number")}} オブジェクトを作成しますが、これはプリミティブでは**ありません**。例えば、`typeof new Number(42) === "object"` であり、`new Number(42) !== 42` となります（`new Number(42) == 42` ではあるが）。
 
-> **警告:** コンストラクターとして `Number` を使用することはほとんどないはずです。
+> [!WARNING]
+> コンストラクターとして `Number` を使用することはほとんどないはずです。
 
 ## 静的プロパティ
 
diff --git a/files/ja/web/javascript/reference/global_objects/number/number/index.md b/files/ja/web/javascript/reference/global_objects/number/number/index.md
index 5d76763c4c1502..3891797b138bd8 100644
--- a/files/ja/web/javascript/reference/global_objects/number/number/index.md
+++ b/files/ja/web/javascript/reference/global_objects/number/number/index.md
@@ -29,7 +29,8 @@ Number(value)
 
 `Number` が関数として呼び出された場合、[引数を数値プリミティブに変換します](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#数値への変換)。[長整数 (BigInt)](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt) は数値へ変換されます。値が変換できない場合は、{{jsxref("NaN")}} を返します。
 
-> **警告:** コンストラクターとして `Number` を使用することはほとんどないはずです。
+> [!WARNING]
+> コンストラクターとして `Number` を使用することはほとんどないはずです。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md
index f80cd8ec8188f7..980869268cd7c0 100644
--- a/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}}{{Deprecated_Header}}
 
-> **メモ:** この機能は非推奨となり、[ゲッター](/ja/docs/Web/JavaScript/Reference/Functions/get)は[オブジェクト初期化子の構文](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)または {{jsxref("Object.defineProperty()")}} API を使用して定義する方法に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
+> [!NOTE]
+> この機能は非推奨となり、[ゲッター](/ja/docs/Web/JavaScript/Reference/Functions/get)は[オブジェクト初期化子の構文](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)または {{jsxref("Object.defineProperty()")}} API を使用して定義する方法に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
 
 **`__defineGetter__()`** は {{jsxref("Object")}} インスタンスのメソッドで、オブジェクトのプロパティと関数を結び付け、そのプロパティが参照されるときに呼び出されるようにします。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md
index 75f260d8f8c0e1..753b7e562d8a6f 100644
--- a/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}}{{Deprecated_Header}}
 
-> **メモ:** この機能は非推奨となり、[セッター](/ja/docs/Web/JavaScript/Reference/Functions/set)は[オブジェクト初期化子の構文](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)または {{jsxref("Object.defineProperty()")}} API を使用して定義する方法に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
+> [!NOTE]
+> この機能は非推奨となり、[セッター](/ja/docs/Web/JavaScript/Reference/Functions/set)は[オブジェクト初期化子の構文](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)または {{jsxref("Object.defineProperty()")}} API を使用して定義する方法に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
 
 **`__defineSetter__()`** は {{jsxref("Object")}} インスタンスのメソッドで、オブジェクトのプロパティと関数を結び付け、そのプロパティを設定しようとすると呼び出されるようにします。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
index 81a68df0ad1ebd..c45d89cb239480 100644
--- a/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{Deprecated_Header}}
 
-> **メモ:** この機能は非推奨となり、 {{jsxref("Object.getOwnPropertyDescriptor()")}} API に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
+> [!NOTE]
+> この機能は非推奨となり、 {{jsxref("Object.getOwnPropertyDescriptor()")}} API に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
 
 **`__lookupGetter__()`** は {{jsxref("Object")}} インスタンスのメソッドで、指定されたプロパティに結びつけられているゲッター関数を返します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
index b6ca12dfea8785..1e6094834f5165 100644
--- a/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{Deprecated_Header}}
 
-> **メモ:** この機能は非推奨となり、 {{jsxref("Object.getOwnPropertyDescriptor()")}} API に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
+> [!NOTE]
+> この機能は非推奨となり、 {{jsxref("Object.getOwnPropertyDescriptor()")}} API に置き換えられました。このメソッドの動作はウェブの互換性だけのために仕様化されたものであり、どのプラットフォームでも実装することを要求されているわけではありません。どこでも動作するとは限りません。
 
 **`__lookupSetter()__`** は {{jsxref("Object")}} インスタンスのメソッドで、指定されたプロパティに結びつけられているセッター関数を返します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/constructor/index.md b/files/ja/web/javascript/reference/global_objects/object/constructor/index.md
index b09df23b5243c2..5878febbd3917c 100644
--- a/files/ja/web/javascript/reference/global_objects/object/constructor/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/constructor/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`constructor`** は {{jsxref("Object")}} インスタンスのデータプロパティで、インスタンスオブジェクトを生成したコンストラクター関数への参照を返します。なお、このプロパティの値は*関数そのものへの参照*であり、関数名を含んだ文字列ではありません。
 
-> **メモ:** これは JavaScript オブジェクトのプロパティです。クラスの `constructor` メソッドについては、[リファレンスページ](/ja/docs/Web/JavaScript/Reference/Classes/constructor)を参照してください。
+> [!NOTE]
+> これは JavaScript オブジェクトのプロパティです。クラスの `constructor` メソッドについては、[リファレンスページ](/ja/docs/Web/JavaScript/Reference/Classes/constructor)を参照してください。
 
 ## 値
 
@@ -17,7 +18,8 @@ l10n:
 
 {{js_property_attributes(1, 0, 1)}}
 
-> **メモ:** このプロパティは、既定ではすべてのコンストラクター関数の [`prototype`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function) プロパティに作成され、そのコンストラクターで作成されたすべてのオブジェクトに継承されます。
+> [!NOTE]
+> このプロパティは、既定ではすべてのコンストラクター関数の [`prototype`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function) プロパティに作成され、そのコンストラクターで作成されたすべてのオブジェクトに継承されます。
 
 ## 解説
 
@@ -297,7 +299,8 @@ console.log(new Child(1, 1).getOffsetByInitialPosition()); // { offsetX: -1, off
 
 繰り返しますが、 `Object.setPrototypeOf()`を使用するとパフォーマンスに悪影響を持つことがあるので、コンストラクター宣言の直後でインスタンスが作成される前に使用するようにしてください。
 
-> **メモ:** コンストラクターを手動で更新したり設定したりすると、異なる結果や混乱する結果を導くことがあります。これを防ぐためには、それぞれの場合に応じて `constructor` の役割を定義することが必要です。多くの場合、 `constructor` 使用されず、再割り当ての必要はありません。
+> [!NOTE]
+> コンストラクターを手動で更新したり設定したりすると、異なる結果や混乱する結果を導くことがあります。これを防ぐためには、それぞれの場合に応じて `constructor` の役割を定義することが必要です。多くの場合、 `constructor` 使用されず、再割り当ての必要はありません。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/groupby/index.md b/files/ja/web/javascript/reference/global_objects/object/groupby/index.md
index 5ad4a6fec61abd..5146c5248fe3f8 100644
--- a/files/ja/web/javascript/reference/global_objects/object/groupby/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/groupby/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}}
 
-> **メモ:** 一部のブラウザーのあるバージョンでは、このメソッドは `Array.prototype.group()` というメソッドとして実装されていました。ウェブの互換性の問題により、現在は静的メソッドとして実装されています。詳細は[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。
+> [!NOTE]
+> 一部のブラウザーのあるバージョンでは、このメソッドは `Array.prototype.group()` というメソッドとして実装されていました。ウェブの互換性の問題により、現在は静的メソッドとして実装されています。詳細は[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。
 
 **`Object.groupBy()`** 静的メソッドは、指定されたコールバック関数によって返された文字列値に従って、指定された反復可能な要素をグループ化します。返されるオブジェクトには、グループごとに個別のプロパティがあり、グループ内の要素を含む配列が格納されます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/index.md b/files/ja/web/javascript/reference/global_objects/object/index.md
index 478f025e33b9a9..197a6ddc14b911 100644
--- a/files/ja/web/javascript/reference/global_objects/object/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/index.md
@@ -311,7 +311,8 @@ Object.prototype.valueOf = function (...args) {
 };
 ```
 
-> **警告:** 組み込みコンストラクターの `prototype` プロパティを変更することは、悪い習慣であり、前方互換性を危険にさらすものです。
+> [!WARNING]
+> 組み込みコンストラクターの `prototype` プロパティを変更することは、悪い習慣であり、前方互換性を危険にさらすものです。
 
 プロトタイプについては[継承とプロトタイプチェーン](/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)で詳しく説明されています。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/keys/index.md b/files/ja/web/javascript/reference/global_objects/object/keys/index.md
index 57dc07c2272047..6b1d8a7b670a7e 100644
--- a/files/ja/web/javascript/reference/global_objects/object/keys/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/keys/index.md
@@ -78,7 +78,8 @@ console.log(Object.keys("foo")); // ['0', '1', '2']
 console.log(Object.keys(100)); // []
 ```
 
-> **メモ:** ES5 では、 `Object.keys()` にオブジェクト以外を渡すと {{jsxref("TypeError")}} が発生していました。
+> [!NOTE]
+> ES5 では、 `Object.keys()` にオブジェクト以外を渡すと {{jsxref("TypeError")}} が発生していました。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/proto/index.md b/files/ja/web/javascript/reference/global_objects/object/proto/index.md
index 58f4a3c368208b..f4b330261c16e9 100644
--- a/files/ja/web/javascript/reference/global_objects/object/proto/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/proto/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}}{{Deprecated_Header}}
 
-> **警告:** オブジェクトの `[[Prototype]]` を変更することは、現行の JavaScript エンジンがプロパティアクセスを最適化する性質上、どのブラウザーや JavaScript エンジンでも現在とても遅い処理となります。さらに、継承を変更することの効果は微妙で広範囲に及び、 `obj.__proto__ = ...` 文に費やされる時間に限らず、`[[Prototype]]` が変更されたオブジェクトにアクセスする**あらゆる**コードに及ぶ可能性があります。詳しくは [JavaScript engine fundamentals: optimizing prototypes](https://mathiasbynens.be/notes/prototypes) で説明されています。
+> [!WARNING]
+> オブジェクトの `[[Prototype]]` を変更することは、現行の JavaScript エンジンがプロパティアクセスを最適化する性質上、どのブラウザーや JavaScript エンジンでも現在とても遅い処理となります。さらに、継承を変更することの効果は微妙で広範囲に及び、 `obj.__proto__ = ...` 文に費やされる時間に限らず、`[[Prototype]]` が変更されたオブジェクトにアクセスする**あらゆる**コードに及ぶ可能性があります。詳しくは [JavaScript engine fundamentals: optimizing prototypes](https://mathiasbynens.be/notes/prototypes) で説明されています。
 
 > **警告:** `__proto__` を使用することは議論の余地があり、推奨されません。その存在と正確な動作は、ウェブの互換性を確実に保持するための古い機能として標準化されただけであり、セキュリティ上のいくつかの課題と足かせを表示しています。対応をよりよくするためには、 {{jsxref("Object.getPrototypeOf()")}}/{{jsxref("Reflect.getPrototypeOf()")}} や {{jsxref("Object.setPrototypeOf()")}}/{{jsxref("Reflect.setPrototypeOf()")}} を推奨します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/setprototypeof/index.md b/files/ja/web/javascript/reference/global_objects/object/setprototypeof/index.md
index 6825900f373b54..ddf331b49afab8 100644
--- a/files/ja/web/javascript/reference/global_objects/object/setprototypeof/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/setprototypeof/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Object.setPrototypeOf()`** 静的メソッドは、指定されたオブジェクトのプロトタイプ（つまり、内部の `[[Prototype]]` プロパティ）を、別のオブジェクトまたは [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) に設定します。
 
-> **警告:** オブジェクトの `[[Prototype]]` を変更すると、 [最近の JavaScript エンジンがプロパティへのアクセスを最適化する方法](https://mathiasbynens.be/notes/prototypes)の特質上、すべてのブラウザーや JavaScript エンジンで、操作がとても低速になります。さらに、プロトタイプを変更することの性能への影響は細かく広範囲にわたり、 `Object.setPrototypeOf(...)` 文に費やされる時間だけではなく、 `[[Prototype]]` が変更されたすべてのオブジェクトへのアクセスを持つ**_すべて_**のコードに影響する可能性があります。詳しくは [JavaScript engine fundamentals: optimizing prototypes](https://mathiasbynens.be/notes/prototypes) をお読みください。
+> [!WARNING]
+> オブジェクトの `[[Prototype]]` を変更すると、 [最近の JavaScript エンジンがプロパティへのアクセスを最適化する方法](https://mathiasbynens.be/notes/prototypes)の特質上、すべてのブラウザーや JavaScript エンジンで、操作がとても低速になります。さらに、プロトタイプを変更することの性能への影響は細かく広範囲にわたり、 `Object.setPrototypeOf(...)` 文に費やされる時間だけではなく、 `[[Prototype]]` が変更されたすべてのオブジェクトへのアクセスを持つ**_すべて_**のコードに影響する可能性があります。詳しくは [JavaScript engine fundamentals: optimizing prototypes](https://mathiasbynens.be/notes/prototypes) をお読みください。
 >
 > この機能は言語の一部であるため、その機能の実装による負荷は (理念上は) エンジンの開発者によります。エンジンの開発者がこの問題に対処するまでの間、性能が気になる場合は、オブジェクトの `[[Prototype]]` を変更することは避けるべきです。代わりに、 {{jsxref("Object.create()")}} を使用して必要な `[[Prototype]]` をもつオブジェクトを生成してください。
 
diff --git a/files/ja/web/javascript/reference/global_objects/object/valueof/index.md b/files/ja/web/javascript/reference/global_objects/object/valueof/index.md
index d6e105034310ea..a9a67c631afdc0 100644
--- a/files/ja/web/javascript/reference/global_objects/object/valueof/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/valueof/index.md
@@ -25,7 +25,8 @@ valueOf()
 
 指定されたオブジェクトのプリミティブ値を返します。
 
-> **メモ:** 型変換の際に `valueOf` が有益であるためには、プリミティブを返す必要があります。すべてのプリミティブ型は自分自身で `valueOf()` メソッドを持っているので、一般的に `aPrimitiveValue.valueOf()` を呼び出しても `Object.prototype.valueOf()` は呼び出されません。
+> [!NOTE]
+> 型変換の際に `valueOf` が有益であるためには、プリミティブを返す必要があります。すべてのプリミティブ型は自分自身で `valueOf()` メソッドを持っているので、一般的に `aPrimitiveValue.valueOf()` を呼び出しても `Object.prototype.valueOf()` は呼び出されません。
 
 ## 解説
 
diff --git a/files/ja/web/javascript/reference/global_objects/parseint/index.md b/files/ja/web/javascript/reference/global_objects/parseint/index.md
index 258fdb6ad014b2..cc8f235d25dc32 100644
--- a/files/ja/web/javascript/reference/global_objects/parseint/index.md
+++ b/files/ja/web/javascript/reference/global_objects/parseint/index.md
@@ -33,7 +33,8 @@ parseInt(string, radix)
 - `radix` が `2` よりも小さいか `36` よりも大きい、または
 - ホワイトスペース以外の最初の文字が数値に変換できない。
 
-> **メモ:** JavaScript は言語レベルで「浮動小数点数」と「整数」の区別がありません。 `parseInt()` と [`parseFloat()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) は解釈の動作が異なるだけで、必ずしも返値が異なるわけではありません。例えば、 `parseInt("42")` と `parseFloat("42")` は同じ値である数値型の 42 を返します。
+> [!NOTE]
+> JavaScript は言語レベルで「浮動小数点数」と「整数」の区別がありません。 `parseInt()` と [`parseFloat()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) は解釈の動作が異なるだけで、必ずしも返値が異なるわけではありません。例えば、 `parseInt("42")` と `parseFloat("42")` は同じ値である数値型の 42 を返します。
 
 ## 解説
 
@@ -46,7 +47,8 @@ parseInt(string, radix)
 1. 入力された `string` の先頭のホワイトスペースと、存在すれば `+`/`-` 符号が除去され、 `0x` または `0X` （ゼロ、従うこと以下で小文字または大文字の X）で始まっている場合、 `radix` は `16` とみなされ、文字列の残りの部分は 16 進数として解釈されます。
 2. 入力された `string` が他の何らかの値で始まる場合、基数は `10` （10 進数）になります。
 
-> **メモ:** 他にも `0b` のような接頭辞は[数値リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#2_進数)では有効ですが、 `parseInt()` では通常の数字として扱われます。 `parseInt()` は `0` で始まる文字列を 8 進数の値として扱うことはありません。 `parseInt()` が認識できる接頭辞は、16 進数の値に対する `0x` または `0X` だけです。 `radix` がなければ、それ以外はすべて 10 進数として解釈されます。
+> [!NOTE]
+> 他にも `0b` のような接頭辞は[数値リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#2_進数)では有効ですが、 `parseInt()` では通常の数字として扱われます。 `parseInt()` は `0` で始まる文字列を 8 進数の値として扱うことはありません。 `parseInt()` が認識できる接頭辞は、16 進数の値に対する `0x` または `0X` だけです。 `radix` がなければ、それ以外はすべて 10 進数として解釈されます。
 
 基数が `16` の場合、 `parseInt()` では、オプションで符号文字 (`+`/`-`) の後に `0x` または `0X` を接頭辞として文字列を指定することができます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/promise/all/index.md b/files/ja/web/javascript/reference/global_objects/promise/all/index.md
index 612acb118260f6..9618de79f78d1b 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/all/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/all/index.md
@@ -34,7 +34,8 @@ Promise.all(iterable)
 
 `Promise.all()` メソッドは、[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)メソッドのうちの一つです。このメソッドは、複数のプロミスの結果を集約するのに便利です。このメソッドは、コード全体が正常に動作するために依存している複数の関連する非同期タスクがあり、コードの実行を続ける前にそれらすべてを履行させたい場合によく使われます。
 
-> **メモ:** 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
+> [!NOTE]
+> 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
 
 `Promise.all()` は、入力されたプロミスの**いずれか**が拒否されると直ちに拒否されます。それに対して、{{jsxref("Promise.allSettled()")}} が返すプロミスは、入力されたプロミスのいずれかが拒否されたかどうかに関わらず、すべての入力されたプロミスが完了するのを待ちます。入力された反復可能オブジェクトに含まれるプロミスのすべての最終結果が必要な場合は、`allSettled()` を使用してください。
 
diff --git a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md
index fd887a6eda2082..ffde5de304f183 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md
@@ -42,7 +42,8 @@ Promise.allSettled(iterable)
 
 `Promise.allSettled()` メソッドは[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理) メソッドの 1 つです。`Promise.allSettled()` は、通常、正常に完了するために互いに依存しない複数の非同期タスクがある場合、または各プロミスの結果を常に知りたい場合に使用されます。
 
-> **メモ:** 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
+> [!NOTE]
+> 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
 
 それに対して、 {{jsxref("Promise.all()")}} が返すプロミスは、タスクが他にも依存している場合や、どれかが拒否されたらすぐに拒否したい場合により適しているかもしれません。
 
diff --git a/files/ja/web/javascript/reference/global_objects/promise/any/index.md b/files/ja/web/javascript/reference/global_objects/promise/any/index.md
index f5b08ed8b44ca2..eaf4e09183052a 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/any/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/any/index.md
@@ -34,7 +34,8 @@ Promise.any(iterable)
 
 `Promise.any()` メソッドは[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)メソッドの 1 つです。このメソッドは、最初に履行されたプロミスを返すのに有益なものです。最初のプロミスが履行された後は短絡的に処理するので、一つを見つけると、他のプロミスが完了するのを待つことはありません。
 
-> **メモ:** 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
+> [!NOTE]
+> 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
 
 {{JSxRef("Promise.all()")}} が履行された値の _配列_ を返すのとは異なり、 1 つの履行値だけを取得します（少なくとも 1 つのプロミスが履行されることを想定しています）。これは、履行されるプロミスが 1 つだけ必要で、どれが履行されるかは気にしない場合、有益なことがあります。もう一つの異なる形に注意してください。このメソッドは、_空の反復可能オブジェクト_ を受け取ると拒否します。なぜなら、正直に言うと、反復処理オブジェクトには、履行されるアイテムが格納されていないからです。`Promise.any()` と `Promise.all()` を {{jsxref("Array.prototype.some()")}} と {{jsxref("Array.prototype.every()")}} で比較することができます。
 
diff --git a/files/ja/web/javascript/reference/global_objects/promise/catch/index.md b/files/ja/web/javascript/reference/global_objects/promise/catch/index.md
index 5c6351866d344f..4c08c39b449214 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/catch/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/catch/index.md
@@ -66,7 +66,8 @@ Promise.resolve().catch(function XXX() {});
 
 `catch()` は `then()` を呼び出すだけなので、サブクラス化に対応しています。
 
-> **メモ:** 下記の例では、[`Error`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Error) のインスタンスを例外として発生させています。同期 [`throw`](/ja/docs/Web/JavaScript/Reference/Statements/throw) 文と同様、これは良い習慣と考えられています。さもなければ、捕捉を行う部分は引数が文字列かエラーかを調べる必要があり、スタックトレースのような貴重な情報を失う可能性があります。
+> [!NOTE]
+> 下記の例では、[`Error`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Error) のインスタンスを例外として発生させています。同期 [`throw`](/ja/docs/Web/JavaScript/Reference/Statements/throw) 文と同様、これは良い習慣と考えられています。さもなければ、捕捉を行う部分は引数が文字列かエラーかを調べる必要があり、スタックトレースのような貴重な情報を失う可能性があります。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/promise/finally/index.md b/files/ja/web/javascript/reference/global_objects/promise/finally/index.md
index 078ce251bb44be..4ed563c7430f44 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/finally/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/finally/index.md
@@ -48,7 +48,8 @@ finally(() => {
 
 {{jsxref("Promise/catch", "catch()")}} と同様に、 `finally()` は内部的に呼び出されたオブジェクトの `then` メソッドを呼び出します。もし `onFinally` が関数でない場合、 `then()` は `onFinally` を両方の引数として呼び出されます。これは {{jsxref("Promise.prototype.then()")}} にとって、有益なハンドラーが添付されないということを意味します。そうでなければ、`then()` は内部で作成された 2 つの関数で呼び出され、以下のような振る舞いをします。
 
-> **警告:** これは説明用のものであり、ポリフィルではありません。
+> [!WARNING]
+> これは説明用のものであり、ポリフィルではありません。
 
 ```js
 promise.then(
diff --git a/files/ja/web/javascript/reference/global_objects/promise/index.md b/files/ja/web/javascript/reference/global_objects/promise/index.md
index a87a67b3e9af30..2585e2c1bbf450 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/index.md
@@ -42,7 +42,8 @@ new Promise((resolveOuter) => {
 
 このプロミスは作成された時点ですでに _解決_ されていますが（`resolveOuter` が同期的に呼び出されるため）、別のプロミスで解決されているため、 1 秒後に内側のプロミスが履行されるまで _履行_ されません。実際には、「解決」は舞台裏で行われ、観察することができず、履行か拒否かだけを観察することができます。
 
-> **メモ:** Scheme など一部の言語では、遅延評価や計算を延期する機構を持っており、これらも「プロミス」と呼ばれます。 JavaScript におけるプロミスは、すでに起きつつある処理を表し、この処理はコールバック関数を使うことで連鎖させることができます。式を遅延評価する方法を探しているのであれば、引数なしの関数を使用するを検討してください。 `f = () => expression` で遅延評価される式が作成でき、 `f()` でその式を直ちに評価することができます。
+> [!NOTE]
+> Scheme など一部の言語では、遅延評価や計算を延期する機構を持っており、これらも「プロミス」と呼ばれます。 JavaScript におけるプロミスは、すでに起きつつある処理を表し、この処理はコールバック関数を使うことで連鎖させることができます。式を遅延評価する方法を探しているのであれば、引数なしの関数を使用するを検討してください。 `f = () => expression` で遅延評価される式が作成でき、 `f()` でその式を直ちに評価することができます。
 
 ### プロミスの連鎖
 
@@ -91,7 +92,8 @@ myPromise
   });
 ```
 
-> **メモ:** より高速に実行するためには、できればすべての同期アクションを 1 つのハンドラー内で行うようにしてください。そうしなければ、すべてのハンドラーを順番に実行するのに数カウントかかることになります。
+> [!NOTE]
+> より高速に実行するためには、できればすべての同期アクションを 1 つのハンドラー内で行うようにしてください。そうしなければ、すべてのハンドラーを順番に実行するのに数カウントかかることになります。
 
 プロミスの終了条件は、その連鎖内の次のプロミスの「決定」状態を決定します。「履行」状態はプロミスの完了が成功したことを示し、「拒否」状態は成功しなかったことを示します。連鎖内で履行されたそれぞれのプロミスの返値は、次の `.then()` に渡され、拒否された理由は連鎖内の次の拒否ハンドラー関数に渡されます。
 
@@ -438,7 +440,8 @@ btn.addEventListener("click", testPromise);
 
 上記の例では、現行の設定オブジェクトが追跡されたときのみ `<iframe>` の内部のテキストが更新されます。これは、現行のものを追跡しないと、メッセージを送る環境を間違えてしまう可能性があるからです。
 
-> **メモ:** 現在のところ、現行の領域の追跡は Firefox では完全に実装されており、 Chrome と Safari では部分的に実装されています。
+> [!NOTE]
+> 現在のところ、現行の領域の追跡は Firefox では完全に実装されており、 Chrome と Safari では部分的に実装されています。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/global_objects/promise/race/index.md b/files/ja/web/javascript/reference/global_objects/promise/race/index.md
index 7c27daab8ab1f0..6250e679e961a0 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/race/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/race/index.md
@@ -30,7 +30,8 @@ Promise.race(iterable)
 
 `Promise.race()` メソッドは[プロミス並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#promise_concurrency)メソッドの 1 つです。これは最初の非同期タスクを完全に完了させたいが、最終的な状態は気にしない（つまり、成功も失敗もあり得る）場合に有用です。
 
-> **メモ:** 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
+> [!NOTE]
+> 日本語の技術文書では、このメソッドが複数のプロミスを並列に処理すると説明されることがありますが、実際には複数のスレッドでプロミスが処理されるわけではないことに注意してください。詳細は[プロミスの並行処理](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#プロミスの並行処理)を参照してください。
 
 反復可能オブジェクトに 1 つ以上の非プロミス値および/または既に確定したプロミスが格納されている場合、 `Promise.race()` は反復可能オブジェクトで最初に見つかった値に確定します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/promise/resolve/index.md b/files/ja/web/javascript/reference/global_objects/promise/resolve/index.md
index 1dcb8a59a7cfd3..ffeb132833f673 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/resolve/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/resolve/index.md
@@ -162,7 +162,8 @@ Promise.resolve(thenable).then((v) => {
 });
 ```
 
-> **警告:** 自分自身に解決する thenable に対して `Promise.resolve()` を呼び出さないでください。これは無限にネストしたプロミスを平坦化しようとするため、無限の再帰を引き起こします。
+> [!WARNING]
+> 自分自身に解決する thenable に対して `Promise.resolve()` を呼び出さないでください。これは無限にネストしたプロミスを平坦化しようとするため、無限の再帰を引き起こします。
 
 ```js example-bad
 const thenable = {
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md b/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md
index 42e6800186da9f..f5cb9d972fbae4 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md
@@ -104,7 +104,8 @@ abb を見つけました。次の照合は 3 からです。
 ab を見つけました。次の照合は 9 からです。
 ```
 
-> **警告:** 無限ループに陥る落とし穴がたくさんあります。
+> [!WARNING]
+> 無限ループに陥る落とし穴がたくさんあります。
 >
 > - 正規表現リテラル（または {{jsxref("RegExp")}} コンストラクター）を `while` 条件内に配置しないでください。反復処理するたびに正規表現が再作成され、 {{jsxref("RegExp/lastIndex", "lastIndex")}} がリセットされます。
 > - [グローバルフラグ (`g`)](/ja/docs/Web/JavaScript/Guide/Regular_expressions#フラグを用いた高度な検索) が設定されているかを確認してください。さもないと `lastIndex` が進行しなくなります。
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/index.md b/files/ja/web/javascript/reference/global_objects/regexp/index.md
index c13dcf95a9bd38..b44e2c461f3b89 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/index.md
@@ -52,7 +52,8 @@ const re = new RegExp("\\w+");
 
 ### 正規表現の特殊な扱い
 
-> **メモ:** 何かが「正規表現」であるかどうかは、[ダックタイピング](https://ja.wikipedia.org/wiki/%E3%83%80%E3%83%83%E3%82%AF%E3%83%BB%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0)になります。 `RegExp` である必要はありません。
+> [!NOTE]
+> 何かが「正規表現」であるかどうかは、[ダックタイピング](https://ja.wikipedia.org/wiki/%E3%83%80%E3%83%83%E3%82%AF%E3%83%BB%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0)になります。 `RegExp` である必要はありません。
 
 いくつかの組み込みメソッドは、正規表現を特別に扱います。 `x` が正規表現であるかどうかを[複数のステップ](https://tc39.es/ecma262/#sec-isregexp)を経て判断します。
 
@@ -274,7 +275,8 @@ const url = "http://xxx.domain.com";
 console.log(/^https?:\/\/(.+?)\./.exec(url)[1]); // 'xxx'
 ```
 
-> **メモ:** URL を解釈するには、正規表現を使用するより、 [URL API](/ja/docs/Web/API/URL_API) におけるブラウザー内蔵の URL パーサーを使用することをお勧めします。
+> [!NOTE]
+> URL を解釈するには、正規表現を使用するより、 [URL API](/ja/docs/Web/API/URL_API) におけるブラウザー内蔵の URL パーサーを使用することをお勧めします。
 
 ### 動的な入力からの正規表現の構築
 
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/input/index.md b/files/ja/web/javascript/reference/global_objects/regexp/input/index.md
index dbc8cabd07a465..9d17d89dcd740b 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/input/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/input/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{Deprecated_Header}}
 
-> **メモ:** グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
+> [!NOTE]
+> グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
 
 **`RegExp.input`** は静的アクセサープロパティで、正規表現の一致した文字列を返します。`RegExp.$_` はこのプロパティのエイリアスです。
 
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md
index 9533fe09a17512..6a16d20a009b31 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md
@@ -108,7 +108,8 @@ console.log(
 
 `mdLinkPattern.lastIndex += resolvedLink.length - originalLink.length` の行を削除して、2 番目の例を実行してみてください。文字列が短縮された後、`lastIndex` が既にリンクのインデックスを過ぎているため、2 番目のリンクが正しく置換されないことがわかります。
 
-> **警告:** この例はデモ専用のためのものです。Markdown を扱うには、正規表現の代わりに構文解析ライブラリーを使用してください。
+> [!WARNING]
+> この例はデモ専用のためのものです。Markdown を扱うには、正規表現の代わりに構文解析ライブラリーを使用してください。
 
 ### 検索の最適化
 
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.md b/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.md
index 4ee0dce43353a3..0e9c8e13130940 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{deprecated_header}}
 
-> **メモ:** グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
+> [!NOTE]
+> グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
 
 **`RegExp.lastMatch`** は静的アクセサープロパティで、最後に一致した部分文字列を返します。`RegExp["$&"]` はこのプロパティの別名です。
 
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.md b/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.md
index 58a7433cbd798a..6f41835abe31b5 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{deprecated_header}}
 
-> **メモ:** グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
+> [!NOTE]
+> グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
 
 **`RegExp.lastParen`** は静的アクセサープロパティで、最後に一致した括弧で括られた部分文字列があれば返します。`RegExp["$+"]` はこのプロパティの別名です。
 
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.md b/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.md
index 6eb5ffb64d3f86..c0753838cd07ad 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{deprecated_header}}
 
-> **メモ:** グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
+> [!NOTE]
+> グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
 
 **`RegExp.leftContext`** は静的アクセサープロパティで、最近一致した文字列の前の部分文字列を返します。``RegExp["$`"]`` はこのプロパティの別名です。
 
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/n/index.md b/files/ja/web/javascript/reference/global_objects/regexp/n/index.md
index 87a3af51e1d1af..128fe763a031f4 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/n/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/n/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{deprecated_header}}
 
-> **メモ:** グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
+> [!NOTE]
+> グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
 
 **`RegExp.$1, …, RegExp.$9`** は静的アクセサープロパティで、括弧で括られた部分文字列に一致したものを返します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/rightcontext/index.md b/files/ja/web/javascript/reference/global_objects/regexp/rightcontext/index.md
index 869f7b2551afa2..bf541ec7c2292c 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/rightcontext/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/rightcontext/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{JSRef}} {{deprecated_header}}
 
-> **メモ:** グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
+> [!NOTE]
+> グローバルに最後の一致状態を公開する `RegExp` の静的プロパティは、すべて非推奨です。詳しくは[非推奨の RegExp 機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)を参照してください。
 
 **`RegExp.rightContext`** は静的アクセサープロパティで、最新の一致に続く部分文字列が入ります。`RegExp["$'"]` はこのプロパティの別名です。
 
diff --git a/files/ja/web/javascript/reference/global_objects/set/symbol.species/index.md b/files/ja/web/javascript/reference/global_objects/set/symbol.species/index.md
index ca58233d663267..bf042b4a781b99 100644
--- a/files/ja/web/javascript/reference/global_objects/set/symbol.species/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/symbol.species/index.md
@@ -24,7 +24,8 @@ Set[Symbol.species]
 
 `@@species` アクセサープロパティは、 `Set` オブジェクトの既定のコンストラクターを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドすることができます。
 
-> **メモ:** このプロパティは現在、 `Set` のどのメソッドでも使用されていません。
+> [!NOTE]
+> このプロパティは現在、 `Set` のどのメソッドでも使用されていません。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/index.md b/files/ja/web/javascript/reference/global_objects/string/index.md
index 33d46c74ca9ec0..02a7a922388d71 100644
--- a/files/ja/web/javascript/reference/global_objects/string/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/index.md
@@ -302,7 +302,8 @@ Unicode 文字の上に、書記素クラスターと呼ばれる 1 つの視覚
 
 ### HTML ラッパーメソッド
 
-> **メモ:** 非推奨です。これらのメソッドは避けてください。
+> [!NOTE]
+> 非推奨です。これらのメソッドは避けてください。
 >
 > これらはとても古い HTML 標準に基づいており、現在利用できる HTML タグや属性のサブセットしか提供していないため、使用するのには限界があります。多くが今日では非推奨または標準外のマークアップを生成します。さらに、単純な文字列の連結を検証やサニタイズなしに行うため、[`innerHTML`](/ja/docs/Web/API/Element/innerHTML) を使用して直接挿入するとセキュリティ上の脅威となる可能性があります。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model)、例えば [`document.createElement()`](/ja/docs/Web/API/Document/createElement) など使用してください。
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/localecompare/index.md b/files/ja/web/javascript/reference/global_objects/string/localecompare/index.md
index d5d13053e9e048..ac1edc7424757c 100644
--- a/files/ja/web/javascript/reference/global_objects/string/localecompare/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/localecompare/index.md
@@ -57,7 +57,8 @@ localeCompare(compareString, locales, options)
 - `referenceStr` が `compareString` より後に出現するものである場合は正の数
 - 等しい場合は `0`
 
-> **警告:** 返値が正確な `-1` または `1` であると思わないでください。
+> [!WARNING]
+> 返値が正確な `-1` または `1` であると思わないでください。
 >
 > 結果の負の整数と正の整数は、ブラウザー間（およびブラウザーのバージョン間）で異なります。これは W3C の仕様が負の値か正の値かとだけ指定しているためです。ブラウザーによっては `-2` や `2` を、あるいは他の負の値、正の値を返却するかもしれません。
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/replace/index.md b/files/ja/web/javascript/reference/global_objects/string/replace/index.md
index 77bd01c2fcc7a9..b916c48b3a9130 100644
--- a/files/ja/web/javascript/reference/global_objects/string/replace/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/replace/index.md
@@ -76,7 +76,8 @@ replace(pattern, replacement)
 
 第 2 引数として関数を指定することができます。この場合、関数は照合が行われた後に実行されます。関数呼び出しの結果（返値）が、置換文字列として使われます
 
-> **メモ:** 上記の特殊な置き換えパターンは、置き換え関数から返される文字列には適用されません。
+> [!NOTE]
+> 上記の特殊な置き換えパターンは、置き換え関数から返される文字列には適用されません。
 
 関数の形式は次の通りです。
 
@@ -128,7 +129,8 @@ console.log(newstr); // Twas the night before Christmas...
 
 これは `'Twas the night before Christmas...'` と出力します。
 
-> **メモ:** 正規表現についてのその他の例は[このガイド](/ja/docs/Web/JavaScript/Guide/Regular_expressions)を参照してください。
+> [!NOTE]
+> 正規表現についてのその他の例は[このガイド](/ja/docs/Web/JavaScript/Guide/Regular_expressions)を参照してください。
 
 ### 大文字小文字を区別しないフラグとグローバルフラグの使用
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/split/index.md b/files/ja/web/javascript/reference/global_objects/string/split/index.md
index 8dd2995a54a898..668c2938186cd9 100644
--- a/files/ja/web/javascript/reference/global_objects/string/split/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/split/index.md
@@ -37,9 +37,11 @@ split(separator, limit)
 
 `separator` が空文字列 (`""`) の場合、`str` は UTF-16 の「文字」の配列に変換され、両端が空文字列になることはありません。
 
-> **メモ:** したがって、`"".split("")` は `separator` として文字列を渡されたときに空文字列の配列を生成する唯一の方法です。
+> [!NOTE]
+> したがって、`"".split("")` は `separator` として文字列を渡されたときに空文字列の配列を生成する唯一の方法です。
 
-> **警告:** 区切り文字として空文字列 (`""`) が用いられた場合、文字列はユーザが認識する文字（[書記素クラスタ](https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries)）や Unicode 文字（コードポイント）ではなく、UTF-16 コード単位で分割されます。 これは[サロゲートペア](https://unicode.org/faq/utf_bom.html#utf16-2)を破壊します。[StackOverflow の "How do you get a string to a character array in JavaScript?"](https://stackoverflow.com/questions/4547609/how-to-get-character-array-from-a-string/34717402#34717402) を参照してください。
+> [!WARNING]
+> 区切り文字として空文字列 (`""`) が用いられた場合、文字列はユーザが認識する文字（[書記素クラスタ](https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries)）や Unicode 文字（コードポイント）ではなく、UTF-16 コード単位で分割されます。 これは[サロゲートペア](https://unicode.org/faq/utf_bom.html#utf16-2)を破壊します。[StackOverflow の "How do you get a string to a character array in JavaScript?"](https://stackoverflow.com/questions/4547609/how-to-get-character-array-from-a-string/34717402#34717402) を参照してください。
 
 `separator` が空文字列に一致する正規表現である場合、一致する文字列が UTF-16 コード単位で分割されるか、Unicode コード点で分割されるかは、正規表現が [Unicode-aware](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode#unicode-aware_mode) かどうかに依存します。
 
diff --git a/files/ja/web/javascript/reference/global_objects/symbol/index.md b/files/ja/web/javascript/reference/global_objects/symbol/index.md
index b222c8d3d5a843..01657f754c1f39 100644
--- a/files/ja/web/javascript/reference/global_objects/symbol/index.md
+++ b/files/ja/web/javascript/reference/global_objects/symbol/index.md
@@ -24,7 +24,8 @@ console.log(Sym1 === Sym2); // "false" を返す
 // 異なる値を持ちます。
 ```
 
-> **メモ:** Ruby (または他の言語) の _"symbols"_ と呼ばれる機能をよくご存知であれば、間違えないでください。 JavaScript のシンボルは異なります。
+> [!NOTE]
+> Ruby (または他の言語) の _"symbols"_ と呼ばれる機能をよくご存知であれば、間違えないでください。 JavaScript のシンボルは異なります。
 
 _Symbol_ 型は ECMAScript 2015 の新機能であり、 ECMAScript 5 にはシンボルに相当するものはありません。
 
diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/index.md
index 1809da1b8d07e8..366a82feeeb7de 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/index.md
@@ -145,7 +145,8 @@ new TypedArray(buffer, byteOffset, length)
 
 ここで _TypedArray_ は特定の型のコンストラクターのうちの一つを表します。
 
-> **メモ:** すべての `TypedArray` サブクラスのコンストラクターは [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) を使ってのみ構築することができます。`new` なしで呼び出そうとすると {{jsxref("TypeError")}} が発生します。
+> [!NOTE]
+> すべての `TypedArray` サブクラスのコンストラクターは [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) を使ってのみ構築することができます。`new` なしで呼び出そうとすると {{jsxref("TypeError")}} が発生します。
 
 ### 引数
 
diff --git a/files/ja/web/javascript/reference/global_objects/undefined/index.md b/files/ja/web/javascript/reference/global_objects/undefined/index.md
index b51d1218884518..a7fda530e02465 100644
--- a/files/ja/web/javascript/reference/global_objects/undefined/index.md
+++ b/files/ja/web/javascript/reference/global_objects/undefined/index.md
@@ -25,7 +25,8 @@ undefined;
 
 まだ値が代入されていない変数は `undefined` 型となります。評価しようとしている変数に値が代入されていない場合、メソッドや文も `undefined` を返します。値を {{jsxref("Statements/return", "return")}} しない関数も `undefined` を返します。
 
-> **メモ:** グローバルスコープ以外のスコープでは `undefined` を{{Glossary("identifier", "識別子")}} (変数名) として使うことができますが (`undefined` は{{jsxref("Lexical_grammar", "予約語", "", 1)}}でないため)、コードの管理やデバッグが困難になるためおすすめできません。
+> [!NOTE]
+> グローバルスコープ以外のスコープでは `undefined` を{{Glossary("identifier", "識別子")}} (変数名) として使うことができますが (`undefined` は{{jsxref("Lexical_grammar", "予約語", "", 1)}}でないため)、コードの管理やデバッグが困難になるためおすすめできません。
 >
 > ```js example-bad
 > //こんなことはしないこと！
@@ -57,7 +58,8 @@ if (x === undefined) {
 }
 ```
 
-> **メモ:** ここでは、標準の等価演算子ではなく厳密等価演算子を使わないといけません。厳密等価演算子とは違い、 `x == undefined` は、 `x` が `null` であるかどうかもチェックするからです。 `null` は `undefined` と等しくありません。
+> [!NOTE]
+> ここでは、標準の等価演算子ではなく厳密等価演算子を使わないといけません。厳密等価演算子とは違い、 `x == undefined` は、 `x` が `null` であるかどうかもチェックするからです。 `null` は `undefined` と等しくありません。
 >
 > 詳しくは、{{jsxref("Operators", "比較演算子","",1)}}を参照してください。
 
diff --git a/files/ja/web/javascript/reference/global_objects/unescape/index.md b/files/ja/web/javascript/reference/global_objects/unescape/index.md
index c7e57efc6c72c9..14d573f79796cf 100644
--- a/files/ja/web/javascript/reference/global_objects/unescape/index.md
+++ b/files/ja/web/javascript/reference/global_objects/unescape/index.md
@@ -14,7 +14,8 @@ l10n:
 
 **`unescape()`** 関数は 16 進数エスケープシーケンスを、それが表す文字列に置換します。エスケープシーケンスは {{jsxref("escape")}} などの関数によって生成されます。通常は {{jsxref("decodeURI")}} または {{jsxref("decodeURIComponent")}} が `unescape` よりも推奨されます。
 
-> **メモ:** URI のデコードに `unescape` を使用しないでください。代わりに `decodeURI` を使用してください。
+> [!NOTE]
+> URI のデコードに `unescape` を使用しないでください。代わりに `decodeURI` を使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/weakref/index.md b/files/ja/web/javascript/reference/global_objects/weakref/index.md
index 4a54266096bbe3..8806b5b244f660 100644
--- a/files/ja/web/javascript/reference/global_objects/weakref/index.md
+++ b/files/ja/web/javascript/reference/global_objects/weakref/index.md
@@ -51,7 +51,8 @@ l10n:
 
   - : インスタンスオブジェクトを作成したコンストラクター関数です。 `WeakRef` インスタンスの場合、初期値は {{jsxref("WeakRef/WeakRef", "WeakRef")}} コンストラクターです。
 
-    > **メモ:** このプロパティは仕様上 "normative optional" とされており、適合性のある実装では `constructor` プロパティを公開しないことを意味しています。これにより、任意のコードが `WeakRef` コンストラクターを取得し、ガベージコレクションを監視することができなくなります。しかし、主要なエンジンはすべて既定では公開しています。
+    > [!NOTE]
+    > このプロパティは仕様上 "normative optional" とされており、適合性のある実装では `constructor` プロパティを公開しないことを意味しています。これにより、任意のコードが `WeakRef` コンストラクターを取得し、ガベージコレクションを監視することができなくなります。しかし、主要なエンジンはすべて既定では公開しています。
 
 - `WeakRef.prototype[@@toStringTag]`
   - : [`@@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列 `"WeakRef"` です。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。
diff --git a/files/ja/web/javascript/reference/global_objects/weakset/index.md b/files/ja/web/javascript/reference/global_objects/weakset/index.md
index 655b2eef362dc5..cd1c628c98571e 100644
--- a/files/ja/web/javascript/reference/global_objects/weakset/index.md
+++ b/files/ja/web/javascript/reference/global_objects/weakset/index.md
@@ -16,7 +16,8 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakSet
 - `WeakSet` は**オブジェクトのみ**のコレクションです。 {{jsxref("Set")}} のように、任意の型の自由な値を入れることはできません。
 - `WeakSet` は*弱い参照*です。コレクション内のオブジェクトへの*弱い参照*で保持されます。 `WeakSet` 内に格納されているオブジェクトへの参照が他にない場合、ガベージコレクションにより削除されます。
 
-  > **メモ:** これは、このコレクションに格納されているオブジェクトの現在のリストが存在しないことを意味します。 `WeakSets` は列挙可能ではありません。
+  > [!NOTE]
+  > これは、このコレクションに格納されているオブジェクトの現在のリストが存在しないことを意味します。 `WeakSets` は列挙可能ではありません。
 
 ### 使用例: 循環参照の検出
 
diff --git a/files/ja/web/javascript/reference/iteration_protocols/index.md b/files/ja/web/javascript/reference/iteration_protocols/index.md
index c1bad633e77dc6..027d23684c47d7 100644
--- a/files/ja/web/javascript/reference/iteration_protocols/index.md
+++ b/files/ja/web/javascript/reference/iteration_protocols/index.md
@@ -60,7 +60,8 @@ l10n:
 - `throw(exception)` {{optional_inline}}
   - : 0 個または 1 個の引数を受け入れ、`IteratorResult` インターフェースに適合したオブジェクトを返す関数であり、通常 `done` は `true` に等しくなります。このメソッドを呼び出すと、呼び出し側がエラー状態を検出したことをイテレーターに指示し、`exception` は通常 {{jsxref("Error")}} インスタンスとなります。
 
-> **メモ:** 特定のオブジェクトがイテレータープロトコルを実装しているかどうかを反射的に（つまり、実際に `next()` を呼び出して、返された結果を検証することなく）知ることは不可能です。
+> [!NOTE]
+> 特定のオブジェクトがイテレータープロトコルを実装しているかどうかを反射的に（つまり、実際に `next()` を呼び出して、返された結果を検証することなく）知ることは不可能です。
 
 イテレーターはとても簡単に反復可能オブジェクトにすることができます。`[@@iterator]()` メソッドを実装して `this` を返すだけです。
 
diff --git a/files/ja/web/javascript/reference/lexical_grammar/index.md b/files/ja/web/javascript/reference/lexical_grammar/index.md
index c60c6e4ec48532..3538a808405bcd 100644
--- a/files/ja/web/javascript/reference/lexical_grammar/index.md
+++ b/files/ja/web/javascript/reference/lexical_grammar/index.md
@@ -39,7 +39,8 @@ JavaScriptのソーステキストでは、 \<ZWNJ> と \<ZWJ> は[識別子](#
 
 > **メモ:** ["White_Space" プロパティがあるが "Space_Separator" 一般カテゴリーにない文字](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BWhite_Space%7D%26%5CP%7BGeneral_Category%3DSpace_Separator%7D)のうち、 U+0009, U+000B, U+000C は JavaScript でもホワイトスペースとして扱われ、 U+0085 NEXT LINE は特別な役割を持たず、他にも[改行文字](#改行文字)の集合となるものがあります。
 
-> **メモ:** JavaScript エンジンで使用される Unicode 規格が変更されると、プログラムの動作に影響を与える可能性があります。例えば、 ES2016 では参照する Unicode 規格が 5.1 から 8.0.0 にアップグレードされ、その影響で U+180E MONGOLIAN VOWEL SEPARATOR が "Space_Separator" カテゴリーから「書式化（Cf）」カテゴリーに移動し、空白でなくなっています。その結果、" \u180E".trim().length の結果が 0 から 1 に変更されました。
+> [!NOTE]
+> JavaScript エンジンで使用される Unicode 規格が変更されると、プログラムの動作に影響を与える可能性があります。例えば、 ES2016 では参照する Unicode 規格が 5.1 から 8.0.0 にアップグレードされ、その影響で U+180E MONGOLIAN VOWEL SEPARATOR が "Space_Separator" カテゴリーから「書式化（Cf）」カテゴリーに移動し、空白でなくなっています。その結果、" \u180E".trim().length の結果が 0 から 1 に変更されました。
 
 ## 改行文字
 
@@ -135,7 +136,8 @@ console.log("Hello world");
 
 JavaScript インタープリターはこれを通常のコメントとして扱います。スクリプトが直接シェルで実行された場合のみ、シェルに対して意味を持ちます。
 
-> **警告:** スクリプトをシェル環境で直接実行できるようにしたい場合は、 [BOM](https://ja.wikipedia.org/wiki/バイト順マーク) のない UTF-8 でエンコードしてください。ブラウザーで実行するコードでは BOM は何の問題も起こしませんが - UTF-8 デコードの際、ソーステキストが解析される前に取り除かれるからです - Unix/Linux のシェルでは、BOM 文字が前にあるとハッシュバンを認識しません。
+> [!WARNING]
+> スクリプトをシェル環境で直接実行できるようにしたい場合は、 [BOM](https://ja.wikipedia.org/wiki/バイト順マーク) のない UTF-8 でエンコードしてください。ブラウザーで実行するコードでは BOM は何の問題も起こしませんが - UTF-8 デコードの際、ソーステキストが解析される前に取り除かれるからです - Unix/Linux のシェルでは、BOM 文字が前にあるとハッシュバンを認識しません。
 
 `#!` の形のコメントは JavaScript インタープリターを指定するためにだけ使用してください。他の用途ではすべて `//` のコメント（または複数行コメント）を使用してください。
 
@@ -156,7 +158,8 @@ lbl: console.log(1); // ラベル
 
 JavaScript では、識別子は一般的に英数字、アンダースコア (`_`)、ドル記号 (`$`) で構成されます。識別子は数字で始めることはできません。しかし、JavaScript で使用できる識別子は {{Glossary("ASCII")}} だけではなく、ほとんどの Unicode コードポイントも使用可能です。つまり、識別子は [ID_Start](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Start%7D) カテゴリーにある文字で始めることができ、[ID_Continue](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Continue%7D) カテゴリーにある文字は先頭文字の後に置くことができます。
 
-> **メモ:** もし何らかの理由で JavaScript のソースを自分で解析する必要がある場合、すべての識別子が `/[A-Za-z_$][\w$]*/` のパターンに従っている（つまり ASCII のみ）と仮定しないでください。 識別子の範囲は正規表現 `/[$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*/u` (Unicodeエスケープシーケンスを除く) で記述することができます。
+> [!NOTE]
+> もし何らかの理由で JavaScript のソースを自分で解析する必要がある場合、すべての識別子が `/[A-Za-z_$][\w$]*/` のパターンに従っている（つまり ASCII のみ）と仮定しないでください。 識別子の範囲は正規表現 `/[$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*/u` (Unicodeエスケープシーケンスを除く) で記述することができます。
 
 また、JavaScript では、識別子の中で [Unicode エスケープシーケンス](#unicode_escape_sequences)を `\u0000` または `\u{000000}` という形式で使用することができ、これは実際の Unicode 文字と同じ文字列値をエンコードするものです。例えば、`你好` と `\u4f60\u597d` は同じ識別子です。
 
@@ -296,7 +299,8 @@ const els\u{65} = 1;
 
 ## リテラル
 
-> **メモ:** この節では、不可分なトークンであるリテラルについて説明します。[オブジェクトリテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)や[配列リテラル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Array#配列リテラル記法)は、一連のトークンで構成される[式](/ja/docs/Web/JavaScript/Reference/Operators)です。
+> [!NOTE]
+> この節では、不可分なトークンであるリテラルについて説明します。[オブジェクトリテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)や[配列リテラル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Array#配列リテラル記法)は、一連のトークンで構成される[式](/ja/docs/Web/JavaScript/Reference/Operators)です。
 
 ### Null リテラル
 
diff --git a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md
index 1948781aaf303b..1315dc1d93732f 100644
--- a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md
+++ b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -108,7 +108,8 @@ const obj = { a: 1, b: 2 };
 // `a` および `b` プロパティが `numbers` へ代入される
 ```
 
-> **メモ:** 宣言なしでオブジェクトリテラルの分割代入を使用する場合、代入文を囲む括弧 `( ... )` が必要です。
+> [!NOTE]
+> 宣言なしでオブジェクトリテラルの分割代入を使用する場合、代入文を囲む括弧 `( ... )` が必要です。
 >
 > `{ a, b } = { a: 1, b: 2 }` は、左辺の `{a, b}` がオブジェクトリテラルではなくブロックとみなされるため、単体では有効な構文ではありません。しかし、`({ a, b } = { a: 1, b: 2 })` は有効であり、`const { a, b } = { a: 1, b: 2 }` も同様です。
 >
diff --git a/files/ja/web/javascript/reference/operators/in/index.md b/files/ja/web/javascript/reference/operators/in/index.md
index 0e538554825e8d..7d43b20088e80f 100644
--- a/files/ja/web/javascript/reference/operators/in/index.md
+++ b/files/ja/web/javascript/reference/operators/in/index.md
@@ -113,7 +113,8 @@ let empties = new Array(3).fill(undefined);
 
 `in` 演算子を使用して、特定の[クラスのプライベートフィールドまたはメソッド](/ja/docs/Web/JavaScript/Reference/Classes/Private_class_fields)がクラスで定義されているかどうかを調べることができます。そのメソッドが存在すれば演算子は `true` を返し、そうでなければ `false` を返します。
 
-> **メモ:** クラスの定義されていない*プライベート*フィールドやメソッドにアクセスしようとすると、コードで `throw` が発生します。存在しない可能性があるプライベートフィールドを `in` 演算子でチェックすると、 `try/catch` を使用するより簡潔にすることができます。
+> [!NOTE]
+> クラスの定義されていない*プライベート*フィールドやメソッドにアクセスしようとすると、コードで `throw` が発生します。存在しない可能性があるプライベートフィールドを `in` 演算子でチェックすると、 `try/catch` を使用するより簡潔にすることができます。
 
 以下のコードは、指定されたクラスが特定のプライベートメソッドやフィールドを持っているかどうかをチェックする静的関数です。
 
diff --git a/files/ja/web/javascript/reference/operators/logical_or/index.md b/files/ja/web/javascript/reference/operators/logical_or/index.md
index 81a5ead8b72a8b..29000edf5eedb8 100644
--- a/files/ja/web/javascript/reference/operators/logical_or/index.md
+++ b/files/ja/web/javascript/reference/operators/logical_or/index.md
@@ -82,7 +82,8 @@ o9 = false || ""; // f || f は "" を返す
 o10 = false || varObject; // f || オブジェクトは varObject を返す
 ```
 
-> **メモ:** この演算子を使用していくつかの変数に既定値を提供する場合、*偽値*が使用されないことに注意してください。 [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) や {{jsxref("undefined")}} をフィルタリングする必要がある場合は、[Null 合体演算子](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)の使用を検討してください。
+> [!NOTE]
+> この演算子を使用していくつかの変数に既定値を提供する場合、*偽値*が使用されないことに注意してください。 [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) や {{jsxref("undefined")}} をフィルタリングする必要がある場合は、[Null 合体演算子](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)の使用を検討してください。
 
 ### 論理型の変換規則
 
diff --git a/files/ja/web/javascript/reference/operators/new/index.md b/files/ja/web/javascript/reference/operators/new/index.md
index 917f92844e5b50..d26ff5f10320cb 100644
--- a/files/ja/web/javascript/reference/operators/new/index.md
+++ b/files/ja/web/javascript/reference/operators/new/index.md
@@ -29,7 +29,8 @@ new constructor[([arguments])];
 1. 空のプレーンな JavaScript オブジェクトを生成します。
 2. 新しいオブジェクトにプロパティ (`__proto__`) を追加し、コンストラクター関数のプロトタイプオブジェクトに結びつけます。
 
-   > **メモ:** コンストラクター関数のプロトタイプに追加されたプロトタイプやオブジェクトは、そのためそのコンストラクター関数で（`new` を使用して）生成されたすべてのインスタンスからアクセスできます。
+   > [!NOTE]
+   > コンストラクター関数のプロトタイプに追加されたプロトタイプやオブジェクトは、そのためそのコンストラクター関数で（`new` を使用して）生成されたすべてのインスタンスからアクセスできます。
 
 3. 新しく生成されたオブジェクトインスタンスを `this` コンテキストとして結びつけます。
    （すなわち、コンストラクター関数内の `this` へのすべての参照は、最初のステップで作成されたオブジェクトを参照するようになります。）
@@ -53,7 +54,8 @@ new constructor[([arguments])];
    var myFoo = new Foo("Bar 1", 2021);
    ```
 
-> **メモ:** オブジェクトは、別のオブジェクトそのものをプロパティとして持つことができます。後述の例をご覧ください。
+> [!NOTE]
+> オブジェクトは、別のオブジェクトそのものをプロパティとして持つことができます。後述の例をご覧ください。
 
 コード `new Foo(...)` を実行すると、以下の処理が行われます。
 
@@ -86,7 +88,8 @@ console.log(car1.color); // 'black'
 console.log(car2.color); // 'original color'
 ```
 
-> **メモ:** コンストラクター関数は通常の関数と同様に（つまり `new` 演算子なしで）呼び出すことができますが、この場合、新しいオブジェクトは作成されず、`this` の値も異なります。
+> [!NOTE]
+> コンストラクター関数は通常の関数と同様に（つまり `new` 演算子なしで）呼び出すことができますが、この場合、新しいオブジェクトは作成されず、`this` の値も異なります。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/operators/optional_chaining/index.md b/files/ja/web/javascript/reference/operators/optional_chaining/index.md
index cb1e372ffca721..89ba1216da569e 100644
--- a/files/ja/web/javascript/reference/operators/optional_chaining/index.md
+++ b/files/ja/web/javascript/reference/operators/optional_chaining/index.md
@@ -62,7 +62,8 @@ let nestedProp = temp === null || temp === undefined ? undefined : temp.second;
 let result = someInterface.customMethod?.();
 ```
 
-> **メモ:** 関数ではない名前のプロパティがあった場合、 `?.` を使用すると {{JSxRef("TypeError")}} 例外が発生します
+> [!NOTE]
+> 関数ではない名前のプロパティがあった場合、 `?.` を使用すると {{JSxRef("TypeError")}} 例外が発生します
 > (`someInterface.customMethod is not a function`)。
 
 > **メモ:** `someInterface` 自体が `null` または `undefined` である場合にも、 {{JSxRef("TypeError")}} 例外が発生します (`someInterface is null`)。 `someInterface` 自体が `null` または `undefined` である可能性がある場合は、この位置にも `?.` を使用して `someInterface?.customMethod?.()` のようにする必要があります。
diff --git a/files/ja/web/javascript/reference/operators/spread_syntax/index.md b/files/ja/web/javascript/reference/operators/spread_syntax/index.md
index ea919192bd0712..3344986818555e 100644
--- a/files/ja/web/javascript/reference/operators/spread_syntax/index.md
+++ b/files/ja/web/javascript/reference/operators/spread_syntax/index.md
@@ -154,7 +154,8 @@ arr2.push(4);
 //  arr は変更されません
 ```
 
-> **メモ:** コピーは 1 段階の深さで行われます。そのため、次の例のような多次元配列のようなオブジェクトをコピーする場合には適さないでしょう。({{jsxref("Object.assign()")}} についても同じことが言えます。)
+> [!NOTE]
+> コピーは 1 段階の深さで行われます。そのため、次の例のような多次元配列のようなオブジェクトをコピーする場合には適さないでしょう。({{jsxref("Object.assign()")}} についても同じことが言えます。)
 >
 > ```js example-bad
 > let a = [[1], [2], [3]];
diff --git a/files/ja/web/javascript/reference/operators/this/index.md b/files/ja/web/javascript/reference/operators/this/index.md
index ff8c0f26a58b2e..e89018284b183a 100644
--- a/files/ja/web/javascript/reference/operators/this/index.md
+++ b/files/ja/web/javascript/reference/operators/this/index.md
@@ -39,7 +39,8 @@ console.log(window.b); // "MDN"
 console.log(b); // "MDN"
 ```
 
-> **メモ:** コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。
+> [!NOTE]
+> コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。
 
 ### 関数コンテキスト
 
@@ -70,7 +71,8 @@ function f2() {
 f2() === undefined; // true
 ```
 
-> **メモ:** 二番目の例において、`this` が {{jsxref("undefined")}} となるのは `f2` が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば `window.f2()`) ではないためです。この機能は初めて [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)への対応が始まったとき、一部のブラウザーが実装していませんでした。結果的に、これらのブラウザーは不正確に `window` オブジェクトを返していました。
+> [!NOTE]
+> 二番目の例において、`this` が {{jsxref("undefined")}} となるのは `f2` が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば `window.f2()`) ではないためです。この機能は初めて [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)への対応が始まったとき、一部のブラウザーが実装していませんでした。結果的に、これらのブラウザーは不正確に `window` オブジェクトを返していました。
 
 関数の呼び出し時に `this` の値を特定の値に設定するには、以下の例のように {{jsxref("Function.prototype.call()", "call()")}} または {{jsxref("Function.prototype.apply()", "apply()")}} を使用します。
 
@@ -94,7 +96,8 @@ class Example {
 new Example(); // ['constructor', 'first', 'second']
 ```
 
-> **メモ:** 静的メソッドは `this` のプロパティではありません。クラス自身のプロパティです。
+> [!NOTE]
+> 静的メソッドは `this` のプロパティではありません。クラス自身のプロパティです。
 
 ### 派生クラス
 
@@ -206,7 +209,8 @@ var foo = () => this;
 console.log(foo() === globalObject); // true
 ```
 
-> **メモ:** アロー関数の呼び出し時に `this` 引数が `call`, `bind`, `apply` に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (`thisArg`) は `null` を設定してください。
+> [!NOTE]
+> アロー関数の呼び出し時に `this` 引数が `call`, `bind`, `apply` に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (`thisArg`) は `null` を設定してください。
 
 ```js
 // オブジェクトのメソッドとして呼び出す。
@@ -344,7 +348,8 @@ console.log(o.average, o.sum); // 2, 6
 
 関数がコンストラクターとして ({{jsxref("Operators/new", "new")}} キーワードとともに) 使用されたとき、その `this` は生成された新しいオブジェクトに関連付けられます。
 
-> **メモ:** コンストラクターの既定では、`this` で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、`this` オブジェクトが返されます)。
+> [!NOTE]
+> コンストラクターの既定では、`this` で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、`this` オブジェクトが返されます)。
 
 ```js
 /*
@@ -465,7 +470,8 @@ bird.sayBye = car.sayBye;
 bird.sayBye(); // Bye from Ferrari
 ```
 
-> **メモ:** クラスは常に strict モードのコードです。これを定義せずに `this` でメソッドを呼び出すとエラーが発生します。
+> [!NOTE]
+> クラスは常に strict モードのコードです。これを定義せずに `this` でメソッドを呼び出すとエラーが発生します。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/operators/typeof/index.md b/files/ja/web/javascript/reference/operators/typeof/index.md
index 5e52782e3ef742..ba9327cfdf5ae3 100644
--- a/files/ja/web/javascript/reference/operators/typeof/index.md
+++ b/files/ja/web/javascript/reference/operators/typeof/index.md
@@ -39,7 +39,8 @@ typeof(operand);
 | [関数](/ja/docs/Glossary/Function) オブジェクト (ECMA-262 の用語では [[Call]] を実装) | `"function"`                          |
 | その他のオブジェクト                                                                  | `"object"`                            |
 
-> **メモ:** ECMAScript 2019 およびそれ以前の実装では、呼び出し可能な標準外のオブジェクトに対して、`typeof` が任意の実装定義の文字列値を返すことを許可していました。
+> [!NOTE]
+> ECMAScript 2019 およびそれ以前の実装では、呼び出し可能な標準外のオブジェクトに対して、`typeof` が任意の実装定義の文字列値を返すことを許可していました。
 >
 > 実際にこれを利用したブラウザーとして知られているのは、古い Internet Explorer だけです。（[下記参照](#ie-specific_notes)）
 
diff --git a/files/ja/web/javascript/reference/operators/yield/index.md b/files/ja/web/javascript/reference/operators/yield/index.md
index 812b2cc2ee71af..69dc52a14fcff1 100644
--- a/files/ja/web/javascript/reference/operators/yield/index.md
+++ b/files/ja/web/javascript/reference/operators/yield/index.md
@@ -39,7 +39,8 @@ slug: Web/JavaScript/Reference/Operators/yield
 
 ジェネレーターのコードパス、 `yield` 演算子、新しい開始値を {{jsxref("Generator.prototype.next()")}} に渡すことで指定することができる機能により、ジェネレーターは大きな力と制御を提供します。
 
-> **警告:** 残念ながら `next()` は非対称ですが、仕方がありません。常に現在中断している `yield` に値を送りますが、次の `yield` のオペランドを返します。
+> [!WARNING]
+> 残念ながら `next()` は非対称ですが、仕方がありません。常に現在中断している `yield` に値を送りますが、次の `yield` のオペランドを返します。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/regular_expressions/index.md b/files/ja/web/javascript/reference/regular_expressions/index.md
index bcf7e16a03d673..db98d8881aede1 100644
--- a/files/ja/web/javascript/reference/regular_expressions/index.md
+++ b/files/ja/web/javascript/reference/regular_expressions/index.md
@@ -23,7 +23,8 @@ l10n:
 
 有限のアルファベット（英語のアルファベット 26 文字や Unicode 文字集合全体など）とみなされると、すべての正規言語は上記の機能によって生成することができます。もちろん、多くのパターンはこの方法で表現するのはとても面倒なので (「10 桁の数字」や「空白文字ではない文字」など)、JavaScript の正規表現には下記に紹介するような多くの略記法が含まれています。
 
-> **メモ:** JavaScriptの正規表現は[後方参照](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Backreference)が存在するため、実際には正規表現ではありません（正規表現は有限状態を持つ必要があります）。しかし、それでもとても有益な機能です。
+> [!NOTE]
+> JavaScriptの正規表現は[後方参照](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Backreference)が存在するため、実際には正規表現ではありません（正規表現は有限状態を持つ必要があります）。しかし、それでもとても有益な機能です。
 
 ### 正規表現の作成
 
diff --git a/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md b/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md
index 78c95891faeae0..3a61a372fba502 100644
--- a/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md
+++ b/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md
@@ -143,7 +143,8 @@ function stripTags(str) {
 stripTags("<p><em>lorem</em> <strong>ipsum</strong></p>"); // 'lorem ipsum'
 ```
 
-> **警告:** これはデモのためのもので、属性値の中に `>` がある場合は正しく扱えません。代わりに適切な HTML サニタイザー、たとえば [HTML サニタイザー API](/ja/docs/Web/API/HTML_Sanitizer_API) などを使用してください。
+> [!WARNING]
+> これはデモのためのもので、属性値の中に `>` がある場合は正しく扱えません。代わりに適切な HTML サニタイザー、たとえば [HTML サニタイザー API](/ja/docs/Web/API/HTML_Sanitizer_API) などを使用してください。
 
 ### Markdown の段落の位置を指定
 
@@ -164,7 +165,8 @@ Another paragraph
 `); // 3
 ```
 
-> **警告:** これはデモのためのもので、コードブロック内の改行や、見出しのような他の Markdown ブロック要素を処理しません。代わりに適切な Markdown パーサーを使用してください。
+> [!WARNING]
+> これはデモのためのもので、コードブロック内の改行や、見出しのような他の Markdown ブロック要素を処理しません。代わりに適切な Markdown パーサーを使用してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md b/files/ja/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
index 7947b460032f30..47df2d00016b72 100644
--- a/files/ja/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
+++ b/files/ja/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
@@ -44,7 +44,8 @@ l10n:
 
 `v` モードでは、`\p` は Unicode で「文字列プロパティ」として定義されている一連のコードポイントと照合することができます。これは、複数のコードポイントで構成されることが多い絵文字に最も便利です。ただし、`\P` は文字プロパティの補集合しか作成できません。
 
-> **メモ:** 文字列プロパティ機能を `u` モードにも移植する計画があります。
+> [!NOTE]
+> 文字列プロパティ機能を `u` モードにも移植する計画があります。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/regular_expressions/wildcard/index.md b/files/ja/web/javascript/reference/regular_expressions/wildcard/index.md
index 4a3218e21b2746..982c77972a58c2 100644
--- a/files/ja/web/javascript/reference/regular_expressions/wildcard/index.md
+++ b/files/ja/web/javascript/reference/regular_expressions/wildcard/index.md
@@ -81,7 +81,8 @@ catch (e)
 `); // "try\n  doSomething();\ncatch (e)\n  console.log(e);"
 ````
 
-> **警告:** この例はあくまでデモンストレーションのためのものです。 Markdown を解析したい場合は、考慮すべきエッジケースがたくさんあるため、専用の Markdown パーサーを使用してください。
+> [!WARNING]
+> この例はあくまでデモンストレーションのためのものです。 Markdown を解析したい場合は、考慮すべきエッジケースがたくさんあるため、専用の Markdown パーサーを使用してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/regular_expressions/word_boundary_assertion/index.md b/files/ja/web/javascript/reference/regular_expressions/word_boundary_assertion/index.md
index 2abf7112e58ab3..1ce5b070022dec 100644
--- a/files/ja/web/javascript/reference/regular_expressions/word_boundary_assertion/index.md
+++ b/files/ja/web/javascript/reference/regular_expressions/word_boundary_assertion/index.md
@@ -53,7 +53,8 @@ hasThanks("Just want to say thank you for all your work."); // true
 hasThanks("Thanksgiving is around the corner."); // false
 ```
 
-> **警告:** すべての言語で単語の境界が明確に定義されているわけではありません。日本語やタイ語のように空白の区切りがない言語を扱う場合は、代わりに {{jsxref("Intl.Segmenter")}} のような高度なライブラリーを使って単語を検索してください。
+> [!WARNING]
+> すべての言語で単語の境界が明確に定義されているわけではありません。日本語やタイ語のように空白の区切りがない言語を扱う場合は、代わりに {{jsxref("Intl.Segmenter")}} のような高度なライブラリーを使って単語を検索してください。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/statements/async_function/index.md b/files/ja/web/javascript/reference/statements/async_function/index.md
index 6bd6984a625c46..c8fa2b5bb67e9c 100644
--- a/files/ja/web/javascript/reference/statements/async_function/index.md
+++ b/files/ja/web/javascript/reference/statements/async_function/index.md
@@ -44,7 +44,8 @@ async function name(param0, param1, /* … ,*/ paramN) {
 
 非同期関数には、 {{jsxref("Operators/await", "await")}} 式を置くことができます。 await 式は返されたプロミスが履行されるか拒否されるまで実行を中断することで、プロミスを返す関数をあたかも同期しているかのように動作させます。プロミスの解決済みの値は、await 式の返値として扱われます。`async` と `await` を使用すると、非同期コードに通常の `try` / `catch` ブロックを使用することができます。
 
-> **メモ:** キーワード `await` は、通常の JavaScript コード内の非同期関数内でのみ有効です。非同期関数の外で使用した場合は {{jsxref("SyntaxError")}} が発生します。
+> [!NOTE]
+> キーワード `await` は、通常の JavaScript コード内の非同期関数内でのみ有効です。非同期関数の外で使用した場合は {{jsxref("SyntaxError")}} が発生します。
 >
 > `await` は [JavaScript モジュール](/ja/docs/Web/JavaScript/Guide/Modules)では単独で使用することができます。
 
@@ -68,7 +69,7 @@ function foo() {
 }
 ```
 
-> **メモ:**
+> [!NOTE]
 >
 > 非同期関数の返値が `Promise.resolve` にラップされているかのように動作するとしても、両者は同等ではありません。
 >
@@ -234,7 +235,8 @@ setTimeout(parallel, 10000); // 本当に並列処理となるため 1 秒後に
 複数の処理を安全に並列に実行したい場合は、 [`Promise.all`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) または
 [`Promise.allSettled`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) の呼び出しで待つ必要があります。
 
-> **警告:** 関数 `concurrentStart` と `concurrentPromise` は機能的に同等ではありません。
+> [!WARNING]
+> 関数 `concurrentStart` と `concurrentPromise` は機能的に同等ではありません。
 >
 > `concurrentStart` では、プロミス `fast` がプロミス `slow` の履行よりも前に拒否された場合、呼び出し元が catch 節を構成しているかどうかにかかわらず、プロミスの拒否が処理されないというエラーが発生します。
 >
diff --git a/files/ja/web/javascript/reference/statements/async_function_star_/index.md b/files/ja/web/javascript/reference/statements/async_function_star_/index.md
index 595161f6e6a457..dbbb63a7ee59eb 100644
--- a/files/ja/web/javascript/reference/statements/async_function_star_/index.md
+++ b/files/ja/web/javascript/reference/statements/async_function_star_/index.md
@@ -27,7 +27,8 @@ async function* name(param0, param1, /* … ,*/ paramN) {
 }
 ```
 
-> **メモ:** 非同期ジェネレーター関数には、対応するアロー関数はありません。
+> [!NOTE]
+> 非同期ジェネレーター関数には、対応するアロー関数はありません。
 
 ### 引数
 
diff --git a/files/ja/web/javascript/reference/statements/export/index.md b/files/ja/web/javascript/reference/statements/export/index.md
index d6866179815c02..fe8ea48eefc7ba 100644
--- a/files/ja/web/javascript/reference/statements/export/index.md
+++ b/files/ja/web/javascript/reference/statements/export/index.md
@@ -91,7 +91,8 @@ export default function () { /* … */ }
 export default class { /* … */ }
 ```
 
-> **メモ:** エクスポート宣言の名前は、互いに異なるものでなければなりません。重複した名前でエクスポートを実施したり、`default` のエクスポートを複数使用すると {{jsxref("SyntaxError")}} が発生し、モジュールが評価されなくなります。
+> [!NOTE]
+> エクスポート宣言の名前は、互いに異なるものでなければなりません。重複した名前でエクスポートを実施したり、`default` のエクスポートを複数使用すると {{jsxref("SyntaxError")}} が発生し、モジュールが評価されなくなります。
 
 `export default` 構文ではあらゆる式が許可されます。
 
diff --git a/files/ja/web/javascript/reference/statements/expression_statement/index.md b/files/ja/web/javascript/reference/statements/expression_statement/index.md
index d9c835e7fc5e3f..fd4d850406e1e9 100644
--- a/files/ja/web/javascript/reference/statements/expression_statement/index.md
+++ b/files/ja/web/javascript/reference/statements/expression_statement/index.md
@@ -117,7 +117,8 @@ function range2(start, end) {
 }
 ```
 
-> **警告:** これは、言語の能力の一端を示すに過ぎません。制御フロー文の代用として式文を過剰に使用すると、コードの可読性が大幅に低下する可能性があります。
+> [!WARNING]
+> これは、言語の能力の一端を示すに過ぎません。制御フロー文の代用として式文を過剰に使用すると、コードの可読性が大幅に低下する可能性があります。
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/statements/for-await...of/index.md b/files/ja/web/javascript/reference/statements/for-await...of/index.md
index 6fd4b68608f2a8..a9070d2371f2e5 100644
--- a/files/ja/web/javascript/reference/statements/for-await...of/index.md
+++ b/files/ja/web/javascript/reference/statements/for-await...of/index.md
@@ -167,7 +167,8 @@ for (const numOrPromise of generator()) {
 // 4
 ```
 
-> **メモ:** 同期のジェネレーターから拒否されたプロミスが生み出される場合があることに注意してください。このような場合、 `for await...of` は拒否されたプロミスを消費するので、ジェネレーター内の `finally` ブロックが呼び出されません。これは、確保したリソースを `try/finally` で解放する必要がある場合は望ましくない動作になる可能性があります。
+> [!NOTE]
+> 同期のジェネレーターから拒否されたプロミスが生み出される場合があることに注意してください。このような場合、 `for await...of` は拒否されたプロミスを消費するので、ジェネレーター内の `finally` ブロックが呼び出されません。これは、確保したリソースを `try/finally` で解放する必要がある場合は望ましくない動作になる可能性があります。
 
 ```js
 function* generatorWithRejectedPromises() {
diff --git a/files/ja/web/javascript/reference/statements/for...of/index.md b/files/ja/web/javascript/reference/statements/for...of/index.md
index 9d57c71e667e4a..ac495519f262e9 100644
--- a/files/ja/web/javascript/reference/statements/for...of/index.md
+++ b/files/ja/web/javascript/reference/statements/for...of/index.md
@@ -50,7 +50,8 @@ for (let value of iterable) {
 // 31
 ```
 
-> **メモ:** 反復処理ごとに新しい変数が作成されます。ループ本体内で変数を再代入しても、反復可能オブジェクト（この場合は配列）の元の値には影響しません。
+> [!NOTE]
+> 反復処理ごとに新しい変数が作成されます。ループ本体内で変数を再代入しても、反復可能オブジェクト（この場合は配列）の元の値には影響しません。
 
 [分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)や、`for (x.y of iterable)` などのオブジェクトプロパティを使用することもできます。
 
diff --git a/files/ja/web/javascript/reference/statements/function_star_/index.md b/files/ja/web/javascript/reference/statements/function_star_/index.md
index d2314f4c1713cb..b06fb1db79cd87 100644
--- a/files/ja/web/javascript/reference/statements/function_star_/index.md
+++ b/files/ja/web/javascript/reference/statements/function_star_/index.md
@@ -27,7 +27,8 @@ function* name(param0, param1, /* … ,*/ paramN) {
 }
 ```
 
-> **メモ:** ジェネレーター関数には、対応するアロー関数はありません。
+> [!NOTE]
+> ジェネレーター関数には、対応するアロー関数はありません。
 
 ### 引数
 
diff --git a/files/ja/web/javascript/reference/statements/return/index.md b/files/ja/web/javascript/reference/statements/return/index.md
index 8af8ec9ae610e6..96f42f45af6ff4 100644
--- a/files/ja/web/javascript/reference/statements/return/index.md
+++ b/files/ja/web/javascript/reference/statements/return/index.md
@@ -63,7 +63,8 @@ a + b;
 
 コンソールは "unreachable code after return statement" と警告します。
 
-> **メモ:** Firefox 40 以降から `return` 文の後に到達不可能なコードが見つかった場合、コンソールに警告が表示されます。
+> [!NOTE]
+> Firefox 40 以降から `return` 文の後に到達不可能なコードが見つかった場合、コンソールに警告が表示されます。
 
 括弧を使用することで、この問題を回避する（ASI を防ぐ）ことができます。
 
diff --git a/files/ja/web/javascript/reference/strict_mode/index.md b/files/ja/web/javascript/reference/strict_mode/index.md
index f6036d4d7a868a..8356a34d6d301a 100644
--- a/files/ja/web/javascript/reference/strict_mode/index.md
+++ b/files/ja/web/javascript/reference/strict_mode/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{jsSidebar("More")}}
 
-> **メモ:** 既定の厳格でないモードを _[Sloppy モード](/ja/docs/Glossary/Sloppy_mode)_ と呼ぶのを目にすることがあるかもしれません。これは公式な用語ではありません、念のため注意してください。
+> [!NOTE]
+> 既定の厳格でないモードを _[Sloppy モード](/ja/docs/Glossary/Sloppy_mode)_ と呼ぶのを目にすることがあるかもしれません。これは公式な用語ではありません、念のため注意してください。
 
 JavaScript の厳格モード (Strict mode) は、 JavaScript の自由度を制限することに**オプトイン**することによって、暗黙のうちに [Sloppy モード](/ja/docs/Glossary/Sloppy_mode)からオプトアウトする方法です。厳格モードは単なるサブセットではなく、通常のコードとは**意図的に**異なる意味を持っています。厳格モードに対応していないブラウザーは、厳格モードに対応しているブラウザーとは異なる動作をする可能性がありますので、厳格モードに関する側面に対応しているかどうかの機能テストを行わずに厳格モードを頼らないでください。厳格モードのコードと非厳格モードのコードは共存できますので、スクリプトを順次厳格モードにオプトインすることができます。
 
@@ -236,7 +237,8 @@ false.true = ""; // TypeError
 const o = { p: 1, p: 2 }; // ECMAScript 2015 以前では構文エラー
 ```
 
-> **メモ:** これまでエラーとされていたコードをエラーでなくすこと、常に後方互換性があるものと見なされます。これは、言語がエラーを発生させることに厳格であることの良い部分であり、将来の意味づけの変更のための余地を残しています。
+> [!NOTE]
+> これまでエラーとされていたコードをエラーでなくすこと、常に後方互換性があるものと見なされます。これは、言語がエラーを発生させることに厳格であることの良い部分であり、将来の意味づけの変更のための余地を残しています。
 
 ### スコープ管理の単純化
 
diff --git a/files/ja/web/manifest/display/index.md b/files/ja/web/manifest/display/index.md
index 11528a22eda1d7..bf093fd477b0de 100644
--- a/files/ja/web/manifest/display/index.md
+++ b/files/ja/web/manifest/display/index.md
@@ -20,9 +20,11 @@ slug: Web/Manifest/display
 
 `display` メンバーは、開発者が推奨するウェブサイトの表示モードを判別する文字列です。この表示モードは、ブラウザーの UI をどれだけユーザーに見せるかを変更するものであり、 `browser` (ブラウザーのウィンドウが完全に見える) から `fullscreen` (アプリが全画面になる) までの範囲を取ります。
 
-> **メモ:** ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは `fullscreen` → `standalone` → `minimal-ui` → `browser` であり、 `browser` が `display` メンバーが指定されていなかった場合の既定値です。
+> [!NOTE]
+> ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは `fullscreen` → `standalone` → `minimal-ui` → `browser` であり、 `browser` が `display` メンバーが指定されていなかった場合の既定値です。
 
-> **メモ:** 表示モードに応じて選択的に CSS を提供するには、 {{cssxref("@media/display-mode", "display-mode")}} メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。
+> [!NOTE]
+> 表示モードに応じて選択的に CSS を提供するには、 {{cssxref("@media/display-mode", "display-mode")}} メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。
 
 ## 値
 
diff --git a/files/ja/web/manifest/orientation/index.md b/files/ja/web/manifest/orientation/index.md
index 8b181bc15fd7e9..5e5e3aeed14671 100644
--- a/files/ja/web/manifest/orientation/index.md
+++ b/files/ja/web/manifest/orientation/index.md
@@ -20,9 +20,11 @@ slug: Web/Manifest/orientation
 
 `orientation` メンバーは、ウェブサイトの最上位の{{Glossary("Browsing context", "閲覧コンテキスト")}}すべてについて、既定の向きを定義します。
 
-> **メモ:** ユーザーエージェントの表示モードによっては、 `orientation` やその中の特定の値に対応していないことがあります。これらに対応することが、特定のコンテキストでは意味がないからです。
+> [!NOTE]
+> ユーザーエージェントの表示モードによっては、 `orientation` やその中の特定の値に対応していないことがあります。これらに対応することが、特定のコンテキストでは意味がないからです。
 
-> **メモ:** 実行時に画面の向きを変更するには、 [Screen Orientation API](/ja/docs/Web/API/Screen/orientation) を利用して実現することができます。
+> [!NOTE]
+> 実行時に画面の向きを変更するには、 [Screen Orientation API](/ja/docs/Web/API/Screen/orientation) を利用して実現することができます。
 
 ## 値
 
diff --git a/files/ja/web/manifest/related_applications/index.md b/files/ja/web/manifest/related_applications/index.md
index 39f90a4d1909ba..1a005711e88203 100644
--- a/files/ja/web/manifest/related_applications/index.md
+++ b/files/ja/web/manifest/related_applications/index.md
@@ -20,7 +20,8 @@ slug: Web/Manifest/related_applications
 
 `related_applications` フィールドはオブジェクトの配列で、基礎となるプラットフォームにインストール可能、またはアクセス可能なネイティブアプリケーション — たとえば、 Google Play ストアで入手可能なネイティブの Android アプリケーションなどを指定します。このようなアプリケーションは、ネイティブアプリの同等品のように、同様または同等の機能を提供するマニフェストのウェブサイトの代替品となることを意図しています。
 
-> **メモ:** 開発者は `prefer_related_applications` に `true` を設定することで、ネイティブアプリケーションがウェブアプリケーションよりも推奨されることを示すことができます。
+> [!NOTE]
+> 開発者は `prefer_related_applications` に `true` を設定することで、ネイティブアプリケーションがウェブアプリケーションよりも推奨されることを示すことができます。
 
 ## 例
 
diff --git a/files/ja/web/manifest/share_target/index.md b/files/ja/web/manifest/share_target/index.md
index 079ae0bd6607d4..ca909c2affffba 100644
--- a/files/ja/web/manifest/share_target/index.md
+++ b/files/ja/web/manifest/share_target/index.md
@@ -24,7 +24,8 @@ l10n:
 
 登録されインストールされると、Web Share Target API を用いる PWA は電子メール、メッセンジャー、そしてその他の共有されるコンテンツを受け取れるネイティブアプリといったシステム上の通常の共有先とともに、コンテンツの共有先として振る舞います。
 
-> **メモ:** Web Share API を用いてデータを共有したい場合、[Web Share API](/ja/docs/Web/API/Web_Share_API) および [`navigator.share()`](/ja/docs/Web/API/Navigator/share) を参照してください。
+> [!NOTE]
+> Web Share API を用いてデータを共有したい場合、[Web Share API](/ja/docs/Web/API/Web_Share_API) および [`navigator.share()`](/ja/docs/Web/API/Navigator/share) を参照してください。
 
 ## プロパティ
 
diff --git a/files/ja/web/mathml/attribute/index.md b/files/ja/web/mathml/attribute/index.md
index 0131af9a5bd06b..043efbcd78d167 100644
--- a/files/ja/web/mathml/attribute/index.md
+++ b/files/ja/web/mathml/attribute/index.md
@@ -9,7 +9,8 @@ l10n:
 
 これは MathML 属性のアルファベット順リストです。それぞれの属性の詳細は、関連する [MathML 要素ページ](/ja/docs/Web/MathML/Element)および[グローバル属性ページ](/ja/docs/Web/MathML/Global_attributes)にあります。[値](/ja/docs/Web/MathML/Values)ページでは、 MathML 属性で使用される共通の値についての注意を説明しています。
 
-> **メモ:** 主要な [MathML](/ja/docs/Web/MathML) ページで説明されているように、 MDN は [MathML Core](https://w3c.github.io/mathml-core/) をリファレンス仕様書として使用しています。しかし、いくつかのブラウザーでまだ実装されている古い機能も文書化されています。これらの機能やその他の機能についての詳細は [MathML 4](https://w3c.github.io/mathml/) で見ることができます。
+> [!NOTE]
+> 主要な [MathML](/ja/docs/Web/MathML) ページで説明されているように、 MDN は [MathML Core](https://w3c.github.io/mathml-core/) をリファレンス仕様書として使用しています。しかし、いくつかのブラウザーでまだ実装されている古い機能も文書化されています。これらの機能やその他の機能についての詳細は [MathML 4](https://w3c.github.io/mathml/) で見ることができます。
 
 <table class="standard-table">
   <thead>
diff --git a/files/ja/web/mathml/authoring/index.md b/files/ja/web/mathml/authoring/index.md
index dc46fb17b613ee..4b30a201e77840 100644
--- a/files/ja/web/mathml/authoring/index.md
+++ b/files/ja/web/mathml/authoring/index.md
@@ -54,9 +54,11 @@ MathML の数式がオーサリングツールで生成されるとしても、
 </html>
 ```
 
-> **メモ:** XML 文書内の MathML（XHTML、EPUB、OpenDocumentなど）を使用するには、各 `<math>` 要素に `xmlns="http://www.w3.org/1998/Math/MathML"` 属性を配置してください。
+> [!NOTE]
+> XML 文書内の MathML（XHTML、EPUB、OpenDocumentなど）を使用するには、各 `<math>` 要素に `xmlns="http://www.w3.org/1998/Math/MathML"` 属性を配置してください。
 
-> **メモ:** 電子メールやインスタントメッセージクライアントの中には、HTML 形式でメッセージを送受信できるものがあります。そのため、 MathML タグがマークアップサニタイザーによってフィルタリングされない限り、そのようなメッセージの中に数式を埋め込むことは使用可能です。
+> [!NOTE]
+> 電子メールやインスタントメッセージクライアントの中には、HTML 形式でメッセージを送受信できるものがあります。そのため、 MathML タグがマークアップサニタイザーによってフィルタリングされない限り、そのようなメッセージの中に数式を埋め込むことは使用可能です。
 
 #### MathML に対応していないブラウザー向けの代替策
 
@@ -78,7 +80,8 @@ MathML に対応していないブラウザーに対しては、代替機構を
 <script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>
 ```
 
-> **メモ:** これら 2 つのスクリプトは [mspace](/ja/docs/Web/MathML/Element/mspace) または [mpadded](/ja/docs/Web/MathML/Element/mpadded) 要素の機能検出を行うことに注意してください（これらのページのブラウザー互換性表を参照してください）。また、良好な MathML の対応のないブラウザーのためにページの上部に警告を表示し、ユーザーに上記のフォールバックのいずれかを選択させるための同様のスクリプトもあります。
+> [!NOTE]
+> これら 2 つのスクリプトは [mspace](/ja/docs/Web/MathML/Element/mspace) または [mpadded](/ja/docs/Web/MathML/Element/mpadded) 要素の機能検出を行うことに注意してください（これらのページのブラウザー互換性表を参照してください）。また、良好な MathML の対応のないブラウザーのためにページの上部に警告を表示し、ユーザーに上記のフォールバックのいずれかを選択させるための同様のスクリプトもあります。
 
 #### 数学記号用のフォント
 
@@ -100,7 +103,8 @@ MathML に対応していないブラウザーに対しては、代替機構を
   href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css" />
 ```
 
-> **メモ:** MathFonts のページにあるフォントとスタイルシートはオープンソースライセンスの下で配布されていますので、自分自身でコピーされたり、必要なものに変更したりするのは無料です。
+> [!NOTE]
+> MathFonts のページにあるフォントとスタイルシートはオープンソースライセンスの下で配布されていますので、自分自身でコピーされたり、必要なものに変更したりするのは無料です。
 
 ## 簡易記法からの変換
 
@@ -231,7 +235,8 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathml.css/msp
 latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback
 ```
 
-> **メモ:** コマンドラインツールはサーバー側で使用することができます。例えば、 [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) は [Mathoid](https://github.com/wikimedia/mathoid) を介して LaTeX から MathML への変換を行います。
+> [!NOTE]
+> コマンドラインツールはサーバー側で使用することができます。例えば、 [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) は [Mathoid](https://github.com/wikimedia/mathoid) を介して LaTeX から MathML への変換を行います。
 
 ## グラフィカルインターフェイス
 
@@ -243,13 +248,15 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa
 
 ![Thunderbird の LaTeX 入力ボックス](thunderbird.png)
 
-> **メモ:** また、 **Insert > HTML** コマンドを使用して、任意の MathML コンテンツを貼り付けることもできます。
+> [!NOTE]
+> また、 **Insert > HTML** コマンドを使用して、任意の MathML コンテンツを貼り付けることもできます。
 
 [LibreOffice](https://www.libreoffice.org/) の数式エディター（ファイル → 新しい数式 → 数式）は使用可能な拡張を示しています。 _StartMath_ 構文の入力ボックスには、あらかじめ定義した数学的構文を挿入するための数式パネルが追加されています。
 
 ![StarMath input box in Libre Office](libreoffice.png)
 
-> **メモ:** libreoffice の MathML コードを入手するには、ドキュメントを `mml` として保存し、お気に入りのエディターで開いてください。
+> [!NOTE]
+> libreoffice の MathML コードを入手するには、ドキュメントを `mml` として保存し、お気に入りのエディターで開いてください。
 
 ### WYSIYWG なエディター
 
@@ -259,7 +266,8 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa
 
 ![TeXmacs example](texmacs.png)
 
-> **メモ:** 既定では、 Lyx と TeXmacs は HTML 出力に数式の画像を使用します。その代わりに MathML を選択するには、前者では[こちらの指示に従ってください](https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx)。後者では`ユーザー設定 > 変換 > 数式を MathML としてエクスポート`を選択してください。
+> [!NOTE]
+> 既定では、 Lyx と TeXmacs は HTML 出力に数式の画像を使用します。その代わりに MathML を選択するには、前者では[こちらの指示に従ってください](https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx)。後者では`ユーザー設定 > 変換 > 数式を MathML としてエクスポート`を選択してください。
 
 ## 光学文字認識・手書き文字認識
 
diff --git a/files/ja/web/mathml/element/math/index.md b/files/ja/web/mathml/element/math/index.md
index 9cab9625baba12..1db308e016ee38 100644
--- a/files/ja/web/mathml/element/math/index.md
+++ b/files/ja/web/mathml/element/math/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<math>`** は最上位の [MathML](/ja/docs/Web/MathML) 要素で、一つの数式を記述するのに使われます。これは[フローコンテンツ](/ja/docs/Web/HTML/Content_categories#フローコンテンツ)が許可されている HTML コンテンツに置くことができます。
 
-> **メモ:** MathML の数式をウェブページに適切に統合するためのヒントについては [MathML の記述ページ](/ja/docs/Web/MathML/Authoring#using_mathml)を、その他のデモについては [例](/ja/docs/Web/MathML/Examples)ページを参照してください。
+> [!NOTE]
+> MathML の数式をウェブページに適切に統合するためのヒントについては [MathML の記述ページ](/ja/docs/Web/MathML/Authoring#using_mathml)を、その他のデモについては [例](/ja/docs/Web/MathML/Examples)ページを参照してください。
 
 ## 属性
 
diff --git a/files/ja/web/mathml/element/mfenced/index.md b/files/ja/web/mathml/element/mfenced/index.md
index 580667ed543c0e..9f568ac2501c95 100644
--- a/files/ja/web/mathml/element/mfenced/index.md
+++ b/files/ja/web/mathml/element/mfenced/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<mfenced>`** は [MathML](/ja/docs/Web/MathML) の要素で、独自の括弧類（角括弧など）や区切り記号（カンマやセミコロンなど）を数式に追加する機能を提供します。
 
-> **メモ:** 歴史的には、 `<mfenced>` 要素はフェンス式を書くための省略記法として定義され、 {{MathMLElement("mrow")}} と {{MathMLElement("mo")}} 要素を含む展開形に等しいものでした。現在では、代わりにその等価な形式を使用することが推奨されています。
+> [!NOTE]
+> 歴史的には、 `<mfenced>` 要素はフェンス式を書くための省略記法として定義され、 {{MathMLElement("mrow")}} と {{MathMLElement("mo")}} 要素を含む展開形に等しいものでした。現在では、代わりにその等価な形式を使用することが推奨されています。
 
 ## 属性
 
diff --git a/files/ja/web/mathml/element/semantics/index.md b/files/ja/web/mathml/element/semantics/index.md
index 05600b01661ea2..87b8d2ac165c4b 100644
--- a/files/ja/web/mathml/element/semantics/index.md
+++ b/files/ja/web/mathml/element/semantics/index.md
@@ -14,7 +14,8 @@ l10n:
 
 既定では、`<semantics>`要素の最初の子要素だけがレンダリングされ、他の子要素は [display](/ja/docs/Web/CSS/display) に `none` を設定した状態で保有されます。
 
-> **メモ:** 古い MathML 仕様では、レンダラーが利用できる注釈に従って既定のレンダリングを決定することができました。可視の子を決定する以下のルールは、いくつかのブラウザーで実装されています。表示する MathML とコンテンツ MathML の区別については、 [MathML 4](https://w3c.github.io/mathml/) を参照してください。
+> [!NOTE]
+> 古い MathML 仕様では、レンダラーが利用できる注釈に従って既定のレンダリングを決定することができました。可視の子を決定する以下のルールは、いくつかのブラウザーで実装されています。表示する MathML とコンテンツ MathML の区別については、 [MathML 4](https://w3c.github.io/mathml/) を参照してください。
 >
 > - 適用すべき規則が他にない場合、既定では最初の子要素のみ描画され、これが表示 MathML と見なされます。
 > - 最初の子要素が `<annotation>` または `<annotation-xml>` 以外の表示 MathML 要素の場合、当要素が描画されます。
diff --git a/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
index 007dea285249fd..0852a71d15b7ba 100644
--- a/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
@@ -13,7 +13,8 @@ slug: Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_
 
 ![Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](video-player-with-captions.png)
 
-> **メモ:** ソースコードは [Github](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) にあります。また実際の[動画](http://iandevlin.github.io/mdn/video-player-with-captions/)も見ることもできます。
+> [!NOTE]
+> ソースコードは [Github](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) にあります。また実際の[動画](http://iandevlin.github.io/mdn/video-player-with-captions/)も見ることもできます。
 
 ## HTML5 と動画のキャプション
 
@@ -298,7 +299,8 @@ Then this specific 'voice' will be stylable like so:
 }
 ```
 
-> **メモ:** Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.
+> [!NOTE]
+> Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.
 
 ## ブラウザーの互換性
 
@@ -308,7 +310,8 @@ Then this specific 'voice' will be stylable like so:
 
 Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The `default` attribute is also supported.
 
-> **メモ:** IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an `.htaccess` file to an appropriate directory that contains `AddType text/vtt .vtt`.
+> [!NOTE]
+> IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an `.htaccess` file to an appropriate directory that contains `AddType text/vtt .vtt`.
 
 ### Safari
 
@@ -345,4 +348,5 @@ If, after reading through this article you decide that you can't be bothered to
 - [Radiant Media Player](https://www.radiantmediaplayer.com)
   - : Supports multi-languages WebVTT closed captions
 
-> **メモ:** You can find an excellent list of HTML5 Video Players and their current "state" at [HTML5 Video Player Comparison](http://praegnanz.de/html5video/).
+> [!NOTE]
+> You can find an excellent list of HTML5 Video Players and their current "state" at [HTML5 Video Player Comparison](http://praegnanz.de/html5video/).
diff --git a/files/ja/web/media/audio_and_video_delivery/index.md b/files/ja/web/media/audio_and_video_delivery/index.md
index 7599ec1c6a079b..dbedb5cf610ffa 100644
--- a/files/ja/web/media/audio_and_video_delivery/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/index.md
@@ -34,7 +34,8 @@ slug: Web/Media/Audio_and_video_delivery
 
 上記のコードでは、スムーズな再生のために、できるだけ多くの音声を先読みさせようとする音声プレイヤーを作成しています。
 
-> **メモ:** モバイルブラウザーによっては、 `preload` 属性が無視される場合があります。
+> [!NOTE]
+> モバイルブラウザーによっては、 `preload` 属性が無視される場合があります。
 
 詳しい情報は、[クロスブラウザーの音声の基本（HTML Audio の詳細）](/ja/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#html5_audio_in_detail)
 
@@ -89,7 +90,8 @@ myAudio.play();
 
 ブラウザーで対応している音声ファイルの種類に応じて音声のソースを設定し、 5 秒後に再生ヘッドを設定して再生を試みます。
 
-> **メモ:** 再生は、ユーザー主導のイベントによって発行されない限り、ほとんどのブラウザーで無視されます。
+> [!NOTE]
+> 再生は、ユーザー主導のイベントによって発行されない限り、ほとんどのブラウザーで無視されます。
 
 また、 {{ htmlelement("audio") }} 要素に base64 エンコードされた WAV ファイルを与えて、その場で音声を生成することも可能です。
 
@@ -237,7 +239,8 @@ EME の主な使用方法の一つは、ブラウザーに DRM ([Digital Rights
 
 アダプティブストリーミングに使用される主な形式は、 [HLS](/ja/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#hls) と [MPEG-DASH](/ja/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#mpeg-dash) です。 MSE は DASH を保有することを念頭に置いて設計されています。 MSE は [ISOBMFF](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html) と [M2TS](https://en.wikipedia.org/wiki/M2ts) に従ってバイトストリームを定義します（DASH はどちらにも対応しており、 HLS は後者に対応しています）。一般的に言って、標準規格に関心があり、柔軟性を求めている場合、あるいはほとんどの現代のブラウザーに対応したい場合は、DASH を使用した方がよいかもしれません。
 
-> **メモ:** 現在、Safari は DASH に対応していませんが、OSX Yosemite でリリースされる予定の新しいバージョンの Safari では dash.js が動作する予定です。
+> [!NOTE]
+> 現在、Safari は DASH に対応していませんが、OSX Yosemite でリリースされる予定の新しいバージョンの Safari では dash.js が動作する予定です。
 
 DASH も、メディアファイルの前処理や分割が不要な単純なオンデマンドプロファイルを含む、多くのプロファイルを提供しています。また、メディアを HLS と DASH の両方に変換してくれるクラウドベースのサービスも数多くあります。
 
@@ -519,7 +522,8 @@ lastsource.addEventListener(
 - [メディアレコーダー API で音声を簡単に取り込む](https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/)
   - : メディアレコーダー API を使用して、メディアストリームを直接収録する基本的な方法について説明します。
 
-> **メモ:** Firefox OS バージョン 1.3 以降では、ストリーミング動画配信のための [RTSP](https://ja.wikipedia.org/wiki/Real_Time_Streaming_Protocol) プロトコルに対応しています。古いバージョンのための代替手段は、代替コンテンツを提供するために Gecko に適した形式 (WebM など) とともに `<video>` を使用することでしょう。これに関するより多くの情報は、随時公開される予定です。
+> [!NOTE]
+> Firefox OS バージョン 1.3 以降では、ストリーミング動画配信のための [RTSP](https://ja.wikipedia.org/wiki/Real_Time_Streaming_Protocol) プロトコルに対応しています。古いバージョンのための代替手段は、代替コンテンツを提供するために Gecko に適した形式 (WebM など) とともに `<video>` を使用することでしょう。これに関するより多くの情報は、随時公開される予定です。
 
 ## 関連情報
 
diff --git a/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
index 24be8ac6804752..d21260437a0491 100644
--- a/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
@@ -43,7 +43,8 @@ Real Time Messaging Protocol (RTMP) is a proprietary protocol developed by Macro
 
 ### RTSP
 
-> **メモ:** Real Time Streaming Protocol (RTSP) controls media sessions between endpoints and is often used together with Real-time Transport Protocol (RTP) and with Real-time Control Protocol (RTCP) for media stream delivery. Using RTP with RTCP allows for adaptive streaming. This is not yet supported natively in most browsers, but be aware that [Firefox OS 1.3 supports RTSP](http://www.mozilla.org/en-US/firefox/os/notes/1.3/).
+> [!NOTE]
+> Real Time Streaming Protocol (RTSP) controls media sessions between endpoints and is often used together with Real-time Transport Protocol (RTP) and with Real-time Control Protocol (RTCP) for media stream delivery. Using RTP with RTCP allows for adaptive streaming. This is not yet supported natively in most browsers, but be aware that [Firefox OS 1.3 supports RTSP](http://www.mozilla.org/en-US/firefox/os/notes/1.3/).
 >
 > **Note**: some vendors implement propriety transport protocols, such as RealNetworks and their Real Data Transport (RDT).
 
@@ -51,7 +52,8 @@ Real Time Messaging Protocol (RTMP) is a proprietary protocol developed by Macro
 
 RTSP 2.0 is currently in development and is not backward compatible with RTSP 1.0.
 
-> **警告:** Although the {{ htmlelement("audio") }} and {{ htmlelement("video") }} tags are protocol agnostic, no browser currently supports anything other than HTTP without requiring plugins, although this looks set to change. Protocols other than HTTP may also be subject to blocking from firewalls or proxy servers.
+> [!WARNING]
+> Although the {{ htmlelement("audio") }} and {{ htmlelement("video") }} tags are protocol agnostic, no browser currently supports anything other than HTTP without requiring plugins, although this looks set to change. Protocols other than HTTP may also be subject to blocking from firewalls or proxy servers.
 
 ## ストリーミングプロトコルの利用
 
@@ -71,19 +73,22 @@ For example:
 
 For example, [you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE](http://msopentech.com/blog/2014/01/03/streaming_video_player/).
 
-> **メモ:** Time Shifting is the process of consuming a live stream sometime after it happened.
+> [!NOTE]
+> Time Shifting is the process of consuming a live stream sometime after it happened.
 
 ## 動画ストリーミングファイル形式
 
 A couple of HTTP-based live streaming video formats are beginning to see support across browsers.
 
-> **メモ:** You can find a guide to encoding HLS and MPEG-DASH for use on the web at [Setting up adaptive streaming media sources](/ja/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources).
+> [!NOTE]
+> You can find a guide to encoding HLS and MPEG-DASH for use on the web at [Setting up adaptive streaming media sources](/ja/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources).
 
 ### MPEG-DASH
 
 DASH stands for Dynamic Adaptive Streaming over HTTP and is a new format that has recently seen support added to Chrome, and Internet Explorer 11 running on Windows 8.1. It is supported via Media Source Extensions which are used by JavaScript libraries such as [DASH.js](https://github.com/Dash-Industry-Forum/dash.js/). This approach allows us to download chunks of the video stream using XHR and "append" the chunks to the stream that's played by the {{ htmlelement("video") }} element. So for example, if we detect that the network is slow, we can start requesting lower quality (smaller) chunks for the next segment. This technology also allows an advertising segment to be appended/inserted into the stream.
 
-> **メモ:** you can also [use WebM with the MPEG DASH adaptive streaming system](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification).
+> [!NOTE]
+> you can also [use WebM with the MPEG DASH adaptive streaming system](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification).
 
 ### HLS
 
diff --git a/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md b/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md
index 0405f22d98c44e..dcef2e60970f45 100644
--- a/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md
@@ -107,11 +107,14 @@ MPEG-DASH をサポートしないブラウザのためのフォールバック
 
 MPEG-DASH を取り扱うための良いソフトウェアは [Dash Encoder](https://github.com/slederer/DASHEncoder) です。これは [MP4Box](http://gpac.wp.mines-telecom.fr/mp4box/dash/) を使ってメディアを MPEG-DASH フォーマットにエンコードします。
 
-> **メモ:** You will need to be comfortable with make files and installing dependencies to get this software up and running.
+> [!NOTE]
+> You will need to be comfortable with make files and installing dependencies to get this software up and running.
 
-> **メモ:** Since MPEG-DASH decoding is done partially using JavaScript and MSE files are often grabbed using XHR, keep same origin rules in mind.
+> [!NOTE]
+> Since MPEG-DASH decoding is done partially using JavaScript and MSE files are often grabbed using XHR, keep same origin rules in mind.
 
-> **メモ:** If you use WebM you can use the methods shown in this tutorial [DASH Adaptive Streaming for HTML 5 Video](/ja/docs/DASH_Adaptive_Streaming_for_HTML_5_Video).
+> [!NOTE]
+> If you use WebM you can use the methods shown in this tutorial [DASH Adaptive Streaming for HTML 5 Video](/ja/docs/DASH_Adaptive_Streaming_for_HTML_5_Video).
 
 エンコードされるとファイル構造はこのようになります。
 
@@ -182,7 +185,8 @@ main segment folder ->      /segments/main/
 
 MPD ファイルは、さまざまなメディアが配置されている場所をブラウザに伝え、 mimeType やコーデックなどのメタデータも含み、そこにはバイト範囲などの詳細も含まれています。一般的にこれらのファイルは自動的に生成されます。
 
-> **メモ:** 音声と動画のストリームを異なるファイルに分割することも可能です。帯域幅に応じて優先順位を付けて個別に処理することができます。
+> [!NOTE]
+> 音声と動画のストリームを異なるファイルに分割することも可能です。帯域幅に応じて優先順位を付けて個別に処理することができます。
 
 MPD ファイルを生成すれば、 {{ htmlelement("video") }} 要素で参照することができます。
 
@@ -201,7 +205,8 @@ MPEG-DASH をサポートしないブラウザのためのフォールバック
 </video>
 ```
 
-> **メモ:** MPEG-DASH の再生は [dash.js](https://github.com/Dash-Industry-Forum/dash.js/) と [Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) のブラウザ対応に依存します。最新の [dash.js リファレンスプレイヤー](http://dashif.org/reference/players/javascript/index.html) を参照してください。
+> [!NOTE]
+> MPEG-DASH の再生は [dash.js](https://github.com/Dash-Industry-Forum/dash.js/) と [Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) のブラウザ対応に依存します。最新の [dash.js リファレンスプレイヤー](http://dashif.org/reference/players/javascript/index.html) を参照してください。
 
 ## HLS エンコーディング
 
@@ -217,7 +222,8 @@ HLS エンコードのための役立つツールがいくつかあります。
 - The Stream Segmenter — provided by Apple for Mac platforms — takes a media stream from a local network and splits media into equally sized media files together with an index file.
 - Apple also provides a File Segmenter for Mac — which takes a suitably encoded file, splits it up and produces a index file, in a similar fashion to the Stream Segmenter.
 
-> **メモ:** これらのツールについて詳しくは [Using HTTP Live Streaming](https://developer.apple.com/library/mac/documentation/networkinginternet/conceptual/streamingmediaguide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming.html) を読んでください。
+> [!NOTE]
+> これらのツールについて詳しくは [Using HTTP Live Streaming](https://developer.apple.com/library/mac/documentation/networkinginternet/conceptual/streamingmediaguide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming.html) を読んでください。
 
 ### インデックスファイル (プレイリスト)
 
@@ -241,7 +247,8 @@ http://media.example.com/segment2.ts
 #EXT-X-ENDLIST
 ```
 
-> **メモ:** Comprehensive information on how to encode media for Apple's HLS format can be found on [Apple's Developer Pages](https://developer.apple.com/streaming/).
+> [!NOTE]
+> Comprehensive information on how to encode media for Apple's HLS format can be found on [Apple's Developer Pages](https://developer.apple.com/streaming/).
 
 ## 関連情報
 
diff --git a/files/ja/web/media/audio_and_video_manipulation/index.md b/files/ja/web/media/audio_and_video_manipulation/index.md
index caed4ceae075c1..3bdfdc8c87e9cb 100644
--- a/files/ja/web/media/audio_and_video_manipulation/index.md
+++ b/files/ja/web/media/audio_and_video_manipulation/index.md
@@ -113,7 +113,8 @@ processor.doLoad();
 
 これは、キャンバスを使用して動画フレームを加工する方法を示すとてもシンプルな例です。効率をよくするために、対応しているブラウザーで実行する場合は {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} を `setTimeout()` の代わりに使用することを検討したほうがいいでしょう。
 
-> **メモ:** 潜在的なセキュリティ上の問題により、動画がコードと異なるドメインより配信されている場合、動画を配信しているサーバーで [CORS (オリジン間リソース共有)](/ja/docs/Web/HTTP/Access_control_CORS) を有効にする必要があります。
+> [!NOTE]
+> 潜在的なセキュリティ上の問題により、動画がコードと異なるドメインより配信されている場合、動画を配信しているサーバーで [CORS (オリジン間リソース共有)](/ja/docs/Web/HTTP/Access_control_CORS) を有効にする必要があります。
 
 ### 動画と WebGL
 
@@ -306,7 +307,8 @@ window.addEventListener("load", setFilter);
 - ノッチ: 指定された周波数帯を除き、全ての音を通過させます
 - オールパス: 周波数に関わらず全ての音を通過させますが、幾つかの周波数間の相関係を変更します
 
-> **メモ:** 詳しくは {{domxref("BiquadFilterNode")}} を参照してください。
+> [!NOTE]
+> 詳しくは {{domxref("BiquadFilterNode")}} を参照してください。
 
 ### たたみ込みとインパルス
 
@@ -359,7 +361,8 @@ JavasCript でより低レベルでの音声操作が可能です。これを利
 - Opus: [Opus.js](https://github.com/audiocogs/opus.js)
 - Vorbis: [vorbis.js](https://github.com/audiocogs/vorbis.js)
 
-> **メモ:** AudioCogs で[いくつかのデモ](http://audiocogs.org/codecs/)を試せます。 Audiocogs は JavaScript でのコーデック実装を行うためのフレームワークである [Aurora.js](http://audiocogs.org/codecs/) を提供しています。
+> [!NOTE]
+> AudioCogs で[いくつかのデモ](http://audiocogs.org/codecs/)を試せます。 Audiocogs は JavaScript でのコーデック実装を行うためのフレームワークである [Aurora.js](http://audiocogs.org/codecs/) を提供しています。
 
 ## 例
 
diff --git a/files/ja/web/media/autoplay_guide/index.md b/files/ja/web/media/autoplay_guide/index.md
index 243f8a2f3b1826..3123e8abe9d803 100644
--- a/files/ja/web/media/autoplay_guide/index.md
+++ b/files/ja/web/media/autoplay_guide/index.md
@@ -47,7 +47,8 @@ audioElement.play();
 
 詳しくは、 [Google Chrome](https://developer.chrome.com/blog/autoplay/) および [WebKit](https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/) の自動再生ポリシーを参照してください。
 
-> **メモ:** 別の言い方をすれば、音声が含まれているメディアの再生は、ユーザー操作がまだ行われていないタブでプログラム的に再生が開始されると、通常はブロックされます。 ブラウザーはさらに他の状況下でブロックすることを選択するかもしれません。
+> [!NOTE]
+> 別の言い方をすれば、音声が含まれているメディアの再生は、ユーザー操作がまだ行われていないタブでプログラム的に再生が開始されると、通常はブロックされます。 ブラウザーはさらに他の状況下でブロックすることを選択するかもしれません。
 
 ## メディア要素の自動再生
 
@@ -108,13 +109,15 @@ function handleFirstPlay(event) {
 
 この時点で、あなたのサイトやアプリはそれがする必要があるものは何でも始めることができます。
 
-> **メモ:** この方法では、自動再生とユーザーによる手動再生開始は区別されません。
+> [!NOTE]
+> この方法では、自動再生とユーザーによる手動再生開始は区別されません。
 
 ### play() メソッド
 
 用語「自動再生」はまた、スクリプトが、ユーザ入力イベント処理のコンテキストの外側で、音声を含んだメディアの再生を開始しようと試みるシナリオを指します。 これは、メディア要素の {{domxref("HTMLMediaElement.play", "play()")}} メソッドを呼び出すことによって行われます。
 
-> **メモ:** 自動再生設定のサポートは、自動再生の他の手段よりも `autoplay` 属性の方が広く普及しているため、できるだけ `autoplay` 属性を使用することを強くお勧めします。 また、ブラウザーが再生開始の責任を負うようにして、再生のタイミングを最適化します。
+> [!NOTE]
+> 自動再生設定のサポートは、自動再生の他の手段よりも `autoplay` 属性の方が広く普及しているため、できるだけ `autoplay` 属性を使用することを強くお勧めします。 また、ブラウザーが再生開始の責任を負うようにして、再生のタイミングを最適化します。
 
 #### 例: 動画の再生
 
@@ -182,7 +185,8 @@ let playAttempt = setInterval(() => {
 
 また、`'none'` を指定して自動再生を完全に無効にしたり、`'*'` を指定してすべてのドメインからの自動再生を許可したり、メディアを自動的に再生できる 1 つ以上の特定のオリジンを指定できます。 これらのオリジンはスペース文字で区切ります。
 
-> **メモ:** 指定された機能ポリシーは、そのフレームとその中にネストされているすべてのフレームに新しい機能ポリシーを設定する [`allow`](/ja/docs/Web/HTML/Element/iframe#allow) が含まれていない限り、文書とその中にネストされているすべての {{HTMLElement("iframe")}} に適用されます。
+> [!NOTE]
+> 指定された機能ポリシーは、そのフレームとその中にネストされているすべてのフレームに新しい機能ポリシーを設定する [`allow`](/ja/docs/Web/HTML/Element/iframe#allow) が含まれていない限り、文書とその中にネストされているすべての {{HTMLElement("iframe")}} に適用されます。
 
 `<iframe>` の [`allow`](/ja/docs/Web/HTML/Element/iframe#allow) 属性を使用してそのフレームとそのネストされたフレームの機能ポリシーを指定するときは、値 `'src'` を指定して、フレームの [`src`](/ja/docs/Web/HTML/Element/iframe#src) 属性で指定されたものと同じドメインからのメディアの自動再生のみを許可できます。
 
diff --git a/files/ja/web/media/formats/image_types/index.md b/files/ja/web/media/formats/image_types/index.md
index 6e76afbd957fde..79475c58f64af7 100644
--- a/files/ja/web/media/formats/image_types/index.md
+++ b/files/ja/web/media/formats/image_types/index.md
@@ -105,7 +105,8 @@ slug: Web/Media/Formats/Image_types
   </tbody>
 </table>
 
-> **メモ:** PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている（つまり、市場シェアがゼロに近づいてきている）ため、人気が高まってきています。
+> [!NOTE]
+> PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている（つまり、市場シェアがゼロに近づいてきている）ため、人気が高まってきています。
 
 以下のリストにはウェブ上で見られる画像形式を挙げていますが、ウェブコンテンツでは避けた方が良いものがあります （一般的には、ブラウザーの対応が広くないか、より良い代替手段があるためです）。
 
@@ -146,7 +147,8 @@ slug: Web/Media/Formats/Image_types
 
 **注:** 各画像形式の略語は、形式、その機能、ブラウザーの互換性に関する詳細な情報 (どのバージョンで対応が導入されたか、後に導入された可能性のある特定の特殊機能を含む) についてのより詳しい説明へとリンクしています。
 
-> **メモ:** Safari 11.1では、アニメーション GIF の代替として、動画形式を使用する機能が追加されました。
+> [!NOTE]
+> Safari 11.1では、アニメーション GIF の代替として、動画形式を使用する機能が追加されました。
 > 他のブラウザは対応していません。
 > 詳しくは、 [Chromium のバグ](https://bugs.chromium.org/p/chromium/issues/detail?id=791658)、[Firefox のバグ](https://bugzilla.mozilla.org/show_bug.cgi?id=895131)を参照してください。
 
@@ -256,7 +258,8 @@ APNG は、進捗インジケーターやアクティビティ[スロバー](htt
 
 AVIF (AV1 Image File Format) は、 *AV1ビットストリームを HEIF (High Efficiency Image File Format) コンテナー*にエンコードした、強力でオープンソース、ロイヤリティフリーのファイル形式です。
 
-> **メモ:** AVIF は、ウェブコンテンツで画像を共有するための「次の大きな流れ」となる可能性を秘めています。
+> [!NOTE]
+> AVIF は、ウェブコンテンツで画像を共有するための「次の大きな流れ」となる可能性を秘めています。
 > AVIF は、複雑なライセンスや特許使用料に煩わされることなく、最先端の機能と性能を提供し、他の類似製品を抑えています。
 
 AV1 は、もともとインターネットでの映像伝送用に設計された符号化方式です。
@@ -357,7 +360,8 @@ AVIF は、デスクトップでは Chrome、Opera、Firefox で対応してい
 
 **BMP** (**Bitmap 画像**) ファイル形式は、 Windows コンピューターで最も普及しており、ウェブアプリやコンテンツではふつう、特殊な場合にのみ使用されます。
 
-> **警告:** ウェブサイトのコンテンツに BMP ファイルを使用することは、一般的に避けてください。
+> [!WARNING]
+> ウェブサイトのコンテンツに BMP ファイルを使用することは、一般的に避けてください。
 > 一般的な BMP ファイルは、データを非圧縮のラスター画像として表現するため、 png や jpg の画像形式と比較してファイルサイズが大きくなります。
 > より効率的な BMP 形式もありますが、あまり普及しておらず、ウェブブラウザーが対応していることもほとんどありません。
 
@@ -579,7 +583,8 @@ ICO ファイルには、複数のアイコンを含むことができ、それ
 各アイコンのデータは、ファイルヘッダーを含まない [BMP](#bmp_ビットマップファイル) 画像か、ファイルヘッダーを含む完全な [PNG](#png_portable_network_graphics) 画像のどちらかを使用することができます。
 ICO ファイル内で PNG を使用する方法は Windows Vista までは対応しておらず、対応が十分でない可能性があるため、 ICO ファイルを使用する場合は、 BMP 形式を使用することをお勧めします。
 
-> **警告:** ICO ファイルは、ウェブコンテンツに使用すべきではありません。
+> [!WARNING]
+> ICO ファイルは、ウェブコンテンツに使用すべきではありません。
 > また、ファビコンでの利用は [異なる利用場面のアイコンの提供](/ja/docs/Web/HTML/Element/link#%E7%95%B0%E3%81%AA%E3%82%8B%E5%88%A9%E7%94%A8%E5%A0%B4%E9%9D%A2%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E6%8F%90%E4%BE%9B) で述べたように、 PNG ファイルと {{HTMLElement("link")}} 要素を使用することで抑制されています。
 
 <table class="standard-table">
@@ -1316,7 +1321,8 @@ WebP は現在、主要なウェブブラウザーの最新バージョンが幅
   </tbody>
 </table>
 
-> **メモ:** Safari 14、すなわちバージョン 14.0 は WebP の[対応がアナウンスされている](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)にもかかわらず、 .webp 画像は macOS デスクトップではネイティブで表示されません。一方、 Safari の iOS 14 版では .webp 画像が正しく表示されます。
+> [!NOTE]
+> Safari 14、すなわちバージョン 14.0 は WebP の[対応がアナウンスされている](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)にもかかわらず、 .webp 画像は macOS デスクトップではネイティブで表示されません。一方、 Safari の iOS 14 版では .webp 画像が正しく表示されます。
 
 ### XBM (X Window System Bitmap file)
 
diff --git a/files/ja/web/media/html_media/index.md b/files/ja/web/media/html_media/index.md
index 1b9732ad5ab652..7f11b1d9de353a 100644
--- a/files/ja/web/media/html_media/index.md
+++ b/files/ja/web/media/html_media/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{Glossary("HTML")}} の {{HTMLElement("audio")}} および {{HTMLElement("video")}} 要素により、ウェブページに音声や動画のコンテンツを埋め込むことができます。さらに言えば、その基盤となるインターフェイスは、画面の外でもメディアを全般的に操作し、再生するためのキーとなるものです。このガイドでは、メディア要素を復習し、HTML コンテンツで使用する方法について説明します。
 
-> **メモ:** このガイドは、MDNで散在している様々な場所のコンテンツを、1つのまとまった文書やその集合に統合するために計画された更新です。この作業物はまだ予定されていませんが、近いうちに来ることを期待しています。今のところ、お探しの重要な情報の一部は、このトピックに関する[学習領域の記事](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)で得ることができます。
+> [!NOTE]
+> このガイドは、MDNで散在している様々な場所のコンテンツを、1つのまとまった文書やその集合に統合するために計画された更新です。この作業物はまだ予定されていませんが、近いうちに来ることを期待しています。今のところ、お探しの重要な情報の一部は、このトピックに関する[学習領域の記事](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)で得ることができます。
 
 [音声と動画の操作](/ja/docs/Web/Guide/Audio_and_video_manipulation)は始めるにはよいかもしれませんが、現時点ではこれらのオブジェクトを画面外で使用するための具体的なガイドはありません。
 
diff --git a/files/ja/web/opensearch/index.md b/files/ja/web/opensearch/index.md
index 6c9edbe4512aff..9c27b9139498e9 100644
--- a/files/ja/web/opensearch/index.md
+++ b/files/ja/web/opensearch/index.md
@@ -13,7 +13,8 @@ l10n:
 
 OpenSearch 記述ファイルは、[検索プラグインの自動検出](#autodiscovery_of_search_plugins)で説明されているように通知することができます。
 
-> **警告:** OpenSearch プラグインは [addons.mozilla.org](https://addons.mozilla.org) (AMO) にアップロードできなくなりました。検索エンジン機能は `manifest.json` ファイルに[クローム設定](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides)を指定して WebExtension API を使用する必要があります。
+> [!WARNING]
+> OpenSearch プラグインは [addons.mozilla.org](https://addons.mozilla.org) (AMO) にアップロードできなくなりました。検索エンジン機能は `manifest.json` ファイルに[クローム設定](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides)を指定して WebExtension API を使用する必要があります。
 
 ## OpenSearch 記述ファイル
 
@@ -52,7 +53,8 @@ OpenSearch 記述ファイルは、[検索プラグインの自動検出](#autod
 
     Firefox はアイコンを [base64](https://ja.wikipedia.org/wiki/Base64) `data:` URI としてキャッシュします (検索プラグインは[プロファイル](https://support.mozilla.org/ja/kb/profiles-where-firefox-stores-user-data)の `searchplugins/` フォルダーに格納されます)。これを行う際に、 `http:` および `https:` URL は `data:` URI に変換されます。
 
-    > **メモ:** リモートからアイコンを読み込む際 (すなわち、 `data:` URI とは対照的に `https://` URI からの場合)、 Firefox は**10 KB**より大きなアイコンを拒否します。
+    > [!NOTE]
+    > リモートからアイコンを読み込む際 (すなわち、 `data:` URI とは対照的に `https://` URI からの場合)、 Firefox は**10 KB**より大きなアイコンを拒否します。
 
     ![Firefox の検索ボックスに表示される Google の検索候補](searchsuggestionsample.png)
 
@@ -109,7 +111,8 @@ OpenSearch 記述ファイルは、[検索プラグインの自動検出](#autod
 
 この方法で、著者とタイトルによる検索を行うプラグインをサイトで提供することができます。
 
-> **メモ:** Firefox では、検索プラグインで提供されたアイコンがある場合は、検索ボックスのアイコンが変化して示します。 (画像を参照。緑のプラスの記号です。) そのため、ユーザーのインターフェイスで検索ボックスが非表示になっている場合、これを示すことは*ありません*。_一般に、この動作はブラウザーによって異なります_。
+> [!NOTE]
+> Firefox では、検索プラグインで提供されたアイコンがある場合は、検索ボックスのアイコンが変化して示します。 (画像を参照。緑のプラスの記号です。) そのため、ユーザーのインターフェイスで検索ボックスが非表示になっている場合、これを示すことは*ありません*。_一般に、この動作はブラウザーによって異なります_。
 
 ## OpenSearch プラグインの自動更新の対応
 
@@ -123,7 +126,8 @@ OpenSearch プラグインは自動的に更新することができます。 `U
      template="https://example.com/mysearchdescription.xml" />
 ```
 
-> **メモ:** 現時点で、 [addons.mozilla.org](https://addons.mozilla.org) (AMO) は OpenSearch プラグインの自動更新に対応していません。自分の検索プラグインを AMO に登録したい場合は、送信前に自動更新機能を削除してください。
+> [!NOTE]
+> 現時点で、 [addons.mozilla.org](https://addons.mozilla.org) (AMO) は OpenSearch プラグインの自動更新に対応していません。自分の検索プラグインを AMO に登録したい場合は、送信前に自動更新機能を削除してください。
 
 ## トラブルシューティングのヒント
 
diff --git a/files/ja/web/performance/dns-prefetch/index.md b/files/ja/web/performance/dns-prefetch/index.md
index 9b731abe6943f9..39716a4eb72d3a 100644
--- a/files/ja/web/performance/dns-prefetch/index.md
+++ b/files/ja/web/performance/dns-prefetch/index.md
@@ -63,7 +63,8 @@ Link: <https://fonts.googleapis.com/>; rel=preconnect
 <link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
 ```
 
-> **メモ:** ページが多数の第三者ドメインに接続する必要がある場合、すべてに事前接続するのは逆効果です。 `preconnect` ヒントは最も重要な接続にのみ使用するのが最適です。他にも `<link rel="dns-prefetch">` を使用して、最初の段階である DNS 検索の時間を節約しましょう。
+> [!NOTE]
+> ページが多数の第三者ドメインに接続する必要がある場合、すべてに事前接続するのは逆効果です。 `preconnect` ヒントは最も重要な接続にのみ使用するのが最適です。他にも `<link rel="dns-prefetch">` を使用して、最初の段階である DNS 検索の時間を節約しましょう。
 
 これらのヒントをペアにしている理由は、 dns-prefetch の対応が preconnect の対応よりも優れているからです。 preconnect に対応していないブラウザーでも、 dns-prefetch に代替されることで、ある程度の好ましいことを取得することができます。これは HTML の機能なので、とても耐障害性に優れています。非対応のブラウザーが dns-prefetch のヒントや他のリソースのヒントに遭遇しても、サイトが壊れることはありません。ただ、指定されたことが提供されないだけです。
 
diff --git a/files/ja/web/performance/fundamentals/index.md b/files/ja/web/performance/fundamentals/index.md
index c7e12437c0f358..9e98bf82b32970 100644
--- a/files/ja/web/performance/fundamentals/index.md
+++ b/files/ja/web/performance/fundamentals/index.md
@@ -33,7 +33,8 @@ l10n:
 
 脳は考えるとき、動きはギクシャクしたバラバラなものではなく、滑らかに連続して更新されるものだと考えます。 (ストロボはそれを逆手に取り、脳の入力を奪って離散的な現実を錯覚させるから面白いのです）。コンピューターのディスプレイでは、フレームレートが高ければ高いほど、より忠実に現実を再現することができます。
 
-> **メモ:** 人間は通常、60Hz 以上のフレームレートの違いを知覚することができません。そのため、最近の電子ディスプレイは、60Hz で更新するように設計されています。例えばハチドリには、テレビが途切れ途切れで非現実的に見えることでしょう。
+> [!NOTE]
+> 人間は通常、60Hz 以上のフレームレートの違いを知覚することができません。そのため、最近の電子ディスプレイは、60Hz で更新するように設計されています。例えばハチドリには、テレビが途切れ途切れで非現実的に見えることでしょう。
 
 ### メモリーの使用
 
@@ -101,7 +102,8 @@ HTML、CSS、Canvas を支える Gecko のグラフィックパイプライン
 
 起動を遅らせるもう 1 つの問題は、リクエストに対するレスポンス (データベースのロードなど) を待つことで発生するアイドルタイムです。この問題を避けるために、アプリケーションは起動時にできるだけ早くリクエストを発行する必要があります (これを「フロントローディング」と呼びます)。そうすれば、後でデータが必要になったとき、うまくいけばすでに利用可能で、アプリケーションは待つ必要がありません。
 
-> **メモ:** 起動時のパフォーマンスを向上させるための詳しい情報は、[起動時のパフォーマンスを最適化する](/ja/docs/Web/Performance/Optimizing_startup_performance)をご覧ください。
+> [!NOTE]
+> 起動時のパフォーマンスを向上させるための詳しい情報は、[起動時のパフォーマンスを最適化する](/ja/docs/Web/Performance/Optimizing_startup_performance)をご覧ください。
 
 また、ローカルにキャッシュされた静的なリソースは、高レイテンシー、低帯域幅のモバイルネットワークを介して取得された動的なデータよりもはるかに速く読み込まれることに注意してください。ネットワークへのリクエストは、アプリケーションの早期起動のためのクリティカルパスであってはなりません。ローカルキャッシュ／オフラインアプリケーションは、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)によって実現できます。オフラインおよびバックグラウンド同期機能のサービスワーカーの使用については、[オフラインおよびバックグラウンド処理](/ja/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation)を参照してください。
 
@@ -146,7 +148,8 @@ CSS アニメーションでは、 [キーフレーム](/ja/docs/Web/CSS/@keyfra
 
 さらに、変換は、他では得られない機能を提供します。 2D 空間の要素を変換するだけでなく、 3 次元に変換したり、斜めにしたり、回転させたりすることができます。 Paul Irish 氏は、パフォーマンスの観点から見た [`translate()` の利点を詳しく分析](https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/) (2012) しています。しかし、一般的には、 CSS アニメーションを使用する場合と同じメリットがあります。つまり、仕事に適したツールを使用し、最適化はブラウザーに任せることができるのです。また、要素の位置を簡単に拡張できる方法を使用しています。 `top` と `left` の位置指定で座標変換をシミュレートする場合は、多くの追加コードが必要になります。もうひとつの利点は、 `canvas` 要素で作業するのと同じだということです。
 
-> **メモ:** プラットフォームによっては、 CSS アニメーションでハードウェアアクセラレーションを利用したい場合、 `translateZ(0.1)` 変換を割り当てる必要があります。前述のとおり、パフォーマンスが向上します。しかし、使用しすぎるとメモリー消費の問題もあります。テストをして、自分のアプリケーションに最適な方法を見つけてみてはいかがでしょうか。
+> [!NOTE]
+> プラットフォームによっては、 CSS アニメーションでハードウェアアクセラレーションを利用したい場合、 `translateZ(0.1)` 変換を割り当てる必要があります。前述のとおり、パフォーマンスが向上します。しかし、使用しすぎるとメモリー消費の問題もあります。テストをして、自分のアプリケーションに最適な方法を見つけてみてはいかがでしょうか。
 
 #### `requestAnimationFrame()` を `setInterval()` の代わりに使用する
 
@@ -178,7 +181,8 @@ Firefox や Chrome などのブラウザーには、ページの表示速度が
 
 ![Gecko 内蔵プロファイラーウィンドウが多くのネットワーク情報を表示しているところ。](gecko-profiler.png)
 
-> **メモ:** Android のブラウザーで Firefox を起動し、[リモートデバッグ](https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html)を有効にすることで、これらのツールを使用することができます。
+> [!NOTE]
+> Android のブラウザーで Firefox を起動し、[リモートデバッグ](https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html)を有効にすることで、これらのツールを使用することができます。
 
 特に、モバイルブラウザーでは、数十から数百のネットワークリクエストに時間がかかります。また、大きな画像や CSS グラデーションの描画にも時間がかかることがあります。大きなファイルのダウンロードは、高速なネットワークであっても時間がかかることがあります。これは、モバイルハードウェアの速度が遅すぎて、利用可能なすべての帯域幅を活用できない場合があるためです。モバイルウェブのパフォーマンスに関する一般的なヒントについては、 Maximiliano Firtman 氏の [Mobile Web High Performance](https://www.slideshare.net/firt/mobile-web-high-performance) の談話をご覧ください。
 
diff --git a/files/ja/web/performance/speculative_loading/index.md b/files/ja/web/performance/speculative_loading/index.md
index 935a213f65dd94..e8740fab0d98ce 100644
--- a/files/ja/web/performance/speculative_loading/index.md
+++ b/files/ja/web/performance/speculative_loading/index.md
@@ -21,7 +21,8 @@ l10n:
 - **事前レンダリング (Prerendering)** はさらに段階を踏み、要求されたときに表示させるコンテンツを実際にレンダリングしておきます。これが行われる方法によっては、古いページから新しいページへ即座に移動することができます。
 - **事前接続 (Preconnecting)** は、接続ハンドシェイク（すなわち、DNS + TCP + TLS）の一部またはすべてを事前に実行しておくすることで、指定されたオリジンからの将来の読み込みを高速化するためのものです。
 
-> **メモ:** 上記の説明は高水準で一般的なものです。ブラウザーが先読みや事前レンダリングを実現するために正確に何を行うかは、用いる機能によって異なります。より正確な機能の説明は、下記の[投機的読み込み機能](#投機的読み込み機能)の節で提供されています。
+> [!NOTE]
+> 上記の説明は高水準で一般的なものです。ブラウザーが先読みや事前レンダリングを実現するために正確に何を行うかは、用いる機能によって異なります。より正確な機能の説明は、下記の[投機的読み込み機能](#投機的読み込み機能)の節で提供されています。
 
 ## 投機的読み込みはどのように実現するのか
 
@@ -65,7 +66,8 @@ Link: <https://example.com>; rel="preconnect"
 <link rel="dns-prefetch" href="https://example.com" />
 ```
 
-> **メモ:** 詳しくは [dns-prefetch の使用](/ja/docs/Web/Performance/dns-prefetch)を参照してください。
+> [!NOTE]
+> 詳しくは [dns-prefetch の使用](/ja/docs/Web/Performance/dns-prefetch)を参照してください。
 
 ### `<link rel="preload">`
 
@@ -146,7 +148,8 @@ Link: <https://www.example.com/fonts/cicle_fina-webfont.woff2>; rel="preload"
 
 ### `<link rel="prerender">` {{deprecated_inline}}{{non-standard_inline}}
 
-> **メモ:** この技術は Chrome でしか利用できませんでしたが、非推奨になりました。代わりに[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) を使用しましょう。
+> [!NOTE]
+> この技術は Chrome でしか利用できませんでしたが、非推奨になりました。代わりに[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) を使用しましょう。
 
 [`<link rel="prerender">`](/ja/docs/Web/HTML/Attributes/rel/prerender) は、ユーザーが次のナビゲーションのために対象とするリソースを必要とするかもしれないというヒントをブラウザーに提供します。 `prerender` は同じサイト内での将来のナビゲーションのために使用され、複数ページアプリケーション (MPA) では意味がありますが、単一ページアプリケーション (SPA) では意味がありません。
 
diff --git a/files/ja/web/progressive_web_apps/tutorials/js13kgames/index.md b/files/ja/web/progressive_web_apps/tutorials/js13kgames/index.md
index 08efc3fb7964ae..13d1be7e968f30 100644
--- a/files/ja/web/progressive_web_apps/tutorials/js13kgames/index.md
+++ b/files/ja/web/progressive_web_apps/tutorials/js13kgames/index.md
@@ -9,7 +9,8 @@ slug: Web/Progressive_web_apps/Tutorials/js13kGames
 
 ## プログレッシブウェブアプリとは
 
-> **メモ:** 「プログレッシブウェブアプリ」という用語は、公式または正式な名称ではありません。ウェブ技術だけを使って、柔軟性と適応性のあるアプリケーションを作成するというコンセプトのもと、 Google が当初使用していた略語です。
+> [!NOTE]
+> 「プログレッシブウェブアプリ」という用語は、公式または正式な名称ではありません。ウェブ技術だけを使って、柔軟性と適応性のあるアプリケーションを作成するというコンセプトのもと、 Google が当初使用していた略語です。
 
 PWA は数々の特定の技術と、ウェブアプリとネイティブアプリの機能の利点を併せ持った標準パターンを使用して開発されたウェブアプリです。例えば、ウェブアプリはより見つけやすいものです。アクセスするのは、アプリケーションをインストールするよりはるかに簡単で手早く、リンクを通してウェブアプリを共有することもできます。
 
diff --git a/files/ja/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md b/files/ja/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
index de72af3fe92fd3..2ad9a0e35a9a9f 100644
--- a/files/ja/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
+++ b/files/ja/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
@@ -18,7 +18,8 @@ slug: Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
 - 端末上のアプリを表すアイコン
 - アプリをオフラインで動作させるために登録された[service worker](/ja/docs/Web/API/Service_Worker_API) (現時点では Android の Chrome にのみ必要です)
 
-> **メモ:** 現在、サービスワーカーが必要なのは、 Chrome, Edge, Samsung Internet などの Chromium ベースのブラウザーのみです。Firefox を使ってアプリを開発する場合は、 Chromium ベースのブラウザーと互換性を持たせるためにサービスワーカーが必要になるので注意が必要です。
+> [!NOTE]
+> 現在、サービスワーカーが必要なのは、 Chrome, Edge, Samsung Internet などの Chromium ベースのブラウザーのみです。Firefox を使ってアプリを開発する場合は、 Chromium ベースのブラウザーと互換性を持たせるためにサービスワーカーが必要になるので注意が必要です。
 
 ### マニフェストファイル
 
@@ -32,7 +33,8 @@ slug: Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
 <link rel="manifest" href="js13kpwa.webmanifest" />
 ```
 
-> **メモ:** 過去にマニフェストに使用されてきた一般的な拡張機能がいくつかあります。 `manifest.webapp` は Firefox OS アプリのマニフェストで一般的でしたが、多くの場合、コンテンツは JSON 構造で編成されているためウェブマニフェストには `manifest.json` を使用します。 しかし、`.webmanifest` ファイル形式は [W3C マニフェスト仕様書](https://w3c.github.io/manifest/) (英語) で明示的に言及されており、ここでは使用するのはこれです。
+> [!NOTE]
+> 過去にマニフェストに使用されてきた一般的な拡張機能がいくつかあります。 `manifest.webapp` は Firefox OS アプリのマニフェストで一般的でしたが、多くの場合、コンテンツは JSON 構造で編成されているためウェブマニフェストには `manifest.json` を使用します。 しかし、`.webmanifest` ファイル形式は [W3C マニフェスト仕様書](https://w3c.github.io/manifest/) (英語) で明示的に言及されており、ここでは使用するのはこれです。
 
 ファイルの内容は次のようになります。
 
diff --git a/files/ja/web/security/mixed_content/index.md b/files/ja/web/security/mixed_content/index.md
index d4d2697021bfa0..84fc19f1a39a8c 100644
--- a/files/ja/web/security/mixed_content/index.md
+++ b/files/ja/web/security/mixed_content/index.md
@@ -59,7 +59,8 @@ Firefox 23 以降より、能動的な混在コンテンツはデフォルトで
 
 このエラーを修正するには、 HTTP コンテンツへのリクエストをすべて HTTPS コンテンツへのリクエストに差し替えてください。よくある混在コンテンツには JavaScript ファイルやスタイルシート、画像、動画、その他のメディアファイルなどがあります。
 
-> **メモ:** Firefox 55 以降、 `http://127.0.0.1/` で混在コンテンツの読み込みが許可されました ([Firefox バグ 903966](https://bugzil.la/903966) を参照)。 Chrome は `http://127.0.0.1/` 及び `http://localhost/` で混在コンテンツを許可しています。 Safari は混在コンテンツを許可しません。
+> [!NOTE]
+> Firefox 55 以降、 `http://127.0.0.1/` で混在コンテンツの読み込みが許可されました ([Firefox バグ 903966](https://bugzil.la/903966) を参照)。 Chrome は `http://127.0.0.1/` 及び `http://localhost/` で混在コンテンツを許可しています。 Safari は混在コンテンツを許可しません。
 
 ## 関連情報
 
diff --git a/files/ja/web/security/practical_implementation_guides/index.md b/files/ja/web/security/practical_implementation_guides/index.md
index 93b552b1e05817..6ddc1a0688804b 100644
--- a/files/ja/web/security/practical_implementation_guides/index.md
+++ b/files/ja/web/security/practical_implementation_guides/index.md
@@ -6,7 +6,8 @@ original_slug: Web/Security/Securing_your_site
 
 サイトをより安全にする方法はいくつもあります。この記事では、その方法を紹介するとともに、他のより有益な記事へのリンクを掲載しています。
 
-> **メモ:** この記事は作成途中であり、以下の事項に従うことによりあなたのサイトが完全にセキュアになることを保証するものではありません。
+> [!NOTE]
+> この記事は作成途中であり、以下の事項に従うことによりあなたのサイトが完全にセキュアになることを保証するものではありません。
 
 ## ユーザー情報のセキュリティ
 
diff --git a/files/ja/web/security/same-origin_policy/index.md b/files/ja/web/security/same-origin_policy/index.md
index db19877960104a..fe23ccaa6631d1 100644
--- a/files/ja/web/security/same-origin_policy/index.md
+++ b/files/ja/web/security/same-origin_policy/index.md
@@ -27,7 +27,8 @@ slug: Web/Security/Same-origin_policy
 
 `about:blank` や `javascript:` の URL のページから実行されたスクリプトは、その URL にオリジンのサーバーについての情報が明示的に含まれていないため、その URL を開いた文書のオリジンを継承します。
 
-> **メモ:** 例えば、 `about:blank` は (例えば {{domxref("Window.open()")}} メカニズムを使用して) 新しい空のポップアップウィンドウを生成し、その中に親スクリプトがコンテンツを書き込むために使用されます。ポップアップウィンドウにもコードが含まれた場合、そのコードはそれを生成したスクリプトと同じオリジンを継承します。
+> [!NOTE]
+> 例えば、 `about:blank` は (例えば {{domxref("Window.open()")}} メカニズムを使用して) 新しい空のポップアップウィンドウを生成し、その中に親スクリプトがコンテンツを書き込むために使用されます。ポップアップウィンドウにもコードが含まれた場合、そのコードはそれを生成したスクリプトと同じオリジンを継承します。
 
 > **警告:** `data:` の URL は新しく、空のセキュリティコンテキストを生成します。
 
@@ -44,7 +45,8 @@ Internet Explorer では、同一オリジンポリシーについて二つの
 
 ## オリジンの変更
 
-> **警告:** ここで説明している ({{domxref("document.domain")}} セッターを使用する) 方法は非推奨です。同一オリジンポリシーによるセキュリティ保護を弱め、ブラウザーのオリジンモデルを複雑にして、相互運用性の問題やセキュリティバグを引き起こすためです。
+> [!WARNING]
+> ここで説明している ({{domxref("document.domain")}} セッターを使用する) 方法は非推奨です。同一オリジンポリシーによるセキュリティ保護を弱め、ブラウザーのオリジンモデルを複雑にして、相互運用性の問題やセキュリティバグを引き起こすためです。
 
 ページのオリジンは、いくつかの制限の下で変更されることがあります。スクリプトを用いると、 {{domxref("document.domain")}} の値を現在のドメインまたは上位ドメインに変更できます。スクリプトによって現在のドメインの上位ドメインへオリジンが変更された場合、より短くなったドメイン名は次回のオリジン検査時に用いられます。
 
@@ -60,7 +62,8 @@ document.domain = "company.com";
 
 この仕組みにはいくつかの制限があります。例えば、 [`document-domain`](/ja/docs/Web/HTTP/Headers/Feature-Policy/document-domain) の [`Feature-Policy`](/ja/docs/Web/HTTP/Headers/Feature-Policy) が有効になっている場合や、文書がサンドボックス化された [`<iframe>`](/ja/docs/Web/HTML/Element/iframe) 内にある場合は、 "`SecurityError`" の [`DOMException`](/ja/docs/Web/API/DOMException) が発生します。また、この方法でオリジンを変更しても、多くの Web API ([`localStorage`](/ja/docs/Web/API/Window/localStorage), [`indexedDB`](/ja/docs/Web/API/IndexedDB_API), [`BroadcastChannel`](/ja/docs/Web/API/BroadcastChannel), [`SharedWorker`](/ja/docs/Web/API/SharedWorker) など) で使用されているオリジンチェックには影響しません。失敗事例のより詳細なリストは、 [Document.domain > Failures](/ja/docs/Web/API/Document/domain#failures) にあります。
 
-> **メモ:** サブドメインから親ドメインへアクセスさせるために `document.domain` を使用する際は、親ドメインとサブドメインの双方で同じ値を `document.domain` に設定することが必要です。この作業は、親ドメインを元の値に戻す際にも必要です。これを怠ると権限エラーが発生します。
+> [!NOTE]
+> サブドメインから親ドメインへアクセスさせるために `document.domain` を使用する際は、親ドメインとサブドメインの双方で同じ値を `document.domain` に設定することが必要です。この作業は、親ドメインを元の値に戻す際にも必要です。これを怠ると権限エラーが発生します。
 
 ## 異なるオリジンへのネットワークアクセス
 
diff --git a/files/ja/web/security/secure_contexts/features_restricted_to_secure_contexts/index.md b/files/ja/web/security/secure_contexts/features_restricted_to_secure_contexts/index.md
index 44577184d5b397..59f8ba82cf65e9 100644
--- a/files/ja/web/security/secure_contexts/features_restricted_to_secure_contexts/index.md
+++ b/files/ja/web/security/secure_contexts/features_restricted_to_secure_contexts/index.md
@@ -9,7 +9,8 @@ slug: Web/Security/Secure_Contexts/features_restricted_to_secure_contexts
 
 この節では、安全なコンテキストでのみ利用できる API の一覧を、制限が導入されたブラウザーのバージョンと共に示します。
 
-> **メモ:** 実際に安全なコンテキストに対応しているブラウザーのみ表示しています。安全なコンテキストの対応の詳細は[こちらをご覧ください](/ja/docs/Web/Security/Secure_Contexts#Browser_compatibility)。
+> [!NOTE]
+> 実際に安全なコンテキストに対応しているブラウザーのみ表示しています。安全なコンテキストの対応の詳細は[こちらをご覧ください](/ja/docs/Web/Security/Secure_Contexts#Browser_compatibility)。
 
 | API                                                                                                                                         | Chrome/Opera | Edge                                                                                                             | Safari                                                                                  | Firefox                                                |
 | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------ |
diff --git a/files/ja/web/security/secure_contexts/index.md b/files/ja/web/security/secure_contexts/index.md
index 8dd2519a055ee5..e0e47c751ed9d2 100644
--- a/files/ja/web/security/secure_contexts/index.md
+++ b/files/ja/web/security/secure_contexts/index.md
@@ -25,7 +25,8 @@ Web の API には強力なものもあり、攻撃者に対して以下のよ
 
 `http://127.0.0.1` の URL、`http://localhost` の URL、`http://*.localhost` の URL (例 `http://dev.whatever.localhost/`) 、`file://` の URL など、ローカルに配信されたリソースも安全に配信されていると考えられます。
 
-> **メモ:** Firefox 84 以降では、`http://localhost` や `http://*.localhost` というURLを信頼できるオリジンとして扱っています (以前のバージョンでは、`localhost` がローカル/ループバックアドレスにマップされると保証されていなかったため、信頼できるオリジンとしては扱っていませんでした) 。
+> [!NOTE]
+> Firefox 84 以降では、`http://localhost` や `http://*.localhost` というURLを信頼できるオリジンとして扱っています (以前のバージョンでは、`localhost` がローカル/ループバックアドレスにマップされると保証されていなかったため、信頼できるオリジンとしては扱っていませんでした) 。
 
 ローカルではないリソースが安全であるとみなされるためには、以下の基準を満たす必要があります。
 
diff --git a/files/ja/web/security/subresource_integrity/index.md b/files/ja/web/security/subresource_integrity/index.md
index 105b3358173b0f..887384262202fb 100644
--- a/files/ja/web/security/subresource_integrity/index.md
+++ b/files/ja/web/security/subresource_integrity/index.md
@@ -5,7 +5,8 @@ slug: Web/Security/Subresource_Integrity
 
 **サブリソース完全性** (Subresource Integrity, SRI) は、 ({{Glossary("CDN")}} などから) 取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。
 
-> **メモ:** サブリソース完全性の検証において、サブリソースが埋め込まれる文書のオリジン以外から提供されたリソースについては、ブラウザーは[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) を使用してリソースに追加のチェックを行い、オリジンがリソースがリクエストしたオリジンに共有されることを許可しているかどうかを確認します。
+> [!NOTE]
+> サブリソース完全性の検証において、サブリソースが埋め込まれる文書のオリジン以外から提供されたリソースについては、ブラウザーは[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) を使用してリソースに追加のチェックを行い、オリジンがリソースがリクエストしたオリジンに共有されることを許可しているかどうかを確認します。
 
 ## サブリソース完全性の必要性
 
@@ -29,7 +30,8 @@ sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
 
 従って、 `oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC` がハッシュ値の部分であり、接頭辞の `sha384` が sha384 ハッシュであることを示します。
 
-> **メモ:** 厳密に言うと、 `integrity` 属性値におけるハッシュ値の部分は、あるハッシュ関数にデータを入力 (スクリプトやスタイルシートファイル) して生成された**暗号学的ダイジェスト値**です。しかし、一般的には短く「ハッシュ」と言えば*暗号学的ダイジェスト値*を意味するので、本記事でもそのように呼んでいます。
+> [!NOTE]
+> 厳密に言うと、 `integrity` 属性値におけるハッシュ値の部分は、あるハッシュ関数にデータを入力 (スクリプトやスタイルシートファイル) して生成された**暗号学的ダイジェスト値**です。しかし、一般的には短く「ハッシュ」と言えば*暗号学的ダイジェスト値*を意味するので、本記事でもそのように呼んでいます。
 
 ### SRI ハッシュを生成するツール
 
@@ -45,7 +47,7 @@ cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A
 shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64
 ```
 
-> **メモ:**
+> [!NOTE]
 >
 > - パイプで `xxd` を通る過程で、 `shasum` からの出力を取り、バイナリへ変換します。
 > - パイプで `awk` を通る過程は、 `shasum` がハッシュ化されたファイル名を `xxd` へ渡すために必要です。ファイル名が有効な 16 進数の文字を持っている場合に有害な影響を与える可能性があるからです。 `xxd` はそれを復号して、 `base64` に渡す可能性があるからです。
@@ -81,7 +83,8 @@ Access-Control-Allow-Origin: *
 
 ブラウザは SRI を以下のように処理します。
 
-> **メモ:** サブリソース完全性の検証において、サブリソースが埋め込まれる文書のオリジン以外から提供されたリソースについては、ブラウザーは[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) を使用してリソースに追加のチェックを行い、オリジンがリソースがリクエストしたオリジンに共有されることを許可しているかどうかを確認します。
+> [!NOTE]
+> サブリソース完全性の検証において、サブリソースが埋め込まれる文書のオリジン以外から提供されたリソースについては、ブラウザーは[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) を使用してリソースに追加のチェックを行い、オリジンがリソースがリクエストしたオリジンに共有されることを許可しているかどうかを確認します。
 
 1. ブラウザは `integrity` 属性を持った {{HTMLElement("script")}} または {{HTMLElement("link")}} 属性を見つけると、スクリプトや {{HTMLElement("link")}} 属性で指定された任意のスタイルシートを適用する前に、`integrity` 属性のハッシュ値とスクリプトやスタイルシートのハッシュ値を比較しなくてはなりません。
 2. スクリプトやスタイルシートが対応する `integrity` 属性値と一致しない場合、ブラウザーはスクリプトを実行したりスタイルシートを適用してはいけません。その代わりに、スクリプトやスタイルシートの取得が失敗したというネットワークエラーを返さなくてはなりません。
diff --git a/files/ja/web/svg/applying_svg_effects_to_html_content/index.md b/files/ja/web/svg/applying_svg_effects_to_html_content/index.md
index 4fe08a06ebd968..ad33288cec2011 100644
--- a/files/ja/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/ja/web/svg/applying_svg_effects_to_html_content/index.md
@@ -9,7 +9,8 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 
 SVG をスタイルで指定するには、同一文書内または外部のスタイルシートで指定することができます。使用できるプロパティは [`mask`](/ja/docs/Web/CSS/mask), [`clip-path`](/ja/docs/Web/CSS/clip-path), [`filter`](/ja/docs/Web/CSS/filter) の 3 つです。
 
-> **メモ:** 外部ファイル内の SVG を参照する場合、参照側の文書と[同じオリジン](/ja/docs/Web/Security/Same-origin_policy)でなければなければなりません。
+> [!NOTE]
+> 外部ファイル内の SVG を参照する場合、参照側の文書と[同じオリジン](/ja/docs/Web/Security/Same-origin_policy)でなければなければなりません。
 
 ## 埋め込み SVG の使用
 
diff --git a/files/ja/web/svg/attribute/alignment-baseline/index.md b/files/ja/web/svg/attribute/alignment-baseline/index.md
index 984a20d049d79a..f103afb7485b0a 100644
--- a/files/ja/web/svg/attribute/alignment-baseline/index.md
+++ b/files/ja/web/svg/attribute/alignment-baseline/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Attribute/alignment-baseline
 
 **`alignment-baseline`** 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ字のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることが可能になります。既定値は `alignment-baseline` プロパティの計算値と同じ名前の値となります。
 
-> **メモ:** プレゼンテーション属性として、 `alignment-baseline` は CSS プロパティとして使用することができます。
+> [!NOTE]
+> プレゼンテーション属性として、 `alignment-baseline` は CSS プロパティとして使用することができます。
 
 プレゼンテーション属性として、あらゆる要素に適用できますが、効果があるのは {{SVGElement("tspan")}}, {{SVGElement("tref")}}, {{SVGElement("altGlyph")}}, and {{SVGElement("textPath")}} の 4 つの属性のみです。
 
@@ -50,7 +51,8 @@ slug: Web/SVG/Attribute/alignment-baseline
 
   - : The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.
 
-    > **メモ:** This keyword may be mapped to `text-top`.
+    > [!NOTE]
+    > This keyword may be mapped to `text-top`.
 
 - `middle`
   - : Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
@@ -64,7 +66,8 @@ slug: Web/SVG/Attribute/alignment-baseline
 
   - : The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.
 
-    > **メモ:** This keyword may be mapped to `text-bottom`.
+    > [!NOTE]
+    > This keyword may be mapped to `text-bottom`.
 
 - `ideographic`
   - : Matches the box's ideographic character face under-side baseline to that of its parent.
diff --git a/files/ja/web/svg/attribute/color-interpolation-filters/index.md b/files/ja/web/svg/attribute/color-interpolation-filters/index.md
index da7e2658a23283..4658f1670c3914 100644
--- a/files/ja/web/svg/attribute/color-interpolation-filters/index.md
+++ b/files/ja/web/svg/attribute/color-interpolation-filters/index.md
@@ -9,13 +9,15 @@ l10n:
 
 **`color-interpolation-filters`** 属性は、フィルター効果で行う画像操作で用いる色空間を指定します。
 
-> **メモ:** このプロパティはフィルター操作にのみ効果があります。そのため、{{SVGElement("feOffset")}}、{{SVGElement("feImage")}}、{{SVGElement("feTile")}}、{{SVGElement("feFlood")}} などのフィルタープリミティブには効果がありません。
+> [!NOTE]
+> このプロパティはフィルター操作にのみ効果があります。そのため、{{SVGElement("feOffset")}}、{{SVGElement("feImage")}}、{{SVGElement("feTile")}}、{{SVGElement("feFlood")}} などのフィルタープリミティブには効果がありません。
 >
 > `color-interpolation-filters` のデフォルト値は、{{SVGAttr("color-interpolation")}} とは異なります。`color-interpolation-filters` のデフォルト値は `linearRGB` ですが、`color-interpolation` のデフォルト値は `sRGB` です。そのため、デフォルトでは、フィルター効果の操作は linearRGB 色空間で行われる一方、他のすべての色の補間は sRGB 色空間で行われます。
 >
 > この属性はフィルター関数には効果がなく、{{Glossary("sRGB")}} 色空間で処理を行います。
 
-> **メモ:** プレゼンテーション属性なので、`color-interpolation-filters` は CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性なので、`color-interpolation-filters` は CSS プロパティとして使用できます。
 
 この属性は、以下の SVG 要素で使用できます。
 
diff --git a/files/ja/web/svg/attribute/color-interpolation/index.md b/files/ja/web/svg/attribute/color-interpolation/index.md
index 13f66a381dd270..96146f11d7191b 100644
--- a/files/ja/web/svg/attribute/color-interpolation/index.md
+++ b/files/ja/web/svg/attribute/color-interpolation/index.md
@@ -9,13 +9,15 @@ l10n:
 
 **`color-interpolation`** 属性は、グラデーションの補間、色のアニメーション、アルファ合成に用いる色空間を指定します。
 
-> **メモ:** フィルター効果については、{{SVGAttr("color-interpolation-filters")}} プロパティで用いる色空間を制御します。
+> [!NOTE]
+> フィルター効果については、{{SVGAttr("color-interpolation-filters")}} プロパティで用いる色空間を制御します。
 
 color-interpolation プロパティは、色の操作を sRGB 色空間で行うか (光のエネルギーがリニアな) linearized RGB 色空間で行うかを選択します。適切な色空間を選択したら、コンポーネント単位での補間を行います。
 
 子要素が背景とブレンドされるときは、ブレンドの種類は親要素の `color-interpolation` の値ではなく、子要素の `color-interpolation` プロパティの値によって決まります。{{SVGAttr("href")}} または廃止された {{SVGAttr("xlink:href")}} 属性で他のグラデーションを参照しているグラデーションでは、{{SVGAttr("fill")}} または {{SVGAttr("stroke")}} プロパティで直接参照されているグラデーション要素のプロパティの値を用います。色をアニメーションするときは、アニメーションが行われる要素の `color-interpolation` プロパティの値に従って色の補間を行います。
 
-> **メモ:** プレゼンテーション属性なので、{{CSSXref("color-interpolation")}} は CSS のプロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性なので、{{CSSXref("color-interpolation")}} は CSS のプロパティとして使用できます。
 
 この属性は、以下の SVG 要素で使用できます。
 
diff --git a/files/ja/web/svg/attribute/color/index.md b/files/ja/web/svg/attribute/color/index.md
index d1249e62180eb9..2c4e52da27b211 100644
--- a/files/ja/web/svg/attribute/color/index.md
+++ b/files/ja/web/svg/attribute/color/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Attribute/color
 
 **`color`** 属性は、間接的な値の候補である `currentcolor` を {{SVGAttr("fill")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("lighting-color")}} の各属性に与えるために使用します。
 
-> **メモ:** プレゼンテーション属性として、`color` は CSS プロパティとして使用できます。詳しい情報は [CSS 色](/ja/docs/Web/CSS/color) を参照してください。
+> [!NOTE]
+> プレゼンテーション属性として、`color` は CSS プロパティとして使用できます。詳しい情報は [CSS 色](/ja/docs/Web/CSS/color) を参照してください。
 
 プレゼンテーション属性として、任意の要素に適用することができますが、上記のように SVG 要素には直接影響を与えません。
 
diff --git a/files/ja/web/svg/attribute/cx/index.md b/files/ja/web/svg/attribute/cx/index.md
index ca89d3035a503c..d1140e5a11bfe2 100644
--- a/files/ja/web/svg/attribute/cx/index.md
+++ b/files/ja/web/svg/attribute/cx/index.md
@@ -61,7 +61,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 として開始する場合には、`cx`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。
+> [!NOTE]
+> SVG2 として開始する場合には、`cx`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。
 
 ## ellipse
 
@@ -84,7 +85,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 として開始する場合には、`cx`は*ジオメトリプロパティ*です。これは本属性が楕円への CSS プロパティとしても利用可能であることを意味します。
+> [!NOTE]
+> SVG2 として開始する場合には、`cx`は*ジオメトリプロパティ*です。これは本属性が楕円への CSS プロパティとしても利用可能であることを意味します。
 
 ## radialGradient
 
diff --git a/files/ja/web/svg/attribute/cy/index.md b/files/ja/web/svg/attribute/cy/index.md
index b4f2dba2498886..08c377e4957747 100644
--- a/files/ja/web/svg/attribute/cy/index.md
+++ b/files/ja/web/svg/attribute/cy/index.md
@@ -61,7 +61,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。
+> [!NOTE]
+> SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。
 
 ## ellipse
 
@@ -84,7 +85,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。
+> [!NOTE]
+> SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。
 
 ## radialGradient
 
diff --git a/files/ja/web/svg/attribute/d/index.md b/files/ja/web/svg/attribute/d/index.md
index 218f41419eb202..44b08a0177635c 100644
--- a/files/ja/web/svg/attribute/d/index.md
+++ b/files/ja/web/svg/attribute/d/index.md
@@ -65,7 +65,8 @@ svg {
 
 ## glyph
 
-> **警告:** SVG2 において、{{SVGElement('glyph')}}は非推奨であり、用いるべきではありません。
+> [!WARNING]
+> SVG2 において、{{SVGElement('glyph')}}は非推奨であり、用いるべきではありません。
 
 {{SVGElement('glyph')}}要素に対しては、`d`属性はグリフのアウトライン形状を定義するパスコマンドの並びを含む文字列です。
 
@@ -88,11 +89,13 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** 原点(座標`0`, `0`)は通常、コンテキストの _左上の角_ です。しかし、{{SVGElement("glyph")}}要素は、それ自身の原点を文字ボックスの _左下_ に持ちます。
+> [!NOTE]
+> 原点(座標`0`, `0`)は通常、コンテキストの _左上の角_ です。しかし、{{SVGElement("glyph")}}要素は、それ自身の原点を文字ボックスの _左下_ に持ちます。
 
 ## missing-glyph
 
-> **警告:** SVG2 において、{{SVGElement('missing-glyph')}}は非推奨であり、用いるべきではありません。
+> [!WARNING]
+> SVG2 において、{{SVGElement('missing-glyph')}}は非推奨であり、用いるべきではありません。
 
 {{SVGElement('missing-glyph')}}要素に対しては、`d`属性は、グリフのアウトライン形状を定義するパスコマンドの並びを含んだ文字列です。
 
@@ -167,7 +170,8 @@ SVG では、6 つのタイプのパスコマンドを定義しており、全
 - 楕円円弧曲線: `A`, `a`
 - ClosePath: `Z`, `z`
 
-> **メモ:** コマンドは _ケースセンシティブ（大小文字の区別あり）_ です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。
+> [!NOTE]
+> コマンドは _ケースセンシティブ（大小文字の区別あり）_ です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。
 
 コマンドへの引数として負値を指定することは常に可能です:
 
diff --git a/files/ja/web/svg/attribute/dx/index.md b/files/ja/web/svg/attribute/dx/index.md
index bbde2bd8b9cb81..69d5949afc2d26 100644
--- a/files/ja/web/svg/attribute/dx/index.md
+++ b/files/ja/web/svg/attribute/dx/index.md
@@ -105,7 +105,8 @@ line {
 
 ## glyphRef
 
-> **警告:** SVG2 において、 {{SVGElement('glyphRef')}} は非推奨であり、使用しないでください。
+> [!WARNING]
+> SVG2 において、 {{SVGElement('glyphRef')}} は非推奨であり、使用しないでください。
 
 {{SVGElement('glyphRef')}} の場合、 `dx` はグリフの x オフセットを定義します。
 
@@ -198,7 +199,8 @@ line {
 
 ## tref
 
-> **警告:** SVG2 において、 {{SVGElement('tref')}} は非推奨であり、使用しないでください。
+> [!WARNING]
+> SVG2 において、 {{SVGElement('tref')}} は非推奨であり、使用しないでください。
 
 {{SVGElement('tref')}} では、 1 つの値を格納している場合、 `dx` はすべてのグリフに対する x 軸方向のシフト量を定義します。
 
diff --git a/files/ja/web/svg/attribute/dy/index.md b/files/ja/web/svg/attribute/dy/index.md
index f65091ff2a9147..e841599bd072e4 100644
--- a/files/ja/web/svg/attribute/dy/index.md
+++ b/files/ja/web/svg/attribute/dy/index.md
@@ -105,7 +105,8 @@ line {
 
 ## glyphRef
 
-> **警告:** SVG2 において、 {{SVGElement('glyphRef')}} は非推奨であり、使用しないでください。
+> [!WARNING]
+> SVG2 において、 {{SVGElement('glyphRef')}} は非推奨であり、使用しないでください。
 
 {{SVGElement('glyphRef')}} の場合、 `dy` はグリフの y オフセットを定義します。
 
@@ -199,7 +200,8 @@ line {
 
 ## tref
 
-> **警告:** SVG2 において、 {{SVGElement('tref')}} は非推奨であり、使用しないでください。
+> [!WARNING]
+> SVG2 において、 {{SVGElement('tref')}} は非推奨であり、使用しないでください。
 
 {{SVGElement('tref')}} では、 1 つの値を格納している場合、 `dy` はすべてのグリフに対する y 軸方向のシフト量を定義します。
 
diff --git a/files/ja/web/svg/attribute/fill-opacity/index.md b/files/ja/web/svg/attribute/fill-opacity/index.md
index 21f35a316339ab..34bcee139affa0 100644
--- a/files/ja/web/svg/attribute/fill-opacity/index.md
+++ b/files/ja/web/svg/attribute/fill-opacity/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`fill-opacity`** 属性は、図形に適用されるペイントサーバー(_色_, _勾配_, _パターン_, 等)の不透明度を定義するプレゼンテーション属性です。
 
-> **メモ:** プレゼンテーション属性としての`fill-opacity`CSS プロパティに適用できます。
+> [!NOTE]
+> プレゼンテーション属性としての`fill-opacity`CSS プロパティに適用できます。
 
 この属性は次の SVG 要素で使用できます。
 
@@ -78,7 +79,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 では、`fill-opacity`への割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(_以下の[ブラウザー実装状況](#ブラウザー実装状況)を参照_)。最良の実装としては、不透明度を`[0-1]`の範囲の値として指定することです。
+> [!NOTE]
+> SVG2 では、`fill-opacity`への割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(_以下の[ブラウザー実装状況](#ブラウザー実装状況)を参照_)。最良の実装としては、不透明度を`[0-1]`の範囲の値として指定することです。
 
 ## 仕様
 
diff --git a/files/ja/web/svg/attribute/fill-rule/index.md b/files/ja/web/svg/attribute/fill-rule/index.md
index 939181419aeabe..40f7a34f20dd50 100644
--- a/files/ja/web/svg/attribute/fill-rule/index.md
+++ b/files/ja/web/svg/attribute/fill-rule/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`fill-rule`** 属性はプレゼンテーション属性で、図形の内部を決定するために使用するアルゴリズムを定義します。
 
-> **メモ:** プレゼンテーション属性なので、 `fill-rule` は CSS プロパティとして使用することができます。
+> [!NOTE]
+> プレゼンテーション属性なので、 `fill-rule` は CSS プロパティとして使用することができます。
 
 この属性は以下の SVG 要素で使用することができます。
 
diff --git a/files/ja/web/svg/attribute/fill/index.md b/files/ja/web/svg/attribute/fill/index.md
index b4daa0ffc93dd4..8b8a5a3743c07b 100644
--- a/files/ja/web/svg/attribute/fill/index.md
+++ b/files/ja/web/svg/attribute/fill/index.md
@@ -170,7 +170,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## ellipse
 
@@ -197,7 +198,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## path
 
@@ -224,7 +226,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## polygon
 
@@ -251,7 +254,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## polyline
 
@@ -278,7 +282,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## rect
 
@@ -305,7 +310,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## set
 
@@ -358,7 +364,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## textPath
 
@@ -385,11 +392,13 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## tref
 
-> **警告:** As of SVG2 {{SVGElement('tref')}} is deprecated and shouldn't be used.
+> [!WARNING]
+> As of SVG2 {{SVGElement('tref')}} is deprecated and shouldn't be used.
 
 {{SVGElement('tref')}} は、`fill` はテキストの色を定義するプレゼンテーション属性です。
 
@@ -414,7 +423,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## tspan
 
@@ -441,7 +451,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。
 
 ## 仕様書
 
diff --git a/files/ja/web/svg/attribute/filter/index.md b/files/ja/web/svg/attribute/filter/index.md
index f17efb8200ce37..ee672e56f94a98 100644
--- a/files/ja/web/svg/attribute/filter/index.md
+++ b/files/ja/web/svg/attribute/filter/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`filter`** 属性は、　{{SVGElement("filter")}}　要素で定義したフィルター効果を指定します。
 
-> **メモ:** プレゼンテーション属性として、 `filter` は CSS プロパティとして使用することができます。詳しい情報は {{cssxref("filter", "CSS の filter")}} を参照してください。
+> [!NOTE]
+> プレゼンテーション属性として、 `filter` は CSS プロパティとして使用することができます。詳しい情報は {{cssxref("filter", "CSS の filter")}} を参照してください。
 
 プレゼンテーション属性として、任意の要素に適用することができますが、効果があるのは[コンテナー要素](/ja/docs/Web/SVG/Element#コンテナー要素)（{{SVGElement("defs")}} 要素以外を除く）、すべての[グラフィック要素](/ja/docs/Web/SVG/Element#グラフィック要素)、および {{SVGElement("use")}} 要素のみです。
 
diff --git a/files/ja/web/svg/attribute/height/index.md b/files/ja/web/svg/attribute/height/index.md
index 34d61518f6b919..db3857f62c6ca9 100644
--- a/files/ja/web/svg/attribute/height/index.md
+++ b/files/ja/web/svg/attribute/height/index.md
@@ -648,7 +648,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `height` は幾何プロパティであり、この属性は `<foreignObject>` の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `height` は幾何プロパティであり、この属性は `<foreignObject>` の CSS プロパティとしても使用することができます。
 
 ## image
 
@@ -682,7 +683,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `height` は幾何プロパティであり、この属性は画像の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `height` は幾何プロパティであり、この属性は画像の CSS プロパティとしても使用することができます。
 
 ## mask
 
@@ -772,13 +774,15 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `height` は幾何プロパティであり、この属性は矩形の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `height` は幾何プロパティであり、この属性は矩形の CSS プロパティとしても使用することができます。
 
 ## svg
 
 {{SVGElement('svg')}} の場合、 `height` は SVG ビューポートの描画領域の垂直方向の長さを定義します。
 
-> **メモ:** HTML 文書内の {{SVGAttr('viewBox')}} 属性と `height` 属性の両方が省略された場合、 [svg 要素は高さ `150px` で表示されます](https://svgwg.org/specs/integration/#svg-css-sizing)。
+> [!NOTE]
+> HTML 文書内の {{SVGAttr('viewBox')}} 属性と `height` 属性の両方が省略された場合、 [svg 要素は高さ `150px` で表示されます](https://svgwg.org/specs/integration/#svg-css-sizing)。
 
 <table class="properties">
   <tbody>
@@ -808,7 +812,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `height` は幾何プロパティであり、この属性は `<svg>` の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `height` は幾何プロパティであり、この属性は `<svg>` の CSS プロパティとしても使用することができます。
 
 ## use
 
@@ -842,9 +847,11 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** 参照する要素が [viewBox](/ja/docs/Web/SVG/Attribute/viewBox) を持っていない限り、 `height` は `use` 要素には効果がありません。つまり、`use` が `svg` または `symbol` 要素を参照している場合にのみ効果があります。
+> [!NOTE]
+> 参照する要素が [viewBox](/ja/docs/Web/SVG/Attribute/viewBox) を持っていない限り、 `height` は `use` 要素には効果がありません。つまり、`use` が `svg` または `symbol` 要素を参照している場合にのみ効果があります。
 
-> **メモ:** SVG2 から `height` は幾何プロパティであり、この属性は使用される要素の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `height` は幾何プロパティであり、この属性は使用される要素の CSS プロパティとしても使用することができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/svg/attribute/id/index.md b/files/ja/web/svg/attribute/id/index.md
index 7644817c994bcc..0972f70d5437cc 100644
--- a/files/ja/web/svg/attribute/id/index.md
+++ b/files/ja/web/svg/attribute/id/index.md
@@ -57,7 +57,8 @@ l10n:
 
   - : 要素の ID を指定します。 ID はノードツリー内で固有でなければならず、空文字列であってはならず、ホワイトスペース文字を含んではなりません。
 
-    > **メモ:** URL の対象フラグメントとして使用されるときに `id` の値に SVG view 仕様書として解釈される値 (例えば `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`) や、基本メディアフラグメントを使用しないでください。
+    > [!NOTE]
+    > URL の対象フラグメントとして使用されるときに `id` の値に SVG view 仕様書として解釈される値 (例えば `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`) や、基本メディアフラグメントを使用しないでください。
 
     XML 文書内で妥当でなければなりません。独立した SVG 文書は XML 1.0 の構文を使用しており、有効な ID は指定された文字 (文字、数字、いくつかの句読点) のみを含み、数字、フルストップ (.) 文字、ハイフンマイナス (-) 文字で始まらないことを指定しています。
 
diff --git a/files/ja/web/svg/attribute/index.md b/files/ja/web/svg/attribute/index.md
index ecb0ae955b788b..00240ca8e8f74d 100644
--- a/files/ja/web/svg/attribute/index.md
+++ b/files/ja/web/svg/attribute/index.md
@@ -363,7 +363,8 @@ SVG 要素は、その要素がどのように処理され描画されるべき
 
 ### プレゼンテーション属性
 
-> **メモ:** すべての [SVG プレゼンテーション属性](/ja/docs/Web/SVG/Attribute/Presentation)が CSS プロパティとして使用できます。
+> [!NOTE]
+> すべての [SVG プレゼンテーション属性](/ja/docs/Web/SVG/Attribute/Presentation)が CSS プロパティとして使用できます。
 
 - {{SVGAttr("alignment-baseline")}}
 - {{SVGAttr("baseline-shift")}}
diff --git a/files/ja/web/svg/attribute/marker-mid/index.md b/files/ja/web/svg/attribute/marker-mid/index.md
index facad2a4e70466..5167064b1bd846 100644
--- a/files/ja/web/svg/attribute/marker-mid/index.md
+++ b/files/ja/web/svg/attribute/marker-mid/index.md
@@ -11,7 +11,8 @@ l10n:
 
 マーカーは、[パスデータ](/ja/docs/Web/SVG/Attribute/d#Path_commands)の最初と最後以外のすべての頂点に描画されます。
 
-> **メモ:** プレゼンテーション属性なので、 `marker-mid` は CSS プロパティとして使用することができます。
+> [!NOTE]
+> プレゼンテーション属性なので、 `marker-mid` は CSS プロパティとして使用することができます。
 
 この属性は次の SVG 要素で使用できます。
 
diff --git a/files/ja/web/svg/attribute/mask/index.md b/files/ja/web/svg/attribute/mask/index.md
index cd8f385ee29d12..cbaa33210341b0 100644
--- a/files/ja/web/svg/attribute/mask/index.md
+++ b/files/ja/web/svg/attribute/mask/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`mask`** 属性は、主に指定された {{ SVGElement("mask") }} 要素とその属性が属する要素を結びつけるために使用されるプレゼンテーション属性です。
 
-> **メモ:** プレゼンテーション属性なので、 {{cssxref('mask')}} は CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性なので、 {{cssxref('mask')}} は CSS プロパティとして使用できます。
 
 この属性は以下の SVG 要素で使用することができます。
 
diff --git a/files/ja/web/svg/attribute/points/index.md b/files/ja/web/svg/attribute/points/index.md
index 580dde81e87334..6ad0be1b29170e 100644
--- a/files/ja/web/svg/attribute/points/index.md
+++ b/files/ja/web/svg/attribute/points/index.md
@@ -50,7 +50,8 @@ svg {
 
 {{SVGElement('polyline')}}の場合、 `points` で定義された点リストはそれぞれが描きたい線の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。
 
-> **メモ:** polyline は最初の点と最後の点が接続されない開いた図形となります。
+> [!NOTE]
+> polyline は最初の点と最後の点が接続されない開いた図形となります。
 
 <table class="properties">
   <tbody>
@@ -90,7 +91,8 @@ svg {
 
 {{SVGElement('polygon')}}の場合、`points` で定義された点リストはそれぞれが描きたい図形の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。
 
-> **メモ:** polygon は最初の点と最後の点が接続された閉じた図形となります。
+> [!NOTE]
+> polygon は最初の点と最後の点が接続された閉じた図形となります。
 
 <table class="properties">
   <tbody>
diff --git a/files/ja/web/svg/attribute/r/index.md b/files/ja/web/svg/attribute/r/index.md
index 00318eecd648e4..e4b46b1b5ac128 100644
--- a/files/ja/web/svg/attribute/r/index.md
+++ b/files/ja/web/svg/attribute/r/index.md
@@ -86,7 +86,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`r` は _幾何プロパティ (Geometry Property)_ です。すなわち、この属性をは円に対して CSS プロパティとしても使うことができます。
+> [!NOTE]
+> SVG2 からは、`r` は _幾何プロパティ (Geometry Property)_ です。すなわち、この属性をは円に対して CSS プロパティとしても使うことができます。
 
 ## radialGradient
 
diff --git a/files/ja/web/svg/attribute/stop-color/index.md b/files/ja/web/svg/attribute/stop-color/index.md
index fdd26d2bd5c626..a31133d5dcb706 100644
--- a/files/ja/web/svg/attribute/stop-color/index.md
+++ b/files/ja/web/svg/attribute/stop-color/index.md
@@ -9,9 +9,11 @@ l10n:
 
 **`stop-color`** 属性は、グラデーションの色経由点で使用する色を示します。
 
-> **メモ:** グラデーションに関して、SVG は `transparent` キーワードを CSS とは異なる方法で扱います。SVG はグラデーションを事前に乗算された空間で計算しないので、 `transparent` は実際には透明な黒を意味します。そのため、 `stop-color` に `transparent` という値を指定することは、 `stop-color` に `black` という値を指定し、 {{SVGAttr("stop-opacity")}} に `0` という値を指定することと同じです。
+> [!NOTE]
+> グラデーションに関して、SVG は `transparent` キーワードを CSS とは異なる方法で扱います。SVG はグラデーションを事前に乗算された空間で計算しないので、 `transparent` は実際には透明な黒を意味します。そのため、 `stop-color` に `transparent` という値を指定することは、 `stop-color` に `black` という値を指定し、 {{SVGAttr("stop-opacity")}} に `0` という値を指定することと同じです。
 
-> **メモ:** プレゼンテーション属性である `stop-color` は、CSS プロパティとして使用することができます。
+> [!NOTE]
+> プレゼンテーション属性である `stop-color` は、CSS プロパティとして使用することができます。
 
 この属性は以下の SVG 要素で使用することができます。
 
diff --git a/files/ja/web/svg/attribute/stroke-dasharray/index.md b/files/ja/web/svg/attribute/stroke-dasharray/index.md
index 5d67c3f92790fa..f82fcc6edc1165 100644
--- a/files/ja/web/svg/attribute/stroke-dasharray/index.md
+++ b/files/ja/web/svg/attribute/stroke-dasharray/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`stroke-dasharray`** 属性は、図形の輪郭線を描くのに用いるダッシュとすき間のパターンを定義するプレゼンテーション属性です。
 
-> **メモ:** プレゼンテーション属性である `stroke-dasharray` は、CSS プロパティとして使用することができます。
+> [!NOTE]
+> プレゼンテーション属性である `stroke-dasharray` は、CSS プロパティとして使用することができます。
 
 この属性は以下の SVG 要素で使用することができます。
 
diff --git a/files/ja/web/svg/attribute/stroke-dashoffset/index.md b/files/ja/web/svg/attribute/stroke-dashoffset/index.md
index fce79cf3187853..67cff9caa3d9d9 100644
--- a/files/ja/web/svg/attribute/stroke-dashoffset/index.md
+++ b/files/ja/web/svg/attribute/stroke-dashoffset/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`stroke-dashoffset`** 属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。
 
-> **メモ:** プレゼンテーション属性である `stroke-dashoffset` は、CSS プロパティとして使用することができます。
+> [!NOTE]
+> プレゼンテーション属性である `stroke-dashoffset` は、CSS プロパティとして使用することができます。
 
 この属性は以下の SVG 要素で使用することができます。
 
diff --git a/files/ja/web/svg/attribute/stroke-width/index.md b/files/ja/web/svg/attribute/stroke-width/index.md
index 25051364d42bd0..1aa59f21a81d43 100644
--- a/files/ja/web/svg/attribute/stroke-width/index.md
+++ b/files/ja/web/svg/attribute/stroke-width/index.md
@@ -78,7 +78,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** パーセント値は常に、正規化された {{SVGAttr('viewBox')}} の対角線の長さに対するパーセント値として計算されます。
+> [!NOTE]
+> パーセント値は常に、正規化された {{SVGAttr('viewBox')}} の対角線の長さに対するパーセント値として計算されます。
 
 ## 仕様書
 
diff --git a/files/ja/web/svg/attribute/stroke/index.md b/files/ja/web/svg/attribute/stroke/index.md
index 0ea616d39fa9cb..6146b047d8a875 100644
--- a/files/ja/web/svg/attribute/stroke/index.md
+++ b/files/ja/web/svg/attribute/stroke/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Attribute/stroke
 
 **`stroke`** 属性はプレゼンテーション属性で、この図形の輪郭を描画するのに使われる色（_またはグラデーションやパターンなどの SVG ペイントサーバー_）を定義します。
 
-> **メモ:** プレゼンテーション属性ですので、 `stroke` は CSS プロパティとして使用できます。
+> [!NOTE]
+> プレゼンテーション属性ですので、 `stroke` は CSS プロパティとして使用できます。
 
 この属性は、以下の SVG 要素で使用できます。
 
diff --git a/files/ja/web/svg/attribute/transform/index.md b/files/ja/web/svg/attribute/transform/index.md
index 6c4423b86d1c02..3e996d25f50337 100644
--- a/files/ja/web/svg/attribute/transform/index.md
+++ b/files/ja/web/svg/attribute/transform/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`transform`** 属性は、要素とその要素の子に適用される座標変換定義のリストを定義します。
 
-> **メモ:** SVG2 では、 `transform` はプレゼンテーション属性であり、 CSS プロパティとして使用することができます。ただし、 CSS プロパティとこの属性との間には構文の違いがあるので注意が必要です。その場合に使用する具体的な構文については、 CSS プロパティの {{cssxref('transform')}} のドキュメントを参照してください。
+> [!NOTE]
+> SVG2 では、 `transform` はプレゼンテーション属性であり、 CSS プロパティとして使用することができます。ただし、 CSS プロパティとこの属性との間には構文の違いがあるので注意が必要です。その場合に使用する具体的な構文については、 CSS プロパティの {{cssxref('transform')}} のドキュメントを参照してください。
 
 この属性はすべての SVG 要素で使用できます。
 
@@ -76,7 +77,8 @@ SVG 1.1 では、 {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('c
 
 以下の変換関数は、 `transform` 属性の `<transform-list>` で使用することができます。
 
-> **警告:** 仕様書によれば、 CSS の[座標変換関数](/ja/docs/Web/CSS/transform-function)も使用することができます。しかし、互換性は保証されていません。
+> [!WARNING]
+> 仕様書によれば、 CSS の[座標変換関数](/ja/docs/Web/CSS/transform-function)も使用することができます。しかし、互換性は保証されていません。
 
 ### matrix
 
diff --git a/files/ja/web/svg/attribute/vector-effect/index.md b/files/ja/web/svg/attribute/vector-effect/index.md
index 958507a554d689..ff2713268240a5 100644
--- a/files/ja/web/svg/attribute/vector-effect/index.md
+++ b/files/ja/web/svg/attribute/vector-effect/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `vector-effect` プロパティは、オブジェクトを描画する際に使用するベクター効果を指定します。ベクター効果は、フィルター、マスク、クリップなど、他にもある合成処理を行う前に適用されます。
 
-> **メモ:** 表示属性であるため、`vector-effect` は CSS プロパティとして使用することができます。
+> [!NOTE]
+> 表示属性であるため、`vector-effect` は CSS プロパティとして使用することができます。
 
 この属性は以下の SVG 要素で使用することができます。
 
diff --git a/files/ja/web/svg/attribute/width/index.md b/files/ja/web/svg/attribute/width/index.md
index 5f86bc7a3f2b1d..7ce63a8afccee5 100644
--- a/files/ja/web/svg/attribute/width/index.md
+++ b/files/ja/web/svg/attribute/width/index.md
@@ -686,7 +686,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `width` は幾何プロパティであり、この属性は `<foreignObject>` の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `width` は幾何プロパティであり、この属性は `<foreignObject>` の CSS プロパティとしても使用することができます。
 
 ## image
 
@@ -722,7 +723,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `width` は幾何プロパティであり、この属性は画像の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `width` は幾何プロパティであり、この属性は画像の CSS プロパティとしても使用することができます。
 
 ## mask
 
@@ -818,13 +820,15 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `width` は幾何プロパティであり、この属性は矩形の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `width` は幾何プロパティであり、この属性は矩形の CSS プロパティとしても使用することができます。
 
 ## svg
 
 {{SVGElement('svg')}} の場合、 `width` は SVG ビューポートの描画領域の水平方向の長さを定義します。
 
-> **メモ:** HTML 文書内の {{SVGAttr('viewBox')}} 属性と `width` 属性の両方が省略された場合、 [svg 要素は幅 `300px` で表示されます](https://svgwg.org/specs/integration/#svg-css-sizing)。
+> [!NOTE]
+> HTML 文書内の {{SVGAttr('viewBox')}} 属性と `width` 属性の両方が省略された場合、 [svg 要素は幅 `300px` で表示されます](https://svgwg.org/specs/integration/#svg-css-sizing)。
 
 <table class="properties">
   <tbody>
@@ -856,7 +860,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 から `width` は幾何プロパティであり、この属性は `<svg>` の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `width` は幾何プロパティであり、この属性は `<svg>` の CSS プロパティとしても使用することができます。
 
 ## use
 
@@ -892,9 +897,11 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** 参照する要素が [viewBox](/ja/docs/Web/SVG/Attribute/viewBox) を持っていない限り、 `width` は `use` 要素には効果がありません。つまり、`use` が `svg` または `symbol` 要素を参照している場合にのみ効果があります。
+> [!NOTE]
+> 参照する要素が [viewBox](/ja/docs/Web/SVG/Attribute/viewBox) を持っていない限り、 `width` は `use` 要素には効果がありません。つまり、`use` が `svg` または `symbol` 要素を参照している場合にのみ効果があります。
 
-> **メモ:** SVG2 から `width` は幾何プロパティであり、この属性は使用される要素の CSS プロパティとしても使用することができます。
+> [!NOTE]
+> SVG2 から `width` は幾何プロパティであり、この属性は使用される要素の CSS プロパティとしても使用することができます。
 
 ## 仕様書
 
diff --git a/files/ja/web/svg/attribute/writing-mode/index.md b/files/ja/web/svg/attribute/writing-mode/index.md
index 839ffe24ff5de3..f04cc65013998b 100644
--- a/files/ja/web/svg/attribute/writing-mode/index.md
+++ b/files/ja/web/svg/attribute/writing-mode/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Attribute/writing-mode
 
 **`writing-mode`** 属性は、 {{SVGElement("text")}} 要素の最初のインライン進行方向が左から右、右から左、上から下のいずれであるかを指定します。 `writing-mode` 属性は {{ SVGElement("text") }} 要素にのみ適用されます。 {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }} サブ要素には無視されます。 (なお、インライン進行方向は、 Unicode 双方向アルゴリズムとプロパティ {{ SVGAttr("direction") }} および {{ SVGAttr("unicode-bidi") }} により、 {{ SVGElement("text") }} 要素内で変更される可能性があることに注意してください)。
 
-> **メモ:** プレゼンテーション属性なので、 `writing-mode` は CSS プロパティとして使用することができます。詳しくは CSS の {{cssxref("writing-mode")}} プロパティを参照してください。
+> [!NOTE]
+> プレゼンテーション属性なので、 `writing-mode` は CSS プロパティとして使用することができます。詳しくは CSS の {{cssxref("writing-mode")}} プロパティを参照してください。
 
 プレゼンテーション属性として、どの要素にも適用できますが、 {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} の 5 つの要素にのみ効果があります。
 
diff --git a/files/ja/web/svg/attribute/x/index.md b/files/ja/web/svg/attribute/x/index.md
index 95dd914ad8bd94..0cb34f230e669e 100644
--- a/files/ja/web/svg/attribute/x/index.md
+++ b/files/ja/web/svg/attribute/x/index.md
@@ -916,11 +916,13 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は `<foreignObject>` の CSS プロパティとして使用することもできます。
+> [!NOTE]
+> SVG2 からは、`x` は*幾何プロパティ*であり、この属性は `<foreignObject>` の CSS プロパティとして使用することもできます。
 
 ## glyphRef
 
-> **警告:** SVG2 では {{SVGElement('glyphRef')}} は非推奨であり、使用すべきではありません。
+> [!WARNING]
+> SVG2 では {{SVGElement('glyphRef')}} は非推奨であり、使用すべきではありません。
 
 {{SVGElement('glyphRef')}} の場合、 `x` が文字の x 軸の座標を定義します。
 
@@ -982,7 +984,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は画像用の CSS プロパティとしても使用できます。
+> [!NOTE]
+> SVG2 からは、`x` は*幾何プロパティ*であり、この属性は画像用の CSS プロパティとしても使用できます。
 
 ## mask
 
@@ -1077,7 +1080,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は矩形の CSS プロパティとして使用することもできる。
+> [!NOTE]
+> SVG2 からは、`x` は*幾何プロパティ*であり、この属性は矩形の CSS プロパティとして使用することもできる。
 
 ## svg
 
@@ -1112,7 +1116,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は `<svg>` の CSS プロパティとして使用することもできます。
+> [!NOTE]
+> SVG2 からは、`x` は*幾何プロパティ*であり、この属性は `<svg>` の CSS プロパティとして使用することもできます。
 
 ## text
 
@@ -1193,7 +1198,8 @@ line {
 
 ## tref
 
-> **警告:** SVG2 では {{SVGElement('tref')}} は非推奨であり、使用すべきではありません。
+> [!WARNING]
+> SVG2 では {{SVGElement('tref')}} は非推奨であり、使用すべきではありません。
 
 {{SVGElement('tref')}} にある値が 1 つの場合、 `x` は*コンテンツテキストの位置*を配置しなければならない X 座標を定義します。*コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置*は、 {{SVGAttr('text-anchor')}} や {{cssxref('direction')}} など、他のプロパティの影響を受けます。
 
@@ -1340,7 +1346,8 @@ line {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は使用される要素の CSS プロパティとしても使用できます。
+> [!NOTE]
+> SVG2 からは、`x` は*幾何プロパティ*であり、この属性は使用される要素の CSS プロパティとしても使用できます。
 
 ## 仕様書
 
diff --git a/files/ja/web/svg/attribute/y/index.md b/files/ja/web/svg/attribute/y/index.md
index aaaba12e5c251f..795fa6d5ae9c91 100644
--- a/files/ja/web/svg/attribute/y/index.md
+++ b/files/ja/web/svg/attribute/y/index.md
@@ -916,11 +916,13 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は `<foreignObject>` の CSS プロパティとして使用することもできます。
+> [!NOTE]
+> SVG2 からは、`y` は*幾何プロパティ*であり、この属性は `<foreignObject>` の CSS プロパティとして使用することもできます。
 
 ## glyphRef
 
-> **警告:** SVG2 では {{SVGElement('glyphRef')}} は非推奨であり、使用すべきではありません。
+> [!WARNING]
+> SVG2 では {{SVGElement('glyphRef')}} は非推奨であり、使用すべきではありません。
 
 {{SVGElement('glyphRef')}} の場合、 `y` が文字の Y 軸の座標を定義します。
 
@@ -980,7 +982,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は画像用の CSS プロパティとしても使用できます。
+> [!NOTE]
+> SVG2 からは、`y` は*幾何プロパティ*であり、この属性は画像用の CSS プロパティとしても使用できます。
 
 ## mask
 
@@ -1075,7 +1078,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は矩形の CSS プロパティとして使用することもできる。
+> [!NOTE]
+> SVG2 からは、`y` は*幾何プロパティ*であり、この属性は矩形の CSS プロパティとして使用することもできる。
 
 ## svg
 
@@ -1110,7 +1114,8 @@ svg {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は `<svg>` の CSS プロパティとして使用することもできます。
+> [!NOTE]
+> SVG2 からは、`y` は*幾何プロパティ*であり、この属性は `<svg>` の CSS プロパティとして使用することもできます。
 
 ## text
 
@@ -1191,7 +1196,8 @@ line {
 
 ## tref
 
-> **警告:** SVG2 では {{SVGElement('tref')}} は非推奨であり、使用すべきではありません。
+> [!WARNING]
+> SVG2 では {{SVGElement('tref')}} は非推奨であり、使用すべきではありません。
 
 {{SVGElement('tref')}} にある値が 1 つの場合、 `y` は*コンテンツテキストの位置*を配置しなければならない Y 座標を定義します。*コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置*は、 {{SVGAttr('text-anchor')}} や {{cssxref('direction')}} など、他のプロパティの影響を受けます。
 
@@ -1338,7 +1344,8 @@ line {
   </tbody>
 </table>
 
-> **メモ:** SVG2 からは、`y` は*幾何プロパティ*であり、この属性は使用される要素の CSS プロパティとしても使用できます。
+> [!NOTE]
+> SVG2 からは、`y` は*幾何プロパティ*であり、この属性は使用される要素の CSS プロパティとしても使用できます。
 
 ## 仕様書
 
diff --git a/files/ja/web/svg/element/a/index.md b/files/ja/web/svg/element/a/index.md
index 077b51a4219cbc..9d76887652ad97 100644
--- a/files/ja/web/svg/element/a/index.md
+++ b/files/ja/web/svg/element/a/index.md
@@ -59,7 +59,8 @@ svg|a:active {
 
 {{EmbedLiveSample('Example', 100, 100)}}
 
-> **警告:** この要素は [HTML の `<a>` 要素](/ja/docs/Web/HTML/Element/a)と同じタグ名なので、 `a` を CSS や {{domxref("Document.querySelector", "querySelector")}} で選択すると、誤った種類の要素に適用してしまう可能性があります。 [`@namespace` 規則](/ja/docs/Web/CSS/@namespace)で二つを区別してみてください。
+> [!WARNING]
+> この要素は [HTML の `<a>` 要素](/ja/docs/Web/HTML/Element/a)と同じタグ名なので、 `a` を CSS や {{domxref("Document.querySelector", "querySelector")}} で選択すると、誤った種類の要素に適用してしまう可能性があります。 [`@namespace` 規則](/ja/docs/Web/CSS/@namespace)で二つを区別してみてください。
 
 ## 属性
 
diff --git a/files/ja/web/svg/element/animatemotion/index.md b/files/ja/web/svg/element/animatemotion/index.md
index 42a3a90359fdd4..2522142ea745d2 100644
--- a/files/ja/web/svg/element/animatemotion/index.md
+++ b/files/ja/web/svg/element/animatemotion/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Element/animateMotion
 
 SVG の **`<animateMotion>`** 要素は、ある要素がモーションパスに沿って移動する方法を定義します。
 
-> **メモ:** 既存のパスを再利用するには、 `<animateMotion>` 要素内の {{SVGElement("mpath")}} 要素を {{SVGAttr("path")}} 属性の代わりに使用する必要があります。
+> [!NOTE]
+> 既存のパスを再利用するには、 `<animateMotion>` 要素内の {{SVGElement("mpath")}} 要素を {{SVGAttr("path")}} 属性の代わりに使用する必要があります。
 
 ```css hidden
 html,
diff --git a/files/ja/web/svg/element/ellipse/index.md b/files/ja/web/svg/element/ellipse/index.md
index 0222c893e71e5e..d09494af474c23 100644
--- a/files/ja/web/svg/element/ellipse/index.md
+++ b/files/ja/web/svg/element/ellipse/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Element/ellipse
 
 `ellipse` 要素は SVG の基本的な図形であり、中心となる座標と x 方向と y 方向の半径両方を指定し、楕円を生成します。
 
-> **メモ:** 楕円要素は楕円の傾きを指定することはできません (例えば、45 度の角度で傾斜した楕円を描画したい場合)、しかし {{SVGAttr("transform")}} 属性を使用することで回転させることは可能です。
+> [!NOTE]
+> 楕円要素は楕円の傾きを指定することはできません (例えば、45 度の角度で傾斜した楕円を描画したい場合)、しかし {{SVGAttr("transform")}} 属性を使用することで回転させることは可能です。
 
 ```css hidden
 html,
@@ -43,7 +44,8 @@ svg {
   - : この属性は、使用単位での単位合計パス長さを指定します。
     _Value type_: [**\<number>**](/ja/docs/Web/SVG/Content_type#Number) ; _デフォルト値_: _none_; _アニメーション_: **yes**
 
-> **メモ:** SVG2 以降、`cx`、`cy`、`rx`、`ry` は、Geometry Properties であり、これらの属性は要素の CSS プロパティとして使用することもできます。
+> [!NOTE]
+> SVG2 以降、`cx`、`cy`、`rx`、`ry` は、Geometry Properties であり、これらの属性は要素の CSS プロパティとして使用することもできます。
 
 ### グローバル属性
 
diff --git a/files/ja/web/svg/element/fecolormatrix/index.md b/files/ja/web/svg/element/fecolormatrix/index.md
index 47c232b50493d4..1b68390baca74d 100644
--- a/files/ja/web/svg/element/fecolormatrix/index.md
+++ b/files/ja/web/svg/element/fecolormatrix/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Element/feColorMatrix
 
 **`<feColorMatrix>`** は SVG のフィルター要素で、変換行列に基づいて色を変化させます。すべてのピクセルのカラー値 `[R,G,B,A]` は 5 x 5 の行列で[行列乗算](https://en.wikipedia.org/wiki/Matrix_multiplication)され、新しい色 `[R',G',B',A']` を生成します。
 
-> **メモ:** 基本的な記号 _**`'`**_ は、数学で変換された結果を表すために使用されます。
+> [!NOTE]
+> 基本的な記号 _**`'`**_ は、数学で変換された結果を表すために使用されます。
 
 ```
 | R' |     | r1 r2 r3 r4 r5 |   | R |
diff --git a/files/ja/web/svg/element/fedropshadow/index.md b/files/ja/web/svg/element/fedropshadow/index.md
index efd518334bbe6f..cb30d442136da1 100644
--- a/files/ja/web/svg/element/fedropshadow/index.md
+++ b/files/ja/web/svg/element/fedropshadow/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Element/feDropShadow
 
 SVG の **`<feDropShadow>`** フィルタープリミティブは、入力画像のドロップシャドウを生成します。これは {{SVGElement('filter')}} 要素の中でのみ使用できます。
 
-> **メモ:** ドロップシャドウの色や不透明度は、 {{SVGAttr('flood-color')}} や {{SVGAttr('flood-opacity')}} の各プレゼンテーション属性を使用することで変更できます。
+> [!NOTE]
+> ドロップシャドウの色や不透明度は、 {{SVGAttr('flood-color')}} や {{SVGAttr('flood-opacity')}} の各プレゼンテーション属性を使用することで変更できます。
 
 ```css hidden
 html,
diff --git a/files/ja/web/svg/element/image/index.md b/files/ja/web/svg/element/image/index.md
index 3ca224b3b3f039..7b4e893209de9f 100644
--- a/files/ja/web/svg/element/image/index.md
+++ b/files/ja/web/svg/element/image/index.md
@@ -11,7 +11,8 @@ SVG ソフトウェアが対応する必要がある画像形式は {{glossary("
 
 `<image>` で表示される SVG ファイルは[画像として扱われます](/ja/docs/Web/SVG/SVG_as_an_Image)。外部リソースは読み込まれず、 {{cssxref(":visited")}} のスタイルは[適用されず](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector)、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 {{SVGElement("use")}} を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 {{HTMLElement("object")}} を {{SVGElement("foreignObject")}} の中で使用してください。
 
-> **メモ:** HTML 仕様書は、解釈時に `<image>` を {{HTMLElement("img")}} の別名として定義しています。この仕様書の要素とその動作は SVG 文書または[インライン SVG](/ja/docs/SVG_In_HTML_Introduction) 内のみのものです。
+> [!NOTE]
+> HTML 仕様書は、解釈時に `<image>` を {{HTMLElement("img")}} の別名として定義しています。この仕様書の要素とその動作は SVG 文書または[インライン SVG](/ja/docs/SVG_In_HTML_Introduction) 内のみのものです。
 
 ## 使用場所
 
diff --git a/files/ja/web/svg/element/index.md b/files/ja/web/svg/element/index.md
index ed4bdee1714559..538940a1ceccc3 100644
--- a/files/ja/web/svg/element/index.md
+++ b/files/ja/web/svg/element/index.md
@@ -206,7 +206,8 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ## 廃止および非推奨の要素
 
-> **警告:** 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。**新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。**ここに掲載しているのは情報提供だけの目的です。
+> [!WARNING]
+> 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。**新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。**ここに掲載しているのは情報提供だけの目的です。
 
 ### A
 
diff --git a/files/ja/web/svg/element/pattern/index.md b/files/ja/web/svg/element/pattern/index.md
index 76fbd9424d0d73..3968ffdb239808 100644
--- a/files/ja/web/svg/element/pattern/index.md
+++ b/files/ja/web/svg/element/pattern/index.md
@@ -53,7 +53,8 @@ svg {
   - : この属性は {{SVGElement("pattern")}} の内容物の座標系を定義します。
     _値の型_: `userSpaceOnUse`|`objectBoundingBox`; _既定値_: `userSpaceOnUse`; _アニメーション_: **可**
 
-    > **メモ:** この属性は、`viewBox` 属性が `<pattern>` 上に指定された場合は効果がありません。
+    > [!NOTE]
+    > この属性は、`viewBox` 属性が `<pattern>` 上に指定された場合は効果がありません。
 
 - {{SVGAttr("patternTransform")}}
   - : この属性は、パターン座標系からターゲット座標系への任意の追加変換の定義が入ります。
diff --git a/files/ja/web/svg/element/radialgradient/index.md b/files/ja/web/svg/element/radialgradient/index.md
index 4a8d7884ae72d8..a7b109c76b55ea 100644
--- a/files/ja/web/svg/element/radialgradient/index.md
+++ b/files/ja/web/svg/element/radialgradient/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<radialGradient>`** 要素は、グラフィック要素の塗りつぶしや線の描画に適用できる放射状のグラデーションを定義することができます。
 
-> **メモ:** CSS の {{cssxref('gradient/radial-gradient', 'gradient()')}} と混同しないでください。 CSS のグラデーションは HTML 要素に対してのみ適用することができるのに対し、 SVG のグラデーションは SVG 要素にのみ適用できます。
+> [!NOTE]
+> CSS の {{cssxref('gradient/radial-gradient', 'gradient()')}} と混同しないでください。 CSS のグラデーションは HTML 要素に対してのみ適用することができるのに対し、 SVG のグラデーションは SVG 要素にのみ適用できます。
 
 ## 例
 
diff --git a/files/ja/web/svg/element/svg/index.md b/files/ja/web/svg/element/svg/index.md
index 4bea3aeecc5f98..163f015ca2eb65 100644
--- a/files/ja/web/svg/element/svg/index.md
+++ b/files/ja/web/svg/element/svg/index.md
@@ -69,7 +69,8 @@ svg {
   - : SVG コンテナが表示される y 座標。最も外側の`SVG`要素では効果ありません。
     _値の型_: [**\<length>**](/ja/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/ja/docs/Web/SVG/Content_type#Percentage) ; _初期値_: `0`; _Animatable_: **yes**
 
-> **メモ:** SVG2 で開始する場合には、`x`, `y`, `width`, `height` は、*ジオメトリプロパティ*です。これは、これらの属性が CSS プロパティとして用いられることを意味します。
+> [!NOTE]
+> SVG2 で開始する場合には、`x`, `y`, `width`, `height` は、*ジオメトリプロパティ*です。これは、これらの属性が CSS プロパティとして用いられることを意味します。
 
 ### グローバル属性
 
diff --git a/files/ja/web/svg/element/title/index.md b/files/ja/web/svg/element/title/index.md
index 8df952b895dde0..8062604afd3686 100644
--- a/files/ja/web/svg/element/title/index.md
+++ b/files/ja/web/svg/element/title/index.md
@@ -11,7 +11,8 @@ l10n:
 
 `<title>` 要素内のテキストはグラフィックの一部としてレンダリングされませんが、ブラウザーは通常ツールチップとして表示します。要素が可視テキストで記述されている場合、 `<title>` 要素を使用するのではなく、 [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 属性でそのテキストを参照することが推奨されます。
 
-> **メモ:** SVG 1.1 との後方互換性のため、 `<title>` 要素は親の最初の子要素であるべきです。
+> [!NOTE]
+> SVG 1.1 との後方互換性のため、 `<title>` 要素は親の最初の子要素であるべきです。
 
 ## 例
 
diff --git a/files/ja/web/svg/element/use/index.md b/files/ja/web/svg/element/use/index.md
index 7a8c692bd7758a..78ff1928b3f6f8 100644
--- a/files/ja/web/svg/element/use/index.md
+++ b/files/ja/web/svg/element/use/index.md
@@ -39,7 +39,8 @@ That's why the circles have different x positions, but the same stroke value.
 
 セキュリティ上の理由で、ブラウザーは[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy)を `use` 要素に適用して、 {{SVGAttr("href")}} 属性にあるオリジンをまたがる URL を読み込むことを拒否することがあります。現在のところ、 `use` 要素の同一オリジンポリシーを設定する方法は定義されていません。
 
-> **警告:** SVG 2 で {{SVGAttr("xlink:href")}} 属性が非推奨になり、 {{SVGAttr("href")}} に置き換えられました。詳しくは {{SVGAttr("xlink:href")}} のページを参照してください。ただし、 {{SVGAttr("xlink:href")}} はブラウザー間の互換性のために今でも実装する必要があります (下記の[互換性一覧表](#browser_compatibility)を参照)。
+> [!WARNING]
+> SVG 2 で {{SVGAttr("xlink:href")}} 属性が非推奨になり、 {{SVGAttr("href")}} に置き換えられました。詳しくは {{SVGAttr("xlink:href")}} のページを参照してください。ただし、 {{SVGAttr("xlink:href")}} はブラウザー間の互換性のために今でも実装する必要があります (下記の[互換性一覧表](#browser_compatibility)を参照)。
 
 ## 属性
 
@@ -64,7 +65,8 @@ That's why the circles have different x positions, but the same stroke value.
 
 > **メモ:** `width` および `height` は `use` 要素では効果がありません。ただし、参照される要素に [viewbox](/ja/docs/Web/SVG/Attribute/viewBox) がある場合を除きます。 すなわち、 `use` が `svg` または `symbol` 要素を参照していた時だけ効果があります。
 
-> **メモ:** SVG2 から、 `x`, `y`, `width`, `height` は*位置プロパティ*となり、すなわちこれらの属性がその要素への CSS プロパティとしても使用することができるようになりました。
+> [!NOTE]
+> SVG2 から、 `x`, `y`, `width`, `height` は*位置プロパティ*となり、すなわちこれらの属性がその要素への CSS プロパティとしても使用することができるようになりました。
 
 ### グローバル属性
 
diff --git a/files/ja/web/svg/tutorial/basic_shapes/index.md b/files/ja/web/svg/tutorial/basic_shapes/index.md
index 2e08b68d2d2191..75e79189b8df9b 100644
--- a/files/ja/web/svg/tutorial/basic_shapes/index.md
+++ b/files/ja/web/svg/tutorial/basic_shapes/index.md
@@ -126,7 +126,8 @@ l10n:
 
 {{SVGElement("polygon")}} は {{SVGElement("polyline")}} と似ており、点のリストを結ぶ直線で構成されています。しかし、多角形の場合、パスは自動的に最後の点と最初の点を結び、閉じた形状を作成します。
 
-> **メモ:** 長方形は多角形の一種なので、多角形を使用して角丸のない `<rect/>` 要素を作成することができます。
+> [!NOTE]
+> 長方形は多角形の一種なので、多角形を使用して角丸のない `<rect/>` 要素を作成することができます。
 
 ```xml
 <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
diff --git a/files/ja/web/svg/tutorial/fills_and_strokes/index.md b/files/ja/web/svg/tutorial/fills_and_strokes/index.md
index 76ff3af0b0a75f..2b0ed539755b22 100644
--- a/files/ja/web/svg/tutorial/fills_and_strokes/index.md
+++ b/files/ja/web/svg/tutorial/fills_and_strokes/index.md
@@ -24,7 +24,8 @@ l10n:
 
 さらに、 SVG では `fill` と `stroke` の透明度を別々に指定することができます。これらは `fill-opacity` 属性と `stroke-opacity` 属性で制御されます。
 
-> **メモ:** Firefox 3+ 以降では、 `rgba` の値も許可されており、同じ効果が得られます。しかし、他のビューアーとの互換性を考慮すると、 `fill`/`stroke` の透明度を個別に指定したほうがよい場合があります。 `rgba` 値と `fill`/`stroke` opacity 値の両方を指定した場合、両方が適用されます。
+> [!NOTE]
+> Firefox 3+ 以降では、 `rgba` の値も許可されており、同じ効果が得られます。しかし、他のビューアーとの互換性を考慮すると、 `fill`/`stroke` の透明度を個別に指定したほうがよい場合があります。 `rgba` 値と `fill`/`stroke` opacity 値の両方を指定した場合、両方が適用されます。
 
 ### ストローク
 
diff --git a/files/ja/web/svg/tutorial/gradients/index.md b/files/ja/web/svg/tutorial/gradients/index.md
index e09054ddfc9727..7fa177f79b48df 100644
--- a/files/ja/web/svg/tutorial/gradients/index.md
+++ b/files/ja/web/svg/tutorial/gradients/index.md
@@ -83,7 +83,8 @@ l10n:
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"></linearGradient>
 ```
 
-> **メモ:** グラデーションに `href` 属性を用いることもできます。これを使用すると、あるグラデーションの属性や経由点を別のグラデーションに含めることができます。上記の例では、 Gradient2 のすべての色経由点を再作成する必要はありません。
+> [!NOTE]
+> グラデーションに `href` 属性を用いることもできます。これを使用すると、あるグラデーションの属性や経由点を別のグラデーションに含めることができます。上記の例では、 Gradient2 のすべての色経由点を再作成する必要はありません。
 >
 > ```html
 > <linearGradient id="Gradient1">
diff --git a/files/ja/web/svg/tutorial/svg_fonts/index.md b/files/ja/web/svg/tutorial/svg_fonts/index.md
index be3c255b1201eb..d66768d123cb3f 100644
--- a/files/ja/web/svg/tutorial/svg_fonts/index.md
+++ b/files/ja/web/svg/tutorial/svg_fonts/index.md
@@ -11,7 +11,8 @@ l10n:
 
 SVG が規定された時点では、ブラウザーでウェブフォントへの対応は普及していませんでした。しかし、テキストを正しく描画するためには、正しいフォントファイルへのアクセスが不可欠であるため、この機能を提供するためにフォント記述技術が SVG に追加されました。これは [PostScript](https://www.adobe.com/products/postscript.html) や [OTF](https://fonts.google.com/knowledge/glossary/open_type) などの他の形式との互換性を目的としたものではなく、レンダリング時に書体情報を SVG に埋め込む簡易な手段です。
 
-> **メモ:** SVG フォントは、現在 Safari と Android ブラウザーのみが対応しています。
+> [!NOTE]
+> SVG フォントは、現在 Safari と Android ブラウザーのみが対応しています。
 >
 > この機能は [Chrome 38 (および Opera 25) では削除されており](https://chromestatus.com/feature/5930075908210688)、 Firefox は [WOFF](/ja/docs/Web/CSS/CSS_fonts/WOFF) に集中するために[実装を無期限に延期しています](https://bugzil.la/119490)。しかし、Batik や Inkscape の一部など、他のツールは SVG フォントの埋め込みに対応しています。
 
diff --git a/files/ja/web/text_fragments/index.md b/files/ja/web/text_fragments/index.md
index 7bf907ebc9c10f..1d6d48ce6e8d26 100644
--- a/files/ja/web/text_fragments/index.md
+++ b/files/ja/web/text_fragments/index.md
@@ -67,7 +67,8 @@ https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
   Document-Policy: force-load-at-top
   ```
 
-> **メモ:** 指定されたテキストフラグメントがリンク先の文書内のどのテキストとも一致しない場合、またはブラウザーがテキストフラグメントに対応していない場合、テキストフラグメント全体が無視され、文書の先頭にリンクされます。
+> [!NOTE]
+> 指定されたテキストフラグメントがリンク先の文書内のどのテキストとも一致しない場合、またはブラウザーがテキストフラグメントに対応していない場合、テキストフラグメント全体が無視され、文書の先頭にリンクされます。
 
 ## 例
 
diff --git a/files/ja/web/xml/xml_introduction/index.md b/files/ja/web/xml/xml_introduction/index.md
index 13246c803ad039..c7f080764841be 100644
--- a/files/ja/web/xml/xml_introduction/index.md
+++ b/files/ja/web/xml/xml_introduction/index.md
@@ -11,7 +11,8 @@ XML に基づいた言語はたくさんあります。[XHTML](/ja/docs/XHTML)
 
 ## XML 文書構造
 
-> **警告:** このサブ記事は執筆中です...
+> [!WARNING]
+> このサブ記事は執筆中です...
 
 XML および XML ベースの言語の全体の構造は {{Glossary("tag")}} に基づいています。
 
@@ -70,7 +71,8 @@ XML 文書を正しくするには、次の条件を満たす必要がありま
 
 未定義のタグを含む文書は無効です。たとえば、`<warning>` タグを定義しなかった場合、上記の文書は無効になります。
 
-> **メモ:** ほとんどのブラウザは、形式が不適切な XML 文書を識別できるデバッガを提供しています。
+> [!NOTE]
+> ほとんどのブラウザは、形式が不適切な XML 文書を識別できるデバッガを提供しています。
 
 ## エンティティ
 
diff --git a/files/ja/web/xpath/functions/choose/index.md b/files/ja/web/xpath/functions/choose/index.md
index a876c9b1c5554d..c291918c7bd804 100644
--- a/files/ja/web/xpath/functions/choose/index.md
+++ b/files/ja/web/xpath/functions/choose/index.md
@@ -7,7 +7,8 @@ slug: Web/XPath/Functions/choose
 
 `choose` 関数は正負値に基づいて、指定されたオブジェクトのうち 1 つを返します。
 
-> **メモ:** このメソッドは廃止予定である `if()` の代わりに使われるべきです。
+> [!NOTE]
+> このメソッドは廃止予定である `if()` の代わりに使われるべきです。
 
 ### 構文
 
@@ -28,7 +29,8 @@ choose( boolean , object1, object2 )
 
 もし与えられた正負値が正であれば、1 つめのオブジェクトが戻される。そうでなければ 2 つめのオブジェクトが戻される。
 
-> **メモ:** 値が戻らないものまで含めて、全てのパラメータが評価される。
+> [!NOTE]
+> 値が戻らないものまで含めて、全てのパラメータが評価される。
 
 ### 定義
 
diff --git a/files/ja/web/xpath/index.md b/files/ja/web/xpath/index.md
index b487451a2198a4..6369bf2fdda680 100644
--- a/files/ja/web/xpath/index.md
+++ b/files/ja/web/xpath/index.md
@@ -13,7 +13,8 @@ XPath は主に [XSLT](/ja/docs/Web/XSLT) で使われていますが、 [HTML](
 
 XPath は XML 文書の階層構造を辿るために（URL のような）パス表記を使います。また、URI や XML 属性値の中で使えるように非 XML 構文を採用しています。
 
-> **メモ:** XPath の対応状況は大きく異なります。 Firefox は合理的にうまく対応しています（対応をさらに改善する計画はありません）が、他のブラウザーではそれほど実装されていません。ポリフィルが必要な場合は、[js-xpath](https://sourceforge.net/projects/js-xpath/files/js-xpath/1.0.0/xpath.js/download) または [wicked-good-xpath](https://github.com/google/wicked-good-xpath) を検討してください。
+> [!NOTE]
+> XPath の対応状況は大きく異なります。 Firefox は合理的にうまく対応しています（対応をさらに改善する計画はありません）が、他のブラウザーではそれほど実装されていません。ポリフィルが必要な場合は、[js-xpath](https://sourceforge.net/projects/js-xpath/files/js-xpath/1.0.0/xpath.js/download) または [wicked-good-xpath](https://github.com/google/wicked-good-xpath) を検討してください。
 
 ## ドキュメント
 
diff --git a/files/ja/webassembly/c_to_wasm/index.md b/files/ja/webassembly/c_to_wasm/index.md
index 2e2fe09c1a1ade..9b6cf48705f743 100644
--- a/files/ja/webassembly/c_to_wasm/index.md
+++ b/files/ja/webassembly/c_to_wasm/index.md
@@ -61,7 +61,8 @@ Emscripten SDK を取得します。以下の指示に従ってください。<h
 
 WebAssembly に対応しているブラウザーで `hello.html` を読み込むだけです。既定で有効なのは Firefox 52, Chrome 57, Opera 44 以降です。
 
-> **メモ:** 生成された HTML ファイル (`hello.html`) をローカルのハードドライブから直接開こうとすると（例: `file://your_path/hello.html`）、 \_`both async and sync fetching of the wasm failed` という複数行のエラーメッセージが表示されます。 HTML ファイルを HTTP サーバー (`http://`) で実行する必要があります。詳しくは [ローカルテストサーバーを用意するには](/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) を参照してください。
+> [!NOTE]
+> 生成された HTML ファイル (`hello.html`) をローカルのハードドライブから直接開こうとすると（例: `file://your_path/hello.html`）、 \_`both async and sync fetching of the wasm failed` という複数行のエラーメッセージが表示されます。 HTML ファイルを HTTP サーバー (`http://`) で実行する必要があります。詳しくは [ローカルテストサーバーを用意するには](/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) を参照してください。
 
 全てが計画通りに機能していれば、ウェブページ上の Emscripten コンソールに "Hello world" の出力が表示されるはずです。おめでとうございます、ようやく C を WebAssembly にコンパイルしてブラウザーで実行することができました。
 ![image](helloworld.png)
@@ -96,7 +97,8 @@ WebAssembly に対応しているブラウザーで `hello.html` を読み込む
 
 4. この例を実行してみましょう。上記のコマンドで hello2.html が生成されます。これは生成された Wasm コードに対してロード、実行などを行うグルーコードを含むテンプレートと同じ内容を持ちます。ブラウザーを開いて最後の例と同じ出力であることを確認してください。
 
-> **メモ:** HTML ファイルの代わりに .js ファイルを `-o` フラグで指定することで、完全な HTML ではなく、 JavaScript の「グルー」ファイル*だけ*を出力するように指定することができます。例えば `emcc -o hello2.js hello2.c -O3` とします。そうすると、完全にスクラッチでカスタム HTML を作成することができますが、これは高度なアプローチであり、通常は提供されている HTML テンプレートを使用する方が簡単です。
+> [!NOTE]
+> HTML ファイルの代わりに .js ファイルを `-o` フラグで指定することで、完全な HTML ではなく、 JavaScript の「グルー」ファイル*だけ*を出力するように指定することができます。例えば `emcc -o hello2.js hello2.c -O3` とします。そうすると、完全にスクラッチでカスタム HTML を作成することができますが、これは高度なアプローチであり、通常は提供されている HTML テンプレートを使用する方が簡単です。
 >
 > Emscripten は、メモリー割り当て、メモリーリーク、その他多くの問題を処理するために、多種多様な JavaScript の「グルー」コードを必要とします。
 
diff --git a/files/ja/webassembly/concepts/index.md b/files/ja/webassembly/concepts/index.md
index 93d3f2906bd98e..f236a4c5dd783b 100644
--- a/files/ja/webassembly/concepts/index.md
+++ b/files/ja/webassembly/concepts/index.md
@@ -26,7 +26,8 @@ WebAssembly は [W3C WebAssembly Community Group](https://www.w3.org/community/w
 - 安全であること — WebAssembly は安全でサンドボックス化された実行環境上で動作するように設計されています。他のウェブ言語と同様に、ブラウザーに対して same-origin および権限ポリシーの確認を強制します。
 - ウェブを破壊しないこと — WebAssembly は他のウェブ技術と協調し、後方互換性を維持するように設計されます。
 
-> **メモ:** WebAssembly はまたウェブの領域外の JavaScript 環境での利用も行います ([Non-web embeddings](http://webassembly.org/docs/non-web/) を参照)。
+> [!NOTE]
+> WebAssembly はまたウェブの領域外の JavaScript 環境での利用も行います ([Non-web embeddings](http://webassembly.org/docs/non-web/) を参照)。
 
 ## WebAssembly はどのようにウェブプラットフォームに適合するのか
 
@@ -96,7 +97,8 @@ Emscripten ツールは C/C++ ソースコードを取得し、それを Wasm 
 2. Emscripten が Clang + LLVM によるコンパイル結果を Wasm バイナリーに変換します。
 3. それ自体だけでは WebAssembly は現時点で DOM に直接アクセスできません; JavaScript を呼び出して、整数型もしくは浮動小数点型の基本データを渡せるだけです。そのため、ウェブ API にアクセスするためには、WebAssembly は JavaScript を呼び出す必要が有り、この時点でウェブ API の呼び出しが行われます。そのため Emscripten は結果を得るための HTML と JavaScript のグルーコードを生成します。
 
-> **メモ:** 将来的に [WebAssembly に直接ウェブ API を呼ばせることを許容する](https://github.com/WebAssembly/gc/blob/master/README.md) 計画があります。
+> [!NOTE]
+> 将来的に [WebAssembly に直接ウェブ API を呼ばせることを許容する](https://github.com/WebAssembly/gc/blob/master/README.md) 計画があります。
 
 JavaScript グルーコードは多くの人が想像するほど簡単な構造をしていません。はじめに、 Emscripten は [SDL](https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer)、 [OpenGL](https://en.wikipedia.org/wiki/OpenGL)、 [OpenAL](https://en.wikipedia.org/wiki/OpenAL) および [POSIX](https://en.wikipedia.org/wiki/POSIX) の一部といった主な C/C++ ライブラリーを組み込みます。これらのライブラリー群はウェブ API の観点から組み込まれ、各々が WebAssembly を既存のウェブ API に接続するためにいくつかの JavaScript グルーコードを必要とします。
 
diff --git a/files/ja/webassembly/existing_c_to_wasm/index.md b/files/ja/webassembly/existing_c_to_wasm/index.md
index 09d6882574336d..f6e7c2a6dd7c7d 100644
--- a/files/ja/webassembly/existing_c_to_wasm/index.md
+++ b/files/ja/webassembly/existing_c_to_wasm/index.md
@@ -38,7 +38,8 @@ $ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \
     libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c
 ```
 
-> **メモ:** この方法はすべての C プロジェクトでうまくいく訳ではありません。多くのプロジェクトでは、コンパイルの前にシステム固有のコードを生成するため、 autoconf/automake に依存しています。 Emscripten は、これらのコマンドをラップして適切な引数を注入するための `emconfigure` と `emmake` を提供しています。詳細は [Emscripten のドキュメント](https://emscripten.org/docs/compiling/Building-Projects.html)を読んでください。
+> [!NOTE]
+> この方法はすべての C プロジェクトでうまくいく訳ではありません。多くのプロジェクトでは、コンパイルの前にシステム固有のコードを生成するため、 autoconf/automake に依存しています。 Emscripten は、これらのコマンドをラップして適切な引数を注入するための `emconfigure` と `emmake` を提供しています。詳細は [Emscripten のドキュメント](https://emscripten.org/docs/compiling/Building-Projects.html)を読んでください。
 
 これで、新しいモジュールを読み込むために必要なのは HTML と JavaScript だけになりました。
 
@@ -58,7 +59,8 @@ $ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \
 
 ![正しいバージョン番号を示すデベロッパーツールのコンソールのスクリーンショット](version.png)
 
-> **メモ:** libwebp は現在のバージョン a.b.c を 16 進数の 0xabc で返します。例えば、v0.6.1 は 0x000601 = 1537 としてエンコードされています。
+> [!NOTE]
+> libwebp は現在のバージョン a.b.c を 16 進数の 0xabc で返します。例えば、v0.6.1 は 0x000601 = 1537 としてエンコードされています。
 
 ### JavaScript から Wasm に画像を取得する
 
diff --git a/files/ja/webassembly/javascript_interface/compile_static/index.md b/files/ja/webassembly/javascript_interface/compile_static/index.md
index c9c618827dd36e..02ee474893ee3b 100644
--- a/files/ja/webassembly/javascript_interface/compile_static/index.md
+++ b/files/ja/webassembly/javascript_interface/compile_static/index.md
@@ -42,7 +42,8 @@ fetch("simple.wasm")
   .then((mod) => worker.postMessage(mod));
 ```
 
-> **メモ:** おそらく多くの場合は {{jsxref("WebAssembly.compileStreaming()")}} を使用したほうが `compile()` よりも効率的なのでそちらの方がいいでしょう。
+> [!NOTE]
+> おそらく多くの場合は {{jsxref("WebAssembly.compileStreaming()")}} を使用したほうが `compile()` よりも効率的なのでそちらの方がいいでしょう。
 
 ## 仕様書
 
diff --git a/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md b/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md
index 2ea9b55a7268c3..b3316a8d50688a 100644
--- a/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md
+++ b/files/ja/webassembly/javascript_interface/compilestreaming_static/index.md
@@ -7,7 +7,8 @@ slug: WebAssembly/JavaScript_interface/compileStreaming_static
 
 **`WebAssembly.compileStreaming()`** 関数は [`WebAssembly.Module`](/ja/docs/WebAssembly/JavaScript_interface/Module) を直接、基礎的なソースのストリームからコンパイルします。この関数はモジュールをインスタンス化する前にコンパイルする必要がある場合に役立ちます（そうでない場合は、[`WebAssembly.instantiateStreaming()`](/ja/docs/WebAssembly/JavaScript_interface/instantiateStreaming) 関数を使用してください）。
 
-> **メモ:** 厳格な[コンテンツセキュリティポリシー (CSP)](/ja/docs/Web/HTTP/CSP) のあるウェブページでは、 WebAssembly のコンパイルやモジュールの実行がブロックされることがあります。
+> [!NOTE]
+> 厳格な[コンテンツセキュリティポリシー (CSP)](/ja/docs/Web/HTTP/CSP) のあるウェブページでは、 WebAssembly のコンパイルやモジュールの実行がブロックされることがあります。
 > WebAssembly のコンパイルと実行を許可することについての詳しい情報は、 [CSP の script-src](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) を参照してください。
 
 ## 構文
diff --git a/files/ja/webassembly/javascript_interface/global/global/index.md b/files/ja/webassembly/javascript_interface/global/global/index.md
index 816c449b9eeb1a..6f3687b27fd1b5 100644
--- a/files/ja/webassembly/javascript_interface/global/global/index.md
+++ b/files/ja/webassembly/javascript_interface/global/global/index.md
@@ -79,7 +79,8 @@ WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then(
 );
 ```
 
-> **メモ:** この例は [GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。
+> [!NOTE]
+> この例は [GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/webassembly/javascript_interface/global/index.md b/files/ja/webassembly/javascript_interface/global/index.md
index 4227fc510678d0..67289279f25ee1 100644
--- a/files/ja/webassembly/javascript_interface/global/index.md
+++ b/files/ja/webassembly/javascript_interface/global/index.md
@@ -74,7 +74,8 @@ WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then(
 );
 ```
 
-> **メモ:** この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。
+> [!NOTE]
+> この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。
 
 ## 仕様書
 
diff --git a/files/ja/webassembly/javascript_interface/instance/exports/index.md b/files/ja/webassembly/javascript_interface/instance/exports/index.md
index 41cf0f1d045c57..45f50d8dc2ba99 100644
--- a/files/ja/webassembly/javascript_interface/instance/exports/index.md
+++ b/files/ja/webassembly/javascript_interface/instance/exports/index.md
@@ -31,7 +31,8 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
 );
 ```
 
-> **メモ:** この例は GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) ([実行例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) で見ることができます。</p>
+> [!NOTE]
+> この例は GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) ([実行例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) で見ることができます。</p>
 
 </div>
 
diff --git a/files/ja/webassembly/javascript_interface/instance/instance/index.md b/files/ja/webassembly/javascript_interface/instance/instance/index.md
index e009988dd01cf8..9871561d373069 100644
--- a/files/ja/webassembly/javascript_interface/instance/instance/index.md
+++ b/files/ja/webassembly/javascript_interface/instance/instance/index.md
@@ -9,7 +9,8 @@ slug: WebAssembly/JavaScript_interface/Instance/Instance
 
 ## 構文
 
-> **警告:** 巨大なモジュールのインスタンス化は高コストになる可能性があるので、開発者が同期的な `Instance()` コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。それ以外の場合はすべて、{{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用してください。
+> [!WARNING]
+> 巨大なモジュールのインスタンス化は高コストになる可能性があるので、開発者が同期的な `Instance()` コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。それ以外の場合はすべて、{{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用してください。
 
 ```js
 new WebAssembly.Instance(module, importObject);
diff --git a/files/ja/webassembly/javascript_interface/instantiate_static/index.md b/files/ja/webassembly/javascript_interface/instantiate_static/index.md
index 99a1d95f540e58..5a70f9d2a3a493 100644
--- a/files/ja/webassembly/javascript_interface/instantiate_static/index.md
+++ b/files/ja/webassembly/javascript_interface/instantiate_static/index.md
@@ -10,7 +10,8 @@ slug: WebAssembly/JavaScript_interface/instantiate_static
 - 第一のオーバーロードは、 [型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) または {{jsxref("ArrayBuffer")}} で表現された WebAssembly バイナリコードを受け取り、そして、コンパイルとインスタンス化の両方を 1 ステップで行います。返された `Promise` は解決時にコンパイルされた {{jsxref("WebAssembly.Module")}} と最初の {{jsxref("WebAssembly.Instance")}} を渡します。
 - 第二のオーバーロードは、すでにコンパイルされた {{jsxref("WebAssembly.Module")}} を受け取り、解決時にその `Module` の `Instance` を渡す `Promise` を返します。このオーバーロードは、すでに `Module` がコンパイル済みの場合に有用です。
 
-> **警告:** このメソッドは wasm モジュールの読み込みとインスタンス化に最も効率的な方法ではありません。可能であれば、代わりにもっと新しい {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用すれば、生のバイトコードから直接モジュールの読み込み、コンパイル、インスタンス化を 1 ステップで行うことができ、 {{jsxref("ArrayBuffer")}} へ変換する必要がありません。
+> [!WARNING]
+> このメソッドは wasm モジュールの読み込みとインスタンス化に最も効率的な方法ではありません。可能であれば、代わりにもっと新しい {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用すれば、生のバイトコードから直接モジュールの読み込み、コンパイル、インスタンス化を 1 ステップで行うことができ、 {{jsxref("ArrayBuffer")}} へ変換する必要がありません。
 
 ## 構文
 
@@ -84,7 +85,8 @@ fetch("simple.wasm")
   .then((result) => result.instance.exports.exported_func());
 ```
 
-> **メモ:** この例は Github 上の [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) でも見ることができます ([動作例](https://mdn.github.io/webassembly-examples/js-api-examples/))。
+> [!NOTE]
+> この例は Github 上の [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) でも見ることができます ([動作例](https://mdn.github.io/webassembly-examples/js-api-examples/))。
 
 ### 第二のオーバーロードの例
 
diff --git a/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md b/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md
index 1d0279836552c6..f92452c803edc6 100644
--- a/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md
+++ b/files/ja/webassembly/javascript_interface/instantiatestreaming_static/index.md
@@ -7,7 +7,8 @@ slug: WebAssembly/JavaScript_interface/instantiateStreaming_static
 
 **`WebAssembly.instantiateStreaming()`** 関数は、ソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。これは、 wasm コードをロードするための最も効率的で最適な方法です。
 
-> **メモ:** 厳格な[コンテンツセキュリティポリシー (CSP)](/ja/docs/Web/HTTP/CSP) のあるウェブページでは、 WebAssembly のコンパイルやモジュールの実行がブロックされることがあります。
+> [!NOTE]
+> 厳格な[コンテンツセキュリティポリシー (CSP)](/ja/docs/Web/HTTP/CSP) のあるウェブページでは、 WebAssembly のコンパイルやモジュールの実行がブロックされることがあります。
 > WebAssembly のコンパイルと実行を許可することについての詳しい情報は、 [CSP の script-src](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) を参照してください。
 
 ## 構文
@@ -51,7 +52,8 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
 
 最後に `ResultObject` が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。
 
-> **メモ:** これを動作するようにするには、サーバが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。
+> [!NOTE]
+> これを動作するようにするには、サーバが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。
 
 ## 仕様書
 
diff --git a/files/ja/webassembly/javascript_interface/memory/memory/index.md b/files/ja/webassembly/javascript_interface/memory/memory/index.md
index 41f551106e2bb4..1430c9f347b05d 100644
--- a/files/ja/webassembly/javascript_interface/memory/memory/index.md
+++ b/files/ja/webassembly/javascript_interface/memory/memory/index.md
@@ -28,7 +28,8 @@ new WebAssembly.Memory(memoryDescriptor);
     - shared _{{optional_inline}}_
       - : 論理値で、このメモリーを共有メモリーにするかどうかを定義します。 `true` に設定すると、共有メモリーになります。既定値は `false` です。
 
-> **メモ:** WebAssembly ページは 65,536 バイト、すなわち 64KiB の固定長です。
+> [!NOTE]
+> WebAssembly ページは 65,536 バイト、すなわち 64KiB の固定長です。
 
 ### 例外
 
diff --git a/files/ja/webassembly/javascript_interface/module/module/index.md b/files/ja/webassembly/javascript_interface/module/module/index.md
index 2a3fbc843f4058..5837b9f9adba0a 100644
--- a/files/ja/webassembly/javascript_interface/module/module/index.md
+++ b/files/ja/webassembly/javascript_interface/module/module/index.md
@@ -12,7 +12,8 @@ slug: WebAssembly/JavaScript_interface/Module/Module
 
 ## 構文
 
-> **警告:** 大きなモジュールのコンパイルにはコストがかかるため、開発者はどうしても同期コンパイルが必要な場合にのみ `Module()` コンストラクターを使用し、それ以外の場合には非同期の {{jsxref("WebAssembly.compileStreaming()")}} メソッドを使用してください。
+> [!WARNING]
+> 大きなモジュールのコンパイルにはコストがかかるため、開発者はどうしても同期コンパイルが必要な場合にのみ `Module()` コンストラクターを使用し、それ以外の場合には非同期の {{jsxref("WebAssembly.compileStreaming()")}} メソッドを使用してください。
 
 ```js
 new WebAssembly.Module(bufferSource);
diff --git a/files/ja/webassembly/javascript_interface/table/index.md b/files/ja/webassembly/javascript_interface/table/index.md
index 85ab40930aa939..cde647cc1c55a9 100644
--- a/files/ja/webassembly/javascript_interface/table/index.md
+++ b/files/ja/webassembly/javascript_interface/table/index.md
@@ -7,7 +7,8 @@ slug: WebAssembly/JavaScript_interface/Table
 
 **`WebAssembly.Table()`** オブジェクトは JavaScript のラッパーオブジェクトであり、関数の参照を格納する WebAssembly Table を表す配列風の構造を持っています。 JavaScript や WebAssembly のコードで作成されたテーブルは、 JavaScript と WebAssembly の両方からアクセスでき、変更もできます。
 
-> **メモ:** 現在、テーブルには関数の参照のみが格納できますが、将来的に拡張される予定です。
+> [!NOTE]
+> 現在、テーブルには関数の参照のみが格納できますが、将来的に拡張される予定です。
 
 ## コンストラクター
 
diff --git a/files/ja/webassembly/loading_and_running/index.md b/files/ja/webassembly/loading_and_running/index.md
index fe12af77a644e8..b8543b26e1e342 100644
--- a/files/ja/webassembly/loading_and_running/index.md
+++ b/files/ja/webassembly/loading_and_running/index.md
@@ -55,9 +55,11 @@ fetch("module.wasm")
 }
 ```
 
-> **メモ:** 通常はインスタンスのみを気にしますが、キャッシュする場合や、[`postMessage()`](/ja/docs/Web/API/MessagePort/postMessage) を使用して別のワーカーやウィンドウと共有する場合や、インスタンスをさらに作成したい場合に備えて、モジュールを用意すると便利です。
+> [!NOTE]
+> 通常はインスタンスのみを気にしますが、キャッシュする場合や、[`postMessage()`](/ja/docs/Web/API/MessagePort/postMessage) を使用して別のワーカーやウィンドウと共有する場合や、インスタンスをさらに作成したい場合に備えて、モジュールを用意すると便利です。
 
-> **メモ:** 第二のオーバーロード形式は [`WebAssembly.Module`](/ja/docs/WebAssembly/JavaScript_interface/Module) オブジェクトを引数としてとり、結果としてインスタンスオブジェクトを直接含む Promise を返します。[第二のオーバーロードの例](/ja/docs/WebAssembly/JavaScript_interface/instantiate#第二のオーバーロードの例)を参照してください。
+> [!NOTE]
+> 第二のオーバーロード形式は [`WebAssembly.Module`](/ja/docs/WebAssembly/JavaScript_interface/Module) オブジェクトを引数としてとり、結果としてインスタンスオブジェクトを直接含む Promise を返します。[第二のオーバーロードの例](/ja/docs/WebAssembly/JavaScript_interface/instantiate#第二のオーバーロードの例)を参照してください。
 
 ### WebAssembly コードを実行する
 
@@ -79,7 +81,8 @@ WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject).then(
 );
 ```
 
-> **メモ:** WebAssembly モジュールからのエクスポートの仕組みの詳細については [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) と [WebAssembly テキストフォーマットを理解する](/ja/docs/WebAssembly/Understanding_the_text_format) を参照してください。
+> [!NOTE]
+> WebAssembly モジュールからのエクスポートの仕組みの詳細については [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) と [WebAssembly テキストフォーマットを理解する](/ja/docs/WebAssembly/Understanding_the_text_format) を参照してください。
 
 ## XMLHttpRequest の使用
 
@@ -106,4 +109,5 @@ request.onload = () => {
 };
 ```
 
-> **メモ:** 動作例は [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html) を参照してください。
+> [!NOTE]
+> 動作例は [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html) を参照してください。
diff --git a/files/ja/webassembly/rust_to_wasm/index.md b/files/ja/webassembly/rust_to_wasm/index.md
index e3a7246ab07505..062f2de4ec7d65 100644
--- a/files/ja/webassembly/rust_to_wasm/index.md
+++ b/files/ja/webassembly/rust_to_wasm/index.md
@@ -28,7 +28,8 @@ Rust と WebAssembly には、主に 2 つの用途があります。
 
 [Install Rust](https://www.rust-lang.org/install.html) ページに行って指示に従い、Rust をインストールしてください。これによって "rustup" と呼ばれる複数のバージョンの Rust を管理できるようにするツールがインストールされます。既定の設定では、通常の Rust 開発で使いたいであろう最新の安定版 Rust リリースをインストールします。rustup は Rust コンパイラーの `rustc` や Rust のパッケージマネージャーの `cargo` や Rust の標準ライブラリーの `rust-std` やいくつかの助けになるドキュメント — `rust-docs` をインストールします。
 
-> **メモ:** インストール後のメモで、cargo の `bin` ディレクトリーをシステムの `PATH` に追加する必要があるという点に注意してください。これは自動的に追加されるはずですが、有効にするためにターミナルを再起動する必要があります。
+> [!NOTE]
+> インストール後のメモで、cargo の `bin` ディレクトリーをシステムの `PATH` に追加する必要があるという点に注意してください。これは自動的に追加されるはずですが、有効にするためにターミナルを再起動する必要があります。
 
 ### wasm-pack
 
@@ -247,7 +248,8 @@ wasm-pack build --target web
 
 プロジェクトのルートディレクトリーに、ローカルのウェブサーバーを用意します（例: `python3 -m http.server`）。やり方がよくわからない場合は、[シンプルなローカル HTTP サーバーの実行](/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#シンプルなローカル_http_サーバーの実行)を参考にしてください。
 
-> **メモ:** 必ず `application/wasm` という MIME 型に対応している最新のウェブサーバーを使用してください。古いウェブサーバーでは、まだ対応していないかもしれません。
+> [!NOTE]
+> 必ず `application/wasm` という MIME 型に対応している最新のウェブサーバーを使用してください。古いウェブサーバーでは、まだ対応していないかもしれません。
 
 ウェブサーバーから `index.html` を読み込む （Python3 の例を使用する場合: `http://localhost:8000`）。 画面上にアラートボックスが現れ、 `Hello, WebAssembly!` と表示されます。 JavaScript から Rust へ、そして Rust から JavaScript への呼び出しに成功しました。
 
diff --git a/files/ja/webassembly/text_format_to_wasm/index.md b/files/ja/webassembly/text_format_to_wasm/index.md
index 533c34abaa429a..a64528eb7ef4e4 100644
--- a/files/ja/webassembly/text_format_to_wasm/index.md
+++ b/files/ja/webassembly/text_format_to_wasm/index.md
@@ -9,7 +9,8 @@ l10n:
 
 WebAssembly には S 式ベースのテキスト表現があります。これはテキストエディター、ブラウザーの開発者ツールなどで見せるために設計された中間表現です。この記事では、これがどのように動作するか、テキスト形式のファイルを Wasm 形式に変換するのに利用可能なツールの使用方法について少し説明します。
 
-> **メモ:** テキスト形式のファイルは、通常 `.wat` という拡張子で保存されます。過去には `.wast` という拡張子も使用されていましたが、現在は WebAssembly テストスイートで使用されるスクリプト言語のために使用されています。
+> [!NOTE]
+> テキスト形式のファイルは、通常 `.wat` という拡張子で保存されます。過去には `.wast` という拡張子も使用されていましたが、現在は WebAssembly テストスイートで使用されるスクリプト言語のために使用されています。
 
 ## 初めてのテキスト形式
 
@@ -42,7 +43,8 @@ WebAssembly 関数 `exported_func` は私たちの環境（WebAssembly モジュ
 
 これで `simple.wasm` という名前のファイルに Wasm が出力されます。これには `.wasm` アセンブリーのコードが含まれます。
 
-> **メモ:** wasm2wat を使用して wasm から テキスト表現に戻すことができます。例: `wasm2wat simple.wasm -o text.wat`.
+> [!NOTE]
+> wasm2wat を使用して wasm から テキスト表現に戻すことができます。例: `wasm2wat simple.wasm -o text.wat`.
 
 ## アセンブリーの出力を見る
 
diff --git a/files/ja/webassembly/understanding_the_text_format/index.md b/files/ja/webassembly/understanding_the_text_format/index.md
index f1853a63d7bb0a..f75d802da6f66a 100644
--- a/files/ja/webassembly/understanding_the_text_format/index.md
+++ b/files/ja/webassembly/understanding_the_text_format/index.md
@@ -9,7 +9,8 @@ l10n:
 
 WebAssembly を人間が読んだり編集したりできるようにするため、 Wasm バイナリー形式にはテキスト表現が存在します。これはテキストエディター、ブラウザーの開発者ツールなどで見せるために設計された中間表現です。この記事では、テキスト形式のしくみ、生の構文、および元のバイトコードの表現との関係 (と JavaScript で Wasm を表現したラッパーオブジェクト) について説明します。
 
-> **メモ:** この記事は、あなたがウェブ開発者で Wasm モジュールをページに読み込んでコード内で使用するだけなら過剰なものかもしれません ([WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API)を参照)。しかし、例えば、パフォーマンスを最適化するために Wasm モジュールを書きたいときや、あなた自身で WebAssembly コンパイラーを作るときには役に立ちます。
+> [!NOTE]
+> この記事は、あなたがウェブ開発者で Wasm モジュールをページに読み込んでコード内で使用するだけなら過剰なものかもしれません ([WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API)を参照)。しかし、例えば、パフォーマンスを最適化するために Wasm モジュールを書きたいときや、あなた自身で WebAssembly コンパイラーを作るときには役に立ちます。
 
 ## S 式
 
@@ -179,7 +180,8 @@ WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => {
 });
 ```
 
-> **メモ:** この例は GitHub の [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html)（[動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)）にあります。関数のインスタンス化についての詳細は [`WebAssembly.instantiateStreaming()`](/ja/docs/WebAssembly/JavaScript_interface/instantiateStreaming) も参照してください。
+> [!NOTE]
+> この例は GitHub の [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html)（[動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)）にあります。関数のインスタンス化についての詳細は [`WebAssembly.instantiateStreaming()`](/ja/docs/WebAssembly/JavaScript_interface/instantiateStreaming) も参照してください。
 
 ## 基礎を探る
 
@@ -255,7 +257,8 @@ WebAssembly.instantiateStreaming(fetch("logger.wasm"), importObject).then(
 );
 ```
 
-> **メモ:** この例は GitHub の [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html)（[動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)）を参照してください。
+> [!NOTE]
+> この例は GitHub の [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html)（[動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)）を参照してください。
 
 ### WebAssembly でのグローバルの宣言
 
@@ -335,7 +338,8 @@ function consoleLogString(offset, length) {
     call $log))
 ```
 
-> **メモ:** 上記の 2 重のセミコロン構文 (`;;`) は WebAssembly ファイル内でコメントを書くためのものです。
+> [!NOTE]
+> 上記の 2 重のセミコロン構文 (`;;`) は WebAssembly ファイル内でコメントを書くためのものです。
 
 ここで、JavaScript から 1 ページ分のサイズを持つ Memory を作成してそれに渡すことができます。結果としてコンソールに "Hi" と出力されます。
 
@@ -354,7 +358,8 @@ WebAssembly.instantiateStreaming(fetch("logger2.wasm"), importObject).then(
 );
 ```
 
-> **メモ:** 完全なソースは GitHub の [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html)（[動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)）を参照してください。
+> [!NOTE]
+> 完全なソースは GitHub の [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html)（[動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)）を参照してください。
 
 ### WebAssembly テーブル
 
@@ -394,7 +399,8 @@ WebAssembly は `anyfunc` 型 (任意のシグニチャの関数を保持でき
 - `elem` セクションはモジュール内の関数のサブセットをリスト化することができます (任意の順で並べることができ、重複を許容します) 。これは参照された順序でテーブルに参照される関数のリストです。
 - `elem` セクション内の `(i32.const 0)` 値はオフセットです。これはセクションの先頭で宣言する必要があります。これはテーブルに関数参照を追加するインデックスの開始位置を指定します。ここでは 0 と テーブルのサイズとして 2 (上記参照) を指定していますので、2つの参照はインデックスが 0 と 1 の部分に書き込まれます。もしオフセットを 1 にして書き込みたければ、 `(i32.const 1)` と記述してテーブルのサイズを 3 にする必要があります。
 
-> **メモ:** 初期化されていない要素はデフォルトの throw-on-call 値が与えられます。
+> [!NOTE]
+> 初期化されていない要素はデフォルトの throw-on-call 値が与えられます。
 
 JavaScript で同じようなテーブルのインスタンスを作成する場合、次のようになります。
 
@@ -472,9 +478,11 @@ WebAssembly.instantiateStreaming(fetch("wasm-table.wasm")).then((obj) => {
 });
 ```
 
-> **メモ:** 例は GitHub の [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)) を参照してください。
+> [!NOTE]
+> 例は GitHub の [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)) を参照してください。
 
-> **メモ:** Memory と同じように Table も JavaScript から作成すること（[`WebAssembly.Table()`](/ja/docs/WebAssembly/JavaScript_interface/Table) を参照）、別の Wasm モジュール間でインポートすることができます。
+> [!NOTE]
+> Memory と同じように Table も JavaScript から作成すること（[`WebAssembly.Table()`](/ja/docs/WebAssembly/JavaScript_interface/Table) を参照）、別の Wasm モジュール間でインポートすることができます。
 
 ### テーブルの変更と動的リンク
 
@@ -523,7 +531,8 @@ JavaScript は関数参照にフルアクセスできるため、 Table オブ
 4. 関数の最後では、定数値 `0` を作成し、テーブルのインデックスが 0 の位置にある関数を呼び出します。これは `shared0func` で、先に `shared0.wat` の `elem` ブロックで格納されたものです。
 5. 呼び出されたとき、`shared0func` は `shared1.wat` 内で `i32.store` コマンドを使用してメモリーに格納された 42 をロードします。
 
-> **メモ:** 上の式はスタックから値を暗黙的にポップしますが、代わりにコマンド呼び出しの中で明示的に宣言することができます。
+> [!NOTE]
+> 上の式はスタックから値を暗黙的にポップしますが、代わりにコマンド呼び出しの中で明示的に宣言することができます。
 >
 > ```wasm
 > (i32.store (i32.const 0) (i32.const 42))
@@ -550,7 +559,8 @@ Promise.all([
 
 コンパイルされた各モジュールは同じメモリーとテーブルオブジェクトをインポートし、その結果同じ線形メモリーとテーブルの「アドレス空間」を共有することができます。
 
-> **メモ:** 例は GitHub の [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) ([動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)) を参照してください。
+> [!NOTE]
+> 例は GitHub の [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) ([動作例](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)) を参照してください。
 
 ## 大規模メモリー操作
 
@@ -566,7 +576,8 @@ Promise.all([
 - `table.copy`: テーブルの一範囲から他へコピーします。
 - `table.init`: 要素セグメントから範囲をコピーします。
 
-> **メモ:** 詳しい情報は [Bulk Memory Operations and Conditional Segment Initialization](https://github.com/WebAssembly/bulk-memory-operations/blob/master/proposals/bulk-memory-operations/Overview.md) の提案にあります。
+> [!NOTE]
+> 詳しい情報は [Bulk Memory Operations and Conditional Segment Initialization](https://github.com/WebAssembly/bulk-memory-operations/blob/master/proposals/bulk-memory-operations/Overview.md) の提案にあります。
 
 ## 型
 
@@ -647,7 +658,8 @@ memory.buffer; // returns SharedArrayBuffer
 
 共有されていないメモリーと異なり、共有メモリーは JavaScript API のコンストラクターと Wasm のテキスト形式の両方で「最大」サイズを指定する必要があります。
 
-> **メモ:** 詳しくは、 [WebAssembly のスレッド提案](https://github.com/WebAssembly/threads/blob/master/proposals/threads/Overview.md)にたくさん載っています。
+> [!NOTE]
+> 詳しくは、 [WebAssembly のスレッド提案](https://github.com/WebAssembly/threads/blob/master/proposals/threads/Overview.md)にたくさん載っています。
 
 ### 不可分メモリーアクセス
 
diff --git a/files/ja/webassembly/using_the_javascript_api/index.md b/files/ja/webassembly/using_the_javascript_api/index.md
index e3bdade2b5ccef..311063a0e5ba1d 100644
--- a/files/ja/webassembly/using_the_javascript_api/index.md
+++ b/files/ja/webassembly/using_the_javascript_api/index.md
@@ -9,13 +9,15 @@ l10n:
 
 これまでに [Emscripten などのツールを使用して他の言語からモジュールをコンパイルしたり](/ja/docs/WebAssembly/C_to_Wasm)、[自分自身のコードを読み込んでして実行したりしました](/ja/docs/WebAssembly/Loading_and_running)。次のステップは他の WebAssembly JavaScript API の使い方について学ぶことです。この記事では知る必要があることを説明します。
 
-> **メモ:** もし、この記事で説明している基本的な概念がよくわからない場合、 [WebAssembly の概要](/ja/docs/WebAssembly/Concepts)を先に読んでからこの記事に戻ってきてください。
+> [!NOTE]
+> もし、この記事で説明している基本的な概念がよくわからない場合、 [WebAssembly の概要](/ja/docs/WebAssembly/Concepts)を先に読んでからこの記事に戻ってきてください。
 
 ## シンプルな例
 
 WebAssembly JavaScript API の使用方法と、wasm モジュールを読み込んでウェブページ内で使用する方法を、ステップバイステップの例を通して実行してみましょう。
 
-> **メモ:** サンプルコードは [webassembly-examples](https://github.com/mdn/webassembly-examples) GitHub リポジトリーから参照してください。
+> [!NOTE]
+> サンプルコードは [webassembly-examples](https://github.com/mdn/webassembly-examples) GitHub リポジトリーから参照してください。
 
 ### 例の準備
 
@@ -55,7 +57,8 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
 
 この結果、エクスポートした WebAssembly の `exported_func` 関数を呼び出し、インポートした JavaScript の `imported_func` 関数を呼び出し、WebAssembly インスタンスの中で提供した値 (42) をコンソールに記録することになりました。サンプルのコードを保存して、WebAssembly に対応しているブラウザーで読み込むと、これが実際に動作しているのがわかります。
 
-> **メモ:** これは複雑で長い例のほんの一部ですが、ウェブアプリケーション内で WebAssembly をどのように JavaScript と組み合わせて動作させることができるかを説明しています。別の場所でも言及していますが、 WebAssembly は JavaScript の置き換えを目指しているわけではありません。両方が協力して、お互いの強みを活かすことができます。
+> [!NOTE]
+> これは複雑で長い例のほんの一部ですが、ウェブアプリケーション内で WebAssembly をどのように JavaScript と組み合わせて動作させることができるかを説明しています。別の場所でも言及していますが、 WebAssembly は JavaScript の置き換えを目指しているわけではありません。両方が協力して、お互いの強みを活かすことができます。
 
 ### ストリーミングせずに wasm モジュールを読み込む
 
@@ -135,7 +138,8 @@ Memory インスタンスの作成時に最大値が指定していて、この
 
 1. `memory.wasm` のローカルコピーを以前と同じディレクトリーに作成します。
 
-   > **メモ:** モジュールのテキスト表現は [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat) を参照してください。
+   > [!NOTE]
+   > モジュールのテキスト表現は [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat) を参照してください。
 
 2. `memory.html` サンプルファイルに戻って、以前と同じように wasm モジュールを読み取り、コンパイル、インスタンス化します。以下のものをスクリプトの最後に追加してください。
 
@@ -167,7 +171,8 @@ Memory オブジェクト自体でなく、Memory オブジェクトの buffer (
 - モジュールをコンパイルする前、もしくは並行して、メモリーの初期コンテンツを JavaScript で読み取り、または作成することができます。
 - 単一の Memory オブジェクトを複数のモジュールインスタンスにインポートすることができます。これは WebAssembly で動的リンクを実装するための重要な構成要素です。
 
-> **メモ:** 完全なデモは [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) ([動作例](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) を参照してください。
+> [!NOTE]
+> 完全なデモは [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) ([動作例](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) を参照してください。
 
 ## テーブル
 
@@ -187,7 +192,8 @@ WebAssembly Table は JavaScript と WebAssembly コードの両方でアクセ
 
 1. `table.wasm` をローカルの新しいディレクトリーにコピーします。
 
-   > **メモ:** このモジュールのテキスト表現は [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) を参照してください。
+   > [!NOTE]
+   > このモジュールのテキスト表現は [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) を参照してください。
 
 2. [HTML template](https://github.com/mdn/webassembly-examples/blob/master/template/template.html) を `table.html` という名前で同じディレクトリーにコピーします。
 3. 前と同じように、wasm モジュールを読み取り、コンパイル、インスタンス化します。次のコードを HTML の body の末尾の {{htmlelement("script")}} 要素に追加してください。
@@ -208,7 +214,8 @@ WebAssembly Table は JavaScript と WebAssembly コードの両方でアクセ
 
 このコードはテーブルに格納されている各関数参照に順番にアクセスし、内包した値をコンソールに書き出すためにインスタンス化します。 [`Table.prototype.get()`](/ja/docs/WebAssembly/JavaScript_interface/Table/get) で各関数参照を取得した後、関数を実行するためには括弧を追加することに注意してください。
 
-> **メモ:** 完全なデモは [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) ([動作例](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)) を参照してください。
+> [!NOTE]
+> 完全なデモは [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) ([動作例](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)) を参照してください。
 
 ## グローバル値
 
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index 48d0849814a535..9ba3afad3ec0f1 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -539,6 +539,7 @@
 /ko/docs/Web/API/console/warn	/ko/docs/Web/API/console/warn_static
 /ko/docs/Web/API/crypto_property	/ko/docs/Web/API/Window/crypto
 /ko/docs/Web/API/document.importNode	/ko/docs/Web/API/Document/importNode
+/ko/docs/Web/API/fetch	/ko/docs/Web/API/Window/fetch
 /ko/docs/Web/API/window.navigator.battery	/ko/docs/Web/API/Navigator/getBattery
 /ko/docs/Web/API/window.navigator.connection	/ko/docs/Web/API/Navigator/connection
 /ko/docs/Web/API/window.screen.lockOrientation	/ko/docs/Web/API/Screen/lockOrientation
@@ -742,21 +743,35 @@
 /ko/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement	/ko/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_token
 /ko/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint	/ko/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point
 /ko/docs/Web/JavaScript/Reference/Errors/Undefined_prop	/ko/docs/orphaned/Web/JavaScript/Reference/Errors/Undefined_prop
+/ko/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator	/ko/docs/Web/JavaScript/Reference/Functions/arguments/Symbol.iterator
 /ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션	/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
 /ko/docs/Web/JavaScript/Reference/Global_Functions	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator	/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species	/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.species
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@unscopables	/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Array/constructor	/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
+/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species	/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species
 /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/constructor	/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive	/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Date/constructor	/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
 /ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat	/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/toString
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Locale/language	/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator	/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/@@species	/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.species
 /ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat	/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler	/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
 /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply	/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator	/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator	/ko/docs/Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive	/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/Symbol.toPrimitive
 /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError
+/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator	/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@species	/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.species
 /ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name
 /ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly	/ko/docs/WebAssembly/JavaScript_interface
 /ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError	/ko/docs/WebAssembly/JavaScript_interface/CompileError
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index ce92bdf2971218..b63b77f68e5f01 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -8091,7 +8091,7 @@
     "modified": "2020-10-15T21:38:47.452Z",
     "contributors": ["alattalatta", "Netaras", "tmxkwkfgka"]
   },
-  "Web/JavaScript/Reference/Functions/arguments/@@iterator": {
+  "Web/JavaScript/Reference/Functions/arguments/Symbol.iterator": {
     "modified": "2020-10-15T22:12:01.387Z",
     "contributors": ["alattalatta", "vividhee"]
   },
@@ -8149,22 +8149,22 @@
       "Aeuiop"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": {
+  "Web/JavaScript/Reference/Global_Objects/Array/Array": {
+    "modified": "2020-10-15T22:26:58.481Z",
+    "contributors": ["alattalatta"]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator": {
     "modified": "2020-10-15T21:43:02.789Z",
     "contributors": ["alattalatta", "KisukPark", "hwangtan", "."]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/@@species": {
+  "Web/JavaScript/Reference/Global_Objects/Array/Symbol.species": {
     "modified": "2020-10-15T21:50:41.909Z",
     "contributors": ["alattalatta", "KisukPark", "imskojs"]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": {
+  "Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables": {
     "modified": "2020-10-15T21:50:41.776Z",
     "contributors": ["alattalatta", "zziuni", "imskojs"]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/Array": {
-    "modified": "2020-10-15T22:26:58.481Z",
-    "contributors": ["alattalatta"]
-  },
   "Web/JavaScript/Reference/Global_Objects/Array/concat": {
     "modified": "2020-10-15T21:38:49.144Z",
     "contributors": [
@@ -9587,14 +9587,14 @@
     "modified": "2019-06-18T04:56:00.166Z",
     "contributors": ["kooljay82", "Netaras", "Khai96_"]
   },
-  "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": {
-    "modified": "2019-03-23T22:30:48.269Z",
-    "contributors": ["Netaras"]
-  },
   "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": {
     "modified": "2020-10-15T21:47:35.788Z",
     "contributors": ["alattalatta", "Netaras"]
   },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator": {
+    "modified": "2019-03-23T22:30:48.269Z",
+    "contributors": ["Netaras"]
+  },
   "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": {
     "modified": "2019-03-23T22:30:15.273Z",
     "contributors": ["Netaras"]
diff --git a/files/ko/glossary/baseline/typography/index.md b/files/ko/glossary/baseline/typography/index.md
index 734a43fcd4d006..4f2dbe853e9572 100644
--- a/files/ko/glossary/baseline/typography/index.md
+++ b/files/ko/glossary/baseline/typography/index.md
@@ -2,14 +2,14 @@
 title: 기준선 (타이포그래피)
 slug: Glossary/Baseline/Typography
 l10n:
-  sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+  sourceCommit: 703476742325afe583b74ba0203ff0894b831110
 ---
 
 {{GlossarySidebar}}
 
 **기준선**은 유럽 및 서아시아 타이포그래피에서 글꼴의 문자가 놓이는 가상의 선을 의미하는 용어입니다.
 
-{{GlossaryDisambiguation}}
+동아시아 문자에는 기준선이 없으며, 각 글자는 상자 안에 자리 잡고 있어 상단 또는 하단으로 돌출된 부분이 없습니다. 기준선이 낮은 문자와 혼합될 때, 동아시아 문자는 문자 하단이 기준선과 하단선 사이에 오도록 설정해야 합니다.
 
 ## 같이 보기
 
diff --git a/files/ko/web/api/fetch/index.md b/files/ko/web/api/window/fetch/index.md
similarity index 99%
rename from files/ko/web/api/fetch/index.md
rename to files/ko/web/api/window/fetch/index.md
index b26ec13a498dfa..ad802f372e59fd 100644
--- a/files/ko/web/api/fetch/index.md
+++ b/files/ko/web/api/window/fetch/index.md
@@ -1,7 +1,7 @@
 ---
 title: fetch() 전역 함수
-short-title: fetch()
-slug: Web/API/fetch
+slug: Web/API/Window/fetch
+original_slug: Web/API/fetch
 l10n:
   sourceCommit: 15db4f1dd87a80c4aec2cfba3e73bc8291f29110
 ---
diff --git a/files/ko/web/css/_doublecolon_view-transition-old/index.md b/files/ko/web/css/_doublecolon_view-transition-old/index.md
new file mode 100644
index 00000000000000..4d2f8e9350f60e
--- /dev/null
+++ b/files/ko/web/css/_doublecolon_view-transition-old/index.md
@@ -0,0 +1,120 @@
+---
+title: "::view-transition-old"
+slug: Web/CSS/::view-transition-old
+l10n:
+  sourceCommit: 722311032dbf520bf6aeba3d1f432aca38779ffd
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-old`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 전환 이전의 상태를 나타내는 스냅샷, 즉 뷰 전환의 과거 뷰 상태를 나타냅니다.
+
+뷰 전환이 이루어지는 동안, `::view-transition-old` 는 [뷰 전환 의사 요소 트리](/ko/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree) 에 기술된 것처럼 연관된 의사 요소 트리에 포함됩니다. 이는 {{cssxref("::view-transition-image-pair")}} 의 자식 요소로만 존재하고, 다른 자식 요소는 가질 수 없습니다.
+
+이 속성은 재배치된 요소이기 때문에, {{cssxref("object-fit")}} 와 {{cssxref("object-position")}} 같은 속성으로 조작할 수 있습니다. 이 요소의 자연 치수는 콘텐츠의 크기와 동일합니다.
+
+UA 스타일시트에서 다음과 같은 스타일을 기본으로 부여 받습니다.
+
+```css
+:root::view-transition-old(*),
+:root::view-transition-new(*) {
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: auto;
+
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+  animation-delay: inherit;
+}
+
+/* 2개의 이미지가 존재할 때 블렌딩을 위한 키프레임 */
+@keyframes -ua-mix-blend-mode-plus-lighter {
+  from {
+    mix-blend-mode: plus-lighter;
+  }
+  to {
+    mix-blend-mode: plus-lighter;
+  }
+}
+
+@keyframes -ua-view-transition-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+```
+
+> **참고:** 추가적인 뷰 전환 스타일은 `::view-transition-old` 의 애니메이션을 설정할 수 있습니다. 뷰 전환 스타일은 뷰 전환이 이루어지는 동안 동적으로 생성됩니다. 더 많은 정보는 [전환 의사 요소 설정](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)과 [의사 요소 스타일 업데이트](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) 섹션 명세서를 참고하여 확인할 수 있습니다.
+
+## 구문
+
+```css-nolint
+::view-transition-old(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 는 다음 값들을 가질 수 있습니다.
+
+- `*`
+  - : 의사 요소를 모든 뷰 전환 그룹에 대해 일치하도록 합니다.
+- `root`
+  - : 의사 요소를 사용자 에이전트가 생성한 기본 `root` 뷰 전환 스냅샷 그룹과 일치하도록 합니다. 이 그룹은 페이지 전체의 뷰 전환을 포함하고, {{cssxref("view-transition-name")}} 속성을 통해 고유한 뷰 전환 스냅샷 그룹에 할당되지 않은 모든 요소를 포함합니다.
+- {{cssxref("custom-ident")}}
+  - : {{cssxref("view-transition-name")}} 속성을 통해 의사 요소를 주어진 {{cssxref("custom-ident")}} 로부터 할당받아 생성된 특정 뷰 전환 스냅샷 그룹과 일치하도록 합니다.
+
+## 예제
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes shrink-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: auto;
+  right: 0;
+  left: auto;
+  transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+  animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+  animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [뷰 전환 API](/ko/docs/Web/API/View_Transitions_API)
+- [뷰 전환 API와 부드럽고 간단한 트랜지션](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/ko/web/css/column_combinator/index.md b/files/ko/web/css/column_combinator/index.md
new file mode 100644
index 00000000000000..ab98bf35410c6c
--- /dev/null
+++ b/files/ko/web/css/column_combinator/index.md
@@ -0,0 +1,85 @@
+---
+title: Column combinator
+slug: Web/CSS/Column_combinator
+l10n:
+  sourceCommit: 7fa9b134e7a886b47bd8c6e3135ba329ee0ddf09
+---
+
+{{CSSRef}} {{SeeCompatTable}}
+
+**컬럼 결합자** (`||`)는 CSS 선택자 사이에 위치합니다. 이는 첫번째 선택자에 의해 일치되는 컬럼 요소에 속하는 두번째 선택자와 일치되는 요소들만을 매칭합니다.
+
+```css
+/* "selected" 컬럼에 속한 테이블 셀 */
+col.selected||td {
+  background: gray;
+}
+```
+
+## 구문
+
+```css-nolint
+/* || 결합자 주위의 공백은 선택이자 권장 사항입니다. */
+column-selector || cell-selector {
+  /* style properties */
+}
+```
+
+## 예제
+
+### HTML
+
+```html
+<table border="1">
+  <colgroup>
+    <col span="2" />
+    <col class="selected" />
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A</td>
+      <td>B</td>
+      <td>C</td>
+    </tr>
+
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### CSS
+
+```css
+col.selected||td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+```
+
+### 결과
+
+{{EmbedLiveSample("Examples", "100%")}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{HTMLElement("col")}}
+- {{HTMLElement("colgroup")}}
+- {{CSSxRef("grid", "그리드")}}
+- {{CSSxRef(":nth-of-type")}}
+- {{CSSxRef(":nth-last-of-type")}}
diff --git a/files/ko/web/html/attributes/elementtiming/index.md b/files/ko/web/html/attributes/elementtiming/index.md
new file mode 100644
index 00000000000000..3c9df99d6ad24f
--- /dev/null
+++ b/files/ko/web/html/attributes/elementtiming/index.md
@@ -0,0 +1,42 @@
+---
+title: "HTML attribute: elementtiming"
+slug: Web/HTML/Attributes/elementtiming
+l10n:
+  sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35
+---
+
+{{HTMLSidebar}}
+
+**`elementtiming`** 특성은 `"element"` 타입을 사용하는 {{domxref("PerformanceObserver")}} 객체가 추적할 요소를 표시하는 데 사용됩니다. 자세한 내용은 {{domxref("PerformanceElementTiming")}} 인터페이스를 참조하세요.
+
+이 특성은 {{htmlelement("img")}}, {{SVGElement("image")}} 요소가 {{SVGElement("svg")}} 내부에 있을 때, {{htmlelement("video")}} 요소의 포스터 이미지, {{cssxref("background-image")}}를 가지는 요소, 그리고 {{htmlelement("p")}}와 같이 텍스트 노드를 포함하는 요소에 적용될 수 있습니다.
+
+DOM에서의 해당 특성은 {{domxref("Element.elementTiming")}}로 반영됩니다.
+
+## 사용
+
+`elementtiming`에 주어진 값은 관찰된 요소의 식별자가 됩니다.
+
+```html
+<img alt="alt" src="img.jpg" elementtiming="label for element" />
+```
+
+관찰하고 싶은 요소로 좋은 후보들은 다음과 같습니다.
+
+- 기사에 대한 주요 이미지
+- 블로그 게시물 제목
+- 쇼핑 사이트의 캐러셀에 있는 이미지들
+- 페이지의 주요 비디오에 대한 포스터 이미지
+
+## 예제
+
+```html
+<img alt="Alt for a main blog post image" src="my-massive-image.jpg" elementtiming="Main image">
+
+<p elementtiming="important-text">Some very important information.</p">
+```
+
+## 같이 보기
+
+- {{domxref("PerformanceElementTiming")}}
+- {{domxref("Element.elementTiming")}}
diff --git a/files/ko/web/http/headers/sec-websocket-accept/index.md b/files/ko/web/http/headers/sec-websocket-accept/index.md
new file mode 100644
index 00000000000000..10a996f7faedcd
--- /dev/null
+++ b/files/ko/web/http/headers/sec-websocket-accept/index.md
@@ -0,0 +1,52 @@
+---
+title: Sec-WebSocket-Accept
+slug: Web/HTTP/Headers/Sec-WebSocket-Accept
+l10n:
+  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+**Sec-WebSocket-Accept** 헤더는 웹소켓 오프닝 핸드셰이크에 사용됩니다. 이는 응답 헤더에 나타납니다. 즉, 이 헤더는 서버가 웹소켓 연결을 시작할 의향을 알리기 위해 서버에서 클라이언트로 전송하는 헤더입니다.
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">헤더 타입</th>
+      <td>{{Glossary("Response header", "요청 헤더")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden header name", "금지된 헤더 이름")}}</th>
+      <td>아니요</td>
+    </tr>
+  </tbody>
+</table>
+
+## 구문
+
+```http
+Sec-WebSocket-Accept: <hashed key>
+```
+
+## 지시어
+
+- \<hashed key>
+  - : 서버는 핸드셰이크 요청에서 전송된 Sec-WebSocket-Key의 값을 가져와서 `258EAFA5-E914-47DA-95CA-C5AB0DC85B11`을 덧붙이고, 새 값의 SHA-1 값을 가져온 다음, [base64](/ko/docs/Glossary/Base64)로 인코딩합니다.
+
+## 예제
+
+```http
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 같이 보기
+
+- {{HTTPHeader("Sec-WebSocket-Key")}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/http/methods/options/index.md b/files/ko/web/http/methods/options/index.md
index e404450e6321eb..9646fc9098b6ac 100644
--- a/files/ko/web/http/methods/options/index.md
+++ b/files/ko/web/http/methods/options/index.md
@@ -58,7 +58,7 @@ curl -X OPTIONS https://example.org -i
 그럼 응답은 허용된 메서드를 가지고 있는 {{HTTPHeader("Allow")}} 헤더가 있습니다.
 
 ```http
-HTTP/1.1 200 No Content
+HTTP/1.1 204 No Content
 Allow: OPTIONS, GET, HEAD, POST
 Cache-Control: max-age=604800
 Date: Thu, 13 Oct 2016 11:45:00 GMT
@@ -96,7 +96,7 @@ Access-Control-Request-Headers: X-PINGOTHER, Content-Type
   - : 위 권한은 86,400초(1일) 동안 캐시될 수 있습니다.
 
 ```http
-HTTP/1.1 200 No Content
+HTTP/1.1 200 OK
 Date: Mon, 01 Dec 2008 01:15:39 GMT
 Server: Apache/2.0.61 (Unix)
 Access-Control-Allow-Origin: https://foo.example
diff --git a/files/ko/web/javascript/closures/index.md b/files/ko/web/javascript/closures/index.md
index a649245eb193f1..30e51e9309bc25 100644
--- a/files/ko/web/javascript/closures/index.md
+++ b/files/ko/web/javascript/closures/index.md
@@ -84,7 +84,7 @@ myFunc();
 한눈에 봐서는, 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있습니다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재합니다. `makeFunc()` 실행이 끝나면, `name` 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이지만, 코드는 여전히 예상대로 작동하기 때문에 JavaScript에서는 분명히 다릅니다.
 
 그 이유는 JavaScript의 함수가 클로저를 형성하기 때문입니다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다. 예시의 경우, `myFunc`은 `makeFunc`이 실행
-될 때 생성된 `displayName` 함수의 인스턴스에 대한 참조입니다. `displayName`의 인스턴스는 변수 `name` 이 있는 어휘적 환경에 대한 참조를 유지합니다. 이런 이유로, `myFunc`가 호출될 때 변수 `name`은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 `console.log` 에 전달된다.
+될 때 생성된 `displayName` 함수의 인스턴스에 대한 참조입니다. `displayName`의 인스턴스는 변수 `name` 이 있는 어휘적 환경에 대한 참조를 유지합니다. 이런 이유로, `myFunc`가 호출될 때 변수 `name`은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 `console.log` 에 전달됩니다.
 
 다음은 조금 더 흥미로운 예제인 `makeAdder` 함수입니다.
 
diff --git a/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.md b/files/ko/web/javascript/reference/functions/arguments/symbol.iterator/index.md
similarity index 82%
rename from files/ko/web/javascript/reference/functions/arguments/@@iterator/index.md
rename to files/ko/web/javascript/reference/functions/arguments/symbol.iterator/index.md
index b87cdb89d7af39..90d4a700da6a7d 100644
--- a/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/functions/arguments/symbol.iterator/index.md
@@ -1,6 +1,7 @@
 ---
 title: arguments[@@iterator]()
-slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
+slug: Web/JavaScript/Reference/Functions/arguments/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
 ---
 
 {{jsSidebar("Functions")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md
index 7cbd19c5d75c2d..83bb906b13f5c3 100644
--- a/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md
@@ -2,7 +2,7 @@
 title: Array.prototype.copyWithin()
 slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
 l10n:
-  sourceCommit: b7ca46c94631967ecd9ce0fe36579be334a01275
+  sourceCommit: 6e8ca9ecc4bfd14ea5c46d4817f189eecacb8296
 ---
 
 {{JSRef}}
@@ -21,22 +21,22 @@ copyWithin(target, start, end)
 ### 매개변수
 
 - `target`
-  - : 시퀀스를 복사할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다.
-    - 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
+  - : 시퀀스를 복사할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다. 이는 `start`에 있는 요소가 복사될 위치에 해당하며, `start`과 `end` 사이의 모든 요소는 후속 인덱스에 복사됩니다.
+    - 음수 인덱스는 배열의 끝부터 셉니다. `-array.length <= target < 0`이라면, `target + array.length`이 사용됩니다.
     - `target < -array.length`이면, `0`이 사용됩니다.
     - `target >= array.length`이면, 아무것도 복사되지 않습니다.
-    - 정수 변환 후 `target`이 `start` 보디 뒤에 위치하면, `array.length`의 끝부분까지만 복사가 수행됩니다(즉, `copyWithin()`은 배열을 확장하지 않습니다).
+    - 정수 변환 후 `target`이 `start` 보다 뒤에 위치하면, `array.length`의 끝부분까지만 복사가 수행됩니다(즉, `copyWithin()`은 배열을 확장하지 않습니다).
 - `start`
   - : 요소 복사를 시작할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다.
-    - 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
+    - 음수 인덱스는 배열의 끝부터 셉니다. `-array.length <= start < 0`이라면, `target + array.length`이 사용됩니다.
     - `target < -array.length`이면, `0`이 사용됩니다.
     - `target >= array.length`이면, 아무것도 복사되지 않습니다.
 - `end` {{optional_inline}}
   - : 요소 복사를 끝낼 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다. `copyWithin()`은 `end`를 포함하지 않고 `end`전 까지 복사합니다.
-    - 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
+    - 음수 인덱스는 배열의 끝부터 셉니다. `-array.length <= end < 0`이라면, `target + array.length`이 사용됩니다.
     - `target < -array.length`이면, `0`이 사용됩니다.
     - `end >= array.length` 이거나 `end`가 생략되면, `array.length`가 사용됩니다. 이는 끝까지 모든 요소를 복사하는 것이 됩니다.
-    - 정수 변환 후 `end`가 `start`뒤에 위치하면, 아무것도 복사되지 않습니다.
+    - `end`가 `start`가 암시하는 위치나 그 앞의 위치를 암시하는 경우 아무것도 복사되지 않습니다.
 
 ### 반환 값
 
@@ -57,7 +57,7 @@ console.log([1, 2, 3, 4, 5].copyWithin(2));
 
 `copyWithin()` 메서드는 빈 슬롯을 보존합니다. 복사할 영역이 [희소](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)인 경우, 빈 슬롯의 해당 새 인덱스에 있는 항목은 [삭제](/ko/docs/Web/JavaScript/Reference/Operators/delete)되고 빈 슬롯이 됩니다.
 
-`copyWithin()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다. 문자열도 유사 배열이지만, 문자열은 불변이므로 이 메서드를 적용하기에는 적합하지 않습니다.
+`copyWithin()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에 `length` 속성과 정수 키 속성 만을 기대합니다. 문자열도 유사 배열이지만, 문자열은 불변이므로 이 메서드를 적용하기에는 적합하지 않습니다.
 
 ## 예제
 
@@ -109,6 +109,6 @@ console.log(Array.prototype.copyWithin.call(arrayLike, 3, 1));
 ## 같이 보기
 
 - [`core-js`의 `Array.prototype.copyWithin` 폴리필](https://github.com/zloirock/core-js#ecmascript-array)
-- [인덱스된 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections)
+- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 가이드
 - {{jsxref("Array")}}
 - {{jsxref("TypedArray.prototype.copyWithin()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md b/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md
index 71d6184aba59f5..ee762cde8e73a1 100644
--- a/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md
@@ -2,16 +2,17 @@
 title: Array.prototype.findLastIndex()
 slug: Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
 l10n:
-  sourceCommit: 34a34bee83fb4accf073ebc0c8cfc8eff956dc9b
+  sourceCommit: 57375b77984037c614982a9327bc96101824db89
 ---
 
 {{JSRef}}
 
-**`findLastIndex()`** 메서드는 배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 만족하는 배열의 첫번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.
+{{jsxref("Array")}} 인스턴스의 **`findLastIndex()`** 메서드는 배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 배열의 첫번째 요소의 인덱스를 반환합니다.
+만족하는 요소가 없으면 -1을 반환합니다.
 
-인덱스 대신 판별함수를 만족하는 마지막 값을 반환하는{{jsxref("Array/findLast", "findLast()")}}메서드도 참고하세요.
+인덱스 대신 판별 함수를 만족하는 마지막 값을 반환하는 {{jsxref("Array/findLast", "findLast()")}} 메서드도 참고하세요.
 
-{{EmbedInteractiveExample("pages/js/array-findlastindex.html","shorter")}}
+{{EmbedInteractiveExample("pages/js/array-findlastindex.html", "shorter")}}
 
 ## 구문
 
@@ -23,39 +24,28 @@ findLastIndex(callbackFn, thisArg)
 ### 매개변수
 
 - `callbackFn`
-
-  - : 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 매칭된 요소가 발견되었음을 나타내기 위해 [참 값](/ko/docs/Glossary/Truthy)을 반환해야하며, 그렇지 않으면 [거짓 값](/ko/docs/Glossary/Falsy)을 반환해야 합니다. 이 함수는 다음과 같은 인수와 함께 호출됩니다.
-
+  - : 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 매칭된 요소가 발견되었음을 나타내기 위해 [참 같은 값](/ko/docs/Glossary/Truthy)을 반환해야하며, 그렇지 않으면 [거짓 같은 값](/ko/docs/Glossary/Falsy)을 반환해야 합니다. 이 함수는 다음과 같은 인수와 함께 호출됩니다.
     - `element`
-      - : 배열에서 처리중인 현재 요소입니다.
+      - : 배열에서 처리 중인 현재 요소입니다.
     - `index`
-      - : 배열에서 처리중인 현재 요소의 인덱스입니다.
+      - : 배열에서 처리 중인 현재 요소의 인덱스입니다.
     - `array`
       - : `findLastIndex()`가 호출된 배열입니다.
-
 - `thisArg` {{optional_inline}}
-  - : `callbackFn`을 실행할 때 this로 사용할 객체입니다. 자세한 내용은 반복적인 메소드([iterative methods](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods))를 참조합니다.
+  - : `callbackFn`을 실행할 때 `this`로 사용할 객체입니다. 자세한 내용은 [순회 가능 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods)를 참고하시기 바랍니다.
 
 ### 반환 값
 
 테스트를 통과하는 배열에서 마지막 요소(가장 높은 인덱스)의 인덱스입니다.
-만약 매칭되는 요소가 없다면 -1을 반환합니다.
+만약 일치하는 요소가 없다면 `-1`을 반환합니다.
 
 ## 설명
 
-`findLastIndex()` 메서드는 반복적인 메소드([iterative methods](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods))입니다. 이 메서드는 배열의 각 요소마다 제공된 `callbackFn` 함수를 역순으로 한 번씩 호출하며, `callbackFn`이 [참 값](/ko/docs/Glossary/Truthy)을 반환할 때까지 반복합니다. 참 값이 반환되면 `findLastIndex()`는 해당 요소의 인덱스를 반환하고 배열 반복을 중단합니다. 만약 `callbackFn`이 참 값을 반환하지 않으면, `findLastIndex()`는 `-1`을 반환합니다.
-
-`callbackFn`는 배열의 _모든_ 인덱스에 대해 호출됩니다. 할당된 값이 있는 인덱스뿐만 아니라 희소 배열([sparse arrays](/ko/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays))의 비어있는 슬롯도 `undefined`와 동일하게 동작합니다.
-
-`findLastIndex()` 메서드는 호출된 배열을 변경하지 않지만, 인자로 제공된 `callbackFn`은 변경할 수 있습니다. 그러나, 배열의 길이는 `callbackFn`의 첫 호출 _이전에_ 저장됨에 유의합니다. 따라서 다음과 같이 동작합니다.
-
-- `callbackFn`은 `findLastIndex()`가 호출된 이후 배열에 추가된 요소에 방문하지 않습니다.
-- 이미 방문한 인덱스의 변경은 `callbackFn`을 다시 호출하지 않습니다.
-- `callbackFn`에 의해 아직 방문되지 않은 배열의 기존 요소가 변경되면, `callbackFn`에 전달되는 값은 해당 요소가 방문되었을 때의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 마치 `undefined`인 것처럼 방문됩니다.
+`findLastIndex()` 메서드는 [순회 가능 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods)입니다. 이 메서드는 배열의 각 요소마다 제공된 `callbackFn` 함수를 역순으로 한 번씩 호출하며, `callbackFn`이 [참 같은 값](/ko/docs/Glossary/Truthy)을 반환할 때까지 반복합니다. 참 같은 값이 반환되면 `findLastIndex()`는 해당 요소의 인덱스를 반환하고 배열 순회를 중단합니다. 만약 `callbackFn`이 참 같은 값을 반환하지 않으면, `findLastIndex()`는 `-1`을 반환합니다.
 
-> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드로 이어지는 경우가 많으며, 일반적으로 피해야 할 것입니다 (특별한 경우를 제외하고).
+`callbackFn`는 배열의 모든 인덱스에 대해 호출됩니다. 할당된 값이 있는 인덱스뿐만 아니라 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)의 비어있는 슬롯도 `undefined`와 동일하게 동작합니다.
 
-`findLastIndex()` 메서드는 [일반적인(generic)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. 이는 `this` 값이 `length` 속성과 정수 키 속성을 가지고 있는 것만을 요구합니다.
+`findLastIndex()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. `this` 값에 `length` 속성과 정수 키 속성 만을 기대합니다.
 
 ## 예제
 
@@ -76,10 +66,28 @@ function isPrime(element) {
   return true;
 }
 
-console.log([4, 6, 8, 12].findLastIndex(isPrime)); // -1, not found
+console.log([4, 6, 8, 12].findLastIndex(isPrime)); // -1, 찾을 수 없음
 console.log([4, 5, 7, 8, 9, 11, 12].findLastIndex(isPrime)); // 5
 ```
 
+### callbackFn의 세 번째 인수 사용하기
+
+`array` 인수는 배열의 다른 요소에 접근하려는 경우, 특히 배열을 참조하는 기존 변수가 없는 경우에 유용합니다. 다음 예제에서는 먼저 `filter()`를 사용하여 양수 값을 추출한 다음 `findLastIndex()`를 사용하여 이웃 요소보다 작은 마지막 요소를 찾습니다.
+
+```js
+const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];
+const lastTrough = numbers
+  .filter((num) => num > 0)
+  .findLastIndex((num, idx, arr) => {
+    // arr 인수가 없으면 변수로 저장하지 않고 중간에 생성된
+    // 배열에 쉽게 접근할 수 있는 방법은 없습니다.
+    if (idx > 0 && num >= arr[idx - 1]) return false;
+    if (idx < arr.length - 1 && num >= arr[idx + 1]) return false;
+    return true;
+  });
+console.log(lastTrough); // 6
+```
+
 ### 희소 배열에서 findLastIndex() 사용
 
 희소 배열에서 `undefined`를 찾아 빈 슬롯의 인덱스를 알아낼 수 있습니다.
@@ -114,7 +122,7 @@ console.log(
 
 ## 같이 보기
 
-- [Polyfill of `Array.prototype.findIndex` in `core-js`](https://github.com/zloirock/core-js#ecmascript-array)
+- [`core-js`에서의 `Array.prototype.findIndex` 폴리필](https://github.com/zloirock/core-js#ecmascript-array)
 - {{jsxref("Array")}}
 - {{jsxref("Array.prototype.find()")}}
 - {{jsxref("Array.prototype.findIndex()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/array/symbol.iterator/index.md
similarity index 96%
rename from files/ko/web/javascript/reference/global_objects/array/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/array/symbol.iterator/index.md
index 7f7ae31aab3f10..d016fd7ea5eda5 100644
--- a/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/symbol.iterator/index.md
@@ -1,6 +1,7 @@
 ---
 title: Array.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
 l10n:
   sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@species/index.md b/files/ko/web/javascript/reference/global_objects/array/symbol.species/index.md
similarity index 96%
rename from files/ko/web/javascript/reference/global_objects/array/@@species/index.md
rename to files/ko/web/javascript/reference/global_objects/array/symbol.species/index.md
index a8f77264d5d2e5..f07a101e0a9236 100644
--- a/files/ko/web/javascript/reference/global_objects/array/@@species/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/symbol.species/index.md
@@ -1,6 +1,7 @@
 ---
 title: Array[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
+slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.species
+original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
 l10n:
   sourceCommit: 34a34bee83fb4accf073ebc0c8cfc8eff956dc9b
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.md b/files/ko/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
similarity index 96%
rename from files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.md
rename to files/ko/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
index 00a57b067f3a0e..5ec4fa0fcb34bf 100644
--- a/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
@@ -1,6 +1,7 @@
 ---
 title: Array.prototype[@@unscopables]
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables
+original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
 l10n:
   sourceCommit: 34a34bee83fb4accf073ebc0c8cfc8eff956dc9b
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/@@species/index.md b/files/ko/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
deleted file mode 100644
index c200abbc3bc1ed..00000000000000
--- a/files/ko/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: ArrayBuffer[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
-l10n:
-  sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b
----
-
-{{JSRef}}
-
-**`ArrayBuffer[@@species]`** 정적 접근자 속성은 배열 버퍼 메서드에서 반환 값을 생성하는데 사용되는 생성자를 반환합니다.
-
-> **경고:** `@@species` 존재는 임의의 코드가 실행될 수 있게하며 보안 취약점이 발생할 수 있습니다. 또한 어떠한 최적화를 훨씬 어렵게 만들 수 있습니다. 엔진 구현자들은 [이 기능을 제거할지 여부를 검토 중](https://github.com/tc39/proposal-rm-builtin-subclassing) 입니다. 가능하면 이 기능에 의존하지 마시기 바랍니다.
-
-## 구문
-
-```js-nolint
-ArrayBuffer[Symbol.species]
-```
-
-### 반환 값
-
-`get @@species`이 호출된 생성자(`this`)의 값입니다. 반환 값은 새 배열 버퍼를 생성하는 배열 버퍼 메서드에서 반환 값을 구성하는 데 사용됩니다.
-
-## 설명
-
-`@@species` 접근자 속성은 `ArrayBuffer` 객체를 생성하기 위한 기본 생성자를 반환합니다. 하위 클래스 생성자는 생성자 할당을 변경하기 위해 재정의 할 수 있습니다. 기본 구현은 기본적으로 아래와 같습니다.
-
-```js
-// 예시를 위한 가상의 구현
-class ArrayBuffer {
-  static get [Symbol.species]() {
-    return this;
-  }
-}
-```
-
-이 다형성 구현으로 인해 파생된 하위 클래스의 `@@species`은 기본적으로 생성자 자체도 반환합니다.
-
-```js
-class SubArrayBuffer extends ArrayBuffer {}
-SubArrayBuffer[Symbol.species] === SubArrayBuffer; // true
-```
-
-기존 객체를 변경하지 않고 새 배열 버퍼 인스턴스를 반환하는 배열 버퍼 메서드를 호출할 때(예를 들어 [`slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)) 객체의 `constructor[@@species]`에 접근하게 됩니다. 반환된 생성자는 배열 버퍼 메서드의 반환값을 구성하는 데 사용됩니다.
-
-## 예제
-
-### 일반적인 객체에서의 Species
-
-`@@species` 속성은 기본 생성자 함수, 즉 `ArrayBuffer`의 `ArrayBuffer` 생성자를 반환합니다.
-
-```js
-ArrayBuffer[Symbol.species]; // function ArrayBuffer()
-```
-
-### 파생 객체에서의 Species
-
-`MyArrayBuffer`와 같은 사용자 정의 `ArrayBuffer` 하위 클래스의 인스턴스에서 `MyArrayBuffer`의 Species은 `MyArrayBuffer` 생성자입니다. 그러나 파생 클래스 메서드에서 부모 `ArrayBuffer` 객체를 반환하기 위해 이를 덮어쓸 수 있습니다.
-
-```js
-class MyArrayBuffer extends ArrayBuffer {
-  // 부모 ArrayBuffer 생성자에 MyArrayBuffer Species 를 덮어 씀
-  static get [Symbol.species]() {
-    return ArrayBuffer;
-  }
-}
-```
-
-## 명세서
-
-{{Specifications}}
-
-## 브라우저 호환성
-
-{{Compat}}
-
-## 같이 보기
-
-- {{jsxref("ArrayBuffer")}}
-- {{jsxref("Symbol.species")}}
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
index f08318c0d2e7a9..3e51374e7dfa7a 100644
--- a/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
@@ -1,43 +1,73 @@
 ---
 title: ArrayBuffer() 생성자
 slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer
+l10n:
+  sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
 ---
 
 {{JSRef}}
 
 **`ArrayBuffer()`** 생성자는 {{jsxref("ArrayBuffer")}} 객체를 생성합니다.
 
-{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}
+{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html", "shorter")}}
 
 ## 구문
 
-```js
-new ArrayBuffer(length);
+```js-nolint
+new ArrayBuffer(length)
+new ArrayBuffer(length, options)
 ```
 
+> **참고:** `ArrayBuffer()`는 오직 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 {{jsxref("TypeError")}} 예외가 발생합니다.
+
 ### 매개변수
 
 - `length`
   - : 생성할 `ArrayBuffer`의 바이트 크기.
+- `length`
+  - : 생성할 배열 버퍼의 바이트 단위의 크기.
+- `options` {{optional_inline}}
+  - : 다음 속성을 포함하는 객체.
+    - `maxByteLength` {{optional_inline}}
+      - : 배열 버퍼가 크기를 재조정할 수 있는 바이트 단위 최대 크기.
 
 ### 반환 값
 
 지정한 크기를 가진 새로운 `ArrayBuffer` 객체. 내용은 모두 0으로 초기화됩니다.
 
+지정된 크기의 새 `ArrayBuffer` 객체입니다. `maxByteLength` 속성이 명시되어 있을 경우 이 값으로 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}} 속성이 설정됩니다. 그 내용은 0으로 초기화됩니다.
+
 ### 예외
 
-`length`가 {{jsxref("Number.MAX_SAFE_INTEGER")}}보다 크거나, 음수면 {{jsxref("RangeError")}}.
+- {{jsxref("RangeError")}}
+  - : 다음 중 한 가지 경우에 발생합니다.
+    - `length` 혹은 `maxByteLength`가 {{jsxref("Number.MAX_SAFE_INTEGER")}} (≥ 2<sup>53</sup>)보다 크거나 음수일 경우
+    - `length`가 `maxByteLength`보다 클 경우.
 
 ## 예제
 
-아래 예제 코드는 8바이트 버퍼를 생성한 후 {{jsxref("Int32Array")}} 뷰로 그 버퍼를 참조합니다.
+### ArrayBuffer 생성하기
+
+이 예제에서는 버퍼를 참조하는 {{jsxref("Int32Array")}} 뷰를 사용하여 8바이트 버퍼를 만듭니다.
+
+```js
+const buffer = new ArrayBuffer(8);
+const view = new Int32Array(buffer);
+```
+
+### 크기 조절이 가능한 ArrayBuffer 생성하기
+
+이 예제에서는 최대 16바이트까지 크기를 조정할 수 있는 8바이트 버퍼를 생성한 다음 {{jsxref("ArrayBuffer/resize", "resize()")}} 이를 12바이트로 조정합니다.
 
 ```js
-var buffer = new ArrayBuffer(8);
-var view = new Int32Array(buffer);
+const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
+
+buffer.resize(12);
 ```
 
-## 명세
+> **참고:** `maxByteLength`는 사용 사례에 맞게 가능한 가장 작은 값으로 설정하는 것이 좋습니다. 메모리 부족 오류의 위험을 줄이려면 `1073741824`(1GB)를 초과하지 않아야 합니다.
+
+## 명세서
 
 {{Specifications}}
 
@@ -47,5 +77,6 @@ var view = new Int32Array(buffer);
 
 ## 같이 보기
 
-- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
+- [`core-js`에서의 `ArrayBuffer` 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays) 안내서
 - {{jsxref("SharedArrayBuffer")}}
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md b/files/ko/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md
new file mode 100644
index 00000000000000..8b62248531c780
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md
@@ -0,0 +1,80 @@
+---
+title: ArrayBuffer[Symbol.species]
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species
+l10n:
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
+---
+
+{{JSRef}}
+
+**`ArrayBuffer[Symbol.species]`** 정적 접근자 속성은 배열 버퍼 메서드에서 반환 값을 생성하는데 사용되는 생성자를 반환합니다.
+
+> **경고:** `Symbol.species` 존재는 임의의 코드가 실행될 수 있게하며 보안 취약점이 발생할 수 있습니다. 또한 어떠한 최적화를 훨씬 어렵게 만들 수 있습니다. 엔진 구현자들은 [이 기능을 제거할지 여부를 검토 중](https://github.com/tc39/proposal-rm-builtin-subclassing) 입니다. 가능하면 이 기능에 의존하지 마시기 바랍니다.
+
+## 구문
+
+```js-nolint
+ArrayBuffer[Symbol.species]
+```
+
+### 반환 값
+
+`get [Symbol.species]`이 호출된 생성자(`this`)의 값입니다. 반환 값은 새 배열 버퍼를 생성하는 배열 버퍼 메서드에서 반환 값을 구성하는 데 사용됩니다.
+
+## 설명
+
+`Symbol.species` 접근자 속성은 `ArrayBuffer` 객체를 생성하기 위한 기본 생성자를 반환합니다. 하위 클래스 생성자는 생성자 할당을 변경하기 위해 재정의 할 수 있습니다. 기본 구현은 기본적으로 아래와 같습니다.
+
+```js
+// 예시를 위한 가상의 구현
+class ArrayBuffer {
+  static get [Symbol.species]() {
+    return this;
+  }
+}
+```
+
+이 다형성 구현으로 인해 파생된 하위 클래스의 `Symbol.species`은 기본적으로 생성자 자체도 반환합니다.
+
+```js
+class SubArrayBuffer extends ArrayBuffer {}
+SubArrayBuffer[Symbol.species] === SubArrayBuffer; // true
+```
+
+기존 객체를 변경하지 않고 새 배열 버퍼 인스턴스를 반환하는 배열 버퍼 메서드를 호출할 때(예를 들어 [`slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)) 객체의 `constructor[Symbol.species]`에 접근하게 됩니다. 반환된 생성자는 배열 버퍼 메서드의 반환값을 구성하는 데 사용됩니다.
+
+## 예제
+
+### 일반적인 객체에서의 Species
+
+`Symbol.species` 속성은 기본 생성자 함수, 즉 `ArrayBuffer`의 `ArrayBuffer` 생성자를 반환합니다.
+
+```js
+ArrayBuffer[Symbol.species]; // function ArrayBuffer()
+```
+
+### 파생 객체에서의 Species
+
+`MyArrayBuffer`와 같은 사용자 정의 `ArrayBuffer` 하위 클래스의 인스턴스에서 `MyArrayBuffer`의 Species은 `MyArrayBuffer` 생성자입니다. 그러나 파생 클래스 메서드에서 부모 `ArrayBuffer` 객체를 반환하기 위해 이를 덮어쓸 수 있습니다.
+
+```js
+class MyArrayBuffer extends ArrayBuffer {
+  // 부모 ArrayBuffer 생성자에 MyArrayBuffer Species 를 덮어 씀
+  static get [Symbol.species]() {
+    return ArrayBuffer;
+  }
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/ko/web/javascript/reference/global_objects/dataview/setfloat16/index.md b/files/ko/web/javascript/reference/global_objects/dataview/setfloat16/index.md
new file mode 100644
index 00000000000000..f67d6e7177d070
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/dataview/setfloat16/index.md
@@ -0,0 +1,64 @@
+---
+title: DataView.prototype.setFloat16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat16
+l10n:
+  sourceCommit: fb442649a7e91a177a582a3e9c6e1a95a9e8dda5
+---
+
+{{JSRef}}
+
+{{jsxref("DataView")}} 인스턴스의 **`setFloat16()`** 메서드는 숫자를 받아 이 `DataView`의 지정된 바이트 오프셋의 2 바이트의 공간에 16비트 실수로 저장합니다. 정렬 제약 조건은 없으며, 범위 내의 모든 오프셋에서 멀티바이트 값을 저장할 수 있습니다.
+
+{{EmbedInteractiveExample("pages/js/dataview-setfloat16.html")}}
+
+## 구문
+
+```js-nolint
+setFloat16(byteOffset, value)
+setFloat16(byteOffset, value, littleEndian)
+```
+
+### 매개변수
+
+- `byteOffset`
+  - : 데이터를 저장할 데이터 뷰의 시작점으로부터의 바이트 단위의 오프셋.
+- `value`
+  - : 저장할 값. 어떻게 값이 바이트로 인코딩되는지는 [값 인코딩 및 정규화](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#value_encoding_and_normalization)를 보시기 바랍니다.
+- `littleEndian` {{optional_inline}}
+  - : {{Glossary("Endianness", "리틀 엔디언 혹은 빅 엔디언")}} 형식으로 데이터를 저장할지 여부를 나타냅니다. `false` 혹은 `undefined`이라면 빅 엔디언 값으로 저장합니다.
+
+### 반환 값
+
+{{jsxref("undefined")}}.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+  - : `byteOffset`이 뷰의 끝을 넘어서 저장되어 있는 경우 발생합니다.
+
+## 예제
+
+### setFloat16() 사용하기
+
+```js
+const buffer = new ArrayBuffer(10);
+const dataview = new DataView(buffer);
+dataview.setFloat16(0, 3);
+dataview.getFloat16(1); // 0
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `DataView.prototype.setFloat16` 안내서](https://github.com/zloirock/core-js#float16-methods)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("Float16Array")}}
diff --git a/files/ko/web/javascript/reference/global_objects/date/@@toprimitive/index.md b/files/ko/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
similarity index 93%
rename from files/ko/web/javascript/reference/global_objects/date/@@toprimitive/index.md
rename to files/ko/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
index 95c858a134fb5e..09f37cedb11ded 100644
--- a/files/ko/web/javascript/reference/global_objects/date/@@toprimitive/index.md
+++ b/files/ko/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
@@ -1,6 +1,7 @@
 ---
 title: Date.prototype[@@toPrimitive]
-slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive
+original_slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
 ---
 
 {{JSRef}}
diff --git a/files/ko/web/javascript/reference/global_objects/function/caller/index.md b/files/ko/web/javascript/reference/global_objects/function/caller/index.md
new file mode 100644
index 00000000000000..7a58ca8f8d235c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/caller/index.md
@@ -0,0 +1,149 @@
+---
+title: Function.prototype.caller
+slug: Web/JavaScript/Reference/Global_Objects/Function/caller
+l10n:
+  sourceCommit: 6a0f9553932823cd0c4dcf695d4b4813474964fb
+---
+
+{{JSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
+
+> **참고:** [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)에서 함수의 `caller`에 접근하면 오류가 발생합니다. 해당 API가 대체되지 않고 제거되었습니다. 이는 보안 위험을 초래하고 인라이닝 및 꼬리 호출(tail-call) 최적화와 같은 최적화의 가능성을 심각하게 제한하는 코드가 스택을 순차적으로 검사하는 것(walk the stack)을 방지하기 위한 것입니다. 자세한 설명은 [`arguments.callee`의 사용 중단에 대한 근거](/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee#description)에서 확인할 수 있습니다.
+
+{{jsxref("Function")}} 인스턴스의 **`caller`** 접근자 속성은 이 함수를 호출한 함수를 반환합니다. [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode), 화살표, 비동기 및 제너레이터 함수의 경우 `caller` 속성에 액세스하면 {{jsxref("TypeError")}}가 발생합니다.
+
+## 설명
+
+`f` 함수가 최상위 코드에 의해 호출된 경우 `f.caller`의 값은 {{jsxref("Operators/null", "null")}}이고, 그렇지 않으면 `f`를 호출한 함수입니다. `f`를 호출한 함수가 엄격 모드 함수인 경우 `f.caller`의 값도 `null`입니다.
+
+ECMAScript 사양에 지정된 유일한 동작은 `Function.prototype`에 모든 `get` 또는 `set` 요청("포이즌 필 접근자"(poison pill accessor)라고 함)에 대해 무조건 {{jsxref("TypeError")}}가 발생하는 초기 `caller` 접근자가 있다는 것과 구현체에서 이 의미를 변경할 수 없는 엄격하지 않은 일반 함수를 제외한 어떤 함수에도 엄격한 모드 함수 값이 없어야 한다는 점에 유의하시기 바랍니다. `caller` 속성의 실제 동작은 오류를 발생시키는 것 이외의 경우 구현체에 따라 정의됩니다. 예를 들어 Chrome은 자체 데이터 속성으로 정의하는 반면, Firefox와 Safari는 초기 포이즌 필 `Function.prototype.caller` 접근자를 확장하여 엄격한 함수가 아닌 `this` 값을 특별히 처리합니다.
+
+```js
+(function f() {
+  if (Object.hasOwn(f, "caller")) {
+    console.log(
+      "caller is an own property with descriptor",
+      Object.getOwnPropertyDescriptor(f, "caller"),
+    );
+  } else {
+    console.log(
+      "f doesn't have an own property named caller. Trying to get f.[[Prototype]].caller",
+    );
+    console.log(
+      Object.getOwnPropertyDescriptor(
+        Object.getPrototypeOf(f),
+        "caller",
+      ).get.call(f),
+    );
+  }
+})();
+
+// In Chrome:
+// caller is an own property with descriptor {value: null, writable: false, enumerable: false, configurable: false}
+
+// In Firefox:
+// f doesn't have an own property named caller. Trying to get f.[[Prototype]].caller
+// null
+```
+
+이 속성은 {{jsxref("Functions/arguments", "arguments")}} 객체의 미사용 `arguments.caller` 속성을 대체합니다.
+
+## 예제
+
+### 함수의 caller 속성의 값 확인하기
+
+아래 코드는 함수의 `caller` 속성 값을 확인합니다.
+
+```js
+function myFunc() {
+  if (myFunc.caller === null) {
+    return "The function was called from the top!";
+  } else {
+    return `This function's caller was ${myFunc.caller}`;
+  }
+}
+```
+
+### 스택 재생성과 재귀
+
+재귀의 경우에는 이 속성을 사용하여 호출 스택을 재생성할 수 없음을 유의하시기 바랍니다. 아래를 고려해보세요.
+
+```js
+function f(n) {
+  g(n - 1);
+}
+function g(n) {
+  if (n > 0) {
+    f(n);
+  } else {
+    stop();
+  }
+}
+f(2);
+```
+
+`stop()`이 호출될 시점에서의 호출 스택은 아래와 같습니다.
+
+```plain
+f(2) -> g(1) -> f(1) -> g(0) -> stop()
+```
+
+아래는 참입니다.
+
+```js
+stop.caller === g && f.caller === g && g.caller === f;
+```
+
+아래와 같이 `stop()` 함수에서 스택 추적을 가져오려고 시도한다면
+
+```js
+let f = stop;
+let stack = "Stack trace:";
+while (f) {
+  stack += `\n${f.name}`;
+  f = f.caller;
+}
+```
+
+루프는 절대 멈추지 않습니다.
+
+### 엄격 모드에서의 caller
+
+caller가 엄격 모드 함수라면, `caller`의 값은 `null`입니다.
+
+```js
+function callerFunc() {
+  calleeFunc();
+}
+
+function strictCallerFunc() {
+  "use strict";
+  calleeFunc();
+}
+
+function calleeFunc() {
+  console.log(calleeFunc.caller);
+}
+
+(function () {
+  callerFunc();
+})();
+// Logs [Function: callerFunc]
+
+(function () {
+  strictCallerFunc();
+})();
+// Logs null
+```
+
+## 명세서
+
+어떤 표준에도 속하지 않습니다.
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Function.prototype.name")}}
+- {{jsxref("Functions/arguments", "arguments")}}
diff --git a/files/ko/web/javascript/reference/global_objects/function/@@hasinstance/index.md b/files/ko/web/javascript/reference/global_objects/function/symbol.hasinstance/index.md
similarity index 95%
rename from files/ko/web/javascript/reference/global_objects/function/@@hasinstance/index.md
rename to files/ko/web/javascript/reference/global_objects/function/symbol.hasinstance/index.md
index 777b4796a9dc4d..9e6b1050279304 100644
--- a/files/ko/web/javascript/reference/global_objects/function/@@hasinstance/index.md
+++ b/files/ko/web/javascript/reference/global_objects/function/symbol.hasinstance/index.md
@@ -1,6 +1,7 @@
 ---
 title: Function.prototype[@@hasInstance]()
-slug: Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance
+slug: Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance
+original_slug: Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance
 l10n:
   sourceCommit: 0891bd2199fabb1ec00dfe4765019d54f21d965c
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/getcalendars/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/getcalendars/index.md
new file mode 100644
index 00000000000000..7109a1f4f37275
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/locale/getcalendars/index.md
@@ -0,0 +1,100 @@
+---
+title: Intl.Locale.prototype.getCalendars()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/getCalendars
+l10n:
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
+---
+
+{{JSRef}}
+
+{{jsxref("Intl.Locale")}} 인스턴스의 **`getCalendars()`** 메서드는 이 로케일에 대한 하나 이상의 고유한 캘린더 식별자 목록을 반환합니다.
+
+> **참고:** 일부 브라우저의 일부 버전에서는 이 메서드가 `calendars`라는 접근자 속성으로 구현되었습니다. 그러나 이 메서드는 접근할 때마다 새로운 배열을 반환하기 때문에 `locale.calendars === locale.calendars`가 `false`를 반환하는 상황을 방지하기 위해 이제 메서드로 구현되었습니다. 자세한 내용은 [브라우저 호환성 표](#브라우저_호환성)를 참조하세요.
+
+## 구문
+
+```js-nolint
+getCalendars()
+```
+
+### 매개변수
+
+없음.
+
+### 반환 값
+
+`Locale`에 일반적으로 사용되는 모든 달력을 나타내는 문자열 배열로, 내림차순 기본 설정으로 정렬됩니다. `Locale`에 이미 [`calender`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar)가 있는 경우 반환된 배열에는 해당 단일 값이 포함됩니다.
+
+아래는 지원되는 캘린더 목록입니다.
+
+### 지원하는 달력 유형
+
+- `buddhist`
+  - : 태국 불교 달력
+- `chinese`
+  - : 전통 중국력
+- `coptic`
+  - : 콥트 달력
+- `dangi`
+  - : 전통 한국력
+- `ethioaa`
+  - : 에디오피아력, 아메테 알렘력 (기원전 약 5493년경)
+- `ethiopic`
+  - : 에디오피아력, 아메테 미흐렛력 (기원후 약 8년경)
+- `gregory`
+  - : 그레고리안력
+- `hebrew`
+  - : 전통 히브리력
+- `indian`
+  - : 인도력
+- `islamic`
+  - : 이슬람력
+- `islamic-umalqura`
+  - : 이슬람력, Umm al-Qura
+- `islamic-tbla`
+  - : 이슬람력, 표 형식 (윤년 [2,5,7,10,13,16,18,21,24,26,29] - 천문학적 기원)
+- `islamic-civil`
+  - : 이슬람력, 표 형식 (윤년 [2,5,7,10,13,16,18,21,24,26,29] - 민간 기원)
+- `islamic-rgsa`
+  - : 이슬람력, 사우디아라비아 달 관측법
+- `iso8601`
+  - : ISO 달력 (ISO 8601 달력 주 규칙을 사용한 그레고리안력)
+- `japanese`
+  - : 일본 제국력
+- `persian`
+  - : 페르시안력
+- `roc`
+  - : 민간용(계산식) 아랍 달력
+- `islamicc`
+  - : 민간용(계산식) 아랍 달력
+    > **경고:** `islamicc` 달력 키는 더 이상 사용하지 않습니다. `islamic-civil`를 사용해주세요.
+
+## 예제
+
+### 지원하는 달력 목록 얻기
+
+`Locale` 객체에 `calendar`가 없는 경우, `getCalendars()`는 주어진 `Locale`에 대해 일반적으로 사용되는 모든 캘린더를 나열합니다. `calendar`를 명시적으로 설정하는 예제는 [`calendar` 예제](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#예제)를 참고하세요.
+
+```js
+const arEG = new Intl.Locale("ar-EG");
+console.log(arEG.getCalendars()); // ["gregory", "coptic", "islamic", "islamic-civil", "islamic-tbla"]
+```
+
+```js
+const jaJP = new Intl.Locale("ja-JP");
+console.log(jaJP.getCalendars()); // ["gregory", "japanese"]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.Locale")}}
+- [`Intl.Locale.prototype.calendar`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar)
+- 유니코드 로케일 데이터 마크업 언어 명세에서의 [유니코드 달력 식별자](https://www.unicode.org/reports/tr35/#UnicodeCalendarIdentifier)
diff --git a/files/ko/web/javascript/reference/global_objects/iterator/drop/index.md b/files/ko/web/javascript/reference/global_objects/iterator/drop/index.md
new file mode 100644
index 00000000000000..33610d8d400dda
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/iterator/drop/index.md
@@ -0,0 +1,138 @@
+---
+title: Iterator.prototype.drop()
+slug: Web/JavaScript/Reference/Global_Objects/Iterator/drop
+l10n:
+  sourceCommit: 088b56a895d22b6df854a9f26400af7d399f289f
+---
+
+{{JSRef}}{{SeeCompatTable}}
+
+{{jsxref("Iterator")}} 인스턴스의 **`drop()`** 메서드는 이 반복자의 시작점에서 주어진 숫자만큼의 요소를 지나치는 새로운 [반복자 헬퍼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Iterator#iterator_helpers)를 반환합니다.
+
+## 구문
+
+```js-nolint
+drop(limit)
+```
+
+### 매개변수
+
+- `limit`
+  - : 순회 시작점부터 버릴 요소의 수.
+
+### 반환 값
+
+새로운 [반복자 헬퍼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Iterator#iterator_helpers)를 반환합니다. 반환된 반복자 헬퍼의 `next()` 메서드가 처음 호출될 때, 현재 반복자는 즉시 `limit` 개의 요소만큼 전진하고, 그 다음 요소(`limit+1`번째 요소)를 산출합니다. 그 후 반복자 헬퍼는 남은 요소들을 하나씩 산출합니다. 만약 현재 반복자가 `limit`개 미만의 요소를 가지고 있다면, 새로운 반복자 헬퍼는 `next()`가 처음 호출될 때 즉시 완료됩니다.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+  - : [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)시 `limit`가 {{jsxref("NaN")}} 되거나 음수일 경우에 발생합니다.
+
+## 예제
+
+### drop() 사용하기
+
+다음 예제는 피보나치 수열의 항을 생성하는 반복자를 만들되, 처음 두 항을 버리고 3번째 항부터 시작하는 반복자를 생성합니다.
+
+```js
+function* fibonacci() {
+  let current = 1;
+  let next = 1;
+  while (true) {
+    yield current;
+    [current, next] = [next, current + next];
+  }
+}
+
+const seq = fibonacci().drop(2);
+console.log(seq.next().value); // 2
+console.log(seq.next().value); // 3
+```
+
+이는 아래와 동일합니다.
+
+```js
+const seq = fibonacci();
+seq.next();
+seq.next();
+```
+
+### for...of 루프와 같이 drop() 사용하기
+
+`drop()`은 반복자를 직접 이동시키지 않을 때 가장 편리합니다. 반복자도 순회 가능하기 때문에, 반환된 헬퍼를 {{jsxref("Statements/for...of", "for...of")}} 루프로 반복할 수 있습니다.
+
+```js
+for (const n of fibonacci().drop(2)) {
+  console.log(n);
+  if (n > 30) {
+    break;
+  }
+}
+
+// Logs:
+// 2
+// 3
+// 5
+// 8
+// 13
+// 21
+// 34
+```
+
+### drop()과 take() 결합하기
+
+반복자의 일부를 얻기 위해 `drop()`과 {{jsxref("Iterator.prototype.take()")}}을 같이 사용할 수 있습니다.
+
+```js
+for (const n of fibonacci().drop(2).take(5)) {
+  // 첫 두 개의 요소를 버리고, 다음 5개를 취합니다
+  console.log(n);
+}
+// 로그:
+// 2
+// 3
+// 5
+// 8
+// 13
+
+for (const n of fibonacci().take(5).drop(2)) {
+  // 처음 5개를 취하고, 처음 2개를 탈락시킵니다
+  console.log(n);
+}
+// 로그:
+// 2
+// 3
+// 5
+```
+
+### drop 갯수의 상단과 하단
+
+`limit`가 음수거나 {{jsxref("NaN")}}일 경우 {{jsxref("RangeError")}}가 발생합니다.
+
+```js
+fibonacci().drop(-1); // RangeError: -1 must be positive
+fibonacci().drop(undefined); // RangeError: undefined must be positive
+```
+
+`limit`가 반복자가 생성할 수 있는 총 요소 수보다 큰 경우(예: {{jsxref("Infinity")}}), 반환된 반복자 헬퍼는 `next()`가 처음 호출될 때 즉시 모든 요소를 버리고 완료됩니다. 만약 현재 반복자가 무한한 경우, 반환된 반복자 헬퍼는 절대 완료되지 않을 것입니다.
+
+```js
+fibonacci().drop(Infinity).next(); // Never ends
+new Set([1, 2, 3]).values().drop(Infinity).next(); // { value: undefined, done: true }
+new Set([1, 2, 3]).values().drop(4).next(); // { value: undefined, done: true }
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `Iterator.prototype.drop` 폴리필](https://github.com/zloirock/core-js#iterator-helpers)
+- {{jsxref("Iterator")}}
+- {{jsxref("Iterator.prototype.take()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/map/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/map/symbol.iterator/index.md
similarity index 94%
rename from files/ko/web/javascript/reference/global_objects/map/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/map/symbol.iterator/index.md
index 0056497dcc03cd..b2098977384a2f 100644
--- a/files/ko/web/javascript/reference/global_objects/map/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/symbol.iterator/index.md
@@ -1,6 +1,7 @@
 ---
 title: Map.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
 ---
 
 {{JSRef}}
diff --git a/files/ko/web/javascript/reference/global_objects/map/@@species/index.md b/files/ko/web/javascript/reference/global_objects/map/symbol.species/index.md
similarity index 91%
rename from files/ko/web/javascript/reference/global_objects/map/@@species/index.md
rename to files/ko/web/javascript/reference/global_objects/map/symbol.species/index.md
index a4c8c1989fae26..81e92962e7613c 100644
--- a/files/ko/web/javascript/reference/global_objects/map/@@species/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/symbol.species/index.md
@@ -1,6 +1,7 @@
 ---
 title: Map[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
+slug: Web/JavaScript/Reference/Global_Objects/Map/Symbol.species
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
 l10n:
   sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/math/cosh/index.md b/files/ko/web/javascript/reference/global_objects/math/cosh/index.md
new file mode 100644
index 00000000000000..f298ddbf65a255
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/cosh/index.md
@@ -0,0 +1,67 @@
+---
+title: Math.cosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cosh
+l10n:
+  sourceCommit: 761b9047d78876cbd153be811efb1aa77b419877
+---
+
+{{JSRef}}
+
+**`Math.cosh()`** 정적 메서드는 숫자의 쌍곡 코사인을 반환합니다. 이는 아래와 같습니다.
+
+<!-- prettier-ignore-start -->
+<math display="block">
+  <semantics><mrow><mrow><mo lspace="0em" rspace="0.16666666666666666em">𝙼𝚊𝚝𝚑.𝚌𝚘𝚜𝚑</mo><mo stretchy="false">(</mo><mi>𝚡</mi><mo stretchy="false">)</mo></mrow><mo>=</mo><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mrow><msup><mi mathvariant="normal">e</mi><mi>x</mi></msup><mo>+</mo><msup><mi mathvariant="normal">e</mi><mrow><mo>−</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh}(x)} = \cosh(x) = \frac{\mathrm{e}^x + \mathrm{e}^{-x}}{2}</annotation></semantics>
+</math>
+<!-- prettier-ignore-end -->
+
+{{EmbedInteractiveExample("pages/js/math-cosh.html")}}
+
+## 구문
+
+```js-nolint
+Math.cosh(x)
+```
+
+### 매개 변수
+
+- `x`
+  - : 숫자.
+
+### 반환 값
+
+`x`의 쌍곡 코사인.
+
+## 설명
+
+`Math`의 정적 메서드이기 때문에 `cosh()`는 생성한 `Math` 객체(`Math`는 생성자가 아닙니다)의 메서드를 사용하기보다는 언제나 `Math.cosh()`를 사용하세요.
+
+## 예제
+
+### Math.cosh() 사용하기
+
+```js
+Math.cosh(-Infinity); // Infinity
+Math.cosh(-1); // 1.5430806348152437
+Math.cosh(-0); // 1
+Math.cosh(0); // 1
+Math.cosh(1); // 1.5430806348152437
+Math.cosh(Infinity); // Infinity
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `Math.cosh` 폴리필](https://github.com/zloirock/core-js#ecmascript-math)
+- {{jsxref("Math.acosh()")}}
+- {{jsxref("Math.asinh()")}}
+- {{jsxref("Math.atanh()")}}
+- {{jsxref("Math.sinh()")}}
+- {{jsxref("Math.tanh()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/math/e/index.md b/files/ko/web/javascript/reference/global_objects/math/e/index.md
index 79280d323ed466..f328a096161021 100644
--- a/files/ko/web/javascript/reference/global_objects/math/e/index.md
+++ b/files/ko/web/javascript/reference/global_objects/math/e/index.md
@@ -1,19 +1,29 @@
 ---
 title: Math.E
 slug: Web/JavaScript/Reference/Global_Objects/Math/E
+l10n:
+  sourceCommit: 761b9047d78876cbd153be811efb1aa77b419877
 ---
 
 {{JSRef}}
 
-**`Math.E`** 속성은 자연로그의 밑 값 e를 나타내며 약 2.718의 값을 가집니다.
+**`Math.E`** 정적 데이터 속성은 오일러 수를 의미하며, 자연로그의 밑 값 e를 나타내며 약 2.718의 값을 가집니다.
 
-<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math>
+{{EmbedInteractiveExample("pages/js/math-e.html")}}
 
-{{EmbedInteractiveExample("pages/js/math-e.html")}}{{js_property_attributes(0, 0, 0)}}
+## 값
+
+<!-- prettier-ignore-start -->
+<math display="block">
+  <semantics><mrow><mi>𝙼𝚊𝚝𝚑.𝙴</mi><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{Math.E} = e \approx 2.718</annotation></semantics>
+</math>
+<!-- prettier-ignore-end -->
+
+{{js_property_attributes(0, 0, 0)}}
 
 ## 설명
 
-`E`는 `Math`의 정적 속성이므로, 사용자가 생성한 `Math` 객체의 속성으로 접근할 수 없고 항상 `Math.E`를 사용해야 합니다. (`Math`는 생성자가 아닙니다)
+`E`는 `Math`의 정적 속성이므로, 생성한 `Math` 객체(`Math`는 생성자가 아닙니다)의 속성 대신 항상 `Math.E`를 사용해야 합니다.
 
 ## 예제
 
@@ -29,7 +39,7 @@ function getNapier() {
 getNapier(); // 2.718281828459045
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
diff --git a/files/ko/web/javascript/reference/global_objects/math/f16round/index.md b/files/ko/web/javascript/reference/global_objects/math/f16round/index.md
new file mode 100644
index 00000000000000..293c25a39a61b2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/f16round/index.md
@@ -0,0 +1,71 @@
+---
+title: Math.f16round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/f16round
+l10n:
+  sourceCommit: fb442649a7e91a177a582a3e9c6e1a95a9e8dda5
+---
+
+{{JSRef}}
+
+**`Math.f16round()`** 정적 메서드는 숫자의 가장 가까운 [16비트 반정밀도 부동소수점](https://en.wikipedia.org/wiki/Half-precision_floating-point_format) 표현을 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/math-f16round.html")}}
+
+## 구문
+
+```js-nolint
+Math.f16round(doubleFloat)
+```
+
+### 매개변수
+
+- `doubleFloat`
+  - : 숫자.
+
+### 반환 값
+
+`doubleFloat`의 가장 가까운 [16비트 반정밀도](https://en.wikipedia.org/wiki/Half-precision_floating-point_format) 부동소수점 표현.
+
+## 설명
+
+`Math.f16round`는 {{jsxref("Math.fround()")}}의 16비트 버전입니다. 이는 {{jsxref("Float16Array")}}에서 읽을 때와 같이 float16 숫자와 상호 작용할 때 발생하는 일부 문제점을 해결하기 위한 것입니다. 내부적으로 JavaScript는 여전히 숫자를 64비트 부동소수점으로 취급하지만, 가수의 10번째 비트에서 "짝수로 반올림"을 수행하고 이후의 모든 가수 비트를 `0`으로 설정합니다. 숫자가 16비트 부동소수점의 범위를 벗어나면 {{jsxref("Infinity")}} 또는 `-Infinity`가 반환됩니다.
+
+`f16round()`는 `Math`의 정적 메서드이므로, 생성한 `Math` 객체의 메서드로 사용하는 것이 아니라 항상 `Math.f16round()`로 사용합니다(`Math`는 생성자가 아닙니다).
+
+## 예제
+
+### Math.f16round() 사용하기
+
+숫자 1.5는 이진 숫자 시스템에서 정확하게 표현될 수 있으며, 16비트와 64비트에서 동일합니다.
+
+```js
+Math.f16round(1.5); // 1.5
+Math.f16round(1.5) === 1.5; // true
+```
+
+그러나 숫자 1.337은 이진 숫자 시스템에서 정확하게 표현될 수 없기 때문에 16비트와 64비트에서 다릅니다.
+
+```js
+Math.f16round(1.337); // 1.3369140625
+Math.f16round(1.337) === 1.337; // false
+```
+
+100000은 16비트 부동소수점에 비해 너무 크므로 `Infinity`가 반환됩니다:
+
+```js
+Math.f16round(100000); // Infinity
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`의 `Math.f16round` 폴리필](https://github.com/zloirock/core-js#float16-methods)
+- {{jsxref("Math.fround()")}}
+- {{jsxref("Math.round()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/math/floor/index.md b/files/ko/web/javascript/reference/global_objects/math/floor/index.md
index ddd7cfdfacceae..b6d93afb3a826b 100644
--- a/files/ko/web/javascript/reference/global_objects/math/floor/index.md
+++ b/files/ko/web/javascript/reference/global_objects/math/floor/index.md
@@ -1,18 +1,20 @@
 ---
 title: Math.floor()
 slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+l10n:
+  sourceCommit: 6a0f9553932823cd0c4dcf695d4b4813474964fb
 ---
 
 {{JSRef}}
 
-**`Math.floor()`** 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.
+**`Math.floor()`** 정적 메서드는 언제나 버림 처리하고 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.
 
 {{EmbedInteractiveExample("pages/js/math-floor.html")}}
 
 ## 구문
 
-```js
-Math.floor(x);
+```js-nolint
+Math.floor(x)
 ```
 
 ### 매개변수
@@ -22,100 +24,93 @@ Math.floor(x);
 
 ### 반환 값
 
-주어진 수 이하의 가장 큰 정수.
+`x`와 같거나 작은 정수 중 가장 큰 수. [`-Math.ceil(-x)`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil)와 같은 값입니다.
 
 ## 설명
 
-`floor()`는 `Math`의 정적 메서드이므로, 사용자가 생성한 `Math` 객체의 메서드로 호출할 수 없고 항상 `Math.floor()`를 사용해야 합니다. (`Math`는 생성자가 아닙니다)
-
-> **참고:** `Math.floor(null)`은 {{jsxref("NaN")}} 대신 0을 반환합니다.
+`floor()`는 `Math`의 정적 메서드이므로, 생성한 `Math` 객체(`Math`는 생성자가 아닙니다)의 메서드 보다는 항상 `Math.floor()`를 사용하세요.
 
 ## 예제
 
-### `Math.floor()` 사용하기
+### Math.floor() 사용하기
 
 ```js
-Math.floor(45.95); //  45
-Math.floor(45.05); //  45
-Math.floor(4); //   4
-Math.floor(-45.05); // -46
+Math.floor(-Infinity); // -Infinity
 Math.floor(-45.95); // -46
+Math.floor(-45.05); // -46
+Math.floor(-0); // -0
+Math.floor(0); // 0
+Math.floor(4); // 4
+Math.floor(45.05); // 45
+Math.floor(45.95); // 45
+Math.floor(Infinity); // Infinity
 ```
 
 ### 십진수 조절
 
-```js
-// Closure
-(function () {
-  /**
-   * 십진수 조절
-   *
-   * @param {String}  type  조정 타입.
-   * @param {Number}  value 숫자.
-   * @param {Integer} exp   지수 (10 로그의 조정값).
-   * @returns {Number} 조정값
-   */
-  function decimalAdjust(type, value, exp) {
-    // exp가 undefined 또는 0인 경우...
-    if (typeof exp === "undefined" || +exp === 0) {
-      return Math[type](value);
-    }
-    value = +value;
-    exp = +exp;
-    // 값이 숫자가 아니거나 정수형이 아닌 경우...
-    if (isNaN(value) || !(typeof exp === "number" && exp % 1 === 0)) {
-      return NaN;
-    }
-    // Shift
-    value = value.toString().split("e");
-    value = Math[type](+(value[0] + "e" + (value[1] ? +value[1] - exp : -exp)));
-    // Shift back
-    value = value.toString().split("e");
-    return +(value[0] + "e" + (value[1] ? +value[1] + exp : exp));
-  }
+이 예시에서, 우리는 `Math.floor()`, `Math.ceil()`, 그리고 `Math.round()`를 확장한 메서드인 `decimalAdjust()`를 구현합니다. 세 가지 `Math` 함수가 항상 입력을 정수 단위로 조정하는 반면, `decimalAdjust`는 숫자를 조정해야 하는 소수점 왼쪽의 자릿수를 지정하는 `exp` 매개변수를 받습니다. 예를 들어, `-1`은 소수점 이후 한 자리를 남긴다는 의미입니다 ("× 10<sup>-1</sup>"와 같이). 또한, `type` 매개변수를 통해 조정 방식 - `round`, `floor`, 또는 `ceil` - 을 선택할 수 있습니다.
 
-  // 십진수 round
-  if (!Math.round10) {
-    Math.round10 = function (value, exp) {
-      return decimalAdjust("round", value, exp);
-    };
-  }
-  // 십진수 floor
-  if (!Math.floor10) {
-    Math.floor10 = function (value, exp) {
-      return decimalAdjust("floor", value, exp);
-    };
+이는 숫자에 10의 거듭제곱을 곱한 다음, 결과를 가장 가까운 정수로 반올림하고, 그 다음 10의 거듭제곱으로 나누는 방식으로 작동합니다. 정밀도를 더 잘 유지하기 위해, 이 방법은 Number의 [`toString()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) 메서드를 활용합니다. 이 메서드는 큰 숫자나 작은 숫자를 과학적 표기법(예: `6.02e23`)으로 표현합니다.
+
+```js
+/**
+ * 명시된 자리수의 숫자 조정하기
+ *
+ * @param {"round" | "floor" | "ceil"} type 조정의 유형.
+ * @param {number} value 숫자 값.
+ * @param {number} exp 지수(조정 기준의 10 로그)입니다.
+ * @returns {number} 조정된 값.
+ */
+function decimalAdjust(type, value, exp) {
+  type = String(type);
+  if (!["round", "floor", "ceil"].includes(type)) {
+    throw new TypeError(
+      "The type of decimal adjustment must be one of 'round', 'floor', or 'ceil'.",
+    );
   }
-  // 십진수 ceil
-  if (!Math.ceil10) {
-    Math.ceil10 = function (value, exp) {
-      return decimalAdjust("ceil", value, exp);
-    };
+  exp = Number(exp);
+  value = Number(value);
+  if (exp % 1 !== 0 || Number.isNaN(value)) {
+    return NaN;
+  } else if (exp === 0) {
+    return Math[type](value);
   }
-})();
-
-// Round
-Math.round10(55.55, -1); // 55.6
-Math.round10(55.549, -1); // 55.5
-Math.round10(55, 1); // 60
-Math.round10(54.9, 1); // 50
-Math.round10(-55.55, -1); // -55.5
-Math.round10(-55.551, -1); // -55.6
-Math.round10(-55, 1); // -50
-Math.round10(-55.1, 1); // -60
-// Floor
-Math.floor10(55.59, -1); // 55.5
-Math.floor10(59, 1); // 50
-Math.floor10(-55.51, -1); // -55.6
-Math.floor10(-51, 1); // -60
-// Ceil
-Math.ceil10(55.51, -1); // 55.6
-Math.ceil10(51, 1); // 60
-Math.ceil10(-55.59, -1); // -55.5
-Math.ceil10(-59, 1); // -50
+  const [magnitude, exponent = 0] = value.toString().split("e");
+  const adjustedValue = Math[type](`${magnitude}e${exponent - exp}`);
+  // 뒤로 이동
+  const [newMagnitude, newExponent = 0] = adjustedValue.toString().split("e");
+  return Number(`${newMagnitude}e${+newExponent + exp}`);
+}
+
+// 십진법 반올림
+const round10 = (value, exp) => decimalAdjust("round", value, exp);
+// 십진법 버림
+const floor10 = (value, exp) => decimalAdjust("floor", value, exp);
+// 십진법 올림
+const ceil10 = (value, exp) => decimalAdjust("ceil", value, exp);
+
+// 반올림
+round10(55.55, -1); // 55.6
+round10(55.549, -1); // 55.5
+round10(55, 1); // 60
+round10(54.9, 1); // 50
+round10(-55.55, -1); // -55.5
+round10(-55.551, -1); // -55.6
+round10(-55, 1); // -50
+round10(-55.1, 1); // -60
+// 버립
+floor10(55.59, -1); // 55.5
+floor10(59, 1); // 50
+floor10(-55.51, -1); // -55.6
+floor10(-51, 1); // -60
+// 올림
+ceil10(55.51, -1); // 55.6
+ceil10(51, 1); // 60
+ceil10(-55.59, -1); // -55.5
+ceil10(-59, 1); // -50
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
diff --git a/files/ko/web/javascript/reference/global_objects/math/log/index.md b/files/ko/web/javascript/reference/global_objects/math/log/index.md
index 13a4a5997769fa..55f792a6314014 100644
--- a/files/ko/web/javascript/reference/global_objects/math/log/index.md
+++ b/files/ko/web/javascript/reference/global_objects/math/log/index.md
@@ -1,53 +1,50 @@
 ---
 title: Math.log()
 slug: Web/JavaScript/Reference/Global_Objects/Math/log
+l10n:
+  sourceCommit: 761b9047d78876cbd153be811efb1aa77b419877
 ---
 
 {{JSRef}}
 
-**`Math.log()`** 함수는 자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 의 수를 계산합니다, 이건 다음의
+**`Math.log()`** 정적 메서드는 숫자의 자연 로그(밑이 [e](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/E))를 반환합니다. 즉, 아래와 같습니다.
 
-<math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{고유값} \; y \; \text{같이} \; e^y = x</annotation></semantics></math>
+<!-- prettier-ignore-start -->
+<math display="block">
+  <semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mspace width="0.2777777777777778em"></mspace><mrow><mo lspace="0em" rspace="0.16666666666666666em">𝙼𝚊𝚝𝚑.𝚕𝚘𝚐</mo><mo stretchy="false">(</mo><mi>𝚡</mi><mo stretchy="false">)</mo></mrow><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique&nbsp;</mtext><mi>y</mi><mtext>&nbsp;such that&nbsp;</mtext><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0,\;\mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique } y \text{ such that } e^y = x</annotation></semantics>
+</math>
+<!-- prettier-ignore-end -->
 
-JavaScript **`Math.log()`** 함수는 _ln(x)_ 수학적으로 같습니다.
+{{EmbedInteractiveExample("pages/js/math-log.html")}}
 
-## 문법
+## 구문
 
-```js
-Math.log(x);
+```js-nolint
+Math.log(x)
 ```
 
-### 인자
+### 매개변수
 
 - `x`
-  - : 실수값.
+  - : 0 이상의 수
 
-### 반환값
+### 반환 값
 
-자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 실수값으로 줍니다. 마이너스 실수값, {{jsxref("NaN")}} 계산됩니다.
+`x`의 자연 로그(밑이 [e](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/E)). 만약 `x`가 ±0일 경우 [`-Infinity`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY)을 반환하며, `x < 0` 이라면 {{jsxref("NaN")}}을 반환합니다.
 
 ## 설명
 
-만일 값 `x` 가 마이너스라면, 항상 다음값이 계산됩니다 {{jsxref("NaN")}}.
+`log()`는 `Math`의 정적 메서드이기 때문에, 항상 `Math.log()`로 사용합니다. 생성한 `Math` 객체의 메서드로 사용하지 않습니다 (`Math`는 생성자가 아닙니다).
 
-왜그렇냐면 `Math` 의 log() 가 정적 메서드이기 때문,에 매번 다음처럼 `Math.log()` 써야합니다 (생성자로 초기화된 `Math` 개체가 아니기 때문입니다).
+2나 10의 자연 로그가 필요하다면, {{jsxref("Math.LN2")}}나 {{jsxref("Math.LN10")}} 상수를 사용하세요. 밑이 2나 10인 로그가 필요하다면, {{jsxref("Math.log2()")}} 혹은 {{jsxref("Math.log10()")}}을 사용하세요. 다른 밑의 로그가 필요하다면, 아래 예시처럼 `Math.log(x) / Math.log(otherBase)`를 사용하세요. 이 경우 `1 / Math.log(otherBase)`를 미리 계산해 두는 것이 좋습니다. `Math.log(x) * constant` 곱셈이 훨씬 더 빠르기 때문입니다.
 
-자연로그 2 나 10, 상수로쓸때 {{jsxref("Math.LN2")}} or {{jsxref("Math.LN10")}} . 로가리즘 기초값 2 나 10, 쓸때는 {{jsxref("Math.log2()")}} 혹은 {{jsxref("Math.log10()")}} . 로가리즘 다른 기초값은 Math.log(x) / Math.log(기초값) 처럼 예제참고; 미리계산하여 1 / Math.log(기초값) 할 수 있습니다.
+1에 매우 가까운 양수의 경우 정밀도 손실이 발생할 수 있어 자연 로그의 정확도가 떨어질 수 있습니다. 이런 경우에는 {{jsxref("Math.log1p")}}를 대신 사용하는 것이 좋습니다.
 
 ## 예제
 
-### `Math.log() 사용`
-
-```js
-Math.log(-1); // NaN, 정의범위 초과
-Math.log(0); // -Infinity, 무한
-Math.log(1); // 0
-Math.log(10); // 2.302585092994046
-```
-
-### `Math.log()` 다른 기초값 사용
+### Math.log() 사용하기
 
-이 함수는 로가리즘 `y 에 대한것으로` 기초값 `x` (ie. <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>): 입니다
+다음 함수는 밑 `x`의 `y`의 로그를 반환합니다. (예: <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>)
 
 ```js
 function getBaseLog(x, y) {
@@ -55,9 +52,9 @@ function getBaseLog(x, y) {
 }
 ```
 
-다음을 실행하면 `getBaseLog(10, 1000)` 다음 `2.9999999999999996 계산되는데` 적당히 반올림하니다, 거의 3 에 가깝습니다.
+`getBaseLog(10, 1000)`을 실행하면 `2.9999999999999996`을 반환합니다. 이는 부동 소수점 반올림때문인데, 실제 답인 3과 매우 근접합니다.
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
diff --git a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.md b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.md
index 4cb0e53224d284..06b2a874227923 100644
--- a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.md
+++ b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.md
@@ -1,13 +1,23 @@
 ---
 title: Number.MAX_SAFE_INTEGER
 slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+l10n:
+  sourceCommit: fcd80ee4c8477b6f73553bfada841781cf74cf46
 ---
 
 {{JSRef}}
 
-**`Number.MAX_SAFE_INTEGER`** 상수는 JavaScript에서 안전한 최대 정수값을 나타냅니다. (`2^53 - 1`).
+**`Number.MAX_SAFE_INTEGER`** 정적 데이터 속성은 JavaScript의 최대 안전 정수 값(2<sup>53</sup> – 1)을 나타냅니다.
 
-{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}{{js_property_attributes(0, 0, 0)}}
+더 큰 정수는 {{jsxref("BigInt")}}를 고려해보시기 바랍니다.
+
+{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}
+
+## 값
+
+`9007199254740991` (9,007,199,254,740,991, or \~9천 조).
+
+{{js_property_attributes(0, 0, 0)}}
 
 ## 설명
 
@@ -17,23 +27,27 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
 
 `MAX_SAFE_INTEGER`는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 `Number.MAX_SAFE_INTEGER` 형식으로 사용해야 합니다.
 
+[배정밀도 부동 소수점 형식](https://en.wikipedia.org/wiki/Double_precision_floating-point_format)은 [가수부](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#number_encoding)를 표현하기 위해 오직 52비트만 사용할 수 있습니다. 그래서 -(2<sup>53</sup> – 1) 부터 2<sup>53</sup> – 1 까지의 정수만 안전하게 표현할 수 있습니다. 이 문맥에서 "안전"이라는 말은 정수를 정확하게 표현하고 이 정수들을 올바르게 비교할 수 있음을 의미합니다. 예를 들어 `Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2`는 true로 평가되겠지만 수학적으로는 틀렸습니다. 보다 자세한 정보는 {{jsxref("Number.isSafeInteger()")}}를 참고하시기 바랍니다.
+
+{{jsxref("Number")}}는 `MAX_SAFE_INTEGER`는 정적 속성이기 때문에 숫자 값의 속성보다는 언제나 `Number.MAX_SAFE_INTEGER` 형태로 사용하세요.
+
 ## 예제
 
+### MAX_SAFE_INTEGER의 반환 값
+
 ```js
 Number.MAX_SAFE_INTEGER; // 9007199254740991
-Number.MAX_SAFE_INTEGER * Number.EPSILON; // 2 because in floating points, the value is actually the decimal trailing "1"
-// except for in subnormal precision cases such as zero
 ```
 
-## 폴리필
+### MAX_SAFE_INTEGER와 EPSILON의 관계
+
+{{jsxref("Number.EPSILON")}}는 2<sup>-52</sup>인데 반해 `MAX_SAFE_INTEGER`는 2<sup>53</sup> – 1 입니다. 두 값은 모두 53비트(가장 높은 비트는 언제나 1)인 가수부의 너비에서 파생됩니다. 이를 곱하면 2에 매우 가깝지만 같지는 않은 값이 나옵니다.
 
 ```js
-if (!Number.MAX_SAFE_INTEGER) {
-  Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1; // 9007199254740991
-}
+Number.MAX_SAFE_INTEGER * Number.EPSILON; // 1.9999999999999998
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -43,6 +57,7 @@ if (!Number.MAX_SAFE_INTEGER) {
 
 ## 같이 보기
 
+- [`core-js`에서의 `Number.MAX_SAFE_INTEGER` 폴리필](https://github.com/zloirock/core-js#ecmascript-number)
 - {{jsxref("Number.MIN_SAFE_INTEGER")}}
 - {{jsxref("Number.isSafeInteger()")}}
 - {{jsxref("BigInt")}}
diff --git a/files/ko/web/javascript/reference/global_objects/object/__lookupsetter__/index.md b/files/ko/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
new file mode 100644
index 00000000000000..a93da800b3709e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
@@ -0,0 +1,105 @@
+---
+title: Object.prototype.__lookupSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+l10n:
+  sourceCommit: fd326b574aadcd78924a5a223f15e289e45a7f1d
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** 이 기능은 {{jsxref("Object.getOwnPropertyDescriptor()")}} API 사용을 선호하기 때문에 더 이상 사용되지 않습니다. 이 메서드의 동작은 웹 호환성을 위해서만 명시되며 모든 플랫폼에서 구현할 필요는 없습니다. 모든 곳에서 작동하지 않을 수도 있습니다.
+
+{{jsxref("Object")}} 인스턴스의 **`__lookupSetter__()`** 메서드는 지정된 속성에 설정자로 바인딩된 함수를 반환합니다.
+
+## 구문
+
+```js-nolint
+__lookupSetter__(prop)
+```
+
+### 매개변수
+
+- `prop`
+  - : 반환되어야 할 설정자 속성의 이름이 포함된 문자열.
+
+### 반환 값
+
+지정된 속성에 설정자로 바인딩된 함수를 반환합니다. 해당 속성을 찾을 수 없거나 해당 속성이 [데이터 속성](/ko/docs/Web/JavaScript/Data_structures#data_property)이면 `undefined`를 반환합니다.
+
+## 설명
+
+`Object.prototype`을 상속받는 모든 객체들(즉, [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)를 제외한 모든 객체)은 `__lookupSetter__()` 메서드를 상속받습니다. 객체의 속성에 대해 [설정자](/ko/docs/Web/JavaScript/Reference/Functions/get)가 정의되어 있다면, 해당 속성을 통해 설정자 함수를 직접 참조하는 것은 불가능합니다. 왜냐하면 그 속성은 값이 설정될 때만 함수를 호출하기 때문입니다. `__lookupSetter__()`는 설정자 함수에 대한 참조를 얻는 데 사용될 수 있습니다.
+
+`__lookupSetter__()` 메서드는 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)을 따라 올라가며 지정된 속성을 찾습니다. 프로토타입 체인 상의 어떤 객체가 지정된 [고유 속성](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn)을 가지고 있다면, 해당 속성의 [속성 설명자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) 의 `set` 속성이 반환됩니다. 만약 그 속성이 데이터 속성이라면, `undefined`가 반환됩니다. 전체 프로토타입 체인을 따라 속성을 찾지 못한 경우에도 `undefined`가 반환됩니다.
+
+`__lookupSetter__()` 메서드는 명세서에서 "규범적 선택사항(normative optional)"으로 정의되어 있습니다. 이는 모든 구현체가 이 메서드를 반드시 구현할 필요는 없다는 의미입니다. 그러나 모든 주요 브라우저들이 이를 구현하고 있으며, 지속적인 사용으로 인해 앞으로 제거될 가능성은 낮습니다. 만약 브라우저가 `__lookupSetter__()`를 구현한다면, [`__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__), [`__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__), 그리고 [`__defineSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) 메서드도 함께 구현해야 합니다.
+
+## 예제
+
+### \_\_lookupSetter\_\_() 사용하기
+
+```js
+const obj = {
+  set foo(value) {
+    this.bar = value;
+  },
+};
+
+obj.__lookupSetter__("foo");
+// [Function: set foo]
+```
+
+### 표준 방법으로 속성의 설정자 검색하기
+
+속성의 설정자를 찾을 때는 {{jsxref("Object.getOwnPropertyDescriptor()")}} API를 사용해야 합니다. `__lookupSetter__()`와 비교하자면, 이 메서드는 [심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 속성도 찾을 수 있습니다. `Object.getOwnPropertyDescriptor()` 메서드는 또한 [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)에서도 작동합니다. 이러한 객체들은 `Object.prototype`을 상속받지 않아 `__lookupSetter__()` 메서드를 가지고 있지 않습니다. 만약 `__lookupSetter__()`의 프로토타입 체인을 따라 올라가는 동작이 중요하다면, {{jsxref("Object.getPrototypeOf()")}}를 사용하여 직접 구현할 수 있습니다.
+
+```js
+const obj = {
+  set foo(value) {
+    this.bar = value;
+  },
+};
+
+Object.getOwnPropertyDescriptor(obj, "foo").set;
+// [Function: set foo]
+```
+
+```js
+const obj2 = {
+  __proto__: {
+    set foo(value) {
+      this.bar = value;
+    },
+  },
+};
+
+function findSetter(obj, prop) {
+  while (obj) {
+    const desc = Object.getOwnPropertyDescriptor(obj, prop);
+    if (desc) {
+      return desc.set;
+    }
+    obj = Object.getPrototypeOf(obj);
+  }
+}
+
+console.log(findSetter(obj2, "foo")); // [Function: set foo]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `Object.prototype.__lookupSetter__` 폴리필](https://github.com/zloirock/core-js#ecmascript-object)
+- [`Object.prototype.__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__)
+- {{jsxref("Functions/set", "set")}}
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
+- [`Object.prototype.__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__)
+- [`Object.prototype.__defineSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__)
+- [JS 안내서: 접근자와 설정자 정의하기](/ko/docs/Web/JavaScript/Guide/Working_with_objects#접근자와_설정자_정의하기)
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/n/index.md b/files/ko/web/javascript/reference/global_objects/regexp/n/index.md
new file mode 100644
index 00000000000000..62d84e51e4d596
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/n/index.md
@@ -0,0 +1,52 @@
+---
+title: RegExp.$1, …, RegExp.$9
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/n
+l10n:
+  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** 마지막 일치 상태를 전역적으로 노출하는 모든 `RegExp` 정적 속성은 더 이상 사용되지 않습니다. 자세한 내용은 [더 이상 사용되지 않는 RegExp 기능](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)을 참고하세요.
+
+**`RegExp.$1, …, RegExp.$9`** 정적 접근자 속성은 괄호 안의 하위 문자열 일치 항목을 반환합니다.
+
+## 설명
+
+`$1`–`$9`는 {{jsxref("RegExp")}}의 정적 속성이기 때문에, 생성한 `RegExp` 객체의 속성으로 사용하는 것보다는 항상`RegExp.$1`, `RegExp.$2` 등으로 사용해야 합니다.
+
+`$1, …, $9`의 값은 `RegExp`(`RegExp` 하위 클래스 제외) 인스턴스가 일치에 성공할 때마다 갱신됩니다. 일치하는 항목이 없거나 마지막 일치가 대응되는 캡쳐 그룹이 없으면 각각의 속성은 빈 문자열입니다. 각각의 속성의 설정 접근자는 `undefined`이므로 이 속성을 직접 변경할 수 없습니다.
+
+괄호로 묶을 수 있는 하위 문자열의 개수는 제한이 없지만 `RegExp` 객체는 처음 9개만 보유할 수 있습니다. 반환된 배열의 인덱스를 통해 괄호로 묶인 모든 하위 문자열에 접근할 수 있습니다.
+
+`$1, …, $9`는 {{jsxref("String.prototype.replace()")}}의 대체 문자열에도 사용할 수 있지만, 이는 `RegExp.$n` 레거시 속성과는 관련이 없습니다.
+
+## 예제
+
+### RegExp.prototype.test()와 함께 $n 사용하기
+
+아래 스크립트는 일반적인 문자열 내에서 숫자를 잡아내기 위해 {{jsxref("RegExp.prototype.test()")}} 메서드를 사용합니다.
+
+```js
+const str = "Test 24";
+const number = /(\d+)/.test(str) ? RegExp.$1 : "0";
+number; // "24"
+```
+
+`re.test(str)` 호출과 `RegExp.$n` 속성 사이에 다른 정규식을 사용하는 작업은 부작용이 있을 수 있습니다. 이러한 특수 속성 접근은 즉시 수행해야 하며, 그렇지 않으면 예상치 못한 결과가 발생할 수 있다는 점을 주의하시기 바랍니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp/input", "RegExp.input ($_)")}}
+- {{jsxref("RegExp/lastMatch", "RegExp.lastMatch ($&amp;)")}}
+- {{jsxref("RegExp/lastParen", "RegExp.lastParen ($+)")}}
+- {{jsxref("RegExp/leftContext", "RegExp.leftContext ($`)")}}
+- {{jsxref("RegExp/rightContext", "RegExp.rightContext ($')")}}
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/rightcontext/index.md b/files/ko/web/javascript/reference/global_objects/regexp/rightcontext/index.md
new file mode 100644
index 00000000000000..52cd14f90031a2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/rightcontext/index.md
@@ -0,0 +1,49 @@
+---
+title: RegExp.rightContext ($')
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
+l10n:
+  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** 마지막 일치 상태를 전역적으로 노출하는 모든 `RegExp` 정적 속성은 더 이상 사용되지 않습니다. 자세한 내용은 [더 이상 사용되지 않는 RegExp 기능](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)을 참고하세요.
+
+**`RegExp.rightContext`** 정적 접근자 속성은 가장 최근에 일치한 하위 문자열을 반환합니다. `RegExp["$'"]`는 이 속성의 별칭입니다.
+
+## 설명
+
+`rightContext`는 {{jsxref("RegExp")}}의 정적 속성이기 때문에, 생성한 `RegExp` 객체의 속성으로 사용하는 것보다는 항상 `RegExp.rightContext` 또는 ``RegExp["$'"]`로 사용해야 합니다.
+
+`rightContext`의 값은 `RegExp`(`RegExp` 하위 클래스 제외) 인스턴스가 일치에 성공할 때마다 갱신됩니다. 일치하는 항목이 없으면 `rightContext`는 빈 문자열입니다. `rightContext`의 설정 접근자는 `undefined`이므로 이 속성을 직접 변경할 수 없습니다.
+
+`'`는 유효한 식별자 부분이 아니므로 점 속성 접근자(`RegExp.$'`)와 함께 약칭을 사용할 수 없으며 이로 인해 {{jsxref("SyntaxError")}}가 발생합니다. 대신 [대괄호 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors)을 사용하시기 바랍니다.
+
+`$'`는 {{jsxref("String.prototype.replace()")}}의 대체 문자열에도 사용할 수 있지만, 이는 `RegExp["$'"]` 레거시 속성과는 관련이 없습니다.
+
+## 예제
+
+### rightContext와 $' 사용하기
+
+```js
+const re = /hello/g;
+re.test("hello world!");
+RegExp.rightContext; // " world!"
+RegExp["$'"]; // " world!"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp/input", "RegExp.input ($_)")}}
+- {{jsxref("RegExp/lastMatch", "RegExp.lastMatch ($&amp;)")}}
+- {{jsxref("RegExp/lastParen", "RegExp.lastParen ($+)")}}
+- {{jsxref("RegExp/leftContext", "RegExp.leftContext ($`)")}}
+- {{jsxref("RegExp/n", "RegExp.$1, …, RegExp.$9")}}
diff --git a/files/ko/web/javascript/reference/global_objects/set/intersection/index.md b/files/ko/web/javascript/reference/global_objects/set/intersection/index.md
index 2c754ad2148e93..4e0d7d4fd650f5 100644
--- a/files/ko/web/javascript/reference/global_objects/set/intersection/index.md
+++ b/files/ko/web/javascript/reference/global_objects/set/intersection/index.md
@@ -7,7 +7,7 @@ l10n:
 
 {{JSRef}}
 
-{{jsxref("Set")}} 인스턴스의 **`intersection()`** 메서드는 집합을 받아서 이 집합과 주어진 집합의 요소를 모두 포함하는 새 집합을 반환합니다.
+{{jsxref("Set")}} 인스턴스의 **`intersection()`** 메서드는 집합을 받아서 이 집합과 주어진 집합의 공통 요소를 포함하는 새 집합을 반환합니다.
 
 ## 구문
 
@@ -22,7 +22,7 @@ intersection(other)
 
 ### 반환 값
 
-이 집합과 `other` 집합 모두 있는 요소를 포함하는 새 {{jsxref("Set")}} 객체입니다.
+이 집합과 `other` 집합에 공통으로 있는 요소를 포함하는 새 {{jsxref("Set")}} 객체입니다.
 
 ## 설명
 
diff --git a/files/ko/web/javascript/reference/global_objects/set/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/set/symbol.iterator/index.md
similarity index 94%
rename from files/ko/web/javascript/reference/global_objects/set/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/set/symbol.iterator/index.md
index 5335caeceefb55..90d435d49db244 100644
--- a/files/ko/web/javascript/reference/global_objects/set/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/set/symbol.iterator/index.md
@@ -1,6 +1,7 @@
 ---
 title: Set.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
 l10n:
   sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/string/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/string/symbol.iterator/index.md
similarity index 95%
rename from files/ko/web/javascript/reference/global_objects/string/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/string/symbol.iterator/index.md
index 49fbf95c37e1fe..4e63bfb5f1bad0 100644
--- a/files/ko/web/javascript/reference/global_objects/string/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/symbol.iterator/index.md
@@ -1,6 +1,7 @@
 ---
 title: String.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
 l10n:
   sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md b/files/ko/web/javascript/reference/global_objects/symbol/symbol.toprimitive/index.md
similarity index 88%
rename from files/ko/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md
rename to files/ko/web/javascript/reference/global_objects/symbol/symbol.toprimitive/index.md
index 816e90bcfc832a..67ccfe7aaff2e1 100644
--- a/files/ko/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md
+++ b/files/ko/web/javascript/reference/global_objects/symbol/symbol.toprimitive/index.md
@@ -1,6 +1,7 @@
 ---
 title: Symbol.prototype[@@toPrimitive]
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol.toPrimitive
+original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
 l10n:
   sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20
 ---
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/copywithin/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/copywithin/index.md
new file mode 100644
index 00000000000000..49b744a76ec144
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/copywithin/index.md
@@ -0,0 +1,64 @@
+---
+title: TypedArray.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin
+l10n:
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
+---
+
+{{JSRef}}
+
+{{jsxref("TypedArray")}} 인스턴스의 **`copyWithin()`** 메서드는 이 형식화 배열의 일부를 같은 형식화 배열의 다른 장소에 얕은 복사를 수행하며 배열의 길이를 수정하지 않고 해당 배열을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.copyWithin()")}}와 같은 알고리즘을 가집니다.
+
+{{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}}
+
+## 구문
+
+```js-nolint
+copyWithin(target, start)
+copyWithin(target, start, end)
+```
+
+### 매개변수
+
+- `target`
+  - : 시퀀스를 복사할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환). 이는 `start`에 있는 요소가 복사될 위치에 해당하며, `start`과 `end` 사이의 모든 요소는 후속 인덱스에 복사됩니다.
+- `start`
+  - : 요소 복사를 시작할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다.
+- `end` {{optional_inline}}
+  - : 요소 복사를 끝낼 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다. `copyWithin()`은 `end`를 포함하지 않고 `end`전 까지 복사합니다. `copyWithin()`는 여기까지 복사하지만 `end`를 포함하지는 않습니다.
+
+### 반환 값
+
+수정된 형식화 배열
+
+## 설명
+
+보다 자세한 설명은 {{jsxref("Array.prototype.copyWithin()")}}을 참고하시기 바랍니다. 이 메서드는 범용 메서드가 아니며 오직 형식화 배열 인스턴스에서만 호출할 수 있습니다.
+
+## 예제
+
+### copyWithin() 사용하기
+
+```js
+const buffer = new ArrayBuffer(8);
+const uint8 = new Uint8Array(buffer);
+uint8.set([1, 2, 3]);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+uint8.copyWithin(3, 0, 3);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `TypedArray.prototype.copyWithin` 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("TypedArray")}}
+- {{jsxref("Array.prototype.copyWithin()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/findlastindex/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
new file mode 100644
index 00000000000000..48919f75a5d03e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
@@ -0,0 +1,87 @@
+---
+title: TypedArray.prototype.findLastIndex()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findLastIndex
+l10n:
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
+---
+
+{{JSRef}}
+
+{{jsxref("TypedArray")}} 인스턴스의 **`findLastIndex()`** 메서드는 배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 배열의 첫번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.findLastIndex()")}}와 알고리즘이 같습니다.
+
+{{EmbedInteractiveExample("pages/js/typedarray-findlastindex.html")}}
+
+## 구문
+
+```js-nolint
+findLastIndex(callbackFn)
+findLastIndex(callbackFn, thisArg)
+```
+
+### 매개변수
+
+- `callbackFn`
+  - : 형식화 배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환하고, 그렇지 않으면 [거짓 같은](/ko/docs/Glossary/Falsy) 값을 반환해야 합니다. 함수는 다음 인수를 사용하여 호출됩니다.
+    - `element`
+      - : 형식화 배열에서 현재 처리되고 있는 요소.
+    - `index`
+      - : 형식화 배열에서 현재 처리되고 있는 요소의 인덱스.
+    - `array`
+      - : `findLastIndex()`가 호출된 형식화 배열.
+- `thisArg` {{optional_inline}}
+  - : `callbackFn`을 실행할 때 `this`로 사용할 값입니다. [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)를 참고하세요.
+
+### 반환 값
+
+제공된 테스트 함수를 만족하는 형식화 배열의 마지막(가장 높은 인덱스) 요소의 인덱스. 일치하는 요소를 찾을 수 없으면 `-1`을 반환합니다.
+
+## 설명
+
+보다 자세한 설명은 {{jsxref("Array.prototype.findLastIndex()")}}을 참고하시기 바랍니다. 이 메서드는 범용 메서드가 아니며 오직 형식화 배열 인스턴스에서만 호출할 수 있습니다.
+
+## 예제
+
+### 형식화 배열에서 마지막 소수 찾기
+
+다음 예제는 형식화 배열의 마지막 요소 중 소수인 요소를 반환하거나, 소수가 없는 경우 `-1`을 반환합니다.
+
+```js
+function isPrime(element) {
+  if (element % 2 === 0 || element < 2) {
+    return false;
+  }
+  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
+    if (element % factor === 0) {
+      return false;
+    }
+  }
+  return true;
+}
+
+let uint8 = new Uint8Array([4, 6, 8, 12]);
+console.log(uint8.findLastIndex(isPrime));
+// -1 (배열에 소수 없음)
+uint8 = new Uint8Array([4, 5, 7, 8, 9, 11, 12]);
+console.log(uint8.findLastIndex(isPrime));
+// 5
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `TypedArray.prototype.findLastIndex` 폴리필](https://github.com/zloirock/core-js#array-find-from-last)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.find()")}}
+- {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.findLast()")}}
+- {{jsxref("TypedArray.prototype.indexOf()")}}
+- {{jsxref("TypedArray.prototype.lastIndexOf()")}}
+- {{jsxref("Array.prototype.findLastIndex()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/symbol.iterator/index.md
similarity index 88%
rename from files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/typedarray/symbol.iterator/index.md
index ecede1a85a657c..f9fd4e1a4de8ae 100644
--- a/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/symbol.iterator/index.md
@@ -1,6 +1,7 @@
 ---
 title: TypedArray.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
 ---
 
 {{JSRef}}
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/@@species/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/symbol.species/index.md
similarity index 92%
rename from files/ko/web/javascript/reference/global_objects/typedarray/@@species/index.md
rename to files/ko/web/javascript/reference/global_objects/typedarray/symbol.species/index.md
index ff67a28735b3cb..8c46d7545ff407 100644
--- a/files/ko/web/javascript/reference/global_objects/typedarray/@@species/index.md
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/symbol.species/index.md
@@ -1,6 +1,7 @@
 ---
 title: get TypedArray[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.species
+original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
 ---
 
 {{JSRef}}
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index c9d08f82da77bc..2843c23a8f7df7 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -397,7 +397,6 @@
 /ru/docs/Web/API/Element/error_event	/ru/docs/Web/API/HTMLElement/error_event
 /ru/docs/Web/API/Event/Comparison_of_Event_Targets	/ru/docs/Learn/JavaScript/Building_blocks/Event_bubbling
 /ru/docs/Web/API/EventTarget.addEventListener	/ru/docs/Web/API/EventTarget/addEventListener
-/ru/docs/Web/API/Fetch_API/Cross-global_fetch_usage	/ru/docs/conflicting/Web/API/Fetch_API/Using_Fetch
 /ru/docs/Web/API/File/Using_files_from_web_applications	/ru/docs/Web/API/File_API/Using_files_from_web_applications
 /ru/docs/Web/API/FileReader/onabort	/ru/docs/Web/API/FileReader/abort_event
 /ru/docs/Web/API/File_and_Directory_Entries_API/Введение	/ru/docs/Web/API/File_and_Directory_Entries_API/Introduction
@@ -755,10 +754,8 @@
 /ru/docs/Web/JavaScript/Reference/Classes/Приватные_поля_класса	/ru/docs/Web/JavaScript/Reference/Classes/Private_properties
 /ru/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield	/ru/docs/Web/JavaScript/Reference/Errors/Bad_return
 /ru/docs/Web/JavaScript/Reference/Errors/Deprecated_octal	/ru/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal
-/ru/docs/Web/JavaScript/Reference/Errors/Equal_as_assign	/ru/docs/orphaned/Web/JavaScript/Reference/Errors/Equal_as_assign
 /ru/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement	/ru/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_token
 /ru/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint	/ru/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point
-/ru/docs/Web/JavaScript/Reference/Errors/Undefined_prop	/ru/docs/orphaned/Web/JavaScript/Reference/Errors/Undefined_prop
 /ru/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal	/ru/docs/Web/JavaScript/Reference/Errors/String_literal_EOL
 /ru/docs/Web/JavaScript/Reference/Functions/Определиние_методов	/ru/docs/Web/JavaScript/Reference/Functions/Method_definitions
 /ru/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator	/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator
@@ -849,7 +846,7 @@
 /ru/docs/Web/Performance/Основы	/ru/docs/Web/Performance/Fundamentals
 /ru/docs/Web/Performance/Производительность_анимации	/ru/docs/Web/Performance/Animation_performance_and_frame_rate
 /ru/docs/Web/Progressive_web_apps/Installable_PWAs	/ru/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
-/ru/docs/Web/SVG/Attribute/Core	/ru/docs/conflicting/Web/SVG/Attribute
+/ru/docs/Web/SVG/Attribute/Core	/ru/docs/Web/SVG/Attribute
 /ru/docs/Web/SVG/Tutorial/Базовые_Преобразования	/ru/docs/Web/SVG/Tutorial/Basic_Transformations
 /ru/docs/Web/SVG/Tutorial/Введение	/ru/docs/Web/SVG/Tutorial/Introduction
 /ru/docs/Web/SVG/Tutorial/Основные_Фигуры	/ru/docs/Web/SVG/Tutorial/Basic_Shapes
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index dbbd73161ce5e9..599e6d21b3a1fa 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -15946,28 +15946,8 @@
     "modified": "2019-06-12T07:08:20.267Z",
     "contributors": ["deadblackclover", "vkorniiko"]
   },
-  "conflicting/Glossary/CORS-safelisted_request_header": {
-    "modified": "2019-03-18T21:32:57.580Z",
-    "contributors": ["Skinny-Hunter"]
-  },
-  "conflicting/Web/API/Fetch_API/Using_Fetch": {
-    "modified": "2019-03-18T21:00:16.677Z",
-    "contributors": ["Akh-rman", "qqwweeaassdd"]
-  },
   "conflicting/Web/JavaScript/Reference/Errors/Unexpected_token": {
     "modified": "2020-03-12T19:46:03.538Z",
     "contributors": ["KTatyana", "SedovDP", "Sparks"]
-  },
-  "conflicting/Web/SVG/Attribute": {
-    "modified": "2020-10-15T22:34:58.576Z",
-    "contributors": ["osipov_s"]
-  },
-  "orphaned/Web/JavaScript/Reference/Errors/Equal_as_assign": {
-    "modified": "2020-03-12T19:48:37.445Z",
-    "contributors": ["MakarovDs777"]
-  },
-  "orphaned/Web/JavaScript/Reference/Errors/Undefined_prop": {
-    "modified": "2020-03-12T19:47:58.221Z",
-    "contributors": ["KTatyana"]
   }
 }
diff --git a/files/ru/conflicting/glossary/cors-safelisted_request_header/index.md b/files/ru/conflicting/glossary/cors-safelisted_request_header/index.md
deleted file mode 100644
index 89e75b2f708839..00000000000000
--- a/files/ru/conflicting/glossary/cors-safelisted_request_header/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Простой заголовок
-slug: conflicting/Glossary/CORS-safelisted_request_header
-original_slug: Glossary/Simple_header
----
-
-{{GlossarySidebar}}
-
-Старое название {{Glossary("CORS-safelisted request header", "CORS-безопасного заголовка запроса")}}.
diff --git a/files/ru/conflicting/glossary/cors-safelisted_response_header/index.md b/files/ru/conflicting/glossary/cors-safelisted_response_header/index.md
deleted file mode 100644
index 72c771e90d13c1..00000000000000
--- a/files/ru/conflicting/glossary/cors-safelisted_response_header/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Простой заголовок ответа
-slug: conflicting/Glossary/CORS-safelisted_response_header
-original_slug: Glossary/Simple_response_header
----
-
-{{GlossarySidebar}}
-
-Старое название {{Glossary("CORS-safelisted response header", "CORS-безопасного заголовка ответа")}}.
diff --git a/files/ru/conflicting/web/api/fetch_api/using_fetch/index.md b/files/ru/conflicting/web/api/fetch_api/using_fetch/index.md
deleted file mode 100644
index ada39c9256e2ee..00000000000000
--- a/files/ru/conflicting/web/api/fetch_api/using_fetch/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Cross-global fetch usage
-slug: conflicting/Web/API/Fetch_API/Using_Fetch
-original_slug: Web/API/Fetch_API/Cross-global_fetch_usage
----
-
-{{DefaultAPISidebar("Fetch API")}}
-
-Эта статья объясняет крайний случай, который случается с fetch (и потенциально с другими API, предоставляющими такой же способ получения данных). Когда cross-origin fetch, включающий относительный URL, инициируется из {{htmlelement("iframe")}}, относительный URL может использовать текущий глобальный location вместо того что задаётся в iframe.
-
-## Крайний случай
-
-Многие сайты никогда не столкнутся с таким поведением. Чтобы увидеть его:
-
-- Вам понадобится same-origin iframe
-- Этот same-origin iframe должен располагаться с другим base URL
-- Вы должны использовать функцию fetch cross-global, т. е. `frame.contentWindow.fetch()`
-- Переданный в fetch URL должен быть относительным
-
-## Проблема
-
-В прошлом мы разрешали относительный URL адрес вместо текущего глобального, для примера:
-
-```js
-let absolute = new URL(relative, window.location.href);
-```
-
-Это не проблема как таковая. Просто разные API, демонстрирующие такое поведение, делали его несовместимым с поведением, определённым в спецификации, что может привести к проблемам в дальнейшем.
-
-## Решение
-
-В Firefox 60 и далее, Mozilla сопоставляет относительный URL с глобальным, которой принадлежит используемой функции `fetch()` (смотри [Firefox bug 1432272](https://bugzil.la/1432272)). Таким образом в случае описанном выше, он разрешается в зависимости от расположения iframe:
-
-```js
-let absolute = new URL(relative, frame.contentWindow.location.href);
-```
-
-Ведётся много дискуссий о том, как привести новые спецификации в соответствие с этим изменением поведения, для того чтобы уменьшить возможные проблемы в будущем.
diff --git a/files/ru/conflicting/web/svg/attribute/index.md b/files/ru/conflicting/web/svg/attribute/index.md
deleted file mode 100644
index a62ad543019a01..00000000000000
--- a/files/ru/conflicting/web/svg/attribute/index.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Основные атрибуты SVG
-slug: conflicting/Web/SVG/Attribute
-original_slug: Web/SVG/Attribute/Core
----
-
-Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах.
-
-- `id`
-- [`lang`](#attr-lang)
-- [`tabindex`](#attr-tabindex)
-- [`xml:base`](#attr-xml:base)
-- [`xml:lang`](#attr-xml:lang)
-- [`xml:space`](#attr-xml:space)
-
-## Атрибуты
-
-- {{SVGAttr('id')}}
-  - : Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS).
-    _Значение_: Любое строковое значение ID; _Анимируемый_: **Нет**
-- {{SVGAttr('lang')}}
-
-  - : Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определённом в [документе IETF "Tags for Identifying Languages (BCP47)"](https://www.ietf.org/rfc/bcp/bcp47.txt).
-
-    > **Примечание:** SVG2 предоставляет новые `lang` атрибуты. Если атрибуты `lang` и `xml:lang` используются вместе, то `xml:lang` имеет приоритет над `lang`.
-
-    _Значение_: Любой валидный язык ID; _Анимируемый_: **Нет**
-
-- {{SVGAttr('tabindex')}}
-  - : Атрибут SVG `tabindex` позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса.
-    _Тип значения_: [\<integer>](/docs/Web/SVG/Content_type#Integer); _Анимируемый_: **Нет**
-- {{SVGAttr('xml:base')}}
-  - : Указывает базовый IRI, отличный от базового IRI текущего документа.
-    _Тип_: [\<IRI>](/docs/Web/SVG/Content_type#IRI); _Анимируемый_: **Нет**
-- {{SVGAttr('xml:lang')}}
-
-  - : Это универсальный атрибут, разрешённый во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута [lang](/ru/docs/Web/HTML/Global_attributes/lang) в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (`null`) значение атрибута (`xml:lang=""`) для указания неизвестного языка. Вместо этого, используйте `xml:lang="und"`.
-
-    > **Примечание:** SVG2 предоставляет новые `lang` атрибуты. Если атрибуты `lang` и `xml:lang` используются вместе, то `xml:lang` имеет приоритет над `lang`.
-
-    _Значение_: Любой валидный язык ID; _Анимируемый_: **Нет**
-
-- {{SVGAttr('xml:space')}} {{deprecated_inline}}
-
-  - : SVG поддерживает стандартный XML-атрибут `xml:space` для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента.
-
-    > **Примечание:** Вместо атрибута `xml:space` следует использовать CSS-свойство {{cssxref('white-space')}}.
-
-    _Значение_: **`default`** | `preserve`; _Анимируемый_: **Нет**
-
-## Совместимость с браузерами
-
-{{Compat}}
diff --git a/files/ru/glossary/abstraction/index.md b/files/ru/glossary/abstraction/index.md
index 7b972b87b55572..e5e877b4a00724 100644
--- a/files/ru/glossary/abstraction/index.md
+++ b/files/ru/glossary/abstraction/index.md
@@ -1,18 +1,20 @@
 ---
 title: Абстракция
 slug: Glossary/Abstraction
+l10n:
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-Абстракция в {{Glossary("computer programming", "программировании")}} — это способ снизить сложность и повысить эффективность проектирования и реализации программного обеспечения за счёт сокрытия технической сложности за более простым {{Glossary("API")}}.
+Абстракция в {{Glossary("computer programming", "программировании")}} — это способ снизить сложность и обеспечить эффективное проектирование и реализацию сложных программных систем. Техническая сложность систем скрывается за более простыми {{Glossary("API")}}.
 
 ## Преимущества абстракции
 
-- Помогает избежать написания низкоуровневого кода.
-- Упрощает повторное использование кода и позволяет избежать дублирования.
-- Даёт возможность изменять внутреннюю реализацию программы, не затрагивая пользователей.
-- Помогает повысить безопасность приложения или программы, поскольку пользователям доступны только нужные детали.
+- Помогает пользователю избежать написания низкоуровневого кода.
+- Позволяет избежать дублирования кода и повышает возможность повторного использования.
+- Даёт возможность изменять внутреннюю реализацию программы, не затрагивая пользователя.
+- Помогает повысить безопасность приложения или программы, поскольку пользователям доступны только необходимые данные.
 
 ## Пример
 
@@ -25,8 +27,8 @@ class ImplementAbstraction {
   }
 
   display() {
-    console.log("a = " + this.a);
-    console.log("b = " + this.b);
+    console.log(`a = ${this.a}`);
+    console.log(`b = ${this.b}`);
   }
 }
 
@@ -36,3 +38,7 @@ obj.display();
 // a = 10
 // b = 20
 ```
+
+## Смотрите также
+
+- [Абстракция](<https://ru.wikipedia.org/wiki/Абстракция_(информатика)>) в Википедии
diff --git a/files/ru/glossary/cors-safelisted_request_header/index.md b/files/ru/glossary/cors-safelisted_request_header/index.md
index ea15913ced65fc..0db80bf26f8f98 100644
--- a/files/ru/glossary/cors-safelisted_request_header/index.md
+++ b/files/ru/glossary/cors-safelisted_request_header/index.md
@@ -2,7 +2,7 @@
 title: CORS-безопасный заголовок запроса
 slug: Glossary/CORS-safelisted_request_header
 l10n:
-  sourceCommit: fea9eb7420e6d70772144854242c30e421898415
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
@@ -31,6 +31,7 @@ CORS-безопасные заголовки запроса должны соо
 
 ## Смотрите также
 
-- {{Glossary("CORS-safelisted response header", "CORS-безопасный заголовок ответа")}}
-- {{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}
-- {{Glossary("Request header", "Заголовок запроса")}}
+- Связанные термины глоссария:
+  - {{Glossary("CORS-safelisted response header", "CORS-безопасный заголовок ответа")}}
+  - {{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}
+  - {{Glossary("Request header", "Заголовок запроса")}}
diff --git a/files/ru/glossary/cors-safelisted_response_header/index.md b/files/ru/glossary/cors-safelisted_response_header/index.md
index 64646d4cb6d6c5..a9257f8abdb016 100644
--- a/files/ru/glossary/cors-safelisted_response_header/index.md
+++ b/files/ru/glossary/cors-safelisted_response_header/index.md
@@ -2,7 +2,7 @@
 title: CORS-безопасный заголовок ответа
 slug: Glossary/CORS-safelisted_response_header
 l10n:
-  sourceCommit: fea9eb7420e6d70772144854242c30e421898415
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
@@ -38,8 +38,7 @@ Access-Control-Expose-Headers: X-Custom-Header, Content-Encoding
 - [HTTP](/ru/docs/Web/HTTP)
 - [Заголовки HTTP](/ru/docs/Web/HTTP/Headers)
 - {{HTTPHeader("Access-Control-Expose-Headers")}}
-- [Глоссарий](/ru/docs/Glossary)
-
+- Связанные термины глоссария:
   - {{Glossary("CORS")}}
   - {{Glossary("CORS-safelisted_request_header", "CORS-безопасный заголовок запроса")}}
   - {{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}
diff --git a/files/ru/glossary/percent-encoding/index.md b/files/ru/glossary/percent-encoding/index.md
new file mode 100644
index 00000000000000..951bdab46d5134
--- /dev/null
+++ b/files/ru/glossary/percent-encoding/index.md
@@ -0,0 +1,43 @@
+---
+title: Процентное кодирование
+slug: Glossary/Percent-encoding
+l10n:
+  sourceCommit: 6c7cb932f7a0735ec2ac64732c9a947510fd1303
+---
+
+{{GlossarySidebar}}
+
+**Процентное кодирование** — это механизм кодирования 8-битных символов, имеющих определённое значение в контексте {{Glossary("URL", "URL-адресов")}}. Иногда его называют кодированием URL. Кодирование заключается в замене символа на последовательность, состоящую из знака «%», за которым следует шестнадцатеричное представление значения ASCII заменяемого символа.
+
+Специальные символы, требующие кодирования: `':'`, `'/'`, `'?'`, `'#'`, `'['`, `']'`, `'@'`, `'!'`, `'$'`, `'&'`, `"'"`, `'('`, `')'`, `'*'`, `'+'`, `','`, `';'`, `'='`, а также сам символ`'%'`. Другие символы не нуждаются в кодировании, хотя она возможна.
+
+| Символ | Кодировка     |
+| ------ | ------------- |
+| `':'`  | `%3A`         |
+| `'/'`  | `%2F`         |
+| `'?'`  | `%3F`         |
+| `'#'`  | `%23`         |
+| `'['`  | `%5B`         |
+| `']'`  | `%5D`         |
+| `'@'`  | `%40`         |
+| `'!'`  | `%21`         |
+| `'$'`  | `%24`         |
+| `'&'`  | `%26`         |
+| `"'"`  | `%27`         |
+| `'('`  | `%28`         |
+| `')'`  | `%29`         |
+| `'*'`  | `%2A`         |
+| `'+'`  | `%2B`         |
+| `','`  | `%2C`         |
+| `';'`  | `%3B`         |
+| `'='`  | `%3D`         |
+| `'%'`  | `%25`         |
+| `' '`  | `%20` или `+` |
+
+В зависимости от контекста символ `' '` преобразуется в `'+'` (в версии процентного кодирования, используемой в сообщении `application/x-www-form-urlencoded`) или в `'%20'` (в URL-адресах).
+
+## Смотрите также
+
+- Определение [процентного кодирования](https://en.wikipedia.org/wiki/Percent-encoding) в Википедии.
+- {{RFC(3986)}}, раздел 2.1, в котором определено это кодирование.
+- [`encodeURI()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) и [`encodeURIComponent()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) — функции для процентного кодирования URL-адресов
diff --git a/files/ru/glossary/uri/index.md b/files/ru/glossary/uri/index.md
new file mode 100644
index 00000000000000..7e887870c8a347
--- /dev/null
+++ b/files/ru/glossary/uri/index.md
@@ -0,0 +1,17 @@
+---
+title: URI
+slug: Glossary/URI
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**URI** (англ. _Uniform Resource Identifier_) — это строка, ссылающаяся на ресурс.
+
+Наиболее распространёнными являются {{Glossary("URL")}}, которые идентифицируют ресурс, указывая его местоположение в Интернете. {{Glossary("URN")}}, напротив, ссылается на ресурс по имени в заданном пространстве имён, например ISBN книги.
+
+## Смотрите также
+
+- [URI](https://ru.wikipedia.org/wiki/URI) в Википедии
+- Стандарт [RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986)
diff --git a/files/ru/glossary/url/index.md b/files/ru/glossary/url/index.md
index 15846254cea4c4..f440bd06310dd1 100644
--- a/files/ru/glossary/url/index.md
+++ b/files/ru/glossary/url/index.md
@@ -1,18 +1,20 @@
 ---
-title: URL (Единый указатель ресурса)
+title: URL
 slug: Glossary/URL
+l10n:
+  sourceCommit: 731e5ba6630a220c24b22288b58af70495063555
 ---
 
 {{GlossarySidebar}}
 
-_Единый указатель ресурса (Uniform Resource Locator,_ **URL**) — строка, однозначно определяющая, где в интернете находится ресурс.
+**URL** (англ. _Uniform Resource Locator_) — это строка, определяющая расположение ресурса (например, веб-страницы, изображения или видео) в Интернете.
 
-В контексте {{Glossary("HTTP")}}, URL называют "адрес" (web address)" или "ссылку" (link). В браузере URL отображается в адресной строке , например, `https://developer.mozilla.org`.
+В контексте протокола {{Glossary("HTTP")}}, URL называют «веб-адресом» или «ссылкой». {{glossary("browser", "Браузер")}} отображает URL в адресной строке, например: `https://developer.mozilla.org`. Некоторые браузеры отображают только часть URL, которая находится после «//», то есть {{Glossary("Domain name", "доменное имя")}}.
 
-Кроме того, URL используют при передаче файлов через {{Glossary("FTP")}} , в электронной почте через ({{Glossary("SMTP")}}) и других местах.
+URL также могут быть использованы при передаче файлов ({{Glossary("FTP")}}), в электронной почте ({{Glossary("SMTP")}}) и в других протоколах.
 
 ## Смотрите также
 
-### Узнайте об этом
-
-- [Понимание структуры URL](/ru/docs/Learn/Understanding_URLs) на сайте MDN
+- [Что такое URL-адрес?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) на сайте MDN
+- Синтаксис URL-адресов определён в [URL Living Standard](https://url.spec.whatwg.org/)
+- [URL](https://ru.wikipedia.org/wiki/URL) в Википедии
diff --git a/files/ru/glossary/urn/index.md b/files/ru/glossary/urn/index.md
new file mode 100644
index 00000000000000..58edb95a010d29
--- /dev/null
+++ b/files/ru/glossary/urn/index.md
@@ -0,0 +1,14 @@
+---
+title: URN
+slug: Glossary/URN
+l10n:
+  sourceCommit: fbc9980c0718c3ead40863b20a74fc8535ebcc85
+---
+
+{{GlossarySidebar}}
+
+**URN** (англ. _Uniform Resource Name_) — это {{Glossary("URI")}} в стандартном формате, ссылающийся на ресурс без указания его местоположения. Пример из стандарта [RFC3986](https://datatracker.ietf.org/doc/html/rfc3986): `urn:oasis:names:specification:docbook:dtd:xml:4.1.2`
+
+## Смотрите также
+
+- [URN](https://ru.wikipedia.org/wiki/URN) в Википедии
diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.md b/files/ru/learn/getting_started_with_the_web/css_basics/index.md
index c191423fff6ded..39262335abf4a0 100644
--- a/files/ru/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.md
@@ -115,7 +115,8 @@ h1 {
    }
    ```
 
-   > **Примечание:** Все в CSS документе между `/*` и `*/` является **CSS комментарием**, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.
+   > [!NOTE]
+   > Все в CSS документе между `/*` и `*/` является **CSS комментарием**, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.
 
 4. Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела ({{htmlelement("h1")}}, {{htmlelement("li")}}, и {{htmlelement("p")}}). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
 
@@ -226,9 +227,11 @@ img {
 
 В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать `margin: 0 auto` уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент {{HTMLElement("body")}} является **блочным**, это значит, что он занимает всю ширину страницы и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются **строчными** элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью `display: block;`.
 
-> **Примечание:** Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600px). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займёт пространство страницы. Чтобы исправить это, вы можете: 1) уменьши ширину изображения используя [графический редактор](https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80), или 2) изменить размер изображения используя CSS путём установки свойства {{cssxref("width")}} для `<img>` меньше, чем у {{HTMLElement("body")}}.
+> [!NOTE]
+> Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600px). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займёт пространство страницы. Чтобы исправить это, вы можете: 1) уменьши ширину изображения используя [графический редактор](https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80), или 2) изменить размер изображения используя CSS путём установки свойства {{cssxref("width")}} для `<img>` меньше, чем у {{HTMLElement("body")}}.
 
-> **Примечание:** Не стоит беспокоиться, если вы ещё не понимаете `display: block;` и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве [display](/ru/docs/Web/CSS/display).
+> [!NOTE]
+> Не стоит беспокоиться, если вы ещё не понимаете `display: block;` и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве [display](/ru/docs/Web/CSS/display).
 
 ## Заключение
 
diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
index 7c188809096318..9a0c95fae7ded9 100644
--- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -32,7 +32,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 3. **Папка `styles`**: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем `styles` внутри вашей папки `test-site`.
 4. **Папка `scripts`**: Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем `scripts` внутри вашей папки `test-site`.
 
-> **Примечание:** На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция **Скрывать расширения для известных типов файлов**, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант **Свойства папки...** и снять флажок **Скрывать расширения для зарегистрированных типов файлов**, затем щёлкнуть **OK**. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.
+> [!NOTE]
+> На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция **Скрывать расширения для известных типов файлов**, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант **Свойства папки...** и снять флажок **Скрывать расширения для зарегистрированных типов файлов**, затем щёлкнуть **OK**. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.
 
 ## Файловые пути
 
@@ -69,7 +70,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
 На данный момент это все, что вам нужно знать
 
-> **Примечание:** Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например `C:\windows`. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.
+> [!NOTE]
+> Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например `C:\windows`. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.
 
 ## Что должно быть сделано?
 
diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.md b/files/ru/learn/getting_started_with_the_web/html_basics/index.md
index 32d57206c3ceb4..7cf183b2d7e96c 100644
--- a/files/ru/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.md
@@ -119,7 +119,8 @@ HTML не является языком программирования; это
 
 Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.
 
-> **Примечание:** Узнайте больше о [специальных возможностях](/ru/docs/Web/Accessibility).
+> [!NOTE]
+> Узнайте больше о [специальных возможностях](/ru/docs/Web/Accessibility).
 
 ## Разметка текста
 
diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
index f4091c4a318ced..2c2e0f472ec170 100644
--- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -48,7 +48,8 @@ JavaScript сам по себе довольно компактный, но оч
 
 5. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите `index.html` в браузере. Вы должны увидеть что-то вроде этого: ![](hello-world.png)
 
-> **Примечание:** Причиной, по которой мы поставили элемент {{htmlelement("script")}} в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.
+> [!NOTE]
+> Причиной, по которой мы поставили элемент {{htmlelement("script")}} в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.
 
 ### Что произошло?
 
@@ -70,11 +71,14 @@ JavaScript сам по себе довольно компактный, но оч
 let myVariable;
 ```
 
-> **Примечание:** Точка с запятой в конце строки указывает, где заканчивается оператор. Точку с запятой нужно обязательно использовать для разеделения операторов, располагающихся на одной строке. Однако некоторые люди считают, что хорошая практика — указывать её в конце каждого оператора. Существуют и другие правила, когда нужно ставить точку с запятой, а когда нет. Смотрите более подробно в статье [ваше руководство по точкам с запятой в JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/).
+> [!NOTE]
+> Точка с запятой в конце строки указывает, где заканчивается оператор. Точку с запятой нужно обязательно использовать для разеделения операторов, располагающихся на одной строке. Однако некоторые люди считают, что хорошая практика — указывать её в конце каждого оператора. Существуют и другие правила, когда нужно ставить точку с запятой, а когда нет. Смотрите более подробно в статье [ваше руководство по точкам с запятой в JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/).
 
-> **Примечание:** вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите [в правилах именования переменных](http://www.codelifter.com/main/tips/tip_020.shtml)). Если вы не уверены, вы можете [проверить имя вашей переменной](https://mothereff.in/js-variables), чтобы увидеть корректно ли оно.
+> [!NOTE]
+> Вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите [в правилах именования переменных](http://www.codelifter.com/main/tips/tip_020.shtml)). Если вы не уверены, вы можете [проверить имя вашей переменной](https://mothereff.in/js-variables), чтобы увидеть корректно ли оно.
 
-> **Примечание:** JavaScript чувствителен к регистру — `myVariable` отличается от переменной `myvariable`. Если у вас возникают проблемы в вашем коде, проверьте регистр!
+> [!NOTE]
+> JavaScript чувствителен к регистру — `myVariable` отличается от переменной `myvariable`. Если у вас возникают проблемы в вашем коде, проверьте регистр!
 
 > **Примечание:**Для получения более подробной информации о разнице между var и let, смотрите: [Разница между var и let](/ru/docs/Web/JavaScript/Reference/Statements/let).
 
@@ -145,7 +149,8 @@ myVariable = 'Steve';
 
 Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе [выражения и операторы](/ru/docs/Web/JavaScript/Reference/Operators).
 
-> **Примечание:** Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите `"35" + "25"` в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, `35 + 25`, то получите правильный результат.
+> [!NOTE]
+> Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите `"35" + "25"` в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, `35 + 25`, то получите правильный результат.
 
 ### Условия
 
@@ -197,7 +202,8 @@ multiply(20, 20);
 multiply(0.5, 3);
 ```
 
-> **Примечание:** Инструкция [`return`](/ru/docs/Web/JavaScript/Reference/Statements/return) сообщает браузеру, что нужно вернуть переменную `result` из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте [больше об области видимости переменных](/ru/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope).)
+> [!NOTE]
+> Инструкция [`return`](/ru/docs/Web/JavaScript/Reference/Statements/return) сообщает браузеру, что нужно вернуть переменную `result` из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте [больше об области видимости переменных](/ru/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope).)
 
 ### События
 
diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
index 9ca8cb07b7e95f..4f2055e8687e8f 100644
--- a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -78,7 +78,8 @@ slug: Learn/Getting_started_with_the_web/Publishing_your_website
 
 ![](command-line.png)
 
-> **Примечание:** вы также можете использовать графический пользовательский интерфейс [Git](http://git-scm.com/downloads/guis) для этих же целей, если вам не удобно работать с командной строкой.
+> [!NOTE]
+> Вы также можете использовать графический пользовательский интерфейс [Git](http://git-scm.com/downloads/guis) для этих же целей, если вам не удобно работать с командной строкой.
 
 У всех операционных систем есть командная строка:
 
@@ -121,7 +122,8 @@ slug: Learn/Getting_started_with_the_web/Publishing_your_website
 
 6. Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (_username.github.io_), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.
 
-> **Примечание:** Если вы застряли, [GitHub Pages homepage](https://pages.github.com/) будет очень полезна для вас.
+> [!NOTE]
+> Если вы застряли, [GitHub Pages homepage](https://pages.github.com/) будет очень полезна для вас.
 
 ### Дальнейшее изучение GitHub
 
diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index a27925e343d746..9ba55b02be0cc9 100644
--- a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -17,7 +17,8 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл
 2. **Какую информацию вы предоставляете о предмете?** Напишите заголовок и несколько абзацев, и подумайте над изображениями, которые вы хотите показать на своей странице.
 3. **Как будет выглядеть ваш веб-сайт**, в простых терминах высокого уровня. Какой цвет фона? Какой вид шрифта будет уместен: деловой, мультяшный, жирный и кричащий или тонкий?
 
-> **Примечание:** Комплексные проекты нуждаются в детализированных руководствах, которые включают все детали цветов, шрифтов, расстояния между элементами на странице, соответствующий стиль письма и так далее. Их иногда называют руководствами по проектированию или бренд-бук, вы можете увидеть пример в [Руководство Firefox OS](https://www.mozilla.org/en-US/styleguide/products/firefox-os/).
+> [!NOTE]
+> Комплексные проекты нуждаются в детализированных руководствах, которые включают все детали цветов, шрифтов, расстояния между элементами на странице, соответствующий стиль письма и так далее. Их иногда называют руководствами по проектированию или бренд-бук, вы можете увидеть пример в [Руководство Firefox OS](https://www.mozilla.org/en-US/styleguide/products/firefox-os/).
 
 ## Сделайте набросок вашего дизайна
 
@@ -25,7 +26,8 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл
 
 ![](website-drawing-scan.png)
 
-> **Примечание:** Даже в реальных, сложных веб-сайтах, команда разработчиков обычно начинает с наброска на бумаге и потом строит цифровые макеты используя графические редакторы или веб-технологии.
+> [!NOTE]
+> Даже в реальных, сложных веб-сайтах, команда разработчиков обычно начинает с наброска на бумаге и потом строит цифровые макеты используя графические редакторы или веб-технологии.
 >
 > Веб-команда часто включает в себя пару графических дизайнеров и дизайнера с опытом взаимодействия (user-experience (UX) designer). Графические дизайнеры, очевидно, работают вместе над визуализацией веб-сайта. UX дизайнеры играют более абстрактную роль, обращаясь к тому как пользователи будут пользоваться и взаимодействовать с веб-сайтом.
 
@@ -55,7 +57,8 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл
 
 ![](screenshot_from_2014-11-04_15-20-48.png)
 
-> **Примечание:** Большинство изображений в Интернете, использованных в Google Картинках имеют авторские права. Для снижения вероятности нарушения авторских прав, используйте фильтр лицензии Google. Для этого: 1) кликните на **Инструменты поиска (Search tools)**, затем на 2) **Права на использование (Usage rights)**:
+> [!NOTE]
+> Большинство изображений в Интернете, использованных в Google Картинках имеют авторские права. Для снижения вероятности нарушения авторских прав, используйте фильтр лицензии Google. Для этого: 1) кликните на **Инструменты поиска (Search tools)**, затем на 2) **Права на использование (Usage rights)**:
 >
 > ![](screenshot_from_2014-11-04_14-27-45.png)
 
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 7528ffc07a3163..fc7b5bd24c45cb 100644
--- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -457,7 +457,8 @@ textarea.onkeyup = function () {
 
 Я думаю, Почт. Грин сделал это на кухне с бензопилой.
 
-> **Примечание:** Существует ещё один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и `<abbr>`, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что `<abbr>`, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте `<abbr>`.
+> [!NOTE]
+> Существует ещё один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и `<abbr>`, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что `<abbr>`, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте `<abbr>`.
 
 ### Активное обучение: выделение аббревиатуры
 
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
index 698fa3a9829501..9780da56dc7be5 100644
--- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -27,7 +27,8 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 
 Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес ({{glossary("URL")}}).
 
-> **Примечание:** URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).
+> [!NOTE]
+> URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).
 
 Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.
 
@@ -49,7 +50,7 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 
 ### Блочные ссылки
 
-Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже {{Glossary("Block/CSS", "блочный элемент")}}. Если вы хотите превратить заголовок в ссылку, то оберните его в элемент (`<a>`):
+Как упоминалось ранее, почти любой контент может быть ссылкой, даже {{Glossary("Block/CSS", "блочный элемент")}}. Если вы хотите превратить заголовок в ссылку, то оберните его в элемент (`<a>`):
 
 ```html
 <a href="https://developer.mozilla.org/ru/">
@@ -60,30 +61,27 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 </p>
 ```
 
-This turns the heading into a link:
+Это превратит заголовок в ссылку:
 {{EmbedLiveSample('Блочные ссылки', '100%', 150)}}
 
 ### Добавляем информацию с помощью атрибута title
 
-Другим атрибутом, который вы можете добавить к своим ссылкам, является — `title`. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:
+Другим атрибутом ссылок является `title`. Он может содержать дополнительную информацию о ссылке, например, описание страницы или другие вещи, о которых следует знать пользователю.
 
 ```html-nolint
 <p>
   Я создал ссылку на
-  <a
-    href="https://www.mozilla.org/ru/"
-    title="Лучшее место для поиска дополнительной информации
-           о миссии Mozilla и о том, как внести свой вклад"
-    >домашнюю страницу Mozilla </a
-  >.
+  <a href="https://www.mozilla.org/ru/"
+     title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla</a>.
 </p>
 ```
 
-Вот что получилось (описание появится, если навести курсор на ссылку):
+Результат описанного выше примера будет таким (описание появится, если навести курсор на ссылку):
 
 {{EmbedLiveSample('Добавляем информацию с помощью атрибута title', '100%', 150)}}
 
-> **Примечание:** Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.
+> [!NOTE]
+> Описание из атрибута `title` отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.
 
 ### Активное изучение: создаём собственную ссылку
 
@@ -133,7 +131,8 @@ URL-адреса используют пути для поиска файлов.
   </p>
   ```
 
-> **Примечание:** вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например:
+> [!NOTE]
+> Вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например:
 > `../../../сложный/путь/к/моему/файлу.html`.
 
 ### Фрагменты документа
@@ -195,13 +194,13 @@ _Относительный URL_ будет указывать на различ
 _**Хороший** текст ссылки:_ [Скачать Firefox](https://firefox.com)
 
 ```html
-<p><a href="https://firefox.com/"> Скачать Firefox </a></p>
+<p><a href="https://firefox.com/">Скачать Firefox</a></p>
 ```
 
 _**Плохой** текст ссылки:_ [Нажми сюда](https://firefox.com/), чтобы скачать Firefox
 
 ```html
-<p><a href="https://firefox.com/"> Нажми сюда </a> чтобы скачать Firefox</p>
+<p><a href="https://firefox.com/">Нажми сюда</a> чтобы скачать Firefox</p>
 ```
 
 Советы:
@@ -281,7 +280,8 @@ _**Плохой** текст ссылки:_ [Нажми сюда](https://firefo
 
 ![An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items](navigation-example.png)
 
-> **Примечание:** Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up).
+> [!NOTE]
+> Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up).
 
 ## Ссылки электронной почты
 
@@ -301,16 +301,17 @@ _**Плохой** текст ссылки:_ [Нажми сюда](https://firefo
 
 Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу `mailto`. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.
 
-Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):
+Вот пример, который содержит поля cc (кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc (скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject (тема письма) и body (текст сообщения):
 
 ```html
 <a
   href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
-  Send mail with cc, bcc, subject and body
+  Отправить письмо с полями cc, bcc, subject и body
 </a>
 ```
 
-> **Примечание:** Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами [percent-escaped](http://en.wikipedia.org/wiki/Percent-encoding)). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля `mailto:` URL. Для этого используется стандартное описание URL запроса. Прочтите [о методе GET](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data#метод_get), чтобы лучше понимать описание URL запроса.
+> [!NOTE]
+> Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами [percent-escaped](http://en.wikipedia.org/wiki/Percent-encoding)). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля `mailto:` URL. Для этого используется стандартное описание URL запроса. Прочтите [о методе GET](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data#метод_get), чтобы лучше понимать описание URL запроса.
 
 Вот несколько примеров использования `mailto` URLs:
 
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.md b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
index f08806d3e9a539..13760838482d12 100644
--- a/files/ru/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
@@ -32,7 +32,8 @@ HTML не так сложен к пониманию, как Rust. HTML не ко
 
 HTML не страдает от синтаксических ошибок, потому что браузер читает код толерантно, в том смысле, что страницы могут отображаться даже если синтаксические ошибки присутствуют. Браузеры имеют встроенные правила по интерпретации неверно написанной разметки, и вы можете запустить что-либо, даже если вы имели в виду другое. Это может стать настоящей проблемой!
 
-> **Примечание:** HTML читается толерантно, потому что когда веб только появился, было решено позволить людям публиковать контент даже при условии некорректностей в коде, так как это куда более важно, чем уверенность в абсолютно верном синтаксисе. Веб не был бы сейчас так популярен, если бы относился к новичкам строго.
+> [!NOTE]
+> HTML разбирается браузером толерантно. Когда веб только появился, было решено позволить людям публиковать контент даже при условии некорректностей в коде, так как это куда более важно, чем уверенность в абсолютно верном синтаксисе. Веб не был бы сейчас так популярен, если бы относился к новичкам строго.
 
 ### Активное обучение: Знакомство с толерантным кодом
 
@@ -132,7 +133,8 @@ HTML можно проверить по адресу, загрузив файл
   example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>
   ```
 
-  > **Примечание:** Свойство без закрывающей кавычки может проглотить закрывающий тег — браузер считает его частью значения этого свойства.
+  > [!NOTE]
+  > Свойство без закрывающей кавычки может проглотить закрывающий тег — браузер считает его частью значения этого свойства.
 
 - "Unclosed element `ul`": Странно, ведь элемент {{htmlelement("ul")}} закрыт. Настоящая проблема всё там же — элемент {{htmlelement("a")}} не закрыт из-за недостающей кавычки в свойстве.
 
diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
index 09f8628c09290d..c49c65f05cecd9 100644
--- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -36,7 +36,8 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 
 Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?
 
-> **Примечание:** Люди с дальтонизмом составляют около [8% мирового населения](http://www.color-blindness.com/2006/04/28/colorblind-population/). Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было [285 миллионов таких людей](https://en.wikipedia.org/wiki/Visual_impairment), а общая численность населения составляла [около 7 миллиардов](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)).
+> [!NOTE]
+> Люди с дальтонизмом составляют около [8% мирового населения](http://www.color-blindness.com/2006/04/28/colorblind-population/). Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было [285 миллионов таких людей](https://en.wikipedia.org/wiki/Visual_impairment), а общая численность населения составляла [около 7 миллиардов](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)).
 
 В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их _функциональности_ — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд [последствий неиспользования правильной структуры элементов и семантики для правильной работы.](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure)
 
@@ -272,7 +273,8 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 
 Применить наш метод к своему сайту. О чем он будет?
 
-> **Примечание:** Сохраните свой код, он вам ещё понадобится.
+> [!NOTE]
+> Сохраните свой код, он вам ещё понадобится.
 
 ## Заключение
 
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.md b/files/ru/learn/html/introduction_to_html/getting_started/index.md
index 6cbe6b503bbdf6..d9d34827e9653c 100644
--- a/files/ru/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/ru/learn/html/introduction_to_html/getting_started/index.md
@@ -25,7 +25,8 @@ slug: Learn/HTML/Introduction_to_HTML/Getting_started
 <p>Мой кот очень сердитый</p>
 ```
 
-> **Примечание:** Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как `<title>`, `<TITLE>`, `<Title>`, `<TiTlE>`, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.
+> [!NOTE]
+> Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как `<title>`, `<TITLE>`, `<Title>`, `<TiTlE>`, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.
 
 ## Структура HTML-элементов
 
@@ -211,9 +212,11 @@ textarea.onkeyup = function () {
 
 {{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}
 
-> **Примечание:** HTML5 переопределил категории элементов в HTML: смотрите [Категории типов содержимого элементов](https://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories). Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.
+> [!NOTE]
+> HTML5 переопределил категории элементов в HTML: смотрите [Категории типов содержимого элементов](https://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories). Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.
 
-> **Примечание:** Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными [типами отображения в CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model#экскурс_внутренний_и_внешний_типы_отображения). Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.
+> [!NOTE]
+> Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными [типами отображения в CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model#экскурс_внутренний_и_внешний_типы_отображения). Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.
 
 ### Пустые элементы
 
@@ -228,7 +231,8 @@ textarea.onkeyup = function () {
 
 {{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}
 
-> **Примечание:** Пустые элементы иногда называют _void-элементами_.
+> [!NOTE]
+> Пустые элементы иногда называют _void-элементами_.
 
 ## Атрибуты
 
@@ -507,7 +511,8 @@ textarea.onkeyup = function () {
 3. Вставить код в ваш новый текстовый файл.
 4. Сохранить файл как `index.html`.
 
-> **Примечание:** вы также можете найти этот базовый пример HTML на [MDN Learning Area Github repo](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html).
+> [!NOTE]
+> Вы также можете найти этот базовый пример HTML на [MDN Learning Area Github repo](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html).
 
 Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:
 
@@ -693,7 +698,8 @@ textarea.onkeyup = function () {
 
 {{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}
 
-> **Примечание:** Таблица всех доступных в HTML символов-мнемоников — в Википедии: [List of XML and HTML character entity references](http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references).
+> [!NOTE]
+> Таблица всех доступных в HTML символов-мнемоников — в Википедии: [List of XML and HTML character entity references](http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references).
 
 ## HTML комментарии
 
@@ -715,7 +721,8 @@ textarea.onkeyup = function () {
 
 Вы дошли до конца статьи — надеемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!
 
-> **Примечание:** Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или [CSS](/ru/docs/Learn/CSS). CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.
+> [!NOTE]
+> Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или [CSS](/ru/docs/Learn/CSS). CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.
 
 ## Смотрите также
 
diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
index 4c2ed253226d80..ea6e2f7d6a6a20 100644
--- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -987,7 +987,8 @@ HTML5 переопределил \<b>, \<i> и \<u> с новыми, неско
 - {{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...
 - {{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка ...
 
-> **Примечание:** Предупреждение о подчёркивании: **люди сильно ассоциируют подчёркивание с гиперссылками**. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент \<u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.
+> [!NOTE]
+> Предупреждение о подчёркивании: **люди сильно ассоциируют подчёркивание с гиперссылками**. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент \<u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.
 
 ```html
 <!-- Научные наименования -->
diff --git a/files/ru/learn/html/introduction_to_html/index.md b/files/ru/learn/html/introduction_to_html/index.md
index d9bb7f3be5630c..c529d48d3568f6 100644
--- a/files/ru/learn/html/introduction_to_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Introduction_to_HTML
 
 Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)), а также понимание, как создавать и управлять файлами, что подробно описано в статье [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — обе статьи являются частью нашего модуля [Начало работы с сетью](/ru/docs/Learn/Getting_started_with_the_web).
 
-> **Примечание:** если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/).
+> [!NOTE]
+> Если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/).
 
 ## Руководства
 
diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 312bee3df99c44..6de7803ce03caa 100644
--- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -90,7 +90,8 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 
 ![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](bad-encoding.png)
 
-> **Примечание:** Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.
+> [!NOTE]
+> Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.
 
 ### Активное изучение: экспериментируем с символьными кодировками
 
@@ -143,9 +144,11 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 
 ![Результат поиска в Google](updated_search_result__ru.jpg)
 
-> **Примечание:** Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через [Google Search Console](http://www.google.com/webmasters/tools/), чтобы пользователи могли сразу перейти к ним со страницы поиска.
+> [!NOTE]
+> Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через [Google Search Console](http://www.google.com/webmasters/tools/), чтобы пользователи могли сразу перейти к ним со страницы поиска.
 
-> **Примечание:** Многие типы `<meta>` больше не используются. Так, поисковые системы больше не используют данные из элемента `<meta type="keywords" content="ваши, ключевые, слова, введите, здесь">`, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.
+> [!NOTE]
+> Многие типы `<meta>` больше не используются. Так, поисковые системы больше не используют данные из элемента `<meta type="keywords" content="ваши, ключевые, слова, введите, здесь">`, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.
 
 ### Другие виды метаданных
 
@@ -252,7 +255,8 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 - JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
 - CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.
 
-> **Примечание:** Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html).
+> [!NOTE]
+> Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html).
 
 ## Основной язык HTML страницы
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index 4d88904e9042a0..33a59b6167327b 100644
--- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
 | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Цель:   | Изучить как встроить SVG (векторное) изображение на веб-страницу.                                                                                                           |
 
-> **Примечание:** Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.
+> [!NOTE]
+> Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.
 
 ## Что такое векторная графика?
 
@@ -28,7 +29,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
 
 ![Two star images zoomed in, one crisp and the other blurry](raster-vector-zoomed.png)
 
-> **Примечание:** Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) !
+> [!NOTE]
+> Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) !
 
 Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.
 
@@ -69,7 +71,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
 
 В целом, растровая графика лучше подходит для сложных изображений, например, фотографий.
 
-> **Примечание:** В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на [статью, описывающую как подготовить SVG изображение для веб-документа.](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html)
+> [!NOTE]
+> В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на [статью, описывающую как подготовить SVG изображение для веб-документа.](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html)
 
 ## Добавление SVG на страницы
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
index edff7558e5b33e..f226ff2696d2bc 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -15,7 +15,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — `src` (произносится _эс-ар-си_, иногда говорят его полное название, _source_). Атрибут `src` содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута `href` для элемента {{htmlelement("a")}}.
 
-> **Примечание:** Перед тем как продолжить, вам стоит вспомнить про [типы адресов URL](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%d0%90%d0%b1%d1%81%d0%be%d0%bb%d1%8e%d1%82%d0%bd%d1%8b%d0%b5_%d0%b8_%d0%be%d1%82%d0%bd%d0%be%d1%81%d0%b8%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5_url-%d0%b0%d0%b4%d1%80%d0%b5%d1%81%d0%b0), чтобы обновить в памяти про относительные и абсолютные адреса.
+> [!NOTE]
+> Перед тем как продолжить, вам стоит вспомнить про [типы адресов URL](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%d0%90%d0%b1%d1%81%d0%be%d0%bb%d1%8e%d1%82%d0%bd%d1%8b%d0%b5_%d0%b8_%d0%be%d1%82%d0%bd%d0%be%d1%81%d0%b8%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5_url-%d0%b0%d0%b4%d1%80%d0%b5%d1%81%d0%b0), чтобы обновить в памяти про относительные и абсолютные адреса.
 
 Например, если ваше изображение называется `dinosaur.jpg`, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:
 
@@ -31,7 +32,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 И так далее.
 
-> **Примечание:** Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: `dinosaur.jpg` лучше, чем `img835.png`.
+> [!NOTE]
+> Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: `dinosaur.jpg` лучше, чем `img835.png`.
 
 Вы можете встроить изображение используя абсолютный URL, например:
 
@@ -53,9 +55,11 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 ![A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it](basic-image.png)
 
-> **Примечание:** Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в [Замещаемых элементах](/ru/docs/Web/CSS/Replaced_element).
+> [!NOTE]
+> Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в [Замещаемых элементах](/ru/docs/Web/CSS/Replaced_element).
 
-> **Примечание:** вы можете найти готовый пример этого раздела, [размещённый на Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (смотрите также [исходный код](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)).
+> [!NOTE]
+> Вы можете найти готовый пример этого раздела, [размещённый на Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (смотрите также [исходный код](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)).
 
 ### Альтернативный текст
 
@@ -86,7 +90,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст, если изображения не видны.
 
-> **Примечание:** Более подробную информацию, смотрите здесь: [Альтернативный текст](/ru/docs/Learn/Accessibility/HTML#%d0%90%d0%bb%d1%8c%d1%82%d0%b5%d1%80%d0%bd%d0%b0%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b9_%d1%82%d0%b5%d0%ba%d1%81%d1%82).
+> [!NOTE]
+> Более подробную информацию, смотрите здесь: [Альтернативный текст](/ru/docs/Learn/Accessibility/HTML#%d0%90%d0%bb%d1%8c%d1%82%d0%b5%d1%80%d0%bd%d0%b0%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b9_%d1%82%d0%b5%d0%ba%d1%81%d1%82).
 
 ### Ширина и высота
 
@@ -109,7 +114,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное [соотношение сторон](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>). Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.
 
-> **Примечание:** Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого [CSS](/ru/docs/Learn/CSS).
+> [!NOTE]
+> Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого [CSS](/ru/docs/Learn/CSS).
 
 ### Заголовок изображения
 
@@ -240,7 +246,8 @@ window.addEventListener("load", drawOutput);
 
 Элемент {{htmlelement("figcaption")}} говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента {{htmlelement("figure")}}.
 
-> **Примечание:** С точки зрения доступности, заголовки и [`alt`](/ru/docs/Web/HTML/Element/img#alt) имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как [`alt`](/ru/docs/Web/HTML/Element/img#alt) обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и `alt` не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.
+> [!NOTE]
+> С точки зрения доступности, заголовки и [`alt`](/ru/docs/Web/HTML/Element/img#alt) имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как [`alt`](/ru/docs/Web/HTML/Element/img#alt) обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и `alt` не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.
 
 Тег \<figure> не является изображением. Он представляет собой независимый структурный элемент, который:
 
@@ -331,7 +338,8 @@ p {
 
 Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.
 
-> **Примечание:** вы можете узнать больше о [фоновых изображениях CSS](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) в нашей теме о [CSS](/ru/docs/Learn/CSS).
+> [!NOTE]
+> Вы можете узнать больше о [фоновых изображениях CSS](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) в нашей теме о [CSS](/ru/docs/Learn/CSS).
 
 ## Проверьте свои навыки!
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
index f9e39efdaddb25..9da23c76475eeb 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
@@ -7,7 +7,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_
 
 Цель этого теста навыков - оценить, поняли ли вы нашу статью [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML).
 
-> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/) для работы с задачами.
+> [!NOTE]
+> Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/) для работы с задачами.
 
 ## Изображения в HTML №1
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/index.md b/files/ru/learn/html/multimedia_and_embedding/index.md
index 2ee5acf74be904..2400dd452c463f 100644
--- a/files/ru/learn/html/multimedia_and_embedding/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Multimedia_and_embedding
 
 Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во [Введении в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML). Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!
 
-> **Примечание:** Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/).
+> [!NOTE]
+> Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/).
 
 ## Руководство
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index b1010b938cc806..270e6ce58ce463 100644
--- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -17,7 +17,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
 Сохраните изображения из папки [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.
 
-> **Примечание:** Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.
+> [!NOTE]
+> Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.
 
 ## Описание проекта
 
@@ -37,7 +38,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
 Затем создайте фоновую версию `red-panda.jpg` шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и `index.html`.
 
-> **Примечание:** Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. [tinypng.com](https://tinypng.com/) - отличный сервис для этого.
+> [!NOTE]
+> Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. [tinypng.com](https://tinypng.com/) - отличный сервис для этого.
 
 ### Добавление логотипа в шапку
 
@@ -55,7 +57,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
 Убедитесь, что вы использовали изображения, соответствующие ссылкам.
 
-> **Примечание:** Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте [Github pages](/ru/docs/Learn/Common_questions/Using_Github_pages) - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в [Responsive images: useful developer tools](/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools).
+> [!NOTE]
+> Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте [Github pages](/ru/docs/Learn/Common_questions/Using_Github_pages) - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в [Responsive images: useful developer tools](/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools).
 
 ### Искусственно изменённая красная панда
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 529182037c9b51..64ac6310124f37 100644
--- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -200,7 +200,8 @@ textarea.onkeyup = function () {
 - [`sandbox`](/ru/docs/Web/HTML/Element/iframe#sandbox)
   - : Этот атрибут, который работает в более современных браузерах, чем остальные функции \<iframe> (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.
 
-> **Примечание:** Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель {{glossary ("SEO")}}.)
+> [!NOTE]
+> Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель {{glossary ("SEO")}}.)
 
 ### Проблемы безопасности
 
@@ -239,13 +240,15 @@ textarea.onkeyup = function () {
 
 Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута `sandbox=""`) — смотри [`sandbox`](/ru/docs/Web/HTML/Element/iframe#sandbox) ссылка для всех доступных опций. Важно отметить, что вы _никогда_ не должны добавлять атрибуты `allow-scripts` и `allow-same-origin` в свой `sandbox` атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .
 
-> **Примечание:** "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.
+> [!NOTE]
+> "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.
 
 #### Настройка директив CSP
 
 {{Glossary("CSP")}} означает **[политику безопасности контента](/ru/docs/Web/HTTP/CSP)** и обеспечивает [набор заголовков HTTP](/ru/docs/Web/Security/CSP/CSP_policy_directives) (метаданные, отправленные вместе с вашими веб-страницами, когда они обслуживаются с веб-сервера), предназначенных для улучшения безопасности вашего HTML-документа. Когда дело доходит до обеспечения безопасности `<iframe>`, вы можете _[настроить сервер для отправки соответствующего `X-Frame-Options` заголовка.](/ru/docs/Web/HTTP/X-Frame-Options)_ Это может помешать другим веб-сайтам встраивать ваш контент на их веб-страницы (что позволило бы использовать кликджекинг и множество других атак), что и было сделано разработчиками MDN, как мы видели ранее.
 
-> **Примечание:** Вы можете прочитать пост Фредерика Брауна [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.
+> [!NOTE]
+> Вы можете прочитать пост Фредерика Брауна [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.
 
 ## Элементы \<embed> и \<object>
 
@@ -265,7 +268,8 @@ textarea.onkeyup = function () {
 | имена и значения, предоставляемые плагину в качестве параметров         | Особые атрибуты,с их именами и значениями                                                           | одиночные элементы {{htmlelement("param")}}, находящиеся внутри `<object>`                            |
 | независимый HTML-контент в качестве резерва для отсутствующего ресурса  | не поддерживается (`<noembed>` является устаревшим)                                                 | содержится внутри `<object>`, после элементов `<param>`                                               |
 
-> **Примечание:** Элементу `<object>` необходим атрибут `data` , атрибут `type` , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут [`typemustmatch`](/ru/docs/Web/HTML/Element/object#typemustmatch) (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут `typemustmatch` предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут `typemustmatch` может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников {{glossary("origin")}} (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).
+> [!NOTE]
+> Элементу `<object>` необходим атрибут `data` , атрибут `type` , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут [`typemustmatch`](/ru/docs/Web/HTML/Element/object#typemustmatch) (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут `typemustmatch` предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут `typemustmatch` может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников {{glossary("origin")}} (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).
 
 Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на [live on Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html), а также на [check the source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html)):
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
index 9e19450fa0fd4c..8e23dc1068cf82 100644
--- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -37,7 +37,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. _Технологии отзывчивых изображений_ были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (_resolution switching_), или разные изображения с отдельными областями основного изображения (_art direction_).
 
-> **Примечание:** Новые возможности обсуждаются в статье — [`srcset`](/ru/docs/Web/HTML/Element/img#srcset)/[`sizes`](/ru/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}} — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).
+> [!NOTE]
+> Новые возможности обсуждаются в статье — [`srcset`](/ru/docs/Web/HTML/Element/img#srcset)/[`sizes`](/ru/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}} — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).
 
 ## Как сделать изображения отзывчивыми?
 
@@ -89,7 +90,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 2. Пробел.
 3. **Ширину слота** (в оригинале "width of the slot"), занимаемую изображением, когда медиа-условие истинно. (`440px`)
 
-> **Примечание:** Для ширины слота, вы можете указать абсолютные значения (`px`, `em`) или значение относительно окна просмотра (`vw`), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.
+> [!NOTE]
+> Для ширины слота, вы можете указать абсолютные значения (`px`, `em`) или значение относительно окна просмотра (`vw`), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.
 
 Итак, с такими атрибутами, браузер сделает следующее:
 
@@ -102,7 +104,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута [`src`](/ru/docs/Web/HTML/Element/img#src).
 
-> **Примечание:** В описании элемента {{htmlelement("head")}} вы найдёте строку `<meta name="viewport" content="width=device-width">`: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)
+> [!NOTE]
+> В описании элемента {{htmlelement("head")}} вы найдёте строку `<meta name="viewport" content="width=device-width">`: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)
 
 ### Полезные инструменты разработчика
 
@@ -165,7 +168,8 @@ img {
 
 ![Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.](picture-element-wide.png)![Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/picture-element-narrow.png)
 
-> **Примечание:** вам следует использовать атрибут `media` только при художественном оформлении; когда вы используете `media`, не применяйте медиа-условия с атрибутом `sizes`.
+> [!NOTE]
+> Вам следует использовать атрибут `media` только при художественном оформлении; когда вы используете `media`, не применяйте медиа-условия с атрибутом `sizes`.
 
 ### Почему это нельзя сделать посредством CSS и JavaScript?
 
@@ -201,7 +205,8 @@ img {
 4. Обозначьте несколько разных размеров для этой картинки.
 5. Используйте `srcset`/`size` для описания переключения при смене размеров вьюпорта
 
-> **Примечание:** Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.
+> [!NOTE]
+> Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.
 
 ## Заключение
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index f429aeac574cf9..212d79d01f1aa1 100644
--- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -19,7 +19,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 Мы не будем учить вас, как создавать аудио и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.
 
-> **Примечание:** Прежде всего, вы также должны знать, что есть немало {{glossary("OVP","OVPs")}} (провайдеров онлайн-видео) вроде [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com) и [Vimeo](https://vimeo.com/), а также онлайн аудио-провайдеров вроде [Soundcloud](https://soundcloud.com/). Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.
+> [!NOTE]
+> Прежде всего, вы также должны знать, что есть немало {{glossary("OVP","OVPs")}} (провайдеров онлайн-видео) вроде [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com) и [Vimeo](https://vimeo.com/), а также онлайн аудио-провайдеров вроде [Soundcloud](https://soundcloud.com/). Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.
 
 ### Элемент \<video>
 
@@ -73,7 +74,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.
 
-> **Примечание:** Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.
+> [!NOTE]
+> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.
 
 Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.
 
@@ -98,7 +100,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 Каждый элемент `<source>` также имеет атрибут `type`. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если `type` не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.
 
-> **Примечание:** Наша [статья о поддерживаемых медиаформатах](/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы) описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.
+> [!NOTE]
+> Наша [статья о поддерживаемых медиаформатах](/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы) описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.
 
 ### Другие параметры \<video>
 
@@ -165,7 +168,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 ![A simple audio player with a play button, timer, volume control, and progress bar](audio-player.png)
 
-> **Примечание:** Примечание: вы можете запустить [аудио-демо](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) в Github (см. также [исходный код аудиоплеера](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
+> [!NOTE]
+> Вы можете запустить [аудио-демо](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) в Github (см. также [исходный код аудиоплеера](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
 
 Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:
 
@@ -184,7 +188,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом [WebVTT](/ru/docs/Web/API/Web_Video_Text_Tracks_Format) и элементом {{htmlelement ("track")}}.
 
-> **Примечание:** "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».
+> [!NOTE]
+> "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».
 
 WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:
 
@@ -232,7 +237,8 @@ WEBVTT
 
 Подробнее читайте в разделе [добавление титров и субтитров к видео HTML5](/ru/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Вы можете [найти пример](http://iandevlin.github.io/mdn/video-player-with-captions/), который соответствует этой статье в Github, написанной Яном Девлином (см. также [исходный код](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.
 
-> **Примечание:** Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.
+> [!NOTE]
+> Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.
 
 ### Активное обучение: Внедрение собственного аудио и видео
 
diff --git a/files/ru/learn/html/tables/advanced/index.md b/files/ru/learn/html/tables/advanced/index.md
index d6e4186aa59dd7..383a6cdaaa20ab 100644
--- a/files/ru/learn/html/tables/advanced/index.md
+++ b/files/ru/learn/html/tables/advanced/index.md
@@ -29,7 +29,8 @@ slug: Learn/HTML/Tables/Advanced
 
 Заголовок помещают сразу после тега `<table>`.
 
-> **Примечание:** Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в `<table>` элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать `<caption>` элемент, так как `summary` {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).
+> [!NOTE]
+> Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в `<table>` элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать `<caption>` элемент, так как `summary` {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).
 
 ### Упражнение: Добавление заголовка
 
@@ -39,7 +40,8 @@ slug: Learn/HTML/Tables/Advanced
 2. Добавьте подходящий заголовок к таблице.
 3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
 
-> **Примечание:** Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> [!NOTE]
+> Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
 
 ## Добавление структуры с помощью \<thead>, \<tfoot> и \<tbody>
 
@@ -79,7 +81,8 @@ slug: Learn/HTML/Tables/Advanced
 
 7. Сохраните, обновите и вы увидите результат. Если `<tbody>` и `<tfoot>` элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.
 
-> **Примечание:** Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)).
+> [!NOTE]
+> Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)).
 
 Ваша готовая таблица должна выглядеть примерно так:
 
@@ -194,7 +197,8 @@ slug: Learn/HTML/Tables/Advanced
 
 {{ EmbedLiveSample('Hidden_example', '100%', 300) }}
 
-> **Примечание:** Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> [!NOTE]
+> Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
 
 ## Вложенные таблицы
 
@@ -375,7 +379,8 @@ slug: Learn/HTML/Tables/Advanced
 </tbody>
 ```
 
-> **Примечание:** Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует **гораздо** больше разметки и оставляет обширное пространство для ошибок. Атрибута `scope` обычно достаточно для большинства таблиц.
+> [!NOTE]
+> Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует **гораздо** больше разметки и оставляет обширное пространство для ошибок. Атрибута `scope` обычно достаточно для большинства таблиц.
 
 ### Упражнение: играем со scope и headers
 
@@ -383,7 +388,8 @@ slug: Learn/HTML/Tables/Advanced
 2. Теперь попробуем добавить соответствующий атрибут `scope`, который наиболее соответствует этой таблице.
 3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты `id` и `headers`.
 
-> **Примечание:** вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([also see this live](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([see this live too](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
+> [!NOTE]
+> Вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([also see this live](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([see this live too](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
 
 ## Заключение
 
diff --git a/files/ru/learn/html/tables/basics/index.md b/files/ru/learn/html/tables/basics/index.md
index ac32fe2ea74e0b..ac48bd8dc18e88 100644
--- a/files/ru/learn/html/tables/basics/index.md
+++ b/files/ru/learn/html/tables/basics/index.md
@@ -95,7 +95,8 @@ slug: Learn/HTML/Tables/Basics
 
 В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти [здесь](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css), можно также использовать [шаблон HTML](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html), применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.
 
-> **Примечание:** Посмотрите также [таблицу personal_pronouns с применённым к ней стилем](https://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html), чтобы получить представление о том, как она выглядит.
+> [!NOTE]
+> Посмотрите также [таблицу personal_pronouns с применённым к ней стилем](https://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html), чтобы получить представление о том, как она выглядит.
 
 ### Когда не надо использовать таблицы HTML?
 
@@ -151,7 +152,8 @@ HTML-таблицы следует использовать для таблич
 | ------------------------ | --------------------- | -------------------- | --------------------- |
 | Second row, first cell.  | Cell 2.               | Cell 3.              | Cell 4.               |
 
-> **Примечание:** Этот пример можно также найти на GitHub под названием [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
+> [!NOTE]
+> Этот пример можно также найти на GitHub под названием [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
 
 ## Добавление заголовков с помощью элементов \<th>
 
@@ -216,13 +218,15 @@ HTML-таблицы следует использовать для таблич
 2. Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент **[`<th>`](/ru/docs/Web/HTML/Element/th)** ('th' сокращение от 'table header'). Он работает в точности как `<td>`, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы `<td>`, содержащие заголовки, на элементы `<th>`.
 3. Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.
 
-> **Примечание:** Законченный пример можно найти на [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) в GitHub ([посмотрите живой пример](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
+> [!NOTE]
+> Законченный пример можно найти на [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) в GitHub ([посмотрите живой пример](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
 
 ### Для чего нужны заголовки?
 
 Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.
 
-> **Примечание:** По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
+> [!NOTE]
+> По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
 
 Заголовки дают дополнительное преимущество — вместе с атрибутом `scope` (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно
 
@@ -280,7 +284,8 @@ HTML-таблицы следует использовать для таблич
 3. Наконец, используйте атрибут `rowspan` чтобы распространить "Horse" и "Chicken" на две строки.
 4. Сохраните код и откройте его в браузере, чтобы увидеть улучшения.
 
-> **Примечание:** Законченный пример можно посмотреть в [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) на GitHub ([живой пример](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
+> [!NOTE]
+> Законченный пример можно посмотреть в [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) на GitHub ([живой пример](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
 
 ## Стилизация столбцов
 
diff --git a/files/ru/learn/html/tables/index.md b/files/ru/learn/html/tables/index.md
index 0e12086d73cf5a..c1e8fc41b6a9a6 100644
--- a/files/ru/learn/html/tables/index.md
+++ b/files/ru/learn/html/tables/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Tables
 
 Прежде чем приступить к данному разделу, вы должны ознакомиться с основами HTML — смотрите [Введение в HTML (Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)).
 
-> **Примечание:** Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/).
+> [!NOTE]
+> Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/).
 
 ## Руководства
 
diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.md b/files/ru/learn/html/tables/structuring_planet_data/index.md
index 66feb9b969c2a6..b6b4d34a0b63e2 100644
--- a/files/ru/learn/html/tables/structuring_planet_data/index.md
+++ b/files/ru/learn/html/tables/structuring_planet_data/index.md
@@ -15,7 +15,8 @@ slug: Learn/HTML/Tables/Structuring_planet_data
 
 Для того, чтобы начать аттестацию, скопируйте [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html), [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css), и [planets-data.txt](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt) в новую директорию на вашем компьютере.
 
-> **Примечание:** В качестве альтернативы, вы можете использовать такие сайты, как [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/), чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять `<script>`/`<style>` элементы в HTML страницу.
+> [!NOTE]
+> В качестве альтернативы, вы можете использовать такие сайты, как [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/), чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять `<script>`/`<style>` элементы в HTML страницу.
 
 ## Краткое описание проекта
 
diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.md b/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
index 8a0321b488934c..367e25e6f0528d 100644
--- a/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
@@ -161,24 +161,6 @@ Math.floor(Math.random() * 100) + 1;
 
 Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.
 
-### SyntaxError: отсутствует ; перед постановкой
-
-Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции `checkGuess()` :
-
-```js
-var userGuess = Number(guessField.value);
-```
-
-на эту
-
-```js
-var userGuess === Number(guessField.value);
-```
-
-Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (`=`), который присваивает значение переменной — с оператором сравнения (`===`), который строго сравнивает операнды, и возвращает `true`/`false` .
-
-> **Примечание:** Загляните на справочную страницу [Синтаксическая ошибка: пропущен символ ; до объявления инструкции](/ru/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) для получения дополнительной информации об этой ошибке.
-
 ### В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели
 
 Причиной этому является все то же перепутывание оператора присваивания (`=`) со строгим сравнением (`===`). Например, если мы изменим внутри `checkGuess()` эту строку кода:
@@ -221,13 +203,13 @@ function checkGuess( {
 
 Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции `checkGuess()`.
 
-### SyntaxError: expected expression, got '_string_' or SyntaxError: unterminated string literal
+### SyntaxError: expected expression, got '_string_' or SyntaxError: string literal contains an unescaped line break
 
 Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше, _строка_ будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.
 
 При всех этих ошибках действуйте так, как в наших примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!
 
-> **Примечание:** : Смотрите наш [SyntaxError: Неожиданный токен](/ru/docs/Web/JavaScript/Reference/Errors/Unexpected_token) и [SyntaxError: незавершённая строка](/ru/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) эталонных страниц для получения более подробной информации об этих ошибках.
+> **Примечание:** : Смотрите [SyntaxError: Unexpected token](/ru/docs/Web/JavaScript/Reference/Errors/Unexpected_token) и [SyntaxError: string literal contains an unescaped line break](/ru/docs/Web/JavaScript/Reference/Errors/String_literal_EOL) для получения более подробной информации об этих ошибках.
 
 ## Резюме
 
diff --git a/files/ru/orphaned/web/javascript/reference/errors/equal_as_assign/index.md b/files/ru/orphaned/web/javascript/reference/errors/equal_as_assign/index.md
deleted file mode 100644
index af44799a3859d3..00000000000000
--- a/files/ru/orphaned/web/javascript/reference/errors/equal_as_assign/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: "SyntaxError: test for equality (==) mistyped as assignment (=)?(тест на равенство (==) опечатка как присваивание (=)?)"
-slug: orphaned/Web/JavaScript/Reference/Errors/Equal_as_assign
-original_slug: Web/JavaScript/Reference/Errors/Equal_as_assign
----
-
-{{jsSidebar("Errors")}}
-
-## Сообщения
-
-```
-Warning: SyntaxError: тест на равенство (==) опечатка как присваивание (=)?
-```
-
-## Тип ошибки
-
-(Только в Firefox) {{jsxref("SyntaxError")}} предупреждение, в котором сообщается, только если `javascript.options.strict` предпочтение установлено в `true`.
-
-## Что пошло не так?
-
-Было присвоение ( = ), когда вы обычно ожидали тест на присвоение (==). Чтобы помочь отладке, JavaScript (с включёнными строгими предупреждениями) предупреждает об этом шаблоне.
-
-## Примеры
-
-### Задание в условных выражениях
-
-Рекомендуется не использовать простые назначения в условном выражении (например, if...else), поскольку при просмотре кода назначение можно спутать с равенством. Например, не используйте следующий код:
-
-```js-nolint example-bad
-if (x = y) {
-  // делать правильные вещи
-}
-```
-
-Если необходимо использовать присваивание в условном выражении, то обычно вокруг него ставят дополнительные скобки. Например:
-
-```js
-if ((x = y)) {
-  // делать правильные вещи
-}
-```
-
-В противном случае вы, вероятно, хотели использовать оператор сравнения (например, = = или ===):
-
-```js
-if (x == y) {
-  // делать правильные вещи
-}
-```
-
-## Смотрите также
-
-- [`if...else`](/ru/docs/Web/JavaScript/Reference/Statements/if...else)
-- [Comparison operators](/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
diff --git a/files/ru/orphaned/web/javascript/reference/errors/undefined_prop/index.md b/files/ru/orphaned/web/javascript/reference/errors/undefined_prop/index.md
deleted file mode 100644
index 1caf390ca8157d..00000000000000
--- a/files/ru/orphaned/web/javascript/reference/errors/undefined_prop/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'ReferenceError: reference to undefined property "x"'
-slug: orphaned/Web/JavaScript/Reference/Errors/Undefined_prop
-original_slug: Web/JavaScript/Reference/Errors/Undefined_prop
----
-
-{{jsSidebar("Errors")}}
-
-## Сообщение
-
-```
-ReferenceError: reference to undefined property "x" (Firefox)
-```
-
-## Тип ошибки
-
-(только в Firefox) Предупреждение {{jsxref("ReferenceError")}}, возникает, только если значение настройки `javascript.options.strict` равно `true`.
-
-## Что пошло не так?
-
-Совершена попытка обращения к свойству объекта, которое не определено. Существует два способа обращения к свойствам: обратитесь к странице справочника {{jsxref("Operators/Property_Accessors", "property accessors", 0, 1)}} для более подробной информации.
-
-## Примеры
-
-### Случаи возникновения ошибки
-
-В данном примере свойство `bar` не определено, поэтому возникнет ошибка `ReferenceError`.
-
-```js example-bad
-var foo = {};
-foo.bar; // ReferenceError: reference to undefined property "bar"
-```
-
-### Правильный код
-
-Чтобы избежать ошибки, потребуется либо задать для объекта свойство `bar`, либо проверить существование данного свойства, прежде чем обращаться к нему. Одним из способов это сделать является использование метода {{jsxref("Object.prototype.hasOwnProperty()")}}:
-
-```js example-good
-var foo = {};
-
-// Задать свойство bar
-
-foo.bar = "moon";
-console.log(foo.bar); // "moon"
-
-// Убедиться, что свойство bar существует, прежде чем обращаться к нему
-
-if (foo.hasOwnProperty("bar")) {
-  console.log(foo.bar);
-}
-```
-
-## Смотрите также
-
-- {{jsxref("Operators/Property_Accessors", "property accessors", 0, 1)}}
diff --git a/files/ru/web/javascript/reference/errors/string_literal_eol/index.md b/files/ru/web/javascript/reference/errors/string_literal_eol/index.md
index 3ec8d3ac1105d6..20fedbb61f0ac6 100644
--- a/files/ru/web/javascript/reference/errors/string_literal_eol/index.md
+++ b/files/ru/web/javascript/reference/errors/string_literal_eol/index.md
@@ -1,20 +1,20 @@
 ---
-title: "SyntaxError: unterminated string literal"
+title: "SyntaxError: string literal contains an unescaped line break"
 slug: Web/JavaScript/Reference/Errors/String_literal_EOL
-original_slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal
 l10n:
-  sourceCommit: d71b141d2d18b96639547856714df19cefacfebf
+  sourceCommit: bd401d0045851cd5c7c145c3acdeabe5062059f5
 ---
 
 {{jsSidebar("Errors")}}
 
-Ошибка JavaScript «незавершённый строковый литерал» возникает, когда где-то встречается незавершённый [строковый литерал](/ru/docs/Web/JavaScript/Guide/Grammar_and_types#строковый_литерал). Строковые литералы должны быть заключены в одинарные (`'`) или двойные (`"`)) кавычки.
+Ошибка JavaScript «строковый литерал содержит неэкранированный перенос строки» возникает, когда где-то встречается незавершённый [строковый литерал](/ru/docs/Web/JavaScript/Guide/Grammar_and_types#строковый_литерал). Строковые литералы должны быть заключены в одинарные (`'`) или двойные (`"`)) кавычки и не могут разбиваться на несколько строк.
 
 ## Сообщение
 
 ```plain
-SyntaxError: Unterminated string constant (Edge)
-SyntaxError: unterminated string literal (Firefox)
+SyntaxError: Invalid or unexpected token (V8-based)
+SyntaxError: '' string literal contains an unescaped line break (Firefox)
+SyntaxError: Unexpected EOF (Safari)
 ```
 
 ## Тип ошибки
diff --git a/files/ru/web/javascript/reference/errors/unexpected_token/index.md b/files/ru/web/javascript/reference/errors/unexpected_token/index.md
index 8ba16daa840f30..8f46ad3f42bd07 100644
--- a/files/ru/web/javascript/reference/errors/unexpected_token/index.md
+++ b/files/ru/web/javascript/reference/errors/unexpected_token/index.md
@@ -1,19 +1,31 @@
 ---
 title: "SyntaxError: Unexpected token"
 slug: Web/JavaScript/Reference/Errors/Unexpected_token
+l10n:
+  sourceCommit: bd401d0045851cd5c7c145c3acdeabe5062059f5
 ---
 
 {{jsSidebar("Errors")}}
 
+Исключения JavaScript «неожиданный токен» возникают, когда синтаксический анализатор не видит в заданной позиции распознаваемый им токен, поэтому он не может понять структуру программы. Это может быть даже из-за опечатки.
+
 ## Сообщение
 
-```
-SyntaxError: expected expression, got "x"
-SyntaxError: expected property name, got "x"
-SyntaxError: expected target, got "x"
-SyntaxError: expected rest argument name, got "x"
-SyntaxError: expected closing parenthesis, got "x"
-SyntaxError: expected '=>' after argument list, got "x"
+```plain
+SyntaxError: Unexpected token ';' (V8)
+SyntaxError: Unexpected identifier 'x' (V8)
+SyntaxError: Unexpected number (V8)
+SyntaxError: Unexpected string (V8)
+SyntaxError: Unexpected regular expression (V8)
+SyntaxError: Unexpected template string (V8)
+
+SyntaxError: unexpected token: identifier (Firefox)
+SyntaxError: expected expression, got "x" (Firefox)
+SyntaxError: expected property name, got "x" (Firefox)
+SyntaxError: expected target, got "x" (Firefox)
+SyntaxError: expected meta, got "x" (Firefox)
+SyntaxError: expected rest argument name, got "x" (Firefox)
+SyntaxError: expected closing parenthesis, got "x" (Firefox)
 ```
 
 ## Тип ошибки
@@ -22,19 +34,19 @@ SyntaxError: expected '=>' after argument list, got "x"
 
 ## Что пошло не так?
 
-Вместо определённой конструкции языка было использовано что-то другое. Возможно, просто опечатка.
+Вместо определённой конструкции языка было использовано что-то другое. Возможно, это просто опечатка.
 
 ## Примеры
 
 ### Ожидаемое выражение
 
-Недопустимыми являются, к примеру, запятые после элементов цепочки выражений.
+Например, в цепочке выражений в конце не допускается использование запятых.
 
-```js example-bad
+```js-nolint example-bad
 for (let i = 0; i < 5,; ++i) {
   console.log(i);
 }
-// SyntaxError: expected expression, got ';'
+// Uncaught SyntaxError: expected expression, got ';'
 ```
 
 Правильным вариантом будет убрать запятую или добавить ещё одно выражение:
@@ -49,13 +61,13 @@ for (let i = 0; i < 5; ++i) {
 
 Иногда можно потерять скобки при использовании `if`:
 
-```js example-bad
-function round(n, upperBound, lowerBound){
-  if(n > upperBound) || (n < lowerBound){
-    throw 'Число ' + String(n) + ' больше, чем ' + String(upperBound) + ', или меньше, чем ' + String(lowerBound);
-  }else if(n < ((upperBound + lowerBound)/2)){
+```js-nolint example-bad
+function round(n, upperBound, lowerBound) {
+  if (n > upperBound) || (n < lowerBound) { // Здесь не хватает скобок!
+    throw new Error(`Число ${n} больше ${upperBound} или меньше ${lowerBound}`);
+  } else if (n < (upperBound + lowerBound) / 2) {
     return lowerBound;
-  }else{
+  } else {
     return upperBound;
   }
 } // SyntaxError: expected expression, got '||'
@@ -63,16 +75,11 @@ function round(n, upperBound, lowerBound){
 
 На первый взгляд кажется, что скобки расставлены правильно, но обратите внимание, что `||` находится не в скобках. Необходимо заключить `||` в скобки:
 
-```js example-good
+```js-nolint example-good
 function round(n, upperBound, lowerBound) {
-  if (n > upperBound || n < lowerBound) {
-    throw (
-      "Число " +
-      String(n) +
-      " больше, чем " +
-      String(upperBound) +
-      ", или меньше, чем " +
-      String(lowerBound)
+  if ((n > upperBound) || (n < lowerBound)) {
+    throw new Error(
+      `Число ${n} больше ${upperBound} или меньше ${lowerBound}`,
     );
   } else if (n < (upperBound + lowerBound) / 2) {
     return lowerBound;
@@ -81,3 +88,7 @@ function round(n, upperBound, lowerBound) {
   }
 }
 ```
+
+## Смотрите также
+
+- {{jsxref("SyntaxError")}}
diff --git a/files/zh-cn/games/anatomy/index.md b/files/zh-cn/games/anatomy/index.md
index 93c0a66638f4e4..0118810568c48e 100644
--- a/files/zh-cn/games/anatomy/index.md
+++ b/files/zh-cn/games/anatomy/index.md
@@ -37,7 +37,8 @@ window.main = () => {
 main(); // 开始循环
 ```
 
-> **备注：** 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`，这不是随意的，它被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。
+> [!NOTE]
+> 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`，这不是随意的，它被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。
 
 上面的代码块有两个语句。第一个语句创建一个名为 `main()` 中的全局变量的函数。这个函数做一些工作，也告诉浏览器在下一帧通过 `window.requestAnimationFrame()` 调用本身。第二个语句调用第一个语句中定义的 `main()` 函数。因为 `main()`中在第二个语句中被调用一次，而每次调用都将自身又放置到下一个帧的执行队列中，因此 `main()` 的调用与你的帧率同步。
 
@@ -73,7 +74,8 @@ main(); // 开始循环
 
 当浏览器遇到这个 IIFE 时，它将定义你的主循环，并立即将其加入下一个帧的更新队列中。`main`（或 `main()` 方法）不会被附加到任何对象，在应用程序的其他地方仍是一个有效的未使用的名称，仍可以自由地定义为其他的东西。
 
-> **备注：** 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用`cancelAnimationFrame()`。
+> [!NOTE]
+> 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用`cancelAnimationFrame()`。
 
 对于第二个问题，要终止循环，你需要调用 `window.cancelAnimationFrame()` 来取消 `main()` 的调用。该方法需要传入你最后一次调用 `requestAnimationFrame()` 时返回的 ID。让我们假设你的游戏的函数和变量是建立在你称为 MyGame 的名称空间上。扩展我们的最后一个例子，主循环现在看起来是这样的：
 
@@ -122,7 +124,8 @@ window.cancelAnimationFrame(MyGame.stopMain);
 
 当我们讨论预算时，许多网络浏览器都有一个称为高分辨率时间的工具。{{jsxref("Date")}} 对象不再是计时事件的识别方法，因为它非常不精确，可以由系统时钟进行修改。另一方面，高分辨率的时间计算自 `navigationStart`（当上一个文档被卸载时）的毫秒数。这个值以小数的精度返回，精确到千分之一毫秒。它被称为{{ domxref("DOMHighResTimeStamp") }}，但是，无论出于什么目的和目的，都认为它是一个浮点数。
 
-> **备注：** 系统（硬件或软件）不能达到微秒精度，可以提供毫秒精度的最小值然而，如果他们能够做到这一点，他们就应该提供 0.001 毫秒的准确性。
+> [!NOTE]
+> 系统（硬件或软件）不能达到微秒精度，可以提供毫秒精度的最小值然而，如果他们能够做到这一点，他们就应该提供 0.001 毫秒的准确性。
 
 这个值本身并不太有用，因为它与一个相当无趣的事件相关，但它可以从另一个时间戳中减去，以便准确准确地确定这两个点之间的时间间隔。要获得这些时间戳中的一个，你可以调用 `window.performance.now()` 并将结果存储为一个变量。
 
@@ -161,7 +164,8 @@ var tNow = window.performance.now();
 
 你将需要对你的主循环作出艰难的决定：如何模拟准确的时间进度。如果你想要控制每一帧，那么你需要确定你的游戏更新和绘制的频率，你甚至可能希望以不同的速率进行更新和绘制。你还需要考虑如果用户的系统无法跟上工作负载，那么你还需考虑如何优雅降级，以保证性能。让我们首先假定你会在每次绘制时，同时处理用户的输入，并更新游戏状态。我们稍后再细讲。
 
-> **备注：** 改变主循环如何处理时间是非常困难的，在进行主循环之前，请仔细考虑你的需求。
+> [!NOTE]
+> 改变主循环如何处理时间是非常困难的，在进行主循环之前，请仔细考虑你的需求。
 
 ### 大多数浏览器游戏应该是什么样的
 
@@ -227,7 +231,8 @@ var tNow = window.performance.now();
 
 单独的更新和绘图方法可能如下面的示例。为了演示，该示例基于第三个项目符号，只是不使用 Web Workers 进行可读性（而且我们诚实地说可写性）。
 
-> **警告：** 这个例子，具体来说，需要进行技术审查。
+> [!WARNING]
+> 这个例子，具体来说，需要进行技术审查。
 
 <!-- prettier-ignore-start -->
 ```js
diff --git a/files/zh-cn/games/index.md b/files/zh-cn/games/index.md
index 6a461dbd76ba0f..48effe80a512d2 100644
--- a/files/zh-cn/games/index.md
+++ b/files/zh-cn/games/index.md
@@ -13,7 +13,8 @@ slug: Games
 
 我们同样提供了参考部分，因此你可以轻易地找到有关游戏开发所有常用的 API。
 
-> **备注：** 在创建一个网页游戏之前你至少需要掌握几种核心的 web 技术，例如 HTML、CSS 和 Javascript。你可以在[学习区](/zh-CN/docs/Learn)开始这些基础知识的学习。
+> [!NOTE]
+> 在创建一个网页游戏之前你至少需要掌握几种核心的 web 技术，例如 HTML、CSS 和 Javascript。你可以在[学习区](/zh-CN/docs/Learn)开始这些基础知识的学习。
 
 ## 将本地游戏移植到 web
 
diff --git a/files/zh-cn/games/publishing_games/game_distribution/index.md b/files/zh-cn/games/publishing_games/game_distribution/index.md
index a161c6fab4d748..f95086c47a7353 100644
--- a/files/zh-cn/games/publishing_games/game_distribution/index.md
+++ b/files/zh-cn/games/publishing_games/game_distribution/index.md
@@ -65,7 +65,8 @@ HTML5 本身是多平台的，所以你只需要写一种代码就可以适配
 
 让我们看看针对不同平台和操作系统的市场/商店有哪些可用选项。
 
-> **备注：** 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。
+> [!NOTE]
+> 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。
 
 ### 网络商店
 
diff --git a/files/zh-cn/games/techniques/2d_collision_detection/index.md b/files/zh-cn/games/techniques/2d_collision_detection/index.md
index 36d0c4f3e9c5da..f932c1f5ab6988 100644
--- a/files/zh-cn/games/techniques/2d_collision_detection/index.md
+++ b/files/zh-cn/games/techniques/2d_collision_detection/index.md
@@ -50,7 +50,9 @@ rect2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('轴对齐包围盒', '700', '300') }}
 
-> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。
+> [!NOTE]
+>
+> [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。
 
 ## 圆形碰撞
 
@@ -122,7 +124,9 @@ circle2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('圆形碰撞', '700', '300') }}
 
-> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/)
+> [!NOTE]
+>
+> [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/)
 
 ## 分离轴定理
 
diff --git a/files/zh-cn/games/techniques/3d_collision_detection/index.md b/files/zh-cn/games/techniques/3d_collision_detection/index.md
index 4062c288d54f9b..e9b44d12f1540c 100644
--- a/files/zh-cn/games/techniques/3d_collision_detection/index.md
+++ b/files/zh-cn/games/techniques/3d_collision_detection/index.md
@@ -19,7 +19,8 @@ l10n:
 
 ![旋转线结动画显示虚拟矩形框随着线结的旋转而收缩和扩大。盒子不旋转。](rotating_knot.gif)
 
-> **备注：** 参考[使用 Three.js 的包围体](/zh-CN/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)，以了解该技术的实际实现。
+> [!NOTE]
+> 参考[使用 Three.js 的包围体](/zh-CN/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)，以了解该技术的实际实现。
 
 ### 点与 AABB
 
@@ -98,7 +99,8 @@ function isPointInsideSphere(point, sphere) {
 }
 ```
 
-> **备注：** 上面的代码有一个平方根，计算开销可能很大。一种简单的优化是将平方距离与平方半径进行比较，以避免这种情况，所以优化后的不等式涉及 `distanceSqr < sphere.radius * sphere.radius`。
+> [!NOTE]
+> 上面的代码有一个平方根，计算开销可能很大。一种简单的优化是将平方距离与平方半径进行比较，以避免这种情况，所以优化后的不等式涉及 `distanceSqr < sphere.radius * sphere.radius`。
 
 ### 球体与球体
 
diff --git a/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
index ab103a2be7c719..44173d9c2ad17a 100644
--- a/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
+++ b/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
@@ -7,7 +7,8 @@ slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
 
 游戏中一个典型的 3D 场景 (最简单的那种) 包含标准的物品比如在坐标轴中的形状，一个实际可看到他们的摄像机，灯光和材质让其看起来不错，动画使其生动等等。 **Three.js**, 和其他 3D 库一样，提供内置的 helper 函数来帮助你尽可能快地实现通用的 3D 功能 . 在这篇文章我们会带你了解使用 Three 的基本知识，包含设置开发者环境，必要的 HTML 结构，Three.js 对象基础，以及如何创建一个基本的 demo.
 
-> **备注：** 我们选择 Three.js 因为它是最流行的[WebGL](/zh-CN/docs/Web/API/WebGL_API) 库之一，并且很容易上手。我们不会介绍任何其他更好的 WebGL 库，你可以自由选择其他库做尝试，比如 [CopperLicht](http://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [OSG.js](http://osgjs.org/), [O3D](https://code.google.com/p/o3d/), 或者其他你喜欢的库。
+> [!NOTE]
+> 我们选择 Three.js 因为它是最流行的[WebGL](/zh-CN/docs/Web/API/WebGL_API) 库之一，并且很容易上手。我们不会介绍任何其他更好的 WebGL 库，你可以自由选择其他库做尝试，比如 [CopperLicht](http://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [OSG.js](http://osgjs.org/), [O3D](https://code.google.com/p/o3d/), 或者其他你喜欢的库。
 
 ## 环境设置
 
@@ -99,7 +100,8 @@ There are other types of camera available (Cube, Orthographic), but the simplest
 
 You should experiment with these values and see how they change what you see in the scene.
 
-> **备注：** The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.
 
 ## Rendering the scene
 
diff --git a/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md
index f3001b7bc83687..51030de486fbe8 100644
--- a/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md
+++ b/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md
@@ -43,7 +43,8 @@ void main() {
 
 让我们构建一个简单的例子来解释这些着色器的动作。假设你已经看过[Three.js 教程](/zh-CN/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)并掌握了场景，物体和材质的基本概念。
 
-> **备注：** 记住你没必要使用 Three.js 或者其他库来编写着色器——纯[WebGL](/zh-CN/docs/Web/API/WebGL_API) 完全够了。我们这里使用 Three.js 来制作背景代码更简单和易理解。所以你只需关注着色器代码。Three.js 和其他 3D 库给你抽象了很多东西出来——如果你想要用纯 WebGL 创建这个例子，你得写很多其他的代码才能运行。
+> [!NOTE]
+> 记住你没必要使用 Three.js 或者其他库来编写着色器——纯[WebGL](/zh-CN/docs/Web/API/WebGL_API) 完全够了。我们这里使用 Three.js 来制作背景代码更简单和易理解。所以你只需关注着色器代码。Three.js 和其他 3D 库给你抽象了很多东西出来——如果你想要用纯 WebGL 创建这个例子，你得写很多其他的代码才能运行。
 
 ### 环境设置
 
@@ -116,7 +117,8 @@ void main() {
 
 每次的`gl_Position` 的结果是计算 model-view 矩阵和投射矩阵和投射矩阵相乘并得到最后的顶点位置。
 
-> **备注：** 你可以在 [顶点处理](/zh-CN/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing)中学到更多关于模型，视图和投射变换，并且你可以在文末看到更多学习链接。
+> [!NOTE]
+> 你可以在 [顶点处理](/zh-CN/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing)中学到更多关于模型，视图和投射变换，并且你可以在文末看到更多学习链接。
 
 `projectionMatrix` 和 `modelViewMatrix` 两个函数都是 Three.js 提供的，并且传入了一个新的 3D 位置向量，转成着色器之后直接导致立方体向 `x` 轴移动 10 个单位，向`z` 轴移动了 5 个单位。我们可以忽略第四个参数并且保持为默认的`1.0` ; 这是用来控制 3D 空间中订单位置裁剪的，这个例子中不需要。
 
diff --git a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md
index 6e2cf71feef011..73820fe4bbefbe 100644
--- a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md
+++ b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md
@@ -11,7 +11,8 @@ l10n:
 
 未来的手游一定是 Web 的天下，许多开发者在游戏开发过程中[首先选择移动端](/zh-CN/docs/Glossary/Mobile_First)——在现代社会，这通常还涉及到触摸控制的实现。在本教程中，我们将看到在 HTML 游戏中实现移动控件是多么容易，并且可以在支持移动触摸的设备上尽情玩耍。
 
-> **备注：** 游戏 [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) 是用 Phaser 构建的，控制管理也是基于 Phaser 的，但也可以用纯 JavaScript 完成。使用 Phaser 的好处是它提供了辅助变量和函数，可以让开发更简单、更快速，但选择哪种方法完全取决于你。
+> [!NOTE]
+> 游戏 [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) 是用 Phaser 构建的，控制管理也是基于 Phaser 的，但也可以用纯 JavaScript 完成。使用 Phaser 的好处是它提供了辅助变量和函数，可以让开发更简单、更快速，但选择哪种方法完全取决于你。
 
 ## 纯 JavaScript 方法
 
@@ -32,7 +33,8 @@ el.addEventListener("touchcancel", handleCancel);
 - 当用户停止触摸屏幕时触发 [touchend](/zh-CN/docs/Web/API/Element/touchend_event) 事件。
 - 当触摸被取消，例如当用户将他们的手指移动到屏幕之外时触发 [touchcancel](/zh-CN/docs/Web/API/Element/touchcancel_event) 事件。
 
-> **备注：** [触摸事件](/zh-CN/docs/Web/API/Touch_events)参考文章提供了更多的实例和介绍。
+> [!NOTE]
+> 参考文章[触摸事件](/zh-CN/docs/Web/API/Touch_events)提供了更多的示例和信息。
 
 ### 纯 JavaScript 示例
 
diff --git a/files/zh-cn/games/techniques/controls_gamepad_api/index.md b/files/zh-cn/games/techniques/controls_gamepad_api/index.md
index 0c8f3bb8b31972..97c75d61a8a534 100644
--- a/files/zh-cn/games/techniques/controls_gamepad_api/index.md
+++ b/files/zh-cn/games/techniques/controls_gamepad_api/index.md
@@ -35,7 +35,8 @@ Game API 的动作展示与 JavaScript 的源代码公布是在完整版的 Hung
 
 以下讨论的代码来自于完整的 Hungry Fridge 游戏中，除了原代码需要 `turbo` 变量来决定是否启动“超级涡轮模式”以外几乎一模一样。此代码可以独立运行，就算不连接控制器也可以。
 
-> **备注：** 一个彩蛋：点击界面右上角的控制器图标有个隐藏选项——不连接控制器也能启动“超级涡轮模式” 。你可以使用键盘上的 A 和 D 控制左右旋转，W 射击，方向键移动。
+> [!NOTE]
+> 一个彩蛋：点击界面右上角的控制器图标有个隐藏选项——不连接控制器也能启动“超级涡轮模式” 。你可以使用键盘上的 A 和 D 控制左右旋转，W 射击，方向键移动。
 
 ## 实现方法
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md
index fc03b14307c324..a6e7e7c01cf805 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md
@@ -58,7 +58,8 @@ startButton.anchor.set(0.5);
 - `this`指定执行上下文的引用
 - 将用于*过度*，*超出*和*向下*事件的框架。
 
-> **备注：** 超越事件与悬停相同，当指针从按钮中移出时，当按下按钮时，向下移动。
+> [!NOTE]
+> 超越事件与悬停相同，当指针从按钮中移出时，当按下按钮时，向下移动。
 
 现在我们需要定义`startGame()`上面代码中引用的函数：
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md
index a0992ac15c1d43..ebe7f931439971 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md
@@ -40,7 +40,8 @@ slug: Games/Tutorials/2D_breakout_game_Phaser
 
 在那之后，你就能随意挑选框架并用在你的项目中;我们选择了 Phaser 这个稳定优越的框架，它有着好的支持和社区环境以及大量优秀的插件。框架加速了开发并能帮你管理无趣的部分，让你专注于有意思的事务。然而，框架也有不好的地方，所以当一些意想不到的事情发生了或者想实现一些框架没有提供的功能时，你就将需要原生的 JavaScript 知识了。
 
-> **备注：** 本系列文章可用作实际游戏开发的材料。如果你想要使用 Phaser 讨论游戏开发，你还可以使用基于本教程的 [Gamedev Phaser 内容套件](https://github.com/end3r/Gamedev-Phaser-Content-Kit).
+> [!NOTE]
+> 本系列文章可用作实际游戏开发的材料。如果你想要使用 Phaser 讨论游戏开发，你还可以使用基于本教程的 [Gamedev Phaser 内容套件](https://github.com/end3r/Gamedev-Phaser-Content-Kit).
 
 ## Next steps
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md
index 646d7b0408081b..c9deb141d99ecc 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md
@@ -19,7 +19,8 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_
 var ball;
 ```
 
-> **备注：** 为了本教程，我们将使用全局变量。**本教程的目的是教导 Phaser 特定的游戏开发方法，而不是主观的最佳方法。**
+> [!NOTE]
+> 为了本教程，我们将使用全局变量。**本教程的目的是教导 Phaser 特定的游戏开发方法，而不是主观的最佳方法。**
 
 ## 加载球精灵
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
index 084b72f37b1103..a0b7c35860d28e 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
@@ -100,7 +100,8 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}
 
-> **备注：** 尝试修改你的代码，在每次碰到墙壁时都要把球的颜色改成随机的颜色。
+> [!NOTE]
+> 尝试修改你的代码，在每次碰到墙壁时都要把球的颜色改成随机的颜色。
 
 ## 下一步
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
index 02dfd5718efaeb..96f4e269fa5250 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
@@ -104,7 +104,8 @@ drawBricks();
 
 {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}
 
-> **备注：** 练习：尝试在行或列上改变砖块数量，或者它们的位置。
+> [!NOTE]
+> 练习：尝试在行或列上改变砖块数量，或者它们的位置。
 
 ## 下一节
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
index 17a28d88cf7132..89449ac1c92d83 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
@@ -127,7 +127,8 @@ collisionDetection();
 
 {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}
 
-> **备注：** 练习：当球碰到砖头时，改变球的颜色。
+> [!NOTE]
+> 练习：当球碰到砖头时，改变球的颜色。
 
 ## 下一节
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
index 7fd94068740c94..c1a617c2a7aa70 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
@@ -105,7 +105,8 @@ ctx.closePath();
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}
 
-> **备注：** 练习：尝试改变给定几何图形的大小和颜色。
+> [!NOTE]
+> 练习：尝试改变给定几何图形的大小和颜色。
 
 ## 下一节
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
index 0466c71636c4e6..c449e4a25f5133 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
@@ -98,7 +98,8 @@ requestAnimationFrame(draw);
 
 {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}
 
-> **备注：** 试着改变生命的数目和球从球板上反弹的角度。
+> [!NOTE]
+> 试着改变生命的数目和球从球板上反弹的角度。
 
 ## 游戏结束——暂时看来！
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
index 7a69d95408cbf6..d76affc5701963 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
@@ -75,7 +75,8 @@ if (y + dy < ballRadius) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}
 
-> **备注：** 当球碰到球拍时，让球移动得更快
+> [!NOTE]
+> 当球碰到球拍时，让球移动得更快
 
 ## 下一步
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md
index 2b9f30ca686b21..0b0d17968c18f2 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md
@@ -32,9 +32,11 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
 
 对于实现一个网页游戏而言，最好的方式是从纯 JavaScirpt 着手，那样可以让我们建立更坚实的基础。之后你可以在你的项目中选择你喜欢的框架。框架也只是用 JavaScript 语言实现的工具；如果你想要在项目中使用框架，你必须先了解语言本身。框架可以帮你提高开发效率并生成一些基础的内容；但是如果没有达到你的预期，你只能慢慢调试或者使用原生 JavaScript 去实现解决方案。
 
-> **备注：** 如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣，可以参考本系列教程的 [2D breakout game using Phaser](/zh-CN/docs/Games/Workflows/2D_breakout_game_Phaser).
+> [!NOTE]
+> 如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣，可以参考本系列教程的 [2D breakout game using Phaser](/zh-CN/docs/Games/Workflows/2D_breakout_game_Phaser).
 
-> **备注：** 本系列教程可以用作游戏开发工作室的素材资源。如果你想探讨普通的游戏开发，你可以利用[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)以及本教程的内容。
+> [!NOTE]
+> 本系列教程可以用作游戏开发工作室的素材资源。如果你想探讨普通的游戏开发，你可以利用[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)以及本教程的内容。
 
 ## 下一步
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
index cba0c33ae86c5b..ee181908804186 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
@@ -118,7 +118,8 @@ drawPaddle();
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}
 
-> **备注：** 让球拍变快变慢，或者改变它的大小。
+> [!NOTE]
+> 让球拍变快变慢，或者改变它的大小。
 
 ## 下一步
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
index c32820ed1c61d6..b9d766662f6a7a 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
@@ -99,7 +99,8 @@ function collisionDetection() {
 
 {{JSFiddleEmbed("https://jsfiddle.net/yumetodo/2m74vr9r/1/","","395")}}
 
-> **备注：** 在每一个砖头击破后添加更多的分数，打印出收集到的点数在游戏结束警告框中。
+> [!NOTE]
+> 在每一个砖头击破后添加更多的分数，打印出收集到的点数在游戏结束警告框中。
 
 ## 下一节
 
diff --git a/files/zh-cn/glossary/accessibility/index.md b/files/zh-cn/glossary/accessibility/index.md
index 76f5bdfcbe9d17..fea9ccfa921fa8 100644
--- a/files/zh-cn/glossary/accessibility/index.md
+++ b/files/zh-cn/glossary/accessibility/index.md
@@ -2,19 +2,29 @@
 title: 无障碍
 slug: Glossary/Accessibility
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-_无障碍网页_（Web Accessibility，缩写：**A11Y**）指尽管在物理条件和技术条件限制下，仍能保证网站可用的最佳实践。{{Glossary("W3C")}} 组织的 {{Glossary("WAI","Web 无障碍倡议")}}（WAI）正式定义和论述了 Web 无障碍技术。
+_无障碍_（Accessibility，缩写：**A11Y**）意味着让尽可能多的人（包括能力受限的）能够使用网站。实现此目标的最常见做法是确保无障碍技术可以正常访问内容。这些技术包括{{glossary("screen reader", "屏幕阅读器")}}、屏幕放大镜、语音识别工具以及替代输入设备等。
+
+你可以使用类似 [Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/scoring) 和 [Firefox 无障碍检查器](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html)这样的工具衡量你的网站的无障碍水平。
+
+{{Glossary("W3C")}} 组织的 {{Glossary("WAI","Web 无障碍倡议")}}（WAI）正式地定义和论述了 Web 无障碍技术。
 
 ## 参见
 
-- [MDN 上的无障碍资源](/zh-CN/docs/Web/Accessibility)
-- 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)词条
+- [无障碍](/zh-CN/docs/Web/Accessibility)
 - [学习无障碍](/zh-CN/docs/Learn/Accessibility)
-- [Web Accessibility In Mind](https://webaim.org/)
-- [MDN 上的 ARIA 文档](/zh-CN/docs/Web/Accessibility/ARIA)
-- [Web 无障碍倡议主页](https://www.w3.org/WAI/)
+- [无障碍富互联网应用（ARIA）](/zh-CN/docs/Web/Accessibility/ARIA)
+- 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)
+- W3C 上的 [Web 无障碍倡议（WAI）](https://www.w3.org/WAI/)
 - [WAI-ARIA 推荐](https://www.w3.org/TR/wai-aria/)
+- [Web Accessibility In Mind](https://webaim.org/)
+- 相关术语：
+  - {{Glossary("ARIA")}}
+  - {{Glossary("Screen reader", "屏幕阅读器")}}
+  - {{Glossary("Accessibility tree", "无障碍树")}}
+  - {{Glossary("Accessible description", "无障碍描述")}}
+  - {{Glossary("Accessible name", "无障碍名称")}}
diff --git a/files/zh-cn/glossary/accessibility_tree/index.md b/files/zh-cn/glossary/accessibility_tree/index.md
index e655299fb09681..dfca4830bd6a8d 100644
--- a/files/zh-cn/glossary/accessibility_tree/index.md
+++ b/files/zh-cn/glossary/accessibility_tree/index.md
@@ -2,7 +2,7 @@
 title: 无障碍树
 slug: Glossary/Accessibility_tree
 l10n:
-  sourceCommit: 1f44fd905e4acbe867ca945b26a8b06ddb646328
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
@@ -19,7 +19,7 @@ l10n:
   - : 除了无障碍名称，我们还可以如何描述这个东西？一个表格的描述可以解释这个表格包含了什么样的信息。
 - [**角色**](/zh-CN/docs/Web/Accessibility/ARIA/Roles)
   - : 这个是什么？例如，这是按钮、导航栏，还是列表？
-- **状态**
+- [**状态**](/zh-CN/docs/Web/Accessibility/ARIA/Attributes)
   - : 它有状态吗？例如，复选框被选中与否、[`<summary>`](/zh-CN/docs/Web/HTML/Element/summary) 元素被展开与否。
 
 除此之外，无障碍树经常包含可以对这个元素进行操作的行为：一个链接可以被*访问*，一个文本输入框可以被*输入*，等等。
@@ -28,6 +28,15 @@ l10n:
 
 ## 参见
 
-- [术语](/zh-CN/docs/Glossary)
+- [无障碍](/zh-CN/docs/Web/Accessibility)
+- [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)
+- [Web Accessibility In Mind](https://webaim.org/)
+- [无障碍富互联网应用（ARIA）](/zh-CN/docs/Web/Accessibility/ARIA)
+- [Web 无障碍倡议（WAI）](https://www.w3.org/WAI/)
+- [WAI-ARIA 推荐](https://w3c.github.io/aria/)
+- 相关术语：
   - {{Glossary("Accessibility", "无障碍")}}
+  - {{Glossary("Accessible description", "无障碍描述")}}
+  - {{Glossary("Accessible name", "无障碍名称")}}
   - {{Glossary("ARIA")}}
diff --git a/files/zh-cn/glossary/accessible_description/index.md b/files/zh-cn/glossary/accessible_description/index.md
index f328085d82033a..26dbeda24fa819 100644
--- a/files/zh-cn/glossary/accessible_description/index.md
+++ b/files/zh-cn/glossary/accessible_description/index.md
@@ -2,27 +2,53 @@
 title: 无障碍描述
 slug: Glossary/Accessible_description
 l10n:
-  sourceCommit: 6d37e664f5981436dfbba7a67f008a30c5238e00
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-**无障碍描述**（Accessible Description）是用户界面元素的描述，可以提供额外的信息给辅助技术，帮助用户理解该元素及其上下文。它是与 HTML 元素相关联的文本描述，可以为辅助技术提供元素除{{glossary("accessible name", "无障碍名称")}}之外的描述内容。
+**无障碍描述**（Accessible Description）是可以提供额外的信息给辅助技术，以帮助用户理解该元素及其上下文的用户界面元素的描述。它是与 HTML 或 SVG 元素相关联的文本描述，可以为辅助技术提供元素除{{glossary("accessible name", "无障碍名称")}}之外的描述内容。这对于依赖于像是{{glossary("Screen_reader", "屏幕阅读器")}}这样的辅助技术的用户而言尤其重要。元素的无障碍描述是{{glossary("accessibility tree", "无障碍树")}}的一部分。
 
-元素的无障碍描述是{{glossary("accessibility tree", "无障碍树")}}的一部分，可使 Web 内容对{{glossary("Screen_reader", "屏幕阅读器")}}和其他辅助技术可用，从而让内容对使用这些技术的用户可用。
+例如，{{htmlelement("table")}} 的无障碍描述是其首个 {{htmlelement("caption")}} 的内容。在一个复杂的数据表中，一两句描述表格的内容就可以为表格提供一段描述信息。这也可以是表格前后（视觉上以及源代码中的顺序）的正文段落。如果在源代码中不是这个顺序，或者想要为此特定建立一个关联，就可以使用 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) 属性来关联表格及其描述文本。
 
-{{htmlelement("table")}} 的无障碍描述是其首个 {{htmlelement("caption")}} 的内容；{{htmlelement("figure")}} 的是 {{htmlelement("figcaption")}} 的内容；{{htmlelement("summary")}} 的是 {{htmlelement("details")}} 的内容；而 {{htmlelement("input")}} 按钮元素，则是 `value` 属性的值，除非该元素有 `aria-describedby` 或者 `aria-description` 属性（这些属性优先）。
+类似地，当一个用户被要求创建一段密码时，`<label>` 元素就能为 `password` 类型的 {{htmlelement("input")}} 提供无障碍名称。好的无障碍描述应当以一种对所有用户都可见的方式包含密码的要求。它也可以通过 `aria-describedby` 属性明确地与输入关联，这样就将其添加到无障碍树中作为该节点的“描述”。
 
-对于其他的元素，它们的描述需要被编程地与相关的元素关联。在这些例子中，如果 `title` 不是该元素的{{glossary("accessible name", "无障碍名称")}}，那么无障碍描述将由 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)、[`aria-description`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description) 或 [`title`](/zh-CN/docs/Web/HTML/Global_attributes#title) 属性提供，且按照这个顺序应用该描述。
-
-无障碍描述被简化为文本字符串。例如，如果元素的 `aria-describedby` 属性值是 HTML 元素 {{htmlelement("img")}} 的 `id`，那么无障碍描述就是图片的描述（通常是图片的 `alt` 属性）。
+描述被简化为文本字符串。在我们的密码示例中，如果输入的 `aria-describedby` 属性值是一个 HTML {{htmlelement("ul")}} 的 `id`，那么描述就由所有列表项的文本和文本等效项连接而成。
 
 你可以查看页面上任何元素的无障碍描述：查看浏览器开发工具的无障碍选项卡——它其中就提供了当前选定元素的无障碍信息。
 
+## 无障碍描述的计算
+
+对于 HTML 元素，如果一个元素没有无障碍描述，那么描述需要通过编程的方式与相关元素关联。无障碍对象模型（AOM）通过按顺序检查以下特性来计算无障碍描述，直到某个特性被定义为止：
+
+1. [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) 属性。
+
+2. [`aria-description`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性。
+
+3. 语言专有的特性可能也会参与到描述的计算中，如果这一特性尚未用于定义{{glossary("accessible name", "无障碍名称")}}。例如：
+
+   - {{htmlelement("summary")}} 由其所嵌套的 {{htmlelement("details")}} 的内容描述。
+   - {{htmlelement("input")}} 按钮（带有 `button`、`submit` 或 `reset` 类型属性）由其 `value` 属性的值描述。
+   - 在 SVG 中，如果存在 [`<desc>`](/zh-CN/docs/Web/SVG/Element/desc) 元素，则由其内容描述；否则如果其后代文本容器元素（即 [`<text>`](/zh-CN/docs/Web/SVG/Element/text)）中的文本尚未被用于{{glossary("accessible name", "无障碍名称")}}，则由这些文本描述。
+
+4. 如果以上的规则都没有满足，那么在 [`title`](/zh-CN/docs/Web/HTML/Global_attributes#title) 不是该元素的{{glossary("accessible name", "无障碍名称")}}的时候将采用这个属性作为元素的无障碍描述。
+
+5. 如果以上都没有定义无障碍描述，那么无障碍描述为空。
+
+这些 HTML 中定义无障碍描述的步骤在 [HTML-AAM 无障碍描述](https://www.w3.org/TR/html-aam-1.0/#accdesc-computation)中给出。SVG 元素的无障碍描述遵循相同的步骤，只是有一些小的差异（在 [SVG-AAM 无障碍描述](https://www.w3.org/TR/svg-aam-1.0/#mapping_additional_nd)中列出）。
+
 ## 参见
 
-- {{glossary("accessible name", "无障碍名称")}}术语
-- [ARIA 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles)
-- [ARIA 属性](/zh-CN/docs/Web/Accessibility/ARIA/Attributes)
+- [无障碍名称与描述计算 1.2（accname）](https://w3c.github.io/accname/#mapping_additional_nd_description)
 - [无障碍](/zh-CN/docs/Web/Accessibility)
 - [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)
+- [Web Accessibility In Mind](https://webaim.org/)
+- [ARIA](/zh-CN/docs/Web/Accessibility/ARIA)
+- [W3C Web 无障碍倡议（WAI）](https://www.w3.org/WAI/)
+- [无障碍富互联网应用（WAI-ARIA）](https://w3c.github.io/aria/)
+- 相关术语：
+  - {{Glossary("Accessibility", "无障碍")}}
+  - {{Glossary("Accessibility tree", "无障碍树")}}
+  - {{Glossary("Accessible name", "无障碍名称")}}
+  - {{Glossary("ARIA")}}
diff --git a/files/zh-cn/glossary/adobe_flash/index.md b/files/zh-cn/glossary/adobe_flash/index.md
index 1bfa637d8eb003..17e6046a95dbb8 100644
--- a/files/zh-cn/glossary/adobe_flash/index.md
+++ b/files/zh-cn/glossary/adobe_flash/index.md
@@ -2,18 +2,23 @@
 title: Adobe Flash
 slug: Glossary/Adobe_Flash
 l10n:
-  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-[**Flash**](https://zh.wikipedia.org/wiki/Adobe_Flash) 是一项由 Adobe 开发的目前已经过时的技术，用于呈现富 Web 应用程序、多媒体内容和流媒体。
-
-自 2021 年开始，Flash 技术不再受 Adobe 及任何主流 Web 浏览器的支持。
+[**Flash**](https://zh.wikipedia.org/wiki/Adobe_Flash) 是一项由 Adobe 开发的目前*已经过时*的技术，用于呈现富 Web 应用程序、多媒体内容和流媒体。通过使用 Flash Player {{glossary("plugin", "插件")}}，Flash 可以在 Web {{glossary("browser", "浏览器")}}中使用。该插件可用于大多数桌面和移动平台，直到 2021 年结束它的生命周期。
 
 ## 参见
 
-- [Adobe Flash 生命周期结束声明](https://blog.adobe.com/en/publish/2017/07/25/adobe-flash-update#gs.g8mmgf)
-- [告别 Chrome 中的 Flash](https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/)
-- [Firefox 关于 Flash 生命周期结束的路线图](https://blog.mozilla.org/futurereleases/2017/07/25/firefox-roadmap-flash-end-life/)
-- [Microsoft Windows 移除 Flash 播放器](https://blogs.windows.com/msedgedev/2020/09/04/update-adobe-flash-end-support/)
+- 维基百科上的 [Flash](https://zh.wikipedia.org/wiki/Adobe_Flash)
+- 维基百科上的 [Adobe Flash Player](https://zh.wikipedia.org/wiki/Adobe_Flash_Player)
+- [Adobe Flash 生命周期结束声明](https://www.adobe.com/products/flashplayer/end-of-life.html)
+  - Chrome：[告别 Chrome 中的 Flash](https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/)
+  - Firefox：[Firefox 关于 Flash 生命周期结束的路线图](https://blog.mozilla.org/futurereleases/2017/07/25/firefox-roadmap-flash-end-life/)
+  - Safari：[Adobe 宣布 Flash 发行和更新结束](https://webkit.org/blog/7839/adobe-announces-flash-distribution-and-updates-to-end/)
+  - Edge：[时代的终结——Adobe Flash 的下一步](https://blogs.windows.com/msedgedev/2017/07/25/flash-on-windows-timeline/)
+  - Windows：[Microsoft Windows 移除 Flash 播放器](https://blogs.windows.com/msedgedev/2020/09/04/update-adobe-flash-end-support/)
+  - Facebook：[将游戏从 Flash 迁移到 Facebook 上的开放 Web 标准](https://developers.facebook.com/blog/post/2017/07/25/Games-Migration-to-Open-Web-Standards/)
+- 相关术语：
+  - {{Glossary("Plugin", "插件")}}
diff --git a/files/zh-cn/glossary/apple_safari/index.md b/files/zh-cn/glossary/apple_safari/index.md
index dfdb1593a1cc62..896b7ac0f8255c 100644
--- a/files/zh-cn/glossary/apple_safari/index.md
+++ b/files/zh-cn/glossary/apple_safari/index.md
@@ -2,12 +2,14 @@
 title: Apple Safari
 slug: Glossary/Apple_Safari
 l10n:
-  sourceCommit: 09e550415b412a74c922cb48df92a85b397523ad
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-[Safari](https://www.apple.com.cn/safari/) 是苹果公司开发的 {{Glossary("Browser","Web 浏览器")}}，与 macOS、iPadOS 和 iOS 相绑定。它基于开源的 [WebKit](https://www.webkit.org/) 引擎。
+[Safari](https://www.apple.com.cn/safari/) 是苹果公司开发的 {{Glossary("Browser","Web 浏览器")}}，内置于其操作系统中，包括 macOS（Mac 计算机）、iPadOS（iPad 平板）、iOS（iPhone 手机）、visionOS（增强现实设备，如 Apple Vision Pro）。
+
+Safari 使用开源的 {{glossary("WebKit")}} 渲染引擎，该引擎源自 [KHTML](https://zh.wikipedia.org/wiki/KHTML)。
 
 ## 参见
 
@@ -16,3 +18,6 @@ l10n:
 - [WebKit 项目](https://www.webkit.org/)
 - [WebKit 构建归档](https://webkit.org/build-archives/)
 - [提交 Safari Bug](https://bugs.webkit.org/)
+- 相关术语：
+  - {{glossary("Browser", "Web 浏览器")}}
+  - {{glossary("WebKit")}}
diff --git a/files/zh-cn/glossary/argument/index.md b/files/zh-cn/glossary/argument/index.md
index 638b54356f057c..f28ce57125a354 100644
--- a/files/zh-cn/glossary/argument/index.md
+++ b/files/zh-cn/glossary/argument/index.md
@@ -2,12 +2,12 @@
 title: 实际参数
 slug: Glossary/Argument
 l10n:
-  sourceCommit: d842f8c32316dbe36cff9fc5e0e777602e32d958
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-**实际参数**（Argument）是作为输入传递给{{Glossary("function", "函数")}}的{{glossary("value", "值")}}，可以是{{Glossary("primitive", "原始值")}}或{{Glossary("object", "对象")}}。
+**实际参数**（Argument）是作为输入传递给{{Glossary("function", "函数")}}的{{glossary("value", "值")}}，可以是{{Glossary("primitive", "原始值")}}或{{Glossary("object", "对象")}}。不要将实际参数与{{Glossary("parameter", "形式参数")}}混淆：形式参数是函数定义中用于引用实际参数的名称。
 
 例如：
 
@@ -40,3 +40,6 @@ function example(parameter) {
 
 - [形式参数与实际参数之间的区别](/zh-CN/docs/Glossary/Parameter#形式参数与实际参数)
 - {{glossary("JavaScript")}} 中的 {{jsxref("Functions/arguments","arguments")}} 对象
+- 相关术语：
+  - {{Glossary("Function", "函数")}}
+  - {{Glossary("Parameter", "形式参数")}}
diff --git a/files/zh-cn/glossary/aria/index.md b/files/zh-cn/glossary/aria/index.md
index fb18a754ede1c7..18e85c1bef577c 100644
--- a/files/zh-cn/glossary/aria/index.md
+++ b/files/zh-cn/glossary/aria/index.md
@@ -1,14 +1,24 @@
 ---
 title: ARIA
 slug: Glossary/ARIA
+l10n:
+  sourceCommit: 66de1f47585ccf1539d5c1cd2b051de7bc19f59d
 ---
 
 {{GlossarySidebar}}
 
-**ARIA** (_Accessible Rich {{glossary("Internet")}} Applications_) 是向{{Glossary("HTML")}} 中添加语义和其他元数据的{{Glossary("W3C")}} 规范，以满足用户的辅助技术的需要。
+**ARIA** (_{{Glossary("Accessibility", "无障碍")}}富{{glossary("Internet", "互联网")}}应用_) 是由 {{glossary("WAI")}} 开发的 {{Glossary("W3C")}} 规范，旨在让 Web 内容与程序对残障人士更加友好。它尤其有助于使用 HTML、JavaScript 和相关技术开发的动态内容和高级用户界面控件。
 
-例如，你可以将 `role="alert"`添加到{{HTMLElement("p")}} {{glossary("tag")}}以通知视力有问题的用户该信息是重要的（否则你可能通过文字颜色传达）。
+例如，你可以将 `role="alert"` 添加到 {{HTMLElement("p")}} {{glossary("tag", "标签")}}来告知视力有问题的用户，这段信息是重要的（要不然你应该会通过文字颜色传达这个意思）。
 
 ## 参见
 
-- [ARIA](/zh-CN/docs/Web/Accessibility/ARIA)
+- [无障碍富互联网应用（ARIA）](/zh-CN/docs/Web/Accessibility/ARIA)
+- [W3C Web 无障碍倡议（WAI）](https://www.w3.org/WAI/)
+- [无障碍富互联网应用（WAI-ARIA）](https://w3c.github.io/aria/)
+- [ARIA 创作实践指南（APG）](https://www.w3.org/WAI/ARIA/apg/)
+- [无障碍](/zh-CN/docs/Web/Accessibility)
+- [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- 相关术语：
+  - {{Glossary("Accessibility", "无障碍")}}
+  - {{Glossary("WAI")}}
diff --git a/files/zh-cn/glossary/ascii/index.md b/files/zh-cn/glossary/ascii/index.md
index f25be0a7fbcad5..0baab93329e684 100644
--- a/files/zh-cn/glossary/ascii/index.md
+++ b/files/zh-cn/glossary/ascii/index.md
@@ -2,18 +2,21 @@
 title: ASCII
 slug: Glossary/ASCII
 l10n:
-  sourceCommit: 7c444c3e6849c0bac7f065ad1dd66c2bf072b819
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-**ASCII**（_American Standard Code for Information Interchange，美国信息交换标准码_）是一种由计算机使用的，使用 7 位来表示 128 个字符的字符编码标准，用于将字母、数字、标点符号和控制码转换为数字形式。
+**ASCII**（_American Standard Code for Information Interchange，美国信息交换标准码_）是一种由计算机使用的，使用 7 位来表示 128 个{{glossary("character", "字符")}}的{{glossary("character encoding", "字符编码")}}标准，用于将字母、数字、标点符号和控制码转换为数字形式。
 
-前 33 个 ASCII 码点是非打印的控制码，包括回车、换行、制表符以及一些源自电报码的过时的非打印码。其他 95 个是可打印字符，包括数字（0-9）、小写字母（a-z）和大写字母（A-Z）以及标点符号。
+前 33 个 ASCII {{glossary("code point", "码位")}}是非打印的控制码，包括回车、换行、制表符以及一些源自电报码的过时的非打印码。其他 95 个是可打印字符，包括数字（0-9）、小写字母（a-z）和大写字母（A-Z）以及标点符号。
 
-许多计算机系统则使用 {{glossary("Unicode")}}，一个拥有数百万个码点，但前 128 个与 ASCII 集相同的编码。{{Glossary("UTF-8")}} 于 2007 年在 Web 上取代了 ASCII。
+现在，大多数的计算机系统都使用 ASCII 的拓展——支持数百万个码位的 {{glossary("Unicode")}}。在 Web 上，{{Glossary("UTF-8")}} 在 2007 年取代了 ASCII。
 
 ## 参见
 
 - 维基百科上的 [ASCII](https://zh.wikipedia.org/wiki/ASCII)
-- IETF 上的 [RFC 20](https://datatracker.ietf.org/doc/rfc20)
+- {{rfc("20")}}
+- 相关术语：
+  - {{glossary("Unicode")}}
+  - {{glossary("UTF-8")}}
diff --git a/files/zh-cn/glossary/atag/index.md b/files/zh-cn/glossary/atag/index.md
index a222231c03dffe..27e055a497ae6c 100644
--- a/files/zh-cn/glossary/atag/index.md
+++ b/files/zh-cn/glossary/atag/index.md
@@ -2,15 +2,25 @@
 title: ATAG
 slug: Glossary/ATAG
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 66de1f47585ccf1539d5c1cd2b051de7bc19f59d
 ---
 
 {{GlossarySidebar}}
 
-ATAG（创作工具{{glossary("Accessibility", "无障碍")}}指南）是 {{Glossary("W3C")}} 为构建能够产生无障碍内容的无障碍创作工具的推荐。
+**创作工具{{glossary("Accessibility", "无障碍")}}指南**（ATAG）是 {{Glossary("W3C")}} 为构建能够产生无障碍内容的无障碍创作工具的推荐。
+
+创作工具是人们用于创作 Web 内容的软件程序。ATAG 具体阐述了如何：
+
+- 让创作工具本身更加**无障碍**，这样残障人士也可以创作 Web 内容。
+- 帮助创作者创作更具无障碍水平的 Web 内容：具体而言，允许、支持并推崇符合 {{glossary("WCAG", "Web 内容无障碍指南")}}（WCAG）的 Web 内容。
 
 ## 参见
 
 - 维基百科的[作为 Web 无障碍倡议一部分的 ATAG](<https://en.wikipedia.org/wiki/Web_Accessibility_Initiative#Authoring_Tool_Accessibility_Guidelines_(ATAG)>)
 - [创作工具无障碍指南概览](https://www.w3.org/WAI/standards-guidelines/atag/)
 - [ATAG 2.0 推荐](https://www.w3.org/TR/ATAG20/)
+- 相关术语：
+  - {{Glossary("Accessibility", "无障碍")}}
+  - {{Glossary("WAI")}}
+  - {{Glossary("WCAG")}}
+  - {{Glossary("UAAG")}}
diff --git a/files/zh-cn/glossary/attribute/index.md b/files/zh-cn/glossary/attribute/index.md
index a900d06795072a..73e3c1e97ffea1 100644
--- a/files/zh-cn/glossary/attribute/index.md
+++ b/files/zh-cn/glossary/attribute/index.md
@@ -2,24 +2,16 @@
 title: 属性（Attribute）
 slug: Glossary/Attribute
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 26635ef6b1a40e538501bd81fdcf98725e14e6ea
 ---
 
 {{GlossarySidebar}}
 
-**属性**（Attribute）可扩展 HTML 或 XML {{Glossary("element", "元素")}}，改变其行为或提供元数据。
+**属性**（Attribute）可扩展 {{Glossary("HTML")}} 或 {{Glossary("XML")}} {{Glossary("element", "元素")}}，改变其行为或提供元数据。
 
-属性的形式总是 `name="value"`（属性的标识符后跟相关的值）。
+属性的形式总是 `name="value"`（属性的标识符后跟相关的值）。你可能会看到没有等号或值的属性。这是在 HTML 中提供空字符串。但是，在 XML 中这是无效的：XML 要求所有属性都有显式值。
 
-你可能会看到没有等号或值的属性。这是在 HTML 中提供空字符串或在 XML 中提供属性名称的简写。
-
-```html
-<input required />
-<!-- 等同于 -->
-<input required="" />
-<!-- 或 -->
-<input required="required" />
-```
+许多 HTML 属性是{{Glossary("Boolean/HTML", "布尔属性")}}。这些属性的值仅由属性的存在或不存在来控制。参见{{Glossary("Boolean/HTML", "布尔属性")}}以获取更多信息。
 
 ## 属性的反射
 
@@ -33,7 +25,7 @@ l10n:
 <input placeholder="原始占位符" />
 ```
 
-我们可以使用 {{domxref("HTMLInputElement.placeholder")}} 检查属性与 {{domxref("HTMLInputElement.placeholder")}} 之间的反射：
+我们可以使用以下代码检查 {{domxref("HTMLInputElement.placeholder")}} 与属性之间的反射：
 
 ```js
 const input = document.querySelector("input");
@@ -43,10 +35,18 @@ console.log(input.placeholder); // 与 `attr.value` 打印的值相同
 
 // 更改占位符的值也会更改反射属性的值。
 input.placeholder = "修改过的占位符";
-console.log(attr.value); // 打印出 `修改过的占位符`
+console.log(attr.value); // 打印 `修改过的占位符`
 ```
 
 ## 参见
 
 - [HTML 属性参考](/zh-CN/docs/Web/HTML/Attributes)
 - 关于 HTML 的[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)的信息
+- [W3C XML 推荐标准](https://www.w3.org/TR/xml#sec-starttags)中的 XML StartTag 属性推荐标准
+- 相关术语：
+  - {{Glossary("Element", "元素")}}
+  - {{Glossary("Tag", "标签")}}
+  - {{Glossary("HTML")}}
+  - {{Glossary("XML")}}
+  - {{Glossary("Boolean/HTML", "布尔属性")}}
+  - {{Glossary("Enumerated", "枚举属性")}}
diff --git a/files/zh-cn/glossary/authentication/index.md b/files/zh-cn/glossary/authentication/index.md
new file mode 100644
index 00000000000000..03ee64908ca160
--- /dev/null
+++ b/files/zh-cn/glossary/authentication/index.md
@@ -0,0 +1,24 @@
+---
+title: 认证
+slug: Glossary/Authentication
+l10n:
+  sourceCommit: 66afe9b59c609043c91e51487cfcecaecbbadb3d
+---
+
+{{GlossarySidebar}}
+
+**认证**通常是证明某个事实是真实的过程。更具体地说，在 Web 安全中，它是验证某个实体（例如用户）所声称的身份的过程。这使得系统能够决定是否授予用户他们请求的访问权限，例如登录到特定帐户。
+
+认证通常通过用户提供用户标识符以及{{glossary("credential", "凭据")}}（例如密码、一次性短信代码或使用私钥签名的断言）来执行。然后系统检查用户标识符和凭据之间的绑定，以便决定是否对用户进行认证。
+
+认证信息，也称为*认证因素*，通常分为三类：
+
+- 用户所知道的东西，例如密码。
+- 用户所拥有的东西，例如手机。
+- 用户自身的特征，例如指纹。
+
+多因素认证（MFA）系统要求用户提供多于一个因素：例如，密码与发送到用户手机的一次性代码的组合。
+
+## 参见
+
+- {{rfc("4949", "互联网安全术语表")}}
diff --git a/files/zh-cn/glossary/base64/index.md b/files/zh-cn/glossary/base64/index.md
index 41e9f0ad8f70f3..53b322e576b1e4 100644
--- a/files/zh-cn/glossary/base64/index.md
+++ b/files/zh-cn/glossary/base64/index.md
@@ -2,20 +2,20 @@
 title: Base64
 slug: Glossary/Base64
 l10n:
-  sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+  sourceCommit: 9409e72722add6d1c4baeaf7b262c9b0985c0bcf
 ---
 
 {{GlossarySidebar}}
 
-**Base64** 是一组相似的[二进制到文本](https://en.wikipedia.org/wiki/Binary-to-text_encoding)（binary-to-text）的编码规则，让二进制数据在解释成 64 进制的表现形式后能够用 ASCII 字符串的格式表示出来。_Base64_ 这个词出自一种特定的 [MIME 内容传输编码](https://zh.wikipedia.org/wiki/多用途互聯網郵件擴展#内容传输编码)。
+**Base64** 是一组相似的[二进制到文本](https://en.wikipedia.org/wiki/Binary-to-text_encoding)（binary-to-text）的编码规则，让二进制数据在解释成 64 进制的表现形式后能够用 {{glossary("ASCII")}} 字符串的格式表示出来。_Base64_ 这个词出自一种特定的 [MIME 内容传输编码](https://zh.wikipedia.org/wiki/多用途互聯網郵件擴展#内容传输编码)。
 
-当单独使用术语"Base64"指代特定算法时，通常指的是 [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) 第 4 节中概述的 Base64 版本。该版本使用以下字母表来表示基于 64 进制的数字，以及 `=` 作为填充字符：
+当单独使用术语“Base64”指代特定{{glossary("algorithm", "算法")}}时，通常指的是 [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) 第 4 节中概述的 Base64 版本。该版本使用以下字母表来表示基于 64 进制的数字，以及使用 `=` 作为填充字符：
 
 ```plain
 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/
 ```
 
-一种常见的变体是“URL 安全的 Base64”，它省略了填充，并将 `+/` 替换为 `-_`，以避免在 URL 路径段或查询参数中可能引起问题的字符的问题。
+一种常见的变体是“URL 安全的 Base64”，它省略了填充，并将 `+/` 替换为 `-_`，以避免在 {{glossary("URL")}} 路径段或查询参数中可能引起问题的字符的问题。如果不将数据放在路径段或查询参数中，你就不需要用到这一变体。例如，[data URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) 既没有路径段也没有查询参数，因此可以使用标准的 Base64 编码。
 
 Base64 编码方案通常用于对二进制数据进行编码，以便在只能处理 ASCII 文本（或某些 ASCII 的超集，仍不接受任意二进制数据）的媒体上进行存储或传输。这确保了数据在传输过程中保持不变。Base64 的常见应用包括：
 
@@ -36,7 +36,8 @@ Base64 编码方案通常用于对二进制数据进行编码，以便在只能
 - {{domxref("Window.btoa()")}}（也在 {{domxref("WorkerGlobalScope.btoa()", "worker 中可用", "", 1)}}）：从二进制数据字符串创建一个 Base64 编码的 ASCII 字符串（“btoa”应看作“从二进制到 ASCII”）
 - {{domxref("Window.atob()")}}（也在 {{domxref("WorkerGlobalScope.atob()", "worker 中可用", "", 1)}}）：解码通过 Base64 编码的字符串数据（“atob”应看作“从 ASCII 到二进制”）
 
-> **备注：** Base64 是一种二进制编码，而不是文本编码，但是在 Web 平台支持二进制数据类型之前，`btoa` 和 `atob` 被添加到了其中。因此，这两个函数使用字符串来表示二进制数据，其中每个字符的{{glossary("code point", "码位")}}表示每个字节的值。这导致了一个普遍的误解，即 `btoa` 可以用来编码任意文本数据，例如创建文本或 HTML 文档的 Base64 `data:` URL。
+> [!NOTE]
+> Base64 是一种二进制编码，而不是文本编码，但是在 Web 平台支持二进制数据类型之前，`btoa` 和 `atob` 被添加到了其中。因此，这两个函数使用字符串来表示二进制数据，其中每个字符的{{glossary("code point", "码位")}}表示每个字节的值。这导致了一个普遍的误解，即 `btoa` 可以用来编码任意文本数据，例如创建文本或 HTML 文档的 Base64 `data:` URL。
 >
 > 然而，字节到码位的对应关系只能可靠地适用于最高为 `0x7f` 的码位。此外，超过 `0xff` 的码位将导致 `btoa` 抛出错误，因为超过了 1 字节的最大值。下一节详细介绍了如何解决在编码任意 Unicode 文本时的这种限制。
 
diff --git a/files/zh-cn/glossary/blink/index.md b/files/zh-cn/glossary/blink/index.md
index 752740990a11ce..1bdc736381ed91 100644
--- a/files/zh-cn/glossary/blink/index.md
+++ b/files/zh-cn/glossary/blink/index.md
@@ -2,12 +2,12 @@
 title: Blink
 slug: Glossary/Blink
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-Blink 是一个开源的浏览器渲染引擎，由谷歌作为 Chromium 项目的一部分开发（因而也是 Chrome 的一部分）。具体而言，Blink 起初是 {{glossary("WebKit")}} 项目中 WebCore 库的分支，用于处理布局、渲染以及 {{Glossary("DOM")}}，不过现在独立出来作为单独的一个{{glossary("rendering engine", "渲染引擎")}}。
+**Blink** 是由谷歌开发的开源浏览器渲染引擎，其是 Chromium 项目的一部分（因而也是 {{glossary("Google Chrome", "Chrome")}} 的一部分）。具体而言，Blink 起初是 {{glossary("WebKit")}} 项目中 WebCore 库的分支，用于处理布局、渲染以及 {{Glossary("DOM")}}，不过现在独立出来作为单独的一个{{glossary("Engine/Rendering", "渲染引擎")}}。
 
 ## 参见
 
@@ -19,4 +19,4 @@ Blink 是一个开源的浏览器渲染引擎，由谷歌作为 Chromium 项目
   - {{glossary("Gecko")}}
   - {{glossary("Trident")}}
   - {{glossary("WebKit")}}
-  - {{glossary("Rendering engine", "渲染引擎")}}
+  - {{glossary("Engine/Rendering", "渲染引擎")}}
diff --git a/files/zh-cn/glossary/block-level_content/index.md b/files/zh-cn/glossary/block-level_content/index.md
index 34198f5e406005..bd26e00e78267e 100644
--- a/files/zh-cn/glossary/block-level_content/index.md
+++ b/files/zh-cn/glossary/block-level_content/index.md
@@ -11,9 +11,11 @@ l10n:
 
 在块级布局中，从包含块的顶部开始，盒子总是一个接着一个地垂直放置。每个盒子的左外边缘触及包含块的左边缘。块级元素总是开始在新的行/列上。在水平书写模式中，像英语或者阿拉伯语，它占据父元素（容器）的整个水平空间和等于其内容高度的垂直空间，从而创建一个“区块”。
 
-> **备注：** 如果包含块的 [`writing-mode`](/zh-CN/docs/Web/CSS/writing-mode) 被设置为[默认值](/zh-CN/docs/Web/CSS/writing-mode#形式定义)之外的值，上述的块布局行为将发生改变。
+> [!NOTE]
+> 如果包含块的 [`writing-mode`](/zh-CN/docs/Web/CSS/writing-mode) 被设置为[默认值](/zh-CN/docs/Web/CSS/writing-mode#形式定义)之外的值，上述的块布局行为将发生改变。
 
-> **备注：** HTML（_超文本标记语言_）元素历来被归类为“块级”元素或者“行级”元素。作为一种表现特性，现在由 CSS 来指定。
+> [!NOTE]
+> HTML（_超文本标记语言_）元素历来被归类为“块级”元素或者“行级”元素。作为一种表现特性，现在由 CSS 来指定。
 
 ## 示例
 
diff --git a/files/zh-cn/glossary/boolean/html/index.md b/files/zh-cn/glossary/boolean/html/index.md
index 7bd7e185e8e451..9b466d5ff9bb6e 100644
--- a/files/zh-cn/glossary/boolean/html/index.md
+++ b/files/zh-cn/glossary/boolean/html/index.md
@@ -2,12 +2,12 @@
 title: 布尔属性（HTML）
 slug: Glossary/Boolean/HTML
 l10n:
-  sourceCommit: fb6bd88d0b3d226a008341198863e1d480f0e49a
+  sourceCommit: 9409e72722add6d1c4baeaf7b262c9b0985c0bcf
 ---
 
 {{GlossarySidebar}}
 
-HTML 中的**布尔属性**是表示 `true` 或 `false` 值的属性。如果 HTML 标签包含布尔属性——无论该属性的值如何——该属性都会在该元素上设置为 `true`。如果 HTML 标签不包含该属性，则该属性被设置为 `false`。
+{{Glossary("HTML")}} **布尔属性**是表示 `true` 或 `false` 值的{{glossary("attribute", "属性")}}。如果 HTML 标签包含布尔属性——无论该属性的值如何——该属性都会在该元素上设置为 `true`。如果 HTML 标签不包含该属性，则该属性被设置为 `false`。
 
 如果属性存在，则取值可以是：
 
@@ -15,7 +15,8 @@ HTML 中的**布尔属性**是表示 `true` 或 `false` 值的属性。如果 HT
 - 空字符串，例如 `attribute=""`
 - 属性的名称本身，没有前导或尾随空格，例如 `attribute="attribute"`
 
-> **备注：** 字符串“true”和“false”是无效的值。要将属性设置为 `false`，则该属性不应出现在元素标签中。尽管现代浏览器将*任何*字符串值视为 `true`，但你也不应该这样做。
+> [!NOTE]
+> 字符串“true”和“false”是无效的值。要将属性设置为 `false`，则该属性不应出现在元素标签中。尽管现代浏览器将*任何*字符串值视为 `true`，但你也不应该这样做。
 
 以下是 HTML 布尔属性 `checked` 的示例：
 
@@ -31,4 +32,8 @@ HTML 中的**布尔属性**是表示 `true` 或 `false` 值的属性。如果 HT
 
 ## 参见
 
-- {{Glossary("Enumerated", "枚举")}}
+- [布尔属性](/zh-CN/docs/Web/HTML/Attributes#布尔属性)
+- HTML 规范中的[布尔属性](https://html.spec.whatwg.org/#boolean-attributes)
+- 相关术语：
+  - {{Glossary("Attribute", "属性")}}
+  - {{Glossary("Enumerated", "枚举属性")}}
diff --git a/files/zh-cn/glossary/breadcrumb/index.md b/files/zh-cn/glossary/breadcrumb/index.md
index d5c55d96ebd8ee..50d098c155b10b 100644
--- a/files/zh-cn/glossary/breadcrumb/index.md
+++ b/files/zh-cn/glossary/breadcrumb/index.md
@@ -15,7 +15,8 @@ l10n:
 
 面包屑路径使用户能够了解其在网站中的位置。如果正确添加了面包屑路径，可以帮助用户知道自己在网站中的位置以及到达该位置的路径。它们还可以帮助用户返回到之前的位置，并减少到达上级页面所需的点击次数。
 
-> **备注：** 虽然没有专门用于面包屑导航菜单的 [HTML 语义元素](https://html.spec.whatwg.org/multipage/semantics-other.html#rel-up)，我们通常使用 {{htmlelement("ol")}} 来表示面包屑导航的分层结构。
+> [!NOTE]
+> 虽然没有专门用于面包屑导航菜单的 [HTML 语义元素](https://html.spec.whatwg.org/multipage/semantics-other.html#rel-up)，我们通常使用 {{htmlelement("ol")}} 来表示面包屑导航的分层结构。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/brotli_compression/index.md b/files/zh-cn/glossary/brotli_compression/index.md
index 1a6b9d115f8aa2..b87a3a6ecbfc5c 100644
--- a/files/zh-cn/glossary/brotli_compression/index.md
+++ b/files/zh-cn/glossary/brotli_compression/index.md
@@ -2,22 +2,24 @@
 title: Brotli 压缩
 slug: Glossary/Brotli_compression
 l10n:
-  sourceCommit: 6f55a0897b5511a2a78bbd70dc611c76eae911ff
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
 **Brotli** 是一种通用的无损压缩算法。它结合使用 LZ77 算法的一个现代变体（[Lempel-Ziv 编码](https://zh.wikipedia.org/wiki/LZ77与LZ78#L277)）、[霍夫曼编码](https://rosettacode.org/wiki/Huffman_coding)和二阶上下文建模来压缩数据，提供了与当前最佳通用压缩方法相媲美的压缩比。
 
-Brotli 提供比 {{glossary("GZip_compression", "gzip")}} 更好的压缩率，压缩速率也与 deflate 相当。但 brotli 压缩速度比 gzip 慢，因此 gzip 可能更适合于压缩不{{glossary("Cache", "可缓存")}}的内容。
+Brotli 提供比 {{glossary("GZip_compression", "gzip")}} 更好的压缩率，压缩速率也与 [deflate](https://zh.wikipedia.org/wiki/Deflate) 相当。但 brotli 压缩速度比 gzip 慢，因此 gzip 可能更适合于压缩不{{glossary("Cache", "可缓存")}}的内容。
 
 Brotli 与大多数现代浏览器兼容，但同时仍需考虑回落机制。
 
 ## 参见
 
-- {{glossary("Lossless compression", "无损压缩")}}
-- {{glossary("Lossy compression", "有损压缩")}}
+- 相关术语：
+  - {{glossary("Lossless compression", "无损压缩")}}
+  - {{glossary("Lossy compression", "有损压缩")}}
 - [brotli.org](https://brotli.org/)
 - [Brotli 的 Github 仓库](https://github.com/google/brotli)
+- [RFC 7932：Brotli 压缩数据格式](https://datatracker.ietf.org/html/rfc7932)
 - 维基百科上的 [Brotli](https://zh.wikipedia.org/wiki/Brotli)
 - [Brotli on Caniuse](https://caniuse.com/#feat=brotli)
diff --git a/files/zh-cn/glossary/browser/index.md b/files/zh-cn/glossary/browser/index.md
index 3bf0167d1b0984..26e2ec8f2ce565 100644
--- a/files/zh-cn/glossary/browser/index.md
+++ b/files/zh-cn/glossary/browser/index.md
@@ -2,21 +2,30 @@
 title: 浏览器
 slug: Glossary/Browser
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
-**网络浏览器**或**浏览器**是一种从 {{Glossary("World Wide Web","Web")}} 获取和显示页面的程序，并且让用户通过{{Glossary("hyperlink","超链接")}}访问更多页面。浏览器是最常见的一种用户代理。
+**Web 浏览器**或**浏览器**是一种从 {{Glossary("World Wide Web", "Web")}} 获取和显示页面的程序，并且允许用户通过{{Glossary("hyperlink", "超链接")}}访问更多页面。浏览器是最常见的一种{{glossary("user agent", "用户代理")}}。浏览器使用{{Glossary("Engine/Rendering", "渲染引擎")}}来显示网页。
+
+常见的浏览器包括：
+
+- {{Glossary("Google Chrome")}}
+- {{Glossary("Mozilla Firefox")}}
+- {{Glossary("Apple Safari")}}
+- {{Glossary("Microsoft Edge")}}
+- {{Glossary("Opera Browser", "Opera 浏览器")}}
 
 ## 参见
 
-- 维基百科上的[浏览器](https://zh.wikipedia.org/wiki/网页浏览器)
-- {{Glossary("user agent", "用户代理")}}（术语）
+- 维基百科上的 [Web 浏览器](https://zh.wikipedia.org/wiki/网页浏览器)
 - {{HTTPHeader("User-agent")}}（HTTP 标头）
 - 下载一个浏览器
-
   - [Mozilla Firefox](https://www.mozilla.org/zh-CN/firefox/)
-  - [Google Chrome](https://www.google.com/chrome/)
+  - [Google Chrome](https://www.google.cn/chrome/)
   - [Microsoft Edge](https://www.microsoft.com/zh-cn/edge)
   - [Opera Browser](https://www.opera.com/)
+- 相关术语：
+  - {{Glossary("Engine/Rendering", "渲染引擎")}}
+  - {{Glossary("User agent", "用户代理")}}
diff --git a/files/zh-cn/glossary/call_stack/index.md b/files/zh-cn/glossary/call_stack/index.md
index bb5c25e4292b86..b910805714a7da 100644
--- a/files/zh-cn/glossary/call_stack/index.md
+++ b/files/zh-cn/glossary/call_stack/index.md
@@ -33,26 +33,31 @@ greeting();
 上面的代码会按照如下流程这样执行：
 
 1. 忽略前面所有函数，直到 `greeting()` 函数被调用。
-2. 把 `greeting()` 添加进调用栈列表。
+2. 把 `greeting()` 添加进调用栈列表，然后我们就得到了：
 
-   > **备注：** 调用栈列表：\- greeting
+   ```plain
+   - greeting
+   ```
 
 3. 执行 `greeting()` 函数体中的所有代码。
 4. 代码执行到 `sayHi()` 的调用语句。
-5. 把 `sayHi()` 添加进调用栈列表。
+5. 把 `sayHi()` 添加进调用栈列表，就像：
 
-   > **备注：** 调用栈列表：\- sayHi
-   > \- greeting
+   ```plain
+   - sayHi
+   - greeting
+   ```
 
 6. 执行 `sayHi()` 函数体中的代码，直到全部执行完毕。
 7. 返回来继续执行 `greeting()` 函数体中 `sayHi()` 后面的代码。
-8. 删除调用栈列表中的 `sayHi()` 函数。
+8. 删除调用栈列表中的 `sayHi()` 函数。现在，调用栈看起来像：
 
-   > **备注：** 调用栈列表：\- greeting
+   ```plain
+   - greeting
+   ```
 
 9. 当 `greeting()` 函数体中的代码全部执行完毕，返回到调用它的代码行，继续执行剩下的 JS 代码。
-10. 删除调用栈列表中的 `greeting()` 函数。
-    > **备注：** 调用栈列表：空白
+10. 删除调用栈列表中的 `greeting()` 函数。调用栈再次变空。
 
 一开始，我们得到一个空白的调用栈。随后，每当有函数被调用都会自动地添加进调用栈，执行完函数体中的代码后，调用栈又会自动地移除这个函数。最后，我们又得到了一个空白的调用栈。
 
diff --git a/files/zh-cn/glossary/certificate_authority/index.md b/files/zh-cn/glossary/certificate_authority/index.md
index 3b3c5bf70325d8..fcca646e3a7fea 100644
--- a/files/zh-cn/glossary/certificate_authority/index.md
+++ b/files/zh-cn/glossary/certificate_authority/index.md
@@ -13,7 +13,8 @@ l10n:
 
 证书颁发机构是互联网[公开密钥基础建设](https://zh.wikipedia.org/wiki/公開金鑰基礎建設)的一部分，允许浏览器验证网站身份，并通过 TLS（即 HTTPS）进行安全连接。
 
-> **备注：** Web 浏览器预装了一组“根证书”。浏览器可以使用这些根证书可靠地检查网站证书是否由“链回”到根证书的证书颁发机构签署的（即被根证书的所有者或中间证书颁发机构信任）。最终，这个过程依赖于每个证书颁发机构在签署证书之前执行充分的身份验证！
+> [!NOTE]
+> Web 浏览器预装了一组“根证书”。浏览器可以使用这些根证书可靠地检查网站证书是否由“链回”到根证书的证书颁发机构签署的（即被根证书的所有者或中间证书颁发机构信任）。最终，这个过程依赖于每个证书颁发机构在签署证书之前执行充分的身份验证！
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/color_wheel/index.md b/files/zh-cn/glossary/color_wheel/index.md
index 2cdb1e67635916..25263123adf1a1 100644
--- a/files/zh-cn/glossary/color_wheel/index.md
+++ b/files/zh-cn/glossary/color_wheel/index.md
@@ -2,7 +2,7 @@
 title: 色环
 slug: Glossary/Color_wheel
 l10n:
-  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
+  sourceCommit: b2af4eb16dd4c399ed81f67efd49777fa6ae9030
 ---
 
 {{GlossarySidebar}}
@@ -17,7 +17,7 @@ l10n:
 
 在计算机领域中，色环被用于*颜色选择器*，比如 macOS 上的默认颜色选择器：
 
-[![macOS 上的默认颜色选择器](color_wheel_macos.png)](/zh-CN/docs/Glossary/Color_wheel/color_wheel_macos.png)
+![macOS 上的默认颜色选择器](color_wheel_macos.png)
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/composite_operation/index.md b/files/zh-cn/glossary/composite_operation/index.md
index ebb97395d4398b..2035f030c43190 100644
--- a/files/zh-cn/glossary/composite_operation/index.md
+++ b/files/zh-cn/glossary/composite_operation/index.md
@@ -15,7 +15,8 @@ l10n:
 - **add**：效果值加到基础值上。
 - **accumulate**：效果值与基础值相结合。
 
-> **备注：** CSS 中的合成操作仅适用于动画。
+> [!NOTE]
+> CSS 中的合成操作仅适用于动画。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/entity/index.md b/files/zh-cn/glossary/entity/index.md
index 8a7f37d4afbd96..0c976656704eb9 100644
--- a/files/zh-cn/glossary/entity/index.md
+++ b/files/zh-cn/glossary/entity/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{glossary("HTML")}} **实体**是一段以连字号（`&`）开头、以分号（`;`）结尾的文本（字符串）。HTML 实体常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）。你也可以用 HTML 字符实体来代替其他难以用标准键盘键入的字符。
 
-> **备注：** 很多字符都有易于记忆的实体。例如版权符号（`©`）的实体是 `&copy;`。对于没那么容易记住的字符，例如 `&#8212;` 或 `&#x2014;`，你可以查看[参照表](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)或使用[解码工具](https://mothereff.in/html-entities)。
+> [!NOTE]
+> 很多字符都有易于记忆的实体。例如版权符号（`©`）的实体是 `&copy;`。对于没那么容易记住的字符，例如 `&#8212;` 或 `&#x2014;`，你可以查看[参照表](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)或使用[解码工具](https://mothereff.in/html-entities)。
 
 ## 保留字符
 
diff --git a/files/zh-cn/glossary/entity_header/index.md b/files/zh-cn/glossary/entity_header/index.md
index fd77efdfc44491..cbf16840772f15 100644
--- a/files/zh-cn/glossary/entity_header/index.md
+++ b/files/zh-cn/glossary/entity_header/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{GlossarySidebar}}
 
-> **警告：** 当前的 HTTP/1.1 规范中不再提及实体、实体标头和实体主体。这中的有些字段现在被称为{{glossary("Representation header", "表示标头")}}。
+> [!WARNING]
+> 当前的 HTTP/1.1 规范中不再提及实体、实体标头和实体主体。这中的有些字段现在被称为{{glossary("Representation header", "表示标头")}}。
 
 实体标头是描述了一个 HTTP 消息有效载荷（即关于消息主体的元数据）的 {{glossary("HTTP_header", "HTTP 标头")}}。实体标头包括 {{HTTPHeader("Content-Length")}}、{{HTTPHeader("Content-Language")}}、{{HTTPHeader("Content-Encoding")}}、{{HTTPHeader("Content-Type")}} 和 {{HTTPHeader("Expires")}} 等。实体标头可能同时存在于 HTTP 请求和响应信息中。
 
diff --git a/files/zh-cn/glossary/first-class_function/index.md b/files/zh-cn/glossary/first-class_function/index.md
index 7d70bf0ec3ebcd..033e462a718a97 100644
--- a/files/zh-cn/glossary/first-class_function/index.md
+++ b/files/zh-cn/glossary/first-class_function/index.md
@@ -23,7 +23,8 @@ foo(); // 用变量来调用它
 
 这里我们把一个*匿名函数*赋值给一个{{glossary("Variable", "变量")}}，然后我们在这个变量后面加上一对圆括号 `()` 来调用这个函数。
 
-> **备注：** 即使你的函数有自己的函数名称，你仍然可以用这个变量名去调用它。给函数命名只会方便你调试，_但不会影响我们调用它。_
+> [!NOTE]
+> 即使你的函数有自己的函数名称，你仍然可以用这个变量名去调用它。给函数命名只会方便你调试，_但不会影响我们调用它。_
 
 ### 将函数作为参数传递
 
@@ -41,7 +42,8 @@ greeting(sayHello, "JavaScript!");
 
 这里我们传递 `sayHello()` 函数作为 `greeting()` 函数的参数，这就印证了头等函数定义所说的——我们把函数当作**值**或者说是**变量**来对待。
 
-> **备注：** 回调函数：我们把一个函数作为参数传递给另一个函数，那么我们就称这个函数为 _{{glossary("callback function", "回调函数")}}_。_`sayHello()` 函数就是一个回调函数_。
+> [!NOTE]
+> 回调函数：我们把一个函数作为参数传递给另一个函数，那么我们就称这个函数为 _{{glossary("callback function", "回调函数")}}_。_`sayHello()` 函数就是一个回调函数_。
 
 ### 返回一个函数
 
@@ -55,7 +57,8 @@ function sayHello() {
 
 在这个例子中，我们需要从另外一个函数中返回一个函数，_之所以可以返回一个函数，是因为在 Javascript 中，函数可被作为**值**来对待。_
 
-> **备注：** 一个返回另外一个函数的函数被称为*高阶函数*。
+> [!NOTE]
+> 一个返回另外一个函数的函数被称为*高阶函数*。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/first_meaningful_paint/index.md b/files/zh-cn/glossary/first_meaningful_paint/index.md
index 3c26f8db9659f9..6efb783903ceea 100644
--- a/files/zh-cn/glossary/first_meaningful_paint/index.md
+++ b/files/zh-cn/glossary/first_meaningful_paint/index.md
@@ -11,7 +11,8 @@ l10n:
 
 首次有效绘制对页面加载中的微小差异非常敏感。这可能导致不一致（双峰分布）的结果。该指标的定义依赖于特定于浏览器的实现细节，这意味着它无法标准化，并且尚未在所有的 Web 浏览器中实现。
 
-> **警告：** 首次有效绘制（FMP）已在 Lighthouse 6.0 中弃用。在未来，请考虑使用 [LargestContentfulPaint API](https://wicg.github.io/largest-contentful-paint/)。
+> [!WARNING]
+> 首次有效绘制（FMP）已在 Lighthouse 6.0 中弃用。在未来，请考虑使用 [LargestContentfulPaint API](https://wicg.github.io/largest-contentful-paint/)。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/forbidden_header_name/index.md b/files/zh-cn/glossary/forbidden_header_name/index.md
index a9bb3d10dd98aa..a0077236082534 100644
--- a/files/zh-cn/glossary/forbidden_header_name/index.md
+++ b/files/zh-cn/glossary/forbidden_header_name/index.md
@@ -36,9 +36,11 @@ l10n:
 - {{HTTPHeader("Upgrade")}}
 - {{HTTPHeader("Via")}}
 
-> **备注：** [根据规范](https://fetch.spec.whatwg.org/#terminology-headers)中的禁止修改的标头列表（Firefox 43 中实现了它），{{HTTPHeader("User-Agent")}} 标头不再被禁止，现在可以设置在 Fetch 的 [Headers](/zh-CN/docs/Web/API/Headers) 对象中，或者通过 `XMLHttpRequest` 的 [setRequestHeader()](/zh-CN/docs/Web/API/XMLHttpRequest/setRequestHeader) 方法设置。但是，Chrome 会不做提示地从 Fetch 请求中丢弃这个标头（请参阅 [Chromium bug 571722](https://bugs.chromium.org/p/chromium/issues/detail?id=571722)）。
+> [!NOTE]
+> 根据[规范](https://fetch.spec.whatwg.org/#terminology-headers)中的禁止修改的标头列表（Firefox 43 中实现了它），{{HTTPHeader("User-Agent")}} 标头不再被禁止，现在可以设置在 Fetch 的 [Headers](/zh-CN/docs/Web/API/Headers) 对象中，或者通过 `XMLHttpRequest` 的 [setRequestHeader()](/zh-CN/docs/Web/API/XMLHttpRequest/setRequestHeader) 方法设置。但是，Chrome 会不做提示地从 Fetch 请求中丢弃这个标头（请参阅 [Chromium bug 571722](https://bugs.chromium.org/p/chromium/issues/detail?id=571722)）。
 
-> **备注：** 虽然[规范](https://fetch.spec.whatwg.org/#forbidden-request-header)中将 {{HTTPHeader("Referer")}} 标头列为禁止修改的标头，但是用户代理并没有完全对其进行控制，因此可以通过编程的方式修改此标头。例如，当使用 [`fetch()`](/zh-CN/docs/Web/API/fetch) 时，可以通过 [`referrer` 选项](/zh-CN/docs/Web/API/fetch#referrer)对 {{HTTPHeader("Referer")}} 标头进行编程修改。
+> [!NOTE]
+> 虽然[规范](https://fetch.spec.whatwg.org/#forbidden-request-header)中将 {{HTTPHeader("Referer")}} 标头列为禁止修改的标头，但是用户代理并没有完全对其进行控制，因此可以通过编程的方式修改此标头。例如，当使用 [`fetch()`](/zh-CN/docs/Web/API/fetch) 时，可以通过 [`referrer` 选项](/zh-CN/docs/Web/API/fetch#referrer)对 {{HTTPHeader("Referer")}} 标头进行编程修改。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/general_header/index.md b/files/zh-cn/glossary/general_header/index.md
index b62c667e847f0e..ffbc3253988828 100644
--- a/files/zh-cn/glossary/general_header/index.md
+++ b/files/zh-cn/glossary/general_header/index.md
@@ -9,4 +9,5 @@ l10n:
 
 **通用标头**是一个过时的术语，其用于指代同时适用于请求和响应的消息，而不适用于内容本身的 {{glossary('Header', 'HTTP 标头')}}（适用于内容的标头称为{{glossary("entity header", "实体标头")}}）。取决于应用的上下文环境，通用标头可以是{{glossary("Response header", "响应标头")}}或者{{glossary("request header", "请求标头")}}（例如，{{HTTPheader("Cache-Control")}}）。
 
-> **备注：** 当前版本的 HTTP/1.1 规范没有明确地划定“通用标头”这一类别。根据上下文，这些标头现在被简单地称为{{glossary("Response header", "响应标头")}}或{{glossary("request header", "请求标头")}}。
+> [!NOTE]
+> 当前版本的 HTTP/1.1 规范没有明确地划定“通用标头”这一类别。根据上下文，这些标头现在被简单地称为{{glossary("Response header", "响应标头")}}或{{glossary("request header", "请求标头")}}。
diff --git a/files/zh-cn/glossary/html5/index.md b/files/zh-cn/glossary/html5/index.md
index f861477866dbe0..fe8887757a2547 100644
--- a/files/zh-cn/glossary/html5/index.md
+++ b/files/zh-cn/glossary/html5/index.md
@@ -13,7 +13,8 @@ l10n:
 
 任何现代网站都应该使用 [HTML 文档类型](/zh-CN/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML#doctype)——这将确保你使用的是最新版本的 HTML。
 
-> **备注：** 在 2019 年之前，{{glossary("W3C")}} 发布的是带有版本号的 HTML5 标准。自 2019 年 5 月 28 日起，W3C 宣布 WHATWG 动态标准为 HTML 的唯一版本。
+> [!NOTE]
+> 在 2019 年之前，{{glossary("W3C")}} 发布的是带有版本号的 HTML5 标准。自 2019 年 5 月 28 日起，W3C 宣布 WHATWG 动态标准为 HTML 的唯一版本。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/http_header/index.md b/files/zh-cn/glossary/http_header/index.md
index f4908a0e71d3eb..5281a9fcbf92bb 100644
--- a/files/zh-cn/glossary/http_header/index.md
+++ b/files/zh-cn/glossary/http_header/index.md
@@ -48,7 +48,8 @@ X-Cache: Hit from cloudfront
 X-Cache-Info: cached
 ```
 
-> **备注：** 规范的旧版本还提及了：
+> [!NOTE]
+> 规范的旧版本还提及了：
 >
 > - {{Glossary("General header", "通用标头")}}：该标头同时适用于请求和响应，但是与在主体中传输的数据无关。
 > - {{Glossary("Entity header", "实体标头")}}: 该标头含有与消息主体相关的附加信息，比如长度或者 MIME 类型（这是现在被称为表示（Representation）元数据标头的超集）。
diff --git a/files/zh-cn/glossary/index.md b/files/zh-cn/glossary/index.md
index 4040bb1d2398d9..bb5589971c70b1 100644
--- a/files/zh-cn/glossary/index.md
+++ b/files/zh-cn/glossary/index.md
@@ -9,4 +9,5 @@ Web 技术文档和代码中含有大量的术语和缩写。本术语表给出
 
 你可以从侧边栏中选择术语表中的词汇。
 
-> **备注：** 编辑术语表是一项永无止境的工作，你可以[添加新的条目](/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary)或改进、完善现有条目。
+> [!NOTE]
+> 编辑术语表是一项永无止境的工作，你可以[添加新的条目](/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary)或改进、完善现有条目。
diff --git a/files/zh-cn/glossary/inline-level_content/index.md b/files/zh-cn/glossary/inline-level_content/index.md
index c95aff291eefb5..d8f3a42e3133d7 100644
--- a/files/zh-cn/glossary/inline-level_content/index.md
+++ b/files/zh-cn/glossary/inline-level_content/index.md
@@ -13,7 +13,8 @@ l10n:
 
 ![行内布局](inline_layout.png)
 
-> **备注：** HTML（_超文本标记语言_）元素历来被归类为“块级”元素或者“行级”元素。作为一种表现特性，现在由 CSS 来指定。
+> [!NOTE]
+> HTML（_超文本标记语言_）元素历来被归类为“块级”元素或者“行级”元素。作为一种表现特性，现在由 CSS 来指定。
 
 ## 示例
 
diff --git a/files/zh-cn/glossary/method/index.md b/files/zh-cn/glossary/method/index.md
index 5fc631ebc2f96c..a933257033ba31 100644
--- a/files/zh-cn/glossary/method/index.md
+++ b/files/zh-cn/glossary/method/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **方法**是一种作为{{glossary("object","对象")}}的{{glossary("property","属性")}}的{{glossary("function","函数")}}。方法有两种类型：*实例方法*是由对象实例执行的内置任务，而[_静态方法_](/zh-CN/docs/Glossary/Static_method)是直接在对象构造函数上调用的任务。
 
-> **备注：** 在 JavaScript 中，函数本身也是对象，因此，在这个上下文中，方法实际上是对函数的{{glossary("object reference","对象引用")}}。
+> [!NOTE]
+> 在 JavaScript 中，函数本身也是对象，因此，在这个上下文中，方法实际上是对函数的{{glossary("object reference","对象引用")}}。
 
 当说 `F` 是 `O` 的一个*方法*时，通常意味着 `F` 将 `O` 作为其 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 绑定。没有根据它们的 `this` 值具有不同行为的函数属性（或者根本没有动态 `this` 绑定的函数——比如[绑定函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)和[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)）可能不被普遍认为是方法。
 
diff --git a/files/zh-cn/glossary/object/index.md b/files/zh-cn/glossary/object/index.md
index 8c154bad3d4db8..fc94976f00a624 100644
--- a/files/zh-cn/glossary/object/index.md
+++ b/files/zh-cn/glossary/object/index.md
@@ -11,7 +11,8 @@ l10n:
 
 对象属性有两种类型：[*数据*属性](/zh-CN/docs/Web/JavaScript/Data_structures#数据属性)和[*访问器*属性](/zh-CN/docs/Web/JavaScript/Data_structures#访问器属性)。
 
-> **备注：** 重要的是要认识到这是访问器*属性*，而不是访问器*方法*。我们可以通过将函数作为值来赋予 JavaScript 对象类*一样*的访问器，但这并不能让对象成为类。
+> [!NOTE]
+> 重要的是要认识到这是访问器*属性*，而不是访问器*方法*。我们可以通过将函数作为值来赋予 JavaScript 对象类*一样*的访问器，但这并不能让对象成为类。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/serializable_object/index.md b/files/zh-cn/glossary/serializable_object/index.md
index f71607f46c33e1..31e41240ca9996 100644
--- a/files/zh-cn/glossary/serializable_object/index.md
+++ b/files/zh-cn/glossary/serializable_object/index.md
@@ -15,4 +15,5 @@ slug: Glossary/Serializable_object
 
 所有的基本类型都是可以被序列化的。但并非所有的对象都是可序列化对象。可以被序列化的对象在[结构化克隆算法 > 支持的类型](/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#支持的类型)中列出。
 
-> **备注：** 可序列化对象在 [Web IDL 文件](https://github.com/w3c/webref/tree/main/ed/idl)中使用属性 `[Serializable]` 标记。
+> [!NOTE]
+> 可序列化对象在 [Web IDL 文件](https://github.com/w3c/webref/tree/main/ed/idl)中使用属性 `[Serializable]` 标记。
diff --git a/files/zh-cn/glossary/sql_injection/index.md b/files/zh-cn/glossary/sql_injection/index.md
index 2a25c70180cadc..83265cc115150e 100644
--- a/files/zh-cn/glossary/sql_injection/index.md
+++ b/files/zh-cn/glossary/sql_injection/index.md
@@ -2,7 +2,7 @@
 title: SQL 注入
 slug: Glossary/SQL_Injection
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: b2af4eb16dd4c399ed81f67efd49777fa6ae9030
 ---
 
 {{GlossarySidebar}}
@@ -11,7 +11,9 @@ SQL 注入利用了未能验证用户输入的 Web 应用程序。黑客可以
 
 SQL 注入可以获得对数据库的未经授权的访问，或直接从数据库检索信息。许多数据泄露事件都是由于 SQL 注入造成的。
 
-[![显示最常见漏洞的饼状图：SQL 注入占 50%，跨站脚本占 42%，源代码泄露占 7%。](sql_inj_xss.gif)](https://cdn.acunetix.com/wp_content/uploads/2010/09/sql_inj_xss.gif)
+![显示最常见漏洞的饼状图：SQL 注入占 50%，跨站脚本占 42%，源代码泄露占 7%。](sql_inj_xss.gif)
+
+[原始来源](https://cdn.acunetix.com/wp_content/uploads/2010/09/sql_inj_xss.gif)
 
 ## 如何实现
 
diff --git a/files/zh-cn/glossary/tls/index.md b/files/zh-cn/glossary/tls/index.md
index 9545cc22f752ae..f0083306f584b2 100644
--- a/files/zh-cn/glossary/tls/index.md
+++ b/files/zh-cn/glossary/tls/index.md
@@ -11,7 +11,8 @@ l10n:
 
 所有现代浏览器都支持 TLS 协议，它们都要求服务器提供一个有效的{{Glossary("Digital certificate", "数字证书")}}来确认身份以建立安全连接。如果客户端和服务器都能提供自己的数字证书，则它们可以互相认证。
 
-> **备注：** 从 2020 年初开始，所有主流浏览器都开始移除对 TLS 1.0 和 1.1 的支持；你需要确保你的 Web 服务器支持 TLS 1.2 或 1.3。从 Firefox 74 开始，当连接到使用较旧 TLS 版本的服务器时，Firefox 将返回一个 [Secure Connection Failed](https://support.mozilla.org/zh-CN/kb/secure-connection-failed-firefox-did-not-connect) 错误（[Firefox bug 1606734](https://bugzil.la/1606734)）。
+> [!NOTE]
+> 从 2020 年初开始，所有主流浏览器都开始移除对 TLS 1.0 和 1.1 的支持；你需要确保你的 Web 服务器支持 TLS 1.2 或 1.3。从 Firefox 74 开始，当连接到使用较旧 TLS 版本的服务器时，Firefox 将返回一个 [Secure Connection Failed](https://support.mozilla.org/zh-CN/kb/secure-connection-failed-firefox-did-not-connect) 错误（[Firefox bug 1606734](https://bugzil.la/1606734)）。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/transient_activation/index.md b/files/zh-cn/glossary/transient_activation/index.md
index d89330ab99db32..a51da85fe43983 100644
--- a/files/zh-cn/glossary/transient_activation/index.md
+++ b/files/zh-cn/glossary/transient_activation/index.md
@@ -15,7 +15,8 @@ l10n:
 
 参见 {{domxref("UserActivation.isActive")}} 属性，以通过编程方式访问当前窗口的瞬态激活状态。
 
-> **备注：** 瞬态激活在超时后会过期（如果没有通过进一步的交互进行更新），并且有些 API 也可能“消耗”它。请参阅{{Glossary("Sticky activation", "粘性激活")}}以了解在初始设置后不会重置的用户激活。
+> [!NOTE]
+> 瞬态激活在超时后会过期（如果没有通过进一步的交互进行更新），并且有些 API 也可能“消耗”它。请参阅{{Glossary("Sticky activation", "粘性激活")}}以了解在初始设置后不会重置的用户激活。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/typescript/index.md b/files/zh-cn/glossary/typescript/index.md
new file mode 100644
index 00000000000000..8b0750c331547e
--- /dev/null
+++ b/files/zh-cn/glossary/typescript/index.md
@@ -0,0 +1,41 @@
+---
+title: TypeScript
+slug: Glossary/TypeScript
+l10n:
+  sourceCommit: 8005d92738cb5678d9b1e434f02ddebaa15c1eaa
+---
+
+{{GlossarySidebar}}
+
+TypeScript 是一个为 JavaScript 添加{{glossary("static_typing", "静态类型检查")}}的编程语言。
+
+TypeScript 是 JavaScript 的超集，这意味着 JavaScript 中所具有的一切也都可以在 TypeScript 中使用，而且每个 JavaScript 程序都是语法合法的 TypeScript 程序。此外，TypeScript 和 JavaScript 的运行时行为是相同的。
+
+然而，TypeScript 添加了编译时类型检查，实现了关于不同类型如何使用和组合的规则。这可以捕获在 JavaScript 中只有在运行时才会遇到的各种编程错误。
+
+一些类型规则是从 JavaScript 中推断出来的。例如，在下面的代码中，TypeScript 推断 `myVariable` 是一个字符串，因此不允许将其重新赋值为不同的类型：
+
+```ts
+let myVariable = "Hello World";
+myVariable = 1;
+// 错误：
+// Type 'number' is not assignable to type 'string'.
+```
+
+TypeScript 还允许程序员对其代码进行注释，以指示例如函数的参数类型或对象的属性：
+
+```ts
+function add(left: number, right: number): number {
+  return left + right;
+}
+
+add("hello", "world");
+// 错误：
+// Argument of type 'string' is not assignable to parameter of type 'number'.
+```
+
+编译后，类型注释会被移除，使得编译输出只是 JavaScript，这意味着它可以在任何 JavaScript 运行时中执行。
+
+## 参见
+
+- [TypeScript 官网](https://www.typescriptlang.org/)
diff --git a/files/zh-cn/glossary/uri/index.md b/files/zh-cn/glossary/uri/index.md
index e37ffa7adc622b..39b0ee175356ef 100644
--- a/files/zh-cn/glossary/uri/index.md
+++ b/files/zh-cn/glossary/uri/index.md
@@ -1,13 +1,17 @@
 ---
 title: URI
 slug: Glossary/URI
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
 ---
 
 {{GlossarySidebar}}
 
-**URI**（统一资源标识符）是一个指向资源的字符串。最通常用在 {{Glossary("URL")}} 上来指定 Web 上资源文件的具体位置。相比之下，{{Glossary("URN")}} 是在给定的命名空间用名字指向具体的资源，如：书本的 ISBN。
+**URI**（统一资源标识符）是一个指向资源的字符串。
+
+最通常用在 {{Glossary("URL")}} 上来指定 Web 上资源文件的具体位置。相比之下，{{Glossary("URN")}} 是在给定的命名空间用名字指向具体的资源，如书本的 ISBN。
 
 ## 参见
 
 - 在维基百科上的 [URI](https://zh.wikipedia.org/wiki/URI)
-- [RFC 3986 on URI](https://tools.ietf.org/html/rfc3986)
+- [关于 URI 的 RFC 3986](https://tools.ietf.org/html/rfc3986)
diff --git a/files/zh-cn/glossary/url/index.md b/files/zh-cn/glossary/url/index.md
index 6a3d6cd304bbb7..957e526970453b 100644
--- a/files/zh-cn/glossary/url/index.md
+++ b/files/zh-cn/glossary/url/index.md
@@ -1,15 +1,17 @@
 ---
 title: URL
 slug: Glossary/URL
+l10n:
+  sourceCommit: 731e5ba6630a220c24b22288b58af70495063555
 ---
 
 {{GlossarySidebar}}
 
-统一资源定位器（**URL**）是指定在 Internet 上可以找到资源的位置的文本字符串。
+**统一资源定位符**（**URL**）是指定在互联网上可以找到资源的位置的文本字符串。
 
-在 {{Glossary("HTTP")}} 的上下文中，URL 被叫做”网络地址“或“链接”。你的浏览器在其地址栏显示 URL，例如 `https://developer.mozilla.org`
+在 {{Glossary("HTTP")}} 的上下文中，URL 被叫做”网络地址“或“链接”。{{glossary("browser", "浏览器")}}在其地址栏显示 URL，例如 `https://developer.mozilla.org`。一些浏览器仅显示 URL 中在“//”之后的部分（即{{Glossary("Domain name", "域名")}}）。
 
-URL 也可用于文件传输（{{Glossary("FTP")}}） ，电子邮件（{{Glossary("SMTP")}}）和其他应用。
+URL 也可用于文件传输（{{Glossary("FTP")}}）、电子邮件（{{Glossary("SMTP")}}）和其他应用。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/urn/index.md b/files/zh-cn/glossary/urn/index.md
index 0390761a6982c7..14e99d0749d53e 100644
--- a/files/zh-cn/glossary/urn/index.md
+++ b/files/zh-cn/glossary/urn/index.md
@@ -1,12 +1,14 @@
 ---
 title: URN
 slug: Glossary/URN
+l10n:
+  sourceCommit: fbc9980c0718c3ead40863b20a74fc8535ebcc85
 ---
 
 {{GlossarySidebar}}
 
-URN（统一资源名称）是标准格式的 URI，指的是资源而不指定其位置或是否存在。这个例子来自[RFC3986](https://www.ietf.org/rfc/rfc3986.txt): `urn:oasis:names:specification:docbook:dtd:xml:4.1.2`
+URN（统一资源名称）是标准格式的 URI，指的是资源而不指定其位置或是否存在。如来自 [RFC3986](https://datatracker.ietf.org/doc/html/rfc3986.txt) 的示例：`urn:oasis:names:specification:docbook:dtd:xml:4.1.2`
 
 ## 参见
 
-- [URN](https://zh.wikipedia.org/wiki/URN) on Wikipedia
+- 维基百科上的 [URN](https://zh.wikipedia.org/wiki/统一资源名称)
diff --git a/files/zh-cn/glossary/usenet/index.md b/files/zh-cn/glossary/usenet/index.md
new file mode 100644
index 00000000000000..a7502f2ae14d15
--- /dev/null
+++ b/files/zh-cn/glossary/usenet/index.md
@@ -0,0 +1,14 @@
+---
+title: Usenet
+slug: Glossary/Usenet
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+Usenet 是一个互联网讨论系统，每个帖子都会在多个服务器上复制。Usenet 相当于当时的互联网论坛，它的功能类似于公告板系统。
+
+## 参见
+
+- 维基百科上的 [Usenet](https://zh.wikipedia.org/wiki/Usenet)
diff --git a/files/zh-cn/glossary/uuid/index.md b/files/zh-cn/glossary/uuid/index.md
new file mode 100644
index 00000000000000..4bd5cc8f6d9a07
--- /dev/null
+++ b/files/zh-cn/glossary/uuid/index.md
@@ -0,0 +1,21 @@
+---
+title: UUID
+slug: Glossary/UUID
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**通用唯一标识符**（UUID）是用于在所有其他同类资源中唯一标识资源的标签。
+
+计算机系统在本地使用非常大的随机数生成 UUID。理论上，这些 ID 可能不是全局唯一的，但重复的概率非常小。如果系统确实需要绝对唯一的 ID，则这些 ID 可能由中央机构分配。
+
+UUID 是 128 位值，通常表示为 36 个字符的字符串，格式为 `123e4567-e89b-12d3-a456-426614174000`（5 个由连字符分隔的十六进制字符串）。有几个版本在计算方式上略有不同；例如，包含时间信息。
+
+正式的定义可以在 [RFC4122: A Universally Unique IDentifier (UUID) URN Namespace](https://www.rfc-editor.org/rfc/rfc4122) 中找到。
+
+## 参见
+
+- 维基百科上的 [UUID](https://zh.wikipedia.org/wiki/通用唯一识别码)
+- [`Crypto.randomUUID()`](/zh-CN/docs/Web/API/Crypto/randomUUID)
diff --git a/files/zh-cn/glossary/ux/index.md b/files/zh-cn/glossary/ux/index.md
index 2ca5d798b3fe27..3ce6f5ef50d5bb 100644
--- a/files/zh-cn/glossary/ux/index.md
+++ b/files/zh-cn/glossary/ux/index.md
@@ -1,14 +1,16 @@
 ---
 title: UX
 slug: Glossary/UX
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
 ---
 
 {{GlossarySidebar}}
 
-UX(User eXperience) 是用户体验的首字母缩写。它是研究用户和系统之间的交互。其目标是使系统易于从用户的角度进行交互。
+**UX** 是 User eXperience 的缩写，意为用户体验。它是对用户与系统之间的交互的研究。其目标是从用户的角度使系统易于交互。
 
-该系统可以是用户最终可以交互的任何类型的产品或应用程序。例如，在网页上进行的 UX 研究可以证明用户是否容易理解页面，引导到不同的页面并完成一般操作，以及减少这些过程中用户的操作步骤。
+系统可以是任何一种用户应该与之交互的产品或应用。例如，对网页进行的 UX 研究可以展示用户是否容易理解页面、导航到不同区域以及完成常见任务，以及哪些过程可以减少摩擦。
 
 ## 参见
 
-- 维基百科[用户体验](https://zh.wikipedia.org/wiki/使用者經驗)
+- 维基百科上的[用户体验](https://zh.wikipedia.org/wiki/使用者經驗)
diff --git a/files/zh-cn/glossary/variable/index.md b/files/zh-cn/glossary/variable/index.md
index 3f03c65e7c2a30..aa67a18e9ac0e9 100644
--- a/files/zh-cn/glossary/variable/index.md
+++ b/files/zh-cn/glossary/variable/index.md
@@ -1,14 +1,16 @@
 ---
 title: 变量
 slug: Glossary/Variable
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
 ---
 
 {{GlossarySidebar}}
 
-变量是{{Glossary("Value", "值")}}的具名引用。这样，不可预测的值可以通过预定的名称来访问。
+变量是{{Glossary("Value", "值")}}的具名引用。这样可以让不可预测的值通过预定的名称来访问。
 
 ## 参见
 
-- 维基百科上的[变量（程序设计）](<https://zh.wikipedia.org/zh-cn/变量_(程序设计)>)词条
+- 维基百科上的[变量（程序设计）](<https://zh.wikipedia.org/zh-cn/变量_(程序设计)>)
 - [在 JavaScript 中声明变量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#声明)
 - [JavaScript 的 `var` 语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/var)
diff --git a/files/zh-cn/glossary/vendor_prefix/index.md b/files/zh-cn/glossary/vendor_prefix/index.md
index c5442da943ec78..7a778a0465aac8 100644
--- a/files/zh-cn/glossary/vendor_prefix/index.md
+++ b/files/zh-cn/glossary/vendor_prefix/index.md
@@ -1,24 +1,26 @@
 ---
 title: 浏览器引擎前缀
 slug: Glossary/Vendor_Prefix
+l10n:
+  sourceCommit: e099e74fe5c09c46f0dfe044894692721a713d29
 ---
 
 {{GlossarySidebar}}
 
-浏览器厂商们有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加前缀，这样开发者就可以用这些新的特性进行试验，同时（理论上）防止他们的试验代码被依赖，从而在标准化过程中破坏 web 开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。
+浏览器厂商有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加前缀，这样开发者就可以用这些新的特性进行试验，同时（理论上）防止他们的试验代码被依赖，从而在标准化过程中破坏 Web 开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。
 
-> **备注：** 浏览器厂商们正在努力停止使用前缀来表示实验性质的代码的行为。Web 开发者一直在生产环境的网站上使用这些实验性代码，这使得浏览器厂商更难保证浏览器兼容性和处理新特性；这也伤害了更小众的浏览器，它们被迫添加其他浏览器前缀以加载热门网站。
->
-> 现在的趋势是将实验性功能添加在需要用户自行设置偏好或标记（flag）的地方，同时编写一个更小规模的规范，以更快达到稳定状态。
+Web 开发者一直在生产环境的网站上使用这些实验性代码，这使得浏览器厂商更难保证浏览器兼容性和处理新特性；这也伤害了更小众的浏览器，它们被迫添加其他浏览器前缀以渲染热门网站。
+
+现在，浏览器引擎的实验性特性被“放在一个标志（flag）后面”。这使得开发者可以更改浏览器配置来测试即将到来的特性。浏览器现在通过用户控制的标志（flag）或首选项添加实验性特性。标志会被用于较小的规范，以更快达到稳定状态。
 
 ## CSS 前缀
 
-主流浏览器引擎前缀：
+你在旧代码中可能会看到的最常见的浏览器 CSS 前缀包括：
 
-- `-webkit-` （谷歌，Safari，新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 WebKit 内核的浏览器）
-- `-moz-` （火狐浏览器）
-- `-o-` （旧版 Opera 浏览器）
-- `-ms-` （IE 浏览器 和 Edge 浏览器）
+- `-webkit-`（Chrome、Safari、新版 Opera 浏览器以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；简单的说，所有基于 WebKit 内核的浏览器）
+- `-moz-`（火狐浏览器）
+- `-o-`（旧版、WebKit 之前的 Opera 浏览器）
+- `-ms-`（IE 浏览器和 Chromium 之前的 Edge 浏览器）
 
 示例：
 
@@ -30,6 +32,12 @@ slug: Glossary/Vendor_Prefix
 transition: all 4s ease;
 ```
 
+如果你在代码库中遇到上面的代码，你可以安全地删除除最后一行之外的所有内容。所有浏览器都已支持不带浏览器引擎前缀的[过渡](/zh-CN/docs/Web/CSS/transition#浏览器兼容性)：
+
+```css
+transition: all 4s ease;
+```
+
 ## API 前缀
 
 过去，浏览器引擎也使用前缀修饰实验性质的 API。如果整个接口都是实验性的，前缀修饰的就是接口名（但不包括其中的属性或者方法）。如果将一个实验性的接口或者方法添加到一个标准化的接口中，这个新增的接口或者方法被前缀修饰。
@@ -38,19 +46,19 @@ transition: all 4s ease;
 
 需要使用大写的前缀修饰接口名：
 
-- `WebKit` (谷歌，Safari, 新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器 (包括 iOS 系统中的火狐浏览器); 简单的说，所有基于 WebKit 内核的浏览器)
-- `Moz` (火狐浏览器)
-- `O` (旧版 Opera 浏览器)
-- `MS` (IE 浏览器 和 Edge 浏览器)
+- `WebKit`（Chrome、Safari、新版 Opera 浏览器以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；简单的说，所有基于 WebKit 内核的浏览器）
+- `Moz`（火狐浏览器）
+- `O`（旧版、WebKit 之前的 Opera 浏览器）
+- `MS`（IE 浏览器和 Chromium 之前的 Edge 浏览器）
 
 ### 属性和方法前缀
 
 需要使用小写的前缀修饰属性或者方法
 
-- `webkit` (谷歌，Safari, 新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器 (包括 iOS 系统中的火狐浏览器); 简单的说，所有基于 WebKit 内核的浏览器)
-- `moz` (火狐浏览器)
-- `o` (旧版 Opera 浏览器等
-- `ms` (IE 浏览器 和 Edge 浏览器)
+- `webkit`（Chrome、Safari、新版 Opera 浏览器以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；简单的说，所有基于 WebKit 内核的浏览器）
+- `moz`（火狐浏览器）
+- `o`（旧版、WebKit 之前的 Opera 浏览器）
+- `ms`（IE 浏览器和 Chromium 之前的 Edge 浏览器）
 
 示例：
 
@@ -65,4 +73,6 @@ window.requestAnimationFrame =
 
 ## 参见
 
+- [`-moz-` 浏览器引擎前缀 CSS 拓展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)
+- [`-webkit-` 浏览器引擎前缀 CSS 拓展](/zh-CN/docs/Web/CSS/WebKit_Extensions)
 - 维基百科[浏览器引擎前缀](https://zh.wikipedia.org/wiki/CSS濾器#前缀_滤镜)
diff --git a/files/zh-cn/glossary/viewport/index.md b/files/zh-cn/glossary/viewport/index.md
index fcfd130fcb45d0..93d6e003a841d5 100644
--- a/files/zh-cn/glossary/viewport/index.md
+++ b/files/zh-cn/glossary/viewport/index.md
@@ -1,14 +1,21 @@
 ---
-title: Viewport
+title: 视口
 slug: Glossary/Viewport
+l10n:
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
 ---
 
 {{GlossarySidebar}}
 
 在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。
 
-视口当前可见的部分叫做**可视视口**（visual viewport）。可视视口可能会比**布局视口**（layout viewport）更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了。
+视口当前可见的部分叫做[**可视视口**](/zh-CN/docs/Glossary/Visual_viewport)。可视视口可能会比[**布局视口**](/zh-CN/docs/Glossary/Layout_viewport)更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了。
 
 ## 参见
 
+- [可视视口 API](/zh-CN/docs/Web/API/Visual_Viewport_API)
 - 维基百科上的[视口](https://zh.wikipedia.org/wiki/视口)
+- [两个视口的故事](https://www.quirksmode.org/mobile/viewports.html)（Quirksmode）
+- 相关术语：
+  - {{Glossary("Visual viewport", "可视视口")}}
+  - {{Glossary("Layout viewport", "布局视口")}}
diff --git a/files/zh-cn/glossary/visual_viewport/index.md b/files/zh-cn/glossary/visual_viewport/index.md
new file mode 100644
index 00000000000000..3053237cd75fc6
--- /dev/null
+++ b/files/zh-cn/glossary/visual_viewport/index.md
@@ -0,0 +1,19 @@
+---
+title: 可视视口
+slug: Glossary/Visual_Viewport
+l10n:
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
+---
+
+{{GlossarySidebar}}
+
+{{Glossary("viewport", "视口")}}的当前可见部分被称作是可视视口。这可能比布局视口小，例如当用户进行了缩放操作时。可视视口是屏幕上的可视部分，不包括屏幕键盘、缩放区域外的区域，以及任何不随页面尺寸变化的屏幕上的物件。
+
+## 参见
+
+- [可视视口 API](/zh-CN/docs/Web/API/Visual_Viewport_API)
+- 维基百科上的[视口](https://zh.wikipedia.org/wiki/视口)
+- [两种视口的故事](https://www.quirksmode.org/mobile/viewports.html)（Quirksmode）
+- 相关术语：
+  - {{Glossary("Viewport", "视口")}}
+  - {{Glossary("Layout viewport", "布局视口")}}
diff --git a/files/zh-cn/glossary/void_element/index.md b/files/zh-cn/glossary/void_element/index.md
index e1fb215ad5dc80..7117a35f44aa1f 100644
--- a/files/zh-cn/glossary/void_element/index.md
+++ b/files/zh-cn/glossary/void_element/index.md
@@ -44,7 +44,8 @@ _HTML 中不存在自闭合标签（`<tag />`）。_
 
 在 SVG 和 MathML 中，有任何子节点的元素不允许使用自闭合标签。在这种情况下，如果元素的开始标签被标记为自闭合，则该元素不能有结束标签。
 
-> **备注：** 如果开始标签中的尾随 `/`（斜杠）字符直接位于未使用引号包裹的属性值之后（两者之间没有空格），则该斜杠字符将成为属性值的一部分，而不是被解析器丢弃。例如，标记 `<img src=http://www.example.com/logo.svg/>` 会导致 `src` 属性的值为 `http://www.example.com/logo.svg/`——这会导致 URL 错误。
+> [!NOTE]
+> 如果开始标签中的尾随 `/`（斜杠）字符直接位于未使用引号包裹的属性值之后（两者之间没有空格），则该斜杠字符将成为属性值的一部分，而不是被解析器丢弃。例如，标记 `<img src=http://www.example.com/logo.svg/>` 会导致 `src` 属性的值为 `http://www.example.com/logo.svg/`——这会导致 URL 错误。
 
 ## 参见
 
diff --git a/files/zh-cn/glossary/wcag/index.md b/files/zh-cn/glossary/wcag/index.md
new file mode 100644
index 00000000000000..494d6cdf5241c8
--- /dev/null
+++ b/files/zh-cn/glossary/wcag/index.md
@@ -0,0 +1,28 @@
+---
+title: WCAG
+slug: Glossary/WCAG
+l10n:
+  sourceCommit: 3163ae00b0d8ac11dc752ea9f7d956bd00551a3e
+---
+
+{{GlossarySidebar}}
+
+_Web 内容无障碍指南_（**WCAG**）是由 {{Glossary("W3C")}} {{Glossary("WAI","Web 无障碍倡议")}}组发布的一些建议。它们概述了一组主要面向残障人士的内容无障碍指南，但也适用于移动电话等资源有限的设备。
+
+WCAG 2.0 于 2008 年 12 月 11 日发布，取代了 WCAG 1.0。它由 12 条指南组成，分为 4 个原则（可感知、可操作、可理解和健壮性），每个指南都有可测试的成功标准。
+
+WCAG 使用三个一致性水平：
+
+- 优先级 1：Web 开发人员**必须**满足这些要求，否则将无法让一个或多个群体访问 Web 内容。符合此级别的描述为 A。
+- 优先级 2：Web 开发人员**应该**满足这些要求，否则一些群体将发现访问 Web 内容变得困难。符合此级别的描述为 AA 或双 A。
+- 优先级 3：Web 开发人员**可以**满足这些要求，以便让一些群体更容易访问 Web 内容。符合此级别的描述为 AAA 或三 A。
+
+[WCAG 2.2](https://www.w3.org/TR/WCAG22/) 和 [WCAG 3.0](https://www.w3.org/TR/wcag-3.0/) 的工作正在进行中。
+
+## 参见
+
+- 维基百科上的 [WCAG](https://zh.wikipedia.org/wiki/Web内容无障碍指南)
+- [MDN 上的无障碍信息](/zh-CN/docs/Web/Accessibility/Information_for_Web_authors)
+- [W3C 上的 WCAG 2.0 推荐标准](https://www.w3.org/Translations/WCAG20-zh/)
+- [Web 内容无障碍指南（WCAG）2.2：候选推荐标准](https://www.w3.org/TR/WCAG22/)
+- [W3C 内容无障碍指南（WCAG）3.0：工作草案](https://www.w3.org/TR/wcag-3.0/)
diff --git a/files/zh-cn/glossary/web_performance/index.md b/files/zh-cn/glossary/web_performance/index.md
new file mode 100644
index 00000000000000..5d57c52ed0cb98
--- /dev/null
+++ b/files/zh-cn/glossary/web_performance/index.md
@@ -0,0 +1,17 @@
+---
+title: Web 性能
+slug: Glossary/Web_performance
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**Web 性能**是从用户请求内容到用户的浏览器中显示请求的内容的时间、客观的渲染时间以及加载时间和运行时间的主观用户体验。
+
+客观上，它是测量网页或 Web 应用程序下载、在用户的 Web 浏览器中绘制并变得响应和交互所需的时间，以毫秒为单位。它是每秒帧数和主线程不可用于用户交互的时间。主观上，它是用户对从请求内容到用户认为所请求的内容可用的时间感知：用户*觉得*所花费的时间是快还是慢。
+
+## 参见
+
+- [学习 Web 性能](/zh-CN/docs/Learn/Performance)
+- [感知性能](/zh-CN/docs/Glossary/Perceived_performance)
diff --git a/files/zh-cn/glossary/web_standards/index.md b/files/zh-cn/glossary/web_standards/index.md
new file mode 100644
index 00000000000000..5fdbd5664f984c
--- /dev/null
+++ b/files/zh-cn/glossary/web_standards/index.md
@@ -0,0 +1,32 @@
+---
+title: Web 标准
+slug: Glossary/Web_standards
+l10n:
+  sourceCommit: 86b695e507a30ebcbb5348710b001ca03bff74b4
+---
+
+{{GlossarySidebar}}
+
+Web 标准是由国际标准组织制定的规则，用于定义 {{Glossary("World Wide Web", "Web")}} 的工作方式（有时也控制{{Glossary("Internet", "因特网")}}）。
+
+有几个标准组织负责定义 Web 的不同方面，所有标准必须协调一致，以使 Web 的可用性和可访问性最大化。Web 标准也必须不断发展，以改进当前状态并适应新的情况。
+
+以下是一个非详尽的列表，让你了解网站和网络系统必须符合的标准：
+
+- **IETF**（互联网工程任务组）：互联网标准（STD），其中包括管理 {{Glossary("URI", "URI")}}、{{Glossary("HTTP")}} 和 {{Glossary("MIME")}} 的设置和使用等内容
+- **{{Glossary("W3C")}}**：标记语言（例如 {{Glossary("HTML")}}）、样式定义（即 {{Glossary("CSS")}}）、{{Glossary("DOM")}}、{{Glossary("Accessibility", "无障碍")}}等规范
+- **IANA**（互联网号码分配局）：名称和号码的注册管理
+- **Ecma 国际**：脚本标准，最突出的是 {{Glossary("JavaScript")}} 标准
+- **{{Glossary("ISO")}}**（国际标准化组织）：涵盖各种方面的标准，包括字符编码、网站管理和用户界面设计等
+
+## 反对标准
+
+偶尔地，标准组织的成员可能对某个特性的发展方式存在分歧，有些人可能**反对**它。这意味着与当前形式的特性存在分歧的技术实施者（例如 Web 浏览器供应商）可能永远不会实现它。
+
+*同意*该特性的供应商通常仍会实现它，以便可以对其进行实验并提供反馈。这使得感兴趣的各方可以构建用例并展示该特性的问题，希望能够达成对未来版本的共识。
+
+标准组织的成员通常会发布他们对不同标准的立场记录，供参考。例如，参见 [Mozilla 规范立场](https://mozilla.github.io/standards-positions/)和 [WebKit 标准立场](https://webkit.org/standards-positions/)。
+
+## 参见
+
+- 维基百科上的 [Web 标准](https://zh.wikipedia.org/wiki/網頁標準)
diff --git a/files/zh-cn/glossary/webassembly/index.md b/files/zh-cn/glossary/webassembly/index.md
new file mode 100644
index 00000000000000..fe77e194978954
--- /dev/null
+++ b/files/zh-cn/glossary/webassembly/index.md
@@ -0,0 +1,16 @@
+---
+title: WebAssembly
+slug: Glossary/WebAssembly
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**WebAssembly**（缩写 _Wasm_）是一种开放的{{Glossary("binary", "二进制")}}编程格式，可以在现代 Web {{Glossary("Browser", "浏览器")}}中运行，以提高性能，并为网页提供新特性。
+
+## 参见
+
+- 维基百科上的 [WebAssembly](https://zh.wikipedia.org/wiki/WebAssembly)
+- [官网](https://webassembly.org/)
+- MDN 上的 [WebAssembly](/zh-CN/docs/WebAssembly)
diff --git a/files/zh-cn/glossary/webvtt/index.md b/files/zh-cn/glossary/webvtt/index.md
new file mode 100644
index 00000000000000..ade2f03db742d6
--- /dev/null
+++ b/files/zh-cn/glossary/webvtt/index.md
@@ -0,0 +1,18 @@
+---
+title: WebVTT
+slug: Glossary/WebVTT
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+WebVTT（Web 视频文本轨道）是一种 {{Glossary("W3C")}} 规范的用于和 HTML 的 {{HTMLElement("track")}} 元素一起标记文本轨道资源的文件格式。
+
+WebVTT 文件提供了与音频或视频内容同步的元数据，如视频内容的字幕或标题、视频描述的文本、内容导航的章节等。
+
+## 参见
+
+- 维基百科上的 [WebVTT](https://zh.wikipedia.org/wiki/WebVTT)
+- MDN 上的 [WebVTT](/zh-CN/docs/Web/API/WebVTT_API)
+- [规范](https://www.w3.org/TR/webvtt1/)
diff --git a/files/zh-cn/glossary/windowproxy/index.md b/files/zh-cn/glossary/windowproxy/index.md
new file mode 100644
index 00000000000000..54ecec0c59bd8e
--- /dev/null
+++ b/files/zh-cn/glossary/windowproxy/index.md
@@ -0,0 +1,15 @@
+---
+title: WindowProxy
+slug: Glossary/WindowProxy
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**`WindowProxy`** 对象是 [`Window`](/zh-CN/docs/Web/API/Window) 对象的包装器。`WindowProxy` 对象存在于每个[浏览上下文](/zh-CN/docs/Glossary/Browsing_context)中。对 `WindowProxy` 对象执行的所有操作也将应用于它当前包装的底层 `Window` 对象。因此，和 `WindowProxy` 对象直接交互几乎与直接和 `Window` 对象交互相同。当浏览上下文被导航时，其 `WindowProxy` 包装的 `Window` 对象会发生变化。
+
+## 参见
+
+- HTML 规范：[WindowProxy 小节](https://html.spec.whatwg.org/multipage/window-object.html#the-windowproxy-exotic-object)
+- Stack Overflow 问题：[WindowProxy 与 Window 对象？](https://stackoverflow.com/questions/16092835/windowproxy-and-window-objects)
diff --git a/files/zh-cn/glossary/wrapper/index.md b/files/zh-cn/glossary/wrapper/index.md
new file mode 100644
index 00000000000000..6475454b2d5a09
--- /dev/null
+++ b/files/zh-cn/glossary/wrapper/index.md
@@ -0,0 +1,21 @@
+---
+title: 包装器
+slug: Glossary/Wrapper
+l10n:
+  sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
+---
+
+{{GlossarySidebar}}
+
+在诸如 JavaScript 之类的编程语言中，包装器是一种函数，旨在调用一个或多个其他函数，有时纯粹是为了方便，有时是为了在此过程中使它们执行略有不同的任务。
+
+例如，AWS 的 SDK 库就是包装器的例子。
+
+## 参见
+
+- 维基百科上的[包装函数](https://zh.wikipedia.org/wiki/包裝函式)
+- 相关术语：
+
+  - {{Glossary("API")}}
+  - {{Glossary("Class", "类")}}
+  - {{Glossary("Function", "函数")}}
diff --git a/files/zh-cn/glossary/xforms/index.md b/files/zh-cn/glossary/xforms/index.md
index bf5a5ac06e9755..d8011c64fcb612 100644
--- a/files/zh-cn/glossary/xforms/index.md
+++ b/files/zh-cn/glossary/xforms/index.md
@@ -9,4 +9,5 @@ l10n:
 
 **XForms** 是一种使用 {{glossary("XML")}} 格式来构建 Web 表单和处理表单数据的约定。
 
-> **备注：** 主流浏览器不再支持 XForms，我们建议使用 [HTML 表单](/zh-CN/docs/Learn/Forms)代替。
+> [!NOTE]
+> 主流浏览器不再支持 XForms，我们建议使用 [HTML 表单](/zh-CN/docs/Learn/Forms)代替。
diff --git a/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.md b/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.md
index caa221b8231254..d1af6ef2061b62 100644
--- a/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.md
@@ -37,7 +37,8 @@ slug: Learn/Accessibility/Accessibility_troubleshooting
 
 你会看到评估的起始状态的显示有一些差异/问题——这主要是由于标记的不同，这反过来又导致一些样式问题，因为 CSS 没有被正确应用。不要担心——你将在接下来的章节中解决这些问题！
 
-> **备注：** 如果你卡住了，就可以寻求帮助——请参阅本页面底部的[测验或进一步的帮助](#测验或进一步的帮助)章节。
+> [!NOTE]
+> 如果你卡住了，就可以寻求帮助——请参阅本页面底部的[测验或进一步的帮助](#测验或进一步的帮助)章节。
 
 ## 项目简要
 
@@ -53,7 +54,8 @@ slug: Learn/Accessibility/Accessibility_troubleshooting
 2. 你能不能更新文章的文字，让屏幕阅读器的使用者更容易浏览？
 3. 网站的导航菜单部分（被包裹在 `<div class="nav"></div>` 中）可以通过把它放在一个适当的 HTML 语义元素中而变得更容易访问。它应该被更新为哪一个？请进行更新。
 
-> **备注：** 你需要更新 CSS 规则选择器，将标签的样式改为语义标题的适当等价表示形式。一旦添加了段落元素，就会注意到样式看起来好一些了。
+> [!NOTE]
+> 你需要更新 CSS 规则选择器，将标签的样式改为语义标题的适当等价表示形式。一旦添加了段落元素，就会注意到样式看起来好一些了。
 
 ### 图片
 
diff --git a/files/zh-cn/learn/accessibility/css_and_javascript/index.md b/files/zh-cn/learn/accessibility/css_and_javascript/index.md
index ffff2ea7547cd5..d6340c0df30316 100644
--- a/files/zh-cn/learn/accessibility/css_and_javascript/index.md
+++ b/files/zh-cn/learn/accessibility/css_and_javascript/index.md
@@ -190,7 +190,8 @@ a:active {
 
 有一个简单的方法来检查你的对比度是否足够大，不会引起问题。有许多对比检查工具可以在线输入你的前景和背景颜色，以检查它们。例如，WebAIM 的颜色对比度检查器易于使用，并说明了你需要满足有关颜色对比度的 WCAG 标准的内容。
 
-> **备注：** 高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中 (如阳光) 更好地阅读页面。
+> [!NOTE]
+> 高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中 (如阳光) 更好地阅读页面。
 
 另一个提示是不要仅仅依靠颜色来提供路标/信息，因为对于那些看不到颜色的人来说，这没有什么用。例如，不要用红色标记所需的表单字段，而是用星号和红色标记它们。
 
@@ -251,7 +252,8 @@ JavaScript 还可能会中断无障碍，具体取决于其使用方式。
 
 这种表单验证并不引人注目——在 JavaScript 不可用的情况下，你仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证（例如，通过在浏览器中关闭 JavaScript）。客户端验证对于报告错误仍然非常有用——用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。
 
-> **备注：** 此简单示例中尚未实现服务器端验证。
+> [!NOTE]
+> 此简单示例中尚未实现服务器端验证。
 
 我们使此表单验证非常容易访问。我们使用 {{htmlelement("label")}} 元素来确保表单标签明确链接到其输入，因此屏幕阅读器可以一起读取它们：
 
@@ -281,7 +283,8 @@ function validate(e) {
 }
 ```
 
-> **备注：** 在此示例中，我们使用绝对定位而不是其他方法（如可见性或显示）隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。
+> [!NOTE]
+> 在此示例中，我们使用绝对定位而不是其他方法（如可见性或显示）隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。
 
 实际表单验证会比这复杂得多——你需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合（例如，不是负数或四位数字）。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段（`if(testItem.input.value === '')`）。
 
@@ -309,7 +312,8 @@ function createLink(testItem) {
 
 每个链接都有双重用途，即它不仅告诉你错误是什么，而且可以单击它或激活它直接跳转到有问题的输入元素，并且更正输入。
 
-> **备注：** 此示例的 `focus()` 部分有点棘手。Chrome 和 Edge（以及较新版本的 IE）将在单击链接时聚焦元素，而无需 `onclick`/`focus()` 代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 `onclick/focus()` 代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点（尽管其他一切都正常）。Firefox 问题应该尽快会得到修复——现在的工作是使 Firefox 行为与其他浏览器的行为相同（参见 [Firefox bug 277178](https://bugzil.la/277178)）。
+> [!NOTE]
+> 此示例的 `focus()` 部分有点棘手。Chrome 和 Edge（以及较新版本的 IE）将在单击链接时聚焦元素，而无需 `onclick`/`focus()` 代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 `onclick/focus()` 代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点（尽管其他一切都正常）。Firefox 问题应该尽快会得到修复——现在的工作是使 Firefox 行为与其他浏览器的行为相同（参见 [Firefox bug 277178](https://bugzil.la/277178)）。
 
 此外，`errorField` 被放置在源顺序的顶部（与 UI 中使用 CSS 时相比，位置不同），这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。
 
@@ -323,9 +327,11 @@ function createLink(testItem) {
 
 我们将在下一篇文章中解释这些属性，其中将更详细地介绍 [WAI-ARIA](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)。
 
-> **备注：** 一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制，如 `required`、`min`/`minlength` 和 `max`/`maxlength` 属性（详细信息，请参阅 {{htmlelement("input")}}元素引用）。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持（例如，仅 IE10 及以上版本支持，Safari 不支持）。
+> [!NOTE]
+> 一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制，如 `required`、`min`/`minlength` 和 `max`/`maxlength` 属性（详细信息，请参阅 {{htmlelement("input")}}元素引用）。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持（例如，仅 IE10 及以上版本支持，Safari 不支持）。
 
-> **备注：** WebAIM 的[可用且无障碍的表单验证和错误恢复](http://webaim.org/techniques/formvalidation/)提供了一些有关无障碍表单验证的更多的有用信息。
+> [!NOTE]
+> WebAIM 的[可用且无障碍的表单验证和错误恢复](http://webaim.org/techniques/formvalidation/)提供了一些有关无障碍表单验证的更多的有用信息。
 
 ### 其他 JavaScript 无障碍问题
 
diff --git a/files/zh-cn/learn/accessibility/html/index.md b/files/zh-cn/learn/accessibility/html/index.md
index 7d4c3540468b1e..0a027d101c9f83 100644
--- a/files/zh-cn/learn/accessibility/html/index.md
+++ b/files/zh-cn/learn/accessibility/html/index.md
@@ -52,7 +52,8 @@ slug: Learn/Accessibility/HTML
 
 让我们来继续学习 HTML 语义化实现细则。
 
-> **备注：** 在本地计算机上设置屏幕阅读器是一个不错的主意，因此你可以对下面显示的示例进行一些测试。更多内容请查阅 [Screenreaders guide](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders)。
+> [!NOTE]
+> 在本地计算机上设置屏幕阅读器是一个不错的主意，因此你可以对下面显示的示例进行一些测试。更多内容请查阅 [Screenreaders guide](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders)。
 
 ## 良好的语义
 
@@ -247,7 +248,8 @@ the last one.
 
 创建布局时的另一个考虑因素是使用 HTML5 语义元素，如上例所示（请参阅[此内容部分](/zh-CN/docs/Web/HTML/Element#Content_sectioning)）——你只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹你的主导航（{{htmlelement("nav")}}），`footer`（{{htmlelement("footer")}}），重复内容单元（{{htmlelement("article")}}）等。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅[屏幕阅读器支持的新的 HTML5 章节元素](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/)，了解屏幕阅读器的支持是什么样的原理）。
 
-> **备注：** 除了你的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 你可以随时将它放在你想要使用 CSS 的位置，但是你应该先从源代码开始，如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。
+> [!NOTE]
+> 除了你的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 你可以随时将它放在你想要使用 CSS 的位置，但是你应该先从源代码开始，如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。
 
 ### UI 控制
 
@@ -259,7 +261,8 @@ UI 控件无障碍的一个关键方面是，默认情况下，浏览器允许
 
 接着你可以按 Enter / Return 来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用 JavaScript 使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件，例如 {{htmlelement("select")}} 元素拥有自己的显示选项，可以使用向上和向下箭头键进行循环）。
 
-> **备注：** 不同的浏览器可能有不同的键盘控制选项。请参阅[使用本机键盘辅助功能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#使用键盘)获取更多详细信息。
+> [!NOTE]
+> 不同的浏览器可能有不同的键盘控制选项。请参阅[使用本机键盘辅助功能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#使用键盘)获取更多详细信息。
 
 实际上，你只需使用适当的元素即可免费获得此功能，例如，
 
@@ -348,7 +351,8 @@ document.onkeydown = function (e) {
 
 我们使用`document.activeElement.onclick（）`运行存储在按钮的 onclick 处理函数中的函数。 `activeElement` 为我们提供了当前关注页面的元素。
 
-> **备注：** 你应该记住，只有通过事件处理程序属性（例如 onclick）设置原始事件处理程序，此技巧才会起作用。 `addEventListener` 将不起作用。
+> [!NOTE]
+> 你应该记住，只有通过事件处理程序属性（例如 onclick）设置原始事件处理程序，此技巧才会起作用。 `addEventListener` 将不起作用。
 
 这对于重新构建功能而言是一个额外的麻烦。而且这肯定会带来其他问题。使用正确的元素处理正确的工作是非常重要的。
 
@@ -378,7 +382,8 @@ document.onkeydown = function (e) {
 </p>
 ```
 
-> **备注：** 你可以在我们的[创建超链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)文章中找到更多关于链接实现和最佳实践的信息。你还可以在 [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) 和 [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) 中看到一些好的和不好的例子。
+> [!NOTE]
+> 你可以在我们的[创建超链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)文章中找到更多关于链接实现和最佳实践的信息。你还可以在 [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) 和 [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) 中看到一些好的和不好的例子。
 
 表单标签也很重要，可以让你了解你需要输入每个表单输入的内容。以下似乎是一个足够合理的例子：
 
@@ -403,7 +408,8 @@ Fill in your name: <input type="text" id="name" name="name" />
 
 作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，你可以单击标签来 选择/激活 表单元素。这给输入一个更大的可选中区域，使其更容易选择。
 
-> **备注：** 你可以在 [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html) 和 [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html) 中看到一些好的和不好的表单示例。
+> [!NOTE]
+> 你可以在 [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html) 和 [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html) 中看到一些好的和不好的表单示例。
 
 ## 无障碍数据表格
 
@@ -441,7 +447,8 @@ Fill in your name: <input type="text" id="name" name="name" />
 - 表头使用 `{{htmlelement("th")}}` 元素定义 - 你还可以使用 `scope` 属性指定它们是行还是列的标题。这提供给了屏幕阅读器可以理解的完整数据组。
 - `{{htmlelement("caption")}}` 元素和 `<table>` `summary` 属性都执行类似的工作 - 它们充当表格的替代文本，为屏幕阅读器用户提供有用的表格内容快速摘要。 `<caption>` 通常是首选，因为它使内容可供视力良好的用户访问，而且他们也可能会发现它很有用。你并不需要两者都使用！。
 
-> **备注：** 有关可访问数据表的更多详细信息，请参阅我们的 [HTML 表格高级功能和无障碍](/zh-CN/docs/Learn/HTML/Tables/Advanced) 文章。
+> [!NOTE]
+> 有关可访问数据表的更多详细信息，请参阅我们的 [HTML 表格高级功能和无障碍](/zh-CN/docs/Learn/HTML/Tables/Advanced) 文章。
 
 ## 替代文本
 
@@ -471,7 +478,8 @@ Fill in your name: <input type="text" id="name" name="name" />
 
 第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如 VoiceOver 会读出“/dinosaur.png，image” 。它读出文件名以尝试提供一些帮助。在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。
 
-> **备注：** 这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！
+> [!NOTE]
+> 这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！
 
 当屏幕阅读器遇到第二张图像时，它会读出完整的 `alt` 属性 - “红色霸王龙雷克斯：一只像人一样直立的双腿恐龙，手臂小，头部大而锋利。”
 
@@ -479,7 +487,8 @@ Fill in your name: <input type="text" id="name" name="name" />
 
 需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。如果它们是装饰性的，最好将它们包含在页面中作为 CSS 背景图像。
 
-> **备注：** 请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) 和 [响应式图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 以获得更多关于图片实施和最佳做法的信息。
+> [!NOTE]
+> 请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) 和 [响应式图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 以获得更多关于图片实施和最佳做法的信息。
 
 如果你确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” `title` 属性中，如上所示。在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。此外，鼠标滑过时，浏览器会将 `title` 的内容作为工具提示的形式显示出来。
 
@@ -495,7 +504,8 @@ Fill in your name: <input type="text" id="name" name="name" />
 
 在这种情况下，我们不使用“alt”属性——相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用“`aria-labelledby`”属性并链接到对应“`id`”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。如果你想将相同的文本用作多个图像的标签，这是特别有用的——这是使用“`alt`”不可能实现的。
 
-> **备注：** “`aria-labelledby`”是 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的无障碍。要了解更多关于它是如何工作的，请阅读我们的 [WAI-ARIA Basics](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics) 文章。
+> [!NOTE]
+> “`aria-labelledby`”是 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的无障碍。要了解更多关于它是如何工作的，请阅读我们的 [WAI-ARIA Basics](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics) 文章。
 
 ### 其他文字替代机制
 
@@ -534,7 +544,8 @@ HTML5 包含两个新元素 - `{{htmlelement("figure")}}` 和`{{htmlelement("fig
 
 使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像 URL。在上面的示例中，图像充当与其关联的标题的视觉装饰。在这种情况下，以及在图像只是装饰并且没有内容值的情况下，你应该在图像上放置一个空白的“alt”。另一种选择是使用 aria role 属性 `role =“presentation”` - 这也会阻止屏幕阅读器读出替代文本。
 
-> **备注：** 如果可能的话，你应该使用 CSS 来显示只有装饰的图像。
+> [!NOTE]
+> 如果可能的话，你应该使用 CSS 来显示只有装饰的图像。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/accessibility/index.md b/files/zh-cn/learn/accessibility/index.md
index 1b8c8b2b61dc03..1a89cf0e76e3a8 100644
--- a/files/zh-cn/learn/accessibility/index.md
+++ b/files/zh-cn/learn/accessibility/index.md
@@ -25,7 +25,8 @@ Firefox 浏览器无障碍检查器是一个非常有用的工具，用于检查
 
 为了充分理解这个模块，你至少需要读过 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 各个主题的前两个模块，或者有可能的话，在你学习相关联的技术话题时也把无障碍相关的内容学习了，这样会更好。
 
-> **备注：** 如果在你所使用的设备上不能建立自己的文件，你可以使用在线编码平台运行大多数样例代码，比如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 如果在你所使用的设备上不能建立自己的文件，你可以使用在线编码平台运行大多数样例代码，比如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/accessibility/mobile/index.md b/files/zh-cn/learn/accessibility/mobile/index.md
index 93a742387d931a..6b44a856050352 100644
--- a/files/zh-cn/learn/accessibility/mobile/index.md
+++ b/files/zh-cn/learn/accessibility/mobile/index.md
@@ -67,7 +67,8 @@ TalkBack 屏幕阅读器是内置于 Android 操作系统中的。
 1. 导航到 TalkBack 菜单屏幕（使用当前启用的不同手势）。
 2. 导航到滑动开关，并激活它将其关闭。
 
-> **备注：** 你可以通过向左上方滑动返回桌面，如果你有多个桌面，你可以通过两个手指在屏幕上左右滑动来切换桌面。
+> [!NOTE]
+> 你可以通过向左上方滑动返回桌面，如果你有多个桌面，你可以通过两个手指在屏幕上左右滑动来切换桌面。
 
 关于 TalkBack 手势的完整列表，查看[使用 TalkBack 手势](https://support.google.com/accessibility/android/answer/6151827)。
 
@@ -112,7 +113,8 @@ TalkBack 允许你使用全局和本地菜单，无论你已经导航到哪个
 7. 双击选择它。现在你就可以通过左右滑动在标题和 ARIA 标识之间切换。
 8. 向右向上滑动之后，进入本地上下文菜单，选择“默认”，就可以返回默认模式。
 
-> **备注：** 查看[开始在 Android 设备上使用 TalkBack](https://support.google.com/accessibility/android/answer/6283677?ref_topic=3529932) 以获取更完整的文档。
+> [!NOTE]
+> 查看[开始在 Android 设备上使用 TalkBack](https://support.google.com/accessibility/android/answer/6283677?ref_topic=3529932) 以获取更完整的文档。
 
 ### iOS 旁白
 
@@ -120,7 +122,8 @@ iOS 操作系统内置了移动版旁白（VoiceOver）。
 
 要打开它，请转到*设置*，然后选择*无障碍 > 旁白*。点按*旁白*的滑动开关去启用它（你还会在页面中看到很多和旁白相关的其他选项）。
 
-> **备注：** 一些较老的 iOS 设备的旁白菜单在*设置* > _通用_ > _辅助功能_ > _旁白_。
+> [!NOTE]
+> 一些较老的 iOS 设备的旁白菜单在*设置* > _通用_ > _辅助功能_ > _旁白_。
 
 一旦启用旁白，iOS 的基本操作手势将有所不同：
 
@@ -173,7 +176,8 @@ iOS 操作系统内置了移动版旁白（VoiceOver）。
 
 7. 选择*标题*，现在你可以通过上下滑动在页面的不同标题中切换。
 
-> **备注：** 有关 iOS 上可用的旁白手势以及有关辅助功能的其他提示的更完整资料可以查看[在你的设备上用旁白测试辅助功能](https://developer.apple.com/library/archive/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html)。
+> [!NOTE]
+> 有关 iOS 上可用的旁白手势以及有关辅助功能的其他提示的更完整资料可以查看[在你的设备上用旁白测试辅助功能](https://developer.apple.com/library/archive/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html)。
 
 ## 控制机制
 
@@ -210,7 +214,8 @@ panel.ontouchend = stopMove;
 
 我们提供了一个简单的示例来展示如何使用鼠标和触摸事件——[multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/main/accessibility/mobile/multi-control-box-drag.html)（[查看实时示例](https://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html)）。
 
-> **备注：** 你可以看到一个功能完善的示例，展示如何在实现[游戏控制机制](/zh-CN/docs/Games/Techniques/Control_mechanisms)中实现不同的控制机制。
+> [!NOTE]
+> 你可以看到一个功能完善的示例，展示如何在实现[游戏控制机制](/zh-CN/docs/Games/Techniques/Control_mechanisms)中实现不同的控制机制。
 
 ## 响应式设计
 
@@ -222,7 +227,8 @@ panel.ontouchend = stopMove;
 - 节省下载的图片大小。一般来说，小屏幕设备不需要与桌面设备一样大的图像，而且它们将更可能在慢速网络连接上。因此，适当地缩小屏幕设备以缩小图像是明智的。你可以使用[响应式图像技术](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)处理此问题。
 - 考虑高分辨率。许多移动设备具有高分辨率屏幕，因此需要更高分辨率的图像，使得显示器可以继续看起来清晰和锐利。再次，你可以使用响应式图像技术来适当地提供图像。此外，使用 SVG 矢量图像格式可以满足许多图像要求，这些格式在目前的浏览器中得到了很好的支持。SVG 文件较小，且不论以何种大小显示，它都会保持清晰（请参阅[向网页中添加矢量图形](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)以了解更多的细节）。
 
-> **备注：** 我们不会在这里对响应式设计进行完整的讨论，因为它们在 MDN 其他地方都有涉及（参考上面的链接）。
+> [!NOTE]
+> 我们不会在这里对响应式设计进行完整的讨论，因为它们在 MDN 其他地方都有涉及（参考上面的链接）。
 
 ### 具体的需要注意的点
 
diff --git a/files/zh-cn/learn/accessibility/multimedia/index.md b/files/zh-cn/learn/accessibility/multimedia/index.md
index 414c9c04441472..64cb54577bcab3 100644
--- a/files/zh-cn/learn/accessibility/multimedia/index.md
+++ b/files/zh-cn/learn/accessibility/multimedia/index.md
@@ -257,13 +257,15 @@ player.ontimeupdate = () => {
 
 但是，有一些边缘情况。例如，你可能有一个会议的音频录制，该录音引用了附带的资源，如电子表格或图表。在这种情况下，应确保资源与音频和脚本一起提供，并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户，而不仅仅是聋人。
 
-> **备注：** 音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外，还考虑一个带宽连接较低的用户，他们会发现下载音频不方便。还要考虑在嘈杂的环境中 (如酒吧或酒吧) 中的用户，他们试图访问信息，但无法通过噪音听到信息。
+> [!NOTE]
+> 音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外，还考虑一个带宽连接较低的用户，他们会发现下载音频不方便。还要考虑在嘈杂的环境中 (如酒吧或酒吧) 中的用户，他们试图访问信息，但无法通过噪音听到信息。
 
 ## 视频文本轨道
 
 要使聋人、盲人甚至其他用户组 (如低带宽用户或不理解视频录制的语言的用户) 可以访问视频，你需要在视频内容中包括文本轨道。
 
-> **备注：** 文本轨道对于潜在的任何用户也很有用，而不仅仅是那些残障用户。例如，有些用户可能无法听到音频，因为他们处于嘈杂的环境中 (如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方 (如图书馆),则可能不想打扰其他人。
+> [!NOTE]
+> 文本轨道对于潜在的任何用户也很有用，而不仅仅是那些残障用户。例如，有些用户可能无法听到音频，因为他们处于嘈杂的环境中 (如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方 (如图书馆),则可能不想打扰其他人。
 
 这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了：
 
@@ -321,7 +323,8 @@ This is the second.
 
 有关详细信息，请阅读[Adding captions and subtitles to HTML5 video](/zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)。你可以找到与本文一起使用本文的[the example](http://iandevlin.github.io/mdn/video-player-with-captions/),本文由 Ian Devlin 编写 (请参阅[source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions))。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意，要打开字幕，你需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。
 
-> **备注：** 文本轨道和转录也可以帮助你使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。
+> [!NOTE]
+> 文本轨道和转录也可以帮助你使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。
 
 ## 其他多媒体内容
 
diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
index 3f12bacba3fe68..2c62835d8b10a6 100644
--- a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
+++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
@@ -60,13 +60,17 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) 是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性，用于提供额外的语义化以及改善缺乏的无障碍。以下是规范中三个主要的特性：
 
-- **角色** — 这定义了元素是干什么的。许多「标志性的角色」，其实重复了 HTML5 的结构元素的语义价值。例如 `role="navigation"` ({{htmlelement("nav")}}) 或者 `role="complementary"` ({{htmlelement("aside")}})，这也有一些描述其他页面结构的（角色），例如 `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"` 等等。我们通常能从 UI 层面找到它们。
-- **属性** — 我们能通过定义一些属性给元素，让他们具备更多的语义。例如： `aria-required="true"` 意味着元素在表单上是必填的。然而 `aria-labelledby="label"` 允许你在元素上设置一个 ID，用于[`labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute)引用作为屏幕阅读器指定的 label 内容，多个也可以。当然，下面这个代码是不行的： `<label for="input">` 。举个例子：你可以用 `aria-labelledby` 指定包含在 a 标签中的 key 描述{{htmlelement("div")}} 是多个 table 表格的 label，或者将它指定为 img 标签的 alt 内容 — 而无需重复在每一个 img 里头定义。如果迷糊了，你可以在这里看到例子： [Text alternatives](/zh-CN/docs/Learn/Accessibility/HTML?document_saved=true#Text_alternatives).
-- **状态** —用于表达元素当前的条件的特殊属性，例如 `aria-disabled="true"`，屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它，例如 Javascript。
+- [角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles)
+  - : 这定义了元素是干什么的。许多「标志性的角色」，其实重复了 HTML5 的结构元素的语义价值。例如 `role="navigation"` ({{htmlelement("nav")}}) 或者 `role="complementary"` ({{htmlelement("aside")}})，这也有一些描述其他页面结构的（角色），例如 `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"` 等等。我们通常能从 UI 层面找到它们。
+- 属性
+  - : 定义元素的属性，使元素具备额外的含义或语义。例如，`aria-required="true"` 指定表单输入元素需要被填写才能有效，而 `aria-labelledby="label"` 允许你在元素上设置一个 ID，用于在页面中的其他地方（包括多个元素）引用其作为标签，`<label for="input">` 不可能做到这一点。举个例子：你可以用 `aria-labelledby` 指定在 {{htmlelement("div")}} 中包含的关键描述是多个表格单元的标签，或者将它指定为图像的替代文本——为图像替代文本指定额外信息，而无需在每一个 `alt` 属性中重复。你可以在[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)中查看示例。
+- 状态
+  - : 用于表达元素当前的条件的特殊属性，例如 `aria-disabled="true"`，屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它，例如 JavaScript。
 
-关于 WAI-ARIA 属性重要的一点是它不会对 web 页面有任何影响，除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍 API)，这也是屏幕阅读器这一类软件的信息源。WAI-ARIA 不会影响网页的结构，以及 DOM 等等，尽管这些属性可用于作为 css 选择器。
+关于 WAI-ARIA 属性重要的一点是它不会对 web 页面有任何影响，除了让更多的信息从浏览器暴露给无障碍 API，这也是屏幕阅读器这一类软件的信息源。WAI-ARIA 不会影响网页的结构，以及 DOM 等等，尽管这些属性可用于作为 css 选择器。
 
-> **备注：** 关于 ARIA 的角色和他的用法，如需了解更多信息，尽在 WAI-ARIA 规范，查看 [角色定义](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)
+> [!NOTE]
+> 关于 ARIA 的角色和他的用法，如需了解更多信息，尽在 WAI-ARIA 规范，查看 [角色定义](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)
 >
 > 规范同时也包含了属性和状态的一个列表，链接有更多详尽信息：[查看 属性和状态的定义（所有的 aria-\* 属性）](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def)
 
@@ -86,7 +90,8 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 我们目的不是详细介绍所有的 WAI-ARIA 特性，以及它大部分支持的细节。相反，介绍最主要的 WAI-ARIA 功能。我们没有提到的任何支持细节，你可以假定该特性得到了良好的支持。我们将清楚地介绍例外情况。
 
-> **备注：** 一些 JavaScript 库支持 WAI-ARIA，意味着生成 UI 界面时，例如复杂的表单控件，他们会添加 ARIA 属性来优化它的无障碍特性。如果你再找一些第三方 JavaScript 解决方案来进行快速的 UI 开发，当你做选择的时候，必须重视 UI 小部件的无障碍。一个良好的例子就是 jQuery UI (请看 [About jQuery UI: Deep accessibility support](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/) 还有 [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html)。
+> [!NOTE]
+> 一些 JavaScript 库支持 WAI-ARIA，意味着生成 UI 界面时，例如复杂的表单控件，他们会添加 ARIA 属性来优化它的无障碍特性。如果你再找一些第三方 JavaScript 解决方案来进行快速的 UI 开发，当你做选择的时候，必须重视 UI 小部件的无障碍。一个良好的例子就是 jQuery UI (请看 [About jQuery UI: Deep accessibility support](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/) 还有 [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html)。
 
 ### 何时你应使用 WAI-ARIA?
 
@@ -101,7 +106,8 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 **但还是要重申：当你需要的时候再使用无障碍特性！**
 
-> **备注：** 另外，请尝试确保你的真实用户来测试你的网站：普通人，使用屏幕阅读器的用户，使用键盘导航的人。他们会提供你更多的见解。
+> [!NOTE]
+> 另外，请尝试确保你的真实用户来测试你的网站：普通人，使用屏幕阅读器的用户，使用键盘导航的人。他们会提供你更多的见解。
 
 ## 实用的 WAI-ARIA 实现
 
@@ -233,7 +239,8 @@ var intervalID = window.setInterval(showQuote, 10000);
 
 这会让你的屏幕阅读器在更新时可以读取内容。
 
-> **备注：** 当你用 `file://` 协议头来发 `XMLHttpRequest` 大部分浏览器会抛出 security exception。所以你可能要设置一个 web 服务器来作为请求源，例如，[使用 GitHub](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)，或者设置一个本地服务器 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)。
+> [!NOTE]
+> 当你用 `file://` 协议头来发 `XMLHttpRequest` 大部分浏览器会抛出 security exception。所以你可能要设置一个 web 服务器来作为请求源，例如，[使用 GitHub](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)，或者设置一个本地服务器 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)。
 
 这里有一个附加的考虑——只读取更新的文本位。如果我们总是读出标题可能会很好，这样用户就可以记住正在读出的内容。为了能做到这个，我们增加了 [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) 给 section。再次更新 `<section>`，像这样：
 
@@ -243,7 +250,8 @@ var intervalID = window.setInterval(showQuote, 10000);
 
 这个 `aria-atomic="true"` 属性告诉屏幕阅读器去读取整个元素的内容作为一个原子单位，而不是里头某个字符串更新了。
 
-> **备注：** 你可在此完成此例子 [aria-live.html](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([在线 demo](http://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
+> [!NOTE]
+> 你可在此完成此例子 [aria-live.html](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([在线 demo](http://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
 
 > **备注：** [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) 属性对于控制更新实时区域时读取的内容也非常有用。例如，你读取内容添加或删除。
 
@@ -308,7 +316,8 @@ var intervalID = window.setInterval(showQuote, 10000);
      aria-required="true" />
    ```
 
-> **备注：** 你可以在这里看这个在线完成的例子 [form-validation-updated.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
+> [!NOTE]
+> 你可以在这里看这个在线完成的例子 [form-validation-updated.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
 
 除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。我们已经讨论过使用 [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的 [路牌/地标（Signposts/Landmarks）](#路牌地标_（signpostslandmarks）) 部分）。还有一些其他标签技术使用其他属性，例如 [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) ，如果你想将非\<label>元素指定为标签或标签多个表单输入具有相同的标签，并且 [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby)，如果你想关联 带有表单输入的其他信息，并将其读出。请查阅文章获得更多细节： [WebAIM's Advanced Form Labeling article](http://webaim.org/techniques/forms/advanced)
 
@@ -357,7 +366,8 @@ function toggleMusician(bool) {
 
 这时候再用屏幕阅读器，这次你会听到短语“Click me!, button”——舒服了。
 
-> **备注：** 别忘了无论如何用正确的语义化元素是最佳选择。如果你想创建一个按钮，你可用 {{htmlelement("button")}} 元素，你应该用 {{htmlelement("button")}} 元素！
+> [!NOTE]
+> 别忘了无论如何用正确的语义化元素是最佳选择。如果你想创建一个按钮，你可用 {{htmlelement("button")}} 元素，你应该用 {{htmlelement("button")}} 元素！
 
 #### 通过复杂的小部件做引导用户
 
@@ -406,7 +416,8 @@ function toggleMusician(bool) {
 </div>
 ```
 
-> **备注：** 这里最明显的变化是我们删除了最初在示例中出现的链接，并且只使用了列表项作为选项卡——这样做是因为它使屏幕阅读器用户不那么容易混淆（链接并不会跳转，它们只更改视图），它允许大小修改/位置变化一类的特性更好地工作——当这些被放在链接上时，浏览器始终报告“1 of 1”，而不是“1 of 3”、“2 of 3”等。
+> [!NOTE]
+> 这里最明显的变化是我们删除了最初在示例中出现的链接，并且只使用了列表项作为选项卡——这样做是因为它使屏幕阅读器用户不那么容易混淆（链接并不会跳转，它们只更改视图），它允许大小修改/位置变化一类的特性更好地工作——当这些被放在链接上时，浏览器始终报告“1 of 1”，而不是“1 of 3”、“2 of 3”等。
 
 以下刚刚用上的新特性：
 
@@ -419,7 +430,8 @@ function toggleMusician(bool) {
 
 在我们的测试中，这个新结构确实有助于改善整体情况。这些选项卡现在被识别为选项卡（例如，屏幕阅读器说出「选项卡」），所选选项卡由“选择”表示，并使用选项卡名称读出，屏幕阅读器还会告诉你当前所在的选项卡编号。此外，由于`aria-hidden` 设置（只有非隐藏的选项卡有 `aria-hidden="false"` 设置），非隐藏内容是唯一可以向下导航的内容，这意味着所选内容更容易找到。
 
-> **备注：** 如果你有不想让屏幕阅读器读出来的东西，你可以给它一个 `aria-hidden="true"` 属性。
+> [!NOTE]
+> 如果你有不想让屏幕阅读器读出来的东西，你可以给它一个 `aria-hidden="true"` 属性。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/accessibility/what_is_accessibility/index.md b/files/zh-cn/learn/accessibility/what_is_accessibility/index.md
index f54b46742ff17d..6d83bf780f4014 100644
--- a/files/zh-cn/learn/accessibility/what_is_accessibility/index.md
+++ b/files/zh-cn/learn/accessibility/what_is_accessibility/index.md
@@ -39,7 +39,8 @@ slug: Learn/Accessibility/What_is_accessibility
 
 残疾人士和正常人一样是多样化的，他们身患的残疾也多种多样。此处课题的关键是抛开思考你自己的电脑和你自己使用网页的方式，而是要开始了解别人如何使用网页——你不是你的用户。接下来会讲解需要考虑的主要残疾类型，以及他们访问网页内容时用到的一些特殊工具 (被称为辅助技术或 ATs)。
 
-> **备注：** 世界卫生组织的“残疾和健康”状况说明书指出：“超过 10 亿人，约占世界总人口的 15%，患有某种形式的残疾”，而且“有 1.1 亿至 1.9 亿之间的成年人在身体功能上存在重大困难。”
+> [!NOTE]
+> 世界卫生组织的“残疾和健康”状况说明书指出：“超过 10 亿人，约占世界总人口的 15%，患有某种形式的残疾”，而且“有 1.1 亿至 1.9 亿之间的成年人在身体功能上存在重大困难。”
 
 ### 有视觉障碍的人
 
@@ -121,7 +122,8 @@ slug: Learn/Accessibility/What_is_accessibility
 
 为了表明你关心并考虑了无障碍，请在你的网站上发布无障碍声明，其中详细说明你对无障碍的政策以及为使该站点可访问而采取的步骤。如果有人确实反映你的网站存在无障碍问题，请与他们展开对话，保持同情心，并采取合理的步骤尝试解决问题。
 
-> **备注：** 我们的“[处理常见的无障碍问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)”一文涵盖了应更详细地测试的无障碍细节。
+> [!NOTE]
+> 我们的“[处理常见的无障碍问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)”一文涵盖了应更详细地测试的无障碍细节。
 
 总结：
 
diff --git a/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
index 499edb577116f5..c59f99de285bc9 100644
--- a/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
+++ b/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
@@ -44,7 +44,8 @@ _暂时还没有相关内容，[请考虑贡献一篇](/zh-CN/docs/MDN/Community
 
 和朋友们讨论讨论你的想法是一个好的开始，但是光这样还不够。你需要安静地坐下来好好捋一捋你的想法，为了能有一个清晰的思路关于如何实现你的想法。想要做到这些，你只需要一支笔和一张纸并回答下面这些问题。
 
-> **备注：** 有数不清的方法来实现你的想法，这里就不一一列举了。（不单独写本书不足以说明它）我们这里只采用一些简单的方法来处理专业人士所谓的 [项目想法](<http://en.wikipedia.org/wiki/Ideation_(idea_generation)>), [项目计划](http://en.wikipedia.org/wiki/Project_planning)和[项目管理](http://en.wikipedia.org/wiki/Project_management)。
+> [!NOTE]
+> 有数不清的方法来实现你的想法，这里就不一一列举了。（不单独写本书不足以说明它）我们这里只采用一些简单的方法来处理专业人士所谓的 [项目想法](<http://en.wikipedia.org/wiki/Ideation_(idea_generation)>), [项目计划](http://en.wikipedia.org/wiki/Project_planning)和[项目管理](http://en.wikipedia.org/wiki/Project_management)。
 
 ### 我到底想完成什么？
 
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
index 9e548670e6a9e9..5d5f3d2700c42f 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
@@ -68,7 +68,8 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost
 
 如果你需要安装一个 FTP 客户端，这里有很多免费的选择：例如，可以全平台使用的 [FileZilla](https://filezilla-project.org/) , windows 上使用的[WinSCP](http://winscp.net/) , Mac 和 windows 上都能使用的 [Cyberduck](https://cyberduck.io/) ，还有很多)。
 
-> **备注：** 还有其他方法可以在远程服务器上发布内容，如 rsync 和 git，但并不像 FTP 那样简单，我们不会在这里讨论。
+> [!NOTE]
+> 还有其他方法可以在远程服务器上发布内容，如 rsync 和 git，但并不像 FTP 那样简单，我们不会在这里讨论。
 
 ## 浏览器
 
@@ -97,7 +98,8 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost
 
 主机供应商通过你网站消耗的带宽来收费。这些取决于在一个给定的时间内多少人或机器人访问你的内容、你的内容占用多少的服务空间（这就解释了为什么人们通常把他们的视频存储在比如 Youtube、Dailymotion 和 Vimeo 等专用服务上）。实际上，你的供应商可能 有个计划规定某个实例每天至多有几千访问的可用带宽用量（不同的主机供应商的规定通常都不同）。根据经验，考虑那些月付十到五十美元的个人主机。
 
-> **备注：** 从来没有“无限”带宽这样的东西。如果你真的需要消耗大量的带宽，等着付一大把的票子吧。
+> [!NOTE]
+> 从来没有“无限”带宽这样的东西。如果你真的需要消耗大量的带宽，等着付一大把的票子吧。
 
 ### 域名
 
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
index 662adfdb89ee70..c368d8ee130088 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
@@ -54,7 +54,8 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server
 
 实现这一目标的另一种方法是使用 Python 的 `http.server` 模块。
 
-> **备注：** 旧版本的 Python（直到版本 2.7）提供了一个类似的模块，名为 `SimpleHTTPServer`。如果你正在使用 Python 2.x，你可以通过将所有的 `http.server` 替换为 `SimpleHTTPServer` 来遵循这个指南。然而，我们建议你使用 Python 的最新版本。
+> [!NOTE]
+> 旧版本的 Python（直到版本 2.7）提供了一个类似的模块，名为 `SimpleHTTPServer`。如果你正在使用 Python 2.x，你可以通过将所有的 `http.server` 替换为 `SimpleHTTPServer` 来遵循这个指南。然而，我们建议你使用 Python 的最新版本。
 
 要做到这一点：
 
@@ -98,7 +99,8 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server
 
 5. 默认情况下，这会在 8000 端口上启动本地服务器，以提供文件夹中的内容。你可以在浏览器中访问 URL `http://localhost:8000` 来访问服务器。你将在此处看到列出的目录内容——点击你要运行的 HTML 文件即可。
 
-> **备注：** 如果你已经在端口 8000 上运行了一些内容，你可以通过在运行服务器的命令后面加上备用端口号来选择另一个端口，例如 `python3 -m http.server 7800`（Python 3.x）或 `python -m SimpleHTTPServer 7800`（Python 2.x）。然后你可以在 `localhost:7800` 访问你的内容。
+> [!NOTE]
+> 如果你已经在端口 8000 上运行了一些内容，你可以通过在运行服务器的命令后面加上备用端口号来选择另一个端口，例如 `python3 -m http.server 7800`（Python 3.x）或 `python -m SimpleHTTPServer 7800`（Python 2.x）。然后你可以在 `localhost:7800` 访问你的内容。
 
 ## 在本地运行服务器端语言
 
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
index dd1fd502465433..29ad2db0dcc336 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -41,7 +41,8 @@ slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server
 
 有多种 SFTP 客户端。我们的示例使用的是 [FileZilla](https://filezilla-project.org/)，因为它免费，且可在 Windows、macOS 以及 Linux 上使用。要安装 FileZilla，请转到 [FileZilla 下载页面](https://filezilla-project.org/download.php?type=client)，点击下载按钮，然后以常规的方式通过安装文件安装它。
 
-> **备注：** 当然还有很多其他的选择。有关详细的信息，请参阅[发布工具](/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost#发布工具)。
+> [!NOTE]
+> 当然还有很多其他的选择。有关详细的信息，请参阅[发布工具](/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost#发布工具)。
 
 打开 FileZilla 应用程序，你应该看到这样的界面：
 
@@ -71,7 +72,8 @@ slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server
 
 ![我们的 demozilla 个人网站，在浏览器中看起来是空的](demozilla-empty.png)
 
-> **备注：** 根据你的托管服务提供商的不同，大部分时间你会看到一个页面，内容如下：“此网站由 \[托管服务] 托管”。
+> [!NOTE]
+> 根据你的托管服务提供商的不同，大部分时间你会看到一个页面，内容如下：“此网站由 \[托管服务] 托管”。
 
 要将 SFTP 客户端连接到远程服务器，请执行以下步骤：
 
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md
index ae18d1a611211f..e9aafaf12a2b33 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md
@@ -43,7 +43,8 @@ GitHub 是一个非常重要和有用的社区，值得参与其中，Git/GitHub
 
 ![已打开终端/命令提示符。尚未输入任何命令。](command-line.png)
 
-> **备注：** 你也可以考虑使用 [Git 图形用户界面](https://git-scm.com/downloads/guis)来执行相同的工作，如果你不熟悉命令行。
+> [!NOTE]
+> 你也可以考虑使用 [Git 图形用户界面](https://git-scm.com/downloads/guis)来执行相同的工作，如果你不熟悉命令行。
 
 每个操作系统都附带有一个命令行工具：
 
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
index 40efbfceecbc39..339770d8c78086 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
@@ -9,7 +9,8 @@ l10n:
 
 每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
 
-> **备注：** 在你运行下面的例子之前，打开我们在 [Web 开发入门](/zh-CN/docs/Learn/Getting_started_with_the_web)系列文章中建立的[初学者示例网站](http://mdn.github.io/beginner-html-site-scripted/)。你应该按照下面的步骤打开。
+> [!NOTE]
+> 在你运行下面的例子之前，打开我们在 [Web 开发入门](/zh-CN/docs/Learn/Getting_started_with_the_web)系列文章中建立的[初学者示例网站](http://mdn.github.io/beginner-html-site-scripted/)。你应该按照下面的步骤打开。
 
 ## 如何在浏览器中打开开发者工具
 
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
index 5be59ffd6c96f0..469e785234c9b4 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
@@ -161,7 +161,8 @@ _现在还没有动手练习的内容。[请考虑投稿](/zh-CN/docs/MDN/Commun
 
 当你的网站已经为公众浏览做好准备，你需要将网页上传到你的 Web 服务器。你可以从各种提供商处购买服务器空间（请参阅[在网络上做一些事情要花多少钱？](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)）。一旦确定使用哪家提供商，提供商会通过电子邮件向你发送访问信息，通常以 SFTP URL、用户名、密码和其他连接到其服务器所需的信息的形式提供。请注意，（S）FTP 现在有点过时了，其他上传系统开始流行起来，例如 [RSync](https://zh.wikipedia.org/wiki/Rsync) 和 [Git/GitHub](https://docs.github.com/zh/pages/configuring-a-custom-domain-for-your-github-pages-site)。
 
-> **备注：** FTP 本质上是不安全的。你应确保你的托管服务提供商允许使用安全连接，例如 SFTP 或基于 SSH 的 RSync。
+> [!NOTE]
+> FTP 本质上是不安全的。你应确保你的托管服务提供商允许使用安全连接，例如 SFTP 或基于 SSH 的 RSync。
 
 将文件上传到 Web 服务器是创建网站时非常重要的一步，因此我们在[一篇单独的文章](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)中详细介绍了这一过程。现在，这里有一些免费的基础（S）FTP 客户端的简短列表：
 
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
index 132b162a13c125..8968f7bf239e34 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
@@ -41,7 +41,8 @@ l10n:
 
 当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式（通常是[网线](http://en.wikipedia.org/wiki/Ethernet_crossover_cable)）或是无线方式（比如 [WiFi](https://zh.wikipedia.org/wiki/Wi-Fi) 或[蓝牙](https://zh.wikipedia.org/wiki/藍牙)）。所有现代电脑都支持这些连接。
 
-> **备注：** 接下来的内容，我们将只谈论有线连接，而无线连接的原理与此相同。
+> [!NOTE]
+> 接下来的内容，我们将只谈论有线连接，而无线连接的原理与此相同。
 
 ![两台电脑连接在一起](internet-schema-1.png)
 
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index 9296d8ae12f967..139f97df87920b 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -71,7 +71,8 @@ _还没有可用的资料，[请考虑贡献一个](/zh-CN/docs/MDN/Community/Co
 - _脚本_——为页面添加交互性
 - _多媒体_——图像，音频，和视频
 
-> **备注：** 浏览器也能显示其他文档，例如 {{Glossary("PDF")}} 文件或图像，但网页（webpage）这一概念专指 HTML 文档。其他情况我们则只会使用文档（document）这一概念
+> [!NOTE]
+> 浏览器也能显示其他文档，例如 {{Glossary("PDF")}} 文件或图像，但网页（webpage）这一概念专指 HTML 文档。其他情况我们则只会使用文档（document）这一概念
 
 网络上所有可用的网页都可以通过一个独一无二的地址访问到。要访问一个页面，只需在你的浏览器地址栏中键入页面的地址。
 
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
index ecc4bb2deecb00..1a157bde52f12a 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
@@ -1,154 +1,172 @@
 ---
 title: 什么是域名？
 slug: Learn/Common_questions/Web_mechanics/What_is_a_domain_name
+l10n:
+  sourceCommit: 9de3d03957f1d66f02f45400a6981372aa368c1f
 ---
 
 {{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
 
-本文中我们讨论了域名是什么，域名是如何被构建的，以及如何获得一个域名。
-
 <table class="learn-box standard-table">
   <tbody>
     <tr>
       <th scope="row">前提：</th>
       <td>
-        首先你得知道
-        <a href="/zh-CN/docs/learn/How_the_Internet_works"
+        首先你得知道<a
+          href="/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work"
           >互联网是怎么工作的</a
-        >
-        并理解
-        <a href="/zh-CN/docs/learn/常见问题/What_is_a_URL">什么是 URL</a>。
+        >并理解<a
+          href="/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL"
+        >什么是 URL</a>。
       </td>
     </tr>
     <tr>
       <th scope="row">目标：</th>
-      <td>学习域名是什么，域名的工作方式，以及域名的重要性。</td>
+      <td>学习域名是什么、域名的工作方式，以及域名的重要性。</td>
     </tr>
   </tbody>
 </table>
 
 ## 概述
 
-域名（Domain names）是互联网基础架构的关键部分。它们为互联网上任何可用的网页服务器提供了方便人类理解的地址。
+域名（Domain name）是互联网基础架构的关键部分。它们为互联网上任何可用的 Web 服务器提供了方便人类理解的地址。
 
-任何连上互联网的电脑都可以通过一个公共{{Glossary("IP")}}地址访问到，对于 IPv4 地址来说，这个地址有 32 位（它们通常写成四个范围在 0\~255 以内，由点分隔的数字组成，比如 173.194.121.32），而对于 IPv6 来说，这个地址有 128 位，通常写成八组由冒号分隔的四个十六进制数 (e.g., `2027:0da8:8b73:0000:0000:8a2e:0370:1337`). 计算机可以很容易地处理这些 IP 地址，但是对一个人来说很难找出谁在操控这些服务器以及这些网站提供什么服务。IP 地址很难记忆而且可能会随着时间的推移发生改变。为了解决这些问题，我们使用方便记忆的地址，称作域名。
+任何连上互联网的电脑都可以通过一个公共 {{Glossary("IP Address", "IP 地址")}}访问到，可以 IPv4 地址（例如，`192.0.2.172`）或 IPv6 地址（例如，`2001:db8:8b73:0000:0000:8a2e:0370:1337`）。
 
-## 自主学习
+计算机可以很容易地处理这些 IP 地址，但是对一个人来说很难找出谁在操控这些服务器以及这些网站提供什么服务。IP 地址很难记忆而且可能会随着时间的推移发生改变。
 
-_还没有可用的资料。[请考虑贡献一个](/zh-CN/docs/MDN/Community/Contributing/Getting_started)。_
+为了解决这些问题，我们使用人类可读的地址，称作域名。
 
 ## 深入探索
 
 ### 域名的结构
 
-一个域名是由几部分（有可能只是一部分，也许是两部分，三部分...）组成的简单结构，它被点分隔，不同于中文书写顺序，它**需要从右到左阅读**。
+一个域名是由几部分（有可能只有一部分、两部分、三部分……）组成的简单结构，以点分隔，并**从右到左阅读**：
 
-![Anatomy of the MDN domain name](structure.png)
+![MDN 域名剖析](structure.png)
 
 域名的每一部分都提供着特定信息。
 
-{{Glossary("TLD")}} （Top-Level Domain，顶级域名）
+- {{Glossary("TLD")}}（Top-Level Domain，顶级域名）
+
+  - : 顶级域名可以告诉用户域名所提供的服务的一般目的。最通用的顶级域名（`.com`、`.org`、`.net`）不需要 Web 服务满足特定的标准，但一些顶级域名则执行更严格的政策（因此它们的目的更加明确）。比如：
+
+    - 地区的顶级域名，如 `.us`、`.fr` 或 `.sh`，可以要求必须提供给定语言的服务或者托管在指定国家——它们应该表示特定语言或国家的资源。
+    - 包含 `.gov` 的顶级域名只能被政府部门使用。
+    - `.edu` 顶级域名只能为教育或学术机构使用。
+
+    顶级域名既可以包含拉丁字母，也可以包含特殊字符。顶级域名最长可以达到 63 个字符，虽然大多数都是两到三个字符。
 
-顶级域名可以告诉用户域名所提供的服务类型。最通用的顶级域名（.com, .org, .net）不需要 web 服务器满足严格的标准，但一些顶级域名则执行更严格的政策。比如：
+    顶级域名的完整列表[由 ICANN 维护](https://www.icann.org/resources/pages/tlds-2012-02-25-en)。
 
-- 地区的顶级域名，如.us，.fr，或.sh，可以要求必须提供给定语言的服务器或者托管在指定国家。这些 TLD 通常表明对应的网页服务从属于何种语言或哪个地区。
-- 包含.gov 的顶级域名只能被政府部门使用。
-- .edu 只能为教育或研究机构使用。
+- 标签（或组成部分）
 
-顶级域名既可以包含拉丁字母，也可以包含特殊字符。顶级域名最长可以达到 63 个字符，不过为了使用方便，大多数顶级域名都是两到三个字符。
+  - : 标签都是紧随着 TLD 的。标签由 1 到 63 个大小写不敏感的字符组成，这些字符包含字母 `A` 到 `z`、数字 `0` 到 `9`，甚至“-”这个符号（当然，“-”不应该出现在标签开头或者标签的结尾）。`a`、`97` 和 `hello-strange-person-16-how-are-you` 都是有效的示例标签。
 
-顶级域名的完整列表是[ICANN](https://www.icann.org/resources/pages/tlds-2012-02-25-en)维护的。
+    刚好位于 TLD 前面的标签也被称为*二级域名*（SLD）。
 
-- 标签 (或者说是组件)
-  - : 标签都是紧随着 TLD 的。标签由 1 到 63 个大小写不敏感的字符组成，这些字符包含字母 A-z，数字 0-9，甚至“-”这个符号（当然，“-”不应该出现在标签开头或者标签的结尾）。举几个例子，`a`，`97`，或者 `hello-strange-person-16-how-are-you` 都是合法的标签。
-- Secondary Level Domain, 二级域名
-  - : 刚好位于 TLD 前面的标签也被称为二级域名 (SLD)。一个域名可以有多个标签（或者说是组件），没有强制规定必须要 3 个标签来构成域名。例如，www\.inf.ed.ac.uk 是一个正确的域名。当拥有了“上级”部分 (例如 [mozilla.org](https://mozilla.org))，你还可以创建另外的域名 (有时被称为 "子域名") (例如 [developer.mozilla.org](/)).
+    一个域名可以有多个标签（或组成部分）。没有强制规定必须要 3 个标签来构成域名。例如，[informatics.ed.ac.uk](https://informatics.ed.ac.uk/) 是一个有效的域名。对于任何由你控制的域名（例如 [mozilla.org](https://mozilla.org)），你可以创建包含不同内容的“子域名”（例如 [developer.mozilla.org](/)、[iot.mozilla.org](https://iot.mozilla.org/) 或 [bugzilla.mozilla.org](https://bugzilla.mozilla.org)）。
 
 ### 购买域名
 
 #### 谁拥有域名？
 
-你不能真正地“购买一个域名”，你只能花钱获得一个域名在一年或多年内的使用权。不过你可以延长你的使用权，同时你的续期将优先于其他人的使用申请。但你从来都没有拥有过域名。
+你不能真正地“购买一个域名”。这样做是为了让未使用的域名最终可以重新被其他人使用。如果每个域名都被购买，那么 Web 很快就会充满未使用的、被锁定且无法被任何人使用的域名。
 
-被称为域名注册商的公司通过域名登记来记录连接你和你的域名的技术与管理信息。
+不过你可用花钱获得一个域名在一年或多年内的使用权。你可以延长你的使用权，同时你的续期将优先于其他人的申请。但你从来都没有拥有过域名。
 
-> **备注：** 对于一些域名，它可能不归属于某个域名注册商来负责记录。比如说，每个在.fire 下的域名由 Amazon 管理。
+被称为域名注册商的公司通过域名注册来记录连接你和你的域名的技术与管理信息。
+
+> [!NOTE]
+> 对于一些域名，它可能不归属于某个域名注册商来负责记录。比如说，每个在 `.fire` 下的域名由 Amazon 管理。
 
 #### 找个可用的域名
 
 想要知道一个给定的域名是否可用，
 
-- 去域名注册商的网站。它们大多会提供"whois"服务，告诉你一个域名是否可用。
-- 另外，如果你使用系统的内置 shell，可以在里面输入 whois 命令，下面显示的是 mozilla.org 网站的结果：
+- 去域名注册商的网站。它们大多会提供“whois”服务，告诉你一个域名是否可用。
+- 另外，如果你使用系统的内置 shell，可以在里面输入 `whois` 命令，下面显示的是 `mozilla.org` 的结果：
+
+  ```bash
+  whois mozilla.org
+  ```
+
+  输出如下：
+
+  ```plain
+  Domain Name:MOZILLA.ORG
+  Domain ID: D1409563-LROR
+  Creation Date: 1998-01-24T05:00:00Z
+  Updated Date: 2013-12-08T01:16:57Z
+  Registry Expiry Date: 2015-01-23T05:00:00Z
+  Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+  Sponsoring Registrar IANA ID: 292
+  WHOIS Server:
+  Referral URL:
+  Domain Status: clientDeleteProhibited
+  Domain Status: clientTransferProhibited
+  Domain Status: clientUpdateProhibited
+  Registrant ID:mmr-33684
+  Registrant Name:DNS Admin
+  Registrant Organization:Mozilla Foundation
+  Registrant Street: 650 Castro St Ste 300
+  Registrant City:Mountain View
+  Registrant State/Province:CA
+  Registrant Postal Code:94041
+  Registrant Country:US
+  Registrant Phone:+1.6509030800
+  ```
+
+正如你所见，我不能注册 `mozilla.org`，因为 Mozilla 基金会已经注册它了。
+
+另外，如果你想看看我能不能注册 `afunkydomainname.org`：
 
 ```bash
-$ whois mozilla.org
-Domain Name:MOZILLA.ORG
-Domain ID: D1409563-LROR
-Creation Date: 1998-01-24T05:00:00Z
-Updated Date: 2013-12-08T01:16:57Z
-Registry Expiry Date: 2015-01-23T05:00:00Z
-Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
-Sponsoring Registrar IANA ID: 292
-WHOIS Server:
-Referral URL:
-Domain Status: clientDeleteProhibited
-Domain Status: clientTransferProhibited
-Domain Status: clientUpdateProhibited
-Registrant ID:mmr-33684
-Registrant Name:DNS Admin
-Registrant Organization:Mozilla Foundation
-Registrant Street: 650 Castro St Ste 300
-Registrant City:Mountain View
-Registrant State/Province:CA
-Registrant Postal Code:94041
-Registrant Country:US
-Registrant Phone:+1.6509030800
+whois afunkydomainname.org
 ```
 
-正如你所见，我不能注册`mozilla.org`，因为 Mozilla 基金会已经注册它了。
-
-另外，如果你想看看我能不能注册`afunkydomainname.org`：
+输出如下（在撰写本文时）：
 
-```bash
-$ whois afunkydomainname.org
+```plain
 NOT FOUND
 ```
 
-正如你所见，（在本文写作时）这个域名在 whois 数据库中不存在，所以我们可以要求去注册它。祝你好运吧！
+正如你所见，这个域名在 `whois` 数据库中不存在，所以我们可以要求去注册它。祝你好运吧！
 
 #### 获得一个域名
 
 过程很简单：
 
 1. 去域名注册商的网站。
-2. 通常那些网站上都有突出的"获得域名"宣传，点击它。
-3. 按要求仔细填表。一定要**仔细检查**你是否有将你想要的域名拼错。一旦你给错误域名付款了，便为时已晚！
+2. 通常那些网站上都有突出的“获得域名”宣传，点击它。
+3. 按要求仔细填表。特别是要确保你没有将你想要的域名拼错。一旦付款，便为时已晚！
 4. 注册商将会在域名正确注册后通知你。数小时之内，所有 DNS 服务器都会收到你的 DNS 信息。
 
-> **备注：** 在这个过程中注册商会要求你的真实住址。请保证你正确地填写了，因为在一些国家，如果你没有提供合法的地址，注册商会关闭你的域名。
+> [!NOTE]
+> 在这个过程中注册商会要求你的真实地址。请保证你正确地填写了，因为在一些国家，如果你没有提供有效的地址，注册商会关闭你的域名。
 
 #### DNS 刷新
 
-DNS 数据库存储在全球每个 DNS 服务器上，所有这些服务器都源于 (refer to) 几个被称为“权威名称服务器”或“顶级 DNS 服务器”。只要你的注册商创建或更新给定域名的任何信息，信息就必须在每个 DNS 数据库中刷新。知道给定域名的每个 DNS 服务器都会存储一段时间的信息，然后再次刷新（DNS 服务器再次查询权威服务器）。因此，知道此域名的 DNS 服务器需要一些时间才能获取最新信息。
+DNS 数据库存储在全球每个 DNS 服务器上，所有这些服务器都源于（refer to）几个被称为“权威名称服务器”或“顶级 DNS 服务器”的特殊服务器——它们就像管理系统的主服务器。
 
-> **备注：** 这个时间一般被称为**传播时间**。然而这个术语是不精准的，因为更新本身没有传播 (top → down)。被你电脑 (down) 查询的 DNS 服务器只在他需要的时候才从权威服务器 (top) 中获取信息。
+每当你的注册商为特定域名创建或更新任何信息时，该信息必须在每个 DNS 数据库中刷新。知道特定域名的每个 DNS 服务器在自动失效并刷新之前都会存储其信息一段时间（DNS 服务器会查询权威服务器，并从中获取更新的信息）。因此，对于知道此域名的 DNS 服务器来说，获取最新信息需要一些时间。
 
 ### DNS 请求如何工作？
 
 正如我们所看到的，当你想在浏览器中展示一个网页的时候，输入域名比输入 IP 简单多了。让我们看一下这个过程：
 
-1. 在你的浏览器地址栏输入`mozilla.org`。
-2. 你的浏览器询问你的计算机是否已经识别此域名所确定的 IP 地址（使用本地 DNS 缓存）。如果是的话，这个域名被转换为 IP 地址，然后浏览器与网络服务器交换内容。结束。
-3. 如果你的电脑不知道 `mozilla.org` 域名背后的 IP, 它会询问一个 DNS 服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的 IP。
-4. 现在电脑知道了要请求的 IP 地址，你的浏览器能够与网络服务器交换内容。
+1. 在你的浏览器地址栏输入 `mozilla.org`。
+2. 你的浏览器询问你的计算机是否已经识别此域名所确定的 IP 地址（使用本地 DNS 缓存）。如果是的话，这个域名被转换为 IP 地址，然后浏览器与 Web 服务器协商内容。结束。
+3. 如果你的电脑不知道 `mozilla.org` 域名背后的 IP，它会询问 DNS 服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的 IP。
+4. 现在电脑知道了要请求的 IP 地址，你的浏览器能够与 Web 服务器协商内容。
 
-![Explanation of the steps needed to obtain the result to a DNS request](2014-10-dns-request2.png)
+![获取 DNS 请求结果所需步骤的说明](2014-10-dns-request2.png)
 
 ## 下一步
 
 好了，我们讲了许多有关的步骤和结构。接下来。
 
-- 如果你想亲自实践，现在最好开始深入设计和探索 [对一个网页的剖析](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts)。
-- 关于建站需要的花销这类问题的讨论也是有价值的。请参考 [建站需要花费多少钱](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)。
-- 或者在维基百科上阅读更多关于 [域名](http://en.wikipedia.org/wiki/Domain_name)。
+- 如果你想亲自实践，现在最好开始深入设计和探索[网页的结构](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts)。
+- 关于建站需要的花销这类问题的讨论也是有价值的。请参考[建站需要花费多少钱](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)。
+- 或者在维基百科上阅读更多关于[域名](https://zh.wikipedia.org/wiki/域名)。
+- 你也可以在[这里](https://howdns.works/)找到有关 DNS 工作原理的有趣且丰富多彩的解释。
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_url/index.md
index 55f45bb7c28cb7..db235ac4b94b77 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_url/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_url/index.md
@@ -1,186 +1,149 @@
 ---
 title: 什么是 URL？
 slug: Learn/Common_questions/Web_mechanics/What_is_a_URL
+l10n:
+  sourceCommit: 9de3d03957f1d66f02f45400a6981372aa368c1f
 ---
 
 {{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
 
-本文讨论了统一资源定位符 (URL)，并解释了他们是什么，以及如何被构建的。
+本文讨论了统一资源定位符（URL），并解释了它是什么，以及它的结构。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">前提：</th>
       <td>
-        你首先需要知道<a href="/zh-CN/docs/Learn/How_the_Internet_works">
-          互联网是如何工作的</a
-        >，<a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server"
-          >什么是网络服务器</a
-        >
-        以及
+        你首先需要知道<a href="/zh-CN/docs/Learn/How_the_Internet_works"
+          >互联网是如何工作的</a
+        >、<a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server"
+          >什么是 Web 服务器</a
+        >，以及
         <a href="/zh-CN/docs/Learn/Common_questions/What_are_hyperlinks"
-          >网络中超链接的概念</a
+          >Web 中超链接的概念</a
         >。
       </td>
     </tr>
     <tr>
       <th scope="row">目标：</th>
-      <td>你将会学习到 URL 是什么，以及它在网络上是如何工作的。</td>
+      <td>你将会学习到 URL 是什么，以及它在 Web 中是如何工作的。</td>
     </tr>
   </tbody>
 </table>
 
 ## 概述
 
-和 {{Glossary("Hypertext")}} 以及 {{Glossary("HTTP")}} 一样，**URL** 是 Web 中的一个核心概念。它是{{Glossary("Browser","浏览器")}}用来检索 web 上公布的任何资源的机制。
-
-**URL** 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 web 服务器的拥有者需要认真地维护资源以及与它关联的 URL。
-
-## 自主学习
+**URL**（统一资源定位符）是因特网中的唯一资源的地址。它是{{Glossary("Browser","浏览器")}}用于检索已发布资源（例如 HTML 页面、CSS 文档、图像等）的关键机制之一。
 
-_还没有可用的资料，[请考虑贡献一个](/zh-CN/docs/MDN/Community/Contributing/Getting_started)。_
+理论上说，每个有效的 URL 都指向一个唯一的资源。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 Web 服务器的拥有者需要认真地维护资源以及与它关联的 URL。
 
-## 深入探索
-
-### 基础：剖析 URL
+## 基础：剖析 URL
 
 下面是一些 URL 的示例：
 
-```
+```plain
 https://developer.mozilla.org
 https://developer.mozilla.org/zh-CN/docs/Learn/
 https://developer.mozilla.org/zh-CN/search?q=URL
 ```
 
-你可以将上面的这些网址输进你的浏览器地址栏来告诉浏览器加载相关联的页面（或资源）。
+你可以将上面的这些网址输进你的浏览器地址栏来告诉浏览器加载相关联的资源（在这三个示例中为网页）。
 
-一个 URL 由不同的部分组成，其中一些是必须的，而另一些是可选的。让我们以下面这个 URL 为例看看其中最重要的部分：
+URL 由不同的部分组成，其中一些是必须的，而另一些是可选的。最重要的部分以在下面的 URL 上高亮（详细信息在下面的各节中提供）：
 
 ![完整的 URL](mdn-url-all.png)
 
-## 协议
+> [!NOTE]
+> 你可以将 URL 视为普通的邮寄地址：_方案_（scheme）表示你想要使用的邮政服务，_域名_（domain name）就像是城市或城镇，_端口_（port）就像邮政编码；_路径_（path）表示你的邮件应该送到的建筑物；_参数_（parameter）表示额外的信息，例如建筑物中公寓的编号；最后，_锚点_（anchor）表示邮件的实际收信人。
 
-![Scheme](mdn-url-protocol@x2_update.png)
+> [!NOTE]
+> 关于 URL 还有[一些额外的部分和规则](https://zh.wikipedia.org/wiki/统一资源定位符)，但对于普通用户或 Web 开发人员来说并不相关。不用担心这些，你不需要了解它们来构建和使用功能完整的 URL。
 
-`http` 是协议。它表明了浏览器必须使用何种协议。它通常都是 HTTP 协议或是 HTTP 协议的安全版，即 HTTPS。Web 需要它们二者之一，但浏览器也知道如何处理其他协议，比如 `mailto:`（打开邮件客户端）或者 `ftp:`（处理文件传输），所以当你看到这些协议时，不必惊讶。
+## 方案
 
-## Authority
+![方案](mdn-url-protocol@x2_update.png)
 
-![Authority](mdn-url-authority.png)
+URL 的第一部分是*方案*（scheme），它表示浏览器必须使用的协议来请求资源（协议是计算机网络中交换或传输数据的一组方法）。通常对于网站，协议是 HTTPS 或 HTTP（它的非安全版本）。访问网页需要这两者之一，但浏览器还知道如何处理其他方案，比如 `mailto:`（打开邮件客户端），所以如果你看到其他协议也不要感到惊讶。
 
-- `www.example.com` 是域名。它表明正在请求哪个 Web 服务器。或者，可以直接使用{{Glossary("IP address")}}，但是因为它不太方便，所以它不经常在网络上使用。
-- `:80` 是端口。它表示用于访问 Web 服务器上的资源的技术“门”。如果 Web 服务器使用 HTTP 协议的标准端口（HTTP 为 80，HTTPS 为 443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。
+## 权威
+
+![权威](mdn-url-authority.png)
+
+接下来是*权威*（authority），它与方案之间用字符模式 `://` 分隔。如果存在，权威会包括*域*（例如 `www.example.com`）和*端口*（`80`），由冒号分隔：
+
+- 域指示被请求的 Web 服务器。通常这是一个[域名](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)，但也可以使用 {{Glossary("IP address", "IP 地址")}}（但这很少见，因为它不太方便）。
+- 端口指示用于访问 Web 服务器上资源的技术“门户”。如果 Web 服务器使用 HTTP 协议的标准端口（HTTP 为 80，HTTPS 为 443）来授予对其资源的访问权限，则通常会省略端口。否则，端口是强制的。
+
+> [!NOTE]
+> 方案和权威之间的分隔符是 `://`。冒号将方案与 URL 的下一部分分隔开，而 `//` 表示 URL 的下一部分是权威。
+>
+> 不使用权威的 URL 示例之一是邮件客户端（`mailto:foobar`）。它包含方案，而不使用权威的部分。因此，冒号后没有跟着两个斜杠，并且只充当方案和邮件地址之间的分隔符。
 
 ## 资源路径
 
 ![文件路径](mdn-url-path@x2.png)
 
-`/path/to/myfile.html` 是网络服务器上资源的路径。在 Web 的早期阶段，像这样的路径表示 Web 服务器上的物理文件位置。如今，它主要是由没有任何物理现实的 Web 服务器处理的抽象。
+`/path/to/myfile.html` 是 Web 服务器上资源的路径。在 Web 的早期阶段，像这样的路径表示 Web 服务器上的物理文件位置。如今，它主要是由没有任何物理现实的 Web 服务器处理的抽象。
 
 ## 参数
 
 ![参数](mdn-url-parameters@x2.png)
 
-`?key1=value1&key2=value2` 是提供给网络服务器的额外参数。这些参数是用 `&` 符号分隔的键/值对列表。在返回资源之前，Web 服务器可以使用这些参数来执行额外的操作。每个 Web 服务器都有自己关于参数的规则，唯一可靠的方式来知道特定 Web 服务器是否处理参数是通过询问 Web 服务器所有者。
+`?key1=value1&key2=value2` 是提供给 Web 服务器的额外参数。这些参数是用 `&` 符号分隔的键/值对列表。在返回资源之前，Web 服务器可以使用这些参数来执行额外的操作。每个 Web 服务器都有自己关于参数的规则，唯一可靠的方式来知道特定 Web 服务器是否处理参数是通过询问 Web 服务器所有者。
 
 ## 锚点
 
 ![锚点](mdn-url-anchor@x2.png)
 
-`#SomewhereInTheDocument` 是资源本身的另一部分的锚点。锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。例如，在 HTML 文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。值得注意的是，＃后面的部分（也称为片段标识符）从来没有发送到请求的服务器。
-
-> **备注：** 这里是关于 URL 的[一些额外的部分和一些额外的规则](https://zh.wikipedia.org/wiki/统一资源定位符)，但它们对于普通用户或 Web 开发者不是非常重要。你不必担心这个，要构筑和使用完全实用的 URL 不必了解这些。
+`#SomewhereInTheDocument` 是资源本身的另一部分的锚点。锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。例如，在 HTML 文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。值得注意的是，**#** 后面的部分（也称为**片段标识符**）不会随请求被发送到服务器。
 
-你可能想到一个 URL 类似普通信件的地址：协议代表你要使用的邮政服务，域名是城市或者城镇，端口则像邮政编码；路径代表着你的信件所有递送的大楼；参数则提供额外的信息，如大楼所在单元；最后，锚点表示信件的收件人。
-
-### 如何使用 URL
+## 如何使用 URL
 
 可以直接在浏览器的地址栏里输入任何 URL，来获得后台的资源。但是这仅仅是冰山一角。
 
-{{Glossary("HTML")}} 语言 — [后续会再来讨论](/zh-CN/docs/Learn/HTML/HTML_tags) — 对 URLs 有大量的使用：
+[后续会再来讨论](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)在 URL 中有着大量的使用的 {{Glossary("HTML")}} 语言：
 
-- 为在其他文档中新建链接，用 {{HTMLElement("a")}} ;
-- 为将文档与它的相关资源关联，用各种标签如 {{HTMLElement("link")}} 或 {{HTMLElement("script")}} ;
-- 为显示多媒体如图片 (用 {{HTMLElement("img")}} ), 视频 (用 {{HTMLElement("video")}} ), 声音和音乐 (用 {{HTMLElement("audio")}} ), 等等;
-- 为显示其他 HTML 文档，用 {{HTMLElement("iframe")}} .
+- 创建到其他文档的链接，用 {{HTMLElement("a")}} 元素；
+- 将文档与它的相关资源关联，用各种元素如 {{HTMLElement("link")}} 或 {{HTMLElement("script")}}；
+- 显示多媒体如图片（用 {{HTMLElement("img")}} 元素）、视频（用 {{HTMLElement("video")}} 元素）、声音和音乐（用 {{HTMLElement("audio")}} 元素）等；
+- 显示其他 HTML 文档，用 {{HTMLElement("iframe")}} 元素。
 
-其他大量使用 URLs 的技术如 {{Glossary("CSS")}} 或 {{Glossary("JavaScript")}}, 这些才是 Web 的中心。
+> **备注：** 当在页面中加载资源时指定 URL（例如使用 `<script>`、`<audio>`、`<img>`、`<video>` 等），通常应只使用 HTTP 和 HTTPS URL，除了一些例外情况（一个显著的例外是 `data:`；参见[数据 URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)）。例如，使用 FTP 是不安全的，并且不再受现代浏览器的支持。
 
-### 绝对 URL 和相对 URL
+其他大量使用 URL 的技术（如 {{Glossary("CSS")}} 或 {{Glossary("JavaScript")}}）才是 Web 的中心。
 
-我们上面看到的是一个绝对的 URL，但也有一个叫做相对 URL 的东西。我们来看看这个区别意味着什么呢？
+## 绝对 URL 和相对 URL
 
-URL 的必需部分在很大程度上取决于使用 URL 的上下文。在浏览器的地址栏中，网址没有任何上下文，因此你必须提供一个完整的（或绝对的）URL，就像我们上面看到的一样。你不需要包括协议（浏览器默认使用 HTTP）或端口（仅当目标 Web 服务器使用某些异常端口时才需要），但 URL 的所有其他部分都是必需的。
+我们上面看到的是一个*绝对 URL*，但也有一个叫做*相对 URL* 的东西。[URL 标准](https://url.spec.whatwg.org/#absolute-url-string)定义了两者——尽管它使用术语[_绝对 URL 字符串_](https://url.spec.whatwg.org/#absolute-url-string)和[_相对 URL 字符串_](https://url.spec.whatwg.org/#relative-url-string)，以将它们与 [URL 对象](https://url.spec.whatwg.org/#url)（URL 的内存表示）区分开来。
 
-当文档中使用 URL 时，例如 HTML 页面中的内容有所不同。因为浏览器已经有文档自己的 URL，它可以使用这些信息来填写该文档中可用的任何 URL 的缺失部分。我们可以通过仅查看 URL 的路径部分来区分绝对 URL 和相对 URL。**如果 URL 的路径部分以“/”字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文**。
+让我们来看看在 URL 的背景下，*绝对*和*相对*之间的区别是什么。
 
-我们来看一些例子来使这个更清楚。
+URL 的必需部分在很大程度上取决于使用 URL 的上下文。在浏览器的地址栏中，网址没有任何上下文，因此你必须提供一个完整的（或*绝对的*）URL，就像我们上面看到的一样。你不需要包括协议（浏览器默认使用 HTTP）或端口（仅当目标 Web 服务器使用某些非常用端口时才需要），但 URL 的所有其他部分都是必需的。
 
-#### 绝对 URL 示例
+当文档中使用 URL 时，例如 HTML 页面中的内容有所不同。因为浏览器已经有文档自己的 URL，它可以使用这些信息来填写该文档中可用的任何 URL 的缺失部分。我们可以通过仅查看 URL 的*路径*部分来区分*绝对 URL* 和*相对 URL*。如果 URL 的路径部分以“`/`”字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文。
 
-<table>
-  <tbody>
-    <tr>
-      <td>完整网址（与之前使用的网址相同）</td>
-      <td><pre>https://developer.mozilla.org/zh-CN/docs/Learn</pre></td>
-    </tr>
-    <tr>
-      <td>隐去协议</td>
-      <td>
-        <pre>//developer.mozilla.org/zh-CN/docs/Learn</pre>
-        <p>
-          在这种情况下，浏览器将使用与用于加载该 URL 的文档相同的协议来调用该 URL。
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td>隐去域名</td>
-      <td>
-        <pre>/zh-CN/docs/Learn</pre>
-        <p>
-          这是 HTML 文档中绝对 URL 最常见的用例。浏览器将使用与用于加载托管该 URL 的文档相同的协议和相同的域名。<strong>注意</strong>：不可能省略该域名而不省略协议。
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+我们来看一些示例来使这个更清楚。我们假设 URL 是在位于以下 URL 的文档中定义的：`https://developer.mozilla.org/zh-CN/docs/Learn`。
 
-#### 相对 URL 示例
+`https://developer.mozilla.org/zh-CN/docs/Learn` 本身是绝对 URL。它具有定位指向的资源所需的所有必要部分。
 
-为了更好地了解以下示例，我们假设从位于以下 URL 的文档中调用 URL： `https://developer.mozilla.org/zh-CN/docs/Learn`
+以下所有的 URL 是相对 URL：
 
-<table>
-  <tbody>
-    <tr>
-      <td>子资源</td>
-      <td>
-        <pre>Skills/Infrastructure/Understanding_URLs</pre>
-        <p>因为该 URL 不以 / 开头，浏览器将尝试在包含当前资源的子目录中查找文档。所以在这个例子中，我们真的想要达到这个 URL <code>https://developer.mozilla.org/zh-CN/docs/Learn/Skills/Infrastructure/Understanding_URLs</code>
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td>回到目录树中</td>
-      <td>
-        <pre>../CSS/display</pre>
-        <p>
-          在这种情况下，我们使用从 UNIX 文件系统世界继承的../写入约定来告诉我们要从一个目录上升的浏览器。在这里，我们要达到以下 URL：https://developer.mozilla.org/zh-CN/docs/Learn/../CSS/display，可以将其简化为：https://developer.mozilla.org/zh-CN/docs/CSS/display
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+- 方案相对 URL：`//developer.mozilla.org/zh-CN/docs/Learn`——只缺少协议。浏览器将使用与用于加载托管该 URL 的文档相同的协议。
+- 域相对 URL：`/zh-CN/docs/Learn`——协议和域名同时缺失。浏览器将使用与用于加载托管该 URL 的文档相同的协议和域名。
+- 子资源：`Common_questions/Web_mechanics/What_is_a_URL`——协议和域名同时缺失，且路径不以 `/` 开头。浏览器将尝试在包含当前资源的子目录中查找文档。在这个例子中，我们真想得到的 URL 是：`https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL`。
+- 在目录树中返回：`../CSS/display`——协议和域名同时缺失，且路径以 `..` 开头。这是从 UNIX 文件系统世界继承的——告诉浏览器我们要回到上一级。在这里，我们想要得到的 URL 是：`https://developer.mozilla.org/zh-CN/docs/Learn/../CSS/display`，可以将其简化为：`https://developer.mozilla.org/zh-CN/docs/CSS/display`。
+- 仅锚点：`#语义_url`——除了锚点外，所有部分都缺失。浏览器将使用当前文档的 URL，并替换或添加锚点部分。当你想要链接到当前文档的特定部分时，这十分有用。
 
-### 语义 URL
+## 语义 URL
 
-尽管 URL 具有非常的技术性，但 URL 表示一个可读性的网站入口点。它们可以被记住，并且任何人都可以将它们输入浏览器的地址栏。人是 Web 的核心，因此建立所谓的 _[semantic URLs](http://en.wikipedia.org/wiki/Semantic_URL)_ 被认为是最佳实践。语义 URL 使用具有固有含义的单词，任何人都可以理解，无论他们的技术水平如何。
+尽管 URL 具有非常的技术性，但 URL 表示一个人类可读的网站入口点。它们可以被记住，并且任何人都可以将它们输入浏览器的地址栏。人是 Web 的核心，因此建立所谓的[_语义 URL_](https://zh.wikipedia.org/wiki/语义URL)被认为是最佳实践。语义 URL 使用具有固有含义的单词，任何人都可以理解，无论他们的技术水平如何。
 
 语言语义当然与电脑无关。你可能经常看到看起来像随机字符混搭的网址。但创建人类可读的 URL 有很多优点：
 
-- 操作它们更容易
-- 它根据用户在哪里，他们在做什么，他们正在阅读或在网络上进行互动来澄清用户的情况。
+- 操作它们更容易。
+- 可以让用户更清楚地了解他们在哪里、他们在做什么、他们正在阅读或在 Web 上进行交互的内容。
 - 一些搜索引擎可以使用这些语义来改进相关页面的分类。
 
-## 下一步
+## 参见
 
-- [理解域名](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
+[数据 URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)：以 `data:` 方案为前缀的 URL，允许内容创建者在文档中嵌入小文件。
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
index 07558dbbda833d..102e3de062c509 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
@@ -2,7 +2,7 @@
 title: 什么是 web 服务器？
 slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server
 l10n:
-  sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303
+  sourceCommit: b2af4eb16dd4c399ed81f67efd49777fa6ae9030
 ---
 
 {{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
@@ -88,7 +88,7 @@ HTTP 为客户和服务器间的如何沟通提供清晰的规则。我们会在
 1. 当收到一个请求时，HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配。
 2. 如果是，网络服务器会传送文件内容回到浏览器。如果不是，服务器会检查是否应该动态生成请求所需的文件（参见[静态和动态内容](#静态和动态内容)）。
 3. 如果两种处理都不可能，网络服务器会返回一个错误信息到浏览器，最常见的是 {{HTTPStatus("404", "404 Not Found")}}。404 错误太常见以至于很多网页设计者花费许多时间去设计 404 错误页面。
-   [![MDN 404 页面示例](mdn-404.jpg)](/zh-CN/docs/Web/HTTP/Status/404)
+   ![MDN 404 页面示例](mdn-404.jpg)
 
 ### 静态和动态内容
 
diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
index fa939cfc01c57a..8bea6e3670a595 100644
--- a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
+++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
@@ -26,7 +26,8 @@ slug: Learn/CSS/Building_blocks/A_cool_looking_box
 
 - 复制一份[HTML](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-start/index.html)和[CSS](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-start/style.css)代码，并在一个新的目录下把它们保存为`index.html` 和 `style.css`。
 
-> **备注：** 或者你也可以用[JSBin](https://jsbin.com/)或[Glitch](https://glitch.com/)这样的网站来做这个评估，把链接里的 HTML 和 CSS 代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的 CSS 面板的话，把 CSS 代码放到 HTML 文档头部的`<style>`元素里就好。
+> [!NOTE]
+> 或者你也可以用[JSBin](https://jsbin.com/)或[Glitch](https://glitch.com/)这样的网站来做这个评估，把链接里的 HTML 和 CSS 代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的 CSS 面板的话，把 CSS 代码放到 HTML 文档头部的`<style>`元素里就好。
 
 ## 项目简介
 
diff --git a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md
index 26e6058768fab9..c00b00800acaf8 100644
--- a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md
+++ b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md
@@ -176,7 +176,8 @@ button:active {
 
 当按钮被按下时，这里的 active 声明将第一个盒阴影换成一个非常暗的 inset 阴影。给人一种按钮被按下的样子。
 
-> **备注：** 还有一个可以在 box-shadow 中设置的值 — 另外一个位于颜色值前面可选的长度值，即**spread radius**，如果设置了这个值，将会导致阴影变得比原始的阴影更大，这个值不是很常用，但是值得一提。
+> [!NOTE]
+> 还有一个可以在 box-shadow 中设置的值 — 另外一个位于颜色值前面可选的长度值，即**spread radius**，如果设置了这个值，将会导致阴影变得比原始的阴影更大，这个值不是很常用，但是值得一提。
 
 ## Filters（滤镜）
 
@@ -223,7 +224,8 @@ p {
 - 滤镜很新——它们可以被大多数的现代的浏览器支持，包括 Microsoft Edge，但它们一点也不能被 IE 浏览器支持。因此如果你在你的设计中使用滤镜，你需要确保你的内容即使没有滤镜也是可用的。
 - 你会看到我们在`filter`属性中通过`-webkit-`前缀包含了一个版本信息，这被称为一个 {{glossary("Vendor Prefix")}}，有时会被浏览器使用，以在一个新特性完整实现之前，当它与无前缀版本没有冲突的时候支持并实验这个特性。Vendor prefixes 永远都不被指望着被 web 开发人员使用，但是它们有时候确实会被在产品页面中使用，即当实验性的特性确实被需要时。在这个实例中，Chrome/Safari/Opera 目前要求这些属性的`-webkit-`版本，而 Edge 和 Firefox 则使用后者，无前缀版本。
 
-> **备注：** 如果你确实决定在你的代码中使用前缀，确保你包括了所有需要的前缀以及无前缀的版本，这样才会有尽可能多的浏览器能够使用这些特性，并且如果浏览器落下了前缀，它们也能够使用无前缀的版本。另外需要注意的是这些实验性的特性可能会有改变，这可能会导致你的代码被破坏，在前缀被去除之前，最好还是仅仅实验这些特性。
+> [!NOTE]
+> 如果你确实决定在你的代码中使用前缀，确保你包括了所有需要的前缀以及无前缀的版本，这样才会有尽可能多的浏览器能够使用这些特性，并且如果浏览器落下了前缀，它们也能够使用无前缀的版本。另外需要注意的是这些实验性的特性可能会有改变，这可能会导致你的代码被破坏，在前缀被去除之前，最好还是仅仅实验这些特性。
 
 你可以看到更多关于滤镜的例子，在 [filters.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html) (也可以看 [source code](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/filters.html)).
 
@@ -238,7 +240,8 @@ CSS 混合模式允许我们为元素添加一个混合模式，以当两个元
 
 你可以找到比这里用到的更多的例子，在我们的[blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) 示例页面 (查看 [source code](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/blend-modes.html)), 或者在 {{cssxref("&lt;blend-mode&gt;")}} 参考页面。
 
-> **备注：** 混合模式（Blend modes）同样也很新，而且略微不如滤镜（filter）的被支持度。至今也没有没 Edge 支持，并且 Safari 也仅仅支持部分混合模式选项。
+> [!NOTE]
+> 混合模式（Blend modes）同样也很新，而且略微不如滤镜（filter）的被支持度。至今也没有没 Edge 支持，并且 Safari 也仅仅支持部分混合模式选项。
 
 ### background-blend-mode
 
@@ -334,7 +337,8 @@ article div:last-child {
 
 你可以看到，多层混合（mix-blend）不仅混合了两种背景图像，还混合了在`<div>`下面的颜色。
 
-> **备注：** 如果你不理解上面的一些布局属性，请不要担心，像 {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} 等。我们将在 [CSS Layout](/zh-CN/docs/Learn/CSS/CSS_layout) 模块中详细地介绍这些内容。
+> [!NOTE]
+> 如果你不理解上面的一些布局属性，请不要担心，像 {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} 等。我们将在 [CSS Layout](/zh-CN/docs/Learn/CSS/CSS_layout) 模块中详细地介绍这些内容。
 
 ## -webkit-background-clip: text
 
@@ -351,7 +355,8 @@ article div:last-child {
 
 如果你确实希望在你的生产工作中使用这些特性，请确保在浏览器中进行彻底的测试，并检查这些特性不工作的地方，站点仍然可用。
 
-> **备注：** 对于一个完整的 `-webkit-background-clip: text` 代码示例，见[background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html)（也可以见[源码](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/background-clip-text.html)）。
+> [!NOTE]
+> 对于一个完整的 `-webkit-background-clip: text` 代码示例，见[background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html)（也可以见[源码](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/background-clip-text.html)）。
 
 ## 自主学习：尝试一些效果
 
diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md
index 5c7be375bc342f..6f86d9372b3218 100644
--- a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -105,7 +105,8 @@ CSS {{cssxref("background")}} 属性是本课程中我们将遇到的一些普
 
 {{cssxref("background-position")}} 属性允许你选择背景图片出现在它所应用的盒子上的位置。这使用了一个坐标系统，其中方框的左上角是 `(0,0)`，方框沿水平（`x`）和垂直（`y`）轴定位。
 
-> **备注：** 默认的 `background-position` 值是 `(0,0)`。
+> [!NOTE]
+> 默认的 `background-position` 值是 `(0,0)`。
 
 最常见的 `background-position` 值有两个单独的值——一个水平值后面跟着一个垂直值。
 
@@ -171,7 +172,8 @@ CSS {{cssxref("background")}} 属性是本课程中我们将遇到的一些普
 
 当你这样做时，你可能会出现背景图片相互重叠的情况。背景将分层，最后列出的背景图片位于最下层，而之前的每张图片都堆在代码中紧随其后的那张图片之上。
 
-> **备注：** 渐变可以与常规的背景图像很好地混合在一起。
+> [!NOTE]
+> 渐变可以与常规的背景图像很好地混合在一起。
 
 其他 `background-*` 属性也可以像 `background-image` 一样使用逗号分隔的方式设置：
 
@@ -261,7 +263,8 @@ background-position:
 }
 ```
 
-> **备注：** 这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性（例如，从左到右或从右到左的文本，或从上到下）。在下一课中，我们将探讨这些问题，这包括[处理不同的文本方向](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
+> [!NOTE]
+> 这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性（例如，从左到右或从右到左的文本，或从上到下）。在下一课中，我们将探讨这些问题，这包括[处理不同的文本方向](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
 
 有各种各样的样式可以用于边框。在下面的例子中，我们为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。
 
diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
index 3bc1fb14da329f..516586bdc0ea2a 100644
--- a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -72,7 +72,8 @@ CSS 代表**层叠样式表**（Cascading Style Sheets），理解第一个词*
 
 一些属性是不能继承的——举个例子如果你在一个元素上设置 {{cssxref("width")}} 为 50% ，所有的后代不会是父元素的宽度的 50% 。如果这个也可以继承的话，CSS 就会很难使用了！
 
-> **备注：** 在 MDN CSS 属性参考页面，你会发现一个名为“形式定义”的技术信息框，其中列举了属性的很多数据信息，包括能否被继承。以 [color 属性的形式定义部分](/zh-CN/docs/Web/CSS/color#形式定义)为例。
+> [!NOTE]
+> 在 MDN CSS 属性参考页面，你会发现一个名为“形式定义”的技术信息框，其中列举了属性的很多数据信息，包括能否被继承。以 [color 属性的形式定义部分](/zh-CN/docs/Web/CSS/color#形式定义)为例。
 
 ## 理解这些概念是如何协同工作的
 
@@ -109,7 +110,8 @@ CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性
 - {{cssxref("unset")}}
   - : 将属性重置为自然值，也就是如果属性是自然继承那么就是 `inherit`，否则和 `initial` 一样
 
-> **备注：** 见 [CSS 声明的源](/zh-CN/docs/Web/CSS/Cascade#css_声明的源)有更多信息和具体是怎么工作的。
+> [!NOTE]
+> 见 [CSS 声明的源](/zh-CN/docs/Web/CSS/Cascade#css_声明的源)有更多信息和具体是怎么工作的。
 
 我们可以查看一个链接列表来探索这些值是如何运作的。在下面的实例中，你可以通过修改 CSS 来查看它们的功能，写代码是掌握 HTML 和 CSS 最好的办法。
 
@@ -170,7 +172,8 @@ CSS 的简写属性 [`all`](/zh-CN/docs/Web/CSS/all) 可以用于同时将这些
 - **类**：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
 - **元素**：选择器中包含元素、伪元素选择器则个位得一分。
 
-> **备注：** 通用选择器（[`*`](/zh-CN/docs/Web/CSS/Universal_selectors)）、组合符（`+`、`>`、`~`、' '）和调整优先级的选择器（[`:where()`](/zh-CN/docs/Web/CSS/:where)）不会影响优先级。
+> [!NOTE]
+> 通用选择器（[`*`](/zh-CN/docs/Web/CSS/Universal_selectors)）、组合符（`+`、`>`、`~`、' '）和调整优先级的选择器（[`:where()`](/zh-CN/docs/Web/CSS/:where)）不会影响优先级。
 
 否定（[`:not()`](/zh-CN/docs/Web/CSS/:not)）和任意匹配（[`:is()`](/zh-CN/docs/Web/CSS/:is)）伪类本身对优先级没有影响，但它们的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级。
 
@@ -194,7 +197,8 @@ CSS 的简写属性 [`all`](/zh-CN/docs/Web/CSS/all) 可以用于同时将这些
 - 第三四个选择器都是链接文本颜色样式——后者赢了使得文本变成白色，因为它虽然少一个元素选择器，但是多了一个类选择器。所以优先级是 1-1-3 vs. 1-0-4。
 - 第 5 到 7 个选择器都是鼠标悬停时链接边框样式。第六个显然输给了第五个，优先级是 0-2-3 vs. 0-2-4——少了个元素选择器。第七个，比第五第六都高——子选择器数量相同，但是有一个元素选择器变成类选择器。所以最后优先级是 0-3-3 vs. 0-2-3 和 0-2-4。
 
-> **备注：** 每一个选择器类编都有它自己的优先级等级，它们不会被具有较低优先级的选择器覆盖。例如，权重为*一百万*的**类**选择器不会覆盖权重为*一*的 **ID** 选择器。
+> [!NOTE]
+> 每一个选择器类编都有它自己的优先级等级，它们不会被具有较低优先级的选择器覆盖。例如，权重为*一百万*的**类**选择器不会覆盖权重为*一*的 **ID** 选择器。
 >
 > 评估优先级的最佳方法是对不同的优先级等级单独进行评分，并从最高的等级开始，必要时再计算低优先级等级的权重。即，仅当某一列的优先级权重相同时，你才需要评估下一列；否则，你可以直接忽略低等级的选择器，因为它们无法覆盖高优先级等级的选择器。
 
@@ -206,7 +210,8 @@ CSS 的简写属性 [`all`](/zh-CN/docs/Web/CSS/all) 可以用于同时将这些
 
 有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用——`!important`。用于修改特定属性的值，能够覆盖普通规则的层叠。
 
-> **备注：** 了解 `!important` 是为了在阅读别人代码的时候知道有什么作用。**但是，强烈建议除了非常情况不要使用它。**`!important` 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。
+> [!NOTE]
+> 了解 `!important` 是为了在阅读别人代码的时候知道有什么作用。**但是，强烈建议除了非常情况不要使用它。**`!important` 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。
 
 看看这个示例，有两个段落，其中一个有 ID。
 
@@ -219,7 +224,8 @@ CSS 的简写属性 [`all`](/zh-CN/docs/Web/CSS/all) 可以用于同时将这些
 3. 两个元素都有 `better` [`class`](/zh-CN/docs/Web/HTML/Global_attributes#class)，但是第二个有 [`id`](/zh-CN/docs/Web/HTML/Global_attributes#id) 。因为 ID 选择器比类选择器优先级更高（一个页面只能有一个独特的 ID，但是很多元素都有相同的类——ID 对于目标非常独特），红色背景和 1px 黑色边框应该都被应用到第二个元素，第一个元素应该是灰色背景和 no border，根据类选择器。
 4. 第二个元素有红色背景但是没有边框。为什么？因为 `!important` 声明在第二条规则里——在 `border: none` 后面，说明即使计算优先级低，这个属性也使用这个值。
 
-> **备注：** 覆盖 `!important` 唯一的办法就是另一个 `!important` 具有相同*优先级*而且顺序靠后，或者更高优先级。
+> [!NOTE]
+> 覆盖 `!important` 唯一的办法就是另一个 `!important` 具有相同*优先级*而且顺序靠后，或者更高优先级。
 
 在一种情况下，你可能不得不使用它：当你不能编辑核心的 CSS 模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它。
 
@@ -242,7 +248,8 @@ CSS 的简写属性 [`all`](/zh-CN/docs/Web/CSS/all) 可以用于同时将这些
 5. 用户样式表中的 `!important` 声明
 6. 用户代理样式表中的 `!important` 声明
 
-> **备注：** 标记为 `!important` 的样式的优先级顺序是颠倒的。web 开发人员的样式表覆盖用户的样式表是有意义的，因此设计可以按预期进行，但是有时用户有充足的理由覆盖 web 开发人员的样式，正如上面提到的——这可以通过在他们的规则中使用 `!important` 来实现。
+> [!NOTE]
+> 标记为 `!important` 的样式的优先级顺序是颠倒的。web 开发人员的样式表覆盖用户的样式表是有意义的，因此设计可以按预期进行，但是有时用户有充足的理由覆盖 web 开发人员的样式，正如上面提到的——这可以通过在他们的规则中使用 `!important` 来实现。
 
 ## 级联层的顺序
 
diff --git a/files/zh-cn/learn/css/building_blocks/cascade_layers/index.md b/files/zh-cn/learn/css/building_blocks/cascade_layers/index.md
index 1d02b5bde1649e..30ed85f498a2ae 100644
--- a/files/zh-cn/learn/css/building_blocks/cascade_layers/index.md
+++ b/files/zh-cn/learn/css/building_blocks/cascade_layers/index.md
@@ -132,7 +132,8 @@ CSS 中的 C 代表“层叠”。这是样式层叠在一起的方法。用户
 
 在尚未初始化具有相同名称的层的情况下，这三种方法中的任何一种都会创建一个层。如果在 `@layer` at 规则或带有 `layer()` 的 `@import` 中没有提供层名称，则将创建一个新的匿名层。
 
-> **备注：** 层的优先顺序是它们创建的顺序。不在层中的样式，或者称为“未分层样式”，会层叠到最终的隐式标签中。
+> [!NOTE]
+> 层的优先顺序是它们创建的顺序。不在层中的样式，或者称为“未分层样式”，会层叠到最终的隐式标签中。
 
 在讨论嵌套层之前，让我们对创建层的三种方法进行详细介绍。
 
@@ -207,7 +208,8 @@ body {
 
 通过在不命名层的情况下将样式分配给层来创建匿名层。只能在创建时向未命名的层添加样式。
 
-> **备注：** 后续使用不带层名的 `@layer` 会创建额外的未命名层；它不会将样式附加到先前存在的未命名层。
+> [!NOTE]
+> 后续使用不带层名的 `@layer` 会创建额外的未命名层；它不会将样式附加到先前存在的未命名层。
 
 `@layer` at 规则创建一个命名或未命名的层，或者如果指定的具名层已经存在，则将样式附加到该层。我们称第一个匿名层为 `<anonymous(01)>`，第二个为 `<anonymous(02)>`，这只是为了便于解释。这些实际上是未命名的层。没有办法引用它们或向它们添加额外的样式。
 
@@ -259,7 +261,8 @@ body {
   (width >= 32rem);
 ```
 
-> **备注：** 没有与链接样式表的 {{HTMLElement('link')}} 方法相对应的方法。当你无法在样式表内部使用 `@layer` 时，请使用 `@import` 将样式表导入到层中。
+> [!NOTE]
+> 没有与链接样式表的 {{HTMLElement('link')}} 方法相对应的方法。当你无法在样式表内部使用 `@layer` 时，请使用 `@import` 将样式表导入到层中。
 
 ### 嵌套层的概述
 
diff --git a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
index 141ce2fca70674..38e2cbca950075 100644
--- a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
+++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
@@ -27,7 +27,8 @@ slug: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
 - 复制一份[HTML](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/letterheaded-paper-start/index.html)和[CSS](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/letterheaded-paper-start/style.css)代码，并在一个新的目录下把它们保存为`index.html` 和 `style.css`。
 - 在同一个目录下下载这几张图片：[顶部](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png)、[底部](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png)和[标志](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png)。
 
-> **备注：** 或者你也可以用[JSBin](https://jsbin.com/)或[Glitch](https://glitch.com/)这样的网站来做这个评估，把链接里的 HTML 和 CSS 代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的 CSS 面板的话，把 CSS 代码放到 HTML 文档头部的`<style>`元素里就好。
+> [!NOTE]
+> 或者你也可以用[JSBin](https://jsbin.com/)或[Glitch](https://glitch.com/)这样的网站来做这个评估，把链接里的 HTML 和 CSS 代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的 CSS 面板的话，把 CSS 代码放到 HTML 文档头部的`<style>`元素里就好。
 
 ## 项目简介
 
diff --git a/files/zh-cn/learn/css/building_blocks/debugging_css/index.md b/files/zh-cn/learn/css/building_blocks/debugging_css/index.md
index 10d2a9f4ddc8bf..0f507fc9dce78b 100644
--- a/files/zh-cn/learn/css/building_blocks/debugging_css/index.md
+++ b/files/zh-cn/learn/css/building_blocks/debugging_css/index.md
@@ -81,7 +81,8 @@ slug: Learn/CSS/Building_blocks/Debugging_CSS
 
 ![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](inspecting3-font-size.png)
 
-> **备注：** 在 Rules view 里面还有其他有用的功能，例如带有无效值的声明会被划掉。你可以在[检查并编辑 CSS](/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS)里了解更多。
+> [!NOTE]
+> 在 Rules view 里面还有其他有用的功能，例如带有无效值的声明会被划掉。你可以在[检查并编辑 CSS](/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS)里了解更多。
 
 ## 理解盒模型
 
@@ -97,7 +98,8 @@ slug: Learn/CSS/Building_blocks/Debugging_CSS
 
 ![The Layout section of the DevTools](inspecting4-box-model.png)
 
-> **备注：** 在[仔细检查盒模型](/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model)里了解更多。
+> [!NOTE]
+> 在[仔细检查盒模型](/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model)里了解更多。
 
 ## 解决优先级问题
 
diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
index 79154c14698853..6b052da38a76db 100644
--- a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -27,7 +27,8 @@ slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 - 将 [HTML file for the exercise](https://github.com/mdn/learning-area/blob/main/css/introduction-to-css/fundamental-css-comprehension/index.html), 和 [associated image file](https://github.com/mdn/learning-area/blob/main/css/introduction-to-css/fundamental-css-comprehension/chris.jpg),拷贝到你的本地环境中。如果你想使用自己的图片文件以及把你的名字写进资料里面的话，也没有问题，不过需要保证你提供的图像是正方形的。
 - 下载 [CSS resources text file](https://github.com/mdn/learning-area/blob/main/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) 到你的本地环境，这个文件包含了一组原始选择器和规则集。你需要学习并将他们组合，这是测验的一部分。
 
-> **备注：** 另外，你可以使用一个网站比如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 [this URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) 来让 `<img>` 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入`<style>` 元素中。
+> [!NOTE]
+> 另外，你可以使用一个网站比如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 [this URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) 来让 `<img>` 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入`<style>` 元素中。
 
 ## 项目概要
 
@@ -61,7 +62,8 @@ slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 - 为页脚中的 `<p>` 编写一个规则集，使它的有效字体大小为 15px (使用 `em`表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
 - 最为最后一步，为 `<article>` 中的段落设置一个合适的 padding 值，让它和 `<h2>` 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。
 
-> **备注：** 记住第二条规则集会将 `font-size: 10px;` 设置在 `<html>` 元素上 — 这意味着 `<html>` 的任何后代中，一个 em 将会等于 10px 而不是默认的 16px。(这是当然的，如果在层次结构中，有不同的 `font-size` 设置于其上，问题中的后代没有任何的祖先位于 em 元素和 `<html>` 之间。这可能会影响你所需要的值，尽管在这个简单的示例中，这不是问题。)
+> [!NOTE]
+> 记住第二条规则集会将 `font-size: 10px;` 设置在 `<html>` 元素上 — 这意味着 `<html>` 的任何后代中，一个 em 将会等于 10px 而不是默认的 16px。(这是当然的，如果在层次结构中，有不同的 `font-size` 设置于其上，问题中的后代没有任何的祖先位于 em 元素和 `<html>` 之间。这可能会影响你所需要的值，尽管在这个简单的示例中，这不是问题。)
 
 其他事情要考虑：
 
diff --git a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md
index 0b6928dc18eddf..9d64436127e125 100644
--- a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md
@@ -103,7 +103,8 @@ HTML5 还包含了允许 Web 开发者指定必填区域的特性，甚至还能
 
 {{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}
 
-> **警告：** 你应该谨慎改变表单样式，确保用户仍然能轻松辨认表单元素。原则上，你可以创建一个没有边框和背景的，几乎无法与周围的内容区分开来的输入表单，但这会使辨认和填写变得非常困难。
+> [!WARNING]
+> 你应该谨慎改变表单样式，确保用户仍然能轻松辨认表单元素。原则上，你可以创建一个没有边框和背景的，几乎无法与周围的内容区分开来的输入表单，但这会使辨认和填写变得非常困难。
 
 正如在本教程的 HTML 部分的[样式化表单](/zh-CN/docs/Learn/HTML/Forms/Styling_HTML_forms)里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是留意到表单在不同的用户看来差异很大，并在许多浏览器上测试复杂的表单。
 
@@ -169,7 +170,8 @@ textarea {
 }
 ```
 
-> **备注：** 通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的 CSS 作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个[Normalize.css](http://necolas.github.io/normalize.css/)，它被许多项目用作基础，是非常流行的样式表。
+> [!NOTE]
+> 通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的 CSS 作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个[Normalize.css](http://necolas.github.io/normalize.css/)，它被许多项目用作基础，是非常流行的样式表。
 
 至于样式化表单的更加深入的信息，可以看下这些教程的 HTML 一节的这两篇文章：
 
diff --git a/files/zh-cn/learn/css/building_blocks/images_tasks/index.md b/files/zh-cn/learn/css/building_blocks/images_tasks/index.md
index 42220b7e229b0d..140d5f1f69ad2b 100644
--- a/files/zh-cn/learn/css/building_blocks/images_tasks/index.md
+++ b/files/zh-cn/learn/css/building_blocks/images_tasks/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/Building_blocks/Images_tasks
 
 该任务的目的是帮助你检查对我们在本课程[Images, Media and Form elements](/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements)(图像，媒体及表格元素）中了解的一些值和单位的理解。
 
-> **备注：** 你可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) 之类的在线工具来完成任务可能会更加有所帮助。
+> [!NOTE]
+> 你可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) 之类的在线工具来完成任务可能会更加有所帮助。
 >
 > 如果你遇到困难，联系我们获得帮助 — 参见页面底部的[评价以及更多帮助](#评价以及更多帮助)
 
@@ -21,7 +22,8 @@ slug: Learn/CSS/Building_blocks/Images_tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}
 
-> **备注：** 为了为了评估或进一步完成任务，请[下载此任务的起点](https://github.com/mdn/css-examples/blob/master/learn/tasks/images/object-fit-download.html)，以便在你自己的编辑器或在线编辑器中工作。
+> [!NOTE]
+> 为了为了评估或进一步完成任务，请[下载此任务的起点](https://github.com/mdn/css-examples/blob/master/learn/tasks/images/object-fit-download.html)，以便在你自己的编辑器或在线编辑器中工作。
 
 ## 任务二
 
@@ -38,7 +40,8 @@ slug: Learn/CSS/Building_blocks/Images_tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}
 
-> **备注：** 为了为了评估或进一步完成任务，请[下载此任务的起点](https://github.com/mdn/css-examples/blob/master/learn/tasks/images/form-download.html)，以便在你自己的编辑器或在线编辑器中工作。
+> [!NOTE]
+> 为了为了评估或进一步完成任务，请[下载此任务的起点](https://github.com/mdn/css-examples/blob/master/learn/tasks/images/form-download.html)，以便在你自己的编辑器或在线编辑器中工作。
 
 ## 评价以及更多帮助
 
diff --git a/files/zh-cn/learn/css/building_blocks/index.md b/files/zh-cn/learn/css/building_blocks/index.md
index 1c0846e0dfb40d..45c594103e7c9b 100644
--- a/files/zh-cn/learn/css/building_blocks/index.md
+++ b/files/zh-cn/learn/css/building_blocks/index.md
@@ -18,7 +18,8 @@ slug: Learn/CSS/Building_blocks
 3. HTML 基础知识（参见 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)模块）。
 4. CSS 基础知识（参见[学习 CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块）。
 
-> **备注：** 如果你此刻正使用一台电脑/笔记本/其他设备，而你无法创建自己的文件，那你可以在诸如 JSBin 或 Glitch 等网络编辑程序上尝试（多数）程序案例。
+> [!NOTE]
+> 如果你此刻正使用一台电脑/笔记本/其他设备，而你无法创建自己的文件，那你可以在诸如 JSBin 或 Glitch 等网络编辑程序上尝试（多数）程序案例。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/css/building_blocks/organizing/index.md b/files/zh-cn/learn/css/building_blocks/organizing/index.md
index 531aff18b9d8b7..d06d0f537db6c8 100644
--- a/files/zh-cn/learn/css/building_blocks/organizing/index.md
+++ b/files/zh-cn/learn/css/building_blocks/organizing/index.md
@@ -352,7 +352,8 @@ $base-color: #c6538c;
 
 在[这篇博文](https://www.lauraleeflores.com/blog/how-to-organize-your-css-files)里面，你可以看下一个开发者是如何处理这个问题的。
 
-> **备注：** 一个简单的尝试 Sass 的方式是使用 [CodePen](https://codepen.io)，你可以为一个 Pen 在设置中启用用于你的 CSS 的 Sass，CodePen 将会为你运行 Sass 语法分析功能，这样你就能看到应用了普通 CSS 的生成网页。有时你会发现 CSS 教程在它们的 CodePen 演示里面使用了 Sass 而不是普通 CSS，所以了解一点点关于 Sass 的事情是有用的。
+> [!NOTE]
+> 一个简单的尝试 Sass 的方式是使用 [CodePen](https://codepen.io)，你可以为一个 Pen 在设置中启用用于你的 CSS 的 Sass，CodePen 将会为你运行 Sass 语法分析功能，这样你就能看到应用了普通 CSS 的生成网页。有时你会发现 CSS 教程在它们的 CodePen 演示里面使用了 Sass 而不是普通 CSS，所以了解一点点关于 Sass 的事情是有用的。
 
 #### 后处理以进行优化
 
diff --git a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md
index 232751b1b7cbc4..ad338695f68434 100644
--- a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md
+++ b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md
@@ -80,7 +80,8 @@ slug: Learn/CSS/Building_blocks/Overflowing_content
 
 和 `scroll` 一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。
 
-> **备注：** 你可以用 `overflow` 属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对 `overflow-x `生效而第二个对 `overflow-y` 生效。否则，`overflow-x` 和 `overflow-y` 将会被设置成同样的值。例如，`overflow: scroll hidden` 会把 `overflow-x` 设置成 `scroll`，而 `overflow-y` 则为 `hidden`。
+> [!NOTE]
+> 你可以用 `overflow` 属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对 `overflow-x `生效而第二个对 `overflow-y` 生效。否则，`overflow-x` 和 `overflow-y` 将会被设置成同样的值。例如，`overflow: scroll hidden` 会把 `overflow-x` 设置成 `scroll`，而 `overflow-y` 则为 `hidden`。
 
 如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用 `overflow: auto`。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。
 
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.md
index 24bdcde04d73c2..882c8d0a396007 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -112,7 +112,8 @@ slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
 
-> **备注：**此外还有一个更加新的`s`值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为 HTML 时也没啥用。
+> [!NOTE]
+> 此外还有一个更加新的`s`值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为 HTML 时也没啥用。
 
 ## 接下来……
 
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index fdee3d32737c57..6511e82cafca1d 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -76,7 +76,8 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
 ::pseudo-element-name
 ```
 
-> **备注：** 一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
+> [!NOTE]
+> 一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
 
 例如，如果你想选中一段的第一行，你可以把它用一个`<span>`元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。
 
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.md b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.md
index b39d686804ab29..a6d810bd1e8b27 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.md
+++ b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
 
 这个任务的目的是帮助你理解 CSS 里的选择器。
 
-> **备注：** 你可以在下面的交互式编辑器中尝试解决问题，然而把代码下载然后使用一个在线工具比如 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/) 去解决这些问题可能对你更有作用。
+> [!NOTE]
+> 你可以在下面的交互式编辑器中尝试解决问题，然而把代码下载然后使用一个在线工具比如 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/) 去解决这些问题可能对你更有作用。
 >
 > 如果你卡住了，可以向我们寻求帮助——请参阅本页底部的[打分评估或进一步帮助](#打分评估或进一步帮助)部分。
 
@@ -25,7 +26,7 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > 如需提交测评或进一步练习，[下载本任务的初始文件](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/type-download.html)，然后在本地或在线编辑器中练习。
 
@@ -44,7 +45,7 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > 如需提交测评或进一步练习，[下载本任务的初始文件](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/class-id-download.html)，然后在本地或在线编辑器中练习。
 
@@ -62,7 +63,7 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > 如需提交测评或进一步练习，[下载本任务的初始文件](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/pseudo-download.html)，然后在本地或在线编辑器中练习。
 
@@ -79,7 +80,7 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > 如需提交测评或进一步练习，[下载本任务的初始文件](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/combinators-download.html)，然后在本地或在线编辑器中练习。
 
@@ -97,7 +98,7 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > 如需提交测评或进一步练习，[下载本任务的初始文件](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/attribute-links-download.html)，然后在本地或在线编辑器中练习。
 
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index 1364ace18ebae2..888e426623e593 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -98,7 +98,8 @@ ID 选择器开头为`#`而非句点，不过基本上和类选择器是同种
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
 
-> **备注：** 正如我们在和特定性相关的课里面学到的那样，ID 所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用 ID，会更好。不过要是 ID 是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。
+> [!NOTE]
+> 正如我们在和特定性相关的课里面学到的那样，ID 所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用 ID，会更好。不过要是 ID 是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。
 
 ## 下一篇
 
diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md
index ca67ad31aa7827..4fbebeb3fce415 100644
--- a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md
+++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md
@@ -95,7 +95,8 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 
 这个技术是用来让图片**可响应**的，所以在更小的设备上浏览的时候，它们会合适地缩放。你无论怎样都不应该用这个技术先载入大原始尺寸的图片，再对它们在浏览器中进行缩放。图像应该合适地调整尺寸，以使它们不会比预计中展示时所需要的最大尺寸大。下载过大的图像会造成你的网站变慢，如果用户使用按量收费的网络连接，会让用户花更多钱。
 
-> **备注：**了解更多关于[响应式图片技术](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)的事情。
+> [!NOTE]
+> 了解更多关于[响应式图片技术](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)的事情。
 
 ## 视口单位
 
diff --git a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.md b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.md
index 00cdd198af6f2e..716695bb9371a6 100644
--- a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.md
+++ b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/Building_blocks/Tables_tasks
 
 此任务的目的是为了帮助你检测在[样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)课程中学到的技巧的理解。
 
-> **备注：** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
+> [!NOTE]
+> You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
 >
 > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.
 
@@ -26,7 +27,8 @@ slug: Learn/CSS/Building_blocks/Tables_tasks
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.html", '100%', 1000)}}
 
-> **备注：** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/tables/table-download.html) to work in your own editor or in an online editor.
+> [!NOTE]
+> For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/tables/table-download.html) to work in your own editor or in an online editor.
 
 ## Assessment or further help
 
diff --git a/files/zh-cn/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md b/files/zh-cn/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
index c09d56b88d2f4c..ff9bee3c2cecde 100644
--- a/files/zh-cn/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
+++ b/files/zh-cn/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders
 
 本技能测试的目的是评估你是否完全理解了 [CSS 中的背景和边框](/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)教程的内容。
 
-> **备注：** 你可以在下面的互动编辑器中尝试解决方案。然而，下载代码并使用在线工具，如 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/) 来完成任务可能会有所帮助。
+> [!NOTE]
+> 你可以在下面的互动编辑器中尝试解决方案。然而，下载代码并使用在线工具，如 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/) 来完成任务可能会有所帮助。
 >
 > 如果你遇到了困难，那就向我们寻求帮助吧——见本页面底部的[评估或进一步帮助](#评估或进一步帮助)部分。
 
@@ -27,7 +28,7 @@ slug: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这项任务的初始代码](https://github.com/mdn/css-examples/blob/main/learn/tasks/backgrounds/backgrounds1-download.html)，在你自己的编辑器或在线编辑器中完成测试。
 
@@ -47,7 +48,7 @@ slug: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这项任务的初始代码](https://github.com/mdn/css-examples/blob/main/learn/tasks/backgrounds/backgrounds2-download.html)，在你自己的编辑器或在线编辑器中完成测试。
 
diff --git a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
index 1c8643981d503d..6cddf339a721f0 100644
--- a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
+++ b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
@@ -70,7 +70,8 @@ l10n:
 
 当你继续详细学习 CSS 布局时，将会遇到 [`flex`](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox) 以及盒子可以具有的其他各种内部值，例如 [`grid`](/zh-CN/docs/Learn/CSS/CSS_layout/Grids)。
 
-> **备注：** 想要了解更多有关显示值以及盒子在区块和行内布局中的工作原理，请参阅[常规流中的区块和行内布局](/zh-CN/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)。
+> [!NOTE]
+> 想要了解更多有关显示值以及盒子在区块和行内布局中的工作原理，请参阅[常规流中的区块和行内布局](/zh-CN/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)。
 
 ## 不同显示类型的例子
 
@@ -135,7 +136,8 @@ CSS 中组成一个区块盒子需要：
 
 ![显示使用标准盒模型时的盒子尺寸](standard-box-model.png)
 
-> **备注：** 外边距不计入盒子的实际大小——当然，它影响盒子在页面上所占的总空间，但只影响盒子外的空间。盒子的面积止于边框，不会延伸到外边距中。
+> [!NOTE]
+> 外边距不计入盒子的实际大小——当然，它影响盒子在页面上所占的总空间，但只影响盒子外的空间。盒子的面积止于边框，不会延伸到外边距中。
 
 ### CSS 替代盒模型
 
@@ -191,7 +193,8 @@ html {
 
 {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1100)}}
 
-> **备注：** 在[这里](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model)查看该任务的解答。
+> [!NOTE]
+> 在[这里](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model)查看该任务的解答。
 
 ### 使用浏览器开发者工具来查看盒模型
 
diff --git a/files/zh-cn/learn/css/building_blocks/values_and_units/index.md b/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
index acf1951fdbeafc..1ff1d9a88d4af1 100644
--- a/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
+++ b/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
@@ -37,9 +37,11 @@ CSS 中使用的每个属性都允许拥有一个或一组值，查看 MDN 上
 
 在 CSS 规范和 MDN 的属性页上，你将能够发现值的存在，因为它们将被尖括号包围，如 `<color>` 或 `<length>`。当你看到值 `<color>` 对特定属性有效时，这意味着你可以使用任何有效的颜色作为该属性的值，如 [`<color>`](/zh-CN/docs/Web/CSS/color_value) 参考页面所列。
 
-> **备注：** 你还将看到被称为数据类型的 CSS 值。这些术语基本上是可以互换的——当你在 CSS 中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。
+> [!NOTE]
+> 你还将看到被称为数据类型的 CSS 值。这些术语基本上是可以互换的——当你在 CSS 中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。
 
-> **备注：** 是的，CSS 值倾向于使用尖括号表示，以区别于 CSS 属性（例如 {{cssxref("color")}} 属性和 [\<color>](/zh-CN/docs/Web/CSS/color_value) 数据类型）。你可能还会混淆 CSS 数据类型和 HTML 元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。
+> [!NOTE]
+> 是的，CSS 值倾向于使用尖括号表示，以区别于 CSS 属性（例如 {{cssxref("color")}} 属性和 [\<color>](/zh-CN/docs/Web/CSS/color_value) 数据类型）。你可能还会混淆 CSS 数据类型和 HTML 元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。
 
 在下面的例子中，我们使用关键字设置标题的颜色，使用 `rgb()` 函数设置背景：
 
@@ -198,7 +200,8 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 600)}}
 
-> **备注：** 当你在 CSS 中使用数字作为值时，它不应该用引号括起来。
+> [!NOTE]
+> 当你在 CSS 中使用数字作为值时，它不应该用引号括起来。
 
 ## 颜色
 
@@ -206,7 +209,8 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 现代计算机的标准颜色系统是 24 位的，它允许通过不同的红、绿、蓝通道的组合显示大约 1670 万种不同的颜色，每个通道有 256 个不同的值（256 x 256 x 256 = 16,777,216）。让我们来看看在 CSS 中指定颜色的一些方法。
 
-> **备注：** 在本教程中，我们将研究具有良好浏览器支持的常用指定颜色的方法；虽然还有其他的，但是他们没有很好的支持，也不太常见。
+> [!NOTE]
+> 在本教程中，我们将研究具有良好浏览器支持的常用指定颜色的方法；虽然还有其他的，但是他们没有很好的支持，也不太常见。
 
 ### 颜色关键词
 
@@ -236,7 +240,8 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 你可以向 `rgb()` 传递第四个参数，它代表颜色的 alpha 通道，控制不透明度。如果你把这个值设置为 `0`，它将使颜色完全透明，而 `1` 将使它完全不透明。介于两者之间的值会给你带来不同级别的透明度。
 
-> **备注：** 在颜色上设置 alpha 通道与使用我们前面看到的 {{cssxref("opacity")}} 属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用 RGB 与 alpha 参数的颜色只让你指定的颜色不透明。
+> [!NOTE]
+> 在颜色上设置 alpha 通道与使用我们前面看到的 {{cssxref("opacity")}} 属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用 RGB 与 alpha 参数的颜色只让你指定的颜色不透明。
 
 在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当 alpha 通道值较小时，背景如何显示的。
 
@@ -244,7 +249,8 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 **在本例中，尝试更改 alpha 通道值，看看它如何影响颜色输出。**
 
-> **备注：** 在旧版本的 CSS 中，`rgb()` 语法不支持 alpha 参数——你需要使用另一个叫 `rgba()` 的函数来实现。如今，你可以向 `rgb()` 传递一个 alpha 参数，但为了向后兼容旧网站，`rgba()` 语法仍然被支持，并且具有与 `rgb()` 完全相同的行为。
+> [!NOTE]
+> 在旧版本的 CSS 中，`rgb()` 语法不支持 alpha 参数——你需要使用另一个叫 `rgba()` 的函数来实现。如今，你可以向 `rgb()` 传递一个 alpha 参数，但为了向后兼容旧网站，`rgba()` 语法仍然被支持，并且具有与 `rgb()` 完全相同的行为。
 
 ### HSL 和 HSLA 的值
 
@@ -262,7 +268,8 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 900)}}
 
-> **备注：** 在旧版本的 CSS 中，`hsl()` 语法不支持 alpha 参数——你需要使用一个叫做 `hsla()` 的不同函数来实现。现在你可以向 `hsl()` 传递一个 alpha 参数，但为了向后兼容老网站，`hsla()` 语法仍然被支持，并且具有与 `hsl()` 完全相同的行为。
+> [!NOTE]
+> 在旧版本的 CSS 中，`hsl()` 语法不支持 alpha 参数——你需要使用一个叫做 `hsla()` 的不同函数来实现。现在你可以向 `hsl()` 传递一个 alpha 参数，但为了向后兼容老网站，`hsla()` 语法仍然被支持，并且具有与 `hsl()` 完全相同的行为。
 
 你可以在项目中使用这些颜色值中的任何一个。对于大多数项目，你可能会选择一个调色板，然后在整个项目中使用这些颜色——以及你所选择的定义这些颜色的方法。你可以混合使用不同的颜色模型，但是为了一致性，通常最好是你的整个项目使用相同的一个！
 
diff --git a/files/zh-cn/learn/css/css_layout/flexbox/index.md b/files/zh-cn/learn/css/css_layout/flexbox/index.md
index 622c0b76de9a8a..9020e51256cf45 100644
--- a/files/zh-cn/learn/css/css_layout/flexbox/index.md
+++ b/files/zh-cn/learn/css/css_layout/flexbox/index.md
@@ -91,7 +91,8 @@ flex-direction: column;
 
 你会看到，这会将那些元素设置为列布局，就像我们添加这些 CSS 之前。在继续之前，请从示例中删除此规则。
 
-> **备注：** 你还可以使用 `row-reverse` 和 `column-reverse` 值反向排列 flex 项。用这些值试试看吧！
+> [!NOTE]
+> 你还可以使用 `row-reverse` 和 `column-reverse` 值反向排列 flex 项。用这些值试试看吧！
 
 ## 换行
 
diff --git a/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.md
index b848891e1e3ae7..0c7d5e6c5de4d3 100644
--- a/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.md
+++ b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.md
@@ -33,7 +33,8 @@ slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
 
 另外，你可以使用像 [Glitch](https://glitch.com/) 这样的网站来做评估，把 HTML 和 CSS 代码粘贴进去。注意，如果你使用在线编辑器，你将需要上传图片并替换 `src` 属性中的值，以指向新的图片位置。如果你使用的在线编辑器没有单独的 CSS 面板，可以随意将其放在文档头部的 `<style>` 元素中。
 
-> **备注：** 如果你卡住了，向我们请求协助——你可以在页面底部的[评估或更多帮助](#评估或更多帮助)获取指引。
+> [!NOTE]
+> 如果你卡住了，向我们请求协助——你可以在页面底部的[评估或更多帮助](#评估或更多帮助)获取指引。
 
 ## 项目简介
 
diff --git a/files/zh-cn/learn/css/css_layout/grid_skills/index.md b/files/zh-cn/learn/css/css_layout/grid_skills/index.md
index 7b76bbe963a405..4d71f5b0a55a86 100644
--- a/files/zh-cn/learn/css/css_layout/grid_skills/index.md
+++ b/files/zh-cn/learn/css/css_layout/grid_skills/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/CSS_layout/Grid_skills
 
 此任务的目的是让你使用 CSS 网格布局，并测试你是否了解网格和网格项的行为方式。你将会完成三个包括不同的元素小任务。
 
-> **备注：** 你可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具 (如 CodePen、jsFiddle 或 Glitch) 处理这些任务可能会更有帮助。
+> [!NOTE]
+> 你可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具 (如 CodePen、jsFiddle 或 Glitch) 处理这些任务可能会更有帮助。
 >
 > 如果你遇到困难，请向我们寻求帮助 — 参阅本页底部的 [评估或进一步帮助](#assessment_or_further_help) 部分。
 
@@ -21,7 +22,8 @@ slug: Learn/CSS/CSS_layout/Grid_skills
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}
 
-> **备注：** 评估或进一步的工作目的，可以[下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid1-download.html)在你自己的编辑器或使用线编辑器。
+> [!NOTE]
+> 评估或进一步的工作目的，可以[下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid1-download.html)在你自己的编辑器或使用线编辑器。
 
 ## 网格布局 二
 
@@ -37,7 +39,8 @@ slug: Learn/CSS/CSS_layout/Grid_skills
 
 - 你可以把第一个元素覆盖到第二个元素，而不通过改变 html 元素的顺序吗？
 
-> **备注：** 评估或进一步的工作目的，可以 [下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid2-download.html) 在你自己的编辑器或使用线编辑器。
+> [!NOTE]
+> 评估或进一步的工作目的，可以 [下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid2-download.html) 在你自己的编辑器或使用线编辑器。
 
 ## 网格布局 三
 
@@ -49,7 +52,8 @@ slug: Learn/CSS/CSS_layout/Grid_skills
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}
 
-> **备注：** 评估或进一步的工作目的，可以 [下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid3-download.html) 在你自己的编辑器或使用线编辑器。
+> [!NOTE]
+> 评估或进一步的工作目的，可以 [下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid3-download.html) 在你自己的编辑器或使用线编辑器。
 
 ## 网格布局 四
 
@@ -61,7 +65,8 @@ slug: Learn/CSS/CSS_layout/Grid_skills
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 1200)}}
 
-> **备注：** 评估或进一步的工作目的，可以 [下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid4-download.html) 在你自己的编辑器或使用线编辑器。
+> [!NOTE]
+> 评估或进一步的工作目的，可以 [下载此任务的源文件](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid4-download.html) 在你自己的编辑器或使用线编辑器。
 
 ## 评估 或者 帮助
 
diff --git a/files/zh-cn/learn/css/css_layout/grids/index.md b/files/zh-cn/learn/css/css_layout/grids/index.md
index bb855657a6c2d6..c701c1bd37a12c 100644
--- a/files/zh-cn/learn/css/css_layout/grids/index.md
+++ b/files/zh-cn/learn/css/css_layout/grids/index.md
@@ -36,7 +36,8 @@ CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以
 
 ![](grid.png)
 
-> **备注：** 任何有设计背景的人似乎都感到惊讶，CSS 没有内置的网格系统，而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，但是你可能需要知道在未来一段时间内创建网格的现有方法。
+> [!NOTE]
+> 任何有设计背景的人似乎都感到惊讶，CSS 没有内置的网格系统，而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，但是你可能需要知道在未来一段时间内创建网格的现有方法。
 
 ## 在 CSS 中创建自己的网格
 
@@ -503,7 +504,8 @@ aside {
 
 {{ EmbedLiveSample('基于线的元素放置', '100%', 400) }}
 
-> **备注：** 你也可以用 `-1` 来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于[隐式网格](/zh-CN/docs/Glossary/Grid)`-1`不一定能定位到最后一条分隔线。
+> [!NOTE]
+> 你也可以用 `-1` 来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于[隐式网格](/zh-CN/docs/Glossary/Grid)`-1`不一定能定位到最后一条分隔线。
 
 ## 使用 grid-template-areas 属性放置元素
 
diff --git a/files/zh-cn/learn/css/css_layout/index.md b/files/zh-cn/learn/css/css_layout/index.md
index 1311d88c6cbb93..c2086b9e62af9d 100644
--- a/files/zh-cn/learn/css/css_layout/index.md
+++ b/files/zh-cn/learn/css/css_layout/index.md
@@ -15,7 +15,8 @@ slug: Learn/CSS/CSS_layout
 2. 一定的 CSS 基础，在[Introduction to CSS](/zh-CN/docs/Learn/CSS/Introduction_to_CSS)部分讨论过的。
 3. 了解如何[样式化盒子模型](/zh-CN/docs/Learn/CSS/Building_blocks).
 
-> **备注：** 如果你在一台电脑/平板电脑/其他设备上工作，而你没有能力创建自己的文件，你可以尝试（大部分）在线编码程序中的代码示例，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 。
+> [!NOTE]
+> 如果你在一台电脑/平板电脑/其他设备上工作，而你没有能力创建自己的文件，你可以尝试（大部分）在线编码程序中的代码示例，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.md b/files/zh-cn/learn/css/css_layout/introduction/index.md
index 1d574d60d9e2f4..dc2b4e7b6cee80 100644
--- a/files/zh-cn/learn/css/css_layout/introduction/index.md
+++ b/files/zh-cn/learn/css/css_layout/introduction/index.md
@@ -68,7 +68,8 @@ CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们
 
 出现在另一个元素下面的元素被描述为**块**元素，与出现在另一个元素旁边的**内联元素**不同，内联元素就像段落中的单个单词一样。
 
-> **备注：** 块元素内容的布局方向被描述为**块方向**。块方向在英语等具有水平**书写模式**(`writing mode`) 的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的**内联方向**是内联内容（如句子）的运行方向。
+> [!NOTE]
+> 块元素内容的布局方向被描述为**块方向**。块方向在英语等具有水平**书写模式**(`writing mode`) 的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的**内联方向**是内联内容（如句子）的运行方向。
 
 当你使用 css 创建一个布局时，你正在离开**正常布局流**，但是对于页面上的多数元素，**正常布局流**将完全可以创建你所需要的布局。从一个结构良好的 Html 文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。
 
@@ -164,7 +165,8 @@ Flexbox 是 CSS 弹性盒子布局模块（[Flexible Box Layout](/zh-CN/docs/Web
 
 {{ EmbedLiveSample('设置 flex 属性', '300', '200') }}
 
-> **备注：** 为了找到更多关于 Flexbox 的信息，看看我们的 [Flexbox](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox) 的文章。
+> [!NOTE]
+> 为了找到更多关于 Flexbox 的信息，看看我们的 [Flexbox](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox) 的文章。
 
 ## Grid 布局
 
@@ -258,7 +260,8 @@ Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于
 
 {{ EmbedLiveSample('在网格内放置元素', '300', '330') }}
 
-> **备注：** 这两个例子只是展示了 grid 布局的冰山一角，要深入了解 grid 布局，请参阅我们的文章[Grid Layout](/zh-CN/docs/Learn/CSS/CSS_layout/Grids)。
+> [!NOTE]
+> 这两个例子只是展示了 grid 布局的冰山一角，要深入了解 grid 布局，请参阅我们的文章[Grid Layout](/zh-CN/docs/Learn/CSS/CSS_layout/Grids)。
 
 这篇指南的其余部分介绍了其他的布局方式，它们与你的页面的主要布局结构关系不大，但是却能够帮助你实现特殊的操作。同时，只要你理解了每一个布局任务的初衷，你就能够马上意识到哪一种布局更适合你的组件。
 
@@ -324,7 +327,8 @@ p {
 
 {{ EmbedLiveSample('浮动', '100%', 600) }}
 
-> **备注：** CSS 浮动的知识会在我们关于 [浮动](/zh-CN/docs/Learn/CSS/CSS_layout/Floats)的教程当中被详细地解释。除此之外，如果你想要了解在 Flexbox 和 Grid 布局出现之前我们是如何进行列布局的（仍然有可能碰到这种情形），请阅读我们关于[传统布局方式](/zh-CN/docs/Learn/CSS/CSS_layout/%E4%BC%A0%E7%BB%9F%E7%9A%84%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95)的文章。
+> [!NOTE]
+> CSS 浮动的知识会在我们关于 [浮动](/zh-CN/docs/Learn/CSS/CSS_layout/Floats)的教程当中被详细地解释。除此之外，如果你想要了解在 Flexbox 和 Grid 布局出现之前我们是如何进行列布局的（仍然有可能碰到这种情形），请阅读我们关于[传统布局方式](/zh-CN/docs/Learn/CSS/CSS_layout/%E4%BC%A0%E7%BB%9F%E7%9A%84%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95)的文章。
 
 ## 定位技术
 
@@ -629,7 +633,8 @@ body {
 
 {{ EmbedLiveSample('粘性定位', '100%', 200) }}
 
-> **备注：** 想要发现更多关于定位的信息，请参阅我们的[Positioning](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)和[Practical positioning examples](/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples)文章。
+> [!NOTE]
+> 想要发现更多关于定位的信息，请参阅我们的[Positioning](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)和[Practical positioning examples](/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples)文章。
 
 ## 表格布局
 
diff --git a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md
index 07099748142599..abf3a74e27ae8d 100644
--- a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md
@@ -123,7 +123,8 @@ div:nth-of-type(2) {
 
 你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个**流动布局（liquid layout），**能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。
 
-> **备注：** 你可以在 [0_two-column-layout.html](https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) 实时查看这个实例（另见[源代码](https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html)）。
+> [!NOTE]
+> 你可以在 [0_two-column-layout.html](https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) 实时查看这个实例（另见[源代码](https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html)）。
 
 ## 创建简单的传统网格框架
 
@@ -212,7 +213,8 @@ body {
 
 单个列的最上面一行现在铺开成为了一个排列整齐的网格。
 
-> **备注：** 我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。
+> [!NOTE]
+> 我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。
 
 如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨 2-12 列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。
 
@@ -259,7 +261,8 @@ body {
 
 创建了这些类以后，我们可以在网格上布局不同宽度的列。试试保存并在你的浏览器上加载这个页面，来查看效果。
 
-> **备注：** 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在 GitHub 上的[完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html)进行比较（再[看下实时的示例](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)）。
+> [!NOTE]
+> 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在 GitHub 上的[完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html)进行比较（再[看下实时的示例](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)）。
 
 试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样：
 
@@ -374,7 +377,8 @@ body {
 
 现在保存你的代码，从浏览器里加载它，尝试改变视口长度——你应该可以看到网格完美地适配了。
 
-> **备注：**如果你在让上面的示例实现的时候正遇到困难，试着把它和我们[GitHub 上的完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html)比较（另[见实时的示例](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)）。
+> [!NOTE]
+> 如果你在让上面的示例实现的时候正遇到困难，试着把它和我们[GitHub 上的完成版](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html)比较（另[见实时的示例](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)）。
 
 ### 使用 calc() 函数的更简单计算
 
@@ -426,9 +430,11 @@ body {
 }
 ```
 
-> **备注：** 你能在 [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html) 里看到我们的完成版（另[见实时版](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)）。
+> [!NOTE]
+> 你能在 [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html) 里看到我们的完成版（另[见实时版](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)）。
 
-> **备注：**如果你不能让这个正常工作，可能是你的浏览器不支持`calc()`函数，尽管各浏览器对它的支持相当好——远至 IE9 那样老。
+> [!NOTE]
+> 如果你不能让这个正常工作，可能是你的浏览器不支持`calc()`函数，尽管各浏览器对它的支持相当好——远至 IE9 那样老。
 
 ### 语义 vs.“无语义”网格系统
 
@@ -442,7 +448,8 @@ body {
 }
 ```
 
-> **备注：** 如果你要用预处理工具，如[Sass](http://sass-lang.com/)，你可以建立一个简单的类（mixin）以插入那个值。
+> [!NOTE]
+> 如果你要用预处理工具，如[Sass](http://sass-lang.com/)，你可以建立一个简单的类（mixin）以插入那个值。
 
 ### 在我们的网格里启用偏移容器
 
@@ -480,13 +487,15 @@ body {
 <div class="col span5 offset-by-one">14</div>
 ```
 
-> **备注：** 注意你需要别让横跨多列的列太多，给偏移留点空间！
+> [!NOTE]
+> 注意你需要别让横跨多列的列太多，给偏移留点空间！
 
 试着载入，刷新来查看区别，或者查看我们的[fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-offset.html)示例（另见[实时](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)示例）。完成的示例应该看起来像这样：
 
 ![](offset-grid-finished.png)
 
-> **备注：** 作为额外练习，你能实现一个 `offset-by-two` 类吗？
+> [!NOTE]
+> 作为额外练习，你能实现一个 `offset-by-two` 类吗？
 
 ### 浮动网格的限制
 
@@ -637,7 +646,8 @@ Skeleton 不仅包含了网格系统，它还包含了用于排版和其他能
 
 试着保存你的 HTML，在你的浏览器里面载入，看下效果。
 
-> **备注：** 如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的[html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html)文件进行比较（另见[实时运行版](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)）。
+> [!NOTE]
+> 如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的[html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html)文件进行比较（另见[实时运行版](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)）。
 
 如果你看下 skeleton.css 文件的内容，你能理解这是如何实现的。例如，Skeleton 有下面的定义内容，用于样式化加入了“three colomns”类的元素。
 
diff --git a/files/zh-cn/learn/css/css_layout/media_queries/index.md b/files/zh-cn/learn/css/css_layout/media_queries/index.md
index 4ce37dea9bea0b..1123d4bcaa7189 100644
--- a/files/zh-cn/learn/css/css_layout/media_queries/index.md
+++ b/files/zh-cn/learn/css/css_layout/media_queries/index.md
@@ -64,11 +64,14 @@ slug: Learn/CSS/CSS_layout/Media_queries
 }
 ```
 
-> **备注：**这里的媒体类型是和所谓的{{glossary("MIME type")}}不同的东西。
+> [!NOTE]
+> 这里的媒体类型是和所谓的{{glossary("MIME type")}}不同的东西。
 
-> **备注：** 在第三级媒体查询规范中，定义了其他一些媒体类型，它们已经不被建议使用，而且应该被避免使用。
+> [!NOTE]
+> 在第三级媒体查询规范中，定义了其他一些媒体类型，它们已经不被建议使用，而且应该被避免使用。
 
-> **备注：**媒体类型是可选的，如果你没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型。
+> [!NOTE]
+> 媒体类型是可选的，如果你没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型。
 
 ### 媒体特征规则
 
diff --git a/files/zh-cn/learn/css/css_layout/position_skills/index.md b/files/zh-cn/learn/css/css_layout/position_skills/index.md
index 99a9b1dc7adb06..c503193a24de57 100644
--- a/files/zh-cn/learn/css/css_layout/position_skills/index.md
+++ b/files/zh-cn/learn/css/css_layout/position_skills/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/CSS_layout/Position_skills
 
 此任务的目的是让你使用在我们的 position 课程中介绍的 CSS {{CSSxRef("position")}}属性以及对应值，你将通过两个小任务来复习刚才课程材料中介绍的不同元素。
 
-> **备注：** 你可以在下面的交互式编辑器中尝试解决方案，下载代码并使用在线工具（如 CodePen、jsFiddle 或 Glitch）处理任务可能会有帮助。
+> [!NOTE]
+> 你可以在下面的交互式编辑器中尝试解决方案，下载代码并使用在线工具（如 CodePen、jsFiddle 或 Glitch）处理任务可能会有帮助。
 >
 > 如果你遇到困难，请向我们寻求帮助 - 请参阅本页底部的 [Assessment or further help](#assessment_or_further_help) 部分
 
@@ -23,7 +24,8 @@ slug: Learn/CSS/CSS_layout/Position_skills
 
 作为一个额外的挑战，你能改变目标元素显示在文本下面吗？
 
-> **备注：** 为了评估和进一步编辑，[下载源代码](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html)在本地编辑器或在线编辑器中编辑
+> [!NOTE]
+> 为了评估和进一步编辑，[下载源代码](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html)在本地编辑器或在线编辑器中编辑
 
 ## 定位练习二
 
@@ -35,7 +37,8 @@ slug: Learn/CSS/CSS_layout/Position_skills
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}
 
-> **备注：** 为了评估和进一步编辑，[下载源代码](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position2-download.html)在本地编辑器或在线编辑器中编辑
+> [!NOTE]
+> 为了评估和进一步编辑，[下载源代码](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position2-download.html)在本地编辑器或在线编辑器中编辑
 
 ## Assessment or further help
 
diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.md b/files/zh-cn/learn/css/css_layout/positioning/index.md
index 680625b2c8c9dc..429d1d6d8a38fb 100644
--- a/files/zh-cn/learn/css/css_layout/positioning/index.md
+++ b/files/zh-cn/learn/css/css_layout/positioning/index.md
@@ -123,7 +123,8 @@ span {
 
 如果现在保存和刷新，除了第 2 段的更新的背景颜色，根本没有差别。这很好——正如我们之前所说，静态定位是默认行为！
 
-> **备注：** 你可以在 [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/1_static-positioning.html))。
+> [!NOTE]
+> 你可以在 [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/1_static-positioning.html))。
 
 ### 相对定位
 
@@ -144,7 +145,8 @@ top: 30px;
 left: 30px;
 ```
 
-> **备注：** 这些属性的值可以采用逻辑上期望的任何单位——px、mm、rem、% 等。
+> [!NOTE]
+> 这些属性的值可以采用逻辑上期望的任何单位——px、mm、rem、% 等。
 
 如果你现在保存和刷新，你会得到一个这样的结果：
 
@@ -207,7 +209,8 @@ span {
 
 酷，是吗？好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。所以例如，如果你指定 `top: 30px;`一个力推动框的顶部，使它向下移动 30px。
 
-> **备注：** 你可以在 [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/2_relative-positioning.html))。
+> [!NOTE]
+> 你可以在 [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/2_relative-positioning.html))。
 
 ### 绝对定位
 
@@ -280,11 +283,14 @@ span {
 
 第二，注意元素的位置已经改变——这是因为{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}以不同的方式在绝对定位。它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部 30px，从左边 30px。
 
-> **备注：** 如果需要，你可以使用 {{cssxref("top")}}，{{cssxref("bottom")}}、{{cssxref("left")}} 和 {{cssxref("right")}} 调整元素大小。尝试设置 `top: 0; bottom: 0; left: 0; right: 0;` 和 `margin: 0;` 对你定位的元素，看看会发生什么！之后再回来
+> [!NOTE]
+> 如果需要，你可以使用 {{cssxref("top")}}，{{cssxref("bottom")}}、{{cssxref("left")}} 和 {{cssxref("right")}} 调整元素大小。尝试设置 `top: 0; bottom: 0; left: 0; right: 0;` 和 `margin: 0;` 对你定位的元素，看看会发生什么！之后再回来
 
-> **备注：** 是的，margins 仍会影响定位的元素。然而 margin collapsing 不会。
+> [!NOTE]
+> 是的，margins 仍会影响定位的元素。然而 margin collapsing 不会。
 
-> **备注：** 你可以在[`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/3_absolute-positioning.html))。
+> [!NOTE]
+> 你可以在[`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/3_absolute-positioning.html))。
 
 ### 定位上下文
 
@@ -359,7 +365,8 @@ span {
 
 定位的元素现在相对于{{htmlelement("body")}}元素。
 
-> **备注：** 你可以在这里看到这个例子 [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/4_positioning-context.html)).
+> [!NOTE]
+> 你可以在这里看到这个例子 [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/4_positioning-context.html)).
 
 ### 介绍 z-index
 
@@ -457,7 +464,8 @@ p:nth-of-type(1) {
 
 请注意，z-index 只接受无单位索引值；你不能指定你想要一个元素是 Z 轴上 23 像素——它不这样工作。较高的值将高于较低的值，这取决于你使用的值。使用 2 和 3 将产生与 300 和 40000 相同的效果。
 
-> **备注：** 你可以在这里看到这个例子 [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/5_z-index.html)).
+> [!NOTE]
+> 你可以在这里看到这个例子 [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/5_z-index.html)).
 
 ### 固定定位
 
@@ -560,7 +568,8 @@ p:nth-of-type(1) {
 
 {{ EmbedLiveSample('固定定位', '100%', 400) }}
 
-> **备注：** 你可以在这里看到这个例子[`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/6_fixed-positioning.html)).
+> [!NOTE]
+> 你可以在这里看到这个例子[`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/6_fixed-positioning.html)).
 
 ### position: sticky
 
@@ -725,7 +734,8 @@ body {
 
 {{ EmbedLiveSample('滚动索引', '100%', 200) }}
 
-> **备注：** 你可以在 [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html))。
+> [!NOTE]
+> 你可以在 [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) 查看这个例子 ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html))。
 
 ## 技能测试！
 
diff --git a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md
index ead250df831a6b..55a80d9230c9ce 100644
--- a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md
@@ -35,11 +35,13 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples
 
 ![](tabbed-info-box.png)
 
-> **备注：** 你能看完整的示例，可运行在 [info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html))。检出它以理解你在本文章里要建立什么。
+> [!NOTE]
+> 你能看完整的示例，可运行在 [info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html))。检出它以理解你在本文章里要建立什么。
 
 你可能会想：”为什么不仅仅做独立的选项卡为一个独立的网页，然后通过点击不同的标签来在不同的页面跳转来达到这个效果？“这样代码可能会简单一些，是的。但是这样每个独立的”页面“视图将会实际上是一个新加载的网页，跨视图更难保存信息，并把这个特征融入一个更大的 UI 设计。另外，所谓的”单页应用“正在变得非常流行——尤其是移动网页 UI——因为把一切的服务放在一个单独的文件上可以减少 HTTP 请求的数量来浏览所有内容，从而提高性能。
 
-> **备注：** 一些网络开发者甚至更超前，每次只加载一页的信息，并且使用 JavaScript 诸如 [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest)特征动态改变信息显示。但是，在你此时的学习中，我们希望尽可能保持简单。接下来会有一些 JavaScript，但是只有一点。
+> [!NOTE]
+> 一些网络开发者甚至更超前，每次只加载一页的信息，并且使用 JavaScript 诸如 [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest)特征动态改变信息显示。但是，在你此时的学习中，我们希望尽可能保持简单。接下来会有一些 JavaScript，但是只有一点。
 
 在开始之前，我们需要你拷贝文件到本地，当作起始的 HTML 文件——[info-box-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box-start.html)。保存到你的计算机合适的位置，然后在你的编辑器里打开。让我们看看包含在 body 里的 HTML 代码：
 
@@ -138,7 +140,8 @@ body {
 }
 ```
 
-> **备注：** 我们正在使用后代选择器，整个例子 `.info-box` 都位于链的开始——这样页面已经带有其他内容时，我们可以插入这个特征，不害怕与应用于页面其他部分的样式冲突。
+> [!NOTE]
+> 我们正在使用后代选择器，整个例子 `.info-box` 都位于链的开始——这样页面已经带有其他内容时，我们可以插入这个特征，不害怕与应用于页面其他部分的样式冲突。
 
 接下来，我们将样式化水平选项卡——列表项都要左浮动确保他们一行合起来，他们的{{cssxref("list-style-type")}}被设置为 `none` 用以去除项目符号，宽度（{{cssxref("width")}}）设置为 `150px` 以便于适应这个 info-box。链接（ {{htmlelement("a")}} ）元素设置为{{cssxref("display")}} inline-block，这样他们将在一行显示，仍然保持样式可设置，他们会被样式化合适的选项卡按钮，通过一系列的其他属性。
 
@@ -264,7 +267,8 @@ function setTabHandler(tab, tabPos) {
 
 ![](fixed-info-box.png)
 
-> **备注：** 你可以点击[蓝字](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html)预览完成后的效果，看看哪些部分是你在这篇文章里你要制作的。
+> [!NOTE]
+> 你可以点击[蓝字](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html)预览完成后的效果，看看哪些部分是你在这篇文章里你要制作的。
 
 在开始的时候，你可以使用第一部分中完成的例子，或者从我们的 Github 仓库中拷贝 [info-box.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html) 到本地。
 
@@ -302,7 +306,8 @@ function setTabHandler(tab, tabPos) {
 </section>
 ```
 
-> **备注：** 你可以随意更改假的内容，替换为你想要的真的内容。
+> [!NOTE]
+> 你可以随意更改假的内容，替换为你想要的真的内容。
 
 ### 更改存在的 CSS
 
@@ -345,7 +350,8 @@ function setTabHandler(tab, tabPos) {
 
 ![](hidden-sliding-panel.png)
 
-> **备注：** 你可以点击[蓝字](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html)预览完成后的效果，仔细看看哪些部分是你在这篇文章里你要制作的。
+> [!NOTE]
+> 你可以点击[蓝字](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html)预览完成后的效果，仔细看看哪些部分是你在这篇文章里你要制作的。
 
 在一开始，老规矩在我们的 GitHub 代码仓库拷贝 [hideen-info-panel-start.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html)（[源码](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/hidden-info-panel.html)）。这个例子并没有用先前的例子，所以我们需要一个新的开始文件。让我们来仔细观察一下这个 HTML 文件：
 
@@ -361,7 +367,8 @@ function setTabHandler(tab, tabPos) {
 
 开始，我们看到了一个 {{htmlelement("label")}} 元素和 {{htmlelement("input")}} 元素——`<label>`元素普遍用来联系文字标签和表单，目的是能更好的理解表单（允许屏幕阅读器用户查看表单元素的描述）。这里通过`for`属性绑定`id`到了`<input>`标签的 checkbox 元素。
 
-> **备注：** 我们已经设置了一个特殊的问题标记特性到我们的 HTML 中，来当作我们的信息图标——这代表着这个按钮将可以按下显示或隐藏面板。
+> [!NOTE]
+> 我们已经设置了一个特殊的问题标记特性到我们的 HTML 中，来当作我们的信息图标——这代表着这个按钮将可以按下显示或隐藏面板。
 
 现在我们将这些元素用于稍微不同的目的——另一个 `<label>` 标签有用的副作用使你能通过点击 checkbox 的 label 标签来选择这个 checkbox，就好像点击了这个 checkbox 自己一样。这就会实现有名的 [checkbox hack](https://css-tricks.com/the-checkbox-hack/) 技术，可以提供无 JavaScript 的方法来通过按钮来控制一个元素。我们将通过其他两个元素控制 {{htmlelement("aside")}} 元素。（为了简洁起见，我们已将其内容从上述代码列表中删除）。
 
diff --git a/files/zh-cn/learn/css/css_layout/responsive_design/index.md b/files/zh-cn/learn/css/css_layout/responsive_design/index.md
index 054ac553e52f07..e12158196fada4 100644
--- a/files/zh-cn/learn/css/css_layout/responsive_design/index.md
+++ b/files/zh-cn/learn/css/css_layout/responsive_design/index.md
@@ -40,15 +40,18 @@ slug: Learn/CSS/CSS_layout/Responsive_Design
 
 ![A layout with two columns squashed into a mobile size viewport.](mdn-rwd-liquid.png)
 
-> **备注：** 看一下这个简单的流式布局：[示例](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html)。当查看示例时，来回拖拽你的浏览器窗口，改变其大小，看下不同尺寸下的显示情况。
+> [!NOTE]
+> 看一下这个简单的流式布局：[示例](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html)。当查看示例时，来回拖拽你的浏览器窗口，改变其大小，看下不同尺寸下的显示情况。
 
 固定宽度站点的一个可能的后果是，在比站点更窄的屏幕上会出现一个水平滚动条（如下所示），在大屏幕上的设计边缘还会有许多空白。
 
 ![A layout with a horizontal scrollbar in a mobile viewport.](mdn-rwd-fixed.png)
 
-> **备注：** 看下这个简单的固定宽度布局：[示例](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html)，重新观察一下你调整浏览器窗口大小后的结果。
+> [!NOTE]
+> 看下这个简单的固定宽度布局：[示例](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html)，重新观察一下你调整浏览器窗口大小后的结果。
 
-> **备注：** 上面的截屏是在火狐开发者工具的[响应式设计模式](/zh-CN/docs/Tools/Responsive_Design_Mode)中截取的。
+> [!NOTE]
+> 上面的截屏是在火狐开发者工具的[响应式设计模式](/zh-CN/docs/Tools/Responsive_Design_Mode)中截取的。
 
 随着移动 Web 在早期的功能手机上开始成为现实，希望拥抱移动端的公司普遍希望为他们的网站创建一个有着不同的网址的移动版本（大多是像*m.example.com*或者*example.mobi*这类）。这意味着一个网站需要开发两个分开的版本，而且要保持时效性。
 
@@ -122,7 +125,8 @@ target / context = result
 
 ![A desktop view of a layout with two columns.](mdn-rwd-desktop.png)
 
-> **备注：** 你可以在 GitHub 上找到此示例的[实时示例](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html)和[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html)。
+> [!NOTE]
+> 你可以在 GitHub 上找到此示例的[实时示例](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html)和[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html)。
 
 ## 现代布局技术
 
@@ -162,7 +166,8 @@ target / context = result
 }
 ```
 
-> **备注：** 作为一个示例，我们已经重构了上面的简单响应式布局，这次我们用了伸缩盒。你可以看看我们是怎么样才不再需要使用奇怪的百分数值来计算列的尺寸的：[示例](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html)、[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html)。
+> [!NOTE]
+> 作为一个示例，我们已经重构了上面的简单响应式布局，这次我们用了伸缩盒。你可以看看我们是怎么样才不再需要使用奇怪的百分数值来计算列的尺寸的：[示例](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html)、[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html)。
 
 ### CSS 网格
 
@@ -175,7 +180,8 @@ target / context = result
 }
 ```
 
-> **备注：** 网格布局版本的代码要更简单，因为我们可以在.wrapper 上定义列[：示例](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html)。
+> [!NOTE]
+> 网格布局版本的代码要更简单，因为我们可以在.wrapper 上定义列[：示例](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html)。
 
 ## 响应式图像
 
@@ -227,7 +233,8 @@ h1 {
 
 ![A two column layout with a large heading.](mdn-rwd-font-desktop.png)
 
-> **备注：** 查看这个编排好的示例：[示例](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html)。
+> [!NOTE]
+> 查看这个编排好的示例：[示例](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html)。
 
 正如这种排版方式展示的这样，你不需要让媒介查询只能改变页面的布局。它们也能用来调节每个元素，让它们在别的大小的屏幕上更加可用或者更具吸引力。
 
@@ -253,7 +260,8 @@ h1 {
 
 这就是说，我们只需要指定标题的字体大小一次，而不是为移动端设定它，然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。
 
-> **备注：** 查看这种情况的一个编排好的示例： [示例](https://mdn.github.io/css-examples/learn/rwd/type-vw.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html)。
+> [!NOTE]
+> 查看这种情况的一个编排好的示例： [示例](https://mdn.github.io/css-examples/learn/rwd/type-vw.html)，[源代码](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html)。
 
 ## 视口元标签
 
diff --git a/files/zh-cn/learn/css/first_steps/getting_started/index.md b/files/zh-cn/learn/css/first_steps/getting_started/index.md
index 4e1a832189e5b0..8a030e3560f419 100644
--- a/files/zh-cn/learn/css/first_steps/getting_started/index.md
+++ b/files/zh-cn/learn/css/first_steps/getting_started/index.md
@@ -53,7 +53,8 @@ slug: Learn/CSS/First_steps/Getting_started
 </html>
 ```
 
-> **备注：** 假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。</strong></p></div>
+> [!NOTE]
+> 假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。</strong></p></div>
 
 ## 添加 CSS 试试看？
 
@@ -196,7 +197,8 @@ h1 + p {
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
-> **备注：** 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的[选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)章节中介绍。
+> [!NOTE]
+> 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的[选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)章节中介绍。
 
 ## 根据状态确定样式
 
@@ -226,7 +228,8 @@ a:hover {
 
 我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留 link 状态下的下划线。— 这是下划线的本来作用。不管你用 CSS 来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。
 
-> **备注：** 在本教程以及整个 MDN 站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当让每一个访客都能够理解、使用。
+> [!NOTE]
+> 在本教程以及整个 MDN 站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当让每一个访客都能够理解、使用。
 >
 > 你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。
 >
diff --git a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.md b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.md
index 4fa1ea71876c9d..02ca3c4e808457 100644
--- a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.md
@@ -200,7 +200,8 @@ h1, h2, .intro
 
 尝试创建一些使用上述选择器的 CSS 规则，并创建一些 HTML 样式。如果你不熟悉上面的一些语法，请尝试在 MDN 上搜索它！
 
-> **备注：** 在下一个模块 [CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)中，你将学习到更多关于选择器的知识。
+> [!NOTE]
+> 在下一个模块 [CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)中，你将学习到更多关于选择器的知识。
 
 ### 优先级
 
@@ -273,9 +274,11 @@ CSS 属性和值是不区分大小写的。一个属性——值对中的属性
 - **{{cssxref("color")}}**
 - **{{cssxref("border")}}**
 
-> **警告：** 如果属性未知或某个值对给定属性无效，则声明被视为*无效*，并被浏览器的 CSS 引擎完全忽略。
+> [!WARNING]
+> 如果属性未知或某个值对给定属性无效，则声明被视为*无效*，并被浏览器的 CSS 引擎完全忽略。
 
-> **警告：** 在 CSS（和其他 web 标准）中，当语言表达存在不确定性时，美式拼写被视作公认的标准。例如，“颜色”应该始终拼写为 `color`，`colour` 是不起作用的。
+> [!WARNING]
+> 在 CSS（和其他 web 标准）中，当语言表达存在不确定性时，美式拼写被视作公认的标准。例如，“颜色”应该始终拼写为 `color`，`colour` 是不起作用的。
 
 ### 函数
 
@@ -407,7 +410,8 @@ background-attachment: fixed;
 
 **尝试将上述声明添加到 CSS 中，看看它如何影响 HTML 的样式。试着尝试一些不同的属性值。**
 
-> **警告：** 使用 CSS 简写属性的一个不太明显的方面是省略的值如何重置。一个没有在 CSS 简写属性中指定的值会恢复到它的初始值。这意味着 CSS 简写属性中的省略可以**覆盖之前设置的值**。
+> [!WARNING]
+> 使用 CSS 简写属性的一个不太明显的方面是省略的值如何重置。一个没有在 CSS 简写属性中指定的值会恢复到它的初始值。这意味着 CSS 简写属性中的省略可以**覆盖之前设置的值**。
 
 ## 注释
 
@@ -529,7 +533,8 @@ div p + p {padding-top: 0;}
 
 对于你自己的项目，你将根据个人的喜好来安排你的代码格式。对于团队项目，你可能会发现，一个团队或项目有自己的风格指南。
 
-> **警告：** CSS 声明通过空白字符分离不同的值，**属性名称不应该含有空白字符**。
+> [!WARNING]
+> CSS 声明通过空白字符分离不同的值，**属性名称不应该含有空白字符**。
 
 例如，这些声明是有效的 CSS：
 
diff --git a/files/zh-cn/learn/css/first_steps/index.md b/files/zh-cn/learn/css/first_steps/index.md
index 8c1468f8fe1ff0..afd07a6aa6424c 100644
--- a/files/zh-cn/learn/css/first_steps/index.md
+++ b/files/zh-cn/learn/css/first_steps/index.md
@@ -15,7 +15,8 @@ CSS（层叠样式表）用于设置和布置网页——例如，更改内容
 2. 基本工作环境的设置详见[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)，并了解如何创建和管理文件，详见[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)。
 3. 熟悉 [HTML 概述](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) 章节中提到的基本 HTML 知识。
 
-> **备注：** 如果你在一个无权创建自己文件的电脑/平板/其他设备上工作，你可以在在线编程工具上尝试（大部分）代码示例，如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 等。
+> [!NOTE]
+> 如果你在一个无权创建自己文件的电脑/平板/其他设备上工作，你可以在在线编程工具上尝试（大部分）代码示例，如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 等。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md
index f2be55585bac50..dd9cb9e2ca2796 100644
--- a/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md
@@ -37,7 +37,8 @@ slug: Learn/CSS/First_steps/Styling_a_biography_page
 
 你可以使用下面的实时编辑器，或者下载这个[download the starting point](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/)在自己的编辑器中进行编辑。这是一个独立的 HTML 文件，在 head 中包含了初始 CSS 样式。你可以将这些 CSS 样式从 HTML 文件中移出，保存为另一个独立文件。你可以选择 CodePen、jsFiddle 或 Glitch 中的任意一个完成这些工作。
 
-> **备注：** 如果遇到困难，你可以向我求助——参见本页下面的[测评或请求帮助](#测评或请求帮助)部分。
+> [!NOTE]
+> 如果遇到困难，你可以向我求助——参见本页下面的[测评或请求帮助](#测评或请求帮助)部分。
 
 ### 让我们来学一些 CSS 样式
 
diff --git a/files/zh-cn/learn/css/first_steps/what_is_css/index.md b/files/zh-cn/learn/css/first_steps/what_is_css/index.md
index 9f8190e5824404..5843726d77b28e 100644
--- a/files/zh-cn/learn/css/first_steps/what_is_css/index.md
+++ b/files/zh-cn/learn/css/first_steps/what_is_css/index.md
@@ -45,7 +45,8 @@ slug: Learn/CSS/First_steps/What_is_CSS
 
 **展示**一份文档给用户实际上是将文档变成用户可用的文件。{{Glossary("browser","浏览器")}}：如 {{Glossary("Mozilla Firefox","Firefox")}}、{{Glossary("Google Chrome","Chrome")}} 或 {{Glossary("Microsoft Edge","Edge")}}，都可以将文档在电脑屏幕、投影仪或打印机等设备上进行可视化。
 
-> **备注：** 浏览器有时候也被称为 {{Glossary("User agent","user agent")}}，大致可以当这个程序是一个存在于计算机系统中的人。当我们讨论 CSS 时，浏览器是 User agent 的主要形式，然而它并不是唯一的一个。还有其他可用的 user agents — 像是那些可以把 HTML 和 CSS 文档转换为可以打印的 PDF 文档的软件。
+> [!NOTE]
+> 浏览器有时候也被称为 {{Glossary("User agent","user agent")}}，大致可以当这个程序是一个存在于计算机系统中的人。当我们讨论 CSS 时，浏览器是 User agent 的主要形式，然而它并不是唯一的一个。还有其他可用的 user agents — 像是那些可以把 HTML 和 CSS 文档转换为可以打印的 PDF 文档的软件。
 
 CSS 可以用于给文档添加样式——比如改变标题和链接的[颜色](/zh-CN/docs/Web/CSS/color_value)及[大小](/zh-CN/docs/Web/CSS/font-size)。它也可用于创建布局——比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的[布局](/zh-CN/docs/Web/CSS/Layout_cookbook/Column_layouts)。它甚至还可以用来做一些特效，比如[动画](/zh-CN/docs/Web/CSS/CSS_animations)。查看本段内容中所给出的特定案例。
 
@@ -83,7 +84,8 @@ p {
 
 你会发现你已经很快掌握了一些属性的值，但是属性可以接受的值远不止这些。在 MDN 上每个属性都有单独的页面，不论你是忘记了某个属性，还是想要知道一个属性还能接受什么其他的值，这些页面都可以帮助你。
 
-> **备注：** 在 MDN 上的 [CSS 参考](/zh-CN/docs/Web/CSS/Reference)页面列举了所有的 CSS 属性页面（同时也包括其他的 CSS 特性）。另外，当你想要寻找一个 CSS 特性的更多内容时，多使用你的搜索引擎来搜索“mdn _css-feature-name_”。例如，搜索“mdn color”和“mdn font-size”！
+> [!NOTE]
+> 在 MDN 上的 [CSS 参考](/zh-CN/docs/Web/CSS/Reference)页面列举了所有的 CSS 属性页面（同时也包括其他的 CSS 特性）。另外，当你想要寻找一个 CSS 特性的更多内容时，多使用你的搜索引擎来搜索“mdn _css-feature-name_”。例如，搜索“mdn color”和“mdn font-size”！
 
 ## CSS 模块
 
diff --git a/files/zh-cn/learn/css/howto/css_faq/index.md b/files/zh-cn/learn/css/howto/css_faq/index.md
index 86579c388400ea..41b2594da2f741 100644
--- a/files/zh-cn/learn/css/howto/css_faq/index.md
+++ b/files/zh-cn/learn/css/howto/css_faq/index.md
@@ -62,7 +62,8 @@ HTML 元素可以拥有一个 `id` 和（或）`class` 属性。`id` 属性为
 - 类名可以让你同时为多个元素赋予样式，减少样式表的大小，避免了为每一个 id 选择器撰写同样的样式信息。越小的样式表带来的性能体验也就越好。
 - 类名选择器比 id 选择器的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)更低，所以可以很方便地覆盖它们。
 
-> **备注：** 参见 [CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)，以了解详情。
+> [!NOTE]
+> 参见 [CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)，以了解详情。
 
 ## 我如何还原属性的默认值？
 
@@ -263,9 +264,11 @@ div {
 text-stroke: 4px navy;
 ```
 
-> **备注：** 为更深层次了解处理前缀属性，请参阅[跨浏览器测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)模块的[处理常见的 HTML 和 CSS 问题——处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#处理_css_前缀)。
+> [!NOTE]
+> 为更深层次了解处理前缀属性，请参阅[跨浏览器测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)模块的[处理常见的 HTML 和 CSS 问题——处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#处理_css_前缀)。
 
-> **备注：** 请参阅 [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)和 [WebKit CSS 扩展](/zh-CN/docs/Web/CSS/WebKit_Extensions)，以了解浏览器前缀 CSS 属性的列表。
+> [!NOTE]
+> 请参阅 [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)和 [WebKit CSS 扩展](/zh-CN/docs/Web/CSS/WebKit_Extensions)，以了解浏览器前缀 CSS 属性的列表。
 
 ## z-index 属性与定位有什么关系？
 
@@ -273,4 +276,5 @@ z-index 属性指定了元素的栈序。
 
 具有较高 z-index/栈序的元素总是渲染于具有较低 z-index/栈序的元素之前。z-index 只会在有着指定 position（`position:absolute`、`position:relative` 或 `position:fixed`）的元素上工作。
 
-> **备注：** 请参阅[定位](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)文章，特别是[介绍 z-index](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。
+> [!NOTE]
+> 请参阅[定位](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)文章，特别是[介绍 z-index](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。
diff --git a/files/zh-cn/learn/css/howto/generated_content/index.md b/files/zh-cn/learn/css/howto/generated_content/index.md
index d849c67f60b2d8..134572654f4d21 100644
--- a/files/zh-cn/learn/css/howto/generated_content/index.md
+++ b/files/zh-cn/learn/css/howto/generated_content/index.md
@@ -9,7 +9,8 @@ slug: Learn/CSS/Howto/Generated_content
 
 CSS 的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。当内容与文档结构紧密相关的时候，你可以在样式表中定义文本和图片内容。
 
-> **备注：** 样式表中指定的内容不会成为 DOM 的一部分。
+> [!NOTE]
+> 样式表中指定的内容不会成为 DOM 的一部分。
 
 在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。
 
diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.md b/files/zh-cn/learn/css/styling_text/fundamentals/index.md
index aa57a65fd0bc35..335c4b016e6511 100644
--- a/files/zh-cn/learn/css/styling_text/fundamentals/index.md
+++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.md
@@ -32,14 +32,16 @@ slug: Learn/CSS/Styling_text/Fundamentals
 
 正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。
 
-> **备注：** 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 [Box model](/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model) 文件，复习盒模型的理论。
+> [!NOTE]
+> 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 [Box model](/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model) 文件，复习盒模型的理论。
 
 用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。
 
 - **字体样式**: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
 - **文本布局风格**: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。
 
-> **备注：** 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像[::first-letter](/zh-CN/docs/Web/CSS/::first-letter) (选中元素文本的第一个字母), [::first-line](/zh-CN/docs/Web/CSS/::first-line) (选中元素文本的第一行), 或者 [::selection](/zh-CN/docs/Web/CSS/::selection) (当前光标双击选中的文本)
+> [!NOTE]
+> 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像[::first-letter](/zh-CN/docs/Web/CSS/::first-letter) (选中元素文本的第一个字母), [::first-line](/zh-CN/docs/Web/CSS/::first-line) (选中元素文本的第一行), 或者 [::selection](/zh-CN/docs/Web/CSS/::selection) (当前光标双击选中的文本)
 
 ## 字体
 
@@ -165,9 +167,11 @@ p {
   </tbody>
 </table>
 
-> **备注：** 在各种资源中，[cssfontstack.com](http://www.cssfontstack.com/) 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。
+> [!NOTE]
+> 在各种资源中，[cssfontstack.com](http://www.cssfontstack.com/) 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。
 
-> **备注：** 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：**网页字体**。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。
+> [!NOTE]
+> 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：**网页字体**。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。
 
 #### 默认字体
 
@@ -274,7 +278,8 @@ p {
 
 在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是 Time New Roman - 这对于 sans-serif 字体是不利的！
 
-> **备注：** 有一些字体名称不止一个单词，比如`Trebuchet MS` ，那么就需要用引号包裹。
+> [!NOTE]
+> 有一些字体名称不止一个单词，比如`Trebuchet MS` ，那么就需要用引号包裹。
 
 #### 一个使用 font-family 的例子
 
@@ -452,7 +457,8 @@ text-shadow: 4px 4px 5px red;
 3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为 0，这意味着没有模糊。可以使用大多数的 CSS 单位 [length and size units](/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size).
 4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 [CSS color unit](/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). 如果没有指定，默认为 `black`.
 
-> **备注：** 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 `-1px -1px`.
+> [!NOTE]
+> 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 `-1px -1px`.
 
 #### 多种阴影
 
@@ -510,7 +516,8 @@ p {
 
 {{ EmbedLiveSample('多种阴影', '100%', 260) }}
 
-> **备注：** 你可以看到更多有趣的关于 `text-shadow` 使用的示例在 [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/).
+> [!NOTE]
+> 你可以看到更多有趣的关于 `text-shadow` 使用的示例在 [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/).
 
 ## 文本布局
 
diff --git a/files/zh-cn/learn/css/styling_text/index.md b/files/zh-cn/learn/css/styling_text/index.md
index bb401b615bb561..b8a7ac856fb159 100644
--- a/files/zh-cn/learn/css/styling_text/index.md
+++ b/files/zh-cn/learn/css/styling_text/index.md
@@ -11,7 +11,8 @@ slug: Learn/CSS/Styling_text
 
 在开始这一模块之前，你应当像 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) 模块中所探讨的，已经熟悉了基本的 HTML，以及像 [CSS 介绍](/zh-CN/docs/Learn/CSS/Introduction_to_CSS) 中所详述的，对自己的 CSS 基础感觉还满意。
 
-> **备注：** 如果你所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，你可以在一个在线编码程序 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 中尝试（大部分的）代码例子。
+> [!NOTE]
+> 如果你所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，你可以在一个在线编码程序 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 中尝试（大部分的）代码例子。
 
 ## 导引
 
diff --git a/files/zh-cn/learn/css/styling_text/styling_links/index.md b/files/zh-cn/learn/css/styling_text/styling_links/index.md
index fafc409c0e2dff..bdf555ef98ca41 100644
--- a/files/zh-cn/learn/css/styling_text/styling_links/index.md
+++ b/files/zh-cn/learn/css/styling_text/styling_links/index.md
@@ -74,7 +74,8 @@ p {
 
 {{ EmbedLiveSample('默认的样式', '100%', 120) }}
 
-> **备注：** 本页中的所有链接示例都链接到窗口顶部。空片段（`href="#"`）用于创建简单示例，并确保每个包含在 {{HTMLElement("iframe")}} 中的实时示例不会中断。
+> [!NOTE]
+> 本页中的所有链接示例都链接到窗口顶部。空片段（`href="#"`）用于创建简单示例，并确保每个包含在 {{HTMLElement("iframe")}} 中的实时示例不会中断。
 
 有趣的是，这些默认的样式与 20 世纪 90 年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：
 
@@ -87,7 +88,8 @@ p {
 - {{cssxref("cursor")}} 以改变鼠标光标的样式，除非有非常充分的理由，否则不应关闭此功能。
 - {{cssxref("outline")}} 以改变文字的轮廓。轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有；它只是设置在背景图片的顶部。轮廓是一种有用的无障碍辅助工具，因此如果不增加另一种表示重点链接的方法，就不应删除轮廓。
 
-> **备注：** 链接样式并不局限于上述属性，你可以自由使用任何你喜欢的属性。
+> [!NOTE]
+> 链接样式并不局限于上述属性，你可以自由使用任何你喜欢的属性。
 
 ### 将样式应用到一些链接
 
@@ -392,7 +394,8 @@ a[href^="http"] {
 
 > **备注：** `href` 值看起来很奇怪——我们在这里使用的是虚拟链接，并没有真正指向任何地方。这样做的原因是，如果我们使用真正的链接，就可以在实时示例嵌入的 `<iframe>` 中加载外部网站，从而丢失示例。
 
-> **备注：** 如果你对[背景](/zh-CN/docs/Learn/CSS/Building_blocks)和[响应式 web 设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)还不熟悉，也不用担心，其他地方会有解释。
+> [!NOTE]
+> 如果你对[背景](/zh-CN/docs/Learn/CSS/Building_blocks)和[响应式 web 设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)还不熟悉，也不用担心，其他地方会有解释。
 
 ## 样式化链接为按钮
 
diff --git a/files/zh-cn/learn/css/styling_text/styling_lists/index.md b/files/zh-cn/learn/css/styling_text/styling_lists/index.md
index 8cb75cce54c047..97efa79a6ae54a 100644
--- a/files/zh-cn/learn/css/styling_text/styling_lists/index.md
+++ b/files/zh-cn/learn/css/styling_text/styling_lists/index.md
@@ -294,7 +294,8 @@ ul {
 
 {{ EmbedLiveSample('reversed', '100%', 150) }}
 
-> **备注：** 如果反向计数的列表项数比 `start` 属性的值还要多，计数将继续到零并向负数方向增加。
+> [!NOTE]
+> 如果反向计数的列表项数比 `start` 属性的值还要多，计数将继续到零并向负数方向增加。
 
 ### value
 
@@ -315,7 +316,8 @@ ul {
 
 {{ EmbedLiveSample('value', '100%', 150) }}
 
-> **备注：** 即使使用非数字的 {{cssxref("list-style-type")}}，仍需要在 `value` 属性中使用等效的数值。
+> [!NOTE]
+> 即使使用非数字的 {{cssxref("list-style-type")}}，仍需要在 `value` 属性中使用等效的数值。
 
 ## 动手练习：为嵌套式列表添加样式
 
diff --git a/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.md b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.md
index fa419da32fbb47..2b74a1fb8d3a9f 100644
--- a/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.md
+++ b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.md
@@ -27,7 +27,8 @@ slug: Learn/CSS/Styling_text/Typesetting_a_homepage
 - 获取本次练习的 [HTML](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/index.html) 和 [CSS](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/style.css) 文件以及提供的 [external link icon](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/external-link-52.png)。
 - 在本地计算机中拷贝一份上述文件。
 
-> **备注：** 或者，你可以使用像 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 的网站完成你的测评。你可以把 HTML 和 CSS 粘贴到在线编辑器中，并使用[this URL](http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png)指定背景图像。如果你使用的在线编辑器没有单独的 CSS 面板，你可以将其放在 HTML 文件的\<style>元素中。
+> [!NOTE]
+> 或者，你可以使用像 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 的网站完成你的测评。你可以把 HTML 和 CSS 粘贴到在线编辑器中，并使用[this URL](http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png)指定背景图像。如果你使用的在线编辑器没有单独的 CSS 面板，你可以将其放在 HTML 文件的\<style>元素中。
 
 ## 项目简介
 
diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.md b/files/zh-cn/learn/css/styling_text/web_fonts/index.md
index ced2e62060194b..05c17de02f4729 100644
--- a/files/zh-cn/learn/css/styling_text/web_fonts/index.md
+++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.md
@@ -72,7 +72,8 @@ html {
 1. 浏览器支持不同的字体格式，因此你需要多种字体格式以获得良好的跨浏览器支持。例如，大多数现代浏览器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 开放字体格式版本 1 和 2)，它是最有效的格式，但是旧版本 IE 只支持 EOT (Embedded Open Type，嵌入式开放类型) 的字体，你可能需要包括一个 SVG 版本的字体支持旧版本的 iPhone 和 Android 浏览器。我们将向你展示如何生成所需的代码。
 2. 字体一般都不能自由使用。你必须为他们付费，或者遵循其他许可条件，比如在代码中 (或者在你的站点上) 提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
 
-> **备注：** Web 字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！
+> [!NOTE]
+> Web 字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！
 
 ## 自主学习:web 字体示例
 
@@ -93,7 +94,8 @@ html {
 
 在每种情况下，都要解压字体包 (Web 字体通常分布在包含字体文件和许可信息的 ZIP 文件中。) 你可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让你自己考虑一个单一的字体文件。
 
-> **备注：** 在右边栏的“查找字体”部分中，你可以单击不同的标记和分类来筛选显示的选项。
+> [!NOTE]
+> 在右边栏的“查找字体”部分中，你可以单击不同的标记和分类来筛选显示的选项。
 
 ### 生成所需代码
 
@@ -131,7 +133,8 @@ html {
 
 ![](web-font-example.png)
 
-> **备注：** 如果对于要让它正常工作你有任何问题，可以自由地将你的版本与我们完成的文件进行比较——见 [web-font-finished.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.html) 和 [web-font-finished.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.css) ([运行完成的示例](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html))。
+> [!NOTE]
+> 如果对于要让它正常工作你有任何问题，可以自由地将你的版本与我们完成的文件进行比较——见 [web-font-finished.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.html) 和 [web-font-finished.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/web-font-finished.css) ([运行完成的示例](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html))。
 
 ## 使用在线字体服务
 
@@ -146,7 +149,8 @@ html {
 5. 在生成的屏幕中，首先需要复制所显示的 HTML 代码行，并将其粘贴到 HTML 文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的 CSS 中使用它。
 6. 然后，你需要将 CSS 声明复制到你的 CSS 中，以便将自定义字体应用到你的 HTML。
 
-> **备注：** 如果你需要对比我们的，你可以在 [google-font.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.html)和[google-font.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.css)找到完整版本的。（[见预览版](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)）
+> [!NOTE]
+> 如果你需要对比我们的，你可以在 [google-font.html](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.html)和[google-font.css](https://github.com/mdn/learning-area/blob/main/css/styling-text/web-fonts/google-font.css)找到完整版本的。（[见预览版](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)）
 
 ## 关于 @font-face 的更多细节
 
@@ -173,7 +177,8 @@ html {
 - `src`：这些行指定要导入到你的 CSS(`url`部分) 的字体文件的路径，以及每种字体文件的格式 (`format`部分)。后面的部分不是必要的，但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——因此，最好是把新的、更好的格式比如 WOFF2 放在前面，把偏老的，不是那么好的格式像 TTF 这样的放在后面。唯一的例外是 EOT 字体——他们首先在旧版本的 IE 中修复了几个 bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。
 - {{cssxref("font-weight")}}/{{cssxref("font-style")}}: 这些行指定字体的粗细，以及它是否斜体。如果你正在导入相同字体的多个粗细，你可以指定它们的粗细/样式，然后使用不同的{{cssxref("font-weight")}}/{{cssxref("font-style")}}来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson 写的 [@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/) 更详细地说明了该做些什么。
 
-> **备注：** 你还可以为你的 web 字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} ) 值。在较新的浏览器中，你还可以指定一个{{cssxref("unicode-range")}}值，这是一个你需要使用什么 web 字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan 写的[Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/)在如何利用这个问题上提供了一些有用的建议。
+> [!NOTE]
+> 你还可以为你的 web 字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} ) 值。在较新的浏览器中，你还可以指定一个{{cssxref("unicode-range")}}值，这是一个你需要使用什么 web 字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan 写的[Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/)在如何利用这个问题上提供了一些有用的建议。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/forms/advanced_form_styling/index.md b/files/zh-cn/learn/forms/advanced_form_styling/index.md
index 2dfff85fcc261b..2867409d915073 100644
--- a/files/zh-cn/learn/forms/advanced_form_styling/index.md
+++ b/files/zh-cn/learn/forms/advanced_form_styling/index.md
@@ -114,7 +114,8 @@ input[type="search"] {
 
 {{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}}
 
-> **备注：** 你可能已经注意到，在搜索字段中，“x”删除图标会在搜索值不为空时出现，但在 Edge 和 Chrome 浏览器中，当输入失去焦点时，该图标就会消失，而在 Safari 浏览器中则会保持不变。要通过 CSS 删除，可以使用 `input[type="search"]:not(:focus, :active)::-webkit-search-cancel-button { display: none; }`。
+> [!NOTE]
+> 你可能已经注意到，在搜索字段中，“x”删除图标会在搜索值不为空时出现，但在 Edge 和 Chrome 浏览器中，当输入失去焦点时，该图标就会消失，而在 Safari 浏览器中则会保持不变。要通过 CSS 删除，可以使用 `input[type="search"]:not(:focus, :active)::-webkit-search-cancel-button { display: none; }`。
 
 ### 为复选框和单选钮添加样式
 
@@ -318,7 +319,8 @@ button {
 }
 ```
 
-> **备注：** 如果你想同时在多个浏览器上测试这些示例，可以[在此找到实时演示](https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html)（也可以[在此查看源代码](https://github.com/mdn/learning-area/blob/main/html/forms/styling-examples/ugly-controls.html)）。
+> [!NOTE]
+> 如果你想同时在多个浏览器上测试这些示例，可以[在此找到实时演示](https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html)（也可以[在此查看源代码](https://github.com/mdn/learning-area/blob/main/html/forms/styling-examples/ugly-controls.html)）。
 >
 > 另外请注意，我们在页面中添加了一些 JavaScript，用于在控件本身下方列出文件选择器选择的文件。这是 [`<input type="file">`](/zh-CN/docs/Web/HTML/Element/input/file#示例) 参考页面上示例的简化版本。
 
@@ -422,7 +424,8 @@ select {
 
 但是，该控件的内部部分（例如，用于选择日期的弹出日历、用于递增/递减值的旋转器）完全不可样式化，而且无法使用`"appearance: none;` 将其删除。如果你真的需要完全控制样式，必须使用某种库来生成自定义控件，或者创建自己的控件。
 
-> **备注：** 值得一提的还有 [`<input type="number">`](/zh-CN/docs/Web/HTML/Element/input/number) ——它也有一个可以用来递增/递减数值的控制按钮，因此也可能存在同样的问题。不过，`number` 类型收集的数据比较简单，使用 `tel` 输入类型就可以了，它的外观与 `text` 相似，但会在使用触摸键盘的设备上显示数字键盘。
+> [!NOTE]
+> 值得一提的还有 [`<input type="number">`](/zh-CN/docs/Web/HTML/Element/input/number) ——它也有一个可以用来递增/递减数值的控制按钮，因此也可能存在同样的问题。不过，`number` 类型收集的数据比较简单，使用 `tel` 输入类型就可以了，它的外观与 `text` 相似，但会在使用触摸键盘的设备上显示数字键盘。
 
 ### Range 输入类型
 
diff --git a/files/zh-cn/learn/forms/basic_native_form_controls/index.md b/files/zh-cn/learn/forms/basic_native_form_controls/index.md
index 289af307590e1b..18d461ba347b55 100644
--- a/files/zh-cn/learn/forms/basic_native_form_controls/index.md
+++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.md
@@ -20,20 +20,23 @@ slug: Learn/Forms/Basic_native_form_controls
  </tbody>
 </table>
 
-> **备注：** widget 在本页面中被统一翻译为部件，但在其他地方可能也被译为组件。
+> [!NOTE]
+> widget 在本页面中被统一翻译为部件，但在其他地方可能也被译为组件。
 
 你可能已经遇见过了一些表单元素，包括：{{HTMLelement('form')}}、{{HTMLelement('fieldset')}}、{{HTMLelement('legend')}}、{{HTMLelement('textarea')}}、{{HTMLelement('label')}}、{{HTMLelement('button')}} 和 {{HTMLelement('input')}}。这篇文章提到了：
 
 - 常见的输入（input）类型元素：{{HTMLelement('input/button', 'button')}}、{{HTMLelement('input/checkbox', 'checkbox')}}、{{HTMLelement('input/file', 'file')}}、{{HTMLelement('input/hidden', 'hidden')}}、{{HTMLelement('input/image', 'image')}}、{{HTMLelement('input/password', 'password')}}、{{HTMLelement('input/radio', 'radio')}}、{{HTMLelement('input/reset', 'reset')}}、{{HTMLelement('input/submit', 'submit')}} 和 {{HTMLelement('input/text', 'text')}}。
 - 所有表单部件共有的一些属性。
 
-> **备注：** 本文中讨论的大多数特性都在浏览器中得到了广泛的支持，但并非所有表单部件都受浏览器支持。我们在接下来的两篇文章中提到了 HTML5 带来的新的表单部件。如果你想要更准确的细节，你应该参考我们的 [HTML 表单元素参考](/zh-CN/docs/Web/HTML/Element#forms)，特别是我们的种类繁多的 [\<input> 类型](/zh-CN/docs/Web/HTML/Element/Input)参考。
+> [!NOTE]
+> 本文中讨论的大多数特性都在浏览器中得到了广泛的支持，但并非所有表单部件都受浏览器支持。我们在接下来的两篇文章中提到了 HTML5 带来的新的表单部件。如果你想要更准确的细节，你应该参考我们的 [HTML 表单元素参考](/zh-CN/docs/Web/HTML/Element#forms)，特别是我们的种类繁多的 [\<input> 类型](/zh-CN/docs/Web/HTML/Element/Input)参考。
 
 ## 文本输入框
 
 文本{{htmlelement("input", "输入")}}框是最基本的表单小部件。这是一种非常方便的方式，可以让用户输入任何类型的数据。我们已经看到过几个简单的例子。
 
-> **备注：** HTML 表单文本字段是简单的纯文本输入控件。这意味着你不能将它们用作富文本编辑（粗体、斜体等）。你遇到的所有富文本编辑器都是使用 HTML、CSS 和 JavaScript 所创建的自定义小部件。
+> [!NOTE]
+> HTML 表单文本字段是简单的纯文本输入控件。这意味着你不能将它们用作富文本编辑（粗体、斜体等）。你遇到的所有富文本编辑器都是使用 HTML、CSS 和 JavaScript 所创建的自定义小部件。
 
 所有文本框都有一些通用规范：
 
@@ -48,7 +51,8 @@ slug: Learn/Forms/Basic_native_form_controls
 
 使用 [`type`](/zh-CN/docs/Web/HTML/Element/input#type) 属性值被设置为 `text` 的 {{HTMLElement("input")}} 元素创建一个单行文本框（同样的，如果你不提供 [`type`](/zh-CN/docs/Web/HTML/Element/input#type) 属性，该属性将被默认设置为 `text`）。在你指定的 [`type`](/zh-CN/docs/Web/HTML/Element/input#type) 属性的值在浏览器中是未知的情况下（比如你指定 `type="date"`，但是浏览器不支持原生日期选择器），属性值也将会回落到 `text`。
 
-> **备注：** 你可以在 Github 上的 [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html) 找到所有单行文本框类型（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)）。
+> [!NOTE]
+> 你可以在 Github 上的 [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html) 找到所有单行文本框类型（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)）。
 
 这是一个基本的单行文本框示例：
 
@@ -62,7 +66,8 @@ _以下截图现实了 macOS 上的 Firefox 71 和 Safair 以及 Windows 10 上
 
 ![Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge.](disabled.png)
 
-> **备注：** HTML5 通过为 [`type`](/zh-CN/docs/Web/HTML/Element/input#type) 属性增加特殊值增强了基本单行文本框。这些值仍然将 {{HTMLElement("input")}} 元素转换为单行文本框，但它们为字段添加了一些额外的约束和特性。例如，URL 和 数值类型的约束，我们将会在下一篇文章中介绍：[HTML5 input 类型](/zh-CN/docs/Learn/Forms/HTML5_input_types)。
+> [!NOTE]
+> HTML5 通过为 [`type`](/zh-CN/docs/Web/HTML/Element/input#type) 属性增加特殊值增强了基本单行文本框。这些值仍然将 {{HTMLElement("input")}} 元素转换为单行文本框，但它们为字段添加了一些额外的约束和特性。例如，URL 和 数值类型的约束，我们将会在下一篇文章中介绍：[HTML5 input 类型](/zh-CN/docs/Learn/Forms/HTML5_input_types)。
 
 #### 密码框
 
@@ -96,7 +101,8 @@ HTML5 中添加了其他的文本输入类型，如：{{HTMLElement("input/searc
 
 值得注意的是，这些小部件与其他表单小部件不一样。对于大多数表单部件，一旦表单提交，所有具有 [`name`](/zh-CN/docs/Web/HTML/Element/Input#name) 属性的小部件都会被发送，即使没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。而在它们被勾选且没有提供值（value）时，将会发送名字和缺省值 `on`。
 
-> **备注：** 你可以在 Github 上看到 [checkable-items.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html)（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)）。
+> [!NOTE]
+> 你可以在 Github 上看到 [checkable-items.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html)（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)）。
 
 为了获得最大的可用性和无障碍（无障碍），建议你在 {{htmlelement("fieldset")}} 中包围每个相关项目的列表，并使用 {{htmlelement("legend")}} 提供对列表的全面描述。每个单独的 {{htmlelement("label")}}/{{htmlelement("input")}} 元素都应该包含在它自己的列表项中（或者类似的）。正如在下方示例中显示的。
 
@@ -139,7 +145,8 @@ _以下截图显示了 macOS 上的 Firefox 71 和 Safair 13 以及 Windows 10 
 
 ![Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10](checkboxes.png)
 
-> **备注：** 任何带有 [`checked`](/zh-CN/docs/Web/HTML/Element/Input/checkbox#attr-checked) 属性的复选框和单选按钮在加载时都会匹配 {{cssxref(':default')}} 伪类，即使它们后面不再被选中。任何当前被选中的元素，都会匹配 {{cssxref(':checked')}} 伪类。
+> [!NOTE]
+> 任何带有 [`checked`](/zh-CN/docs/Web/HTML/Element/Input/checkbox#attr-checked) 属性的复选框和单选按钮在加载时都会匹配 {{cssxref(':default')}} 伪类，即使它们后面不再被选中。任何当前被选中的元素，都会匹配 {{cssxref(':checked')}} 伪类。
 
 由于复选框的开关特性，其被认为是一种切换按钮，许多开发者和设计人员覆盖了默认的复选框样式，以使其看起来像是一个切换开关的按钮。你可以在[这里看到一个示例](https://mdn.github.io/learning-area/html/forms/toggle-switch-example/)（参见[源码](https://github.com/mdn/learning-area/blob/main/html/forms/toggle-switch-example/index.html)）。
 
@@ -192,7 +199,8 @@ _以下截图显示了 macOS 上的 Firefox 71 和 Safair 13 以及 Windows 10 
 
 > **备注：** `image` input 类型同样被渲染为一个按钮。我们将在后面提到。
 
-> **备注：** 你可以在 Github 上看到 [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html)（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)）。
+> [!NOTE]
+> 你可以在 Github 上看到 [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html)（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)）。
 
 下面，你可以看到每一种与 `<button>` 对应类型等价的 `<input>` 类型的示例。
 
diff --git a/files/zh-cn/learn/forms/form_validation/index.md b/files/zh-cn/learn/forms/form_validation/index.md
index 34f0c5bfcb4a80..df09251056afba 100644
--- a/files/zh-cn/learn/forms/form_validation/index.md
+++ b/files/zh-cn/learn/forms/form_validation/index.md
@@ -37,7 +37,8 @@ slug: Learn/Forms/Form_validation
 
 这就是**表单校验**——当你向 Web 应用输入数据时，应用会验证你输入的数据是否是正确的。如果验证通过，应用允许提交这些数据到服务器并储存到数据库中（通常情况下），如果验证未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。表单校验可以通过许多不同的方式实现。
 
-> **备注：** 下面一段在英文原文中已经删除
+> [!NOTE]
+> 下面一段在英文原文中已经删除
 
 （事实上，没有人愿意填写表单——很多证据表明，用户对填写表单这件事情都感到很烦恼，如果他们在填写表单的过程中遇到一些自己无法理解的问题，通常都会导致他们直接离开你的 Web 应用，简而言之，[表单是一个很烦人的东西](https://www.slideshare.net/jwegesin/forms-suck/)。）
 
@@ -47,7 +48,8 @@ slug: Learn/Forms/Form_validation
 - **我们希望保护我们的用户**——强制用户输入安全的密码，有利于保护他们的账户信息。
 - **我们希望保护我们自己**——恶意用户有很多通过滥用应用中缺乏保护的表单破坏应用的方法（具体请参见[网站安全](/zh-CN/docs/learn/Server-side/First_steps/Website_security)）。
 
-> **警告：** 永远不要相信从客户端传递到服务器的数据。即使你的表单正确验证并防止输入格式错误，恶意用户仍然可以更改网络请求。
+> [!WARNING]
+> 永远不要相信从客户端传递到服务器的数据。即使你的表单正确验证并防止输入格式错误，恶意用户仍然可以更改网络请求。
 
 ### 不同类型的表单数据校验
 
@@ -191,9 +193,11 @@ input:valid {
 
 在这个基础上，尝试把`pattern` 属性内部的表达式改变成上面的几个例子，然后看看这些表达式如何影响你可以输入的值以使输入值有效。尝试写一些你自己设计的，看看它如何工作。尽量让他们与水果有关这样你的例子才会有意义。
 
-> **备注：** 一些 {{HTMLElement("input")}} 元素类型不需要[`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性进行校验。指定特定 `email` 类型 就会使用匹配电子邮件格式的正则表达式来校验 (如果有 [`multiple`](/zh-CN/docs/Web/HTML/Element/input#multiple) 属性请用逗号来分割多个邮箱). 进一步来说，字段 `url` 类型则会自动校验输入的是否为一个合法的链接。
+> [!NOTE]
+> 一些 {{HTMLElement("input")}} 元素类型不需要[`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性进行校验。指定特定 `email` 类型 就会使用匹配电子邮件格式的正则表达式来校验 (如果有 [`multiple`](/zh-CN/docs/Web/HTML/Element/input#multiple) 属性请用逗号来分割多个邮箱). 进一步来说，字段 `url` 类型则会自动校验输入的是否为一个合法的链接。
 
-> **备注：** 该 {{HTMLElement("textarea")}} 元素不支持[`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性。
+> [!NOTE]
+> 该 {{HTMLElement("textarea")}} 元素不支持[`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性。
 
 ### 限制输入的长度
 
diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.md b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.md
index eccb8a612697d6..212ab5c6bc9ec7 100644
--- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.md
@@ -9,7 +9,8 @@ slug: Learn/Forms/How_to_build_custom_form_controls
 
 在本文中，我们会看到如何构建自定义控件。为此，我们将使用这样一个示例：重建 {{HTMLElement("select")}} 元素。我们还将讨论如何构建、何时构建自定义控件、构建是否存在意义，以及构建控件的相关注意事项。
 
-> **备注：** 我们将专注于构建控件，而不是怎样让代码更通用或可复用；那会涉及一些非基础的 JavaScript 代码和未知上下文下的 DOM 操作，这超过了这篇文章的范畴。
+> [!NOTE]
+> 我们将专注于构建控件，而不是怎样让代码更通用或可复用；那会涉及一些非基础的 JavaScript 代码和未知上下文下的 DOM 操作，这超过了这篇文章的范畴。
 
 ## 设计、结构和语义
 
@@ -72,7 +73,8 @@ slug: Learn/Forms/How_to_build_custom_form_controls
 - [UXDesign.com](https://uxdesign.com/)
 - [SmashingMagazine 用户体验设计部分](https://www.smashingmagazine.com/)
 
-> **备注：** 此外，在绝大多数系统中，还有一种方法能够打开 {{HTMLElement("select")}} 元素来观察其所有的选项（这和用鼠标点击 {{HTMLElement("select")}} 元素是一样的）。这可以通过 Windows 下的 <kbd>Alt</kbd> + <kbd>Down</kbd> 实现。这没有在我们的示例中实现，但是这样做会很方便，因为鼠标点击（`click`）事件就是由该原理实现的。
+> [!NOTE]
+> 此外，在绝大多数系统中，还有一种方法能够打开 {{HTMLElement("select")}} 元素来观察其所有的选项（这和用鼠标点击 {{HTMLElement("select")}} 元素是一样的）。这可以通过 Windows 下的 <kbd>Alt</kbd> + <kbd>Down</kbd> 实现。这没有在我们的示例中实现，但是这样做会很方便，因为鼠标点击（`click`）事件就是由该原理实现的。
 
 ### 定义语义化的 HTML 结构
 
@@ -162,7 +164,8 @@ slug: Learn/Forms/How_to_build_custom_form_controls
 }
 ```
 
-> **备注：** 我们也可以使用 `transform: scale(1, 0)` 来指定选项列表的高度为零，但宽度不变。
+> [!NOTE]
+> 我们也可以使用 `transform: scale(1, 0)` 来指定选项列表的高度为零，但宽度不变。
 
 ### 美化
 
@@ -642,7 +645,8 @@ slug: Learn/Forms/How_to_build_custom_form_controls
 
 现在我们的设计和结构已经完成了。我们可以写些 JavaScript 代码来让这个控件真正生效。
 
-> **警告：** 下面的代码仅仅是教学性质的，不是生产环境的代码，并且不应该照搬使用。这种方案不具有前瞻性，而且可能在旧式浏览器上会不工作。这里面还有冗余的部分，在生产环境下，代码需要优化。
+> [!WARNING]
+> 下面的代码仅仅是教学性质的，不是生产环境的代码，并且不应该照搬使用。这种方案不具有前瞻性，而且可能在旧式浏览器上会不工作。这里面还有冗余的部分，在生产环境下，代码需要优化。
 
 ### 它为什么不生效？
 
@@ -906,7 +910,8 @@ window.addEventListener("load", () => {
 
 {{EmbedLiveSample("使用 JS",120,130)}}
 
-> **备注：** 如果你真的想让你的代码变得通用和可复用，最好不要仅仅是添加一个类选择器开关，而是通过添加一个控件类的方式来隐藏 {{HTMLElement("select")}} 元素，并且动态地在每一个 {{HTMLElement("select")}} 元素后面添加代表页面中自定义控件的 DOM 树。
+> [!NOTE]
+> 如果你真的想让你的代码变得通用和可复用，最好不要仅仅是添加一个类选择器开关，而是通过添加一个控件类的方式来隐藏 {{HTMLElement("select")}} 元素，并且动态地在每一个 {{HTMLElement("select")}} 元素后面添加代表页面中自定义控件的 DOM 树。
 
 ### 让工作变得更简单
 
@@ -1660,7 +1665,8 @@ window.addEventListener("load", () => {
 </div>
 ```
 
-> **备注：** 不需要同时包含 `role` 属性和 `class` 属性。你可以在 CSS 中使用 `[role="option"]` [属性选择器](/zh-CN/docs/Web/CSS/Attribute_selectors)来代替 `.option` 类。
+> [!NOTE]
+> 不需要同时包含 `role` 属性和 `class` 属性。你可以在 CSS 中使用 `[role="option"]` [属性选择器](/zh-CN/docs/Web/CSS/Attribute_selectors)来代替 `.option` 类。
 
 ### `aria-selected` 属性
 
diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
index fbb1fcfc24b376..63637e6ae03df7 100644
--- a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
@@ -34,11 +34,13 @@ HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;你可
 
 我们早在之前的文章中就遇见过它了。
 
-> **备注：** 严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。
+> [!NOTE]
+> 严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。
 
 请注意，在{{HTMLElement("form")}}元素之外使用表单小部件是可以的，但是如果你这样做了，那么表单小部件与任何表单都没有任何关系。这样的小部件可以在表单之外使用，但是你应该对于这些小部件有特别的计划，因为它们自己什么也不做。你将不得不使用 JavaScript 定制他们的行为。
 
-> **备注：** HTML5 在 HTML 表单元素中引入`form`属性。它让你显式地将元素与表单绑定在一起，即使元素不在{{ HTMLElement("form") }}中。不幸的是，就目前而言，跨浏览器对这个特性的实现还不足以使用。
+> [!NOTE]
+> HTML5 在 HTML 表单元素中引入`form`属性。它让你显式地将元素与表单绑定在一起，即使元素不在{{ HTMLElement("form") }}中。不幸的是，就目前而言，跨浏览器对这个特性的实现还不足以使用。
 
 ## \<fieldset> 和 \<legend> 元素
 
@@ -68,7 +70,8 @@ HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;你可
 </form>
 ```
 
-> **备注：** 你可以在 [fieldset-legend.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/fieldset-legend.html) (你也可以看[预览版](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)) 看到该例。
+> [!NOTE]
+> 你可以在 [fieldset-legend.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/fieldset-legend.html) (你也可以看[预览版](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)) 看到该例。
 
 当阅读上述表格时，屏幕阅读器将会读第一个小部件“Fruit juice size small”，“Fruit juice size medium”为第二个，“Fruit juice size large”为第三个。
 
@@ -117,7 +120,8 @@ HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;你可
 </form>
 ```
 
-> **备注：** 你可以在 [checkbox-label.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/checkbox-label.html) (你也可以看[预览版](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)) 看到该例。
+> [!NOTE]
+> 你可以在 [checkbox-label.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/checkbox-label.html) (你也可以看[预览版](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)) 看到该例。
 
 ### 多个标签
 
@@ -157,9 +161,11 @@ HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;你可
 - 在第二个例子中，事情变得清晰一点了——标签和输入一起，读出的是“name star name edit text”，但标签仍然是单独读出的。这还是有点令人困惑，但这次还是稍微好一点了，因为`input`和`label`联系起来了。
 - 第三个例子是最好的——标签是一起读出的，标签和输入读出的是“name star edit text”。
 
-> **备注：** 你可能会得到一些不同的结果，这取决于你的屏幕阅读器。这是在 VoiceOver 上测试的（NVDA 的行为也类似）。我们也乐于听听你的试验结果。
+> [!NOTE]
+> 你可能会得到一些不同的结果，这取决于你的屏幕阅读器。这是在 VoiceOver 上测试的（NVDA 的行为也类似）。我们也乐于听听你的试验结果。
 
-> **备注：** 你可以在 GitHub 上看到 [required-labels.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/required-labels.html)（你也可以看[预览版](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)）。不要运行 2 个或 3 个未注释版本的示例——如果你有多个标签和多个输入相同的 ID，那么屏幕阅读器肯定会感到困惑！
+> [!NOTE]
+> 你可以在 GitHub 上看到 [required-labels.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/required-labels.html)（你也可以看[预览版](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)）。不要运行 2 个或 3 个未注释版本的示例——如果你有多个标签和多个输入相同的 ID，那么屏幕阅读器肯定会感到困惑！
 
 ## 用于表单的通用 HTML 结构
 
diff --git a/files/zh-cn/learn/forms/html5_input_types/index.md b/files/zh-cn/learn/forms/html5_input_types/index.md
index f329f4f186f7c5..6fe8c7059e3917 100644
--- a/files/zh-cn/learn/forms/html5_input_types/index.md
+++ b/files/zh-cn/learn/forms/html5_input_types/index.md
@@ -27,7 +27,8 @@ slug: Learn/Forms/HTML5_input_types
   </tbody>
 </table>
 
-> **备注：** 本篇文章中讨论的大多数特性都受到了广泛支持，如果有任何例外将会在文章中说明，如果你需要更多浏览器支持的细节，你应该查看我们的 [HTML 表单元素参考](/zh-CN/docs/Web/HTML/Element#forms)，特别是深入的 [\<input> 类型](/zh-CN/docs/Web/HTML/Element/Input) 参考。
+> [!NOTE]
+> 本篇文章中讨论的大多数特性都受到了广泛支持，如果有任何例外将会在文章中说明，如果你需要更多浏览器支持的细节，你应该查看我们的 [HTML 表单元素参考](/zh-CN/docs/Web/HTML/Element#forms)，特别是深入的 [\<input> 类型](/zh-CN/docs/Web/HTML/Element/Input) 参考。
 
 由于 HTML 表单控件的外观可能与设计者的规格有很大的不同，web 开发者有时会建立自己的自定义表单控件。我们在一个高级教程中介绍了这一点：[如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)。
 
@@ -53,7 +54,8 @@ slug: Learn/Forms/HTML5_input_types
 
 ![Firefox for Android email keyboard, with the at sign displayed by default.](fx-android-email-type-keyboard.jpg)
 
-> **备注：** 你可以在[基本 input 例子](https://mdn.github.io/learning-area/html/forms/basic-input-examples/)中找到基本文本 input 类型的例子（也请看看[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/basic-input-examples/index.html)）。
+> [!NOTE]
+> 你可以在[基本 input 例子](https://mdn.github.io/learning-area/html/forms/basic-input-examples/)中找到基本文本 input 类型的例子（也请看看[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/basic-input-examples/index.html)）。
 
 这是使用这些较新的 input 类型的另一个很好的理由——可以为这些设备的用户改善用户体验。
 
@@ -65,7 +67,8 @@ slug: Learn/Forms/HTML5_input_types
 
 注意，在默认限制条件下，`a@b` 也是一个合法的电子邮件地址，因为 `email` input 类型默认也允许内部网络的电子邮件地址。为了实现不同的验证行为，你可以使用 [`pattern`](/zh-CN/docs/Web/HTML/Attributes/pattern) 属性，而且可以自定义错误信息；我们将在[客户端表单认证](/zh-CN/docs/Learn/Forms/Form_validation)文章中进一步说明如何使用这些功能。
 
-> **备注：** 如果输入的数据不是一个电子邮件地址，会匹配 {{cssxref(':invalid')}} 伪类，且 {{domxref('validityState.typeMismatch')}} 属性总会返回 `true`。
+> [!NOTE]
+> 如果输入的数据不是一个电子邮件地址，会匹配 {{cssxref(':invalid')}} 伪类，且 {{domxref('validityState.typeMismatch')}} 属性总会返回 `true`。
 
 ## 查询字段
 
@@ -115,7 +118,8 @@ slug: Learn/Forms/HTML5_input_types
 
 ![Firefox for Android email keyboard, with ampersand displayed by default.](fx-android-url-type-keyboard.jpg)
 
-> **备注：** URL 格式正确可不意味着所指向的地址一定实际存在！
+> [!NOTE]
+> URL 格式正确可不意味着所指向的地址一定实际存在！
 
 ## 数字字段
 
@@ -189,7 +193,8 @@ price.addEventListener("input", () => {
 
 这里我们将 `range` 输入元素和 `output` 元素存为了两个变量。然后我们马上将 `output` 的 [`textContent`](/zh-CN/docs/Web/API/Node/textContent) 属性设置为 input 的 `value` 。最终，我们设置了一个事件监听器，确保每次范围滑块移动时，`output` 的 `textContent` 总是可以及时更新为新值。
 
-> **备注：** 在 CSS Tricks 网站上有一篇关于该主题的很好的教程：[The Output Element](https://css-tricks.com/the-output-element/)。
+> [!NOTE]
+> 在 CSS Tricks 网站上有一篇关于该主题的很好的教程：[The Output Element](https://css-tricks.com/the-output-element/)。
 
 ## 日期和时间选择器
 
diff --git a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.md b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.md
index 3ccd7cfb70b63f..7a5d1babc98dbe 100644
--- a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.md
+++ b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.md
@@ -176,7 +176,8 @@ Modernizr.load({
 
 Modernizr 团队按照惯例维护着[一个优秀的 polyfill 列表](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)，按需使用即可。
 
-> **备注：** Modernizr 还有其他很棒的功能可以帮助你处理非侵入式 JavaScript 和优雅降级的技术。请阅读 [Modernizr 文档](https://modernizr.com/docs/)。
+> [!NOTE]
+> Modernizr 还有其他很棒的功能可以帮助你处理非侵入式 JavaScript 和优雅降级的技术。请阅读 [Modernizr 文档](https://modernizr.com/docs/)。
 
 ### 注意性能
 
diff --git a/files/zh-cn/learn/forms/index.md b/files/zh-cn/learn/forms/index.md
index c41c20256a033c..c2d2a13017d6bb 100644
--- a/files/zh-cn/learn/forms/index.md
+++ b/files/zh-cn/learn/forms/index.md
@@ -15,7 +15,8 @@ slug: Learn/Forms
 
 以上内容明确地说明了为什么我们将 web 表单独立放在一个模块中，而不是将其与 HTML、CSS 和 JavaScript 这些模块放在一起——表单元素比绝大多数其他的 HTML 元素都要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密集合才能充分利用它们。
 
-> **备注：** 如果你正在使用一个无法创建自己的文件的计算机、平板电脑或其他设备，那么你可以尝试（大多数）在线编码程序中的代码示例，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 如果你正在使用一个无法创建自己的文件的计算机、平板电脑或其他设备，那么你可以尝试（大多数）在线编码程序中的代码示例，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
 
 ## 基本指南
 
diff --git a/files/zh-cn/learn/forms/other_form_controls/index.md b/files/zh-cn/learn/forms/other_form_controls/index.md
index ad037dd9b3fea0..663938775e6bb9 100644
--- a/files/zh-cn/learn/forms/other_form_controls/index.md
+++ b/files/zh-cn/learn/forms/other_form_controls/index.md
@@ -51,7 +51,8 @@ slug: Learn/Forms/Other_form_controls
 
 ![The default, focused, and disabled 'textarea' element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10.](textarea_basic.png)
 
-> **备注：** 你可以在该系列的第一篇文章中整理的例子中找到一个稍微有趣的文本区域使用的[示例](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)（[顺便看看源代码](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)）。
+> [!NOTE]
+> 你可以在该系列的第一篇文章中整理的例子中找到一个稍微有趣的文本区域使用的[示例](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)（[顺便看看源代码](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)）。
 
 ### 控制多行渲染
 
@@ -80,7 +81,8 @@ slug: Learn/Forms/Other_form_controls
 
 下拉菜单是一种简单地让用户从许多不同选项中进行选择的控件，不占用用户界面太多空间。HTML 有两种下拉内容：一种是**选择框**、另外一种是**自动补全框**。这两种情况下的交互是相同的——一旦被激活，浏览器就会显示可供用户选择的值的列表。
 
-> **备注：** 你可以在 GitHub 的 [drop-down-content.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/drop-down-content.html) 上找到所有下拉框类型的例子（[也可以看看在线演示](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html)）。
+> [!NOTE]
+> 你可以在 GitHub 的 [drop-down-content.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/drop-down-content.html) 上找到所有下拉框类型的例子（[也可以看看在线演示](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html)）。
 
 ### 选择框
 
@@ -160,9 +162,11 @@ slug: Learn/Forms/Other_form_controls
 
 {{EmbedLiveSample("多选选择框", 120, 120)}}
 
-> **备注：** 在多选选择框的情况下，你会注意到选择框不再以下拉内容的形式显示数值——相反，所有的值都会一次性显示在一个列表中，可选的 [`size`](/zh-CN/docs/Web/HTML/Attributes/size) 属性决定了控件的高度。
+> [!NOTE]
+> 在多选选择框的情况下，你会注意到选择框不再以下拉内容的形式显示数值——相反，所有的值都会一次性显示在一个列表中，可选的 [`size`](/zh-CN/docs/Web/HTML/Attributes/size) 属性决定了控件的高度。
 
-> **备注：** 任何支持 {{HTMLElement("select")}} 元素的浏览器也支持 [`multiple`](/zh-CN/docs/Web/HTML/Element/select#multiple) 属性。
+> [!NOTE]
+> 任何支持 {{HTMLElement("select")}} 元素的浏览器也支持 [`multiple`](/zh-CN/docs/Web/HTML/Element/select#multiple) 属性。
 
 ### 自动补全框
 
@@ -240,7 +244,8 @@ slug: Learn/Forms/Other_form_controls
 
 还有一些其他的表单功能，不像我们已经提到的那样明显，但在某些情况下仍然有用，所以我们认为值得给它们一个简单的提及。
 
-> **备注：** 你可以在 GitHub 上找到本节的例子，如 [other-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/other-examples.html)（[也可以看看在线演示](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到本节的例子，如 [other-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/other-examples.html)（[也可以看看在线演示](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)）。
 
 ### 计量器和进度条
 
diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
index 8d94f1afaa0ef1..819d7916fbc51a 100644
--- a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
@@ -44,7 +44,8 @@ web 基于非常基本的客户端/服务器体系结构，可以总结如下：
 
 在客户端，HTML 表单只不过是一种方便的用户友好的方式，可以配置 HTTP 请求将数据发送到服务器。这使用户能够提供在 HTTP 请求中传递的信息。
 
-> **备注：** 为了更好地了解客户端—服务器架构是如何工作的，请阅读我们的[服务器端网站编程的第一个步骤](/zh-CN/docs/Learn/Server-side/First_steps)模块。
+> [!NOTE]
+> 为了更好地了解客户端—服务器架构是如何工作的，请阅读我们的[服务器端网站编程的第一个步骤](/zh-CN/docs/Learn/Server-side/First_steps)模块。
 
 ### 在客户端：定义如何发送数据
 
@@ -78,7 +79,8 @@ web 基于非常基本的客户端/服务器体系结构，可以总结如下：
 <form action="#">…</form>
 ```
 
-> **备注：** 可以指定使用 HTTPS(安全 HTTP) 协议的 URL。当你这样做时，数据将与请求的其余部分一起加密，即使表单本身是托管在使用 HTTP 访问的不安全页面上。另一方面，如果表单是在安全页面上托管的，但是你指定了一个不安全的 HTTP URL，它带有[`action`](/zh-CN/docs/Web/HTML/Element/form#action)属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。
+> [!NOTE]
+> 可以指定使用 HTTPS(安全 HTTP) 协议的 URL。当你这样做时，数据将与请求的其余部分一起加密，即使表单本身是托管在使用 HTTP 访问的不安全页面上。另一方面，如果表单是在安全页面上托管的，但是你指定了一个不安全的 HTTP URL，它带有[`action`](/zh-CN/docs/Web/HTML/Element/form#action)属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。
 
 #### `method` 属性
 
@@ -124,7 +126,8 @@ GET /?say=Hi&to=Mom HTTP/2.0
 Host: foo.com
 ```
 
-> **备注：** 你可以在 GitHub 上看到本例子——见 [get-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/get-method.html) ([预览版](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
+> [!NOTE]
+> 你可以在 GitHub 上看到本例子——见 [get-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/get-method.html) ([预览版](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
 
 ##### POST 方法
 
@@ -161,7 +164,8 @@ say=Hi&to=Mom
 
 `Content-Length`数据头表示主体的大小，`Content-Type`数据头表示发送到服务器的资源类型。稍后我们将讨论这些标头。
 
-> **备注：** 你可以在 GitHub 上看到本例——见 [post-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/post-method.html)（[预览版](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上看到本例——见 [post-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/post-method.html)（[预览版](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html)）。
 
 #### 查看 HTTP 请求
 
@@ -205,7 +209,8 @@ HTTP 请求永远不会显示给用户 (如果你想要看到它们，你需要
 
 ![](php-result.png)
 
-> **备注：** 当你将本例加载到本地浏览器中时，这个示例将无法工作---浏览器无法解析 PHP 代码，因此当提交表单时，浏览器只会为你提供下载 PHP 文件。为了让它生效，你需要通过某种类型的 PHP 服务器运行这个示例。本地 PHP 测试的好选择有[MAMP](https://www.mamp.info/en/downloads/)(Mac 和 Windows) 和[AMPPS](http://ampps.com/download)(Mac、Windows、Linux)。
+> [!NOTE]
+> 当你将本例加载到本地浏览器中时，这个示例将无法工作---浏览器无法解析 PHP 代码，因此当提交表单时，浏览器只会为你提供下载 PHP 文件。为了让它生效，你需要通过某种类型的 PHP 服务器运行这个示例。本地 PHP 测试的好选择有[MAMP](https://www.mamp.info/en/downloads/)(Mac 和 Windows) 和[AMPPS](http://ampps.com/download)(Mac、Windows、Linux)。
 
 #### 例子：Python
 
@@ -234,7 +239,8 @@ if __name__ == "__main__":
 - [greeting.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/templates/greeting.html): 这个模板只包含一行，用于呈现渲染时传递给它的两个数据块。
   这是通过前面所见的`hello()`函数完成的，该函数在`/hello`URL 被导向时运行。
 
-> **备注：** 同样，如果你只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python 的工作方式与 PHP 略有不同——要在本地运行此代码，你需要[安装 Python/pip](/zh-CN/docs/Learn/Server-side/Django/development_environment#Installing_Python_3)，然后使用`pip3 install flask`安装 Flask。此时，你应该能够使用`python3 python-example.py`来运行这个示例，然后在浏览器中导航到`localhost:5000`。
+> [!NOTE]
+> 同样，如果你只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python 的工作方式与 PHP 略有不同——要在本地运行此代码，你需要[安装 Python/pip](/zh-CN/docs/Learn/Server-side/Django/development_environment#Installing_Python_3)，然后使用`pip3 install flask`安装 Flask。此时，你应该能够使用`python3 python-example.py`来运行这个示例，然后在浏览器中导航到`localhost:5000`。
 
 #### 其他语言和框架
 
@@ -248,7 +254,8 @@ if __name__ == "__main__":
 
 要注意的是，即使使用这些框架，使用表单也不一定很容易。但这比从头开始编写所有功能要简单得多，而且会节省很多时间。
 
-> **备注：** 向你介绍任何服务器端语言或框架超出了本文的范围。如果你想要学习这些它们，上面的链接会给你一些帮助。
+> [!NOTE]
+> 向你介绍任何服务器端语言或框架超出了本文的范围。如果你想要学习这些它们，上面的链接会给你一些帮助。
 
 ## 特殊案例：发送文件
 
@@ -278,9 +285,11 @@ if __name__ == "__main__":
 </form>
 ```
 
-> **备注：** 一些浏览器支持{{HTMLElement("input")}}的[`multiple`](/zh-CN/docs/Web/HTML/Element/input#multiple)属性，它允许只用一个 `<input>` 元素选择一个以上的文件上传。服务器如何处理这些文件取决于服务器上使用的技术。如前所述，使用框架将使你的生活更轻松。
+> [!NOTE]
+> 一些浏览器支持{{HTMLElement("input")}}的[`multiple`](/zh-CN/docs/Web/HTML/Element/input#multiple)属性，它允许只用一个 `<input>` 元素选择一个以上的文件上传。服务器如何处理这些文件取决于服务器上使用的技术。如前所述，使用框架将使你的生活更轻松。
 
-> **警告：** 为了防止滥用，许多服务器配置了文件和 HTTP 请求的大小限制。在发送文件之前，先检查服务器管理员的权限是很重要的。
+> [!WARNING]
+> 为了防止滥用，许多服务器配置了文件和 HTTP 请求的大小限制。在发送文件之前，先检查服务器管理员的权限是很重要的。
 
 ## 常见的安全问题
 
@@ -324,7 +333,8 @@ SQL 注入是一种试图在目标 web 站点使用的数据库上执行操作
 
 如果你遵循这三条规则，你应该避免很多问题，但是如果你想要得到一个有能力的第三方执行的安全检查，这是一个好主意。不要以为你已经看到了所有可能的问题。
 
-> **备注：** 我们的[服务器端](/zh-CN/docs/Learn/Server-side)学习主题的[网站安全性文章](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)更详细地讨论了上述威胁和潜在的解决方案。
+> [!NOTE]
+> 我们的[服务器端](/zh-CN/docs/Learn/Server-side)学习主题的[网站安全性文章](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)更详细地讨论了上述威胁和潜在的解决方案。
 
 ## 结论
 
diff --git a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
index b93199ac792728..5c4e9fae05141e 100644
--- a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
@@ -23,7 +23,8 @@ HTML 表单可以声明式地发送一个 [HTTP](/zh-CN/docs/Web/HTTP) 请求。
 
 {{domxref("XMLHttpRequest")}}（XHR）DOM 对象可以构建 HTTP 请求、发送请求并获取结果。从历史上看，{{domxref("XMLHttpRequest")}} 是为获取和发送 [XML](/zh-CN/docs/Web/XML) 作为交换格式而设计的，后来这种格式被 [JSON](/zh-CN/docs/Glossary/JSON) 所取代。但是，XML 和 JSON 都不适合表单数据请求编码。表单数据（`application/x-www-form-urlencoded`）由键/值对的 URL 编码列表组成。为了传输二进制数据，HTTP 请求被重塑为 `multipart/form-data`。
 
-> **备注：** 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，工作原理类似，但有一些优点。你在本文中看到的大部分 XHR 代码都可以换成 Fetch。
+> [!NOTE]
+> 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，工作原理类似，但有一些优点。你在本文中看到的大部分 XHR 代码都可以换成 Fetch。
 
 如果你控制了前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），就可以发送 JSON/XML，并随心所欲地处理它们。
 
@@ -103,7 +104,8 @@ btn.addEventListener("click", () => {
 
 {{EmbedLiveSample("构建_xmlhttprequest", "100%", 50)}}
 
-> **备注：** 当你想要往第三方网站传输数据时，使用 {{domxref("XMLHttpRequest")}} 会受到{{glossary('same-origin policy', '同源策略')}}的影响。如果你需要执行跨源请求，你需要熟悉一下 [CORS 和 HTTP 访问控制](/zh-CN/docs/Web/HTTP/CORS)。
+> [!NOTE]
+> 当你想要往第三方网站传输数据时，使用 {{domxref("XMLHttpRequest")}} 会受到{{glossary('same-origin policy', '同源策略')}}的影响。如果你需要执行跨源请求，你需要熟悉一下 [CORS 和 HTTP 访问控制](/zh-CN/docs/Web/HTTP/CORS)。
 
 ### 使用 XMLHttpRequest 和 FormData 对象
 
diff --git a/files/zh-cn/learn/forms/styling_web_forms/index.md b/files/zh-cn/learn/forms/styling_web_forms/index.md
index 57a1c8f8222d8c..abf7b61cdef301 100644
--- a/files/zh-cn/learn/forms/styling_web_forms/index.md
+++ b/files/zh-cn/learn/forms/styling_web_forms/index.md
@@ -66,7 +66,8 @@ l10n:
 
 [表单样式化进阶](/zh-CN/docs/Learn/Forms/Advanced_form_styling)和[如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)两篇文章介绍了如何设置这些样式。
 
-> **备注：** 一些专有的 CSS 伪元素（如 {{cssxref('::-moz-range-track')}}）可以为此类内部组件设计样式，但它们在不同浏览器之间并不一致，因此并不十分可靠。我们稍后会提到。
+> [!NOTE]
+> 一些专有的 CSS 伪元素（如 {{cssxref('::-moz-range-track')}}）可以为此类内部组件设计样式，但它们在不同浏览器之间并不一致，因此并不十分可靠。我们稍后会提到。
 
 ## 对简单的表单微件进行样式设计
 
@@ -148,7 +149,8 @@ legend {
 
 {{HTMLElement("legend")}} 元素对于无障碍辅助功能非常重要，它将作为字段集内每个表单元素标签的一部分被辅助技术识别，但使用类似上述的技术也没有问题。图例内容仍将以相同的方式显示，只是视觉位置发生了变化。
 
-> **备注：** 也可以使用 {{cssxref("transform")}} 属性来辅助定位 `<legend>`。但是，当使用 `transform: translateY();` 等属性定位时，它虽然移动了，但却在 `<fieldset>` 边框中留下了一个难看的缺口，而且很难消除。
+> [!NOTE]
+> 也可以使用 {{cssxref("transform")}} 属性来辅助定位 `<legend>`。但是，当使用 `transform: translateY();` 等属性定位时，它虽然移动了，但却在 `<fieldset>` 边框中留下了一个难看的缺口，而且很难消除。
 
 ## 一个具体的样式设计示例
 
@@ -366,7 +368,8 @@ button:focus {
 
 ![如上所述应用所有样式和调整后表单的最终外观和布局](updated-form-screenshot.jpg)
 
-> **备注：** 如果你的示例没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在 Github 上找到它——查看[在线演示](https://mdn.github.io/learning-area/html/forms/postcard-example/)（也可以查看[源代码](https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example)）。
+> [!NOTE]
+> 如果你的示例没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在 Github 上找到它——查看[在线演示](https://mdn.github.io/learning-area/html/forms/postcard-example/)（也可以查看[源代码](https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example)）。
 
 ## 技能测试
 
diff --git a/files/zh-cn/learn/forms/ui_pseudo-classes/index.md b/files/zh-cn/learn/forms/ui_pseudo-classes/index.md
index 6d9fca13609826..a287819185ccf2 100644
--- a/files/zh-cn/learn/forms/ui_pseudo-classes/index.md
+++ b/files/zh-cn/learn/forms/ui_pseudo-classes/index.md
@@ -44,7 +44,8 @@ slug: Learn/Forms/UI_pseudo-classes
 
 还有很多其他的，但上面列出的是最明显有用的。其中一些旨在解决非常具体的小众问题，或者在浏览器中还没有得到很好的支持。上面列出的那些都有相当好的浏览器支持，但当然，你应该仔细测试你的表单实现，以确保它们对你的目标受众有效。
 
-> **备注：** 这里讨论的许多伪类都是关于根据表单控件的验证状态（它们的数据是否有效？）你会在我们的下一篇文章[客户端表单验证](/zh-CN/docs/Learn/Forms/Form_validation)中学习到更多关于设置和控制验证约束的知识，但现在我们将保持关于表单验证的简单内容，以便不会混淆。
+> [!NOTE]
+> 这里讨论的许多伪类都是关于根据表单控件的验证状态（它们的数据是否有效？）你会在我们的下一篇文章[客户端表单验证](/zh-CN/docs/Learn/Forms/Form_validation)中学习到更多关于设置和控制验证约束的知识，但现在我们将保持关于表单验证的简单内容，以便不会混淆。
 
 ## 根据必需与否为输入控件添加样式
 
@@ -99,9 +100,11 @@ input:optional {
 
 在下一节，我们将看一个更好的例子，使用 `:required` 表示必填字段，这也是对使用生成内容的挖掘。
 
-> **备注：** 你可能不会发现自己经常使用 `:optional` 这个伪类。表单控件默认是可选的，所以你可以将可选状态的样式当作默认样式，然后在必需的组件上添加样式。
+> [!NOTE]
+> 你可能不会发现自己经常使用 `:optional` 这个伪类。表单控件默认是可选的，所以你可以将可选状态的样式当作默认样式，然后在必需的组件上添加样式。
 
-> **备注：** 如果一组同名的单选按钮中的一个单选按钮具有 `required` 属性，那么所有的单选按钮都将无效，直到有一个被选中，但只有分配了该属性的单选按钮才会真正匹配 {{cssxref(':required')}}。
+> [!NOTE]
+> 如果一组同名的单选按钮中的一个单选按钮具有 `required` 属性，那么所有的单选按钮都将无效，直到有一个被选中，但只有分配了该属性的单选按钮才会真正匹配 {{cssxref(':required')}}。
 
 ## 使用伪类生成内容
 
@@ -133,7 +136,8 @@ input[type="radio"]:checked::before {
 
 这真的很有用——屏幕阅读器已经让它们的用户知道单选按钮或复选框被选中了，所以你不希望它们读出另一个表示选择的 DOM 元素——那会让人困惑。有一个纯粹的视觉指示器可以解决这个问题。
 
-> **备注：** 这个示例也说明了如何将伪类和伪元素结合使用。
+> [!NOTE]
+> 这个示例也说明了如何将伪类和伪元素结合使用。
 
 回到我们之前的必填/可选的例子，这次我们不会改变输入本身的外观——我们将使用生成的内容来添加一个指示标签（[在这里看到它的实时演示](https://mdn.github.io/learning-area/html/forms/pseudo-classes/required-optional-generated.html)，并在这里看到[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/required-optional-generated.html)）。
 
@@ -248,7 +252,8 @@ input:valid + span::before {
 
 和之前一样，我们将 `<span>` 设置为 `position: relative`，这样我们就可以将生成的内容相对于它们定位。然后，我们根据表单的数据是有效还是无效，绝对定位不同的生成内容——分别是绿色复选框或红色叉号。为了给无效数据增加一点额外的紧迫感，我们还在无效时给输入的数据加上了厚厚的红边。
 
-> **备注：** 我们使用 `::before` 来添加这些标签，因为我们已经使用 `::after` 来添加“required”标签。
+> [!NOTE]
+> 我们使用 `::before` 来添加这些标签，因为我们已经使用 `::after` 来添加“required”标签。
 
 你可以在下方尝试：
 
@@ -260,7 +265,8 @@ input:valid + span::before {
 
 正如我们上面所提示的内容一样，还有两个相关的伪类需要考虑——{{cssxref(":in-range")}} 和 {{cssxref(":out-of-range")}}。这些与数字输入相匹配，其中范围限制由 [`min`](/zh-CN/docs/Web/HTML/Element/input#min) 和 [`max`](/zh-CN/docs/Web/HTML/Element/input#max) 指定，分别供其数据在指定范围之内或之外所使用。
 
-> **备注：** 数值输入类型包括 `date`、`month`、`week`、`time`、`datetime-local`、`number` 和 `range`。
+> [!NOTE]
+> 数值输入类型包括 `date`、`month`、`week`、`time`、`datetime-local`、`number` 和 `range`。
 
 值得注意的是，数据在范围内的输入也会被 `:valid` 伪类匹配，而数据在范围外的输入也会被 `:invalid` 伪类匹配。那么，为什么要同时拥有这两个类呢？这个问题实际上是一个语义问题——超出范围是一种更具体的无效通信类型，所以你可能想为超出范围的输入提供一个不同的消息，这将比只说“无效”对用户更有帮助。你甚至可能想同时提供这两种信息。
 
@@ -314,7 +320,8 @@ input:out-of-range + span::after {
 
 这一点做得很好——当页面第一次加载时，会显示“required”，还有一个红叉和边界。当你输入了一个有效的年龄（即在 12-120 的范围内），输入就会变成有效。然而，如果你将年龄输入改为超出范围，则会弹出“Outside allowable value range”的信息，取代了原先的“required”。
 
-> **备注：** 要输入一个无效的/超出范围的值，你必须实际聚焦于表格，用键盘输入该值。控件提供的按钮不会让你在允许的范围之外增加/减少数值。
+> [!NOTE]
+> 要输入一个无效的/超出范围的值，你必须实际聚焦于表格，用键盘输入该值。控件提供的按钮不会让你在允许的范围之外增加/减少数值。
 
 ## 为启用或禁用、只读或可读写输入控件添加样式
 
@@ -557,7 +564,8 @@ input:default ~ span::after {
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-default.html", '100%', 200)}}
 
-> **备注：** 你也可以在 GitHub 的 [radios-checked-default.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html) 中找到这个示例的实时演示（也可以看看[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-default.html)）。
+> [!NOTE]
+> 你也可以在 GitHub 的 [radios-checked-default.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html) 中找到这个示例的实时演示（也可以看看[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-default.html)）。
 
 对于 `:indeterminate` 示例，我们没有默认的选定的单选按钮——这很重要——如果有的话，就不会有 indeterminate 状态的样式。我们用下面的 CSS 来设计不确定的单选按钮：
 
@@ -584,9 +592,11 @@ input[type="radio"]:indeterminate {
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html", '100%', 200)}}
 
-> **备注：** 你也可以在 GitHub 的 [radios-checked-indeterminate.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html) 上找到这个示例的运行实例，也可以参见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-indeterminate.html)。
+> [!NOTE]
+> 你也可以在 GitHub 的 [radios-checked-indeterminate.html](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html) 上找到这个示例的运行实例，也可以参见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-indeterminate.html)。
 
-> **备注：** 你可以在 [`<input type="checkbox">`](/zh-CN/docs/Web/HTML/Element/input/checkbox) 参考页上找到一个[涉及 `indeterminate` 状态的有趣示例](/zh-CN/docs/Web/HTML/Element/input/checkbox#中间状态复选框)。
+> [!NOTE]
+> 你可以在 [`<input type="checkbox">`](/zh-CN/docs/Web/HTML/Element/input/checkbox) 参考页上找到一个[涉及 `indeterminate` 状态的有趣示例](/zh-CN/docs/Web/HTML/Element/input/checkbox#中间状态复选框)。
 
 ## 更多伪类
 
diff --git a/files/zh-cn/learn/forms/your_first_form/index.md b/files/zh-cn/learn/forms/your_first_form/index.md
index e7a9f50f4d6809..8393cfa5f5f3dc 100644
--- a/files/zh-cn/learn/forms/your_first_form/index.md
+++ b/files/zh-cn/learn/forms/your_first_form/index.md
@@ -72,7 +72,8 @@ web 表单是由一个或多个**表单控件**（有时称为**小部件**）
 - `action` 属性定义了在提交表单时，应该把所收集的数据送给谁（URL）去处理。
 - `method` 属性定义了发送数据的 HTTP 方法（通常是 `get` 或 `post`）。
 
-> **备注：** 如果你想深入了解这些属性是如何工作的，那么将在[发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data)文章中详细说明。
+> [!NOTE]
+> 如果你想深入了解这些属性是如何工作的，那么将在[发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data)文章中详细说明。
 
 现在，将上面的 {{htmlelement("form")}} 元素添加到你的 HTML {{htmlelement("body")}} 中。
 
@@ -146,13 +147,15 @@ by default this element is filled with this text
 - 单击 `type` 属性定义为 `reset` 值的按钮 将所有表单小部件重新设置为它们的默认值。从用户体验的角度来看，这被认为是一种糟糕的做法。
 - 单击 `type` 属性定义为 `button` 值的按钮，不会发生任何事！这听起来很傻，但是用 JavaScript 构建定制按钮非常有用。
 
-> **备注：** 你还可以使用相应类型的 {{HTMLElement("input")}} 元素来生成一个按钮，如 `<input type="submit">`。{{htmlelement("button")}} 元素的主要优点是，{{HTMLElement("input")}} 元素只允许纯文本作为其标签，而 {{htmlelement("button")}} 元素允许完整的 HTML 内容，允许更复杂、更有创意的按钮内容。
+> [!NOTE]
+> 你还可以使用相应类型的 {{HTMLElement("input")}} 元素来生成一个按钮，如 `<input type="submit">`。{{htmlelement("button")}} 元素的主要优点是，{{HTMLElement("input")}} 元素只允许纯文本作为其标签，而 {{htmlelement("button")}} 元素允许完整的 HTML 内容，允许更复杂、更有创意的按钮内容。
 
 ## 基本表单样式
 
 现在你已经完成了表单的 HTML 代码，尝试保存它并在浏览器中查看它。现在，你会看到它看起来很丑。
 
-> **备注：** 如果你怀疑你的 HTML 代码不对，试着把它和我们完成的例子进行比较——[first-form.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form.html)（你也可以[查看预览版](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)）。
+> [!NOTE]
+> 如果你怀疑你的 HTML 代码不对，试着把它和我们完成的例子进行比较——[first-form.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form.html)（你也可以[查看预览版](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)）。
 
 如何排布好表单是公认的难点。这超出了本文的讨论范围，所以现在我们只需要让你添加一些 CSS 来让它看起来很好。
 
@@ -233,7 +236,8 @@ button {
 
 保存并重新加载，现在它看起来没那么丑了。
 
-> **备注：** 你可以在 GitHub 上的这里找到这个版本 [first-form-styled.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)（也可以在这儿看[在线演示](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上的这里找到这个版本 [first-form-styled.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)（也可以在这儿看[在线演示](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)）。
 
 ## 向你的 web 服务器发送表单数据
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.md b/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.md
index d27b26277e7a5f..ca941cc3249aac 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.md
@@ -164,7 +164,8 @@ h1 {
    }
    ```
 
-   > **备注：** CSS 文档中所有位于 `/*` 和 `*/` 之间的内容都是 **CSS 注释**。浏览器在渲染代码时会忽略注释。CSS 注释是一种让你写下关于你的代码或逻辑的有用注解的方式。
+   > [!NOTE]
+   > CSS 文档中所有位于 `/*` 和 `*/` 之间的内容都是 **CSS 注释**。浏览器在渲染代码时会忽略注释。CSS 注释是一种让你写下关于你的代码或逻辑的有用注解的方式。
 
 4. 接下来为 HTML 主体内的元素（{{htmlelement("Heading_Elements", "h1")}}、{{htmlelement("li")}} 和 {{htmlelement("p")}}）设置字体大小。我们也将标题居中显示。最后，扩充下方的第二个规则集，为正文设置行高和字间距，从而提高页面的可读性。
 
@@ -281,11 +282,13 @@ img {
 
 {{htmlelement("body")}} 元素是**块级**元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是**行级**元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 `display: block` 给予其块级行为。
 
-> **备注：** 以上说明假定所选图片小于页面宽度（600 像素）。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以：
+> [!NOTE]
+> 以上说明假定所选图片小于页面宽度（600 像素）。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以：
 > 1）使用[图片编辑器](https://en.wikipedia.org/wiki/Raster_graphics_editor) 来减小图片宽度；
 > 2）用 CSS 限制图片大小，即减小 `<img>` 元素 {{cssxref("width")}} 属性的值。
 
-> **备注：** 如果你暂时不能理解 `display: block` 和块级元素与行级元素的差别也没关系；随着你对 CSS 学习的深入，你将明白这个问题。`display` 属性的更多信息请查看 [display 属性参考页面](/zh-CN/docs/Web/CSS/display)。
+> [!NOTE]
+> 如果你暂时不能理解 `display: block` 和块级元素与行级元素的差别也没关系；随着你对 CSS 学习的深入，你将明白这个问题。`display` 属性的更多信息请查看 [display 属性参考页面](/zh-CN/docs/Web/CSS/display)。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
index 6e8dcc2202c66a..74b0956e0bb0d0 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -32,7 +32,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 3. **`styles` 文件夹**：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 `test-site` 文件夹内创建一个名为 `styles` 的文件夹。
 4. **`scripts` 文件夹**：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 `test-site` 文件夹内创建一个名为 `scripts` 的文件夹。
 
-> **备注：** 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的**隐藏已知文件类型的扩展名**的选项。一般来说，你可以通过 Windows 资源管理器，选择**文件夹选项**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确认**将其关闭。对于涉及你的 Windows 版本的更多具体信息，你可以在网上搜索。
+> [!NOTE]
+> 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的**隐藏已知文件类型的扩展名**的选项。一般来说，你可以通过 Windows 资源管理器，选择**文件夹选项**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确认**将其关闭。对于涉及你的 Windows 版本的更多具体信息，你可以在网上搜索。
 
 ## 文件路径
 
@@ -70,7 +71,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
 这是你目前需要知道的全部内容。
 
-> **备注：** Windows 的文件系统使用反斜杠而不是正斜杠，例如：`C:\Windows`。这在 HTML 中并不重要——即使你在 Windows 系统上进行开发，你也应该在代码中使用正斜杠。
+> [!NOTE]
+> Windows 的文件系统使用反斜杠而不是正斜杠，例如：`C:\Windows`。这在 HTML 中并不重要——即使你在 Windows 系统上进行开发，你也应该在代码中使用正斜杠。
 
 ## 还应该做些什么？
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md
index 78b6e4b7207d53..c82ac91514b81e 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md
@@ -30,7 +30,8 @@ slug: Learn/Getting_started_with_the_web/How_the_Web_works
 
 除了客户端和服务器，我们还需要了解：
 
-> **备注：** 我感觉下面的比喻还不是很契合。我感觉再合理一点的比喻：
+> [!NOTE]
+> 我感觉下面的比喻还不是很契合。我感觉再合理一点的比喻：
 >
 > 假如你生活在一个封闭的村子叫做“盘溪新村”，村子盛产苹果。
 >
diff --git a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
index d656493904ff79..20ca93bc6e3906 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
@@ -48,7 +48,8 @@ My cat is very grumpy
 2. 属性的名称，并接上一个等号。
 3. 由引号所包围的属性值。
 
-> **备注：** 不包含 ASCII 空格（以及 `"` `'` `` ` `` `=` `<` `>`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
+> [!NOTE]
+> 不包含 ASCII 空格（以及 `"` `'` `` ` `` `=` `<` `>`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
 
 ### 嵌套元素
 
@@ -125,7 +126,8 @@ My cat is very grumpy
 
 可以试着为图像编写一些更好的 `alt` 文本。
 
-> **备注：** 更多信息请参阅 [无障碍访问](/zh-CN/docs/learn/Accessibility)。
+> [!NOTE]
+> 更多信息请参阅 [无障碍访问](/zh-CN/docs/learn/Accessibility)。
 
 ## 标记文本
 
@@ -144,7 +146,8 @@ My cat is very grumpy
 
 可以尝试在 {{htmlelement("img")}} 元素上面添加一个合适的标题。
 
-> **备注：** 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体，因为标题对于 [无障碍访问](/zh-CN/docs/learn/Accessibility) 和 [搜索引擎优化](/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#为什么我们需要结构化？) 等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
+> [!NOTE]
+> 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体，因为标题对于 [无障碍访问](/zh-CN/docs/learn/Accessibility) 和 [搜索引擎优化](/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#为什么我们需要结构化？) 等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
 
 ### 段落（Paragraph）
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md
index 779ee26cb1b8fd..d5a86089839159 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -39,7 +39,8 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software
 
 在继续之前，你应该至少安装两款这样的浏览器，并准备好进行测试。
 
-> **备注：** Internet Explorer 与一些现代网络功能不兼容，它可能无法运行你的项目。你通常不需要为你的 Web 项目与它兼容而操心，因为很少还有人在使用它——至少在你学习的时候不要太担心它。你可能会在以后遇到一个需要支持它的项目。
+> [!NOTE]
+> Internet Explorer 与一些现代网络功能不兼容，它可能无法运行你的项目。你通常不需要为你的 Web 项目与它兼容而操心，因为很少还有人在使用它——至少在你学习的时候不要太担心它。你可能会在以后遇到一个需要支持它的项目。
 
 ### 安装本地 Web 服务器
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.md b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.md
index 18afdd79ebf60b..785c8aa70a6d1d 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -31,7 +31,8 @@ JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心
 
 然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个“Hello world!”示例（[一切始于 Hello World](https://zh.wikipedia.org/wiki/Hello_World)）。
 
-> **警告：** 如果你没有完成之前的课程实践，可下载 [上一章节示例的压缩包](https://github.com/roy-tian/learning-area/raw/master/extras/getting-started-web/beginner-html-site-styled.zip) 并在本地解压作出发点。
+> [!WARNING]
+> 如果你没有完成之前的课程实践，可下载 [上一章节示例的压缩包](https://github.com/roy-tian/learning-area/raw/master/extras/getting-started-web/beginner-html-site-styled.zip) 并在本地解压作出发点。
 
 1. 首先，打开你的测试站点，创建一个名为 `scripts` 的文件夹。然后在其中创建一个名为 main.js 的文件。
 2. 下一步，在 `index.html` 文件\</body> 标签前的新行添加以下代码。
@@ -50,7 +51,8 @@ JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心
 
 5. 最后，保存 HTML 和 JavaScript 文件，用浏览器打开 `index.html`。可以看到如下内容：![](hello-world.png)
 
-> **备注：** 我们将 {{htmlelement("script")}} 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。
+> [!NOTE]
+> 我们将 {{htmlelement("script")}} 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。
 
 ### 发生了什么？
 
@@ -58,13 +60,15 @@ JavaScript 把页面的标题改成了“Hello world!” 。首先用 {{domxref(
 
 之后，把 `myHeading` 变量的属性 {{domxref("Node.textContent", "textContent")}} （标题内容）修改为“Hello world!” 。
 
-> **备注：** 上面用到的两个函数都来自 [文档对象模型 (DOM) API](/zh-CN/docs/Web/API/Document_Object_Model)，均用于控制文档。
+> [!NOTE]
+> 上面用到的两个函数都来自 [文档对象模型 (DOM) API](/zh-CN/docs/Web/API/Document_Object_Model)，均用于控制文档。
 
 ## JavaScript 快速入门
 
 我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。
 
-> **警告：** 学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。JavaScript 控制台的更多信息请查看 [浏览器开发者工具](/zh-CN/Learn/Discover_browser_developer_tools)。
+> [!WARNING]
+> 学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。JavaScript 控制台的更多信息请查看 [浏览器开发者工具](/zh-CN/Learn/Discover_browser_developer_tools)。
 
 ### 变量（Variable）
 
@@ -74,13 +78,17 @@ JavaScript 把页面的标题改成了“Hello world!” 。首先用 {{domxref(
 let myVariable;
 ```
 
-> **备注：** 行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。分号使用规则的更多细节请参阅 [JavaScript 分号使用指南](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/)（英文页面）。
+> [!NOTE]
+> 行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。分号使用规则的更多细节请参阅 [JavaScript 分号使用指南](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/)（英文页面）。
 
-> **备注：** 几乎任何内容都可以作为变量名，但还是有一些限制（请参阅 [变量命名规则](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_Types#变量)）。如果你不确定，还可以 [验证变量名](https://mothereff.in/js-variables) 是否有效。
+> [!NOTE]
+> 几乎任何内容都可以作为变量名，但还是有一些限制（请参阅 [变量命名规则](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_Types#变量)）。如果你不确定，还可以 [验证变量名](https://mothereff.in/js-variables) 是否有效。
 
-> **备注：** JavaScript 对大小写敏感，`myVariable` 和 `myvariable` 是不同的。如果代码出现问题了，先检查一下大小写！
+> [!NOTE]
+> JavaScript 对大小写敏感，`myVariable` 和 `myvariable` 是不同的。如果代码出现问题了，先检查一下大小写！
 
-> **备注：** 想要了解更多关于 `var` 和 `let` 的不同点，可以参阅 [var 与 let 的区别](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#var_与_let_的区别)。
+> [!NOTE]
+> 想要了解更多关于 `var` 和 `let` 的不同点，可以参阅 [var 与 let 的区别](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#var_与_let_的区别)。
 
 变量定义后可以进行赋值：
 
@@ -183,7 +191,8 @@ myVariable = '韩梅梅';
 
 {{Glossary("Operator","运算符")}} 是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符，可以在浏览器控制台里尝试一下后面的示例。
 
-> **备注：** 这里说“根据**两个**值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。
+> [!NOTE]
+> 这里说“根据**两个**值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。
 
 <table>
   <thead>
@@ -257,7 +266,8 @@ myVariable = '韩梅梅';
 
 运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅 [表达式和运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators)。
 
-> **备注：** 不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 `"35" + "25"`，为什么不能得到 `60`？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 `35 + 25` 才能得到正确结果。
+> [!NOTE]
+> 不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 `"35" + "25"`，为什么不能得到 `60`？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 `35 + 25` 才能得到正确结果。
 
 ### 条件语句
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md
index a6e744258d129f..af09b30e5f8b6c 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -62,11 +62,13 @@ slug: Learn/Getting_started_with_the_web/Publishing_your_website
 3. 在这个页面上，在 _Repository name_ 输入框里输入 _username_.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入 _bobsmith.github.io。同时勾选_ _Initialize this repository with a README_，然后点击 _Create repository_。![](github-create-repo.png)
 4. 然后，将你的网站文件夹里的内容拖拽到你的资源库 ( repository )，再点击 _Commit changes_。
 
-   > **备注：** 确保你的文件夹有一个 _index.html_ 文件。
+   > [!NOTE]
+   > 确保你的文件夹有一个 _index.html_ 文件。
 
 5. 现在将你的浏览器转到 _username_.github.io 来在线查看你的网站。比如，_如果用户名为 chrisdavidmills_, 请转到 [chrisdavidmills.github.io](http://chrisdavidmills.github.io/)。
 
-   > **备注：** 你的网站可能需要几分钟的时间才能投入使用。如果它不能立即工作，你可能需要等待几分钟，然后再试一次。
+   > [!NOTE]
+   > 你的网站可能需要几分钟的时间才能投入使用。如果它不能立即工作，你可能需要等待几分钟，然后再试一次。
 
 想要了解更多，请看 [GitHub Pages Help](https://help.github.com/categories/github-pages-basics/).
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index 0a7673dd2567a6..5c5d43c355b00d 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -17,7 +17,8 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 2. **基于所选主题要展示哪些信息**？写下标题和几段文字，再找个你想在网站上展示的图像。
 3. 背景颜色用什么，或者，用高级一点的话来说，**你的网站外观是什么样的**？使用哪种字体比较合适：正式的、卡通的、粗体还是瘦体？
 
-> **备注：** 复杂的网站需要更详细的指引，深入到颜色、字体、页面上元素的间距、适当的书写风格等等以及其他细节。这有时被称为设计指南、设计系统或品牌手册，可以在 [Firefox Photon 设计系统](https://design.firefox.com/photon/)中找到一个示例。
+> [!NOTE]
+> 复杂的网站需要更详细的指引，深入到颜色、字体、页面上元素的间距、适当的书写风格等等以及其他细节。这有时被称为设计指南、设计系统或品牌手册，可以在 [Firefox Photon 设计系统](https://design.firefox.com/photon/)中找到一个示例。
 
 ## 绘制草图
 
@@ -25,7 +26,8 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 
 ![画在纸上的一个粗略的网站草图](website-drawing-scan.png)
 
-> **备注：** 即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。
+> [!NOTE]
+> 即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。
 >
 > Web 团队通常包括一个平面设计师和一个{{Glossary("UX", "用户体验")}}（UX）设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验及与网站交互方面的问题。
 
@@ -65,7 +67,8 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 1. 在你的代码中添加一个引用，从 Google 服务器加载这个字体。
 2. 下载字体文件到你的系统内，自行挂载这个文件，并在你网站的代码中使用。
 
-> **备注：** 在你的网站使用从 Google 服务器加载的字体可能会违反欧盟的数据隐私规定 [GDPR](https://gdpr.eu/what-is-gdpr/)，因为加载字体时会暴露用户的 IP 地址。如果你遇到这种潜在风险，需要选择第二种方式。
+> [!NOTE]
+> 在你的网站使用从 Google 服务器加载的字体可能会违反欧盟的数据隐私规定 [GDPR](https://gdpr.eu/what-is-gdpr/)，因为加载字体时会暴露用户的 IP 地址。如果你遇到这种潜在风险，需要选择第二种方式。
 
 另一个选择是使用 [安全 Web 字体](https://web.mit.edu/jmorzins/www/fonts.html)，如 Arial、Times New Roman、Courier New。
 
diff --git a/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
index 1063517502cb55..dc9a388a753fd5 100644
--- a/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
+++ b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
@@ -28,7 +28,8 @@ slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
   </tbody>
 </table>
 
-> **警告：** 本文仅讨论客户端图像映射。不要使用服务器端图像映射，这需要用户拥有鼠标。
+> [!WARNING]
+> 本文仅讨论客户端图像映射。不要使用服务器端图像映射，这需要用户拥有鼠标。
 
 ## 图像映射和它的缺点
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 9a8c71243e7705..30d43971706219 100644
--- a/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -487,7 +487,8 @@ textarea.onkeyup = () => {
 
 {{EmbedLiveSample('缩略语示例', '100%', '150')}}
 
-> **备注：** 在之前版本的 html 中还包含对另一个元素 {{htmlelement("acronym")}} 的支持，但是它已经从 HTML spec 中移除，因为可以只使用 `<abbr>` 元素代表缩略语。不应再使用 `<acronym>`。
+> [!NOTE]
+> 在之前版本的 html 中还包含对另一个元素 {{htmlelement("acronym")}} 的支持，但是它已经从 HTML spec 中移除，因为可以只使用 `<abbr>` 元素代表缩略语。不应再使用 `<acronym>`。
 
 ### 主动学习：标记一个缩略语
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md
index bd513fb2c1f568..a1bfacffae8a16 100644
--- a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -24,7 +24,8 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 
 超链接是互联网提供的最令人兴奋的创新之一，它们从一开始就一直是互联网的一个特性，使互联网成为*互联的网络*。超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（{{glossary("URL")}}）。
 
-> **备注：** URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。
+> [!NOTE]
+> URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。
 
 以 BBC 的主页为例，里面就包含了非常多的链接，各自连到不同新闻、网站的其他地方（导航功能），或者登入/注册页面（用户工具）等等。
 
@@ -82,7 +83,8 @@ img {
 
 {{EmbedLiveSample('图片链接', '100%', 150)}}
 
-> **备注：** 你会在以后的文章中了解到更多如何在 Web 中使用图片的信息。
+> [!NOTE]
+> 你会在以后的文章中了解到更多如何在 Web 中使用图片的信息。
 
 ### 使用 title 属性添加支持信息
 
@@ -102,7 +104,8 @@ img {
 
 {{EmbedLiveSample('使用 title 属性添加支持信息', '100%', 150)}}
 
-> **备注：** 链接的标题仅当鼠标悬停在其上时才会显示，这意味着使用键盘来导航网页的人很难获取到标题信息。如果标题信息对于页面非常重要，你应该使用所有用户能都方便获取的方式来呈现，例如放在常规文本中。
+> [!NOTE]
+> 链接的标题仅当鼠标悬停在其上时才会显示，这意味着使用键盘来导航网页的人很难获取到标题信息。如果标题信息对于页面非常重要，你应该使用所有用户能都方便获取的方式来呈现，例如放在常规文本中。
 
 ### 主动学习：创建你自己的示例链接
 
@@ -146,7 +149,8 @@ URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件
   <p>点击打开<a href="../pdfs/project-brief.pdf">项目简介</a>。</p>
   ```
 
-> **备注：** 如果需要，你可以将这些功能的多个实例组合成复杂的 URL。例如 `../../../complex/path/to/my/file.html`。
+> [!NOTE]
+> 如果需要，你可以将这些功能的多个实例组合成复杂的 URL。例如 `../../../complex/path/to/my/file.html`。
 
 ### 文档片段
 
@@ -277,7 +281,8 @@ URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件
 
 ![简单的 HTML 导航菜单，包含主页、图片、项目、社交四个项目](navigation-example.png)
 
-> **备注：** 如果你卡住了，或者不确定是否正确，可以访问 [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/navigation-menu-marked-up) 目录，来查看正确的答案。
+> [!NOTE]
+> 如果你卡住了，或者不确定是否正确，可以访问 [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/navigation-menu-marked-up) 目录，来查看正确的答案。
 
 ## 电子邮件链接
 
@@ -306,7 +311,8 @@ URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件
 </a>
 ```
 
-> **备注：** 每个字段的值必须使用 URL 编码，即使用[百分号转义的](https://zh.wikipedia.org/wiki/百分号编码)非打印字符（不可见字符如制表符、换行符、分页符）和空格。同时注意使用问号（`?`）来分隔主 URL 与参数值，以及使用 & 符来分隔 `mailto:` URL 中的各个参数。这是标准的 URL 查询标记方法。阅读 [GET 方法](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data#get_方法)以了解哪种 URL 查询标记方法是更常用的。
+> [!NOTE]
+> 每个字段的值必须使用 URL 编码，即使用[百分号转义的](https://zh.wikipedia.org/wiki/百分号编码)非打印字符（不可见字符如制表符、换行符、分页符）和空格。同时注意使用问号（`?`）来分隔主 URL 与参数值，以及使用 & 符来分隔 `mailto:` URL 中的各个参数。这是标准的 URL 查询标记方法。阅读 [GET 方法](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data#get_方法)以了解哪种 URL 查询标记方法是更常用的。
 
 这里有一些其他的示例 `mailto` 链接：
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md
index 98fafb2bad07d4..e9c5b107543774 100644
--- a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md
@@ -55,7 +55,8 @@ HTML 并不像 Rust 那么难以理解，浏览器并不会将 HTML 编译成其
 
 HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。
 
-> **备注：** HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。如果 Web 以严格的风格起步，也许就不会像今天这样流行了。
+> [!NOTE]
+> HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。如果 Web 以严格的风格起步，也许就不会像今天这样流行了。
 
 ### 主动学习：研究宽容的代码风格
 
@@ -147,7 +148,8 @@ HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行
   来看一个示例：<a href="https://www.mozilla.org/>Mozilla 主页链接</a> ↩ </ul>↩ </body>↩</html>
   ```
 
-  > **备注：** 属性缺少结束引号会导致元素无法闭合。因为文档所有剩余部分（直到文档某处出现一个引号）都将被解析为属性的内容。
+  > [!NOTE]
+  > 属性缺少结束引号会导致元素无法闭合。因为文档所有剩余部分（直到文档某处出现一个引号）都将被解析为属性的内容。
 
 - Unclosed element `ul`（未闭合元素 `ul`）：这个意义不大，因为 {{htmlelement("ul")}} 已经正确闭合了。出现这个错误是因为 {{htmlelement("a")}} 元素没有右引号而没有闭合。
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md
index b8bd86fc546cec..5740c58c31fdeb 100644
--- a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -184,7 +184,8 @@ HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧
 
 这里不应使用 `<aside>`，因为它和主内容并没有必要的联系（你想在任何地方都能看到它）。甚至不能用 `<section>` ，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用 `<div>`，为满足无障碍使用特征，还应为购物车的标题设置一个可读标签。
 
-> **警告：** div 元素非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。
+> [!WARNING]
+> div 元素非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。
 
 ### 换行与水平分割线
 
@@ -239,7 +240,8 @@ HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧
 
 自己创造一个网站（什么网站呢？）并尝试执行上述步骤。
 
-> **备注：** 记得保存你的杰作，今后可能会用到哦。
+> [!NOTE]
+> 记得保存你的杰作，今后可能会用到哦。
 
 ## 小结
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
index 3214754a1bacc1..1f769fbb4216ab 100644
--- a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
@@ -42,7 +42,8 @@ My cat is very grumpy
 <p>My cat is very grumpy</p>
 ```
 
-> **备注：** HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 {{htmlelement("title")}} 可以写作 `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` 等，也都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。
+> [!NOTE]
+> HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 {{htmlelement("title")}} 可以写作 `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` 等，也都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。
 
 ## 剖析一个 HTML 元素
 
@@ -226,11 +227,14 @@ textarea.onkeyup = () => {
 
 {{ EmbedLiveSample('块级元素和内联元素', 700, 200, "", "") }}
 
-> **备注：** HTML5 重新定义了元素的类别：见[元素内容分类](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories)。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。
+> [!NOTE]
+> HTML5 重新定义了元素的类别：见[元素内容分类](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories)。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。
 
-> **备注：** 在这篇文章中提到的“块”和“内联”，不应该与 [CSS 盒子的类型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#块级盒子（block_box）_和_内联盒子（inline_box）)中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。
+> [!NOTE]
+> 在这篇文章中提到的“块”和“内联”，不应该与 [CSS 盒子的类型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#块级盒子（block_box）_和_内联盒子（inline_box）)中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。
 
-> **备注：** 你可以查阅包含了块级元素和内联元素列表的参考页面。参见[块级元素](/zh-CN/docs/Glossary/Block-level_content)和[内联元素](/zh-CN/docs/Glossary/Inline-level_content)页面。
+> [!NOTE]
+> 你可以查阅包含了块级元素和内联元素列表的参考页面。参见[块级元素](/zh-CN/docs/Glossary/Block-level_content)和[内联元素](/zh-CN/docs/Glossary/Inline-level_content)页面。
 
 ### 空元素
 
@@ -246,7 +250,8 @@ textarea.onkeyup = () => {
 
 {{ EmbedLiveSample('空元素', 700, 300, "", "") }}
 
-> **备注：** HTML 中，无需在一个空元素的标签末尾添加 `/`，例如 `<img src="images/cat.jpg" alt="cat" />`。然而，这也是一种有效的语法，当你希望你的 HTML 是有效的 XML 时，这么做也没问题。
+> [!NOTE]
+> HTML 中，无需在一个空元素的标签末尾添加 `/`，例如 `<img src="images/cat.jpg" alt="cat" />`。然而，这也是一种有效的语法，当你希望你的 HTML 是有效的 XML 时，这么做也没问题。
 
 ## 属性
 
@@ -529,7 +534,8 @@ textarea.onkeyup = () => {
 3. 粘贴代码到这个文件。
 4. 保存为 `index.html`。
 
-> **备注：** 可在 [MDN 学习区代码仓库](https://github.com/roy-tian/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) 上查看该示例。
+> [!NOTE]
+> 可在 [MDN 学习区代码仓库](https://github.com/roy-tian/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) 上查看该示例。
 
 你可以打开浏览器看看这段代码的效果是什么样的，然后改变代码刷新浏览器看看新的结果。最开始的代码是这样的效果：
 
@@ -724,7 +730,8 @@ textarea.onkeyup = () => {
 
 {{ EmbedLiveSample('实体引用：在 HTML 中包含特殊字符', 700, 200) }}
 
-> **备注：** 不需要为任何其他符号使用实体引用，因为只要你的 HTML 的[字符编码设置为 UTF-8](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding)，现代浏览器就能很好地处理实际符号。
+> [!NOTE]
+> 不需要为任何其他符号使用实体引用，因为只要你的 HTML 的[字符编码设置为 UTF-8](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding)，现代浏览器就能很好地处理实际符号。
 
 ## HTML 注释
 
@@ -748,7 +755,8 @@ HTML 拥有在代码中写注释的机制。浏览器会忽略注释，有效地
 
 在这里你应该可以理解 HTML 语言的全貌和基本的工作原理。你应该还学会了一些元素和属性的使用。在这个模块的后续文章中，我们会深入一些你已经见过的东西的细节，并且展示语言的一些其他概念。
 
-> **备注：** 当你开始学习更多的 HTML 知识时，可能也想了解一些层叠样式列表（[CSS](/zh-CN/docs/Learn/CSS)）的基础知识。CSS 是一种用来设计网页样式的语言（比如，用它改变字体、颜色或页面布局等）。你很快就会发现，HTML 和 CSS 能很好地协调配合。
+> [!NOTE]
+> 当你开始学习更多的 HTML 知识时，可能也想了解一些层叠样式列表（[CSS](/zh-CN/docs/Learn/CSS)）的基础知识。CSS 是一种用来设计网页样式的语言（比如，用它改变字体、颜色或页面布局等）。你很快就会发现，HTML 和 CSS 能很好地协调配合。
 
 ## 参见
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md
index ade178f78737b2..cd6b25a95cdc44 100644
--- a/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -1024,7 +1024,8 @@ HTML5 重新定义了 `<b>`、`<i>` 和 `<u>`，赋予了它们新的但有点
 - {{HTMLElement('b')}} 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
 - {{HTMLElement('u')}} 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
 
-> **备注：** 人们强烈地将下划线与超链接联系起来。因此，在网页中，最好只给链接加下划线。在语义上合适的时候使用 `<u>` 元素，但要考虑使用 CSS 将默认的下划线改为在网页中更合适的东西。下面的例子说明了如何做到这一点：
+> [!NOTE]
+> 人们强烈地将下划线与超链接联系起来。因此，在网页中，最好只给链接加下划线。在语义上合适的时候使用 `<u>` 元素，但要考虑使用 CSS 将默认的下划线改为在网页中更合适的东西。下面的例子说明了如何做到这一点：
 
 ```html
 <!-- 学名 -->
diff --git a/files/zh-cn/learn/html/introduction_to_html/index.md b/files/zh-cn/learn/html/introduction_to_html/index.md
index e9ce6b2f71e5a7..890c87b75a2735 100644
--- a/files/zh-cn/learn/html/introduction_to_html/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Introduction_to_HTML
 
 尽管你无需事先拥有任何 HTML 相关知识以学习该模块，你仍至少需要熟悉一些使用电脑的基础知识，并会被动地使用网络（也就是看着它，浏览内容）。你需要配置基础的开发环境（详细说明请参见[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)页面），并且懂得如何创建和管理文件（在[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)页面中有详细说明）——它们都是我们纯新手 [Web 开发入门](/zh-CN/docs/Learn/Getting_started_with_the_web)模块的一部分。
 
-> **备注：** 如果你正在一台你不能创建文件的设备上作业，那么你需要在在线编程工具上运行（大多数）代码示例，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 等。
+> [!NOTE]
+> 如果你正在一台你不能创建文件的设备上作业，那么你需要在在线编程工具上运行（大多数）代码示例，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 等。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md
index d7b85e8904a4e5..f3c8b87285f2f1 100644
--- a/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -24,7 +24,8 @@ slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
 
 开始测验之前，请先下载[信件的原始文本](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt)和 [CSS 代码](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/marking-up-a-letter-start/css.txt)。然后用文本编辑器（用 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/) 等在线编辑工具亦可）创建一个新的 `.html` 文件来进行测验。
 
-> **备注：** 如果你遇到了困难，请联系我们以寻求帮助——见本页面底部的[评估或进一步帮助](#评估或进一步帮助)。
+> [!NOTE]
+> 如果你遇到了困难，请联系我们以寻求帮助——见本页面底部的[评估或进一步帮助](#评估或进一步帮助)。
 
 ## 项目概要
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index a484f3b72dd446..4119bd5a5b4b27 100644
--- a/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -96,7 +96,8 @@ HTML 头部包含 HTML {{htmlelement("head")}} 元素的内容，与 {{htmleleme
 
 ![一个包含英文和日文字符的网页，字符编码设置为拉丁文。日语字符不能正确显示。](bad-encoding.png)
 
-> **备注：** 一些浏览器（比如 Chrome）会自动修正错误的编码，所以根据你所使用的浏览器不同，你或许不会看到这个问题。无论如何，你仍然应该为你的页面手动设置编码为 `utf-8`，来避免在其他浏览器中可能出现的问题。
+> [!NOTE]
+> 一些浏览器（比如 Chrome）会自动修正错误的编码，所以根据你所使用的浏览器不同，你或许不会看到这个问题。无论如何，你仍然应该为你的页面手动设置编码为 `utf-8`，来避免在其他浏览器中可能出现的问题。
 
 ### 主动学习：体验字符编码
 
@@ -149,9 +150,11 @@ description 也被使用在搜索引擎显示的结果页中。下面通过一
 
    ![“MDN Web Docs”的搜索结果](mdn-search-result.png)
 
-> **备注：** 在谷歌搜索里，在主页面链接下面，你将看到一些相关子页面——这些是站点链接，可以在 [Google's webmaster tools](https://search.google.com/search-console/about) 配置——这是一种可以使你的站点对搜索引擎更友好的方式。
+> [!NOTE]
+> 在谷歌搜索里，在主页面链接下面，你将看到一些相关子页面——这些是站点链接，可以在 [Google's webmaster tools](https://search.google.com/search-console/about) 配置——这是一种可以使你的站点对搜索引擎更友好的方式。
 
-> **备注：** 许多 `<meta>` 特性已经不再使用。例如，keyword `<meta>` 元素（`<meta name="keywords" content="fill, in, your, keywords, here">`，为搜索引擎提供关键词，用于确定该页面与不同搜索词的相关性）已经被搜索引擎忽略了，因为作弊者填充了大量关键词到 keyword，错误地引导搜索结果。
+> [!NOTE]
+> 许多 `<meta>` 特性已经不再使用。例如，keyword `<meta>` 元素（`<meta name="keywords" content="fill, in, your, keywords, here">`，为搜索引擎提供关键词，用于确定该页面与不同搜索词的相关性）已经被搜索引擎忽略了，因为作弊者填充了大量关键词到 keyword，错误地引导搜索结果。
 
 ### 其他类型的元数据
 
@@ -232,7 +235,8 @@ Twitter 还拥有自己的类型的专有元数据协议（称为 [Twitter Cards
 
 不用担心现在实现所有这些类型的图标——这是一个相当先进的功能，不要求你有这方面的知识来通过课程的进展。这里的主要目的是让你提前了解有这一样东西，以防当你浏览其他网站的源代码时不理解源代码的含义。
 
-> **备注：** 如果你的网站使用了内容安全策略（Content Security Policy，CSP）来增加安全性，这个策略会应用在 favicon 图标上。如果你遇到了图标没有被加载的问题，你需要确认 {{HTTPHeader("Content-Security-Policy")}} 响应头的 [`img-src` 指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) 没有阻止访问图标。
+> [!NOTE]
+> 如果你的网站使用了内容安全策略（Content Security Policy，CSP）来增加安全性，这个策略会应用在 favicon 图标上。如果你遇到了图标没有被加载的问题，你需要确认 {{HTTPHeader("Content-Security-Policy")}} 响应头的 [`img-src` 指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) 没有阻止访问图标。
 
 ## 在 HTML 中应用 CSS 和 JavaScript
 
@@ -265,7 +269,8 @@ Twitter 还拥有自己的类型的专有元数据协议（称为 [Twitter Cards
 - JavaScript 在页面中添加了一个空列表。现在当你点击列表中的任何地方，浏览器会弹出一个对话框要求你为新列表项输入一些文本内容。当你点击 OK 按钮，刚刚那个新的列表项会添加到页面上；当你点击那些已有的列表项，会弹出一个对话框允许你修改列表项的文本。
 - CSS 使页面背景变成了绿色，文本变得大了一点。它还将 JavaScript 添加到页面中的一些内容进行了样式化。（带有黑色边框的红色条是 CSS 添加到 JavaScript 生成的列表中的样式）
 
-> **备注：** 如果你卡在这个练习当中，无法正常应用 CSS 和 JavaScript，试着查看一下我们的 [css-and-js.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/css-and-js.html) 页面实例。
+> [!NOTE]
+> 如果你卡在这个练习当中，无法正常应用 CSS 和 JavaScript，试着查看一下我们的 [css-and-js.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/css-and-js.html) 页面实例。
 
 ## 为文档设定主语言
 
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index aa499f72948453..2b52c632cb0c7d 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -30,7 +30,8 @@ l10n:
   </tbody>
 </table>
 
-> **备注：** 本文的目的并不是教你 SVG；仅仅是告诉你它是什么，以及如何在 web 页面中添加它。
+> [!NOTE]
+> 本文的目的并不是教你 SVG；仅仅是告诉你它是什么，以及如何在 web 页面中添加它。
 
 ## 什么是矢量图形？
 
@@ -47,7 +48,8 @@ l10n:
 
 ![两个星星图像被放大，一个清晰而另一个模糊](raster-vector-zoomed.png)
 
-> **备注：** 上面的图片实际上都是 PNG 图片——每个例子中左边的星星图片代表位图，右边的星星图片代表矢量图。还有，请访问 [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) 示例来查看真正的例子！
+> [!NOTE]
+> 上面的图片实际上都是 PNG 图片——每个例子中左边的星星图片代表位图，右边的星星图片代表矢量图。还有，请访问 [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) 示例来查看真正的例子！
 
 此外，相较于同样的位图，矢量图形通常体积更小，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。
 
@@ -87,7 +89,8 @@ SVG 除了前面描述的以外还有其他优点：
 
 由于上述原因，像照片那样复杂精密的图像更适合使用位图。
 
-> **备注：** 在 Inkscape 中，可以将文件保存为纯 SVG 以节省空间。另请参阅[如何为 Web 准备 SVG](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html)。
+> [!NOTE]
+> 在 Inkscape 中，可以将文件保存为纯 SVG 以节省空间。另请参阅[如何为 Web 准备 SVG](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html)。
 
 ## 将 SVG 添加到页面
 
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md
index afb8de85c7f297..4eaf45067f5a81 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -43,7 +43,8 @@ l10n:
 
 ['alt' 属性的描述如下](#备选文本)。
 
-> **备注：** 为了更容易理解下面的内容，建议你阅读 [URL 和路径简明入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#统一资源定位符（url）与路径（path）快速入门)来复习一下相对和绝对 URL 的概念。
+> [!NOTE]
+> 为了更容易理解下面的内容，建议你阅读 [URL 和路径简明入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#统一资源定位符（url）与路径（path）快速入门)来复习一下相对和绝对 URL 的概念。
 
 例如，如果你的图像叫做 `dinosaur.jpg`，并且它位于与 HTML 页面相同的目录中，你可以这样嵌入图像：
 
@@ -59,7 +60,8 @@ l10n:
 
 以此类推。
 
-> **备注：** 搜索引擎还会读取图像文件名并将其计入 SEO。因此，你应该为图像起一个描述性的文件名；`dinosaur.jpg` 比 `img835.png` 更好。
+> [!NOTE]
+> 搜索引擎还会读取图像文件名并将其计入 SEO。因此，你应该为图像起一个描述性的文件名；`dinosaur.jpg` 比 `img835.png` 更好。
 
 你也可以使用图像的绝对 URL 进行嵌入，例如：
 
@@ -77,9 +79,11 @@ l10n:
 
 ![一个嵌入到浏览器中的恐龙基本图像，上面写着“Images in HTML”](basic-image.png)
 
-> **备注：** 像 {{htmlelement("img")}} 和 {{htmlelement("video")}} 这样的元素有时被称为**替换元素（replaced elements）**。这是因为元素的内容和大小由外部资源（如图像或视频文件）定义，而不是由元素本身的内容定义。你可以在[替换元素](/zh-CN/docs/Web/CSS/Replaced_element)中了解更多相关信息。
+> [!NOTE]
+> 像 {{htmlelement("img")}} 和 {{htmlelement("video")}} 这样的元素有时被称为**替换元素（replaced elements）**。这是因为元素的内容和大小由外部资源（如图像或视频文件）定义，而不是由元素本身的内容定义。你可以在[替换元素](/zh-CN/docs/Web/CSS/Replaced_element)中了解更多相关信息。
 
-> **备注：** 你也可以在 [GitHub](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) 仓库中找到本节的完整示例（请参阅[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/images-in-html/index.html)）。
+> [!NOTE]
+> 你也可以在 [GitHub](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) 仓库中找到本节的完整示例（请参阅[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/images-in-html/index.html)）。
 
 ### 备选文本
 
@@ -113,7 +117,8 @@ l10n:
 
 本质上，关键在于即使图片无法被看见，也能提供可用的体验，这确保了所有人都不会错失某部分内容。尝试在浏览器中使图片不可见然后看看网页变成什么样了，你会很快意识到在图片无法显示时备选文本能帮上多大忙。
 
-> **备注：** 如需了解更多信息，请参阅我们的[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)指南。
+> [!NOTE]
+> 如需了解更多信息，请参阅我们的[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)指南。
 
 ### 宽度和高度
 
@@ -172,7 +177,8 @@ l10n:
 
 [设置图像的高度和宽度再次变得重要](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)是关于该特性的历史的一篇优秀文章。
 
-> **备注：** 虽然如我们所说，使用 HTML 属性来指定图片的*实际*大小是一个好的实践，但你不应该使用它们来*调整*图片的大小。
+> [!NOTE]
+> 虽然如我们所说，使用 HTML 属性来指定图片的*实际*大小是一个好的实践，但你不应该使用它们来*调整*图片的大小。
 >
 > 如果设置的图片大小过大，你的图片将看起来粗糙、模糊或太小，不仅浪费带宽而且图片还不符合用户需求。如果[长宽比](<https://zh.wikipedia.org/wiki/長寬比_(影像)>)不正确，图片也可能会变形。在将图片放到网页上之前，你应使用图像编辑器将其设置为正确的大小。
 >
@@ -377,7 +383,8 @@ textarea.onkeyup = function () {
 
 你应该查阅适用的许可证以了解你需要遵循的具体条款。
 
-> **备注：** 你可能会在自由许可的上下文中遇到“copyleft”一词。Copyleft 许可（例如 [GNU 通用公共许可证（GPL）](https://www.gnu.org/licenses/gpl-3.0.en.html) 或“相同方式共享”创作共用许可证）规定派生作品需要按照原始许可证发布。
+> [!NOTE]
+> 你可能会在自由许可的上下文中遇到“copyleft”一词。Copyleft 许可（例如 [GNU 通用公共许可证（GPL）](https://www.gnu.org/licenses/gpl-3.0.en.html) 或“相同方式共享”创作共用许可证）规定派生作品需要按照原始许可证发布。
 
 Copyleft 许可在软件界中很常见。其基本思想是使用 copyleft 许可的代码构建的新项目（这被称为原始软件的“分支”）也需要根据相同的 copyleft 许可进行许可。这确保新项目的源代码也可供他人学习和修改。请注意，一般来说，为软件起草的许可证（例如 GPL）并不适合非软件作品，因为它们并不考虑非软件作品。
 
@@ -441,7 +448,8 @@ Copyleft 许可在软件界中很常见。其基本思想是使用 copyleft 许
 
 {{htmlelement("figcaption")}} 元素告诉浏览器和辅助技术工具，这段说明文字描述了 {{htmlelement("figure")}} 元素的内容。
 
-> **备注：** 从无障碍的角度来说，说明文字和 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 文字只有在图片无法显示时才会发挥作用。所以，说明文字和 `alt` 的内容不应该一样，因为当图片无法显示时，它们会同时出现。尝试不让你的图片显示，看看效果如何。
+> [!NOTE]
+> 从无障碍的角度来说，说明文字和 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 文字只有在图片无法显示时才会发挥作用。所以，说明文字和 `alt` 的内容不应该一样，因为当图片无法显示时，它们会同时出现。尝试不让你的图片显示，看看效果如何。
 
 figure 里不一定要是图片，只要是这样的独立内容单元即可：
 
@@ -601,7 +609,8 @@ p {
 
 总而言之，如果图像对你的内容有意义，则应使用 HTML 图像。如果图像纯粹是装饰，则应使用 CSS 背景图片。
 
-> **备注：** 你可以在 [CSS](/zh-CN/docs/Learn/CSS) 模块里学到更多关于 [CSS 背景图片](/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)的知识。
+> [!NOTE]
+> 你可以在 [CSS](/zh-CN/docs/Learn/CSS) 模块里学到更多关于 [CSS 背景图片](/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)的知识。
 
 ## 网页上的其他图形
 
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/index.md
index f4cdfca864c418..d60f2dd32826d5 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/index.md
@@ -13,7 +13,8 @@ l10n:
 
 在你开始本模块之前，你应该已经掌握了 HTML 的基础知识，也就是之前在 [HTML 简介](/zh-CN/docs/learn/HTML/Introduction_to_HTML)中所述内容。如果你还没有看过那个模块（或者类似的），先去看看，然后再回来吧！
 
-> **备注：** 如果你使用的是电脑/平板/其他设备，没有办法创建自己的文件，你可以在线上编程平台上尝试（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 如果你使用的是电脑/平板/其他设备，没有办法创建自己的文件，你可以在线上编程平台上尝试（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index 88994061ce3b94..266c7bdb0e70ad 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -34,7 +34,8 @@ l10n:
 
 或者，你可以使用在线编辑器，如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/)。
 
-> **备注：** 示例 HTML 文件包含大量 CSS，用于为页面设置样式。你不需要修改 CSS，只需修改 {{htmlelement("body")}} 元素内的 HTML 即可。只要插入正确的标记，样式就会使其显示正确。
+> [!NOTE]
+> 示例 HTML 文件包含大量 CSS，用于为页面设置样式。你不需要修改 CSS，只需修改 {{htmlelement("body")}} 元素内的 HTML 即可。只要插入正确的标记，样式就会使其显示正确。
 >
 > 如果你遇到困难，可以在我们的[沟通渠道](/zh-CN/docs/MDN/Community/Communication_channels)中联系我们。
 
@@ -56,7 +57,8 @@ l10n:
 
 接下来，创建一个宽度为 1200 像素的横向版 `red-panda.jpg`，以及一个宽度为 600 像素的纵向版，展示更近距离的熊猫照片。再次，给它们取一个合理的名称，以便你能够轻松识别它们。你应将这两张图片的副本保存在与 `index.html` 相同的目录中。
 
-> **备注：** 你应该优化你的 JPG 和 PNG 图像，使它们尽可能小，同时保持良好的质量。[tinypng.com](https://tinypng.com/) 是一个很好的在线服务，可以轻松完成这项工作。
+> [!NOTE]
+> 你应该优化你的 JPG 和 PNG 图像，使它们尽可能小，同时保持良好的质量。[tinypng.com](https://tinypng.com/) 是一个很好的在线服务，可以轻松完成这项工作。
 
 ### 为 header 添加一个图标
 
@@ -74,7 +76,8 @@ l10n:
 
 确保每个链接匹配了正确的图片！
 
-> **备注：** 为了正确地测试 `srcset`/`sizes` 示例，你需要把你的网站上传到服务器（使用 [Github pages](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) 是一个简单免费的方法），之后你就可以使用浏览器开发者工具（如 Firefox [网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)）来测试它们是否正常工作。
+> [!NOTE]
+> 为了正确地测试 `srcset`/`sizes` 示例，你需要把你的网站上传到服务器（使用 [Github pages](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) 是一个简单免费的方法），之后你就可以使用浏览器开发者工具（如 Firefox [网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)）来测试它们是否正常工作。
 
 ### 一张美术设计后的小熊猫照片
 
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 0b2e119f8819f7..ee6b90418548e6 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -47,7 +47,8 @@ l10n:
 
 ## 动手练习：典型嵌入的使用
 
-> **备注：** 考虑到中国大陆学习者可能无法访问英文原文的某些示例网站，下文的部分示例已经替换为更易于访问和实践的网站。
+> [!NOTE]
+> 考虑到中国大陆学习者可能无法访问英文原文的某些示例网站，下文的部分示例已经替换为更易于访问和实践的网站。
 
 在这篇文章中，我们将直接进入动手练习部分，让你立即体会到嵌入技术的实用性。大家都非常熟悉 [Bilibili](https://www.bilibili.com/)，但很多人不了解它所提供的一些分享功能。让我们来看看如何借助 {{htmlelement("iframe")}}，将 Bilibili 上的视频嵌入到页面中。
 
@@ -244,7 +245,8 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X
 - [`sandbox`](/zh-CN/docs/Web/HTML/Element/iframe#sandbox)
   - : 该属性比起支持其他 `<iframe>` 特性，需要更新的浏览器才能工作（例如 IE 10 及更高版本），该属性可以提高安全性设置；我们将在下一节中更加详细地谈到。
 
-> **备注：** 要想提高速度，最好在主内容完成加载后，再使用 JavaScript 设置 iframe 的 `src` 属性。这使你的页面可以更快可用，并减少你的官方页面加载时间（它是一个重要的 {{glossary("SEO")}} 指标）。
+> [!NOTE]
+> 要想提高速度，最好在主内容完成加载后，再使用 JavaScript 设置 iframe 的 `src` 属性。这使你的页面可以更快可用，并减少你的官方页面加载时间（它是一个重要的 {{glossary("SEO")}} 指标）。
 
 ### 安全隐患
 
@@ -283,13 +285,15 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X
 
 如果绝对需要某些权限，你可以（在 `sandbox=""` 属性值内）逐个添加它们——请参阅 [`sandbox`](/zh-CN/docs/Web/HTML/Element/iframe#sandbox) 所有可用选项的参考条目。其中重要的一点是，你*永远不*应该同时添加 `allow-scripts` 和 `allow-same-origin` 到你的 `sandbox` 属性中——在这种情况下，嵌入的内容可以绕过阻止站点执行脚本的[同源安全策略](/zh-CN/docs/Glossary/Same-origin_policy)，并使用 JavaScript 完全关闭沙盒。
 
-> **备注：** 如果攻击者可以欺骗人们直接访问恶意内容（在 `iframe` 之外），则沙盒无法提供保护。如果某些内容可能是恶意的（例如，用户生成的内容），请保证其是从不同的{{glossary("domain", "域")}}向你的主站点提供的。
+> [!NOTE]
+> 如果攻击者可以欺骗人们直接访问恶意内容（在 `iframe` 之外），则沙盒无法提供保护。如果某些内容可能是恶意的（例如，用户生成的内容），请保证其是从不同的{{glossary("domain", "域")}}向你的主站点提供的。
 
 #### 配置 CSP 指令
 
 {{Glossary("CSP")}} 全称是[**内容安全策略**](/zh-CN/docs/Web/HTTP/CSP)，它提供了[一组 HTTP 标头](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)（访问 web 服务器时与网页一起发送的元数据），旨在提高 HTML 文档的安全性。在 `<iframe>` 的安全性方面，你可以[_配置服务器发送适当的 `X-Frame-Options` 标头_](/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options)。这样可以防止其他网站在其网页中嵌入你的内容（这将导致[点击劫持](https://zh.wikipedia.org/wiki/点击劫持)和一系列其他攻击），正如我们之前看到的那样，MDN 的开发人员已经做了这些工作。
 
-> **备注：** 你可以阅读 Frederik Braun 的帖子[论 X-Frame-Options 安全性标头](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/)来获取有关此主题的更多背景信息。显然，其已经超出了本文所解释内容的范围。
+> [!NOTE]
+> 你可以阅读 Frederik Braun 的帖子[论 X-Frame-Options 安全性标头](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/)来获取有关此主题的更多背景信息。显然，其已经超出了本文所解释内容的范围。
 
 ## \<embed> 和 \<object> 元素
 
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
index f0a33b5e6954c7..2e8ef4f9607f27 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -53,7 +53,8 @@ l10n:
 
 web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至中期，人们仅仅可以通过笔记本电脑和台式机来浏览 web 页面，所以浏览器开发者和规范制定者甚至没有想到要实现这种解决方式（响应式开发）。最近应用的*响应式图片技术*，通过为浏览器提供多个图像文件来解决上述问题，比如使用相同显示效果的图片但包含多个不同的分辨率（_分辨率切换_），或者使用不同的图片以适应不同的空间分配（_美术设计_）。
 
-> **备注：** 在本文中讨论的新特性——[`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset)/[`sizes`](/zh-CN/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}}——都已经为新版本的现代浏览器和移动浏览器所支持。
+> [!NOTE]
+> 在本文中讨论的新特性——[`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset)/[`sizes`](/zh-CN/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}}——都已经为新版本的现代浏览器和移动浏览器所支持。
 
 ## 如何创建响应式图片？
 
@@ -100,7 +101,8 @@ web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至
 2. 一个空格
 3. 当媒体条件为真时，图像将填充的**插槽的宽度**（`480px`）
 
-> **备注：** 对于插槽的宽度，你可以不提供绝对宽度（如 `480px`），而是提供相对于视口的宽度（如 `50vw`），但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的（当没有任何一个媒体条件为真时，它默认生效）。在浏览器成功匹配某一个媒体条件之后，剩下所有的条件都会被忽略，所以要注意媒体条件的顺序。
+> [!NOTE]
+> 对于插槽的宽度，你可以不提供绝对宽度（如 `480px`），而是提供相对于视口的宽度（如 `50vw`），但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的（当没有任何一个媒体条件为真时，它默认生效）。在浏览器成功匹配某一个媒体条件之后，剩下所有的条件都会被忽略，所以要注意媒体条件的顺序。
 
 有了这些属性后，浏览器会：
 
@@ -111,13 +113,15 @@ web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至
 
 就是这样！所以在这里，如果支持响应式图片的浏览器以 480px 的视口来加载页面，那么 `(max-width: 600px)` 的媒体条件为真，因此 `480px` 的插槽会被选择，继而将加载 `elva-fairy-480w.jpg`，因为该图片的固有宽度（`480w`）最接近于插槽宽度。800px 的照片大小为 128KB，而 480px 版本仅有 63KB 大小——节省了 65KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。
 
-> **备注：** 在桌面端浏览器测试上面的示例时，如果你把浏览器设到最小宽度，却没有加载更小的图片，请检查一下此时的视口是什么（你可以打开浏览器的 JavaScript 控制台，输入 `document.querySelector('html').clientWidth` 来获得近似视口宽度）。不同的浏览器设置了窗口可以缩小到的最小宽度，它可能比你想的更宽一点。使用移动端浏览器测试时，可以使用类似 Firefox 的 `about:debugging` 页这样的工具，使用桌面端开发者工具检查在移动端加载的页面。
+> [!NOTE]
+> 在桌面端浏览器测试上面的示例时，如果你把浏览器设到最小宽度，却没有加载更小的图片，请检查一下此时的视口是什么（你可以打开浏览器的 JavaScript 控制台，输入 `document.querySelector('html').clientWidth` 来获得近似视口宽度）。不同的浏览器设置了窗口可以缩小到的最小宽度，它可能比你想的更宽一点。使用移动端浏览器测试时，可以使用类似 Firefox 的 `about:debugging` 页这样的工具，使用桌面端开发者工具检查在移动端加载的页面。
 >
 > 要查看加载了哪些图像，你可以使用 Firefox 开发者工具的[网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)标签或 Chrome 开发者工具的[网络](https://developer.chrome.com/docs/devtools/network/)面板。对于 Chrome 浏览器，你可能还需要[禁用缓存](https://stackoverflow.com/a/7000899/13725861)，以防止它选取已下载的图片。
 
 不支持这些特性的旧版本浏览器，会忽略这些属性，它们直接越过并按常规加载 [`src`](/zh-CN/docs/Web/HTML/Element/img#src) 属性引用的图像文件。
 
-> **备注：** 在上面链接的示例的 {{htmlelement("head")}} 中，有一行代码 `<meta name="viewport" content="width=device-width">`：这行代码会强制让手机浏览器采用它们真实可视窗口的宽度来加载网页（有些手机浏览器会提供不真实的可视窗口宽度，用比真实视口更大的宽度加载网页，然后再缩小加载的页面，这样的做法会使得响应式图片或其他响应式设计失效）。
+> [!NOTE]
+> 在上面链接的示例的 {{htmlelement("head")}} 中，有一行代码 `<meta name="viewport" content="width=device-width">`：这行代码会强制让手机浏览器采用它们真实可视窗口的宽度来加载网页（有些手机浏览器会提供不真实的可视窗口宽度，用比真实视口更大的宽度加载网页，然后再缩小加载的页面，这样的做法会使得响应式图片或其他响应式设计失效）。
 
 ### 分辨率切换：相同的尺寸，不同的分辨率
 
@@ -172,7 +176,8 @@ img {
 
 ![在窄屏幕上浏览我们的示例网站，picture 元素将第一张图片切换为细节的肖像特写，使其在窄屏幕上更加实用](picture-element-narrow.png)
 
-> **备注：** 你应该仅仅当在需要美术设计的场景中使用 `media` 属性；如果你使用 `media`，不要也在 `sizes` 属性中提供媒体条件。
+> [!NOTE]
+> 你应该仅仅当在需要美术设计的场景中使用 `media` 属性；如果你使用 `media`，不要也在 `sizes` 属性中提供媒体条件。
 
 ### 为什么我们不用 CSS 或 JavaScript 来实现？
 
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 4155e26a2a52ec..8022a3069057e3 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -44,7 +44,8 @@ l10n:
 
 我们不会教你如何制作音频和视频，因为那需要完全不同的技术。如果你没有音频和视频的话，也没有关系，我们为你提供了[示例音频和视频文件以及示例代码](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/video-and-audio-content)供你实验。
 
-> **备注：** 在开始之前，你应当了解一些在线视频提供商，例如 [YouTube](https://www.youtube.com/) 、[Dailymotion](http://www.dailymotion.com) 、[Vimeo](https://vimeo.com/) 还有 [Bilibili](https://www.bilibili.com)，以及在线音频提供商，例如 [Soundcloud](https://soundcloud.com/)。这些公司可以让你以方便、简单的方式来托管和消费视频，所以你不必担心庞大的带宽消耗。在线视频提供商甚至提供现成的代码用于为你的 web 网页嵌入视频/音频。如果你使用这样的服务，你便可以避免在这篇文章中我们讨论的一些难题。在下一篇文章中，我们将会再讨论这样的服务。
+> [!NOTE]
+> 在开始之前，你应当了解一些在线视频提供商，例如 [YouTube](https://www.youtube.com/) 、[Dailymotion](http://www.dailymotion.com) 、[Vimeo](https://vimeo.com/) 还有 [Bilibili](https://www.bilibili.com)，以及在线音频提供商，例如 [Soundcloud](https://soundcloud.com/)。这些公司可以让你以方便、简单的方式来托管和消费视频，所以你不必担心庞大的带宽消耗。在线视频提供商甚至提供现成的代码用于为你的 web 网页嵌入视频/音频。如果你使用这样的服务，你便可以避免在这篇文章中我们讨论的一些难题。在下一篇文章中，我们将会再讨论这样的服务。
 
 ### \<video> 元素
 
@@ -101,7 +102,8 @@ l10n:
 
 #### 浏览器所支持的媒体文件
 
-> **备注：** 一些流行的格式，如 MP3 和 MP4/H.264，尽管非常出色，但它们受到专利的限制；也就是说，有一些专利涵盖了它们所基于的某些或全部技术。在美国，MP3 直到 2017 年都受到专利保护，而 H.264 至少到 2027 年仍受专利保护。
+> [!NOTE]
+> 一些流行的格式，如 MP3 和 MP4/H.264，尽管非常出色，但它们受到专利的限制；也就是说，有一些专利涵盖了它们所基于的某些或全部技术。在美国，MP3 直到 2017 年都受到专利保护，而 H.264 至少到 2027 年仍受专利保护。
 >
 > 由于这些专利，浏览器如果希望实现对这些编解码器的支持，通常必须支付巨额的许可费用。此外，一些人更倾向于避免使用受限制的软件，而只使用开放格式。由于这些法律和偏好原因，web 开发者往往不得不支持多种格式以满足他们的整个用户群。
 
@@ -191,7 +193,8 @@ l10n:
 
 ![简单的音频播放器，带有播放按钮、计时器、音量控制和进度条](audio-player.png)
 
-> **备注：** 你可以在 GitHub [运行音频示例](https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)（也可以查看[音频播放器源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)）。
+> [!NOTE]
+> 你可以在 GitHub [运行音频示例](https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)（也可以查看[音频播放器源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)）。
 
 因为音频播放器没有视觉部件，它所占用的空间比视频播放器要小（你只需要显示出能控制音频播放的控件）。其他一些 HTML `<audio>` 与 `<video>` 的差异如下：
 
@@ -211,7 +214,8 @@ l10n:
 
 为这些人提供音频/视频中话语的文字记录，将会对他们有很大的帮助。幸运的是，借助 HTML 视频，我们可以做到这一点。我们只需使用 [WebVTT](/zh-CN/docs/Web/API/WebVTT_API) 文件格式和 {{htmlelement("track")}} 元素即可。
 
-> **备注：** “转录（transcribe）”是指将视频/音频中说的话记录成文字形式，转录的结果称为“文字记录（transcript）”。
+> [!NOTE]
+> “转录（transcribe）”是指将视频/音频中说的话记录成文字形式，转录的结果称为“文字记录（transcript）”。
 
 WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息（尽管有限制）。这些字符串叫做 **cue** ，你可以根据不同的需求来显示不同类型的 cue，最常见的如下：
 
@@ -259,7 +263,8 @@ WEBVTT
 
 如果你想了解更多细节，你可以阅读[为 HTML 视频添加标题和字幕](/zh-CN/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)。在 Github 上你可以找到[与本文相关的样例](https://iandevlin.github.io/mdn/video-player-with-captions/)，它们由 Ian Devlin 编写（或者[查看源代码](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)）。这个样例使用了 JavaScript 代码，用户借此可以选择不同的字幕。注意，若想要显示字幕，你需要点击“CC”按钮，并且选择某个选项（English、Deutsch 或 Español）。
 
-> **备注：** 文本轨道还可以帮助你进行 {{glossary("SEO")}}，因为搜索引擎对文字特别感兴趣。搜索引擎甚至可以借助文本轨道直接链接到视频中的某个位置。
+> [!NOTE]
+> 文本轨道还可以帮助你进行 {{glossary("SEO")}}，因为搜索引擎对文字特别感兴趣。搜索引擎甚至可以借助文本轨道直接链接到视频中的某个位置。
 
 ## 主动练习：嵌入你自己的视频与音频
 
diff --git a/files/zh-cn/learn/html/tables/advanced/index.md b/files/zh-cn/learn/html/tables/advanced/index.md
index 37c0af441cebec..4d891d8319d060 100644
--- a/files/zh-cn/learn/html/tables/advanced/index.md
+++ b/files/zh-cn/learn/html/tables/advanced/index.md
@@ -53,7 +53,8 @@ slug: Learn/HTML/Tables/Advanced
 2. 为表格添加一个合适的标题。
 3. 保存你的代码，然后用浏览器打开，看看你的表格是什么样的。
 
-> **备注：** 你也可以在 GitHub 上找到我们的版本 [timetable-caption.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/timetable-caption.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)）。
+> [!NOTE]
+> 你也可以在 GitHub 上找到我们的版本 [timetable-caption.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/timetable-caption.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)）。
 
 ## 添加 \<thead>、\<tfoot> 和 \<tbody> 结构
 
@@ -92,7 +93,8 @@ slug: Learn/HTML/Tables/Advanced
 
 7. 先保存，再刷新，然后观察一下结果。如果没有 `<tbody>` 和 `<tfoot>` 元素，你也许会写更加复杂的选择器或规则来应用同样的样式。
 
-> **备注：** 我们并不期望你现在就能完全理解 CSS。在你阅读我们的 CSS 模块时，你会学到更多这方面的知识（[CSS 介绍](/zh-CN/docs/Learn/CSS/First_steps)是一个好的起点；文章[样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)也专门讲述了如何对表格添加样式）。
+> [!NOTE]
+> 我们并不期望你现在就能完全理解 CSS。在你阅读我们的 CSS 模块时，你会学到更多这方面的知识（[CSS 介绍](/zh-CN/docs/Learn/CSS/First_steps)是一个好的起点；文章[样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)也专门讲述了如何对表格添加样式）。
 
 你完成的表格应该如下所示：
 
@@ -207,7 +209,8 @@ slug: Learn/HTML/Tables/Advanced
 
 {{ EmbedLiveSample('动手练习：添加表格结构', '100%', 300) }}
 
-> **备注：** 你也可以在 GitHub 上找到 [spending-record-finished.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record-finished.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)）。
+> [!NOTE]
+> 你也可以在 GitHub 上找到 [spending-record-finished.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record-finished.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)）。
 
 ## 嵌套表格
 
@@ -329,7 +332,8 @@ th {
 
 但假设你无法通过视觉关联这些数据呢？那么你应该如何阅读上述的表格？视力受损的用户经常使用一个屏幕阅读设备来为他们读出网页上的信息。对于盲人来说，阅读简单的文字没有什么问题，但是要理解一张表格的内容，这就有一些难度了。然而，通过适当的标记，我们可以用程序化的关联来取代视觉关联。
 
-> **备注：** 根据[世界卫生组织 2017 年的数据](http://www.who.int/zh/news-room/fact-sheets/detail/blindness-and-visual-impairment)，大约有 2.53 亿人患有视觉障碍。
+> [!NOTE]
+> 根据[世界卫生组织 2017 年的数据](http://www.who.int/zh/news-room/fact-sheets/detail/blindness-and-visual-impairment)，大约有 2.53 亿人患有视觉障碍。
 
 本篇文章提供了更一步的技术来使表格的无障碍性尽可能地提高。
 
@@ -405,7 +409,8 @@ th {
 </tbody>
 ```
 
-> **备注：** 这种方法在标题和数据单元格之间建立了非常精确的关联，但是它使用了**非常多**的标记，而且没有留下任何错误的空间。对于大多数表格来说，`scope` 方法通常就足够了。
+> [!NOTE]
+> 这种方法在标题和数据单元格之间建立了非常精确的关联，但是它使用了**非常多**的标记，而且没有留下任何错误的空间。对于大多数表格来说，`scope` 方法通常就足够了。
 
 ### 动手练习：使用 scope 和 headers
 
@@ -413,7 +418,8 @@ th {
 2. 现在尝试添加适当的 `scope` 属性来让表格变得更加恰当。
 3. 最后，尝试把未添加 `scope` 属性的源文件再复制一份。这次使用 `id` 和 `headers` 属性让表格变得更加恰当。
 
-> **备注：** 你可以根据我们完成的例子检查你的工作，请看 [items-sold-scope.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-scope.html) ([also see this live](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) 和 [items-sold-headers.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-headers.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)）。
+> [!NOTE]
+> 你可以根据我们完成的例子检查你的工作，请看 [items-sold-scope.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-scope.html) ([also see this live](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) 和 [items-sold-headers.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold-headers.html)（[查看在线运行版本](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)）。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/html/tables/basics/index.md b/files/zh-cn/learn/html/tables/basics/index.md
index 8d5aa4759785bf..26546d3d0220c0 100644
--- a/files/zh-cn/learn/html/tables/basics/index.md
+++ b/files/zh-cn/learn/html/tables/basics/index.md
@@ -105,7 +105,8 @@ slug: Learn/HTML/Tables/Basics
 
 虽然在这个模块中我们不会专注于 CSS，但是我们提供了一个较小的 CSS 样式表让你使用，和默认的没有采用任何 CSS 样式的表相比，表格会更加可读。你可以在[这里](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css)获取样式表，以及在 [HTML template](https://github.com/mdn/learning-area/blob/main/html/tables/basic/blank-template.html) 获取 HTML 文件来应用样式表，这些会让你在“测试 HTML 表格”中有一个好的起点。
 
-> **备注：** 也可以看下 [personal_pronouns table with this styling applied](http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html) 这个版本，这个是应用了 CSS 以后表格看上去的样子。
+> [!NOTE]
+> 也可以看下 [personal_pronouns table with this styling applied](http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html) 这个版本，这个是应用了 CSS 以后表格看上去的样子。
 
 ### 什么时候你不应该使用 HTML 表格？
 
@@ -190,7 +191,8 @@ th {
 
 {{EmbedLiveSample("结果")}}
 
-> **备注：** 你也可以在 GitHub 中查看 [simple-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/simple-table.html) ([也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
+> [!NOTE]
+> 你也可以在 GitHub 中查看 [simple-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/simple-table.html) ([也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
 
 ## 使用 \<th> 元素添加标题
 
@@ -250,13 +252,15 @@ th {
 2. 为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用 **[`<th>`](/zh-CN/docs/Web/HTML/Element/th)** 元素（其中 'th' 代表 'table header'），用法和 `<td>`是一样的，除了它表示为标题，不是普通的单元格以外。进入你的 HTML 文件，将表格中应该是标题的 `<td>` 元素标记的内容，都改为用 `<th>` 元素标记。
 3. 保存你的 HTML 文件，然后在浏览器中加载，然后你应该会看到，现在的标题更像标题了。
 
-> **备注：** 你可以在 GitHub 中找到完成的版本 [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table-fixed.html) ([也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html))。
+> [!NOTE]
+> 你可以在 GitHub 中找到完成的版本 [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table-fixed.html) ([也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html))。
 
 ### 为什么标题是有用的？
 
 我们已经给出了部分答案，当标题明显突出的时候，你可以更加简单地找到你想找的数据，设计上也会看起来更好。
 
-> **备注：** 即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示。
+> [!NOTE]
+> 即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示。
 
 表格标题也有额外的好处，随着 `scope` 属性 (我们将在下一篇文章中了解到)，这个属性允许你让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联。屏幕阅读设备能一次读出一列或一行的数据，这是非常有帮助的。
 
@@ -318,7 +322,8 @@ th {
 3. 最后，使用 `rowspan` 让 "Horse" 和 "Chicken" 占 2 个单元格的高度。
 4. 保存后，用浏览器打开你写的 HTML 文件，看看改进的地方。
 
-> **备注：** 你也可以在 GitHub 上找到完成的版本 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
+> [!NOTE]
+> 你也可以在 GitHub 上找到完成的版本 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
 
 ## 为表格中的列提供共同的样式
 
diff --git a/files/zh-cn/learn/html/tables/index.md b/files/zh-cn/learn/html/tables/index.md
index d731a59b5fc549..9c110ba3fbefa4 100644
--- a/files/zh-cn/learn/html/tables/index.md
+++ b/files/zh-cn/learn/html/tables/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Tables
 
 在你开始本模块之前，你应该已经掌握了关于 HTML 的基础知识，就是之前在 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)中所述内容。如果你还没有看过那个模块（或者类似的），先去看看，然后再回来吧！
 
-> **备注：** 如果你正在一台你不能创建文件的设备上作业，那么你需要在在线编程工具上运行（大多数）代码示例，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 等。
+> [!NOTE]
+> 如果你正在一台你不能创建文件的设备上作业，那么你需要在在线编程工具上运行（大多数）代码示例，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 等。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/html/tables/structuring_planet_data/index.md b/files/zh-cn/learn/html/tables/structuring_planet_data/index.md
index e1b54923d4579a..ef3129a8e427f6 100644
--- a/files/zh-cn/learn/html/tables/structuring_planet_data/index.md
+++ b/files/zh-cn/learn/html/tables/structuring_planet_data/index.md
@@ -24,7 +24,8 @@ slug: Learn/HTML/Tables/Structuring_planet_data
 
 要进行本测验，将 [blank-template.html](https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/blank-template.html), [minimal-table.css](https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/minimal-table.css) 和 [planets-data.txt](https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/planets-data.txt) 拷贝到本地。
 
-> **备注：** 另外，你可以使用 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 来做你的测验。你可以把 HTML, CSS 和 JavaScript 粘贴到其中一个网上编辑器里。如果你使用的网上编辑器不支持 JavaScript/CSS 文件链接到 HTML 中使用，那么也可以使用 `<script>`/`<style>` 元素将它们直接写在你的 HTML 页面里。
+> [!NOTE]
+> 另外，你可以使用 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 来做你的测验。你可以把 HTML, CSS 和 JavaScript 粘贴到其中一个网上编辑器里。如果你使用的网上编辑器不支持 JavaScript/CSS 文件链接到 HTML 中使用，那么也可以使用 `<script>`/`<style>` 元素将它们直接写在你的 HTML 页面里。
 
 ## 项目概要
 
diff --git a/files/zh-cn/learn/index.md b/files/zh-cn/learn/index.md
index 788a0115c79ac4..aa832e159e124b 100644
--- a/files/zh-cn/learn/index.md
+++ b/files/zh-cn/learn/index.md
@@ -22,9 +22,10 @@ slug: Learn
 - 框架与工具
   - : 在掌握了原生 HTML、CSS、JavaScript 的要领后，就可以继续学习[前端开发工具](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools)课程，并考虑开始研究 [JavaScript 前端框架](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)，以及[网站服务端编程](/zh-CN/docs/Learn/Server-side)了。
 
-> **备注：** 可在[术语表](/zh-CN/docs/Glossary)中查询术语。此外，如果你对 Web 开发有具体问题，可以尝试在[常见问题](/zh-CN/docs/Learn/Common_questions)寻找答案。
+> [!NOTE]
+> 可在[术语表](/zh-CN/docs/Glossary)中查询术语。此外，如果你对 Web 开发有具体问题，可以尝试在[常见问题](/zh-CN/docs/Learn/Common_questions)寻找答案。
 
-> **标注：**
+> [!CALLOUT]
 >
 > #### 想要成为一名前端工程师？
 >
diff --git a/files/zh-cn/learn/javascript/asynchronous/index.md b/files/zh-cn/learn/javascript/asynchronous/index.md
index a9118cd3e2ade0..64331fc61b24a0 100644
--- a/files/zh-cn/learn/javascript/asynchronous/index.md
+++ b/files/zh-cn/learn/javascript/asynchronous/index.md
@@ -11,7 +11,8 @@ slug: Learn/JavaScript/Asynchronous
 
 异步 JavaScript 是一个相当高级的话题，建议你先完成 [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps)和[创建 JavaScript 代码块](/zh-CN/docs/Learn/JavaScript/Building_blocks) 两个模块的学习后再来学习。
 
-> **备注：** 如果你工作在一个无权创建自己文件的电脑/平板/其他设备上，你需要在一个在线编程工具上试验（大多数）代码示例，如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com).
+> [!NOTE]
+> 如果你工作在一个无权创建自己文件的电脑/平板/其他设备上，你需要在一个在线编程工具上试验（大多数）代码示例，如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com).
 
 ## 指南
 
diff --git a/files/zh-cn/learn/javascript/asynchronous/introducing_workers/index.md b/files/zh-cn/learn/javascript/asynchronous/introducing_workers/index.md
index 4d938c470212ea..1307a15ccb8206 100644
--- a/files/zh-cn/learn/javascript/asynchronous/introducing_workers/index.md
+++ b/files/zh-cn/learn/javascript/asynchronous/introducing_workers/index.md
@@ -213,7 +213,8 @@ worker 要做的第一件事情就是开始监听来自主脚本的消息。这
 
 `generatePrimes()` 函数与同步版本类似，只不过我们在完成后向主脚本发送一条消息，而不是返回一个值。我们对此使用 {{DOMxRef("dedicatedWorkerGlobalScope.postMessage()", "postMessage()")}} 函数，就像在 worker 中 `addEventListener`是全局函数一样。如我们所见，主脚本正在监听这条消息并且将会在收到消息后更新 DOM。
 
-> **备注：** 要运行此站点，你必须运行一个本地 web 服务器，因为 file:// URLs 不允许加载 workers。参考我们的[设置一个本地测试服务器](/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server)的指导。完成后，你应该可以点击 "Generate primes" 并且使你的主页面保持响应。
+> [!NOTE]
+> 要运行此站点，你必须运行一个本地 web 服务器，因为 file:// URLs 不允许加载 workers。参考我们的[设置一个本地测试服务器](/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server)的指导。完成后，你应该可以点击 "Generate primes" 并且使你的主页面保持响应。
 > 如果你在创建和运行这个样例的过程中有疑问，你可以在 [https://github.com/mdn/learning-area/blob/main/javascript/asynchronous/workers/finished](https://github.com/mdn/learning-area/blob/main/javascript/asynchronous/workers/finished) 查看完成后的版本，并且在 [https://mdn.github.io/learning-area/javascript/asynchronous/workers/finished](https://mdn.github.io/learning-area/javascript/asynchronous/workers/finished) 进行在线尝试。
 
 ## 其他类型的 worker
diff --git a/files/zh-cn/learn/javascript/asynchronous/promises/index.md b/files/zh-cn/learn/javascript/asynchronous/promises/index.md
index cef89e41f530fa..85652980512695 100644
--- a/files/zh-cn/learn/javascript/asynchronous/promises/index.md
+++ b/files/zh-cn/learn/javascript/asynchronous/promises/index.md
@@ -30,7 +30,8 @@ l10n:
 
 ## 使用 fetch() API
 
-> **备注：** 在这篇文章中，我们将通过复制页面上的代码示例到浏览器的 JavaScript 控制台中运行的方式来学习 Promise。因此在正式开始学习之前你需要进行以下设置：
+> [!NOTE]
+> 在这篇文章中，我们将通过复制页面上的代码示例到浏览器的 JavaScript 控制台中运行的方式来学习 Promise。因此在正式开始学习之前你需要进行以下设置：
 >
 > 1. 在浏览器中打开一个新标签页并访问 <https://example.org>。
 > 2. 在该标签页中，打开[浏览器开发者工具](/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools)中的 JavaScript 控制台
diff --git a/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md b/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
index 1a6be11c85768e..b3486ec3ef95f5 100644
--- a/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -39,13 +39,15 @@ alert("This is a message");
 
 这个`alert()`函数不是很好的：你可以`alert()`出这条信息，但是你不能很容易的表达其他内容，例如颜色，图标或者是其他东西。接下来我们将会构建一个更有趣的函数。
 
-> **备注：** 这个例子能够在现代浏览器上很好的工作，但是这个风格在老的浏览器上并没那么有趣。我们建议你实现这个例子时在现代浏览器上，例如 Firefox，Opera 或者 Chrome 浏览器。
+> [!NOTE]
+> 这个例子能够在现代浏览器上很好的工作，但是这个风格在老的浏览器上并没那么有趣。我们建议你实现这个例子时在现代浏览器上，例如 Firefox，Opera 或者 Chrome 浏览器。
 
 ## 基本函数
 
 首先，让我们来组织一个基本的函数。
 
-> **备注：** 对于函数命名约定，应遵循与[变量命名约定](/zh-CN/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules)相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。
+> [!NOTE]
+> 对于函数命名约定，应遵循与[变量命名约定](/zh-CN/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules)相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。
 
 1. 我们希望你首先访问[function-start.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-start.html)文件并创建一个本地拷贝。你将会看到这个 HTML 很简单 — 我们的 body 块仅包含一个按钮。我们还提供了一些基本的 CSS 来装饰自定义消息框，以及一个用于放置 JavaScript 代码的{{htmlelement("script")}}元素。
 2. 接下来，将下面的代码添加至 `<script>` 元素中：
@@ -230,7 +232,8 @@ btn.onclick = displayMessage();
 
 1. 第一步，从 Github 上下载我们需要的图标 ([警告图标](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) 和 [聊天图标](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) 。把图标保存在一个叫做`icons` 的文件夹下，和你的 HTML 文件在同一个目录下。
 
-   > **备注：** 警告和聊天图标是在这个网站 iconfinder.com 上找到的，设计者是 [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr)。感谢他！
+   > [!NOTE]
+   > 警告和聊天图标是在这个网站 iconfinder.com 上找到的，设计者是 [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr)。感谢他！
 
 2. 下一步，找到页面的 CSS 文件。我们要修改下以便我们使用图标。首先，修改 `.msgBox` 的宽度：
 
@@ -283,7 +286,8 @@ btn.onclick = displayMessage();
 
    你能看到我们现在的函数稍微有了点用 (不是非常有用) ，一个小的新功能被我们写出来了（当然，函数可以做很多你想的到的和想不到的事）！
 
-> **备注：** 如果你写这个例子遇到了困难，在这里查看免费的代码 [完整版本的代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-stage-4.html) (或者[在线运行的完整代码](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), 也可以向我们寻求帮助。
+> [!NOTE]
+> 如果你写这个例子遇到了困难，在这里查看免费的代码 [完整版本的代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-stage-4.html) (或者[在线运行的完整代码](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), 也可以向我们寻求帮助。
 
 ## 技能测试！
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md b/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
index 29c146c6b11ca0..1d1f01e39a25b8 100644
--- a/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
@@ -97,7 +97,8 @@ if (shoppingDone === true) {
 
 这段代码显示的结果是变量 `shoppingDone` 总是返回 `false`，意味着对我们的穷孩子来说很失望。如果孩子去购物的话，就需要依靠我们提供机制来使父母把变量 `shoppingDone` 变成 `true`。
 
-> **备注：** 你可以[在 Github 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/allowance-updater.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html)）
+> [!NOTE]
+> 你可以[在 Github 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/allowance-updater.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html)）
 
 ### else if
 
@@ -150,7 +151,8 @@ function setWeather() {
 3. 当函数运行时，我们首先新建了一个 `choice` 变量去存储当前被选的 `<select>` 中的值。接着我们用条件判断语句根据 `choice` 的值选择性的展示段落中的文本。注意 `else if () { }` 块中的条件是怎么被判断的，除了第一个，它是在 `if () { }` 中被判断的。
 4. 最后一个 `else { }` 中的选择通常被叫做“最后招数”——在所有的条件都不为 `true` 时其中的代码会被执行。在这个例子中，如果用户没有选择任何一个选项，它会将段落中的文本清空，例如当用户决定重新选择最开始出现的“--作出选择--”选项时，就会有这样的效果。
 
-> **备注：** 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-else-if.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html)。）
+> [!NOTE]
+> 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-else-if.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html)。）
 
 ### 关于比较运算符
 
@@ -357,7 +359,8 @@ function setWeather() {
 
 {{ EmbedLiveSample('switch 语句示例', '100%', 100) }}
 
-> **备注：** 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-switch.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html)。）
+> [!NOTE]
+> 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-switch.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html)。）
 
 ## 三元运算符
 
@@ -414,7 +417,8 @@ select.addEventListener("change", () =>
 
 最后，我们还有一个 [onchange](/zh-CN/docs/Web/API/HTMLElement/change_event)事件监听器，用于运行一个包含三元运算符的函数。它以 `select.value === 'black'` 测试条件开始。如果这返回 `true`，我们运行带有黑色和白色参数的函数 `update()`，这意味着我们最终得到黑色的背景颜色和白色的文字颜色。如果返回 `false`，我们运行带有白色和黑色参数的函数 `update()`，这意味着站点颜色被反转。
 
-> **备注：** 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-ternary.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)。）
+> [!NOTE]
+> 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/simple-ternary.html)（也可以[在线运行](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)。）
 
 ## 主动学习：一个简单的日历
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md
index 5c6311e9a2771f..de97872892788b 100644
--- a/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md
@@ -339,9 +339,11 @@ container.addEventListener("click", (event) => {
 
 {{ EmbedLiveSample('事件委托', '100%', 430, "", "") }}
 
-> **备注：** 在这个例子中，我们使用 `event.target` 来获取事件的目标元素（也就是最里面的元素）。如果我们想访问处理这个事件的元素（在这个例子中是容器），我们可以使用 `event.currentTarget`。
+> [!NOTE]
+> 在这个例子中，我们使用 `event.target` 来获取事件的目标元素（也就是最里面的元素）。如果我们想访问处理这个事件的元素（在这个例子中是容器），我们可以使用 `event.currentTarget`。
 
-> **备注：** 完整的源代码见 [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html)；也可以在这里[在线运行它](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)。
+> [!NOTE]
+> 完整的源代码见 [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html)；也可以在这里[在线运行它](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)。
 
 ## 技能测试！
 
@@ -353,7 +355,8 @@ container.addEventListener("click", (event) => {
 
 另外，理解 JavaScript 在不同环境下使用不同的事件模型很重要——从 Web API 到其他领域，如浏览器 WebExtensions 和 Node.js（服务器端 JavaScript）。我们并不期望现在了解所有这些领域，但是当你在学习 web 开发的过程中，理解这些事件的基础是很有帮助的。
 
-> **备注：** 如果你遇到了问题，可以向我们其中的一个[交流渠道](/zh-CN/docs/MDN/Community/Communication_channels)寻求帮助。
+> [!NOTE]
+> 如果你遇到了问题，可以向我们其中的一个[交流渠道](/zh-CN/docs/MDN/Community/Communication_channels)寻求帮助。
 
 ## 参见
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/events/index.md b/files/zh-cn/learn/javascript/building_blocks/events/index.md
index 79c12cbcf21e5d..cbdf16ea85a76f 100644
--- a/files/zh-cn/learn/javascript/building_blocks/events/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/events/index.md
@@ -46,7 +46,8 @@ slug: Learn/JavaScript/Building_blocks/Events
 
 为了对一个事件做出反应，你要给它附加一个**事件处理器**。这是一个代码块（通常是你作为程序员创建的一个 JavaScript 函数），在事件发生时运行。当这样一个代码块被定义为响应一个事件而运行时，我们说我们在**注册一个事件处理器**。注意，事件处理器有时候被叫做**事件监听器**——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，处理器对事件发生做出回应。
 
-> **备注：** web 事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的 API。
+> [!NOTE]
+> web 事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的 API。
 
 ### 示例：处理点击事件
 
@@ -296,11 +297,13 @@ function bgChange(e) {
 btn.addEventListener("click", bgChange);
 ```
 
-> **备注：** 你可以在 GitHub 上查看这个示例的[完整代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/random-color-eventobject.html) ，或者在这里查看[实时演示](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)。
+> [!NOTE]
+> 你可以在 GitHub 上查看这个示例的[完整代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/random-color-eventobject.html) ，或者在这里查看[实时演示](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)。
 
 在这里，可以看到我们在函数中包括一个事件对象 `e`，并在函数中设置背景颜色样式在 `e.target` 上——它指的是按钮本身。事件对象 `e` 的 `target` 属性始终是事件刚刚发生的元素的引用。所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。
 
-> **备注：** 可以使用任何喜欢的名称作为事件对象——只需要选择一个名称，然后可以在事件处理函数中引用它。开发人员最常使用 `e`/`evt`/`event`，因为它们很简单易记。保持一致总是好的——至少对自己。如果可能的话，对别人也是如此。
+> [!NOTE]
+> 可以使用任何喜欢的名称作为事件对象——只需要选择一个名称，然后可以在事件处理函数中引用它。开发人员最常使用 `e`/`evt`/`event`，因为它们很简单易记。保持一致总是好的——至少对自己。如果可能的话，对别人也是如此。
 
 ### 事件对象的额外属性
 
@@ -382,7 +385,8 @@ form.addEventListener("submit", (e) => {
 
 {{ EmbedLiveSample('阻止默认行为', '100%', 180) }}
 
-> **备注：** 你可以在 GitHub 上查看这个示例的完整源代码 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html)，也可以[在线运行它](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)。
+> [!NOTE]
+> 你可以在 GitHub 上查看这个示例的完整源代码 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html)，也可以[在线运行它](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)。
 
 ## 并不只是网页
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/functions/index.md b/files/zh-cn/learn/javascript/building_blocks/functions/index.md
index a87608821ff340..b4acc5ae9f662f 100644
--- a/files/zh-cn/learn/javascript/building_blocks/functions/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/functions/index.md
@@ -65,7 +65,8 @@ const myNumber = Math.random();
 
 我们都在使用*函数*！
 
-> **备注：** 如果需要，你可以随意将这些代码输入浏览器控制台以便于你熟悉其功能。
+> [!NOTE]
+> 如果需要，你可以随意将这些代码输入浏览器控制台以便于你熟悉其功能。
 
 JavaScript 语言中有许多内置的函数，它们可以让你无需自己编写所有的代码，就能做很多有用的事情。事实上，许多你**调用**（专业词语，意指“运行”或“执行”）浏览器内置函数时调用的代码并不能用 JavaScript 来编写——大多数调用浏览器后台的函数的代码，是使用像 C++ 这样更低级的系统语言编写的，而不是像 JavaScript 这样的 web 编程语言。
 
@@ -120,13 +121,15 @@ myFunction();
 // 调用一次该函数
 ```
 
-> **备注：** 这种创建函数的形式，也被称为*函数声明*。它总是被[提升](/zh-CN/docs/Glossary/Hoisting)的，这样你就能在函数定义之前调用该函数。
+> [!NOTE]
+> 这种创建函数的形式，也被称为*函数声明*。它总是被[提升](/zh-CN/docs/Glossary/Hoisting)的，这样你就能在函数定义之前调用该函数。
 
 ## 函数参数
 
 有些函数在调用它们时需要指定**参数**——这些值需要放在函数括号内，函数才能正确地完成其工作。
 
-> **备注：** 参数（parameter）有时称为参数（argument）、属性（property）或甚至特性（attribute）。
+> [!NOTE]
+> 参数（parameter）有时称为参数（argument）、属性（property）或甚至特性（attribute）。
 
 例如，浏览器的内置 [Math.random()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 函数不需要任何参数。当被调用时，它总是返回 0 到 1 之间的随机数：
 
@@ -141,7 +144,8 @@ const myText = "我是一个字符串";
 const newString = myText.replace("字符串", "香肠");
 ```
 
-> **备注：** 当你需要指定多个参数时，它们以逗号分隔。
+> [!NOTE]
+> 当你需要指定多个参数时，它们以逗号分隔。
 
 ### 可选参数
 
@@ -197,7 +201,8 @@ function myFunction() {
 
 这就是所谓的**匿名函数**，因为它没有名字。当一个函数希望接收另一个函数作为参数时，你经常会看到匿名函数。在这种情况下，函数参数通常作为匿名函数传递。
 
-> **备注：** 这种创建函数的形式也称为*函数表达式*。与函数声明不同，函数表达式不会被[提升](/zh-CN/docs/Glossary/Hoisting)。
+> [!NOTE]
+> 这种创建函数的形式也称为*函数表达式*。与函数声明不同，函数表达式不会被[提升](/zh-CN/docs/Glossary/Hoisting)。
 
 ### 匿名函数示例
 
@@ -274,7 +279,8 @@ textBox.addEventListener("keydown", (event) =>
 
 我们建议你使用箭头函数，因为它们可以使你的代码更简短、更易读。要了解更多信息，请参阅 [JavaScript 指南中的有关部分](/zh-CN/docs/Web/JavaScript/Guide/Functions#箭头函数)，以及我们[有关箭头函数的参考文档](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。
 
-> **备注：** 注意：箭头函数和普通函数之间存在一些细微差别。它们超出了本入门指南的范围，并且不太可能在我们在这里讨论的案例中产生影响。要了解更多信息，请参阅[箭头函数参考文档](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。
+> [!NOTE]
+> 注意：箭头函数和普通函数之间存在一些细微差别。它们超出了本入门指南的范围，并且不太可能在我们在这里讨论的案例中产生影响。要了解更多信息，请参阅[箭头函数参考文档](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。
 
 ### 箭头函数实时示例
 
@@ -345,7 +351,8 @@ function greeting() {
 
 你想要调用的两个函数都被命名为 `greeting()`，但你只能访问到 `first.js` 文件中的 `greeting()` 函数（第二个函数会被忽略）。此外，（在 `second.js` 文件中）试图给 `name` 变量赋一个新值时会导致错误，因为它已经用 `const` 声明过了，所以无法重新赋值。
 
-> **备注：** 你可以[在 GitHub 上参考运行的实例](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html)（查看完整[源代码](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)）。
+> [!NOTE]
+> 你可以[在 GitHub 上参考运行的实例](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html)（查看完整[源代码](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)）。
 
 将部分代码锁定在函数中避免了这样的问题，并被认为是最佳实践。
 
@@ -447,9 +454,11 @@ function greeting() {
 
    这次 `a()` 和 `b()` 调用都会返回那个令人讨厌的“[ReferenceError: _variable name_ is not defined](/zh-CN/docs/Web/JavaScript/Reference/Errors/Not_defined)”错误——这是因为 `output()` 函数的调用和输出变量的定义不在同一个函数作用域内——变量对于这些函数调用而言是不可见的。
 
-> **备注：** 相同的作用域规则不适用于循环（例如 `for() { }`）和条件块（例如 `if() { }`）——它们看起来非常相似，但它们不一样！千万不要混淆它们。
+> [!NOTE]
+> 相同的作用域规则不适用于循环（例如 `for() { }`）和条件块（例如 `if() { }`）——它们看起来非常相似，但它们不一样！千万不要混淆它们。
 
-> **备注：** “[ReferenceError: "x" is not defined](/zh-CN/docs/Web/JavaScript/Reference/Errors/Not_defined)”错误将会是你遇到的最常见的错误。如果你收到此错误，并且确定你已经定义了该变量，请检查它的作用域。
+> [!NOTE]
+> “[ReferenceError: "x" is not defined](/zh-CN/docs/Web/JavaScript/Reference/Errors/Not_defined)”错误将会是你遇到的最常见的错误。如果你收到此错误，并且确定你已经定义了该变量，请检查它的作用域。
 
 ## 技能测试！
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md
index 26cedb5a05ebfc..7312219ac696f9 100644
--- a/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md
@@ -26,7 +26,8 @@ slug: Learn/JavaScript/Building_blocks/Image_gallery
 
 另外，你还可以使用类似 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）这些在线编辑器来完成测验。你可以将 HTML、CSS 和 JavaScript 粘贴到这几个在线编辑器中。如果你使用的在线编辑器没有单独的 JavaScript/CSS 面板，请将它们放入 HTML 页面内联的 `<script>`/`<style>` 元素中。
 
-> **备注：** 如果你遇到了困难，请联系我们以寻求帮助——见本页面底部的[评估或进一步帮助](#评估或进一步帮助)。
+> [!NOTE]
+> 如果你遇到了困难，请联系我们以寻求帮助——见本页面底部的[评估或进一步帮助](#评估或进一步帮助)。
 
 ## 项目简介
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/index.md b/files/zh-cn/learn/javascript/building_blocks/index.md
index ad690895aa77c3..241679392d16f0 100644
--- a/files/zh-cn/learn/javascript/building_blocks/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/index.md
@@ -11,7 +11,8 @@ slug: Learn/JavaScript/Building_blocks
 
 在开始这部分模块之前，你应该熟悉基本的 HTML 和 CSS, 并且已经看完我们之前的模块：[JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps)。
 
-> **备注：** 如果你在使用无法创建自己文件的电脑/平板/其他设备，你可以试试在线编辑器，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/).
+> [!NOTE]
+> 如果你在使用无法创建自己文件的电脑/平板/其他设备，你可以试试在线编辑器，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/).
 
 ## 指南
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
index 115f9b40a6a102..7c5aca7944ab8a 100644
--- a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
@@ -221,7 +221,8 @@ para.textContent = info;
 
 {{ EmbedLiveSample('循环的标准', '100%', 60, "", "", "hide-codepen-jsfiddle") }}
 
-> **备注：** 你可以[在 GitHub 上找到这段示例代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/basic-for.html)。 （也可以[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)）。
+> [!NOTE]
+> 你可以[在 GitHub 上找到这段示例代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/basic-for.html)。 （也可以[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)）。
 
 这显示了一个循环用于迭代数组中的项目，并与每个项目进行一些操作 - JavaScript 中非常常见的模式。这里：
 
@@ -235,9 +236,11 @@ para.textContent = info;
 
 4. 当等于`cats.length`时，循环将停止，浏览器将移动到循环下面的下一个代码位。
 
-> **备注：** 我们将退出条件设为 `< cats.length`，而不是 `<= cats.length` 是因为计算机从 0 开始，而不是 1 - 开始时 `i` 是 0，并且逐步增加到 `i = 4`（最后一个数组的索引）。 `cats.length` 返回 5，因为数组中有 5 个项目，但是我们不希望达到 `i = 5`，因为这将返回未定义的最后一个项目（没有索引为 5 的数组项目）。所以我们想要比 `cats.length` 少 1（`i <`），而不是 `cats.length`（`i <=`）。
+> [!NOTE]
+> 我们将退出条件设为 `< cats.length`，而不是 `<= cats.length` 是因为计算机从 0 开始，而不是 1 - 开始时 `i` 是 0，并且逐步增加到 `i = 4`（最后一个数组的索引）。 `cats.length` 返回 5，因为数组中有 5 个项目，但是我们不希望达到 `i = 5`，因为这将返回未定义的最后一个项目（没有索引为 5 的数组项目）。所以我们想要比 `cats.length` 少 1（`i <`），而不是 `cats.length`（`i <=`）。
 
-> **备注：** 退出条件的一个常见错误是使它们使用“等于”(`===`) 而不是说“小于或等于”(`<=`)。如果我们想要运行我的循环到`i = 5`，退出条件将需要是`i <= cats.length`。如果我们设置为`i === cats.length`，循环将不会运行，因为在第一次循环迭代时 i 不等于 5，所以循环会立即停止。
+> [!NOTE]
+> 退出条件的一个常见错误是使它们使用“等于”(`===`) 而不是说“小于或等于”(`<=`)。如果我们想要运行我的循环到`i = 5`，退出条件将需要是`i <= cats.length`。如果我们设置为`i === cats.length`，循环将不会运行，因为在第一次循环迭代时 i 不等于 5，所以循环会立即停止。
 
 我们留下的一个小问题是最后的输出句子形式不是很好：
 
@@ -255,9 +258,11 @@ for (var i = 0; i < cats.length; i++) {
 }
 ```
 
-> **备注：** 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/basic-for-improved.html)。（也可以[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)）
+> [!NOTE]
+> 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/basic-for-improved.html)。（也可以[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)）
 
-> **警告：** 使用`for`- 与所有循环一样，你必须确保初始化程序被迭代，以便最终达到退出条件。如果没有，循环将永不停止，浏览器将强制它停止，否则会崩溃。这被称为无限循环。
+> [!WARNING]
+> 使用`for`- 与所有循环一样，你必须确保初始化程序被迭代，以便最终达到退出条件。如果没有，循环将永不停止，浏览器将强制它停止，否则会崩溃。这被称为无限循环。
 
 ## 使用 break 退出循环
 
@@ -359,7 +364,8 @@ btn.addEventListener("click", function () {
 
 5. 在`(contacts.length-1)` 迭代后，如果联系人姓名与输入的搜索不符，则段落文本设置为“未找到联系人”，循环继续迭代。
 
-> **备注：** 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/contact-search.html)或[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)。
+> [!NOTE]
+> 你可以[在 GitHub 上找到这个例子](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/contact-search.html)或[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)。
 
 ## 使用 continue 跳过迭代
 
@@ -428,7 +434,8 @@ Here's the output:
 3. 如果平方根和四舍五入的平方根不相等（`!==`），则表示平方根不是整数，因此我们对此不感兴趣。在这种情况下，我们使用 continue 语句跳过当前循环而执行下一个循环迭代，而不在任何地方记录该数字。
 4. 如果平方根是一个整数，我们完全跳过 if 块，所以 continue 语句不被执行; 相反，我们将当前 i 值加上一个空格连接到段落内容的末尾。
 
-> **备注：** 你可以[在 GitHub 上查看完整代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/integer-squares.html)，或者[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)。
+> [!NOTE]
+> 你可以[在 GitHub 上查看完整代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/integer-squares.html)，或者[在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)。
 
 ## while 语句和 do ... while 语句
 
@@ -465,7 +472,8 @@ while (i < cats.length) {
 }
 ```
 
-> **备注：** This still works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)).
+> [!NOTE]
+> This still works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)).
 
 [do...while](/zh-CN/docs/Web/JavaScript/Reference/Statements/do...while)循环非常类似但在 while 后提供了终止条件：
 
@@ -498,9 +506,11 @@ do {
 } while (i < cats.length);
 ```
 
-> **备注：** 再一次，它正如我们期望的那样工作 — 看一看它在[Github 在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (或者查看[完整源代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)).
+> [!NOTE]
+> 再一次，它正如我们期望的那样工作 — 看一看它在[Github 在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (或者查看[完整源代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)).
 
-> **警告：** 使用 while 和 do...while — 所有循环都一样 — 你必须保证初始变量是迭代的，那么它才会逐渐地达到退出条件。不然，它将会永远循环下去，要么浏览器会强制终止它，要么它自己会崩溃。这称为无限循环。
+> [!WARNING]
+> 使用 while 和 do...while — 所有循环都一样 — 你必须保证初始变量是迭代的，那么它才会逐渐地达到退出条件。不然，它将会永远循环下去，要么浏览器会强制终止它，要么它自己会崩溃。这称为无限循环。
 
 ## 主动学习：启动倒计时！
 
@@ -686,7 +696,8 @@ do {
 
 我们建议使用`for`，因为它可能是最简单地帮你记住一切 - 初始化程序，退出条件和最终表达式都必须整齐地放入括号，所以很容易看到他们在哪里并检查你没有丢失他们。
 
-> **备注：** 还有其他循环类型/特性，这些特性在 高级/专门 的情况下是有用的，超出了本文的范围。如果你想进一步了解循环学习，请阅读我们的高级[循环和迭代指南](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)。
+> [!NOTE]
+> 还有其他循环类型/特性，这些特性在 高级/专门 的情况下是有用的，超出了本文的范围。如果你想进一步了解循环学习，请阅读我们的高级[循环和迭代指南](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)。
 
 ## 结论
 
diff --git a/files/zh-cn/learn/javascript/building_blocks/return_values/index.md b/files/zh-cn/learn/javascript/building_blocks/return_values/index.md
index c1ff73d0fd8a00..76e40288ec3e74 100644
--- a/files/zh-cn/learn/javascript/building_blocks/return_values/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/return_values/index.md
@@ -161,7 +161,8 @@ ctx.arc(500, 200, 35, 0, 2 * Math.PI);
 
 4. 保存你的代码，将其加载到浏览器中，然后尝试。
 
-> **备注：** 如果你有麻烦让例子工作，对比[GitHub 的已完成版](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-library-finished.html)检查你的代码（或[看它在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)），或寻求我们的帮助。
+> [!NOTE]
+> 如果你有麻烦让例子工作，对比[GitHub 的已完成版](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-library-finished.html)检查你的代码（或[看它在线运行](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)），或寻求我们的帮助。
 
 在这一点上，我们希望你编写一个自己的几个函数，并将它们添加到库中。这个数的平方根或立方根，或一个圆的周长和半径是多少？
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md
index bcf3c8c660b705..20819f0645f80b 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -43,7 +43,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
 
 通常客户端和服务端存储是结合在一起使用的。例如，你可以从数据库中下载一个由网络游戏或音乐播放器应用程序使用的音乐文件，将它们存储在客户端数据库中，并按需要播放它们。用户只需下载音乐文件一次——在随后的访问中，它们将从数据库中检索。
 
-> **备注：** 使用客户端存储 API 可以存储的数据量是有限的（可能是每个 API 单独的和累积的总量）;具体的数量限制取决于浏览器，也可能基于用户设置。有关更多信息，获取更多信息，请参考[浏览器存储限制和清理标准](/zh-CN/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)。
+> [!NOTE]
+> 使用客户端存储 API 可以存储的数据量是有限的（可能是每个 API 单独的和累积的总量）;具体的数量限制取决于浏览器，也可能基于用户设置。有关更多信息，获取更多信息，请参考[浏览器存储限制和清理标准](/zh-CN/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)。
 
 ### 传统方法：cookies
 
@@ -55,7 +56,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
 由于这些原因，我们不会在本文中教你如何使用 cookie。毕竟它过时、存在各种[安全问题](/zh-CN/docs/Web/HTTP/Cookies#安全)，而且无法存储复杂数据，而且有更好的、更现代的方法可以在用户的计算机上存储种类更广泛的数据。
 cookie 的唯一优势是它们得到了非常旧的浏览器的支持，所以如果你的项目需要支持已经过时的浏览器（比如 Internet Explorer 8 或更早的浏览器），cookie 可能仍然有用，但是对于大多数项目（很明显不包括本站）来说，你不需要再使用它们了。其实 cookie 也没什么好说的，[`document.cookie`](/zh-CN/docs/Web/API/Document/cookie)一把梭就完事了。
 
-> **备注：** 为什么仍然有新创建的站点使用 cookies？这主要是因为开发人员的习惯，使用了仍然使用 cookies 的旧库，以及存在许多 web 站点，提供了过时的参考和培训材料来学习如何存储数据。
+> [!NOTE]
+> 为什么仍然有新创建的站点使用 cookies？这主要是因为开发人员的习惯，使用了仍然使用 cookies 的旧库，以及存在许多 web 站点，提供了过时的参考和培训材料来学习如何存储数据。
 
 ### 新流派：Web Storage 和 IndexedDB
 
@@ -237,9 +239,11 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在
 
 你的例子完成了 - 做得好！现在剩下的就是保存你的代码并在浏览器中测试你的 HTML 页面。你可以在这里看到我们的[完成版本并在线运行](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)。
 
-> **备注：** 在 [Using the Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) 中还有一个稍微复杂点儿的示例。
+> [!NOTE]
+> 在 [Using the Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) 中还有一个稍微复杂点儿的示例。
 
-> **备注：** 在完成版本的源代码中， `<script src="index.js" defer></script>` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。
+> [!NOTE]
+> 在完成版本的源代码中， `<script src="index.js" defer></script>` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。
 
 ## 存储复杂数据 — IndexedDB
 
@@ -298,7 +302,8 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在
 
    要在 IndexedDB 中处理此问题，你需要创建一个请求对象（可以随意命名 - 命名为`request`，可以表明它的用途）。然后，在请求完成或者失败时，使用事件处理程序来运行代码，你将在下面看到这些代码。
 
-   > **备注：** 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。
+   > [!NOTE]
+   > 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。
 
    1. 在之前添加的事件处理程序下方添加以下代码 - 在`window.onload`处理程序内：
 
@@ -671,7 +676,8 @@ function deleteItem(e) {
 
 Cache API 是另一种客户端存储机制，略有不同 - 它旨在保存 HTTP 响应，因此与服务工作者一起工作得非常好。
 
-> **备注：** 现在大多数现代浏览器都支持服务工作者和缓存。在撰写本文时，Safari 仍在忙着实施它，但它应该很快就会存在。
+> [!NOTE]
+> 现在大多数现代浏览器都支持服务工作者和缓存。在撰写本文时，Safari 仍在忙着实施它，但它应该很快就会存在。
 
 ### 一个 service worker 例子
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index 78c29ed629528e..0ad9d8cdf4a4c5 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -50,7 +50,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
 
 由于原生的 WebGL 代码非常复杂，本文主要针对 2D 画布。然而，你也可以通过 [WebGL 介绍页面](/zh-CN/docs/Web/API/WebGL_API) 找到 WebGL 原生代码的教程，来学习如何更容易地使用 WebGL 库来创建一个 3D 场景。
 
-> **备注：** 画布的基本功能有良好的跨浏览器支持。但存在例外：IE 8 及以下不支持 2D 画布，IE 11 及以下不支持 WebGL。
+> [!NOTE]
+> 画布的基本功能有良好的跨浏览器支持。但存在例外：IE 8 及以下不支持 2D 画布，IE 11 及以下不支持 WebGL。
 
 ## 主动学习：开始使用 \<canvas>
 
@@ -112,7 +113,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
 
    此时滚动条就消失了。
 
-> **备注：** 如上文所讲，一般情况下图片的尺寸可以通过 HTML 属性或 DOM 属性来设定。你也可以使用 CSS，但问题是画布在渲染完毕后其尺寸就是固定的了，如果试图调整，就会与其他图象一样（其实渲染好的画布就是一副图片），所显示的内容将变得像素化或扭曲变形。
+> [!NOTE]
+> 如上文所讲，一般情况下图片的尺寸可以通过 HTML 属性或 DOM 属性来设定。你也可以使用 CSS，但问题是画布在渲染完毕后其尺寸就是固定的了，如果试图调整，就会与其他图象一样（其实渲染好的画布就是一副图片），所显示的内容将变得像素化或扭曲变形。
 
 ### 获取画布上下文（canvas context）并完成设置
 
@@ -124,7 +126,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
 var ctx = canvas.getContext("2d");
 ```
 
-> **备注：** 可选上下文还包括 WebGL（`webgl`）、WebGL 2（`webgl2`）等等，但本文暂不涉及。
+> [!NOTE]
+> 可选上下文还包括 WebGL（`webgl`）、WebGL 2（`webgl2`）等等，但本文暂不涉及。
 
 好啦，现已万事具备！`ctx` 变量包含一个 {{domxref("CanvasRenderingContext2D")}} 对象，画布上所有绘画操作都会涉及到这个对象。
 
@@ -200,7 +203,8 @@ ctx.fillRect(0, 0, width, height);
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}
 
-> **备注：** 完整代码请访问 GitHub： [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html)。
+> [!NOTE]
+> 完整代码请访问 GitHub： [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html)。
 
 ### 绘制路径
 
@@ -289,7 +293,8 @@ ctx.fill();
 
    `arc()` 函数有六个参数。前两个指定圆心的位置坐标，第三个是圆的半径，第四、五个是绘制弧的起、止角度（给定 0° 和 360° 便能绘制一个完整的圆），第六个是绘制方向（`false` 是顺时针，`true` 是逆时针）。
 
-   > **备注：** 0° 设定为水平向右。
+   > [!NOTE]
+   > 0° 设定为水平向右。
 
 2. 我们再来画一条弧：
 
@@ -310,9 +315,11 @@ ctx.fill();
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[3_canvas_paths.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html)。
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[3_canvas_paths.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html)。
 
-> **备注：** 请访问我们的 [用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
+> [!NOTE]
+> 请访问我们的 [用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
 
 ### 文本
 
@@ -344,7 +351,8 @@ ctx.fillText("Canvas text", 50, 150);
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[4_canvas_text.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[4_canvas_text.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html).
 
 可以自己尝试一下。访问 [绘制文本](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text) 获得关于画布文本选项的更多信息。
 
@@ -391,7 +399,8 @@ ctx.fillText("Canvas text", 50, 150);
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[5_canvas_images.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[5_canvas_images.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html).
 
 ## 循环和动画
 
@@ -470,7 +479,8 @@ ctx.fillText("Canvas text", 50, 150);
 - 修改 `length` 和 `moveOffset` 的值。
 - 我们引入了 `rand()` 函数但是没有使用，你可以试着用它引入一些随机数。
 
-> **备注：** 完整代码可到 GitHub 下载：[6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
 
 ### 动画
 
@@ -622,7 +632,8 @@ loop();
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html).
 
 ### 简单的绘图应用
 
@@ -821,7 +832,8 @@ WebGL 基于 [OpenGL](/zh-CN/docs/Glossary/OpenGL) 图形编程语言实现，
 
 你可以 [到 Github 下载最终代码](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-cube)。
 
-> **备注：** 在我们的 GitHub repo 还有另一个趣味 3D 魔方示例——[Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube)（在线查看）。其中通过 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。
+> [!NOTE]
+> 在我们的 GitHub repo 还有另一个趣味 3D 魔方示例——[Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube)（在线查看）。其中通过 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。
 
 ## 小结
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
index b74390951896f1..cd4e01e36709c1 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -55,7 +55,8 @@ l10n:
 - 页面更新更加迅速，你不必等待页面刷新，这意味这网站的体验更加流畅、响应更加迅速。
 - 每次更新时下载的数据更少，这意味着浪费的带宽更少。这在使用宽带连接的台式机上可能不是什么问题，但在移动设备或没有高速互联网连接的国家/地区则是一个主要问题。
 
-> **备注：** 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。
+> [!NOTE]
+> 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。
 
 为了进一步加快速度，某些网站还会在首次请求时将资源和数据存储在用户的计算机上，这意味这在后续的访问中，会使用这些内容的本地版本，而不是在每次重新加载页面时都下载新的副本。内容仅在更新后才会从服务器重新加载。
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
index 6e2e830ceb5068..4803930b6d6cee 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
@@ -15,7 +15,8 @@ l10n:
 
 了解 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 的基本知识，也会对理解这个单元的内容大有裨益。
 
-> **备注：** 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
+> [!NOTE]
+> 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
index 6d4036e3959adb..5fc0208b133f48 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
@@ -42,7 +42,8 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
 
 同样，比如说，编程来显示一些 3D 图形，使用以更高级语言编写的 API（例如 JavaScript 或 Python）将会比直接编写直接控制计算机的 GPU 或其他图形功能的低级代码（比如 C 或 C++）来执行操作要容易得多。
 
-> **备注：** 详细说明请见 [API 术语条目](/zh-CN/docs/Glossary/API)。
+> [!NOTE]
+> 详细说明请见 [API 术语条目](/zh-CN/docs/Glossary/API)。
 
 ### 客户端 JavaScript 中的 API
 
@@ -100,7 +101,8 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
 
 API 使用一个或多个 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)在你的代码中进行交互，这些对象用作 API 使用的数据（包含在对象属性中）的容器以及 API 提供的功能（包含在对象方法中）。
 
-> **备注：** 如果你不熟悉对象如何工作，则应在继续之前学习 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)模块。
+> [!NOTE]
+> 如果你不熟悉对象如何工作，则应在继续之前学习 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)模块。
 
 让我们回到 Web 音频 API 的例子——这是一个相当复杂的 API，它由多个对象组成。最重要的包括：
 
@@ -169,7 +171,8 @@ audioElement.addEventListener("ended", () => {
 });
 ```
 
-> **备注：** 有些人可能会注意到，用于播放和暂停音轨的 `play()` 和 `pause()` 方法并不属于 Web 音频 API；它们属于 {{domxref("HTMLMediaElement")}} API，这是一个不同但紧密相关的 API。
+> [!NOTE]
+> 有些人可能会注意到，用于播放和暂停音轨的 `play()` 和 `pause()` 方法并不属于 Web 音频 API；它们属于 {{domxref("HTMLMediaElement")}} API，这是一个不同但紧密相关的 API。
 
 接下来，我们使用 {{domxref("BaseAudioContext/createGain", "AudioContext.createGain()")}} 方法创建一个 {{domxref("GainNode")}} 对象，可以用于调整通过它的音频的音量，并创建另一个事件处理器，当滑块值改变时改变音频图的增益（音量）值：
 
@@ -221,7 +224,8 @@ Ball.prototype.draw = function () {
 };
 ```
 
-> **备注：** 你可以在我们的[弹跳球演示](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html)中看到此代码（也可以[在线运行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)）。
+> [!NOTE]
+> 你可以在我们的[弹跳球演示](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html)中看到此代码（也可以[在线运行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)）。
 
 ### 它们使用事件来处理状态的变化
 
@@ -269,7 +273,8 @@ Web API 特性受到与 JavaScript 和其他 Web 技术（例如[同源策略](/
 
 Web 音频和 {{domxref("HTMLMediaElement")}} API 受制于一种名为[自动播放策略](/zh-CN/docs/Web/API/Web_Audio_API/Best_practices#自动播放策略)的安全机制。这基本上意味着你不能在页面加载时自动播放音频：你必须允许用户通过按钮等控件启动音频播放。这样做的原因是，自动播放音频通常非常恼人，我们实在不应该让用户忍受它。
 
-> **备注：** 根据浏览器的严格程度，这种安全机制甚至可能会阻止示例在本地运行，也就是说，如果你在浏览器中加载本地示例文件，而不是从 Web 服务器上运行它的话。在撰写本文时，我们的 Web 音频 API 示例在 Google Chrome 浏览器上无法本地运行，必须上传到 GitHub 才能运行。
+> [!NOTE]
+> 根据浏览器的严格程度，这种安全机制甚至可能会阻止示例在本地运行，也就是说，如果你在浏览器中加载本地示例文件，而不是从 Web 服务器上运行它的话。在撰写本文时，我们的 Web 音频 API 示例在 Google Chrome 浏览器上无法本地运行，必须上传到 GitHub 才能运行。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 7442ff9acf4b45..ff77d6ca6298c2 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -69,7 +69,8 @@ Web 浏览器是非常复杂的软件，有许多活动部件，其中许多部
 
 ![文档对象模型的树状结构表示：顶部节点是 doctype 和 HTML 元素。HTML 的子节点包括 head 和 body。每个子元素都是一个分支。所有的文本，甚至是空白处，也都被显示出来](dom-screenshot.png)
 
-> **备注：** 这个 DOM 树状图是用 Ian Hickson 的[在线 DOM 查看器](https://software.hixie.ch/utilities/js/live-dom-viewer/)生成的。
+> [!NOTE]
+> 这个 DOM 树状图是用 Ian Hickson 的[在线 DOM 查看器](https://software.hixie.ch/utilities/js/live-dom-viewer/)生成的。
 
 树上的每个条目都被称为**节点**。你可以在上图中看到，一些节点代表元素（标识为 `HTML`、`HEAD`、`META` 等），另一些代表文本（标识为 `#text`）。还有[其他类型的节点](/zh-CN/docs/Web/API/Node/nodeType)，但这些是你会遇到的主要类型。
 
@@ -215,7 +216,8 @@ linkPara.parentNode.removeChild(linkPara);
    </p>
    ```
 
-> **备注：** 请注意，CSS 样式的 JavaScript 属性版本是用{{Glossary("camel_case", "小驼峰命名法")}}书写的，而 CSS 版本采用连字符（{{Glossary("kebab_case", "烤串命名法")}}）（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
+> [!NOTE]
+> 请注意，CSS 样式的 JavaScript 属性版本是用{{Glossary("camel_case", "小驼峰命名法")}}书写的，而 CSS 版本采用连字符（{{Glossary("kebab_case", "烤串命名法")}}）（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
 
 还有一种在你的文档上动态操作样式的常见方法，我们现在就来看看。
 
@@ -248,7 +250,8 @@ linkPara.parentNode.removeChild(linkPara);
 
 在接下来的几节中我们将看看 DOM API 一些更实际的用途。
 
-> **备注：** 你可以在 GitHub 上找到我们的 [dom-example.html 的完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html)演示（[也可以看看它的在线运行版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到我们的 [dom-example.html 的完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html)演示（[也可以看看它的在线运行版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
 
 ## 动手练习：一个动态的购物单
 
@@ -276,7 +279,8 @@ linkPara.parentNode.removeChild(linkPara);
 10. 为删除按钮绑定事件处理程序。当点击按钮时，删除它所在的整个列表元素（`<li>...</li>`）。
 11. 最后，使用 [`focus()`](/zh-CN/docs/Web/API/HTMLElement/focus) 方法聚焦输入框准备输入下一个购物项。
 
-> **备注：** 如果你卡住了，请查看[完成的购物清单](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)（[查看其在线版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)）。
+> [!NOTE]
+> 如果你卡住了，请查看[完成的购物清单](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)（[查看其在线版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)）。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 2662e1403b4349..fd2b6380963193 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -1,26 +1,27 @@
 ---
 title: 第三方 API
 slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
+l10n:
+  sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
 
-到目前为止我们已经介绍的 API 是内置在浏览器中的，但并不是所有的 API 都是。许多大型网站和服务（例如 Google 地图，Twitter，Facebook，PayPal 等）提供的 API 允许开发者使用他们的数据（例如在博客上显示你的 Twitter 流）或服务（例如在你的网站上显示自定义 Google 地图，或者使用 Facebook 登录来登录你的用户）。本文着眼于浏览器 API 和第三方 API 的区别，并展示了后者的一些典型用途。
+到目前为止我们已经介绍的 API 是内置在浏览器中的，但并不是所有的 API 都是。许多大型网站和服务（例如 Google 地图、Twitter、Facebook、PayPal 等）提供的 API 允许开发者使用他们的数据（例如在博客上显示你的 Twitter 流）或服务（例如在你的网站上显示自定义 Google 地图，或者使用 Facebook 登录来登录你的用户）。本文着眼于浏览器 API 和第三方 API 的区别，并展示了后者的一些典型用途。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">前提：</th>
       <td>
-        JavaScript 基础知识 (see
-        <a href="/zh-CN/docs/Learn/JavaScript/First_steps">first steps</a>,
-        <a href="/zh-CN/docs/Learn/JavaScript/Building_blocks"
-          >building blocks</a
-        >,
-        <a href="/zh-CN/docs/Learn/JavaScript/Objects">JavaScript objects</a>),
-        the
-        <a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction"
-          >basics of Client-side APIs</a
+        JavaScript 基础（见 <a href="/zh-CN/docs/Learn/JavaScript/First_steps"
+          >JavaScript 第一步</a
+        >、<a href="/zh-CN/docs/Learn/JavaScript/Building_blocks"
+          >创建 JavaScript 代码块</a
+        >、<a href="/zh-CN/docs/Learn/JavaScript/Objects">JavaScript 对象介绍</a
+        >）、<a
+          href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction"
+          >Web API 简介</a
         >
       </td>
     </tr>
@@ -33,286 +34,246 @@ slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
 
 ## 什么是第三方 API?
 
-第三方 API 是由第三方（通常是 Facebook，Twitter 或 Google 等公司）提供的 API，允许你通过 JavaScript 访问其功能，并在你自己的站点上使用它。正如我们在 [API 介绍章节](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) 所展示的，最显著的例子就是运用 [Google Maps APIs](https://developers.google.com/maps/) 在你的网页上展示自定义地图。
+第三方 API 是由第三方（通常是 Facebook、Twitter 或 Google 等公司）提供的 API，允许你通过 JavaScript 访问其功能，并在你自己的站点上使用它。最显著的一个示例就是运用 [Google 地图 API](https://developers.google.com/maps/) 在你的网页上展示自定义地图。
 
-让我们再来瞧一眼这个地图的例子 (see the [source code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/maps-example.html); [see it live also](https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)), 从这里可以知道第三方 API 和浏览器 API 的区别是怎么样的。
+让我们再来看看这个[简单的 Mapquest API 示例](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/mapquest)，并用它来说明第三方 API 接口与浏览器 API 接口的区别。
 
-> **备注：** 你可能想要一次获得所有的代码示例，在这种情况下，你可以搜索 repo 来获取每个部分中需要的示例文件。
+> [!NOTE]
+> 你可能想要一次[获得所有的代码示例](/zh-CN/docs/Learn#获取代码示例)，在这种情况下，你可以在存储库中搜索来获取各部分中需要的示例文件。
 
 ### 它们植根于第三方服务器
 
-浏览器 API 在浏览器构建之初就存在 — 用 JavaScript 就可以立即访问它们。例如，例子中所使用的 [Geolocation API](/zh-CN/docs/Web/API/Geolocation/Using_geolocation) 就是通过使用 [`Navigator`](/zh-CN/docs/Web/API/Navigator) 对象的属性 geolocation 来访问的，它返回一个名为 [`Geolocation`](/zh-CN/docs/Web/API/Geolocation) 的对象。这个例子使用了这个对象的方法 [`getCurrentPosition()`](/zh-CN/docs/Web/API/Geolocation/getCurrentPosition) 来请求当前设备所处的地点：
+浏览器 API 在浏览器构建之初就存在：用 JavaScript 就可以立即访问它们。例如，[在简介](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#api_如何工作？)中所使用的 Web Audio API 就是通过原生的 {{domxref("AudioContext")}} 对象来访问的。
 
 ```js
-navigator.geolocation.getCurrentPosition(function(position) { ... });
+const audioCtx = new AudioContext();
+// …
+const audioElement = document.querySelector("audio");
+// …
+const audioSource = audioCtx.createMediaElementSource(audioElement);
+// 等
 ```
 
-第三方 API，从某种角度讲，植根于第三方服务器上。要通过 JavaScript 获取它们，你首先需要链接到其功能接口上并使其在你的页面上生效。通常来说，这首先需要你通过一个 {{htmlelement("script")}} 元素连接到第三方服务器所开放的 JavaScript 库，如下所示：
+第三方 API，从某种角度讲，植根于第三方服务器上。要通过 JavaScript 获取它们，你首先需要链接到其功能接口上并使其在你的页面上生效。通常来说，这首先需要你通过一个 {{htmlelement("script")}} 元素连接到第三方服务器所开放的 JavaScript 库，就像在 Mapquest 示例中所看到的那样：
 
 ```js
 <script
-  type="text/javascript"
-  src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+        src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"
+        defer></script>
+<link
+        rel="stylesheet"
+        href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css" />
 ```
 
 然后你便可使用该库中可用的对象了，如：
 
 ```js
-var latlng = new google.maps.LatLng(
-  position.coords.latitude,
-  position.coords.longitude,
-);
-var myOptions = {
-  zoom: 8,
-  center: latlng,
-  mapTypeId: google.maps.MapTypeId.TERRAIN,
-  disableDefaultUI: true,
-};
-
-var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+const map = L.mapquest.map("map", {
+  center: [53.480759, -2.242631],
+  layers: L.mapquest.tileLayer("map"),
+  zoom: 12,
+});
 ```
 
-代码中我们用 `google.maps.LatLng()` 构造器创建了一个新的 `LatLng` 对象，它包含了我们想展示的地址的纬度和经度，作为一个 Geolocation API 返回。然后，我们创建了包含这个对象，和其他有关地图显示信息的选项对象 (`myOptions`) 。最后，用 `google.maps.Map()` 构造器创建了`map`对象，它接受网页元素（地图展示处）和选项对象两个参数。
+这里我们创建了用于存储地图信息的变量，然后调用 `L.mapquest.map()` 方法来创建地图，该方法的参数包括要在其中显示地图的 {{htmlelement("div")}} 元素的 ID（“map”），以及包含要显示的特定地图详细信息的选项对象。在这里，我们指定了地图的中心点坐标、类型为 `map` 的地图图层（通过调用 `mapquest.tileLayer()` 方法创建）和默认缩放级别。
 
-以上就是用 Google Maps API 建立一个简单地图所需要的所有信息。所有复杂的工作都全由你所连接的第三方服务器处理，包括展示正确地理位置的地图块，等等。
+以上就是用 Mapquest API 建立一个简单地图所需要的所有信息。所有复杂的工作，包括展示正确地理位置的地图块等，都将由你所连接的服务器处理。
 
-> **备注：** 一些 api 处理对其功能的访问略有不同，相反，它们要求开发人员向特定的 URL 模式发出 HTTP 请求 (参见从服务器获取数据)，以检索特定的数据。这些被称为 RESTful api，稍后我们将在文章中展示这个示例。
+> [!NOTE]
+> 一些 API 处理对其功能的访问略有不同，相反，它们要求开发人员向特定的 URL 模式发出 HTTP 请求以获取特定的数据。这些被称为 [RESTful API（稍后我们将在文章中展示这个示例）](#RESTful_API——纽约时报)。
 
-### 权限的不同处理方式
+### 它们通常需要 API 密钥
 
-正如我们在第一篇文章中所讨论的，浏览器 api 的安全性通常是通过权限提示。这样做的目的是为了让用户知道他们访问的网站上发生了什么，并且不太可能成为恶意使用 API 的人的受害者。
+浏览器 API 的安全通常通过权限提示处理，正如[我们前文所说](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#它们在适当的地方有额外的安全机制)。这样做的目的是让用户知道他们访问的网站上发生了什么，从而减少因有人恶意使用 API 而受害的可能性。
 
-第三方 API 有一个稍微不同的权限系统——它们倾向于使用关键代码来允许开发人员访问 API 功能。再次查看我们链接到的谷歌地图 API 库的 URL：
+第三方 API 有一个稍微不同的权限系统——它们倾向于使用开发者密钥来允许开发人员访问 API 功能。这更多是为了保护 API 的提供者而非用户。
 
-```plain
-https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA
-```
-
-URL 末尾提供的 URL 参数是一个开发人员密钥—应用程序的开发人员必须应用它来获取一个密钥，然后以一种特定的方式将其包含在代码中，才能允许访问 API 的功能。对于谷歌映射 (以及其他谷歌 API)，可以在谷歌云平台上申请一个密钥。
-
-其他 API 的包含方式稍微不同，但是大多数 API 的模式都非常相似。
-
-需要密钥的原因是：所有使用 API 功能的人都需要承担责任。当开发者注册一个密钥之后，如果他们开始恶意使用 API（例如跟踪位置，试图用大量的垃圾邮件干扰用户正常工作），此时 API 的提供者可以采取措施。最简单的措施是撤销开发者的 API 的使用权。
-
-## 扩展 the Google Maps 示例
-
-现在我们已经检验了 Google Maps API 示例以及它的运作方式，让我们添加一些更多的功能来展示如何使用 API 的其他特性。
-
-1. 要开始这个部分，确保你已经在一个新的目录复制 [Google Maps 启动文件](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/google-maps/maps_start.html)。如果你已经 [克隆了示例存储库](/zh-CN/docs/Learn#Getting_our_code_examples)，那么你已经拥有了一个这个文件的拷贝，你可以在*javascript/apis/third-party-apis/google-maps 目录中找到该文件。*
-2. 接下来，用以下步骤获取你自己的开发者密钥：
-
-   1. 跳转到 [Google Cloud Platform API Manager dashboard](https://console.cloud.google.com/apis/dashboard).
-   2. 如果你还没有新项目，请创建一个新项目。
-   3. 单击“启用 API”按钮。
-   4. 选择*Google Maps JavaScript API*.
-   5. 单击“启用”按钮。
-   6. 单击创建凭据，然后选择 API 密钥。
-   7. 复制你的 API 密钥并将示例中的第一个{{htmlelement("script")}}元素中的现有密钥替换为你自己的密钥。（位于`?key=`和属性结束引号标记 (`"`) 之间的位置。)
-
-   > **备注：** 获取 Google 相关 API 密钥可能会有一点困难——Google Cloud Platform API Manager 有许多不同的屏幕，并且工作流程可能因你是否设置账户而变得细微的不同。如果你在执行此步骤时遇到了困难，我们将很乐意为你提供帮助——[联系我们](/zh-CN/docs/Learn#Contact_us)。
-
-3. 打开你的 Google Maps 起始文件，找到`INSERT-YOUR-API-KEY-HERE`字符串，然后将其替换为你从 Google Cloud Platform API Manager dashboard 获取的实际 API 密钥。
-
-### 添加自定义标记
-
-添加一个标记在地图上 (icon) 在某种程度上是很容易的，你只需要创建一个新的标记使用 google.maps.Marker() 构造函数，传递给它一个包含位置显示标记的选择对象 (如 LatLng 对象),和 Map 对象来显示它。
+在 Mapquest API 示例中，你会发现与下面类似的一行：
 
-1. 在 `var map ...` 行下面添加下列代码：
-
-   ```js
-   var marker = new google.maps.Marker({
-     position: latlng,
-     map: map,
-   });
-   ```
-
-   现在如果你刷新你的页面，你会看到地图中间弹出了一个小小的漂亮标记。这很酷，但是这并不是一个定制的标记图标 — 它使用了默认的标记图标。
+```js
+L.mapquest.key = "你的 API 密钥";
+```
 
-2. 如果要使用定制化的图标，我们需要在创建标记时通过 URL 来明确说明。首先，在刚才添加的代码块之后添加下面的代码：
+这一行指定了一个在你的应用中使用的 API 或开发者密钥——应用的开发者必须要申请获得一个密钥，然后在他们的代码中包含这个密钥，从而可以访问 API 的功能。在我们的示例中，我们只提供了一个占位符。
 
-   ```js
-   var iconBase = "https://maps.google.com/mapfiles/kml/shapes/";
-   ```
+> [!NOTE]
+> 当你创建自己的示例时，你需要将占位符替换为自己的 API 密钥。
 
-   这定义了所有 Google Maps 官方图标存储的 URL（如果你想的话你也可以使用你自己的图标存储位置）。
+其他 API 可能需要你以稍微不同的方式包含密钥，但大多数情况下的模式是相对类似的。
 
-3. 图标的位置应当在选项对象的`icon` 属性中说明。更新 Constructor 并添加 icon 属性，如下：
+要求提供密钥可以让 API 提供商让使用 API 的用户对他们的行为负责。当开发者注册了一个密钥后，他们就被 API 提供商所知。如果他们开始做一些恶意行为（例如跟踪人们的位置或尝试用大量请求来妨碍 API 正常工作），可以采取行动。最简单的行动就是撤销他们的 API 权限。
 
-   ```js
-   var marker = new google.maps.Marker({
-     position: latlng,
-     icon: iconBase + "flag_maps.png",
-     map: map,
-   });
-   ```
+## 拓展 Mapquest 示例
 
-   这里我们用`iconBase` 加上图标的文件名，从而创建完整 URL 的方式阐明了 icon 属性。现在尝试重新加载你的例子，你会看到你的地图上显示了一个定制的标记！
+让我们为 Mapquest 示例添加一些更多的功能，以展示如何使用 API 的其他功能。
 
-> **备注：** 访问 [Customizing a Google Map: Custom Markers](https://developers.google.com/maps/documentation/javascript/custom-markers) 以查看更多信息。
+1. 首先，在一个新目录中创建 [Mapquest 入门文件](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/mapquest/start/index.html)的副本。如果你已经[克隆了示例代码库](/zh-CN/docs/Learn#获取代码示例)，你将已经拥有这个文件的副本：你可以在 _javascript/apis/third-party-apis/mapquest/start_ 目录中找到它。
+2. 接下来，你需要访问 [Mapquest 开发者网站](https://developer.mapquest.com/)，创建一个账户，然后创建一个开发者密钥来使用你的示例。（在编纂本文时，它在网站上被称为“consumer key”，密钥创建过程还要求提供一个可选的“callback URL”。现在你并不需要给出 URL，只需留空即可。）
+3. 打开你的起始文件，并用你的密钥替换 API 密钥占位符。
 
-> **备注：** 访问 [Map marker or Icon names](https://fusiontables.google.com/DataSource?dsrcid=308519#map:id=3) 以找出还有哪些可以的图标，并查看它们的引用名称是什么。它们的文件名应当是当你点击它们时显示出的图标名，最后带有".png"。
+### 更改地图类型
 
-### 单击标记时显示弹出窗口
+Mapquest API 可以显示多种不同类型的地图。找到以下行：
 
-Google 地图的另一个常见用例是在点击其名称或标记时显示有关某个地点的更多信息（弹出式广告在 Google Maps API 中称为信息窗口）。这也很容易实现，所以让我们来看看它。
+```js
+layers: L.mapquest.tileLayer("map");
+```
 
-1. 首先，你需要指定一个包含 HTML 的 JavaScript 字符串，该字符串将定义弹出窗口的内容。这将由 API 注入弹出窗口，并且可以包含你想要的任何内容。在`google.maps.Marker()`构造函数定义下面添加以下行：
+将 `'map'` 改为 `'hybrid'` 就可以显示混合样式的地图。你还可以尝试其他取值：[`tileLayer` 参考页面](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/)展示了可用的不同选项以及更多信息。
 
-   ```js
-   var contentString =
-     '<div id="content"><h2 id="firstHeading" class="firstHeading">Custom info window</h2><p>This is a cool custom info window.</p></div>';
-   ```
+### 添加不同的控件
 
-2. 然后，你需要使用`google.maps.InfoWindow()` 构造器，创建一个新的 info window object。在之前的代码下面，添加以下代码：
+地图有许多不同的控件；默认情况下，它只显示缩放控件。你可以使用 `map.addControl()` 方法扩展可用的控件；将下面代码添加到你的代码中：
 
-   ```js
-   var infowindow = new google.maps.InfoWindow({
-     content: contentString,
-   });
-   ```
+```js
+map.addControl(L.mapquest.control());
+```
 
-   还有其他可用的属性 (查看 [Info Windows](https://developers.google.com/maps/documentation/javascript/infowindows)), 但是在这里我们只具体说明指向内容源的`content` 属性。
+[`mapquest.control()` 方法](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/)创建了一个简单的全功能控件集，默认情况下放置在右上角。你可以通过指定一个包含 `position` 属性的选项对象来调整位置。`position` 属性的值是一个字符串，指定控件的位置。例如，试试这个：
 
-3. 最后，为了在单击标记 (marker) 时显示弹出窗口，我们使用了一个简单的点击事件处理器。在`google.maps.InfoWindow()`构造器代码下面，添加以下代码：
+```js
+map.addControl(L.mapquest.control({ position: "bottomright" }));
+```
 
-   ```js
-   marker.addListener("click", function () {
-     infowindow.open(map, marker);
-   });
-   ```
+还有其他类型的控件，例如 [`mapquest.searchControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/) 和 [`mapquest.satelliteControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/)，有些控件非常复杂且功能强大。你可以试试这些控件，看看能做出什么。
 
-   在函数中，我们只需调用 infowindow 的 `open()` 函数，该函数将要显示它的地图和希望它显示在旁边的标记作为参数。
+### 添加自定义标记
 
-4. 现在尝试重新加载示例，然后单击标记！
+在地图上的某个点添加标记（图标）很容易——只需使用 [`L.marker()`](https://leafletjs.com/reference.html#marker) 方法（这好像在相关的 Leaflet.js 文档中有详细说明）。再次在 `window.onload` 中添加以下代码到你的示例中：
 
-### Controlling what map controls are displayed
+```js
+L.marker([53.480759, -2.242631], {
+  icon: L.mapquest.icons.marker({
+    primaryColor: "#22407F",
+    secondaryColor: "#3B5998",
+    shadow: true,
+    size: "md",
+    symbol: "A",
+  }),
+})
+  .bindPopup("This is Manchester!")
+  .addTo(map);
+```
 
-在原始 `google.maps.Map()`构造函数中，将看到 `disableDefaultUI: true` 。这将禁用你通常在 Google 地图上获得的所有标准 UI 控件。
+如你所见，最简化的代码需要两个参数：一个包含显示标记坐标的数组，以及一个包含 `icon` 属性的可选对象用于指定在该点处显示的图标。
 
-1. 将其值设置为 `false` （或完全删除此属性），重新加载示例，将看到地图缩放按钮、scale indicator 等等。
-2. 现在撤销上一次更改。
-3. 通过使用指定单个 UI 功能的其他属性，可以更精细地显示或隐藏控件。尝试在 `disableDefaultUI: true` 的下面添加代码（请记住在 `disableDefaultUI: true` 之后输入逗号，否则将收到错误）：
+图标使用 [`mapquest.icons.marker()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/) 方法定义，其中包含标记的颜色和大小等信息。
 
-   ```js
-   zoomControl: true,
-   mapTypeControl: true,
-   scaleControl: true,
-   ```
+在第一个方法调用的末尾，我们链接了 `.bindPopup('This is Manchester!')`，定义了在标记被点击时显示的内容。
 
-4. 现在尝试重新加载示例以查看这些属性的效果。你可以在 [MapOptions object reference page](https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions)找到更多属性。
+最后，我们链接 `.addTo(map)` 到链的末尾，将标记实际添加到地图上。
 
-就是现在 - 看看 [Google Maps APIs documentation](https://developers.google.com/maps/documentation/javascript/)，发现更多乐趣！
+查看文档中展示的其他选项，看看你能做出什么！Mapquest 提供了一些非常先进的功能，如方向、搜索等。
 
-## 一个 RESTful API — NYTimes
+> [!NOTE]
+> 如果你在使示例工作时遇到困难，请检查你的代码与我们的[完成版本](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/mapquest/finished/script.js)是否一致。
 
-现在让我们看看另一个 API 示例 - [New York Times API](https://developer.nytimes.com)。此 API 允许你检索纽约时报的新闻故事信息并将其显示在你的网站上。这种类型的 API 称为 RESTful API - 我们不像使用 Google 地图那样使用 JavaScript 库的功能获取数据，而是通过向特定网址发出 HTTP 请求来获取数据，其中包含搜索术语和其他属性编码的数据 URL（通常作为 URL 参数）。这是你在 API 中遇到的常见模式。
+## RESTful API——纽约时报
 
-## 使用第三方 API 的方法
+现在我们来看看另一个 API 示例——[纽约时报 API](https://developer.nytimes.com)。这个 API 允许你检索纽约时报新闻故事信息并在你的网站上显示。这种类型的 API 被称为 **RESTful API**——与我们在 Mapquest 中使用 JavaScript 库功能获取数据不同，我们通过向特定 URL 发送 HTTP 请求来获取数据，数据如搜索词和其他属性编码在 URL 中（通常作为 URL 参数）。这是你会在 API 中遇到的常见模式。
 
-下面我们将带你完成练习，向你展示如何使用 NYTimes API，它还提供了一组更为通用的步骤，你可以将其用作处理新 API 的方法。
+下面我们将带你完成一个练习，展示如何使用纽约时报 API，并提供一个通用的步骤集，你可以用来作为使用新 API 的方法。
 
 ### 查找文档
 
-当你想要使用第三方 API 时，必须找出文档的位置，以便了解 API 具有哪些功能，以及如何使用它们等等。NYTimes API 文档位于 <https://developer.nytimes.com/>。
+当你想使用第三方 API 时，找到文档的位置是至关重要的，这样你才能找到 API 的功能，如何使用它们等。纽约时报 API 文档在 <https://developer.nytimes.com/>。
 
-### 获取一个开发者密钥
+### 获取开发者密钥
 
-出于安全性和问责制的原因，大多数 API 都要求你使用某种开发人员密钥。要注册 NYTimes API 密钥，你需要访问 <https://developer.nytimes.com/signup>。
+出于安全和责任的考虑，大多数 API 要求你使用某种开发者密钥。请按照 <https://developer.nytimes.com/get-started> 的指示注册一个纽约时报 API 密钥。
 
-1. 申请“Article Search API”的 API key——新建一个应用，选择这个 API，（填写名称和描述，打开“Article Search API”下面的开关，然后点击“创建（Create）”）
-2. 从结果页面获取 API。
-3. 现在开始构建这个应用，下载 [nytimes_start.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/nytimes_start.html) 和 [nytimes.css](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/nytimes.css) 到一个新的本地目录。如果已经克隆过这个仓库 [cloned the examples repository](/zh-CN/docs/Learn#Getting_our_code_examples), 里面就已经有这 2 个文件了，它们存放在 _javascript/apis/third-party-apis/nytimes_ 目录下。HTML 文件里的 `<script>` 标签下已经包含了构建这个应用需要用到的变量；下面我们来填写函数。
+1. 让我们请求一个文章搜索 API 的密钥——创建一个新应用，选择这个 API 作为你想要使用的 API（填写名称和描述，在“Article Search API”下切换开关到开启位置，然后点击“Create”）。
+2. 从结果页面获取 API 密钥。
+3. 现在，开始修改示例。先将 [nytimes/start](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/nytimes/start) 目录中的所有文件复制一份。如果你已经[克隆了示例代码库](/zh-CN/docs/Learn#获取代码示例)，你将已经拥有这些文件的副本，可以在 _javascript/apis/third-party-apis/nytimes/start_ 目录中找到。最开始 `script.js` 文件会包含设置示例所需的一些变量；下面我们将填写所需的功能。
 
-下面是这个应用最终的样子，可以在搜索框里填写条目、起始日期和结束日期，作为参数向 Article Search API 接口发起查询，然后显示查询结果。
+该应用程序最终允许你输入搜索词和可选的开始和结束日期，然后使用这些信息查询文章搜索 API 并显示搜索结果。
 
-![](nytimes-search.png)
+![从纽约时报文章搜索 API 检索到的示例搜索查询与结果的截图。](nytimes-example.png)
 
-### 将 API 连接到应用
+### 将 API 连接到你的应用程序
 
-首先，建立 API 和本地应用的连接。对于这个 API，每次向服务器对应的 URL 发起 get 请求，都需要把 API key 作为 get 请求的参数。
+首先，你需要在 API 和你的应用程序之间建立连接。在纽约时报文章搜索这个 API 的情况下，你需要每次从服务请求数据时都将 API 密钥作为 [get](/zh-CN/docs/Web/HTTP/Methods/GET) 参数包含在正确的 URL 中。
 
-1. 在代码中找到下面这行：
+1. 找到以下行：
 
    ```js
    var key = "INSERT-YOUR-API-KEY-HERE";
    ```
 
-   把 `INSERT-YOUR-API-KEY-HERE` 替换为在上一节中获得的 API key.
+   用你在上一部分中获取的实际 API 密钥替换现有的 API 密钥。
 
-2. 添加下面这行代码到 JavaScript 代码中。添加到注释 "`// Event listeners to control the functionality`" 的下面。当表单提交时 (按钮按下时) 运行这个函数 `submitSearch()` .
+2. 在“`// Event listeners to control the functionality`”注释下面的 JavaScript 中添加以下行。当表单提交（按钮被按下）时，这会调用一个名为 `submitSearch()` 的函数。
 
    ```js
    searchForm.addEventListener("submit", submitSearch);
    ```
 
-3. 添加 `submitSearch()` 和 `fetchResults()` 函数如下：
+3. 现在在上面的行下方添加 `submitSearch()` 和 `fetchResults()` 函数定义：
 
-   ```plain
+   ```js
    function submitSearch(e) {
      pageNumber = 0;
      fetchResults(e);
    }
 
    function fetchResults(e) {
-     // Use preventDefault() to stop the form submitting
+     // 调用 preventDefault() 来停止默认的表单提交行为
      e.preventDefault();
 
-     // Assemble the full URL
-     url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
+     // 组装完整 URL
+     let url = `${baseURL}?api-key=${key}&page=${pageNumber}&q=${searchTerm.value}&fq=document_type:("article")`;
 
-     if(startDate.value !== '') {
-       url += '&begin_date=' + startDate.value;
-     };
-
-     if(endDate.value !== '') {
-       url += '&end_date=' + endDate.value;
-     };
+     if (startDate.value !== "") {
+       url = `${url}&begin_date=${startDate.value}`;
+     }
 
+     if (endDate.value !== "") {
+       url = `${url}&end_date=${endDate.value}`;
+     }
    }
    ```
 
-`submitSearch()` 设置起始页码为 0，然后调用 `fetchResults()` 函数。其中，先调用事件对象的 [`preventDefault()`](/zh-CN/docs/Web/API/Event/preventDefault) 函数，阻止实际的表单提交事件 (会破坏应用，至于为什么可以自己试一试)。然后，处理字符串，构建完整的请求 URL。以下是几个必要的步骤：
+`submitSearch()` 将页码设置回 0，然后调用 `fetchResults()`。首先在事件对象上调用 [`preventDefault()`](/zh-CN/docs/Web/API/Event/preventDefault)，以阻止表单实际提交（否则会破坏示例运行）。接下来，我们使用一些字符串操作来组装我们将向其发送请求的完整 URL。我们从组装 URL 的部分开始（我们认为对这个示例来说，组装 URL 是必需的）：
 
-- 基本的 URL ( `baseURL` 变量).
-- API key，需要放到 `api-key` URL 参数里面去 ( `key` 变量).
-- 页码，需要放到 `page` URL 参数里面去 ( `pageNumber` 变量).
-- 搜索项，需要放到 `q` URL 参数里面去 ( `searchTerm` 输入框的文字 {{htmlelement("input")}}).
+- 基本 URL（取自 `baseURL` 变量）。
+- API 密钥。它需要在 `api-key` URL 参数中指定（取自 `key` 变量）。
+- 页码。它需要在 `page` URL 参数中指定（取自 `pageNumber` 变量）。
+- 搜索词作为一个查询字符串参数。它需要在 `q` URL 参数中指定（取自 `searchTerm` 文本 {{htmlelement("input")}} 的值）。
+- 要返回结果中的文档类型。它需要在 `fq` URL 参数中传递一个表达式。在该示例中，我们希望返回的是文章。
 
-然后，用几个 [`if()`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) 代码块检测 `startDate` 和 `endDate` `<input>` 输入框里面是否有文字内容。如果有，再把输入框里的内容分别填写到 `begin_date` 和 `end_date` URL 参数里面去。
+接下来，我们使用几个 [`if ()`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) 语句检查 `startDate` 和 `endDate` 元素是否已填入值。如果填入了值，我们将其分别附加到 URL 中的 `begin_date` 和 `end_date` 参数中。
 
-最后，完整的 URL 如下所示：
+因此，完整的 URL 可能如下所示：
 
-```plain
-https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=4f3c267e125943d79b0a3e679f608a78&page=0&q=cats
-&begin_date=20170301&end_date=20170312
+```url
+https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats&fq=document_type:("article")&begin_date=20170301&end_date=20170312
 ```
 
-> **备注：** 更多 URL 参数的说明参考 [NYTimes developer docs](https://developer.nytimes.com/).
+> [!NOTE]
+> 你可以在[纽约时报开发者文档](https://developer.mytimes.com/)中找到更多关于可以包含的 URL 参数的详细信息。
 
-> **备注：** 示例包含了基本的表单数据验证操作 — 表项提交之前必须有内容 (用 `required` 属性实现)，此外，日期字段有确定的 `pattern` 属性，它们的值必须由 8 个数字组成 (`pattern="[0-9]{8}"`)，否则不能提交。更多细节参考 [Form data validation](/zh-CN/docs/Learn/HTML/Forms/Form_validation)
+> [!NOTE]
+> 这个例子包含了基本的表单数据验证——在表单提交之前，搜索词字段必须被填入（通过 `required` 属性实现），日期字段包含 `pattern` 属性，这意味着它们的值必须由 8 个数字组成（`pattern="[0-9]{8}"`）。有关这些工作原理的更多详情，请参阅[表单数据验证](/zh-CN/docs/Learn/Forms/Form_validation)。
 
-### 从 api 请求数据
+### 从 API 请求数据
 
-现在 URL 已经构造好了，下面向它发起请求。本例使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)
+现在我们已经构建了 URL，让我们向其发出请求。我们将使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch) 来实现这一目的。
 
-把下面的代码块添加到 `fetchResults()` 函数末尾的大括号里面：
+在 `fetchResults()` 函数内部的闭合大括号之前，添加以下代码块：
 
 ```js
-// Use fetch() to make the request to the API
+// 使用 fetch() 向 API 发出请求
 fetch(url)
-  .then(function (result) {
-    return result.json();
-  })
-  .then(function (json) {
-    displayResults(json);
-  });
+  .then((response) => response.json())
+  .then((json) => displayResults(json))
+  .catch((error) => console.error(`Error fetching data: ${error.message}`));
 ```
 
-这段代码用于发起请求，把变量 `url` 作为 [`fetch()`](/zh-CN/docs/Web/API/fetch) 函数的参数，用 [`json()`](/zh-CN/docs/Web/API/Body/json) 函数把响应的结果转换为 JSON 格式，然后把 JSON 数据传递给 `displayResults()` 函数，数据就可以在 UI 中显示出来了。
+这里我们通过将 `url` 变量传递给 [`fetch()`](/zh-CN/docs/Web/API/fetch) 来运行请求，使用 [`json()`](/zh-CN/docs/Web/API/Response/json) 函数将响应主体转换为 JSON，然后将生成的 JSON 传递给 `displayResults()` 函数，以便在 UI 中显示数据。我们还捕获并记录可能抛出的任何错误。
 
 ### 显示数据
 
-OK，下面是显示数据的部分。把下面的函数添加到 `fetchResults()` 函数下面。
+让我们看看如何显示数据。在 `fetchResults()` 函数下方添加以下函数。
 
 ```js
 function displayResults(json) {
@@ -320,86 +281,76 @@ function displayResults(json) {
     section.removeChild(section.firstChild);
   }
 
-  var articles = json.response.docs;
+  const articles = json.response.docs;
 
-  if (articles.length === 10) {
-    nav.style.display = "block";
-  } else {
-    nav.style.display = "none";
-  }
+  nav.style.display = articles.length === 10 ? "block" : "none";
 
   if (articles.length === 0) {
-    var para = document.createElement("p");
+    const para = document.createElement("p");
     para.textContent = "No results returned.";
     section.appendChild(para);
   } else {
-    for (var i = 0; i < articles.length; i++) {
-      var article = document.createElement("article");
-      var heading = document.createElement("h2");
-      var link = document.createElement("a");
-      var img = document.createElement("img");
-      var para1 = document.createElement("p");
-      var para2 = document.createElement("p");
-      var clearfix = document.createElement("div");
-
-      var current = articles[i];
+    for (const current of articles) {
+      const article = document.createElement("article");
+      const heading = document.createElement("h2");
+      const link = document.createElement("a");
+      const img = document.createElement("img");
+      const para1 = document.createElement("p");
+      const keywordPara = document.createElement("p");
+      keywordPara.classList.add("keywords");
+
       console.log(current);
 
       link.href = current.web_url;
       link.textContent = current.headline.main;
-      para1.textContent = current.lead_paragraph;
+      para1.textContent = current.snippet;
       para2.textContent = "Keywords: ";
-      for (var j = 0; j < current.keywords.length; j++) {
-        var span = document.createElement("span");
-        span.textContent += current.keywords[j].value + " ";
-        para2.appendChild(span);
+      for (const keyword of current.keywords) {
+        const span = document.createElement("span");
+        span.textContent = `${keyword.value} `;
+        keywordPara.appendChild(span);
       }
 
       if (current.multimedia.length > 0) {
-        img.src = "http://www.nytimes.com/" + current.multimedia[0].url;
+        img.src = `https://www.nytimes.com/${current.multimedia[0].url}`;
         img.alt = current.headline.main;
       }
 
-      clearfix.setAttribute("class", "clearfix");
-
       article.appendChild(heading);
       heading.appendChild(link);
       article.appendChild(img);
       article.appendChild(para1);
-      article.appendChild(para2);
-      article.appendChild(clearfix);
+      article.appendChild(keywordPara);
       section.appendChild(article);
     }
   }
 }
 ```
 
-这一段有好多代码；下面一一解释：
-
-- 第一个 [`while`](/zh-CN/docs/Web/JavaScript/Reference/Statements/while) 循环是通用的操作，用于删除 DOM 结点里面的所有内容，在本例中是 {{htmlelement("section")}} 元素。不断查询 `<section>` 结点是否有子节点，如果有，就删除。当 `<section>` 没有子节点时退出循环。
-- 然后，把 `articles` 变量赋值为 `json.response.docs` — 它来自查询结果，是所有文章对象构成的数组。单独写出这一行来，下面的代码会清晰一些。
-- 第一个 [`if()`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) 检测查询到的文章数量是否是 10 (该 API 一次最多返回 10 篇文章) 如果是，就把 {{htmlelement("nav")}} 显示出来，里面包含有 _前 10/后 10(Previous 10/Next 10)_ 翻页按钮。如果返回的文章数量不足 10，就直接显示在 1 页里，不需要显示翻页按钮。在下一节中将展示翻页功能的实现。
-- 下一个 `if()` 检测是否没有文章返回。如果是，就什么都不显示 — 创建一个 {{htmlelement("p")}} 结点，填写提示 "无结果。" 然后把该结点插入到 `<section>` 结点中。
-- 如果有一些文章返回，第一步，创建所有用于展示新闻信息的结点，依次填写对应的文章内容，再把这些结点插入到合适的 DOM 结点下。至于文章对象里面的哪个属性包含需要展示的信息，查询 [Article Search API reference](https://developer.nytimes.com/article_search_v2.json). 大部分操作都很简单，但是个别需要提示一下：
+这里有很多代码，让我们一步步解释它们：
 
-  - 使用 [for loop](/zh-CN/docs/Web/JavaScript/Reference/Statements/for) (`for(var j = 0; j < current.keywords.length; j++) { ... }` ) 遍历每篇文章关联的关键字，再把它们插入到各自的 {{htmlelement("span")}} 标签，在 `<p>` 标签里面，这样做可以方便样式表的编辑。
-  - 使用 `if()` 代码块 (`if(current.multimedia.length > 0) { ... }`) 检测每篇文章是否有对应的图片 (有些没有) 。只有当检测到有时，显示首张图片 (否则抛出异常)。
-  - 把 \<div> 结点设置一个 class 属性 "clearfix"，这样清理操作 (apply clearing to it) 就很容易了。
+- [`while`](/zh-CN/docs/Web/JavaScript/Reference/Statements/while) 循环是一个常见的模式，用于删除 DOM 元素的所有内容，在这种情况下是 {{htmlelement("section")}} 元素。我们不断检查 `<section>` 是否有第一个子元素，如果有，我们就删除第一个子元素。循环在 `<section>` 没有任何子元素时结束。
+- 接下来，我们将 `articles` 变量设置为等于 `json.response.docs`（一个包含所有表示搜索返回文章对象的数组）。这纯粹是为了简化后续代码。
+- 第一个 [`if ()`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) 块检查是否返回了 10 篇文章（API 一次最多返回 10 篇文章）。如果是，我们显示包含 _Previous 10_/_Next 10_ 分页按钮的 {{htmlelement("nav")}}。如果返回的文章少于 10 篇，它们都可以放在一页上，所以我们不需要显示分页按钮。我们将在下一节中接入分页功能。
+- 下一个 `if ()` 块检查是否未返回任何文章。如果是，我们不会尝试显示任何内容——我们创建一个包含文本“No result returned.”的 {{htmlelement("p")}} 元素并将其插入到 `<section>` 中。
+- 如果返回了一些文章，我们首先创建我们想用来显示每个新闻故事的所有元素，将正确的内容插入到每个元素中，然后将它们插入到 DOM 中的适当位置。为了找出文章对象中哪些属性包含要显示的正确数据，我们查阅了文章搜索 API 参考（参见[纽约时报 API](https://developer.nytimes.com/apis)）。大多数操作是显而易见的，但有几个值得指出：
+  - 我们使用 [`for...of`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) 循环遍历与每篇文章关联的所有关键词，并将每个关键词插入到自己的 {{htmlelement("span")}} 中，放在一个 `<p>` 中。这是为了便于对每个关键词进行样式设置。
+  - 我们使用一个 `if ()` 块（`if (current.multimedia.length > 0) { }`）检查每篇文章是否有任何相关图片，因为有些文章没有。如果存在，我们只显示第一张图片；否则会抛出错误。
 
-### 添加分页按钮
+### 接入分页按钮
 
-为了使分页按钮工作，我们将增加（或减少）`pageNumber` 变量的值，然后用页面 url 参数中包含的新值重新运行 fetch 请求。这么做是因为 NYTimes API 每次最多只返回 10 篇文章 — 如果查询结果超过 10 篇，而 `page` URL 参数设为 0 (或者忽略这个参数 — 0 是默认值)，只返回前 10 篇 (0-9) ，后续的 10 篇 (10-19) 对应参数值 1，以此类推。
+要使分页按钮工作，我们将增加（或减少）`pageNumber` 变量的值，然后重新运行 fetch 请求，并在页面 URL 参数中包含新值。这是可以做到的，因为纽约时报 API 一次只返回 10 个结果（如果有超过 10 个结果可用）。如果 pageURL 参数设置为 0（不包括任何值时的默认值也为 0），它将返回前 10 个（0-9））；如果设置为 1，则会返回接下来的 10 个（10-19），依此类推。
 
-根据这个特性就可以轻松实现一个简单的翻页函数。
+这允许我们编写一个简单的分页函数。
 
-1. 下面的代码中，在 [`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener) 函数中添加这 2 个新事件，即把 `nextPage()` 和 `previousPage()` 函数链接到相应的按键点击事件上：
+1. 在现有的 [`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener) 调用下方，添加这两个新的调用，它们在相关按钮被点击时调用 `nextPage()` 和 `previousPage()` 函数：
 
    ```js
    nextBtn.addEventListener("click", nextPage);
    previousBtn.addEventListener("click", previousPage);
    ```
 
-2. 在上边代码的基础上，定义这 2 个函数 — 添加下面代码：
+2. 在之前添加的内容下面，让我们定义这两个函数——现在添加以下代码：
 
    ```js
    function nextPage(e) {
@@ -417,33 +368,34 @@ function displayResults(json) {
    }
    ```
 
-   第一个函数很简单 — 增加 `pageNumber` 变量，然后再次运行 `fetchResults()` 函数 展示下一页的结果。
-
-   第二个函数基本上执行相反的操作，不过有个额外的步骤是检测 `pageNumber` 在 -1 之前是否已经是 0 — 如果 fetch 请求的 `page` URL 参数是负数，会导致错误。如果 `pageNumber` 已经是 0，则直接执行 [`return`](/zh-CN/docs/Web/JavaScript/Reference/Statements/return) 退出函数，避免多余的计算。 (如果当前页面已经是首页，就不需要重新加载)。
+   第一个函数增加 `pageNumber` 变量的值，然后重新运行 `fetchResults()` 函数以显示下一页的结果。
 
-> **备注：** 完整代码参考 [finished nytimes API example code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) (实例参考 [see it running live here](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)).
+   第二个函数几乎以相同的方式反向工作，但我们还需要在减少 `pageNumber` 之前检查 `pageNumber` 是否已经为零——如果 Fetch 请求运行时 `pageURL` 参数为负数，可能会导致错误。如果 `pageNumber` 已经为 0，我们通过 [`return`](/zh-CN/docs/Web/JavaScript/Reference/Statements/return) 退出函数——如果我们已经在第一页，我们不需要再次加载相同的结果。
 
-## YouTube 示例
+> [!NOTE]
+> 你可以在我们的 [GitHub 上完成的纽约时报 API 示例代码](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/finished/index.html)找到更多内容（也可以[在这里查看它的运行实例](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/finished/)）。
 
-我们还做了另外一个示例用来学习 — 参考 [YouTube video search example](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/youtube/). 这个示例用了下面 2 个 API：
+## Youtube 示例
 
-- [YouTube Data API](https://developers.google.com/youtube/v3/docs/) ，搜索 YouTube 视频并返回结果。
-- [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) ，把返回的视频查询结果展示到 IFrame 视频播放器里，然后就可以播放了。
+我们还为你构建了另一个示例供你学习——请参阅我们的 [YouTube 视频搜索示例](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/youtube/)。这个示例使用了两个相关的 API：
 
-这个示例的有趣之处在于，它把两个第三方 API 结合起来做了一个应用。第一个 API 是 RESTful API，而第二个 API 更像是 Mapquest (有 API 专用方法 (API-specific methods), etc.)。但是，值得注意的是，这两个 API 均需要将 JavaScript 库应用于该页面。RESTful API 自己有用于处理 HTTP 请求并返回结果的函数。
+- [YouTube Data API](https://developers.google.com/youtube/v3/docs/) 搜索 YouTube 视频并返回结果。
+- [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) 在 IFrame 视频播放器中显示返回的视频示例，以便你可以观看它们。
 
-![](youtube-example.png)
+这个示例很有趣，因为它展示了两个相关的第三方 API 被一起使用来构建一个应用程序。第一个是一个 RESTful API，而第二个是一个更像 Mapquest 的 API（带有 API 相关的方法等）。值得一提的是，这两个 API 都需要将 JavaScript 库应用到页面中。RESTful API 有可用的函数来处理 HTTP 请求并返回结果。
 
-本文不会对该示例做过多的叙述，[源码](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/youtube)中有详细的注释。
+我们不会在本文中详细说明这个示例——源代码中包含了详细的注释，解释了它的工作原理。
 
-运行源码需要：
+要运行它，你需要：
 
-- 从 [Google Cloud](https://cloud.google.com/) 获取 API key.
-- 找到源码中的 `ENTER-API-KEY-HERE` 字符串，替换为 API key.
-- 把示例运行在 web 服务器上。只是用浏览器打开文件是不会工作的 (例如，通过 `file://` URL 打开).
+- 阅读 [YouTube Data API 概述](https://developers.google.com/youtube/v3/getting-started)文档。
+- 访问[启用的 API](https://console.cloud.google.com/apis/enabled)页面，并在 API 列表中确保 YouTube Data API v3 的状态为 ON。
+- 从 [Google Cloud](https://cloud.google.com/) 获取 API 密钥。
+- 在源代码中找到字符串 `ENTER-API-KEY-HERE`，并用你的 API 密钥替换它。
+- 通过 Web 服务器运行示例。如果你直接在浏览器中运行它（即通过 `file://URL`），它将无法工作。
 
-## 小结
+## 总结
 
-本文介绍了如何使用第三方 API 给网页添加功能。
+这篇文章为你介绍了如何使用第三方 API 来为你的网站添加功能。
 
 {{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/nytimes-search.png b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/nytimes-search.png
deleted file mode 100644
index aca28bb9006c28..00000000000000
Binary files a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/nytimes-search.png and /dev/null differ
diff --git a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
index f04b3c9d6ef940..9947c3b19c0f93 100644
--- a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
@@ -24,7 +24,8 @@ slug: Learn/JavaScript/First_steps/A_first_splash
 
 我们并不要求你立刻完整理解所有代码：你不需要借此学会 JavaScript，甚至不需要理解我们要求你编写的全部代码。当前只是概括地介绍一些抽象的概念，让你了解 JavaScript 的特性是如何协同工作的，以及获得编写 JavaScript 的一些感受。所有具体特性将在后续文章中详细介绍，如果你没有很快地全部理解它们，请不要担心！
 
-> **备注：** 可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。
+> [!NOTE]
+> 可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。
 
 ## 像程序员一样思考
 
@@ -136,7 +137,8 @@ let resetButton;
 
 - 倒数第二个变量存储一个计数器并初始化为 1（用于跟踪玩家猜测的次数），最后一个变量存储对重置按钮的引用，这个按钮尚不存在（但稍后就有了）。
 
-> **备注：** 稍后将讲解更多关于变量和常量的信息。[参见下一篇文章](/zh-CN/docs/Learn/JavaScript/First_steps/Variables)。
+> [!NOTE]
+> 稍后将讲解更多关于变量和常量的信息。[参见下一篇文章](/zh-CN/docs/Learn/JavaScript/First_steps/Variables)。
 
 ### 函数（Function）
 
diff --git a/files/zh-cn/learn/javascript/first_steps/arrays/index.md b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
index 418f457a4e7d55..c5eaa6eebbf306 100644
--- a/files/zh-cn/learn/javascript/first_steps/arrays/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
@@ -174,7 +174,8 @@ slug: Learn/JavaScript/First_steps/Arrays
    // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    ```
 
-   > **备注：** 我们以前说过，但还是提醒一下——电脑从 0 开始计数！
+   > [!NOTE]
+   > 我们以前说过，但还是提醒一下——电脑从 0 开始计数！
 
 3. 请注意，数组中包含数组的话称之为多维数组。你可以通过将两组方括号链接在一起来访问数组内的另一个数组。例如，要访问数组内部的一个项目，即 `random` 数组中的第三个项目（参见上一节），我们可以这样做：
 
@@ -216,7 +217,8 @@ for (let i = 0; i < sequence.length; i++) {
 
 通常，你会看到一个包含在一个长长的字符串中的原始数据，你可能希望将有用的项目分成更有用的表单，然后对它们进行处理，例如将它们显示在数据表中。为此，我们可以使用 {{jsxref("String.prototype.split()","split()")}} 方法。在其最简单的形式中，这需要一个参数，你要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。
 
-> **备注：** 好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。
+> [!NOTE]
+> 好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。
 
 1. 我们来玩一下这个方法，看看它是如何工作的。首先，在控制台中创建一个字符串：
 
@@ -407,7 +409,8 @@ window.addEventListener("load", updateCode);
 
 在这个例子中，我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站，一个搜索框。这个想法是，当在搜索框中输入时，列表中会显示 5 个先前的搜索字词。当列表项目数量超过 5 时，每当新项目被添加到顶部时，最后一个项目开始被删除，因此总是显示 5 个以前的搜索字词。
 
-> **备注：** 在真正的搜索应用中，你可能可以点击先前的搜索字词返回上一次搜索，并显示实际的搜索结果！我们现在只是保持简单的逻辑。
+> [!NOTE]
+> 在真正的搜索应用中，你可能可以点击先前的搜索字词返回上一次搜索，并显示实际的搜索结果！我们现在只是保持简单的逻辑。
 
 要完成该应用程序，我们需要你：
 
diff --git a/files/zh-cn/learn/javascript/first_steps/index.md b/files/zh-cn/learn/javascript/first_steps/index.md
index c0e366b665739a..bd90fe0e7722ee 100644
--- a/files/zh-cn/learn/javascript/first_steps/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/index.md
@@ -15,7 +15,8 @@ slug: Learn/JavaScript/First_steps
 - [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。
 - [CSS 简介](/zh-CN/docs/Learn/CSS/Introduction_to_CSS)。
 
-> **备注：** 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 和 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 和 [Glitch](https://glitch.com/)。
 
 ## 学习指南
 
diff --git a/files/zh-cn/learn/javascript/first_steps/math/index.md b/files/zh-cn/learn/javascript/first_steps/math/index.md
index 6f1e81895a4bef..db946e2f968344 100644
--- a/files/zh-cn/learn/javascript/first_steps/math/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/math/index.md
@@ -134,9 +134,11 @@ slug: Learn/JavaScript/First_steps/Math
   </tbody>
 </table>
 
-> **备注：** 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。
+> [!NOTE]
+> 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。
 
-> **备注：** 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 `Math.pow(7, 3)` 中，`7` 是基数，`3` 是指数，因此表达式的结果是 `343`。 `Math.pow(7, 3)` 相当于 `7 ** 3`。
+> [!NOTE]
+> 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 `Math.pow(7, 3)` 中，`7` 是基数，`3` 是指数，因此表达式的结果是 `343`。 `Math.pow(7, 3)` 相当于 `7 ** 3`。
 
 我们可能不需要教你如何做基础数学，但我们想测试你对所涉及的语法的理解。尝试将下面的示例输入到[开发者工具 JavaScript 控制台](/zh-CN/docs/Learn/Discover_browser_developer_tools)中。
 
@@ -190,7 +192,8 @@ num2 + num1 / 8 + 2;
 
 尝试看看。
 
-> **备注：** 注意：可以在[表达式和运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)中找到所有 JavaScript 运算符的完整列表及其优先级。
+> [!NOTE]
+> 注意：可以在[表达式和运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)中找到所有 JavaScript 运算符的完整列表及其优先级。
 
 ## 自增和自减运算符
 
@@ -200,7 +203,8 @@ num2 + num1 / 8 + 2;
 guessCount++;
 ```
 
-> **备注：** 它们最常用于[循环](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)中，你将在以后的课程中了解。例如，假设你想循环查看价格表，并为每个价格增加销售税。你可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成——[在线查看效果](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html)，并[查看源代码](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/maths/loop.html)，看看是否可以发现增量器！我们稍后将会详细介绍循环。
+> [!NOTE]
+> 它们最常用于[循环](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)中，你将在以后的课程中了解。例如，假设你想循环查看价格表，并为每个价格增加销售税。你可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成——[在线查看效果](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html)，并[查看源代码](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/maths/loop.html)，看看是否可以发现增量器！我们稍后将会详细介绍循环。
 
 我们来试试看你们的控制台。首先，请注意，你不能将这些直接应用于一个数字，这可能看起来很奇怪，但是我们为变量赋值一个新的更新值，而不是对该值进行操作。以下将返回错误：
 
@@ -229,7 +233,8 @@ num2--;
 num2;
 ```
 
-> **备注：** 你可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 `++num1` 和 `--num2`。
+> [!NOTE]
+> 你可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 `++num1` 和 `--num2`。
 
 ## 赋值运算符
 
@@ -260,7 +265,8 @@ let y = 4; // y 包含值 4
 x *= y; // x 现在包含值 12
 ```
 
-> **备注：** 虽然有很多可用的[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#Assignment_operators)，但是这些是你现在应该学习的基本的一类。
+> [!NOTE]
+> 虽然有很多可用的[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#Assignment_operators)，但是这些是你现在应该学习的基本的一类。
 
 ## 主动学习：调整画布框的大小
 
@@ -294,7 +300,8 @@ x *= y; // x 现在包含值 12
 | <=     | 小于或等于 | 测试左值是否小于或等于右值。   | `3 <= 2`      |
 | >=     | 大于或等于 | 测试左值是否大于或等于正确值。 | `5 >= 4`      |
 
-> **备注：** 你可能会看到有些人在他们的代码中使用`==`和`!=`来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与`===`/`!==`不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议你使用这些严格的版本。
+> [!NOTE]
+> 你可能会看到有些人在他们的代码中使用`==`和`!=`来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与`===`/`!==`不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议你使用这些严格的版本。
 
 如果你尝试在控制台中输入这些值，你将看到它们都返回 `true`/`false` 值 - 我们在上一篇文章中提到的那些布尔值。这些是非常有用的，因为它们允许我们在我们的代码中做出决定 - 每次我们想要选择某种类型时，都会使用这些代码，例如：
 
@@ -333,7 +340,8 @@ function updateBtn() {
 
 你可以在 updateBtn（）函数内看到正在使用的等号运算符。在这种情况下，我们不会测试两个数学表达式是否具有相同的值 - 我们正在测试一个按钮的文本内容是否包含某个字符串 - 但它仍然是工作原理。如果按钮当前为“启动机器（start machine）”，则将其标签更改为“停止机器（stop machine）”，并根据需要更新标签。如果按钮上写着“停机”时被按下，我们将显示回原来的内容。
 
-> **备注：** 这种在两个状态之间来回交换的行为通常被称为**切换**。它在一个状态和另一个状态之间切换 - 点亮，熄灭等
+> [!NOTE]
+> 这种在两个状态之间来回交换的行为通常被称为**切换**。它在一个状态和另一个状态之间切换 - 点亮，熄灭等
 
 ## 总结
 
@@ -341,6 +349,7 @@ function updateBtn() {
 
 在下一篇文章中，我们将探讨文本，以及 JavaScript 如何让我们操纵它。
 
-> **备注：** 如果你喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates)和[表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)来说，那是一个不错的地方。
+> [!NOTE]
+> 如果你喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates)和[表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)来说，那是一个不错的地方。
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
diff --git a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
index 8a71f137b8af7a..24d1fd308f3ec1 100644
--- a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
@@ -27,7 +27,8 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 
 测验开始之前需要下载并保存 [index.html](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html)、[style.css](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/style.css)、[raw-text.txt](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt)。
 
-> **备注：** 你还可以用类似 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 `<script>` 元素。
+> [!NOTE]
+> 你还可以用类似 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 `<script>` 元素。
 
 ## 项目简介
 
@@ -140,7 +141,8 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 
 {{ EmbedLiveSample('项目简介', '100%', 350) }}
 
-> **备注：** 点击在线试用汉化版本。有兴趣还可以在本节结束后回来 [看看代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/assessment-finished)。（没兴趣就跳过吧 :）
+> [!NOTE]
+> 点击在线试用汉化版本。有兴趣还可以在本节结束后回来 [看看代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/assessment-finished)。（没兴趣就跳过吧 :）
 
 ## 步骤
 
diff --git a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
index 8ea1ca279761c9..e83ae8d6ebe5fb 100644
--- a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -7,11 +7,13 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
 
 本测试旨在评估读者对 [存储所需信息 - 变量](/zh-CN/docs/Learn/JavaScript/First_steps/Variables) 一文的理解程度。
 
-> **备注：** 可在下文的互动编辑器中尝试完成评估，也可借助 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) 等在线编程实用工具完成任务。
+> [!NOTE]
+> 可在下文的互动编辑器中尝试完成评估，也可借助 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) 等在线编程实用工具完成任务。
 >
 > 可访问本页最后一节来 [了解更多](#了解更多)。
 
-> **备注：** 以下示例中，如果代码存在错误，将在互动编译器的输出框中显示提示信息来帮助你完成，（如果使用下载版本，则在浏览器的 JavaScript 控制台显示）
+> [!NOTE]
+> 以下示例中，如果代码存在错误，将在互动编译器的输出框中显示提示信息来帮助你完成，（如果使用下载版本，则在浏览器的 JavaScript 控制台显示）
 
 ## 变量 1
 
diff --git a/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md
index 5d02f377240004..dad9d1c15da6a6 100644
--- a/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md
@@ -318,7 +318,8 @@ window.addEventListener("load", updateCode);
 3. 将此最新变量用作子字符串，将小写字符串的第一个字母从小写更改为大写。将此替换过程的结果存储在另一个新变量中。
 4. 让 `result` 变量的值与最终结果相等，而不是使用 `input` 变量。
 
-> **备注：** 一个提示 - 字符串方法的参数不必是字符串文字; 它们也可以是变量，甚至是在其上调用方法的变量。
+> [!NOTE]
+> 一个提示 - 字符串方法的参数不必是字符串文字; 它们也可以是变量，甚至是在其上调用方法的变量。
 
 ```html hidden
 <div class="output" style="min-height: 125px;">
diff --git a/files/zh-cn/learn/javascript/first_steps/variables/index.md b/files/zh-cn/learn/javascript/first_steps/variables/index.md
index 21654278dec793..93d41496ca39a8 100644
--- a/files/zh-cn/learn/javascript/first_steps/variables/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/variables/index.md
@@ -187,7 +187,8 @@ let myAge;
 
 {{ EmbedLiveSample('声明变量', '100%', 300) }}
 
-> **备注：** 在 JavaScript 中，所有代码指令都会以分号结尾 (`;`) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。
+> [!NOTE]
+> 在 JavaScript 中，所有代码指令都会以分号结尾 (`;`) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。
 
 你可以通过使用变量的方式来验证这个变量的数值是否在执行环境中已经存在。例如，
 
@@ -202,7 +203,8 @@ myAge;
 scoobyDoo;
 ```
 
-> **备注：** 千万不要把两个概念弄混淆了，“一个变量存在，但是没有数值”和“一个变量并不存在” — 他们完全是两回事 — 在前面你看到的盒子的类比中，不存在意味着没有可以存放变量的“盒子”。没有定义的值意味着有一个“盒子”，但是它里面没有任何值。
+> [!NOTE]
+> 千万不要把两个概念弄混淆了，“一个变量存在，但是没有数值”和“一个变量并不存在” — 他们完全是两回事 — 在前面你看到的盒子的类比中，不存在意味着没有可以存放变量的“盒子”。没有定义的值意味着有一个“盒子”，但是它里面没有任何值。
 
 ## 初始化变量
 
@@ -228,7 +230,8 @@ let myName = "Chris";
 
 这可能是大多数时间你都会使用的方式，因为它要比在单独的两行上做两次操作要快。
 
-> **备注：** 如果你写一个声明和初始化变量的多行 JavaScript 代码的程序，你可以在初始化变量之后再实际声明它，并且它仍然可以工作。这是因为变量的声明通常在其余的代码执行之前完成。这叫做**顶置**—阅读[var hoisting](/zh-CN/docs/Web/JavaScript/Reference/Statements/var#var_hoisting)来了解更多细节。
+> [!NOTE]
+> 如果你写一个声明和初始化变量的多行 JavaScript 代码的程序，你可以在初始化变量之后再实际声明它，并且它仍然可以工作。这是因为变量的声明通常在其余的代码执行之前完成。这叫做**顶置**—阅读[var hoisting](/zh-CN/docs/Web/JavaScript/Reference/Statements/var#var_hoisting)来了解更多细节。
 
 ## var 与 let 的区别
 
@@ -252,7 +255,8 @@ logName();
 var myName;
 ```
 
-> **备注：** 只有在 web 文档中运行多行 JavaScript 时才会有这种效果，当在 JavaScript 控制台中键入单独的行，这将不起作用。
+> [!NOTE]
+> 只有在 web 文档中运行多行 JavaScript 时才会有这种效果，当在 JavaScript 控制台中键入单独的行，这将不起作用。
 
 这是由于变量的**提升**，更多细节请阅读[变量提升](/zh-CN/docs/Web/JavaScript/Reference/Statements/var#变量提升)。
 
@@ -283,7 +287,8 @@ myName = "Bob";
 
 出于这些以及其他原因，我们建议你在代码中尽可能多地使用 `let`，而不是 `var`。因为没有理由使用 `var`，除非你需要用代码支持旧版本的 Internet Explorer (它直到第 11 版才支持 `let` ，现代的 Windows Edge 浏览器支持的很好)。
 
-> **备注：** 我们目前正在更新课程以使用 let 而不是 var。忍耐一下！
+> [!NOTE]
+> 我们目前正在更新课程以使用 let 而不是 var。忍耐一下！
 
 ## 更新变量
 
@@ -306,7 +311,8 @@ myAge = 40;
 - 变量名大小写敏感——因此`myage`与`myAge`是 2 个不同的变量。
 - 最后也是最重要的一点——你应当避免使用 JavaScript 的保留字给变量命名。保留字，即是组成 JavaScript 的实际语法的单词！因此诸如 `var`、`function`、`let` 和 `for` 等，都不能被作为变量名使用。浏览器将把它们识别为不同的代码项，因此你将得到错误。
 
-> **备注：** 你能从[词汇语法—关键字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)找到一个相当完整的保留关键字列表来避免使用关键字当作变量。
+> [!NOTE]
+> 你能从[词汇语法—关键字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)找到一个相当完整的保留关键字列表来避免使用关键字当作变量。
 
 好的命名示例：
 
diff --git a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md
index 1f7e1b893762b2..afab23e959973a 100644
--- a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md
@@ -102,14 +102,16 @@ API 通常分为两类。
 - {{domxref("Canvas_API","画布（Canvas）","","nocode")}} 和 {{domxref("WebGL_API","WebGL","","nocode")}} API 可以创建生动的 2D 和 3D 图像。人们正运用这些 web 技术制作令人惊叹的作品。参见 [Chrome Experiments](https://experiments.withgoogle.com/collection/chrome) 以及 [webglsamples](https://webglsamples.org/)。
 - 诸如 {{domxref("HTMLMediaElement")}} 和 {{domxref("WebRTC API", "WebRTC","","nocode")}} 等[影音类 API](/zh-CN/docs/Web/Guide/Audio_and_video_delivery) 让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版[截图演示](http://chrisdavidmills.github.io/snapshot/)以理解这个概念）。
 
-> **备注：** 上述很多演示都不能在旧浏览器中运行。推荐你在测试代码时使用诸如 Firefox、Chrome、Edge 或者 Opera 等现代浏览器。当代码即将交付生产环境时（也就是真实的客户即将使用真实的代码时），你还需要深入考虑[跨平台测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)。
+> [!NOTE]
+> 上述很多演示都不能在旧浏览器中运行。推荐你在测试代码时使用诸如 Firefox、Chrome、Edge 或者 Opera 等现代浏览器。当代码即将交付生产环境时（也就是真实的客户即将使用真实的代码时），你还需要深入考虑[跨平台测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)。
 
 **第三方 API** 并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息。比如：
 
 - [Twitter API](https://developer.twitter.com/en/docs)、[新浪微博 API](https://open.weibo.com/) 可以在网站上展示最新推文之类。
 - [谷歌地图 API](https://developers.google.com/maps/)、[OpenStreetMap API](https://wiki.openstreetmap.org/wiki/API)、[高德地图 API](https://lbs.amap.com/) 可以在网站嵌入定制的地图等等。
 
-> **备注：** 这些 API 为进阶内容，本模块中不会涉及，更多信息请参考：[客户端 web API 模块](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs)。
+> [!NOTE]
+> 这些 API 为进阶内容，本模块中不会涉及，更多信息请参考：[客户端 web API 模块](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs)。
 
 先稳住！你看到的只是冰山一角。你不可能仅靠学一天 JavaScript 就能构建下一个 Facebook、谷歌地图、或 Instagram——还有很多基础需要了解，这也是为什么你会在这里，让我们继续吧！
 
@@ -127,7 +129,8 @@ JavaScript 的一个非常常见的用途是通过文档对象模型 API（如
 
 每个浏览器标签页就是其自身用来运行代码的独立容器（这些容器用专业术语称为“运行环境”）。大多数情况下，每个标签页中的代码完全独立运行，而且一个标签页中的代码不能直接影响另一个标签页（或者另一个网站）中的代码。这是一个好的安全措施，如果不这样，黑客就可以从其他网站盗取信息，或做一些其他坏事。
 
-> **备注：** 以安全的方式在不同网站或标签页中传送代码和数据的方法是存在的，但它们属于进阶技术，本课程不会涉及。
+> [!NOTE]
+> 以安全的方式在不同网站或标签页中传送代码和数据的方法是存在的，但它们属于进阶技术，本课程不会涉及。
 
 ### JavaScript 运行次序
 
@@ -148,7 +151,8 @@ function updateName() {
 
 如果你互换了代码里最初两行的顺序，会导致问题。浏览器[开发者控制台](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)将返回一个错误：`TypeError: para is undefined`。这意味着 `para` 对象还不存在，所以我们不能为它增添一个事件监听器。
 
-> **备注：** 这是一个很常见的错误，在引用对象之前必须确保该对象已经存在。
+> [!NOTE]
+> 这是一个很常见的错误，在引用对象之前必须确保该对象已经存在。
 
 ### 解释代码 vs 编译代码
 
@@ -208,9 +212,11 @@ JavaScript 是轻量级解释型语言。浏览器接受到 JavaScript 代码，
 
 5. 保存文件并刷新浏览器，然后你会发现，点击按钮文档下方将会添加一个新段落。
 
-> **备注：** 如果示例不能正常工作，请依次检查所有步骤，并保证没有纰漏。原始文件是否以 `.html` 为扩展名保存到本地了？`</body>` 标签前是否添加了 {{htmlelement("script")}} 元素？JavaScript 代码输入是否正确？**JavaScript 是区分大小写的，而且非常精确，所以你需要准确无误地输入所示的句法，否则可能会出错。**
+> [!NOTE]
+> 如果示例不能正常工作，请依次检查所有步骤，并保证没有纰漏。原始文件是否以 `.html` 为扩展名保存到本地了？`</body>` 标签前是否添加了 {{htmlelement("script")}} 元素？JavaScript 代码输入是否正确？**JavaScript 是区分大小写的，而且非常精确，所以你需要准确无误地输入所示的句法，否则可能会出错。**
 
-> **备注：** 你可以在 GitHub 上查看此版本 [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)（[也可在线查看](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上查看此版本 [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)（[也可在线查看](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)）。
 
 ### 外部 JavaScript
 
@@ -241,7 +247,8 @@ JavaScript 是轻量级解释型语言。浏览器接受到 JavaScript 代码，
 
 4. 保存并刷新浏览器，你会发现二者完全一样！区别在于，现在我们把 JavaScript 写进了一个外部文件。这样做一般会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。
 
-> **备注：** 你可以在 GitHub 上查看 [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) 以及 [script.js](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/script.js)（[也可在线查看](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上查看 [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) 以及 [script.js](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/script.js)（[也可在线查看](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)）。
 
 ### 内联 JavaScript 处理器
 
@@ -281,7 +288,8 @@ for (let i = 0; i < buttons.length; i++) {
 
 这样写乍看去比 `onclick` 属性要长一些，但是这样写会对页面上所有按钮生效，无论多少个，或添加或删除，完全无需修改 JavaScript 代码。
 
-> **备注：** 请尝试修改 `apply-javascript.html` 以添加更多按钮。刷新后可发现按下任一按钮时都会创建一个段落。这样很高效吧？
+> [!NOTE]
+> 请尝试修改 `apply-javascript.html` 以添加更多按钮。刷新后可发现按下任一按钮时都会创建一个段落。这样很高效吧？
 
 ### 脚本调用策略
 
@@ -307,7 +315,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
 上述情况下，脚本和 HTML 将一并加载，代码将顺利运行。
 
-> **备注：** 在外部示例中，我们不需要使用 `DOMContentLoaded` 事件，因为 `defer` 属性为我们解决了这个问题。我们没有在内部 JavaScript 示例中使用 `defer` 解决方案，因为 `defer` 只适用于外部脚本。
+> [!NOTE]
+> 在外部示例中，我们不需要使用 `DOMContentLoaded` 事件，因为 `defer` 属性为我们解决了这个问题。我们没有在内部 JavaScript 示例中使用 `defer` 解决方案，因为 `defer` 只适用于外部脚本。
 
 解决此问题的旧方法是：把脚本元素放在文档体的底端（也就是 `</body>` 标签之前，与之相邻），这样脚本就可以在 HTML 解析完毕后加载了。此方案的问题是：只有在所有 HTML DOM 加载完成后才开始脚本的加载/解析过程。对于有大量 JavaScript 代码的大型网站，可能会带来显著的性能损耗。
 
@@ -401,7 +410,8 @@ for (const button of buttons) {
 }
 ```
 
-> **备注：** 一般来说，注释越多越好，但如果你发现自己添加了大量注释来解释变量是什么（变量名也许应该更直观），或者解释非常简单的操作（也许代码过于复杂），那么就应该小心了。
+> [!NOTE]
+> 一般来说，注释越多越好，但如果你发现自己添加了大量注释来解释变量是什么（变量名也许应该更直观），或者解释非常简单的操作（也许代码过于复杂），那么就应该小心了。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
index ded0c71ba65456..f413e1374e2c0c 100644
--- a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
@@ -36,7 +36,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 1. 请分别在你的文本编辑器和浏览器中打开刚下载的文件。
 2. 先试玩游戏，你会发现在点击“确定”按钮时，游戏并没有响应。
 
-> **备注：** 你可能还在为修复你自己版本的游戏头疼，但我们仍然希望你先用我们的版本来完成这一节，这样你才能学到本节中的技术。然后再去修复自己的游戏也不晚。
+> [!NOTE]
+> 你可能还在为修复你自己版本的游戏头疼，但我们仍然希望你先用我们的版本来完成这一节，这样你才能学到本节中的技术。然后再去修复自己的游戏也不晚。
 
 首先查看开发者控制台，看是否存在语法错误，然后尝试修复。详见下文。
 
@@ -65,7 +66,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 4. 出错信息显示“guessSubmit.addeventListener 不是一个函数”，说明这里可能存在拼写错误。如果你不确定某语法的拼写是否正确，可以到 MDN 上去查找，目前最简便的方法就是去你喜欢的搜索引擎搜索“MDN + 语言*特性”。就本文当前内容你可以点击*：[`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener)。
 5. 因此这里错误显然是我们把函数名写错造成的。请记住，JavaScript 区分大小写，所以任何轻微的不同或大小写问题都会导致出错。将 `addeventListener` 改为 `addEventListener` 便可解决。
 
-> **备注：** 更多信息请参考 [类型错误：“x”不是一个函数](/zh-CN/docs/Web/JavaScript/Reference/Errors/Not_a_function)。
+> [!NOTE]
+> 更多信息请参考 [类型错误：“x”不是一个函数](/zh-CN/docs/Web/JavaScript/Reference/Errors/Not_a_function)。
 
 ### 语法错误：第二轮
 
@@ -75,7 +77,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 
    > **备注：** [`Null`](/zh-CN/docs/Glossary/Null)是一个特殊值，意思是“什么也没有”，或者“没有值”。这表示 `lowOrHi` 已声明并初始化，但没有任何有意义的值，可以说：它没有类型没有值。
 
-   > **备注：** 这条错误没有在页面加载时立即发生，是因为它发生在函数内部（`checkGuess() { ... }`块中）。函数内部的代码运行于一个外部代码相互独立的域内，后面函数的文章中将更详细地讲解。此时此刻，只有当代码运行至 86 行并调用 `checkGuess()` 函数时，代码才会抛出出错信息。
+   > [!NOTE]
+   > 这条错误没有在页面加载时立即发生，是因为它发生在函数内部（`checkGuess() { ... }`块中）。函数内部的代码运行于一个外部代码相互独立的域内，后面函数的文章中将更详细地讲解。此时此刻，只有当代码运行至 86 行并调用 `checkGuess()` 函数时，代码才会抛出出错信息。
 
 4. 请观察第 78 行代码：
 
@@ -107,7 +110,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 9. 这里我们需要一个类选择器，它应以一个点开头（`.`），但被传递到第 48 行的`querySelector()`方法中的选择器没有点。这可能是问题所在！尝试将第 48 行中的 `lowOrHi` 改成 `.lowOrHi`。
 10. 再次保存并刷新，此时 `console.log()` 语句应该返回我们想要的 `<p>` 元素。终于把错误搞定了！此时你可以把 `console.log()` 一行删除，或保留它以便随后参考。选择权在你。
 
-> **备注：** 此错误的更多详细信息请参阅：[类型错误：“x”（不）是“y”](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_type)。
+> [!NOTE]
+> 此错误的更多详细信息请参阅：[类型错误：“x”（不）是“y”](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_type)。
 
 ### 语法错误：第三轮
 
@@ -193,7 +197,8 @@ if (userGuess = randomNumber) {
 
 这个很简单。通常意味着函数/方法调用后的结束括号忘写了。
 
-> **备注：** 有关此错误的更多详细信息请参考： [SyntaxError: missing ) after argument list](/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list)。
+> [!NOTE]
+> 有关此错误的更多详细信息请参考： [SyntaxError: missing ) after argument list](/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list)。
 
 ### SyntaxError: missing : after property id
 
@@ -221,7 +226,8 @@ function checkGuess( {
 
 对于所有的这些错误，想想我们在实例中是如何逐步解决的。错误出现时，转到错误所在的行观察是否能发现问题所在。记住，错误不一定在那一行，错误的原因也可能和我们在上面所说的不同！
 
-> **备注：** 有关这些错误的更多详细信息请参考：[SyntaxError: Unexpected token](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token) 以及 [SyntaxError: string literal contains an unescaped line break](/zh-CN/docs/Web/JavaScript/Reference/Errors/String_literal_EOL)。
+> [!NOTE]
+> 有关这些错误的更多详细信息请参考：[SyntaxError: Unexpected token](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token) 以及 [SyntaxError: string literal contains an unescaped line break](/zh-CN/docs/Web/JavaScript/Reference/Errors/String_literal_EOL)。
 
 ## 小结
 
diff --git a/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md
index 112fa6db0595b0..d675e3e01b63c7 100644
--- a/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -24,7 +24,8 @@ slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
 
 请先下载 [index.html](https://github.com/roy-tian/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html)、[style.css](https://github.com/roy-tian/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css) 和 [main.js](https://github.com/roy-tian/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js) 三个文件。
 
-> **备注：** 也可以使用 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 这样的网站来进行测验。你可以选择其中一个将 HTML，CSS 和 JavaScript 粘贴过去。如果你的版本没有单独的 JavaScript / CSS 板块，可以把它们嵌入 HTML 页面内的 `<script>`/`<style>` 元素。
+> [!NOTE]
+> 也可以使用 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 这样的网站来进行测验。你可以选择其中一个将 HTML，CSS 和 JavaScript 粘贴过去。如果你的版本没有单独的 JavaScript / CSS 板块，可以把它们嵌入 HTML 页面内的 `<script>`/`<style>` 元素。
 
 ## 项目简介
 
@@ -376,9 +377,11 @@ window.onkeydown = (e) => {
 
 所以当一个按键按下时，事件对象的 [key](/zh-CN/docs/Web/API/KeyboardEvent/key) 属性 就可以请求到按下的按键值。如果是代码中那四个指定的键值之一，那么恶魔圈将会左右上下的移动。
 
-> **警告：** 英文页面中使用了事件对象的 [keyCode](/zh-CN/docs/Web/API/KeyboardEvent/keyCode) 属性，不推荐在新代码中使用该属性，应使用标准 [key](/zh-CN/docs/Web/API/KeyboardEvent/key) 属性代替。（详见介绍页面）
+> [!WARNING]
+> 英文页面中使用了事件对象的 [keyCode](/zh-CN/docs/Web/API/KeyboardEvent/keyCode) 属性，不推荐在新代码中使用该属性，应使用标准 [key](/zh-CN/docs/Web/API/KeyboardEvent/key) 属性代替。（详见介绍页面）
 
-> **备注：** 这里的 `window.onkeydown` 用一个 [箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 代替了英文页面中的匿名函数，从而无需 `var _this = this`。
+> [!NOTE]
+> 这里的 `window.onkeydown` 用一个 [箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 代替了英文页面中的匿名函数，从而无需 `var _this = this`。
 
 #### `collisionDetect()`
 
diff --git a/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md b/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md
index 8a0b6d277379db..9be81182245de6 100644
--- a/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md
@@ -128,7 +128,8 @@ class Professor extends Person {
 
 因为我们想在创建新的 `Professor` 时设置 `teaches`，我们需要声明一个需要 `name` 和 `teaches` 参数的构造函数。构造函数中需要做的第一件事是使用 {{jsxref("Operators/super", "super()")}} 调用父类的构造函数，并传递 `name` 参数。父类的构造函数会设置 `name` 属性。然后 `Professor` 的构造函数接着设置 `teaches` 属性。
 
-> **备注：** 如果子类有任何自己的初始化内容需要完成，它也**必须**先使用 `super()` 来调用父类的构造函数，并传递父类构造函数期望的任何参数。
+> [!NOTE]
+> 如果子类有任何自己的初始化内容需要完成，它也**必须**先使用 `super()` 来调用父类的构造函数，并传递父类构造函数期望的任何参数。
 
 我们还覆盖了父类的 `introduceSelf()` 方法，并添加了一个新的方法 `grade()`，来为论文打分（我们的教授不是很好，只是随意地为论文打分）。
 
diff --git a/files/zh-cn/learn/javascript/objects/index.md b/files/zh-cn/learn/javascript/objects/index.md
index 9b92df745f69e6..2ce786d2d51da5 100644
--- a/files/zh-cn/learn/javascript/objects/index.md
+++ b/files/zh-cn/learn/javascript/objects/index.md
@@ -13,7 +13,8 @@ slug: Learn/JavaScript/Objects
 
 详细了解 JavaScript 对象之前，你应当已经对 JavaScript 基础有所熟悉。尝试这个模块之前，请通读 [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps) 和 [JavaScript 基础要件](/zh-CN/docs/Learn/JavaScript/Building_blocks)
 
-> **备注：** 如果你无法在当前使用的电脑/平板/其他设备上创建自己的文件，可以使用在线编程网站如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)，来试验文章中的（大多数）代码。
+> [!NOTE]
+> 如果你无法在当前使用的电脑/平板/其他设备上创建自己的文件，可以使用在线编程网站如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)，来试验文章中的（大多数）代码。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/javascript/objects/json/index.md b/files/zh-cn/learn/javascript/objects/json/index.md
index 41bce1cfc83136..96b3fcd4192eae 100644
--- a/files/zh-cn/learn/javascript/objects/json/index.md
+++ b/files/zh-cn/learn/javascript/objects/json/index.md
@@ -34,7 +34,8 @@ JavaScript 对象表示法（JSON）是用于将结构化数据表示为 JavaScr
 
 JSON 可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。这不是一个大事件——JavaScript 提供一个全局的 可访问的 [JSON](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON) 对象来对这两种数据进行转换。
 
-> **备注：** 将字符串转换为原生对象称为*反序列化*（deserialization），而将原生对象转换为可以通过网络传输的字符串称为*序列化*（serialization）。
+> [!NOTE]
+> 将字符串转换为原生对象称为*反序列化*（deserialization），而将原生对象转换为可以通过网络传输的字符串称为*序列化*（serialization）。
 
 一个 JSON 对象可以被储存在它自己的文件中，这基本上就是一个文本文件，扩展名为 `.json`，还有 `application/json` {{glossary("MIME type", "MIME 类型")}}。
 
@@ -101,7 +102,8 @@ superHeroes["members"][1]["powers"][2];
 4. 在对象内，我们想访问 `powers` 属性，所以我们使用 `["powers"]`。
 5. `powers` 属性是一个包含英雄技能的数组。我们想要第三个，所以我们使用 `[2]`。
 
-> **备注：** 我们已经在 [JSONText.html](https://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) 实例中让 JSON 对象进入变量中使其可访问（见[源代码](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/JSONTest.html)）。尝试加载它并且在你的浏览器上访问对象数据。
+> [!NOTE]
+> 我们已经在 [JSONText.html](https://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) 实例中让 JSON 对象进入变量中使其可访问（见[源代码](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/JSONTest.html)）。尝试加载它并且在你的浏览器上访问对象数据。
 
 ### JSON 数组
 
@@ -268,9 +270,11 @@ function populateHeroes(obj) {
 5. 使用另一个循环来遍历当前的英雄的超能力，对于每一个元素我们创建 `<li>` 元素，并放入超能力，然后使用 `appendChild()` 把 `listItem` 放入`<ul>` 元素（`myList`）中。
 6. 最后一件事情是将 `<h2>`、`<p>` 和 `<ul>` 追加到 `<article>`（`myArticle`）中。然后将 `<article>` 追加到 `<section>`。追加的顺序很重要，因为它们将被展示在 HTML 中。
 
-> **备注：** 如有疑难，试试引用我们的 [heroes-finished.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes-finished.html) 代码（也可以查看[运行实例](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)）。
+> [!NOTE]
+> 如有疑难，试试引用我们的 [heroes-finished.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes-finished.html) 代码（也可以查看[运行实例](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)）。
 
-> **备注：** 如果你对访问 JSON 对象的点/括号表示法有困扰。获得文件 [superheroes.json](https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json)，在你的编辑器中打开并参考我们的 JS 代码将会有所帮助。你还应该参考我们的 [JavaScript 对象基础](/zh-CN/docs/Learn/JavaScript/Objects/Basics)文章，了解关于点和括号表示法的更多信息。
+> [!NOTE]
+> 如果你对访问 JSON 对象的点/括号表示法有困扰。获得文件 [superheroes.json](https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json)，在你的编辑器中打开并参考我们的 JS 代码将会有所帮助。你还应该参考我们的 [JavaScript 对象基础](/zh-CN/docs/Learn/JavaScript/Objects/Basics)文章，了解关于点和括号表示法的更多信息。
 
 ### 调用顶层函数
 
diff --git a/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md b/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
index fe0b1925735b67..1ca00767a24eb8 100644
--- a/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
+++ b/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
@@ -7,7 +7,8 @@ slug: Learn/JavaScript/Objects/Object-oriented_programming
 
 面向对象编程（OOP）是如今多种编程语言所实现的一种编程范式，包括 Java、C++。在本文中，我们会简要介绍面向对象编程（OOP）的基本概念，其中包括三个主要概念：**类与实例**、**继承**、**封装**。现在，我们会脱离特定的 JavaScript 代码来探讨这些概念，所有提及到的例子将会以{{Glossary("Pseudocode", "伪代码")}}的形式描述。
 
-> **备注：** 准确地说，本文所提及到的特性是一种特别的面向对象编程方式，即**基于类的面向对象编程**（class-based OOP）。当人们谈论面向对象编程时，通常来说是指基于类的面向对象编程。
+> [!NOTE]
+> 准确地说，本文所提及到的特性是一种特别的面向对象编程方式，即**基于类的面向对象编程**（class-based OOP）。当人们谈论面向对象编程时，通常来说是指基于类的面向对象编程。
 
 在本文的最后，我们会探讨 JavaScript 中的构造函数和原型链是如何与面向对象编程中的概念产生联系的，以及它们与面向对象编程中的概念又有何不同。在下一篇文章中，我们会学习 JavaScript 中一些附加的特性，这些特性使得实现面向对象编程变得更加容易。
 
diff --git a/files/zh-cn/learn/javascript/objects/object_building_practice/index.md b/files/zh-cn/learn/javascript/objects/object_building_practice/index.md
index ec59316763b9b3..e335f8b147a9d8 100644
--- a/files/zh-cn/learn/javascript/objects/object_building_practice/index.md
+++ b/files/zh-cn/learn/javascript/objects/object_building_practice/index.md
@@ -425,7 +425,8 @@ Ball.prototype.update = function () {
 
 3. 保存文件，刷新浏览器，你就会看到小球在撞击时会变色！
 
-> **备注：** 如果示例无法顺利执行，可参考我们的 [最终版本](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/bouncing-balls)，或者 [在线试用](https://roy-tian.github.io/learning-area/javascript/oojs/bouncing-balls/)。
+> [!NOTE]
+> 如果示例无法顺利执行，可参考我们的 [最终版本](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/bouncing-balls)，或者 [在线试用](https://roy-tian.github.io/learning-area/javascript/oojs/bouncing-balls/)。
 
 ## 概要
 
diff --git a/files/zh-cn/learn/javascript/objects/object_prototypes/index.md b/files/zh-cn/learn/javascript/objects/object_prototypes/index.md
index 5c3df819f43639..b4cd05a763841d 100644
--- a/files/zh-cn/learn/javascript/objects/object_prototypes/index.md
+++ b/files/zh-cn/learn/javascript/objects/object_prototypes/index.md
@@ -74,7 +74,8 @@ myObject.toString(); // "[object Object]"
 
 JavaScript 中所有的对象都有一个内置属性，称为它的 **prototype**（原型）。它本身是一个对象，故原型对象也会有它自己的原型，逐渐构成了**原型链**。原型链终止于拥有 `null` 作为其原型的对象上。
 
-> **备注：** 指向对象原型的属性并**不**是 `prototype`。它的名字不是标准的，但实际上所有浏览器都使用 [`__proto__`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)。访问对象原型的标准方法是 {{jsxref("Object/getPrototypeOf", "Object.getPrototypeOf()")}}。
+> [!NOTE]
+> 指向对象原型的属性并**不**是 `prototype`。它的名字不是标准的，但实际上所有浏览器都使用 [`__proto__`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)。访问对象原型的标准方法是 {{jsxref("Object/getPrototypeOf", "Object.getPrototypeOf()")}}。
 
 当你试图访问一个对象的属性时：如果在对象本身中找不到该属性，就会在原型中搜索该属性。如果仍然找不到该属性，那么就搜索原型的原型，以此类推，直到找到该属性，或者到达链的末端，在这种情况下，返回 `undefined`。
 
@@ -215,7 +216,8 @@ console.log(Object.hasOwn(irma, "name")); // true
 console.log(Object.hasOwn(irma, "greet")); // false
 ```
 
-> **备注：** 你也可以在这里使用非静态方法 {{jsxref("Object/hasOwnProperty", "Object.hasOwnProperty()")}}，但我们推荐尽可能使用 `Object.hasOwn()` 方法。
+> [!NOTE]
+> 你也可以在这里使用非静态方法 {{jsxref("Object/hasOwnProperty", "Object.hasOwnProperty()")}}，但我们推荐尽可能使用 `Object.hasOwn()` 方法。
 
 ## 原型与继承
 
diff --git a/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
index d91e87260c6158..77087b952b0b54 100644
--- a/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
+++ b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
@@ -7,11 +7,13 @@ slug: Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript
 
 这个测试的目的是为了评估你是否已经理解了我们的 [JavaScript 中的类](/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)这一文章。
 
-> **备注：** 你可以尝试在下方的交互式编辑器，但是若你下载源码并使用在线工具（例如 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/)）来尝试这些任务，可能会更有帮助。
+> [!NOTE]
+> 你可以尝试在下方的交互式编辑器，但是若你下载源码并使用在线工具（例如 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/)）来尝试这些任务，可能会更有帮助。
 >
 > 如果你遇到了困难，请联系我们以寻求帮助——见本页面底部的[评估或进一步帮助](#评估或进一步帮助)。
 
-> **备注：** 在下方的示例中，如果你的代码中存在错误内容，这些错误将在页面的结果面板中显示，以此来帮助你想出解决方案（若是下载的版本，请进入浏览器的 JavaScript 控制台）。
+> [!NOTE]
+> 在下方的示例中，如果你的代码中存在错误内容，这些错误将在页面的结果面板中显示，以此来帮助你想出解决方案（若是下载的版本，请进入浏览器的 JavaScript 控制台）。
 
 ## 面向对象的 Javascript 1
 
@@ -30,7 +32,7 @@ slug: Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript
 
 {{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs1.html", '100%', 400)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载此任务的初始代码](https://github.com/mdn/learning-area/blob/main/javascript/oojs/tasks/oojs/oojs1-download.html)，以便在你自己的编辑器或在线编辑器中尝试。
 
@@ -44,7 +46,7 @@ slug: Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript
 
 {{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs2.html", '100%', 400)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载此任务的初始代码](https://github.com/mdn/learning-area/blob/main/javascript/oojs/tasks/oojs/oojs2-download.html)，以便在你自己的编辑器或在线编辑器中尝试。
 
diff --git a/files/zh-cn/learn/learning_and_getting_help/index.md b/files/zh-cn/learn/learning_and_getting_help/index.md
index 90a45ac932e7f9..84c788dde0b1f1 100644
--- a/files/zh-cn/learn/learning_and_getting_help/index.md
+++ b/files/zh-cn/learn/learning_and_getting_help/index.md
@@ -46,7 +46,8 @@ MDN Web 文档对这两种类型都非常好 - 你当前位于的区域非常适
 
 网上还有其他几个伟大的资源，我们将在下面提及其中一些资源。
 
-> **备注：** 上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如你会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。
+> [!NOTE]
+> 上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如你会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。
 
 #### 视频资料
 
@@ -58,9 +59,11 @@ MDN Web 文档对这两种类型都非常好 - 你当前位于的区域非常适
 
 许多 MDN Web 文档参考页面中也提供了交互式的示例，你可以在其中更改代码，并查看实时结果的变化。在你的计算机上或者在像 [JSBin](https://jsbin.com/?html,css,js,output)、[Codepen](https://codepen.io/) 或 [Glitch](https://glitch.com/) 这样的在线代码编辑器中创建自己的代码示例也是可以的。事实上，当你在学习时，你会被要求去做这些事情本身就是属于课堂的一部分！
 
-> **备注：** 在线代码编辑器对于共享你编写的代码也非常有用，例如，如果你正在与不在同一位置的其他人协作学习，或者正在向他人发送代码以寻求帮助。你可以与他们共享代码示例的网址，以便他们可以查看。
+> [!NOTE]
+> 在线代码编辑器对于共享你编写的代码也非常有用，例如，如果你正在与不在同一位置的其他人协作学习，或者正在向他人发送代码以寻求帮助。你可以与他们共享代码示例的网址，以便他们可以查看。
 
-> **备注：** 与其他学习方法相比，你可能更喜欢一种学习方法，但实际上，你最终可能得到的是一种混合方法。你可能还会想出另外其他的方法，而不是我们上面提到的三种。
+> [!NOTE]
+> 与其他学习方法相比，你可能更喜欢一种学习方法，但实际上，你最终可能得到的是一种混合方法。你可能还会想出另外其他的方法，而不是我们上面提到的三种。
 
 ### 制定一个计划
 
@@ -200,9 +203,11 @@ ul {
 
 另外，网络上有 [开发者工具](/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools)，它使你可以查看用在 web 上构建任何网站的代码。如果你手头没有解决方案，一个好的研究方法是在网络某处地方找到具有类似功能的网站，并找出它们是如何做到的。
 
-> **备注：** 请注意，上面我们讨论了我们首先要解决的问题，然后是用来解决这个问题的技术。这几乎总是最好的方法--不要从一个你看起来很酷但陌生的新技术开始，然后试着把它塞进用例中。
+> [!NOTE]
+> 请注意，上面我们讨论了我们首先要解决的问题，然后是用来解决这个问题的技术。这几乎总是最好的方法--不要从一个你看起来很酷但陌生的新技术开始，然后试着把它塞进用例中。
 
-> **备注：** 最简单的解决方案往往是最好的。
+> [!NOTE]
+> 最简单的解决方案往往是最好的。
 
 ### 做练习
 
diff --git a/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md b/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md
index e863ad37d0b43c..c542b9fa9af496 100644
--- a/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md
@@ -250,7 +250,8 @@ checkboxes.forEach((checkbox) => {
 
 {{EmbedLiveSample('可伸缩的根号符号', 700, 200)}}
 
-> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现该拉伸效果，上面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。
+> [!WARNING]
+> 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现该拉伸效果，上面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。
 
 ## 无横线的分数
 
@@ -284,7 +285,8 @@ checkboxes.forEach((checkbox) => {
 
 {{EmbedLiveSample('无横线分式', 700, 200)}}
 
-> **备注：** 虽然 `linethickness` 属性可以用于指定任意的线条粗细，但最好保持默认值，该值是根据数学字体中指定的参数计算得出的。
+> [!NOTE]
+> 虽然 `linethickness` 属性可以用于指定任意的线条粗细，但最好保持默认值，该值是根据数学字体中指定的参数计算得出的。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/mathml/first_steps/getting_started/index.md b/files/zh-cn/learn/mathml/first_steps/getting_started/index.md
index c1e813c00bb005..c83c0f7f185c2c 100644
--- a/files/zh-cn/learn/mathml/first_steps/getting_started/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/getting_started/index.md
@@ -62,7 +62,8 @@ MathML 使用与 HTML 相同的语法来表示元素和属性的树形结构。
 
 {{ EmbedLiveSample('Inserting_formulas_in_HTML', 700, 100, "", "") }}
 
-> **警告：** 如果你只看到“1 3”而不是一个分数，那么你的浏览器可能不支持 MathML。请查看[浏览器兼容性表格](/zh-CN/docs/Web/MathML/Element/math#浏览器兼容性)获取进一步的详细信息。
+> [!WARNING]
+> 如果你只看到“1 3”而不是一个分数，那么你的浏览器可能不支持 MathML。请查看[浏览器兼容性表格](/zh-CN/docs/Web/MathML/Element/math#浏览器兼容性)获取进一步的详细信息。
 
 ### display 属性
 
@@ -93,9 +94,11 @@ MathML 使用与 HTML 相同的语法来表示元素和属性的树形结构。
 
 你可能还会注意到一些细微的外观变化：分数的文本和垂直间距变大了一点。没有 `display="block"` 属性，高度会被最小化，以避免干扰周围文本的流畅性。使用 `display="block"` 属性时，优先考虑的是数学公式的易读性。
 
-> **备注：** 这对应于 LaTeX 中的*行内*公式（用美元符号 `$...$` 包围）和*展示*公式（用 `\[...\]` 包围）的概念。
+> [!NOTE]
+> 这对应于 LaTeX 中的*行内*公式（用美元符号 `$...$` 包围）和*展示*公式（用 `\[...\]` 包围）的概念。
 
-> **备注：** 上述提到的外观变化实际上是由 [`math-style`](/zh-CN/docs/Web/CSS/math-style) 属性控制的，该属性初始值为代表 `<math display="block">` 的 `normal`，其他情况下为 `compact`。在某些 MathML 子树中，此属性可能会自动变为 `compact`，但在本入门教程中我们将忽略这个细微差别。这与 LaTeX 类似。
+> [!NOTE]
+> 上述提到的外观变化实际上是由 [`math-style`](/zh-CN/docs/Web/CSS/math-style) 属性控制的，该属性初始值为代表 `<math display="block">` 的 `normal`，其他情况下为 `compact`。在某些 MathML 子树中，此属性可能会自动变为 `compact`，但在本入门教程中我们将忽略这个细微差别。这与 LaTeX 类似。
 
 ## 使用 \<mrow> 元素进行分组
 
diff --git a/files/zh-cn/learn/mathml/first_steps/index.md b/files/zh-cn/learn/mathml/first_steps/index.md
index e07893a4689b5a..b814d94d38339b 100644
--- a/files/zh-cn/learn/mathml/first_steps/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/index.md
@@ -15,7 +15,8 @@ MathML 是用于在网页中编写数学公式的标记语言。本单元将为
 2. 已完成基本的工作环境设置，详见[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)，并了解如何创建和管理文件，详见[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)。
 3. 熟悉 HTML 的基本知识，详见 [HTML 入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。
 
-> **备注：** 如果你在计算机/平板电脑/其他设备上工作，但这些设备上你无法创建自己的文件，那么可以尝试在在线编程平台（如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）中运行代码示例。
+> [!NOTE]
+> 如果你在计算机/平板电脑/其他设备上工作，但这些设备上你无法创建自己的文件，那么可以尝试在在线编程平台（如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）中运行代码示例。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md
index d5ea5bf402e27a..8e8bab24f510ba 100644
--- a/files/zh-cn/learn/mathml/first_steps/scripts/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md
@@ -78,7 +78,8 @@ slug: Learn/MathML/First_steps/Scripts
 - `<msubsup>` 元素的第二个和第三个子元素分别作为其第一个子元素的下标和上标附加。
 - 上下标内的文本会缩小显示。
 
-> **备注：** MathML 元素 `<msub>` 和 `<msup>` 与 HTML 元素 [`<sub>`](/zh-CN/docs/Web/HTML/Element/sub) 和 [`<sup>`](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为附加符号，而不仅仅是文本。
+> [!NOTE]
+> MathML 元素 `<msub>` 和 `<msup>` 与 HTML 元素 [`<sub>`](/zh-CN/docs/Web/HTML/Element/sub) 和 [`<sup>`](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为附加符号，而不仅仅是文本。
 
 ## 正下标和正上标
 
@@ -359,7 +360,8 @@ math {
 
 可以看出底部括号“⎵”和右箭头“→”在水平方向上会延伸以覆盖被替代值的宽度。回想一下，[一些竖直运算符可以伸展](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators)，以覆盖 `<mrow>` 中非伸展兄弟节点的高度。类似地，一些水平运算符可以伸展以覆盖 `<munder>`、`<mover>` 或 `<munderover>` 元素中非伸展兄弟节点的宽度。
 
-> **备注：** 伸展适用于 `<munder>`、`<mover>` 或 `<munderover>` 元素的任何子元素，不仅仅是正下标或正上标。
+> [!NOTE]
+> 伸展适用于 `<munder>`、`<mover>` 或 `<munderover>` 元素的任何子元素，不仅仅是正下标或正上标。
 
 ### 大型运算符和极限
 
diff --git a/files/zh-cn/learn/mathml/first_steps/tables/index.md b/files/zh-cn/learn/mathml/first_steps/tables/index.md
index 1696365f5602bb..cafe546bece2ca 100644
--- a/files/zh-cn/learn/mathml/first_steps/tables/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/tables/index.md
@@ -210,7 +210,8 @@ MathML 表格元素与 [HTML 表格](/zh-CN/docs/Learn/HTML/Tables)的元素类
 
 {{EmbedLiveSample('允许单元格横跨多行多列', 700, 200)}}
 
-> **备注：** 出于历史原因，MathML 中用于跨列的属性被称为 `columnspan` 而不是 `colspan`。
+> [!NOTE]
+> 出于历史原因，MathML 中用于跨列的属性被称为 `columnspan` 而不是 `colspan`。
 
 ## 高级布局用法
 
diff --git a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
index 5717dfff6873fa..0966607e9d44a8 100644
--- a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
@@ -167,7 +167,8 @@ document.getElementById("clearOutput").addEventListener("click", () => {
 </math>
 ```
 
-> **备注：** 对于给定的文本内容，有时很难确定要使用哪个标记元素。在实践中，选择错误的元素通常不会导致重大问题，因为所有的标记元素在浏览器实现中通常都会以相同的方式呈现（用于视觉显示和辅助技术）。然而，`<mi>` 和 `<mo>` 元素具有特殊的区别特征，需要注意。下面的小节将对它们进行解释。
+> [!NOTE]
+> 对于给定的文本内容，有时很难确定要使用哪个标记元素。在实践中，选择错误的元素通常不会导致重大问题，因为所有的标记元素在浏览器实现中通常都会以相同的方式呈现（用于视觉显示和辅助技术）。然而，`<mi>` 和 `<mo>` 元素具有特殊的区别特征，需要注意。下面的小节将对它们进行解释。
 
 ## \<mi> 的自动斜体化
 
@@ -197,7 +198,8 @@ document.getElementById("clearOutput").addEventListener("click", () => {
 
 {{ EmbedLiveSample('阻止 <mi> 自动斜体化', 700, 50) }}
 
-> **备注：** 尽管可以应用此转换，但通常你只需直接使用所需的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)即可。
+> [!NOTE]
+> 尽管可以应用此转换，但通常你只需直接使用所需的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)即可。
 
 ## \<mo> 的运算符属性
 
@@ -316,7 +318,8 @@ document.getElementById("showSolution").addEventListener(
 
 {{ EmbedLiveSample('主动学习：发现不同点', 700, 500) }}
 
-> **备注：** 一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。
+> [!NOTE]
+> 一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。
 
 ### 主动学习：可伸缩运算符
 
@@ -455,7 +458,8 @@ document.getElementById("clearOutput").addEventListener("click", () => {
 </math>
 ```
 
-> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。
+> [!WARNING]
+> 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/mathml/index.md b/files/zh-cn/learn/mathml/index.md
index 253e3c845e7ccb..e1c0559e3270c0 100644
--- a/files/zh-cn/learn/mathml/index.md
+++ b/files/zh-cn/learn/mathml/index.md
@@ -7,7 +7,8 @@ slug: Learn/MathML
 
 数学标记语言（Mathematical Markup Language）或 {{glossary("MathML")}} 是用于在网页中编写数学公式的标记语言，其支持分数、上下标、根号、矩阵、积分、级数等。尽管它最初被设计为独立的 XML 语言，但 MathML 通常嵌入在 {{Glossary('HTML')}} 文档中，并可视为 HTML 的扩展。
 
-> **警告：** 实际上，MathML 内容是由[轻量级标记语言](https://zh.wikipedia.org/wiki/轻量级标记语言)（例如 [LaTeX](https://zh.wikipedia.org/wiki/LaTeX)）或[图形用户界面](https://zh.wikipedia.org/wiki/图形用户界面)生成的。如果你只需要在网页中集成数学公式，可以参考[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面上的提示。
+> [!WARNING]
+> 实际上，MathML 内容是由[轻量级标记语言](https://zh.wikipedia.org/wiki/轻量级标记语言)（例如 [LaTeX](https://zh.wikipedia.org/wiki/LaTeX)）或[图形用户界面](https://zh.wikipedia.org/wiki/图形用户界面)生成的。如果你只需要在网页中集成数学公式，可以参考[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面上的提示。
 
 ## 前提
 
diff --git a/files/zh-cn/learn/performance/html/index.md b/files/zh-cn/learn/performance/html/index.md
index 96fba00a7173f2..b77ee7cf44082f 100644
--- a/files/zh-cn/learn/performance/html/index.md
+++ b/files/zh-cn/learn/performance/html/index.md
@@ -45,7 +45,8 @@ HTML 默认情况下快速且易于访问。作为开发者，我们的工作是
 - 嵌入内容的交付：通常是嵌入在 {{htmlelement("iframe")}} 元素中的内容。将内容加载到 `<iframe>` 中可能会显著影响性能，因此应该仔细考虑。
 - 资源加载顺序：为了最大化感知性能和实际性能，HTML 应该首先按照在页面上出现的顺序加载。然后，你可以利用各种特性来影响资源加载顺序以获得更好的性能。例如，你可以提前预加载关键的 CSS 和字体，但将非关键的 JavaScript 推迟到稍后加载。
 
-> **备注：** 简化 HTML 结构和对源代码进行[缩小化](https://zh.wikipedia.org/wiki/極簡化)可以加快渲染和下载速度是有道理的。然而，与图像和视频相比，HTML 文件大小微不足道，而且现代浏览器的渲染速度非常快。如果你的 HTML 源代码非常庞大且复杂，导致渲染和下载性能受到影响，那么你可能存在更大的问题，并且应该考虑简化和拆分内容。
+> [!NOTE]
+> 简化 HTML 结构和对源代码进行[缩小化](https://zh.wikipedia.org/wiki/極簡化)可以加快渲染和下载速度是有道理的。然而，与图像和视频相比，HTML 文件大小微不足道，而且现代浏览器的渲染速度非常快。如果你的 HTML 源代码非常庞大且复杂，导致渲染和下载性能受到影响，那么你可能存在更大的问题，并且应该考虑简化和拆分内容。
 
 ## 响应式处理替代元素
 
@@ -170,7 +171,8 @@ HTML 默认情况下快速且易于访问。作为开发者，我们的工作是
 
 建议将内容放在单个页面中。如果你想在页面更改时动态获取新内容，仍然比将其放入 `<iframe>` 中更好，这样可以提高性能。例如，你可以使用 {{domxref("fetch()")}} 方法获取新数据，然后使用一些 DOM 脚本将其插入到页面中。更多信息，请参见[从服务器获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)和[操作文档](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)。
 
-> **备注：** 如果你掌控内容并且内容相对简单，你可以考虑使用在 `src` 属性中以 base-64 编码的内容填充 `<iframe>`，甚至可以将原始 HTML 插入到 `srcdoc` 属性中（有关更多信息，请参见 [Iframe 性能第二部分：好消息](https://medium.com/slices-of-bread/iframe-performance-part-2-the-good-news-26eb53cea429)）。
+> [!NOTE]
+> 如果你掌控内容并且内容相对简单，你可以考虑使用在 `src` 属性中以 base-64 编码的内容填充 `<iframe>`，甚至可以将原始 HTML 插入到 `srcdoc` 属性中（有关更多信息，请参见 [Iframe 性能第二部分：好消息](https://medium.com/slices-of-bread/iframe-performance-part-2-the-good-news-26eb53cea429)）。
 
 如果必须使用 `<iframe>`，请保持谨慎。
 
@@ -195,7 +197,8 @@ HTML 默认情况下快速且易于访问。作为开发者，我们的工作是
 4. 稍后，浏览器根据应用于它的 CSS 来确定每个 HTML 元素应该如何进行样式化。
 5. 将经过样式化的结果绘制到屏幕上。
 
-> **备注：** 这只是一个非常简单的叙述，但可以让你了解发生的事情。
+> [!NOTE]
+> 这只是一个非常简单的叙述，但可以让你了解发生的事情。
 
 多种 HTML 特性允许你修改资源加载方式以提高性能。现在我们将探讨其中一些功能。
 
@@ -239,7 +242,8 @@ pElem.addEventListener("click", () => {
 
 这会使脚本获取与 DOM 解析并行进行，因此它会在相同的时间准备好，不会阻塞渲染，从而提高性能。
 
-> **备注：** 还有另一个属性 `defer`，它会使脚本在文档解析完成之后、`DOMContentLoaded` 事件触发之前执行。这与 `async` 有类似的效果。
+> [!NOTE]
+> 还有另一个属性 `defer`，它会使脚本在文档解析完成之后、`DOMContentLoaded` 事件触发之前执行。这与 `async` 有类似的效果。
 
 处理 JavaScript 加载的另一个技巧是将脚本拆分为代码模块，并在需要时加载每个部分，而不是将所有代码放入一个巨大的脚本并在开头加载。这可以通过使用 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)来实现。阅读链接的文章以获取详细指南。
 
@@ -258,9 +262,11 @@ pElem.addEventListener("click", () => {
 - [`rel="preload"`](/zh-CN/docs/Web/HTML/Attributes/rel/preload)
 - [预加载关键资源以提高加载速度](https://web.dev/articles/preload-critical-assets) web.dev（2020）
 
-> **备注：** 你还可以使用 `rel="preload"` 预加载 CSS 和 JavaScript 文件。
+> [!NOTE]
+> 你还可以使用 `rel="preload"` 预加载 CSS 和 JavaScript 文件。
 
-> **备注：** 还有其他 [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 值，也旨在加速页面加载的各个方面：`dns-prefetch`、`preconnect`、`modulepreload`、`prefetch` 和 `prerender`。请访问链接页面，了解它们的作用。
+> [!NOTE]
+> 还有其他 [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 值，也旨在加速页面加载的各个方面：`dns-prefetch`、`preconnect`、`modulepreload`、`prefetch` 和 `prerender`。请访问链接页面，了解它们的作用。
 
 {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}
 
diff --git a/files/zh-cn/learn/performance/javascript/index.md b/files/zh-cn/learn/performance/javascript/index.md
index e3ca56e5cc8375..ac66ac02799ef9 100644
--- a/files/zh-cn/learn/performance/javascript/index.md
+++ b/files/zh-cn/learn/performance/javascript/index.md
@@ -65,7 +65,8 @@ slug: Learn/Performance/JavaScript
 4. 稍后，浏览器根据应用于每个 HTML 元素的 CSS 来确定每个元素的样式。
 5. 然后将经过样式处理的结果绘制到屏幕上。
 
-> **备注：** 这只是一个非常简单的叙述，但可以让你了解发生的事情。
+> [!NOTE]
+> 这只是一个非常简单的叙述，但可以让你了解发生的事情。
 
 这里关键的步骤是第 3 步。默认情况下，JavaScript 的解析和执行会阻塞渲染。这意味着浏览器在遇到 JavaScript 之后，会阻塞解析任何出现在其后的 HTML 代码，直到脚本处理完成。因此，样式和绘制也会被阻塞。因此，你不仅需要仔细考虑你要下载的内容，还要考虑代码何时以及以何种方式执行。
 
@@ -109,7 +110,8 @@ slug: Learn/Performance/JavaScript
 import { function } from "important-module.js";
 ```
 
-> **备注：** 预加载并不能保证脚本在你包含它时已经加载完成，但它确实意味着它将尽早开始下载。即使未完全移除阻塞渲染的时间，渲染阻塞时间仍将缩短。
+> [!NOTE]
+> 预加载并不能保证脚本在你包含它时已经加载完成，但它确实意味着它将尽早开始下载。即使未完全移除阻塞渲染的时间，渲染阻塞时间仍将缩短。
 
 ## 推迟非关键 JavaScript 的执行
 
@@ -127,7 +129,8 @@ import { function } from "important-module.js";
 
 这会导致脚本获取与 DOM 解析并行进行，因此它将在同一时间准备好，不会阻塞渲染。
 
-> **备注：** 还有另一个属性 `defer`，它会导致脚本在文档解析完成之后，但在触发 [`DOMContentLoaded`](/zh-CN/docs/Web/API/Document/DOMContentLoaded_event) 事件之前执行。这与 `async` 有类似的效果。
+> [!NOTE]
+> 还有另一个属性 `defer`，它会导致脚本在文档解析完成之后，但在触发 [`DOMContentLoaded`](/zh-CN/docs/Web/API/Document/DOMContentLoaded_event) 事件之前执行。这与 `async` 有类似的效果。
 
 你也可以直到需要时才加载 JavaScript。这可以通过 DOM 脚本编写来实现，例如：
 
diff --git a/files/zh-cn/learn/performance/multimedia/index.md b/files/zh-cn/learn/performance/multimedia/index.md
index 073bb5b42f7f10..7145309f56c41c 100644
--- a/files/zh-cn/learn/performance/multimedia/index.md
+++ b/files/zh-cn/learn/performance/multimedia/index.md
@@ -29,7 +29,8 @@ slug: Learn/Performance/Multimedia
   </tbody>
 </table>
 
-> **备注：** 这是对 Web 上多媒体传输进行优化的概要介绍，只涵盖了一般原理和技术。如需更深入的指南，请参阅 <https://web.dev/learn/images>。
+> [!NOTE]
+> 这是对 Web 上多媒体传输进行优化的概要介绍，只涵盖了一般原理和技术。如需更深入的指南，请参阅 <https://web.dev/learn/images>。
 
 ## 为何优化多媒体？
 
@@ -57,7 +58,8 @@ slug: Learn/Performance/Multimedia
 
 最优的文件格式通常取决于图像的特点。
 
-> **备注：** 有关图像类型的一般信息，请参阅[图像文件类型和格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)。
+> [!NOTE]
+> 有关图像类型的一般信息，请参阅[图像文件类型和格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)。
 
 [SVG](/zh-CN/docs/Web/Media/Formats/Image_types#svg_可缩放矢量图形) 格式更适合颜色较少且不太逼真的照片的图像。这需要源文件以矢量图形格式提供。如果这样的图像仅以位图形式存在，则应选择 [PNG](/zh-CN/docs/Web/Media/Formats/Image_types#png_便携式网络图形) 作为后备格式。这种类型的图案示例是徽标、插图、图表或图标（注意：SVG 比图标字体好得多！）。两种格式都支持透明度。
 
@@ -75,7 +77,8 @@ PNG 可以以三种不同的输出组合进行保存：
 
 - [WebP](/zh-CN/docs/Web/Media/Formats/Image_types#webp_图像)——既适用于图像又适用于动图的绝佳选择。WebP 提供比 PNG 或 JPEG 更好的压缩，支持更高的色深、动画帧和透明度等（但不支持渐进式显示）。除具有 Big Sur 或更早版本的 macOS 桌面版 Safari 14 外，所有主流浏览器都支持它。
 
-  > **备注：** 尽管 Apple [宣布在 Safari 14 中支持 WebP](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)，但在 Safari 版本 16.0 之前，`.webp` 图像无法在早于 Big Sur 版本的 macOS 桌面版本上正常显示，而 iOS 14 上的 Safari *却能*正常显示 `.webp` 图像。
+  > [!NOTE]
+  > 尽管 Apple [宣布在 Safari 14 中支持 WebP](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)，但在 Safari 版本 16.0 之前，`.webp` 图像无法在早于 Big Sur 版本的 macOS 桌面版本上正常显示，而 iOS 14 上的 Safari *却能*正常显示 `.webp` 图像。
 
 - [AVIF](/zh-CN/docs/Web/Media/Formats/Image_types#avif_图像)——由于其是高性能和免版税的图像格式（甚至比 WebP 更高效），它是用于图像和动图的不错选择（尽管不太广泛）。它现在受 Chrome、Opera 和 Firefox 的支持。[Squoosh](https://squoosh.app/) 是一款出色的，可以将其他图像格式转换为 AVIF 的在线工具。
 - **JPEG2000**——曾经是 JPEG 的继任者，但仅受 Safari 支持。也不支持渐进式显示。
diff --git a/files/zh-cn/learn/performance/what_is_web_performance/index.md b/files/zh-cn/learn/performance/what_is_web_performance/index.md
index cad762a8a33705..06191a06fb5da5 100644
--- a/files/zh-cn/learn/performance/what_is_web_performance/index.md
+++ b/files/zh-cn/learn/performance/what_is_web_performance/index.md
@@ -44,7 +44,8 @@ Web 性能是对网站或应用程序的客观度量和用户的体验。这包
 
 总而言之，许多特性都会影响性能。包括延迟、应用程序大小、DOM 节点数量、资源请求数量、JavaScript 性能、CPU 负载等等。重要的是尽量缩短加载和响应时间，并通过增加额外的功能来隐藏延迟：先使网站变得可以交互，同时在后台加载用户体验中的次要部分。
 
-> **备注：** Web 性能既包括客观测量，如加载时间、每秒帧数和[交互等待时间](/zh-CN/docs/Glossary/Time_to_interactive)，也包括主观体验，如内容加载所需的时间。
+> [!NOTE]
+> Web 性能既包括客观测量，如加载时间、每秒帧数和[交互等待时间](/zh-CN/docs/Glossary/Time_to_interactive)，也包括主观体验，如内容加载所需的时间。
 
 ## 内容如何渲染
 
diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
index 96d0c8da872b05..22baaee2317249 100644
--- a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
+++ b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
@@ -35,7 +35,8 @@ MIME 类型描述了邮件或者 web 服务器或者 web 应用中的媒体内
 
 出于安全原因，使用正确的 MIME 类型的服务内容也是重要的；恶意内容可能会影响用户的计算机，假装它是一个安全类型文档，实际上不是。
 
-> **备注：** 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，Gecko 2.0 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (`text/css`).
+> [!NOTE]
+> 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，Gecko 2.0 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (`text/css`).
 >
 > Gecko 1.9.1.11 (Firefox 3.5.11) 和 Gecko 1.9.2.5 (Firefox 3.6.5) 同样实施这种安全措施，但是提高它的实用性。如果样式表中的第一行看起来是一个很好的 CSS 构造，则存在允许加载的临时启发式算法。在 Firefox 4 中已经删除了启发式，你必须正确设置`text/css` 的 MIME 类型，才能够识别 CSS。
 
diff --git a/files/zh-cn/learn/server-side/django/admin_site/index.md b/files/zh-cn/learn/server-side/django/admin_site/index.md
index 52d856472b9c1a..d3f6b6c8e7964f 100644
--- a/files/zh-cn/learn/server-side/django/admin_site/index.md
+++ b/files/zh-cn/learn/server-side/django/admin_site/index.md
@@ -58,7 +58,8 @@ admin.site.register(Genre)
 admin.site.register(BookInstance)
 ```
 
-> **备注：** 如果你接受创建模型以表示书籍的自然语言的挑战 ([see the models tutorial article](/zh-CN/docs/Learn/Server-side/Django/Models)), 导入并注册。
+> [!NOTE]
+> 如果你接受创建模型以表示书籍的自然语言的挑战 ([see the models tutorial article](/zh-CN/docs/Learn/Server-side/Django/Models)), 导入并注册。
 
 这是在网站上注册模型或多模型的简单方法，管理站点是高度可定制的，我们将进一步讨论注册模型的其他方式。
 
@@ -93,7 +94,8 @@ python3 manage.py runserver
 
 ![Admin Site - Book Add](admin_book_add.png)
 
-> **备注：** 在这里，我们希望你花费一点时间添加一些书，作者，类型（如：幻想）到你的应用。确保每个作者和类型都包含几本不同的书籍（这会是你的列表和详细视图在文章系列中后期使用时更有趣）。
+> [!NOTE]
+> 在这里，我们希望你花费一点时间添加一些书，作者，类型（如：幻想）到你的应用。确保每个作者和类型都包含几本不同的书籍（这会是你的列表和详细视图在文章系列中后期使用时更有趣）。
 
 我们完成添加书籍，在顶部标签中，点击 **Home** 链接将回到主管理页面。然后点击 **Books** 链接显示当前书籍的列表（或其他链接之一，以查看其他型号列表）。现在你已经添加了几本书，列表可能与下面的截图类似。显示每本书的标题；这是书模型 \_\_str\_\_() 方法返回的值，在上一文章中提到。
 
@@ -210,7 +212,8 @@ class BookAdmin(admin.ModelAdmin):
 
 不幸的是，我们不能直接指定 **list_display** 中的 **genre** 字段，因为它是一个**ManyToManyField** （Django 可以防止这种情况，因为在这样做时会有大量的数据库访问“成本”）。相反，我们将定义一个 `display_genre` 函数来获取信息作为一个字符串（这是我们上面调用的函数;下面我们将定义它）。
 
-> **备注：** 在**genre**这里获取可能不是一个好主意，因为数据库操作的“成本”。我们向你展示了如何在模型中调用函数的其他原因非常有用 - 例如在列表中的每个项目旁边添加一个“删除”链接。
+> [!NOTE]
+> 在**genre**这里获取可能不是一个好主意，因为数据库操作的“成本”。我们向你展示了如何在模型中调用函数的其他原因非常有用 - 例如在列表中的每个项目旁边添加一个“删除”链接。
 
 将以下代码添加到 Book 模型（**models.py**）中。这将从 genre 字段的前三个值（如果存在）创建一个字符串，并创建一个`short_description`可以在此方法的管理站点中使用的字符串。
 
@@ -229,7 +232,8 @@ class BookAdmin(admin.ModelAdmin):
 
 该 Genre 模型（和 Language 模式，如果你定义一个）都有一个单一的领域，所以没有一点为他们创造更多的显示领域的附加模型。
 
-> **备注：** 值得更新 BookInstance 模型列表，至少显示状态和预期的返回日期。我们已经补充说，作为本文末尾的挑战！
+> [!NOTE]
+> 值得更新 BookInstance 模型列表，至少显示状态和预期的返回日期。我们已经补充说，作为本文末尾的挑战！
 
 ### 添加列表过滤器
 
@@ -248,7 +252,8 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 默认情况下，详细视图按照其在模型中声明的顺序垂直排列所有字段。你可以更改声明的顺序，哪些字段显示（或排除），区段是否用于组织信息，字段是水平还是垂直显示，甚至是管理窗体中使用的编辑窗口小部件。
 
-> **备注：** LocalLibrary 模型比较简单，因此我们不需要更改布局; 不管怎样，我们会做一些改变，只是为了向你展示如何。
+> [!NOTE]
+> LocalLibrary 模型比较简单，因此我们不需要更改布局; 不管怎样，我们会做一些改变，只是为了向你展示如何。
 
 #### 控制哪些字段被显示和布局
 
@@ -266,7 +271,8 @@ class AuthorAdmin(admin.ModelAdmin):
 
 ![Admin Site - Improved Author Detail](admin_improved_author_detail.png)
 
-> **备注：** 你还可以使用`exclude`属性来声明要从表单中排除的属性列表（将显示模型中的所有其他属性）。
+> [!NOTE]
+> 你还可以使用`exclude`属性来声明要从表单中排除的属性列表（将显示模型中的所有其他属性）。
 
 #### 剖切细节视图
 
@@ -317,7 +323,8 @@ class BookAdmin(admin.ModelAdmin):
 
 在这种情况下，我们所做的就是声明我们的`tablular`内联类，它只是从内联模型添加所有字段。你可以为布局指定各种附加信息，包括要显示的字段，其顺序，是否只读等。（有关详细信息，请参阅 [TabularInline](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline) ).
 
-> **备注：** 这个功能有一些痛苦的限制！在上面的屏幕截图中，我们有三个现有的书籍实例，其次是新的书籍实例的三个占位符（看起来非常相似！）。默认情况下没有备用书实例会更好，只需使用“添加另一个书”实例链接添加它们，或者可以`BookInstance`从这里列出作为不可读的链接。第一个选项可以通过`extra`在`BookInstanceInline`模型中将属性设置为 0 来完成，自己尝试一下。
+> [!NOTE]
+> 这个功能有一些痛苦的限制！在上面的屏幕截图中，我们有三个现有的书籍实例，其次是新的书籍实例的三个占位符（看起来非常相似！）。默认情况下没有备用书实例会更好，只需使用“添加另一个书”实例链接添加它们，或者可以`BookInstance`从这里列出作为不可读的链接。第一个选项可以通过`extra`在`BookInstanceInline`模型中将属性设置为 0 来完成，自己尝试一下。
 
 ## 挑战自己
 
diff --git a/files/zh-cn/learn/server-side/django/authentication/index.md b/files/zh-cn/learn/server-side/django/authentication/index.md
index ecc499eead3f6b..8343025c89c0aa 100644
--- a/files/zh-cn/learn/server-side/django/authentication/index.md
+++ b/files/zh-cn/learn/server-side/django/authentication/index.md
@@ -29,7 +29,8 @@ slug: Learn/Server-side/Django/Authentication
 
 Django 提供了一个身份验证和授权（“权限”）系统，该系统构建在[上一个教程](/zh-CN/docs/Learn/Server-side/Django/Sessions)中讨论的会话框架之上，允许你验证用户凭据，并定义每个用户可允许执行的操作。该框架包括用户`Users`和分组`Groups`的内置模型（一次向多个用户应用权限的通用方法），用于登录用户的权限/标志，以指定用户是否可以执行任务，表单和视图，以及查看限制内容的工具。
 
-> **备注：** Django 身份验证系统的目标非常通用，因此不提供其他 Web 身份验证系统中，所提供的某些功能。某些常见问题的解决方案，可作为第三方软件包提供。例如，限制登录尝试，和针对第三方的身份验证（例如 OAuth）。
+> [!NOTE]
+> Django 身份验证系统的目标非常通用，因此不提供其他 Web 身份验证系统中，所提供的某些功能。某些常见问题的解决方案，可作为第三方软件包提供。例如，限制登录尝试，和针对第三方的身份验证（例如 OAuth）。
 
 在本教程中，我们将向你展示，如何在[LocalLibrary](/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website)网站中，启用用户身份验证，创建你自己的登录和注销页面，为模型添加权限，以及控制对页面的访问。我们将使用身份验证/权限，来显示用户和图书馆员借用图书的列表。
 
@@ -41,7 +42,8 @@ Django 提供了一个身份验证和授权（“权限”）系统，该系统
 
 我们在[创建框架网站](/zh-CN/docs/Learn/Server-side/Django/skeleton_website)时（在教程 2 中），自动启用了身份验证，因此你此时，无需再执行任何操作。
 
-> **备注：** 当我们使用 `django-admin startproject` 命令，以创建应用程序时，所有必要的配置都已完成。当我们第一次调用 `python manage.py migrate` 时，创建了用户和模型权限的数据库表。
+> [!NOTE]
+> 当我们使用 `django-admin startproject` 命令，以创建应用程序时，所有必要的配置都已完成。当我们第一次调用 `python manage.py migrate` 时，创建了用户和模型权限的数据库表。
 
 配置在项目文件（**locallibrary/locallibrary/settings.py**）的`INSTALLED_APPS`和`MIDDLEWARE`部分中设置，如下所示：
 
@@ -64,7 +66,8 @@ MIDDLEWARE = [
 
 在教程 4 中，当我们查看 [Django 管理站点](/zh-CN/docs/Learn/Server-side/Django/Admin_site)时，你已经创建了第一个用户（这是一个超级用户，使用命令 `python manage.py createsuperuser` 创建）。我们的超级用户已经过身份验证，并拥有所有权限，因此我们需要创建一个测试用户，来代表普通网站用户。我们将使用管理站点，来创建我们的 locallibrary 组別和网站登录，因为这是最快的方法之一。
 
-> **备注：** 你还可以用编程方式创建用户，如下所示。你会必须这样做，例如，如果要开发一个界面，能允许用户创建自己的登录（你不应该授予用户访问管理站点的权限）。
+> [!NOTE]
+> 你还可以用编程方式创建用户，如下所示。你会必须这样做，例如，如果要开发一个界面，能允许用户创建自己的登录（你不应该授予用户访问管理站点的权限）。
 >
 > ```python
 > from django.contrib.auth.models import User
@@ -105,7 +108,8 @@ MIDDLEWARE = [
 
 就是这样！现在你有一个“普通的图书馆成员”帐户，你可以使用该帐户进行测试（一旦我们实现了页面，使他们能够登录）。
 
-> **备注：** 你应该尝试创建另一个图书馆用户。此外，为图书馆管理员创建一个分组，并添加一个用户！
+> [!NOTE]
+> 你应该尝试创建另一个图书馆用户。此外，为图书馆管理员创建一个分组，并添加一个用户！
 
 ## 设置身份验证视图
 
@@ -113,9 +117,11 @@ Django 提供了创建身份验证页面所需的几乎所有功能，让处理
 
 在本节中，我们将展示如何将默认系统，集成到 LocalLibrary 网站并创建模板。我们将它们放在主项目的 URL 当中。
 
-> **备注：** 你不必一定要使用这些代码，但你可能希望这样做，因为它使事情变得更容易。如果更改用户模型（高级主题！），你几乎肯定需要更改表单处理代码。但即便如此，你仍然可以使用先前已经有的视图功能。
+> [!NOTE]
+> 你不必一定要使用这些代码，但你可能希望这样做，因为它使事情变得更容易。如果更改用户模型（高级主题！），你几乎肯定需要更改表单处理代码。但即便如此，你仍然可以使用先前已经有的视图功能。
 
-> **备注：** 在这种情况下，我们可以合理地将认证页面（包括 URL 和模板）放在我们的目录应用程序中。但是，如果我们有多个应用程序，最好将这个共享登录行为分开，并让它在整个站点上可用，这就是我们在这里展示的内容！
+> [!NOTE]
+> 在这种情况下，我们可以合理地将认证页面（包括 URL 和模板）放在我们的目录应用程序中。但是，如果我们有多个应用程序，最好将这个共享登录行为分开，并让它在整个站点上可用，这就是我们在这里展示的内容！
 
 ### 项目网址
 
@@ -133,7 +139,8 @@ urlpatterns += [
 
 打开 URL <http://127.0.0.1:8000/accounts/> （注意前面的斜杠！），Django 将显示一个错误，它无法找到此 URL，并列出它尝试过的所有 URL。从中你可以看到可以使用的 URL，例如：
 
-> **备注：** 使用上面的方法，添加以下带有方括号中的名称的 URL，可用于反转 URL 映射。你不必实现任何其他内容 - 上面的 url 映射，会自动映射下面提到的 URL。
+> [!NOTE]
+> 使用上面的方法，添加以下带有方括号中的名称的 URL，可用于反转 URL 映射。你不必实现任何其他内容 - 上面的 url 映射，会自动映射下面提到的 URL。
 >
 > ```python
 > accounts/ login/ [name='login']
@@ -161,7 +168,8 @@ Exception Value:    registration/login.html
 
 对于此站点，我们将 HTML 页面，放在 **templates/registration/** 目录中。此目录应该位于项目的根目录中，即与 **catalog** 和 **locallibrary** 文件夹相同的目录）。请立即创建这些文件夹。
 
-> **备注：** 你的文件夹结构，现在应如下所示：
+> [!NOTE]
+> 你的文件夹结构，现在应如下所示：
 > locallibrary (django project folder)
 > |\_catalog
 > |\_locallibrary
@@ -181,7 +189,8 @@ TEMPLATES = [
 
 ### 登录模板
 
-> **警告：** 本文提供的身份验证模板，是 Django 演示登录模板的基本/略微修改版本。你可能需要自定义它们，以供自己使用！
+> [!WARNING]
+> 本文提供的身份验证模板，是 Django 演示登录模板的基本/略微修改版本。你可能需要自定义它们，以供自己使用！
 
 创建一个名为 **/locallibrary/templates/registration/login.html** 的新 HTML 文件。为它加入以下内容：
 
@@ -368,7 +377,8 @@ Someone asked for password reset for email \{{ email }}. Follow the link below:
 
 你将能够从登录页面中的链接，测试密码重置功能。**请注意，Django 只会向已存储在其数据库中的地址（用户）发送重置电子邮件！**
 
-> **备注：** 密码重置系统，要求你的网站支持电子邮件，这超出了本文的范围，因此该部分**将无法使用**。要测试此功能，请将以下一行放在 settings.py 文件的末尾。这会记录发送到命令行控制台的所有电子邮件（因此你可以从命令行控制台，复制密码重置链接）。
+> [!NOTE]
+> 密码重置系统，要求你的网站支持电子邮件，这超出了本文的范围，因此该部分**将无法使用**。要测试此功能，请将以下一行放在 settings.py 文件的末尾。这会记录发送到命令行控制台的所有电子邮件（因此你可以从命令行控制台，复制密码重置链接）。
 >
 > ```python
 > EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
@@ -406,7 +416,8 @@ Someone asked for password reset for email \{{ email }}. Follow the link below:
 
 我们使用 `url`模板标记，和相应 URL 配置的名称，创建登录和登出链接 URL。另外请注意，我们如何将“`?next=\{{request.path}}`附加到 URL 的末尾。这样做，是将包含当前页面地址（URL）的 URL 参数，添加到链接 URL 的末尾。用户成功登录/登出后，视图将使用此“下一个”值，将用户重定向，回到他们首次单击登录/登出链接的页面。
 
-> **备注：** 试试吧！如果你在主页上，并单击侧栏中的“登录/登出”，在操作完成后，你应该返回到同一页面。
+> [!NOTE]
+> 试试吧！如果你在主页上，并单击侧栏中的“登录/登出”，在操作完成后，你应该返回到同一页面。
 
 ### 在视图中测试
 
@@ -422,7 +433,8 @@ def my_view(request):
     ...
 ```
 
-> **备注：** 你可以通过`request.user.is_authenticated`，测试手动执行类似的操作，但装饰器更方便！
+> [!NOTE]
+> 你可以通过`request.user.is_authenticated`，测试手动执行类似的操作，但装饰器更方便！
 
 同样，在基于类别的视图中，限制对登录用户的访问的最简单方法，是从`LoginRequiredMixin`派生。你需要在主视图类之前的超类列表中，首先声明此 mixin。
 
@@ -477,7 +489,8 @@ def is_overdue(self):
     return False
 ```
 
-> **备注：** 在进行比较之前，我们首先验证`due_back`是否为空。空的`due_back`字段，会导致 Django 抛出错误，而不是显示页面：空值不具有可比性。这不是我们希望用户体验到的东西！
+> [!NOTE]
+> 在进行比较之前，我们首先验证`due_back`是否为空。空的`due_back`字段，会导致 Django 抛出错误，而不是显示页面：空值不具有可比性。这不是我们希望用户体验到的东西！
 
 现在我们已经更新了模型，我们需要对项目进行新的迁移，然后应用这些迁移：
 
@@ -510,7 +523,8 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 现在可以将书本借给特定用户，然后借出一些`BookInstance`记录。将他们的借用字段`borrowed`，设置为你的测试用户，将状态`status`设置为“On loan”，并在将来和过去设置截止日期。
 
-> **备注：** 我们不会一步一步说明这个流程，因为你已经知道如何使用管理站点！
+> [!NOTE]
+> 我们不会一步一步说明这个流程，因为你已经知道如何使用管理站点！
 
 ### 在借书视图
 
@@ -668,7 +682,8 @@ class MyView(PermissionRequiredMixin, View):
 
 你应该能够遵循与其他视图相同的模式。主要区别在于，你需要将视图限制为仅限图书馆员。你可以根据用户是否是工作人员（函数装饰器：`staff_member_required`，模板变量：`user.is_staff`）来执行此操作，但我们建议你改为使用`can_mark_returned`权限，和 `PermissionRequiredMixin`，如上一节所述。
 
-> **警告：** 请记住，不要使用超级用户进行基于权限的测试（即使尚未定义权限，权限检查也会对超级用户返回 true）。而是要创建一个图书管理员用户，并添加所需的功能。
+> [!WARNING]
+> 请记住，不要使用超级用户进行基于权限的测试（即使尚未定义权限，权限检查也会对超级用户返回 true）。而是要创建一个图书管理员用户，并添加所需的功能。
 
 完成后，你的页面应该类似于下面的屏幕截图。
 
diff --git a/files/zh-cn/learn/server-side/django/deployment/index.md b/files/zh-cn/learn/server-side/django/deployment/index.md
index 421f94be22be41..5f6f19983125ae 100644
--- a/files/zh-cn/learn/server-side/django/deployment/index.md
+++ b/files/zh-cn/learn/server-side/django/deployment/index.md
@@ -51,19 +51,22 @@ slug: Learn/Server-side/Django/Deployment
 - 在 Django 网站和 Web 服务器之间，传递“动态”请求的应用程序服务器。
 - 你的网站所依赖的数据库。
 
-> **备注：** 根据你的生产配置方式，你可能还有反向代理，负载均衡器等。
+> [!NOTE]
+> 根据你的生产配置方式，你可能还有反向代理，负载均衡器等。
 
 服务器计算机可以位于你的场所，并通过快速链接连接到 Internet，但使用托管“在云中”的计算机更为常见。这实际上意味着，你的代码在托管公司的数据中心的某台远程计算机（或可能是“虚拟”计算机）上运行。远程服务器通常会以特定价格，提供一些保证级别的计算资源（例如 CPU，RAM，存储器等）和互联网连接。
 
 这种可远程访问的计算/网络硬件，称为基础架构即服务（IaaS）。许多 IaaS 供应商，提供预安装特定操作系统的选项，你必须在其上安装生产环境的其他组件。其他供应商允许你选择功能更全面的环境，可能包括完整的 Django，和 Web 服务器设置。
 
-> **备注：** 预构建环境可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，当你需要升级系统的某些部分时，你就知道从哪里开始！
+> [!NOTE]
+> 预构建环境可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，当你需要升级系统的某些部分时，你就知道从哪里开始！
 
 其他托管服务提供商，支持 Django 作为平台即服务（PaaS）产品的一部分。在这种托管中，你不必担心大多数生产环境（Web 服务器，应用程序服务器，负载平衡器），因为主机平台会为你处理这些（以及为了扩展你的应用程序，而需要做的大部分工作）。这使得部署非常简单，因为你只需要专注于 Web 应用程序，而不是所有其他服务器的基础结构。
 
 相对于 PaaS，一些开发人员会选择 IaaS 所提供的更高灵活性，而其他开发人员，则欣赏 PaaS 降低的维护开销，和更轻松地扩展。当你开始使用时，在 PaaS 系统上设置你的网站，要容易得多，因此我们将在本教程中这么做。
 
-> **备注：** 如果你选择一个 Python/Django 友好的托管服务提供商，他们应该提供有关如何使用不同配置的网络服务器，应用服务器，反向代理等设置 Django 网站的说明（如果你选择 PaaS，这就没有关系了）。例如，[Digital Ocean Django 社区文档](https://www.digitalocean.com/community/tutorials?q=django) 中的各种配置，有许多手把手指南。
+> [!NOTE]
+> 如果你选择一个 Python/Django 友好的托管服务提供商，他们应该提供有关如何使用不同配置的网络服务器，应用服务器，反向代理等设置 Django 网站的说明（如果你选择 PaaS，这就没有关系了）。例如，[Digital Ocean Django 社区文档](https://www.digitalocean.com/community/tutorials?q=django) 中的各种配置，有许多手把手指南。
 
 ## 选择托管服务提供商
 
@@ -85,13 +88,15 @@ slug: Learn/Server-side/Django/Deployment
 
 许多提供商还有“基本”层，可提供更多有用的计算能力和更少的限制。[Digital Ocean](https://www.digitalocean.com/) 和 [Python Anywhere](https://www.pythonanywhere.com/) ，就是流行的托管服务提供商的例子，提供相对便宜的基本计算等级（每月 5 美元到 10 美元不等）。
 
-> **备注：** 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现，可扩展性是最重要的考虑因素。
+> [!NOTE]
+> 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现，可扩展性是最重要的考虑因素。
 
 ## 让你的网站准备好发布
 
 使用 django-admin 和 manage.py 工具创建的 Django 骨架网站，是为了使开发更容易而配置的。出于安全性或性能原因，许多 Django 项目设置（在**settings.py**中指定），在生产应该是不同的。
 
-> **备注：** 通常有一个单独的 **settings.py** 文件用于生产环境，并从单独的文件或环境变量，导入敏感设置。即使其他源代码在公共存储库中可用，也应保护此文件。
+> [!NOTE]
+> 通常有一个单独的 **settings.py** 文件用于生产环境，并从单独的文件或环境变量，导入敏感设置。即使其他源代码在公共存储库中可用，也应保护此文件。
 
 你必须检查的关键设置是：
 
@@ -131,7 +136,8 @@ DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )
 
 默认情况下，`DEBUG`的值为`True`，但如果`DJANGO_DEBUG`环境变量的值，设置为空字符串，则为`False`，例如，`DJANGO_DEBUG=''`。
 
-> **备注：** 如果我们可以直接将`DJANGO_DEBUG`环境变量设置为`True`或`False`，而不是分别使用“any string”或“empty string”，那将更直观。不幸的是，环境变量值存储为 Python 字符串，计算结果为 `False` 的唯一字符串，是空字符串（例如`bool('')==False`）。
+> [!NOTE]
+> 如果我们可以直接将`DJANGO_DEBUG`环境变量设置为`True`或`False`，而不是分别使用“any string”或“empty string”，那将更直观。不幸的是，环境变量值存储为 Python 字符串，计算结果为 `False` 的唯一字符串，是空字符串（例如`bool('')==False`）。
 
 [部署清单（Django 文档）](https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/)中，提供了你可能要更改的完整设置清单。你还可以使用下面的终端命令，列出其中的一些：
 
@@ -181,7 +187,8 @@ Heroku 在一个或多个“[Dynos](https://devcenter.heroku.com/articles/dynos)
 
 完成所有操作后，我们可以设置 Heroku 帐户，获取 Heroku 客户端，并使用它来安装我们的网站。
 
-> **备注：** 以下说明反映了在撰写本书时，如何使用 Heroku。如果 Heroku 显着改变了他们的操作过程，你可能希望检查他们的设置文档：[在 Heroku 上开始使用 Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction)。
+> [!NOTE]
+> 以下说明反映了在撰写本书时，如何使用 Heroku。如果 Heroku 显着改变了他们的操作过程，你可能希望检查他们的设置文档：[在 Heroku 上开始使用 Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction)。
 
 就是你一开始所需的所有概述（请参阅 [Heroku 如何工作](https://devcenter.heroku.com/articles/how-heroku-works)，以获取更全面的指南）。
 
@@ -189,7 +196,8 @@ Heroku 在一个或多个“[Dynos](https://devcenter.heroku.com/articles/dynos)
 
 Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/同步你对实时系统所做的任何更改。它通过添加一个名为 heroku 的新的 heroku“远程”储存库，来指向 Heroku 云上的源储存库。在开发期间，你使用 git 在“主”储存库中储存更改。如果要部署站点，请将更改同步到 Heroku 储存库。
 
-> **备注：** 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git，或其他一些 SCM 系统。如果你已有 git 储存库，则可以跳过此步骤。
+> [!NOTE]
+> 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git，或其他一些 SCM 系统。如果你已有 git 储存库，则可以跳过此步骤。
 
 有很多方法可以使用 git，但最简单的方法之一，是首先在 [Github](https://github.com/) 上建立一个帐户，在那里创建储存库，然后将它同步到本地：
 
@@ -273,7 +281,8 @@ Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/
 
 完成此操作后，你应该可以返回创建储存库的 Github 上的页面，刷新页面，并看到你的整个应用程序已经上传。使用此添加/提交/推送循环，你可以在文件更改时，继续更新储存库。
 
-> **备注：** 这是备份你的“vanilla”项目的一个好时机 - 虽然我们将在以下部分中，进行的一些更改，可能对有些人在任何平台（或开发）上的部署有用，对其他人可能没有用。
+> [!NOTE]
+> 这是备份你的“vanilla”项目的一个好时机 - 虽然我们将在以下部分中，进行的一些更改，可能对有些人在任何平台（或开发）上的部署有用，对其他人可能没有用。
 >
 > 执行此操作的最佳方法，是使用 git 来管理你的修订。使用 git，你不仅可以回到特定的旧版本，而且可以在生产变更的单独“分支”中进行维护，并选择在生产和开发分支之间移动的任何更改。[学习 Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/) 非常值得，但超出了本主题的范围。
 >
@@ -356,7 +365,8 @@ pip3 install psycopg2
 
 在开发过程中，我们使用 Django 和 Django 开发 Web 服务器，来提供静态文件（CSS，JavaScript 等）。在生产环境中，我们通常提供来自内容传送网络（CDN）或 Web 服务器的静态文件。
 
-> **备注：** 通过 Django/web 应用程序提供静态文件是低效的，因为请求必须通过不必要的附加代码（Django），而不是由 Web 服务器或完全独立的 CDN 直接处理。虽然这对于开发期间的本地使用无关紧要，但如果我们在生产环境中使用相同的方法，则会对性能产生重大影响。
+> [!NOTE]
+> 通过 Django/web 应用程序提供静态文件是低效的，因为请求必须通过不必要的附加代码（Django），而不是由 Web 服务器或完全独立的 CDN 直接处理。虽然这对于开发期间的本地使用无关紧要，但如果我们在生产环境中使用相同的方法，则会对性能产生重大影响。
 
 为了便于将静态文件与 Django Web 应用程序分开托管，Django 提供了 collectstatic 工具，来收集这些文件以进行部署（有一个设置变量，用于定义在运行 collectstatic 时，应该收集文件的位置）。Django 模板是指相对于设置变量（`STATIC_URL`）的静态文件的托管位置，因此如果将静态文件移动到另一个主机/服务器，则可以更改此位置。
 
@@ -389,7 +399,8 @@ STATIC_URL = '/static/'
 
 有许多方法可以在生产环境中提供静态文件（我们在前面的部分中看到了相关的 Django 设置）。Heroku 建议在生产环境中使用 [WhiteNoise](https://warehouse.python.org/project/whitenoise/) 项目，直接从 Gunicorn 提供静态资产。
 
-> **备注：** Heroku 会在上传你的应用程序后，自动调用 collectstatic 并准备静态文件，以供 WhiteNoise 使用。查看 [WhiteNoise](https://warehouse.python.org/project/whitenoise/) 文档，了解其工作原理以及实现，为什么是提供这些文件的相对有效方法。
+> [!NOTE]
+> Heroku 会在上传你的应用程序后，自动调用 collectstatic 并准备静态文件，以供 WhiteNoise 使用。查看 [WhiteNoise](https://warehouse.python.org/project/whitenoise/) 文档，了解其工作原理以及实现，为什么是提供这些文件的相对有效方法。
 
 设置 WhiteNoise 以便在项目中使用的步骤如下：
 
@@ -444,7 +455,8 @@ psycopg2==2.6.2
 whitenoise==3.2.2
 ```
 
-> **备注：** 确保存在类似上面的 **psycopg2** 的那一行！即使你没有在本地安装它，你仍然应该将它添加到**requirements.txt**。
+> [!NOTE]
+> 确保存在类似上面的 **psycopg2** 的那一行！即使你没有在本地安装它，你仍然应该将它添加到**requirements.txt**。
 
 #### Runtime
 
@@ -454,7 +466,8 @@ whitenoise==3.2.2
 python-3.6.4
 ```
 
-> **备注：** Heroku 只支持少量的 [Python 运行库](https://devcenter.heroku.com/articles/python-support#supported-python-runtimes)（在编写本文时，包括上面的那个）。Heroku 将使用受支持的运行库，而不管此文件中指定的值。
+> [!NOTE]
+> Heroku 只支持少量的 [Python 运行库](https://devcenter.heroku.com/articles/python-support#supported-python-runtimes)（在编写本文时，包括上面的那个）。Heroku 将使用受支持的运行库，而不管此文件中指定的值。
 
 #### 将更改保存到 Github 并重新测试
 
@@ -502,7 +515,8 @@ heroku help
 heroku create
 ```
 
-> **备注：** 如果你愿意，可以通过在“创建”之后指定值来命名远程。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。
+> [!NOTE]
+> 如果你愿意，可以通过在“创建”之后指定值来命名远程。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。
 
 然后我们可以将应用程序，推送到 Heroku 储存库，如下所示。这将上传应用程序，将其打包到 dyno 中，运行 collectstatic，然后启动该站点。
 
@@ -564,7 +578,8 @@ DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-20
 
 如果你回想起来**准备发布网站**的部分，我们必须为`DJANGO_SECRET_KEY` 和 `DJANGO_DEBUG`设置环境变量。我们现在就这样做。
 
-> **备注：** 密钥需要真正的保密！生成新密钥的一种方法，是创建一个新的 Django 项目（`django-admin startproject someprojectname`），然后从 **settings.py** 中，获取为你生成的密钥。
+> [!NOTE]
+> 密钥需要真正的保密！生成新密钥的一种方法，是创建一个新的 Django 项目（`django-admin startproject someprojectname`），然后从 **settings.py** 中，获取为你生成的密钥。
 
 我们使用 `config:set`命令，设置`DJANGO_SECRET_KEY`（如下所示）。记得使用自己的密钥！
 
@@ -600,7 +615,8 @@ git push origin master
 git push heroku master
 ```
 
-> **备注：** 完成 Heroku 的站点更新后，输入一个不存在的 URL（例如，**/catalog/doesnotexist/**）。以前这会显示一个详细的调试页面，但现在，你应该只看到一个简单的“未找到”页面。
+> [!NOTE]
+> 完成 Heroku 的站点更新后，输入一个不存在的 URL（例如，**/catalog/doesnotexist/**）。以前这会显示一个详细的调试页面，但现在，你应该只看到一个简单的“未找到”页面。
 
 ### 除错调试
 
diff --git a/files/zh-cn/learn/server-side/django/development_environment/index.md b/files/zh-cn/learn/server-side/django/development_environment/index.md
index 1b9f5ce457adb6..780b102dc0628a 100644
--- a/files/zh-cn/learn/server-side/django/development_environment/index.md
+++ b/files/zh-cn/learn/server-side/django/development_environment/index.md
@@ -46,7 +46,8 @@ Django 在安装和配置方面非常灵活。Django 可以：
 
 每个选项都需要略微不同的配置和设置。以下小节解释了你的一些选择。在本文的其余部分中，我们将介绍 Django 在几个操作系统上的设置，并且在本教程的剩余模块中将假设你已进行该设置。
 
-> **备注：** 其他可能的安装选项在官方 Django 文档中介绍。[相应文件 点击这里](#furtherreading).
+> [!NOTE]
+> 其他可能的安装选项在官方 Django 文档中介绍。[相应文件 点击这里](#furtherreading).
 
 #### 支持哪些操作系统？
 
@@ -62,7 +63,8 @@ Django web 应用程序能运行在几乎任何可以运行 Python3 的计算机
 
 我们建议你使用最新版本的 Python 3，除非该站点依赖于仅适用于 Python 2 的第三方库。本文将介绍如何为 Python 3 安装环境（Python 2 的等效设置将非常相似）。
 
-> **备注：** Python 2.7 无法用于当前的 Django 发行版本（Django 1.11.x 系列是最后支持 Python 2.7 的版本）。
+> [!NOTE]
+> Python 2.7 无法用于当前的 Django 发行版本（Django 1.11.x 系列是最后支持 Python 2.7 的版本）。
 
 #### 我们在哪里下载 Django?
 
@@ -80,13 +82,15 @@ Django 支持四个主要数据库（PostgreSQL，MySQL，Oracle 和 SQLite）
 
 对于本文（和本模块的大部分），我们将使用将数据存储在文件中的 SQLite 数据库。SQLite 旨在用作轻量级数据库，不能支持高并发。然而，这确实是只读的应用程序的绝佳选择。
 
-> **备注：** 当你使用标准工具（django-admin）启动你的网站项目时，Django 将默认使用 SQLite。用来入门时，这是一个很好的选择，因为它不需要额外的配置和设置。
+> [!NOTE]
+> 当你使用标准工具（django-admin）启动你的网站项目时，Django 将默认使用 SQLite。用来入门时，这是一个很好的选择，因为它不需要额外的配置和设置。
 
 #### 安装本机系统还是 Python 虚拟环境中？
 
 当你安装 Python3 时，将获得一个由所有 Python3 代码共享的全局环境。虽然你可以在该环境中安装任何你喜欢的 Python 包，但是每次只能安装每个包的一个特定版本。
 
-> **备注：** 安装到全局环境的 Python 应用程序可能会相互冲突（例如如果它们依赖于同一包的不同版本）。
+> [!NOTE]
+> 安装到全局环境的 Python 应用程序可能会相互冲突（例如如果它们依赖于同一包的不同版本）。
 
 如果你把 Django 安装到默认/全局环境中，那么在该计算机上将只能定位到 Django 的一个版本。如果你想创建新的网站 (使用最新版本的 Django)，同时仍然维护依赖旧版本的网站，这可能是个问题。
 
@@ -100,7 +104,8 @@ Django 支持四个主要数据库（PostgreSQL，MySQL，Oracle 和 SQLite）
 
 本节简要介绍了如何检查有哪些版本的 Python，并根据需要安装适用于 **Ubuntu Linux 16.04,macOS, and Windows 10**的新版本。
 
-> **备注：** 根据你的平台，你还可以从操作系统自己的软件包管理器或其他机制安装 Python / pip。对于大多数平台，你可以从<https://www.python.org/downloads/>下载所需的安装文件，并使用该平台特定的方法进行安装。
+> [!NOTE]
+> 根据你的平台，你还可以从操作系统自己的软件包管理器或其他机制安装 Python / pip。对于大多数平台，你可以从<https://www.python.org/downloads/>下载所需的安装文件，并使用该平台特定的方法进行安装。
 
 ### Ubuntu 18.04
 
@@ -173,7 +178,8 @@ Windows 安装程序默认包含 pip3 (Python 包管理器)。同样在命令提
 pip3 list
 ```
 
-> **备注：** 安装包应该已把运行上述命令所需的一切设置完成。但如果你得到的消息是找不到 Python，那么你可能忘记将 Python 添加到系统路径中了。你可以通过再次运行安装包，选择"Modify"，并在下一页面中勾选 "Add Python to environment variables"来修复这个问题。
+> [!NOTE]
+> 安装包应该已把运行上述命令所需的一切设置完成。但如果你得到的消息是找不到 Python，那么你可能忘记将 Python 添加到系统路径中了。你可以通过再次运行安装包，选择"Modify"，并在下一页面中勾选 "Add Python to environment variables"来修复这个问题。
 
 ## 在 Python 虚拟环境中使用 Django
 
@@ -258,7 +264,8 @@ source /usr/local/bin/virtualenvwrapper.sh
 
 此处使用和 Ubuntu 相同的代码行，但是启动文件是主目录中叫做 **.bash_profile** 的隐藏文件。
 
-> **备注：** 如果找不到 **.bash_profile** 进行编辑，也可以使用 nano 在终端中打开它，命令看起来类似于：
+> [!NOTE]
+> 如果找不到 **.bash_profile** 进行编辑，也可以使用 nano 在终端中打开它，命令看起来类似于：
 >
 > ```bash
 > cd ~  # Navigate to my home directory
@@ -303,7 +310,8 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get
 
 现在你已进入虚拟环境，可以进行 Django 安装并开始开发。
 
-> **备注：** 从现在开始，在本文 (实际上是该模块) 中，请假定所有命令都在类似于我们上面设置的 Python 虚拟环境中运行。
+> [!NOTE]
+> 从现在开始，在本文 (实际上是该模块) 中，请假定所有命令都在类似于我们上面设置的 Python 虚拟环境中运行。
 
 ### 使用一个虚拟环境
 
@@ -334,7 +342,8 @@ py -3 -m django --version
     1.10.10
 ```
 
-> **备注：** 如果上面的 Windows 命令没有显示 django 模块，请尝试：
+> [!NOTE]
+> 如果上面的 Windows 命令没有显示 django 模块，请尝试：
 >
 > ```bash
 > python -m django --version
@@ -342,7 +351,8 @@ py -3 -m django --version
 >
 > 在 Windows 中，Python 3 脚本是通过在命令前面加上`py -3`来启动的，尽管该脚本可能会因你的特定安装而有所不同。如果遇到命令问题，请尝试省略`-3`修饰符。在 Linux /macOS 中，命令是 python3。
 
-> **警告：** 本模块的其余部分使用 Linux 命令来调用 Python 3（`python3`）。如果你在 Windows 上工作，只需将此前缀替换为： `py -3`
+> [!WARNING]
+> 本模块的其余部分使用 Linux 命令来调用 Python 3（`python3`）。如果你在 Windows 上工作，只需将此前缀替换为： `py -3`
 
 ## 测试你的安装
 
@@ -377,7 +387,8 @@ Starting development server at http://127.0.0.1:8000/
 Quit the server with CONTROL-C.
 ```
 
-> **备注：** 上面的命令显示了 Linux /macOS 命令。你可以忽略关于“15 unapplied migration(s)”的警告！
+> [!NOTE]
+> 上面的命令显示了 Linux /macOS 命令。你可以忽略关于“15 unapplied migration(s)”的警告！
 
 一旦服务器运行，你可以通过本地 Web 浏览器打开`http://127.0.0.1:8000/`来查看该站点。你应该看到一个如下所示的网站：
 
diff --git a/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md b/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md
index 838d05895e57bf..d477a598c1e325 100644
--- a/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md
+++ b/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md
@@ -165,7 +165,8 @@ slug: Learn/Server-side/Django/django_assessment_blog
 - BlogListView（所有博客页面）使用预期的模板（例如默认模板）
 - BlogListView 以 5 个记录为 1 个分页（至少在第一页上）
 
-> **备注：** 当然还有许多其他测试可以运行。请谨慎使用，但我们希望你至少进行上述测试。
+> [!NOTE]
+> 当然还有许多其他测试可以运行。请谨慎使用，但我们希望你至少进行上述测试。
 
 以下部分，显示了实现上述要求的站点的屏幕截图。
 
diff --git a/files/zh-cn/learn/server-side/django/forms/index.md b/files/zh-cn/learn/server-side/django/forms/index.md
index 66f16182c5ba04..aab83b4bdd1109 100644
--- a/files/zh-cn/learn/server-side/django/forms/index.md
+++ b/files/zh-cn/learn/server-side/django/forms/index.md
@@ -104,7 +104,8 @@ Django 的表单处理，使用了我们在之前的教程中，学到的所有
 
 Django 提供了许多工具和方法，来帮助你完成上述任务。最基本的是 `Form` 类，它简化了表单 HTML 和数据清理/验证的生成。在下一节中，我们将描述表单如何使用页面的实际示例，来允许图书馆员更新书本籍。
 
-> **备注：** 在我们讨论 Django 更“高级”的表单框架类时，了解 `Form` 的使用方式，将对你有所帮助。
+> [!NOTE]
+> 在我们讨论 Django 更“高级”的表单框架类时，了解 `Form` 的使用方式，将对你有所帮助。
 
 ## 续借表单 - 使用表单和功能视图
 
@@ -183,7 +184,8 @@ class RenewBookForm(forms.Form):
 
 第二点是，如果某个值超出了我们的范围，我们会引发`ValidationError`，指定在输入无效值时，我们要在表单中显示的错误文本。上面的例子，也将这个文本包含在 [Django 的翻译函数](https://docs.djangoproject.com/zh-hans/2.0/topics/i18n/translation/)`ugettext_lazy()`中（导入为 `_()`），如果你想在稍后翻译你的网站，这是一个很好的做法。
 
-> **备注：** 在[表单和字段验证](https://docs.djangoproject.com/zh-hans/2.0/ref/forms/validation/)（Django docs）中验证表单还有其他很多方法和示例。例如，如果你有多个相互依赖的字段，则可以覆盖[Form.clean()](https://docs.djangoproject.com/en/2.0/ref/forms/api/#django.forms.Form.clean) 函数并再次引发`ValidationError`。
+> [!NOTE]
+> 在[表单和字段验证](https://docs.djangoproject.com/zh-hans/2.0/ref/forms/validation/)（Django docs）中验证表单还有其他很多方法和示例。例如，如果你有多个相互依赖的字段，则可以覆盖[Form.clean()](https://docs.djangoproject.com/en/2.0/ref/forms/api/#django.forms.Form.clean) 函数并再次引发`ValidationError`。
 
 这就是我们在这个例子中，对表单所需要了解的全部内容！
 
@@ -203,7 +205,8 @@ urlpatterns += [
 
 URL 配置会将格式为 **/catalog/book/\<bookinstance id>/renew/** 的 URL，重定向到 **views.py** 中，名为`renew_book_librarian()` 的函数，并将`BookInstance` id 作为名为 `pk`的参数发送。只有 `pk`是正确格式化的 `uuid`，该模式才会匹配。
 
-> **备注：** 我们可以将捕获的 URL 数据，命名为“`pk`”，因为我们可以完全控制视图函数（我们不使用需要具有特定名称的参数的通用详细视图类）。然而，`pk`，“主键”primary key 的缩写，是一个合理的惯例！
+> [!NOTE]
+> 我们可以将捕获的 URL 数据，命名为“`pk`”，因为我们可以完全控制视图函数（我们不使用需要具有特定名称的参数的通用详细视图类）。然而，`pk`，“主键”primary key 的缩写，是一个合理的惯例！
 
 ### 视图
 
@@ -296,7 +299,8 @@ def renew_book_librarian(request, pk):
 
 如果表单有效，那么我们可以开始使用数据，通过 `form.cleaned_data`属性访问它（例如 `data = form.cleaned_data['renewal_date']`）。这里我们只将数据保存到关联的`BookInstance` 对象的`due_back` 值中。
 
-> **警告：** 虽然你也可以通过请求直接访问表单数据（例如`request.POST['renewal_date']` 或 `request.GET['renewal_date']`（如果使用 GET 请求），但不建议这样做。清理后的数据是无害的、验证过的、并转换为 Python 友好类型。
+> [!WARNING]
+> 虽然你也可以通过请求直接访问表单数据（例如`request.POST['renewal_date']` 或 `request.GET['renewal_date']`（如果使用 GET 请求），但不建议这样做。清理后的数据是无害的、验证过的、并转换为 Python 友好类型。
 
 视图的表单处理部分的最后一步，是重定向到另一个页面，通常是“成功”页面。在这种情况下，我们使用 `HttpResponseRedirect` 和 `reverse()` ，重定向到名为'`all-borrowed`'的视图（这是在 [Django 教程第 8 部分中创建的“挑战”：用户身份验证和权限](/zh-CN/docs/learn/Server-side/Django/Authentication#Challenge_yourself)）。如果你没有创建该页面，请考虑重定向到 URL'/'处的主页。
 
@@ -370,7 +374,8 @@ def renew_book_librarian(request, pk):
 
 表单代码相对简单。首先，我们声明表单标签，指定表单的提交位置（`action`）和提交数据的方法（在本例中为“HTTP POST”） - 如果你回想一下页面顶部的 HTML 表单概述，如图所示的空`action` ，意味着表单数据将被发布回页面的当前 URL（这是我们想要的！）。在标签内部，我们定义了`submit` 提交输入，用户可以按这个输入来提交数据。在表单标签内添加的`{% csrf_token %}` ，是 Django 跨站点伪造保护的一部分。
 
-> **备注：** 将`{% csrf_token %}` 添加到你创建的每个使用 `POST` 提交数据的 Django 模板中。这将减少恶意用户劫持表单的可能性。
+> [!NOTE]
+> 将`{% csrf_token %}` 添加到你创建的每个使用 `POST` 提交数据的 Django 模板中。这将减少恶意用户劫持表单的可能性。
 
 剩下的就是 `\{{form}}`模板变量，我们将其传递给上下文字典中的模板。也许不出所料，当如图所示使用时，它提供了所有表单字段的默认呈现，包括它们的标签、小部件、和帮助文本 - 呈现如下所示：
 
@@ -392,7 +397,8 @@ def renew_book_librarian(request, pk):
 </tr>
 ```
 
-> **备注：** 它可能并不明显，因为我们只有一个字段，但默认情况下，每个字段都在其自己的表格行中定义（这就是变量在上面的`table` 表格标记内部的原因）。如果你引用模板变量`\{{ form.as_table }}`，会提供相同的渲染。
+> [!NOTE]
+> 它可能并不明显，因为我们只有一个字段，但默认情况下，每个字段都在其自己的表格行中定义（这就是变量在上面的`table` 表格标记内部的原因）。如果你引用模板变量`\{{ form.as_table }}`，会提供相同的渲染。
 
 如果你输入无效日期，你还会获得页面中呈现的错误列表（下面以**粗体**显示）。
 
@@ -441,7 +447,8 @@ def renew_book_librarian(request, pk):
 {% endif %}
 ```
 
-> **备注：** 请记住，你的测试登录需要具有“`catalog.can_mark_returned`”权限，才能访问续借书本页面（可能使用你的超级用户帐户）。
+> [!NOTE]
+> 请记住，你的测试登录需要具有“`catalog.can_mark_returned`”权限，才能访问续借书本页面（可能使用你的超级用户帐户）。
 
 你也可以手动构建这样的测试 URL - `http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/` （可以通过导航到图书馆中的书本详细信息页面，获取有效的 bookinstance id，并复制`id` 字段）。
 
@@ -477,7 +484,8 @@ class RenewBookModelForm(ModelForm):
         fields = ['due_back',]
 ```
 
-> **备注：** 这可能看起来不像使用`Form` 那么简单（在这种情况下不是这样，因为我们只有一个字段）。但是，如果你有很多字段，它可以显着减少代码量！
+> [!NOTE]
+> 这可能看起来不像使用`Form` 那么简单（在这种情况下不是这样，因为我们只有一个字段）。但是，如果你有很多字段，它可以显着减少代码量！
 
 其余信息来自模型字段的定义（例如标签、小部件、帮助文本、错误消息）。如果这些不太正确，那么我们可以在 `Meta`类中覆盖它们，指定包含要更改的字段、及其新值的字典。例如，在这种形式中，我们可能需要“更新日期”_Renewal date_ 字段的标签（而不是基于字段名称的默认值：截止日期 _Due date_），并且我们还希望我们的帮助文本，特定于此用例。下面的`Meta` 显示了如何覆盖这些字段，如果默认值不够，你可以类似地方式设置`widgets` 窗口小部件和`error_messages` 。
 
@@ -523,7 +531,8 @@ class RenewBookModelForm(ModelForm):
 
 我们在上面的函数视图示例中，使用的表单处理算法，表示表单编辑视图中非常常见的模式。Django 通过创建基于模型创建、编辑和删除视图的[通用编辑视图](https://docs.djangoproject.com/zh-hans/2.0/ref/class-based-views/generic-editing/)，为你抽象出大部分“样板”。这些不仅处理“视图”行为，而且它们会自动从模型中为你创建表单类（`ModelForm`）。
 
-> **备注：** 除了这里描述的编辑视图之外，还有一个 [FormView](https://docs.djangoproject.com/zh-hans/2.0/ref/class-based-views/generic-editing/#formview)类，它位于我们的函数视图，和其他通用视图之间的“灵活性”与“编码工作”之间。使用 `FormView` ，你仍然需要创建表单，但不必实现所有标准表单处理模式。相反，你只需提供一个函数的实现，一旦知道提交有效，就会调用该函数。
+> [!NOTE]
+> 除了这里描述的编辑视图之外，还有一个 [FormView](https://docs.djangoproject.com/zh-hans/2.0/ref/class-based-views/generic-editing/#formview)类，它位于我们的函数视图，和其他通用视图之间的“灵活性”与“编码工作”之间。使用 `FormView` ，你仍然需要创建表单，但不必实现所有标准表单处理模式。相反，你只需提供一个函数的实现，一旦知道提交有效，就会调用该函数。
 
 在本节中，我们将使用通用编辑视图，来创建页面，以添加从我们的库中创建、编辑和删除`Author` 作者记录的功能 - 有效地提供管理站点一部分的基本重新实现（这可能很有用，如果你需要比管理站点能提供的、更加灵活的管理功能）。
 
@@ -611,7 +620,8 @@ urlpatterns += [
 
 作者的创建，更新和删除页面，现在已准备好进行测试（在这种情况下，我们不会将它们连接到站点侧栏，尽管如果你愿意，也可以这样做）。
 
-> **备注：** 敏锐的用户会注意到，我们没有采取任何措施，来防止未经授权的用户访问这些页面！我们将其作为练习留给你（提示：你可以使用`PermissionRequiredMixin` ，并创建新权限，或重用我们的`can_mark_returned`权限）。
+> [!NOTE]
+> 敏锐的用户会注意到，我们没有采取任何措施，来防止未经授权的用户访问这些页面！我们将其作为练习留给你（提示：你可以使用`PermissionRequiredMixin` ，并创建新权限，或重用我们的`can_mark_returned`权限）。
 
 ### 测试页面
 
diff --git a/files/zh-cn/learn/server-side/django/generic_views/index.md b/files/zh-cn/learn/server-side/django/generic_views/index.md
index 1d1ad8160a028f..05edaea8588f20 100644
--- a/files/zh-cn/learn/server-side/django/generic_views/index.md
+++ b/files/zh-cn/learn/server-side/django/generic_views/index.md
@@ -70,7 +70,8 @@ class BookListView(generic.ListView):
 
 就是这样！通用视图将查询数据库，以获取指定模型（`Book`）的所有记录，然后呈现位于 **/locallibrary/catalog/templates/catalog/book_list.html** 的模板（我们将在下面创建）。在模板中，你可以使用名为`object_list` 或 `book_list`的模板变量（即通常为“`the_model_name_list`”），以访问书本列表。
 
-> **备注：** 模板位置的这个尴尬路径不是印刷错误 - 通用视图在应用程序的`/application_name/templates/`目录中`（/catalog/templates/`），查找模板`/application_name/the_model_name_list.html`（在本例中为`catalog/book_list.html`）。
+> [!NOTE]
+> 模板位置的这个尴尬路径不是印刷错误 - 通用视图在应用程序的`/application_name/templates/`目录中`（/catalog/templates/`），查找模板`/application_name/the_model_name_list.html`（在本例中为`catalog/book_list.html`）。
 
 你可以添加属性，以更改上面的默认行为。例如，如果需要使用同一模型的多个视图，则可以指定另一个模板文件，或者如果`book_list`对于特定模板用例不直观，则可能需要使用不同的模板变量名称。可能最有用的变更，是更改/过滤返回的结果子集 - 因此，你可能会列出其他用户阅读的前 5 本书，而不是列出所有书本。
 
@@ -116,7 +117,8 @@ class BookListView(generic.ListView):
 - 然后添加新的上下文信息。
 - 然后返回新的（更新的）上下文。
 
-> **备注：** 查看[内置的基于类的通用视图](https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/)（Django 文档），了解更多可以执行的操作示例。
+> [!NOTE]
+> 查看[内置的基于类的通用视图](https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/)（Django 文档），了解更多可以执行的操作示例。
 
 ### 创建列表视图模板
 
@@ -184,7 +186,8 @@ class BookListView(generic.ListView):
 
 我们还可以在模板中，调用模型中的函数 - 在这里，我们调用`Book.get_absolute_url()`，来获取可用于显示关联详细记录的 URL。这项工作提供的函数没有任何参数（没有办法传递参数！）
 
-> **备注：** 在模板中调用函数时，我们必须要小心“副作用”。在这里我们只需要显示一个 URL，但是一个函数几乎可以做任何事情 - 我们不想仅仅通过渲染模板，而删除了我们的数据库（例如）！
+> [!NOTE]
+> 在模板中调用函数时，我们必须要小心“副作用”。在这里我们只需要显示一个 URL，但是一个函数几乎可以做任何事情 - 我们不想仅仅通过渲染模板，而删除了我们的数据库（例如）！
 
 #### 更新基本模板
 
@@ -220,13 +223,16 @@ urlpatterns = [
 
 在这里，我们使用 `'<int:pk>'` 来捕获 book id，它必须是一个整数，并将其作为名为 `pk` 的参数（主键的缩写）传递给视图。
 
-> **备注：** 如前所述，我们匹配的 URL 实际上是 `catalog/book/<digits>`（因为我们在应用程序 **catalog** 中，假定使用`/catalog/`）。
+> [!NOTE]
+> 如前所述，我们匹配的 URL 实际上是 `catalog/book/<digits>`（因为我们在应用程序 **catalog** 中，假定使用`/catalog/`）。
 
-> **警告：** 基于类的通用详细信息视图，需要传递一个名为 **pk** 的参数。如果你正在编写自己的函数视图，则可以使用你喜欢的任何参数名称，或者，确实也可以，在未命名的参数中传递信息。
+> [!WARNING]
+> 基于类的通用详细信息视图，需要传递一个名为 **pk** 的参数。如果你正在编写自己的函数视图，则可以使用你喜欢的任何参数名称，或者，确实也可以，在未命名的参数中传递信息。
 
 #### 高级路径匹配/正则表达式入门
 
-> **备注：** 完成教程并不需要此部分说明！我们提供它，是因为了解此可选的部分，未来可能对你使用 Django 有帮助。
+> [!NOTE]
+> 完成教程并不需要此部分说明！我们提供它，是因为了解此可选的部分，未来可能对你使用 Django 有帮助。
 
 `path()`提供的模式匹配非常简单，对于你只想捕获任何字符串或整数的（非常常见的）情况非常有用。如果需要更精细的过滤（例如，仅过滤具有一定数量字符的字符串），则可以使用 [re_path()](https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.re_path) 方法。
 
@@ -367,7 +373,8 @@ re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail
 
 你可以在一个匹配中捕获多个模式，从而在 URL 中，编码许多不同的信息。
 
-> **备注：** 作为一项挑战，请考虑如何对网址进行编码，以列出特定年份，月份，日期的所有图书，以及可用于匹配它的规则表达式 RE。
+> [!NOTE]
+> 作为一项挑战，请考虑如何对网址进行编码，以列出特定年份，月份，日期的所有图书，以及可用于匹配它的规则表达式 RE。
 
 #### 在 URL 地图中传递其他选项
 
@@ -380,7 +387,8 @@ path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl
 path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
 ```
 
-> **备注：** 额外选项和命名捕获的模式，二者都作为命名参数传递给视图。如果对捕获的模式和额外选项使用**相同的名称**，则仅将捕获的模式值发送到视图（将删除附加选项中指定的值）。
+> [!NOTE]
+> 额外选项和命名捕获的模式，二者都作为命名参数传递给视图。如果对捕获的模式和额外选项使用**相同的名称**，则仅将捕获的模式值发送到视图（将删除附加选项中指定的值）。
 
 ### 视图 (基于类别)
 
@@ -451,7 +459,8 @@ def book_detail_view(request,pk):
 {% endblock %}
 ```
 
-> **备注：** 上面模板中的作者链接，有一个空 URL，因为我们尚未创建作者详细信息页面。一旦创建了，你应该像这样更新 URL：
+> [!NOTE]
+> 上面模板中的作者链接，有一个空 URL，因为我们尚未创建作者详细信息页面。一旦创建了，你应该像这样更新 URL：
 >
 > ```python
 > <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
@@ -474,7 +483,8 @@ def book_detail_view(request,pk):
 
 需要此方法，是因为你仅在关系的“一”侧声明 `ForeignKey`（一对多）字段。由于你没有做任何事情，来声明其他（“多”）模型中的关系，因此它没有任何字段，来获取相关记录集。为了解决这个问题，Django 构造了一个适当命名的“反向查找”函数，你可以使用它。函数的名称，是通过对声明 `ForeignKey` 的模型名称，转化为小写来构造的，然后是`_set`（即，在 `Book`中创建的函数是 `bookinstance_set()`）。
 
-> **备注：** 这里我们使用`all()`来获取所有记录（默认值）。虽然你可以使用`filter()`方法获取代码中的记录子集，但你无法直接在模板中执行此操作，因为你无法指定函数的参数。
+> [!NOTE]
+> 这里我们使用`all()`来获取所有记录（默认值）。虽然你可以使用`filter()`方法获取代码中的记录子集，但你无法直接在模板中执行此操作，因为你无法指定函数的参数。
 >
 > 还要注意，如果你没有定义顺序（在基于类的视图或模型上），你还会看到开发服务器中的错误，如下所示：
 >
@@ -519,7 +529,8 @@ def book_detail_view(request,pk):
 
 此时，我们应该创建了显示书本列表，和书本详细信息页面所需的所有内容。运行服务器（`python3 manage.py runserver`），并打开浏览器到 <http://127.0.0.1:8000/>。
 
-> **警告：** 请还不要点击任何作者、或作者详细信息链接 - 你将在挑战练习中，创建这些链接！
+> [!WARNING]
+> 请还不要点击任何作者、或作者详细信息链接 - 你将在挑战练习中，创建这些链接！
 
 单击所有书籍链接 **All books** ，以显示书籍列表。
 
diff --git a/files/zh-cn/learn/server-side/django/home_page/index.md b/files/zh-cn/learn/server-side/django/home_page/index.md
index d4d053602aa410..51683a6279b294 100644
--- a/files/zh-cn/learn/server-side/django/home_page/index.md
+++ b/files/zh-cn/learn/server-side/django/home_page/index.md
@@ -61,7 +61,8 @@ slug: Learn/Server-side/Django/Home_page
 
 相比之下，最后两个 URL 用于显示有关特定书籍或作者的详细信息 - 这些 URL 将编码要显示在 URL 中的项目的标识（如上所示\<id>）。URL 映射器可以提取编码信息并将其传递给视图，然后将动态地确定从数据库获取哪些信息。通过对我们的 URL 中的信息进行编码，我们只需要一个 URL 映射，视图和模板来处理每本书（或作者）。
 
-> **备注：** Django 允许你以任何你喜欢的方式构建你的 URL - 你可以如上所示编码 URL 正文中的信息，或使用 URL `GET`参数（例如 `/book/?id=6`）。无论你使用哪种方法，URL 都应保持清洁，逻辑和可读性 ([check out the W3C advice here](https://www.w3.org/Provider/Style/URI)).
+> [!NOTE]
+> Django 允许你以任何你喜欢的方式构建你的 URL - 你可以如上所示编码 URL 正文中的信息，或使用 URL `GET`参数（例如 `/book/?id=6`）。无论你使用哪种方法，URL 都应保持清洁，逻辑和可读性 ([check out the W3C advice here](https://www.w3.org/Provider/Style/URI)).
 >
 > Django 文档倾向于在 URL 的主体中推荐编码信息，这是他们觉得鼓励更好的 URL 设计的实践。
 
@@ -71,7 +72,8 @@ slug: Learn/Server-side/Django/Home_page
 
 我们创建的第一个页面将会是索引页（catalog/)。这会显示一些静态 HTML，以及数据库中不同记录的一些计算的“计数“。为了使其工作，我们必须创建一个 URL 映射，视图和模版。
 
-> **备注：** 本节应该特别注意。一些”材料“在所有页面都通用。
+> [!NOTE]
+> 本节应该特别注意。一些”材料“在所有页面都通用。
 
 ### URL 映射
 
@@ -87,7 +89,8 @@ urlpatterns = [
 
 如果检测到 URL 模式''，(views.index——在 view\.py 中函数命名 index() ）将被调用。URL 模式是[Python 正则表达式](https://docs.python.org/3/library/re.html) (RE)。我们将在本教程中进一步介绍 RE。
 
-> **备注：** 在 **/locallibrary/locallibrary/urls.py**
+> [!NOTE]
+> 在 **/locallibrary/locallibrary/urls.py**
 >
 > ```python
 > urlpatterns += [
@@ -105,7 +108,8 @@ urlpatterns = [
 <a href="{% url 'index' %}">Home</a>.
 ```
 
-> **备注：** 我们当然可以硬编码上面的链接（如：`<a href="/catalog/">Home</a>`），但是如果我们改变了主页的模式，模版将不再正确链接，使用反向网址映射会更灵活和强大。
+> [!NOTE]
+> 我们当然可以硬编码上面的链接（如：`<a href="/catalog/">Home</a>`），但是如果我们改变了主页的模式，模版将不再正确链接，使用反向网址映射会更灵活和强大。
 
 ### View (基于功能)
 
@@ -153,7 +157,8 @@ def index(request):
 
 模版是定义一个文件（例如 HTML 页面）的结构与布局的文本文件，其中占位符用于表示实际内容。Django 将自动在应用程序“templates”目录查找模版。所以例如，在我们刚刚加的索引页，`render()` 函数会期望能够找到 **/locallibrary/catalog/templates/index.html** 这个文件，如何找不到该文件，则会引发错误。如果保存以前的更改并返回到浏览器，你可以看到访问 `127.0.0.1:8000` 现在将提供你一个相当直观的错误信息“**TemplateDoesNotExist at /catalog/**”以及其他详细信息。
 
-> **备注：** Django 将根据你的项目的设置文件，来查看模版的许多位置 (在已安装的应用程序中进行搜索是默认设置). 你可以查阅更多关于 Django 如何找到模版以及它支持的模版格式在[（Templates](https://docs.djangoproject.com/en/1.10/topics/templates/) ）。
+> [!NOTE]
+> Django 将根据你的项目的设置文件，来查看模版的许多位置 (在已安装的应用程序中进行搜索是默认设置). 你可以查阅更多关于 Django 如何找到模版以及它支持的模版格式在[（Templates](https://docs.djangoproject.com/en/1.10/topics/templates/) ）。
 
 #### 扩展模版
 
@@ -161,7 +166,8 @@ def index(request):
 
 例如，基本模版 `base_generic.html` 可能看起来像下面的文本。正如你所见的，它包含一些“常见“HTML”和标题，侧边栏和使用命名 `block` 和 `endblock` 模版标记（粗体显示）标记的内容部分。块可以是空的，或者包含将被派生页“默认使用”的内容。
 
-> **备注：** 模版标签就像你可以在模版中使用的函数循环列表，基于变量的值执行条件操作等。除了模版标签，模版语法允许你引用模版变量（通过从视图进入模版），并使用模版过滤器，其中重新格式化变量（例如，将字符串设置为小写）。
+> [!NOTE]
+> 模版标签就像你可以在模版中使用的函数循环列表，基于变量的值执行条件操作等。除了模版标签，模版语法允许你引用模版变量（通过从视图进入模版），并使用模版过滤器，其中重新格式化变量（例如，将字符串设置为小写）。
 
 ```django
 <!doctype html>
@@ -196,7 +202,8 @@ def index(request):
 
 下面就是我们计划的基本模版用于本地图书馆网站。正如所看到的，内容包括一些 HTML 和定义块 `title` ，`sidebar` 和 `content`。我们有默认的 `title`（当然我们可以改）和默认的所以书籍和作者的链接列表 `sidebar` （我们可能并不会怎么改，但需要时，我们通过把想法放入块`block`中，比如想法是—允许范围）。
 
-> **备注：** 我们再介绍两个额外的模版标签： `url` 和 `load static`。下文中我们会详细介绍。
+> [!NOTE]
+> 我们再介绍两个额外的模版标签： `url` 和 `load static`。下文中我们会详细介绍。
 
 创建一个新的文件 — **/locallibrary/catalog/templates/_base_generic.html_** — 写入如下代码
 
@@ -275,7 +282,8 @@ def index(request):
 
 在动态内容部分，我们的占位符（模版变量），是给我们想要视图的信息声明。变量使用“双大括号“或者“句柄“语法进行标记。
 
-> **备注：** 你可以轻松地识别是否使用变量或模版标签（函数），因为变量具有双括号 (`\{{ num_books }}`) 而标记被包含在带有百分比符号 (`{% extends "base_generic.html" %}`) 的单个大括号中。
+> [!NOTE]
+> 你可以轻松地识别是否使用变量或模版标签（函数），因为变量具有双括号 (`\{{ num_books }}`) 而标记被包含在带有百分比符号 (`{% extends "base_generic.html" %}`) 的单个大括号中。
 
 这里要注意的重要事情是这些变量用我们视图函数`render`中的字典—注入 `context` （下面）；当渲染模版时，这些将替换为相关联的值。
 
@@ -309,7 +317,8 @@ return render(
   style="width:555px;height:540px;" />
 ```
 
-> **备注：** 上面的更改指定文件所在的位置，但 Django 默认不提供它们。当我们[created the website skeleton](/zh-CN/docs/Learn/Server-side/Django/skeleton_website),我们在全局 URL 映射器 r (**/locallibrary/locallibrary/urls.py**) 中开发 Web 服务器提供服务，你仍然需要安排它们在生产中投放。我们接下来看一看
+> [!NOTE]
+> 上面的更改指定文件所在的位置，但 Django 默认不提供它们。当我们[created the website skeleton](/zh-CN/docs/Learn/Server-side/Django/skeleton_website),我们在全局 URL 映射器 r (**/locallibrary/locallibrary/urls.py**) 中开发 Web 服务器提供服务，你仍然需要安排它们在生产中投放。我们接下来看一看
 
 更多内容—[Managing static files](https://docs.djangoproject.com/en/1.10/howto/static-files/) (Django docs).
 
@@ -329,7 +338,8 @@ return render(
 
 ![Index page for LocalLibrary website](index_page_ok.png)
 
-> **备注：** 由于尚未定义这些网页的网址，视图和模板，因此你将无法使用“**所有图书**和**所有作者**”链接（目前我们刚刚在 `base_generic.html` 模板中插入了这些链接的占位符）
+> [!NOTE]
+> 由于尚未定义这些网页的网址，视图和模板，因此你将无法使用“**所有图书**和**所有作者**”链接（目前我们刚刚在 `base_generic.html` 模板中插入了这些链接的占位符）
 
 ## 挑战自己
 
diff --git a/files/zh-cn/learn/server-side/django/index.md b/files/zh-cn/learn/server-side/django/index.md
index 7616f7620b9d8a..35dd633ffbd020 100644
--- a/files/zh-cn/learn/server-side/django/index.md
+++ b/files/zh-cn/learn/server-side/django/index.md
@@ -13,7 +13,8 @@ Django 是使用 Python 语言编写的一个广受欢迎且功能完整的服
 
 最好能有基本的编程概念并了解 [Python](/zh-CN/docs/Glossary/Python) 语言，但其并不是理解本教程的核心概念的必然条件。
 
-> **备注：** 对于初学者来说，Python 是最容易阅读和理解的编程语言之一。也就是说，如果你想更好的理解本教程，网上有很多免费书籍及免费教程可供参考学习（建议初学者查看 Python 官网的 [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) 教程）。
+> [!NOTE]
+> 对于初学者来说，Python 是最容易阅读和理解的编程语言之一。也就是说，如果你想更好的理解本教程，网上有很多免费书籍及免费教程可供参考学习（建议初学者查看 Python 官网的 [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) 教程）。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/server-side/django/introduction/index.md b/files/zh-cn/learn/server-side/django/introduction/index.md
index e3bcbbc0ab32a5..53b94ee6eee9af 100644
--- a/files/zh-cn/learn/server-side/django/introduction/index.md
+++ b/files/zh-cn/learn/server-side/django/introduction/index.md
@@ -67,7 +67,8 @@ Django 最初由 2003 年到 2005 年间由负责创建和维护报纸网站的
 
 Django 不断发展壮大—从 2008 年 9 月的第一个里程碑版本（1.0）到最近发布的（1.11）-（2017）版本。每个版本都添加了新功能和错误修复，从支持新类型的数据库，模版引擎和缓存，到添加“通用”视图函数和类（这减少了开发人员必须编写的代码量）一些编程任务。
 
-> **备注：** 查看 Django 网站上 [发行说明](https://docs.djangoproject.com/en/1.10/releases/)，看看最近版本发生了什么变化，以及 Django 能做多少工作。
+> [!NOTE]
+> 查看 Django 网站上 [发行说明](https://docs.djangoproject.com/en/1.10/releases/)，看看最近版本发生了什么变化，以及 Django 能做多少工作。
 
 Django 现在是一个蓬勃发展的合作开源项目，拥有数千个用户和贡献者。虽然它仍然具有反映其起源的一些功能，但 Django 已经发展成为能够开发任何类型的网站的多功能框架。
 
@@ -105,7 +106,8 @@ Django 网络应用程序通常将处理每个步骤的代码分组到单独的
 
 - **Templates:** 模板 是定义文件（例如 HTML 页面）的结构或布局的文本文件，用于表示实际内容的占位符。一个视图可以使用 HTML 模板，从数据填充它动态地创建一个 HTML 页面模型。可以使用模板来定义任何类型的文件的结构; 它不一定是 HTML！
 
-> **备注：** Django 将此组织称为“模型视图模板（MVT）”架构。它与更加熟悉的 [Model View Controller](/zh-CN/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 架构有许多相似之处。
+> [!NOTE]
+> Django 将此组织称为“模型视图模板（MVT）”架构。它与更加熟悉的 [Model View Controller](/zh-CN/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 架构有许多相似之处。
 
 以下部分将为你提供 Django 应用程序的这些主要部分的想法（稍后我们将在进一步详细介绍后，我们将在开发环境中进行更详细的介绍）。
 
@@ -120,7 +122,8 @@ urlpatterns = [
 ]
 ```
 
-> **备注：** 一点点 Python:
+> [!NOTE]
+> 一点点 Python:
 >
 > - 该 `urlpatterns` 对象的列表 url() 功能。在 Python 中，使用方括号定义列表。项目以逗号分隔，并可能有一个 [可选的逗号](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). 例如：`[item1, item2, item3,]`.
 > - 该模式的奇怪的语法称为正则表达式。我们将在后面的文章中讨论这些内容！
@@ -144,7 +147,8 @@ def index(request):
     return HttpResponse('Hello from Django!')
 ```
 
-> **备注：** 一点点 Python:
+> [!NOTE]
+> 一点点 Python:
 >
 > - [Python 模块](https://docs.python.org/3/tutorial/modules.html) 是函数的“库”，存储在单独的文件中，我们可能想在我们的代码中使用它们。在这里我们只从 django.http 模块导入了 HttpResponse 对象，使我们可以在视图中使用它：`from django.http import HttpResponse` 还有其他方法可以从模块导入一些或所有对象。
 > - 如上所示，使用`def`关键字声明函数，在函数名称后面的括号中列出命名参数；整行以冒号结尾。注意下一行是否都进行了**缩进**。缩进很重要，因为它指定代码行在该特定块内 (强制缩进是 Python 的一个关键特征，也是 Python 代码很容易阅读的一个原因)。
@@ -174,7 +178,8 @@ class Team(models.Model):
     team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
 ```
 
-> **备注：** Python 小知识：
+> [!NOTE]
+> Python 小知识：
 >
 > - Python 支持“面向对象编程”，这是一种编程风格，我们将代码组织到对象中，其中包括用于对该对象进行操作的相关数据和功能。对象也可以从其他对象继承／扩展／派生，允许相关对象之间的共同行为被共享。在 Python 中，我们使用关键字 **Class** 定义对象的“蓝图”。我们可以根据类中的模型创建类型的多个 特定 实例。
 > - 例如，我们有个 **Team** 类，它来自于**Model**类。这意味着它是一个模型，并且将包含模型的所有方法，但是我们也可以给它自己的专门功能。在我们的模型中，我们定义了我们的数据库需要存储我们的数据字段，给出它们的具体名称。Django 使用这些定义（包括字段名称）来创建底层数据库。
diff --git a/files/zh-cn/learn/server-side/django/models/index.md b/files/zh-cn/learn/server-side/django/models/index.md
index e8247c7ae7493e..58bfba149e68fd 100644
--- a/files/zh-cn/learn/server-side/django/models/index.md
+++ b/files/zh-cn/learn/server-side/django/models/index.md
@@ -46,7 +46,8 @@ Django 网络应用通过作为模型被参照的 Python 对象访问并管理
 
 ![LocalLibrary Model UML - v3](local_library_model_uml_v0_1.png)
 
-> **备注：** 下一部分提供了基本的关于模型如何被定义和使用的解释。边阅读，边考虑以下我们是如何根据以上的图标构建数据库内的模型的。
+> [!NOTE]
+> 下一部分提供了基本的关于模型如何被定义和使用的解释。边阅读，边考虑以下我们是如何根据以上的图标构建数据库内的模型的。
 
 ## Model primer
 
@@ -209,7 +210,8 @@ a_record = MyModelName(my_field_name="Instance #1")
 a_record.save()
 ```
 
-> **备注：** 如果没有任何的栏位被宣告为`主鍵`，这笔新的纪录会被自动的赋予一个主键并将主键栏命名为`id`。上例的那笔资料被储存后，试着查询这笔纪录会看到它被自动赋予 1 的编号。
+> [!NOTE]
+> 如果没有任何的栏位被宣告为`主鍵`，这笔新的纪录会被自动的赋予一个主键并将主键栏命名为`id`。上例的那笔资料被储存后，试着查询这笔纪录会看到它被自动赋予 1 的编号。
 
 你可以透过「点 (dot) 的语法」取得或变更这笔新资料的栏位 (字段)。你需要呼叫`save()`将变更过的资料存进资料库：
 
@@ -227,7 +229,8 @@ a_record.save()
 
 你可以使用模型的 `objects` 属性 (由 base class 提供) 搜寻符合某个条件的纪录
 
-> **备注：** 要用"抽象的"模型还有栏位说明怎么搜寻纪录可能会有点令人困惑。我们会以一个 Book 模型，其包含`title`与`genre`字段，而 genre 也是一个仅有`name`一个字段的模型。
+> [!NOTE]
+> 要用"抽象的"模型还有栏位说明怎么搜寻纪录可能会有点令人困惑。我们会以一个 Book 模型，其包含`title`与`genre`字段，而 genre 也是一个仅有`name`一个字段的模型。
 
 我们可以取得一个模型的所有纪录，为一个 `QuerySet` 使用`objects.all()`。`QuerySet` 是一个可迭代的物件，表示他含有多个物件，而我们可以藉由迭代/回圈取得每个物件。
 
@@ -250,7 +253,8 @@ number_wild_books = Book.objects.filter(title__contains='wild').count()
 books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')  # Will match on: Fiction, Science fiction, non-fiction etc.
 ```
 
-> **备注：** 你可以用下划线来表示不同关系 (`ForeignKey`/`ManyToManyField`) .例如，一本书有不同的类型，用“cover“关系可能会帮助起一个参数名字 `type__cover__name__exact='hard'.`
+> [!NOTE]
+> 你可以用下划线来表示不同关系 (`ForeignKey`/`ManyToManyField`) .例如，一本书有不同的类型，用“cover“关系可能会帮助起一个参数名字 `type__cover__name__exact='hard'.`
 
 还有很多是你可以用索引 (queries) 来做的，包含从相关的模型做向后查询 (backwards searches)、连锁过滤器 (chaining filters)、回传「值的小集合」等。更多资讯可以到 [Making queries](https://docs.djangoproject.com/en/2.0/topics/db/queries/) (Django Docs) 查询。
 
@@ -374,7 +378,8 @@ We additionally declare a few new types of field:
 
 The model `__str__()` represents the `BookInstance` object using a combination of its unique id and the associated `Book`'s title.
 
-> **备注：** A little Python:
+> [!NOTE]
+> A little Python:
 >
 > - The value returned by `__str__()` is a _formatted string_. Within the string we use `%s` to declare "placeholders'. After the string we specify `%` and then a tuple containing the values to be inserted in the placeholders. If you just have one placeholder then you can omit the tuple — e.g. `'My value: %s' % variable.`
 >
diff --git a/files/zh-cn/learn/server-side/django/sessions/index.md b/files/zh-cn/learn/server-side/django/sessions/index.md
index 1e642eafaa4812..cacb71505529ce 100644
--- a/files/zh-cn/learn/server-side/django/sessions/index.md
+++ b/files/zh-cn/learn/server-side/django/sessions/index.md
@@ -67,7 +67,8 @@ MIDDLEWARE = [
 
 下面的代码片段，显示了如何使用与当前会话（浏览器）关联的密钥“`my_car`”来获取，设置和删除某些数据。
 
-> **备注：** 关于 Django 的一个好处是，你不需要考虑在你的视图中，将会话与当前请求联系起来的机制。如果我们在视图中，使用下面的片段，我们就知道有关`my_car`的信息，仅与发送当前请求的浏览器相关联。
+> [!NOTE]
+> 关于 Django 的一个好处是，你不需要考虑在你的视图中，将会话与当前请求联系起来的机制。如果我们在视图中，使用下面的片段，我们就知道有关`my_car`的信息，仅与发送当前请求的浏览器相关联。
 
 ```python
 # Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
@@ -104,7 +105,8 @@ request.session['my_car']['wheels'] = 'alloy'
 request.session.modified = True
 ```
 
-> **备注：** 你可以通过将`SESSION_SAVE_EVERY_REQUEST = True`添加到项目设置（**locallibrary/locallibrary/settings.py**），以更改站点行为，站点将在每个请求上更新数据库/发送 cookie。
+> [!NOTE]
+> 你可以通过将`SESSION_SAVE_EVERY_REQUEST = True`添加到项目设置（**locallibrary/locallibrary/settings.py**），以更改站点行为，站点将在每个请求上更新数据库/发送 cookie。
 
 ## 简单的例子 - 获取访问次数
 
@@ -133,7 +135,8 @@ def index(request):
 
 这里，我们首先得到'`num_visits`'会话密钥的值，如果之前没有设置，则将值设置为 0。每次收到请求时，我们都会递增该值，并将其存回会话中（下次用户访问该页面时）。然后将`num_visits`变量，传递给上下文变量中的模板。
 
-> **备注：** 我们也可能会测试浏览器中是否支持 cookie（请参阅[如何使用会话](https://docs.djangoproject.com/en/2.0/topics/http/sessions/)作为示例），或设计我们的 UI，以便无论 cookie 是否受支持都无关紧要。
+> [!NOTE]
+> 我们也可能会测试浏览器中是否支持 cookie（请参阅[如何使用会话](https://docs.djangoproject.com/en/2.0/topics/http/sessions/)作为示例），或设计我们的 UI，以便无论 cookie 是否受支持都无关紧要。
 
 将以下区块底部那一行，添加到主 HTML 模板（**/locallibrary/catalog/templates/index.html**）的“动态内容”部分底部，以显示上下文变量：
 
diff --git a/files/zh-cn/learn/server-side/django/skeleton_website/index.md b/files/zh-cn/learn/server-side/django/skeleton_website/index.md
index 2129faf583051a..0b8e617ad79191 100644
--- a/files/zh-cn/learn/server-side/django/skeleton_website/index.md
+++ b/files/zh-cn/learn/server-side/django/skeleton_website/index.md
@@ -37,7 +37,8 @@ slug: Learn/Server-side/Django/skeleton_website
 1. 使用 django-admin 工具创建工程的文件夹，基本的文件模板和工程管理脚本（**manage.py**）。
 2. 用**manage.py** 创建一个或多个应用。
 
-   > **备注：** 一个网站可能由多个部分组成，比如，主要页面，博客，wiki，下载区域等。Django 鼓励将这些部分作为分开的应用开发。如果这样的话，在需要可以在不同的工程中复用这些应用。
+   > [!NOTE]
+   > 一个网站可能由多个部分组成，比如，主要页面，博客，wiki，下载区域等。Django 鼓励将这些部分作为分开的应用开发。如果这样的话，在需要可以在不同的工程中复用这些应用。
 
 3. 在工程里注册新的应用。
 4. 为每个应用分配 url。
@@ -96,7 +97,8 @@ locallibrary 项目的子文件夹是整个网站的进入点：
 python3 manage.py startapp catalog
 ```
 
-> **备注：** Linux/Mac OS X 应用可以使用上面的命令。在 windows 平台下应该改为： `py -3 manage.py startapp catalog`
+> [!NOTE]
+> Linux/Mac OS X 应用可以使用上面的命令。在 windows 平台下应该改为： `py -3 manage.py startapp catalog`
 >
 > 如果你是 windows 系统，在这个部分用`py -3` 替代`python3`。
 
@@ -123,7 +125,8 @@ locallibrary/
 - 一个*migration*文件夹，用来存储“migrations”——当你修改你的数据模型时，这个文件会自动升级你的数据库。
 - **\_\_init\_\_.py** — 一个空文件，Django/Python 会将这个文件作为[Python 包](https://docs.python.org/3/tutorial/modules.html#packages)并允许你在项目的其他部分使用它。
 
-> **备注：** 你注意到上面的文件里有些缺失嘛？尽管有 views 和 models 文件，可是 url 映射，网站模板，静态文件在哪里呢？我们会在接下来的部分展示如何创建它们（并不是每个网站都需要，不过这个例子需要）
+> [!NOTE]
+> 你注意到上面的文件里有些缺失嘛？尽管有 views 和 models 文件，可是 url 映射，网站模板，静态文件在哪里呢？我们会在接下来的部分展示如何创建它们（并不是每个网站都需要，不过这个例子需要）
 
 ## 注册 catalog 应用
 
@@ -145,7 +148,8 @@ INSTALLED_APPS = [
 
 新的这行详细说明了应用配置文件在 (`CatalogConfig`) **/locallibrary/catalog/apps.py** 里，当你创建应用时就完成了这个过程。
 
-> **备注：** 注意到 `INSTALLED_APPS` 已经有许多其他的应用了（还有 `MIDDLEWARE`，在 settings 的下面）。这些应用为 [Django administration site](/zh-CN/docs/Learn/Server-side/Django/Admin_site) 提供了支持和许多功能（包括会话，认证系统等）。
+> [!NOTE]
+> 注意到 `INSTALLED_APPS` 已经有许多其他的应用了（还有 `MIDDLEWARE`，在 settings 的下面）。这些应用为 [Django administration site](/zh-CN/docs/Learn/Server-side/Django/Admin_site) 提供了支持和许多功能（包括会话，认证系统等）。
 
 ## 配置数据库
 
@@ -209,7 +213,8 @@ urlpatterns = [
 
 URL 映射通过`urlpatterns` 变量管理，它是`path()` 函数的一个 Python 列表结构。每个`path()`函数要么将 URL 式样 (URL pattern) 关联到特定视图 (_specific view)_，将在模式匹配时显示；要么关联到某个 URL 式样列表的测试代码。 (第二种情况下，URL 式样是目标模型里的“base URL”). `urlpatterns` 列表最开始定义了一个函数，这个函数将所有带有模型 _admin/_ 的 URL 映射到模块`admin.site.urls`。这个函数包含了 Administration 应用自己的 URL 映射定义。
 
-> **备注：** path() 中的路由是一个字符串，用于定义要匹配的 URL 模式。该字符串可能包括一个命名变量（尖括号中）
+> [!NOTE]
+> path() 中的路由是一个字符串，用于定义要匹配的 URL 模式。该字符串可能包括一个命名变量（尖括号中）
 >
 > 例：`'catalog/<id>/'`。此模式将匹配如 **/catalog/_any_chars_/** 的 URL，并将 any_chars 作为具有参数名称 `id` 的字符串传递给视图。我们将在后面的主题中进一步讨论路径方法和路由模式
 
@@ -260,7 +265,8 @@ from django.conf.urls.static import static
 urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 ```
 
-> **备注：** 有很多方法扩展`urlpatterns` 列表 (在上面的代码里我们通过 `+=` 运算符来区分新旧代码)。我们同样可以用原先列表的定义：
+> [!NOTE]
+> 有很多方法扩展`urlpatterns` 列表 (在上面的代码里我们通过 `+=` 运算符来区分新旧代码)。我们同样可以用原先列表的定义：
 >
 > ```python
 > urlpatterns = [
@@ -300,19 +306,22 @@ python3 manage.py makemigrations
 python3 manage.py migrate
 ```
 
-> **警告：** 每次模型改变，都需要运行以上命令，来影响需要存储的数据结构（包括添加和删除整个模型和单个字段）。
+> [!WARNING]
+> 每次模型改变，都需要运行以上命令，来影响需要存储的数据结构（包括添加和删除整个模型和单个字段）。
 
 该 **`makemigrations`** 命令创建（但不适用）项目中安装的所有应用程序的迁移（你可以指定应用程序名称，也可以为单个项目运行迁移）。这让你有机会在应用这些迁移之前检查这些迁移代码—当你是 Django 专家时，你可以选择稍微调整它们。
 
 这 **`migrate`** 命令 明确应用迁移你的数据库（Django 跟踪哪些已添加到当前数据库）。
 
-> **备注：** 看 [Migrations](https://docs.djangoproject.com/en/1.10/topics/migrations/) (Django docs) ，了解较少使用的迁移命令的其他信息。
+> [!NOTE]
+> 看 [Migrations](https://docs.djangoproject.com/en/1.10/topics/migrations/) (Django docs) ，了解较少使用的迁移命令的其他信息。
 
 ### 运行网站
 
 在开发期间，你首先要使用开发网络服务器和浏览你本机的浏览器，来测试你的网站。
 
-> **备注：** 这个开发网络服务器并不够强大以及不足以用于生产使用，但是它能非常容易得使你在开发期间，获得你的 Django 网站和运行它，以此来进行快速测试。
+> [!NOTE]
+> 这个开发网络服务器并不够强大以及不足以用于生产使用，但是它能非常容易得使你在开发期间，获得你的 Django 网站和运行它，以此来进行快速测试。
 > 默认情况下，服务器会开通（`http://127.0.0.1:8000/`),但你也可以选择其他端口。有关更多信息，查阅（[django-admin and manage.py: runserver](https://docs.djangoproject.com/en/1.10/ref/django-admin/#runserver)）(Django docs).
 
 通过调用 `runserver` 命令运行 Web 服务器（与**manage.py**位于同一目录下）：
@@ -335,11 +344,13 @@ python3 manage.py runserver
 
 别担心，这个错误页面是预期结果。因为我们没有在 `catalogs.urls` 模块中定义任何页面/网址。**（留意**：当我们导航网站根目录 URL 时，我们被重定向到了**／catalog 。）**
 
-> **备注：** 上面的页面展示了一个重要的 Django 功能—自动调试日志记录。每当找不到页面，或者代码引发任何错误，就会显示错误页面，其中会提供有用的信息。在这种情况下，你可以看到我们提供的 URL 与我们任何 URL 模式都不匹配（像列出的那样）。生产环境中，日志功能将被关闭（当我们将网站存放在网络上时），这种情况下，将提供的信息量更少，但用户友好的页面。
+> [!NOTE]
+> 上面的页面展示了一个重要的 Django 功能—自动调试日志记录。每当找不到页面，或者代码引发任何错误，就会显示错误页面，其中会提供有用的信息。在这种情况下，你可以看到我们提供的 URL 与我们任何 URL 模式都不匹配（像列出的那样）。生产环境中，日志功能将被关闭（当我们将网站存放在网络上时），这种情况下，将提供的信息量更少，但用户友好的页面。
 
 这个时候，我们知道 Django 正在工作。
 
-> **备注：** 每当进行重大更改时，都应重新运行迁移并重新测试站点。这并不需要很长时间。
+> [!NOTE]
+> 每当进行重大更改时，都应重新运行迁移并重新测试站点。这并不需要很长时间。
 
 ## 挑战自我
 
diff --git a/files/zh-cn/learn/server-side/django/testing/index.md b/files/zh-cn/learn/server-side/django/testing/index.md
index a8fe88dfdf8886..7782dd5ab48c52 100644
--- a/files/zh-cn/learn/server-side/django/testing/index.md
+++ b/files/zh-cn/learn/server-side/django/testing/index.md
@@ -41,7 +41,8 @@ LocalLibrary 目前有页面显示所有书本和作者的列表，书本和作
 - 集成测试
   - : 验证组件分组在一起使用时的工作方式。集成测试了解组件之间所需的交互，但不一定了解每个组件的内部操作。它们可能涵盖整个网站的简单组件分组。
 
-> **备注：** 其他常见类型的测试，包括黑盒，白盒，手动，自动，金丝雀，烟雾，一致性，验收，功能，系统，性能，负载和压力测试。查找它们以获取更多信息。
+> [!NOTE]
+> 其他常见类型的测试，包括黑盒，白盒，手动，自动，金丝雀，烟雾，一致性，验收，功能，系统，性能，负载和压力测试。查找它们以获取更多信息。
 
 ### Django 为测试提供了什么？
 
@@ -97,7 +98,8 @@ class Author(models.Model):
 
 同样，你应该检查自定义方法 `get_absolute_url()` 和 `__str__()` 是否符合要求，因为它们是你的代码/业务逻辑。在`get_absolute_url()`的情况下，你可以相信 Django `reverse()`方法已经正确实现，因此你正在测试的是实际上已经定义了关联的视图。
 
-> **备注：** 精明的读者可能会注意到，我们也希望将出生和死亡的日期限制在合理的值，并检查出生后是否死亡。在 Django 中，此约束将添加到表单类中（尽管你可以为字段定义验证器，这些字段似乎仅在表单级别使用，而不是在模型级别使用）。
+> [!NOTE]
+> 精明的读者可能会注意到，我们也希望将出生和死亡的日期限制在合理的值，并检查出生后是否死亡。在 Django 中，此约束将添加到表单类中（尽管你可以为字段定义验证器，这些字段似乎仅在表单级别使用，而不是在模型级别使用）。
 
 考虑到这些，让我们开始研究如何定义和运行测试。
 
@@ -118,7 +120,8 @@ catalog/
 
 在 LocalLibrary 项目中，创建如上所示的文件结构。**\_\_init\_\_.py** 应该是一个空文件（这告诉 Python 该目录是一个套件包）。你可以通过复制和重命名框架测试文件 **/catalog/tests.py**，来创建三个测试文件。
 
-> **备注：** 我们构建 Django 骨架网站时，会自动创建骨架测试文件 **/catalog/tests.py**。将所有测试放入其中是完全“合法的”，但如果测试正确，你将很快得到一个非常庞大且难以管理的测试文件。
+> [!NOTE]
+> 我们构建 Django 骨架网站时，会自动创建骨架测试文件 **/catalog/tests.py**。将所有测试放入其中是完全“合法的”，但如果测试正确，你将很快得到一个非常庞大且难以管理的测试文件。
 >
 > 删除骨架文件，因为我们不需要它。
 
@@ -164,13 +167,15 @@ class YourTestClass(TestCase):
 - `setUpTestData()` 用于类级别设置，在测试运行开始的时侯，会调用一次。你可以使用它来创建在任何测试方法中，都不会修改或更改的对象。
 - `setUp()` 在每个测试函数之前被调用，以设置可能被测试修改的任何对象（每个测试函数，都将获得这些对象的“新”版本）。
 
-> **备注：** 测试类别还有一个我们还没有使用的`tearDown()`方法。此方法对数据库测试不是特别有用，因为`TestCase`基类会为你处理数据库拆卸。
+> [!NOTE]
+> 测试类别还有一个我们还没有使用的`tearDown()`方法。此方法对数据库测试不是特别有用，因为`TestCase`基类会为你处理数据库拆卸。
 
 下面我们有一些测试方法，它们使用 `Assert` 函数来测试条件是真，假或相等（`AssertTrue`, `AssertFalse`, `AssertEqual`）。如果条件评估不如预期，则测试将失败，并将错误报告给控制台。
 
 `AssertTrue`, `AssertFalse`, `AssertEqual` 是 **unittest** 提供的标准断言。框架中还有其他标准断言，还有 [Django 特定的断言](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#assertions)，来测试视图是否重定向（`assertRedirects`），或测试是否已使用特定模板（`assertTemplateUsed`）等。
 
-> **备注：** 你通常**不应**在测试中包含**print()** 函数，如上所示。我们这样做，只是为了让你可以看到在控制台中，调用设置功能的顺序（在下一节中）。
+> [!NOTE]
+> 你通常**不应**在测试中包含**print()** 函数，如上所示。我们这样做，只是为了让你可以看到在控制台中，调用设置功能的顺序（在下一节中）。
 
 ## 如何运行测试
 
@@ -182,7 +187,8 @@ python3 manage.py test
 
 这将查找当前目录下，使用模式 **test\*.py** 命名的所有文件，并运行使用适当基类定义的所有测试（这里我们有许多测试文件，但只有 **/catalog/tests/test_models.py** 目前包含任何测试。）。默认情况下，测试将仅单独报告测试失败，然后是测试摘要。
 
-> **备注：** 如果你收到类似于以下内容的错误：`ValueError: Missing staticfiles manifest entry ...` 这可能是因为默认情况下，测试不会运行 collectstatic，而你的应用程序正在使用需要它的储存类别（有关更多信息，请参阅 [manifest_strict](https://docs.djangoproject.com/en/2.0/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict)）。有许多方法可以解决这个问题 - 最简单的方法，是在运行测试之前，简单地运行 collectstatic：
+> [!NOTE]
+> 如果你收到类似于以下内容的错误：`ValueError: Missing staticfiles manifest entry ...` 这可能是因为默认情况下，测试不会运行 collectstatic，而你的应用程序正在使用需要它的储存类别（有关更多信息，请参阅 [manifest_strict](https://docs.djangoproject.com/en/2.0/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict)）。有许多方法可以解决这个问题 - 最简单的方法，是在运行测试之前，简单地运行 collectstatic：
 >
 > ```bash
 > python3 manage.py collectstatic
@@ -220,7 +226,8 @@ Destroying test database for alias 'default'...
 
 在这里，我们看到有一个测试失败，我们可以确切地看到哪个函数失败了、为什么失败（这个失败是预期的，因为 `False`不是 `True`！）。
 
-> **备注：** 从上面的测试输出中，学到的最重要事情是，如果为对象和方法使用描述性/信息性名称，它会更有价值。
+> [!NOTE]
+> 从上面的测试输出中，学到的最重要事情是，如果为对象和方法使用描述性/信息性名称，它会更有价值。
 
 上面以**粗体**显示的文本，通常不会出现在测试输出中（这是由我们的测试中的`print()`函数生成的）。这显示了如何为类调用`setUpTestData()`方法，并在每个方法之前调用`setUp()`。
 
@@ -251,7 +258,8 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one
 
 现在我们知道，如何运行我们的测试，以及我们需要测试哪些东西，让我们看一些实际的例子。
 
-> **备注：** 我们不会编写所有可能的测试，但这应该可以让你了解测试的工作原理，以及你可以做些什么。
+> [!NOTE]
+> 我们不会编写所有可能的测试，但这应该可以让你了解测试的工作原理，以及你可以做些什么。
 
 ### 模型
 
@@ -331,7 +339,8 @@ self.assertEquals(field_label,'first name')  # Compare the value to the expected
 
 - 我们选择使用 `assertEquals(field_label,'first name')` ，而不是`assertTrue(field_label == 'first name')`。这样做的原因是，如果测试失败，前者的输出，会告诉你标签实际上是什么，这使得调试问题变得更容易一些。
 
-> **备注：** 已省略对`last_name` 和 `date_of_birth`标签的测试，以及 `last_name`字段长度的测试。现在按照上面显示的命名约定和方法，添加你自己的版本。
+> [!NOTE]
+> 已省略对`last_name` 和 `date_of_birth`标签的测试，以及 `last_name`字段长度的测试。现在按照上面显示的命名约定和方法，添加你自己的版本。
 
 我们还需要测试我们的自定义方法。这些基本上只是检查对象名称，是否按照我们的预期，使用“姓氏”，“名字”格式构建，并且我们为`Author`获取的 URL，是我们所期望的。
 
@@ -365,7 +374,8 @@ AssertionError: 'Died' != 'died'
 
 这是一个非常小的错误，但它确实强调了，编写测试如何能够更彻底地检查，你可能做出的任何假设。
 
-> **备注：** 将 date_of_death 字段（/catalog/models.py）的标签更改为“death”并重新运行测试。
+> [!NOTE]
+> 将 date_of_death 字段（/catalog/models.py）的标签更改为“death”并重新运行测试。
 
 用于测试其他模型的模式，也类似于此，因此我们不会继续进一步讨论这些模式。请随意为其他模型，创建你自己的测试。
 
@@ -448,7 +458,8 @@ class RenewBookFormTest(TestCase):
 
 其余函数，测试表单对于续借日期，在可接受范围内是否有效，对于范围外的值，是否无效。请注意我们如何使用`datetime.timedelta()`，在当前日期（`datetime.date.today()`）周围构建测试日期值（在这种情况下指定天数或周数）。然后我们只需创建表单，传入我们的数据，并测试它是否有效。
 
-> **备注：** 这里我们实际上并没有使用数据库，或测试客户端。考虑修改这些测试，以使用[SimpleTestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.SimpleTestCase)。
+> [!NOTE]
+> 这里我们实际上并没有使用数据库，或测试客户端。考虑修改这些测试，以使用[SimpleTestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.SimpleTestCase)。
 >
 > 如果表单无效，我们还需要验证是否引发了正确的错误，但这通常是作为视图处理的一部分完成的，因此我们将在下一节中处理。
 
@@ -549,7 +560,8 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
 
 将以下测试代码，添加到 **/catalog/tests/test_views.py**。这里我们首先使用`SetUp()`创建一些用户登录帐户，和`BookInstance`对象（以及它们的相关书本，和其他记录），我们稍后将在测试中使用它们。每个测试用户都借用了一半的书本，但我们最初，将所有书本的状态设置为“维护”。我们使用了`SetUp()`而不是`setUpTestData()`，因为我们稍后会修改其中的一些对象。
 
-> **备注：** 下面的`setUp()`代码，会创建一个具有指定语言`Language`的书本，但你的代码可能不包含语言模型`Language`，因为它是作为挑战创建的。如果是这种情况，只需注释掉创建或导入语言对象的代码部分。你还应该在随后的`RenewBookInstancesViewTest`部分中，执行此操作。
+> [!NOTE]
+> 下面的`setUp()`代码，会创建一个具有指定语言`Language`的书本，但你的代码可能不包含语言模型`Language`，因为它是作为挑战创建的。如果是这种情况，只需注释掉创建或导入语言对象的代码部分。你还应该在随后的`RenewBookInstancesViewTest`部分中，执行此操作。
 
 ```python
 import datetime
@@ -819,7 +831,8 @@ class RenewBookInstancesViewTest(TestCase):
         self.assertRedirects(resp, reverse('all-borrowed') )
 ```
 
-> **警告：** 全部借用的视图作为额外挑战，你的代码可能会改为重定向到主页'/'。如果是这样，请将测试代码的最后两行，修改为与下面的代码类似。请求中的`follow=True`，确保请求返回最终目标 URL（因此检查`/catalog/`而不是`/`）。
+> [!WARNING]
+> 全部借用的视图作为额外挑战，你的代码可能会改为重定向到主页'/'。如果是这样，请将测试代码的最后两行，修改为与下面的代码类似。请求中的`follow=True`，确保请求返回最终目标 URL（因此检查`/catalog/`而不是`/`）。
 >
 > ```python
 >  resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},follow=True )
diff --git a/files/zh-cn/learn/server-side/django/web_application_security/index.md b/files/zh-cn/learn/server-side/django/web_application_security/index.md
index 07c3a1a5f4ece1..15ad6d8dfb079e 100644
--- a/files/zh-cn/learn/server-side/django/web_application_security/index.md
+++ b/files/zh-cn/learn/server-side/django/web_application_security/index.md
@@ -33,7 +33,8 @@ slug: Learn/Server-side/Django/web_application_security
 
 [web 安全](/zh-CN/docs/Web/Security)主題提供一个概述，说明了网站安全对于服务器端设计的意义，以及以及一些需要应对的常见威胁。本文中包含一个关键的概念：如果网站信任任何来自浏览器的数据，几乎所有的攻击方法都会成功。
 
-> **警告：** 切记，对于网站安全来说最重要一点就是“**永远不要相信浏览器端提交的数据**”。这些数据包括使用 `GET` 方式请求时 URL 中的参数，`POST` 方式请求的数据，HTTP headers 和 cookies，以及用户上传的文件等等。请确保一定要检查和清洗这些提交的数据。对于网站安全来说，总是要做好最坏的打算。
+> [!WARNING]
+> 切记，对于网站安全来说最重要一点就是“**永远不要相信浏览器端提交的数据**”。这些数据包括使用 `GET` 方式请求时 URL 中的参数，`POST` 方式请求的数据，HTTP headers 和 cookies，以及用户上传的文件等等。请确保一定要检查和清洗这些提交的数据。对于网站安全来说，总是要做好最坏的打算。
 
 对 Django 用户来说，好消息是 Django 框架已经处理了大量的常见威胁。请阅读 Django 官方文档中的"[Security in Django](https://docs.djangoproject.com/en/2.0/topics/security/)"部分来了解 Django 的安全细节，以及如何确保基于 Django 的网站的安全。
 
@@ -54,7 +55,8 @@ Django 的模板系统可以帮你抵挡大部分的 XSS 攻击，实现的方
    `<script>alert('Test alert');</script>`
    ![Author Form XSS test](author_create_form_alert_xss.png)
 
-   > **备注：** 这一段代码并没有任何杀伤力，在执行的时候只会在浏览器中弹出一个警告提示框。如果这个警告提示框出现，则表明本网站存在可被 XSS 攻击的漏洞。
+   > [!NOTE]
+   > 这一段代码并没有任何杀伤力，在执行的时候只会在浏览器中弹出一个警告提示框。如果这个警告提示框出现，则表明本网站存在可被 XSS 攻击的漏洞。
 
 5. 点击 **Submit** 按钮保存信息。
 6. 保存后的作者信息将会显示为下图的样式。因为 XSS 防护措施的存在，注入代码中的`alert()`部分并没有执行，而只是用文本的方式直接显示了出来。![Author detail view XSS test](author_detail_alert_xss.png)
@@ -76,7 +78,8 @@ XSS 攻击也可能来自于其他不可信的数据来源，例如 cookies，We
 
 CSRF(英语：Cross-site request forgery，通常简称：CSRF 或 XSRF) 攻击可以让恶意攻击者在用户不知情的情况下，使用用户的身份来进行系统操作。举个例子，现在有一名黑客想要在我们的本地图书馆中添加一些作者信息。
 
-> **备注：** 这个示例里面的黑客没有考虑对钱下手。而现实生活中的黑客则极有可能会产生更加危险的操作（例如，把钱转入他们自己的账户中等等）。
+> [!NOTE]
+> 这个示例里面的黑客没有考虑对钱下手。而现实生活中的黑客则极有可能会产生更加危险的操作（例如，把钱转入他们自己的账户中等等）。
 
 为了实现这个目的，黑客可以创建一个类似于下面示例的 HTML 文件，这个文件包含了一个创建作者的表单 (类似我们在之前章节中用过的)，并且一旦加载完毕就会立即进行提交。随后黑客可以将这个文件发送至所有的图书管理员，并且引诱他们打开这个文件 (文件中真的没有啥有害的信息)。如果任何一个已登录的图书管理员不慎打开了这个文件，那么文件中的表单就会利用图书管理员的身份来提交，随后就会创建出一个新的作者来。
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
index d5f313ca929c27..2fa1bf641b8448 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
@@ -53,19 +53,22 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 这种可远程访问的计算/网络硬件，称为基础架构即服务（IaaS）。许多 IaaS 供应商，提供预安装特定操作系统的选项，你必须在其上，安装生产环境的其他组件。其他供应商，允许你选择功能更全面的环境，可能包括完整的 node 设置。
 
-> **备注：** 预构建环境，可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，并且当你需要升级系统的某些部分时，你可以知道从哪里开始！
+> [!NOTE]
+> 预构建环境，可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，并且当你需要升级系统的某些部分时，你可以知道从哪里开始！
 
 其他托管服务提供商，支持 Express 作为平台即服务（PaaS）产品的一部分。使用此类托管时，你无需担心大多数生产环境（服务器，负载平衡器等），因为主机平台会为你处理这些问题。这使得部署非常简单，因为你只需要专注于 Web 应用程序，而不是任何其他服务器基础结构。
 
 一些开发人员选择 IaaS，相对于 PaaS，IaaS 提供更高灵活性，而其他开发人员偏好 PaaS 的降低维护开销，和更轻松的扩展性。当你在一开始使用时，在 PaaS 系统上设置你的网站，要容易得多，因此我们将在本教程中使用 PaaS。
 
-> **备注：** 如果你选择 Node/Express 友好的托管服务提供商，他们应该提供，有关如何使用 Web 服务器，应用程序服务器，反向代理等不同配置，来设置 Express 网站的说明。例如，在[数字海洋 node 社区文档](https://www.digitalocean.com/community/tutorials?q=node)中，有许多各种配置的手把手指南。
+> [!NOTE]
+> 如果你选择 Node/Express 友好的托管服务提供商，他们应该提供，有关如何使用 Web 服务器，应用程序服务器，反向代理等不同配置，来设置 Express 网站的说明。例如，在[数字海洋 node 社区文档](https://www.digitalocean.com/community/tutorials?q=node)中，有许多各种配置的手把手指南。
 
 ## 选择一个主机供应商
 
 众所周知，众多托管服务提供商，都积极支持或与 Node（和 Express）合作。这些供应商提供不同类型的环境（IaaS，PaaS），以及不同价格的不同级别的计算和网络资源。
 
-> **备注：** 有很多托管解决方案，他们的服务和定价，可能会随着时间而改变。虽然我们在下面介绍几个选项，但在选择托管服务提供商之前，有必要自己进行互联网搜索。
+> [!NOTE]
+> 有很多托管解决方案，他们的服务和定价，可能会随着时间而改变。虽然我们在下面介绍几个选项，但在选择托管服务提供商之前，有必要自己进行互联网搜索。
 
 选择主机时需要考虑的一些事项：
 
@@ -83,7 +86,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 许多提供商还拥有“基本”层，可提供更多有用的计算能力，和更少的限制。举例来说， [Digital Ocean](https://www.digitalocean.com/) 是一个流行的托管服务提供商，它提供了一个相对便宜的基本计算层（在本教程写作时，是每月 5 美元的较低范围）。
 
-> **备注：** 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现可扩展性是最重要的考虑因素。
+> [!NOTE]
+> 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现可扩展性是最重要的考虑因素。
 
 ## 准备好发布你的网站
 
@@ -91,7 +95,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 在以下小节中，我们概述了你应该对应用进行的、最重要的更改。
 
-> **备注：** Express 文档中还有其他有用的提示 - 请参阅“[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)”，以及“[生产最佳实践：安全性](https://expressjs.com/en/advanced/best-practice-security.html)”。
+> [!NOTE]
+> Express 文档中还有其他有用的提示 - 请参阅“[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)”，以及“[生产最佳实践：安全性](https://expressjs.com/en/advanced/best-practice-security.html)”。
 
 ### 设置 NODE_ENV 为 'production'
 
@@ -99,7 +104,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 可以使用导出或环境文件，或使用 OS 初始化系统，以进行此更改。
 
-> **备注：** 这实际上是在环境设置，而不是应用中所做的更改，但重要的是，要注意这里！我们将在下面，展示如何为我们的托管示例设置。
+> [!NOTE]
+> 这实际上是在环境设置，而不是应用中所做的更改，但重要的是，要注意这里！我们将在下面，展示如何为我们的托管示例设置。
 
 ### Log appropriately
 
@@ -134,7 +140,8 @@ set DEBUG=author,book
 export DEBUG="author,book"
 ```
 
-> **备注：** 调用`debug`可以替换你以前使用`console.log()`或`console.error()`执行的日志记录。通过调试模块[debug](https://www.npmjs.com/package/debug)进行日志记录，替换代码中的所有`console.log()`调用。通过设置 DEBUG 变量，并在其中记录对日志记录的影响，在开发环境中，打开和关闭日志记录。
+> [!NOTE]
+> 调用`debug`可以替换你以前使用`console.log()`或`console.error()`执行的日志记录。通过调试模块[debug](https://www.npmjs.com/package/debug)进行日志记录，替换代码中的所有`console.log()`调用。通过设置 DEBUG 变量，并在其中记录对日志记录的影响，在开发环境中，打开和关闭日志记录。
 
 如果你需要记录网站活动，可以使用 Winston 或 Bunyan 等日志库。有关此主题的更多信息，请参阅：[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)。
 
@@ -170,7 +177,8 @@ app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.
 ...
 ```
 
-> **备注：** 对于生产中流量较大的网站，你不会使用此中间件。相反，你会使用像 Nginx 这样的反向代理。
+> [!NOTE]
+> 对于生产中流量较大的网站，你不会使用此中间件。相反，你会使用像 Nginx 这样的反向代理。
 
 ### 使用 Helmet 避免被常见漏洞侵袭
 
@@ -195,7 +203,8 @@ app.use(helmet());
 ...
 ```
 
-> **备注：** 上面的命令，添加了对大多数站点有意义的可用标头子集。你可以按照[npm](https://www.npmjs.com/package/helmet)上的说明，根据需要添加/禁用特定标头。
+> [!NOTE]
+> 上面的命令，添加了对大多数站点有意义的可用标头子集。你可以按照[npm](https://www.npmjs.com/package/helmet)上的说明，根据需要添加/禁用特定标头。
 
 ## 例子：在 Heroku 上安装一个本地图书馆
 
@@ -238,7 +247,8 @@ Heroku 在一个或多个“[Dynos](https://devcenter.heroku.com/articles/dynos)
 
 Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/同步你对实时运行系统所做的任何更改。它通过添加一个名为 heroku 的新 Heroku“远程”存储库，来指向你在 Heroku 云上的源存储库。在开发期间，你使用 git 在“主”存储库 master 中存储更改。如果要部署站点，请将更改同步到 Heroku 存储库。
 
-> **备注：** 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git 或其他一些 SCM 系统。如果你已有 git 存储库，则可以跳过此步骤。
+> [!NOTE]
+> 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git 或其他一些 SCM 系统。如果你已有 git 存储库，则可以跳过此步骤。
 
 有很多方法可以使用 git，但最简单的方法之一，是首先在[GitHub](https://github.com/)上建立一个帐户，在那里创建存储库，然后在本地同步它：
 
@@ -307,7 +317,8 @@ Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/
 
 完成此操作后，你应该可以返回创建存储库的 Github 上的页面，刷新页面，并查看你的整个应用程序现已上传。使用此添加/提交/推送循环，你可以在文件更改时，继续更新存储库。
 
-> **备注：** 这是备份你的“vanilla”项目的好时机 - 虽然我们将在以下部分中进行的一些更改，可能对任何平台（或开发）上的部署有用，而一些其他的更改可能没有用。
+> [!NOTE]
+> 这是备份你的“vanilla”项目的好时机 - 虽然我们将在以下部分中进行的一些更改，可能对任何平台（或开发）上的部署有用，而一些其他的更改可能没有用。
 >
 > 执行此操作的最佳方法，是使用 git 来管理你的修订。使用 git，你不仅可以回到特定的旧版本，而且可以在生产变更的单独“分支”中进行维护，并选择在生产和开发分支之间移动的任何更改。[学习 Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/)非常值得，但超出了本主题的范围。
 >
@@ -412,7 +423,8 @@ heroku help
 heroku create
 ```
 
-> **备注：** 如果你愿意，可以在“创建”create 之后指定远程存储库的命名。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。
+> [!NOTE]
+> 如果你愿意，可以在“创建”create 之后指定远程存储库的命名。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。
 
 然后，我们可以将我们的应用程序，推送到 Heroku 存储库，如下所示。这将上传应用程序，获取所有依赖项，将其打包到 dyno 中，然后启动该站点。
 
@@ -426,7 +438,8 @@ git push heroku master
 heroku open
 ```
 
-> **备注：** 该站点将使用我们的开发数据库运行。创建一些书本和其他对象，并检查该网站是否按预期运行。在下一节中，我们将其设置为使用我们的新数据库。
+> [!NOTE]
+> 该站点将使用我们的开发数据库运行。创建一些书本和其他对象，并检查该网站是否按预期运行。在下一节中，我们将其设置为使用我们的新数据库。
 
 ### 设定配置变量
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
index 06fa88e780e431..5305975a4a1101 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
@@ -32,7 +32,8 @@ Node 和 NPM 包管理器可以用二进制包、安装程序或系统包管理
 
 NPM 也可以安装（全局的）**Express 应用生成器**，可用于创建遵循 [MVC 模式](/zh-CN/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 的 Express 应用框架。它不是必备的，因为无需这个工具就可以创建 Express 应用（或相同架构布局或依赖的 Express 应用）。但我们还是会使用它，因为它更容易上手，还有助于应用结构的模块化管理。
 
-> **备注：** 与某些其他 Web 框架不同，开发环境不包含单独的开发 Web 服务器。在 Node / Express 中，Web 应用程序将创建并运行自己的 Web 服务器！
+> [!NOTE]
+> 与某些其他 Web 框架不同，开发环境不包含单独的开发 Web 服务器。在 Node / Express 中，Web 应用程序将创建并运行自己的 Web 服务器！
 
 典型的开发环境中还需要一些外围工具，包括用于编写代码的 [文本编辑器](/zh-CN/docs/Learn/Common_questions/实用文本编辑器) 或 IDE，用于代码控制管理的工具（比如代码版本控制工具 [Git](https://git-scm.com/)）。这里假定你已经安装了这些工具（尤其是文本编辑器）。
 
@@ -58,7 +59,8 @@ Express 应选用最新版本。
 
 先在操作系统上安装 Node.js 和 NPM 后才可使用 Express。接下来将介绍如何最简便地在 Ubuntu 18.04、macOS Mojave 以及 Windows 10 上安装 Node.js 最新的 LTS 版本。.
 
-> **备注：** 以下内容将介绍在上述三种 OS 上安装 Node 和 NPM 的最简便方法。对于其他操作系统，以及更多的安装方法，可以参考 [通过包管理器方式安装 Node.js](https://nodejs.org/zh-cn/download/package-manager/) (nodejs.org).
+> [!NOTE]
+> 以下内容将介绍在上述三种 OS 上安装 Node 和 NPM 的最简便方法。对于其他操作系统，以及更多的安装方法，可以参考 [通过包管理器方式安装 Node.js](https://nodejs.org/zh-cn/download/package-manager/) (nodejs.org).
 
 ### Windows 和 macOS
 
@@ -80,7 +82,8 @@ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
 sudo apt-get install -y nodejs
 ```
 
-> **警告：** 直接从 Ubuntu 默认仓库中下载的 Node 是 8.x 版本的。
+> [!WARNING]
+> 直接从 Ubuntu 默认仓库中下载的 Node 是 8.x 版本的。
 
 ### 测试 Node.js 和 NPM 是否安装成功
 
@@ -126,7 +129,8 @@ $ npm -v
 
    代码导入了 `"http"` 模块，并用它（`createServer()`）创建了一个服务器来监听 3000 端口的 HTTP 请求。随后在控制台打印一条信息，提示测试服务器的正确 URL。`createServer()` 函数接受一个回调函数作为参数，并在接收 HTTP 请求后进行回调。直接返回了 HTTP 状态码 200（"`OK`"），以及纯文本信息 "Hello World"。
 
-   > **备注：** 现在看不懂这些代码请不要担心，开始使用 Express 后候会进行更加详细的解释。
+   > [!NOTE]
+   > 现在看不懂这些代码请不要担心，开始使用 Express 后候会进行更加详细的解释。
 
 2. 在命令行工具中进入 hellonode.js 文件所在的目录，输入“node + 文件名”并运行，服务器就启动了：
 
@@ -141,7 +145,8 @@ $ npm -v
 
 构建 Node 应用过程中，[NPM](https://docs.npmjs.com/) 是除了 Node 本身之外最重要的工具。可用于获取应用开发、测试以及生产所需的所有包（JavaScript 库）。也可运行开发过程中使用的测试单元和工具。
 
-> **备注：** 以 Node 的角度来看，Express 只是一个用 NPM 安装、供人使用的包而已。
+> [!NOTE]
+> 以 Node 的角度来看，Express 只是一个用 NPM 安装、供人使用的包而已。
 
 可以用 NPM 手动逐个安装所需包。但通常可用 [package.json](https://docs.npmjs.com/files/package.json) 文件来管理依赖。把每个依赖以一个 JavaScript“包”的形式（其中包括名称、版本、描述，初始执行文件、生产依赖，开发依赖、支持的 _Node_ 版本，等等）罗列在这个文件中。package.json 文件包含 NPM 获取和运行应用程序所需的所有内容（在编写可重用的库时，可以用它把包上传到 NPM 仓库中供其他用户使用）。
 
@@ -149,7 +154,8 @@ $ npm -v
 
 下面介绍用 NPM 下载包、将包保存进工程依赖树，以及在 Node 应用中调用包的方法和步骤。
 
-> **备注：** 现在来讲解获取和安装 Express 包的步骤。稍后解释为什么可以直接对 Express 包（乃至其他包）使用 **Express 应用生成器**。这段对理解 NPM 的工作原理和应用生成器的工作机制有一定的帮助。
+> [!NOTE]
+> 现在来讲解获取和安装 Express 包的步骤。稍后解释为什么可以直接对 Express 包（乃至其他包）使用 **Express 应用生成器**。这段对理解 NPM 的工作原理和应用生成器的工作机制有一定的帮助。
 
 1. 首先为新应用创建一个目录，并进入它：
 
@@ -249,7 +255,8 @@ npm install eslint --save-dev
   }
 ```
 
-> **备注：** "[lint](https://zh.wikipedia.org/wiki/Lint)" 是用于对软件进行静态分析的工具，可以发现并报告软件是否遵循某些最佳编程惯例。
+> [!NOTE]
+> "[lint](https://zh.wikipedia.org/wiki/Lint)" 是用于对软件进行静态分析的工具，可以发现并报告软件是否遵循某些最佳编程惯例。
 
 ### 运行任务
 
@@ -297,7 +304,8 @@ npm install express-generator -g
 express helloworld
 ```
 
-> **备注：** 也可以指定模板库来使用其他丰富的设置。可通过 help 命令来查看所有选项：
+> [!NOTE]
+> 也可以指定模板库来使用其他丰富的设置。可通过 help 命令来查看所有选项：
 >
 > ```bash
 > $ express --help
@@ -305,7 +313,8 @@ express helloworld
 
 NPM 将在当前位置的子目录中创建新的 Express 应用，可以在控制台看到构建的过程。在完成时，NPM 会提示你需要安装哪些 Node 依赖，以及如何开启应用。
 
-> **备注：** 新应用的根目录有一个 **package.json** 文件。可以打开它看看都安装了哪些依赖，其中可以看到 Express 和 Jade 模板库：
+> [!NOTE]
+> 新应用的根目录有一个 **package.json** 文件。可以打开它看看都安装了哪些依赖，其中可以看到 Express 和 Jade 模板库：
 >
 > ```js
 > {
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
index ea83ba3741163a..d357fd54a6e3e2 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
@@ -87,7 +87,8 @@ block content
 
 ![Author Detail Page - Express Local Library site](locallibary_express_author_detail.png)
 
-> **备注：** 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。
+> [!NOTE]
+> 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。
 
 ## 下一步
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
index d37f3a23181fac..4115aa8f725af7 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
@@ -59,7 +59,8 @@ block content
 
 ![Author List Page - Express Local Library site](locallibary_express_author_list.png)
 
-> **备注：** 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。
+> [!NOTE]
+> 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。
 >
 > 但是，这次缺少日期，除非严格模式生效，否则将忽略对不存在的属性的引用。`moment()`返回当前时间，并且你不希望将缺少的日期格式化为就像今天一样。
 >
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
index ae6d60c0fab626..e450f5592d5d5c 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
@@ -33,7 +33,8 @@ exports.book_detail = asyncHandler(async (req, res, next) => {
 });
 ```
 
-> **备注：** 我们不需要用 require 导入任何额外的模块，因为我们在实现主页控制器时已经导入了依赖项。
+> [!NOTE]
+> 我们不需要用 require 导入任何额外的模块，因为我们在实现主页控制器时已经导入了依赖项。
 
 此方法与[类别详细信息页面](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)描述的方法完全相同。路由控制器函数使用 `Promise.all()` 并行查询指定的书籍（`Book`）以及它的相关副本（`BookInstance`）。如果没有找到匹配的书籍，就会返回一个带有“404: Not Found”错误的 Error 对象。如果找到了书籍，那么就会使用“book_detail”模板呈现检索到的数据库信息。由于“title”键用于给网页命名（如“layout.pug”中定义的标题），所以这次我们在渲染网页时传递了 `results.book.title`。
 
@@ -80,7 +81,8 @@ block content
 
 在这个模板中，几乎所有内容都在先前的章节演示过了。
 
-> **备注：** 与本书相关的类别列表在模板中的实现如下。除了最后一个之外，这会在与本书相关的每个类别后面添加一个逗号。
+> [!NOTE]
+> 与本书相关的类别列表在模板中的实现如下。除了最后一个之外，这会在与本书相关的每个类别后面添加一个逗号。
 >
 > ```pug
 >   p #[strong Genre:]
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
index 5a9f3a1b1faf80..f32e01a6e9ced2 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
@@ -52,7 +52,8 @@ block content
 
 這个视图扩展了 **layout.pug** 基本模板，并覆盖了名为 '**content**' 的區块 `block` 。它显示我们从控制器传入的标题`title`（通过`render()`方法），然后使用`each`-`in`-`else`语法，遍历`book_list`变量。为每本图书创建一个列表项，以显示书名，并作为书的详细信息页面的链接，后面跟着作者姓名。如果`book_list`中没有书，则执行`else`子句，并显示文字“没有书” 'There are no books.'。
 
-> **备注：** 我们使用 `book.url` ，为每本书提供详细记录链接（我们已经实现了此路由，但尚未实现此页面）。这是 `Book` 模型的一个虚拟属性，它使用模型实例的 `_id` 字段，生成唯一的 URL 路径。
+> [!NOTE]
+> 我们使用 `book.url` ，为每本书提供详细记录链接（我们已经实现了此路由，但尚未实现此页面）。这是 `Book` 模型的一个虚拟属性，它使用模型实例的 `_id` 字段，生成唯一的 URL 路径。
 
 在这里，我們感兴趣的是，每本书被定义为两行，第二行使用管道（上面高亮显示）。这种方法是必要的，因为如果作者姓名位于上一行，那么它将成为超链接的一部分。
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
index c6ffaff99fe938..1819fb34264377 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
@@ -76,7 +76,8 @@ block content
 
 目前，我们网站上显示的大多数日期，都使用默认的 JavaScript 格式（例如 _Tue Dec 06 2016 15:49:58 GMT+1100_（AUS 东部夏令时间）。本文的挑战，是改善作者`Author`生命周期日期显示的外观信息（死亡/出生日期）和 BookInstance 详细信息页面，使用格式：December 6th, 2016。
 
-> **备注：** 你可以使用与我们用于 Book Instance List 的相同方法（将生命周期的虚拟属性，添加到`Author`模型，并使用[moment](https://www.npmjs.com/package/moment)来设置日期字符串的格式）。
+> [!NOTE]
+> 你可以使用与我们用于 Book Instance List 的相同方法（将生命周期的虚拟属性，添加到`Author`模型，并使用[moment](https://www.npmjs.com/package/moment)来设置日期字符串的格式）。
 
 这一挑战的要求：
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
index e94069f3b1f2d1..a4fa838d3ecf92 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
@@ -7,7 +7,8 @@ slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_mom
 
 我们将使用的方法，是在我们的`BookInstance`模型中，创建一个返回格式化日期的虚拟屬性。我们将使用[moment](https://www.npmjs.com/package/moment) 来做实际的格式化，这是一个轻量级 JavaScript 日期库，用于解析，验证，操作和格式化日期。
 
-> **备注：** 我们可以直接在 Pug 模板中，使用 _moment_ 格式化字符串，或者可以在许多其他地方格式化字符串。使用虚拟属性，可以使我们获得格式化的日期，這与我们当前获取 `due_date` 的方式完全相同。
+> [!NOTE]
+> 我们可以直接在 Pug 模板中，使用 _moment_ 格式化字符串，或者可以在许多其他地方格式化字符串。使用虚拟属性，可以使我们获得格式化的日期，這与我们当前获取 `due_date` 的方式完全相同。
 
 ## 安装 moment
 
@@ -34,7 +35,8 @@ BookInstanceSchema.virtual("due_back_formatted").get(function () {
 });
 ```
 
-> **备注：** 格式化方法可以使用几乎任何模式显示日期。[moment 文档](http://momentjs.com/docs/#/displaying/)中，可以找到表示不同日期组件的语法。
+> [!NOTE]
+> 格式化方法可以使用几乎任何模式显示日期。[moment 文档](http://momentjs.com/docs/#/displaying/)中，可以找到表示不同日期组件的语法。
 
 ## 更新视图
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
index 1b250402bf828f..4d0c460890e3d5 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
@@ -54,7 +54,8 @@ exports.genre_detail = function (req, res, next) {
 
 所需种类记录的 ID，在 URL 的末尾编码，并根据路由定义（**/genre/:id**）自动提取。通过请求参数（`req.params.id`）在控制器内访问 ID。它在 `Genre.findById()` 中用于获取当前种类。它还用于获取符合当前种类的所有`Book`对象，就是在种类字段中具有种类 ID 的那些 `Book.find({ 'genre': req.params.id })`。
 
-> **备注：** 如果数据库中不存在该类型（即它可能已被删除），则`findById()`将成功返回，但没有结果。在这种情况下，我们想要显示一个“未找到”页面，因此我们创建一个`Error`对象，并将其传递给链中的下一个中间件函数`next`。
+> [!NOTE]
+> 如果数据库中不存在该类型（即它可能已被删除），则`findById()`将成功返回，但没有结果。在这种情况下，我们想要显示一个“未找到”页面，因此我们创建一个`Error`对象，并将其传递给链中的下一个中间件函数`next`。
 >
 > ```js
 > if (results.genre == null) {
@@ -102,7 +103,8 @@ block content
 
 ![Genre Detail Page - Express Local Library site](locallibary_express_genre_detail.png)
 
-> **备注：** 你可能会收到与此类似的错误：
+> [!NOTE]
+> 你可能会收到与此类似的错误：
 >
 > ```bash
 > Cast to ObjectId failed for value " 59347139895ea23f9430ecbb" at path "_id" for model "Genre"
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md
index 843a17ee270492..8d38fc3b85ed46 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md
@@ -107,7 +107,8 @@ block content
 
 在动态内容标题下，我们检查从`render()`函数传入的错误变量，是否已定义。如果是这样，我们列出这个错误。如果不是，我们从`data`变量中，获取并列出每个模型的副本数量。
 
-> **备注：** 我们没有转义计数值 (i.e. 我们使用 `!{}` 语法) ，因为计数值已经被计算过了。如果信息是由终端用户提供的，那么我们就会转义該变量，以用于显示。
+> [!NOTE]
+> 我们没有转义计数值 (i.e. 我们使用 `!{}` 语法) ，因为计数值已经被计算过了。如果信息是由终端用户提供的，那么我们就会转义該变量，以用于显示。
 
 ## 它看起来像是？
 
@@ -115,7 +116,8 @@ block content
 
 ![Home page - Express Local Library site](locallibary_express_home.png)
 
-> **备注：** 你将无法使用侧边栏链接，因为这些网页的网址，视图和模板尚未定义。例如，如果你尝试，取决于你点击的链接，你将获取“NOT IMPLEMENTED: Book list”等错误。在“控制器”文件中的不同控制器中，会指定这些字符串文字（将被合适的数据替换）。
+> [!NOTE]
+> 你将无法使用侧边栏链接，因为这些网页的网址，视图和模板尚未定义。例如，如果你尝试，取决于你点击的链接，你将获取“NOT IMPLEMENTED: Book list”等错误。在“控制器”文件中的不同控制器中，会指定这些字符串文字（将被合适的数据替换）。
 
 ## 下一步
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
index 599b4c9a230cc1..6308b7ae551e3e 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
@@ -11,7 +11,8 @@ Express 可以与许多不同的[模板渲染引擎](https://expressjs.com/en/gu
 
 不同的模板语言使用不同的方法，来定义布局和标记数据的占位符 — 一些使用 HTML 来定义布局，而另一些则使用可以编译为 HTML 的不同标记格式。Pug 是第二种类型；它使用 HTML 的表示形式，其中任何行中的第一个单词，通常表示 HTML 元素，后续行中的缩进，用于表示嵌套在这些元素中的任何内容。结果是一个页面定义直接转换为 HTML，但可以说更简洁，更容易阅读。
 
-> **备注：** 使用 Pug 的缺点，是它对缩进和空格敏感（如果在错误的位置添加额外的空格，可能会得到没什么帮助的错误代码）。但是，一旦你的模板到位，它们就很容易阅读和维护。
+> [!NOTE]
+> 使用 Pug 的缺点，是它对缩进和空格敏感（如果在错误的位置添加额外的空格，可能会得到没什么帮助的错误代码）。但是，一旦你的模板到位，它们就很容易阅读和维护。
 
 ## 模板组态
 
@@ -98,7 +99,8 @@ p This is a line with #[em some emphasis] and #[strong strong text] markup.
 p This line has an un-escaped string: !{'<em> is emphasised</em>'}, an escaped string: #{'<em> is not emphasised</em>'}, and escaped variables: #{title}.
 ```
 
-> **备注：** 你几乎总是希望转义来自用户的数据（通过 **`#{}`** 语法）。可信任的数据（例如，生成的记录计数等）可以不先转义就显示。
+> [!NOTE]
+> 你几乎总是希望转义来自用户的数据（通过 **`#{}`** 语法）。可信任的数据（例如，生成的记录计数等）可以不先转义就显示。
 
 你可以在行的开头使用管道（“**|**”）字符来表示“[纯文本](https://pugjs.org/language/plain-text.html)”。例如，下面显示的附加文本，将显示在与前一个锚点相同的行上，但不会链接。
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md
index d93b8646a2813c..4820a3bf71782b 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md
@@ -97,7 +97,8 @@ exports.author_create_post = [
 
 此代码的结构和行为，几乎与创建`Genre`对象完全相同。首先，我们验证并清理数据。如果数据无效，那么我们将重新显示表单，以及用户最初输入的数据，和错误消息列表。如果数据有效，那么我们保存新的作者记录，并将用户重定向到作者详细信息页面。
 
-> **备注：** 与`Genre` post 处理程序不同，我们不会在保存之前，检查`Author`对象是否已存在。可以说，我们应该这样做，尽管现在我们可以有多个具有相同名称的作者。
+> [!NOTE]
+> 与`Genre` post 处理程序不同，我们不会在保存之前，检查`Author`对象是否已存在。可以说，我们应该这样做，尽管现在我们可以有多个具有相同名称的作者。
 
 验证代码演示了几个新功能：
 
@@ -149,7 +150,8 @@ block content
 
 此视图的结构和行为与**genre_form.pug**模板完全相同，因此我们不再对其进行描述。
 
-> **备注：** 某些浏览器不支持 input `type=“date”`，因此你不会获得日期选取部件或默认的*`dd/mm/yyyy`*占位符，而是获取一个空的纯文本字段。一种解决方法，是明确添加属性`placeholder='dd/mm/yyyy'`，以便在功能较少的浏览器上，仍然可以获得有关所需文本格式的信息。
+> [!NOTE]
+> 某些浏览器不支持 input `type=“date”`，因此你不会获得日期选取部件或默认的*`dd/mm/yyyy`*占位符，而是获取一个空的纯文本字段。一种解决方法，是明确添加属性`placeholder='dd/mm/yyyy'`，以便在功能较少的浏览器上，仍然可以获得有关所需文本格式的信息。
 
 ### 自我挑战：加入死亡日期
 
@@ -161,7 +163,8 @@ block content
 
 ![Author Create Page - Express Local Library site](locallibary_express_author_create_empty.png)
 
-> **备注：** 如果你尝试使用日期的各种输入格式，你可能会发现格式`yyyy-mm-dd`行为不正常。这是因为 JavaScript 将日期字符串，视为包含 0 小时的时间，但另外将该格式的日期字符串（ISO 8601 标准）视为包括 0 小时 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则日期显示（即本地）将在你输入的日期之前一天。这是我们在这里没有解决的几个复杂问题之一（例如多字姓和有多个作者的书本）。
+> [!NOTE]
+> 如果你尝试使用日期的各种输入格式，你可能会发现格式`yyyy-mm-dd`行为不正常。这是因为 JavaScript 将日期字符串，视为包含 0 小时的时间，但另外将该格式的日期字符串（ISO 8601 标准）视为包括 0 小时 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则日期显示（即本地）将在你输入的日期之前一天。这是我们在这里没有解决的几个复杂问题之一（例如多字姓和有多个作者的书本）。
 
 ## 下一步
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md
index c8163f15775364..36eb27bc6ee929 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md
@@ -225,7 +225,9 @@ block content
 - 种类集合显示为复选框，使用我们在控制器中设置的检查值 `checked`，来确定是否应该选中该框。
 - 作者集合显示为单选下拉列表。在这种情况下，我们通过比较当前作者选项的 id 与用户先前输入的值（作为 `book` 变量传入），来确定要显示的作者。这在上面突出显示！
 
-  > **备注：** 如果提交的表单中存在错误，那么，当要重新呈现表单时，新的书本作者仅使用字符串（作者列表中选中选项的值）进行标识。相比之下，现有的书本作者的 `_id` 属性不是字符串。因此，要比较新的和现有的，我们必须将每个现有书本作者的 `_id`，强制转换为字符串，如上所示。
+  > [!NOTE]
+  >
+  > 如果提交的表单中存在错误，那么，当要重新呈现表单时，新的书本作者仅使用字符串（作者列表中选中选项的值）进行标识。相比之下，现有的书本作者的 `_id` 属性不是字符串。因此，要比较新的和现有的，我们必须将每个现有书本作者的 `_id`，强制转换为字符串，如上所示。
 
 ## 它看起來像是？
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
index b86a351be28571..b7e2b2f669d66a 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
@@ -150,7 +150,8 @@ block content
 
 这个视图的结构和行为，几乎等同于 **book_form.pug** 模板，因此我们就不再重覆说明一次了。
 
-> **备注：** 以上的模板将状态值 (Maintenance, Available, 等等) 写死在代码里，而且不能 "记忆" 使用者的输入值。如果你愿意的话，考虑重新实作此列表，当表单被重新呈现时，从控制器传入选项数据，并设定选中的值。
+> [!NOTE]
+> 以上的模板将状态值 (Maintenance, Available, 等等) 写死在代码里，而且不能 "记忆" 使用者的输入值。如果你愿意的话，考虑重新实作此列表，当表单被重新呈现时，从控制器传入选项数据，并设定选中的值。
 
 ## 它看起來像是？
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md
index 0160ef3fa7da7b..8d6fbfee733623 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md
@@ -84,7 +84,8 @@ exports.genre_create_post = [
 
 首先要注意的是，控制器不是单个中间件函数（带参数（`req, res, next`）），而是指定一组中间件函数。数组传递给路由器函数，并按顺序调用每个方法。
 
-> **备注：** 这种方法是必需的，因为消毒/验证器是中间件功能。
+> [!NOTE]
+> 这种方法是必需的，因为消毒/验证器是中间件功能。
 
 数组中的第一个方法定义了一个验证器（`body`），来检查 name 字段是否为空（在执行验证之前调用`trim()`，以删除任何尾随/前导空格）。
 
@@ -98,7 +99,8 @@ body('name', 'Genre name required').isLength({ min: 1 }).trim(),
 sanitizeBody('name').trim().escape(),
 ```
 
-> **备注：** 验证期间运行的清洁器不会修改请求。这就是为什么我们必须在上面的两个步骤中调用`trim()`！
+> [!NOTE]
+> 验证期间运行的清洁器不会修改请求。这就是为什么我们必须在上面的两个步骤中调用`trim()`！
 
 在指定验证器和清理器之后，我们创建了一个中间件函数，来提取任何验证错误。我们使用`isEmpty()` 来检查验证结果中，是否有任何错误。如果有，那么我们再次渲染表单，传入我们的已清理种类对象和错误消息的数组（`errors.array()`）。
 
@@ -196,7 +198,8 @@ block content
 
 页面的最后一部分是错误代码。如果已定义错误变量，则只会打印错误列表（换句话说，当模板在`GET`路由上呈现时，此部分不会出现）。
 
-> **备注：** 这只是呈现错误的一种方法。你还可以从错误变量中，获取受影响字段的名称，并使用这些，来控制错误消息的呈现位置，以及是否应用自定义 CSS 等。
+> [!NOTE]
+> 这只是呈现错误的一种方法。你还可以从错误变量中，获取受影响字段的名称，并使用这些，来控制错误消息的呈现位置，以及是否应用自定义 CSS 等。
 
 ## 它看起來像是？
 
@@ -208,7 +211,8 @@ block content
 
 ![](locallibary_express_genre_create_error.png)
 
-> **备注：** 我们的验证使用`trim()`，来确保不接受空格作为种类名称。我们还可以在表单中 的字段定义中，添加值`required='true'`，来验证客户端字段不为空：
+> [!NOTE]
+> 我们的验证使用`trim()`，来确保不接受空格作为种类名称。我们还可以在表单中 的字段定义中，添加值`required='true'`，来验证客户端字段不为空：
 >
 > ```js
 > input#name.form-control(type='text', placeholder='Fantasy, Poetry etc.' name='name' value=(undefined===genre ? '' : genre.name), required='true' )
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
index 2cbc5490c21e33..7199e86c47cbd6 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
@@ -44,7 +44,8 @@ exports.author_delete_get = function (req, res, next) {
 
 控制器从 URL 参数（`req.params.id`）中，获取要删除的 `Author` 实例的 id。它使用 `async.parallel()` 方法，并行获取作者记录和所有相关书本。当两个操作都完成后，它将呈现 **author_delete.pug** 视图，为 `title`、`author` 和 `author_books` 传递变量。
 
-> **备注：** 如果`findById()`返回“没有结果”，则作者不在数据库中。在这种情况下，没有什么可以删除，所以我们立即呈现所有作者的列表。
+> [!NOTE]
+> 如果`findById()`返回“没有结果”，则作者不在数据库中。在这种情况下，没有什么可以删除，所以我们立即呈现所有作者的列表。
 >
 > ```js
 > }, function(err, results) {
@@ -100,7 +101,8 @@ exports.author_delete_post = function (req, res, next) {
 
 首先，我们验证是否已提供 id（这是通过表单主体参数发送的，而不是使用 URL 中的版本）。然后我们以与 `GET` 路由相同的方式，获得作者及其相关书本。如果没有书本，那么我们删除作者对象，并重定向到所有作者的列表。如果还有书本，那么我们只需重新呈现表格，传递作者和要删除的书本列表。
 
-> **备注：** 我们可以检查对 `findById()` 的调用，是否返回任何结果，如果没有，则立即呈现所有作者的列表。为简洁起见，我们将代码保留在上面（如果找不到 id，它仍会返回作者列表，但这将在 `findByIdAndRemove()` 之后发生）。
+> [!NOTE]
+> 我们可以检查对 `findById()` 的调用，是否返回任何结果，如果没有，则立即呈现所有作者的列表。为简洁起见，我们将代码保留在上面（如果找不到 id，它仍会返回作者列表，但这将在 `findByIdAndRemove()` 之后发生）。
 
 ## 视图
 
@@ -146,7 +148,8 @@ block content
 
 接下来，我们将向 Author 详细视图添加 **Delete** 控件（详细信息页面是删除记录的好地方）。
 
-> **备注：** 在完整实现中，控件将仅对授权用户可见。但是在这个时间点上，我们还没有一个授权系统！
+> [!NOTE]
+> 在完整实现中，控件将仅对授权用户可见。但是在这个时间点上，我们还没有一个授权系统！
 
 打开 **author_detail.pug** 视图，并在底部添加以下行。
 
@@ -172,7 +175,8 @@ p
 
 ![](locallibary_express_author_delete_withbooks.png)
 
-> **备注：** 其他删除对象的页面，可以用相同的方式实现。我们把它留下，作为挑战。
+> [!NOTE]
+> 其他删除对象的页面，可以用相同的方式实现。我们把它留下，作为挑战。
 
 ## 下一步
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
index be9fb0d84e8862..6ab29bf1ed0b47 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
@@ -37,7 +37,8 @@ slug: Learn/Server-side/Express_Nodejs/forms
 
 此教程将展示上述的操作，如何在 _Express_ 中实现。在此过程中，我们将扩展 LocalLibrary 网站，以允许用户创建，编辑和删除图书馆中的项目。
 
-> **备注：** 我们还没有考虑如何将特定路由，限制为经过身份验证或授权的用户，因此在这个时间点，任何用户都可以对数据库进行更改。
+> [!NOTE]
+> 我们还没有考虑如何将特定路由，限制为经过身份验证或授权的用户，因此在这个时间点，任何用户都可以对数据库进行更改。
 
 ### HTML 表单
 
@@ -114,7 +115,8 @@ npm install express-validator --save
 
 #### 使用 express-validator
 
-> **备注：** Github 上的[express-validator](https://github.com/ctavan/express-validator#express-validator)指南，提供了 API 的良好概述。我们建议你阅读该内容，以了解其所有功能（包括创建自定义验证程序）。下面我们只介绍一个对 LocalLibrary 有用的子集。
+> [!NOTE]
+> Github 上的[express-validator](https://github.com/ctavan/express-validator#express-validator)指南，提供了 API 的良好概述。我们建议你阅读该内容，以了解其所有功能（包括创建自定义验证程序）。下面我们只介绍一个对 LocalLibrary 有用的子集。
 
 要在我们的控制器中使用验证器，我们必须从'**express-validator/check**'和'**express-validator/filter**'模块中，导入我们想要使用的函数，如下所示：
 
@@ -141,7 +143,9 @@ const { sanitizeBody } = require("express-validator/filter");
       .isAlpha().withMessage('Name must be alphabet letters.'),
   ```
 
-  > **备注：** 你还可以添加内联清理器，如`trim()`，如上所示。但是，此处应用清理器，仅适用于验证步骤。如果要对最终输出进行消毒，则需要使用单独的清理器方法，如下所示。
+  > [!NOTE]
+  >
+  > 你还可以添加内联清理器，如`trim()`，如上所示。但是，此处应用清理器，仅适用于验证步骤。如果要对最终输出进行消毒，则需要使用单独的清理器方法，如下所示。
 
 - [`sanitizeBody(fields)`](https://github.com/ctavan/express-validator#sanitizebodyfields): 指定一个正文要清理的字段。然后将清理操作，以菊花链形式连接到此方法。例如，下面的`escape()`清理操作，会从名称变量中，删除可能在 JavaScript 跨站点脚本攻击中使用的 HTML 字符。
 
@@ -197,7 +201,8 @@ const { sanitizeBody } = require("express-validator/filter");
 
 哦，如果你涉及文件上传，那么你可能需要“[multer](https://blog.csdn.net/qq_43624878/article/details/103607944)”中间件，你大概听说过“formidable”，但 multer 比它更强大！
 
-> **备注：** 更“牢固”的实现，可能允许你在创建新对象时创建依赖对象，并随时删除任何对象（例如，通过删除依赖对象，或从数据库中，删除对已删除对象的引用） 。
+> [!NOTE]
+> 更“牢固”的实现，可能允许你在创建新对象时创建依赖对象，并随时删除任何对象（例如，通过删除依赖对象，或从数据库中，删除对已删除对象的引用） 。
 
 ### 路由
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md
index a5b556300cdf17..91c3b0ddc08313 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md
@@ -187,7 +187,8 @@ exports.book_update_post = [
             option(value=author._id) #{author.name}
 ```
 
-> **备注：** 此处代码的更动，是为了让书本表单 book_form，能被创建和更新书本的对象共同使用 (如果不这么做，当创建表单时，在 `GET` 路由会发生一个错误)。
+> [!NOTE]
+> 此处代码的更动，是为了让书本表单 book_form，能被创建和更新书本的对象共同使用 (如果不这么做，当创建表单时，在 `GET` 路由会发生一个错误)。
 
 ## 加入一个更新按钮
 
@@ -211,7 +212,8 @@ exports.book_update_post = [
 
 ![](locallibary_express_book_update_noerrors.png)
 
-> **备注：** 其他更新对象的页面，也可以用同样的方式处理。我们把这些更新页面的实作留下，做为自我挑战。
+> [!NOTE]
+> 其他更新对象的页面，也可以用同样的方式处理。我们把这些更新页面的实作留下，做为自我挑战。
 
 ## 下一步
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/index.md b/files/zh-cn/learn/server-side/express_nodejs/index.md
index 2d8dba7aecfba3..b69ddb07773e19 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/index.md
@@ -11,7 +11,8 @@ Express 是一款受欢迎的开源 web 框架，构建语言是 JavaScript，
 
 在开始这个模块之前你需要知道什么是服务端网页编程和 web 框架，建议你先阅读 [服务端网页编程](/zh-CN/docs/Learn/Server-side) 模块。强烈推荐了解编程概念和 [JavaScript](/zh-CN/docs/Web/JavaScript) ，但这对理解核心概念不是必需的。
 
-> **备注：** 这个网站有很多有用的资源用来学习 JavaScript 做客户端开发： [JavaScript](/zh-CN/docs/Web/JavaScript), [JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide), [JavaScript Basics](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/zh-CN/docs/Learn/JavaScript) (learning). 核心的 JavaScript 语言和概念用 Nodejs 服务端开发是相同的，也是相关的。Node.js 提供 [额外的 API](https://nodejs.org/dist/latest-v6.x/docs/api/) 用于支持在无浏览器环境中有用的功能，例如，创建 HTTP 服务器并访问文件系统，但不支持 JavaScript API 以使用浏览器和 DOM。
+> [!NOTE]
+> 这个网站有很多有用的资源用来学习 JavaScript 做客户端开发： [JavaScript](/zh-CN/docs/Web/JavaScript), [JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide), [JavaScript Basics](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/zh-CN/docs/Learn/JavaScript) (learning). 核心的 JavaScript 语言和概念用 Nodejs 服务端开发是相同的，也是相关的。Node.js 提供 [额外的 API](https://nodejs.org/dist/latest-v6.x/docs/api/) 用于支持在无浏览器环境中有用的功能，例如，创建 HTTP 服务器并访问文件系统，但不支持 JavaScript API 以使用浏览器和 DOM。
 >
 > 这篇指南将会提供一些 Node.js 和 Express 的信息，并且有很多优秀的网络资源和书籍。一些链接 比如[How do I get started with Node.js](http://stackoverflow.com/a/5511507/894359) (StackOverflow) 和 [What are the best resources for learning Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?) (Quora).
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
index 644034216a8dda..d6a031cee2615a 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
@@ -98,7 +98,8 @@ Node 本身并不支持其他常见的 web 开发任务。如果需要进行一
 
 虽然 Express 本身是极简风格的，但是开发人员通过创建各类兼容的中间件包解决了几乎所有的 web 开发问题。这些库可以实现 cookie、会话、用户登录、URL 参数、`POST` 数据、安全头等功能。可在 [Express 中间件](https://www.expressjs.com.cn/resources/middleware.html) 网页中找到由 Express 团队维护的中间件软件包列表（还有一张流行的第三方软件包列表）。
 
-> **备注：** 这种灵活性是一把双刃剑。虽然有一些中间件包可以解决几乎所有问题或需求，但是挑选合适的包有时也会成为一个挑战。这里构建应用没有“不二法门”，Internet 上许多示例也不是最优的，或者只展示了开发 web 应用所需工作的冰山一角。
+> [!NOTE]
+> 这种灵活性是一把双刃剑。虽然有一些中间件包可以解决几乎所有问题或需求，但是挑选合适的包有时也会成为一个挑战。这里构建应用没有“不二法门”，Internet 上许多示例也不是最优的，或者只展示了开发 web 应用所需工作的冰山一角。
 
 ## Node 和 Express 从哪儿来？
 
@@ -136,7 +137,8 @@ Express 是高度包容的。几乎可以将任何兼容的中间件以任意顺
 
 首先来看 Express 的 [Hello World](https://www.expressjs.com.cn/starter/hello-world.html) 的示例（下文将逐行讨论）。
 
-> **备注：** 如果你已经安装了 Node 和 Express（或者你已经按照 [下一节](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 中的说明安装好了），可以将此代码保存为 **app.js**，并通过在 bash 中这样运行它：
+> [!NOTE]
+> 如果你已经安装了 Node 和 Express（或者你已经按照 [下一节](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 中的说明安装好了），可以将此代码保存为 **app.js**，并通过在 bash 中这样运行它：
 >
 > ```bash
 > node ./app.js
@@ -174,7 +176,8 @@ const app = express();
 
 还可以创建自定义模块，并用相同的方法导入。
 
-> **备注：** 你一定会有自建模块的**需求**，因为这可以让代码管理更有序。单文件应用是很难理解和维护的。使用模块还有助于管理名字空间，因为在使用模块时只会导入模块中显式导出的变量。
+> [!NOTE]
+> 你一定会有自建模块的**需求**，因为这可以让代码管理更有序。单文件应用是很难理解和维护的。使用模块还有助于管理名字空间，因为在使用模块时只会导入模块中显式导出的变量。
 
 为了让对象暴露于模块之外，只需把它们设置为 `exports` 对象的附加属性即可。例如，下面的 **square.js** 模块就是一个导出了 `area()` 和 `perimeter()` 方法的文件：
 
@@ -195,7 +198,8 @@ const square = require("./square");
 console.log("边长为 4 的正方形面积为 " + square.area(4));
 ```
 
-> **备注：** 为模块指定绝对路径（或模块的名字，见最初的示例）也是可行的。
+> [!NOTE]
+> 为模块指定绝对路径（或模块的名字，见最初的示例）也是可行的。
 
 一次赋值不仅能构建一个单一的属性，还能构建一个完整的对象，可以像下面这样把对象赋值给 `module.exports`（也可以让 `exports` 对象直接作为一个构造器或另一个函数）：
 
@@ -210,7 +214,8 @@ module.exports = {
 };
 ```
 
-> **备注：** 在一个既定的模块内，可以把 `exports` 想象成 `module.exports` 的 [快捷方式](https://nodejs.cn/api/modules.html#modules_exports_shortcut)。`exports` 本质上就是在模块初始化前为 `module.exports` 的值进行初始化的一个变量。这个值是对一个对象（这里是空对象）的引用。这意味着 `exports` 与 `module.exports` 引用了同一个对象，也意味着如果为 `exports` 赋其他值不会影响到 `module.exports`。
+> [!NOTE]
+> 在一个既定的模块内，可以把 `exports` 想象成 `module.exports` 的 [快捷方式](https://nodejs.cn/api/modules.html#modules_exports_shortcut)。`exports` 本质上就是在模块初始化前为 `module.exports` 的值进行初始化的一个变量。这个值是对一个对象（这里是空对象）的引用。这意味着 `exports` 与 `module.exports` 引用了同一个对象，也意味着如果为 `exports` 赋其他值不会影响到 `module.exports`。
 
 更多信息请参阅 [模块](https://nodejs.cn/api/modules.html)（Node API 文档）。
 
@@ -236,9 +241,11 @@ console.log("第二");
 
 有多种方法可以让一个异步 API 通知当前应用它已执行完毕。最常用的是在调用异步 API 时注册一个回调函数，在 API 操作结束后将“回调”之。这也是上面的代码所使用的方法。
 
-> **备注：** 如果有一系列独立的异步操作必须按顺序执行，那么使用回调可能会非常“混乱”，因为这会导致多级嵌套回调。人们通常把这个问题叫做“回调地狱”。缓解这个问题有以下办法：良好的编码实践（参考 <http://callbackhell.com/>）、使用 [async](https://www.npmjs.com/package/async) 等模块、迁移至 ES6 并使用 [Promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 等特性。
+> [!NOTE]
+> 如果有一系列独立的异步操作必须按顺序执行，那么使用回调可能会非常“混乱”，因为这会导致多级嵌套回调。人们通常把这个问题叫做“回调地狱”。缓解这个问题有以下办法：良好的编码实践（参考 <http://callbackhell.com/>）、使用 [async](https://www.npmjs.com/package/async) 等模块、迁移至 ES6 并使用 [Promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 等特性。
 
-> **备注：** Node 和 Express 有一个一般性约定，即：使用“错误优先”回调。这个约定要求回调函数的第一个参数是错误值，而后续的参数包含成功数据。以下博文很好的解释了这个方法的有效性：[以 Node.js 之名：理解错误优先回调](https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/)（fredkschott.com 英文文章）
+> [!NOTE]
+> Node 和 Express 有一个一般性约定，即：使用“错误优先”回调。这个约定要求回调函数的第一个参数是错误值，而后续的参数包含成功数据。以下博文很好的解释了这个方法的有效性：[以 Node.js 之名：理解错误优先回调](https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/)（fredkschott.com 英文文章）
 
 ### 创建路由处理器（Route handler）
 
@@ -252,7 +259,8 @@ app.get("/", (req, res) => {
 
 回调函数将请求和响应对象作为参数。该函数直接调用响应的 `send()` 以返回字符串“Hello World!”。有 [许多其他响应方法](https://www.expressjs.com.cn/guide/routing.html#response-methods) 可以结束请求/响应周期，例如，通过调用 `res.json()` 来发送 JSON 响应、调用 `res.sendFile()` 来发送文件。
 
-> **备注：** 虽然回调函数的参数命名没有限制，但是当调用回调时，第一个参数将始终是请求，第二个参数将始终是响应。合理的命名它们，在回调体中使用的对象将更容易识别。
+> [!NOTE]
+> 虽然回调函数的参数命名没有限制，但是当调用回调时，第一个参数将始终是请求，第二个参数将始终是响应。合理的命名它们，在回调体中使用的对象将更容易识别。
 
 **Express 应用**对象还提供了为其他所有 HTTP 动词定义路由处理器的方法，大多数处理器的使用方式完全一致：
 
@@ -290,7 +298,8 @@ router.get("/about", (req, res) => {
 module.exports = router;
 ```
 
-> **备注：** 向 `Router` 对象添加路由就像向之前为 `app` 对象添加路由一样。
+> [!NOTE]
+> 向 `Router` 对象添加路由就像向之前为 `app` 对象添加路由一样。
 
 首先 `require()` 路由模块（**wiki.js**），然后在 Express 应用中调用 `use()` 把 `Router` 添加到中间件处理路径中，就可以在主应用中使用这个模块中的路由处理器了。路由路径有两条：`/wiki` 和 `/wiki/about/`。
 
@@ -306,7 +315,8 @@ app.use("/wiki", wiki);
 
 中间件在 Express 应用中得到了广泛使用，从提供错误处理静态文件、到压缩 HTTP 响应等等。路由函数可以通过向 HTTP 客户端返回一些响应来结束 HTTP“请求 - 响应”周期，而中间件函数*通常是*对请求或响应执行某些操作，然后调用“栈”里的下一个函数，可能是其他中间件或路由处理器。中间件的调用顺序由应用开发者决定。
 
-> **备注：** 中间件可以执行任何操作，运行任何代码，更改请求和响应对象，也可以**结束“请求 - 响应”周期**。如果它没有结束循环，则必须调用 `next()` 将控制传递给下一个中间件函数（否则请求将成为悬挂请求）。
+> [!NOTE]
+> 中间件可以执行任何操作，运行任何代码，更改请求和响应对象，也可以**结束“请求 - 响应”周期**。如果它没有结束循环，则必须调用 `next()` 将控制传递给下一个中间件函数（否则请求将成为悬挂请求）。
 
 大多数应用会使用**第三方**中间件来简化常见的 web 开发任务，比如 cookie、会话、用户身份验证、访问请求 `POST` 和 JSON 数据，日志记录等。参见 [Express 团队维护的中间件包列表](https://www.expressjs.com.cn/resources/middleware.html)（包含受欢迎的第三方包）。NPM 有提供其他 Express 包。
 
@@ -326,7 +336,8 @@ app.use(logger('dev'));
 ...
 ```
 
-> **备注：** 中间件和路由函数是按声明顺序调用的。一些中间件的引入顺序很重要（例如，如果会话中间件依赖于 cookie 中间件，则必须先添加 cookie 处理器）。绝大多数情况下要先调用中间件后设置路由，否则路由处理器将无法访问中间件的功能。
+> [!NOTE]
+> 中间件和路由函数是按声明顺序调用的。一些中间件的引入顺序很重要（例如，如果会话中间件依赖于 cookie 中间件，则必须先添加 cookie 处理器）。绝大多数情况下要先调用中间件后设置路由，否则路由处理器将无法访问中间件的功能。
 
 可以自己编写中间件函数，这是基本技能（仅仅为了创建错误处理代码也需要）。中间件函数和路由处理回调之间的**唯一**区别是：中间件函数有第三个参数 `next`，在中间件不会结束请求周期时应调用这个 `next`（它包含中间件函数调用后应调用的**下一个**函数）。
 
@@ -356,7 +367,8 @@ app.get("/", a_middleware_function);
 app.listen(3000);
 ```
 
-> **备注：** 上面代码中单独声明了中间件函数，并把它设置为回调。之前是把路由处理函数在使用时声明为回调。在 JavaScript 中，两种方法都可行。
+> [!NOTE]
+> 上面代码中单独声明了中间件函数，并把它设置为回调。之前是把路由处理函数在使用时声明为回调。在 JavaScript 中，两种方法都可行。
 
 请参阅 Express 文档中关于 [使用](https://www.expressjs.com.cn/guide/using-middleware.html) 和 [开发](https://www.expressjs.com.cn/guide/writing-middleware.html) Express 中间件的内容。
 
@@ -415,9 +427,11 @@ app.use((err, req, res, next) => {
 
 Express 内建了错误处理机制，可以协助处理 app 中没有被处理的错误。默认的错误处理中间件函数在中间件函数栈的末尾。如果一个错误传递给 `next()` 而没有用错误处理器来处理它，内建处理机制将启动，栈跟踪的错误将回写给客户端。
 
-> **备注：** 生产环境中不保留栈跟踪轨迹。可将环境变量 `NODE_ENV` 设置为 `'production'` 来运行所需的生产环境。
+> [!NOTE]
+> 生产环境中不保留栈跟踪轨迹。可将环境变量 `NODE_ENV` 设置为 `'production'` 来运行所需的生产环境。
 
-> **备注：** HTTP 404 和其他“错误”状态码不作为错误处理。可使用中间件来自行处理这些状态。更多信息请参阅 Express 文档 [FAQ](https://www.expressjs.com.cn/starter/faq.html#如何处理-404-响应)。
+> [!NOTE]
+> HTTP 404 和其他“错误”状态码不作为错误处理。可使用中间件来自行处理这些状态。更多信息请参阅 Express 文档 [FAQ](https://www.expressjs.com.cn/starter/faq.html#如何处理-404-响应)。
 
 更多信息请参阅 Express 文档 [错误处理](https://www.expressjs.com.cn/guide/error-handling.html)。
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md b/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md
index bb7d0331ac2a30..be19277ba6bbe0 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md
@@ -49,7 +49,8 @@ Express 应用可以使用 Node 支持的所有数据库（Express 本身不支
 
 使用 ORM 的好处是：程序员可以继续用 JavaScript 对象的思维而不用转向数据库语义的思维。在（同一个或不同网站）使用不同数据库时尤为明显。使用 ORM 还可以更方便地对数据进行验证和检查。
 
-> **备注：** 使用 ODM / ORM 通常可以降低开发和维护成本！除非你非常熟悉本地查询语言，或者项目对性能要求很高，否则强烈推荐使用 ODM。
+> [!NOTE]
+> 使用 ODM / ORM 通常可以降低开发和维护成本！除非你非常熟悉本地查询语言，或者项目对性能要求很高，否则强烈推荐使用 ODM。
 
 ### 我应该使用哪种 ORM/ODM ?
 
@@ -73,7 +74,8 @@ NPM 站点上有许多 ODM / ORM 解决方案（另请参阅 NPM 站点上的 [o
 
 这种 ODM 和数据库的结合方式在 Node 社区中非常流行，一定程度上是因为文档存储和查询系统与 JSON 十分相似，因此 JavaScript 开发人员会非常熟悉。
 
-> **备注：** 使用 Mongoose 无需事先了解 MongoDB，但是部分 [Mongoose 文档](http://mongoosejs.com/docs/guide.html) 对于熟悉 MongoDB 的朋友会更易于使用和理解。
+> [!NOTE]
+> 使用 Mongoose 无需事先了解 MongoDB，但是部分 [Mongoose 文档](http://mongoosejs.com/docs/guide.html) 对于熟悉 MongoDB 的朋友会更易于使用和理解。
 
 下面将介绍如何为 [LocalLibrary 网站](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website) 定义和访问 Mongoose 模式和模型。
 
@@ -91,17 +93,20 @@ NPM 站点上有许多 ODM / ORM 解决方案（另请参阅 NPM 站点上的 [o
 
 下图还展示了模型之间的关系以及重复度（Multiplicity）。重复度就是图中两框间连线两端的数字，表示两个模型之间存在的关系的数量（最大值和最小值）。例如，`Book` 框和 `Genre` 框之间有连线说明二者之间存在关系，`Book` 模型端的数字（0..\*）表示一个种类必包括零种或多种藏书（多少都可以），而 `Genre` 端的数字表示一种藏书可以有零个或多个种类。
 
-> **备注：** 正如下文 [Mongoose 入门](#) 中所讲，通常应该把定义文档/模型关系的字段置于同一模型中（仍可通过在搜索相关 `_id` 来回寻模型间的关系）。以下的 Book 模式中定义了 Book/Genre 和 Book/Author 关系，BookInstance 模式中定义了 Book/BookInstance 关系。这样做是简便起见，但稍存歧义，让这些字段存在于其他模式中也是可以的。
+> [!NOTE]
+> 正如下文 [Mongoose 入门](#) 中所讲，通常应该把定义文档/模型关系的字段置于同一模型中（仍可通过在搜索相关 `_id` 来回寻模型间的关系）。以下的 Book 模式中定义了 Book/Genre 和 Book/Author 关系，BookInstance 模式中定义了 Book/BookInstance 关系。这样做是简便起见，但稍存歧义，让这些字段存在于其他模式中也是可以的。
 
 ![Mongoose Library Model with correct cardinality](library_website_-_mongoose_express.png)
 
-> **备注：** 下面是一段入门知识，讲解如何定义和使用模型。请在阅读时想想将如何构建上图中的模型。
+> [!NOTE]
+> 下面是一段入门知识，讲解如何定义和使用模型。请在阅读时想想将如何构建上图中的模型。
 
 ## Mongoose 入门
 
 这一段将简要介绍如何将 Mongoose 连接到 MongoDB 数据库，如何定义模式和模型，以及如何进行基本查询。
 
-> **备注：** 本入门受到 npm 上的 [Mongoose 快速入门](https://www.npmjs.com/package/mongoose) 和 [Mongoose 官方文档](http://mongoosejs.com/docs/guide.html) 的“深度影响”。
+> [!NOTE]
+> 本入门受到 npm 上的 [Mongoose 快速入门](https://www.npmjs.com/package/mongoose) 和 [Mongoose 官方文档](http://mongoosejs.com/docs/guide.html) 的“深度影响”。
 
 ### 安装 Mongoose 和 MongoDB
 
@@ -113,7 +118,8 @@ npm install mongoose
 
 安装 Mongoose 会添加所有依赖项，包括 MongoDB 数据库驱动程序，但不会安装 MongoDB 本身。要安装 MongoDB 服务器，可以 [点击下载](https://www.mongodb.com/download-center) 各操作系统的安装程序在本地安装。也可以使用云端 MongoDB 实例。
 
-> **备注：** 本教程选用 mLab 提供的 [沙箱级](https://mlab.com/plans/pricing/) 云端“数据库即服务”（Database as a Service，DBaaS）。它适用于开发环境，且部署过程与操作系统无关（DBaaS 也适用于生产环境）。
+> [!NOTE]
+> 本教程选用 mLab 提供的 [沙箱级](https://mlab.com/plans/pricing/) 云端“数据库即服务”（Database as a Service，DBaaS）。它适用于开发环境，且部署过程与操作系统无关（DBaaS 也适用于生产环境）。
 
 ### 连接到 MongoDB
 
@@ -137,7 +143,8 @@ db.on("error", console.error.bind(console, "MongoDB 连接错误："));
 
 可以用 `mongoose.connection` 取得默认的 `Connection` 对象。一旦连接，`Connection` 实例将触发打开事件。
 
-> **备注：** 可以使用 `mongoose.createConnection()` 创建其他连接。该函数与 `connect()` 的参数（数据库 URI，包括主机地址、数据库名、端口、选项等）一致，并返回一个 `Connection` 对象。
+> [!NOTE]
+> 可以使用 `mongoose.createConnection()` 创建其他连接。该函数与 `connect()` 的参数（数据库 URI，包括主机地址、数据库名、端口、选项等）一致，并返回一个 `Connection` 对象。
 
 ### 定义和添加模型
 
@@ -145,7 +152,8 @@ db.on("error", console.error.bind(console, "MongoDB 连接错误："));
 
 `mongoose.model()` 方法将模式“编译”为模型。模型就可以用来查找、创建、更新和删除特定类型的对象。
 
-> **备注：** MongoDB 数据库中，每个模型都映射至一组文档。这些文档包含 `Schema` 模型定义的字段名/模式类型。
+> [!NOTE]
+> MongoDB 数据库中，每个模型都映射至一组文档。这些文档包含 `Schema` 模型定义的字段名/模式类型。
 
 #### 定义模式
 
@@ -185,7 +193,8 @@ const SomeModel = mongoose.model("SomeModel", SomeModelSchema);
 
 第一个参数是为模型所创建集合的别名（Mongoose 将为 SomeModel 模型创建数据库集合），第二个参数是创建模型时使用的模式。
 
-> **备注：** 定义模型类后，可以使用它们来创建、更新或删除记录，以及通过查询来获取所有记录或特定子集。我们将在以下“[使用模型](#)”部分展示，包括创建视图的情况。
+> [!NOTE]
+> 定义模型类后，可以使用它们来创建、更新或删除记录，以及通过查询来获取所有记录或特定子集。我们将在以下“[使用模型](#)”部分展示，包括创建视图的情况。
 
 #### 模式类型（字段）
 
@@ -260,7 +269,8 @@ const breakfastSchema = new Schema({
 
 虚拟属性是可以获取和设置、但不会保存到 MongoDB 的文档属性。getter 可用于格式化或组合字段，而 setter 可用于将单个值分解为多个值从而便于存储。文档中的示例，从名字和姓氏字段构造（并解构）一个全名虚拟属性，这比每次在模板中使用全名更简单，更清晰。
 
-> **备注：** 我们将使用库中的一个虚拟属性，用路径和记录的 `_id` 来为每个模型记录定义唯一的 URL。
+> [!NOTE]
+> 我们将使用库中的一个虚拟属性，用路径和记录的 `_id` 来为每个模型记录定义唯一的 URL。
 
 更多信息请参阅 [虚拟属性](http://mongoosejs.com/docs/guide.html#virtuals)（Mongoose 英文文档）。
 
@@ -336,7 +346,8 @@ Athlete.find({ sport: "Tennis" }, "name age", function (err, athletes) {
 
 若像上述代码那样指定回调，则查询将立即执行。搜索完成后将调用回调。
 
-> **备注：** Mongoose 中所有回调都使用 `callback(error, result)` 模式。如果查询时发生错误，则参数 `error` 将包含错误文档，`result` 为 `null`。如果查询成功，则 `error`为 `null`，查询结果将填充至 `result` 。
+> [!NOTE]
+> Mongoose 中所有回调都使用 `callback(error, result)` 模式。如果查询时发生错误，则参数 `error` 将包含错误文档，`result` 为 `null`。如果查询成功，则 `error`为 `null`，查询结果将填充至 `result` 。
 
 若未指定回调，则 API 将返回 [Query](http://mongoosejs.com/docs/api.html#query-js) 类型的变量。可以使用该查询对象来构建查询，随后使用 `exec()` 方法执行（使用回调）。
 
@@ -382,7 +393,8 @@ Athlete.find()
 - [`findOne()`](http://mongoosejs.com/docs/api.html#query_Query-findOne)：查找与指定条件匹配的第一个文档。
 - [`findByIdAndRemove()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove)、[`findByIdAndUpdate()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate)、[`findOneAndRemove()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove)、 [`findOneAndUpdate()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate)：通过 `id` 或条件查找单个文档，并进行更新或删除。以上是更新和删除记录的便利函数。
 
-> **备注：** 还有一个 [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count) 方法，可获取匹配条件的项目的个数。在只期望获得记录的个数而不想获取实际的记录时可以使用。
+> [!NOTE]
+> 还有一个 [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count) 方法，可获取匹配条件的项目的个数。在只期望获得记录的个数而不想获取实际的记录时可以使用。
 
 查询还能做更多。请参阅 [查询](http://mongoosejs.com/docs/queries.html)（Mongoose 英文文档）。
 
@@ -448,7 +460,8 @@ Story.findOne({ title: "司马迁是历史学家" })
   });
 ```
 
-> **备注：** 目光敏锐的读者可能会注意到，新的简介添加了作者，但并没有添加到 `stories` 数组中。那么怎样才能得到指定作者的所有简介？考虑把作者添加到 `stories` 数组中，但会导致作者和简介相关信息的要在两处进行维护。
+> [!NOTE]
+> 目光敏锐的读者可能会注意到，新的简介添加了作者，但并没有添加到 `stories` 数组中。那么怎样才能得到指定作者的所有简介？考虑把作者添加到 `stories` 数组中，但会导致作者和简介相关信息的要在两处进行维护。
 >
 > 更好的方法是获取作者的 `_id`，然后使用 `find()` 在所有简介的作者字段中搜索。
 >
@@ -500,9 +513,11 @@ SomeModel.find(callback_function);
 
 本教程将使用 [mLab](https://mlab.com/welcome/) 免费版“[沙盒](https://mlab.com/plans/pricing/)”云数据库。这一版不适用于生产环境，因为它没有冗余设计，但非常适合进行开发和原型设计。选用它是因为它免费且易于设置，并且 mLab 是一家流行的数据库服务供应商，也是生产环境数据库的理想选择（撰写本文时（2019 年 1 月），国内流行的云数据库解决方案有 [阿里云](https://www.aliyun.com/product/mongodb?spm=5176.10695662.778269.1.2e5b8cb3Hw9HUr)、[腾讯云](https://cloud.tencent.com/product/mongodb)、[百度云](https://cloud.baidu.com/product/mongodb.html) 等）。
 
-> **备注：** 也可以下载并安装 [对应系统的安装包](https://www.mongodb.com/download-center)，设置本地版 MongoDB 数据库。多数指令和使用云数据库是一样的，除了连接时数据库的 URL。
+> [!NOTE]
+> 也可以下载并安装 [对应系统的安装包](https://www.mongodb.com/download-center)，设置本地版 MongoDB 数据库。多数指令和使用云数据库是一样的，除了连接时数据库的 URL。
 
-> **备注：** 目前 mLab 网站在国内速度很慢，若遇到无法正常注册或登录的情况可以考虑本地版 MongoDB。
+> [!NOTE]
+> 目前 mLab 网站在国内速度很慢，若遇到无法正常注册或登录的情况可以考虑本地版 MongoDB。
 
 首先 [用 mLab 创建一个账户](https://mlab.com/signup/)（这是免费的，只需要输入基本联系信息，并同意服务条款）。
 
@@ -620,7 +635,8 @@ module.exports = mongoose.model("Author", AuthorSchema);
 
 我们还为 `AuthorSchema` 声明了一个 "`url`" 虚拟属性，以返回模型特定实例的绝对 URL。在模板中需要获取特定作者的链接时可使用该属性。
 
-> **备注：** 有必要将 URL 声明为虚拟属性，因为这样，项目的 URL 就只需在一处进行更改。
+> [!NOTE]
+> 有必要将 URL 声明为虚拟属性，因为这样，项目的 URL 就只需在一处进行更改。
 > 此时，使用此 URL 的链接还不能工作，因为目前还没有设置任何路由，无法处理特定模型实例的代码。这个问题下节再讲。
 
 模块的最后对模型进行导出。
@@ -714,7 +730,9 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 
 1. 下载（或新建）文件 [populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)，保存在 express-locallibrary-tutorial 目录（`package.json` 所在位置） 。
 
-   > **备注：** 无需深究 [populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)，它只是为数据库添加一些示例数据。
+   > [!NOTE]
+   >
+   > 无需深究 [populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)，它只是为数据库添加一些示例数据。
    >
    > 译注：针对 node.js3.0 及以后版本，mlab 使用“mongodb+srv://”链接而非“mongodb://”，请对[populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)源码酌情修改，否则会报错而添加数据失败。
 
@@ -732,7 +750,8 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 
 4. 该脚本应一路运行至完成，并在终端中记录所创建的项目。
 
-> **备注：** 打开 [mLab](https://mlab.com/home) 数据库主页面，现在藏书、作者、种类和藏书副本的集合应该都可以打开了，也可以查看单个文档。
+> [!NOTE]
+> 打开 [mLab](https://mlab.com/home) 数据库主页面，现在藏书、作者、种类和藏书副本的集合应该都可以打开了，也可以查看单个文档。
 
 ## 小结
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
index e1f6f30af28938..712e4eb4b71cf1 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
@@ -82,7 +82,8 @@ router.get("/about", (req, res) => {
 module.exports = router;
 ```
 
-> **备注：** 上面的路由处理回调直接定义在了路由函数中。LocalLibrary 的回调将定义在单独的控制器模块中。
+> [!NOTE]
+> 上面的路由处理回调直接定义在了路由函数中。LocalLibrary 的回调将定义在单独的控制器模块中。
 
 要在主应用中使用该路由模块，首先应 `require` 它（**wiki.js**），然后对 Express 应用对象调用 `use()`（指定路径‘/wiki’），即可将其添加到中间件处理路径。
 
@@ -106,7 +107,8 @@ router.get("/about", (req, res) => {
 
 该回调有三个参数（通常命名为：`req`、`res`、`next`），分别是：HTTP 请求对象、HTTP 响应、中间件链中的下一个函数。
 
-> **备注：** 路由函数就是 [Express 中间件](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware)，这意味着它们必须（通过响应）结束请求，否则必须调用链中的 `next` 函数。上述示例使用`send()` 完成了请求，所以没有使用 `next` 参数（参数表中将其省略）。
+> [!NOTE]
+> 路由函数就是 [Express 中间件](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware)，这意味着它们必须（通过响应）结束请求，否则必须调用链中的 `next` 函数。上述示例使用`send()` 完成了请求，所以没有使用 `next` 参数（参数表中将其省略）。
 >
 > 上述路由函数只需要一个回调，可以根据需要指定任意数量的回调参数，或一个回调函数数组。每个函数都将加入中间件链，并且将按添加顺序调用（若有回调完成请求则中止当前周期）。
 
@@ -145,7 +147,8 @@ app.get(/.*fish$/, (req, res) => {
 });
 ```
 
-> **备注：** LocalLibrary 的大部分路由都只使用字符串，很少用字符串模式和正则表达式。接下来将讨论“路由参数”。
+> [!NOTE]
+> LocalLibrary 的大部分路由都只使用字符串，很少用字符串模式和正则表达式。接下来将讨论“路由参数”。
 
 ### 路由参数
 
@@ -163,7 +166,8 @@ app.get("/users/:userId/books/:bookId", (req, res) => {
 
 路由参数名必须由“单词字符”（/`[A-Za-z0-9_]`/）组成。
 
-> **备注：** URL `/book/create` 会匹配 `/book/:bookId` 这样的路由（将提取值为'`create`' 的 '`bookId`'）。第一个与传入 URL 相匹配的路由会被使用，因此 `/book/create` 的路由处理器必须定义在 `/book/:bookId` 路由之前，才能妥善处理。
+> [!NOTE]
+> URL `/book/create` 会匹配 `/book/:bookId` 这样的路由（将提取值为'`create`' 的 '`bookId`'）。第一个与传入 URL 相匹配的路由会被使用，因此 `/book/create` 的路由处理器必须定义在 `/book/:bookId` 路由之前，才能妥善处理。
 
 以上就是使用路由所有的预备知识。Express 文档中还能找到更多信息：[基础路由](http://expressjs.com/en/starter/basic-routing.html) 和 [路由指南](http://expressjs.com/en/guide/routing.html)。以下是 LocalLibrary 路由和控制器的设置过程。
 
@@ -182,7 +186,8 @@ app.get("/users/:userId/books/:bookId", (req, res) => {
 
 与之相反，其他 URL 是用于处理特定文档/模型实例的，它们会将项目的标识嵌入 URL（上文的 `<id>`）。可以用路径参数来提取嵌入的信息，并传递给路由处理器（后续章节中用于动态获取数据库中的信息）。通过在 URL 中嵌入信息，使得每种类型的所有资源只需要一个路由（例如，所有藏书副本的显示操作只需要一个路由）。
 
-> **备注：** Express 可以通过任何方式构造 URL，可以在 URL 正文中嵌入信息（如上文），或使用 URL `GET` 参数（例如 `/book/?id=6`）。无论哪种方法，URL 都应保持整洁、合理且易读（另请参阅 [W3C 相关建议](https://www.w3.org/Provider/Style/URI)）。
+> [!NOTE]
+> Express 可以通过任何方式构造 URL，可以在 URL 正文中嵌入信息（如上文），或使用 URL `GET` 参数（例如 `/book/?id=6`）。无论哪种方法，URL 都应保持整洁、合理且易读（另请参阅 [W3C 相关建议](https://www.w3.org/Provider/Style/URI)）。
 
 下面我们为上述所有 URL 创建路由处理器回调函数和路由代码。
 
@@ -201,7 +206,8 @@ app.get("/users/:userId/books/:bookId", (req, res) => {
     genreController.js
 ```
 
-> **备注：** 上述四个文件可到 GitHub 下载 [dummyControllers.zip](https://github.com/roy-tian/mdn-examples/blob/master/server/express-locallibrary-tutorial/controllers/dummyControllers.zip)。（链接已失效，请移步英文版查看具体代码）
+> [!NOTE]
+> 上述四个文件可到 GitHub 下载 [dummyControllers.zip](https://github.com/roy-tian/mdn-examples/blob/master/server/express-locallibrary-tutorial/controllers/dummyControllers.zip)。（链接已失效，请移步英文版查看具体代码）
 
 ### `Author` 控制器
 
@@ -283,7 +289,8 @@ exports.index = (req, res) => { res.send('未实现：站点首页'); };
     catalog.js
 ```
 
-> **备注：** 可到 GitHub 下载完整的 [catalog.js](https://raw.githubusercontent.com/roy-tian/mdn-examples/master/server/express-locallibrary-tutorial/routes/catalog.js)。
+> [!NOTE]
+> 可到 GitHub 下载完整的 [catalog.js](https://raw.githubusercontent.com/roy-tian/mdn-examples/master/server/express-locallibrary-tutorial/routes/catalog.js)。
 
 **/routes/catalog.js** 中有以下代码：
 
@@ -350,7 +357,8 @@ router.get("/", (req, res) => {
 });
 ```
 
-> **备注：** 这是我们第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 响应方法。它会使路由重定向到指定的页面，默认发送 HTTP 状态代码“302 Found”。可以根据需要更改返回的状态代码、设置绝对或相对路径。
+> [!NOTE]
+> 这是我们第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 响应方法。它会使路由重定向到指定的页面，默认发送 HTTP 状态代码“302 Found”。可以根据需要更改返回的状态代码、设置绝对或相对路径。
 
 ### 更新 app.js
 
@@ -372,7 +380,8 @@ app.use("/users", usersRouter);
 app.use("/catalog", catalogRouter); // 将 catalog 路由添加进中间件链
 ```
 
-> **备注：** 我们将图书编目模块添加到了 `'/catalog'` 路径，该路径是 catalog 模块中所有路径的前缀。例如，访问藏书列表 的 URL 为：`/catalog/books/`。
+> [!NOTE]
+> 我们将图书编目模块添加到了 `'/catalog'` 路径，该路径是 catalog 模块中所有路径的前缀。例如，访问藏书列表 的 URL 为：`/catalog/books/`。
 
 大功告成。LocalLibrary 网站所需的所有 URL 的路由和框架函数都已准备完毕。
 
@@ -392,7 +401,8 @@ app.use("/catalog", catalogRouter); // 将 catalog 路由添加进中间件链
   DEBUG=express-locallibrary-tutorial:* npm run devstart
   ```
 
-> **备注：** 以上命令只对 bash 有效，要在 Windows 上使用 bash，最简单的方法就是安装 Git。（详情参见[教程 2 相关译注](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website#使用应用生成器)）
+> [!NOTE]
+> 以上命令只对 bash 有效，要在 Windows 上使用 bash，最简单的方法就是安装 Git。（详情参见[教程 2 相关译注](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website#使用应用生成器)）
 
 接下来浏览上面一些 URL，确保不会收到错误页面（HTTP 404）。可以尝试以下示例：
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
index b58be3d0cd143e..cc704f7a656f5f 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -33,17 +33,20 @@ slug: Learn/Server-side/Express_Nodejs/skeleton_website
 
 以下内容介绍了应用生成器的用法，以及视图 / CSS 的一些不同选项。还介绍了骨架站点的组织结构。最后，我们将介绍站点的运行方法，从而对其进行验证。
 
-> **备注：** Express 应用生成器并非唯一的 Express 应用生成工具，而且生成项目的结构也不是组织文件和目录的唯一可行方式。但生成项目具有易于扩展和理解的模块化结构。最简单的 Express 应用请参阅 [Hello world 示例](http://expressjs.com.cn/starter/hello-world.html)（Express 镜像站）。
+> [!NOTE]
+> Express 应用生成器并非唯一的 Express 应用生成工具，而且生成项目的结构也不是组织文件和目录的唯一可行方式。但生成项目具有易于扩展和理解的模块化结构。最简单的 Express 应用请参阅 [Hello world 示例](http://expressjs.com.cn/starter/hello-world.html)（Express 镜像站）。
 
 ## 使用应用生成器
 
-> **备注：** 本教程中命令操作基于 Linux/macOS 的 bash 终端，Windows 的命令提示符 cmd/PowerShell 与 bash 的概念和用法略有不同，为在 Windows 上获得一致的体验，可以：
+> [!NOTE]
+> 本教程中命令操作基于 Linux/macOS 的 bash 终端，Windows 的命令提示符 cmd/PowerShell 与 bash 的概念和用法略有不同，为在 Windows 上获得一致的体验，可以：
 >
 > - 自己弄懂 cmd/PowerShell 与 bash 的区别。
 > - 使用 [Git](https://git-scm.com/) 或 [MSYS2](http://www.msys2.org/) 为 Windows 提供的 bash。（推荐）
 > - 使用 Windows 的 Linux 子系统。（到 Microsoft Store 中搜索“Linux”，安装喜欢的版本（Ubuntu 18.04、openSUSE 42、Debian 等），仅限 Windows 10，使用前需要先安装 [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10)）
 
-> **备注：** 你可能已经发现国内用 NPM 太慢了！这是由众所周知的不可抗力造成的。可用淘宝提供的 [CNPM](https://npm.taobao.org/) 代替之，功能和用法基本一致（只是不能上传自己的包）。
+> [!NOTE]
+> 你可能已经发现国内用 NPM 太慢了！这是由众所周知的不可抗力造成的。可用淘宝提供的 [CNPM](https://npm.taobao.org/) 代替之，功能和用法基本一致（只是不能上传自己的包）。
 
 你应该已经安装好了生成器，它是 [设置 Node 开发环境](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 的一部分。可以使用 NPM 来安装全局的生成器，如下所示：
 
@@ -84,13 +87,15 @@ express
 
 还可以使用 `--view` 选择视图（模板）引擎，并且/或者使用 `--css` 选择 CSS 生成引擎。
 
-> **备注：** 不推荐用 `--hogan`、`--ejs`、`--hbs` 等参数选用模板引擎。请使用 `--view`（或 `-v`）。
+> [!NOTE]
+> 不推荐用 `--hogan`、`--ejs`、`--hbs` 等参数选用模板引擎。请使用 `--view`（或 `-v`）。
 
 ### 我应该用哪个视图引擎？
 
 Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](https://www.npmjs.com/package/ejs)、[Hbs](http://github.com/donpark/hbs)、[Pug](https://pugjs.org/api/getting-started.html) (Jade)、[Twig](https://www.npmjs.com/package/twig) 和 [Vash](https://www.npmjs.com/package/vash)，缺省选项是 Jade。Express 本身也支持大量其他模板语言，[开箱即用](https://github.com/expressjs/express/wiki#template-engines)。
 
-> **备注：** 如果要使用生成器不支持的模板引擎，请参阅 [在 Express 中使用模板引擎](http://expressjs.com.cn/guide/using-template-engines.html)（Express 文档）和所选视图引擎的文档。
+> [!NOTE]
+> 如果要使用生成器不支持的模板引擎，请参阅 [在 Express 中使用模板引擎](http://expressjs.com.cn/guide/using-template-engines.html)（Express 文档）和所选视图引擎的文档。
 
 一般来说，你应该选择一个大而全的模板引擎，可以尽快进入生产状态。就像你选择其他组件一样！选用模板引擎需要考虑以下因素：
 
@@ -108,7 +113,8 @@ Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](h
   - 支持异步操作和流。
   - 可以在同时在客户端和服务器上使用。如果一款模板引擎可以在客户端使用，那么就使在客户端托管数据并完成所有（或大多数）渲染成为可能。
 
-> **备注：** 互联网上有许多资源，可帮助你选择合适的视图/模板引擎。
+> [!NOTE]
+> 互联网上有许多资源，可帮助你选择合适的视图/模板引擎。
 
 本项目选用 [Pug](https://pugjs.org/api/getting-started.html) 模板引擎（Jade 是它不久前的曾用名），它是最流行的 Express / JavaScript 模板语言之一，且对 Express 生成器 [开箱即用](https://github.com/expressjs/express/wiki#template-engines)。
 
@@ -116,7 +122,8 @@ Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](h
 
 Express 应用生成器支持最常见的 CSS 引擎：[LESS](http://lesscss.org/), [SASS](http://sass-lang.com/), [Compass](http://compass-style.org/), [Stylus](http://stylus-lang.com/)。
 
-> **备注：** CSS 的一些限制导致某些任务完成起来非常困难。CSS 引擎提供了更强大的语法来定义 CSS，然后将定义编译为纯 CSS 供浏览器使用。
+> [!NOTE]
+> CSS 的一些限制导致某些任务完成起来非常困难。CSS 引擎提供了更强大的语法来定义 CSS，然后将定义编译为纯 CSS 供浏览器使用。
 
 与模板引擎一样，你也应该使用样式表引擎，这可以最大化团队生产力。本项目将使用原始 CSS（默认的），因为我们对 CSS 要求不复杂，没有必要使用引擎。
 
@@ -156,7 +163,8 @@ Express 应用生成器支持最常见的 CSS 引擎：[LESS](http://lesscss.org
 
 一个 Express 应用就配置成功了，它托管于 localhost:3000。
 
-> **备注：** 指定 DEBUG 变量可启用控制台日志记录/调试。例如，当你访问上面的页面时，你会看到像这样的调试输出： ![用 npm start 启动这个应用](npm-start.png) 直接通过 `npm start` 命令启动应用也可以，但不会看到调试信息。
+> [!NOTE]
+> 指定 DEBUG 变量可启用控制台日志记录/调试。例如，当你访问上面的页面时，你会看到像这样的调试输出： ![用 npm start 启动这个应用](npm-start.png) 直接通过 `npm start` 命令启动应用也可以，但不会看到调试信息。
 
 ## 文件改动时重启服务器
 
@@ -199,7 +207,8 @@ DEBUG=express-locallibrary-tutorial:* npm run devstart
 
 现在，如果编辑项目中的任何文件，服务器将自动重启（或者可以随时使用 rs 命令来重启）。查看更新后的页面需要点击浏览器的“刷新”按钮。
 
-> **备注：** 这里必须使用“`npm run <scriptname>`”命令，而不是 `npm start`，因为“start”本质上是映射到脚本的一条 NPM 命令。我们可以在 `start` 脚本中替换它，但我们只想在开发期间使用 nodemon，因此有必要创建一条新的脚本命令。
+> [!NOTE]
+> 这里必须使用“`npm run <scriptname>`”命令，而不是 `npm start`，因为“start”本质上是映射到脚本的一条 NPM 命令。我们可以在 `start` 脚本中替换它，但我们只想在开发期间使用 nodemon，因此有必要创建一条新的脚本命令。
 
 ## 生成的项目
 
@@ -327,7 +336,8 @@ var indexRouter = require("./routes/index");
 var usersRouter = require("./routes/users");
 ```
 
-> **备注：** 此时我们刚刚导入了模块；还没有真正使用过其中的路由（稍后会使用）。
+> [!NOTE]
+> 此时我们刚刚导入了模块；还没有真正使用过其中的路由（稍后会使用）。
 
 下面我们用导入的 `express` 模块来创建 `app` 对象，然后使用它来设置视图（模板）引擎。设置引擎分两步：首先设置 '`views`' 以指定模板的存储文件夹（此处设为子文件夹 **/views**）。然后设置 '`view engine`' 以指定模板库（本例中设为“pug” ）。
 
@@ -357,7 +367,8 @@ app.use("/", indexRouter);
 app.use("/users", usersRouter);
 ```
 
-> **备注：** 这些路径（`'/'` 和 '`/users'`）将作为导入路由的前缀。如果导入的模块 `users` 在 `/profile` 定义了路由，则可以在 `/users/profile` 访问该路由。我们将在后面的文章中，详细讨论路由。
+> [!NOTE]
+> 这些路径（`'/'` 和 '`/users'`）将作为导入路由的前缀。如果导入的模块 `users` 在 `/profile` 定义了路由，则可以在 `/users/profile` 访问该路由。我们将在后面的文章中，详细讨论路由。
 
 最后一个中间件为错误和 HTTP 404 响应添加处理方法。
 
@@ -407,7 +418,8 @@ module.exports = router;
 
 该路由定义了一个回调，在检测到正确模式的 HTTP `GET` 请求时将调用该回调。正确模式即导入模块时指定的路由（'`/users`'）加该模块（'`/`'）中定义的任何内容。换句话说，在收到 `/users/` URL 时使用此路由。
 
-> **备注：** 用 node 启动该应用并访问 <http://localhost:3000/users/>，浏览器会返回一条消息：'respond with a resource'。
+> [!NOTE]
+> 用 node 启动该应用并访问 <http://localhost:3000/users/>，浏览器会返回一条消息：'respond with a resource'。
 
 值得注意的是，上述回调函数有第三个参数 '`next`'，因此它是一个中间件函数，而不是简单的路由回调。`next` 参数暂时还用不到，在 `'/'` 路径中添加多个路由处理器时才会涉及。
 
diff --git a/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
index 81ff58cccb2644..30bc0f681bc786 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -63,7 +63,8 @@ slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
 
 如果实在进行不下去，可以参考 [Github](https://github.com/mdn/express-locallibrary-tutorial) 上的完整版本。
 
-> **备注：** 本教程中的代码，已在特定版本（项目的 [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) 所列版本）的 node、Express 及其他模组的环境下通过测试。
+> [!NOTE]
+> 本教程中的代码，已在特定版本（项目的 [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) 所列版本）的 node、Express 及其他模组的环境下通过测试。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
index d00f05a81fa546..45073059d99a8b 100644
--- a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
@@ -57,7 +57,8 @@ slug: Learn/Server-side/First_steps/Client-Server_overview
 
 你可以通过点击一个链接或者在网站进行一次搜索（比如搜索引擎的首页）做出一次简单的 GET 请求。比如，当你在 MDN 上进行一次对“客户端概览”词条的搜索时，HTTP 请求就被发送出去了，你将会看到正如下面一样被展示出来的文本信息（展示出来的信息不一定是相同的，因为其中一部分信息还取决于你的浏览器）。
 
-> **备注：** HTTP 消息的格式是在“网络标准”（[RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！
+> [!NOTE]
+> HTTP 消息的格式是在“网络标准”（[RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！
 
 #### 请求
 
@@ -185,13 +186,15 @@ X-Cache-Info: not cacheable; request wasn't a GET or HEAD
 Content-Length: 0
 ```
 
-> **备注：** 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如<http://web-sniffer.net/>）或者使用浏览器扩展例如 [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/)。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 [Network Monitor](/zh-CN/docs/Tools/Network_Monitor) 工具)。
+> [!NOTE]
+> 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如<http://web-sniffer.net/>）或者使用浏览器扩展例如 [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/)。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 [Network Monitor](/zh-CN/docs/Tools/Network_Monitor) 工具)。
 
 ## 静态网站
 
 静态网站是指每当请求一个特定的资源时，会从服务器返回相同的硬编码内容。因此，例如，如果你在 `/static/myproduct1.html` 有一个关于产品的页面，则该页面将返回给每个用户。如果你添加另一个类似的产品到你的网站，你将需要添加另一个页面（例如 `myproduct2.html` ）等。这可能开始变得非常低效：当你访问数千个产品页面时会发生什么——你会在每个页面（基本的页面模板，结构等等）上重复很多代码，如果你想改变页面结构的任何东西，比如添加一个新的“相关产品”部分，必须单独更改每个页面。
 
-> **备注：** 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择，然而随着页面数量的增加，它们的维护成本也会很高。
+> [!NOTE]
+> 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择，然而随着页面数量的增加，它们的维护成本也会很高。
 
 让我们回顾一下在上一篇文章中看到的静态网站架构图，看看它是如何工作的。
 
@@ -268,7 +271,8 @@ urlpatterns = [
 ]
 ```
 
-> **备注：** 在`url()`函数中的第一个参数可能看起来有点古怪 (比如`r'^junior/$`) 因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”。
+> [!NOTE]
+> 在`url()`函数中的第一个参数可能看起来有点古怪 (比如`r'^junior/$`) 因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”。
 
 Web 框架还可以轻松地使用查看函数，从数据库获取信息。我们的数据结构是在模型中定义的，模型是定义要存储在底层数据库中的字段的 Python 类。如果我们有一个名为 Team 的模型，其中有一个“_team_type_”字段，那么我们可以使用一个简单的查询语法来取回所有具有特定类型的球队。
 
diff --git a/files/zh-cn/learn/server-side/first_steps/introduction/index.md b/files/zh-cn/learn/server-side/first_steps/introduction/index.md
index df29a835450563..cccd418f490b0c 100644
--- a/files/zh-cn/learn/server-side/first_steps/introduction/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/introduction/index.md
@@ -80,7 +80,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站
 
 同样的，当客户端和服务器端代码使用框架时，它们的领域是不同的，因此框架也会不同。客户端 web 框架简化布局和演示任务，然而服务器端 web 框架提供大量的普通 Web 服务功能，不然的话你可能需要自己来实现这些功能（比如支持会话、支持用户和身份验证、简单的数据访问、模板库等）。
 
-> **备注：** 客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。
+> [!NOTE]
+> 客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。
 >
 > 相反的，你应该从来没有考虑过不使用框架而直接编写 web 应用程序的服务器端组件——实现一个重要的功能比如 HTTP 服务器真的很难直接从头开始用 Python 语言构建，但是一些用 Python 语言写的 web 框架，比如 Django 提供了开箱即用的功能，同时还包含其他很多有用的工具。
 
@@ -104,7 +105,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站
 
 因为数据被放在数据库中，因此更加容易被分享和更新到其他商业系统（比如，当产品在网上或者实体店卖掉之后，商店可以更新它的存货清单数据库）
 
-> **备注：** 你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处：
+> [!NOTE]
+> 你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处：
 >
 > 1. 打开[亚马逊](https://www.amazon.com)或者其他一些电子商务网站。
 > 2. 搜索一系列关键词，然后注意到页面结构并没有发生改变，尽管搜索结果发生了改变。
@@ -118,7 +120,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站
 
 对用户习惯的更深层分析可以被用来预测用户的兴趣和更加深度地定制化回应和通知，比如，提供一张清单来展示曾经去过的地方，或者在地图上标识你可能想去的非常受欢迎的地点。
 
-> **备注：** 谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。
+> [!NOTE]
+> 谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。
 >
 > 谷歌搜索结果基于之前的搜索进行优化。
 >
@@ -139,7 +142,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站
 - 社交网站，比如 Facebook 允许用户完全控制他们自己的数据，但是只允许他们的朋友和家人查看和评论这些数据。用户决定谁可以看到他们的数据，并且通过扩展，决定谁的数据出现在他们的反馈里面——授权是用户体验里面的一个核心部分！
 - 此时此刻你所访问的网站也控制着内容访问：文章对所有人都是可视的，但是只有已经登录的用户可以编辑内容。为了试验一下，你可以点击一下页面上方的**编辑**按钮——如果你已经登录了的话，将会展示出编辑界面；如果你还没有登录，你会被导航到注册界面。
 
-> **备注：** 想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？
+> [!NOTE]
+> 想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？
 
 ### 存储会话和状态信息
 
@@ -147,7 +151,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站
 
 这也就允许，比如说，一个网站知道一个用户曾经登录过并且展示他们邮箱的链接或者订单历史，或者可能存储一个简单游戏的状态来确保用户可以再次访问网站然后从上次留下来的地方继续。
 
-> **备注：** 访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如[The Age](http://www.theage.com.au/)）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子
+> [!NOTE]
+> 访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如[The Age](http://www.theage.com.au/)）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子
 
 ### 通知和通讯
 
@@ -159,7 +164,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站
 - 亚马逊定期的向你发送产品邮件并且向你推荐和你曾经买过的产品很相似的产品或者是他们觉得你可能感兴趣的产品。
 - 一个网站的服务器可能向网站管理员发送警告消息来警告他们服务器内存不足或者可疑的用户行为。
 
-> **备注：** 最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。
+> [!NOTE]
+> 最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。
 
 ### 数据分析
 
@@ -167,7 +173,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站
 
 比如，亚马逊和谷歌都基于过去的搜索（和购物）信息来为产品打广告。
 
-> **备注：** 如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。
+> [!NOTE]
+> 如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。
 >
 > 也可以看一下你收到的广告是什么类型的——你或许会看到你在其他网站查看的商品。Facebook 为突出内容和广告的算法或许还很令人疑惑，但是很明显的，它是依据你的喜好、品味和习惯的！
 
diff --git a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
index f6fa534a95fd4d..499b2c2988e081 100644
--- a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md
@@ -142,7 +142,8 @@ web 框架经常提供模板系统。这些允许你制定输出文档的结构
 
 比如，Django 模板允许你通过使用“双重花括号”（如 `\{{ variable_name }}`）来指定变量，当页面被渲染出来时，这些变量会被从视图函数传递过来的值代替。模板系统也会提供表达支持（通过语法 `{% expression %}` 来实现），这样就允许模板进行一些简单的操作比如迭代传递给模板的值列表。
 
-> **备注：** 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。
+> [!NOTE]
+> 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。
 
 下面的代码片段展示了它们如何工作的。下面的内容接着从上一个部分而来的“youngest team”实例，HTML 模板通过视图函数传进一个叫做 youngest_teams 的值列表。在 HTML 骨架中我们有一个初步检查 youngest_teams 变量是否存在的表示，然后会在 for 循环里面进行迭代。在每一次迭代中模板会以列表元素的形式展示队伍的 team_name 值。
 
@@ -188,7 +189,8 @@ web 框架经常提供模板系统。这些允许你制定输出文档的结构
 
 如果你是一个完全的初学者，那么你可能会基于“易于学习”来选择你的框架。除了语言本身的“易于学习”之外，帮助新手的高质量的文档/教程和一个活跃的社区是你最有价值的资源。在后续课程中，我们选取了 Django（Python）和 Express（Node/Javascript）来编写我们的实例，主要因为它们很容易上手并且有强大的支持。
 
-> **备注：** 我们可以去 [Django](https://www.djangoproject.com/) (Python) 和 [Express](https://expressjs.com/) (Node/JavaScript) 的主页上去看看它们的文档和社区。
+> [!NOTE]
+> 我们可以去 [Django](https://www.djangoproject.com/) (Python) 和 [Express](https://expressjs.com/) (Node/JavaScript) 的主页上去看看它们的文档和社区。
 >
 > 1. 导航至主页 (上面已给出链接)
 >
@@ -208,7 +210,8 @@ web 框架经常提供模板系统。这些允许你制定输出文档的结构
 
 下面的服务器端框架体现了现在最受欢迎的几个。它们有你需要用来提升效率的一切东西——它们是开源的，一直保持发展的态势，有着富有激情的社区，社区里的人创作出文档并且在讨论板上帮助使用者，并且被使用在很多高质量的网站上。当然还有很多其他非常棒的框架，你可以使用搜索引擎探索一下。
 
-> **备注：** （部分）解释来自框架的官方网站！
+> [!NOTE]
+> （部分）解释来自框架的官方网站！
 
 ### Django (Python)
 
diff --git a/files/zh-cn/learn/server-side/first_steps/website_security/index.md b/files/zh-cn/learn/server-side/first_steps/website_security/index.md
index 2ac3b9a07541ff..73c399f1f8913d 100644
--- a/files/zh-cn/learn/server-side/first_steps/website_security/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/website_security/index.md
@@ -34,7 +34,8 @@ slug: Learn/Server-side/First_steps/Website_security
 
 文章的剩余部分列举了一些常见威胁的细节以及用来保护站点的一些简单措施。
 
-> **备注：** 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。
+> [!NOTE]
+> 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。
 
 ## 站点安全威胁
 
@@ -44,7 +45,8 @@ slug: Learn/Server-side/First_steps/Website_security
 
 XSS 是一个术语，用来描述一类允许攻击者通过网站将客户端脚本代码注入到其他用户的浏览器中的攻击手段。由于注入到浏览器的代码来自站点，其是可信赖的，因此可以做类似将该用户用于站点认证的 cookie 发送给攻击者的事情。一旦攻击者拿到了这个 cookie，他们就可以登陆到站点，就好像他们就是那个用户，可以做任何那个用户能做的事情。根据站点的不同，这些可能包括访问他们的信用卡信息、查看联系人、更改密码等。
 
-> **备注：** XSS 攻击在历史上较其他类型更为常见。
+> [!NOTE]
+> XSS 攻击在历史上较其他类型更为常见。
 
 有两种主要的方法可以让站点将注入的脚本返回到浏览器——通常被称做 反射型 和 持久型 XSS 攻击。
 
@@ -80,7 +82,8 @@ SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WH
 
 避免此种攻击的方法就是确保任何传递给 SQL 查询语句的用户数据都无法更改查询的本来用意。有种方式便是将用户输入中任何在 SQL 语句中有特殊含义的字符进行转义。
 
-> **备注：** SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \\' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。
+> [!NOTE]
+> SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \\' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。
 
 在下面的语句中我们对 ' 字符进行了转义。SQL 会将**粗体**显示的整段字符串解释为 name(这个 name 很古怪，但至少是没有危害的！)
 
@@ -90,7 +93,8 @@ SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo W
 
 Web 框架通常会为你进行这种转义操作。例如 Django，可以确保任何传递给查询集合 (model 查询) 的用户数据都是已经转义过的。
 
-> **备注：** 本章节引用了大量来自 [Wikipedia](https://en.wikipedia.org/wiki/SQL_injection) 的内容。
+> [!NOTE]
+> 本章节引用了大量来自 [Wikipedia](https://en.wikipedia.org/wiki/SQL_injection) 的内容。
 
 ### 跨站请求伪造 (CSRF)
 
@@ -102,7 +106,8 @@ CSRF 攻击允许恶意用户在另一个用户不知情的情况下利用其身
 
 最终的结果就是任何已登陆到站点的用户在点击了提交按钮后都会进行这个交易。John 发财啦！
 
-> **备注：** 这里的诀窍是，John 不需要访问那些用户的 cookie（或者说身份信息）——用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。
+> [!NOTE]
+> 这里的诀窍是，John 不需要访问那些用户的 cookie（或者说身份信息）——用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。
 
 杜绝此类攻击的一种方式是在服务器端要求每个 POST 请求都包含一个用户特定的由站点生成的密钥 ( 这个密钥值可以由服务器在发送用来传输数据的网页表单时提供）。这种方式可以使 John 无法创建自己的表单，因为他必须知道服务器提供给那个用户的密钥值。即使他找出了那个密钥值，并为那个用户创建了表单，他也无法用同样的表单来攻击其他的所有用户。
 
@@ -124,7 +129,8 @@ Web 框架通常都会包含一些类似的 CSRF 防范技巧。
 
 当 Web 应用信任来自浏览器的数据时，上述章节里提到的大多数攻击利用手段才能成功。无论你做什么其他的事情来提升你的网站的安全性能，在将信息展示在浏览器之前、在使用 SQL 语句进行查询之前、在传递给一个操作系统或者文件系统之前，你应该过滤掉所有的用户源信息。
 
-> **警告：** 在你可以了解到的有关网站安全大多数 课程之中，最重要的就是**不要相信来自浏览器的数据**。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。
+> [!WARNING]
+> 在你可以了解到的有关网站安全大多数 课程之中，最重要的就是**不要相信来自浏览器的数据**。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。
 
 你可以采取一些简单的步骤：
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index 422fb2ea1cc0f0..26c78a92ddfe9b 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -35,7 +35,8 @@ JavaScript 框架是现代前端 web 开发的重要部分，为开发人员提
 
 ## React 教程
 
-> **备注：** React 教程最后测试于 2020 年 5 月，基于 React/ReactDOM 16.13.1 和 create-react-app 3.4.1.
+> [!NOTE]
+> React 教程最后测试于 2020 年 5 月，基于 React/ReactDOM 16.13.1 和 create-react-app 3.4.1.
 >
 > 如果你需要确认你的代码与我们的版本区别，你可以在我们的[todo-react repository](https://github.com/mdn/todo-react)仓库找到 React 应用示例代码的完整版本。想要获取当前最新的版本，查看<https://mdn.github.io/todo-react-build/>.
 
@@ -56,7 +57,8 @@ JavaScript 框架是现代前端 web 开发的重要部分，为开发人员提
 
 ## Ember 教程
 
-> **备注：** Ember 教程最后测试于 2020 年 5 月，基于 Ember/Ember CLI version 3.18.0.
+> [!NOTE]
+> Ember 教程最后测试于 2020 年 5 月，基于 Ember/Ember CLI version 3.18.0.
 >
 > 如果你需要确认你的代码与我们的版本区别，你可以在[ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc)找到 Ember 应用示例代码的完整版本。想要获取当前最新的版本，查看<https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> （这还包含了本教程未覆盖到的一些额外的特性）。
 
@@ -75,7 +77,8 @@ JavaScript 框架是现代前端 web 开发的重要部分，为开发人员提
 
 ## Vue 教程
 
-> **备注：** Vue 教程最后测试于 2020 年 5 月，基于 Vue 2.6.11.
+> [!NOTE]
+> Vue 教程最后测试于 2020 年 5 月，基于 Vue 2.6.11.
 >
 > 如果你需要确认你的代码与我们的版本区别，你可以在[todo-vue repository](https://github.com/mdn/todo-vue)找到 Vue 应用示例代码的完整版本。想要获取当前当前最新的版本，查看<https://mdn.github.io/todo-vue/dist/>.
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
index ca9a0e58abf232..7fd804b418e514 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
@@ -186,7 +186,8 @@ JavaScript 框架都提供了一种更具以*声明性*的方式地编写用户
 
 由于此模块中的每个框架都有一个庞大而活跃的社区，因此每个框架的体系都提供了工具来改善开发体验。这些工具让诸如添加测试（确保你的应用表现应有的行为）和 linting（确保你的代码没有错误且排版统一）变得更加容易。
 
-> **备注：** 如果你想了解有关 Web 工具概念的更多详细信息，请阅读[客户端工具概述](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。
+> [!NOTE]
+> 如果你想了解有关 Web 工具概念的更多详细信息，请阅读[客户端工具概述](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。
 
 ### 组件化
 
@@ -256,7 +257,8 @@ _可以使用_ JavaScript 和浏览器的原生功能来实现路由功能，但
 | Vue     | IE9+                                       | 基于 HTML  | 基于 HTML、JSX、Pug    |
 | Ember   | 现代的浏览器（IE9+ in Ember version 2.18） | Handlebars | Handlebars、TypeScript |
 
-> **备注：** 我们描述为“基于 HTML”的 DSL 没有官方名称。它们并不是真正的 DSL，但它们是非标准的 HTML，所以我们认为它们值得强调。
+> [!NOTE]
+> 我们描述为“基于 HTML”的 DSL 没有官方名称。它们并不是真正的 DSL，但它们是非标准的 HTML，所以我们认为它们值得强调。
 
 参考来源：
 
@@ -295,7 +297,8 @@ Vue 团队[详尽地将 Vue 与其他流行框架进行了比较](https://vuejs.
 
 本模块中介绍的所有框架都支持服务端渲染和客户端渲染。给 React 的 [Next.js](https://nextjs.org/)，给 Vue 的 [Nuxt.js](https://nuxtjs.org/)（是的，这很令人困惑，它们没有关系），给 Ember 的 [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot) 还有给 Angular 的 [Angular Universal](https://angular.io/guide/universal) 。
 
-> **备注：** 有些 SSR 解决方案是由社区编写和维护的，而有些是由框架的维护者提供的“官方”解决方案。
+> [!NOTE]
+> 有些 SSR 解决方案是由社区编写和维护的，而有些是由框架的维护者提供的“官方”解决方案。
 
 ### 静态站点生成器
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
index ec2f0218ee1d66..52a13f7280d664 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
@@ -89,7 +89,8 @@ export default function Todo() {
 }
 ```
 
-> **备注：** 组件必须返回一些东西。如果你试图渲染一个不返回任何东西的组件，React 会在浏览器中提示出现错误。
+> [!NOTE]
+> 组件必须返回一些东西。如果你试图渲染一个不返回任何东西的组件，React 会在浏览器中提示出现错误。
 
 到现在为止，我们的 `Todo` 组件已经完成，我们可以使用它了。在 `App.js` 中，在文件顶部添加以下代码，导入 `Todo` 组件：
 
@@ -378,7 +379,8 @@ function FilterButton(props) {
 export default FilterButton;
 ```
 
-> **备注：** 你可能会注意到，我们在这里犯了和第一次在 `<Todo />` 组件中同样的错误，即每个按钮将是相同的。没关系！我们将在以后修复这个组件，具体在 [Back to the filter buttons](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)。
+> [!NOTE]
+> 你可能会注意到，我们在这里犯了和第一次在 `<Todo />` 组件中同样的错误，即每个按钮将是相同的。没关系！我们将在以后修复这个组件，具体在 [Back to the filter buttons](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)。
 
 ## 导入所有组件
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index 4f2271d24e9c32..0f68c759c537c5 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -75,7 +75,8 @@ const header = (
 );
 ```
 
-> **备注：** 上一个代码段中的括号并非 JSX 的一部分，它对你的应用程序没有任何影响，括号只是用来向你（和你的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：
+> [!NOTE]
+> 上一个代码段中的括号并非 JSX 的一部分，它对你的应用程序没有任何影响，括号只是用来向你（和你的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：
 >
 > ```jsx-nolint
 > const header = <header>
@@ -138,7 +139,8 @@ npx create-react-app moz-todo-react
 - 创建一系列结构化的子文件夹和文件，奠定应用程序的基础架构；
 - 如果你的电脑上安装了 git 的话，顺便帮你把 git 仓库也建好。
 
-> **备注：** 如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 `--use-npm` **:**
+> [!NOTE]
+> 如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 `--use-npm` **:**
 >
 > ```bash
 > npx create-react-app moz-todo-react --use-npm
@@ -232,11 +234,13 @@ import "./App.css";
 
 第二句代码引入了 `'./logo.svg'`。注意文件路径以 `./` 开头、由 `.svg` 尾——表明这是一个本地文件，并且它不是 JavaScript 文件。
 
-> **备注：** 我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 `package.json` 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。
+> [!NOTE]
+> 我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 `package.json` 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。
 
 第三行引入了我们的组件所需的 CSS 文件。与上面两句不同，这里没有将引入的内容赋给任何变量、也没有用到 `from` 指令。请注意这种特殊的语法并非原生 JS 的语法——它源自前端资源打包工具 webpack，而 create-react-app 正是基于 webpack 配置而来的。
 
-> **备注：** 译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 `import` 语句来声明对非 JS 内容的引用。
+> [!NOTE]
+> 译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 `import` 语句来声明对非 JS 内容的引用。
 >
 > 详情参见 webpack 官方和社区，截止目前 (2020 年下旬)，webpack 仍是现代前端工作中必不可少的技能之一。
 
@@ -321,7 +325,8 @@ serviceWorker.unregister();
 
 上述所有都告诉 React 我们想把 `App` 组件作为 root 或者第一个组件来渲染我们的 React App。
 
-> **备注：** 在 JSX 中，React 组件和 HTML 元素必须有关闭斜杠（`/`），如 `<App />`，如果我们写 `<App>` 或者 `<img>` 将会报错。
+> [!NOTE]
+> 在 JSX 中，React 组件和 HTML 元素必须有关闭斜杠（`/`），如 `<App />`，如果我们写 `<App>` 或者 `<img>` 将会报错。
 
 [Service workers](/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers) 能让我们的 App 离线运行，但它不在本篇文章的范围中，你可以删除第 5 行和第 9 到 12 行。
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index 0aa15d411536d5..1741e0aed7d78e 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -7,7 +7,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_
 
 假设我们的任务是在 React 中创建一个概念验证——一个允许用户添加、编辑和删除他们想做的任务的应用程序，并且在不删除任务的情况下将其标记为完成。这篇文章将引导你完成基本的 `App` 组件结构和样式，为以后添加的单个组件定义和交互性做好准备。
 
-> **备注：** 如果你需要对照我们的版本检查你的代码，你可以在我们的 [todo-react 仓库](https://github.com/mdn/todo-react) 中找到一个完成版本的 React 应用代码。关于运行中的实时版本，参见 <https://mdn.github.io/todo-react-build/>.
+> [!NOTE]
+> 如果你需要对照我们的版本检查你的代码，你可以在我们的 [todo-react 仓库](https://github.com/mdn/todo-react) 中找到一个完成版本的 React 应用代码。关于运行中的实时版本，参见 <https://mdn.github.io/todo-react-build/>.
 
 <table>
   <tbody>
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
index 0edd22ce520fb9..2cce75a22e2029 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
@@ -98,7 +98,8 @@ npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app
 
 让我们开始吧。
 
-> **备注：** 在创建我们的前几个组件的过程中，我们还将学习不同的组件间通信技术以及每种技术的优缺点。
+> [!NOTE]
+> 在创建我们的前几个组件的过程中，我们还将学习不同的组件间通信技术以及每种技术的优缺点。
 
 ## 提取我们的过滤器组件
 
@@ -143,7 +144,8 @@ npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app
    <FilterButton {filter} />
    ```
 
-> **备注：** 请记住，当 HTML 属性名称和变量匹配时，可以用 `{变量}` 来替换它们。这就是为什么我们可以将 `<FilterButton filter={filter} />` 替换为 `<FilterButton {filter} />`。
+> [!NOTE]
+> 请记住，当 HTML 属性名称和变量匹配时，可以用 `{变量}` 来替换它们。这就是为什么我们可以将 `<FilterButton filter={filter} />` 替换为 `<FilterButton {filter} />`。
 
 到目前为止一切顺利！现在让我们试试该应用程序。你会注意到，当你点击过滤器按钮时，它们会被选中，并且样式会相应更新。但是我们有一个问题：待办事项没有被正确过滤。这是因为 `filter` 变量通过属性从 `Todos` 组件向下流动到 `FilterButton` 组件，但是在 `FilterButton` 组件中发生的更改不会向上流回其父组件——默认情况下，数据绑定是单向的。让我们看看解决这个问题的方法。
 
@@ -270,7 +272,8 @@ export let onclick = (clicked) => {};
 
 为了创建自定义事件，我们将使用 `createEventDispatcher` 程序。它将返回一个 `dispatch()` 函数，允许我们发出自定义事件。当你发出一个事件时，你需要传递事件的名称，以及（可选地）包含要传递给每个监听器的附加信息的对象。这些附加数据将在事件对象的 `detail` 属性中。
 
-> **备注：** Svelte 中的自定义事件与常规 DOM 事件共享相同的 API。此外，你可以通过指定 `on:event` 通过将事件向上传递给父组件，而无需指定处理器。
+> [!NOTE]
+> Svelte 中的自定义事件与常规 DOM 事件共享相同的 API。此外，你可以通过指定 `on:event` 通过将事件向上传递给父组件，而无需指定处理器。
 
 我们将编辑我们的 `Todo` 组件，以发出一个 `remove` 事件，并传递被删除的待办事项作为附加信息。
 
@@ -491,7 +494,8 @@ on:keydown={(e) => e.key === 'Escape' && onCancel()}
    </div>
    ```
 
-   > **备注：** 我们可以进一步将其拆分为两个不同的组件，一个用于编辑待办事项，另一个用于显示待办事项。最终，这取决于你是否对在单个组件中处理这种复杂性感到舒适。你还应考虑进一步拆分的话，是否能够在其他的上下文中重用此组件。
+   > [!NOTE]
+   > 我们可以进一步将其拆分为两个不同的组件，一个用于编辑待办事项，另一个用于显示待办事项。最终，这取决于你是否对在单个组件中处理这种复杂性感到舒适。你还应考虑进一步拆分的话，是否能够在其他的上下文中重用此组件。
 
 2. 要使更新功能起作用，我们必须在 `Todos` 组件 中处理 `update` 事件。在 `Todos` 组件的 `<script>` 部分中添加以下处理器：
 
@@ -518,7 +522,8 @@ on:keydown={(e) => e.key === 'Escape' && onCancel()}
 
 正如你所见，在 Svelte 中实现“属性向下传递、事件向上传播”模式很容易。尽管如此，对于简单的组件，`bind` 可能是一个不错的选择；Svelte 允许你自由选择。
 
-> **备注：** Svelte 提供了更高级的机制来在组件之间共享信息：[Context API](https://svelte.dev/docs/svelte#setcontext) 和 [Store](https://svelte.dev/docs/svelte-store)。Context API 提供了一种机制，使组件及其后代组件能够在不传递数据和函数作为属性或分发大量事件的情况下进行通信。Store 允许你在不具有层次关系的组件之间共享响应式数据。我们将在本系列的后续内容中介绍 Store。
+> [!NOTE]
+> Svelte 提供了更高级的机制来在组件之间共享信息：[Context API](https://svelte.dev/docs/svelte#setcontext) 和 [Store](https://svelte.dev/docs/svelte-store)。Context API 提供了一种机制，使组件及其后代组件能够在不传递数据和函数作为属性或分发大量事件的情况下进行通信。Store 允许你在不具有层次关系的组件之间共享响应式数据。我们将在本系列的后续内容中介绍 Store。
 
 ## 到目前为止的代码
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md
index 035e2b2846acd3..ce0159222a67d1 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md
@@ -89,7 +89,8 @@ npx degit opensas/mdn-svelte-tutorial/08-next-steps
 
 默认情况下，如果你使用 `npx degit sveltejs/template my-svelte-project` 来创建一个新的应用程序，Svelte 将使用 [rollup](https://rollupjs.org/) 来打包模块。
 
-> **备注：** 也有一个官方的模板使用 [webpack](https://webpack.js.org/)，还有许多[由社区维护的插件](https://github.com/sveltejs/integrations#bundler-plugins)适用于其他的打包工具。
+> [!NOTE]
+> 也有一个官方的模板使用 [webpack](https://webpack.js.org/)，还有许多[由社区维护的插件](https://github.com/sveltejs/integrations#bundler-plugins)适用于其他的打包工具。
 
 在 `package.json` 文件中，你可以看到 `build` 和 `dev` 脚本只是调用了 rollup：
 
@@ -153,7 +154,8 @@ export default {
 
 从 Web 服务器的角度来看，Svelte 应用程序只是一堆 HTML、CSS 和 JavaScript 文件。你只需要一个能够提供静态文件的 Web 服务器，就可以运行 Svelte 应用程序，这意味着你有很多选择。让我们来看几个例子。
 
-> **备注：** 下面的内容不仅适用于 Svelte 应用程序，还适用于任何需要构建步骤的客户端静态网站。
+> [!NOTE]
+> 下面的内容不仅适用于 Svelte 应用程序，还适用于任何需要构建步骤的客户端静态网站。
 
 ### 使用 Vercel 进行部署
 
@@ -193,7 +195,8 @@ export default {
 
 你还可以从 [GitHub](https://github.com/)、[GitLab](https://about.gitlab.com/) 或 [BitBucket](https://bitbucket.org/product) [导入 Svelte git 项目](https://vercel.com/import/svelte)到 Vercel 中。
 
-> **备注：** 你可以通过 `npm i -g vercel` 全局安装 Vercel，这样你就不必使用 `npx` 来运行它了。
+> [!NOTE]
+> 你可以通过 `npm i -g vercel` 全局安装 Vercel，这样你就不必使用 `npx` 来运行它了。
 
 ### 自动部署到 GitLab Pages
 
@@ -219,7 +222,8 @@ export default {
    git push -u origin main
    ```
 
-   > **备注：** 你可以使用 [git 协议](https://git-scm.com/book/zh/v2/服务器上的-Git-协议#_git_协议)替代 `https`，它更快速，而且无需每次访问远程仓库时输入用户名和密码。要使用 git 协议，你需要[创建一个 SSH 密钥对](https://docs.gitlab.cn/jh/user/ssh.html#生成-ssh-密钥对)。你的远程仓库 URL 将是这样的：`git@gitlab.com:[你的用户名]/mdn-svelte-todo.git`。
+   > [!NOTE]
+   > 你可以使用 [git 协议](https://git-scm.com/book/zh/v2/服务器上的-Git-协议#_git_协议)替代 `https`，它更快速，而且无需每次访问远程仓库时输入用户名和密码。要使用 git 协议，你需要[创建一个 SSH 密钥对](https://docs.gitlab.cn/jh/user/ssh.html#生成-ssh-密钥对)。你的远程仓库 URL 将是这样的：`git@gitlab.com:[你的用户名]/mdn-svelte-todo.git`。
 
 按照以上步骤初始化本地 git 仓库，然后将远程仓库设置为 GitLab 上的仓库，接下来将所有文件提交到本地 git 仓库，然后将它们推送到 GitLab 上的远程仓库。
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
index 59ea2702d3ce97..8263205a40d93b 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
@@ -48,7 +48,8 @@ Svelte 更贴近传统的 Web 开发模型（HTML、CSS、JS），它只是对 H
 
 现阶段的缺点是它目前仍在发展中——和其它成熟框架相比，它的生态环境较受到了工具、支持、插件、使用模式等等限制，工作机会也比较少。但它的优点应该足够让你感兴趣并去探索它。
 
-> **备注：** Svelte 具有[官方的 TypeScript 支持](https://svelte.dev/docs/typescript)。我们将在之后的教学系列中讲到它。
+> [!NOTE]
+> Svelte 具有[官方的 TypeScript 支持](https://svelte.dev/docs/typescript)。我们将在之后的教学系列中讲到它。
 
 我们鼓励你完成 [Svelte 教程](https://learn.svelte.dev/)来快速了解基本的概念，然后再回到此教学系列来学习如何建构一些更深入的东西。
 
@@ -64,7 +65,8 @@ Svelte 可以被用来开发一小块界面或整个应用程序。你也可以
 
 Svelte 团队推出了 [SvelteKit](https://kit.svelte.dev)，这是一个使用 Svelte 构建 Web 应用程序的框架。它包含了现代 Web 框架的特性，如基于文件系统的路由、服务器端渲染（SSR）、页面特定的渲染模式、离线支持等。关于 SvelteKit 的更多信息，可以参考[官方教程](https://learn.svelte.dev)和[文档](https://kit.svelte.dev/docs)。
 
-> **备注：** 作为构建 Web 应用的推荐 Svelte 框架，SvelteKit 旨在取代 [Sapper](https://sapper.svelte.dev/)。
+> [!NOTE]
+> 作为构建 Web 应用的推荐 Svelte 框架，SvelteKit 旨在取代 [Sapper](https://sapper.svelte.dev/)。
 
 Svelte 也可以通过 [Svelte Native](https://svelte-native.technology) 用于移动开发。
 
@@ -106,7 +108,8 @@ npm install
 npm run dev
 ```
 
-> **备注：** 不用太惊讶 degit 做了这么多事情——它其实就只是让你可以从 git 仓库下载和解压缩最新版本的内容。使用它比起使用 `git clone` 要快得多，因为它并不会下载整个仓库的历史记录，也不会创建完整的本地克隆。
+> [!NOTE]
+> 不用太惊讶 degit 做了这么多事情——它其实就只是让你可以从 git 仓库下载和解压缩最新版本的内容。使用它比起使用 `git clone` 要快得多，因为它并不会下载整个仓库的历史记录，也不会创建完整的本地克隆。
 
 执行 `npm run dev` 之后，Svelte 将会编译和建构你的应用程序。它会在 `localhost:8080` 上运行本地服务器。当你对源代码文件做了变动，Svelte 将会侦测到文件更新并自动地重新编译和刷新应用程序。你的浏览器将显示如下内容：
 
@@ -182,7 +185,8 @@ moz-todo-svelte
 <!-- 标记（零或多个 HTML 元素）放这 -->
 ```
 
-> **备注：** 有关组件格式的更多信息，请查看 [Svelte 组件文档](https://svelte.dev/docs/svelte-components)。
+> [!NOTE]
+> 有关组件格式的更多信息，请查看 [Svelte 组件文档](https://svelte.dev/docs/svelte-components)。
 
 接着我们来看入门模板中的 `src/App.svelte` 文件，你应该会看到以下内容：
 
@@ -288,7 +292,8 @@ Svelte 也支持一些标签，像是 `{#if...}`、`{#each...}` 和 `{#await...}
 
 编译应用程序时，Svelte 会将 `h1` 的样式定义改变为 `h1.svelte-1tky8bj` 并更改每一个在此组件中的 `<h1>` 元素为 `<h1 class="svelte-1tky8bj">`，如此就能让该组件取得所需的样式。
 
-> **备注：** 你也可以使用 `:global()` 修饰符覆盖此行为并且应用全局选择器的样式（请参见 [Svelte `<style>` 文档](https://svelte.dev/docs/svelte-components#style)以了解更多信息）。
+> [!NOTE]
+> 你也可以使用 `:global()` 修饰符覆盖此行为并且应用全局选择器的样式（请参见 [Svelte `<style>` 文档](https://svelte.dev/docs/svelte-components#style)以了解更多信息）。
 
 ## 做一些小改变
 
@@ -423,7 +428,8 @@ npm run dev
 
 假如你想要学习有关 git 和 GitHub 的更多信息，我们已经整理了一些有帮助的指南的链接列表——请参阅 [Git 和 GitHub](/zh-CN/docs/Learn/Tools_and_testing/GitHub)。
 
-> **备注：** 假如你只是想要下载文件而不是克隆 git 仓库，你可以使用 degit 工具，像这样——`npx degit opensas/mdn-svelte-tutorial`。你也可以用 `npx degit opensas/mdn-svelte-tutorial/01-getting-started` 来下载特定文件夹。Degit 不会创建本地 git 仓库，它只下载特定文件夹下的文件。
+> [!NOTE]
+> 假如你只是想要下载文件而不是克隆 git 仓库，你可以使用 degit 工具，像这样——`npx degit opensas/mdn-svelte-tutorial`。你也可以用 `npx degit opensas/mdn-svelte-tutorial/01-getting-started` 来下载特定文件夹。Degit 不会创建本地 git 仓库，它只下载特定文件夹下的文件。
 
 ### 使用 Svelte REPL
 
@@ -452,11 +458,13 @@ Svelte 的 REPL 功能却不只如此。它是一个在线工具，允许你建
 
 每当你在 REPL 中改变任何文件，Svelte 将会重新编译应用程序并更新结果（Result）标签。要分享你的应用程序，请直接分享其网址。例如，这是运行我们完整应用程序的 REPL 链接：<https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2>。
 
-> **备注：** 请注意在链接上标注 Svelte 版本的方式。当你在报告 Svelte 特定版本的问题时，这会非常有用。
+> [!NOTE]
+> 请注意在链接上标注 Svelte 版本的方式。当你在报告 Svelte 特定版本的问题时，这会非常有用。
 
 我们将会在每一篇文章的开头与结尾提供 REPL，所以你就能立刻和我们一起编写代码。
 
-> **备注：** 目前 REPL 无法正确处理文件夹名称。如果你按照 REPL 上的教程进行操作，只需在根文件夹中创建所有组件即可。然后在你看到代码中的路径时，例如 `import Todos from './components/Todos.svelte'`，只需要将它替换成类似 `import Todos from './Todos.svelte'` 这样的即可。
+> [!NOTE]
+> 目前 REPL 无法正确处理文件夹名称。如果你按照 REPL 上的教程进行操作，只需在根文件夹中创建所有组件即可。然后在你看到代码中的路径时，例如 `import Todos from './components/Todos.svelte'`，只需要将它替换成类似 `import Todos from './Todos.svelte'` 这样的即可。
 
 ## 到目前为止的代码
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
index 06004e31d981ea..7a4bc4ba8cc098 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
@@ -176,7 +176,8 @@ foo.bar = "baz";
 
 除非你紧接着使用 `obj = obj`，否则 Svelte 不会更新对 `obj.foo.bar` 的引用。这是因为 Svelte 无法跟踪对象引用，所以我们必须通过执行赋值操作，来明确告诉它 `obj` 已经改变了。
 
-> **备注：** 如果 `foo` 是顶级变量，你可以使用以下响应式语句轻松地告诉 Svelte 在 `foo` 更改时更新 `obj`：`$: foo, obj = obj`。通过这样做，我们将 `foo` 定义为依赖项，每当它更改时，Svelte 将运行 `obj = obj`。
+> [!NOTE]
+> 如果 `foo` 是顶级变量，你可以使用以下响应式语句轻松地告诉 Svelte 在 `foo` 更改时更新 `obj`：`$: foo, obj = obj`。通过这样做，我们将 `foo` 定义为依赖项，每当它更改时，Svelte 将运行 `obj = obj`。
 
 在我们的 `checkAllTodos()` 函数中，当我们运行：
 
@@ -219,7 +220,8 @@ const checkAllTodos = (completed) => {
 
 在这种情况下，我们使用 [`map()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 方法，它返回的结果是通过对数组中每个项执行给定的函数而生成的新数组。该函数使用[展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)返回每个待办事项的副本，并相应地更新了每个副本的 `completed` 属性。这个解决方案的额外好处是返回了具有新对象的新数组，从而完全避免了对原始 `todos` 数组的修改。
 
-> **备注：** Svelte 允许我们指定不同的选项来影响编译器的工作方式。 `<svelte:options immutable={true}/>` 选项告诉编译器你承诺不会修改任何对象。这允许它以更加激进的方式检查值是否已更改，并生成更简单和更高性能的代码。有关 `<svelte:options>` 的更多信息，请参阅 [Svelte 选项文档](https://svelte.dev/docs/special-elements#svelte-options)。
+> [!NOTE]
+> Svelte 允许我们指定不同的选项来影响编译器的工作方式。 `<svelte:options immutable={true}/>` 选项告诉编译器你承诺不会修改任何对象。这允许它以更加激进的方式检查值是否已更改，并生成更简单和更高性能的代码。有关 `<svelte:options>` 的更多信息，请参阅 [Svelte 选项文档](https://svelte.dev/docs/special-elements#svelte-options)。
 
 所有这些解决方案都涉及赋值操作，其中更新的变量位于等式的左侧。这些技术中的任何一种都将使 Svelte 注意到我们的 `todos` 数组已被修改。
 
@@ -464,7 +466,8 @@ const checkAllTodos = (completed) => {
 
 6. 再次打开你的应用程序，你将看到 `<input>` 字段在页面加载时获得焦点。
 
-> **备注：** 你可以查看 Svelte 文档中的其他[生命周期函数](https://svelte.dev/docs/svelte)，并在[交互式教程](https://learn.svelte.dev/tutorial/onmount)中看到它们的实际应用。
+> [!NOTE]
+> 你可以查看 Svelte 文档中的其他[生命周期函数](https://svelte.dev/docs/svelte)，并在[交互式教程](https://learn.svelte.dev/tutorial/onmount)中看到它们的实际应用。
 
 ## 使用 `tick()` 函数等待 DOM 更新
 
@@ -534,7 +537,8 @@ function onEdit() {
 
 3. 如果现在尝试，你将看到一切都按预期工作。
 
-> **备注：** 要查看另一个使用 `tick()` 的示例，请访问 [Svelte 教程](https://learn.svelte.dev/tutorial/tick)。
+> [!NOTE]
+> 要查看另一个使用 `tick()` 的示例，请访问 [Svelte 教程](https://learn.svelte.dev/tutorial/tick)。
 
 ## 使用 `use:action` 指令为 HTML 元素添加功能
 
@@ -548,7 +552,8 @@ node.addEventListener("focus", (event) => node.select());
 
 为了避免内存泄漏，我们还应该在节点销毁时调用 [`removeEventListener()`](/zh-CN/docs/Web/API/EventTarget/removeEventListener) 函数。
 
-> **备注：** 所有这些只是标准的 WebAPI 功能；这里没有任何内容是特定于 Svelte 的。
+> [!NOTE]
+> 所有这些只是标准的 WebAPI 功能；这里没有任何内容是特定于 Svelte 的。
 
 我们可以在我们的 `Todo` 组件中实现所有这些，每当我们将 `<input>` 添加或从 DOM 中移除时都必须执行这些操作。但是，我们必须非常小心，应当在节点添加到 DOM 后添加事件监听器，并在节点从 DOM 中移除之前删除监听器。此外，我们的解决方案不太可重用。
 
@@ -713,7 +718,8 @@ node.addEventListener("focus", (event) => node.select());
 
 6. 回去并再次尝试你的应用程序。此时，每当*编辑*按钮添加到 DOM 中时，`focusEditButton` action 就会执行，但只有当 `editButtonPressed` 标志为 `true` 时，它才会将焦点移到按钮上。
 
-> **备注：** 在这里，我们只是初步介绍了 action 的功能。action 还可以具有响应式参数，并且 Svelte 允许我们检测这些参数的任何更改。因此，我们可以添加与 Svelte 响应式系统良好集成的功能。如果想更详细地了解 action，请考虑查看 [Svelte 互动教程](https://learn.svelte.dev/tutorial/actions)或 [Svelte `use:action` 文档](https://svelte.dev/docs/element-directives#use-action)。
+> [!NOTE]
+> 在这里，我们只是初步介绍了 action 的功能。action 还可以具有响应式参数，并且 Svelte 允许我们检测这些参数的任何更改。因此，我们可以添加与 Svelte 响应式系统良好集成的功能。如果想更详细地了解 action，请考虑查看 [Svelte 互动教程](https://learn.svelte.dev/tutorial/actions)或 [Svelte `use:action` 文档](https://svelte.dev/docs/element-directives#use-action)。
 
 ## 组件绑定：使用 `bind:this={component}` 指令暴露组件方法和变量
 
@@ -841,7 +847,8 @@ node.addEventListener("focus", (event) => node.select());
 
 5. 回到你的应用程序。现在，如果删除任何待办事项，状态标题将获得焦点。突出显示待办事项数量的变化，无论是对于视觉用户还是对于屏幕阅读器用户都很有用。
 
-> **备注：** 你可能想知道为什么需要为组件绑定声明一个新变量。为什么不能直接调用 `TodosStatus.focus()`？这是因为应用可能同时有多个 `TodosStatus` 实例，因此需要引用特定实例的方法。这就是为什么需要指定变量来绑定特定实例。
+> [!NOTE]
+> 你可能想知道为什么需要为组件绑定声明一个新变量。为什么不能直接调用 `TodosStatus.focus()`？这是因为应用可能同时有多个 `TodosStatus` 实例，因此需要引用特定实例的方法。这就是为什么需要指定变量来绑定特定实例。
 
 ## 到目前为止的代码
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md
index f59debab8e8217..312bcfe250b53c 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md
@@ -106,7 +106,8 @@ svelte 还提供了一种非常直观的将 store 集成到其响应式系统中
    export const alert = writable("Welcome to the to-do list app!");
    ```
 
-> **备注：** store 可以在 Svelte 组件之外定义和使用，所以你可以按照自己的方式组织它们。
+> [!NOTE]
+> store 可以在 Svelte 组件之外定义和使用，所以你可以按照自己的方式组织它们。
 
 在上面的代码中，我们从 `svelte/store` 导入 `writable()` 函数，并使用它创建了名为 `alert` 的新 store，初始值为“Welcome to the to-do list app!”（欢迎来到待办事项列表应用程序！）。然后我们通过 `export` 导出该 store。
 
@@ -329,7 +330,8 @@ svelte 还提供了一种非常直观的将 store 集成到其响应式系统中
 
 我们可以在任何组件或 `.js` 文件中执行相同的操作。
 
-> **备注：** 在 Svelte 组件之外，你不能使用 `$store` 语法。这是因为 Svelte 编译器不会触及 Svelte 组件之外的任何内容。在这种情况下，你需要依赖于 `store.subscribe()` 和 `store.set()` 方法。
+> [!NOTE]
+> 在 Svelte 组件之外，你不能使用 `$store` 语法。这是因为 Svelte 编译器不会触及 Svelte 组件之外的任何内容。在这种情况下，你需要依赖于 `store.subscribe()` 和 `store.set()` 方法。
 
 ## 改进我们的 Alert 组件
 
@@ -530,7 +532,8 @@ Svelte 不会强制你以特定的方式组织状态管理；它只提供了工
 
 我们的待办事项列表应用程序并不特别复杂，因此我们不会将所有的修改方法移到中心位置。我们将保持它们原样，集中精力将待办事项持久化。
 
-> **备注：** 如果你正在 Svelte REPL 上遵循本指南进行操作，你将无法完成此步骤。出于安全原因，Svelte REPL 在沙箱环境中工作，不允许你访问 Web 存储，你将收到“The operation is insecure”错误。要跟着完成本部分，你需要克隆存储库并转到 `mdn-svelte-tutorial/06-stores` 文件夹，或者你可以使用 `npx degit opensas/mdn-svelte-tutorial/06-stores` 直接下载该文件夹的内容。
+> [!NOTE]
+> 如果你正在 Svelte REPL 上遵循本指南进行操作，你将无法完成此步骤。出于安全原因，Svelte REPL 在沙箱环境中工作，不允许你访问 Web 存储，你将收到“The operation is insecure”错误。要跟着完成本部分，你需要克隆存储库并转到 `mdn-svelte-tutorial/06-stores` 文件夹，或者你可以使用 `npx degit opensas/mdn-svelte-tutorial/06-stores` 直接下载该文件夹的内容。
 
 要实现将其内容保存到 Web 存储的自定义 store，我们需要一个执行以下操作的可写 store：
 
@@ -613,7 +616,8 @@ Svelte 不会强制你以特定的方式组织状态管理；它只提供了工
    <Todos bind:todos={$todos} />
    ```
 
-   > **备注：** 这是我们为了使用自定义存储所必须进行的唯一更改。`App.svelte` 完全不需要知道我们使用哪种类型的 store。
+   > [!NOTE]
+   > 这是我们为了使用自定义存储所必须进行的唯一更改。`App.svelte` 完全不需要知道我们使用哪种类型的 store。
 
 5. 现在再次运行你的应用程序。创建一些待办事项，然后关闭浏览器。你甚至可以停止 Svelte 服务器并重新启动它。当你重新访问该 URL 时，你的待办事项仍将存在。
 6. 你还可以在开发者工具的控制台中进行检查。在 Web 控制台中，输入命令 `localStorage.getItem('mdn-svelte-todo')`。对应用程序进行一些更改，比如按下“全部取消”按钮，然后再次检查 Web 存储的内容。你将会看到类似以下的内容：
@@ -652,11 +656,13 @@ Svelte store 提供了一种非常简单、轻量但功能强大的方式，以
    >
    ```
 
-   > **备注：** 双花括号不是特殊的 Svelte 语法。它只是将字面的 JavaScript 对象作为参数传递给 fly 过渡效果。
+   > [!NOTE]
+   > 双花括号不是特殊的 Svelte 语法。它只是将字面的 JavaScript 对象作为参数传递给 fly 过渡效果。
 
 3. 再次尝试你的应用程序，你会发现通知现在看起来更具吸引力了一些。
 
-> **备注：** 作为编译器，Svelte 可以通过排除未使用的特性来优化我们的打包文件大小。在这种情况下，如果我们使用 `npm run build` 为生产环境编译应用，我们的 `public/build/bundle.js` 文件的大小将略小于 22 KB。如果我们移除 `transitions:fly` 指令，Svelte 会聪明地意识到 `fly` 函数未被使用，`bundle.js` 文件的大小将降至仅为 18 KB。
+> [!NOTE]
+> 作为编译器，Svelte 可以通过排除未使用的特性来优化我们的打包文件大小。在这种情况下，如果我们使用 `npm run build` 为生产环境编译应用，我们的 `public/build/bundle.js` 文件的大小将略小于 22 KB。如果我们移除 `transitions:fly` 指令，Svelte 会聪明地意识到 `fly` 函数未被使用，`bundle.js` 文件的大小将降至仅为 18 KB。
 
 这只是冰山一角。Svelte 提供了许多处理动画和过渡效果的选项。Svelte 还支持使用 `in:fn`/`out:fn` 指令在元素添加或从 DOM 中移除时应用不同的过渡效果，并允许你定义自己的[自定义 CSS](https://learn.svelte.dev/tutorial/custom-css-transitions) 和 [JavaScript](https://learn.svelte.dev/tutorial/custom-js-transitions) 过渡效果。它还提供了几个缓动函数，用于指定随时间变化的速率。你可以查看 [ease visualizer](https://svelte.dev/examples/easing) 来探索各种可用的缓动函数。
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
index afbd14e171709b..7257555f522de0 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
@@ -93,7 +93,8 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app
 
 1. 建立新文件夹——`src/components`。
 
-   > **备注：** 你可以把组件放在 `src` 文件夹当中的任何地方，但放在 `components` 文件夹是比较常见的做法，也让你可以更容易地找到它们。
+   > [!NOTE]
+   > 你可以把组件放在 `src` 文件夹当中的任何地方，但放在 `components` 文件夹是比较常见的做法，也让你可以更容易地找到它们。
 
 2. 建立 `src/components/Todos.svelte` 文件并包含以下内容：
 
@@ -344,7 +345,8 @@ created public/build/bundle.js in 220ms
 <img height="32" width="88" src="https://www.w3.org/WAI/wcag2A" />
 ```
 
-> **备注：** 通过 VSCode 你可以点击 _Quick fix..._ 链接或按 <kbd>Ctrl</kbd> + <kbd>.</kbd> 来自动地加上这个忽略注释。
+> [!NOTE]
+> 通过 VSCode 你可以点击 _Quick fix..._ 链接或按 <kbd>Ctrl</kbd> + <kbd>.</kbd> 来自动地加上这个忽略注释。
 
 假如你想要全局地关闭这个警告，可以像这样在你的 `rollup.config.js` 文件中调整 `Svelte` 插件配置并补上这个 `onwarn` 处理器：
 
@@ -373,7 +375,8 @@ plugins: [
 
 在设计上，这些警告是在编译器本身中实现的，而不是可以选择性加入项目的插件。这样做的目的是在默认情况下检查标记中的无障碍问题，并让你选择不使用特定的警告。
 
-> **备注：** 只有在有充分理由的情况下，例如在构建快速原型时，才应禁用这些警告。做一名优秀的网络公民，让尽可能多的用户都能访问你的网页，这一点非常重要。
+> [!NOTE]
+> 只有在有充分理由的情况下，例如在构建快速原型时，才应禁用这些警告。做一名优秀的网络公民，让尽可能多的用户都能访问你的网页，这一点非常重要。
 
 Svelte 通过 [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#supported-rules) 来检查无障碍性规则，它是提供在 JSX 元素方面的许多无障碍性规则静态检查的一个 ESLint 插件。Svelte 的目标是在其编译器中实现所有这些功能，其中大部分功能已经移植到 Svelte 中。你可以在 GitHub 中看到[尚未实现的无障碍检查](https://github.com/sveltejs/svelte/issues/820)。点击规则的链接可以查阅它们各自的含义。
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md
index 58c8f7fbedb674..53e6c10e88dbcb 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md
@@ -66,7 +66,8 @@ npx degit opensas/mdn-svelte-tutorial/07-typescript-support
 
 我们的 TypeScript 代码能够在 JavaScript 可以运行的任何地方运行。这是如何实现的呢？TypeScript 将我们的代码“转译”为原生的 JavaScript。这意味着它解析 TypeScript 代码，并生成等效的原生 JavaScript 代码以供浏览器运行。
 
-> **备注：** 如果你对 TypeScript 如何将代码转译为 JavaScript 感兴趣，可以查看 [TypeScript 演练场](https://www.typescriptlang.org/play/?target=1&e=4#example/hello-world)。
+> [!NOTE]
+> 如果你对 TypeScript 如何将代码转译为 JavaScript 感兴趣，可以查看 [TypeScript 演练场](https://www.typescriptlang.org/play/?target=1&e=4#example/hello-world)。
 
 长期以来，原生 TypeScript 支持一直是 Svelte 呼声最高的特性请求。感谢 Svelte 团队和众多贡献者的辛勤工作，我们现在有了[官方解决方案](https://svelte.dev/blog/svelte-and-typescript)，可以进行测试。在本节中，我们将向你展示如何设置带有 TypeScript 支持的 Svelte 项目，以供尝试使用。
 
@@ -121,7 +122,8 @@ npm run dev
 
 你甚至可以使用 `degit` 下载该脚本。这将是我们开始将应用程序移植到 TypeScript 所需要的操作。
 
-> **备注：** 在你开始将其转换为 TypeScript 之前，你可以运行 `npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript` 来获取完整的 JavaScript 写的待办事项列表应用程序。
+> [!NOTE]
+> 在你开始将其转换为 TypeScript 之前，你可以运行 `npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript` 来获取完整的 JavaScript 写的待办事项列表应用程序。
 
 进入项目的根目录并输入以下命令：
 
@@ -142,13 +144,15 @@ npm run dev                                       # 以开发模式启动应用
 
 这些指令适用于任何你想要转换为 TypeScript 的 Svelte 项目。只需注意，Svelte 社区正在不断改进 Svelte 对 TypeScript 的支持，因此你应定期运行 `npm update` 来获取最新的更改。
 
-> **备注：** 如果你在 Svelte 应用程序中使用 TypeScript 时遇到任何问题，请查看[有关 TypeScript 支持的故障排除/常见问题解答部分](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#troubleshooting--faq)。
+> [!NOTE]
+> 如果你在 Svelte 应用程序中使用 TypeScript 时遇到任何问题，请查看[有关 TypeScript 支持的故障排除/常见问题解答部分](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#troubleshooting--faq)。
 
 我们之前提到过，TypeScript 是 JavaScript 的超集，因此你的应用程序无需修改即可运行。目前，该应用程序仅是启用了 TypeScript 支持的常规 JavaScript 应用程序，而不会利用 TypeScript 提供的任何特性。你现在可以逐步添加类型。
 
 一旦你配置好了 TypeScript，你就可以通过在组件的脚本部分开头添加 `<script lang='ts'>` 来在 Svelte 组件中使用它。要通过常规的 JavaScript 文件使用它，只需将文件扩展名从 `.js` 更改为 `.ts`。你还需要更新所有相应的导入语句，将 `import` 语句中的 `.ts` 文件扩展名删除。
 
-> **备注：** 如果在 `import` 语句中使用 `.ts` 文件扩展名，TypeScript 会抛出错误，因此如果你有名为 `./foo.ts` 的文件，你必须将其导入为 `"./foo"`。更多信息请参阅 TypeScript 手册中的[捆绑程序、TypeScript 运行时和 Node.js 加载器的模块解析](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution-for-bundlers-typescript-runtimes-and-nodejs-loaders)部分。
+> [!NOTE]
+> 如果在 `import` 语句中使用 `.ts` 文件扩展名，TypeScript 会抛出错误，因此如果你有名为 `./foo.ts` 的文件，你必须将其导入为 `"./foo"`。更多信息请参阅 TypeScript 手册中的[捆绑程序、TypeScript 运行时和 Node.js 加载器的模块解析](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution-for-bundlers-typescript-runtimes-and-nodejs-loaders)部分。
 
 > **备注：** [目前尚不支持](https://github.com/sveltejs/svelte/issues/4701)在组件标记部分使用 TypeScript。你需要在标记中使用 JavaScript，并在 `<script lang='ts'>` 部分中使用 TypeScript。
 
@@ -158,11 +162,13 @@ TypeScript 为代码编辑器和集成开发环境提供了大量信息，使它
 
 我们将使用 [Visual Studio Code](https://code.visualstudio.com/) 进行快速测试，以查看编写组件时的自动补全提示和类型检查。
 
-> **备注：** 如果你不想使用 VS Code，我们还提供了在终端中使用 TypeScript 错误检查的说明，稍后会介绍。
+> [!NOTE]
+> 如果你不想使用 VS Code，我们还提供了在终端中使用 TypeScript 错误检查的说明，稍后会介绍。
 
 在多个代码编辑器中支持 Svelte 项目的 TypeScript 的工作正在进行中；到目前为止，[Svelte for VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)提供了最完整的支持，该扩展由 Svelte 团队开发和维护。该扩展提供类型检查、检查、重构、智能感知、悬停信息、自动补全和其他功能。这种开发者辅助功能是在项目中使用 TypeScript 的另一个好处。
 
-> **备注：** 确保你正在使用 [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)，而不是已停用的旧版“Svelte”扩展（James Birtles 开发），如果你已安装旧版扩展，应将其卸载并安装官方的 Svelte 扩展。
+> [!NOTE]
+> 确保你正在使用 [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)，而不是已停用的旧版“Svelte”扩展（James Birtles 开发），如果你已安装旧版扩展，应将其卸载并安装官方的 Svelte 扩展。
 
 假设你在 VS Code 应用程序中，在你的项目文件夹的根目录中，键入 `code .`（尾随的点告诉 VS Code 打开当前文件夹）以打开代码编辑器。VS Code 会告诉你有推荐安装的扩展。
 
@@ -216,7 +222,8 @@ TypeScript 支持结构类型。结构类型是一种基于类型成员进行关
    };
    ```
 
-   > **备注：** Svelte 模板使用 [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) 4.0.0 来支持 TypeScript。从该版本开始，你必须使用 `export`/`import` 类型语法来导入类型和接口。更多信息，请查看[故障排除指南的这个部分](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#how-do-i-import-interfaces-into-my-svelte-components-i-get-errors-after-transpilation)。
+   > [!NOTE]
+   > Svelte 模板使用 [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) 4.0.0 来支持 TypeScript。从该版本开始，你必须使用 `export`/`import` 类型语法来导入类型和接口。更多信息，请查看[故障排除指南的这个部分](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#how-do-i-import-interfaces-into-my-svelte-components-i-get-errors-after-transpilation)。
 
 4. 现在，我们将在 `Todo.svelte` 组件中使用 `TodoType`。首先在 `<script>` 标签中添加 `lang="ts"`。
 5. 使用 `import` 导入该类型并将其用于声明 `todo` 属性。将 `export let todo` 行替换为以下内容：
@@ -327,7 +334,8 @@ svelte-check found no errors and no warnings
        if (!message) {               // 如果 message 为空，则隐藏 Alert
    ```
 
-   > **备注：** 不需要使用 `export let ms:number = 3000` 来指定 `ms` 的类型，因为 TypeScript 已经从默认值推断出了它的类型。
+   > [!NOTE]
+   > 不需要使用 `export let ms:number = 3000` 来指定 `ms` 的类型，因为 TypeScript 已经从默认值推断出了它的类型。
 
 ### MoreActions.svelte
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
index 6d5f4a7a6bab61..843b822855fbec 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
@@ -253,7 +253,8 @@ let completedTodos = todos.filter((todo) => todo.completed).length;
 
 可以通过在前面加上 `$:` 前缀，告诉 Svelte 我们希望 `totalTodos` 和 `completedTodos` 等变量具有响应性。Svelte 将生成代码以在它们依赖的数据发生变化时自动更新它们。
 
-> **备注：** Svelte 使用 `$:` [JavaScript 标记语句语法](/zh-CN/docs/Web/JavaScript/Reference/Statements/label)来标记响应性语句。就像用于声明属性的 `export` 关键字一样，这可能看起来有点陌生。但这是 Svelte 利用有效的 JavaScript 语法并赋予其新用途的另一个例子——在这种情况下，意味着“每当任何引用的值发生变化时，就会重新执行此代码”。一旦习惯了，你就无法回头了。
+> [!NOTE]
+> Svelte 使用 `$:` [JavaScript 标记语句语法](/zh-CN/docs/Web/JavaScript/Reference/Statements/label)来标记响应性语句。就像用于声明属性的 `export` 关键字一样，这可能看起来有点陌生。但这是 Svelte 利用有效的 JavaScript 语法并赋予其新用途的另一个例子——在这种情况下，意味着“每当任何引用的值发生变化时，就会重新执行此代码”。一旦习惯了，你就无法回头了。
 
 更新 `src/components/Todos.svelte` 中的 `totalTodos` 和 `completedTodos` 变量定义，如下：
 
@@ -307,7 +308,8 @@ $: completedTodos = todos.filter((todo) => todo.completed).length;
    $: console.log("newTodoName: ", newTodoName);
    ```
 
-   > **备注：** 你可能已经注意到，响应式语句不仅限于变量声明。你可以在 `$:` 符号后面放上*任何* JavaScript 语句。
+   > [!NOTE]
+   > 你可能已经注意到，响应式语句不仅限于变量声明。你可以在 `$:` 符号后面放上*任何* JavaScript 语句。
 
 4. 现在试着回到 `localhost:5042`，按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> 打开浏览器控制台，并在输入框中输入一些内容。你应该能看到你的输入被记录下来。此时，你可以根据需要删除响应式 `console.log()`。
 5. 接下来，我们将创建一个函数来添加新的待办事项——`addTodo()`——它会将一个新的 `todo` 对象添加到 `todos` 数组中。将此函数添加到 `src/components/Todos.svelte` 的 `<script>` 区块的底部：
@@ -319,7 +321,8 @@ $: completedTodos = todos.filter((todo) => todo.completed).length;
    }
    ```
 
-   > **备注：** 目前我们为每个待办事项都指定相同的 `id`，不用担心，我们会尽快解决这个问题。
+   > [!NOTE]
+   > 目前我们为每个待办事项都指定相同的 `id`，不用担心，我们会尽快解决这个问题。
 
 6. 现在我们要更新我们的 HTML，以便在表单提交时调用 `addTodo()`。更新添加 NewTodo 的起始标签如下：
 
@@ -333,7 +336,8 @@ $: completedTodos = todos.filter((todo) => todo.completed).length;
 
    要解决这个问题，只需要将 `todos = todos` 添加到 `addTodo()` 函数的末尾，但在函数末尾包含它似乎很奇怪。相反，我们将移除 `push()` 方法并使用[展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)来达到相同的结果：我们将为 `todos` 数组指定一个等于 `todos` 数组加上新对象的数值。
 
-   > **备注：** 数组（`Array`）有几个修改操作：[`push()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push)、[`pop()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)、[`splice()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)、[`shift()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)、[`unshift()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)、[`reverse()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 和 [`sort()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。使用它们常常会导致难以追踪的副作用和错误。通过使用展开语法而不是 `push()`，我们可以避免改变数组本身，这被认为是一种良好的做法。
+   > [!NOTE]
+   > 数组（`Array`）有几个修改操作：[`push()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push)、[`pop()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)、[`splice()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)、[`shift()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)、[`unshift()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)、[`reverse()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 和 [`sort()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。使用它们常常会导致难以追踪的副作用和错误。通过使用展开语法而不是 `push()`，我们可以避免改变数组本身，这被认为是一种良好的做法。
 
    更新你的 `addTodo()` 函数如下：
 
@@ -361,7 +365,8 @@ $: completedTodos = todos.filter((todo) => todo.completed).length;
    }
    ```
 
-   > **备注：** 如你所见，响应式陈述不仅限于单行。以下代码也可以生效，但可读性较差：`$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
+   > [!NOTE]
+   > 如你所见，响应式陈述不仅限于单行。以下代码也可以生效，但可读性较差：`$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
 
 2. Svelte 是如何做到这一点的？编译器会解析整个响应式语句并检测到它依赖于 `totalTodos` 变量和 `todos` 数组。所以每当它们中任何一个被修改时，都会重新评估代码并相应地更新 `newTodoId`。
 
@@ -420,7 +425,8 @@ $: completedTodos = todos.filter((todo) => todo.completed).length;
 
    我们通过将 `btn__primary` 类应用于筛选器按钮来显示当前使用的筛选器。为了有条件地将样式类应用于元素上，我们使用 `class:name={value}` 指令。如果值表达式的计算结果为真，那么类名将被应用。你可以将许多不同条件的指令放在同一个元素上。所以当我们写为 `class:btn__primary={filter === 'all'}` 时，如果筛选器（filter）变量的值等于 `'all'`，Svelte 将会应用 `btn__primary` 类。
 
-   > **备注：** Svelte 提供了一个便利的快捷方式，允许我们在类与变量名称相同时，可以将 `<div class:active={active}>` 缩短为 `<div class:active>`。
+   > [!NOTE]
+   > Svelte 提供了一个便利的快捷方式，允许我们在类与变量名称相同时，可以将 `<div class:active={active}>` 缩短为 `<div class:active>`。
 
    `aria-pressed={filter === 'all'}` 也是类似的情况：当在大括号之间传入的 JavaScript 表达式的计算结果为真值时，`aria-pressed` 属性将被加入到按钮上。
 
@@ -437,7 +443,8 @@ $: completedTodos = todos.filter((todo) => todo.completed).length;
 
    在分析我们的代码后，Svelte 检测到我们的 `filterTodos()` 函数依赖于变量 `filter` 和 `todos`。而就像嵌入在标记中的任何其他动态表达式一样，每当这些依赖发生变化时，DOM 都会相应地更新。所以每当 `filter` 或 `todos` 发生变化时，`filterTodos()` 函数将会重新评估并更新循环内的项目。
 
-> **备注：** 响应式有时会很棘手。Svelte 将 `filter` 识别为依赖，是因为我们在 `filterTodos(filter, todo)` 表达式中引用它。而 `filter` 是一个顶层变量，所以我们可能会想把它从辅助函数参数（params）中删除，然后像这样调用它：`filterTodos(todo)`。这虽然能够工作，但现在 Svelte 将无法发现 `{#each filterTodos(todos) }` 依赖于 `filter` 并且当过滤器变更时，过滤后的待办事项列表不会再被更新。切记 Svelte 会分析我们的代码以找出依赖关系，所以最好明确解释它，而不是依赖于顶层变量的可见性。此外，让我们的代码清晰并明确地解释它正在使用的信息是一个很好的做法。
+> [!NOTE]
+> 响应式有时会很棘手。Svelte 将 `filter` 识别为依赖，是因为我们在 `filterTodos(filter, todo)` 表达式中引用它。而 `filter` 是一个顶层变量，所以我们可能会想把它从辅助函数参数（params）中删除，然后像这样调用它：`filterTodos(todo)`。这虽然能够工作，但现在 Svelte 将无法发现 `{#each filterTodos(todos) }` 依赖于 `filter` 并且当过滤器变更时，过滤后的待办事项列表不会再被更新。切记 Svelte 会分析我们的代码以找出依赖关系，所以最好明确解释它，而不是依赖于顶层变量的可见性。此外，让我们的代码清晰并明确地解释它正在使用的信息是一个很好的做法。
 
 ## 到目前为止的代码
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md
index 700e7ac7e685b2..7aae7c42a63eca 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md
@@ -119,7 +119,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_
 </style>
 ```
 
-> **备注：** 先理解上面的代码，然后再阅读下面的说明，以确保你在继续学习之前弄清楚该组件的所有功能。这是一个有用的方法，它可以帮助你巩固到目前为止所学到的一切。
+> [!NOTE]
+> 先理解上面的代码，然后再阅读下面的说明，以确保你在继续学习之前弄清楚该组件的所有功能。这是一个有用的方法，它可以帮助你巩固到目前为止所学到的一切。
 
 这段代码完成了编辑功能的核心部分。我们创建了一个表单，其中包含一个 `<input>` 标签，用于编辑我们的待办事项的名称。
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
index a9b017c6c53b05..aa14e82fea8b5a 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
@@ -7,7 +7,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_compon
 
 现在是时候深入了解 Vue，并创建我们自己的自定义组件了--我们将从创建一个组件来表示待办事项列表中的每个项目开始。在这一过程中，我们将学习一些重要的概念，例如在其他组件中调用组件，通过道具向它们传递数据，以及保存数据状态。
 
-> **备注：** 如果你需要根据我们的版本检查你的代码，你可以在我们的 [todo-vue](https://github.com/mdn/todo-vue) 仓库找到中找到示例 Vue 程序代码的完成版本。有关运行中的实时版本，请参见 <https://mdn.github.io/todo-vue/>。
+> [!NOTE]
+> 如果你需要根据我们的版本检查你的代码，你可以在我们的 [todo-vue](https://github.com/mdn/todo-vue) 仓库找到中找到示例 Vue 程序代码的完成版本。有关运行中的实时版本，请参见 <https://mdn.github.io/todo-vue/>。
 
 <table class="learn-box standard-table">
   <tbody>
@@ -138,7 +139,8 @@ export default {
 - 第一种方式是，以字符串数组的方式列出 props，数组中的每个实体对应一个 prop 名称。
 - 第二种方法是将 props 定义为一个对象，每个 key 对应于 prop 名称。将 props 列为对象允许你指定默认值，将 props 标记为 required，执行基本的对象类型 (特别是 JavaScript 基本类型) ，并执行简单的 prop 校验。
 
-> **备注：** 注意：prop 验证只能在 development 模式下进行，所以你不能在生产环境中严格依赖它。此外，prop 验证函数在组件实例创建之前被调用，因此它们不能访问组件状态 (或其他 props)。
+> [!NOTE]
+> 注意：prop 验证只能在 development 模式下进行，所以你不能在生产环境中严格依赖它。此外，prop 验证函数在组件实例创建之前被调用，因此它们不能访问组件状态 (或其他 props)。
 
 针对 ToDoItem 组件，我们将使用对象注册法。
 
@@ -231,7 +233,8 @@ data() {
 
 你可以使用 `this` 从内部数据访问组件的 props 和其他属性，如所你料。我们很快就会看到一个示例。
 
-> **备注：** 由于 `this` 在箭头函数中的工作方式（绑定到父级的上下文），如果使用箭头函数，你将无法从内部 `data` 访问任何必要的属性。因此，不要对 `data` 属性使用箭头函数。
+> [!NOTE]
+> 由于 `this` 在箭头函数中的工作方式（绑定到父级的上下文），如果使用箭头函数，你将无法从内部 `data` 访问任何必要的属性。因此，不要对 `data` 属性使用箭头函数。
 
 因此，让我们向 `ToDoItem` 组件添加一个 `data` 属性。这将返回一个包含单个属性的对象，即我们将调用 `isDone`，其值为 `this.done`。
 
@@ -302,7 +305,8 @@ v-bind:attribute="expression"
 npm install --save lodash.uniqueid
 ```
 
-> **备注：** 如果你更喜欢 yarn，则可以改用 `yarn add lodash.uniqueid`。
+> [!NOTE]
+> 如果你更喜欢 yarn，则可以改用 `yarn add lodash.uniqueid`。
 
 现在，我们可以将此包导入我们的 `ToDoItem` 组件中。在 `ToDoItem.vue` 的 `<script>` 元素的顶部添加以下行：
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
index 5d6f6df5315211..b5412ec4e7c51a 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
@@ -62,7 +62,8 @@ Vue 是一个现代 JavaScript 框架提供了有用的设施渐进增强——
 1. 安装 Node.js 8.11 及以上的版本。
 2. [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) 或 [yarn](https://yarnpkg.com/)。
 
-> **备注：** 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法[在这里](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#添加工具)。
+> [!NOTE]
+> 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法[在这里](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#添加工具)。
 
 安装 CLI，终端中运行以下命令：
 
@@ -90,7 +91,8 @@ yarn global add @vue/cli
 
 如果你以前从未运行过 Vue CLI，则会再有一个问题——你将被要求选择一个包管理器，它默认为 yarn。从现在开始，Vue CLI 将默认使用此包管理器。如果你此后需要使用不同的包管理器，则可以在运行 `vue create` 时传入参数 `--packageManager=<package-manager>`。因此，如果你想要使用 `npm` 创建 `moz-todo-vue` 项目，并且之前选择了 `yarn`，则应运行 `vue create moz-todo-vue --packageManager=npm`。
 
-> **备注：** 我们这里并没有列举所有的配置项，如果你想了解更多信息可以访问 [Vue 官方文档](https://cli.vuejs.org/)的 CLI 部分。
+> [!NOTE]
+> 我们这里并没有列举所有的配置项，如果你想了解更多信息可以访问 [Vue 官方文档](https://cli.vuejs.org/)的 CLI 部分。
 
 ## 项目结构
 
@@ -105,7 +107,8 @@ yarn global add @vue/cli
   - `favicon.ico`：这个是项目的图标，当前就是一个 Vue 的 logo。
   - `index.html`：这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。
 
-    > **备注：** 这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。
+    > [!NOTE]
+    > 这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。
 
 - `src`：这个是 Vue 应用的核心代码目录
 
@@ -114,7 +117,8 @@ yarn global add @vue/cli
   - `components`：这是用来存放自定义组件的目录，目前里面会有一个示例组件。
   - `assets`：这个目录用来存放像 CSS、图片这种静态资源，但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 [Sass/SCSS](https://sass-lang.com/) 或者 [Stylus](https://stylus-lang.com/)。
 
-> **备注：** 根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 `views` 的文件夹）。
+> [!NOTE]
+> 根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 `views` 的文件夹）。
 
 ## .vue 文件（单文件组件）
 
@@ -132,7 +136,8 @@ yarn global add @vue/cli
 
 `<template>` 包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML，以及一些我们接下来要讲的 Vue 特定的语法。
 
-> **备注：** 通过设置 `<template>` 标签的 `lang` 属性，例如可以通过设置 `<template lang="pug">` 就可以在使用 Pug 模板来替代标准 HTML。在本教程中我们依然会使用标准 HTML，但是你还是值得知道这种可行的方式。
+> [!NOTE]
+> 通过设置 `<template>` 标签的 `lang` 属性，例如可以通过设置 `<template lang="pug">` 就可以在使用 Pug 模板来替代标准 HTML。在本教程中我们依然会使用标准 HTML，但是你还是值得知道这种可行的方式。
 
 `<script>` 包含组件中所有的非显示逻辑，最重要的是，`<script>` 标签需要默认导出一个 JS 对象。该对象是你在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个包含 template 模板的对象会被处理和转换成为一个有 `render()` 函数的 Vue 组件。
 
@@ -150,11 +155,13 @@ export default {
 };
 ```
 
-> **备注：** 如果想要使用 [TypeScript](https://www.typescriptlang.org/) 语法，你应该将 `<script>` 标签的 `lang` 属性设置为 `<script lang="ts">` 来告诉编译器你要使用 TypeScript。
+> [!NOTE]
+> 如果想要使用 [TypeScript](https://www.typescriptlang.org/) 语法，你应该将 `<script>` 标签的 `lang` 属性设置为 `<script lang="ts">` 来告诉编译器你要使用 TypeScript。
 
 组件的 CSS 应该写在 `<style>` 标签里，如果你添加了 `scoped` 属性（形如 `<style scoped>`），Vue 会把样式的范围限制到单文件组件的内容里。这个是类似于 CSS-in-JS 的解决方案，只不过允许书写纯粹的 CSS。
 
-> **备注：** 如果通过 CLI 创建项目时选择了 CSS 预处理器，则可以将 `lang` 属性添加到 `<style>` 标签中，以便 Webpack 可以在构建时处理内容。例如，`<style lang ="scss">` 将允许你在样式信息中使用 SCSS 语法。
+> [!NOTE]
+> 如果通过 CLI 创建项目时选择了 CSS 预处理器，则可以将 `lang` 属性添加到 `<style>` 标签中，以便 Webpack 可以在构建时处理内容。例如，`<style lang ="scss">` 将允许你在样式信息中使用 SCSS 语法。
 
 ## 本地运行程序
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
index 94b44ef4ae9bd2..2c081f56dfe8fc 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
@@ -193,7 +193,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_even
    />
    ```
 
-   > **备注：** 你还可以通过事件和 `v-bind` 属性的组合将数据与 `<input>` 值同步。事实上，这就是 `v-model` 在幕后所做的。但是，确切的事件和属性组合因输入类型而异，并且比仅使用 `v-model` 快捷方式需要更多代码。
+   > [!NOTE]
+   > 你还可以通过事件和 `v-bind` 属性的组合将数据与 `<input>` 值同步。事实上，这就是 `v-model` 在幕后所做的。但是，确切的事件和属性组合因输入类型而异，并且比仅使用 `v-model` 快捷方式需要更多代码。
 
 3. 让我们通过记录在我们的 `onSubmit()` 方法中提交的数据的值来测试我们对 `v-model` 的使用。在组件中，使用 `this` 关键字访问数据属性。所以我们使用 `this.label` 访问我们的 `label` 字段。
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md
index 1ed1e02bb32527..8b35f162a44c61 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md
@@ -155,7 +155,8 @@ Vue 让你在这个生命周期的不同阶段使用**生命周期方法**运行
 9. `activated()`：只用于用特殊的 `keep-alive` 标签包装的组件。在组件被激活后运行。
 10. `deactivated()`：只用于用特殊的 `keep-alive` 标签包装的组件。在组件被停止激活后运行。
 
-> **备注：** Vue 文档提供了一个[很好的图表，可以直观地看到这些钩子何时发生](https://cn.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram)。这篇文章来自 [Digital Ocean 社区博客，更深入地探讨了生命周期方法](https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle)。
+> [!NOTE]
+> Vue 文档提供了一个[很好的图表，可以直观地看到这些钩子何时发生](https://cn.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram)。这篇文章来自 [Digital Ocean 社区博客，更深入地探讨了生命周期方法](https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle)。
 
 现在我们已经了解了生命周期方法，让我们用一个方法在我们的 `ToDoItemEditForm` 组件被安装时触发焦点。
 
@@ -223,6 +224,7 @@ deleteToDo(toDoId) {
 
 这就是使用 Vue 进行焦点管理的全部内容，同时也是我们的应用的全部内容！恭喜你完成了我们所有的 Vue 教程。在下一篇文章中，我们将用一些进一步的资源来结束你的 Vue 学习。
 
-> **备注：** 如果你需要对照我们的版本检查你的代码，你可以在我们的 todo-vue 仓库中找到一个完成版本的 Vue 应用示例代码。关于运行中的实时版本，请看 <https://mdn.github.io/todo-vue/>。
+> [!NOTE]
+> 如果你需要对照我们的版本检查你的代码，你可以在我们的 todo-vue 仓库中找到一个完成版本的 Vue 应用示例代码。关于运行中的实时版本，请看 <https://mdn.github.io/todo-vue/>。
 
 {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.md
index 5ae9e6bc5492ba..7777413a33d1be 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.md
@@ -55,7 +55,8 @@ Vue CLI 还为我们提供了准备向网络发布应用程序的工具。你可
 
 这将创建一个新的 `dist` 目录，包含所有准备好的生产文件。要把你的网站发布到网上，请把这个文件夹的内容复制到你的主机环境中。
 
-> **备注：** Vue CLI 文档也包含一个[专门的指导手册](https://cli.vuejs.org/guide/deployment.html#platform-guides)，可以帮助你将应用发布到很多常见的托管平台。
+> [!NOTE]
+> Vue CLI 文档也包含一个[专门的指导手册](https://cli.vuejs.org/guide/deployment.html#platform-guides)，可以帮助你将应用发布到很多常见的托管平台。
 
 ## Vue 2
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
index 612b034748c114..862cfcfc9f4f07 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -50,13 +50,15 @@ l10n:
 
 也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在本模块的其他地方已经讨论过别的领域，例如[响应式设计问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#响应式设计问题)和[性能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#性能问题)。
 
-> **备注：** 如同 Web 开发的许多方面一样，无障碍并非可以用 100% 的成功或失败来定义；实际上，对于所有内容来说，要达到完全的无障碍几乎是不可能的，特别是当网站变得越来越复杂。我们所做的，更多是采取防御性编程，并遵守最佳实践，以确保尽可能多的人能够访问到尽可能多的内容。
+> [!NOTE]
+> 如同 Web 开发的许多方面一样，无障碍并非可以用 100% 的成功或失败来定义；实际上，对于所有内容来说，要达到完全的无障碍几乎是不可能的，特别是当网站变得越来越复杂。我们所做的，更多是采取防御性编程，并遵守最佳实践，以确保尽可能多的人能够访问到尽可能多的内容。
 
 ## 常见无障碍问题
 
 在本节中，我们将围绕 Web 无障碍，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。
 
-> **备注：** 无障碍在道德上是正确的事情，对企业也有好处（残疾用户，移动用户等构成了重要的细分市场），并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。
+> [!NOTE]
+> 无障碍在道德上是正确的事情，对企业也有好处（残疾用户，移动用户等构成了重要的细分市场），并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。
 
 ### HTML
 
@@ -114,7 +116,8 @@ HTML 语义化的关键在于使用标题和段落结构来组织你的内容；
 
 ![三个按钮的截图，展示了交互式原生元素的默认行为示例。第三个按钮用蓝色边框突出显示，表示其聚焦状态。](button-focused-unfocused.png)
 
-> **备注：** 在 Firefox 中，你还可以启用一个叠加层来显示页面的标签顺序。有关更多信息，请参见：[Accessibility Inspector > Show web page tabbing order](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order)。
+> [!NOTE]
+> 在 Firefox 中，你还可以启用一个叠加层来显示页面的标签顺序。有关更多信息，请参见：[Accessibility Inspector > Show web page tabbing order](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order)。
 
 然后你可以按 Enter/Return 键来跟随聚焦的链接或按下按钮（我们已经包含了一些 JavaScript 来使按钮显示一条消息），或开始输入以在文本输入框中输入文本（其他表单元素有不同的控制方式，例如 {{htmlelement("select")}} 元素可以使用向上和向下箭头键显示和循环其选项）。
 
@@ -122,7 +125,8 @@ HTML 语义化的关键在于使用标题和段落结构来组织你的内容；
 
 - 默认情况下，Safari 浏览器在 Mac 上不能通过 Tab 键在各个链接间切换。要激活这项功能，请打开*系统偏好设置*，滚动至*键盘*选项，并开启*使用 Tab 键移动焦点*。如果你使用的是较旧版本的 macOS，请查阅 Apple 的 macOS 用户指南中的[使用键盘来代替鼠标操作 Mac](https://support.apple.com/zh-cn/guide/mac-help/mchlp1399/mac)一节。
 
-> **警告：** 你应该对你编写的任何新页面执行此类测试/审查——确保功能可通过键盘访问，并且 Tab 浏览顺序遵守贯穿文档的合理导航路径。
+> [!WARNING]
+> 你应该对你编写的任何新页面执行此类测试/审查——确保功能可通过键盘访问，并且 Tab 浏览顺序遵守贯穿文档的合理导航路径。
 
 这个例子强调了使用正确的语义元素来执行适当任务的重要性。你可以用 CSS 设计任何元素，使其看起来像链接或按钮，并用 JavaScript 让它们的行为类似于链接或按钮，但实际上它们并不是真正的链接或按钮。这样做，你会失去这些元素本身就提供的许多无障碍特性，而且这些特性是免费的。因此，如果可能的话，你应该避免这样做。
 
@@ -141,7 +145,8 @@ select:focus {
 }
 ```
 
-> **备注：** 如果你决定使用 CSS 移除默认焦点样式，请确保用其他更适合你的设计的东西替换它——这是一个非常有价值的无障碍工具，不应该被删除。
+> [!NOTE]
+> 如果你决定使用 CSS 移除默认焦点样式，请确保用其他更适合你的设计的东西替换它——这是一个非常有价值的无障碍工具，不应该被删除。
 
 #### 构建键盘无障碍性
 
@@ -162,13 +167,15 @@ select:focus {
 
    这里我们给 `document` 对象添加了一个监听器，用于检测何时在键盘上按下按钮。我们通过事件对象的 [`code`](/zh-CN/docs/Web/API/KeyboardEvent/code) 属性检查按下了哪个按钮；如果它是与 Return/Enter 匹配的键码，我们将使用 `document.activeElement.onclick()` 运行存储在按钮的 `onclick` 处理程序中的函数。[`activeElement`](/zh-CN/docs/Web/API/Document/activeElement) 为我们提供了当前页面上获得焦点的元素。
 
-> **备注：** 此技术只有在你通过事件处理器属性（例如 `onclick`）设置原始事件处理器的情况下才有效。`addEventListener` 不会起作用。这会给构建功能带来许多额外的困难，并且很可能会引入其他问题。最好的办法是为每个任务使用正确的元素。
+> [!NOTE]
+> 此技术只有在你通过事件处理器属性（例如 `onclick`）设置原始事件处理器的情况下才有效。`addEventListener` 不会起作用。这会给构建功能带来许多额外的困难，并且很可能会引入其他问题。最好的办法是为每个任务使用正确的元素。
 
 #### 替代文本
 
 替代文本对无障碍性至关重要——对于视觉或听觉障碍者来说，如果无法看到或听到某些内容，这将是一个障碍。最简单且常用的文本替代方法是使用 `alt` 属性，我们应在所有包含关键内容的图像上使用该属性。它应包含能够在页面上成功传达图像意义和内容的描述，并能被屏幕阅读器读取，从而朗读给用户听。
 
-> **备注：** 更多信息请阅读[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)。
+> [!NOTE]
+> 更多信息请阅读[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)。
 
 可以通过多种方法来测试缺少的替代文本，例如，使用无障碍[审计工具](#审计工具)。
 
@@ -182,13 +189,15 @@ select:focus {
 
 接下来是表单中的 {{htmlelement("label")}} 元素，这是确保表单无障碍的关键特性之一。表单的挑战在于，你需要标签来指明每个表单输入应该输入的数据。每个标签都应该包含在 {{htmlelement("label")}} 中，并且与其对应的表单输入明确关联（每个 `<label>` 的 `for` 属性值需要与表单元素的 `id` 值相匹配），即使源代码的顺序并不完全合理（尽管它应该是合理的）。
 
-> **备注：** 有关链接文本和表单标签的更多信息，请参阅[有意义的文本标签](/zh-CN/docs/Learn/Accessibility/HTML#有意义的文本标签)。
+> [!NOTE]
+> 有关链接文本和表单标签的更多信息，请参阅[有意义的文本标签](/zh-CN/docs/Learn/Accessibility/HTML#有意义的文本标签)。
 
 最后，让我们简要讨论一下数据表格。使用非常简单的标记，你可以编写基本的数据表格（参见 `bad-table.html` 的[在线演示](https://mdn.github.io/learning-area/accessibility/html/bad-table.html)和[源代码](https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html)），但这样做会有问题——屏幕阅读器用户无法将行或列作为数据分组——为此，你需要标明哪些是标题行，以及它们是用于标题行还是标题列等。这样的表格只能通过视觉方式来识别。
 
 相反，如果你查看我们的 `punk-bands-complete.html` 示例（[在线演示](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)，[源代码](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html)），你会发现这里使用了一些辅助功能，如表头（{{htmlelement("th")}} 和 `scope` 属性）、{{htmlelement("caption")}} 元素等。
 
-> **备注：** 有关无障碍数据表格的更多信息，请参阅[无障碍数据表格](/zh-CN/docs/Learn/Accessibility/HTML#无障碍数据表格)。
+> [!NOTE]
+> 有关无障碍数据表格的更多信息，请参阅[无障碍数据表格](/zh-CN/docs/Learn/Accessibility/HTML#无障碍数据表格)。
 
 ### CSS
 
@@ -206,7 +215,8 @@ CSS 虽然提供的基本无障碍特性不如 HTML 多，但如果使用不当
 
 另一个建议是不要仅依赖颜色来传达标记或信息，因为这对于色盲人士来说不太友好。例如，不应仅将必填的表单字段标记为红色，而应同时使用星号和红色来标记它们。
 
-> **备注：** 高对比度也有助于在明亮环境下（如直射日光）使用反光屏幕设备（如智能手机或平板电脑）的用户更好地阅读页面。
+> [!NOTE]
+> 高对比度也有助于在明亮环境下（如直射日光）使用反光屏幕设备（如智能手机或平板电脑）的用户更好地阅读页面。
 
 #### 隐藏内容
 
@@ -218,7 +228,8 @@ CSS 虽然提供的基本无障碍特性不如 HTML 多，但如果使用不当
 
 另一方面，你不应使用 {{cssxref("visibility")}}`:hidden` 或 {{cssxref("display")}}`:none`，因为它们确实会使内容对屏幕阅读器隐藏。当然，除非你有充分的理由希望这些内容对屏幕阅读器保持不可见。
 
-> **备注：** 关于[仅对屏幕阅读器用户隐藏的内容](https://webaim.org/techniques/css/invisiblecontent/)，有更多有用的细节可以参考。
+> [!NOTE]
+> 关于[仅对屏幕阅读器用户隐藏的内容](https://webaim.org/techniques/css/invisiblecontent/)，有更多有用的细节可以参考。
 
 ### JavaScript
 
@@ -231,7 +242,8 @@ CSS 虽然提供的基本无障碍特性不如 HTML 多，但如果使用不当
 - 提供客户端表单验证，它可以快速地提醒用户表单输入的问题，无需等待服务器检查数据。如果没有可用的 JavaScript，表单仍然可以工作，但验证可能会更慢。
 - 为 HTML `<video>` 提供自定义控件，使其对仅使用键盘的用户无障碍（如我们之前所说，大多数浏览器中的默认浏览器控件不可通过键盘访问）。
 
-> **备注：** WebAIM 的[无障碍 JavaScript](https://webaim.org/techniques/javascript/) 提供了一些关于无障碍 JavaScript 方面值得考虑的有用细节。
+> [!NOTE]
+> WebAIM 的[无障碍 JavaScript](https://webaim.org/techniques/javascript/) 提供了一些关于无障碍 JavaScript 方面值得考虑的有用细节。
 
 更复杂的 JavaScript 实现可能会引起无障碍性问题——你需要尽力而为。例如，对于使用 [WebGL](/zh-CN/docs/Glossary/WebGL) 编写的复杂 3D 游戏，期望其对盲人用户实现 100% 的无障碍是不现实的。但是，你可以实施[键盘控制](/zh-CN/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)，以便非鼠标用户也能使用，并且调整配色方案，确保色觉缺陷者也能够辨识。
 
@@ -283,7 +295,8 @@ CSS 虽然提供的基本无障碍特性不如 HTML 多，但如果使用不当
 2. 在页面顶部的文本输入框中输入我们的 [`bad-semantics.html`](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) 示例的 URL。然后按下回车键或点击输入框右侧的箭头。
 3. 该网站会响应并指出无障碍性问题。点击显示的图标可以查看 Wave 评估识别出的每个问题的详细信息。
 
-> **备注：** 仅靠这些工具并不能解决所有无障碍性问题。你还需要结合这些工具、相关知识和经验、用户测试等，才能获得全面的了解。
+> [!NOTE]
+> 仅靠这些工具并不能解决所有无障碍性问题。你还需要结合这些工具、相关知识和经验、用户测试等，才能获得全面的了解。
 
 ### 自动化工具
 
@@ -310,7 +323,8 @@ aXe 也可以通过 `npm` 安装，并且能够与任务运行器如 [Grunt](htt
 
 接下来我们通过测试一些屏幕阅读器，以便你能够大致了解它们是如何工作的，以及如何进行测试。
 
-> **备注：** WebAIM 的[兼容屏幕阅读器的设计](https://webaim.org/techniques/screenreader/)提供了一些关于屏幕阅读器的使用和适配的信息。另外，[屏幕阅读器用户调查 #9 的结果](https://webaim.org/projects/screenreadersurvey9/#used)也展示了一些关于屏幕阅读器使用的有趣统计数据。
+> [!NOTE]
+> WebAIM 的[兼容屏幕阅读器的设计](https://webaim.org/techniques/screenreader/)提供了一些关于屏幕阅读器的使用和适配的信息。另外，[屏幕阅读器用户调查 #9 的结果](https://webaim.org/projects/screenreadersurvey9/#used)也展示了一些关于屏幕阅读器使用的有趣统计数据。
 
 #### VoiceOver
 
@@ -318,7 +332,8 @@ VoiceOver（VO）免费内置于你的 Mac/iPhone/iPad 中，所以如果你使
 
 要启动它，请按 Cmd + F5。如果你之前未曾使用过 VO，你会看到一个欢迎界面，在那里你可以选择是否激活 VO，并运行一个相当实用的教程来学习如何使用它。要关闭它，请再次按 Cmd + F5。
 
-> **备注：** 强烈建议至少学习一次教程——这是学习 VO 的极佳方式。
+> [!NOTE]
+> 强烈建议至少学习一次教程——这是学习 VO 的极佳方式。
 
 当 VO 激活时，显示屏幕外观大体相同，但你会在屏幕左下角看到一个黑色方框，里面显示了 VO 当前选中的信息。当前选中的内容也会被一个黑色边框围住且高亮显示——这个高亮被称为 **VO 光标**。
 
@@ -442,7 +457,8 @@ NVDA 将在你的计算机上运行。
 
 使用 NVDA 时，你会频繁使用“NVDA 修饰键”——这是一个特殊的键，除了 NVDA 的键盘快捷键之外，你还需要同时按下它以激活功能。使用修饰键是屏幕阅读器的常见做法，以避免其命令与其他软件命令冲突。对于 NVDA 来说，修饰键可以是 Insert 键（默认设置），或者是 CapsLock 键（你可以在 NVDA 欢迎界面中勾选第一个复选框来选择，操作需在点击 _OK_ 之前完成）。
 
-> **备注：** NVDA 在标识位置和其执行的操作方面比 VoiceOver 更加细腻。当你通过标题、列表等内容滚动时，所选项目通常会以微妙的边框进行高亮显示，但并不是所有元素都会这样。如果你感到方向迷失，可以按 Ctrl + F5 刷新当前页面，然后从页面顶部重新开始导航。
+> [!NOTE]
+> NVDA 在标识位置和其执行的操作方面比 VoiceOver 更加细腻。当你通过标题、列表等内容滚动时，所选项目通常会以微妙的边框进行高亮显示，但并不是所有元素都会这样。如果你感到方向迷失，可以按 Ctrl + F5 刷新当前页面，然后从页面顶部重新开始导航。
 
 NVDA 拥有众多键盘命令，这里不会全部列举。以下表格中列出了你在 web 页面测试中可能需要使用的一些基础命令。在键盘快捷键说明中，“NVDA”代表“NVDA 修饰键”。
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
index 8c9a54b0b46cec..e5e7bc0dbddbb2 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
@@ -38,7 +38,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
 
 我们将在下一篇文章中研究如何建立你自己的基于 Selenium 的测试系统。在这篇文章中，我们将看看如何设置一个任务运行器，并使用像上面提到的那些商业系统的基本功能。
 
-> **备注：** 以上两类并不相互排斥。可以设置一个任务运行器，通过 API 访问 Sauce Labs 或 LambdaTest 等服务，运行跨浏览器测试，并返回结果。我们在下面也会看一下这个。
+> [!NOTE]
+> 以上两类并不相互排斥。可以设置一个任务运行器，通过 API 访问 Sauce Labs 或 LambdaTest 等服务，运行跨浏览器测试，并返回结果。我们在下面也会看一下这个。
 
 ## 使用任务运行器作为自动化测试工具
 
@@ -63,7 +64,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
    npm install npm@latest -g
    ```
 
-> **备注：** 如果上述命令因权限错误而失败，[修复 npm 权限问题](https://docs.npmjs.com/getting-started/fixing-npm-permissions/)这篇文章应该可以帮你解决。
+> [!NOTE]
+> 如果上述命令因权限错误而失败，[修复 npm 权限问题](https://docs.npmjs.com/getting-started/fixing-npm-permissions/)这篇文章应该可以帮你解决。
 
 要在你的工程上使用基于 Node/npm 的包，你还需要把你的工程目录设为 npm 工程。这并不难。
 
@@ -352,7 +354,8 @@ exports.watch = watch;
 
 然后，你可以提高档次，使用 API 以编程方式访问功能，这意味着这种应用程序可以与任务运行器（如你自己的本地 Selenium 环境等）相结合，以创建自动化测试。
 
-> **备注：** 还有其他商业浏览器测试系统，但在本文中，我们将重点介绍 LambdaTest、Sauce Labs 和 BrowserStack。我们并不是说这些工具一定是最好的，但它们是很好的工具，对初学者来说很容易上手和运行。
+> [!NOTE]
+> 还有其他商业浏览器测试系统，但在本文中，我们将重点介绍 LambdaTest、Sauce Labs 和 BrowserStack。我们并不是说这些工具一定是最好的，但它们是很好的工具，对初学者来说很容易上手和运行。
 
 ### LambdaTest
 
@@ -361,7 +364,8 @@ exports.watch = watch;
 1. 首先，[在 LambdaTest 上免费注册](https://accounts.lambdatest.com/register)一个账号。
 2. 登录账号。在验证邮箱后，这应该是自动的。
 
-> **备注：** 与其他基于云的跨浏览器测试服务提供商不同，LambdaTest 提供了一个免费账户，你可以终身使用这个平台。高级计划和免费计划之间的唯一区别在于消费的数量。对于通过其 Selenium 网格进行的自动化测试，LambdaTest 提供每月 60 分钟的免费测试。
+> [!NOTE]
+> 与其他基于云的跨浏览器测试服务提供商不同，LambdaTest 提供了一个免费账户，你可以终身使用这个平台。高级计划和免费计划之间的唯一区别在于消费的数量。对于通过其 Selenium 网格进行的自动化测试，LambdaTest 提供每月 60 分钟的免费测试。
 
 #### 基础：手动测试
 
@@ -377,7 +381,8 @@ exports.watch = watch;
 4. 有了内置的图像编辑器，在推送给同事之前，可以以问题所在之处标记你的屏幕截图。![强调问题所在](mark-as-bug-3.png)
 5. 使用“标记为 bug”的按钮，你可以将 bug 推送到许多第三方工具，如 Jira、Asana、Trello 等。这样，你就可以直接从 LambdaTest 的测试会话中记录一个 bug 到你的项目管理实例中。查看所有的[第三方 LambdaTest 集成](https://www.lambdatest.com/integrations)。
 
-> **备注：** 所有在测试会话中捕获的视频和图像都被捕获在 LambdaTest 的图库、测试日志和问题跟踪器中。
+> [!NOTE]
+> 所有在测试会话中捕获的视频和图像都被捕获在 LambdaTest 的图库、测试日志和问题跟踪器中。
 
 ### Sauce Labs
 
@@ -406,7 +411,8 @@ exports.watch = watch;
 
 一旦你停止了会话，你就会回到 Manual Tests 标签，在那里你会看到你以前开始的每个手动会话的条目。点击其中一个条目，就可以看到该环节的更多数据。在这里，你可以下载你拍摄的任何屏幕截图，观看会话的视频，查看数据日志等等。
 
-> **备注：** 这已经非常有用了，而且比自己设置所有这些仿真器和虚拟机要方便得多。
+> [!NOTE]
+> 这已经非常有用了，而且比自己设置所有这些仿真器和虚拟机要方便得多。
 
 #### 进阶：Sauce Labs API
 
@@ -486,7 +492,8 @@ BrowserStack Live 仪表板允许你选择你想测试的设备和浏览器，
 
 ![测试设备](browserstack-test-device-sized.png)
 
-> **备注：** 一些移动设备选择旁边的蓝色设备图标表明你将在一个真实的设备上进行测试；没有这个图标的选择将在一个模拟器上运行。
+> [!NOTE]
+> 一些移动设备选择旁边的蓝色设备图标表明你将在一个真实的设备上进行测试；没有这个图标的选择将在一个模拟器上运行。
 
 你会发现，你可以在地址栏中输入 URL，并像你在真正的设备上所期望的那样使用其他控件。你甚至可以做一些事情，比如从设备上复制和粘贴到剪贴板上，用鼠标拖动上下滚动，或在支持设备（如 MacBook）的触摸板上使用适当的手势（如捏/缩放，两个手指滚动）。请注意，并非所有的功能都能在所有的设备上使用。
 
@@ -508,7 +515,8 @@ BrowserStack Live 仪表板允许你选择你想测试的设备和浏览器，
 - _特性_——显示你当前配置支持哪些功能，例如复制到剪贴板、手势支持等。
 - _停止_——终止会话。
 
-> **备注：** 这已经非常有用了，而且比自己设置所有这些仿真器和虚拟机要方便得多。
+> [!NOTE]
+> 这已经非常有用了，而且比自己设置所有这些仿真器和虚拟机要方便得多。
 
 #### 其他基本功能
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
index ac0fd560eefddb..b7b3daa943e11c 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
@@ -1,11 +1,13 @@
 ---
 title: 实现特性检测
 slug: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
+l10n:
+  sourceCommit: cde9330e9bbaddea72febf44dcc3a7db16fe1a11
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-特性检测涉及到确定浏览器是否支持某个代码块，并根据是否支持（或不支持）运行不同的代码，从而使浏览器能够始终提供工作体验，而不是在某些浏览器中崩溃/出错。本文详细介绍了如何编写自己的简单特性检测，如何使用库来加速实现，以及特性检测的本地功能，如 `@supports`。
+特性检测包括确定浏览器是否支持某个代码块，并根据支持（或不支持）运行不同的代码，这样浏览器就能始终提供正常的使用体验，而不会在某些浏览器中崩溃或出错。本文详细介绍了如何编写自己的简单特征检测、如何使用库加快实现速度，以及原生的特征检测特性（如 `@supports`）。
 
 <table>
   <tbody>
@@ -16,10 +18,10 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
           href="/zh-CN/docs/Learn/CSS"
           >CSS</a
         >
-        以及 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言，对<a
+        以及 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言，了解顶层的<a
           href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"
-          >跨浏览器测试</a
-        >原则有充分了解。
+          >跨浏览器测试原则</a
+        >。
       </td>
     </tr>
     <tr>
@@ -33,9 +35,9 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
 
 ## 特性检测的概念
 
-特性检测的思想是，你可以运行一个测试来确定当前浏览器是否支持某个特性，然后有条件地运行代码，以便在*支持*该特性的浏览器和*不支持*该特性的浏览器中提供可接受的体验，如果不这样做，在不支持你在代码中使用的特性的浏览器中将无法正确地显示你的网站，从而产生糟糕的用户体验。
+特性检测的理念在于，通过执行一个测试来确认当前浏览器是否支持某项特性。然后，根据测试结果有条件地执行代码，确保在*支持*该特性的浏览器和*不支持*的浏览器中都能提供一个可接受的用户体验。如果不采取这种做法，那么在那些不支持你代码中所用特性的浏览器上，你的网站将无法正确显示，从而导致糟糕的用户体验。
 
-让我们回顾一下，看看我们在[处理常见的 JavaScript 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#特性检测)中提到的例子——[地理位置 API](/zh-CN/docs/Web/API/Geolocation_API)（它暴露了网络浏览器所运行设备的可用位置数据）有其主要入口点。全局 [Navigator](/zh-CN/docs/Web/API/Navigator) 对象上有一个 `geolocation` 属性。因此，你可以通过使用类似以下的方法来检测浏览器是否支持地理位置：
+让我们回顾一下我们在[处理常见 JavaScript 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#特性检测)一文中提及的例子——[地理位置 API](/zh-CN/docs/Web/API/Geolocation_API)（它能够访问运行网页浏览器的设备的位置数据），其主要使用入口点是全局 [Navigator](/zh-CN/docs/Web/API/Navigator) 对象上的 `geolocation` 属性。因此，你可以使用类似以下的方法来检测浏览器是否支持地理位置特性：
 
 ```js
 if ("geolocation" in navigator) {
@@ -43,41 +45,39 @@ if ("geolocation" in navigator) {
     // 使用如 Google Maps API 显示地图上的位置
   });
 } else {
-  // 为用户提供静态地图的选择
+  // 为用户提供静态地图
 }
 ```
 
-要检测一个单一的特性，`if` 语句效果很好。对于复杂的应用，考虑使用一个成熟的特性检测库，而不是自己编写。Modernizr 是特性检测测试的工业标准，我们将在后面讲述一下。
-
-在我们继续之前，先说一件事——不要把特性检测和**浏览器嗅探**混淆起来（检测什么特定的浏览器在访问网站）——这是一种糟糕的做法，应该不惜一切代价加以阻止。参见[使用不良的浏览器嗅探代码](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#使用不良的浏览器嗅探代码)以了解更多细节。
+在我们继续之前，先说一件事——不要把特性检测和**浏览器嗅探**（检测什么浏览器在访问网站）混淆起来——后者是一种糟糕的做法，应该不惜一切代价加以阻止。参见[不要嗅探浏览器](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#不要嗅探浏览器)以了解更多细节。
 
 ## 撰写自己的特性检测代码
 
-在本节中，我们将研究如何在 CSS 和 JavaScript 中实现自己的特性检测测试。
+在本节中，我们将研究如何在 CSS 和 JavaScript 中实现特性检测测试。
 
 ### CSS
 
-你可以通过在 JavaScript 中测试 [_element.style.property_](/zh-CN/docs/Web/API/HTMLElement/style)（例如 `paragraph.style.rotate`）的存在来编写 CSS 特性测试。
+你可以通过在 JavaScript 中测试[_元素.style.属性_](/zh-CN/docs/Web/API/HTMLElement/style)（例如 `paragraph.style.rotate`）的存在来检测 CSS 特性。
 
-一个经典的例子可能是测试浏览器是否支持 [Subgrid](/zh-CN/docs/Web/CSS/CSS_grid_layout/Subgrid)；对于支持 [`grid-template-columns`](/zh-CN/docs/Web/CSS/grid-template-columns) 和 [`grid-template-rows`](/zh-CN/docs/Web/CSS/grid-template-rows) 的 subgrid 值的浏览器，我们可以在布局上使用 subgrid。对于不使用 subgrid 的浏览器，我们可以使用普通的网格，它可以正常工作，但没有那么酷的外观。
+一个经典的例子可能是在浏览器中测试[子网格](/zh-CN/docs/Web/CSS/CSS_grid_layout/Subgrid)的支持情况。对于支持 [`grid-template-columns`](/zh-CN/docs/Web/CSS/grid-template-columns) 和 [`grid-template-rows`](/zh-CN/docs/Web/CSS/grid-template-rows) 属性的 `subgrid` 值的浏览器来说，我们可以在布局中使用子网格。对于不支持的浏览器，我们可以使用常规的网格布局，虽然不太酷，但也能正常工作。
 
-以此为例，如果支持该值，我们可以包含一个 subgrid 样式表，如果不支持，则包含一个普通网格样式表。为此，我们可以在 HTML 文件的头部包含两个样式表：一个是所有的样式表，另一个在不支持 subgrid 的情况下实现默认布局：
+以此为例，我们可用在支持该值的情况下包含子网格样式表，而在不支持的情况下包含常规网格样式表。要实现这一点，我们可以在 HTML 文件的 head 部分包含两个样式表：一个包含所有的样式，另一个在不支持子网格的情况下实现默认的布局。
 
 ```html
 <link href="basic-styling.css" rel="stylesheet" />
 <link class="conditional" href="grid-layout.css" rel="stylesheet" />
 ```
 
-这里，`basic-styling.css` 处理所有我们想给每个浏览器的样式。我们还有两个 CSS 文件，`grid-layout.css` 和 `subgrid-layout.css`，它们包含了我们想根据浏览器的支持程度有选择地应用的 CSS。
+这里，`basic-styling.css` 处理所有每个浏览器都支持的样式。我们还有两个额外的 CSS 文件，`grid-layout.css` 和 `subgrid-layout.css`，它们包含了我们想根据浏览器的支持程度有选择地应用的 CSS。
 
-我们使用 JavaScript 来测试对 subgrid 值的支持，然后根据浏览器的支持情况更新我们的条件样式表的 `href`。
+我们先使用 JavaScript 来测试对 subgrid 值的支持，然后根据浏览器的支持情况更新我们的条件样式表的 `href`。
 
 我们可以在我们的文档中添加 `<script></script>` 元素，填充以下 JavaScript：
 
 ```js
 const conditional = document.querySelector(".conditional");
 if (CSS.supports("grid-template-columns", "subgrid")) {
-  conditional.setAttribute("href", "subgrid-layout.css.css");
+  conditional.setAttribute("href", "subgrid-layout.css");
 }
 ```
 
@@ -85,7 +85,7 @@ if (CSS.supports("grid-template-columns", "subgrid")) {
 
 #### @supports
 
-CSS 有一个原生的特性检测机制：{{cssxref("@supports")}} at-规则。这与[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)的工作方式类似，只是它不是根据分辨率、屏幕宽度或长宽比等媒体特性选择性地应用 CSS，而是根据是否支持某个 CSS 特性来选择性地应用 CSS，类似于 `CSS.supports()`。
+CSS 有一个原生的特性检测机制：{{cssxref("@supports")}} at-规则。它的工作方式与[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)类似，但不同的是，媒体查询是根据分辨率、屏幕宽度或{{glossary("aspect ratio", "长宽比")}}等媒体特性来选择性地应用 CSS，而 @supports 则是根据是否支持某个 CSS 特性来选择性地应用 CSS，类似于 `CSS.supports()`。
 
 例如，我们可以使用 `@supports` 重写我们之前的例子：
 
@@ -112,9 +112,9 @@ CSS 有一个原生的特性检测机制：{{cssxref("@supports")}} at-规则。
 }
 ```
 
-只有当前浏览器支持 `grid-template-columns: subgrid;` 声明时，这个 at-规则块才会应用里面的 CSS 规则。为了使一个带值的条件生效，你需要包含一个完整的声明（而不仅仅是一个属性名称），并且不包括结尾的分号。
+只有当浏览器支持 `grid-template-columns: subgrid;` 声明时，这个 at 规则块才会应用其中的 CSS 规则。为了使带有值的条件生效，你需要包含完整的声明（而不仅仅是属性名称），并且不包括结尾的分号。
 
-`@supports` 也支持 `AND`、`OR` 和 `NOT` 逻辑——如果 subgrid 选项不可用，另一个块应用常规网格布局：
+`@supports` 还支持 `AND`、`OR` 和 `NOT` 逻辑——如果 subgrid 选项不可用，则另一个代码块会应用常规网格布局：
 
 ```css
 @supports not (grid-template-columns: subgrid) {
@@ -122,19 +122,19 @@ CSS 有一个原生的特性检测机制：{{cssxref("@supports")}} at-规则。
 }
 ```
 
-这比前面的例子更方便，我们可以在 CSS 中进行所有的特性检测，不需要 JavaScript；而且我们可以在一个 CSS 文件中处理所有的逻辑，减少 HTTP 请求。由于这个原因，它是确定浏览器对 CSS 特性支持的首选方法。
+这比前面的例子更方便，因为我们可以在 CSS 中进行所有的特性检测，而不需要使用 JavaScript。此外，我们可以在一个 CSS 文件中处理所有的逻辑，从而减少 HTTP 请求。因此，这是确定浏览器对 CSS 特性支持的首选方法。
 
 ### JavaScript
 
-我们在前面已经看到了一个 JavaScript 特性检测测试的例子。一般来说，这种测试是通过几种常见的模式之一完成的。
+我们在前面已经看到了一个 JavaScript 特性检测的例子。一般来说，这种测试是通过几种常见的模式之一完成的。
 
-但请记住，有些特性是已知不可检测的，见 Modernizr 在 2016 年发布的[不可检测的列表](https://github.com/Modernizr/Modernizr/wiki/Undetectables)。
+常见的探测特性的模式包括：
 
 - 对象的成员
 
   - : 检查一个特定的方法或属性（通常是使用 API 的入口或你正在检测的其他特性）是否存在于其父 `Object` 中。
 
-    我们前面的例子使用这种模式来检测 [Geolocation](/zh-CN/docs/Web/API/Geolocation_API) 的支持，通过测试 [`navigator`](/zh-CN/docs/Web/API/Navigator) 对象的 `geolocation`成员：
+    我们前面的例子使用这种模式（通过测试 [`navigator`](/zh-CN/docs/Web/API/Navigator) 对象的 `geolocation` 成员）来检测 [Geolocation](/zh-CN/docs/Web/API/Geolocation_API) 的支持：
 
     ```js
     if ("geolocation" in navigator) {
@@ -157,19 +157,22 @@ CSS 有一个原生的特性检测机制：{{cssxref("@supports")}} at-规则。
     }
     ```
 
-    > **备注：** 上例中的双非运算符（`!!`）是一种将返回值强制转换为“适当的”布尔值的方法，而不是{{glossary("Truthy","真值")}}/{{glossary("Falsy","假值")}}，后者可能使结果偏离。
+    > [!NOTE]
+    > 上例中的双非运算符（`!!`）是一种将返回值强制转换为“适当的”布尔值的方法，而不是{{glossary("Truthy","真值")}}/{{glossary("Falsy","假值")}}，后者可能使结果偏离。
 
 - 方法在元素上的特定返回值
 
-  - : 使用 {{domxref("Document.createElement()")}} 在内存中创建一个元素，然后检查该元素上是否存在一个方法。如果有的话，检查它的返回值。请参阅[深入了解 HTML 视频格式检测](https://diveinto.html5doctor.com/detect.html#video-formats)中的特性测试，了解这种模式的一个例子。
+  - : 使用 {{domxref("Document.createElement()")}} 在内存中创建一个元素，然后检查该元素是否存在方法。如果有的话，检查它的返回值。请参阅[深入了解 HTML 视频格式检测](https://diveinto.html5doctor.com/detect.html#video-formats)中的特性测试，了解这种模式的一个例子。
 
 - 元素保留分配的属性值
 
   - : 使用 {{domxref("Document.createElement()")}} 在内存中创建一个元素，将一个属性设置为特定值，然后检查该值是否被保留。关于这种模式的例子，请参见[深入了解 HTML \<input> 类型检测](https://diveinto.html5doctor.com/detect.html#input-types)中的特性测试。
 
+不过要记住，有些特征是无法检测到的。在这种情况下，你需要使用其他的方法，例如使用 {{Glossary("Polyfill", "polyfill")}}。
+
 #### matchMedia
 
-现在，我们还想提到 {{domxref("Window.matchMedia")}} 这个 JavaScript 特性。这是一个允许你在 JavaScript 内部运行媒体查询测试的属性。它看起来像这样：
+现在，我们还想提到 {{domxref("Window.matchMedia")}} 这个 JavaScript 特性。借助这个属性，你可以在 JavaScript 内部运行媒体查询测试。它看起来像这样：
 
 ```js
 if (window.matchMedia("(max-width: 480px)").matches) {
@@ -177,13 +180,16 @@ if (window.matchMedia("(max-width: 480px)").matches) {
 }
 ```
 
-举个例子，我们的 [Snapshot](https://github.com/chrisdavidmills/snapshot) 演示利用它来有选择地应用 Brick JavaScript 库，用它来处理 UI 布局，但只适用于小屏幕布局（480px 宽或以下）。我们首先使用 `media` 属性，仅在页面宽度为 480px 或更小的情况下，将 Brick CSS 应用于页面：
+举个例子，我们的 [Snapshot](https://github.com/chrisdavidmills/snapshot) 演示了如何有选择地应用 Brick JavaScript 库来处理 UI 布局，使其仅应用于小屏幕布局（宽度为 480px 或以下）。我们首先使用 `media` 属性，仅在页面宽度为 480px 或更小的情况下，将 Brick CSS 应用于页面：
 
-```css
-<link href="dist/brick.css" rel="stylesheet" media="all and (max-width: 480px)">
+```html
+<link
+  href="dist/brick.css"
+  rel="stylesheet"
+  media="all and (max-width: 480px)" />
 ```
 
-然后我们在 JavaScript 中多次使用 `matchMedia()`，只在小屏幕布局时运行 Brick 导航特性（在宽屏幕布局中，所有东西都可以一次看到，所以我们不需要在不同的视图之间导航）。
+然后我们在 JavaScript 中多次使用 `matchMedia()`，只在小屏幕布局时运行 Brick 导航功能（在宽屏幕布局中，所有内容都可以一次看到，所以我们不需要在不同的视图之间导航）。
 
 ```js
 if (window.matchMedia("(max-width: 480px)").matches) {
@@ -191,149 +197,10 @@ if (window.matchMedia("(max-width: 480px)").matches) {
 }
 ```
 
-## 使用 Modernizr 实现特性检测
-
-使用上述技术实现自己的特性检测测试是可能的。然而，你也可以使用一个专门的特性检测库，因为它使事情变得更加简单。所有特性检测库之母是 [Modernizr](https://modernizr.com/)，它可以检测你所需要的一切。现在让我们来看看如何使用它。
-
-当你在尝试使用 Modernizr 时，你不妨使用开发版，它包括所有可能的特性检测测试。现在就来下载吧：
-
-1. 点击 [Development build](https://modernizr.com/download?do_not_use_in_production) 链接。
-2. 点击页面上方的粉色大型 _Build_ 按钮。
-3. 在出现的对话框中，点击顶部的 _Download_ 链接。
-
-把它保存在合理的地方，就像你在本系列其他指南那样使用一个目录。
-
-当你在生产环境中使用 Modernizr 时，你可以到你已经访问过的[下载页面](https://modernizr.com/download)，点击加号按钮，只包括你需要的特性检测。然后，当你点击 _Build_ 按钮时，你将下载一个只包含这些特性检测的自定义构建，使文件大小更小。
-
-### CSS
-
-让我们来看看 Modernizr 在选择性应用 CSS 方面是如何工作的。
-
-1. 首先，复制提供的 [`supports-feature-detect.html`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html) 和 [`supports-styling.css`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/supports-styling.css) 文件中的内容。将它们保存为 `modernizr-css.html` 和 `modernizr-css.css`。
-2. 更新 HTML 中的 {{htmlelement("link")}} 元素，使其指向正确的 CSS 文件（你也应该将 {{htmlelement("title")}} 元素更新为更合适的内容！）：
-
-   ```html
-   <link href="modernizr-css.css" rel="stylesheet" />
-   ```
-
-3. 在这个 `<link>` 元素上面，添加一个 {{htmlelement("script")}} 元素，将 Modernizr 库应用到页面，如下图所示。这需要在任何可能使用它的 CSS（或 JavaScript）之前应用到页面上。
-
-   ```html
-   <script src="modernizr-custom.js"></script>
-   ```
-
-4. 现在编辑你的 `<html>` 起始标签，使它改变成以下这样：
-
-   ```html
-   <html lang="en-us" class="no-js">
-     …
-   </html>
-   ```
-
-此时，试着加载你的页面，你会对 Modernizr 在 CSS 特性方面的工作有一个概念。如果你看一下浏览器开发者工具的 DOM 检查器，你会发现 Modernizr 已经像这样更新了你的 `<html>` 元素的 `class` 属性：
-
-```html
-<html
-  class="js no-htmlimports no-proximity sizes no-flash transferables applicationcache blobconstructor blob-constructor no-contextmenu (and loads of more values)">
-  …
-</html>
-```
-
-它现在包含了大量的类，表示对不同技术特性的支持状态。举例来说，如果浏览器完全不支持 grid，`<html>` 将被赋予 `no-cssgrid` 的类名。如果你在类列表中搜索，你还会看到其他与网格有关的类，比如：
-
-- `cssgridlegacy` 或 `no-cssgridlegacy`，取决于是否支持传统版本的网格。
-
-> **备注：** 你可以找到大部分类名的含义列表——见 [Modernizr 检测的特性](https://modernizr.com/docs#features)。
-
-不幸的是，Modernizr 并没有测试对一些新的 CSS 特性的支持，如容器查询、层叠层或子网格。如果它这样做了，我们将以如下方式更新我们的 `@supports` 例子：
-
-```css
-main {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-template-rows: repeat(4, minmax(100px, auto));
-}
-
-.item {
-  display: grid;
-  grid-column: 2 / 7;
-  grid-row: 2 / 4;
-  grid-template-rows: repeat(3, 80px);
-}
-
-/* 支持 subgrid 的浏览器的属性 */
-.csssubgrid .item {
-  grid-template-columns: subgrid;
-}
-
-.csssubgrid .subitem {
-  grid-column: 3 / 6;
-  grid-row: 1 / 3;
-}
-
-/* 不支持 subgrid 的浏览器的回落 */
-.no-csssubgrid .subitem {
-  display: flex;
-  flex: 33%;
-}
-```
-
-那么，这是如何工作的呢？因为所有这些类名都被放在了 `<html>` 元素上，你可以使用特定的后代选择器来针对那些支持或不支持某个特性的浏览器。所以在这里，我们只对支持 subgrid 的浏览器应用最上面的规则，而对不支持的浏览器应用最下面的规则（`no-csssubgrid`）。
-
-> **备注：** Modernizr 的所有 HTML 和 JavaScript 特性测试都以类名的形式报告，因此，如果需要，你可以根据浏览器是否支持 HTML 或 JavaScript 特性，有选择地应用 CSS。
-
-### JavaScript
-
-Modernizr 也同样为实现 JavaScript 特性检测做了充分准备。它通过使全局的 `Modernizr` 对象对它所应用的页面可用，它包含了作为 `true`/`false` 属性的特性检测结果。
-
-例如，在浏览器中加载我们的 [`modernizr-css.html`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html) 示例，然后试着在你的 JavaScript 控制台中输入 `Modernizr.`，然后再输入其中的一些类名（这里也一样）。比如：
-
-```
-Modernizr.flexbox
-Modernizr.xhr2
-Modernizr.fetch
-```
-
-控制台将返回 `true`/`false` 值，表示你的浏览器是否支持这些特性。
-
-让我们看一个示例来说明你如何使用这些属性。
-
-1. 首先，将 [`modernizr-js.html`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/modernizr-js.html) 示例文件复制到本地。
-2. 使用 `<script>` 元素将 Modernizr 库附加到 HTML 中，正如我们在以前的演示中所做的那样。把它放在现有的 `<script>` 元素上面，该元素将谷歌地图 API 附加到页面上。
-3. 接下来，在第二个 `<script>` 元素中的 `YOUR-API-KEY` 占位符文本（就像现在这样）填写一个有效的谷歌地图 API 密钥。要获得密钥，请登录谷歌账户，进入[获取密钥/认证](https://developers.google.com/maps/documentation/javascript/get-api-key)页面，然后点击蓝色的*获取密钥*按钮并按照说明操作。
-4. 最后，在 HTML 主体的底部（就在 `</body>` 标签之前）再添加一个 `<script>` 元素，并在标签内放入以下脚本：
-
-   ```js
-   if (Modernizr.geolocation) {
-     navigator.geolocation.getCurrentPosition(function (position) {
-       let latlng = new google.maps.LatLng(
-         position.coords.latitude,
-         position.coords.longitude,
-       );
-       let myOptions = {
-         zoom: 8,
-         center: latlng,
-         mapTypeId: google.maps.MapTypeId.TERRAIN,
-         disableDefaultUI: true,
-       };
-       let map = new google.maps.Map(
-         document.getElementById("map_canvas"),
-         myOptions,
-       );
-     });
-   } else {
-     const para = document.createElement("p");
-     para.textContent = "啊，没有地理位置支持！";
-     document.body.appendChild(para);
-   }
-   ```
-
-试试你的例子吧！这里我们使用 `Modernizr.geolocation` 测试来检查当前浏览器是否支持地理定位。如果支持，我们就运行一些代码，获取你的设备的当前位置，并将其绘制在谷歌地图上。
-
 ## 总结
 
-这篇文章合理地涵盖了特性检测的细节，通过主要的概念，向你展示了如何实现你自己的特性检测测试和使用 Modernizr 库来更容易地实现测试。
+本文详细介绍了特征检测的主要概念，并向你展示了如何实施自己的特征检测测试。
 
-接下来，我们将了解一下自动测试。
+接下来，我们将开始了解自动化测试。
 
 {{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index ac8de97fd9e2d3..2ae077a537cb23 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -51,7 +51,8 @@ HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常
 
 总的来说，这涉及到检查你的 HTML 和 CSS 代码是否格式规范、无任何语法错误。
 
-> **备注：** CSS 与 HTML 之间的一个常见挑战是 CSS 规则之间的冲突。当引入第三方代码时，这些问题可能变得很棘手。比如，你可能在使用某个 CSS 框架时，发现它的某个类名与你已经在其他地方使用的类名产生了冲突。或者，你可能会注意到，某些第三方 API（如用于生成广告横幅的脚本）生成的 HTML 中包含了与你在其他地方使用的类名或 ID 相同的名称。为了避免这种情况，你需要先研究你所使用的工具，并在设计代码时考虑如何与它们协作或避开它们。给 CSS 添加“命名空间”也是一个不错的做法，例如，如果你有一个小组件，确保它有一个唯一的类名，并使用这个类名来选择组件内的元素，这样可以减少冲突的可能性。例如，使用 `.audio-player ul a`。
+> [!NOTE]
+> CSS 与 HTML 之间的一个常见挑战是 CSS 规则之间的冲突。当引入第三方代码时，这些问题可能变得很棘手。比如，你可能在使用某个 CSS 框架时，发现它的某个类名与你已经在其他地方使用的类名产生了冲突。或者，你可能会注意到，某些第三方 API（如用于生成广告横幅的脚本）生成的 HTML 中包含了与你在其他地方使用的类名或 ID 相同的名称。为了避免这种情况，你需要先研究你所使用的工具，并在设计代码时考虑如何与它们协作或避开它们。给 CSS 添加“命名空间”也是一个不错的做法，例如，如果你有一个小组件，确保它有一个唯一的类名，并使用这个类名来选择组件内的元素，这样可以减少冲突的可能性。例如，使用 `.audio-player ul a`。
 
 ### 验证
 
@@ -81,7 +82,8 @@ HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常
 
 大多数浏览器中内置的开发者工具也提供了有用的工具来查找错误，主要是针对 CSS 的。
 
-> **备注：** 在开发工具中，HTML 错误不会直接显示，因为浏览器会尝试自动纠正错误的标记；目前，W3C 验证器是佳的获取 HTML 错误的方法——请参阅上面的[验证](#验证)。
+> [!NOTE]
+> 在开发工具中，HTML 错误不会直接显示，因为浏览器会尝试自动纠正错误的标记；目前，W3C 验证器是佳的获取 HTML 错误的方法——请参阅上面的[验证](#验证)。
 
 例如，在 Firefox 中，CSS 检查器将显示未应用的 CSS 声明，并带有警告三角形。悬停在警告三角上，其将提供描述性的错误信息：
 
@@ -147,7 +149,8 @@ HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常
 
 {{EmbedGHLiveSample("learning-area/tools-testing/cross-browser-testing/html-css/forms-test", '100%', 150)}}
 
-> **备注：** 你也可以在 GitHub 上的 [forms-test.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html) 上查看此实时示例（也可以参阅[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/forms-test.html)）。
+> [!NOTE]
+> 你也可以在 GitHub 上的 [forms-test.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html) 上查看此实时示例（也可以参阅[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/forms-test.html)）。
 
 如果你查看示例，当你尝试输入数据时，UI 特性会发挥作用。在具有动态键盘的设备上，将显示特定于类型的输入面板（keypad）。在不支持新特性的浏览器上，输入框将默认为普通文本输入框，使得用户仍然可以输入正确的信息。
 
@@ -159,7 +162,8 @@ CSS 的情况可以说比 HTML 更好一些。如果浏览器遇到一个它不
 
 ![具有圆角、内阴影和投影效果的红色按钮](blingy-button.png)
 
-> **备注：** 你也可以在 GitHub 上浏览这个实时运行的例子：[button-with-fallback.html](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)（也可以看[源代码](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)）。
+> [!NOTE]
+> 你也可以在 GitHub 上浏览这个实时运行的例子：[button-with-fallback.html](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)（也可以看[源代码](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)）。
 
 该按钮有一些样式声明，但我们最感兴趣的两个如下：
 
@@ -191,7 +195,8 @@ button:active {
 
 为了解决这个问题，我们添加了第二个 `background-color` 声明，指定了一个十六进制颜色——这在非常老旧的浏览器中也得到支持，可以作为现代炫酷特性的后备方案。浏览器在访问此页面时，首先会应用第一个 `background-color` 值；当遇到第二个 `background-color` 声明时，如果浏览器支持 RGB 颜色，就会用这个值覆盖之前的值。如果不支持，它就会忽略整个声明，继续执行后续样式。
 
-> **备注：** 对于其他 CSS 特性，如[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)、[`@font-face`](/zh-CN/docs/Web/CSS/@font-face) 和 [`@supports`](/zh-CN/docs/Web/CSS/@supports) 块来说，也是如此——如果不被支持，浏览器就会忽略它们。
+> [!NOTE]
+> 对于其他 CSS 特性，如[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)、[`@font-face`](/zh-CN/docs/Web/CSS/@font-face) 和 [`@supports`](/zh-CN/docs/Web/CSS/@supports) 块来说，也是如此——如果不被支持，浏览器就会忽略它们。
 
 ### 选择器支持
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
index 87bef897f7c593..e9509411f424fd 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
@@ -80,7 +80,8 @@ l10n:
 
 你应该列出这些潜在的问题。
 
-> **备注：** 你可在 MDN（就是本网站）找到浏览器对不同技术特性的支持情况的信息。你还可以查阅 [caniuse.com](https://caniuse.com/)，以了解更多有用的详细信息。
+> [!NOTE]
+> 你可在 MDN（就是本网站）找到浏览器对不同技术特性的支持情况的信息。你还可以查阅 [caniuse.com](https://caniuse.com/)，以了解更多有用的详细信息。
 
 一旦你们就这些细节达成共识，你就可以开始开发网站了。
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index e1ac66eed1b1ab..630dfa943cbdc6 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -64,7 +64,7 @@ if (window.XMLHttpRequest) {
 - 对 [this](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的困惑，表现在它适用于什么作用域，它的值是否是你所期望的。你可以阅读[“this”的含义](/zh-CN/docs/Learn/JavaScript/Objects/Basics#“this”的含义)，它做了一点浅显的介绍；你还应该研究像[这样](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143)的例子，它显示了一个典型的模式，即把 `this` 作用域保存到一个单独的变量中，然后在嵌套函数中使用这个变量，这样你就可以确定能够把功能应用到正确的 `this` 作用域。
 - 在使用全局变量进行迭代的循环中不正确地使用函数（更普遍的是“弄错作用域”）。
 
-> **标注：**
+> [!CALLOUT]
 > 例如，在 [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) 中（见[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)），我们使用一个用 `var` 定义的变量循环了 10 次，每次都创建一个段落并给它添加 [onclick](/zh-CN/docs/Web/API/Element/click_event) 事件处理器。当点击时，我们希望每个段落都能显示一个包含其编号（创建时的 `i` 值）的警告信息。但是，它们都报告 `i` 为 11，因为 `for` 循环在调用嵌套函数之前就完成了所有的迭代。
 >
 > 最简单的解决方案是用 `let` 而不是 `var` 来声明迭代变量，这样与函数相关的 `i` 的值对每个迭代都是唯一的。请参阅 [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html)（也可以参阅[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/good-for-loop.html)）以查看能正常工作的版本。
@@ -103,7 +103,8 @@ npm install -g jshint
 
 你也可以将这些工具与任务运行器/构建工具（如 [Gulp](https://gulpjs.com/) 或 [Webpack](https://webpack.github.io/)）一起使用，以便在开发过程中自动对你的 JavaScript 进行 lint。（见后面文章中的[使用任务运行器来自动测试工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#使用任务运行器作为自动化测试工具)。）关于 ESLint 选项，请参见 [ESLint 集成](https://eslint.org/docs/user-guide/integrations)；Grunt 开箱即支持 JSHint，并且还有其他可用的集成，例如 [Webpack 的 JSHint 加载器](https://github.com/webpack-contrib/jshint-loader)。
 
-> **备注：** 尽管 ESLint 的安装和配置过程比起 JSHint 更繁琐，但是它也更强大。
+> [!NOTE]
+> 尽管 ESLint 的安装和配置过程比起 JSHint 更繁琐，但是它也更强大。
 
 ### 浏览器开发者工具
 
@@ -177,7 +178,8 @@ fetch(requestURL).then((response) => {
 
 不幸的是，我们仍然有同样的错误，问题并没有消失。现在让我们使用浏览器开发工具的一个更复杂的特性来调查一下这个问题，它在 Firefox 中被称为 [JavaScript 调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)。
 
-> **备注：** 其他浏览器中也有类似的工具；Chrome 中的[来源面板](https://developer.chrome.com/docs/devtools/#sources)、Safari 中的调试器（见 [Safari Web 开发工具](https://developer.apple.com/safari/tools/)）等。
+> [!NOTE]
+> 其他浏览器中也有类似的工具；Chrome 中的[来源面板](https://developer.chrome.com/docs/devtools/#sources)、Safari 中的调试器（见 [Safari Web 开发工具](https://developer.apple.com/safari/tools/)）等。
 
 在 Firefox 中，调试器标签页大致如图所示：
 
@@ -206,7 +208,8 @@ fetch(requestURL).then((response) => {
 
 我们希望你自己尝试修复这个问题。作为起点，请查看 {{domxref("Response")}} 对象的文档。如果遇到困难，可以在 <https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-fixed> 找到修复后的源代码。
 
-> **备注：** 调试器标签页还有许多其他有用的特性，我们没有在这里讨论，比如条件断点和观察表达式。更多信息，请参见[调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)页面。
+> [!NOTE]
+> 调试器标签页还有许多其他有用的特性，我们没有在这里讨论，比如条件断点和观察表达式。更多信息，请参见[调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)页面。
 
 ### 性能问题
 
@@ -217,7 +220,8 @@ fetch(requestURL).then((response) => {
 - 使用 API 时，请确保在不需要时关闭 API 特性；因为某些 API 调用在处理能力方面可能非常耗费资源。例如，在显示视频流时，如果视频不在视线范围内，请确保关闭它。在使用重复调用的地理位置 API 跟踪设备位置时，如果用户不再需要，也应及时关闭。
 - 动画可能会对性能造成重大影响。尽管许多 JavaScript 库提供了由 JavaScript 控制的动画功能，但使用浏览器原生特性（如 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)或新兴的 [Web 动画 API](/zh-CN/docs/Web/API/Web_Animations_API)）执行动画通常更高效。建议阅读 Brian Birtles 的文章[使用 Element.animate 制作不重要的动画](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/)，了解动画成本高昂的原因、提升动画性能的技巧，以及 Web 动画 API 的相关信息。
 
-> **备注：** 阿迪—奥斯曼尼的[编写快速、内存效率高的 JavaScript 代码](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/)包含了大量细节和一些有助于提高 JavaScript 性能的出色建议。
+> [!NOTE]
+> 阿迪—奥斯曼尼的[编写快速、内存效率高的 JavaScript 代码](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/)包含了大量细节和一些有助于提高 JavaScript 性能的出色建议。
 
 ## 跨浏览器 JavaScript 问题
 
@@ -234,7 +238,8 @@ fetch(requestURL).then((response) => {
 
 有几种处理新特性支持的策略可以探索，让我们来探讨一下最常见的几种。
 
-> **备注：** 这些策略并不是相互独立的——当然，你可以根据需要将它们结合使用。例如，你可以使用特性检测来确定是否支持某项特性；如果不支持，你可以运行代码来加载 polyfill 或库来处理缺乏支持的情况。
+> [!NOTE]
+> 这些策略并不是相互独立的——当然，你可以根据需要将它们结合使用。例如，你可以使用特性检测来确定是否支持某项特性；如果不支持，你可以运行代码来加载 polyfill 或库来处理缺乏支持的情况。
 
 #### 特性检测
 
@@ -260,7 +265,8 @@ if ("geolocation" in navigator) {
 
 最后一点，不要将特性检测与**浏览器嗅探**（检测访问站点的特定浏览器）混淆——这是一种应该被全面反对的做法。有关更多详细信息，请参见后文的[不要嗅探浏览器](#不要嗅探浏览器)。
 
-> **备注：** 特性检测将在本模块的专门文章中详细介绍。
+> [!NOTE]
+> 特性检测将在本模块的专门文章中详细介绍。
 
 #### 库
 
@@ -278,7 +284,8 @@ JavaScript 库往往有几个主要的种类（有些库包含其中的一个以
 
 库的基本用法往往包括下载库的文件（JavaScript，可能还有一些 CSS 或其他依赖项）并将其附加到你的页面上（例如通过 {{htmlelement("script")}} 元素），尽管这些库通常还有许多其他用法选择，例如将其作为 [Bower](https://bower.io/) 组件安装，或通过 [Webpack](https://webpack.github.io/) 模块捆绑器将其作为依赖项。你需要阅读这些库的单独安装页面以获得更多信息。
 
-> **备注：** 你也会在 web 上遇到一些 JavaScript 框架，比如 [Ember](https://emberjs.com/) 和 [Angular](https://angularjs.org/)。库通常可用于解决个别问题并放入现有网站中，而框架则更倾向于开发复杂 web 应用的完整解决方案。
+> [!NOTE]
+> 你也会在 web 上遇到一些 JavaScript 框架，比如 [Ember](https://emberjs.com/) 和 [Angular](https://angularjs.org/)。库通常可用于解决个别问题并放入现有网站中，而框架则更倾向于开发复杂 web 应用的完整解决方案。
 
 #### Polyfill
 
@@ -312,9 +319,11 @@ Polyfill 也由第三方的 JavaScript 文件组成，你可以把它们放到
 5. 即使你在不支持 [Fetch](/zh-CN/docs/Web/API/fetch) 的浏览器中加载它，你仍然能够看到花的图像——这不是很酷吗？
    ![一个 fetch 基本示例的标题，配一张紫色花朵的照片](fetch-image.jpg)
 
-> **备注：** 你可以在 [fetch-polyfill-finished.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) 找到我们的完成版（也请看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)）。
+> [!NOTE]
+> 你可以在 [fetch-polyfill-finished.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) 找到我们的完成版（也请看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)）。
 
-> **备注：** 在此重申，polyfill 有许多种方法可以利用——具体请查阅每个 polyfill 单独的文档。
+> [!NOTE]
+> 在此重申，polyfill 有许多种方法可以利用——具体请查阅每个 polyfill 单独的文档。
 
 你可能会问：“为什么我们要加载 polyfill 代码，即便在不需要的时候？”这是一个合理的疑问。随着网站变得更加复杂，开始引入更多的库和 polyfill，你可能会加载大量不必要的代码。这会影响网站性能，尤其是在性能较低的设备上。因此，只有在需要时才加载相应的文件是明智的。
 
@@ -366,7 +375,8 @@ function loadScript(src, done) {
 
 对于那些想要使用现代 JavaScript 特性的开发者来说，另一个选择是将采用 ECMAScript 6/ECMAScript 2015 特性的代码转换成能够在旧版浏览器上运行的版本。
 
-> **备注：** 这个过程被称为“转译”。这并不是将代码编译到更低级别以便在计算机上运行（像 C 语言代码那样）；而是将代码转换为另一种同等抽象级别的语法，使其可以以类似的方式运行，尽管细节上有所不同（在这个例子中，是将一种 JavaScript 风格转换为另一种风格）。
+> [!NOTE]
+> 这个过程被称为“转译”。这并不是将代码编译到更低级别以便在计算机上运行（像 C 语言代码那样）；而是将代码转换为另一种同等抽象级别的语法，使其可以以类似的方式运行，尽管细节上有所不同（在这个例子中，是将一种 JavaScript 风格转换为另一种风格）。
 
 [Babel.js](https://babeljs.io/) 是一种常见的转译器，但还有其他转译器。
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
index 1b1108b8f1c78f..430151a8e66467 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
@@ -41,7 +41,8 @@ l10n:
 
 在后续章节中，我们将依照此格式逐步构建支持图表。
 
-> **备注：** 雅虎通过他们的[分级浏览器支持](https://github.com/yui/yui3/wiki/Graded-Browser-Support)方法，最先使这一方法流行起来。
+> [!NOTE]
+> 雅虎通过他们的[分级浏览器支持](https://github.com/yui/yui3/wiki/Graded-Browser-Support)方法，最先使这一方法流行起来。
 
 ### 预测你的目标受众最常使用的浏览器
 
@@ -61,7 +62,8 @@ Opera Mini [在运行复杂 JavaScript 方面性能不太好](https://dev.opera.
 
 如果你的目标受众主要位于其他地方，那么常用的浏览器和操作系统可能与上述不同。
 
-> **备注：** “公司 CEO 使用的是黑莓手机，所以我们最好确保网站在该手机上显示良好”也是需要考虑的因素。
+> [!NOTE]
+> “公司 CEO 使用的是黑莓手机，所以我们最好确保网站在该手机上显示良好”也是需要考虑的因素。
 
 ### 浏览器份额统计
 
@@ -96,7 +98,8 @@ Opera Mini [在运行复杂 JavaScript 方面性能不太好](https://dev.opera.
 
 你可以通过从左侧菜单选择*用户 > 技术 > 浏览器和操作系统*来查看用户使用的浏览器和操作系统。
 
-> **备注：** 在使用 Google Analytics 时，你需要注意可能存在的误导性偏见，例如，“我们没有 Firefox 移动版用户”可能导致你不再支持 Firefox 移动版。但是，你之所以没有任何 Firefox 移动版用户，可能恰恰就是因为你的网站在 Firefox 移动版上受支持不佳。
+> [!NOTE]
+> 在使用 Google Analytics 时，你需要注意可能存在的误导性偏见，例如，“我们没有 Firefox 移动版用户”可能导致你不再支持 Firefox 移动版。但是，你之所以没有任何 Firefox 移动版用户，可能恰恰就是因为你的网站在 Firefox 移动版上受支持不佳。
 
 ### 其他注意事项
 
@@ -168,9 +171,11 @@ A 级：
 
 下面我们将介绍其他选项。
 
-> **备注：** 已经有一些人在努力创建公共可使用的设备实验环境——参见 [Open Device Labs](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/)。
+> [!NOTE]
+> 已经有一些人在努力创建公共可使用的设备实验环境——参见 [Open Device Labs](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/)。
 
-> **备注：** 我们还需要考虑无障碍性——你可以在计算机上安装一些有用的工具来进行无障碍性测试，但我们将在本课程后面的“处理常见无障碍性问题”文章中进行介绍。
+> [!NOTE]
+> 我们还需要考虑无障碍性——你可以在计算机上安装一些有用的工具来进行无障碍性测试，但我们将在本课程后面的“处理常见无障碍性问题”文章中进行介绍。
 
 ### 模拟器
 
@@ -187,13 +192,15 @@ A 级：
 
 - 如果你想要测试 Opera Mini，可以单独模拟 [Opera Mini](https://dev.opera.com/articles/installing-opera-mini-on-your-computer/)。
 
-> **备注：** 许多模拟器实际上需要使用虚拟机（参见下文）；当出现这种情况时，通常会提供说明，并且/或者虚拟机的使用已纳入模拟器的安装程序中。
+> [!NOTE]
+> 许多模拟器实际上需要使用虚拟机（参见下文）；当出现这种情况时，通常会提供说明，并且/或者虚拟机的使用已纳入模拟器的安装程序中。
 
 ### 虚拟机
 
 虚拟机是一种在台式计算机上运行的软件应用，它允许用户模拟整个操作系统。每个操作系统都在其自己的虚拟硬盘上运行（这通常由主机机器硬盘上的一个大型文件来表示），实现了隔离。市面上有多种流行的虚拟机应用程序，包括 [Parallels](https://www.parallels.com/)、[VMWare](https://www.vmware.com/) 和 [Virtual Box](https://www.virtualbox.org/wiki/Downloads)。我们更倾向于推荐后者，因为它是免费的。
 
-> **备注：** 运行虚拟机仿真需要大量的硬盘空间；每个模拟的操作系统可能会占用大量内存。你可以选择每次安装所需的硬盘空间；大约 10GB 的空间应该足够了，但有一些建议是使用多达 50GB 或更多的空间，以确保操作系统的可靠运行。大多数虚拟机应用程序都提供了创建**动态分配**的硬盘的功能，它会根据需要自动增长和收缩，这是一个很好的选择。
+> [!NOTE]
+> 运行虚拟机仿真需要大量的硬盘空间；每个模拟的操作系统可能会占用大量内存。你可以选择每次安装所需的硬盘空间；大约 10GB 的空间应该足够了，但有一些建议是使用多达 50GB 或更多的空间，以确保操作系统的可靠运行。大多数虚拟机应用程序都提供了创建**动态分配**的硬盘的功能，它会根据需要自动增长和收缩，这是一个很好的选择。
 
 要使用 Virtual Box，你需要：
 
@@ -213,7 +220,8 @@ A 级：
 
 ![如何为特定操作系统安装 Virtual Box](virtualbox-installer.png)
 
-> **警告：** 请确保此时你有要安装在虚拟机上的操作系统映像，并立即进行安装。如果你在此时取消该过程，可能会导致虚拟机无法使用，并需要删除并重新创建它。这并不会导致严重问题，但会很麻烦。
+> [!WARNING]
+> 请确保此时你有要安装在虚拟机上的操作系统映像，并立即进行安装。如果你在此时取消该过程，可能会导致虚拟机无法使用，并需要删除并重新创建它。这并不会导致严重问题，但会很麻烦。
 
 完成该过程后，你将在主机计算机上的窗口中运行一个带有操作系统的虚拟机。
 
@@ -226,7 +234,8 @@ A 级：
 - Windows 10 + Edge 14
 - Windows 10 + Edge 13
 
-> **备注：** 虚拟机的另一个优势在于虚拟磁盘映像的相对独立性。如果你在团队中工作，你可以创建一个虚拟磁盘映像，复制并将其分发给团队其他成员。只需确保你拥有合法许可，以运行所有这些包含版权的 Windows 或其他产品的副本。
+> [!NOTE]
+> 虚拟机的另一个优势在于虚拟磁盘映像的相对独立性。如果你在团队中工作，你可以创建一个虚拟磁盘映像，复制并将其分发给团队其他成员。只需确保你拥有合法许可，以运行所有这些包含版权的 Windows 或其他产品的副本。
 
 ### 自动化和商业应用
 
@@ -258,9 +267,11 @@ A 级：
 
 这些步骤旨在确保你正在测试的浏览器尽可能“干净”，即没有安装任何可能影响测试结果的内容。
 
-> **备注：** 如果你有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试你的网站——随着网站变得更大并且具有更多特性，网站放慢速度的可能性更高，因此你需要开始更多考虑性能。尝试在低端设备上运行你的功能，也会使更高端设备上网站的体验更好。
+> [!NOTE]
+> 如果你有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试你的网站——随着网站变得更大并且具有更多特性，网站放慢速度的可能性更高，因此你需要开始更多考虑性能。尝试在低端设备上运行你的功能，也会使更高端设备上网站的体验更好。
 
-> **备注：** 某些服务器端开发环境提供了一些有用的机制，可仅向部分用户推出网站变更，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下让一部分用户测试特性。示例：[Django Waffle Flags](https://github.com/jsocol/django-waffle)。
+> [!NOTE]
+> 某些服务器端开发环境提供了一些有用的机制，可仅向部分用户推出网站变更，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下让一部分用户测试特性。示例：[Django Waffle Flags](https://github.com/jsocol/django-waffle)。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
index 624ab58ae599ce..5664f52bfeae4f 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
@@ -40,7 +40,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm
 
 我们将使用 Node.js 来编写和运行 Selenium 测试用例。Node.js 是一个前端开发者都很熟悉，并且容易上手的开发环境。
 
-> **备注：** 如果你需要了解在其他服务器端环境下使用 WebDriver 的方式，也可以点击[支持 Selenium 的平台](https://www.selenium.dev/downloads/)来获取更多有用的链接。
+> [!NOTE]
+> 如果你需要了解在其他服务器端环境下使用 WebDriver 的方式，也可以点击[支持 Selenium 的平台](https://www.selenium.dev/downloads/)来获取更多有用的链接。
 
 ### 在 Node 下建立 Selenium
 
@@ -51,7 +52,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm
    npm install selenium-webdriver
    ```
 
-> **备注：** 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，确保所有东西都是最新的。
+> [!NOTE]
+> 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，确保所有东西都是最新的。
 
 接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)（第一部分的表格）页面查看如何下载。显然，有些浏览器是操作系统特定的，我们将坚持使用 Firefox 和 Chrome，因为它们可以在所有主要的操作系统上使用。
 
@@ -59,7 +61,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm
 2. 将它们解压到相当容易浏览的地方，比如你的主用户目录的根部。
 3. 把 `chromedriver` 和 `geckodriver` 驱动的目录添加到你的系统 `PATH` 变量，这应该是从你的硬盘根目录开始的一个绝对路径。举个例子，如果我们使用的是一个 macOS 机器，用户名为 bob, 我们把驱动放到了用户的根目录下，那这个路径就是 `/Users/bob`。
 
-> **备注：** 重申一下，添加到 `PATH` 的路径是到包含驱动的那一级目录，而不是驱动目录自身！这是一个常犯的错误。
+> [!NOTE]
+> 重申一下，添加到 `PATH` 的路径是到包含驱动的那一级目录，而不是驱动目录自身！这是一个常犯的错误。
 
 在 macOS 或大多数 Linux 系统中设置 `PATH` 变量的操作如下：
 
@@ -235,7 +238,8 @@ const driver = new webdriver.Builder().forBrowser("firefox").build();
 driver.get("http://www.google.com");
 ```
 
-> **备注：** 可以查看 [WebDriver class reference](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html) 了解这一部分提到内容的详情。
+> [!NOTE]
+> 可以查看 [WebDriver class reference](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html) 了解这一部分提到内容的详情。
 
 你可以使用包含 `file://` 的 URL 来指向需要测试的本地文件：
 
@@ -367,7 +371,8 @@ driver.sleep(2000).then(() => {
 
 WebDriver 等待 2 秒然后填充表单的文本框。接下来我们使用 `getAttribute()` 获取它的 `value` 属性值，并对它进行测试（如是否为空），最后将测试结果打印出来。
 
-> **备注：** 还有一个方法叫 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait), 它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 [util 库](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html)，其中定义了使用 `wait()` 的常见条件。
+> [!NOTE]
+> 还有一个方法叫 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait), 它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 [util 库](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html)，其中定义了使用 `wait()` 的常见条件。
 
 ### 使用后关闭驱动
 
@@ -492,9 +497,11 @@ driver.quit();
 
    你可以检索网络、命令、异常和 Selenium 日志，用于你测试构建中的每个测试。你还会发现你的 Selenium 脚本执行的视频记录。
 
-> **备注：** LambdaTest 自动测试仪表板上的 _HELP_ 按钮将为你提供大量的信息，帮助你开始使用 LambdaTest 自动化。你也可以关注我们关于[在 Node JS 中运行第一个 Selenium 脚本](https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/)的文档。
+> [!NOTE]
+> LambdaTest 自动测试仪表板上的 _HELP_ 按钮将为你提供大量的信息，帮助你开始使用 LambdaTest 自动化。你也可以关注我们关于[在 Node JS 中运行第一个 Selenium 脚本](https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/)的文档。
 
-> **备注：** 如果你不想手写测试的 capability 对象，你可以用 [Selenium Desired Capabilities Generator](https://www.lambdatest.com/capabilities-generator/) 来生成它们。
+> [!NOTE]
+> 如果你不想手写测试的 capability 对象，你可以用 [Selenium Desired Capabilities Generator](https://www.lambdatest.com/capabilities-generator/) 来生成它们。
 
 #### 编程填充 LambdaTest 的测试详情
 
@@ -578,9 +585,11 @@ driver.quit();
 
 点击测试链接，会打开一个播放记录了测试视频的屏幕和在测试过程中相关的日志详情。
 
-> **备注：** Browserstack 自动化仪表盘的 _Resources_ 菜单选项上提供了许多运行自动化测试的有用信息。查看[使用 Node JS 编写自动化测试的文档](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs)获取相关信息，研究一下使用 BrowserStack 可以帮你做到哪些事情。
+> [!NOTE]
+> Browserstack 自动化仪表盘的 _Resources_ 菜单选项上提供了许多运行自动化测试的有用信息。查看[使用 Node JS 编写自动化测试的文档](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs)获取相关信息，研究一下使用 BrowserStack 可以帮你做到哪些事情。
 
-> **备注：** 如果你不想自己写测试用例，可以使用文档中嵌入的生成器，参见[运行你的首个测试](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test)）。
+> [!NOTE]
+> 如果你不想自己写测试用例，可以使用文档中嵌入的生成器，参见[运行你的首个测试](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test)）。
 
 #### 编程填充 BrowserStack 的测试详情
 
@@ -710,9 +719,11 @@ driver.quit();
 5. 现在访问你的 [Sauce Labs 自动化测试仪表盘](https://app.saucelabs.com/dashboard/tests) 页面，会看到列出的测试; 同样你也可以看到视频、截屏和其他类似的数据。
    ![Sauce Labs 自动化测试](sauce_labs_automated_test.png)
 
-> **备注：** Sauce Labs 的[平台配置器](https://saucelabs.com/platform/platform-configurator#/)是一个有用的工具，可以根据你想测试的浏览器或操作系统，生成 capability 对象，以反馈给你的驱动实例。
+> [!NOTE]
+> Sauce Labs 的[平台配置器](https://saucelabs.com/platform/platform-configurator#/)是一个有用的工具，可以根据你想测试的浏览器或操作系统，生成 capability 对象，以反馈给你的驱动实例。
 
-> **备注：** 你可以查看[使用 Selenium 进行 Web 自动化测试](https://docs.saucelabs.com/web-apps/automated-testing/selenium/)和[实时 Selenium Node.js 测试](https://docs.saucelabs.com/web-apps/automated-testing/selenium/sample-scripts/#nodejs)获取更多关于 Sauce Labs 和 Selenium 测试的有用信息。
+> [!NOTE]
+> 你可以查看[使用 Selenium 进行 Web 自动化测试](https://docs.saucelabs.com/web-apps/automated-testing/selenium/)和[实时 Selenium Node.js 测试](https://docs.saucelabs.com/web-apps/automated-testing/selenium/sample-scripts/#nodejs)获取更多关于 Sauce Labs 和 Selenium 测试的有用信息。
 
 #### 编程填充 Sauce Labs 的测试详情
 
@@ -829,7 +840,8 @@ driver.quit();
 - [集成 Jenkins 的 LambdaTest](https://www.lambdatest.com/support/docs/jenkins-with-lambdatest/)
 - [集成 Travis CI 的 Sauce Labs](https://docs.travis-ci.com/user/sauce-connect/)
 
-> **备注：** 如果你希望用**无代码自动化**进行持续测试，那么你可以使用 [Endtest](https://endtest.io) 或 [TestingBot](https://testingbot.com)。
+> [!NOTE]
+> 如果你希望用**无代码自动化**进行持续测试，那么你可以使用 [Endtest](https://endtest.io) 或 [TestingBot](https://testingbot.com)。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/tools_and_testing/github/index.md b/files/zh-cn/learn/tools_and_testing/github/index.md
index ad75a8ae3ef84d..7af934a05fd0cb 100644
--- a/files/zh-cn/learn/tools_and_testing/github/index.md
+++ b/files/zh-cn/learn/tools_and_testing/github/index.md
@@ -18,7 +18,8 @@ slug: Learn/Tools_and_testing/GitHub
 
 版本控制系统提供了能够满足以上需求的工具。[Git](https://git-scm.com/) 是版本控制系统的典范，而 [GitHub](https://github.com/) 是一个为个人或团队操作 Git 仓库（repository）提供了 Git 服务器和一系列非常实用的工具的网站 + 基础设施。它提供了报告代码错误、检查工具以及分配任务和任务状态等项目管理工具等等。
 
-> **备注：** Git 实际上是一个分散式的版本控制系统，这意味你和其他所有人的电脑上都可以有一个这个复制了这个项目所有源代码的储存库的副本。你在自己的副本上进行了修改，然后提交给服务器，在那里将由这个项目的管理者来决定是否将你的修改添加到主本中。
+> [!NOTE]
+> Git 实际上是一个分散式的版本控制系统，这意味你和其他所有人的电脑上都可以有一个这个复制了这个项目所有源代码的储存库的副本。你在自己的副本上进行了修改，然后提交给服务器，在那里将由这个项目的管理者来决定是否将你的修改添加到主本中。
 
 ## 事先准备
 
@@ -32,7 +33,8 @@ slug: Learn/Tools_and_testing/GitHub
 
 建议你最好还能够有一些基础的命令行终端的知识，例如：切换目录、新建文件以及修改系统路径（`PATH`）。
 
-> **备注：** Github 并不是使用 Git 的唯一途径。还有很多像 [GitLab](https://about.gitlab.com/) 这样的选择值得你去尝试。你也可以尝试着去构建你自己的 Git 服务器来代替 Github 的功能。在这里我们只是将 Github 作为一种可行的途径进行介绍。
+> [!NOTE]
+> Github 并不是使用 Git 的唯一途径。还有很多像 [GitLab](https://about.gitlab.com/) 这样的选择值得你去尝试。你也可以尝试着去构建你自己的 Git 服务器来代替 Github 的功能。在这里我们只是将 Github 作为一种可行的途径进行介绍。
 
 ## 指南
 
@@ -49,7 +51,8 @@ slug: Learn/Tools_and_testing/GitHub
 - [掌握议题（来自 GitHub）](https://docs.github.com/zh/issues/tracking-your-work-with-issues/about-issues)
   - : **议题**（issue）就像是一个关于你这个 GitHub 项目的论坛，在这里人们可以提问题和报告错误，你可以管理更新（例如给人们分配需要解决的问题、澄清问题以及告知问题已经解决）。这篇文章会让你知道所需要的一些关于问题区的知识。
 
-> **备注：** 在 Git 和 GitHub 上面你还可以做一大堆事情，但我们认为，如果你想要有效地使用 Git，上面的这些知识是至少应该具备的。当你更深入地了解 Git 时，你将会意识到，当你开始使用更加复杂的指令时会更容易出错。但不要担心，即使是专业的网络工程师有时都会感到困惑，并通过网络检索或 [Git 飞行规则](https://github.com/k88hudson/git-flight-rules)和 [Dangit, git!](https://dangitgit.com/) 这样的网站来寻找答案。
+> [!NOTE]
+> 在 Git 和 GitHub 上面你还可以做一大堆事情，但我们认为，如果你想要有效地使用 Git，上面的这些知识是至少应该具备的。当你更深入地了解 Git 时，你将会意识到，当你开始使用更加复杂的指令时会更容易出错。但不要担心，即使是专业的网络工程师有时都会感到困惑，并通过网络检索或 [Git 飞行规则](https://github.com/k88hudson/git-flight-rules)和 [Dangit, git!](https://dangitgit.com/) 这样的网站来寻找答案。
 
 ## 参见
 
diff --git a/files/zh-cn/learn/tools_and_testing/index.md b/files/zh-cn/learn/tools_and_testing/index.md
index 4ef3e3de07adc8..3280e19dfbbfec 100644
--- a/files/zh-cn/learn/tools_and_testing/index.md
+++ b/files/zh-cn/learn/tools_and_testing/index.md
@@ -11,7 +11,8 @@ web 行业是个让人兴奋的地方，但它也有并发症。现在我们用
 
 找出你应该用什么样的工具是个困难的过程，所以我们这系列文章来告诉你哪些工具是可用的，它们能为你做什么，和如何利用行业的热门工具。
 
-> **备注：** 因为一直以来都是新的工具出现伴随着旧的工具过时，所以我们有意将材料写得尽可能地中立—我们想优先关注那些能够帮你完成通用类型任务的工具，而不是一些特殊工具。我们显然需要展示某些工具的用途来演示特殊的技术，但是要清楚我们并不是把它们作为最好的或者唯一的工具进行推荐—大多数情况下有很多其他的方式可以备选，我们只是想提供给你一个清晰的可用的方法。
+> [!NOTE]
+> 因为一直以来都是新的工具出现伴随着旧的工具过时，所以我们有意将材料写得尽可能地中立—我们想优先关注那些能够帮你完成通用类型任务的工具，而不是一些特殊工具。我们显然需要展示某些工具的用途来演示特殊的技术，但是要清楚我们并不是把它们作为最好的或者唯一的工具进行推荐—大多数情况下有很多其他的方式可以备选，我们只是想提供给你一个清晰的可用的方法。
 
 ## 学习途径
 
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
index 875ad4fcdc02bb..593b79b4fb1a72 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
@@ -116,7 +116,8 @@ macOS 有一个名为 Darwin 的系统，它位于图形用户界面的下方。
 - 主页查看文件的内容：`less`, `cat`
 - 操作和转换文本流（例如，将 HTML 文件中 `<div>` 的所有实例改为 `<article>`）：`awk`、`tr`、`sed`
 
-> **备注：** 在 web 上有许多很好的教程深入了解 web 上的命令行——这只是一个简短的介绍
+> [!NOTE]
+> 在 web 上有许多很好的教程深入了解 web 上的命令行——这只是一个简短的介绍
 
 让我们继续，看看在命令行上使用这些工具中的几个。在进一步操作之前，先打开终端程序
 
@@ -142,7 +143,8 @@ cd Desktop
 cd ..
 ```
 
-> **备注：** 一个非常有用的终端快捷方式是使用<kbd>tab</kbd> 键自动完成你知道的名字，而不是必须键入整个东西。例如，在键入以上两个命令后，尝试键入 `cd D` 并按下<kbd>tab</kbd> — 它应该自动完成目录名称 `Desktop` 对于你，只要它存在于当前目录中。在你前进的过程中记住这一点。
+> [!NOTE]
+> 一个非常有用的终端快捷方式是使用<kbd>tab</kbd> 键自动完成你知道的名字，而不是必须键入整个东西。例如，在键入以上两个命令后，尝试键入 `cd D` 并按下<kbd>tab</kbd> — 它应该自动完成目录名称 `Desktop` 对于你，只要它存在于当前目录中。在你前进的过程中记住这一点。
 
 如果要转到的目录嵌套得很深，则需要知道访问该目录的路径。当你更加熟悉文件系统的结构时，这通常会变得更容易，但是如果你不确定路径，通常可以使用 ls 命令（请参见下文）的组合并在其中单击来确定它的路径。 “资源管理器/查找器”窗口可查看目录相对于当前位置的位置。
 
@@ -162,7 +164,8 @@ cd Desktop/project/src
 
 例如，请注意，在路径上包含一个前斜线将使路径成为绝对路径 `/Users/your-user-name/Desktop`. 像我们上面做的那样，省略前导斜杠可以使路径相对于当前的工作目录。这与你在 web 浏览器中看到的 url 完全相同。前面的斜杠意味着“在网站的根”，而省略斜杠意味着“这个 URL 是相对于我当前页面的”。
 
-> **备注：** 在 windows 中，你使用反斜杠而不是正斜杠。`cd Desktop\project\src` — 他的可能看起来很奇怪，但是如果你感兴趣的话，[watch this YouTube clip](https://www.youtube.com/watch?v=5T3IJfBfBmI) 微软的一位主要工程师对此进行了解释。
+> [!NOTE]
+> 在 windows 中，你使用反斜杠而不是正斜杠。`cd Desktop\project\src` — 他的可能看起来很奇怪，但是如果你感兴趣的话，[watch this YouTube clip](https://www.youtube.com/watch?v=5T3IJfBfBmI) 微软的一位主要工程师对此进行了解释。
 
 ### 列出目录内容
 
@@ -192,9 +195,11 @@ ls -l
 
 ![A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command](mac-terminals-ls.png)
 
-> **备注：** 要确切地了解每个命令有哪些可用选项，你可以查看它[man page](https://en.wikipedia.org/wiki/Man_page). 通过键入 `man` 命令，后跟要查找的命令的名称，例如`man ls`. 这将在终端的默认文本文件查看器中打开手册页 (例如，[`less`](<https://en.wikipedia.org/wiki/Less_(Unix)>)(在我的终端中)，然后你应该能够使用箭头键或其他类似的机制在页面中滚动。手册页详细地列出了所有选项，一开始可能有点吓人，但至少在需要时你知道它就在那里。一旦你完成了对手册页的查看，你需要使用文本查看器的 quit 命令退出它 ("q" 在 `less`;如果不明显，你可能需要在网上搜索才能找到).
+> [!NOTE]
+> 要确切地了解每个命令有哪些可用选项，你可以查看它[man page](https://en.wikipedia.org/wiki/Man_page). 通过键入 `man` 命令，后跟要查找的命令的名称，例如`man ls`. 这将在终端的默认文本文件查看器中打开手册页 (例如，[`less`](<https://en.wikipedia.org/wiki/Less_(Unix)>)(在我的终端中)，然后你应该能够使用箭头键或其他类似的机制在页面中滚动。手册页详细地列出了所有选项，一开始可能有点吓人，但至少在需要时你知道它就在那里。一旦你完成了对手册页的查看，你需要使用文本查看器的 quit 命令退出它 ("q" 在 `less`;如果不明显，你可能需要在网上搜索才能找到).
 
-> **备注：** 要同时运行具有多个选项的命令，通常可以将它们全部放在破折号后面的单个字符串中`ls -lah`, 或`ls -ltrh`.尝试在 `ls` 了解这些额外选项的作用
+> [!NOTE]
+> 要同时运行具有多个选项的命令，通常可以将它们全部放在破折号后面的单个字符串中`ls -lah`, 或`ls -ltrh`.尝试在 `ls` 了解这些额外选项的作用
 
 既然我们已经讨论了两个基本命令，那么稍微浏览一下你的目录，看看是否可以从一个位置导航到下一个位置。
 
@@ -211,7 +216,8 @@ ls -l
 - `cp`——类似于 `mv`, `cp`在指定的第一个位置和第二个位置创建文件的副本。例如 `cp mdn-example.txt mdn-example.txt.bak` 创建一个副本 `mdn-example.txt` 叫做 `mdn-example.txt.bak`（当然，如果你愿意，你也可以叫它别的名字）。
 - `rm`——删除指定的文件。例如，`rm mdn-example.txt` 删除单个文件叫做 `mdn-example.txt`。请注意，此删除是永久性的，不能通过桌面用户界面上的回收站撤消。
 
-> **备注：** 许多终端命令允许你使用星号作为“通配符”字符，意思是“任何字符序列”。这允许你一次对可能大量的文件运行操作，所有这些文件都匹配指定的模式。例如，`rm mdn-*` 将删除所有以 `mdn-` 开头的文件。`rm mdn-*.bak` 会删除所有以 `mdn-` 开头，以 `.bak` 结束的文件。
+> [!NOTE]
+> 许多终端命令允许你使用星号作为“通配符”字符，意思是“任何字符序列”。这允许你一次对可能大量的文件运行操作，所有这些文件都匹配指定的模式。例如，`rm mdn-*` 将删除所有以 `mdn-` 开头的文件。`rm mdn-*.bak` 会删除所有以 `mdn-` 开头，以 `.bak` 结束的文件。
 
 ## 考虑终端有害吗？
 
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
index cc63ec713367a1..f03b88f002dc5b 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
@@ -36,7 +36,8 @@ l10n:
 - 运行测试：测试范围从“这段代码的格式是否正确”到“这段代码是否符合我的预期”，并确保测试失败能阻止部署。
 - 将更新后的代码实际部署到线上 URL 上：或者可能是一个临时 URL，以便首先对其进行审查。
 
-> **备注：** Cache busting 是我们在本模块中从未见过的一个新术语。这是一种破坏浏览器自身缓存机制的策略，它迫使浏览器下载一份新的代码副本。Parcel（以及许多其他工具）会为每次新构建生成唯一的文件名。这种独特的文件名会“破坏”浏览器的缓存，从而确保每次对已部署的代码进行更新时，浏览器都能下载新的代码。
+> [!NOTE]
+> Cache busting 是我们在本模块中从未见过的一个新术语。这是一种破坏浏览器自身缓存机制的策略，它迫使浏览器下载一份新的代码副本。Parcel（以及许多其他工具）会为每次新构建生成唯一的文件名。这种独特的文件名会“破坏”浏览器的缓存，从而确保每次对已部署的代码进行更新时，浏览器都能下载新的代码。
 
 上述任务还可细分为更多任务；请注意，大多数网站开发团队至少会对开发后阶段的某些部分制定自己的条款和流程。
 
@@ -74,7 +75,8 @@ l10n:
    }
    ```
 
-   > **备注：** 如果 `scripts` 属性里面已经有了一个命令，在其结尾加上逗号，保持 JSON 有效。
+   > [!NOTE]
+   > 如果 `scripts` 属性里面已经有了一个命令，在其结尾加上逗号，保持 JSON 有效。
 
 3. 现在你应该可以从项目根目录下运行以下命令，以进行生产构建步骤（如果需要，按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 退出当前运行的进程）：
 
@@ -132,7 +134,8 @@ git status
    git commit -m '提交初始代码'
    ```
 
-   > **备注：** 尽管可以随意书写提交内容，但网上还是有一些关于如何写好提交信息的有用提示。保持短小、简洁和描述性，以便清楚地描述更改的内容。
+   > [!NOTE]
+   > 尽管可以随意书写提交内容，但网上还是有一些关于如何写好提交信息的有用提示。保持短小、简洁和描述性，以便清楚地描述更改的内容。
 
 3. 最后，需要推送代码至 GitHub 托管的存储库。现在我们就来这样做。
 
@@ -166,11 +169,13 @@ git status
 
    此时，Git 会提示你输入用户名和密码，然后才允许发送推送。这是因为我们使用了 HTTPS 选项，而不是 SSH 选项，如前面的截图所示。为此，你需要输入 GitHub 用户名，如果没有开启双因素身份验证（2FA），还需要输入 GitHub 密码。我们一直鼓励你尽可能使用 2FA，但请记住，如果你使用了 2FA，你还需要使用一个“个人访问令牌”。GitHub 帮助页面有[关于如何获取个人访问令牌的出色而简单的攻略](https://docs.github.com/zh/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)。
 
-> **备注：** 如果你有兴趣使用 SSH 选项，从而避免每次推送到 GitHub 时都要输入用户名和密码，[本教程将指导你如何操作](https://docs.github.com/zh/authentication/connecting-to-github-with-ssh)。
+> [!NOTE]
+> 如果你有兴趣使用 SSH 选项，从而避免每次推送到 GitHub 时都要输入用户名和密码，[本教程将指导你如何操作](https://docs.github.com/zh/authentication/connecting-to-github-with-ssh)。
 
 最后这条命令指示 git 使用分支 `main` 将代码推送（也就是发布）到我们称之为 `github` 的“远程”位置（这是托管在 github.com 上的仓库，我们可以随便起名）。我们完全没有遇到过分支，但“main”分支是我们工作的默认位置，也是 git 的启动分支。这也是 Netlify 会查找的默认分支，非常方便。
 
-> **备注：** 在 2020 年 10 月之前，GitHub 上的默认分支一直是 `master`，后因各种社会原因改为了 `main`。你应该知道，在遇到的各种项目中可能会出现这个较早的默认分支，但我们建议你在自己的项目中使用 `main`。
+> [!NOTE]
+> 在 2020 年 10 月之前，GitHub 上的默认分支一直是 `master`，后因各种社会原因改为了 `main`。你应该知道，在遇到的各种项目中可能会出现这个较早的默认分支，但我们建议你在自己的项目中使用 `main`。
 
 我们的项目已提交到 git 并推送到 GitHub 仓库，工具链的下一步就是将 GitHub 连接到 Netlify，这样我们的项目就可以在网络上实时部署了！
 
@@ -178,7 +183,8 @@ git status
 
 从 GitHub 部署到 Netlify 的步骤非常简单，尤其是像本项目这样的“静态网站”。
 
-> **备注：** 还有很多 [Netlify 指南和教程](https://www.netlify.com/blog/tutorials/)可以帮助你改进开发工作流程。
+> [!NOTE]
+> 还有很多 [Netlify 指南和教程](https://www.netlify.com/blog/tutorials/)可以帮助你改进开发工作流程。
 
 让我们开始吧：
 
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
index af3d2ee5fc91ad..d5906e216f2c70 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
@@ -27,7 +27,8 @@ slug: Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_comple
 
 实际上，工具和使用方法的组合是无限的，本文和下一篇文章中介绍的只是使用特定工具的*一种*方式。
 
-> **备注：** 也值得重申的是，并非所有这些工具都需要在命令行上运行。许多当今的代码编辑器（如 VS Code 和 Atom）都通过插件支持*许多*工具的集成。
+> [!NOTE]
+> 也值得重申的是，并非所有这些工具都需要在命令行上运行。许多当今的代码编辑器（如 VS Code 和 Atom）都通过插件支持*许多*工具的集成。
 
 ## 介绍我们的学习案例
 
@@ -105,7 +106,8 @@ slug: Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_comple
 
 我们将使用 npm 安装我们的工具，我们已经在第二章中介绍了它。你应该已经安装了 Node.js 和 npm，但如果没有，请[参考该部分](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#添加工具)。
 
-> **备注：** 虽然不清楚具体的安装过程，但安装 npm 时还会安装一个名为 npx 的补充工具。我们稍后将使用 npx 来帮助运行作为项目本地依赖项安装的工具。
+> [!NOTE]
+> 虽然不清楚具体的安装过程，但安装 npm 时还会安装一个名为 npx 的补充工具。我们稍后将使用 npx 来帮助运行作为项目本地依赖项安装的工具。
 
 npm 将用于安装我们工具链的后续部分。接下来，我们将安装 git 来帮助进行修订控制和代码管理。
 
@@ -149,7 +151,8 @@ npm install prettier -g
 prettier --write ./src/index.html
 ```
 
-> **备注：** 在上面的命令中，我使用了 Prettier 的 `--write` 选项。这对 Prettier 意味着“如果我的代码格式有任何问题，请继续修复它们，然后保存我的文件”。这对于我们的开发过程来说很好，但是我们也可以只使用 `prettier` 而不使用选项，它将仅检查文件。检查文件（而不保存它）对于运行在发布之前的检查（例如“不要发布任何未经适当格式化的代码”）非常有用。
+> [!NOTE]
+> 在上面的命令中，我使用了 Prettier 的 `--write` 选项。这对 Prettier 意味着“如果我的代码格式有任何问题，请继续修复它们，然后保存我的文件”。这对于我们的开发过程来说很好，但是我们也可以只使用 `prettier` 而不使用选项，它将仅检查文件。检查文件（而不保存它）对于运行在发布之前的检查（例如“不要发布任何未经适当格式化的代码”）非常有用。
 
 对每个文件运行初始命令可能很繁琐，有一个单一的命令来为我们执行此操作将非常有用（我们的代码检查工具也是如此）。
 
@@ -159,7 +162,8 @@ prettier --write ./src/index.html
 - 使用特殊的“git 钩子”在提交之前测试代码是否已格式化。
 - 使用代码编辑器插件在每次保存文件时运行 Prettier 命令。
 
-> **备注：** 什么是 git 钩子？Git（而不是 GitHub）提供了一种系统，可以让我们将预操作和后操作附加到我们使用 git 执行的任务（例如提交代码）。尽管 git 钩子可能有点过于复杂（在笔者看来），但是一旦它们配置就绪，就可以非常强大。如果你有兴趣使用钩子，[Husky](https://github.com/typicode/husky) 是使用钩子的一个很方便的途径。
+> [!NOTE]
+> 什么是 git 钩子？Git（而不是 GitHub）提供了一种系统，可以让我们将预操作和后操作附加到我们使用 git 执行的任务（例如提交代码）。尽管 git 钩子可能有点过于复杂（在笔者看来），但是一旦它们配置就绪，就可以非常强大。如果你有兴趣使用钩子，[Husky](https://github.com/typicode/husky) 是使用钩子的一个很方便的途径。
 
 对于 VS Code，一个有用的扩展是 [Esben Petersen 编写的 Prettier Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)，它允许 VSCode 在保存时自动格式化代码。这意味着我们正在开发的项目中的任何文件都会得到合适的格式化，包括 HTML、CSS、JavaScript、JSON、markdown 等。编辑器所需的只是启用“保存时格式化”。
 
@@ -193,7 +197,8 @@ ESLint 通过 npm 安装，根据第二章中的讨论，你可以选择在本
 ✖ 3 problems (3 errors, 0 warnings)
 ```
 
-> **备注：** 我们将在下一节安装 ESLint；暂时不要担心这个。
+> [!NOTE]
+> 我们将在下一节安装 ESLint；暂时不要担心这个。
 
 与其他工具一样，代码编辑器集成支持通常对 ESLint 有好处，并且可能更有用，因为它可以在出现问题时向我们提供实时反馈：
 
@@ -255,7 +260,8 @@ ESLint 通过 npm 安装，根据第二章中的讨论，你可以选择在本
 
 我们已经准备好了项目文件。这就是我们现在需要做的全部内容！
 
-> **备注：** 要在本地上设置项目，请转到解压缩文件夹的根目录，在该位置打开终端，并在终端中执行 `npm install` 命令。这将安装在 `package.json` 文件中提到的所有项目依赖项。
+> [!NOTE]
+> 要在本地上设置项目，请转到解压缩文件夹的根目录，在该位置打开终端，并在终端中执行 `npm install` 命令。这将安装在 `package.json` 文件中提到的所有项目依赖项。
 
 #### 安装我们的工具
 
@@ -417,7 +423,8 @@ npm install --save-dev parcel-bundler
 
    Parcel 还安装了我们将在代码中使用的依赖项，包括 react、react-dom、react-async-hook、date-fns 和 format-number。因此，这第一次运行将比 Parcel 的典型运行时间更长。
 
-   > **备注：** 如果你在此项目上运行 Parcel 并遇到像 `Error: ENOENT: no such file or directory` 这样的错误，请使用 <kbd>Ctrl</kbd> + <kbd>C</kbd> 停止该进程，然后尝试重新运行它。
+   > [!NOTE]
+   > 如果你在此项目上运行 Parcel 并遇到像 `Error: ENOENT: no such file or directory` 这样的错误，请使用 <kbd>Ctrl</kbd> + <kbd>C</kbd> 停止该进程，然后尝试重新运行它。
 
    服务器现在正在输出的 URL 上运行（在本例中为 localhost:1234）。
 
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md
index 96de9710710922..41e2a9f5073a38 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md
@@ -59,7 +59,8 @@ slug: Learn/Tools_and_testing/Understanding_client-side_tools/Package_management
 
 要看到本地依赖项真正发挥作用，你只需要尝试下载并运行现有项目——如果它能正常工作并且所有依赖项都可以直接使用，这要归功于本地依赖项的可移植性。
 
-> **备注：** npm 不是唯一可用的软件包管理器。有一种成功和流行的替代软件包管理器是 [Yarn](https://yarnpkg.com/)。Yarn 使用不同的算法解决依赖项，这可能意味着更快的用户体验。还有一些其他新兴的客户端，例如 [pnpm](https://pnpm.js.org/)。
+> [!NOTE]
+> npm 不是唯一可用的软件包管理器。有一种成功和流行的替代软件包管理器是 [Yarn](https://yarnpkg.com/)。Yarn 使用不同的算法解决依赖项，这可能意味着更快的用户体验。还有一些其他新兴的客户端，例如 [pnpm](https://pnpm.js.org/)。
 
 ## 软件包仓库
 
@@ -186,7 +187,8 @@ Server running at http://localhost:1234
 ✨  Built in 193ms.
 ```
 
-> **备注：** 如果终端返回“未找到命令”类型错误，请尝试使用 `npx` 运行上面的命令，例如：`npx parcel index.html`。
+> [!NOTE]
+> 如果终端返回“未找到命令”类型错误，请尝试使用 `npx` 运行上面的命令，例如：`npx parcel index.html`。
 
 现在，我们可以试着享受完整的 JavaScript 包生态系统的好处。首先，现在有一个本地 Web 服务器运行在 `http://localhost:1234`。现在前往该网址，你现在可能不会看到任何内容，但是很酷的是，当你对代码进行更改时，Parcel 将在后台自动重新构建并刷新服务器，以便你可以立即看到更新的效果。
 
@@ -282,7 +284,8 @@ dist/index.html                   288 B    753ms
 
 如果我们将此项目发布到服务器上，我们只需发布 `dist` 文件夹中的文件。Parcel 已自动处理了所有文件名更改。我们建议你查看 `dist/index.html` 中的源代码，以便你可以看到 Parcel 已自动执行的更改。
 
-> **备注：** 在撰写本文时，Parcel 2 尚未发布。但是，当它发布时，这些命令仍将有效，因为 Parcel 的作者已经聪明地将旧版本的 Parcel 重新命名。要安装 Parcel 1.x，你必须安装 `parcel-bundler`，而 Parcel 2.x 被称为 `parcel`。
+> [!NOTE]
+> 在撰写本文时，Parcel 2 尚未发布。但是，当它发布时，这些命令仍将有效，因为 Parcel 的作者已经聪明地将旧版本的 Parcel 重新命名。要安装 Parcel 1.x，你必须安装 `parcel-bundler`，而 Parcel 2.x 被称为 `parcel`。
 
 现在有很多工具可用，JavaScript 软件包生态系统正在以前所未有的速度增长，这有利有弊。不断进行改进，选择，无论是好是坏，都在不断增加。面对眼花缭乱的工具选择，可能最重要的一课是了解你选择的工具能够做什么。
 
@@ -302,7 +305,8 @@ dist/index.html                   288 B    753ms
 
 相比较 npm 而言，Yarn 在安装过程中通常被认为更快（尽管结果可能会有所不同）。这对开发人员很重要，因为等待依赖项安装（并复制到计算机）可能需要相当长的时间。
 
-> **备注：** 虽然 npm 包管理器与 npm 仓库共享相同的名称，但不需要使用 npm 包管理器来从 npm 仓库安装软件包。pnpm 和 Yarn 可以使用与 npm 相同的 `package.json` 格式，并且可以安装来自 npm 和其他软件包仓库的任何软件包。
+> [!NOTE]
+> 虽然 npm 包管理器与 npm 仓库共享相同的名称，但不需要使用 npm 包管理器来从 npm 仓库安装软件包。pnpm 和 Yarn 可以使用与 npm 相同的 `package.json` 格式，并且可以安装来自 npm 和其他软件包仓库的任何软件包。
 
 接下来，让我们回顾一下你可能需要使用包管理器执行的常见操作。
 
diff --git a/files/zh-cn/mdn/community/issues/index.md b/files/zh-cn/mdn/community/issues/index.md
index ba2c8513262dc9..3116d2d623862d 100644
--- a/files/zh-cn/mdn/community/issues/index.md
+++ b/files/zh-cn/mdn/community/issues/index.md
@@ -96,7 +96,8 @@ CSS 属性页面模板在[此处](/zh-CN/docs/MDN/Writing_guidelines/Page_struct
 
 1. **查找议题**：如果你想要做出贡献，请搜索带有 [`good first issue`、`help wanted`](#设置其他标签) 或 [`p3`](#设置优先级标签) 标签的议题。大多数仓库都有带有这些标签的议题。你可以浏览并选择适合你的技能的议题。另一个寻找议题的有用方法是 [MDN 贡献者任务板](https://github.com/orgs/mdn/projects/25)。该项目的视图列出了多个仓库中的未解决的议题。你可以根据你感兴趣的主题（`label` 列）来筛选列表。请参阅议题分类时应用的一些[标签](#设置其他标签)的描述。
 
-   > **备注：** 若议题带有 `needs triage` 标签，表明 MDN Web 文档的核心团队尚未审核该议题，你不应开始处理该议题。
+   > [!NOTE]
+   > 若议题带有 `needs triage` 标签，表明 MDN Web 文档的核心团队尚未审核该议题，你不应开始处理该议题。
 
 2. **将议题分配给自己**：在找到你想要解决的议题后，请确保该议题尚未分配给其他人。创建评论，说明你想要解决该议题，并且如果你能够解决该议题，请[将议题分配给你自己](https://docs.github.com/zh/issues/tracking-your-work-with-issues/assigning-issues-and-pull-requests-to-other-github-users#assigning-an-individual-issue-or-pull-request)。
 
@@ -120,7 +121,8 @@ CSS 属性页面模板在[此处](/zh-CN/docs/MDN/Writing_guidelines/Page_struct
 
 对于所有其他类型的错误，请先[创建议题](#报告议题指南)。添加有关你打算解决该议题的意图的评论，如果可能，请描述你提议的解决方案或解决议题的步骤。等待议题被分类，以便 MDN Web 文档团队可以验证该议题是否正当，并批准你提议的解决方案。
 
-> **备注：** 如果你在对问题被分类前创建了拉取请求，那么如果链接的问题被视为无效或解决方案与 MDN Web 文档团队期望的不符，你的时间和精力可能会被浪费。请在议题被分类后，将议题分配给你自己。
+> [!NOTE]
+> 如果你在对问题被分类前创建了拉取请求，那么如果链接的问题被视为无效或解决方案与 MDN Web 文档团队期望的不符，你的时间和精力可能会被浪费。请在议题被分类后，将议题分配给你自己。
 
 遵循[解决议题的指南](#解决议题指南)，尝试通过更新适当的源内容来解决问题，例如：
 
@@ -214,4 +216,5 @@ CSS 属性页面模板在[此处](/zh-CN/docs/MDN/Writing_guidelines/Page_struct
 - `document not written`：如果议题涉及尚未编写的必要文档（通常是因为有链接指向该文档），请设置此标签。
 - `needs content update`：如果另一个仓库中的议题的修复需要在 `mdn/content` 仓库中进行等效的修复，请设置此标签。
 
-  > **备注：** 在分类过程完成后，请删除 `needs triage` 标签。
+  > [!NOTE]
+  > 在分类过程完成后，请删除 `needs triage` 标签。
diff --git a/files/zh-cn/mdn/community/learn_forum/index.md b/files/zh-cn/mdn/community/learn_forum/index.md
index 044ce859f5f51a..ef5b762e54f2b6 100644
--- a/files/zh-cn/mdn/community/learn_forum/index.md
+++ b/files/zh-cn/mdn/community/learn_forum/index.md
@@ -58,7 +58,8 @@ slug: MDN/Community/Learn_forum
       4. 如果这个人没有真正接近一个可行的解决方案，要善意地鼓励他们，并尝试给他们一些线索，告诉他们应该往什么方向走。再给他们一次机会，让他们尝试做得更好。
       5. 如果你需要任何帮助，请在 [Matrix](https://wiki.mozilla.org/Matrix) 上的 [MDN Web 文档聊天室](https://chat.mozilla.org/#/room/#mdn:mozilla.org)寻求帮助。
 
-> **备注：** 最重要的是：要有耐心，要友好，要善良。记住，这些人中的大多数都是初学者。
+> [!NOTE]
+> 最重要的是：要有耐心，要友好，要善良。记住，这些人中的大多数都是初学者。
 
 ## MDN 学习区的结构
 
diff --git a/files/zh-cn/mdn/community/roles_teams/index.md b/files/zh-cn/mdn/community/roles_teams/index.md
index f7c7486d30d48a..0b7ed679aa149d 100644
--- a/files/zh-cn/mdn/community/roles_teams/index.md
+++ b/files/zh-cn/mdn/community/roles_teams/index.md
@@ -93,7 +93,8 @@ MDN Web 文档项目的成功和发展在很大程度上要归功于我们的贡
 - 同意承诺每月为项目工作至少 16 个小时。
 - 参加每两个月一次的社区会议。
 
-> **备注：** 如果你认为有人有资格担任此角色，可以[提名维护者](#提名维护者)。
+> [!NOTE]
+> 如果你认为有人有资格担任此角色，可以[提名维护者](#提名维护者)。
 
 **权利：**
 
@@ -103,7 +104,8 @@ MDN Web 文档项目的成功和发展在很大程度上要归功于我们的贡
 
 所有者拥有管理用户和 [GitHub 团队](https://github.com/orgs/mdn/teams)、维护 [MDN 组织](https://github.com/mdn)中各仓库的访问权限、维护仓库设置以及部署到生产环境的广泛权限。所有者受其他贡献者角色的所有要求约束。
 
-> **备注：** 所有者角色目前仅限于 Mozilla 员工。
+> [!NOTE]
+> 所有者角色目前仅限于 Mozilla 员工。
 
 **要求：**
 
diff --git a/files/zh-cn/mdn/writing_guidelines/attrib_copyright_license/index.md b/files/zh-cn/mdn/writing_guidelines/attrib_copyright_license/index.md
index e881d5efb9618e..263c0da468d45a 100644
--- a/files/zh-cn/mdn/writing_guidelines/attrib_copyright_license/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/attrib_copyright_license/index.md
@@ -13,7 +13,8 @@ MDN Web 文档的内容是免费的，并在开源协议下提供。
 
 ### 文档
 
-> **备注：** MDN Web 文档中的内容来自于包括 Mozilla 基金会内部与外部编辑者的贡献。除非另有说明，文档基于[知识共享 署名—相同方式共享](https://creativecommons.org/licenses/by-sa/2.5/deed.zh)（CC-BY-SA）V2.5 及以上版本发布。
+> [!NOTE]
+> MDN Web 文档中的内容来自于包括 Mozilla 基金会内部与外部编辑者的贡献。除非另有说明，文档基于[知识共享 署名—相同方式共享](https://creativecommons.org/licenses/by-sa/2.5/deed.zh)（CC-BY-SA）V2.5 及以上版本发布。
 
 你复用的内容是在与内容相同的许可协议（CC-BY-SA v2.5 及以上的版本）下发布的。在复用 MDN Web 文档的内容时，你需要确保对属于“Mozilla 贡献者”的原始内容进行署名。包括源文档的超链接（在线内容）或 URL（印刷内容）。以*本*文为例，你可以这样署名：
 
@@ -33,7 +34,8 @@ MDN Web 文档的内容是免费的，并在开源协议下提供。
 
 如果你想对 MDN Web 文档作出贡献，你必须在署名—相同方式共享许可（Attribution-ShareAlike license），或者在你编辑的页面已经指定的其他版权许可下发布你的文档，在[知识共享许可协议 CC-0](https://creativecommons.org/publicdomain/zero/1.0/deed.zh)（专用于公有领域）下发布你的示例代码。
 
-> **警告：** 请不要在新建的页面使用其他版权许可。
+> [!WARNING]
+> 请不要在新建的页面使用其他版权许可。
 
 **贡献的内容的版权在作者未授予他人之前归原作者所有。**
 
@@ -49,7 +51,8 @@ Mozilla 基金会的徽标、商标、服务标志，以及网站的外观、视
 
 ### 如果你想重复使用或重新发布内容
 
-> **备注：** 除非有充分的理由重新发布内容，否则我们可能会拒绝这些请求。MDN 编写团队会对其做出最终决定。
+> [!NOTE]
+> 除非有充分的理由重新发布内容，否则我们可能会拒绝这些请求。MDN 编写团队会对其做出最终决定。
 
 如果有人想向 MDN 捐赠他们之前在其博客上发布的文章，或者将复杂的参考表格复制到 MDN 上，且这么做是有意义的，则可能有足够的理由重新发布它。对于这些情况，请事先与 MDN 团队讨论你的计划：
 
diff --git a/files/zh-cn/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md b/files/zh-cn/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
index aa5d1efd136cae..d6ded0f7390058 100644
--- a/files/zh-cn/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
@@ -17,7 +17,8 @@ slug: MDN/Writing_guidelines/Experimental_deprecated_obsolete
 - 它仅通过更改配置（如首选项或标志）而被支持，无论支持的渲染引擎数量。
 - 它的定义规范可能会以不兼容的方式发生重大变化（即，它可能会破坏依赖该特性的现有代码）。
 
-> **备注：** 仅在一个渲染引擎上发布的特性，仍被视为是实验性的，即使在其他渲染引擎的预览版本中也可用（或通过设置首选项或标志）。
+> [!NOTE]
+> 仅在一个渲染引擎上发布的特性，仍被视为是实验性的，即使在其他渲染引擎的预览版本中也可用（或通过设置首选项或标志）。
 
 如果满足以下一项或多项条件，则技术可能不再是**实验性**状态：
 
@@ -41,7 +42,8 @@ MDN Web 文档中的**已弃用**（deprecated）术语用于标记不再推荐
 
 在 MDN Web 文档中，术语**过时**（obsolete）曾被用于指示不再推荐使用的 API 或技术，且已不在浏览器中实现。由于**过时**和**已弃用**之间的区别并不是很有用，因此我们不再在 MDN Web 文档中使用**过时**一词。
 
-> **备注：** 如果你遇到任何**过时**的实例，应将其删除或替换为术语**已弃用**。
+> [!NOTE]
+> 如果你遇到任何**过时**的实例，应将其删除或替换为术语**已弃用**。
 
 ## 删除内容指南
 
@@ -49,7 +51,8 @@ MDN Web 文档中的**已弃用**（deprecated）术语用于标记不再推荐
 
 以下是相关的指南，可帮助你决定在规范中删除某些内容时应该做些什么。
 
-> **备注：** 出于以下讨论的目的，术语“项目”用于表示规范中的任何内容：元素或元素的属性、接口或任何单独的方法、属性或接口的其他成员等。
+> [!NOTE]
+> 出于以下讨论的目的，术语“项目”用于表示规范中的任何内容：元素或元素的属性、接口或任何单独的方法、属性或接口的其他成员等。
 
 ### 如果该项目从未被实现
 
@@ -69,7 +72,8 @@ MDN Web 文档中的**已弃用**（deprecated）术语用于标记不再推荐
 
 - 如果该项目有任何仅描述该项目的文档页面（例如 {{domxref("RTCPeerConnection.close()")}}），请在页面顶部添加 [`deprecated_header`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Header.ejs) 宏，并在元数据中添加以下 `status:` 条目：
 
-  > **备注：** 本地化文档中并不需要添加 `status` 元数据（同样适用于下文），文档构建系统会自动合并来自英文文档的元数据。参见[针对 MDN 文档的本地化指南](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md#元数据)，以了解更多信息。
+  > [!NOTE]
+  > 本地化文档中并不需要添加 `status` 元数据（同样适用于下文），文档构建系统会自动合并来自英文文档的元数据。参见[针对 MDN 文档的本地化指南](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md#元数据)，以了解更多信息。
 
   ```
   status:
@@ -107,4 +111,5 @@ MDN Web 文档中的**已弃用**（deprecated）术语用于标记不再推荐
 
 有时（但很少），不同的规范版本之间可能存在冲突（通常是 W3C 与 WHATWG 之间）。例如，一个版本可能将某个特性列为已弃用，而另一个版本则没有。在这种情况下，请考虑现实情况，也就是考虑浏览器实际上正在做什么，并编写一个“重要”备注来总结最新状态。例如，截至 2019 年 1 月，[`inputmode`](/zh-CN/docs/Web/HTML/Global_attributes/inputmode) 全局属性存在冲突，可以这样总结：
 
-> **警告：** 规范冲突：WHATWG 规范列出了 [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode)，且现代浏览器正在尝试支持它。而 [W3C HTML 5.2 规范](https://html.spec.whatwg.org/multipage/index.html#contents)不再将其列出（即将其标记为过时）。在达成共识之前，你应该将 WHATWG 定义视为正确。
+> [!WARNING]
+> 规范冲突：WHATWG 规范列出了 [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode)，且现代浏览器正在尝试支持它。而 [W3C HTML 5.2 规范](https://html.spec.whatwg.org/multipage/index.html#contents)不再将其列出（即将其标记为过时）。在达成共识之前，你应该将 WHATWG 定义视为正确。
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/creating_moving_deleting/index.md b/files/zh-cn/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
index 6a1a526fc841d1..ad58d73bf13147 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
@@ -11,7 +11,8 @@ slug: MDN/Writing_guidelines/Howto/Creating_moving_deleting
 
 MDN Web 文档的所有页面使用 Markdown 格式书写，所有的内容位于 `index.md` 名称的文件中，它们存储于属于自身的唯一目录中。目录名代表了页面的名称。例如，如果 `align-content` 是所要创建的新 CSS 属性参考页面，你需要在 `en-us/web/css` 下建立名为 `align-content` 的文件夹，并在其中创建 `index.md` 文件。
 
-> **备注：** 目录的名称与页面的路径名有微小的差别。最主要的区别是，路径名是符合句式大小写规则的。
+> [!NOTE]
+> 目录的名称与页面的路径名有微小的差别。最主要的区别是，路径名是符合句式大小写规则的。
 
 很多不同的[页面类型](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Page_types)具有一定的结构和支持它们的页面模板，你可以复制这些模板来开始。
 
@@ -96,7 +97,8 @@ yarn content move <from-slug> <to-slug> [locale]
 yarn content delete <document-slug> [locale]
 ```
 
-> **备注：** 你需要使用 `yarn content delete` 命令来删除 MDN Web 文档的页面。不要只是从存储库中删除它们的目录。`yarn content delete` 命令还可以处理其他必要的变化，如更新 `_wikihistory.json` 文件。
+> [!NOTE]
+> 你需要使用 `yarn content delete` 命令来删除 MDN Web 文档的页面。不要只是从存储库中删除它们的目录。`yarn content delete` 命令还可以处理其他必要的变化，如更新 `_wikihistory.json` 文件。
 
 只需指定你想删除的现有文件的标题（例如 `Learn/Accessibility`），可以选择在后面加上现有文件的地区语言（默认为 `en-US`）。
 
@@ -137,7 +139,8 @@ yarn content delete <document-slug> [locale]
 
 5. 创建拉取请求。
 
-> **备注：** 如果你想要删除的页面路径名中包含特殊字符，将其包裹在引号内，像这样：
+> [!NOTE]
+> 如果你想要删除的页面路径名中包含特殊字符，将其包裹在引号内，像这样：
 >
 > ```sh
 > yarn content delete "Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50)"
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/document_a_css_property/index.md b/files/zh-cn/mdn/writing_guidelines/howto/document_a_css_property/index.md
index 8c0bb3f908a7e2..dd9b312da1f342 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/document_a_css_property/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/document_a_css_property/index.md
@@ -13,7 +13,8 @@ slug: MDN/Writing_guidelines/Howto/Document_a_CSS_property
 
 首先，你需要找出要记录的 CSS 属性。你可能已经注意到某个页面的缺失，或者你在我们的[议题列表](https://github.com/mdn/content/issues)中看到了缺失的内容。要了解 CSS 属性的详细信息，你需要找到相关的规范（例如，[W3C 规范](https://www.w3.org/Style/CSS/)，或者用于渲染引擎（如 Gecko 或 Blink）的非标准属性的错误报告）。
 
-> **备注：** 使用 W3C 规范时，请始终使用**编辑草案**（Editor's Draft，请注意左侧的红色横幅），而不是已发布的版本（例如，工作草案）。编辑草案总是更接近最终版本！
+> [!NOTE]
+> 使用 W3C 规范时，请始终使用**编辑草案**（Editor's Draft，请注意左侧的红色横幅），而不是已发布的版本（例如，工作草案）。编辑草案总是更接近最终版本！
 
 如果实现和规范不一致，请在实现错误中提及。可能有以下几种情况：
 
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md b/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md
index d1a519e2adf572..c8a9448c770c7b 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md
@@ -11,7 +11,8 @@ l10n:
 
 要在文档中添加图像，请将图像文件添加到该文档的文件夹中，然后在文档的 `index.md` 文件中使用 [Markdown 图像语法](https://github.github.com/gfm/#images)或等效的 HTML `<img>` 元素引用该图像。
 
-> **备注：** 对于本地化的文档，若引用的图像与对应的英文文档中的图像*相同*，则*无需*将图像复制到本地化文档的文件夹中。只需在本地化文档的 `index.md` 文件中使用相同的图像文件名引用图像即可。
+> [!NOTE]
+> 对于本地化的文档，若引用的图像与对应的英文文档中的图像*相同*，则*无需*将图像复制到本地化文档的文件夹中。只需在本地化文档的 `index.md` 文件中使用相同的图像文件名引用图像即可。
 >
 > 下方的示例等内容翻译自英文文档，本地化文档的贡献者可根据实际情况调整工作流程。
 
@@ -41,7 +42,8 @@ l10n:
    yarn filecheck files/en-us/web/css/my-cool-image.png
    ```
 
-   > **备注：** 对于本地化文档中的图像文件，请在 `mdn/content` 的本地仓库中运行该命令，并将 `files/en-us/web/css/my-cool-image.png` 替换为到本地化文档中包含的图像文件的相对路径或绝对路径。
+   > [!NOTE]
+   > 对于本地化文档中的图像文件，请在 `mdn/content` 的本地仓库中运行该命令，并将 `files/en-us/web/css/my-cool-image.png` 替换为到本地化文档中包含的图像文件的相对路径或绝对路径。
 
 4. 在 `files/en-us/web/css/index.md` 文档中使用 Markdown 图像语法并在方括号间提供（用于描述图像的）[`alt` 属性的描述文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)，或包含一个 {{htmlelement("img")}} 元素和 `alt` 属性来引用图像：
 
@@ -106,7 +108,8 @@ MDN Web 文档不是一个包含很多视频的网站，但是在某些情况下
 - 视频存在无障碍问题：一般而言，它的制作成本相对文本更高，尤其是对于本地化或屏幕阅读器用户。
 - 紧跟上一点，视频比文本内容更难编辑/更新/维护。
 
-> **备注：** 即使在制作视频时，也应牢记这些问题，这样你就可以尝试缓解其中的一些问题。
+> [!NOTE]
+> 即使在制作视频时，也应牢记这些问题，这样你就可以尝试缓解其中的一些问题。
 
 有许多流行的视频网站提供了大量的视频教程。MDN Web 文档不是视频驱动的网站，但是在某些情况下，视频确实在 MDN Web 文档中有一席之地。
 
@@ -186,7 +189,8 @@ MDN Web 文档的视频内容应该是：
 
 - 确定要显示的 UI 的缩放级别。并非每个人都能以高清晰度查看你的视频。你将能够在后期制作中缩放特定部分，但是提前缩放应用程序也是一个好主意。
 
-> **备注：** 请不要过度缩放，以至于你要显示的 UI 开始变得陌生或丑陋。
+> [!NOTE]
+> 请不要过度缩放，以至于你要显示的 UI 开始变得陌生或丑陋。
 
 ### 录制
 
@@ -194,7 +198,8 @@ MDN Web 文档的视频内容应该是：
 
 请注意在最后暂停一两秒钟，以显示流程的结果。
 
-> **备注：** 如果你使用的是 QuickTime Player 等非常简单的工具，并且由于某种原因无法进行后期制作，则应该将窗口设置为正确的大小以显示你想要显示的区域。在 Firefox 开发者工具中，你可以使用[标尺工具](https://firefox-source-docs.mozilla.org/devtools-user/rulers/index.html)来确保视口的纵横比适合录制。
+> [!NOTE]
+> 如果你使用的是 QuickTime Player 等非常简单的工具，并且由于某种原因无法进行后期制作，则应该将窗口设置为正确的大小以显示你想要显示的区域。在 Firefox 开发者工具中，你可以使用[标尺工具](https://firefox-source-docs.mozilla.org/devtools-user/rulers/index.html)来确保视口的纵横比适合录制。
 
 ### 后期制作
 
@@ -213,7 +218,8 @@ MDN Web 文档的视频内容应该是：
 
 目前，视频必须上传到 YouTube 才能在 MDN Web 文档上显示，例如，上传到 [mozhacks](https://www.youtube.com/user/mozhacks/videos) 频道。如果你没有合适的地方来上传视频，请请求 MDN Web 文档团队的成员来上传视频。
 
-> **备注：** 如果视频脱离了页面的上下文而没有意义（如果是一个短视频，那么它可能没有意义），请将其标记为“不公开列出”（unlisted）。
+> [!NOTE]
+> 如果视频脱离了页面的上下文而没有意义（如果是一个短视频，那么它可能没有意义），请将其标记为“不公开列出”（unlisted）。
 
 ### 嵌入
 
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/index.md b/files/zh-cn/mdn/writing_guidelines/howto/index.md
index ab5d02a62adc20..07bf39544a4977 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/index.md
@@ -7,6 +7,7 @@ slug: MDN/Writing_guidelines/Howto
 
 MDN Web 文档写作指南的这一部分包含了为 MDN Web 文档做贡献时完成特定任务的所有步骤信息：我们如何使用 markdown，如何向词汇表添加条目，如何移动或删除页面，等等。要了解更多关于*如何（通过 GitHub 进行）贡献*的方法，请参见我们的[贡献指南](/zh-CN/docs/MDN/Community/Contributing)。
 
-> **备注：** 在本节中，我们假设你已经阅读了贡献指南，熟悉 `mdn/content` 仓库，并且知道如何使用 git 和 GitHub。
+> [!NOTE]
+> 在本节中，我们假设你已经阅读了贡献指南，熟悉 `mdn/content` 仓库，并且知道如何使用 git 和 GitHub。
 
 {{LandingPageListSubpages}}
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md b/files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md
index f369f2575ab8b4..3fc411397f29b5 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md
@@ -19,7 +19,8 @@ GroupData 正是这样做的：对于每个 API，它列出了接口、属性、
 
 ### GroupData 的结构
 
-> **警告：** 本文件中列出的页面若在 en-US 中不存在，则相应的页面将被忽略。
+> [!WARNING]
+> 本文件中列出的页面若在 en-US 中不存在，则相应的页面将被忽略。
 
 `GroupData.json` 中的条目具有以下结构：
 
@@ -53,7 +54,8 @@ GroupData 正是这样做的：对于每个 API，它列出了接口、属性、
 
 - `"Name_of_the_API"`
   - : 该键即是侧边栏宏（如 `\{{APIRef("Name_of_the_API")}}`）使用的 ID，也是侧边栏本身显示的名称。请谨慎选择。
-    > **警告：** 如果要更改侧边栏中显示的名称，则必须编辑显示该侧边栏的所有页面。
+    > [!WARNING]
+    > 如果要更改侧边栏中显示的名称，则必须编辑显示该侧边栏的所有页面。
 - `"overview"`
   - : 这是包含一个页面——概述页面——的列表，用作 `"Name_of_the_API"` 文本的链接。其值是页面的*标题*，页面必须位于 `web/api/` 目录中。
 - `"guides"`
@@ -72,7 +74,8 @@ GroupData 正是这样做的：对于每个 API，它列出了接口、属性、
 
 还有另外两个键：`"dictionaries"` 和 `"callbacks"`，它们的工作原理相同。由于我们不再为它们的实体记录自己的页面，因此它们的使用已被弃用，不应再向其中添加新条目（我们会逐渐删除它们）。
 
-> **备注：** 此外，没有一个键是必须的；最好的做法（我们将强制执行此操作）是为每一个未弃用的键添加一个空列表，而不是省略它们。这也表明了没有值是刻意为之的。
+> [!NOTE]
+> 此外，没有一个键是必须的；最好的做法（我们将强制执行此操作）是为每一个未弃用的键添加一个空列表，而不是省略它们。这也表明了没有值是刻意为之的。
 
 ### GroupData 的更新流程
 
@@ -84,7 +87,8 @@ GroupData 正是这样做的：对于每个 API，它列出了接口、属性、
 
 ## InterfaceData：记录接口继承关系
 
-> **备注：** 我们希望将来能够根据 w3c/webref 提供的数据自动生成该文件。
+> [!NOTE]
+> 我们希望将来能够根据 w3c/webref 提供的数据自动生成该文件。
 
 `InterfaceData` 描述了接口的层次结构。它列出了继承关系。在过去，它还列出了每个接口实现的混入（mixin）。但是这种用法已被弃用，并且我们在更新 MDN 相关内容的同时从该文件中删除混入。
 
@@ -101,7 +105,8 @@ GroupData 正是这样做的：对于每个 API，它列出了接口、属性、
 }
 ```
 
-> **备注：** 混入已被弃用，因此对于新增接口，`"impl"` 必须是空列表。
+> [!NOTE]
+> 混入已被弃用，因此对于新增接口，`"impl"` 必须是空列表。
 
 `"Name_of_the_parent_interface"` 的值不是列表，而必须是单个条目；不得列出任何不继承自其他接口的接口。
 
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md b/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
index 2ed27020f6df24..ebe860835fae9c 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
@@ -1,6 +1,8 @@
 ---
 title: 如何使用 Markdown 来撰写文档
 slug: MDN/Writing_guidelines/Howto/Markdown_in_MDN
+l10n:
+  sourceCommit: a5682b8bcf2b9761fa576004deea720f76735aaf
 ---
 
 {{MDNSidebar}}
@@ -9,7 +11,7 @@ slug: MDN/Writing_guidelines/Howto/Markdown_in_MDN
 
 ## 基础：Github 风格的 Markdown
 
-MDN Markdown 的基础是 Github 风格的 Markdown（GFM）：<https://github.github.com/gfm/>。这意味着，对于本文中未指定的内容，你可以参考 GFM 规范。而 GFM 又是 CommonMark（[https://spec.commonmark.org/](https://spec.commonmark.org/)）的超集。
+MDN Markdown 的基础是 Github 风格的 Markdown（GFM）：<https://github.github.com/gfm/>。这意味着，对于本文中未指定的内容，你可以参考 GFM 规范。而 GFM 又是 CommonMark（<https://spec.commonmark.org/>）的超集。
 
 ## 链接
 
@@ -173,15 +175,19 @@ const greeting = "这是一个错误示例";
 
 ## 备注、警告和标注
 
-如果你需要特别声明一些内容。那么，可以使用一个带有特殊起始段落的 GFM 块引用。一共有三种类型：备注、警告和标注。
+有时作者需要特别强调某些内容。要做到这一点，可以使用 [GFM 备注块语法](https://github.com/orgs/community/discussions/16925)，这是一种带有特殊起始行的 GFM 块引用。一共有三种类型：备注、警告和标注。
 
-- 要添加备注，请创建一个 GFM 块引用，起始段落以 `**备注：**` 开头。
-- 要添加警告，请创建一个 GFM 块引用，起始段落以 `**警告：**` 开头。
-- 要添加标注，请创建一个 GFM 块引用，起始段落以 `**标注：**` 开头。
+> [!NOTE]
+> MDN Web 文档在 GFM 添加 noteblock 语法之前就已经支持了自己的备注块语法。因此，MDN 仅支持 GFM 支持的五种备注块类型中的两种，并且支持另一种 GFM 不支持的类型。
 
-备注和警告将在输出中渲染为“**备注：**”或“**警告：**”文本，而标注不会。当你想要提供自定义标题时，标注会是一个不错的选择。
+- 要添加备注，请创建一个 GFM 块引用，起始行为 `[!NOTE]`。
+- 要添加警告，请创建一个 GFM 块引用，起始行为 `[!WARNING]`。
+- 要添加标注，请创建一个 GFM 块引用，起始行为 `[!CALLOUT]`。
 
-标记的处理是是基于生成的 AST，而不是指定的确切字符串。这意味着，使用 `<strong>备注：</strong>` 也会生成注释。但是，请以 Markdown 语法为主要风格。
+备注和警告将在输出中添加本地化的“**备注：**”或“**警告：**”，而标注不会。当你想要提供自定义标题时，标注会是一个不错的选择。
+
+> [!WARNING]
+> 在旧的 MDN 语法中，类型是本地化的，并且会以粗体文本添加到第一个段落中，例如 `**备注：** Foo bar` 而不是 `[!NOTE] ⏎ Foo bar`。出于迁移的目的，此语法仍受支持。但请避免在新文档中使用。
 
 多行块引用由空的块引用生成，就像普通的段落一样。此外，没有空格的多行内容会像常规 Markdown 行一样被处理和连接。
 
@@ -192,7 +198,8 @@ const greeting = "这是一个错误示例";
 #### 备注
 
 ```md
-> **备注：** 这就是编写备注的方式。
+> [!NOTE]
+> 这就是编写备注的方式。
 >
 > 它可以有好几行。
 ```
@@ -201,21 +208,23 @@ const greeting = "这是一个错误示例";
 
 ```html
 <div class="notecard note">
-  <p><strong>备注：</strong> 这就是编写备注的方式。</p>
+  <p><strong>备注：</strong>这就是编写备注的方式。</p>
   <p>它可以有好几行。</p>
 </div>
 ```
 
 此 HTML 将渲染为高亮显示的框，例如：
 
-> **备注：** 这就是编写备注的方式。
+> [!NOTE]
+> 这就是编写备注的方式。
 >
 > 它可以有好几行。
 
 #### 警告
 
 ```md
-> **警告：** 这就是编写警告的方式。
+> [!WARNING]
+> 这就是编写警告的方式。
 >
 > 它可以有好几段。
 ```
@@ -224,21 +233,24 @@ const greeting = "这是一个错误示例";
 
 ```html
 <div class="notecard warning">
-  <p><strong>警告：</strong> 这就是编写警告的方式。</p>
+  <p><strong>警告：</strong>这就是编写警告的方式。</p>
   <p>它可以有好几段。</p>
 </div>
 ```
 
 此 HTML 将渲染为高亮显示的框，例如：
 
-> **警告：** 这就是编写警告的方式。
+> [!WARNING]
+> 这就是编写警告的方式。
 >
 > 它可以有好几段。
 
 #### 标注
 
 ```md
-> **标注：** **这就是编写标注的方式。**
+> [!CALLOUT]
+>
+> **这就是编写标注的方式。**
 >
 > 它可以有好几段。
 ```
@@ -254,38 +266,19 @@ const greeting = "这是一个错误示例";
 
 此 HTML 将渲染为高亮显示的框，例如：
 
-> **标注：**
+> [!CALLOUT]
 >
 > **这就是编写标注的方式。**
 >
 > 它可以有好几段。
 
-#### 警告的翻译
-
-因为文本“**备注：**”或“**警告：**”也会出现在渲染的输出中，因此必须考虑到翻译问题。实际上，这意味这 MDN 支持的每一种语言环境都必须提供这些字符串的翻译，平台必须识别到它们表明了这些结构需要特殊处理。
-
-这些本地化内容以 [gettext](https://www.gnu.org/software/gettext/) 格式存储在 [Yari](https://github.com/mdn/yari/tree/main/markdown/localizations) 的 JSON 文件中。请参考这些文件以确定应使用什么字符串来表示特定语言环境的“备注：”和“警告：”。如果未定义区域设置文件，将自动回退到英文版本。
-
-例如，如果我们想在德语中使用“Warnung”来表示“警告”，那么我们在德语页面应该写：
-
-```md
-> **Warnung:** So schreibt man eine Warnung.
-```
-
-这会产生：
-
-```html
-<div class="notecard warning">
-  <p><strong>Warnung:</strong> So schreibt man eine Warnung.</p>
-</div>
-```
-
 #### 包含代码块的备注
 
 这是一个包含代码块的例子。
 
 ````md
-> **备注：** 这是编写备注的方式。
+> [!NOTE]
+> 这是编写备注的方式。
 >
 > 它可以包含代码块。
 >
@@ -300,7 +293,7 @@ const greeting = "这是一个错误示例";
 
 ```html
 <div class="notecard note">
-  <p><strong>备注：</strong> 这是编写备注的方式。</p>
+  <p><strong>备注：</strong>这是编写备注的方式。</p>
   <p>它可以包含代码块。</p>
   <pre class="brush: js">const s = "我在代码块中";</pre>
   <p>就像这样。</p>
@@ -309,7 +302,8 @@ const greeting = "这是一个错误示例";
 
 HTML 将渲染为包含代码块的框：
 
-> **备注：** 这是编写备注的方式。
+> [!NOTE]
+> 这是编写备注的方式。
 >
 > 它可以包含代码块。
 >
@@ -482,7 +476,7 @@ GFM 表格语法的主要限制是：
 
 #### GFM 表格最大宽度
 
-有时，即使可以使用 GFM 编写表格，也应该使用 HTML。因为 GFM 使用“ASCII art”来实现表格，当表格的一行变得过长时，将变得难以阅读。例如，考虑以下表格：
+有时，即使可以使用 GFM 编写表格，也应该使用 HTML。因为 GFM 使用“{{Glossary("ASCII")}} art”来实现表格，当表格的一行变得过长时，将变得难以阅读。例如，考虑以下表格：
 
 ```html
 <table>
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/research_technology/index.md b/files/zh-cn/mdn/writing_guidelines/howto/research_technology/index.md
index 502048273ce532..68e23db4d8510d 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/research_technology/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/research_technology/index.md
@@ -44,7 +44,8 @@ slug: MDN/Writing_guidelines/Howto/Research_technology
 
 在记录一项技术的过程中，你将反反复复书写代码示例或构建演示，而先花时间熟悉这项技术的原理将非常有用。这是十分有价值的实践，可以让你很好地理解用例（*为何*开发者要使用这项技术），且同时有助于创造一些代码示例。
 
-> **备注：** 若因规范近期的更新导致某个方法现在有不同的定义，但是旧的方法在浏览器中仍然有效，则为了同时涵盖旧方法和新方法，常常需要在同一处同时记录两者。如需帮助，请参考你所找到的演示或询问工程师。
+> [!NOTE]
+> 若因规范近期的更新导致某个方法现在有不同的定义，但是旧的方法在浏览器中仍然有效，则为了同时涵盖旧方法和新方法，常常需要在同一处同时记录两者。如需帮助，请参考你所找到的演示或询问工程师。
 
 ## 创建待写或待更新页面列表
 
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md b/files/zh-cn/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
index 5d7cabdfb5bcff..fb33b6b9aa94dc 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
@@ -21,7 +21,8 @@ slug: MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary
 
 任何术语表页面的第一段是对该术语的简单和简短描述（最好不超过两个句子）。确保阅读说明的人能够立即了解定义的术语。
 
-> **备注：** 请不要直接从其他地方复制和粘贴定义（尤其是维基百科，因为许可证版本范围较小，与 MDN 不兼容）。你的术语条目应该是自己撰写的内容。
+> [!NOTE]
+> 请不要直接从其他地方复制和粘贴定义（尤其是维基百科，因为许可证版本范围较小，与 MDN 不兼容）。你的术语条目应该是自己撰写的内容。
 
 #### 撰写一个良好的术语条目
 
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/index.md b/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/index.md
index 535d2d3f11f07c..70bc09136ebfd2 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/index.md
@@ -39,7 +39,8 @@ slug: MDN/Writing_guidelines/Howto/Write_an_api_reference
 
 当一个 API 发生变化时，你需要注意你所参考或学习的现有演示是否已经过时。检查演示中使用的主要结构，看它们是否与最新的规范相一致。它们也可能无法在最新的浏览器中工作，但这并不是一个非常可靠的测试，因为通常情况下，为了向后兼容，旧的功能会继续得到支持。
 
-> **备注：** 如果规范最近被更新了，比如说，一个方法现在被定义得不一样了，但旧的方法在浏览器中仍然有效，那么你通常需要在同一个地方记录这两种方法，这样新旧两种方法都可以得到覆盖。如果你需要帮助，可以参考你找到的演示，或询问工程联系人。
+> [!NOTE]
+> 如果规范最近被更新了，比如说，一个方法现在被定义得不一样了，但旧的方法在浏览器中仍然有效，那么你通常需要在同一个地方记录这两种方法，这样新旧两种方法都可以得到覆盖。如果你需要帮助，可以参考你找到的演示，或询问工程联系人。
 
 ### 建立你需要撰写或更新的页面列表
 
@@ -54,7 +55,8 @@ API 参考一般会包含以下页面。你可以在我们的[页面类型](/zh-
 7. 概念/使用指南页
 8. 示例
 
-> **备注：** 在本文中，我们将使用 [Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) 作为示例。
+> [!NOTE]
+> 在本文中，我们将使用 [Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) 作为示例。
 
 #### 概述页
 
@@ -80,7 +82,8 @@ API 参考一般会包含以下页面。你可以在我们的[页面类型](/zh-
 - 路径名：_AudioNode_
 - URL：[https://developer.mozilla.org/zh-CN/docs/Web/API/AudioNode](/zh-CN/docs/Web/API/AudioNode)
 
-> **备注：** 我们为接口中出现的每一个成员撰写文档。你应该牢记以下规则：
+> [!NOTE]
+> 我们为接口中出现的每一个成员撰写文档。你应该牢记以下规则：
 
 - 我们要为定义在实现该接口的对象原型上的方法（实例方法），以及定义在实际类本身上的方法（静态方法）撰写文档。在极少数情况下，如果它们都存在于同一个接口上，你应该把它们列在页面上的不同部分（静态方法/实例方法）。通常只有实例方法存在，在这种情况下，你可以把这些方法放在“Methods”标题下。
 - 不必为接口的继承属性和方法撰写文档：它们被列在各自的父接口上。不过我们确实暗示了它们的存在。
@@ -225,7 +228,8 @@ API 着陆页的长度会有很大的不同，这取决于 API 有多大，但
    - _This interface doesn't implement any specific methods, but inherits methods from \\{{domxref("XYZ")}}, and \\{{domxref("XYZ2")}}._（_本接口不实现任何特定方法，但是从 \\{{domxref("XYZ")}} 和 \\{{domxref("XYZ2")}} 继承方法。_）
    - _This interface also inherits methods from \\{{domxref("XYZ")}}, and \\{{domxref("XYZ2")}}._（_本接口也从 \\{{domxref("XYZ")}} 和 \\{{domxref("XYZ2")}} 继承方法。_）
 
-   > **备注：** 只读属性应该使用 \\{{ReadOnlyInline}} 宏，它可以创建一个漂亮的“只读”徽章，与它们的 \\{{domxref}} 链接在同一行（如果需要使用 \\{{experimentalInline}}、\\{{non-standard_Inline}} 和 \\{{deprecatedInline}} 宏，则需要放置在它们之后）。
+   > [!NOTE]
+   > 只读属性应该使用 \\{{ReadOnlyInline}} 宏，它可以创建一个漂亮的“只读”徽章，与它们的 \\{{domxref}} 链接在同一行（如果需要使用 \\{{experimentalInline}}、\\{{non-standard_Inline}} 和 \\{{deprecatedInline}} 宏，则需要放置在它们之后）。
 
 6. **示例**：包括一个代码清单，以显示 API 的主要功能的典型用法。你不应该列出所有的代码，而应该列出其中一个有趣的子集。对于一个完整的代码清单，你可以参考包含完整示例的 [GitHub](https://github.com/) 仓库，你也可以链接到使用 [GitHub gh-pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) 功能创建的实时示例（当然，只要它只使用客户端代码）。如果该示例是可视化的，你也可以使用 MDN [实时示例](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples)功能，使其在页面上实时播放。
 7. **标准表格**：此时你需要包含一个标准表格——参见“创建规范参考表格”一节以获得更多信息。
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md b/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
index 42e88785bd50e6..09f16385b3c5bc 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
@@ -30,7 +30,8 @@ WebIDL 在[其规范](https://webidl.spec.whatwg.org/)中定义。但它被设
 - 对于 Chromium，Google 也创建了一个[文档](https://www.chromium.org/blink/webidl/)来描述其扩展。
 - 对于 WebCore，Apple 同样为其特有扩展提供了一个[页面](https://trac.webkit.org/wiki/WebKitIDL)。
 
-> **备注：** 我们在这里只描述了编写文档时最有用的 WebIDL 子集。有许多其他的注释对于实现者来说很有用；请参阅上面链接的四个文档，以有一个完整的概念。
+> [!NOTE]
+> 我们在这里只描述了编写文档时最有用的 WebIDL 子集。有许多其他的注释对于实现者来说很有用；请参阅上面链接的四个文档，以有一个完整的概念。
 
 ## 接口
 
@@ -167,7 +168,8 @@ interface DedicatedWorkerGlobalScope : WorkerGlobalScope {…}
 
 ### 首选项
 
-> **备注：** 此信息特定于 Gecko，应仅在浏览器兼容性部分中使用。
+> [!NOTE]
+> 此信息特定于 Gecko，应仅在浏览器兼容性部分中使用。
 
 在 Gecko 中，部分接口的可用性（包括其构造函数、属性和方法）可能受到首选项（通常称为“pref”）的控制。这也被标记在 WebIDL 中。
 
@@ -182,7 +184,8 @@ interface SpeechSynthesis {
 
 这里，`media.webspeech.synth.enabled` 控制 `SpeechSynthesis` 接口及其属性（完整列表有超过 3 个）。
 
-> **备注：** 首选项的默认值不能直接在 WebIDL 中使用（它可能因使用 Gecko 的产品而不同）。
+> [!NOTE]
+> 首选项的默认值不能直接在 WebIDL 中使用（它可能因使用 Gecko 的产品而不同）。
 
 ### 仅在系统代码中可用
 
@@ -227,7 +230,8 @@ readonly attribute MediaError? error;
 - 在自己页面的第一句话中，用以下文字开始描述：_**`HTMLMediaElement.error`** 只读属性…_
 - 在接口页面中对其进行描述时，以“_返回…_”开头。
 
-> **备注：** 只有只读属性可以被描述为“返回”一个值。非只读属性也可以用于设置值。
+> [!NOTE]
+> 只有只读属性可以被描述为“返回”一个值。非只读属性也可以用于设置值。
 
 ### 抛出异常
 
@@ -276,7 +280,8 @@ _尽管此属性是只读的，但如果修改它（即使在严格模式下）
 
 对于接口对象，默认情况下返回对内部对象的*引用*。这必须在接口页面中的简短描述和特定子页面中的描述中提到。
 
-> **备注：** 与返回对象的属性一起使用的 `readonly` 关键字适用于引用（无法更改内部对象）。返回对象的属性可以更改，即使它们在相关接口中被标记为只读。
+> [!NOTE]
+> 与返回对象的属性一起使用的 `readonly` 关键字适用于引用（无法更改内部对象）。返回对象的属性可以更改，即使它们在相关接口中被标记为只读。
 
 某些情况下，API 必须返回一个*新*对象，或者是内部对象的*副本*。这种情况在 WebIDL 中使用 `[NewObject]` 注释来表示。
 
@@ -309,7 +314,8 @@ _**`HTMLMediaElement.buffered`** 只读属性返回一个新的 \\{{domxref("Tim
 
 ### 首选项
 
-> **备注：** 此信息特定于 Gecko，应仅在浏览器兼容性部分中使用。
+> [!NOTE]
+> 此信息特定于 Gecko，应仅在浏览器兼容性部分中使用。
 
 在 Gecko 中，某些属性的可用性可能受到首选项的控制。这也被标记在 WebIDL 中。
 
@@ -320,7 +326,8 @@ _**`HTMLMediaElement.buffered`** 只读属性返回一个新的 \\{{domxref("Tim
 
 这里，`media.webvtt.enabled` 控制 `textTracks` 属性。
 
-> **备注：** 首选项的默认值不会直接记录在 WebIDL 中（它可能因使用 Gecko 的产品而不同）。
+> [!NOTE]
+> 首选项的默认值不会直接记录在 WebIDL 中（它可能因使用 Gecko 的产品而不同）。
 
 ## 方法
 
@@ -375,7 +382,8 @@ DOMString canPlayType(DOMString type);
 
 ### 首选项
 
-> **备注：** 此信息特定于 Gecko，应仅在浏览器兼容性部分中使用。
+> [!NOTE]
+> 此信息特定于 Gecko，应仅在浏览器兼容性部分中使用。
 
 在 Gecko 中，某些方法的可用性可能受到首选项的控制。这也被标记在 WebIDL 中。
 
@@ -388,7 +396,8 @@ DOMString canPlayType(DOMString type);
 
 这里，`media.webvtt.enabled` 控制 `addTextTrack()` 方法。
 
-> **备注：** 首选项的默认值不会直接记录在 WebIDL 中（它可能因使用 Gecko 的产品而不同）。
+> [!NOTE]
+> 首选项的默认值不会直接记录在 WebIDL 中（它可能因使用 Gecko 的产品而不同）。
 
 ## 特殊方法
 
@@ -413,7 +422,8 @@ serializer; // 标准版本
 
 `toJSON()` 方法就像其他方法一样被列在接口中，并且有自己的子页面（例如 {{domxref("Performance.toJSON()")}}）。
 
-> **备注：** WebIDL 规范使用 `serializer` 而不是 `jsonifier`。这没有在 Gecko 中使用——mozilla-central 中只能找到非标准的早期提案 `jsonifier`。
+> [!NOTE]
+> WebIDL 规范使用 `serializer` 而不是 `jsonifier`。这没有在 Gecko 中使用——mozilla-central 中只能找到非标准的早期提案 `jsonifier`。
 
 ### 类迭代器方法
 
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md b/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
index a8defd7a360ed7..65eae0d98c8a6f 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
@@ -73,9 +73,11 @@ l10n:
 5. `"events"`——该值是一个数组，其中应包含属于 API 而定义它的接口又*不*属于该 API 的事件的*标题*（属于 API 的接口（`interfaces`）中的事件会被默认记录）。如果有大量的事件，你可能需要考虑只列出最受欢迎的事件，或者将它们放在列表的前面。例如，`"Document: selectionchange"` 属于 [Selection API](/zh-CN/docs/Web/API/Selection_API)，但 `Document` 并不属于，所以我们将该事件添加到数组中，[Selection API](/zh-CN/docs/Web/API/Selection_API) 主题会链接到该事件。
 6. `"guides"`——该值是一个字符串数组，其中的每一个都是涉及解释如何使用该 API 的指南的主题。这些字符串包含了指南 URL 在语言路径之后的部分：即，指南 URL 的 `/docs/...` 部分。例如，要链接到位于 `https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch` 的主题“使用 Fetch”，指南数组中需要包含“/docs/Web/API/Fetch_API/Using_Fetch”。
 7. `"dictionaries"`——该值是一个字符串数组，其中列出了 API 的所有字典。通常，只有被多个属性或方法使用的字典才应该在此列出，除非它们具有特殊意义或可能需要从多个页面引用。“CryptoKeyPair”会创建如下链接：[https://developer.mozilla.org/zh-CN/docs/Web/API/CryptoKeyPair](/zh-CN/docs/Web/API/CryptoKeyPair)。
-   > **备注：** MDN 正在逐步停止单独记录字典。在可能的情况下，这里现在描述的是使用了它们的对象。
+   > [!NOTE]
+   > MDN 正在逐步停止单独记录字典。在可能的情况下，这里现在描述的是使用了它们的对象。
 8. `"types"`——该值是一个数组，其中包含 API 定义的 typedef 和枚举类型。你可以选择只列出那些特别重要的或被多个页面所引用的类型，以便保持列表的简洁。
-   > **备注：** MDN 正在逐步停止单独记录 typedef。在可能的情况下，这里现在描述的是使用了它们的值。
+   > [!NOTE]
+   > MDN 正在逐步停止单独记录 typedef。在可能的情况下，这里现在描述的是使用了它们的值。
 9. `"callbacks"`——该值是一个数组，其中包含 API 定义的所有回调类型的列表。你可能会发现即使是在包含回调类型的 API 上，也根本不需要使用这个组别，因为它们通常不适合单独记录。
 
 ## 侧边栏使用的标签
diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/banners_and_notices/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
index ba49860bf9b230..6349c5083e16c2 100644
--- a/files/zh-cn/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
@@ -28,7 +28,8 @@ browser-compat: api.Ink
 
 一个有横幅的页面通常也会有“补充性”的页面元数据。例如，一个有 `\{{SeeCompatTable}}` 的页面通常也应该添加 `experimental` 状态（如上所示），以确保它在侧边栏有合适的图标。
 
-> **备注：** 横幅宏无需*依赖*元数据，但是其他通过宏插入的内容需要它们。例如，`\{{Compat}}` 宏依赖于元数据 `browser-compat` 的值。
+> [!NOTE]
+> 横幅宏无需*依赖*元数据，但是其他通过宏插入的内容需要它们。例如，`\{{Compat}}` 宏依赖于元数据 `browser-compat` 的值。
 
 ## 应该添加哪些横幅
 
diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/code_examples/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/code_examples/index.md
index cf7e6ca9517b6c..d32c11a08db998 100644
--- a/files/zh-cn/mdn/writing_guidelines/page_structures/code_examples/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/page_structures/code_examples/index.md
@@ -7,7 +7,8 @@ slug: MDN/Writing_guidelines/Page_structures/Code_examples
 
 在 MDN 上，你会看到整个页面中有许多代码示例插入，以展示 web 平台功能的使用。本文讨论了在页面中添加代码示例的不同机制，以及你应该使用哪些机制和何时使用。
 
-> **备注：** 如果你想了解 MDN 文章中出现的代码的风格和提示，而不是包含代码的不同方式，请参见我们的[代码风格指南](/zh-CN/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide)。
+> [!NOTE]
+> 如果你想了解 MDN 文章中出现的代码的风格和提示，而不是包含代码的不同方式，请参见我们的[代码风格指南](/zh-CN/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide)。
 
 ## 都有哪些类型的代码示例可用？
 
diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/feature_status/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/feature_status/index.md
index 7128309b45c850..a7e35e42b490f2 100644
--- a/files/zh-cn/mdn/writing_guidelines/page_structures/feature_status/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/page_structures/feature_status/index.md
@@ -21,7 +21,8 @@ l10n:
 
 MDN 上记录的所有特性的特性状态都在其附带的 [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)（BCD）仓库的条目中定义，并且每当发布新的 [BCD 版本](https://github.com/mdn/browser-compat-data/releases)时，都会在 `mdn/content` 仓库中*自动*更新。
 
-> **警告：** 不要手动更新 `mdn/content` 仓库中的特性状态。要更新特性的状态，你需要在 BCD 仓库中[提交拉取请求](https://github.com/mdn/browser-compat-data/blob/main/docs/contributing.md#updating-the-compat-data)。在 BCD 仓库中的更改被批准且合并后，[自动创建的拉取请求](https://github.com/search?q=repo%3Amdn%2Fcontent+Synchronize+with+BCD&type=pullrequests)会更新 `mdn/content` 仓库中的状态。
+> [!WARNING]
+> 不要手动更新 `mdn/content` 仓库中的特性状态。要更新特性的状态，你需要在 BCD 仓库中[提交拉取请求](https://github.com/mdn/browser-compat-data/blob/main/docs/contributing.md#updating-the-compat-data)。在 BCD 仓库中的更改被批准且合并后，[自动创建的拉取请求](https://github.com/search?q=repo%3Amdn%2Fcontent+Synchronize+with+BCD&type=pullrequests)会更新 `mdn/content` 仓库中的状态。
 
 自动化流程使用了元数据（front-matter）中的 [`browser-compat`](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables#在_mdn_页面中使用浏览器兼容性数据) 键。该键存储了在兼容性数据中定位特性所需的 BCD 查询。如果 `browser-compat` 键有多个值，则自动化流程只使用第一个值来渲染状态宏。
 
diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/live_samples/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/live_samples/index.md
index 2b80ffa651e5f7..2b28034cd7336f 100644
--- a/files/zh-cn/mdn/writing_guidelines/page_structures/live_samples/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/page_structures/live_samples/index.md
@@ -58,7 +58,8 @@ MDN 支持将文章中的示例代码转化为读者可以实际查看的在线
 
   - : 可选。包含示例的页面的代称。若忽略该项，示例将会从宏所在页面获取。
 
-    > **警告：** 这个参数已被弃用。请不要在新的示例中使用它，并将其从你找到的示例中移除。我们正在主动移除对这个参数的使用，在移除了所有的使用后，我们将会移除对它的支持。
+    > [!WARNING]
+    > 这个参数已被弃用。请不要在新的示例中使用它，并将其从你找到的示例中移除。我们正在主动移除对这个参数的使用，在移除了所有的使用后，我们将会移除对它的支持。
 
 #### 链接运行实例（LiveSampleLink）宏
 
@@ -85,7 +86,8 @@ MDN 支持将文章中的示例代码转化为读者可以实际查看的在线
 
 每段代码都需要包含在正确标记其语言的代码块中，一个代码块只能包含一种语言。多数情况下，这些步骤都没问题，不过再检查一遍总是好的。当代码块的语言标识符为 `language-type`（_language-type_ 是该代码块的语言类型，如：`html`、`css` 或 `js`）时，说明这一步已经完成。
 
-> **备注：** 每种语言的代码可以分布在几个代码块里，所有代码会被拼接起来。这个特性允许一块代码对应一块简介。这样有利于制作教程，比如代码间夹杂着大量解释性的文本。
+> [!NOTE]
+> 每种语言的代码可以分布在几个代码块里，所有代码会被拼接起来。这个特性允许一块代码对应一块简介。这样有利于制作教程，比如代码间夹杂着大量解释性的文本。
 
 所以在确认代码块被正确标记为其所用语言以提供语言的语法高亮之后，你就可以继续了。
 
diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/page_types/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/page_types/index.md
index 60598f0ea49c9f..40d1dbd6a239df 100644
--- a/files/zh-cn/mdn/writing_guidelines/page_structures/page_types/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/page_structures/page_types/index.md
@@ -59,7 +59,8 @@ MDN 有三个大类的页面类型，尽管有些页面类型属于多个类别
 
 ## API 参考页
 
-> **备注：** 也称为*接口着陆页*。
+> [!NOTE]
+> 也称为*接口着陆页*。
 
 **API 着陆页**列出了属于特定接口或类的所有方法、属性、事件等。它提供了该类或接口的概述，以及每个成员的文档链接。它比 API 着陆页的粒度更细，后者通常链接到多个 API 参考页。
 
diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md
index bda54bfa38a55c..923cbfd0363ecb 100644
--- a/files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md
@@ -23,7 +23,8 @@ slice(start, end)
 ```
 ````
 
-> **备注：** 这里使用的标记语言是 `js-nolint`，其中 `js` 指示了应使用 JavaScript 语法进行高亮。对于 JavaScript 语法部分，也需要指定 `nolint`，因为该部分并不是完全的合法 JavaScript 代码，我们并不想让 linter“修正”它（这里省略了返回值和行尾分号）。
+> [!NOTE]
+> 这里使用的标记语言是 `js-nolint`，其中 `js` 指示了应使用 JavaScript 语法进行高亮。对于 JavaScript 语法部分，也需要指定 `nolint`，因为该部分并不是完全的合法 JavaScript 代码，我们并不想让 linter“修正”它（这里省略了返回值和行尾分号）。
 
 ### 通用风格规则
 
@@ -184,7 +185,8 @@ splice(start, deleteCount, item1, item2, /* …, */ itemN)
 
 列表中每个参数的名称应包含在 markdown 代码标记 `` ` ` `` 中。
 
-> **备注：** 即使该特性不接受任何参数，也应包含“参数”小节，其中的内容为“无”。
+> [!NOTE]
+> 即使该特性不接受任何参数，也应包含“参数”小节，其中的内容为“无”。
 
 #### 返回值小节
 
@@ -202,7 +204,8 @@ splice(start, deleteCount, item1, item2, /* …, */ itemN)
 
 异常情况名称和解释应使用描述列表的形式。
 
-> **备注：** 如果该特性不抛出任何异常，则不需要包含“异常”小节，但也可以包含该小节，且内容为“无”。
+> [!NOTE]
+> 如果该特性不抛出任何异常，则不需要包含“异常”小节，但也可以包含该小节，且内容为“无”。
 
 ### 属性
 
@@ -227,7 +230,8 @@ JavaScript 内置对象参考页面遵循与 API 参考页面相同的基本规
 
 CSS 属性参考页面包括“语法”小节，该小节过去位于页面顶部，但现在越来越多地位于包含代码块的部分下方，代码块显示了该特性的典型用法，另外还有一个示例来说明该特性的作用（例如，请参见 {{CSSxRef("animation")}}）。
 
-> **备注：** 这样做是因为 CSS 的形式语法非常复杂，MDN 的许多读者都不会使用，而且对初学者来说很不方便。真实的语法和示例对大多数人更有用。
+> [!NOTE]
+> 这样做是因为 CSS 的形式语法非常复杂，MDN 的许多读者都不会使用，而且对初学者来说很不方便。真实的语法和示例对大多数人更有用。
 
 在该小节中你会找到以下内容。
 
diff --git a/files/zh-cn/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md b/files/zh-cn/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
index 4bb913db7e7993..801fef1f7b60cb 100644
--- a/files/zh-cn/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/what_we_write/criteria_for_inclusion/index.md
@@ -49,7 +49,8 @@ MDN Web 文档的使命是记录由可靠的标准机构发布的规范中的 We
 
 MDN Web 文档团队专注于记录开放 Web 平台。如果你想让 MDN Web 文档考虑记录某项技术，你需要组建一个愿意编写文档并在完成后维护文档的社区。我们团队很乐意在这种情况下提供包括编辑和反馈在内的指导，但我们没有除此以外的更多资源。
 
-> **备注：** MDN Web 文档的工作是在 GitHub 上“公开”进行的。你的团队应该熟悉 git 和 GitHub，并且习惯于在开源项目中工作。
+> [!NOTE]
+> MDN Web 文档的工作是在 GitHub 上“公开”进行的。你的团队应该熟悉 git 和 GitHub，并且习惯于在开源项目中工作。
 
 ## 选择新技术的流程
 
@@ -77,7 +78,8 @@ MDN Web 文档团队专注于记录开放 Web 平台。如果你想让 MDN Web 
 
 在这个阶段，你不需要向我们提供数百页的详细信息（事实上，我们更希望你不要这样做）。对于上述的每一点，用几段话就足够了。
 
-> **备注：** MDN Web 文档主要是英文站点（en-US）。你的项目的主要语言应该是美式英语。
+> [!NOTE]
+> MDN Web 文档主要是英文站点（en-US）。你的项目的主要语言应该是美式英语。
 
 ### 等待回复
 
diff --git a/files/zh-cn/mdn/writing_guidelines/what_we_write/index.md b/files/zh-cn/mdn/writing_guidelines/what_we_write/index.md
index 601d7732b4d36d..6004517de00bb5 100644
--- a/files/zh-cn/mdn/writing_guidelines/what_we_write/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/what_we_write/index.md
@@ -57,7 +57,8 @@ MDN Web 文档上记录的 Web 技术应该朝着标准方向发展，并且必
 
 我们还记录了一些更广泛的主题，例如 [SVG](/zh-CN/docs/Web/SVG)、[XML](/zh-CN/docs/Web/XML)、[WebAssembly](/zh-CN/docs/WebAssembly) 和[无障碍](/zh-CN/docs/Learn/Accessibility)。此外，我们还为这些技术提供了广泛的[学习指南](/zh-CN/docs/Learn/Accessibility)，还有相关的[术语表](/zh-CN/docs/Glossary)。
 
-> **备注：** 后端技术通常在其他地方有自己的文档，MDN 不会试图取代这些文档，尽管我们确实有一些[例外](/zh-CN/docs/Learn/Server-side)。
+> [!NOTE]
+> 后端技术通常在其他地方有自己的文档，MDN 不会试图取代这些文档，尽管我们确实有一些[例外](/zh-CN/docs/Learn/Server-side)。
 
 MDN Web 文档上的所有内容都必须与其出现的技术部分相关。贡献者应遵循这些 MDN 的编写风格、代码示例以及一些其他主题的[撰写指南](/zh-CN/docs/MDN/Writing_guidelines)。
 
diff --git a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
index 8bd4ce9168d353..f45d8bd4195f8d 100644
--- a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
@@ -19,7 +19,8 @@ Prettier 格式化所有代码并保持风格一致。尽管如此，你仍需
 
 ## 完整的 HTML 文档
 
-> **备注：** 这个小节中的指南只适用于你需要展示一份完整的 HTML 文档的时候。一个片段通常就足以用于演示一种特性。在使用 [EmbedLiveSample 宏](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Code_examples#传统运行实例)时，只需要包含 HTML 片段，片段会在显示的时候被自动插入到一个完整的 HTML 文档中。
+> [!NOTE]
+> 这个小节中的指南只适用于你需要展示一份完整的 HTML 文档的时候。一个片段通常就足以用于演示一种特性。在使用 [EmbedLiveSample 宏](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Code_examples#传统运行实例)时，只需要包含 HTML 片段，片段会在显示的时候被自动插入到一个完整的 HTML 文档中。
 
 ### Doctype
 
diff --git a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
index d75d9ccbd78693..779d2469976ee2 100644
--- a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
@@ -58,7 +58,8 @@ Prettier 格式化所有代码并保持风格一致。尽管如此，你仍需
 
 如果代码块是伪代码、命令的输出或其他非编程语言，请将语言明确设置为 `plain`。
 
-> **警告：** 如果 MDN 尚未支持所需的语言，请**不要**将代码块的语言设置为类似的语言，因为这样做可能会导致 Prettier 格式化和语法高亮出现意外的副作用。
+> [!WARNING]
+> 如果 MDN 尚未支持所需的语言，请**不要**将代码块的语言设置为类似的语言，因为这样做可能会导致 Prettier 格式化和语法高亮出现意外的副作用。
 
 ### 代码行长度
 
diff --git a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
index 097d46038abaa4..bf5b871befb300 100644
--- a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md
@@ -387,9 +387,11 @@ function doIt() {
   }
   ```
 
-> **警告：** 切勿使用 `for...in` 遍历数组和字符串。
+> [!WARNING]
+> 切勿使用 `for...in` 遍历数组和字符串。
 
-> **备注：** 考虑完全不使用 `for` 循环。如果你正在使用 [`Array`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)（或者在某些操作中使用 [`String`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String)），请考虑使用更具语义的迭代方法，比如 [`map()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)、[`every()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every)、[`findIndex()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)、[`find()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find)、[`includes()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 等。
+> [!NOTE]
+> 考虑完全不使用 `for` 循环。如果你正在使用 [`Array`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)（或者在某些操作中使用 [`String`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String)），请考虑使用更具语义的迭代方法，比如 [`map()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)、[`every()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every)、[`findIndex()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)、[`find()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find)、[`includes()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 等。
 
 ### 控制语句
 
@@ -512,7 +514,8 @@ switch 语句可能有点棘手。
   }
   ```
 
-> **备注：** 请记住，只有*可恢复*的错误才应该被捕获和处理。所有不可恢复的错误都应该被抛出，并在调用栈中逐级向上冒泡。
+> [!NOTE]
+> 请记住，只有*可恢复*的错误才应该被捕获和处理。所有不可恢复的错误都应该被抛出，并在调用栈中逐级向上冒泡。
 
 ## 对象
 
@@ -722,7 +725,8 @@ age != 25;
   const s = d / t;
   ```
 
-> **备注：** 唯一不允许使用可读性好的语义名称的地方是存在非常公认的惯例，例如将 `i` 和 `j` 用于循环迭代器。
+> [!NOTE]
+> 唯一不允许使用可读性好的语义名称的地方是存在非常公认的惯例，例如将 `i` 和 `j` 用于循环迭代器。
 
 ### 变量声明
 
diff --git a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md
index 34503eabb461b5..fa674ea2c4b6a6 100644
--- a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md
@@ -9,9 +9,11 @@ slug: MDN/Writing_guidelines/Writing_style_guide
 
 这些指南是为了确保整个网站的语言和风格的一致性。也就是说，我们对内容而不是格式更感兴趣，所以不必在为 MDN Web 文档贡献前学习整个写作风格指南。然而，如果其他贡献者后来编辑你的作品以符合该指南，请不要感到不安或惊讶。当你提交内容拉取请求时，审稿人也可能将你指向这个风格指南。
 
-> **备注：** 本指南的语言方面主要适用于英语文档。其他语言可能有（并且欢迎创建）他们自己的风格指南。这些应该作为各自的本地化团队页面的子页面发布。然而，在格式化和组织内容时，仍应参考本指南。
+> [!NOTE]
+> 本指南的语言方面主要适用于英语文档。其他语言可能有（并且欢迎创建）他们自己的风格指南。这些应该作为各自的本地化团队页面的子页面发布。然而，在格式化和组织内容时，仍应参考本指南。
 
-> **备注：** 简体中文翻译时的规范请参见《[简体中文翻译指南](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md)》，当然“简体中文翻译指南”仅列出了常见的规范，这份文档较为详细一点，在翻译时，参考一些相关内容也是有益的。
+> [!NOTE]
+> 简体中文翻译时的规范请参见《[简体中文翻译指南](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md)》，当然“简体中文翻译指南”仅列出了常见的规范，这份文档较为详细一点，在翻译时，参考一些相关内容也是有益的。
 
 在列出一般的写作准则后，本指南介绍了 MDN Web 文档的推荐写作风格，然后介绍了如何对页面上的不同组件进行格式化，如列表和标题。
 
@@ -103,7 +105,8 @@ MDN 拥有广泛而多样化的受众。我们强烈建议尽可能保持文本
 
 - **正确**：A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.
 
-> **备注：** MDN 允许在这里使用第三人称复数，也就是通常所说的“[单数形式的‘they’](https://zh.wikipedia.org/wiki/单数they)”。中性代名词包括：“they”、“them”、“their”和“theirs”。
+> [!NOTE]
+> MDN 允许在这里使用第三人称复数，也就是通常所说的“[单数形式的‘they’](https://zh.wikipedia.org/wiki/单数they)”。中性代名词包括：“they”、“them”、“their”和“theirs”。
 
 或者使用复数形式的“users”：
 
@@ -145,7 +148,8 @@ MDN 拥有广泛而多样化的受众。我们强烈建议尽可能保持文本
   - **增加例子**：应该有涵盖所有参数或至少是初级到中级用户可能使用的参数（或属性）的例子，以及任何需要额外解释的高级参数。每个例子前面都应该有一个概述，说明这个例子将做什么，理解它可能需要哪些额外的知识，等等。在例子之后（或穿插在例子的各个部分）应该有解释代码如何工作的文字。不要吝啬例子中的细节和对错误的处理。请记住，用户会复制和粘贴你的例子在他们自己的项目中使用，而你的代码也会在生产网站上使用！请参阅我们的[代码范例指南](/zh-CN/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide)以获得更多有用的信息。
   - **解释用例**：如果所描述的功能有特别常见的用例，那就谈一谈吧！而不是假设用户会在使用过程中出现问题！与其假设用户会发现被记录的方法可以用来解决一个常见的开发问题，不如实际添加一个关于该用例的部分，并提供一个例子和解释该例子如何工作的文字。
   - **添加图片信息**：在所有的图像和图表上包括适当的 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 文本。这个文本，以及表格和其他数字的标题，都是重要的，因为网络蜘蛛不能抓取图像，所以 `alt` 文本告诉搜索引擎爬虫嵌入式媒体包含哪些内容。
-    > **备注：** 不建议包含过多的关键词或与功能无关的关键词，以试图操纵搜索引擎的排名；这种类型的行为很容易被发现，而且往往会受到惩罚。同样，**不要**在实际页面内添加重复的、无益的材料或大量的关键词，以试图提高页面的大小和搜索排名。这对内容的可读性和我们的搜索结果来说都是弊大于利。
+    > [!NOTE]
+    > 不建议包含过多的关键词或与功能无关的关键词，以试图操纵搜索引擎的排名；这种类型的行为很容易被发现，而且往往会受到惩罚。同样，**不要**在实际页面内添加重复的、无益的材料或大量的关键词，以试图提高页面的大小和搜索排名。这对内容的可读性和我们的搜索结果来说都是弊大于利。
   - **专注于主题内容**：随着谷歌在 2013 年的 Hummingbird 更新，人们越来越关注使用自然语言来传达信息。这意味着，围绕页面的主题来写内容要比围绕特定的关键词好得多。对于一个给定的主题，你极有可能包括许多关键词；事实上，许多 SEO 编制了一个 5-100 个不同关键词的清单（在短、中、长尾关键词之间变化），以包括在他们的文章中，这取决于长度。这样做会使你的措辞多样化，从而减少重复。
 
 ## 写作风格
@@ -205,7 +209,8 @@ MDN 拥有广泛而多样化的受众。我们强烈建议尽可能保持文本
   | N.B.     | _nota bene_      | note well               |
   | P.S.     | _post scriptum_  | postscript              |
 
-  > **备注：** 在使用前请仔细思考使用拉丁文缩写是否真的能带来好处。上面列出的某些缩写很少用到，很多读者可能不知道其意思，还有一些读者可能会分不清其中的某些缩写。
+  > [!NOTE]
+  > 在使用前请仔细思考使用拉丁文缩写是否真的能带来好处。上面列出的某些缩写很少用到，很多读者可能不知道其意思，还有一些读者可能会分不清其中的某些缩写。
   >
   > 另外，如果你决定使用缩写，那么请确保*你*的用法是正确的。比如，一个很多人经常会犯的错误是将“e.g.”和“i.e.”弄混。
 
@@ -224,7 +229,8 @@ MDN 拥有广泛而多样化的受众。我们强烈建议尽可能保持文本
 
 在文章内容中请使用标准英文大写规则，比如对于“World Wide Web”需大写每个单词的首字母。如果“web”和“internet”是单独使用或作为修饰词使用，那么将其全小写也可以。
 
-> **备注：** 这一指导原则是后来修改过的，所以在 MDN 中你也许会看到很多首字母大写的“Web”和“Internet”。当你编辑文章的时候遇到这种情况，可以随它去，也可以随手修改一下。但是仅仅只是为了修改一下大写的话就没必要专门去编辑一下了。
+> [!NOTE]
+> 这一指导原则是后来修改过的，所以在 MDN 中你也许会看到很多首字母大写的“Web”和“Internet”。当你编辑文章的时候遇到这种情况，可以随它去，也可以随手修改一下。但是仅仅只是为了修改一下大写的话就没必要专门去编辑一下了。
 
 对于键盘按键，应该使用普通的大写规则，而不是全大写。比如，是“<kbd>Enter</kbd>”而不是“<kbd>ENTER</kbd>”。不过你可以使用“<kbd>ESC</kbd>”作为“<kbd>EScape</kbd>”的缩写。
 
@@ -279,7 +285,8 @@ MDN 拥有广泛而多样化的受众。我们强烈建议尽可能保持文本
 - **正确**：Please don't use "curly quotes."
 - **错误**：Please don’t use “curly quotes.”
 
-> **备注：** 中文与英文的使用习惯是不同的，在翻译时，应该遵循[简体中文翻译指南 - 标点符号](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md#标点符号)中的有关说明。
+> [!NOTE]
+> 中文与英文的使用习惯是不同的，在翻译时，应该遵循[简体中文翻译指南 - 标点符号](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md#标点符号)中的有关说明。
 
 ### 逗号
 
@@ -316,7 +323,8 @@ MDN 拥有广泛而多样化的受众。我们强烈建议尽可能保持文本
     - **正确**："My father is strict but loving."
     - **错误**："My father is strict, but loving."
 
-  > **备注：** 这种情况在翻译成简体中文时应将逗号翻译为顿号。“简体中文翻译指南”一文的[标点符号](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md#标点符号)”一节中也提到了这个问题。
+  > [!NOTE]
+  > 这种情况在翻译成简体中文时应将逗号翻译为顿号。“简体中文翻译指南”一文的[标点符号](https://github.com/mdn/translated-content/blob/main/docs/zh-cn/translation-guide.md#标点符号)”一节中也提到了这个问题。
 
 - **在“that”和“which”之前：** 限制性从句对句子的意义至关重要，不需要用逗号将其与其余句子隔开。限制性从句通常由“that”引入，**不应**在其前面加逗号。
 
@@ -414,7 +422,8 @@ MDN Web 文档上的一个页面可以包含一个以上的代码示例。以下
 - 试图利用 MDN Web 文档来传播垃圾信息
 - 混淆链接目的地的短链接
 
-> **备注：** 在添加外部链接之前，考虑在 MDN Web 文档内交叉引用内容。内部链接更容易维护，并使整个 MDN Web 文档对读者更有价值。
+> [!NOTE]
+> 在添加外部链接之前，考虑在 MDN Web 文档内交叉引用内容。内部链接更容易维护，并使整个 MDN Web 文档对读者更有价值。
 
 - **良好的外部链接**：好的外部链接能把读者带到相关的、持久的、被广泛信任的资源。你应该更倾向于添加链接到以下的外部内容：
 
@@ -433,7 +442,8 @@ MDN Web 文档上的一个页面可以包含一个以上的代码示例。以下
 
 - **自我宣传或垃圾链接**：虽然个人博客文章、会议演讲或 GitHub 资源库有价值，但链接到你自己的资源会造成利益冲突的表象。在链接到与你有商业或个人联系的资源之前，请三思而行。
 
-  > **备注：** 如果你与链接的目标有商业或个人关系，你必须在你的拉取请求中披露这种关系。如果不这样做，可能会危及你继续参与 MDN Web 文档的工作。
+  > [!NOTE]
+  > 如果你与链接的目标有商业或个人关系，你必须在你的拉取请求中披露这种关系。如果不这样做，可能会危及你继续参与 MDN Web 文档的工作。
 
   有时，这种链接是相关的和适当的。例如，如果你是一个规范的编辑，并且你正在贡献与该规范相关的文档，那么链接到该规范是可以预期和接受的。但你必须披露你和该链接之间的关系。
 
diff --git a/files/zh-cn/web/accessibility/accessibility_and_spacial_patterns/index.md b/files/zh-cn/web/accessibility/accessibility_and_spacial_patterns/index.md
index b49642e09134a2..971672672f3c64 100644
--- a/files/zh-cn/web/accessibility/accessibility_and_spacial_patterns/index.md
+++ b/files/zh-cn/web/accessibility/accessibility_and_spacial_patterns/index.md
@@ -23,7 +23,8 @@ l10n:
 
 2005 年，阿诺德·威尔金斯、约翰·埃米特和格雷厄姆·哈丁评估了导致癫痫发作的图案图像的特征化准则。他们修订了准则的核心内容，并提出了一种出人意料的简单但有效的[测试](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1528-1167.2005.01405.x)，他们在论文[**《表征诱发癫痫的图案图像并优化预防准则》**](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1528-1167.2005.01405.x)中发表了这一测试。
 
-> **备注：** 评估材料所需的步骤简化如下：
+> [!NOTE]
+> 评估材料所需的步骤简化如下：
 > 注视屏幕：
 >
 > - 是否有超过五个条纹？
diff --git a/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
index 8e8361ce80be18..a13c24c3d48ba1 100644
--- a/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
+++ b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
@@ -44,7 +44,8 @@ _示例 2：标签页微件的视觉样式。用户可能能够通过视觉识
 
 **ARIA**（无障碍富互联网应用）使开发者能够通过为标记添加特殊属性来更详细地描述微件。ARIA 旨在填补标准 HTML 标签与动态 Web 应用程序中的桌面样式控件之间的空白，它提供了角色和状态来描述大多数熟悉的 UI 微件的行为。
 
-> **警告：** 其中的许多是在浏览器不完全支持现代 HTML 特性时添加的。**开发者应该始终优先使用正确的语义化 HTML 元素而不是使用 ARIA**。
+> [!WARNING]
+> 其中的许多是在浏览器不完全支持现代 HTML 特性时添加的。**开发者应该始终优先使用正确的语义化 HTML 元素而不是使用 ARIA**。
 
 ARIA 规范分为三种不同类型的属性（attribute）：角色、状态和属性（property）。角色描述了 HTML4 中没有的微件，例如滑块、菜单栏、标签页和对话框。属性描述了这些微件的特性，例如它们是否可拖动、是否有必填元素或是否有与之关联的弹出窗口。状态描述了元素的当前交互状态，通知辅助技术它是否繁忙、禁用、选中或隐藏。
 
@@ -155,7 +156,8 @@ ARIA 允许开发者在这个元素本身提供了错误语义或没有语义的
 
 ### 异步内容变化
 
-> **备注：** 正在施工中。请参见[实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)。
+> [!NOTE]
+> 正在施工中。请参见[实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)。
 
 ## 键盘导航
 
diff --git a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md
index de957321acc838..c3201d04e52889 100644
--- a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md
+++ b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md
@@ -9,7 +9,8 @@ l10n:
 
 使用 JavaScript，我们可以动态更改页面的某些部分，而无需重新加载整个页面——例如，可以动态更新搜索结果列表，或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的，但是对于使用辅助技术的用户来说，它们可能并不明显。ARIA 实时区域（live region）填补了这个空白，并提供了一种以编程方式显现动态内容更改的方法，这种方式可以由辅助技术提供宣告。
 
-> **备注：** 辅助技术通常只会宣告实时区域中的*动态*内容变更。在你希望宣告发生变更的元素，你只需要在变更发生之前在相应的元素上包含 `aria-live` 属性或专门的实时区域 `role`（例如 [`role="status"`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/status_role)）——无论是在原始标记中，还是使用 JavaScript 动态添加。首先创建一个空的实时区域，然后——在单独的步骤中——更改区域内的内容。虽然在规范中没有明确记录，但浏览器/辅助技术确实对 [`role="alert"`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/alert_role) 包含了特殊处理：在大多数情况下，即使页面的初始标记中已经存在包含通知/消息的 `role="alert"` 区域，或者动态注入到页面中，该区域内的内容也会被宣告。但是，请注意，`role="alert"` 区域在被宣告时会根据特定的浏览器/辅助技术组合自动添“警报”前缀。
+> [!NOTE]
+> 辅助技术通常只会宣告实时区域中的*动态*内容变更。在你希望宣告发生变更的元素，你只需要在变更发生之前在相应的元素上包含 `aria-live` 属性或专门的实时区域 `role`（例如 [`role="status"`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/status_role)）——无论是在原始标记中，还是使用 JavaScript 动态添加。首先创建一个空的实时区域，然后——在单独的步骤中——更改区域内的内容。虽然在规范中没有明确记录，但浏览器/辅助技术确实对 [`role="alert"`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/alert_role) 包含了特殊处理：在大多数情况下，即使页面的初始标记中已经存在包含通知/消息的 `role="alert"` 区域，或者动态注入到页面中，该区域内的内容也会被宣告。但是，请注意，`role="alert"` 区域在被宣告时会根据特定的浏览器/辅助技术组合自动添“警报”前缀。
 
 ## 实时区域
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-activedescendant/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-activedescendant/index.md
index 412f2f20481614..5e39888b1fe318 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-activedescendant/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-activedescendant/index.md
@@ -25,9 +25,11 @@ l10n:
 
 `aria-activedescendant` 的值引用受控元素所拥有的元素。例如，在组合框中，焦点可能仍然位于组合框上，但组合框元素上的 `aria-activedescendant` 的值引用由组合框控制的弹出列表框的后代。
 
-> **备注：** 该属性仅支持少数角色。例如，`dialog` 不支持 `aria-activedescendant`。当组合框打开对话框时，DOM 焦点从组合框移动到对话框，因为它不能通过此属性进行引用。
+> [!NOTE]
+> 该属性仅支持少数角色。例如，`dialog` 不支持 `aria-activedescendant`。当组合框打开对话框时，DOM 焦点从组合框移动到对话框，因为它不能通过此属性进行引用。
 
-> **备注：** 当焦点位于 `listbox`、`grid` 或 `tree` 弹出窗口的后代时，DOM 焦点保持在组合框上，并且组合框的 `aria-activedescendant` 设置为引用弹出窗口内的焦点元素的值。
+> [!NOTE]
+> 当焦点位于 `listbox`、`grid` 或 `tree` 弹出窗口的后代时，DOM 焦点保持在组合框上，并且组合框的 `aria-activedescendant` 设置为引用弹出窗口内的焦点元素的值。
 
 ## 值
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-braillelabel/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-braillelabel/index.md
index e8a63bbc2b7446..a46547def2e37c 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-braillelabel/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-braillelabel/index.md
@@ -23,7 +23,8 @@ l10n:
 - `aria-braillelabel` 值被本地化以与文档语言对齐。
 - 向用户说明此属性可用，特别是如果内容包含 Unicode 盲文模式，以便用户知道设置以应用用户特定的盲文翻译
 
-> **备注：** 支持盲文的辅助技术可以将无障碍名称转换为盲文。因此，仅当无障碍名称不是你想要的用户体验时才使用 `aria-braillelabel`。
+> [!NOTE]
+> 支持盲文的辅助技术可以将无障碍名称转换为盲文。因此，仅当无障碍名称不是你想要的用户体验时才使用 `aria-braillelabel`。
 
 仅使用无障碍名称，例如从内容或通过 `aria-label` 获取，几乎总是更好的用户体验，因此不要使用 aria-braillelabel 来复制 aria-label。只有在无障碍名称无法提供足够的盲文表示时才使用 `aria-braillelabel`。
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-brailleroledescription/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-brailleroledescription/index.md
index 6024c0c39f6917..a15a727cd2eabf 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-brailleroledescription/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-brailleroledescription/index.md
@@ -42,9 +42,11 @@ l10n:
 - 避免使用 Unicode 盲文模式。如果必须使用，请确保 `aria-brailleroledescription` 值包含除 Unicode 盲文模式、空白字符和盲文模式点 0 之外的内容。
 - 确保该值始终针对文档的语言进行本地化。
 
-> **警告：** 如果内容仅为 Unicode 盲文模式，则该值将不会根据用户的首选翻译表进行翻译。
+> [!WARNING]
+> 如果内容仅为 Unicode 盲文模式，则该值将不会根据用户的首选翻译表进行翻译。
 
-> **备注：** 不要使用 `aria-brailleroledescription` 复制 `aria-roledescription`。只有当 `aria-roledescription` 无法提供足够的盲文表示时才包含此属性。
+> [!NOTE]
+> 不要使用 `aria-brailleroledescription` 复制 `aria-roledescription`。只有当 `aria-roledescription` 无法提供足够的盲文表示时才包含此属性。
 
 如果 `aria-brailleroledescription` 的值满足以下情况，将不会向盲文用户显示：
 
@@ -52,7 +54,8 @@ l10n:
 - 应用了属性的元素具有禁止使用 `aria-brailleroledescription` 的显式或隐式 WAI-ARIA 角色，包括 `generic` 角色。
 - 应用了属性的元素没有有效的 `aria-roledescription`。
 
-> **备注：** 请使用辅助技术的日常用户进行网站和应用程序测试，包括盲文读者，以确保你的内容在盲文中有意义。
+> [!NOTE]
+> 请使用辅助技术的日常用户进行网站和应用程序测试，包括盲文读者，以确保你的内容在盲文中有意义。
 
 ## 值
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-checked/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-checked/index.md
index 5d72a436a73885..45a116432502a3 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-checked/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-checked/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `aria-checked` 属性指示复选框、单选按钮和其他小部件的当前“已选中”状态。
 
-> **备注：** 在可能的情况下，请使用带有 `type="checkbox"` 和 `type="radio"` 的 HTML {{htmlelement("input")}} 元素，因为它们具有内置语义，并且不需要 ARIA 属性。
+> [!NOTE]
+> 在可能的情况下，请使用带有 `type="checkbox"` 和 `type="radio"` 的 HTML {{htmlelement("input")}} 元素，因为它们具有内置语义，并且不需要 ARIA 属性。
 
 ## 描述
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colindextext/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colindextext/index.md
index 78b6fd2d85a45b..48248aa17e1683 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-colindextext/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colindextext/index.md
@@ -58,7 +58,8 @@ l10n:
 
 只有在提供或计算的 `aria-colindex` 的值不具有意义或不反映出显示的索引时，才使用 `aria-colindextext`。每当包含 `aria-colindextext` 时，也要保留 `aria-colindex`，因为一些辅助技术依赖于数字列索引来跟踪用户的位置，并提供替代的表格导航。
 
-> **备注：** 虽然当所有存在的列都是连续的时，`aria-colindex` 可以添加到行中，因为可以推断出顺序值，但 `aria-colindextext` 不是 [`row`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/row_role) 的受支持属性。
+> [!NOTE]
+> 虽然当所有存在的列都是连续的时，`aria-colindex` 可以添加到行中，因为可以推断出顺序值，但 `aria-colindextext` 不是 [`row`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/row_role) 的受支持属性。
 
 请参阅相关的 [`aria-rowindextext`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext)。
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md
index 731a4e4106c4e7..f9bf8217f37c98 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md
@@ -23,13 +23,15 @@ l10n:
 
 不应该在可以获得焦点的元素上使用 `aria-hidden="true"`。此外，由于此属性会被元素的子元素继承，因此不应该添加到可获得焦点元素的父元素或祖先元素上。
 
-> **警告：** 不要在可以获得焦点的元素上使用 `aria-hidden="true"`。
+> [!WARNING]
+> 不要在可以获得焦点的元素上使用 `aria-hidden="true"`。
 
 元素的隐藏状态基于其是否被渲染。渲染通常由 CSS 控制。例如，通过 CSS 将元素的 `display` 属性设置为 `none`，该元素就不会被渲染。如果元素或其任何祖先元素没有被渲染或其 `aria-hidden` 属性值设置为 true，则该元素被视为隐藏。请注意，已在元素及其子元素上声明了 `aria-hidden="true"` 的元素仍然可见，除非也被 CSS 隐藏。
 
 在使用 `aria-hidden` 将可见渲染内容隐藏时，请谨慎使用。除非通过移除冗余或多余内容改善了辅助技术用户的体验，否则不应隐藏可见内容。只有当对辅助技术公开了相同或等同的含义和功能时，才可以将可见内容从无障碍 API 中移除。
 
-> **备注：** 在对辅助技术隐藏可见渲染内容时，请考虑所有残障人士。并非所有辅助技术用户都有视觉障碍。如果可见内容与无障碍 API 中的文本内容不匹配，那么视力正常用户的体验将受到负面影响。
+> [!NOTE]
+> 在对辅助技术隐藏可见渲染内容时，请考虑所有残障人士。并非所有辅助技术用户都有视觉障碍。如果可见内容与无障碍 API 中的文本内容不匹配，那么视力正常用户的体验将受到负面影响。
 
 表面上，`aria-hidden="true"` 和 `role="presentation"` 及其同义词 `role="none"` 看起来相似，但每个背后的意图是不同的。
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md
index 7cab9ce5f7083d..680688ff2f8a30 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md
@@ -40,7 +40,8 @@ l10n:
 
 如果这些选项都不可用，或者如果默认的无障碍名称不合适，则使用 `aria-label` 属性定义元素的无障碍名称。
 
-> **备注：** 虽然 `aria-label` 可以用于任何可以具有无障碍名称的元素，但在实践中，它仅支持交互元素、[小部件](/zh-CN/docs/Web/Accessibility/ARIA/Roles#2._小部件角色)、[地标](/zh-CN/docs/Web/Accessibility/ARIA/Roles#3._地标角色)、图像和 iframe。
+> [!NOTE]
+> 虽然 `aria-label` 可以用于任何可以具有无障碍名称的元素，但在实践中，它仅支持交互元素、[小部件](/zh-CN/docs/Web/Accessibility/ARIA/Roles#2._小部件角色)、[地标](/zh-CN/docs/Web/Accessibility/ARIA/Roles#3._地标角色)、图像和 iframe。
 
 在使用 `aria-label` 时，还需要考虑 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)：
 
@@ -53,7 +54,8 @@ l10n:
 
 - 不要“滥用” `aria-label`。记住它主要是为辅助技术设计的。为了提供额外的指示或澄清 UI，请使用可见文本和 `aria-describedby` 或 [`aria-description`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description)，而不是 `aria-label`。说明应该对所有用户都无障碍，而不仅仅是屏幕阅读器用户（或者最好使你的 UI 更直观）。
 
-  > **备注：** 由于 `aria-label` 内容在辅助技术之外不显示，请考虑让所有用户看到重要信息。
+  > [!NOTE]
+  > 由于 `aria-label` 内容在辅助技术之外不显示，请考虑让所有用户看到重要信息。
 
 - 并非所有元素都可以获得无障碍名称。`aria-label` 和 `aria-labelledby` 均不应该与 `code`、`term` 和 `emphasis` 这样的行内结构角色以及未映射到辅助技术 API 的角色（包括 `none`）一起使用。`aria-label` 属性适用于链接、视频、表单控件以及具有[地标角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles#3._地标角色)或[小部件角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles#2._小部件角色)的元素；当 DOM 中不存在可见标签时，`aria-label` 提供了无障碍名称。
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md
index 208a319a552ed5..bb75db60a56719 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md
@@ -23,7 +23,8 @@ l10n:
 
 `aria-labelledby` 和 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)属性都引用其他元素来计算文本替代。`aria-labelledby` 应引用提供给元素无障碍名称的简短文本。`aria-describedby` 用于引用提供描述的较长内容。如果 DOM 中没有为交互元素提供适合作为无障碍名称的简短标签的元素，则使用 `aria-label` 来定义交互元素的无障碍名称。
 
-> **备注：** 虽然在美式英语中会假定该属性的拼写为“labeledby”，但“labelledby”拼写已被确立，并且是无障碍 API 中使用的拼写。
+> [!NOTE]
+> 虽然在美式英语中会假定该属性的拼写为“labeledby”，但“labelledby”拼写已被确立，并且是无障碍 API 中使用的拼写。
 
 以下示例使用 `aria-labelledby` 通过使用兄弟元素的文本内容为复选框输入提供无障碍名称：
 
@@ -77,7 +78,8 @@ l10n:
 6. `aria-labelledby` 属性会合并输入元素的值。如果值引用了一个 `<input>`，则表单控件的当前值将包含在计算的名称字符串中，并在值更新时改变。
 7. `aria-labelledby` 属性不能被链式使用。如果具有 `aria-labelledby` 的元素引用了另一个也具有 `aria-labelledby` 的元素，那么被引用元素上的 `aria-labelledby` 属性将被忽略。
 
-> **警告：** 因为计算具有 `aria-labelledby` 的元素的名称可能会很复杂，而且会引用隐藏的内容，所以使用辅助技术进行测试以确保用户看到的是预期的名称非常重要。
+> [!WARNING]
+> 因为计算具有 `aria-labelledby` 的元素的名称可能会很复杂，而且会引用隐藏的内容，所以使用辅助技术进行测试以确保用户看到的是预期的名称非常重要。
 
 ## 值
 
diff --git a/files/zh-cn/web/accessibility/aria/attributes/index.md b/files/zh-cn/web/accessibility/aria/attributes/index.md
index 1cfc4474dbe478..da5773367b6d7f 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/index.md
@@ -9,7 +9,8 @@ slug: Web/Accessibility/ARIA/Attributes
 
 ARIA 属性用于修改无障碍树中定义的元素的状态和属性。
 
-> **备注：** ARIA 仅用于修改无障碍树，进而改变辅助技术向用户呈现内容的方式。ARIA 不会改变元素的功能或行为。当使用非语义化的 HTML 元素来实现其他功能时，你必须使用 JavaScript 来控制元素的实际行为、焦点以及 ARIA 状态。
+> [!NOTE]
+> ARIA 仅用于修改无障碍树，进而改变辅助技术向用户呈现内容的方式。ARIA 不会改变元素的功能或行为。当使用非语义化的 HTML 元素来实现其他功能时，你必须使用 JavaScript 来控制元素的实际行为、焦点以及 ARIA 状态。
 
 ## ARIA 特性类别
 
diff --git a/files/zh-cn/web/accessibility/aria/index.md b/files/zh-cn/web/accessibility/aria/index.md
index b37484de1e5aed..c7b818696aa8a3 100644
--- a/files/zh-cn/web/accessibility/aria/index.md
+++ b/files/zh-cn/web/accessibility/aria/index.md
@@ -9,11 +9,13 @@ slug: Web/Accessibility/ARIA
 
 它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持无障碍 JavaScript 小部件、表单提示和错误消息、实时内容更新等。
 
-> **警告：** 许多这些小部件在现代浏览器中都已经完全支持。如果有正确语义的 HTML 元素存在的话，**开发人员应该更喜欢使用这样的元素而不是使用 ARIA**。例如，原生元素具有内置的[键盘无障碍](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)、角色和状态。但是，如果你选择使用 ARIA，则你有责任在脚本中模仿等效的浏览器行为。
+> [!WARNING]
+> 许多这些小部件在现代浏览器中都已经完全支持。如果有正确语义的 HTML 元素存在的话，**开发人员应该更喜欢使用这样的元素而不是使用 ARIA**。例如，原生元素具有内置的[键盘无障碍](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)、角色和状态。但是，如果你选择使用 ARIA，则你有责任在脚本中模仿等效的浏览器行为。
 
 使用 [ARIA 的第一规则](https://www.w3.org/TR/using-aria/#rule1)是“如果你能够使用原生的 HTML 元素或属性，并且有你需要但已经建立在里面的语义和行为，而不是重新调整元素的用途并添加 ARIA 角色、状态或者属性来使它更加无障碍，那么你就应该如此。”
 
-> **备注：** 有个说法叫做“ARIA 宁缺毋滥”。在 [WebAim 对超过 100 万个主页的调查](https://webaim.org/projects/million/#aria)中，他们发现，有 ARIA 存在的主页比那些没有 ARIA 的，多检测出了平均 41% 的错误。尽管 ARIA 是为了使网页更加无障碍而设计的，但是如果使用不当，可能适得其反。
+> [!NOTE]
+> 有个说法叫做“ARIA 宁缺毋滥”。在 [WebAim 对超过 100 万个主页的调查](https://webaim.org/projects/million/#aria)中，他们发现，有 ARIA 存在的主页比那些没有 ARIA 的，多检测出了平均 41% 的错误。尽管 ARIA 是为了使网页更加无障碍而设计的，但是如果使用不当，可能适得其反。
 
 这是进度条小部件的标记：
 
@@ -57,7 +59,8 @@ function updateProgress(percentComplete) {
 
 > **备注：** {{HTMLElement('progress')}} 元素不允许 `min` 属性，最小值永远为 0。
 
-> **备注：** HTML 地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。
+> [!NOTE]
+> HTML 地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。
 
 ## 支持
 
diff --git a/files/zh-cn/web/accessibility/aria/multipart_labels/index.md b/files/zh-cn/web/accessibility/aria/multipart_labels/index.md
index 60f1e771455bd3..ac3d4796f6ec70 100644
--- a/files/zh-cn/web/accessibility/aria/multipart_labels/index.md
+++ b/files/zh-cn/web/accessibility/aria/multipart_labels/index.md
@@ -47,7 +47,8 @@ body {
 
 JAWS 8.0 有自己的逻辑来查找标签，导致它始终覆盖 HTML 文档中文本框的 accessibleName。对于 JAWS 8，我还没有找到一种方法让它接受上面示例中的标签。但是 NVDA 和 Window-Eyes 可以很好地实现，Linux 上的 Orca 也没有问题。
 
-> **备注：** 待定：添加更多兼容性信息
+> [!NOTE]
+> 待定：添加更多兼容性信息
 
 ## 可以在没有 ARIA 的情况下完成吗？
 
diff --git a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md
index 67647de6229789..7b0baace9714e1 100644
--- a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md
@@ -25,7 +25,8 @@ button 角色会向辅助技术（如屏幕阅读器）识别一个元素为按
 <button type="button" id="saveChanges">保存</button>
 ```
 
-> **备注：** 如果使用 `role="button"` 而不是语义化的 `<button>` 或 `<input type="button">` 你需要让这个元素可聚焦并定义 {{domxref("Element/click_event", "click")}} 和 {{domxref("Element/keydown_event", "keydown")}} 事件的事件处理器。这包括了对按下 <kbd>Enter</kbd> 和 <kbd>Space</kbd> 的事件的处理，以处理各种形式的用户输入。参见[官方的 WAI-ARIA 示例代码](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)。
+> [!NOTE]
+> 如果使用 `role="button"` 而不是语义化的 `<button>` 或 `<input type="button">` 你需要让这个元素可聚焦并定义 {{domxref("Element/click_event", "click")}} 和 {{domxref("Element/keydown_event", "keydown")}} 事件的事件处理器。这包括了对按下 <kbd>Enter</kbd> 和 <kbd>Space</kbd> 的事件的处理，以处理各种形式的用户输入。参见[官方的 WAI-ARIA 示例代码](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)。
 
 除了常见的按钮部件之外，使用非按钮元素创建切换按钮和菜单按钮时，应该使用 `role="button"`。
 
@@ -267,7 +268,8 @@ function toggleButton(element) {
 
 按钮本身是可交互的，因此可聚焦。如果给自身不可聚焦的元素（如 `<span>`、`<div>` 或 `<p>`）添加了 `button` 角色，那么就应该使用 `tabindex` 属性以使得按钮可聚焦。
 
-> **警告：** 谨慎将链接标记为按钮。按钮是预期使用 <kbd>Space</kbd> 或 <kbd>Enter</kbd> 键触发的，而链接是预期使用 <kbd>Enter</kbd> 触发的。也就是说，如果将链接用作按钮，仅添加 `role="button"` 是不够的。还有必要为 <kbd>Space</kbd> 键添加一个按键事件处理器，以与原生按钮的行为保持一致。
+> [!WARNING]
+> 谨慎将链接标记为按钮。按钮是预期使用 <kbd>Space</kbd> 或 <kbd>Enter</kbd> 键触发的，而链接是预期使用 <kbd>Enter</kbd> 触发的。也就是说，如果将链接用作按钮，仅添加 `role="button"` 是不够的。还有必要为 <kbd>Space</kbd> 键添加一个按键事件处理器，以与原生按钮的行为保持一致。
 
 使用了 `button` 角色时，屏幕阅读器会声明其说成是一个按钮，通常是说“单击（click）”然后是其无障碍名称。无障碍名称是元素的内容，或是 `aria-label` 的值，或是由 `aria-labelledby` 属性引用的元素的值，或是描述（如果已包括）。
 
diff --git a/files/zh-cn/web/accessibility/aria/roles/index.md b/files/zh-cn/web/accessibility/aria/roles/index.md
index 482872bb90d699..cc07fbec60fd7a 100644
--- a/files/zh-cn/web/accessibility/aria/roles/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/index.md
@@ -137,9 +137,11 @@ ARIA 角色共分为 6 类：
 
 避免使用[command](/zh-CN/docs/Web/Accessibility/ARIA/Roles/command_role)、[composite](/zh-CN/docs/Web/Accessibility/ARIA/Roles/composite_role)、[input](/zh-CN/docs/Web/Accessibility/ARIA/Roles/input_role)、[landmark](/zh-CN/docs/Web/Accessibility/ARIA/Roles/landmark_role)、[range](/zh-CN/docs/Web/Accessibility/ARIA/Roles/range_role)、[roletype](/zh-CN/docs/Web/Accessibility/ARIA/Roles/roletype_role)、[section](/zh-CN/docs/Web/Accessibility/ARIA/Roles/section_role)、[sectionhead](/zh-CN/docs/Web/Accessibility/ARIA/Roles/sectionhead_role)、[select](/zh-CN/docs/Web/Accessibility/ARIA/Roles/select_role)、[structure](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structure_role)、[widget](/zh-CN/docs/Web/Accessibility/ARIA/Roles/widget_role) 和 [window](/zh-CN/docs/Web/Accessibility/ARIA/Roles/window_role)。
 
-> **备注：** 不要在你的网站和应用中使用抽象角色。抽象角色是由浏览器使用的，这里列出来仅用于参考。
+> [!NOTE]
+> 不要在你的网站和应用中使用抽象角色。抽象角色是由浏览器使用的，这里列出来仅用于参考。
 
-> **警告：** “抽象角色用于本体。作者**不得**在内容中使用抽象角色。”——<abbr>WAI-ARIA</abbr> 规范
+> [!WARNING]
+> “抽象角色用于本体。作者**不得**在内容中使用抽象角色。”——<abbr>WAI-ARIA</abbr> 规范
 
 ## MDN 中定义的角色
 
diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.md b/files/zh-cn/web/accessibility/aria/roles/list_role/index.md
index 09b31984461120..ac74780a7b71fc 100644
--- a/files/zh-cn/web/accessibility/aria/roles/list_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.md
@@ -23,7 +23,8 @@ ARIA `list` 角色可用于标识项目列表。它通常与 `listitem` 角色
 
 关于应该使用哪些元素来标记 `list` 和 `listitem` 没有硬性规定，但是你应该确保 `listitem` 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。
 
-> **备注：** 最佳实践要求使用适当的语义 HTML 元素来标记列表和列表项，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅[最佳实践](#最佳实践)。
+> [!NOTE]
+> 最佳实践要求使用适当的语义 HTML 元素来标记列表和列表项，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅[最佳实践](#最佳实践)。
 
 ### 关联的 WAI-ARIA 角色、状态和属性
 
@@ -56,11 +57,13 @@ ARIA `list` 角色可用于标识项目列表。它通常与 `listitem` 角色
 </ol>
 ```
 
-> **备注：** ARIA `list` / `listitem` 角色不区分有序列表和无序列表。
+> [!NOTE]
+> ARIA `list` / `listitem` 角色不区分有序列表和无序列表。
 
 顺便说一句，请注意，如果你使用 `<ol>` 或 `<ul>` 的语义 HTML 元素并应用 [`presentation`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/presentation_role) 角色，则每个子 `<li>` 元素都会继承 `presentation` 角色，因为 ARIA 需要 `listitem` 元素具有父 `list` 元素。因此，`<li>` 元素不会暴露给辅助技术，但是包含在这些 `<li>` 元素中的元素，包括嵌套列表，对辅助技术是可见的。
 
-> **备注：** 如果要标记将用作标签页式界面的项目列表，则应改为使用 [`tab`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tab_role)、[`tabpanel`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) 和 [`tablist`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tablist_role) 角色。
+> [!NOTE]
+> 如果要标记将用作标签页式界面的项目列表，则应改为使用 [`tab`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tab_role)、[`tabpanel`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) 和 [`tablist`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tablist_role) 角色。
 
 ## 规范
 
diff --git a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md
index cbd8fd1c00bf51..e9fbcfff66648d 100644
--- a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md
@@ -141,7 +141,8 @@ l10n:
 2. 更改选项的外观以反映其选定状态。
 3. 将 listbox 上的 [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) 值更新为用户刚刚与之交互的选项的 ID，即使他们将选项切换为取消选择。
 
-> **备注：** ARIA 使用的第一原则是你可以使用具有内置语义和行为的原生功能，而不是重新利用元素并**添加** ARIA 角色、状态或属性使其具有无障碍性。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。
+> [!NOTE]
+> ARIA 使用的第一原则是你可以使用具有内置语义和行为的原生功能，而不是重新利用元素并**添加** ARIA 角色、状态或属性使其具有无障碍性。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。
 
 ## 示例
 
diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md
index 27d922812e7835..c9e96705d919a9 100644
--- a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md
@@ -23,7 +23,8 @@ ARIA `listitem` 角色可用于标识项目列表中的项目。它通常与 [`l
 
 关于应该使用哪些元素来标记列表和列表项没有硬性规定，但是你应该确保列表项在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。
 
-> **备注：** 如果可能，你应该使用适当的语义化 HTML 元素来标记列表及列表项，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅[最佳实践](#最佳实践)。
+> [!NOTE]
+> 如果可能，你应该使用适当的语义化 HTML 元素来标记列表及列表项，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅[最佳实践](#最佳实践)。
 
 ### 关联的 WAI-ARIA 角色、状态和属性
 
@@ -56,11 +57,14 @@ ARIA `listitem` 角色可用于标识项目列表中的项目。它通常与 [`l
 </ol>
 ```
 
-> **备注：** ARIA `list` / `listitem` 角色不区分有序列表和无序列表。
+> [!NOTE]
+> ARIA `list` / `listitem` 角色不区分有序列表和无序列表。
 
-> **备注：** 给列表添加 CSS 样式 `list-style: none;` 移除列表语义。添加 `role="listitem"` 获得列表语义。
+> [!NOTE]
+> 给列表添加 CSS 样式 `list-style: none;` 移除列表语义。添加 `role="listitem"` 获得列表语义。
 
-> **备注：** 如果要标记将用作选项卡式界面的项目列表，则应改为使用 [`tab`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tab_role)、[`tabpanel`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) 和 [`tablist`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tablist_role) 角色。
+> [!NOTE]
+> 如果要标记将用作选项卡式界面的项目列表，则应改为使用 [`tab`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tab_role)、[`tabpanel`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) 和 [`tablist`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tablist_role) 角色。
 
 ## 规范
 
diff --git a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md
index f4d9b64b00eba9..edc1bc035ca462 100644
--- a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md
+++ b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md
@@ -15,7 +15,8 @@ l10n:
 
 使用键盘时，元素获得焦点的顺序默认为源顺序。在特殊情况下，作者可能希望重新定义顺序。为此，作者可以将 `tabindex` 设置为任意正数。
 
-> **警告：** 避免为 `tabindex` 使用正值。具有正 `tabindex` 值的元素会被放在页面上默认的交互式元素之前，这意味着页面作者在使用一个或多个 `tabindex` 正值时，必须为页面上所有可聚焦元素设置（并维护）`tabindex` 值。
+> [!WARNING]
+> 避免为 `tabindex` 使用正值。具有正 `tabindex` 值的元素会被放在页面上默认的交互式元素之前，这意味着页面作者在使用一个或多个 `tabindex` 正值时，必须为页面上所有可聚焦元素设置（并维护）`tabindex` 值。
 
 下面表格阐述主流浏览器中 `tabindex` 的行为：
 
diff --git a/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md
index 28e57ce205749e..513aff28739093 100644
--- a/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md
+++ b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md
@@ -78,4 +78,5 @@ l10n:
 
 - 触摸目标必须足够大，方便用户交互（参考 [BBC 移动端无障碍指南](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size)关于触摸目标尺寸的指南）
 
-> **备注：** 该文档的[最初版本](https://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html)由 [Yura Zenevich](https://yzen.github.io/) 完成。
+> [!NOTE]
+> 该文档的[最初版本](https://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html)由 [Yura Zenevich](https://yzen.github.io/) 完成。
diff --git a/files/zh-cn/web/accessibility/understanding_colors_and_luminance/index.md b/files/zh-cn/web/accessibility/understanding_colors_and_luminance/index.md
index 18f975946e935b..226c5665bb6c2d 100644
--- a/files/zh-cn/web/accessibility/understanding_colors_and_luminance/index.md
+++ b/files/zh-cn/web/accessibility/understanding_colors_and_luminance/index.md
@@ -126,7 +126,8 @@ RGB 是面向硬件的，反映了 CRT 的使用。许多开发人员和设计
 
 然而，在涉及到无障碍性的地方，标准和指南目前主要是使用 sRGB 颜色空间，尤其是在涉及颜色对比度比率时。
 
-> **备注：** 几乎所有今天用于查看 Web 内容的系统都假定使用 sRGB 编码。除非已知将使用其他颜色空间来处理和显示内容，否则作者应评估使用 sRGB 颜色空间。如果使用其他颜色空间，请应用[最小对比度比率](https://webaim.org/articles/contrast/#sc143)的原则。
+> [!NOTE]
+> 几乎所有今天用于查看 Web 内容的系统都假定使用 sRGB 编码。除非已知将使用其他颜色空间来处理和显示内容，否则作者应评估使用 sRGB 颜色空间。如果使用其他颜色空间，请应用[最小对比度比率](https://webaim.org/articles/contrast/#sc143)的原则。
 
 ### 查询颜色值
 
diff --git a/files/zh-cn/web/api/abortcontroller/abort/index.md b/files/zh-cn/web/api/abortcontroller/abort/index.md
index 4ca79c49b011b0..e1e21bfe31d200 100644
--- a/files/zh-cn/web/api/abortcontroller/abort/index.md
+++ b/files/zh-cn/web/api/abortcontroller/abort/index.md
@@ -59,7 +59,8 @@ function fetchVideo() {
 }
 ```
 
-> **备注：** 当 `abort()` 被调用时，`fetch()` promise 将会抛出 `DOMException` 类型的 `Error`（名称为 `AbortError`）。
+> [!NOTE]
+> 当 `abort()` 被调用时，`fetch()` promise 将会抛出 `DOMException` 类型的 `Error`（名称为 `AbortError`）。
 
 你可以在 github 上找到[完整的工作示例](https://github.com/mdn/dom-examples/tree/main/abort-api)；你还可以看它的[在线演示](https://mdn.github.io/dom-examples/abort-api/)。
 
diff --git a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md
index 94a35d098c8089..19480ab0b3e8be 100644
--- a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md
+++ b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md
@@ -53,7 +53,8 @@ function fetchVideo() {
 }
 ```
 
-> **备注：** 当 `abort()` 被调用，`fetch()` promise 将会抛出 `AbortError`。
+> [!NOTE]
+> 当 `abort()` 被调用，`fetch()` promise 将会抛出 `AbortError`。
 
 你可以在 GitHub 上找到一个完整的使用示例——参见 [abort-api](https://github.com/mdn/dom-examples/tree/main/abort-api)（[也可以看在线演示](https://mdn.github.io/dom-examples/abort-api/)）。
 
diff --git a/files/zh-cn/web/api/abortcontroller/index.md b/files/zh-cn/web/api/abortcontroller/index.md
index 391895cf2e41e7..36eedf6402afcf 100644
--- a/files/zh-cn/web/api/abortcontroller/index.md
+++ b/files/zh-cn/web/api/abortcontroller/index.md
@@ -65,7 +65,8 @@ function fetchVideo() {
 }
 ```
 
-> **备注：** 当 `abort()` 被调用时，这个 `fetch()` promise 将 `reject` 一个名为 `AbortError` 的 `DOMException`。
+> [!NOTE]
+> 当 `abort()` 被调用时，这个 `fetch()` promise 将 `reject` 一个名为 `AbortError` 的 `DOMException`。
 
 你可以在 [GitHub](https://github.com/mdn/dom-examples/tree/main/abort-api) 上找到这个示例的完整源代码（也可以[在线运行](https://mdn.github.io/dom-examples/abort-api/)）。
 
diff --git a/files/zh-cn/web/api/abortcontroller/signal/index.md b/files/zh-cn/web/api/abortcontroller/signal/index.md
index 325e513a18acfa..27dcb799b2116a 100644
--- a/files/zh-cn/web/api/abortcontroller/signal/index.md
+++ b/files/zh-cn/web/api/abortcontroller/signal/index.md
@@ -47,7 +47,8 @@ function fetchVideo() {
 }
 ```
 
-> **备注：** 当 `abort()` 被调用，`fetch()` promise 将会抛出一个 `AbortError`.
+> [!NOTE]
+> 当 `abort()` 被调用，`fetch()` promise 将会抛出一个 `AbortError`.
 
 你可以在 GitHub 上找到[完整的可以运行的示例](https://github.com/mdn/dom-examples/tree/main/abort-api)；你还可以看它的[在线演示](https://mdn.github.io/dom-examples/abort-api/)。
 
diff --git a/files/zh-cn/web/api/abortsignal/abort_static/index.md b/files/zh-cn/web/api/abortsignal/abort_static/index.md
index a12ae282cb7434..4a73b81ddf95b4 100644
--- a/files/zh-cn/web/api/abortsignal/abort_static/index.md
+++ b/files/zh-cn/web/api/abortsignal/abort_static/index.md
@@ -17,7 +17,8 @@ return controller.signal;
 
 例如，将它传递给一个 fetch 方法，以运行它的中止逻辑（也就是说，可能其代码的执行顺序是即使预期的 fetch 操作还没有启动，也应该运行中止逻辑）。
 
-> **备注：** 该方法的作用类似于 {{JSxRef("Promise.reject")}}。
+> [!NOTE]
+> 该方法的作用类似于 {{JSxRef("Promise.reject")}}。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/abortsignal/index.md b/files/zh-cn/web/api/abortsignal/index.md
index 8f3446bec65932..e6f1a3b29cfb07 100644
--- a/files/zh-cn/web/api/abortsignal/index.md
+++ b/files/zh-cn/web/api/abortsignal/index.md
@@ -73,7 +73,8 @@ function fetchVideo() {
 }
 ```
 
-> **备注：** 当调用 `abort()` 时，`fetch()` promise 会以“`AbortError`”`DOMException` 拒绝。
+> [!NOTE]
+> 当调用 `abort()` 时，`fetch()` promise 会以“`AbortError`”`DOMException` 拒绝。
 
 你可以[在 GitHub 上找到一个完整、可运行的示例](https://github.com/mdn/dom-examples/tree/main/abort-api)；你也可以参见[在线演示](https://mdn.github.io/dom-examples/abort-api/)。
 
@@ -131,7 +132,8 @@ try {
 }
 ```
 
-> **备注：** 与使用 {{domxref("AbortSignal.timeout()")}} 不同，没有方法来判断最终中止是否由超时引起。
+> [!NOTE]
+> 与使用 {{domxref("AbortSignal.timeout()")}} 不同，没有方法来判断最终中止是否由超时引起。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/abortsignal/timeout_static/index.md b/files/zh-cn/web/api/abortsignal/timeout_static/index.md
index 7351c1b600fe77..aa6fa3abb7ec51 100644
--- a/files/zh-cn/web/api/abortsignal/timeout_static/index.md
+++ b/files/zh-cn/web/api/abortsignal/timeout_static/index.md
@@ -11,7 +11,8 @@ slug: Web/API/AbortSignal/timeout_static
 
 超时将基于活动的时间，而不是经过的时间，如果代码在指定的 worker 中运行或者文档在往返缓存时（[bfcache](https://web.dev/articles/bfcache)），将有效地暂停。
 
-> **备注：** 在编写代码时，无法组合多个信号。意思是你不能使用超时的 signal 或者通过调用 {{domxref("AbortController.abort()")}} 直接中止下载。
+> [!NOTE]
+> 在编写代码时，无法组合多个信号。意思是你不能使用超时的 signal 或者通过调用 {{domxref("AbortController.abort()")}} 直接中止下载。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/analysernode/fftsize/index.md b/files/zh-cn/web/api/analysernode/fftsize/index.md
index 7078009d21d2b6..1c8fd2fa6077ef 100644
--- a/files/zh-cn/web/api/analysernode/fftsize/index.md
+++ b/files/zh-cn/web/api/analysernode/fftsize/index.md
@@ -9,7 +9,8 @@ slug: Web/API/AnalyserNode/fftSize
 
 fftSize 属性的值必须是从 32 到 32768 范围内的 2 的非零幂; 其默认值为 2048.
 
-> **备注：** 如果其值不是 2 的幂，或者它在指定范围之外，则抛出异常 INDEX_SIZE_ERR.
+> [!NOTE]
+> 如果其值不是 2 的幂，或者它在指定范围之外，则抛出异常 INDEX_SIZE_ERR.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/analysernode/index.md b/files/zh-cn/web/api/analysernode/index.md
index bfafcf4807e2b2..dd585fe935ba9f 100644
--- a/files/zh-cn/web/api/analysernode/index.md
+++ b/files/zh-cn/web/api/analysernode/index.md
@@ -79,7 +79,8 @@ _继承方法自_ _{{domxref("AudioNode")}}_.
 
 ## 例子
 
-> **备注：** 查看 [Visualizations with Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) 指南以获得更多关于创建音频可视化效果的信息。
+> [!NOTE]
+> 查看 [Visualizations with Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) 指南以获得更多关于创建音频可视化效果的信息。
 
 ### 基础用法
 
diff --git a/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md
index acf11f6a1e71d4..f8e6abb7e01e9b 100644
--- a/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md
+++ b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md
@@ -11,7 +11,8 @@ slug: Web/API/AnalyserNode/smoothingTimeConstant
 
 在技术术语中，我们应用一个 [布莱克曼窗](http://webaudio.github.io/web-audio-api/#blackman-window) 并随着时间推移去平滑值。大部分情况下，默认值是较好的。
 
-> **备注：** 如果设置了 0\~1 范围外的值，将会抛出异常`INDEX_SIZE_ERR`.
+> [!NOTE]
+> 如果设置了 0\~1 范围外的值，将会抛出异常`INDEX_SIZE_ERR`.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/angle_instanced_arrays/index.md b/files/zh-cn/web/api/angle_instanced_arrays/index.md
index fb653c57ef6c01..4d8f4825b08674 100644
--- a/files/zh-cn/web/api/angle_instanced_arrays/index.md
+++ b/files/zh-cn/web/api/angle_instanced_arrays/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ANGLE_instanced_arrays
 
 `ANGLE_instanced_arrays`是属于 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一个扩展 API，它允许多次绘制相同的对象或相似对象组，前提是它们共享相同的顶点数据、基本图形的个数和类型。WebGL 的扩展都能使用{{domxref("WebGLRenderingContext.getExtension()")}} 这个方法。更多详细信息，请参考 [WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial)_（WebGL 使用教程）里的_[Using Extensions](/zh-CN/docs/Web/API/WebGL_API/Using_Extensions) _（使用扩展）_。
 
-> **备注：** 这个扩展仅仅能使用在 {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} 上下文中。在 {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}，默认情况下这个扩展的在 WebGL2 的上下文中起作用，它的常量以及方法使用过程中没有“ANGEL”后缀。
+> [!NOTE]
+> 这个扩展仅仅能使用在 {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} 上下文中。在 {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}，默认情况下这个扩展的在 WebGL2 的上下文中起作用，它的常量以及方法使用过程中没有“ANGEL”后缀。
 >
 > 尽管名字叫“ANGLE”，只要硬件支持，它可以运行在任意设备上，而不仅是在 Windows 上起作用。 "ANGLE"只是表明了这个扩展是被 ANGLE 这个库的作者书写的，并没有更多的含义。
 
diff --git a/files/zh-cn/web/api/animation/cancel/index.md b/files/zh-cn/web/api/animation/cancel/index.md
index acb7c0ce86db4f..81620956379dd1 100644
--- a/files/zh-cn/web/api/animation/cancel/index.md
+++ b/files/zh-cn/web/api/animation/cancel/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Animation/cancel
 
 {{domxref("Animation")}} 接口的 Web 动画 API 的 **`cancel()`** 方法将清除此动画造成的所有 {{domxref("KeyframeEffect")}}，并中止其播放。
 
-> **备注：** 当一个动画被取消时，其 {{domxref("Animation.startTime", "startTime")}} 和 {{domxref("Animation.currentTime", "currentTime")}} 被设置为 null。
+> [!NOTE]
+> 当一个动画被取消时，其 {{domxref("Animation.startTime", "startTime")}} 和 {{domxref("Animation.currentTime", "currentTime")}} 被设置为 null。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/animation/cancel_event/index.md b/files/zh-cn/web/api/animation/cancel_event/index.md
index d4423152b31dd6..a5dd3b86af26f2 100644
--- a/files/zh-cn/web/api/animation/cancel_event/index.md
+++ b/files/zh-cn/web/api/animation/cancel_event/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Animation/cancel_event
 
 当动作从其他状态进入 `"idle"` 播放状态，例如当动画在结束播放后从元素中移除时，`cancel` 事件可以 {{domxref("Animation.cancel()")}} 被手动触发。
 
-> **备注：** 在新的动画中，创建一个新的初始的空闲动画不会触发 `cancel` 事件。
+> [!NOTE]
+> 在新的动画中，创建一个新的初始的空闲动画不会触发 `cancel` 事件。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/animation/finished/index.md b/files/zh-cn/web/api/animation/finished/index.md
index 458483b13120e2..1b9937bd35c4cb 100644
--- a/files/zh-cn/web/api/animation/finished/index.md
+++ b/files/zh-cn/web/api/animation/finished/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Animation/finished
 
 Animation.finished 只读属性允许你返回动画的完成状态。
 
-> **备注：** The Promise is replaced with a new (pending) Promise object every time the animation leaves the `finished` play state.
+> [!NOTE]
+> The Promise is replaced with a new (pending) Promise object every time the animation leaves the `finished` play state.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/animation/playstate/index.md b/files/zh-cn/web/api/animation/playstate/index.md
index 66df72dbbc81a1..ad9b36d7ca0bfb 100644
--- a/files/zh-cn/web/api/animation/playstate/index.md
+++ b/files/zh-cn/web/api/animation/playstate/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Animation/playState
 
 作为一个 [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) 的属性，**`Animation.playState`** 能够返回并设置一个可枚举值来描述一个动画的回放状态。
 
-> **备注：** 这个属性只对 CSS Animations 和 Transitions 可读。
+> [!NOTE]
+> 这个属性只对 CSS Animations 和 Transitions 可读。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/attr/index.md b/files/zh-cn/web/api/attr/index.md
index d70b633021ac89..075ccc26c71fb4 100644
--- a/files/zh-cn/web/api/attr/index.md
+++ b/files/zh-cn/web/api/attr/index.md
@@ -19,7 +19,8 @@ slug: Web/API/Attr
 | `myAttr` | `mynamespace` | _无_         | `myAttr`     | `myAttr`      |
 | `myAttr` | `mynamespace` | `myns`       | `myAttr`     | `myns:myAttr` |
 
-> **备注：** 该接口仅表示 {{domxref("Element")}} 树中存在的属性（attribute），无论是 SVG、HTML 还是 MathML 元素。它不表示与此类元素相关的接口的*属性*（property），例如 {{HTMLElement("table")}} 元素的 {{domxref("HTMLTableElement")}}。（有关元素属性（attribute）及其如何*反射*到接口属性（property）的更多信息，请参见{{Glossary("Attribute", "这篇文章")}}。）
+> [!NOTE]
+> 该接口仅表示 {{domxref("Element")}} 树中存在的属性（attribute），无论是 SVG、HTML 还是 MathML 元素。它不表示与此类元素相关的接口的*属性*（property），例如 {{HTMLElement("table")}} 元素的 {{domxref("HTMLTableElement")}}。（有关元素属性（attribute）及其如何*反射*到接口属性（property）的更多信息，请参见{{Glossary("Attribute", "这篇文章")}}。）
 
 ## 实例属性
 
diff --git a/files/zh-cn/web/api/attr/localname/index.md b/files/zh-cn/web/api/attr/localname/index.md
index cd119133c4baec..88c63c946ba6e0 100644
--- a/files/zh-cn/web/api/attr/localname/index.md
+++ b/files/zh-cn/web/api/attr/localname/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Attr/localName
 
 **`Attr.localName`** 为只读属性，返回一个属性限定名称的本名部分（去除命名空间前缀的名字）。
 
-> **备注：** 在之前的 DOM 规范中此 API 被定义在 {{domxref("Node")}} 接口中。
+> [!NOTE]
+> 在之前的 DOM 规范中此 API 被定义在 {{domxref("Node")}} 接口中。
 
 ## 语法
 
@@ -45,7 +46,8 @@ element.addEventListener("click", function () {
 
 本文档中属性的“本名 (local name)”指的是属性“限定名称 (qualified names)”的命名空间冒号之后的部分。“限定名称”通常作为 XML 文档命名空间的一部分用在 XML 代码内。
 
-> **备注：** 在 Gecko 1.9.2 以及跟早的版本中，HTML DOM 访问该属性将返回 HTML 节点属性的大写字符串本名（有别于 XML DOM 的 XHTML 属性）。在后来的版本中，为遵循 HTML5 标准，该属性返回 DOM 内部存储的名称，即，不论 HTML DOM 的 HTML 属性还是 XML DOM 的 XHTML 属性都是小写字符串。
+> [!NOTE]
+> 在 Gecko 1.9.2 以及跟早的版本中，HTML DOM 访问该属性将返回 HTML 节点属性的大写字符串本名（有别于 XML DOM 的 XHTML 属性）。在后来的版本中，为遵循 HTML5 标准，该属性返回 DOM 内部存储的名称，即，不论 HTML DOM 的 HTML 属性还是 XML DOM 的 XHTML 属性都是小写字符串。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/attr/namespaceuri/index.md b/files/zh-cn/web/api/attr/namespaceuri/index.md
index f27bcbb5b27e46..7c339e37187006 100644
--- a/files/zh-cn/web/api/attr/namespaceuri/index.md
+++ b/files/zh-cn/web/api/attr/namespaceuri/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Attr/namespaceURI
 
 **`Attr.namespaceURI`** 只读属性返回属性的命名空间 URI，如果该元素不在命名空间中，则返回 null。
 
-> **备注：** 在 DOM4 之前，该 API 是在 {{domxref("Node")}} 中定义的。
+> [!NOTE]
+> 在 DOM4 之前，该 API 是在 {{domxref("Node")}} 中定义的。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/attr/prefix/index.md b/files/zh-cn/web/api/attr/prefix/index.md
index e8547e8dcc63bd..b73983153168a7 100644
--- a/files/zh-cn/web/api/attr/prefix/index.md
+++ b/files/zh-cn/web/api/attr/prefix/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Attr/prefix
 
 **`Attr.prefix`** 为只读属性，返回指定标签属性的名字空间前缀，如果没有前缀则返回 `null`。
 
-> **备注：** 在 DOM4 之前此 API 被定义在 {{domxref("Node")}} 接口中。
+> [!NOTE]
+> 在 DOM4 之前此 API 被定义在 {{domxref("Node")}} 接口中。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/audiobuffersourcenode/buffer/index.md b/files/zh-cn/web/api/audiobuffersourcenode/buffer/index.md
index 246a0f4a9ca010..6cf6212789e171 100644
--- a/files/zh-cn/web/api/audiobuffersourcenode/buffer/index.md
+++ b/files/zh-cn/web/api/audiobuffersourcenode/buffer/index.md
@@ -15,7 +15,8 @@ slug: Web/API/AudioBufferSourceNode/buffer
 
 ## 示例
 
-> **备注：** 完整的示例请查看[演示示例](https://mdn.github.io/webaudio-examples/audio-buffer/)，或[查看源代码](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html)。
+> [!NOTE]
+> 完整的示例请查看[演示示例](https://mdn.github.io/webaudio-examples/audio-buffer/)，或[查看源代码](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html)。
 
 ```js
 const myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
diff --git a/files/zh-cn/web/api/audiobuffersourcenode/index.md b/files/zh-cn/web/api/audiobuffersourcenode/index.md
index ce91f61034533c..87ab3b91f50bbb 100644
--- a/files/zh-cn/web/api/audiobuffersourcenode/index.md
+++ b/files/zh-cn/web/api/audiobuffersourcenode/index.md
@@ -69,7 +69,8 @@ _从父级的 {{domxref("AudioNode")}} 继承方法。_
 
 在这个例子中，我们将会创建一个 2 秒的缓冲器，并用白噪音填充它，然后通过{{domxref("AudioBufferSourceNode")}}来播放它。注释里说明了它的功能。
 
-> **备注：** 你可以 [查看在线演示](http://mdn.github.io/audio-buffer/) 或 [查看源代码](https://github.com/mdn/audio-buffer).
+> [!NOTE]
+> 你可以 [查看在线演示](http://mdn.github.io/audio-buffer/) 或 [查看源代码](https://github.com/mdn/audio-buffer).
 
 ```js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@@ -113,7 +114,8 @@ button.onclick = function () {
 };
 ```
 
-> **备注：** 音频数据解码的例子请查看 {{domxref("AudioContext.decodeAudioData")}} 页面。
+> [!NOTE]
+> 音频数据解码的例子请查看 {{domxref("AudioContext.decodeAudioData")}} 页面。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/audiobuffersourcenode/start/index.md b/files/zh-cn/web/api/audiobuffersourcenode/start/index.md
index 77b81dcb43ed6d..37d6d459f72ef9 100644
--- a/files/zh-cn/web/api/audiobuffersourcenode/start/index.md
+++ b/files/zh-cn/web/api/audiobuffersourcenode/start/index.md
@@ -47,7 +47,8 @@ The following more complex example will, 1 second from now, start playing 10 sec
 source.start(audioCtx.currentTime + 1, 3, 10);
 ```
 
-> **备注：** For a more complete example showing `start()` in use, check out our {{domxref("AudioContext.decodeAudioData()")}} example, You can also [run the code example live](http://mdn.github.io/decode-audio-data/), or [view the source](https://github.com/mdn/decode-audio-data).
+> [!NOTE]
+> For a more complete example showing `start()` in use, check out our {{domxref("AudioContext.decodeAudioData()")}} example, You can also [run the code example live](http://mdn.github.io/decode-audio-data/), or [view the source](https://github.com/mdn/decode-audio-data).
 
 ## Specifications
 
diff --git a/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md b/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md
index dfe813bd417834..98adf900a152fa 100644
--- a/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md
+++ b/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md
@@ -29,7 +29,8 @@ var source = audioCtx.createMediaElementSource(myMediaElement);
 
 该示例由 {{htmlelement("audio") }} 元素，通过使用 `createMediaElementSource()` 方法，创建了一个音源，将其通过 {{ domxref("GainNode") }} 节点，输出到{{ domxref("AudioDestinationNode") }} 节点以播放。当鼠标指针移动时，`updatePage()` 函数被调用，该函数计算当前鼠标 Y 坐标与页面高度的比值，改变 {{ domxref("GainNode") }} 节点的值以调整音量。你就可以通过鼠标上下移动而改变音乐的音量了。
 
-> **备注：** 也可以[浏览该示例的在线演示](http://mdn.github.io/webaudio-examples/media-source-buffer/), 或者[浏览源代码](https://github.com/mdn/webaudio-examples/tree/main/media-source-buffer)。
+> [!NOTE]
+> 也可以[浏览该示例的在线演示](http://mdn.github.io/webaudio-examples/media-source-buffer/), 或者[浏览源代码](https://github.com/mdn/webaudio-examples/tree/main/media-source-buffer)。
 
 ```js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@@ -74,7 +75,8 @@ source.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 ```
 
-> **备注：** 作为调用 `createMediaElementSource()` 的结果，{{domxref("HTMLMediaElement")}} 的播放将会由 AudioContext 的音频处理图接管。所以对媒体进行播放/暂停等操作仍可通过 media API 与播放器面板来进行。
+> [!NOTE]
+> 作为调用 `createMediaElementSource()` 的结果，{{domxref("HTMLMediaElement")}} 的播放将会由 AudioContext 的音频处理图接管。所以对媒体进行播放/暂停等操作仍可通过 media API 与播放器面板来进行。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.md b/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.md
index 15aaea1a77cf46..bf619e80c8386b 100644
--- a/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.md
+++ b/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.md
@@ -31,7 +31,8 @@ var source = audioCtx.createMediaStreamSource(stream);
 
 {{ htmlelement("video") }} 元素下面滑动杆控制低音过滤器过滤的程度，滑动杆的值越大，低音更明显
 
-> **备注：** 你可以查看[在线演示](https://mdn.github.io/webaudio-examples/stream-source-buffer/)，或者[查看源码](https://github.com/mdn/webaudio-examples/tree/main/stream-source-buffer)。
+> [!NOTE]
+> 你可以查看[在线演示](https://mdn.github.io/webaudio-examples/stream-source-buffer/)，或者[查看源码](https://github.com/mdn/webaudio-examples/tree/main/stream-source-buffer)。
 
 ```js
 var pre = document.querySelector("pre");
diff --git a/files/zh-cn/web/api/audiolistener/forwardy/index.md b/files/zh-cn/web/api/audiolistener/forwardy/index.md
index cad908c49b0f0e..7c31644935e106 100644
--- a/files/zh-cn/web/api/audiolistener/forwardy/index.md
+++ b/files/zh-cn/web/api/audiolistener/forwardy/index.md
@@ -7,7 +7,8 @@ slug: Web/API/AudioListener/forwardY
 
 {{ domxref("AudioListener") }} 接口的 `forwardY` 只读属性是一个 {{domxref("AudioParam")}}，表示定义监听者指向的前进方向的方向向量的 y 值。
 
-> **备注：** 当与 {{domxref("PannerNode")}} 一起使用时，如果 {{domxref("PannerNode.panningModel", "panningModel")}} 设置为 equalpower，则参数为 _a-rate_；否则为 _k-rate_。
+> [!NOTE]
+> 当与 {{domxref("PannerNode")}} 一起使用时，如果 {{domxref("PannerNode.panningModel", "panningModel")}} 设置为 equalpower，则参数为 _a-rate_；否则为 _k-rate_。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/audiolistener/index.md b/files/zh-cn/web/api/audiolistener/index.md
index eff090d0b80e24..d3a408ba54e364 100644
--- a/files/zh-cn/web/api/audiolistener/index.md
+++ b/files/zh-cn/web/api/audiolistener/index.md
@@ -13,7 +13,8 @@ slug: Web/API/AudioListener
 
 ## Properties
 
-> **备注：** position,forward 和 up 值是以不同的语法设置和检索的。检索是通过访问来实现的，比如说 `AudioListener.positionX` ，设置相同属性时可以通过使用 `AudioListener.positionX.value` 来完成。这就是为什么他们不被标记为只读，这在规范的接口定义中就是这么说的。
+> [!NOTE]
+> position,forward 和 up 值是以不同的语法设置和检索的。检索是通过访问来实现的，比如说 `AudioListener.positionX` ，设置相同属性时可以通过使用 `AudioListener.positionX.value` 来完成。这就是为什么他们不被标记为只读，这在规范的接口定义中就是这么说的。
 
 - {{domxref("AudioListener.positionX")}}
   - : 在笛卡尔右手坐标系中代表一个收听者的水平坐标。默认值是 0.
@@ -41,7 +42,8 @@ slug: Web/API/AudioListener
 - {{domxref("AudioListener.setPosition()")}} {{deprecated_inline}}
   - : 设置收听者的位置。
 
-> **备注：** Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox, Internet Explorer and Safari.
+> [!NOTE]
+> Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox, Internet Explorer and Safari.
 
 ## Deprecated features
 
diff --git a/files/zh-cn/web/api/audioscheduledsourcenode/index.md b/files/zh-cn/web/api/audioscheduledsourcenode/index.md
index a88ba6a5468a85..f316d9be137962 100644
--- a/files/zh-cn/web/api/audioscheduledsourcenode/index.md
+++ b/files/zh-cn/web/api/audioscheduledsourcenode/index.md
@@ -7,7 +7,8 @@ slug: Web/API/AudioScheduledSourceNode
 
 `AudioScheduledSourceNode` 接口作为 web 音频 API 的一部分，是几种具有在特定时刻开始与停止能力的音频源节点接口的父接口。更具体地来说，这个接口定义了{{domxref("AudioScheduledSourceNode.start", "start()")}} 和{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法，以及{{domxref("AudioScheduledSourceNode.onended", "onended")}}事件
 
-> **备注：** 你不能直接创建`AudioScheduledSourceNode`。而是应该使用继承于它的子接口，如{{domxref("AudioBufferSourceNode")}}, {{domxref("OscillatorNode")}}和{{domxref("ConstantSourceNode")}}.
+> [!NOTE]
+> 你不能直接创建`AudioScheduledSourceNode`。而是应该使用继承于它的子接口，如{{domxref("AudioBufferSourceNode")}}, {{domxref("OscillatorNode")}}和{{domxref("ConstantSourceNode")}}.
 
 除非另有说明，基于`AudioScheduledSourceNode`节点的输出在没有播放时处于静默状态（这种状态在 start() 之前与 stop() 之后调用）。静默状态总是由一个全 0 值流组成。
 
diff --git a/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md b/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md
index 2cf5f729d237e6..bc57358d4546b6 100644
--- a/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md
+++ b/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md
@@ -9,7 +9,8 @@ slug: Web/API/AudioScheduledSourceNode/stop
 
 每次在同一个节点上调用 `stop()` 时，指定的时间将替换任何未发生的计划停止时间。如果节点已经停止，则此方法无效。
 
-> **备注：** 如果计划的停止时间发生在节点计划的开始时间之前，则节点永远不会开始运行。
+> [!NOTE]
+> 如果计划的停止时间发生在节点计划的开始时间之前，则节点永远不会开始运行。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/background_tasks_api/index.md b/files/zh-cn/web/api/background_tasks_api/index.md
index 9023c3f6927e5c..f8a105eee17b9a 100644
--- a/files/zh-cn/web/api/background_tasks_api/index.md
+++ b/files/zh-cn/web/api/background_tasks_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Background_Tasks_API
 
 **后台任务协作调度 API**（Cooperative Scheduling of Background Tasks API，也叫后台任务 API，或者简单称为 `requestIdleCallback()` API）提供了由用户代理决定的，在空闲时间自动执行队列任务的能力。
 
-> **备注：** 此 API *无法*在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中使用。
+> [!NOTE]
+> 此 API *无法*在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中使用。
 
 ## 概念和用法
 
diff --git a/files/zh-cn/web/api/barprop/visible/index.md b/files/zh-cn/web/api/barprop/visible/index.md
index ecbb6a3e86fddf..e07ad740e6e5f4 100644
--- a/files/zh-cn/web/api/barprop/visible/index.md
+++ b/files/zh-cn/web/api/barprop/visible/index.md
@@ -13,7 +13,8 @@ l10n:
 
 一个{{jsxref("Boolean", "布尔值", "", 1)}}，如果顶层窗口是用启用了 [`popup`](/zh-CN/docs/Web/API/Window/open#popup) 特性的 {{domxref("window.open")}} 打开的，则为 `true`。
 
-> **备注：** 历史上，这个接口元素被用来表示是否可见，但由于隐私原因，不再表示每个接口元素实际的可见性。
+> [!NOTE]
+> 历史上，这个接口元素被用来表示是否可见，但由于隐私原因，不再表示每个接口元素实际的可见性。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md
index 9630279a3f0766..2a2e9dcdf7436d 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md
@@ -10,7 +10,8 @@ slug: Web/API/BaseAudioContext/createAnalyser
 
 > **备注：** {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}} 构造函数是创建 {{domxref("AnalyserNode")}} 的推荐方法；请查看[创建 AudioNode](/zh-CN/docs/Web/API/AudioNode#创建_audionode)。
 
-> **备注：** 有关使用此节点的更多信息，请查看 {{domxref("AnalyserNode")}} 页面。
+> [!NOTE]
+> 有关使用此节点的更多信息，请查看 {{domxref("AnalyserNode")}} 页面。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md
index a8c1c4dd7d88b7..11e72c7455be55 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md
@@ -19,7 +19,8 @@ AudioContext.createBuffer(Number numOfChannels, Number length, Number sampleRate
 
 ### 参数
 
-> **备注：** 如果想深入了解 audio buffers 是如何工作的、这些参数的具体含义，请阅读这篇简短的指南： [Audio buffers: frames, samples and channels](/zh-CN/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels)（英）。
+> [!NOTE]
+> 如果想深入了解 audio buffers 是如何工作的、这些参数的具体含义，请阅读这篇简短的指南： [Audio buffers: frames, samples and channels](/zh-CN/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels)（英）。
 
 - numOfChannels
   - : 一个定义了 buffer 中包含的声频通道数量的整数。
@@ -53,7 +54,8 @@ var buffer = audioCtx.createBuffer(1, 22050, 22050);
 
 如果你这样调用，你将会得到一个单声道的音频片段 (Buffer)，当它在一个频率为 44100 赫兹的音频环境 ({{ domxref("AudioContext") }}) 中播放的时候，将会被自动按照 44100 赫兹*重采样*（因此也会转化为 44100 赫兹的片段），并持续 1 秒：44100 帧 / 44100 赫兹 = 1 秒。
 
-> **备注：** 音频重采样与图片的缩放非常类似：比如你有一个 16 x 16 的图像，但是你想把它填充到一个 32 x 32 大小的区域，你就要对它进行缩放（重采样）。得到的结果会是一个低品质的图像（图像会模糊或者有锯齿形的边缘，这取决于缩放采用的算法），但它能缩放原图像，并且缩放后的图像占用空间比相同大小的普通图像要小。重采样的音频原理相同——你能节省一些空间，但由此你也无法得到高频率的声音（高音区）。
+> [!NOTE]
+> 音频重采样与图片的缩放非常类似：比如你有一个 16 x 16 的图像，但是你想把它填充到一个 32 x 32 大小的区域，你就要对它进行缩放（重采样）。得到的结果会是一个低品质的图像（图像会模糊或者有锯齿形的边缘，这取决于缩放采用的算法），但它能缩放原图像，并且缩放后的图像占用空间比相同大小的普通图像要小。重采样的音频原理相同——你能节省一些空间，但由此你也无法得到高频率的声音（高音区）。
 
 现在让我们来看一个更加复杂的示例，我们将创建一个时长 2 秒的音频片段，并用白噪声填充它，之后通过一个 音频片段源节点 ({{ domxref("AudioBufferSourceNode") }}) 播放。代码中的注释应该能充分解释发生了什么。你可以 [在线演示](http://mdn.github.io/audio-buffer/) ，或者 [查看源代码](https://github.com/mdn/audio-buffer) 。
 
diff --git a/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.md b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.md
index db36fa3f20ca90..83d9d4ee5f236b 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.md
@@ -22,7 +22,8 @@ var source = audioCtx.createBufferSource();
 
 在这个例子中，我们将会创建一个 2 秒的缓冲器，并用白噪音填充它，然后通过{{ domxref("AudioBufferSourceNode") }}来播放它。
 
-> **备注：** You can also [run the code live](http://mdn.github.io/audio-buffer/), or [view the source](https://github.com/mdn/audio-buffer).
+> [!NOTE]
+> You can also [run the code live](http://mdn.github.io/audio-buffer/), or [view the source](https://github.com/mdn/audio-buffer).
 
 ```js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
diff --git a/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md b/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md
index 5c338f22dd88fa..a1a5a76735fbeb 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md
@@ -29,7 +29,8 @@ var wave = AudioContext.createPeriodicWave(real, imag[, constraints]);
 
     - `disableNormalization`: 如果设置为 `true`，对周期波禁用规范化。默认值为 `false`.
 
-> **备注：** 如果使用规范化，生成波形的最大绝对峰值为 1。
+> [!NOTE]
+> 如果使用规范化，生成波形的最大绝对峰值为 1。
 
 ## 例子
 
diff --git a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.md b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.md
index 12d8b6af980159..4146fe339b17c8 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.md
@@ -28,7 +28,8 @@ myScriptProcessor = audioCtx.createScriptProcessor(
 - `numberOfOutputChannels`
   - : 值为整数，用于指定输出 node 的声道的数量，默认值是 2，最高能取 32.
 
-> **警告：** Webkit (version 31) 要求调用这个方法的时候必须传入一个有效的 bufferSize .
+> [!WARNING]
+> Webkit (version 31) 要求调用这个方法的时候必须传入一个有效的 bufferSize .
 
 > **备注：** `numberOfInputChannels`和`numberOfOutputChannels`的值不能同时为 0，二者同时为 0 是无效的
 
@@ -40,7 +41,8 @@ A {{domxref("ScriptProcessorNode")}}.
 
 下面的例子展示了一个 `ScriptProcessorNode` 的基本用法，数据源取自 {{ domxref("AudioContext.decodeAudioData") }}, 给每一个音频样本加一点白噪声，然后通过{{domxref("AudioDestinationNode")}}播放 (其实这个就是系统的扬声器)。对于每一个声道和样本帧，在把结果当成输出样本之前，`scriptNode.onaudioprocess` 方法关联 `audioProcessingEvent` ，并用它来遍历每输入流的每一个声道，和每一个声道中的每一个样本，并添加一点白噪声。
 
-> **备注：** 完整的示例参照 [script-processor-node](https://mdn.github.io/webaudio-examples/script-processor-node/) github (查看源码 [source code](https://github.com/mdn/webaudio-examples/blob/master/script-processor-node/index.html).)
+> [!NOTE]
+> 完整的示例参照 [script-processor-node](https://mdn.github.io/webaudio-examples/script-processor-node/) github (查看源码 [source code](https://github.com/mdn/webaudio-examples/blob/master/script-processor-node/index.html).)
 
 ```js
 var myScript = document.querySelector("script");
diff --git a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md
index 2570963dd37f36..1268a0b69351ee 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md
@@ -22,7 +22,8 @@ A {{domxref("WaveShaperNode")}}.
 
 下面的例子展示了 AudioContext 创建一个波形整形器节点的基本用法。有关应用示例/信息，请查看我们的 [voice-change-O-matic demo](http://mdn.github.io/voice-change-o-matic/) 演示（有关代码，请参阅[app.js](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js)）。
 
-> **备注：** 实现失真曲线并不是简单的事情，你可能需要到处找资料来找到这样的算法。我们在[Stack Overflow](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)上找到了以下的失真曲线代码
+> [!NOTE]
+> 实现失真曲线并不是简单的事情，你可能需要到处找资料来找到这样的算法。我们在[Stack Overflow](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)上找到了以下的失真曲线代码
 
 ```js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
diff --git a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md
index 45de7d558f3192..0f520019ae840b 100644
--- a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md
@@ -37,7 +37,8 @@ audioCtx.decodeAudioData(audioData).then(function(decodedData) {
 
 通过按钮来运行 `getData()` 来获取音轨并播放它。当使用 `stop()` 方法后 source 将会被清除。
 
-> **备注：** You can [run the example live](http://mdn.github.io/decode-audio-data/) (or [view the source](https://github.com/mdn/decode-audio-data).)
+> [!NOTE]
+> You can [run the example live](http://mdn.github.io/decode-audio-data/) (or [view the source](https://github.com/mdn/decode-audio-data).)
 
 ```js
 // define variables
diff --git a/files/zh-cn/web/api/baseaudiocontext/destination/index.md b/files/zh-cn/web/api/baseaudiocontext/destination/index.md
index 9e610fd8e6e678..3c010d6dd8b62b 100644
--- a/files/zh-cn/web/api/baseaudiocontext/destination/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/destination/index.md
@@ -13,7 +13,8 @@ slug: Web/API/BaseAudioContext/destination
 
 ## 示例
 
-> **备注：** 如果需要完整的实现示例，可以去看看 [MDN Github repo](https://github.com/mdn/) 的演示，比如 [voice-change-o-matic](https://github.com/mdn/voice-change-o-matic)。
+> [!NOTE]
+> 如果需要完整的实现示例，可以去看看 [MDN Github repo](https://github.com/mdn/) 的演示，比如 [voice-change-o-matic](https://github.com/mdn/voice-change-o-matic)。
 
 ```js
 const audioCtx = new AudioContext();
diff --git a/files/zh-cn/web/api/baseaudiocontext/listener/index.md b/files/zh-cn/web/api/baseaudiocontext/listener/index.md
index b94f266cc42e3f..3a7f4bba6e9072 100644
--- a/files/zh-cn/web/api/baseaudiocontext/listener/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/listener/index.md
@@ -13,7 +13,8 @@ slug: Web/API/BaseAudioContext/listener
 
 ## 示例
 
-> **备注：** 如果需要完整的音频空间化例子，可以查看 [panner-node](https://github.com/mdn/webaudio-examples/tree/main/panner-node) 演示。
+> [!NOTE]
+> 如果需要完整的音频空间化例子，可以查看 [panner-node](https://github.com/mdn/webaudio-examples/tree/main/panner-node) 演示。
 
 ```js
 const audioCtx = new AudioContext();
diff --git a/files/zh-cn/web/api/baseaudiocontext/samplerate/index.md b/files/zh-cn/web/api/baseaudiocontext/samplerate/index.md
index 561f030b5bf89e..5400d89da85215 100644
--- a/files/zh-cn/web/api/baseaudiocontext/samplerate/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/samplerate/index.md
@@ -13,7 +13,8 @@ slug: Web/API/BaseAudioContext/sampleRate
 
 ## 示例
 
-> **备注：** 如果需要完整的 Web Audio 实现示例，可以查看 [MDN Github repo](https://github.com/mdn/webaudio-examples) 上的 Web 音频演示。不妨试试在浏览器控制台输入 `audioCtx.sampleRate`。
+> [!NOTE]
+> 如果需要完整的 Web Audio 实现示例，可以查看 [MDN Github repo](https://github.com/mdn/webaudio-examples) 上的 Web 音频演示。不妨试试在浏览器控制台输入 `audioCtx.sampleRate`。
 
 ```js
 const audioCtx = new AudioContext();
diff --git a/files/zh-cn/web/api/battery_status_api/index.md b/files/zh-cn/web/api/battery_status_api/index.md
index eb4e28ebde33af..c9a2e3df9d32e8 100644
--- a/files/zh-cn/web/api/battery_status_api/index.md
+++ b/files/zh-cn/web/api/battery_status_api/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **Battery Status API**，通常被称为 **Battery API**，提供有关系统电池电量水平的信息，并让你在电池电量或充电状态发生变化时收到触发的事件通知。这可用于调整应用程序的资源使用情况，以在电池电量不足时减少电池消耗，或在电池电量耗尽之前保存更改以防止数据丢失。
 
-> **备注：** 此 API 在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中*不可用*（未通过 {{domxref("WorkerNavigator")}} 暴露）。
+> [!NOTE]
+> 此 API 在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中*不可用*（未通过 {{domxref("WorkerNavigator")}} 暴露）。
 
 ## 接口
 
diff --git a/files/zh-cn/web/api/batterymanager/chargingtime/index.md b/files/zh-cn/web/api/batterymanager/chargingtime/index.md
index e89ff0c7975441..b13beeb707340a 100644
--- a/files/zh-cn/web/api/batterymanager/chargingtime/index.md
+++ b/files/zh-cn/web/api/batterymanager/chargingtime/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("BatteryManager")}} 接口的 **`chargingTime`** 只读属性指示电池充满电所需要的时间（以秒为单位），如果电池充满电或用户代理无法报告电池状态信息则为 `0`。如果电池当前正在耗电，则其值为 {{jsxref("Infinity")}}。当其值更改时，会触发 {{domxref("BatteryManager/chargingtimechange_event", "chargingtimechange")}} 事件。
 
-> **备注：** 即使返回的时间精确到秒，出于隐私原因，浏览器会将它们舍入到更大的间隔（通常为最接近的 15 分钟的倍数）。
+> [!NOTE]
+> 即使返回的时间精确到秒，出于隐私原因，浏览器会将它们舍入到更大的间隔（通常为最接近的 15 分钟的倍数）。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/batterymanager/dischargingtime/index.md b/files/zh-cn/web/api/batterymanager/dischargingtime/index.md
index 71592768e5209b..d38dec1cdeec05 100644
--- a/files/zh-cn/web/api/batterymanager/dischargingtime/index.md
+++ b/files/zh-cn/web/api/batterymanager/dischargingtime/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("BatteryManager")}} 接口的 **`dischargingTime`** 只读属性指示电池完全放电的剩余时间（以秒为单位），如果电池当前正在充电而不是放电或者用户代理无法报告电池状态信息则为 {{jsxref("Infinity")}}。当其值发生变化时，会触发 {{domxref("BatteryManager/dischargingtimechange_event", "dischargingtimechange")}} 事件。
 
-> **备注：** 即使返回的时间精确到秒，出于隐私原因，浏览器会将它们舍入到更大的间隔（通常为最接近的 15 分钟的倍数）。
+> [!NOTE]
+> 即使返回的时间精确到秒，出于隐私原因，浏览器会将它们舍入到更大的间隔（通常为最接近的 15 分钟的倍数）。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/beacon_api/index.md b/files/zh-cn/web/api/beacon_api/index.md
index 292907b44e81d3..3b0c336ef4e2e8 100644
--- a/files/zh-cn/web/api/beacon_api/index.md
+++ b/files/zh-cn/web/api/beacon_api/index.md
@@ -11,7 +11,8 @@ Beacon API 主要的使用场景是将分析数据发送给服务器，如：客
 
 如需了解 Beacon API 更多的细节和用例，请参考 {{domxref("navigator.sendBeacon()")}} 方法。
 
-> **备注：** Beacon API 在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中是不可用的（没有通过 {{domxref("WorkerNavigator")}} 暴露出来）。
+> [!NOTE]
+> Beacon API 在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中是不可用的（没有通过 {{domxref("WorkerNavigator")}} 暴露出来）。
 
 ## 接口
 
diff --git a/files/zh-cn/web/api/blob/type/index.md b/files/zh-cn/web/api/blob/type/index.md
index 4145cced1eebdf..a4ba70c965f820 100644
--- a/files/zh-cn/web/api/blob/type/index.md
+++ b/files/zh-cn/web/api/blob/type/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("Blob")}} 接口的 **`type`** 属性给出文件的 {{Glossary("MIME type", "MIME 类型")}}。
 
-> **备注：** 基于当前的实现，浏览器不会读取文件的字节流来确定其媒体类型。其根据文件扩展名进行假设；一个被重命名为 .txt 的 PNG 图像文件会返回“_text/plain_”而不是“_image/png_”。此外，`blob.type` 通常只对常见的文件类型（如图像、HTML 文档、音频和视频）有效。不常见的文件扩展名会返回空字符串。客户端配置（例如 Windows 注册表）可能会导致常见类型出现意外值。**开发者不应该仅依赖此属性作为验证方案。**
+> [!NOTE]
+> 基于当前的实现，浏览器不会读取文件的字节流来确定其媒体类型。其根据文件扩展名进行假设；一个被重命名为 .txt 的 PNG 图像文件会返回“_text/plain_”而不是“_image/png_”。此外，`blob.type` 通常只对常见的文件类型（如图像、HTML 文档、音频和视频）有效。不常见的文件扩展名会返回空字符串。客户端配置（例如 Windows 注册表）可能会导致常见类型出现意外值。**开发者不应该仅依赖此属性作为验证方案。**
 
 ## 值
 
diff --git a/files/zh-cn/web/api/bytelengthqueuingstrategy/highwatermark/index.md b/files/zh-cn/web/api/bytelengthqueuingstrategy/highwatermark/index.md
index cf5da6dcba9331..2f4288cfa5bda1 100644
--- a/files/zh-cn/web/api/bytelengthqueuingstrategy/highwatermark/index.md
+++ b/files/zh-cn/web/api/bytelengthqueuingstrategy/highwatermark/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ByteLengthQueuingStrategy/highWaterMark
 
 只读属性 **`ByteLengthQueuingStrategy.highWaterMark`** 返回在应用[背压](/zh-CN/docs/Web/API/Streams_API/Concepts#背压)之前，内置队列可以包含的字节总数。
 
-> **备注：** 与 [`CountQueuingStrategy()`](/zh-CN/docs/Web/API/CountQueuingStrategy/CountQueuingStrategy) 不同，后者的 `highWaterMark` 指定了分块的数量，`ByteLengthQueuingStrategy()` 的 `highWaterMark` 参数则指定了*字节*数量——具体地说，给定一个分块流，在应用背压之前，内部队列可以包含这些分块的字节数（而不是这些分块的数量）。
+> [!NOTE]
+> 与 [`CountQueuingStrategy()`](/zh-CN/docs/Web/API/CountQueuingStrategy/CountQueuingStrategy) 不同，后者的 `highWaterMark` 指定了分块的数量，`ByteLengthQueuingStrategy()` 的 `highWaterMark` 参数则指定了*字节*数量——具体地说，给定一个分块流，在应用背压之前，内部队列可以包含这些分块的字节数（而不是这些分块的数量）。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/cache/add/index.md b/files/zh-cn/web/api/cache/add/index.md
index 33c1db9bcc8700..2328ffabe40916 100644
--- a/files/zh-cn/web/api/cache/add/index.md
+++ b/files/zh-cn/web/api/cache/add/index.md
@@ -20,7 +20,8 @@ fetch(url).then(function (response) {
 
 > **备注：** `add()` 将会覆盖之前存储在 cache 中与 request 匹配的任何 key/value 对。
 
-> **备注：** 之前的 Cache (Blink 和 Gecko 内核版本) 在实现{{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, 和 {{domxref("Cache.put")}} 的策略是在 response 结果完全写入缓存后才会 resolve 当前的 promise。更新后的规范版本中一旦条目被记录到数据库就会 resolve 当前的 promise，即使当前 response 结果还在传输中。
+> [!NOTE]
+> 之前的 Cache (Blink 和 Gecko 内核版本) 在实现{{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, 和 {{domxref("Cache.put")}} 的策略是在 response 结果完全写入缓存后才会 resolve 当前的 promise。更新后的规范版本中一旦条目被记录到数据库就会 resolve 当前的 promise，即使当前 response 结果还在传输中。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/cache/addall/index.md b/files/zh-cn/web/api/cache/addall/index.md
index 9435be23823081..db2962e175a1fd 100644
--- a/files/zh-cn/web/api/cache/addall/index.md
+++ b/files/zh-cn/web/api/cache/addall/index.md
@@ -11,7 +11,8 @@ slug: Web/API/Cache/addAll
 
 > **备注：** `addAll()` will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting `put()` operation would overwrite a previous cache entry created by the same `addAll()` method.
 
-> **备注：** Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.
+> [!NOTE]
+> Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/cache/index.md b/files/zh-cn/web/api/cache/index.md
index d746334d270793..a167115b240771 100644
--- a/files/zh-cn/web/api/cache/index.md
+++ b/files/zh-cn/web/api/cache/index.md
@@ -13,13 +13,17 @@ slug: Web/API/Cache
 
 > **备注：** {{domxref("Cache.put")}}, {{domxref("Cache.add")}}和{{domxref("Cache.addAll")}}只能在`GET`请求下使用。
 
-> **备注：** Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.
+> [!NOTE]
+> Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.
 
-> **备注：** 自 Chrome 46 版本起，Cache API 只保存安全来源的请求，即那些通过 HTTPS 服务的请求。
+> [!NOTE]
+> 自 Chrome 46 版本起，Cache API 只保存安全来源的请求，即那些通过 HTTPS 服务的请求。
 
-> **备注：** The key matching algorithm depends on the [VARY header](https://www.fastly.com/blog/best-practices-for-using-the-vary-header) in the value. So matching a new key requires looking at both key and value for entries in the Cache.
+> [!NOTE]
+> The key matching algorithm depends on the [VARY header](https://www.fastly.com/blog/best-practices-for-using-the-vary-header) in the value. So matching a new key requires looking at both key and value for entries in the Cache.
 
-> **备注：** Cache API 不支持 HTTP 缓存头。
+> [!NOTE]
+> Cache API 不支持 HTTP 缓存头。
 
 ## 方法
 
@@ -48,7 +52,8 @@ slug: Web/API/Cache
 
 该代码片段还展示了服务工作线程使用的缓存版本控制的最佳实践。虽然在这个例子中只有一个缓存，但同样的方法可用于多个缓存。它将缓存的速记标识符映射到特定的版本化缓存名称。代码还会删除命名不在 CURRENT_CACHES 中的所有缓存。
 
-> **备注：** 在 Chrome 中，请访问 chrome://inspect/#service-workers，然后单击注册的服务工作线程下面的“inspect”链接，查看 [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) 脚本正在执行的各种操作的日志记录。
+> [!NOTE]
+> 在 Chrome 中，请访问 chrome://inspect/#service-workers，然后单击注册的服务工作线程下面的“inspect”链接，查看 [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) 脚本正在执行的各种操作的日志记录。
 
 ```js
 var CACHE_VERSION = 1;
diff --git a/files/zh-cn/web/api/cache/keys/index.md b/files/zh-cn/web/api/cache/keys/index.md
index 0453f7fa1c7181..7b38b5d6630167 100644
--- a/files/zh-cn/web/api/cache/keys/index.md
+++ b/files/zh-cn/web/api/cache/keys/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Cache/keys
 
 请求将以它们被插入的顺序返回。
 
-> **备注：** 具有相同 URL 但不同请求头的请求，如果它们的响应头中有 VARY 头部，则他们可以被返回。
+> [!NOTE]
+> 具有相同 URL 但不同请求头的请求，如果它们的响应头中有 VARY 头部，则他们可以被返回。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/cache/put/index.md b/files/zh-cn/web/api/cache/put/index.md
index 3d2ec7ae133324..d04b2eb098f714 100644
--- a/files/zh-cn/web/api/cache/put/index.md
+++ b/files/zh-cn/web/api/cache/put/index.md
@@ -22,7 +22,8 @@ fetch(url).then(function (response) {
 
 > **备注：** {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不会缓存 `Response.status` 值不在 200 范围内的响应，而 {{domxref("Cache.put")}} 允许你存储任何请求/响应对。因此，{{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不能用于不透明的响应，而 {{domxref("Cache.put")}} 可以。
 
-> **备注：** 当响应主体完全写入磁盘时，初始 Cache 执行 (在 Blink 和 Gecko 中) resolve {{domxref("Cache.add")}}、{{domxref("Cache.addAll")}} 和 {{domxref("Cache.put")}} promise. 更新的规范版本中声明：即使响应主体仍在流式传输，一旦条目被记录到数据库中，浏览器就可以 resolve promise.
+> [!NOTE]
+> 当响应主体完全写入磁盘时，初始 Cache 执行 (在 Blink 和 Gecko 中) resolve {{domxref("Cache.add")}}、{{domxref("Cache.addAll")}} 和 {{domxref("Cache.put")}} promise. 更新的规范版本中声明：即使响应主体仍在流式传输，一旦条目被记录到数据库中，浏览器就可以 resolve promise.
 
 ## 语法
 
@@ -43,7 +44,8 @@ cache.put(request, response).then(function() {
 
 A {{jsxref("Promise")}} that resolves with void.
 
-> **备注：** The promise will reject with a `TypeError` if the URL scheme is not `http` or `https`.
+> [!NOTE]
+> The promise will reject with a `TypeError` if the URL scheme is not `http` or `https`.
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/cachestorage/index.md b/files/zh-cn/web/api/cachestorage/index.md
index e58aa793518d0c..1ed3ad98f174f6 100644
--- a/files/zh-cn/web/api/cachestorage/index.md
+++ b/files/zh-cn/web/api/cachestorage/index.md
@@ -11,7 +11,8 @@ slug: Web/API/CacheStorage
 
 你可以通过窗口的 {{domxref("Window.caches")}} 属性或 worker 的 {{domxref("WorkerGlobalScope.caches")}} 属性访问 `CacheStorage`。
 
-> **备注：** CacheStorage 总是对不受信任的源（即那些不使用 HTTPS，尽管此定义将来很可能变得更加复杂。）使用 `SecurityError` reject. 测试时，你可以在 Firefox Devtools 选项/齿轮菜单中通过选中"通过 HTTP 启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。
+> [!NOTE]
+> CacheStorage 总是对不受信任的源（即那些不使用 HTTPS，尽管此定义将来很可能变得更加复杂。）使用 `SecurityError` reject. 测试时，你可以在 Firefox Devtools 选项/齿轮菜单中通过选中"通过 HTTP 启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。
 
 > **备注：** {{domxref("CacheStorage.match()")}} 是一个便捷方法。匹配 cache 条目的同等功能可以通过执行 {{domxref("CacheStorage.open()")}} 打开 cache，使用 {{domxref("CacheStorage.keys()")}} 返回它包含的条目，并将你所需的条目与 {{domxref("CacheStorage.match()")}} 匹配。
 
diff --git a/files/zh-cn/web/api/cachestorage/open/index.md b/files/zh-cn/web/api/cachestorage/open/index.md
index 1bcb44f6dd9efe..f7d4778db06fc1 100644
--- a/files/zh-cn/web/api/cachestorage/open/index.md
+++ b/files/zh-cn/web/api/cachestorage/open/index.md
@@ -9,7 +9,8 @@ slug: Web/API/CacheStorage/open
 
 你可以通过窗口的 {{domxref("Window.caches")}} 属性或 worker 的 {{domxref("WorkerGlobalScope.caches")}} 属性访问 `CacheStorage`。
 
-> **备注：** 如果指定的 {{domxref("Cache")}} 不存在，则使用该 `cacheName` 创建一个新的缓存，并返回一个兑现为这个新的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}}。
+> [!NOTE]
+> 如果指定的 {{domxref("Cache")}} 不存在，则使用该 `cacheName` 创建一个新的缓存，并返回一个兑现为这个新的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}}。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/canvas_api/index.md b/files/zh-cn/web/api/canvas_api/index.md
index 461e6457dcc3de..3b8b5003f4c113 100644
--- a/files/zh-cn/web/api/canvas_api/index.md
+++ b/files/zh-cn/web/api/canvas_api/index.md
@@ -87,7 +87,8 @@ Canvas API 是非常强大的，但不总是很容易使用。以下列出的库
 - [ZIM](https://zimjs.com)：为在 canvas 上进行创意代码编写提供便利性以及相关组件和控件的框架，包括无障碍和数百个色彩缤纷的教程。
 - [Sprig](https://github.com/hackclub/sprig)：使用 Canvas 实现的基于图块的游戏的开发库，适合初学者并且开源。
 
-> **备注：** 与 WebGL 有关的 2D 和 3D 的库请参见 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)。
+> [!NOTE]
+> 与 WebGL 有关的 2D 和 3D 的库请参见 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
index 9398b30a14b134..cd68622e25c457 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -18,7 +18,8 @@ slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
 
 `color` 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 `#000000`）。
 
-> **备注：** 一旦你设置了 `strokeStyle` 或者 `fillStyle` 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 `fillStyle` 或 `strokeStyle` 的值。
+> [!NOTE]
+> 一旦你设置了 `strokeStyle` 或者 `fillStyle` 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 `fillStyle` 或 `strokeStyle` 的值。
 
 你输入的应该是符合 [CSS3 颜色值标准](https://www.w3.org/TR/css-color-3/) 的有效字符串。下面的例子都表示同一种颜色。
 
@@ -253,7 +254,8 @@ draw();
 
 要解决这个问题，你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。
 
-> **备注：** 在这个竖线的例子中，其 Y 坐标刚好落在网格线上，否则端点上同样会出现半渲染的像素点（但还要注意，这种行为的表现取决于当前的 lineCap 风格，它默认为 butt；你可能希望通过将 lineCap 样式设置为 square 正方形，来得到与奇数宽度线的半像素坐标相一致的笔画，这样，端点轮廓的外边框将被自动扩展以完全覆盖整个像素格）。
+> [!NOTE]
+> 在这个竖线的例子中，其 Y 坐标刚好落在网格线上，否则端点上同样会出现半渲染的像素点（但还要注意，这种行为的表现取决于当前的 lineCap 风格，它默认为 butt；你可能希望通过将 lineCap 样式设置为 square 正方形，来得到与奇数宽度线的半像素坐标相一致的笔画，这样，端点轮廓的外边框将被自动扩展以完全覆盖整个像素格）。
 >
 > 还请注意，只有路径的起点和终点受此影响：如果一个路径是通过 closePath() 来封闭的，它是没有起点和终点的；相反的情况下，路径上的所有端点都与上一个点相连，下一段路径使用当前的 lineJoin 设置（默认为 miter），如果相连路径是水平和/或垂直的话，会导致相连路径的外轮廓根据相交点自动延伸，因此渲染出的路径轮廓会覆盖整个像素格。接下来的两个小节将展示这些额外的行样式。
 
@@ -585,7 +587,8 @@ draw();
 - {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
   - : 该方法接受两个参数。Image 可以是一个 `Image` 对象的引用，或者另一个 canvas 对象。`Type` 必须是下面的字符串值之一：`repeat`，`repeat-x`，`repeat-y` 和 `no-repeat`。
 
-> **备注：** 用 canvas 对象作为 `Image` 参数在 Firefox 1.5 (Gecko 1.8) 中是无效的。
+> [!NOTE]
+> 用 canvas 对象作为 `Image` 参数在 Firefox 1.5 (Gecko 1.8) 中是无效的。
 
 图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 `fillStyle` 或 `strokeStyle` 属性即可。
 
@@ -595,7 +598,8 @@ img.src = "someimage.png";
 var ptrn = ctx.createPattern(img, "repeat");
 ```
 
-> **备注：** 与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。
+> [!NOTE]
+> 与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。
 
 ### `createPattern` 的示例
 
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md
index a060229cc46fa1..c963dd5bdb0698 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -41,7 +41,8 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations
 
 如果你并不需要与用户互动，你可以使用 setInterval() 方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上 setTimeout() 方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。
 
-> **备注：** 下面的例子，采用 {{domxref("window.requestAnimationFrame()")}}实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画，当系统准备好了重绘条件的时候，才调用绘制动画帧。一般每秒钟回调函数执行 60 次，也有可能会被降低。想要了解更多关于动画循环的信息，尤其是游戏，可以在[Game development zone](/zh-CN/docs/Games) 参考这篇文章 [Anatomy of a video game](/zh-CN/docs/Games/Anatomy)。
+> [!NOTE]
+> 下面的例子，采用 {{domxref("window.requestAnimationFrame()")}}实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画，当系统准备好了重绘条件的时候，才调用绘制动画帧。一般每秒钟回调函数执行 60 次，也有可能会被降低。想要了解更多关于动画循环的信息，尤其是游戏，可以在[Game development zone](/zh-CN/docs/Games) 参考这篇文章 [Anatomy of a video game](/zh-CN/docs/Games/Anatomy)。
 
 ## 太阳系的动画
 
@@ -237,7 +238,8 @@ window.requestAnimationFrame(clock);
 
 ### 结果
 
-> **备注：** 尽管时钟每秒只更新一次，但动画图像每秒更新 60 次（或者以你的 Web 浏览器的显示刷新率）。要使用扫描式的时钟，请将上面的 `const sec` 定义替换为已注释的版本。
+> [!NOTE]
+> 尽管时钟每秒只更新一次，但动画图像每秒更新 60 次（或者以你的 Web 浏览器的显示刷新率）。要使用扫描式的时钟，请将上面的 `const sec` 定义替换为已注释的版本。
 
 {{EmbedLiveSample("动画时钟", "180", "200")}}
 
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md
index 26dfad9abb1ed6..7252853cfab26e 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -15,7 +15,8 @@ slug: Web/API/Canvas_API/Tutorial/Basic_usage
 
 {{HTMLElement("canvas")}} 看起来和 {{HTMLElement("img")}} 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，`<canvas>` 标签只有两个属性**——** [`width`](/zh-CN/docs/Web/HTML/Element/canvas#width)和[`height`](/zh-CN/docs/Web/HTML/Element/canvas#height)。这些都是可选的，并且同样利用 {{Glossary("DOM")}} [properties](/zh-CN/docs/Web/API/HTMLCanvasElement) 来设置。当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用{{Glossary("CSS")}}来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。
 
-> **备注：** 如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为\<canvas>明确规定宽高，而不是使用 CSS。
+> [!NOTE]
+> 如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为\<canvas>明确规定宽高，而不是使用 CSS。
 
 [`id`](/zh-CN/docs/Web/HTML/Global_attributes/id)属性并不是\<canvas>元素所特有的，而是每一个 HTML 元素都默认具有的属性（比如 class 属性）。给每个标签都加上一个 id 属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。
 
@@ -77,7 +78,8 @@ if (canvas.getContext) {
 
 这里的是一个最简单的模板，我们之后就可以把它作为之后的例子的起点。
 
-> **备注：** 为了简洁，我们在 HTML 中内嵌了 script 元素，但并不推荐这种做法。
+> [!NOTE]
+> 为了简洁，我们在 HTML 中内嵌了 script 元素，但并不推荐这种做法。
 
 ```html
 <html>
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.md
index ae5f823df24db6..8cae263be4b969 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.md
@@ -89,13 +89,15 @@ draw();
 
 生成路径的第一步叫做 beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
 
-> **备注：** 当前路径为空，即调用 beginPath() 之后，或者 canvas 刚建的时候，第一条路径构造命令通常被视为是 moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
+> [!NOTE]
+> 当前路径为空，即调用 beginPath() 之后，或者 canvas 刚建的时候，第一条路径构造命令通常被视为是 moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
 
 第二步就是调用函数指定绘制路径，本文稍后我们就能看到了。
 
 第三，就是闭合路径 closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
 
-> **备注：** 当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。
+> [!NOTE]
+> 当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。
 
 ### 绘制一个三角形
 
@@ -172,7 +174,8 @@ function draw() {
 
 如果你想看到连续的线，你可以移除调用的 moveTo()。
 
-> **备注：** 需要学习更多关于 arc() 函数的内容，请看下面的[圆弧](#圆弧)
+> [!NOTE]
+> 需要学习更多关于 arc() 函数的内容，请看下面的[圆弧](#圆弧)
 
 ### 线
 
@@ -246,7 +249,8 @@ x,y 坐标是可变的。半径（radius）和开始角度（startAngle）都是
 
 `clockwise`语句作用于第一、三行是顺时针的圆弧，`anticlockwise`作用于二、四行为逆时针圆弧。`if`语句让一、二行描边圆弧，下面两行填充路径。
 
-> **备注：** 这个示例所需的画布大小略大于本页面的其他例子：150 x 200 像素。
+> [!NOTE]
+> 这个示例所需的画布大小略大于本页面的其他例子：150 x 200 像素。
 
 ```html hidden
 <html>
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
index e6f1326a55ad38..4e4d5949c3f64c 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
@@ -66,7 +66,8 @@ var myImageData = ctx.getImageData(left, top, width, height);
 
 这个方法会返回一个 `ImageData` 对象，它代表了画布区域的对象数据，此画布的四个角落分别表示为 (`left`, `top`), (`left + width`, `top`), (`left`, `top + height`), 以及 (`left + width`, `top + height`) 四个点。这些坐标点被设定为画布坐标空间元素。
 
-> **备注：** 任何在画布以外的元素都会被返回成一个透明黑的 `ImageData` 对象。
+> [!NOTE]
+> 任何在画布以外的元素都会被返回成一个透明黑的 `ImageData` 对象。
 
 这个方法也会在文章[用画布操作视频](/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)中展示。
 
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md
index 260ebbee0f460d..192ebadc7c710f 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md
@@ -107,7 +107,8 @@ function getMyVideo() {
 - **`drawImage(image, x, y)`**
   - : 其中 `image` 是 `image` 或者 `canvas` 对象，`x` 和 `y` 是其在目标 `canvas` 里的起始坐标。
 
-> **备注：** SVG 图像必须在 \<svg> 根指定元素的宽度和高度。
+> [!NOTE]
+> SVG 图像必须在 \<svg> 根指定元素的宽度和高度。
 
 ### 示例：一个简单的线图
 
@@ -153,7 +154,8 @@ function draw() {
 
 在这个例子里，我会用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。见下面的代码，第一层 `for` 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一，50x38 px。这种方法可以用来很好的达到背景图案的效果，在下面的教程中会看到。
 
-> **备注：** 图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果你的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。
+> [!NOTE]
+> 图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果你的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。
 
 ```html hidden
 <html>
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
index d86a3327e5d647..2ba9c3ffaaee6e 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
@@ -11,7 +11,8 @@ Canvas 2D API 的 **`CanvasRenderingContext2D.arcTo()`** 方法用于通过给
 
 这个方法通常用于创建圆角。
 
-> **备注：** 当使用相对较大的半径时，可能会得到意外的结果：连接圆弧的直线将以必要的方向延申以符合指定的半径。
+> [!NOTE]
+> 当使用相对较大的半径时，可能会得到意外的结果：连接圆弧的直线将以必要的方向延申以符合指定的半径。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
index 03c0cb03745a9d..698605fe6c911b 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
@@ -1,16 +1,18 @@
 ---
-title: CanvasRenderingContext2D.bezierCurveTo()
+title: CanvasRenderingContext2D：bezierCurveTo() 方法
 slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.bezierCurveTo()`** 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 `moveTo()` 进行修改。
+Canvas 2D API 的 **`CanvasRenderingContext2D.bezierCurveTo()`** 方法用于将三次[贝赛尔曲线](/zh-CN/docs/Glossary/Bezier_curve)添加到当前子路径中。该方法需要三个点：前两个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} 进行修改。
 
 ## 语法
 
-```
-void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+```js-nolint
+bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
 ```
 
 ### 参数
@@ -28,11 +30,15 @@ void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 - `y`
   - : 结束点的 y 轴坐标。
 
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
 ## 示例
 
-### 使用 `bezierCurveTo` 方法
+### 如何使用 bezierCurveTo 方法
 
-这是一段绘制贝赛尔曲线的简单的代码片段。控制点是红色的，开始和结束点是蓝色的。
+此示例展示了如何绘制三次贝塞尔曲线。
 
 #### HTML
 
@@ -43,75 +49,72 @@ void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+// 定义画布和上下文
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
+// 定义点的坐标 {x, y}
+let start = { x: 50, y: 20 };
+let cp1 = { x: 230, y: 30 };
+let cp2 = { x: 150, y: 80 };
+let end = { x: 250, y: 100 };
+
+// 三次贝塞尔曲线
 ctx.beginPath();
-ctx.moveTo(50, 20);
-ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
+ctx.moveTo(start.x, start.y);
+ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
 ctx.stroke();
 
+// 起点和终点
 ctx.fillStyle = "blue";
-// start point
-ctx.fillRect(50, 20, 10, 10);
-// end point
-ctx.fillRect(50, 100, 10, 10);
+ctx.beginPath();
+ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI); // 起点
+ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI); // 终点
+ctx.fill();
 
+// 控制点
 ctx.fillStyle = "red";
-// control point one
-ctx.fillRect(230, 30, 10, 10);
-// control point two
-ctx.fillRect(150, 70, 10, 10);
+ctx.beginPath();
+ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // 控制点一
+ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // 控制点二
+ctx.fill();
 ```
 
-{{ EmbedLiveSample('使用_bezierCurveTo_方法', 315, 165) }}
+#### 结果
 
-### 尝试 `bezierCurveTo` 参数
+在这个例子中，控制点是红色的，起点和终点是蓝色的。
 
-修改下面的代码并在线查看 canvas 的变化：
+{{ EmbedLiveSample('如何使用_bezierCurveTo_方法', 315, 165) }}
 
-```html hidden
-<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
-<div class="playable-buttons">
-  <input id="edit" type="button" value="Edit" />
-  <input id="reset" type="button" value="Reset" />
-</div>
-<textarea id="code" class="playable-code">
-ctx.beginPath();
-ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
-ctx.stroke();</textarea
->
+### 简单的贝塞尔曲线
+
+此示例使用 `bezierCurveTo()` 绘制了一条简单的贝塞尔曲线。
+
+#### HTML
+
+```html
+<canvas id="canvas"></canvas>
 ```
 
-```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
-
-function drawCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  eval(textarea.value);
-}
-
-reset.addEventListener("click", function () {
-  textarea.value = code;
-  drawCanvas();
-});
-
-edit.addEventListener("click", function () {
-  textarea.focus();
-});
-
-textarea.addEventListener("input", drawCanvas);
-window.addEventListener("load", drawCanvas);
+#### JavaScript
+
+曲线从指定的起点开始，使用 `moveTo()` 方法：(30, 30)。第一个控制点位于 (120, 160)，第二个控制点位于 (180, 10)。曲线在 (220, 140) 结束。
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(30, 30);
+ctx.bezierCurveTo(120, 160, 180, 10, 220, 140);
+ctx.stroke();
 ```
 
-{{ EmbedLiveSample('尝试_bezierCurveTo_参数', 700, 360) }}
+#### 结果
+
+{{ EmbedLiveSample('简单的贝塞尔曲线', 700, 180) }}
 
-## 规范描述
+## 规范
 
 {{Specifications}}
 
@@ -121,5 +124,5 @@ window.addEventListener("load", drawCanvas);
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
-- [维基百科关于贝赛尔曲线](http://en.wikipedia.org/wiki/B%C3%A9zier_curve)。
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
+- [贝赛尔曲线](/zh-CN/docs/Glossary/Bezier_curve)
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
index 6b328692efa0c3..42b20d37775c5a 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 **`CanvasRenderingContext2D.clearRect()`** 方法用于通过把像素设置为透明黑色以达到擦除一个矩形区域的目的。
 
-> **备注：** 如果没有[正确使用路径](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#绘制路径)，`clearRect()` 可能会导致意想之外的结果。请确保在调用 `clearRect()` 之后开始绘制新内容前调用 {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。
+> [!NOTE]
+> 如果没有[正确使用路径](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#绘制路径)，`clearRect()` 可能会导致意想之外的结果。请确保在调用 `clearRect()` 之后开始绘制新内容前调用 {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
index 9522344ed121d9..6b5c05a26f8a55 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
@@ -13,9 +13,11 @@ Canvas 2D API 的 **`CanvasRenderingContext2D.clip()`** 方法用于将当前或
 
 ![星形裁剪区域](canvas_clipping_path.png)
 
-> **备注：** 请注意，裁剪区域仅由添加到路径中的形状构成。它不适用于直接绘制到画布上的形状基元，比如 {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}。相反，在调用 `clip()` 前，你需要使用 {{domxref("CanvasRenderingContext2D.rect()","rect()")}} 将一个矩形形状添加到路径中。
+> [!NOTE]
+> 请注意，裁剪区域仅由添加到路径中的形状构成。它不适用于直接绘制到画布上的形状基元，比如 {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}。相反，在调用 `clip()` 前，你需要使用 {{domxref("CanvasRenderingContext2D.rect()","rect()")}} 将一个矩形形状添加到路径中。
 
-> **备注：** 裁剪路径不能直接撤销。在调用 `clip()` 前，你必须使用 {{domxref("CanvasRenderingContext2D/save", "save()")}} 保存画布状态，并在裁剪区域完成绘制后使用 {{domxref("CanvasRenderingContext2D/restore", "restore()")}} 还原。
+> [!NOTE]
+> 裁剪路径不能直接撤销。在调用 `clip()` 前，你必须使用 {{domxref("CanvasRenderingContext2D/save", "save()")}} 保存画布状态，并在裁剪区域完成绘制后使用 {{domxref("CanvasRenderingContext2D/restore", "restore()")}} 还原。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md
index 32f56f31fc2865..30d34226891b70 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md
@@ -1,43 +1,59 @@
 ---
-title: CanvasRenderingContext2D.createRadialGradient()
+title: CanvasRenderingContext2D：createRadialGradient() 方法
 slug: Web/API/CanvasRenderingContext2D/createRadialGradient
+l10n:
+  sourceCommit: c7edf2734fccb185c5e93ee114ea3d5edc0177b5
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.createRadialGradient()`** 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 {{domxref("CanvasGradient")}}。
+Canvas 2D API 的 **`CanvasRenderingContext2D.createRadialGradient()`** 方法使用两个圆的坐标和大小绘制径向渐变。
+
+这个方法返回 {{domxref("CanvasGradient")}}。要将其应用于形状，必须首先将渐变赋值给 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} 属性。
+
+> [!NOTE]
+> 渐变坐标是全局的，即相对于当前的坐标空间。当应用于形状时，这些坐标并不是相对于形状本身的坐标。
 
 ## 语法
 
-```
-CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
+```js-nolint
+createRadialGradient(x0, y0, r0, x1, y1, r1)
 ```
 
+`createRadialGradient()` 方法由六个参数指定，三个参数定义渐变的起始圆，另外三个参数定义渐变的结束圆。
+
 ### 参数
 
 - `x0`
   - : 开始圆形的 x 轴坐标。
 - `y0`
   - : 开始圆形的 y 轴坐标。
-- r0
-  - : 开始圆形的半径。
+- `r0`
+  - : 开始圆形的半径。必须为非负有限值。
 - `x1`
   - : 结束圆形的 x 轴坐标。
 - `y1`
   - : 结束圆形的 y 轴坐标。
-- r1
-  - : 结束圆形的半径。
+- `r1`
+  - : 结束圆形的半径。必须为非负有限值。
 
 ### 返回值
 
 - {{domxref("CanvasGradient")}}
-  - : 由两个指定的圆初始化的放射性 `CanvasGradient` 对象。
+  - : 一个使用指定的两个圆初始化的径向 {{domxref("CanvasGradient")}}。
+
+### 异常
+
+- `NotSupportedError` {{domxref("DOMException")}}
+  - : 当在参数中传递非有限值时抛出。
+- `IndexSizeError` {{domxref("DOMException")}}
+  - : 当在参数追踪传递负半径时抛出。
 
 ## 示例
 
 ### 用径向渐变填充矩形
 
-这是一段简单的代码片段，使用 `createRadialGradient` 方法创建一个指定了开始和结束圆的 {{domxref("CanvasGradient")}} 对象。一旦创建，你可以使用 {{domxref("CanvasGradient.addColorStop()")}} 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}设置成此渐变，当使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果，如示例所示。
+此示例使用 `createRadialGradient()` 方法初始化一个径向渐变。然后在渐变的两个圆之间创建了三个色标。最后，将渐变赋值给画布上下文，并将其渲染到一个填充的矩形上。
 
 #### HTML
 
@@ -51,17 +67,17 @@ CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Create a radial gradient
-// The inner circle is at x=110, y=90, with radius=30
-// The outer circle is at x=100, y=100, with radius=70
+// 创建一个径向渐变
+// 内圆位于 x=110、y=90，半径为 30
+// 外圆位于 x=100,、y=100，半径为 70
 const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);
 
-// Add three color stops
+// 添加三个色标
 gradient.addColorStop(0, "pink");
 gradient.addColorStop(0.9, "white");
 gradient.addColorStop(1, "green");
 
-// Set the fill style and draw a rectangle
+// 设置填充样式并绘制矩形
 ctx.fillStyle = gradient;
 ctx.fillRect(20, 20, 160, 160);
 ```
@@ -70,7 +86,7 @@ ctx.fillRect(20, 20, 160, 160);
 
 {{ EmbedLiveSample('用径向渐变填充矩形', 700, 240) }}
 
-## 规范描述
+## 规范
 
 {{Specifications}}
 
@@ -80,5 +96,6 @@ ctx.fillRect(20, 20, 160, 160);
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+- {{domxref("CanvasRenderingContext2D.createConicGradient()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
index 4116a4a1bd5fe8..e6e444c122f869 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
@@ -1,18 +1,20 @@
 ---
-title: CanvasRenderingContext2D.drawImage()
+title: CanvasRenderingContext2D：drawImage() 方法
 slug: Web/API/CanvasRenderingContext2D/drawImage
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-Canvas 2D API 中的 **`CanvasRenderingContext2D.drawImage()`** 方法提供了多种在画布（Canvas）上绘制图像的方式。
+Canvas 2D API 的 **`CanvasRenderingContext2D.drawImage()`** 方法提供了多种在画布（Canvas）上绘制图像的方式。
 
 ## 语法
 
-```js
-drawImage(image, dx, dy);
-drawImage(image, dx, dy, dWidth, dHeight);
-drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+```js-nolint
+drawImage(image, dx, dy)
+drawImage(image, dx, dy, dWidth, dHeight)
+drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
 ```
 
 ![drawImage](canvas_drawimage.jpg)
@@ -23,21 +25,21 @@ drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
   - : 绘制到上下文的元素。允许任何的画布图像源，例如：{{domxref("HTMLImageElement")}}、{{domxref("SVGImageElement")}}、{{domxref("HTMLVideoElement")}}、{{domxref("HTMLCanvasElement")}}、{{domxref("ImageBitmap")}}、{{domxref("OffscreenCanvas")}}
     或 {{domxref("VideoFrame")}}。
 - `sx` {{optional_inline}}
-  - : 需要绘制到目标上下文中的，`image` 的矩形（裁剪）选择框的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
+  - : 需要绘制到目标上下文中的，源 `image` 的子矩形（裁剪）的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
 - `sy` {{optional_inline}}
-  - : 需要绘制到目标上下文中的，`image` 的矩形（裁剪）选择框的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
+  - : 需要绘制到目标上下文中的，源 `image` 的子矩形（裁剪）的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
 - `sWidth` {{optional_inline}}
-  - : 需要绘制到目标上下文中的，`image` 的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的 `sx` 和 `sy` 开始，到 `image` 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。
+  - : 需要绘制到目标上下文中的，源 `image` 的子矩形（裁剪）的宽度。如果不指定，整个矩形（裁剪）从坐标的 `sx` 和 `sy` 开始，到 `image` 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。
 - `sHeight` {{optional_inline}}
-  - : 需要绘制到目标上下文中的，`image`的矩形（裁剪）选择框的高度。使用负值将翻转这个图像。
+  - : 需要绘制到目标上下文中的，`image`的矩形（裁剪）选择框的高度。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。
 - `dx`
-  - : `image` 的左上角在目标画布上 X 轴坐标。
+  - : 源 `image` 的左上角在目标画布上 X 轴坐标。
 - `dy`
-  - : `image` 的左上角在目标画布上 Y 轴坐标。
+  - : 源 `image` 的左上角在目标画布上 Y 轴坐标。
 - `dWidth`
-  - : `image` 在目标画布上绘制的宽度。允许对绘制的 `image` 进行缩放。如果不说明，在绘制时 `image` 宽度不会缩放。注意，这个参数不包含在 3 参数语法中。
+  - : `image` 在目标画布上绘制的宽度。允许对绘制的图像进行缩放。如果不指定，在绘制时 `image` 宽度不会缩放。注意，这个参数不包含在 3 参数语法中。
 - `dHeight`
-  - : `image` 在目标画布上绘制的高度。允许对绘制的 `image` 进行缩放。如果不说明，在绘制时 `image` 高度不会缩放。注意，这个参数不包含在 3 参数语法中。
+  - : `image` 在目标画布上绘制的高度。允许对绘制的图像进行缩放。如果不指定，在绘制时 `image` 高度不会缩放。注意，这个参数不包含在 3 参数语法中。
 
 ### 返回值
 
@@ -85,9 +87,9 @@ image.addEventListener("load", (e) => {
 
 ### 理解源元素大小
 
-`drawImage()` 方法在绘制时使用源元素的*固有尺寸*（以 CSS 像素为单位）。
+`drawImage()` 方法在绘制时使用源元素的*以 CSS 像素为单位的固有尺寸*。
 
-例如，如果加载图像并在其[构造函数](/zh-CN/docs/Web/API/HTMLImageElement/Image)中指定可选的大小参数，则必须使用所创建实例的 `naturalWidth` 和 `naturalHeight` 属性来正确计算裁剪和缩放区域等内容，而不是 `element.width` 和 `element.height`。如果元素是 {{htmlelement("video")}} 元素，则 `videoWidth` 和 `videoHeight` 也是如此，依此类推。
+例如，如果加载图像（`Image`）并在其[构造函数](/zh-CN/docs/Web/API/HTMLImageElement/Image)中指定可选的大小参数，则必须使用所创建实例的 `naturalWidth` 和 `naturalHeight` 属性来正确计算裁剪和缩放区域等内容，而不是 `element.width` 和 `element.height`。如果元素是 {{htmlelement("video")}} 元素，则 `videoWidth` 和 `videoHeight` 也是如此，依此类推。
 
 #### HTML
 
@@ -101,24 +103,24 @@ image.addEventListener("load", (e) => {
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-const image = new Image(60, 45); // Using optional size for image
-image.onload = drawImageActualSize; // Draw when image has loaded
+const image = new Image(); // 创建一个新的图片对象
+image.width = 60; // 使用可选的图片尺寸
+image.height = 45; // 使用可选的图片尺寸
+image.onload = drawImageActualSize; // 图片加载完成后进行绘制
 
-// Load an image of intrinsic size 300x227 in CSS pixels
+// 加载一个固定尺寸（以 CSS 像素为单位）为 300x227 的图片
 image.src = "rhino.jpg";
 
 function drawImageActualSize() {
-  // Use the intrinsic size of image in CSS pixels for the canvas element
+  // 在画布上使用图片的实际尺寸（以 CSS 像素为单位）
   canvas.width = this.naturalWidth;
   canvas.height = this.naturalHeight;
 
-  // Will draw the image as 300x227, ignoring the custom size of 60x45
-  // given in the constructor
+  // 绘制图片，使用它的固定尺寸 300x227，忽略构造函数中给定的自定义尺寸 60x45
   ctx.drawImage(this, 0, 0);
 
-  // To use the custom size we'll have to specify the scale parameters
-  // using the element's width and height properties - lets draw one
-  // on top in the corner:
+  // 若要使用自定义尺寸，必须指定缩放参数
+  // 让我们在画布的左上角绘制一个使用元素宽度和高度属性的图片：
   ctx.drawImage(this, 0, 0, this.width, this.height);
 }
 ```
@@ -137,8 +139,8 @@ function drawImageActualSize() {
 
 ## 备注
 
-- 当 `drawImage()` 需要在 {{domxref("HTMLVideoElement")}} 工作时，仅当 {{domxref("HTMLMediaElement.readyState")}} 大于 1 时 `drawImage()` 才能正常工作。
-- 在绘制，裁剪和/或缩放时，`drawImage()` 将始终使用源元素的固有尺寸（以 CSS 像素为单位）。
+- `drawImage()` 对于 {{domxref("HTMLVideoElement")}} 只有在其 {{domxref("HTMLMediaElement.readyState")}} 大于 1（即设置 `currentTime` 属性后触发 **seek** 事件）时才能正确工作。
+- 在绘制，裁剪和/或缩放时，`drawImage()` 将始终使用源元素*以 CSS 像素为单位的固有尺寸*。
 - 在某些旧版本浏览器中，`drawImage()` 将忽略图像中的所有 EXIF 元数据，包括方向。此行为在 iOS 设备上尤其麻烦。你应该自己检测方向并使用 `rotate()` 使其正确。
 
 ## 参见
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md
index 35fe92d5a19605..0aa0f29c6d94e1 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md
@@ -1,42 +1,49 @@
 ---
-title: CanvasRenderingContext2D.ellipse()
+title: CanvasRenderingContext2D：ellipse() 方法
 slug: Web/API/CanvasRenderingContext2D/ellipse
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.ellipse()`** 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是*radiusX* 和 _radiusY_，按照*anticlockwise*（默认顺时针）指定的方向，从 _startAngle_ 开始绘制，到 _endAngle_ 结束。
+Canvas 2D API 的 **`CanvasRenderingContext2D.ellipse()`** 方法用于向当前子路径添加椭圆弧。
 
 ## 语法
 
-```
-void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+```js-nolint
+ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
+ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
 ```
 
 ### 参数
 
 - `x`
-  - : 椭圆圆心的 x 轴坐标。
+  - : 椭圆圆心的 x 轴（水平）坐标。
 - `y`
-  - : 椭圆圆心的 y 轴坐标。
-- `radius`X
-  - : 椭圆长轴的半径。
-- `radius`Y
-  - : 椭圆短轴的半径。
+  - : 椭圆圆心的 y 轴（垂直）坐标。
+- `radiusX`
+  - : 椭圆长轴的半径。必须为非负数。
+- `radiusY`
+  - : 椭圆短轴的半径。必须为非负数。
 - `rotation`
-  - : 椭圆的旋转角度，以弧度表示 (**非角度度数**)。
+  - : 椭圆的旋转角度，以弧度表示。
 - `startAngle`
-  - : 将要绘制的起始点角度，从 x 轴测量，以弧度表示 (**非角度度数**)。
+  - : 椭圆弧的起始[偏心角](https://www.simply.science/index.php/math/geometry/conic-sections/ellipse/10022-eccentric-angle-and-parametric-equations-of-an-ellipse)，从正 x 轴沿顺时针测量，用弧度表示。
 - `endAngle`
-  - : 椭圆将要绘制的结束点角度，以弧度表示 (**非角度度数**)。
-- `anticlockwise` {{optional_inline}}
-  - : {{jsxref("Boolean")}} 选项，如果为 `true`，逆时针方向绘制椭圆（逆时针），反之顺时针方向绘制。
+  - : 椭圆弧的结束[偏心角](https://www.simply.science/index.php/math/geometry/conic-sections/ellipse/10022-eccentric-angle-and-parametric-equations-of-an-ellipse)，从正 x 轴沿顺时针测量，用弧度表示。
+- `counterclockwise` {{optional_inline}}
+  - : 一个可选的布尔值，如果为 `true`，则逆时针绘制椭圆弧。默认值为 `false`（顺时针）。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
 
 ## 示例
 
-### 画一个完整的椭圆
+### 画完整的椭圆
 
-这是一段绘制椭圆的简单的代码片段。
+此示例以 π/4 弧度（45**°**）的角度绘制一个椭圆。为了绘制完整的椭圆，弧的起始角度为 0 弧度（0**°**），结束角度为 2π 弧度（360**°**）。
 
 #### HTML
 
@@ -50,12 +57,12 @@ void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlo
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Draw the ellipse
+// 绘制椭圆
 ctx.beginPath();
 ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
 ctx.stroke();
 
-// Draw the ellipse's line of reflection
+// 绘制椭圆的对称轴
 ctx.beginPath();
 ctx.setLineDash([5, 5]);
 ctx.moveTo(0, 200);
@@ -65,7 +72,43 @@ ctx.stroke();
 
 #### 结果
 
-{{ EmbedLiveSample('画一个完整的椭圆', 700, 250) }}
+{{ EmbedLiveSample('画完整的椭圆', 700, 250) }}
+
+### 不同的椭圆弧
+
+此示例创建了三条具有不同属性的椭圆路径。
+
+#### HTML
+
+```html
+<canvas id="canvas"></canvas>
+```
+
+#### JavaScript
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "red";
+ctx.beginPath();
+ctx.ellipse(60, 75, 50, 30, Math.PI * 0.25, 0, Math.PI * 1.5);
+ctx.fill();
+
+ctx.fillStyle = "blue";
+ctx.beginPath();
+ctx.ellipse(150, 75, 50, 30, Math.PI * 0.25, 0, Math.PI);
+ctx.fill();
+
+ctx.fillStyle = "green";
+ctx.beginPath();
+ctx.ellipse(240, 75, 50, 30, Math.PI * 0.25, 0, Math.PI, true);
+ctx.fill();
+```
+
+#### 结果
+
+{{ EmbedLiveSample('不同的椭圆弧', 700, 180) }}
 
 ## 规范
 
@@ -77,4 +120,5 @@ ctx.stroke();
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义该方法的接口：{{domxref("CanvasRenderingContext2D")}}
+- 使用 {{domxref("CanvasRenderingContext2D.arc()")}} 方法来绘制圆弧
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md
index 4f4130dfe6d2eb..23bd889d07f570 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 **`CanvasRenderingContext2D.fillStyle`** 属性指定用于形状内部的颜色、渐变或图案。默认样式为 `#000`（黑色）。
 
-> **备注：** 想要了解更多填充和描边样式的示例，请参阅 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中的[应用样式和颜色](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)。
+> [!NOTE]
+> 想要了解更多填充和描边样式的示例，请参阅 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中的[应用样式和颜色](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md
index dbb11e8a9cc91a..f5a4197a35423a 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md
@@ -13,7 +13,8 @@ Canvas 2D API 的 {{domxref("CanvasRenderingContext2D")}} 对象的方法 **`fil
 
 文本根据 {{domxref("CanvasRenderingContext2D.font", "font")}}、{{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}} 和 {{domxref("CanvasRenderingContext2D.direction", "direction")}} 属性所定义的字体和文本布局来渲染。
 
-> **备注：** 如果需要绘制字符串中字符的轮廓，需要调用其上下文的 {{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} 方法。
+> [!NOTE]
+> 如果需要绘制字符串中字符的轮廓，需要调用其上下文的 {{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} 方法。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fontkerning/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fontkerning/index.md
new file mode 100644
index 00000000000000..a7557b39f83a8a
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fontkerning/index.md
@@ -0,0 +1,70 @@
+---
+title: CanvasRenderingContext2D：fontKerning 属性
+slug: Web/API/CanvasRenderingContext2D/fontKerning
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{APIRef}}
+
+Canvas API 的 **`CanvasRenderingContext2D.fontKerning`** 属性用于指定如何使用字体字距调整（kerning）信息。
+
+字距调整会调整比例字体的相邻字母间距，如果有空间，则允许它们在视觉上互相接触。例如，在良好的字距调整字体中，字符 `AV`、`Ta` 和 `We` 会更紧凑地排列，使得字符间距更加均匀，阅读起来比没有调整字距的文本更加舒服。
+
+这个属性对应于 CSS 中的 [`font-kerning`](/zh-CN/docs/Web/CSS/font-kerning) 属性。
+
+## 值
+
+该属性可以用来获取或设置值。
+
+允许的取值包括：
+
+- `auto`
+  - : 浏览器决定是否应该使用字距调整。例如，某些浏览器会在小字体上禁用字距调整，因为应用字距调整可能会影响文本的可读性。
+- `normal`
+  - : 必须应用存储在字体中的字距调整信息。
+- `none`
+  - : 禁用存储在字体中的字距调整信息。
+
+## 示例
+
+以下示例演示了使用 `fontKerning` 属性所支持的每一个值来显示文本“AVA Ta We”。
+
+### HTML
+
+```html
+<canvas id="canvas" width="700" height="140"></canvas>
+```
+
+### JavaScript
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+ctx.font = "30px serif";
+
+// 默认值（auto）
+ctx.fillText(`AVA Ta We（默认：${ctx.fontKerning}）`, 5, 30);
+
+// 字距调整：normal
+ctx.fontKerning = "normal";
+ctx.fillText(`AVA Ta We（${ctx.fontKerning}）`, 5, 70);
+
+// 字距调整：none
+ctx.fontKerning = "none";
+ctx.fillText(`AVA Ta We（${ctx.fontKerning}）`, 5, 110);
+```
+
+### 结果
+
+请注意，最后一个字符串禁用了字距调整，因此相邻字符的间距是均匀的。
+
+{{ EmbedLiveSample('示例', 700, 150) }}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md
new file mode 100644
index 00000000000000..cb203e091f1e16
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md
@@ -0,0 +1,92 @@
+---
+title: CanvasRenderingContext2D：fontVariantCaps 属性
+slug: Web/API/CanvasRenderingContext2D/fontVariantCaps
+l10n:
+  sourceCommit: 44cf523714745d626317192bfbe849b47144f3ab
+---
+
+{{APIRef}}
+
+[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的 `CanvasRenderingContext2D.fontVariantCaps` 属性用于指定渲染文本的替代大写形式。
+
+该属性对应于 CSS 中的 [`font-variant-caps`](/zh-CN/docs/Web/CSS/font-variant-caps) 属性。
+
+## 值
+
+字体的替代大写形式值，可以是以下之一：
+
+- `normal`（默认）
+  - : 停用替代字形。
+- `small-caps`
+  - : 启用小型大写字母（small capital）的显示（OpenType 特性：`smcp`）。小型大写字形通常使用大写字母的形式，但大小与小写字母相同。
+- `all-small-caps`
+  - : 同时为大写和小写字母启用小型大写字母（small capital）的显示（OpenType 特性：`c2sc`、`smcp`）。
+- `petite-caps`
+  - : 启用小型大写字母（petite capital）的显示（OpenType 特性：`pcap`）。
+- `all-petite-caps`
+  - : 同时为大写和小写字母启用小型大写字母（petite capital）的显示（OpenType 特性：`c2pc`、`pcap`）。
+- `unicase`
+  - : 启用将大写字母显示为小型大写字母（small capital），同时正常显示小写字母的混合显示（OpenType 特性：`unic`）。
+- `titling-caps`
+  - : 启用标题大写字母的显示（OpenType 特性：`titl`）。大写字母字形通常设计用于与小写字母配合使用。在全大写的标题序列中使用时，它们可能显得过于强烈。标题大写字母是专为这种情况而设计的。
+
+该属性可以用于获取或设置字体的大写值。
+
+请注意，某些内容可能会引发无障碍问题，具体内容请参阅相应的 [`font-variant-caps`](/zh-CN/docs/Web/CSS/font-variant-caps#无障碍访问风险) 主题。
+
+## 示例
+
+以下示例演示了使用 `fontVariantCaps` 属性支持的每种值来显示文本“Hello World”。每种情况还通过读取属性来显示其值。
+
+### HTML
+
+```html
+<canvas id="canvas" width="700" height="220"></canvas>
+```
+
+### JavaScript
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+ctx.font = "20px serif";
+
+// 默认值（normal）
+ctx.fillText(`Hello world（默认：${ctx.fontVariantCaps}）`, 5, 20);
+
+// 大写形式：small-caps
+ctx.fontVariantCaps = "small-caps";
+ctx.fillText(`Hello world（${ctx.fontVariantCaps}）`, 5, 50);
+
+// 大写形式：all-small-caps
+ctx.fontVariantCaps = "all-small-caps";
+ctx.fillText(`Hello world（${ctx.fontVariantCaps}）`, 5, 80);
+
+// 大写形式：petite-caps
+ctx.fontVariantCaps = "petite-caps";
+ctx.fillText(`Hello world（${ctx.fontVariantCaps}）`, 5, 110);
+
+// 大写形式：all-petite-caps
+ctx.fontVariantCaps = "all-petite-caps";
+ctx.fillText(`Hello world（${ctx.fontVariantCaps}）`, 5, 140);
+
+// 大写形式：unicase
+ctx.fontVariantCaps = "unicase";
+ctx.fillText(`Hello world（${ctx.fontVariantCaps}）`, 5, 170);
+
+// 大写形式：titling-caps
+ctx.fontVariantCaps = "titling-caps";
+ctx.fillText(`Hello world（${ctx.fontVariantCaps}）`, 5, 200);
+```
+
+### 结果
+
+{{ EmbedLiveSample('示例', 700, 230) }}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/getcontextattributes/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/getcontextattributes/index.md
new file mode 100644
index 00000000000000..37486f050ea097
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/getcontextattributes/index.md
@@ -0,0 +1,87 @@
+---
+title: CanvasRenderingContext2D：getContextAttributes() 方法
+slug: Web/API/CanvasRenderingContext2D/getContextAttributes
+l10n:
+  sourceCommit: ba09b113ee91eee477894ef2ac028bbc63f480b5
+---
+
+{{APIRef("WebGL")}}
+
+**`CanvasRenderingContext2D.getContextAttributes()`** 方法返回一个包含上下文使用的属性的对象。
+
+请注意，使用 [`HTMLCanvasElement.getContext()`](/zh-CN/docs/Web/API/HTMLCanvasElement/getContext) 创建上下文时可能会请求上下文的属性，但实际支持和使用的属性可能会有所不同。
+
+## 语法
+
+```js-nolint
+getContextAttributes()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+一个 `CanvasRenderingContext2DSettings` 对象，包含实际的上下文参数。它包括以下成员：
+
+- `alpha` {{optional_inline}}
+  - : 一个布尔值，指示画布是否包含 alpha 通道。如果为 `false`，背景总是不透明的，这可以加快对透明内容和图像的绘制速度。
+- `colorSpace` {{optional_inline}}
+  - : 指定渲染上下文的色彩空间。可能的值有：
+    - `srgb`：表示 [sRGB 色彩空间](https://zh.wikipedia.org/wiki/SRGB)
+    - `display-p3`：表示 [Display-P3 色彩空间](https://zh.wikipedia.org/wiki/DCI-P3)
+- `desynchronized` {{optional_inline}}
+  - : 一个布尔值，指示用户代理通过将画布绘制周期与事件循环解耦，从而减少了延迟。
+- `willReadFrequently` {{optional_inline}}
+  - : 一个布尔值，指示该画布是否使用软件加速（而不是硬件加速）来支持通过 {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} 的频繁读取操作。
+
+## 示例
+
+此示例展示了如何在创建画布上下文时指定上下文属性，并调用 `getContextAttributes()` 方法来读取浏览器实际使用的参数。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += text;
+}
+```
+
+首先我们使用 [`HTMLCanvasElement.getContext()`](/zh-CN/docs/Web/API/HTMLCanvasElement/getContext) 创建一个上下文，仅指定一个上下文属性。
+
+```js
+let canvas = document.createElement("canvas");
+let ctx = canvas.getContext("2d", { alpha: false });
+```
+
+如果浏览器支持 `getContextAttributes()` 方法，则使用它来读取浏览器实际使用的属性（包括我们显式指定的属性）：
+
+```js
+if (ctx.getContextAttributes) {
+  const attributes = ctx.getContextAttributes();
+  log(JSON.stringify(attributes));
+} else {
+  log("不支持 CanvasRenderingContext2D.getContextAttributes()");
+}
+```
+
+根据浏览器支持的属性，下面的日志应显示类似于 `{alpha: false, colorSpace: 'srgb', desynchronized: false, willReadFrequently: false}` 的字符串。
+
+{{EmbedLiveSample('示例','100%','50')}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`HTMLCanvasElement.getContext()`](/zh-CN/docs/Web/API/HTMLCanvasElement/getContext)
+- [`WebGLRenderingContext.getContextAttributes()`](/zh-CN/docs/Web/API/WebGLRenderingContext/getContextAttributes)
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md
index 53a29dd8dc9454..41718ea8705c60 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md
@@ -1,16 +1,18 @@
 ---
-title: CanvasRenderingContext2D.getTransform()
+title: CanvasRenderingContext2D：getTransform() 方法
 slug: Web/API/CanvasRenderingContext2D/getTransform
+l10n:
+  sourceCommit: c7edf2734fccb185c5e93ee114ea3d5edc0177b5
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.getTransform()`** 方法获取当前被应用到上下文的转换矩阵
+Canvas 2D API 的 **`CanvasRenderingContext2D.getTransform()`** 方法用于获取当前被应用到上下文的变换矩阵。
 
 ## 语法
 
-```
-let storedTransform = ctx.getTransform();
+```js-nolint
+getTransform()
 ```
 
 ### 参数
@@ -19,25 +21,30 @@ let storedTransform = ctx.getTransform();
 
 ### 返回值
 
-一个 {{domxref("DOMMatrix")}} 对象
+一个 {{domxref("DOMMatrix")}} 对象。
+
+变换矩阵的描述如下：
 
-转换矩阵被这样描述： <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{array} \right]</annotation></semantics></math>
+<!-- prettier-ignore-start -->
+<math display="block"><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math>
+<!-- prettier-ignore-end -->
 
-> **备注：** 返回的对象不是实时的，所以更新它不会影响当前的转换矩阵，同时更新当前的转换矩阵不会影响已经返回的 `DOMMatrix`.
+> [!NOTE]
+> 返回的对象不是实时的，所以更新它不会影响当前的变换矩阵，同时更新当前的变换矩阵不会影响已经返回的 `DOMMatrix`。
 
 ## 示例
 
-在以下例子，我们有两个 {{htmlelement("canvas")}} 元素。我们使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 `getTransform()` 获取矩阵。
+在以下示例中，我们有两个 {{htmlelement("canvas")}} 元素。我们使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 设置为第一个画布应用变换，并在上面绘制了一个矩形，然后通过 `getTransform()` 获取矩阵。
 
-然后我们将获取到的矩阵作为 `DOMMatrix` 参数传给 `setTransform()` 设置到第二个画布，并在上面画一个圆。
+然后我们通过将 `DOMMatrix` 对象直接传给 `setTransform()`，以直接将获取到的矩阵应用到第二个画布，并在上面绘制一个圆。
 
-#### HTML
+### HTML
 
 ```html
 <canvas width="240"></canvas> <canvas width="240"></canvas>
 ```
 
-#### CSS
+### CSS
 
 ```css
 canvas {
@@ -45,7 +52,7 @@ canvas {
 }
 ```
 
-#### JavaScript
+### JavaScript
 
 ```js
 const canvases = document.querySelectorAll("canvas");
@@ -64,7 +71,7 @@ ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
 ctx2.fill();
 ```
 
-#### 结果
+### 结果
 
 {{ EmbedLiveSample('示例', "100%", 180) }}
 
@@ -78,5 +85,5 @@ ctx2.fill();
 
 ## 参见
 
-- The interface defining this method: {{domxref("CanvasRenderingContext2D")}}
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.transform()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md
index bef3cc6122bbc1..f3136729cc80f1 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 **`CanvasRenderingContext2D.globalAlpha`** 属性指定将被绘制到 canvas 上的形状或图像的 alpha（透明度）值。
 
-> **备注：** 参见 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中[应用样式和色彩](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)这一章节。
+> [!NOTE]
+> 参见 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中[应用样式和色彩](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)这一章节。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
index 9e42d49ec3523c..51b7e44ce4e82a 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
@@ -11,7 +11,8 @@ l10n:
 
 这个属性对像素为主的游戏或其他应用很有用。放大图像时，默认的调整大小的算法会使得像素变模糊。可以将此属性设为 `false` 来保证像素的清晰度。
 
-> **备注：** 你可以使用 {{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}} 属性来调整平滑质量。
+> [!NOTE]
+> 你可以使用 {{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}} 属性来调整平滑质量。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md
index 6c25e7f0f184bc..87437e761d3cce 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 {{domxref("CanvasRenderingContext2D")}} 接口的 **`imageSmoothingQuality`** 属性，用于设置图像平滑度。
 
-> **备注：** 要使此属性生效，{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} 属性必须为 `true`。
+> [!NOTE]
+> 要使此属性生效，{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} 属性必须为 `true`。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md
index 5b5ef83b12ea31..fd179504290b24 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 **`CanvasRenderingContext2D.lineDashOffset`** 属性用于设置虚线偏移量或者称为“相位”。
 
-> **备注：** 要绘制线条，需调用 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} 方法。
+> [!NOTE]
+> 要绘制线条，需调用 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} 方法。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md
index 22c1696616d681..e800b9190b993a 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 **`CanvasRenderingContext2D.lineWidth`** 属性用于设置线宽。
 
-> **备注：** 线可以通过 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} 和 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} 方法绘制。
+> [!NOTE]
+> 线可以通过 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} 和 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} 方法绘制。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md
index 8804a979e08766..3d3af63b318083 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md
@@ -1,38 +1,26 @@
 ---
-title: CanvasRenderingContext2D.miterLimit
+title: CanvasRenderingContext2D：miterLimit 属性
 slug: Web/API/CanvasRenderingContext2D/miterLimit
+l10n:
+  sourceCommit: c7edf2734fccb185c5e93ee114ea3d5edc0177b5
 ---
 
 {{APIRef}}
 
-The **`CanvasRenderingContext2D.miterLimit`** 是 Canvas 2D API 设置斜接面限制比例的属性。当获取属性值时，会返回当前的值（默认值是`10.0` ）。当给属性赋值时，0、负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略；除此之外都会被赋予一个新值。
+Canvas 2D API 的 **`CanvasRenderingContext2D.miterLimit`** 属性用于设置斜接限制比例。
 
-参见 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。
+> [!NOTE]
+> 关于更多些斜接信息，参见 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中的[应用样式和色彩](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)。
 
-## 语法
+## 值
 
-```
-ctx.miterLimit = value;
-```
-
-### 选项
-
-- `value`
-  - : 斜接面限制比例的数字。0、负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略。
-
-## 简释
-
-```
-ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]
-```
-
-只有当 lineJoin 显示为 ">" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示
+一个数字，指定斜接限制比例，于坐标空间单位中。零、负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 值将被忽略。默认值为 `10.0`。
 
 ## 示例
 
 ### 使用 `miterLimit` 属性
 
-参见 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中的[应用样式和色彩](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#miterlimit_属性的演示示例)章节以获取更多信息。
+参见 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)的[应用样式和色彩](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#miterLimit_属性的演示示例)章节获取更多信息。
 
 ## 规范
 
@@ -44,6 +32,6 @@ ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]
 
 ## 参见
 
-- 定义了该属性的接口：{{domxref("CanvasRenderingContext2D")}}
+- 定义该属性的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.lineCap")}}
 - {{domxref("CanvasRenderingContext2D.lineJoin")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
index 597ba3b980d4ea..4b48821ceedac6 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 {{domxref("CanvasRenderingContext2D")}} 接口的 **`setLineDash()`** 方法用于在描线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。
 
-> **备注：** 如果要切换回至实线模式，将虚线列表设置为空数组。
+> [!NOTE]
+> 如果要切换回至实线模式，将虚线列表设置为空数组。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md
index 995e062cb77e2f..9edaf67abe4a86 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 **`CanvasRenderingContext2D.shadowBlur`** 属性用于描述模糊效果程度。默认值是 `0`（没有模糊）。
 
-> **备注：** 只有当 {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} 属性设置为非透明值时，阴影才会被绘制。其中的 `shadowBlur`、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。
+> [!NOTE]
+> 只有当 {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} 属性设置为非透明值时，阴影才会被绘制。其中的 `shadowBlur`、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md
index b984ebb1eeffe4..fdc10b09a92b9e 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md
@@ -1,26 +1,28 @@
 ---
-title: CanvasRenderingContext2D.shadowColor
+title: CanvasRenderingContext2D：shadowColor 属性
 slug: Web/API/CanvasRenderingContext2D/shadowColor
+l10n:
+  sourceCommit: c7edf2734fccb185c5e93ee114ea3d5edc0177b5
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.shadowColor`** 是 Canvas 2D API 描述阴影颜色的属性。
+Canvas 2D API 的 **`CanvasRenderingContext2D.shadowColor`** 属性用于描述阴影颜色。
 
-## 语法
+请注意，在进行填充时，阴影的渲染不透明度会受到 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 颜色的不透明度的影响；或在进行描边时，受到 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} 颜色的不透明度的影响。
 
-```
-ctx.shadowColor = color;
-```
+> [!NOTE]
+> 只有当 `shadowColor` 属性设置为非透明值时，阴影才会被绘制。其中的 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。
 
-- `color`
-  - : 可以转换成 CSS {{cssxref("&lt;color&gt;")}} 值的{{domxref("DOMString")}} 字符串。默认值是 fully-transparent black.
+## 值
+
+一个被解析为 [CSS](/zh-CN/docs/Web/CSS) {{cssxref("&lt;color&gt;")}} 值的字符串。默认值是完全透明的黑色。
 
 ## 示例
 
 ### 为形状添加阴影
 
-这是一段简单的代码片段，使用 `shadowColor` 属性设置阴影的颜色。注意：shadowColor 属性设置成不透明的，并且 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、 {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或者 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性不为 0，阴影才会被绘制。
+这个例子向两个正方形添加阴影；第一个是填充的，第二个是描边的。`shadowColor` 属性设置阴影的颜色，而 `shadowOffsetX` 和 `shadowOffsetY` 设置阴影相对于形状的位置。
 
 #### HTML
 
@@ -34,15 +36,15 @@ ctx.shadowColor = color;
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Shadow
+// 阴影
 ctx.shadowColor = "red";
 ctx.shadowOffsetX = 10;
 ctx.shadowOffsetY = 10;
 
-// Filled rectangle
+// 填充的矩形
 ctx.fillRect(20, 20, 100, 100);
 
-// Stroked rectangle
+// 描边的矩形
 ctx.lineWidth = 6;
 ctx.strokeRect(170, 20, 100, 100);
 ```
@@ -51,6 +53,44 @@ ctx.strokeRect(170, 20, 100, 100);
 
 {{ EmbedLiveSample('为形状添加阴影', 700, 180) }}
 
+### 半透明形状上的阴影
+
+阴影的不透明度受其父对象透明级别的影响（即使 `shadowColor` 指定了完全不透明的值）。这个例子描绘并填充了一个带有半透明颜色的矩形。
+
+#### HTML
+
+```html
+<canvas id="canvas"></canvas>
+```
+
+#### JavaScript
+
+填充矩形的阴影的 alpha 值为 `.8 * .2`，即 `.16`。描边矩形的阴影的 alpha 值为 `.8 * .6`，即 `.48`。
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+// 阴影
+ctx.shadowColor = "rgba(255, 0, 0, 0.8)";
+ctx.shadowBlur = 8;
+ctx.shadowOffsetX = 30;
+ctx.shadowOffsetY = 20;
+
+// 填充的矩形
+ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
+ctx.fillRect(10, 10, 150, 100);
+
+// 描边的矩形
+ctx.lineWidth = 10;
+ctx.strokeStyle = "rgba(0, 0, 255, 0.6)";
+ctx.strokeRect(10, 10, 150, 100);
+```
+
+#### 结果
+
+{{ EmbedLiveSample('半透明形状上的阴影', 700, 180) }}
+
 ## 规范
 
 {{Specifications}}
@@ -59,6 +99,17 @@ ctx.strokeRect(170, 20, 100, 100);
 
 {{Compat}}
 
+### WebKit/Blink 特定注意事项
+
+在基于 WebKit 和 Blink 的浏览器中，除了这个属性外，还实现了一个非标准且已废弃的方法 `ctx.setShadow()`。
+
+```js
+setShadow(width, height, blur, color, alpha);
+setShadow(width, height, blur, graylevel, alpha);
+setShadow(width, height, blur, r, g, b, a);
+setShadow(width, height, blur, c, m, y, k, a);
+```
+
 ## 参见
 
-- 接口定义，{{domxref("CanvasRenderingContext2D")}}.
+- 定义该属性的接口：{{domxref("CanvasRenderingContext2D")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
index 4eec6d2ef1552d..fe0bfcb3578c44 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的**`CanvasRenderingContext2D.shadowOffsetX`** 属性用于描述阴影水平偏移距离。
 
-> **备注：** 只有当 `shadowColor` 属性设置为非透明值时，阴影才会被绘制。其中的 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、`shadowOffsetX` 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。
+> [!NOTE]
+> 只有当 `shadowColor` 属性设置为非透明值时，阴影才会被绘制。其中的 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、`shadowOffsetX` 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
index a2621c183ea38d..7e0176e97b0cb1 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Canvas 2D API 的 **`CanvasRenderingContext2D.shadowOffsetY`** 属性用于描述阴影垂直偏移距离。
 
-> **备注：** 只有当 `shadowColor` 属性设置为非透明值时，阴影才会被绘制。其中的 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 `shadowOffsetY` 属性中至少有一个必须是非零的。
+> [!NOTE]
+> 只有当 `shadowColor` 属性设置为非透明值时，阴影才会被绘制。其中的 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 `shadowOffsetY` 属性中至少有一个必须是非零的。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md
index 5cac2ad10f634d..b253c4028a875d 100644
--- a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md
+++ b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md
@@ -17,7 +17,8 @@ Channel messaging 在这样的场景中特别有用：假如你有一个社交
 
 换个角度说，Message Channels 可以提供一个安全的通道让你在不同的浏览器上下文间传递数据。
 
-> **备注：** 要了解更多信息和思考，规范的 [Ports 作为 Web 上一个对象兼容模型的基础](https://html.spec.whatwg.org/multipage/comms.html#ports-as-the-basis-of-an-object-capability-model-on-the-web) 章节值得一读。
+> [!NOTE]
+> 要了解更多信息和思考，规范的 [Ports 作为 Web 上一个对象兼容模型的基础](https://html.spec.whatwg.org/multipage/comms.html#ports-as-the-basis-of-an-object-capability-model-on-the-web) 章节值得一读。
 
 ## 简单的例子
 
diff --git a/files/zh-cn/web/api/clipboard/index.md b/files/zh-cn/web/api/clipboard/index.md
index a7ab2b349ccd2c..d30122e697a8d3 100644
--- a/files/zh-cn/web/api/clipboard/index.md
+++ b/files/zh-cn/web/api/clipboard/index.md
@@ -13,7 +13,8 @@ slug: Web/API/Clipboard
 
 如果用户没有适时使用 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 授予 `"clipboard-read"` 或 `"clipboard-write"` 权限，调用 `Clipboard` 对象的方法不会成功。
 
-> **备注：** 实际上，现在浏览器对于访问剪贴板权限的索取各有不同，在章节的 [剪贴板可用性](#剪贴板可用性) 部分查看更多细节。
+> [!NOTE]
+> 实际上，现在浏览器对于访问剪贴板权限的索取各有不同，在章节的 [剪贴板可用性](#剪贴板可用性) 部分查看更多细节。
 
 所有 Clipboard API 的方法都是异步的；它们返回一个 {{jsxref("Promise")}} 对象，在剪贴板访问完成后被兑现。如果剪贴板访问被拒绝，promise 也会被拒绝。
 
diff --git a/files/zh-cn/web/api/clipboard/write/index.md b/files/zh-cn/web/api/clipboard/write/index.md
index 1db50a9a87abf6..d20291838b8d24 100644
--- a/files/zh-cn/web/api/clipboard/write/index.md
+++ b/files/zh-cn/web/api/clipboard/write/index.md
@@ -9,9 +9,11 @@ slug: Web/API/Clipboard/write
 
 当页面位于活动选项卡中时，[权限 API](/zh-CN/docs/Web/API/Permissions_API) 中的 `"clipboard-write"` 权限会自动授予该页面。
 
-> **备注：** 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查[浏览器兼容性](#浏览器兼容性)和[剪贴板可用性](/zh-CN/docs/Web/API/Clipboard#剪贴板可用性)以获得更多的兼容性信息。
+> [!NOTE]
+> 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查[浏览器兼容性](#浏览器兼容性)和[剪贴板可用性](/zh-CN/docs/Web/API/Clipboard#剪贴板可用性)以获得更多的兼容性信息。
 
-> **备注：** 为了与 Google Chrome 浏览器保持一致，Firefox 只允许此函数处理文本、HTML 和 PNG 数据。
+> [!NOTE]
+> 为了与 Google Chrome 浏览器保持一致，Firefox 只允许此函数处理文本、HTML 和 PNG 数据。
 
 ## 语法
 
@@ -72,7 +74,8 @@ function copyCanvasContentsToClipboard(canvas, onDone, onError) {
 }
 ```
 
-> **备注：** 一次只能传入一个剪贴板项目。
+> [!NOTE]
+> 一次只能传入一个剪贴板项目。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/clipboard/writetext/index.md b/files/zh-cn/web/api/clipboard/writetext/index.md
index 95b9b9bf9a9eb3..b5db411602d81e 100644
--- a/files/zh-cn/web/api/clipboard/writetext/index.md
+++ b/files/zh-cn/web/api/clipboard/writetext/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Clipboard/writeText
 
 {{domxref("Clipboard")}} 接口的 **`writeText()`** 方法可以写入特定字符串到操作系统的剪切板。
 
-> **备注：** 规范要求在写入剪贴板之前使用 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的 API。有关详细信息，请查看[浏览器兼容性](#浏览器兼容性)和[剪贴板可用性](/zh-CN/docs/Web/API/Clipboard#剪贴板可用性)。
+> [!NOTE]
+> 规范要求在写入剪贴板之前使用 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的 API。有关详细信息，请查看[浏览器兼容性](#浏览器兼容性)和[剪贴板可用性](/zh-CN/docs/Web/API/Clipboard#剪贴板可用性)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/console/index.md b/files/zh-cn/web/api/console/index.md
index 520d98e2c28984..6d151e4c6f264f 100644
--- a/files/zh-cn/web/api/console/index.md
+++ b/files/zh-cn/web/api/console/index.md
@@ -116,7 +116,8 @@ console.info("My first car was a", car, ". The object is:", someObject);
 | `%s`                | 打印字符串。                                                                                             |
 | `%f`                | 打印浮点数。支持格式化，比如 `console.log("Foo %.2f", 1.1)` 会输出两位小数：`Foo 1.10`                   |
 
-> **备注：** Chrome 不支持精确格式化。
+> [!NOTE]
+> Chrome 不支持精确格式化。
 
 当要替换的参数类型和预期的打印类型不同时，参数会被转换成预期的打印类型。
 
@@ -215,7 +216,8 @@ console.timeEnd("answer time");
 
 注意无论在开始还是结束的时候都会打印计时器的名字。
 
-> **备注：** 如果使用计时器来记录网络时间请求的话下面的内容很重要。计时器将会报告传输过程的整个时间，而网络面板里显示的时间只计算了请求头部所需要的时间。如果启用了响应体日志记录，那么列出的响应头部和响应体组合的时间应该与在控制台输出中看到的时间相符。
+> [!NOTE]
+> 如果使用计时器来记录网络时间请求的话下面的内容很重要。计时器将会报告传输过程的整个时间，而网络面板里显示的时间只计算了请求头部所需要的时间。如果启用了响应体日志记录，那么列出的响应头部和响应体组合的时间应该与在控制台输出中看到的时间相符。
 
 ### 堆栈跟踪
 
diff --git a/files/zh-cn/web/api/console/profileend_static/index.md b/files/zh-cn/web/api/console/profileend_static/index.md
index 84abcd6d46b027..e218cefbd2502c 100644
--- a/files/zh-cn/web/api/console/profileend_static/index.md
+++ b/files/zh-cn/web/api/console/profileend_static/index.md
@@ -5,7 +5,8 @@ slug: Web/API/console/profileend_static
 
 {{APIRef("Console API")}}{{Non-standard_header}}
 
-> **警告：** 在 console.profile() 之后立刻调用此 API 可能会导致其无法工作。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。请看 [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588)。
+> [!WARNING]
+> 在 console.profile() 之后立刻调用此 API 可能会导致其无法工作。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。请看 [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588)。
 
 profileEnd 方法会停止记录之前已经由{{domxref("console.profile()")}}开始记录的性能描述信息
 
diff --git a/files/zh-cn/web/api/console/timeend_static/index.md b/files/zh-cn/web/api/console/timeend_static/index.md
index 2b0d408bd99b5f..0a71c599dd35a3 100644
--- a/files/zh-cn/web/api/console/timeend_static/index.md
+++ b/files/zh-cn/web/api/console/timeend_static/index.md
@@ -9,7 +9,8 @@ slug: Web/API/console/timeend_static
 
 停止一个通过 `console.time()` 启动的计时器
 
-> **备注：** 该方法在使用时不会将输出的时间返回到 js，它只能用于控制台调试。请勿将该方法作为普通计时器或性能数据收集器的一部分。
+> [!NOTE]
+> 该方法在使用时不会将输出的时间返回到 js，它只能用于控制台调试。请勿将该方法作为普通计时器或性能数据收集器的一部分。
 
 有关详细信息和示例，请参阅 [Timers](/zh-CN/docs/Web/API/console#Timers)
 
diff --git a/files/zh-cn/web/api/console/warn_static/index.md b/files/zh-cn/web/api/console/warn_static/index.md
index daecb7013a1f09..1d6c46038f10a2 100644
--- a/files/zh-cn/web/api/console/warn_static/index.md
+++ b/files/zh-cn/web/api/console/warn_static/index.md
@@ -9,7 +9,8 @@ slug: Web/API/console/warn_static
 
 {{AvailableInWorkers}}
 
-> **备注：** 在火狐浏览器里，警告会有一个小感叹号图标在 Web 控制台信息前面。
+> [!NOTE]
+> 在火狐浏览器里，警告会有一个小感叹号图标在 Web 控制台信息前面。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/convolvernode/index.md b/files/zh-cn/web/api/convolvernode/index.md
index 522dddd17e6b32..085d1a76b9c4db 100644
--- a/files/zh-cn/web/api/convolvernode/index.md
+++ b/files/zh-cn/web/api/convolvernode/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ConvolverNode
 
 `ConvolverNode` 接口是一个对给定 {{domxref("AudioBuffer")}} 上执行线性卷积的 {{domxref("AudioNode")}}，一般用来做音频混响效果。每一个 `ConvolverNode` 都会有一个输入值和输出值。
 
-> **备注：** 更多线性卷积理论的相关信息，请参阅[Convolution article on Wikipedia](https://en.wikipedia.org/wiki/Convolution).
+> [!NOTE]
+> 更多线性卷积理论的相关信息，请参阅[Convolution article on Wikipedia](https://en.wikipedia.org/wiki/Convolution).
 
 <table class="properties">
   <tbody>
@@ -56,7 +57,8 @@ slug: Web/API/ConvolverNode
 
 下面的示例展示了 AudioContext 创建卷积节点的基础用法。
 
-> **备注：** 你需要找到一个脉冲反应来完成下面的示例。可查看[此处](https://codepen.io/DonKarlssonSan/pen/doVKRE) 的实例。
+> [!NOTE]
+> 你需要找到一个脉冲反应来完成下面的示例。可查看[此处](https://codepen.io/DonKarlssonSan/pen/doVKRE) 的实例。
 
 ```js
 let audioCtx = new window.AudioContext();
diff --git a/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md b/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md
index d99c4e3e3c47b7..bffdfe283a307a 100644
--- a/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md
+++ b/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`CookieChangeEvent()`** 构造函数创建一个新的 {{domxref("CookieChangeEvent")}} 对象，这是发生任何 cookie 更改时在 {{domxref("CookieStore")}} 上触发的 {{domxref("CookieStore/change_event", "change")}} 事件的事件类型。当变更事件发生时浏览器调用这个构造函数。
 
-> **备注：** 此事件构造函数通常不在生产环境的站点上使用。它主要用于测试需要此事件的实例。
+> [!NOTE]
+> 此事件构造函数通常不在生产环境的站点上使用。它主要用于测试需要此事件的实例。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/credential_management_api/index.md b/files/zh-cn/web/api/credential_management_api/index.md
index 3282db0fa3dec5..cc47736e171215 100644
--- a/files/zh-cn/web/api/credential_management_api/index.md
+++ b/files/zh-cn/web/api/credential_management_api/index.md
@@ -11,7 +11,8 @@ Credential Management API 允许网站存储和检索用户，联合账户和公
 
 此 API 允许网站与用户代理的密码系统进行交互，以便网站能够以统一的方式处理站点凭证，而用户代理则可以为他们的凭证管理提供更好的帮助。例如，用户代理在处理联合身份提供程序或使用不仅仅是用户名和密码的深奥登录机制时特别困难。为了解决这些问题，Credential Management API 为网站提供了存储和检索不同类型凭据的方法。这为用户提供了一些功能，比如查看他们曾经登录到某个站点的联合帐户，或者在会话过期且没有显式的登录流程的情况下恢复会话。
 
-> **备注：** 此 API 仅限于顶级上下文。在\<iframe>元素中调用 get() 和 store() 将无效。
+> [!NOTE]
+> 此 API 仅限于顶级上下文。在\<iframe>元素中调用 get() 和 store() 将无效。
 
 ### 子域共享凭据（Subdomain-shared credentials）
 
diff --git a/files/zh-cn/web/api/css_font_loading_api/index.md b/files/zh-cn/web/api/css_font_loading_api/index.md
index bd17601258ce6f..251d3debeb3ba7 100644
--- a/files/zh-cn/web/api/css_font_loading_api/index.md
+++ b/files/zh-cn/web/api/css_font_loading_api/index.md
@@ -7,7 +7,8 @@ slug: Web/API/CSS_Font_Loading_API
 
 CSS 字体加载 API 为你提供了动态加载字体资源的事件和接口。
 
-> **备注：** 此特性在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中可用。（你可通过 `self.fonts` 访问 {{domxref('FontFaceSet')}}）。
+> [!NOTE]
+> 此特性在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中可用。（你可通过 `self.fonts` 访问 {{domxref('FontFaceSet')}}）。
 
 ## 概念和用法
 
@@ -33,7 +34,8 @@ const font = new FontFace("myfont", "url(myfont.woff)", {
 });
 ```
 
-> **备注：** 与 `@font-face` 一样，一些描述符表示期望的字体属性并用于字体匹配，而其他描述符为设置、定义生成的字体的属性。例如，将 `style` 设置为“斜体”表示文件包含斜体字体，将由开发者指定一个符合此条件的文件。
+> [!NOTE]
+> 与 `@font-face` 一样，一些描述符表示期望的字体属性并用于字体匹配，而其他描述符为设置、定义生成的字体的属性。例如，将 `style` 设置为“斜体”表示文件包含斜体字体，将由开发者指定一个符合此条件的文件。
 
 对于*二进制*字体，如果字体定义有效并且成功加载会把 {{domxref('FontFace.status')}} 设置为 `loaded`，否则会设置为 `failed`。对于 URL 字体，字体有效，且未被加载时 `FontFace.status` 会被设置为 `unloaded`，若字体无效则设置为 `failed`。
 
diff --git a/files/zh-cn/web/api/cssstylesheet/insertrule/index.md b/files/zh-cn/web/api/cssstylesheet/insertrule/index.md
index a1d2ee1fa1d26e..b99e6036a443dd 100644
--- a/files/zh-cn/web/api/cssstylesheet/insertrule/index.md
+++ b/files/zh-cn/web/api/cssstylesheet/insertrule/index.md
@@ -7,7 +7,8 @@ slug: Web/API/CSSStyleSheet/insertRule
 
 **`CSSStyleSheet.insertRule()`** 方法用来给当前样式表插入新的样式规则（[CSS rule](/zh-CN/docs/Web/API/CSSRule)），并且包含一些[限制](#限制)。
 
-> **备注：** 尽管 `insertRule()` 是 {{domxref("CSSStyleSheet")}} 的一个方法，但它实际插入的地方是 `{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules` 的内部 {{domxref("CSSRuleList")}}。
+> [!NOTE]
+> 尽管 `insertRule()` 是 {{domxref("CSSStyleSheet")}} 的一个方法，但它实际插入的地方是 `{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules` 的内部 {{domxref("CSSRuleList")}}。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/customelementregistry/define/index.md b/files/zh-cn/web/api/customelementregistry/define/index.md
index 4cc113b11f8528..58560b342eb577 100644
--- a/files/zh-cn/web/api/customelementregistry/define/index.md
+++ b/files/zh-cn/web/api/customelementregistry/define/index.md
@@ -124,7 +124,8 @@ customElements.define("popup-info", PopUpInfo);
                                     numbers on the back of your card."></popup-info>
 ```
 
-> **备注：** 自主自定义元素的构造函数必须扩展{{domxref("HTMLElement")}}。
+> [!NOTE]
+> 自主自定义元素的构造函数必须扩展{{domxref("HTMLElement")}}。
 
 ### 自定义内置元素
 
diff --git a/files/zh-cn/web/api/customevent/index.md b/files/zh-cn/web/api/customevent/index.md
index f1c94ed95d65d0..cafbf5a5448df7 100644
--- a/files/zh-cn/web/api/customevent/index.md
+++ b/files/zh-cn/web/api/customevent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`CustomEvent`** 接口表示由应用程序为任何目的初始化的事件。
 
-> **备注：** 如果尝试在 Web 扩展内容脚本和网页脚本之间进行通信时，`detail` 属性的非字符串值在 Firefox 中会抛出“Permission denied to access property”的错误。为了避免这个问题，可以克隆对象。请参见[与页面脚本共享对象](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts)以获取更多信息。
+> [!NOTE]
+> 如果尝试在 Web 扩展内容脚本和网页脚本之间进行通信时，`detail` 属性的非字符串值在 Firefox 中会抛出“Permission denied to access property”的错误。为了避免这个问题，可以克隆对象。请参见[与页面脚本共享对象](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts)以获取更多信息。
 
 {{InheritanceDiagram}}
 
diff --git a/files/zh-cn/web/api/eventtarget/addeventlistener/index.md b/files/zh-cn/web/api/eventtarget/addeventlistener/index.md
index cdbf449ec5d616..cbe870802ca104 100644
--- a/files/zh-cn/web/api/eventtarget/addeventlistener/index.md
+++ b/files/zh-cn/web/api/eventtarget/addeventlistener/index.md
@@ -15,7 +15,8 @@ slug: Web/API/EventTarget/addEventListener
 
 `addEventListener()` 的工作原理是将实现 {{domxref("EventListener")}} 的函数或对象添加到调用它的 {{domxref("EventTarget")}} 上的指定事件类型的事件侦听器列表中。如果要绑定的函数或对象已经被添加到列表中，该函数或对象不会被再次添加。
 
-> **备注：** 如果先前向事件侦听器列表中添加过一个匿名函数，并且在之后的代码中调用 `addEventListener` 来添加一个功能完全相同的匿名函数，那么之后的这个匿名函数*也会*被添加到列表中。
+> [!NOTE]
+> 如果先前向事件侦听器列表中添加过一个匿名函数，并且在之后的代码中调用 `addEventListener` 来添加一个功能完全相同的匿名函数，那么之后的这个匿名函数*也会*被添加到列表中。
 >
 > 实际上，即使使用*完全相同*的代码来定义一个匿名函数，这两个函数仍然存在区别，**在循环中也是如此**。在使用该方法的情况下，匿名函数的重复定义会带来许多麻烦，详见下文中的[内存问题](#内存问题)一节。
 
@@ -52,7 +53,8 @@ addEventListener(type, listener, useCapture);
 
   - : 一个布尔值，表示在 DOM 树中注册了 `listener` 的元素，是否要先于它下面的 `EventTarget` 调用该 `listener`。当 useCapture（设为 true）时，沿着 DOM 树向上冒泡的事件不会触发 listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 [DOM Level 3 事件](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)及 [JavaScript 事件顺序](https://www.quirksmode.org/js/events_order.html#link4)文档。如果没有指定，`useCapture` 默认为 `false`。
 
-    > **备注：** 对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。捕获阶段的事件监听器会在任何非捕获阶段的事件监听器之前被调用。
+    > [!NOTE]
+    > 对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。捕获阶段的事件监听器会在任何非捕获阶段的事件监听器之前被调用。
 
 - `wantsUntrusted` {{optional_inline}} {{Non-standard_inline}}
   - : 如果为 `true`，则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko（{{glossary("chrome")}} 的默认值为 `false`，其他常规网页的默认值为 `true`），主要用于附加组件的代码和浏览器本身。
@@ -639,13 +641,15 @@ myButton.addEventListener("click", () => {
 console.log(someString); // 预期输出：'Data'（不可能是 'Data Again'）
 ```
 
-> **备注：** 虽然内部作用域可以访问到外部 `const` 和 `let` 所声明的变量，但你在事件监听器内对变量所做的任何修改都不能在外部作用域内体现。为什么呢？因为在事件监听器被执行时，其外部作用域已经执行完毕了。
+> [!NOTE]
+> 虽然内部作用域可以访问到外部 `const` 和 `let` 所声明的变量，但你在事件监听器内对变量所做的任何修改都不能在外部作用域内体现。为什么呢？因为在事件监听器被执行时，其外部作用域已经执行完毕了。
 
 #### 使用对象进行数据交换
 
 与 JavaScript 中的大部分函数不同，一个对象只要有被引用计数，它就会一直存在于内存之中。并且，对象可以拥有自己的属性，属性又可以被引用形式传递，使得它有潜力成为在作用域间传值的候选。让我们来试试。
 
-> **备注：** 实际上，在 JavaScript 中，函数也是对象的一种。（因此，函数也可以有自己的对象，甚至可以在其执行结束后依旧存在于内存中，只要将其分配到一个永久存在于内存中的变量即可。）
+> [!NOTE]
+> 实际上，在 JavaScript 中，函数也是对象的一种。（因此，函数也可以有自己的对象，甚至可以在其执行结束后依旧存在于内存中，只要将其分配到一个永久存在于内存中的变量即可。）
 
 因为只需一个变量引用就可以使对象的属性将数据存储在内存之中，你可以使用它与事件监听器进行数据交换，并且更改后的数据会被保留。请看下面这个例子：
 
@@ -669,9 +673,11 @@ setInterval(() => {
 
 在这一例子中，虽然事件监听器和定时函数的作用域都在 `someObject.aProperty` 的值变更前执行完毕，但 `someObject` 仍被事件监听器和定时函数所*引用*而存在于内存中，这两个函数依然能访问到同样的数据（也就是说，当其中一方改变了数据，另一方可以对这一改变做出响应）。
 
-> **备注：** 对象的是以引用方式存储于变量中的，也即变量中存储的只是对象的内存地址而已。在其他方面上，这也意味着“存储”这个对象的变量可以对其他引用（或“存储”）同一个对象的变量产生影响。当两个变量引用同一对象时（比如 `let a = b = {aProperty: 'Yeah'};`），仅对其中一个变量进行更改仍然会影响到另一个变量。
+> [!NOTE]
+> 对象的是以引用方式存储于变量中的，也即变量中存储的只是对象的内存地址而已。在其他方面上，这也意味着“存储”这个对象的变量可以对其他引用（或“存储”）同一个对象的变量产生影响。当两个变量引用同一对象时（比如 `let a = b = {aProperty: 'Yeah'};`），仅对其中一个变量进行更改仍然会影响到另一个变量。
 
-> **备注：** 基于对象存储于变量中的“引用”逻辑，你可以在一个函数执行完毕后返回一个对象以使其“保活”（使其保留在内存中且不丢失数据）。
+> [!NOTE]
+> 基于对象存储于变量中的“引用”逻辑，你可以在一个函数执行完毕后返回一个对象以使其“保活”（使其保留在内存中且不丢失数据）。
 
 ### 内存问题
 
@@ -737,7 +743,8 @@ window.addEventListener(
 
 为了避免这一问题，大部分浏览器（Safari 和 Internet Explorer 除外）将文档级节点 {{domxref("Window")}}、{{domxref("Document")}} 和 {{domxref("Document.body")}} 上的 {{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}} 和 {{domxref("Element/touchmove_event", "touchmove")}} 事件的 `passive` 默认值更改为 `true`。如此，事件监听器便不能[取消事件](/zh-CN/docs/Web/API/Event/preventDefault)，也不会在用户滚动页面时阻止页面呈现。
 
-> **备注：** 若你想要了解哪些浏览器（或特定浏览器的哪一个版本）具体实现了上述功能，请参见下方的浏览器兼容性表。
+> [!NOTE]
+> 若你想要了解哪些浏览器（或特定浏览器的哪一个版本）具体实现了上述功能，请参见下方的浏览器兼容性表。
 
 因此，当你想要覆盖这一行为并确认 `passive` 在所有浏览器中都被设为 `false`，你必须显式地将其设为 `false`，而不是依赖浏览器的默认设置。
 
diff --git a/files/zh-cn/web/api/eventtarget/dispatchevent/index.md b/files/zh-cn/web/api/eventtarget/dispatchevent/index.md
index db780d128584ee..92b07cf93317c6 100644
--- a/files/zh-cn/web/api/eventtarget/dispatchevent/index.md
+++ b/files/zh-cn/web/api/eventtarget/dispatchevent/index.md
@@ -9,7 +9,8 @@ slug: Web/API/EventTarget/dispatchEvent
 
 调用 `dispatchEvent()` 是*触发一个事件*的最后一步。被触发的事件应事先通过 {{domxref("Event/Event", "Event()")}} 构造函数创建并初始化完毕。
 
-> **备注：** 在调用此方法时，{{domxref("Event.target")}} 属性默认为当前的 `EventTarget`。
+> [!NOTE]
+> 在调用此方法时，{{domxref("Event.target")}} 属性默认为当前的 `EventTarget`。
 
 和经由浏览器触发，并通过[事件循环](/zh-CN/docs/Web/JavaScript/Event_loop)异步调用事件处理程序的“原生”事件不同，`dispatchEvent()` 会*同步*调用事件处理函数。在 `dispatchEvent()` 返回之前，所有监听该事件的事件处理程序将在代码继续前执行并返回。
 
@@ -33,7 +34,8 @@ dispatchEvent(event)
 - `InvalidStateError` {{domxref("DomException")}}
   - : 若事件未在初始化时指定类型（`type` 属性值），则抛出此异常。
 
-> **警告：** 由事件处理程序抛出的异常视为未被捕获的异常。事件处理程序运行在一个嵌套的调用栈中；在其处理完毕前将阻塞 `caller`，但异常却不会冒泡至 `caller`。
+> [!WARNING]
+> 由事件处理程序抛出的异常视为未被捕获的异常。事件处理程序运行在一个嵌套的调用栈中；在其处理完毕前将阻塞 `caller`，但异常却不会冒泡至 `caller`。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/eventtarget/eventtarget/index.md b/files/zh-cn/web/api/eventtarget/eventtarget/index.md
index be98d03444a7ba..3e8883d173219c 100644
--- a/files/zh-cn/web/api/eventtarget/eventtarget/index.md
+++ b/files/zh-cn/web/api/eventtarget/eventtarget/index.md
@@ -7,7 +7,8 @@ slug: Web/API/EventTarget/EventTarget
 
 **`EventTarget()`** 构造方法将会创建一个新的 {{domxref("EventTarget")}} 对象实例。
 
-> **备注：** 需要显式调用这一构造函数的情况极为少见。在大多数情况下，这一函数是在继承了 {{domxref("EventTarget")}} 类的构造函数中被 [`super`](/zh-CN/docs/Web/JavaScript/Reference/Operators/super) 所调用的。
+> [!NOTE]
+> 需要显式调用这一构造函数的情况极为少见。在大多数情况下，这一函数是在继承了 {{domxref("EventTarget")}} 类的构造函数中被 [`super`](/zh-CN/docs/Web/JavaScript/Reference/Operators/super) 所调用的。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/eventtarget/removeeventlistener/index.md b/files/zh-cn/web/api/eventtarget/removeeventlistener/index.md
index 72670d3950cc93..0e43fc53da5fe6 100644
--- a/files/zh-cn/web/api/eventtarget/removeeventlistener/index.md
+++ b/files/zh-cn/web/api/eventtarget/removeeventlistener/index.md
@@ -11,7 +11,8 @@ slug: Web/API/EventTarget/removeEventListener
 
 如果一个 {{domxref("EventTarget")}} 上的[事件监听器](/zh-CN/docs/Web/API/EventTarget/addEventListener#事件监听回调)在另一监听器处理该事件时被移除，那么它将不能被事件触发。不过，它可以被重新绑定。
 
-> **警告：** 如果同一个事件监听器分别为“事件捕获（`capture` 为 `true`）”和“事件冒泡（`capture` 为 `false`）”注册了一次，这两个版本的监听器需要分别移除。移除捕获监听器不会影响非捕获版本的相同监听器，反之亦然。
+> [!WARNING]
+> 如果同一个事件监听器分别为“事件捕获（`capture` 为 `true`）”和“事件冒泡（`capture` 为 `false`）”注册了一次，这两个版本的监听器需要分别移除。移除捕获监听器不会影响非捕获版本的相同监听器，反之亦然。
 
 还有一种移除事件监听器的方法：可以向 {{domxref("EventTarget/addEventListener()", "addEventListener()")}} 传入一个 {{domxref("AbortSignal")}}，稍后再调用拥有该事件的控制器上的 {{domxref("AbortController/abort()", "abort()")}} 方法即可。
 
diff --git a/files/zh-cn/web/api/ext_float_blend/index.md b/files/zh-cn/web/api/ext_float_blend/index.md
index 7a64841fa9fcff..38a752068d4168 100644
--- a/files/zh-cn/web/api/ext_float_blend/index.md
+++ b/files/zh-cn/web/api/ext_float_blend/index.md
@@ -9,7 +9,8 @@ slug: Web/API/EXT_float_blend
 
 若要查询该扩展是否存在，可以用方法：{{domxref("WebGLRenderingContext.getExtension()")}}。更多信息可以参考 [WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial) 中的 [Using Extensions](/zh-CN/docs/Web/API/WebGL_API/Using_Extensions)。
 
-> **备注：** 该扩展在 {{domxref("WebGLRenderingContext", "WebGL1")}} 和{{domxref("WebGL2RenderingContext", "WebGL2")}} 上下文中均存在。但是，要使用它，你需要启用对 32 位浮点绘制缓冲区的使用{{domxref("WEBGL_color_buffer_float")}}（for WebGL1）或 {{domxref("EXT_color_buffer_float")}}（WebGL2）。通过启用 32 位浮点缓冲区扩展，将自动启用`EXT_float_blend`。
+> [!NOTE]
+> 该扩展在 {{domxref("WebGLRenderingContext", "WebGL1")}} 和{{domxref("WebGL2RenderingContext", "WebGL2")}} 上下文中均存在。但是，要使用它，你需要启用对 32 位浮点绘制缓冲区的使用{{domxref("WEBGL_color_buffer_float")}}（for WebGL1）或 {{domxref("EXT_color_buffer_float")}}（WebGL2）。通过启用 32 位浮点缓冲区扩展，将自动启用`EXT_float_blend`。
 
 该组件启用后，使用 32 位浮点数混合方式绘制，调用 {{domxref("WebGLRenderingContext.drawArrays", "drawArrays()")}} 或 {{domxref("WebGLRenderingContext.drawElements", "drawElements()")}} 时，将不再产生 `INVALID_OPERATION` 异常。
 
diff --git a/files/zh-cn/web/api/extendableevent/index.md b/files/zh-cn/web/api/extendableevent/index.md
index cfaca61c9adb96..0f15d7ec74a785 100644
--- a/files/zh-cn/web/api/extendableevent/index.md
+++ b/files/zh-cn/web/api/extendableevent/index.md
@@ -7,13 +7,15 @@ slug: Web/API/ExtendableEvent
 
 作为 service worker 生命周期的一部分，**`ExtendableEvent`** 接口延长了在全局范围上 [`install`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/install_event) 和 [`activate`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/activate_event) 事件的生命周期。这样可以确保在升级数据库架构并删除过时的 caches 之前，不会调度任何函数事件（如{{domxref("FetchEvent")}}）。如果在`ExtendableEvent`处理程序之外调用{{domxref("ExtendableEvent.waitUntil","waitUntil()")}}，浏览器应该抛出一个`InvalidStateError`；还要注意，多个调用将堆积起来，结果 promises 将添加到[extend lifetime promises](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises).
 
-> **备注：** 上述段落中描述的行为在 firefox 43 中得到了修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
+> [!NOTE]
+> 上述段落中描述的行为在 firefox 43 中得到了修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
 
 此接口继承自{{domxref("Event")}}接口。
 
 {{InheritanceDiagram(700, 60, 20)}}
 
-> **备注：** 只有当全局范围是 {{domxref("ServiceWorkerGlobalScope")}} 时，此接口才可用。当它是一个 {{domxref("Window")}} 或其他类型 worker 的作用域时，它不可用。
+> [!NOTE]
+> 只有当全局范围是 {{domxref("ServiceWorkerGlobalScope")}} 时，此接口才可用。当它是一个 {{domxref("Window")}} 或其他类型 worker 的作用域时，它不可用。
 
 ## 构造函数
 
@@ -37,7 +39,8 @@ _从他的父辈继承，{{domxref("Event")}}。_
 
 代码段还显示了对 service worker 使用的缓存进行版本控制的最佳实践。虽然在这个例子中只有一个缓存，但是相同的方法可以用于多个缓存。它将缓存的速记标识符映射到特定的、版本化的缓存名称。
 
-> **备注：** 在 chrome 中，日志记录语句通过 chrome://service worker internals 访问的相关服务工作者的“inspect”接口可见。
+> [!NOTE]
+> 在 chrome 中，日志记录语句通过 chrome://service worker internals 访问的相关服务工作者的“inspect”接口可见。
 
 ```js
 var CACHE_VERSION = 1;
@@ -78,7 +81,8 @@ self.addEventListener("install", function (event) {
 });
 ```
 
-> **备注：** 在获取资源时，如果有可能资源是由不支持 [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 的服务器提供的，那么使用 `{mode: 'no-cors'}` 非常重要。在本例中， [www.chromium.org](http://www.chromium.org) 不支持 CORS。
+> [!NOTE]
+> 在获取资源时，如果有可能资源是由不支持 [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 的服务器提供的，那么使用 `{mode: 'no-cors'}` 非常重要。在本例中， [www.chromium.org](http://www.chromium.org) 不支持 CORS。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/extendableevent/waituntil/index.md b/files/zh-cn/web/api/extendableevent/waituntil/index.md
index 56c41ecd4c76d1..872c44e6f74b84 100644
--- a/files/zh-cn/web/api/extendableevent/waituntil/index.md
+++ b/files/zh-cn/web/api/extendableevent/waituntil/index.md
@@ -13,7 +13,8 @@ slug: Web/API/ExtendableEvent/waitUntil
 
 `waitUntil()` 方法最初必须在事件回调里调用，在此之后，方法可以被调用多次，直至所有传入的 promise 被解决。
 
-> **备注：** 上述段落描述的行为已经在 Firefox 43 中被修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
+> [!NOTE]
+> 上述段落描述的行为已经在 Firefox 43 中被修复（参见 [Firefox bug 1180274](https://bugzil.la/1180274)）。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/fetch_api/index.md b/files/zh-cn/web/api/fetch_api/index.md
index 79df88d939cee7..98b39e480a5c54 100644
--- a/files/zh-cn/web/api/fetch_api/index.md
+++ b/files/zh-cn/web/api/fetch_api/index.md
@@ -33,7 +33,8 @@ Fetch 提供了对 {{domxref("Request")}} 和 {{domxref("Response")}}（以及
   - [2018 年 4 月](https://github.com/whatwg/fetch/pull/585)，该规范将默认的 credentials 策略更改为 `'same-origin'`。以下浏览器发布了过时的原生 fetch，并在以下版本中更新：Firefox 61.0b13、Safari 12、Chrome 68。
   - 如果你的目标是这些旧的浏览器，请务必在所有可能接受 cookie/用户登录状态影响的 API 请求中包含拥有 `credentials: 'same-origin'` 的 [init 对象](/zh-CN/docs/Web/API/fetch#参数)。
 
-> **备注：** 更多关于 Fetch API 的用法，参考[使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)。
+> [!NOTE]
+> 更多关于 Fetch API 的用法，参考[使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)。
 
 ### 中止 fetch
 
diff --git a/files/zh-cn/web/api/fetch_api/using_fetch/index.md b/files/zh-cn/web/api/fetch_api/using_fetch/index.md
index bfb79e1213d69c..384a51c34d4f49 100644
--- a/files/zh-cn/web/api/fetch_api/using_fetch/index.md
+++ b/files/zh-cn/web/api/fetch_api/using_fetch/index.md
@@ -78,9 +78,11 @@ fetch("https://example.com", {
 });
 ```
 
-> **备注：** 当请求使用 `credentials: 'include'` 时，响应的 `Access-Control-Allow-Origin` 不能使用通配符 "`*`"。在这种情况下，`Access-Control-Allow-Origin` 必须是当前请求的源，在使用 CORS Unblock 插件的情况下请求仍会失败。
+> [!NOTE]
+> 当请求使用 `credentials: 'include'` 时，响应的 `Access-Control-Allow-Origin` 不能使用通配符 "`*`"。在这种情况下，`Access-Control-Allow-Origin` 必须是当前请求的源，在使用 CORS Unblock 插件的情况下请求仍会失败。
 
-> **备注：** 无论怎么设置，浏览器都不应在 _预检请求_ 中发送凭据。了解更多：[跨域资源共享 > 附带身份凭证的请求](/zh-CN/docs/Web/HTTP/CORS#附带身份凭证的请求)
+> [!NOTE]
+> 无论怎么设置，浏览器都不应在 _预检请求_ 中发送凭据。了解更多：[跨域资源共享 > 附带身份凭证的请求](/zh-CN/docs/Web/HTTP/CORS#附带身份凭证的请求)
 
 如果你只想在请求 URL 与调用脚本位于同一起源处时发送凭据，请添加 `credentials: 'same-origin'`。
 
@@ -349,7 +351,8 @@ fetch(myRequest)
 - `response`：从 response 中获得的 headers（{{domxref("Response.headers")}}）只读。
 - `immutable`：在 ServiceWorkers 中最常用的，所有的 headers 都只读。
 
-> **备注：** 你不可以添加或者修改一个 guard 属性是 `request` 的 Request Header 的 `Content-Length` 属性。同样地，插入 `Set-Cookie` 属性到一个 response header 是不允许的，因此，Service Worker 中，不能给合成的 Response 设置 cookie。
+> [!NOTE]
+> 你不可以添加或者修改一个 guard 属性是 `request` 的 Request Header 的 `Content-Length` 属性。同样地，插入 `Set-Cookie` 属性到一个 response header 是不允许的，因此，Service Worker 中，不能给合成的 Response 设置 cookie。
 
 ## Response 对象
 
@@ -378,7 +381,8 @@ addEventListener("fetch", (event) => {
 
 {{domxref("Response.Response","Response()")}} 构造方法接受两个可选参数——response 的 body 和一个初始化对象（与{{domxref("Request.Request","Request()")}} 所接受的 init 参数类似）。
 
-> **备注：** 静态方法 {{domxref("Response.error","error()")}} 只是返回了错误的 response。与此类似地，{{domxref("Response.redirect","redirect()")}} 只是返回了一个可以重定向至某 URL 的 response。这些也只与 Service Worker 有关。
+> [!NOTE]
+> 静态方法 {{domxref("Response.error","error()")}} 只是返回了错误的 response。与此类似地，{{domxref("Response.redirect","redirect()")}} 只是返回了一个可以重定向至某 URL 的 response。这些也只与 Service Worker 有关。
 
 ## Body
 
diff --git a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md
index 4100cd7ea48b35..8d9a4d26b50f73 100644
--- a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md
@@ -383,7 +383,8 @@ function handleFiles() {
 
 此示例展示了如何让用户将文件（例如使用上一个示例选择的图像）上传到服务器。
 
-> **备注：** 通常最好使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 而不是 {{domxref("XMLHttpRequest")}} 发起 HTTP 请求。但是，在这种情况下，我们想向用户显示上传进度，而 Fetch API 仍然不支持此特性，因此示例使用 `XMLHttpRequest`。使用 Fetch API 跟踪进度通知标准化的工作位于 <https://github.com/whatwg/fetch/issues/607>。
+> [!NOTE]
+> 通常最好使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 而不是 {{domxref("XMLHttpRequest")}} 发起 HTTP 请求。但是，在这种情况下，我们想向用户显示上传进度，而 Fetch API 仍然不支持此特性，因此示例使用 `XMLHttpRequest`。使用 Fetch API 跟踪进度通知标准化的工作位于 <https://github.com/whatwg/fetch/issues/607>。
 
 ### 创建上传任务
 
diff --git a/files/zh-cn/web/api/file_system_api/index.md b/files/zh-cn/web/api/file_system_api/index.md
index 5c51ba3dfcaa9d..d75d1aeb0686fc 100644
--- a/files/zh-cn/web/api/file_system_api/index.md
+++ b/files/zh-cn/web/api/file_system_api/index.md
@@ -24,9 +24,11 @@ l10n:
 
 每种句柄都提供了其独有的功能，取决于你使用的种类，会有些许差异（详见[接口](#接口)部分）。在获得句柄后，你便可以访问文件的数据或是被选中的目录的信息（包含子目录）。此 API 开辟了 web 此前一直缺乏的潜在功能。但不论如何，安全性是设计 API 时的首要考量，除非用户明确授权，否则就不允许访问文件和目录的数据（注意：[源私有文件系统](#源私有文件系统)并非如此，因为其对用户不可见）。
 
-> **备注：** 使用此 API 的特性时可能会抛出的各种异常已在规范定义的相关页面中列出。然而，API 与底层操作系统的交互使得实际情况更加复杂。这里提供一篇关于[在规范中列出错误对应表](https://github.com/whatwg/fs/issues/57)的提议，其中包含了一些有用的信息。
+> [!NOTE]
+> 使用此 API 的特性时可能会抛出的各种异常已在规范定义的相关页面中列出。然而，API 与底层操作系统的交互使得实际情况更加复杂。这里提供一篇关于[在规范中列出错误对应表](https://github.com/whatwg/fs/issues/57)的提议，其中包含了一些有用的信息。
 
-> **备注：** 基于 {{domxref("FileSystemHandle")}} 的对象能够被序列化存储至 {{domxref("IndexedDB API", "IndexedDB", "", "nocode")}} 数据库实例中，也可以通过 {{domxref("window.postMessage", "postMessage()")}} 移交。
+> [!NOTE]
+> 基于 {{domxref("FileSystemHandle")}} 的对象能够被序列化存储至 {{domxref("IndexedDB API", "IndexedDB", "", "nocode")}} 数据库实例中，也可以通过 {{domxref("window.postMessage", "postMessage()")}} 移交。
 
 ### 源私有文件系统
 
@@ -223,7 +225,8 @@ onmessage = async (e) => {
 };
 ```
 
-> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle")}} 的 {{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被不合逻辑地指定为异步方法。此问题现已被[修正](https://github.com/whatwg/fs/issues/7)，但某些浏览器依然支持异步版本。
+> [!NOTE]
+> 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle")}} 的 {{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被不合逻辑地指定为异步方法。此问题现已被[修正](https://github.com/whatwg/fs/issues/7)，但某些浏览器依然支持异步版本。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md b/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md
index 2cbf6d63779891..5628ce6b4c46f6 100644
--- a/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md
+++ b/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md
@@ -41,7 +41,8 @@ OPFS 提供了页面所属源私有的、对用户不可见的、底层的逐字
 
 在主线程中访问 OPFS 时，你要使用基于 {{jsxref("Promise")}} 的异步 API。你可以调用代表 OPFS 根目录（以及其中被创建的子目录）的 {{domxref("FileSystemDirectoryHandle")}} 对象上的 {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} 和 {{domxref("FileSystemDirectoryHandle.getDirectoryHandle()")}} 方法来分别访问文件（{{domxref("FileSystemFileHandle")}}）和目录（{{domxref("FileSystemDirectoryHandle")}}）。
 
-> **备注：** 在上述方法中传入 `{ create: true }` 会在文件或文件夹不存在时创建相应的文件或文件夹。
+> [!NOTE]
+> 在上述方法中传入 `{ create: true }` 会在文件或文件夹不存在时创建相应的文件或文件夹。
 
 ```js
 // 创建层级结构的文件和文件夹
@@ -122,7 +123,8 @@ Web Worker 不会阻塞主线程，这意味着你可以在其上下文中使用
 
 你可以通过在常规的 {{domxref("FileSystemFileHandle")}} 上调用 {{domxref("FileSystemFileHandle.createSyncAccessHandle()")}} 来同步地处理文件：
 
-> **备注：** 虽然 `createSyncAccessHandle()` 的名称带有“Sync（同步）”字眼，但是这个方法本身是异步的。
+> [!NOTE]
+> 虽然 `createSyncAccessHandle()` 的名称带有“Sync（同步）”字眼，但是这个方法本身是异步的。
 
 ```js
 const opfsRoot = await navigator.storage.getDirectory();
diff --git a/files/zh-cn/web/api/filelist/index.md b/files/zh-cn/web/api/filelist/index.md
index 4abb3f5f5490db..a8823ac45d943a 100644
--- a/files/zh-cn/web/api/filelist/index.md
+++ b/files/zh-cn/web/api/filelist/index.md
@@ -21,7 +21,8 @@ l10n:
 const file = document.getElementById("fileItem").files[0];
 ```
 
-> **备注：** 此接口的出现是[对创建不可修改列表的一次尝试](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)，并且仅是出于避免破坏已经在使用它的代码而继续受到支持。现代 API 使用围绕 ECMAScript 数组类型的类型，因此你可以像 ECMAScript 数组一样对待它们，同时对其使用施加额外的语义（例如使其项目只读）。
+> [!NOTE]
+> 此接口的出现是[对创建不可修改列表的一次尝试](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)，并且仅是出于避免破坏已经在使用它的代码而继续受到支持。现代 API 使用围绕 ECMAScript 数组类型的类型，因此你可以像 ECMAScript 数组一样对待它们，同时对其使用施加额外的语义（例如使其项目只读）。
 
 ## 实例属性
 
diff --git a/files/zh-cn/web/api/filereader/readasbinarystring/index.md b/files/zh-cn/web/api/filereader/readasbinarystring/index.md
index c2caaae16d737b..f40eda5fcff1dd 100644
--- a/files/zh-cn/web/api/filereader/readasbinarystring/index.md
+++ b/files/zh-cn/web/api/filereader/readasbinarystring/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{APIRef("File API")}}{{AvailableInWorkers}}{{Deprecated_Header}}
 
-> **备注：** 此方法已弃用，取而代之的是 {{DOMxRef("FileReader.readAsArrayBuffer","readAsArrayBuffer()")}}。
+> [!NOTE]
+> 此方法已弃用，取而代之的是 {{DOMxRef("FileReader.readAsArrayBuffer","readAsArrayBuffer()")}}。
 
 {{domxref("FileReader")}} 接口的 **`readAsBinaryString()`** 方法用于开始读取指定 {{domxref("Blob")}} 或 {{domxref("File")}} 对象的内容。当读操作完成后，{{domxref("FileReader.readyState","readyState")}} 属性变为 `DONE`，并且 {{domxref("FileReader/loadend_event", "loadend")}} 事件被触发。此时，{{domxref("FileReader.result","result")}} 属性包含来自的原始二进制数据文件。
 
diff --git a/files/zh-cn/web/api/filereader/readasdataurl/index.md b/files/zh-cn/web/api/filereader/readasdataurl/index.md
index 297ee631d9fb1f..9d671b8fe93011 100644
--- a/files/zh-cn/web/api/filereader/readasdataurl/index.md
+++ b/files/zh-cn/web/api/filereader/readasdataurl/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("FileReader")}} 接口的 **`readAsDataURL()`** 方法用于读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象的内容。当读操作完成时，{{domxref("FileReader.readyState","readyState")}} 属性变为 `DONE`，并触发 {{domxref("FileReader/loadend_event", "loadend")}} 事件。此时，{{domxref("FileReader.result","result")}} 属性包含作为 [data: URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) 的数据，将文件的数据表示为 base64 编码字符串。
 
-> **备注：** 如果不先删除 Base64 编码数据前面的 Data-URL 声明，则 blob 的 {{domxref("FileReader.result","result")}} 无法直接解码为 Base64。要仅检索 Base64 编码的字符串，请首先从结果中删除 `data:*/*;base64,`。
+> [!NOTE]
+> 如果不先删除 Base64 编码数据前面的 Data-URL 声明，则 blob 的 {{domxref("FileReader.result","result")}} 无法直接解码为 Base64。要仅检索 Base64 编码的字符串，请首先从结果中删除 `data:*/*;base64,`。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/filereader/readastext/index.md b/files/zh-cn/web/api/filereader/readastext/index.md
index 19904d63534ff4..c3fdb02a71cfc3 100644
--- a/files/zh-cn/web/api/filereader/readastext/index.md
+++ b/files/zh-cn/web/api/filereader/readastext/index.md
@@ -11,7 +11,8 @@ l10n:
 
 > **备注：** {{domxref("Blob.text()")}} 方法是一种较新的基于 Promise 的 API，用于将文件读取为文本。
 
-> **备注：** 该方法将整个文件的内容加载到内存中，不适合大文件。对于大文件，首选使用 {{domxref("FileReader.readAsArrayBuffer", "readAsArrayBuffer()")}}。
+> [!NOTE]
+> 该方法将整个文件的内容加载到内存中，不适合大文件。对于大文件，首选使用 {{domxref("FileReader.readAsArrayBuffer", "readAsArrayBuffer()")}}。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/filereadersync/filereadersync/index.md b/files/zh-cn/web/api/filereadersync/filereadersync/index.md
index fb285af108f29b..d12c078843cc9d 100644
--- a/files/zh-cn/web/api/filereadersync/filereadersync/index.md
+++ b/files/zh-cn/web/api/filereadersync/filereadersync/index.md
@@ -30,7 +30,8 @@ function readFile(blob) {
 }
 ```
 
-> **备注：** 此代码段必须在 {{domxref("Worker")}} 内部使用，因为同步接口不能在主线程上使用。
+> [!NOTE]
+> 此代码段必须在 {{domxref("Worker")}} 内部使用，因为同步接口不能在主线程上使用。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md b/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md
index 5f7ec95b34bf28..aedb8012f63891 100644
--- a/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md
+++ b/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{APIRef("File API")}}{{deprecated_header}} {{AvailableInWorkers("worker_except_service")}}
 
-> **备注：** 此方法已弃用，取而代之的是 {{DOMxRef("FileReaderSync.readAsArrayBuffer","readAsArrayBuffer()")}}。
+> [!NOTE]
+> 此方法已弃用，取而代之的是 {{DOMxRef("FileReaderSync.readAsArrayBuffer","readAsArrayBuffer()")}}。
 
 {{DOMxRef("FileReaderSync")}} 接口的 **`readAsBinaryString()`** 方法允许以同步方式读取 {{DOMxRef("File")}} 或 {{DOMxRef("Blob")}} 对象并将其转换为字符串。此接口仅在 [worker](/zh-CN/docs/Web/API/Worker) 中[可用](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)，因为它支持同步 I/O，可能导致潜在的阻塞。
 
diff --git a/files/zh-cn/web/api/filesystemdirectoryentry/index.md b/files/zh-cn/web/api/filesystemdirectoryentry/index.md
index 2429d64ab26b20..8043f68af70ac8 100644
--- a/files/zh-cn/web/api/filesystemdirectoryentry/index.md
+++ b/files/zh-cn/web/api/filesystemdirectoryentry/index.md
@@ -7,7 +7,8 @@ slug: Web/API/FileSystemDirectoryEntry
 
 [文件和目录条目 API](/zh-CN/docs/Web/API/File_and_Directory_Entries_API) 的 **`FileSystemDirectoryEntry`** 接口表示文件系统中的目录。它提供了方法，使其能够访问和操作目录中的文件，以及访问目录中的条目。
 
-> **备注：** 由于这是个非标准的 API，它的规范当前并没有在标准进程中，重要的是要记住，并不是所有浏览器都实现了他，并且实现它的浏览器可能仅仅实现了一小部分。更多细节请查看 [Browser compatibility](#browser_compatibility) 。
+> [!NOTE]
+> 由于这是个非标准的 API，它的规范当前并没有在标准进程中，重要的是要记住，并不是所有浏览器都实现了他，并且实现它的浏览器可能仅仅实现了一小部分。更多细节请查看 [Browser compatibility](#browser_compatibility) 。
 
 ## 基本概念
 
diff --git a/files/zh-cn/web/api/filesystemfileentry/index.md b/files/zh-cn/web/api/filesystemfileentry/index.md
index 52c7d1655ac86d..71a93429969add 100644
--- a/files/zh-cn/web/api/filesystemfileentry/index.md
+++ b/files/zh-cn/web/api/filesystemfileentry/index.md
@@ -7,7 +7,8 @@ slug: Web/API/FileSystemFileEntry
 
 [文件系统 API](/zh-CN/DOM/File_API/File_System_API) 的 **`FileSystemFileEntry`** 接口表示文件系统中的文件。它提供了属性，描述文件的属性，以及 {{domxref("FileSystemFileEntry.file", "file()")}} 方法，它创建了可以用于读取文件的 {{domxref("File")}} 对象。
 
-> **备注：** 由于这是个非标准 API，它的规范当前并不在标准化过程中。重要的是要记住，并不是所有浏览器都实现了它，并且实现它的浏览器可能仅仅实现一小部分。点击 [Browser compatibility](#browser_compatibility) 来查看更多细节。
+> [!NOTE]
+> 由于这是个非标准 API，它的规范当前并不在标准化过程中。重要的是要记住，并不是所有浏览器都实现了它，并且实现它的浏览器可能仅仅实现一小部分。点击 [Browser compatibility](#browser_compatibility) 来查看更多细节。
 
 ## 属性
 
diff --git a/files/zh-cn/web/api/filesystemfilehandle/index.md b/files/zh-cn/web/api/filesystemfilehandle/index.md
index 3bc09d97264af9..fc2bd199e69f4f 100644
--- a/files/zh-cn/web/api/filesystemfilehandle/index.md
+++ b/files/zh-cn/web/api/filesystemfilehandle/index.md
@@ -114,7 +114,8 @@ onmessage = async (e) => {
 };
 ```
 
-> **备注：** 在规范的早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地指定为异步方法，并且某些较旧版本的浏览器以这种方式实现它们。然而，当前所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范的早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地指定为异步方法，并且某些较旧版本的浏览器以这种方式实现它们。然而，当前所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md
index 271a3770d0d9f6..eef742f2e1e8f0 100644
--- a/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md
+++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("FileSystemSyncAccessHandle")}} 接口的 **`close()`** 方法用于关闭一个打开的同步文件句柄，禁止之后对其的任何操作并且释放之前加在与文件句柄相关联的文件上的独占锁。
 
-> **备注：** 在规范早期版本中，`close()`、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范早期版本中，`close()`、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md
index 2341c63c46d59f..16ce1ffb15aaa5 100644
--- a/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md
+++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md
@@ -11,7 +11,8 @@ l10n:
 
 请记住：只当你需要在指定的时间将更改提交到磁盘的时候才需要调用这个方法，不然你可以让底层操作系统在其认为合适的时间点处理这项任务，这大多数情况下都不会有问题。
 
-> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、`flush()`、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、`flush()`、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md
index d6e0b43c4cd66b..56e570fbb2e004 100644
--- a/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md
+++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("FileSystemSyncAccessHandle")}} 接口的 **`getSize()`** 方法用于返回与句柄相关联文件的字节大小。
 
-> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、`getSize()` 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、`getSize()` 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md
index 0696de6b86a5e9..bec6c4f14b99cf 100644
--- a/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md
+++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md
@@ -15,7 +15,8 @@ l10n:
 
 这个接口通过 {{domxref('FileSystemFileHandle.createSyncAccessHandle()')}} 方法来访问。
 
-> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle")}} 的 {{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle")}} 的 {{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 实例属性
 
diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md
index f9dc26b3962749..ac2f244f6f5804 100644
--- a/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md
+++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md
@@ -77,7 +77,8 @@ onmessage = async (e) => {
 };
 ```
 
-> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md
index a350a14cf3d1b6..96a0b7ed981750 100644
--- a/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md
+++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("FileSystemSyncAccessHandle")}} 接口的 **`truncate()`** 方法用于将与句柄相关联文件的大小调整为指定的字节数。
 
-> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md
index d4f9a7e0d4f8c1..29e7c29237bd9e 100644
--- a/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md
+++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md
@@ -26,7 +26,8 @@ write(buffer, options)
     - `at`
       - : 一个表示应当从文件何处开始写入缓冲区的字节偏移量数字。
 
-> **备注：** 你无法直接操作 `ArrayBuffer` 中的内容，应该先创建一个像 {{jsxref("Int8Array")}} 或者 {{jsxref("DataView")}} 这样的类型化数组对象，用来把缓冲区表示成特定的格式，然后再用类型化数组对象来读写缓冲区的内容。
+> [!NOTE]
+> 你无法直接操作 `ArrayBuffer` 中的内容，应该先创建一个像 {{jsxref("Int8Array")}} 或者 {{jsxref("DataView")}} 这样的类型化数组对象，用来把缓冲区表示成特定的格式，然后再用类型化数组对象来读写缓冲区的内容。
 
 ### 返回值
 
@@ -81,7 +82,8 @@ onmessage = async (e) => {
 };
 ```
 
-> **备注：** 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/formdata/append/index.md b/files/zh-cn/web/api/formdata/append/index.md
index 5f7d72969695f9..0cc8a2257ec5b7 100644
--- a/files/zh-cn/web/api/formdata/append/index.md
+++ b/files/zh-cn/web/api/formdata/append/index.md
@@ -27,7 +27,8 @@ formData.append(name, value, filename);
 - `filename` {{optional_inline}}
   - : 传给服务器的文件名称 (一个 {{domxref("USVString")}}), 当一个 {{domxref("Blob")}} 或 {{domxref("File")}} 被作为第二个参数的时候， {{domxref("Blob")}} 对象的默认文件名是 "blob"。 {{domxref("File")}} 对象的默认文件名是该文件的名称。
 
-> **备注：** 如果你指定一个 {{domxref("Blob")}} 作为数据添加到 `FormData` 对象中，文件名会被放在 "Content-Disposition" 头部（常常会根据浏览器变化而变化）传给服务器。
+> [!NOTE]
+> 如果你指定一个 {{domxref("Blob")}} 作为数据添加到 `FormData` 对象中，文件名会被放在 "Content-Disposition" 头部（常常会根据浏览器变化而变化）传给服务器。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/formdata/formdata/index.md b/files/zh-cn/web/api/formdata/formdata/index.md
index 12dd978f14b94d..4db3c64ef114d5 100644
--- a/files/zh-cn/web/api/formdata/formdata/index.md
+++ b/files/zh-cn/web/api/formdata/formdata/index.md
@@ -52,7 +52,8 @@ formData.append("username", "Chris");
 </form>
 ```
 
-> **备注：** 所有的输入元素都需要有 **name** 属性，否则无法访问到值。
+> [!NOTE]
+> 所有的输入元素都需要有 **name** 属性，否则无法访问到值。
 
 ```js
 var myForm = document.getElementById("myForm");
diff --git a/files/zh-cn/web/api/formdata/set/index.md b/files/zh-cn/web/api/formdata/set/index.md
index 97c8e3b305e62e..f222b49014cfe2 100644
--- a/files/zh-cn/web/api/formdata/set/index.md
+++ b/files/zh-cn/web/api/formdata/set/index.md
@@ -28,7 +28,8 @@ formData.set(name, value, filename);
   - : 当第二个参数传递的是一个 blob 对象（{{domxref("Blob")}}）或者 file 对象（{{domxref("File")}}），filename 参数就代表传给服务端的文件名（一个 {{domxref("USVString")}}）。
     {{domxref("Blob")}} 对象的默认文件名是 "blob"，{{domxref("File")}} 对象的默认文件名则为其“name”属性
 
-> **备注：** 如果对 FormData 对象插入一个 blob 对象（ {{domxref("Blob")}}），那么发送给服务器的请求头部（header）里的“Content-Disposition”里的文件名称将会根据浏览器的不同而不同。
+> [!NOTE]
+> 如果对 FormData 对象插入一个 blob 对象（ {{domxref("Blob")}}），那么发送给服务器的请求头部（header）里的“Content-Disposition”里的文件名称将会根据浏览器的不同而不同。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/fullscreen_api/guide/index.md b/files/zh-cn/web/api/fullscreen_api/guide/index.md
index 7ec1d46ab86a3a..a5823c519e51f7 100644
--- a/files/zh-cn/web/api/fullscreen_api/guide/index.md
+++ b/files/zh-cn/web/api/fullscreen_api/guide/index.md
@@ -52,7 +52,8 @@ if (elem.requestFullscreen) {
 
 你并不总是可以进入全屏模式。例如 {{HTMLElement("iframe")}} 元素具有 [`allowfullscreen`](/zh-CN/docs/Web/HTML/Element/iframe#allowfullscreen) 属性，可选择是否将其内容以全屏模式显示。另外，几种特定的内容，比如窗体插件（windowed plug-ins），不能以全屏模式显示。尝试将不能以全屏模式显示的元素（或者此元素的父元素和后代元素）的时候，全屏请求是无效的。而相应元素会收到一个 `mozfullscreenerror` 事件。当全屏请求失败时，Firefox 会在 Web 控制台上打一条错误信息解释请求为什么失败。但是在 Chrome 和新版的 Opera 中，不会生成这样的警告。
 
-> **备注：** 全屏请求必须在事件处理函数中调用，否则将会被拒绝。
+> [!NOTE]
+> 全屏请求必须在事件处理函数中调用，否则将会被拒绝。
 
 ## 退出全屏模式
 
@@ -117,7 +118,8 @@ function toggleFullScreen() {
 
 ## 前缀
 
-> **备注：** 现在，只有 Firefox 64 和 Chrome 71 支持无前缀。
+> [!NOTE]
+> 现在，只有 Firefox 64 和 Chrome 71 支持无前缀。
 
 目前并不是所有的浏览器都实现了 API 的无前缀版本（你可以使用 [Fscreen](https://github.com/rafrex/fscreen) 获取跨浏览器全屏 API），这里有一份表格总结了前缀和它们之间的命名区别：
 
diff --git a/files/zh-cn/web/api/fullscreen_api/index.md b/files/zh-cn/web/api/fullscreen_api/index.md
index 720f8f14a3af4f..0ab0c6963f6ffb 100644
--- a/files/zh-cn/web/api/fullscreen_api/index.md
+++ b/files/zh-cn/web/api/fullscreen_api/index.md
@@ -42,7 +42,8 @@ _全屏 API 没有自己的接口。相反，它通过增强多个其他接口
 
   - : 一个布尔值，如果文档有一个当前正在以全屏模式显示的元素，则为 `true`；否则返回 `false`。
 
-    > **备注：** 请使用 {{DOMxRef("Document")}} 或 {{DOMxRef("ShadowRoot")}} 的 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 属性代替；如果它不为 `null`，则它是一个当前正在以全屏模式显示的 {{DOMxRef("Element")}}。
+    > [!NOTE]
+    > 请使用 {{DOMxRef("Document")}} 或 {{DOMxRef("ShadowRoot")}} 的 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 属性代替；如果它不为 `null`，则它是一个当前正在以全屏模式显示的 {{DOMxRef("Element")}}。
 
 ## 事件
 
@@ -59,7 +60,8 @@ _全屏 API 没有自己的接口。相反，它通过增强多个其他接口
 
 用户可以选择按 <kbd>ESC</kbd>（或 <kbd>F11</kbd>）键退出全屏模式，而不是等待站点或应用程序以编程方式退出全屏模式。确保在用户界面中提供适当的用户界面元素，告知用户此选项对他们可用。
 
-> **备注：** 导航到另一页面、切换标签页或使用任何应用程序切换器（或 <kbd>Alt</kbd>-<kbd>Tab</kbd>）切换到另一个应用程序也会退出全屏模式。
+> [!NOTE]
+> 导航到另一页面、切换标签页或使用任何应用程序切换器（或 <kbd>Alt</kbd>-<kbd>Tab</kbd>）切换到另一个应用程序也会退出全屏模式。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/gainnode/gain/index.md b/files/zh-cn/web/api/gainnode/gain/index.md
index 40d3eaa517a070..82aa184146cdbf 100644
--- a/files/zh-cn/web/api/gainnode/gain/index.md
+++ b/files/zh-cn/web/api/gainnode/gain/index.md
@@ -11,7 +11,8 @@ slug: Web/API/GainNode/gain
 
 一个 {{domxref("AudioParam")}}。
 
-> **备注：** 虽然 `AudioParam` 属性是只读的，但其返回的值不是。
+> [!NOTE]
+> 虽然 `AudioParam` 属性是只读的，但其返回的值不是。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.md
index a130b3b382f2f0..164ddb7dfc9027 100644
--- a/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -13,7 +13,8 @@ HTML5 为丰富的交互式游戏开发引入了许多必要的组件。像 `<ca
 
 当一个新的手柄连接到计算机时，焦点页面 (当前页面) 首先接收一个 [`gamepadconnected`](/zh-CN/docs/Web/API/Window/gamepadconnected_event) 事件。如果在加载页面时已经连接了手柄，则会在用户按下某个按钮或移动坐标方向 (axes) 时触发焦点页面的 [`gamepadconnected`](/zh-CN/docs/Web/API/Window/gamepadconnected_event) 事件。
 
-> **备注：** 在 Firefox 中，控制器只会暴露给与用户产生交互的可见页面。这有助于防止控制器被用于获取用户的指纹。一旦有一个手柄与页面产生交互，那么其他连接的控制器将自动对页面可见。
+> [!NOTE]
+> 在 Firefox 中，控制器只会暴露给与用户产生交互的可见页面。这有助于防止控制器被用于获取用户的指纹。一旦有一个手柄与页面产生交互，那么其他连接的控制器将自动对页面可见。
 
 你可以这样使用 [`gamepadconnected`](/zh-CN/docs/Web/API/Window/gamepadconnected_event) ：
 
@@ -111,7 +112,8 @@ window.addEventListener("gamepadconnected", function (e) {
 - `axes`: 一个表示设备上坐标输入控件 (例如控制器摇杆) 的数组对象。数组中的每个值都是介于 -1.0 到 1.0 的浮点值，来表示坐标方向的最低 (-1.0) 和最大 (1.0) 值。
 - `timestamp`: 它将返回一个 {{ domxref("DOMHighResTimeStamp") }} ，该值表示上次更新此控制器数据的时间，以便开发者确定 `axes` 和 `button` 数据是否已从硬件更新。该值必须相对于 {{ domxref("PerformanceTiming") }} 接口的 `navigationStart` 对象。值是单调递增的，这意味着可以通过对比大小来确定数据更新的先后顺序，因为新的值始终比旧的值大。请注意 Firefox 当前不支持该属性。
 
-> **备注：** 出于安全原因，Gamepad 对象在 [`gamepadconnected`](/zh-CN/docs/Web/API/Window/gamepadconnected_event) 事件上可用而在 {{ domxref("Window") }} 对象上不可用。一旦我们得到了对它的引用，我们就可以获取其属性以了解有关控制器当前状态的信息。在后台，此对象将会在控制器状态更改时更新。
+> [!NOTE]
+> 出于安全原因，Gamepad 对象在 [`gamepadconnected`](/zh-CN/docs/Web/API/Window/gamepadconnected_event) 事件上可用而在 {{ domxref("Window") }} 对象上不可用。一旦我们得到了对它的引用，我们就可以获取其属性以了解有关控制器当前状态的信息。在后台，此对象将会在控制器状态更改时更新。
 
 ### 使用按键信息
 
diff --git a/files/zh-cn/web/api/gamepadbutton/index.md b/files/zh-cn/web/api/gamepadbutton/index.md
index 869bc65e773054..592c6599943b62 100644
--- a/files/zh-cn/web/api/gamepadbutton/index.md
+++ b/files/zh-cn/web/api/gamepadbutton/index.md
@@ -9,7 +9,8 @@ slug: Web/API/GamepadButton
 
 `GamepadButton` 对象是由 {{domxref("Gamepad")}} 接口的 `buttons` 属性返回的可查询任意值的数组返回的。
 
-> **备注：** 上述情况是在 Firefox Gecko 28 及以上的；Chrome 和较早版本的 Firefox 访问此属性时仍然会返回一个双精浮点值的数组。
+> [!NOTE]
+> 上述情况是在 Firefox Gecko 28 及以上的；Chrome 和较早版本的 Firefox 访问此属性时仍然会返回一个双精浮点值的数组。
 
 ## 属性
 
diff --git a/files/zh-cn/web/api/gamepadhapticactuator/playeffect/index.md b/files/zh-cn/web/api/gamepadhapticactuator/playeffect/index.md
index 5213108b3f26eb..5c9d8fb6e1d305 100644
--- a/files/zh-cn/web/api/gamepadhapticactuator/playeffect/index.md
+++ b/files/zh-cn/web/api/gamepadhapticactuator/playeffect/index.md
@@ -32,7 +32,8 @@ playEffect(type, params)
     - `weakMagnitude`
       - : 高频（弱）隆隆声电机的隆隆声强度，标准化为 0.0 到 1.0 之间的范围。
 
-> **备注：** 一个新的 `playEffect()` 调用会覆盖上一个仍在进行中的调用。
+> [!NOTE]
+> 一个新的 `playEffect()` 调用会覆盖上一个仍在进行中的调用。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/gamepadhapticactuator/pulse/index.md b/files/zh-cn/web/api/gamepadhapticactuator/pulse/index.md
index 61f207023d1860..f1b8631a93430c 100644
--- a/files/zh-cn/web/api/gamepadhapticactuator/pulse/index.md
+++ b/files/zh-cn/web/api/gamepadhapticactuator/pulse/index.md
@@ -22,7 +22,8 @@ pulse(value, duration)
 - `duration`
   - : 表示脉冲持续时间的双精度浮点数，单位是毫秒。
 
-> **备注：** 如果前一个调用仍在进行，重复调用 `pulse()` 会覆盖前一个调用。
+> [!NOTE]
+> 如果前一个调用仍在进行，重复调用 `pulse()` 会覆盖前一个调用。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/geolocation/index.md b/files/zh-cn/web/api/geolocation/index.md
index 0042ff73b56aa5..a9b2e4d80ec976 100644
--- a/files/zh-cn/web/api/geolocation/index.md
+++ b/files/zh-cn/web/api/geolocation/index.md
@@ -11,7 +11,8 @@ l10n:
 
 带有此接口的对象可以用由 {{domxref("Navigator")}} 实现的属性 {{domxref("navigator.geolocation")}} 来获得。
 
-> **备注：** 出于安全考虑，当一个网页尝试获取地理位置信息时，会请求用户批准地理位置访问权限。因为每个浏览器都有各自请求用户批准该权限的策略和方法。
+> [!NOTE]
+> 出于安全考虑，当一个网页尝试获取地理位置信息时，会请求用户批准地理位置访问权限。因为每个浏览器都有各自请求用户批准该权限的策略和方法。
 
 ## 实例属性
 
diff --git a/files/zh-cn/web/api/geolocation_api/using_the_geolocation_api/index.md b/files/zh-cn/web/api/geolocation_api/using_the_geolocation_api/index.md
index dc790cae0eaaef..10bc5bcdae8d5c 100644
--- a/files/zh-cn/web/api/geolocation_api/using_the_geolocation_api/index.md
+++ b/files/zh-cn/web/api/geolocation_api/using_the_geolocation_api/index.md
@@ -25,7 +25,8 @@ if ("geolocation" in navigator) {
 
 你可以调用 {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} 函数获取用户当前定位位置。这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。你可以选择性地提供第二个回调函数，当有错误时会被执行。第三个参数也是可选的，你可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。
 
-> **备注：** 默认情况下，{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} 会尽快返回一个低精度结果，这在你不关心准确度只关心快速获取结果的情况下很有用。有 GPS 的设备可能需要一分钟或更久来获取 GPS 定位，在这种情况下 `getCurrentPosition()` 会返回低精度数据（基于 IP 的定位或 Wi-Fi 定位）。
+> [!NOTE]
+> 默认情况下，{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} 会尽快返回一个低精度结果，这在你不关心准确度只关心快速获取结果的情况下很有用。有 GPS 的设备可能需要一分钟或更久来获取 GPS 定位，在这种情况下 `getCurrentPosition()` 会返回低精度数据（基于 IP 的定位或 Wi-Fi 定位）。
 
 ```js
 navigator.geolocation.getCurrentPosition((position) => {
@@ -39,7 +40,8 @@ navigator.geolocation.getCurrentPosition((position) => {
 
 你可以设定一个回调函数来响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息）。你可以通过 {{domxref("Geolocation.watchPosition","watchPosition()")}} 函数实现该功能。它与 {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} 接受相同的参数，但回调函数会被调用多次。错误回调函数与 {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} 中一样是可选的，也会被多次调用。
 
-> **备注：** 你可以直接调用 {{domxref("Geolocation.watchPosition","watchPosition()")}} 函数，不需要先调用 {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} 函数。
+> [!NOTE]
+> 你可以直接调用 {{domxref("Geolocation.watchPosition","watchPosition()")}} 函数，不需要先调用 {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} 函数。
 
 ```js
 const watchID = navigator.geolocation.watchPosition((position) => {
diff --git a/files/zh-cn/web/api/gpu/requestadapter/index.md b/files/zh-cn/web/api/gpu/requestadapter/index.md
index 086655c120828e..938639bd8d4bde 100644
--- a/files/zh-cn/web/api/gpu/requestadapter/index.md
+++ b/files/zh-cn/web/api/gpu/requestadapter/index.md
@@ -38,7 +38,8 @@ requestAdapter(options)
 
 如果你希望阻止你的应用程序运行在备用的适配器，你应该在请求 {{domxref("GPUDevice")}} 之前检查 {{domxref("GPUAdapter.isFallbackAdapter")}} 属性。
 
-> **备注：** 该规范包含 `requestAdapter()` 的 `forceFallbackAdapter` 选项。这是一个布尔值，如果设置为 `true`，则强制用户代理返回备用适配器（如果可用）。然而，任何浏览器仍没有支持这一点。
+> [!NOTE]
+> 该规范包含 `requestAdapter()` 的 `forceFallbackAdapter` 选项。这是一个布尔值，如果设置为 `true`，则强制用户代理返回备用适配器（如果可用）。然而，任何浏览器仍没有支持这一点。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/headers/entries/index.md b/files/zh-cn/web/api/headers/entries/index.md
index fbda4e49b9f1f1..4352f8ca535785 100644
--- a/files/zh-cn/web/api/headers/entries/index.md
+++ b/files/zh-cn/web/api/headers/entries/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Headers/entries
 
 **`Headers.entries()`** 以{{jsxref("Iteration_protocols","迭代器")}}的形式返回 Headers 对象中所有的键值对。每一对中的键和值都是 {{jsxref("String")}} 对象。
 
-> **备注：** 这个方法在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中是可用的。
+> [!NOTE]
+> 这个方法在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 中是可用的。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/headers/get/index.md b/files/zh-cn/web/api/headers/get/index.md
index a80f37767d7615..fac5a1ac3880b0 100644
--- a/files/zh-cn/web/api/headers/get/index.md
+++ b/files/zh-cn/web/api/headers/get/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Headers/get
 
 **`get()`** 方法以 {{domxref("ByteString")}} 形式从 Headers 对象中返回指定 header 的全部值。如果 Header 对象中不存在请求的 header，则返回 `null`。
 
-> **备注：** 出于安全原因，部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。
+> [!NOTE]
+> 出于安全原因，部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。
 
 ## Syntax
 
diff --git a/files/zh-cn/web/api/headers/index.md b/files/zh-cn/web/api/headers/index.md
index 00b1db41268d2d..62bc08bca4ca13 100644
--- a/files/zh-cn/web/api/headers/index.md
+++ b/files/zh-cn/web/api/headers/index.md
@@ -17,7 +17,8 @@ slug: Web/API/Headers
 
 一个实现了`Headers` 的对象可以直接用于 {{jsxref("Statements/for...of", "for...of")}} 结构中，而不是 {{domxref('Headers.entries()', 'entries()')}}: `for (var p of myHeaders)` 等价于 `for (var p of myHeaders.entries())`.
 
-> **备注：** 你可以通过阅读我们的 [HTTP headers](/zh-CN/docs/Web/HTTP/Headers)参考找到更多关于可用 headers 的信息。
+> [!NOTE]
+> 你可以通过阅读我们的 [HTTP headers](/zh-CN/docs/Web/HTTP/Headers)参考找到更多关于可用 headers 的信息。
 
 ## 构造函数
 
@@ -43,9 +44,11 @@ slug: Web/API/Headers
 - {{domxref("Headers.values()")}}
   - : 以{{jsxref("Iteration_protocols", "迭代器")}}的形式返回 Headers 对象中所有存在的 header 的值。
 
-> **备注：** 值得注意的是，在 header 已存在或者有多个值的状态下{{domxref("Headers.set()")}} 和 {{domxref("Headers.append()")}}的使用有如下区别，{{domxref("Headers.set()")}} 将会用新的值覆盖已存在的值，但是{{domxref("Headers.append()")}}会将新的值添加到已存在的值的队列末尾。请参相关词条内的示例代码。
+> [!NOTE]
+> 值得注意的是，在 header 已存在或者有多个值的状态下{{domxref("Headers.set()")}} 和 {{domxref("Headers.append()")}}的使用有如下区别，{{domxref("Headers.set()")}} 将会用新的值覆盖已存在的值，但是{{domxref("Headers.append()")}}会将新的值添加到已存在的值的队列末尾。请参相关词条内的示例代码。
 
-> **备注：** 如果你尝试传入名称不是[有效的 HTTP 标头名称](https://fetch.spec.whatwg.org/#concept-header-name)的引用，则所有 Headers 方法都将引发 `TypeError`。如果标头具有不可变的 {{Glossary("Guard")}}，则突变操作会引发 `TypeError`。在任何其他失败情况下，它们都会无声地失败。
+> [!NOTE]
+> 如果你尝试传入名称不是[有效的 HTTP 标头名称](https://fetch.spec.whatwg.org/#concept-header-name)的引用，则所有 Headers 方法都将引发 `TypeError`。如果标头具有不可变的 {{Glossary("Guard")}}，则突变操作会引发 `TypeError`。在任何其他失败情况下，它们都会无声地失败。
 
 ### Obsolete methods
 
diff --git a/files/zh-cn/web/api/headers/keys/index.md b/files/zh-cn/web/api/headers/keys/index.md
index bdd55b673bc5b4..a5067eaf48f08c 100644
--- a/files/zh-cn/web/api/headers/keys/index.md
+++ b/files/zh-cn/web/api/headers/keys/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Headers/keys
 
 **`Headers.keys()`** 方法返回一个 headers(Object) 对象所有 key 组成的迭代器，通过迭代器可以遍历 headers 这个对象，返回的迭代器中的元素 key 都是字符串。
 
-> **备注：** 这个方法在 [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API) 也可以使用。
+> [!NOTE]
+> 这个方法在 [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API) 也可以使用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/headers/values/index.md b/files/zh-cn/web/api/headers/values/index.md
index 5ccc39b2f358d4..35834902ae0bde 100644
--- a/files/zh-cn/web/api/headers/values/index.md
+++ b/files/zh-cn/web/api/headers/values/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Headers/values
 
 **`Headers.values()`** 方法返回一个可迭代数值，通过这个数值可以遍历 **`Headers`** 中键值对的 **`value`** 值。返回的 **`value`** 都是 **`ByteString`** 对象。
 
-> **备注：** 这个方法可以在 [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API)中使用。
+> [!NOTE]
+> 这个方法可以在 [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API)中使用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/history/go/index.md b/files/zh-cn/web/api/history/go/index.md
index 0d14156cc41aa4..9f9b3207e1b25d 100644
--- a/files/zh-cn/web/api/history/go/index.md
+++ b/files/zh-cn/web/api/history/go/index.md
@@ -19,7 +19,8 @@ window.history.go(delta);
 
   - : 相对于当前页面你要去往历史页面的位置。负值表示向后移动，正值表示向前移动。因此，例如：`history.go(2)`向前移动两页，`history.go(-2)`则向后移动两页。如果未向该函数传参或`delta`相等于 0，则该函数与调用`location.reload()`具有相同的效果。
 
-    > **备注：** 相等于 0 是采用宽松相等进行比较的。另外，JavaScript 值古怪的隐式转换在这里也是可用的。
+    > [!NOTE]
+    > 相等于 0 是采用宽松相等进行比较的。另外，JavaScript 值古怪的隐式转换在这里也是可用的。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/history_api/index.md b/files/zh-cn/web/api/history_api/index.md
index 1d1c8244960268..6232f7d29a6448 100644
--- a/files/zh-cn/web/api/history_api/index.md
+++ b/files/zh-cn/web/api/history_api/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **History API** 通过 {{DOMxRef("Window.history","history")}} 全局对象提供了对浏览器会话的历史记录（不要与 [WebExtensions 的 history](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/history) 混淆）的访问功能。它暴露了很多有用的方法和属性，使你可以在用户的历史记录中来回导航，而且可以操作历史记录栈中的内容。
 
-> **备注：** 该 API 仅在主线程（{{domxref("Window")}}）中可用。无法在 {{domxref("Worker")}} 或 {{domxref("Worklet")}} 上下文中访问它。
+> [!NOTE]
+> 该 API 仅在主线程（{{domxref("Window")}}）中可用。无法在 {{domxref("Worker")}} 或 {{domxref("Worklet")}} 上下文中访问它。
 
 ## 概念和用法
 
diff --git a/files/zh-cn/web/api/houdini_apis/index.md b/files/zh-cn/web/api/houdini_apis/index.md
index 39c4229e588777..59687839e65365 100644
--- a/files/zh-cn/web/api/houdini_apis/index.md
+++ b/files/zh-cn/web/api/houdini_apis/index.md
@@ -31,7 +31,8 @@ li {
 }
 ```
 
-> **备注：** 能力越大，责任越大！在 Houdini 的帮助下你能够在 CSS 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。
+> [!NOTE]
+> 能力越大，责任越大！在 Houdini 的帮助下你能够在 CSS 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。
 
 ## Houdini APIs
 
diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md
index baaf04382f9231..7545b350abca02 100644
--- a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md
+++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md
@@ -15,7 +15,8 @@ JavaScript 本质上是一门单线程语言。对于在它被设计出来的那
 
 ## JavaScript 执行上下文
 
-> **备注：** 对于大多数 JavaScript 开发人员来说，这些细节并不重要。这里提供的信息只用于了解为什么微任务非常有用以及它们是如何工作的。如果你并不关心这些内容，你可以跳过这部分或者在你觉得需要的时候再倒回来查看。
+> [!NOTE]
+> 对于大多数 JavaScript 开发人员来说，这些细节并不重要。这里提供的信息只用于了解为什么微任务非常有用以及它们是如何工作的。如果你并不关心这些内容，你可以跳过这部分或者在你觉得需要的时候再倒回来查看。
 
 当一段 JavaScript 代码在运行的时候，它实际上是运行在**执行上下文**中。下面 3 种类型的代码会创建一个新的执行上下文：
 
diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md
index a7053bb3253836..0a8247cb103b4f 100644
--- a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md
+++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md
@@ -35,7 +35,8 @@ JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/
 
 其次，如果一个微任务通过调用 {{domxref("queueMicrotask()")}}, 向队列中加入了更多的微任务，则那些新加入的微任务 _会早于下一个任务运行_。这是因为事件循环会持续调用微任务直至队列中没有留存的，即使是在有更多微任务持续被加入的情况下。
 
-> **警告：** 因为微任务自身可以入列更多的微任务，且事件循环会持续处理微任务直至队列为空，那么就存在一种使得事件循环无尽处理微任务的真实风险。如何处理递归增加微任务是要谨慎而行的。
+> [!WARNING]
+> 因为微任务自身可以入列更多的微任务，且事件循环会持续处理微任务直至队列为空，那么就存在一种使得事件循环无尽处理微任务的真实风险。如何处理递归增加微任务是要谨慎而行的。
 
 ## 使用微任务
 
diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/zh-cn/web/api/html_drag_and_drop_api/drag_operations/index.md
index 09b91ce1017ad7..c3e734f0dc3834 100644
--- a/files/zh-cn/web/api/html_drag_and_drop_api/drag_operations/index.md
+++ b/files/zh-cn/web/api/html_drag_and_drop_api/drag_operations/index.md
@@ -33,7 +33,8 @@ slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations
 
 [`draggable`](/zh-CN/docs/Web/HTML/Global_attributes#draggable) 属性可在任意元素上设置，包括图像和链接。然而，对于后两者，该属性的默认值是 `true`，所以你只会在禁用这二者的拖拽时使用到 [`draggable`](/zh-CN/docs/Web/HTML/Global_attributes#draggable) 属性，将其设置为 `false`。
 
-> **备注：** 当一个元素被设置成可拖拽时，元素中的文本和其他子元素不能再以正常的方式（通过鼠标点击和拖拽）被选中。用户必须按住 <kbd>alt</kbd> 键，再用鼠标选择文本，或者使用键盘选择。
+> [!NOTE]
+> 当一个元素被设置成可拖拽时，元素中的文本和其他子元素不能再以正常的方式（通过鼠标点击和拖拽）被选中。用户必须按住 <kbd>alt</kbd> 键，再用鼠标选择文本，或者使用键盘选择。
 
 ## 开始拖拽操作
 
@@ -230,7 +231,8 @@ function doDragOver(event) {
 
 在这个例子中，当带有 `droparea` 类的元素是一个有效的放置目标时，即在该元素的 {{domxref("HTMLElement/dragenter_event", "dragenter")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法时，元素会出现一个 1 像素的黑色轮廓。
 
-> **备注：** 要使这个伪类生效，你必须在 {{domxref("HTMLElement/dragenter_event", "dragenter")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法，因为这个伪类状态不会检查 {{domxref("HTMLElement/dragover_event", "dragover")}} 事件（译者注：即在 {{domxref("HTMLElement/dragover_event", "dragover")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法也不会使伪类生效，尽管这个伪类叫做“-moz-drag-over”）。
+> [!NOTE]
+> 要使这个伪类生效，你必须在 {{domxref("HTMLElement/dragenter_event", "dragenter")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法，因为这个伪类状态不会检查 {{domxref("HTMLElement/dragover_event", "dragover")}} 事件（译者注：即在 {{domxref("HTMLElement/dragover_event", "dragover")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法也不会使伪类生效，尽管这个伪类叫做“-moz-drag-over”）。
 
 对于更复杂的视觉效果，你可以在 {{domxref("HTMLElement/dragenter_event", "dragenter")}} 事件中执行其他操作。例如在放置位置插入一个元素，这样的元素可以表示一个插入标记，或表示被拖拽的元素移动到了新位置。为此你可以在 {{domxref("HTMLElement/dragenter_event", "dragenter")}} 事件中创建一个新元素，然后将其插入到文档中。
 
diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md b/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
index 520a3c6bda4ef0..e649f531989a60 100644
--- a/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
+++ b/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
@@ -42,7 +42,8 @@ HTML 拖放接口使得 web 应用能够在网页中拖放文件。这篇文档
 }
 ```
 
-> **备注：** 注意当执行将文件拖入浏览器的操作时操作系统并不会触发 `dragstart` 和 `dragend` 事件。
+> [!NOTE]
+> 注意当执行将文件拖入浏览器的操作时操作系统并不会触发 `dragstart` 和 `dragend` 事件。
 
 ## 执行释放事件
 
diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.md b/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.md
index 36c4730e9ddd66..7caccf0858b893 100644
--- a/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.md
+++ b/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types
 
 HTML 拖放支持拖动各种类型的数据，包括纯文本，URL，HTML 代码，文件等。该文档描述了拖放常见数据类型的最佳做法。
 
-> **警告：** 本文档中包含一个**moz**前缀的所有方法和属性 (如**mozSetDataAt()**) 是 Gecko 的具体接口。这些接口仅适用于基于 Gecko 的浏览器。
+> [!WARNING]
+> 本文档中包含一个**moz**前缀的所有方法和属性 (如**mozSetDataAt()**) 是 Gecko 的具体接口。这些接口仅适用于基于 Gecko 的浏览器。
 
 ## 拖动文字
 
diff --git a/files/zh-cn/web/api/htmlanchorelement/download/index.md b/files/zh-cn/web/api/htmlanchorelement/download/index.md
index 52f37f2102ce81..52d341255e362c 100644
--- a/files/zh-cn/web/api/htmlanchorelement/download/index.md
+++ b/files/zh-cn/web/api/htmlanchorelement/download/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLAnchorElement/download
 
 **`HTMLAnchorElement.download`** 属性是一个{{jsxref("DOMString")}} ，表明链接的资源将被下载，而不是显示在浏览器中。该值表示下载文件的建议名称。如果该名称不是基础操作系统的有效文件名，浏览器将对其进行调整。
 
-> **备注：** 该值对于下载行为来说不一定是有用的，同时也不能决定下载行为是否发生。
+> [!NOTE]
+> 该值对于下载行为来说不一定是有用的，同时也不能决定下载行为是否发生。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/htmlaudioelement/index.md b/files/zh-cn/web/api/htmlaudioelement/index.md
index 8562cb3c9edb73..f52a22f5611def 100644
--- a/files/zh-cn/web/api/htmlaudioelement/index.md
+++ b/files/zh-cn/web/api/htmlaudioelement/index.md
@@ -49,7 +49,8 @@ var audioElement = new Audio("car_horn.wav");
 audioElement.play();
 ```
 
-> **备注：** 一个常见的需求是在页面加载后马上去播放音频，现代浏览器的默认自动播放策略会阻止这一行为，参见 [firefox](https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/) 和 [chrome](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) 寻找最佳实践和解决方案。
+> [!NOTE]
+> 一个常见的需求是在页面加载后马上去播放音频，现代浏览器的默认自动播放策略会阻止这一行为，参见 [firefox](https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/) 和 [chrome](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) 寻找最佳实践和解决方案。
 
 一些经常被使用的属性，包括 {{domxref("HTMLMediaElement.src", "src")}}、{{domxref("HTMLMediaElement.currentTime", "currentTime")}}、{{domxref("HTMLMediaElement.duration", "duration")}}、{{domxref("HTMLMediaElement.paused", "paused")}}、{{domxref("HTMLMediaElement.muted", "muted")}} 和 {{domxref("HTMLMediaElement.volume", "volume")}}。以下这段代码赋值音频文件的播放时长给一个变量：
 
diff --git a/files/zh-cn/web/api/htmlbodyelement/index.md b/files/zh-cn/web/api/htmlbodyelement/index.md
index f2f179686e0b54..7e680ab79ca6a1 100644
--- a/files/zh-cn/web/api/htmlbodyelement/index.md
+++ b/files/zh-cn/web/api/htmlbodyelement/index.md
@@ -38,7 +38,8 @@ _无特定方法；从其父接口 {{domxref("HTMLElement")}} 继承方法。_
 
 以下以 {{domxref("Window")}} 为目标的 `onXYZ` 事件处理器属性同样在 `window` 对象这一别名目标上可用。但建议直接在 `window` 对象上监听这些事件，而不是在 `HTMLBodyElement` 上。
 
-> **备注：** 对于以下的 `onXYZ` 事件处理器，在 `HTMLBodyElement` 上使用 `addEventListener()` 将不会生效。请在 {{domxref("window")}} 对象上监听这些事件。
+> [!NOTE]
+> 对于以下的 `onXYZ` 事件处理器，在 `HTMLBodyElement` 上使用 `addEventListener()` 将不会生效。请在 {{domxref("window")}} 对象上监听这些事件。
 
 - {{domxref("window.afterprint_event", "HTMLBodyElement.onafterprint")}}
   - : 在关联的文档开始打印或打印预览关闭后触发。
diff --git a/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.md b/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.md
index 116a1f1cf818e7..a95524855523ca 100644
--- a/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.md
+++ b/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.md
@@ -27,7 +27,8 @@ var ctx = canvas.getContext(contextType, contextAttributes);
     - "`webgl2`" (或 "`experimental-webgl2`") 这将创建一个 {{domxref("WebGL2RenderingContext")}} 三维渲染上下文对象。只在实现 [WebGL](/zh-CN/docs/Web/WebGL) 版本 2 (OpenGL ES 3.0) 的浏览器上可用。{{experimental_inline}}
     - `"bitmaprenderer"` 这将创建一个只提供将 canvas 内容替换为指定{{domxref("ImageBitmap")}}功能的{{domxref("ImageBitmapRenderingContext")}} 。
 
-    > **备注：** 标识符 "`experimental-webgl`" 或 "`experimental-webgl2`" 用于新 [WebGL](/zh-CN/docs/Web/WebGL)的实现。这些实现还没有达到测试套件一致性或图形驱动程序平台局势尚不稳定。[Khronos Group](https://www.khronos.org/) 集团认证[WebGL](/zh-CN/docs/Web/WebGL) 实现在某些[一致性规则](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt)。
+    > [!NOTE]
+    > 标识符 "`experimental-webgl`" 或 "`experimental-webgl2`" 用于新 [WebGL](/zh-CN/docs/Web/WebGL)的实现。这些实现还没有达到测试套件一致性或图形驱动程序平台局势尚不稳定。[Khronos Group](https://www.khronos.org/) 集团认证[WebGL](/zh-CN/docs/Web/WebGL) 实现在某些[一致性规则](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt)。
 
 - `上下文属性 (contextAttributes)`
 
diff --git a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md
index b4bcc6725d137f..4ab26af849b281 100644
--- a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md
+++ b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.md
@@ -107,7 +107,8 @@ canvas.toBlob(
 
 ### 使用 OS.File 保存图像到本地（chrome/add-on context only）
 
-> **备注：** 此方法可将 toBlob 生成的图片保存到本地，但仅在 Firefox、Chrome 上下文或带有相关插件的情况下可用，因为 Web 并不存在 OS API。
+> [!NOTE]
+> 此方法可将 toBlob 生成的图片保存到本地，但仅在 Firefox、Chrome 上下文或带有相关插件的情况下可用，因为 Web 并不存在 OS API。
 
 ```js
 const canvas = document.getElementById("canvas");
diff --git a/files/zh-cn/web/api/htmlcollection/index.md b/files/zh-cn/web/api/htmlcollection/index.md
index 793df3949598af..70b611c0057b5f 100644
--- a/files/zh-cn/web/api/htmlcollection/index.md
+++ b/files/zh-cn/web/api/htmlcollection/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLCollection
 
 **`HTMLCollection`** 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（与 {{jsxref("Functions/arguments", "arguments")}} 相似的类数组 (array-like) 对象），还提供了用来从该集合中选择元素的方法和属性。
 
-> **备注：** 由于历史原因（DOM4 之前，实现该接口的集合只能包含 HTML 元素），该接口被称为 `HTMLCollection`。
+> [!NOTE]
+> 由于历史原因（DOM4 之前，实现该接口的集合只能包含 HTML 元素），该接口被称为 `HTMLCollection`。
 
 HTML DOM 中的 `HTMLCollection` 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。因此，最好是创建副本（例如，使用 {{jsxref("Array/from", "Array.from")}}）后再迭代这个数组以添加、移动或删除 DOM 节点。
 
diff --git a/files/zh-cn/web/api/htmlelement/dir/index.md b/files/zh-cn/web/api/htmlelement/dir/index.md
index ec65726ae6ed08..c22e0ab9595edf 100644
--- a/files/zh-cn/web/api/htmlelement/dir/index.md
+++ b/files/zh-cn/web/api/htmlelement/dir/index.md
@@ -15,7 +15,8 @@ slug: Web/API/HTMLElement/dir
 
 当一个元素的 dir 设置为“`auto`”时，该元素的方向是根据其第一个强方向性字符决定的，或者默认为其父元素的方向性。
 
-> **备注：** 浏览器可能允许用户改变 {{ HTMLElement("input") }} 和 {{ HTMLElement("textarea") }} 的方向性，以协助编写内容。Chrome 和 Safari 在输入字段的上下文菜单中提供方向性选项，而 Internet Explorer 和 Edge 使用组合键 <kbd>Ctrl</kbd> + 左 <kbd>Shift</kbd> 和 <kbd>Ctrl</kbd> + 右 <kbd>Shift</kbd>。Firefox 使用组合键 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>，但不更新 **`dir`** 属性值。
+> [!NOTE]
+> 浏览器可能允许用户改变 {{ HTMLElement("input") }} 和 {{ HTMLElement("textarea") }} 的方向性，以协助编写内容。Chrome 和 Safari 在输入字段的上下文菜单中提供方向性选项，而 Internet Explorer 和 Edge 使用组合键 <kbd>Ctrl</kbd> + 左 <kbd>Shift</kbd> 和 <kbd>Ctrl</kbd> + 右 <kbd>Shift</kbd>。Firefox 使用组合键 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>，但不更新 **`dir`** 属性值。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/htmlelement/hidden/index.md b/files/zh-cn/web/api/htmlelement/hidden/index.md
index 8e64e4a814ee26..fa1ff3ab1b1b24 100644
--- a/files/zh-cn/web/api/htmlelement/hidden/index.md
+++ b/files/zh-cn/web/api/htmlelement/hidden/index.md
@@ -21,7 +21,8 @@ slug: Web/API/HTMLElement/hidden
 - 隐藏选项卡的对话框中的面板
 - 隐藏一个演示文稿中的内容，同时又希望这个内容在其他演示文稿中是可见的
 
-> **备注：** Elements that are not `hidden` must not link to elements which are.
+> [!NOTE]
+> Elements that are not `hidden` must not link to elements which are.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/htmlelement/innertext/index.md b/files/zh-cn/web/api/htmlelement/innertext/index.md
index 76203aefc13f7b..5aca2a1ae536e7 100644
--- a/files/zh-cn/web/api/htmlelement/innertext/index.md
+++ b/files/zh-cn/web/api/htmlelement/innertext/index.md
@@ -17,7 +17,8 @@ slug: Web/API/HTMLElement/innerText
 
 如果元素本身没有[被渲染](https://html.spec.whatwg.org/multipage/rendering.html#being-rendered)（例如，从文档中分离出来或从视图中隐藏起来），返回值与 {{domxref("Node.textContent")}} 属性相同。
 
-> **警告：** 在一个节点上设置 `innerText` 会移除该节点的*所有*子节点，并用给定的字符串值的单一文本节点代替它们。
+> [!WARNING]
+> 在一个节点上设置 `innerText` 会移除该节点的*所有*子节点，并用给定的字符串值的单一文本节点代替它们。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlelement/offsetheight/index.md b/files/zh-cn/web/api/htmlelement/offsetheight/index.md
index b0c1e92cb336e9..56a3b35c511c84 100644
--- a/files/zh-cn/web/api/htmlelement/offsetheight/index.md
+++ b/files/zh-cn/web/api/htmlelement/offsetheight/index.md
@@ -13,7 +13,8 @@ slug: Web/API/HTMLElement/offsetHeight
 
 如果元素被隐藏（例如 元素或者元素的祖先之一的元素的 style.display 被设置为 none），则返回 0
 
-> **备注：** 这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> 这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 {{ domxref("element.getBoundingClientRect()") }}.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/htmlelement/offsetwidth/index.md b/files/zh-cn/web/api/htmlelement/offsetwidth/index.md
index 622e705e717f3e..a6a65793a94db1 100644
--- a/files/zh-cn/web/api/htmlelement/offsetwidth/index.md
+++ b/files/zh-cn/web/api/htmlelement/offsetwidth/index.md
@@ -15,7 +15,8 @@ var offsetWidth =element.offsetWidth;
 
 `intElemOffsetWidth` is a variable storing an integer corresponding to the `offsetWidth` pixel value of the element. `offsetWidth` 是一个只读属性。
 
-> **备注：** 这个属性将会 round(四舍五入) 为一个整数。如果你想要一个 fractional(小数) 值，请使用{{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> 这个属性将会 round(四舍五入) 为一个整数。如果你想要一个 fractional(小数) 值，请使用{{ domxref("element.getBoundingClientRect()") }}.
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlelement/outertext/index.md b/files/zh-cn/web/api/htmlelement/outertext/index.md
index 0e949238ec0818..a8d9f30eabbb87 100644
--- a/files/zh-cn/web/api/htmlelement/outertext/index.md
+++ b/files/zh-cn/web/api/htmlelement/outertext/index.md
@@ -21,7 +21,8 @@ slug: Web/API/HTMLElement/outerText
 
 这个例子突出了 `outerText` 和 `innerText` 在用作 setter 时的根本区别（它们用做 getter 时行为完全一致）。
 
-> **备注：** 这个示例是 [innerText 和 outerText 有什么区别？](https://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435)（Stack overflow）的修订后的版本，由 [codingintrigue](https://stackoverflow.com/users/571194/codingintrigue) 发起，基于 [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/) 许可证发布。
+> [!NOTE]
+> 这个示例是 [innerText 和 outerText 有什么区别？](https://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435)（Stack overflow）的修订后的版本，由 [codingintrigue](https://stackoverflow.com/users/571194/codingintrigue) 发起，基于 [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/) 许可证发布。
 
 考虑包含如下 HTML 代码的页面：
 
diff --git a/files/zh-cn/web/api/htmlelement/style/index.md b/files/zh-cn/web/api/htmlelement/style/index.md
index b831166ed11271..f1e7fb3e47a6a5 100644
--- a/files/zh-cn/web/api/htmlelement/style/index.md
+++ b/files/zh-cn/web/api/htmlelement/style/index.md
@@ -15,7 +15,8 @@ slug: Web/API/HTMLElement/style
 
 样式声明可通过设置它为 `null` 或空字符串来重置，比如 `elt.style.color = null`。
 
-> **备注：** 通过这些规则，CSS 属性名称被转换为 JavaScript 标识符：
+> [!NOTE]
+> 通过这些规则，CSS 属性名称被转换为 JavaScript 标识符：
 >
 > - 如果属性是由一个单词组成的，则保持原样：如 `height`（也保持小写）。
 > - 如果属性是由若干个单词组成的，由横线分隔，则横线被移除，并转化为*驼峰*形式：如 `background-attachment` 转换为 `backgroundAttachment`。
diff --git a/files/zh-cn/web/api/htmlformelement/elements/index.md b/files/zh-cn/web/api/htmlformelement/elements/index.md
index 3b3189509c0ab7..bce3ffeda5fc4e 100644
--- a/files/zh-cn/web/api/htmlformelement/elements/index.md
+++ b/files/zh-cn/web/api/htmlformelement/elements/index.md
@@ -15,7 +15,8 @@ l10n:
 
 在 HTML 5 之前，返回的对象是一个基于 `HTMLFormControlsCollection` 的 {{domxref("HTMLCollection")}}。
 
-> **备注：** 同样，你也可以使用文档中的 {{domxref("Document.forms", "forms")}} 属性获取给定文档中包含的所有表单的列表。
+> [!NOTE]
+> 同样，你也可以使用文档中的 {{domxref("Document.forms", "forms")}} 属性获取给定文档中包含的所有表单的列表。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/htmlformelement/submit_event/index.md b/files/zh-cn/web/api/htmlformelement/submit_event/index.md
index 817628700a84c6..36ebf27c5e94ec 100644
--- a/files/zh-cn/web/api/htmlformelement/submit_event/index.md
+++ b/files/zh-cn/web/api/htmlformelement/submit_event/index.md
@@ -32,7 +32,8 @@ slug: Web/API/HTMLFormElement/submit_event
 
 当用户点击提交按钮（{{HtmlElement("button")}} 或 {{HtmlElement('input/submit', '&lt;input type="submit"&gt;')}}），亦或是在表单里输入时（e.g. {{HtmlElement('input/text', '&lt;input type="text"&gt;')}}）按下 <kbd>Enter</kbd> 键，`submit` 事件将会被触发。直接调用 {{domxref("HTMLFormElement.submit()", "form.submit()")}} 方法时，事件不会发送到表单。
 
-> **备注：** 当试图提交一个未通过[验证](/zh-CN/docs/Learn/Forms/Form_validation)的表单时，会触发 {{domxref("HTMLInputElement/invalid_event", "invalid")}} 事件。在这种情况下，表单提交将会被验证机制阻止。因此，`sumbit` 事件也就不存在了。
+> [!NOTE]
+> 当试图提交一个未通过[验证](/zh-CN/docs/Learn/Forms/Form_validation)的表单时，会触发 {{domxref("HTMLInputElement/invalid_event", "invalid")}} 事件。在这种情况下，表单提交将会被验证机制阻止。因此，`sumbit` 事件也就不存在了。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlhtmlelement/version/index.md b/files/zh-cn/web/api/htmlhtmlelement/version/index.md
index bd7364c46a8641..ca033aa13c2b07 100644
--- a/files/zh-cn/web/api/htmlhtmlelement/version/index.md
+++ b/files/zh-cn/web/api/htmlhtmlelement/version/index.md
@@ -9,4 +9,5 @@ slug: Web/API/HTMLHtmlElement/version
 
 它返回有关文档的**文档类型定义（DTD）**的版本信息。尽管此属性能够被*Mozilla*识别，但此属性的返回值始终是空字符串。
 
-> **备注：** 此属性已被 W3C 的**HTML 4.01 技术建议**声明弃用，赞成使用 DTD 来获取文档的版本信息。
+> [!NOTE]
+> 此属性已被 W3C 的**HTML 4.01 技术建议**声明弃用，赞成使用 DTD 来获取文档的版本信息。
diff --git a/files/zh-cn/web/api/htmliframeelement/allowfullscreen/index.md b/files/zh-cn/web/api/htmliframeelement/allowfullscreen/index.md
index afffb87f6f5f01..309b3aaa4fbb41 100644
--- a/files/zh-cn/web/api/htmliframeelement/allowfullscreen/index.md
+++ b/files/zh-cn/web/api/htmliframeelement/allowfullscreen/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("HTMLIFrameElement")}} 接口的 **`allowFullscreen`** 属性是一个反映了 {{HTMLElement("iframe")}} 元素的 `allowfullscreen` 属性的布尔值，它表示 iframe 的内容是否允许使用 {{domxref("Element.requestFullscreen", "requestFullscreen()")}}。
 
-> **备注：** 此属性被视为遗留属性。请改用 `allow="fullscreen"` 和 {{domxref("HTMLIFrameElement.allow")}}。
+> [!NOTE]
+> 此属性被视为遗留属性。请改用 `allow="fullscreen"` 和 {{domxref("HTMLIFrameElement.allow")}}。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/htmliframeelement/browsingtopics/index.md b/files/zh-cn/web/api/htmliframeelement/browsingtopics/index.md
index c20431ed94868f..960d0060f1004e 100644
--- a/files/zh-cn/web/api/htmliframeelement/browsingtopics/index.md
+++ b/files/zh-cn/web/api/htmliframeelement/browsingtopics/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{APIRef("HTML DOM")}}{{SeeCompatTable}}{{non-standard_header}}
 
-> **警告：** 此特性目前遭到两家浏览器厂商反对。有关反对详情，请参阅[标准立场](/zh-CN/docs/Web/API/Topics_API#标准立场)部分。
+> [!WARNING]
+> 此特性目前遭到两家浏览器厂商反对。有关反对详情，请参阅[标准立场](/zh-CN/docs/Web/API/Topics_API#标准立场)部分。
 
 {{domxref("HTMLIFrameElement")}} 接口的 **`browsingTopics`** 属性是一个指定当前用户选择的主题应与之关联的 {{htmlelement("iframe")}} 源请求一起以 {{httpheader("Sec-Browsing-Topics")}} 标头发送的布尔值。这反映了 `browsingtopics` HTML 属性。
 
diff --git a/files/zh-cn/web/api/htmliframeelement/referrerpolicy/index.md b/files/zh-cn/web/api/htmliframeelement/referrerpolicy/index.md
index a7fd25571fe8d8..ed55fe8e5944e6 100644
--- a/files/zh-cn/web/api/htmliframeelement/referrerpolicy/index.md
+++ b/files/zh-cn/web/api/htmliframeelement/referrerpolicy/index.md
@@ -29,7 +29,8 @@ l10n:
 
   - : 当执行同源或跨源请求时发送完整的 URL。
 
-    > **备注：** 此策略将把受 TLS 保护的资源的源和路径泄露给不安全的源。仔细考虑此设置的影响。
+    > [!NOTE]
+    > 此策略将把受 TLS 保护的资源的源和路径泄露给不安全的源。仔细考虑此设置的影响。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlimageelement/image/index.md b/files/zh-cn/web/api/htmlimageelement/image/index.md
index 146be0f41bd1d0..4db5660fa59be0 100644
--- a/files/zh-cn/web/api/htmlimageelement/image/index.md
+++ b/files/zh-cn/web/api/htmlimageelement/image/index.md
@@ -36,7 +36,8 @@ document.body.appendChild(myImage);
 <img width="100" height="200" src="picture.jpg" />
 ```
 
-> **备注：** 无论构造函数中指定的大小是多少，都会加载整个位图。如果在构造时指定了尺寸信息，那么将会反应在实例的 {{domxref("HTMLImageElement.width")}} 和 {{domxref("HTMLImageElement.height")}} 属性上。图像自身的 CSS 像素值将会反应在{{domxref("HTMLImageElement.naturalWidth")}} 和 {{domxref("HTMLImageElement.naturalHeight")}}属性。如果没有指定值，那么两个属性的值相同
+> [!NOTE]
+> 无论构造函数中指定的大小是多少，都会加载整个位图。如果在构造时指定了尺寸信息，那么将会反应在实例的 {{domxref("HTMLImageElement.width")}} 和 {{domxref("HTMLImageElement.height")}} 属性上。图像自身的 CSS 像素值将会反应在{{domxref("HTMLImageElement.naturalWidth")}} 和 {{domxref("HTMLImageElement.naturalHeight")}}属性。如果没有指定值，那么两个属性的值相同
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/htmlimageelement/naturalheight/index.md b/files/zh-cn/web/api/htmlimageelement/naturalheight/index.md
index e4957077ca8698..9fcf92b9726cd0 100644
--- a/files/zh-cn/web/api/htmlimageelement/naturalheight/index.md
+++ b/files/zh-cn/web/api/htmlimageelement/naturalheight/index.md
@@ -9,7 +9,8 @@ slug: Web/API/HTMLImageElement/naturalHeight
 
 这是图像在没有限制其高度的情况下绘制的高度；如果你没有为图像指定高度，或者将图像放置在限制或明确指定图像高度的容器中，它将被渲染为如此高。
 
-> **备注：** 大多数时候自然高度是服务器发送的图像的实际高度。不过，浏览器可以在将图像推送到渲染器之前对其进行修改。例如，Chrome 会[降低低端设备上图像的分辨率](https://bugs.chromium.org/p/chromium/issues/detail?id=1187043#c7)。在这种情况下，`naturalHeight` 会将浏览器干预修改的图像高度视为自然高度，并返回该值。
+> [!NOTE]
+> 大多数时候自然高度是服务器发送的图像的实际高度。不过，浏览器可以在将图像推送到渲染器之前对其进行修改。例如，Chrome 会[降低低端设备上图像的分辨率](https://bugs.chromium.org/p/chromium/issues/detail?id=1187043#c7)。在这种情况下，`naturalHeight` 会将浏览器干预修改的图像高度视为自然高度，并返回该值。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.md b/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.md
index 35d9167eb6e441..47cc45ed272a4d 100644
--- a/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.md
+++ b/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLInputElement/webkitdirectory
 
 **`HTMLInputElement.webkitdirectory`** 是一个反应了 HTML 属性 [`webkitdirectory`](/zh-CN/docs/Web/HTML/Element/input/file#webkitdirectory) 的属性，其指示 {{HTMLElement("input")}} 元素应该让用户选择文件目录而非文件。在选择文件目录后，该目录及其整个内容层次结构将包含在所选项目集内。可以使用 {{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} 属性获取选定的文件系统条目。
 
-> **备注：** 该属性在规范中被称为 `webkitEntries` 的原因是，其起源于 Google Chrome 特定的 API。它有可能会被重命名。
+> [!NOTE]
+> 该属性在规范中被称为 `webkitEntries` 的原因是，其起源于 Google Chrome 特定的 API。它有可能会被重命名。
 
 ## 值
 
@@ -46,7 +47,8 @@ slug: Web/API/HTMLInputElement/webkitdirectory
 
 如果用户选择了 `PhotoAlbums`，则文件列表上将会包含上面列出的每个文件（而不包含目录）的 {{domxref("File")}} 对象。条目 `PIC2343.jpg` 的 `webkitRelativePath` 属性值将会是 `PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg`。即使 {{domxref("FileList")}} 是扁平的，这也使得知道层次结构成为可能。
 
-> **备注：** 在 _Chromium < 72_ 的版本中，`webkitRelativePath` 的行为表现有所不同。有关更多详细信息，请参见[此 bug](https://crbug.com/124187)。
+> [!NOTE]
+> 在 _Chromium < 72_ 的版本中，`webkitRelativePath` 的行为表现有所不同。有关更多详细信息，请参见[此 bug](https://crbug.com/124187)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md
index 9f147271ac0817..4a6d5ee2ea9f96 100644
--- a/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md
@@ -11,7 +11,8 @@ l10n:
 
 如果媒体元素的源是 {{domxref("MediaStream")}} 且其 `autoplay` 属性为 `true`，则该元素在激活时（即 {{domxref("MediaStream.active")}} 为 `true`）将开始播放。
 
-> **备注：** 自动播放音频（或带音轨的视频）的网站会给用户带来不愉快的体验，因此应尽量避免。如果你必须提供自动播放特性，则应使其成为选择性特性（要求用户明确启用）。然而，当创建媒体元素并在稍后由用户控制其源时，自动播放可能会很有用。
+> [!NOTE]
+> 自动播放音频（或带音轨的视频）的网站会给用户带来不愉快的体验，因此应尽量避免。如果你必须提供自动播放特性，则应使其成为选择性特性（要求用户明确启用）。然而，当创建媒体元素并在稍后由用户控制其源时，自动播放可能会很有用。
 
 有关自动播放、自动播放阻止以及当自动播放被用户的浏览器阻止时如何响应的深入介绍，请参阅我们的文章[媒体和 Web Audio API 的自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
 
@@ -19,7 +20,8 @@ l10n:
 
 布尔值，如果媒体元素在加载足够的内容以允许无中断播放时将立即开始播放，则为 `true`。
 
-> **备注：** 一些浏览器为用户提供了覆盖 `autoplay` 的特性，以防止未经许可或在后台播放具有干扰性的音频或视频。不要依赖于 `autoplay` 自动开始播放，而是使用 {{domxref("HTMLMediaElement.play_event", 'play')}} 事件。
+> [!NOTE]
+> 一些浏览器为用户提供了覆盖 `autoplay` 的特性，以防止未经许可或在后台播放具有干扰性的音频或视频。不要依赖于 `autoplay` 自动开始播放，而是使用 {{domxref("HTMLMediaElement.play_event", 'play')}} 事件。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/buffered/index.md b/files/zh-cn/web/api/htmlmediaelement/buffered/index.md
index 2f1078626b1a64..52af8b514cf59b 100644
--- a/files/zh-cn/web/api/htmlmediaelement/buffered/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/buffered/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLMediaElement/buffered
 
 **`HTMLMediaElement.buffered`** 返回一个只读 {{domxref("TimeRanges")}} 对象 返回媒体已缓冲的区域
 
-> **备注：** This feature is not available in [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> This feature is not available in [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API).
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.md b/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.md
index f72bead1eb4afb..bcc571e6dfb3b2 100644
--- a/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLMediaElement/canPlayType
 
 **`HTMLMediaElement.canPlayType()`** 方法会判断传递的媒体格式参数是否能够被播放。
 
-> **备注：** This feature is not available in [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> This feature is not available in [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API).
 
 ## 语法
 
@@ -28,7 +29,8 @@ str = audioOrVideo.canPlayType(mediaType);
 - `'maybe'`: 不能告诉你这种媒体文件是否能被播放，直到你尝试播放它。
 - `''` (empty string): 这种媒体文件不能被播放。
 
-> **备注：** 以前 `canPlayType('video/webm')` 会返回 `'probably'。`从 Gecko 28 开始，将返回 `'maybe'`。 ([Firefox bug 884275](https://bugzil.la/884275))
+> [!NOTE]
+> 以前 `canPlayType('video/webm')` 会返回 `'probably'。`从 Gecko 28 开始，将返回 `'maybe'`。 ([Firefox bug 884275](https://bugzil.la/884275))
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/currenttime/index.md b/files/zh-cn/web/api/htmlmediaelement/currenttime/index.md
index 84cb0616d3cf17..2d3d13bdd95ea0 100644
--- a/files/zh-cn/web/api/htmlmediaelement/currenttime/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/currenttime/index.md
@@ -5,7 +5,8 @@ slug: Web/API/HTMLMediaElement/currentTime
 
 {{APIRef("HTML DOM")}}**`HTMLMediaElement.currentTime`** 属性会以秒为单位返回当前媒体元素的播放时间。设置这个属性会改变媒体元素当前播放位置。
 
-> **备注：** 该处原文：The **`HTMLMediaElement.currentTime`** property gives the current playback time in seconds. Setting this value seeks the media to the new time.
+> [!NOTE]
+> 该处原文：The **`HTMLMediaElement.currentTime`** property gives the current playback time in seconds. Setting this value seeks the media to the new time.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/ended_event/index.md b/files/zh-cn/web/api/htmlmediaelement/ended_event/index.md
index a2f071054c149a..e952b282e7bb75 100644
--- a/files/zh-cn/web/api/htmlmediaelement/ended_event/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/ended_event/index.md
@@ -38,7 +38,8 @@ slug: Web/API/HTMLMediaElement/ended_event
   </tbody>
 </table>
 
-> **备注：** 该事件也在[媒体捕捉与媒体流](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API)和 [Web Audio](/zh-CN/docs/Web/API/Web_Audio_API) 这两个 API 中定义。
+> [!NOTE]
+> 该事件也在[媒体捕捉与媒体流](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API)和 [Web Audio](/zh-CN/docs/Web/API/Web_Audio_API) 这两个 API 中定义。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/loadeddata_event/index.md b/files/zh-cn/web/api/htmlmediaelement/loadeddata_event/index.md
index 5532be20856805..cdc071e6662081 100644
--- a/files/zh-cn/web/api/htmlmediaelement/loadeddata_event/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/loadeddata_event/index.md
@@ -38,7 +38,8 @@ slug: Web/API/HTMLMediaElement/loadeddata_event
   </tbody>
 </table>
 
-> **备注：** 若在移动/平板设备的浏览器设置中开启了流量节省（data-saver）模式，该事件则不会被触发。
+> [!NOTE]
+> 若在移动/平板设备的浏览器设置中开启了流量节省（data-saver）模式，该事件则不会被触发。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/play/index.md b/files/zh-cn/web/api/htmlmediaelement/play/index.md
index c757de7223159d..07c3238b8caf82 100644
--- a/files/zh-cn/web/api/htmlmediaelement/play/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/play/index.md
@@ -21,7 +21,8 @@ let promise = HTMLMediaElement.play();
 
 一个 {{jsxref("Promise")}}，当媒体成功开始播放时被解决，当播放因为任何原因失败时则被被拒绝。
 
-> **备注：** 旧版本的浏览器可能不会从 `play()` 返回值。
+> [!NOTE]
+> 旧版本的浏览器可能不会从 `play()` 返回值。
 
 ### 异常
 
@@ -84,7 +85,8 @@ function handlePlayButton() {
 
 {{Specifications}}
 
-> **备注：** WHATWG 版本和 W3C 版本的规范不一样（2016 年 4 月 20 日），一个返回 {{jsxref("Promise")}}，一个不返回。
+> [!NOTE]
+> WHATWG 版本和 W3C 版本的规范不一样（2016 年 4 月 20 日），一个返回 {{jsxref("Promise")}}，一个不返回。
 
 ## 浏览器兼容性
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/src/index.md b/files/zh-cn/web/api/htmlmediaelement/src/index.md
index e9b4384b7356d6..0ffc751eee6594 100644
--- a/files/zh-cn/web/api/htmlmediaelement/src/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/src/index.md
@@ -5,7 +5,8 @@ slug: Web/API/HTMLMediaElement/src
 
 {{APIRef("HTML DOM")}}**`HTMLMediaElement.src`**属性反映 HTML 媒体元素的`src` 属性的值，该属性指示要在元素中使用的媒体资源的 URL。
 
-> **备注：** 了解此元素中当前正在使用的媒体资源的 URL 的最佳方法是查看 {{domxref("HTMLMediaElement.currentSrc", "currentSrc")}}属性的值，该属性还考虑从 {{domxref("HTMLSourceElement")}} (代表 {{HTMLElement("source")}} 元素) 中提供的列表中选择最佳或首选媒体资源
+> [!NOTE]
+> 了解此元素中当前正在使用的媒体资源的 URL 的最佳方法是查看 {{domxref("HTMLMediaElement.currentSrc", "currentSrc")}}属性的值，该属性还考虑从 {{domxref("HTMLSourceElement")}} (代表 {{HTMLElement("source")}} 元素) 中提供的列表中选择最佳或首选媒体资源
 
 ## Syntax
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/srcobject/index.md b/files/zh-cn/web/api/htmlmediaelement/srcobject/index.md
index 201d21d11336ee..ec582bef614c55 100644
--- a/files/zh-cn/web/api/htmlmediaelement/srcobject/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/srcobject/index.md
@@ -11,7 +11,8 @@ l10n:
 
 该对象可以是一个 {{domxref("MediaStream")}}、一个 {{domxref("MediaSource")}}、一个 {{domxref("Blob")}} 或者一个 {{domxref("File")}} 类型（该类型继承自 `Blob`）。
 
-> **备注：** 截至 2020 年 3 月，仅有 Safari 浏览器完全支持 `srcObject`，只能使用 `MediaSource`、`MediaStream`、`Blob` 和 `File` 对象作为其值。其他浏览器仅支持 `MediaStream` 对象；在它们跟进支持之前，可以考虑回退到使用 {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} 来创建 URL，并将其赋给 {{domxref("HTMLMediaElement.src")}}（下文会有示例）。另外，自 108 版本起，Chromium 支持通过将从 worker 传输过来的 `MediaSource` 对象的 {{domxref("MediaSourceHandle")}} 实例赋值给 `srcObject`，来连接一个专用 worker。
+> [!NOTE]
+> 截至 2020 年 3 月，仅有 Safari 浏览器完全支持 `srcObject`，只能使用 `MediaSource`、`MediaStream`、`Blob` 和 `File` 对象作为其值。其他浏览器仅支持 `MediaStream` 对象；在它们跟进支持之前，可以考虑回退到使用 {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} 来创建 URL，并将其赋给 {{domxref("HTMLMediaElement.src")}}（下文会有示例）。另外，自 108 版本起，Chromium 支持通过将从 worker 传输过来的 `MediaSource` 对象的 {{domxref("MediaSourceHandle")}} 实例赋值给 `srcObject`，来连接一个专用 worker。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/htmlmetaelement/content/index.md b/files/zh-cn/web/api/htmlmetaelement/content/index.md
new file mode 100644
index 00000000000000..b624afc382a7d9
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmetaelement/content/index.md
@@ -0,0 +1,54 @@
+---
+title: HTMLMetaElement：content 属性
+slug: Web/API/HTMLMetaElement/content
+l10n:
+  sourceCommit: 83c8b8d54ac8fa2459b5a31011e68c0485084991
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLMetaElement.content`** 属性读取或设置 pragma 指令和具名 {{htmlelement("meta")}} 数据的 `content` 属性（用于和 {{domxref("HTMLMetaElement.name")}} 或者 {{domxref("HTMLMetaElement.httpEquiv")}} 一起使用）。更多信息，请参见 [content](/zh-CN/docs/Web/HTML/Element/meta#content) 属性。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+### 读取 meta 元素的 content
+
+以下示例查询一个 `name` 属性的值为 `keywords` 的 `<meta>` 元素。`content` 值输出到控制台以显示文档的[关键词](/zh-CN/docs/Web/HTML/Element/meta/name#html_规范中定义的标准元数据名称)：
+
+```js
+// 假设 <meta name="keywords" content="documentation, HTML, web">
+const meta = document.querySelector("meta[name='keywords']");
+console.log(meta.content);
+// "documentation, HTML, web"
+```
+
+### 创建具有 content 的 meta 元素
+
+以下示例创建一个新的 `<meta>` 元素，其 `name` 属性设置为 [`description`](/zh-CN/docs/Web/HTML/Element/meta/name#html_规范中定义的标准元数据名称)，`content` 属性设置文档的描述，并附加到文档 `<head>` 上：
+
+```js
+const meta = document.createElement("meta");
+meta.name = "description";
+meta.content =
+  "<meta> 元素用于以名称/值对的形式提供文档描述性元数据，name 属性给出元数据名称，content 属性给出其值。";
+document.head.appendChild(meta);
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{HTMLElement("meta")}}
+- {{domxref("HTMLMetaElement.name")}}
+- {{domxref("HTMLMetaElement.httpEquiv")}}
+- [学习：HTML 中的元数据](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#元数据：meta_元素)
diff --git a/files/zh-cn/web/api/htmlmetaelement/httpequiv/index.md b/files/zh-cn/web/api/htmlmetaelement/httpequiv/index.md
new file mode 100644
index 00000000000000..cdd2021e86a1d6
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmetaelement/httpequiv/index.md
@@ -0,0 +1,41 @@
+---
+title: HTMLMetaElement：httpEquiv 属性
+slug: Web/API/HTMLMetaElement/httpEquiv
+l10n:
+  sourceCommit: 83c8b8d54ac8fa2459b5a31011e68c0485084991
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLMetaElement.httpEquiv`** 属性读取或设置 {{domxref("HTMLMetaElement.content")}} 属性对应的 pragma 指令或 HTTP 响应标头名称。关于可能值的更多细节，请参阅 [http-equiv](/zh-CN/docs/Web/HTML/Element/meta#http-equiv) 属性。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+### 读取 meta 元素的 `http-equiv` 值
+
+以下示例查询一个 `<meta>` 元素的 `http-equiv` 属性。`http-equiv` 属性被输出到控制台，以显示 `refresh` [pragma 指令](/zh-CN/docs/Web/HTML/Element/meta#http-equiv)，它指示浏览器在 `content` 属性定义的秒数后刷新页面：
+
+```js
+// 假设 <meta http-equiv="refresh" content="10" />
+const meta = document.querySelector("meta[http-equiv]");
+console.log(meta.httpEquiv);
+// refresh
+console.log(meta.content);
+// 10
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{HTMLElement("meta")}}
diff --git a/files/zh-cn/web/api/htmlmetaelement/index.md b/files/zh-cn/web/api/htmlmetaelement/index.md
new file mode 100644
index 00000000000000..859b903006ce1a
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmetaelement/index.md
@@ -0,0 +1,74 @@
+---
+title: HTMLMetaElement
+slug: Web/API/HTMLMetaElement
+l10n:
+  sourceCommit: 83c8b8d54ac8fa2459b5a31011e68c0485084991
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLMetaElement`** 接口包含关于 HTML 中以 [`<meta>`](/zh-CN/docs/Web/HTML/Element/meta) 元素形式提供的文档的描述性元数据。该接口继承 {{domxref("HTMLElement")}} 接口中描述的所有属性和方法。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{HTMLElement("meta#charset")}}
+  - : HTML 文档的字符编码。
+- {{domxref("HTMLMetaElement.content")}}
+  - : 文档元数据的名称/值对的“值”部分。
+- {{domxref("HTMLMetaElement.httpEquiv")}}
+  - : pragma 指令的名称，文档的 HTTP 响应标头。
+- {{domxref("HTMLMetaElement.media")}}
+  - : `theme-color` 元数据属性的媒体上下文。
+- {{domxref("HTMLMetaElement.name")}}
+  - : 文档元数据的名称/值对的“名称”部分。
+- {{domxref("HTMLMetaElement.scheme")}} {{deprecated_inline}}
+  - : 定义 {{domxref("HTMLMetaElement.content")}} 属性中值的方案。此属性已被弃用，不应在新网页上使用。
+
+## 实例方法
+
+_没有特定的方法，从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 示例
+
+以下两个示例显示使用 `HTMLMetaElement` 接口的常规方法。详细的示例，请参阅上述[实例属性](#实例属性)部分中描述的各个属性页面。
+
+### 设置页面描述性元数据
+
+以下示例创建一个新的 `<meta>` 元素，其 `name` 属性设置为 [`description`](/zh-CN/docs/Web/HTML/Element/meta/name#html_规范中定义的标准元数据名称)，`content` 属性设置文档的描述，并附加到文档 `<head>` 上。
+
+```js
+const meta = document.createElement("meta");
+meta.name = "description";
+meta.content =
+  "<meta> 元素用于以名称/值对的形式提供文档描述性元数据，name 属性给出元数据名称，content 属性给出其值。";
+document.head.appendChild(meta);
+```
+
+### 设置视口元数据
+
+以下示例显示如何创建一个新的 `<meta>` 元素，其 `name` 属性设置为 [`viewport`](/zh-CN/docs/Web/HTML/Element/meta/name#其他规范中定义的标准元数据名称)，`content` 属性设置视口大小，并附加到文档 `<head>` 上。
+
+```js
+const meta = document.createElement("meta");
+meta.name = "viewport";
+meta.content = "width=device-width, initial-scale=1";
+document.head.appendChild(meta);
+```
+
+关于设置视口的更多信息，请参见[视口基础知识](/zh-CN/docs/Web/HTML/Viewport_meta_tag#视口基础知识)。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现此接口的 HTML 元素：{{HTMLElement("meta")}}
diff --git a/files/zh-cn/web/api/htmlmetaelement/media/index.md b/files/zh-cn/web/api/htmlmetaelement/media/index.md
new file mode 100644
index 00000000000000..f6d72161d30ad5
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmetaelement/media/index.md
@@ -0,0 +1,64 @@
+---
+title: HTMLMetaElement：media 属性
+slug: Web/API/HTMLMetaElement/media
+l10n:
+  sourceCommit: 83c8b8d54ac8fa2459b5a31011e68c0485084991
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLMetaElement.media`** 属性允许为 `theme-color` 元数据指定媒体。
+
+`theme-color` 属性允许在支持此属性的浏览器和操作系统中设置浏览器工具栏或 UI 的颜色。`media` 属性允许为不同的 `media` 值设置不同的主题颜色。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+### 为暗色模式设置主题色
+
+以下示例创建一个新的 `<meta>` 元素，其 `name` 属性设置为 [`theme-color`](/zh-CN/docs/Web/HTML/Element/meta/name#html_规范中定义的标准元数据名称)，`content` 属性设置为 `#3c790a`，`media` 属性设置为 `prefers-color-scheme: dark`，并把元素附加到文档 `<head>` 上。当用户在操作系统中指定暗色模式时，可以使用 `media` 属性设置不同的 `theme-color`：
+
+```js
+const meta = document.createElement("meta");
+meta.name = "theme-color";
+meta.content = "#3c790a";
+meta.media = "(prefers-color-scheme: dark)";
+document.head.appendChild(meta);
+```
+
+### 通过设备尺寸设置主题色
+
+大部分 meta 属性仅可使用一次，然而如果提供唯一的 `media` 值，则 `theme-color` 可以多次使用。
+
+这个例子添加两个带有 `theme-color` 的 meta 元素；一个用于所有设备，另一个用于小屏幕。匹配 `media` 查询的顺序很重要，因此应在文档中稍晚添加更具体的查询，如下所示：
+
+```js
+// 为所有设备添加主题色
+const meta1 = document.createElement("meta");
+meta1.name = "theme-color";
+meta1.content = "#ffffff";
+document.head.appendChild(meta1);
+
+// 为小设备添加主题色
+const meta2 = document.createElement("meta");
+meta2.name = "theme-color";
+meta2.media = "(max-width: 600px)";
+meta2.content = "#000000";
+document.head.appendChild(meta2);
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{HTMLElement("meta")}}
+- [媒体查询的可能值](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
diff --git a/files/zh-cn/web/api/htmlmetaelement/name/index.md b/files/zh-cn/web/api/htmlmetaelement/name/index.md
new file mode 100644
index 00000000000000..2ae34f62c97d40
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmetaelement/name/index.md
@@ -0,0 +1,51 @@
+---
+title: HTMLMetaElement：name 属性
+slug: Web/API/HTMLMetaElement/name
+l10n:
+  sourceCommit: 83c8b8d54ac8fa2459b5a31011e68c0485084991
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLMetaElement.name`** 属性用于联合 {{domxref("HTMLMetaElement.content")}} 定义文档元数据的名称/值对。`name` 属性定义元数据的名称，`content` 属性定义值。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+### 读取 meta 元素的元数据名称
+
+以下示例查询文档中第一个 `<meta>` 元素，`name` 值输出到控制台，显示为文档指定的[关键词](/zh-CN/docs/Web/HTML/Element/meta/name#html_规范中定义的标准元数据名称)：
+
+```js
+// 假设 <meta name="keywords" content="documentation, HTML, web technologies">
+const meta = document.querySelector("meta");
+console.log(meta.name);
+// "keywords"
+```
+
+### 使用 `author` 元数据创建 meta 元素
+
+以下示例创建一个新的 `<meta>` 元素，其 `name` 属性设置为 [`author`](/zh-CN/docs/Web/HTML/Element/meta/name#html_规范中定义的标准元数据名称)，`content` 属性设置文档的作者，并把元素附加到文档 `<head>` 上。
+
+```js
+let meta = document.createElement("meta");
+meta.name = "author";
+meta.content = "Franz Kafka";
+document.head.appendChild(meta);
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{HTMLElement("meta")}}
+- [name 属性的可能值](/zh-CN/docs/Web/HTML/Element/meta/name#html_规范中定义的标准元数据名称)
diff --git a/files/zh-cn/web/api/htmlmetaelement/scheme/index.md b/files/zh-cn/web/api/htmlmetaelement/scheme/index.md
new file mode 100644
index 00000000000000..2f5127f9733229
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmetaelement/scheme/index.md
@@ -0,0 +1,39 @@
+---
+title: HTMLMetaElement：scheme 属性
+slug: Web/API/HTMLMetaElement/scheme
+l10n:
+  sourceCommit: 83c8b8d54ac8fa2459b5a31011e68c0485084991
+---
+
+{{APIRef("HTML DOM")}}{{Deprecated_Header}}
+
+**`HTMLMetaElement.scheme`** 属性定义 {{domxref("HTMLMetaElement.content")}} 属性中值的方案。创建 `scheme` 属性是为了提供额外的用于解释 `content` 属性值的信息。`scheme` 属性将方案格式（例如：`YYYY-MM-DD`）或方案格式名称（例如：`ISBN`）或提供有关格式更多信息的 URI 作为其值。该方案定义 `content` 属性值的格式。如果浏览器或用户代理可识别该方案，则 `scheme` 内容会被解释为元素 {{domxref("HTMLMetaElement.name")}} 的扩展。
+
+此属性已被弃用，不应在新网页上使用。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+以下示例查询一个 `name` 属性为 `identifier` 的 `<meta>` 元素。`scheme` 值被输出到控制台，以显示元数据内容的方案：
+
+```js
+// 假设 <meta name="identifier" content="1580081754" scheme="ISBN">
+const meta = document.querySelector("meta[name='identifier']");
+console.log(meta.scheme);
+// "ISBN"
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{HTMLElement("meta")}}
diff --git a/files/zh-cn/web/api/htmltableelement/index.md b/files/zh-cn/web/api/htmltableelement/index.md
index 312b2cfa169174..079976c34e013b 100644
--- a/files/zh-cn/web/api/htmltableelement/index.md
+++ b/files/zh-cn/web/api/htmltableelement/index.md
@@ -26,7 +26,8 @@ _继承自父接口，{{DOMxRef("HTMLElement")}}。_
 
 ### 过时的属性
 
-> **警告：** 以下属性已经过时，应当避免使用它们。
+> [!WARNING]
+> 以下属性已经过时，应当避免使用它们。
 
 - {{DOMxRef("HTMLTableElement.align")}} {{Deprecated_Inline}}
   - : Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the [`align`](/zh-CN/docs/Web/HTML/Element/table#align) attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.
diff --git a/files/zh-cn/web/api/idbcursor/direction/index.md b/files/zh-cn/web/api/idbcursor/direction/index.md
index 7e2fa4b558e508..f68367206eecd8 100644
--- a/files/zh-cn/web/api/idbcursor/direction/index.md
+++ b/files/zh-cn/web/api/idbcursor/direction/index.md
@@ -32,7 +32,8 @@ cursor.direction;
 prev
 ```
 
-> **备注：** 我们不能改变游标的取值，因为这是个只读属性；应该在{{domxref("IDBObjectStore.openCursor")}}方法调用的第二个参数指定游标遍历的方向；
+> [!NOTE]
+> 我们不能改变游标的取值，因为这是个只读属性；应该在{{domxref("IDBObjectStore.openCursor")}}方法调用的第二个参数指定游标遍历的方向；
 
 使用游标遍历数据时，可以不需要我们指定在特定字段选择数据；我们可以直接获取所有数据，同时在每次循环迭代过程当中，我们可以通过 cursor.value.foo 获取数据，如下是一个完整的游标遍历数据的例子； [IDBCursor example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbcursor) ([view example live](https://mdn.github.io/dom-examples/indexeddb-examples/idbcursor/)).
 
diff --git a/files/zh-cn/web/api/idbcursor/index.md b/files/zh-cn/web/api/idbcursor/index.md
index 9d2377f256cb9f..5c3d114f97b5a7 100644
--- a/files/zh-cn/web/api/idbcursor/index.md
+++ b/files/zh-cn/web/api/idbcursor/index.md
@@ -37,7 +37,8 @@ slug: Web/API/IDBCursor
 
 {{deprecated_header}}
 
-> **警告：** 这些常量不再被支持。你应该使用字符串常量。([Firefox bug 891944](https://bugzil.la/891944))
+> [!WARNING]
+> 这些常量不再被支持。你应该使用字符串常量。([Firefox bug 891944](https://bugzil.la/891944))
 
 - `NEXT`: `"next"` :游标展示所有记录，包括重复的记录。它从主键区间下届开始逐步上升（按键的顺序单调递增）。
 - `NEXTUNIQUE` : `"nextunique"` : 游标展示所有记录，不包括重复的记录。如果同一个主键存在重复的记录，只有第一条迭代记录被取出。它从主键区间的下界开始逐步上升
diff --git a/files/zh-cn/web/api/idbdatabase/index.md b/files/zh-cn/web/api/idbdatabase/index.md
index 81592c8ce74c7e..ab1aaee4569781 100644
--- a/files/zh-cn/web/api/idbdatabase/index.md
+++ b/files/zh-cn/web/api/idbdatabase/index.md
@@ -9,9 +9,11 @@ IndexedDB 中的 **`IDBDatabase`** 接口提供一个到 [数据库的连接](/z
 
 {{AvailableInWorkers}}
 
-> **备注：** 在 IndexedDB 中所做的所有事情总是发生在[事务](/zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction)的上下文中，表示与数据库中的数据的交互。IndexedDB 中的所有对象——包括对象存储、索引和游标——都与特定事务绑定。因此，在事务之外你不能执行命令、访问数据或打开任何东西。
+> [!NOTE]
+> 在 IndexedDB 中所做的所有事情总是发生在[事务](/zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction)的上下文中，表示与数据库中的数据的交互。IndexedDB 中的所有对象——包括对象存储、索引和游标——都与特定事务绑定。因此，在事务之外你不能执行命令、访问数据或打开任何东西。
 
-> **备注：** 请注意，从 Firefox 40 开始，IndexedDB 事务具有宽松的持久性保证以提高性能（请参阅[bug 1112702](https://bugzilla.mozilla.org/show_bug.cgi?id=1112702)）以前在`readwrite`事务中[`IDBTransaction.oncomplete`](/zh-CN/docs/Web/API/IDBTransaction/oncomplete)被触发只有当所有数据都保证已刷新到磁盘时。在 Firefox 40+ 中，`complete`事件在操作系统被告知写入数据之后被触发，但可能在该数据实际上被刷新到磁盘之前。该`complete`因此，事件可以比以前更快地传递，但是，如果操作系统崩溃或者在将数据刷新到磁盘之前系统电源丢失，则整个事务将丢失的可能性很小。由于这种灾难性事件很少见，大多数消费者不应该进一步关注自己。如果由于某种原因必须确保持久性（例如，你要存储以后无法重新计算的关键数据），则可以`complete`通过使用实验（非标准）`readwriteflush`模式创建事务来强制事务在传递事件之前刷新到磁盘（请参阅[`IDBDatabase.transaction`](/zh-CN/docs/Web/API/IDBDatabase/transaction)）。
+> [!NOTE]
+> 请注意，从 Firefox 40 开始，IndexedDB 事务具有宽松的持久性保证以提高性能（请参阅[bug 1112702](https://bugzilla.mozilla.org/show_bug.cgi?id=1112702)）以前在`readwrite`事务中[`IDBTransaction.oncomplete`](/zh-CN/docs/Web/API/IDBTransaction/oncomplete)被触发只有当所有数据都保证已刷新到磁盘时。在 Firefox 40+ 中，`complete`事件在操作系统被告知写入数据之后被触发，但可能在该数据实际上被刷新到磁盘之前。该`complete`因此，事件可以比以前更快地传递，但是，如果操作系统崩溃或者在将数据刷新到磁盘之前系统电源丢失，则整个事务将丢失的可能性很小。由于这种灾难性事件很少见，大多数消费者不应该进一步关注自己。如果由于某种原因必须确保持久性（例如，你要存储以后无法重新计算的关键数据），则可以`complete`通过使用实验（非标准）`readwriteflush`模式创建事务来强制事务在传递事件之前刷新到磁盘（请参阅[`IDBDatabase.transaction`](/zh-CN/docs/Web/API/IDBDatabase/transaction)）。
 
 ## 方法
 
diff --git a/files/zh-cn/web/api/idbfactory/open/index.md b/files/zh-cn/web/api/idbfactory/open/index.md
index cd6c160f67482a..731a19bf287d02 100644
--- a/files/zh-cn/web/api/idbfactory/open/index.md
+++ b/files/zh-cn/web/api/idbfactory/open/index.md
@@ -63,7 +63,8 @@ var request = window.indexedDB.open("toDoList", {
 - options (version and storage) {{ NonStandardBadge() }}
   - : In Gecko, since [version 26](/zh-CN/Firefox/Releases/26), you can include an `options` object as a parameter of {{ domxref("IDBFactory.open") }} that contains the `version` number of the database, plus a storage value that specifies whether you want to use `permanent` (the default value) storage for the IndexedDB, or `temporary` storage (aka shared pool.) See [Firefox bug 785884](https://bugzil.la/785884) for more details. This is a non-standard feature that we are looking to standardise sometime in the future.
 
-> **备注：** Data in temporary storage persists until the global limit for the pool is reached. The global limit calculation is relatively complex, but we are considering changing it (see [Firefox bug 968272](https://bugzil.la/968272)). When the global limit is reached, then data for the least recently used origin is deleted. There's also a group limit (eTLD+1 group/domain) which is currently 20% of the global limit. All requets that would exceed the group limit are just rejected.
+> [!NOTE]
+> Data in temporary storage persists until the global limit for the pool is reached. The global limit calculation is relatively complex, but we are considering changing it (see [Firefox bug 968272](https://bugzil.la/968272)). When the global limit is reached, then data for the least recently used origin is deleted. There's also a group limit (eTLD+1 group/domain) which is currently 20% of the global limit. All requets that would exceed the group limit are just rejected.
 
 ## 返回
 
diff --git a/files/zh-cn/web/api/idbindex/index.md b/files/zh-cn/web/api/idbindex/index.md
index e82da6f7a8ce5a..7d30521e0dd83a 100644
--- a/files/zh-cn/web/api/idbindex/index.md
+++ b/files/zh-cn/web/api/idbindex/index.md
@@ -83,7 +83,8 @@ request.onsuccess = function(event) {
 };
 ```
 
-> **备注：** need to work out a way to retrieve a series/range of objects using an index, or just all of them. Is this possible with get, or is this a job for cursor?
+> [!NOTE]
+> need to work out a way to retrieve a series/range of objects using an index, or just all of them. Is this possible with get, or is this a job for cursor?
 
 ## Specifications
 
diff --git a/files/zh-cn/web/api/idbkeyrange/index.md b/files/zh-cn/web/api/idbkeyrange/index.md
index 725087b26db01a..b32cc4e24dc46b 100644
--- a/files/zh-cn/web/api/idbkeyrange/index.md
+++ b/files/zh-cn/web/api/idbkeyrange/index.md
@@ -70,7 +70,8 @@ slug: Web/API/IDBKeyRange
 
 以下示例用以说明该如果使用键范围。在此我们将 `keyRangeValue` 声明为 A ～ F 之间的范围。我们打开一个事务 (使用 {{domxref("IDBTransaction")}}) 和一个对象存储，并用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标，其中`keyRangeValue`是一个可选的键范围值，指定之后游标将只检索键在该范围内的记录。这里的键范围包括了“A”和“F”，因为我们还没声明键范围为开放边界。如果我们使用 `IDBKeyRange.bound("A", "F", true, true);`，那么这个键范围将不包括“A”和“F”，只包含它们之间的值。
 
-> **备注：** For a more complete example allowing you to experiment with key range, have a look at our [IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) repo ([view the example live too](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
+> [!NOTE]
+> For a more complete example allowing you to experiment with key range, have a look at our [IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange) repo ([view the example live too](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)).
 
 ```js
 function displayData() {
diff --git a/files/zh-cn/web/api/idbkeyrange/lowerbound_static/index.md b/files/zh-cn/web/api/idbkeyrange/lowerbound_static/index.md
index 5e0116bfd15ef9..ca537c07d2d680 100644
--- a/files/zh-cn/web/api/idbkeyrange/lowerbound_static/index.md
+++ b/files/zh-cn/web/api/idbkeyrange/lowerbound_static/index.md
@@ -39,7 +39,8 @@ var myIDBKeyRange = IDBKeyRange.lowerBound(lower, open);
 
 下面的示例演示如何使用下限键范围。在这里，我们声明`keyRangeValue = IDBKeyRange.lowerBound("F", false);`— 一个包含值“F”及其后所有内容的范围。我们打开一个事务（使用 {{domxref("IDBTransaction")}}）和一个对象存储，并使用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标，声明`keyRangeValue` 为其可选的键范围值。这意味着光标将只检索键值为“F”及其后面的所有记录。如果使用`IDBKeyRange.lowerBound("F", true);`，则该范围将不包括端点“F”，仅包括其后面的值。
 
-> **备注：** 要获得一个更完整的示例，使你能够使用键范围进行实验，请查看我们的 [IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange)（[实时查看该示例](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)）。
+> [!NOTE]
+> 要获得一个更完整的示例，使你能够使用键范围进行实验，请查看我们的 [IDBKeyRange-example](https://github.com/mdn/dom-examples/tree/main/indexeddb-examples/idbkeyrange)（[实时查看该示例](https://mdn.github.io/dom-examples/indexeddb-examples/idbkeyrange/)）。
 
 ```js
 function displayData() {
diff --git a/files/zh-cn/web/api/idbobjectstore/get/index.md b/files/zh-cn/web/api/idbobjectstore/get/index.md
index 812b57caf81a8c..a4c8e1bf8e54eb 100644
--- a/files/zh-cn/web/api/idbobjectstore/get/index.md
+++ b/files/zh-cn/web/api/idbobjectstore/get/index.md
@@ -9,7 +9,8 @@ slug: Web/API/IDBObjectStore/get
 
 如果成功找到值，则会创建其值的结构化克隆，并设置为“请求对象（request object）”的 [`result`](/zh-CN/IndexedDB/IDBRequest#attr_result) 。
 
-> **备注：** This method produces the same result for: a) a record that doesn't exist in the database and b) a record that has an undefined value. To tell these situations apart, call the `openCursor()` method with the same key. That method provides a cursor if the record exists, and no cursor if it does not.
+> [!NOTE]
+> This method produces the same result for: a) a record that doesn't exist in the database and b) a record that has an undefined value. To tell these situations apart, call the `openCursor()` method with the same key. That method provides a cursor if the record exists, and no cursor if it does not.
 
 {{AvailableInWorkers}}
 
diff --git a/files/zh-cn/web/api/idbobjectstore/index.md b/files/zh-cn/web/api/idbobjectstore/index.md
index b7f9d15e30e0d9..ad646c0369f21f 100644
--- a/files/zh-cn/web/api/idbobjectstore/index.md
+++ b/files/zh-cn/web/api/idbobjectstore/index.md
@@ -236,7 +236,8 @@ This method may raise a [DOMException](/zh-CN/docs/DOM/DOMException) with a [DOM
 | ReadOnlyError            | The transaction associated with this operation is in read-only [mode](/zh-CN/docs/IndexedDB/IDBTransaction#mode_constants). |
 | `DataError`              | The key or key range provided contains an invalid key.                                                                      |
 
-> **备注：** If the key that identifies the record is a Number, the key passed to the delete method must be a Number too, and not a String. So for example you might need to do the following:
+> [!NOTE]
+> If the key that identifies the record is a Number, the key passed to the delete method must be a Number too, and not a String. So for example you might need to do the following:
 >
 > ```js
 > var key_val = "42";
diff --git a/files/zh-cn/web/api/idbrequest/index.md b/files/zh-cn/web/api/idbrequest/index.md
index 9ca952bae69bb5..b9bc70bf929453 100644
--- a/files/zh-cn/web/api/idbrequest/index.md
+++ b/files/zh-cn/web/api/idbrequest/index.md
@@ -178,7 +178,8 @@ request.onupgradeneeded= function(event) {
 
 ### `readyState` constants
 
-> **警告：** These constants are no longer available. You should use directly the string constants instead. ([Firefox bug 887524](https://bugzil.la/887524))
+> [!WARNING]
+> These constants are no longer available. You should use directly the string constants instead. ([Firefox bug 887524](https://bugzil.la/887524))
 
 | Constant      | Value     | Description                                                         |
 | ------------- | --------- | ------------------------------------------------------------------- |
diff --git a/files/zh-cn/web/api/idbtransaction/index.md b/files/zh-cn/web/api/idbtransaction/index.md
index 829d42e522e7dc..066e04af71432f 100644
--- a/files/zh-cn/web/api/idbtransaction/index.md
+++ b/files/zh-cn/web/api/idbtransaction/index.md
@@ -78,7 +78,8 @@ Transactions can fail for a fixed number of reasons, all of which (except the us
 
 {{deprecated_header}}
 
-> **警告：** 这些常量将不再可用——它们在 Gecko 25 中被移除。你应该直接使用字符串常量来作为替代。 ([Firefox bug 888598](https://bugzil.la/888598))
+> [!WARNING]
+> 这些常量将不再可用——它们在 Gecko 25 中被移除。你应该直接使用字符串常量来作为替代。 ([Firefox bug 888598](https://bugzil.la/888598))
 
 Transactions 可使用以下三种模式中的一种：
 
diff --git a/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md b/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md
index a0d2cdb639ed75..9fa1f51d542f64 100644
--- a/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md
+++ b/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md
@@ -76,7 +76,8 @@ In this segment, we check to see if the form fields have all been filled in. If
 
 In this section we create an object called `newItem` that stores the data in the format required to insert it into the database. The next few lines open the database transaction and provide messages to notify the user if this was successful or failed.Then an `objectStore` is created into which the new item is added. The `notified` property of the data object indicates that the to-do list item's deadline has not yet come up and been notified - more on this later!
 
-> **备注：** The `db` variable stores a reference to the IndexedDB database instance; we can then use various properties of this variable to manipulate the data.
+> [!NOTE]
+> The `db` variable stores a reference to the IndexedDB database instance; we can then use various properties of this variable to manipulate the data.
 
 ```js
     request.onsuccess = function(event) {
diff --git a/files/zh-cn/web/api/indexeddb_api/index.md b/files/zh-cn/web/api/indexeddb_api/index.md
index 21ffdf31e26dfa..6f37d0ea4d1221 100644
--- a/files/zh-cn/web/api/indexeddb_api/index.md
+++ b/files/zh-cn/web/api/indexeddb_api/index.md
@@ -9,7 +9,8 @@ IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据
 
 {{AvailableInWorkers}}
 
-> **备注：** IndexedDB API 是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的 API，请尝试 [localForage](https://localforage.github.io/localForage/)、[dexie.js](http://www.dexie.org/)、[PouchDB](https://pouchdb.com/)、[idb](https://www.npmjs.com/package/idb)、[idb-keyval](https://www.npmjs.com/package/idb-keyval)、[JsStore](https://jsstore.net/) 或者 [lovefield](https://github.com/google/lovefield) 之类的库，这些库使 IndexedDB 对开发者来说更加友好。
+> [!NOTE]
+> IndexedDB API 是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的 API，请尝试 [localForage](https://localforage.github.io/localForage/)、[dexie.js](http://www.dexie.org/)、[PouchDB](https://pouchdb.com/)、[idb](https://www.npmjs.com/package/idb)、[idb-keyval](https://www.npmjs.com/package/idb-keyval)、[JsStore](https://jsstore.net/) 或者 [lovefield](https://github.com/google/lovefield) 之类的库，这些库使 IndexedDB 对开发者来说更加友好。
 
 ## 关键概念和用法
 
@@ -19,7 +20,8 @@ IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。
 - 从[使用 IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB) 指南的第一准则中学习异步使用 IndexedDB。
 - 同时使用 IndexedDB 储存离线数据和 Service Workers 储存离线资源，其简述请查看 [Service Workers 制作离线 PWA](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers)。
 
-> **备注：** 正如大多数的 web 储存解决方案一样，IndexedDB 也遵守[同源策略](/zh-CN/docs/Web/Security/Same-origin_policy)。因此当你在某个域名下操作储存数据的时候，你不能操作其他域名下的数据。
+> [!NOTE]
+> 正如大多数的 web 储存解决方案一样，IndexedDB 也遵守[同源策略](/zh-CN/docs/Web/Security/Same-origin_policy)。因此当你在某个域名下操作储存数据的时候，你不能操作其他域名下的数据。
 
 ### 同步和异步
 
diff --git a/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.md b/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.md
index 68101fee8819d2..cd59c5f37eabc4 100644
--- a/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.md
+++ b/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.md
@@ -42,7 +42,8 @@ open 请求不会立即打开数据库或者开始一个事务。对 `open()` 
 
 open 方法的二个参数是数据库的版本号。数据库的版本决定了数据库模式（schema），即数据库的对象存储（object store）以及存储结构。如果数据库不存在，`open` 操作会创建该数据库，然后触发 `onupgradeneeded` 事件，你需要在该事件的处理器中创建数据库模式。如果数据库已经存在，但你指定了一个更高的数据库版本，会直接触发 `onupgradeneeded` 事件，允许你在处理器中更新数据库模式。我们在后面的[创建或更新数据库的版本](#创建或更新数据库的版本)和 {{ domxref("IDBFactory.open") }} 参考页中会提到更多有关这方面的内容。
 
-> **警告：** 版本号是一个 `unsigned long long` 数字，这意味着它可以是一个特别大的数字，也意味着不能使用浮点数，否则它将会被转换成不超过它的最近整数，这可能导致事务无法启动，`upgradeneeded` 事件也不会被触发。例如，不要使用 2.4 作为版本号：`const request = indexedDB.open("MyTestDatabase", 2.4); // 不要这么做，因为版本会被取整为 2`
+> [!WARNING]
+> 版本号是一个 `unsigned long long` 数字，这意味着它可以是一个特别大的数字，也意味着不能使用浮点数，否则它将会被转换成不超过它的最近整数，这可能导致事务无法启动，`upgradeneeded` 事件也不会被触发。例如，不要使用 2.4 作为版本号：`const request = indexedDB.open("MyTestDatabase", 2.4); // 不要这么做，因为版本会被取整为 2`
 
 #### 生成处理器
 
@@ -254,7 +255,8 @@ request.onupgradeneeded = (event) => {
 
 使用 `readonly` 或 `readwrite` 模式都可以从已存在的对象存储里读取记录。但只有在 `readwrite` 事务中才能修改对象存储。你需要使用 {{domxref("IDBDatabase.transaction")}} 启动一个事务。该方法接受两个参数：`storeNames`（作用域，一个你想访问的对象存储的数组）、事务模式 `mode`（`readonly` 或 `readwrite`）。该方法返回一个包含 {{domxref("IDBIndex.objectStore")}} 方法（你可以使用它来访问对象存储）的事务对象。未指定 `mode` 时，事务默认为 `readonly` 模式。
 
-> **备注：** 从 Firfox 40 起，IndexedDB 事务放松了对持久性的保证以提高性能（参见 [Webkit bug 1112702](https://bugzil.la/1112702)）。以前在 `readwrite` 事务中，只有当所有的数据确保被写入磁盘时才会触发 {{domxref("IDBTransaction.complete_event", "complete")}} 事件。在 Firefox 40+ 中，当操作系统被告知去写入数据后 `complete` 事件便被触发，但此时数据可能还没有真正的写入磁盘。`complete` 事件触发因此变得更快，但这样会有极小的机会发生以下情况：如果操作系统崩溃或在数据被写入磁盘前断电，那么整个事务都将丢失。由于这种灾难事件是罕见的，大多数使用者并不需要过分担心。如果由于某些原因你必须确保数据的持久性（例如你要保存一个无法再次计算的关键数据），你可以使用实验性（非标准）的 `readwriteflush` 模式来创建事务以强制 `complete` 事件在数据写入磁盘后触发（参见 {{domxref("IDBDatabase.transaction")}}）。
+> [!NOTE]
+> 从 Firfox 40 起，IndexedDB 事务放松了对持久性的保证以提高性能（参见 [Webkit bug 1112702](https://bugzil.la/1112702)）。以前在 `readwrite` 事务中，只有当所有的数据确保被写入磁盘时才会触发 {{domxref("IDBTransaction.complete_event", "complete")}} 事件。在 Firefox 40+ 中，当操作系统被告知去写入数据后 `complete` 事件便被触发，但此时数据可能还没有真正的写入磁盘。`complete` 事件触发因此变得更快，但这样会有极小的机会发生以下情况：如果操作系统崩溃或在数据被写入磁盘前断电，那么整个事务都将丢失。由于这种灾难事件是罕见的，大多数使用者并不需要过分担心。如果由于某些原因你必须确保数据的持久性（例如你要保存一个无法再次计算的关键数据），你可以使用实验性（非标准）的 `readwriteflush` 模式来创建事务以强制 `complete` 事件在数据写入磁盘后触发（参见 {{domxref("IDBDatabase.transaction")}}）。
 
 你可以通过使用合适的作用域和模式来加速数据库访问，这有两个提示：
 
@@ -377,7 +379,8 @@ request.onsuccess = (event) => {
 
 所以这里我们创建了一个 `objectStore`，并通过指定 ssn 值（`444-44-4444`）从中请求了一条客户记录。然后我们把请求的结果保存在变量（`data`）中，并更新了该对象的 `age` 属性，之后创建了第二个请求（`requestUpdate`）将客户数据放回 `objectStore` 来覆盖之前的值。
 
-> **备注：** 在这个例子中我们必须指定 `readwrite` 事务，因为我们想要写入数据库，而不仅仅是从中读取。
+> [!NOTE]
+> 在这个例子中我们必须指定 `readwrite` 事务，因为我们想要写入数据库，而不仅仅是从中读取。
 
 ### 使用游标
 
@@ -415,7 +418,8 @@ objectStore.openCursor().onsuccess = (event) => {
 };
 ```
 
-> **备注：** 或者，你可以使用 `getAll()`（或 `getAllKeys()`）来处理这种情况。下面的代码的效果和上例相同：
+> [!NOTE]
+> 或者，你可以使用 `getAll()`（或 `getAllKeys()`）来处理这种情况。下面的代码的效果和上例相同：
 >
 > ```js
 > objectStore.getAll().onsuccess = (event) => {
@@ -620,7 +624,8 @@ Mozilla 已经在 Firefox 43+ 中实现了对 IndexedDB 数据进行本地化排
 
 {{domxref("IDBIndex")}} 还添加了新的属性来指示它已经被指定了区域设置：`locale`（返回被指定的区域或 null）和 `isAutoLocale`（如果创建索引时使用了自动的区域，即使用了平台默认的区域，则返回 `true`；否则返回 `false`）。
 
-> **备注：** 现在该特性被标志所隐藏——请在 `about:config` 中开启 `dom.indexedDB.experimental` 来启用它并测试该特性。
+> [!NOTE]
+> 现在该特性被标志所隐藏——请在 `about:config` 中开启 `dom.indexedDB.experimental` 来启用它并测试该特性。
 
 ## 完整的 IndexedDB 示例
 
diff --git a/files/zh-cn/web/api/inputevent/inputtype/index.md b/files/zh-cn/web/api/inputevent/inputtype/index.md
index 91df32f37eb176..899d52bc8a2e08 100644
--- a/files/zh-cn/web/api/inputevent/inputtype/index.md
+++ b/files/zh-cn/web/api/inputevent/inputtype/index.md
@@ -53,7 +53,8 @@ function logInputType(event) {
 
 {{EmbedLiveSample("示例", '100%', 500)}}
 
-> **备注：** 有关更详细的示例，请参见 [Masayuki Nakano 的 InputEvent 测试套件](https://d-toybox.com/studio/lib/input_event_viewer.html)。
+> [!NOTE]
+> 有关更详细的示例，请参见 [Masayuki Nakano 的 InputEvent 测试套件](https://d-toybox.com/studio/lib/input_event_viewer.html)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/installevent/index.md b/files/zh-cn/web/api/installevent/index.md
index 7605e05b27cd3d..4dd556afa3fcad 100644
--- a/files/zh-cn/web/api/installevent/index.md
+++ b/files/zh-cn/web/api/installevent/index.md
@@ -33,7 +33,8 @@ _从它的父类{{domxref("ExtendableEvent")}}继承方法。_
 
 该代码片段也展示了服务工作线程使用的缓存版本控制的最佳实践。虽然此示例只有一个缓存，但你可以将此方法用于多个缓存。代码将缓存的速记标识映射到特定的版本化缓存名称。
 
-> **备注：** service worker 的注册日志记录在 Chrome 浏览器中可以通过访问 chrome://serviceworker-internals 查看。
+> [!NOTE]
+> service worker 的注册日志记录在 Chrome 浏览器中可以通过访问 chrome://serviceworker-internals 查看。
 
 ```js
 var CACHE_VERSION = 1;
diff --git a/files/zh-cn/web/api/intersectionobserver/takerecords/index.md b/files/zh-cn/web/api/intersectionobserver/takerecords/index.md
index c8727626c7ffd5..1201978adb88d8 100644
--- a/files/zh-cn/web/api/intersectionobserver/takerecords/index.md
+++ b/files/zh-cn/web/api/intersectionobserver/takerecords/index.md
@@ -7,7 +7,8 @@ slug: Web/API/IntersectionObserver/takeRecords
 
 {{domxref("IntersectionObserver")}} 的方法**`takeRecords()`** 返回一个 {{domxref("IntersectionObserverEntry")}} 对象数组，每个对象的目标元素都包含每次相交的信息，可以显式通过调用此方法或隐式地通过观察者的回调自动调用。
 
-> **备注：** 如果使用回调来监视这些更改，则无需调用此方法。调用此方法会清除挂起的相交状态列表，因此不会运行回调。
+> [!NOTE]
+> 如果使用回调来监视这些更改，则无需调用此方法。调用此方法会清除挂起的相交状态列表，因此不会运行回调。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/keyboardevent/index.md b/files/zh-cn/web/api/keyboardevent/index.md
index 7f10d8ade252a0..287e93243a4416 100644
--- a/files/zh-cn/web/api/keyboardevent/index.md
+++ b/files/zh-cn/web/api/keyboardevent/index.md
@@ -101,7 +101,8 @@ _此接口从其父类 {{domxref("UIEvent")}} 和 {{domxref("Event")}} 中继承
 
   - : 返回一个字符串，其中包含事件所代表的物理按键的代码值。
 
-    > **警告：** 这个属性会忽略用户的键盘布局，所以如果用户在 QWERTY 布局的键盘上按下“Y”位置（第一行字母按键的中间）的按键时，这个属性会返回“KeyY”，即使用户使用 QWERTZ 布局的键盘（此时用户输入的就是“Z”，其他属性也会提示“Z”）或 Dvorak 键盘（此时用户输入的就是“F”）也是如此。如果要向用户显示正确的按键，可以使用 {{domxref("Keyboard.getLayoutMap()")}}。
+    > [!WARNING]
+    > 这个属性会忽略用户的键盘布局，所以如果用户在 QWERTY 布局的键盘上按下“Y”位置（第一行字母按键的中间）的按键时，这个属性会返回“KeyY”，即使用户使用 QWERTZ 布局的键盘（此时用户输入的就是“Z”，其他属性也会提示“Z”）或 Dvorak 键盘（此时用户输入的就是“F”）也是如此。如果要向用户显示正确的按键，可以使用 {{domxref("Keyboard.getLayoutMap()")}}。
 
 - {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
 
@@ -177,7 +178,8 @@ _此接口也从父类 {{domxref("UIEvent")}} 和 {{domxref("Event")}} 中继承
 
 有些按键可以切换指示灯的状态；其中包括大写锁定（Caps Lock）、数字锁定（Num Lock）和滚动锁定（Scroll Lock）等按键。在 Windows 和 Linux 中，这些按键只派发 `keydown` 和 `keyup` 事件。
 
-> **备注：** 在 Linux 上，Firefox 12 和更早版本也会为这些按键发送 `keypress` 事件。
+> [!NOTE]
+> 在 Linux 上，Firefox 12 和更早版本也会为这些按键发送 `keypress` 事件。
 
 不过，由于 macOS 事件模型的限制，大写锁定只能派发 `keydown` 事件。一些较旧的笔记本电脑型号（2007 年及以前的型号）支持数字锁定，但从那时起，即使在外置键盘上，macOS 也不支持数字锁定。在带有数字锁定键的旧款 MacBook 上，该键不会生成任何按键事件。如果连接了带有 F14 键的外置键盘，Gecko 确实支持滚动锁定键。在某些旧版本的 Firefox 中，该键会生成 `keypress` 事件；这种不一致的行为是 [Firefox bug 602812](https://bugzil.la/602812)。
 
diff --git a/files/zh-cn/web/api/keyboardevent/initkeyevent/index.md b/files/zh-cn/web/api/keyboardevent/initkeyevent/index.md
index d65f24e60a5852..7e09a261ccc857 100644
--- a/files/zh-cn/web/api/keyboardevent/initkeyevent/index.md
+++ b/files/zh-cn/web/api/keyboardevent/initkeyevent/index.md
@@ -5,7 +5,8 @@ slug: Web/API/KeyboardEvent/initKeyEvent
 
 {{APIRef("UI Events")}}
 
-> **警告：** 不要再使用这个方法，而是使用 {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} 构造函数。
+> [!WARNING]
+> 不要再使用这个方法，而是使用 {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} 构造函数。
 >
 > 该方法已从 DOM 规范中删除，并且不受任何现代浏览器支持。Firefox 从版本 93 开始默认通过首选项（`dom.keyboardevent.init_key_event.enabled`）隐藏此方法，并计划很快移除它。
 
diff --git a/files/zh-cn/web/api/keyboardevent/keycode/index.md b/files/zh-cn/web/api/keyboardevent/keycode/index.md
index 2b7fa4b3598df0..d7ac2919c63662 100644
--- a/files/zh-cn/web/api/keyboardevent/keycode/index.md
+++ b/files/zh-cn/web/api/keyboardevent/keycode/index.md
@@ -9,7 +9,8 @@ slug: Web/API/KeyboardEvent/keyCode
 
 你应该尽量避免使用它；它已经被弃用了一段时间。相反的，如果它在你的浏览器中被实现了的话，你应该使用{{domxref("KeyboardEvent.code")}}。不幸的是，有一些浏览器还是没有实现它，所以你在使用之前必须要小心，确认你所使用的那个被所有目标浏览器所支持。
 
-> **备注：** 在处理 keydown 和 keyup 事件时，Web 开发人员不应使用可打印字符的 keycode 属性。如上所述，keycode 属性对可打印字符不有用，尤其是那些按下 shift 或 alt 键的输入。在实现快捷键处理程序时，事件（“keypress”）事件通常更好（至少当 gecko 是正在使用的运行时）。详情请参见 Gecko 按键事件。
+> [!NOTE]
+> 在处理 keydown 和 keyup 事件时，Web 开发人员不应使用可打印字符的 keycode 属性。如上所述，keycode 属性对可打印字符不有用，尤其是那些按下 shift 或 alt 键的输入。在实现快捷键处理程序时，事件（“keypress”）事件通常更好（至少当 gecko 是正在使用的运行时）。详情请参见 Gecko 按键事件。
 
 ## Example
 
@@ -70,7 +71,8 @@ Google Chrome、Chromium 和 Safari 必须根据输入字符确定值。如果
 
 从 Firefox 60 开始，Gecko 会尽可能的根据以下规则额设置标点符号的 `keyCode` 值（当满足上述 7.1 或者 7.2 的时候）:
 
-> **警告：** 这些附加规则的目的是为了使键盘布局映射 unicode 字符映射到美国键盘标点符号的用户可以使用只支持 ASCII 的键盘或者美国键盘布局的 Firefox 的 web 应用。否则，新映射的 `keyCode` 值可能会和其他按键冲突。例如，如果当前键盘布局是俄语，`"Period"` 键 和 `"Slash"` 键的 `keyCode` 都会是 `190`（`KeyEvent.DOM_VK_PERIOD`）。如果你需要区分这些按键但是你自己又不想支持世界上所有的键盘布局，你可能应该使用 {{domxref("KeyboardEvent.code")}}。
+> [!WARNING]
+> 这些附加规则的目的是为了使键盘布局映射 unicode 字符映射到美国键盘标点符号的用户可以使用只支持 ASCII 的键盘或者美国键盘布局的 Firefox 的 web 应用。否则，新映射的 `keyCode` 值可能会和其他按键冲突。例如，如果当前键盘布局是俄语，`"Period"` 键 和 `"Slash"` 键的 `keyCode` 都会是 `190`（`KeyEvent.DOM_VK_PERIOD`）。如果你需要区分这些按键但是你自己又不想支持世界上所有的键盘布局，你可能应该使用 {{domxref("KeyboardEvent.code")}}。
 
 1. 如果运行 macOS 或者 Linux:
 
diff --git a/files/zh-cn/web/api/keyboardevent/metakey/index.md b/files/zh-cn/web/api/keyboardevent/metakey/index.md
index 22f96f72a3df3d..f3e0eff6918df1 100644
--- a/files/zh-cn/web/api/keyboardevent/metakey/index.md
+++ b/files/zh-cn/web/api/keyboardevent/metakey/index.md
@@ -7,7 +7,8 @@ slug: Web/API/KeyboardEvent/metaKey
 
 **`KeyboardEvent.metaKey`** 为只读属性，返回一个 {{jsxref("Boolean", "布尔值")}}，在事件发生时，用于指示 <kbd>Meta</kbd> 键是按下状态（`true`），还是释放状态（`false`）。
 
-> **备注：** 在 MAC 键盘上，表示 Command 键（<kbd>⌘</kbd>），在 Windows 键盘上，表示 Windows 键（<kbd>⊞</kbd>）。
+> [!NOTE]
+> 在 MAC 键盘上，表示 Command 键（<kbd>⌘</kbd>），在 Windows 键盘上，表示 Windows 键（<kbd>⊞</kbd>）。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/lockmanager/request/index.md b/files/zh-cn/web/api/lockmanager/request/index.md
index 596de5a5bbfbd8..c2ab67130b111e 100644
--- a/files/zh-cn/web/api/lockmanager/request/index.md
+++ b/files/zh-cn/web/api/lockmanager/request/index.md
@@ -46,7 +46,8 @@ request(name, options, callback)
 
       - : 如果为 `true`，则任何持有的同名锁将被释放，并且请求将被授予，抢占任何排队中的锁请求。默认值为 `false`。
 
-        > **警告：** 小心使用！之前在锁内运行的代码会继续运行，并且可能与现在持有锁的代码发生冲突。
+        > [!WARNING]
+        > 小心使用！之前在锁内运行的代码会继续运行，并且可能与现在持有锁的代码发生冲突。
 
     - `signal` {{optional_inline}}
       - : 一个 {{domxref("AbortSignal")}}（{{domxref("AbortController")}} 的 {{domxref("AbortController.signal", "signal")}} 属性）；如果指定并且 {{domxref("AbortController")}} 被中止，则锁请求将被丢弃（如果尚未授予）。
diff --git a/files/zh-cn/web/api/media_capture_and_streams_api/taking_still_photos/index.md b/files/zh-cn/web/api/media_capture_and_streams_api/taking_still_photos/index.md
index 2f10c3ea16e7df..a7d10866309c45 100644
--- a/files/zh-cn/web/api/media_capture_and_streams_api/taking_still_photos/index.md
+++ b/files/zh-cn/web/api/media_capture_and_streams_api/taking_still_photos/index.md
@@ -216,7 +216,8 @@ function takepicture() {
 
 然后，如果宽度和高度都是非零（意味着至少有潜在有效的图像数据），我们将画布的宽度和高度设置为与捕获帧的宽度和高度相匹配，然后调用 {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} 将视频的当前帧绘制到上下文中，用帧图像填充整个画布。
 
-> **备注：** 这可以利用 {{domxref("HTMLVideoElement")}} 接口看起来像任何接受 {{domxref("HTMLImageElement")}} 作为参数的 API 的 `HTMLImageElement`，将视频的当前帧渲染为图像的内容。
+> [!NOTE]
+> 这可以利用 {{domxref("HTMLVideoElement")}} 接口看起来像任何接受 {{domxref("HTMLImageElement")}} 作为参数的 API 的 `HTMLImageElement`，将视频的当前帧渲染为图像的内容。
 
 一旦画布包含捕获的图像，我们通过调用它的 {{domxref("HTMLCanvasElement.toDataURL()")}} 将它转换为 PNG 格式; 最后，我们调用 {{domxref("Element.setAttribute", "photo.setAttribute()")}} 来使我们捕获的静态框显示图像。
 
diff --git a/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.md b/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.md
index f70b1bbc371a71..44bc8ab3f971b2 100644
--- a/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.md
+++ b/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.md
@@ -24,7 +24,8 @@ var promise = navigator.mediaDevices.getDisplayMedia(constraints);
 
 一个被解析为 {{domxref("MediaStream")}} 的 {{jsxref("Promise")}}，其中包含一个视频轨道。视频轨道的内容来自用户选择的屏幕区域以及一个可选的音频轨道。
 
-> **备注：** 浏览器对音频的支持程度各不相同，既取决于是否支持，也取决于音频源。点击 [浏览器兼容性](#浏览器兼容性) 来查看各个浏览器的支持性。
+> [!NOTE]
+> 浏览器对音频的支持程度各不相同，既取决于是否支持，也取决于音频源。点击 [浏览器兼容性](#浏览器兼容性) 来查看各个浏览器的支持性。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/mediadevices/getusermedia/index.md b/files/zh-cn/web/api/mediadevices/getusermedia/index.md
index 01c5a68e3d40ac..20cfcff19603a0 100644
--- a/files/zh-cn/web/api/mediadevices/getusermedia/index.md
+++ b/files/zh-cn/web/api/mediadevices/getusermedia/index.md
@@ -9,7 +9,8 @@ slug: Web/API/MediaDevices/getUserMedia
 
 它返回一个 {{jsxref("Promise")}} 对象，成功后会`resolve`回调一个 {{domxref("MediaStream")}} 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，`promise`会`reject`回调一个 `PermissionDeniedError` 或者 `NotFoundError` 。
 
-> **备注：** 返回的 promise 对象可能既不会 resolve 也不会 reject，因为用户不是必须选择允许或拒绝。
+> [!NOTE]
+> 返回的 promise 对象可能既不会 resolve 也不会 reject，因为用户不是必须选择允许或拒绝。
 
 通常你可以使用 {{domxref("navigator.mediaDevices")}} 来获取 {{domxref("MediaDevices")}} ，例如：
 
@@ -123,7 +124,8 @@ var promise = navigator.mediaDevices.getUserMedia(constraints);
 
   - : 用户拒绝了当前的浏览器实例的访问请求；或者用户拒绝了当前会话的访问；或者用户在全局范围内拒绝了所有媒体访问请求。
 
-    > **备注：** 较旧版本的规范使用了`SecurityError`，但在新版本当中`SecurityError`被赋予了新的意义。
+    > [!NOTE]
+    > 较旧版本的规范使用了`SecurityError`，但在新版本当中`SecurityError`被赋予了新的意义。
 
 - `NotFoundError`［找不到错误］
   - : 找不到满足请求参数的媒体类型。
@@ -133,7 +135,8 @@ var promise = navigator.mediaDevices.getUserMedia(constraints);
 
   - : 指定的要求无法被设备满足，此异常是一个类型为`OverconstrainedError`的对象，拥有一个`constraint`属性，这个属性包含了当前无法被满足的`constraint`对象，还拥有一个`message`属性，包含了阅读友好的字符串用来说明情况。
 
-    > **备注：** 因为这个异常甚至可以在用户尚未授权使用当前设备的情况下抛出，所以应当可以当作一个探测设备能力属性的手段［fingerprinting surface］。
+    > [!NOTE]
+    > 因为这个异常甚至可以在用户尚未授权使用当前设备的情况下抛出，所以应当可以当作一个探测设备能力属性的手段［fingerprinting surface］。
 
 - `SecurityError`［安全错误］
   - : 在`getUserMedia()` 被调用的 {{domxref("Document")}} 上面，使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
diff --git a/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.md b/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.md
index b46df3aab20762..e045fe0168159c 100644
--- a/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.md
+++ b/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.md
@@ -14,7 +14,8 @@ slug: Web/API/MediaRecorder/dataavailable_event
 - 调用{{domxref("MediaRecorder.requestData()")}} `dataavailable`时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据；然后`Blob`创建一个新文件，并将媒体捕获继续到该 blob 中。
 - 如果将`timeslice`属性传递到开始媒体捕获的{{domxref("MediaRecorder.start()")}}方法中，`dataavailable`则每`timeslice`毫秒触发一次事件。这意味着每个 Blob 都有特定的持续时间（最后一个 Blob 除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。因此，如果该方法调用看起来像这样 - `recorder.start(1000);`-的`dataavailable`事件将媒体捕捉的每一秒发生火灾后，我们的事件处理程序将被称为与媒体数据的 BLOB 每秒即坚持一个第二长。你可以`timeslice`与{{domxref("MediaRecorder.stop()")}}和{{domxref("MediaRecorder.requestData()")}}一起使用，以产生多个相同长度的 Blob，以及其他较短的 Blob。
 
-> **备注：** 包含媒体数据的 {{domxref("Blob")}} 在 `dataavailable` 事件的 `data` 属性中可用。
+> [!NOTE]
+> 包含媒体数据的 {{domxref("Blob")}} 在 `dataavailable` 事件的 `data` 属性中可用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/mediarecorder/index.md b/files/zh-cn/web/api/mediarecorder/index.md
index 78612a39b3b60d..4b0b72f4037415 100644
--- a/files/zh-cn/web/api/mediarecorder/index.md
+++ b/files/zh-cn/web/api/mediarecorder/index.md
@@ -145,7 +145,8 @@ if (navigator.mediaDevices) {
 }
 ```
 
-> **备注：** This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; [refer to the source](https://github.com/mdn/web-dictaphone/) for the complete code.
+> [!NOTE]
+> This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; [refer to the source](https://github.com/mdn/web-dictaphone/) for the complete code.
 
 ## Specifications
 
diff --git a/files/zh-cn/web/api/mediarecorder/mediarecorder/index.md b/files/zh-cn/web/api/mediarecorder/mediarecorder/index.md
index da8b38b40b6636..0cbf8855353b76 100644
--- a/files/zh-cn/web/api/mediarecorder/mediarecorder/index.md
+++ b/files/zh-cn/web/api/mediarecorder/mediarecorder/index.md
@@ -26,7 +26,8 @@ var mediaRecorder = new MediaRecorder(stream[, options]);
     - `videoBitsPerSecond`: 指定视频的比特率。
     - `bitsPerSecond`: 指定音频和视频的比特率。此属性可以用来指定上面两个属性。如果上面两个属性只有其中之一和此属性被指定，则此属性可以用于设定另外一个属性。
 
-    > **备注：** 如果视频和/或音频的比特率没有指定，视频默认采用的比特率是 2.5Mbps，但音频的默认比特率并不固定，音频的默认比特率根据采样率和轨道数自适应。
+    > [!NOTE]
+    > 如果视频和/或音频的比特率没有指定，视频默认采用的比特率是 2.5Mbps，但音频的默认比特率并不固定，音频的默认比特率根据采样率和轨道数自适应。
 
 ## 例子
 
diff --git a/files/zh-cn/web/api/mediastream/addtrack/index.md b/files/zh-cn/web/api/mediastream/addtrack/index.md
index 3ff8c50bbdd2bc..2762ee913edfce 100644
--- a/files/zh-cn/web/api/mediastream/addtrack/index.md
+++ b/files/zh-cn/web/api/mediastream/addtrack/index.md
@@ -7,7 +7,8 @@ slug: Web/API/MediaStream/addTrack
 
 **`MediaStream.addTrack()`** 方法会给流添加一个新轨道。指定一个{{domxref("MediaStreamTrack")}}对象作为参数。
 
-> **备注：** 如果指定的 track 已经存在于流的 track set 里的话，该方法不会产生作用。
+> [!NOTE]
+> 如果指定的 track 已经存在于流的 track set 里的话，该方法不会产生作用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/mediastream/getaudiotracks/index.md b/files/zh-cn/web/api/mediastream/getaudiotracks/index.md
index 6be7742ef347c5..46e548eeed86f6 100644
--- a/files/zh-cn/web/api/mediastream/getaudiotracks/index.md
+++ b/files/zh-cn/web/api/mediastream/getaudiotracks/index.md
@@ -24,7 +24,8 @@ getAudioTracks()
 {{domxref("MediaStreamTrack")}} 对象数组，包含流中所有的音轨。音轨的 {{domxref("MediaStreamTrack.kind", "kind")}} 值为 `audio`
 。如果流中不包含音轨，则数组为空。
 
-> **备注：** 数组中返回的顺序并不是由规范定义的，事实上，每次调用 `getAudioTracks()` 的结果都可能有所不同。
+> [!NOTE]
+> 数组中返回的顺序并不是由规范定义的，事实上，每次调用 `getAudioTracks()` 的结果都可能有所不同。
 
 更早版本的本 API 中，包含一个用做列表中每个音频类型的 `AudioStreamTrack` 接口；现在已被合并至 {{domxref("MediaStreamTrack")}} 主接口中。
 
diff --git a/files/zh-cn/web/api/mediastream_recording_api/index.md b/files/zh-cn/web/api/mediastream_recording_api/index.md
index c3ebfa75fc9f7f..71165845eae7b6 100644
--- a/files/zh-cn/web/api/mediastream_recording_api/index.md
+++ b/files/zh-cn/web/api/mediastream_recording_api/index.md
@@ -23,7 +23,8 @@ MediaStream Recording API 由一个主接口{{domxref("MediaRecorder")}}组成
 6. 当源媒体停止播放时候，录制自动结束。
 7. 你可以随时结束录制通过使用 {{domxref("MediaRecorder.stop()")}}.
 
-> **备注：** 单单使用包含已经录制好媒体切片的{{domxref("Blob")}}s 将大可不能单独播放。媒体在重放之前需要重新组装。
+> [!NOTE]
+> 单单使用包含已经录制好媒体切片的{{domxref("Blob")}}s 将大可不能单独播放。媒体在重放之前需要重新组装。
 
 如果在录制过程中出错，[`error`](/zh-CN/docs/Web/API/Element/error_event) 事件将会传给`MediaRecorder`. 你可以设置{{domxref("MediaRecorder.onerror", "onerror")}}去监听 `error` 事件。
 
diff --git a/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md b/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
index 36cd05be61f936..bd135a270d7e36 100644
--- a/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
+++ b/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
@@ -47,7 +47,8 @@ header {
 }
 ```
 
-> **备注：** 现在的浏览器对[calc()](/zh-CN/docs/Web/CSS/calc)有着良好的支持，即使是像 IE9 那样的浏览器也可以。
+> [!NOTE]
+> 现在的浏览器对[calc()](/zh-CN/docs/Web/CSS/calc)有着良好的支持，即使是像 IE9 那样的浏览器也可以。
 
 ### 用于显示/隐藏的复选框
 
@@ -146,7 +147,8 @@ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 - 成功回调：一旦成功完成`getUserMedia`调用，此代码就会运行。
 - 错误/失败回调：如果`getUserMedia`调用由于任何原因而失败，则代码将运行。
 
-> **备注：** 下面的所有代码都放在`getUserMedia`成功回调中。
+> [!NOTE]
+> 下面的所有代码都放在`getUserMedia`成功回调中。
 
 ## 捕获媒体流
 
diff --git a/files/zh-cn/web/api/mediastreamtrack/getconstraints/index.md b/files/zh-cn/web/api/mediastreamtrack/getconstraints/index.md
index 47d6812e0a5d57..f6882b1a4c9ccb 100644
--- a/files/zh-cn/web/api/mediastreamtrack/getconstraints/index.md
+++ b/files/zh-cn/web/api/mediastreamtrack/getconstraints/index.md
@@ -23,7 +23,8 @@ var constraints = MediaStreamTrack.getConstraints();
 
 指示使用{{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}最近设置的网站或应用程序的可约束属性的{{domxref('MediaTrackConstraints')}}对象。返回对象中的属性按照与设置时相同的顺序列出，并且未包含未由网站或应用专门设置的属性。
 
-> **备注：** 返回的一组约束条件不一定描述媒体的实际状态; 如果任何约束无法满足，它们仍然包含在网站代码最初设置的返回对象中。要获得所有可约束属性的当前活动设置，你应该调用{{domxref("MediaStreamTrack.getSettings", "getSettings()")}}。
+> [!NOTE]
+> 返回的一组约束条件不一定描述媒体的实际状态; 如果任何约束无法满足，它们仍然包含在网站代码最初设置的返回对象中。要获得所有可约束属性的当前活动设置，你应该调用{{domxref("MediaStreamTrack.getSettings", "getSettings()")}}。
 
 ## 例
 
diff --git a/files/zh-cn/web/api/mouseevent/buttons/index.md b/files/zh-cn/web/api/mouseevent/buttons/index.md
index f823586ac58294..48aae98ba4723d 100644
--- a/files/zh-cn/web/api/mouseevent/buttons/index.md
+++ b/files/zh-cn/web/api/mouseevent/buttons/index.md
@@ -9,7 +9,8 @@ slug: Web/API/MouseEvent/buttons
 
 每一个按键都用一个给定的数（见下文）表示。如果同时多个按键被按下，buttons 的值为各键对应值做与计算（+）后的值。例如，如果右键（2）和滚轮键（4）被同时按下，buttons 的值为 2 + 4 = 6。
 
-> **备注：** 属性 MouseEvent.button 和 MouseEvent.buttons 是不同的。MouseEvent.buttons 可指示任意鼠标事件中鼠标的按键情况，而 MouseEvent.button 只能保证在由按下和释放一个或多个按键时触发的事件中获得正确的值。
+> [!NOTE]
+> 属性 MouseEvent.button 和 MouseEvent.buttons 是不同的。MouseEvent.buttons 可指示任意鼠标事件中鼠标的按键情况，而 MouseEvent.button 只能保证在由按下和释放一个或多个按键时触发的事件中获得正确的值。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/mouseevent/metakey/index.md b/files/zh-cn/web/api/mouseevent/metakey/index.md
index ef733f197a3bf4..3a7e222d64fd02 100644
--- a/files/zh-cn/web/api/mouseevent/metakey/index.md
+++ b/files/zh-cn/web/api/mouseevent/metakey/index.md
@@ -7,7 +7,8 @@ slug: Web/API/MouseEvent/metaKey
 
 **`MouseEvent.metaKey`** 为只读属性，返回一个{{jsxref("Boolean", "布尔值")}}，在鼠标事件发生时，用于指示 <kbd>Meta</kbd> 键是按下状态（`true`），还是释放状态（`false`）。
 
-> **备注：** 在 MAC 键盘上，表示 Command 键（<kbd>⌘</kbd>），在 Windows 键盘上，表示 Windows 键（<kbd>⊞</kbd>）。
+> [!NOTE]
+> 在 MAC 键盘上，表示 Command 键（<kbd>⌘</kbd>），在 Windows 键盘上，表示 Windows 键（<kbd>⊞</kbd>）。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/mouseevent/screenx/index.md b/files/zh-cn/web/api/mouseevent/screenx/index.md
index 7de0d97c85fabf..7246cb9874d3eb 100644
--- a/files/zh-cn/web/api/mouseevent/screenx/index.md
+++ b/files/zh-cn/web/api/mouseevent/screenx/index.md
@@ -7,7 +7,8 @@ slug: Web/API/MouseEvent/screenX
 
 **`screenX`** 是 {{domxref("MouseEvent")}} 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。
 
-> **备注：** 在多屏显示的环境下，水平对齐的屏幕将被视为单个设备，因此 `screenX` 值的范围将增加到屏幕的组合宽度。
+> [!NOTE]
+> 在多屏显示的环境下，水平对齐的屏幕将被视为单个设备，因此 `screenX` 值的范围将增加到屏幕的组合宽度。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/mutationobserver/disconnect/index.md b/files/zh-cn/web/api/mutationobserver/disconnect/index.md
index a7d85d2f9088b1..33d9935cfa05f7 100644
--- a/files/zh-cn/web/api/mutationobserver/disconnect/index.md
+++ b/files/zh-cn/web/api/mutationobserver/disconnect/index.md
@@ -21,7 +21,8 @@ mutationObserver.disconnect()
 
 `undefined`。
 
-> **备注：** 所有已经检测到但是尚未向观察者报告的变动都会被丢弃。
+> [!NOTE]
+> 所有已经检测到但是尚未向观察者报告的变动都会被丢弃。
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/api/mutationobserver/takerecords/index.md b/files/zh-cn/web/api/mutationobserver/takerecords/index.md
index 2679da6f6c3da9..717b8536931068 100644
--- a/files/zh-cn/web/api/mutationobserver/takerecords/index.md
+++ b/files/zh-cn/web/api/mutationobserver/takerecords/index.md
@@ -21,7 +21,8 @@ mutationRecords = mutationObserver.takeRecords()
 
 返回一个{{domxref("MutationRecord")}} 对象列表，每个对象都描述了应用于 DOM 树某部分的一次改动。
 
-> **备注：** 调用 `takeRecords()` 后，已发生但未传递给回调的变更队列将保留为空。
+> [!NOTE]
+> 调用 `takeRecords()` 后，已发生但未传递给回调的变更队列将保留为空。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/namednodemap/index.md b/files/zh-cn/web/api/namednodemap/index.md
index 17449be4ab5ab7..30012028f4d7ff 100644
--- a/files/zh-cn/web/api/namednodemap/index.md
+++ b/files/zh-cn/web/api/namednodemap/index.md
@@ -9,7 +9,8 @@ slug: Web/API/NamedNodeMap
 
 `NamedNodeMap` 对象是即时的 (_live_)，因此，如果它内部包含的对象发生改变的话，该对象会自动更新到最新的状态。
 
-> **备注：** 尽管被称为 `NamedNodeMap`，但这个接口不是用来处理节点对象 ({{domxref("Node")}})，而是用来处理属性节点对象 ({{domxref("Attr")}})，属性节点原来是一种特殊的节点 ({{domxref("Node")}})，仍然在某些实现环境（浏览器）中有效。
+> [!NOTE]
+> 尽管被称为 `NamedNodeMap`，但这个接口不是用来处理节点对象 ({{domxref("Node")}})，而是用来处理属性节点对象 ({{domxref("Attr")}})，属性节点原来是一种特殊的节点 ({{domxref("Node")}})，仍然在某些实现环境（浏览器）中有效。
 
 ## 属性
 
diff --git a/files/zh-cn/web/api/navigator/activevrdisplays/index.md b/files/zh-cn/web/api/navigator/activevrdisplays/index.md
index 21bdcda9dd7d88..a61be30f50a986 100644
--- a/files/zh-cn/web/api/navigator/activevrdisplays/index.md
+++ b/files/zh-cn/web/api/navigator/activevrdisplays/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("Navigator")}} 接口的只读属性 **`activeVRDisplays`** 返回一个包含所有当前正在呈现（{{domxref("VRDisplay.ispresenting")}} 为 `true`）的 {{domxref("VRDisplay")}} 对象的数组。
 
-> **备注：** 此属性是旧版 [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) 的一部分。它已被 [WebXR 设备 API](https://immersive-web.github.io/webxr/) 取代。
+> [!NOTE]
+> 此属性是旧版 [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/) 的一部分。它已被 [WebXR 设备 API](https://immersive-web.github.io/webxr/) 取代。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/appcodename/index.md b/files/zh-cn/web/api/navigator/appcodename/index.md
index 2b497ca960bd9f..c692cc71225435 100644
--- a/files/zh-cn/web/api/navigator/appcodename/index.md
+++ b/files/zh-cn/web/api/navigator/appcodename/index.md
@@ -9,7 +9,8 @@ l10n:
 
 在任何浏览器中，**`Navigator.appCodeName`** 属性的值始终为“`Mozilla`”。此属性仅出于兼容性目的而保留。
 
-> **备注：** 请勿依赖此属性返回真实的产品名称。所有浏览器都将“`Mozilla`”作为此属性的值返回。
+> [!NOTE]
+> 请勿依赖此属性返回真实的产品名称。所有浏览器都将“`Mozilla`”作为此属性的值返回。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/appname/index.md b/files/zh-cn/web/api/navigator/appname/index.md
index 8a313da1dad058..aacf402a4d2c79 100644
--- a/files/zh-cn/web/api/navigator/appname/index.md
+++ b/files/zh-cn/web/api/navigator/appname/index.md
@@ -9,7 +9,8 @@ l10n:
 
 在任何浏览器中，**`Navigator.appName`** 属性的值始终为“`Netscape`”。此属性仅出于兼容性目的而保留。
 
-> **备注：** 请勿依赖此属性返回真实的产品名称。所有浏览器都将“`Netscape`”作为此属性的值返回。
+> [!NOTE]
+> 请勿依赖此属性返回真实的产品名称。所有浏览器都将“`Netscape`”作为此属性的值返回。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/appversion/index.md b/files/zh-cn/web/api/navigator/appversion/index.md
index 6a96dbbf8405af..a10bce237d760d 100644
--- a/files/zh-cn/web/api/navigator/appversion/index.md
+++ b/files/zh-cn/web/api/navigator/appversion/index.md
@@ -9,7 +9,8 @@ l10n:
 
 返回“`4.0`”或一个代表浏览器版本信息的字符串。
 
-> **备注：** 不要依赖此属性返回正确的浏览器版本。
+> [!NOTE]
+> 不要依赖此属性返回正确的浏览器版本。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/cookieenabled/index.md b/files/zh-cn/web/api/navigator/cookieenabled/index.md
index 0aae8daa89d590..54c02fc6cf8345 100644
--- a/files/zh-cn/web/api/navigator/cookieenabled/index.md
+++ b/files/zh-cn/web/api/navigator/cookieenabled/index.md
@@ -15,9 +15,11 @@ l10n:
 
 一个布尔值。
 
-> **备注：** 当浏览器配置为阻止第三方的 cookie 时，如果在第三方 iframe 中调用 `navigator.cookieEnabled`，它会在 Safari、Edge Spartan 和 IE 中返回 `true`（而在此情况下尝试设置 cookie 会失败）。在 Firefox 和基于 Chromium 的浏览器中，它会返回 `false`。
+> [!NOTE]
+> 当浏览器配置为阻止第三方的 cookie 时，如果在第三方 iframe 中调用 `navigator.cookieEnabled`，它会在 Safari、Edge Spartan 和 IE 中返回 `true`（而在此情况下尝试设置 cookie 会失败）。在 Firefox 和基于 Chromium 的浏览器中，它会返回 `false`。
 
-> **备注：** 在某些情况下，Web 浏览器可能会阻止写入某些 cookie。例如，基于 Chrome 的浏览器以及一些实验版本的 Firefox 不允许创建具有 [`SameSite=None`](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 属性的 cookie，除非它们通过 HTTPS 创建并具有 `Secure` 属性。
+> [!NOTE]
+> 在某些情况下，Web 浏览器可能会阻止写入某些 cookie。例如，基于 Chrome 的浏览器以及一些实验版本的 Firefox 不允许创建具有 [`SameSite=None`](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 属性的 cookie，除非它们通过 HTTPS 创建并具有 `Secure` 属性。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/navigator/geolocation/index.md b/files/zh-cn/web/api/navigator/geolocation/index.md
index 30d452762ebed6..064e9385f87914 100644
--- a/files/zh-cn/web/api/navigator/geolocation/index.md
+++ b/files/zh-cn/web/api/navigator/geolocation/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Navigator.geolocation`** 只读属性返回 {{domxref("Geolocation")}} 对象，该对象允许 Web 内容访问设备的位置。这允许网站或应用程序根据用户的位置提供定制化的结果。
 
-> **备注：** 出于安全考虑，当网页请求获取用户位置信息时，用户会被提示进行授权。注意，不同浏览器在请求权限时有不同的策略和方式。
+> [!NOTE]
+> 出于安全考虑，当网页请求获取用户位置信息时，用户会被提示进行授权。注意，不同浏览器在请求权限时有不同的策略和方式。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/getbattery/index.md b/files/zh-cn/web/api/navigator/getbattery/index.md
index 3820d28072fe6b..37cb676a90efd0 100644
--- a/files/zh-cn/web/api/navigator/getbattery/index.md
+++ b/files/zh-cn/web/api/navigator/getbattery/index.md
@@ -11,7 +11,8 @@ l10n:
 
 自 Chrome 103 起，{{domxref("Battery Status API", "", "", "nocode")}} 的 `Navigator.getBattery()` 方法只在严格上下文中暴露。
 
-> **备注：** 对该特性的访问可由 {{HTTPHeader("Permissions-Policy")}} 的 {{HTTPHeader("Permissions-Policy/battery","battery")}} 指令控制。
+> [!NOTE]
+> 对该特性的访问可由 {{HTTPHeader("Permissions-Policy")}} 的 {{HTTPHeader("Permissions-Policy/battery","battery")}} 指令控制。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/navigator/getusermedia/index.md b/files/zh-cn/web/api/navigator/getusermedia/index.md
index d8e9f3f2d71517..b8bfb6d44f899d 100644
--- a/files/zh-cn/web/api/navigator/getusermedia/index.md
+++ b/files/zh-cn/web/api/navigator/getusermedia/index.md
@@ -3,7 +3,8 @@ title: navigator.getUserMedia
 slug: Web/API/Navigator/getUserMedia
 ---
 
-> **备注：** 此 API 已更名为 {{domxref("MediaDevices.getUserMedia()")}}。请使用那个版本进行替代！这个已废弃的 API 版本仅为了向后兼容而存在。
+> [!NOTE]
+> 此 API 已更名为 {{domxref("MediaDevices.getUserMedia()")}}。请使用那个版本进行替代！这个已废弃的 API 版本仅为了向后兼容而存在。
 
 {{APIRef("Media Capture and Streams")}}{{deprecated_header}}
 
@@ -94,7 +95,8 @@ if (navigator.getUserMedia) {
 
 {{Compat}}
 
-> **警告：** 新代码应当使用 {{domxref("Navigator.mediaDevices.getUserMedia()")}} 替代。
+> [!WARNING]
+> 新代码应当使用 {{domxref("Navigator.mediaDevices.getUserMedia()")}} 替代。
 
 ## 参见
 
diff --git a/files/zh-cn/web/api/navigator/mimetypes/index.md b/files/zh-cn/web/api/navigator/mimetypes/index.md
index 7b0bfa196afe8a..632e77bce30794 100644
--- a/files/zh-cn/web/api/navigator/mimetypes/index.md
+++ b/files/zh-cn/web/api/navigator/mimetypes/index.md
@@ -11,7 +11,8 @@ l10n:
 
 最新版本的规范对返回的 MIME 类型集合进行了硬编码。如果支持 PDF 文件内联查看，则会列出 `application/pdf` 和 `text/pdf`。否则返回空列表。
 
-> **备注：** 使用 {{domxref("Navigator.pdfViewerEnabled")}} 来判断是否支持 PDF 内联查看。请不要根据此属性推断。
+> [!NOTE]
+> 使用 {{domxref("Navigator.pdfViewerEnabled")}} 来判断是否支持 PDF 内联查看。请不要根据此属性推断。
 
 旧版浏览器不会硬编码此属性返回的列表，并可能返回其他 MIME 类型。
 
diff --git a/files/zh-cn/web/api/navigator/pdfviewerenabled/index.md b/files/zh-cn/web/api/navigator/pdfviewerenabled/index.md
index d033c34d0aa565..04bac335a64e4f 100644
--- a/files/zh-cn/web/api/navigator/pdfviewerenabled/index.md
+++ b/files/zh-cn/web/api/navigator/pdfviewerenabled/index.md
@@ -11,7 +11,8 @@ l10n:
 
 如果浏览器不支持内联显示，则 PDF 文件将被下载，并可能由外部应用程序处理。
 
-> **备注：** 此方法取代了多种传统的判断浏览器是否支持内联显示 PDF 文件的方法。
+> [!NOTE]
+> 此方法取代了多种传统的判断浏览器是否支持内联显示 PDF 文件的方法。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/platform/index.md b/files/zh-cn/web/api/navigator/platform/index.md
index cc5ea7df041689..de5d0247c81ef4 100644
--- a/files/zh-cn/web/api/navigator/platform/index.md
+++ b/files/zh-cn/web/api/navigator/platform/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("Navigator")}} 接口的 **`platform`** 只读属性返回一个字符串，用于标识用户浏览器所在的平台。
 
-> **备注：** 一般来说，你应该尽可能避免编写使用此类方法或属性来尝试查找有关用户环境的信息的代码，而是应该编写[特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)的代码。
+> [!NOTE]
+> 一般来说，你应该尽可能避免编写使用此类方法或属性来尝试查找有关用户环境的信息的代码，而是应该编写[特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)的代码。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/plugins/index.md b/files/zh-cn/web/api/navigator/plugins/index.md
index 22688a2030eb4a..6ead05e854250e 100644
--- a/files/zh-cn/web/api/navigator/plugins/index.md
+++ b/files/zh-cn/web/api/navigator/plugins/index.md
@@ -11,7 +11,8 @@ l10n:
 
 最新版本的规范对返回的列表进行了硬编码。如果支持内联查看 PDF 文件，则该属性列出五个标准插件。如果不支持内联查看 PDF，则返回空列表。
 
-> **备注：** 使用 {{domxref("Navigator.pdfViewerEnabled")}} 来确定是否支持内联查看 PDF 文件。不要从该属性中推断。“五个标准插件”是开发人员最常用于特征检测内联 PDF 查看的插件。返回这些插件可确保旧代码更可靠地确定是否支持内联查看。但是，这种方法不建议用于新代码，因为此属性可能最终会被删除。
+> [!NOTE]
+> 使用 {{domxref("Navigator.pdfViewerEnabled")}} 来确定是否支持内联查看 PDF 文件。不要从该属性中推断。“五个标准插件”是开发人员最常用于特征检测内联 PDF 查看的插件。返回这些插件可确保旧代码更可靠地确定是否支持内联查看。但是，这种方法不建议用于新代码，因为此属性可能最终会被删除。
 
 旧版本的浏览器还列出了 Adobe Flash 和 PDF 查看器扩展的插件。
 
diff --git a/files/zh-cn/web/api/navigator/product/index.md b/files/zh-cn/web/api/navigator/product/index.md
index c6b78bb55209b9..0af6581a6b8476 100644
--- a/files/zh-cn/web/api/navigator/product/index.md
+++ b/files/zh-cn/web/api/navigator/product/index.md
@@ -9,7 +9,8 @@ l10n:
 
 在任何浏览器中，**`Navigator.product`** 属性的值始终为“`Gecko`”，此属性仅出于兼容性目的而保留。
 
-> **备注：** 请勿依赖此属性返回真实的产品名称。所有浏览器都将“`Gecko`”作为此属性的值返回。
+> [!NOTE]
+> 请勿依赖此属性返回真实的产品名称。所有浏览器都将“`Gecko`”作为此属性的值返回。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/navigator/registerprotocolhandler/index.md b/files/zh-cn/web/api/navigator/registerprotocolhandler/index.md
index 41a85c17c72baa..aba10c2bd122bb 100644
--- a/files/zh-cn/web/api/navigator/registerprotocolhandler/index.md
+++ b/files/zh-cn/web/api/navigator/registerprotocolhandler/index.md
@@ -15,7 +15,8 @@ slug: Web/API/Navigator/registerProtocolHandler
 navigator.registerProtocolHandler(scheme, url, title);
 ```
 
-> **备注：** 最近更新为 `navigator.registerProtocolHandler(scheme, url)`, 但目前没有浏览器支持该版本。
+> [!NOTE]
+> 最近更新为 `navigator.registerProtocolHandler(scheme, url)`, 但目前没有浏览器支持该版本。
 
 ### 参数
 
@@ -25,13 +26,15 @@ navigator.registerProtocolHandler(scheme, url, title);
 
   - : 处理器的 URL，string 类型。这个字符串应该包含一个"%s"的占位符，其会被将要受理的文档的 [escaped](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) 链接所替换。这个链接（译者按：指将要受理的文档的 escaped 链接，也就是替换占位符的字符串）可能是一个真实的 URL，或者是一个电话号码，邮件地址之类的。
 
-    > **备注：** 这个处理器的 URL 必须以 `http` 或者 `https` 协议标记作为开头，最好是 `https` ，以满足一些浏览器出于安全考虑的要求。
+    > [!NOTE]
+    > 这个处理器的 URL 必须以 `http` 或者 `https` 协议标记作为开头，最好是 `https` ，以满足一些浏览器出于安全考虑的要求。
 
 - `title` {{Deprecated_Inline}}
 
   - : 一个用户可理解的处理器标题。标题会展示给用户，例如弹出对话框“允许这个站点处理 \[scheme] 链接吗？”或者在浏览器设置中列出注册的处理器时。
 
-    > **备注：** 出于欺骗的考虑，标题已从规范中删除，但当前所有的浏览器仍要求使用该标题。建议始终设置标题，因为支持更新规范的浏览器很可能会向后兼容，并且仍接受标题（但不使用它）。
+    > [!NOTE]
+    > 出于欺骗的考虑，标题已从规范中删除，但当前所有的浏览器仍要求使用该标题。建议始终设置标题，因为支持更新规范的浏览器很可能会向后兼容，并且仍接受标题（但不使用它）。
 
 ### 异常
 
@@ -92,7 +95,8 @@ navigator.registerProtocolHandler(
 
 ![](protocolregister.png)
 
-> **备注：** "[Register a webmail service as mailto handler](/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window)" 展示了如何从跨平台组件对象模块 (XPCOM) 中做到这一切。
+> [!NOTE]
+> "[Register a webmail service as mailto handler](/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window)" 展示了如何从跨平台组件对象模块 (XPCOM) 中做到这一切。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
index 63c5a6db7d0f06..056b2237379fc8 100644
--- a/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
+++ b/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
@@ -37,7 +37,8 @@ navigator.registerProtocolHandler(
 
 ![Screenshot of a prompt that reads: Add Burger handler (google.co.uk) as an application for burger links. An Add Application button is next to the text.](protocolregister.png)
 
-> **备注：** 试图执行登记或注册时，当前网页必须与提供的 URL 模板在相同的域，否则将会失败。例如，`http://example.com/homepage.html` 可以为 `http://example.com/handle_mailto/%s` 注册一个协议处理程序，但 `http://example.org/handle_mailto/%s` 不可以。
+> [!NOTE]
+> 试图执行登记或注册时，当前网页必须与提供的 URL 模板在相同的域，否则将会失败。例如，`http://example.com/homepage.html` 可以为 `http://example.com/handle_mailto/%s` 注册一个协议处理程序，但 `http://example.org/handle_mailto/%s` 不可以。
 
 多次注册相同的协议处理程序会弹出不同的通知，表明协议处理器已经注册。因此，发起一个注册协议处理程序的请求，之后检查是否注册是一个很好的方法。比如下面的例子：
 
@@ -90,7 +91,8 @@ http://starkravingfinkle.org/projects/wph/handler.php?value=fake:this%20is%20fak
 
 服务端代码可以提取查询字符串的参数，执行所需的操作。
 
-> **备注：** 服务端代码会接收到 href 的**全部**内容。这意味着服务端代码必须解析出数据中的协议。
+> [!NOTE]
+> 服务端代码会接收到 href 的**全部**内容。这意味着服务端代码必须解析出数据中的协议。
 
 ### Example
 
diff --git a/files/zh-cn/web/api/navigator/useragent/index.md b/files/zh-cn/web/api/navigator/useragent/index.md
index 6f8ea1e6ce8f99..609908a70a47f3 100644
--- a/files/zh-cn/web/api/navigator/useragent/index.md
+++ b/files/zh-cn/web/api/navigator/useragent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Navigator.userAgent`** 只读属性返回当前浏览器的用户代理字符串。
 
-> **备注：** 规范要求浏览器尽可能减少通过此字段提供的信息。请勿假设此属性的值在同一浏览器的未来版本中会保持不变。尽量不要使用它，或者仅将其用于当前和过去版本的浏览器。新版浏览器可能与旧版浏览器开始使用相同的 UA 或部分 UA，因此你无法完全保证浏览器代理确实是此属性所宣告的浏览器代理。此外，请注意浏览器用户可以根据需要更改此字段的值（UA 欺骗）。
+> [!NOTE]
+> 规范要求浏览器尽可能减少通过此字段提供的信息。请勿假设此属性的值在同一浏览器的未来版本中会保持不变。尽量不要使用它，或者仅将其用于当前和过去版本的浏览器。新版浏览器可能与旧版浏览器开始使用相同的 UA 或部分 UA，因此你无法完全保证浏览器代理确实是此属性所宣告的浏览器代理。此外，请注意浏览器用户可以根据需要更改此字段的值（UA 欺骗）。
 
 基于用户代理字符串来识别浏览器是**不可靠的**且**不推荐**，因为用户代理字符串是可以由用户配置的。例如：
 
diff --git a/files/zh-cn/web/api/navigatoruadata/gethighentropyvalues/index.md b/files/zh-cn/web/api/navigatoruadata/gethighentropyvalues/index.md
index bc74436528e310..6dc2fa06b502cc 100644
--- a/files/zh-cn/web/api/navigatoruadata/gethighentropyvalues/index.md
+++ b/files/zh-cn/web/api/navigatoruadata/gethighentropyvalues/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("NavigatorUAData")}} 接口的 **`getHighEntropyValues()`** 方法是一个 {{jsxref("Promise")}}，它使用包含用户的*高熵*值的字典对象进行解析代理返回。
 
-> **备注：** 术语*高熵*和*低熵*是指这些值揭示的有关浏览器的信息量。作为属性返回的值被视为低熵，并且不太可能被用于识别用户。`getHighEntropyValues()` 返回的值可能会揭示更多信息。因此，这些值是通过 {{jsxref("Promise")}} 检索的，从而使浏览器有时间请求用户权限或进行其他检查。
+> [!NOTE]
+> 术语*高熵*和*低熵*是指这些值揭示的有关浏览器的信息量。作为属性返回的值被视为低熵，并且不太可能被用于识别用户。`getHighEntropyValues()` 返回的值可能会揭示更多信息。因此，这些值是通过 {{jsxref("Promise")}} 检索的，从而使浏览器有时间请求用户权限或进行其他检查。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/navigatoruadata/index.md b/files/zh-cn/web/api/navigatoruadata/index.md
index b0313b78f50f7f..bf998e7d3c3012 100644
--- a/files/zh-cn/web/api/navigatoruadata/index.md
+++ b/files/zh-cn/web/api/navigatoruadata/index.md
@@ -11,7 +11,8 @@ l10n:
 
 通过调用 {{domxref("Navigator.userAgentData")}} 或 {{domxref("WorkerNavigator.userAgentData")}} 返回此对象的实例。因此，该接口没有构造函数。
 
-> **备注：** 术语*高熵*和*低熵*指的是这些值揭示的有关浏览器的信息量。作为属性返回的值被视为低熵，并且不太可能识别用户。{{domxref("NavigatorUAData.getHighEntropyValues()")}} 返回的值可能会揭示更多信息。因此，这些值是通过 {{jsxref("Promise")}} 检索的，从而使浏览器有时间请求用户权限或进行其他检查。
+> [!NOTE]
+> 术语*高熵*和*低熵*指的是这些值揭示的有关浏览器的信息量。作为属性返回的值被视为低熵，并且不太可能识别用户。{{domxref("NavigatorUAData.getHighEntropyValues()")}} 返回的值可能会揭示更多信息。因此，这些值是通过 {{jsxref("Promise")}} 检索的，从而使浏览器有时间请求用户权限或进行其他检查。
 
 ## 实例属性
 
diff --git a/files/zh-cn/web/api/navigatoruadata/tojson/index.md b/files/zh-cn/web/api/navigatoruadata/tojson/index.md
index 0c848979e3414e..b63e061d4f29c5 100644
--- a/files/zh-cn/web/api/navigatoruadata/tojson/index.md
+++ b/files/zh-cn/web/api/navigatoruadata/tojson/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("NavigatorUAData")}} 接口的 **`toJSON()`** 方法是一个*序列化器*，它返回 `NavigatorUAData` 对象的*低熵*属性的 JSON 表示形式。
 
-> **备注：** 术语*高熵*和*低熵*是指这些值揭示的有关浏览器的信息量。此方法返回的低熵值是那些不会泄露能够识别用户的信息的值。高熵值只能通过 {{domxref("NavigatorUAData.getHighEntropyValues()")}} 方法返回。
+> [!NOTE]
+> 术语*高熵*和*低熵*是指这些值揭示的有关浏览器的信息量。此方法返回的低熵值是那些不会泄露能够识别用户的信息的值。高熵值只能通过 {{domxref("NavigatorUAData.getHighEntropyValues()")}} 方法返回。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/node/clonenode/index.md b/files/zh-cn/web/api/node/clonenode/index.md
index 2db5c6b8881e03..0e800deea05e1e 100644
--- a/files/zh-cn/web/api/node/clonenode/index.md
+++ b/files/zh-cn/web/api/node/clonenode/index.md
@@ -20,7 +20,8 @@ var dupNode = node.cloneNode(deep);
 - `deep` {{optional_inline}}
   - : 是否采用深度克隆，如果为 `true`，则该节点的所有后代节点也都会被克隆，如果为 `false`，则只克隆该节点本身。
 
-> **备注：** 在 DOM4 规范中 (实现于 Gecko 13.0)，`deep`是一个可选参数。如果省略的话，参数的默认值为 `true，`也就是说默认是深度克隆。如果想使用浅克隆，你需要将该参数设置为 `false`。
+> [!NOTE]
+> 在 DOM4 规范中 (实现于 Gecko 13.0)，`deep`是一个可选参数。如果省略的话，参数的默认值为 `true，`也就是说默认是深度克隆。如果想使用浅克隆，你需要将该参数设置为 `false`。
 >
 > 在最新的规范里，该方法的行为已经改变了，其默认值变成了 false。虽然该参数仍旧是可选的，但是你必须要为该方法设置 deep 参数，无论是为了向前还是向后兼容考虑。假如开发者没设置参数的话，Gecko 28.0) 版本的控制台会发出警告。从 Gecko 29.0) 开始该方法默认为浅复制而不是深度复制。
 
@@ -41,7 +42,8 @@ var p_prime = p.cloneNode(true);
 
 如果 `deep` 参数设为 `true`,则会复制整棵 DOM 子树 (包括那些可能存在的{{domxref("Text")}}子节点).对于空结点 (例如{{HTMLElement("img")}}和{{HTMLElement("input")}}元素), 则 `deep` 参数无论设为 `true` 还是设为 `false`, 都没有关系，但是仍然需要为它指定一个值。
 
-> **警告：** 为了防止一个文档中出现两个 ID 重复的元素，使用`cloneNode()` 方法克隆的节点在需要时应该指定另外一个与原 ID 值不同的 ID
+> [!WARNING]
+> 为了防止一个文档中出现两个 ID 重复的元素，使用`cloneNode()` 方法克隆的节点在需要时应该指定另外一个与原 ID 值不同的 ID
 
 如果原始节点设置了 ID，并且克隆节点会被插入到相同的文档中，那么应该更新克隆节点的 ID 以保证唯一性。name 属性可能也需要进行修改，取决于你是否希望有相同名称的节点存在于文档中。
 
diff --git a/files/zh-cn/web/api/node/comparedocumentposition/index.md b/files/zh-cn/web/api/node/comparedocumentposition/index.md
index 93f6a2a34f506f..e0971bfc88cb88 100644
--- a/files/zh-cn/web/api/node/comparedocumentposition/index.md
+++ b/files/zh-cn/web/api/node/comparedocumentposition/index.md
@@ -46,7 +46,8 @@ if (
 }
 ```
 
-> **备注：** 因为`compareDocumentPosition`返回的是一个位掩码，所以必须再使用[按位与运算符](/zh-CN/docs/JavaScript/Reference/Operators/Bitwise_Operators)才能得到有意义的值。
+> [!NOTE]
+> 因为`compareDocumentPosition`返回的是一个位掩码，所以必须再使用[按位与运算符](/zh-CN/docs/JavaScript/Reference/Operators/Bitwise_Operators)才能得到有意义的值。
 
 注意第一条语句使用了带有参数 0 的 {{domxref("NodeList.item()")}} 方法，它和 getElementsByTagName('head')\[0] 是一样的。
 
diff --git a/files/zh-cn/web/api/node/contains/index.md b/files/zh-cn/web/api/node/contains/index.md
index e208d119c632fd..dedda86fcc124c 100644
--- a/files/zh-cn/web/api/node/contains/index.md
+++ b/files/zh-cn/web/api/node/contains/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Node/contains
 
 {{domxref("Node")}} 接口的 **`contains()`** 方法返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（{{domxref("Node.childNodes", "childNodes")}}）、子节点的直接子节点等。
 
-> **备注：** 节点*包含*在自身内部。
+> [!NOTE]
+> 节点*包含*在自身内部。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/node/index.md b/files/zh-cn/web/api/node/index.md
index 0324b84d19c235..54bbf394d102b2 100644
--- a/files/zh-cn/web/api/node/index.md
+++ b/files/zh-cn/web/api/node/index.md
@@ -73,13 +73,15 @@ slug: Web/API/Node
 
   - : 返回一个表示元素名称的本土化表示方法的 {{DOMxRef("DOMString")}} 。
 
-    > **备注：** 在 Firefox 3.5 以及更早的版本中，HTML 元素的 localName 属性的返回值都是大写的（XHTML 例外）。在后续版本中，这种情况就不存在了。无论是 HTML 还是 XHTML 中，均返回小写的 localName。
+    > [!NOTE]
+    > 在 Firefox 3.5 以及更早的版本中，HTML 元素的 localName 属性的返回值都是大写的（XHTML 例外）。在后续版本中，这种情况就不存在了。无论是 HTML 还是 XHTML 中，均返回小写的 localName。
 
 - {{DOMxRef("Node.namespaceURI")}} {{Deprecated_Inline}}{{readonlyInline}}
 
   - : 该节点命名空间的`URL`，如果没有命名空间则为`null`。
 
-    > **备注：** 在 Firefox 3.5 以及更早的版本中，HTML 的元素都没有命名空间。而在最新的版本中，无论是 HTML 还是 XML 文档树，所有元素的命名空间统一为 [`http://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/)。
+    > [!NOTE]
+    > 在 Firefox 3.5 以及更早的版本中，HTML 的元素都没有命名空间。而在最新的版本中，无论是 HTML 还是 XML 文档树，所有元素的命名空间统一为 [`http://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/)。
 
 - {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Deprecated_Inline}}
   - : 返回节点优先级 `nsIPrincipal` 。
@@ -228,7 +230,8 @@ eachNode(box, function (node) {
 "\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz";
 ```
 
-> **备注：** 空格是构成 {{DOMxRef("Text")}}节点的一部分，意味着缩进和换行在 `Element` 节点之间形成单独的 `Text` 。
+> [!NOTE]
+> 空格是构成 {{DOMxRef("Text")}}节点的一部分，意味着缩进和换行在 `Element` 节点之间形成单独的 `Text` 。
 
 #### 真实案例
 
diff --git a/files/zh-cn/web/api/node/issamenode/index.md b/files/zh-cn/web/api/node/issamenode/index.md
index 26a3c9a7e21833..9c16275a52a1a6 100644
--- a/files/zh-cn/web/api/node/issamenode/index.md
+++ b/files/zh-cn/web/api/node/issamenode/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Node/isSameNode
 
 判断两个节点是否是相同的节点，即指向同一个对象。
 
-> **警告：** 该方法已在 DOM level 4 中被废弃，最近的浏览器版本 (Gecko 10.0) 已经删除了这个方法。也就是说，不要再使用 `node1.isSameNode(node2)` 而使用 `node1 === node2` 或者 `node1 == node2` 来代替。
+> [!WARNING]
+> 该方法已在 DOM level 4 中被废弃，最近的浏览器版本 (Gecko 10.0) 已经删除了这个方法。也就是说，不要再使用 `node1.isSameNode(node2)` 而使用 `node1 === node2` 或者 `node1 == node2` 来代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/node/lastchild/index.md b/files/zh-cn/web/api/node/lastchild/index.md
index ceeb90a609fd4e..f87a81e8041afe 100644
--- a/files/zh-cn/web/api/node/lastchild/index.md
+++ b/files/zh-cn/web/api/node/lastchild/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("Node")}} 接口的 **`lastChild`** 只读属性返回节点的最后一个子节点，如果没有子节点，则返回 `null`。
 
-> **备注：** 此属性返回作为此节点最后一个子节点的任何类型的节点。它可能是 {{domxref("Text")}} 或 {{domxref("Comment")}} 节点。如果你要获取另一个元素的最后一个 {{domxref("Element")}} 子元素，可以考虑使用 {{domxref("Element.lastElementChild")}}。
+> [!NOTE]
+> 此属性返回作为此节点最后一个子节点的任何类型的节点。它可能是 {{domxref("Text")}} 或 {{domxref("Comment")}} 节点。如果你要获取另一个元素的最后一个 {{domxref("Element")}} 子元素，可以考虑使用 {{domxref("Element.lastElementChild")}}。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/node/nodevalue/index.md b/files/zh-cn/web/api/node/nodevalue/index.md
index 704c8a48b2b0b2..a0185b863c9610 100644
--- a/files/zh-cn/web/api/node/nodevalue/index.md
+++ b/files/zh-cn/web/api/node/nodevalue/index.md
@@ -27,7 +27,8 @@ l10n:
 | {{domxref("ProcessingInstruction")}} | 不包括目标的全部内容 |
 | {{domxref("Text")}}                  | 文本节点的内容       |
 
-> **备注：** 如果 `nodeValue` 的值为 `null`，则对它赋值也不会有任何效果。
+> [!NOTE]
+> 如果 `nodeValue` 的值为 `null`，则对它赋值也不会有任何效果。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/node/textcontent/index.md b/files/zh-cn/web/api/node/textcontent/index.md
index e6f90d6c1ecc68..a5506012f97c68 100644
--- a/files/zh-cn/web/api/node/textcontent/index.md
+++ b/files/zh-cn/web/api/node/textcontent/index.md
@@ -26,7 +26,8 @@ someOtherNode.textContent = string;
 
 - 如果节点是一个 {{domxref("document")}}，或者一个 [DOCTYPE](/zh-CN/docs/Glossary/Doctype) ，则 `textContent` 返回 `null`。
 
-  > **备注：** 如果你要获取整个文档的文本以及 [CDATA data](/zh-CN/docs/Web/API/CDATASection) ，可以使用 `document.documentElement.textContent`。
+  > [!NOTE]
+  > 如果你要获取整个文档的文本以及 [CDATA data](/zh-CN/docs/Web/API/CDATASection) ，可以使用 `document.documentElement.textContent`。
 
 - 如果节点是个 [CDATA section](/zh-CN/docs/Web/API/CDATASection)、注释、[processing instruction](/zh-CN/docs/Web/API/ProcessingInstruction) 或者 [text node](/zh-CN/docs/Web/API/Document/createTextNode)，`textContent` 返回节点内部的文本内容，例如 {{domxref("Node.nodeValue")}}。
 - 对于其他节点类型，`textContent` 将所有子节点的 `textContent` 合并后返回，除了注释和 processing instructions。（如果该节点没有子节点的话，返回一个空字符串。）
diff --git a/files/zh-cn/web/api/nodelist/index.md b/files/zh-cn/web/api/nodelist/index.md
index 983874e0c8f70a..62db6d0a0f9ecd 100644
--- a/files/zh-cn/web/api/nodelist/index.md
+++ b/files/zh-cn/web/api/nodelist/index.md
@@ -131,7 +131,8 @@ forEach.call(firstDiv.childNodes, function (divChild) {
 });
 ```
 
-> **备注：** 请注意，在上面的代码中，将某个宿主对象（如 `NodeList`）作为 `this` 传递给原生方法（如 forEach）不能保证在所有浏览器中工作，已知在一些浏览器中会失败。
+> [!NOTE]
+> 请注意，在上面的代码中，将某个宿主对象（如 `NodeList`）作为 `this` 传递给原生方法（如 forEach）不能保证在所有浏览器中工作，已知在一些浏览器中会失败。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/notification/actions/index.md b/files/zh-cn/web/api/notification/actions/index.md
index 27f410ecec74ae..02950330823e46 100644
--- a/files/zh-cn/web/api/notification/actions/index.md
+++ b/files/zh-cn/web/api/notification/actions/index.md
@@ -11,7 +11,8 @@ l10n:
 
 使用 {{DOMxref("ServiceWorkerRegistration.showNotification", "showNotification()")}} 方法和 {{DOMxref("Notification/Notification", "Notification()")}} 构造函数的第二个参数的 `actions` 选项设置操作。
 
-> **备注：** 浏览器通常会限制它们为特定通知显示的最大的操作的数量。检测 {{DOMxref("Notification.maxActions_static", "Notification.maxActions")}} 静态属性以确定限制的操作的数量。
+> [!NOTE]
+> 浏览器通常会限制它们为特定通知显示的最大的操作的数量。检测 {{DOMxref("Notification.maxActions_static", "Notification.maxActions")}} 静态属性以确定限制的操作的数量。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/notification/close/index.md b/files/zh-cn/web/api/notification/close/index.md
index f9c0394fd666d5..abcb3d0348ee6f 100644
--- a/files/zh-cn/web/api/notification/close/index.md
+++ b/files/zh-cn/web/api/notification/close/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("Notification")}} 接口的 **`close()`** 方法用于关闭或移除一个先前显示的通知。
 
-> **备注：** 不应仅仅为了在固定延迟后从屏幕上移除通知而使用此 API，因为此方法还将从任何通知托盘中删除该通知，防止用户在最初显示后与其交互。此 API 的有效用途是移除不再相关的通知（例如，用户已经阅读了消息应用程序在网页上的通知；或者音乐应用程序中已经在播放下一首歌曲）。
+> [!NOTE]
+> 不应仅仅为了在固定延迟后从屏幕上移除通知而使用此 API，因为此方法还将从任何通知托盘中删除该通知，防止用户在最初显示后与其交互。此 API 的有效用途是移除不再相关的通知（例如，用户已经阅读了消息应用程序在网页上的通知；或者音乐应用程序中已经在播放下一首歌曲）。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/notification/dir/index.md b/files/zh-cn/web/api/notification/dir/index.md
index acabbae4ecf4fd..de8a6e0200aff1 100644
--- a/files/zh-cn/web/api/notification/dir/index.md
+++ b/files/zh-cn/web/api/notification/dir/index.md
@@ -20,7 +20,8 @@ l10n:
 - `rtl`
   - : 从右到左。
 
-> **备注：** 大多数浏览器似乎都忽略了明确的 ltr 和 rtl 设置，而是直接使用浏览器的通用设置。
+> [!NOTE]
+> 大多数浏览器似乎都忽略了明确的 ltr 和 rtl 设置，而是直接使用浏览器的通用设置。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/notification/index.md b/files/zh-cn/web/api/notification/index.md
index 4747d3c437536e..c251d942fcaf1a 100644
--- a/files/zh-cn/web/api/notification/index.md
+++ b/files/zh-cn/web/api/notification/index.md
@@ -131,7 +131,8 @@ function notifyMe() {
 
 在这里，我们不再展示一个在线实例，因为 Chrome 和 Firefox 不再允许从跨源的 {{htmlelement("iframe")}} 请求通知权限，其他浏览器会陆续跟进。要查看实际示例，请查看我们的[待办事项示例](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)（参见[在线运行的应用程序](https://mdn.github.io/dom-examples/to-do-notifications/)）。
 
-> **备注：** 在上面的示例中，我们生成了响应用户手势的通知（点击按钮）。这不仅仅是最佳实践——你不应该向用户发送它们不同意的通知——而且未来浏览器将明确的禁止未响应用户手势发出的通知。例如，Firefox 已经从版本 72 开始就这么做了。
+> [!NOTE]
+> 在上面的示例中，我们生成了响应用户手势的通知（点击按钮）。这不仅仅是最佳实践——你不应该向用户发送它们不同意的通知——而且未来浏览器将明确的禁止未响应用户手势发出的通知。例如，Firefox 已经从版本 72 开始就这么做了。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/notification/notification/index.md b/files/zh-cn/web/api/notification/notification/index.md
index 6137f149445680..f4fef21b9864bf 100644
--- a/files/zh-cn/web/api/notification/notification/index.md
+++ b/files/zh-cn/web/api/notification/notification/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Notification()`** 构造函数创建一个新的代表用户通知的 {{domxref("Notification")}} 对象实例。
 
-> **备注：** 尝试在 {{domxref("ServiceWorkerGlobalScope")}} 中使用 `Notification()` 构造函数创建通知将抛出 `TypeError`，应该使用 {{domxref("ServiceWorkerRegistration.showNotification()")}}。
+> [!NOTE]
+> 尝试在 {{domxref("ServiceWorkerGlobalScope")}} 中使用 `Notification()` 构造函数创建通知将抛出 `TypeError`，应该使用 {{domxref("ServiceWorkerRegistration.showNotification()")}}。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/notification/requestpermission_static/index.md b/files/zh-cn/web/api/notification/requestpermission_static/index.md
index 94295f1b2220aa..3897fb9357bf1f 100644
--- a/files/zh-cn/web/api/notification/requestpermission_static/index.md
+++ b/files/zh-cn/web/api/notification/requestpermission_static/index.md
@@ -71,7 +71,8 @@ function notifyMe() {
 
 我们不再在此页面上展示实时示例，因为 Chrome 和 Firefox 不再允许从跨源 {{htmlelement("iframe")}} 请求通知权限，并且其他浏览器也将效仿。要查看实际示例，请查看我们的[待办事项列表示例](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)（参见[实时运行用例](https://mdn.github.io/dom-examples/to-do-notifications/)）。
 
-> **备注：** 在上面的示例中，我们生成通知以响应用户手势（单击按钮）。这不仅仅是最佳实践——你不应该向用户滥发他们不同意的通知——而且未来的浏览器将明确禁止未响应用户手势而触发的通知。例如，Firefox 已经从版本 72 开始这样做了。
+> [!NOTE]
+> 在上面的示例中，我们生成通知以响应用户手势（单击按钮）。这不仅仅是最佳实践——你不应该向用户滥发他们不同意的通知——而且未来的浏览器将明确禁止未响应用户手势而触发的通知。例如，Firefox 已经从版本 72 开始这样做了。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/notification/requireinteraction/index.md b/files/zh-cn/web/api/notification/requireinteraction/index.md
index a336d1e807ce0c..3b0c6de3b7dace 100644
--- a/files/zh-cn/web/api/notification/requireinteraction/index.md
+++ b/files/zh-cn/web/api/notification/requireinteraction/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("Notification")}} 接口的 **`requireInteraction`** 只读属性返回一个布尔值，指示在用户点击或关闭通知前，通知应该保持活动状态，而不是自动关闭。
 
-> **备注：** 可以在创建通知时通过将 {{domxref("Notification.Notification()")}} 构造方法的 `requireInteraction` 选项设置为 `true` 来进行设置。
+> [!NOTE]
+> 可以在创建通知时通过将 {{domxref("Notification.Notification()")}} 构造方法的 `requireInteraction` 选项设置为 `true` 来进行设置。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/notificationevent/index.md b/files/zh-cn/web/api/notificationevent/index.md
index f1e200450c72c6..b7ad840176f29d 100644
--- a/files/zh-cn/web/api/notificationevent/index.md
+++ b/files/zh-cn/web/api/notificationevent/index.md
@@ -11,7 +11,8 @@ l10n:
 
 该接口继承自 {{domxref("ExtendableEvent")}} 接口。
 
-> **备注：** 只有在 {{domxref("ServiceWorkerGlobalScope")}} 对象上触发的持久通知事件才会使用 `NotificationEvent` 接口。非持久通知事件在 {{domxref("Notification")}} 对象上触发，使用 `Event` 接口。
+> [!NOTE]
+> 只有在 {{domxref("ServiceWorkerGlobalScope")}} 对象上触发的持久通知事件才会使用 `NotificationEvent` 接口。非持久通知事件在 {{domxref("Notification")}} 对象上触发，使用 `Event` 接口。
 
 {{InheritanceDiagram}}
 
@@ -60,7 +61,8 @@ self.addEventListener("notificationclick", (event) => {
 
 {{Specifications}}
 
-> **备注：** 此接口在 [Notifications API](/zh-CN/docs/Web/API/Notifications_API) 中指定，但是可以通过 {{domxref("ServiceWorkerGlobalScope")}} 访问。
+> [!NOTE]
+> 此接口在 [Notifications API](/zh-CN/docs/Web/API/Notifications_API) 中指定，但是可以通过 {{domxref("ServiceWorkerGlobalScope")}} 访问。
 
 ## 浏览器兼容性
 
diff --git a/files/zh-cn/web/api/notifications_api/index.md b/files/zh-cn/web/api/notifications_api/index.md
index 9ab678b3ffd6e8..8b8d5058fcaa9e 100644
--- a/files/zh-cn/web/api/notifications_api/index.md
+++ b/files/zh-cn/web/api/notifications_api/index.md
@@ -28,13 +28,15 @@ btn.addEventListener("click", () => {
 
 从这里，用户可以选择允许来自此来源的通知或阻止来自此来源的通知。一旦做出选择，该设置通常将持续用于当前会话。
 
-> **备注：** 从 Firefox 44 开始，通知（Notification）和推送（[Push](/zh-CN/docs/Web/API/Push_API)）的权限已合并。如果为通知授予权限，推送也将启用。
+> [!NOTE]
+> 从 Firefox 44 开始，通知（Notification）和推送（[Push](/zh-CN/docs/Web/API/Push_API)）的权限已合并。如果为通知授予权限，推送也将启用。
 
 接下来，使用 {{domxref("Notification.Notification","Notification()")}} 构造方法创建一个新通知。这个函数必须传递一个标题参数，并且可以选择传递一个选项对象来指定选项，例如文本方向、正文、要显示的图标、要播放的通知的声音等等。
 
 此外，Notifications API 规范对 [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) 指定了多个扩展，以允许 Service Worker 发送通知。
 
-> **备注：** 想了解怎么在你的应用里使用通知接口，请阅读[使用 Notifications API](/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API)。
+> [!NOTE]
+> 想了解怎么在你的应用里使用通知接口，请阅读[使用 Notifications API](/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API)。
 
 ## 接口
 
diff --git a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md
index 737558817893df..eade145c0c80f0 100644
--- a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md
@@ -62,7 +62,8 @@ Notification.requestPermission((result) => {
 
 回调版本可以选择接受一个回调函数，一旦用户响应了显示权限的请求，就会调用该回调函数。
 
-> **备注：** 目前无法可靠地对 `Notification.requestPermission` 是否支持基于 Promise 的版本进行特性测试。如果你需要支持较旧的浏览器，只需使用基于回调的版本——尽管它已被弃用，但它仍然可以在新浏览器中使用。有关更多信息，请参阅[浏览器兼容性表](/zh-CN/docs/Web/API/Notification/requestPermission_static#浏览器兼容性)。
+> [!NOTE]
+> 目前无法可靠地对 `Notification.requestPermission` 是否支持基于 Promise 的版本进行特性测试。如果你需要支持较旧的浏览器，只需使用基于回调的版本——尽管它已被弃用，但它仍然可以在新浏览器中使用。有关更多信息，请参阅[浏览器兼容性表](/zh-CN/docs/Web/API/Notification/requestPermission_static#浏览器兼容性)。
 
 ### 示例
 
@@ -120,9 +121,11 @@ document.addEventListener("visibilitychange", () => {
 });
 ```
 
-> **备注：** 此 API 不应仅用于在固定延迟后（在现代浏览器上）从屏幕上删除通知，因为此方法还会从任何通知托盘中删除通知，从而阻止用户在最初显示通知后与其进行交互。
+> [!NOTE]
+> 此 API 不应仅用于在固定延迟后（在现代浏览器上）从屏幕上删除通知，因为此方法还会从任何通知托盘中删除通知，从而阻止用户在最初显示通知后与其进行交互。
 
-> **备注：** 当你收到“关闭”事件时，无法保证是用户关闭了通知。这符合规范，其中规定：当底层通知平台或用户关闭通知时，必须运行其关闭步骤。
+> [!NOTE]
+> 当你收到“关闭”事件时，无法保证是用户关闭了通知。这符合规范，其中规定：当底层通知平台或用户关闭通知时，必须运行其关闭步骤。
 
 ## 通知事件
 
diff --git a/files/zh-cn/web/api/offlineaudiocontext/index.md b/files/zh-cn/web/api/offlineaudiocontext/index.md
index f5387198217f0f..8a01fd4e3b8127 100644
--- a/files/zh-cn/web/api/offlineaudiocontext/index.md
+++ b/files/zh-cn/web/api/offlineaudiocontext/index.md
@@ -57,7 +57,8 @@ _从其父接口 {{domxref("BaseAudioContext")}} 继承方法。_
 
 在此刻，我们创建了一个另外的音频上下文，在它里面创建了一个 {{domxref("AudioBufferSourceNode")}}，并且设置它的 buffer 为之前生成的 Promise 中的 `AudioBuffer`，这样它就可以作为简单标准音频图来播放了。
 
-> **备注：** 你可以[在线运行完整示例](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/)，或[查看源代码](https://github.com/mdn/webaudio-examples/blob/main/offline-audio-context-promise/)。
+> [!NOTE]
+> 你可以[在线运行完整示例](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/)，或[查看源代码](https://github.com/mdn/webaudio-examples/blob/main/offline-audio-context-promise/)。
 
 ```js
 // 定义一个在线或者离线的音频上下文
diff --git a/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.md b/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.md
index 9b1ba9e63ccf76..4782790f7d3c5f 100644
--- a/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.md
+++ b/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.md
@@ -26,7 +26,8 @@ new OfflineAudioContext(numberOfChannels, length, sampleRate)
 
 这里有个重要的警告，你可以通过不带参数的使用 `new AudioContext()` 构造函数创建一个新的 {{domxref("AudioContext")}}，但是 `OfflineAudioContext()` 构造函数必须带上三个参数。当你通过 {{domxref("AudioContext.createBuffer")}} 方法创建一个新的{{domxref("AudioBuffer")}} 时，你也是需要做一样的事情。想要知道更多信息，请阅读我们的基本概念指南的 [音频片段：帧，样本和声道](/zh-CN/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#音频片段：帧，样本和声道)。
 
-> **备注：** 像普通的 `AudioContext`，`OfflineAudioContext` 可以成为事件的目标，因此它的实现是 {{domxref("EventTarget")}} 接口。
+> [!NOTE]
+> 像普通的 `AudioContext`，`OfflineAudioContext` 可以成为事件的目标，因此它的实现是 {{domxref("EventTarget")}} 接口。
 
 ## 例子
 
@@ -41,7 +42,8 @@ source = offlineCtx.createBufferSource();
 // 更多代码...
 ```
 
-> **备注：** 想要获取完整的例子，请看我们在 Github 仓库的 [offline-audio-context-promise](http://mdn.github.io/offline-audio-context-promise/) （也可以看 [源代码](https://github.com/mdn/offline-audio-context-promise) ）
+> [!NOTE]
+> 想要获取完整的例子，请看我们在 Github 仓库的 [offline-audio-context-promise](http://mdn.github.io/offline-audio-context-promise/) （也可以看 [源代码](https://github.com/mdn/offline-audio-context-promise) ）
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/oscillatornode/detune/index.md b/files/zh-cn/web/api/oscillatornode/detune/index.md
index b5f873988033b2..827c7252267ad4 100644
--- a/files/zh-cn/web/api/oscillatornode/detune/index.md
+++ b/files/zh-cn/web/api/oscillatornode/detune/index.md
@@ -14,7 +14,8 @@ var oscillator = audioCtx.createOscillator();
 oscillator.detune.value = 100; // value in cents
 ```
 
-> **备注：** 虽然返回的 `AudioParam` 是只读的，但是它表示的值不是。
+> [!NOTE]
+> 虽然返回的 `AudioParam` 是只读的，但是它表示的值不是。
 
 ### 值
 
diff --git a/files/zh-cn/web/api/oscillatornode/frequency/index.md b/files/zh-cn/web/api/oscillatornode/frequency/index.md
index ff024c53c59287..5ae27904f2242c 100644
--- a/files/zh-cn/web/api/oscillatornode/frequency/index.md
+++ b/files/zh-cn/web/api/oscillatornode/frequency/index.md
@@ -14,7 +14,8 @@ var oscillator = audioCtx.createOscillator();
 oscillator.frequency.value = 440; // value in hertz
 ```
 
-> **备注：** 虽然返回的 `AudioParam` 是只读的，但是它表示的值不是。
+> [!NOTE]
+> 虽然返回的 `AudioParam` 是只读的，但是它表示的值不是。
 
 ### 值
 
diff --git a/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.md b/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.md
index 088e9efa67d108..a75e51a7b186ac 100644
--- a/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.md
+++ b/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.md
@@ -7,7 +7,8 @@ slug: Web/API/OscillatorNode/setPeriodicWave
 
 {{ domxref("OscillatorNode") }} 接口的 **`setPeriodicWave()`** 方法用来指向 {{domxref("PeriodicWave")}}，PeriodicWave 定义了一个周期性波形能够形成 oscillator 的输出，当{{domxref("OscillatorNode.type", "type")}} 是 `custom` 的时候。
 
-> **备注：** 该方法取代了废弃的 {{ domxref("OscillatorNode.setWaveTable()")}}.
+> [!NOTE]
+> 该方法取代了废弃的 {{ domxref("OscillatorNode.setWaveTable()")}}.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/page_visibility_api/index.md b/files/zh-cn/web/api/page_visibility_api/index.md
index a5acda9a6d235b..8cea8d75463c9c 100644
--- a/files/zh-cn/web/api/page_visibility_api/index.md
+++ b/files/zh-cn/web/api/page_visibility_api/index.md
@@ -26,7 +26,8 @@ slug: Web/API/Page_Visibility_API
 
 开发人员在过去使用不完善的代理来检测这一点。例如，通过观察 window 上的 {{domxref("Window/blur_event", "blur")}} 和 {{domxref("Window/focus_event", "focus")}} 事件，可以帮助你了解页面何时不是活动页面，但这并不能告诉你，页面实际上已被用户隐藏。页面可见性 API 可解决这一问题。
 
-> **备注：** 虽然 {{domxref("Window.blur_event", "onblur")}} 和 {{domxref("Window.focus_event", "onfocus")}} 会告诉你用户是否切换了窗口，但这并不一定意味着它被隐藏了。只有当用户切换标签页或最小化包含标签页的浏览器窗口时，页面才会被隐藏。
+> [!NOTE]
+> 虽然 {{domxref("Window.blur_event", "onblur")}} 和 {{domxref("Window.focus_event", "onfocus")}} 会告诉你用户是否切换了窗口，但这并不一定意味着它被隐藏了。只有当用户切换标签页或最小化包含标签页的浏览器窗口时，页面才会被隐藏。
 
 ### 制定有助于后台页面性能的策略
 
diff --git a/files/zh-cn/web/api/payment_request_api/index.md b/files/zh-cn/web/api/payment_request_api/index.md
index 50c0a8f9a6b5af..635122fa6e5ec6 100644
--- a/files/zh-cn/web/api/payment_request_api/index.md
+++ b/files/zh-cn/web/api/payment_request_api/index.md
@@ -23,7 +23,8 @@ slug: Web/API/Payment_Request_API
 
 你可以在[Using the Payment Request API](/zh-CN/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)中查看完整指南。
 
-> **备注：** 此 API 只有在设置了[`allowpaymentrequest`](/zh-CN/docs/Web/HTML/Element/iframe#allowpaymentrequest)属性时才支持{{htmlelement("iframe")}}元素的跨域使用。
+> [!NOTE]
+> 此 API 只有在设置了[`allowpaymentrequest`](/zh-CN/docs/Web/HTML/Element/iframe#allowpaymentrequest)属性时才支持{{htmlelement("iframe")}}元素的跨域使用。
 
 ## 接口
 
diff --git a/files/zh-cn/web/api/performance/now/index.md b/files/zh-cn/web/api/performance/now/index.md
index aab4e9875577f3..a4e7f4f9e7dbd7 100644
--- a/files/zh-cn/web/api/performance/now/index.md
+++ b/files/zh-cn/web/api/performance/now/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Performance/now
 
 **`performance.now()`** 方法返回一个精确到毫秒的 {{domxref("DOMHighResTimeStamp")}}。
 
-> **警告：** 这个时间戳实际上并不是高精度的。为了降低像[Spectre](https://spectreattack.com/)这样的安全威胁，各类浏览器对该类型的值做了不同程度上的四舍五入处理。（Firefox 从 Firefox 59 开始四舍五入到 2 毫秒精度）一些浏览器还可能对这个值作稍微的随机化处理。这个值的精度在未来的版本中可能会再次改善；浏览器开发者还在调查这些时间测定攻击和如何更好的缓解这些攻击。
+> [!WARNING]
+> 这个时间戳实际上并不是高精度的。为了降低像[Spectre](https://spectreattack.com/)这样的安全威胁，各类浏览器对该类型的值做了不同程度上的四舍五入处理。（Firefox 从 Firefox 59 开始四舍五入到 2 毫秒精度）一些浏览器还可能对这个值作稍微的随机化处理。这个值的精度在未来的版本中可能会再次改善；浏览器开发者还在调查这些时间测定攻击和如何更好的缓解这些攻击。
 
 {{AvailableInWorkers}}
 
diff --git a/files/zh-cn/web/api/performance/timing/index.md b/files/zh-cn/web/api/performance/timing/index.md
index 092df7a6e51bfa..8adc50bf97f826 100644
--- a/files/zh-cn/web/api/performance/timing/index.md
+++ b/files/zh-cn/web/api/performance/timing/index.md
@@ -5,7 +5,8 @@ slug: Web/API/Performance/timing
 
 {{APIRef("Navigation Timing")}}{{deprecated_header}}
 
-> **警告：** 该属性在 [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete) 中已经被废弃，请使用 {{domxref("PerformanceNavigationTiming")}} 替代。
+> [!WARNING]
+> 该属性在 [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete) 中已经被废弃，请使用 {{domxref("PerformanceNavigationTiming")}} 替代。
 
 **`Performance.timing`** 只读属性返回一个 {{domxref("PerformanceTiming")}} 对象，这个对象包括了页面相关的性能信息。
 
diff --git a/files/zh-cn/web/api/performance_api/resource_timing/index.md b/files/zh-cn/web/api/performance_api/resource_timing/index.md
index c6f25d3d014017..6a0b0d055e0af8 100644
--- a/files/zh-cn/web/api/performance_api/resource_timing/index.md
+++ b/files/zh-cn/web/api/performance_api/resource_timing/index.md
@@ -23,7 +23,8 @@ slug: Web/API/Performance_API/Resource_timing
 
 应用程序可以获得用于加载资源的各个阶段的时间戳。处理模型中的第一个属性是 {{domxref("PerformanceEntry.startTime","startTime")}}，它在资源加载过程开始之前立即返回时间。{{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} 跟踪和重定向处理（如果适用），并在 DNS 查找之前进行。下个阶段是{{domxref('PerformanceResourceTiming.connectStart','connectStart')}} 和 {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} 分别是开始连接到服务器和连接建立完成的时间戳。最后三个按顺序分别是：{{domxref('PerformanceResourceTiming.requestStart','requestStart')}}——在浏览器开始向服务器请求资源时；{{domxref('PerformanceResourceTiming.responseStart','responseStart')}}——资源请求首包返回时；{{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}——资源全部接收完成时。如果资源是通过安全连接加载的 {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} 的值将会在 connectStart 和 connectEnd 之间。
 
-> **备注：** 当 {{Glossary("CORS")}} 生效时，除非服务器的访问策略允许共享这些值，否则这些值中的许多将返回为零。这需要提供资源的服务器发送 `Timing-Allow-Origin` HTTP 响应标头并且指定 origin\[s] 来源才能允许获取这些被限制的时间戳。
+> [!NOTE]
+> 当 {{Glossary("CORS")}} 生效时，除非服务器的访问策略允许共享这些值，否则这些值中的许多将返回为零。这需要提供资源的服务器发送 `Timing-Allow-Origin` HTTP 响应标头并且指定 origin\[s] 来源才能允许获取这些被限制的时间戳。
 >
 > 在非 web 页面本身的域名下，这些属性在默认都会返回 0 值：`redirectStart`、`redirectEnd`、`domainLookupStart`、`domainLookupEnd`、`connectStart`、`connectEnd`、`secureConnectionStart`、`requestStart` 和 `responseStart`。
 
diff --git a/files/zh-cn/web/api/permissions/query/index.md b/files/zh-cn/web/api/permissions/query/index.md
index f0362d4825bcc6..81d68ff3f7f150 100644
--- a/files/zh-cn/web/api/permissions/query/index.md
+++ b/files/zh-cn/web/api/permissions/query/index.md
@@ -28,7 +28,8 @@ query(permissionDescriptor)
     - `sysex`（仅限 MIDI）
       - : 表示是否需要接收系统专有信息。默认为 `false`。
 
-> **备注：** 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+> [!NOTE]
+> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
 
 > **备注：** `persistent-storage`权限允许根据 [Storage API](https://storage.spec.whatwg.org/) 使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）来进行存储。
 
diff --git a/files/zh-cn/web/api/permissions/revoke/index.md b/files/zh-cn/web/api/permissions/revoke/index.md
index fbaf68407b6b0a..6535c7d1742d59 100644
--- a/files/zh-cn/web/api/permissions/revoke/index.md
+++ b/files/zh-cn/web/api/permissions/revoke/index.md
@@ -26,7 +26,8 @@ revoke(descriptor)
     - `sysex`（仅限 MIDI）
       - : 表示是否需要接收系统专用消息。默认为 `false`。
 
-> **备注：** 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+> [!NOTE]
+> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
 
 > **备注：** `persistent-storage` 权限允许使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）进行存储，如 [Storage API](https://storage.spec.whatwg.org/) 所述。
 
diff --git a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
index 97042632f4231b..276fbb9d77a124 100644
--- a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
+++ b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
@@ -103,7 +103,8 @@ function revokePermission() {
 }
 ```
 
-> **备注：** 自 Firefox 51 开始 `revoke()` 函数被默认关闭了，因为它的设计带来了 [Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) 中提到的问题。可以通过将设置项 `dom.permissions.revoke.enable` 置为 `true` 来重新开启它。
+> [!NOTE]
+> 自 Firefox 51 开始 `revoke()` 函数被默认关闭了，因为它的设计带来了 [Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) 中提到的问题。可以通过将设置项 `dom.permissions.revoke.enable` 置为 `true` 来重新开启它。
 
 ### 响应权限状态变化
 
diff --git a/files/zh-cn/web/api/plugin/index.md b/files/zh-cn/web/api/plugin/index.md
index 72ca20797f1664..8bccd45c07f670 100644
--- a/files/zh-cn/web/api/plugin/index.md
+++ b/files/zh-cn/web/api/plugin/index.md
@@ -10,7 +10,8 @@ slug: Web/API/Plugin
 
 插件接口提供有关浏览器[插件](/zh-CN/docs/Mozilla/Add-ons/Plugins)的信息。
 
-> **备注：** 在最新版本的浏览器中插件对象本身的属性不可枚举。
+> [!NOTE]
+> 在最新版本的浏览器中插件对象本身的属性不可枚举。
 
 ## 属性
 
diff --git a/files/zh-cn/web/api/pointer_events/index.md b/files/zh-cn/web/api/pointer_events/index.md
index db38c88ac8cc21..b4f7255a0a6397 100644
--- a/files/zh-cn/web/api/pointer_events/index.md
+++ b/files/zh-cn/web/api/pointer_events/index.md
@@ -218,7 +218,8 @@ slug: Web/API/Pointer_events
 | 鼠标 X2（后退）                                    | 4      | 16      |
 | 压感笔橡皮擦按钮被按压                             | 5      | 32      |
 
-> **备注：** The `button` property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value.
+> [!NOTE]
+> The `button` property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value.
 
 ## 指针捕捉
 
diff --git a/files/zh-cn/web/api/pointer_lock_api/index.md b/files/zh-cn/web/api/pointer_lock_api/index.md
index 304ffba9207047..01f9f5b021c2ab 100644
--- a/files/zh-cn/web/api/pointer_lock_api/index.md
+++ b/files/zh-cn/web/api/pointer_lock_api/index.md
@@ -168,13 +168,15 @@ document.exitPointerLock();
 
 当指针锁定状态改变时 - 例如，当调用 `requestPointerLock`, `exitPointerLock`，用户按下 ESC 键，等等。— `pointerlockchange` 事件被分发到 `document`。这是一个简单事件所以不包含任何的额外数据。
 
-> **备注：** 该事件目前在 Firefox 中使用前缀的格式是 `mozpointerlockchange` ，在 Chrome 中是 `webkitpointerlockchange`。
+> [!NOTE]
+> 该事件目前在 Firefox 中使用前缀的格式是 `mozpointerlockchange` ，在 Chrome 中是 `webkitpointerlockchange`。
 
 ## pointerlockerror 事件
 
 当调用 `requestPointerLock` 或 `exitPointerLock`而引发错误时， `pointerlockerror` 事件被分发到 `document`。这是一个简单事件所以不包含任何的额外数据。
 
-> **备注：** 该事件目前在 Firefox 中被加上前缀为 `mozpointerlockerror` ，在 Chrome 中为 `webkitpointerlockerror`。
+> [!NOTE]
+> 该事件目前在 Firefox 中被加上前缀为 `mozpointerlockerror` ，在 Chrome 中为 `webkitpointerlockerror`。
 
 ## 鼠标事件扩展
 
@@ -187,7 +189,8 @@ partial interface MouseEvent {
 };
 ```
 
-> **备注：** movement 属性目前在 Firefox 中被加上前缀为 `.mozMovementX` 和 `.mozMovementY` , 在 Chrome 中为`.webkitMovementX` 和 `.webkitMovementY`。
+> [!NOTE]
+> movement 属性目前在 Firefox 中被加上前缀为 `.mozMovementX` 和 `.mozMovementY` , 在 Chrome 中为`.webkitMovementX` 和 `.webkitMovementY`。
 
 鼠标事件的两个新参数—`movementX` 和 `movementY`—提供了鼠标位置的变化情况。这两个参数的值，等于两个[`MouseEvent`](/zh-CN/DOM/MouseEvent) 属性（ `screenX` 和 `screenY）`之间值的变化程度，这些 MouseEvent 属性被存储在两个连续的鼠标移动事件（ `eNow` 和 `ePrevious`）中。换言之，指针锁定参数 `movementX = eNow.screenX - ePrevious.screenX`。（译注：不存在名为 eNow 或 ePrevious 的事件或属性，eNow 代指当前的鼠标移动事件，ePrevious 代指前一个鼠标移动事件）
 
diff --git a/files/zh-cn/web/api/pointerevent/index.md b/files/zh-cn/web/api/pointerevent/index.md
index 60778f0a2d4818..6c561a3a110362 100644
--- a/files/zh-cn/web/api/pointerevent/index.md
+++ b/files/zh-cn/web/api/pointerevent/index.md
@@ -45,7 +45,8 @@ _该接口属性继承自 {{domxref("MouseEvent")}} 和 {{domxref("Event")}}._
 
 The `PointerEvent` interface has several event types. To determine which event fired, look at the event's {{ domxref("Event.type", "type") }} property.
 
-> **备注：** It's important to note that in many cases, both pointer and mouse events get sent (in order to let non-pointer-specific code still interact with the user). If you use pointer events, you should call {{ domxref("event.preventDefault()") }} to keep the mouse event from being sent as well.
+> [!NOTE]
+> It's important to note that in many cases, both pointer and mouse events get sent (in order to let non-pointer-specific code still interact with the user). If you use pointer events, you should call {{ domxref("event.preventDefault()") }} to keep the mouse event from being sent as well.
 
 - {{domxref('Element/pointerover_event', 'pointerover')}}
   - : This event is fired when a pointing device is moved into an element's hit test boundaries.
diff --git a/files/zh-cn/web/api/processinginstruction/index.md b/files/zh-cn/web/api/processinginstruction/index.md
index b469c4e2a99bd6..735d472b174e5b 100644
--- a/files/zh-cn/web/api/processinginstruction/index.md
+++ b/files/zh-cn/web/api/processinginstruction/index.md
@@ -13,7 +13,8 @@ l10n:
 
 处理指令可能与 [XML 声明](/zh-CN/docs/Web/XML/XML_introduction#xml_声明)不同。
 
-> **备注：** 用户定义的处理指令不能以 `xml` 开头，因为以 `xml` 为前缀的处理指令目标名称是由 xml 规范为特定用途保留的（如 `<?xml-stylesheet ?>`）。
+> [!NOTE]
+> 用户定义的处理指令不能以 `xml` 开头，因为以 `xml` 为前缀的处理指令目标名称是由 xml 规范为特定用途保留的（如 `<?xml-stylesheet ?>`）。
 
 例如：
 
diff --git a/files/zh-cn/web/api/push_api/index.md b/files/zh-cn/web/api/push_api/index.md
index 5659969bb46322..32f4b54787acc1 100644
--- a/files/zh-cn/web/api/push_api/index.md
+++ b/files/zh-cn/web/api/push_api/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Push_API
 
 ## Push 的概念及用法
 
-> **警告：** 在实现 PushManager 订阅时，请确保你的应用程序免受 CSRF/XSRF（跨站请求伪造）问题。参见以下的文章以了解更多信息：
+> [!WARNING]
+> 在实现 PushManager 订阅时，请确保你的应用程序免受 CSRF/XSRF（跨站请求伪造）问题。参见以下的文章以了解更多信息：
 >
 > - [跨站请求伪造（CSRF）预防清单](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
 > - [防止 CSRF 和 XSRF 攻击](https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/)
diff --git a/files/zh-cn/web/api/pushmanager/index.md b/files/zh-cn/web/api/pushmanager/index.md
index 50a201150d6ccf..286aef46342bab 100644
--- a/files/zh-cn/web/api/pushmanager/index.md
+++ b/files/zh-cn/web/api/pushmanager/index.md
@@ -9,7 +9,8 @@ slug: Web/API/PushManager
 
 可以通过 ServiceWorkerRegistration.pushManager 属性获得
 
-> **备注：** 这个属性替代了已被废弃的{{domxref("PushRegistrationManager")}}
+> [!NOTE]
+> 这个属性替代了已被废弃的{{domxref("PushRegistrationManager")}}
 
 ## Properties
 
diff --git a/files/zh-cn/web/api/readablestream/readablestream/index.md b/files/zh-cn/web/api/readablestream/readablestream/index.md
index c9f8f2c11f9f80..5e35aab7b9803e 100644
--- a/files/zh-cn/web/api/readablestream/readablestream/index.md
+++ b/files/zh-cn/web/api/readablestream/readablestream/index.md
@@ -43,7 +43,8 @@ new ReadableStream(underlyingSource, queuingStrategy)
     - `size(chunk)`
       - : 包含参数 `chunk` 的方法——这表示每个分块使用的大小（以字节为单位）。
 
-    > **备注：** 你可以自定义 `queuingStrategy`，或者使用 {{domxref("ByteLengthQueueingStrategy")}} 或 {{domxref("CountQueueingStrategy")}} 的示例作为对象的值。如果 没有提供 `queuingStrategy`，则默认值与 highWaterMark 为 1 的 `CountQueuingStrategy` 相同。
+    > [!NOTE]
+    > 你可以自定义 `queuingStrategy`，或者使用 {{domxref("ByteLengthQueueingStrategy")}} 或 {{domxref("CountQueueingStrategy")}} 的示例作为对象的值。如果 没有提供 `queuingStrategy`，则默认值与 highWaterMark 为 1 的 `CountQueuingStrategy` 相同。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/readablestreamdefaultreader/cancel/index.md b/files/zh-cn/web/api/readablestreamdefaultreader/cancel/index.md
index 6438900961b55b..8ad85985304dc0 100644
--- a/files/zh-cn/web/api/readablestreamdefaultreader/cancel/index.md
+++ b/files/zh-cn/web/api/readablestreamdefaultreader/cancel/index.md
@@ -9,7 +9,8 @@ slug: Web/API/ReadableStreamDefaultReader/cancel
 
 cancel 用于在不再需要来自一个流的任何数据的情况下完全结束这个流，即使仍有排队等待的数据块。调用 cancel 后该数据丢失，并且流不再可读。为了仍然可以读这些数据块而不完全结束这个流，你应该使用 {{domxref("ReadableStreamDefaultController.close()")}}。
 
-> **备注：** 如果 reader 处于激活状态，`cancel()` 方法的行为和关联流 ({{domxref("ReadableStream.cancel()")}}) 的行为相同。
+> [!NOTE]
+> 如果 reader 处于激活状态，`cancel()` 方法的行为和关联流 ({{domxref("ReadableStream.cancel()")}}) 的行为相同。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md b/files/zh-cn/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
index 8539f999c798f9..887d6f1cf3487e 100644
--- a/files/zh-cn/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
+++ b/files/zh-cn/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ReadableStreamDefaultReader/ReadableStreamDefaultReader
 
 **`ReadableStreamDefaultReader()`** 构造函数创建并返回一个 `ReadableStreamDefaultReader` 实例对象。
 
-> **备注：** 你通常不需要手动创建，可以使用 {{domxref("ReadableStream.getReader()")}} 方法代替。
+> [!NOTE]
+> 你通常不需要手动创建，可以使用 {{domxref("ReadableStream.getReader()")}} 方法代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/remote_playback_api/index.md b/files/zh-cn/web/api/remote_playback_api/index.md
index 91cafdf0405ebd..1bdd3f5d769bb3 100644
--- a/files/zh-cn/web/api/remote_playback_api/index.md
+++ b/files/zh-cn/web/api/remote_playback_api/index.md
@@ -15,7 +15,8 @@ l10n:
 
 该 API 使具有媒体元素（如视频或音频文件）的页面能够在连接的远程设备上启用和控制该媒体的播放。例如，在连接的电视上播放视频。
 
-> **备注：** Safari for iOS 有一些在 AirPlay 上启用远程回放的 API。这些细节可以在 [Safari 9.0 发行说明](https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW16)中找到。Android 版本的 Firefox 和 Chrome 也包含一些远程回放功能。如果本地网络中有可用的投放（Cast）设备，这些设备将显示投放按钮。
+> [!NOTE]
+> Safari for iOS 有一些在 AirPlay 上启用远程回放的 API。这些细节可以在 [Safari 9.0 发行说明](https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW16)中找到。Android 版本的 Firefox 和 Chrome 也包含一些远程回放功能。如果本地网络中有可用的投放（Cast）设备，这些设备将显示投放按钮。
 
 ## 接口
 
diff --git a/files/zh-cn/web/api/reporting_api/index.md b/files/zh-cn/web/api/reporting_api/index.md
index 7b1b159970e511..763dffd8a1eca2 100644
--- a/files/zh-cn/web/api/reporting_api/index.md
+++ b/files/zh-cn/web/api/reporting_api/index.md
@@ -29,7 +29,8 @@ Reporting API 的目的是提供一致的报告机制，该机制可用于以 Ja
 
 端点将会被分组。端点组可以协同工作以均衡负载（每个端点将接收指定比例的报告流量）和故障保护（可以指定备用端点，以便在主端点失败时使用）。
 
-> **备注：** 不保证绝对有交付报告——如果发生严重错误，报告仍然可能无法被收集。
+> [!NOTE]
+> 不保证绝对有交付报告——如果发生严重错误，报告仍然可能无法被收集。
 
 发送到端点的报告可以独立于与之相关的网站的运行进行检索，这很有用——例如，崩溃可能会导致网站崩溃并停止任何运行，但仍然可以获得报告，以便为开发人员提供有关发生原因的一些线索。
 
@@ -96,7 +97,8 @@ if (navigator.mozGetUserMedia) {
 
 ![一个快乐的大胡子男人的形象，下面显示了关于一个被弃用的功能的各种统计数据](reporting_api_example.png)
 
-> **备注：** 如果你查看[完整的源代码](https://github.com/mdn/dom-examples/blob/main/reporting-api/deprecation_report.html)，你将注意到我们调用了两次 `getUserMedia()` 方法。在我们第一次调用 {{domxref("ReportingObserver.takeRecords()")}} 之后，它返回第一个生成的报告并清空队列。因此，当按下该按钮时，只会列出第二个报告。
+> [!NOTE]
+> 如果你查看[完整的源代码](https://github.com/mdn/dom-examples/blob/main/reporting-api/deprecation_report.html)，你将注意到我们调用了两次 `getUserMedia()` 方法。在我们第一次调用 {{domxref("ReportingObserver.takeRecords()")}} 之后，它返回第一个生成的报告并清空队列。因此，当按下该按钮时，只会列出第二个报告。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/request/index.md b/files/zh-cn/web/api/request/index.md
index f89e8d4195de15..906c91f8042e09 100644
--- a/files/zh-cn/web/api/request/index.md
+++ b/files/zh-cn/web/api/request/index.md
@@ -60,7 +60,8 @@ slug: Web/API/Request
 - {{domxref("Request.text()")}}
   - : 返回 promise，其兑现值为请求主体的文本表示形式。
 
-> **备注：** 这些请求主体上的函数只能运行一次，随后的调用将出现 TypeError 错误，表明请求主体流已被使用。
+> [!NOTE]
+> 这些请求主体上的函数只能运行一次，随后的调用将出现 TypeError 错误，表明请求主体流已被使用。
 
 ## 示例
 
@@ -98,7 +99,8 @@ const credentials = request.credentials;
 const bodyUsed = request.bodyUsed;
 ```
 
-> **备注：** body 只能是一个 {{domxref("Blob")}}、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、{{domxref("FormData")}}、{{domxref("URLSearchParams")}}、{{domxref("ReadableStream")}} 或 {{jsxref("String")}} 对象，也可以是一个字符串字面量，因此增加一个 JSON 对象的有效载荷则需要字符串化该对象。
+> [!NOTE]
+> body 只能是一个 {{domxref("Blob")}}、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、{{domxref("FormData")}}、{{domxref("URLSearchParams")}}、{{domxref("ReadableStream")}} 或 {{jsxref("String")}} 对象，也可以是一个字符串字面量，因此增加一个 JSON 对象的有效载荷则需要字符串化该对象。
 
 然后，通过将 `Request` 对象作为参数传递给 {{domxref("fetch()")}} 调用来获取此请求，并取得响应，例如：
 
diff --git a/files/zh-cn/web/api/request/request/index.md b/files/zh-cn/web/api/request/request/index.md
index f86024ea9aa39f..ea36bf4e3876cb 100644
--- a/files/zh-cn/web/api/request/request/index.md
+++ b/files/zh-cn/web/api/request/request/index.md
@@ -109,7 +109,8 @@ var myRequest = new Request("flowers.jpg", myInit);
 
 也可以把 {{domxref("Request")}} 对象再作参数传递进 `Request()` 构造器来创建一个请求的副本（就像调用{{domxref("Request.clone","clone()")}}一样）。
 
-> **备注：** This last usage is probably only useful in [ServiceWorkers](/zh-CN/docs/Web/API/ServiceWorker_API).
+> [!NOTE]
+> This last usage is probably only useful in [ServiceWorkers](/zh-CN/docs/Web/API/ServiceWorker_API).
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/resizeobserver/index.md b/files/zh-cn/web/api/resizeobserver/index.md
index cf1c1592c41fec..d8e4e76f533f1d 100644
--- a/files/zh-cn/web/api/resizeobserver/index.md
+++ b/files/zh-cn/web/api/resizeobserver/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ResizeObserver
 
 **`ResizeObserver`** 接口监视 {{domxref('Element')}} 内容盒或边框盒或者 {{domxref('SVGElement')}} 边界尺寸的变化。
 
-> **备注：** 内容盒是盒模型放置内容的部分，这意味着边框盒减去内边距和边框的宽度就是内容盒。边框盒包含内容、内边距和边框。有关进一步阐述，参见[盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)。
+> [!NOTE]
+> 内容盒是盒模型放置内容的部分，这意味着边框盒减去内边距和边框的宽度就是内容盒。边框盒包含内容、内边距和边框。有关进一步阐述，参见[盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)。
 
 `ResizeObserver` 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。
 
diff --git a/files/zh-cn/web/api/resizeobserverentry/borderboxsize/index.md b/files/zh-cn/web/api/resizeobserverentry/borderboxsize/index.md
index b30af6acc49776..83af67de9a0a4b 100644
--- a/files/zh-cn/web/api/resizeobserverentry/borderboxsize/index.md
+++ b/files/zh-cn/web/api/resizeobserverentry/borderboxsize/index.md
@@ -16,7 +16,8 @@ slug: Web/API/ResizeObserverEntry/borderBoxSize
 - `inlineSize`
   - : 被监听的元素在内联方向上的长度。对于具有水平 {{cssxref("writing-mode")}} 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。
 
-> **备注：** 更多关于书写模式和块以及内联尺寸的解释，请阅读[处理不同方向的文本](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
+> [!NOTE]
+> 更多关于书写模式和块以及内联尺寸的解释，请阅读[处理不同方向的文本](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/resizeobserverentry/contentboxsize/index.md b/files/zh-cn/web/api/resizeobserverentry/contentboxsize/index.md
index 73de41fd7dd1fe..04d669da5a1ea3 100644
--- a/files/zh-cn/web/api/resizeobserverentry/contentboxsize/index.md
+++ b/files/zh-cn/web/api/resizeobserverentry/contentboxsize/index.md
@@ -16,7 +16,8 @@ slug: Web/API/ResizeObserverEntry/contentBoxSize
 - `inlineSize`
   - : 被监听的元素在内联方向上内容盒的长度。对于具有水平 {{cssxref("writing-mode")}} 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。
 
-> **备注：** 更多关于书写模式和块以及内联尺寸的解释，请阅读[处理不同方向的文本](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
+> [!NOTE]
+> 更多关于书写模式和块以及内联尺寸的解释，请阅读[处理不同方向的文本](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md b/files/zh-cn/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md
index a492f0b1b05b7d..395341f8d5b56b 100644
--- a/files/zh-cn/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md
+++ b/files/zh-cn/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md
@@ -16,7 +16,8 @@ slug: Web/API/ResizeObserverEntry/devicePixelContentBoxSize
 - `inlineSize`
   - : 被监听的元素在内联方向上内容盒的设备像素长度。对于具有水平 {{cssxref("writing-mode")}} 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。
 
-> **备注：** 更多关于书写模式和块以及内联尺寸的解释，请阅读[处理不同方向的文本](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
+> [!NOTE]
+> 更多关于书写模式和块以及内联尺寸的解释，请阅读[处理不同方向的文本](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/resizeobserverentry/index.md b/files/zh-cn/web/api/resizeobserverentry/index.md
index 14431bbd66b83d..173cd92fd30990 100644
--- a/files/zh-cn/web/api/resizeobserverentry/index.md
+++ b/files/zh-cn/web/api/resizeobserverentry/index.md
@@ -20,7 +20,8 @@ slug: Web/API/ResizeObserverEntry
 - {{domxref('ResizeObserverEntry.target')}} {{readonlyinline}}
   - : 对正在观察 {{domxref('Element')}} 或 {{domxref("SVGElement")}} 的引用。
 
-> **备注：** 内容盒是放置内容的盒子，即边框盒减去内边距和边框宽度。边框盒包含内容、内边距和边框。更多解释参见[盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)。
+> [!NOTE]
+> 内容盒是放置内容的盒子，即边框盒减去内边距和边框宽度。边框盒包含内容、内边距和边框。更多解释参见[盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)。
 
 ## 方法
 
diff --git a/files/zh-cn/web/api/response/body/index.md b/files/zh-cn/web/api/response/body/index.md
index 0a2e5b03bb31c2..7595d9b90afb2e 100644
--- a/files/zh-cn/web/api/response/body/index.md
+++ b/files/zh-cn/web/api/response/body/index.md
@@ -11,7 +11,8 @@ slug: Web/API/Response/body
 
 一个 {{domxref("ReadableStream")}}，或者对于使用空的 [`body`](/zh-CN/docs/Web/API/Response/Response#body) 属性构建的任意的 `Response` 对象，或没有任何[主体](/zh-CN/docs/Web/HTTP/Messages#body_2)的实际 [HTTP 响应](/zh-CN/docs/Web/HTTP/Messages#http_响应)，则为 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)。
 
-> **备注：** 对于没有主体的响应（例如，对 [`HEAD`](/zh-CN/docs/Web/HTTP/Methods/HEAD) 请求的响应或 [`204 No Content`](/zh-CN/docs/Web/HTTP/Status/204)），当前的浏览器实际上不符合将 `body` 属性设置为 `null` 的规范要求。
+> [!NOTE]
+> 对于没有主体的响应（例如，对 [`HEAD`](/zh-CN/docs/Web/HTTP/Methods/HEAD) 请求的响应或 [`204 No Content`](/zh-CN/docs/Web/HTTP/Status/204)），当前的浏览器实际上不符合将 `body` 属性设置为 `null` 的规范要求。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/response/error_static/index.md b/files/zh-cn/web/api/response/error_static/index.md
index 5a92acdd72bd9d..c72f18890c4353 100644
--- a/files/zh-cn/web/api/response/error_static/index.md
+++ b/files/zh-cn/web/api/response/error_static/index.md
@@ -7,9 +7,11 @@ slug: Web/API/Response/error_static
 
 {{domxref("Response")}} 接口的 `error()` 方法返回一个包含网络错误相关信息的新 `Response` 对象。
 
-> **备注：** 这主要与 Service Workers 有关；如果你愿意，可以使用 error 方法返回错误。错误响应的 {{domxref("Response.type","type")}} 被设置为 `error`。
+> [!NOTE]
+> 这主要与 Service Workers 有关；如果你愿意，可以使用 error 方法返回错误。错误响应的 {{domxref("Response.type","type")}} 被设置为 `error`。
 
-> **备注：** 一个“错误”的 `Response` 不会真正地暴露给脚本：例如 {{domxref("GlobalFetch.fetch","fetch()")}} 的“错误”响应将会返回 promise 的 reject 状态。
+> [!NOTE]
+> 一个“错误”的 `Response` 不会真正地暴露给脚本：例如 {{domxref("GlobalFetch.fetch","fetch()")}} 的“错误”响应将会返回 promise 的 reject 状态。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/response/formdata/index.md b/files/zh-cn/web/api/response/formdata/index.md
index 38698217aa39ef..51bc974e2abe1e 100644
--- a/files/zh-cn/web/api/response/formdata/index.md
+++ b/files/zh-cn/web/api/response/formdata/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Response/formData
 
 {{domxref("Response")}} 对象中的**`formData()`** 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象，该方法将返回一个 **`Promise`** 对象，该对象将产生一个{{domxref("FormData")}} 对象。
 
-> **备注：** 该方法主要与 [service worker](/zh-CN/docs/Web/API/Service_Worker_API) 有关。如果客户端提交的一个表单请求被 Service Worker 所截取，你可以像下述的样例一样，调用 `formData()` 方法来获取一个 key-value 字典，对该字典可以进行修饰，然后将修饰后的表填提交给远端服务器 (或在本地应用)。
+> [!NOTE]
+> 该方法主要与 [service worker](/zh-CN/docs/Web/API/Service_Worker_API) 有关。如果客户端提交的一个表单请求被 Service Worker 所截取，你可以像下述的样例一样，调用 `formData()` 方法来获取一个 key-value 字典，对该字典可以进行修饰，然后将修饰后的表填提交给远端服务器 (或在本地应用)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/response/redirect_static/index.md b/files/zh-cn/web/api/response/redirect_static/index.md
index 3ef93340dd1186..db71b87a47c0e6 100644
--- a/files/zh-cn/web/api/response/redirect_static/index.md
+++ b/files/zh-cn/web/api/response/redirect_static/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Response/redirect_static
 
 {{domxref("Response")}} 接口的 **`redirect()`** 方法返回一个可以重定向到指定 URL 的 `Response` 。
 
-> **备注：** 主要和 [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) 有关。A controlling service worker could intercept a page's request and redirect it as desired. This will actually lead to a real redirect if a service worker sends it upstream.
+> [!NOTE]
+> 主要和 [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) 有关。A controlling service worker could intercept a page's request and redirect it as desired. This will actually lead to a real redirect if a service worker sends it upstream.
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/response/redirected/index.md b/files/zh-cn/web/api/response/redirected/index.md
index d16ed7f9beb6cb..187f02c7d82923 100644
--- a/files/zh-cn/web/api/response/redirected/index.md
+++ b/files/zh-cn/web/api/response/redirected/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Response/redirected
 
 {{domxref("Response")}} 接口中只读的 **`redirected`** 属性表明该响应是否为一个重定向的请求的结果。
 
-> **备注：** 依赖 **`redirected`** 过滤重定向很容易导致虚假的重定向阻止你的内容像预期一样生效。因此，当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时你应该进行过滤操作。详见下面 [禁用重定向](#禁用重定向) 的例子。
+> [!NOTE]
+> 依赖 **`redirected`** 过滤重定向很容易导致虚假的重定向阻止你的内容像预期一样生效。因此，当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时你应该进行过滤操作。详见下面 [禁用重定向](#禁用重定向) 的例子。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/response/type/index.md b/files/zh-cn/web/api/response/type/index.md
index 0bb82220a1413a..1dcf64504549a6 100644
--- a/files/zh-cn/web/api/response/type/index.md
+++ b/files/zh-cn/web/api/response/type/index.md
@@ -13,7 +13,8 @@ slug: Web/API/Response/type
 - `opaque`：对跨源资源的“no-cors”请求的响应。[严格限制](https://fetch.spec.whatwg.org/#concept-filtered-response-opaque)。
 - `opaqueredirect`：fetch 请求是通过 `redirect: "manual"` 发出的。响应的状态是 0，标头是空的，主体是 null，trailer 是空的。
 
-> **备注：** “错误”响应从来没有真正暴露于脚本：这样的响应，{{domxref("GlobalFetch.fetch","fetch()")}} 将被 promise 拒绝。
+> [!NOTE]
+> “错误”响应从来没有真正暴露于脚本：这样的响应，{{domxref("GlobalFetch.fetch","fetch()")}} 将被 promise 拒绝。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/rtcdatachannel/index.md b/files/zh-cn/web/api/rtcdatachannel/index.md
index 358a94732e4dc8..84c1d27c46b63a 100644
--- a/files/zh-cn/web/api/rtcdatachannel/index.md
+++ b/files/zh-cn/web/api/rtcdatachannel/index.md
@@ -9,7 +9,8 @@ RTCDataChannel 接口代表在两者之间建立了一个双向数据通道的
 
 可以用 {{domxref("RTCDataChannel.createDataChannel()")}} 或者在现有的 {{domxref("RTCPeerConnection")}} 上用 {{domxref("RTCDataChannelEvent")}} 类型的 {{DOMxRef("RTCPeerConnection.datachannel_event", "datachannel")}} 事件接收，创建出 RTCDataChannel 类型的对象。
 
-> **备注：** 这个 API 在 Gecko 中被称作 DataChannel 而不是标准的'RTCDataChannel'。
+> [!NOTE]
+> 这个 API 在 Gecko 中被称作 DataChannel 而不是标准的'RTCDataChannel'。
 
 ## 属性
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/address/index.md b/files/zh-cn/web/api/rtcicecandidate/address/index.md
index c614c0ea60f98c..1b0187946d2b98 100644
--- a/files/zh-cn/web/api/rtcicecandidate/address/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/address/index.md
@@ -15,7 +15,8 @@ l10n:
 
 提供候选者来源的 IP 地址的字符串。
 
-> **备注：** 如果候选者的 `port`（端口）为 `null`, 并且{{Glossary("user agent", "用户代理")}}支持端口，将这个候选者传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 将失败，并抛出 `OperationError` 异常。
+> [!NOTE]
+> 如果候选者的 `port`（端口）为 `null`, 并且{{Glossary("user agent", "用户代理")}}支持端口，将这个候选者传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 将失败，并抛出 `OperationError` 异常。
 
 ## 安全注意事项
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/foundation/index.md b/files/zh-cn/web/api/rtcicecandidate/foundation/index.md
index 480c2ac4c89030..f8ea0061b2c631 100644
--- a/files/zh-cn/web/api/rtcicecandidate/foundation/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/foundation/index.md
@@ -15,7 +15,8 @@ l10n:
 
 在所有可用的 {{domxref("RTCIceTransport")}} 对象上标识唯一候选者的字符串。
 
-> **备注：** 如果候选者 `port`（端口）的值为 `null`，并且{{Glossary("user agent", "用户代理")}}支持 `port`，将这个候选者传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 时将失败，并抛出 `OperationError` 异常。
+> [!NOTE]
+> 如果候选者 `port`（端口）的值为 `null`，并且{{Glossary("user agent", "用户代理")}}支持 `port`，将这个候选者传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 时将失败，并抛出 `OperationError` 异常。
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/port/index.md b/files/zh-cn/web/api/rtcicecandidate/port/index.md
index 42f3d2a62d9a07..7424344eb66699 100644
--- a/files/zh-cn/web/api/rtcicecandidate/port/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/port/index.md
@@ -15,7 +15,8 @@ l10n:
 
 一个 16 位整数，指示候选对等端可以到达的 {{domxref("RTCIceCandidate/address", "address")}} 所指定的设备上的端口号。如果在 `candidate` 中未指定 `port`，或者 `candidate` 字符串无法正确解析，则将端口初始化为 `null`。
 
-> **备注：** 如果 `port` 值为 `null`，则将该候选者传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 时将失败，抛出 `OperationError` 异常。只有当候选者实现 `port` 时才适用此规则。
+> [!NOTE]
+> 如果 `port` 值为 `null`，则将该候选者传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 时将失败，抛出 `OperationError` 异常。只有当候选者实现 `port` 时才适用此规则。
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/priority/index.md b/files/zh-cn/web/api/rtcicecandidate/priority/index.md
index dfc36478f5f8e5..0177123b282189 100644
--- a/files/zh-cn/web/api/rtcicecandidate/priority/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/priority/index.md
@@ -15,7 +15,8 @@ l10n:
 
 一个无符号长整数值，指示由远程对等端确定的候选者的优先级。这个值越大，远程对等端认为这个候选者越可取。如果没有在 `candidate`（属性行）中指定 `priority` 或者 `candidate` 字符串不能被正确解析，该值则为 `null`。
 
-> **备注：** 如果 `priority` 为 `null`，则将 `candidate` 传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 将失败，抛出 `OperationError` 异常。只有当候选者实现 `priority` 属性时才适用此规则。
+> [!NOTE]
+> 如果 `priority` 为 `null`，则将 `candidate` 传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 将失败，抛出 `OperationError` 异常。只有当候选者实现 `priority` 属性时才适用此规则。
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/protocol/index.md b/files/zh-cn/web/api/rtcicecandidate/protocol/index.md
index fcc0e06d732518..e9adf074ed377c 100644
--- a/files/zh-cn/web/api/rtcicecandidate/protocol/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/protocol/index.md
@@ -22,7 +22,8 @@ l10n:
 - `udp`
   - : 该候选者将使用 {{Glossary("UDP")}} 传输协议进行数据传输。由于其更好的性能特点，是媒体交互的首选协议。
 
-> **备注：** 如果 `protocol` 为 `null`，且{{Glossary("user agent","用户代理")}}支持 `protocol`，则将 `candidate` 传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 将失败，抛出 `OperationError` 异常。
+> [!NOTE]
+> 如果 `protocol` 为 `null`，且{{Glossary("user agent","用户代理")}}支持 `protocol`，则将 `candidate` 传递给 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 将失败，抛出 `OperationError` 异常。
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/sdpmid/index.md b/files/zh-cn/web/api/rtcicecandidate/sdpmid/index.md
index 70cdb5c94e5ede..5636d11f1bb23b 100644
--- a/files/zh-cn/web/api/rtcicecandidate/sdpmid/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/sdpmid/index.md
@@ -15,7 +15,8 @@ l10n:
 
 一个唯一标识候选者从中提取数据的源媒体组件的字符串，如果候选者不存在此类关联，则为 `null`。
 
-> **备注：** 使用 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 添加候选者的 `sdpMid` 和 `sdpMLineIndex` 都为 `null` 时，将抛出 {{jsxref("TypeError")}} 异常。
+> [!NOTE]
+> 使用 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 添加候选者的 `sdpMid` 和 `sdpMLineIndex` 都为 `null` 时，将抛出 {{jsxref("TypeError")}} 异常。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/sdpmlineindex/index.md b/files/zh-cn/web/api/rtcicecandidate/sdpmlineindex/index.md
index 8ca72ada26968e..c6036b86054af8 100644
--- a/files/zh-cn/web/api/rtcicecandidate/sdpmlineindex/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/sdpmlineindex/index.md
@@ -15,7 +15,8 @@ l10n:
 
 包含指向提供媒体描述的媒体行集合的从零开始的索引，表明哪个媒体源与候选者相关联；如果没有这样的关联，则为 `null`。
 
-> **备注：** 使用 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 添加一个 `sdpMid` 和 `sdpMLineIndex` 都为 `null` 的候选者时，将抛出 {{jsxref("TypeError")}} 异常。
+> [!NOTE]
+> 使用 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 添加一个 `sdpMid` 和 `sdpMLineIndex` 都为 `null` 的候选者时，将抛出 {{jsxref("TypeError")}} 异常。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/tojson/index.md b/files/zh-cn/web/api/rtcicecandidate/tojson/index.md
index 7b911c6548aaf3..39e27b8a17ad89 100644
--- a/files/zh-cn/web/api/rtcicecandidate/tojson/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/tojson/index.md
@@ -34,7 +34,8 @@ toJSON()
 - `usernameFragment` {{optional_inline}}
   - : 一个包含用户名片段（通常简称为“ufrag”或“ice-ufrag”）的字符串。其连同 ICE 密码（“ice-pwd”），作为一个正在进行的 ICE 交互的唯一标识（包括所有与 {{Glossary("STUN")}} 服务器的通信）。更多信息可以查阅 {{domxref("RTCIceCandidate.usernameFragment")}}。
 
-> **备注：** 返回的 JSON 对象的格式/属性，与传递给 {{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}} 构造函数的配置候选者的 `candidateInfo` 对象相同。
+> [!NOTE]
+> 返回的 JSON 对象的格式/属性，与传递给 {{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}} 构造函数的配置候选者的 `candidateInfo` 对象相同。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/rtcicecandidate/usernamefragment/index.md b/files/zh-cn/web/api/rtcicecandidate/usernamefragment/index.md
index ac981d5431fe6d..a72016f80293c0 100644
--- a/files/zh-cn/web/api/rtcicecandidate/usernamefragment/index.md
+++ b/files/zh-cn/web/api/rtcicecandidate/usernamefragment/index.md
@@ -25,7 +25,8 @@ ICE 会话开始时，ICE 层需要随机选择 `ufrag` 字段中的至少 24 
 
 ICE 使用 `usernameFragment` 和密码来确保消息完整性。这可以避免多个正在进行的 ICE 会话之间的串话，更重要的是，可以帮助保护 ICE 传输（以及 WebRTC 的所有内容）免受试图将自身注入到 ICE 交换中的攻击。
 
-> **备注：** 出于的完整的安全性考虑，没有 API 可以获取 ICE 密码。
+> [!NOTE]
+> 出于的完整的安全性考虑，没有 API 可以获取 ICE 密码。
 
 `usernameFragment` 和密码在每次 [ICE 重启](/zh-CN/docs/Web/API/WebRTC_API/Session_lifetime#ice_重启)时都会更改。
 
diff --git a/files/zh-cn/web/api/rtcpeerconnection/addicecandidate/index.md b/files/zh-cn/web/api/rtcpeerconnection/addicecandidate/index.md
index 83e65df81d6b9e..6e128112fd1975 100644
--- a/files/zh-cn/web/api/rtcpeerconnection/addicecandidate/index.md
+++ b/files/zh-cn/web/api/rtcpeerconnection/addicecandidate/index.md
@@ -58,7 +58,8 @@ addIceCandidate(candidate, successCallback, failureCallback) // 已弃用
 
           更多信息请参见 {{domxref("RTCIceCandidate.candidate")}}。
 
-          > **备注：** 为了向后兼容历史版本的 WebRTC 规范，构造函数也接受一个字符串作为参数。
+          > [!NOTE]
+          > 为了向后兼容历史版本的 WebRTC 规范，构造函数也接受一个字符串作为参数。
 
     - `sdpMid` {{optional_inline}}
 
diff --git a/files/zh-cn/web/api/rtcpeerconnection/addtrack/index.md b/files/zh-cn/web/api/rtcpeerconnection/addtrack/index.md
index c7a5abd492d3c8..2906e23997e4f7 100644
--- a/files/zh-cn/web/api/rtcpeerconnection/addtrack/index.md
+++ b/files/zh-cn/web/api/rtcpeerconnection/addtrack/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("RTCPeerConnection")}} 接口的 **`addTrack()`** 方法将媒体轨道添加到将传输给其他对等端的轨道集合中。
 
-> **备注：** 通过向连接添加轨道来触发 {{DOMxRef("RTCPeerConnection/negotiationneeded_event", "negotiationneeded")}} 事件，从而重新进行协商。详情请参见[开始协商](/zh-CN/docs/Web/API/WebRTC_API/Signaling_and_video_calling#开始协商)。
+> [!NOTE]
+> 通过向连接添加轨道来触发 {{DOMxRef("RTCPeerConnection/negotiationneeded_event", "negotiationneeded")}} 事件，从而重新进行协商。详情请参见[开始协商](/zh-CN/docs/Web/API/WebRTC_API/Signaling_and_video_calling#开始协商)。
 
 ## 语法
 
@@ -33,7 +34,8 @@ addTrack(track, stream1, stream2, /* …, */ streamN)
 
 将用于传输媒体数据的 {{domxref("RTCRtpSender")}} 实例。
 
-> **备注：** 每个 `RTCRtpSender` 都与一个 {{domxref("RTCRtpReceiver")}} 配对，组成一个 {{domxref("RTCRtpTransceiver")}}。相对应的接收器会被置于静默状态（无法传递数据包），直到远程对等端向接收器添加一个或多个流。
+> [!NOTE]
+> 每个 `RTCRtpSender` 都与一个 {{domxref("RTCRtpReceiver")}} 配对，组成一个 {{domxref("RTCRtpTransceiver")}}。相对应的接收器会被置于静默状态（无法传递数据包），直到远程对等端向接收器添加一个或多个流。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/rtcpeerconnection/cantrickleicecandidates/index.md b/files/zh-cn/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
index 68073844bd66fe..7a5dcb260da4bd 100644
--- a/files/zh-cn/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
+++ b/files/zh-cn/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
@@ -15,7 +15,8 @@ slug: Web/API/RTCPeerConnection/canTrickleIceCandidates
 
 {{jsxref("Boolean")}} 如果远程对等方可以接受涓流 ICE 候选，则为 true；如果不能，则为 false。如果尚未建立远程对等方，则此值为 null。
 
-> **备注：** 一旦本地对等方调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}}，就确定该属性的值；ICE 代理使用所提供的描述来确定远程对等方是否支持涓流 ICE 候选。
+> [!NOTE]
+> 一旦本地对等方调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}}，就确定该属性的值；ICE 代理使用所提供的描述来确定远程对等方是否支持涓流 ICE 候选。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/rtcpeerconnection/createdatachannel/index.md b/files/zh-cn/web/api/rtcpeerconnection/createdatachannel/index.md
index 5467d201bb49d9..7daea809f3f6f1 100644
--- a/files/zh-cn/web/api/rtcpeerconnection/createdatachannel/index.md
+++ b/files/zh-cn/web/api/rtcpeerconnection/createdatachannel/index.md
@@ -39,7 +39,8 @@ dataChannel = RTCPeerConnection.createDataChannel(label[, options]);
 - `id` {{optional_inline}}
   - : An 16-bit numeric ID for the channel; permitted values are 0-65534. If you don't include this option, the user agent will select an ID for you.
 
-> **备注：** The options which can be configured using the `RTCDataChannelInit` dictionary represent the script-settable subset of the properties on the {{domxref("RTCDataChannel")}} interface.
+> [!NOTE]
+> The options which can be configured using the `RTCDataChannelInit` dictionary represent the script-settable subset of the properties on the {{domxref("RTCDataChannel")}} interface.
 
 ### Return value
 
diff --git a/files/zh-cn/web/api/rtcpeerconnection/createoffer/index.md b/files/zh-cn/web/api/rtcpeerconnection/createoffer/index.md
index 9b9fb93a7639d3..d5e6b658bd8352 100644
--- a/files/zh-cn/web/api/rtcpeerconnection/createoffer/index.md
+++ b/files/zh-cn/web/api/rtcpeerconnection/createoffer/index.md
@@ -31,7 +31,8 @@ myPeerConnection.createOffer(successCallback, failureCallback, [options]) {{depr
     为了在现代实现中模拟此行为，该成员的值为 false 将设置所有现有音频收发器的方向以排除接收（即，设置为“仅发送”或“无效”）。
     在现代实现中，此成员的值为 true 的存在将确保至少有一个收发器集可以接收尚未停止的音频，如果没有，则将创建一个。
 
-    > **备注：** 你不应该使用此旧版属性。取而代之，用 {{domxref("RTCRtpTransceiver")}} 去控制是否接受传入的音频。
+    > [!NOTE]
+    > 你不应该使用此旧版属性。取而代之，用 {{domxref("RTCRtpTransceiver")}} 去控制是否接受传入的音频。
 
 - `offerToReceiveVideo` {{optional_inline}} (Legacy)
 
@@ -39,7 +40,8 @@ myPeerConnection.createOffer(successCallback, failureCallback, [options]) {{depr
     为了在现代实现中模拟这种行为，该成员的值为`false`将设置所有现有视频收发器的方向以排除接收（即设置为“仅发送”或“无效”）。
     在现代实现中，该成员的值为 true 的存在将确保至少有一个收发器集可以接收尚未停止的视频，如果没有，则将创建一个。
 
-    > **备注：** 你不应该使用此旧版属性。取而代之，用 {{domxref("RTCRtpTransceiver")}} 去控制是否接受传入的视频。
+    > [!NOTE]
+    > 你不应该使用此旧版属性。取而代之，用 {{domxref("RTCRtpTransceiver")}} 去控制是否接受传入的视频。
 
 - `voiceActivityDetection` {{optional_inline}}
   - : 一些编解码器和硬件能够通过监视是否出现“静音”（或相对较低的声音水平）来检测音频何时开始和结束。通过仅在实际有广播内容时发送音频数据，从而减少了用于音频的网络带宽。但是，在某些情况下，这是不需要的。例如，在音乐或其他非语音传输的情况下，这可能会导致重要的低音量声音丢失。而且，紧急呼叫在安静时切勿切断音频。此选项默认为**`true`**（启用语音活动检测）。
@@ -74,7 +76,8 @@ myPeerConnection.createOffer(successCallback, failureCallback, [options]) {{depr
 
 在这里，我们看到了 {{DOMxRef("RTCPeerConnection/negotiationneeded_event", "negotiationneeded")}} 事件的处理程序，该处理程序创建了要约，并通过信令通道将其发送到远程系统。
 
-> **备注：** 请记住，这是信令过程的一部分，传输层的实现细节完全由你决定。在这种情况下，[WebSocket](/zh-CN/docs/Web/API/WebSocket_API)连接用于向其他端点发送带有值为“video-offer”的类型字段的{{Glossary("JSON")}}消息。传递给`sendToServer()`函数的对象的内容，以及承诺履行处理程序中的所有其他内容，完全取决于你的设计。
+> [!NOTE]
+> 请记住，这是信令过程的一部分，传输层的实现细节完全由你决定。在这种情况下，[WebSocket](/zh-CN/docs/Web/API/WebSocket_API)连接用于向其他端点发送带有值为“video-offer”的类型字段的{{Glossary("JSON")}}消息。传递给`sendToServer()`函数的对象的内容，以及承诺履行处理程序中的所有其他内容，完全取决于你的设计。
 
 ```js
 myPeerConnection
diff --git a/files/zh-cn/web/api/rtcpeerconnection/currentlocaldescription/index.md b/files/zh-cn/web/api/rtcpeerconnection/currentlocaldescription/index.md
index dbe93ac471c060..805b3ffb2dcf07 100644
--- a/files/zh-cn/web/api/rtcpeerconnection/currentlocaldescription/index.md
+++ b/files/zh-cn/web/api/rtcpeerconnection/currentlocaldescription/index.md
@@ -9,7 +9,8 @@ slug: Web/API/RTCPeerConnection/currentLocalDescription
 
 若想改变 `currentLocalDescription` ，则调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 。这将会触发引发该值被设置的一系列事件。如果希望详细了解策略与机制，查阅[待定的和当前描述](/zh-CN/docs/Web/API/WebRTC_API/Connectivity#待定的和当前描述)。
 
-> **备注：** 与 {{domxref("RTCPeerConnection.localDescription")}} 不同，这个值代表了当前连接的本地端的事实当前状态； `localDescription` 也许指明了一个当前正在切换中的连接的 description。
+> [!NOTE]
+> 与 {{domxref("RTCPeerConnection.localDescription")}} 不同，这个值代表了当前连接的本地端的事实当前状态； `localDescription` 也许指明了一个当前正在切换中的连接的 description。
 
 ## 语法
 
@@ -47,7 +48,8 @@ else {
 
 {{Compat}}
 
-> **备注：** The addition of `currentLocalDescription` and {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}} to the WebRTC spec is relatively recent. In browsers which don't support them, just use {{domxref("RTCPeerConnection.localDescription", "localDescription")}}.
+> [!NOTE]
+> The addition of `currentLocalDescription` and {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}} to the WebRTC spec is relatively recent. In browsers which don't support them, just use {{domxref("RTCPeerConnection.localDescription", "localDescription")}}.
 
 ## 参见
 
diff --git a/files/zh-cn/web/api/rtcpeerconnection/rtcpeerconnection/index.md b/files/zh-cn/web/api/rtcpeerconnection/rtcpeerconnection/index.md
index 01ce64a7b7f786..742e39a7a7b3ee 100644
--- a/files/zh-cn/web/api/rtcpeerconnection/rtcpeerconnection/index.md
+++ b/files/zh-cn/web/api/rtcpeerconnection/rtcpeerconnection/index.md
@@ -39,13 +39,15 @@ new RTCPeerConnection(configuration)
 
       - : 一个由 {{domxref("RTCCertificate")}} 对象组成的{{jsxref("Array", "数组", "", 1)}}，用于连接的身份验证。如果未指定该属性，则会为每一个 {{domxref("RTCPeerConnection")}} 实例自动创建一组证书。尽管一个给定的连接只使用一个证书，但提供多个证书可以支持多种算法，从而提高某些情况下的连接成功的机率。参见[使用证书](#使用证书)以了解更多信息。
 
-        > **备注：** 此配置选项在首次指定后便不能更改；一旦设置了证书，此属性将在之后调用 {{domxref("RTCPeerConnection.setConfiguration()")}} 时被忽略。
+        > [!NOTE]
+        > 此配置选项在首次指定后便不能更改；一旦设置了证书，此属性将在之后调用 {{domxref("RTCPeerConnection.setConfiguration()")}} 时被忽略。
 
     - `iceCandidatePoolSize` {{optional_inline}}
 
       - : 一个无符号 16 位整数，其指定了预获取的 ICE 候选池的大小。其默认值为 0（表示不会发生候选的预获取）。你可能会发现，在某些情况下，通过在尝试建立连接前允许 ICE 代理预获取 ICE 候选，可以更快地建立连接，以在调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 时，已可以检查连接。
 
-        > **备注：** 改变 ICD 候选池的大小可能会触发 ICE 收集的开始。
+        > [!NOTE]
+        > 改变 ICD 候选池的大小可能会触发 ICE 收集的开始。
 
     - `iceServers` {{optional_inline}}
       - : 一个由 {{domxref("RTCIceServer")}} 对象组成的数组，每个对象描述一个可能被 ICE 代理使用的服务器；这些通常是 STUN 或 TURN 服务器。如果未指定，则将在没有可用的 STUN 或 TURN 服务器的情况下进行连接尝试，这将连接限制为本地对等点。
diff --git a/files/zh-cn/web/api/screen/lockorientation/index.md b/files/zh-cn/web/api/screen/lockorientation/index.md
index a8b5683f5d914d..73698d3a40fbd0 100644
--- a/files/zh-cn/web/api/screen/lockorientation/index.md
+++ b/files/zh-cn/web/api/screen/lockorientation/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Screen/lockOrientation
 
 `lockOrientation` 此方法会把屏幕锁定为指定的方向。
 
-> **备注：** 此方法仅适用于已安装的 Web apps 或 [全屏模式](/zh-CN/docs/Web/Guide/DOM/Using_full_screen_mode) 的 Web 页面。
+> [!NOTE]
+> 此方法仅适用于已安装的 Web apps 或 [全屏模式](/zh-CN/docs/Web/Guide/DOM/Using_full_screen_mode) 的 Web 页面。
 
 ## 使用方法
 
@@ -37,7 +38,8 @@ lockedAllowed = window.screen.lockOrientation(orientation);
 - `default`
   - : 它代表 `portrait-primary` 和 `landscape-primary` 主要取决于设备的自然方向。例如，如果面板分辨率为 1280 \* 800，则 `default` 为横向，如果分辨率为 800 \* 1280，则 `default` 为纵向。
 
-> **备注：** 可同时设置多个锁定值。因此，如果锁定设置为只有一个方向，屏幕方向将永远不会改变，直到屏幕方向解锁。否则，只要方向在设备锁定的方向之中，屏幕方向就会从一个方向改变到另一个方向。
+> [!NOTE]
+> 可同时设置多个锁定值。因此，如果锁定设置为只有一个方向，屏幕方向将永远不会改变，直到屏幕方向解锁。否则，只要方向在设备锁定的方向之中，屏幕方向就会从一个方向改变到另一个方向。
 
 ## 返回值
 
diff --git a/files/zh-cn/web/api/scriptprocessornode/index.md b/files/zh-cn/web/api/scriptprocessornode/index.md
index 52b98e7497bb83..5809f9ba0979c9 100644
--- a/files/zh-cn/web/api/scriptprocessornode/index.md
+++ b/files/zh-cn/web/api/scriptprocessornode/index.md
@@ -5,7 +5,8 @@ slug: Web/API/ScriptProcessorNode
 
 {{APIRef("Web Audio API")}}
 
-> **备注：** 这个特性在 2014 年 8 月 29 日发布的 Web Audio API 规范中已经标记为不推荐，将很快会被[Audio Workers](/zh-CN/docs/Web/API/Web_Audio_API#Audio_Workers)代替。
+> [!NOTE]
+> 这个特性在 2014 年 8 月 29 日发布的 Web Audio API 规范中已经标记为不推荐，将很快会被[Audio Workers](/zh-CN/docs/Web/API/Web_Audio_API#Audio_Workers)代替。
 
 `ScriptProcessorNode` 接口允许使用 JavaScript 生成、处理、分析音频。它是一个 {{domxref("AudioNode")}}，连接着两个缓冲区音频处理模块，其中一个缓冲区包含输入音频数据，另外一个包含处理后的输出音频数据。实现了 {{domxref("AudioProcessingEvent")}} 接口的一个事件，每当输入缓冲区有新的数据时，事件将被发送到该对象，并且事件将在数据填充到输出缓冲区后结束。
 
diff --git a/files/zh-cn/web/api/selection/index.md b/files/zh-cn/web/api/selection/index.md
index e44e17c3c193ea..5fa0608acc6218 100644
--- a/files/zh-cn/web/api/selection/index.md
+++ b/files/zh-cn/web/api/selection/index.md
@@ -142,7 +142,8 @@ Selection API 有一个共同的行为（即在浏览器之间共通），该行
 2. 调用一个 Selection API 方法，从而在可编辑元素内产生一个新选区，来创造一个新的 `Selection` 区域（{{domxref("Range")}}）。
 3. 然后焦点（此处应指显示的，译者注）移到可编辑元素。
 
-> **备注：** Selection API 方法只能将焦点移动到可编辑元素，而不能移动到其他可焦点元素（例如 {{HTMLElement("a")}}）。
+> [!NOTE]
+> Selection API 方法只能将焦点移动到可编辑元素，而不能移动到其他可焦点元素（例如 {{HTMLElement("a")}}）。
 
 上述行为适用于使用以下方法产生的选区：
 
diff --git a/files/zh-cn/web/api/selection/modify/index.md b/files/zh-cn/web/api/selection/modify/index.md
index 1638890186c050..0aaa17c0a09c80 100644
--- a/files/zh-cn/web/api/selection/modify/index.md
+++ b/files/zh-cn/web/api/selection/modify/index.md
@@ -22,9 +22,11 @@ sel.modify(alter, direction, granularity)
 - _granularity_
   - : 调整的距离颗粒度。可选值有 `"character"`、`"word"`、`"sentence"`、`"line"`、`"paragraph"`、`"lineboundary"`、`"sentenceboundary"`、`"paragraphboundary"`、`"documentboundary"`。
 
-> **备注：** Gecko **不支持** `"sentence"`, `"paragraph"`, `"sentenceboundary"`, `"paragraphboundary"` 和 `"documentboundary"`. Webkit 和 Blink 支持。
+> [!NOTE]
+> Gecko **不支持** `"sentence"`, `"paragraph"`, `"sentenceboundary"`, `"paragraphboundary"` 和 `"documentboundary"`. Webkit 和 Blink 支持。
 
-> **备注：** 从 Gecko 5.0 开始，不管是不是浏览器的默认行为，`"word"` 颗粒度不再包括单词后面的空格。这让这个行为变得更加稳定，这也和之前的 Webkit 保持一致，然而不幸的是他们最近修改了这个默认行为。
+> [!NOTE]
+> 从 Gecko 5.0 开始，不管是不是浏览器的默认行为，`"word"` 颗粒度不再包括单词后面的空格。这让这个行为变得更加稳定，这也和之前的 Webkit 保持一致，然而不幸的是他们最近修改了这个默认行为。
 
 ## 例子
 
diff --git a/files/zh-cn/web/api/selection/setbaseandextent/index.md b/files/zh-cn/web/api/selection/setbaseandextent/index.md
index d3e79b16bb36ad..f5532f0bb1ed9e 100644
--- a/files/zh-cn/web/api/selection/setbaseandextent/index.md
+++ b/files/zh-cn/web/api/selection/setbaseandextent/index.md
@@ -24,7 +24,8 @@ sel.setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)
 - `focusOffset`
   - : 选中范围内结束位置在焦点节点下第几个子节点的位置。例如，如果是值为 0 的话，整个节点都是被选中的。如果值为 1 的话，那么至少整个节点至少有一个子节点被选中。以此类推。
 
-> **备注：** 如果源代码中`焦点节点`出现在`锚节点`之前的话，这两个将在参数中互换位置，也就是锚节点变为了焦点节点、焦点节点变为了锚节点。另外，这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾，这对于任何可能遵循这规则的键盘命令都是很重要的。例如，<kbd>Shift</kbd> + <kbd>➡︎</kbd> 会使选中状态范围的从开始缩小，而不是在结尾增加。
+> [!NOTE]
+> 如果源代码中`焦点节点`出现在`锚节点`之前的话，这两个将在参数中互换位置，也就是锚节点变为了焦点节点、焦点节点变为了锚节点。另外，这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾，这对于任何可能遵循这规则的键盘命令都是很重要的。例如，<kbd>Shift</kbd> + <kbd>➡︎</kbd> 会使选中状态范围的从开始缩小，而不是在结尾增加。
 
 ### 返回值
 
@@ -100,7 +101,8 @@ button.onclick = function () {
 
 {{ EmbedLiveSample('示例', '100%', 370) }}
 
-> **备注：** 实例在这里 [example on GitHub](https://github.com/chrisdavidmills/selection-api-examples/blob/master/setBaseAndExtent.html) ([see it live also](https://chrisdavidmills.github.io/selection-api-examples/setBaseAndExtent.html).)
+> [!NOTE]
+> 实例在这里 [example on GitHub](https://github.com/chrisdavidmills/selection-api-examples/blob/master/setBaseAndExtent.html) ([see it live also](https://chrisdavidmills.github.io/selection-api-examples/setBaseAndExtent.html).)
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/sensor_apis/index.md b/files/zh-cn/web/api/sensor_apis/index.md
index 5067f3ebc61cf4..0d727ad6c49113 100644
--- a/files/zh-cn/web/api/sensor_apis/index.md
+++ b/files/zh-cn/web/api/sensor_apis/index.md
@@ -103,7 +103,8 @@ magSensor.start();
 
 下面的示例代码说明以上原则。{{jsxref('statements/try...catch', 'try...catch')}}代码块捕捉在实例化传感器时抛出的错误。它实现了一个{{domxref('Sensor.onerror')}}处理函数以捕捉使用中抛出的错误。它只在以下情况下提示用户：需要请求[权限](/zh-CN/docs/Web/API/Permissions_API)时，以及所请求的传感器类型在设备上不支持时。
 
-> **备注：** 如果一个权限策略（permission policy）阻止了对某功能的使用，这是因为你的代码与你的服务器上设置的策略不一致。这种情况是不应该显示给用户看的。具体实现请参见 {{httpheader('Permissions-Policy')}}。
+> [!NOTE]
+> 如果一个权限策略（permission policy）阻止了对某功能的使用，这是因为你的代码与你的服务器上设置的策略不一致。这种情况是不应该显示给用户看的。具体实现请参见 {{httpheader('Permissions-Policy')}}。
 
 ```js
 let accelerometer = null;
diff --git a/files/zh-cn/web/api/server-sent_events/index.md b/files/zh-cn/web/api/server-sent_events/index.md
index 33c1fff8af8f94..7bf2721ead8625 100644
--- a/files/zh-cn/web/api/server-sent_events/index.md
+++ b/files/zh-cn/web/api/server-sent_events/index.md
@@ -10,7 +10,8 @@ l10n:
 
 通常来说，一个网页获取新的数据通常需要发送一个请求到服务器，也就是向服务器请求的页面。使用服务器发送事件，服务器可以随时向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上以[_事件_](/zh-CN/docs/Web/API/Event)*+数据*的形式来处理。
 
-> **备注：** Firefox 不能在 service worker 正常支持服务器发送事件（但支持在 Dedicated Worker 和 Shared Worker 中使用）。参见 [Firefox bug 1681218](https://bugzil.la/1681218)。
+> [!NOTE]
+> Firefox 不能在 service worker 正常支持服务器发送事件（但支持在 Dedicated Worker 和 Shared Worker 中使用）。参见 [Firefox bug 1681218](https://bugzil.la/1681218)。
 
 ## 概念与使用
 
diff --git a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.md b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.md
index dd03702ada9722..41e2b568e364d0 100644
--- a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.md
+++ b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.md
@@ -59,7 +59,8 @@ evtSource.addEventListener("ping", (event) => {
 
 每当服务器发送一个 `event` 字段设置为 `ping` 的消息时，就会调用这段代码；这段代码接着解析 `data` 字段中的 JSON，并输出这些信息。
 
-> **警告：** 当**不通过 HTTP/2 使用时**，SSE（server-sent events）会受到最大连接数的限制，这在打开多个选项卡时特别麻烦，因为该限制是针对*每个浏览器*的，并且被设置为一个非常低的数字（6）。该问题在 [Chrome](https://crbug.com/275955) 和 [Firefox](https://bugzil.la/906896) 中被标记为“不会解决”。此限制是针对每个浏览器 + 域的，因此这意味着你可以跨所有选项卡打开 6 个 SSE 连接到 `www.example1.com`，并打开 6 个 SSE 连接到 `www.example2.com`。（来自 [Stackoverflow](https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource/5326159)）。使用 HTTP/2 时，同一时间内 *HTTP 最大连接数*由服务器和客户端之间协商（默认为 100）。
+> [!WARNING]
+> 当**不通过 HTTP/2 使用时**，SSE（server-sent events）会受到最大连接数的限制，这在打开多个选项卡时特别麻烦，因为该限制是针对*每个浏览器*的，并且被设置为一个非常低的数字（6）。该问题在 [Chrome](https://crbug.com/275955) 和 [Firefox](https://bugzil.la/906896) 中被标记为“不会解决”。此限制是针对每个浏览器 + 域的，因此这意味着你可以跨所有选项卡打开 6 个 SSE 连接到 `www.example1.com`，并打开 6 个 SSE 连接到 `www.example2.com`。（来自 [Stackoverflow](https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource/5326159)）。使用 HTTP/2 时，同一时间内 *HTTP 最大连接数*由服务器和客户端之间协商（默认为 100）。
 
 ## 从服务器端发送事件
 
@@ -95,7 +96,8 @@ while (true) {
 
 这段代码每秒钟会生成一个类型为“ping”的事件，每个事件的数据都是一个 JSON 对象，包含对应于事件生成时间的 ISO 8601 时间戳。同时，还会在随机的时间间隔内发送一个简单的消息（没有事件类型）。这个循环会一直运行，不受连接状态的影响，因此在检查到连接关闭的情况时需要手动中断循环（例如客户端关闭页面）。
 
-> **备注：** 你可以在 Github 上找到以上代码的完整示例——参见[使用 PHP 语言的简单 SSE 示例](https://github.com/mdn/dom-examples/tree/main/server-sent-events)。
+> [!NOTE]
+> 你可以在 Github 上找到以上代码的完整示例——参见[使用 PHP 语言的简单 SSE 示例](https://github.com/mdn/dom-examples/tree/main/server-sent-events)。
 
 ## 错误处理
 
@@ -119,7 +121,8 @@ evtSource.close();
 
 事件流是一个简单的文本数据流，文本应该使用 [UTF-8](/zh-CN/docs/Glossary/UTF-8) 格式的编码。事件流中的消息由一对换行符分开。以冒号开头的行为注释行，会被忽略。
 
-> **备注：** 注释行可以用来防止连接超时，服务器可以定期发送一条消息注释行，以保持连接不断。
+> [!NOTE]
+> 注释行可以用来防止连接超时，服务器可以定期发送一条消息注释行，以保持连接不断。
 
 每条消息由一行或多行文字组成，列出该消息的字段。每个字段由字段名表示，后面是冒号，然后是该字段值的文本数据。
 
@@ -138,7 +141,8 @@ evtSource.close();
 
 所有其他的字段名都会被忽略。
 
-> **备注：** 如果一行文本中不包含冒号，则整行文本会被解析成为字段名，其字段值为空。
+> [!NOTE]
+> 如果一行文本中不包含冒号，则整行文本会被解析成为字段名，其字段值为空。
 
 ### 示例
 
diff --git a/files/zh-cn/web/api/service_worker_api/index.md b/files/zh-cn/web/api/service_worker_api/index.md
index a3a72f133e798b..d05a0bfc7f9df1 100644
--- a/files/zh-cn/web/api/service_worker_api/index.md
+++ b/files/zh-cn/web/api/service_worker_api/index.md
@@ -15,11 +15,14 @@ Service worker 运行在 worker 上下文：因此它无法访问 DOM，相对
 
 出于安全考量，Service worker 只能由 HTTPS 承载，毕竟修改网络请求的能力暴露给{{Glossary("MitM", "中间人攻击")}}会非常危险，如果允许访问这些强大的 API，此类攻击将会变得很严重。在 Firefox 浏览器的[用户隐私模式](https://support.mozilla.org/zh-CN/kb/private-browsing-use-firefox-without-history)，Service Worker 不可用。
 
-> **备注：** 在 Firefox，为了进行测试，你可以通过 HTTP 运行 service worker（不安全）；只需选中 Firefox 开发者选项/齿轮菜单中的 **Enable Service Workers over HTTP (when toolbox is open)** 选项。
+> [!NOTE]
+> 在 Firefox，为了进行测试，你可以通过 HTTP 运行 service worker（不安全）；只需选中 Firefox 开发者选项/齿轮菜单中的 **Enable Service Workers over HTTP (when toolbox is open)** 选项。
 
-> **备注：** 与之前在该领域的尝试不同，如 [AppCache](https://alistapart.com/article/application-cache-is-a-douchebag/)），service worker 并不确定你试图去做什么，但是当这些假设不完全正确时，它们会被中断。相对地，service worker 可以更细致地控制每一件事情。
+> [!NOTE]
+> 与之前在该领域的尝试不同，如 [AppCache](https://alistapart.com/article/application-cache-is-a-douchebag/)），service worker 并不确定你试图去做什么，但是当这些假设不完全正确时，它们会被中断。相对地，service worker 可以更细致地控制每一件事情。
 
-> **备注：** Service worker 大量使用 [Promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，因为通常它们会等待响应后继续，并根据响应返回一个成功或者失败的操作。Promise 非常适合这种场景。
+> [!NOTE]
+> Service worker 大量使用 [Promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，因为通常它们会等待响应后继续，并根据响应返回一个成功或者失败的操作。Promise 非常适合这种场景。
 
 ### 注册
 
@@ -52,7 +55,8 @@ Service worker 运行在 worker 上下文：因此它无法访问 DOM，相对
 
 Servcie worker 可以通过 {{domxref("FetchEvent")}} 事件去响应请求。通过使用 {{domxref("FetchEvent.respondWith") }} 方法，你可以任意修改对于这些请求的响应。
 
-> **备注：** 因为 `oninstall` 和 `onactivate` 完成前需要一些时间，service worker 标准提供一个 {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} 方法。一旦在带有 promise 的 `install` 或 `activate` 事件上调用它，那么 `fetch` 和 `push` 等功能事件将等待，直到 promise 成功兑现。
+> [!NOTE]
+> 因为 `oninstall` 和 `onactivate` 完成前需要一些时间，service worker 标准提供一个 {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} 方法。一旦在带有 promise 的 `install` 或 `activate` 事件上调用它，那么 `fetch` 和 `push` 等功能事件将等待，直到 promise 成功兑现。
 
 构建一个基本用例的完整教程，请阅读[使用 Service Worker](/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers)。
 
diff --git a/files/zh-cn/web/api/service_worker_api/using_service_workers/index.md b/files/zh-cn/web/api/service_worker_api/using_service_workers/index.md
index a03fdf182afad3..7c617681615801 100644
--- a/files/zh-cn/web/api/service_worker_api/using_service_workers/index.md
+++ b/files/zh-cn/web/api/service_worker_api/using_service_workers/index.md
@@ -87,7 +87,8 @@ registerServiceWorker();
 
 单个 service worker 可以控制很多页面。每个你的作用域（scope）里的页面加载完的时候，安装在页面的 service worker 就可以控制它。牢记你需要小心 service worker 脚本里的全局变量：每个页面不会有自己独有的 worker。
 
-> **备注：** 关于 service worker 一个很棒的事情就是，如果你像我们上面做的那样使用特性检测，发现浏览器并不支持 service worker，但是它还是可以正常地以预期的方式在线使用你的 app。
+> [!NOTE]
+> 关于 service worker 一个很棒的事情就是，如果你像我们上面做的那样使用特性检测，发现浏览器并不支持 service worker，但是它还是可以正常地以预期的方式在线使用你的 app。
 
 #### 为什么我的 service worker 注册失败了？
 
@@ -139,7 +140,8 @@ self.addEventListener("install", (event) => {
 
 > **备注：** [Web Storage API（`localStorage`）](/zh-CN/docs/Web/API/Web_Storage_API)跟 service worker 的 cache 工作原理十分类似，但是它是同步的，所以不允许在 service worker 中使用。
 
-> **备注：** 如果你需要的话，可以在 service worker 中使用 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 来做数据存储。
+> [!NOTE]
+> 如果你需要的话，可以在 service worker 中使用 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 来做数据存储。
 
 ### 自定义请求的响应
 
@@ -383,7 +385,8 @@ self.addEventListener("fetch", (event) => {
 
 如果你的 service worker 已经被安装，但是刷新页面时有一个新版本的可用，新版的 service worker 会在后台安装，但是仍然不会被激活。当不再有任何已加载的页面在使用旧版的 service worker 的时候，新版本才会激活。一旦再也没有这样的已加载的页面，新的 service worker 就会被激活。
 
-> **备注：** 可以通过使用 [`Clients.claim()`](/zh-CN/docs/Web/API/Clients/claim) 绕过这一点。
+> [!NOTE]
+> 可以通过使用 [`Clients.claim()`](/zh-CN/docs/Web/API/Clients/claim) 绕过这一点。
 
 你想把你的新版的 service worker 里的 `install` 事件监听器改成下面这样（注意新的版本号）：
 
diff --git a/files/zh-cn/web/api/serviceworkerregistration/unregister/index.md b/files/zh-cn/web/api/serviceworkerregistration/unregister/index.md
index c4e6ca59d1273c..f1a39700be252a 100644
--- a/files/zh-cn/web/api/serviceworkerregistration/unregister/index.md
+++ b/files/zh-cn/web/api/serviceworkerregistration/unregister/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ServiceWorkerRegistration/unregister
 
 {{domxref("ServiceWorkerRegistration")}} 接口的 **`unregister`** 方法用于取消对 service worker 的注册并返回一个 {{jsxref("Promise")}}。没有找到注册时，这个 promise 返回 `false`，否则，不论取消成功与否都返回 `true` （当其他人在同一作用域调用了 {{domxref("ServiceWorkerContainer.register")}} 可能取消失败）service worker 会在取消注册前完成一切正在进行的操作。
 
-> **备注：** 这一特性同样适用于 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API)。
+> [!NOTE]
+> 这一特性同样适用于 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/serviceworkerregistration/update/index.md b/files/zh-cn/web/api/serviceworkerregistration/update/index.md
index 7c87162a0d8a24..ac541ec949739c 100644
--- a/files/zh-cn/web/api/serviceworkerregistration/update/index.md
+++ b/files/zh-cn/web/api/serviceworkerregistration/update/index.md
@@ -7,7 +7,8 @@ slug: Web/API/ServiceWorkerRegistration/update
 
 {{domxref("ServiceWorkerRegistration")}} 的 **`update`** 方法尝试更新 service worker。获得 worker 脚本的 URL，逐字节匹配新获取的 worker 和当前的 worker，存在差异的时候安装新的 worker。获取 worker 脚本的更新操作会忽略浏览器缓存的 24 小时前的内容。
 
-> **备注：** 这个特性也应用于 [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API).
+> [!NOTE]
+> 这个特性也应用于 [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API).
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/setinterval/index.md b/files/zh-cn/web/api/setinterval/index.md
index ccbe3b7c20d762..71fd4dab891a9f 100644
--- a/files/zh-cn/web/api/setinterval/index.md
+++ b/files/zh-cn/web/api/setinterval/index.md
@@ -34,7 +34,8 @@ var intervalID = setInterval(code, [delay]);
 
 值得注意的是，`setInterval()` 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。但是，我们应该匹配使用 `clearInterval()` 和 `clearTimeout()`，以避免代码杂乱无章，并增强代码的可维护性。
 
-> **备注：** 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒以内，因为它在 IDL 中被指定为一个有符号整数。
+> [!NOTE]
+> 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒以内，因为它在 IDL 中被指定为一个有符号整数。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/sharedworker/index.md b/files/zh-cn/web/api/sharedworker/index.md
index e3edbc5d0e16b6..790f494ad3ed8b 100644
--- a/files/zh-cn/web/api/sharedworker/index.md
+++ b/files/zh-cn/web/api/sharedworker/index.md
@@ -7,7 +7,8 @@ slug: Web/API/SharedWorker
 
 **`SharedWorker`** 接口代表一种特定类型的 worker，可以从几个浏览上下文中*访问*，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域，{{domxref("SharedWorkerGlobalScope")}} 。
 
-> **备注：** 如果要使 **SharedWorker** 连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）。
+> [!NOTE]
+> 如果要使 **SharedWorker** 连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）。
 
 ## 构造函数
 
diff --git a/files/zh-cn/web/api/sharedworker/sharedworker/index.md b/files/zh-cn/web/api/sharedworker/sharedworker/index.md
index 306699bd6c26b5..49117882249c8a 100644
--- a/files/zh-cn/web/api/sharedworker/sharedworker/index.md
+++ b/files/zh-cn/web/api/sharedworker/sharedworker/index.md
@@ -9,7 +9,8 @@ slug: Web/API/SharedWorker/SharedWorker
 
 如果 URL 的语法无效或者违反了同源策略会抛出 `SECURITY_ERR` 类型的 {{domxref("DOMException")}} 异常。
 
-> **备注：** 浏览器开发者对于 data URI 是否同源产生分歧。尽管 Gecko 10.0 及之后版本支持 data URIs，其他浏览器并不能支持。
+> [!NOTE]
+> 浏览器开发者对于 data URI 是否同源产生分歧。尽管 Gecko 10.0 及之后版本支持 data URIs，其他浏览器并不能支持。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/storage/clear/index.md b/files/zh-cn/web/api/storage/clear/index.md
index fe473b49cc6dd4..997a7d0c54d6d4 100644
--- a/files/zh-cn/web/api/storage/clear/index.md
+++ b/files/zh-cn/web/api/storage/clear/index.md
@@ -35,7 +35,8 @@ function populateStorage() {
 }
 ```
 
-> **备注：** 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
+> [!NOTE]
+> 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/storage/getitem/index.md b/files/zh-cn/web/api/storage/getitem/index.md
index b827d4e6142d1a..796191948661ea 100644
--- a/files/zh-cn/web/api/storage/getitem/index.md
+++ b/files/zh-cn/web/api/storage/getitem/index.md
@@ -42,7 +42,8 @@ function setStyles() {
 }
 ```
 
-> **备注：** 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
+> [!NOTE]
+> 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/storage/index.md b/files/zh-cn/web/api/storage/index.md
index d9cf553853a9f5..f5426924947343 100644
--- a/files/zh-cn/web/api/storage/index.md
+++ b/files/zh-cn/web/api/storage/index.md
@@ -61,7 +61,8 @@ function setStyles() {
 }
 ```
 
-> **备注：** 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
+> [!NOTE]
+> 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/storage/key/index.md b/files/zh-cn/web/api/storage/key/index.md
index 6206898403cc8a..805407a16693b0 100644
--- a/files/zh-cn/web/api/storage/key/index.md
+++ b/files/zh-cn/web/api/storage/key/index.md
@@ -42,7 +42,8 @@ for (let i = 0; i < localStorage.length; i++) {
 }
 ```
 
-> **备注：** 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
+> [!NOTE]
+> 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/storage/length/index.md b/files/zh-cn/web/api/storage/length/index.md
index 09996fb0c3771a..1242ccae9c0f5b 100644
--- a/files/zh-cn/web/api/storage/length/index.md
+++ b/files/zh-cn/web/api/storage/length/index.md
@@ -25,7 +25,8 @@ function populateStorage() {
 }
 ```
 
-> **备注：** 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
+> [!NOTE]
+> 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/storage/removeitem/index.md b/files/zh-cn/web/api/storage/removeitem/index.md
index 29f3f8357acc71..9fab7335ea2915 100644
--- a/files/zh-cn/web/api/storage/removeitem/index.md
+++ b/files/zh-cn/web/api/storage/removeitem/index.md
@@ -50,7 +50,8 @@ function populateStorage() {
 }
 ```
 
-> **备注：** 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
+> [!NOTE]
+> 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/storage/setitem/index.md b/files/zh-cn/web/api/storage/setitem/index.md
index ff2b17ca8f32cc..7992ff334cdad3 100644
--- a/files/zh-cn/web/api/storage/setitem/index.md
+++ b/files/zh-cn/web/api/storage/setitem/index.md
@@ -40,7 +40,8 @@ function populateStorage() {
 }
 ```
 
-> **备注：** 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
+> [!NOTE]
+> 有关实际运行的例子，详见 [Web Storage 演示](https://mdn.github.io/dom-examples/web-storage/)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/storage_api/index.md b/files/zh-cn/web/api/storage_api/index.md
index 53bd4da52bc807..b2be29b37847cb 100644
--- a/files/zh-cn/web/api/storage_api/index.md
+++ b/files/zh-cn/web/api/storage_api/index.md
@@ -47,7 +47,8 @@ Web 存储标准，the Storage Standard，定义了一个通用的、共享的
 
 如果站点或应用程序具有“**永久存储（`persistent-storage`）**”功能权限，则可以使用 {{domxref("StorageManager.persist()")}} 方法来请求将其 box 设为持久的。由于使用特性或其他度量，用户代理还可以决定使站点的存储单元持久化。“持久存储”功能的与权限相关的标志、算法和类型都设置为权限的标准默认值，只是整个源位置的权限状态必须相同，并且如果未“授予”权限状态（无论出于何种原因，访问持久性存储功能被拒绝），源站点存储单元的 box 模式总是“尽力”。
 
-> **备注：** 请参考 [使用 Permissions API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API) 以了解更多关于申请与管理权限的信息。
+> [!NOTE]
+> 请参考 [使用 Permissions API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API) 以了解更多关于申请与管理权限的信息。
 
 当清除站点存储单元时，源站的框被视为单个实体；如果用户代理需要清除它并且用户批准，则清除整个数据存储，而不是提供某种仅从单个 api 清除数据的方法。
 
diff --git a/files/zh-cn/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md b/files/zh-cn/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md
index ec9054059a07f6..6727345ae49e4f 100644
--- a/files/zh-cn/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md
+++ b/files/zh-cn/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md
@@ -7,7 +7,8 @@ slug: Web/API/Storage_API/Storage_quotas_and_eviction_criteria
 
 有许多 Web 技术可以在客户端（即本地磁盘上）存储这种或那种数据。浏览器计算分配给 Web 数据存储的空间大小以及达到该限制时要删除的内容的过程并不简单，并且浏览器之间有所不同。本文介绍了浏览器如何确定要清除的本地内容以及何时释放所需的本地存储空间。
 
-> **备注：** 对于大多数现代浏览器，以下信息应该相当准确，但在已知的情况下会调出特定于浏览器的信息。Opera 和 Chrome 在所有情况下都应该表现相同。[Opera Mini](http://www.opera.com/mobile/mini)（仍然是基于 presto 的，服务器端呈现）不会在客户端上存储任何数据。
+> [!NOTE]
+> 对于大多数现代浏览器，以下信息应该相当准确，但在已知的情况下会调出特定于浏览器的信息。Opera 和 Chrome 在所有情况下都应该表现相同。[Opera Mini](http://www.opera.com/mobile/mini)（仍然是基于 presto 的，服务器端呈现）不会在客户端上存储任何数据。
 
 ## 什么技术使用浏览器数据存储？
 
@@ -18,9 +19,11 @@ slug: Web/API/Storage_API/Storage_quotas_and_eviction_criteria
 - [缓存 API](/zh-CN/docs/Web/API/Cache)
 - Cookies
 
-> **备注：** 在 Firefox 中，[Web Storage](/zh-CN/docs/Web/API/Web_Storage_API)也将很快开始使用相同的存储管理工具，如本文档中所述。
+> [!NOTE]
+> 在 Firefox 中，[Web Storage](/zh-CN/docs/Web/API/Web_Storage_API)也将很快开始使用相同的存储管理工具，如本文档中所述。
 
-> **备注：** 在隐私浏览模式下，大多数数据存储不被支持。本地存储数据和 cookie 仍然可用，但它们是短暂的——当关闭最后一个隐私浏览窗口时，数据将被删除。
+> [!NOTE]
+> 在隐私浏览模式下，大多数数据存储不被支持。本地存储数据和 cookie 仍然可用，但它们是短暂的——当关闭最后一个隐私浏览窗口时，数据将被删除。
 
 源的“最后访问时间”会更新，当其中任何一个被激活/停用时——所有这些源下的配额客户端的数据会被回收。
 
@@ -48,11 +51,14 @@ slug: Web/API/Storage_API/Storage_quotas_and_eviction_criteria
 - `<profile>/storage/temporary`——临时数据存储库
 - `<profile>/storage/default`——默认数据存储库
 
-> **备注：** 引入[Storage API](/zh-CN/docs/Web/API/Web_Storage_API)后，“permanent”文件夹可以被认为是过时的；“permanent”文件夹仅存储 IndexedDB 持久性数据库。模式是“best-effort”还是“persistent”并不重要——数据存储在\<profile>/storage/default 下。
+> [!NOTE]
+> 引入[Storage API](/zh-CN/docs/Web/API/Web_Storage_API)后，“permanent”文件夹可以被认为是过时的；“permanent”文件夹仅存储 IndexedDB 持久性数据库。模式是“best-effort”还是“persistent”并不重要——数据存储在\<profile>/storage/default 下。
 
-> **备注：** 在 Firefox 中，可以通过`about:support`在 URL 栏中输入，然后按“ *配置文件夹”*标题旁边的*“在...中显示...”*按钮（例如，在 Mac OS X 上的*“在 Finder 中显示”）来查找*你的*配置文件文件夹*。
+> [!NOTE]
+> 在 Firefox 中，可以通过`about:support`在 URL 栏中输入，然后按“ *配置文件夹”*标题旁边的*“在...中显示...”*按钮（例如，在 Mac OS X 上的*“在 Finder 中显示”）来查找*你的*配置文件文件夹*。
 
-> **备注：** 如果你在存储的数据中查看配置文件，你可能会看到第四个文件夹：`persistent`。基本上，该`persistent`文件夹刚刚重命名为`permanent`以保持升级/迁移更简单。
+> [!NOTE]
+> 如果你在存储的数据中查看配置文件，你可能会看到第四个文件夹：`persistent`。基本上，该`persistent`文件夹刚刚重命名为`permanent`以保持升级/迁移更简单。
 
 **注意**：用户不应在其下添加自己的目录或文件到`<profile>/storage`下。这将导致存储初始化失败；例如，{{domxref("IDBFactory.open()","open()")}}会触发错误事件。
 
@@ -76,11 +82,14 @@ slug: Web/API/Storage_API/Storage_quotas_and_eviction_criteria
 - 组限制也称为“硬限制”：它不会触发源回收。
 - 全局限制是一个“软限制”，因为其有可能释放一些空间并且这个操作可能持续。
 
-> **备注：** 尽管上面提到了最小组限制，但组限制不能超过全局限制。如果你的内存非常低，全局限制为 8 MB，则组限制也将为 8 MB。
+> [!NOTE]
+> 尽管上面提到了最小组限制，但组限制不能超过全局限制。如果你的内存非常低，全局限制为 8 MB，则组限制也将为 8 MB。
 
-> **备注：** 如果超出组限制，或者如果原因驱逐无法释放足够的空间，浏览器将抛出`QuotaExceededError`错误。
+> [!NOTE]
+> 如果超出组限制，或者如果原因驱逐无法释放足够的空间，浏览器将抛出`QuotaExceededError`错误。
 
-> **备注：** 在 Chrome 中，自 M66 以来，软硬存储配额限制已发生变化。更多信息可以在[这里](https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68)找到。
+> [!NOTE]
+> 在 Chrome 中，自 M66 以来，软硬存储配额限制已发生变化。更多信息可以在[这里](https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68)找到。
 
 ## LRU 策略
 
diff --git a/files/zh-cn/web/api/storageevent/index.md b/files/zh-cn/web/api/storageevent/index.md
index d9c36fc50355ca..b5757515c07d72 100644
--- a/files/zh-cn/web/api/storageevent/index.md
+++ b/files/zh-cn/web/api/storageevent/index.md
@@ -11,7 +11,8 @@ slug: Web/API/StorageEvent
 
 {{InheritanceDiagram}}
 
-> **备注：** 尽管这个事件已经早在 Gecko 2.0 时就已存在，但是并不符合规范。老的事件模型直到 `nsIDOMStorageEventObsolete` 确定才被表现出来。
+> [!NOTE]
+> 尽管这个事件已经早在 Gecko 2.0 时就已存在，但是并不符合规范。老的事件模型直到 `nsIDOMStorageEventObsolete` 确定才被表现出来。
 
 ## 方法描述
 
diff --git a/files/zh-cn/web/api/storagemanager/getdirectory/index.md b/files/zh-cn/web/api/storagemanager/getdirectory/index.md
index 92fbb5598019ee..7938ba7ffa644b 100644
--- a/files/zh-cn/web/api/storagemanager/getdirectory/index.md
+++ b/files/zh-cn/web/api/storagemanager/getdirectory/index.md
@@ -69,7 +69,8 @@ onmessage = async (e) => {
 };
 ```
 
-> **备注：** 在规范的早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地指定为异步方法，并且某些较旧版本的浏览器以这种方式实现它们。然而，当前所有支持这些方法的浏览器都将它们实现为同步方法。
+> [!NOTE]
+> 在规范的早期版本中，{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}、{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}、{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} 被错误地指定为异步方法，并且某些较旧版本的浏览器以这种方式实现它们。然而，当前所有支持这些方法的浏览器都将它们实现为同步方法。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/streams_api/index.md b/files/zh-cn/web/api/streams_api/index.md
index 3df5d72315e584..ddfa9495d836a0 100644
--- a/files/zh-cn/web/api/streams_api/index.md
+++ b/files/zh-cn/web/api/streams_api/index.md
@@ -27,7 +27,8 @@ Stream API 允许 JavaScript 以编程方式访问从网络接收的数据流，
 
 你也可以使用 {{domxref("WritableStream")}} 将数据写入流。
 
-> **备注：** 你可以在这些文章中找到关于流理论的更多细节和实践——[Stream API 概念](/zh-CN/docs/Web/API/Streams_API/Concepts)、[使用可读流](/zh-CN/docs/Web/API/Streams_API/Using_readable_streams)、[使用可读字节流](/zh-CN/docs/Web/API/Streams_API/Using_readable_byte_streams)，以及[使用可写流](/zh-CN/docs/Web/API/Streams_API/Using_writable_streams)。
+> [!NOTE]
+> 你可以在这些文章中找到关于流理论的更多细节和实践——[Stream API 概念](/zh-CN/docs/Web/API/Streams_API/Concepts)、[使用可读流](/zh-CN/docs/Web/API/Streams_API/Using_readable_streams)、[使用可读字节流](/zh-CN/docs/Web/API/Streams_API/Using_readable_byte_streams)，以及[使用可写流](/zh-CN/docs/Web/API/Streams_API/Using_writable_streams)。
 
 ## Stream 接口
 
diff --git a/files/zh-cn/web/api/streams_api/using_readable_streams/index.md b/files/zh-cn/web/api/streams_api/using_readable_streams/index.md
index b5fea082de0e09..6a6f1d487eaa1e 100644
--- a/files/zh-cn/web/api/streams_api/using_readable_streams/index.md
+++ b/files/zh-cn/web/api/streams_api/using_readable_streams/index.md
@@ -7,9 +7,11 @@ slug: Web/API/Streams_API/Using_readable_streams
 
 作为一个 JavaScript 开发者，以编程的方式逐块地读取和操作从网络上获取的数据是非常实用的！但是你要如何使用 Stream API 的可读流功能呢？可以在这篇文章看到基本介绍。
 
-> **备注：** 本文要求你已理解可读流相关知识，并了解相关的高级概念，如果还不了解，建议你先查看[流的概念和简介](/zh-CN/docs/Web/API/Streams_API#概念和用法)以及掌握 [Stream API 概念](/zh-CN/docs/Web/API/Streams_API/Concepts)然后再阅读此文。
+> [!NOTE]
+> 本文要求你已理解可读流相关知识，并了解相关的高级概念，如果还不了解，建议你先查看[流的概念和简介](/zh-CN/docs/Web/API/Streams_API#概念和用法)以及掌握 [Stream API 概念](/zh-CN/docs/Web/API/Streams_API/Concepts)然后再阅读此文。
 
-> **备注：** 如果你正在查询关于可写流的信息，你可以尝试阅读[使用可写流](/zh-CN/docs/Web/API/Streams_API/Using_writable_streams)。
+> [!NOTE]
+> 如果你正在查询关于可写流的信息，你可以尝试阅读[使用可写流](/zh-CN/docs/Web/API/Streams_API/Using_writable_streams)。
 
 ## 寻找一些示例
 
@@ -139,7 +141,8 @@ return pump();
 3. 如果流中有更多的分块要读取，你可以处理当前的分块后，再次运行该函数。
 4. 你继续链接 `pipe` 函数，直到没有更多流要读取，在这种情况下，请遵循步骤 2。
 
-> **备注：** 该函数看起来像 `pump()` 调用自己并且导致一个潜在的深度递归。然而，因为 `pump` 是异步的并且每次调用 `pump()` 都是在 promise 处理程序的末尾，事实上，它类似于 promise 处理程序的链式结构。
+> [!NOTE]
+> 该函数看起来像 `pump()` 调用自己并且导致一个潜在的深度递归。然而，因为 `pump` 是异步的并且每次调用 `pump()` 都是在 promise 处理程序的末尾，事实上，它类似于 promise 处理程序的链式结构。
 
 ## 创建你自定义的可读流
 
@@ -227,7 +230,8 @@ readableStream
 
 但是一个自定义流仍然是 `ReadableStream` 实例，意味着你可以给它附着一个 reader。例如，看看我们的[简单随机流示例](https://github.com/mdn/dom-examples/blob/master/streams/simple-random-stream/index.html)（[也可以参见在线演示](https://mdn.github.io/dom-examples/streams/simple-random-stream/)），其创建了一个自定义的流，排入了一些随机的字符串，然后在按下 _Stop string generation_ 的按钮后，再次从流中读取数据。
 
-> **备注：** 为了使用 {{domxref("FetchEvent.respondWith()")}} 消费流，排入的流内容的类型必须是 {{jsxref("Uint8Array")}}；例如使用 {{domxref("TextEncoder")}} 进行编码。
+> [!NOTE]
+> 为了使用 {{domxref("FetchEvent.respondWith()")}} 消费流，排入的流内容的类型必须是 {{jsxref("Uint8Array")}}；例如使用 {{domxref("TextEncoder")}} 进行编码。
 
 自定义流的构造函数有一个 `start()` 方法，该方法使用 {{domxref("setInterval()")}} 去指定每秒生成一个随机的字符串。然后使用 {{domxref("ReadableStreamDefaultController.enqueue()")}} 将它排入流。当按下按钮，取消 interval，并调用名为 `readStream()` 函数再次将数据从流中读取回来。由于我们一直停止排入分块，所以我们也要关闭流。
 
diff --git a/files/zh-cn/web/api/structuredclone/index.md b/files/zh-cn/web/api/structuredclone/index.md
index 17f412cc7abc97..5b3d155b80e6e9 100644
--- a/files/zh-cn/web/api/structuredclone/index.md
+++ b/files/zh-cn/web/api/structuredclone/index.md
@@ -55,7 +55,8 @@ console.assert(clone.itself === clone); // and the circular reference is preserv
 使用可选参数 `transfer` 里的值，可以使[可转移对象](/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects)（仅）被传递，不被克隆。
 传输导致原始对象（里的属性）无法继续使用。
 
-> **备注：** 一个可能有用的场景是在保存 buffer 之前先异步的校验里面的数据。为了避免 buffer 在保存之前有其他修改，你可以先克隆这个 buffer 然后校验数据。为了防止意外的错误引用，在传输数据时，任何修改 buffer 的尝试都会失败。
+> [!NOTE]
+> 一个可能有用的场景是在保存 buffer 之前先异步的校验里面的数据。为了避免 buffer 在保存之前有其他修改，你可以先克隆这个 buffer 然后校验数据。为了防止意外的错误引用，在传输数据时，任何修改 buffer 的尝试都会失败。
 
 以下演示了如何把一个数组的属性转义到新对象。
 返回结果时，原始对象里的 `uInt8Array.buffer` 会被清除掉。
diff --git a/files/zh-cn/web/api/subtlecrypto/decrypt/index.md b/files/zh-cn/web/api/subtlecrypto/decrypt/index.md
index 640530198419e2..152effb90bb3c8 100644
--- a/files/zh-cn/web/api/subtlecrypto/decrypt/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/decrypt/index.md
@@ -48,7 +48,8 @@ decrypt(algorithm, key, data)
 
 ## 示例
 
-> **备注：** 你可以在 GitHub 上[尝试这个可用的示例](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
+> [!NOTE]
+> 你可以在 GitHub 上[尝试这个可用的示例](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
 
 ### RSA-OAEP
 
diff --git a/files/zh-cn/web/api/subtlecrypto/derivebits/index.md b/files/zh-cn/web/api/subtlecrypto/derivebits/index.md
index abcd2b22b73b48..11198eeab18834 100644
--- a/files/zh-cn/web/api/subtlecrypto/derivebits/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/derivebits/index.md
@@ -52,7 +52,8 @@ deriveBits(algorithm, baseKey, length)
 
 ## 示例
 
-> **备注：** 你可以在 GitHub 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/derive-bits/index.html)。
+> [!NOTE]
+> 你可以在 GitHub 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/derive-bits/index.html)。
 
 ### ECDH
 
diff --git a/files/zh-cn/web/api/subtlecrypto/derivekey/index.md b/files/zh-cn/web/api/subtlecrypto/derivekey/index.md
index f7366677ba265f..427ecd741d1531 100644
--- a/files/zh-cn/web/api/subtlecrypto/derivekey/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/derivekey/index.md
@@ -84,7 +84,8 @@ PBKDF2 的规范定于 [RFC 2898](https://datatracker.ietf.org/doc/html/rfc2898)
 
 ## 示例
 
-> **备注：** 你可以在 GitHub 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/derive-key/index.html)。
+> [!NOTE]
+> 你可以在 GitHub 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/derive-key/index.html)。
 
 ### ECDH
 
diff --git a/files/zh-cn/web/api/subtlecrypto/digest/index.md b/files/zh-cn/web/api/subtlecrypto/digest/index.md
index 5cdf8a9b7fdf23..a2c105275cad12 100644
--- a/files/zh-cn/web/api/subtlecrypto/digest/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/digest/index.md
@@ -85,9 +85,11 @@ digest(algorithm, data)
   </tbody>
 </table>
 
-> **警告：** 现在，SHA-1 被认为是易受攻击的，不应将其用于加密应用程序。
+> [!WARNING]
+> 现在，SHA-1 被认为是易受攻击的，不应将其用于加密应用程序。
 
-> **备注：** 如果你在寻找如何创建密钥散列消息认证码（[HMAC](/zh-CN/docs/Glossary/HMAC)），则需要改用 [SubtleCrypto.sign()](/zh-CN/docs/Web/API/SubtleCrypto/sign#hmac) 方法。
+> [!NOTE]
+> 如果你在寻找如何创建密钥散列消息认证码（[HMAC](/zh-CN/docs/Glossary/HMAC)），则需要改用 [SubtleCrypto.sign()](/zh-CN/docs/Web/API/SubtleCrypto/sign#hmac) 方法。
 
 ## 示例
 
@@ -140,7 +142,8 @@ digestMessage(text).then((digestHex) => console.log(digestHex));
 
 {{Compat}}
 
-> **备注：** Chrome 60 添加了对非 TLS 连接禁用 crypto.subtle 的特性。
+> [!NOTE]
+> Chrome 60 添加了对非 TLS 连接禁用 crypto.subtle 的特性。
 
 ## 参见
 
diff --git a/files/zh-cn/web/api/subtlecrypto/encrypt/index.md b/files/zh-cn/web/api/subtlecrypto/encrypt/index.md
index 02da880f2d3d7d..3a388bdf5ea613 100644
--- a/files/zh-cn/web/api/subtlecrypto/encrypt/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/encrypt/index.md
@@ -80,7 +80,8 @@ AES 是一种分组加密算法，这意味着它将消息分成多个模块，
 
 本质上：nonce 应该确保计数器模块不会在不同的消息间重复使用，而计数器应能确保计数器模块不会在单条消息中重复使用。
 
-> **备注：** 参见 [NIST SP800-38A 标准的附录 B](https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D) 以了解详情。
+> [!NOTE]
+> 参见 [NIST SP800-38A 标准的附录 B](https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D) 以了解详情。
 
 ### AES-CBC
 
@@ -94,7 +95,8 @@ AES 是一种分组加密算法，这意味着它将消息分成多个模块，
 
 ## 示例
 
-> **备注：** 你可以在 GitHub 上[尝试这个可用的示例](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
+> [!NOTE]
+> 你可以在 GitHub 上[尝试这个可用的示例](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
 
 ### RSA-OAEP
 
diff --git a/files/zh-cn/web/api/subtlecrypto/exportkey/index.md b/files/zh-cn/web/api/subtlecrypto/exportkey/index.md
index a4efab47d50ed2..a44b91aa28c142 100644
--- a/files/zh-cn/web/api/subtlecrypto/exportkey/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/exportkey/index.md
@@ -53,7 +53,8 @@ exportKey(format, key)
 
 ## 示例
 
-> **备注：** 你可以在 GitHub 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/export-key/index.html)。
+> [!NOTE]
+> 你可以在 GitHub 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/export-key/index.html)。
 
 ### 导出为 Raw 格式
 
diff --git a/files/zh-cn/web/api/subtlecrypto/generatekey/index.md b/files/zh-cn/web/api/subtlecrypto/generatekey/index.md
index 1dee2d3dd50c33..83d377144e1dbf 100644
--- a/files/zh-cn/web/api/subtlecrypto/generatekey/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/generatekey/index.md
@@ -53,7 +53,8 @@ generateKey(algorithm, extractable, keyUsages)
 
 ## 示例
 
-> **备注：** 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
+> [!NOTE]
+> 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
 
 ### 生成 RSA 密钥对
 
diff --git a/files/zh-cn/web/api/subtlecrypto/importkey/index.md b/files/zh-cn/web/api/subtlecrypto/importkey/index.md
index 5ff5efda130b9c..40be1b4cb8354e 100644
--- a/files/zh-cn/web/api/subtlecrypto/importkey/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/importkey/index.md
@@ -160,7 +160,8 @@ JSON Web Key 看起来像这样（这是一个椭圆曲线算法的私钥）：
 
 ## 示例
 
-> **备注：** 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/import-key/index.html)。
+> [!NOTE]
+> 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/import-key/index.html)。
 
 ### 导入 Raw 格式的密钥
 
diff --git a/files/zh-cn/web/api/subtlecrypto/index.md b/files/zh-cn/web/api/subtlecrypto/index.md
index 5a1d8c6f74c231..2cdfc8895a9159 100644
--- a/files/zh-cn/web/api/subtlecrypto/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/index.md
@@ -7,7 +7,8 @@ slug: Web/API/SubtleCrypto
 
 [Web Crypto API](/zh-CN/docs/Web/API/Web_Crypto_API) 的 **`SubtleCrypto`** 接口提供了许多底层加密函数。你可以通过 {{domxref("crypto_property", "crypto")}} 属性提供的 {{domxref("Crypto")}} 对象中的 {{domxref("Crypto.subtle", "subtle")}} 属性来访问 `SubtleCrypto` 的相关特性。
 
-> **警告：** 此 API 提供了许多底层密码学原语。滥用它们很容易陷入微妙的陷阱中。
+> [!WARNING]
+> 此 API 提供了许多底层密码学原语。滥用它们很容易陷入微妙的陷阱中。
 >
 > 即使你正确地运用了基础加密方法，也很难设计一套正确的安全密钥管理及整体安全设计方案，这些往往是安全专家所做的事情。
 >
diff --git a/files/zh-cn/web/api/subtlecrypto/sign/index.md b/files/zh-cn/web/api/subtlecrypto/sign/index.md
index af4e167dbcda42..ab0c03b41e6de0 100644
--- a/files/zh-cn/web/api/subtlecrypto/sign/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/sign/index.md
@@ -77,7 +77,8 @@ HMAC 算法根据 [FIPS 198-1 标准](https://csrc.nist.gov/csrc/media/publicati
 
 ## 示例
 
-> **备注：** 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)。
+> [!NOTE]
+> 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)。
 
 ### RSASSA-PKCS1-v1_5
 
diff --git a/files/zh-cn/web/api/subtlecrypto/unwrapkey/index.md b/files/zh-cn/web/api/subtlecrypto/unwrapkey/index.md
index 391543e766cf51..601a8e8d74f603 100644
--- a/files/zh-cn/web/api/subtlecrypto/unwrapkey/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/unwrapkey/index.md
@@ -80,7 +80,8 @@ unwrapKey(format, wrappedKey, unwrappingKey, unwrapAlgo, unwrappedKeyAlgo, extra
 
 ## 示例
 
-> **备注：** 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/unwrap-key/index.html)。
+> [!NOTE]
+> 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/unwrap-key/index.html)。
 
 ### 解包装“raw”格式的密钥
 
diff --git a/files/zh-cn/web/api/subtlecrypto/verify/index.md b/files/zh-cn/web/api/subtlecrypto/verify/index.md
index b401a3c5009b50..9dd80fd8c91337 100644
--- a/files/zh-cn/web/api/subtlecrypto/verify/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/verify/index.md
@@ -48,7 +48,8 @@ method.
 
 ## 示例
 
-> **备注：** 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)。
+> [!NOTE]
+> 你可以在 Github 上[尝试可用的示例](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)。
 
 ### RSASSA-PKCS1-v1_5
 
diff --git a/files/zh-cn/web/api/subtlecrypto/wrapkey/index.md b/files/zh-cn/web/api/subtlecrypto/wrapkey/index.md
index 638f3bd29f1a3f..1b97ec7294f0b1 100644
--- a/files/zh-cn/web/api/subtlecrypto/wrapkey/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/wrapkey/index.md
@@ -72,7 +72,8 @@ AES-KW 规定于 [RFC 3394](https://datatracker.ietf.org/doc/html/rfc3394) 中
 
 ## 示例
 
-> **备注：** 你可以在 GitHub 上[尝试这个可用的示例](https://mdn.github.io/dom-examples/web-crypto/wrap-key/index.html)。
+> [!NOTE]
+> 你可以在 GitHub 上[尝试这个可用的示例](https://mdn.github.io/dom-examples/web-crypto/wrap-key/index.html)。
 
 ### Raw 包装
 
diff --git a/files/zh-cn/web/api/svggeometryelement/gettotallength/index.md b/files/zh-cn/web/api/svggeometryelement/gettotallength/index.md
index 656e1a26ceac8d..9fd37fcf1e6296 100644
--- a/files/zh-cn/web/api/svggeometryelement/gettotallength/index.md
+++ b/files/zh-cn/web/api/svggeometryelement/gettotallength/index.md
@@ -7,7 +7,8 @@ slug: Web/API/SVGGeometryElement/getTotalLength
 
 **`SVGPathElement.getTotalLength()`** 该方法返回用户代理对路径总长度（以用户单位为单位）的计算值。
 
-> **备注：** 在 SVG 2 中，该方法被移动到 {{DOMxRef("SVGGeometryElement")}} 接口，由 {{DOMxRef("SVGPathElement")}} 继承。
+> [!NOTE]
+> 在 SVG 2 中，该方法被移动到 {{DOMxRef("SVGGeometryElement")}} 接口，由 {{DOMxRef("SVGPathElement")}} 继承。
 
 ## 语法
 
diff --git a/files/zh-cn/web/api/svggraphicselement/index.md b/files/zh-cn/web/api/svggraphicselement/index.md
index 9bb84ca7768758..fd4fa9dd532a92 100644
--- a/files/zh-cn/web/api/svggraphicselement/index.md
+++ b/files/zh-cn/web/api/svggraphicselement/index.md
@@ -9,7 +9,8 @@ slug: Web/API/SVGGraphicsElement
 
 {{InheritanceDiagram(600, 120)}}
 
-> **备注：** 该接口是 SVG 2 中引入的，它取代了 SVG 1.1 中的{{domxref("SVGLocatable")}}和{{domxref("SVGTransformable")}}接口。
+> [!NOTE]
+> 该接口是 SVG 2 中引入的，它取代了 SVG 1.1 中的{{domxref("SVGLocatable")}}和{{domxref("SVGTransformable")}}接口。
 
 ## 属性
 
diff --git a/files/zh-cn/web/api/text/wholetext/index.md b/files/zh-cn/web/api/text/wholetext/index.md
index 27bf4f9cbadbc8..1e77f2391d329a 100644
--- a/files/zh-cn/web/api/text/wholetext/index.md
+++ b/files/zh-cn/web/api/text/wholetext/index.md
@@ -9,7 +9,8 @@ l10n:
 
 {{domxref("Text")}} 接口的 **`wholeText`** 只读属性返回与该节点逻辑上相邻的所有 {{domxref("Text")}} 节点的完整文本。文本按文档顺序进行拼接。这样就允许指定任意文本节点并将所有相邻文本作为一个字符串获取。
 
-> **备注：** 这类似于调用 {{domxref("Node.normalize()")}} 之后读取文本值，但不会修改树。
+> [!NOTE]
+> 这类似于调用 {{domxref("Node.normalize()")}} 之后读取文本值，但不会修改树。
 
 ## 值
 
diff --git a/files/zh-cn/web/api/touch/index.md b/files/zh-cn/web/api/touch/index.md
index 41d40644e40f20..1175469e08fa5f 100644
--- a/files/zh-cn/web/api/touch/index.md
+++ b/files/zh-cn/web/api/touch/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Touch
 
 对象属性 {{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, 和 {{ domxref("Touch.rotationAngle") }} 表示用户触摸操作所作用的区域，即*触摸区域*。这些属性对于处理类似于手指触摸之类的不精确操作很有帮助。这些属性可以表示出一个尽可能匹配触控区域的椭圆形（例如用户的指尖触控）。 {{experimental_inline}}
 
-> **备注：** 以下很多属性的值需要依赖硬件设备去获取，例如，如果设备本身不支持侦测压感，那么 `force` 属性的值将始终是 0，对于 `radiusX` 和 `radiusY` 来说同样可能有这种情况，如果设备认为触点只是一个点而不是一个面，它们始终为 1。
+> [!NOTE]
+> 以下很多属性的值需要依赖硬件设备去获取，例如，如果设备本身不支持侦测压感，那么 `force` 属性的值将始终是 0，对于 `radiusX` 和 `radiusY` 来说同样可能有这种情况，如果设备认为触点只是一个点而不是一个面，它们始终为 1。
 
 ## 构造函数
 
diff --git a/files/zh-cn/web/api/touch_events/index.md b/files/zh-cn/web/api/touch_events/index.md
index bbf90c6fbf72da..c651973a2acb28 100644
--- a/files/zh-cn/web/api/touch_events/index.md
+++ b/files/zh-cn/web/api/touch_events/index.md
@@ -31,7 +31,8 @@ slug: Web/API/Touch_events
 
 本示例通过对多个触控点进行同步跟踪，让用户通过多点触控的方式在 {{ HTMLElement("canvas") }} 元素上用两个（或以上）手指同时画图。本示例只在支持触摸事件的浏览器下生效。
 
-> **备注：** 下文中用“手指”表示与平面的交互，当然触控笔等也是可行的。
+> [!NOTE]
+> 下文中用“手指”表示与平面的交互，当然触控笔等也是可行的。
 
 ### 创建画布
 
@@ -220,7 +221,8 @@ function colorForTouch(touch) {
 
 这个函数返回一个表示颜色的字符串，可以在调用 {{ HTMLElement("canvas") }} 的函数时使用。比如，若 {{ domxref("Touch.identifier") }} 的值为 10，则返回的字符串为 "#aaa"。
 
-> **警告：** 这里的 `colorForTouch()` 不是一个好主意。`Touch.identifier` 是一个实验性属性，存在兼容性问题，不同浏览器之间实现方法不同，因此会得到不同的结果。
+> [!WARNING]
+> 这里的 `colorForTouch()` 不是一个好主意。`Touch.identifier` 是一个实验性属性，存在兼容性问题，不同浏览器之间实现方法不同，因此会得到不同的结果。
 
 #### 拷贝触摸对象
 
diff --git a/files/zh-cn/web/api/touchevent/index.md b/files/zh-cn/web/api/touchevent/index.md
index 5e878dd2410e32..47ef89d649daa0 100644
--- a/files/zh-cn/web/api/touchevent/index.md
+++ b/files/zh-cn/web/api/touchevent/index.md
@@ -37,7 +37,8 @@ _{{ domxref("TouchEvent") }}的属性继承了 {{domxref("UIEvent")}} 和 {{domx
 
 为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 {{ domxref("event.type", "TouchEvent.type") }} 属性来确定当前事件属于哪种类型
 
-> **备注：** 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 {{ domxref("event.preventDefault()") }} 来阻止鼠标事件被触发。
+> [!NOTE]
+> 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 {{ domxref("event.preventDefault()") }} 来阻止鼠标事件被触发。
 
 ### {{domxref("Element/touchstart_event", "touchstart")}}
 
@@ -57,7 +58,8 @@ _{{ domxref("TouchEvent") }}的属性继承了 {{domxref("UIEvent")}} 和 {{domx
 
 当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。
 
-> **备注：** 不同浏览器上 `touchmove` 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。
+> [!NOTE]
+> 不同浏览器上 `touchmove` 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。
 
 ### {{domxref("Element/touchcancel_event", "touchcancel")}}
 
diff --git a/files/zh-cn/web/api/transformstream/transformstream/index.md b/files/zh-cn/web/api/transformstream/transformstream/index.md
index 31b296ac4bc902..0c552b795d3e61 100644
--- a/files/zh-cn/web/api/transformstream/transformstream/index.md
+++ b/files/zh-cn/web/api/transformstream/transformstream/index.md
@@ -49,7 +49,8 @@ new TransformStream(transformer, writableStrategy, readableStrategy)
     - `size(chunk)`
       - : 一个包含参数 `chunk` 的方法。它表示用于每一个块的大小，以字节为单位。
 
-> **备注：** 你可以自定义 `readableStrategy` 或 `writableStrategy`，或者使用 {{domxref("ByteLengthQueuingStrategy")}} 或 {{domxref("CountQueuingStrategy")}} 的实例作为对象的值。
+> [!NOTE]
+> 你可以自定义 `readableStrategy` 或 `writableStrategy`，或者使用 {{domxref("ByteLengthQueuingStrategy")}} 或 {{domxref("CountQueuingStrategy")}} 的实例作为对象的值。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/treewalker/index.md b/files/zh-cn/web/api/treewalker/index.md
index 353e804245ff7b..23069a8cbf778f 100644
--- a/files/zh-cn/web/api/treewalker/index.md
+++ b/files/zh-cn/web/api/treewalker/index.md
@@ -44,7 +44,8 @@ _这个接口不继承任何属性。_
 
 _这个接口不继承任何方法。_
 
-> **备注：** 对于 `TreeWalker`，一个节点是否*可见*只取决于 `whatToShow` 和 `filter` 两个参数。（和元素是否在屏幕上可见无关。）
+> [!NOTE]
+> 对于 `TreeWalker`，一个节点是否*可见*只取决于 `whatToShow` 和 `filter` 两个参数。（和元素是否在屏幕上可见无关。）
 
 - {{domxref("TreeWalker.parentNode()")}}
   - : 移动当前 {{domxref("Node")}} 到文档顺序中的第一个“可见”的祖先节点，并返回该节点。如果没有这样的节点，则会返回 null，同时也不会发生移动。
diff --git a/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md b/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md
index f8b5629aa6cfe2..22b9d6d7c208b8 100644
--- a/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md
+++ b/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md
@@ -3080,7 +3080,8 @@ The values below are derived in part form a number of consumer electronics techn
 - [ANSI/CEA-2014-B](https://shop.cta.tech/products/web-based-protocol-and-framework-for-remote-user-interface-on-upnp-networks-and-the-internet): Web-based Protocol and Framework for Remote User Interface on UPnP™ Networks and the Internet
 - [Android KeyEvent key code values](http://developer.android.com/reference/android/view/KeyEvent.html)
 
-> **备注：** Remote controls typically include keys whose values are already defined elsewhere, such as under [Multimedia keys](#multimedia_keys) or [Audio control keys](#audio_control_keys). Those keys' values will match what's documented in those tables.
+> [!NOTE]
+> Remote controls typically include keys whose values are already defined elsewhere, such as under [Multimedia keys](#multimedia_keys) or [Audio control keys](#audio_control_keys). Those keys' values will match what's documented in those tables.
 
 <table class="no-markdown">
   <thead>
@@ -4574,7 +4575,8 @@ Some keyboards include special keys for controlling Web browsers. Those keys fol
 
 These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from <kbd>0</kbd> to <kbd>9</kbd> (encoded as `"0"` through `"9"`), some multimedia keyboards include additional number keys for higher numbers.
 
-> **备注：** The <kbd>10</kbd> key, if present, generates events with the `key` value of `"0"`.
+> [!NOTE]
+> The <kbd>10</kbd> key, if present, generates events with the `key` value of `"0"`.
 
 <table class="no-markdown">
   <thead>
diff --git a/files/zh-cn/web/api/virtualkeyboard_api/index.md b/files/zh-cn/web/api/virtualkeyboard_api/index.md
new file mode 100644
index 00000000000000..3e5ea663feac6c
--- /dev/null
+++ b/files/zh-cn/web/api/virtualkeyboard_api/index.md
@@ -0,0 +1,129 @@
+---
+title: 虚拟键盘 API
+slug: Web/API/VirtualKeyboard_API
+l10n:
+  sourceCommit: 96e73ab4d1fdb714a6a6516821b3206d83909046
+---
+
+{{SeeCompatTable}}{{DefaultAPISidebar("VirtualKeyboard API")}}{{securecontext_header}}
+
+虚拟键盘（VirtualKeyboard）API 允许开发者在如平板电脑、手机等没有物理键盘的设备上，当屏幕虚拟键盘出现/消失时控制其应用程序布局。
+
+Web 浏览器通常会通过自动调整视口高度并在聚焦时滚动到输入字段，来处理虚拟键盘。
+
+下图展示了设备屏幕虚拟键盘隐藏和显示时，网页的视口高度和滚动位置的差异。
+
+![两台设备，一台没有虚拟键盘，显示网页可以利用设备大部分的垂直空间；一台有虚拟键盘，显示网页只能在剩余的空间内显示。](viewport-height.png)
+
+更复杂的应用程序或特定设备（如多屏手机）可能需要在虚拟键盘出现时更精确地控制布局。
+
+下图展示了双屏设备上虚拟键盘只出现在其中一个屏幕上的情况。视口在两个屏幕上都变小以适应虚拟键盘，这导致未显示虚拟键盘的屏幕上出现了被浪费掉的空间。
+
+![双屏设备，其中虚拟键盘显示在其中一个屏幕上，显示网页只能利用虚拟键盘显示后剩余的垂直空间，即使这样会在另一个屏幕上留下空白空间。](dual-screen.png)
+
+虚拟键盘 API 可以让开发者选择不使用浏览器自动处理虚拟键盘的方式，而是完全控制虚拟键盘的行为。使用虚拟键盘 API，在表单控件聚焦时，虚拟键盘会根据需要显示和隐藏，但视口不会改变，开发者可以利用 JavaScript 和 CSS 来自定义布局。
+
+## 概念
+
+虚拟键盘 API 包括三个部分：
+
+- {{domxref("VirtualKeyboard")}} 接口，通过 {{domxref('navigator.virtualKeyboard')}} 访问，用于选择是否使用浏览器的自动虚拟键盘行为，以及通过编程方式显示或隐藏虚拟键盘，还可以获取当前虚拟键盘的位置和大小。
+- `keyboard-inset-*` CSS 环境变量提供有关虚拟键盘位置和大小的信息。
+- [`virtualkeyboardpolicy`](/zh-CN/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) 属性指定虚拟键盘是否应出现在 `contenteditable` 元素上。
+
+### 选择不使用自动虚拟键盘行为
+
+要不使用浏览器的自动虚拟键盘行为，请使用 `navigator.virtualKeyboard.overlaysContent = true`。浏览器将不再自动调整视口大小以为虚拟键盘腾出空间，而是将虚拟键盘覆盖在你的内容之上。
+
+### 使用 JavaScript 检测虚拟键盘的几何信息
+
+一旦选择不使用默认的浏览器行为，你可以使用 `navigator.virtualKeyboard.boundingRect` 获取当前虚拟键盘的几何信息，并使用 CSS 和 JavaScript 根据需要调整布局。此外，你可以通过监听 `geometrychange` 事件来检测几何变化，例如虚拟键盘显示或隐藏时的变化。
+
+这对于将重要的 UI 元素定位在虚拟键盘不覆盖的区域非常有用。
+
+下面的代码片段使用 `geometrychange` 事件来检测虚拟键盘几何变化；它访问 `boundingRect` 属性来查询虚拟键盘的大小和位置：
+
+```js
+if ("virtualKeyboard" in navigator) {
+  navigator.virtualKeyboard.overlaysContent = true;
+
+  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
+    const { x, y, width, height } = event.target.boundingRect;
+  });
+}
+```
+
+### 使用 CSS 环境变量检测虚拟键盘的几何信息
+
+虚拟键盘 API 还公开了以下 [CSS 环境变量](/zh-CN/docs/Web/CSS/env)：`keyboard-inset-top`、`keyboard-inset-right`、`keyboard-inset-bottom`、`keyboard-inset-left`、`keyboard-inset-width` 和 `keyboard-inset-height`。
+
+`keyboard-inset-*` CSS 环境变量对于使用 CSS 根据虚拟键盘的出现调整布局非常有用。它们通过距离视口边缘的顶部、右侧、底部和左侧插入定义一个矩形。如果需要，还可以使用 `width` 和 `height` 变量。
+
+下面的代码片段使用 `keyboard-inset-height` CSS 变量，在类似聊天应用程序中的消息列表和输入字段下方预留虚拟键盘出现的空间。当虚拟键盘隐藏时，`env()` 函数返回 `0px`，`keyboard` 网格区域被隐藏。消息和输入元素可以占据视窗的全部高度。当虚拟键盘出现时，`keyboard` 网格区域将获得虚拟键盘的高度。
+
+```html
+<style>
+  body {
+    display: grid;
+    margin: 0;
+    height: 100vh;
+    grid-template:
+      "messages" 1fr
+      "input" auto
+      "keyboard" env(keyboard-inset-height, 0px);
+  }
+</style>
+<ul id="messages"></ul>
+<input type="text" />
+<script>
+  if ("virtualKeyboard" in navigator) {
+    navigator.virtualKeyboard.overlaysContent = true;
+  }
+</script>
+```
+
+### 控制 `contenteditable` 元素上的虚拟键盘
+
+默认情况下，使用 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes/contenteditable) 属性的元素在被轻触或点击时会触发虚拟键盘。在某些情况下，可能希望阻止这种行为，并在其他事件后手动显示虚拟键盘。
+
+将 [`virtualkeyboardpolicy`](/zh-CN/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) 属性设置为 `manual` 可以阻止浏览器默认处理虚拟键盘的行为，而是通过使用 {{domxref("VirtualKeyboard")}} 接口的 `show()` 和 `hide()` 方法自行处理。
+
+下面的代码片段展示了如何使用 `virtualkeyboardpolicy` 属性和 `navigator.virtualKeyboard.show()` 方法来在双击事件后显示虚拟键盘：
+
+```html
+<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
+<script>
+  if ("virtualKeyboard" in navigator) {
+    navigator.virtualKeyboard.overlaysContent = true;
+
+    const editor = document.getElementById("editor");
+    editor.addEventListener("dblclick", () => {
+      navigator.virtualKeyboard.show();
+    });
+  }
+</script>
+```
+
+## 接口
+
+- {{domxref('VirtualKeyboard')}} {{experimental_inline}}
+  - : 提供用于检索键盘布局映射和切换对物理键盘的按键捕获的函数。
+
+## 对其他接口的扩展
+
+- {{domxref("Navigator.virtualKeyboard")}} {{ReadOnlyInline}} {{experimental_inline}}
+  - : 返回对 {{DOMxRef("VirtualKeyboard")}} API（用于控制屏幕虚拟键盘）的引用。
+- {{domxref("HTMLElement.virtualkeyboardpolicy")}} {{experimental_inline}}
+  - : 一个字符串，指示在元素聚焦时是否使用浏览器的默认策略显示虚拟键盘，或者手动处理虚拟键盘的显示。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用虚拟键盘 API 实现完全控制](https://developer.chrome.com/docs/web-platform/virtual-keyboard/)
diff --git a/files/zh-cn/web/api/webrtc_api/connectivity/index.md b/files/zh-cn/web/api/webrtc_api/connectivity/index.md
index ea82033a3fd0f0..0d6f92bf231079 100644
--- a/files/zh-cn/web/api/webrtc_api/connectivity/index.md
+++ b/files/zh-cn/web/api/webrtc_api/connectivity/index.md
@@ -63,6 +63,8 @@ WebRTC 连接上的端点配置称为**会话描述**。该描述包括关于要
 
 > **备注：** 一般来说，使用 TCP 的 ICE 候选者只有当 UDP 不可用或被限制使其不适用于媒体流时才会被使用。不是所有的浏览器都支持 ICE over TCP。
 
-## The entire exchange in a complicated diagram
+## 整个交换的复杂图表
 
-[![A complete architectural diagram showing the whole WebRTC process.](webrtc-complete-diagram.png)](https://hacks.mozilla.org/wp-content/uploads/2013/07/webrtc-complete-diagram.png)
+![展示 WebRTC 完整流程的架构图。](webrtc-complete-diagram.png)
+
+[原始来源](https://hacks.mozilla.org/2013/07/webrtc-and-the-ocean-of-acronyms/)
diff --git a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md
index 886b84a9007f0b..7fceb3efb1d293 100644
--- a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md
+++ b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md
@@ -133,7 +133,7 @@ if (sendToClients) {
 
 假设 Naomi 和 Priya 正在使用聊天软件进行讨论，Naomi 决定在两人之间打开一个视频通话。以下是预期的事件顺序：
 
-[![Diagram of the signaling process](webrtc_-_signaling_diagram.svg)](webrtc_-_signaling_diagram.svg)
+![信令流程图](webrtc_-_signaling_diagram.svg)
 
 在本文的整个过程中，我们将看到更详细的信息。
 
@@ -141,7 +141,7 @@ if (sendToClients) {
 
 当每端的 ICE 层开始发送候选时，它会在链中的各个点之间进行交换，如下所示：
 
-[![Diagram of ICE candidate exchange process](webrtc_-_ice_candidate_exchange.svg)](webrtc_-_ice_candidate_exchange.svg)
+![ICE 候选交换流程图](webrtc_-_ice_candidate_exchange.svg)
 
 每一端从本地的 ICE 层接收候选时，都会将其发送给另一方；不存在轮流或成批的候选。一旦两端就一个候选达成一致，双方就都可以用此候选来交换媒体数据，媒体数据就开始流动。即使在媒体数据已经开始流动之后，每一端都会继续向候选发送消息，直到他们没有选择的余地。这样做是为了找到比最初选择的更好的选择。
 
diff --git a/files/zh-cn/web/api/window/prompt/index.md b/files/zh-cn/web/api/window/prompt/index.md
index 66b437c31c2573..e7020e865fcd1b 100644
--- a/files/zh-cn/web/api/window/prompt/index.md
+++ b/files/zh-cn/web/api/window/prompt/index.md
@@ -48,7 +48,7 @@ sign = window.prompt("你觉得很幸运吗？", "是的"); // 打开显示提
 
 以上提示框显示如下（在 macOS 的 Chrome 浏览器上）：
 
-[![macOS 上 Chrome 中的 prompt() 对话框](prompt.png)](prompt.png)
+![macOS 上 Chrome 中的 prompt() 对话框](prompt.png)
 
 ## 注意事项
 
diff --git a/files/zh-cn/web/css/--_star_/index.md b/files/zh-cn/web/css/--_star_/index.md
index 3849e7fefbf981..cd641683255cc5 100644
--- a/files/zh-cn/web/css/--_star_/index.md
+++ b/files/zh-cn/web/css/--_star_/index.md
@@ -22,7 +22,8 @@ CSS 自定义属性是可以级联的：每一个自定义属性可以多次出
 - `<declaration-value>`
   - : 这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。
 
-> **备注：** 自定义属性名区分大小写——`--my-color` 会被视为与 `--My-color` 不同的自定义属性。
+> [!NOTE]
+> 自定义属性名区分大小写——`--my-color` 会被视为与 `--My-color` 不同的自定义属性。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/-webkit-line-clamp/index.md b/files/zh-cn/web/css/-webkit-line-clamp/index.md
index c12c2db871e1d9..49f80a1a512ec1 100644
--- a/files/zh-cn/web/css/-webkit-line-clamp/index.md
+++ b/files/zh-cn/web/css/-webkit-line-clamp/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/-webkit-line-clamp
 
 当应用于锚（anchor）元素时，截断可以发生在文本中间，而不必在末尾。
 
-> **备注：** 该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 [CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp) 中被标准化。[CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef-line-clamp) 规范还定义了一个 {{cssxref("line-clamp")}} 属性，用来代替此属性并避免一些问题。
+> [!NOTE]
+> 该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 [CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp) 中被标准化。[CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef-line-clamp) 规范还定义了一个 {{cssxref("line-clamp")}} 属性，用来代替此属性并避免一些问题。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/@document/index.md b/files/zh-cn/web/css/@document/index.md
index 8fd1aa889d52c4..479d65cecb17de 100644
--- a/files/zh-cn/web/css/@document/index.md
+++ b/files/zh-cn/web/css/@document/index.md
@@ -39,7 +39,8 @@ l10n:
 
 `@document` 目前只在 Firefox 火狐浏览器中支持。如果你想在非 Firefox 火狐浏览器中使用此功能，你可以尝试使用由 @An-Error94 提供的 [polyfill](https://github.com/An-Error94/Handy-Scripts/tree/master/%40document-polyfill)，它使用了用户脚本、[data-\* 属性](/zh-CN/docs/Web/HTML/Global_attributes/data-*)和[属性选择器](/zh-CN/docs/Web/CSS/Attribute_selectors)的组合。
 
-> **备注：** 这个属性还有一个带有 `-moz-` 的前缀版本——`@-moz-document`。在 Firefox 火狐浏览器 59 的 Nightly 和 Beta 版本中，此版本已被限制仅在用户和 UA 样式表中使用——这是一个旨在减轻潜在的 CSS 注入攻击的实验性特性。（请参阅 [Firefox bug 1035091](https://bugzil.la/1035091)）。
+> [!NOTE]
+> 这个属性还有一个带有 `-moz-` 的前缀版本——`@-moz-document`。在 Firefox 火狐浏览器 59 的 Nightly 和 Beta 版本中，此版本已被限制仅在用户和 UA 样式表中使用——这是一个旨在减轻潜在的 CSS 注入攻击的实验性特性。（请参阅 [Firefox bug 1035091](https://bugzil.la/1035091)）。
 
 ## 形式语法
 
diff --git a/files/zh-cn/web/css/@font-face/index.md b/files/zh-cn/web/css/@font-face/index.md
index 8f9f3e60b35f28..21248bbe683e67 100644
--- a/files/zh-cn/web/css/@font-face/index.md
+++ b/files/zh-cn/web/css/@font-face/index.md
@@ -77,7 +77,8 @@ slug: Web/CSS/@font-face
 }
 ```
 
-> **备注：** 接下来的例子在英文原文中已被删除。
+> [!NOTE]
+> 接下来的例子在英文原文中已被删除。
 
 这个例子新定义了一个字体，正常粗细的字采用字体 Times New Roman，粗体字采用 Consolas。
 
diff --git a/files/zh-cn/web/css/@font-face/src/index.md b/files/zh-cn/web/css/@font-face/src/index.md
index ea7d472108390d..219984acdbc46b 100644
--- a/files/zh-cn/web/css/@font-face/src/index.md
+++ b/files/zh-cn/web/css/@font-face/src/index.md
@@ -57,9 +57,11 @@ src:
 
   - : 如果用户设备上有字体，则指定字体名称。字体名称可以不加引号。
 
-    > **备注：** 对于 OpenType 和 TrueType 字体，`<font-face-name>` 用于匹配 Postscript 名称或本地可用字体名称表中的完整字体名称。使用哪种类型的名称因平台和字体而异，因此应同时包含这两种名称，以确保跨平台的正确匹配。不得使用指定字体名称的平台替换。
+    > [!NOTE]
+    > 对于 OpenType 和 TrueType 字体，`<font-face-name>` 用于匹配 Postscript 名称或本地可用字体名称表中的完整字体名称。使用哪种类型的名称因平台和字体而异，因此应同时包含这两种名称，以确保跨平台的正确匹配。不得使用指定字体名称的平台替换。
 
-    > **备注：** 本地可用字体可能已经预装在用户的设备上，也可能是用户主动安装的。
+    > [!NOTE]
+    > 本地可用字体可能已经预装在用户的设备上，也可能是用户主动安装的。
     >
     > 对于特定设备的所有用户来说，预装字体集可能是相同的，但用户安装的字体集却不尽相同。因此，通过发现用户安装的字体集，网站可以为设备建立{{glossary("fingerprinting", "指纹")}}，帮助网站在整个网络中跟踪用户。
     >
@@ -76,7 +78,8 @@ src:
 
 如果设置了多个 `src` 描述符，则只应用最后声明的能够加载资源的规则。如果最后一个 `src` 描述符可以加载资源，但不包括 `local()` 字体，即使设备上有可用的字体，浏览器也可能会下载外部字体文件，而忽略本地版本。
 
-> **备注：** 浏览器认为无效的描述符中的值将被忽略。某些浏览器会在任何一项无效时忽略整个描述符，即使只有一项无效。这可能会影响回退的设计。更多信息，请参见[浏览器兼容性](#浏览器兼容性)。
+> [!NOTE]
+> 浏览器认为无效的描述符中的值将被忽略。某些浏览器会在任何一项无效时忽略整个描述符，即使只有一项无效。这可能会影响回退的设计。更多信息，请参见[浏览器兼容性](#浏览器兼容性)。
 
 与 CSS 中的其他 URL 一样，URL 也可以是相对的，在这种情况下，URL 会相对于包含 `@font-face` 规则的样式表的位置进行解析。对于 SVG 字体，URL 指向的是包含 SVG 字体定义的文档中的一个元素。如果省略了元素引用，则隐含了对第一个定义字体的引用。同样，可包含多种字体的字体容器格式只加载给定 `@font-face` 规则中的一种字体。片段标识符用于指示加载哪种字体。如果容器格式缺乏已定义的片段标识符方案，则使用简单的从 1 开始的索引方案（例如，“font-collection#1”表示第一种字体，“font-collection#2”表示第二种字体，等等）。
 
diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md
index 4d87dfda3b18b9..798d97bcf8b2bd 100644
--- a/files/zh-cn/web/css/@layer/index.md
+++ b/files/zh-cn/web/css/@layer/index.md
@@ -51,7 +51,8 @@ slug: Web/CSS/@layer
 
 即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建 CSS 选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。
 
-> **备注：** 在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加 CSS 规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。
+> [!NOTE]
+> 在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加 CSS 规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。
 
 其他不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的后部，这意味着任何在层外声明的样式都会覆盖在层内声明的样式。
 
diff --git a/files/zh-cn/web/css/@media/any-pointer/index.md b/files/zh-cn/web/css/@media/any-pointer/index.md
index da61b980be419b..890e7f36ad5030 100644
--- a/files/zh-cn/web/css/@media/any-pointer/index.md
+++ b/files/zh-cn/web/css/@media/any-pointer/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/any-pointer
 
 **`any-pointer`** [CSS](/zh-CN/docs/CSS) [媒体特性](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries#Media_features) 测试用户是否拥有*任意*定点装置（如鼠标）。以及如果存在定点装置，它的精确度是什么样的。
 
-> **备注：** 如果你想测试*主*定点设备的精确度，使用 [`pointer`](/zh-CN/docs/Web/CSS/@media/pointer) 。
+> [!NOTE]
+> 如果你想测试*主*定点设备的精确度，使用 [`pointer`](/zh-CN/docs/Web/CSS/@media/pointer) 。
 
 ## 语法
 
@@ -20,7 +21,8 @@ slug: Web/CSS/@media/any-pointer
 - `fine`
   - : 至少有一个输入途径包含一个精确的定点装置。
 
-> **备注：** 当输入设备拥有不同特性时，可能有多于一个的值被匹配。`none` 仅当它们都不是定点设备时被匹配。
+> [!NOTE]
+> 当输入设备拥有不同特性时，可能有多于一个的值被匹配。`none` 仅当它们都不是定点设备时被匹配。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/@media/index.md b/files/zh-cn/web/css/@media/index.md
index e15843965ba17b..f0482b0dbae8fa 100644
--- a/files/zh-cn/web/css/@media/index.md
+++ b/files/zh-cn/web/css/@media/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media
 
 **`@media`** [CSS](/zh-CN/docs/Web/CSS) [at 规则](/zh-CN/docs/Web/CSS/At-rule)可用于基于一个或多个[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。
 
-> **备注：** 在 JavaScript 中，可以使用 {{domxref("CSSMediaRule")}} CSS 对象模型接口访问使用 `@media` 创建的规则。
+> [!NOTE]
+> 在 JavaScript 中，可以使用 {{domxref("CSSMediaRule")}} CSS 对象模型接口访问使用 `@media` 创建的规则。
 
 {{EmbedInteractiveExample("pages/tabbed/at-rule-media.html", "tabbed-standard")}}
 
@@ -48,7 +49,8 @@ _媒体类型_（media type）描述设备的一般类别。除非使用 `not` 
 - `screen`
   - : 主要用于屏幕。
 
-> **备注：** CSS2.1 和[媒体查询第 3 版](https://drafts.csswg.org/mediaqueries-3/#background)定义了一些额外的媒体类型（`tty`、`tv`、`projection`、`handheld`、`braille`、`embossed` 以及 `aural`），但是它们在[媒体查询第 4 版](https://drafts.csswg.org/mediaqueries/#media-types)中已被弃用，不应继续使用。
+> [!NOTE]
+> CSS2.1 和[媒体查询第 3 版](https://drafts.csswg.org/mediaqueries-3/#background)定义了一些额外的媒体类型（`tty`、`tv`、`projection`、`handheld`、`braille`、`embossed` 以及 `aural`），但是它们在[媒体查询第 4 版](https://drafts.csswg.org/mediaqueries/#media-types)中已被弃用，不应继续使用。
 
 ## 媒体特性
 
@@ -123,7 +125,8 @@ _逻辑运算符_（logical operator）`not`、`and`、`only` 和 `or` 可用于
 
   - : 用于否定媒体查询，如果不满足这个条件则返回 `true`，否则返回 `false`。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 `not` 运算符，则*还必须*指定媒体类型。
 
-    > **备注：** 在第 3 版中，`not` 关键字不能用于否定单个媒体特性表达式，而只能用于否定整个媒体查询。
+    > [!NOTE]
+    > 在第 3 版中，`not` 关键字不能用于否定单个媒体特性表达式，而只能用于否定整个媒体查询。
 
 - `only`
   - : 仅在整个查询匹配时才应用样式。这对于防止较老的浏览器应用所选样式很有用。当不使用 `only` 时，较老的浏览器会将 `screen and (max-width: 500px)` 简单地解释为 `screen`，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 `only` 运算符，则*还必须*指定媒体类型。
diff --git a/files/zh-cn/web/css/@media/orientation/index.md b/files/zh-cn/web/css/@media/orientation/index.md
index 46c38f2276dc99..ed52510967fc98 100644
--- a/files/zh-cn/web/css/@media/orientation/index.md
+++ b/files/zh-cn/web/css/@media/orientation/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/@media/orientation
 
 [CSS](/zh-CN/docs/Web/CSS) [媒体属性](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries#Media_features)**屏幕方向**（**`orientation`**）可用于测试视口 {{glossary("viewport")}}（或者对于[分页媒体](/zh-CN/docs/Web/CSS/CSS_paged_media)而言的页面框盒）的横纵方向。
 
-> **备注：** 此属性不等价于*设备*的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。
+> [!NOTE]
+> 此属性不等价于*设备*的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/@media/prefers-color-scheme/index.md b/files/zh-cn/web/css/@media/prefers-color-scheme/index.md
index 7b4a3e0d365dea..585bfd5760956f 100644
--- a/files/zh-cn/web/css/@media/prefers-color-scheme/index.md
+++ b/files/zh-cn/web/css/@media/prefers-color-scheme/index.md
@@ -16,7 +16,8 @@ slug: Web/CSS/@media/prefers-color-scheme
 - `dark`
   - : 表示用户已告知系统他们选择使用暗色主题的界面。
 
-> **备注：** “未得知”、“已告知”等用语，英文原文如此。
+> [!NOTE]
+> “未得知”、“已告知”等用语，英文原文如此。
 > “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。
 > “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。
 >
diff --git a/files/zh-cn/web/css/@namespace/index.md b/files/zh-cn/web/css/@namespace/index.md
index 132c525d3661dc..b0eb18a8252870 100644
--- a/files/zh-cn/web/css/@namespace/index.md
+++ b/files/zh-cn/web/css/@namespace/index.md
@@ -17,7 +17,8 @@ slug: Web/CSS/@namespace
 
 在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中，已知的 [foreign elements](https://html.spec.whatwg.org/#foreign-elements)(“外语元素，比如 SVG 和 math 命名空间中的元素”) 将被自动加上命名空间。这意味着即使文档中没有任何 xmlns 属性，HTML 元素也将表现的如同他们在 XHTML 命名空间内 (`http://www.w3.org/1999/xhtml`) 一样，而 [\<svg>](/zh-CN/docs/Web/SVG/Element/svg) 和 [\<math>](/zh-CN/docs/Web/MathML/Element/math) 元素则将被加上对应的命名空间 (`http://www.w3.org/2000/svg` 和`http://www.w3.org/1998/Math/MathML`).
 
-> **备注：** 在 XML 中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS 中的默认命名空间不会加到属性选择器中
+> [!NOTE]
+> 在 XML 中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS 中的默认命名空间不会加到属性选择器中
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/@page/index.md b/files/zh-cn/web/css/@page/index.md
index cecb5ced5f48f7..e1ec1d30f593b6 100644
--- a/files/zh-cn/web/css/@page/index.md
+++ b/files/zh-cn/web/css/@page/index.md
@@ -133,7 +133,8 @@ l10n:
 
 @page 规则定义了页面盒子的属性。可以通过 CSS 对象模型接口 {{domxref("CSSPageRule")}} 访问 `@page` at 规则。
 
-> **备注：** W3C 正在讨论如何处理和视图窗口有关的 {{cssxref("&lt;length&gt;")}} 的单位：`vh`、`vm`、`vmin` 和 `vmax`。目前，请不要在 `@page` at 规则中使用它们。
+> [!NOTE]
+> W3C 正在讨论如何处理和视图窗口有关的 {{cssxref("&lt;length&gt;")}} 的单位：`vh`、`vm`、`vmin` 和 `vmax`。目前，请不要在 `@page` at 规则中使用它们。
 
 ### 相关属性
 
@@ -160,7 +161,8 @@ l10n:
 
 ## 边距 at 规则
 
-> **警告：** 还没有任何用户代理实现边距 at 规则（截至 2023 年 8 月）。
+> [!WARNING]
+> 还没有任何用户代理实现边距 at 规则（截至 2023 年 8 月）。
 
 边距 at 规则用于 `@page` at 规则内部。它们分别针对文档打印页面的不同部分，根据样式块中设置的属性值对打印页面的区域进行样式设置：
 
diff --git a/files/zh-cn/web/css/@supports/index.md b/files/zh-cn/web/css/@supports/index.md
index 08d9fc46fe48c8..f0d5faa4e09741 100644
--- a/files/zh-cn/web/css/@supports/index.md
+++ b/files/zh-cn/web/css/@supports/index.md
@@ -69,7 +69,8 @@ slug: Web/CSS/@supports
 }
 ```
 
-> **备注：** 如果 `not` 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 `and` 和 `or`，则需要外面的圆括号。
+> [!NOTE]
+> 如果 `not` 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 `and` 和 `or`，则需要外面的圆括号。
 
 ### `and` 操作符
 
@@ -116,7 +117,8 @@ slug: Web/CSS/@supports
 }
 ```
 
-> **备注：** 在使用 `and` 和 `or` 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。
+> [!NOTE]
+> 在使用 `and` 和 `or` 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。
 
 ### 形式化语法
 
diff --git a/files/zh-cn/web/css/_colon_-moz-broken/index.md b/files/zh-cn/web/css/_colon_-moz-broken/index.md
index 73a7db15af0a82..a06f8388a35b1a 100644
--- a/files/zh-cn/web/css/_colon_-moz-broken/index.md
+++ b/files/zh-cn/web/css/_colon_-moz-broken/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-broken
 
 **`:-moz-broken`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)是一个 [Mozilla 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)，用于匹配表示损坏图像链接的元素。
 
-> **备注：** 这个选择器主要是为主题开发人员设计。
+> [!NOTE]
+> 这个选择器主要是为主题开发人员设计。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_-moz-first-node/index.md b/files/zh-cn/web/css/_colon_-moz-first-node/index.md
index 2beb28ce27017b..9fdc851d05de25 100644
--- a/files/zh-cn/web/css/_colon_-moz-first-node/index.md
+++ b/files/zh-cn/web/css/_colon_-moz-first-node/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-first-node
 
 **`:-moz-first-node`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)是一个 [Mozilla 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)，表示任何作为某个其他元素的第一个子节点的元素。它与 {{Cssxref(":first-child")}} 不同，因为它不匹配在其前面有（非空白）文本的第一个子元素。
 
-> **备注：** 在确定 `:-moz-first-node` 时忽略元素开头的任何空白字符。
+> [!NOTE]
+> 在确定 `:-moz-first-node` 时忽略元素开头的任何空白字符。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_-moz-window-inactive/index.md b/files/zh-cn/web/css/_colon_-moz-window-inactive/index.md
index e3f05d1b309e3b..e49dfa81ab3f33 100644
--- a/files/zh-cn/web/css/_colon_-moz-window-inactive/index.md
+++ b/files/zh-cn/web/css/_colon_-moz-window-inactive/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:-moz-window-inactive
 
 `:-moz-window-inactive` 也适用于 HTML 文档中的内容。
 
-> **备注：** 在引入这个伪类之前，为背景窗口提供不同的样式是通过在顶层 XUL chrome 窗口上设置属性（`active="true"`）来实现的。这个属性现在已不再使用。
+> [!NOTE]
+> 在引入这个伪类之前，为背景窗口提供不同的样式是通过在顶层 XUL chrome 窗口上设置属性（`active="true"`）来实现的。这个属性现在已不再使用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_active/index.md b/files/zh-cn/web/css/_colon_active/index.md
index a07b0570ac3fdd..91cd9674da9f8c 100644
--- a/files/zh-cn/web/css/_colon_active/index.md
+++ b/files/zh-cn/web/css/_colon_active/index.md
@@ -18,7 +18,8 @@ a:active {
 
 这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 {{cssxref(":link")}}，{{cssxref(":hover")}} 和 {{cssxref(":visited")}}。为保证样式生效，需要把 `:active` 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 _LVHA 顺序_：`:link` — `:visited` — `:hover` — `:active`。
 
-> **备注：** 在有多键鼠标的系统中，CSS 3 规定 `:active` 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。
+> [!NOTE]
+> 在有多键鼠标的系统中，CSS 3 规定 `:active` 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_autofill/index.md b/files/zh-cn/web/css/_colon_autofill/index.md
index 29f4856ebe8063..0b10bcd5d60a84 100644
--- a/files/zh-cn/web/css/_colon_autofill/index.md
+++ b/files/zh-cn/web/css/_colon_autofill/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:autofill
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-autofill.html", "tabbed-shorter")}}
 
-> **备注：** 许多浏览器的用户代理样式表在其 `:-webkit-autofill` 样式声明中使用 `!important`，使它们无法被网页覆盖，除非通过 JavaScript 的方式。例如，Chrome 在其内部样式表中有以下内容：
+> [!NOTE]
+> 许多浏览器的用户代理样式表在其 `:-webkit-autofill` 样式声明中使用 `!important`，使它们无法被网页覆盖，除非通过 JavaScript 的方式。例如，Chrome 在其内部样式表中有以下内容：
 >
 > ```css
 > background-color: rgb(232, 240, 254) !important;
diff --git a/files/zh-cn/web/css/_colon_blank/index.md b/files/zh-cn/web/css/_colon_blank/index.md
index f7c0deb86210d3..2a65f58d4c236d 100644
--- a/files/zh-cn/web/css/_colon_blank/index.md
+++ b/files/zh-cn/web/css/_colon_blank/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{CSSRef}}{{SeeCompatTable}}
 
-> **备注：** 使用 `:blank` 选择器被认为尚有一定风险，CSSWG 正在持续改进它。
+> [!NOTE]
+> 使用 `:blank` 选择器被认为尚有一定风险，CSSWG 正在持续改进它。
 >
 > 详见 [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967)。
 
diff --git a/files/zh-cn/web/css/_colon_checked/index.md b/files/zh-cn/web/css/_colon_checked/index.md
index e0612c36a4fb96..d11bd2dcb0115f 100644
--- a/files/zh-cn/web/css/_colon_checked/index.md
+++ b/files/zh-cn/web/css/_colon_checked/index.md
@@ -17,7 +17,8 @@ slug: Web/CSS/:checked
 
 用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。
 
-> **备注：** 因为浏览器经常将 `<option>` 视为[可替换元素](/zh-CN/docs/Web/CSS/Replaced_element)，因此不同的浏览器通过`:checked`伪类渲染出来的效果也不尽相同。
+> [!NOTE]
+> 因为浏览器经常将 `<option>` 视为[可替换元素](/zh-CN/docs/Web/CSS/Replaced_element)，因此不同的浏览器通过`:checked`伪类渲染出来的效果也不尽相同。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_empty/index.md b/files/zh-cn/web/css/_colon_empty/index.md
index 4cef2bd2ba2507..00177442e8eb27 100644
--- a/files/zh-cn/web/css/_colon_empty/index.md
+++ b/files/zh-cn/web/css/_colon_empty/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:empty
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-empty.html", "tabbed-shorter")}}
 
-> **备注：** 在[选择器 Level 4](https://drafts.csswg.org/selectors-4/#the-empty-pseudo) 中，`:empty` 伪类被更改为与 {{CSSxRef(":-moz-only-whitespace")}} 类似一样的行为，但目前还没有浏览器支持它。
+> [!NOTE]
+> 在[选择器 Level 4](https://drafts.csswg.org/selectors-4/#the-empty-pseudo) 中，`:empty` 伪类被更改为与 {{CSSxRef(":-moz-only-whitespace")}} 类似一样的行为，但目前还没有浏览器支持它。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_first/index.md b/files/zh-cn/web/css/_colon_first/index.md
index c09a5daae79824..31b8cebf10fbbe 100644
--- a/files/zh-cn/web/css/_colon_first/index.md
+++ b/files/zh-cn/web/css/_colon_first/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/:first
 }
 ```
 
-> **备注：** 你不能使用此伪类更改所有的 CSS 属性。你只能更改文档的边距、{{cssxref("orphans")}}、{{cssxref("widows")}} 和分页符。此外，在定义边距时，你只能使用[绝对长度](/zh-CN/docs/Web/CSS/length#绝对长度单位)单位。所有其他属性都将被忽略。
+> [!NOTE]
+> 你不能使用此伪类更改所有的 CSS 属性。你只能更改文档的边距、{{cssxref("orphans")}}、{{cssxref("widows")}} 和分页符。此外，在定义边距时，你只能使用[绝对长度](/zh-CN/docs/Web/CSS/length#绝对长度单位)单位。所有其他属性都将被忽略。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_focus/index.md b/files/zh-cn/web/css/_colon_focus/index.md
index d8087f3c8df320..c132149591e7b6 100644
--- a/files/zh-cn/web/css/_colon_focus/index.md
+++ b/files/zh-cn/web/css/_colon_focus/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:focus
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-focus.html", "tabbed-shorter")}}
 
-> **备注：** 此伪类仅适用于焦点的元素自身。如果要选择*包含*焦点元素的元素，请使用 {{cssxref(":focus-within")}}。
+> [!NOTE]
+> 此伪类仅适用于焦点的元素自身。如果要选择*包含*焦点元素的元素，请使用 {{cssxref(":focus-within")}}。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_host-context/index.md b/files/zh-cn/web/css/_colon_host-context/index.md
index 45c0971ecfbf36..ca22517b0a029e 100644
--- a/files/zh-cn/web/css/_colon_host-context/index.md
+++ b/files/zh-cn/web/css/_colon_host-context/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/:host-context
 
 这样子做的一个典型用法是与后代选择器表达式（例如 h1）一起使用，仅选择在 `<h1>` 内的自定义元素的实例。另一个典型用法是允许内部元素对任何祖先元素上的类或属性做出反应，例如，在将 `.dark-theme` 类应用于 `<body>` 时应用不同的文本颜色。
 
-> **备注：** 这在影子 DOM 之外使用时无效。
+> [!NOTE]
+> 这在影子 DOM 之外使用时无效。
 
 ```css
 /* 选择影子根宿主，仅当它是给定的选择器参数的后代 */
diff --git a/files/zh-cn/web/css/_colon_host/index.md b/files/zh-cn/web/css/_colon_host/index.md
index f51224f1fee7a1..b3957ceecf35c5 100644
--- a/files/zh-cn/web/css/_colon_host/index.md
+++ b/files/zh-cn/web/css/_colon_host/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:host
 
 **`:host`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)选择内部使用了该 CSS 的[影子 DOM（shadow DOM）](/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM) 的影子宿主（shadow host）——换句话说，这允许你从其影子 DOM 内部选择自定义元素。
 
-> **备注：** 这不适用于在影子 DOM 之外使用。
+> [!NOTE]
+> 这不适用于在影子 DOM 之外使用。
 
 ```css
 /* 选择影子根宿主 */
diff --git a/files/zh-cn/web/css/_colon_host_function/index.md b/files/zh-cn/web/css/_colon_host_function/index.md
index 9854207b7e0de5..e5cceac2f083d1 100644
--- a/files/zh-cn/web/css/_colon_host_function/index.md
+++ b/files/zh-cn/web/css/_colon_host_function/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:host_function
 
 最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 {{cssxref(":host-context()")}} 的作用。
 
-> **备注：** 在 shadow DOM 之外使用时，这没有任何效果。
+> [!NOTE]
+> 在 shadow DOM 之外使用时，这没有任何效果。
 
 ```css
 /* 选择阴影根元素，仅当它与选择器参数匹配 */
diff --git a/files/zh-cn/web/css/_colon_hover/index.md b/files/zh-cn/web/css/_colon_hover/index.md
index 7813f9f8c2939e..a14a4fbd5b7a08 100644
--- a/files/zh-cn/web/css/_colon_hover/index.md
+++ b/files/zh-cn/web/css/_colon_hover/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/:hover
 
 `:hover` 伪类定义的样式将被任何后续的链接相关伪类（{{ cssxref(":link") }}、{{ cssxref(":visited") }} 或 {{ cssxref(":active") }}）覆盖，这些伪类的特殊性至少相等。为了适当地为链接设置样式，应该在 `:link`和 `:visited` 规则之后，`:active` 规则之前放置 `:hover` 规则，即按照 _LVHA 定义的顺序_：`link` — `:visited` — `:hover` — `:active`。
 
-> **备注：** 在触摸屏上，`:hover` 伪类可能存在问题。根据不同的浏览器，`:hover` 伪类可能永远不会匹配，只会在触摸一个元素后短暂匹配，或者即使用户停止触摸并且直到用户触摸另一个元素之前仍然匹配。Web 开发人员应确保内容可以在具有有限或不存在悬停功能的设备上访问。
+> [!NOTE]
+> 在触摸屏上，`:hover` 伪类可能存在问题。根据不同的浏览器，`:hover` 伪类可能永远不会匹配，只会在触摸一个元素后短暂匹配，或者即使用户停止触摸并且直到用户触摸另一个元素之前仍然匹配。Web 开发人员应确保内容可以在具有有限或不存在悬停功能的设备上访问。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_in-range/index.md b/files/zh-cn/web/css/_colon_in-range/index.md
index a5b6272057d8aa..326a8608cf3dca 100644
--- a/files/zh-cn/web/css/_colon_in-range/index.md
+++ b/files/zh-cn/web/css/_colon_in-range/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/:in-range
 
 这个伪类很有用，可以给用户提供一个视觉提示，让他们知道字段的当前值是否在允许的范围内。
 
-> **备注：** 该伪类仅适用于具有（且可以接受）范围限制的元素。如果没有这样的限制，元素值就无所谓“in-range”和“out-of-range”。
+> [!NOTE]
+> 该伪类仅适用于具有（且可以接受）范围限制的元素。如果没有这样的限制，元素值就无所谓“in-range”和“out-of-range”。
 
 ## 语法
 
@@ -79,7 +80,8 @@ input:out-of-range + label::after {
 
 {{EmbedLiveSample('示例', 600, 140)}}
 
-> **备注：** 内容为空的 `<input>` 不算作超出范围，因此不会被 `:out-of-range` 伪类选择器应用。虽然目前 [`:blank`](/zh-CN/docs/Web/CSS/:blank) 伪类可用于选择空白输入，但该伪类仍处于实验性阶段且得到的支持有限。建议你使用 `required` 属性和 [`:invalid`](/zh-CN/docs/Web/CSS/:invalid) 伪类来提供更为通用的逻辑和样式以使输入变为必填项（`:invalid` 伪类将为空白*和*超出范围的输入提供样式）。
+> [!NOTE]
+> 内容为空的 `<input>` 不算作超出范围，因此不会被 `:out-of-range` 伪类选择器应用。虽然目前 [`:blank`](/zh-CN/docs/Web/CSS/:blank) 伪类可用于选择空白输入，但该伪类仍处于实验性阶段且得到的支持有限。建议你使用 `required` 属性和 [`:invalid`](/zh-CN/docs/Web/CSS/:invalid) 伪类来提供更为通用的逻辑和样式以使输入变为必填项（`:invalid` 伪类将为空白*和*超出范围的输入提供样式）。
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/_colon_is/index.md b/files/zh-cn/web/css/_colon_is/index.md
index fa7b1309268b81..af6283ade3b45a 100644
--- a/files/zh-cn/web/css/_colon_is/index.md
+++ b/files/zh-cn/web/css/_colon_is/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/:is
 
 **`:is()`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
 
-> **备注：** 最初该选择器被命名为 `:matches()`（以及 `:any()`），但在 [CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258) 中被重命名为 `:is()`。
+> [!NOTE]
+> 最初该选择器被命名为 `:matches()`（以及 `:any()`），但在 [CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258) 中被重命名为 `:is()`。
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}}
 
diff --git a/files/zh-cn/web/css/_colon_lang/index.md b/files/zh-cn/web/css/_colon_lang/index.md
index 86580e5d52b656..9d2206563be1c7 100644
--- a/files/zh-cn/web/css/_colon_lang/index.md
+++ b/files/zh-cn/web/css/_colon_lang/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:lang
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-function-lang.html", "tabbed-shorter")}}
 
-> **备注：** 在 HTML 中，语言是通过 [`lang`](/zh-CN/docs/Web/HTML/Global_attributes#lang) 属性和 {{HTMLElement("meta")}} 元素的组合来决定的，也可能是通过协议的信息来确定（例如 HTTP 标头）。对于其他文档类型，也可能存在其他用于确定语言的方法。
+> [!NOTE]
+> 在 HTML 中，语言是通过 [`lang`](/zh-CN/docs/Web/HTML/Global_attributes#lang) 属性和 {{HTMLElement("meta")}} 元素的组合来决定的，也可能是通过协议的信息来确定（例如 HTTP 标头）。对于其他文档类型，也可能存在其他用于确定语言的方法。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_left/index.md b/files/zh-cn/web/css/_colon_left/index.md
index 964ad474488ace..c8bb9a29ef767d 100644
--- a/files/zh-cn/web/css/_colon_left/index.md
+++ b/files/zh-cn/web/css/_colon_left/index.md
@@ -16,7 +16,8 @@ slug: Web/CSS/:left
 
 打印文档的“左”或“右”是由书写方向相关的。举个例子，从左到右的书写方向中第一页应当使用 {{Cssxref(":right")}} 配置；从右至左的书写方向中第一页应当使用 `:left` 配置。
 
-> **备注：** 并不是所有样式属性都能应用在此选择器内。仅仅 {{ Cssxref("margin") }}、{{ Cssxref("padding") }}、{{ Cssxref("border") }} 和 {{ Cssxref("background") }} 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。
+> [!NOTE]
+> 并不是所有样式属性都能应用在此选择器内。仅仅 {{ Cssxref("margin") }}、{{ Cssxref("padding") }}、{{ Cssxref("border") }} 和 {{ Cssxref("background") }} 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。
 
 ## 参数
 
diff --git a/files/zh-cn/web/css/_colon_link/index.md b/files/zh-cn/web/css/_colon_link/index.md
index a8611cbbcfabdf..c0cdf77320b122 100644
--- a/files/zh-cn/web/css/_colon_link/index.md
+++ b/files/zh-cn/web/css/_colon_link/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/:link
 
 由 `:link` 和 [`:visited`](/zh-CN/docs/Web/CSS/:visited) 伪类定义的样式可以被任何具有相同优先级的后续用户动作伪类（例如 {{cssxref(":hover")}} 或 {{cssxref(":active")}}）覆盖。为了适当地为链接设置样式，请按照 *LVHA 顺序*将 `:link` 规则放置在所有其他与链接相关的规则之前，顺序为 `:link`—`:visited`—`:hover`—`:active`。`:visited` 伪类和 `:link` 伪类是互斥的。
 
-> **备注：** 使用 {{cssxref(":any-link")}} 来选择一个元素，无论它是否已被访问。
+> [!NOTE]
+> 使用 {{cssxref(":any-link")}} 来选择一个元素，无论它是否已被访问。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_nth-child/index.md b/files/zh-cn/web/css/_colon_nth-child/index.md
index fc59fbc93240b3..d25971c7dad32f 100644
--- a/files/zh-cn/web/css/_colon_nth-child/index.md
+++ b/files/zh-cn/web/css/_colon_nth-child/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-child.html", "tabbed-shorter")}}
 
-> **备注：** 在 `element:nth-child()` 的语法中，子元素的计数包括任何元素类型的兄弟子元素；但是只有当*该子元素位置上的*元素与选择器的其他组件匹配时，才被视为匹配。
+> [!NOTE]
+> 在 `element:nth-child()` 的语法中，子元素的计数包括任何元素类型的兄弟子元素；但是只有当*该子元素位置上的*元素与选择器的其他组件匹配时，才被视为匹配。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_nth-last-child/index.md b/files/zh-cn/web/css/_colon_nth-last-child/index.md
index fe9d74c1efc718..3bb3e7bf5c2855 100644
--- a/files/zh-cn/web/css/_colon_nth-last-child/index.md
+++ b/files/zh-cn/web/css/_colon_nth-last-child/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/:nth-last-child
 }
 ```
 
-> **备注：** 这个伪类和 {{Cssxref(":nth-child")}} 基本一致，但它是从*结尾*计数，而不是从开始计数。
+> [!NOTE]
+> 这个伪类和 {{Cssxref(":nth-child")}} 基本一致，但它是从*结尾*计数，而不是从开始计数。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_nth-of-type/index.md b/files/zh-cn/web/css/_colon_nth-of-type/index.md
index 6423c2c8dd27f0..57deeaa5e5f280 100644
--- a/files/zh-cn/web/css/_colon_nth-of-type/index.md
+++ b/files/zh-cn/web/css/_colon_nth-of-type/index.md
@@ -68,7 +68,8 @@ p.fancy:nth-of-type(2n + 1) {
 
 {{EmbedLiveSample('基本示例', 250, 200)}}
 
-> **备注：** 使用此选择器无法选择 nth-of-class。选择器仅在创建匹配列表时查找类型。但是你可以基于 `:nth-of-type` 的位置**和**类名为元素应用 CSS，就像上面的示例中所示。
+> [!NOTE]
+> 使用此选择器无法选择 nth-of-class。选择器仅在创建匹配列表时查找类型。但是你可以基于 `:nth-of-type` 的位置**和**类名为元素应用 CSS，就像上面的示例中所示。
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/_colon_only-child/index.md b/files/zh-cn/web/css/_colon_only-child/index.md
index fa6d3e9f4cf05e..9e085ed1e5fe3d 100644
--- a/files/zh-cn/web/css/_colon_only-child/index.md
+++ b/files/zh-cn/web/css/_colon_only-child/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:only-child
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-child.html", "tabbed-shorter")}}
 
-> **备注：** 按照最初的定义，被选择的元素必须拥有一个父级元素。从选择器 Level 4 开始，这不再是必须的了。
+> [!NOTE]
+> 按照最初的定义，被选择的元素必须拥有一个父级元素。从选择器 Level 4 开始，这不再是必须的了。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_only-of-type/index.md b/files/zh-cn/web/css/_colon_only-of-type/index.md
index 3fdbbf74d15e10..da9f28796307bd 100644
--- a/files/zh-cn/web/css/_colon_only-of-type/index.md
+++ b/files/zh-cn/web/css/_colon_only-of-type/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:only-of-type
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-of-type.html", "tabbed-shorter")}}
 
-> **备注：** 根据原来的定义，被选择的元素必须具有父元素。直到 Selectors Level 4 开始，这个要求就不是必须的了。
+> [!NOTE]
+> 根据原来的定义，被选择的元素必须具有父元素。直到 Selectors Level 4 开始，这个要求就不是必须的了。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_out-of-range/index.md b/files/zh-cn/web/css/_colon_out-of-range/index.md
index 7caeaa1c6375e9..f80563e58a45a6 100644
--- a/files/zh-cn/web/css/_colon_out-of-range/index.md
+++ b/files/zh-cn/web/css/_colon_out-of-range/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/:out-of-range
 
 这个伪类很有用，可以给用户提供一个视觉提示，让他们知道字段的当前值是否超出了允许的范围。
 
-> **备注：** 该伪类仅适用于具有（并可以接受）范围限制的元素。如果没有这样的限制，元素值就无所谓“in-range”和“out-of-range”。
+> [!NOTE]
+> 该伪类仅适用于具有（并可以接受）范围限制的元素。如果没有这样的限制，元素值就无所谓“in-range”和“out-of-range”。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_read-only/index.md b/files/zh-cn/web/css/_colon_read-only/index.md
index fa65bb5f809e8e..a73ba88649127b 100644
--- a/files/zh-cn/web/css/_colon_read-only/index.md
+++ b/files/zh-cn/web/css/_colon_read-only/index.md
@@ -20,7 +20,8 @@ input:read-only {
 }
 ```
 
-> **备注：** 这个选择器不只是选择具有 [`readonly`](/zh-CN/docs/Web/HTML/Element/input#readonly) 属性的{{htmlElement("input")}} 元素，它也会选择所有的不能被用户编辑的元素。
+> [!NOTE]
+> 这个选择器不只是选择具有 [`readonly`](/zh-CN/docs/Web/HTML/Element/input#readonly) 属性的{{htmlElement("input")}} 元素，它也会选择所有的不能被用户编辑的元素。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_read-write/index.md b/files/zh-cn/web/css/_colon_read-write/index.md
index cbaa8179036aa8..31f0b8c0589c6f 100644
--- a/files/zh-cn/web/css/_colon_read-write/index.md
+++ b/files/zh-cn/web/css/_colon_read-write/index.md
@@ -20,7 +20,8 @@ input:read-write {
 }
 ```
 
-> **备注：** 这个选择器不仅仅选择 {{htmlElement("input")}} 元素，它也会选择所有可以被用户编辑的元素，例如设置了 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes#contenteditable) 属性的 {{htmlelement("p")}} 元素。
+> [!NOTE]
+> 这个选择器不仅仅选择 {{htmlElement("input")}} 元素，它也会选择所有可以被用户编辑的元素，例如设置了 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes#contenteditable) 属性的 {{htmlelement("p")}} 元素。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_right/index.md b/files/zh-cn/web/css/_colon_right/index.md
index c4f2f8576002c8..702fb17e1e665d 100644
--- a/files/zh-cn/web/css/_colon_right/index.md
+++ b/files/zh-cn/web/css/_colon_right/index.md
@@ -16,9 +16,11 @@ slug: Web/CSS/:right
 
 这里的“左”或“右”不是固定的，取决与文档的写作方向。如果第一页主要文字方向是从左到右的，那么它就是{{cssxref(":right")}}右页，反之它就是{{cssxref(":left")}}左页。
 
-> **备注：** Note: 可通过 `bdo` 标签 的 `dir` 属性改变文字方向。
+> [!NOTE]
+> 可通过 `bdo` 标签 的 `dir` 属性改变文字方向。
 
-> **备注：** 此伪类只能用于更改页面的 {{ cssxref("margin") }}, {{cssxref("padding") }}, {{ cssxref("border") }}, and {{cssxref("background") }} 属性。其他属性都将被忽略，只会影响页框，不会影响文档内容。
+> [!NOTE]
+> 此伪类只能用于更改页面的 {{ cssxref("margin") }}, {{cssxref("padding") }}, {{ cssxref("border") }}, and {{cssxref("background") }} 属性。其他属性都将被忽略，只会影响页框，不会影响文档内容。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_target/index.md b/files/zh-cn/web/css/_colon_target/index.md
index 19814910b2f52f..79b3a0d5dd1f7f 100644
--- a/files/zh-cn/web/css/_colon_target/index.md
+++ b/files/zh-cn/web/css/_colon_target/index.md
@@ -84,7 +84,8 @@ p:target i {
 
 你可以不使用任何 Javascript 代码，只使用 `:target` 伪类创建一个高亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS 就会更改其 `display` 以便显示它们。
 
-> **备注：** 一个基于 `:target` 伪类的更为完善的纯 CSS 高亮框可以在 [GitHub](https://github.com/madmurphy/takefive.css/)（[demo](https://madmurphy.github.io/takefive.css/)）上找到。
+> [!NOTE]
+> 一个基于 `:target` 伪类的更为完善的纯 CSS 高亮框可以在 [GitHub](https://github.com/madmurphy/takefive.css/)（[demo](https://madmurphy.github.io/takefive.css/)）上找到。
 
 #### HTML
 
diff --git a/files/zh-cn/web/css/_colon_visited/index.md b/files/zh-cn/web/css/_colon_visited/index.md
index b3d0888803bc00..f67192a1704e0d 100644
--- a/files/zh-cn/web/css/_colon_visited/index.md
+++ b/files/zh-cn/web/css/_colon_visited/index.md
@@ -21,7 +21,8 @@ slug: Web/CSS/:visited
 - 虽然这些样式可以改变用户最终的颜色外观，但 {{domxref("window.getComputedStyle")}} 方法将存在并且始终返回非访问颜色的值。
 - [`<link>`](/zh-CN/docs/Web/HTML/Element/link) 元素永远不会被 `:visited` 匹配。
 
-> **备注：** 有关这些限制及其背后原因的更多信息，请参阅[隐私和 :visited 选择器](/zh-CN/docs/Web/CSS/Privacy_and_the_:visited_selector)。
+> [!NOTE]
+> 有关这些限制及其背后原因的更多信息，请参阅[隐私和 :visited 选择器](/zh-CN/docs/Web/CSS/Privacy_and_the_:visited_selector)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_colon_where/index.md b/files/zh-cn/web/css/_colon_where/index.md
index dbf73b7b85e063..3a1d63517a956d 100644
--- a/files/zh-cn/web/css/_colon_where/index.md
+++ b/files/zh-cn/web/css/_colon_where/index.md
@@ -138,7 +138,8 @@ footer a {
 
 然而，`:where()` 中的选择器的优先级是 0，所以橘色的页脚链接将被我们的简单选择器覆盖。
 
-> **备注：** 你也可以在 GitHub 上找到这个示例；参见 [is-where](https://mdn.github.io/css-examples/is-where/)。
+> [!NOTE]
+> 你也可以在 GitHub 上找到这个示例；参见 [is-where](https://mdn.github.io/css-examples/is-where/)。
 
 {{EmbedLiveSample('示例', '100%', 600)}}
 
diff --git a/files/zh-cn/web/css/_doublecolon_-moz-color-swatch/index.md b/files/zh-cn/web/css/_doublecolon_-moz-color-swatch/index.md
index 7739602f438639..d7eb7ec9bc1d20 100644
--- a/files/zh-cn/web/css/_doublecolon_-moz-color-swatch/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-moz-color-swatch/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`::-moz-color-swatch`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)是用于表示在 `type="color"` 的 {{HTMLElement("input")}} 中选择的颜色的 [Mozilla 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)。
 
-> **备注：** 除了 `<input type="color">` 以外，使用 `::-moz-color-swatch` 不会匹配任何内容，也没有任何效果。
+> [!NOTE]
+> 除了 `<input type="color">` 以外，使用 `::-moz-color-swatch` 不会匹配任何内容，也没有任何效果。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_-moz-focus-inner/index.md b/files/zh-cn/web/css/_doublecolon_-moz-focus-inner/index.md
index d80b20f92a118e..f3e483c2c7b6b5 100644
--- a/files/zh-cn/web/css/_doublecolon_-moz-focus-inner/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-moz-focus-inner/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`::-moz-focus-inner`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)是用于表示 {{HTMLElement("button")}} 元素以及 {{HTMLElement("input/button","button")}}、{{HTMLElement("input/submit","submit")}}、{{HTMLElement("input/reset","reset")}} 和 {{HTMLElement("input/color","color")}} 类型的 {{HTMLElement("input")}} 元素的 [Mozilla 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)。
 
-> **备注：** 使用 `::-moz-focus-inner` 时，除了支持它的按钮外，其他按钮都不匹配，也没有任何效果。
+> [!NOTE]
+> 使用 `::-moz-focus-inner` 时，除了支持它的按钮外，其他按钮都不匹配，也没有任何效果。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md
index cc5c9089442e97..7c3bfbbcafc66f 100644
--- a/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-moz-range-progress
 
 The **`::-moz-range-progress`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements) 是一个 [Mozilla 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)。它代表了指示器在其中滑动的轨道的下部（即凹槽）是一个 `type="range"` 类型的 {{HTMLElement("input")}} 。此部分对应的值低于揪揪当前选择的值（即虚拟旋钮）。
 
-> **备注：** 在 `<input type="range">`上应用`::-moz-range-progress` 不会匹配任何元素，也不会有任何效果。
+> [!NOTE]
+> 在 `<input type="range">`上应用`::-moz-range-progress` 不会匹配任何元素，也不会有任何效果。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md
index 84127ebed75b03..57fe53b9c793da 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/::-webkit-progress-bar
 
 **`::-webkit-progress-bar`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements) 选择 {{HTMLElement("progress")}} 元素的未完成部分。 {{ cssxref("::-webkit-progress-value") }} 选择完成的部分。**`::-webkit-progress-bar`** 是{{cssxref("::-webkit-progress-inner-element")}} 伪元素的子元素，同时是 {{cssxref("::-webkit-progress-value")}} 伪元素的父元素。
 
-> **备注：** 为了能让`::-webkit-progress-value`起作用，需要添加 CSS {{cssxref("-webkit-appearance")}} 至 `<progress>` 元素。
+> [!NOTE]
+> 为了能让`::-webkit-progress-value`起作用，需要添加 CSS {{cssxref("-webkit-appearance")}} 至 `<progress>` 元素。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md
index eed61af3bad8a9..0501917910a05e 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-webkit-progress-inner-element
 
 **`::-webkit-progress-inner-element`** [CSS](/zh-CN/docs/Web/CSS) 伪元素选择了 {{HTMLElement("progress")}} 元素。他是 {{cssxref("::-webkit-progress-bar")}} 伪元素的父元素。
 
-> **备注：** 为了使 `::-webkit-progress-value` 生效， `<progress>` 元素的{{cssxref("-webkit-appearance")}} 需要设置为 `none` 。
+> [!NOTE]
+> 为了使 `::-webkit-progress-value` 生效， `<progress>` 元素的{{cssxref("-webkit-appearance")}} 需要设置为 `none` 。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md
index dc4602d77c5ab3..a72b731ee5d5a0 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-webkit-progress-value
 
 **`::-webkit-progress-value`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements) 代表的是{{HTMLElement("progress")}} 元素中进度条未完成的部分。它是{{cssxref("::-webkit-progress-bar")}} 伪元素的子元素。
 
-> **备注：** 为了使 `::-webkit-progress-value` 生效， `<progress>` 元素的{{cssxref("-webkit-appearance")}} 需要设置为 `none`。
+> [!NOTE]
+> 为了使 `::-webkit-progress-value` 生效， `<progress>` 元素的{{cssxref("-webkit-appearance")}} 需要设置为 `none`。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md
index 91d47c97f60717..82395113fd0669 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/::-webkit-scrollbar
 
 `::-webkit-scrollbar` CSS 伪类元素会影响设置了 `overflow:scroll;` 的元素的滚动条样式。
 
-> **备注：** 如果没有设置 `overflow:scroll;`，元素的滚动条将不会显示。
+> [!NOTE]
+> 如果没有设置 `overflow:scroll;`，元素的滚动条将不会显示。
 
 > **备注：** `::-webkit-scrollbar` 仅在基于 [Blink](https://www.chromium.org/blink) 或 [WebKit](https://webkit.org) 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及[其他基于 WebKit 的浏览器](https://zh.wikipedia.org/wiki/网页浏览器列表#基於WebKit排版引擎)）上可用。滚动条样式的标准方法可用于 {{cssxref("scrollbar-color")}} 和 {{cssxref("scrollbar-width")}}。
 
diff --git a/files/zh-cn/web/css/_doublecolon_after/index.md b/files/zh-cn/web/css/_doublecolon_after/index.md
index d05920c23daf4d..ec3c4e291aee02 100644
--- a/files/zh-cn/web/css/_doublecolon_after/index.md
+++ b/files/zh-cn/web/css/_doublecolon_after/index.md
@@ -24,7 +24,8 @@ l10n:
 
 如果未指定 [`content`](/zh-CN/docs/Web/CSS/content) 属性、属性值无效或属性值为 `normal` 或 `none`，则不会渲染 `::after` 伪元素。其行为与设置了 `display: none` 相同。
 
-> **备注：** CSS 引入 `::after` 表示法（两个冒号）是用来区分[伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)和[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)的。同时为了向后兼容，浏览器也支持较早引入的 `:after`。
+> [!NOTE]
+> CSS 引入 `::after` 表示法（两个冒号）是用来区分[伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)和[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)的。同时为了向后兼容，浏览器也支持较早引入的 `:after`。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/_doublecolon_before/index.md b/files/zh-cn/web/css/_doublecolon_before/index.md
index 44fb4580928e66..0cd2bf93ce66a7 100644
--- a/files/zh-cn/web/css/_doublecolon_before/index.md
+++ b/files/zh-cn/web/css/_doublecolon_before/index.md
@@ -11,7 +11,8 @@ CSS 中，**`::before`** 创建一个[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elem
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-element-before.html", "tabbed-standard")}}
 
-> **备注：** 由 `::before` 和 `::after` 伪元素生成的盒子，就好像它们是应用它们的元素或“原始元素（originating element）”的直接子元素一样，因此不能应用在[_替换元素上_](/zh-CN/docs/Web/CSS/Replaced_element)，比如 {{htmlelement("img")}} 元素，其内容不在 CSS 格式化模型的范围内。
+> [!NOTE]
+> 由 `::before` 和 `::after` 伪元素生成的盒子，就好像它们是应用它们的元素或“原始元素（originating element）”的直接子元素一样，因此不能应用在[_替换元素上_](/zh-CN/docs/Web/CSS/Replaced_element)，比如 {{htmlelement("img")}} 元素，其内容不在 CSS 格式化模型的范围内。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_first-letter/index.md b/files/zh-cn/web/css/_doublecolon_first-letter/index.md
index 399e09500f127f..51192577d7d023 100644
--- a/files/zh-cn/web/css/_doublecolon_first-letter/index.md
+++ b/files/zh-cn/web/css/_doublecolon_first-letter/index.md
@@ -17,7 +17,8 @@ l10n:
 - 有些语言的数字符总是一起大写，如荷兰语中的 `IJ`。在这种情况下，数字的两个字母都应与 `::first-letter` 伪元素匹配。
 - {{ cssxref("::before") }} 伪元素和 {{ cssxref("content") }} 属性的组合可能会在元素开头注入一些文本。在这种情况下，`::first-letter` 将匹配生成内容的第一个字母。
 
-> **备注：** CSS 引入了 `::first-letter` 符号（带两个冒号），以区分[伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)和[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)。为了向后兼容，浏览器也接受早先引入的 `:first-letter`。
+> [!NOTE]
+> CSS 引入了 `::first-letter` 符号（带两个冒号），以区分[伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)和[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)。为了向后兼容，浏览器也接受早先引入的 `:first-letter`。
 >
 > 浏览器对荷兰语中 `IJ` 等数字字符的支持较差。请查看下面的兼容性表，以了解当前的支持情况。
 
@@ -117,7 +118,8 @@ p::first-letter {
 
 在此示例中，我们使用 `::first-letter` 伪元素来设置 SVG {{SVGElement("text")}} 元素中第一个字母的样式。
 
-> **备注：** 在撰写本文时，此功能已获得[有限支持](#浏览器兼容性)。
+> [!NOTE]
+> 在撰写本文时，此功能已获得[有限支持](#浏览器兼容性)。
 
 #### HTML
 
diff --git a/files/zh-cn/web/css/_doublecolon_first-line/index.md b/files/zh-cn/web/css/_doublecolon_first-line/index.md
index 484f64cb27984a..cd07b2f01bd1af 100644
--- a/files/zh-cn/web/css/_doublecolon_first-line/index.md
+++ b/files/zh-cn/web/css/_doublecolon_first-line/index.md
@@ -23,7 +23,8 @@ slug: Web/CSS/::first-line
 
 这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。
 
-> **备注：** 在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。
+> [!NOTE]
+> 在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。
 >
 > 因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。
 >
diff --git a/files/zh-cn/web/css/_doublecolon_marker/index.md b/files/zh-cn/web/css/_doublecolon_marker/index.md
index 693bc0a10e5bf0..e9fb6146ce6ce6 100644
--- a/files/zh-cn/web/css/_doublecolon_marker/index.md
+++ b/files/zh-cn/web/css/_doublecolon_marker/index.md
@@ -20,7 +20,8 @@ slug: Web/CSS/::marker
 - {{CSSxRef("content")}} 属性
 - 所有的 [animation](/zh-CN/docs/Web/CSS/CSS_animations#css_属性) 和 [transition](/zh-CN/docs/Web/CSS/CSS_transitions#css_属性) 属性
 
-> **备注：** 规范指出，将来可能会支持其他 CSS 属性。
+> [!NOTE]
+> 规范指出，将来可能会支持其他 CSS 属性。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_placeholder/index.md b/files/zh-cn/web/css/_doublecolon_placeholder/index.md
index 63f162875c9e1e..59575d2f7d3cdb 100644
--- a/files/zh-cn/web/css/_doublecolon_placeholder/index.md
+++ b/files/zh-cn/web/css/_doublecolon_placeholder/index.md
@@ -13,7 +13,8 @@ l10n:
 
 只有可以应用于 {{cssxref("::first-line")}} 伪元素的 CSS 属性子集可以在使用了 `::placeholder` 选择器的规则中使用。
 
-> **备注：** 对于大多数浏览器，占位文本的外观默认为半透明或浅灰色。
+> [!NOTE]
+> 对于大多数浏览器，占位文本的外观默认为半透明或浅灰色。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_selection/index.md b/files/zh-cn/web/css/_doublecolon_selection/index.md
index a5671296bcef27..f2b32e411f6b5b 100644
--- a/files/zh-cn/web/css/_doublecolon_selection/index.md
+++ b/files/zh-cn/web/css/_doublecolon_selection/index.md
@@ -26,7 +26,8 @@ slug: Web/CSS/::selection
 - {{CSSxRef("text-emphasis-color")}}
 - {{CSSxRef("text-shadow")}}
 
-> **警告：** 要特别注意的是，{{ cssxref("background-image") }} 会如同其他属性一样被忽略。
+> [!WARNING]
+> 要特别注意的是，{{ cssxref("background-image") }} 会如同其他属性一样被忽略。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
index 8af5074149380c..9143b68d9a9fa1 100644
--- a/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
@@ -26,7 +26,8 @@ html::view-transition-group(*) {
 
 如果同时存在新旧两种视图状态，则视图过渡样式表中的样式会将该伪元素的 {{cssxref("width")}} 和 {{cssxref("height")}} 从旧视图状态的边框盒大小动画到新视图状态的边框盒大小。
 
-> **备注：** 视图过渡样式表中的样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+> [!NOTE]
+> 视图过渡样式表中的样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
 
 此外，元素的变换是从旧视图状态的屏幕空间，变换到新视图状态的屏幕空间。由于动画属性的值是在过渡开始时确定的，因此此样式是动态生成的。
 
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
index 2499e34b688637..0e4d15dad87e61 100644
--- a/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
@@ -32,7 +32,8 @@ html::view-transition-new(*) {
 }
 ```
 
-> **备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-new`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+> [!NOTE]
+> 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-new`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
index 81df7be9c806e4..ab75b8281ac39f 100644
--- a/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
@@ -32,7 +32,8 @@ html::view-transition-old(*) {
 }
 ```
 
-> **备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-old`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+> [!NOTE]
+> 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-old`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/animation-delay/index.md b/files/zh-cn/web/css/animation-delay/index.md
index 78d521ea3011e8..85f306d118f264 100644
--- a/files/zh-cn/web/css/animation-delay/index.md
+++ b/files/zh-cn/web/css/animation-delay/index.md
@@ -40,7 +40,8 @@ animation-delay: unset;
 
     负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 `-1s` 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第 1 秒开始。如果你为动画延迟指定负值，但起始值是隐含的，则起始值取自应用动画到元素的时刻。
 
-> **备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
+> [!NOTE]
+> 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/animation-direction/index.md b/files/zh-cn/web/css/animation-direction/index.md
index e6945172b957c5..19b324567b2b6c 100644
--- a/files/zh-cn/web/css/animation-direction/index.md
+++ b/files/zh-cn/web/css/animation-direction/index.md
@@ -43,7 +43,8 @@ animation-direction: unset;
 - `alternate-reverse`
   - : 动画在每个循环中正反交替播放，第一次迭代是*反向*播放。确定循环是奇数还是偶数的计数从 1 开始。
 
-> **备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
+> [!NOTE]
+> 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/animation-duration/index.md b/files/zh-cn/web/css/animation-duration/index.md
index c45b25d551e336..6e91f47e8d7d5d 100644
--- a/files/zh-cn/web/css/animation-duration/index.md
+++ b/files/zh-cn/web/css/animation-duration/index.md
@@ -42,9 +42,11 @@ animation-duration: unset;
     - 如果 `animation-fill-mode` 设置为 `forwards` 或者 `both`，在 `animation-delay` 结束后，将显示由 `animation-direction` 定义的动画的最后一帧。
     - 如果 `animation-fill-mode` 设置为 `none`，动画将不会有任何的视觉效果。
 
-> **备注：** 负值是无效的，会导致声明被忽略。一些早期的、有前缀的实现可能将其视为与 `0s` 相同。
+> [!NOTE]
+> 负值是无效的，会导致声明被忽略。一些早期的、有前缀的实现可能将其视为与 `0s` 相同。
 
-> **备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
+> [!NOTE]
+> 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/animation-fill-mode/index.md b/files/zh-cn/web/css/animation-fill-mode/index.md
index b22e1fb5fdaf86..77f0b22a6901f2 100644
--- a/files/zh-cn/web/css/animation-fill-mode/index.md
+++ b/files/zh-cn/web/css/animation-fill-mode/index.md
@@ -54,7 +54,8 @@ animation-fill-mode: both, forwards, none;
 - `both`
   - : 动画将遵循`forwards`和`backwards`的规则，从而在两个方向上扩展动画属性。
 
-> **备注：** 当你在`animation-*`属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#Setting_multiple_animation_property_values)。
+> [!NOTE]
+> 当你在`animation-*`属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#Setting_multiple_animation_property_values)。
 
 ### 正式语法
 
diff --git a/files/zh-cn/web/css/animation-iteration-count/index.md b/files/zh-cn/web/css/animation-iteration-count/index.md
index a41316dacbe1a7..2660721780a0f6 100644
--- a/files/zh-cn/web/css/animation-iteration-count/index.md
+++ b/files/zh-cn/web/css/animation-iteration-count/index.md
@@ -41,7 +41,8 @@ animation-iteration-count: unset;
 - `{{cssxref("&lt;number&gt;")}}`
   - : 动画重复的次数；默认为 `1`。你可以指定非整数值以播放动画循环的一部分：例如，`0.5` 将播放动画循环的一半。负值是无效的。
 
-> **备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#设置多个动画属性值)。
+> [!NOTE]
+> 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#设置多个动画属性值)。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/animation-name/index.md b/files/zh-cn/web/css/animation-name/index.md
index f96cd08db5e653..f9a1d47180b6cd 100644
--- a/files/zh-cn/web/css/animation-name/index.md
+++ b/files/zh-cn/web/css/animation-name/index.md
@@ -42,7 +42,8 @@ animation-name: unset;
 - {{cssxref("&lt;custom-ident&gt;")}}
   - : 一个标识动画的名称。该标识符由区分大小写的字母 `a` 到 `z`、数字 `0` 到 `9`、下划线（`_`）和/或破折号（`-`）组成。第一个非破折号字符必须是一个字母。此外，在标识符开头不能有两个破折号。此外，标识符不能为 `none`、`unset`、`initial` 或 `inherit`。
 
-> **备注：** 当你在 `animation-*` 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
+> [!NOTE]
+> 当你在 `animation-*` 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/animation-play-state/index.md b/files/zh-cn/web/css/animation-play-state/index.md
index 2258aa2e1a40a9..ca1e60d4dd3587 100644
--- a/files/zh-cn/web/css/animation-play-state/index.md
+++ b/files/zh-cn/web/css/animation-play-state/index.md
@@ -36,7 +36,8 @@ animation-play-state: unset;
 - `paused`
   - : 当前**动画**已被**停止**。
 
-> **备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
+> [!NOTE]
+> 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 {{cssxref("animation-name")}} 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/animation-timing-function/index.md b/files/zh-cn/web/css/animation-timing-function/index.md
index 95694d064adac2..dec3bb9b5266dd 100644
--- a/files/zh-cn/web/css/animation-timing-function/index.md
+++ b/files/zh-cn/web/css/animation-timing-function/index.md
@@ -46,7 +46,8 @@ animation-timing-function: revert-layer;
 animation-timing-function: unset;
 ```
 
-> **备注：** 当你在 `animation-*` 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)。
+> [!NOTE]
+> 当你在 `animation-*` 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅[设置多个动画属性值](/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)。
 
 ### 值
 
diff --git a/files/zh-cn/web/css/appearance/index.md b/files/zh-cn/web/css/appearance/index.md
index 9f8debbab32de1..f369a817b945b1 100644
--- a/files/zh-cn/web/css/appearance/index.md
+++ b/files/zh-cn/web/css/appearance/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/appearance
 
 在标准化之前，这个属性允许将简单的元素显示为控件，例如按钮或复选框。这被认为是一个缺陷，现在鼓励开发者仅使用标准关键字。
 
-> **备注：** 如果你想在网站上使用此属性，应非常谨慎地进行测试。虽然它在大多数现代浏览器中得到支持，但实现方式不同。在旧的浏览器中，即使是关键字 `none` 对于不同浏览器中的所有表单元素也没有相同的效果，有些浏览器甚至不支持它。在最新的浏览器中差异较小。
+> [!NOTE]
+> 如果你想在网站上使用此属性，应非常谨慎地进行测试。虽然它在大多数现代浏览器中得到支持，但实现方式不同。在旧的浏览器中，即使是关键字 `none` 对于不同浏览器中的所有表单元素也没有相同的效果，有些浏览器甚至不支持它。在最新的浏览器中差异较小。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/background-image/index.md b/files/zh-cn/web/css/background-image/index.md
index 1fd28a48179e0b..cd0a7dd5b42662 100644
--- a/files/zh-cn/web/css/background-image/index.md
+++ b/files/zh-cn/web/css/background-image/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/background-image
 
 如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 `none`。
 
-> **备注：** 即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。
+> [!NOTE]
+> 即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/background-origin/index.md b/files/zh-cn/web/css/background-origin/index.md
index 61c4d7d8ad1ad6..dde1de731b09d5 100644
--- a/files/zh-cn/web/css/background-origin/index.md
+++ b/files/zh-cn/web/css/background-origin/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/background-origin
 
 注意：当使用 {{Cssxref("background-attachment")}} 为 fixed 时，该属性将被忽略不起作用。
 
-> **备注：** 假如{{cssxref("background")}}简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。
+> [!NOTE]
+> 假如{{cssxref("background")}}简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。
 
 {{cssinfo}}
 
diff --git a/files/zh-cn/web/css/background-position-x/index.md b/files/zh-cn/web/css/background-position-x/index.md
index 0ddf26729fe4bf..e038f2b8a0a535 100644
--- a/files/zh-cn/web/css/background-position-x/index.md
+++ b/files/zh-cn/web/css/background-position-x/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/background-position-x
 
 **`background-position-x`** CSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性 {{cssxref("background-origin")}}相关。更多信息请查看{{cssxref("background-position")}}属性，这个用的比较普遍。
 
-> **备注：** 这个属性的值会被后面声明的属性覆盖掉，如{{cssxref("background")}}和{{cssxref("background-position")}}等简写的属性。
+> [!NOTE]
+> 这个属性的值会被后面声明的属性覆盖掉，如{{cssxref("background")}}和{{cssxref("background-position")}}等简写的属性。
 
 {{cssinfo}}
 
diff --git a/files/zh-cn/web/css/background-size/index.md b/files/zh-cn/web/css/background-size/index.md
index 62d51c12b3b0de..dbd024e646abed 100644
--- a/files/zh-cn/web/css/background-size/index.md
+++ b/files/zh-cn/web/css/background-size/index.md
@@ -104,11 +104,13 @@ background-size: unset;
 
 位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。
 
-> **备注：** This behavior changed in Gecko 8.0. Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.
+> [!NOTE]
+> This behavior changed in Gecko 8.0. Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.
 
 由 {{cssxref("-moz-element")}} 生成的背景图片，(which actually match an element) are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion.
 
-> **备注：** This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.
+> [!NOTE]
+> This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.
 
 背景图片大小计算：
 
diff --git a/files/zh-cn/web/css/basic-shape/polygon/index.md b/files/zh-cn/web/css/basic-shape/polygon/index.md
index 3d54c12c534c7f..0a5a408c565b67 100644
--- a/files/zh-cn/web/css/basic-shape/polygon/index.md
+++ b/files/zh-cn/web/css/basic-shape/polygon/index.md
@@ -30,7 +30,8 @@ polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)
 
 `polygon()` 的参数用逗号和可选的空格分隔。第一个参数是一个可选的 [`<fill-rule>`](/zh-CN/docs/Web/SVG/Attribute/fill-rule) 值。其他参数是定义多边形的点。每个点是一对 x/y 坐标 {{cssxref("length-percentage")}} 值，用空格分隔，例如左/上角和右下角的“0 0”和“100% 100%”。
 
-> **备注：** SVG [`<polygon>`](/zh-CN/docs/Web/SVG/Element/polygon) 元素有单独的属性用于 [`fill-rule`](/zh-CN/docs/Web/SVG/Attribute/fill-rule) 和 [`points`](/zh-CN/docs/Web/SVG/Attribute/points)，而 `points` 在使用空格和逗号分隔时是灵活的。CSS `polygon()` 规则对分隔符严格执行。
+> [!NOTE]
+> SVG [`<polygon>`](/zh-CN/docs/Web/SVG/Element/polygon) 元素有单独的属性用于 [`fill-rule`](/zh-CN/docs/Web/SVG/Attribute/fill-rule) 和 [`points`](/zh-CN/docs/Web/SVG/Attribute/points)，而 `points` 在使用空格和逗号分隔时是灵活的。CSS `polygon()` 规则对分隔符严格执行。
 
 ### 参数
 
diff --git a/files/zh-cn/web/css/basic-shape/shape/index.md b/files/zh-cn/web/css/basic-shape/shape/index.md
index 70602abb0db444..b8591963c099cd 100644
--- a/files/zh-cn/web/css/basic-shape/shape/index.md
+++ b/files/zh-cn/web/css/basic-shape/shape/index.md
@@ -78,7 +78,8 @@ clip-path: shape(
 
     `to`：表示 `<coordinate-pair>` 相对于参考框的左上角的位置（“绝对”值）。
 
-    > **备注：** 如果 `<coordinate-pair>` 中的坐标以百分比形式指定，则该值相对于参考框的宽度或高度进行计算。
+    > [!NOTE]
+    > 如果 `<coordinate-pair>` 中的坐标以百分比形式指定，则该值相对于参考框的宽度或高度进行计算。
 
     可以指定 `<move-command>`、`<line-command>`、`<hv-line-command>`、`<curve-command>`、`<smooth-command>`、`<arc-command>` 和 `close` 作为 `<shape-command>`。
 
diff --git a/files/zh-cn/web/css/border-bottom-left-radius/index.md b/files/zh-cn/web/css/border-bottom-left-radius/index.md
index 2c407f6a9a3969..e51718dc32929b 100644
--- a/files/zh-cn/web/css/border-bottom-left-radius/index.md
+++ b/files/zh-cn/web/css/border-bottom-left-radius/index.md
@@ -17,7 +17,8 @@ l10n:
 
 背景（无论是图片还是颜色）都会被边框处裁剪，即便是圆角边框也不例外；裁剪的具体位置由 {{cssxref("background-clip")}} 属性的值来定义。
 
-> **备注：** 如果 `border-bottom-left-radius` CSS 属性之后的元素的 {{cssxref("border-radius")}} 简写属性中未设置此属性值，该属性值将会被[简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties)重置为其默认初始值。
+> [!NOTE]
+> 如果 `border-bottom-left-radius` CSS 属性之后的元素的 {{cssxref("border-radius")}} 简写属性中未设置此属性值，该属性值将会被[简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties)重置为其默认初始值。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/border-bottom-style/index.md b/files/zh-cn/web/css/border-bottom-style/index.md
index f66f847b82e70f..0935e3c8bbacc6 100644
--- a/files/zh-cn/web/css/border-bottom-style/index.md
+++ b/files/zh-cn/web/css/border-bottom-style/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
 
-> **备注：** 规范中没有定义不同样式的边框在边角处是如何连接的。
+> [!NOTE]
+> 规范中没有定义不同样式的边框在边角处是如何连接的。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/border-bottom-width/index.md b/files/zh-cn/web/css/border-bottom-width/index.md
index 447346defd2d49..4062a607974e62 100644
--- a/files/zh-cn/web/css/border-bottom-width/index.md
+++ b/files/zh-cn/web/css/border-bottom-width/index.md
@@ -39,7 +39,8 @@ border-bottom-width: unset;
     | `medium` |     | 中等边框 |
     | `thick`  |     | 粗边框   |
 
-    > **备注：** 因为规范没有具体定义每个关键字对应的宽度值，所以实际显示效果依赖于实现。但是宽度值的取值一定遵循 `thin ≤ medium ≤ thick` 的规律且在单文档中是常数。
+    > [!NOTE]
+    > 因为规范没有具体定义每个关键字对应的宽度值，所以实际显示效果依赖于实现。但是宽度值的取值一定遵循 `thin ≤ medium ≤ thick` 的规律且在单文档中是常数。
 
 ### Formal syntax
 
diff --git a/files/zh-cn/web/css/border-image-slice/index.md b/files/zh-cn/web/css/border-image-slice/index.md
index 63fe3893613d18..9cb869055874b0 100644
--- a/files/zh-cn/web/css/border-image-slice/index.md
+++ b/files/zh-cn/web/css/border-image-slice/index.md
@@ -11,7 +11,7 @@ slug: Web/CSS/border-image-slice
 
 切分过程会将图像分割为 9 个区域：四个角、四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
 
-[![The nine regions defined by the border-image or border-image-slice properties](border-image-slice.png)](border-image-slice.png)
+![由 border-image 或 border-image-slice 属性定义的九个区域](border-image-slice.png)
 
 上图说明了每个区域的位置。
 
diff --git a/files/zh-cn/web/css/border-image/index.md b/files/zh-cn/web/css/border-image/index.md
index 78e8b6392c7477..aa29724149a0b5 100644
--- a/files/zh-cn/web/css/border-image/index.md
+++ b/files/zh-cn/web/css/border-image/index.md
@@ -11,7 +11,8 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/border-image.html")}}
 
-> **备注：** 你应该另外指定 {{cssxref("border-style")}} 以防边框图像没能加载。虽然规范并没有严格要求这一点，但当 {{cssxref("border-style")}} 为 `none` 或 {{cssxref("border-width")}} 为 `0` 时，某些浏览器不会渲染边框图像。
+> [!NOTE]
+> 你应该另外指定 {{cssxref("border-style")}} 以防边框图像没能加载。虽然规范并没有严格要求这一点，但当 {{cssxref("border-style")}} 为 `none` 或 {{cssxref("border-width")}} 为 `0` 时，某些浏览器不会渲染边框图像。
 
 ## 成分属性
 
@@ -48,7 +49,8 @@ border-image: unset;
 
 `border-image` 属性可以用下面列出的 1 到 5 个值中的任意值指定。
 
-> **备注：** 如果 {{cssxref("border-image-source")}} 的[计算值](/zh-CN/docs/Web/CSS/computed_value)为 `none`，或图像无法显示，则将显示 {{cssxref("border-style")}}。
+> [!NOTE]
+> 如果 {{cssxref("border-image-source")}} 的[计算值](/zh-CN/docs/Web/CSS/computed_value)为 `none`，或图像无法显示，则将显示 {{cssxref("border-style")}}。
 
 ### 值
 
diff --git a/files/zh-cn/web/css/border-left-style/index.md b/files/zh-cn/web/css/border-left-style/index.md
index 12338a83d652ae..59808eec0b4ea7 100644
--- a/files/zh-cn/web/css/border-left-style/index.md
+++ b/files/zh-cn/web/css/border-left-style/index.md
@@ -9,7 +9,8 @@ The **`border-left-style`** [CSS](/zh-CN/docs/CSS) property sets the line style
 
 {{EmbedInteractiveExample("pages/css/border-left-style.html")}}
 
-> **备注：** The specification doesn't define how borders of different styles connect in the corners.
+> [!NOTE]
+> The specification doesn't define how borders of different styles connect in the corners.
 
 ## Syntax
 
diff --git a/files/zh-cn/web/css/border-left-width/index.md b/files/zh-cn/web/css/border-left-width/index.md
index 5adef27c2e83f6..2dcf614de05659 100644
--- a/files/zh-cn/web/css/border-left-width/index.md
+++ b/files/zh-cn/web/css/border-left-width/index.md
@@ -38,7 +38,8 @@ border-left-width: unset;
     - `medium` 一个中等边框
     - `thick` 一个粗边框
 
-    > **备注：** 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 `thin ≤ medium ≤ thick`, 在单独文档中这些值内部是恒定不变的。
+    > [!NOTE]
+    > 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 `thin ≤ medium ≤ thick`, 在单独文档中这些值内部是恒定不变的。
 
 ### 形式语法
 
diff --git a/files/zh-cn/web/css/border-left/index.md b/files/zh-cn/web/css/border-left/index.md
index 3002e79308388c..ae0cf3aa4a4d60 100644
--- a/files/zh-cn/web/css/border-left/index.md
+++ b/files/zh-cn/web/css/border-left/index.md
@@ -15,7 +15,8 @@ border-left: medium dashed green;
 
 这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。
 
-> **备注：** 和 CSS 所有的缩写属性一样，border-left 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......
+> [!NOTE]
+> 和 CSS 所有的缩写属性一样，border-left 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......
 >
 > ```css
 > border-left-style: dotted;
diff --git a/files/zh-cn/web/css/border-right-style/index.md b/files/zh-cn/web/css/border-right-style/index.md
index c6ad0a3926f912..3986f3530fa050 100644
--- a/files/zh-cn/web/css/border-right-style/index.md
+++ b/files/zh-cn/web/css/border-right-style/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/border-right-style
 
 {{EmbedInteractiveExample("pages/css/border-right-style.html")}}
 
-> **备注：** 这个 css 没有定义不同样式的边界之间如何拼接。
+> [!NOTE]
+> 这个 css 没有定义不同样式的边界之间如何拼接。
 
 ## Syntax
 
diff --git a/files/zh-cn/web/css/border-right-width/index.md b/files/zh-cn/web/css/border-right-width/index.md
index ac8e8fcc9eb6dd..cd80544503892f 100644
--- a/files/zh-cn/web/css/border-right-width/index.md
+++ b/files/zh-cn/web/css/border-right-width/index.md
@@ -42,7 +42,8 @@ border-right-width: unset;
     - `medium`
     - `thick`
 
-> **备注：** 因为规范没有定义每个关键字表示的确切宽度，所以使用其中的某个关键字所得到的精确结果是特定于实现的。不过，它们通常遵循 `thin ≤ medium ≤ thick` 的模式，且这些值在单独的文档中是固定不变的。
+> [!NOTE]
+> 因为规范没有定义每个关键字表示的确切宽度，所以使用其中的某个关键字所得到的精确结果是特定于实现的。不过，它们通常遵循 `thin ≤ medium ≤ thick` 的模式，且这些值在单独的文档中是固定不变的。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/border-right/index.md b/files/zh-cn/web/css/border-right/index.md
index 36573abd489e03..c6994131b868d2 100644
--- a/files/zh-cn/web/css/border-right/index.md
+++ b/files/zh-cn/web/css/border-right/index.md
@@ -13,7 +13,8 @@ border-right: 2px dotted;
 border-right: medium dashed green;
 ```
 
-> **备注：** 和 CSS 所有的缩写属性一样，border-`right` 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......
+> [!NOTE]
+> 和 CSS 所有的缩写属性一样，border-`right` 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......
 >
 > ```css
 > border-right-style: dotted;
diff --git a/files/zh-cn/web/css/border-top-left-radius/index.md b/files/zh-cn/web/css/border-top-left-radius/index.md
index 015f718ab8f0aa..ca4e5921847b49 100644
--- a/files/zh-cn/web/css/border-top-left-radius/index.md
+++ b/files/zh-cn/web/css/border-top-left-radius/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/border-top-left-radius
 
 盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；剪切的额外定位通过另一个 CSS 属性"background-clip"来定义。
 
-> **备注：** 在 border-top-left-radius 属性值之后，如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过[简写属性](/zh-CN/CSS/Shorthand_properties)重新设置成它的初始值。
+> [!NOTE]
+> 在 border-top-left-radius 属性值之后，如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过[简写属性](/zh-CN/CSS/Shorthand_properties)重新设置成它的初始值。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/border-top-right-radius/index.md b/files/zh-cn/web/css/border-top-right-radius/index.md
index 99a5ec403e0056..53531b5bcbfa0a 100644
--- a/files/zh-cn/web/css/border-top-right-radius/index.md
+++ b/files/zh-cn/web/css/border-top-right-radius/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/border-top-right-radius
 
 一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个 CSS 属性"background-clip"来定义。
 
-> **备注：** 在 border-top-radius-radiu 属性值之后，如果作用在一个元素上没有设置“border-radius”简写属性，那么这个属性值就会通过[简写属性](/zh-CN/CSS/Shorthand_properties)重新设置成它的初始值。
+> [!NOTE]
+> 在 border-top-radius-radiu 属性值之后，如果作用在一个元素上没有设置“border-radius”简写属性，那么这个属性值就会通过[简写属性](/zh-CN/CSS/Shorthand_properties)重新设置成它的初始值。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/border-top-style/index.md b/files/zh-cn/web/css/border-top-style/index.md
index 225d517531fafa..05690ae064c8b2 100644
--- a/files/zh-cn/web/css/border-top-style/index.md
+++ b/files/zh-cn/web/css/border-top-style/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/border-top-style
 
 {{EmbedInteractiveExample("pages/css/border-top-style.html")}}
 
-> **备注：** 此规范并未定义不同样式的边框边角处如何连接。
+> [!NOTE]
+> 此规范并未定义不同样式的边框边角处如何连接。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/border-top-width/index.md b/files/zh-cn/web/css/border-top-width/index.md
index c857d49d95e8f5..6bd16965db663d 100644
--- a/files/zh-cn/web/css/border-top-width/index.md
+++ b/files/zh-cn/web/css/border-top-width/index.md
@@ -39,7 +39,8 @@ border-top-width: unset;
     | `medium` |     | A medium border |
     | `thick`  |     | A thick border  |
 
-    > **备注：** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.
+    > [!NOTE]
+    > Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.
 
 ### Formal syntax
 
diff --git a/files/zh-cn/web/css/border-width/index.md b/files/zh-cn/web/css/border-width/index.md
index ec3351d4abafdc..b86d9c57db00f2 100644
--- a/files/zh-cn/web/css/border-width/index.md
+++ b/files/zh-cn/web/css/border-width/index.md
@@ -66,7 +66,8 @@ border-width: unset;
     - `medium`
     - `thick`
 
-> **备注：** 由于规范中没有明确定义每个关键字所表示的确切厚度，因此使用其中一个关键字的确切结果取决于具体实现。尽管如此，它们始终遵循 `thin ≤ medium ≤ thick` 这一模式，并且这些值在同一文档中是恒定的。
+> [!NOTE]
+> 由于规范中没有明确定义每个关键字所表示的确切厚度，因此使用其中一个关键字的确切结果取决于具体实现。尽管如此，它们始终遵循 `thin ≤ medium ≤ thick` 这一模式，并且这些值在同一文档中是恒定的。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/border/index.md b/files/zh-cn/web/css/border/index.md
index 32db3def107023..5cab26d3f58514 100644
--- a/files/zh-cn/web/css/border/index.md
+++ b/files/zh-cn/web/css/border/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/border
 
 和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置 border 对{{cssxref("border-image")}}属性的影响，虽然 border 属性不能设置这个属性，但会把该属性重置为初始值 none。这使得我们可以用 border 属性去重置整个样式表中的 border 设置。因为 W3C 计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。
 
-> **备注：** 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 boder 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。
+> [!NOTE]
+> 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 boder 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。
 
 ### Borders vs. outlines
 
@@ -45,7 +46,8 @@ border: unset;
 
 可以使用下面列出的一个，两个或三个值来指定 `border` 属性。值的顺序无关紧要。
 
-> **备注：** 如果边框的样式未定义，它将不可见。这是因为样式默认为 none。
+> [!NOTE]
+> 如果边框的样式未定义，它将不可见。这是因为样式默认为 none。
 
 ### 取值
 
diff --git a/files/zh-cn/web/css/box-sizing/index.md b/files/zh-cn/web/css/box-sizing/index.md
index 636f34d7a046a2..145a26a41f90ce 100644
--- a/files/zh-cn/web/css/box-sizing/index.md
+++ b/files/zh-cn/web/css/box-sizing/index.md
@@ -18,7 +18,8 @@ box-sizing 属性可以被用来调整这些表现：
 
 **译者注：** `border-box`不包含`margin`
 
-> **备注：** 对于新的 web 站点，你可能希望首先将 box-sizing 设置为 border-box，如下所示：
+> [!NOTE]
+> 对于新的 web 站点，你可能希望首先将 box-sizing 设置为 border-box，如下所示：
 >
 > ```css
 > * {
diff --git a/files/zh-cn/web/css/break-after/index.md b/files/zh-cn/web/css/break-after/index.md
index d72caddf433c4e..7c0c3902a15525 100644
--- a/files/zh-cn/web/css/break-after/index.md
+++ b/files/zh-cn/web/css/break-after/index.md
@@ -109,7 +109,8 @@ For compatibility reasons, the legacy {{cssxref("page-break-after")}} property s
 | `avoid`          | `avoid`     |
 | `always`         | `page`      |
 
-> **备注：** The `always` value of `page-break-*` was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to `page`, rather than the `always` value in the Level 4 spec.
+> [!NOTE]
+> The `always` value of `page-break-*` was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to `page`, rather than the `always` value in the Level 4 spec.
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/clear/index.md b/files/zh-cn/web/css/clear/index.md
index f04fa4eaa6055b..33a593cb61469d 100644
--- a/files/zh-cn/web/css/clear/index.md
+++ b/files/zh-cn/web/css/clear/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/clear
 
 要被清除的相关浮动元素指的是在相同[块级格式化上下文](/zh-CN/docs/CSS/block_formatting_context)中的前置浮动。
 
-> **备注：** 如果一个元素里只有浮动元素，那它的高度会是 0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做**clearfix**，即`clear`一个不浮动的 {{cssxref("::after")}} [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)。
+> [!NOTE]
+> 如果一个元素里只有浮动元素，那它的高度会是 0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做**clearfix**，即`clear`一个不浮动的 {{cssxref("::after")}} [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)。
 >
 > ```css
 > #container::after {
diff --git a/files/zh-cn/web/css/clip-path/index.md b/files/zh-cn/web/css/clip-path/index.md
index 35cc0fb27cb173..3aa1fc242891a3 100644
--- a/files/zh-cn/web/css/clip-path/index.md
+++ b/files/zh-cn/web/css/clip-path/index.md
@@ -90,7 +90,8 @@ clip-path: unset;
 - `none`
   - : 不创建剪切路径。
 
-> **备注：** CSS 计算值不为 **`none`** 时，会创建新的[层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)，就像 CSS {{cssxref("opacity")}} 的值不为 `1` 时那样。
+> [!NOTE]
+> CSS 计算值不为 **`none`** 时，会创建新的[层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)，就像 CSS {{cssxref("opacity")}} 的值不为 `1` 时那样。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/clip/index.md b/files/zh-cn/web/css/clip/index.md
index 8eef5ea83d38ea..3f0d23b0c58692 100644
--- a/files/zh-cn/web/css/clip/index.md
+++ b/files/zh-cn/web/css/clip/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/clip
 
 `clip` 属性定义了元素的哪一部分是可见的。`clip` 属性只适用于 {{ cssxref("position","position:absolute") }} 的元素。
 
-> **警告：** 这个属性已被废弃。建议使用 {{cssxref("clip-path")}} 。
+> [!WARNING]
+> 这个属性已被废弃。建议使用 {{cssxref("clip-path")}} 。
 
 {{cssinfo}}
 
diff --git a/files/zh-cn/web/css/color_value/hsl/index.md b/files/zh-cn/web/css/color_value/hsl/index.md
index a55f52a9c5915b..5032159a61ea08 100644
--- a/files/zh-cn/web/css/color_value/hsl/index.md
+++ b/files/zh-cn/web/css/color_value/hsl/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/color_value/hsl
 
 **`hsl()`** 函数标记根据其*色相*、*饱和度*和*明度*来表达 {{glossary("RGB", "sRGB")}} 颜色。可选的 _alpha_ 成分代表了颜色的透明度。
 
-> **备注：** 旧版的 `hsla()` 语法是 `hsl()` 的别称，接收相同的参数，行为也是相同的。
+> [!NOTE]
+> 旧版的 `hsla()` 语法是 `hsl()` 的别称，接收相同的参数，行为也是相同的。
 
 {{EmbedInteractiveExample("pages/css/function-hsl.html")}}
 
@@ -35,7 +36,8 @@ hsl(120deg 75% 25% / 0.6)
 - `A` {{optional_inline}}
   - : {{CSSXref("&lt;alpha-value&gt;")}} 或者关键字 `none`，其中数字 `1` 代表 `100%`（完全不透明）。
 
-> **备注：** 参见[缺失颜色成分](/zh-CN/docs/Web/CSS/color_value#缺失颜色成分) 以了解 `none` 的效果。
+> [!NOTE]
+> 参见[缺失颜色成分](/zh-CN/docs/Web/CSS/color_value#缺失颜色成分) 以了解 `none` 的效果。
 
 ### 形式语法
 
diff --git a/files/zh-cn/web/css/color_value/index.md b/files/zh-cn/web/css/color_value/index.md
index f6114db6b393c1..a99b0b322dee15 100644
--- a/files/zh-cn/web/css/color_value/index.md
+++ b/files/zh-cn/web/css/color_value/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/color_value
 
 [CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) **`<color>`** 表示一个颜色。颜色可以包括一个 [alpha 通道](https://zh.wikipedia.org/wiki/Alpha合成)_透明度值_，来表明颜色如何与背景色[混合（composite）](http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending)。
 
-> **备注：** 尽管 CSS 颜色值（`<color>`）被精确定义，但在不同的输出设备上仍然有可能表现不一致（甚至区别很大）。这是因为大多数设备不是经校准的，而且有些浏览器不支持输出设备的[色彩配置（color profile）](https://zh.wikipedia.org/wiki/ICC色彩特性文件)。
+> [!NOTE]
+> 尽管 CSS 颜色值（`<color>`）被精确定义，但在不同的输出设备上仍然有可能表现不一致（甚至区别很大）。这是因为大多数设备不是经校准的，而且有些浏览器不支持输出设备的[色彩配置（color profile）](https://zh.wikipedia.org/wiki/ICC色彩特性文件)。
 
 ## 语法
 
@@ -109,7 +110,8 @@ color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
 color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
 ```
 
-> **备注：** 如果两个颜色都缺失这个成分，那么这个成分在插值后也是缺失的。
+> [!NOTE]
+> 如果两个颜色都缺失这个成分，那么这个成分在插值后也是缺失的。
 
 #### 在不同空间内插值：相似成分
 
diff --git a/files/zh-cn/web/css/color_value/lab/index.md b/files/zh-cn/web/css/color_value/lab/index.md
index 7ba19eadbee98a..63a23cb814bd95 100644
--- a/files/zh-cn/web/css/color_value/lab/index.md
+++ b/files/zh-cn/web/css/color_value/lab/index.md
@@ -27,7 +27,8 @@ lab(52.2345% 40.1645 59.9971 / .5);
 
   - `A`（alpha）可为介于 `0` 和 `1` 之间的 {{CSSXref("&lt;number&gt;")}} 或 {{CSSXref("&lt;percentage&gt;")}}，此处数值 `1` 对应 `100%`（完全不透明）。
 
-> **备注：** 在 CSS 中，通常当百分比值有等价数值时，`100%` 等于数值 `1`。此处注意 `100%` 对于 `L` 值等于数值 `100`，对于 `a` 值和 `b` 值等于 `125`。
+> [!NOTE]
+> 在 CSS 中，通常当百分比值有等价数值时，`100%` 等于数值 `1`。此处注意 `100%` 对于 `L` 值等于数值 `100`，对于 `a` 值和 `b` 值等于 `125`。
 
 ### 形式语法
 
diff --git a/files/zh-cn/web/css/color_value/lch/index.md b/files/zh-cn/web/css/color_value/lch/index.md
index 37d3e0b4e058d0..7259c4ad3aee9a 100644
--- a/files/zh-cn/web/css/color_value/lch/index.md
+++ b/files/zh-cn/web/css/color_value/lch/index.md
@@ -27,7 +27,8 @@ lch(52.2345% 72.2 56.2 / .5);
 
   - `A`（alpha）可为介于 `0` 和 `1` 之间的 {{CSSXref("&lt;number&gt;")}} 或 {{CSSXref("&lt;percentage&gt;")}}，此处数值 `1` 对应 `100%`（完全不透明）。
 
-> **备注：** 在 CSS 中，通常当百分比值有等价数值时，`100%` 等于数值 `1`。此处注意 `100%` 对于 `L` 值等于数值 `100`，对于 `C` 值等于 `150`。
+> [!NOTE]
+> 在 CSS 中，通常当百分比值有等价数值时，`100%` 等于数值 `1`。此处注意 `100%` 对于 `L` 值等于数值 `100`，对于 `C` 值等于 `150`。
 
 ### 形式语法
 
diff --git a/files/zh-cn/web/css/color_value/oklab/index.md b/files/zh-cn/web/css/color_value/oklab/index.md
index 00e12f1c1cce73..96b7358ae70e2a 100644
--- a/files/zh-cn/web/css/color_value/oklab/index.md
+++ b/files/zh-cn/web/css/color_value/oklab/index.md
@@ -26,7 +26,8 @@ oklab(59.69% 0.1007 0.1191);
 oklab(59.69% 0.1007 0.1191 / 0.5);
 ```
 
-> **备注：** oklab() 函数**不**像其他某些颜色函数一样支持以逗号分隔其值，且可选的 alpha 值在指定时需置于正斜杠（`/`）之后。
+> [!NOTE]
+> oklab() 函数**不**像其他某些颜色函数一样支持以逗号分隔其值，且可选的 alpha 值在指定时需置于正斜杠（`/`）之后。
 
 ### 取值
 
diff --git a/files/zh-cn/web/css/color_value/rgb/index.md b/files/zh-cn/web/css/color_value/rgb/index.md
index a4dce67a6715cb..19fce189d34dfb 100644
--- a/files/zh-cn/web/css/color_value/rgb/index.md
+++ b/files/zh-cn/web/css/color_value/rgb/index.md
@@ -45,7 +45,8 @@ rgb(R G B[ / A])
 - `A` {{optional_inline}}
   - : {{CSSXref("&lt;alpha-value&gt;")}} 表示输出颜色的 alpha 通道值，其中数字 `0` 对应于 `0%`（完全透明），`1` 对应 `100%`（完全不透明），关键字 `none` 用于显式地指定无 alpha 通道。未明确指定 `A` 通道值，则会默认为 100%。若包含此值，需在值的前面添加斜杠（`/`）。
 
-> **备注：** 参见[缺失颜色分量](/zh-CN/docs/Web/CSS/color_value#缺失颜色分量)以了解 `none` 的效果。
+> [!NOTE]
+> 参见[缺失颜色分量](/zh-CN/docs/Web/CSS/color_value#缺失颜色分量)以了解 `none` 的效果。
 
 #### 相对值语法
 
@@ -62,9 +63,11 @@ rgb(from <color> R G B[ / A])
 - `A` {{optional_inline}}
   - : {{CSSXref("&lt;alpha-value&gt;")}} 表示输出颜色的 alpha 通道值，其中数字 `0` 对应于 `0%`（完全透明），`1` 对应 `100%`（完全不透明），关键字 `none` 用于显式地指定无 alpha 通道。未明确指定 `A` 通道值，则会默认为原始颜色的 alpha 通道值。若包含此值，需在值的前面添加斜杠（`/`）。
 
-> **备注：** 别名 `rgba()` 也可用于输出指定原始颜色的相对颜色，当使用 `rgba()` 输出相对颜色时，必须使用无逗号的现代语法。
+> [!NOTE]
+> 别名 `rgba()` 也可用于输出指定原始颜色的相对颜色，当使用 `rgba()` 输出相对颜色时，必须使用无逗号的现代语法。
 
-> **备注：** 要完全启用可见颜色的全光谱表示，相对 `rgb()` 颜色函数的输出会被序列化为 `color(srgb)`。这意味着通过 {{DOMxRef("HTMLElement.style")}} 属性或 {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} 方法查询输出颜色值时，会以 [`color(srgb ...)`](/zh-CN/docs/Web/CSS/color_value/color) 值返回输出颜色。
+> [!NOTE]
+> 要完全启用可见颜色的全光谱表示，相对 `rgb()` 颜色函数的输出会被序列化为 `color(srgb)`。这意味着通过 {{DOMxRef("HTMLElement.style")}} 属性或 {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} 方法查询输出颜色值时，会以 [`color(srgb ...)`](/zh-CN/docs/Web/CSS/color_value/color) 值返回输出颜色。
 
 #### 定义相对颜色输出通道分量
 
@@ -107,7 +110,8 @@ rgb(from hsl(0 100% 50%) r 80 80)
 
 最终输出颜色为 `rgb(255 80 80)` 在 sRGB 颜色空间中的等价——`color(srgb 1 0.313726 0.313726)`。
 
-> **备注：** 如上所述，如果输出颜色使用了与原始颜色不同的颜色模型，则原始颜色会在后台转换为与输出颜色相同的模型或空间，从而可以以兼容的方式表示（即使用相同的通道）。
+> [!NOTE]
+> 如上所述，如果输出颜色使用了与原始颜色不同的颜色模型，则原始颜色会在后台转换为与输出颜色相同的模型或空间，从而可以以兼容的方式表示（即使用相同的通道）。
 
 在本节之前我们看到的示例中，均未明确指定 alpha 通道值用于原始颜色或输出颜色。如果未指定输出颜色的 alpha 通道值，默认为与原始颜色的 alpha 通道值相同。如果未指定原始颜色的 alpha 通道（并且它不是相对颜色），则默认为 `1`。因此，对于上述示例，原始颜色和输出颜色的 alpha 通道值都为 `1`
 
@@ -125,7 +129,8 @@ rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
 rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))
 ```
 
-> **备注：** 因为原始颜色通道值会被解析为 `<number>` 值，所以在使用它们进行计算时，即使通道能够接受 `<percenter>`、`<angle>` 或其他值类型，我们也必须使用 `<number>` 进行运算。例如在 `<number>` 中添加 `<percenter>` 是不起作用的。
+> [!NOTE]
+> 因为原始颜色通道值会被解析为 `<number>` 值，所以在使用它们进行计算时，即使通道能够接受 `<percenter>`、`<angle>` 或其他值类型，我们也必须使用 `<number>` 进行运算。例如在 `<number>` 中添加 `<percenter>` 是不起作用的。
 
 ### 形式语法
 
diff --git a/files/zh-cn/web/css/column-fill/index.md b/files/zh-cn/web/css/column-fill/index.md
index e5eb57bfcb7e7b..0c509957d1eec2 100644
--- a/files/zh-cn/web/css/column-fill/index.md
+++ b/files/zh-cn/web/css/column-fill/index.md
@@ -94,7 +94,8 @@ p.fill-balance {
 
 {{Compat}}
 
-> **警告：** 由于规范中的一些问题尚未解决，`column-fill` 在不同浏览器之间存在一些交互操作性问题和错误。
+> [!WARNING]
+> 由于规范中的一些问题尚未解决，`column-fill` 在不同浏览器之间存在一些交互操作性问题和错误。
 >
 > 特别是在使用 `column-fill: auto` 按顺序填充列时，Chrome 浏览器只有在多列容器具有区块尺寸（例如水平书写模式下的高度）时才会参考此属性。而 Firefox 浏览器则会始终查询该属性，因此在没有尺寸的情况下，会在第一列填充所有内容。
 
diff --git a/files/zh-cn/web/css/column-rule/index.md b/files/zh-cn/web/css/column-rule/index.md
index af138f95dfee2c..d0666fe91e2143 100644
--- a/files/zh-cn/web/css/column-rule/index.md
+++ b/files/zh-cn/web/css/column-rule/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/column-rule
 
 该[简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties)使用简单方便的声明形式将各个 `column-rule-*` 属性放在了一起：{{Cssxref("column-rule-width")}}、{{Cssxref("column-rule-style")}} 和 {{Cssxref("column-rule-color")}}。
 
-> **备注：** 和所有简写属性一样，任何没有指定的单独值会设置为相应初始值（可能会覆盖非简写属性设置的值）。
+> [!NOTE]
+> 和所有简写属性一样，任何没有指定的单独值会设置为相应初始值（可能会覆盖非简写属性设置的值）。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/contain/index.md b/files/zh-cn/web/css/contain/index.md
index 3144b0f8ab98d1..7a05b74a092b68 100644
--- a/files/zh-cn/web/css/contain/index.md
+++ b/files/zh-cn/web/css/contain/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/contain
 
 在有独立元素组的页面上使用 `contain` 属性较为有用，此属性可以防止元素内部在其包围盒外产生副作用。
 
-> **备注：** 为此属性使用 `layout`、`paint`、`strict` 或 `content` 值将创建：
+> [!NOTE]
+> 为此属性使用 `layout`、`paint`、`strict` 或 `content` 值将创建：
 >
 > 1. 新的[包含区块](/zh-CN/docs/Web/CSS/Containing_block)（针对其 {{CSSXref("position")}} 属性为 `absolute` 或 `fixed` 的后代元素）。
 > 2. 新的[层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)。
diff --git a/files/zh-cn/web/css/containing_block/index.md b/files/zh-cn/web/css/containing_block/index.md
index 3f372137c71638..551471986a55c0 100644
--- a/files/zh-cn/web/css/containing_block/index.md
+++ b/files/zh-cn/web/css/containing_block/index.md
@@ -39,7 +39,8 @@ slug: Web/CSS/Containing_block
    4. {{cssxref("contain")}} 的值是 `layout`、`paint`、`strict` 或 `content`（例如：`contain: paint;`）
    5. {{cssxref("backdrop-filter")}} 的值不是 `none`（例如：`backdrop-filter: blur(10px);`）
 
-> **备注：** 根元素（{{HTMLElement("html")}}）所在的包含块是一个被称为**初始包含块**的矩形。它具有视口（对于连续媒体）或页面区域（对于分页媒体）的尺寸。
+> [!NOTE]
+> 根元素（{{HTMLElement("html")}}）所在的包含块是一个被称为**初始包含块**的矩形。它具有视口（对于连续媒体）或页面区域（对于分页媒体）的尺寸。
 
 > **备注：** `perspective` 和 `filter` 属性对形成包含块的作用存在浏览器之间的不一致性。
 
@@ -50,7 +51,8 @@ slug: Web/CSS/Containing_block
 1. {{cssxref("height")}}、{{cssxref("top")}} 及 {{cssxref("bottom")}} 属性根据包含块的 `height` 计算百分比值。
 2. {{cssxref("width")}}、{{cssxref("left")}}、{{cssxref("right")}}、{{cssxref("padding")}} 和 {{cssxref("margin")}} 属性根据包含块的 `width` 计算百分比值。
 
-> **备注：** 一个**块容器**（比如 inline-block、block 或 list-item 元素）要么只包含参与行级格式化上下文的行级盒子，要么只包含参与块级格式化上下文的块级盒子。只有包含块级或行级盒子的元素才是块容器。
+> [!NOTE]
+> 一个**块容器**（比如 inline-block、block 或 list-item 元素）要么只包含参与行级格式化上下文的行级盒子，要么只包含参与块级格式化上下文的块级盒子。只有包含块级或行级盒子的元素才是块容器。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/content-visibility/index.md b/files/zh-cn/web/css/content-visibility/index.md
index d8a7149ad799e0..7223083cd29591 100644
--- a/files/zh-cn/web/css/content-visibility/index.md
+++ b/files/zh-cn/web/css/content-visibility/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/content-visibility
 
 [CSS](/zh-CN/docs/Web/CSS) 属性 **`content-visibility`** 控制元素是否渲染其内容，以及施加一组强局限，由此允许用户代理有机会在不需要时省略大片的布局和渲染工作。此属性使用户代理得以在不需要时跳过元素的渲染工作（包括布局和绘制）——由此使页面的初始加载明显变快。
 
-> **备注：** 对于设置了 `content-visibility: auto` 的任意元素，在其渲染工作开始或不再被跳过时将触发 {{DOMXref("element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} 事件。此事件为应用代码在不需要时开始或停止渲染过程（如在 {{HTMLElement("canvas")}} 上绘画）提供了便利，进而节约了处理能力。
+> [!NOTE]
+> 对于设置了 `content-visibility: auto` 的任意元素，在其渲染工作开始或不再被跳过时将触发 {{DOMXref("element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} 事件。此事件为应用代码在不需要时开始或停止渲染过程（如在 {{HTMLElement("canvas")}} 上绘画）提供了便利，进而节约了处理能力。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/counter-reset/index.md b/files/zh-cn/web/css/counter-reset/index.md
index 26f67429dd571a..fc86626a685566 100644
--- a/files/zh-cn/web/css/counter-reset/index.md
+++ b/files/zh-cn/web/css/counter-reset/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/counter-reset
 
 {{EmbedInteractiveExample("pages/css/counter-reset.html")}}
 
-> **备注：** 计数器的值能够通过 CSS 属性 {{cssxref("counter-increment")}} 控制递增或递减。
+> [!NOTE]
+> 计数器的值能够通过 CSS 属性 {{cssxref("counter-increment")}} 控制递增或递减。
 
 ## 语法
 
@@ -42,7 +43,8 @@ counter-reset: unset;
 - {{cssxref("custom-ident", "&lt;custom-ident&gt;")}}
   - : 要递增的计数器的名称。
 
-> **备注：** 该名称由不区分大小写的字母 a 到 z，数字 0 到 9，下划线（\_）和 / 或短划线（ - ）的组合组成，并且第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号）。此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none，unset，initial 或 inherit。
+> [!NOTE]
+> 该名称由不区分大小写的字母 a 到 z，数字 0 到 9，下划线（\_）和 / 或短划线（ - ）的组合组成，并且第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号）。此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none，unset，initial 或 inherit。
 
 - {{cssxref("&lt;integer&gt;")}}
   - : 每次出现元素时将计数器重置为的值。如果不指定，则默认为 `0`。
diff --git a/files/zh-cn/web/css/counter-set/index.md b/files/zh-cn/web/css/counter-set/index.md
index a2be4af52d91a3..7835976a1374ab 100644
--- a/files/zh-cn/web/css/counter-set/index.md
+++ b/files/zh-cn/web/css/counter-set/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/counter-set
 
 {{EmbedInteractiveExample("pages/css/counter-set.html")}}
 
-> **备注：** 计数器的值可以通过 {{cssxref("counter-increment")}} CSS 属性进行递增或递减。
+> [!NOTE]
+> 计数器的值可以通过 {{cssxref("counter-increment")}} CSS 属性进行递增或递减。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/css_animated_properties/index.md b/files/zh-cn/web/css/css_animated_properties/index.md
index 0341443551cb93..d145cd5b35fe01 100644
--- a/files/zh-cn/web/css/css_animated_properties/index.md
+++ b/files/zh-cn/web/css/css_animated_properties/index.md
@@ -7,9 +7,11 @@ slug: Web/CSS/CSS_animated_properties
 
 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations)和[过渡](/zh-CN/docs/Web/CSS/CSS_transitions)依赖于**动画性**属性这一概念，且所有 CSS 属性除非另有规定否则均有动画性。每个属性的*动画类型*决定了此属性的值如何[结合](https://drafts.csswg.org/css-values/#combining-values)——插值、相加或累积。过渡仅涉及插值，而动画可能使用所有三种结合方法。
 
-> **备注：** 每个 CSS 属性的动画类型列于其“形式定义”表格中（如 {{CSSXref("color", "", "#形式定义")}}）。
+> [!NOTE]
+> 每个 CSS 属性的动画类型列于其“形式定义”表格中（如 {{CSSXref("color", "", "#形式定义")}}）。
 
-> **备注：** 每个 CSS 数据类型的插值方法描述于其“插值”一节中（如 {{CSSXref("&lt;length&gt;", "", "#插值")}}）。
+> [!NOTE]
+> 每个 CSS 数据类型的插值方法描述于其“插值”一节中（如 {{CSSXref("&lt;length&gt;", "", "#插值")}}）。
 
 ## 动画类型
 
@@ -19,7 +21,8 @@ slug: Web/CSS/CSS_animated_properties
 
   - : 此属性无动画性。此属性在列于动画关键帧中时不被处理，且不受过渡影响。
 
-    > **备注：** 仅针对无动画性属性的动画效果仍将表现出动画效果的通常行为（如触发 {{DOMXref("Element/animationstart_event", "animationstart")}} 事件）。
+    > [!NOTE]
+    > 仅针对无动画性属性的动画效果仍将表现出动画效果的通常行为（如触发 {{DOMXref("Element/animationstart_event", "animationstart")}} 事件）。
 
 - 离散
 
diff --git a/files/zh-cn/web/css/css_animations/using_css_animations/index.md b/files/zh-cn/web/css/css_animations/using_css_animations/index.md
index a4e6469d018796..be2c1048eb9ca1 100644
--- a/files/zh-cn/web/css/css_animations/using_css_animations/index.md
+++ b/files/zh-cn/web/css/css_animations/using_css_animations/index.md
@@ -46,7 +46,8 @@ slug: Web/CSS/CSS_animations/Using_CSS_animations
 
 ## 示例
 
-> **备注：** 这里的示例没有在 CSS 动画属性上使用任何前缀，Webkit 内核浏览器或者早期版本浏览器可能需要前缀，下面的实例包含了`-webkit-`前缀。
+> [!NOTE]
+> 这里的示例没有在 CSS 动画属性上使用任何前缀，Webkit 内核浏览器或者早期版本浏览器可能需要前缀，下面的实例包含了`-webkit-`前缀。
 
 ### 文本滑过浏览器窗口
 
diff --git a/files/zh-cn/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index 1881760f87a979..2bcaa2b1beb366 100644
--- a/files/zh-cn/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables
 
 [盒子对齐规范](/zh-CN/docs/Web/CSS/CSS_box_alignment)详细说明了对齐在各种布局方法中的工作原理。在本页，我们研究盒子对齐在块布局上下文中的工作方式，包括浮动、定位和表格元素。由于本页旨在详细介绍专门与块布局和盒子对齐相关的内容，它应与主要的[盒子对齐](/zh-CN/docs/Web/CSS/CSS_box_alignment)页面一起阅读，该页面详细介绍了盒子对齐在各种布局方法中的共同特性。
 
-> **备注：** 在撰写本文时（2018 年 5 月），块布局中实际上还不支持盒子对齐属性。本文详细介绍了这些属性在规范中如何期望被实现的情况，以求完整性，并可能会随着规范和浏览器实现的发展而改变。
+> [!NOTE]
+> 在撰写本文时（2018 年 5 月），块布局中实际上还不支持盒子对齐属性。本文详细介绍了这些属性在规范中如何期望被实现的情况，以求完整性，并可能会随着规范和浏览器实现的发展而改变。
 
 ## align-content 和 justify-content
 
diff --git a/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
index 4884a60430b3a7..50a9e3e0cbcdd7 100644
--- a/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
+++ b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -60,7 +60,8 @@ Flexbox 与文档的写入模式有关，因此如果你使用英语并将{{cssx
 
 在纵轴上，`row-gap`属性将在相邻的子元素之间创建间距，因此还必须将`flex-wrap`设置为`wrap`,以使其具有任何效果。
 
-> **备注：** 从 Firefox 63 开始，Firefox 是唯一实现 Flexbox gap 属性的浏览器。
+> [!NOTE]
+> 从 Firefox 63 开始，Firefox 是唯一实现 Flexbox gap 属性的浏览器。
 
 ## Reference
 
diff --git a/files/zh-cn/web/css/css_box_alignment/index.md b/files/zh-cn/web/css/css_box_alignment/index.md
index 920a0d7d65fcbe..f1c500bb9e36c0 100644
--- a/files/zh-cn/web/css/css_box_alignment/index.md
+++ b/files/zh-cn/web/css/css_box_alignment/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_box_alignment
 
 CSS 盒子对齐 (Box Alignment) 模块指定了在各种 CSS 盒子布局模型，如块布局，表布局，弹性布局和网格布局中，与盒子对齐有关的 CSS 功能。该模块旨在建立一种能一致地在 CSS 中指定对齐的方法。这份文档详述了出现在该规范中的一般概念。
 
-> **备注：** 每种布局方法的文档都将详细说明在其中是如何应用“盒子对齐”的
+> [!NOTE]
+> 每种布局方法的文档都将详细说明在其中是如何应用“盒子对齐”的
 
 ## 较老的对齐方法
 
diff --git a/files/zh-cn/web/css/css_colors/applying_color/index.md b/files/zh-cn/web/css/css_colors/applying_color/index.md
index e97f4fb2c4d38d..0ddc700e8da90d 100644
--- a/files/zh-cn/web/css/css_colors/applying_color/index.md
+++ b/files/zh-cn/web/css/css_colors/applying_color/index.md
@@ -214,7 +214,8 @@ th {
 
 {{EmbedLiveSample("HSL 函数表示法", 300, 260)}}
 
-> **备注：** 如果省略了色相的单位，则假定其单位为度（`deg`）。
+> [!NOTE]
+> 如果省略了色相的单位，则假定其单位为度（`deg`）。
 
 #### HWB 函数表示法
 
@@ -474,7 +475,8 @@ Oklab 是一种色彩空间，它使用与 CIELAB 相同的模型类型，但在
 }
 ```
 
-> **备注：** 当尝试在 Safari 中显示它时，它将无法正常显示。因为 Safari 不支持 `text-decoration: underline wavy #88ff88`。
+> [!NOTE]
+> 当尝试在 Safari 中显示它时，它将无法正常显示。因为 Safari 不支持 `text-decoration: underline wavy #88ff88`。
 
 最后，`.boxRight` 类描述了绘制在右侧的方框的独特属性。它的配置是将方框浮动到右侧，使其出现在前一个方框的旁边。然后确定以下颜色：
 
@@ -496,7 +498,8 @@ Oklab 是一种色彩空间，它使用与 CIELAB 相同的模型类型，但在
 
 {{EmbedLiveSample("示例：选择一个颜色", 525, 275)}}
 
-> **备注：** 在 macOS 上，关闭颜色选择器窗口即表示已完成颜色选择。
+> [!NOTE]
+> 在 macOS 上，关闭颜色选择器窗口即表示已完成颜色选择。
 
 #### HTML
 
@@ -578,7 +581,8 @@ colorPicker.addEventListener(
 
 在尝试确定基本颜色时，你可能会发现能让你从网页内容中选择颜色的浏览器扩展程序会特别方便。其中有些甚至是专门为帮助完成此类工作而设计的。例如，[ColorZilla](https://www.colorzilla.com/) 网站提供了一个扩展工具（[Chrome](https://www.colorzilla.com/chrome/) 和 [Firefox](https://www.colorzilla.com/firefox/)），提供了一个从网页中挑选颜色的滴管工具。它还可以取不同大小区域甚至页面选定区域内像素颜色的平均值。
 
-> **备注：** 平均分配颜色的好处在于，通常看起来像纯色的颜色实际上是由多种相关颜色组成的，它们相互配合，创造出理想的效果。如果只选择其中的一个像素，那么得到的颜色本身看起来就很不协调。
+> [!NOTE]
+> 平均分配颜色的好处在于，通常看起来像纯色的颜色实际上是由多种相关颜色组成的，它们相互配合，创造出理想的效果。如果只选择其中的一个像素，那么得到的颜色本身看起来就很不协调。
 
 #### 丰富调色板
 
@@ -592,7 +596,8 @@ colorPicker.addEventListener(
 
 在设计调色板时，请务必记住，除了这些工具通常生成的颜色外，可能还需要添加一些核心中性色，如白色（或近似白色）、黑色（或近似黑色）以及一定数量的灰色。
 
-> **备注：** 通常情况下，使用尽可能少的颜色会好得多。通过使用色彩来突出重点，而不是为页面上的所有内容都添加色彩，这样就能使内容易于阅读，而且所使用的色彩也更有冲击力。
+> [!NOTE]
+> 通常情况下，使用尽可能少的颜色会好得多。通过使用色彩来突出重点，而不是为页面上的所有内容都添加色彩，这样就能使内容易于阅读，而且所使用的色彩也更有冲击力。
 
 ### 色彩理论的资源
 
@@ -609,7 +614,8 @@ colorPicker.addEventListener(
 
 你至少应该对[色盲](https://zh.wikipedia.org/wiki/色盲)进行基本研究。色盲有好几种，最常见的是红绿色盲，它会导致人们无法区分红色和绿色。还有其他一些色盲，从无法区分某些颜色到完全看不到颜色。
 
-> **备注：** 最重要的一条规则是：永远不要把颜色作为了解事物的唯一途径。例如，如果你通过将形状的颜色从白色变为绿色（成功）和红色（失败）来表示操作的成功或失败，那么患有红绿色盲的用户将无法正常使用你的网站。相反，也许可以同时使用文字和颜色，这样每个人都能明白发生了什么。
+> [!NOTE]
+> 最重要的一条规则是：永远不要把颜色作为了解事物的唯一途径。例如，如果你通过将形状的颜色从白色变为绿色（成功）和红色（失败）来表示操作的成功或失败，那么患有红绿色盲的用户将无法正常使用你的网站。相反，也许可以同时使用文字和颜色，这样每个人都能明白发生了什么。
 
 有关色盲的更多信息，请参阅以下文章：
 
@@ -657,7 +663,8 @@ colorPicker.addEventListener(
 
 可以将 `print-color-adjust` 设置为 `exact`，以便告诉浏览器，你使用该功能的一个或多个元素是专门设计的，可以在颜色和图像保持原样的情况下达到最佳效果。有了这个设置，浏览器就不会篡改元素的外观，而是按照 CSS 的指示来绘制。
 
-> **备注：** 不过，并不能保证 `print-color-adjust: exact` 就能完全按照给定的方式使用 CSS。如果浏览器提供了更改输出的用户首选项（如打印对话框中的“不打印背景”复选框），则该首选项会覆盖 `print-color-adjust` 的值。
+> [!NOTE]
+> 不过，并不能保证 `print-color-adjust: exact` 就能完全按照给定的方式使用 CSS。如果浏览器提供了更改输出的用户首选项（如打印对话框中的“不打印背景”复选框），则该首选项会覆盖 `print-color-adjust` 的值。
 
 ## 参见
 
diff --git a/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md
index 5928ba85836448..088b9cc26214a2 100644
--- a/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md
+++ b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md
@@ -107,7 +107,8 @@ counter-reset: reversed(section);
 
 计数器的值会随着通过 {{cssxref("counter-increment")}} 属性指定的负数递减。
 
-> **备注：** 对于非反向计数器，你也仍然可以使用 {{cssxref("counter-increment")}} 属性实现递减。使用反向计数器的优点在于：其默认初始值可以自动根据元素数量生成，自动应用于有序列表的 `list-item` 计数器也可以借此反转编号。
+> [!NOTE]
+> 对于非反向计数器，你也仍然可以使用 {{cssxref("counter-increment")}} 属性实现递减。使用反向计数器的优点在于：其默认初始值可以自动根据元素数量生成，自动应用于有序列表的 `list-item` 计数器也可以借此反转编号。
 
 ### 有序列表（list item）计数器
 
diff --git a/files/zh-cn/web/css/css_display/block_formatting_context/index.md b/files/zh-cn/web/css/css_display/block_formatting_context/index.md
index 95b4f2bddff9b9..9653558398f728 100644
--- a/files/zh-cn/web/css/css_display/block_formatting_context/index.md
+++ b/files/zh-cn/web/css/css_display/block_formatting_context/index.md
@@ -30,7 +30,8 @@ slug: Web/CSS/CSS_display/Block_formatting_context
 - 排除外部浮动。
 - 阻止[外边距重叠](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)。
 
-> **备注：** 弹性/网格容器（{{ cssxref("display") }}：flex/grid/inline-flex/inline-grid）建立新的弹性/网格格式化上下文，除布局之外，它与区块格式化上下文类似。弹性/网格容器中没有可用的浮动子级，但排除外部浮动和阻止外边距重叠仍然有效。
+> [!NOTE]
+> 弹性/网格容器（{{ cssxref("display") }}：flex/grid/inline-flex/inline-grid）建立新的弹性/网格格式化上下文，除布局之外，它与区块格式化上下文类似。弹性/网格容器中没有可用的浮动子级，但排除外部浮动和阻止外边距重叠仍然有效。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index f7668127b88e72..20609c8a7f74d2 100644
--- a/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -26,7 +26,8 @@ flexbox 之所以能迅速吸引开发者的注意，其中一个原因就是它
 
 我们也会了解到 flexbox 如何使用 margin: auto 来实现居中。
 
-> **备注：** 这些 Flexbox 的对齐属性已经纳入 [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/)标准里了。预计这特性将最终会取代之前在[Flexbox Level One](https://www.w3.org/TR/css-flexbox-1/)定义的属性。
+> [!NOTE]
+> 这些 Flexbox 的对齐属性已经纳入 [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/)标准里了。预计这特性将最终会取代之前在[Flexbox Level One](https://www.w3.org/TR/css-flexbox-1/)定义的属性。
 
 ## 交叉轴
 
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
index 4f041be7281c77..300ca4816b4a2f 100644
--- a/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
+++ b/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
@@ -141,7 +141,8 @@ flex-grow 属性可以按比例分配空间。如果第一个元素 `flex-grow`
 
 在计算 flex 元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上 flex-shrink 属性可能会和 flex-grow 属性表现的不一致。因此，我们可以在文章《[控制 Flex 子元素在主轴上的比例](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)》中更详细地看一下这个算法的原理。
 
-> **备注：** 在给 `flex-grow` 和 `flex-shrink` 赋值时要注意比例。如果我们给所有 flex 元素的 flex 属性赋值为 `1 1 200px` ，并且希望其中一个元素可以增加到 2 倍，我们可以给该元素的 flex 属性赋值为`2 1 200px`。当然，你也可以选择赋值为 flex: `10 1 200px` 和 flex: `20 1 200px` 。
+> [!NOTE]
+> 在给 `flex-grow` 和 `flex-shrink` 赋值时要注意比例。如果我们给所有 flex 元素的 flex 属性赋值为 `1 1 200px` ，并且希望其中一个元素可以增加到 2 倍，我们可以给该元素的 flex 属性赋值为`2 1 200px`。当然，你也可以选择赋值为 flex: `10 1 200px` 和 flex: `20 1 200px` 。
 
 ### Flex 属性的简写
 
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
index cf66f17c74d6c1..5a49cf80ff41c3 100644
--- a/files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
+++ b/files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
@@ -69,7 +69,8 @@ Flexbox 被设计为一维的布局工具，这意味着在处理元素布局方
 
 在下面的实时例子里，我有一个非包装的弹性容器。第三个物件相比其他的有跟多的内容被设置 `visibility: collaps` 并且因此弹性盒子会保持一个高度的结构来满足显示物件的需要。如果你从 CSS 里移除`visibility: collapse` 或是将值改变为 `visible`，你会看到物件消失了并且空间在非包装的物件之间重新分配；弹性容器的高度不应该改变。
 
-> **备注：** 对下面的两个例子使用 Firefox 浏览器，因为 Chrome 和 Safari 会把折叠处理为隐藏。
+> [!NOTE]
+> 对下面的两个例子使用 Firefox 浏览器，因为 Chrome 和 Safari 会把折叠处理为隐藏。
 
 {{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}
 
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.md
index 3fe9fbf3b74bcb..206f75bcc41e79 100644
--- a/files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.md
+++ b/files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.md
@@ -42,7 +42,8 @@ Flexbox 和 Grid 等新的布局方法为内容的顺序控制提供了可能。
 
 > “作者不得使用 flex-flow / flex-direction 的顺序或反向值来代替正确的源顺序，因为这会破坏文档的无障碍。_”_
 
-> **备注：** 近几年来，Firefox 出现了一个错误，即它会尝试遵循视觉顺序而不是源顺序，从而使其行为与其他浏览器不同。现在，此问题已得到解决。你应始终将源顺序作为文档的逻辑顺序，因为所有最新的用户代理都将遵循该规范并遵循该规范。
+> [!NOTE]
+> 近几年来，Firefox 出现了一个错误，即它会尝试遵循视觉顺序而不是源顺序，从而使其行为与其他浏览器不同。现在，此问题已得到解决。你应始终将源顺序作为文档的逻辑顺序，因为所有最新的用户代理都将遵循该规范并遵循该规范。
 
 在下面的实时示例中，我添加了一种焦点样式，以便当你从一个链接到另一个标签时，可以看到突出显示的样式。如果使用`flex-direction`更改顺序，则可以看到制表符顺序如何继续遵循源中列出的项目的顺序。
 
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
index 7c822e7d876258..a3020dc410015b 100644
--- a/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
+++ b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
@@ -9,7 +9,8 @@ l10n:
 
 在本文中，我们将了解弹性盒子（Flexbox）如何与所有其他 CSS 模块配合使用。如果你想学习弹性盒子，我们将一起找出需要注意的规范以及弹性盒子与其他的模块不同的原因。
 
-> **备注：** CSS 1 和 CSS 2 是单一的整体规范，其中所有 CSS 都定义在一个文档中。随着 CSS 成为一种特性更加丰富的语言，各个部分有不同的发展速度，如何维护一个庞大的规范就成了问题。因此 CSS 已被模块化，不同的 CSS 规范构成的模块构成了如今的 CSS。这些模块之间相互关联，并且处于不同的开发阶段。
+> [!NOTE]
+> CSS 1 和 CSS 2 是单一的整体规范，其中所有 CSS 都定义在一个文档中。随着 CSS 成为一种特性更加丰富的语言，各个部分有不同的发展速度，如何维护一个庞大的规范就成了问题。因此 CSS 已被模块化，不同的 CSS 规范构成的模块构成了如今的 CSS。这些模块之间相互关联，并且处于不同的开发阶段。
 
 ## 盒子对齐模块
 
@@ -97,7 +98,8 @@ l10n:
 
 请注意，这只会从布局中删除该盒子；子元素并不会以任何其他方式成为直接子元素。你可以看到，我们使用了直接子元素选择器来为弹性元素添加背景和边框，因此这些样式并没有应用到嵌套的子元素上。它们已经被布局为弹性元素，但由于它们不是直接子元素，所以它们不会获得其他样式。
 
-> **警告：** 大多数浏览器的当前实现会从无障碍树中移除任何具有 `display: contents` 的元素（但会保留其后代）。这将导致屏幕阅读技术不再宣告该元素。根据规范，这是不正确的行为，参见 [`display: contents`](/zh-CN/docs/Web/CSS/display#display_contents)。
+> [!WARNING]
+> 大多数浏览器的当前实现会从无障碍树中移除任何具有 `display: contents` 的元素（但会保留其后代）。这将导致屏幕阅读技术不再宣告该元素。根据规范，这是不正确的行为，参见 [`display: contents`](/zh-CN/docs/Web/CSS/display#display_contents)。
 
 此外，删除了盒子后，你就无法使用它来——例如——为嵌套的子元素添加背景色。如果你在该实时示例中删除 `display: contents`，你会看到我们要删除属性的元素的直接子元素的背景色为橙色。当盒子消失时，这个背景色也会消失。
 
diff --git a/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
index da52fe45926bf7..af2172f4d2644d 100644
--- a/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
+++ b/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
@@ -55,7 +55,8 @@ slug: Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow
 
 你可以在我们的文章《[掌握外边距折叠](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)》中阅读更多关于这一部分的内容。
 
-> **备注：** 如果不确定是否发生了外边距折叠，你可以使用浏览器的开发人员工具查看盒模型。准确的外边距值可以帮助你判断是否有外边距折叠发生。
+> [!NOTE]
+> 如果不确定是否发生了外边距折叠，你可以使用浏览器的开发人员工具查看盒模型。准确的外边距值可以帮助你判断是否有外边距折叠发生。
 >
 > ![](box-model.png)
 
diff --git a/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.md b/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.md
index 21ee55079d8f70..080d76929dfccc 100644
--- a/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.md
+++ b/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.md
@@ -13,7 +13,8 @@ l10n:
 
 除了连字或齐线数字（数字排列均匀，而“老式”数字的看起来像小写字母）等广泛应用的特性，还有非常特殊的一部分，如样式集（可能含有几种特定的字形变体，它们可以一起使用），甚至是特定的东亚文字的字形变化。对于最后一种情况，这些变化实际上是正确表达语言所必须的，因为它们超越了大多数其他 OpenType 特性的风格偏好。
 
-> **警告：** CSS 定义了很多的属性用以改变字体特性，然而很多属性没有完全实现。这里给出了所有属性的定义，但是大部分都只能用底层属性 {{cssxref("font-feature-settings")}} 来控制。可以同时使用两种方式定义 CSS，但这可能会变得很繁琐。而只使用 `font-feature-settings` 控制一切的问题是，每次你要变动一个特性，就必须重新定义整个字符串（类似于用 {{cssxref("font-variation-settings")}} 操纵变量字体）。
+> [!WARNING]
+> CSS 定义了很多的属性用以改变字体特性，然而很多属性没有完全实现。这里给出了所有属性的定义，但是大部分都只能用底层属性 {{cssxref("font-feature-settings")}} 来控制。可以同时使用两种方式定义 CSS，但这可能会变得很繁琐。而只使用 `font-feature-settings` 控制一切的问题是，每次你要变动一个特性，就必须重新定义整个字符串（类似于用 {{cssxref("font-variation-settings")}} 操纵变量字体）。
 
 ## 了解字体的可用特性
 
@@ -39,7 +40,8 @@ l10n:
 
 需要考虑许多不同的字体特性。在这里，我们根据 W3C 规范的主要属性和选项将它们分门别类加以介绍。
 
-> **备注：** 下列示例将展示各个属性及其组合，以及与之等价的底层语法。由于浏览器实现的差异，等价语法的效果可能不完全一致；但大多数情况下，两种示例是一模一样的。展示所用的字体有 Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script，以及 Kokoro。以上字体均可获取并自由使用（大多可以从 Google Fonts 或其他字体服务中获取）。
+> [!NOTE]
+> 下列示例将展示各个属性及其组合，以及与之等价的底层语法。由于浏览器实现的差异，等价语法的效果可能不完全一致；但大多数情况下，两种示例是一模一样的。展示所用的字体有 Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script，以及 Kokoro。以上字体均可获取并自由使用（大多可以从 Google Fonts 或其他字体服务中获取）。
 
 ### 字偶距
 
@@ -137,7 +139,8 @@ OpenType 特性最常用的情形之一，就是正确地呈现小型大写字
 
 {{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
 
-> **备注：** 这些字是从字体样例中复制出来的，并无含义。
+> [!NOTE]
+> 这些字是从字体样例中复制出来的，并无含义。
 
 ### 字体变体简写
 
diff --git a/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md
index 4cadafe642ed79..3f5a7a5f824d32 100644
--- a/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md
+++ b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_fonts/Variable_fonts_guide
 
 **可变字体（Variable fonts）**是 OpenType 字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。你只需通过 CSS 与一行{{cssxref("@font-face")}}引用，即可获取包含在这个单一文件中的各种字体变体。本文将介绍如何在 Web 中使用可变字体。
 
-> **警告：** 为了能够在你的操作系统上正确地使用可变字体，请确定你的操作系统已经升级到最新版本。例如各 Linux 发行版，应将 Freetype 升级到最新版本。10.13 版本之前的 macOS 不支持可变字体。如果你的操作系统没有升级到最新版，你将无法在网页和 Firefox Developer Tools 中使用可变字体。
+> [!WARNING]
+> 为了能够在你的操作系统上正确地使用可变字体，请确定你的操作系统已经升级到最新版本。例如各 Linux 发行版，应将 Freetype 升级到最新版本。10.13 版本之前的 macOS 不支持可变字体。如果你的操作系统没有升级到最新版，你将无法在网页和 Firefox Developer Tools 中使用可变字体。
 
 ## 可变字体：何谓与何异
 
@@ -78,7 +79,8 @@ font-variation-settings: "wght" 375;
 
 字宽（由 `wdth` 标签表示）定义字形可以是多窄或多宽（印刷术语中称为压缩或扩展）的设计轴。这通常在 CSS 中通过使用 {{cssxref("font-stretch")}} 属性设置，该属性值表示为高于或低于“正常”的百分比（100％），任何大于 0 的数字在技术上都是有效的 - 尽管它的范围更有可能是接近 100％的，例如 75％-125％。如果提供的数字值超出了字体编码的范围，浏览器应该以允许的最接近值渲染字体。
 
-> **备注：** 在使用 `font-variation-settings` 时不需要使用%。
+> [!NOTE]
+> 在使用 `font-variation-settings` 时不需要使用%。
 
 ```css
 font-stretch: 115%;
@@ -110,7 +112,8 @@ font-variation-settings: "ital" 1;
 
 Slant（由 `slnt` 标签表示），或者它经常被称为“oblique” - 与真正的斜体不同之处在于它改变了字体的角度但不执行任何类型的字符替换。它也是可变的，因为它表示为数值范围。这允许字体沿该轴的任何位置变化。允许的范围通常为 0（直立）到 20 度 — 可以使用该范围内的任何数值，因此字体可以倾斜一点点。但是，-90-90 度的任何值都是有效的。
 
-> **备注：** 在使用 `font-variation-settings` 时不需要使用 `deg` 这个关键字。
+> [!NOTE]
+> 在使用 `font-variation-settings` 时不需要使用 `deg` 这个关键字。
 
 ```css
 font-style: oblique 14deg;
@@ -173,9 +176,11 @@ font-variation-settings: "GRAD" 88;
 }
 ```
 
-> **备注：** 并非所有浏览器都实现了字体格式的完整语法，因此请仔细测试。如果你将字体格式设置为仅文件格式，而不是格式变体（即 `woff2` 而不是 `woff2-variations`），那么支持可变字体的所有浏览器仍将渲染它们，但如果可能，最好使用正确的语法。
+> [!NOTE]
+> 并非所有浏览器都实现了字体格式的完整语法，因此请仔细测试。如果你将字体格式设置为仅文件格式，而不是格式变体（即 `woff2` 而不是 `woff2-variations`），那么支持可变字体的所有浏览器仍将渲染它们，但如果可能，最好使用正确的语法。
 
-> **备注：** 如果使用适当的属性（即 `font-weight`或 `font-stretch`），提供 `font-weight`， `font-stretch`和 `font-style`的值范围将使浏览器不会尝试渲染超出该范围的轴，但不会阻止你通过 `font-variation-settings` 使用无效值，因此请小心使用。
+> [!NOTE]
+> 如果使用适当的属性（即 `font-weight`或 `font-stretch`），提供 `font-weight`， `font-stretch`和 `font-style`的值范围将使浏览器不会尝试渲染超出该范围的轴，但不会阻止你通过 `font-variation-settings` 使用无效值，因此请小心使用。
 
 ## 使用旧版本浏览器
 
diff --git a/files/zh-cn/web/css/css_functions/index.md b/files/zh-cn/web/css/css_functions/index.md
index 06c90430adecef..d80db0371c1e32 100644
--- a/files/zh-cn/web/css/css_functions/index.md
+++ b/files/zh-cn/web/css/css_functions/index.md
@@ -19,7 +19,8 @@ selector {
 
 函数可以接受多个参数，这些参数的格式与 CSS 属性值类似。允许有空白字符，但在括号内是可选的。在一些函数符号中，多个参数用逗号隔开，而其他参数则使用空格。
 
-> **备注：** CSS 值函数是作为属性值使用的，不应该与伪类相混淆。[函数式伪类](/zh-CN/docs/Web/CSS/Pseudo-classes#函数式伪类)、[语言伪类](/zh-CN/docs/Web/CSS/Pseudo-classes#语言的伪类)和几种[树状结构伪类](/zh-CN/docs/Web/CSS/Pseudo-classes#树结构的伪类)都需要参数值，但它们不是值函数。[条件 @ 规则](/zh-CN/docs/Web/CSS/At-rule#条件规则组)也不是值函数；括号是用来分组的。
+> [!NOTE]
+> CSS 值函数是作为属性值使用的，不应该与伪类相混淆。[函数式伪类](/zh-CN/docs/Web/CSS/Pseudo-classes#函数式伪类)、[语言伪类](/zh-CN/docs/Web/CSS/Pseudo-classes#语言的伪类)和几种[树状结构伪类](/zh-CN/docs/Web/CSS/Pseudo-classes#树结构的伪类)都需要参数值，但它们不是值函数。[条件 @ 规则](/zh-CN/docs/Web/CSS/At-rule#条件规则组)也不是值函数；括号是用来分组的。
 
 ## 转换函数
 
diff --git a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index c49abf0e6cabed..e63b5dfc8b94f6 100644
--- a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -478,7 +478,8 @@ Repeat 标记可以传入一个轨道列表，因此你可以用它来创建一
 
 {{ EmbedLiveSample('跨轨道放置网格项目', '220', '410') }}
 
-> **备注：** 别忘了你可以使用 Firefox 开发者工具中的[网格检查器](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)查看这些元素是如何被摆放在网格中的。
+> [!NOTE]
+> 别忘了你可以使用 Firefox 开发者工具中的[网格检查器](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)查看这些元素是如何被摆放在网格中的。
 
 ### 网格线定位简写
 
@@ -529,7 +530,8 @@ _网格单元_（grid cell）是网格项中最小的单位，从概念上来讲
 }
 ```
 
-> **备注：** 当网格布局首次在浏览器中使用时，{{cssxref("column-gap")}}、{{cssxref("row-gap")}} 和 {{cssxref("gap")}} 都带有 `grid-` 前缀，分别称为 `grid-column-gap`、`grid-row-gap ` 和 `grid-gap`。现在，所有浏览器都支持无前缀值，但前缀版本将作为别名保留，以便安全使用。
+> [!NOTE]
+> 当网格布局首次在浏览器中使用时，{{cssxref("column-gap")}}、{{cssxref("row-gap")}} 和 {{cssxref("gap")}} 都带有 `grid-` 前缀，分别称为 `grid-column-gap`、`grid-row-gap ` 和 `grid-gap`。现在，所有浏览器都支持无前缀值，但前缀版本将作为别名保留，以便安全使用。
 
 ```html
 <div class="wrapper">
diff --git a/files/zh-cn/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/zh-cn/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
index 6879fd455be542..2ca8108b06f685 100644
--- a/files/zh-cn/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
+++ b/files/zh-cn/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
@@ -462,7 +462,8 @@ slug: Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement
 
 CSS 网格规范加入了用 {{cssxref("column-gap")}} 和 {{cssxref("row-gap")}} 属性定义列间距和行间距的能力。这两个属性的行为和多列布局中的 {{cssxref("column-gap")}} 属性很像。
 
-> **备注：** 在浏览器首次引入网格属性 {{cssxref("column-gap")}}、{{cssxref("row-gap")}} 和 {{cssxref("gap")}} 时，具有 `grid-` 前缀。分别是 `grid-column-gap`、`grid-row-gap` 和 `grid-gap`。
+> [!NOTE]
+> 在浏览器首次引入网格属性 {{cssxref("column-gap")}}、{{cssxref("row-gap")}} 和 {{cssxref("gap")}} 时，具有 `grid-` 前缀。分别是 `grid-column-gap`、`grid-row-gap` 和 `grid-gap`。
 >
 > 浏览器正在更新它们的渲染引擎，以删除这一前缀，但是携带有前缀的版本将以别名的形式进行维护，使得它们可以被安全地使用。
 
diff --git a/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.md
index 88d28314ddb8d8..bec4571f2cb690 100644
--- a/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.md
+++ b/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
 
 CSS **图像合并**（**Image sprites**）技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。
 
-> **备注：** 备注：当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。
+> [!NOTE]
+> 当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。
 
 ## 实现
 
diff --git a/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md b/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md
index f12743b694e7f0..60fdf894ba7a05 100644
--- a/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md
+++ b/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md
@@ -19,7 +19,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 
 - 使用{{domxref("Window.matchMedia()")}} 和{{domxref("MediaQueryList.addListener()")}} 方法来[测试和监控媒体状态](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)。
 
-> **备注：** 本页的例子使用 CSS `@media` 的方式来说明目的，但是对于所有类型的媒体查询，基本语法均相同。
+> [!NOTE]
+> 本页的例子使用 CSS `@media` 的方式来说明目的，但是对于所有类型的媒体查询，基本语法均相同。
 
 ## 语法
 
@@ -27,7 +28,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 
 当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为 true 时，媒体查询将计算为 true。涉及未知媒体类型的查询始终为 false。
 
-> **备注：** 即使媒体查询返回 false，带有媒体查询附加到其{{HTMLElement("link")}}标记的样式表[仍将下载](http://scottjehl.github.com/CSS-Download-Tests/)。但是，除非查询结果变为 true，否则其内容将不适用。
+> [!NOTE]
+> 即使媒体查询返回 false，带有媒体查询附加到其{{HTMLElement("link")}}标记的样式表[仍将下载](http://scottjehl.github.com/CSS-Download-Tests/)。但是，除非查询结果变为 true，否则其内容将不适用。
 
 ## 定位媒体类型
 
@@ -79,7 +81,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 
 在前面的示例中，我们已经看到 `and` 运算符用于将媒体类型与媒体功能分组。`and` 运算符还可以将多个媒体功能组合到单个媒体查询中。同时，`not` 运算符会否定媒体查询，从而基本上颠倒了它的正常含义。`only` 运算符可防止较早的浏览器应用样式。
 
-> **备注：** 在大多数情况下，默认情况下，如果未指定其他类型，则使用`all`媒体类型。但是，如果使用`not`或`only`运算符，则必须显式指定媒体类型。
+> [!NOTE]
+> 在大多数情况下，默认情况下，如果未指定其他类型，则使用`all`媒体类型。但是，如果使用`not`或`only`运算符，则必须显式指定媒体类型。
 
 ### 结合多种类型和特性
 
@@ -149,7 +152,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 
 媒体查询 4 级规范对语法进行了一些改进，以使用具有“范围”类型（例如宽度或高度，减少冗余）的功能进行媒体查询。级别 4 添加了用于编写此类的查询范围上下文。例如，使用最大宽度`max-` 功能，我们可以编写以下代码：
 
-> **备注：** 媒体查询 4 级规范在现代浏览器中具有合理的支持，但某些媒体功能并未得到很好的支持。有关更多详细信息，请参见 [`@media` browser compatibility table](/zh-CN/docs/Web/CSS/@media#Browser_compatibility)。
+> [!NOTE]
+> 媒体查询 4 级规范在现代浏览器中具有合理的支持，但某些媒体功能并未得到很好的支持。有关更多详细信息，请参见 [`@media` browser compatibility table](/zh-CN/docs/Web/CSS/@media#Browser_compatibility)。
 
 ```css
 @media (max-width: 30em) { ... }
diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
index caaf0a42c89936..af461f768acf7a 100644
--- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
+++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
@@ -41,7 +41,8 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
 - 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
 - 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
 
-> **备注：** 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文*同化*。
+> [!NOTE]
+> 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文*同化*。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
index 557afeba4a343b..f5408b661002a7 100644
--- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
+++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
@@ -30,7 +30,8 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_examp
   - DIV #2 (z-index 1)
   - DIV #4 (z-index 2)
 
-> **备注：** DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。
+> [!NOTE]
+> DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
index 905762f00df0fa..6ec13357adc826 100644
--- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
+++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
@@ -24,7 +24,8 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_examp
 
     - DIV #4 (z-index 10)
 
-> **备注：** 值得记住的是，通常 HTML 的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。
+> [!NOTE]
+> 值得记住的是，通常 HTML 的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。
 
 ### 示例源码
 
diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
index d0187d76024a3f..0f78d6ef62742a 100644
--- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
+++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
@@ -43,7 +43,8 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_examp
 
 可以通过移除不同级别的菜单之间的重叠，或者使用 ID 选择器指定独立的（不同的）z-index 值，或者减少 HTML 的层级来解决这个问题。
 
-> **备注：** 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多 div 来实现的，这种方式在需要同时定位一组元素时很有用。
+> [!NOTE]
+> 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多 div 来实现的，这种方式在需要同时定位一组元素时很有用。
 
 ### 示例源码
 
diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
index 03d166498833b1..726a79a8d83349 100644
--- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
+++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md
@@ -24,7 +24,8 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elem
 4. 常规流中的后代行内元素
 5. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠
 
-> **备注：** 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素 (DIV #4) 的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)
+> [!NOTE]
+> 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素 (DIV #4) 的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)
 
 {{ EmbedLiveSample('该示例的源码', '563', '255') }}
 
diff --git a/files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md b/files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md
index 63cf2d83fc8ce6..8088f54eb84c48 100644
--- a/files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md
+++ b/files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md
@@ -33,7 +33,8 @@ slug: Web/CSS/CSS_scroll_snap/Basic_concepts
 
 使用 `mandatory` 可以创造非常一致的滚动效果——你知道浏览器总会吸附到每个指定的点。这意味着有把握相信在滚动结束时，你希望出现在屏幕顶部的东西就会出现在那里。然而，如果内容比预想的大，那么会产生问题——用户可能会沮丧地发现他们永远无法滚动并查看内容中特定的某处。因此，使用 `mandatory` 应当仔细考虑，而且只用于你知道屏幕上或滚动式区域在任何时刻有多少内容的情形。
 
-> **备注：** 如果某个子元素的内容会溢出父容器，那么请务必不要使用 `mandatory`，这是因为用户会无法把溢出内容滚入视野。
+> [!NOTE]
+> 如果某个子元素的内容会溢出父容器，那么请务必不要使用 `mandatory`，这是因为用户会无法把溢出内容滚入视野。
 
 `proximity` 值只在子元素靠近某个位置时把它吸附到这个位置，具体的距离由浏览器决定。
 
diff --git a/files/zh-cn/web/css/css_selectors/index.md b/files/zh-cn/web/css/css_selectors/index.md
index 6f555a12970ee7..8e50f3fe0c88de 100644
--- a/files/zh-cn/web/css/css_selectors/index.md
+++ b/files/zh-cn/web/css/css_selectors/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_selectors
 
 **CSS 选择器**规定了 CSS 规则会被应用到哪些元素上。
 
-> **备注：** 暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。
+> [!NOTE]
+> 暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。
 
 ## 基本选择器
 
diff --git a/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md b/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md
index ac99d4861083d4..4394cbe4be6456 100644
--- a/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md
+++ b/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/CSS_transforms/Using_CSS_transforms
 
 CSS 变换通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变换（affine linear transformation）。可以进行的变换包括旋转、倾斜、缩放以及位移，这些变换同时适用于平面与三维空间。
 
-> **警告：** 只有使用[盒模型](/zh-CN/docs/Web/CSS/CSS_box_model)（Box Model）来定位的元素可以*被变换*（`transform`ed）。拥有 `display: block` 的元素是由盒模型定位的。
+> [!WARNING]
+> 只有使用[盒模型](/zh-CN/docs/Web/CSS/CSS_box_model)（Box Model）来定位的元素可以*被变换*（`transform`ed）。拥有 `display: block` 的元素是由盒模型定位的。
 
 ## CSS 变换属性
 
diff --git a/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md
index f93a714dcb4108..246effbad0f1bd 100644
--- a/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md
@@ -258,7 +258,8 @@ el.addEventListener("transitionrun", signalStart, true);
 el.addEventListener("transitionstart", signalStart, true);
 ```
 
-> **备注：** 如果在过渡完成之前，因为元素变为 {{cssxref("display")}}`: none`，或者动画属性的值被改变，而中止了过渡，则 `transitionend` 事件不会触发。
+> [!NOTE]
+> 如果在过渡完成之前，因为元素变为 {{cssxref("display")}}`: none`，或者动画属性的值被改变，而中止了过渡，则 `transitionend` 事件不会触发。
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md
index dc5d6e4e2d16c5..c961774a64cefe 100644
--- a/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md
+++ b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md
@@ -19,7 +19,8 @@ l10n:
 
 在使用第三维度将物体从前向后分层时，我们使用 z 轴。z 轴从查看器一直延伸到屏幕表面。CSS z-index 属性会影响定位元素在此轴线上的位置，从而产生远离或朝向观众的效果。
 
-> **备注：** 实际上，使用 CSS 属性（如 {{cssxref("transform")}}）可以改变这些坐标系的定义和方向。不过，我们现在只讨论标准坐标系。
+> [!NOTE]
+> 实际上，使用 CSS 属性（如 {{cssxref("transform")}}）可以改变这些坐标系的定义和方向。不过，我们现在只讨论标准坐标系。
 
 ## 标准 CSS 对象模型坐标系
 
diff --git a/files/zh-cn/web/css/display-outside/index.md b/files/zh-cn/web/css/display-outside/index.md
index 7b35534572a980..16973475835dde 100644
--- a/files/zh-cn/web/css/display-outside/index.md
+++ b/files/zh-cn/web/css/display-outside/index.md
@@ -16,7 +16,8 @@ slug: Web/CSS/display-outside
 - `inline`
   - : 元素生成至少一个行级元素盒，这些盒子不在自身前后生成断行。在正常流中，若有空格则下一元素将在同一行上。
 
-> **备注：** 支持二值语法的浏览器在仅找到外侧值时（如指定 `display: block` 或 `display: inline` 时）会将内侧值设置为 `flow`，由此产生预期行为。例如若将元素指定为 block，你会期望此元素的子元素会参与块向和行向的正常流布局。
+> [!NOTE]
+> 支持二值语法的浏览器在仅找到外侧值时（如指定 `display: block` 或 `display: inline` 时）会将内侧值设置为 `flow`，由此产生预期行为。例如若将元素指定为 block，你会期望此元素的子元素会参与块向和行向的正常流布局。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/display/index.md b/files/zh-cn/web/css/display/index.md
index 5f4b276132f7d6..755d967a790c9b 100644
--- a/files/zh-cn/web/css/display/index.md
+++ b/files/zh-cn/web/css/display/index.md
@@ -70,9 +70,11 @@ display: unset;
     - `inline`
       - : 该元素生成一个或多个行级盒子，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。
 
-> **备注：** 在支持多关键字语法的浏览器中，当 `display` 属性仅有一个**外部**值（例如 `display: block` 或 `display: inline`）时，内部值会被设置为 `flow`（例如 `display: block flow` 和 `display: inline flow`）。
+> [!NOTE]
+> 在支持多关键字语法的浏览器中，当 `display` 属性仅有一个**外部**值（例如 `display: block` 或 `display: inline`）时，内部值会被设置为 `flow`（例如 `display: block flow` 和 `display: inline flow`）。
 
-> **备注：** 为了保证布局在旧浏览器生效，你可以使用单值语法，例如，对于 `display: inline flex`，可以设置以下回退
+> [!NOTE]
+> 为了保证布局在旧浏览器生效，你可以使用单值语法，例如，对于 `display: inline flex`，可以设置以下回退
 >
 > ```css
 > .container {
@@ -108,7 +110,8 @@ display: unset;
     - `ruby`
       - : 该元素的行为类似行级元素并且根据 ruby 格式化模型布局它的内容。它的行为像关联的 HTML 的 {{HTMLElement("ruby")}} 元素。
 
-> **备注：** 在支持多关键字语法的浏览器中，当 `display` 属性仅有一个**内部**值（例如 `display: flex` 或 `display: grid`）时，外部值会被设置为 `block`（例如 `display: block flex` 和 `display: block grid`）。
+> [!NOTE]
+> 在支持多关键字语法的浏览器中，当 `display` 属性仅有一个**内部**值（例如 `display: flex` 或 `display: grid`）时，外部值会被设置为 `block`（例如 `display: block flex` 和 `display: block grid`）。
 
 ### 列表元素
 
@@ -119,7 +122,8 @@ display: unset;
 
 `list-item` 也可以与任意的 {{CSSxRef("&lt;display-outside&gt;")}} 关键字和 {{CSSxRef("&lt;display-inside&gt;")}} 中的 `flow` 或 `flow-root` 关键字组合。
 
-> **备注：** 在支持多关键字语法的浏览器中，如果没有指定内部值，其值默认为 `flow`。如果没有指定外部值，主体盒子将具有 `block` 的外部显示类型。
+> [!NOTE]
+> 在支持多关键字语法的浏览器中，如果没有指定内部值，其值默认为 `flow`。如果没有指定外部值，主体盒子将具有 `block` 的外部显示类型。
 
 ### 内部
 
diff --git a/files/zh-cn/web/css/easing-function/index.md b/files/zh-cn/web/css/easing-function/index.md
index c586bdebdde9e0..74a7c4ab24d917 100644
--- a/files/zh-cn/web/css/easing-function/index.md
+++ b/files/zh-cn/web/css/easing-function/index.md
@@ -303,7 +303,8 @@ steps(2, start)
 steps(2)
 ```
 
-> **备注：** 若动画含有多个定格，则在 `steps()` 中所指定的步子将应用于每一段。因此含三个区段和 `steps(2)` 的动画将总共含有 6 步，每段 2 步。
+> [!NOTE]
+> 若动画含有多个定格，则在 `steps()` 中所指定的步子将应用于每一段。因此含三个区段和 `steps(2)` 的动画将总共含有 6 步，每段 2 步。
 
 这些缓动函数无效：
 
diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md
index 7f8ba269ddac1c..4bed18910567e5 100644
--- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md
+++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md
@@ -11,7 +11,8 @@ The **`drop-shadow()`** [CSS](/zh-CN/docs/Web/CSS) function applies a drop shado
 
 投影实际上是输入图像的 alpha 蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。
 
-> **备注：** 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性。`box-shadow` 属性在元素的整个框后面创建一个矩形阴影，而 `drop-shadow()` 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。
+> [!NOTE]
+> 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性。`box-shadow` 属性在元素的整个框后面创建一个矩形阴影，而 `drop-shadow()` 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。
 
 ## Syntax
 
@@ -31,7 +32,8 @@ The `drop-shadow()` function accepts a parameter of type `<shadow>` (defined in
 
   - : 阴影的扩展半径，指定为 {{cssxref("&lt;length&gt;")}}. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为 0，阴影的大小将与输入图像相同。
 
-    > **警告：** 大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止 2020 年 10,14 日，Chrome v.85.0.4183.121（正式版本）,Microsoft Edge Beta v85.0.564.63(64 位), Firefox v.85.0.564.63 暂未支持
+    > [!WARNING]
+    > 大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止 2020 年 10,14 日，Chrome v.85.0.4183.121（正式版本）,Microsoft Edge Beta v85.0.564.63(64 位), Firefox v.85.0.564.63 暂未支持
 
 - `color` (optional)
   - : 阴影的颜色，指定为 {{cssxref("&lt;color&gt;")}}。如果未指定，则使用 {{cssxref("color")}} 属性的值。
diff --git a/files/zh-cn/web/css/filter-function/opacity/index.md b/files/zh-cn/web/css/filter-function/opacity/index.md
index 0caa3e513c474b..ab377442e2b3cf 100644
--- a/files/zh-cn/web/css/filter-function/opacity/index.md
+++ b/files/zh-cn/web/css/filter-function/opacity/index.md
@@ -9,7 +9,8 @@ The **`opacity()`** [CSS](/zh-CN/docs/Web/CSS) 函数在输入的图片实例上
 
 {{EmbedInteractiveExample("pages/css/function-opacity.html")}}
 
-> **备注：** 这个函数与其他既有的{{Cssxref("opacity")}}属性类似，区别在于有了 filters，有些浏览器会提供硬件加速以获取更好的性能表现。
+> [!NOTE]
+> 这个函数与其他既有的{{Cssxref("opacity")}}属性类似，区别在于有了 filters，有些浏览器会提供硬件加速以获取更好的性能表现。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/fit-content/index.md b/files/zh-cn/web/css/fit-content/index.md
index db6013779e3d01..a2aeefe823bda7 100644
--- a/files/zh-cn/web/css/fit-content/index.md
+++ b/files/zh-cn/web/css/fit-content/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/fit-content
 
 `fit-content` 属性可以用于设置元素的 {{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("min-width")}}、{{cssxref("min-height")}}、{{cssxref("max-width")}} 和 {{cssxref("max-height")}}，此时最大和最小尺寸将基于元素的内容尺寸计算。
 
-> **备注：** CSS 尺寸规范另外还定义了 {{cssxref("fit-content()", "fit-content()")}} 函数。本页详细介绍了该关键字的用法。
+> [!NOTE]
+> CSS 尺寸规范另外还定义了 {{cssxref("fit-content()", "fit-content()")}} 函数。本页详细介绍了该关键字的用法。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/flex-basis/index.md b/files/zh-cn/web/css/flex-basis/index.md
index 8c4ae76ed16418..7c8800c736d95e 100644
--- a/files/zh-cn/web/css/flex-basis/index.md
+++ b/files/zh-cn/web/css/flex-basis/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/flex-basis
 
 {{EmbedInteractiveExample("pages/css/flex-basis.html")}}
 
-> **备注：** 当一个元素同时被设置了 `flex-basis` (除值为 `auto` 外) 和 `width` (或者在 `flex-direction: column` 情况下设置了`height`) , `flex-basis` 具有更高的优先级。
+> [!NOTE]
+> 当一个元素同时被设置了 `flex-basis` (除值为 `auto` 外) 和 `width` (或者在 `flex-direction: column` 情况下设置了`height`) , `flex-basis` 具有更高的优先级。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/float/index.md b/files/zh-cn/web/css/float/index.md
index 73718e54279bc2..1f193a1a754dd8 100644
--- a/files/zh-cn/web/css/float/index.md
+++ b/files/zh-cn/web/css/float/index.md
@@ -30,7 +30,8 @@ slug: Web/CSS/float
 | `inline-grid`        | `grid`      |
 | _other_              | _unchanged_ |
 
-> **备注：** 如果要在 JavaScript 中把 `float` 属性当作 {{domxref("HTMLElement.style")}} 对象的一个成员来操作，那么在旧版本的浏览器中，你必须拼写成 `cssFloat`。另外还要注意到在 Internet Explorer 8 和更老的 IE 当中，要使用 `styleFloat` 属性。这是 DOM 驼峰命名和 CSS 所用的连字符分隔命名法对应关系中的一个特例（这是因为在 JavaScript 中“float”是一个保留字，因为同样的原因，“class”被改成了“className” 、`<label>` 的“for”被改成了“htmlFor”）。
+> [!NOTE]
+> 如果要在 JavaScript 中把 `float` 属性当作 {{domxref("HTMLElement.style")}} 对象的一个成员来操作，那么在旧版本的浏览器中，你必须拼写成 `cssFloat`。另外还要注意到在 Internet Explorer 8 和更老的 IE 当中，要使用 `styleFloat` 属性。这是 DOM 驼峰命名和 CSS 所用的连字符分隔命名法对应关系中的一个特例（这是因为在 JavaScript 中“float”是一个保留字，因为同样的原因，“class”被改成了“className” 、`<label>` 的“for”被改成了“htmlFor”）。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/font-feature-settings/index.md b/files/zh-cn/web/css/font-feature-settings/index.md
index 84170062ffa2d4..476ebee65e4c19 100644
--- a/files/zh-cn/web/css/font-feature-settings/index.md
+++ b/files/zh-cn/web/css/font-feature-settings/index.md
@@ -29,7 +29,8 @@ font-feature-settings: initial;
 font-feature-settings: unset;
 ```
 
-> **备注：** Web 开发者应该尽可能的使用类似 {{cssxref("font-variant")}} 这样的短标记属性或者相关的速记标识属性等，类似 {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} or {{cssxref("font-variant-position")}}.
+> [!NOTE]
+> Web 开发者应该尽可能的使用类似 {{cssxref("font-variant")}} 这样的短标记属性或者相关的速记标识属性等，类似 {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} or {{cssxref("font-variant-position")}}.
 >
 > 该属性是一个比较偏底层的功能接口，用于解决由于没有其他方法去访问和设置 OpenType 字体某些特性而无法解决一些特殊功能需求。
 >
diff --git a/files/zh-cn/web/css/font-size/index.md b/files/zh-cn/web/css/font-size/index.md
index a0224f823441db..861043b0b42ae9 100644
--- a/files/zh-cn/web/css/font-size/index.md
+++ b/files/zh-cn/web/css/font-size/index.md
@@ -64,7 +64,8 @@ font-size: unset;
 - {{cssxref("&lt;percentage&gt;")}}
   - : 一个正的 {{cssxref("&lt;percentage&gt;")}} 值，相对于父元素的字体大小。
 
-> **备注：** 为了最大化无障碍性，通常最好使用相对于用户默认字体大小的值。
+> [!NOTE]
+> 为了最大化无障碍性，通常最好使用相对于用户默认字体大小的值。
 
 - `math` {{Experimental_Inline}}
   使用特殊的[数学缩放规则](https://w3c.github.io/mathml-core/#the-math-script-level-property)来确定 `font-size` 属性的计算值。
@@ -83,7 +84,8 @@ font-size: unset;
 
 字体大小设置也可以组合使用。例如，如果父元素设置为 `16px`，其子元素设置为 `larger`，则子元素在页面上显示比父元素更大。
 
-> **备注：** 使用 `px` 定义字体大小会[破坏无障碍](https://zh.wikipedia.org/wiki/網頁親和力)，因为用户在某些浏览器中无法更改字体大小。例如，视力有限的用户可能希望将字体大小设置得比网页设计师选择的大小大得多。如果你希望创建包容性设计，请避免使用它们来定义字体大小。
+> [!NOTE]
+> 使用 `px` 定义字体大小会[破坏无障碍](https://zh.wikipedia.org/wiki/網頁親和力)，因为用户在某些浏览器中无法更改字体大小。例如，视力有限的用户可能希望将字体大小设置得比网页设计师选择的大小大得多。如果你希望创建包容性设计，请避免使用它们来定义字体大小。
 
 ### Em
 
diff --git a/files/zh-cn/web/css/font-smooth/index.md b/files/zh-cn/web/css/font-smooth/index.md
index 3100ce7d052ce2..5723540d003282 100644
--- a/files/zh-cn/web/css/font-smooth/index.md
+++ b/files/zh-cn/web/css/font-smooth/index.md
@@ -26,14 +26,16 @@ font-smooth: revert-layer;
 font-smooth: unset;
 ```
 
-> **备注：** Webkit 实现了名为 **`-webkit-font-smoothing`** 的相似属性。该属性仅适用于 macOS。
+> [!NOTE]
+> Webkit 实现了名为 **`-webkit-font-smoothing`** 的相似属性。该属性仅适用于 macOS。
 >
 > - `auto`——由浏览器决定（如果可用，则使用亚像素抗锯齿；这是默认值）。
 > - `none`——关闭字体平滑；显示带有锯齿边缘的文本。
 > - `antialiased`——在像素（而不是亚像素）级别平滑字体。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
 > - `subpixel-antialiased`——在大多数非视网膜显示器上，这将会提供最清晰的文本。
 
-> **备注：** Firefox 实现了名为 **`-moz-osx-font-smoothing`** 的相似属性。该属性仅适用于 macOS。
+> [!NOTE]
+> Firefox 实现了名为 **`-moz-osx-font-smoothing`** 的相似属性。该属性仅适用于 macOS。
 >
 > - `auto`——允许浏览器选择字体平滑的优化方式，通常为 `grayscale`。
 > - `grayscale`——用灰度抗锯齿（而不是亚像素）渲染文本。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
diff --git a/files/zh-cn/web/css/font-variant-alternates/index.md b/files/zh-cn/web/css/font-variant-alternates/index.md
index 6f3fd86b821ef1..eaad08c49a35bd 100644
--- a/files/zh-cn/web/css/font-variant-alternates/index.md
+++ b/files/zh-cn/web/css/font-variant-alternates/index.md
@@ -54,7 +54,8 @@ font-variant-alternates: unset;
 
   - : 此函数可启用装饰物，例如 [fleurons](http://en.wikipedia.org/wiki/Fleuron_%28typography%29) 与其他 dingbat 字形。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值 `ornm`，例如 `ornm 2`。
 
-    > **备注：** 为了保留文本语义，字体设计师应该包括与 Unicode dingbat 字符不匹配的装饰，作为项目符号字符（U + 2022）的装饰变体。请注意，某些现有字体不遵循此建议。
+    > [!NOTE]
+    > 为了保留文本语义，字体设计师应该包括与 Unicode dingbat 字符不匹配的装饰，作为项目符号字符（U + 2022）的装饰变体。请注意，某些现有字体不遵循此建议。
 
 - `annotation()`
   - : 此函数支持注释，如带圆圈的数字或倒置的字符。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值`nalt`，例如 `nalt 2`。
@@ -97,7 +98,8 @@ p {
 
 ### 结果
 
-> **备注：** 你需要安装 OpenType 字体 _Leitura Display Swashes_ 才能使这个例子正常运行。你可以找到一些免费版本进行测试，例如从 [fontsgeek.com](http://fontsgeek.com/fonts/Leitura-Display-Swashes).
+> [!NOTE]
+> 你需要安装 OpenType 字体 _Leitura Display Swashes_ 才能使这个例子正常运行。你可以找到一些免费版本进行测试，例如从 [fontsgeek.com](http://fontsgeek.com/fonts/Leitura-Display-Swashes).
 
 {{ EmbedLiveSample('示例') }}
 
diff --git a/files/zh-cn/web/css/font-variation-settings/index.md b/files/zh-cn/web/css/font-variation-settings/index.md
index b0020cb6d9e467..05dd553af01792 100644
--- a/files/zh-cn/web/css/font-variation-settings/index.md
+++ b/files/zh-cn/web/css/font-variation-settings/index.md
@@ -84,7 +84,8 @@ font-variation-settings: unset;
 
 自定义轴可以是字体设计者希望在字体中改变的任何内容，例如升线或降线的高度、衬线的大小或其他任何可以想象到的内容。只要有唯一的 4 个字符轴，任何轴都可以使用。随着时间的推移，有些轴会变得越来越常见，甚至会被注册。
 
-> **备注：** 注册轴标记使用小写标记，而自定义轴应使用大写标记。需要注意的是，字体设计者并不是必须遵循这种做法，有些设计者也不会这样做。重要的一点是，轴标签是区分大小写的。
+> [!NOTE]
+> 注册轴标记使用小写标记，而自定义轴应使用大写标记。需要注意的是，字体设计者并不是必须遵循这种做法，有些设计者也不会这样做。重要的一点是，轴标签是区分大小写的。
 
 要在操作系统上使用可变字体，需要确保操作系统是最新的。例如，Linux 操作系统需要最新的 Linux Freetype 版本，而 10.13 之前的 macOS 不支持可变字体。如果操作系统不是最新版本，就无法在网页或 Firefox 开发工具中使用可变字体。
 
diff --git a/files/zh-cn/web/css/frequency/index.md b/files/zh-cn/web/css/frequency/index.md
index 636fdceb328cb1..f0d86cf12023c2 100644
--- a/files/zh-cn/web/css/frequency/index.md
+++ b/files/zh-cn/web/css/frequency/index.md
@@ -20,7 +20,8 @@ The `<frequency>` data type consists of a {{cssxref("&lt;number&gt;")}} followed
 - `kHz`
   - : 表示以千赫兹（kilohertz）为单位的频率。例如：`0kHz`、`1.5kHz`、`10kHz`。
 
-> **备注：** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0Hz` or `0kHz`. Though the units are case-insensitive, it is good practice to use a capital "H" for `Hz` and `kHz`, as specified in the [SI](https://en.wikipedia.org/wiki/International_System_of_Units).
+> [!NOTE]
+> Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0Hz` or `0kHz`. Though the units are case-insensitive, it is good practice to use a capital "H" for `Hz` and `kHz`, as specified in the [SI](https://en.wikipedia.org/wiki/International_System_of_Units).
 
 ## 示例
 
@@ -44,7 +45,8 @@ The `<frequency>` data type consists of a {{cssxref("&lt;number&gt;")}} followed
 
 {{Specifications}}
 
-> **备注：** This data type was initially introduced in [CSS Level 2](https://www.w3.org/TR/CSS2/aural.html#q19.0) for the now-obsolete [aural](/zh-CN/docs/Web/CSS/@media/aural) [media type](/zh-CN/docs/Web/CSS/@media#Media_types), where it was used to define the pitch of the voice. However, the `<frequency>` data type has been reintroduced in CSS3, though no CSS property is using it at the moment.
+> [!NOTE]
+> This data type was initially introduced in [CSS Level 2](https://www.w3.org/TR/CSS2/aural.html#q19.0) for the now-obsolete [aural](/zh-CN/docs/Web/CSS/@media/aural) [media type](/zh-CN/docs/Web/CSS/@media#Media_types), where it was used to define the pitch of the voice. However, the `<frequency>` data type has been reintroduced in CSS3, though no CSS property is using it at the moment.
 
 ## 浏览器兼容性
 
diff --git a/files/zh-cn/web/css/gradient/conic-gradient/index.md b/files/zh-cn/web/css/gradient/conic-gradient/index.md
index 155a30c68f8b6a..bee69af8bba324 100644
--- a/files/zh-cn/web/css/gradient/conic-gradient/index.md
+++ b/files/zh-cn/web/css/gradient/conic-gradient/index.md
@@ -53,7 +53,8 @@ background: conic-gradient(
 
 由于 `<gradient>` 属于 `<image>` 数据类型，因此只能用在能使用 `<image>` 的地方。因此，`conic-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("&lt;color&gt;")}} 数据类型的属性上不起作用。
 
-> **备注：** 为什么它被称为“锥形”渐变？如果色块的一侧比另一侧亮得多，则从上面看，它可能看起来像一个圆锥体。
+> [!NOTE]
+> 为什么它被称为“锥形”渐变？如果色块的一侧比另一侧亮得多，则从上面看，它可能看起来像一个圆锥体。
 
 ### 锥形渐变的合成
 
diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md
index 30957deb417e62..e81b29d57f544b 100644
--- a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md
+++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md
@@ -111,7 +111,8 @@ body {
 
 由于最后一个色标是 10%，且渐变是竖直的，因此重复渐变中的每个渐变都是高度的 10%，正好满足 10 个水平线。
 
-> **备注：** 更多示例请参见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)。
+> [!NOTE]
+> 更多示例请参见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md
index 6baa66e71a610c..d20497dc3c94f2 100644
--- a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md
+++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md
@@ -47,7 +47,8 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
     | `farthest-side`   | 类似于 `closest-side`，结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。                        |
     | `farthest-corner` | 渐变的结束形状与容器距离渐变中心点最远的一个角相交。                                                               |
 
-    > **备注：** 早期的函数实现中还包含其他关键字（`cover` 和 `contain`），分别相当于标准关键字 `farthest-corner` 和 `closest-side`。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。
+    > [!NOTE]
+    > 早期的函数实现中还包含其他关键字（`cover` 和 `contain`），分别相当于标准关键字 `farthest-corner` 和 `closest-side`。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。
 
 - `<color-stop>`
   - : 色标（color stop）的 {{cssxref("&lt;color&gt;")}} 值，然后是一个或两个可选的色标位置（沿渐变轴的 {{cssxref("&lt;percentage&gt;")}} 或 {{cssxref("&lt;length&gt;")}}）。百分比值 `0%`，或者长度值 `0`，表示渐变中心点；百分比值 `100%` 表示渐变射线与结束形状相交的点。其间的百分比值线性对应渐变射线上的点。
@@ -118,7 +119,8 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
 
 这个椭圆形渐变会位于左上角靠中心 20% 的位置，在中心和最远角（右下角）之间重复 10 次。支持多位置色标的浏览器会显示为红色和绿色条纹的椭圆形。不支持这个语法的浏览器仍会从红色到黑色再由蓝色到绿色的渐变。
 
-> **备注：** 更多例子请见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)。
+> [!NOTE]
+> 更多例子请见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/grid-column/index.md b/files/zh-cn/web/css/grid-column/index.md
index d91828784776ca..6a302b01b21f90 100644
--- a/files/zh-cn/web/css/grid-column/index.md
+++ b/files/zh-cn/web/css/grid-column/index.md
@@ -31,7 +31,8 @@ slug: Web/CSS/grid-column
 
 如果有一个名为"\<custom-ident>-start"/"\<custom-ident>-start"的命名行，则它将第一行添加到网格项目的位置。
 
-> **警告：** 命名网格区域会自动生成这种形式的隐式命名行，因此请指定`grid-column: foo;`将选择该命名网格区域的开始/结束边缘（除非在其之前明确指定了另一条名为`foo-start / foo-end`的行）。
+> [!WARNING]
+> 命名网格区域会自动生成这种形式的隐式命名行，因此请指定`grid-column: foo;`将选择该命名网格区域的开始/结束边缘（除非在其之前明确指定了另一条名为`foo-start / foo-end`的行）。
 
 否则，将其视为与`<custom-ident>`一起指定了整数 1。
 
diff --git a/files/zh-cn/web/css/grid/index.md b/files/zh-cn/web/css/grid/index.md
index 3078a0cb519b5e..25411c741b9459 100644
--- a/files/zh-cn/web/css/grid/index.md
+++ b/files/zh-cn/web/css/grid/index.md
@@ -12,7 +12,8 @@ slug: Web/CSS/grid
 
 {{EmbedInteractiveExample("pages/css/grid.html")}}
 
-> **备注：** 你仅可在一个 `grid` 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。
+> [!NOTE]
+> 你仅可在一个 `grid` 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/hex-color/index.md b/files/zh-cn/web/css/hex-color/index.md
index ee5465d6b8422f..70e32a90ada0d9 100644
--- a/files/zh-cn/web/css/hex-color/index.md
+++ b/files/zh-cn/web/css/hex-color/index.md
@@ -36,7 +36,8 @@ slug: Web/CSS/hex-color
 
   - : 颜色的 _alpha_ 分量，标示其透明度，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`e` 意为 `ee`。`0`（即 `00`）表示完全透明的颜色，而 `f`（即 `ff`）表示完全不透明的颜色。
 
-> **备注：** 此语法不区分大小写——`#00ff00` 与 `#00FF00` 相同。
+> [!NOTE]
+> 此语法不区分大小写——`#00ff00` 与 `#00FF00` 相同。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/hue-interpolation-method/index.md b/files/zh-cn/web/css/hue-interpolation-method/index.md
index 8025b58befdff7..db60244877be39 100644
--- a/files/zh-cn/web/css/hue-interpolation-method/index.md
+++ b/files/zh-cn/web/css/hue-interpolation-method/index.md
@@ -24,7 +24,8 @@ decreasing hue
 
 任意一对色相角 `θ1` 和 `θ2` 对应{{Glossary("color wheel", "色轮")}}上的两条半径，且将圆周切为两段可用于插值的弧。两段弧均起于第一条半径并止于第二条半径，但一段为顺时针方向而另一段为逆时针方向。
 
-> **备注：** 下列描述和图示均基于色相角沿顺时针方向递增的色轮。注意在其他某些色轮中色相角递增对应逆时针操作。
+> [!NOTE]
+> 下列描述和图示均基于色相角沿顺时针方向递增的色轮。注意在其他某些色轮中色相角递增对应逆时针操作。
 
 有四种确定所用弧的算法：
 
diff --git a/files/zh-cn/web/css/hyphens/index.md b/files/zh-cn/web/css/hyphens/index.md
index 1e74dda68fa5e6..b7462ca10d28b1 100644
--- a/files/zh-cn/web/css/hyphens/index.md
+++ b/files/zh-cn/web/css/hyphens/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/hyphens
 
 连字规则具有语言特定性。在 HTML 中，语言由 lang 属性决定，浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。在 XML 中，必须使用 `xml:lang` 属性。
 
-> **备注：** 在规范中，没有明确定义连字符的实现规则，所以具体的连字符在不同浏览器中可能有所区别。
+> [!NOTE]
+> 在规范中，没有明确定义连字符的实现规则，所以具体的连字符在不同浏览器中可能有所区别。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/image-rendering/index.md b/files/zh-cn/web/css/image-rendering/index.md
index 99b5be25a8e606..0cfca49a170aea 100644
--- a/files/zh-cn/web/css/image-rendering/index.md
+++ b/files/zh-cn/web/css/image-rendering/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/image-rendering
 
 当页面作者指定的尺寸不是图像的原始尺寸时，{{Glossary("user agent", "用户代理")}}将缩放图像。缩放也可能由于用户互动（双指缩放）而发生。举个例子，如果有一张尺寸为 `100×100px` 的图片，但作者有意将尺寸设置为 `200×200px`（或`50×50px`），然后，图片便会根据 `image-rendering` 指定的算法，缩小或放大到新尺寸。此属性对于未缩放的图像没有影响。
 
-> **备注：** The [Canvas API](/zh-CN/docs/Web/API/Canvas_API) can provide a [fallback solution for `crisp-edges`](http://phrogz.net/tmp/canvas_image_zoom.html) through manual image data manipulation.
+> [!NOTE]
+> The [Canvas API](/zh-CN/docs/Web/API/Canvas_API) can provide a [fallback solution for `crisp-edges`](http://phrogz.net/tmp/canvas_image_zoom.html) through manual image data manipulation.
 
 ## 语法
 
@@ -38,7 +39,8 @@ image-rendering: unset;
 - `pixelated`
   - : 放大图像时，使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 `auto` 相同。
 
-> **备注：** 早期草案中出现的 `optimizationQuality` 和 `optimizationSpeed` （来自 SVG 的对应值）分别被定义为 `smooth` 和 `pixelated`。
+> [!NOTE]
+> 早期草案中出现的 `optimizationQuality` 和 `optimizationSpeed` （来自 SVG 的对应值）分别被定义为 `smooth` 和 `pixelated`。
 
 ### 形式语法
 
@@ -84,7 +86,8 @@ img {
 
 {{cssinfo}}
 
-> **备注：** 虽然在最初此属性与 SVG 的 `image-rendering` 属性定义相近，但到现在，它们之间已有相当的差别。
+> [!NOTE]
+> 虽然在最初此属性与 SVG 的 `image-rendering` 属性定义相近，但到现在，它们之间已有相当的差别。
 
 ## 浏览器兼容性
 
@@ -92,7 +95,8 @@ img {
 
 ### 备注
 
-> **备注：** 这是来自旧版浏览器兼容性表格的备注，保留以便查阅。可另行参阅 [Can I use](https://caniuse.com/#search=image-rendering)。
+> [!NOTE]
+> 这是来自旧版浏览器兼容性表格的备注，保留以便查阅。可另行参阅 [Can I use](https://caniuse.com/#search=image-rendering)。
 
 Internet Explorer 7 和 8 支持非标准的 [`-ms-interpolation-mode` 属性](<http://msdn.microsoft.com/en-us/library/ie/ms530822(v=vs.85).aspx>)，有两个属性值：`bicubic` 和 `nearest-neighbor`，和大量差距：
 
diff --git a/files/zh-cn/web/css/image/index.md b/files/zh-cn/web/css/image/index.md
index def960571fcab8..da3899336e15e7 100644
--- a/files/zh-cn/web/css/image/index.md
+++ b/files/zh-cn/web/css/image/index.md
@@ -32,7 +32,8 @@ CSS 确定一个图像对象实际尺寸的依据有三条：(1) 图像的原始
 
 图像可以使用很多 CSS 属性，比如 {{ cssxref("background-image") }}, {{ cssxref("border-image") }}, {{ cssxref("content") }}, {{ cssxref("list-style-image") }} 和{{ cssxref("cursor") }}；
 
-> **备注：** 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看[浏览器兼容性](#浏览器兼容性)了全面的条目列表
+> [!NOTE]
+> 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看[浏览器兼容性](#浏览器兼容性)了全面的条目列表
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/initial/index.md b/files/zh-cn/web/css/initial/index.md
index da383d9aa767db..f9e74278e8e340 100644
--- a/files/zh-cn/web/css/initial/index.md
+++ b/files/zh-cn/web/css/initial/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/initial
 
 CSS 关键字 **`initial`** 将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何 CSS 属性。这包括 CSS 简写 {{cssxref("all")}}，initial 可用于将所有 CSS 属性恢复到其初始状态。
 
-> **备注：** 在继承的属性上，初始值可能是意外的。你应该考虑使用 {{cssxref("inherit")}}, {{cssxref("unset")}}，或{{cssxref("revert")}} 关键字代替。
+> [!NOTE]
+> 在继承的属性上，初始值可能是意外的。你应该考虑使用 {{cssxref("inherit")}}, {{cssxref("unset")}}，或{{cssxref("revert")}} 关键字代替。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/initial_value/index.md b/files/zh-cn/web/css/initial_value/index.md
index a7aca824e8fe28..bfd95acbdc82d7 100644
--- a/files/zh-cn/web/css/initial_value/index.md
+++ b/files/zh-cn/web/css/initial_value/index.md
@@ -10,7 +10,8 @@ slug: Web/CSS/initial_value
 - 对于[继承属性](/zh-CN/docs/CSS/inheritance#Inherited_properties)，初始值只能被用于没有指定值的**根元素**上。
 - 对于[非继承属性](/zh-CN/docs/CSS/inheritance#Non-inherited_properties)，初始值可以被用于**任意**没有指定值的元素上。
 
-> **备注：** 你可以使用 [`initial`](/zh-CN/docs/CSS/initial) 关键词明确指定初始值。
+> [!NOTE]
+> 你可以使用 [`initial`](/zh-CN/docs/CSS/initial) 关键词明确指定初始值。
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/inline_formatting_context/index.md b/files/zh-cn/web/css/inline_formatting_context/index.md
index 1ec6e84d852e88..259f1e0d636c66 100644
--- a/files/zh-cn/web/css/inline_formatting_context/index.md
+++ b/files/zh-cn/web/css/inline_formatting_context/index.md
@@ -28,7 +28,8 @@ Margins, borders, 以及 padding 的设置，在行的方向上是生效的。
 
 {{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}
 
-> **备注：** 此处使用了 logical, flow-relative properties — {{cssxref("padding-inline-start")}}，而不是 {{cssxref("padding-left")}} — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in [Logical Properties and Values](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values).
+> [!NOTE]
+> 此处使用了 logical, flow-relative properties — {{cssxref("padding-inline-start")}}，而不是 {{cssxref("padding-left")}} — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in [Logical Properties and Values](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values).
 
 ## 在块的方向上对齐
 
diff --git a/files/zh-cn/web/css/integer/index.md b/files/zh-cn/web/css/integer/index.md
index a11d9f95186820..342c6fede83d38 100644
--- a/files/zh-cn/web/css/integer/index.md
+++ b/files/zh-cn/web/css/integer/index.md
@@ -13,7 +13,8 @@ l10n:
 
 `<integer>` 数据类型由一个或多个十进制数字（0 至 9 包括在内）组成，可选择在数字前添加一个 `+` 或 `-` 符号。整数没有相关联的单位。
 
-> **备注：** 有效的 `<integer>` 值没有正式的范围，规范也没有指定范围。
+> [!NOTE]
+> 有效的 `<integer>` 值没有正式的范围，规范也没有指定范围。
 
 ## 插值
 
diff --git a/files/zh-cn/web/css/justify-content/index.md b/files/zh-cn/web/css/justify-content/index.md
index e994e351aff376..2d5f1fcd8ba2b8 100644
--- a/files/zh-cn/web/css/justify-content/index.md
+++ b/files/zh-cn/web/css/justify-content/index.md
@@ -76,7 +76,8 @@ justify-content: unset;
 
   - : 如果元素沿主轴的组合尺寸小于对齐容器的尺寸，任何尺寸设置为 `auto` 的元素都会等比例地增加其尺寸（而不是按比例增加），同时仍然遵守由 {{cssxref("max-height")}}/{{cssxref("max-width")}}（或相应功能）施加的约束，以便沿主轴完全填充对齐容器的组合尺寸。
 
-    > **备注：** 虽然弹性盒子支持 `stretch` 属性，但将其应用于弹性盒子时，由于拉伸是由 {{CSSXref("flex")}} 属性控制的，所以 `stretch` 的行为与 `start` 相同。
+    > [!NOTE]
+    > 虽然弹性盒子支持 `stretch` 属性，但将其应用于弹性盒子时，由于拉伸是由 {{CSSXref("flex")}} 属性控制的，所以 `stretch` 的行为与 `start` 相同。
 
 - `safe`
   - : 如果元素溢出对齐容器，则元素将按照对齐模式为 `start` 进行对齐。所期望的对齐将不会被实现。
diff --git a/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.md
index 5d324af92a26b9..1bf26e8e7b33a8 100644
--- a/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.md
+++ b/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.md
@@ -21,7 +21,8 @@ slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/breadcrumb-navigation--download.html)
 
-> **备注：** 上述示例使用了两个选择器来向每个除了首项 `li` 元素以外插入内容。也可以仅用一个选择器达到目标：
+> [!NOTE]
+> 上述示例使用了两个选择器来向每个除了首项 `li` 元素以外插入内容。也可以仅用一个选择器达到目标：
 >
 > ```css
 > .breadcrumb li:not(:first-child)::before {
diff --git a/files/zh-cn/web/css/layout_cookbook/card/index.md b/files/zh-cn/web/css/layout_cookbook/card/index.md
index 4dc2e9cfa473ec..722ac66f9f0aaf 100644
--- a/files/zh-cn/web/css/layout_cookbook/card/index.md
+++ b/files/zh-cn/web/css/layout_cookbook/card/index.md
@@ -40,7 +40,8 @@ slug: Web/CSS/Layout_cookbook/Card
 
 如果该轨道确实有页脚，它将自动调整大小，因为在隐式网格中创建的行是默认自动调整大小的，这样可以让添加到其中的内容适合网格大小。
 
-> **备注：** 由于每张卡片都是独立的网格，所以独立卡片中的各种元素并不互相对齐。所提出的 Grid Level 2 的子网格功能将给这个问题一个解决方案。
+> [!NOTE]
+> 由于每张卡片都是独立的网格，所以独立卡片中的各种元素并不互相对齐。所提出的 Grid Level 2 的子网格功能将给这个问题一个解决方案。
 
 ## 有用的后备措施或替代方法
 
diff --git a/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
index bb736376525c07..9f123c82b7d00d 100644
--- a/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
+++ b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{CSSRef}}
 
-> **备注：** 这是一个 CSS 手册页面的模板页面。创建新手册页面时，请将其用作原始模板。_斜体的内容是关于如何使用模板部分的信息。_
+> [!NOTE]
+> 这是一个 CSS 手册页面的模板页面。创建新手册页面时，请将其用作原始模板。_斜体的内容是关于如何使用模板部分的信息。_
 
 _描述这个方案解决的问题或你正在演示的模式。_
 
diff --git a/files/zh-cn/web/css/layout_cookbook/index.md b/files/zh-cn/web/css/layout_cookbook/index.md
index 06725f3bc7bcd9..88a108893a9d1f 100644
--- a/files/zh-cn/web/css/layout_cookbook/index.md
+++ b/files/zh-cn/web/css/layout_cookbook/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/Layout_cookbook
 
 CSS 布局手册旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。
 
-> **备注：** 如果你是首次接触 CSS 布局，你可以先看一下 [CSS 布局学习模块](/zh-CN/docs/Learn/CSS/CSS_layout)，其中的基础知识有利于你更好的使用本书中的布局样式。
+> [!NOTE]
+> 如果你是首次接触 CSS 布局，你可以先看一下 [CSS 布局学习模块](/zh-CN/docs/Learn/CSS/CSS_layout)，其中的基础知识有利于你更好的使用本书中的布局样式。
 
 ## 布局专题
 
diff --git a/files/zh-cn/web/css/layout_cookbook/sticky_footers/index.md b/files/zh-cn/web/css/layout_cookbook/sticky_footers/index.md
index ec5dc8514984b1..68b39dec98e16b 100644
--- a/files/zh-cn/web/css/layout_cookbook/sticky_footers/index.md
+++ b/files/zh-cn/web/css/layout_cookbook/sticky_footers/index.md
@@ -24,7 +24,8 @@ slug: Web/CSS/Layout_cookbook/Sticky_footers
 >
 > [下载此示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/sticky-footer--download.html)
 
-> **备注：** 在这个示例和接下来的示例中，我们使用一个设置为 `min-height: 100%` 的 wrapper，以便我们的实时示例工作。你也可以通过在 {{htmlelement("body")}} 上设置 {{cssxref("min-height")}} 为 `100vh`，然后将其用作网格容器来实现全页面的效果。
+> [!NOTE]
+> 在这个示例和接下来的示例中，我们使用一个设置为 `min-height: 100%` 的 wrapper，以便我们的实时示例工作。你也可以通过在 {{htmlelement("body")}} 上设置 {{cssxref("min-height")}} 为 `100vh`，然后将其用作网格容器来实现全页面的效果。
 
 ## 做出选择
 
diff --git a/files/zh-cn/web/css/layout_mode/index.md b/files/zh-cn/web/css/layout_mode/index.md
index e94537436b1aff..a8e6532aaffe46 100644
--- a/files/zh-cn/web/css/layout_mode/index.md
+++ b/files/zh-cn/web/css/layout_mode/index.md
@@ -14,7 +14,8 @@ slug: Web/CSS/Layout_mode
 - [**弹性盒子布局**](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Using_CSS_flexible_boxes)：用来布置那些可以顺利调整大小的复杂页面。{{experimental_inline}}
 - [**网格布局**](/zh-CN/docs/Web/CSS/CSS_grid_layout)：用来布置那些与一个固定网格相关的元素。{{experimental_inline}}
 
-> **备注：** 并非所有 [CSS 属性](/zh-CN/docs/Web/CSS/Reference) 适用于所有*布局模式*。大多数属性适用于一到两种布局模式，如果将属性设置在参与其他（原文 another，指三者或三者以上。）布局模式的元素上则会不起作用。
+> [!NOTE]
+> 并非所有 [CSS 属性](/zh-CN/docs/Web/CSS/Reference) 适用于所有*布局模式*。大多数属性适用于一到两种布局模式，如果将属性设置在参与其他（原文 another，指三者或三者以上。）布局模式的元素上则会不起作用。
 
 ## 参见
 
diff --git a/files/zh-cn/web/css/length/index.md b/files/zh-cn/web/css/length/index.md
index 14a97eb84075bc..2c3ba6c7bf6c17 100644
--- a/files/zh-cn/web/css/length/index.md
+++ b/files/zh-cn/web/css/length/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/length
 
 长度 **`<length>`** 是用于表示距离尺寸的 [CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types)。许多 CSS 属性会用到长度，比如 {{Cssxref("width")}}、{{Cssxref("margin")}}、{{Cssxref("padding")}}、{{Cssxref("font-size")}}、{{Cssxref("border-width")}} 和 {{Cssxref("text-shadow")}}。
 
-> **备注：** 虽然 {{cssxref("&lt;percentage&gt;")}} 值也是 CSS 维度，并且可以在接受 `<length>` 值的某些相同属性中使用，但它们本身不是 `<length>` 值。具体请参阅{{cssxref("&lt;length-percentage&gt;")}}。
+> [!NOTE]
+> 虽然 {{cssxref("&lt;percentage&gt;")}} 值也是 CSS 维度，并且可以在接受 `<length>` 值的某些相同属性中使用，但它们本身不是 `<length>` 值。具体请参阅{{cssxref("&lt;length-percentage&gt;")}}。
 
 ## 语法
 
@@ -25,7 +26,8 @@ slug: Web/CSS/length
 
 字体的相对长度指的是根据一个特定字符的大小或当前字符所在元素的父元素所定义的字符大小来定义长度值。
 
-> **备注：** 这些相对单位，尤其是 em 和 rem, 经常被用于满足即使用户更改字体大小，也可以保持页面的垂直阅读节奏可拓展布局中
+> [!NOTE]
+> 这些相对单位，尤其是 em 和 rem, 经常被用于满足即使用户更改字体大小，也可以保持页面的垂直阅读节奏可拓展布局中
 
 - `cap` {{experimental_inline}}
   - : 表示元素字体 {{Cssxref("font")}} 的“上限高度”（cap height，大写字母的标称高度（nominal height））。
@@ -70,7 +72,8 @@ slug: Web/CSS/length
 
 对于高 dpi 设备，英寸（in）、厘米（cm）和毫米（mm）与物理设备相同。因此，px 单位是相对于它们定义的（1/96 of 1 inch）。
 
-> **备注：** 很多用户选择增加用户代理 {{glossary("user agent")}} 的字体大小以提高文本可读性。因为绝对长度是固定值，无法根据用户的设置进行缩放，因此会降低页面友好性，因此在设置字体大小 `font-size` 相关的长度值时，最好优先选择使用相对长度单位，比如 `em` 或 `rem`。
+> [!NOTE]
+> 很多用户选择增加用户代理 {{glossary("user agent")}} 的字体大小以提高文本可读性。因为绝对长度是固定值，无法根据用户的设置进行缩放，因此会降低页面友好性，因此在设置字体大小 `font-size` 相关的长度值时，最好优先选择使用相对长度单位，比如 `em` 或 `rem`。
 >
 > **译者注：** 一些浏览器还支持设置最低字体大小。常见的最低字体大小限制为 9px 到 12px，
 
diff --git a/files/zh-cn/web/css/margin/index.md b/files/zh-cn/web/css/margin/index.md
index 66cc6cb203af5c..f641ae6ade9756 100644
--- a/files/zh-cn/web/css/margin/index.md
+++ b/files/zh-cn/web/css/margin/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/margin
 
 上、下外边框的设置对*不[可替换](/zh-CN/docs/Web/CSS/Replaced_element)*内联元素，如 {{HTMLElement("span")}} 和 {{HTMLElement("code")}}，无效。
 
-> **备注：** 外边距控制的是元素外部空出的空间。相反，{{cssxref("padding")}} 操作元素*内部*空出的空间。
+> [!NOTE]
+> 外边距控制的是元素外部空出的空间。相反，{{cssxref("padding")}} 操作元素*内部*空出的空间。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/mask-border-slice/index.md b/files/zh-cn/web/css/mask-border-slice/index.md
index d21e5de0e24fd0..e82b3f369d0509 100644
--- a/files/zh-cn/web/css/mask-border-slice/index.md
+++ b/files/zh-cn/web/css/mask-border-slice/index.md
@@ -57,7 +57,7 @@ mask-border-slice: unset;
 
 切片过程总共创建九个区域：四个角、四条边和一个中间区域。四条切片线从各自的边上设置一定的距离，控制区域的大小。
 
-[![由 border-image 或 border-image-slice 属性定义的九个区域](border-image-slice.png)](border-image-slice.png)
+![由 border-image 或 border-image-slice 属性定义的九个区域](border-image-slice.png)
 
 - 1-4 区为边角区域。每个区域只使用一次，以形成最终边框图像的边角。
 - 5-8 区为边缘区域。这些区域会在最终边框图像中进行[重复、缩放或其他修改](/zh-CN/docs/Web/CSS/mask-border-repeat)，以匹配元素的尺寸。
@@ -91,7 +91,8 @@ mask-border-slice: 30 fill;
 
 > **备注：** [`mask-border`](/zh-CN/docs/Web/CSS/mask-border) 页面提供了一个有效的示例（使用 Chromium 支持的过期前缀边框蒙版属性），因此你可以大致了解效果。
 
-> **备注：** 如果希望元素的内容可见，则必须包含 fill 关键字。
+> [!NOTE]
+> 如果希望元素的内容可见，则必须包含 fill 关键字。
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/mask/index.md b/files/zh-cn/web/css/mask/index.md
index a910d0ecc2e79f..16d4127bcdacfb 100644
--- a/files/zh-cn/web/css/mask/index.md
+++ b/files/zh-cn/web/css/mask/index.md
@@ -29,7 +29,8 @@ mask: initial;
 mask: unset;
 ```
 
-> **备注：** mask 的简写会将 {{cssxref("mask-border")}} 设为初始值。使用 `mask` 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 `mask-border` 也会重新设置为新的效果样式。
+> [!NOTE]
+> mask 的简写会将 {{cssxref("mask-border")}} 设为初始值。使用 `mask` 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 `mask-border` 也会重新设置为新的效果样式。
 
 {{cssinfo}}
 
diff --git a/files/zh-cn/web/css/mozilla_extensions/index.md b/files/zh-cn/web/css/mozilla_extensions/index.md
index b0c0e7376b69f9..6a46394ff304fb 100644
--- a/files/zh-cn/web/css/mozilla_extensions/index.md
+++ b/files/zh-cn/web/css/mozilla_extensions/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Firefox 支持一些 _[CSS](/zh-CN/docs/Web/CSS) 的 Mozilla 扩展_，包括属性、值、伪元素、伪类、at 规则和媒体查询。这些扩展具有 `-moz-` 前缀。
 
-> **备注：** 这些扩展大多是实验性的或已弃用的，但出于向后兼容性而被保留。请勿在生产环境的网站中使用它们。
+> [!NOTE]
+> 这些扩展大多是实验性的或已弃用的，但出于向后兼容性而被保留。请勿在生产环境的网站中使用它们。
 
 ## 仅 Mozilla 具有的属性
 
@@ -30,7 +31,8 @@ Firefox 支持一些 _[CSS](/zh-CN/docs/Web/CSS) 的 Mozilla 扩展_，包括属
 
 ## 以前为专有而现在已被标准化的属性
 
-> **备注：** 为最大限度地提高 CSS 的兼容性，你应该使用下面列出的不带前缀的标准属性，而不是带有前缀的属性。一旦某个属性被标准化并且已在没有前缀的情况下实现，那么在一段时间后，带有前缀的版本通常会被删除。
+> [!NOTE]
+> 为最大限度地提高 CSS 的兼容性，你应该使用下面列出的不带前缀的标准属性，而不是带有前缀的属性。一旦某个属性被标准化并且已在没有前缀的情况下实现，那么在一段时间后，带有前缀的版本通常会被删除。
 
 ### A
 
diff --git a/files/zh-cn/web/css/object-position/index.md b/files/zh-cn/web/css/object-position/index.md
index b3a5184065ddf3..e1e96f9b94095e 100644
--- a/files/zh-cn/web/css/object-position/index.md
+++ b/files/zh-cn/web/css/object-position/index.md
@@ -47,7 +47,8 @@ object-position: unset;
 - {{cssxref("&lt;position&gt;")}}
   - : 使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。
 
-> **备注：** 这些定位方式允许被替换元素的对象被定位到内容框外部。
+> [!NOTE]
+> 这些定位方式允许被替换元素的对象被定位到内容框外部。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/offset/index.md b/files/zh-cn/web/css/offset/index.md
index 77847833f880bf..12fda03b2eb2eb 100644
--- a/files/zh-cn/web/css/offset/index.md
+++ b/files/zh-cn/web/css/offset/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/offset
 
 **`offset`** CSS [简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties)设置了沿定义的路径为元素设置动画所需的所有属性。
 
-> **备注：** 规范的早期版本称此属性为 `motion`。
+> [!NOTE]
+> 规范的早期版本称此属性为 `motion`。
 
 {{EmbedInteractiveExample("pages/css/offset.html")}}
 
diff --git a/files/zh-cn/web/css/outline/index.md b/files/zh-cn/web/css/outline/index.md
index ee6e7a98ee84fa..245a1ff46cb269 100644
--- a/files/zh-cn/web/css/outline/index.md
+++ b/files/zh-cn/web/css/outline/index.md
@@ -41,7 +41,8 @@ outline: unset;
 
 `outline` 属性可使用以下一个、两个或三个值来声明，且顺序不重要。
 
-> **备注：** 对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 `none`。但 `input` 元素是例外，其样式默认值由浏览器决定。
+> [!NOTE]
+> 对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 `none`。但 `input` 元素是例外，其样式默认值由浏览器决定。
 
 ### 取值
 
diff --git a/files/zh-cn/web/css/overflow-wrap/index.md b/files/zh-cn/web/css/overflow-wrap/index.md
index 92dbe23fe23477..e075dd9d2554b9 100644
--- a/files/zh-cn/web/css/overflow-wrap/index.md
+++ b/files/zh-cn/web/css/overflow-wrap/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/overflow-wrap
 
 [CSS](/zh-CN/docs/Web/CSS) 属性 **`overflow-wrap`** 应用于行级元素，用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。
 
-> **备注：** 与 {{cssxref("word-break")}} 相比，`overflow-wrap` 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。
+> [!NOTE]
+> 与 {{cssxref("word-break")}} 相比，`overflow-wrap` 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。
 
 这个属性原本属于微软扩展的一个非标准、无前缀的属性，叫做 `word-wrap`，后来在大多数浏览器中以相同的名称实现。目前它已被更名为 {{cssxref("overflow-wrap")}}，`word-wrap` 相当于其别称。
 
diff --git a/files/zh-cn/web/css/overflow-x/index.md b/files/zh-cn/web/css/overflow-x/index.md
index a8846bd7499a37..120d0b4dda99ad 100644
--- a/files/zh-cn/web/css/overflow-x/index.md
+++ b/files/zh-cn/web/css/overflow-x/index.md
@@ -46,7 +46,8 @@ overflow-x: unset;
 - `auto`
   - : 元素边距框中的溢出内容会被截断，且溢出内容可通过滚动以进行浏览。与 `scroll` 关键字值不同的是，用户代理*只在*内容溢出时显示滚动条，默认不会显示滚动条。如果内容可以适应元素的边距框，则看起来与 `visible` 相同，但仍然会创建新的区块格式化上下文。桌面浏览器会在内容溢出时显示滚动条。
 
-> **备注：** 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。
+> [!NOTE]
+> 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/overflow-y/index.md b/files/zh-cn/web/css/overflow-y/index.md
index 1f57275fbf3a8c..137063fdcd0ece 100644
--- a/files/zh-cn/web/css/overflow-y/index.md
+++ b/files/zh-cn/web/css/overflow-y/index.md
@@ -46,7 +46,8 @@ overflow-y: unset;
 - `auto`
   - : 元素边距框中的溢出内容会被截断，且溢出内容可通过滚动以进行浏览。与 `scroll` 关键字值不同的是，用户代理*只在*内容溢出时显示滚动条，默认不会显示滚动条。如果内容可以适应元素的边距框，则看起来与 `visible` 相同，但仍然会创建新的格式化上下文。
 
-> **备注：** 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。
+> [!NOTE]
+> 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/overscroll-behavior-x/index.md b/files/zh-cn/web/css/overscroll-behavior-x/index.md
index 00053ae284261c..3877b272700f73 100644
--- a/files/zh-cn/web/css/overscroll-behavior-x/index.md
+++ b/files/zh-cn/web/css/overscroll-behavior-x/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/overscroll-behavior-x
 
 **`overscroll-behavior-x`** 这个 CSS 属性用来控制当滚动到区域的水平边界时的浏览器行为。
 
-> **备注：** 详细的解释请访问 {{cssxref("overscroll-behavior")}}
+> [!NOTE]
+> 详细的解释请访问 {{cssxref("overscroll-behavior")}}
 
 ```css
 /* Keyword values */
diff --git a/files/zh-cn/web/css/padding-bottom/index.md b/files/zh-cn/web/css/padding-bottom/index.md
index c3c1bb545b1213..38f5986c696bb2 100644
--- a/files/zh-cn/web/css/padding-bottom/index.md
+++ b/files/zh-cn/web/css/padding-bottom/index.md
@@ -15,7 +15,8 @@ l10n:
 
 ![CSS padding-bottom 属性对元素盒子的影响](padding-bottom.svg)
 
-> **备注：** 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
+> [!NOTE]
+> 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/padding-left/index.md b/files/zh-cn/web/css/padding-left/index.md
index b8258a97bb2095..b57e33130f15e5 100644
--- a/files/zh-cn/web/css/padding-left/index.md
+++ b/files/zh-cn/web/css/padding-left/index.md
@@ -13,7 +13,8 @@ l10n:
 
 元素的内边距区域是其内容和边框之间的空间。
 
-> **备注：** 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
+> [!NOTE]
+> 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/padding-right/index.md b/files/zh-cn/web/css/padding-right/index.md
index 6bd460d5962223..7497d388ba8b34 100644
--- a/files/zh-cn/web/css/padding-right/index.md
+++ b/files/zh-cn/web/css/padding-right/index.md
@@ -13,7 +13,8 @@ l10n:
 
 元素的内边距区域是其内容和边框之间的空间。
 
-> **备注：** 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
+> [!NOTE]
+> 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/padding-top/index.md b/files/zh-cn/web/css/padding-top/index.md
index 0dba167002ad85..13f066fb281842 100644
--- a/files/zh-cn/web/css/padding-top/index.md
+++ b/files/zh-cn/web/css/padding-top/index.md
@@ -15,7 +15,8 @@ l10n:
 
 ![CSS padding-top 属性对元素盒子的影响](padding-top.svg)
 
-> **备注：** 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
+> [!NOTE]
+> 通过 {{cssxref("padding")}} 属性，只需一次声明，就可以为元素的所有四边设置内边距。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/padding/index.md b/files/zh-cn/web/css/padding/index.md
index 36e678ed7d1478..b221b52b82be13 100644
--- a/files/zh-cn/web/css/padding/index.md
+++ b/files/zh-cn/web/css/padding/index.md
@@ -13,7 +13,8 @@ l10n:
 
 一个元素的内边距区域指的是其内容与其边框之间的空间。
 
-> **备注：** 内边距创建元素内部的额外空间。相反，{{cssxref("margin")}} 创建元素*外部*的额外空间。
+> [!NOTE]
+> 内边距创建元素内部的额外空间。相反，{{cssxref("margin")}} 创建元素*外部*的额外空间。
 
 ## 属性构成
 
diff --git a/files/zh-cn/web/css/page-break-after/index.md b/files/zh-cn/web/css/page-break-after/index.md
index 5f76784f36fe2c..3749476a0b7992 100644
--- a/files/zh-cn/web/css/page-break-after/index.md
+++ b/files/zh-cn/web/css/page-break-after/index.md
@@ -25,7 +25,8 @@ page-break-after: initial;
 page-break-after: unset;
 ```
 
-> **备注：** 这个属性正在被更通用的 {{ cssxref("break-after")}} 取代。这个新的属性也处理列和区域中断，并在语法上兼容 `page-break-after`。
+> [!NOTE]
+> 这个属性正在被更通用的 {{ cssxref("break-after")}} 取代。这个新的属性也处理列和区域中断，并在语法上兼容 `page-break-after`。
 >
 > 在使用 `page-break-after` 之前，请检查是否可以使用 `break-after` 代替。在将来， `page-break-after` 将只是它的一些值的别名。
 
diff --git a/files/zh-cn/web/css/paint-order/index.md b/files/zh-cn/web/css/paint-order/index.md
index c6892d3870320c..c7deaa2d0670b8 100644
--- a/files/zh-cn/web/css/paint-order/index.md
+++ b/files/zh-cn/web/css/paint-order/index.md
@@ -26,7 +26,8 @@ paint-order: markers stroke fill; /* 先 markers, 然后 stroke, 然后 fill */
 
 当只指定一个值的时候，这个值将会被首先渲染，然后剩下的两个值将会以默认顺序渲染，当只指定两个值的时候，这两个值会以指定的顺序渲染，接着渲染剩下的未指定的那个。
 
-> **备注：** 在这个属性的值当中，markers 只有当在绘制 SVG 图形时引用了 `marker-*`属性（例如 [`marker-start`](/zh-CN/docs/Web/SVG/Attribute/marker-start)）和 [`<marker>`](/zh-CN/docs/Web/SVG/Element/marker) 元素才能进行控制。他们不适用于 HTML 文本，所以，这样的话，你只能决定 `stroke` 和 `fill` 的顺序。
+> [!NOTE]
+> 在这个属性的值当中，markers 只有当在绘制 SVG 图形时引用了 `marker-*`属性（例如 [`marker-start`](/zh-CN/docs/Web/SVG/Attribute/marker-start)）和 [`<marker>`](/zh-CN/docs/Web/SVG/Element/marker) 元素才能进行控制。他们不适用于 HTML 文本，所以，这样的话，你只能决定 `stroke` 和 `fill` 的顺序。
 
 ### 属性值
 
diff --git a/files/zh-cn/web/css/percentage/index.md b/files/zh-cn/web/css/percentage/index.md
index 46218ca4ad8e02..d2cb7487602e57 100644
--- a/files/zh-cn/web/css/percentage/index.md
+++ b/files/zh-cn/web/css/percentage/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/percentage
 
 许多长度属性使用百分比，如 {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}。百分比也可以在 {{Cssxref("font-size")}} 看到，其中的文字大小是其父级元素的大小直接相关。
 
-> **备注：** 只有计算值是可以继承的。所以，即使一个百分比值用于父属性，一个真正的值，比如具体像素宽度 {{cssxref("&lt;length&gt;")}} 的值，将访问继承的属性，而不是百分比的值。
+> [!NOTE]
+> 只有计算值是可以继承的。所以，即使一个百分比值用于父属性，一个真正的值，比如具体像素宽度 {{cssxref("&lt;length&gt;")}} 的值，将访问继承的属性，而不是百分比的值。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/place-content/index.md b/files/zh-cn/web/css/place-content/index.md
index ba1e89d85c8307..14dfbd3df7d619 100644
--- a/files/zh-cn/web/css/place-content/index.md
+++ b/files/zh-cn/web/css/place-content/index.md
@@ -40,7 +40,8 @@ place-content: unset;
 
 第一个值为 {{CSSxRef("align-content")}} 属性，第二个值为 {{CSSxRef("justify-content")}} .
 
-> **警告：** 如果没有设置第二个值，那么第二个的值与第一个相等，此前提是第一个值对两个属性都是有效的。如果设置的这个值对两个属性都无效，那么整个设置的值就是无效的。
+> [!WARNING]
+> 如果没有设置第二个值，那么第二个的值与第一个相等，此前提是第一个值对两个属性都是有效的。如果设置的这个值对两个属性都无效，那么整个设置的值就是无效的。
 
 ### 参考值
 
diff --git a/files/zh-cn/web/css/position_value/index.md b/files/zh-cn/web/css/position_value/index.md
index 25fd48bf1acdb5..ea04ae5a4f38f3 100644
--- a/files/zh-cn/web/css/position_value/index.md
+++ b/files/zh-cn/web/css/position_value/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/position_value
 
 [CSS](/zh-CN/docs/Web/CSS) `<position>`（或 **`<bg-position>`**）[数据类型](/zh-CN/docs/Web/CSS/CSS_Types)表示用于设置相对于元素盒子的位置的 2 维空间中的坐标。它被用于 {{cssxref("background-position")}} 和 {{cssxref("offset-anchor")}} 属性。
 
-> **备注：** 由 `<position>` 值表述的最终位置并不需要位于元素的盒子中。
+> [!NOTE]
+> 由 `<position>` 值表述的最终位置并不需要位于元素的盒子中。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/pseudo-classes/index.md b/files/zh-cn/web/css/pseudo-classes/index.md
index b1db4981ad85f2..6c63468e828a07 100644
--- a/files/zh-cn/web/css/pseudo-classes/index.md
+++ b/files/zh-cn/web/css/pseudo-classes/index.md
@@ -18,7 +18,8 @@ button:hover {
 
 伪类让你可以将样式应用于元素，不仅与文档树内容有关，也与外部因素有关——如与导航历史有关的（例如，{{CSSxRef(":visited")}}）、与其内容的状态有关的（如某些表单元素上的 {{CSSxRef(":checked")}}）或者与鼠标位置有关的（如 {{CSSxRef(":hover")}}，它可以让你知道鼠标是否在一个元素上）。
 
-> **备注：** 相较于伪类，[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)可用于设置元素*特定部分*的样式。
+> [!NOTE]
+> 相较于伪类，[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)可用于设置元素*特定部分*的样式。
 
 ## 元素显示状态伪类
 
diff --git a/files/zh-cn/web/css/pseudo-elements/index.md b/files/zh-cn/web/css/pseudo-elements/index.md
index 44e5b8601df1b0..e713d8a5c8b3de 100644
--- a/files/zh-cn/web/css/pseudo-elements/index.md
+++ b/files/zh-cn/web/css/pseudo-elements/index.md
@@ -15,7 +15,8 @@ p::first-line {
 }
 ```
 
-> **备注：** 与伪元素比较，{{cssxref("pseudo-classes")}} 能够根据*状态*改变元素样式。
+> [!NOTE]
+> 与伪元素比较，{{cssxref("pseudo-classes")}} 能够根据*状态*改变元素样式。
 
 ## 语法
 
@@ -27,7 +28,8 @@ selector::pseudo-element {
 
 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
 
-> **备注：** 按照规范，应该使用双冒号（`::`）而不是单个冒号（`:`），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。
+> [!NOTE]
+> 按照规范，应该使用双冒号（`::`）而不是单个冒号（`:`），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。
 
 ## 字母索引
 
diff --git a/files/zh-cn/web/css/reference/index.md b/files/zh-cn/web/css/reference/index.md
index be29688942fc7d..e79031d0ae8448 100644
--- a/files/zh-cn/web/css/reference/index.md
+++ b/files/zh-cn/web/css/reference/index.md
@@ -51,7 +51,8 @@ div.menu-bar li:hover > ul {
 
 ## 索引
 
-> **备注：** 此索引中的属性名称**不包括**与 CSS 标准名称不同的 [JavaScript 名称](#索引)。
+> [!NOTE]
+> 此索引中的属性名称**不包括**与 CSS 标准名称不同的 [JavaScript 名称](#索引)。
 
 {{CSS_Ref}}
 
diff --git a/files/zh-cn/web/css/resolution/index.md b/files/zh-cn/web/css/resolution/index.md
index a6df06eee2ca5c..0e5b08adfe55c1 100644
--- a/files/zh-cn/web/css/resolution/index.md
+++ b/files/zh-cn/web/css/resolution/index.md
@@ -26,7 +26,8 @@ l10n:
 - `x`
   - : `dppx` 的别名。
 
-> **备注：** 虽然数字 `0` 在任何单位下都是相同的，但单位不能省略。换句话说，`0` 无效，不能代表 `0dpi`、`0dpcm` 或 `0dppx`。
+> [!NOTE]
+> 虽然数字 `0` 在任何单位下都是相同的，但单位不能省略。换句话说，`0` 无效，不能代表 `0dpi`、`0dpcm` 或 `0dppx`。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.md b/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.md
index 5e0d9de3c7d9ef..a3104bb0f64b0b 100644
--- a/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.md
+++ b/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.md
@@ -60,7 +60,8 @@ SVG 相比其他格式为我们提供了更多的灵活性，与此同时当我
 
 现在让我们来看看这些图片在各种缩放情景下怎么展现。以下例子都是宽 300 高 200 像素的矩形。此外， {{ cssxref("background-repeat") }} 都设为了 no-repeat，以便看得出来缩放的情况。
 
-> **备注：** 以下截屏只表达**符合预期的**渲染效果。目前不是所有的浏览器都能正确的渲染这些代码。
+> [!NOTE]
+> 以下截屏只表达**符合预期的**渲染效果。目前不是所有的浏览器都能正确的渲染这些代码。
 
 ### 两个维度都指定尺寸
 
diff --git a/files/zh-cn/web/css/scroll-margin-inline/index.md b/files/zh-cn/web/css/scroll-margin-inline/index.md
index 98c99357418ddf..f1d1045eb98455 100644
--- a/files/zh-cn/web/css/scroll-margin-inline/index.md
+++ b/files/zh-cn/web/css/scroll-margin-inline/index.md
@@ -125,7 +125,8 @@ scroll-margin-inline: unset;
 
 这意味着当滚动过中间的子元素后，滚动将吸附至第二个 `<div>` 行末边的 `1rem` 外处，及第三个 `<div>` 行末边的 `2rems` 外处。
 
-> **备注：** 此处虽然在行向轴（即此情形中的 x 轴）的首侧*和*末侧均设置了 `scroll-margin`，但真正相关的仅有末侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline: 0 1rem` 或 `scroll-margin-inline-end: 1rem`，则效果相同。
+> [!NOTE]
+> 此处虽然在行向轴（即此情形中的 x 轴）的首侧*和*末侧均设置了 `scroll-margin`，但真正相关的仅有末侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline: 0 1rem` 或 `scroll-margin-inline-end: 1rem`，则效果相同。
 
 #### 结果
 
diff --git a/files/zh-cn/web/css/scroll-margin/index.md b/files/zh-cn/web/css/scroll-margin/index.md
index c34b64a17aa9c0..16dae3b417a51f 100644
--- a/files/zh-cn/web/css/scroll-margin/index.md
+++ b/files/zh-cn/web/css/scroll-margin/index.md
@@ -129,7 +129,8 @@ scroll-margin: unset;
 
 这意味着当滚动过中间的子元素后，滚动将吸附至第二个 `<div>` 左侧边的 `1rem` 外处，及第三个 `<div>` 左侧边的 `2rems` 外处。
 
-> **备注：** 此处虽然在所有侧均设置了 `scroll-margin`，但真正相关的仅有首侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline-start: 1rem` 或 `scroll-margin: 0 0 0 1rem`，则效果相同。
+> [!NOTE]
+> 此处虽然在所有侧均设置了 `scroll-margin`，但真正相关的仅有首侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline-start: 1rem` 或 `scroll-margin: 0 0 0 1rem`，则效果相同。
 
 #### 结果
 
diff --git a/files/zh-cn/web/css/scroll-snap-type/index.md b/files/zh-cn/web/css/scroll-snap-type/index.md
index 06db007043e90c..6b1282c078ff53 100644
--- a/files/zh-cn/web/css/scroll-snap-type/index.md
+++ b/files/zh-cn/web/css/scroll-snap-type/index.md
@@ -57,7 +57,8 @@ scroll-snap-type: unset;
 - `proximity`
   - : 若滚动容器当前未在滚动，则其可见视口可以吸附至吸附位置。是否吸附由用户代理根据滚动参数决定。若指定了吸附轴，则此为默认的吸附程度。
 
-> **备注：** 若吸附口中的内容发生变动（如被添加、移动、删除或改变尺寸）或者与滚动吸附相关的任意属性（如 `scroll-snap-type` 或 `scroll-margin`）的值发生变化，则滚动容器将按照 `scroll-snap-type` 最新的值[重新吸附](https://drafts.csswg.org/css-scroll-snap/#re-snap)。
+> [!NOTE]
+> 若吸附口中的内容发生变动（如被添加、移动、删除或改变尺寸）或者与滚动吸附相关的任意属性（如 `scroll-snap-type` 或 `scroll-margin`）的值发生变化，则滚动容器将按照 `scroll-snap-type` 最新的值[重新吸附](https://drafts.csswg.org/css-scroll-snap/#re-snap)。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/scrollbar-width/index.md b/files/zh-cn/web/css/scrollbar-width/index.md
index aa1f50e947c14b..0a6d6bfd2aa538 100644
--- a/files/zh-cn/web/css/scrollbar-width/index.md
+++ b/files/zh-cn/web/css/scrollbar-width/index.md
@@ -46,7 +46,8 @@ scrollbar-width: unset;
       </tbody>
     </table>
 
-    > **备注：** 用户代理必须将应用于根元素的任何 `scrollbar-width` 值应用于视口。
+    > [!NOTE]
+    > 用户代理必须将应用于根元素的任何 `scrollbar-width` 值应用于视口。
 
 ## 无障碍考虑
 
diff --git a/files/zh-cn/web/css/shorthand_properties/index.md b/files/zh-cn/web/css/shorthand_properties/index.md
index d3a574d6c83380..162d806c9869e4 100644
--- a/files/zh-cn/web/css/shorthand_properties/index.md
+++ b/files/zh-cn/web/css/shorthand_properties/index.md
@@ -26,7 +26,7 @@ p {
 
 以上样式不会将 background 的 color 值设置为 `red`，而是 {{cssxref("background-color")}} 的默认值 `transparent`。
 
-关键词 inherit 只可以应用于单独属性（individual properties），如果应用于一个简写属性（shorthand property），则必须整体应用，而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值（initial value）替代，因此不可能允许单个属性通过省略继承的。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 `inherit` 的普通属性（longhand property）。
+关键词 inherit 只可以应用于单独属性（individual properties），如果应用于一个简写属性（shorthand property），则必须整体应用，而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值（initial value）替代，因此不可能允许单个属性通过省略继承的。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 `inherit` 的全称属性（longhand property）。
 
 ### 属性的顺序
 
diff --git a/files/zh-cn/web/css/specificity/index.md b/files/zh-cn/web/css/specificity/index.md
index b8131b1ff4e327..ad7b38738e1b84 100644
--- a/files/zh-cn/web/css/specificity/index.md
+++ b/files/zh-cn/web/css/specificity/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/Specificity
 
 当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
 
-> **备注：** 文档树中[元素的接近度](#无视_dom_树中的距离)对优先级没有影响。
+> [!NOTE]
+> 文档树中[元素的接近度](#无视_dom_树中的距离)对优先级没有影响。
 
 ### 选择器类型
 
diff --git a/files/zh-cn/web/css/string/index.md b/files/zh-cn/web/css/string/index.md
index 2002ce65806e8c..22eaa2969c64e6 100644
--- a/files/zh-cn/web/css/string/index.md
+++ b/files/zh-cn/web/css/string/index.md
@@ -17,7 +17,8 @@ slug: Web/CSS/string
 
 当你想换行的时候，必须使用像 **`\A`** 或者 **`\00000A`** 这样的换行符。不过在你的代码中，可以通过在每行末尾增加一个反斜线（**`\`**）的方式来创建一个多行的字符串。
 
-> **备注：** CSS **`<string>`** 中不能使用像 **`&nbsp;`** 或者 **`&#8212;`** 这样的实体。
+> [!NOTE]
+> CSS **`<string>`** 中不能使用像 **`&nbsp;`** 或者 **`&#8212;`** 这样的实体。
 
 ## 例子
 
diff --git a/files/zh-cn/web/css/syntax/index.md b/files/zh-cn/web/css/syntax/index.md
index a1c54d00a7dcc5..74112c6b0c1cf6 100644
--- a/files/zh-cn/web/css/syntax/index.md
+++ b/files/zh-cn/web/css/syntax/index.md
@@ -30,7 +30,8 @@ CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值
 
 ![css syntax - declarations block.png](declaration-block.png)
 
-> **备注：** 声明块的内容—开始与结束大括号之间的声明，可以放在 HTML [`style`](/zh-CN/HTML/Global_attributes#attr-style) 特性里。
+> [!NOTE]
+> 声明块的内容—开始与结束大括号之间的声明，可以放在 HTML [`style`](/zh-CN/HTML/Global_attributes#attr-style) 特性里。
 
 ## CSS 规则
 
diff --git a/files/zh-cn/web/css/text-emphasis-color/index.md b/files/zh-cn/web/css/text-emphasis-color/index.md
new file mode 100644
index 00000000000000..d71d13d47bb13b
--- /dev/null
+++ b/files/zh-cn/web/css/text-emphasis-color/index.md
@@ -0,0 +1,84 @@
+---
+title: text-emphasis-color
+slug: Web/CSS/text-emphasis-color
+l10n:
+  sourceCommit: 5f13cbe7517ce96deeb521d4c8e6923266a22913
+---
+
+{{CSSRef}}
+
+[CSS](/zh-CN/docs/Web/CSS) 属性 **`text-emphasis-color`** 设置强调色。这个值也可以使用简写属性 {{cssxref("text-emphasis")}} 来设置。
+
+{{EmbedInteractiveExample("pages/css/text-emphasis-color.html")}}
+
+## 语法
+
+```css
+/* 初始值 */
+text-emphasis-color: currentcolor;
+
+/* <color> */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgb(90 200 160 / 80%);
+text-emphasis-color: transparent;
+
+/* 全局值 */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: revert;
+text-emphasis-color: revert-layer;
+text-emphasis-color: unset;
+```
+
+### 取值
+
+- `<color>`
+  - : 指定用作强调色的颜色。如果未定义，该值默认为 `currentcolor`。
+
+## 形式定义
+
+{{CSSInfo}}
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 设置自定义强调色和强调标记
+
+#### CSS
+
+```css
+em {
+  text-emphasis-color: green;
+  text-emphasis-style: "*";
+}
+```
+
+#### HTML
+
+```html
+<p>这是一个示例：</p>
+
+<em>这里有强调标记！</em>
+```
+
+#### 结果
+
+{{EmbedLiveSample("设置自定义强调色和强调标记", 450, 100)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("&lt;color&gt;")}} 数据类型
+- 其他强调标记相关属性：{{cssxref('text-emphasis-style')}}、{{cssxref('text-emphasis')}} 和 {{cssxref("text-emphasis-position")}}
+- 其他颜色相关属性：{{cssxref("color")}}、{{cssxref("background-color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}} 和 {{cssxref("column-rule-color")}}
diff --git a/files/zh-cn/web/css/text-emphasis-position/index.md b/files/zh-cn/web/css/text-emphasis-position/index.md
new file mode 100644
index 00000000000000..e8dfcc64d8cdd5
--- /dev/null
+++ b/files/zh-cn/web/css/text-emphasis-position/index.md
@@ -0,0 +1,154 @@
+---
+title: text-emphasis-position
+slug: Web/CSS/text-emphasis-position
+l10n:
+  sourceCommit: b82ff59aab7883b7bb2222cf9f9f9b6eed818e08
+---
+
+{{CSSRef}}
+
+[CSS](/zh-CN/docs/Web/CSS) 属性 **`text-emphasis-position`** 设置强调标记的位置。强调标记（如注音字符）在没有足够空间时，会自动增加行高。
+
+{{EmbedInteractiveExample("pages/css/text-emphasis-position.html")}}
+
+## 语法
+
+```css
+/* 初始值 */
+text-emphasis-position: over right;
+
+/* 关键字值 */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* 全局值 */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: revert;
+text-emphasis-position: revert-layer;
+text-emphasis-position: unset;
+```
+
+### 取值
+
+- `over`
+  - : 在水平书写模式下，在文本上方绘制标记。
+- `under`
+  - : 在水平书写模式下，在文本下方绘制标记。
+- `right`
+  - : 在垂直书写模式下，在文本右侧绘制标记。
+- `left`
+  - : 在垂直书写模式下，在文本左侧绘制标记。
+
+## 描述
+
+强调标记的首选位置取决于语言。例如，在日语中，首选位置是 `over right`；在中文中，首选位置则是 `under right`。下面的信息表总结了中文、蒙古语和日语的首选强调标记位置：
+
+<table>
+  <caption>
+    标记和注音文字的首选强调标记位置
+  </caption>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col">语言</th>
+      <th colspan="2" scope="col">偏好位置</th>
+      <th colspan="2" rowspan="2" scope="col">效果</th>
+    </tr>
+    <tr>
+      <th>水平排列</th>
+      <th>垂直排列</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>日语</td>
+      <td rowspan="3">上方</td>
+      <td rowspan="3">右侧</td>
+      <td rowspan="3">
+        <img
+          alt="水平排列的日语文本中强调标记出现在日语文字的上方"
+          src="text-emphasis-ja.png"
+          title="应用在每个日语文字上方的蓝色强调标记"
+        />
+      </td>
+      <td rowspan="4">
+        <img
+          alt="垂直排列的日语文本中强调标记出现在日语文字的右侧"
+          src="text-emphasis-v.gif"
+          title="应用在每个日语文字右侧的蓝色强调标记"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>韩语</td>
+    </tr>
+    <tr>
+      <td>蒙古语</td>
+    </tr>
+    <tr>
+      <td>中文</td>
+      <td>下方</td>
+      <td>右侧</td>
+      <td>
+        <img
+          alt="垂直排列的中文文本中强调标记出现在汉字的下方"
+          src="text-emphasis-zh.gif"
+          title="应用在每个汉字下方的蓝色强调标记"
+        />
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+> **备注：** `text-emphasis-position` 无法使用简写属性 {{cssxref("text-emphasis")}} 进行设置，因此也无法进行重置。
+
+## 形式定义
+
+{{CSSInfo}}
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 优先使用注音标记而不是强调标记
+
+一些编辑器在注音标记与强调标记冲突时倾向于隐藏强调标记。在 HTML 中，可以通过以下样式规则实现：
+
+```css
+ruby {
+  text-emphasis: none;
+}
+```
+
+### 优先使用强调标记而不是注音标记
+
+一些编辑器在强调标记与注音标记冲突时倾向于隐藏注音标记。在 HTML 中，可以通过以下样式规则实现：
+
+```css
+em {
+  text-emphasis: dot; /* 为 <em> 元素设置 text-emphasis */
+}
+
+em rt {
+  display: none; /* 隐藏 <em> 元素内部的注音标记 */
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 相关全称属性：{{cssxref("text-emphasis-style")}}、{{cssxref("text-emphasis-color")}}，以及对应的简写属性 {{cssxref("text-emphasis")}}。
diff --git a/files/zh-cn/web/css/text-emphasis-style/index.md b/files/zh-cn/web/css/text-emphasis-style/index.md
new file mode 100644
index 00000000000000..23c6c58b83f6c5
--- /dev/null
+++ b/files/zh-cn/web/css/text-emphasis-style/index.md
@@ -0,0 +1,94 @@
+---
+title: text-emphasis-style
+slug: Web/CSS/text-emphasis-style
+l10n:
+  sourceCommit: 5a0e89bad2e2bbbd32ce22b0c2bb419ae3b7c962
+---
+
+{{CSSRef}}
+
+[CSS](/zh-CN/docs/Web/CSS) 属性 **`text-emphasis-style`** 设置强调标记的样式。这个值也可以使用简写属性 {{cssxref("text-emphasis")}} 来设置。
+
+{{EmbedInteractiveExample("pages/css/text-emphasis-style.html")}}
+
+## 语法
+
+```css
+/* 初始值 */
+text-emphasis-style: none; /* 无强调标记 */
+
+/* <string> 值 */
+text-emphasis-style: "x";
+text-emphasis-style: "\25B2";
+text-emphasis-style: "*";
+
+/* 关键字值 */
+text-emphasis-style: filled;
+text-emphasis-style: open;
+text-emphasis-style: dot;
+text-emphasis-style: circle;
+text-emphasis-style: double-circle;
+text-emphasis-style: triangle;
+text-emphasis-style: filled sesame;
+text-emphasis-style: open sesame;
+
+/* 全局值 */
+text-emphasis-style: inherit;
+text-emphasis-style: initial;
+text-emphasis-style: revert;
+text-emphasis-style: revert-layer;
+text-emphasis-style: unset;
+```
+
+### 取值
+
+- `none`
+  - : 没有强调标记。
+- `filled`
+  - : 形状填充为纯色。如果 `filled` 和 `open` 都未被设置，这是默认设置。
+- `open`
+  - : 形状为空心。
+- `dot`
+  - : 显示小圆点作为标记。填充圆点是 `'•'`（`U+2022`），空心圆点是 `'◦'`（`U+25E6`）。
+- `circle`
+  - : 显示大圆圈作为标记。填充圆圈是 `'●'`（`U+25CF`），空心圆圈是 `'○'`（`U+25CB`）。
+- `double-circle`
+  - : 显示双重圆圈作为标记。填充双重圆圈是 `'◉'`（`U+25C9`），空心双重圆圈是 `'◎'`（`U+25CE`）。
+- `triangle`
+  - : 显示三角形作为标记。填充三角形是 `'▲'`（`U+25B2`），空心三角形是 `'△'`（`U+25B3`）。
+- `sesame`
+  - : 显示芝麻点形状作为标记。填充芝麻点是 `'﹅'`（`U+FE45`），空心芝麻点是 `'﹆'`（`U+FE46`）。
+- `<string>`
+  - : 将指定的字符串作为标记显示。不应指定多于一个*字符*的 `<string>`。用户代理（UA）可能会截断或忽略超过一个字素簇的字符串。
+
+## 形式定义
+
+{{CSSInfo}}
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 基础示例
+
+```css
+h2 {
+  -webkit-text-emphasis-style: sesame;
+  text-emphasis-style: sesame;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 相关属性：{{cssxref('text-emphasis-color')}}、{{cssxref('text-emphasis')}}。
+- 用于定义强调标记的 {{cssxref('text-emphasis-position')}} 属性。
diff --git a/files/zh-cn/web/css/text-emphasis/index.md b/files/zh-cn/web/css/text-emphasis/index.md
new file mode 100644
index 00000000000000..73a3a852306a40
--- /dev/null
+++ b/files/zh-cn/web/css/text-emphasis/index.md
@@ -0,0 +1,123 @@
+---
+title: text-emphasis
+slug: Web/CSS/text-emphasis
+l10n:
+  sourceCommit: b82ff59aab7883b7bb2222cf9f9f9b6eed818e08
+---
+
+{{CSSRef}}
+
+[CSS](/zh-CN/docs/Web/CSS) 属性 **`text-emphasis`** 将强调标记应用到除去空格和控制字符的文本。这个值是 {{cssxref("text-emphasis-style")}} 和 {{cssxref("text-emphasis-color")}} 的[简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties)。
+
+{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}
+
+`text-emphasis` 属性与 {{cssxref("text-decoration")}} 完全不同。`text-decoration` 属性不可继承，并且指定的装饰会应用于整个元素。然而，`text-emphasis` 是可继承的，这意味着可以为其子元素更改强调标记。
+
+强调符号的大小，例如注音字符，大约是字体大小的 50%，在当前行间距不足以容纳标记时，`text-emphasis` 可能会影响行高。
+
+> **备注：** `text-emphasis` 不会重置 {{cssxref("text-emphasis-position")}} 的值。这是因为如果文本中的强调标记的样式和颜色不同，它们的位置几乎不会变化。在极少数情况需要这样做时，可以使用 `text-emphasis-position` 属性。
+
+## 组成属性
+
+此属性是以下 CSS 属性的简写：
+
+- [`text-emphasis-color`](/zh-CN/docs/Web/CSS/text-emphasis-color)
+- [`text-emphasis-style`](/zh-CN/docs/Web/CSS/text-emphasis-style)
+
+## 语法
+
+```css
+/* 初始值 */
+text-emphasis: none; /* 没有强调标记 */
+
+/* <string> 值 */
+text-emphasis: "x";
+text-emphasis: "点";
+text-emphasis: "\25B2";
+text-emphasis: "*" #555;
+text-emphasis: "foo"; /* 不应使用。它可能被计算或渲染为仅“f” */
+
+/* 关键字值 */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* 关键字值与色彩值结合 */
+text-emphasis: filled sesame #555;
+
+/* 全局值 */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: revert;
+text-emphasis: revert-layer;
+text-emphasis: unset;
+```
+
+### 取值
+
+- `none`
+  - : 没有强调标记。
+- `filled`
+  - : 形状填充为纯色。如果 `filled` 和 `open` 都未被设置，这是默认设置。
+- `open`
+  - : 形状为空心。
+- `dot`
+  - : 显示小圆点作为标记。填充圆点是 `'•'`（`U+2022`），空心圆点是 `'◦'`（`U+25E6`）。
+- `circle`
+  - : 显示大圆圈作为标记。填充圆圈是 `'●'`（`U+25CF`），空心圆圈是 `'○'`（`U+25CB`）。在水平书写模式下，如果没有指定其他形状，则默认为此形状。
+- `double-circle`
+  - : 显示双重圆圈作为标记。填充双重圆圈是 `'◉'`（`U+25C9`），空心双重圆圈是 `'◎'`（`U+25CE`）。
+- `triangle`
+  - : 显示三角形作为标记。填充三角形是 `'▲'`（`U+25B2`），空心三角形是 `'△'`（`U+25B3`）。
+- `sesame`
+  - : 显示芝麻点形状作为标记。填充芝麻点是 `'﹅'`（`U+FE45`），空心芝麻点是 `'﹆'`（`U+FE46`）。在垂直书写模式下，如果没有指定其他形状，则默认为此形状。
+- `<string>`
+  - : 将指定的字符串作为标记显示。不应指定多于一个字符的 `<string>`。用户代理（UA）可能会截断或忽略超过一个字素簇的字符串。
+- `<color>`
+  - : 指定用作强调色的颜色。如果未定义，该值默认为 `currentcolor`。
+
+## 形式定义
+
+{{CSSInfo}}
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 使用强调标记和强调色的标题
+
+此示例绘制了一个标题，并使用三角形来强调每个字符。
+
+#### CSS
+
+```css
+h2 {
+  text-emphasis: triangle #d55;
+}
+```
+
+#### HTML
+
+```html
+<h2>这很重要！</h2>
+```
+
+#### 结果
+
+{{EmbedLiveSample("使用强调标记和强调色的标题", 500, 90)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 全称属性 {{cssxref('text-emphasis-style')}}、{{cssxref('text-emphasis-color')}}
+- 用于定义强调标记位置的 {{cssxref('text-emphasis-position')}} 属性。
diff --git a/files/zh-cn/web/css/text-rendering/index.md b/files/zh-cn/web/css/text-rendering/index.md
index c81b0f4f336e75..213c138e599e49 100644
--- a/files/zh-cn/web/css/text-rendering/index.md
+++ b/files/zh-cn/web/css/text-rendering/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/text-rendering
 
 `text-rendering` CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。
 
-> **备注：** 该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox）和 Webkit（Chrome、Safari）内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。
+> [!NOTE]
+> 该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox）和 Webkit（Chrome、Safari）内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。
 
 一个视觉上很明显的效果是，`optimizeLegibility` 属性值会在某些字体（比如，微软的 _Calibri_、_Candara_、_Constantia_ 和 _Corbel_，或者 _DejaVu_ 系列字体）小于 20px 时把某些相邻字符连接起来（比如 ff、fi、fl 等）。
 
@@ -66,7 +67,8 @@ body {
 
 #### Live Example
 
-> **备注：** 没有在 Chrome 中看出例子中的区别来，可以移步看看这篇文章 [text-rendering](https://css-tricks.com/almanac/properties/t/text-rendering/)。
+> [!NOTE]
+> 没有在 Chrome 中看出例子中的区别来，可以移步看看这篇文章 [text-rendering](https://css-tricks.com/almanac/properties/t/text-rendering/)。
 
 | CSS code                                                                 | Kerning | Ligatures    |
 | ------------------------------------------------------------------------ | ------- | ------------ |
diff --git a/files/zh-cn/web/css/text-transform/index.md b/files/zh-cn/web/css/text-transform/index.md
index 8ca6e3b174f308..9ed7215d41b9cc 100644
--- a/files/zh-cn/web/css/text-transform/index.md
+++ b/files/zh-cn/web/css/text-transform/index.md
@@ -20,7 +20,8 @@ slug: Web/CSS/text-transform
 
 语言由 HTML [`lang`](/zh-CN/docs/Web/HTML/Global_attributes/lang) 属性或 XML [`xml:lang`](/zh-CN/docs/Web/SVG/Attribute/xml:lang) 属性定义。
 
-> **备注：** 特定情况的支持因浏览器而异，因此请检查[浏览器兼容性表格](#浏览器兼容性)。
+> [!NOTE]
+> 特定情况的支持因浏览器而异，因此请检查[浏览器兼容性表格](#浏览器兼容性)。
 
 ## 语法
 
@@ -45,9 +46,11 @@ text-transform: unset;
 
   - : 这个关键字强制每个单词的*首*字母转换为大写。其他的字符保留不变（它们处于元素的文本保留原始大小写）。字母是 Unicode 字符集或者数字里定义的字符 {{experimental_inline}}；因此单词开头的任何标点符号或者特殊符号将会被忽略。
 
-    > **备注：** 作者不应期望 `capitalize` 遵循特定语言的标题大小写惯例（如跳过英文的文章）。
+    > [!NOTE]
+    > 作者不应期望 `capitalize` 遵循特定语言的标题大小写惯例（如跳过英文的文章）。
 
-    > **备注：** 在 CSS 1 和 CSS 2.1 中，`capitalize` 关键字没有得到充分说明。这导致不同的浏览器在计算第一个字母的方式上存在差异（Firefox 认为 `-` 和 `_` 是字母，但其他浏览器不这样认为。Webkit 和 Gecko 都错误地认为基于字母的符号如 `ⓐ` 是真正的字母）。通过精确定义正确的行为，CSS Text Level 3 清除了这种混乱。浏览器兼容性表中的 `capitalize` 一行包含了不同引擎开始支持这一精确定义的行为的版本。
+    > [!NOTE]
+    > 在 CSS 1 和 CSS 2.1 中，`capitalize` 关键字没有得到充分说明。这导致不同的浏览器在计算第一个字母的方式上存在差异（Firefox 认为 `-` 和 `_` 是字母，但其他浏览器不这样认为。Webkit 和 Gecko 都错误地认为基于字母的符号如 `ⓐ` 是真正的字母）。通过精确定义正确的行为，CSS Text Level 3 清除了这种混乱。浏览器兼容性表中的 `capitalize` 一行包含了不同引擎开始支持这一精确定义的行为的版本。
 
 - `uppercase`
   - : 这个关键字强制所有字符被转换为大写。
diff --git a/files/zh-cn/web/css/time/index.md b/files/zh-cn/web/css/time/index.md
index bc4a9e94d87fda..e82e088b86dc5d 100644
--- a/files/zh-cn/web/css/time/index.md
+++ b/files/zh-cn/web/css/time/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/time
 
 `<time>` 数据类型由 {{cssxref("&lt;number&gt;")}}后加下方列出的单位之一组成。前方也可选择添加一个`+` 或 `-`。单位与数字之间无空格。
 
-> **备注：** 尽管数字 `0` 不管在何种单位下均相等，但其单位不可去除。换句话说， `0` 是无效的，并不代表 `0s` 或 `0ms`。
+> [!NOTE]
+> 尽管数字 `0` 不管在何种单位下均相等，但其单位不可去除。换句话说， `0` 是无效的，并不代表 `0s` 或 `0ms`。
 
 ### 单位
 
@@ -20,7 +21,8 @@ slug: Web/CSS/time
 - **`ms`**
   - : 以毫秒为单位的时间。例： `0ms`, `150.25ms`, `-60000ms`。
 
-> **备注：** 秒 `s` 与毫秒 `ms` 间的转换为： `1s` = `1000ms`。
+> [!NOTE]
+> 秒 `s` 与毫秒 `ms` 间的转换为： `1s` = `1000ms`。
 
 ## 示例
 
diff --git a/files/zh-cn/web/css/transform-function/matrix/index.md b/files/zh-cn/web/css/transform-function/matrix/index.md
index 8fa7aff4f832a9..9b76d60a1ff5bd 100644
--- a/files/zh-cn/web/css/transform-function/matrix/index.md
+++ b/files/zh-cn/web/css/transform-function/matrix/index.md
@@ -9,7 +9,8 @@ CSS 函数 `matrix()` 指定了一个由指定的 6 个值组成的 2D 变换矩
 
 `matrix(a, b, c, d, tx, ty)` 是 `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` 的简写。
 
-> **备注：** 直到 Firefox 16, Gecko 才接受对于 **tx** 和 **ty** 的 {{cssxref("&lt;length&gt;")}} 值。
+> [!NOTE]
+> 直到 Firefox 16, Gecko 才接受对于 **tx** 和 **ty** 的 {{cssxref("&lt;length&gt;")}} 值。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/transform-function/matrix3d/index.md b/files/zh-cn/web/css/transform-function/matrix3d/index.md
index ae342752263c6c..db6cbccc9bf87f 100644
--- a/files/zh-cn/web/css/transform-function/matrix3d/index.md
+++ b/files/zh-cn/web/css/transform-function/matrix3d/index.md
@@ -22,7 +22,8 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
 - _a4_ _b4_ _c4 d4_
   - : Are {{cssxref("&lt;number&gt;")}}s describing the translation to apply.
 
-> **备注：** Until Firefox 16, Gecko accepted a {{cssxref("&lt;length&gt;")}} value for _a4_, _b4_ and _c4_.
+> [!NOTE]
+> Until Firefox 16, Gecko accepted a {{cssxref("&lt;length&gt;")}} value for _a4_, _b4_ and _c4_.
 
 <table class="standard-table">
   <thead>
diff --git a/files/zh-cn/web/css/transform-function/rotate3d/index.md b/files/zh-cn/web/css/transform-function/rotate3d/index.md
index 629db95185fade..135247803fe2d9 100644
--- a/files/zh-cn/web/css/transform-function/rotate3d/index.md
+++ b/files/zh-cn/web/css/transform-function/rotate3d/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/transform-function/rotate3d
 
 在 3D 空间之中，旋转有 3 个自由维度，描述了旋转轴。旋转轴由一组 \[x, y, z] 矢量定义，并且通过变换源点传递（即通过 {{ cssxref("transform-origin") }} CSS 属性定义）。如果这些矢量被赋予非标准值，即 3 个坐标值的平方和不等于 1 时，它将会被内部隐式标准化。非标准矢量，例如空值和 \[0, 0, 0]，将会使旋转不起作用，但是不影响整个 CSS 属性的其他效果（译者注：如 transform 中的多项变换）。
 
-> **备注：** 与平面旋转相反的是，3D 旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。
+> [!NOTE]
+> 与平面旋转相反的是，3D 旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/transform-function/rotatex/index.md b/files/zh-cn/web/css/transform-function/rotatex/index.md
index 1ebdd466bdddd0..5f2906775955f4 100644
--- a/files/zh-cn/web/css/transform-function/rotatex/index.md
+++ b/files/zh-cn/web/css/transform-function/rotatex/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/transform-function/rotateX
 
 > **备注：** `rotateX(a)` 相当于 `rotate3d(1, 0, 0, a)`.
 
-> **备注：** 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
+> [!NOTE]
+> 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/transform-function/rotatey/index.md b/files/zh-cn/web/css/transform-function/rotatey/index.md
index ed7c33c069d9d4..2a146181e6df6f 100644
--- a/files/zh-cn/web/css/transform-function/rotatey/index.md
+++ b/files/zh-cn/web/css/transform-function/rotatey/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/transform-function/rotateY
 
 > **备注：** `rotateY(a)` 相当于 `rotate3d(0, 1, 0, a)`.
 
-> **备注：** 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
+> [!NOTE]
+> 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/transform-function/rotatez/index.md b/files/zh-cn/web/css/transform-function/rotatez/index.md
index a5491a23156d0d..949720a79d1c57 100644
--- a/files/zh-cn/web/css/transform-function/rotatez/index.md
+++ b/files/zh-cn/web/css/transform-function/rotatez/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/transform-function/rotateZ
 
 > **备注：** `rotateZ(a)` 相当于 `rotate(a)` or `rotate3d(0, 0, 1, a)`。
 
-> **备注：** 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
+> [!NOTE]
+> 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/transform-function/scalex/index.md b/files/zh-cn/web/css/transform-function/scalex/index.md
index cdcba2172842d9..9caff36911bb43 100644
--- a/files/zh-cn/web/css/transform-function/scalex/index.md
+++ b/files/zh-cn/web/css/transform-function/scalex/index.md
@@ -11,9 +11,7 @@ slug: Web/CSS/transform-function/scaleX
 
 `scaleX(sx)` 是 `scale(sx, 1)` 或 `scale3d(sx, 1, 1)` 的一个速记/缩写。
 
-> **备注：** Note:
->
-> **`scaleX(-1)`** 定义一个 [轴向对称性 (axial symmetry)](http://en.wikipedia.org/wiki/Axial_symmetry) ，它具有一个垂直轴通过原点 (由 {{cssxref("transform-origin")}} 属性规定)。
+> **备注：** **`scaleX(-1)`** 定义一个 [轴向对称性](https://zh.wikipedia.org/wiki/軸對稱)，它具有一个垂直轴通过原点（由 {{cssxref("transform-origin")}} 属性规定）。
 
 ## Syntax
 
diff --git a/files/zh-cn/web/css/transform/index.md b/files/zh-cn/web/css/transform/index.md
index 8de67ae5fa36ae..97aabe0e077d8a 100644
--- a/files/zh-cn/web/css/transform/index.md
+++ b/files/zh-cn/web/css/transform/index.md
@@ -13,7 +13,8 @@ l10n:
 
 如果属性的值不是 `none`，则将创建一个[层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)。在这种情况下，该元素将作为任何包含的 `position: fixed;` 或 `position: absolute;` 元素的[包含块](/zh-CN/docs/Web/CSS/Containing_block)。
 
-> **警告：** 只能 `transform` 由盒模型定位的元素，也就是所有布局由 CSS 盒模型管理的元素，除了：[非替换的行内盒子](/zh-CN/docs/Glossary/Inline-level_content)、[表格列](/zh-CN/docs/Web/HTML/Element/col)和[表格列组](/zh-CN/docs/Web/HTML/Element/colgroup)。
+> [!WARNING]
+> 只能 `transform` 由盒模型定位的元素，也就是所有布局由 CSS 盒模型管理的元素，除了：[非替换的行内盒子](/zh-CN/docs/Glossary/Inline-level_content)、[表格列](/zh-CN/docs/Web/HTML/Element/col)和[表格列组](/zh-CN/docs/Web/HTML/Element/colgroup)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/unicode-bidi/index.md b/files/zh-cn/web/css/unicode-bidi/index.md
index 3ed719e7c3a330..54ea58ad9ebe1f 100644
--- a/files/zh-cn/web/css/unicode-bidi/index.md
+++ b/files/zh-cn/web/css/unicode-bidi/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/unicode-bidi
 
 `unicode-bidi` 与 {{cssxref("direction")}} 是仅有的两个不受 {{cssxref("all")}} 简写影响的属性。
 
-> **警告：** 此属性是文档类型定义（Document Type Definition, DTD）的设计者专用的。Web 设计者与其他类似的人员不应覆盖此属性。
+> [!WARNING]
+> 此属性是文档类型定义（Document Type Definition, DTD）的设计者专用的。Web 设计者与其他类似的人员不应覆盖此属性。
 
 ```css
 /* 关键字值 */
diff --git a/files/zh-cn/web/css/universal_selectors/index.md b/files/zh-cn/web/css/universal_selectors/index.md
index 73dee65348a4c2..0fe78b3ecfdb30 100644
--- a/files/zh-cn/web/css/universal_selectors/index.md
+++ b/files/zh-cn/web/css/universal_selectors/index.md
@@ -44,7 +44,8 @@ slug: Web/CSS/Universal_selectors
 
 {{EmbedLiveSample('示例')}}
 
-> **备注：** 笔者不推荐使用通配选择器，因为它是[性能最低的一个 CSS 选择器](http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/).
+> [!NOTE]
+> 笔者不推荐使用通配选择器，因为它是[性能最低的一个 CSS 选择器](http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/).
 
 ## 规范
 
diff --git a/files/zh-cn/web/css/user-select/index.md b/files/zh-cn/web/css/user-select/index.md
index 55960ea28ae5d0..0cc239884302d0 100644
--- a/files/zh-cn/web/css/user-select/index.md
+++ b/files/zh-cn/web/css/user-select/index.md
@@ -53,7 +53,8 @@ user-select: unset;
 
   - : 允许在元素内选择；但是，选区将被限制在该元素的边界之内。
 
-    > **备注：** CSS UI 4 将 `element` 值[重命名](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05)为 `contain`。
+    > [!NOTE]
+    > CSS UI 4 将 `element` 值[重命名](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05)为 `contain`。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/css/using_css_custom_properties/index.md b/files/zh-cn/web/css/using_css_custom_properties/index.md
index f59ca4b3149f13..de8b69a4998e89 100644
--- a/files/zh-cn/web/css/using_css_custom_properties/index.md
+++ b/files/zh-cn/web/css/using_css_custom_properties/index.md
@@ -27,7 +27,8 @@ element {
 
 然而这条规则不是绝对的，如果有理由去限制你的自定义属性，那么就应该限制。
 
-> **备注：** 自定义属性名是大小写敏感的，`--my-color` 和 `--My-color` 会被认为是两个不同的自定义属性。
+> [!NOTE]
+> 自定义属性名是大小写敏感的，`--my-color` 和 `--My-color` 会被认为是两个不同的自定义属性。
 
 如前所述，使用一个局部变量时用 {{cssxref("var()")}} 函数包裹以表示一个合法的属性值：
 
@@ -174,7 +175,8 @@ element {
 
 用 {{cssxref("var()")}} 函数可以定义多个**备用值**（fallback value），当给定值未定义时将会用备用值替换。这对于 [Custom Element](/zh-CN/docs/Web/API/Web_components/Using_custom_elements) 和 [Shadow DOM](/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM) 都很有用。
 
-> **备注：** 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持 CSS 自定义属性，备用值也没什么用。它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制，该机制仅当给定值未定义或是无效值的时候生效。
+> [!NOTE]
+> 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持 CSS 自定义属性，备用值也没什么用。它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制，该机制仅当给定值未定义或是无效值的时候生效。
 
 函数的第一个参数是[自定义属性](https://www.w3.org/TR/css-variables/#custom-property)的名称。如果提供了第二个参数，则表示备用值，当[自定义属性](https://www.w3.org/TR/css-variables/#custom-property)值无效时生效。第二个参数可以嵌套，但是不能继续平铺展开下去了，例如：
 
@@ -201,7 +203,8 @@ element {
 
 第二个例子展示了如何处理一个以上的 fallback。该技术可能会导致性能问题，因为它花了更多的时间在处理这些变量上。
 
-> **备注：** 像[自定义属性](https://www.w3.org/TR/css-variables/#custom-property)这些 fallback 语法允许使用逗号。比如 `var(--foo, red, blue)` 定义了一个 `red, blue` 的备用值——从第一个逗号到最后的全部内容，都会被作为备用值的一部分。
+> [!NOTE]
+> 像[自定义属性](https://www.w3.org/TR/css-variables/#custom-property)这些 fallback 语法允许使用逗号。比如 `var(--foo, red, blue)` 定义了一个 `red, blue` 的备用值——从第一个逗号到最后的全部内容，都会被作为备用值的一部分。
 
 ## 有效性和值
 
@@ -246,7 +249,8 @@ p {
 
 段落颜色并不是蓝色，因为无效代换导致了它被替换成了默认初始值的黑色。如果你直接写 `color: 16px` 的话，则会导致语法错误，而前面的定义则会生效（段落显示为蓝色）。
 
-> **备注：** 当 CSS 属性 - 值对中存在语法错误，该行则会被忽略。然而如果自定义属性的值无效，它并不会被忽略，从而会导致该值被覆盖为默认值。
+> [!NOTE]
+> 当 CSS 属性 - 值对中存在语法错误，该行则会被忽略。然而如果自定义属性的值无效，它并不会被忽略，从而会导致该值被覆盖为默认值。
 
 ## JavaScript 中的值
 
diff --git a/files/zh-cn/web/css/value_definition_syntax/index.md b/files/zh-cn/web/css/value_definition_syntax/index.md
index 2495af9b09fc8e..fe4aaefa03cf85 100644
--- a/files/zh-cn/web/css/value_definition_syntax/index.md
+++ b/files/zh-cn/web/css/value_definition_syntax/index.md
@@ -103,7 +103,8 @@ bold && <length>
 - `bold`因为长度值没有出现。
 - `bold 1em bold`因为各部分必须恰好出现一次。
 
-> **备注：** 并置的优先级高于“与”组合符。例如 `bold thin && <length>` 等价于 `[ bold thin ] && <length>`。它们的合法取值是：`bold thin <length>` 或 `<length> bold thin` 但不是 `bold <length> thin`。
+> [!NOTE]
+> 并置的优先级高于“与”组合符。例如 `bold thin && <length>` 等价于 `[ bold thin ] && <length>`。它们的合法取值是：`bold thin <length>` 或 `<length> bold thin` 但不是 `bold <length> thin`。
 
 ### “或”组合符：||
 
@@ -124,7 +125,8 @@ bold && <length>
 - `blue yellow`因为一个组成部分最多出现一次。
 - `bold`因为它不允许出现。
 
-> **备注：** “与”组合符的优先级高于“或”组合符，比如 `bold || thin && <length>` 等价于 `bold || [ thin && <length> ]`。它们的合法取值是：`bold`, `thin <length>`, `bold thin <length>`, 或者 `thin <length> bold` ，但不是：`<length> bold thin` 因为 bold 若出现，则必须出现在 `thin && <length>` 整体的前面或后面。
+> [!NOTE]
+> “与”组合符的优先级高于“或”组合符，比如 `bold || thin && <length>` 等价于 `bold || [ thin && <length> ]`。它们的合法取值是：`bold`, `thin <length>`, `bold thin <length>`, 或者 `thin <length> bold` ，但不是：`<length> bold thin` 因为 bold 若出现，则必须出现在 `thin && <length>` 整体的前面或后面。
 
 ### “互斥”组合符：|
 
@@ -150,7 +152,8 @@ bold && <length>
 - `center 3%` 因为最多只能出现一个组成部分
 - `3em 4.5em` 因为每个组成部分最多只能出现一次
 
-> **备注：** “或”组合符的优先级高于“互斥”组合符，比如`bold | thin || <length>`等价于`bold | [ thin || <length> ]`。它们的合法取值是：`bold`, `thin`, `<length>`, `<length> thin`, 或 `thin <length>`，但不能是 `bold <length>`，因为“互斥”组合符所连接的数个部分中，只有一个能出现。
+> [!NOTE]
+> “或”组合符的优先级高于“互斥”组合符，比如`bold | thin || <length>`等价于`bold | [ thin || <length> ]`。它们的合法取值是：`bold`, `thin`, `<length>`, `<length> thin`, 或 `thin <length>`，但不能是 `bold <length>`，因为“互斥”组合符所连接的数个部分中，只有一个能出现。
 
 ## 数量符号
 
diff --git a/files/zh-cn/web/css/var/index.md b/files/zh-cn/web/css/var/index.md
index 8b81c339202796..4bb1db2bb2fa2b 100644
--- a/files/zh-cn/web/css/var/index.md
+++ b/files/zh-cn/web/css/var/index.md
@@ -17,7 +17,8 @@ slug: Web/CSS/var
 
 {{csssyntax}}
 
-> **备注：** 自定义属性的回退值允许使用逗号。例如，`var(--foo, red, blue)` 将 `red, blue` 同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。
+> [!NOTE]
+> 自定义属性的回退值允许使用逗号。例如，`var(--foo, red, blue)` 将 `red, blue` 同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。
 
 ### 值
 
diff --git a/files/zh-cn/web/css/visual_formatting_model/index.md b/files/zh-cn/web/css/visual_formatting_model/index.md
index 882ebe75bce65a..8de2bc6dfd3e25 100644
--- a/files/zh-cn/web/css/visual_formatting_model/index.md
+++ b/files/zh-cn/web/css/visual_formatting_model/index.md
@@ -19,7 +19,8 @@ CSS **视觉格式化模型**（visual formatting model）是用来处理和在
 
 该模型会根据盒子的包含块（*containing block）的*边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（_overflow）_。
 
-> **备注：** 译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。
+> [!NOTE]
+> 译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。
 >
 > - **块**：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。
 > - **包含块**：containing block，包含其他盒子的块称为包含块。
@@ -78,11 +79,13 @@ CSS 选择器不能作用于匿名盒子 (_anonymous boxes_)，所以它不能
 
 如果一个元素的 {{ cssxref("display") }} 属性为 `inline`、`inline-block` 或 `inline-table`，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。
 
-> **警告：** 该图使用了过时的术语，见下面的“注意”（译注：指图中的“Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2 标准的 9.2.2 节”。
+> [!WARNING]
+> 该图使用了过时的术语，见下面的“注意”（译注：指图中的“Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2 标准的 9.2.2 节”。
 
 行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（[inline formatting context](/zh-CN/docs/CSS/Inline_formatting_context)）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有 `display:inline` 样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或 `display` 值为 `inline-block` 或 `inline-table` 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。
 
-> **备注：** 开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。
+> [!NOTE]
+> 开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。
 
 {{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}
 
@@ -90,7 +93,8 @@ CSS 选择器不能作用于匿名盒子 (_anonymous boxes_)，所以它不能
 
 类似于块盒子，CSS 引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 `initial`。一种常见的情况是 CSS 引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 {{ cssxref("white-space") }} 的设置而被移除，从而导致最终的实际内容为空。
 
-> **备注：** 示例 TBD
+> [!NOTE]
+> 示例 TBD
 
 ### 其他类型的盒子
 
@@ -104,7 +108,8 @@ CSS 选择器不能作用于匿名盒子 (_anonymous boxes_)，所以它不能
 
 Run-in 盒子通过 `display:run-in` 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。
 
-> **备注：** Run-in 盒子已经在 CSS 2.1 的标准中移除了，但可能会在 CSS 3 中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。
+> [!NOTE]
+> Run-in 盒子已经在 CSS 2.1 的标准中移除了，但可能会在 CSS 3 中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。
 
 #### 由其他模型引入的盒子
 
@@ -128,7 +133,8 @@ Run-in 盒子通过 `display:run-in` 来定义，它可以是块盒子，也可
 
 ### 示例
 
-> **备注：** 在普通流的块格式化上下文中，盒子会垂直依次排列：
+> [!NOTE]
+> 在普通流的块格式化上下文中，盒子会垂直依次排列：
 >
 > \[TODO 图片]
 >
@@ -136,7 +142,8 @@ Run-in 盒子通过 `display:run-in` 来定义，它可以是块盒子，也可
 >
 > \[TODO 图片]
 
-> **备注：** 普通流又有两种情况：静态定位和相对定位：
+> [!NOTE]
+> 普通流又有两种情况：静态定位和相对定位：
 >
 > {{ cssxref("position") }} 为 `static` 时为静态定位，此时每个盒子根据普通流所计算出的确切位置来定位。
 >
diff --git a/files/zh-cn/web/css/webkit_extensions/index.md b/files/zh-cn/web/css/webkit_extensions/index.md
index 2fb74bc9390b53..79f8e8f616f1d6 100644
--- a/files/zh-cn/web/css/webkit_extensions/index.md
+++ b/files/zh-cn/web/css/webkit_extensions/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/WebKit_Extensions
 
 ## 仅 WebKit 具有的属性
 
-> **备注：** 避免在网站上使用。这些属性仅在 WebKit 应用中可用。
+> [!NOTE]
+> 避免在网站上使用。这些属性仅在 WebKit 应用中可用。
 
 ### A
 
@@ -156,7 +157,8 @@ slug: Web/CSS/WebKit_Extensions
 
 ## 已经成为标准属性的前专有属性
 
-> **备注：** 要尽可能地提高兼容性，你需要使用无前缀的标准属性，而不是下面列出的这些有前缀的。
+> [!NOTE]
+> 要尽可能地提高兼容性，你需要使用无前缀的标准属性，而不是下面列出的这些有前缀的。
 
 ### A
 
@@ -320,7 +322,8 @@ slug: Web/CSS/WebKit_Extensions
 
 以下属性在 Firefox 中带 `-webkit-` 前缀支持，其中许多也支持无前缀版本。参见上面的[已经成为标准属性的前专有属性](#已经成为标准属性的前专有属性)。
 
-> **备注：** 由于许多网站的旧版代码使用了以 -webkit- 为前缀的属性，Edge 和 Firefox 会将许多 -webkit- 为前缀的属性重定向到 -moz-、-ms- 和相应的没有前缀的等价属性上。
+> [!NOTE]
+> 由于许多网站的旧版代码使用了以 -webkit- 为前缀的属性，Edge 和 Firefox 会将许多 -webkit- 为前缀的属性重定向到 -moz-、-ms- 和相应的没有前缀的等价属性上。
 
 ### A
 
@@ -463,7 +466,8 @@ slug: Web/CSS/WebKit_Extensions
 
 \* 现为标准。
 
-> **备注：** 如果在选择器的链或组中有一个无效的伪类，那么整个选择器列表都是无效的。
+> [!NOTE]
+> 如果在选择器的链或组中有一个无效的伪类，那么整个选择器列表都是无效的。
 
 ## 伪元素
 
@@ -503,7 +507,8 @@ slug: Web/CSS/WebKit_Extensions
 
 \* 现为标准
 
-> **备注：** 通常来说，如果在选择器的链或组中有一个无效的伪元素或者伪类，那么整个选择器列表都是无效的。如果伪元素（不是伪类）有 -webkit- 前缀，那么自 Firefox 版本 63 起，Blink、WebKit 和 Gecko 浏览器都假定其为有效的，不会使整个选择器列表无效。
+> [!NOTE]
+> 通常来说，如果在选择器的链或组中有一个无效的伪元素或者伪类，那么整个选择器列表都是无效的。如果伪元素（不是伪类）有 -webkit- 前缀，那么自 Firefox 版本 63 起，Blink、WebKit 和 Gecko 浏览器都假定其为有效的，不会使整个选择器列表无效。
 
 ## 媒体特性
 
diff --git a/files/zh-cn/web/css/white-space/index.md b/files/zh-cn/web/css/white-space/index.md
index af92e3e1b0f5b1..027fb9ab632a43 100644
--- a/files/zh-cn/web/css/white-space/index.md
+++ b/files/zh-cn/web/css/white-space/index.md
@@ -14,7 +14,8 @@ CSS **`white-space`** 属性用于设置如何处理元素内的{{Glossary("whit
 - 空白字符是否[合并](#合并空白字符)，以及如何合并。
 - 是否换行，以及如何换行。
 
-> **备注：** 要使单词可以在*其内部*被截断，请使用 {{CSSxRef("overflow-wrap")}}、{{CSSxRef("word-break")}} 或 {{CSSxRef("hyphens")}} 代替。
+> [!NOTE]
+> 要使单词可以在*其内部*被截断，请使用 {{CSSxRef("overflow-wrap")}}、{{CSSxRef("word-break")}} 或 {{CSSxRef("hyphens")}} 代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/widows/index.md b/files/zh-cn/web/css/widows/index.md
index 0c70b79af6279e..591cdd253de60f 100644
--- a/files/zh-cn/web/css/widows/index.md
+++ b/files/zh-cn/web/css/widows/index.md
@@ -18,7 +18,8 @@ widows: initial;
 widows: unset;
 ```
 
-> **备注：** 在排版中，_widow_ 指的是在新页面顶部单独出现的段落的最后一行。（这一行来自于上一个页面的段落）
+> [!NOTE]
+> 在排版中，_widow_ 指的是在新页面顶部单独出现的段落的最后一行。（这一行来自于上一个页面的段落）
 
 ## 语法
 
diff --git a/files/zh-cn/web/css/word-break/index.md b/files/zh-cn/web/css/word-break/index.md
index 196e06e8767562..40a37253e5eeda 100644
--- a/files/zh-cn/web/css/word-break/index.md
+++ b/files/zh-cn/web/css/word-break/index.md
@@ -35,7 +35,8 @@ word-break: unset;
 - `break-word` {{Deprecated_Inline}}
   - : 他的效果是`word-break: normal` 和 `overflow-wrap: anywhere` 的合，不论 {{cssxref("overflow-wrap")}}的值是多少。
 
-> **备注：** 与 `word-break: break-word` 和 `overflow-wrap: break-word`（详见 {{cssxref("overflow-wrap")}}）对比，`word-break: break-word` 将在文本可能溢出其容器的确切位置创建一个断点。
+> [!NOTE]
+> 与 `word-break: break-word` 和 `overflow-wrap: break-word`（详见 {{cssxref("overflow-wrap")}}）对比，`word-break: break-word` 将在文本可能溢出其容器的确切位置创建一个断点。
 
 ## 形式定义
 
diff --git a/files/zh-cn/web/events/event_handlers/index.md b/files/zh-cn/web/events/event_handlers/index.md
index c717c1548f01e1..f68a07a3e209dc 100644
--- a/files/zh-cn/web/events/event_handlers/index.md
+++ b/files/zh-cn/web/events/event_handlers/index.md
@@ -17,7 +17,8 @@ slug: Web/Events/Event_handlers
 
 有两种推荐的注册处理器的方法。可以将事件处理器代码赋值给目标元素对应的 _onevent_ 属性，或使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 方法将处理器注册为元素的监听器，从而在事件触发时运行事件处理器的代码。无论哪种情况，处理器都将接收一个符合 [`Event` 接口](/zh-CN/docs/Web/API/Event)的对象。主要区别在于可以使用事件监听器方法添加（或删除）多个事件处理器。
 
-> **警告：** 不推荐使用 HTML onevent 属性设置事件处理器的第三种方法！它们会使标签变长，从而降低了可读性且变得难以调试。有关详细信息，请参阅[内联事件处理器](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#内联事件处理器——不要使用)。
+> [!WARNING]
+> 不推荐使用 HTML onevent 属性设置事件处理器的第三种方法！它们会使标签变长，从而降低了可读性且变得难以调试。有关详细信息，请参阅[内联事件处理器](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#内联事件处理器——不要使用)。
 
 ### 使用 onevent 属性
 
@@ -43,7 +44,8 @@ btn.onclick = greet;
 
 在元素上设置事件处理器的最灵活的方法是使用 {{domxref("EventTarget.addEventListener")}} 方法。这种方法允许为一个元素分配多个监听器，并在需要时*删除*监听器（使用 {{domxref("EventTarget.removeEventListener")}} 方法）。
 
-> **备注：** 添加和删除事件处理器的功能允许你在不同情况下执行不同的操作，例如，让同一个按钮执行不同的操作。此外，在更复杂的程序中，清理旧的或未使用的事件处理器可以提高效率。
+> [!NOTE]
+> 添加和删除事件处理器的功能允许你在不同情况下执行不同的操作，例如，让同一个按钮执行不同的操作。此外，在更复杂的程序中，清理旧的或未使用的事件处理器可以提高效率。
 
 下面我们展示了如何将一个简单的 `greet()` 函数设置为 `click` 事件的监听器/事件处理器（如果需要，你可以使用匿名函数代替具名函数）。请再次注意，事件（event）会作为第一个参数传递给事件处理器。
 
diff --git a/files/zh-cn/web/html/attributes/autocomplete/index.md b/files/zh-cn/web/html/attributes/autocomplete/index.md
index 3b293a0e1a43ea..9e9d2fd72bcdf7 100644
--- a/files/zh-cn/web/html/attributes/autocomplete/index.md
+++ b/files/zh-cn/web/html/attributes/autocomplete/index.md
@@ -15,7 +15,8 @@ HTML `autocomplete` 属性允许 web 开发人员指定{{Glossary("user agent","
 
 更多信息，请参见 {{HTMLElement("form")}} 中的 [`autocomplete`](/zh-CN/docs/Web/HTML/Element/form#autocomplete) 属性。
 
-> **备注：** 为了提供自动完成功能，用户代理可能需要 `<input>`/`<select>`/`<textarea>` 元素具有如下条件：
+> [!NOTE]
+> 为了提供自动完成功能，用户代理可能需要 `<input>`/`<select>`/`<textarea>` 元素具有如下条件：
 >
 > 1. 具有 `name` 和/或 `id` 属性
 > 2. 作为 `<form>` 元素的后代
@@ -29,7 +30,8 @@ HTML `autocomplete` 属性允许 web 开发人员指定{{Glossary("user agent","
 
   - : 浏览器不允许为此字段自动输入或选择一个值。文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。
 
-    > **备注：** 在大多数现代浏览器中，`autocomplete` 设置为“`off`”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。请参阅 [autocomplete 属性与登录表单](/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#autocomplete_属性和登录字段)一文。
+    > [!NOTE]
+    > 在大多数现代浏览器中，`autocomplete` 设置为“`off`”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。请参阅 [autocomplete 属性与登录表单](/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#autocomplete_属性和登录字段)一文。
 
 - "`on`"
   - : 允许浏览器自动完成输入。没有提供有关该字段中期望的数据类型的指导，因此浏览器可以使用自己的判断。
@@ -142,7 +144,8 @@ HTML `autocomplete` 属性允许 web 开发人员指定{{Glossary("user agent","
 
 有关更多详细信息，请参见 [WHATWG 标准](https://html.spec.whatwg.org/multipage/forms.html#autofill)。
 
-> **备注：** 与其他浏览器不同，`autocomplete` 属性还控制 Firefox [是否在整个页面加载期间保持](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) `<input>` 元素、`<textarea>` 元素、或整个 `<form>` 元素的动态禁用状态和动态选择状态（如果适用）。持久性功能默认情况下处于启用状态。将 `autocomplete` 属性的值设置为 `off` 将禁用此特性。即使 `autocomplete` 属性通常由于其 `type` 而不适用，也可以这样做。参见 [Firefox bug 654072](https://bugzil.la/654072)。
+> [!NOTE]
+> 与其他浏览器不同，`autocomplete` 属性还控制 Firefox [是否在整个页面加载期间保持](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) `<input>` 元素、`<textarea>` 元素、或整个 `<form>` 元素的动态禁用状态和动态选择状态（如果适用）。持久性功能默认情况下处于启用状态。将 `autocomplete` 属性的值设置为 `off` 将禁用此特性。即使 `autocomplete` 属性通常由于其 `type` 而不适用，也可以这样做。参见 [Firefox bug 654072](https://bugzil.la/654072)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/attributes/capture/index.md b/files/zh-cn/web/html/attributes/capture/index.md
index e520a43cf8d328..c72993ffae55ee 100644
--- a/files/zh-cn/web/html/attributes/capture/index.md
+++ b/files/zh-cn/web/html/attributes/capture/index.md
@@ -18,7 +18,8 @@ l10n:
 | `user`        | 应使用面向用户的摄像头和/或麦克风。 |
 | `environment` | 应使用朝外的摄像头和/或麦克风。     |
 
-> **备注：** capture 以前是一个布尔属性，如果存在，则要求使用设备自身的媒体捕捉设备（如摄像头或麦克风），而不是要求输入文件。
+> [!NOTE]
+> capture 以前是一个布尔属性，如果存在，则要求使用设备自身的媒体捕捉设备（如摄像头或麦克风），而不是要求输入文件。
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-capture.html", "tabbed-standard")}}
 
diff --git a/files/zh-cn/web/html/attributes/crossorigin/index.md b/files/zh-cn/web/html/attributes/crossorigin/index.md
index 68ec486a4e8de9..2446c42fbcdb37 100644
--- a/files/zh-cn/web/html/attributes/crossorigin/index.md
+++ b/files/zh-cn/web/html/attributes/crossorigin/index.md
@@ -49,7 +49,8 @@ slug: Web/HTML/Attributes/crossorigin
   </tbody>
 </table>
 
-> **备注：** 在 Firefox 83 版本之前，`rel="icon"` 元素不支持 `crossorigin` 属性。也有一个 [Chrome 的未解决的议题](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645)。
+> [!NOTE]
+> 在 Firefox 83 版本之前，`rel="icon"` 元素不支持 `crossorigin` 属性。也有一个 [Chrome 的未解决的议题](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645)。
 
 ### 示例：使用 `crossorigin` 的 `<script>` 元素
 
diff --git a/files/zh-cn/web/html/attributes/disabled/index.md b/files/zh-cn/web/html/attributes/disabled/index.md
index d95f61186e78d1..8e5c793129b147 100644
--- a/files/zh-cn/web/html/attributes/disabled/index.md
+++ b/files/zh-cn/web/html/attributes/disabled/index.md
@@ -17,7 +17,8 @@ slug: Web/HTML/Attributes/disabled
 
 这个布尔型 disabled 属性表示用户不能与该控件或其后代控件进行交互。如果没有指定这个属性，控件会从包含元素中继承其设置，例如 `fieldset`；如果没有设置 `disabled` 属性的包含元素，并且控件本身没有这个属性，那么该控件是启用的。如果在 {{ HTMLElement("optgroup") }} 上声明，选择仍然是交互式的（除非另行禁用），但选项组中的项目都不能选择。
 
-> **备注：** 如果 {{ HTMLElement("fieldset") }} 被禁用，那么除了 {{ HTMLElement("legend") }} 内的表单控件外，其下级表单控件都被禁用。
+> [!NOTE]
+> 如果 {{ HTMLElement("fieldset") }} 被禁用，那么除了 {{ HTMLElement("legend") }} 内的表单控件外，其下级表单控件都被禁用。
 
 当一个支持的元素应用了 `disabled` 属性，{{cssxref(":disabled")}} 伪类也适用于它。反之，支持 `disabled` 属性但没有设置该属性的元素与 {{cssxref(":enabled")}} 伪类匹配。
 
diff --git a/files/zh-cn/web/html/attributes/index.md b/files/zh-cn/web/html/attributes/index.md
index 21a74f7b1c4ba5..15f19225aa3da4 100644
--- a/files/zh-cn/web/html/attributes/index.md
+++ b/files/zh-cn/web/html/attributes/index.md
@@ -1256,7 +1256,8 @@ HTML 定义了布尔属性允许的取值：如果属性存在，其值必须是
 
 ## 事件处理器属性
 
-> **警告：** 不建议使用事件处理器属性。将 HTML 和 JavaScript 代码混合在一起通常会产生难以维护的代码，而且事件处理器属性的执行也可能会被内容安全策略阻止。
+> [!WARNING]
+> 不建议使用事件处理器属性。将 HTML 和 JavaScript 代码混合在一起通常会产生难以维护的代码，而且事件处理器属性的执行也可能会被内容安全策略阻止。
 
 除了上表中列出的属性，全局[事件处理器](/zh-CN/docs/Web/Events/Event_handlers#使用_onevent_属性)（例如 [`onclick`](/zh-CN/docs/Web/API/Element/click_event)）也可以作为[内容属性](#内容属性和_idl_属性)在所有元素上指定。
 
diff --git a/files/zh-cn/web/html/attributes/pattern/index.md b/files/zh-cn/web/html/attributes/pattern/index.md
index 5fa545137ea6d5..906cd23f413f45 100644
--- a/files/zh-cn/web/html/attributes/pattern/index.md
+++ b/files/zh-cn/web/html/attributes/pattern/index.md
@@ -17,7 +17,8 @@ slug: Web/HTML/Attributes/pattern
 
 如果没有指定模式或无效，则不应用正则表达式，此属性被忽略。
 
-> **备注：** 请使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性来指定大多数浏览器将作为工具提示显示的文本，以解释匹配该模式的要求是什么。**不能**仅仅依靠工具提示来进行解释。关于可用性的更多信息见下文。
+> [!NOTE]
+> 请使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性来指定大多数浏览器将作为工具提示显示的文本，以解释匹配该模式的要求是什么。**不能**仅仅依靠工具提示来进行解释。关于可用性的更多信息见下文。
 
 一些支持 `pattern` 属性的输入类型，特别是 {{HTMLElement("input/email", "email")}} 和 {{HTMLElement("input/url", "url")}}，有必须匹配的预期值语法。如果 `pattern` 属性不存在，并且值不符合该值类型的预期语法， {{domxref('ValidityState')}} 对象的只读 {{domxref('ValidityState.typeMismatch','typeMismatch')}} 属性将为 true。
 
@@ -29,7 +30,8 @@ slug: Web/HTML/Attributes/pattern
 
 如果输入的值不是空字符串，并且该值与整个正则表达式不匹配，那么 {{domxref('ValidityState')}} 对象的 {{domxref('ValidityState.patternMismatch','patternMismatch')}} 属性为 `true`，就会出现违反约束条件的现象。模式的正则表达式在与值匹配时，其开始部分必须确定在字符串的开始部分，其结束部分必须确定在字符串的结束部分，这与 JavaScript 正则表达式略有不同：在模式属性的情况下，我们是与整个字符串匹配，而不仅仅是任何子集，如同在模式的开始部分隐含 `^(?:`，而在结束部分隐含 `)$`。
 
-> **备注：** 如果 `pattern` 属性被指定为空值，其值隐含为空字符串。因此，**任何非空的**输入 `value` 都会导致约束违反。
+> [!NOTE]
+> 如果 `pattern` 属性被指定为空值，其值隐含为空字符串。因此，**任何非空的**输入 `value` 都会导致约束违反。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/attributes/readonly/index.md b/files/zh-cn/web/html/attributes/readonly/index.md
index 1e74c7cd1d1ae2..00ba3c226d00a8 100644
--- a/files/zh-cn/web/html/attributes/readonly/index.md
+++ b/files/zh-cn/web/html/attributes/readonly/index.md
@@ -19,7 +19,8 @@ l10n:
 
 该属性不支持 {{HTMLElement("select")}} 或已不可变的 input 类型，也与之无关，如 `{{HTMLElement("input/checkbox", "checkbox")}}`、`{{HTMLElement("input/radio", "radio")}}` 或根据定义不能以值开头的 input 类型，如 `{{HTMLElement("input/file", "file")}}` input 类型。`{{HTMLElement("input/range", "range")}}` 和 `{{HTMLElement("input/color", "color")}}` 都有默认值。`{{HTMLElement("input/hidden", "hidden")}}` input 类型也不支持该属性，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。
 
-> **备注：** 只有文本控件可以设置为只读，因为对于其他控件（如复选框和按钮）来说，只读和禁用之间没有任何有用的区别，所以 `readonly` 属性并不适用。
+> [!NOTE]
+> 只有文本控件可以设置为只读，因为对于其他控件（如复选框和按钮）来说，只读和禁用之间没有任何有用的区别，所以 `readonly` 属性并不适用。
 
 当输入具有 `readonly` 属性时，{{cssxref(":read-only")}} 伪类也适用于该输入。反之，支持 `readonly` 属性但未设置该属性的输入将匹配 {{cssxref(":read-write")}} 伪类。
 
diff --git a/files/zh-cn/web/html/attributes/rel/index.md b/files/zh-cn/web/html/attributes/rel/index.md
index 4b2fb0c96018d9..4c871602711110 100644
--- a/files/zh-cn/web/html/attributes/rel/index.md
+++ b/files/zh-cn/web/html/attributes/rel/index.md
@@ -103,7 +103,8 @@ slug: Web/HTML/Attributes/rel
 
     {{htmlelement('link')}} 元素代表了整个文档的作者信息。
 
-    > **备注：** 由于历史原因，废弃的属性值 `rev="made"` 被视为 `rel="author"`。
+    > [!NOTE]
+    > 由于历史原因，废弃的属性值 `rev="made"` 被视为 `rel="author"`。
 
 - `bookmark`
   - : 与 {{htmlelement('a')}} 和 {{htmlelement('area')}} 元素的 `rel` 属性值相关。如果有的话，给最近的祖先 {{htmlelement('article')}} 元素提供一个固定链接。如果没有祖先 `<article>` 元素，则给出链接元素与之联系最紧密的部分的固定链接。
@@ -127,9 +128,11 @@ slug: Web/HTML/Attributes/rel
 
     如果有多个 `<link rel="icon">`，浏览器会使用它们的 [`media`](/zh-CN/docs/Web/HTML/Element/link#media)、[`type`](/zh-CN/docs/Web/HTML/Element/link#type) 和 [`sizes`](/zh-CN/docs/Web/HTML/Element/link#sizes) 属性来选择最合适的图标。如果几个图标同样合适，则使用最后一个。如果后来发现最合适的图标不合适，例如使用了不支持的格式，浏览器就会继续选择下一个最合适的，以此类推。
 
-    > **备注：** 在 Firefox 83 之前，[crossorigin](/zh-CN/docs/Web/HTML/Attributes/crossorigin)属性不支持 `rel="icon"`，而 [Chrome 也仍有一个未解决的问题](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645)。
+    > [!NOTE]
+    > 在 Firefox 83 之前，[crossorigin](/zh-CN/docs/Web/HTML/Attributes/crossorigin)属性不支持 `rel="icon"`，而 [Chrome 也仍有一个未解决的问题](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645)。
 
-    > **备注：** 苹果的 iOS 系统不使用这种链接类型，也不像其他移动浏览器那样使用 [`sizes`](/zh-CN/docs/Web/HTML/Element/link#sizes) 属性，来选择网页夹或启动占位符的网页图标。相反，它分别使用非标准的 [`apple-touch-icon`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) 和 [`apple-touch-starttup-image`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6)。
+    > [!NOTE]
+    > 苹果的 iOS 系统不使用这种链接类型，也不像其他移动浏览器那样使用 [`sizes`](/zh-CN/docs/Web/HTML/Element/link#sizes) 属性，来选择网页夹或启动占位符的网页图标。相反，它分别使用非标准的 [`apple-touch-icon`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) 和 [`apple-touch-starttup-image`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6)。
 
     > **备注：** `shortcut` 链接类型经常出现在 `icon` 之前，但这种链接类型是不符合规定的，该类型会被忽略，且**网站作者不得再使用它**。
 
@@ -141,7 +144,8 @@ slug: Web/HTML/Attributes/rel
     <link rel="license" href="#license" />
     ```
 
-    > **备注：** 虽然同义词 `copyright` 也是可以识别的，但它是不正确的，必须避免使用。
+    > [!NOTE]
+    > 虽然同义词 `copyright` 也是可以识别的，但它是不正确的，必须避免使用。
 
 - `manifest`
   - : 代表 [Web 应用清单](/zh-CN/docs/Web/Manifest)。需要使用 CORS 协议进行跨源获取。
diff --git a/files/zh-cn/web/html/attributes/rel/preload/index.md b/files/zh-cn/web/html/attributes/rel/preload/index.md
index fc9e57ec730e50..b0c78d5f11aee4 100644
--- a/files/zh-cn/web/html/attributes/rel/preload/index.md
+++ b/files/zh-cn/web/html/attributes/rel/preload/index.md
@@ -71,9 +71,11 @@ slug: Web/HTML/Attributes/rel/preload
 - `worker`：JavaScript web worker 或 shared worker。
 - `video`：视频文件，通常在 {{htmlelement("video")}} 中使用。
 
-> **备注：** 预加载 `font` 和 `fetch` 资源需要设置 `crossorigin` 属性；请参阅下文的[启用 CORS 的获取请求](#启用_cors_的获取请求)。
+> [!NOTE]
+> 预加载 `font` 和 `fetch` 资源需要设置 `crossorigin` 属性；请参阅下文的[启用 CORS 的获取请求](#启用_cors_的获取请求)。
 
-> **备注：** 关于这些值以及它们所期望被使用的 web 功能的更多细节可以在预加载规范中找到——请参见[链接元素扩展](https://w3c.github.io/preload/#link-element-extensions)。此外，请注意，`as` 属性可以接受的值的完整列表受 Fetch 规范的约束——请参见[请求目标](https://fetch.spec.whatwg.org/#concept-request-destination)。
+> [!NOTE]
+> 关于这些值以及它们所期望被使用的 web 功能的更多细节可以在预加载规范中找到——请参见[链接元素扩展](https://w3c.github.io/preload/#link-element-extensions)。此外，请注意，`as` 属性可以接受的值的完整列表受 Fetch 规范的约束——请参见[请求目标](https://fetch.spec.whatwg.org/#concept-request-destination)。
 
 ## 包括 MIME 类型
 
@@ -193,7 +195,8 @@ slug: Web/HTML/Attributes/rel/preload
 
 ## 脚本和预加载
 
-> **备注：** 如果你正在使用 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)，请使用 [`<link rel="modulepreload">`](/zh-CN/docs/Web/HTML/Attributes/rel/modulepreload)。
+> [!NOTE]
+> 如果你正在使用 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)，请使用 [`<link rel="modulepreload">`](/zh-CN/docs/Web/HTML/Attributes/rel/modulepreload)。
 
 关于这些预加载的另一个好处是，你可以使用脚本来执行它们。例如，这里我们创建一个 {{domxref("HTMLLinkElement")}} 实例，然后将其附加到 DOM 中：
 
diff --git a/files/zh-cn/web/html/constraint_validation/index.md b/files/zh-cn/web/html/constraint_validation/index.md
index 0cb7552064c8ee..66f6de6cad908e 100644
--- a/files/zh-cn/web/html/constraint_validation/index.md
+++ b/files/zh-cn/web/html/constraint_validation/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Constraint_validation
 
 对于这些概念的基本介绍和示例，参阅[表单数据校验教程](/zh-CN/docs/Learn/Forms/Form_validation)一页的介绍。
 
-> **备注：** HTML 约束验证并不能移除*服务端*验证的需要。尽管无效的表单请求要少得多，但无效的表单请求仍然可能被发送，例如被试图欺骗你的网络应用的坏人发送。因此，你需要始终在服务端验证输入约束，其方式与在客户端所做的一致。
+> [!NOTE]
+> HTML 约束验证并不能移除*服务端*验证的需要。尽管无效的表单请求要少得多，但无效的表单请求仍然可能被发送，例如被试图欺骗你的网络应用的坏人发送。因此，你需要始终在服务端验证输入约束，其方式与在客户端所做的一致。
 
 ## 固有和基本的约束
 
@@ -266,7 +267,8 @@ slug: Web/HTML/Constraint_validation
 
 每个国家的邮政编码都不相同。大多数国家允许有一个可选的国家代码前缀（如德国的 `D-`，法国或瑞士的 `F-`），还有其他一些国家的邮政编码只有固定的数字；其他国家，如英国，有更复杂的结构，允许在一些特定的位置有字母。
 
-> **备注：** 这不是一个全面的邮政编码验证库，而是关键概念的演示。
+> [!NOTE]
+> 这不是一个全面的邮政编码验证库，而是关键概念的演示。
 
 作为示例，我们会向以下这个简单的表单中添加一段代码来进行约束验证：
 
diff --git a/files/zh-cn/web/html/content_categories/index.md b/files/zh-cn/web/html/content_categories/index.md
index eff42fb08f0fec..3f78b0b9401635 100644
--- a/files/zh-cn/web/html/content_categories/index.md
+++ b/files/zh-cn/web/html/content_categories/index.md
@@ -15,9 +15,10 @@ l10n:
 - 表单相关的内容类，描述了表单相关元素共有的规则；
 - 特殊内容类，描述了仅仅在少数元素（有时仅在特定的上下文中）共享的规则。
 
-> **备注：** 对这些内容类别及其功能的更详细的讨论超出了本文的范围；如果你向了解这些内容，请阅读 [HTML 规范的相关部分](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content)。
+> [!NOTE]
+> 对这些内容类别及其功能的更详细的讨论超出了本文的范围；如果你向了解这些内容，请阅读 [HTML 规范的相关部分](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content)。
 
-[![显示各种内容类别相互之间是如何关联的维恩图。后面的部分以文本形式解释这些关系。](content_categories_venn.png)](/zh-CN/docs/Web/HTML/Content_categories/content_categories_venn.png)
+![显示各种内容类别相互之间是如何关联的维恩图。后面的部分以文本形式解释这些关系。](content_categories_venn.png)
 
 ## 主内容分类
 
@@ -133,9 +134,11 @@ l10n:
 
 属于此分类的元素有：{{HTMLElement("Heading_Elements", "<code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>")}} 和 {{HTMLElement("hgroup")}}。
 
-> **备注：** 尽管 {{HTMLElement("header")}} 可能包含一些标题内容，但其并不是标题内容本身。
+> [!NOTE]
+> 尽管 {{HTMLElement("header")}} 可能包含一些标题内容，但其并不是标题内容本身。
 
-> **备注：** 已不再推荐使用 {{HTMLElement("hgroup")}} 元素，因为它不能与辅助技术一起正常工作。在 HTML 5 最终定稿之前，它已从 W3C 的 HTML 规范中删除，但其仍属于 WHATWG 规范，并且仍被大多数浏览器部分支持。
+> [!NOTE]
+> 已不再推荐使用 {{HTMLElement("hgroup")}} 元素，因为它不能与辅助技术一起正常工作。在 HTML 5 最终定稿之前，它已从 W3C 的 HTML 规范中删除，但其仍属于 WHATWG 规范，并且仍被大多数浏览器部分支持。
 
 ### 短语内容
 
diff --git a/files/zh-cn/web/html/element/a/index.md b/files/zh-cn/web/html/element/a/index.md
index 830d59003e0adf..fa284f8e57c5e9 100644
--- a/files/zh-cn/web/html/element/a/index.md
+++ b/files/zh-cn/web/html/element/a/index.md
@@ -75,7 +75,8 @@ slug: Web/HTML/Element/a
     - `_parent`：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 `_self` 相同。
     - `_top`：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 `_self` 相同。
 
-      > **备注：** 在 `<a>` 元素上使用 `target="_blank"` 隐式提供了与使用 [`rel="noopener"`](/zh-CN/docs/Web/HTML/Attributes/rel/noopener) 相同的 `rel` 行为，即不会设置 `window.opener`。
+      > [!NOTE]
+      > 在 `<a>` 元素上使用 `target="_blank"` 隐式提供了与使用 [`rel="noopener"`](/zh-CN/docs/Web/HTML/Attributes/rel/noopener) 相同的 `rel` 行为，即不会设置 `window.opener`。
 
 - `type`
   - : 该属性指定在一个 {{Glossary("MIME type","MIME 类型")}}链接目标的形式的媒体类型。没有内置的功能。
@@ -86,7 +87,8 @@ slug: Web/HTML/Element/a
 
   - : 此属性定义链接资源的{{Glossary("character encoding","字符编码")}}。
 
-    > **备注：** 该属性已作废，**不应使用**。请在链接的 URL 上使用 HTTP {{HTTPHeader("Content-Type")}} 标头。
+    > [!NOTE]
+    > 该属性已作废，**不应使用**。请在链接的 URL 上使用 HTTP {{HTTPHeader("Content-Type")}} 标头。
 
 - `coords` {{Deprecated_Inline}}
   - : 与 [`shape` 属性](#shape)一同使用，以逗号分隔的坐标列表。
@@ -94,7 +96,8 @@ slug: Web/HTML/Element/a
 
   - : 在定义一个可能的目标位置时曾经是必需的。在 HTML 4.01 规范中，`<a>` 元素可以同时使用 `id` 和 `name`，只要它们有相同的值。
 
-    > **备注：** 使用全局属性 [`id`](/zh-CN/docs/HTML/Global_attributes#id) 来代替。
+    > [!NOTE]
+    > 使用全局属性 [`id`](/zh-CN/docs/HTML/Global_attributes#id) 来代替。
 
 - `rev` {{Deprecated_Inline}}
   - : 指定一个反向链接；与 [`rel` 属性](#rel)作用相反。因为非常混乱而被废弃。
@@ -102,7 +105,8 @@ slug: Web/HTML/Element/a
 
   - : 图像映射（image map）中超链接区域的形状。
 
-    > **备注：** 使用 {{HTMLElement("area")}} 元素来代替图像映射。
+    > [!NOTE]
+    > 使用 {{HTMLElement("area")}} 元素来代替图像映射。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/acronym/index.md b/files/zh-cn/web/html/element/acronym/index.md
index e87eae7f0568ce..ce6af85dbba7b9 100644
--- a/files/zh-cn/web/html/element/acronym/index.md
+++ b/files/zh-cn/web/html/element/acronym/index.md
@@ -9,7 +9,8 @@ l10n:
 
 [HTML](/zh-CN/docs/Web/HTML) **`<acronym>`** 元素允许作者明确声明一个构成单词首字母缩略字或缩写的字符序列。
 
-> **警告：** 请不要使用该元素，而应使用 {{HTMLElement("abbr")}} 元素代替。
+> [!WARNING]
+> 请不要使用该元素，而应使用 {{HTMLElement("abbr")}} 元素代替。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/area/index.md b/files/zh-cn/web/html/element/area/index.md
index ef09a2ca6922eb..96bf5e398af817 100644
--- a/files/zh-cn/web/html/element/area/index.md
+++ b/files/zh-cn/web/html/element/area/index.md
@@ -37,7 +37,8 @@ _HTML `<area>` 元素 在图片上定义一个热点区域，可以关联一个
 
   - : 指明此区域没有超链接。在\<area>中必须存在 nohref 或者 href。
 
-    > **备注：** 此属性在 html5 中是废弃的，而忽略 href 属性就足够了。
+    > [!NOTE]
+    > 此属性在 html5 中是废弃的，而忽略 href 属性就足够了。
 
 - `rel`
   - : 对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当 href 属性是 presen 时才使用该属性
diff --git a/files/zh-cn/web/html/element/audio/index.md b/files/zh-cn/web/html/element/audio/index.md
index 1b4ff49b307064..1f91993cb52ec6 100644
--- a/files/zh-cn/web/html/element/audio/index.md
+++ b/files/zh-cn/web/html/element/audio/index.md
@@ -21,7 +21,8 @@ slug: Web/HTML/Element/audio
 
   - : 布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。
 
-    > **备注：** 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的[自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
+    > [!NOTE]
+    > 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的[自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
 
 - `controls`
   - : 如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
@@ -37,7 +38,8 @@ slug: Web/HTML/Element/audio
 
   - : 这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如 Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考 [this proposed specification](https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute) 来获取更多信息。
 
-    > **备注：** 在 Safari 中，你能使用 [`x-webkit-airplay="deny"`](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html) 作为兜底方案。
+    > [!NOTE]
+    > 在 Safari 中，你能使用 [`x-webkit-airplay="deny"`](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html) 作为兜底方案。
 
 - `duration` {{ReadOnlyInline}}
   - : 这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 `NaN`。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) 连接的流），那么这个值将返回 `+Infinity`。
@@ -135,7 +137,8 @@ slug: Web/HTML/Element/audio
 - {{domxref("HTMLMediaElement.textTracks")}}
   - : 在该 {{domxref("TextTrackList")}} 对象上添加监听，以在文字轨道被添加进元素时获得通知。（也许用于字幕，译者猜测）
 
-> **备注：** 尽管是 `<audio>` 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。
+> [!NOTE]
+> 尽管是 `<audio>` 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。
 
 举个例子，为了侦测何时音轨从一个 `<audio>` 元素中添加或者移除，你可以使用如下代码：
 
diff --git a/files/zh-cn/web/html/element/big/index.md b/files/zh-cn/web/html/element/big/index.md
index 92a172c70723ff..96843593562236 100644
--- a/files/zh-cn/web/html/element/big/index.md
+++ b/files/zh-cn/web/html/element/big/index.md
@@ -9,7 +9,8 @@ l10n:
 
 已弃用的 **`<big>`** [HTML](/zh-CN/docs/Web/HTML) 元素使其中包裹的文字会以比周围文本大一级的字体大小（例如将 `medium` 变为 `large`）渲染。字体大小的最大值受限于浏览器的允许范围。
 
-> **警告：** 该元素已从规范中移除，不应继续使用。请改用 CSS {{cssxref("font-size")}} 属性来调整字体大小。
+> [!WARNING]
+> 该元素已从规范中移除，不应继续使用。请改用 CSS {{cssxref("font-size")}} 属性来调整字体大小。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/br/index.md b/files/zh-cn/web/html/element/br/index.md
index fe0da4f3c17306..be2eda7988d9a6 100644
--- a/files/zh-cn/web/html/element/br/index.md
+++ b/files/zh-cn/web/html/element/br/index.md
@@ -13,7 +13,8 @@ l10n:
 
 从上面的示例中可以看出，在我们期望文本中断的地方都包含了一个 `<br>` 元素。`<br>` 之后的文本从文本块的下一行开始
 
-> **备注：** 不要用 `<br>` 来增加文本之间的行间隔；请使用 {{HTMLElement("p")}} 元素来包装文本，并使用 [CSS](/zh-CN/docs/CSS) {{cssxref('margin')}} 属性来控制间隔大小。
+> [!NOTE]
+> 不要用 `<br>` 来增加文本之间的行间隔；请使用 {{HTMLElement("p")}} 元素来包装文本，并使用 [CSS](/zh-CN/docs/CSS) {{cssxref('margin')}} 属性来控制间隔大小。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/caption/index.md b/files/zh-cn/web/html/element/caption/index.md
index 07276aec01569e..5a491bc4b628cc 100644
--- a/files/zh-cn/web/html/element/caption/index.md
+++ b/files/zh-cn/web/html/element/caption/index.md
@@ -45,7 +45,8 @@ slug: Web/HTML/Element/caption
     - `right`, 显示在表格右边
     - `bottom`, 显示在表格下面
 
-    > **备注：** 不要使用这个属性，它已经被弃用：{{HTMLElement("caption")}} 元素应该使用 [CSS](/zh-CN/docs/CSS)设置样式。要得到类似`align`属性的效果，使用 [CSS](/zh-CN/docs/CSS) 属性 {{cssxref("caption-side")}} 和 {{cssxref("text-align")}}.
+    > [!NOTE]
+    > 不要使用这个属性，它已经被弃用：{{HTMLElement("caption")}} 元素应该使用 [CSS](/zh-CN/docs/CSS)设置样式。要得到类似`align`属性的效果，使用 [CSS](/zh-CN/docs/CSS) 属性 {{cssxref("caption-side")}} 和 {{cssxref("text-align")}}.
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/html/element/center/index.md b/files/zh-cn/web/html/element/center/index.md
index cb1aee31ceb885..f42e0d98457f1d 100644
--- a/files/zh-cn/web/html/element/center/index.md
+++ b/files/zh-cn/web/html/element/center/index.md
@@ -54,7 +54,8 @@ l10n:
 
 {{EmbedLiveSample("示例 3（CSS 替代方案）")}}
 
-> **备注：** 将 {{Cssxref("text-align")}}`:center` 应用于 {{HTMLElement("div")}} 或 {{HTMLElement("p")}} 元素会将这些元素的*内容*居中，同时保持其总体尺寸不变。
+> [!NOTE]
+> 将 {{Cssxref("text-align")}}`:center` 应用于 {{HTMLElement("div")}} 或 {{HTMLElement("p")}} 元素会将这些元素的*内容*居中，同时保持其总体尺寸不变。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/element/cite/index.md b/files/zh-cn/web/html/element/cite/index.md
index bfcf86454ac960..82434d9555c59a 100644
--- a/files/zh-cn/web/html/element/cite/index.md
+++ b/files/zh-cn/web/html/element/cite/index.md
@@ -40,7 +40,8 @@ _HTML 引用（Citation）标签_ (**\<cite>**) 表示一个作品的引用，
 
 这个元素仅包含了 所有的[全局属性](/zh-CN/docs/HTML/Global_attributes).
 
-> **备注：** 适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论，鸣叫，或者书面或口头陈述，等等。
+> [!NOTE]
+> 适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论，鸣叫，或者书面或口头陈述，等等。
 >
 > - W3C 规范，对创造性的工作可能包括作者的名字，而 WHATWG 宣布，它可能不包括在任何情况下，一个人的名字。
 > - 在 blockquote 元素或者 q 元素上使用 cite 或者 blockquote 属性来标明参考的在线资源。
diff --git a/files/zh-cn/web/html/element/col/index.md b/files/zh-cn/web/html/element/col/index.md
index feb1a16df27da4..cc11ecebbf0571 100644
--- a/files/zh-cn/web/html/element/col/index.md
+++ b/files/zh-cn/web/html/element/col/index.md
@@ -26,7 +26,8 @@ l10n:
 
   - : 指定每列单元格的水平对齐方式。可能的{{Glossary("enumerated", "枚举")}}值有 `left`、`center`、`right`、`justify` 和 `char`。如果支持，`char` 值将根据 [`char`](#char) 属性中定义的字符和 [`charoff`](#charoff) 属性定义的偏移量对文本内容进行对齐。请注意，该属性会覆盖其 {{HTMLElement("colgroup")}} 父元素指定的 [`align`](/zh-CN/docs/Web/HTML/Element/colgroup#align)。使用 {{cssxref("text-align")}} 和 {{htmlelement("th")}} 元素上的 CSS 属性，因为该属性已被弃用。
 
-    > **备注：** 在 `<col>` 元素上设置 `text-align` 没有任何作用，因为 `<col>` 没有后代，因此没有元素继承自它。
+    > [!NOTE]
+    > 在 `<col>` 元素上设置 `text-align` 没有任何作用，因为 `<col>` 没有后代，因此没有元素继承自它。
     >
     > 如果表格没有使用 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性，请使用 `td:nth-of-type(an+b)` CSS 选择器。将 `a` 设置为零，将 `b` 设置为表格中列的位置，例如，使用 `td:nth-of-type(2) { text-align: right; }` 来右对齐第二列单元格。
     >
@@ -48,7 +49,8 @@ l10n:
 
   - : 指定每列单元格的垂直对齐方式。可能的{{Glossary("enumerated", "枚举")}}值有 `baseline`、`bottom`、`middle` 和 `top`。请注意，该属性会覆盖其 {{HTMLElement("colgroup")}} 父元素指定的 [`valign`](/zh-CN/docs/Web/HTML/Element/colgroup#valign)。使用 {{cssxref("vertical-align")}} 和 {{htmlelement("th")}} 元素上的 CSS 属性，因为该属性已被弃用。
 
-    > **备注：** 在 `<col>` 元素上设置 `vertical-align` 没有任何作用，因为 `<col>` 没有后代，因此没有元素继承自它。
+    > [!NOTE]
+    > 在 `<col>` 元素上设置 `vertical-align` 没有任何作用，因为 `<col>` 没有后代，因此没有元素继承自它。
     >
     > 如果表格没有使用 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性，请使用 `td:nth-of-type(an+b)` CSS 选择器。将 `a` 设置为零，将 `b` 设置为表格中列的位置，例如，使用 `td:nth-of-type(2) { vertical-align: middle; }` 将第二列单元格垂直居中。
     >
diff --git a/files/zh-cn/web/html/element/colgroup/index.md b/files/zh-cn/web/html/element/colgroup/index.md
index 7449c17b66c774..278ab2378530bb 100644
--- a/files/zh-cn/web/html/element/colgroup/index.md
+++ b/files/zh-cn/web/html/element/colgroup/index.md
@@ -19,7 +19,8 @@ l10n:
 
   - : 指定 `<col>` 元素跨列的连续列数。该值必须是大于 0 的正整数。如果不存在，其默认值为 `1`。
 
-    > **备注：** 如果 `<colgroup>` 中存在一个或多个 {{HTMLElement("col")}} 元素，则不允许使用 `span` 属性。
+    > [!NOTE]
+    > 如果 `<colgroup>` 中存在一个或多个 {{HTMLElement("col")}} 元素，则不允许使用 `span` 属性。
 
 ### 弃用的属性
 
@@ -29,7 +30,8 @@ l10n:
 
   - : 指定每个列组单元格的水平对齐方式。可能的{{Glossary("enumerated", "枚举")}}值有 `left`、`center`、`right`、`justify` 和 `char`。如果支持，`char` 值将根据 [`char`](#char) 属性中定义的字符和 [`charoff`](#charoff) 属性定义的偏移量对文本内容进行对齐。请注意，后代 {{HTMLElement("col")}} 元素可以使用自己的 [`align`](/zh-CN/docs/Web/HTML/Element/col#align) 属性覆盖该值。使用 {{cssxref("text-align")}} 和 {{htmlelement("th")}} 元素上的 CSS 属性，因为该属性已被弃用。
 
-    > **备注：** 在 `<colgroup>` 元素上设置 `text-align` 没有任何作用，因为 {{HTMLElement("td")}} 和 {{HTMLElement("th")}} 元素不是 `<colgroup>` 元素的后代，因此它们不能从该元素继承。
+    > [!NOTE]
+    > 在 `<colgroup>` 元素上设置 `text-align` 没有任何作用，因为 {{HTMLElement("td")}} 和 {{HTMLElement("th")}} 元素不是 `<colgroup>` 元素的后代，因此它们不能从该元素继承。
     >
     > 如果表格没有使用 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性，则在每列使用 `td:nth-of-type(an+b)` CSS 选择器，其中 `a` 为表格中列的总数，`b` 为列在表格中的序号位置，例如 `td:nth-of-type(7n+2) { text-align: right; }` 可右对齐第二列单元格。
     >
@@ -51,7 +53,8 @@ l10n:
 
   - : 指定每个列组单元格的垂直对齐方式。可能的{{Glossary("enumerated", "枚举")}}值有 `baseline`、`bottom`、`middle` 和 `top`。请注意，后代 {{HTMLElement("col")}} 元素可以使用自己的 [`valign`](/zh-CN/docs/Web/HTML/Element/col#valign) 属性覆盖此值。使用 {{cssxref("vertical-align")}} 和 {{htmlelement("th")}} 元素上的 CSS 属性，因为该属性已被弃用。
 
-    > **备注：** 在 `<colgroup>` 元素上设置 `vertical-align` 没有任何作用，因为 {{HTMLElement("td")}} 和 {{HTMLElement("th")}} 元素不是 `<colgroup>` 元素的后代，因此它们不能从该元素继承。
+    > [!NOTE]
+    > 在 `<colgroup>` 元素上设置 `vertical-align` 没有任何作用，因为 {{HTMLElement("td")}} 和 {{HTMLElement("th")}} 元素不是 `<colgroup>` 元素的后代，因此它们不能从该元素继承。
     >
     > 如果表格没有使用 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性，请在每列使用 [`td:nth-of-type()`](/zh-CN/docs/Web/CSS/:nth-of-type) CSS 选择器，例如，`td:nth-of-type(2) { vertical-align: middle; }` 使第二列单元格垂直居中。
     >
diff --git a/files/zh-cn/web/html/element/details/index.md b/files/zh-cn/web/html/element/details/index.md
index 9d35ed5cf02576..884d0dadd8226b 100644
--- a/files/zh-cn/web/html/element/details/index.md
+++ b/files/zh-cn/web/html/element/details/index.md
@@ -29,7 +29,8 @@ slug: Web/HTML/Element/details
 
   - : 这个布尔属性表示细节内容——也就是 `<details>` 元素的内容——目前是否可见。默认情况下为 `false`，意味着细节内容是不可见的。
 
-    > **备注：** 你必须完全删除这个属性来使细节内容隐藏。`open="false"` 使细节内容可见，因为这个属性是布尔值。
+    > [!NOTE]
+    > 你必须完全删除这个属性来使细节内容隐藏。`open="false"` 使细节内容可见，因为这个属性是布尔值。
 
 ## 事件
 
diff --git a/files/zh-cn/web/html/element/dir/index.md b/files/zh-cn/web/html/element/dir/index.md
index dd3b32a3b9ebdc..04e34cb2dcecf5 100644
--- a/files/zh-cn/web/html/element/dir/index.md
+++ b/files/zh-cn/web/html/element/dir/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<dir>`** [HTML](/zh-CN/docs/Web/HTML) 元素用于作为包含文件或文件夹目录的容器，可能由{{Glossary("user agent", "用户代理")}}应用样式和图标。不应使用此过时元素；相反，对于包括文件列表在内的列表应使用 {{HTMLElement("ul")}} 元素。
 
-> **警告：** 请不要使用这个元素。尽管它曾在早期 HTML 规范中出现，但在 HTML4 中已被弃用，并且已被完全移除。
+> [!WARNING]
+> 请不要使用这个元素。尽管它曾在早期 HTML 规范中出现，但在 HTML4 中已被弃用，并且已被完全移除。
 
 ## DOM 接口
 
diff --git a/files/zh-cn/web/html/element/div/index.md b/files/zh-cn/web/html/element/div/index.md
index 6fe8ee683861b4..16d92abc104900 100644
--- a/files/zh-cn/web/html/element/div/index.md
+++ b/files/zh-cn/web/html/element/div/index.md
@@ -17,7 +17,8 @@ l10n:
 
 这个元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
 
-> **备注：** 请勿再使用已过时的 `align` 属性；相反，你应该使用 CSS 属性或技术，例如 [CSS 网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)或 [CSS 弹性盒子](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox)来对齐和定位页面上的 `<div>` 元素。
+> [!NOTE]
+> 请勿再使用已过时的 `align` 属性；相反，你应该使用 CSS 属性或技术，例如 [CSS 网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)或 [CSS 弹性盒子](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox)来对齐和定位页面上的 `<div>` 元素。
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/html/element/embed/index.md b/files/zh-cn/web/html/element/embed/index.md
index 4608c5e0cfebc2..966844f6fa8e16 100644
--- a/files/zh-cn/web/html/element/embed/index.md
+++ b/files/zh-cn/web/html/element/embed/index.md
@@ -5,7 +5,8 @@ slug: Web/HTML/Element/embed
 
 **HTML `<embed>` 元素**将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。
 
-> **备注：** 这篇文档仅定义该元素在 HTML5 中定义的部分，不包含该元素之前的声明内容和非标准的实现。
+> [!NOTE]
+> 这篇文档仅定义该元素在 HTML5 中定义的部分，不包含该元素之前的声明内容和非标准的实现。
 
 请记住，大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果你希望你的网站可以在普通用户的浏览器上运行，那么依靠 `<embed>` 通常是不明智的。
 
@@ -63,7 +64,8 @@ slug: Web/HTML/Element/embed
 
 ## 浏览器兼容性
 
-> **备注：** 不同浏览器之间显示有差异。Blink 内核浏览器（Chrome，Opera）会显示 HTML 资源的内容，但 Firefox 会显示一条通知消息，指出内容需要一个插件（见 [Firefox bug 730768](https://bugzil.la/730768)）。建议使用 \<object> 或 \<iframe> 元素。
+> [!NOTE]
+> 不同浏览器之间显示有差异。Blink 内核浏览器（Chrome，Opera）会显示 HTML 资源的内容，但 Firefox 会显示一条通知消息，指出内容需要一个插件（见 [Firefox bug 730768](https://bugzil.la/730768)）。建议使用 \<object> 或 \<iframe> 元素。
 
 {{Compat}}
 
diff --git a/files/zh-cn/web/html/element/fieldset/index.md b/files/zh-cn/web/html/element/fieldset/index.md
index 8f329169cdbe4b..61e6b0c6f6bec9 100644
--- a/files/zh-cn/web/html/element/fieldset/index.md
+++ b/files/zh-cn/web/html/element/fieldset/index.md
@@ -23,7 +23,8 @@ slug: Web/HTML/Element/fieldset
 
   - : 元素分组的名称
 
-    > **备注：** fieldset 的标题由第一个 {{HTMLElement("legend")}} 子元素确定。
+    > [!NOTE]
+    > fieldset 的标题由第一个 {{HTMLElement("legend")}} 子元素确定。
 
 ## 使用 CSS 样式
 
@@ -37,7 +38,8 @@ slug: Web/HTML/Element/fieldset
 
 你可以以任意方式自行设置 `<fieldset>` 和 `<legend>` 的样式以配合你的页面设计。
 
-> **备注：** 截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 [flexbox](/zh-CN/docs/Glossary/Flexbox) 和 [grid](/zh-CN/docs/Web/CSS/CSS_grid_layout) 布局。[这个 GitHub issue](https://github.com/w3c/csswg-drafts/issues/321) 跟踪了这个 bug。
+> [!NOTE]
+> 截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 [flexbox](/zh-CN/docs/Glossary/Flexbox) 和 [grid](/zh-CN/docs/Web/CSS/CSS_grid_layout) 布局。[这个 GitHub issue](https://github.com/w3c/csswg-drafts/issues/321) 跟踪了这个 bug。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/font/index.md b/files/zh-cn/web/html/element/font/index.md
index 488c4cb83cf4bf..585626d898c62b 100644
--- a/files/zh-cn/web/html/element/font/index.md
+++ b/files/zh-cn/web/html/element/font/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element/font
 
 _HTML Font 元素_（`<font>`）定义了该内容的字体大小、顏色与表现。
 
-> **备注：** 不要使用这个元素！请使用 CSS [字体](/zh-CN/docs/Web/CSS/CSS_fonts)属性来为文本添加样式。
+> [!NOTE]
+> 不要使用这个元素！请使用 CSS [字体](/zh-CN/docs/Web/CSS/CSS_fonts)属性来为文本添加样式。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/frameset/index.md b/files/zh-cn/web/html/element/frameset/index.md
index 9bd06c749a210c..34b3b6b485e870 100644
--- a/files/zh-cn/web/html/element/frameset/index.md
+++ b/files/zh-cn/web/html/element/frameset/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element/frameset
 
 `<frameset>` 是一个用于包含 {{HTMLElement("frame")}} 的 HTML 元素。
 
-> **备注：** 现在不鼓励使用 frame，而是用{{HTMLElement("iframe")}}。现今的网站一般都不使用 frame。
+> [!NOTE]
+> 现在不鼓励使用 frame，而是用{{HTMLElement("iframe")}}。现今的网站一般都不使用 frame。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/heading_elements/index.md b/files/zh-cn/web/html/element/heading_elements/index.md
index fd923e9b78b743..211e80a3dfb4e4 100644
--- a/files/zh-cn/web/html/element/heading_elements/index.md
+++ b/files/zh-cn/web/html/element/heading_elements/index.md
@@ -40,7 +40,8 @@ slug: Web/HTML/Element/Heading_Elements
 
 该元素包含所有[全局特性](/zh-CN/docs/Web/HTML/Global_attributes)。
 
-> **备注：** align 属性已废弃；不要继续使用它。
+> [!NOTE]
+> align 属性已废弃；不要继续使用它。
 
 ## 使用要点
 
diff --git a/files/zh-cn/web/html/element/iframe/index.md b/files/zh-cn/web/html/element/iframe/index.md
index fd43a63f948a18..d0b92530f58c3d 100644
--- a/files/zh-cn/web/html/element/iframe/index.md
+++ b/files/zh-cn/web/html/element/iframe/index.md
@@ -11,7 +11,8 @@ slug: Web/HTML/Element/iframe
 
 每个嵌入的浏览上下文（embedded browsing context）都有自己的[会话历史记录 (session history)](/zh-CN/docs/Web/API/History)和[DOM 树](/zh-CN/docs/Web/API/Document)。包含嵌入内容的浏览上下文称为*父级浏览上下文*。顶级浏览上下文（没有父级）通常是由 {{domxref("Window")}} 对象表示的浏览器窗口。
 
-> **警告：** 页面上的每个`<iframe>`都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的`<iframe>`，但是你最好还是先看看这么做会不会导致某些性能问题。
+> [!WARNING]
+> 页面上的每个`<iframe>`都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的`<iframe>`，但是你最好还是先看看这么做会不会导致某些性能问题。
 
 ## 属性
 
@@ -23,13 +24,15 @@ slug: Web/HTML/Element/iframe
 
   - : 设置为`true`时，可以通过调用 `<iframe>` 的 {{domxref("Element.requestFullscreen", "requestFullscreen()")}} 方法激活全屏模式。
 
-    > **备注：** 这是一个历史遗留属性，已经被重新定义为 `allow="fullscreen"`。
+    > [!NOTE]
+    > 这是一个历史遗留属性，已经被重新定义为 `allow="fullscreen"`。
 
 - `allowpaymentrequest`
 
   - : 设置为`true`时，跨域的 `<iframe>` 就可以调用 [Payment Request API](/zh-CN/docs/Web/API/Payment_Request_API)。
 
-    > **备注：** 这是一个历史遗留属性，已经被重新定义为 `allow="payment"`.
+    > [!NOTE]
+    > 这是一个历史遗留属性，已经被重新定义为 `allow="payment"`.
 
 - `csp` {{experimental_inline}}
   - : 对嵌入的资源配置[内容安全策略](/zh-CN/docs/Web/HTTP/CSP)。查看 {{domxref("HTMLIFrameElement.csp")}} 获取详情。
@@ -76,7 +79,8 @@ slug: Web/HTML/Element/iframe
     - `allow-top-navigation`: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。
     - `allow-top-navigation-by-user-activation`: 允许嵌入的浏览上下文在经过用户允许后导航（加载）内容到顶级的浏览上下文。
 
-    > **备注：** 当被嵌入的文档与主页面同源时，强烈建议不要同时使用 `allow-scripts` 和 `allow-same-origin`。如果同时使用，嵌入的文档就可以通过代码删除 `sandbox` 属性，如此，就安全性而言还不如不用`sandbox`。
+    > [!NOTE]
+    > 当被嵌入的文档与主页面同源时，强烈建议不要同时使用 `allow-scripts` 和 `allow-same-origin`。如果同时使用，嵌入的文档就可以通过代码删除 `sandbox` 属性，如此，就安全性而言还不如不用`sandbox`。
     >
     > - 如果攻击者可以在沙箱化的 `iframe` 之外展示内容，例如用户在新标签页中打开内联框架，那么沙箱化也就没有意义了。建议把这种内容放置到独立的专用域中，以减小可能的损失。
     > - 沙箱属性 (sandbox) 在 Internet Explorer 9 及更早的版本上不被支持。
@@ -115,7 +119,8 @@ slug: Web/HTML/Element/iframe
 - `mozbrowser` {{non-standard_inline}}
   - : 这个属性可以让 `<iframe>` 变得像顶级浏览器窗口，详情请参看 [Browser API](/zh-CN/docs/Web/API/Using_the_Browser_API)。这个属性**只能**在 [WebExtensions](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 中使用。
 
-> **备注：** 查看 [Firefox bug 1318532](https://bugzil.la/1318532) 了解如何在 Firefox 的 WebExtensions 中使用此属性。
+> [!NOTE]
+> 查看 [Firefox bug 1318532](https://bugzil.la/1318532) 了解如何在 Firefox 的 WebExtensions 中使用此属性。
 
 ## 脚本
 
diff --git a/files/zh-cn/web/html/element/img/index.md b/files/zh-cn/web/html/element/img/index.md
index 1232455ace5160..5f3f01a4a990ff 100644
--- a/files/zh-cn/web/html/element/img/index.md
+++ b/files/zh-cn/web/html/element/img/index.md
@@ -58,7 +58,8 @@ Web 最常用的图像格式是：
 
   - : 定义了图像的备用文本描述。
 
-    > **备注：** 浏览器并非总是会显示图像。比如：
+    > [!NOTE]
+    > 浏览器并非总是会显示图像。比如：
     >
     > - 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
     > - 用户选择不显示图像（比如为了节省带宽，或出于隐私考虑）
@@ -113,13 +114,15 @@ Web 最常用的图像格式是：
 
   - : 图像的固有高度，以像素为单位。必须是没有单位的整数值。
 
-    > **备注：** 同时包括 `height` 和 [`width`](#attr-width) 使浏览器在加载图像之前计算图像的长宽比。此长宽比用于保留显示图像所需的空间，减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。减少布局偏移是良好用户体验和 Web 性能的主要组成部分。
+    > [!NOTE]
+    > 同时包括 `height` 和 [`width`](#attr-width) 使浏览器在加载图像之前计算图像的长宽比。此长宽比用于保留显示图像所需的空间，减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。减少布局偏移是良好用户体验和 Web 性能的主要组成部分。
 
 - `ismap`
 
   - : 这个布尔属性表示图像是否是[服务器端图像映射](https://en.wikipedia.org/wiki/Image_map#Server-side)的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。
 
-    > **备注：** 只有在 `<img>` 元素是一个拥有有效 [`href`](/zh-CN/docs/Web/HTML/Element/a#href) 属性的 {{htmlelement("a")}} 元素的后代元素的情况下，这个属性才会被允许使用。
+    > [!NOTE]
+    > 只有在 `<img>` 元素是一个拥有有效 [`href`](/zh-CN/docs/Web/HTML/Element/a#href) 属性的 {{htmlelement("a")}} 元素的后代元素的情况下，这个属性才会被允许使用。
 
 - `loading`
 
@@ -130,7 +133,8 @@ Web 最常用的图像格式是：
     - `lazy`
       - : 延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。
 
-    > **备注：** 仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施，因为，如果用户代理在禁用脚本的情况下支持延迟加载，网站可以在会话中策略性地放置图像，通过服务器跟踪请求了多少图像以及请求在何时发起，来跟踪用户在整个会话期间的大致滚动位置。
+    > [!NOTE]
+    > 仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施，因为，如果用户代理在禁用脚本的情况下支持延迟加载，网站可以在会话中策略性地放置图像，通过服务器跟踪请求了多少图像以及请求在何时发起，来跟踪用户在整个会话期间的大致滚动位置。
 
 - `referrerpolicy`
 
@@ -180,7 +184,8 @@ Web 最常用的图像格式是：
 
   - : 与元素相关联的[图像映射（image map）](/zh-CN/docs/HTML/Element/map)的部分 URL（以 `#` 开始的部分）。
 
-    > **备注：** 如果 `<img>` 元素是 {{htmlelement("a")}} 或 {{HTMLElement("button")}} 元素的后代元素则不能使用这个属性。
+    > [!NOTE]
+    > 如果 `<img>` 元素是 {{htmlelement("a")}} 或 {{HTMLElement("button")}} 元素的后代元素则不能使用这个属性。
 
 ### 已废弃的属性
 
@@ -207,7 +212,8 @@ Web 最常用的图像格式是：
 
   - : 一个指向更详细的图像描述的链接。可能的值是一个 {{glossary("URL")}} 或一个页面上其他元素的 [`id`](/zh-CN/docs/Web/HTML/Global_attributes#id)。
 
-    > **备注：** 此属性在当前最新的 {{glossary("W3C")}} 版本——[HTML 5.2](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc) 中被提到，但在 {{glossary("WHATWG")}} 组织的 [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) 中依然处于被移除的状态。它的未来尚无定数；开发者应使用 {{glossary("WAI")}}-{{glossary("ARIA")}} 这一代替方法，例如：[`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) 或 [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details)。
+    > [!NOTE]
+    > 此属性在当前最新的 {{glossary("W3C")}} 版本——[HTML 5.2](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc) 中被提到，但在 {{glossary("WHATWG")}} 组织的 [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) 中依然处于被移除的状态。它的未来尚无定数；开发者应使用 {{glossary("WAI")}}-{{glossary("ARIA")}} 这一代替方法，例如：[`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) 或 [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details)。
 
 - `name` {{Deprecated_Inline}}
   - : 元素的名字。使用 [`id`](/zh-CN/docs/Web/HTML/Global_attributes#id) 属性代替此废弃属性。
@@ -272,7 +278,8 @@ Web 最常用的图像格式是：
 
 {{EmbedLiveSample("使用 srcset 和 sizes 属性", "100%", 350)}}
 
-> **备注：** 若要看到大小调整的效果，请{{LiveSampleLink('使用 srcset 和 sizes 属性', '打开单独的页面查看示例')}}，以便拖动窗口，调整内容区域的大小。
+> [!NOTE]
+> 若要看到大小调整的效果，请{{LiveSampleLink('使用 srcset 和 sizes 属性', '打开单独的页面查看示例')}}，以便拖动窗口，调整内容区域的大小。
 
 ## 安全与隐私方面的考量
 
diff --git a/files/zh-cn/web/html/element/index.md b/files/zh-cn/web/html/element/index.md
index e605761ce74c10..f075b84c2838e2 100644
--- a/files/zh-cn/web/html/element/index.md
+++ b/files/zh-cn/web/html/element/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element
 
 它们已被按照功能进行分组，以便更轻松地找到你想要的内容。同时，侧边栏中也按照字母排序列出了所有元素。
 
-> **备注：** 若想获知更多关于 HTML 元素、属性的基本信息，请查阅 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)中的相关内容。
+> [!NOTE]
+> 若想获知更多关于 HTML 元素、属性的基本信息，请查阅 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)中的相关内容。
 
 ## 主根元素
 
@@ -222,7 +223,8 @@ Web 组件是一种与 HTML 相关联的技术，简单来说，它允许开发
 
 ## 过时的和弃用的元素
 
-> **警告：** 下面这些旧的 HTML 元素已被弃用，且不应再被使用。**千万不要在新的项目中使用它们，并且要尽快替换旧项目中的残余**。在此列出，仅供参考。
+> [!WARNING]
+> 下面这些旧的 HTML 元素已被弃用，且不应再被使用。**千万不要在新的项目中使用它们，并且要尽快替换旧项目中的残余**。在此列出，仅供参考。
 
 | 元素                         | 描述                                                                                                                                                                                                                                                                              |
 | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/zh-cn/web/html/element/input/button/index.md b/files/zh-cn/web/html/element/input/button/index.md
index 24b28cfe50f4f0..68b42294e84f8b 100644
--- a/files/zh-cn/web/html/element/input/button/index.md
+++ b/files/zh-cn/web/html/element/input/button/index.md
@@ -99,7 +99,8 @@ function updateButton() {
 }
 ```
 
-> **备注：** 当然，上述例子的问题是，用户将不知道访问键是什么！在一个真实的网站中，你必须以一种不影响网站设计的方式来提供这些信息（例如，提供一个容易访问的链接，指向关于网站访问键是什么的信息）。
+> [!NOTE]
+> 当然，上述例子的问题是，用户将不知道访问键是什么！在一个真实的网站中，你必须以一种不影响网站设计的方式来提供这些信息（例如，提供一个容易访问的链接，指向关于网站访问键是什么的信息）。
 
 ### 禁用和启用按钮
 
@@ -165,7 +166,8 @@ function disableButton() {
 
 {{EmbedLiveSample("继承禁用状态", 650, 100)}}
 
-> **备注：** Firefox 不像其他浏览器那样，它会在不同页面之间保持 {{HTMLElement("button")}} 的[动态禁用的状态](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。请使用 [`autocomplete`](/zh-CN/docs/Web/HTML/Element/button#autocomplete) 属性来控制这个特性。
+> [!NOTE]
+> Firefox 不像其他浏览器那样，它会在不同页面之间保持 {{HTMLElement("button")}} 的[动态禁用的状态](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。请使用 [`autocomplete`](/zh-CN/docs/Web/HTML/Element/button#autocomplete) 属性来控制这个特性。
 
 ## 验证
 
diff --git a/files/zh-cn/web/html/element/input/checkbox/index.md b/files/zh-cn/web/html/element/input/checkbox/index.md
index 0f3b3807e4174b..a8c957adf2f2f4 100644
--- a/files/zh-cn/web/html/element/input/checkbox/index.md
+++ b/files/zh-cn/web/html/element/input/checkbox/index.md
@@ -73,7 +73,8 @@ slug: Web/HTML/Element/input/checkbox
 
 如果复选框的 `value` 属性被省略了，则它默认具有值 `on`，在这种情况下提交的数据将是 `subscribe=on`。
 
-> **备注：** 如果一个复选框在其表单被提交时没有被选中，就不会有任何代表其未被选中的状态（例如 `value=unchecked`）的值被提交给服务器——该值根本就没有被提交给服务器！如果你想在复选框未被选中时提交一个默认值，你可以在表单中加入一个具有相同的 `name` 和 `value` 的 {{HTMLElement("input/hidden", '&lt;input type="hidden"&gt;')}} 字段，它可以由 JavaScript 生成。
+> [!NOTE]
+> 如果一个复选框在其表单被提交时没有被选中，就不会有任何代表其未被选中的状态（例如 `value=unchecked`）的值被提交给服务器——该值根本就没有被提交给服务器！如果你想在复选框未被选中时提交一个默认值，你可以在表单中加入一个具有相同的 `name` 和 `value` 的 {{HTMLElement("input/hidden", '&lt;input type="hidden"&gt;')}} 字段，它可以由 JavaScript 生成。
 
 ## 其他属性
 
@@ -197,7 +198,8 @@ function updateDisplay() {
 
 {{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}
 
-> **备注：** 如果你提交一个带有不确定复选框的表单，发生的情况与复选框不被选中的情况相同——没有代表复选框的数据提交给服务器。
+> [!NOTE]
+> 如果你提交一个带有不确定复选框的表单，发生的情况与复选框不被选中的情况相同——没有代表复选框的数据提交给服务器。
 
 ## 验证方式
 
diff --git a/files/zh-cn/web/html/element/input/color/index.md b/files/zh-cn/web/html/element/input/color/index.md
index 0e7fd6f287ec2a..85f16d3ab4e9a7 100644
--- a/files/zh-cn/web/html/element/input/color/index.md
+++ b/files/zh-cn/web/html/element/input/color/index.md
@@ -56,7 +56,8 @@ slug: Web/HTML/Element/input/color
 
 `color` 类型的 {{HTMLElement("input")}} 元素的 [`value`](/zh-CN/docs/Web/HTML/Element/input#value) 总是包含一个 7 个字符的字符串，它以 16 进制格式指定 RGB 颜色。虽然你可以用大写字母或小写字母输入颜色，但它将以小写字母形式存储。该值从不以任何其他形式出现，也从不为空。
 
-> **备注：** 将该值设置为任何不是有效的、完全不透明的、RGB 颜色的*十六进制表示*，都将导致该值被设置为 `#000000`。特别是，你不能使用 CSS 的标准化颜色名称或任何 CSS 函数语法来设置该值（记住，HTML 和 CSS 是独立的语言和规范）。此外，不支持带有透明通道的颜色；用 9 个字符的十六进制表示（例如 `#009900aa`）指定颜色，也会导致颜色被设置为 `#000000`。
+> [!NOTE]
+> 将该值设置为任何不是有效的、完全不透明的、RGB 颜色的*十六进制表示*，都将导致该值被设置为 `#000000`。特别是，你不能使用 CSS 的标准化颜色名称或任何 CSS 函数语法来设置该值（记住，HTML 和 CSS 是独立的语言和规范）。此外，不支持带有透明通道的颜色；用 9 个字符的十六进制表示（例如 `#009900aa`）指定颜色，也会导致颜色被设置为 `#000000`。
 
 ## 使用 color 输入
 
diff --git a/files/zh-cn/web/html/element/input/date/index.md b/files/zh-cn/web/html/element/input/date/index.md
index 2c5d1a5ef7de5b..16203184d737fc 100644
--- a/files/zh-cn/web/html/element/input/date/index.md
+++ b/files/zh-cn/web/html/element/input/date/index.md
@@ -52,7 +52,8 @@ slug: Web/HTML/Element/input/date
 
 {{ EmbedLiveSample('值', 600, 40) }}
 
-> **备注：** 有一点需要注意的是，在格式方面显示的日期与实际的 `value` 不一样——显示的日期格式*取决于用户浏览器的区域设定*，而经解析的 `value` 的格式始终为 `yyyy-mm-dd`。
+> [!NOTE]
+> 有一点需要注意的是，在格式方面显示的日期与实际的 `value` 不一样——显示的日期格式*取决于用户浏览器的区域设定*，而经解析的 `value` 的格式始终为 `yyyy-mm-dd`。
 
 当然你也可以通过 JavaScript 代码获取和设置 {{domxref("HTMLInputElement")}} 的 `value` 和 `valueAsNumber` 属性，例如：
 
@@ -87,11 +88,13 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti
 
 字符串值 `any` 意味着不使用步进值，任意值都可以接受（除其他制约因素如 [`min`](#min) 或 [`max`](#max) 之外）。
 
-> **备注：** 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
+> [!NOTE]
+> 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
 
 对于 `date` 输入，`step` 的值以天为单位，并被视为等于 86,400,000 乘以 `step` 值的毫秒数（基础数值是毫秒）。`step` 的默认值为 1，表示 1 天。
 
-> **备注：** 将 `date` 输入的 `step` 值指定为 `any` 与指定为 `1` 的效果相同。
+> [!NOTE]
+> 将 `date` 输入的 `step` 值指定为 `any` 与指定为 `1` 的效果相同。
 
 ## 使用日期输入控件
 
@@ -135,7 +138,8 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti
 
 在结果中我们可以看到，只有 2017 年 4 月份的日期可选——输入框中可以编辑的部分只有“日”这部分，并且超出 4 月份以外的日期不能通过日期控件的选择组件选择。
 
-> **备注：** 你*应该*可以使用 [`step`](/zh-CN/docs/Web/HTML/Element/input#step) 属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在撰写这篇文章的时候，还没有可靠的实现。
+> [!NOTE]
+> 你*应该*可以使用 [`step`](/zh-CN/docs/Web/HTML/Element/input#step) 属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在撰写这篇文章的时候，还没有可靠的实现。
 
 ### 控制输入框大小
 
@@ -195,7 +199,8 @@ input:valid + span::after {
 }
 ```
 
-> **警告：** 客户端表单验证*不能替代*服务端验证。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。
+> [!WARNING]
+> 客户端表单验证*不能替代*服务端验证。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。
 
 ## 处理浏览器支持问题
 
@@ -448,7 +453,8 @@ daySelect.onchange = () => {
 };
 ```
 
-> **备注：** 请记住有些年份有 53 周（见[**每年的周数**](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期)）！当你在开发产品应用时应当考虑这个问题。
+> [!NOTE]
+> 请记住有些年份有 53 周（见[**每年的周数**](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期)）！当你在开发产品应用时应当考虑这个问题。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/element/input/datetime-local/index.md b/files/zh-cn/web/html/element/input/datetime-local/index.md
index 02550e1f05f150..645c969e201887 100644
--- a/files/zh-cn/web/html/element/input/datetime-local/index.md
+++ b/files/zh-cn/web/html/element/input/datetime-local/index.md
@@ -77,7 +77,8 @@ slug: Web/HTML/Element/input/datetime-local
 
 需要注意的是：显示的日期和时间的格式与实际 `value` 中的格式不同，显示的日期和时间格式以用户操作系统所的区域设置信息为准，而控件的日期/时间值 `value` 总是 `yyyy-MM-ddThh:mm` 格式。例如，当上例中的值被提供到服务器之后，将会像这样 `partydate=2017-06-01T08:30`。
 
-> **备注：** 另外请注意，如果这样的数据以 HTTP [`GET`](/zh-CN/docs/Web/HTTP/Methods/GET) 提交，时间部分的冒号需要编码之后才能放在 URL 参数中，例如 `partydate=2017-06-01T08%3A30`。编码方法请参见 {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}。
+> [!NOTE]
+> 另外请注意，如果这样的数据以 HTTP [`GET`](/zh-CN/docs/Web/HTTP/Methods/GET) 提交，时间部分的冒号需要编码之后才能放在 URL 参数中，例如 `partydate=2017-06-01T08%3A30`。编码方法请参见 {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}。
 
 你也可以在 JavaScript 中使用 {{domxref("HTMLInputElement")}} 的 `value` 属性来获取和设置日期的值，例如：
 
@@ -110,7 +111,8 @@ JavaScript 的 {{jsxref("Date")}} 提供了几种用于将数值类型的日期
 
 字符串值 `any` 表示没有步长约束，任何的值均可使用（除了其他的约束，如：[`min`](#min) 和 [`max`](#max)）。
 
-> **备注：** 当用户输入的数据不符合配置的步长限制时，{{Glossary("user agent", "用户代理")}}可能会将其四舍五入到最近的有效值，当有两个差值相等的选项时，优先选择大于当前值的数值。
+> [!NOTE]
+> 当用户输入的数据不符合配置的步长限制时，{{Glossary("user agent", "用户代理")}}可能会将其四舍五入到最近的有效值，当有两个差值相等的选项时，优先选择大于当前值的数值。
 
 对于 `datetime-local` 输入控件，`step` 值的单位是秒，最小分度为 1/1000（因为底层的数值以毫秒为单位）。默认的 `step` 值为 60，表示 60 秒（或一分钟、60000 毫秒）。
 
@@ -158,7 +160,8 @@ Date/time 输入控件乍看非常实用；它们提供了方便的用户接口
 - 只有“2017 年 6 月”可供选择——只有“日期”部分的值可修改，并且 6 月以外的日期不能被选到日期控件内。
 - 视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见[校验](#校验)）但仍可选（如 Chrome）
 
-> **备注：** 你可以使用 [`step`](/zh-CN/docs/Web/HTML/Element/input#step) 属性设置不同值来控制日期每次增减的天数（例如，或许你希望只有星期六可选）。但是，截止到本文档编写之时，好像还没有浏览器实现此功能。
+> [!NOTE]
+> 你可以使用 [`step`](/zh-CN/docs/Web/HTML/Element/input#step) 属性设置不同值来控制日期每次增减的天数（例如，或许你希望只有星期六可选）。但是，截止到本文档编写之时，好像还没有浏览器实现此功能。
 
 ### 控制输入框大小
 
@@ -247,7 +250,8 @@ input:valid + span:after {
 }
 ```
 
-> **警告：** HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候（或是数据太大，或是格式错误，等等）。
+> [!WARNING]
+> HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候（或是数据太大，或是格式错误，等等）。
 
 ## 处理浏览器支持
 
@@ -597,7 +601,8 @@ daySelect.onchange = () => {
 };
 ```
 
-> **备注：** 请记住某些年份有 53 个星期（见[**每年的周数**](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期)）！当你在开发产品应用时应当考虑这个问题。
+> [!NOTE]
+> 请记住某些年份有 53 个星期（见[**每年的周数**](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期)）！当你在开发产品应用时应当考虑这个问题。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/element/input/email/index.md b/files/zh-cn/web/html/element/input/email/index.md
index 49cf85cd1579c9..4522fa57c60b27 100644
--- a/files/zh-cn/web/html/element/input/email/index.md
+++ b/files/zh-cn/web/html/element/input/email/index.md
@@ -45,7 +45,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 一个布尔属性，如果存在，代表用户可以输入多个由逗号和可选空白字符分开的电子邮件地址。参见示例[允许多个邮件地址](#允许多个邮件地址)，或 [HTML 属性：multiple](/zh-CN/docs/Web/HTML/Attributes/multiple) 一文以获取更多信息。
 
-> **备注：** 一般地，如果你指定了 [`required`](/zh-CN/docs/Web/HTML/Element/input#required) 属性，那么用户将必须输入一个合法的邮件地址。然而，如果你添加了 `multiple` 属性，一系列零地址（一个空字符串，或完全为空白字符的字符串）也是合法的。也就是说，当指定了 `multiple` 时，用户甚至不需要输入一个邮件地址，无论是否指定了 `required`。
+> [!NOTE]
+> 一般地，如果你指定了 [`required`](/zh-CN/docs/Web/HTML/Element/input#required) 属性，那么用户将必须输入一个合法的邮件地址。然而，如果你添加了 `multiple` 属性，一系列零地址（一个空字符串，或完全为空白字符的字符串）也是合法的。也就是说，当指定了 `multiple` 时，用户甚至不需要输入一个邮件地址，无论是否指定了 `required`。
 
 ### pattern
 
@@ -53,7 +54,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 如果没有指定模式，或指定了无效的模式，则不会应用任何正则表达式，且该属性将被完全忽略。
 
-> **备注：** 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性来指定大多数浏览器将作为工具提示的文本，以解释匹配该模式的要求是什么。还应该在附近包括其他解释性的文本。
+> [!NOTE]
+> 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性来指定大多数浏览器将作为工具提示的文本，以解释匹配该模式的要求是什么。还应该在附近包括其他解释性的文本。
 
 参阅[模式验证](#模式验证)一节以获取详细说明和示例。
 
@@ -63,13 +65,15 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 如果控件的内容具有方向（{{Glossary("LTR")}} 或 {{Glossary("RTL")}}），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法来格式化字符，从而覆盖原有占位符的方向；请参见[如何针对双向文本使用 Unicode 控制符](https://www.w3.org/International/questions/qa-bidi-unicode-controls)获取更多信息。
 
-> **备注：** 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
+> [!NOTE]
+> 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
 
 ### readonly
 
 一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement")}} 的 `value` 属性来更改。
 
-> **备注：** 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
+> [!NOTE]
+> 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
 
 ### size
 
@@ -83,7 +87,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 然而，重要的是要注意，这不足以确保指定的文本是实际存在的电子邮件地址，对应于站点的用户，或者以任何其他方式可接受。它只是确保将字段的值正确格式化为电子邮件地址。
 
-> **备注：** 记住用户可以在幕后修改 HTML 也很重要，因此你的站点*不得*出于任何安全目的使用此验证。在任何事务中，如果所提供的文本可能有任何形式的安全影响，你必须在服务器端验证该电子邮件地址。
+> [!NOTE]
+> 记住用户可以在幕后修改 HTML 也很重要，因此你的站点*不得*出于任何安全目的使用此验证。在任何事务中，如果所提供的文本可能有任何形式的安全影响，你必须在服务器端验证该电子邮件地址。
 
 ### 一个简单的 email 输入
 
@@ -109,7 +114,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 现在，当输入一个电子邮件地址时，或当任何数量的电子邮件地址由逗号分隔，并可选地含有空白字符时，输入被认为是有效的。
 
-> **备注：** 当使用了 `multiple` 属性时，值*允许*为空。
+> [!NOTE]
+> 当使用了 `multiple` 属性时，值*允许*为空。
 
 当指定了 `multiple` 属性时，一些有效字符串示例如下：
 
@@ -200,7 +206,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 `email` 输入有两个级别的内容验证。首先，所有 {{HTMLElement("input")}} 都有标准的验证级别，它自动确保内容符合有效电子邮件地址的要求。但也可以选择添加额外的过滤功能，以确保满足你自己的特殊需求。
 
-> **警告：** HTML 表单验证*不能*替代确保输入的数据格式正确的脚本。对于某些人来说，调整 HTML 非常容易，因为它允许他们绕过验证，或者完全删除它。某人也可以完全绕过 HTML 并将数据直接提交给你的服务器。如果服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。
+> [!WARNING]
+> HTML 表单验证*不能*替代确保输入的数据格式正确的脚本。对于某些人来说，调整 HTML 非常容易，因为它允许他们绕过验证，或者完全删除它。某人也可以完全绕过 HTML 并将数据直接提交给你的服务器。如果服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。
 
 ### 基本验证
 
@@ -212,7 +219,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 要了解更多关于表单验证的工作原理，以及如何利用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 这两个 CSS 属性，根据当前值是否有效来设计输入的样式，请参阅[表单数据验证](/zh-CN/docs/Learn/HTML/Forms/Form_validation)一文。
 
-> **备注：** 有一些已知的规范问题与国际域名和 HTML 中电子邮件地址的验证有关。参阅 [W3C bug 15489](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489) 以了解详细内容。
+> [!NOTE]
+> 有一些已知的规范问题与国际域名和 HTML 中电子邮件地址的验证有关。参阅 [W3C bug 15489](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489) 以了解详细内容。
 
 ### 模式验证
 
@@ -270,7 +278,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 ![A valid email address, but the input is in error state with a popout from the input reading 'The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address.'](email-pattern-match-bad.png)
 
-> **备注：** 如果你在编写验证正则表达式时遇到麻烦，它们不能正常工作，请检查你的浏览器控制台；那里可能有有用的错误信息来帮助你解决问题。
+> [!NOTE]
+> 如果你在编写验证正则表达式时遇到麻烦，它们不能正常工作，请检查你的浏览器控制台；那里可能有有用的错误信息来帮助你解决问题。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/input/file/index.md b/files/zh-cn/web/html/element/input/file/index.md
index 935b1a014f6134..957cd2b9df46ac 100644
--- a/files/zh-cn/web/html/element/input/file/index.md
+++ b/files/zh-cn/web/html/element/input/file/index.md
@@ -52,7 +52,8 @@ slug: Web/HTML/Element/input/file
 
 文件 input 的 [`value`](/zh-CN/docs/Web/HTML/Element/input#value) 属性包含了一个字符串，表示已选择文件的路径。如果用户没有选择任何文件，则该值为空字符串（`""`）。如果用户选择了多个文件，则 `value` 表示他们选择的文件列表中的第一个文件。可以使用 [input 的 `HTMLInputElement.files` 属性](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications#获取被选择文件的信息)标识其他文件。
 
-> **备注：** 为了阻止恶意软件猜测文件路径，该值的字符串表示[总是以 `C:\fakepath\` 为前缀的文件名](https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly)，而并不是文件的真实路径。
+> [!NOTE]
+> 为了阻止恶意软件猜测文件路径，该值的字符串表示[总是以 `C:\fakepath\` 为前缀的文件名](https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly)，而并不是文件的真实路径。
 
 ## 附加属性
 
@@ -133,7 +134,8 @@ div {
 
 {{EmbedLiveSample('基本示例', 650, 90)}}
 
-> **备注：** 你也可以在 GitHub 中找到这个示例——详见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)和[在线运行实例](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)。
+> [!NOTE]
+> 你也可以在 GitHub 中找到这个示例——详见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)和[在线运行实例](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)。
 
 无论用户的设备或操作系统是什么，文件输入都提供一个按钮，打开一个允许用户选择文件的文件选择对话框。
 
@@ -158,7 +160,8 @@ div {
 - `webkitRelativePath` {{non-standard_inline}}
   - : 一个字符串，指定了相对于在目录选择器中选择的基本目录的文件路径（即，一个设置了 [`webkitdirectory`](/zh-CN/docs/Web/HTML/Element/input/file#webkitdirectory) 属性的 `file` 选择器）。_这是非标准的，应该谨慎使用。_
 
-> **备注：** 你可以在所有现代浏览器中读写 `HTMLInputElement.files` 的值；该特性已经添加到了 Firefox 57 中（见 [Firefox bug 1384030](https://bugzil.la/1384030)）。
+> [!NOTE]
+> 你可以在所有现代浏览器中读写 `HTMLInputElement.files` 的值；该特性已经添加到了 Firefox 57 中（见 [Firefox bug 1384030](https://bugzil.la/1384030)）。
 
 ### 限制可接受的文件类型
 
@@ -199,7 +202,8 @@ div {
 
 {{EmbedLiveSample('限制可接受的文件类型', 650, 90)}}
 
-> **备注：** 你也可以在 GitHub 中找到这个示例——详见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-with-accept.html)和[在线运行实例](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html)。
+> [!NOTE]
+> 你也可以在 GitHub 中找到这个示例——详见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-with-accept.html)和[在线运行实例](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html)。
 
 这可能看起来很相似，但是如果你尝试用该输入选择一个文件，你将看到文件选择器只允许你选择 `accept` 值指定的文件类型（实际接口会按不同的浏览器和操作系统有所不同）。
 
@@ -222,7 +226,8 @@ div {
 
 在本例中，我们将展示一个稍微高级一点的文件选择器，它利用了在 `HTMLInputElement.files` 属性中可用的文件信息，并且展示了一些聪明的技巧。
 
-> **备注：** 你可以在 GitHub 中查看本示例的完整源代码——[file-example.html](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-example.html)（[参见在线的运行实例](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)）。我们不会解释 CSS；JavaScript 是主要的关注点。
+> [!NOTE]
+> 你可以在 GitHub 中查看本示例的完整源代码——[file-example.html](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-example.html)（[参见在线的运行实例](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)）。我们不会解释 CSS；JavaScript 是主要的关注点。
 
 首先，让我们看看 HTML：
 
@@ -319,7 +324,8 @@ const preview = document.querySelector(".preview");
 input.style.opacity = 0;
 ```
 
-> **备注：** 使用 {{cssxref("opacity")}} 来隐藏文件输入，而不是使用 {{cssxref("visibility", "visibility: hidden")}} 或者 {{cssxref("display", "display: none")}}，因为辅助技术将后两种样式解释为文件 input 是不可交互的。
+> [!NOTE]
+> 使用 {{cssxref("opacity")}} 来隐藏文件输入，而不是使用 {{cssxref("visibility", "visibility: hidden")}} 或者 {{cssxref("display", "display: none")}}，因为辅助技术将后两种样式解释为文件 input 是不可交互的。
 
 接下来，我们将[事件监听器](/zh-CN/docs/Web/API/EventTarget/addEventListener)添加到 input 中，以监听选择的值的更改（在本例中，当选择文件时）。事件监听器调用我们定制的 `updateImageDisplay()` 函数。
 
diff --git a/files/zh-cn/web/html/element/input/hidden/index.md b/files/zh-cn/web/html/element/input/hidden/index.md
index f72b8e8f5b9669..858d0a74d6a513 100644
--- a/files/zh-cn/web/html/element/input/hidden/index.md
+++ b/files/zh-cn/web/html/element/input/hidden/index.md
@@ -42,7 +42,8 @@ slug: Web/HTML/Element/input/hidden
 
 {{HTMLElement("input")}} 元素的 [`value`](/zh-CN/docs/Web/HTML/Element/input#value) 属性包含要提交到服务器的隐藏数据。尽管可以通过浏览器开发者工具编辑该值，但明确要求用户不能通过用户界面看到或编辑这个值。
 
-> **警告：** 尽管该值并未作为页面内容中显示给用户，但仍然可以使用任何浏览器的开发者工具或“查看源代码”功能来查看并进行编辑。请不要将表单的安全性依赖于使用 `hidden` 输入上。
+> [!WARNING]
+> 尽管该值并未作为页面内容中显示给用户，但仍然可以使用任何浏览器的开发者工具或“查看源代码”功能来查看并进行编辑。请不要将表单的安全性依赖于使用 `hidden` 输入上。
 
 ## 额外属性
 
@@ -74,7 +75,8 @@ slug: Web/HTML/Element/input/hidden
 
 这将阻止恶意用户创建伪造的表单，伪装成银行，然后通过电子邮件将表单发送给毫无戒备心的用户，以诱骗他们将钱转入错误的位置。这种攻击称为[跨站点请求伪造（CSRF）](/zh-CN/docs/Learn/Server-side/First_steps/Website_security#跨站请求伪造_csrf)；几乎任何知名的服务器端框架都使用隐藏机密来防止此类攻击。
 
-> **备注：** 如前所述，将密钥放置在隐藏的输入中并不能使其固有安全性。密钥的组成和编码已经可以做到这一点。隐藏输入的值是保持它与数据关联性，并在将表单发送到服务器时自动将其包含在内。你需要使用精心设计的密钥来真正保护你的网站。
+> [!NOTE]
+> 如前所述，将密钥放置在隐藏的输入中并不能使其固有安全性。密钥的组成和编码已经可以做到这一点。隐藏输入的值是保持它与数据关联性，并在将表单发送到服务器时自动将其包含在内。你需要使用精心设计的密钥来真正保护你的网站。
 
 ## 验证
 
@@ -147,7 +149,8 @@ textarea {
 
 {{ EmbedLiveSample('示例', '100%', 200) }}
 
-> **备注：** 你还可以在 GitHub 上找到示例（请参见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/hidden-input-example/index.html)，并可以[实时运行](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)）。
+> [!NOTE]
+> 你还可以在 GitHub 上找到示例（请参见[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/hidden-input-example/index.html)，并可以[实时运行](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)）。
 
 提交后，发送到服务器的表单数据将如下所示：
 
diff --git a/files/zh-cn/web/html/element/input/image/index.md b/files/zh-cn/web/html/element/input/image/index.md
index e211ff2224738b..b040adb2dbe615 100644
--- a/files/zh-cn/web/html/element/input/image/index.md
+++ b/files/zh-cn/web/html/element/input/image/index.md
@@ -23,7 +23,8 @@ slug: Web/HTML/Element/input/image
 
 例如，如果你有一个按钮，显示一个带有图标和/或图像文本“现在登录”的图片，你也应该设置 `alt` 属性为类似于 `现在登录` 的东西。
 
-> **备注：** 虽然 `alt` 属性在技术上是可选的，但是你总应该包含它，以最大限度地提高你的内容的可用性。在功能上，`<input type="image">` 元素的 `alt` 属性与 {{HTMLElement("img")}} 元素的 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 属性相类似。
+> [!NOTE]
+> 虽然 `alt` 属性在技术上是可选的，但是你总应该包含它，以最大限度地提高你的内容的可用性。在功能上，`<input type="image">` 元素的 `alt` 属性与 {{HTMLElement("img")}} 元素的 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 属性相类似。
 
 ### formaction
 
diff --git a/files/zh-cn/web/html/element/input/index.md b/files/zh-cn/web/html/element/input/index.md
index 8ba2c1528f9b37..80973a1a24064e 100644
--- a/files/zh-cn/web/html/element/input/index.md
+++ b/files/zh-cn/web/html/element/input/index.md
@@ -319,13 +319,15 @@ slug: Web/HTML/Element/input
 
   - : 一个布尔属性，如果存在，表示当页面加载完毕（或包含该元素的 `<dialog>` 显示完毕）时，该 input 元素应该自动拥有焦点。
 
-    > **备注：** 具有 `autofocus` 属性的元素可能在 {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} 事件触发前获得焦点。
+    > [!NOTE]
+    > 具有 `autofocus` 属性的元素可能在 {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} 事件触发前获得焦点。
 
     文档中只有一个表单元素可以具有 `autofocus` 属性。如果放置了多于一个元素，会聚焦第一个具有该属性的元素。
 
     `autofocus` 不能应用于类型为 `hidden` 的输入控件上，因为隐藏的控件不可聚焦。
 
-    > **警告：** 自动聚焦表单控件会使使用读屏技术的视力障碍者和有认知障碍的人感到困惑。当指定了 `autofocus` 时，读屏器会将用户“传送”到表单控件上，而不会事先警告他们。
+    > [!WARNING]
+    > 自动聚焦表单控件会使使用读屏技术的视力障碍者和有认知障碍的人感到困惑。当指定了 `autofocus` 时，读屏器会将用户“传送”到表单控件上，而不会事先警告他们。
 
     在应用 `autofocus` 属性时，要仔细考虑无障碍问题。自动聚焦于一个控件会导致页面在加载时滚动。焦点也会导致动态键盘在某些触摸设备上显示。虽然屏幕阅读器会宣布收到焦点的表单控件的标签，但屏幕阅读器不会宣布标签之前的任何内容，在小设备上的视力良好的用户同样会错过前面的内容所创造的背景。
 
@@ -337,7 +339,8 @@ slug: Web/HTML/Element/input
 
   - : 布尔属性，对于 `radio` 和 `checkbox` 类型有效。如果在 `radio` 类型上出现，代表该单选按钮是当前同名称组中所选定的那一个。如果在 `checkbox` 类型上出现，代表页面加载时，默认选择该复选框，这并*不*代表复选框当前是否选择：如果复选框状态改变，该内容属性不会反馈这种改变，只会更新 [`HTMLInputElement` 的 `checked` IDL 属性](/zh-CN/docs/Web/API/HTMLInputElement)。
 
-    > **备注：** 与其他输入控件不同，复选框和单选按钮的值只会在 `checked` 状态时才会包括在提交的数据中。如果当前是 `checked` 状态，复选框的名称和值就会被提交。
+    > [!NOTE]
+    > 与其他输入控件不同，复选框和单选按钮的值只会在 `checked` 状态时才会包括在提交的数据中。如果当前是 `checked` 状态，复选框的名称和值就会被提交。
     >
     > 例如，`name` 为 `fruit` 的复选框含有 `value` 为 `cherry` 的一项，且该复选框为选中状态，提交的表单数据将包含 `fruit=cherry`；如果复选框为非活动状态，它不会列入到表单数据中。复选框和单选按钮的默认 `value` 值为 `on`。
 
@@ -364,7 +367,8 @@ slug: Web/HTML/Element/input
 
     具体来说，禁用的输入不会接收 {{domxref("Element/click_event", "click")}} 事件，而且禁用的输入不会随表单提交。
 
-    > **备注：** 虽然规范中没有要求，但 Firefox 默认会在不同的页面加载中[保持 `<input>` 的动态禁用状态](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。使用 [`autocomplete`](#autocomplete) 属性来控制这个特性。
+    > [!NOTE]
+    > 虽然规范中没有要求，但 Firefox 默认会在不同的页面加载中[保持 `<input>` 的动态禁用状态](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。使用 [`autocomplete`](#autocomplete) 属性来控制这个特性。
 
 - `form`
 
@@ -372,7 +376,8 @@ slug: Web/HTML/Element/input
 
     `form` 属性可以让你在文档的任何地方放置一个输入控件，但在文档的其他地方包含一个表单。
 
-    > **备注：** 一个输入只能与一个表单相关。
+    > [!NOTE]
+    > 一个输入只能与一个表单相关。
 
 - `formaction`
   - : 仅对 `image` 和 `submit` 输入类型有效。参见 {{HTMLElement("input/submit", "submit")}} 输入类型介绍以获得更多信息。
@@ -461,7 +466,8 @@ slug: Web/HTML/Element/input
 
     此段代码运行后，`guestName` 将成为 `guest` 字段的 {{domxref("HTMLInputElement")}}，`hatSize` 将成为 `hat-size` 字段的 {{domxref("HTMLInputElement")}}。
 
-    > **警告：** 避免给表单元素一个与表单内置属性相对应的 `name`，因为这样你就会用这个对相应输入的引用来覆盖预定义的属性或方法。
+    > [!WARNING]
+    > 避免给表单元素一个与表单内置属性相对应的 `name`，因为这样你就会用这个对相应输入的引用来覆盖预定义的属性或方法。
 
 - `pattern`
 
@@ -469,7 +475,8 @@ slug: Web/HTML/Element/input
 
     如果 `pattern` 属性存在，但是未指定模式或无效，则不应用任何正则表达式，并且将完全忽略此属性。如果模式属性是有效的，并且该非空值与模式不匹配，约束验证将阻止表单提交。
 
-    > **备注：** 如果使用了 `pattern` 属性，要在附近告知用户所期望的输入格式。你可以包含 [`title`](#title) 属性来解释满足模式的需求说明，大多数浏览器将它们显示为工具提示（tooltip）。对于无障碍来说，视觉的解释是必要的，工具提示是一种改进点。
+    > [!NOTE]
+    > 如果使用了 `pattern` 属性，要在附近告知用户所期望的输入格式。你可以包含 [`title`](#title) 属性来解释满足模式的需求说明，大多数浏览器将它们显示为工具提示（tooltip）。对于无障碍来说，视觉的解释是必要的，工具提示是一种改进点。
     > 参见[客户端验证](#客户端验证)一节以了解更多信息。
 
 - `placeholder`
@@ -513,7 +520,8 @@ slug: Web/HTML/Element/input
 
     例如，如果存在这样一个元素 `<input type="number" min="10" step="2">`，那么任何大于等于 `10` 的偶整数都是有效的。如果省略（`<input type="number">`），任何整数都有效，但浮点数（如 `4.2`）无效，因为 `step` 默认为`1`。为了使 `4.2` 有效，`step` 必须被设置为 `any`、0.1、0.2 或任何 `min` 值以 `.2` 结尾的数字，例如 `<input type="number" min="-5.2">`。
 
-    > **备注：** 当用户输入的数据不符合步进配置时，该值在约束验证中被认为是无效的，将匹配 `:invalid` 伪类。
+    > [!NOTE]
+    > 当用户输入的数据不符合步进配置时，该值在约束验证中被认为是无效的，将匹配 `:invalid` 伪类。
     > 参见[客户端验证](#客户端验证)以获取更多信息。
 
 - `tabindex`
@@ -895,11 +903,13 @@ input.custom {
 
 不仅屏幕阅读器无法访问占位符，而且一旦用户在表单控件中输入任何文本，或者如果表单控件已经有一个值，占位符就会消失。具有自动页面翻译功能的浏览器在翻译时可能会跳过属性，这意味着 `placeholder` 可能不会被翻译。
 
-> **备注：** 尽可能不要使用 [`placeholder`](#placeholder) 属性。如果需要标记 `<input>` 元素，请使用 {{HTMLElement("label")}} 元素。
+> [!NOTE]
+> 尽可能不要使用 [`placeholder`](#placeholder) 属性。如果需要标记 `<input>` 元素，请使用 {{HTMLElement("label")}} 元素。
 
 ### 客户端验证
 
-> **警告：** 客户端验证是有用的，但它并*不能*保证服务器会收到有效的数据。如果数据必须是特定的格式，*总是*应该在服务器端进行验证，如果格式无效，则返回一个 [`400` HTTP 响应](/zh-CN/docs/Web/HTTP/Status/400)。
+> [!WARNING]
+> 客户端验证是有用的，但它并*不能*保证服务器会收到有效的数据。如果数据必须是特定的格式，*总是*应该在服务器端进行验证，如果格式无效，则返回一个 [`400` HTTP 响应](/zh-CN/docs/Web/HTTP/Status/400)。
 
 除了如上文 [UI 伪类](#ui_伪类)部分所述，使用 CSS 根据 {{cssxref(":valid")}} 或 {{cssxref(":invalid")}} 每个输入的当前状态来设计输入的样式之外，浏览器还在（试图）提交表单时提供了客户端验证。在表单提交时，如果有一个表单控件没有通过约束验证，支持的浏览器将在第一个无效的表单控件上显示一个错误信息；根据错误类型显示一个默认信息，或者由你设置的信息。
 
@@ -1065,7 +1075,8 @@ nameInput.addEventListener("invalid", () => {
 - 因此，如果在按下提交按钮时，输入值是无效的，将显示其中一个自定义错误信息。
 - 如果它是有效的，它就会像你所期望的那样提交。要做到这一点，必须取消自定义的有效性，通过使用空字符串调用 `setCustomValidity()` 来实现。我们在每次 `input` 事件发生时都要这样做。如果你不这样做，并且之前设置了一个自定义的有效性，那么输入将会认为无效，即使它目前包含一个有效的提交值。
 
-> **备注：** 始终在客户端和服务器端验证输入约束。约束验证并不能消除在*服务器端*进行验证的必要性。无效的值仍然可以由旧的浏览器或坏的行为者发送。
+> [!NOTE]
+> 始终在客户端和服务器端验证输入约束。约束验证并不能消除在*服务器端*进行验证的必要性。无效的值仍然可以由旧的浏览器或坏的行为者发送。
 > **备注：** Firefox 在许多版本中支持一个专有的错误属性——`x-moz-errormessage`，它允许你以类似的方式设置自定义错误信息。从第 66 版开始，这个属性已被移除（见[Firefox bug 1513890](https://bugzil.la/1513890)）。
 
 ### 本地化
diff --git a/files/zh-cn/web/html/element/input/month/index.md b/files/zh-cn/web/html/element/input/month/index.md
index 9e7ddb203fe608..68886527b0bff9 100644
--- a/files/zh-cn/web/html/element/input/month/index.md
+++ b/files/zh-cn/web/html/element/input/month/index.md
@@ -109,7 +109,8 @@ monthControl.value = "2001-06";
 
 一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement.value")}} 属性来更改。
 
-> **备注：** 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
+> [!NOTE]
+> 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
 
 ### step
 
@@ -117,7 +118,8 @@ monthControl.value = "2001-06";
 
 字符串值 `any` 意味着不使用步进值，任意值都可以接受（除其他制约因素如 [`min`](#min) 或 [`max`](#max) 之外）。
 
-> **备注：** 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
+> [!NOTE]
+> 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
 
 对于 `month` 输入，`step` 的值以月份为单位，缩放因子为 1（基础数值也是以月份为单位的）。`step` 的默认值为 1，表示 1 个月。
 
@@ -231,7 +233,8 @@ input:valid + span::after {
 }
 ```
 
-> **警告：** HTML 表单验证并*不能*替代确保输入数据格式正确的脚本。很容易对 HTML 进行调整，使他们能够绕过验证，或完全删除验证。也有可能会完全绕过 HTML 代码，直接将数据提交给你的服务器。如果你的服务器端代码不能验证它所收到的数据，那么当提交的数据格式不当（或数据过大、类型错误等等）时，灾难就会降临。
+> [!WARNING]
+> HTML 表单验证并*不能*替代确保输入数据格式正确的脚本。很容易对 HTML 进行调整，使他们能够绕过验证，或完全删除验证。也有可能会完全绕过 HTML 代码，直接将数据提交给你的服务器。如果你的服务器端代码不能验证它所收到的数据，那么当提交的数据格式不当（或数据过大、类型错误等等）时，灾难就会降临。
 
 ## 处理浏览器支持
 
@@ -438,7 +441,8 @@ function populateYears() {
 }
 ```
 
-> **备注：** 请记住有些年份有 53 周（见[每年的周数](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期)）！当你在开发产品应用时应当考虑这个问题。
+> [!NOTE]
+> 请记住有些年份有 53 周（见[每年的周数](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期)）！当你在开发产品应用时应当考虑这个问题。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/element/input/number/index.md b/files/zh-cn/web/html/element/input/number/index.md
index 01412408b6b716..04cc5e28d7a718 100644
--- a/files/zh-cn/web/html/element/input/number/index.md
+++ b/files/zh-cn/web/html/element/input/number/index.md
@@ -78,13 +78,15 @@ list 属性的值是位于同一文档中的 {{HTMLElement("datalist")}} 元素
 
 如果控件的内容具有方向（{{Glossary("LTR")}} 或 {{Glossary("RTL")}}），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法来格式化字符，从而覆盖原有占位符的方向；请参见[如何针对双向文本使用 Unicode 控制符](https://www.w3.org/International/questions/qa-bidi-unicode-controls)获取更多信息。
 
-> **备注：** 请尽可能避免使用 `placeholder` 属性，它在语义上没有其他解释表单的方式有用，并且可能会导致额外的问题。参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
+> [!NOTE]
+> 请尽可能避免使用 `placeholder` 属性，它在语义上没有其他解释表单的方式有用，并且可能会导致额外的问题。参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
 
 ### `readonly`
 
 如果该布尔属性存在，意味着用户将不能编辑此字段。然而其 `value` 值仍然可以直接通过 JavaScript 代码设置 {{domxref("HTMLInputElement")}} 的 `value` 属性改变。
 
-> **备注：** 由于只读字段不可以拥有值，`required` 不会对指定了 `readonly` 属性的字段起作用。
+> [!NOTE]
+> 由于只读字段不可以拥有值，`required` 不会对指定了 `readonly` 属性的字段起作用。
 
 ### `step`
 
@@ -92,7 +94,8 @@ list 属性的值是位于同一文档中的 {{HTMLElement("datalist")}} 元素
 
 字符串值 `any` 意味着不使用步进值，任意值都可以接受（除其他制约因素如 [`min`](#min) 或 [`max`](#max) 之外）。
 
-> **备注：** 当用户输入的数据不符合步进配置时，{{Glossary("user agent","用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
+> [!NOTE]
+> 当用户输入的数据不符合步进配置时，{{Glossary("user agent","用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
 
 `number` 输入的默认步进值为 `1`，且只允许数字输入——*除非*步进值不是数字。
 
@@ -106,9 +109,11 @@ list 属性的值是位于同一文档中的 {{HTMLElement("datalist")}} 元素
 
 `<input type ="number">` 元素可以帮助简化构建在表单中输入数字的用户界面和逻辑。当你使用正确的 `type` 值 `number` 创建数字输入时，会自动验证你输入的文本是否为数字，而且通常会一同设置一组用于步进数字值的向上向下按钮。
 
-> **警告：** 逻辑上，不应该向数字输入框输入数字以外的字符。某些浏览器允许这些不合法字符，另外一些浏览器不允许；请查看 [Firefox bug 1398528](https://bugzil.la/1398528)。
+> [!WARNING]
+> 逻辑上，不应该向数字输入框输入数字以外的字符。某些浏览器允许这些不合法字符，另外一些浏览器不允许；请查看 [Firefox bug 1398528](https://bugzil.la/1398528)。
 
-> **备注：** 记住，用户可以在幕后修改 HTML，因此网站*不得*使用简单的客户端验证来实现任何安全目的。你*必须*在服务器端验证所提供的值，以确保这些值没有任何安全问题。
+> [!NOTE]
+> 记住，用户可以在幕后修改 HTML，因此网站*不得*使用简单的客户端验证来实现任何安全目的。你*必须*在服务器端验证所提供的值，以确保这些值没有任何安全问题。
 
 此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。
 
@@ -125,7 +130,8 @@ list 属性的值是位于同一文档中的 {{HTMLElement("datalist")}} 元素
 
 数字输入在为空的时候以及输入单个数字时被认为是有效的，否则是无效的。如果使用了 [`required`](/zh-CN/docs/Web/HTML/Element/input#required) 属性，则输入在空时不再被视为有效。
 
-> **备注：** 任何数字都是可接受的值，只要它是[有效的浮点数](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number)（即不是 [NaN](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN) 或 [Infinity](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Infinity)）。
+> [!NOTE]
+> 任何数字都是可接受的值，只要它是[有效的浮点数](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number)（即不是 [NaN](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN) 或 [Infinity](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Infinity)）。
 
 ### 占位符
 
@@ -279,7 +285,8 @@ input:valid + span::after {
 
 我们把它放在一个单独的 `<span>`元素上，以增加灵活性；一些浏览器在某些类型的表单输入上不能很有效地显示生成的内容（请阅读 [`<input type="date">` 验证](/zh-CN/docs/Web/HTML/Element/input/date#Validation)一节的示例以了解）。
 
-> **警告：** 客户端表单验证*不能*替代服务端验证。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。
+> [!WARNING]
+> 客户端表单验证*不能*替代服务端验证。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。
 
 ### 模式验证
 
@@ -407,7 +414,8 @@ switchBtn.addEventListener("click", () => {
 
 在声明了一些变量之后，我们为按钮添加一个事件监听器来控制切换机制。这很简单，主要是改变按钮的类别和标签，并在按钮被按下时更新两组输入的显示值。请注意，我们不是在米和英尺/英寸之间来回转换，现实生活中的网络应用可能会这么做。
 
-> **备注：** 请注意，当用户点击按钮时，我们从隐藏的输入中移除 `required` 属性，并清空 `value` 属性。这样我们就可以在两个输入组都没有填写的情况下提交表单，而不会提交那些我们不想提交的数据。如果我们不这样做，你就必须同时填入英尺/英寸**和**米来提交表单了！
+> [!NOTE]
+> 请注意，当用户点击按钮时，我们从隐藏的输入中移除 `required` 属性，并清空 `value` 属性。这样我们就可以在两个输入组都没有填写的情况下提交表单，而不会提交那些我们不想提交的数据。如果我们不这样做，你就必须同时填入英尺/英寸**和**米来提交表单了！
 
 ## 无障碍
 
diff --git a/files/zh-cn/web/html/element/input/password/index.md b/files/zh-cn/web/html/element/input/password/index.md
index 1e6ca6bb2e262b..a0b22af73e2445 100644
--- a/files/zh-cn/web/html/element/input/password/index.md
+++ b/files/zh-cn/web/html/element/input/password/index.md
@@ -13,7 +13,8 @@ slug: Web/HTML/Element/input/password
 
 输入过程的具体细节可能因浏览器而异。例如，有的浏览器经常在隐藏它之前显示键入的字符一段时间，而另外一些浏览器允许用户切换明文显示模式。移动端设备上检查是否输入了预期的密码通常比较困难，而这两种机制都能解决这个问题。
 
-> **备注：** 任何涉及密码等敏感信息的表单（例如登录表格）都应通过 HTTPS 提供。许多浏览器现在都实现了警告不安全登录表单的机制，参阅[不安全的密码](/zh-CN/docs/Web/Security/Insecure_passwords)。
+> [!NOTE]
+> 任何涉及密码等敏感信息的表单（例如登录表格）都应通过 HTTPS 提供。许多浏览器现在都实现了警告不安全登录表单的机制，参阅[不安全的密码](/zh-CN/docs/Web/Security/Insecure_passwords)。
 
 ## 值
 
@@ -21,7 +22,8 @@ slug: Web/HTML/Element/input/password
 
 如果指定了 [`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性，则 `password` 中的内容只有通过验证才有效；参见[验证](#验证)一节以获得更多信息。
 
-> **备注：** 换行（U+000A）和回车（U+000D）符不允许在 `password` 中出现。当对密码控件设置值时，换行和回车符都会从值中删除。
+> [!NOTE]
+> 换行（U+000A）和回车（U+000D）符不允许在 `password` 中出现。当对密码控件设置值时，换行和回车符都会从值中删除。
 
 ## 额外属性
 
@@ -45,7 +47,8 @@ slug: Web/HTML/Element/input/password
 
 如果没有指定模式，或指定了无效的模式，则不会应用任何正则表达式，且该属性将被完全忽略。
 
-> **备注：** 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性来指定大多数浏览器将作为工具提示的文本，以解释匹配该模式的要求是什么。还应该在附近包括其他解释性的文本。
+> [!NOTE]
+> 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性来指定大多数浏览器将作为工具提示的文本，以解释匹配该模式的要求是什么。还应该在附近包括其他解释性的文本。
 
 强烈建议在密码输入中使用模式，以帮助确保用户选择和使用有效的密码，并使用广泛的字符类别。通过一个模式，你可以规定大小写规则、要求使用一些数字和/或标点符号，等等。参阅[验证](#验证)一节以获取详细说明和示例。
 
@@ -55,13 +58,15 @@ slug: Web/HTML/Element/input/password
 
 如果控件的内容具有方向（{{Glossary("LTR")}} 或 {{Glossary("RTL")}}），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法来格式化字符，从而覆盖原有占位符的方向；请参见[如何针对双向文本使用 Unicode 控制符](https://www.w3.org/International/questions/qa-bidi-unicode-controls)获取更多信息。
 
-> **备注：** 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
+> [!NOTE]
+> 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
 
 ### readonly
 
 一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement","HTMLInputElement.value")}} 的 `value` 属性来更改。
 
-> **备注：** 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
+> [!NOTE]
+> 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
 
 ### size
 
diff --git a/files/zh-cn/web/html/element/input/radio/index.md b/files/zh-cn/web/html/element/input/radio/index.md
index 48a451d60b2e0e..95aae1efdf5fdf 100644
--- a/files/zh-cn/web/html/element/input/radio/index.md
+++ b/files/zh-cn/web/html/element/input/radio/index.md
@@ -64,7 +64,8 @@ slug: Web/HTML/Element/input/radio
 
 如果你在 HTML 中省略了 `value` 属性，那么提交的表单数据就会将该值分配到 `on` 上。在这种情况下，如果用户选中了“电话”选项并提交了表单，提交的表单数据将是 `contact=on`，这并没有什么用。所以别忘了设置你的 `value` 属性！
 
-> **备注：** 如果在提交表单时没有选择任何单选按钮，则提交的表单数据中根本不包括单选组，因为没有要报告的值。
+> [!NOTE]
+> 如果在提交表单时没有选择任何单选按钮，则提交的表单数据中根本不包括单选组，因为没有要报告的值。
 
 在没有选择任何一组单选按钮的情况下提交表单的情况并不多见，所以通常明智的做法是让一个单选按钮默认为“选中”状态。参见下面的[默认选择单选按钮](#默认选择单选按钮)。
 
@@ -170,7 +171,8 @@ form.addEventListener(
 
 在这个示例中，第一个单选按钮默认是选择状态。
 
-> **备注：** 如果你在多于一个单选按钮上指定了 `checked` 属性，后面的实例将覆盖前面的实例；也就是说，最后一个包含 `checked` 属性的单选按钮是当前选择的按钮。这是因为一个单选按钮组只能同时选取一个单选按钮，用户代理会在选择新的单选按钮时自动取消选择其他单选按钮。
+> [!NOTE]
+> 如果你在多于一个单选按钮上指定了 `checked` 属性，后面的实例将覆盖前面的实例；也就是说，最后一个包含 `checked` 属性的单选按钮是当前选择的按钮。这是因为一个单选按钮组只能同时选取一个单选按钮，用户代理会在选择新的单选按钮时自动取消选择其他单选按钮。
 
 ### 为你的单选按钮提供一个较大的选择区域
 
@@ -273,7 +275,8 @@ button:active {
 
 这里最值得注意的是 {{cssxref("appearance")}} 属性的使用（为了支持某些浏览器，需要加前缀）。默认情况下，单选按钮（和[复选框](/zh-CN/docs/Web/HTML/Element/Input/checkbox)）的样式使用了操作系统对这些控件的本地样式。通过指定 `appearance: none`，你可以完全删除本地样式，并为它们创建自己的样式。这里我们使用了 {{cssxref("border")}} 和 {{cssxref("border-radius")}}，以及 {{cssxref("transition")}} 来创建一个漂亮的带动画单选。请注意 {{cssxref(":checked")}} 伪类是如何用来指定单选按钮被选中时的外观样式的。
 
-> **备注：** 如果你想使用 {{cssxref("appearance")}} 属性，你需要小心测试。即使大多数流行浏览器都支持它，它的实现变化很广。在老式浏览器中，即使是关键字 `none`，不同浏览器之间差异也很大，有些浏览器根本不支持。在新的浏览器中，差别就会小得多。
+> [!NOTE]
+> 如果你想使用 {{cssxref("appearance")}} 属性，你需要小心测试。即使大多数流行浏览器都支持它，它的实现变化很广。在老式浏览器中，即使是关键字 `none`，不同浏览器之间差异也很大，有些浏览器根本不支持。在新的浏览器中，差别就会小得多。
 
 {{EmbedLiveSample('为单选按钮添加样式', 600, 120)}}
 
diff --git a/files/zh-cn/web/html/element/input/range/index.md b/files/zh-cn/web/html/element/input/range/index.md
index 655e0db748f4fe..3274a684a28d4d 100644
--- a/files/zh-cn/web/html/element/input/range/index.md
+++ b/files/zh-cn/web/html/element/input/range/index.md
@@ -92,7 +92,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 字符串值 `any` 意味着不使用步进值，任意值都可以接受（除其他制约因素如 [`min`](#min) 或 [`max`](#min) 之外）。
 
-> **备注：** 当用户输入的数据不符合步进配置时，{{Glossary("user agent","用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
+> [!NOTE]
+> 当用户输入的数据不符合步进配置时，{{Glossary("user agent","用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
 
 `range` 输入的默认步进值为 1，*除非*步进基数不是整数，否则仅允许输入整数；否则，默认值为 1。例如，如果将 `min` 设置为 -10 并将 `value` 设置为 1.5，则 1 的 `step` 将只允许正方向上的值为 1.5、2.5、3.5 等，以及负方向上的值为 -0.5，-1.5，-2.5 等。请参阅 [HTML `step` 属性](/zh-CN/docs/Web/HTML/Attributes/step)。
 
@@ -102,7 +103,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 类似于影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素的非标准 CSS 属性 -moz-orient，`orient` 属性定义范围滑块的方向。值包括 `horizontal` 和 `vertical`，分别代表范围的水平呈现和垂直呈现。
 
-> **备注：** 以下输入属性不适用于 range 输入：`accept`、`alt`、`checked`、`dirname`、`formaction`、`formenctype`、`formmethod`、`formnovalidate`、`formtarget`、`height`、`maxlength`、`minlength`、`multiple`、`pattern`、`placeholder`、`readonly`、`required`、`size`、`src` 和 `width`。如果包含了这些属性中的任何一个，都将被忽略。
+> [!NOTE]
+> 以下输入属性不适用于 range 输入：`accept`、`alt`、`checked`、`dirname`、`formaction`、`formenctype`、`formmethod`、`formnovalidate`、`formtarget`、`height`、`maxlength`、`minlength`、`multiple`、`pattern`、`placeholder`、`readonly`、`required`、`size`、`src` 和 `width`。如果包含了这些属性中的任何一个，都将被忽略。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/input/reset/index.md b/files/zh-cn/web/html/element/input/reset/index.md
index 2da2941b6df22c..0fd9e8947bdd89 100644
--- a/files/zh-cn/web/html/element/input/reset/index.md
+++ b/files/zh-cn/web/html/element/input/reset/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element/input/reset
 
 {{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
 
-> **备注：** 你应该尽量避免在表单中包含重置按钮。它们很少具有实用性，事实上更有可能使用户因误点而感到沮丧（通常是在尝试单击[提交](/zh-CN/docs/Web/HTML/Element/Input/submit)按钮时）。
+> [!NOTE]
+> 你应该尽量避免在表单中包含重置按钮。它们很少具有实用性，事实上更有可能使用户因误点而感到沮丧（通常是在尝试单击[提交](/zh-CN/docs/Web/HTML/Element/Input/submit)按钮时）。
 
 <table class="properties">
  <tbody>
@@ -120,7 +121,8 @@ slug: Web/HTML/Element/input/reset
 
 你可以在运行时通过简单地将 `disable` 设置为 `true` 或 `false` 来启用和禁用按钮。在 JavaScript 中，使用 `btn.disabled = true` 或 `btn.disabled = false`。
 
-> **备注：** 有关启用和禁用按钮的更多概念，请参见 [`<input type="button">`](/zh-CN/docs/Web/HTML/Element/input/button#启用与禁用按钮) 页面。
+> [!NOTE]
+> 有关启用和禁用按钮的更多概念，请参见 [`<input type="button">`](/zh-CN/docs/Web/HTML/Element/input/button#启用与禁用按钮) 页面。
 
 ## 验证
 
diff --git a/files/zh-cn/web/html/element/input/search/index.md b/files/zh-cn/web/html/element/input/search/index.md
index ee114f9e4b782a..f7c3c37a39dba9 100644
--- a/files/zh-cn/web/html/element/input/search/index.md
+++ b/files/zh-cn/web/html/element/input/search/index.md
@@ -74,7 +74,8 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 如果模式未指定或无效，则不应用任何正则表达式，并且将完全忽略此属性。
 
-> **备注：** 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性指定大多数浏览器将显示为文本的工具提示，以说明与模式匹配的要求。你还应该在附近添加其他说明性文字。
+> [!NOTE]
+> 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性指定大多数浏览器将显示为文本的工具提示，以说明与模式匹配的要求。你还应该在附近添加其他说明性文字。
 
 请参照[指定模式](#指定模式)更多内容和例子。
 
@@ -84,13 +85,15 @@ list 属性指定了一个 {{HTMLElement("datalist")}} 元素的 {{domxref("Elem
 
 如果控件的内容具有方向（{{Glossary("LTR")}} 或 {{Glossary("RTL")}}），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法来格式化字符，从而覆盖原有占位符的方向；请参见[如何针对双向文本使用 Unicode 控制符](https://www.w3.org/International/questions/qa-bidi-unicode-controls)获取更多信息。
 
-> **备注：** 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
+> [!NOTE]
+> 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
 
 ### readonly
 
 一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement")}} 的 `value` 属性来更改。
 
-> **备注：** 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
+> [!NOTE]
+> 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
 
 ### size
 
@@ -167,7 +170,8 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 
 `q` 是搜索输入中最常用的 `name` 值，尽管不是强制性的。提交后，发送到服务器的键值对数据将为 `q=searchterm`。
 
-> **备注：** 一定要记住为你的 input 设置 [`name`](/zh-CN/docs/Web/HTML/Element/input#name)，否则不会提交任何内容。
+> [!NOTE]
+> 一定要记住为你的 input 设置 [`name`](/zh-CN/docs/Web/HTML/Element/input#name)，否则不会提交任何内容。
 
 ### 搜索类型和文本类型之间的差异
 
@@ -227,7 +231,8 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 
 与上一个示例没有视觉上的区别，但是屏幕阅读器用户可以获得更多可用信息。
 
-> **备注：** 有关此类辅助功能的更多信息，请参见 [Signposts/Landmarks](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) 。
+> [!NOTE]
+> 有关此类辅助功能的更多信息，请参见 [Signposts/Landmarks](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) 。
 
 ### 输入框元素物理大小
 
@@ -255,7 +260,8 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 
 `<input>` 元素的 `search` 类型具有与常规文本 `text` 输入相同的验证功能。通常，不太可能希望对搜索框使用验证功能。在许多情况下，应该允许用户搜索任何内容，但是有几种情况需要考虑，例如搜索已知格式的数据。
 
-> **备注：** HTML 表单验证*不能*替代服务器脚本，以确保输入的数据格式正确。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。有人也可以完全绕开你的 HTML 并将数据直接提交到你的服务器。如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。
+> [!NOTE]
+> HTML 表单验证*不能*替代服务器脚本，以确保输入的数据格式正确。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。有人也可以完全绕开你的 HTML 并将数据直接提交到你的服务器。如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。
 
 ### 样式注意事项
 
diff --git a/files/zh-cn/web/html/element/input/submit/index.md b/files/zh-cn/web/html/element/input/submit/index.md
index ccd9c6d4cc000b..e238f2ff126134 100644
--- a/files/zh-cn/web/html/element/input/submit/index.md
+++ b/files/zh-cn/web/html/element/input/submit/index.md
@@ -185,7 +185,8 @@ slug: Web/HTML/Element/input/submit
 
 可以在运行时通过简单地将 `disabled` 设置为 `true` 或 `false` 来启用和禁用按钮。在 JavaScript 中，这看起来像 `btn.disabled = true` 或 `btn.disabled = false`。
 
-> **备注：** 有关启用和禁用按钮的更多想法，请参见 [`<input type="button">`](/zh-CN/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button) 。
+> [!NOTE]
+> 有关启用和禁用按钮的更多想法，请参见 [`<input type="button">`](/zh-CN/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button) 。
 
 ## 验证方式
 
diff --git a/files/zh-cn/web/html/element/input/tel/index.md b/files/zh-cn/web/html/element/input/tel/index.md
index 1d3faef803f1a4..cc105cd8363565 100644
--- a/files/zh-cn/web/html/element/input/tel/index.md
+++ b/files/zh-cn/web/html/element/input/tel/index.md
@@ -11,7 +11,8 @@ slug: Web/HTML/Element/input/tel
 
 尽管 `tel` 类型的输入在功能上和 `text` 输入一致，但它们确实有用；其中最明显的就是移动浏览器（特别是在手机上），可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。
 
-> **备注：** 不支持 `tel` 类型的浏览器会回退为标准 {{HTMLElement("input/text", "text")}} 类型输入。
+> [!NOTE]
+> 不支持 `tel` 类型的浏览器会回退为标准 {{HTMLElement("input/text", "text")}} 类型输入。
 
 ```html
 <input id="telNo" type="tel" />
@@ -86,13 +87,15 @@ list 属性的值是位于同一文档中的 {{HTMLElement("datalist")}} 元素
 
 如果控件的内容具有方向（{{Glossary("LTR")}} 或 {{Glossary("RTL")}}），但需要以相反的方向性呈现占位符，可以使用 Unicode 双向算法格式化字符来覆盖占位符内的方向性；更多信息请参见[如何使用 Unicode 控件处理 bidi 文本](https://www.w3.org/International/questions/qa-bidi-unicode-controls)。
 
-> **备注：** 如果可以的话，避免使用 `placeholder` 属性。它在语义上不如其他解释表单的方式有用，而且会对你的内容造成意想不到的技术问题。参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)获取更多信息。
+> [!NOTE]
+> 如果可以的话，避免使用 `placeholder` 属性。它在语义上不如其他解释表单的方式有用，而且会对你的内容造成意想不到的技术问题。参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)获取更多信息。
 
 ### readonly
 
 一个布尔属性，如果存在，意味着这个字段不能被用户编辑。但是，它的 `value` 仍然可以由 JavaScript 代码通过设置 {{domxref("HTMLInputElement")}} 的 `value` 属性来改变。
 
-> **备注：** 由于只读字段不可以拥有值，`required` 对指定了 `readonly` 属性的输入字段不起作用。
+> [!NOTE]
+> 由于只读字段不可以拥有值，`required` 对指定了 `readonly` 属性的输入字段不起作用。
 
 ### size
 
@@ -190,7 +193,8 @@ Mozilla 的扩展，当用户编辑该字段时按下键盘的 <kbd>Enter</kbd>
 
 {{EmbedLiveSample("元素值的长度", 600, 40) }}
 
-> **备注：** 上述属性确实会影响[验证](#验证)——如果值的长度小于 9 个字符，或者大于 14 个，上述示例的输入将被视为无效。大多数浏览器甚至不会让你输入超过最大长度的值。
+> [!NOTE]
+> 上述属性确实会影响[验证](#验证)——如果值的长度小于 9 个字符，或者大于 14 个，上述示例的输入将被视为无效。大多数浏览器甚至不会让你输入超过最大长度的值。
 
 ### 提供默认选项
 
@@ -232,7 +236,8 @@ Mozilla 的扩展，当用户编辑该字段时按下键盘的 <kbd>Enter</kbd>
 
 正如我们之前谈到的那样，为电话号码提供一种通用的客户端验证解决方案是相当困难的。所以，我们能做些什么？让我们考虑一些选项。
 
-> **警告：** HTML 表单验证*不能*替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整 HTML 代码是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的 HTML，直接提交数据到你的服务器。如果你的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。
+> [!WARNING]
+> HTML 表单验证*不能*替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整 HTML 代码是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的 HTML，直接提交数据到你的服务器。如果你的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。
 
 ### 要求电话号码必填
 
diff --git a/files/zh-cn/web/html/element/input/text/index.md b/files/zh-cn/web/html/element/input/text/index.md
index 6f9e1a281e9175..794589a82d332b 100644
--- a/files/zh-cn/web/html/element/input/text/index.md
+++ b/files/zh-cn/web/html/element/input/text/index.md
@@ -74,7 +74,8 @@ let theText = myTextInput.value;
 
 如果模式未指定或无效，则不应用任何正则表达式，并且将完全忽略此属性。
 
-> **备注：** 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性指定大多数浏览器将显示为文本的工具提示，以说明与模式匹配的要求。你还应该在附近添加其他说明性文字。
+> [!NOTE]
+> 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性指定大多数浏览器将显示为文本的工具提示，以说明与模式匹配的要求。你还应该在附近添加其他说明性文字。
 
 请参照[指定模式](#指定模式)更多内容和例子。
 
@@ -84,13 +85,15 @@ let theText = myTextInput.value;
 
 如果控件的内容具有方向（{{Glossary("LTR")}} 或 {{Glossary("RTL")}}），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法来格式化字符，从而覆盖原有占位符的方向；请参见[如何针对双向文本使用 Unicode 控制符](https://www.w3.org/International/questions/qa-bidi-unicode-controls)获取更多信息。
 
-> **备注：** 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
+> [!NOTE]
+> 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
 
 ### `readonly`
 
 一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement")}} 的 `value` 属性来更改。
 
-> **备注：** 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
+> [!NOTE]
+> 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
 
 ### `size`
 
@@ -205,7 +208,8 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 
 `text` 类型的 `<input>` 元素默认没有应用自动验证（因为基本文本输入需要能够接受任意字符串），但是有一些客户端验证选项可用，我们将在下面讨论。
 
-> **备注：** HTML 表单验证*不能*替代服务器脚本，以确保输入的数据格式正确。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。有人也可以完全绕开你的 HTML 并将数据直接提交到你的服务器。如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。
+> [!NOTE]
+> HTML 表单验证*不能*替代服务器脚本，以确保输入的数据格式正确。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。有人也可以完全绕开你的 HTML 并将数据直接提交到你的服务器。如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。
 
 ### 样式注意事项
 
@@ -332,7 +336,8 @@ input:valid + span::after {
 
 如果尝试提交少于 4 个字符的表单，则会收到一条相应的错误消息（不同的浏览器会有所不同）。如果尝试输入 8 个以上的字符，浏览器将不允许输入。
 
-> **备注：** 如果你指定了 `minlength` 但未指定 `required`，则输入被视为有效，因为不需要用户指定值。
+> [!NOTE]
+> 如果你指定了 `minlength` 但未指定 `required`，则输入被视为有效，因为不需要用户指定值。
 
 ### 指定模式
 
diff --git a/files/zh-cn/web/html/element/input/time/index.md b/files/zh-cn/web/html/element/input/time/index.md
index 413c996da2415c..f97a5ee6e0fec7 100644
--- a/files/zh-cn/web/html/element/input/time/index.md
+++ b/files/zh-cn/web/html/element/input/time/index.md
@@ -140,7 +140,8 @@ startTime.addEventListener(
 
 除了 {{HTMLElement("input")}} 元素共有的属性外，时间输入还提供以下属性：
 
-> **备注：** 与许多数据类型不同，时间值有一个**周期域**，意味着数值达到可能的最高值之后，就会绕回起点。例如，指定 `min` 为 `14:00`，`max` 为 `2:00` 意味着允许的时间值从下午 2:00 开始，通过午夜运行到第二天，结束于凌晨 2:00。更多信息请参见本文的[使最小值和最大值跨越午夜](#使最小值和最大值跨越午夜)部分。
+> [!NOTE]
+> 与许多数据类型不同，时间值有一个**周期域**，意味着数值达到可能的最高值之后，就会绕回起点。例如，指定 `min` 为 `14:00`，`max` 为 `2:00` 意味着允许的时间值从下午 2:00 开始，通过午夜运行到第二天，结束于凌晨 2:00。更多信息请参见本文的[使最小值和最大值跨越午夜](#使最小值和最大值跨越午夜)部分。
 
 ### list
 
@@ -158,7 +159,8 @@ startTime.addEventListener(
 
 如果该布尔属性存在，意味着用户将不能编辑此字段。然而其 `value` 值仍然可以直接通过 JavaScript 代码设置 {{domxref("HTMLInputElement")}} 的 `value` 属性改变。
 
-> **备注：** 由于只读字段不可以拥有值，`required` 不会对指定了 `readonly` 属性的字段起作用。
+> [!NOTE]
+> 由于只读字段不可以拥有值，`required` 不会对指定了 `readonly` 属性的字段起作用。
 
 ### step
 
@@ -166,7 +168,8 @@ startTime.addEventListener(
 
 字符串值 `any` 意味着不使用步进值，任意值都可以接受（除其他制约因素如 [`min`](#min) 或 [`max`](#max) 之外）。
 
-> **备注：** 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
+> [!NOTE]
+> 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
 
 对于 `time` 输入， `step` 的值以秒为单位，比例因子为 1000（因为基础数值以毫秒为单位）。`step` 的默认值为 60，表示 60 秒（或 1 分钟、60000 毫秒）。
 
@@ -195,7 +198,8 @@ _目前，尚不清楚当与 `time` 输入一起使用时，`any` 的值对 `ste
 
 你可以使用 [`step`](/zh-CN/docs/Web/HTML/Element/input#step) 属性来更改每次递增或递减的时间数（例如，点击箭头控件时时间值会以 10 分钟为单位变动）。
 
-> **备注：** 此属性在不同浏览器之间有一些怪异的行为，并不可靠。
+> [!NOTE]
+> 此属性在不同浏览器之间有一些怪异的行为，并不可靠。
 
 它需要一个整数，相当于你要增加的秒数；默认值是 60 秒，或 1 分钟。如果你指定一个小于 60 秒（1 分钟）的值，`time` 输入将显示秒的输入区，同时显示小时和分钟。
 
@@ -214,7 +218,8 @@ _目前，尚不清楚当与 `time` 输入一起使用时，`any` 的值对 `ste
 
 在 Edge 浏览器中，step 值不起作用。
 
-> **备注：** 使用 `step` 可能会导致验证工作不正常（如下一节所见）。
+> [!NOTE]
+> 使用 `step` 可能会导致验证工作不正常（如下一节所见）。
 
 ## 验证方式
 
@@ -317,7 +322,8 @@ if (input.validity.valid && input.type === "time") {
 
 {{ EmbedLiveSample('使时间成为必需值', 600, 120) }}
 
-> **警告：** HTML 表单验证并*不能*替代确保输入数据格式正确的脚本。很容易对 HTML 进行调整，使他们能够绕过验证，或完全删除验证。也有可能会完全绕过 HTML 代码，直接将数据提交给你的服务器。如果你的服务器端代码不能验证它所收到的数据，那么当提交的数据格式不当（或数据过大、类型错误等等）时，灾难就会降临。
+> [!WARNING]
+> HTML 表单验证并*不能*替代确保输入数据格式正确的脚本。很容易对 HTML 进行调整，使他们能够绕过验证，或完全删除验证。也有可能会完全绕过 HTML 代码，直接将数据提交给你的服务器。如果你的服务器端代码不能验证它所收到的数据，那么当提交的数据格式不当（或数据过大、类型错误等等）时，灾难就会降临。
 
 ## 处理浏览器支持
 
diff --git a/files/zh-cn/web/html/element/input/url/index.md b/files/zh-cn/web/html/element/input/url/index.md
index bc86140621d1ec..c4a213c6d489df 100644
--- a/files/zh-cn/web/html/element/input/url/index.md
+++ b/files/zh-cn/web/html/element/input/url/index.md
@@ -79,7 +79,8 @@ slug: Web/HTML/Element/input/url
 
 如果模式未指定或无效，则不应用任何正则表达式，并且将完全忽略此属性。
 
-> **备注：** 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性指定大多数浏览器将显示为文本的工具提示，以说明与模式匹配的要求。你还应该在附近添加其他说明性文字。
+> [!NOTE]
+> 使用 [`title`](/zh-CN/docs/Web/HTML/Element/input#title) 属性指定大多数浏览器将显示为文本的工具提示，以说明与模式匹配的要求。你还应该在附近添加其他说明性文字。
 
 参见[模式验证](#模式验证)小节以获取细节和例子。
 
@@ -89,13 +90,15 @@ slug: Web/HTML/Element/input/url
 
 如果控件的内容具有方向（{{Glossary("LTR")}} 或 {{Glossary("RTL")}}），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法来格式化字符，从而覆盖原有占位符的方向；请参见[如何针对双向文本使用 Unicode 控制符](https://www.w3.org/International/questions/qa-bidi-unicode-controls)获取更多信息。
 
-> **备注：** 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
+> [!NOTE]
+> 尽可能避免使用 `placeholder` 属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。请参见 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#标签)以获取更多信息。
 
 ### readonly
 
 一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement")}} 的 `value` 属性来更改。
 
-> **备注：** 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
+> [!NOTE]
+> 因为只读字段不能有值，所以 `required` 对指定了 `readonly` 属性的输入没有任何影响。
 
 ### size
 
@@ -143,7 +146,8 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 
 然而，重要的是，这并不足以确保指定的文本是一个实际存在与网站的用户相对应的 URL，或在任何其他方面可以接受。它只是确保该字段的值被正确格式化为一个 URL。
 
-> **备注：** 用户可以在背后改动你的 HTML 代码，所以你的站点*不能*依赖此验证提供安全性。*必须*在服务端验证用户所输入的 URL，以确认用户提供的文本不会产生任何额外的安全隐患。
+> [!NOTE]
+> 用户可以在背后改动你的 HTML 代码，所以你的站点*不能*依赖此验证提供安全性。*必须*在服务端验证用户所输入的 URL，以确认用户提供的文本不会产生任何额外的安全隐患。
 
 ### 简单的 URL 输入框
 
@@ -207,7 +211,8 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 
 {{EmbedLiveSample("元素值长度", 600, 40) }}
 
-> **备注：** 这些属性也影响验证；小于或大于指定的最小值或最大值的长度将会判定为不合法；而且大部分浏览器也会拒绝让用户输入长度大于指定限制的值。
+> [!NOTE]
+> 这些属性也影响验证；小于或大于指定的最小值或最大值的长度将会判定为不合法；而且大部分浏览器也会拒绝让用户输入长度大于指定限制的值。
 
 ### 提供默认值
 
@@ -263,7 +268,8 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 
 针对 `url` 输入，有两种等级的校验方式。首先，针对每一个 {{HTMLElement("input")}} 元素，有一种标准级别的校验方式，以验证其中的内容是一个合法的 URL。其次，你也可以额外添加一些过滤器，来满足自己的需求。
 
-> **警告：** HTML 表单验证*不能*替代服务端代码，以确保输入的数据格式正确。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。有人也可以完全绕开你的 HTML 并将数据直接提交到你的服务器。如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大、类型错误的数据等等）输入数据库时，灾难可能会发生。
+> [!WARNING]
+> HTML 表单验证*不能*替代服务端代码，以确保输入的数据格式正确。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。有人也可以完全绕开你的 HTML 并将数据直接提交到你的服务器。如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大、类型错误的数据等等）输入数据库时，灾难可能会发生。
 
 ### 基本验证
 
@@ -357,7 +363,8 @@ input:valid + span::after {
 
 这就是为什么我们要指定字符串“URL 必须属于 myco 域”的原因。通过这样做，产生的完整错误信息可能是这样的：“请与请求的格式匹配。URL 必须属于 myco 域”。
 
-> **备注：** 如果你在编写验证正则表达式时遇到麻烦，它们不能正常工作，请检查你的浏览器控制台；那里可能有有用的错误信息来帮助你解决问题。
+> [!NOTE]
+> 如果你在编写验证正则表达式时遇到麻烦，它们不能正常工作，请检查你的浏览器控制台；那里可能有有用的错误信息来帮助你解决问题。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/input/week/index.md b/files/zh-cn/web/html/element/input/week/index.md
index 3f1e54eb14991b..a77c37d0294302 100644
--- a/files/zh-cn/web/html/element/input/week/index.md
+++ b/files/zh-cn/web/html/element/input/week/index.md
@@ -90,7 +90,8 @@ weekControl.value = "2017-W45";
 
 布尔属性值，如果存在，说明此字段不能由用户编辑。然而，其 `value` 值仍然可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement")}} 的 `value` 属性来改变。
 
-> **备注：** 由于只读字段不可以拥有值，`required` 不会对指定了 `readonly` 属性的字段起作用。
+> [!NOTE]
+> 由于只读字段不可以拥有值，`required` 不会对指定了 `readonly` 属性的字段起作用。
 
 ### step
 
@@ -98,7 +99,8 @@ weekControl.value = "2017-W45";
 
 字符串值 `any` 意味着不使用步进值，任意值都可以接受（除其他制约因素如 [`min`](#min) 或 [`max`](#max) 之外）。
 
-> **备注：** 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
+> [!NOTE]
+> 当用户输入的数据不符合步进配置时，{{Glossary("user agent", "用户代理")}}可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。
 
 对于 `week` 输入，`step` 的值以周为单位，比例因子为 604,800,000（因为基础数值以毫秒为单位）。`step` 的默认值为 1，表示 1 周。默认的步进基数是 -259,200,000，这是 1970 年第一周的开始（`"1970-W01"`）。
 
@@ -213,7 +215,8 @@ input:valid + span::after {
 
 ![The week form control has two dashes where the week number should be. A popup with a yellow warning symbol and a 'Please fill out this field' is emanating from the two dashes, which are highlighted in blue, the same blue as the input's focus ring.](week-validation-chrome.png)
 
-> **警告：** HTML 表单验证*不能*代替脚本来确保输入的数据采用正确的格式。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。
+> [!WARNING]
+> HTML 表单验证*不能*代替脚本来确保输入的数据采用正确的格式。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。
 
 ## 处理浏览器支持
 
@@ -348,7 +351,8 @@ function populateWeeks() {
 }
 ```
 
-> **备注：** 请记住，有些年份有 53 周（请参阅[每年的周数](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期))！在开发生产应用程序时，需要考虑到这一点。
+> [!NOTE]
+> 请记住，有些年份有 53 周（请参阅[每年的周数](https://zh.wikipedia.org/wiki/ISO週日曆#每年的星期))！在开发生产应用程序时，需要考虑到这一点。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/element/li/index.md b/files/zh-cn/web/html/element/li/index.md
index bf77b1f709fde8..3ec873aafa9611 100644
--- a/files/zh-cn/web/html/element/li/index.md
+++ b/files/zh-cn/web/html/element/li/index.md
@@ -29,7 +29,8 @@ l10n:
 
     该类型会覆盖其父元素 {{HTMLElement("ol")}} 使用的类型（如果有的话）。
 
-    > **备注：** 该属性已被弃用；请使用 CSS {{cssxref("list-style-type")}} 属性代替。
+    > [!NOTE]
+    > 该属性已被弃用；请使用 CSS {{cssxref("list-style-type")}} 属性代替。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/link/index.md b/files/zh-cn/web/html/element/link/index.md
index 094d74d433d345..3f8df6e3a9469e 100644
--- a/files/zh-cn/web/html/element/link/index.md
+++ b/files/zh-cn/web/html/element/link/index.md
@@ -223,7 +223,8 @@ l10n:
     - `any` 表示图标可以按矢量格式缩放到任意大小，例如 `image/svg+xml`。
     - 一个由空白符分隔的尺寸列表。每一个都以 `<像素宽度>x<像素高度>` 或 `<像素宽度>X<像素高度>` 给出。尺寸列表中的每一个尺寸都必须包含在资源里。
 
-    > **备注：** 大多数的图标格式只能存储一个图标。因此绝大多数使用 [`sizes`](#sizes) 时只包含一个值。微软的 ICO 格式和苹果的 ICNS 格式都是这样。ICO 更为普及，因此如果需要跨浏览器支持（尤其是旧版本的 IE），应使用这种格式。
+    > [!NOTE]
+    > 大多数的图标格式只能存储一个图标。因此绝大多数使用 [`sizes`](#sizes) 时只包含一个值。微软的 ICO 格式和苹果的 ICNS 格式都是这样。ICO 更为普及，因此如果需要跨浏览器支持（尤其是旧版本的 IE），应使用这种格式。
 
 - `title`
   - : 属性在 `<link>` 元素上有特殊的语义。当用于 `<link rel="stylesheet"> `时，它定义了一个[默认样式表或备用样式表](/zh-CN/docs/Web/CSS/Alternative_style_sheets)。
@@ -243,13 +244,15 @@ l10n:
 
   - : 该属性定义链接资源的字符编码。其值是以空格和/或逗号分隔的字符集列表，如 {{rfc(2045)}} 所定义。默认值为 `iso-8859-1`。
 
-    > **备注：** 要产生与该废弃属性相同的效果，请在链接资源上使用 {{HTTPHeader("Content-Type")}} HTTP 标头。
+    > [!NOTE]
+    > 要产生与该废弃属性相同的效果，请在链接资源上使用 {{HTTPHeader("Content-Type")}} HTTP 标头。
 
 - `rev` {{Deprecated_Inline}}
 
   - : 此属性的值显示了 [`href`](#href) 属性所定义的当前文档与链接文档的关系。因此，该属性定义了与 rel 属性的值相比的反向关系。该属性的[链接类型值](/zh-CN/docs/Web/HTML/Attributes/rel)类似于 [`rel`](#rel) 的可能值。
 
-    > **备注：** 你应该使用 [`rel`](#rel) 属性来代替 `rev`，并使用相反的[链接类型值](/zh-CN/docs/Web/HTML/Attributes/rel)。例如，要为 `made` 建立反向链接，应指定 `author`。此外，该属性并不代表“修订（revision）”，因此不得与版本号一起使用，尽管许多网站都会这样滥用该属性。
+    > [!NOTE]
+    > 你应该使用 [`rel`](#rel) 属性来代替 `rev`，并使用相反的[链接类型值](/zh-CN/docs/Web/HTML/Attributes/rel)。例如，要为 `made` 建立反向链接，应指定 `author`。此外，该属性并不代表“修订（revision）”，因此不得与版本号一起使用，尽管许多网站都会这样滥用该属性。
 
 ## 示例
 
@@ -344,7 +347,8 @@ l10n:
 <link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
 ```
 
-> **备注：** 一旦加载并解析了样式表及其所有导入内容，并在开始将样式应用到内容之前，`load` 事件就会触发。
+> [!NOTE]
+> 一旦加载并解析了样式表及其所有导入内容，并在开始将样式应用到内容之前，`load` 事件就会触发。
 
 ### 预加载示例
 
diff --git a/files/zh-cn/web/html/element/mark/index.md b/files/zh-cn/web/html/element/mark/index.md
index cf5fa4a3ba09a8..bf3361f95c4f4f 100644
--- a/files/zh-cn/web/html/element/mark/index.md
+++ b/files/zh-cn/web/html/element/mark/index.md
@@ -27,7 +27,8 @@ HTML 标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突
 - 另外，\<mark>元素还用来显示与用户当前活动相关的一部分文档内容。例如，它可能被用于显示匹配搜索结果中的单词。
 - 不要为了语法高亮而用 `<mark>` 元素; 你应该用 _{{HTMLElement("strong")}}_ 元素结合适当的 CSS 来实现这个目的（语法高亮）。
 
-> **备注：** 不要把 `<mark>` 元素和 {{HTMLElement("strong")}} 元素搞混淆；{{HTMLElement("strong")}} 元素用来表示文本在上下文的重要性的，而 `<mark>` 元素是用来表示上下文的关联性的。
+> [!NOTE]
+> 不要把 `<mark>` 元素和 {{HTMLElement("strong")}} 元素搞混淆；{{HTMLElement("strong")}} 元素用来表示文本在上下文的重要性的，而 `<mark>` 元素是用来表示上下文的关联性的。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/menu/index.md b/files/zh-cn/web/html/element/menu/index.md
index db9ea17078ea09..53ad4c3a3696bd 100644
--- a/files/zh-cn/web/html/element/menu/index.md
+++ b/files/zh-cn/web/html/element/menu/index.md
@@ -19,7 +19,8 @@ l10n:
 
 `<menu>` 和 {{HTMLElement("ul")}} 元素都用于表示无序列表。它们的关键区别在于，{{HTMLElement("ul")}} 主要用于显示内容，而 `<menu>` 则用于交互式内容。
 
-> **备注：** 在早期版本的 HTML 规范中，`<menu>` 元素还有一个额外的用例，即作为上下文菜单。此功能被认为已过时，并且不在规范中。
+> [!NOTE]
+> 在早期版本的 HTML 规范中，`<menu>` 元素还有一个额外的用例，即作为上下文菜单。此功能被认为已过时，并且不在规范中。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/meta/name/index.md b/files/zh-cn/web/html/element/meta/name/index.md
index 6beb0102669616..e0d0ea0f952075 100644
--- a/files/zh-cn/web/html/element/meta/name/index.md
+++ b/files/zh-cn/web/html/element/meta/name/index.md
@@ -13,7 +13,8 @@ HTML 规范定义了以下标准元数据名称：
 
 - `application-name`：网页中所运行的应用程序的名称。
 
-  > **备注：** 浏览器可能使用此名称来识别应用程序。It is different from the {{HTMLElement("title")}} element, which usually contain the application name, but may also contain information like the document name or a status. 简单的网页不应当使用 `application-name`。
+  > [!NOTE]
+  > 浏览器可能使用此名称来识别应用程序。It is different from the {{HTMLElement("title")}} element, which usually contain the application name, but may also contain information like the document name or a status. 简单的网页不应当使用 `application-name`。
 
 - `author`：文档作者的名字。
 - `description`：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
@@ -32,7 +33,8 @@ HTML 规范定义了以下标准元数据名称：
   | `strict-origin-when-cross-origin` | 对同源请求发送完整 URL（不含 URL 参数）；其他情况下，如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。 |
   | `unsafe-URL`                      | 对同源请求和跨源请求发送完整 URL（不含 URL 参数）。                                                                                                                                        |
 
-  > **备注：** 动态插入 `<meta name="referrer">`（使用 {{domxref("Document.write", "document.write()")}} 方法或者 {{domxref("Node.appendChild", "appendChild()")}} 等方法）会使 referrer 行为变得不可预测。如果定义了互相冲突的策略，则会转而使用 `no-referrer` 策略。
+  > [!NOTE]
+  > 动态插入 `<meta name="referrer">`（使用 {{domxref("Document.write", "document.write()")}} 方法或者 {{domxref("Node.appendChild", "appendChild()")}} 等方法）会使 referrer 行为变得不可预测。如果定义了互相冲突的策略，则会转而使用 `no-referrer` 策略。
 
 - [`theme-color`](/zh-CN/docs/Web/HTML/Element/meta/name/theme-color)：表示当前页面的建议颜色，在自定义当前页面从或页面周围的用户界面的显示时，用户代理应当使用此颜色。`content` 属性应当包含一个有效的 CSS {{cssxref("&lt;color&gt;")}} 值。
 
@@ -74,7 +76,8 @@ CSS 设备适配规范（CSS Device Adaptation specification）定义了以下
   | `user-scalable` | `yes` 或者 `no` | 默认为 `yes`，如果设置为 `no`，用户将无法缩放当前页面。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。 |
   | `viewport-fit` | `auto`、`contain` 或者 `cover` | The `auto` value doesn’t affect the initial layout viewport, and the whole web page is viewable.The `contain` value means that the viewport is scaled to fit the largest rectangle inscribed within the display.The `cover` value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the [safe area inset](/zh-CN/docs/Web/CSS/env) variables to ensure that important content doesn't end up outside the display. |
 
-  > **备注：** 虽然此元数据条目未被标准化，但是，由于此条目在事实上处于支配地位，大多数移动浏览器都遵守此条目的声明。
+  > [!NOTE]
+  > 虽然此元数据条目未被标准化，但是，由于此条目在事实上处于支配地位，大多数移动浏览器都遵守此条目的声明。
   >
   > - 不同设备和浏览器的默认值可能有不同。
   > - 若想了解 Firefox 移动版对此声明的支持和处理，请参考[这篇文章](/zh-CN/docs/Mobile/Viewport_meta_tag)。
@@ -108,7 +111,8 @@ The [WHATWG Wiki MetaExtensions page](https://wiki.whatwg.org/wiki/MetaExtension
   | `noimageindex` | Requests this page not to appear as the referring page of an indexed image. | [Google](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag)                                                                                                                                                                    |
   | `nocache`      | `noarchive` 的替代名称。                                                    | [Bing](https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240)                                                                                                                                                          |
 
-  > **备注：** 只有正规的爬虫/协作搜寻器/机器人遵守这些规则。不要指望爬取电子邮件地址的恶意爬虫也这么做。
+  > [!NOTE]
+  > 只有正规的爬虫/协作搜寻器/机器人遵守这些规则。不要指望爬取电子邮件地址的恶意爬虫也这么做。
   >
   > - 只有访问相应的页面之后，机器人才能读取到这些规则。为避免这一点带来的带宽消耗，可以在 _{{Glossary("robots.txt")}}_ 文件中声明一些规则。
   > - 如果你想从机器人的索引中移除某个页面，`noindex` 可以做到这一点，但机器人还是得先访问那个页面，读取到 `noindex` 规则。遇到这种情况时，请确保 `robots.txt` 文件没有阻止机器人重新访问那个页面。
diff --git a/files/zh-cn/web/html/element/meter/index.md b/files/zh-cn/web/html/element/meter/index.md
index 95311845b0ee0e..6e2edfceb038f3 100644
--- a/files/zh-cn/web/html/element/meter/index.md
+++ b/files/zh-cn/web/html/element/meter/index.md
@@ -1,65 +1,39 @@
 ---
-title: <meter>
+title: <meter>：HTML 标量元素
 slug: Web/HTML/Element/meter
+l10n:
+  sourceCommit: 9c09b183a5ce844a75c2f22e909d03f71ca329fc
 ---
 
 {{HTMLSidebar}}
 
-HTML **`<meter>`** 元素用来显示已知范围的标量值或者分数值。
+**`<meter>`** [HTML](/zh-CN/docs/Web/HTML) 元素表示在已知范围内的标量值或分数值。
 
 {{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/zh-CN/docs/HTML/Content_categories">Content categories</a></th>
-   <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, labelable content, palpable content.</td>
-  </tr>
-  <tr>
-   <th scope="row">Permitted content</th>
-   <td><a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code>&lt;meter&gt;</code> element among its descendants.</td>
-  </tr>
-  <tr>
-   <th scope="row">标签省略</th>
-   <td>不允许，开始标签和结束标签都不能省略。</td>
-  </tr>
-  <tr>
-   <th scope="row">Permitted parents</th>
-   <td>Any element that accepts <a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Permitted ARIA roles</th>
-   <td>None</td>
-  </tr>
-  <tr>
-   <th scope="row">DOM interface</th>
-   <td>{{domxref("HTMLMeterElement")}}</td>
-  </tr>
- </tbody>
-</table>
-
 ## 属性
 
-该元素包含所有的[全局属性](/zh-CN/docs/HTML/Global_attributes).
+此元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
 
 - `value`
 
-  - : 当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0。如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。
+  - : 当前数值。如果指定了最小值和最大值（`min` 属性和 `max` 属性），则必须介于这两个值之间。如果未指定或格式错误，则值为 `0`。如果指定的值不在 `min` 属性和 `max` 属性给定的范围内，则该值等于范围的最近端。
 
-    > **备注：** 除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1。
+    > [!NOTE]
+    > 除非 `value` 属性介于 `0` 和 `1` 之间（包括 0 和 1），否则 `min` 和 `max` 属性应定义范围，以便 `value` 属性的值在该范围内。
 
-- `min`
-  - : 值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。
-- `max`
-  - : 值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。
+- [`min`](/zh-CN/docs/Web/HTML/Attributes/min)
+  - : 测量范围的下限。如果指定，该值必须小于最大值（`max` 属性）。如果未指定，则最小值为 `0`。
+- [`max`](/zh-CN/docs/Web/HTML/Attributes/max)
+  - : 测量范围的上限。如果指定，该值必须大于最小值（`min` 属性）。如果未指定，则最大值为 `1`。
 - `low`
-  - : 定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 \[min,low]、\[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。
+  - : 测量范围低档部分的数值上限。该值必须大于最小值（`min` 属性），如果指定了高档值和最大值（分别为 `high` 属性和 `max` 属性），也必须小于高档值和最大值。如果未指定或小于最小值，`low` 值等于最小值。
 - `high`
-  - : 定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
+  - : 测量范围高档部分的数值下限。该值必须小于最大值（`max` 属性），且必须大于低档值（`low` 属性）和最小值（`min` 属性），如果未指定或大于最大值，则 `high` 值等于最大值。
 - `optimum`
-  - : 这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。
+  - : 该属性表示最佳数值。必须在 `min` 属性和 `max` 属性定义的范围内。当与 `low` 属性和 `high` 属性一起使用时，它表示范围内哪个位置更合适。例如，如果值介于 `min` 属性和 `low` 属性之间，则认为首选低档范围的。浏览器可能会根据值是否小于或等于最佳值来为仪表条附着不同的颜色。
 - `form`
-  - : 该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。
+  - : 此可选属性用于显式设置 `<meter>` 元素的 {{HTMLElement("form")}} 所有者。如果省略，则 `<meter>` 元素将与其 `<form>` 父元素关联，或者与另一个父元素（例如 {{HTMLElement("fieldset")}}）上的 `form` 属性所设置的表单相关联（如果有的话）。如果包含，则该值必须是同一文档树中的 `<form>` 元素的 [`id`](/zh-CN/docs/Web/HTML/Global_attributes/id)。
 
 ## 示例
 
@@ -68,38 +42,88 @@ HTML **`<meter>`** 元素用来显示已知范围的标量值或者分数值。
 #### HTML
 
 ```html
-<p>
-  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
-</p>
+<p>电池电量：<meter min="0" max="100" value="75">75%</meter></p>
 ```
 
 #### 结果
 
 {{EmbedLiveSample("简单示例", 300, 60)}}
 
-在 Google Chrome 浏览器上，计量器结果如下：
+### 高档和低档范围示例
 
-![current look of 'meter' in Google Chrome](screen_shot_2020-10-12_at_10.10.53_pm.png)
-
-### 高低值区间示例
-
-注意本例中 min 属性被省略，这是允许的，默认值为 0。
+请注意，在此示例中省略了 [`min`](#min) 属性。这是允许的，因为它的默认值为 `0`。
 
 #### HTML
 
 ```html
 <p>
-  He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
+  学生的考试成绩：<meter min="0" low="50" high="80" max="100" value="84">
+    84%
+  </meter>
 </p>
 ```
 
 #### 结果
 
-{{EmbedLiveSample("高低值区间示例", 300, 60)}}
+{{EmbedLiveSample("高档和低档范围示例", 300, 60)}}
 
-Google Chrome 浏览器中，计量器显示效果如下：
+## 技术概要
 
-![red meter in Google Chrome](screen_shot_2020-10-12_at_10.11.52_pm.png)
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/zh-CN/docs/Web/HTML/Content_categories"
+          >内容分类</a
+        >
+      </th>
+      <td>
+        <a href="/zh-CN/docs/Web/HTML/Content_categories#流式内容"
+          >流式内容</a
+        >、<a href="/zh-CN/docs/Web/HTML/Content_categories#短语内容"
+          >短语内容</a
+        >、可标记内容、可感知内容。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允许的内容</th>
+      <td>
+        <a href="/zh-CN/docs/Web/HTML/Content_categories#短语内容"
+          >短语内容</a
+        >，但它的后代元素中不能有 <code>&#x3C;meter></code> 元素。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">标签省略</th>
+      <td>不允许，开始标签和结束标签都不能省略。</td>
+    </tr>
+    <tr>
+      <th scope="row">允许的父元素</th>
+      <td>
+        任何接受<a href="/zh-CN/docs/Web/HTML/Content_categories#短语内容"
+          >短语内容</a
+        >的元素。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">隐含的 ARIA 角色</th>
+      <td>
+        <code
+          ><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles#结构角色与_HTML_的对应关系">meter</a
+          ></code
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允许的 ARIA 角色</th>
+      <td>没有允许的 <code>role</code></td>
+    </tr>
+    <tr>
+      <th scope="row">DOM 接口</th>
+      <td>{{domxref("HTMLMeterElement")}}</td>
+    </tr>
+  </tbody>
+</table>
 
 ## 规范
 
@@ -111,4 +135,6 @@ Google Chrome 浏览器中，计量器显示效果如下：
 
 ## 参见
 
+- [创建垂直表单控件](/zh-CN/docs/Web/CSS/CSS_writing_modes/Vertical_controls)
 - {{HTMLElement("progress")}}
+- {{cssxref("::-webkit-meter-bar")}}、{{cssxref("::-webkit-meter-inner-element") }}、{{cssxref("::-webkit-meter-even-less-good-value")}}、{{cssxref("::-webkit-meter-optimum-value")}}、{{cssxref("::-webkit-meter-suboptimum-value")}}：非标准的伪元素
diff --git a/files/zh-cn/web/html/element/noembed/index.md b/files/zh-cn/web/html/element/noembed/index.md
index 51d53e5bafead3..66534378493c71 100644
--- a/files/zh-cn/web/html/element/noembed/index.md
+++ b/files/zh-cn/web/html/element/noembed/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Element/noembed
 
 **`<noembed>`** 元素是个废除的和不标准的方式，用于向不支持 {{HTMLElement("embed")}} ，或者不支持作者希望的 [嵌入式内容](/zh-CN/docs/Web/Guide/HTML/Content_categories#Embedded_content) 的浏览器提供替代（或者“后备”）内容。这个元素在 HTML 4.01 起废除，以支持 {{HTMLElement("object")}}。后备内容应该插在 {{HTMLElement("object")}} 的开始和结束标签之间。
 
-> **备注：** 虽然这个元素仍旧在许多浏览器中有效，它已经废除了，并且不应使用。使用 {{HTMLElement("object")}} 来代替。
+> [!NOTE]
+> 虽然这个元素仍旧在许多浏览器中有效，它已经废除了，并且不应使用。使用 {{HTMLElement("object")}} 来代替。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/element/noframes/index.md b/files/zh-cn/web/html/element/noframes/index.md
index 5069ec4dda8aac..4b26ac2710ff2a 100644
--- a/files/zh-cn/web/html/element/noframes/index.md
+++ b/files/zh-cn/web/html/element/noframes/index.md
@@ -11,7 +11,8 @@ slug: Web/HTML/Element/noframes
 
 你可以在 `<noframes>` 中使用任何 HTML 元素，它预期可以在 {{HTMLElement("body")}} 中看到，除了 {{HTMLElement("frameset")}} 和 {{HTMLElement("frame")}} 元素。
 
-> **备注：** 由于所有主流浏览器都支持帧，这个元素一般不需要使用。它也在 HTML5 中完全过时，并且应该避免使用，来遵循标准。
+> [!NOTE]
+> 由于所有主流浏览器都支持帧，这个元素一般不需要使用。它也在 HTML5 中完全过时，并且应该避免使用，来遵循标准。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/ol/index.md b/files/zh-cn/web/html/element/ol/index.md
index 3a371a2d8005c4..59b14efde300a5 100644
--- a/files/zh-cn/web/html/element/ol/index.md
+++ b/files/zh-cn/web/html/element/ol/index.md
@@ -52,7 +52,8 @@ slug: Web/HTML/Element/ol
 
   - : 一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 `type` 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始，都应当使用 `start="4"`。
 
-    > **备注：** 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。
+    > [!NOTE]
+    > 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。
 
 - `type`
 
@@ -64,7 +65,8 @@ slug: Web/HTML/Element/ol
     - `I` 表示大写罗马数字编号
     - `1` 表示数字编号（默认）编号类型适用于整个列表，除非在 `<ol>` 元素的 {{HTMLElement("li")}} 元素中使用不同的 [`type`](/zh-CN/docs/Web/HTML/Element/li#type) 属性。
 
-    > **备注：** 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS {{cssxref("list-style-type")}} 属性替代。
+    > [!NOTE]
+    > 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS {{cssxref("list-style-type")}} 属性替代。
 
 ## 使用说明
 
@@ -80,7 +82,8 @@ slug: Web/HTML/Element/ol
 
 至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 {{HTMLElement("ol")}} 元素，否则使用 {{HTMLElement("ul")}} 更合适。
 
-> **备注：** “更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。
+> [!NOTE]
+> “更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。
 > 如果只有一个元素，以至于根本不存在什么顺序可言，可能最好先考虑是否应当使用列表元素，以及是否要在列表最后增加一些占位的空项。
 
 ## 示例
diff --git a/files/zh-cn/web/html/element/optgroup/index.md b/files/zh-cn/web/html/element/optgroup/index.md
index cf5840f69b7f79..b86ca9fbfd174e 100644
--- a/files/zh-cn/web/html/element/optgroup/index.md
+++ b/files/zh-cn/web/html/element/optgroup/index.md
@@ -42,7 +42,8 @@ slug: Web/HTML/Element/optgroup
  </tbody>
 </table>
 
-> **备注：** Optgroup elements may not be nested.
+> [!NOTE]
+> Optgroup elements may not be nested.
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/param/index.md b/files/zh-cn/web/html/element/param/index.md
index 949afe9c44740b..332a226ec2c0a0 100644
--- a/files/zh-cn/web/html/element/param/index.md
+++ b/files/zh-cn/web/html/element/param/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<param>`** [HTML](/zh-CN/docs/Web/HTML) 元素为 {{HTMLElement("object")}} 元素定义形式参数。
 
-> **备注：** 使用带有 [`data`](/zh-CN/docs/Web/HTML/Element/object#data) 属性的 {{HTMLElement("object")}} 元素来设置外部资源的 URL。
+> [!NOTE]
+> 使用带有 [`data`](/zh-CN/docs/Web/HTML/Element/object#data) 属性的 {{HTMLElement("object")}} 元素来设置外部资源的 URL。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/picture/index.md b/files/zh-cn/web/html/element/picture/index.md
index 4b6a563fc62030..4e4c6c96f70c12 100644
--- a/files/zh-cn/web/html/element/picture/index.md
+++ b/files/zh-cn/web/html/element/picture/index.md
@@ -21,7 +21,8 @@ slug: Web/HTML/Element/picture
 - **艺术指导**（Art direction）。针对不同 `media` 条件裁剪或修改图像（例如，在较小的显示器或图像的详细内容太多时显示较为图像的简单版本）。
 - 遇到不支持的特定格式时，**提供替代的图像格式**。
 
-  > **备注：** 例如，像 [AVIF](/zh-CN/docs/Web/Media/Formats/Image_types#avif_图像) 或 [WEBP](/zh-CN/docs/Web/Media/Formats/Image_types#webp_图像) 这样的新格式具有诸多优点，但可能不受浏览器的支持。可以在[图像文件格式和格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)中找到支持的图像格式的列表。
+  > [!NOTE]
+  > 例如，像 [AVIF](/zh-CN/docs/Web/Media/Formats/Image_types#avif_图像) 或 [WEBP](/zh-CN/docs/Web/Media/Formats/Image_types#webp_图像) 这样的新格式具有诸多优点，但可能不受浏览器的支持。可以在[图像文件格式和格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)中找到支持的图像格式的列表。
 
 - 通过加载最适合观看者显示的图像来**节省带宽和提高页面加载速度**。
 
@@ -64,7 +65,8 @@ slug: Web/HTML/Element/picture
 
 你可以使用 {{cssxref("object-position")}} 属性调整元素框架内图像的位置，用 {{cssxref("object-fit")}} 属性控制图片如何调整大小来适应框架。
 
-> **备注：** 在子 `<img>` 元素上使用这些属性，不是 `<picture>` 元素。
+> [!NOTE]
+> 在子 `<img>` 元素上使用这些属性，不是 `<picture>` 元素。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/plaintext/index.md b/files/zh-cn/web/html/element/plaintext/index.md
index 68d9e8f872beaa..a71aef17aa4822 100644
--- a/files/zh-cn/web/html/element/plaintext/index.md
+++ b/files/zh-cn/web/html/element/plaintext/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element/plaintext
 
 _HTML 纯文本元素_ (`<plaintext>`) 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。
 
-> **备注：** 不要使用这个元素。
+> [!NOTE]
+> 不要使用这个元素。
 >
 > - 它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。此外，它在 HTML5 中已过时；仍然接受它的浏览器，可能将其看做 {{HTMLElement("pre")}} 元素，它仍然会解释其中的 HTML，即使这不是你想要的结果。
 > - 如果 {{HTMLElement("plaintext")}} 元素是页面的第一个元素（除了任何不显示的元素），那就不要使用 HTML 了。配置你的服务器，使用 `text/plain` [MIME-type](/zh-CN/docs/Properly_Configuring_Server_MIME_Types) 来发送你的页面。
@@ -24,7 +25,8 @@ _HTML 纯文本元素_ (`<plaintext>`) 将起始标签后面的任何东西渲
 
 元素实现了 {{domxref('HTMLElement')}} 接口。
 
-> **备注：** 直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。
+> [!NOTE]
+> 直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。
 
 ## 参见
 
diff --git a/files/zh-cn/web/html/element/pre/index.md b/files/zh-cn/web/html/element/pre/index.md
index 052b5e0e0f1e6e..5b82ca7b7e12c6 100644
--- a/files/zh-cn/web/html/element/pre/index.md
+++ b/files/zh-cn/web/html/element/pre/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Element/pre
 
 {{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
 
-> **备注：** 你需要将该元素里的 '<' 字符转义为 '\&lt;' 以保证代码里的关闭代码不被浏览器解释为标签。
+> [!NOTE]
+> 你需要将该元素里的 '<' 字符转义为 '\&lt;' 以保证代码里的关闭代码不被浏览器解释为标签。
 
 <table class="properties">
  <tbody>
diff --git a/files/zh-cn/web/html/element/progress/index.md b/files/zh-cn/web/html/element/progress/index.md
index 134ec126dc0274..38d2069a76b4a9 100644
--- a/files/zh-cn/web/html/element/progress/index.md
+++ b/files/zh-cn/web/html/element/progress/index.md
@@ -75,7 +75,8 @@ slug: Web/HTML/Element/progress
 - `value`
   - : 该属性用来指定该进度条已完成的工作量。如果没有`value 属性`,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).
 
-> **备注：** 你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条。
+> [!NOTE]
+> 你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条。
 
 ## DOM 接口
 
diff --git a/files/zh-cn/web/html/element/q/index.md b/files/zh-cn/web/html/element/q/index.md
index 8d6e3739f0ac11..d41619ab960ae1 100644
--- a/files/zh-cn/web/html/element/q/index.md
+++ b/files/zh-cn/web/html/element/q/index.md
@@ -32,7 +32,8 @@ _HTML 引用标签_ (**\<q>**) 表示一个封闭的并且是短的行内引用
  </tbody>
 </table>
 
-> **备注：** 大多数现代浏览器，会为 \<q> 文本添加引号。旧浏览器可能需要使用 CSS 添加引号。IE、Edge 与 Firefox、Chrome 引号样式略有不同。
+> [!NOTE]
+> 大多数现代浏览器，会为 \<q> 文本添加引号。旧浏览器可能需要使用 CSS 添加引号。IE、Edge 与 Firefox、Chrome 引号样式略有不同。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/rb/index.md b/files/zh-cn/web/html/element/rb/index.md
index 14a341bbbaf415..d0c495aa77d970 100644
--- a/files/zh-cn/web/html/element/rb/index.md
+++ b/files/zh-cn/web/html/element/rb/index.md
@@ -92,7 +92,8 @@ body {
 
 {{EmbedLiveSample("不支持 ruby", "100%", 60)}}
 
-> **备注：** 有关更多示例，请参阅有关{{HTMLElement("ruby")}}元素的文章。
+> [!NOTE]
+> 有关更多示例，请参阅有关{{HTMLElement("ruby")}}元素的文章。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/element/s/index.md b/files/zh-cn/web/html/element/s/index.md
index a03a4e2b242b69..38cb3f5e3b54fd 100644
--- a/files/zh-cn/web/html/element/s/index.md
+++ b/files/zh-cn/web/html/element/s/index.md
@@ -40,7 +40,8 @@ slug: Web/HTML/Element/s
 
 这个元素仅仅包含 [全局属性](/zh-CN/docs/HTML/Global_attributes)
 
-> **备注：** 直到 Gecko1.9.2（包含），Firefox 为这个元素实现了 `HTMLSpanElement` 接口。
+> [!NOTE]
+> 直到 Gecko1.9.2（包含），Firefox 为这个元素实现了 `HTMLSpanElement` 接口。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/samp/index.md b/files/zh-cn/web/html/element/samp/index.md
index dea8f37f482b0d..38c8d1dc0a7878 100644
--- a/files/zh-cn/web/html/element/samp/index.md
+++ b/files/zh-cn/web/html/element/samp/index.md
@@ -40,7 +40,8 @@ slug: Web/HTML/Element/samp
 
 该元素实现了 [`HTMLElement`](/zh-CN/DOM/element) 接口。
 
-> **备注：** 基于 Gecko 1.9.2 及以上，Firefox 还为该元素实现了[HTMLSpanElement](/zh-CN/DOM/span) 接口。
+> [!NOTE]
+> 基于 Gecko 1.9.2 及以上，Firefox 还为该元素实现了[HTMLSpanElement](/zh-CN/DOM/span) 接口。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/script/index.md b/files/zh-cn/web/html/element/script/index.md
index e29870848ee955..a16749a16132c6 100644
--- a/files/zh-cn/web/html/element/script/index.md
+++ b/files/zh-cn/web/html/element/script/index.md
@@ -68,7 +68,8 @@ slug: Web/HTML/Element/script
 
     包含 `defer` 属性的脚本将阻塞 `DOMContentLoaded` 事件触发，直到脚本完成加载并执行。
 
-    > **警告：** 本属性不应在缺少 `src` 属性的情况下使用（也就是内联脚本的情况下），这种情况下将不会生效。
+    > [!WARNING]
+    > 本属性不应在缺少 `src` 属性的情况下使用（也就是内联脚本的情况下），这种情况下将不会生效。
     >
     > `defer` 属性对[模块脚本](/zh-CN/docs/Web/JavaScript/Guide/Modules)也不会生效——它们默认是 defer 的。
 
diff --git a/files/zh-cn/web/html/element/search/index.md b/files/zh-cn/web/html/element/search/index.md
index d374ecf4d30dcf..aec22eac047149 100644
--- a/files/zh-cn/web/html/element/search/index.md
+++ b/files/zh-cn/web/html/element/search/index.md
@@ -79,7 +79,8 @@ l10n:
 
 {{EmbedLiveSample('Web 应用搜索')}}
 
-> **备注：** 请记住，有些用户没有 JavaScript，而在 JavaScript 成功下载、解析和执行之前，你的用户都不会运行 JavaScript，因此请确保你的用户在禁用 JavaScript 的情况下也能访问网站内容。
+> [!NOTE]
+> 请记住，有些用户没有 JavaScript，而在 JavaScript 成功下载、解析和执行之前，你的用户都不会运行 JavaScript，因此请确保你的用户在禁用 JavaScript 的情况下也能访问网站内容。
 
 ### 多重搜索
 
diff --git a/files/zh-cn/web/html/element/select/index.md b/files/zh-cn/web/html/element/select/index.md
index 1512718986cf7c..bcdf3c4fea2b21 100644
--- a/files/zh-cn/web/html/element/select/index.md
+++ b/files/zh-cn/web/html/element/select/index.md
@@ -41,7 +41,8 @@ slug: Web/HTML/Element/select
 - `size`
   - : 如果控件显示为滚动列表框（如声明了 `multiple`），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。
 
-> **备注：** 根据 HTML5 规范，默认值应该为 1；但是，在实践中，这样会影响到一些网站，同时其他浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。
+> [!NOTE]
+> 根据 HTML5 规范，默认值应该为 1；但是，在实践中，这样会影响到一些网站，同时其他浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。
 
 ## 使用笔记
 
@@ -51,7 +52,8 @@ slug: Web/HTML/Element/select
 
 鼠标用户可以按住 <kbd>Ctrl</kbd>, <kbd>Command</kbd>, 或 <kbd>Shift</kbd> 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。
 
-> **警告：** 以下所述的通过键盘选择多个不连续选项的方法目前只在 Firefox 有效（译者注：Chrome 81 也已支持）。**另请注意**：在 macOS 中， <kbd>Ctrl</kbd> + <kbd>Up</kbd> 和 <kbd>Ctrl</kbd> + <kbd>Down</kbd> 组合键会与系统默认用于任务管理和应用窗口的组合键冲突。所以如果要使用这些组合键，你需要关掉系统默认的组合键。
+> [!WARNING]
+> 以下所述的通过键盘选择多个不连续选项的方法目前只在 Firefox 有效（译者注：Chrome 81 也已支持）。**另请注意**：在 macOS 中， <kbd>Ctrl</kbd> + <kbd>Up</kbd> 和 <kbd>Ctrl</kbd> + <kbd>Down</kbd> 组合键会与系统默认用于任务管理和应用窗口的组合键冲突。所以如果要使用这些组合键，你需要关掉系统默认的组合键。
 
 键盘用户可以这样选中多个连续的选项：
 
diff --git a/files/zh-cn/web/html/element/slot/index.md b/files/zh-cn/web/html/element/slot/index.md
index 2e1f061eb98394..ca55835c160b48 100644
--- a/files/zh-cn/web/html/element/slot/index.md
+++ b/files/zh-cn/web/html/element/slot/index.md
@@ -65,7 +65,8 @@ l10n:
 </template>
 ```
 
-> **备注：** 你可以在 [element-details](https://github.com/mdn/web-components-examples/tree/main/element-details)（参见[在线演示](https://mdn.github.io/web-components-examples/element-details/)）查看完整示例。此外，你还可以在[使用模板和插槽](/zh-CN/docs/Web/API/Web_components/Using_templates_and_slots)找到相关解释。
+> [!NOTE]
+> 你可以在 [element-details](https://github.com/mdn/web-components-examples/tree/main/element-details)（参见[在线演示](https://mdn.github.io/web-components-examples/element-details/)）查看完整示例。此外，你还可以在[使用模板和插槽](/zh-CN/docs/Web/API/Web_components/Using_templates_and_slots)找到相关解释。
 
 ## 技术概要
 
diff --git a/files/zh-cn/web/html/element/strike/index.md b/files/zh-cn/web/html/element/strike/index.md
index 836578cbec076d..8ae6cb327c7773 100644
--- a/files/zh-cn/web/html/element/strike/index.md
+++ b/files/zh-cn/web/html/element/strike/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<strike>`** [HTML](/zh-CN/docs/Web/HTML) 元素在文本上添加删除线（水平线）。
 
-> **警告：** 该元素在 HTML 4 和 XHTML 1 中已被弃用，并且在 [HTML 动态标准](https://html.spec.whatwg.org/multipage/obsolete.html#strike)被弃用。如果语义合适，即表示*已删除*的内容，请使用 {{HTMLElement("del")}} 来代替。在所有其他情况下，请使用 {{HTMLElement("s")}}。
+> [!WARNING]
+> 该元素在 HTML 4 和 XHTML 1 中已被弃用，并且在 [HTML 动态标准](https://html.spec.whatwg.org/multipage/obsolete.html#strike)被弃用。如果语义合适，即表示*已删除*的内容，请使用 {{HTMLElement("del")}} 来代替。在所有其他情况下，请使用 {{HTMLElement("s")}}。
 
 ## 属性
 
diff --git a/files/zh-cn/web/html/element/strong/index.md b/files/zh-cn/web/html/element/strong/index.md
index c300e7a7ef1735..68fd3f08da3381 100644
--- a/files/zh-cn/web/html/element/strong/index.md
+++ b/files/zh-cn/web/html/element/strong/index.md
@@ -42,7 +42,8 @@ Strong 元素 (`<strong>`) 表示文本十分重要，一般用粗体显示。
 
 实现了 `HTMLElement` 接口。
 
-> **备注：** 实现注意事项**:** 一直到 Gecko 1.9.2 (含), Firefox 对这个元素实现了 [`HTMLSpanElement`](/zh-CN/docs/DOM/span) 接口
+> [!NOTE]
+> 实现注意事项**:** 一直到 Gecko 1.9.2 (含), Firefox 对这个元素实现了 [`HTMLSpanElement`](/zh-CN/docs/DOM/span) 接口
 
 ## 举例
 
diff --git a/files/zh-cn/web/html/element/summary/index.md b/files/zh-cn/web/html/element/summary/index.md
index 969bae02784538..2dca1a6d5b1dca 100644
--- a/files/zh-cn/web/html/element/summary/index.md
+++ b/files/zh-cn/web/html/element/summary/index.md
@@ -77,7 +77,8 @@ slug: Web/HTML/Element/summary
 
 目前这有一些间距问题，可以用 CSS 解决。
 
-> **警告：** 因为 `<summary>` 元素的默认角色是 [button](/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role)（它将所有角色从子元素中剥离），这个例子对于使用辅助技术的用户来说是不可行的，例如屏幕阅读器。`<h4>` 的角色将被删除，因此对这些用户来说，不会被视为标题。
+> [!WARNING]
+> 因为 `<summary>` 元素的默认角色是 [button](/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role)（它将所有角色从子元素中剥离），这个例子对于使用辅助技术的用户来说是不可行的，例如屏幕阅读器。`<h4>` 的角色将被删除，因此对这些用户来说，不会被视为标题。
 
 ### summary 元素中的 HTML
 
diff --git a/files/zh-cn/web/html/element/table/index.md b/files/zh-cn/web/html/element/table/index.md
index 275d4cdb8b5c92..a8e906ee82c0a3 100644
--- a/files/zh-cn/web/html/element/table/index.md
+++ b/files/zh-cn/web/html/element/table/index.md
@@ -310,7 +310,8 @@ document
 
 下面的示例给 `document` 中每个 `<table>` 的每个 `<th>` 元素添加了一个事件处理程序；它对所有 `<tbody>` 的行进行排序，排序的基础是行中包含的 `td` 单元格。
 
-> **备注：** 这个解决方案假设 `<td>` 元素是由原始文本填充的，没有子元素。
+> [!NOTE]
+> 这个解决方案假设 `<td>` 元素是由原始文本填充的，没有子元素。
 
 ##### HTML
 
diff --git a/files/zh-cn/web/html/element/textarea/index.md b/files/zh-cn/web/html/element/textarea/index.md
index 8348769dba753e..f1249b3b55f9a3 100644
--- a/files/zh-cn/web/html/element/textarea/index.md
+++ b/files/zh-cn/web/html/element/textarea/index.md
@@ -68,7 +68,8 @@ l10n:
 
   - : 对用户关于可在该控件中输入内容的提示。在占位符文本内部的回车或换行符在渲染提示时必须被视为换行处理。
 
-    > **备注：** 占位符仅应用于显示应输入到表单中的数据类型示例；它们*不能*替代与输入字段关联的正确 {{HTMLElement("label")}} 元素。有关详细说明，请参阅 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#labels)。
+    > [!NOTE]
+    > 占位符仅应用于显示应输入到表单中的数据类型示例；它们*不能*替代与输入字段关联的正确 {{HTMLElement("label")}} 元素。有关详细说明，请参阅 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#labels)。
 
 - `readonly`
   - : 此布尔属性表示用户无法修改该控件的值。与 `disabled` 属性不同，`readonly` 属性不会阻止用户点击或选择该控件。只读控件的值仍随表单一起提交。
@@ -195,7 +196,8 @@ textarea {
 
 {{EmbedLiveSample('使用“占位符”示例')}}
 
-> **备注：** 占位符仅用于显示应输入表单的数据类型；它们不能替代与输入相关的正确 {{HTMLElement("label")}} 元素。请参阅 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#labels)了解完整说明。
+> [!NOTE]
+> 占位符仅用于显示应输入表单的数据类型；它们不能替代与输入相关的正确 {{HTMLElement("label")}} 元素。请参阅 [`<input>` 标签](/zh-CN/docs/Web/HTML/Element/input#labels)了解完整说明。
 
 ### 禁用和只读文本区
 
diff --git a/files/zh-cn/web/html/element/tfoot/index.md b/files/zh-cn/web/html/element/tfoot/index.md
index 339993dc1c58c4..92b9f35c0ae56b 100644
--- a/files/zh-cn/web/html/element/tfoot/index.md
+++ b/files/zh-cn/web/html/element/tfoot/index.md
@@ -49,7 +49,8 @@ HTML 元素 **`<tfoot>`** 定义了一组表格中各列的汇总行。
     - `justify`，插入空白调整单元格中的文本内容（译者注：即两端对齐）
     - `char`，将文本内容与一个具有最小偏移量的特定字符对齐，字符和偏移量分别由[`char`](/zh-CN/docs/Web/HTML/Element/tbody#char) 和 [`charoff`](/zh-CN/docs/Web/HTML/Element/tbody#charoff) 属性定义。若此值未设置，则假定为 `left`。
 
-    > **备注：** 此属性在最新标准中已被废弃（不支持），所以请勿使用。
+    > [!NOTE]
+    > 此属性在最新标准中已被废弃（不支持），所以请勿使用。
     >
     > - 为达到与`left`, `center`, `right`或`justify`相同的效果，请使用 CSS {{cssxref("text-align")}}属性。
     > - 为达到与 char 值相同的效果，在 CSS3 中可将 [`char`](/zh-CN/docs/Web/HTML/Element/tfoot#char) 的值用作 {{cssxref("text-align")}} 的属性值。
@@ -58,19 +59,22 @@ HTML 元素 **`<tfoot>`** 定义了一组表格中各列的汇总行。
 
   - : 此属性定义了列内单元格的背景色。定义此属性使用'#'作为前缀，其后是定义于[sRGB](https://www.w3.org/Graphics/Color/sRGB)的 6 位十六进制码。也可使用 16 种预定义的色彩字符串之一。
 
-    > **备注：** 请勿使用此属性，因为这并非标准，且只有某些特定版本的 Microsoft Internet Explorer（IE 浏览器）支持：{{HTMLElement("tfoot")}}元素应使用[CSS](/zh-CN/docs/Web/CSS)设计。若想得到与**bgcolor**属性相似的效果，可在相关的 {{HTMLElement("td")}}或{{HTMLElement("th")}}元素中使用[CSS](/zh-CN/docs/Web/CSS) {{cssxref("background-color")}}属性。
+    > [!NOTE]
+    > 请勿使用此属性，因为这并非标准，且只有某些特定版本的 Microsoft Internet Explorer（IE 浏览器）支持：{{HTMLElement("tfoot")}}元素应使用[CSS](/zh-CN/docs/Web/CSS)设计。若想得到与**bgcolor**属性相似的效果，可在相关的 {{HTMLElement("td")}}或{{HTMLElement("th")}}元素中使用[CSS](/zh-CN/docs/Web/CSS) {{cssxref("background-color")}}属性。
 
 - `char` {{Deprecated_inline}}
 
   - : 此属性设置单元格对齐的基准字符。当对齐数字或货币值时，一个典型值会带有一个句点 (.)。如果[`align`](/zh-CN/docs/Web/HTML/Element/tfoot#align)未设置为`char`，此属性将被忽略。
 
-    > **备注：** 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。想要达到与[`char`](/zh-CN/docs/Web/HTML/Element/tbtfootody#char)相同的效果，在 CSS3 中，可将{{cssxref("text-align")}}属性设置为[`char`](/zh-CN/docs/Web/HTML/Element/tfoot#char)的属性值。
+    > [!NOTE]
+    > 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。想要达到与[`char`](/zh-CN/docs/Web/HTML/Element/tbtfootody#char)相同的效果，在 CSS3 中，可将{{cssxref("text-align")}}属性设置为[`char`](/zh-CN/docs/Web/HTML/Element/tfoot#char)的属性值。
 
 - `charoff` {{Deprecated_inline}}
 
   - : 此属性用作表明列内数据对于对齐基准字符的偏移字符数，对其基准字符由`char`属性指定。
 
-    > **备注：** 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。
+    > [!NOTE]
+    > 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。
 
 - `valign` {{Deprecated_inline}}
 
@@ -81,7 +85,8 @@ HTML 元素 **`<tfoot>`** 定义了一组表格中各列的汇总行。
     - `middle`，设置文本居中对齐；
     - and `top`，设置文本向上对齐。
 
-    > **备注：** 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）：使用 CSS 属性{{cssxref("vertical-align")}}作为替代。
+    > [!NOTE]
+    > 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）：使用 CSS 属性{{cssxref("vertical-align")}}作为替代。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/th/index.md b/files/zh-cn/web/html/element/th/index.md
index 26caff5a019757..ae7c120a8dbc4e 100644
--- a/files/zh-cn/web/html/element/th/index.md
+++ b/files/zh-cn/web/html/element/th/index.md
@@ -61,7 +61,8 @@ slug: Web/HTML/Element/th
 
 ![演示表格单元的列和行跨越的插图：单元格 1、3 和 4 跨越两行；单元格 2 跨越两列；单元格 5 和 6 适配第二行第二列和第三列的可用单元格](column-row-span.png)
 
-> **备注：** 这些属性不能用于重叠单元格。
+> [!NOTE]
+> 这些属性不能用于重叠单元格。
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/thead/index.md b/files/zh-cn/web/html/element/thead/index.md
index 281ce04402daf3..d501c466adcbe0 100644
--- a/files/zh-cn/web/html/element/thead/index.md
+++ b/files/zh-cn/web/html/element/thead/index.md
@@ -50,7 +50,8 @@ This element includes the [global attributes](/zh-CN/docs/Web/HTML/Global_attrib
     - `justify`, inserting spaces into the textual content so that the content is justified in the cell
     - `char`, aligning the textual content on a special character with a minimal offset, defined by the [`char`](/zh-CN/docs/Web/HTML/Element/thead#char) and [`charoff`](/zh-CN/docs/Web/HTML/Element/thead#charoff) attributes. If this attribute is not set, the `left` value is assumed.
 
-    > **备注：** Do not use this attribute as it is obsolete (not supported) in the latest standard.
+    > [!NOTE]
+    > Do not use this attribute as it is obsolete (not supported) in the latest standard.
     >
     > - To achieve the same effect as the `left`, `center`, `right` or `justify` values, use the CSS {{ cssxref("text-align") }} property on it.
     > - To achieve the same effect as the `char` value, in CSS3, you can use the value of the [`char`](/zh-CN/docs/Web/HTML/Element/thead#char) as the value of the {{ cssxref("text-align") }} property.
@@ -59,19 +60,22 @@ This element includes the [global attributes](/zh-CN/docs/Web/HTML/Global_attrib
 
   - : This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in [sRGB](https://www.w3.org/Graphics/Color/sRGB), prefixed by a '#'. One of the sixteen predefined color strings may be used.
 
-    > **备注：** Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{ HTMLElement("thead") }} element should be styled using [CSS](/zh-CN/docs/CSS). To give a similar effect to the **bgcolor** attribute, use the [CSS](/zh-CN/docs/CSS) property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.
+    > [!NOTE]
+    > Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{ HTMLElement("thead") }} element should be styled using [CSS](/zh-CN/docs/CSS). To give a similar effect to the **bgcolor** attribute, use the [CSS](/zh-CN/docs/CSS) property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.
 
 - `char` {{Deprecated_Inline}}
 
   - : This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If [`align`](/zh-CN/docs/Web/HTML/Element/tr#align) is not set to `char`, this attribute is ignored.
 
-    > **备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the [`char`](/zh-CN/docs/Web/HTML/Element/thead#char), in CSS3, you can use the character set using the [`char`](/zh-CN/docs/Web/HTML/Element/thead#char) attribute as the value of the {{ cssxref("text-align") }} property.
+    > [!NOTE]
+    > Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the [`char`](/zh-CN/docs/Web/HTML/Element/thead#char), in CSS3, you can use the character set using the [`char`](/zh-CN/docs/Web/HTML/Element/thead#char) attribute as the value of the {{ cssxref("text-align") }} property.
 
 - `charoff` {{Deprecated_Inline}}
 
   - : This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the **char** attribute.
 
-    > **备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard.
+    > [!NOTE]
+    > Do not use this attribute as it is obsolete (and not supported) in the latest standard.
 
 - `valign` {{Deprecated_Inline}}
 
@@ -82,7 +86,8 @@ This element includes the [global attributes](/zh-CN/docs/Web/HTML/Global_attrib
     - `middle`, which will center the text in the cell;
     - `top`, which will put the text as close to the top of the cell as it is possible.
 
-    > **备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.
+    > [!NOTE]
+    > Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.
 
 ## 示例
 
diff --git a/files/zh-cn/web/html/element/tr/index.md b/files/zh-cn/web/html/element/tr/index.md
index 77980e711e0aea..92f385631e8460 100644
--- a/files/zh-cn/web/html/element/tr/index.md
+++ b/files/zh-cn/web/html/element/tr/index.md
@@ -288,7 +288,8 @@ td {
 
 {{domxref("HTMLDocument", "文档")}}中的每个 {{HTMLElement("table")}} 的每个表头（{{HTMLElement("th")}}元素）都添加了一个点击事件处理程序；它会根据行中包含的数据单元格（{{HTMLElement("td")}} 元素）的内容对 {{HTMLElement("tbody")}} 的所有行（`<tr>` 元素）进行排序。
 
-> **备注：** 此解决方案假设 {{HTMLElement("td")}} 元素由原始文本填充，没有后代元素。
+> [!NOTE]
+> 此解决方案假设 {{HTMLElement("td")}} 元素由原始文本填充，没有后代元素。
 
 ```js
 const allTables = document.querySelectorAll("table");
@@ -340,7 +341,8 @@ th {
 
 {{EmbedLiveSample('点击表头单元格以进行排序', '650', '100')}}
 
-> **备注：** 为了保证可用性和无障碍性，每个可排序列的标题单元格都必须可识别为排序按钮，并且每个标题单元格都必须以可视方式定义列当前是按升序还是降序排序，并使用 [`aria-sort`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性。更多信息请参阅 [ARIA 创作实践指南](https://www.w3.org/WAI/ARIA/apg/)的[可排序表格示例](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/)。
+> [!NOTE]
+> 为了保证可用性和无障碍性，每个可排序列的标题单元格都必须可识别为排序按钮，并且每个标题单元格都必须以可视方式定义列当前是按升序还是降序排序，并使用 [`aria-sort`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性。更多信息请参阅 [ARIA 创作实践指南](https://www.w3.org/WAI/ARIA/apg/)的[可排序表格示例](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/)。
 
 ## 技术概要
 
diff --git a/files/zh-cn/web/html/element/tt/index.md b/files/zh-cn/web/html/element/tt/index.md
index e85abb48e33dc9..d9ca77705c287c 100644
--- a/files/zh-cn/web/html/element/tt/index.md
+++ b/files/zh-cn/web/html/element/tt/index.md
@@ -13,7 +13,8 @@ l10n:
 
 然而，此元素已过时，对于需要以等宽类型呈现的行级文本，应使用更具语义化的 {{HTMLElement("code")}}、{{HTMLElement("kbd")}}、{{HTMLElement("samp")}} 或 {{HTMLElement("var")}} 元素，而对于应作为单个块呈现的内容，应使用 {{HTMLElement("pre")}} 标签。
 
-> **备注：** 如果上述语义元素均不符合你的应用场景（例如，你需要以非比例字体展示某些内容），可考虑使用 {{ HTMLElement("span") }} 元素，并通过 CSS 进行相应样式设置。{{cssxref("font-family")}} 属性是一个不错的起点。
+> [!NOTE]
+> 如果上述语义元素均不符合你的应用场景（例如，你需要以非比例字体展示某些内容），可考虑使用 {{ HTMLElement("span") }} 元素，并通过 CSS 进行相应样式设置。{{cssxref("font-family")}} 属性是一个不错的起点。
 
 ## 属性
 
@@ -67,7 +68,8 @@ tt {
 
 `<tt>` 元素默认使用浏览器的默认非比例字体。你可以通过创建使用 `tt` 选择器的规则来覆盖此设置，如上方示例[覆盖默认字体](#覆盖默认字体)所示。
 
-> **备注：** 用户对默认等宽字体设置所做的自定义更改可能优先于你的 CSS 样式。
+> [!NOTE]
+> 用户对默认等宽字体设置所做的自定义更改可能优先于你的 CSS 样式。
 
 尽管 HTML 4.01 并未正式废弃该元素，但还是不鼓励使用它（因为有语义化元素或 CSS）。`<tt>` 元素在 HTML 5 中已过时。
 
diff --git a/files/zh-cn/web/html/element/u/index.md b/files/zh-cn/web/html/element/u/index.md
index 5f986b3c0a9bee..5c001a4c0fbc8c 100644
--- a/files/zh-cn/web/html/element/u/index.md
+++ b/files/zh-cn/web/html/element/u/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<u>`** [HTML](/zh-CN/docs/Web/HTML) 元素表示行内文本拥有一个非文本形式的注释，该注释需要以某种方式渲染出来。默认情况下渲染为一个实线下划线，可以用 CSS 替换。
 
-> **警告：** 此元素以前在旧版本的 HTML 中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，你应该应用包含 CSS {{cssxref("text-decoration")}} 属性设置为 `underline` 的样式。
+> [!WARNING]
+> 此元素以前在旧版本的 HTML 中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，你应该应用包含 CSS {{cssxref("text-decoration")}} 属性设置为 `underline` 的样式。
 
 {{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}
 
@@ -23,7 +24,8 @@ l10n:
 
 就像所有纯样式元素那样，原本的下划线元素（`<u>`）在 HTML 4 中被废弃。但是 `<u>` 在 HTML 5 中被恢复，并被赋予了一个新的语义：将文本标记为应用了某种形式的非文本注释。
 
-> **备注：** 在可能和超链接混淆的地方，避免使用默认样式的 `<u>` 元素，它们都默认用下划线装饰。
+> [!NOTE]
+> 在可能和超链接混淆的地方，避免使用默认样式的 `<u>` 元素，它们都默认用下划线装饰。
 
 ### 使用场景
 
diff --git a/files/zh-cn/web/html/element/ul/index.md b/files/zh-cn/web/html/element/ul/index.md
index 5aaf8cdde29150..1136b02178fa66 100644
--- a/files/zh-cn/web/html/element/ul/index.md
+++ b/files/zh-cn/web/html/element/ul/index.md
@@ -19,7 +19,8 @@ l10n:
 
   - : 此布尔属性提示列表是否需要被渲染为更紧凑的样式。{{glossary("user agent", "用户代理")}}决定如何解释这个属性，且并非所有浏览器都支持它。
 
-    > **警告：** 请不要使用这个属性，它已经被弃用了：请使用 [CSS](/zh-CN/docs/Web/CSS) 来更改样式。如果想达到与 `compact` 属性相同的效果，将 CSS 属性 {{cssxref("line-height")}} 的值设为 `80%` 即可。
+    > [!WARNING]
+    > 请不要使用这个属性，它已经被弃用了：请使用 [CSS](/zh-CN/docs/Web/CSS) 来更改样式。如果想达到与 `compact` 属性相同的效果，将 CSS 属性 {{cssxref("line-height")}} 的值设为 `80%` 即可。
 
 - `type` {{Deprecated_inline}}
 
@@ -33,7 +34,8 @@ l10n:
 
     如果未设置此 HTML 属性且没有 [CSS](/zh-CN/docs/Web/CSS) {{ cssxref("list-style-type") }} 属性作用于这个元素，用户代理会决定使用哪种着重号样式，一般来说这也和嵌套的层级数有关。
 
-    > **警告：** 请不要使用这个属性，它已经被弃用了：请使用 [CSS](/zh-CN/docs/Web/CSS) {{ cssxref("list-style-type") }} 属性作为代替。
+    > [!WARNING]
+    > 请不要使用这个属性，它已经被弃用了：请使用 [CSS](/zh-CN/docs/Web/CSS) {{ cssxref("list-style-type") }} 属性作为代替。
 
 ## 使用说明
 
diff --git a/files/zh-cn/web/html/element/video/index.md b/files/zh-cn/web/html/element/video/index.md
index ed510898caf7c5..42b199e5c1f041 100644
--- a/files/zh-cn/web/html/element/video/index.md
+++ b/files/zh-cn/web/html/element/video/index.md
@@ -23,7 +23,8 @@ l10n:
 
   - : 一个布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
 
-    > **备注：** 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如何正确使用自动播放，可参见我们的[自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
+    > [!NOTE]
+    > 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如何正确使用自动播放，可参见我们的[自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
 
     无法使用 `autoplay="false"` 来关闭视频的自动播放功能；只要 `<video>` 标签中有这个属性，视频就会自动播放。要移除自动播放，需要完全删除该属性。
 
diff --git a/files/zh-cn/web/html/element/xmp/index.md b/files/zh-cn/web/html/element/xmp/index.md
index 9a0201864cdb39..4dd80c39357976 100644
--- a/files/zh-cn/web/html/element/xmp/index.md
+++ b/files/zh-cn/web/html/element/xmp/index.md
@@ -11,7 +11,8 @@ l10n:
 
 **`<xmp>`** [HTML](/zh-CN/docs/Web/HTML) 元素能够在不解释其中的 HTML 代码的情况下，以等宽字体渲染起始标签与结束标签之间的文本。HTML2 规范建议其渲染宽度应足以容纳每行 80 个字符。
 
-> **备注：** 请不要使用这个元素。
+> [!NOTE]
+> 请不要使用这个元素。
 >
 > - 自 HTML3.2 以来，此元素已被弃用，并且其实现方式并不一致。当前 HTML 中已彻底移除了该元素。
 > - 建议使用 {{HTMLElement("pre")}} 元素或（如果语义上合适的话）{{HTMLElement("code")}} 元素作为替代。请注意，你需要将字符“`<`”转义为“`&lt;`”，并将字符“`&`”转义为“`&amp;`”，以确保它们不会被当作标签解析。
diff --git a/files/zh-cn/web/html/global_attributes/accesskey/index.md b/files/zh-cn/web/html/global_attributes/accesskey/index.md
index 701204e6b9578e..95443be18527e8 100644
--- a/files/zh-cn/web/html/global_attributes/accesskey/index.md
+++ b/files/zh-cn/web/html/global_attributes/accesskey/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Global_attributes/accesskey
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
 
-> **备注：** 在 WHATWG 规范中，它说你可以指定多个空格分隔的字符，浏览器将使用它所支持的第一个字符。然而，这在大多数浏览器中是行不通的。在 IE/Edge 中，它将使用它支持的第一个没有问题的，只要没有与其他命令冲突。
+> [!NOTE]
+> 在 WHATWG 规范中，它说你可以指定多个空格分隔的字符，浏览器将使用它所支持的第一个字符。然而，这在大多数浏览器中是行不通的。在 IE/Edge 中，它将使用它支持的第一个没有问题的，只要没有与其他命令冲突。
 
 激活 accesskey 的操作取决于浏览器及其平台。
 
diff --git a/files/zh-cn/web/html/global_attributes/dir/index.md b/files/zh-cn/web/html/global_attributes/dir/index.md
index 9095ff7759dfdc..0dd0d05607b45b 100644
--- a/files/zh-cn/web/html/global_attributes/dir/index.md
+++ b/files/zh-cn/web/html/global_attributes/dir/index.md
@@ -11,7 +11,8 @@ slug: Web/HTML/Global_attributes/dir
 - rtl，指从*右*到*左*，用于那种从右向左书写的语言（比如阿拉伯语）；
 - auto，指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。
 
-> **备注：** 这个属性对有不同语义的{{ HTMLElement("bdo") }}元素是必须的。
+> [!NOTE]
+> 这个属性对有不同语义的{{ HTMLElement("bdo") }}元素是必须的。
 >
 > - 这个属性在{{ HTMLElement("bdi") }}元素中*不可*继承。未赋值时，它的默认值是 auto。
 > - 这个属性可以被 CSS 属性{{ cssxref("direction") }}和{{ cssxref("unicode-bidi") }}覆盖，如果 CSS 网页有效且该元素支持这些属性的话。
diff --git a/files/zh-cn/web/html/global_attributes/draggable/index.md b/files/zh-cn/web/html/global_attributes/draggable/index.md
index ef87bfc83c8234..927b682b23027c 100644
--- a/files/zh-cn/web/html/global_attributes/draggable/index.md
+++ b/files/zh-cn/web/html/global_attributes/draggable/index.md
@@ -16,7 +16,8 @@ slug: Web/HTML/Global_attributes/draggable
 
 如果该属性没有设值，则默认值 为 auto，表示使用浏览器定义的默认行为。
 
-> **警告：** 这个属性是[_枚举类型_](/zh-CN/docs/Glossary/Enumerated)，而不是*布尔类型*。这意味着必须显式指定值为 `true` 或者 `false`，像 `<img draggable>` 这样的简写是不允许的。正确的用法是 `<img draggable="false">`。
+> [!WARNING]
+> 这个属性是[_枚举类型_](/zh-CN/docs/Glossary/Enumerated)，而不是*布尔类型*。这意味着必须显式指定值为 `true` 或者 `false`，像 `<img draggable>` 这样的简写是不允许的。正确的用法是 `<img draggable="false">`。
 
 如果没有设置该属性，其默认值为 `auto`，这意味着拖动行为是浏览器的默认行为：只有选择的文本、图像和链接可以被拖动。对于其他元素，必须设置事件 {{domxref('HTMLElement.dragstart_event', 'ondragstart')}} 以使拖放行为生效，如本[综合实例](/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations)所示。
 
diff --git a/files/zh-cn/web/html/global_attributes/hidden/index.md b/files/zh-cn/web/html/global_attributes/hidden/index.md
index 2b7d3cd5aae604..a78b074d014365 100644
--- a/files/zh-cn/web/html/global_attributes/hidden/index.md
+++ b/files/zh-cn/web/html/global_attributes/hidden/index.md
@@ -17,7 +17,8 @@ slug: Web/HTML/Global_attributes/hidden
 
 类似的，你也可以将一个带有 hidden 标签的 canvas 元素作为屏幕外的缓存区域，或者在表单控件中引用一个已经隐藏的表单。
 
-> **备注：** 改变具有 hidden 属性的元素的 CSS 的 {{cssxref("display")}} 属性将覆盖该行为。例如，元素被设置为 `display: flex` 将会导致元素显示出来，尽管设置了 hidden 属性
+> [!NOTE]
+> 改变具有 hidden 属性的元素的 CSS 的 {{cssxref("display")}} 属性将覆盖该行为。例如，元素被设置为 `display: flex` 将会导致元素显示出来，尽管设置了 hidden 属性
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/global_attributes/id/index.md b/files/zh-cn/web/html/global_attributes/id/index.md
index b15283e8fdd7c4..e4197bc0bfa002 100644
--- a/files/zh-cn/web/html/global_attributes/id/index.md
+++ b/files/zh-cn/web/html/global_attributes/id/index.md
@@ -9,11 +9,13 @@ slug: Web/HTML/Global_attributes/id
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
 
-> **警告：** 该属性的值是一个不透明（opaque）字符串，这意味着网页开发者不能使用它来传递人类可读的信息。然而，具有一定可读性的 ID（如使用 `ticket-18659` 而不是 `r45tgfe-freds&$@`）可以有助于理解代码。
+> [!WARNING]
+> 该属性的值是一个不透明（opaque）字符串，这意味着网页开发者不能使用它来传递人类可读的信息。然而，具有一定可读性的 ID（如使用 `ticket-18659` 而不是 `r45tgfe-freds&$@`）可以有助于理解代码。
 
 `id` 的值不得包含空格和制表符等{{glossary("whitespace","空白字符")}}。浏览器会将不符合规范的 ID 中的空白字符视为 ID 的一部分。与允许以空格分隔值的 [`class`](/zh-CN/docs/Web/HTML/Global_attributes#class) 属性不同，元素只能拥有一个 ID 值。
 
-> **备注：** 从技术上讲，`id` 属性的值可以包含除了{{glossary("whitespace","空白")}}字符的任何字符。然而，为了避免无意中的错误，只能使用 {{glossary("ASCII")}} 字母、数字、`'_'` 和 `'-'`，并且`id` 属性的值应该以字母开头。例如，`.` 在 CSS 中具有特殊的意义（它作为一个[类选择器](/zh-CN/docs/Web/CSS/Class_selectors)）。除非你注意在 CSS 中转义它，否则它不会被识别为 `id` 属性值的一部分。很容易忘记这样做，导致你的代码中出现难以检测的错误。
+> [!NOTE]
+> 从技术上讲，`id` 属性的值可以包含除了{{glossary("whitespace","空白")}}字符的任何字符。然而，为了避免无意中的错误，只能使用 {{glossary("ASCII")}} 字母、数字、`'_'` 和 `'-'`，并且`id` 属性的值应该以字母开头。例如，`.` 在 CSS 中具有特殊的意义（它作为一个[类选择器](/zh-CN/docs/Web/CSS/Class_selectors)）。除非你注意在 CSS 中转义它，否则它不会被识别为 `id` 属性值的一部分。很容易忘记这样做，导致你的代码中出现难以检测的错误。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/global_attributes/itemprop/index.md b/files/zh-cn/web/html/global_attributes/itemprop/index.md
index 20558bcc4cb805..b115573f592e5a 100644
--- a/files/zh-cn/web/html/global_attributes/itemprop/index.md
+++ b/files/zh-cn/web/html/global_attributes/itemprop/index.md
@@ -194,7 +194,8 @@ ID 不是人性化的，所以产品的名字是用的人所能看懂的文字
 </div>
 ```
 
-> **备注：** 微数据和被标记微数据的文档的内容之间是没有关系的。
+> [!NOTE]
+> 微数据和被标记微数据的文档的内容之间是没有关系的。
 
 ### Same structured data marked up in two different ways
 
diff --git a/files/zh-cn/web/html/global_attributes/itemscope/index.md b/files/zh-cn/web/html/global_attributes/itemscope/index.md
index e49a7f4f4533d3..925314c1941390 100644
--- a/files/zh-cn/web/html/global_attributes/itemscope/index.md
+++ b/files/zh-cn/web/html/global_attributes/itemscope/index.md
@@ -9,9 +9,11 @@ slug: Web/HTML/Global_attributes/itemscope
 
 每个 HTML 元素都可以有指定的 `itemscope` 属性。一个具有 `itemscope` 属性的元素可以没有关联的 `itemtype` ，但必须有相关的 `itemref`。
 
-> **备注：** Schema.org 提供了一份共享的词汇表，站长可以使用它来标记网页，而这些标记则被主要的搜索引擎：Google，Microsoft，Yandex 和 Yahoo！所支持。
+> [!NOTE]
+> Schema.org 提供了一份共享的词汇表，站长可以使用它来标记网页，而这些标记则被主要的搜索引擎：Google，Microsoft，Yandex 和 Yahoo！所支持。
 
-> **备注：** 获取更多关于 `itemtype` 属性的信息： <http://schema.org/Thing>
+> [!NOTE]
+> 获取更多关于 `itemtype` 属性的信息： <http://schema.org/Thing>
 
 ### 简单示例
 
@@ -238,7 +240,8 @@ Directions: <br>
   </tbody>
 </table>
 
-> **备注：** Google 提供了一个方便地从 HTML 提取微数据结构的工具：[Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/)。你可以通过上面的 HTML 试一下。
+> [!NOTE]
+> Google 提供了一个方便地从 HTML 提取微数据结构的工具：[Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/)。你可以通过上面的 HTML 试一下。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/global_attributes/itemtype/index.md b/files/zh-cn/web/html/global_attributes/itemtype/index.md
index 3b1677591b7d6a..69f7167ff2d0f2 100644
--- a/files/zh-cn/web/html/global_attributes/itemtype/index.md
+++ b/files/zh-cn/web/html/global_attributes/itemtype/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Global_attributes/itemtype
 
 Google 和其他主流搜索引擎支持 [schema.org](http://schema.org/) 结构化数据词汇。这个词汇定义了一组标准的类型名称和属性名称。例如，[`MusicEvent`](http://schema.org/MusicEvent) 表示音乐会的名称，[`startDate`](http://schema.org/startDate) 和 [`location`](http://schema.org/location) 属性指定了音乐会的关键信息。这里，[`MusicEvent`](http://schema.org/MusicEvent) 应该是用于 `itemtype` 的 URL，而 `startDate` 和 `location` 作为 [`MusicEvent`](http://schema.org/MusicEvent) 所定义的 `itemprop`。
 
-> **备注：** 更多 `itemtype` 属性的信息请见 <http://schema.org/Thing>
+> [!NOTE]
+> 更多 `itemtype` 属性的信息请见 <http://schema.org/Thing>
 
 - **itemtype** 属性必须拥有这样的值，它是唯一标识的无序集合，这些标识是大小写敏感的，每个标识都是有效的绝对 URL，并且所有都使用相同词汇定义。属性的值必须至少拥有一个标识。
 - 条目的类型必须全部为定义在适用规范（例如 [schema.org](http://schema.org/)）中的类型，并且必须使用相同词汇定义。
@@ -203,7 +204,8 @@ Google 和其他主流搜索引擎支持 [schema.org](http://schema.org/) 结构
   </tbody>
 </table>
 
-> **备注：** 一个工具，用于从 HTML 提取 microdata 结构，是 Google 的 [结构化数据测试工具](https://developers.google.com/structured-data/testing-tool/)。在上面展示的 HTML 上尝试吧。
+> [!NOTE]
+> 一个工具，用于从 HTML 提取 microdata 结构，是 Google 的 [结构化数据测试工具](https://developers.google.com/structured-data/testing-tool/)。在上面展示的 HTML 上尝试吧。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/global_attributes/nonce/index.md b/files/zh-cn/web/html/global_attributes/nonce/index.md
index 47a3254f3f9a24..e371c1853909f0 100644
--- a/files/zh-cn/web/html/global_attributes/nonce/index.md
+++ b/files/zh-cn/web/html/global_attributes/nonce/index.md
@@ -13,7 +13,8 @@ l10n:
 
 `nonce` 属性可用于允许对特定资源的获取，如内联脚本或样式元素。它可以帮助你避免使用 [CSP](/zh-CN/docs/Web/HTTP/CSP) `unsafe-inline` 指令，该指令会允许你获取*所有*的内联脚本或样式资源。
 
-> **备注：** 只有在无法使用不安全的内联脚本或样式内容时，才使用 `nonce`。如果不需要 `nonce`，就不要使用。如果脚本是静态的，也可以使用 CSP 哈希值来代替。（请参阅[不安全内联脚本](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#不安全内联脚本)中的使用说明）。始终尽量充分利用 [CSP](/zh-CN/docs/Web/HTTP/CSP) 保护，并尽可能避免使用 nonce 或不安全的内联脚本。
+> [!NOTE]
+> 只有在无法使用不安全的内联脚本或样式内容时，才使用 `nonce`。如果不需要 `nonce`，就不要使用。如果脚本是静态的，也可以使用 CSP 哈希值来代替。（请参阅[不安全内联脚本](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#不安全内联脚本)中的使用说明）。始终尽量充分利用 [CSP](/zh-CN/docs/Web/HTTP/CSP) 保护，并尽可能避免使用 nonce 或不安全的内联脚本。
 
 ### 使用 nonce 以允许一个 \<script> 元素
 
diff --git a/files/zh-cn/web/html/global_attributes/popover/index.md b/files/zh-cn/web/html/global_attributes/popover/index.md
index 3e791b95d05e56..8b11ddf04b317e 100644
--- a/files/zh-cn/web/html/global_attributes/popover/index.md
+++ b/files/zh-cn/web/html/global_attributes/popover/index.md
@@ -29,7 +29,8 @@ l10n:
 
 {{EmbedLiveSample('示例', 600, 200)}}
 
-> **备注：** 请参阅我们的[弹出框 API 示例页面](https://mdn.github.io/dom-examples/popover-api/)以访问所有的 MDN 弹出框示例。
+> [!NOTE]
+> 请参阅我们的[弹出框 API 示例页面](https://mdn.github.io/dom-examples/popover-api/)以访问所有的 MDN 弹出框示例。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/global_attributes/spellcheck/index.md b/files/zh-cn/web/html/global_attributes/spellcheck/index.md
index 86e6637f4c5b0e..e63e8abab872cc 100644
--- a/files/zh-cn/web/html/global_attributes/spellcheck/index.md
+++ b/files/zh-cn/web/html/global_attributes/spellcheck/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`spellcheck`** [全局属性](/zh-CN/docs/Web/HTML/Global_attributes)是一个[枚举](/zh-CN/docs/Glossary/Enumerated)属性，定义是否可以检查元素的拼写错误。
 
-> **备注：** 此属性仅仅是浏览器的一个提示：浏览器并不会强制去检查拼写错误。通常不检查不可编辑元素的拼写错误，即使 `spellcheck` 属性设置为 `true`，并且浏览器支持拼写检查。
+> [!NOTE]
+> 此属性仅仅是浏览器的一个提示：浏览器并不会强制去检查拼写错误。通常不检查不可编辑元素的拼写错误，即使 `spellcheck` 属性设置为 `true`，并且浏览器支持拼写检查。
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
 
diff --git a/files/zh-cn/web/html/global_attributes/style/index.md b/files/zh-cn/web/html/global_attributes/style/index.md
index e10bf1ad09c4da..edd9dc2ddd085b 100644
--- a/files/zh-cn/web/html/global_attributes/style/index.md
+++ b/files/zh-cn/web/html/global_attributes/style/index.md
@@ -7,7 +7,8 @@ slug: Web/HTML/Global_attributes/style
 
 **style** [全局属性](/zh-CN/docs/Web/HTML/Global_attributes) 包含应用到元素的 [CSS](/zh-CN/docs/Web/CSS) 样式声明。要注意样式最好定义在单独的文件中。这个属性以及 {{HTMLElement("style")}} 元素的主要目的是快速装饰。例如用于测试目的。
 
-> **备注：** 这个属性不能用于传递语义信息。即使所有样式都移除了，页面也应该保留正确语义。通常它不应用于隐藏不相关的信息；这应该使用 [**hidden**](#attr-hidden) 属性来实现。
+> [!NOTE]
+> 这个属性不能用于传递语义信息。即使所有样式都移除了，页面也应该保留正确语义。通常它不应用于隐藏不相关的信息；这应该使用 [**hidden**](#attr-hidden) 属性来实现。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/global_attributes/tabindex/index.md b/files/zh-cn/web/html/global_attributes/tabindex/index.md
index ef8499b99f17ed..fb07003f8ed0b1 100644
--- a/files/zh-cn/web/html/global_attributes/tabindex/index.md
+++ b/files/zh-cn/web/html/global_attributes/tabindex/index.md
@@ -19,7 +19,8 @@ slug: Web/HTML/Global_attributes/tabindex
 
 如果我们在 {{htmlelement("div")}} 上设置了 `tabindex` 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 `tabindex`。[查看这篇 fiddle 来理解 tabindex 的滚动影响](https://jsfiddle.net/jainakshay/0b2q4Lgv/)。
 
-> **备注：** tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。
+> [!NOTE]
+> tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。
 
 ## 规范
 
diff --git a/files/zh-cn/web/html/microdata/index.md b/files/zh-cn/web/html/microdata/index.md
index bf372f8414c1d1..b17057261ff580 100644
--- a/files/zh-cn/web/html/microdata/index.md
+++ b/files/zh-cn/web/html/microdata/index.md
@@ -18,7 +18,8 @@ slug: Web/HTML/Microdata
 
 谷歌和其他主要搜索引擎支持结构化数据的 [Schema.org](schema.org) 词汇表。此词汇表定义了一组标准类型名称和属性名称，例如，[Schema.org Music Event](https://schema.org/MusicEvent) 表示音乐会表演，[`startDate`](https://schema.org/startDate) 和 [`location`](https://schema.org/location) 属性用于指定音乐会的关键细节。在这种情况下，[Schema.org Music Event](https://schema.org/MusicEvent) 将是 `itemtype` 和 `startDate` 使用的 URL，而 `location` 将是 [Schema.org Music Event](https://schema.org/MusicEvent) 定义的 `itemprop`。
 
-> **备注：** 有关 itemtype 属性的更多信息，请访问 <https://schema.org/Thing>。
+> [!NOTE]
+> 有关 itemtype 属性的更多信息，请访问 <https://schema.org/Thing>。
 
 微数据词汇表提供了 _`Item`_ 的语义或含义。Web 开发人员可以设计自定义词汇表或使用 Web 上可用的词汇表，例如广泛使用的 [schema.org](https://schema.org) 词汇表。Schema.org 提供了一组常用的标记词汇表。
 
@@ -146,7 +147,8 @@ slug: Web/HTML/Microdata
 
 {{ EmbedLiveSample('示例', '', '100') }}
 
-> **备注：** 从 HTML 中提取微数据结构的便捷工具是 Google 的[架构标记测试工具](https://developers.google.com/structured-data/testing-tool/)。在上面显示的 HTML 上尝试一下。
+> [!NOTE]
+> 从 HTML 中提取微数据结构的便捷工具是 Google 的[架构标记测试工具](https://developers.google.com/structured-data/testing-tool/)。在上面显示的 HTML 上尝试一下。
 
 ## 浏览器兼容性
 
diff --git a/files/zh-cn/web/html/viewport_meta_tag/index.md b/files/zh-cn/web/html/viewport_meta_tag/index.md
index 1971a7c5d762c9..52067de073ef4b 100644
--- a/files/zh-cn/web/html/viewport_meta_tag/index.md
+++ b/files/zh-cn/web/html/viewport_meta_tag/index.md
@@ -44,7 +44,8 @@ slug: Web/HTML/Viewport_meta_tag
 - `interactive-widget`
   - : 指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：`resizes-visual`、`resizes-content` 或 `overlays-content`。默认值：`resizes-visual`。
 
-> **警告：** 使用 `user-scalable=no` 会给有视觉障碍的用户造成无障碍问题，如弱视力。[WCAG](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) 要求至少有 2 倍的缩放；然而，最佳做法是启用 5 倍的缩放。
+> [!WARNING]
+> 使用 `user-scalable=no` 会给有视觉障碍的用户造成无障碍问题，如弱视力。[WCAG](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) 要求至少有 2 倍的缩放；然而，最佳做法是启用 5 倍的缩放。
 
 ## 屏幕密度
 
diff --git a/files/zh-cn/web/http/authentication/index.md b/files/zh-cn/web/http/authentication/index.md
index 5eb5df4afec2c5..a7752977738d3d 100644
--- a/files/zh-cn/web/http/authentication/index.md
+++ b/files/zh-cn/web/http/authentication/index.md
@@ -21,7 +21,8 @@ HTTP 提供一个用于权限控制和认证的通用框架。本页介绍了通
 
 上述整体的信息流程，对于大多数（并非是全部）[身份验证方案](#身份验证方案)都是相同的。标头中的真实信息和编码的方式确实发生了变化。
 
-> **警告：** 上图使用的“Basic”身份验证方案会对凭据进行编码，但是并不会进行加密。除非信息交换通过安全的连接（HTTPS/TLS），否则这件事极其不安全的。
+> [!WARNING]
+> 上图使用的“Basic”身份验证方案会对凭据进行编码，但是并不会进行加密。除非信息交换通过安全的连接（HTTPS/TLS），否则这件事极其不安全的。
 
 ### 代理认证
 
diff --git a/files/zh-cn/web/http/basics_of_http/data_urls/index.md b/files/zh-cn/web/http/basics_of_http/data_urls/index.md
index 292d5f044a6552..85d56bc32a4e53 100644
--- a/files/zh-cn/web/http/basics_of_http/data_urls/index.md
+++ b/files/zh-cn/web/http/basics_of_http/data_urls/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Basics_of_HTTP/Data_URLs
 
 **Data URL**，即前缀为 `data:` 协议的 URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”，直到这个名字被 WHATWG 弃用。
 
-> **备注：** 现代浏览器将 Data URL 视作唯一的不透明来源，而不是可以用于导航的 URL。
+> [!NOTE]
+> 现代浏览器将 Data URL 视作唯一的不透明来源，而不是可以用于导航的 URL。
 
 ## 语法
 
diff --git a/files/zh-cn/web/http/basics_of_http/mime_types/index.md b/files/zh-cn/web/http/basics_of_http/mime_types/index.md
index c46a10c960cf79..03e7da3ff4448d 100644
--- a/files/zh-cn/web/http/basics_of_http/mime_types/index.md
+++ b/files/zh-cn/web/http/basics_of_http/mime_types/index.md
@@ -9,7 +9,8 @@ slug: Web/HTTP/Basics_of_HTTP/MIME_types
 
 [互联网号码分配局（IANA）](https://www.iana.org/)负责跟踪所有官方 MIME 类型，你可以在[媒体类型](https://www.iana.org/assignments/media-types/media-types.xhtml)页面中找到最新的完整列表。
 
-> **警告：** 浏览器通常使用 MIME 类型*而不是文件扩展名*来决定如何处理 URL，因此 Web 服务器在 {{HTTPHeader("Content-Type")}} 响应标头中添加正确的 MIME 类型非常重要。如果配置不正确，浏览器可能会曲解文件内容，网站将无法正常工作，并且下载的文件也可能被错误处理。
+> [!WARNING]
+> 浏览器通常使用 MIME 类型*而不是文件扩展名*来决定如何处理 URL，因此 Web 服务器在 {{HTTPHeader("Content-Type")}} 响应标头中添加正确的 MIME 类型非常重要。如果配置不正确，浏览器可能会曲解文件内容，网站将无法正常工作，并且下载的文件也可能被错误处理。
 
 ## MIME 类型的结构
 
@@ -95,7 +96,8 @@ HTTP 不会特殊处理多部分文档：信息会被传输到浏览器（如果
 
 所有的 HTML 内容都应该使用这种类型。XHTML 的其他 MIME 类型（如 `application/xml+html`）现在基本不再使用。
 
-> **备注：** 如果需要 XML 的严格解析规则、[`<![CDATA[...]]>`](/zh-CN/docs/Web/API/CDATASection) 部分或 HTML/SVG/MathML 命名空间以外的元素，请使用 `application/xml` 或 `application/xhtml+xml`。
+> [!NOTE]
+> 如果需要 XML 的严格解析规则、[`<![CDATA[...]]>`](/zh-CN/docs/Web/API/CDATASection) 部分或 HTML/SVG/MathML 命名空间以外的元素，请使用 `application/xml` 或 `application/xhtml+xml`。
 
 ### text/javascript
 
@@ -123,7 +125,8 @@ HTTP 不会特殊处理多部分文档：信息会被传输到浏览器（如果
 - `text/x-ecmascript` {{Non-standard_Inline}}
 - `text/x-javascript` {{Non-standard_Inline}}
 
-> **备注：** 即便任何给定的{{Glossary("user agent", "用户代理")}}可能支持这里的部分或所有类型，你也只应该使用 `text/javascript`。它是唯一确保能在目前和以后正常工作的 MIME 类型。
+> [!NOTE]
+> 即便任何给定的{{Glossary("user agent", "用户代理")}}可能支持这里的部分或所有类型，你也只应该使用 `text/javascript`。它是唯一确保能在目前和以后正常工作的 MIME 类型。
 
 ### 图片类型
 
diff --git a/files/zh-cn/web/http/browser_detection_using_the_user_agent/index.md b/files/zh-cn/web/http/browser_detection_using_the_user_agent/index.md
index 9c959fbd612091..616a0d3f072718 100644
--- a/files/zh-cn/web/http/browser_detection_using_the_user_agent/index.md
+++ b/files/zh-cn/web/http/browser_detection_using_the_user_agent/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Browser_detection_using_the_user_agent
 
 但浏览器和标准并不完美，仍然需要检测浏览器的一些边缘情况。使用用户代理检测浏览器看起来很简单，但是做得很好，实际上是一个非常困难的问题。本文档将指导你尽可能正确地进行此操作。
 
-> **备注：** 值得重申的是：使用用户代理嗅探很少会成为一个好主意。你几乎总能发现一个更好的、更广泛兼容的方式来解决你的问题。
+> [!NOTE]
+> 值得重申的是：使用用户代理嗅探很少会成为一个好主意。你几乎总能发现一个更好的、更广泛兼容的方式来解决你的问题。
 
 ## 在使用浏览器检测之前需要考虑的一些事情
 
@@ -104,4 +105,5 @@ slug: Web/HTTP/Browser_detection_using_the_user_agent
 
 总之，我们建议检测移动设备的时候，在用户代理字符串中寻找“Mobi”字符串。
 
-> **备注：** 如果设备屏幕足够大，它就不会被用“Mobi”标记，你应该提供给用户你的桌面版网页（由于越来越多的桌面设备开始配有触摸屏，作为一个最佳体验，不管怎样，应该在该网页中提供触碰输入）
+> [!NOTE]
+> 如果设备屏幕足够大，它就不会被用“Mobi”标记，你应该提供给用户你的桌面版网页（由于越来越多的桌面设备开始配有触摸屏，作为一个最佳体验，不管怎样，应该在该网页中提供触碰输入）
diff --git a/files/zh-cn/web/http/caching/index.md b/files/zh-cn/web/http/caching/index.md
index 8451c8e43c4d70..e6537f5aafb755 100644
--- a/files/zh-cn/web/http/caching/index.md
+++ b/files/zh-cn/web/http/caching/index.md
@@ -256,7 +256,8 @@ If-None-Match: "deadbeef"
 
 但是，如果服务器确定请求的资源现在应该具有不同的 `ETag` 值，则服务器将其改为 `200 OK` 和资源的最新版本进行响应。
 
-> **备注：** 在评估如何使用 `ETag` 和 `Last-Modified` 时，请考虑以下几点：在缓存重新验证期间，如果 `ETag` 和 `Last-Modified` 都存在，则 `ETag` 优先。因此，如果你只考虑缓存，你可能会认为 `Last-Modified` 是不必要的。然而，`Last-Modified` 不仅仅对缓存有用；相反，它是一个标准的 HTTP 标头，内容管理 (CMS) 系统也使用它来显示上次修改时间，由爬虫调整爬取频率，以及用于其他各种目的。所以考虑到整个 HTTP 生态系统，最好同时提供 `ETag` 和 `Last-Modified`。
+> [!NOTE]
+> 在评估如何使用 `ETag` 和 `Last-Modified` 时，请考虑以下几点：在缓存重新验证期间，如果 `ETag` 和 `Last-Modified` 都存在，则 `ETag` 优先。因此，如果你只考虑缓存，你可能会认为 `Last-Modified` 是不必要的。然而，`Last-Modified` 不仅仅对缓存有用；相反，它是一个标准的 HTTP 标头，内容管理 (CMS) 系统也使用它来显示上次修改时间，由爬虫调整爬取频率，以及用于其他各种目的。所以考虑到整个 HTTP 生态系统，最好同时提供 `ETag` 和 `Last-Modified`。
 
 ### 强制重新验证
 
@@ -563,7 +564,8 @@ bundle.js?v=YsAIAAAA-QG4G6kCMAMBAAAAAAAoK
 
 `public` 值具有使响应可存储的效果，即使存在 `Authorization` 标头。
 
-> **备注：** 只有在设置了 `Authorization` 标头时需要存储响应时才应使用 `public` 指令。否则不需要，因为只要给出了 `max-age`，响应就会存储在共享缓存中。
+> [!NOTE]
+> 只有在设置了 `Authorization` 标头时需要存储响应时才应使用 `public` 指令。否则不需要，因为只要给出了 `max-age`，响应就会存储在共享缓存中。
 
 因此，如果响应是使用基本身份验证进行个性化的，`public` 的存在可能会导致问题。如果你对此感到担忧，你可以选择第二长的值 `38`（1 个月）。
 
@@ -605,7 +607,8 @@ ETag: YsAIAAAA-QG4G6kCMAMBAAAAAAAoK
 
 **缓存破坏**是一种通过在内容更改时更改 URL 来使响应在很长一段时间内可缓存的技术。该技术可以应用于所有子资源，例如图像。
 
-> **备注：** 在评估 `immutable` 和 QPACK 的使用时：如果你担心 `immutable` 会更改 QPACK 提供的预定义值，请考虑在这种情况下，`immutable` 部分可以通过将 `Cache-Control` 值分成两行来单独编码——尽管这取决于特定 QPACK 实现使用的编码算法。
+> [!NOTE]
+> 在评估 `immutable` 和 QPACK 的使用时：如果你担心 `immutable` 会更改 QPACK 提供的预定义值，请考虑在这种情况下，`immutable` 部分可以通过将 `Cache-Control` 值分成两行来单独编码——尽管这取决于特定 QPACK 实现使用的编码算法。
 
 ```http
 Cache-Control: public, max-age=31536000
diff --git a/files/zh-cn/web/http/client_hints/index.md b/files/zh-cn/web/http/client_hints/index.md
index 553d7ebdeb89fa..18ae300d113365 100644
--- a/files/zh-cn/web/http/client_hints/index.md
+++ b/files/zh-cn/web/http/client_hints/index.md
@@ -23,7 +23,8 @@ Accept-CH: Width, Downlink, Sec-CH-UA
 
 有一小部分[低熵客户端提示标头](#低熵提示)，即便没有请求，也可以由客户端发送。
 
-> **备注：** 也可以在 HTML 中使用带有 [`http-equiv`](/zh-CN/docs/Web/HTML/Element/meta#attr-http-equiv) 属性的 {{HTMLElement("meta")}} 元素指定客户端提示。
+> [!NOTE]
+> 也可以在 HTML 中使用带有 [`http-equiv`](/zh-CN/docs/Web/HTML/Element/meta#attr-http-equiv) 属性的 {{HTMLElement("meta")}} 元素指定客户端提示。
 >
 > ```html
 > <meta http-equiv="Accept-CH" content="Width, Downlink, Sec-CH-UA" />
@@ -71,7 +72,8 @@ Vary: Sec-CH-Prefers-Reduced-Motion
 Critical-CH: Sec-CH-Prefers-Reduced-Motion
 ```
 
-> **备注：** 我们还在 {{httpheader("Vary")}} 标头中指定了 `Sec-CH-Prefers-Reduced-Motion`，以向浏览器表明，即使 URL 保持相同，只要基于此标头的值不同，提供的值也不同，所以浏览器不应该使用已存在的缓存响应，而是应该单独地缓存这个响应。在 `Accept-CH` 中列出的标头也应该出现在 `Accept-CH` 和 `Vary` 标头中。
+> [!NOTE]
+> 我们还在 {{httpheader("Vary")}} 标头中指定了 `Sec-CH-Prefers-Reduced-Motion`，以向浏览器表明，即使 URL 保持相同，只要基于此标头的值不同，提供的值也不同，所以浏览器不应该使用已存在的缓存响应，而是应该单独地缓存这个响应。在 `Accept-CH` 中列出的标头也应该出现在 `Accept-CH` 和 `Vary` 标头中。
 
 由于 `Sec-CH-Prefers-Reduced-Motion` 是源请求中的不存在的重要提示，因此客户端会自动地重试请求——这次通过 `Sec-CH-Prefers-Reduced-Motion` 告诉服务器它有一个用户首选项要减少动画。
 
@@ -89,7 +91,8 @@ Sec-CH-Prefers-Reduced-Motion: "reduce"
 
 [用户代理客户端提示 API](/zh-CN/docs/Web/API/User-Agent_Client_Hints_API) 可以在网页的 JavaScript 中使用客户端提示。
 
-> **备注：** 服务器当前通过解析 {{HTTPHeader("User-Agent")}} 标头获得大部分相同的信息。由于历史原因，该标头包含许多不相关的信息，以及用于识别*特定用户*的信息。UA 客户端提示提供更有效的和隐私保护的方式来获取所需要的信息。它们最终有望取代这种旧的方式。
+> [!NOTE]
+> 服务器当前通过解析 {{HTTPHeader("User-Agent")}} 标头获得大部分相同的信息。由于历史原因，该标头包含许多不相关的信息，以及用于识别*特定用户*的信息。UA 客户端提示提供更有效的和隐私保护的方式来获取所需要的信息。它们最终有望取代这种旧的方式。
 
 ### 用户首选项媒体特性客户端提示
 
diff --git a/files/zh-cn/web/http/compression/index.md b/files/zh-cn/web/http/compression/index.md
index 83982d51a5ba9b..323b099cbf8141 100644
--- a/files/zh-cn/web/http/compression/index.md
+++ b/files/zh-cn/web/http/compression/index.md
@@ -26,7 +26,8 @@ l10n:
 
 有损压缩通常会比无损压缩效率更高一些。
 
-> **备注：** 由于数据压缩技术在一些特定类型的文件上效果很好，再次进行压缩通常没有什么效果。事实上，这种做法常常会适得其反，因为间接开销（该类型算法通常需要使用字典，而字典的大小是会计入初始大小的）会比在压缩过程中获取的额外收益要高，从而会使文件的体积增加。不要对压缩格式的文件应用如下两种压缩技术。
+> [!NOTE]
+> 由于数据压缩技术在一些特定类型的文件上效果很好，再次进行压缩通常没有什么效果。事实上，这种做法常常会适得其反，因为间接开销（该类型算法通常需要使用字典，而字典的大小是会计入初始大小的）会比在压缩过程中获取的额外收益要高，从而会使文件的体积增加。不要对压缩格式的文件应用如下两种压缩技术。
 
 ## 端到端压缩技术
 
diff --git a/files/zh-cn/web/http/configuring_servers_for_ogg_media/index.md b/files/zh-cn/web/http/configuring_servers_for_ogg_media/index.md
index c680790d9e384a..6d449f3938e65c 100644
--- a/files/zh-cn/web/http/configuring_servers_for_ogg_media/index.md
+++ b/files/zh-cn/web/http/configuring_servers_for_ogg_media/index.md
@@ -39,7 +39,8 @@ When the browser seeks through Ogg media to a specified time, it has to seek to
 
 By default, [`ffmpeg2theora`](http://v2v.cc/~j/ffmpeg2theora/) uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well.
 
-> **备注：** Of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance.
+> [!NOTE]
+> Of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance.
 
 ## Consider using the preload attribute
 
@@ -51,7 +52,8 @@ The HTML {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements provide
 
 ### Serve X-Content-Duration headers
 
-> **备注：** As of [Firefox 41](/zh-CN/Firefox/Releases/41), the `X-Content-Duration` header is no longer supported. See [Firefox bug 1160695](https://bugzil.la/1160695) for more details.
+> [!NOTE]
+> As of [Firefox 41](/zh-CN/Firefox/Releases/41), the `X-Content-Duration` header is no longer supported. See [Firefox bug 1160695](https://bugzil.la/1160695) for more details.
 
 The Ogg format doesn't encapsulate the duration of media, so for the progress bar on the video controls to display the duration of the video, Gecko needs to determine the length of the media using other means.
 
diff --git a/files/zh-cn/web/http/connection_management_in_http_1.x/index.md b/files/zh-cn/web/http/connection_management_in_http_1.x/index.md
index 1fb4341aa24105..1678303effe9c2 100644
--- a/files/zh-cn/web/http/connection_management_in_http_1.x/index.md
+++ b/files/zh-cn/web/http/connection_management_in_http_1.x/index.md
@@ -15,7 +15,8 @@ HTTP 的传输协议主要依赖于 TCP 来提供从客户端到服务器端之
 
 ![Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining.](http1_x_connections.png)
 
-> **备注：** HTTP/2 新增了其他连接管理模型。
+> [!NOTE]
+> HTTP/2 新增了其他连接管理模型。
 
 要注意的一个重点是 HTTP 的连接管理适用于两个连续节点之间的连接，它是[逐跳（Hop-by-hop）标头](/zh-CN/docs/Web/HTTP/Headers#逐跳（hop-by-hop）标头)，而不是[端到端（End-to-end）标头](/zh-CN/docs/Web/HTTP/Headers#端到端（end-to-end）标头)。当模型用于从客户端到第一个代理服务器的连接和从代理服务器到目标服务器之间的连接时（或者任意中间代理）效果可能是不一样的。HTTP 协议头受不同连接模型的影响，比如 {{HTTPHeader("Connection")}} 和 {{HTTPHeader("Keep-Alive")}}，就是[逐跳标头](/zh-CN/docs/Web/HTTP/Headers#逐跳（hop-by-hop）标头)标头，它们的值是可以被中间节点修改的。
 
@@ -29,7 +30,8 @@ TCP 协议握手本身就是耗费时间的，所以 TCP 可以保持更多的
 
 这是 HTTP/1.0 的默认模型（如果没有指定 {{HTTPHeader("Connection")}} 协议头，或者是值被设置为 `close`）。而在 HTTP/1.1 中，只有当 {{HTTPHeader("Connection")}} 被设置为 `close` 时才会用到这个模型。
 
-> **备注：** 除非是要兼容一个非常古老的，不支持长连接的系统，没有一个令人信服的理由继续使用这个模型。
+> [!NOTE]
+> 除非是要兼容一个非常古老的，不支持长连接的系统，没有一个令人信服的理由继续使用这个模型。
 
 ## 长连接
 
@@ -45,7 +47,8 @@ HTTP/1.0 里默认并不使用长连接。把 {{HTTPHeader("Connection")}} 设
 
 ## HTTP 流水线
 
-> **备注：** HTTP 流水线在现代浏览器中并不是默认被启用的：
+> [!NOTE]
+> HTTP 流水线在现代浏览器中并不是默认被启用的：
 >
 > - 有缺陷的[代理服务器](https://zh.wikipedia.org/wiki/代理服务器)仍然很常见，这些会导致 Web 开发人员无法预见和轻松诊断的奇怪和不稳定行为。
 > - 正确的实现流水线是复杂的：传输中的资源大小、多少有效的 [RTT](https://zh.wikipedia.org/wiki/來回通訊延遲) 会被用到以及有效带宽都会直接影响到流水线提供的改善。不知道这些的话，重要的消息可能被延迟到不重要的消息后面。这个重要性的概念甚至会演变为影响到页面布局！因此 HTTP 流水线在大多数情况下带来的改善并不明显。
@@ -63,7 +66,8 @@ HTTP/1.0 里默认并不使用长连接。把 {{HTTPHeader("Connection")}} 设
 
 ## 域名分片
 
-> **备注：** 除非你有紧急而迫切的需求，不要使用这一过时的技术；而是升级到 HTTP/2。在 HTTP/2 里，做域名分片就没必要了：HTTP/2 的连接可以很好的处理并发的无优先级的请求。域名分片甚至会影响性能。大多数 HTTP/2 的实现还会使用一种称作[连接聚合](https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/)的技术去尝试合并被分片的域名。
+> [!NOTE]
+> 除非你有紧急而迫切的需求，不要使用这一过时的技术；而是升级到 HTTP/2。在 HTTP/2 里，做域名分片就没必要了：HTTP/2 的连接可以很好的处理并发的无优先级的请求。域名分片甚至会影响性能。大多数 HTTP/2 的实现还会使用一种称作[连接聚合](https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/)的技术去尝试合并被分片的域名。
 
 作为 HTTP/1.x 的连接，请求是序列化的，哪怕本来是无序的，在没有足够庞大可用的带宽时，也无从优化。一个解决方案是，浏览器为每个域名建立多个连接，以实现并发请求。曾经默认的连接数量为 2 到 3 个，现在比较常用的并发连接数已经增加到 6 条。如果尝试大于这个数字，就有触发服务器 DoS 保护的风险。
 
diff --git a/files/zh-cn/web/http/content_negotiation/index.md b/files/zh-cn/web/http/content_negotiation/index.md
index 9a76eb79b627b3..0a418fe0bd0def 100644
--- a/files/zh-cn/web/http/content_negotiation/index.md
+++ b/files/zh-cn/web/http/content_negotiation/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Content_negotiation
 
 在 [HTTP](/zh-CN/docs/Glossary/HTTP) 协议中，**_内容协商_**是一种机制，用于为同一 URI 提供资源不同的{{Glossary("Representation header","表示")}}形式，以帮助用户代理指定最适合用户的表示形式（例如，哪种文档语言、哪种图片格式或者哪种内容编码）。
 
-> **备注：** 你可以在[来自 WHATWG 的维基页面](https://wiki.whatwg.org/wiki/Why_not_conneg)发现 HTTP 内容协商的一些缺点。HTML5 提供其他的选择来进行内容协商，例如 [`<source>` 元素](/zh-CN/docs/Web/HTML/Element/source)。
+> [!NOTE]
+> 你可以在[来自 WHATWG 的维基页面](https://wiki.whatwg.org/wiki/Why_not_conneg)发现 HTTP 内容协商的一些缺点。HTML5 提供其他的选择来进行内容协商，例如 [`<source>` 元素](/zh-CN/docs/Web/HTML/Element/source)。
 
 ## 内容协商的基本原则
 
@@ -46,7 +47,8 @@ HTTP/1.1 规范指定了一系列的标准标头用于启动服务端驱动型
 
 ### `Accept-CH` 标头{{experimental_inline}}
 
-> **备注：** 这是被称为*客户端提示*的**实验性**技术方案的一部分，目前仅在 Chrome 46 及以后的版本中得到了实现。Device-Memory 值在 Chrome 61 或更高版本中。
+> [!NOTE]
+> 这是被称为*客户端提示*的**实验性**技术方案的一部分，目前仅在 Chrome 46 及以后的版本中得到了实现。Device-Memory 值在 Chrome 61 或更高版本中。
 
 该实验性标头 {{HTTPHeader("Accept-CH")}} 列出了服务器可以用来选择合适响应的配置数据。合法值如下：
 
@@ -73,7 +75,8 @@ HTTP/1.1 规范指定了一系列的标准标头用于启动服务端驱动型
 
 ### `User-Agent` 标头
 
-> **备注：** 尽管使用该标头来进行内容选择是合理的，但是依赖这个标头来确定用户代理都支持哪些功能特性通常[被认为是一个糟糕的做法](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)。
+> [!NOTE]
+> 尽管使用该标头来进行内容选择是合理的，但是依赖这个标头来确定用户代理都支持哪些功能特性通常[被认为是一个糟糕的做法](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)。
 
 {{HTTPHeader("User-Agent")}} 标头可以用来识别发送请求的浏览器。该字符串中包含有用空格间隔的*产品标记符*及*注释*的清单。
 
diff --git a/files/zh-cn/web/http/cookies/index.md b/files/zh-cn/web/http/cookies/index.md
index 423153db07f1f7..c8dddcd3c95b5d 100644
--- a/files/zh-cn/web/http/cookies/index.md
+++ b/files/zh-cn/web/http/cookies/index.md
@@ -18,7 +18,8 @@ Cookie 主要用于以下三个方面：
 
 Cookie 曾一度用于客户端数据的存储，因当时并没有其他合适的存储办法而作为唯一的存储手段，但现在推荐使用现代存储 API。由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销（尤其是在移动环境下）。新的浏览器 API 已经允许开发者直接将数据存储到本地，如使用 [Web storage API](/zh-CN/docs/Web/API/Web_Storage_API)（`localStorage` 和 `sessionStorage`）或 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 。
 
-> **备注：** 要查看 Cookie 存储（或网页上能够使用其他的存储方式），你可以在开发者工具中启用存储查看器（[Storage Inspector](/zh-CN/docs/Tools/Storage_Inspector)）功能，并在存储树上选中 Cookie。
+> [!NOTE]
+> 要查看 Cookie 存储（或网页上能够使用其他的存储方式），你可以在开发者工具中启用存储查看器（[Storage Inspector](/zh-CN/docs/Tools/Storage_Inspector)）功能，并在存储树上选中 Cookie。
 
 ## 创建 Cookie
 
@@ -51,7 +52,8 @@ Host: www.example.org
 Cookie: yummy_cookie=choco; tasty_cookie=strawberry
 ```
 
-> **备注：** 如何在以下几种服务端程序中设置 `Set-Cookie` 响应头信息：
+> [!NOTE]
+> 如何在以下几种服务端程序中设置 `Set-Cookie` 响应头信息：
 >
 > - [PHP](https://secure.php.net/manual/en/function.setcookie.php)
 > - [Node.JS](https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value)
@@ -71,7 +73,8 @@ Cookie 的生命周期可以通过两种方式定义：
 Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
 ```
 
-> **备注：** 当 Cookie 的过期时间（ `Expires`）被设定时，设定的日期和时间只与客户端相关，而不是服务端。
+> [!NOTE]
+> 当 Cookie 的过期时间（ `Expires`）被设定时，设定的日期和时间只与客户端相关，而不是服务端。
 
 如果你的站点对用户进行身份验证，则每当用户进行身份验证时，它都应重新生成并重新发送会话 Cookie，甚至是已经存在的会话 Cookie。此技术有助于防止[会话固定攻击（session fixation attacks）](/zh-CN/docs/Web/Security/Types_of_attacks#Session_fixation)，在该攻击中第三方可以重用用户的会话。
 
@@ -128,7 +131,8 @@ Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
 Set-Cookie: mykey=myvalue; SameSite=Strict
 ```
 
-> **备注：** 与 `SameSite` 相关的标准最近发生了变化（MDN 记录了上面的新行为）。有关在特定浏览器版本中如何处理属性的信息，请参阅 cookie [浏览器兼容性](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#浏览器兼容性)表：
+> [!NOTE]
+> 与 `SameSite` 相关的标准最近发生了变化（MDN 记录了上面的新行为）。有关在特定浏览器版本中如何处理属性的信息，请参阅 cookie [浏览器兼容性](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#浏览器兼容性)表：
 >
 > - 如果 `SameSite` 未指定，则 `SameSite=Lax` 时新的默认值。以前，默认情况下会为有请求发送 cookie。
 > - `SameSite=None` 的 cookie 还必须指定 `Secure` 属性（它们需要安全上下文）。
@@ -149,7 +153,8 @@ cookie 的机制使得服务器无法确认 cookie 是在安全来源上设置
 
 带有这些前缀的 Cookie，如果不符合其限制的会被浏览器拒绝。请注意，这确保了如果子域要创建带有前缀的 cookie，那么它将要么局限于该子域，要么被完全忽略。由于应用服务器仅在确定用户是否已通过身份验证或 CSRF 令牌正确时才检查特定的 cookie 名称，因此，这有效地充当了针对会话劫持的防御措施。
 
-> **备注：** 在应用程序服务器上，Web 应用程序**必须**检查完整的 cookie 名称。用户代理程序在将其发送到请求的 {{HTTPHeader("Cookie")}} 标头之前，**不会**从 cookie 中剥离前缀。
+> [!NOTE]
+> 在应用程序服务器上，Web 应用程序**必须**检查完整的 cookie 名称。用户代理程序在将其发送到请求的 {{HTTPHeader("Cookie")}} 标头之前，**不会**从 cookie 中剥离前缀。
 
 有关 cookie 前缀和浏览器支持的当前状态的更多信息，请参阅[Set-Cookie 参考文章的前缀部分](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#Cookie_前缀)。
 
@@ -170,7 +175,8 @@ console.log(document.cookie);
 
 ## 安全
 
-> **备注：** 当你存储信息到 Cookie 中时，需要明白 cookie 的值是可以被访问，且可以被终端用户所修改的。根据应用程序的不同，可能需要使用服务器查找的不透明标识符，或者研究诸如 JSON Web Tokens 之类的替代身份验证/机密机制。当机器处于不安全环境时，切记*不能*通过 HTTP Cookie 存储、传输敏感信息。
+> [!NOTE]
+> 当你存储信息到 Cookie 中时，需要明白 cookie 的值是可以被访问，且可以被终端用户所修改的。根据应用程序的不同，可能需要使用服务器查找的不透明标识符，或者研究诸如 JSON Web Tokens 之类的替代身份验证/机密机制。当机器处于不安全环境时，切记*不能*通过 HTTP Cookie 存储、传输敏感信息。
 
 缓解涉及 Cookie 的攻击的方法：
 
@@ -187,7 +193,8 @@ Cookie 与特定域和方案（例如，`http` 或 `https`）相关联，如果
 
 第三方服务器可以基于同一浏览器在访问多个站点时发送给它的 cookie 来建立用户浏览历史和习惯的配置文件。Firefox 默认情况下会阻止已知包含跟踪器的第三方 cookie。第三方 cookie（或仅跟踪 cookie）也可能被其他浏览器设置或扩展程序阻止。阻止 Cookie 会导致某些第三方组件（例如社交媒体窗口小部件）无法正常运行。
 
-> **备注：** 服务器可以（并且应该）设置 cookie [SameSite 属性](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value)以指定是否可以将 cookie 发送到第三方站点。
+> [!NOTE]
+> 服务器可以（并且应该）设置 cookie [SameSite 属性](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value)以指定是否可以将 cookie 发送到第三方站点。
 
 ### Cookie 相关规定
 
diff --git a/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
index af8ea4e453f75d..4ff77a86610e2f 100644
--- a/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
+++ b/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
@@ -19,7 +19,8 @@ slug: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin
 
 例如，在 Apache 中，将以下行添加到服务器的配置中（在相应的 `<Directory>`、`<Location>`、`<Files>` 或 `<VirtualHost>` 部分中）。配置通常位于 `.conf` 文件中（`httpd.conf` 和 `apache.conf` 是这些文件的通用名称）或者位于 `.htaccess` 文件中。
 
-> **警告：** 你必须将 HTTPS 或 HTTP 协议作为源的一部分。
+> [!WARNING]
+> 你必须将 HTTPS 或 HTTP 协议作为源的一部分。
 
 ```
 Header set Access-Control-Allow-Origin 'origin'
diff --git a/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md b/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md
index 3dad478ac96c57..f4326afbca62ab 100644
--- a/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md
+++ b/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md
@@ -29,7 +29,8 @@ Access-Control-Allow-Origin: https://example.com
 Access-Control-Allow-Origin: *
 ```
 
-> **警告：** 使用通配符允许所有站点访问私有 API 是显而易见的坏主意。
+> [!WARNING]
+> 使用通配符允许所有站点访问私有 API 是显而易见的坏主意。
 
 如果要在*不使用* `*` 通配符的情况下让任意站点发出 CORS 请求（例如，为了启用凭证），你的服务器必须读取请求的 `Origin` 标头，将那个值设置为 `Access-Control-Allow-Origin` 的值，且必须一并设置 `Vary: Origin` 标头，表明一部分标头由源动态决定。
 
diff --git a/files/zh-cn/web/http/cors/errors/corsrequestnothttp/index.md b/files/zh-cn/web/http/cors/errors/corsrequestnothttp/index.md
index 0d243c7d870582..fcbf6a4697db14 100644
--- a/files/zh-cn/web/http/cors/errors/corsrequestnothttp/index.md
+++ b/files/zh-cn/web/http/cors/errors/corsrequestnothttp/index.md
@@ -25,7 +25,8 @@ slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp
 
 开发者如果想要在本地进行测试，现在要[设置一个本地服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)。由于所有的文件都来自同种方案和域（`loaclhost`），它们都有相同的源，并不会触发跨源错误。
 
-> **备注：** 此更改符合 [URL 规范](https://url.spec.whatwg.org/#origin)，该规范将文件的原始行为留给开发者实现，但建议在有疑问时，将文件的来源视为不透明。
+> [!NOTE]
+> 此更改符合 [URL 规范](https://url.spec.whatwg.org/#origin)，该规范将文件的原始行为留给开发者实现，但建议在有疑问时，将文件的来源视为不透明。
 
 ## 参见
 
diff --git a/files/zh-cn/web/http/cors/errors/index.md b/files/zh-cn/web/http/cors/errors/index.md
index b965f84ba6cf26..ab1845ddc6421d 100644
--- a/files/zh-cn/web/http/cors/errors/index.md
+++ b/files/zh-cn/web/http/cors/errors/index.md
@@ -26,7 +26,8 @@ reading the remote resource at https://some-url-here. (Reason:
 additional information here).
 ```
 
-> **备注：** 出于安全原因，*JavaScript 代码无法给出*有关 CORS 请求出错的详细信息。所有代码都知道发生了错误。确定具体问题的唯一方法是查看浏览器的控制台以获取详细信息。
+> [!NOTE]
+> 出于安全原因，*JavaScript 代码无法给出*有关 CORS 请求出错的详细信息。所有代码都知道发生了错误。确定具体问题的唯一方法是查看浏览器的控制台以获取详细信息。
 
 ## CORS 错误信息
 
diff --git a/files/zh-cn/web/http/cors/index.md b/files/zh-cn/web/http/cors/index.md
index 341607be18e4a7..fb470289fccf12 100644
--- a/files/zh-cn/web/http/cors/index.md
+++ b/files/zh-cn/web/http/cors/index.md
@@ -70,7 +70,8 @@ CORS 请求失败会产生错误，但是为了安全，在 JavaScript 代码层
 - 如果请求是使用 {{domxref("XMLHttpRequest")}} 对象发出的，在返回的 {{domxref("XMLHttpRequest.upload")}} 对象属性上没有注册任何事件监听器；也就是说，给定一个 {{domxref("XMLHttpRequest")}} 实例 `xhr`，没有调用 `xhr.upload.addEventListener()`，以监听该上传请求。
 - 请求中没有使用 {{domxref("ReadableStream")}} 对象。
 
-> **备注：** WebKit Nightly 和 Safari Technology Preview 为 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}} 和 {{HTTPHeader("Content-Language")}} 标头字段的值添加了额外的限制。如果这些标头字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：
+> [!NOTE]
+> WebKit Nightly 和 Safari Technology Preview 为 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}} 和 {{HTTPHeader("Content-Language")}} 标头字段的值添加了额外的限制。如果这些标头字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：
 >
 > - [Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language](https://bugs.webkit.org/show_bug.cgi?id=165178)
 > - [Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS](https://bugs.webkit.org/show_bug.cgi?id=165566)
@@ -135,7 +136,8 @@ Access-Control-Allow-Origin: *
 Access-Control-Allow-Origin: https://foo.example
 ```
 
-> **备注：** 当响应的是[附带身份凭证的请求](#附带身份凭证的请求)时，服务端**必须**明确 `Access-Control-Allow-Origin` 的值，而不能使用通配符“`*`”。
+> [!NOTE]
+> 当响应的是[附带身份凭证的请求](#附带身份凭证的请求)时，服务端**必须**明确 `Access-Control-Allow-Origin` 的值，而不能使用通配符“`*`”。
 
 ### 预检请求
 
@@ -156,7 +158,8 @@ xhr.send("<person><name>Arun</name></person>");
 
 ![](preflight_correct.png)
 
-> **备注：** 如下所述，实际的 `POST` 请求不会携带 `Access-Control-Request-*` 标头，它们仅用于 `OPTIONS` 请求。
+> [!NOTE]
+> 如下所述，实际的 `POST` 请求不会携带 `Access-Control-Request-*` 标头，它们仅用于 `OPTIONS` 请求。
 
 下面是服务端和客户端完整的信息交互。首次交互是*预检请求/响应*：
 
@@ -265,7 +268,8 @@ CORS 最初要求浏览器具有该行为，不过在后续的[修订](https://g
 
 ### 附带身份凭证的请求
 
-> **备注：** 当发出跨源请求时，第三方 cookie 策略仍将适用。无论如何改变本章节中描述的服务器和客户端的设置，该策略都会强制执行。
+> [!NOTE]
+> 当发出跨源请求时，第三方 cookie 策略仍将适用。无论如何改变本章节中描述的服务器和客户端的设置，该策略都会强制执行。
 
 {{domxref("XMLHttpRequest")}} 或 [Fetch](/zh-CN/docs/Web/API/Fetch_API) 与 CORS 的一个有趣的特性是，可以基于 [HTTP cookies](/zh-CN/docs/Web/HTTP/Cookies) 和 HTTP 认证信息发送身份凭证。一般而言，对于跨源 `XMLHttpRequest` 或 [Fetch](/zh-CN/docs/Web/API/Fetch_API) 请求，浏览器**不会**发送身份凭证信息。如果要发送凭证信息，需要设置 `XMLHttpRequest` 对象的某个特殊标志位，或在构造 {{domxref("Request")}} 对象时设置。
 
@@ -327,7 +331,8 @@ Content-Type: text/plain
 
 CORS 预检请求不能包含凭据。预检请求的*响应*必须指定 `Access-Control-Allow-Credentials: true` 来表明可以携带凭据进行实际的请求。
 
-> **备注：** 一些企业认证服务要求在预检请求时发送 TLS 客户端证书，这违反了 [Fetch](https://fetch.spec.whatwg.org/#cors-protocol-and-credentials) 的规范。
+> [!NOTE]
+> 一些企业认证服务要求在预检请求时发送 TLS 客户端证书，这违反了 [Fetch](https://fetch.spec.whatwg.org/#cors-protocol-and-credentials) 的规范。
 >
 > Firefox 87 允许通过在设置中设定 `network.cors_preflight.allow_client_cert` 为 `true`（[Firefox bug 1511151](https://bugzil.la/1511151)）来允许这种不规范的行为。基于 chromium 的浏览器目前总是在 CORS 预检请求中发送 TLS 客户端证书（[Chrome bug 775438](https://bugs.chromium.org/p/chromium/issues/detail?id=775438)）。
 
diff --git a/files/zh-cn/web/http/csp/index.md b/files/zh-cn/web/http/csp/index.md
index cb51b0ad314283..88f94a6ebc09f3 100644
--- a/files/zh-cn/web/http/csp/index.md
+++ b/files/zh-cn/web/http/csp/index.md
@@ -19,7 +19,8 @@ CSP 被设计成完全向后兼容（除 CSP2 在向后兼容有明确提及的
   content="default-src 'self'; img-src https://*; child-src 'none';" />
 ```
 
-> **备注：** 某些功能（例如发送 CSP 违规报告）仅在使用 HTTP 标头时可用。
+> [!NOTE]
+> 某些功能（例如发送 CSP 违规报告）仅在使用 HTTP 标头时可用。
 
 ## 威胁
 
diff --git a/files/zh-cn/web/http/headers/accept-ch/index.md b/files/zh-cn/web/http/headers/accept-ch/index.md
index 3ba09eff4f941e..bf79b61fd3fe70 100644
--- a/files/zh-cn/web/http/headers/accept-ch/index.md
+++ b/files/zh-cn/web/http/headers/accept-ch/index.md
@@ -28,7 +28,8 @@ l10n:
   </tbody>
 </table>
 
-> **备注：** 客户端提示只能在安全源（通过 TLS）上访问。所有安全的请求都应该持久化 `Accept-CH` 标头，以确保客户端提示可靠地发送。
+> [!NOTE]
+> 客户端提示只能在安全源（通过 TLS）上访问。所有安全的请求都应该持久化 `Accept-CH` 标头，以确保客户端提示可靠地发送。
 
 ## 语法
 
@@ -43,7 +44,8 @@ Accept-CH: Viewport-Width, Width
 Vary: Viewport-Width, Width
 ```
 
-> **备注：** 请牢记要根据所接受的客户端提示[更改响应](/zh-CN/docs/Web/HTTP/Client_hints#缓存和客户端提示)。
+> [!NOTE]
+> 请牢记要根据所接受的客户端提示[更改响应](/zh-CN/docs/Web/HTTP/Client_hints#缓存和客户端提示)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/http/headers/accept-charset/index.md b/files/zh-cn/web/http/headers/accept-charset/index.md
index debf7abe206fbd..90a3fdc49a96ad 100644
--- a/files/zh-cn/web/http/headers/accept-charset/index.md
+++ b/files/zh-cn/web/http/headers/accept-charset/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{HTTPSidebar}}
 
-> **警告：** 请勿使用此标头。浏览器会省略此标头，服务器也应当忽略它。
+> [!WARNING]
+> 请勿使用此标头。浏览器会省略此标头，服务器也应当忽略它。
 
 **`Accept-Charset`** 请求 HTTP 标头曾是一个用于声明客户端支持的{{glossary("character encoding", "字符编码")}}的标头。如今已不再广泛使用。
 
diff --git a/files/zh-cn/web/http/headers/accept-patch/index.md b/files/zh-cn/web/http/headers/accept-patch/index.md
index be3238c53ac709..6068d056c86e99 100644
--- a/files/zh-cn/web/http/headers/accept-patch/index.md
+++ b/files/zh-cn/web/http/headers/accept-patch/index.md
@@ -13,7 +13,8 @@ l10n:
 
 当服务器接收到带有不支持媒体类型的 PATCH 请求时，可以回复 {{HTTPStatus("415")}} `Unsupported Media Type` 状态码，并在 Accept-Patch 标头中指明一个或多个支持的媒体类型。
 
-> **备注：** IANA 维护了一个[媒体类型列表](https://www.iana.org/assignments/media-types/media-types.xhtml)。
+> [!NOTE]
+> IANA 维护了一个[媒体类型列表](https://www.iana.org/assignments/media-types/media-types.xhtml)。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/accept-post/index.md b/files/zh-cn/web/http/headers/accept-post/index.md
index e229829929d33a..9b5e4911f8b78c 100644
--- a/files/zh-cn/web/http/headers/accept-post/index.md
+++ b/files/zh-cn/web/http/headers/accept-post/index.md
@@ -13,7 +13,8 @@ l10n:
 
 例如，服务器接收到具有不支持的媒体类型的 `POST` 请求时，可以回复 {{HTTPStatus("415")}} `Unsupported Media Type`（不支持的媒体类型）状态码，并在响应中包含一个 **`Accept-Post`** 标头，其中引用了一个或多个支持的媒体类型。
 
-> **备注：** IANA 维护了[一个完整的官方支持的编码方式列表](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)。
+> [!NOTE]
+> IANA 维护了[一个完整的官方支持的编码方式列表](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/authorization/index.md b/files/zh-cn/web/http/headers/authorization/index.md
index 540490758ef0db..e8735654982703 100644
--- a/files/zh-cn/web/http/headers/authorization/index.md
+++ b/files/zh-cn/web/http/headers/authorization/index.md
@@ -11,7 +11,8 @@ HTTP **`Authorization`** 请求标头用于提供服务器验证用户代理身
 
 **`Authorization`** 标头通常在用户代理首次尝试请求受保护的资源（没有携带凭据）之后发送的，但并不总是发送。服务器响应一条 {{HTTPStatus("401")}} `Unauthorized` 信息，其中包含至少一个 {{HTTPHeader("WWW-Authenticate")}} 标头。该标头表示哪些身份验证的方案可用于访问资源（以及客户端使用它们时需要的额外的信息）。用户代理应该从这些提供的身份验证方案中选择它支持的最安全的身份验证方案，并提示用户提供凭据，然后重新获取资源（包含 **`Authorization`** 标头中编码的凭据）。
 
-> **备注：** 此标头是[通用的 HTTP 认证框架](/zh-CN/docs/Web/HTTP/Authentication#通用的_http_认证框架)的一部分。它可以与许多[身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)一起使用。
+> [!NOTE]
+> 此标头是[通用的 HTTP 认证框架](/zh-CN/docs/Web/HTTP/Authentication#通用的_http_认证框架)的一部分。它可以与许多[身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)一起使用。
 
 <table class="properties">
   <tbody>
@@ -59,7 +60,8 @@ Authorization: Digest username=<username>,
 
   - : [身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)定义了凭据如何编码。一些常见的类型是（不区分大小写）：[`Basic`](/zh-CN/docs/Web/HTTP/Authentication#basic_验证方案)、`Digest`、`Negotiate` 和 `AWS4-HMAC-SHA256`。
 
-    > **备注：** 有关更多信息或选项，请参阅 [HTTP 身份验证 > 身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)
+    > [!NOTE]
+    > 有关更多信息或选项，请参阅 [HTTP 身份验证 > 身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)
 
 除 `<auth-scheme>` 外，其余指令特定于每个[身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)。通常，你需要检查这些方案的相关规范（下面列出了一小部分方案的要点）。
 
@@ -69,7 +71,8 @@ Authorization: Digest username=<username>,
 
   - : 凭据，根据指定的方案编码。
 
-    > **备注：** 有关编码算法的信息，请参阅以下示例：{{HTTPHeader("WWW-Authenticate")}}、[HTTP 身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)和相关规范。
+    > [!NOTE]
+    > 有关编码算法的信息，请参阅以下示例：{{HTTPHeader("WWW-Authenticate")}}、[HTTP 身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)和相关规范。
 
 ### Digest
 
diff --git a/files/zh-cn/web/http/headers/connection/index.md b/files/zh-cn/web/http/headers/connection/index.md
index 306aa33ad62036..40c8174b27429d 100644
--- a/files/zh-cn/web/http/headers/connection/index.md
+++ b/files/zh-cn/web/http/headers/connection/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Connection
 
 **`Connection`** 通用标头控制网络连接在当前会话完成后是否仍然保持打开状态。如果发送的值是 `keep-alive`，则连接是持久的，不会关闭，允许对同一服务器进行后续请求。
 
-> **警告：** 在 [HTTP/2](https://httpwg.org/specs/rfc9113.html#ConnectionSpecific) 和 [HTTP/3](https://httpwg.org/specs/rfc9114.html#header-formatting) 中，禁止使用特定于连接的标头字段，如 `Connection` 和 `Keep-Alive`。Chrome 和 Firefox 会在 HTTP/2 响应中忽略它们，但 Safari 遵循 HTTP/2 规范要求，不会加载包含这些字段的任何响应。
+> [!WARNING]
+> 在 [HTTP/2](https://httpwg.org/specs/rfc9113.html#ConnectionSpecific) 和 [HTTP/3](https://httpwg.org/specs/rfc9114.html#header-formatting) 中，禁止使用特定于连接的标头字段，如 `Connection` 和 `Keep-Alive`。Chrome 和 Firefox 会在 HTTP/2 响应中忽略它们，但 Safari 遵循 HTTP/2 规范要求，不会加载包含这些字段的任何响应。
 
 除去标准的逐段传输（hop-by-hop）头（{{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} and {{HTTPHeader("Proxy-Authenticate")}}），任何逐段传输头都需要在 Connection 头中列出，这样才能让第一个代理知道必须处理它们且不转发这些头。标准的逐段传输头也可以列出（常见的例子是 {{HTTPHeader("Keep-Alive")}}，但这不是必须的）。
 
diff --git a/files/zh-cn/web/http/headers/content-disposition/index.md b/files/zh-cn/web/http/headers/content-disposition/index.md
index 11a15f97b0fdfa..a051a35dd10fa0 100644
--- a/files/zh-cn/web/http/headers/content-disposition/index.md
+++ b/files/zh-cn/web/http/headers/content-disposition/index.md
@@ -39,7 +39,8 @@ Content-Disposition: attachment
 Content-Disposition: attachment; filename="filename.jpg"
 ```
 
-> **备注：** 在[同源 URL](/zh-CN/docs/Web/Security/Same-origin_policy)情况下，Chrome 和 Firefox 82 以及更高的版本会优先使用 HTML 的 [\<a> 元素](/zh-CN/docs/Web/HTML/Element/a)的 `download` 属性而不是 `Content-Disposition: inline` 参数来处理下载。而 Firefox 的早期版本则优先使用标头信息并内联显示内容。
+> [!NOTE]
+> 在[同源 URL](/zh-CN/docs/Web/Security/Same-origin_policy)情况下，Chrome 和 Firefox 82 以及更高的版本会优先使用 HTML 的 [\<a> 元素](/zh-CN/docs/Web/HTML/Element/a)的 `download` 属性而不是 `Content-Disposition: inline` 参数来处理下载。而 Firefox 的早期版本则优先使用标头信息并内联显示内容。
 
 ### 作为多部分主体的标头
 
diff --git a/files/zh-cn/web/http/headers/content-language/index.md b/files/zh-cn/web/http/headers/content-language/index.md
index 8207be44d31b0f..7ec8f156466880 100644
--- a/files/zh-cn/web/http/headers/content-language/index.md
+++ b/files/zh-cn/web/http/headers/content-language/index.md
@@ -30,7 +30,8 @@ Content-Language: de-DE, en-CA
 - `language-tag`
   - : 多个语言标签需要用逗号隔开。每一个语言标签都是由一个或多个不区分大小写的子标签构成的，子标签之间用连字号 ("-", %x2D) 隔开。通常情况下，一个语言标签是由标识一个大的语言家族的主语言子标签（例如"en" = English），以及后面可选的用来缩小语言范围使更确切的一系列子标签（"en-CA" 表示在加拿大范围使用的英语的变种）构成的。
 
-> **备注：** 语言标签在 [RFC 5646](https://tools.ietf.org/html/rfc5646)中被正式定义，它使用的[语言代码](https://en.wikipedia.org/wiki/Language_code)依赖于 [ISO 639](https://en.wikipedia.org/wiki/ISO_639) 标准 (通常为 [ISO 639-1 code list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)) 。
+> [!NOTE]
+> 语言标签在 [RFC 5646](https://tools.ietf.org/html/rfc5646)中被正式定义，它使用的[语言代码](https://en.wikipedia.org/wiki/Language_code)依赖于 [ISO 639](https://en.wikipedia.org/wiki/ISO_639) 标准 (通常为 [ISO 639-1 code list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)) 。
 
 ## 示例
 
diff --git a/files/zh-cn/web/http/headers/content-security-policy/connect-src/index.md b/files/zh-cn/web/http/headers/content-security-policy/connect-src/index.md
index f2f70d9642ccbd..81b9643f6eca93 100644
--- a/files/zh-cn/web/http/headers/content-security-policy/connect-src/index.md
+++ b/files/zh-cn/web/http/headers/content-security-policy/connect-src/index.md
@@ -14,7 +14,8 @@ HTTP {{HTTPHeader("Content-Security-Policy")}}（内容安全策略，CSP）中
 - {{domxref("EventSource")}}
 - {{domxref("Navigator.sendBeacon()")}}
 
-> **备注：** 并不是所有浏览器都能将 `connect-src 'self'` 解析为 websocket 协议，更多信息，请查看这个 [issue](https://github.com/w3c/webappsec-csp/issues/7)。
+> [!NOTE]
+> 并不是所有浏览器都能将 `connect-src 'self'` 解析为 websocket 协议，更多信息，请查看这个 [issue](https://github.com/w3c/webappsec-csp/issues/7)。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/content-security-policy/form-action/index.md b/files/zh-cn/web/http/headers/content-security-policy/form-action/index.md
index 57e1a24ed2a50b..006c45cef63cdb 100644
--- a/files/zh-cn/web/http/headers/content-security-policy/form-action/index.md
+++ b/files/zh-cn/web/http/headers/content-security-policy/form-action/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Content-Security-Policy/form-action
 
 HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) 的 **`form-action`** 指令能够限定当前页面中表单的提交地址。
 
-> **警告：** 在表单提交之后， `form-action` 指令是否应该阻止重定向仍有待讨论，各个浏览器对于此行为的实现也不尽相同（例如，Chrome 63 会阻止重定向，而 Firefox 57 则不会）。
+> [!WARNING]
+> 在表单提交之后， `form-action` 指令是否应该阻止重定向仍有待讨论，各个浏览器对于此行为的实现也不尽相同（例如，Chrome 63 会阻止重定向，而 Firefox 57 则不会）。
 
 | CSP version                     | 2                                    |
 | ------------------------------- | ------------------------------------ |
diff --git a/files/zh-cn/web/http/headers/content-security-policy/index.md b/files/zh-cn/web/http/headers/content-security-policy/index.md
index 2a62c57843953e..16a38fec208b30 100644
--- a/files/zh-cn/web/http/headers/content-security-policy/index.md
+++ b/files/zh-cn/web/http/headers/content-security-policy/index.md
@@ -27,7 +27,8 @@ Content-Security-Policy: <policy-directive>; <policy-directive>
 
   - : **child-src**：为 [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API) 和其他内嵌浏览器内容（例如用 {{HTMLElement("frame")}} 和 {{HTMLElement("iframe")}} 加载到页面的内容）定义合法的源地址。
 
-    > **警告：** 如果开发者希望管控内嵌浏览器内容和 web worker 应分别使用 {{CSP("frame-src")}} 和 {{CSP("worker-src")}} 指令，来相对的取代 **`child-src`**。
+    > [!WARNING]
+    > 如果开发者希望管控内嵌浏览器内容和 web worker 应分别使用 {{CSP("frame-src")}} 和 {{CSP("worker-src")}} 指令，来相对的取代 **`child-src`**。
 
 - {{CSP("connect-src")}}
   - : **connect-src**：限制能通过脚本接口加载的 URL。
@@ -46,7 +47,8 @@ Content-Security-Policy: <policy-directive>; <policy-directive>
 - {{CSP("object-src")}}
   - : **object-src**：限制 {{HTMLElement("object")}} 或 {{HTMLElement("embed")}} 标签的源地址。
 
-> **备注：** 被 `object-src` 控制的元素可能碰巧被当作遗留 HTML 元素，导致不支持新标准中的功能（例如 `<iframe>` 中的安全属性 `sandbox` 和 `allow`）。因此**建议**限制该指令的使用（比如，如果可行，将 `object-src` 显式设置为 `'none'`）。
+> [!NOTE]
+> 被 `object-src` 控制的元素可能碰巧被当作遗留 HTML 元素，导致不支持新标准中的功能（例如 `<iframe>` 中的安全属性 `sandbox` 和 `allow`）。因此**建议**限制该指令的使用（比如，如果可行，将 `object-src` 显式设置为 `'none'`）。
 
 - {{CSP("prefetch-src")}}
   - : 指定预加载或预渲染的允许源地址。
diff --git a/files/zh-cn/web/http/headers/date/index.md b/files/zh-cn/web/http/headers/date/index.md
index 8509420099f165..e4853390c68a92 100644
--- a/files/zh-cn/web/http/headers/date/index.md
+++ b/files/zh-cn/web/http/headers/date/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Date`** 通用 HTTP 标头包含了消息创建时的日期和时间。
 
-> **警告：** 在 fetch 规范中，`Date` 被列为[禁止修改的标头](https://fetch.spec.whatwg.org/#forbidden-header-name)，因此这段代码不会发送 `Date` 标头：
+> [!WARNING]
+> 在 fetch 规范中，`Date` 被列为[禁止修改的标头](https://fetch.spec.whatwg.org/#forbidden-header-name)，因此这段代码不会发送 `Date` 标头：
 >
 > ```js
 > fetch("https://httpbin.org/get", {
diff --git a/files/zh-cn/web/http/headers/expect-ct/index.md b/files/zh-cn/web/http/headers/expect-ct/index.md
index 1607bf62b40a49..62122c4154d745 100644
--- a/files/zh-cn/web/http/headers/expect-ct/index.md
+++ b/files/zh-cn/web/http/headers/expect-ct/index.md
@@ -13,9 +13,11 @@ slug: Web/HTTP/Headers/Expect-CT
 - 握手期间发送的 `signed_certificate_timestamp` 类型的 TLS 扩展
 - 支持 OCSP 装订（即，`status_request` TLS 扩展）并提供 `SignedCertificateTimestampList`
 
-> **备注：** 当站点启用 `Expect-CT` 标头时，会要求浏览器检查当前站点的证书是否出现在[**公共证书透明度日志**](https://github.com/google/certificate-transparency-community-site/blob/master/docs/google/known-logs.md)之中。
+> [!NOTE]
+> 当站点启用 `Expect-CT` 标头时，会要求浏览器检查当前站点的证书是否出现在[**公共证书透明度日志**](https://github.com/google/certificate-transparency-community-site/blob/master/docs/google/known-logs.md)之中。
 
-> **备注：** 浏览器会**忽略** HTTP 连接的 `Expect-CT` 标头；该标头仅在 HTTPS 连接中有效。
+> [!NOTE]
+> 浏览器会**忽略** HTTP 连接的 `Expect-CT` 标头；该标头仅在 HTTPS 连接中有效。
 
 > **备注：** `Expect-CT` 标头可能会在 2021 年 6 月废弃。从 2018 年 5 月起，新的证书默认支持证书签署时间戳（SCT）。2018 年 3 月之前的证书的有效期为 39 个月，这些证书都会在 2021 年 6 月前过期。
 
diff --git a/files/zh-cn/web/http/headers/expires/index.md b/files/zh-cn/web/http/headers/expires/index.md
index 9983e40bb53089..e4370161efae0e 100644
--- a/files/zh-cn/web/http/headers/expires/index.md
+++ b/files/zh-cn/web/http/headers/expires/index.md
@@ -11,7 +11,8 @@ l10n:
 
 无效的日期（比如 0）代表过去的日期，即该资源已经过期。
 
-> **备注：** 如果响应中有指令为 `max-age` 或 `s-maxage` 的 {{HTTPHeader("Cache-Control")}} 标头，则 `Expires` 标头会被忽略。
+> [!NOTE]
+> 如果响应中有指令为 `max-age` 或 `s-maxage` 的 {{HTTPHeader("Cache-Control")}} 标头，则 `Expires` 标头会被忽略。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/from/index.md b/files/zh-cn/web/http/headers/from/index.md
index fe265aa2440e62..45a51a4a35fcc0 100644
--- a/files/zh-cn/web/http/headers/from/index.md
+++ b/files/zh-cn/web/http/headers/from/index.md
@@ -11,7 +11,8 @@ l10n:
 
 如果运行的是机器人用户代理（如爬虫），则必须发送 `From` 标头，以便在服务器出现问题（例如机器人发送过多、不希望收到或无效的请求）时与你联系。
 
-> **警告：** 不可以将 `From` 标头用于访问控制或身份验证。
+> [!WARNING]
+> 不可以将 `From` 标头用于访问控制或身份验证。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/keep-alive/index.md b/files/zh-cn/web/http/headers/keep-alive/index.md
index ba6def1185c41d..d6d36bb96da7f7 100644
--- a/files/zh-cn/web/http/headers/keep-alive/index.md
+++ b/files/zh-cn/web/http/headers/keep-alive/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Keep-Alive
 
 **`Keep-Alive`** 是一个通用消息头，允许消息发送者暗示连接的状态，还可以用来设置超时时长和最大请求数。
 
-> **备注：** 需要将 The {{HTTPHeader("Connection")}} 首部的值设置为 "keep-alive" 这个首部才有意义。同时需要注意的是，在 HTTP/2 协议中， {{HTTPHeader("Connection")}} 和 {{HTTPHeader("Keep-Alive")}} 是被忽略的；在其中采用其他机制来进行连接管理。
+> [!NOTE]
+> 需要将 The {{HTTPHeader("Connection")}} 首部的值设置为 "keep-alive" 这个首部才有意义。同时需要注意的是，在 HTTP/2 协议中， {{HTTPHeader("Connection")}} 和 {{HTTPHeader("Keep-Alive")}} 是被忽略的；在其中采用其他机制来进行连接管理。
 
 | Header type                           | {{Glossary("General header")}} |
 | ------------------------------------- | ------------------------------ |
diff --git a/files/zh-cn/web/http/headers/origin/index.md b/files/zh-cn/web/http/headers/origin/index.md
index ee4e6de172dd5d..6a8e7ada5044b3 100644
--- a/files/zh-cn/web/http/headers/origin/index.md
+++ b/files/zh-cn/web/http/headers/origin/index.md
@@ -59,7 +59,8 @@ Origin: <scheme>://<hostname>:<port>
 - 没有为 sandbox 属性设置 `allow-same-origin` 值的 iframe。
 - 响应（response）是网络错误。
 
-> **备注：** 了解更详细的关于其值何时为 `null` 的清单，请参见 Stack Overflow：[When do browsers send the Origin header? When do browsers set the origin to null?](https://stackoverflow.com/a/42242802/)。
+> [!NOTE]
+> 了解更详细的关于其值何时为 `null` 的清单，请参见 Stack Overflow：[When do browsers send the Origin header? When do browsers set the origin to null?](https://stackoverflow.com/a/42242802/)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/http/headers/permissions-policy/autoplay/index.md b/files/zh-cn/web/http/headers/permissions-policy/autoplay/index.md
index 2868ddf1d501d7..27ffa6973be259 100644
--- a/files/zh-cn/web/http/headers/permissions-policy/autoplay/index.md
+++ b/files/zh-cn/web/http/headers/permissions-policy/autoplay/index.md
@@ -11,7 +11,8 @@ HTTP {{HTTPHeader("Permissions-Policy")}} 标头的 `autoplay` 指令控制当
 
 具体来说，如果定义的策略阻止使用此特性并且没有用户手势，{{domxref("HTMLMediaElement.play()")}} 返回的 {{jsxref("Promise")}} 将以 {{domxref("DOMException")}} 被拒绝。{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素上的 [`autoplay`](/zh-CN/docs/Web/HTML/Element/audio#autoplay) 属性将被忽略。
 
-> **备注：** 有关自动播放和自动播放阻止的更多详细信息，请参阅文章[媒体和 Web Audio API 的自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
+> [!NOTE]
+> 有关自动播放和自动播放阻止的更多详细信息，请参阅文章[媒体和 Web Audio API 的自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/http/headers/pragma/index.md b/files/zh-cn/web/http/headers/pragma/index.md
index 9fde2f5bb2b72b..125698ac96e081 100644
--- a/files/zh-cn/web/http/headers/pragma/index.md
+++ b/files/zh-cn/web/http/headers/pragma/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Pragma
 
 **`Pragma`** 是一个在 HTTP/1.0 中规定的通用首部，这个首部的效果依赖于不同的实现，所以在“请求 - 响应”链中可能会有不同的效果。它用来向后兼容只支持 HTTP/1.0 协议的缓存服务器，那时候 HTTP/1.1 协议中的 Cache-Control 还没有出来。
 
-> **备注：** 由于 Pragma 在 HTTP 响应中的行为没有确切规范，所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control，尽管在请求中，假如 Cache-Control 不存在的话，它的行为与 Cache-Control: no-cache 一致。建议只在需要兼容 HTTP/1.0 客户端的场合下应用 Pragma 首部。
+> [!NOTE]
+> 由于 Pragma 在 HTTP 响应中的行为没有确切规范，所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control，尽管在请求中，假如 Cache-Control 不存在的话，它的行为与 Cache-Control: no-cache 一致。建议只在需要兼容 HTTP/1.0 客户端的场合下应用 Pragma 首部。
 
 | Header type                                                               | {{Glossary("General header")}}, but response behavior is not specified and thus implementation-specific. |
 | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
diff --git a/files/zh-cn/web/http/headers/proxy-authorization/index.md b/files/zh-cn/web/http/headers/proxy-authorization/index.md
index debdf63596b6a4..e512686e83a1ea 100644
--- a/files/zh-cn/web/http/headers/proxy-authorization/index.md
+++ b/files/zh-cn/web/http/headers/proxy-authorization/index.md
@@ -28,7 +28,8 @@ Proxy-Authorization: <type> <credentials>
     - 将用户名和密码用冒号拼接（aladdin:opensesame）。
     - 将拼接生成的字符串使用 [base64](/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) 编码方式进行编码（YWxhZGRpbjpvcGVuc2VzYW1l）。
 
-    > **备注：** Base64 编码方式不是用来加密或者获取摘要的！这种方法的安全性相当于将凭证使用明文发送（base64 是一种可逆编码方式）。在使用基本身份验证方式的时候推荐与 HTTPS 搭配使用。
+    > [!NOTE]
+    > Base64 编码方式不是用来加密或者获取摘要的！这种方法的安全性相当于将凭证使用明文发送（base64 是一种可逆编码方式）。在使用基本身份验证方式的时候推荐与 HTTPS 搭配使用。
 
 ## 示例
 
diff --git a/files/zh-cn/web/http/headers/referrer-policy/index.md b/files/zh-cn/web/http/headers/referrer-policy/index.md
index a4bb966a114caa..6c8aeb0a960a37 100644
--- a/files/zh-cn/web/http/headers/referrer-policy/index.md
+++ b/files/zh-cn/web/http/headers/referrer-policy/index.md
@@ -46,7 +46,8 @@ Referrer-Policy: unsafe-url
 
   - : 无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址。
 
-    > **备注：** 这项设置会将受 TLS 安全协议保护的资源的源和路径信息泄露给非安全的源服务器。进行此项设置的时候要慎重考虑。
+    > [!NOTE]
+    > 这项设置会将受 TLS 安全协议保护的资源的源和路径信息泄露给非安全的源服务器。进行此项设置的时候要慎重考虑。
 
 ## 集成到 HTML
 
@@ -115,7 +116,8 @@ Referrer-Policy: no-referrer, strict-origin-when-cross-origin
 
 {{Compat}}
 
-> **备注：** 从版本 53 起，Gecko 在 about:config 中提供了一项偏好设置，使得用户可以自行设定默认的 Referrer-Policy 值——network.http.referer.userControlPolicy。可选的值包括：
+> [!NOTE]
+> 从版本 53 起，Gecko 在 about:config 中提供了一项偏好设置，使得用户可以自行设定默认的 Referrer-Policy 值——network.http.referer.userControlPolicy。可选的值包括：
 
 - 0 — `no-referrer`
 - 1 — `same-origin`
diff --git a/files/zh-cn/web/http/headers/save-data/index.md b/files/zh-cn/web/http/headers/save-data/index.md
index 81358fd664c4ab..290fd38bee3c74 100644
--- a/files/zh-cn/web/http/headers/save-data/index.md
+++ b/files/zh-cn/web/http/headers/save-data/index.md
@@ -9,7 +9,8 @@ Save-Data 请求头字段是一个布尔值，在请求中，表示客户端对
 
 值为 on 时，明确表示用户选择使用客户端简化数据使用模式，并且当与源进行通信时允许他们提供替代内容以减少下载的数据，例如较小的图像和视频资源，不同的标记和样式，禁用轮询和自动更新等。
 
-> **备注：** 禁用 HTTP/2 服务器端推送 ({{RFC("7540", "Server Push", "8.2")}}) 也可以用于减少数据下载。
+> [!NOTE]
+> 禁用 HTTP/2 服务器端推送 ({{RFC("7540", "Server Push", "8.2")}}) 也可以用于减少数据下载。
 
 ## 语法
 
diff --git a/files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md b/files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md
index 1fd4db2ccd6704..36abc91a954274 100644
--- a/files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md
+++ b/files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md
@@ -30,7 +30,8 @@ slug: Web/HTTP/Headers/Sec-CH-UA-Full-Version-List
 
 标头可能包含任何位置和任何名称的“假冒”品牌。此功能旨在防止服务器直接拒绝未知用户代理，迫使用户代理在其品牌标识上撒谎。
 
-> **备注：** 这类似于 {{HTTPHeader("Sec-CH-UA")}}，但包含完整的版本号，而不是每个品牌的重要版本号。
+> [!NOTE]
+> 这类似于 {{HTTPHeader("Sec-CH-UA")}}，但包含完整的版本号，而不是每个品牌的重要版本号。
 
 ## 语法
 
diff --git a/files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md b/files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md
index ccb9dccf3f3c92..5b2c01fd7c8df5 100644
--- a/files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md
+++ b/files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md
@@ -5,7 +5,8 @@ slug: Web/HTTP/Headers/Sec-CH-UA-Full-Version
 
 {{HTTPSidebar}} {{deprecated_header}} {{securecontext_header}}
 
-> **备注：** 这个标头将被 {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} 替代。
+> [!NOTE]
+> 这个标头将被 {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} 替代。
 
 **`Sec-CH-UA-Full-Version`** [用户代理客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#user-agent_client_hints)请求标头提供用户代理完整的版本字符串。
 
diff --git a/files/zh-cn/web/http/headers/sec-fetch-dest/index.md b/files/zh-cn/web/http/headers/sec-fetch-dest/index.md
index b7a183e7295a23..ce43be124a2102 100644
--- a/files/zh-cn/web/http/headers/sec-fetch-dest/index.md
+++ b/files/zh-cn/web/http/headers/sec-fetch-dest/index.md
@@ -58,7 +58,8 @@ Sec-Fetch-Dest: xslt
 
 ## 指令
 
-> **备注：** 这些指令对应于 {{domxref("Request.destination")}} 返回的值。
+> [!NOTE]
+> 这些指令对应于 {{domxref("Request.destination")}} 返回的值。
 
 - `audio`
   - : 目标是音频数据。这可能源自 HTML {{HTMLElement("audio")}} 标签。
diff --git a/files/zh-cn/web/http/headers/server/index.md b/files/zh-cn/web/http/headers/server/index.md
index 309bdb189ebe21..ab12667885bc94 100644
--- a/files/zh-cn/web/http/headers/server/index.md
+++ b/files/zh-cn/web/http/headers/server/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Server`** 标头描述了处理请求的源服务器（即生成响应的服务器）所使用的软件。
 
-> **警告：** 避免使用过于详细的 `Server` 值，因为它们可能会透露信息，使攻击者（更容易）利用已知的安全漏洞。
+> [!WARNING]
+> 避免使用过于详细的 `Server` 值，因为它们可能会透露信息，使攻击者（更容易）利用已知的安全漏洞。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/set-cookie/index.md b/files/zh-cn/web/http/headers/set-cookie/index.md
index 31750792b6f2a7..3b65837e12006d 100644
--- a/files/zh-cn/web/http/headers/set-cookie/index.md
+++ b/files/zh-cn/web/http/headers/set-cookie/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Set-Cookie`** HTTP 响应标头用于将 cookie 由服务器发送到用户代理，以便用户代理在后续的请求中可以将其发送回服务器。要发送多个 cookie，则应在同一响应中发送多个 **`Set-Cookie`** 标头。
 
-> **警告：** 根据 Fetch 规范，`Set-Cookie` 是一个[禁止修改的响应标头](https://fetch.spec.whatwg.org/#forbidden-response-header-name)，对应的响应在被暴露给前端代码前，[必须滤除](https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0)这一响应标头，即浏览器会阻止前端 JavaScript 代码访问该标头。
+> [!WARNING]
+> 根据 Fetch 规范，`Set-Cookie` 是一个[禁止修改的响应标头](https://fetch.spec.whatwg.org/#forbidden-response-header-name)，对应的响应在被暴露给前端代码前，[必须滤除](https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0)这一响应标头，即浏览器会阻止前端 JavaScript 代码访问该标头。
 
 更多信息请查阅指南：[使用 HTTP cookie](/zh-CN/docs/Web/HTTP/Cookies)。
 
@@ -62,7 +63,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
 
     **编码**：许多实现会对 cookie 值进行 [URL 编码](https://zh.wikipedia.org/wiki/百分号编码)。但是按照 RFC 规范，这不是必须的。不过 URL 编码有助于满足 `<cookie-value>` 对允许使用的字符的要求。
 
-    > **备注：** 一些 `<cookie-name>` 具有特殊的语义：
+    > [!NOTE]
+    > 一些 `<cookie-name>` 具有特殊的语义：
     >
     > **`__Secure-` 前缀**：以 `__Secure-` 为前缀的 cookie（连接符是前缀的一部分），必须与 `secure` 标志一同设置，同时必须应用于安全页面（HTTPS）。
     >
@@ -86,7 +88,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
 
     如果没有指定，那么会是一个**会话期 cookie**。会话在客户端被关闭时结束，这意味着会话期 cookie 会在彼时被移除。
 
-    > **警告：** 然而，很多 Web 浏览器支持*会话恢复*特性，这可以使浏览器保留所有的标签，然后在重新打开浏览器的时候将其还原。与此同时，cookie 也会恢复，就跟从来没有关闭浏览器一样。
+    > [!WARNING]
+    > 然而，很多 Web 浏览器支持*会话恢复*特性，这可以使浏览器保留所有的标签，然后在重新打开浏览器的时候将其还原。与此同时，cookie 也会恢复，就跟从来没有关闭浏览器一样。
 
     如果设置了 `Expires` 日期，其截止时间与*客户端*相关，而非服务器的时间。
 
@@ -131,7 +134,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnl
 
   - : 表示仅当请求通过 `https:` 协议（localhost 不受此限制）发送时才会将该 cookie 发送到服务器，因此其更能够抵抗[中间人](/zh-CN/docs/Glossary/MitM)攻击。
 
-    > **备注：** 不要假设 `Secure` 会阻止所有的对 cookie 中敏感信息（会话密钥、登录信息，等等）的访问。携带这一属性的 cookie 在不设置 `HttpOnly` 属性的情况下仍能从客户端的硬盘或是从 JavaScript 中访问及更改。
+    > [!NOTE]
+    > 不要假设 `Secure` 会阻止所有的对 cookie 中敏感信息（会话密钥、登录信息，等等）的访问。携带这一属性的 cookie 在不设置 `HttpOnly` 属性的情况下仍能从客户端的硬盘或是从 JavaScript 中访问及更改。
     >
     > 非安全站点（`http:`）不能在 cookie 中设置 `Secure` 属性（从 Chrome 52 和 Firefox 52 开始）。当 `Secure` 属性由 localhost 设置时，`https:` 的要求会被忽略（从 Chrome 89 和 Firefox 75 开始）。
 
@@ -181,7 +185,8 @@ Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com
 
 另外，假如 cookie 以 `__Host-` 为前缀，那么 path 属性的值必须为 `/`（表示主机的任何路径），且不能含有 `Domain` 属性。
 
-> **警告：** 对于不支持 cookie 前缀的客户端，无法保证这些附加的条件成立，所以带前缀的 cookie 将始终被接受。
+> [!WARNING]
+> 对于不支持 cookie 前缀的客户端，无法保证这些附加的条件成立，所以带前缀的 cookie 将始终被接受。
 
 ```http
 // 当响应来自安全来源（HTTPS）时，二者都会被接受
@@ -204,7 +209,8 @@ Set-Cookie: __Host-id=1; Secure; Path=/; domain=example.com
 Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
 ```
 
-> **备注：** 分区 cookie 必须设置 `Secure` 和 `Path=/`。此外，建议在设置分区 cookie 时使用 `__Host` 前缀，以使其绑定到主机名而不是可注册的域名。
+> [!NOTE]
+> 分区 cookie 必须设置 `Secure` 和 `Path=/`。此外，建议在设置分区 cookie 时使用 `__Host` 前缀，以使其绑定到主机名而不是可注册的域名。
 
 ## 规范
 
diff --git a/files/zh-cn/web/http/headers/strict-transport-security/index.md b/files/zh-cn/web/http/headers/strict-transport-security/index.md
index 90dcf99086034c..fd5215d1bc3dfd 100644
--- a/files/zh-cn/web/http/headers/strict-transport-security/index.md
+++ b/files/zh-cn/web/http/headers/strict-transport-security/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Strict-Transport-Security
 
 HTTP **`Strict-Transport-Security`**（通常简称为 {{Glossary("HSTS")}}）响应标头用来通知浏览器应该只通过 HTTPS 访问该站点，并且以后使用 HTTP 访问该站点的所有尝试都应自动重定向到 HTTPS。
 
-> **备注：** 这比在你的服务器上简单地配置 HTTP 到 HTTPS（301）重定向要安全，因为初始的 HTTP 连接仍然易受到中间人攻击。
+> [!NOTE]
+> 这比在你的服务器上简单地配置 HTTP 到 HTTPS（301）重定向要安全，因为初始的 HTTP 连接仍然易受到中间人攻击。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/trailer/index.md b/files/zh-cn/web/http/headers/trailer/index.md
index 89c7193c8fe711..1cd00c01ef63d6 100644
--- a/files/zh-cn/web/http/headers/trailer/index.md
+++ b/files/zh-cn/web/http/headers/trailer/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/Trailer
 
 **Trailer** 是一个响应首部，允许发送方在分块发送的消息后面添加额外的元信息，这些元信息可能是随着消息主体的发送动态生成的，比如消息的完整性校验，消息的数字签名，或者消息经过处理之后的最终状态等。
 
-> **备注：** 请求首部 {{HTTPHeader("TE")}} 需要设置 trailers 来允许挂载字段。
+> [!NOTE]
+> 请求首部 {{HTTPHeader("TE")}} 需要设置 trailers 来允许挂载字段。
 
 | Header type                           | {{Glossary("Response header")}} |
 | ------------------------------------- | ------------------------------- |
diff --git a/files/zh-cn/web/http/headers/user-agent/firefox/index.md b/files/zh-cn/web/http/headers/user-agent/firefox/index.md
index d0efcdecfb73eb..fb6979bf40da22 100644
--- a/files/zh-cn/web/http/headers/user-agent/firefox/index.md
+++ b/files/zh-cn/web/http/headers/user-agent/firefox/index.md
@@ -23,7 +23,8 @@ Firefox 的用户代理字符串可被拆分为以下四个部分：
 - `Firefox/firefoxversion` 表示浏览器是 Firefox，并提供版本（如“`17.0`”）。
 - 从移动版 Firefox 10 开始，`geckotrail` 与 `firefoxversion` 相同。
 
-> **备注：** 嗅探基于 Gecko 的浏览器（如果你*必须*嗅探浏览器引擎而不是使用特性检测）的推荐方法是检测“`Gecko`”和“`rv:`”字符串是否存在，因为某些其他浏览器包含"`like Gecko`"标记。
+> [!NOTE]
+> 嗅探基于 Gecko 的浏览器（如果你*必须*嗅探浏览器引擎而不是使用特性检测）的推荐方法是检测“`Gecko`”和“`rv:`”字符串是否存在，因为某些其他浏览器包含"`like Gecko`"标记。
 
 对于其他基于 Gecko 的产品，UA 字符串会符合以下两个规则中的一个，除了下面的描述外，其他字段与上面描述的意义相同。
 
@@ -44,11 +45,13 @@ Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0
 Mozilla/5.0 (Android 4.4; Tablet; rv:41.0) Gecko/41.0 Firefox/41.0
 ```
 
-> **备注：** 版本号无关。请避免据此推断材料。
+> [!NOTE]
+> 版本号无关。请避免据此推断材料。
 
 将内容定位到设备外形尺寸的首选方法是使用 CSS 媒体查询。但是，如果你使用 UA 嗅探将内容定位到设备外形，请在手机外形中查找 **Mobi**（包括使用 "Mobi "的 Opera Mobile），而**不要**假设“Android”与设备外形之间存在任何关联。这样，如果 Firefox 浏览器采用其他手机/平板电脑操作系统，或者笔记本电脑采用 Android 系统，你的代码也能正常工作。此外，请使用触摸检测来查找触摸设备，而不是查找“Mobi”或“Tablet”，因为可能存在不是平板电脑的触摸设备。
 
-> **备注：** Firefox OS 设备在标识自己时不标注任何操作系统，例如“Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0”。web 就是它的平台。
+> [!NOTE]
+> Firefox OS 设备在标识自己时不标注任何操作系统，例如“Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0”。web 就是它的平台。
 
 ## Windows
 
@@ -178,7 +181,8 @@ Mozilla/5.0 (Linux; <Android version>) AppleWebKit/537.36 (KHTML, like Gecko) Ve
 | 2.2               | 37           |
 | 2.5               | 44           |
 
-> **备注：** 通过查看 [Mercurial 版本库名称](https://hg.mozilla.org/releases)，可以较容易地找出对应关系。其中以 `mozilla-b2g` 开头的发布便属于 Firefox OS，在其名字中包含了 Firefox OS 与 Gecko 的版本号。
+> [!NOTE]
+> 通过查看 [Mercurial 版本库名称](https://hg.mozilla.org/releases)，可以较容易地找出对应关系。其中以 `mozilla-b2g` 开头的发布便属于 Firefox OS，在其名字中包含了 Firefox OS 与 Gecko 的版本号。
 
 Firefox OS 的版本号由 4 位数字组成：`X.X.X.Y`。前两位数字由 Mozilla 产品团队决定，表明是包含新特性的版本（如：v1.1, 1.2 等）。第三位数字随安全更新而自增（约 6 周左右），第四位数字由 OEM 维护。
 
diff --git a/files/zh-cn/web/http/headers/user-agent/index.md b/files/zh-cn/web/http/headers/user-agent/index.md
index ac714a3224e04d..8e4c22dc412ca9 100644
--- a/files/zh-cn/web/http/headers/user-agent/index.md
+++ b/files/zh-cn/web/http/headers/user-agent/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **User-Agent** {{Glossary("request header", "请求标头")}}是一个特征字符串，使得服务器和对等网络能够识别发出请求的{{Glossary("user agent", "用户代理")}}的应用程序、操作系统、供应商或版本信息。
 
-> **警告：** 请阅读[使用用户代理字段进行浏览器检测](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)来了解为什么为不同的浏览器提供不同的页面或者服务通常不是一个好主意。
+> [!WARNING]
+> 请阅读[使用用户代理字段进行浏览器检测](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)来了解为什么为不同的浏览器提供不同的页面或者服务通常不是一个好主意。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/www-authenticate/index.md b/files/zh-cn/web/http/headers/www-authenticate/index.md
index 1e4349739abce1..6430cdc96c34b1 100644
--- a/files/zh-cn/web/http/headers/www-authenticate/index.md
+++ b/files/zh-cn/web/http/headers/www-authenticate/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/WWW-Authenticate
 
 HTTP **`WWW-Authenticate`** 响应标头定义了 [HTTP 身份验证](/zh-CN/docs/Web/HTTP/Authentication)的方法（“质询”），它用于获取特定资源的访问权限。
 
-> **备注：** 该标头是[通用的 HTTP 认证框架](/zh-CN/docs/Web/HTTP/Authentication#通用的_http_认证框架)的一部分，可用于多种[身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)。每个“质询”都列出了服务器支持的方案以及为该方案类型添加的额外参数。
+> [!NOTE]
+> 该标头是[通用的 HTTP 认证框架](/zh-CN/docs/Web/HTTP/Authentication#通用的_http_认证框架)的一部分，可用于多种[身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)。每个“质询”都列出了服务器支持的方案以及为该方案类型添加的额外参数。
 
 使用 [HTTP 身份验证](/zh-CN/docs/Web/HTTP/Authentication)的服务器将以 {{HTTPStatus("401")}} `Unauthorized` 响应去响应受保护资源的请求。该响应必须包含至少一个 `WWW-Authenticate` 标头和至少一个{{Glossary("challenge","质询")}}，以指示使用哪些身份验证方案访问资源（以及每个特定方案的任意额外的数据）。
 
@@ -70,7 +71,8 @@ WWW-Authenticate: Basic realm=<realm>, charset="UTF-8"
 
   - : [身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)。一些更常见的类型是（不区分大小写）：[`Basic`](/zh-CN/docs/Web/HTTP/Authentication#basic_验证方案)、`Digest`、`Negotiate` 和 `AWS4-HMAC-SHA256`。
 
-    > **备注：** 更多信息和选项，请参见 [HTTP 身份验证 > 身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)
+    > [!NOTE]
+    > 更多信息和选项，请参见 [HTTP 身份验证 > 身份验证方案](/zh-CN/docs/Web/HTTP/Authentication#身份验证方案)
 
 - **realm=**\<realm> {{optional_inline}}
   - : 描述受保护区域的字符串。realm 允许服务器对它受保护的区域进行区分（如果允许支持这种划分方案），并通知用户需要哪个特定的用户名/密码。如果未指定 realm，客户端通常会显示格式化的主机名。
@@ -127,11 +129,13 @@ Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
 
 对于 `"Basic"` 身份验证，凭据的构造方式是，首先将用户名和密码与冒号组合（`aladdin:opensesame`），然后将结果字符串编码为 [`base64`](/zh-CN/docs/Glossary/Base64)（`YWxhZGRpbjpvcGVuc2VzYW1l`）。
 
-> **备注：** 有关如何配置 Apache 或 Nginx 服务器以使用 HTTP 基本身份验证密码保护你站点的示例，另请参阅 [HTTP 身份验证](/zh-CN/docs/Web/HTTP/Authentication)。
+> [!NOTE]
+> 有关如何配置 Apache 或 Nginx 服务器以使用 HTTP 基本身份验证密码保护你站点的示例，另请参阅 [HTTP 身份验证](/zh-CN/docs/Web/HTTP/Authentication)。
 
 ### 使用 SHA-256 和 MD5 的 Digest 身份验证
 
-> **备注：** 该示例取自 {{RFC("7616")}}“HTTP Digest Access Authentication”（在规范中的其他示例，展示了 `SHA-512`、`charset` 和 `userhash` 的使用）。
+> [!NOTE]
+> 该示例取自 {{RFC("7616")}}“HTTP Digest Access Authentication”（在规范中的其他示例，展示了 `SHA-512`、`charset` 和 `userhash` 的使用）。
 
 客户端试图访问“`http://www.example.org/dir/index.html`”处的文档，该文档受到 digest 身份验证的保护。这个文档的用户名是“Mufsas”，并且它的密码是“Circle of Life”（注意，每个单词之间的单个空格）。
 
diff --git a/files/zh-cn/web/http/headers/x-forwarded-for/index.md b/files/zh-cn/web/http/headers/x-forwarded-for/index.md
index e50db050e03839..041bfeb66718de 100644
--- a/files/zh-cn/web/http/headers/x-forwarded-for/index.md
+++ b/files/zh-cn/web/http/headers/x-forwarded-for/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Headers/X-Forwarded-For
 
 **`X-Forwarded-For`**（XFF）请求标头是一个事实上的用于标识通过代理服务器连接到 web 服务器的客户端的原始 IP 地址的标头。
 
-> **警告：** 对此标头的不恰当使用可能带来安全风险。有关详细信息，请参阅[安全和隐私考虑](#安全和隐私考虑)。
+> [!WARNING]
+> 对此标头的不恰当使用可能带来安全风险。有关详细信息，请参阅[安全和隐私考虑](#安全和隐私考虑)。
 
 当客户端直接连接到服务器时，其 IP 地址被发送给服务器（并且经常被记录在服务器的访问日志中）。但是如果客户端通过[正向或反向代理服务器](https://zh.wikipedia.org/wiki/代理服务器)进行连接，服务器就只能看到最后一个代理服务器的 IP 地址，这个 IP 通常没什么用。如果最后一个代理服务器是与服务器安装在同一台主机上的负载均衡服务器，则更是如此。`X-Forwarded-For` 的出现，就是为了向服务器提供更有用的客户端 IP 地址。
 
diff --git a/files/zh-cn/web/http/headers/x-frame-options/index.md b/files/zh-cn/web/http/headers/x-frame-options/index.md
index 87b7a2d25d5992..413f114fe906ec 100644
--- a/files/zh-cn/web/http/headers/x-frame-options/index.md
+++ b/files/zh-cn/web/http/headers/x-frame-options/index.md
@@ -46,7 +46,8 @@ X-Frame-Options: SAMEORIGIN
 
 ## 示例
 
-> **备注：** 使用 {{HTMLElement("meta")}} 标签来设置 `X-Frame-Options` 是无效的！例如 `<meta http-equiv="X-Frame-Options" content="deny">` 没有任何效果。不要这样用！只有当像下面示例那样设置 HTTP 头 `X-Frame-Options` 才会生效。
+> [!NOTE]
+> 使用 {{HTMLElement("meta")}} 标签来设置 `X-Frame-Options` 是无效的！例如 `<meta http-equiv="X-Frame-Options" content="deny">` 没有任何效果。不要这样用！只有当像下面示例那样设置 HTTP 头 `X-Frame-Options` 才会生效。
 
 ### 配置 Apache
 
diff --git a/files/zh-cn/web/http/methods/get/index.md b/files/zh-cn/web/http/methods/get/index.md
index db5896c7855e26..47cbc3be64476c 100644
--- a/files/zh-cn/web/http/methods/get/index.md
+++ b/files/zh-cn/web/http/methods/get/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Methods/GET
 
 **HTTP `GET` 方法**请求指定资源的表示。使用 `GET` 的请求应该只用于请求数据，而不应该包含数据。
 
-> **备注：** 在 `GET` 请求中发送请求体或有效载荷可能会导致一些现有的实现拒绝该请求——虽然规范没有禁止，但语义没有定义。最好是避免在 `GET` 请求中发送有效载荷。
+> [!NOTE]
+> 在 `GET` 请求中发送请求体或有效载荷可能会导致一些现有的实现拒绝该请求——虽然规范没有禁止，但语义没有定义。最好是避免在 `GET` 请求中发送有效载荷。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/permissions_policy/index.md b/files/zh-cn/web/http/permissions_policy/index.md
index 97fe394005a527..d48160573d1c93 100644
--- a/files/zh-cn/web/http/permissions_policy/index.md
+++ b/files/zh-cn/web/http/permissions_policy/index.md
@@ -16,7 +16,8 @@ slug: Web/HTTP/Permissions_Policy
 - 允许 iframe 使用[全屏 API](/zh-CN/docs/Web/API/Fullscreen_API)。
 - 如果项目在视口中不可见，则停止对其进行脚本处理，以提高性能。
 
-> **备注：** 权限策略曾经被称为特性策略（Feature Policy）。名字已经改变，HTTP 头的语法也发生了变化，如果你过去使用过特性策略，请记住这一点，并检查浏览器的支持表。`<iframe allow=" ... ">` 的语法是保持不变的。
+> [!NOTE]
+> 权限策略曾经被称为特性策略（Feature Policy）。名字已经改变，HTTP 头的语法也发生了变化，如果你过去使用过特性策略，请记住这一点，并检查浏览器的支持表。`<iframe allow=" ... ">` 的语法是保持不变的。
 
 ## 概念和用法
 
@@ -29,7 +30,8 @@ slug: Web/HTTP/Permissions_Policy
 - API 甚至没有对外暴露，好像它们不存在一样。
 - 控制特性行为的选项有不同的默认值。
 
-> **备注：** 新引入的特性可能有一个明确的 API 来提示状态。后来与权限策略整合的现有特性通常会使用现有机制。
+> [!NOTE]
+> 新引入的特性可能有一个明确的 API 来提示状态。后来与权限策略整合的现有特性通常会使用现有机制。
 
 权限策略允许你控制哪些源可以使用哪些特性，无论是在顶层页面还是在嵌入的 {{htmlelement("iframe")}} 中。其目的是为良好的用户体验执行最佳实践，并对*敏感*或*强大*的特性（指在执行相关代码之前需要用户明确许可使用的特性）提供细化控制。
 
@@ -40,7 +42,8 @@ slug: Web/HTTP/Permissions_Policy
 
 这些是独立的，但又是相关的——详见[嵌入式内容的继承策略](#嵌入式内容的继承策略)。
 
-> **备注：** 脚本可以通过位于 {{DOMxRef("FeaturePolicy")}} 对象的 {{DOMxRef("Document.featurePolicy")}} 或 {{DOMxRef("HTMLIFrameElement.featurePolicy")}} 以编程方式查询权限策略信息。
+> [!NOTE]
+> 脚本可以通过位于 {{DOMxRef("FeaturePolicy")}} 对象的 {{DOMxRef("Document.featurePolicy")}} 或 {{DOMxRef("HTMLIFrameElement.featurePolicy")}} 以编程方式查询权限策略信息。
 
 为了控制每个特性，会撰写包含以下这些方面的策略：
 
@@ -74,7 +77,8 @@ slug: Web/HTTP/Permissions_Policy
 
 值 `*` 和 `()` 只能单独使用，而 `self` 和 `src` 可以与一个或多个源结合使用。
 
-> **备注：** 指令有一个默认的允许列表，对于 `Permissions-Policy` HTTP 标头来说，它总是 `*`'、`self` 或 `none` 之一，如果它们没有明确地列在策略中，则管理默认行为。这些都是在各个[指令参考页](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy#指令)中指定的。对于 `<iframe>` 的 `allow` 属性，默认行为总是 `src`。
+> [!NOTE]
+> 指令有一个默认的允许列表，对于 `Permissions-Policy` HTTP 标头来说，它总是 `*`'、`self` 或 `none` 之一，如果它们没有明确地列在策略中，则管理默认行为。这些都是在各个[指令参考页](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy#指令)中指定的。对于 `<iframe>` 的 `allow` 属性，默认行为总是 `src`。
 
 在支持的情况下，你可以在权限策略源中包括通配符。这意味着你不必在允许列表中明确指定几个不同的子域，而是可以用通配符在一个单一的源中指定它们。
 
@@ -178,7 +182,8 @@ Permissions-Policy: camera=*
 ></iframe>
 ```
 
-> **备注：** 你会注意到，`<iframe>` 策略的语法与 `Permissions-Policy` 标头的语法有些不同。前者仍然使用与旧的特性策略规范相同的语法，它被权限策略所取代。
+> [!NOTE]
+> 你会注意到，`<iframe>` 策略的语法与 `Permissions-Policy` 标头的语法有些不同。前者仍然使用与旧的特性策略规范相同的语法，它被权限策略所取代。
 
 ## 嵌入式内容的继承策略
 
diff --git a/files/zh-cn/web/http/protocol_upgrade_mechanism/index.md b/files/zh-cn/web/http/protocol_upgrade_mechanism/index.md
index 720b2879f0e4c4..5eeef43adb8e96 100644
--- a/files/zh-cn/web/http/protocol_upgrade_mechanism/index.md
+++ b/files/zh-cn/web/http/protocol_upgrade_mechanism/index.md
@@ -44,7 +44,8 @@ webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol");
 
 {{domxref("WebSocket.WebSocket", "WebSocket()")}} 构造函数已经自动完成了发送初始 HTTP/1.1 连接的所有工作，然后为你处理握手及升级过程。
 
-> **备注：** 你也可以用 `"wss://"` URL 方式来打开安全的 WebSocket 连接。
+> [!NOTE]
+> 你也可以用 `"wss://"` URL 方式来打开安全的 WebSocket 连接。
 
 如果想要自己重头实现 WebSocket 连接，就必须要处理握手和升级过程。在创建初始 HTTP/1.1 会话之后，你需要发送另一个 HTTP 标准请求来请求升级，但在标头中要带上 {{HTTPHeader("Upgrade")}} 和 {{HTTPHeader("Connection")}}，也就是：
 
diff --git a/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md b/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md
index bbfa0c2b7da7fe..725a38151619a3 100644
--- a/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md
+++ b/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md
@@ -86,7 +86,8 @@ application/x-ns-proxy-autoconfig
 
 接下来，你应当配置你的服务器，让文件拓展名 .pac 映射到如上所示的 MIME 类型。
 
-> **备注：** PAC 文件的 JavaScript 代码应该总是单独保存到 .pac 文件中，而不是嵌入到 HTML 文件或是任何其他文件之中。
+> [!NOTE]
+> PAC 文件的 JavaScript 代码应该总是单独保存到 .pac 文件中，而不是嵌入到 HTML 文件或是任何其他文件之中。
 >
 > - 本文档末尾的示例都是完整的，使用时不需要增加任何其他代码，直接保存应用即可。（当然，你需要改成你自己的域名/子域）
 
@@ -127,7 +128,8 @@ application/x-ns-proxy-autoconfig
 
   - `ProxyConfig.bindings` {{Deprecated_Inline}}
 
-> **备注：** pactester ([pacparser](https://github.com/pacparser/pacparser) 的一部分) 可以用来检测语法是否符合要求，使用方法如下：
+> [!NOTE]
+> pactester ([pacparser](https://github.com/pacparser/pacparser) 的一部分) 可以用来检测语法是否符合要求，使用方法如下：
 >
 > - PAC 文件保存为 `proxy.pac`
 > - 命令行输入：`pactester -p ~/pacparser-master/tests/proxy.pac -u https://www.mozilla.org`（传入 `host` 参数 `www.mozilla.org`、`url` 参数 `https://www.mozilla.org`）
@@ -318,7 +320,8 @@ myIpAddress()
 
 获取当前 Firefox 所在设备的 IP 地址，并返回为标准格式的 IP 地址字符串。
 
-> **警告：** myIpAddress() 返回与 **`nslookup localhost` **命令在 Linux 主机上的执行结果相同的 IP 地址。不会返回公网 IP 地址。
+> [!WARNING]
+> myIpAddress() 返回与 **`nslookup localhost` **命令在 Linux 主机上的执行结果相同的 IP 地址。不会返回公网 IP 地址。
 
 #### 例子
 
@@ -383,7 +386,8 @@ shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); //
 weekdayRange(wd1, wd2, [gmt])
 ```
 
-> **备注：** (Before Firefox 49) `wd1` must be less than `wd2` if you want the function to evaluate these parameters as a range. See the warning below.
+> [!NOTE]
+> (Before Firefox 49) `wd1` must be less than `wd2` if you want the function to evaluate these parameters as a range. See the warning below.
 
 #### 参数
 
@@ -431,7 +435,8 @@ dateRange(<month1>, <year1>, <month2>, <year2>, [gmt])
 dateRange(<day1>, <month1>, <year1>, <day2>, <month2>, <year2>, [gmt])
 ```
 
-> **备注：** (Before Firefox 49) day1 must be less than day2, month1 must be less than month2, and year1 must be less than year2 if you want the function to evaluate these parameters as a range. See the warning below.
+> [!NOTE]
+> (Before Firefox 49) day1 must be less than day2, month1 must be less than month2, and year1 must be less than year2 if you want the function to evaluate these parameters as a range. See the warning below.
 
 #### 参数
 
@@ -494,7 +499,8 @@ dateRange(1995, 1997);
 timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])
 ```
 
-> **备注：** (Before Firefox 49) the category hour1, min1, sec1 must be less than the category hour2, min2, sec2 if you want the function to evaluate these parameters as a range. See the warning below.
+> [!NOTE]
+> (Before Firefox 49) the category hour1, min1, sec1 must be less than the category hour2, min2, sec2 if you want the function to evaluate these parameters as a range. See the warning below.
 
 #### 参数
 
@@ -526,7 +532,8 @@ timerange(0, 0, 0, 0, 0, 30); // returns true between midnight and 30 seconds pa
 
 ### 对除本地主机以外的所有连接使用代理
 
-> **备注：** 以下所有示例都只针对特定需求并未经测试
+> [!NOTE]
+> 以下所有示例都只针对特定需求并未经测试
 
 所有并非完全限定的主机名，以及在本地域内的主机名，都将直接连接。其他的会通过 w3proxy:8080 连接。如果代理不可用，则自动回退到直连。
 
@@ -540,7 +547,8 @@ function FindProxyForURL(url, host) {
 }
 ```
 
-> **备注：** 这是只有一个代理服务器情况下最简单高效的自动配置脚本。
+> [!NOTE]
+> 这是只有一个代理服务器情况下最简单高效的自动配置脚本。
 
 ## 例 2
 
@@ -564,7 +572,8 @@ function FindProxyForURL(url, host) {
 
 以上示例为 mozilla.org 域外所有主机使用代理，同时添加了例外使 `www.mozilla.org` 和 `merchant.mozilla.org` 也使用代理。
 
-> **备注：** 以上例外的顺序影响效率：localHostOrDomainIs() 只在 URL 位于本地域内时执行，注意位于 || 外和 && 前的括号。
+> [!NOTE]
+> 以上例外的顺序影响效率：localHostOrDomainIs() 只在 URL 位于本地域内时执行，注意位于 || 外和 && 前的括号。
 
 ## 例 3
 
@@ -695,7 +704,8 @@ function FindProxyForURL(url, host) {
 > // ...
 > ```
 
-> **备注：** 自动配置脚本也可以在服务端动态生成。这在某些情况下比较有用，例如根据客户端地址指定不同的代理服务器。`isInNet()`， `isResolvable()` 和 `dnsResolve()` 应该谨慎使用，这些函数会进行 DNS 查询。其他函数则大都是字符处理函数，不需要 DNS。如果通过代理连接，代理本身也会进行一次 DNS 查询，这产生了额外的 DNS 请求。并且绝大多数情况下，不需要这些函数来实现特定的功能。
+> [!NOTE]
+> 自动配置脚本也可以在服务端动态生成。这在某些情况下比较有用，例如根据客户端地址指定不同的代理服务器。`isInNet()`， `isResolvable()` 和 `dnsResolve()` 应该谨慎使用，这些函数会进行 DNS 查询。其他函数则大都是字符处理函数，不需要 DNS。如果通过代理连接，代理本身也会进行一次 DNS 查询，这产生了额外的 DNS 请求。并且绝大多数情况下，不需要这些函数来实现特定的功能。
 
 ## 历史与实现
 
diff --git a/files/zh-cn/web/http/redirections/index.md b/files/zh-cn/web/http/redirections/index.md
index 856cc310f276d7..b03a9e9a5b1999 100644
--- a/files/zh-cn/web/http/redirections/index.md
+++ b/files/zh-cn/web/http/redirections/index.md
@@ -124,7 +124,8 @@ window.location = "https://example.com/";
 
 你并不想因此而使旧链接失效，因为它们会为你带来宝贵的用户并且帮助优化你的 SEO，所以需要建立从旧链接到新链接的重定向映射。
 
-> **备注：** 即便是这项技术可以同样应用于内部链接，但是应该尽量避免内部重定向映射。重定向机制会带来相当大的性能开销（额外的 HTTP 请求）。所以如果你可以通过修复链接来避免的话，那么就应该将其修复。
+> [!NOTE]
+> 即便是这项技术可以同样应用于内部链接，但是应该尽量避免内部重定向映射。重定向机制会带来相当大的性能开销（额外的 HTTP 请求）。所以如果你可以通过修复链接来避免的话，那么就应该将其修复。
 
 ### 对于不安全请求的临时响应
 
diff --git a/files/zh-cn/web/http/session/index.md b/files/zh-cn/web/http/session/index.md
index 53a8e2be090cfb..3378a345a16614 100644
--- a/files/zh-cn/web/http/session/index.md
+++ b/files/zh-cn/web/http/session/index.md
@@ -19,7 +19,8 @@ slug: Web/HTTP/Session
 
 使用 TCP 时，HTTP 服务器的默认端口号是 80，另外还有 8000 和 8080 也很常用。页面的 URL 会包含域名和端口号，但当端口号为 80 时可以省略。前往[标识互联网上的内容](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web)获取更多内容。
 
-> **备注：** 客户端——服务器模型不允许服务器在没有显式请求时发送数据给客户端。为了解决这个问题，Web 开发者们使用了许多技术：例如，使用 {{domxref("XMLHTTPRequest")}} 或 {{domxref("Fetch")}} API 周期性地请求服务器，使用 HTML [WebSocket API](/zh-CN/docs/Web/API/WebSockets_API)，或其他类似协议。
+> [!NOTE]
+> 客户端——服务器模型不允许服务器在没有显式请求时发送数据给客户端。为了解决这个问题，Web 开发者们使用了许多技术：例如，使用 {{domxref("XMLHTTPRequest")}} 或 {{domxref("Fetch")}} API 周期性地请求服务器，使用 HTML [WebSocket API](/zh-CN/docs/Web/API/WebSockets_API)，或其他类似协议。
 
 ## 发送客户端请求
 
diff --git a/files/zh-cn/web/http/status/102/index.md b/files/zh-cn/web/http/status/102/index.md
index d2e9a7501672a1..3c6a41309a4c50 100644
--- a/files/zh-cn/web/http/status/102/index.md
+++ b/files/zh-cn/web/http/status/102/index.md
@@ -11,7 +11,8 @@ l10n:
 
 仅当服务器预计请求需要很长时间时会发送此状态码，以告知客户端请求尚未终止。
 
-> **备注：** 此状态码已被弃用，不应再发送。客户端可能仍然接受并简单地忽略该状态码。
+> [!NOTE]
+> 此状态码已被弃用，不应再发送。客户端可能仍然接受并简单地忽略该状态码。
 
 ## 状态
 
diff --git a/files/zh-cn/web/http/status/207/index.md b/files/zh-cn/web/http/status/207/index.md
index 8251b3787d0173..3b8743265f790d 100644
--- a/files/zh-cn/web/http/status/207/index.md
+++ b/files/zh-cn/web/http/status/207/index.md
@@ -7,7 +7,8 @@ l10n:
 
 {{HTTPSidebar}}
 
-> **备注：** 返回*资源集合*的能力属于 {{Glossary("WebDAV")}} 协议（可能由访问 WebDAV 服务器的 Web 应用程序接收）。浏览器访问网页时永远不会遇到此状态码。
+> [!NOTE]
+> 返回*资源集合*的能力属于 {{Glossary("WebDAV")}} 协议（可能由访问 WebDAV 服务器的 Web 应用程序接收）。浏览器访问网页时永远不会遇到此状态码。
 
 HTTP **`207 Multi-Status`** 响应状态码表示可能存在多个响应。
 
diff --git a/files/zh-cn/web/http/status/301/index.md b/files/zh-cn/web/http/status/301/index.md
index ccb134561b7a2b..a2d8c9ab594e77 100644
--- a/files/zh-cn/web/http/status/301/index.md
+++ b/files/zh-cn/web/http/status/301/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/301
 
 HTTP **`301 Moved Permanently`** 说明请求的资源已经被移动到了由 {{HTTPHeader("Location")}} 头部指定的 url 上，是固定的不会再改变。搜索引擎会根据该响应修正。
 
-> **备注：** 尽管[规范](/zh-CN/docs/Web/HTTP/Status/301#规范)要求浏览器在收到该响应并进行重定向时不应该修改 http method 和 body，但并非所有的用户代理都符合此要求。所以最好将 301 状态码用作 {{HTTPMethod("GET")}} 或 {{HTTPMethod("HEAD")}} 方法的响应，而对于 {{HTTPMethod("POST")}} 则改用 {{HTTPStatus("308", "308 Permanent Redirect")}}，因为此状态码会禁止更改请求方法。
+> [!NOTE]
+> 尽管[规范](/zh-CN/docs/Web/HTTP/Status/301#规范)要求浏览器在收到该响应并进行重定向时不应该修改 http method 和 body，但并非所有的用户代理都符合此要求。所以最好将 301 状态码用作 {{HTTPMethod("GET")}} 或 {{HTTPMethod("HEAD")}} 方法的响应，而对于 {{HTTPMethod("POST")}} 则改用 {{HTTPStatus("308", "308 Permanent Redirect")}}，因为此状态码会禁止更改请求方法。
 
 ## 状态
 
diff --git a/files/zh-cn/web/http/status/304/index.md b/files/zh-cn/web/http/status/304/index.md
index 5702ed58bc680a..ddb7f42a2c9670 100644
--- a/files/zh-cn/web/http/status/304/index.md
+++ b/files/zh-cn/web/http/status/304/index.md
@@ -9,7 +9,8 @@ HTTP **`304 Not Modified`** 说明无需再次传输请求的内容，也就是
 
 该响应必须不包含主体，并且必须包含在等价 {{HTTPStatus("200")}} `OK` 响应中会带有的 {{HTTPHeader("Cache-Control")}}、{{HTTPHeader("Content-Location")}}、{{HTTPHeader("Date")}}、{{HTTPHeader("ETag")}}、{{HTTPHeader("Expires")}} 和 {{HTTPHeader("Vary")}} 标头。
 
-> **备注：** 很多浏览器的 [开发者工具](/zh-CN/docs/Tools/Network_Monitor) 会发出额外的请求，以达到 `304` 的目的，这样可以把资源以本地缓存的形式展现给开发者。
+> [!NOTE]
+> 很多浏览器的 [开发者工具](/zh-CN/docs/Tools/Network_Monitor) 会发出额外的请求，以达到 `304` 的目的，这样可以把资源以本地缓存的形式展现给开发者。
 
 ## 状态
 
diff --git a/files/zh-cn/web/http/status/308/index.md b/files/zh-cn/web/http/status/308/index.md
index 2e23ea292fc7d6..c92a792a17477a 100644
--- a/files/zh-cn/web/http/status/308/index.md
+++ b/files/zh-cn/web/http/status/308/index.md
@@ -9,7 +9,8 @@ slug: Web/HTTP/Status/308
 
 在重定向过程中，请求方法和消息主体不会发生改变，然而在返回 {{HTTPStatus("301")}} 状态码的情况下，请求方法有时候会被客户端错误地修改为 {{HTTPMethod("GET")}} 方法。
 
-> **备注：** 一些 Web 应用可能会将 308 Permanent Redirect 以一种非标准的方式使用以及用作其他用途。例如，Google Drive 会使用 308 Resume Incomplete 状态码来告知客户端文件上传终止且不完整。[\[1\]](https://developers.google.com/drive/v3/web/manage-uploads#resumable)
+> [!NOTE]
+> 一些 Web 应用可能会将 308 Permanent Redirect 以一种非标准的方式使用以及用作其他用途。例如，Google Drive 会使用 308 Resume Incomplete 状态码来告知客户端文件上传终止且不完整。[\[1\]](https://developers.google.com/drive/v3/web/manage-uploads#resumable)
 
 ## 状态
 
diff --git a/files/zh-cn/web/http/status/400/index.md b/files/zh-cn/web/http/status/400/index.md
index a0862761af0ee3..012711582da15e 100644
--- a/files/zh-cn/web/http/status/400/index.md
+++ b/files/zh-cn/web/http/status/400/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/400
 
 超文本传输协议（HTTP）**400 `Bad Request`** 响应状态码表示服务器因某些被认为是客户端错误的原因（例如，请求语法错误、无效请求消息格式或者欺骗性请求路由），而无法或不会处理该请求。
 
-> **警告：** 客户端不应该在未进行修改的情况下重复发送此请求。
+> [!WARNING]
+> 客户端不应该在未进行修改的情况下重复发送此请求。
 
 ## 状态
 
diff --git a/files/zh-cn/web/http/status/404/index.md b/files/zh-cn/web/http/status/404/index.md
index 7967915c92a1bb..50df6f25992e0e 100644
--- a/files/zh-cn/web/http/status/404/index.md
+++ b/files/zh-cn/web/http/status/404/index.md
@@ -25,7 +25,8 @@ ErrorDocument 404 /notfound.html
 
 这里有一个自定义 404 页面的示例，参见 [404 页面](https://konmari.com/404)。
 
-> **备注：** 适度的自定义是有益的。尽管构建一个幽默、人性化而不会使得用户感到困惑的 404 页面。
+> [!NOTE]
+> 适度的自定义是有益的。尽管构建一个幽默、人性化而不会使得用户感到困惑的 404 页面。
 
 ## 规范
 
diff --git a/files/zh-cn/web/http/status/410/index.md b/files/zh-cn/web/http/status/410/index.md
index 9d3481f901b8dc..d0d0e3eba68359 100644
--- a/files/zh-cn/web/http/status/410/index.md
+++ b/files/zh-cn/web/http/status/410/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/410
 
 HTTP **`410 Gone`** 说明请求的目标资源在原服务器上不存在了，并且是永久性的丢失。如果不清楚是否为永久或临时的丢失，应该使用{{HTTPStatus(404)}}
 
-> **备注：** 410 响应默认会被缓存
+> [!NOTE]
+> 410 响应默认会被缓存
 
 ## 状态
 
diff --git a/files/zh-cn/web/http/status/422/index.md b/files/zh-cn/web/http/status/422/index.md
index c3ee0a7fc50277..d68474ea812b52 100644
--- a/files/zh-cn/web/http/status/422/index.md
+++ b/files/zh-cn/web/http/status/422/index.md
@@ -7,7 +7,8 @@ slug: Web/HTTP/Status/422
 
 HTTP 422 状态码表示服务器理解请求实体的内容类型，并且请求实体的语法是正确的，但是服务器无法处理所包含的指令。
 
-> **警告：** 客户端不应在不修改的情况下重复发送此请求。
+> [!WARNING]
+> 客户端不应在不修改的情况下重复发送此请求。
 
 ## 状态码
 
diff --git a/files/zh-cn/web/http/status/501/index.md b/files/zh-cn/web/http/status/501/index.md
index 90a3592a2c7e42..fecd16090a1bb6 100644
--- a/files/zh-cn/web/http/status/501/index.md
+++ b/files/zh-cn/web/http/status/501/index.md
@@ -9,7 +9,8 @@ HTTP **`501 Not Implemented`** 服务器错误响应码表示请求的方法不
 
 请注意，你无法修复 501 错误，需要被访问的 web 服务器去修复该问题。
 
-> **备注：** 501 响应默认是可缓存的。
+> [!NOTE]
+> 501 响应默认是可缓存的。
 
 ## 状态
 
diff --git a/files/zh-cn/web/http/status/index.md b/files/zh-cn/web/http/status/index.md
index d75d7a8aeaaee3..0f5bbd0c1e1df1 100644
--- a/files/zh-cn/web/http/status/index.md
+++ b/files/zh-cn/web/http/status/index.md
@@ -16,7 +16,8 @@ HTTP 响应状态码用来表明特定 [HTTP](/zh-CN/docs/Web/HTTP) 请求是否
 
 以下状态码由 [section 10 of RFC 2616](https://datatracker.ietf.org/doc/html/rfc2616#section-10)定义。你可以在[RFC 7231](https://datatracker.ietf.org/doc/html/rfc7231#section-6)中找到更新后的规范。
 
-> **备注：** 如果你收到的响应不在 [此列表](#信息响应) 中，则它为非标准响应，可能是服务器软件的自定义响应。
+> [!NOTE]
+> 如果你收到的响应不在 [此列表](#信息响应) 中，则它为非标准响应，可能是服务器软件的自定义响应。
 
 ## 信息响应
 
diff --git a/files/zh-cn/web/javascript/closures/index.md b/files/zh-cn/web/javascript/closures/index.md
index 817dd9adf5e18d..01649be8022930 100644
--- a/files/zh-cn/web/javascript/closures/index.md
+++ b/files/zh-cn/web/javascript/closures/index.md
@@ -170,7 +170,8 @@ console.log(Counter.value()); /* logs 1 */
 
 这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 `privateCounter` 变量和 `changeBy` 函数。
 
-> **备注：** 你应该注意到我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量`Counter`。我们可以把这个函数储存在另外一个变量`makeCounter`中，并用他来创建多个计数器。
+> [!NOTE]
+> 你应该注意到我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量`Counter`。我们可以把这个函数储存在另外一个变量`makeCounter`中，并用他来创建多个计数器。
 
 ```js
 var makeCounter = function () {
@@ -206,7 +207,8 @@ console.log(Counter2.value()); /* logs 0 */
 
 每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。
 
-> **备注：** 以这种方式使用闭包，提供了许多与面向对象编程相关的好处——特别是数据隐藏和封装。
+> [!NOTE]
+> 以这种方式使用闭包，提供了许多与面向对象编程相关的好处——特别是数据隐藏和封装。
 
 ## 在循环中创建闭包：一个常见错误
 
diff --git a/files/zh-cn/web/javascript/data_structures/index.md b/files/zh-cn/web/javascript/data_structures/index.md
index 81271feeb1ffc8..97d111e934906c 100644
--- a/files/zh-cn/web/javascript/data_structures/index.md
+++ b/files/zh-cn/web/javascript/data_structures/index.md
@@ -100,7 +100,8 @@ console.log(42 / -0); // -Infinity
 
 虽然 number 在概念上是一个“数学的值”，并且总是隐式的编码为浮点类型，但是 JavaScript 提供了[位运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#位运算符)。当应用位运算符时，number 首先转换为 32 位整数。
 
-> **备注：** 尽管位运算符*可以*使用[位掩码](https://zh.wikipedia.org/wiki/掩码)来表示单个数值中的几个布尔值，但通常这不是一个好的做法。JavaScript 提供了表示一组布尔值的其他方法（如布尔数组，或将布尔值分配给命名属性的对象）。位掩码也往往会使代码更难读取、理解和维护。
+> [!NOTE]
+> 尽管位运算符*可以*使用[位掩码](https://zh.wikipedia.org/wiki/掩码)来表示单个数值中的几个布尔值，但通常这不是一个好的做法。JavaScript 提供了表示一组布尔值的其他方法（如布尔数组，或将布尔值分配给命名属性的对象）。位掩码也往往会使代码更难读取、理解和维护。
 
 可能有必要在非常受限的环境中使用此类技术，例如在试图应对本地存储的限制时，或在极端情况下（例如当网络上的每个位计数时）。只有当这项技术是优化尺寸的最后一项措施时，才应考虑这项技术。
 
@@ -177,7 +178,8 @@ JavaScript 字符串是不可变的。这意味着一旦字符串被创建，就
 
 将键与两个访问器函数（`get` 和 `set`）相关联，以获取或者存储值。
 
-> **备注：** 重要的是，意识到它是访问器*属性*——而不是访问器*方法*。我们可以将函数作为值来提供给 JavaScript 对象的访问器，使得对象表现得像一个类——但这并不能使该对象成为类。
+> [!NOTE]
+> 重要的是，意识到它是访问器*属性*——而不是访问器*方法*。我们可以将函数作为值来提供给 JavaScript 对象的访问器，使得对象表现得像一个类——但这并不能使该对象成为类。
 
 一个访问器属性有着以下的特性：
 
diff --git a/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md b/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md
index 7b69a15bf182ce..b97e68effa8acb 100644
--- a/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md
+++ b/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.md
@@ -240,7 +240,8 @@ throw {
 };
 ```
 
-> **备注：** 你可以在抛出异常时声明一个对象。那你就可以在 catch 块中查询到对象的属性。
+> [!NOTE]
+> 你可以在抛出异常时声明一个对象。那你就可以在 catch 块中查询到对象的属性。
 
 ```js
 // Create an object type UserException
diff --git a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md
index 73818980222f51..26f0503cd4202a 100644
--- a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md
+++ b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.md
@@ -107,7 +107,8 @@ var var2 = 4;
 | [小于 Less than](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator) (`<`)                              | 左边的操作数小于右边的操作数返回 true                                                                                                                 | `var1 < var2 "2" < 12`               |
 | [小于等于 Less than or equal](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator) (`<=`)       | 左边的操作数小于或等于右边的操作数返回 true                                                                                                           | `var1 <= var2 var2 <= 5`             |
 
-> **备注：** （**=>**）不是运算符，而是[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)的标记符号。
+> [!NOTE]
+> （**=>**）不是运算符，而是[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)的标记符号。
 
 ### 算术运算符
 
diff --git a/files/zh-cn/web/javascript/guide/functions/index.md b/files/zh-cn/web/javascript/guide/functions/index.md
index 1e63102f775c58..139422c1f0a4cc 100644
--- a/files/zh-cn/web/javascript/guide/functions/index.md
+++ b/files/zh-cn/web/javascript/guide/functions/index.md
@@ -514,7 +514,8 @@ const getCode = (function () {
 console.log(getCode()); // "0]Eal(eh&2"
 ```
 
-> **备注：** 使用闭包时需要注意许多陷阱！
+> [!NOTE]
+> 使用闭包时需要注意许多陷阱！
 >
 > 如果一个闭包的函数定义了一个和外部的某个变量名称相同的变量，那么这个闭包将无法引用外部作用域中的这个变量。（内部作用域的变量“覆盖”外部作用域，直至程序退出内部作用域。可以将其视作[命名冲突](#命名冲突)。）
 >
diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.md b/files/zh-cn/web/javascript/guide/grammar_and_types/index.md
index d5834757f18637..51537b898a4957 100644
--- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.md
+++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.md
@@ -23,7 +23,8 @@ var Früh = "foobar";
 
 如果一条语句独占一行的话，那么分号是可以省略的。（译者注：并不建议这么做。）但如果一行中有多条语句，那么这些语句必须以分号分开。
 
-> **备注：** ECMAScript 规定了在语句的末尾自动插入分号（[ASI](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#自动分号补全)）。（如果想要了解更多信息，请参阅 JavaScript [词法语法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar) 。）
+> [!NOTE]
+> ECMAScript 规定了在语句的末尾自动插入分号（[ASI](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#自动分号补全)）。（如果想要了解更多信息，请参阅 JavaScript [词法语法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar) 。）
 
 虽然不是必需的，但是在一条语句的末尾加上分号是一个很好的习惯。这个习惯可以大大减少代码中产生 bug 的可能性。
 
@@ -45,7 +46,8 @@ Javascript 源码从左往右被扫描并转换成一系列由 token、控制字
 
 在代码执行过程中，注释将被自动跳过（不执行）。
 
-> **备注：** 你可能会在一些 JavaScript 脚本中见到像这样 `#!/usr/bin/env node` 的第三种注释
+> [!NOTE]
+> 你可能会在一些 JavaScript 脚本中见到像这样 `#!/usr/bin/env node` 的第三种注释
 >
 > 这种注释我们称为**hashbang 注释**，这种注释被用来指定执行 JaveScript 脚本的引擎的路径，查看这篇文章来了解更详细的信息：[Hashbang 注释](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#hashbang_注释)
 
@@ -380,7 +382,8 @@ console.log(a.length); // 1
 console.log(a[0]); // 3
 ```
 
-> **备注：** 这里的数组字面值也是一种对象初始化器。参考[对象初始化器的使用](/zh-CN/docs/Web/JavaScript/Guide/Working_with_objects#使用对象初始化器)。
+> [!NOTE]
+> 这里的数组字面值也是一种对象初始化器。参考[对象初始化器的使用](/zh-CN/docs/Web/JavaScript/Guide/Working_with_objects#使用对象初始化器)。
 
 若在顶层（全局）脚本里用字面值创建数组，JavaScript 语言将会在每次对包含该数组字面值的表达式求值时解释该数组。另一方面，在函数中使用的数组，将在每次调用函数时都会被创建一次。
 
@@ -398,7 +401,8 @@ var fish = ["Lion", , "Angel"];
 
 如果你在元素列表的尾部添加了一个逗号，它将会被忽略。在下面的例子中，数组的长度是 3，并不存在 myList\[3] 这个元素。元素列表中其他所有的逗号都表示一个新元素（的开始）。
 
-> **备注：** 尾部的逗号在早期版本的浏览器中会产生错误，因而编程时的最佳实践方式就是移除它们。
+> [!NOTE]
+> 尾部的逗号在早期版本的浏览器中会产生错误，因而编程时的最佳实践方式就是移除它们。
 
 ```js
 var myList = ["home", , "school"];
@@ -480,7 +484,8 @@ JavaScript 数字字面量包括多种基数的整数字面量和以 10 为基
 
 对象字面值是封闭在花括号对（{}）中的一个对象的零个或多个“属性名—值”对的（元素）列表。
 
-> **警告：** 你不能在一条语句的开头就使用对象字面值，这将导致错误或产生超出预料的行为，因为此时左花括号（{）会被认为是一个语句块的起始符号。
+> [!WARNING]
+> 你不能在一条语句的开头就使用对象字面值，这将导致错误或产生超出预料的行为，因为此时左花括号（{）会被认为是一个语句块的起始符号。
 
 以下是一个对象字面值的例子。对象`car`的第一个元素（译注：即一个属性/值对）定义了属性 `myCar`；第二个元素，属性 `getCar`，引用了一个函数调用（即 CarTypes("Honda")）；第三个元素，属性 `special`，使用了一个已有的变量（即 Sales）。
 
diff --git a/files/zh-cn/web/javascript/guide/indexed_collections/index.md b/files/zh-cn/web/javascript/guide/indexed_collections/index.md
index 2fefbd4d6e9346..edb3e48841aaee 100644
--- a/files/zh-cn/web/javascript/guide/indexed_collections/index.md
+++ b/files/zh-cn/web/javascript/guide/indexed_collections/index.md
@@ -43,7 +43,8 @@ const arr3 = [];
 arr3.length = arrayLength;
 ```
 
-> **备注：** 以上代码，`arrayLength` 必须为一个 `Number`。否则，将会创建一个只有单个元素（内含提供的值）的数组。调用 `arr.length` 会返回 `arrayLength`，但数组不包含任何元素。{{jsxref("Statements/for...in","for...in")}} 循环在数组上找不到任何属性。
+> [!NOTE]
+> 以上代码，`arrayLength` 必须为一个 `Number`。否则，将会创建一个只有单个元素（内含提供的值）的数组。调用 `arr.length` 会返回 `arrayLength`，但数组不包含任何元素。{{jsxref("Statements/for...in","for...in")}} 循环在数组上找不到任何属性。
 
 除了上面所示的新定义的变量外，数组还可以被赋值为新对象或现有对象的属性：
 
@@ -94,7 +95,8 @@ const myArray = ["Wind", "Rain", "Fire"];
 
 你可以将数组的第一个元素引用为 `myArray[0]`，将数组的第二个元素引用为 `myArray[1]`，等等...元素的索引从零开始。
 
-> **备注：** 你也可以使用[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)来访问数组的其他属性，就像对象一样。
+> [!NOTE]
+> 你也可以使用[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)来访问数组的其他属性，就像对象一样。
 >
 > ```js
 > const arr = ["one", "two", "three"];
@@ -113,7 +115,8 @@ emp[1] = "Phil Lesh";
 emp[2] = "August West";
 ```
 
-> **备注：** 如果你在以上代码中给数组运算符的是一个非整型数值，那么它将作为一个表示数组的对象的属性创建，而不是数组的元素。
+> [!NOTE]
+> 如果你在以上代码中给数组运算符的是一个非整型数值，那么它将作为一个表示数组的对象的属性创建，而不是数组的元素。
 >
 > ```js
 > const arr = [];
@@ -380,7 +383,8 @@ a.forEach((element) => {
 
 接受回调的 `forEach` 方法（以及下面的其他方法）被称为*迭代方法*，因为它们以某种方式遍历整个数组。每个都接受第二个可选的参数 `thisArg`。如果提供，`thisArg` 将成为回调函数体中 `this` 关键字的值。如果没有提供，就像在明确的对象上下文之外被调用一样，当函数在严格模式下时，`this` 是 `undefined`，当函数在[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下时，`this` 将引用全局对象（[`window`](/zh-CN/docs/Web/API/Window)、[`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis) 等。）。
 
-> **备注：** 上面介绍的 `sort()` 方法不是迭代方法，因为它的回调函数只用于比较，不能基于元素顺序以任何特定顺序调用。`sort()` 也不接受 `thisArg` 形参。
+> [!NOTE]
+> 上面介绍的 `sort()` 方法不是迭代方法，因为它的回调函数只用于比较，不能基于元素顺序以任何特定顺序调用。`sort()` 也不接受 `thisArg` 形参。
 
 [`map()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 方法返回由每个数组元素上执行 `callback` 的返回值所组成的新数组。
 
diff --git a/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md b/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md
index 42d1727f02e77f..2791301bea68c3 100644
--- a/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md
+++ b/files/zh-cn/web/javascript/guide/iterators_and_generators/index.md
@@ -189,7 +189,8 @@ a; // "a"
 
 {{jsxref("Global_Objects/Generator/next", "next()")}} 方法也接受一个参数用于修改生成器内部状态。传递给 `next()` 的参数值会被 `yield` 接收。
 
-> **备注：** 传给*第一个* `next()` 的值会被忽略。
+> [!NOTE]
+> 传给*第一个* `next()` 的值会被忽略。
 
 下面的是斐波那契数列生成器，它使用了 `next(x)` 来重启序列：
 
diff --git a/files/zh-cn/web/javascript/guide/modules/index.md b/files/zh-cn/web/javascript/guide/modules/index.md
index 54a4f961a71a69..f1fb47a0efcd24 100644
--- a/files/zh-cn/web/javascript/guide/modules/index.md
+++ b/files/zh-cn/web/javascript/guide/modules/index.md
@@ -25,7 +25,8 @@ JavaScript 程序本来很小——在早期，它们大多被用来执行独立
 
 这的确有点简单，但是保持足够简单能够清晰地演示模块。
 
-> **备注：** 如果你想去下载这个例子在本地运行，你需要通过本地 web 服务器去运行。
+> [!NOTE]
+> 如果你想去下载这个例子在本地运行，你需要通过本地 web 服务器去运行。
 
 ## 基本的示例文件的结构
 
@@ -39,7 +40,8 @@ modules/
     square.js
 ```
 
-> **备注：** 在这个指南的全部示例项目的文件结构是基本相同的；需要熟悉上面的内容
+> [!NOTE]
+> 在这个指南的全部示例项目的文件结构是基本相同的；需要熟悉上面的内容
 
 modules 目录下的两个模块的描述如下：
 
@@ -55,7 +57,8 @@ modules 目录下的两个模块的描述如下：
   - `reportArea()` — 在给定长度的情况下，将正方形区域写入特定报告列表。
   - `reportPerimeter()` — 在给定长度的情况下，将正方形的周长写入特定的报告列表。
 
-> **备注：** 在原生 JavaScript 模块中，扩展名 `.mjs` 非常重要，因为使用 MIME-type 为 `javascript/esm` 来导入文件（其他的 JavaScript 兼容 MIME-type 像 `application/javascript` 也可以），它避免了严格的 MIME 类型检查错误，像 "The server responded with a non-JavaScript MIME type"。除此之外，`.mjs` 的扩展名很明了（比如这个就是一个模块，而不是一个传统 JavaScript 文件），还能够和其他工具互相适用。看这个 [Google's note for further details](https://v8.dev/features/modules#mjs)。
+> [!NOTE]
+> 在原生 JavaScript 模块中，扩展名 `.mjs` 非常重要，因为使用 MIME-type 为 `javascript/esm` 来导入文件（其他的 JavaScript 兼容 MIME-type 像 `application/javascript` 也可以），它避免了严格的 MIME 类型检查错误，像 "The server responded with a non-JavaScript MIME type"。除此之外，`.mjs` 的扩展名很明了（比如这个就是一个模块，而不是一个传统 JavaScript 文件），还能够和其他工具互相适用。看这个 [Google's note for further details](https://v8.dev/features/modules#mjs)。
 
 ## `.mjs` 与 `.js`
 
@@ -133,7 +136,8 @@ import { name, draw, reportArea, reportPerimeter } from '/js-examples/modules/ba
 
 你可以在 [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/basic-modules/main.js) 中看到这些。
 
-> **备注：** 在一些模块系统中你可以忽略文件扩展名（比如 `'/model/squre'`）。这在原生 JavaScript 模块系统中不工作。~~此外，记住你需要包含最前面的正斜杠。~~ （修订版 1889482）
+> [!NOTE]
+> 在一些模块系统中你可以忽略文件扩展名（比如 `'/model/squre'`）。这在原生 JavaScript 模块系统中不工作。~~此外，记住你需要包含最前面的正斜杠。~~ （修订版 1889482）
 
 因为你导入了这些功能到你的脚本文件，你可以像定义在相同的文件中的一样去使用它。下面展示的是在 `main.js` 中的 import 语句下面的内容。
 
@@ -160,7 +164,8 @@ reportPerimeter(square1.length, reportList);
 
 你只能在模块内部使用 `import` 和`export` 语句；不是普通脚本文件。
 
-> **备注：** 你还可以将模块导入内部脚本，只要包含 `type="module"`，例如 `<script type="module"> //include script here </script>`。
+> [!NOTE]
+> 你还可以将模块导入内部脚本，只要包含 `type="module"`，例如 `<script type="module"> //include script here </script>`。
 
 ## 其他模块与标准脚本的不同
 
@@ -203,7 +208,8 @@ import randomSquare from "./modules/square.js";
 import { default as randomSquare } from "./modules/square.js";
 ```
 
-> **备注：** 重命名导出项的 as 语法在下面的 [重命名导出与导入](#重命名导出与导入) 部分中进行了说明。
+> [!NOTE]
+> 重命名导出项的 as 语法在下面的 [重命名导出与导入](#重命名导出与导入) 部分中进行了说明。
 
 ## 避免命名冲突
 
@@ -392,7 +398,8 @@ export * from "x.js";
 export { name } from "x.js";
 ```
 
-> **备注：** 这实际上是导入后跟导出的简写，即“我导入模块 `x.js`，然后重新导出部分或全部导出”。
+> [!NOTE]
+> 这实际上是导入后跟导出的简写，即“我导入模块 `x.js`，然后重新导出部分或全部导出”。
 
 有关示例，请参阅我们的 [module-aggregation](https://github.com/mdn/js-examples/tree/main/module-examples/module-aggregation)。在这个例子中（基于我们之前的类示例），我们有一个名为 `shapes.js` 的额外模块，它将 `circle.js`，`square.js` 和 `riangle.mjs` 中的所有功能聚合在一起。我们还将子模块移动到名为 shapes 的 modules 目录中的子目录中。所以模块结构现在是这样的：
 
@@ -422,7 +429,8 @@ export { Circle } from "/js-examples/modules/module-aggregation/modules/shapes/c
 
 它们从各个子模块中获取导出，并有效地从 `shapes.js` 模块中获取它们。
 
-> **备注：** 即使 `shapes.js` 文件位于 modules 目录中，我们仍然需要相对于模块根目录编写这些 URL，因此需要 `/modules/`。这是使用 JavaScript 模块时混淆的常见原因。
+> [!NOTE]
+> 即使 `shapes.js` 文件位于 modules 目录中，我们仍然需要相对于模块根目录编写这些 URL，因此需要 `/modules/`。这是使用 JavaScript 模块时混淆的常见原因。
 
 > **备注：** `shapes.js` 中引用的导出基本上通过文件重定向，并且实际上并不存在，因此你将无法在同一文件中编写任何有用的相关代码。
 
diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md
index e460caa6e5dddc..0b9a12715a1eb1 100644
--- a/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md
+++ b/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.md
@@ -13,7 +13,8 @@ l10n:
 
 ## 类型
 
-> **备注：** 在下文中，*项*不仅指单个字符，还包括[字符类](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes)、[组和反向引用](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions/Groups_and_backreferences)。
+> [!NOTE]
+> 在下文中，*项*不仅指单个字符，还包括[字符类](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes)、[组和反向引用](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions/Groups_and_backreferences)。
 
 <table class="standard-table">
   <thead>
diff --git a/files/zh-cn/web/javascript/guide/using_classes/index.md b/files/zh-cn/web/javascript/guide/using_classes/index.md
index d557809d9bf6c2..2c73d4daf8023f 100644
--- a/files/zh-cn/web/javascript/guide/using_classes/index.md
+++ b/files/zh-cn/web/javascript/guide/using_classes/index.md
@@ -97,7 +97,8 @@ MyClass.prototype.myMethod = function () {
 })();
 ```
 
-> **备注：** 私有字段和方法是类中的新特性，在函数构造器中并没有与之等价的语法。
+> [!NOTE]
+> 私有字段和方法是类中的新特性，在函数构造器中并没有与之等价的语法。
 
 ### 构造一个类
 
@@ -349,7 +350,8 @@ console.log(red.getRed()); // 255
 console.log(red.#values); // SyntaxError: Private field '#values' must be declared in an enclosing class
 ```
 
-> **备注：** 在 Chrome 控制台中运行的代码可以在类外访问私有字段，JavaScript 为了方便调试而仅在 DevTools 中放宽了这一限制。
+> [!NOTE]
+> 在 Chrome 控制台中运行的代码可以在类外访问私有字段，JavaScript 为了方便调试而仅在 DevTools 中放宽了这一限制。
 
 JavaScript 中的私有字段是*硬私有*的：如果类没有实现暴露这些私有字段的方法，也就没有任何机制可以从类外访问它们。这意味着你可以对类的私有字段做任何重构，只要暴露的方法的行为保持不变即可。
 
@@ -415,7 +417,8 @@ class Color {
 }
 ```
 
-> **备注：** 请记住，`#` 是一种特殊的标识符语法，你不能像字符串一样使用该字段名。`"#values" in anotherColor` 会查找一个名为 `"#values"` 的属性，而不是一个私有字段。
+> [!NOTE]
+> 请记住，`#` 是一种特殊的标识符语法，你不能像字符串一样使用该字段名。`"#values" in anotherColor` 会查找一个名为 `"#values"` 的属性，而不是一个私有字段。
 
 有一些限制在使用私有字段时需要注意：在单个类中，相同的名称不能声明两次，且它们不能被删除。这两种情况都会导致早期语法错误。
 
@@ -533,7 +536,8 @@ class MyClass {
 
 在上面的 `Date` 例子中，我们还遇到了 [`Date.now()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/now) 方法，它返回当前日期。这个方法不属于任何日期实例——它属于类本身。然而，它被放在 `Date` 类上，而不是作为全局的 `DateNow()` 函数，因为它在处理日期实例时最有用。
 
-> **备注：** 一个好的习惯是给工具方法一个前缀（这也称作“命名空间”）。例如，除了旧的、没有前缀的 [`parseInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt) 方法之外，JavaScript 后来还添加了带有前缀的 [`Number.parseInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) 方法，以表明它是用于处理数字的。
+> [!NOTE]
+> 一个好的习惯是给工具方法一个前缀（这也称作“命名空间”）。例如，除了旧的、没有前缀的 [`parseInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt) 方法之外，JavaScript 后来还添加了带有前缀的 [`Number.parseInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) 方法，以表明它是用于处理数字的。
 
 [_静态属性_](/zh-CN/docs/Web/JavaScript/Reference/Classes/static)是一组在类本身上定义的特性，而不是在类的实例上定义的特性。这些特性包括：
 
diff --git a/files/zh-cn/web/javascript/guide/using_promises/index.md b/files/zh-cn/web/javascript/guide/using_promises/index.md
index cc48be4f9ec1b1..19a72bf6bb5b13 100644
--- a/files/zh-cn/web/javascript/guide/using_promises/index.md
+++ b/files/zh-cn/web/javascript/guide/using_promises/index.md
@@ -60,7 +60,8 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 第二个 promise（`promise2`）不仅表示 `doSomething()` 函数的完成，也代表了你传入的 `successCallback` 或者 `failureCallback` 的完成，这两个函数也可以是返回 Promise 对象的异步函数。这样的话，在 `promise2` 上新增的排在该 promise 后面的回调函数会通过 `successCallback` 或 `failureCallback` 返回。
 
-> **备注：** 如果你想要一个可以操作的示例，你可以使用下面的模板来创建任何返回 Promise 的函数：
+> [!NOTE]
+> 如果你想要一个可以操作的示例，你可以使用下面的模板来创建任何返回 Promise 的函数：
 >
 > ```js
 > function doSomething() {
@@ -105,7 +106,8 @@ doSomething()
   .catch(failureCallback);
 ```
 
-> **备注：** 箭头函数表达式可以有[隐式返回值](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#函数体)；所以，`() => x` 是 `() => { return x; }` 的简写。
+> [!NOTE]
+> 箭头函数表达式可以有[隐式返回值](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#函数体)；所以，`() => x` 是 `() => { return x; }` 的简写。
 
 `doSomethingElse` 和 `doThirdThing` 可以返回任何值——如果它们返回的是 Promise，那么会首先等待这个 Promise 的敲定，然后下一个回调函数会接收到它的兑现值，而不是 Promise 本身。在 `then` 回调中始终返回 Promise 是非常重要的，即使 Promise 总是兑现为 `undefined`。如果上一个处理器启动了一个 Promise 但并没有返回它，那么就没有办法再追踪它的敲定状态了，这个 Promise 就是“漂浮”的。
 
@@ -204,7 +206,8 @@ async function logIngredients() {
 
 `async`/`await` 基于 promise，例如，`doSomething()` 与之前的函数相同，因此从 promise 到 `async`/`await` 所需的重构工作微乎其微。有关 `async`/`await` 语法的更多信息，请参阅[异步函数](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function)和 [`await`](/zh-CN/docs/Web/JavaScript/Reference/Operators/await) 参考。
 
-> **备注：** async/await 的并发语义与普通 Promise 链相同。异步函数中的 `await` 不会停止整个程序，只会停止依赖其值的部分，因此在 `await` 挂起时，其他异步任务仍可运行。
+> [!NOTE]
+> async/await 的并发语义与普通 Promise 链相同。异步函数中的 `await` 不会停止整个程序，只会停止依赖其值的部分，因此在 `await` 挂起时，其他异步任务仍可运行。
 
 ## 错误处理
 
@@ -286,7 +289,8 @@ async function main() {
 }
 ```
 
-> **备注：** 如果没有复杂的错误处理，则很可能不需要嵌套的 `then` 处理器。相反，可以使用扁平链，将错误处理逻辑放在最后。
+> [!NOTE]
+> 如果没有复杂的错误处理，则很可能不需要嵌套的 `then` 处理器。相反，可以使用扁平链，将错误处理逻辑放在最后。
 
 ### Catch 的后续链式操作
 
@@ -319,7 +323,8 @@ new Promise((resolve, reject) => {
 执行「这个」，无论前面发生了什么
 ```
 
-> **备注：** 并没有输出“执行「这个」”，因为在第一个 `then()` 中的 `throw` 语句导致其被拒绝。
+> [!NOTE]
+> 并没有输出“执行「这个」”，因为在第一个 `then()` 中的 `throw` 语句导致其被拒绝。
 
 在 `async`/`await` 中，这段代码看起来像这样：
 
diff --git a/files/zh-cn/web/javascript/guide/working_with_objects/index.md b/files/zh-cn/web/javascript/guide/working_with_objects/index.md
index 5db888066c099b..0bd65705b2b187 100644
--- a/files/zh-cn/web/javascript/guide/working_with_objects/index.md
+++ b/files/zh-cn/web/javascript/guide/working_with_objects/index.md
@@ -534,7 +534,8 @@ fruit == fruitbear; // return false
 fruit === fruitbear; // return false
 ```
 
-> **备注：** "===" 运算符用来检查数值是否相等：1 === "1"返回 false，而 1 == "1" 返回 true
+> [!NOTE]
+> "===" 运算符用来检查数值是否相等：1 === "1"返回 false，而 1 == "1" 返回 true
 
 ```js
 // 两个变量，同一个对象
diff --git a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md
index 06bb2f5f9ae1e6..7b8cdecd2633ac 100644
--- a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -19,7 +19,8 @@ slug: Web/JavaScript/Inheritance_and_the_prototype_chain
 
 JavaScript 对象是动态的属性（指**其自有属性**）“包”。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
 
-> **备注：** 遵循 ECMAScript 标准，符号 `someObject.[[Prototype]]` 用于标识 `someObject` 的原型。内部插槽 `[[Prototype]]` 可以通过 {{jsxref("Object.getPrototypeOf()")}} 和 {{jsxref("Object.setPrototypeOf()")}} 函数来访问。这个等同于 JavaScript 的非标准但被许多 JavaScript 引擎实现的属性 [`__proto__`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) 访问器。为在保持简洁的同时避免混淆，在我们的符号中会避免使用 `obj.__proto__`，而是使用 `obj.[[Prototype]]` 作为代替。其对应于 `Object.getPrototypeOf(obj)`。
+> [!NOTE]
+> 遵循 ECMAScript 标准，符号 `someObject.[[Prototype]]` 用于标识 `someObject` 的原型。内部插槽 `[[Prototype]]` 可以通过 {{jsxref("Object.getPrototypeOf()")}} 和 {{jsxref("Object.setPrototypeOf()")}} 函数来访问。这个等同于 JavaScript 的非标准但被许多 JavaScript 引擎实现的属性 [`__proto__`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) 访问器。为在保持简洁的同时避免混淆，在我们的符号中会避免使用 `obj.__proto__`，而是使用 `obj.[[Prototype]]` 作为代替。其对应于 `Object.getPrototypeOf(obj)`。
 >
 > 它不应与函数的 `func.prototype` 属性混淆，后者指定在给定函数被用作构造函数时分配给所有对象*实例*的 `[[Prototype]]`。我们将在[后面的小节](#构造函数)中讨论构造函数的原型属性。
 
@@ -175,7 +176,8 @@ const boxes = [new Box(1), new Box(2), new Box(3)];
 
 我们说 `new Box(1)` 是通过 `Box` 构造函数创建的一个*实例*。`Box.prototype` 与我们之前创建的 `boxPrototype` 并无太大区别——它只是一个普通的对象。通过构造函数创建的每一个实例都会自动将构造函数的 [`prototype`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 属性作为其 `[[Prototype]]`。即，`Object.getPrototypeOf(new Box()) === Box.prototype`。`Constructor.prototype` 默认具有一个自有属性：[`constructor`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor)，它引用了构造函数本身。即，`Box.prototype.constructor === Box`。这允许我们在任何实例中访问原始构造函数。
 
-> **备注：** 如果构造函数返回非原始值，则该值将成为 `new` 表达式的结果。在这种情况下，`[[Prototype]]` 可能无法正确绑定——但在实践中应该很少发生。
+> [!NOTE]
+> 如果构造函数返回非原始值，则该值将成为 `new` 表达式的结果。在这种情况下，`[[Prototype]]` 可能无法正确绑定——但在实践中应该很少发生。
 
 上面的构造函数可以重写为[类](/zh-CN/docs/Web/JavaScript/Reference/Classes)：
 
@@ -247,7 +249,8 @@ const regexp = new RegExp("abc");
 
 例如，像 [`map()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 这样的“数组方法”只是在 `Array.prototype` 上定义的方法，而它们又自动在所有数组实例上可用，就是因为这个原因。
 
-> **警告：** 有一个常见的错误实践（misfeature）：扩展 `Object.prototype` 或其它内置原型。这种不良特性例子是，定义 `Array.prototype.myMethod = function () {...}`，然后在所有数组实例上使用 `myMethod`。
+> [!WARNING]
+> 有一个常见的错误实践（misfeature）：扩展 `Object.prototype` 或其它内置原型。这种不良特性例子是，定义 `Array.prototype.myMethod = function () {...}`，然后在所有数组实例上使用 `myMethod`。
 >
 > 这种错误实践被称为*猴子修补*（monkey patching）。使用猴子修补存在向前兼容的风险，因为如果语言在未来添加了此方法但具有不同的签名，你的代码将会出错。它已经导致了类似于 [SmooshGate](https://developer.chrome.com/blog/smooshgate/) 这样的事件，并且由于 JavaScript 致力于“不破坏 web”，因此这可能会对语言的发展造成极大的麻烦。
 >
@@ -349,7 +352,8 @@ console.log(doSomethingFromArrowFunction.prototype);
 }
 ```
 
-> **备注：** Chrome 控制台使用 `[[Prototype]]` 来表示对象的原型，遵循规范的术语；Firefox 使用 `<prototype>`。为了保持一致性，我们将使用 `[[Prototype]]`。
+> [!NOTE]
+> Chrome 控制台使用 `[[Prototype]]` 来表示对象的原型，遵循规范的术语；Firefox 使用 `<prototype>`。为了保持一致性，我们将使用 `[[Prototype]]`。
 
 我们可以像下面这样，向 `doSomething()` 的原型添加属性。
 
diff --git a/files/zh-cn/web/javascript/language_overview/index.md b/files/zh-cn/web/javascript/language_overview/index.md
index 1357447b603b62..faf633a4743a8a 100644
--- a/files/zh-cn/web/javascript/language_overview/index.md
+++ b/files/zh-cn/web/javascript/language_overview/index.md
@@ -11,7 +11,8 @@ slug: Web/JavaScript/Language_overview
 
 几个月后，Microsoft 随 IE 3 发布推出了一个与之基本兼容的语言 JScript。又过了几个月，Netscape 将 JavaScript 提交至 [Ecma International](http://www.ecma-international.org)（一个欧洲标准化组织），{{Glossary("ECMAScript")}} 标准第一版便在 1997 年诞生了，随后在 1999 年以 [ECMAScript 第三版](http://www.ecma-international.org/publications/standards/Ecma-262.htm)的形式进行了更新，从那之后这个标准没有发生过大的改动。由于委员会在语言特性的讨论上发生分歧，ECMAScript 第四版尚未推出便被废除，但随后于 2009 年 12 月发布的 ECMAScript 第五版引入了第四版草案加入的许多特性。第六版标准已经于 2015 年 6 月发布。
 
-> **备注：** 由于这种用法更常见，从这里开始，我们将使用 JavaScript 来指代 ECMAScript。
+> [!NOTE]
+> 由于这种用法更常见，从这里开始，我们将使用 JavaScript 来指代 ECMAScript。
 
 与大多数编程语言不同，JavaScript 没有输入或输出的概念。它是一个在宿主环境（host environment）下运行的脚本语言，任何与外界沟通的机制都是由宿主环境提供的。浏览器是最常见的宿主环境，但在非常多的其他程序中也包含 JavaScript 解释器，如 Adobe Acrobat、Adobe Photoshop、SVG 图像、Yahoo！的 Widget 引擎，[Node.js](http://nodejs.org) 之类的服务器端环境，NoSQL 数据库（如开源的 [Apache CouchDB](http://couchdb.apache.org)）、嵌入式计算机，以及包括 [GNOME](http://www.gnome.org)（注：GNU/Linux 上最流行的 GUI 之一）在内的桌面环境等等。
 
@@ -482,11 +483,13 @@ obj.for = "Simon"; // 语法错误，因为 for 是一个预留关键字
 obj["for"] = "Simon"; // 工作正常
 ```
 
-> **备注：** 从 ECMAScript 5 开始，预留关键字可以作为对象的属性名（reserved words may be used as object property names "in the buff"）。这意味着当定义对象字面量时不需要用双引号了。参见 ES5 [Spec](http://es5.github.io/#x7.6.1).
+> [!NOTE]
+> 从 ECMAScript 5 开始，预留关键字可以作为对象的属性名（reserved words may be used as object property names "in the buff"）。这意味着当定义对象字面量时不需要用双引号了。参见 ES5 [Spec](http://es5.github.io/#x7.6.1).
 
 关于对象和原型的详情参见： [Object.prototype](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype). 解释对象原型和对象原型链可以参见：[继承与原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)。
 
-> **备注：** 从 ECMAScript 2015 开始，对象键可以在创建时使用括号表示法由变量定义。{\[phoneType]: 12345} 可以用来替换 `var userPhone = {}; userPhone[phoneType] = 12345` .
+> [!NOTE]
+> 从 ECMAScript 2015 开始，对象键可以在创建时使用括号表示法由变量定义。{\[phoneType]: 12345} 可以用来替换 `var userPhone = {}; userPhone[phoneType] = 12345` .
 
 ## 数组
 
@@ -648,7 +651,8 @@ function avg(...args) {
 avg(2, 3, 4, 5); // 3.5
 ```
 
-> **备注：** 在上面这段代码中，所有被传入该函数的参数都被变量 **args** 所持有。需要注意的是，无论“剩余参数操作符”被放置到函数声明的哪里，它都会把除了自己之前的所有参数存储起来。比如函数：function avg(**firstValue**, ...args) 会把传入函数的第一个值存入 **firstValue**，其他的参数存入 **args**。虽然这是一个很有用的语言特性，却也会带来新的问题。`avg()` 函数只接受逗号分开的参数列表——但是如果你想要获取一个数组的平均值怎么办？一种方法是将函数按照如下方式重写：
+> [!NOTE]
+> 在上面这段代码中，所有被传入该函数的参数都被变量 **args** 所持有。需要注意的是，无论“剩余参数操作符”被放置到函数声明的哪里，它都会把除了自己之前的所有参数存储起来。比如函数：function avg(**firstValue**, ...args) 会把传入函数的第一个值存入 **firstValue**，其他的参数存入 **args**。虽然这是一个很有用的语言特性，却也会带来新的问题。`avg()` 函数只接受逗号分开的参数列表——但是如果你想要获取一个数组的平均值怎么办？一种方法是将函数按照如下方式重写：
 
 ```js
 function avgArray(arr) {
@@ -669,7 +673,8 @@ avg.apply(null, [2, 3, 4, 5]); // 3.5
 
 传给 `apply()` 的第二个参数是一个数组，它将被当作 `avg()` 的参数列表使用，至于第一个参数 `null`，我们将在后面讨论。这也正说明了一个事实——函数也是对象。
 
-> **备注：** 通过使用[展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)，你也可以获得同样的效果。比如说：`avg(...numbers)`
+> [!NOTE]
+> 通过使用[展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)，你也可以获得同样的效果。比如说：`avg(...numbers)`
 
 JavaScript 允许你创建匿名函数：
 
@@ -735,7 +740,8 @@ var charsInBody = (function counter(elm) {
 
 ## 自定义对象
 
-> **备注：** 关于 JavaScript 中面向对象编程更详细的信息，请参考 [JavaScript 面向对象简介](/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)。
+> [!NOTE]
+> 关于 JavaScript 中面向对象编程更详细的信息，请参考 [JavaScript 面向对象简介](/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)。
 
 在经典的面向对象语言中，对象是指数据和在这些数据上进行的操作的集合。与 C++ 和 Java 不同，JavaScript 是一种基于原型的编程语言，并没有 class 语句，而是把函数用作类。那么让我们来定义一个人名对象，这个对象包括人的姓和名两个域（field）。名字的表示有两种方法：“名 姓（First Last）”或“姓，名（Last, First）”。使用我们前面讨论过的函数和对象概念，可以像这样完成定义：
 
diff --git a/files/zh-cn/web/javascript/reference/classes/constructor/index.md b/files/zh-cn/web/javascript/reference/classes/constructor/index.md
index 0714f321466a16..0f67ca1a0f2276 100644
--- a/files/zh-cn/web/javascript/reference/classes/constructor/index.md
+++ b/files/zh-cn/web/javascript/reference/classes/constructor/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`constructor`** 是一种用于创建和初始化 [`class`](/zh-CN/docs/Web/JavaScript/Reference/Statements/class) 对象实例的特殊方法。
 
-> **备注：** 本页介绍 `constructor` 语法。关于所有对象的 `constructor` 属性，请参见 {{jsxref("Object.prototype.constructor")}}。
+> [!NOTE]
+> 本页介绍 `constructor` 语法。关于所有对象的 `constructor` 属性，请参见 {{jsxref("Object.prototype.constructor")}}。
 
 {{EmbedInteractiveExample("pages/js/classes-constructor.html")}}
 
@@ -61,7 +62,8 @@ constructor(...args) {
 }
 ```
 
-> **备注：** 像上面这样的显式构造函数与默认构造函数的区别在于，后者实际上并不通过[参数展开](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)来调用[数组迭代器](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator)。
+> [!NOTE]
+> 像上面这样的显式构造函数与默认构造函数的区别在于，后者实际上并不通过[参数展开](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)来调用[数组迭代器](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator)。
 
 这样代码才能正常工作：
 
diff --git a/files/zh-cn/web/javascript/reference/classes/extends/index.md b/files/zh-cn/web/javascript/reference/classes/extends/index.md
index 16840d058fcf34..58681676a02de5 100644
--- a/files/zh-cn/web/javascript/reference/classes/extends/index.md
+++ b/files/zh-cn/web/javascript/reference/classes/extends/index.md
@@ -120,7 +120,8 @@ console.log(new ChildClass()); // TypeError: Derived constructors may only retur
 
 ### 子类化内置类
 
-> **警告：** 标准委员会目前的立场是，以前版本规范中的内置类的子类化机制设计过度，对性能和安全性造成了不可忽视的影响。新的内置方法较少考虑子类，引擎实现者正在[研究是否要删除某些子类机制](https://github.com/tc39/proposal-rm-builtin-subclassing)。在增强内置类时，请考虑使用组合而非继承。
+> [!WARNING]
+> 标准委员会目前的立场是，以前版本规范中的内置类的子类化机制设计过度，对性能和安全性造成了不可忽视的影响。新的内置方法较少考虑子类，引擎实现者正在[研究是否要删除某些子类机制](https://github.com/tc39/proposal-rm-builtin-subclassing)。在增强内置类时，请考虑使用组合而非继承。
 
 下面是扩展类时可能会遇到的一些问题：
 
diff --git a/files/zh-cn/web/javascript/reference/classes/index.md b/files/zh-cn/web/javascript/reference/classes/index.md
index 721896aa4ed490..653df6242c8afd 100644
--- a/files/zh-cn/web/javascript/reference/classes/index.md
+++ b/files/zh-cn/web/javascript/reference/classes/index.md
@@ -72,7 +72,8 @@ const Rectangle = class Rectangle2 {
 - [私有属性](/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_properties)
   - : 所有私有的元素
 
-> **备注：** 私有属性具有在同一个类种声明的所有属性的名称必须唯一的限制。其他所有的公有属性都没有这个限制——你可以写多个同名的公有属性，但是最后一个会覆盖掉其他的。此种表现与[对象初始化器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#重复属性名)相同。
+> [!NOTE]
+> 私有属性具有在同一个类种声明的所有属性的名称必须唯一的限制。其他所有的公有属性都没有这个限制——你可以写多个同名的公有属性，但是最后一个会覆盖掉其他的。此种表现与[对象初始化器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#重复属性名)相同。
 
 另外，有两种特殊的类元素语法：[`constructor`](#构造函数) 和[静态初始化块](#静态初始化块)，它们有自己的参考资料。
 
diff --git a/files/zh-cn/web/javascript/reference/classes/private_properties/index.md b/files/zh-cn/web/javascript/reference/classes/private_properties/index.md
index b52ed108b4fde5..295c3a5feddad0 100644
--- a/files/zh-cn/web/javascript/reference/classes/private_properties/index.md
+++ b/files/zh-cn/web/javascript/reference/classes/private_properties/index.md
@@ -71,7 +71,8 @@ instance.#privateField; // Syntax error
 
 JavaScript 作为动态语言，能够在编译时检查 `#` 标识符的语法，使其与普通属性的语法不同。
 
-> **备注：** Chrome 控制台中运行的代码可以访问类的私有属性。这是 JavaScript 语法限制对开发者工具的一种放宽。
+> [!NOTE]
+> Chrome 控制台中运行的代码可以访问类的私有属性。这是 JavaScript 语法限制对开发者工具的一种放宽。
 
 如果你访问对象中不存在的私有属性，会抛出 {{jsxref("TypeError")}} 错误，而不是像普通属性一样返回 `undefined`。
 
@@ -182,7 +183,8 @@ console.log(obj instanceof Stamper); // false
 new Stamper(obj); // Error: Initializing an object twice is an error with private fields
 ```
 
-> **警告：** 这可能是一种非常令人困惑的做法。你应该避免从构造函数返回任何东西——尤其是与 `this` 无关的东西。
+> [!WARNING]
+> 这可能是一种非常令人困惑的做法。你应该避免从构造函数返回任何东西——尤其是与 `this` 无关的东西。
 
 #### 私有静态字段
 
diff --git a/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.md b/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.md
index b9de82df8a43bf..2f4f892c4a5fe1 100644
--- a/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.md
+++ b/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.md
@@ -142,7 +142,8 @@ console.log(instance.d); // 3
 console.log(instance.b); // undefined
 ```
 
-> **备注：** 这对[私有字段](/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_properties)更为重要，因为访问未初始化的私有字段会抛出 {{jsxref("TypeError")}}，即使该私有字段已在下面声明。（如果未声明私有字段，则会提前抛出 {{jsxref("SyntaxError")}}。）
+> [!NOTE]
+> 这对[私有字段](/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_properties)更为重要，因为访问未初始化的私有字段会抛出 {{jsxref("TypeError")}}，即使该私有字段已在下面声明。（如果未声明私有字段，则会提前抛出 {{jsxref("SyntaxError")}}。）
 
 由于类字段是使用 [`[[DefineOwnProperty]]`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty) 语义（本质上是 {{jsxref("Object.defineProperty()")}}）添加的，因此派生类中的字段声明不会调用基类中的 setter。这种行为不同于在构造函数中使用 `this.field = …`。
 
@@ -169,7 +170,8 @@ class DerivedWithConstructor extends Base {
 const instance2 = new DerivedWithConstructor(); // 打印 1
 ```
 
-> **备注：** 在类字段规范最终确定为`[[DefineOwnProperty]]`语义之前，包括 [Babel](https://babeljs.io/) 和 [tsc](https://www.typescriptlang.org/)在内的大多数转译器都将类字段转换为 `DerivedWithConstructor` 形式，这在类字段规范化之后造成了一些微妙的错误。
+> [!NOTE]
+> 在类字段规范最终确定为`[[DefineOwnProperty]]`语义之前，包括 [Babel](https://babeljs.io/) 和 [tsc](https://www.typescriptlang.org/)在内的大多数转译器都将类字段转换为 `DerivedWithConstructor` 形式，这在类字段规范化之后造成了一些微妙的错误。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/classes/static/index.md b/files/zh-cn/web/javascript/reference/classes/static/index.md
index 348fdca5ee3584..c522f200ebfbee 100644
--- a/files/zh-cn/web/javascript/reference/classes/static/index.md
+++ b/files/zh-cn/web/javascript/reference/classes/static/index.md
@@ -11,7 +11,8 @@ l10n:
 
 静态方法通常是实用函数，如创建或克隆对象的函数，而静态属性则适用于缓存、固定配置或其他不需要跨实例复制的数据。
 
-> **备注：** 在类的上下文中，MDN Web 文档内容交替使用属性和[字段](/zh-CN/docs/Web/JavaScript/Reference/Classes/Public_class_fields)这两个术语。
+> [!NOTE]
+> 在类的上下文中，MDN Web 文档内容交替使用属性和[字段](/zh-CN/docs/Web/JavaScript/Reference/Classes/Public_class_fields)这两个术语。
 
 {{EmbedInteractiveExample("pages/js/classes-static.html", "taller")}}
 
@@ -88,7 +89,8 @@ console.log(SubClassWithStaticField.subStaticField); // "基类静态方法输
 
 静态字段初始化器和[静态初始化块](/zh-CN/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks)是逐个求值的。字段初始化器可以引用其上的字段值，但不能引用其下的字段值。所有静态方法都会事先添加并可被访问，但如果它们引用的字段在被初始化的字段的下方，则调用它们时可能会出现与预期不符的情况。
 
-> **备注：** 对于[私有静态字段](/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_properties)而言，这一点更为重要，因为访问未初始化的私有字段会抛出 {{jsxref("TypeError")}}，即使该私有字段已在下面声明。（如果未声明私有字段，则会提前抛出 {{jsxref("SyntaxError")}}。）
+> [!NOTE]
+> 对于[私有静态字段](/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_properties)而言，这一点更为重要，因为访问未初始化的私有字段会抛出 {{jsxref("TypeError")}}，即使该私有字段已在下面声明。（如果未声明私有字段，则会提前抛出 {{jsxref("SyntaxError")}}。）
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md
index 7c99a5002e59d2..97cbfddc1cf252 100644
--- a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md
+++ b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md
@@ -52,7 +52,8 @@ console.log("b");
 - {{jsxref("RegExp.rightContext", "rightContext, $'")}}
   - : 最近一次匹配后的子串。
 
-> **警告：** 避免使用这些静态属性，因为它们可能导致[与外部代码交互时的问题](https://github.com/tc39/proposal-regexp-legacy-features/blob/master/subclass-restriction-motivation.md#legacy-static-properties-regexp1-etc)！
+> [!WARNING]
+> 避免使用这些静态属性，因为它们可能导致[与外部代码交互时的问题](https://github.com/tc39/proposal-regexp-legacy-features/blob/master/subclass-restriction-motivation.md#legacy-static-properties-regexp1-etc)！
 
 {{jsxref("RegExp/compile", "compile()")}} 方法已被废弃，请构造一个新的 `RegExp` 实例。
 
diff --git a/files/zh-cn/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md b/files/zh-cn/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md
index 7a91a32617c337..88349421fa9591 100644
--- a/files/zh-cn/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md
+++ b/files/zh-cn/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md
@@ -69,7 +69,8 @@ function foo() {
 foo().a = 1;
 ```
 
-> **备注：** 在 Firefox 和 Safari 中，第一个示例在非严格模式下会产生 `ReferenceError` 错误，而在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下则会产生 `SyntaxError` 错误。Chrome 在严格模式和非严格模式下都会抛出运行时的 `ReferenceError` 错误。
+> [!NOTE]
+> 在 Firefox 和 Safari 中，第一个示例在非严格模式下会产生 `ReferenceError` 错误，而在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下则会产生 `SyntaxError` 错误。Chrome 在严格模式和非严格模式下都会抛出运行时的 `ReferenceError` 错误。
 
 ### 使用可选链运算符作为赋值目标
 
diff --git a/files/zh-cn/web/javascript/reference/errors/not_defined/index.md b/files/zh-cn/web/javascript/reference/errors/not_defined/index.md
index df41c0fbaa6a95..65bfa927cd38d4 100644
--- a/files/zh-cn/web/javascript/reference/errors/not_defined/index.md
+++ b/files/zh-cn/web/javascript/reference/errors/not_defined/index.md
@@ -19,7 +19,8 @@ ReferenceError: "x" is not defined
 
 在某些地方引用一个不存在的变量的时候。当你使用变量的时候，这个变量必须是已经被声明的，或者你可以确保它在你当前的脚本或作用域 ({{Glossary("scope")}}) 中可用。
 
-> **备注：** 当你加载一个库的时候（例如 jQuery），请确保你在这个库加载完毕后再使用这个库中的变量，如“$”。将你想加载的库的 {{HTMLElement("script")}} 标签放置在你的代码前面。
+> [!NOTE]
+> 当你加载一个库的时候（例如 jQuery），请确保你在这个库加载完毕后再使用这个库中的变量，如“$”。将你想加载的库的 {{HTMLElement("script")}} 标签放置在你的代码前面。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/callee/index.md b/files/zh-cn/web/javascript/reference/functions/arguments/callee/index.md
index e1de6bc5cb0c14..7bac3c9fa4a75c 100644
--- a/files/zh-cn/web/javascript/reference/functions/arguments/callee/index.md
+++ b/files/zh-cn/web/javascript/reference/functions/arguments/callee/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Functions/arguments/callee
 
 {{jsSidebar("Functions")}}{{Deprecated_Header}}
 
-> **备注：** 在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下访问 `arguments.callee` 会抛出 {{jsxref("TypeError")}}。若一个函数必须引用自身，请为[函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function)命名，或使用[函数声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/function)。
+> [!NOTE]
+> 在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下访问 `arguments.callee` 会抛出 {{jsxref("TypeError")}}。若一个函数必须引用自身，请为[函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function)命名，或使用[函数声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/function)。
 
 **`arguments.callee`** 数据属性包含 arguments 所属的当前正在执行的函数。
 
@@ -138,7 +139,8 @@ console.log(
 // [ 1, 2, 6, 24, 120 ]
 ```
 
-> **备注：** 此方法为每一次迭代创建一个新的闭包，这可能会显著增加内存的使用量。这里只是为了演示这种可能性，但应该在生产环境中避免。请改用临时变量或具名函数表达式。
+> [!NOTE]
+> 此方法为每一次迭代创建一个新的闭包，这可能会显著增加内存的使用量。这里只是为了演示这种可能性，但应该在生产环境中避免。请改用临时变量或具名函数表达式。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/index.md b/files/zh-cn/web/javascript/reference/functions/arguments/index.md
index 2e08d5410acc0a..0045240bab3256 100644
--- a/files/zh-cn/web/javascript/reference/functions/arguments/index.md
+++ b/files/zh-cn/web/javascript/reference/functions/arguments/index.md
@@ -11,9 +11,11 @@ slug: Web/JavaScript/Reference/Functions/arguments
 
 ## 描述
 
-> **备注：** 如果你编写兼容 ES6 的代码，那么优先推荐使用 [剩余参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters)
+> [!NOTE]
+> 如果你编写兼容 ES6 的代码，那么优先推荐使用 [剩余参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters)
 
-> **备注：** “类数组”意味着 `arguments` 有 {{jsxref("Functions/arguments/length", "长度")}} 属性 并且属性的索引是从零开始的，但是它没有 {{JSxRef("Array")}}的 内置方法，例如 {{jsxref("Array.forEach", "forEach()")}} 和 {{jsxref("Array.map", "map()")}}都是没有的。详情可以看 [§Description](/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments#Description).
+> [!NOTE]
+> “类数组”意味着 `arguments` 有 {{jsxref("Functions/arguments/length", "长度")}} 属性 并且属性的索引是从零开始的，但是它没有 {{JSxRef("Array")}}的 内置方法，例如 {{jsxref("Array.forEach", "forEach()")}} 和 {{jsxref("Array.map", "map()")}}都是没有的。详情可以看 [§Description](/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments#Description).
 
 `arguments`对象是所有（非箭头）函数中都可用的**局部变量**。你可以使用`arguments`对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引 0 处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：
 
@@ -42,7 +44,8 @@ const args = Array.from(arguments);
 const args = [...arguments];
 ```
 
-> **警告：** 对参数使用 slice 会阻止某些 JavaScript 引擎中的优化 (比如 V8 - [更多信息](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments))。如果你关心性能，尝试通过遍历 arguments 对象来构造一个新的数组。另一种方法是使用被忽视的`Array`构造函数作为一个函数：
+> [!WARNING]
+> 对参数使用 slice 会阻止某些 JavaScript 引擎中的优化 (比如 V8 - [更多信息](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments))。如果你关心性能，尝试通过遍历 arguments 对象来构造一个新的数组。另一种方法是使用被忽视的`Array`构造函数作为一个函数：
 >
 > ```js
 > var args =
diff --git a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md
index 56ea5ce8a87c34..107f79a245fa37 100644
--- a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md
+++ b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md
@@ -61,7 +61,8 @@ async (param1, param2, ...paramN) => {
 
 让我们逐步将传统的匿名函数分解为最简单的箭头函数。每一步都是一个有效的箭头函数。
 
-> **备注：** 传统函数表达式和箭头函数除了语法上的区别外，还有更多的不同。我们将在接下来的几个小节中详细介绍它们的行为差异。
+> [!NOTE]
+> 传统函数表达式和箭头函数除了语法上的区别外，还有更多的不同。我们将在接下来的几个小节中详细介绍它们的行为差异。
 
 ```js-nolint
 // 传统匿名函数
@@ -238,7 +239,8 @@ class C {
 }
 ```
 
-> **备注：** 类字段是在*实例*（instance）上定义的，而不是在*原型*（prototype）上定义的，因此每次创建实例都会创建一个新的函数引用并分配一个新的闭包，这可能会导致比普通非绑定方法更多的内存使用。
+> [!NOTE]
+> 类字段是在*实例*（instance）上定义的，而不是在*原型*（prototype）上定义的，因此每次创建实例都会创建一个新的函数引用并分配一个新的闭包，这可能会导致比普通非绑定方法更多的内存使用。
 
 出于类似原因，[`call()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 和 [`bind()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 方法在箭头函数上调用时不起作用，因为箭头函数是根据箭头函数定义的作用域来建立 `this` 的，而 `this` 值不会根据函数的调用方式而改变。
 
@@ -255,7 +257,8 @@ function foo(n) {
 foo(3); // 3 + 3 = 6
 ```
 
-> **备注：** 在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode#让_eval_和_arguments_变的简单)下不能声明名为 `arguments` 的变量，因此上面的代码会出现语法错误。这使得 `arguments` 的范围效应更容易理解。
+> [!NOTE]
+> 在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode#让_eval_和_arguments_变的简单)下不能声明名为 `arguments` 的变量，因此上面的代码会出现语法错误。这使得 `arguments` 的范围效应更容易理解。
 
 在大多数情况下，使用[剩余参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters)是比使用 `arguments` 对象更好的选择。
 
diff --git a/files/zh-cn/web/javascript/reference/functions/get/index.md b/files/zh-cn/web/javascript/reference/functions/get/index.md
index 31b88f97b29eb5..6c0869dbf315ff 100644
--- a/files/zh-cn/web/javascript/reference/functions/get/index.md
+++ b/files/zh-cn/web/javascript/reference/functions/get/index.md
@@ -103,7 +103,8 @@ Getters 给你一种方法来定义一个对象的属性，但是在访问它们
 - 如果现在不需要该值。它将在稍后使用，或在某些情况下它根本不使用。
 - 如果被使用，它将被访问几次，并且不需要重新计算，该值将永远不会被改变，或者不应该被重新计算。
 
-> **备注：** 这意味着你不应该为你希望更改其值的属性使用懒 getter，因为 getter 不会重新计算该值。
+> [!NOTE]
+> 这意味着你不应该为你希望更改其值的属性使用懒 getter，因为 getter 不会重新计算该值。
 
 在以下示例中，对象具有一个 getter 属性。在获取属性时，该属性将从对象中删除并重新添加，但此时将隐式显示为数据属性。最后返回得到值。
 
diff --git a/files/zh-cn/web/javascript/reference/functions/index.md b/files/zh-cn/web/javascript/reference/functions/index.md
index 280ab819bfe730..c50f971efdcb06 100644
--- a/files/zh-cn/web/javascript/reference/functions/index.md
+++ b/files/zh-cn/web/javascript/reference/functions/index.md
@@ -156,7 +156,8 @@ function* [name]([param] [, param] [..., param]) { statements }
 
 ### `Function`构造函数
 
-> **备注：** 不推荐使用 `Function` 构造函数创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。
+> [!NOTE]
+> 不推荐使用 `Function` 构造函数创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。
 
 所有其他对象，{{jsxref("Function")}} 对象可以用 new 操作符创建：
 
@@ -175,7 +176,8 @@ new Function (arg1, arg2, ... argN, functionBody)
 
 > **备注：** `GeneratorFunction` 不是一个全局对象，但可以从构造函数实例取得。(详情请查阅[生成器函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数)).
 
-> **备注：** 不推荐使用构造器函数的构造函数 (`GeneratorFunction` constructor) 创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。
+> [!NOTE]
+> 不推荐使用构造器函数的构造函数 (`GeneratorFunction` constructor) 创建函数，因为它需要的函数体作为字符串可能会阻止一些 JS 引擎优化，也会引起其他问题。
 
 所有其他对象，{{jsxref("GeneratorFunction")}} 对象可以用 new 操作符创建：
 
diff --git a/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md
index 61870320d3387a..dd786266245922 100644
--- a/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md
+++ b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.md
@@ -59,7 +59,8 @@ var obj = {
 };
 ```
 
-> **备注：** 简写语法使用具名函数而不是匿名函数（如…`foo: function() {}`…）。具名函数可以从函数体调用（这对匿名函数是不可能的，因为没有标识符可以引用）。详细信息，请参阅{{jsxref("Operators/function","function","#Examples")}}。
+> [!NOTE]
+> 简写语法使用具名函数而不是匿名函数（如…`foo: function() {}`…）。具名函数可以从函数体调用（这对匿名函数是不可能的，因为没有标识符可以引用）。详细信息，请参阅{{jsxref("Operators/function","function","#Examples")}}。
 
 ### 生成器方法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.md b/files/zh-cn/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.md
index 71e7e3f4f4b2d8..a975fb49c5558d 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.md
@@ -19,7 +19,8 @@ AggregateError(errors, message)
 AggregateError(errors, message, options)
 ```
 
-> **备注：** 调用 `AggregateError()` 可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，两种方法都会创建一个新的 `AggregateError` 实例。
+> [!NOTE]
+> 调用 `AggregateError()` 可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，两种方法都会创建一个新的 `AggregateError` 实例。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md
index d4d468a8fcf7e1..3a28f345b8c68a 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md
@@ -23,7 +23,8 @@ Array(element0, element1, /* … ,*/ elementN)
 Array(arrayLength)
 ```
 
-> **备注：** 调用 `Array()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)。两者都会创建一个新的 `Array` 实例。
+> [!NOTE]
+> 调用 `Array()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)。两者都会创建一个新的 `Array` 实例。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md
index df47aef1c6300a..f7f9afd15a941b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/every/index.md
@@ -47,7 +47,8 @@ every(callbackFn, thisArg)
 - 对已访问索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果数组中一个现有的、尚未访问的元素被 `callbackFn` 更改，则它传递给 `callbackFn` 的值将是该元素被修改后的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素则不会被访问。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `every()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/fill/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/fill/index.md
index d2a1599386f058..acbb4ddece845b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/fill/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/fill/index.md
@@ -45,7 +45,8 @@ fill(value, start, end)
 
 `fill()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值有一个 `length` 属性。虽然字符串也是类似数组的，但这个方法不适合应用于它们，因为字符串是不可变的。
 
-> **备注：** 在一个空数组（`length = 0`）上使用 `Array.prototype.fill()` 不会对其进行修改，因为数组没有要修改的内容。要在声明一个数组时使用 `Array.prototype.fill()`，请确保数组的 `length` 不为零。[参见示例](#使用_fill_填充空数组)。
+> [!NOTE]
+> 在一个空数组（`length = 0`）上使用 `Array.prototype.fill()` 不会对其进行修改，因为数组没有要修改的内容。要在声明一个数组时使用 `Array.prototype.fill()`，请确保数组的 `length` 不为零。[参见示例](#使用_fill_填充空数组)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/filter/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/filter/index.md
index ca23f7477d4d36..f4c8642e339aae 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/filter/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/filter/index.md
@@ -45,7 +45,8 @@ filter(callbackFn, thisArg)
 - 对已访问索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果数组中一个现有的、尚未访问的元素被 `callbackFn` 更改，则它传递给 `callbackFn` 的值将是该元素被修改后的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素则不会被访问。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `filter()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/find/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/find/index.md
index 61ab134da5d34a..425a99e3d14509 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/find/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/find/index.md
@@ -50,7 +50,8 @@ find(callbackFn, thisArg)
 - 对已经访问过的索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果 `callbackFn` 改变了数组中已存在但尚未被访问的元素，则传递给 `callbackFn` 的该元素的值将是该元素在被访问时的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素被视为 `undefined`。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `find()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/findindex/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/findindex/index.md
index d76d9e3d621f24..1ff533a2fc268e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/findindex/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/findindex/index.md
@@ -47,7 +47,8 @@ findIndex(callbackFn, thisArg)
 - 对已经访问过的索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果 `callbackFn` 改变了数组中已存在但尚未被访问的元素，则传递给 `callbackFn` 的该元素的值将是该元素在被访问时的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素被视为 `undefined`。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `findIndex()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/findlast/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/findlast/index.md
index 11f7a465f60d2b..b9dc7f6f8f1d37 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/findlast/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/findlast/index.md
@@ -53,7 +53,8 @@ findLast(callbackFn, thisArg)
 - 给已访问过的索引重新赋值将不会被 `callbackFn` 重新访问。
 - 如果 `callbackFn` 更改了数组中现有的、尚未访问的元素，则其传递给 `callbackFn` 的值将是 `findLast()` 访问该元素索引时的值。[已删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素会被当做 `undefined` 来访问。
 
-> **警告：** 上一段描述的并发修改的情况经常导致难以理解的代码，通常应该避免（特殊情况除外）。
+> [!WARNING]
+> 上一段描述的并发修改的情况经常导致难以理解的代码，通常应该避免（特殊情况除外）。
 
 `findLast()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键的属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/findlastindex/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/findlastindex/index.md
index 0d0a42909b5b75..7049e57c7615ac 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/findlastindex/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/findlastindex/index.md
@@ -49,7 +49,8 @@ findLastIndex(callbackFn, thisArg)
 - 对已访问索引的更改不会导致对它们再次调用 `callbackFn` 函数。
 - 如果 `callbackFn` 更改了数组中现有的、尚未访问的元素，它传递给`callbackFn` 的值将是该元素被访问时的值。[已删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)元素被当作 `undefined` 来访问。
 
-> **警告：** 上一段描述的并发修改的情况经常导致难以理解的代码，通常应该避免（特殊情况除外）。
+> [!WARNING]
+> 上一段描述的并发修改的情况经常导致难以理解的代码，通常应该避免（特殊情况除外）。
 
 `findLastIndex()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整型键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md
index 5baf25b09759f0..259a72cde55faa 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/foreach/index.md
@@ -45,7 +45,8 @@ forEach(callbackFn, thisArg)
 - 已经访问过的索引的更改不会导致 `callbackFn` 再次调用它们。
 - 如果 `callbackFn` 更改了数组中已经存在但尚未访问的元素，则传递给 `callbackFn` 的值将是在访问该元素时的值。已经被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素不会被访问。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `forEach()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键的属性。
 
@@ -114,7 +115,8 @@ items.forEach((item) => {
 
 ### 打印出数组的内容
 
-> **备注：** 为了在控制台中显示数组的内容，你可以使用 {{domxref("console/table", "console.table()")}} 来展示经过格式化的数组。下面的例子则是另一种使用 `forEach()` 的格式化的方法。
+> [!NOTE]
+> 为了在控制台中显示数组的内容，你可以使用 {{domxref("console/table", "console.table()")}} 来展示经过格式化的数组。下面的例子则是另一种使用 `forEach()` 的格式化的方法。
 
 下面的代码会为每一个数组元素输出一行记录：
 
@@ -158,7 +160,8 @@ console.log(obj.sum); // 16
 
 因为 `thisArg` 参数（`this`）传给了 `forEach()`，每次调用时，它都被传给 `callbackFn` 函数，作为它的 `this` 值。
 
-> **备注：** 如果使用[箭头函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)来传入函数参数， `thisArg` 参数会被忽略，因为箭头函数在词法上绑定了 {{jsxref("Operators/this", "this")}} 值。
+> [!NOTE]
+> 如果使用[箭头函数表达式](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)来传入函数参数， `thisArg` 参数会被忽略，因为箭头函数在词法上绑定了 {{jsxref("Operators/this", "this")}} 值。
 
 ### 对象复制函数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/from/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/from/index.md
index 39f192430d06ce..ee60938d851d20 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/from/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/from/index.md
@@ -47,7 +47,8 @@ Array.from(arrayLike, mapFn, thisArg)
 
 `Array.from()` 有一个可选的参数 `mapFn`，该参数允许你在创建数组时为每个元素执行一个函数，类似于 {{jsxref("Array.prototype.map()", "map()")}}。更明确地说，`Array.from(obj, mapFn, thisArg)` 和 `Array.from(obj).map(mapFn, thisArg)` 具有相同的结果，只是它不会创建中间数组，并且 `mapFn` 仅接受两个参数（`element`、`index`），不接受数组，因为数组仍然在构建中。
 
-> **备注：** 此行为对于[类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)更为重要，因为中间数组的值必须被截断，以适应相应的类型。`Array.from()` 的实现与 {{jsxref("TypedArray.from()")}} 具有相同的签名。
+> [!NOTE]
+> 此行为对于[类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)更为重要，因为中间数组的值必须被截断，以适应相应的类型。`Array.from()` 的实现与 {{jsxref("TypedArray.from()")}} 具有相同的签名。
 
 `Array.from()` 方法是一个通用的工厂方法。例如，如果一个数组类的子类继承 `from()` 方法，继承的 `from()` 方法将返回新的子类的实例，而不是数组的实例。事实上，`this` 值可以是任意的构造函数，只要该构造函数接受一个表示新数组长度的单个参数。当一个迭代器对象作为类数组传递时，不带参数调用构造函数；当传递类数组对象时，将携带类数组对象的[规范化长度](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#长度属性的规范化)调用构造函数。迭代完成时，将再次设置最终的 `length`。如果 `this` 值并不是构造函数，则使用 `Array` 构造函数。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
index 4855785cf7eda3..3cc64c92708fe8 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
@@ -97,7 +97,7 @@ colors.forEach((item, index) => {
 // 0：红
 // 1：黄
 // 2：蓝
-// 5：蓝
+// 5：紫
 
 colors.reverse(); // ['紫', 空槽 × 2, '蓝', '黄', '红']
 ```
@@ -377,7 +377,8 @@ f("a", "b"); // 'a+b'
 
 本节提供一些 JavaScript 中常见的数组操作示例。
 
-> **备注：** 如果你还不熟悉数组的基础知识，可以考虑先读一下 [JavaScript 第一步：数组](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays)，它解释了[数组是什么](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#数组是什么？)，还包括其他常见的数组操作示例。
+> [!NOTE]
+> 如果你还不熟悉数组的基础知识，可以考虑先读一下 [JavaScript 第一步：数组](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays)，它解释了[数组是什么](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#数组是什么？)，还包括其他常见的数组操作示例。
 
 ### 创建数组
 
@@ -794,7 +795,8 @@ console.log(execResult); // [ "dbBd", "bB", "d" ]
 - 对已访问索引的变更不会导致再次对其调用 `callbackFn`。
 - 如果数组中存在但未访问的元素被 `callbackFn` 更改，则传递给 `callbackFn` 的值将是访问该元素时的值。删除的元素不会被访问。
 
-> **警告：** 上述类型的并发修改通常会导致代码难以理解，需要避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改通常会导致代码难以理解，需要避免（特殊情况除外）。
 
 下面的示例使用 `forEach` 方法作为一个例子，但以升序访问索引的其他的方法以相同的方式工作。我们将先定义一个帮助函数：
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/map/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/map/index.md
index 19e4eee48830c7..8c5c4eb0343e43 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/map/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/map/index.md
@@ -45,7 +45,8 @@ map(callbackFn, thisArg)
 - 对已访问索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果数组中一个现有的、尚未访问的元素被 `callbackFn` 更改，则它传递给 `callbackFn` 的值将是该元素被修改后的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素则不会被访问。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `map()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/reduce/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/reduce/index.md
index bb425cc94dd4b0..1892e0b725075e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/reduce/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/reduce/index.md
@@ -62,7 +62,8 @@ reduce(callbackFn, initialValue)
 - 对已访问索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果数组中一个现有的、尚未访问的元素被 `callbackFn` 更改，则它传递给 `callbackFn` 的值将是该元素被修改后的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素则不会被访问。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `reduce()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
@@ -256,7 +257,8 @@ console.log(allbooks);
 
 ### 数组去重
 
-> **备注：** 可以使用 {{jsxref("Set")}} 和 {{jsxref("Array.from()")}} 来实现相同的效果，如 `const arrayWithNoDuplicates = Array.from(new Set(myArray))`，并且性能更好。
+> [!NOTE]
+> 可以使用 {{jsxref("Set")}} 和 {{jsxref("Array.from()")}} 来实现相同的效果，如 `const arrayWithNoDuplicates = Array.from(new Set(myArray))`，并且性能更好。
 
 ```js
 const myArray = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"];
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md
index f8c57cc75c11bd..7d757ea85e7a38 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/reduceright/index.md
@@ -51,7 +51,8 @@ reduceRight(callbackFn, initialValue)
 - 对已访问索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果数组中一个现有的、尚未访问的元素被 `callbackFn` 更改，则它传递给 `callbackFn` 的值将是该元素被修改后的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素则不会被访问。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `reduceRight()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md
index 773f07a287d1f8..57dae286dcb453 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/some/index.md
@@ -47,7 +47,8 @@ some(callbackFn, thisArg)
 - 对已访问索引的更改不会导致再次在这些元素上调用 `callbackFn`。
 - 如果数组中一个现有的、尚未访问的元素被 `callbackFn` 更改，则它传递给 `callbackFn` 的值将是该元素被修改后的值。被[删除](/zh-CN/docs/Web/JavaScript/Reference/Operators/delete)的元素则不会被访问。
 
-> **警告：** 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
+> [!WARNING]
+> 上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。
 
 `some()` 方法是[通用的](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#通用数组方法)。它只期望 `this` 值具有 `length` 属性和整数键属性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/sort/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/sort/index.md
index 6247059a69cb98..3f0aeb4361a675 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/sort/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/sort/index.md
@@ -43,7 +43,8 @@ sort(compareFn)
 
 `sort()` 方法保留空槽。如果源数组是[稀疏的](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#稀疏数组)，则空槽会被移动到数组的末尾，并始终排在所有 `undefined` 元素的后面。
 
-> **备注：** 在 UTF-16 中，Unicode 字符超出 `\uFFFF` 的范围会被编码为两个代理码元（surrogate code unit），这些码位的范围是 `\uD800` 到 `\uDFFF`。每个码位的值都会被单独考虑进行比较。因此，由代理对 `\uD855\uDE51` 组成的字符将排在字符 `\uFF3A` 的前面。
+> [!NOTE]
+> 在 UTF-16 中，Unicode 字符超出 `\uFFFF` 的范围会被编码为两个代理码元（surrogate code unit），这些码位的范围是 `\uD800` 到 `\uDFFF`。每个码位的值都会被单独考虑进行比较。因此，由代理对 `\uD855\uDE51` 组成的字符将排在字符 `\uFF3A` 的前面。
 
 如果提供了 `compareFn`，所有非 `undefined` 的数组元素都会按照比较函数的返回值进行排序（所有的 `undefined` 元素都会被排序到数组的末尾，并且不调用 `compareFn`）。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md
index e8ae266b7dc5cc..c7aa85d00329ec 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/values/index.md
@@ -64,7 +64,8 @@ console.log(iterator.next().value); // undefined
 
 ### 重复使用可迭代对象
 
-> **警告：** 数组迭代器对象应该是一次性使用的对象。不要重复使用它。
+> [!WARNING]
+> 数组迭代器对象应该是一次性使用的对象。不要重复使用它。
 
 `values()` 返回的可迭代对象是不可重复使用的。当 `next().done = true` 或 `currentIndex > length` 时，[`for...of` 循环结束](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#语言和迭代协议之间的交互)，进一步迭代它没有任何效果。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
index eee8548165abef..6b152506b07431 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
@@ -61,7 +61,8 @@ const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
 buffer.resize(12);
 ```
 
-> **备注：** 推荐将 `maxByteLength` 设置为使用场景下最小的大小。它不应超过 `1073741824`（1GB），以减少内存溢出风险。
+> [!NOTE]
+> 推荐将 `maxByteLength` 设置为使用场景下最小的大小。它不应超过 `1073741824`（1GB），以减少内存溢出风险。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/asyncfunction/asyncfunction/index.md b/files/zh-cn/web/javascript/reference/global_objects/asyncfunction/asyncfunction/index.md
index 78b81463251246..2d3cac3e93e454 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/asyncfunction/asyncfunction/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/asyncfunction/asyncfunction/index.md
@@ -31,7 +31,8 @@ AsyncFunction(arg1, arg2, functionBody)
 AsyncFunction(arg1, arg2, /* …, */ argN, functionBody)
 ```
 
-> **备注：** 无论是否使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 调用 `AsyncFunction()`，都可以创建一个新的 `AsyncFunction` 实例。
+> [!NOTE]
+> 无论是否使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 调用 `AsyncFunction()`，都可以创建一个新的 `AsyncFunction` 实例。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/asyncgenerator/next/index.md b/files/zh-cn/web/javascript/reference/global_objects/asyncgenerator/next/index.md
index 8045b2337db783..f09a51f77fb295 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/asyncgenerator/next/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/asyncgenerator/next/index.md
@@ -63,7 +63,8 @@ asyncGen.next().then((res) => console.log(res)); // { value: undefined, done: tr
 
 在此示例中，调用 `next` 时传入了值。
 
-> **备注：** 第一次调用不会打印任何内容，因为生成器最初没有产生任何内容。
+> [!NOTE]
+> 第一次调用不会打印任何内容，因为生成器最初没有产生任何内容。
 
 ```js
 // 异步任务。假设它在实践中做了一些更有用的事情。
diff --git a/files/zh-cn/web/javascript/reference/global_objects/asyncgeneratorfunction/asyncgeneratorfunction/index.md b/files/zh-cn/web/javascript/reference/global_objects/asyncgeneratorfunction/asyncgeneratorfunction/index.md
index b24ffdfc5a2636..fa2b95d4f1820c 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/asyncgeneratorfunction/asyncgeneratorfunction/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/asyncgeneratorfunction/asyncgeneratorfunction/index.md
@@ -31,7 +31,8 @@ AsyncGeneratorFunction(arg1, arg2, functionBody)
 AsyncGeneratorFunction(arg1, arg2, /* …, */ argN, functionBody)
 ```
 
-> **备注：** 无论是否使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 调用 `AsyncGeneratorFunction()`，都可以创建一个新的 `AsyncGeneratorFunction` 实例。
+> [!NOTE]
+> 无论是否使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 调用 `AsyncGeneratorFunction()`，都可以创建一个新的 `AsyncGeneratorFunction` 实例。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md b/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md
index 7877f4fd7f8445..341a890fdf243e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/atomics/notify/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Atomics.notify()`** 静态方法唤醒一些在等待队列中休眠的代理。
 
-> **备注：** 此操作仅适用于基于 {{jsxref("SharedArrayBuffer")}} 的 {{jsxref("Int32Array")}} 或 {{jsxref("BigInt64Array")}} 视图。对于非共享的 `ArrayBuffer` 对象，其将返回 `0`。
+> [!NOTE]
+> 此操作仅适用于基于 {{jsxref("SharedArrayBuffer")}} 的 {{jsxref("Int32Array")}} 或 {{jsxref("BigInt64Array")}} 视图。对于非共享的 `ArrayBuffer` 对象，其将返回 `0`。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md b/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md
index 5fed9b9d5e8043..8c8e4bde7b354e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/atomics/wait/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`Atomics.wait()`** 静态方法验证共享内存特定位置是否仍然包含给定值，如果是则休眠，直到被唤醒或超时。其返回一个内容为 `"ok"`、`"not-equal"` 或 `"timed-out"` 的字符串。
 
-> **备注：** 此操作仅适用于基于 {{jsxref("SharedArrayBuffer")}} 的 {{jsxref("Int32Array")}} 或 {{jsxref("BigInt64Array")}} 视图，并且在主线程中可能不可用。有关此方法的非阻塞异步版本，请参见 {{jsxref("Atomics.waitAsync()")}}。
+> [!NOTE]
+> 此操作仅适用于基于 {{jsxref("SharedArrayBuffer")}} 的 {{jsxref("Int32Array")}} 或 {{jsxref("BigInt64Array")}} 视图，并且在主线程中可能不可用。有关此方法的非阻塞异步版本，请参见 {{jsxref("Atomics.waitAsync()")}}。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/atomics/waitasync/index.md b/files/zh-cn/web/javascript/reference/global_objects/atomics/waitasync/index.md
index 64dd1622825001..833317c308f3d8 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/atomics/waitasync/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/atomics/waitasync/index.md
@@ -11,7 +11,8 @@ l10n:
 
 与 {{jsxref("Atomics.wait()")}} 不同，`waitAsync` 是非阻塞的且可用于主线程。
 
-> **备注：** 此操作仅适用于基于 {{jsxref("SharedArrayBuffer")}} 的 {{jsxref("Int32Array")}} 或 {{jsxref("BigInt64Array")}} 视图。
+> [!NOTE]
+> 此操作仅适用于基于 {{jsxref("SharedArrayBuffer")}} 的 {{jsxref("Int32Array")}} 或 {{jsxref("BigInt64Array")}} 视图。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md b/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md
index af1637ab1cfc2f..e2556254c45559 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/bigint/index.md
@@ -78,7 +78,8 @@ bigN * -1n
 
 `/` 操作符对于整数的运算也没问题。可是因为这些变量是 `BigInt` 而不是 `BigDecimal` ，该操作符结果会向零取整，也就是说不会返回小数部分。
 
-> **警告：** 当使用 `BigInt` 时，带小数的运算会被取整。
+> [!WARNING]
+> 当使用 `BigInt` 时，带小数的运算会被取整。
 
 ```js
 const expected = 4n / 2n;
diff --git a/files/zh-cn/web/javascript/reference/global_objects/boolean/boolean/index.md b/files/zh-cn/web/javascript/reference/global_objects/boolean/boolean/index.md
index 165047389035e5..34bba3d99bf52b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/boolean/boolean/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/boolean/boolean/index.md
@@ -16,7 +16,8 @@ new Boolean(value)
 Boolean(value)
 ```
 
-> **备注：** 调用 `Boolean()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，但是效果不同。参见[返回值](#返回值)部分。
+> [!NOTE]
+> 调用 `Boolean()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，但是效果不同。参见[返回值](#返回值)部分。
 
 ### 参数
 
@@ -29,13 +30,15 @@ Boolean(value)
 
 当 `Boolean()` 作为普通函数调用时（不使用 `new`），它将参数强制转换为布尔原始值。
 
-> **警告：** 你会发现你很少会使用到 `Boolean` 构造函数。
+> [!WARNING]
+> 你会发现你很少会使用到 `Boolean` 构造函数。
 
 ## 描述
 
 作为第一个参数传递的值被[转换为布尔值](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean#布尔值转换) 。如果该值被省略或为 `0`、`-0`、`0n`、[`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)、`false`、{{jsxref("NaN")}}、{{jsxref("undefined")}} 或空字符串（`""`），那么该对象的初始值为 `false`。所有其他的值，包括任何对象、空数组（`[]`）或字符串 `"false"`，都会创建一个初始值为 `true` 的对象。
 
-> **备注：** 当非标准属性 [`document.all`](/zh-CN/docs/Web/API/Document/all) 被用作该构造函数的参数时，结果是一个值为 `false` 的 `Boolean` 对象。这个属性是遗留的和非标准的，不应该被使用。
+> [!NOTE]
+> 当非标准属性 [`document.all`](/zh-CN/docs/Web/API/Document/all) 被用作该构造函数的参数时，结果是一个值为 `false` 的 `Boolean` 对象。这个属性是遗留的和非标准的，不应该被使用。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/boolean/index.md b/files/zh-cn/web/javascript/reference/global_objects/boolean/index.md
index ebe274611b28cd..bd355229a11d7f 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/boolean/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/boolean/index.md
@@ -50,7 +50,8 @@ const s = Boolean(myString); // initial value of true
 
 最后，不要在应该使用基本类型布尔值的地方使用 `Boolean` 对象。
 
-> **备注：** 当将非标准属性 [`document.all`](/zh-CN/docs/Web/API/Document#属性) 用作此构造函数的参数时，结果是值为 `false` 的布尔对象。此属性是旧的、非标准的属性，不应使用。
+> [!NOTE]
+> 当将非标准属性 [`document.all`](/zh-CN/docs/Web/API/Document#属性) 用作此构造函数的参数时，结果是值为 `false` 的布尔对象。此属性是旧的、非标准的属性，不应使用。
 
 当使用非严格相等（`==`）来比较一个对象和布尔原始值时，最重要的是需要弄明白最终比较的是什么。请看一下的示例：
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/date/date/index.md b/files/zh-cn/web/javascript/reference/global_objects/date/date/index.md
index e76346125891b8..b3e47310127304 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/date/date/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/date/date/index.md
@@ -27,7 +27,8 @@ new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)
 Date()
 ```
 
-> **备注：** 调用 `Date()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，但是它们有不同的效果。参见[返回值](#返回值)部分。
+> [!NOTE]
+> 调用 `Date()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，但是它们有不同的效果。参见[返回值](#返回值)部分。
 
 ### 参数
 
@@ -48,7 +49,8 @@ Date()
 
   - : 一个代表日期的字符串值，其格式由 {{jsxref("Date.parse()")}} 方法所识别。（ECMA262 规范规定了 [ISO 8601 的简化版本](https://tc39.es/ecma262/#sec-date-time-string-format)，但其他格式可以由实现者定义，通常包括[符合 IETF 的 RFC 2822 时间戳](https://datatracker.ietf.org/doc/html/rfc2822#page-14)。）
 
-    > **备注：** 当用 `Date` 构造函数（和 `Date.parse`，它们是等价的）解析日期字符串时，一定要确保输入符合 ISO 8601 格式（`YYYY-MM-DDTHH:mm:ss.ssZ`），其他格式的解析行为是实现定义的，可能无法在所有浏览器上运行。对 [RFC 2822](https://datatracker.ietf.org/doc/html/rfc2822) 格式字符串的支持只是惯例。如果要适应许多不同的格式，库可以提供帮助。
+    > [!NOTE]
+    > 当用 `Date` 构造函数（和 `Date.parse`，它们是等价的）解析日期字符串时，一定要确保输入符合 ISO 8601 格式（`YYYY-MM-DDTHH:mm:ss.ssZ`），其他格式的解析行为是实现定义的，可能无法在所有浏览器上运行。对 [RFC 2822](https://datatracker.ietf.org/doc/html/rfc2822) 格式字符串的支持只是惯例。如果要适应许多不同的格式，库可以提供帮助。
     >
     > 仅有日期的字符串（例如 `"1970-01-01"`）被视为 UTC，而日期时间的字符串（例如 `"1970-01-01T12:00"`）被视为本地时间。因此，我们也建议你确保这两种类型的输入格式是一致的。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md b/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md
index 97b9051d70fad2..8a09f86ec279b5 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/date/getday/index.md
@@ -32,7 +32,8 @@ var weekday = Xmas95.getDay();
 console.log(weekday); // 1
 ```
 
-> **备注：** 如果需要，可以使用{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}与一个额外的`options` 参数，从而返回这天的全称（如`"Monday"`）.使用此方法，结果会更加国际化：
+> [!NOTE]
+> 如果需要，可以使用{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}与一个额外的`options` 参数，从而返回这天的全称（如`"Monday"`）.使用此方法，结果会更加国际化：
 >
 > ```js
 > var options = { weekday: "long" };
diff --git a/files/zh-cn/web/javascript/reference/global_objects/date/index.md b/files/zh-cn/web/javascript/reference/global_objects/date/index.md
index 12b0b2587c3d67..56e5e191f56805 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/date/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/date/index.md
@@ -18,7 +18,8 @@ new Date(dateString);
 new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
 ```
 
-> **备注：** 创建一个新`Date`对象的唯一方法是通过{{jsxref("Operators/new", "new")}} 操作符，例如：`let now = new Date();`
+> [!NOTE]
+> 创建一个新`Date`对象的唯一方法是通过{{jsxref("Operators/new", "new")}} 操作符，例如：`let now = new Date();`
 > 若将它作为常规函数调用（即不加 {{jsxref("Operators/new", "new")}} 操作符），将返回一个字符串，而非 `Date` 对象。
 
 ### 参数
@@ -37,7 +38,8 @@ new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]
 
   - : 表示日期的字符串值。该字符串应该能被 {{jsxref("Date.parse()")}} 正确方法识别（即符合 [IETF-compliant RFC 2822 timestamps](http://tools.ietf.org/html/rfc2822#page-14) 或 [version of ISO8601](http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15)）。
 
-    > **备注：** 由于浏览器之间的差异与不一致性，强烈不推荐使用`Date`构造函数来解析日期字符串 (或使用与其等价的`Date.parse`)。对 RFC 2822 格式的日期仅有约定俗成的支持。对 ISO 8601 格式的支持中，仅有日期的串 (例如 "1970-01-01") 会被处理为 UTC 而不是本地时间，与其他格式的串的处理不同。
+    > [!NOTE]
+    > 由于浏览器之间的差异与不一致性，强烈不推荐使用`Date`构造函数来解析日期字符串 (或使用与其等价的`Date.parse`)。对 RFC 2822 格式的日期仅有约定俗成的支持。对 ISO 8601 格式的支持中，仅有日期的串 (例如 "1970-01-01") 会被处理为 UTC 而不是本地时间，与其他格式的串的处理不同。
 
 #### 分别提供日期与时间的每一个成员
 
@@ -60,11 +62,14 @@ new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]
 
 ## 使用注释
 
-> **备注：** 参数`monthIndex` 是从“0”开始计算的，这就意味着一月份为“0”，十二月份为“11”。
+> [!NOTE]
+> 参数`monthIndex` 是从“0”开始计算的，这就意味着一月份为“0”，十二月份为“11”。
 
-> **备注：** 当 Date 作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1) 等于 new Date(2014, 1, 1)，它们都表示日期 2014-02-01（注意月份是从 0 开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70) 等于 new Date(2013, 2, 1, 1, 10)，都表示同一个时间：`2013-03-01T01:10:00`。
+> [!NOTE]
+> 当 Date 作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1) 等于 new Date(2014, 1, 1)，它们都表示日期 2014-02-01（注意月份是从 0 开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70) 等于 new Date(2013, 2, 1, 1, 10)，都表示同一个时间：`2013-03-01T01:10:00`。
 
-> **备注：** 当 Date 作为构造函数调用并传入多个参数时，所定义参数代表的是当地时间。如果需要使用世界协调时 UTC，使用 `new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})` 和相同参数。
+> [!NOTE]
+> 当 Date 作为构造函数调用并传入多个参数时，所定义参数代表的是当地时间。如果需要使用世界协调时 UTC，使用 `new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})` 和相同参数。
 
 ## 简介
 
@@ -90,7 +95,8 @@ new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]
 
   - : 解析一个表示日期的字符串，并返回从 1970-1-1 00:00:00 所经过的毫秒数。
 
-    > **备注：** 由于浏览器差异和不一致，强烈建议不要使用`Date.parse`解析字符串。
+    > [!NOTE]
+    > 由于浏览器差异和不一致，强烈建议不要使用`Date.parse`解析字符串。
 
 - {{jsxref("Date.UTC()")}}
   - : 接受和构造函数最长形式的参数相同的参数（从 2 到 7），并返回从 1970-01-01 00:00:00 UTC 开始所经过的毫秒数。
@@ -203,7 +209,8 @@ new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]
 
 下例展示了用来创建一个日期对象的多种方法。
 
-> **备注：** 由于浏览器差异和不一致性，强烈建议不要使用`Date`构造函数（和`Date.parse`，它们是等效的）解析日期字符串。
+> [!NOTE]
+> 由于浏览器差异和不一致性，强烈建议不要使用`Date`构造函数（和`Date.parse`，它们是等效的）解析日期字符串。
 
 ```js
 var today = new Date();
@@ -264,7 +271,8 @@ function printElapsedTime(fTest) {
 yourFunctionReturn = printElapsedTime(yourFunction);
 ```
 
-> **备注：** 在支持 {{domxref("Performance API", "", "", "nocode")}} 的高精度（high-resolution）时间特性的浏览器中，{{domxref("Performance.now()")}} 提供的所经过的时间比 {{jsxref("Date.now()")}} 更加可靠、精确。
+> [!NOTE]
+> 在支持 {{domxref("Performance API", "", "", "nocode")}} 的高精度（high-resolution）时间特性的浏览器中，{{domxref("Performance.now()")}} 提供的所经过的时间比 {{jsxref("Date.now()")}} 更加可靠、精确。
 
 ### 获取自 Unix 起始时间以来经过的秒数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/date/tolocalestring/index.md b/files/zh-cn/web/javascript/reference/global_objects/date/tolocalestring/index.md
index aea35640f51bef..953bfa755f3a2e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/date/tolocalestring/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/date/tolocalestring/index.md
@@ -43,7 +43,8 @@ toLocaleString(locales, options)
 
 在支持 `Intl.DateTimeFormat` 的实现中，此方法等价于 `new Intl.DateTimeFormat(locales, options).format(date)`。
 
-> **备注：** 大多数时候，`toLocaleString()` 返回的格式是一致的。但是，这可能在未来发生变化，且不能保证所有语言都能得到一致的格式。输出的变化因实现而异，而且这种变化是规范所允许的。你不应该将 `toLocaleString()` 的结果与静态值作比较。
+> [!NOTE]
+> 大多数时候，`toLocaleString()` 返回的格式是一致的。但是，这可能在未来发生变化，且不能保证所有语言都能得到一致的格式。输出的变化因实现而异，而且这种变化是规范所允许的。你不应该将 `toLocaleString()` 的结果与静态值作比较。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/error/error/index.md b/files/zh-cn/web/javascript/reference/global_objects/error/error/index.md
index 09ed8338486a02..0818121d0bf3a3 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/error/error/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/error/error/index.md
@@ -22,7 +22,8 @@ Error(message, fileName)
 Error(message, fileName, lineNumber)
 ```
 
-> **备注：** 调用 `Error()` 时，可以使用关键字 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，也可以不使用。两种声明方式均能创建一个新的 `Error` 实例。
+> [!NOTE]
+> 调用 `Error()` 时，可以使用关键字 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，也可以不使用。两种声明方式均能创建一个新的 `Error` 实例。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/error/index.md b/files/zh-cn/web/javascript/reference/global_objects/error/index.md
index c31ffded466443..5d822344e78c0b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/error/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/error/index.md
@@ -143,7 +143,8 @@ try {
 }
 ```
 
-> **备注：** 如果你在创建一个函数库，你应该使用错误原因来区分不同的错误——而不是要求你的函数库的使用者来解析错误消息。相关的示例，请参见[提供错误原因](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error/cause#providing_structured_data_as_the_error_cause)。
+> [!NOTE]
+> 如果你在创建一个函数库，你应该使用错误原因来区分不同的错误——而不是要求你的函数库的使用者来解析错误消息。相关的示例，请参见[提供错误原因](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error/cause#providing_structured_data_as_the_error_cause)。
 
 [自定义错误类型](#自定义错误类型)也可以使用 [`cause`](#error.prototype.cause) 属性，前提是通过 `super()` 调用子类的构造函数时传递 `options` 参数。
 
@@ -164,9 +165,11 @@ class MyError extends Error {
 
 #### ES6 自定义错误类
 
-> **警告：** Babel 7 之前的版本可以处理 `CustomError` 类方法，但类方法需要使用 [Object.defineProperty()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) 定义。否则，旧版本的 Babel 和其他转译器在没有[额外配置](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend)的情况下将无法正确处理下面的代码。
+> [!WARNING]
+> Babel 7 之前的版本可以处理 `CustomError` 类方法，但类方法需要使用 [Object.defineProperty()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) 定义。否则，旧版本的 Babel 和其他转译器在没有[额外配置](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend)的情况下将无法正确处理下面的代码。
 
-> **备注：** 在使用 ES2015 的类时，一些浏览器会在堆栈跟踪中包含 `CustomError` 构造函数。
+> [!NOTE]
+> 在使用 ES2015 的类时，一些浏览器会在堆栈跟踪中包含 `CustomError` 构造函数。
 
 ```js
 class CustomError extends Error {
@@ -198,7 +201,8 @@ try {
 
 #### ES5 自定义错误对象
 
-> **警告：** 在使用原型声明时，所有浏览器都会在堆栈跟踪中包含 `CustomError` 的构造函数。
+> [!WARNING]
+> 在使用原型声明时，所有浏览器都会在堆栈跟踪中包含 `CustomError` 的构造函数。
 
 ```js
 function CustomError(foo, message, fileName, lineNumber) {
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.md
index a5d6ad7b6073dc..43af6fab954c0f 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.md
@@ -29,7 +29,8 @@ apply(thisArg, argsArray)
 
 ## 描述
 
-> **备注：** 这个函数与 {{jsxref("Function/call", "call()")}} 几乎完全相同，只是函数参数在 `call()` 中逐个作为列表传递，而在 `apply()` 中它们会组合在一个对象中，通常是一个数组——例如，`func.call(this, "eat", "bananas")` 与 `func.apply(this, ["eat", "bananas"])`。
+> [!NOTE]
+> 这个函数与 {{jsxref("Function/call", "call()")}} 几乎完全相同，只是函数参数在 `call()` 中逐个作为列表传递，而在 `apply()` 中它们会组合在一个对象中，通常是一个数组——例如，`func.call(this, "eat", "bananas")` 与 `func.apply(this, ["eat", "bananas"])`。
 
 通常情况下，在调用函数时，函数内部的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的值是访问该函数的对象。使用 `apply()`，你可以在调用现有函数时将任意值分配给 `this`，而无需先将函数作为属性附加到对象上。这使得你可以将一个对象的方法用作通用的实用函数。
 
@@ -51,7 +52,8 @@ function wrapper(...args) {
 
 一般而言，`fn.apply(null, args)` 等同于使用参数展开语法的 `fn(...args)`，只是在前者的情况下，`args` 期望是类数组对象，而在后者的情况下，`args` 期望是[可迭代对象](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#可迭代协议)。
 
-> **警告：** 不要使用 `apply()` 进行构造函数链式调用（例如，实现继承）。这会将构造函数作为普通函数调用，这意味着 [`new.target`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target) 是 `undefined`，从而类会抛出错误，因为它们不能在没有 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 的情况下调用。请改用 {{jsxref("Reflect.construct()")}} 或 [`extends`](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends)。
+> [!WARNING]
+> 不要使用 `apply()` 进行构造函数链式调用（例如，实现继承）。这会将构造函数作为普通函数调用，这意味着 [`new.target`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target) 是 `undefined`，从而类会抛出错误，因为它们不能在没有 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 的情况下调用。请改用 {{jsxref("Reflect.construct()")}} 或 [`extends`](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md
index a8e88a502024a4..5d8a76b961a899 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md
@@ -117,7 +117,8 @@ const boundGetX = retrieveX.bind(module);
 console.log(boundGetX()); // 81
 ```
 
-> **备注：** 如果在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下运行这个示例，`retrieveX` 的 `this` 参数会绑定到 `undefined` 而不是 `globalThis`，这会导致 `retrieveX()` 的调用失败。
+> [!NOTE]
+> 如果在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下运行这个示例，`retrieveX` 的 `this` 参数会绑定到 `undefined` 而不是 `globalThis`，这会导致 `retrieveX()` 的调用失败。
 >
 > 如果在一个 ECMAScript 模块中运行这个示例，顶级的 `this` 会绑定到 `undefined` 而不是 `globalThis`，导致 `this.x = 9` 赋值失败。
 >
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md
index 49dd41ad32eb37..8ab86d35b723c7 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/call/index.md
@@ -31,11 +31,13 @@ call(thisArg, arg1, arg2, /* …, */ argN)
 
 ## 描述
 
-> **备注：** 这个函数几乎与 {{jsxref("Function/apply", "apply()")}} 相同，只是函数的参数以列表的形式逐个传递给 `call()`，而在 `apply()` 中它们被组合在一个对象中，通常是一个数组——例如，`func.call(this, "eat", "bananas")` 与 `func.apply(this, ["eat", "bananas"])`。
+> [!NOTE]
+> 这个函数几乎与 {{jsxref("Function/apply", "apply()")}} 相同，只是函数的参数以列表的形式逐个传递给 `call()`，而在 `apply()` 中它们被组合在一个对象中，通常是一个数组——例如，`func.call(this, "eat", "bananas")` 与 `func.apply(this, ["eat", "bananas"])`。
 
 通常，在调用函数时，函数内部的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 值是访问该函数的对象。使用 `call()`，你可以在调用现有函数时将任意值分配给 `this`，而无需首先将函数附加到对象上作为属性。这样可以将一个对象的方法用作通用的实用函数。
 
-> **警告：** 不要使用 `call()` 来链式调用构造函数（例如，实现继承）。这会将构造函数作为普通函数调用，这意味着 [`new.target`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target) 的值为 `undefined`，而类会抛出错误，因为它们不能在没有 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 的情况下被调用。请改用 {{jsxref("Reflect.construct()")}} 或 [`extends`](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends)。
+> [!WARNING]
+> 不要使用 `call()` 来链式调用构造函数（例如，实现继承）。这会将构造函数作为普通函数调用，这意味着 [`new.target`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target) 的值为 `undefined`，而类会抛出错误，因为它们不能在没有 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 的情况下被调用。请改用 {{jsxref("Reflect.construct()")}} 或 [`extends`](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/caller/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/caller/index.md
index b460d1b7dca6cc..a39aa64e6106a2 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/caller/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/caller/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Function/caller
 
 {{JSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
 
-> **备注：** 在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下，访问函数的 `caller` 属性会抛出错误——该 API 已被移除且没有替代品。这是为了防止代码能够“遍历堆栈”，这既存在安全风险，也严重限制了内联和尾调用优化等优化的可能性。如需更多解释，请阅读 [arguments.callee 的弃用原因](/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee#描述)。
+> [!NOTE]
+> 在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下，访问函数的 `caller` 属性会抛出错误——该 API 已被移除且没有替代品。这是为了防止代码能够“遍历堆栈”，这既存在安全风险，也严重限制了内联和尾调用优化等优化的可能性。如需更多解释，请阅读 [arguments.callee 的弃用原因](/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee#描述)。
 
 {{jsxref("Function")}} 实例的 **`caller`** 访问器属性返回调用该函数的函数。对于[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)、箭头函数、异步函数和生成器函数来说，访问 `caller` 属性会抛出 {{jsxref("TypeError")}}。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/function/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/function/index.md
index e7bc81cd46b14f..6d6fd0626342a5 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/function/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/function/index.md
@@ -23,7 +23,8 @@ Function(arg0, arg1, functionBody)
 Function(arg0, arg1, /* …, */ argN, functionBody)
 ```
 
-> **备注：** 调用 `Function()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)。两者都会创建一个新的 `Function` 实例。
+> [!NOTE]
+> 调用 `Function()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)。两者都会创建一个新的 `Function` 实例。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md
index 77147d6c710747..c50306e911590d 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/name/index.md
@@ -15,7 +15,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Function/name
 
 {{js_property_attributes(0, 0, 1)}}
 
-> **备注：** 在非标准的、ES2015 之前的实现中，`configurable` 属性也是 `false`。
+> [!NOTE]
+> 在非标准的、ES2015 之前的实现中，`configurable` 属性也是 `false`。
 
 ## 描述
 
@@ -178,7 +179,8 @@ class Foo {}
 Foo.name; // "Foo"
 ```
 
-> **警告：** JavaScript 只会在函数没有自有的 `name` 属性时才设置函数的 `name` 属性。然而，类的[静态成员](/zh-CN/docs/Web/JavaScript/Reference/Classes/static)将被设置为类构造函数的自有属性，从而阻止内置的 `name` 属性生效。请参阅下面的示例。
+> [!WARNING]
+> JavaScript 只会在函数没有自有的 `name` 属性时才设置函数的 `name` 属性。然而，类的[静态成员](/zh-CN/docs/Web/JavaScript/Reference/Classes/static)将被设置为类构造函数的自有属性，从而阻止内置的 `name` 属性生效。请参阅下面的示例。
 
 ### 以 Symbol 为函数名称
 
@@ -265,7 +267,8 @@ console.log(Foo.name); // 如果 Foo 类有一个静态的“name”属性，则
 
 ### JavaScript 压缩器和缩小器
 
-> **警告：** 在使用 JavaScript 压缩器（缩小器）或混淆器等源码转换工具时，要小心使用 `name` 属性。这些工具通常作为 JavaScript 构建流程的一部分使用，以减小程序在部署到生产环境之前的大小。此类转换通常会在构建时更改函数的名称。
+> [!WARNING]
+> 在使用 JavaScript 压缩器（缩小器）或混淆器等源码转换工具时，要小心使用 `name` 属性。这些工具通常作为 JavaScript 构建流程的一部分使用，以减小程序在部署到生产环境之前的大小。此类转换通常会在构建时更改函数的名称。
 
 例如有这样的一段源码：
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/prototype/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/prototype/index.md
index a7d1582e14d2ef..ebef6988cbabdc 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/prototype/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/prototype/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
 
 当 {{jsxref("Function")}} 实例作为构造函数与 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 运算符一起使用时，该实例的 **`prototype`** 数据属性将用作新对象的原型。
 
-> **备注：** 并不是所有的 {{jsxref("Function")}} 对象都拥有 `prototype` 属性——参见[描述](#描述)。
+> [!NOTE]
+> 并不是所有的 {{jsxref("Function")}} 对象都拥有 `prototype` 属性——参见[描述](#描述)。
 
 ## 值
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md
index 3efaf5304304d3..00fb41d03aca4b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/tostring/index.md
@@ -43,7 +43,8 @@ function someName() { [native code] }
 
 对于内部对象方法和函数，`someName` 是函数的初始名称；否则其可能是实现定义（implementation-defined）的，但始终以属性名称语法的形式呈现，如：`[1 + 1]`、`someName` 或 `1`。
 
-> **备注：** 这意味着对原生函数的字符串调用 [`eval()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval) 将始终产生语法错误。
+> [!NOTE]
+> 这意味着对原生函数的字符串调用 [`eval()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval) 将始终产生语法错误。
 
 若是在由 `Function` 构造函数生成的函数上调用 `toString()`，则 `toString()` 返回创建后的函数源码，包括形参和函数体，函数名为“anonymous”。例如：对于 `Function("a", "b", "return a + b").toString()`，则会返回：
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/generator/next/index.md b/files/zh-cn/web/javascript/reference/global_objects/generator/next/index.md
index 0d95aac2d5d271..01a0087b1d1478 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/generator/next/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/generator/next/index.md
@@ -79,7 +79,8 @@ page.next(); // { value: undefined, done: true }
 
 在此示例中，调用 `next` 时传入值。
 
-> **备注：** 第一次调用不会打印任何内容，因为生成器最初没有产生任何内容。
+> [!NOTE]
+> 第一次调用不会打印任何内容，因为生成器最初没有产生任何内容。
 
 ```js
 function* gen() {
diff --git a/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/generatorfunction/index.md b/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/generatorfunction/index.md
index de21d3a1b115b7..7feefc498dc064 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/generatorfunction/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/generatorfunction/generatorfunction/index.md
@@ -31,7 +31,8 @@ GeneratorFunction(arg1, arg2, functionBody)
 GeneratorFunction(arg1, arg2, /* …, */ argN, functionBody)
 ```
 
-> **备注：** 无论是否使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 调用 `GeneratorFunction()`，都可以创建一个新的 `GeneratorFunction` 实例。
+> [!NOTE]
+> 无论是否使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 调用 `GeneratorFunction()`，都可以创建一个新的 `GeneratorFunction` 实例。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/intl/collator/collator/index.md b/files/zh-cn/web/javascript/reference/global_objects/intl/collator/collator/index.md
index 5f4a7851498cd2..61e738b6226f1f 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/intl/collator/collator/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/intl/collator/collator/index.md
@@ -32,7 +32,8 @@ Intl.Collator(locales, options)
 
     下面的这些 Unicode 扩展键也是被允许的：
 
-    > **备注：** 这些键通常也可用于 `options` 的设置（如下所列）。当两者同时设置时，`options` 属性的优先级更高。
+    > [!NOTE]
+    > 这些键通常也可用于 `options` 的设置（如下所列）。当两者同时设置时，`options` 属性的优先级更高。
 
     - `co`
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/iterator/index.md b/files/zh-cn/web/javascript/reference/global_objects/iterator/index.md
index 35a1225422d3a6..39307714a1a340 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/iterator/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/iterator/index.md
@@ -28,7 +28,8 @@ l10n:
 
 ### 迭代器辅助方法
 
-> **备注：** 这些方法是*迭代器*辅助方法，而不是*可迭代对象*辅助方法，因为可迭代对象的唯一要求就是具有 `[Symbol.iterator]()` 方法，因此它们没有共享的原型来安装这些方法。
+> [!NOTE]
+> 这些方法是*迭代器*辅助方法，而不是*可迭代对象*辅助方法，因为可迭代对象的唯一要求就是具有 `[Symbol.iterator]()` 方法，因此它们没有共享的原型来安装这些方法。
 
 `Iterator` 类本身提供了一些使用迭代器的辅助方法。例如，你可能想做以下事情：
 
@@ -136,7 +137,8 @@ const myIterator = Iterator.from({
 
   - : [`[Symbol.toStringTag]`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性的初始值是字符串 `"Iterator"`。该属性在 {{jsxref("Object.prototype.toString()")}} 中使用。
 
-    > **备注：** 与大多数内置类的 `[Symbol.toStringTag]` 不同，出于 web 兼容性原因，`Iterator.prototype[Symbol.toStringTag]` 是可写的。
+    > [!NOTE]
+    > 与大多数内置类的 `[Symbol.toStringTag]` 不同，出于 web 兼容性原因，`Iterator.prototype[Symbol.toStringTag]` 是可写的。
 
 ## 实例方法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/map/groupby/index.md b/files/zh-cn/web/javascript/reference/global_objects/map/groupby/index.md
index 083456e6a83ff7..68aacd8d4e3d3d 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/map/groupby/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/map/groupby/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Map/groupBy
 
 {{JSRef}}
 
-> **备注：** 在某些浏览器的某些版本中，此方法被实现为 `Array.prototype.groupToMap()` 方法。由于 web 兼容性问题，它现在以静态方法实现。参见[浏览器兼容性表格](#浏览器兼容性)以获取更多信息。
+> [!NOTE]
+> 在某些浏览器的某些版本中，此方法被实现为 `Array.prototype.groupToMap()` 方法。由于 web 兼容性问题，它现在以静态方法实现。参见[浏览器兼容性表格](#浏览器兼容性)以获取更多信息。
 
 **`Map.groupBy()`** 静态方法使用提供的回调函数返回的值对给定可迭代对象中的元素进行分组。最终返回的 {{jsxref("Map")}} 使用测试函数返回的唯一值作为键，可用于获取每个组中的元素组成的数组。
 
@@ -42,7 +43,8 @@ Map.groupBy(items, callbackFn)
 
 当你需要分组与特定对象相关的信息时，此方法非常有用。因为即使对象被修改，它仍将作为返回的 `Map` 的键继续工作。如果你改为为对象创建字符串表示形式，并在 {{jsxref("Object.groupBy()")}} 中将其用作分组键，则必须在对象改变时维护原始对象和其表示之间的映射。
 
-> **备注：** 要访问返回的 `Map` 中的分组，必须使用最初用作 `Map` 键的相同对象（尽管你可以修改其属性）。你不能使用另一个恰好具有相同名称和属性的对象。
+> [!NOTE]
+> 要访问返回的 `Map` 中的分组，必须使用最初用作 `Map` 键的相同对象（尽管你可以修改其属性）。你不能使用另一个恰好具有相同名称和属性的对象。
 
 `Map.groupBy` 不会读取 `this` 值。它可以在任何对象上调用，并返回一个新的 {{jsxref("Map")}} 实例。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/map/index.md b/files/zh-cn/web/javascript/reference/global_objects/map/index.md
index d248675008b01a..c88f6503af1632 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/map/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/map/index.md
@@ -383,7 +383,8 @@ console.log(clone.get(1)); // one
 console.log(original === clone); // false. 浅比较 不为同一个对象的引用
 ```
 
-> **备注：** 请记住，*数据本身*未被克隆。
+> [!NOTE]
+> 请记住，*数据本身*未被克隆。
 
 `Map` 对象间可以进行合并，但是会保持键的唯一性。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/map/symbol.species/index.md b/files/zh-cn/web/javascript/reference/global_objects/map/symbol.species/index.md
index 74ef535c2bf3b1..4aa7b1b1864356 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/map/symbol.species/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/map/symbol.species/index.md
@@ -21,7 +21,8 @@ Map[Symbol.species]
 
 `[Symbol.species]` 访问器属性返回 `Map` 对象的默认构造函数。子类构造函数可以覆盖它以更改构造函数赋值。
 
-> **备注：** 目前所有 `Map` 方法均未使用此属性。
+> [!NOTE]
+> 目前所有 `Map` 方法均未使用此属性。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/index.md
index e0675d6505d5b3..2220054644ddc0 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/math/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/math/index.md
@@ -34,9 +34,11 @@ slug: Web/JavaScript/Reference/Global_Objects/Math
 
 ## 方法
 
-> **备注：** 需要注意的是，三角函数 `sin()`、`cos()`、`tan()`、`asin()`、`acos()`、`atan()` 和 `atan2()` 返回的值是*弧度*而非角度。若要转换，弧度除以 `(Math.PI / 180)` 即可转换为角度，同理，角度乘以这个数则能转换为弧度。
+> [!NOTE]
+> 需要注意的是，三角函数 `sin()`、`cos()`、`tan()`、`asin()`、`acos()`、`atan()` 和 `atan2()` 返回的值是*弧度*而非角度。若要转换，弧度除以 `(Math.PI / 180)` 即可转换为角度，同理，角度乘以这个数则能转换为弧度。
 
-> **备注：** 需要注意的是，很多 `Math` 函数都有一个精度，而且这个精度在不同实现中也是不相同的。这意味着不同的浏览器会给出不同的结果，甚至，在不同的系统或架构下，相同的 JS 引擎也会给出不同的结果！
+> [!NOTE]
+> 需要注意的是，很多 `Math` 函数都有一个精度，而且这个精度在不同实现中也是不相同的。这意味着不同的浏览器会给出不同的结果，甚至，在不同的系统或架构下，相同的 JS 引擎也会给出不同的结果！
 
 - {{jsxref("Global_Objects/Math/abs", "Math.abs(<var>x</var>)")}}
   - : 返回一个数的绝对值。
diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md
index ade79597911615..16422dabdcc5dd 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/math/random/index.md
@@ -61,7 +61,8 @@ function getRandomInt(min, max) {
 }
 ```
 
-> **备注：** 也许很容易想到用 [`Math.round()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round) 来实现，但是这会导致你的随机数处于一个不均匀的分布，这可能不符合你的需求。
+> [!NOTE]
+> 也许很容易想到用 [`Math.round()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round) 来实现，但是这会导致你的随机数处于一个不均匀的分布，这可能不符合你的需求。
 
 ### 得到一个两数之间的随机整数，包括两个数在内
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md
index e7ccfd0316b8fa..8b0dd70d803b6b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md
@@ -76,7 +76,8 @@ console.log(equal(x + y, z, 2000 * Number.EPSILON)); // true
 
 除了数量级之外，考虑输入的*精度*也非常重要。例如，如果数字是从表单输入收集的，并且输入值只能以 `0.1` 的步长调整（即 [`<input type="number" step="0.1">`](/zh-CN/docs/Web/HTML/Attributes/step)），通常可以允许更大的容差，例如 `0.01`，因为数据的精度只有 `0.1`。
 
-> **备注：** 重点是：不要简单地将 `Number.EPSILON` 作为相等性测试的阈值。使用适合要比较的数字的数量级和精度的阈值。
+> [!NOTE]
+> 重点是：不要简单地将 `Number.EPSILON` 作为相等性测试的阈值。使用适合要比较的数字的数量级和精度的阈值。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/index.md
index bd3093f5d55f14..a77a6a66a66710 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/index.md
@@ -114,7 +114,8 @@ new Uint8Array([257, -257]); // Uint8Array(2) [ 1, 255 ]
 
 当 `Number` 作为一个构造函数（用 `new`）被调用时，它会创建一个 {{jsxref("Number")}} 对象，该对象**不是**一个原始值。例如，`typeof new Number(42) === "object"`，并且 `new Number(42) !== 42`（尽管 `new Number(42) == 42`）。
 
-> **警告：** 你应该很少发现自己将 `Number` 作为构造函数使用。
+> [!WARNING]
+> 你应该很少发现自己将 `Number` 作为构造函数使用。
 
 ## 静态属性
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/number/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/number/index.md
index de57d4cab1fd8d..54fb8ed1400e7b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/number/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/number/index.md
@@ -14,7 +14,8 @@ new Number(value)
 Number(value)
 ```
 
-> **备注：** 调用 `Number()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，但是效果不同。详见[返回值](#返回值)部分。
+> [!NOTE]
+> 调用 `Number()` 时可以使用或不使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)，但是效果不同。详见[返回值](#返回值)部分。
 
 ### 参数
 
@@ -27,7 +28,8 @@ Number(value)
 
 当 `Number` 作为普通函数调用时，它[将参数强制转换为数字原始值](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)。[BigInt](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 被转换为数字。如果值不能转换，则返回 {{jsxref("NaN")}}。
 
-> **警告：** 你会发现你很少会使用 `Number` 作为构造函数。
+> [!WARNING]
+> 你会发现你很少会使用 `Number` 作为构造函数。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/__definegetter__/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/__definegetter__/index.md
index 385424f561770e..659aaa84b6eac8 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/__definegetter__/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/__definegetter__/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
 
 {{JSRef}}{{Deprecated_Header}}
 
-> **备注：** 此特性已弃用，建议使用[对象初始化语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer)或 {{jsxref("Object.defineProperty()")}} API 来定义 [getter](/zh-CN/docs/Web/JavaScript/Reference/Functions/get)。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
+> [!NOTE]
+> 此特性已弃用，建议使用[对象初始化语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer)或 {{jsxref("Object.defineProperty()")}} API 来定义 [getter](/zh-CN/docs/Web/JavaScript/Reference/Functions/get)。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
 
 **`__defineGetter__()`** 方法将一个对象的属性绑定到一个函数上，当该属性被访问时，该函数将被调用。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/__definesetter__/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/__definesetter__/index.md
index 06468d602becf8..016ff7dd0e1ae2 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/__definesetter__/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/__definesetter__/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
 
 {{JSRef}}{{Deprecated_Header}}
 
-> **备注：** 此特性已弃用，建议使用[对象初始化语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer)或 {{jsxref("Object.defineProperty()")}} API 来定义 [setter](/zh-CN/docs/Web/JavaScript/Reference/Functions/set)。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
+> [!NOTE]
+> 此特性已弃用，建议使用[对象初始化语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer)或 {{jsxref("Object.defineProperty()")}} API 来定义 [setter](/zh-CN/docs/Web/JavaScript/Reference/Functions/set)。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
 
 **`__defineSetter__()`** 方法将一个对象的属性绑定到一个函数上，当该属性被赋值时，该函数将被调用。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/__lookupgetter__/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
index 9b96bf155047e6..2c512b7df31b93 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
 
 {{JSRef}} {{deprecated_header}}
 
-> **备注：** 该特性已被弃用，建议使用 {{jsxref("Object.getOwnPropertyDescriptor()")}} API。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
+> [!NOTE]
+> 该特性已被弃用，建议使用 {{jsxref("Object.getOwnPropertyDescriptor()")}} API。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
 
 **`__lookupGetter__()`** 方法返回绑定到指定属性的 getter 函数。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/__lookupsetter__/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
index 4297e362c1ad5a..e92711216432af 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
 
 {{JSRef}} {{deprecated_header}}
 
-> **备注：** 该方法已被弃用，建议使用 {{jsxref("Object.getOwnPropertyDescriptor()")}} API。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
+> [!NOTE]
+> 该方法已被弃用，建议使用 {{jsxref("Object.getOwnPropertyDescriptor()")}} API。该方法的行为只针对 Web 兼容性进行了规定，在任何平台上都不需要实现该方法。它可能无法在所有地方正常工作。
 
 **`__lookupGetter__()`** 方法返回绑定到指定属性的 setter 函数。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md
index 1314ab434603e8..d161e50ff2f978 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
 
 {{jsxref("Object")}} 实例的 **`constructor`** 数据属性返回一个引用，指向创建该实例对象的构造函数。注意，此属性的值是对*函数本身*的引用，而不是一个包含函数名称的字符串。
 
-> **备注：** 这是 JavaScript 对象的一个属性。关于类的 `constructor` 方法，请参见[其参考页面](/zh-CN/docs/Web/JavaScript/Reference/Classes/constructor)。
+> [!NOTE]
+> 这是 JavaScript 对象的一个属性。关于类的 `constructor` 方法，请参见[其参考页面](/zh-CN/docs/Web/JavaScript/Reference/Classes/constructor)。
 
 ## 值
 
@@ -15,7 +16,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
 
 {{js_property_attributes(1, 0, 1)}}
 
-> **备注：** 这个属性默认会在每个构造函数的 [`prototype`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 属性上创建，并由该构造函数创建的所有对象继承。
+> [!NOTE]
+> 这个属性默认会在每个构造函数的 [`prototype`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 属性上创建，并由该构造函数创建的所有对象继承。
 
 ## 描述
 
@@ -293,7 +295,8 @@ console.log(new Child(1, 1).getOffsetByInitialPosition()); // { offsetX: -1, off
 
 再次强调，使用 `Object.setPrototypeOf()` 可能会对性能产生不利影响，因此请确保它仅在必要时使用，并在构造函数声明后立即使用，并在创建任何实例之前使用，以避免对象被“污染”。
 
-> **备注：** 设置或更新构造函数可能会导致结果不同且令人困惑的结果。为了防止它，只需在特定情况下定义 `constructor`。多数情况，不使用 `constructor`，并且不需要重新对其赋值。
+> [!NOTE]
+> 设置或更新构造函数可能会导致结果不同且令人困惑的结果。为了防止它，只需在特定情况下定义 `constructor`。多数情况，不使用 `constructor`，并且不需要重新对其赋值。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/fromentries/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/fromentries/index.md
index c3965ca430becc..eb01996b9b5b2b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/fromentries/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/fromentries/index.md
@@ -38,7 +38,8 @@ Object.fromEntries(iterable)
 
 `Object.fromEntries()` 是 {{jsxref("Object.entries()")}} 的逆操作，只是 `Object.entries()` 只返回字符串键属性，而 `Object.fromEntries()` 还可以创建符号键属性。
 
-> **备注：** 与 {{jsxref("Array.from()")}} 不同的是，`Object.fromEntries()` 不使用 `this` 的值，因此在另一个构造函数上调用它不会创建该类型的对象。
+> [!NOTE]
+> 与 {{jsxref("Array.from()")}} 不同的是，`Object.fromEntries()` 不使用 `this` 的值，因此在另一个构造函数上调用它不会创建该类型的对象。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/groupby/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/groupby/index.md
index 0049c68ced68bc..96fb820b1c9a09 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/groupby/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/groupby/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/groupBy
 
 {{JSRef}} {{SeeCompatTable}}
 
-> **备注：** 在某些浏览器的某些版本中，此方法被实现为 `Array.prototype.group()` 方法。由于 web 兼容性问题，它现在以静态方法实现。参见[浏览器兼容性表格](#浏览器兼容性)以获取更多信息。
+> [!NOTE]
+> 在某些浏览器的某些版本中，此方法被实现为 `Array.prototype.group()` 方法。由于 web 兼容性问题，它现在以静态方法实现。参见[浏览器兼容性表格](#浏览器兼容性)以获取更多信息。
 
 **`Object.groupBy()`** 静态方法根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/hasownproperty/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/hasownproperty/index.md
index 6f734e064a26db..16b841f33dc9a1 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/hasownproperty/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/hasownproperty/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
 
 **`hasOwnProperty()`** 方法返回一个布尔值，表示对象自有属性（而不是继承来的属性）中是否具有指定的属性。
 
-> **备注：** 在支持 {{jsxref("Object.hasOwn")}} 的浏览器中，建议使用 {{jsxref("Object.hasOwn()")}}，而非 `hasOwnProperty()`。
+> [!NOTE]
+> 在支持 {{jsxref("Object.hasOwn")}} 的浏览器中，建议使用 {{jsxref("Object.hasOwn()")}}，而非 `hasOwnProperty()`。
 
 {{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/index.md
index 54eba59dee8513..b94fd7e81f304b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/index.md
@@ -299,7 +299,8 @@ Object.prototype.valueOf = function (...args) {
 };
 ```
 
-> **警告：** 修改任何内置构造函数的 `prototype` 属性被认为是一种不好的做法，可能会影响向前兼容性。
+> [!WARNING]
+> 修改任何内置构造函数的 `prototype` 属性被认为是一种不好的做法，可能会影响向前兼容性。
 
 你可以阅读更多关于原型的内容，参见[继承与原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md
index 8b3b683ea2a9b1..cbbfb0cbc234b1 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md
@@ -76,7 +76,8 @@ console.log(Object.keys("foo")); // ['0', '1', '2']
 console.log(Object.keys(100)); // []
 ```
 
-> **备注：** 在 ES5 中，将一个非对象传递给 `Object.keys()` 会抛出一个 {{jsxref("TypeError")}}。
+> [!NOTE]
+> 在 ES5 中，将一个非对象传递给 `Object.keys()` 会抛出一个 {{jsxref("TypeError")}}。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md
index 8811c207ab06f7..1a2c0497c3e0db 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/proto/index.md
@@ -5,9 +5,11 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/proto
 
 {{JSRef}}{{Deprecated_header}}
 
-> **警告：** 由于现代 JavaScript 引擎优化属性访问的性质，修改一个对象的 `[[Prototype]]` 在每个浏览器和 JavaScript 引擎中都是非常缓慢的操作。此外，修改继承的效果是微妙和广泛的，不仅限于在 `obj.__proto__ = ...` 语句中花费的时间，而是可能扩展到**_任何_**有访问任何已经被修改过 `[[Prototype]]` 的对象的代码。你可以在这里阅读更多信息：[JavaScript 引擎基础：优化原型](https://mathiasbynens.be/notes/prototypes)。
+> [!WARNING]
+> 由于现代 JavaScript 引擎优化属性访问的性质，修改一个对象的 `[[Prototype]]` 在每个浏览器和 JavaScript 引擎中都是非常缓慢的操作。此外，修改继承的效果是微妙和广泛的，不仅限于在 `obj.__proto__ = ...` 语句中花费的时间，而是可能扩展到**_任何_**有访问任何已经被修改过 `[[Prototype]]` 的对象的代码。你可以在这里阅读更多信息：[JavaScript 引擎基础：优化原型](https://mathiasbynens.be/notes/prototypes)。
 
-> **备注：** 使用 `__proto__` 是有争议且不被鼓励的。它的存在和确切行为仅作为遗留特性被标准化，以确保 Web 兼容性，但它存在一些安全问题和隐患。为了更好的支持，请优先使用 {{JSxRef("Object.getPrototypeOf()")}}/{{JSxRef("Reflect.getPrototypeOf()")}} 和 {{JSxRef("Object.setPrototypeOf()")}}/{{JSxRef("Reflect.setPrototypeOf()")}}。
+> [!NOTE]
+> 使用 `__proto__` 是有争议且不被鼓励的。它的存在和确切行为仅作为遗留特性被标准化，以确保 Web 兼容性，但它存在一些安全问题和隐患。为了更好的支持，请优先使用 {{JSxRef("Object.getPrototypeOf()")}}/{{JSxRef("Reflect.getPrototypeOf()")}} 和 {{JSxRef("Object.setPrototypeOf()")}}/{{JSxRef("Reflect.setPrototypeOf()")}}。
 
 {{jsxref("Object")}} 实例的 **`__proto__`** 访问器属性暴露了此对象的 [`[[Prototype]]`](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)（一个对象或 {{jsxref("Operators/null", "null")}}）。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md
index 263397802c5e71..090e9600606809 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/setprototypeof/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
 
 **`Object.setPrototypeOf()`** 静态方法可以将一个指定对象的原型（即内部的 `[[Prototype]]` 属性）设置为另一个对象或者 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)。
 
-> **警告：** 由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的 `[[Prototype]]` 在各个浏览器和 JavaScript 引擎上都是一个很慢的操作。此外，修改继承的影响是微妙和广泛的，并不仅限于在 `Object.setPrototypeOf(...)` 语句上的时间花费，而是可能扩展到*任何*访问已更改 `[[Prototype]]` 属性的对象的代码。你可以在 [JavaScript 引擎基础知识：优化原型](https://mathiasbynens.be/notes/prototypes)中了解更多信息。
+> [!WARNING]
+> 由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的 `[[Prototype]]` 在各个浏览器和 JavaScript 引擎上都是一个很慢的操作。此外，修改继承的影响是微妙和广泛的，并不仅限于在 `Object.setPrototypeOf(...)` 语句上的时间花费，而是可能扩展到*任何*访问已更改 `[[Prototype]]` 属性的对象的代码。你可以在 [JavaScript 引擎基础知识：优化原型](https://mathiasbynens.be/notes/prototypes)中了解更多信息。
 >
 > 由于这个特性是语言的一部分，因此引擎开发人员实现该特性的性能（理想情况下）仍然是一个负担。在引擎开发人员解决这个问题之前，如果你担心性能问题，应该避免设置对象的 `[[Prototype]]` 属性。而是使用 {{jsxref("Object.create()")}} 创建一个具有所需 `[[Prototype]]` 属性的新对象。
 
@@ -101,7 +102,8 @@ console.log(superMan.speak());
 
 在下面的示例中，也使用了类，`SuperHero` 使用 `setPrototypeOf` 而不是 `extends` 来继承 `Human`。
 
-> **警告：** 由于性能和可读性的原因，不建议使用 `setPrototypeOf` 来代替 `extends`。
+> [!WARNING]
+> 由于性能和可读性的原因，不建议使用 `setPrototypeOf` 来代替 `extends`。
 
 ```js
 class Human {}
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/valueof/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/valueof/index.md
index f389ed20d5ad28..f40402771553e8 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/valueof/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/valueof/index.md
@@ -23,7 +23,8 @@ valueOf()
 
 转换成对象的 `this` 值。
 
-> **备注：** 为了使 `valueOf` 在类型转换过程中有用，它必须返回一个基本类型值。因为所有的基本类型都有自己的 `valueOf()` 方法，所以调用 `aPrimitiveValue.valueOf()` 通常不会调用 `Object.prototype.valueOf()`。
+> [!NOTE]
+> 为了使 `valueOf` 在类型转换过程中有用，它必须返回一个基本类型值。因为所有的基本类型都有自己的 `valueOf()` 方法，所以调用 `aPrimitiveValue.valueOf()` 通常不会调用 `Object.prototype.valueOf()`。
 
 ## 描述
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/catch/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/catch/index.md
index 483551cb0cb7f6..fe469312fbd8d4 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/catch/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/catch/index.md
@@ -64,7 +64,8 @@ Promise.resolve().catch(function XXX() {});
 
 因为 `catch()` 只是单纯的调用了 `then()`，它支持子类化。
 
-> **备注：** 下面的示例抛出了 [`Error`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error) 的实例。与同步的 [`throw`](/zh-CN/docs/Web/JavaScript/Reference/Statements/throw) 语句一样，这被认为是一种良好的实践；否则，执行捕获的部分将不得不对参数进行检查，以查看它是字符串还是错误，并且你可能会丢失有用的信息，例如堆栈跟踪。
+> [!NOTE]
+> 下面的示例抛出了 [`Error`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error) 的实例。与同步的 [`throw`](/zh-CN/docs/Web/JavaScript/Reference/Statements/throw) 语句一样，这被认为是一种良好的实践；否则，执行捕获的部分将不得不对参数进行检查，以查看它是字符串还是错误，并且你可能会丢失有用的信息，例如堆栈跟踪。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/finally/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/finally/index.md
index 725852a87f108c..c591d0d2d98343 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/finally/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/finally/index.md
@@ -40,11 +40,13 @@ finally(onFinally)
   - 与 `Promise.resolve(2).then(() => 77, () => {})` 不同，它返回一个最终会兑现为值 `77` 的 promise，而 `Promise.resolve(2).finally(() => 77)` 返回一个最终兑现为值 `2` 的 promise。
   - 类似地，与 `Promise.reject(3).then(() => {}, () => 88)` 不同，它返回一个最终兑现为值 `88` 的 promise，而 `Promise.reject(3).finally(() => 88)` 返回一个最终以原因 `3` 拒绝的 promise。
 
-> **备注：** 在 `finally` 回调函数中抛出错误（或返回被拒绝的 promise）仍会导致返回的 promise 被拒绝。例如，`Promise.reject(3).finally(() => { throw 99; })` 和 `Promise.reject(3).finally(() => Promise.reject(99))` 都以理由 `99` 拒绝返回的 promise。
+> [!NOTE]
+> 在 `finally` 回调函数中抛出错误（或返回被拒绝的 promise）仍会导致返回的 promise 被拒绝。例如，`Promise.reject(3).finally(() => { throw 99; })` 和 `Promise.reject(3).finally(() => Promise.reject(99))` 都以理由 `99` 拒绝返回的 promise。
 
 与 {{jsxref("Promise/catch", "catch()")}} 一样，`finally()` 在内部调用其调用对象上的 `then` 方法。如果 `onFinally` 不是函数，则调用 `then()` 时使用 `onFinally` 同时作为两个参数——对于 {{jsxref("Promise.prototype.then()")}}，这意味着没有附加有效的处理器。否则，`then()` 被调用时会使用两个内部创建的函数，其行为如下：
 
-> **警告：** 这只是为了演示，而不是一个 polyfill。
+> [!WARNING]
+> 这只是为了演示，而不是一个 polyfill。
 
 ```js
 promise.then(
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/index.md
index 43efd08977e129..d61d398a14a759 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/index.md
@@ -39,7 +39,8 @@ new Promise((resolveOuter) => {
 
 此 Promise 在创建时已经被解决（因为 `resolveOuter` 是同步调用的），但它是用另一个 Promise 解决的，因此在内部 Promise 兑现的 1 秒之后才会*被兑现*。在实践中，“解决”过程通常是在幕后完成的，不可观察，只有其兑现或拒绝是可观察的。
 
-> **备注：** 其他几种语言也有一些机制来实现惰性求值和延迟计算，它们也称之为“promise”，例如 Scheme。在 JavaScript 中，Promise 代表已经在进行中的进程，而且可以通过回调函数实现链式调用。如果你想要实现惰性求值，考虑使用不带参数的函数，例如 `f = () => expression` 来创建惰性求值表达式，然后使用 `f()` 立即求值。
+> [!NOTE]
+> 其他几种语言也有一些机制来实现惰性求值和延迟计算，它们也称之为“promise”，例如 Scheme。在 JavaScript 中，Promise 代表已经在进行中的进程，而且可以通过回调函数实现链式调用。如果你想要实现惰性求值，考虑使用不带参数的函数，例如 `f = () => expression` 来创建惰性求值表达式，然后使用 `f()` 立即求值。
 
 ### Promise 的链式调用
 
@@ -88,7 +89,8 @@ myPromise
   });
 ```
 
-> **备注：** 为了更快的执行，最好将所有同步操作都放在一个处理程序中，否则如果将它们拆分为多个处理程序，执行所有处理程序将需要几个时钟周期。
+> [!NOTE]
+> 为了更快的执行，最好将所有同步操作都放在一个处理程序中，否则如果将它们拆分为多个处理程序，执行所有处理程序将需要几个时钟周期。
 
 一个 Promise 的终止条件决定了链中下一个 Promise 的“已敲定”状态。“已兑现”状态表示 Promise 成功完成，而“已拒绝”状态表示 Promise 执行失败。链中每个已兑现的 Promise 的返回值会传递给下一个 `.then()`，而已拒绝的 Promise 会把失败原因传递给链中下一个拒绝处理函数。
 
@@ -431,7 +433,8 @@ btn.addEventListener("click", testPromise);
 
 在上面的示例中，`<iframe>` 仅在现有设置对象被追踪时才会被更新。这是因为在不追踪的情况下，我们可能会使用错误的环境发送消息。
 
-> **备注：** 目前，Firefox 完全实现了现有领域追踪，Chrome 和 Safari 仅部分实现。
+> [!NOTE]
+> 目前，Firefox 完全实现了现有领域追踪，Chrome 和 Safari 仅部分实现。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/promise/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/promise/index.md
index 5433de0a309d1c..a49ec7ecf73a23 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/promise/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/promise/index.md
@@ -43,7 +43,8 @@ readFile("./data.txt", (error, result) => {
 
 为了利用 Promise 提供的更好的可读性和语言特性，`Promise()` 构造函数允许将基于回调的 API 转换为基于 Promise 的 API。
 
-> **备注：** 如果你的任务已经基于 Promise 实现，你大概率不需要使用 `Promise()` 构造函数。
+> [!NOTE]
+> 如果你的任务已经基于 Promise 实现，你大概率不需要使用 `Promise()` 构造函数。
 
 `executor` 是将回调函数的结果与 Promise 关联在一起的自定义代码。编写 `executor` 的工作由程序员完成。它的函数签名应该是：
 
@@ -67,7 +68,8 @@ rejectFunc(reason); // 拒绝时调用
 - `executor` 函数的返回值会被忽略。`executor` 函数中的 `return` 语句仅影响控制流程，调整函数某个部分是否执行，但不会影响 Promise 的兑现值。如果 `executor` 函数退出，且未来不可能调用 `resolveFunc` 或 `rejectFunc`（例如，没有安排异步任务），那么 Promise 将永远保持待定状态。
 - 如果在 `executor` 函数中抛出错误，则 Promise 将被拒绝，除非 `resolveFunc` 或 `rejectFunc` 已经被调用。
 
-> **备注：** 待定的 Promise 的存在并不会阻止程序退出。如果事件循环为空，则程序会退出，尽管存在待定的 Promise（因为它们必然永远处于待定状态）。
+> [!NOTE]
+> 待定的 Promise 的存在并不会阻止程序退出。如果事件循环为空，则程序会退出，尽管存在待定的 Promise（因为它们必然永远处于待定状态）。
 
 以下是典型的 Promise 流程概述：
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md
index 12032128ed0045..4464daed0d603b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/resolve/index.md
@@ -159,7 +159,8 @@ Promise.resolve(thenable).then((v) => {
 });
 ```
 
-> **警告：** 不要在一个解决为自身的 thenable 对象上调用 `Promise.resolve()`。这将导致无限递归，因为它试图展平一个无限嵌套的 Promise。
+> [!WARNING]
+> 不要在一个解决为自身的 thenable 对象上调用 `Promise.resolve()`。这将导致无限递归，因为它试图展平一个无限嵌套的 Promise。
 
 ```js example-bad
 const thenable = {
diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md
index 0060b4bc15d955..c27ee0b0fc621a 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.md
@@ -32,7 +32,8 @@ new Proxy(target, {
 
   - : 最初接收赋值的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）。
 
-    > **备注：** 假设有一段代码执行 `obj.name = "jen"`， `obj` 不是一个 proxy，且自身不含 `name` 属性，但是它的原型链上有一个 proxy，那么，那个 proxy 的 `set()` 处理器会被调用，而此时，`obj` 会作为 receiver 参数传进来。
+    > [!NOTE]
+    > 假设有一段代码执行 `obj.name = "jen"`， `obj` 不是一个 proxy，且自身不含 `name` 属性，但是它的原型链上有一个 proxy，那么，那个 proxy 的 `set()` 处理器会被调用，而此时，`obj` 会作为 receiver 参数传进来。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md
index fede668d540858..af59b04ea9d403 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md
@@ -99,7 +99,8 @@ Found abb. Next match starts at 3
 Found ab. Next match starts at 9
 ```
 
-> **警告：** 以下情况会导致匹配变成一个无限循环！
+> [!WARNING]
+> 以下情况会导致匹配变成一个无限循环！
 >
 > - 不要把正则表达式字面量（或者 {{jsxref("RegExp")}} 构造函数）放在 `while` 条件表达式里。由于每次迭代时 {{jsxref("RegExp.lastIndex", "lastIndex")}} 的属性都被重置。
 > - 请确保设置了[全局（`g`）标志位](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions#通过标志进行高级搜索)，否则 `lastIndex` 不会被更新。
diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md b/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md
index e72d7af2ad1d08..554b4f4c730115 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/index.md
@@ -206,7 +206,8 @@ var url = "http://xxx.domain.com";
 console.log(/[^.]+/.exec(url)[0].substr(7)); // logs "xxx"
 ```
 
-> **备注：** 使用浏览器内建的[URL API](/zh-CN/docs/Web/API/URL_API)而非正则表达式来解析 URL 是更好的做法
+> [!NOTE]
+> 使用浏览器内建的[URL API](/zh-CN/docs/Web/API/URL_API)而非正则表达式来解析 URL 是更好的做法
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/set/symbol.species/index.md b/files/zh-cn/web/javascript/reference/global_objects/set/symbol.species/index.md
index a8294e5a7498f9..2ce63a6b1b995f 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/set/symbol.species/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/set/symbol.species/index.md
@@ -21,7 +21,8 @@ Set[Symbol.species]
 
 `[Symbol.species]` 访问器属性返回 `Set` 对象的默认构造函数。子类构造函数可以覆盖它以更改构造函数赋值。
 
-> **备注：** 目前所有 `Set` 方法均未使用此属性。
+> [!NOTE]
+> 目前所有 `Set` 方法均未使用此属性。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/sharedarraybuffer/index.md b/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/sharedarraybuffer/index.md
index fb1c0321318190..2a5e42867930db 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/sharedarraybuffer/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/sharedarraybuffer/index.md
@@ -61,7 +61,8 @@ const buffer = new SharedArrayBuffer(8, { maxByteLength: 16 });
 buffer.grow(12);
 ```
 
-> **备注：** 推荐设置 `maxByteLength` 为使用场景下最低的大小，不要超过 `1073741824`（1GB）以减小内存溢出风险。
+> [!NOTE]
+> 推荐设置 `maxByteLength` 为使用场景下最低的大小，不要超过 `1073741824`（1GB）以减小内存溢出风险。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md
index b9fcb6116a4030..349ce6c7391c67 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/anchor/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/anchor
 
 {{jsxref("String")}} 值的 **`anchor()`** 方法创建一个带有名称的 {{HTMLElement("a")}} 元素字符串，其中嵌入了调用的字符串（`<a name="...">str</a>`）。
 
-> **备注：** 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（比如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
+> [!NOTE]
+> 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（比如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
 >
 > HTML 规范不再允许 {{HTMLElement("a")}} 元素具有 `name` 属性，因此该方法甚至无法创建有效的标记。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/big/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/big/index.md
index db06535c25d99c..1579f62691a3cf 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/big/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/big/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/big
 
 {{jsxref("String")}} 值的 **`big()`** 方法创建一个 {{HTMLElement("big")}} 元素字符串，其中嵌入了调用的字符串（`<big>str</big>`），从而使该字符串以大字体显示。
 
-> **备注：** 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。对于 `big()` 方法来说，在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中已经移除了 `<big>` 元素，不应再使用它。Web 开发者应该使用 [CSS](/zh-CN/docs/Web/CSS) 属性来实现相应的效果。
+> [!NOTE]
+> 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。对于 `big()` 方法来说，在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中已经移除了 `<big>` 元素，不应再使用它。Web 开发者应该使用 [CSS](/zh-CN/docs/Web/CSS) 属性来实现相应的效果。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md
index 85f5963d306386..42a40262faf636 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/blink/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/blink
 
 {{jsxref("String")}} 值的 **`blink()`** 方法创建一个字符串，其在 `<blink>str</blink>` 中嵌入字符串，这使得字符串在旧版浏览器中闪烁。
 
-> **备注：** 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。对于 `blink()` 方法，`<blink>` 元素本身已在现代浏览器中移除，并且闪烁文本违反了多个无障碍标准。请避免以任何方式使用该元素。
+> [!NOTE]
+> 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。对于 `blink()` 方法，`<blink>` 元素本身已在现代浏览器中移除，并且闪烁文本违反了多个无障碍标准。请避免以任何方式使用该元素。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/bold/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/bold/index.md
index 5ea744b63920d1..ad2ca3bba6d042 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/bold/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/bold/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/bold
 
 {{jsxref("String")}} 值的 **`bold()`** 方法创建一个 {{HTMLElement("b")}} 元素字符串，其中嵌入了调用的字符串（`<b>str</b>`），这会导致该字符串以粗体显示。
 
-> **备注：** 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
+> [!NOTE]
+> 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/charat/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/charat/index.md
index 6a96459ba43e58..a23b4ccd626d00 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/charat/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/charat/index.md
@@ -85,7 +85,8 @@ console.log(String.fromCodePoint(str.codePointAt(0))); // "𠮷"
 console.log([...str][0]); // "𠮷"
 ```
 
-> **备注：** 避免使用 `charAt()` 重新实现上述解决方案。检测孤项代理及其配对很复杂，而内置 API 可能更高效，因为它们直接使用字符串的内部表示形式。如有必要，请安装上述 API 的 polyfill。
+> [!NOTE]
+> 避免使用 `charAt()` 重新实现上述解决方案。检测孤项代理及其配对很复杂，而内置 API 可能更高效，因为它们直接使用字符串的内部表示形式。如有必要，请安装上述 API 的 polyfill。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md
index 0dbfd718100dc9..e46cb3cbaa285e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/charcodeat/index.md
@@ -57,7 +57,8 @@ const str = "𠮷𠮾";
 console.log(str.codePointAt(0)); // 134071
 ```
 
-> **备注：** 避免使用 `charCodeAt()` 来重新实现 `codePointAt()`。从 UTF-16 代理到 Unicode 码位的转换相当复杂，而且 `codePointAt()` 可能更加高效，因为它直接使用字符串的内部表示形式。如果需要，可以安装一个 `codePointAt()` 的 polyfill。
+> [!NOTE]
+> 避免使用 `charCodeAt()` 来重新实现 `codePointAt()`。从 UTF-16 代理到 Unicode 码位的转换相当复杂，而且 `codePointAt()` 可能更加高效，因为它直接使用字符串的内部表示形式。如果需要，可以安装一个 `codePointAt()` 的 polyfill。
 
 以下是将一对 UTF-16 码元转换为 Unicode 码位的可能算法，改编自 [Unicode 常问问题](https://unicode.org/faq/utf_bom.html#utf16-3)：
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/fixed/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/fixed/index.md
index 43193bed2203a1..701e2175c4418a 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/fixed/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/fixed/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/fixed
 
 {{jsxref("String")}} 值的 **`fixed()`** 方法创建一个 {{HTMLElement("tt")}} 元素字符串，其中嵌入了调用的字符串（`<tt>str</tt>`），这会导致该字符串以等宽字体显示。
 
-> **备注：** 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
+> [!NOTE]
+> 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md
index 67f648e86c8f34..43097e911ac2f0 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/fontcolor/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor
 
 {{jsxref("String")}} 值的 **`fontcolor()`** 方法会创建一个 {{HTMLElement("font")}} 元素字符串，其中嵌入了调用字符串（`<font color="...">str</font>`），从而导致该字符串以指定的字体颜色显示。
 
-> **备注：** 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已经被弃用，并且仅为了兼容性而标准化。对于 `fontcolor()` 方法来说，`<font>` 元素本身在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中已被移除，不应再使用。Web 开发者应该使用 [CSS](/zh-CN/docs/Web/CSS) 属性来代替。
+> [!NOTE]
+> 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已经被弃用，并且仅为了兼容性而标准化。对于 `fontcolor()` 方法来说，`<font>` 元素本身在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中已被移除，不应再使用。Web 开发者应该使用 [CSS](/zh-CN/docs/Web/CSS) 属性来代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/fontsize/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/fontsize/index.md
index adc89603b983d1..0cd34aa6c83362 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/fontsize/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/fontsize/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/fontsize
 
 {{jsxref("String")}} 值的 **`fontsize()`** 方法会创建一个 {{HTMLElement("font")}} 元素字符串，其中嵌入了调用字符串（`<font size="...">str</font>`），从而导致该字符串以指定的字体大小显示。
 
-> **备注：** 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已经被弃用，并且仅为了兼容性而标准化。对于 `fontsize()` 方法来说，`<font>` 元素本身在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中已被移除，不应再使用。Web 开发者应该使用 [CSS](/zh-CN/docs/Web/CSS) 属性来代替。
+> [!NOTE]
+> 所有的 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已经被弃用，并且仅为了兼容性而标准化。对于 `fontsize()` 方法来说，`<font>` 元素本身在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中已被移除，不应再使用。Web 开发者应该使用 [CSS](/zh-CN/docs/Web/CSS) 属性来代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/index.md
index 5f0d02564e2fac..3241a3cbd8cc51 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/index.md
@@ -112,7 +112,8 @@ console.log(typeof strPrim3); // "string"
 console.log(typeof strObj); // "object"
 ```
 
-> **警告：** 你应该基本不会将 `String` 作为构造函数使用。
+> [!WARNING]
+> 你应该基本不会将 `String` 作为构造函数使用。
 
 使用 {{jsxref("Global_Objects/eval", "eval()")}} 时，字符串原始值和 `String` 对象也会给出不同的结果。传递给 `eval` 的原始值被当作源代码处理；而 `String` 对象则被当作对象处理，返回对象。例如：
 
@@ -297,7 +298,8 @@ console.log(eval(s2.valueOf())); // 返回数字 4
 
 ## HTML 包装器方法
 
-> **警告：** 已弃用。请避免使用这些方法。
+> [!WARNING]
+> 已弃用。请避免使用这些方法。
 >
 > 它们的用途有限，因为它们基于非常古老的 HTML 标准并且仅提供当前可用的 HTML 标记和属性的一个子集。现在已经为它们创建了已弃用或非标准的标记。此外，它们在没有任何验证或清理的情况下进行简单的字符串连接，这使得它们在使用 [`innerHTML`](/zh-CN/docs/Web/API/Element/innerHTML) 直接插入时成为潜在的安全威胁。请改用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)，例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/italics/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/italics/index.md
index 822a89db8f787a..1c58dc38c0eef7 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/italics/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/italics/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/italics
 
 {{jsxref("String")}} 值的 **`italics()`** 方法会创建一个 {{HTMLElement("i")}} 元素字符串，其中嵌入了调用的字符串（`<i>str</i>`），从而使该字符串以斜体显示。
 
-> **备注：** 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
+> [!NOTE]
+> 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/link/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/link/index.md
index bcb1da2728ec79..3248be1437aaae 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/link/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/link/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/link
 
 {{jsxref("String")}} 值的 **`link()`** 方法创建一个 {{HTMLElement("a")}} 元素字符串，其中嵌入了调用的字符串（`<a href="...">str</a>`），用作指向另一个 URL 的超文本链接。
 
-> **备注：** 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
+> [!NOTE]
+> 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/localecompare/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/localecompare/index.md
index 1bca4340ad32b2..40bc1c70a55583 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/localecompare/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/localecompare/index.md
@@ -55,7 +55,8 @@ localeCompare(compareString, locales, options)
 - 当 `referenceStr` 在 `compareString` 后面时返回正数
 - 当两者相等时返回 `0`
 
-> **警告：** 切勿依赖于 `-1` 或 `1` 这样特定的返回值。
+> [!WARNING]
+> 切勿依赖于 `-1` 或 `1` 这样特定的返回值。
 >
 > 不同浏览器之间（以及不同浏览器版本之间）返回的正负数的值各有不同，因为 W3C 规范中只要求返回值是正值和负值，而没有规定具体的值。一些浏览器可能返回 `-2` 或 `2` 或一些其他的负、正值。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/match/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/match/index.md
index 1b460fa668bc46..70b807d5b54778 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/match/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/match/index.md
@@ -79,7 +79,8 @@ console.log(matches);
 // ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
 ```
 
-> **备注：** 参见 {{jsxref("String.prototype.matchAll()")}} 和[通过标志进行高级搜索](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions#通过标志进行高级搜索)。
+> [!NOTE]
+> 参见 {{jsxref("String.prototype.matchAll()")}} 和[通过标志进行高级搜索](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions#通过标志进行高级搜索)。
 
 ### 使用命名捕获组
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/raw/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/raw/index.md
index 497e4a21d36995..9f5ff770842358 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/raw/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/raw/index.md
@@ -41,7 +41,8 @@ String.raw`templateString`
 
 `String.raw()` 是唯一一个内置的模板字符串标签函数，因为它太常用了。不过它并没有什么特殊能力，你自己也可以实现一个和它功能一模一样的标签函数。
 
-> **警告：** 不应直接将 `String.raw` 作为“标识”标签。请参见[构建标识标签](#构建标识标签)以了解如何实现此操作。
+> [!WARNING]
+> 不应直接将 `String.raw` 作为“标识”标签。请参见[构建标识标签](#构建标识标签)以了解如何实现此操作。
 
 如果使用没有 `length` 属性或 `length` 为非正数的 `raw` 属性的对象调用 `String.raw()` 方法，它将返回一个空字符串 `""`。如果 `substitutions.length < strings.raw.length - 1`（即没有足够的替换项来填充占位符——这在一个格式正确的标记模板字面量中是不可能发生的），则其余的占位符将被填充为空字符串。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md
index 260fdb70c1f6d9..ec4b1ba3a8b06b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/replace/index.md
@@ -74,7 +74,8 @@ replace(pattern, replacement)
 
 你可以将第二个参数指定为函数。在这种情况下，匹配完成后将调用该函数。函数的结果（返回值）将用作替换字符串。
 
-> **备注：** 上述特殊替换模式*不*适用于替换器函数返回的字符串。
+> [!NOTE]
+> 上述特殊替换模式*不*适用于替换器函数返回的字符串。
 
 该函数具有以下签名：
 
@@ -126,7 +127,8 @@ console.log(newstr); // Twas the night before Christmas...
 
 这将打印 `'Twas the night before Christmas...'`。
 
-> **备注：** 有关正则表达式的更多解释，请参阅[正则表达式指南](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions)。
+> [!NOTE]
+> 有关正则表达式的更多解释，请参阅[正则表达式指南](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions)。
 
 ### 在 replace() 中使用 global 和 ignoreCase 标志
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/small/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/small/index.md
index f47dd4761ce292..947df85c46862b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/small/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/small/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/small
 
 {{jsxref("String")}} 值的 **`small()`** 方法创建一个 {{HTMLElement("small")}} 元素字符串，其中嵌入了调用的字符串（`<small>str</small>`），从而使该字符串以小号字体显示。
 
-> **备注：** 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
+> [!NOTE]
+> 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md
index 2d6a4463fa43c3..2d341f7cc2ffea 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/split/index.md
@@ -37,7 +37,8 @@ split(separator, limit)
 
 > **备注：** `"".split("")` 是唯一一种字符串作为 `separator` 参数传入的生成空数组的方法。
 
-> **警告：** 当空字符串（`""`）被用作分隔符时，字符串**不是**由*用户感知的字符*（[grapheme cluster](https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries)）或 unicode 字符（码位）分割，而是由 UTF-16 代码单位分割。这破坏了[代理对](https://unicode.org/faq/utf_bom.html#utf16-2)。请参阅 [StackOverflow 上的“How do you get a string to a character array in JavaScript?”](https://stackoverflow.com/questions/4547609/how-to-get-character-array-from-a-string/34717402#34717402)。
+> [!WARNING]
+> 当空字符串（`""`）被用作分隔符时，字符串**不是**由*用户感知的字符*（[grapheme cluster](https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries)）或 unicode 字符（码位）分割，而是由 UTF-16 代码单位分割。这破坏了[代理对](https://unicode.org/faq/utf_bom.html#utf16-2)。请参阅 [StackOverflow 上的“How do you get a string to a character array in JavaScript?”](https://stackoverflow.com/questions/4547609/how-to-get-character-array-from-a-string/34717402#34717402)。
 
 如果 `separator` 是一个匹配空字符串的正则表达式，匹配是由 UTF-16 码元（code unit）还是 Unicode 码位（code point）分割，取决于是否设置了 [`u`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode) 标志。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/strike/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/strike/index.md
index 957c67306e9959..43a37fbb83324c 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/strike/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/strike/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/strike
 
 {{jsxref("String")}} 值的 **`strike()`** 方法创建一个 {{HTMLElement("strike")}} 元素字符串，其中嵌入了调用的字符串（`<strike>str</strike>`），从而使该字符串以删除线的形式显示。
 
-> **备注：** 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
+> [!NOTE]
+> 所有 [HTML 包装方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法)都已被弃用，并且仅为了兼容性而标准化。请使用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)（例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)）代替。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/string/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/string/index.md
index 3a328f380551e3..83cabdbd2bb963 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/string/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/string/index.md
@@ -27,7 +27,8 @@ String(thing)
 
 当 `String` 作为函数被调用时，它会将参数强制转换为一个字符串原始类型。[Symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 值会被转换成 `"Symbol(description)"`，其中 `description` 是该 Symbol 的 [description](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description) 属性值，而不会抛出错误。
 
-> **警告：** 你应该很少需要使用 `String` 作为构造函数。
+> [!WARNING]
+> 你应该很少需要使用 `String` 作为构造函数。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/sub/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/sub/index.md
index 671add6f8615de..49534a30b8e604 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/sub/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/sub/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/sub
 
 {{jsxref("String")}} 值的 **`sub()`** 方法创建一个 {{HTMLElement("sub")}} 元素字符串，其中嵌入了调用的字符串（`<sub>str</sub>`），这会导致该字符串显示为下标。
 
-> **备注：** 所有 [HTML 包装器方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法) 均已弃用，仅出于兼容性目的而进行标准化。请改用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)，例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)。
+> [!NOTE]
+> 所有 [HTML 包装器方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法) 均已弃用，仅出于兼容性目的而进行标准化。请改用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)，例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/sup/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/sup/index.md
index ddfb0ed969039f..a2faddd1d093b4 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/sup/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/sup/index.md
@@ -7,7 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/String/sup
 
 {{jsxref("String")}} 值的 **`sup()`** 方法创建一个 {{HTMLElement("sup")}} 元素字符串，其中嵌入了调用的字符串（`<sup>str</sup>`）中，这会导致该字符串显示为上标。
 
-> **备注：** 所有 [HTML 包装器方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法) 均已弃用，仅出于兼容性目的而进行标准化。请改用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)，例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)。
+> [!NOTE]
+> 所有 [HTML 包装器方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#html_包装器方法) 均已弃用，仅出于兼容性目的而进行标准化。请改用 [DOM API](/zh-CN/docs/Web/API/Document_Object_Model)，例如 [`document.createElement()`](/zh-CN/docs/Web/API/Document/createElement)。
 
 ## 语法
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md b/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md
index 34bf30379dc8a6..0599a670d0dbb6 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md
@@ -142,7 +142,8 @@ new TypedArray(buffer, byteOffset, length)
 
 其中，`TypedArray` 是一个具体的构造函数。
 
-> **备注：** 所有 `TypedArray` 子类的构造函数只能使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 构造。试图在没有 `new` 的情况下调用，会抛出 {{jsxref("TypeError")}}。
+> [!NOTE]
+> 所有 `TypedArray` 子类的构造函数只能使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 构造。试图在没有 `new` 的情况下调用，会抛出 {{jsxref("TypeError")}}。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md b/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md
index f7babf586489f8..5a8b58293f5465 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/undefined/index.md
@@ -36,7 +36,8 @@ test(); // 返回"undefined"
 
 一个函数如果没有使用 return 语句指定{{jsxref("Statements/return", "返回")}}值，就会返回一个 undefined 值。
 
-> **警告：** 但是它有可能在非全局作用域中被当作{{Glossary("Identifier", "标识符")}}（变量名）来使用（因为 undefined 不是[保留字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#保留字的使用)），这样做是一个非常坏的主意，因为这样会使你的代码难以去维护和排错。
+> [!WARNING]
+> 但是它有可能在非全局作用域中被当作{{Glossary("Identifier", "标识符")}}（变量名）来使用（因为 undefined 不是[保留字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#保留字的使用)），这样做是一个非常坏的主意，因为这样会使你的代码难以去维护和排错。
 >
 > ```js example-bad
 > // 不要这样做！
@@ -67,7 +68,8 @@ if (x === undefined) {
 }
 ```
 
-> **备注：** 这里是必须使用严格相等操作符（===）而不是标准相等操作符（==），因为 x == undefined 会检查 x 是不是 null，但是严格相等不会检查（有点饶人，其实 === 会严格判断双方的类型、值等是否相等）。null 不等同于 undefined。移步{{jsxref("Operators/Comparison_Operators", "比较操作符")}}查看详情。
+> [!NOTE]
+> 这里是必须使用严格相等操作符（===）而不是标准相等操作符（==），因为 x == undefined 会检查 x 是不是 null，但是严格相等不会检查（有点饶人，其实 === 会严格判断双方的类型、值等是否相等）。null 不等同于 undefined。移步{{jsxref("Operators/Comparison_Operators", "比较操作符")}}查看详情。
 
 ### Typeof 操作符和 undefined
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md b/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md
index bf091c06a3e1e2..715d0706ce6fc0 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/unescape/index.md
@@ -32,7 +32,8 @@ unescape(str)
 
 `unescape()` 函数将任何转移序列替换为它所代表的字符。具体来说，它将任何形式为 `%XX` 或 `%uXXXX`（其中 `X` 代表一个十六进制数字）的转义序列替换为十六进制值为 `XX`/`XXXX` 的字符。如果转义序列无效（例如，如果 `%` 后面跟着一个或未跟十六进制数字），则保持不变。
 
-> **备注：** 该函数主要用于 [URL 编码](https://zh.wikipedia.org/wiki/百分号编码)，其部分基于 {{rfc(1738)}} 中的转义格式。`unescape()` 函数*不会*对字符串字面量中的[转义序列](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#转义序列)进行求值。你可以将 `\xXX` 替换为 `%XX`，将 `\uXXXX` 替换为 `%uXXXX`，以获得一个可以被 `unescape()` 处理的字符串。
+> [!NOTE]
+> 该函数主要用于 [URL 编码](https://zh.wikipedia.org/wiki/百分号编码)，其部分基于 {{rfc(1738)}} 中的转义格式。`unescape()` 函数*不会*对字符串字面量中的[转义序列](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#转义序列)进行求值。你可以将 `\xXX` 替换为 `%XX`，将 `\uXXXX` 替换为 `%uXXXX`，以获得一个可以被 `unescape()` 处理的字符串。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakref/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakref/index.md
index 0b9819c85f8c68..597aa8da3a2aa4 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/weakref/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/weakref/index.md
@@ -11,7 +11,8 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakRef
 
 `WeakRef` 对象包含对对象的弱引用，这个弱引用被称为该 WeakRef 对象的 _target_ 或者是 _referent_。对象的*弱引用*是指该引用不会阻止 GC 回收这个对象。而与此相反的，一个普通的引用（或者说*强引用*）会将与之对应的对象保存在内存中。只有当该对象没有任何的强引用时，JavaScript 引擎 GC 才会销毁该对象并且回收该对象所占的内存空间。如果上述情况发生了，那么你就无法通过任何的弱引用来获取该对象。
 
-> **备注：** 在使用前请阅读[尽量避免使用](#尽量避免使用)，对于 WeakRef 对象的使用要慎重考虑，**能不使用就尽量不要使用**
+> [!NOTE]
+> 在使用前请阅读[尽量避免使用](#尽量避免使用)，对于 WeakRef 对象的使用要慎重考虑，**能不使用就尽量不要使用**
 
 ## 构造函数
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md
index b3ea3f288bff09..862f094d4c6734 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md
@@ -16,7 +16,8 @@ WeakSet 中的值一定是可被垃圾回收的值。大多数{{Glossary("Primit
 - `WeakSet` **只能是对象和符号**的集合，它不能像 {{jsxref("Set")}} 那样包含任何类型的任意值。
 - `WeakSet` 持*弱引用*：`WeakSet` 中对象的引用为*弱*引用。如果没有其他的对 `WeakSet` 中对象的引用存在，那么这些对象会被垃圾回收。
 
-  > **备注：** 这也意味着集合中没有存储当前值的列表。`WeakSet` 是不可枚举的。
+  > [!NOTE]
+  > 这也意味着集合中没有存储当前值的列表。`WeakSet` 是不可枚举的。
 
 ### 用例：检测循环引用
 
diff --git a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md
index 28afc1b3de530f..c6e28f7654dc86 100644
--- a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md
+++ b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md
@@ -57,7 +57,8 @@ slug: Web/JavaScript/Reference/Iteration_protocols
 - `throw(exception)` {{optional_inline}}
   - : 无参数或者接受一个参数的函数，并返回符合 `IteratorResult` 接口的对象，通常 `done` 等于 `true`。调用这个方法表明迭代器的调用者监测到错误的状况，并且 `exception` 通常是一个 {{jsxref("Error")}} 实例。
 
-> **备注：** 无法通过反射的方法确定（例如，没有实际调用 `next()` 并验证返回的结果）一个特定的对象是否实现了迭代器协议。
+> [!NOTE]
+> 无法通过反射的方法确定（例如，没有实际调用 `next()` 并验证返回的结果）一个特定的对象是否实现了迭代器协议。
 
 很容易使一个迭代器也可迭代：只需实现 `[Symbol.iterator]()` 方法，并返回它的 `this`。
 
diff --git a/files/zh-cn/web/javascript/reference/lexical_grammar/index.md b/files/zh-cn/web/javascript/reference/lexical_grammar/index.md
index 16be046333e7d7..fbb8d66e857811 100644
--- a/files/zh-cn/web/javascript/reference/lexical_grammar/index.md
+++ b/files/zh-cn/web/javascript/reference/lexical_grammar/index.md
@@ -120,7 +120,8 @@ console.log("Hello world");
 
 JavaScript 的解释器会把它视为普通注释——只有当脚本直接在 shell 中运行时，它对 shell 才有语义意义。
 
-> **警告：** 如果你想让脚本直接在 shell 环境中运行，请用不含 [BOM](https://zh.wikipedia.org/wiki/端序記號) 的 UTF-8 编码。虽然 BOM 不会对在浏览器中运行的代码造成任何问题——在 UTF-8 解码过程中，分析源文本之前，BOM 就已经被剥离了——但如果前面有一个 BOM 字符，Unix/Linux shell 就不会识别该注释。
+> [!WARNING]
+> 如果你想让脚本直接在 shell 环境中运行，请用不含 [BOM](https://zh.wikipedia.org/wiki/端序記號) 的 UTF-8 编码。虽然 BOM 不会对在浏览器中运行的代码造成任何问题——在 UTF-8 解码过程中，分析源文本之前，BOM 就已经被剥离了——但如果前面有一个 BOM 字符，Unix/Linux shell 就不会识别该注释。
 
 你只能使用 `#!` 注释样式以指定 JavaScript 解释器。在所有其他情况下，只需使用 `//` 注释（或多行注释）。
 
diff --git a/files/zh-cn/web/javascript/reference/operators/async_function_star_/index.md b/files/zh-cn/web/javascript/reference/operators/async_function_star_/index.md
index 102e451f0a13b4..23c7febc0848f7 100644
--- a/files/zh-cn/web/javascript/reference/operators/async_function_star_/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/async_function_star_/index.md
@@ -35,7 +35,8 @@ async function* name(param0, param1, /* … ,*/ paramN) {
 }
 ```
 
-> **备注：** 为了避免 [`async function*` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function*)所带来的歧义，[表达式语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/Expression_statement)不能以关键字 `async function` 开头。`async function` 关键字仅在上下文中无法接受语句时，才会被视为表达式的开头。
+> [!NOTE]
+> 为了避免 [`async function*` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function*)所带来的歧义，[表达式语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/Expression_statement)不能以关键字 `async function` 开头。`async function` 关键字仅在上下文中无法接受语句时，才会被视为表达式的开头。
 
 ### 参数
 
diff --git a/files/zh-cn/web/javascript/reference/operators/delete/index.md b/files/zh-cn/web/javascript/reference/operators/delete/index.md
index a3ebc6986c0f46..abc0989dcdcb61 100644
--- a/files/zh-cn/web/javascript/reference/operators/delete/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/delete/index.md
@@ -16,7 +16,8 @@ delete object.property
 delete object[property]
 ```
 
-> **备注：** 该语法允许在 `delete` 运算符之后使用多种类型的表达式，但只有上述形式才能产生有意义的行为。
+> [!NOTE]
+> 该语法允许在 `delete` 运算符之后使用多种类型的表达式，但只有上述形式才能产生有意义的行为。
 
 ### 参数
 
@@ -69,7 +70,8 @@ delete console.log(1);
 
 ### 使用 delete
 
-> **备注：** 以下示例使用了仅非严格模式下的功能，如隐式创建全局变量和删除标识符，这在严格模式下是禁止的。
+> [!NOTE]
+> 以下示例使用了仅非严格模式下的功能，如隐式创建全局变量和删除标识符，这在严格模式下是禁止的。
 
 ```js
 // 在全局作用域创建 empCount 属性
diff --git a/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md b/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md
index 74368cd5134949..b0b607f8230bd6 100644
--- a/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -106,7 +106,8 @@ const obj = { a: 1, b: 2 };
 // The properties `a` and `b` are assigned to properties of `numbers`
 ```
 
-> **备注：** 当使用对象文字解构赋值而不带声明时，在赋值语句周围必须添加括号 `( ... )`。
+> [!NOTE]
+> 当使用对象文字解构赋值而不带声明时，在赋值语句周围必须添加括号 `( ... )`。
 >
 > `{ a, b } = { a: 1, b: 2 }` 不是有效的独立语法，因为左侧的 `{a, b}` 被视为块而不是对象字面量。但是，`({ a, b } = { a: 1, b: 2 })` 是有效的，`const { a, b } = { a: 1， b: 2 }` 也是有效的。
 >
diff --git a/files/zh-cn/web/javascript/reference/operators/instanceof/index.md b/files/zh-cn/web/javascript/reference/operators/instanceof/index.md
index e818fd8d7e575b..5da10dc06f4c89 100644
--- a/files/zh-cn/web/javascript/reference/operators/instanceof/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/instanceof/index.md
@@ -63,7 +63,8 @@ o3 instanceof C; // true 因为 C.prototype 现在在 o3 的原型链上
 
 比如检测一个 `Nodes` 在另一个窗口中是不是 `SVGElement`，你可以使用`myNode instanceof myNode.ownerDocument.defaultView.SVGElement`
 
-> **备注：** 在代码中使用 XPCOM `instanceof` 有特殊影响：如果查询接口成功执行后，`obj instanceof` _`xpcomInterface`_ (e.g. `Components.interfaces.nsIFile`) 调用`obj.QueryInterface(xpcomInterface)` 并且返回 `true` 。这种调用的副作用是在一次成功的 `instanceof` 测试后，你可以在 `obj` 上使用`xpcomInterface` 的属性。这与标准的 `JavaScript` 全局变量不同，即使 `obj` 来自不同的作用域，`obj instanceof xpcomInterface` 也可以按预期产生作用。
+> [!NOTE]
+> 在代码中使用 XPCOM `instanceof` 有特殊影响：如果查询接口成功执行后，`obj instanceof` _`xpcomInterface`_ (e.g. `Components.interfaces.nsIFile`) 调用`obj.QueryInterface(xpcomInterface)` 并且返回 `true` 。这种调用的副作用是在一次成功的 `instanceof` 测试后，你可以在 `obj` 上使用`xpcomInterface` 的属性。这与标准的 `JavaScript` 全局变量不同，即使 `obj` 来自不同的作用域，`obj instanceof xpcomInterface` 也可以按预期产生作用。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/operators/less_than/index.md b/files/zh-cn/web/javascript/reference/operators/less_than/index.md
index 0a69f86c1a5872..8b67ba2e1c57dc 100644
--- a/files/zh-cn/web/javascript/reference/operators/less_than/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/less_than/index.md
@@ -123,7 +123,8 @@ console.log(l < r && r < l);
 // true
 ```
 
-> **警告：** 这可能是混乱的根源。如果你的对象提供了自定义的原始值转换逻辑，请确保它是*幂等的*：多次强制转化应该返回相同的值。
+> [!WARNING]
+> 这可能是混乱的根源。如果你的对象提供了自定义的原始值转换逻辑，请确保它是*幂等的*：多次强制转化应该返回相同的值。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/operators/logical_or/index.md b/files/zh-cn/web/javascript/reference/operators/logical_or/index.md
index a038eaa35e1427..a25c6cc969a52e 100644
--- a/files/zh-cn/web/javascript/reference/operators/logical_or/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/logical_or/index.md
@@ -82,7 +82,8 @@ false || ""; // f || f returns ""
 false || varObject; // f || object returns varObject
 ```
 
-> **备注：** 如果你使用这个操作符为某些变量提供默认值，要注意任何*假*值都不会被使用。如果你只需要过滤掉 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 或 {{jsxref("undefined")}}，可以考虑使用[空值合并运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing)。
+> [!NOTE]
+> 如果你使用这个操作符为某些变量提供默认值，要注意任何*假*值都不会被使用。如果你只需要过滤掉 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 或 {{jsxref("undefined")}}，可以考虑使用[空值合并运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing)。
 
 ### 布尔值转化规则
 
diff --git a/files/zh-cn/web/javascript/reference/operators/new/index.md b/files/zh-cn/web/javascript/reference/operators/new/index.md
index fb3db1a11a1b19..be31c6438cada8 100644
--- a/files/zh-cn/web/javascript/reference/operators/new/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/new/index.md
@@ -35,7 +35,8 @@ new constructor(arg1, arg2, /* …, */ argN)
 1. 创建一个空的简单 JavaScript 对象。为方便起见，我们称之为 `newInstance`。
 2. 如果构造函数的 `prototype` 属性是一个{{jsxref("Object", "对象", "", 1)}}，则将 `newInstance` 的 [[Prototype]] 指向构造函数的 `prototype` 属性，否则 `newInstance` 将保持为一个普通对象，其 [[Prototype]] 为 `Object.prototype`。
 
-   > **备注：** 因此，通过构造函数创建的所有实例都可以访问添加到构造函数 `prototype` 属性中的属性/对象。
+   > [!NOTE]
+   > 因此，通过构造函数创建的所有实例都可以访问添加到构造函数 `prototype` 属性中的属性/对象。
 
 3. 使用给定参数执行构造函数，并将 `newInstance` 绑定为 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的上下文（换句话说，在构造函数中的所有 `this` 引用都指向 `newInstance`）。
 4. 如果构造函数返回[非原始值](/zh-CN/docs/Web/JavaScript/Data_structures#原始值)，则该返回值成为整个 `new` 表达式的结果。否则，如果构造函数未返回任何值或返回了一个原始值，则返回 `newInstance`。（通常构造函数不返回值，但可以选择返回值，以覆盖正常的对象创建过程。）
@@ -59,7 +60,8 @@ new constructor(arg1, arg2, /* …, */ argN)
    const myFoo = new Foo("Bar 1", 2021);
    ```
 
-> **备注：** 对象的属性可以是另一个对象。请参阅下面的示例。
+> [!NOTE]
+> 对象的属性可以是另一个对象。请参阅下面的示例。
 
 你始终可以对已定义的对象添加新的属性。例如，`car1.color = "black"` 语句给 `car1` 添加了一个新的属性 `color`，并将其赋值为 `"black"`。
 
@@ -84,7 +86,8 @@ console.log(car1.color); // '黑色'
 console.log(car2.color); // '原色'
 ```
 
-> **备注：** 虽然构造函数可以像任何常规函数一样被调用（即不使用 `new` 运算符），但在这种情况下并不会创建一个新的对象，`this` 的值也是不一样的。
+> [!NOTE]
+> 虽然构造函数可以像任何常规函数一样被调用（即不使用 `new` 运算符），但在这种情况下并不会创建一个新的对象，`this` 的值也是不一样的。
 
 函数可以通过检查 [`new.target`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target) 来知道它是否是通过 `new` 被调用的。当函数在没有使用 `new` 的情况下被调用时，`new.target` 的值为 `undefined`。例如，你可以有一个在被调用时和被构造时具有不同表现的函数：
 
diff --git a/files/zh-cn/web/javascript/reference/operators/object_initializer/index.md b/files/zh-cn/web/javascript/reference/operators/object_initializer/index.md
index 0228e3c3bc9622..da81601e066717 100644
--- a/files/zh-cn/web/javascript/reference/operators/object_initializer/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/object_initializer/index.md
@@ -226,7 +226,8 @@ const mergedObj = { ...obj1, ...obj2 };
 // { foo: "baz", x: 42, y: 13 }
 ```
 
-> **警告：** 请注意，{{jsxref("Object.assign()")}} 会触发 [setter](/zh-CN/docs/Web/JavaScript/Reference/Functions/set)，而展开语法不会！
+> [!WARNING]
+> 请注意，{{jsxref("Object.assign()")}} 会触发 [setter](/zh-CN/docs/Web/JavaScript/Reference/Functions/set)，而展开语法不会！
 
 ### 原型 setter
 
diff --git a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md
index 8277f91cdc92df..a2632ef510b742 100644
--- a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.md
@@ -56,9 +56,11 @@ let nestedProp = temp === null || temp === undefined ? undefined : temp.second;
 let result = someInterface.customMethod?.();
 ```
 
-> **备注：** 如果存在一个属性名且不是函数，使用 `?.` 仍然会产生一个 {{JSxRef("TypeError")}} 异常 (`x.y is not a function`).
+> [!NOTE]
+> 如果存在一个属性名且不是函数，使用 `?.` 仍然会产生一个 {{JSxRef("TypeError")}} 异常 (`x.y is not a function`).
 
-> **备注：** 如果 `someInterface` 自身是 `null` 或者 `undefined` ，异常 {{JSxRef("TypeError")}} 仍会被抛出 `someInterface is null` 如果你希望允许 `someInterface` 也为 `null` 或者 `undefined` ，那么你需要像这样写 `someInterface?.customMethod?.()`
+> [!NOTE]
+> 如果 `someInterface` 自身是 `null` 或者 `undefined` ，异常 {{JSxRef("TypeError")}} 仍会被抛出 `someInterface is null` 如果你希望允许 `someInterface` 也为 `null` 或者 `undefined` ，那么你需要像这样写 `someInterface?.customMethod?.()`
 
 #### 处理可选的回调函数或者事件处理器
 
diff --git a/files/zh-cn/web/javascript/reference/operators/property_accessors/index.md b/files/zh-cn/web/javascript/reference/operators/property_accessors/index.md
index 7e2c69867a0d45..f906d08d902184 100644
--- a/files/zh-cn/web/javascript/reference/operators/property_accessors/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/property_accessors/index.md
@@ -39,16 +39,17 @@ document.createElement("pre");
 
 如果对数字字面量使用方法，并且数字文字没有指数且没有小数点，请在方法调用之前的点之前留出空格，以防止点被解释为小数点。
 
-```js
-(77).toExponential();
+```js-nolint
+77 .toExponential();
 // 或
-(77).toExponential();
+77
+.toExponential();
 // 或
 (77).toExponential();
 // 或
-(77).toExponential();
+77..toExponential();
 // 或
-(77.0).toExponential();
+77.0.toExponential();
 // 因为 77. === 77.0，没有歧义（no ambiguity）
 ```
 
diff --git a/files/zh-cn/web/javascript/reference/operators/this/index.md b/files/zh-cn/web/javascript/reference/operators/this/index.md
index cbb4588f5a4728..e93a4cca75cdf2 100644
--- a/files/zh-cn/web/javascript/reference/operators/this/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/this/index.md
@@ -217,7 +217,8 @@ console.log(C.staticField === C); // true
 this = new Base();
 ```
 
-> **警告：** 在调用 `super()` 之前引用 `this` 将抛出错误。
+> [!WARNING]
+> 在调用 `super()` 之前引用 `this` 将抛出错误。
 
 派生类在调用 `super()` 之前不能有返回，除非构造函数返回一个对象（这样 `this` 值就会被覆盖）或者类根本没有构造函数。
 
@@ -493,7 +494,8 @@ bird.sayBye = car.sayBye;
 bird.sayBye(); // Bye from Ferrari
 ```
 
-> **备注：** 类总是在严格模式下。如果一个方法试图访问 `this` 上的属性，使用未定义的 `this` 值调用该方法将会抛出错误。
+> [!NOTE]
+> 类总是在严格模式下。如果一个方法试图访问 `this` 上的属性，使用未定义的 `this` 值调用该方法将会抛出错误。
 >
 > ```js example-bad
 > const carSayHi = car.sayHi;
diff --git a/files/zh-cn/web/javascript/reference/operators/void/index.md b/files/zh-cn/web/javascript/reference/operators/void/index.md
index 8e19def6ab8f07..b820ac7683e683 100644
--- a/files/zh-cn/web/javascript/reference/operators/void/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/void/index.md
@@ -76,7 +76,8 @@ void (function () {
 </a>
 ```
 
-> **备注：** 利用 `javascript:` 伪协议来执行 JavaScript 代码是不推荐的，推荐的做法是为链接元素绑定事件。
+> [!NOTE]
+> 利用 `javascript:` 伪协议来执行 JavaScript 代码是不推荐的，推荐的做法是为链接元素绑定事件。
 
 ### 在箭头函数中避免泄漏
 
diff --git a/files/zh-cn/web/javascript/reference/operators/yield/index.md b/files/zh-cn/web/javascript/reference/operators/yield/index.md
index f5103d692bf171..e71777d5158bfb 100644
--- a/files/zh-cn/web/javascript/reference/operators/yield/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/yield/index.md
@@ -37,7 +37,8 @@ slug: Web/JavaScript/Reference/Operators/yield
 
 在生成器的代码路径中的 `yield` 运算符，以及通过将其传递给 {{jsxref("Generator.prototype.next()")}} 指定新的起始值的能力之间，生成器提供了强大的控制力。
 
-> **警告：** 不幸地是，`next()` 是不对称的，但这并不是没有帮助：它总是向当前暂停的 `yield` 发送一个值，但是返回的是 `yield` 之后表达式的运算结果。
+> [!WARNING]
+> 不幸地是，`next()` 是不对称的，但这并不是没有帮助：它总是向当前暂停的 `yield` 发送一个值，但是返回的是 `yield` 之后表达式的运算结果。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/regular_expressions/index.md b/files/zh-cn/web/javascript/reference/regular_expressions/index.md
index 47a4ec84e07a79..b73d0fb334e882 100644
--- a/files/zh-cn/web/javascript/reference/regular_expressions/index.md
+++ b/files/zh-cn/web/javascript/reference/regular_expressions/index.md
@@ -22,7 +22,8 @@ l10n:
 
 假设有一个有限的字母表（如 26 个英文字母或整个 Unicode 字符集），那么所有正则表达式语言都可以通过上述特征生成。当然，许多模式用这种方式来表达非常繁琐（如“10 位数字”或“一个非空格的字符”），因此 JavaScript 正则表达式包含许多速记符号，下面将一一介绍。
 
-> **备注：** 由于存在[反向引用](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Backreference)（正则表达式必须具有有限状态），JavaScript 正则表达式实际上并不“正则”。不过，反向引用仍然是一个非常有用的特性。
+> [!NOTE]
+> 由于存在[反向引用](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Backreference)（正则表达式必须具有有限状态），JavaScript 正则表达式实际上并不“正则”。不过，反向引用仍然是一个非常有用的特性。
 
 ### 创建正则表达式
 
diff --git a/files/zh-cn/web/javascript/reference/regular_expressions/quantifier/index.md b/files/zh-cn/web/javascript/reference/regular_expressions/quantifier/index.md
index e5bf829b1c8151..c4c49ec0a92a6c 100644
--- a/files/zh-cn/web/javascript/reference/regular_expressions/quantifier/index.md
+++ b/files/zh-cn/web/javascript/reference/regular_expressions/quantifier/index.md
@@ -143,7 +143,8 @@ function stripTags(str) {
 stripTags("<p><em>lorem</em> <strong>ipsum</strong></p>"); // 'lorem ipsum'
 ```
 
-> **警告：** 以上方法仅供演示——它无法处理属性值中的 `>`。请使用类似 [HTML sanitizer API](/zh-CN/docs/Web/API/HTML_Sanitizer_API) 这样的正规 HTML 净化器。
+> [!WARNING]
+> 以上方法仅供演示——它无法处理属性值中的 `>`。请使用类似 [HTML sanitizer API](/zh-CN/docs/Web/API/HTML_Sanitizer_API) 这样的正规 HTML 净化器。
 
 ### 定位 Markdown 段落
 
@@ -164,7 +165,8 @@ Another paragraph
 `); // 3
 ```
 
-> **警告：** 以上方法仅供演示——它无法处理代码块或其他 Markdown 块元素（如标题）中的换行符。请使用合适的 Markdown 解析器。
+> [!WARNING]
+> 以上方法仅供演示——它无法处理代码块或其他 Markdown 块元素（如标题）中的换行符。请使用合适的 Markdown 解析器。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md b/files/zh-cn/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
index a1bbb8d26f0568..16365d34b19f6f 100644
--- a/files/zh-cn/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
+++ b/files/zh-cn/web/javascript/reference/regular_expressions/unicode_character_class_escape/index.md
@@ -9,9 +9,11 @@ slug: Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escap
 
 {{EmbedInteractiveExample("pages/js/regexp-unicode-property-escapes.html", "taller")}}
 
-> **备注：** 使用 Unicode 属性转义依靠 [`\u` 标识](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode)，`\u` 表示该字符串被视为一串 Unicode 代码点。参考 [`RegExp.prototype.unicode`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode)。
+> [!NOTE]
+> 使用 Unicode 属性转义依靠 [`\u` 标识](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode)，`\u` 表示该字符串被视为一串 Unicode 代码点。参考 [`RegExp.prototype.unicode`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode)。
 
-> **备注：** 某些 Unicode 属性比[字符类](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes)(如 `\w` 只匹配拉丁字母 `a` 到 `z`) 包含更多的字符，但后者浏览器兼容性更好（截至 2020 一月）。
+> [!NOTE]
+> 某些 Unicode 属性比[字符类](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes)(如 `\w` 只匹配拉丁字母 `a` 到 `z`) 包含更多的字符，但后者浏览器兼容性更好（截至 2020 一月）。
 
 ## 语法
 
@@ -36,7 +38,8 @@ slug: Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escap
 - Unicode 属性值
   - : 很多值有同名或简写 (e.g. 对应着 `General_Category` 属性名的属性值 `Decimal_Number` 可以写作 `Nd`, `digit`, 或 `Decimal_Number`). 大多数属性值的 `Unicode 属性名` 和等号可以省去。如果想明确某 `Unicode 属性名`，必须给出它的值。
 
-> **备注：** 因为可使用的属性和值太多，这里不一一赘述，仅提供几个例子。
+> [!NOTE]
+> 因为可使用的属性和值太多，这里不一一赘述，仅提供几个例子。
 
 ## 基本原理
 
diff --git a/files/zh-cn/web/javascript/reference/statements/async_function/index.md b/files/zh-cn/web/javascript/reference/statements/async_function/index.md
index 39266f96cb4288..d3ad1851a3fe5e 100644
--- a/files/zh-cn/web/javascript/reference/statements/async_function/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/async_function/index.md
@@ -248,7 +248,8 @@ setTimeout(concurrent2, 10000); // 1 秒后，打印“fast”，然后过 1 秒
 
 如果你希望在并发执行的两个或多个任务完成后安全地执行其他任务，那么在这些任务开始前，你必须等待对 {{jsxref("Promise.all()")}} 或 {{jsxref("Promise.allSettled()")}} 的调用。
 
-> **警告：** 函数 `sequentialWait` 和 `concurrent1` 在功能上并非等价的。
+> [!WARNING]
+> 函数 `sequentialWait` 和 `concurrent1` 在功能上并非等价的。
 >
 > 在 `sequentialWait` 中，如果较快的 promise 先于较慢的 promise 兑现前拒绝，则会出现未处理的 promise 拒绝错误，无论调用者是否配置了 catch 子句。
 >
diff --git a/files/zh-cn/web/javascript/reference/statements/async_function_star_/index.md b/files/zh-cn/web/javascript/reference/statements/async_function_star_/index.md
index aed36b96423003..f3a12f81345259 100644
--- a/files/zh-cn/web/javascript/reference/statements/async_function_star_/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/async_function_star_/index.md
@@ -27,7 +27,8 @@ async function* name(param0, param1, /* …, */ paramN) {
 }
 ```
 
-> **备注：** 箭头函数不能用来定义异步生成器函数。
+> [!NOTE]
+> 箭头函数不能用来定义异步生成器函数。
 
 > **备注：** `function` 和 `*` 是两个单独的标记，因此它们可以用[空白或换行符](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#空白符)分隔。然而，如果 `async` 和 `function` 之间有换行符，则会[自动插入](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#自动分号补全)分号，导致 `async` 成为标识符，而其余内容成为 `function*` 声明。
 
diff --git a/files/zh-cn/web/javascript/reference/statements/export/index.md b/files/zh-cn/web/javascript/reference/statements/export/index.md
index 7848d0c7e681fb..2336aaf316de84 100644
--- a/files/zh-cn/web/javascript/reference/statements/export/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/export/index.md
@@ -90,7 +90,8 @@ export default function () { /* … */ }
 export default class { /* … */ }
 ```
 
-> **备注：** 导出声明的名称必须相互独立。导出名称重复或使用多个 `default` 导出将导致 {{jsxref("SyntaxError")}} 并阻止模块被执行。
+> [!NOTE]
+> 导出声明的名称必须相互独立。导出名称重复或使用多个 `default` 导出将导致 {{jsxref("SyntaxError")}} 并阻止模块被执行。
 
 `export default` 语法允许任何表达式。
 
diff --git a/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md b/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md
index bed03c04e6fe2b..4a0b3f963c3eb2 100644
--- a/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md
@@ -117,7 +117,8 @@ function range2(start, end) {
 }
 ```
 
-> **警告：** 这仅演示了该语言的功能。过度的使用表达式语句来替代控制流语句会大大降低代码的可读性。
+> [!WARNING]
+> 这仅演示了该语言的功能。过度的使用表达式语句来替代控制流语句会大大降低代码的可读性。
 
 ## 规范
 
diff --git a/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md b/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md
index 15ad5101648e7f..3eeb0d128b3c84 100644
--- a/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md
@@ -167,7 +167,8 @@ for (const numOrPromise of generator()) {
 // 4
 ```
 
-> **备注：** 请注意，如果同步生成器生成了一个被拒绝的 promise，那么在使用 `for await...of` 进行处理时会抛出异常，并且**不会调用**生成器内部的 `finally` 块。如果你需要使用 `try/finally` 来释放一些已分配的资源，这可能是不可取的。
+> [!NOTE]
+> 请注意，如果同步生成器生成了一个被拒绝的 promise，那么在使用 `for await...of` 进行处理时会抛出异常，并且**不会调用**生成器内部的 `finally` 块。如果你需要使用 `try/finally` 来释放一些已分配的资源，这可能是不可取的。
 
 ```js
 function* generatorWithRejectedPromises() {
diff --git a/files/zh-cn/web/javascript/reference/statements/for...in/index.md b/files/zh-cn/web/javascript/reference/statements/for...in/index.md
index b458aa4e874561..c1b698320d7b66 100644
--- a/files/zh-cn/web/javascript/reference/statements/for...in/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/for...in/index.md
@@ -124,7 +124,8 @@ for (const prop in obj) {
 
 ### 并发修改
 
-> **警告：** 你不应该自己编写类似的代码。这里仅仅展示了 `for...in` 在某些极端情况下的行为。
+> [!WARNING]
+> 你不应该自己编写类似的代码。这里仅仅展示了 `for...in` 在某些极端情况下的行为。
 
 在迭代期间添加到当前对象的属性永远不会被访问：
 
diff --git a/files/zh-cn/web/javascript/reference/statements/for...of/index.md b/files/zh-cn/web/javascript/reference/statements/for...of/index.md
index af8ed3f6a9bd72..82a6f141ac1fff 100644
--- a/files/zh-cn/web/javascript/reference/statements/for...of/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/for...of/index.md
@@ -49,7 +49,8 @@ for (let value of iterable) {
 // 31
 ```
 
-> **备注：** 每次迭代都会创建一个新的变量。在循环体内部重新赋值变量不会影响可迭代对象（在本例中，是一个数组）的原始值。
+> [!NOTE]
+> 每次迭代都会创建一个新的变量。在循环体内部重新赋值变量不会影响可迭代对象（在本例中，是一个数组）的原始值。
 
 你可以使用[解构赋值](/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)来分配多个局部变量，或者使用属性访问器（如 `for (x.y of iterable)`）来给对象属性赋值。
 
diff --git a/files/zh-cn/web/javascript/reference/statements/function/index.md b/files/zh-cn/web/javascript/reference/statements/function/index.md
index 4a15f874286a95..923ef3debe5cd7 100644
--- a/files/zh-cn/web/javascript/reference/statements/function/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/function/index.md
@@ -50,7 +50,8 @@ function name(param0, param1, /* …, */ paramN) {
 
 ### 块级作用域的函数声明
 
-> **警告：** 在[非严格模式下](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，块级作用域的函数声明行为会变得很奇怪。只有在严格模式下才应该在块级作用域中声明函数。
+> [!WARNING]
+> 在[非严格模式下](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，块级作用域的函数声明行为会变得很奇怪。只有在严格模式下才应该在块级作用域中声明函数。
 
 函数可以被条件性地声明——也就是说，函数声明可以嵌套在一个 [`if`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) 语句中。然而，在非严格模式下，不同的实现结果可能不一致。
 
diff --git a/files/zh-cn/web/javascript/reference/statements/function_star_/index.md b/files/zh-cn/web/javascript/reference/statements/function_star_/index.md
index b117b4f0de863e..98409e5d814b57 100644
--- a/files/zh-cn/web/javascript/reference/statements/function_star_/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/function_star_/index.md
@@ -27,7 +27,8 @@ function* name(param0, param1, /* …, */ paramN) {
 }
 ```
 
-> **备注：** 箭头函数不能用来定义生成器函数。
+> [!NOTE]
+> 箭头函数不能用来定义生成器函数。
 
 > **备注：** `function` 和 `*` 是两个单独的标记，因此它们可以用[空白或换行符](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#空白符)分隔。
 
diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.md b/files/zh-cn/web/javascript/reference/statements/import/index.md
index d8e5ddb8e32ed5..05ab5b57b0ddb4 100644
--- a/files/zh-cn/web/javascript/reference/statements/import/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/import/index.md
@@ -140,7 +140,8 @@ myModule.doAllTheAmazingThings();
 
 `myModule` 是一个[密封](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed)的对象，其原型为 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#null_原型对象)。它提供了一个名为 `default` 的键，用于访问默认导出。有关更多信息，请参考[模块命名空间对象](/zh-CN/docs/Web/JavaScript/Reference/Operators/import#模块命名空间对象)。
 
-> **备注：** JavaScript 没有像 `import * from "module-name"` 这样的通配符导入，因为它会导致名称冲突的可能性很高。
+> [!NOTE]
+> JavaScript 没有像 `import * from "module-name"` 这样的通配符导入，因为它会导致名称冲突的可能性很高。
 
 #### 仅为了其副作用而导入模块
 
diff --git a/files/zh-cn/web/javascript/reference/statements/index.md b/files/zh-cn/web/javascript/reference/statements/index.md
index 085a6309c676c5..b4dcbc76e3240b 100644
--- a/files/zh-cn/web/javascript/reference/statements/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/index.md
@@ -133,7 +133,8 @@ if (condition)
 label: const a = 1; // SyntaxError: Lexical declaration cannot appear in a single-statement context
 ```
 
-> **备注：** 有一种遗留语法允许[函数声明具有标签](/zh-CN/docs/Web/JavaScript/Reference/Statements/label#标记函数声明)，但它只是为了与 web 现实兼容而进行了标准化。
+> [!NOTE]
+> 有一种遗留语法允许[函数声明具有标签](/zh-CN/docs/Web/JavaScript/Reference/Statements/label#标记函数声明)，但它只是为了与 web 现实兼容而进行了标准化。
 
 为了解决这个问题，你可以将声明括在大括号中——这使其成为[块语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/block)的一部分。
 
diff --git a/files/zh-cn/web/javascript/reference/statements/with/index.md b/files/zh-cn/web/javascript/reference/statements/with/index.md
index 12fb6047b0951e..92780bb69b3bb7 100644
--- a/files/zh-cn/web/javascript/reference/statements/with/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/with/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Statements/with
 
 {{jsSidebar("Statements")}}{{Deprecated_Header}}
 
-> **备注：** 不建议使用 `with` 语句，因为它可能是混淆错误和兼容性问题的根源。有关详细信息，请参阅下面“描述”一节中的“语意不明的弊端”部分。
+> [!NOTE]
+> 不建议使用 `with` 语句，因为它可能是混淆错误和兼容性问题的根源。有关详细信息，请参阅下面“描述”一节中的“语意不明的弊端”部分。
 
 **`with`** 语句扩展一个语句的作用域链。
 
@@ -25,7 +26,8 @@ with (expression)
 
 JavaScript 查找某个未使用命名空间的变量时，会通过作用域链来查找，作用域链是跟执行代码的 context 或者包含这个变量的函数有关。'with'语句将某个对象添加到作用域链的顶部，如果在 statement 中有某个未使用命名空间的变量，跟作用域链中的某个属性同名，则这个变量将指向这个属性值。如果沒有同名的属性，则将拋出{{jsxref("ReferenceError")}}异常。
 
-> **备注：** 不推荐使用`with`，在 ECMAScript 5 [严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中该标签已被禁止。推荐的替代方案是声明一个临时变量来承载你所需要的属性。
+> [!NOTE]
+> 不推荐使用`with`，在 ECMAScript 5 [严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中该标签已被禁止。推荐的替代方案是声明一个临时变量来承载你所需要的属性。
 
 ### 性能方面的利与弊
 
diff --git a/files/zh-cn/web/javascript/reference/strict_mode/index.md b/files/zh-cn/web/javascript/reference/strict_mode/index.md
index 67f671755411fd..0e334ed1f0e652 100644
--- a/files/zh-cn/web/javascript/reference/strict_mode/index.md
+++ b/files/zh-cn/web/javascript/reference/strict_mode/index.md
@@ -5,7 +5,8 @@ slug: Web/JavaScript/Reference/Strict_mode
 
 {{JsSidebar("More")}}
 
-> **备注：** 有时你会看到非严格模式，被称为“**[sloppy mode](/docs/Glossary/Sloppy_mode)**”。这不是一个官方术语，但以防万一，你应该意识到这一点。
+> [!NOTE]
+> 有时你会看到非严格模式，被称为“**[sloppy mode](/docs/Glossary/Sloppy_mode)**”。这不是一个官方术语，但以防万一，你应该意识到这一点。
 
 [ECMAScript 5](http://www.ecma-international.org/publications/standards/Ecma-262.htm)的**严格模式**是采用具有限制性 JavaScript 变体的一种方式，从而使代码隐式地脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。不支持严格模式与支持严格模式的浏览器在执行严格模式代码时会采用不同行为。所以在没有对运行环境展开**特性测试**来验证对于严格模式相关方面支持的情况下，就算采用了严格模式也不一定会取得预期效果。严格模式代码和非严格模式代码可以共存，因此项目脚本可以渐进式地采用严格模式。严格模式对正常的 JavaScript 语义做了一些更改。
 
@@ -102,7 +103,8 @@ delete Object.prototype; // 抛出 TypeError 错误
 
 第四，在 Gecko 版本 34 之前，严格模式要求一个对象内的所有属性名在对象内必须唯一。正常模式下重名属性是允许的，最后一个重名的属性决定其属性值。因为只有最后一个属性起作用，当代码要去改变属性值而不是修改最后一个重名属性的时候，复制这个对象就产生一连串的 bug。在严格模式下，重名属性被认为是语法错误：
 
-> **备注：** 这个问题在 ECMAScript6 中已经不复存在（[Firefox bug 1041128](https://bugzil.la/1041128)）。
+> [!NOTE]
+> 这个问题在 ECMAScript6 中已经不复存在（[Firefox bug 1041128](https://bugzil.la/1041128)）。
 
 ```js
 "use strict";
diff --git a/files/zh-cn/web/manifest/background_color/index.md b/files/zh-cn/web/manifest/background_color/index.md
index 8a402c35b7ef67..fc39202f736743 100644
--- a/files/zh-cn/web/manifest/background_color/index.md
+++ b/files/zh-cn/web/manifest/background_color/index.md
@@ -22,7 +22,8 @@ slug: Web/Manifest/background_color
 
 因此，`background_color` 应与 {{cssxref("background-color")}} 网站样式表中的 CSS 属性匹配，以在启动 Web 应用程序和加载网站内容之间进行平滑过渡。
 
-> **备注：** 该 `background_color` 成员仅用于在从网络或存储介质加载主样式表时改善用户体验。当渐进式 Web 应用程序样式表可用时，用户代理不会将 {{cssxref("background-color")}} 用作 CSS 属性。
+> [!NOTE]
+> 该 `background_color` 成员仅用于在从网络或存储介质加载主样式表时改善用户体验。当渐进式 Web 应用程序样式表可用时，用户代理不会将 {{cssxref("background-color")}} 用作 CSS 属性。
 
 ## 实例
 
diff --git a/files/zh-cn/web/manifest/index.md b/files/zh-cn/web/manifest/index.md
index 0c854a14503c6e..011b70c8335958 100644
--- a/files/zh-cn/web/manifest/index.md
+++ b/files/zh-cn/web/manifest/index.md
@@ -81,7 +81,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 "background_color": "red"
 ```
 
-> **备注：** background_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。
+> [!NOTE]
+> background_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。
 
 ### `description`
 
@@ -107,7 +108,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 - `rtl` (由右到左)
 - `auto` (由浏览器自动判断。
 
-> **备注：** 当省略时，默认为 auto
+> [!NOTE]
+> 当省略时，默认为 auto
 
 ### `display`
 
@@ -126,7 +128,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 | `minimal-ui` | 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。                                                                                                         | `browser`    |
 | `browser`    | 该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。这是默认的设置。                                                                                               | (None)       |
 
-> **备注：** 你可以使用显示模式媒体功能，根据[显示模式](/zh-CN/docs/Web/CSS/@media/display-mode)选择性地将 CSS 应用到你的应用程序。这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。
+> [!NOTE]
+> 你可以使用显示模式媒体功能，根据[显示模式](/zh-CN/docs/Web/CSS/@media/display-mode)选择性地将 CSS 应用到你的应用程序。这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。
 
 ### `icons`
 
@@ -205,7 +208,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 "prefer_related_applications": false
 ```
 
-> **备注：** 如果省略，默认设置为 `false`.
+> [!NOTE]
+> 如果省略，默认设置为 `false`.
 
 ### `related_applications`
 
diff --git a/files/zh-cn/web/mathml/attribute/index.md b/files/zh-cn/web/mathml/attribute/index.md
index 45d1e22f5fd2fb..515e0e60ee3d92 100644
--- a/files/zh-cn/web/mathml/attribute/index.md
+++ b/files/zh-cn/web/mathml/attribute/index.md
@@ -9,7 +9,8 @@ l10n:
 
 此页面是 MathML 属性的字母表。要了解每个属性的更多详细信息，请参见 [MathML 元素页面](/zh-CN/docs/Web/MathML/Element)和[全局属性页面](/zh-CN/docs/Web/MathML/Global_attributes)。[值](/zh-CN/docs/Web/MathML/Values)页面也介绍了有关 MathML 属性常用值的一些说明。
 
-> **备注：** 就像 [MathML](/zh-CN/docs/Web/MathML) 主页所解释的那样，MDN 使用 [MathML 核心](https://w3c.github.io/mathml-core/)作为参考规范。不过，一些浏览器仍在使用的遗留特性也被记录在案。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到有关这些特性和其他特性的更多详细信息。
+> [!NOTE]
+> 就像 [MathML](/zh-CN/docs/Web/MathML) 主页所解释的那样，MDN 使用 [MathML 核心](https://w3c.github.io/mathml-core/)作为参考规范。不过，一些浏览器仍在使用的遗留特性也被记录在案。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到有关这些特性和其他特性的更多详细信息。
 
 <table class="standard-table">
   <thead>
diff --git a/files/zh-cn/web/mathml/authoring/index.md b/files/zh-cn/web/mathml/authoring/index.md
index 1bdfb22038ea4a..114ec5ba896d4c 100644
--- a/files/zh-cn/web/mathml/authoring/index.md
+++ b/files/zh-cn/web/mathml/authoring/index.md
@@ -54,9 +54,11 @@ l10n:
 </html>
 ```
 
-> **备注：** 要在 XML 文档（例如 XHTML、EPUB 或 OpenDocument）中使用 MathML，请在每个 `<math>` 元素中放置一个 `xmlns="http://www.w3.org/1998/Math/MathML"` 属性。
+> [!NOTE]
+> 要在 XML 文档（例如 XHTML、EPUB 或 OpenDocument）中使用 MathML，请在每个 `<math>` 元素中放置一个 `xmlns="http://www.w3.org/1998/Math/MathML"` 属性。
 
-> **备注：** 某些电子邮件或即时通讯客户端能够发送和接收 HTML 格式的消息。因此，可以在此类消息中嵌入数学公式，只要标记清理程序未将 MathML 标签过滤掉。
+> [!NOTE]
+> 某些电子邮件或即时通讯客户端能够发送和接收 HTML 格式的消息。因此，可以在此类消息中嵌入数学公式，只要标记清理程序未将 MathML 标签过滤掉。
 
 #### 对不支持 MathML 的浏览器的回退方案
 
@@ -78,7 +80,8 @@ l10n:
 <script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>
 ```
 
-> **备注：** 这些脚本会执行特性检测（探测 [mspace](/zh-CN/docs/Web/MathML/Element/mspace) 元素和 [mpadded](/zh-CN/docs/Web/MathML/Element/mpadded) 元素），这优于[浏览器嗅探](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)。此外，它们是在开源许可证下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行调整。
+> [!NOTE]
+> 这些脚本会执行特性检测（探测 [mspace](/zh-CN/docs/Web/MathML/Element/mspace) 元素和 [mpadded](/zh-CN/docs/Web/MathML/Element/mpadded) 元素），这优于[浏览器嗅探](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)。此外，它们是在开源许可证下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行调整。
 
 #### 数学公式字体
 
@@ -100,7 +103,8 @@ l10n:
   href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css" />
 ```
 
-> **备注：** MathFonts 页面中的字体和样式表是在开源许可下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行修改。
+> [!NOTE]
+> MathFonts 页面中的字体和样式表是在开源许可下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行修改。
 
 ## 从简单语法转换
 
@@ -245,7 +249,8 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathml.css/msp
 latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback
 ```
 
-> **备注：** 命令行工具可以在服务端使用，例如：[MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) 使用 [Mathoid](https://github.com/wikimedia/mathoid) 以完成从 LaTeX 到 MathML 的转换。
+> [!NOTE]
+> 命令行工具可以在服务端使用，例如：[MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) 使用 [Mathoid](https://github.com/wikimedia/mathoid) 以完成从 LaTeX 到 MathML 的转换。
 
 ## 图形界面
 
@@ -257,13 +262,15 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa
 
 ![Thunderbird 的 LaTeX 输入框](thunderbird.png)
 
-> **备注：** 你也可以使用 **Insert > HTML** 命令直接插入 MathML 内容。
+> [!NOTE]
+> 你也可以使用 **Insert > HTML** 命令直接插入 MathML 内容。
 
 [LibreOffice](https://www.libreoffice.org/) 的公式编辑器（文件 → 新建 → 公式）提供了增强功能：它的 _StartMath_ 语法输入框提供了额外的公式面板来插入预定义的数学公式结构。
 
 ![Libre Office 中的 StarMath 输入框](libreoffice.png)
 
-> **备注：** 要获取 libreoffice 的 MathML 代码，请将文档保存为 `mml` 格式，并在你喜欢的文本编辑器中打开它。
+> [!NOTE]
+> 要获取 libreoffice 的 MathML 代码，请将文档保存为 `mml` 格式，并在你喜欢的文本编辑器中打开它。
 
 ### 所见即所得编辑器
 
@@ -273,7 +280,8 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa
 
 ![TeXmacs 的示例](texmacs.png)
 
-> **备注：** 默认情况下，Lyx 和 TeXmacs 会在它们的 HTML 输出中使用数学公式的图像。要使用 MathML，对于前者，请[参照这里的说明](https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx)；对于后者，请选择 `User preference > Convert > Export mathematical formulas as MathML`。
+> [!NOTE]
+> 默认情况下，Lyx 和 TeXmacs 会在它们的 HTML 输出中使用数学公式的图像。要使用 MathML，对于前者，请[参照这里的说明](https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx)；对于后者，请选择 `User preference > Convert > Export mathematical formulas as MathML`。
 
 ### 光学字符和手写识别
 
diff --git a/files/zh-cn/web/mathml/element/index.md b/files/zh-cn/web/mathml/element/index.md
index 592873a7b4fd82..00da8f394d44db 100644
--- a/files/zh-cn/web/mathml/element/index.md
+++ b/files/zh-cn/web/mathml/element/index.md
@@ -9,7 +9,8 @@ l10n:
 
 这是一份按字母排序的 MathML 元素列表。所有这些元素都实现了 {{domxref("MathMLElement")}} 类。
 
-> **备注：** 如主 [MathML](/zh-CN/docs/Web/MathML) 页面所述，MDN 使用 [MathML Core](https://w3c.github.io/mathml-core/) 作为参考规范。但是，文档也记录了一些浏览器仍然实现的旧版特性。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到这些和其他特性的更多详细信息。
+> [!NOTE]
+> 如主 [MathML](/zh-CN/docs/Web/MathML) 页面所述，MDN 使用 [MathML Core](https://w3c.github.io/mathml-core/) 作为参考规范。但是，文档也记录了一些浏览器仍然实现的旧版特性。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到这些和其他特性的更多详细信息。
 
 ## MathML 元素（字母排序）
 
diff --git a/files/zh-cn/web/mathml/element/maction/index.md b/files/zh-cn/web/mathml/element/maction/index.md
index 2c5afb5f4e4597..be8cc6d001216a 100644
--- a/files/zh-cn/web/mathml/element/maction/index.md
+++ b/files/zh-cn/web/mathml/element/maction/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<maction>`** [MathML](/zh-CN/docs/Web/MathML) 元素允许将行为绑定到数学表达式上。默认情况下，只有第一个子元素会被渲染，但是一些浏览器可能会根据 `actiontype` 和 `selection` 属性来实现自定义行为。
 
-> **备注：** 从历史的角度来看，该元素提供了一种使 MathML 公式可以交互的机制。但如今，建议使用 [JavaScript](/zh-CN/docs/Web/JavaScript) 和其他 Web 技术来实现这种用例。
+> [!NOTE]
+> 从历史的角度来看，该元素提供了一种使 MathML 公式可以交互的机制。但如今，建议使用 [JavaScript](/zh-CN/docs/Web/JavaScript) 和其他 Web 技术来实现这种用例。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/math/index.md b/files/zh-cn/web/mathml/element/math/index.md
index 204d46381db7fa..800cda588244dc 100644
--- a/files/zh-cn/web/mathml/element/math/index.md
+++ b/files/zh-cn/web/mathml/element/math/index.md
@@ -7,7 +7,8 @@ slug: Web/MathML/Element/math
 
 **`<math>`** [MathML](/zh-CN/docs/Web/MathML) 元素是顶级的 MathML 元素，用于编写单个数学公式。可以将其放在允许[流式内容](/zh-CN/docs/Web/HTML/Content_categories#流式内容)的 HTML 内容中。
 
-> **备注：** 参阅[编写 MathML 页面](/zh-CN/docs/Web/MathML/Authoring#使用_mathml)以了解如何正确地在网页中集成 MathML 公式，有关更多的演示，请参阅[示例](/zh-CN/docs/Web/MathML/Examples)页面。
+> [!NOTE]
+> 参阅[编写 MathML 页面](/zh-CN/docs/Web/MathML/Authoring#使用_mathml)以了解如何正确地在网页中集成 MathML 公式，有关更多的演示，请参阅[示例](/zh-CN/docs/Web/MathML/Examples)页面。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/mfenced/index.md b/files/zh-cn/web/mathml/element/mfenced/index.md
index 9c3974880bcfcf..1d878f398e3a84 100644
--- a/files/zh-cn/web/mathml/element/mfenced/index.md
+++ b/files/zh-cn/web/mathml/element/mfenced/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `<mfenced>` [MathML](/zh-CN/docs/Web/MathML) 元素提供了向表达式添加自定义开和闭括号（如圆括号）以及分隔符（如逗号或分号）的可能。
 
-> **备注：** 从历史上看，`<mfenced>` 元素被定义为编写围栏表达式的一种简写形式，相当于涉及 {{MathMLElement("mrow")}} 和 {{MathMLElement("mo")}} 元素的扩展形式。现在，建议改用等效形式。
+> [!NOTE]
+> 从历史上看，`<mfenced>` 元素被定义为编写围栏表达式的一种简写形式，相当于涉及 {{MathMLElement("mrow")}} 和 {{MathMLElement("mo")}} 元素的扩展形式。现在，建议改用等效形式。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/mfrac/index.md b/files/zh-cn/web/mathml/element/mfrac/index.md
index f286a11c8dcbb3..5071d8deed5eab 100644
--- a/files/zh-cn/web/mathml/element/mfrac/index.md
+++ b/files/zh-cn/web/mathml/element/mfrac/index.md
@@ -26,7 +26,8 @@ l10n:
 - `numalign` {{deprecated_inline}} {{Non-standard_Inline}}
   - : 分数上的分子对齐方式。可能的值包括：`left`、`center`（默认）和 `right`。
 
-> **备注：** 对于 `linethickness` 属性，一些浏览器可能还接受不推荐使用的值 `medium`、`thin` 和 `thick`（其确切解释留给实现者）或[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `linethickness` 属性，一些浏览器可能还接受不推荐使用的值 `medium`、`thin` 和 `thick`（其确切解释留给实现者）或[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mi/index.md b/files/zh-cn/web/mathml/element/mi/index.md
index d5f8966d02fa9e..7d51e7de0e1e90 100644
--- a/files/zh-cn/web/mathml/element/mi/index.md
+++ b/files/zh-cn/web/mathml/element/mi/index.md
@@ -13,8 +13,8 @@ l10n:
 
 要使用特定形式的字符，如粗体/斜体、衬线体、无衬线体、手写体/书法体、等宽体、双线体等，你应该使用适当的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)。
 
-> **备注：** 在之前的规范（MathML3）中，`mathvariant` 属性用于定义可以应用于数学字母数字符号的字符格式的逻辑类。
-> 相关的值现已被弃用，并预计在未来版本中从浏览器中删除。
+> [!NOTE]
+> 在之前的规范（MathML3）中，`mathvariant` 属性用于定义可以应用于数学字母数字符号的字符格式的逻辑类。相关的值现已被弃用，并预计在未来版本中从浏览器中删除。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/mmultiscripts/index.md b/files/zh-cn/web/mathml/element/mmultiscripts/index.md
index 617591949e81b2..0baab11a893623 100644
--- a/files/zh-cn/web/mathml/element/mmultiscripts/index.md
+++ b/files/zh-cn/web/mathml/element/mmultiscripts/index.md
@@ -37,7 +37,8 @@ MathML 使用以下语法，即一个基本表达式，后跟任意数量的后
 - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : 表示将上标基线向上移动的最小量的 {{cssxref("length-percentage")}}。
 
-> **备注：** 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mo/index.md b/files/zh-cn/web/mathml/element/mo/index.md
index 03b8bfdc883234..58a509d4afdd90 100644
--- a/files/zh-cn/web/mathml/element/mo/index.md
+++ b/files/zh-cn/web/mathml/element/mo/index.md
@@ -36,7 +36,8 @@ l10n:
 - `symmetric`
   - : 一个 [`<boolean>`](/zh-CN/docs/Web/MathML/Values#mathml_特定类型)，表示拉伸运算符是否应该与虚拟的数学轴（中心分数线）垂直对称。
 
-> **备注：** 对于 `lspace`、`maxsize`、`minsize` 和 `rspace` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `lspace`、`maxsize`、`minsize` 和 `rspace` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mspace/index.md b/files/zh-cn/web/mathml/element/mspace/index.md
index 125ac083b414bb..64c2c5c21fbf33 100644
--- a/files/zh-cn/web/mathml/element/mspace/index.md
+++ b/files/zh-cn/web/mathml/element/mspace/index.md
@@ -20,7 +20,8 @@ l10n:
 - `width`
   - : [`<length-percentage>`](/zh-CN/docs/Web/CSS/length-percentage) 值，表示空白的宽度。
 
-> **备注：** 对于 `depth`、`height`、`width` 属性，一些浏览器可能也接受[旧版 MathML 长度值](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `depth`、`height`、`width` 属性，一些浏览器可能也接受[旧版 MathML 长度值](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mstyle/index.md b/files/zh-cn/web/mathml/element/mstyle/index.md
index a35808ccce82b9..ef4d56c88456db 100644
--- a/files/zh-cn/web/mathml/element/mstyle/index.md
+++ b/files/zh-cn/web/mathml/element/mstyle/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<mstyle>`** [MathML](/zh-CN/docs/Web/MathML) 元素用于更改其子元素的样式。
 
-> **备注：** 从历史上看，该元素接受几乎所有的 MathML 属性，并用于覆盖其后代的默认属性值。后来，它被限制为仅包括在现有网页中使用的一些相关的样式属性。如今，这些样式属性是[所有 MathML 元素共有的](/zh-CN/docs/Web/MathML/Global_attributes)，因此 `<mstyle>` 实际上等同于一个 [`<mrow>`](/zh-CN/docs/Web/MathML/Element/mrow) 元素。然而，`<mstyle>` 可能仍然关系到浏览器之外的 MathML 实现的兼容性。
+> [!NOTE]
+> 从历史上看，该元素接受几乎所有的 MathML 属性，并用于覆盖其后代的默认属性值。后来，它被限制为仅包括在现有网页中使用的一些相关的样式属性。如今，这些样式属性是[所有 MathML 元素共有的](/zh-CN/docs/Web/MathML/Global_attributes)，因此 `<mstyle>` 实际上等同于一个 [`<mrow>`](/zh-CN/docs/Web/MathML/Element/mrow) 元素。然而，`<mstyle>` 可能仍然关系到浏览器之外的 MathML 实现的兼容性。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/msub/index.md b/files/zh-cn/web/mathml/element/msub/index.md
index efdd305ed16cf0..c0e0736db0ea6e 100644
--- a/files/zh-cn/web/mathml/element/msub/index.md
+++ b/files/zh-cn/web/mathml/element/msub/index.md
@@ -18,7 +18,8 @@ l10n:
 - `subscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : {{cssxref("length-percentage")}} 值，表示下标基线向下移动的最小距离。
 
-> **备注：** 对于 `subscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `subscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/msubsup/index.md b/files/zh-cn/web/mathml/element/msubsup/index.md
index aee94fa9909f07..44a3d338ad37d3 100644
--- a/files/zh-cn/web/mathml/element/msubsup/index.md
+++ b/files/zh-cn/web/mathml/element/msubsup/index.md
@@ -20,7 +20,8 @@ l10n:
 - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : {{cssxref("length-percentage")}} 值，表示上标基线向上移动的最小距离。
 
-> **备注：** 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/msup/index.md b/files/zh-cn/web/mathml/element/msup/index.md
index 17f8d67ac23572..61234dfb7b7271 100644
--- a/files/zh-cn/web/mathml/element/msup/index.md
+++ b/files/zh-cn/web/mathml/element/msup/index.md
@@ -18,7 +18,8 @@ l10n:
 - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : {{cssxref("length-percentage")}} 值，表示上标基线向上移动的最小距离。
 
-> **备注：** 对于 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mtable/index.md b/files/zh-cn/web/mathml/element/mtable/index.md
index 47a40f8785258c..4522156ad9ea3c 100644
--- a/files/zh-cn/web/mathml/element/mtable/index.md
+++ b/files/zh-cn/web/mathml/element/mtable/index.md
@@ -45,7 +45,8 @@ l10n:
 - `width` {{Non-standard_Inline}}
   - : 一个用于指定整个表格的宽度的 {{cssxref("length-percentage")}}。
 
-> **备注：** 对于 `width` 属性，某些浏览器还可能接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `width` 属性，某些浏览器还可能接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/semantics/index.md b/files/zh-cn/web/mathml/element/semantics/index.md
index 953f0d72d90919..c527903c1f1309 100644
--- a/files/zh-cn/web/mathml/element/semantics/index.md
+++ b/files/zh-cn/web/mathml/element/semantics/index.md
@@ -14,7 +14,8 @@ l10n:
 
 默认情况下，`<semantics>` 元素的第一个子元素会被渲染，而其他子元素的 [display](/zh-CN/docs/Web/CSS/display) 属性会被设置为 `none`。
 
-> **备注：** 旧版 MathML 规范允许渲染器根据可用的注释来决定默认呈现方式。以下规则用于确定可见子元素，且已在某些浏览器中实现。请参阅 [MathML 4](https://w3c.github.io/mathml/) 以了解表现（Presentation）MathML 和内容（Content）MathML 之间的区别。
+> [!NOTE]
+> 旧版 MathML 规范允许渲染器根据可用的注释来决定默认呈现方式。以下规则用于确定可见子元素，且已在某些浏览器中实现。请参阅 [MathML 4](https://w3c.github.io/mathml/) 以了解表现（Presentation）MathML 和内容（Content）MathML 之间的区别。
 >
 > - 如果没有其他规则适用：默认情况下只渲染第一个子元素，该元素应该是 表现 MathML。
 > - 如果第一个子元素是除了 `<annotation>` 或 `<annotation-xml>` 之外的表现 MathML 元素，则渲染第一个子元素。
diff --git a/files/zh-cn/web/mathml/fonts/index.md b/files/zh-cn/web/mathml/fonts/index.md
index 8987bdd5678cf0..f6f32487648815 100644
--- a/files/zh-cn/web/mathml/fonts/index.md
+++ b/files/zh-cn/web/mathml/fonts/index.md
@@ -24,7 +24,8 @@ l10n:
 5. 打开 `static_otf.zip` ZIP 压缩文件，然后进入 `static_otf` 目录。在那里的文件中，你将找到一个 `STIXTwoMath-Regular` 文件。
 6. 打开 `STIXTwoMath-Regular` 文件，然后点击**安装**按钮。如果需要，你也可以对目录中的其他字体文件执行相同操作。
 
-> **备注：** Windows 上默认安装了 _Cambria Math_ 字体，应该可以确保相对良好的 MathML 渲染效果。
+> [!NOTE]
+> Windows 上默认安装了 _Cambria Math_ 字体，应该可以确保相对良好的 MathML 渲染效果。
 
 ### macOS
 
@@ -34,7 +35,8 @@ l10n:
 2. 解压缩 ZIP 文件，进入 `latinmodern-math-1959` 目录，然后进入 `otf` 目录。你将找到一个 `latinmodern-math` 字体文件。
 3. 双击 `latinmodern-math` 字体文件，然后点击打开的窗口中的**安装字体**按钮。
 
-> **备注：** 如果你使用的是 macOS Ventura（版本 13）或更高版本，则已经预装 _STIX Two Math_，你可以跳过以下步骤。
+> [!NOTE]
+> 如果你使用的是 macOS Ventura（版本 13）或更高版本，则已经预装 _STIX Two Math_，你可以跳过以下步骤。
 
 按照以下步骤安装 _STIX Two Math_ 字体：
 
@@ -42,7 +44,8 @@ l10n:
 2. 打开 `static_otf.zip` ZIP 压缩文件，然后进入 `static_otf` 目录。在那里的文件中，你将找到一个 `STIXTwoMath-Regular.otf` 文件。
 3. 打开 `STIXTwoMath-Regular.otf` 文件，然后点击打开的窗口中的**安装字体**按钮。如果需要，你也可以对目录中的其他字体文件执行相同操作。
 
-> **备注：** 自 OS X Lion（版本 10.7）开始，已预安装了 _STIX_ 的废弃版本。虽然一些浏览器可以使用它，但强烈建议按照上述说明进行操作以实现最佳的数学渲染效果。
+> [!NOTE]
+> 自 OS X Lion（版本 10.7）开始，已预安装了 _STIX_ 的废弃版本。虽然一些浏览器可以使用它，但强烈建议按照上述说明进行操作以实现最佳的数学渲染效果。
 
 ### Linux
 
@@ -109,7 +112,8 @@ fc-cache -sf
 
 你必须使用 [MathML 字体插件](https://addons.mozilla.org/firefox/addon/mathml-fonts/)。
 
-> **备注：** Noto Sans Math 提供了良好的 Unicode 数学符号的覆盖，并且 [Google 计划添加数学布局特性的支持](https://github.com/notofonts/math/issues/14#issuecomment-1161414446)。
+> [!NOTE]
+> Noto Sans Math 提供了良好的 Unicode 数学符号的覆盖，并且 [Google 计划添加数学布局特性的支持](https://github.com/notofonts/math/issues/14#issuecomment-1161414446)。
 
 ### 其他系统
 
diff --git a/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md b/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md
index cb25f69f9efdeb..f197639768da3b 100644
--- a/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md
+++ b/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`mathbackground`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[背景颜色](/zh-CN/docs/Web/CSS/background-color)。
 
-> **备注：** 尽可能使用 CSS 来设置 MathML 的样式。`mathbackground` 属性应仅在不支持 CSS 并且将被 CSS `background-color` 属性值覆盖的应用程序中使用。
+> [!NOTE]
+> 尽可能使用 CSS 来设置 MathML 的样式。`mathbackground` 属性应仅在不支持 CSS 并且将被 CSS `background-color` 属性值覆盖的应用程序中使用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md b/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md
index 8d5dc3eddade74..d7e0cceefa47ec 100644
--- a/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md
+++ b/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`mathbackground`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[颜色](/zh-CN/docs/Web/CSS/color)。
 
-> **备注：** 尽可能使用 CSS 来为 MathML 设置样式。`mathcolor` 属性应仅在不支持 CSS 并且将被 CSS `color` 属性值覆盖的应用程序中使用。
+> [!NOTE]
+> 尽可能使用 CSS 来为 MathML 设置样式。`mathcolor` 属性应仅在不支持 CSS 并且将被 CSS `color` 属性值覆盖的应用程序中使用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/mathml/global_attributes/mathsize/index.md b/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
index 7b1866b7351032..3df9e1e84c92a2 100644
--- a/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
+++ b/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`mathsize`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[字体大小](/zh-CN/docs/Web/CSS/font-size)。
 
-> **备注：** 尽可能使用 CSS 对 MathML 进行样式设置。`mathsize` 属性只应包含在不支持 CSS 的应用程序中，并且如果设置的话，其将被 CSS `font-size` 属性值覆盖。
+> [!NOTE]
+> 尽可能使用 CSS 对 MathML 进行样式设置。`mathsize` 属性只应包含在不支持 CSS 的应用程序中，并且如果设置的话，其将被 CSS `font-size` 属性值覆盖。
 
 ## 语法
 
@@ -32,7 +33,8 @@ l10n:
 
   - : 一个正的 {{cssxref("&lt;percentage&gt;")}} 值，相对于父元素的字体大小。
 
-> **备注：** 一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/mathml/index.md b/files/zh-cn/web/mathml/index.md
index 532dd3fd199f73..a0c9127e543c54 100644
--- a/files/zh-cn/web/mathml/index.md
+++ b/files/zh-cn/web/mathml/index.md
@@ -15,7 +15,8 @@ l10n:
 
 以下是有关 MathML 文档、示例和工具的链接。MDN 将 [MathML Core](https://w3c.github.io/mathml-core/) 用作参考规范，但由于不稳定的标准化历史，旧版 MathML 特性可能仍会出现在现有的实现和 Web 内容中。
 
-> **备注：** 强烈建议开发人员和作者切换到 MathML Core，或许依赖其他 Web 技术来满足缺失的用例。Math WG 正在维护一组 [MathML polyfill](https://github.com/mathml-refresh/mathml-polyfills) 以便促进这一过渡。
+> [!NOTE]
+> 强烈建议开发人员和作者切换到 MathML Core，或许依赖其他 Web 技术来满足缺失的用例。Math WG 正在维护一组 [MathML polyfill](https://github.com/mathml-refresh/mathml-polyfills) 以便促进这一过渡。
 
 ## MathML 参考文档
 
diff --git a/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
index b16155878f6e1b..3b23a9d0c0195e 100644
--- a/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
+++ b/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
@@ -13,7 +13,8 @@ slug: Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_
 
 ![带有播放、停止、音量和字幕的开启和关闭控制按钮的播放器。正在播放的视频显示了一个男人手持长矛状武器的场景，标题为“Esta hoja tiene pasado oscuro”](video-player-with-captions.png)
 
-> **备注：** 你可以[查看 Github 源码](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)，或者[浏览在线示例](https://iandevlin.github.io/mdn/video-player-with-captions/)。
+> [!NOTE]
+> 你可以[查看 Github 源码](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)，或者[浏览在线示例](https://iandevlin.github.io/mdn/video-player-with-captions/)。
 
 ## HTML 和视频字幕
 
@@ -298,7 +299,8 @@ WebVTT 的一个不太为人所知和支持的功能是通过 [CSS 扩展](https
 }
 ```
 
-> **备注：** 一些带有 ::cue 的提示语的样式目前在 Chrome、Opera 和 Safari 上可以使用，但在 Firefox 上还不行。
+> [!NOTE]
+> 一些带有 ::cue 的提示语的样式目前在 Chrome、Opera 和 Safari 上可以使用，但在 Firefox 上还不行。
 
 ## 浏览器兼容性
 
diff --git a/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md b/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
index 927ee7ed6dbf89..5295f445987295 100644
--- a/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
+++ b/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
@@ -103,7 +103,8 @@ window.onload = () => {
 
 ![一个简单的音频播放器，带有播放按钮、搜索栏和音量控制，下面有一系列代表时间范围的红色矩形。](bufferedtimeranges.png)
 
-> **备注：** 你可以查看 [JS Bin 上实时运行的时间范围代码](https://jsbin.com/memazaro/1/edit)。
+> [!NOTE]
+> 你可以查看 [JS Bin 上实时运行的时间范围代码](https://jsbin.com/memazaro/1/edit)。
 
 ## Seekable
 
@@ -213,7 +214,8 @@ window.onload = () => {
 
 ![一个简单的音频播放器，带有播放按钮、搜索栏和音量控制，以及控件下方的进度条，其中的绿色部分显示已播放的视频，还有一个浅灰色的部分表示已缓冲的部分。](bufferedprogress.png)
 
-> **备注：** 你可以查看 [JS Bin 上实时运行的缓冲代码](https://jsbin.com/badimipi/1/edit)。
+> [!NOTE]
+> 你可以查看 [JS Bin 上实时运行的缓冲代码](https://jsbin.com/badimipi/1/edit)。
 
 ## 关于 Played 的简短说明
 
diff --git a/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
index 4d0d1e137ce2bd..97b15bb47c302b 100644
--- a/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
+++ b/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
@@ -43,7 +43,8 @@ slug: Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video
 
 ### RTSP
 
-> **备注：** 实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持，但请留意 [Firefox OS 1.3 支持 RTSP](https://www.mozilla.org/en-US/firefox/os/notes/1.3/)。
+> [!NOTE]
+> 实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持，但请留意 [Firefox OS 1.3 支持 RTSP](https://www.mozilla.org/en-US/firefox/os/notes/1.3/)。
 >
 > 某些厂商实现了专有的传输协议，类似 RealNetworks 以及他们的真实数据传输 (RDT)。
 
@@ -51,7 +52,8 @@ slug: Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video
 
 RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。
 
-> **警告：** 虽然 {{ htmlelement("audio") }} 与 {{ htmlelement("video") }} 标签与协议无关，但是目前没有浏览器可以在无插件的情况下支持除了 HTTP 外的协议，尽管这种局面可能会有所转变，但除了 HTTP 以外的协议可能会被防火墙或代理服务器拦截。
+> [!WARNING]
+> 虽然 {{ htmlelement("audio") }} 与 {{ htmlelement("video") }} 标签与协议无关，但是目前没有浏览器可以在无插件的情况下支持除了 HTTP 外的协议，尽管这种局面可能会有所转变，但除了 HTTP 以外的协议可能会被防火墙或代理服务器拦截。
 
 ## 使用流式协议
 
@@ -71,19 +73,22 @@ RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。
 
 比如，[在卸载 MSE 解码器后，你可以通过 JavaScript 实现 MPEG-DASH](https://web.archive.org/web/20170504035455/https://msopentech.com/blog/2014/01/03/streaming_video_player/).
 
-> **备注：** 时移是在直播流发生后使用实时流的过程。
+> [!NOTE]
+> 时移是在直播流发生后使用实时流的过程。
 
 ## 视频流文件格式
 
 一些基于 HTTP 的实时流视频格式开始得到跨浏览器支持。
 
-> **备注：** 你可以通过 [设置自适应流媒体源](/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources) 找到在 web 中使用的 HLS 和 MPEG-DASH 的编码指南。
+> [!NOTE]
+> 你可以通过 [设置自适应流媒体源](/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources) 找到在 web 中使用的 HLS 和 MPEG-DASH 的编码指南。
 
 ### MPEG-DASH
 
 DASH 意即基于 HTTP 的动态自适应流，最近已经被 Chrome、以及运行在 Window 8.1 的 IE 11 浏览器所支持。它依赖于媒体源扩展 (MSE)，这些扩展被[DASH.js](https://github.com/Dash-Industry-Forum/dash.js/)之类的 JavaScript 库所使用。这种方式允许我们通过 XHR 下载视频流的数据块，并且将它“添加”到 {{ htmlelement("video") }}元素正在播放的流中。正因如此，如果我们检测到网络缓慢，我们可以从下一段开始请求低质量（较小）的数据块。这种技术也允许添加广告片段到流中。
 
-> **备注：** 你也可以 [将 MPEG-DASH 自适应流式系统与 WebM 一起使用](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification).
+> [!NOTE]
+> 你也可以 [将 MPEG-DASH 自适应流式系统与 WebM 一起使用](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification).
 
 ### HLS
 
@@ -129,13 +134,15 @@ Opus 是一个无版权的开放格式，针对不同类型文件使用不同的
 
 目前，Opus 被桌面端和移动端的 Firefox 以及桌面端的 Chrome 和 Opera 浏览器所支持。
 
-> **备注：** 对于浏览器端实现 WebRTC 功能来说，[Opus 是必须要用到的格式](https://datatracker.ietf.org/doc/html/draft-ietf-rtcweb-audio-05)。
+> [!NOTE]
+> 对于浏览器端实现 WebRTC 功能来说，[Opus 是必须要用到的格式](https://datatracker.ietf.org/doc/html/draft-ietf-rtcweb-audio-05)。
 
 ### MP3, AAC, Ogg Vorbis
 
 大部分通用的音频格式能够通过特殊的服务端技术进行传输。
 
-> **备注：** 相对于视频来说，音频没有键帧，可能更容易通过非流式格式来传输。
+> [!NOTE]
+> 相对于视频来说，音频没有键帧，可能更容易通过非流式格式来传输。
 
 ## 服务端流式技术
 
@@ -159,7 +166,8 @@ GStreamer 的插件如 [souphttpclientsink](https://gstreamer.freedesktop.org/da
 
 [Icecast](https://www.icecast.org/) 服务是一种针对流式媒体的开源技术。它由 [Xiph.org Foundation](https://www.xiph.org/) 进行维护，通过 SHOUTcast 协议来传输 Ogg Vorbis/Theora 以及 MP3 和 AAC 格式。
 
-> **备注：** SHOUTcast 和 Icecast 是最流行的已确立的技术之一，但也有 [更多流媒体系统可用](https://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers).
+> [!NOTE]
+> SHOUTcast 和 Icecast 是最流行的已确立的技术之一，但也有 [更多流媒体系统可用](https://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers).
 
 ### 流式服务
 
diff --git a/files/zh-cn/web/media/audio_and_video_manipulation/index.md b/files/zh-cn/web/media/audio_and_video_manipulation/index.md
index 66e098a4f9282b..00605ebf78f023 100644
--- a/files/zh-cn/web/media/audio_and_video_manipulation/index.md
+++ b/files/zh-cn/web/media/audio_and_video_manipulation/index.md
@@ -115,7 +115,8 @@ processor.doLoad();
 
 你还可通过在源 `<video>` 元素中采用 {{cssxref("filter-function/grayscale", "grayscale()")}} CSS 功能以达到同样的效果。
 
-> **备注：** 由于存在潜在安全问题，如果你的视频和代码处在不同域，你需要在视频服务器上启用 [CORS（跨源资源共享）](/zh-CN/docs/Web/HTTP/CORS)。
+> [!NOTE]
+> 由于存在潜在安全问题，如果你的视频和代码处在不同域，你需要在视频服务器上启用 [CORS（跨源资源共享）](/zh-CN/docs/Web/HTTP/CORS)。
 
 ### 视频与 WebGL
 
@@ -123,7 +124,8 @@ processor.doLoad();
 
 {{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample8/index.html', 670, 510) }}
 
-> **备注：** 你可在 [GitHub 上找到演示的源代码](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample8)（[查看在线演示](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample8/)）。
+> [!NOTE]
+> 你可在 [GitHub 上找到演示的源代码](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample8)（[查看在线演示](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample8/)）。
 
 ### 播放速度
 
@@ -193,7 +195,8 @@ window.addEventListener("load", setPlaybackRate);
 
 {{ EmbedLiveSample('可编辑示例', 700, 450) }}
 
-> **备注：** 尝试在线的 [playbackRate 示例](https://jsbin.com/qomuvefu/2/edit)。
+> [!NOTE]
+> 尝试在线的 [playbackRate 示例](https://jsbin.com/qomuvefu/2/edit)。
 
 ## 音频处理
 
@@ -297,7 +300,8 @@ window.addEventListener("load", setFilter);
 
 {{ EmbedLiveSample('可编辑示例_2', 700, 450) }}
 
-> **备注：** 除非你启用了 [CORS](/zh-CN/docs/Web/HTTP/CORS)，否则，为避免安全问题，你的视频应与你的代码处于同一个域中。
+> [!NOTE]
+> 除非你启用了 [CORS](/zh-CN/docs/Web/HTTP/CORS)，否则，为避免安全问题，你的视频应与你的代码处于同一个域中。
 
 #### 常用音频滤镜
 
@@ -312,7 +316,8 @@ window.addEventListener("load", setFilter);
 - 陷波（Notch）：允许所有频率的信号通过，但一组频率除外。
 - 全通（All Pass）：允许所有频率的信号通过，但改变个频率之间的相位关系。
 
-> **备注：** 参见 {{domxref("BiquadFilterNode")}} 以了解详情。
+> [!NOTE]
+> 参见 {{domxref("BiquadFilterNode")}} 以了解详情。
 
 ### 卷积和脉冲
 
@@ -350,7 +355,8 @@ source.start(0);
 context.listener.setPosition(0, 0, 0);
 ```
 
-> **备注：** 你可以在 [GitHub 仓库中找到示例](https://github.com/mdn/webaudio-examples/tree/master/panner-node)（也可以[查看在线演示](https://mdn.github.io/webaudio-examples/panner-node/)）。
+> [!NOTE]
+> 你可以在 [GitHub 仓库中找到示例](https://github.com/mdn/webaudio-examples/tree/master/panner-node)（也可以[查看在线演示](https://mdn.github.io/webaudio-examples/panner-node/)）。
 
 ### JavaScript 编解码器
 
@@ -365,7 +371,8 @@ context.listener.setPosition(0, 0, 0);
 - Opus：[Opus.js](https://github.com/audiocogs/opus.js)
 - Vorbis：[vorbis.js](https://github.com/audiocogs/vorbis.js)
 
-> **备注：** 你可以在 Audiocogs [尝试一些演示](http://audiocogs.org/codecs/)；Audiocogs 还提供了一个框架——[Aurora.js](http://audiocogs.org/codecs/)，旨在帮助你使用 JavaScript 创建自己的编解码器。
+> [!NOTE]
+> 你可以在 Audiocogs [尝试一些演示](http://audiocogs.org/codecs/)；Audiocogs 还提供了一个框架——[Aurora.js](http://audiocogs.org/codecs/)，旨在帮助你使用 JavaScript 创建自己的编解码器。
 
 ## 示例
 
diff --git a/files/zh-cn/web/media/autoplay_guide/index.md b/files/zh-cn/web/media/autoplay_guide/index.md
index 37ecff700757ad..32cf71b853db6c 100644
--- a/files/zh-cn/web/media/autoplay_guide/index.md
+++ b/files/zh-cn/web/media/autoplay_guide/index.md
@@ -45,7 +45,8 @@ audioElement.play();
 
 详情，请参阅 [Google Chrome](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) 和 [WebKit](https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/) 的自动播放政策。
 
-> **备注：** 换句话说，如果在尚无任何用户交互的页面中通过编程方式启动播放，则通常会阻止任何包含音频在内的媒体的播放。
+> [!NOTE]
+> 换句话说，如果在尚无任何用户交互的页面中通过编程方式启动播放，则通常会阻止任何包含音频在内的媒体的播放。
 
 ## 能自动播放的媒体元素
 
@@ -101,13 +102,15 @@ function handleFirstPlay(event) {
 
 此时，你的网站或应用程序可以开始执行依赖于视频启动的任何操作。
 
-> **备注：** 此方法不区分自动播放和用户手动开始播放。
+> [!NOTE]
+> 此方法不区分自动播放和用户手动开始播放。
 
 ### play() 方法
 
 术语“自动播放”还指脚本尝试在处理用户输入事件的上下文之外触发包含音频的媒体播放的场景。这是通过调用媒体元素的 {{domxref("HTMLMediaElement.play", "play()")}} 方法来完成的。
 
-> **备注：** 强烈建议你尽可能使用 `autoplay` 属性，因为 `autoplay` 属性对自动播放首选项的支持比其他自动播放媒体的方式更广泛。它还让浏览器负责开始播放，并优化播放的时间。
+> [!NOTE]
+> 强烈建议你尽可能使用 `autoplay` 属性，因为 `autoplay` 属性对自动播放首选项的支持比其他自动播放媒体的方式更广泛。它还让浏览器负责开始播放，并优化播放的时间。
 
 #### 示例：播放视频
 
@@ -159,7 +162,8 @@ if (startPlayPromise !== undefined) {
 
 你还可以指定 `'none'` 以完全禁用自动播放，`'*'` 以允许来自所有域的自动播放，或指定一个或多个可以自动播放媒体的特定来源。这些来源由空格字符分隔。
 
-> **备注：** 指定的功能策略适用于文档以及嵌套在其中的每个 {{HTMLElement("iframe")}}，除非这些框架包含为该框架以及嵌套在其中的所有框架设置新的功能策略的 [`allow`](/zh-CN/docs/Web/HTML/Element/iframe#allow)。
+> [!NOTE]
+> 指定的功能策略适用于文档以及嵌套在其中的每个 {{HTMLElement("iframe")}}，除非这些框架包含为该框架以及嵌套在其中的所有框架设置新的功能策略的 [`allow`](/zh-CN/docs/Web/HTML/Element/iframe#allow)。
 
 当使用 `<iframe>` 上的 [`allow`](/zh-CN/docs/Web/HTML/Element/iframe#allow) 属性指定该框架及其嵌套框架的功能策略时，你还可以指定值 `'src'` 以允许仅自动播放来自与该框架的 [`src`](/zh-CN/docs/Web/HTML/Element/iframe#src) 属性指定的域相同的域的媒体。
 
diff --git a/files/zh-cn/web/media/formats/image_types/index.md b/files/zh-cn/web/media/formats/image_types/index.md
index 009d6b301634c7..0a52f775ea187f 100644
--- a/files/zh-cn/web/media/formats/image_types/index.md
+++ b/files/zh-cn/web/media/formats/image_types/index.md
@@ -107,7 +107,8 @@ slug: Web/Media/Formats/Image_types
   </tbody>
 </table>
 
-> **备注：** 与 WebP 和 AVIF 等较新的格式相比，PNG、JPEG 和 GIF 等较老的格式性能较差，但却能获得更广泛的“历史”浏览器支持。较新的图像格式越来越受欢迎，因为不支持这些格式的浏览器变得越来越无关紧要（即市场份额几乎为零）。
+> [!NOTE]
+> 与 WebP 和 AVIF 等较新的格式相比，PNG、JPEG 和 GIF 等较老的格式性能较差，但却能获得更广泛的“历史”浏览器支持。较新的图像格式越来越受欢迎，因为不支持这些格式的浏览器变得越来越无关紧要（即市场份额几乎为零）。
 
 下面列出了 web 上出现的图像格式，但 web 内容应避免使用这些格式（通常是因为这些格式没有广泛的浏览器支持，或者有更好的替代格式）。
 
@@ -146,9 +147,11 @@ slug: Web/Media/Formats/Image_types
   </tbody>
 </table>
 
-> **备注：** 每种图像格式的缩写可链接到有关该格式的较长描述、其功能和详细的浏览器兼容性信息（包括哪些版本引入了支持以及后来可能引入的特定特殊功能）。
+> [!NOTE]
+> 每种图像格式的缩写可链接到有关该格式的较长描述、其功能和详细的浏览器兼容性信息（包括哪些版本引入了支持以及后来可能引入的特定特殊功能）。
 
-> **备注：** Safari 11.1 新增了使用视频格式替代 gif 动画的功能，而其他浏览器没有添加这方面的支持。详见 [Chromium bug](https://crbug.com/791658) 和 [Firefox bug](https://bugzil.la/895131) 以了解更多信息。
+> [!NOTE]
+> Safari 11.1 新增了使用视频格式替代 gif 动画的功能，而其他浏览器没有添加这方面的支持。详见 [Chromium bug](https://crbug.com/791658) 和 [Firefox bug](https://bugzil.la/895131) 以了解更多信息。
 
 ## 图像文件类型详介
 
@@ -258,7 +261,8 @@ APNG 适用于无需与其他活动或音轨同步的基本动画，如进度指
 
 AV1 图像文件格式（AVIF）是一种功能强大、开源、免版税的文件格式，它在高效图像文件格式（HEIF）容器中对 AV1 比特流进行编码。
 
-> **备注：** AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。
+> [!NOTE]
+> AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。
 
 AV1 是一种编码格式，最初设计用于在互联网上传输视频。该格式得益于近年来视频编码技术的长足进步，并有可能受益于对硬件渲染的相关支持。不过，在某些情况下它也有缺点，因为视频和图像编码有一些不同的要求。
 
@@ -351,7 +355,8 @@ Chrome、Opera、Safari 和 Firefox 支持 AVIF（Firefox 支持静态图像，
 
 **BMP**（**位图图像**）文件类型在 Windows 计算机上最为常见，一般只用于 web 应用程序和内容中的特殊情况。
 
-> **警告：** 网站内容通常应避免使用 BMP 文件。最常见的 BMP 文件格式将数据表示为未压缩的光栅图像，与 png 或 jpg 图像类型相比，文件大小较大。目前有更高效的 BMP 格式，但并未广泛使用，web 浏览器也很少支持。
+> [!WARNING]
+> 网站内容通常应避免使用 BMP 文件。最常见的 BMP 文件格式将数据表示为未压缩的光栅图像，与 png 或 jpg 图像类型相比，文件大小较大。目前有更高效的 BMP 格式，但并未广泛使用，web 浏览器也很少支持。
 
 BMP 理论上支持多种内部数据表示。最简单也是最常用的 BMP 文件形式是一种未压缩的光栅图像，每个像素占 3 个字节，分别代表其红、绿、蓝三部分，每行用 `0x00` 字节填充，宽度为 4 字节的倍数。
 
@@ -555,7 +560,8 @@ ICO（Microsoft Windows 图标）文件格式是微软为 Windows 系统的桌
 
 一个 ICO 文件可以包含多个图标，文件开头有一个目录，列出每个图标的详细信息。目录之后是图标的数据。每个图标的数据既可以是不带文件头的 [BMP](#bmp（位图文件）) 图像，也可以是完整的 [PNG](#png（便携式网络图形）) 图像（包括文件头）。如果使用 ICO 文件，则应使用 BMP 格式，因为直到 Windows Vista 才添加了对 ICO 文件内的 PNG 的支持，而且这种支持可能并不完善。
 
-> **警告：** ICO 文件*不应*用于网页内容。此外，如[为不同的使用环境提供图标](/zh-CN/docs/Web/HTML/Element/link#提供用于不同用法上下文的图标)所述，它们作为网站图标的使用已经减少，转而使用 PNG 文件和 {{HTMLElement("link")}} 元素。
+> [!WARNING]
+> ICO 文件*不应*用于网页内容。此外，如[为不同的使用环境提供图标](/zh-CN/docs/Web/HTML/Element/link#提供用于不同用法上下文的图标)所述，它们作为网站图标的使用已经减少，转而使用 PNG 文件和 {{HTMLElement("link")}} 元素。
 
 <table class="standard-table">
   <tbody>
@@ -1255,7 +1261,8 @@ WebP 目前已在主要网络浏览器的最新版本中获得广泛支持，但
   </tbody>
 </table>
 
-> **备注：** 在 macOS 版 Safari 上，WebP 支持取决于 Safari 和 macOS 的版本。你需要 Safari 14 或更高版本，以及 macOS Big Sur (11) 或更高版本。
+> [!NOTE]
+> 在 macOS 版 Safari 上，WebP 支持取决于 Safari 和 macOS 的版本。你需要 Safari 14 或更高版本，以及 macOS Big Sur (11) 或更高版本。
 
 ### XBM（X Window 系统位图文件）
 
diff --git a/files/zh-cn/web/media/formats/video_codecs/index.md b/files/zh-cn/web/media/formats/video_codecs/index.md
index 3d17c022d13152..7a0311aec99e88 100644
--- a/files/zh-cn/web/media/formats/video_codecs/index.md
+++ b/files/zh-cn/web/media/formats/video_codecs/index.md
@@ -293,7 +293,7 @@ slug: Web/Media/Formats/Video_codecs
 
 有损压缩算法会引入[**振铃效应**](https://zh.wikipedia.org/wiki/振鈴效應)，即对象外部区域被压缩算法生成的彩色像素污染的效果。当算法使用跨越对象与其背景之间的清晰边界的块时，就会发生这种情况。这在较高的压缩级别下尤其常见。
 
-[![振铃效应示例](ringing-effects.png)](ringing-effects.png)
+![振铃效应示例](ringing-effects.png)
 
 请注意上方星星边缘周围的蓝色和粉红色条纹（以及步进和其他重要的压缩伪影）。那些边缘是振铃效应。振铃效应在某些方面类似于[飞蚊噪声](#飞蚊噪声)，除了振铃效果或多或少稳定不变，而蚊子噪音闪烁和移动。
 
@@ -303,7 +303,7 @@ slug: Web/Media/Formats/Video_codecs
 
 **分色**发生在压缩导致渐变中颜色细节丢失时。图像不是通过区域中的各种颜色进行平滑过渡，而是呈现为块状的，带有接近图像原始外观的颜色斑点。
 
-[![](posterize-effect.jpg)](posterize-effect.jpg)
+![分辨率模糊的秃鹰照片。](posterize-effect.jpg)
 
 请注意上面照片中秃鹰（以及背景中的雪鸮）羽毛中颜色的块状。由于这些后化鬼影，在很大程度上丢失了羽毛的细节。
 
@@ -311,7 +311,7 @@ slug: Web/Media/Formats/Video_codecs
 
 **轮廓**或**色带**是一种特殊的分色形式，其中色块在图像中形成条带或条纹。当视频使用了低精度的量化配置进行编码时，就会发生这种情况。压缩后的视频的内容中呈现出“分层”的外观，其中不是平滑的渐变和过渡，而是从颜色到颜色的过渡是突然的，导致出现色条。
 
-[![压缩引入轮廓的图像示例](contouring-effect.jpg)](contouring-effect.jpg)
+![压缩引入轮廓的图像示例](contouring-effect.jpg)
 
 在上面的示例图像中，请注意天空如何具有不同深浅的蓝色带，而不是随着天空颜色向地平线变化而形成一致的渐变。这就是轮廓效果。
 
@@ -319,7 +319,7 @@ slug: Web/Media/Formats/Video_codecs
 
 **飞蚊噪声**是一种时间鬼影，表现为噪声或**边缘繁忙**，表现为闪烁的朦胧或闪烁，大致跟随在具有硬边缘或前景对象和背景之间的尖锐过渡的对象的边缘之外。效果在外观上可能类似于[振铃效应](#振铃效应)。
 
-![](mosquito-effect-sm.png)
+![因压缩而引入飞蚊噪声的图像示例。](mosquito-effect-sm.png)
 
 上面的照片显示了许多地方的飞蚊噪音，包括在桥梁周围的天空中。在右上角，插图显示了图像中出现蚊子噪声的部分的特写。
 
@@ -1745,7 +1745,8 @@ VP9 被浏览器广泛支持，并且编解码器的硬件实现相当普遍。V
    </video>
    ```
 
-> **备注：** 无论 {{HTMLElement("video")}} 元素中是否有任何 {{HTMLElement("source")}} 元素，{{HTMLElement("video")}} 元素都是需要闭合的 `</video>` 标签。
+> [!NOTE]
+> 无论 {{HTMLElement("video")}} 元素中是否有任何 {{HTMLElement("source")}} 元素，{{HTMLElement("video")}} 元素都是需要闭合的 `</video>` 标签。
 
 ### 高质量视频演示的建议
 
diff --git a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
index 158e0877c3730e..1543c23bd55ab2 100644
--- a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
+++ b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
@@ -20,7 +20,8 @@ CSS 中的 transition 和 animation 都可以用于编写动画，它们都有
 
 {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} 提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的 {{domxref("setTimeout()")}} 或 {{domxref("setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。
 
-> **备注：** 像 CSS transitions 和 animations 一样，当页面在后台运行时，`requestAnimationFrame()` 会暂停。
+> [!NOTE]
+> 像 CSS transitions 和 animations 一样，当页面在后台运行时，`requestAnimationFrame()` 会暂停。
 
 更多细节请阅读 [animating with JavaScript from setinterval to requestAnimationFrame](https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/).
 
@@ -175,7 +176,8 @@ function animate(time) {
 
 激活之后，再次运行上面的例子。可以看到 CSS 动画的帧速率现在高多了。
 
-> **备注：** 在 Nightly 和 Developer 版本，你可能看到 OMTA 是默认激活的，所以你需要反过来测试（先测试激活 OMTA 的情况，然后是没有激活的情况）。
+> [!NOTE]
+> 在 Nightly 和 Developer 版本，你可能看到 OMTA 是默认激活的，所以你需要反过来测试（先测试激活 OMTA 的情况，然后是没有激活的情况）。
 
 ## 总结
 
diff --git a/files/zh-cn/web/performance/dns-prefetch/index.md b/files/zh-cn/web/performance/dns-prefetch/index.md
index 4e36e573c680ae..a484e3e056a5c5 100644
--- a/files/zh-cn/web/performance/dns-prefetch/index.md
+++ b/files/zh-cn/web/performance/dns-prefetch/index.md
@@ -56,7 +56,8 @@ Link: <https://fonts.googleapis.com/>; rel=dns-prefetch
 <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
 ```
 
-> **备注：** 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。`preconnect` 提示最好仅用于最关键的连接。对于其他的连接，只需使用 `<link rel="dns-prefetch">` 即可节省第一步——DNS 查询——的时间。
+> [!NOTE]
+> 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。`preconnect` 提示最好仅用于最关键的连接。对于其他的连接，只需使用 `<link rel="dns-prefetch">` 即可节省第一步——DNS 查询——的时间。
 
 配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到 dns-prefetch 来获得更多好处。由于这是 HTML 特性，因此容错性很强。如果不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），则网站不会中断，只是不会获得它提供的好处。
 
diff --git a/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md b/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md
index bfcd13c801dc0f..54ed519aec91ba 100644
--- a/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md
+++ b/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md
@@ -32,7 +32,8 @@ l10n:
 Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
 ```
 
-> **备注：** 分区 cookie 必须与 `Secure` 一同设置。此外，建议在设置分区 cookie 时使用 `__Host` 前缀，以将它们绑定到主机名而不是可注册的域名。
+> [!NOTE]
+> 分区 cookie 必须与 `Secure` 一同设置。此外，建议在设置分区 cookie 时使用 `__Host` 前缀，以将它们绑定到主机名而不是可注册的域名。
 
 如果设置了 `Partitioned`，cookie 将使用两个键进行存储，即主机键和一个新的**分区键**。分区键基于向设置 cookie 的 URL 端点发出请求时浏览器访问的顶级 URL 的方案（scheme）和 {{Glossary("eTLD", "eTLD +1")}}。
 
@@ -42,7 +43,8 @@ Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
 2. 存储 cookie 的键现在为 `{("https://site-a.example"), ("3rd-party.example")}`。
 3. 当用户访问 `https://site-b.example`，该站点也嵌入了 `https://3rd-party.example`，因为分区键不一致，所以新嵌入的实例不再能够访问前一页面设置的 cookie。
 
-> **备注：** CHIPS 类似于 Firefox 实现的[状态分区机制](/zh-CN/docs/Web/Privacy/State_Partitioning)。不同之处在于，状态分区将 cookie 存储和检索分区到每个顶级站点的单独的 cookie 存储空间中，而没有在需要时可以选择启用第三方 cookie 的机制。随着浏览器开始逐步淘汰第三方 cookie 的使用，当开发人员开始处理此更改时，仍然需要允许第三方 cookie 的有效和非跟踪的使用。
+> [!NOTE]
+> CHIPS 类似于 Firefox 实现的[状态分区机制](/zh-CN/docs/Web/Privacy/State_Partitioning)。不同之处在于，状态分区将 cookie 存储和检索分区到每个顶级站点的单独的 cookie 存储空间中，而没有在需要时可以选择启用第三方 cookie 的机制。随着浏览器开始逐步淘汰第三方 cookie 的使用，当开发人员开始处理此更改时，仍然需要允许第三方 cookie 的有效和非跟踪的使用。
 
 ## 有效的第三方嵌入场景
 
diff --git a/files/zh-cn/web/progressive_web_apps/guides/caching/index.md b/files/zh-cn/web/progressive_web_apps/guides/caching/index.md
index 1b8f59424d4dec..2fb2969e077ced 100644
--- a/files/zh-cn/web/progressive_web_apps/guides/caching/index.md
+++ b/files/zh-cn/web/progressive_web_apps/guides/caching/index.md
@@ -46,7 +46,8 @@ PWA 可以在任何时候缓存资源，但在实践中，大多数 PWA 选择
 
 - **在 service worker 的 `install` 事件处理程序中（预缓存）**：当 service worker 被安装时，浏览器会在 service worker 的全局作用域中触发一个名为 {{domxref("ServiceWorkerGlobalScope.install_event", "install")}} 的事件。此时，service worker 可以*预缓存*资源，从网络获取它们并将它们存储在缓存中。
 
-  > **备注：** service worker 的安装时间与 PWA 的安装时间不同。一个 service worker 的 `install` 事件会在 service worker 被下载和执行后立即触发，这通常会发生在用户首次访问你的网站时。
+  > [!NOTE]
+  > service worker 的安装时间与 PWA 的安装时间不同。一个 service worker 的 `install` 事件会在 service worker 被下载和执行后立即触发，这通常会发生在用户首次访问你的网站时。
   >
   > 即使用户从未将你的网站安装为 PWA，其 service worker 也会被安装和激活。
 
diff --git a/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md b/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md
index f7f7d3cc6e7be5..0336d8f4f67905 100644
--- a/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md
+++ b/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md
@@ -116,7 +116,8 @@ self.addEventListener("fetch", (event) => {
 
 这意味着在许多情况下，即使网络连接不稳定，Web 应用程序也能正常运行。从主应用程序代码的角度来看，这完全是透明的：应用程序只需发出网络请求并获取响应。此外，由于 service worker 在单独的线程中运行，主应用程序代码可以保持对用户输入的响应，同时获取和缓存资源。
 
-> **备注：** 这里描述的策略只是 service worker 实现缓存的一种方式。具体来说，在缓存优先策略中，我们先从缓存中查找响应，然后再尝试从网络中获取，这意味着我们更有可能返回一个快速的响应而无需承担网络成本，但也更有可能返回一个过期的响应。
+> [!NOTE]
+> 这里描述的策略只是 service worker 实现缓存的一种方式。具体来说，在缓存优先策略中，我们先从缓存中查找响应，然后再尝试从网络中获取，这意味着我们更有可能返回一个快速的响应而无需承担网络成本，但也更有可能返回一个过期的响应。
 >
 > 另一种策略是*网络优先*策略，即首先尝试从服务器获取资源，如果设备离线，则回退到缓存。
 >
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md
index ee9503dc41147f..7986b33d0df97a 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md
@@ -21,7 +21,8 @@ Service worker 以及 PWA，都[被限制在安全上下文中](/zh-CN/docs/Web/
 
 我们正在使用 `file://` 协议查看我们的页面。这适用于我们代码库的当前状态，并且在我们[添加 JavaScript 功能](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality)之后将继续适用。然而，就像许多其他 API 一样，清单文件和 service worker（都是 PWA 的要求）需要安全连接。PWA 需要通过基于 `https` 的 web 服务器或使用 `localhost`、`127.0.0.1`（无论是否带有端口号）的本地开发环境来提供。如果我们使用 `files://` 协议查看我们完成的应用，我们的[清单文件](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file)将被忽略，任何我们添加的 [service worker](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) 都将失败。
 
-> **备注：** 通过 `https` 提供你的应用不仅对 PWA 有益，而且对所有网站有益，因为它确保了在你的 web 服务器和用户的浏览器之间传输的信息是端到端加密的。许多 [Web API 需要安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts)。即使你没有创建可安装的 PWA，当你向任何 web 应用添加特性时，你都可能会遇到需要安全上下文的情况。
+> [!NOTE]
+> 通过 `https` 提供你的应用不仅对 PWA 有益，而且对所有网站有益，因为它确保了在你的 web 服务器和用户的浏览器之间传输的信息是端到端加密的。许多 [Web API 需要安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts)。即使你没有创建可安装的 PWA，当你向任何 web 应用添加特性时，你都可能会遇到需要安全上下文的情况。
 
 我们需要一个本地开发环境来完成教程。[使 PWA 可安装](/zh-CN/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)的一部分是安全服务器。文件需要在 web 上通过安全连接提供，以获取 PWA 提供的好处，并将我们的应用程序作为 PWA 分发。
 
@@ -63,7 +64,8 @@ ws --https
 
 在上面的命令中，你可能需要在 install 前加上 `sudo`。
 
-> **备注：** 如果你正在追求隐私，请意识到你正在自己构建此 PWA，它可以从自己的开发环境中安装在自己的机器上，而无需访问互联网。这个应用程序没有跟踪。这是一个尽可能私密的应用程序。
+> [!NOTE]
+> 如果你正在追求隐私，请意识到你正在自己构建此 PWA，它可以从自己的开发环境中安装在自己的机器上，而无需访问互联网。这个应用程序没有跟踪。这是一个尽可能私密的应用程序。
 
 ## 安全的外部服务器
 
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
index e1f94952bc27d1..a85d5889a61ac0 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
@@ -30,7 +30,8 @@ slug: Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
 <link rel="manifest" href="js13kpwa.webmanifest" />
 ```
 
-> **备注：** 这类清单文件有一些曾经常被使用的扩展名：`manifest.webapp` 在 Firefox OS 应用清单中很流行，而许多人使用 `manifest.json` 作为网页清单（因为内容是 JSON 格式的）。但是，`.webmanifest` 扩展名是在 [W3C 清单规范](https://w3c.github.io/manifest/)中显式指定的，所以这里我们使用这个扩展名。
+> [!NOTE]
+> 这类清单文件有一些曾经常被使用的扩展名：`manifest.webapp` 在 Firefox OS 应用清单中很流行，而许多人使用 `manifest.json` 作为网页清单（因为内容是 JSON 格式的）。但是，`.webmanifest` 扩展名是在 [W3C 清单规范](https://w3c.github.io/manifest/)中显式指定的，所以这里我们使用这个扩展名。
 
 文件的内容是这个样子的：
 
diff --git a/files/zh-cn/web/security/practical_implementation_guides/index.md b/files/zh-cn/web/security/practical_implementation_guides/index.md
index 05e68968c69b21..95efef637237a5 100644
--- a/files/zh-cn/web/security/practical_implementation_guides/index.md
+++ b/files/zh-cn/web/security/practical_implementation_guides/index.md
@@ -5,7 +5,8 @@ slug: Web/Security/Practical_implementation_guides
 
 你可以采取一些措施来确保你的网站安全。本文提供了各种建议，以及提供更多有用信息的其他文章的链接。
 
-> **备注：** 本篇文章仍未撰写完毕，遵循它的指引不一定能保证你的站点完全安全。
+> [!NOTE]
+> 本篇文章仍未撰写完毕，遵循它的指引不一定能保证你的站点完全安全。
 
 ## 用户信息安全
 
diff --git a/files/zh-cn/web/security/same-origin_policy/index.md b/files/zh-cn/web/security/same-origin_policy/index.md
index 1af5638b099388..2e3cba947e3c8c 100644
--- a/files/zh-cn/web/security/same-origin_policy/index.md
+++ b/files/zh-cn/web/security/same-origin_policy/index.md
@@ -39,7 +39,8 @@ slug: Web/Security/Same-origin_policy
 
 ## 源的更改
 
-> **警告：** 这里描述的方法（使用 {{domxref("document.domain")}} setter）已被弃用，因为它破坏了同源策略所提供的安全保护，并使浏览器中的源模型复杂化，导致互操作性问题和安全漏洞。
+> [!WARNING]
+> 这里描述的方法（使用 {{domxref("document.domain")}} setter）已被弃用，因为它破坏了同源策略所提供的安全保护，并使浏览器中的源模型复杂化，导致互操作性问题和安全漏洞。
 
 满足某些限制条件的情况下，页面是可以修改它的源。脚本可以将 {{domxref("document.domain")}} 的值设置为其当前域或其当前域的父域。如果将其设置为其当前域的父域，则这个较短的父域将用于后续源检查。
 
@@ -55,7 +56,8 @@ document.domain = "company.com";
 
 该机制有一些局限性。如果启用了 [`document-domain`](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy/document-domain) [`Permissions-Policy`](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy)，或该文档在沙箱 [`<iframe>`](/zh-CN/docs/Web/HTML/Element/iframe) 下，它将抛出一个“`SecurityError`” [`DOMException`](/zh-CN/docs/Web/API/DOMException)，并且用这种方法改变源并不影响 Web API 使用的源检查（例如 [`localStorage`](/zh-CN/docs/Web/API/Window/localStorage)、[`indexedDB`](/zh-CN/docs/Web/API/IndexedDB_API)、[`BroadcastChannel`](/zh-CN/docs/Web/API/BroadcastChannel)、[`SharedWorker`](/zh-CN/docs/Web/API/SharedWorker)）。更详尽的失败案例列表可以在 [Document.domain 的错误章节](/zh-CN/docs/Web/API/Document/domain#异常)找到。
 
-> **备注：** 使用 `document.domain` 来允许子域安全访问其父域时，需要在父域和子域中设置 `document.domain` 为*相同*的值。这是必要的，即使这样做只是将父域设置回其原始值。不这样做可能会导致权限错误。
+> [!NOTE]
+> 使用 `document.domain` 来允许子域安全访问其父域时，需要在父域和子域中设置 `document.domain` 为*相同*的值。这是必要的，即使这样做只是将父域设置回其原始值。不这样做可能会导致权限错误。
 
 ## 跨源网络访问
 
diff --git a/files/zh-cn/web/security/secure_contexts/index.md b/files/zh-cn/web/security/secure_contexts/index.md
index b94b31c96830ef..752e4d47d92d0e 100644
--- a/files/zh-cn/web/security/secure_contexts/index.md
+++ b/files/zh-cn/web/security/secure_contexts/index.md
@@ -25,7 +25,8 @@ slug: Web/Security/Secure_Contexts
 
 本地传递的资源，如那些带有 `http://127.0.0.1`、`http://localhost` 和 `http://*.localhost` 网址（如 `http://dev.whatever.localhost/`）和 `file://` 网址的资源也是认为经过安全传递的。
 
-> **备注：** Firefox 84 及更新的版本支持 `http://localhost` 和 `http://*.localhost` URL 作为信任的源，而早期版本不支持这样做，因为还没有保证 `localhost` 映射到本地或回环地址上。
+> [!NOTE]
+> Firefox 84 及更新的版本支持 `http://localhost` 和 `http://*.localhost` URL 作为信任的源，而早期版本不支持这样做，因为还没有保证 `localhost` 映射到本地或回环地址上。
 
 非本地资源要被认为是安全的，必须满足以下标准：
 
diff --git a/files/zh-cn/web/security/subresource_integrity/index.md b/files/zh-cn/web/security/subresource_integrity/index.md
index 5da033f1e5fb75..582d1f24a9c714 100644
--- a/files/zh-cn/web/security/subresource_integrity/index.md
+++ b/files/zh-cn/web/security/subresource_integrity/index.md
@@ -7,7 +7,8 @@ slug: Web/Security/Subresource_Integrity
 
 **子资源完整性**（Subresource Integrity，SRI）是允许浏览器检查其获得的资源（例如从 [CDN](/zh-CN/docs/Glossary/CDN) 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。
 
-> **备注：** 对于从嵌入文件以外的来源提供的资源的子资源完整性验证，浏览器还使用[跨源资源共享（CORS）](/zh-CN/docs/Web/HTTP/CORS)检查资源，以确保提供资源的来源允许它与请求来源共享。
+> [!NOTE]
+> 对于从嵌入文件以外的来源提供的资源的子资源完整性验证，浏览器还使用[跨源资源共享（CORS）](/zh-CN/docs/Web/HTTP/CORS)检查资源，以确保提供资源的来源允许它与请求来源共享。
 
 ## SRI 如何工作
 
@@ -31,7 +32,8 @@ sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
 
 `oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC` 即“哈希”部分，`sha384` 前缀说明使用的是 sha384 哈希方法。
 
-> **备注：** 严格来说，`integrity` 值的“哈希”部分是通过对一些输入（例如，一个脚本或样式表文件）应用一个特定的哈希函数而形成的**加密摘要**。但人们通常用“哈希”来表示**加密摘要**，所以本文就用了这个词。
+> [!NOTE]
+> 严格来说，`integrity` 值的“哈希”部分是通过对一些输入（例如，一个脚本或样式表文件）应用一个特定的哈希函数而形成的**加密摘要**。但人们通常用“哈希”来表示**加密摘要**，所以本文就用了这个词。
 
 ### 生成 SRI 哈希的工具
 
@@ -96,7 +98,8 @@ Access-Control-Allow-Origin: *
   crossorigin="anonymous"></script>
 ```
 
-> **备注：** 有关 `crossorigin` 属性的更多信息，见 [CORS 设置属性](/zh-CN/docs/Web/HTML/Attributes/crossorigin)。
+> [!NOTE]
+> 有关 `crossorigin` 属性的更多信息，见 [CORS 设置属性](/zh-CN/docs/Web/HTML/Attributes/crossorigin)。
 
 ## 浏览器如何处理 SRI
 
diff --git a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
index 716e02f2234db6..2e3f69ba3a5004 100644
--- a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
@@ -9,7 +9,8 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 
 你可以在同一文件中使用 SVG 样式，也可以通过外部样式表引入。有三个属性可以使用： [`mask`](/zh-CN/docs/Web/CSS/mask), [`clip-path`](/zh-CN/docs/Web/CSS/clip-path), 和 `filter`。
 
-> **备注：** 在外部文件引入的 SVG 必须与原始文件 [同源](/zh-CN/docs/Web/Security/Same-origin_policy) 。
+> [!NOTE]
+> 在外部文件引入的 SVG 必须与原始文件 [同源](/zh-CN/docs/Web/Security/Same-origin_policy) 。
 
 ## 使用内嵌 SVG
 
diff --git a/files/zh-cn/web/svg/attribute/d/index.md b/files/zh-cn/web/svg/attribute/d/index.md
index 9b8a9f3dbea121..b3cf377c825cb2 100644
--- a/files/zh-cn/web/svg/attribute/d/index.md
+++ b/files/zh-cn/web/svg/attribute/d/index.md
@@ -65,7 +65,8 @@ svg {
 
 ## glyph
 
-> **警告：** 自 SVG2 起，{{SVGElement('glyph')}} 已被弃用，不应该继续使用。
+> [!WARNING]
+> 自 SVG2 起，{{SVGElement('glyph')}} 已被弃用，不应该继续使用。
 
 对于 {{SVGElement('glyph')}}，`d` 是一个包含一组路径命令的字符串，用于定义字形（glyph）的轮廓形状。
 
@@ -88,11 +89,13 @@ svg {
   </tbody>
 </table>
 
-> **备注：** 原点（坐标 `0`,`0`）通常是上下文的*左上角*。但 {{SVGElement("glyph")}} 元素的原点是其字形框的*左下角*。
+> [!NOTE]
+> 原点（坐标 `0`,`0`）通常是上下文的*左上角*。但 {{SVGElement("glyph")}} 元素的原点是其字形框的*左下角*。
 
 ## missing-glyph
 
-> **警告：** 自 SVG2 起，{{SVGElement('missing-glyph')}} 已被弃用，不应该继续使用。
+> [!WARNING]
+> 自 SVG2 起，{{SVGElement('missing-glyph')}} 已被弃用，不应该继续使用。
 
 对于 {{SVGElement('missing-glyph')}}，`d` 是一个包含一组路径命令的字符串，用于定义字形（glyph）的轮廓形状。
 
@@ -165,7 +168,8 @@ SVG 定义了六种路径命令类型，一共 20 条命令：
 - [椭圆曲线](#椭圆曲线)：`A`、`a`
 - [ClosePath](#closepath)：`Z`、`z`
 
-> **备注：** 命令是*大小写敏感*的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。
+> [!NOTE]
+> 命令是*大小写敏感*的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。
 
 始终可以将负值作为命令的参数：
 
@@ -1024,7 +1028,8 @@ _ClosePath_ 命令将从*当前位置*绘制一条直线到路径中的第一个
   </tbody>
 </table>
 
-> **备注：** 使用 _ClosePath_ 命令闭合的形状的外观可能与使用其他命令向起始点绘制一条线而闭合的形状不同，因为前者是将线条的末端连接在一起（根据 {{SVGAttr('stroke-linejoin')}} 的设置），而不是仅仅绘制到坐标点上。
+> [!NOTE]
+> 使用 _ClosePath_ 命令闭合的形状的外观可能与使用其他命令向起始点绘制一条线而闭合的形状不同，因为前者是将线条的末端连接在一起（根据 {{SVGAttr('stroke-linejoin')}} 的设置），而不是仅仅绘制到坐标点上。
 
 #### 示例
 
diff --git a/files/zh-cn/web/svg/attribute/display/index.md b/files/zh-cn/web/svg/attribute/display/index.md
index c894aadb5827fd..6e39126e3f2f0f 100644
--- a/files/zh-cn/web/svg/attribute/display/index.md
+++ b/files/zh-cn/web/svg/attribute/display/index.md
@@ -21,7 +21,8 @@ slug: Web/SVG/Attribute/display
 
 这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把 {{SVGElement("mask")}} 元素的一个子元素设为 `display="none"` 将会阻止 {{SVGElement("clipPath")}} 的子元素参与到路径剪裁中。
 
-> **备注：** As a presentation attribute, `display` can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.
+> [!NOTE]
+> As a presentation attribute, `display` can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.
 
 As a presentation attribute, it can be applied to any element.
 
diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.md b/files/zh-cn/web/svg/attribute/fill-rule/index.md
index 84facdac874844..f8cb6f758b5bfc 100644
--- a/files/zh-cn/web/svg/attribute/fill-rule/index.md
+++ b/files/zh-cn/web/svg/attribute/fill-rule/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Attribute/fill-rule
 
 **`fill-rule`** 是一个表现属性，它定义了用来确定一个多边形内部区域的算法。
 
-> **备注：** 作为一个表现属性，fill-rule 可以被用于 CSS。
+> [!NOTE]
+> 作为一个表现属性，fill-rule 可以被用于 CSS。
 
 作为一个表现属性，它可以被应用于任何元素，但只会在以下元素中有效：
 
diff --git a/files/zh-cn/web/svg/attribute/id/index.md b/files/zh-cn/web/svg/attribute/id/index.md
index b3a2155cc3da01..a7e344a5d29238 100644
--- a/files/zh-cn/web/svg/attribute/id/index.md
+++ b/files/zh-cn/web/svg/attribute/id/index.md
@@ -43,7 +43,8 @@ slug: Web/SVG/Attribute/id
 
   - : 指定元素的 ID。该 ID 在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。
 
-    > **备注：** 应当避免使用会被解析为 SVG 视图规范的 `id` 值（如 `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`），或被解析为用作 URL 目标片段的基本媒体片段的 `id` 值。
+    > [!NOTE]
+    > 应当避免使用会被解析为 SVG 视图规范的 `id` 值（如 `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`），或被解析为用作 URL 目标片段的基本媒体片段的 `id` 值。
 
     该属性取值必须在 XML 文档中有效。独立的 SVG 文档使用 XML 1.0 语法，该语法指定有效的 ID 仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。
 
diff --git a/files/zh-cn/web/svg/attribute/image-rendering/index.md b/files/zh-cn/web/svg/attribute/image-rendering/index.md
index 099bd43e04307d..6acba4b837a8ee 100644
--- a/files/zh-cn/web/svg/attribute/image-rendering/index.md
+++ b/files/zh-cn/web/svg/attribute/image-rendering/index.md
@@ -11,7 +11,8 @@ l10n:
 
 即使原始数据和/或目标设备是索引颜色的，也总是在真彩色（例如，24 位）颜色空间中进行重新采样。
 
-> **备注：** 作为一个表现属性，`image-rendering` 可以用作 CSS 属性。请参考 {{cssxref("image-rendering", "CSS image-rendering")}}，以获取更多的信息。
+> [!NOTE]
+> 作为一个表现属性，`image-rendering` 可以用作 CSS 属性。请参考 {{cssxref("image-rendering", "CSS image-rendering")}}，以获取更多的信息。
 
 你可以和下面的 SVG 元素一起使用该属性：
 
diff --git a/files/zh-cn/web/svg/attribute/in/index.md b/files/zh-cn/web/svg/attribute/in/index.md
index 8970b8cc3242a7..8bd20b93e3e2a9 100644
--- a/files/zh-cn/web/svg/attribute/in/index.md
+++ b/files/zh-cn/web/svg/attribute/in/index.md
@@ -75,7 +75,8 @@ l10n:
 
 在现代浏览器中，`BackgroundImage` 不支持作为滤镜源（请参见 [feComposite 兼容性表](/zh-CN/docs/Web/SVG/Element/feComposite#浏览器兼容性)）。因此，我们需要在滤镜内部使用 `<feImage>` 元素导入一个图像进行混合。
 
-> **备注：** Firefox [Bug 455986](https://bugzil.la/455986) 表明了 `feImage` 无法加载图像的一部分（包括在文档中定义的圆圈、矩形、路径或其他片段）。因此，为了使此示例在更多浏览器上工作，我们加载了完整的外部标志图像。
+> [!NOTE]
+> Firefox [Bug 455986](https://bugzil.la/455986) 表明了 `feImage` 无法加载图像的一部分（包括在文档中定义的圆圈、矩形、路径或其他片段）。因此，为了使此示例在更多浏览器上工作，我们加载了完整的外部标志图像。
 
 ### HTML
 
diff --git a/files/zh-cn/web/svg/attribute/index.md b/files/zh-cn/web/svg/attribute/index.md
index 5d07d84dccb7dd..8ba5b91aa1b2a1 100644
--- a/files/zh-cn/web/svg/attribute/index.md
+++ b/files/zh-cn/web/svg/attribute/index.md
@@ -370,7 +370,8 @@ SVG 元素可以通过属性来修改，这些属性指定有关如何处理或
 
 ### 表现属性
 
-> **备注：** 所有 SVG 表现属性都可以作为 CSS 属性来使用。
+> [!NOTE]
+> 所有 SVG 表现属性都可以作为 CSS 属性来使用。
 
 - {{SVGAttr("alignment-baseline")}}
 - {{SVGAttr("baseline-shift")}}
diff --git a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
index 1865bd1f3be5e0..66ceb0e692506e 100644
--- a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Attribute/stroke-linejoin
 
 **`stroke-linejoin`** 属性指明路径的转角处使用的形状或者绘制的基础形状。
 
-> **备注：** 作为表现属性，`stroke-linejoin` 能被用做 CSS 属性。
+> [!NOTE]
+> 作为表现属性，`stroke-linejoin` 能被用做 CSS 属性。
 
 作为表现属性，该属性能被应用到任何元素，但只对以下元素有效：
 
@@ -200,7 +201,8 @@ svg {
 
 The `miter` 用尖角连接路径段。通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。
 
-> **备注：** 如果超出了{{SVGAttr('stroke-miterlimit')}}，则会退回到 `bevel`。
+> [!NOTE]
+> 如果超出了{{SVGAttr('stroke-miterlimit')}}，则会退回到 `bevel`。
 
 #### 示例
 
diff --git a/files/zh-cn/web/svg/attribute/target/index.md b/files/zh-cn/web/svg/attribute/target/index.md
index 4ceb4f8665dba6..79c36d92127737 100644
--- a/files/zh-cn/web/svg/attribute/target/index.md
+++ b/files/zh-cn/web/svg/attribute/target/index.md
@@ -55,7 +55,8 @@ text {
 
   - : 当前 SVG 图像被与当前 SVG 图像在同一帧中相同矩形区域中的链接内容替换。
 
-    > **备注：** 这个值是从来没有很好的执行，之间的区别 `_replace`，并 `_self` 已通过在浏览上下文的 HTML 定义的变化变得多余。使用 `_self` 以取代目前的 SVG 文件。
+    > [!NOTE]
+    > 这个值是从来没有很好的执行，之间的区别 `_replace`，并 `_self` 已通过在浏览上下文的 HTML 定义的变化变得多余。使用 `_self` 以取代目前的 SVG 文件。
 
 - `_self`
   - : 在与当前 SVG 图像相同的浏览上下文中，当前 SVG 图像被链接的内容替换。
diff --git a/files/zh-cn/web/svg/attribute/transform/index.md b/files/zh-cn/web/svg/attribute/transform/index.md
index 04cf71e4ce43aa..90274610a2b4a8 100644
--- a/files/zh-cn/web/svg/attribute/transform/index.md
+++ b/files/zh-cn/web/svg/attribute/transform/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`transform`** 属性定义应用于元素及其子元素的变换规则列表。
 
-> **备注：** 从 SVG2 开始，`transform` 为表现属性，这意味着它可以用作 CSS 属性。但是，请注意 CSS 属性和该属性的语法存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS {{cssxref('transform')}} 属性的文档。
+> [!NOTE]
+> 从 SVG2 开始，`transform` 为表现属性，这意味着它可以用作 CSS 属性。但是，请注意 CSS 属性和该属性的语法存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS {{cssxref('transform')}} 属性的文档。
 
 你可以在任何 SVG 元素上使用此属性。
 
@@ -76,7 +77,8 @@ svg {
 
 `transform` 属性的 `<transform-list>` 可以使用以下所有的变换函数
 
-> **警告：** 根据规范，你还应该能够使用 CSS [变换函数](/zh-CN/docs/Web/CSS/transform-function)。但是，这不能保证兼容性。
+> [!WARNING]
+> 根据规范，你还应该能够使用 CSS [变换函数](/zh-CN/docs/Web/CSS/transform-function)。但是，这不能保证兼容性。
 
 ### 矩阵
 
diff --git a/files/zh-cn/web/svg/attribute/visibility/index.md b/files/zh-cn/web/svg/attribute/visibility/index.md
index 394cdc9707afda..1dcb6586cb7407 100644
--- a/files/zh-cn/web/svg/attribute/visibility/index.md
+++ b/files/zh-cn/web/svg/attribute/visibility/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Attribute/visibility
 
 `visibility`属性让你能够控制一个图形元素的可见性。用了值`hidden`或者值`collapse`，当前的图形元素将不可见。
 
-> **备注：** 如果 {{ SVGElement("tspan") }} 或 {{ SVGElement("tref") }} 元素上的 `visibility` 属性设置为 `hidden`，则文本变得不可见，但是依然占用文本布局计算的空间。
+> [!NOTE]
+> 如果 {{ SVGElement("tspan") }} 或 {{ SVGElement("tref") }} 元素上的 `visibility` 属性设置为 `hidden`，则文本变得不可见，但是依然占用文本布局计算的空间。
 
 根据属性 {{ SVGAttr("pointer-events") }} 的值，图形元素如果属性 `visibility` 值设置为 `hidden`，依然能够响应事件。
 
diff --git a/files/zh-cn/web/svg/attribute/width/index.md b/files/zh-cn/web/svg/attribute/width/index.md
index 9d289dafed63e3..cee87fb9e02841 100644
--- a/files/zh-cn/web/svg/attribute/width/index.md
+++ b/files/zh-cn/web/svg/attribute/width/index.md
@@ -92,7 +92,8 @@ svg {
 
 > **备注：** `width` 对 `use` 元素没有影响，除非引用的元素具有 [viewBox](/zh-CN/docs/Web/SVG/Attribute/viewBox)。例如，该属性仅在 `use` 引用的元素是 `svg` 或 `symbol` 元素时才有意义。
 
-> **备注：** 从 SVG2 开始，`width` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。
+> [!NOTE]
+> 从 SVG2 开始，`width` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/attribute/x/index.md b/files/zh-cn/web/svg/attribute/x/index.md
index 968ea9b062c6fe..1ac61db9f6d8b2 100644
--- a/files/zh-cn/web/svg/attribute/x/index.md
+++ b/files/zh-cn/web/svg/attribute/x/index.md
@@ -101,7 +101,8 @@ svg {
   </tbody>
 </table>
 
-> **备注：** 从 SVG2 开始，`x` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。
+> [!NOTE]
+> 从 SVG2 开始，`x` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/attribute/y/index.md b/files/zh-cn/web/svg/attribute/y/index.md
index 46de0be3f04c39..f46b5dbda29682 100644
--- a/files/zh-cn/web/svg/attribute/y/index.md
+++ b/files/zh-cn/web/svg/attribute/y/index.md
@@ -101,7 +101,8 @@ For {{SVGElement('use')}}, `y` defines the y coordinate of the upper left corner
   </tbody>
 </table>
 
-> **备注：** 从 SVG2 开始，`y` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。
+> [!NOTE]
+> 从 SVG2 开始，`y` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/element/animatemotion/index.md b/files/zh-cn/web/svg/element/animatemotion/index.md
index d86e591cc0fea6..5af1e11a24c83b 100644
--- a/files/zh-cn/web/svg/element/animatemotion/index.md
+++ b/files/zh-cn/web/svg/element/animatemotion/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Element/animateMotion
 
 `<animateMotion>` 元素定义了一个元素如何沿着运动路径进行移动。
 
-> **备注：** 为了复用一个已经定义的路径，就有必要使用一个 {{SVGElement("mpath")}} 元素嵌入到 `<animateMotion>` 中，而不是使用 {{SVGAttr("path")}}。
+> [!NOTE]
+> 为了复用一个已经定义的路径，就有必要使用一个 {{SVGElement("mpath")}} 元素嵌入到 `<animateMotion>` 中，而不是使用 {{SVGAttr("path")}}。
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/element/cursor/index.md b/files/zh-cn/web/svg/element/cursor/index.md
index 304b386add29bf..7470e563483505 100644
--- a/files/zh-cn/web/svg/element/cursor/index.md
+++ b/files/zh-cn/web/svg/element/cursor/index.md
@@ -5,7 +5,8 @@ slug: Web/SVG/Element/cursor
 
 {{SVGRef}}{{Deprecated_Header}}
 
-> **备注：** 尽量使用 CSS 中的 {{cssxref("cursor")}} 属性来替换该属性。
+> [!NOTE]
+> 尽量使用 CSS 中的 {{cssxref("cursor")}} 属性来替换该属性。
 
 `cursor`元素可以用来定义独立于平台的自定义指针。要想定义独立于平台的指针，建议先创建一个 PNG 图象，然后定义一个引用该 PNG 图像的`cursor`元素，并在图像内部标识指针头（亦即，热点）的精确位置。
 
diff --git a/files/zh-cn/web/svg/element/fedropshadow/index.md b/files/zh-cn/web/svg/element/fedropshadow/index.md
index 85ce1b3a59da4f..d2132d02d49e2d 100644
--- a/files/zh-cn/web/svg/element/fedropshadow/index.md
+++ b/files/zh-cn/web/svg/element/fedropshadow/index.md
@@ -7,7 +7,8 @@ slug: Web/SVG/Element/feDropShadow
 
 SVG **`<feDropShadow>`** 原语创建输入图像的阴影。它只能在 {{SVGElement('filter')}} 元素内使用
 
-> **备注：** 可以使用 {{SVGAttr('flood-color')}} 和 {{SVGAttr('flood-opacity')}} 表现属性来改变阴影的颜色和不透明度。
+> [!NOTE]
+> 可以使用 {{SVGAttr('flood-color')}} 和 {{SVGAttr('flood-opacity')}} 表现属性来改变阴影的颜色和不透明度。
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/element/foreignobject/index.md b/files/zh-cn/web/svg/element/foreignobject/index.md
index b70fb281af3cc9..c2578e227bae46 100644
--- a/files/zh-cn/web/svg/element/foreignobject/index.md
+++ b/files/zh-cn/web/svg/element/foreignobject/index.md
@@ -66,7 +66,8 @@ svg {
   - : 设置 foreignObject 的 y 坐标。
     值得类型：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/zh-CN/docs/Web/SVG/Content_type#Percentage) ; _默认值_: `0`; _是否可设置动画_: **yes**
 
-> **备注：** 从 SVG2 开始，x、y、宽度和高度都是几何属性，这意味着这些属性也可以用作该元素的 CSS 属性。
+> [!NOTE]
+> 从 SVG2 开始，x、y、宽度和高度都是几何属性，这意味着这些属性也可以用作该元素的 CSS 属性。
 
 ## 用法
 
diff --git a/files/zh-cn/web/svg/element/image/index.md b/files/zh-cn/web/svg/element/image/index.md
index 67e2ecc6fa7d76..902ba65015994f 100644
--- a/files/zh-cn/web/svg/element/image/index.md
+++ b/files/zh-cn/web/svg/element/image/index.md
@@ -13,7 +13,8 @@ SVG 软件必须支持的图像格式只有 {{glossary("JPEG")}}、{{glossary("P
 
 使用 `<image>` 显示的 SVG 文件[被视为图像](/zh-CN/docs/Web/SVG/SVG_as_an_Image)：外部资源不会被加载、{{cssxref(":visited")}} 样式[不会被应用](/zh-CN/docs/Web/CSS/Privacy_and_the_:visited_selector)，且它们不能有交互。要包含动态 SVG 元素，可以尝试用 {{SVGElement("use")}} 引入外部 URL。要包含 SVG 文件并在其中运行脚本，请尝试在 {{SVGElement("foreignObject")}} 中嵌入 {{HTMLElement("object")}}。
 
-> **备注：** HTML 规范定义 `<image>` 和 {{HTMLElement("img")}} 在用作 HTML 解析时是等效的。这种特定元素及其行为仅适用于 SVG 文档或内联 SVG。
+> [!NOTE]
+> HTML 规范定义 `<image>` 和 {{HTMLElement("img")}} 在用作 HTML 解析时是等效的。这种特定元素及其行为仅适用于 SVG 文档或内联 SVG。
 
 ## 使用上下文
 
diff --git a/files/zh-cn/web/svg/element/index.md b/files/zh-cn/web/svg/element/index.md
index 09fe7599523322..9ce39004e23326 100644
--- a/files/zh-cn/web/svg/element/index.md
+++ b/files/zh-cn/web/svg/element/index.md
@@ -205,7 +205,8 @@ SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图
 
 ## 过时和弃用的元素
 
-> **警告：** 这些是旧的 SVG 元素，已弃用且不应使用。**你绝不应在新项目中使用它们，并应尽快在旧项目中替换它们**。在此列出，仅供参考。
+> [!WARNING]
+> 这些是旧的 SVG 元素，已弃用且不应使用。**你绝不应在新项目中使用它们，并应尽快在旧项目中替换它们**。在此列出，仅供参考。
 
 ### C
 
diff --git a/files/zh-cn/web/svg/element/radialgradient/index.md b/files/zh-cn/web/svg/element/radialgradient/index.md
index adc4cc6d780539..937068ca8c3bfa 100644
--- a/files/zh-cn/web/svg/element/radialgradient/index.md
+++ b/files/zh-cn/web/svg/element/radialgradient/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`<radialGradient>`** 用来定义径向渐变，以对图形元素进行填充或描边。
 
-> **备注：** 不要与 CSS {{cssxref('gradient/radial-gradient', 'radial-gradient()')}} 混淆，CSS 渐变只能应用在 HTML 元素上，而 SVG 渐变只能运用在 SVG 元素上。
+> [!NOTE]
+> 不要与 CSS {{cssxref('gradient/radial-gradient', 'radial-gradient()')}} 混淆，CSS 渐变只能应用在 HTML 元素上，而 SVG 渐变只能运用在 SVG 元素上。
 
 ## 示例
 
diff --git a/files/zh-cn/web/svg/svg_animation_with_smil/index.md b/files/zh-cn/web/svg/svg_animation_with_smil/index.md
index 1dbb0f1a32d821..d471f7eff62b02 100644
--- a/files/zh-cn/web/svg/svg_animation_with_smil/index.md
+++ b/files/zh-cn/web/svg/svg_animation_with_smil/index.md
@@ -5,7 +5,8 @@ slug: Web/SVG/SVG_animation_with_SMIL
 
 {{SVGRef}}
 
-> **警告：** 虽然 Chrome 45 弃用了 SMIL 而偏向于 CSS 动画和 Web 动画，但之后 Chrome 开发者[中止了](https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0yiO440LM/YGEJBsjUAwAJ)对 SMIL 的弃用。
+> [!WARNING]
+> 虽然 Chrome 45 弃用了 SMIL 而偏向于 CSS 动画和 Web 动画，但之后 Chrome 开发者[中止了](https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0yiO440LM/YGEJBsjUAwAJ)对 SMIL 的弃用。
 
 Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.org/TR/REC-smil/)（SMIL）引入了对 [SVG](/zh-CN/docs/Web/SVG) 动画的支持。SMIL 允许你：
 
diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
index cca56bcdd75eb6..bdf83e8b5f86fa 100644
--- a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
+++ b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
@@ -22,7 +22,8 @@ slug: Web/SVG/Tutorial/Fills_and_Strokes
 
 此外，在 SVG 中你可以分别定义填充色和边框色的不透明度，属性`fill-opacity`控制填充色的不透明度，属性`stroke-opacity`控制描边的不透明度。
 
-> **备注：** FireFox 3+ 支持 rgba 值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了 rgba 值和填充/描边不透明度，它们将都被调用。
+> [!NOTE]
+> FireFox 3+ 支持 rgba 值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了 rgba 值和填充/描边不透明度，它们将都被调用。
 
 ### 描边
 
diff --git a/files/zh-cn/web/svg/tutorial/gradients/index.md b/files/zh-cn/web/svg/tutorial/gradients/index.md
index 07b4df020fb1d9..6c812ae205cb7d 100644
--- a/files/zh-cn/web/svg/tutorial/gradients/index.md
+++ b/files/zh-cn/web/svg/tutorial/gradients/index.md
@@ -68,7 +68,8 @@ slug: Web/SVG/Tutorial/Gradients
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"></linearGradient>
 ```
 
-> **备注：** 你也可以在渐变上使用`xlink:href 属性。如果`使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要在 Grandient2 中重新创建全部的颜色中值（stop）。
+> [!NOTE]
+> 你也可以在渐变上使用 `href` 属性。如果使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要在 Grandient2 中重新创建全部的颜色中值（stop）。
 >
 > ```html
 > <linearGradient id="Gradient1">
diff --git a/files/zh-cn/web/svg/tutorial/index.md b/files/zh-cn/web/svg/tutorial/index.md
index 6171d2695e0a9a..782d5e3fdb67b6 100644
--- a/files/zh-cn/web/svg/tutorial/index.md
+++ b/files/zh-cn/web/svg/tutorial/index.md
@@ -9,7 +9,6 @@ slug: Web/SVG/Tutorial
 
 本教程旨在解释 SVG 内部的技术细节。如果你希望绘制非常漂亮的图形，你可以在 [Inkscape 的文档页面](http://inkscape.org/doc/)上获取更多有用的资源。另外还有一个比较好的 SVG 介绍：[W3C 的 SVG 入门](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html)。
 
-> **备注：** 本教程还在初期阶段，如果你有能力，可以来增加扩展一两段，写一整页的话会给加分！
 
 ##### 从头开始介绍 SVG
 
diff --git a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
index cba0046272339f..e874232cbc5b62 100644
--- a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
+++ b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
@@ -40,7 +40,8 @@ slug: Web/SVG/Tutorial/Other_content_in_SVG
 
 foreignObject 元素是一个好办法，用来在 SVG 中嵌入 XHTML。如果你有更长的文本，该 HTML 布局比 SVG `text`元素更适合。另一个经常被引用的用例是用 MathML 写的方程式。对于 SVG 的科学应用，它是连接两个世界的一个很好的办法。
 
-> **备注：** 请记住，`foreignObject`元素的内容是能被浏览器加工的。一个独立的 SVG 浏览器不太可能呈现 HTML 或 MathML。
+> [!NOTE]
+> 请记住，`foreignObject`元素的内容是能被浏览器加工的。一个独立的 SVG 浏览器不太可能呈现 HTML 或 MathML。
 
 因为`foreignObject`是一个 SVG 元素，所以你可以像用图像那样，使用任何 SVG 的精华，它将被应用到它的内容。
 
diff --git a/files/zh-cn/web/svg/tutorial/svg_fonts/index.md b/files/zh-cn/web/svg/tutorial/svg_fonts/index.md
index 07ec2e533e71f3..8fffe15d2bad3d 100644
--- a/files/zh-cn/web/svg/tutorial/svg_fonts/index.md
+++ b/files/zh-cn/web/svg/tutorial/svg_fonts/index.md
@@ -9,7 +9,8 @@ slug: Web/SVG/Tutorial/SVG_fonts
 
 当规定 SVG 时，在浏览器支持 web 字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG 中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说 PostScript 或 OTF 兼容，而是为了将字形信息嵌入 SVG 呈现的一个简单的方法。
 
-> **备注：** SVG 字体当前只在 Safari 和 Android 浏览器中受支持。
+> [!NOTE]
+> SVG 字体当前只在 Safari 和 Android 浏览器中受支持。
 >
 > Chrome 38（和 Opera25）[移除了这个功能](https://www.chromestatus.com/feature/5930075908210688)，Firefox 已经[无限期推迟实施它](https://bugzilla.mozilla.org/show_bug.cgi?id=119490)以专注于实现 [WOFF](/zh-CN/docs/Web/CSS/CSS_fonts/WOFF)。别的工具，如 Batik 和部分 Inkscape 支持 SVG 字体嵌入。
 
diff --git a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md
index 082583c346cc56..95a658cc231a34 100644
--- a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md
+++ b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md
@@ -68,7 +68,8 @@ slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
 - 相同的脚本同时操作了 HTML 和 SVG
 - 该文档完全符合标准
 
-> **备注：** 如果需要给一个内嵌的 SVG 元素通过 DOM 方法添加一个有外链的图片，我们需要使用 `setAttributeNS` 来设置外链地址 `href`. 示例如下：
+> [!NOTE]
+> 如果需要给一个内嵌的 SVG 元素通过 DOM 方法添加一个有外链的图片，我们需要使用 `setAttributeNS` 来设置外链地址 `href`. 示例如下：
 >
 > ```js
 > var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
diff --git a/files/zh-cn/web/text_fragments/index.md b/files/zh-cn/web/text_fragments/index.md
index a850fb42ba542b..9514774be06358 100644
--- a/files/zh-cn/web/text_fragments/index.md
+++ b/files/zh-cn/web/text_fragments/index.md
@@ -63,7 +63,8 @@ https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
   Document-Policy: force-load-at-top
   ```
 
-> **备注：** 如果提供的文本片段与链接文档中的任何文本不匹配，或者浏览器不支持文本片段，整个文本片段将被忽略，而链接到文档的顶部。
+> [!NOTE]
+> 如果提供的文本片段与链接文档中的任何文本不匹配，或者浏览器不支持文本片段，整个文本片段将被忽略，而链接到文档的顶部。
 
 ## 示例
 
diff --git a/files/zh-cn/web/tutorials/index.md b/files/zh-cn/web/tutorials/index.md
index 90e14fde05f848..6d76265f93899a 100644
--- a/files/zh-cn/web/tutorials/index.md
+++ b/files/zh-cn/web/tutorials/index.md
@@ -3,7 +3,9 @@ title: 教程
 slug: Web/Tutorials
 ---
 
-> **警告：** 本页面上的链接通向各式各样的入门指导和培训教材。不管你是仅仅开始入门、学过些基础或者是个网站开发老手，你都能在这里找到有用的资源加以绝佳的练习。这些资源都来自卓有远见的公司和乐于接受开放标准网站开发人员。这是网站开发的绝佳练习而且使用一种开放内容授权，比如[知识共享许可协议](https://www.mozilla.org/foundation/licensing/website-content.html)来提供并允许进行翻译。
+本页面上的链接通向各式各样的入门指导和培训教材。不管你是仅仅开始入门、学过些基础或者是个网站开发老手，你都能在这里找到有用的资源加以绝佳的练习。
+
+这些资源都来自卓有远见的公司和乐于接受开放标准网站开发人员。这是网站开发的绝佳练习而且使用一种开放内容授权，比如[知识共享许可协议](https://www.mozilla.org/foundation/licensing/website-content.html)来提供并允许进行翻译。
 
 ## 对于学习 Web 的新手
 
diff --git a/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md b/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md
index faa5c062ea3eca..f26b1c726be9ec 100644
--- a/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md
+++ b/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md
@@ -57,7 +57,8 @@ fetch("example.xml")
 
 如果文档是 {{Glossary("HTML")}}，上面的代码将返回一个 {{domxref("Document")}}。如果文档是 XML，那得到的对象实际上是一个 `XMLDocument`。这两种类型实质上是一样的，不同点大部分是历史遗留的，尽管区分它们也会有一些实际好处。
 
-> **备注：** 事实上，{{domxref("HTMLDocument")}} 也是一个接口，但是它不必是一个独立的类型。在一些浏览器上它是，但在另外一些浏览器上它仅仅是 `Document` 接口的别名。
+> [!NOTE]
+> 事实上，{{domxref("HTMLDocument")}} 也是一个接口，但是它不必是一个独立的类型。在一些浏览器上它是，但在另外一些浏览器上它仅仅是 `Document` 接口的别名。
 
 ## 序列化 XML 文档
 
diff --git a/files/zh-cn/web/xpath/index.md b/files/zh-cn/web/xpath/index.md
index 50c61246403f8e..c5901983b9e6fc 100644
--- a/files/zh-cn/web/xpath/index.md
+++ b/files/zh-cn/web/xpath/index.md
@@ -11,7 +11,8 @@ XPath 主要用于 [XSLT](/zh-CN/docs/Web/XSLT)，但也可以作为一种更强
 
 XPath 使用路径标识符（类似于 URL）通过层级结构来导航 XML 文档。它使用非 XML 语法，使得它可被用于 URI 和 XML 属性值。
 
-> **备注：** XPath 的浏览器支持差别很大；它在 Firefox 中得到来相当不错的支持（尽管没有计划进一步改进的计划），而其他浏览器则较小程度地实现了它（如果支持的话）。如果你需要 polyfill，你可以考虑使用 [js-xpath](https://sourceforge.net/projects/js-xpath/files/js-xpath/1.0.0/xpath.js/download) 或 [wicked-good-xpath](https://github.com/google/wicked-good-xpath)。
+> [!NOTE]
+> XPath 的浏览器支持差别很大；它在 Firefox 中得到来相当不错的支持（尽管没有计划进一步改进的计划），而其他浏览器则较小程度地实现了它（如果支持的话）。如果你需要 polyfill，你可以考虑使用 [js-xpath](https://sourceforge.net/projects/js-xpath/files/js-xpath/1.0.0/xpath.js/download) 或 [wicked-good-xpath](https://github.com/google/wicked-good-xpath)。
 
 ## 文档
 
diff --git a/files/zh-cn/webassembly/c_to_wasm/index.md b/files/zh-cn/webassembly/c_to_wasm/index.md
index 6fbd7ac23b969b..653d44df59609e 100644
--- a/files/zh-cn/webassembly/c_to_wasm/index.md
+++ b/files/zh-cn/webassembly/c_to_wasm/index.md
@@ -20,7 +20,8 @@ slug: WebAssembly/C_to_Wasm
 - 主系统编译器 — 在 Linux 下，[安装 GCC](http://askubuntu.com/questions/154402/install-gcc-on-ubuntu-12-04-lts)。在 macOS 下，[安装 Xcode](https://itunes.apple.com/us/app/xcode/id497799835)。在 Windows 下，安装 [Visual Studio Community 2015 with Update 3 or newer](https://www.microsoft.com/zh-CN/download/details.aspx?id=48146)。
 - Python 2.7.x — On Linux and macOS, this is most likely provided out of the box. 从 [初学者指南](https://wiki.python.org/moin/BeginnersGuide/Downloadhere) 获取帮助。在 Windows 上，从 [Python 主页](https://www.python.org/downloads/)获取安装包。
 
-> **备注：** 在 Windows 下你可能需要 [pywin32](https://sourceforge.net/projects/pywin32/files/pywin32/)，为了降低安装 pywin32 可能遇到的错误，请使用管理员权限在 cmd 内运行安装程序。
+> [!NOTE]
+> 在 Windows 下你可能需要 [pywin32](https://sourceforge.net/projects/pywin32/files/pywin32/)，为了降低安装 pywin32 可能遇到的错误，请使用管理员权限在 cmd 内运行安装程序。
 
 ### 编译 Emscripten
 
@@ -50,9 +51,11 @@ emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
 
 安装过程可以会花上一点时间，是时候去休息一下。安装程序会设置所有 Emscripten 运行所需要的环境变量。
 
-> **备注：** global 标识会让 PATH 变量在全局被设置，所以接下来所打开的终端或者命令行窗口都会被设置。如果你仅仅想让 Emscripten 在当前窗口生效，就删掉这个标识。
+> [!NOTE]
+> global 标识会让 PATH 变量在全局被设置，所以接下来所打开的终端或者命令行窗口都会被设置。如果你仅仅想让 Emscripten 在当前窗口生效，就删掉这个标识。
 
-> **备注：** 每当你想要使用 Emscripten 时，尝试从远程更新最新的 emscripten 代码是个很好的习惯（运行 git pull）。如果有更新，重新执行 install 和 activate 命令。这样就可以确保你使用的 Emscripten 一直保持最新。
+> [!NOTE]
+> 每当你想要使用 Emscripten 时，尝试从远程更新最新的 emscripten 代码是个很好的习惯（运行 git pull）。如果有更新，重新执行 install 和 activate 命令。这样就可以确保你使用的 Emscripten 一直保持最新。
 
 现在让我们进入 emsdk 文件夹，输入以下命令来让你进入接下来的流程，编译一个样例 C 程序到 asm.js 或者 wasm。
 
@@ -108,7 +111,8 @@ emsdk_env.bat
 
 现在使用一个支持 WebAssembly 的浏览器，加载生成的 `hello.html`。自从 Firefox 版本 52、Chrome 版本 57 和 Opera 版本 44 开始，已经默认启用了 WebAssembly。
 
-> **备注：** 如果你试图直接从本地硬盘打开生成的 HTML 文件（`hello.html`）（例如 `file://your_path/hello.html`），你会得到一个错误信息，大意是 _`both async and sync fetching of the wasm failed`_。你需要通过 HTTP 服务器（`http://`）运行你的 HTML 文件——参见[如何设置本地测试服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)获取更多信息。
+> [!NOTE]
+> 如果你试图直接从本地硬盘打开生成的 HTML 文件（`hello.html`）（例如 `file://your_path/hello.html`），你会得到一个错误信息，大意是 _`both async and sync fetching of the wasm failed`_。你需要通过 HTTP 服务器（`http://`）运行你的 HTML 文件——参见[如何设置本地测试服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)获取更多信息。
 
 如果一切顺利，你应该可以在页面上的 Emscripten 控制台和浏览器控制台中看到“Hello World”的输出。
 
@@ -148,7 +152,8 @@ emsdk_env.bat
 
 4. 下面让我们来运行这个例子。上面的命令已经生成了 hello2.html，内容和我们使用的模板非常相像，只不过多加了一些 js 胶水和加载 wasm 文件的代码。在浏览器中打开它，你会看到与上一个例子相同的输出。
 
-> **备注：** 通过用.js 取代.htm(l) 作为文件后缀名，你就可以得到只有 JavaScript 的输出文件，而不再是完整的 HTML 文件。例如：`emcc -o hello2.js hello2.c -O3 -s WASM=1`. 你可以完全从零开始创建你自己的 HTML 文件。尽管如此，不推荐这样做。因为 Emscripten 需要大量的 JavaScript“胶水”代码从而能够 处理内存分配、内存泄漏以及大量的其他问题。这些问题都已经在提供的模板中得到了处理。使用模板要比自己编写模板要容易得多。不过，当对模板所做的事情越来越熟悉的时候，你就能够按照自己的需要创建定制化的模板了。
+> [!NOTE]
+> 通过用.js 取代.htm(l) 作为文件后缀名，你就可以得到只有 JavaScript 的输出文件，而不再是完整的 HTML 文件。例如：`emcc -o hello2.js hello2.c -O3 -s WASM=1`. 你可以完全从零开始创建你自己的 HTML 文件。尽管如此，不推荐这样做。因为 Emscripten 需要大量的 JavaScript“胶水”代码从而能够 处理内存分配、内存泄漏以及大量的其他问题。这些问题都已经在提供的模板中得到了处理。使用模板要比自己编写模板要容易得多。不过，当对模板所做的事情越来越熟悉的时候，你就能够按照自己的需要创建定制化的模板了。
 
 ## 调用一个定义在 C 中的自定义方法
 
@@ -181,7 +186,8 @@ emsdk_env.bat
 
    默认情况下，Emscripten 生成的代码只会调用 `main()` 函数，其他的函数将被视为无用代码。在一个函数名之前添加 `EMSCRIPTEN_KEEPALIVE` 能够防止这样的事情发生。你需要导入 `emscripten.h` 库来使用 `EMSCRIPTEN_KEEPALIVE`。
 
-   > **备注：** 为了保证万一你想在 C++ 代码中引用这些代码时代码可以正常工作，我们添加了 `#ifdef` 代码块。由于 C 与 C++ 中名字修饰规则的差异，添加的代码块有可能产生问题，但目前我们设置了这一额外的代码块以保证你使用 C++ 时，这些代码会被视为外部 C 语言函数。
+   > [!NOTE]
+   > 为了保证万一你想在 C++ 代码中引用这些代码时代码可以正常工作，我们添加了 `#ifdef` 代码块。由于 C 与 C++ 中名字修饰规则的差异，添加的代码块有可能产生问题，但目前我们设置了这一额外的代码块以保证你使用 C++ 时，这些代码会被视为外部 C 语言函数。
 
 2. 为了方便起见，现在将 `html_template/shell_minimal.html` 也添加到这一目录（但在实际开发环境中你肯定需要将其放到某一特定位置）。
 3. 运行以下命令编译：(注意由于使用 ccall 函数，需要添加指定参数)
diff --git a/files/zh-cn/webassembly/concepts/index.md b/files/zh-cn/webassembly/concepts/index.md
index d9387582bafbcd..e009f9785d1516 100644
--- a/files/zh-cn/webassembly/concepts/index.md
+++ b/files/zh-cn/webassembly/concepts/index.md
@@ -26,7 +26,8 @@ WebAssembly 是一种运行在现代 web 浏览器中的新型代码，并且提
 - 保持安全——WebAssembly 被限制运行在一个安全的沙箱执行环境中。像其他网络代码一样，它遵循浏览器的同源策略和授权策略。
 - 不破坏 Web——WebAssembly 的设计原则是与其他网络技术和谐共处并保持向后兼容。
 
-> **备注：** WebAssembly 也用在网络和 JavaScript 环境之外（参考[非网络嵌入](http://webassembly.org/docs/non-web/)）。
+> [!NOTE]
+> WebAssembly 也用在网络和 JavaScript 环境之外（参考[非网络嵌入](http://webassembly.org/docs/non-web/)）。
 
 ## WebAssembly 如何适应网络平台？
 
@@ -95,7 +96,8 @@ Emscripten 工具可以将任何 C/C++ 源代码编译成 Wasm 模块，再加
 2. Emscripten 将 clang+LLVM 编译的结果转换为 Wasm 二进制文件。
 3. 目前，WebAssembly 本身无法直接访问 DOM；它只能调用 JavaScript，并且只能传入整型和浮点型的原始数据类型作为参数。这就是说，为了使用任何 Web API，WebAssembly 需要调用 JavaScript，然后由 JavaScript 进行 Web API 调用。因此，Emscripten 创建了 HTML 和 JavaScript 粘合代码以便完成这些功能。
 
-> **备注：** 计划将来[允许 WebAssembly 直接调用 Web API](https://github.com/WebAssembly/gc/blob/master/README.md)。
+> [!NOTE]
+> 计划将来[允许 WebAssembly 直接调用 Web API](https://github.com/WebAssembly/gc/blob/master/README.md)。
 
 JavaScript 粘合代码并不是像你想象的那么简单。首先，Emscripten 实现了流行的 C/C++ 库，比如，[SDL](https://zh.wikipedia.org/wiki/SDL)、[OpenGL](https://zh.wikipedia.org/wiki/OpenGL)、[OpenAL](https://zh.wikipedia.org/wiki/OpenAL) 以及部分 [POSIX](https://zh.wikipedia.org/wiki/可移植操作系统接口)。这些库以 Web API 的形式实现，并且每个库需要一个 JavaScript 粘合代码来连接 WebAssembly 和低层的 Web API。
 
diff --git a/files/zh-cn/webassembly/javascript_interface/global/index.md b/files/zh-cn/webassembly/javascript_interface/global/index.md
index b643dc139d136a..59e3babe839e84 100644
--- a/files/zh-cn/webassembly/javascript_interface/global/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/global/index.md
@@ -71,7 +71,8 @@ WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then(
 );
 ```
 
-> **备注：** 你可以查看 [GitHub 上运行的实时](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)示例；也可以查看[源代码](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)。
+> [!NOTE]
+> 你可以查看 [GitHub 上运行的实时](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)示例；也可以查看[源代码](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)。
 
 ## 规格
 
diff --git a/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md b/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md
index 82b81bc0533a01..a9d6638b214e02 100644
--- a/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md
@@ -10,7 +10,8 @@ slug: WebAssembly/JavaScript_interface/instantiate_static
 - 第一种主要重载方式使用 WebAssembly 二进制代码的 [typed array](/zh-CN/docs/Web/JavaScript/Typed_arrays) 或{{jsxref("ArrayBuffer")}}形，一并进行编译和实例化。返回的 `Promise` 会携带已编译的 {{jsxref("WebAssembly.Module")}} 和它的第一个实例化对象 {{jsxref("WebAssembly.Instance")}}.
 - 第二种重载使用已编译的 {{jsxref("WebAssembly.Module")}} , 返回的 `Promise` 携带一个 `Module`的实例化对象 `Instance`. 如果这个 `Module` 已经被编译了或者是从缓存中获取的 ( [retrieved from cache](/zh-CN/docs/WebAssembly/Caching_modules)), 那么这种重载方式是非常有用的。
 
-> **警告：** 此方法不是获取 (fetch) 和实例化 wasm 模块的最具效率方法。如果可能的话，你应该改用较新的{{jsxref("WebAssembly.instantiateStreaming()")}}方法，该方法直接从原始字节码中直接获取，编译和实例化模块，因此不需要转换为{{jsxref("ArrayBuffer")}}。
+> [!WARNING]
+> 此方法不是获取 (fetch) 和实例化 wasm 模块的最具效率方法。如果可能的话，你应该改用较新的{{jsxref("WebAssembly.instantiateStreaming()")}}方法，该方法直接从原始字节码中直接获取，编译和实例化模块，因此不需要转换为{{jsxref("ArrayBuffer")}}。
 
 ## 语法
 
@@ -63,7 +64,8 @@ Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);
 
 ## 示例
 
-> **备注：** 在大多数情况下，你可能需要使用 {{jsxref("WebAssembly.instantiateStreaming()")}}，因为它比 `instantiate()` 更具效率。
+> [!NOTE]
+> 在大多数情况下，你可能需要使用 {{jsxref("WebAssembly.instantiateStreaming()")}}，因为它比 `instantiate()` 更具效率。
 
 ### 第一种重载示例
 
@@ -89,7 +91,8 @@ fetch("simple.wasm")
   .then((result) => result.instance.exports);
 ```
 
-> **备注：** 查看 GitHub（[在线实例](https://mdn.github.io/webassembly-examples/js-api-examples/)）的 [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) 中一个相似的例子，使用了我们的 [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1) 库函数
+> [!NOTE]
+> 查看 GitHub（[在线实例](https://mdn.github.io/webassembly-examples/js-api-examples/)）的 [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) 中一个相似的例子，使用了我们的 [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1) 库函数
 
 ### 第二种重载示例
 
diff --git a/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md b/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md
index 4afe43422c976f..f89eed87d07e7d 100644
--- a/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md
@@ -7,7 +7,8 @@ slug: WebAssembly/JavaScript_interface/instantiateStreaming_static
 
 **`WebAssembly.instantiateStreaming()`** 函数直接从流式底层源编译并实例化 WebAssembly 模块。这是加载 Wasm 代码的最有效、最优化的方式。
 
-> **备注：** 具有严格的[内容安全策略（CSP）](/zh-CN/docs/Web/HTTP/CSP)的网页可能会阻止 WebAssembly 模块的编译和执行。请参阅 [script-src CSP](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) 以了解更多有关允许 WebAssembly 编译和执行的信息。
+> [!NOTE]
+> 具有严格的[内容安全策略（CSP）](/zh-CN/docs/Web/HTTP/CSP)的网页可能会阻止 WebAssembly 模块的编译和执行。请参阅 [script-src CSP](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) 以了解更多有关允许 WebAssembly 编译和执行的信息。
 
 ## 语法
 
@@ -49,7 +50,8 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
 
 然后访问 `ResultObject` 的实例成员，并调用包含的导出函数。
 
-> **备注：** 为了使其工作，服务器应该返回一个 `application/wasm` MIME 类型的 `.wasm` 文件。
+> [!NOTE]
+> 为了使其工作，服务器应该返回一个 `application/wasm` MIME 类型的 `.wasm` 文件。
 
 ## 规范
 
diff --git a/files/zh-cn/webassembly/javascript_interface/memory/index.md b/files/zh-cn/webassembly/javascript_interface/memory/index.md
index b6729582ddc0f0..68d02537ac9323 100644
--- a/files/zh-cn/webassembly/javascript_interface/memory/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/memory/index.md
@@ -26,7 +26,8 @@ var myMemory = new WebAssembly.Memory(memoryDescriptor);
     - _maximum {{optional_inline}}_
       - : 以 WebAssembly 页面为单位，可允许 WebAssembly 内存的 `最大值`。当存在此属性时，此参数用于提示引擎预先保留内存。但是，引擎可能会忽略或限制此预留请求。通常情况下大多数 WebAssembly 模块不需要设置 `最大值`。
 
-> **备注：** A WebAssembly 页面的大小为一个常量 65,536 字节，即 64KB。
+> [!NOTE]
+> A WebAssembly 页面的大小为一个常量 65,536 字节，即 64KB。
 
 ### 异常
 
diff --git a/files/zh-cn/webassembly/javascript_interface/table/index.md b/files/zh-cn/webassembly/javascript_interface/table/index.md
index 68aa65776c4f57..5e2eb5def30cc7 100644
--- a/files/zh-cn/webassembly/javascript_interface/table/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/table/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`WebAssembly.Table`** 是代表 WebAssembly Table 的 JavaScript 包装对象，具有类数组结构，存储了多个函数引用。在 JavaScript 或者 WebAssemble 中创建的 Table 对象可以同时被 JavaScript 或 WebAssembly 访问和更改。
 
-> **备注：** Table 对象目前只能存储函数引用，不过在将来可能会被扩展。
+> [!NOTE]
+> Table 对象目前只能存储函数引用，不过在将来可能会被扩展。
 
 ## 构造函数
 
diff --git a/files/zh-cn/webassembly/loading_and_running/index.md b/files/zh-cn/webassembly/loading_and_running/index.md
index e24158390d476b..a40d5fe7340444 100644
--- a/files/zh-cn/webassembly/loading_and_running/index.md
+++ b/files/zh-cn/webassembly/loading_and_running/index.md
@@ -55,9 +55,11 @@ fetch("module.wasm")
 }
 ```
 
-> **备注：** 通常，我们只关心实例，但是，当我们想缓存模块，使用 [`postMessage()`](/zh-CN/docs/Web/API/MessagePort/postMessage) 与另外一个 worker 或 window 共享模块或者只是创建更多的实例的时候，拥有模块对象是很有用的。
+> [!NOTE]
+> 通常，我们只关心实例，但是，当我们想缓存模块，使用 [`postMessage()`](/zh-CN/docs/Web/API/MessagePort/postMessage) 与另外一个 worker 或 window 共享模块或者只是创建更多的实例的时候，拥有模块对象是很有用的。
 
-> **备注：** 这二种重载形式接受一个 [`WebAssembly.Module`](/zh-CN/docs/WebAssembly/JavaScript_interface/Module) 对象作为参数，并且返回一个直接包含一个实例对象作为其结果的 promise。参考[第二种重载示例](/zh-CN/docs/WebAssembly/JavaScript_interface/instantiate_static#第二种重载示例)。
+> [!NOTE]
+> 这二种重载形式接受一个 [`WebAssembly.Module`](/zh-CN/docs/WebAssembly/JavaScript_interface/Module) 对象作为参数，并且返回一个直接包含一个实例对象作为其结果的 promise。参考[第二种重载示例](/zh-CN/docs/WebAssembly/JavaScript_interface/instantiate_static#第二种重载示例)。
 
 ### 运行你的 WebAssembly 代码
 
@@ -79,7 +81,8 @@ WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject).then(
 );
 ```
 
-> **备注：** 关于如何从 WebAssembly 模块中导出的更多信息，请阅读[使用 WebAssembly JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API) 和[理解 WebAssembly 文本格式](/zh-CN/docs/WebAssembly/Understanding_the_text_format)。
+> [!NOTE]
+> 关于如何从 WebAssembly 模块中导出的更多信息，请阅读[使用 WebAssembly JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API) 和[理解 WebAssembly 文本格式](/zh-CN/docs/WebAssembly/Understanding_the_text_format)。
 
 ## 使用 XMLHttpRequest
 
@@ -106,4 +109,5 @@ request.onload = () => {
 };
 ```
 
-> **备注：** 你可以在 [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html) 看到实际使用的示例。
+> [!NOTE]
+> 你可以在 [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html) 看到实际使用的示例。
diff --git a/files/zh-cn/webassembly/rust_to_wasm/index.md b/files/zh-cn/webassembly/rust_to_wasm/index.md
index 7bae275a58d50a..2a7feb75fdaf1d 100644
--- a/files/zh-cn/webassembly/rust_to_wasm/index.md
+++ b/files/zh-cn/webassembly/rust_to_wasm/index.md
@@ -26,7 +26,8 @@ Rust 和 WebAssembly 有两大主要用例：
 
 前往 [Install Rust](https://www.rust-lang.org/install.html) 页面并跟随指示安装 Rust。这里会安装一个名为“rustup”的工具，这个工具能让你管理多个不同版本的 Rust。默认情况下，它会安装用于惯常 Rust 开发的 stable 版本 Rust Release。Rustup 会安装 Rust 的编译器 `rustc`、Rust 的包管理工具 `cargo`、Rust 的标准库 `rust-std` 以及一些有用的文档 `rust-docs`。
 
-> **备注：** 需要注意，在安装完成后，你需要把 cargo 的 `bin` 目录添加到你系统的 `PATH` 。一般来说它会自动添加，但需要你重启终端后才会生效。
+> [!NOTE]
+> 需要注意，在安装完成后，你需要把 cargo 的 `bin` 目录添加到你系统的 `PATH`。一般来说它会自动添加，但需要你重启终端后才会生效。
 
 ### wasm-pack
 
diff --git a/files/zh-cn/webassembly/text_format_to_wasm/index.md b/files/zh-cn/webassembly/text_format_to_wasm/index.md
index 660732c6476ce7..addde149a54b28 100644
--- a/files/zh-cn/webassembly/text_format_to_wasm/index.md
+++ b/files/zh-cn/webassembly/text_format_to_wasm/index.md
@@ -7,7 +7,8 @@ slug: WebAssembly/Text_format_to_Wasm
 
 WebAssembly 有一个基于 S-表达式的文本表示形式，设计为在文本编辑器，浏览器开发人员工具等中暴露的一个中间形式。本文解释了它是如何工作的一些内容以及如何使用可用的工具把文本格式文件转换为.wasm 汇编格式文件。
 
-> **备注：** 文本格式文件通常被保存为.wat 扩展名；有时.wast 也被使用，它是说文件包含了额外的测试命令（断言等）并且它们不需要转换到.wasm 中。
+> [!NOTE]
+> 文本格式文件通常被保存为.wat 扩展名；有时.wast 也被使用，它是说文件包含了额外的测试命令（断言等）并且它们不需要转换到.wasm 中。
 
 ## 初识文本格式
 
@@ -40,7 +41,8 @@ WebAssembly 函数 exported_func 是被导出供我们的环境（比如，使
 
 该命令会把 wasm 输出到一个叫做 simple.wasm 的文件，该文件包含了.wasm 汇编代码。
 
-> **备注：** 你可以使用 wasm2wat 工具把汇编代码转换为文本表示；例如，wasm2wat simple.wasm -o text.wat。
+> [!NOTE]
+> 你可以使用 wasm2wat 工具把汇编代码转换为文本表示；例如，wasm2wat simple.wasm -o text.wat。
 
 ## 查看汇编输出
 
diff --git a/files/zh-cn/webassembly/understanding_the_text_format/index.md b/files/zh-cn/webassembly/understanding_the_text_format/index.md
index caaf627a051f1d..653016548e8468 100644
--- a/files/zh-cn/webassembly/understanding_the_text_format/index.md
+++ b/files/zh-cn/webassembly/understanding_the_text_format/index.md
@@ -8,7 +8,8 @@ slug: WebAssembly/Understanding_the_text_format
 为了能够让人类阅读和编辑 WebAssembly，wasm 二进制格式提供了相应的文本表示。这是一种用来在文本编辑器、浏览器开发者工具等工具中显示的中间形式。本文用基本语法的方式解释了这种文本表示是如何工作的，以及它是如何与它表示的底层字节码，及在 JavaScript 中表示 wasm 的封装对象关联起来的。
 本质上，这种文本形式更类似于处理器的汇编指令。
 
-> **备注：** 如果你是一个 Web 开发者并且只是想在页面中加载 wasm 模块然后在你的代码中使用它（参考[使用 WebAssembly 的 JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API)），那么，本文可能有点儿强人所难了。但是，如果你想编写 wasm 模块从而优化你的 JavaScript 的性能或者构建你自己的 WebAssembly 编译器，那么，本文是很有用的。
+> [!NOTE]
+> 如果你是一个 Web 开发者并且只是想在页面中加载 wasm 模块然后在你的代码中使用它（参考[使用 WebAssembly 的 JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API)），那么，本文可能有点儿强人所难了。但是，如果你想编写 wasm 模块从而优化你的 JavaScript 的性能或者构建你自己的 WebAssembly 编译器，那么，本文是很有用的。
 
 ## S-表达式
 
@@ -106,7 +107,8 @@ WebAssembly 模块中的所有代码都是划分到函数里面。函数具有
 
 这里，使用 `local.get $p1` 就可以代替 `local.get 0`，访问参数 i32 变量时，就可以通过 $p1 进行访问。
 
-> **备注：** 当文本转换为二进制后，二进制中只包含整数。
+> [!NOTE]
+> 当文本转换为二进制后，二进制中只包含整数。
 
 ## 栈式机器
 
@@ -191,7 +193,8 @@ function fetchAndInstantiate(url, importObject) {
 }
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)）。另外，参考 [WebAssembly.instantiate()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) 来获取关于实例化函数的更多细节以及 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来获取 fetchAndInstantiate() 的源代码。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)）。另外，参考 [WebAssembly.instantiate()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) 来获取关于实例化函数的更多细节以及 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来获取 fetchAndInstantiate() 的源代码。
 
 ## 探索基本原则
 
@@ -211,7 +214,8 @@ function fetchAndInstantiate(url, importObject) {
     i32.add))
 ```
 
-> **备注：** i32.const 只是定义一个 32 位整数并把它压入栈。你可以把 i32 替换为任何其他可用的类型，并把 const 值修改为你想要的任何值（这里，我们把这个值设置为 42）。
+> [!NOTE]
+> i32.const 只是定义一个 32 位整数并把它压入栈。你可以把 i32 替换为任何其他可用的类型，并把 const 值修改为你想要的任何值（这里，我们把这个值设置为 42）。
 
 在这个例子中，你注意到一个 (export "getAnswerPlus1") 代码段，并且它声明在第二个函数的 func 语句之后——这声明我们想导出这个函数，以及定义导出的名字的简便方法。
 
@@ -229,7 +233,8 @@ fetchAndInstantiate("call.wasm").then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [call.wasm](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html)（或[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/call.html)）。再提一次，查看 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来了解 fetchAndInstantiate() 的源代码。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [call.wasm](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html)（或[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/call.html)）。再提一次，查看 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来了解 fetchAndInstantiate() 的源代码。
 
 ### 从 JavaScript 导入函数
 
@@ -267,7 +272,8 @@ fetchAndInstantiate("logger.wasm", importObject).then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)）。
 
 ### WebAssembly 内存
 
@@ -326,7 +332,8 @@ consoleLogString(offset, length) {
     call $log))
 ```
 
-> **备注：** 注意上面的双分号语法，它允许在 WebAssembly 文件中添加注释。
+> [!NOTE]
+> 注意上面的双分号语法，它允许在 WebAssembly 文件中添加注释。
 
 现在，我们可以从 JavaScript 中创建一个 1 页的内存（Memory）然后把它传递进去。这会在控制台输出"Hi"。
 
@@ -340,7 +347,8 @@ fetchAndInstantiate("logger2.wasm", importObject).then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到完整源代码 [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到完整源代码 [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)）。
 
 ### WebAssembly 表格
 
@@ -381,7 +389,8 @@ WebAssembly 可以增加一个 anyfunc 类型（"any"的含义是该类型能够
 - 元素段（elem section）能够将一个模块中的任意函数子集以任意顺序列入其中，并允许出现重复。列入其中的函数将会被表格引用并，且引用顺序是其出现的顺序。
 - 元素段（elem section）中的 (i32.const 0) 值是一个偏移量——它需要在元素段开始的位置声明，其作用是表明函数引用是在表格中的什么索引位置开始存储的。这里我们指定的偏移量是 0，表格大小是 2（参考上面），因此，我们可以在索引 0 和 1 的位置填入两个引用。如果想在偏移量 1 的位置开始写入引用，那么，我们必须使用 (i32.const 1) 并且表格大小必须是 3.
 
-> **备注：** 未初始化的元素会被设定一个默认的调用即抛出（throw-on-call）值。
+> [!NOTE]
+> 未初始化的元素会被设定一个默认的调用即抛出（throw-on-call）值。
 
 在 JavaScript 中，可以创建这样一个表格实例的等价的函数调用看起来如下所示：
 
@@ -460,9 +469,11 @@ fetchAndInstantiate("wasm-table.wasm").then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([实时查看](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html))。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([实时查看](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html))。
 
-> **备注：** 就像内存一样，表格也能够从 JavaScript 中创建 (参考 [WebAssembly.Table()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table)) 并且能够导入和导出到其他 wasm 模块。
+> [!NOTE]
+> 就像内存一样，表格也能够从 JavaScript 中创建 (参考 [WebAssembly.Table()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table)) 并且能够导入和导出到其他 wasm 模块。
 
 ### 改变表格和动态链接
 
@@ -511,7 +522,8 @@ fetchAndInstantiate("wasm-table.wasm").then(function (instance) {
 4. 在这个函数的最后一部分，我们创建了常量值 0，然后调用表格中索引 0 处的函数，该函数正是我们之前在 shared0.wat 中的使用元素代码段（elem block）存储的 shared0func。
 5. shared0func 在被调用之后会加载我们在 shared1.wat 中使用 i32.store 指令存储在内存中的 42。
 
-> **备注：** 上面的表达式会隐式地把这些值出栈，但是，你可以在使用指令的时候进行显式地声明。例如：
+> [!NOTE]
+> 上面的表达式会隐式地把这些值出栈，但是，你可以在使用指令的时候进行显式地声明。例如：
 >
 > ```wasm
 > (i32.store (i32.const 0) (i32.const 42))
@@ -538,7 +550,8 @@ Promise.all([
 
 每一个将被编译的模块都可以导入相同的内存和表格对象，这也就是共享相同的线性内存和表格的“地址空间”。
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)）。
 
 ## 总结
 
diff --git a/files/zh-cn/webassembly/using_the_javascript_api/index.md b/files/zh-cn/webassembly/using_the_javascript_api/index.md
index 7ef0e43a6ee3a9..c9a43167c70b4e 100644
--- a/files/zh-cn/webassembly/using_the_javascript_api/index.md
+++ b/files/zh-cn/webassembly/using_the_javascript_api/index.md
@@ -7,13 +7,15 @@ slug: WebAssembly/Using_the_JavaScript_API
 
 如果你已经使用 Emscripten 等工具编译了另一种语言的模块，或者自己加载并运行代码，那么下一步是了解如何使用 WebAssembly JavaScript API 的其他功能。这篇文章告诉你你需要知道什么。
 
-> **备注：** 如果你不熟悉本文中提到到基础概念并且需要更多的解释，先阅读 [WebAssembly 概念](/zh-CN/docs/WebAssembly/Concepts) 然后再回来。
+> [!NOTE]
+> 如果你不熟悉本文中提到到基础概念并且需要更多的解释，先阅读 [WebAssembly 概念](/zh-CN/docs/WebAssembly/Concepts) 然后再回来。
 
 ## 一个简单的例子
 
 让我们通过一步一步的例子来了解如何在 WebAssembly 中使用 Javascript API，和如何在网页中加载一个 wasm 模块。
 
-> **备注：** 你可以发现同样的代码在 [webassembly-examples](https://github.com/mdn/webassembly-examples) GitHub 仓库。
+> [!NOTE]
+> 你可以发现同样的代码在 [webassembly-examples](https://github.com/mdn/webassembly-examples) GitHub 仓库。
 
 ### 准备工作
 
@@ -55,11 +57,13 @@ fetch("simple.wasm")
   });
 ```
 
-> **备注：** 我们已经非常详细地解释了这种语法如何工作通过[加载和运行 WebAssembly 代码](/zh-CN/docs/WebAssembly/Loading_and_running#使用Fetch)。如果不确定，请回到那里进行复习。
+> [!NOTE]
+> 我们已经非常详细地解释了这种语法如何工作通过[加载和运行 WebAssembly 代码](/zh-CN/docs/WebAssembly/Loading_and_running#使用Fetch)。如果不确定，请回到那里进行复习。
 
 这样做的结果是执行我们导出的 WebAssembly 函数 exported_func，这样又调用了另一个我们导入的 JavaScript 函数 imported_func, 它将 WebAssembly 实例（42）中提供的值记录到控制台。如果你保存实例代码并且在支持 WebAssembly 的浏览器中运行，你将看到此操作。
 
-> **备注：** WebAssembly 在 Firefox 52+ 和 Chrome 57+/latest Opera 是默认支持的 (你也可以运行 wasm 代码 在 Firefox 47+ 通过将 _about:config_ 中的 `javascript.options.wasm` flag 设置为 enabling , 或者在 Chrome (51+) 以及 Opera (38+) 通过访问 _chrome://flags_ 并且将 _Experimental WebAssembly_ flag 设置为 enabling.)
+> [!NOTE]
+> WebAssembly 在 Firefox 52+ 和 Chrome 57+/latest Opera 是默认支持的 (你也可以运行 wasm 代码 在 Firefox 47+ 通过将 _about:config_ 中的 `javascript.options.wasm` flag 设置为 enabling , 或者在 Chrome (51+) 以及 Opera (38+) 通过访问 _chrome://flags_ 并且将 _Experimental WebAssembly_ flag 设置为 enabling.)
 
 这是一个冗长的，令人费解的例子并且实现了很少的功能，但它确实有助于说明这是可能的——在 Web 应用中与 JavaScript 一起使用 WebAssembly 代码。正如我们一直说的，WebAssembly 并不旨在替代 JavaScript; 两者可以一起工作，借鉴对方的优势。
 
@@ -125,7 +129,8 @@ Note: 由于 {{domxref("ArrayBuffer")}} 的 byteLength 是不可变的，所以
 
 1. 像前面那样在相同的目录下复制一份 memory.wasm。
 
-   > **备注：** 你可以在这里 [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat) 找到模块的文本表示形式。
+   > [!NOTE]
+   > 你可以在这里 [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat) 找到模块的文本表示形式。
 
 2. 回到你的示例文件 `memory.html`，像前面那样获取、编译和实例化你的 wasm 模块——在你的脚本代码底部加入下面的代码：
 
@@ -155,7 +160,8 @@ Note: 由于 {{domxref("ArrayBuffer")}} 的 byteLength 是不可变的，所以
 - 它们允许 JavaScript 在模块编译之前或者同时获取和创建内存的初始内容。
 - 它们允许一个单一的内存对象被多个模块实例导入，对于实现 WebAssembly 动态链接来说，这是一个关键的构建模块。
 
-> **备注：** 你可以在这里 [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html)（[或实时运行](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)）找到我们的完整例子——这个版本使用了 [fetchAndInstantiate()](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 函数。
+> [!NOTE]
+> 你可以在这里 [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html)（[或实时运行](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)）找到我们的完整例子——这个版本使用了 [fetchAndInstantiate()](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 函数。
 
 ## 表格
 
@@ -175,7 +181,8 @@ WebAssembly 表格是一个可变大小的带类型的引用数组，其中的
 
 1. 在一个新的目录中复制一份 table.wasm。
 
-   > **备注：** 你可以在 [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) 中查看模块的文本表示。
+   > [!NOTE]
+   > 你可以在 [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) 中查看模块的文本表示。
 
 2. 创建一份 [HTML 模板](https://github.com/mdn/webassembly-examples/blob/master/template/template.html)的新副本并将其命名为`table.html`.
 3. 如前所示，获取、编译并且实例化你的 wasm 模块——将下面的代码放入到 HTML body 底部的 [\<script>](/zh-CN/docs/Web/HTML/Element/script) 节点里面：
@@ -196,7 +203,8 @@ WebAssembly 表格是一个可变大小的带类型的引用数组，其中的
 
 这段代码获取获取了存储在表格中的每一个函数引用，然后实例化它们从而将它们拥有的值打印到控制台——注意每一个函数引用是如何使用 [Table.prototype.get()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get) 函数获取的以及在其后面增加一对小括号从而真正的调用该函数。
 
-> **备注：** 你可以在 [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html)（[或实时查看运行](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)）找到我们完整的示例——这个版本使用了 [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 函数。
+> [!NOTE]
+> 你可以在 [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html)（[或实时查看运行](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)）找到我们完整的示例——这个版本使用了 [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 函数。
 
 ## 多样性
 
diff --git a/files/zh-tw/games/index.md b/files/zh-tw/games/index.md
index 2118f13d3b2b7c..d37fe7e3770df2 100644
--- a/files/zh-tw/games/index.md
+++ b/files/zh-tw/games/index.md
@@ -15,7 +15,8 @@ slug: Games
 
 我們也涵蓋了參考的章節，你可以從那裡找到遊戲開發最需要用到的一些 API。
 
-> **備註：** 建立遊戲會需要用上一些 web 的核心技術，如 HTML、CSS、JavaScript。[學習專區](/zh-TW/docs/Learn)會是個很好的學習區域。
+> [!NOTE]
+> 建立遊戲會需要用上一些 web 的核心技術，如 HTML、CSS、JavaScript。[學習專區](/zh-TW/docs/Learn)會是個很好的學習區域。
 
 ## 從原生到 Web
 
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
index 65cabfe1022722..c570c4138f2bd8 100644
--- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
@@ -99,7 +99,8 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}
 
-> **備註：** 每次球撞到牆上時嘗試改變球的顏色為隨機的顏色。
+> [!NOTE]
+> 每次球撞到牆上時嘗試改變球的顏色為隨機的顏色。
 
 ## 下一步
 
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
index 260750fcd00d2d..d8fed4486391cd 100644
--- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
@@ -105,7 +105,8 @@ ctx.closePath();
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}
 
-> **備註：** 練習改變物體的大小和顏色
+> [!NOTE]
+> 練習改變物體的大小和顏色
 
 ## 下一步
 
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md
index c90f325a85aa52..d20393dc0c16c5 100644
--- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md
@@ -33,9 +33,11 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
 若一開始就單純使用 JavaScript，將能學到紮實的網頁遊戲開發知識。往後則可自由選擇你自己愛用的框架 (Framework) 來完成專案。
 框架同樣是由 JavaScript 寫成的工具。因此在用框架開發之前，能先了解程式語言本身將有助於了解框架內部所發生的事。框架可加快開發速度並代勞遊戲中某些無聊的部份，但若遊戲運作得不如預期，你都可試著除錯或撰寫純 JavaScript 的解決方案。
 
-> **備註：** 如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈[使用剖析器 (Phaser) 的打磚塊遊戲](/zh-TW/docs/Games/Workflows/2D_breakout_game_Phaser)〉系列相關文章 。
+> [!NOTE]
+> 如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈[使用剖析器 (Phaser) 的打磚塊遊戲](/zh-TW/docs/Games/Workflows/2D_breakout_game_Phaser)〉系列相關文章 。
 
-> **備註：** 此系列文章也能當做行動遊戲開發工作坊的教材。如果你想講解一般的遊戲開發，則可利用此教學為基礎的〈[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)〉。
+> [!NOTE]
+> 此系列文章也能當做行動遊戲開發工作坊的教材。如果你想講解一般的遊戲開發，則可利用此教學為基礎的〈[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)〉。
 
 ## 下一步
 
diff --git a/files/zh-tw/glossary/block-level_content/index.md b/files/zh-tw/glossary/block-level_content/index.md
index af6eba3ad8a4cd..d9f51510f6b7db 100644
--- a/files/zh-tw/glossary/block-level_content/index.md
+++ b/files/zh-tw/glossary/block-level_content/index.md
@@ -9,7 +9,8 @@ HTML（超文字標記語言, **Hypertext Markup Language**）元素通常為『
 
 瀏覽器預設以在元素前後換行的方式，表現區塊級元素。視覺上會呈現為一排縱向堆疊的方塊。
 
-> **備註：** 區塊級元素必定以換行方式，取得完整寬度的空間（向左右兩側儘可能地延伸出去）。
+> [!NOTE]
+> 區塊級元素必定以換行方式，取得完整寬度的空間（向左右兩側儘可能地延伸出去）。
 
 以下範例將展示區塊級元素的影響：
 
diff --git a/files/zh-tw/glossary/first-class_function/index.md b/files/zh-tw/glossary/first-class_function/index.md
index 6282c73fa0a547..130d8774a06bec 100644
--- a/files/zh-tw/glossary/first-class_function/index.md
+++ b/files/zh-tw/glossary/first-class_function/index.md
@@ -21,7 +21,8 @@ foo();
 
 我們指派一個匿名函式 到 `變數` 中，然後在這個變數後面加上括弧 `()` 的方式來調用那個函式。
 
-> **備註：** 即使你已經為函式命名了，你仍然可以透過這個變數的名稱來調用它。有命名的函數在你除錯時是有幫助的。_但是這並不會影響我們調用它的方式_。
+> [!NOTE]
+> 即使你已經為函式命名了，你仍然可以透過這個變數的名稱來調用它。有命名的函數在你除錯時是有幫助的。_但是這並不會影響我們調用它的方式_。
 
 ## 範例 | 將函式作為參數來傳遞
 
@@ -40,7 +41,8 @@ greeting(sayHello, "JavaScript!");
 
 我們將 `sayHello()` 函式當成是變數傳遞到 `greeting()` 函式，這說明了我們將函式視為是一個值來使用它。
 
-> **備註：** 將函式作為參數傳遞到另一個函式時，被當作參數傳遞的那個函式我們稱之為回調函式 **[Callback function](/zh-TW/docs/Glossary/Callback_function)**。_`sayHello` 就是一個回調函式。_
+> [!NOTE]
+> 將函式作為參數傳遞到另一個函式時，被當作參數傳遞的那個函式我們稱之為回調函式 **[Callback function](/zh-TW/docs/Glossary/Callback_function)**。_`sayHello` 就是一個回調函式。_
 
 ## 範例 | 回傳一個函式
 
@@ -56,7 +58,8 @@ function sayHello() {
 
 在這個例子中，我們需要從另一個函式中回傳函式回來 - _在 JavaScript 中，我們可以回傳函式是因為我們將函式當成是一個 `值` 。_
 
-> **備註：** 當一個函式可以回傳一個函式時，稱之為高階函式 (**Higher-Order Function** )。
+> [!NOTE]
+> 當一個函式可以回傳一個函式時，稱之為高階函式 (**Higher-Order Function** )。
 
 回到剛才的例子，現在我們需要調用 `sayHello` 函式與它所回傳的匿名函式 (`Anonymous Function`)。為了達成這個目標，我們有兩種方式：
 
@@ -74,7 +77,8 @@ myFunc();
 
 這樣做的話，它會回傳 `Hello!` 這個訊息。
 
-> **備註：** 如果你直接調用 `sayHello` 的話，你必須再使用另一個變數來儲存之後再調用它，調用 `sayHello` 只會回傳函式回來而**非調用它所回傳的函式**。
+> [!NOTE]
+> 如果你直接調用 `sayHello` 的話，你必須再使用另一個變數來儲存之後再調用它，調用 `sayHello` 只會回傳函式回來而**非調用它所回傳的函式**。
 
 ### 2- 使用雙括號
 
diff --git a/files/zh-tw/glossary/index.md b/files/zh-tw/glossary/index.md
index a6f8038a1b3312..28a21573e228ea 100644
--- a/files/zh-tw/glossary/index.md
+++ b/files/zh-tw/glossary/index.md
@@ -9,4 +9,5 @@ slug: Glossary
 
 你可以從側邊欄中選擇術語。
 
-> **備註：** 這個術語表永遠不會寫完。你可以幫忙[撰寫新術語](/zh-TW/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_Glossary)或是改寫現有的術語。
+> [!NOTE]
+> 這個術語表永遠不會寫完。你可以幫忙[撰寫新術語](/zh-TW/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_Glossary)或是改寫現有的術語。
diff --git a/files/zh-tw/learn/accessibility/index.md b/files/zh-tw/learn/accessibility/index.md
index 74ff648d09a26c..e586a2a40a5cc9 100644
--- a/files/zh-tw/learn/accessibility/index.md
+++ b/files/zh-tw/learn/accessibility/index.md
@@ -21,7 +21,8 @@ When someone describes a site as "accessible," they mean that any user can use a
 
 要理解本模塊的概念，最少理解 [HTML](/zh-TW/docs/Learn/HTML)、[CSS](/zh-TW/docs/Learn/CSS)、[JavaScript](/zh-TW/docs/Learn/JavaScript) 是個好主意。如果在學習相關技術時學習會更好。
 
-> **備註：** 如果使用的設備無法讓你建立自己的文件，可以試著在 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 這種程式撰寫網站，執行大多數範例。
+> [!NOTE]
+> 如果使用的設備無法讓你建立自己的文件，可以試著在 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 這種程式撰寫網站，執行大多數範例。
 
 ## 教學
 
diff --git a/files/zh-tw/learn/accessibility/wai-aria_basics/index.md b/files/zh-tw/learn/accessibility/wai-aria_basics/index.md
index 091e378eefa16f..d50549e9006fe4 100644
--- a/files/zh-tw/learn/accessibility/wai-aria_basics/index.md
+++ b/files/zh-tw/learn/accessibility/wai-aria_basics/index.md
@@ -60,7 +60,8 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 有關 WAI-ARIA 屬性的重要觀點是他們不會影響網頁的任何內容，除了透過瀏覽器無障礙 API 揭露資訊之外(螢幕報讀器即從中獲得資訊)。儘管 WAI-ARIA 屬性對 CSS 選擇元素很有用，但不會影響網頁結構、DOM 等。
 
-> **備註：** 你可以在 WAI-ARIA 規格中找到所有 ARIA 的角色及其用法的很有用清單，請參見 [Definition of Roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)連結以獲得更進一步的資訊。
+> [!NOTE]
+> 你可以在 WAI-ARIA 規格中找到所有 ARIA 的角色及其用法的很有用清單，請參見 [Definition of Roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)連結以獲得更進一步的資訊。
 >
 > 本規格也涵括所有屬性與狀態的清單，請參見 [Definitions of States and Properties (all aria-\* attributes)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def)連結以獲得更進一步的資訊。
 
@@ -80,7 +81,8 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 在本文中，我們未試圖涵蓋每一個 WAI-ARIA 特徵及其確切的支援細節。相反地，我們將涵蓋最關鍵的 WAI-ARIA 特徵讓你知道；如果我們沒有提到任何支援細節，你可認定該特徵得到很好的支援。我們會明確地提到這個例外情況。
 
-> **備註：** 某些 JavaScript 儲存庫支援 WAI-ARIA，亦即當他們產生 UI 特徵如複雜的表單控制措施，他們添加 ARIA 屬性來增進這些特徵的無障礙。如果你在尋找第三方的 JavaScript 解決方案來快速的開發 UI，你應該謹慎地考量其 UI 插件的無障礙作為你決定使用的重要因素。jQuery UI(參見[About jQuery UI: Deep accessibility support](https://jqueryui.com/about/#deep-accessibility-support))、 [ExtJS](https://www.sencha.com/products/extjs/)與 [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html)是良好範例。
+> [!NOTE]
+> 某些 JavaScript 儲存庫支援 WAI-ARIA，亦即當他們產生 UI 特徵如複雜的表單控制措施，他們添加 ARIA 屬性來增進這些特徵的無障礙。如果你在尋找第三方的 JavaScript 解決方案來快速的開發 UI，你應該謹慎地考量其 UI 插件的無障礙作為你決定使用的重要因素。jQuery UI(參見[About jQuery UI: Deep accessibility support](https://jqueryui.com/about/#deep-accessibility-support))、 [ExtJS](https://www.sencha.com/products/extjs/)與 [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html)是良好範例。
 
 ### 何時應該使用 WAI-ARIA?
 
@@ -95,7 +97,8 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 再說一次，只有需要的時候才使用它！
 
-> **備註：** 請確保有各類實際的使用者來測試你的網站 — 非身障者、使用螢幕報讀器者、使用鍵盤導覽者等。他們將比你更能了解它運作的效果。
+> [!NOTE]
+> 請確保有各類實際的使用者來測試你的網站 — 非身障者、使用螢幕報讀器者、使用鍵盤導覽者等。他們將比你更能了解它運作的效果。
 
 ## 實作 WAI-ARIA 開發
 
@@ -227,7 +230,8 @@ var intervalID = window.setInterval(showQuote, 10000);
 
 這將使螢幕報讀器在內容更新時讀出更新的內容。
 
-> **備註：** 如果你嘗試從 `XMLHttpRequest` 執行 `file://` URL`，`大部分的瀏覽器會拋出安全異常，例如你直接上傳該檔案到瀏覽器(透過雙擊滑鼠鍵等)。為了這項可以執行，你需要將檔案上傳到一個網站伺服器如 [GitHub](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)，或本機網站伺服器如 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)。
+> [!NOTE]
+> 如果你嘗試從 `XMLHttpRequest` 執行 `file://` URL`，`大部分的瀏覽器會拋出安全異常，例如你直接上傳該檔案到瀏覽器(透過雙擊滑鼠鍵等)。為了這項可以執行，你需要將檔案上傳到一個網站伺服器如 [GitHub](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)，或本機網站伺服器如 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)。
 
 這裡有一項額外的考量—只有文字更新才讀出。如果我們也總是讀出標題，那將很好，以讓使用者記住讀出的內容。為做到這樣，我們可以添加 [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) 屬性到這個部分，再次更新你的 `<section>` 標籤如下所示：
 
@@ -237,7 +241,8 @@ var intervalID = window.setInterval(showQuote, 10000);
 
 `aria-atomic="true"`屬性告訴螢幕報讀器以一個原子單位方式讀出完整的元素內容，而不僅只讀出更新的部分。
 
-> **備註：** 你可以查看完成的範例 [aria-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html) ([看實際頁面](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html))。
+> [!NOTE]
+> 你可以查看完成的範例 [aria-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html) ([看實際頁面](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html))。
 
 > **備註：** [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) 屬性在即時區塊更新時對於控制讀出甚麼內容也相當有用，例如你可以僅獲得讀出新增或移除的內容。
 
@@ -301,7 +306,8 @@ var intervalID = window.setInterval(showQuote, 10000);
      aria-required="true" />
    ```
 
-> **備註：** 你可以查看完成的範例 [form-validation-updated.html](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html)。
+> [!NOTE]
+> 你可以查看完成的範例 [form-validation-updated.html](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html)。
 
 除了傳統的 {{htmlelement("label")}} 元素之外，WAI-ARIA 也能賦予一些進階的表單標籤技術。我們已經談論過使用 [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) 屬性在我們不希望標籤讓有視覺的使用者看見的地方來提供標籤(參見上述 [路標/地標](#路標地標) 章節。如果你想要指定一個非`<label>` 元素當作標籤或具有相同標籤多重的表單輸入標籤，這裡有使用其他屬性如 [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) 的其他標籤技術，如果你想要其他的訊息與表單輸入關聯並且報讀出來，使用 [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby)。更多細節請參見 [WebAIM's Advanced Form Labeling article](https://webaim.org/techniques/forms/advanced) 。
 
@@ -350,7 +356,8 @@ function toggleMusician(bool) {
 
 現在當你使用螢幕報讀器測試它時，按鈕將會用句子如"Click me!, button" 讀出—這樣好多了。
 
-> **備註：** 記住最好盡可能使用正確的語意元素，如果你希望創建一個按鈕，並且可使用 {{htmlelement("button")}} 元素，就應該使用 {{htmlelement("button")}} 元素！
+> [!NOTE]
+> 記住最好盡可能使用正確的語意元素，如果你希望創建一個按鈕，並且可使用 {{htmlelement("button")}} 元素，就應該使用 {{htmlelement("button")}} 元素！
 
 #### 透過複雜的插件引導使用者
 
@@ -399,7 +406,8 @@ function toggleMusician(bool) {
 </div>
 ```
 
-> **備註：** 這裡最引人注目的是我們移除在原來範例中的連結，並且只使用清單項目作為頁籤—這樣做是因為對螢幕報讀器使用者比較少困擾(連結並非真正地帶妳到哪個地方；他們只是改變視窗)，並且可讓組件大小/位置在組件特徵中有很好的運作—當這些是放在連結上的時候，瀏覽器將維持報讀"1 of 1"，而非"1 of 3"、"2 of 3"等。
+> [!NOTE]
+> 這裡最引人注目的是我們移除在原來範例中的連結，並且只使用清單項目作為頁籤—這樣做是因為對螢幕報讀器使用者比較少困擾(連結並非真正地帶妳到哪個地方；他們只是改變視窗)，並且可讓組件大小/位置在組件特徵中有很好的運作—當這些是放在連結上的時候，瀏覽器將維持報讀"1 of 1"，而非"1 of 3"、"2 of 3"等。
 
 新的特徵如下：
 
@@ -412,7 +420,8 @@ function toggleMusician(bool) {
 
 在我們的測試中，這些新的結構確實提供整體的改善。頁籤現在被認定為頁籤（如螢幕報讀器讀出「索引標籤」），被選取的頁籤以「已選取」指出並讀出頁籤的名稱，螢幕報讀器也告訴你目前所在的頁籤數目。此外，因為設置 `aria-hidden`（只有非隱藏的頁籤才設定 `aria-hidden="false"`），非隱藏的頁籤是唯一你可以向下導覽的內容，意即所選取的內容很容易找到。
 
-> **備註：** 如果有任何你很明確地不希望螢幕報讀器讀出的內容，你可賦予它們 `aria-hidden="true"` 屬性。
+> [!NOTE]
+> 如果有任何你很明確地不希望螢幕報讀器讀出的內容，你可賦予它們 `aria-hidden="true"` 屬性。
 
 ## 總結
 
diff --git a/files/zh-tw/learn/accessibility/what_is_accessibility/index.md b/files/zh-tw/learn/accessibility/what_is_accessibility/index.md
index b678b8a9910034..bcb243dd417ae4 100644
--- a/files/zh-tw/learn/accessibility/what_is_accessibility/index.md
+++ b/files/zh-tw/learn/accessibility/what_is_accessibility/index.md
@@ -39,7 +39,8 @@ slug: Learn/Accessibility/What_is_accessibility
 
 身心障礙者和非身心障礙者一樣多元，他們的障別也是如此。重點是，不要光用自己使用電腦和 web 的角度去思考這件事：_你並不是無障礙網頁的用戶_。下文將解釋應當考慮的障別，還有他們訪問 web 內容的特殊工具（通常稱作 **assistive technologies**、**AT**、**輔助工具**、**輔具**）。
 
-> **備註：** 世界衛生組織的[殘疾與健康](http://www.who.int/mediacentre/factsheets/fs352/zh/)指出「超過 10 億人，約佔世界人口的 15%，患有某種形式的殘疾。」、且「1.1 億至 1.9 億成年人有很嚴重的功能性障礙。」。
+> [!NOTE]
+> 世界衛生組織的[殘疾與健康](http://www.who.int/mediacentre/factsheets/fs352/zh/)指出「超過 10 億人，約佔世界人口的 15%，患有某種形式的殘疾。」、且「1.1 億至 1.9 億成年人有很嚴重的功能性障礙。」。
 
 ### 視覺障礙
 
@@ -96,7 +97,8 @@ slug: Learn/Accessibility/What_is_accessibility
 
 康乃爾大學 [2014 年的殘疾報告](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf)顯示，2014 年美國 21 歲至 64 歲的人中，有 4.5% 的人有認知障礙。
 
-> **備註：** WebAIM 的[認知頁面](https://webaim.org/articles/cognitive/)提供了更多資訊，值得一讀
+> [!NOTE]
+> WebAIM 的[認知頁面](https://webaim.org/articles/cognitive/)提供了更多資訊，值得一讀
 
 ## 專案引入無障礙
 
@@ -124,7 +126,8 @@ slug: Learn/Accessibility/What_is_accessibility
 
 為了表明你對無障礙網頁的關心，請在你的網站上發佈無障礙網頁聲明，並詳細說明你為無障礙網頁做了哪些事情、採取了哪些步驟。如果有人抱怨你的網站存在無障礙問題，請他們回報給你們，並嘗試解決。
 
-> **備註：** 我們的 [Handling common accessibility problems article](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) 包含了應該進行詳細測試的無障礙網頁規範。
+> [!NOTE]
+> 我們的 [Handling common accessibility problems article](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) 包含了應該進行詳細測試的無障礙網頁規範。
 
 總而言之：
 
diff --git a/files/zh-tw/learn/css/css_layout/index.md b/files/zh-tw/learn/css/css_layout/index.md
index c9a74b01da6a02..d69711fcd7c32e 100644
--- a/files/zh-tw/learn/css/css_layout/index.md
+++ b/files/zh-tw/learn/css/css_layout/index.md
@@ -15,7 +15,8 @@ slug: Learn/CSS/CSS_layout
 2. 熟悉 CSS 基本原理，如 [CSS 簡介](/zh-TW/docs/Learn/CSS/First_steps)中所述。
 3. 了解如何 [樣式框](/zh-TW/docs/Learn/CSS/Building_blocks)。
 
-> **備註：** 如果你正在使用的電腦/平板/其他設備讓你無法建立自己的文件，你可以透過線上工具如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 編輯並嘗試（大部分的）範例程式碼。
+> [!NOTE]
+> 如果你正在使用的電腦/平板/其他設備讓你無法建立自己的文件，你可以透過線上工具如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 編輯並嘗試（大部分的）範例程式碼。
 
 ## 指導
 
diff --git a/files/zh-tw/learn/css/first_steps/getting_started/index.md b/files/zh-tw/learn/css/first_steps/getting_started/index.md
index 9d4a4684a96df0..10162d9c43031a 100644
--- a/files/zh-tw/learn/css/first_steps/getting_started/index.md
+++ b/files/zh-tw/learn/css/first_steps/getting_started/index.md
@@ -68,7 +68,8 @@ slug: Learn/CSS/First_steps/Getting_started
 </html>
 ```
 
-> **備註：** 如果你用來閱讀這篇文章的環境沒辦法簡單地建立檔案，也別擔心。底下會提供線上程式編輯器讓你就在這個頁面中撰寫範例程式。
+> [!NOTE]
+> 如果你用來閱讀這篇文章的環境沒辦法簡單地建立檔案，也別擔心。底下會提供線上程式編輯器讓你就在這個頁面中撰寫範例程式。
 
 ## 為我們的文件加入 CSS
 
@@ -211,7 +212,8 @@ h1 + p {
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
-> **備註：** 如你所見， CSS 提供我們一些方法來選擇元素，而目前為止我們只涉及到表面！我們將在課程後面的[選擇器](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors)章節裡有更深入的探討。
+> [!NOTE]
+> 如你所見， CSS 提供我們一些方法來選擇元素，而目前為止我們只涉及到表面！我們將在課程後面的[選擇器](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors)章節裡有更深入的探討。
 
 ## 依狀態指定樣式
 
@@ -241,7 +243,8 @@ a:hover {
 
 我們已經將連結在懸停狀態下的底線移除。你也可以移除連結在所有狀態下的底線。但是在實際運作的網站上，值得注意的是你要確保使用網站的人能分判哪些元素是連結。留著底線會是一個讓人意識到段落中的某些文字以可點擊的重要線索，這是人們已經習慣的行為。就像所有 CSS 規則一樣，你所作的更改可能會使得內容難被閱讀或使用，我們將儘可能將這些可能的問題點突顯出來。
 
-> **備註：** 你將會在 MDN 網站以及這些課程中經常看到[可用性](/zh-TW/docs/Learn/Accessibility)的觀點被提起。當我們討論可用性的時候，指的是為了讓我們網頁能被每個人了解及使用所必須的東西。
+> [!NOTE]
+> 你將會在 MDN 網站以及這些課程中經常看到[可用性](/zh-TW/docs/Learn/Accessibility)的觀點被提起。當我們討論可用性的時候，指的是為了讓我們網頁能被每個人了解及使用所必須的東西。
 >
 > 你的訪客可能使用帶滑鼠或觸控面板的電腦，或是有觸控螢幕的電話。又或著他們使用螢幕閱讀器，它會將網站的內容唸出來，或著他們需要更大的文體，或著只能使用鍵盤來瀏覽網站。
 >
diff --git a/files/zh-tw/learn/css/first_steps/index.md b/files/zh-tw/learn/css/first_steps/index.md
index 41a28927959080..03931c4cc36dd9 100644
--- a/files/zh-tw/learn/css/first_steps/index.md
+++ b/files/zh-tw/learn/css/first_steps/index.md
@@ -21,7 +21,8 @@ CSS（階層式樣式表）被用來設定網頁的樣式及佈局。舉例來
 2. 設定好一個基本的工作環境（參考[安裝基本軟體](/zh-TW/docs/Learn/Getting_started_with_the_web/Installing_basic_software)單元），並知道如何建立以及管檔案（參考[檔案的管理](/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files)單元）。
 3. 對 HTML 有基本的認識，像是 [HTML 介紹](/zh-TW/docs/Learn/HTML/Introduction_to_HTML)單元裡所提到的。
 
-> **備註：** 如果你使用的電腦／平板／或其它裝置上，無法建立你所需要的檔案。你可以在像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 的線上程式編輯平台上嘗試（絕大部分的）範例程式。
+> [!NOTE]
+> 如果你使用的電腦／平板／或其它裝置上，無法建立你所需要的檔案。你可以在像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 的線上程式編輯平台上嘗試（絕大部分的）範例程式。
 
 ## 導覽
 
diff --git a/files/zh-tw/learn/css/first_steps/what_is_css/index.md b/files/zh-tw/learn/css/first_steps/what_is_css/index.md
index bc181a1d3772f2..54103a6ac609c5 100644
--- a/files/zh-tw/learn/css/first_steps/what_is_css/index.md
+++ b/files/zh-tw/learn/css/first_steps/what_is_css/index.md
@@ -49,7 +49,8 @@ slug: Learn/CSS/First_steps/What_is_CSS
 
 所謂的**呈現**文件，指的是將文件轉換為你的讀者可用的形式。像是 {{Glossary("Mozilla Firefox","Firefox")}} 、 {{Glossary("Google Chrome","Chrome")}} 或 {{Glossary("Microsoft Edge","Edge")}} 這類的{{Glossary("browser","瀏灠器")}}，是設計來將文件視覺化，再呈現電腦螢幕、投影機上或是由列表機列印出來。
 
-> **備註：** 瀏覽器有時候被稱為 {{Glossary("User agent","user agent")}}（用戶終端），它基本上泛指電腦裡安裝的應用軟體。雖然並不是唯一，當我們在討論 CSS 的時候，用戶終端主要指的是瀏覽器。至於其它的用戶終端，有些能夠將 HTML 和 CSS 轉換為 PDF 再列印出來。
+> [!NOTE]
+> 瀏覽器有時候被稱為 {{Glossary("User agent","user agent")}}（用戶終端），它基本上泛指電腦裡安裝的應用軟體。雖然並不是唯一，當我們在討論 CSS 的時候，用戶終端主要指的是瀏覽器。至於其它的用戶終端，有些能夠將 HTML 和 CSS 轉換為 PDF 再列印出來。
 
 CSS 可以用在很基本文字樣式上頭，像是改變標題和連結的[顏色](/zh-TW/docs/Web/CSS/color_value)及[尺寸](/zh-TW/docs/Web/CSS/font-size)。它可以用在建立布局，像是[將原本單欄的文字內容加入布局](/zh-TW/docs/Web/CSS/Layout_cookbook/Column_layouts)，劃分出主要的內容以及包含相關資訊的側邊欄。它甚至可以用在建立[動畫](/zh-TW/docs/Web/CSS/CSS_animations)效果。點進上面的連結，看看相關的例子。
 
@@ -87,7 +88,8 @@ p {
 
 你將會發些有些值很容易學會，而另一些則需要查資料確認。MDN 上有各個屬性的獨立頁面讓你能查到屬性及其可使用的值，在你忘記了或是想知道其它可能用法的時候提供一個快速的路徑。
 
-> **備註：** 你可以在 MDN 的 [CSS 參考資源](/zh-TW/docs/Web/CSS/Reference)找到所有的 CSS 屬性（以及其它 CSS 特性）頁面的連結。 另外，當你需要得到某個 CSS 特性的更多資訊，應該去習慣使用「mdn _特性名稱_」的方式在你喜歡搜尋引擊上搜尋。舉例來說，嘗試以「mdn color」和「mdn font-size」作關鍵字搜尋！
+> [!NOTE]
+> 你可以在 MDN 的 [CSS 參考資源](/zh-TW/docs/Web/CSS/Reference)找到所有的 CSS 屬性（以及其它 CSS 特性）頁面的連結。 另外，當你需要得到某個 CSS 特性的更多資訊，應該去習慣使用「mdn _特性名稱_」的方式在你喜歡搜尋引擊上搜尋。舉例來說，嘗試以「mdn color」和「mdn font-size」作關鍵字搜尋！
 
 ## CSS 的各個主題（單元）
 
diff --git a/files/zh-tw/learn/css/howto/index.md b/files/zh-tw/learn/css/howto/index.md
index 8702963dd1ce9f..c701ecfdaeea16 100644
--- a/files/zh-tw/learn/css/howto/index.md
+++ b/files/zh-tw/learn/css/howto/index.md
@@ -53,4 +53,5 @@ slug: Learn/CSS/Howto
 - [使用 CSS 格線布局](/zh-TW/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
 - [使用 CSS 生成內容](/zh-TW/docs/Learn/CSS/Howto/Generated_content)
 
-> **備註：** 我們有一本針對 [CSS 布局解法](/zh-TW/docs/Web/CSS/Layout_cookbook)的食譜，內有可正常執行的範例與常見布局任務說明。
+> [!NOTE]
+> 我們有一本針對 [CSS 布局解法](/zh-TW/docs/Web/CSS/Layout_cookbook)的食譜，內有可正常執行的範例與常見布局任務說明。
diff --git a/files/zh-tw/learn/css/styling_text/index.md b/files/zh-tw/learn/css/styling_text/index.md
index 0609e3f4ec84d1..c90a11ed5611ed 100644
--- a/files/zh-tw/learn/css/styling_text/index.md
+++ b/files/zh-tw/learn/css/styling_text/index.md
@@ -11,7 +11,8 @@ slug: Learn/CSS/Styling_text
 
 在開始這個單元之前，你應該先熟悉基礎的 HTML，如 [HTML 介紹](/zh-TW/docs/Learn/HTML/Introduction_to_HTML) 這個單元所討論的，並且要對 CSS 的基礎感到輕鬆，如 [CSS 介紹](/zh-TW/docs/Learn/CSS/First_steps) 討論的。
 
-> **備註：** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/), [CodePen](https://codepen.io/) or [Glitch](https://glitch.com/).
+> [!NOTE]
+> If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/), [CodePen](https://codepen.io/) or [Glitch](https://glitch.com/).
 
 ## 指南
 
diff --git a/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.md b/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.md
index f21eb71f4160f9..91a6731fa3cd81 100644
--- a/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.md
@@ -32,7 +32,8 @@ slug: Learn/Forms/How_to_structure_a_web_form
 
 我們之前就講過這件事了。
 
-> **警告：** 絕對不能在表單裡面再嵌入表單。這會讓表單行為變得難以理解，所以是一個壞主意。
+> [!WARNING]
+> 絕對不能在表單裡面再嵌入表單。這會讓表單行為變得難以理解，所以是一個壞主意。
 
 你可以從表單外面控制 {{HTMLElement("form")}} 。這麼做的話，除非使用 [`form`](/zh-TW/docs/Web/HTML/Attributes/form) 將其與表單關聯，否則該操作預設上和任何表單無關。引入此功能是為了可以在即使該操作未嵌在表單中，其依舊能顯式地將操作與表單綁定。
 
@@ -66,7 +67,8 @@ slug: Learn/Forms/How_to_structure_a_web_form
 </form>
 ```
 
-> **備註：** 你可以在[fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) 觀察範例（[或著觀察這個動態互動](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)）。
+> [!NOTE]
+> 你可以在[fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) 觀察範例（[或著觀察這個動態互動](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)）。
 
 在閱讀表單時，螢幕報讀器會針對第一個小部件組，說出「Fruit juice size small」、接著針對第二個小部件組，說出「Fruit juice size medium」、第三個則是「Fruit juice size large」。
 
@@ -115,7 +117,8 @@ slug: Learn/Forms/How_to_structure_a_web_form
 </form>
 ```
 
-> **備註：** 你可以在 [checkbox-label.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html) 觀察示例（[這裡有展示版本！](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)）
+> [!NOTE]
+> 你可以在 [checkbox-label.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html) 觀察示例（[這裡有展示版本！](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)）
 
 ### 多個標籤
 
@@ -163,9 +166,11 @@ The above variants increase in effectiveness as you go through them:
 - In the second example, things are a bit clearer — the label read out along with the input is "name star name edit text required", and the labels are still read out separately. Things are still a bit confusing, but it's a bit better this time because the `<input>` has a label associated with it.
 - The third example is best — the actual label is read out all together, and the label read out with the input is "name required edit text".
 
-> **備註：** You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.
+> [!NOTE]
+> You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.
 
-> **備註：** You can find this example on GitHub as [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). don't test the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!
+> [!NOTE]
+> You can find this example on GitHub as [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). don't test the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!
 
 ## 建立表單所常用的 HTML 結構
 
diff --git a/files/zh-tw/learn/forms/index.md b/files/zh-tw/learn/forms/index.md
index 73696c77da04a0..26233f2e053ee0 100644
--- a/files/zh-tw/learn/forms/index.md
+++ b/files/zh-tw/learn/forms/index.md
@@ -48,7 +48,8 @@ slug: Learn/Forms
 | {{HTMLElement("select")}}   | {{domxref("HTMLSelectElement")}}   | 在`選擇`元素代表呈現一個選項菜單的控制。                                                                                                              |
 | {{HTMLElement("textarea")}} | {{domxref("HTMLTextAreaElement")}} | 該 `textarea` 的元素代表多行純文本編輯控制。                                                                                                          |
 
-> **備註：** 所有的表單元素，因為所有的 HTML 元素，支持 {{domxref("HTMLElement")}} DOM 接口。
+> [!NOTE]
+> 所有的表單元素，因為所有的 HTML 元素，支持 {{domxref("HTMLElement")}} DOM 接口。
 
 ### HTML 屬性
 
diff --git a/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md b/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md
index 79646ebd46f334..a2e46701669026 100644
--- a/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md
@@ -169,7 +169,8 @@ h1 {
    }
    ```
 
-   > **備註：** 我已增加了對於 "px" 的說明在上面. 任何在 CSS document 中 `/*` `*/` 內的文字是 **CSS 說明**, 瀏覽器在編譯時會忽略掉. 這是一個可以用來說明你做了什麼的幫助訊息.
+   > [!NOTE]
+   > 我已增加了對於 "px" 的說明在上面. 任何在 CSS document 中 `/*` `*/` 內的文字是 **CSS 說明**, 瀏覽器在編譯時會忽略掉. 這是一個可以用來說明你做了什麼的幫助訊息.
 
 4. 現在我們將會在 HTML body 中為包含文字的元素設置字體大小，`<h1>`,`<li>`,`<p>`。我們也設置標題居中，並在正文內容上設置一些行高和間距，使其更具可讀性
 
@@ -280,7 +281,8 @@ img {
 
 Finally, we'll center the image to make it look better. We could use the `margin: 0 auto` trick again as we did earlier for the body, but we also need to do something else. The body element is **block level**, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are **inline** elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using `display: block;`.
 
-> **備註：** Don't worry if you don't yet understand `display: block;` and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our [display reference page](/zh-TW/docs/Web/CSS/display).
+> [!NOTE]
+> Don't worry if you don't yet understand `display: block;` and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our [display reference page](/zh-TW/docs/Web/CSS/display).
 
 ## 結論
 
diff --git a/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md
index 1b5adce2737390..72fca2484028ea 100644
--- a/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -32,7 +32,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 3. **`styles` folder**: 這個資料夾包含了能夠設計你的網站的 CSS 碼(例如：設定文字與背景顏色)，建立一個資料夾命名為 `styles`，並將它存到 `test-site` 這個資料夾下。
 4. **`scripts` folder**: 這個資料將包含能夠使網站具有互動性的 JavaScript 程式碼。(例如：按下按鈕後會載入資料)。建立一個資料夾命名`scripts` ，並將它存到 `test-site` 這個資料夾下。
 
-> **備註：** 在 Windows 的電腦上，你可能在設定副檔名上會遇到一些困難。因為 Windows 預設會將已知的檔案類型名稱隱藏。一般來說你可以將這項設定關掉，只需要去檔案總管，選擇「資料夾選項」並取消選取「隱藏已知檔案類型的副檔名」，並點選 **OK** 。有關不同版本的 Windows 的設定方法，請利用搜尋引擎搜尋。
+> [!NOTE]
+> 在 Windows 的電腦上，你可能在設定副檔名上會遇到一些困難。因為 Windows 預設會將已知的檔案類型名稱隱藏。一般來說你可以將這項設定關掉，只需要去檔案總管，選擇「資料夾選項」並取消選取「隱藏已知檔案類型的副檔名」，並點選 **OK** 。有關不同版本的 Windows 的設定方法，請利用搜尋引擎搜尋。
 
 ## 檔案路徑
 
@@ -69,7 +70,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
 至此，你已經知道目前需要知道的了。
 
-> **備註：** Windows 的檔案系統會傾向使用反斜線(\\)，而非斜線(/)。例如 `C:\windows`. 這並沒有關係，即使你是在 Windows 上開發網站，你仍然應該在程式碼中使用斜線(/)。
+> [!NOTE]
+> Windows 的檔案系統會傾向使用反斜線(\\)，而非斜線(/)。例如 `C:\windows`. 這並沒有關係，即使你是在 Windows 上開發網站，你仍然應該在程式碼中使用斜線(/)。
 
 ## 還有什麼需要被完成的?
 
diff --git a/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md b/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md
index 9b90180d73c4f0..3931535fb34f5b 100644
--- a/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md
@@ -117,7 +117,8 @@ My cat is very grumpy
 
 說明文字應該要好好呈現這個圖片的內容，上面這個例子就很差。好的例子像是：「Firefox Logo：有一隻狐狸繞著地球」
 
-> **備註：** 你可以在 [MDN's Accessibility landing page](/zh-TW/docs/Web/Accessibility) 查看無障礙頁面的資訊。
+> [!NOTE]
+> 你可以在 [MDN's Accessibility landing page](/zh-TW/docs/Web/Accessibility) 查看無障礙頁面的資訊。
 
 ## 標記文字
 
diff --git a/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md
index f4bd30b9c26d93..bab80eb6c274ec 100644
--- a/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -39,7 +39,8 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software
 
 在著手開發之前，應先安裝至少兩款瀏覽器以利後續測試。
 
-> **備註：** Internet Explorer 與當今的 web 不相容，可能會讓專案跑不動。
+> [!NOTE]
+> Internet Explorer 與當今的 web 不相容，可能會讓專案跑不動。
 
 ### 安裝伺服器軟體
 
diff --git a/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md
index 9f06a8af384e4f..528baf99213a49 100644
--- a/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -25,7 +25,8 @@ JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 Ja
 
 但無論如何，要讓 JavaScript 跟 HTML 和 CSS 合作無間的話，可能還要費一些功夫。現在你將會從一些細小的地方開始著手，接著一步步地往前進。首先，我們將會向你展示如何將一些基本的 JavaScript 給加入你的頁面中，並且打造一個*「hello world!」*的範例（[這同時也是許多程式語言的標準範例程式](https://zh.wikipedia.org/zh-tw/Hello_World)）。
 
-> **警告：** 如果你還沒有學習過先前的課程，[請你下載這個範例程式碼](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip)，並以此開始練習。
+> [!WARNING]
+> 如果你還沒有學習過先前的課程，[請你下載這個範例程式碼](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip)，並以此開始練習。
 
 1. 首先，進入你測試網頁的資料夾中，並建立一個名為 `main.js` 的檔案，再將她存放於 `scripts` 資料夾內。
 2. 接著，開啟 `index.html` 檔案，並在 `</body>` 這個結束標籤之前的位置，使用一行新的空間來輸入以下的元素：
@@ -44,7 +45,8 @@ JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 Ja
 
 5. 現在請你將修改過的 HTML 和 JavaScript 給存檔，再用瀏覽器讀取 `index.html`。你應該會看到以下的內容：![](hello-world.png)
 
-> **備註：** 我們選擇將 {{htmlelement("script")}} 元素放在接近 HTML 檔案底部的原因，是因為瀏覽器是依照程式碼存在檔案中的順序來讀取 HTML 檔案的。如果 JavaScript 先被瀏覽器讀取了，那她應該要去影響她之後的 HTML 程式碼，但有時候卻行不通，因為她比應該產生改變的 HTML 還要早被讀取到。因此，把她放在接近檔案底部的位置，通常都會是一個不錯的策略。
+> [!NOTE]
+> 我們選擇將 {{htmlelement("script")}} 元素放在接近 HTML 檔案底部的原因，是因為瀏覽器是依照程式碼存在檔案中的順序來讀取 HTML 檔案的。如果 JavaScript 先被瀏覽器讀取了，那她應該要去影響她之後的 HTML 程式碼，但有時候卻行不通，因為她比應該產生改變的 HTML 還要早被讀取到。因此，把她放在接近檔案底部的位置，通常都會是一個不錯的策略。
 
 ### 發生什麼事了？
 
@@ -52,13 +54,15 @@ JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 Ja
 
 之後，我們將變數 `myHeading` 中 {{domxref("Element.innerHTML", "innerHTML")}} 特性的值設為「Hello world!」。
 
-> **備註：** Both of the features you used above are parts of the [Document Object Model (DOM) API](/zh-TW/docs/Web/API/Document_Object_Model), which allows you to manipulate documents.
+> [!NOTE]
+> Both of the features you used above are parts of the [Document Object Model (DOM) API](/zh-TW/docs/Web/API/Document_Object_Model), which allows you to manipulate documents.
 
 ## 語言基礎速成
 
 接著我們來解釋一下 JavaScript 基本特性，以讓你更加地了解她是如何運作的。更好的事情是，這些特性基本上也存在於所有程式語言中。所以如果你可以充分理解這些基礎知識，你就可以撰寫程式來創造無限可能！
 
-> **警告：** 在這篇文章中，請你試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果你想要了解更多 JavaScript 主控台的細節，請參閱 [Discover browser developer tools](/zh-TW/docs/Learn/Discover_browser_developer_tools)。
+> [!WARNING]
+> 在這篇文章中，請你試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果你想要了解更多 JavaScript 主控台的細節，請參閱 [Discover browser developer tools](/zh-TW/docs/Learn/Discover_browser_developer_tools)。
 
 ### 變數（Variables）
 
@@ -68,11 +72,14 @@ JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 Ja
 let myVariable;
 ```
 
-> **備註：** 在 JavaScript 檔案內的每行內容都需要在結尾加上分號，以標示出這行結束的位置。只有在需要於單行中隔開敘述句時，分號才是絕對需要的。然而，有些人相信在每一個敘述句結尾加上分號才是最佳實踐。這裡有其他何時要加或不加分號的規則——請參考 [Your Guide to Semicolons in JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) 以瞭解更多資訊。
+> [!NOTE]
+> 在 JavaScript 檔案內的每行內容都需要在結尾加上分號，以標示出這行結束的位置。只有在需要於單行中隔開敘述句時，分號才是絕對需要的。然而，有些人相信在每一個敘述句結尾加上分號才是最佳實踐。這裡有其他何時要加或不加分號的規則——請參考 [Your Guide to Semicolons in JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) 以瞭解更多資訊。
 
-> **備註：** 基本上你可以幫變數取任何名字，不過還是有一些限制的（請參閱[這篇文章](http://www.codelifter.com/main/tips/tip_020.shtml)以了解變數的命名規則）。假如不太確定，可以[檢查變數名稱](https://mothereff.in/js-variables)來看看是否合法。
+> [!NOTE]
+> 基本上你可以幫變數取任何名字，不過還是有一些限制的（請參閱[這篇文章](http://www.codelifter.com/main/tips/tip_020.shtml)以了解變數的命名規則）。假如不太確定，可以[檢查變數名稱](https://mothereff.in/js-variables)來看看是否合法。
 
-> **備註：** JavaScript 是會區分大小寫字母的——`myVariable` 就跟 `myvariable` 不相同。如果你的程式碼出現了一些問題，可以試著檢查一下字母的大小寫！
+> [!NOTE]
+> JavaScript 是會區分大小寫字母的——`myVariable` 就跟 `myvariable` 不相同。如果你的程式碼出現了一些問題，可以試著檢查一下字母的大小寫！
 
 宣告了一個變數之後，你可以為她指定一個數值：
 
@@ -258,7 +265,8 @@ Everything in between is a comment.
 
 其實還有更多的運算子等的你去探索，但我們將在這裡先打住。你可以參照這篇[運算式與運算子](/zh-TW/docs/Web/JavaScript/Reference/Operators)以取得完整的列表。
 
-> **備註：** 混合使用多種資料型態的話，可能會在計算時產生一些奇怪的結果，所以你要謹慎地為變數選用正確的資料類型。舉個例子：在主控台中輸入 `"35" + "25"`。為什麼你沒有得到你所想要的結果？因為使用引號框住數字會將她轉換成字串，所以你其實是將兩個字串給連接起來，而不是將她們給相加。如果你輸入的是 `35 + 25`，你將會得到正確的結果。
+> [!NOTE]
+> 混合使用多種資料型態的話，可能會在計算時產生一些奇怪的結果，所以你要謹慎地為變數選用正確的資料類型。舉個例子：在主控台中輸入 `"35" + "25"`。為什麼你沒有得到你所想要的結果？因為使用引號框住數字會將她轉換成字串，所以你其實是將兩個字串給連接起來，而不是將她們給相加。如果你輸入的是 `35 + 25`，你將會得到正確的結果。
 
 ### 條件（Conditionals）
 
diff --git a/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md
index 17170b9874e861..6440049836dbf2 100644
--- a/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -63,11 +63,13 @@ slug: Learn/Getting_started_with_the_web/Publishing_your_website
    另外，請勾選 _Initialize this repository with a README_ 後點選 _Create repository_。![](github-create-repo.png)
 4. 之後，把網站內容拖曳到 repository 目錄，並勾選 _Commit changes_。
 
-   > **備註：** 請確定目錄內有 _index.html_ 檔案。
+   > [!NOTE]
+   > 請確定目錄內有 _index.html_ 檔案。
 
 5. 現在讓瀏覽器連到 _username_.github.io 來看看你的網站。例如你的用戶名字是 _chrisdavidmills_，就連到 [chrisdavidmills.github.io](http://chrisdavidmills.github.io/)。
 
-   > **備註：** 讓網站上線需要一點時間。如果網站沒有馬上運行，稍等一段時間後再試一次。
+   > [!NOTE]
+   > 讓網站上線需要一點時間。如果網站沒有馬上運行，稍等一段時間後再試一次。
 
 想多理解的話，請參考 [GitHub Pages Help](https://help.github.com/categories/github-pages-basics/).
 
diff --git a/files/zh-tw/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/zh-tw/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index 797cd902094e14..d7d2fbd3f2b54e 100644
--- a/files/zh-tw/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/zh-tw/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -17,7 +17,8 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 2. **你對某個主題所提供的資訊到哪種程度？**寫個標題加上幾段文字，或是在網頁上加個圖片。
 3. 簡單的問：**你網站的外觀為何？**背景顏色？哪種字型比較合適？一般字型？卡通化的字型？又粗又大的字體？還是要纖細淡化的文字呢？
 
-> **備註：** 複雜專案就需要更詳細的建構指南，包含所用的顏色、字型、物件之間的留白空間、適合的書寫風格，等等。這些要素有時會統整為設計指南或品牌手冊，你可參閱〈[Firefox OS Guidelines](https://www.mozilla.org/en-US/styleguide/products/firefox-os/)〉進一步了解。
+> [!NOTE]
+> 複雜專案就需要更詳細的建構指南，包含所用的顏色、字型、物件之間的留白空間、適合的書寫風格，等等。這些要素有時會統整為設計指南或品牌手冊，你可參閱〈[Firefox OS Guidelines](https://www.mozilla.org/en-US/styleguide/products/firefox-os/)〉進一步了解。
 
 ## 從頭設計
 
@@ -25,7 +26,8 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 
 ![](website-drawing-scan.png)
 
-> **備註：** 即便是實際的複雜網站，設計團隊也都會先在紙上勾勒草圖，再接著透過圖檔編輯器或 Web 技術弄出數位版的草稿。
+> [!NOTE]
+> 即便是實際的複雜網站，設計團隊也都會先在紙上勾勒草圖，再接著透過圖檔編輯器或 Web 技術弄出數位版的草稿。
 >
 > Web 團隊往往編制了圖像設計師與{{Glossary("UX", "使用者經驗")}} (User Experience；UX) 設計師各 1 名。圖像設計師當然是負責整合網站的視覺效果；較屬抽象角色的 UX 設計師則要確定使用者與網站的互動方式。
 
@@ -53,7 +55,8 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 
 ![](updated-google-images.png)
 
-> **備註：** 在網路上可找到的大多數圖片，包含 Google 圖片服務在內，都已註冊了著作權。為了避免自己可能違反著作權法，你可以透過 Google 的授權篩選功能。只要點擊「**搜尋工具**」再找到「**使用權限**」即可：
+> [!NOTE]
+> 在網路上可找到的大多數圖片，包含 Google 圖片服務在內，都已註冊了著作權。為了避免自己可能違反著作權法，你可以透過 Google 的授權篩選功能。只要點擊「**搜尋工具**」再找到「**使用權限**」即可：
 >
 > ![](updated-google-images-licensing.png)
 
diff --git a/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md
index 7055a081e37cb8..256138c0f7c79c 100644
--- a/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -35,7 +35,8 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 
 超連結可說是網路中最令人振奮的革新技術。當然啦，早在網路技術萌芽之初，它們就已經在那了，它們正是網路之所以被稱為「網路」的最大原因 — 它讓我們的文件能任意地與其他文件(或者資源)相互連結（或是連結文件中的特定部份），讓我們能透過一個簡單的網路位址來經營我們的網路應用（相較之下，本機應用(native apps)就必須要安裝在主機上才能使用）。幾乎所有的網路內容都能被轉換成一個連結，讓網路瀏覽器在這些連結被點擊或觸發之後，跳轉到該網路位址({{glossary("URL")}})上。
 
-> **備註：** URL 能夠指向 HTML 檔案、純文字檔案、圖片、文字文件、影音檔案等等可存在網路上的東西。如果網路瀏覽器不知道如何顯示或者處理該檔案的話，它會問你想要開啟這個檔案（將檔案交由本機應用來處理）還是要下載該檔案（意即你可以待會兒再處理）。
+> [!NOTE]
+> URL 能夠指向 HTML 檔案、純文字檔案、圖片、文字文件、影音檔案等等可存在網路上的東西。如果網路瀏覽器不知道如何顯示或者處理該檔案的話，它會問你想要開啟這個檔案（將檔案交由本機應用來處理）還是要下載該檔案（意即你可以待會兒再處理）。
 
 以 BBC 的主頁為例，裡面就包含了非常多的連結，各自連到不同新聞、網站的其它地方(導覽功能)，或者登入/註冊頁面等等。
 
@@ -76,7 +77,8 @@ I'm creating a link to [the Mozilla homepage](https://www.mozilla.org/en-US/).
 
 I'm creating a link to [the Mozilla homepage](https://www.mozilla.org/en-US/).
 
-> **備註：** 連結標題只有在游標停在連結上方時才會出現，也就是說那些只依賴鍵盤來瀏覽網頁的人將會很難看到這個訊息，因此，如果說標題資訊對網頁易用性(usability)有著重大影響的話，你應該把它放在大家都看得到的地方，比方說放在一般的文字元素裡。
+> [!NOTE]
+> 連結標題只有在游標停在連結上方時才會出現，也就是說那些只依賴鍵盤來瀏覽網頁的人將會很難看到這個訊息，因此，如果說標題資訊對網頁易用性(usability)有著重大影響的話，你應該把它放在大家都看得到的地方，比方說放在一般的文字元素裡。
 
 ### 不要只用看的：建立你自己的範例連結
 
@@ -98,7 +100,8 @@ I'm creating a link to [the Mozilla homepage](https://www.mozilla.org/en-US/).
 </a>
 ```
 
-> **備註：** 在往後的教學中，你還會學到更多的圖片使用技法。
+> [!NOTE]
+> 在往後的教學中，你還會學到更多的圖片使用技法。
 
 ## 快速理解 URL 和路徑
 
@@ -135,7 +138,8 @@ URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位
   <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
   ```
 
-> **備註：** 你可以將多個這種語法組成一個較為複雜的 URL，例如：`../../../complex/path/to/my/file.html`。
+> [!NOTE]
+> 你可以將多個這種語法組成一個較為複雜的 URL，例如：`../../../complex/path/to/my/file.html`。
 
 ### 文件片段 (Document fragments)
 
@@ -276,7 +280,8 @@ URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位
 
 ![An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items](navigation-example.png)
 
-> **備註：** 如果你卡住了，或者不確定有沒有做對，你可以到 [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up) 目錄來偷瞄答案。
+> [!NOTE]
+> 如果你卡住了，或者不確定有沒有做對，你可以到 [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up) 目錄來偷瞄答案。
 
 ## E-mail 連結
 
@@ -305,7 +310,8 @@ URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位
 </a>
 ```
 
-> **備註：** 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成[百分號編碼](http://en.wikipedia.org/wiki/Percent-encoding)。也請注意這裡使用問號(`?`)來分隔主要 URL 和其他欄位；以 & 來分隔 `mailto:` URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 [GET 方法](/zh-TW/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method)來得知有那些常用的查詢記號。
+> [!NOTE]
+> 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成[百分號編碼](http://en.wikipedia.org/wiki/Percent-encoding)。也請注意這裡使用問號(`?`)來分隔主要 URL 和其他欄位；以 & 來分隔 `mailto:` URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 [GET 方法](/zh-TW/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method)來得知有那些常用的查詢記號。
 
 以下是 `mailto` URL 的其他例子：
 
diff --git a/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md
index 845ca1626c7df1..a7dbf824480ce4 100644
--- a/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -58,7 +58,8 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 
 這是因為視覺效果並不能說明整個故事。 We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?
 
-> **備註：** Colorblind people represent around [4% of the world population](http://www.color-blindness.com/2006/04/28/colorblind-population/) or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were [285 million such people in the world](https://en.wikipedia.org/wiki/Visual_impairment), while the total population was [around 7 billion](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)).
+> [!NOTE]
+> Colorblind people represent around [4% of the world population](http://www.color-blindness.com/2006/04/28/colorblind-population/) or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were [285 million such people in the world](https://en.wikipedia.org/wiki/Visual_impairment), while the total population was [around 7 billion](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)).
 
 In your HTML code, you can mark up sections of content based on their _functionality_ — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of [consequences of not using the right element structure and semantics for the right job](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure).
 
@@ -238,7 +239,8 @@ In this case, the editor's note is supposed to merely provide extra direction fo
 
 This isn't really an `<aside>`, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a `<section>`, as it isn't part of the main content of the page. So a `<div>` is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.
 
-> **警告：** Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.
+> [!WARNING]
+> Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.
 
 ### Line breaks and horizontal rules
 
@@ -298,7 +300,8 @@ Once you've planned out the structure of a simple webpage, the next logical step
 
 Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?
 
-> **備註：** Save your work somewhere; you might need it later on.
+> [!NOTE]
+> Save your work somewhere; you might need it later on.
 
 ## Test your skills!
 
diff --git a/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md b/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md
index 33ed00f7253d16..5158fde2436ceb 100644
--- a/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md
@@ -42,7 +42,8 @@ My cat is very grumpy
 <p>My cat is very grumpy</p>
 ```
 
-> **備註：** HTML 中的元素是不區分大小寫的。例如：一個 {{htmlelement("title")}} 標籤可以寫成 `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` 之類的形式，都沒有問題。通常來說，為了保持一致性（consistency）、可讀性（readability），以及其他可能的原因，最好還是以小寫來撰寫標籤。
+> [!NOTE]
+> HTML 中的元素是不區分大小寫的。例如：一個 {{htmlelement("title")}} 標籤可以寫成 `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` 之類的形式，都沒有問題。通常來說，為了保持一致性（consistency）、可讀性（readability），以及其他可能的原因，最好還是以小寫來撰寫標籤。
 
 ## 分析 HTML 元素
 
@@ -226,11 +227,14 @@ textarea.onkeyup = function () {
 
 {{ EmbedLiveSample('區塊級元素_vs._行內元素Block_versus_inline_elements', 700, 200, "", "") }}
 
-> **備註：** HTML5 重新定義了元素類別：請見 [Element content categories](https://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories)。新的定義比先前所定義的更為準確且少歧義性，因此它們也同時比 block 和 inline 還來得複雜，所以我們選擇在這裡繼續使用這個觀念。
+> [!NOTE]
+> HTML5 重新定義了元素類別：請見 [Element content categories](https://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories)。新的定義比先前所定義的更為準確且少歧義性，因此它們也同時比 block 和 inline 還來得複雜，所以我們選擇在這裡繼續使用這個觀念。
 
-> **備註：** 在本主題所使用的區塊級（block）與行內級（inline）這兩個名詞，不應與 CSS 的 box 種類混淆。它們在預設時是很像的，但改變 CSS 的顯示型態（display type）並不會改變元素的類別，也不會影響該元素能包含或被包含的元素類別。HTML5 之所以會重新定義元素類別，部分也是基於此一原因。
+> [!NOTE]
+> 在本主題所使用的區塊級（block）與行內級（inline）這兩個名詞，不應與 CSS 的 box 種類混淆。它們在預設時是很像的，但改變 CSS 的顯示型態（display type）並不會改變元素的類別，也不會影響該元素能包含或被包含的元素類別。HTML5 之所以會重新定義元素類別，部分也是基於此一原因。
 
-> **備註：** 你可以查看區塊級元素與行內級元素分別有哪些元素——請見[區塊級元素](/zh-TW/docs/Glossary/Block-level_content)和[行內級元素](/zh-TW/docs/Glossary/Inline-level_content)。
+> [!NOTE]
+> 你可以查看區塊級元素與行內級元素分別有哪些元素——請見[區塊級元素](/zh-TW/docs/Glossary/Block-level_content)和[行內級元素](/zh-TW/docs/Glossary/Inline-level_content)。
 
 ### 空元素
 
@@ -245,7 +249,8 @@ textarea.onkeyup = function () {
 
 {{ EmbedLiveSample('空元素', 700, 300) }}
 
-> **備註：** 空元素（empty element）有時也被稱作 _void element_。
+> [!NOTE]
+> 空元素（empty element）有時也被稱作 _void element_。
 
 ## 屬性（Attribute）
 
@@ -461,7 +466,8 @@ window.addEventListener("load", drawOutput);
 3. 將剛複製的 HTML 範例貼到新開的檔案裡。
 4. 將檔案儲存為 `index.html`。
 
-> **備註：** 你也能在這找到 HTML 範例：[MDN Learning Area Github repo](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)。
+> [!NOTE]
+> 你也能在這找到 HTML 範例：[MDN Learning Area Github repo](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)。
 
 接著你就可以用網頁瀏覽器開啟你的檔案，看看這些原始碼會被渲染（rendered）的樣子，然後編輯原始碼並重新整理瀏覽器，再看看會變成怎樣。目前你的網頁會長這樣：
 
@@ -582,7 +588,8 @@ window.addEventListener("load", drawOutput);
 
 {{ EmbedLiveSample('實體參照Entity_references_引用_HTML_中的特殊字元', 700, 200, "", "", "hide-codepen-jsfiddle") }}
 
-> **備註：** 你可以在維基百科中找到完整的 HTML 字元實體參照的對照表：[List of XML and HTML character entity references](http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references)。請記得只要你的 HTML 的[字元編碼設定為 UTF-8](Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding)，你就不需要使用其他字元的實體參照，因為現今的瀏覽器都能應付。
+> [!NOTE]
+> 你可以在維基百科中找到完整的 HTML 字元實體參照的對照表：[List of XML and HTML character entity references](http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references)。請記得只要你的 HTML 的[字元編碼設定為 UTF-8](Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding)，你就不需要使用其他字元的實體參照，因為現今的瀏覽器都能應付。
 
 ## HTML 註解
 
@@ -604,7 +611,8 @@ HTML 就像大部分的程式語言，提供了一種能讓我們可以在原始
 
 恭喜你看完了這個章節，我們你能享受這個學習基礎 HTML 的旅程！目前，你應該已經了解 HTML 長什麼樣子、它最基本的運作方式，並且能夠寫出一些元素和屬性。基礎 HTML 大致上就到這裡結束，在單元接下來的章節中，我們將會更深入探討本章節學到的內容並介紹更多 HTML 的觀念。千萬別轉台！
 
-> **備註：** 目前，在你要開始學更多有關 HTML 的知識時，你可能也想要探索基礎的 [CSS](/zh-TW/docs/Learn/CSS)（Cascading Style Sheet）。CSS 是一種用來為你的網頁增添花樣的語言，例如改變字型、顏色，或改變頁面的布局。你很快就會發現，同時使用 HTML 和 CSS 會帶來很棒的效果。
+> [!NOTE]
+> 目前，在你要開始學更多有關 HTML 的知識時，你可能也想要探索基礎的 [CSS](/zh-TW/docs/Learn/CSS)（Cascading Style Sheet）。CSS 是一種用來為你的網頁增添花樣的語言，例如改變字型、顏色，或改變頁面的布局。你很快就會發現，同時使用 HTML 和 CSS 會帶來很棒的效果。
 
 ## 參見
 
diff --git a/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md
index 579f4da4318a0f..8f9cf96b023a46 100644
--- a/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -988,7 +988,8 @@ Here's the best rule of thumb: it's likely appropriate to use `<b>`, `<i>`, or `
 - {{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...
 - {{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...
 
-> **備註：** A kind warning about underline: **People strongly associate underlining with hyperlinks.** Therefore, on the Web, it's best to underline only links. Use the `<u>` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.
+> [!NOTE]
+> A kind warning about underline: **People strongly associate underlining with hyperlinks.** Therefore, on the Web, it's best to underline only links. Use the `<u>` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.
 
 ```html
 <!-- scientific names -->
diff --git a/files/zh-tw/learn/html/introduction_to_html/index.md b/files/zh-tw/learn/html/introduction_to_html/index.md
index 04ac8d7f6be5a6..28f162f543f15d 100644
--- a/files/zh-tw/learn/html/introduction_to_html/index.md
+++ b/files/zh-tw/learn/html/introduction_to_html/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Introduction_to_HTML
 
 在開始閱讀之前，你並不需要具備任何 HTML 知識，你只要能夠操作電腦、瀏覽網頁並消化其中的內容即可。你需要[建立一個基礎工作環境](/zh-TW/docs/Learn/Getting_started_with_the_web/Installing_basic_software)，並且了解[如何建立與管理檔案](/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files)── 這些都屬於我們 [Web 入門](/zh-TW/docs/Learn/Getting_started_with_the_web) 的一部分。
 
-> **備註：** 如果你是在某些無法建立個人檔案的電腦/平板/其他裝置上進行，你可以在一些線上 coding program（如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）上測試程式碼範例。
+> [!NOTE]
+> 如果你是在某些無法建立個人檔案的電腦/平板/其他裝置上進行，你可以在一些線上 coding program（如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）上測試程式碼範例。
 
 ## 導覽
 
diff --git a/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index f0aaae9a104f5a..13ce95de40984f 100644
--- a/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -155,9 +155,11 @@ The description is also used on search engine result pages. Let's go through an
 
    ![A Yahoo search result for "Mozilla Developer Network"](mdn-search-result.png)
 
-> **備註：** In Google, you will see some relevant subpages of MDN listed below the main MDN homepage link — these are called sitelinks, and are configurable in [Google's webmaster tools](https://www.google.com/webmasters/tools/) — a way to make your site's search results better in the Google search engine.
+> [!NOTE]
+> In Google, you will see some relevant subpages of MDN listed below the main MDN homepage link — these are called sitelinks, and are configurable in [Google's webmaster tools](https://www.google.com/webmasters/tools/) — a way to make your site's search results better in the Google search engine.
 
-> **備註：** Many `<meta>` features just aren't used any more. For example, the keyword `<meta>` element (`<meta name="keywords" content="fill, in, your, keywords, here">`) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.
+> [!NOTE]
+> Many `<meta>` features just aren't used any more. For example, the keyword `<meta>` element (`<meta name="keywords" content="fill, in, your, keywords, here">`) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.
 
 ### 其他種類的 metadata
 
@@ -267,7 +269,8 @@ If done correctly, when you save your HTML and refresh your browser you'll see t
 - The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. when you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.
 - The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)
 
-> **備註：** If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html) example page.
+> [!NOTE]
+> If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html) example page.
 
 ## 預設文件語言
 
diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md
index 0b4a0661f60246..a7a62429767f7a 100644
--- a/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -32,7 +32,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 為了在網頁上放置一個簡單的圖像，我們使用\<img>元素。 這是一個空元素（意味著它沒有文本內容或結束標記），並需要至少一個屬性（src）（有時稱為其完整標題，source）才有用。 src 屬性包含指向要嵌入頁面的圖像的路徑，該路徑可以是相對路徑或絕對路徑 URL，與\<a>元素中的 href 屬性相同。
 
-> **備註：** 在繼續之前，你應該閱讀有關 URL 和路徑的快速入門，以複習[相對路徑和絕對路徑 URL](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths)。
+> [!NOTE]
+> 在繼續之前，你應該閱讀有關 URL 和路徑的快速入門，以複習[相對路徑和絕對路徑 URL](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths)。
 
 舉例來說, 如果你的圖片名為 dinosaur.jpg 且與 HTML 檔案位於同一資料夾中，可以這樣嵌入圖片：
 
@@ -48,7 +49,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 像這樣.
 
-> **備註：** 搜索引擎還會讀取圖片名稱，並將其納入 SEO 中。 因此你應該為圖片提供一個描述性的檔名。 例如 dinosaur.jpg 的命名方式會比 img835.png 更好。
+> [!NOTE]
+> 搜索引擎還會讀取圖片名稱，並將其納入 SEO 中。 因此你應該為圖片提供一個描述性的檔名。 例如 dinosaur.jpg 的命名方式會比 img835.png 更好。
 
 你也可以用絕對路徑 URL 來嵌入圖片，例如
 
@@ -58,7 +60,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 但這麼做是沒有意義的，因為它只會使瀏覽器執行更多工作，瀏覽器需重複執行從 DNS 服務器中搜尋 IP 地址等等工作。你應將網站上的圖片與 HTML 存放在同一個伺服器上。
 
-> **警告：** 大多數圖像均受版權保護。 請勿在你的網站上隨意顯示圖片，除非：
+> [!WARNING]
+> 大多數圖像均受版權保護。 請勿在你的網站上隨意顯示圖片，除非：
 >
 > - 你是圖片的擁有者.
 > - 你已收到圖片所有者的白紙黑字認可。
@@ -72,7 +75,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 > **備註：** \<img>和\<video>之類的元素有時也稱為替換元素。 這是因為元素的內容和圖片大小是由外部（例如圖片或影音檔）所定義的，而不是由元素的內容定義。
 
-> **備註：** 你可以從在 [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) 上找到本節完成的示例（參見[開源碼](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)。）
+> [!NOTE]
+> 你可以從在 [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) 上找到本節完成的示例（參見[開源碼](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)。）
 
 ### 替代性文字
 
@@ -104,7 +108,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 本質上，關鍵是即使在看不見圖片的情況下也能提供相同的體驗。這樣可以確保所有使用者都不會丟失任何內容。嘗試在瀏覽器中關閉圖像，然後查看外觀。你很快就會意識到，如果看不到圖片，替代文字會很有幫助。
 
-> **備註：** For more information, see our guide to [Text Alternatives](/zh-TW/docs/Learn/Accessibility/HTML#Text_alternatives).
+> [!NOTE]
+> For more information, see our guide to [Text Alternatives](/zh-TW/docs/Learn/Accessibility/HTML#Text_alternatives).
 
 ### 寬與高
 
@@ -127,7 +132,8 @@ This is a good thing to do, resulting in the page loading quicker and more smoot
 
 However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct [aspect ratio](https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29). You should use an image editor to put your image at the correct size before putting it on your webpage.
 
-> **備註：** If you do need to alter an image's size, you should use [CSS](/zh-TW/docs/Learn/CSS) instead.
+> [!NOTE]
+> If you do need to alter an image's size, you should use [CSS](/zh-TW/docs/Learn/CSS) instead.
 
 ### 圖片標題
 
@@ -335,7 +341,8 @@ A better solution, is to use the HTML5 {{htmlelement("figure")}} and {{htmleleme
 
 The {{htmlelement("figcaption")}} element tells browsers, and assistive technology that the caption describes the other content of the {{htmlelement("figure")}} element.
 
-> **備註：** From an accessibility viewpoint, captions and [`alt`](/zh-TW/docs/Web/HTML/Element/img#alt) text have distinct roles. Captions benefit even people who can see the image, whereas [`alt`](/zh-TW/docs/Web/HTML/Element/img#alt) text provides the same functionality as an absent image. Therefore, captions and `alt` text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.
+> [!NOTE]
+> From an accessibility viewpoint, captions and [`alt`](/zh-TW/docs/Web/HTML/Element/img#alt) text have distinct roles. Captions benefit even people who can see the image, whereas [`alt`](/zh-TW/docs/Web/HTML/Element/img#alt) text provides the same functionality as an absent image. Therefore, captions and `alt` text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.
 
 A figure doesn't have to be an image. It is an independent unit of content that:
 
@@ -497,7 +504,8 @@ p {
 
 總結來說，如果圖片在內容上具有含義，則應使用 HTML 圖像。 如果圖像純粹是裝飾性的，則應使用 CSS 背景圖片。
 
-> **備註：** 在我們的 CSS 主題中，你將學到更多關於 CSS 背景圖片的知識。
+> [!NOTE]
+> 在我們的 CSS 主題中，你將學到更多關於 CSS 背景圖片的知識。
 
 ## 試試看!
 
diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/index.md b/files/zh-tw/learn/html/multimedia_and_embedding/index.md
index 3f34b043c1f600..c12a026dcd2937 100644
--- a/files/zh-tw/learn/html/multimedia_and_embedding/index.md
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/index.md
@@ -11,7 +11,8 @@ slug: Learn/HTML/Multimedia_and_embedding
 
 在此單元開始之前，我們假設你對 HTML 基礎知識 (如[HTML 介紹](/zh-TW/docs/Learn/HTML/Introduction_to_HTML)) 已經有一定的了解，如果還沒有，建議你先預習該部分再回來。
 
-> **備註：** 如果你所操作的電腦、平板或裝置環境不允許你建立自己的檔案，你可以在諸如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 這樣的網站上嘗試(多數的)範例程式碼。
+> [!NOTE]
+> 如果你所操作的電腦、平板或裝置環境不允許你建立自己的檔案，你可以在諸如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 這樣的網站上嘗試(多數的)範例程式碼。
 
 ## 導覽
 
diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md b/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
index 876408afc3ea66..0f7692b9bc1fef 100644
--- a/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
@@ -5,7 +5,8 @@ slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skil
 
 {{learnsidebar}}這項技能測試的目的是評估你是否了解我們的[視訊和音訊內容](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)以及[從物件到 iframe 的其他嵌入技術](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)文章。
 
-> **備註：** 你可以在下面的交互式編輯器中嘗試解決方案，但是下載代碼並使用在線工具如 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) 去完成測試。
+> [!NOTE]
+> 你可以在下面的交互式編輯器中嘗試解決方案，但是下載代碼並使用在線工具如 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) 去完成測試。
 >
 > 如果你遇到困難，請向我們尋求幫助-請參閱 [評估或進一步幫助](#評估或進一步幫助) 此頁面底部的部分。
 
diff --git a/files/zh-tw/learn/html/tables/basics/index.md b/files/zh-tw/learn/html/tables/basics/index.md
index 6ae9471cff79a1..acd594e5eb91a2 100644
--- a/files/zh-tw/learn/html/tables/basics/index.md
+++ b/files/zh-tw/learn/html/tables/basics/index.md
@@ -280,7 +280,8 @@ th {
 
 {{EmbedLiveSample("結果")}}
 
-> **備註：** 你也可以在 GitHub 上看到 [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([see it live also](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
+> [!NOTE]
+> 你也可以在 GitHub 上看到 [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([see it live also](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
 
 ## 用 \<th> 加上標頭元素
 
@@ -354,13 +355,15 @@ th {
    繼續修改你的 HTML 將所有外圍的 `<td>` 元素變成 `<th>` 元素。
 3. 儲存你的 HTML 並在瀏覽器上執行，現在你應該可以看到標頭應有的樣子。
 
-> **備註：** 你可以在 GitHub 上的[dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html)找到我們寫好的完整的範例([直接看看長怎樣](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
+> [!NOTE]
+> 你可以在 GitHub 上的[dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html)找到我們寫好的完整的範例([直接看看長怎樣](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
 
 ### 標頭為什麼實用?
 
 我們已經部分解答了這個問題 — 當有標頭清楚標示時，它能更簡單的使你找到資料並讓整體設計看起來更完整。
 
-> **備註：** 表格標頭有具備預設樣式 — 粗體並置中，即使你不加上你自己的表格樣式，他們仍然能被凸顯。
+> [!NOTE]
+> 表格標頭有具備預設樣式 — 粗體並置中，即使你不加上你自己的表格樣式，他們仍然能被凸顯。
 
 表格標頭還有一個額外的好處 — 伴隨著 `作用域(scope)` 屬性 (我們將會在下一個章節中學到)，當要連結每個標頭而所有資料都在同一列或欄時，這能允許表格使用起來更無障礙。並且，螢幕閱讀器能一次性讀出完整一列或一欄的資料，這是非常實用的。
 
@@ -422,7 +425,8 @@ th {
 3. 最後, 使用 `rowspan` 來讓 "Horse" and "Chicken" 合併橫跨兩列。
 4. 儲存並在瀏覽器上檢視你改善後的程式碼。
 
-> **備註：** 你可以在 GitHub 上的 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) 找到我們寫好的完整的範例 ([see it live also](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
+> [!NOTE]
+> 你可以在 GitHub 上的 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) 找到我們寫好的完整的範例 ([see it live also](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
 
 ## Providing common styling to columns
 
@@ -430,7 +434,8 @@ th {
 
 在我們繼續下去前，我們將要告訴你這節文章最後一個重點。HTML 有一個一次定義一整欄樣式資訊的方法 — **[`<col>`](/zh-TW/docs/Web/HTML/Element/col)** **[`<colgroup>`](/zh-TW/docs/Web/HTML/Element/colgroup)** 元素。These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on _every_ `<td>` or `<th>` in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.
 
-> **備註：** Styling columns like this is [limited to a few properties](https://www.w3.org/TR/CSS22/tables.html#columns): [`border`](/zh-TW/docs/Web/CSS/border), [`background`](/zh-TW/docs/Web/CSS/background), [`width`](/zh-TW/docs/Web/CSS/width), and [`visibility`](/zh-TW/docs/Web/CSS/visibility). To set other properties you'll have to either style every `<td>` or `<th>` in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.
+> [!NOTE]
+> Styling columns like this is [limited to a few properties](https://www.w3.org/TR/CSS22/tables.html#columns): [`border`](/zh-TW/docs/Web/CSS/border), [`background`](/zh-TW/docs/Web/CSS/background), [`width`](/zh-TW/docs/Web/CSS/width), and [`visibility`](/zh-TW/docs/Web/CSS/visibility). To set other properties you'll have to either style every `<td>` or `<th>` in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.
 
 Take the following simple example:
 
diff --git a/files/zh-tw/learn/html/tables/index.md b/files/zh-tw/learn/html/tables/index.md
index a0670fc1d5fd7f..2d94ccec7a4d49 100644
--- a/files/zh-tw/learn/html/tables/index.md
+++ b/files/zh-tw/learn/html/tables/index.md
@@ -11,7 +11,8 @@ HTML 的常見任務就是建構表格資料，某些元素與屬性正是為此
 
 開始本模塊之前，你要理解基本的 HTML：請參見 [HTML 介紹](/zh-TW/docs/Learn/HTML/Introduction_to_HTML)。
 
-> **備註：** 如果你用的電腦或平板之類的設備，無法允許建立自己的檔案，你可以把大部分的例子放在線上程式網站，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 如果你用的電腦或平板之類的設備，無法允許建立自己的檔案，你可以把大部分的例子放在線上程式網站，例如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
 
 ## 教學
 
diff --git a/files/zh-tw/learn/index.md b/files/zh-tw/learn/index.md
index f627a2dce544ae..0cc72950cafb83 100644
--- a/files/zh-tw/learn/index.md
+++ b/files/zh-tw/learn/index.md
@@ -11,7 +11,8 @@ MDN 學習專區不是要讓「初學者」變成「專家」；而是想讓「
 
 如果你是完全的新手，那 Web 開發過程可能頗有難度。我們希望能帶領你輕鬆學習，另提供相關細節以培養你的正確觀念。不論你是要學習 Web 開發（自學或參與課程）的學生、尋找教材的老師、純粹興趣使然的業餘工程師，甚至只是想進一步了解 Web 技術的人，都希望你在這裡就像在家裡一樣自在。
 
-> **警告：** 此學習專區將定期新增更多資訊。如果你希望能納入其他自己感興趣的主題，或覺得某個地方尚有缺漏，請到下方的[聯絡我們](#聯絡我們)尋找相關資訊並取得聯繫。
+> [!WARNING]
+> 此學習專區將定期新增更多資訊。如果你希望能納入其他自己感興趣的主題，或覺得某個地方尚有缺漏，請到下方的[聯絡我們](#聯絡我們)尋找相關資訊並取得聯繫。
 
 ## 入門
 
@@ -20,7 +21,8 @@ MDN 學習專區不是要讓「初學者」變成「專家」；而是想讓「
 - 基礎以外：如果你已經具備基本知識，則下一步就是了解 {{glossary("HTML")}} 與 {{glossary("CSS")}} 的細節。可從[HTML 介紹](/zh-TW/docs/Learn/HTML/Introduction_to_HTML)模組著手，再進到[CSS 介紹](/zh-TW/docs/Learn/CSS/First_steps)。
 - 寫些腳本：如果你嫻熟 HTML 與 CSS 或想動手寫程式碼，要不要去 {{glossary("JavaScript")}} 或伺服器端語言那邊看看呢 ── 就從我們的 [JavaScript 起步走](/zh-TW/docs/Learn/JavaScript/First_steps)與[伺服器端程式設計起步走](/zh-TW/docs/Learn/Server-side/First_steps)開始吧。
 
-> **備註：** 我們的[字彙庫](/zh-TW/docs/Glossary)另提供專有名詞的定義。
+> [!NOTE]
+> 我們的[字彙庫](/zh-TW/docs/Glossary)另提供專有名詞的定義。
 
 ## 涵蓋主題
 
diff --git a/files/zh-tw/learn/javascript/asynchronous/index.md b/files/zh-tw/learn/javascript/asynchronous/index.md
index 97257a70c5cc0d..158330eb925268 100644
--- a/files/zh-tw/learn/javascript/asynchronous/index.md
+++ b/files/zh-tw/learn/javascript/asynchronous/index.md
@@ -7,7 +7,7 @@ slug: Learn/JavaScript/Asynchronous
 
 在本單元我們來討論非同步的（ {{Glossary("asynchronous")}} ） {{Glossary("JavaScript")}} ，為何其如此重要，並了解它如何有效率的處理像是從伺服器獲取資源的這類潛在性阻塞（ blocking ）操作
 
-> **標註：**
+> [!CALLOUT]
 >
 > #### 想要成為前端開發人員?
 >
@@ -21,7 +21,8 @@ slug: Learn/JavaScript/Asynchronous
 
 如果你對非同步程式設計的概念還不太熟悉，強烈建議你應該先從[非同步程式設計通用概念](/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing)的文章開始學習。如果你已經具備其概念，那麼你或許可以跳至[非同步的 JavaScript 介紹](/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing)單元開始。
 
-> **備註：** 如果你正在使用電腦／平板／任何其它無法讓你建立檔案的裝置上，你可以嘗試在 [JSBin](https://jsbin.com/) 或是 [Glitch](https://glitch.com) 上測試本單元的範例程式碼。
+> [!NOTE]
+> 如果你正在使用電腦／平板／任何其它無法讓你建立檔案的裝置上，你可以嘗試在 [JSBin](https://jsbin.com/) 或是 [Glitch](https://glitch.com) 上測試本單元的範例程式碼。
 
 ## 指南
 
diff --git a/files/zh-tw/learn/javascript/asynchronous/introducing/index.md b/files/zh-tw/learn/javascript/asynchronous/introducing/index.md
index 1a6555c17d460b..468528ca663748 100644
--- a/files/zh-tw/learn/javascript/asynchronous/introducing/index.md
+++ b/files/zh-tw/learn/javascript/asynchronous/introducing/index.md
@@ -60,7 +60,8 @@ btn.addEventListener("click", () => {
 
 {{EmbedLiveSample('同步的 JavaScript', '100%', '70px')}}
 
-> **備註：** 使用 [`alert()`](/zh-TW/docs/Web/API/Window/alert) 有個很重要的事情要記得，雖然用在證明是否為同步的阻塞操作非常有用，但非常不建議用在實際的應用程式上，使用體驗將會相當糟糕。
+> [!NOTE]
+> 使用 [`alert()`](/zh-TW/docs/Web/API/Window/alert) 有個很重要的事情要記得，雖然用在證明是否為同步的阻塞操作非常有用，但非常不建議用在實際的應用程式上，使用體驗將會相當糟糕。
 
 ## 非同步 JavaScript
 
@@ -158,7 +159,8 @@ fetch("products.json")
   });
 ```
 
-> **備註：** 你可以在 GitHub （[原始碼](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js)，[線上範例](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/)）找到最終版本。
+> [!NOTE]
+> 你可以在 GitHub （[原始碼](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js)，[線上範例](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/)）找到最終版本。
 
 在這裡我們看到 `fetch()` 帶一個參數——你想要在網路上提取資源的網址——並回傳一個 [promise](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise) 。這一個 promise 用來表示一個完成或失敗的非同步操作的物件。它代表的是一種中間的狀態。本質上，它代表瀏覽器述說著：「我承諾我會盡快給予你一個答覆」，因此名稱就叫做「 promise 」。
 
@@ -167,7 +169,8 @@ fetch("products.json")
 - 兩個 [`then()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 區塊。兩個都含有回呼函式且先前的操作成功時就會執行，每一個回呼函式都會收到上一個成功完成操作的結果，因此你可以繼續執行一些事情。每一個 `.then()` 區塊都會回傳另一個 promise ，代表你可以將多個 `.then()` 區塊彼此作連結，所以多個非同步操作可以一個接著一個被用來依序執行。
 - 如果任何一個 `.then()` 區塊失敗就會跑到 [`catch()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) 區塊——類似像在同步區塊內部的 [`try...catch`](/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch) 做法，在 `catch()` 內部會提供一個失敗的物件，可以用來報告是發生甚麼類型的錯誤。要注意到同步的 `try...catch` 不能與 promises 一起做使用，儘管它可以和 [async ／ await](/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await) 待配使用，這稍後將會學習到。
 
-> **備註：** 你將會在稍後的單元學習到更多關於 promise 的觀念，即使現在尚未完全理解你也不需要太擔心。
+> [!NOTE]
+> 你將會在稍後的單元學習到更多關於 promise 的觀念，即使現在尚未完全理解你也不需要太擔心。
 
 ### 事件佇列
 
@@ -252,13 +255,15 @@ TypeError: image is undefined; can't access its "src" property
 
 這是因為在這個時間點瀏覽器試著去執行最後的 `console.log()` 時 `fetch()` 還沒有完成執行，所以 `image` 變數尚未賦予值因而導致錯誤。
 
-> **備註：** 由於安全性考量，你沒辦法呼叫 `fetch()` 從你的本地檔案系統抓取資料（或者其他在本地的相關操作）如果要在本地執行上面的範例，你需要在本地架起一個[網路伺服器](/zh-TW/docs/Learn/Common_questions/set_up_a_local_testing_server)來執行。
+> [!NOTE]
+> 由於安全性考量，你沒辦法呼叫 `fetch()` 從你的本地檔案系統抓取資料（或者其他在本地的相關操作）如果要在本地執行上面的範例，你需要在本地架起一個[網路伺服器](/zh-TW/docs/Learn/Common_questions/set_up_a_local_testing_server)來執行。
 
 ## 主動學習：讓一切非同步化！
 
 為了修復 `fetch()` 這個有問題的範例讓三個 `console.log()` 的敘述可以依序被執行你可以讓第三個 `console.log()` 也非同步的被執行。你可以新增一個新的 `.then()` 再將其放在裡面，這個新增的 `.then()` 再串連 promise 區塊的倒數第二個結尾；或者也可以將其放入原本的 `.then()` 中來解決這個問題。試著現在修復這個問題吧。
 
-> **備註：** 如果你的想法卡住，你可以[在這裡](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html)找到解答（[線上範例](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html)）。你也可以在我們稍後的[優雅的使用 Promise 來處理非同步操作](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises) 這個單元找到更多關於 promise 的資訊。
+> [!NOTE]
+> 如果你的想法卡住，你可以[在這裡](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html)找到解答（[線上範例](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html)）。你也可以在我們稍後的[優雅的使用 Promise 來處理非同步操作](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises) 這個單元找到更多關於 promise 的資訊。
 
 ## 結論
 
diff --git a/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md b/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md
index 3427af79168146..c836bec3f0135a 100644
--- a/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md
@@ -96,7 +96,8 @@ if (shoppingDone === true) {
 
 This code as shown will always result in the `shoppingDone` variable returning `false`, meaning disappointment for our poor child. It'd be up to us to provide a mechanism for the parent to set the `shoppingDone` variable to `true` if the child did the shopping.
 
-> **備註：** You can see a more [complete version of this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (also see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
+> [!NOTE]
+> You can see a more [complete version of this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (also see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
 
 ### else if
 
@@ -151,7 +152,8 @@ function setWeather() {
 3. When this function is run, we first set a variable called `choice` to the current value selected in the `<select>` element. We then use a conditional statement to show different text inside the paragraph depending on what the value of `choice` is. Notice how all the conditions are tested in `else if() {...}` blocks, except for the first one, which is tested in an `if() {...} block`.
 4. The very last choice, inside the `else {...}` block, is basically a "last resort" option — the code inside it will be run if none of the conditions are `true`. In this case, it serves to empty the text out of the paragraph if nothing is selected, for example if a user decides to re-select the "--Make a choice--" placeholder option shown at the beginning.
 
-> **備註：** You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) on there also.)
+> [!NOTE]
+> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) on there also.)
 
 ### A note on comparison operators
 
@@ -161,7 +163,8 @@ Comparison operators are used to test the conditions inside our conditional stat
 - `<` and `>` — test if one value is less than or greater than another.
 - `<=` and `>=` — test if one value is less than or equal to, or greater than or equal to, another.
 
-> **備註：** Review the material at the previous link if you want to refresh your memories on these.
+> [!NOTE]
+> Review the material at the previous link if you want to refresh your memories on these.
 
 We wanted to make a special mention of testing boolean (`true`/`false`) values, and a common pattern you'll come across again and again. Any value that is not `false`, `undefined`, `null`, `0`, `NaN`, or an empty string (`''`) actually returns `true` when tested as a conditional statement, therefore you can simply use a variable name on its own to test whether it is `true`, or even that it exists (i.e. it is not undefined.) So for example:
 
@@ -314,7 +317,8 @@ Here we've got:
 6. As many other cases (bullets 3–5) as you like.
 7. The keyword `default`, followed by exactly the same code pattern as one of the cases (bullets 3–5), except that `default` does not have a choice after it, and you don't need to `break` statement as there is nothing to run after this in the block anyway. This is the default option that runs if none of the choices match.
 
-> **備註：** You don't have to include the `default` section — you can safely omit it if there is no chance that the expression could end up equaling an unknown value. If there is a chance of this however, you need to include it to handle unknown cases.
+> [!NOTE]
+> You don't have to include the `default` section — you can safely omit it if there is no chance that the expression could end up equaling an unknown value. If there is a chance of this however, you need to include it to handle unknown cases.
 
 ### A switch example
 
@@ -367,7 +371,8 @@ function setWeather() {
 
 {{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}
 
-> **備註：** You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) on there also.)
+> [!NOTE]
+> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) on there also.)
 
 ## 三元運算符
 
@@ -424,7 +429,8 @@ Here we've got a {{htmlelement('select')}} element to choose a theme (black or w
 
 Finally, we've also got an [onchange](/zh-TW/docs/Web/API/GlobalEventHandlers/onchange) event listener that serves to run a function containing a ternary operator. It starts with a test condition — `select.value === 'black'`. If this returns `true`, we run the `update()` function with parameters of black and white, meaning that we end up with background color of black and text color of white. If it returns `false`, we run the `update()` function with parameters of white and black, meaning that the site color are inverted.
 
-> **備註：** You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) on there also.)
+> [!NOTE]
+> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) on there also.)
 
 ## Active learning: A simple calendar
 
diff --git a/files/zh-tw/learn/javascript/building_blocks/functions/index.md b/files/zh-tw/learn/javascript/building_blocks/functions/index.md
index 641378c2522689..fe579a19ced9ff 100644
--- a/files/zh-tw/learn/javascript/building_blocks/functions/index.md
+++ b/files/zh-tw/learn/javascript/building_blocks/functions/index.md
@@ -63,7 +63,8 @@ var myNumber = Math.random();
 
 ……我們其實當在使用函數。
 
-> **備註：** 若有需要，你可以瀏覽器的 JavaScript 主控台中輸入以上指令碼，藉此重新熟悉這些功能。
+> [!NOTE]
+> 若有需要，你可以瀏覽器的 JavaScript 主控台中輸入以上指令碼，藉此重新熟悉這些功能。
 
 JavaScript 語言有很多內建函數，讓你不用重覆寫所有程式碼就能做很多事。事實上，在你執行瀏覽器的內建函數時，你呼叫到的某些程式碼並不能用 JavaScript 來寫——很多這種函數是在部分呼叫瀏覽器背景語言，大多是由 C++ 這種低階系統語言寫成，而非 JavaScript 這種網際網路語言。
 
@@ -202,7 +203,8 @@ myButton.onclick = function () {
 
 Some functions require **parameters** to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.
 
-> **備註：** Parameters are sometimes called arguments, properties, or even attributes.
+> [!NOTE]
+> Parameters are sometimes called arguments, properties, or even attributes.
 
 As an example, the browser's built-in [Math.random()](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/random) function doesn't require any parameters. When called, it always returns a random number between 0 and 1:
 
@@ -217,7 +219,8 @@ var myText = "I am a string";
 var newString = myText.replace("string", "sausage");
 ```
 
-> **備註：** When you need to specify multiple parameters, they are separated by commas.
+> [!NOTE]
+> When you need to specify multiple parameters, they are separated by commas.
 
 It should also be noted that sometimes parameters are optional — you don't have to specify them. If you don't, the function will generally adopt some kind of default behavior. As an example, the array [join()](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/join) function's parameter is optional:
 
@@ -268,7 +271,8 @@ function greeting() {
 
 Both functions you want to call are called `greeting()`, but you can only ever access the `second.js` file's `greeting()` function — it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in `first.js`.
 
-> **備註：** You can see this example [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)).
+> [!NOTE]
+> You can see this example [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)).
 
 Keeping parts of your code locked away in functions avoids such problems, and is considered best practice.
 
@@ -370,9 +374,11 @@ Let's look at a real example to demonstrate scoping.
 
    This time the `a()` and `b()` calls will both return that annoying "[ReferenceError: z is not defined](/zh-TW/docs/Web/JavaScript/Reference/Errors/Not_defined)" error — this is because the `output()` calls and the variables they are trying to print are not defined inside the same function scopes — the variables are effectively invisible to those function calls.
 
-> **備註：** The same scoping rules do not apply to loop (e.g. `for() { ... }`) and conditional blocks (e.g. `if() { ... }`) — they look very similar, but they are not the same thing! Take care not to get these confused.
+> [!NOTE]
+> The same scoping rules do not apply to loop (e.g. `for() { ... }`) and conditional blocks (e.g. `if() { ... }`) — they look very similar, but they are not the same thing! Take care not to get these confused.
 
-> **備註：** The [ReferenceError: "x" is not defined](/zh-TW/docs/Web/JavaScript/Reference/Errors/Not_defined) error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.
+> [!NOTE]
+> The [ReferenceError: "x" is not defined](/zh-TW/docs/Web/JavaScript/Reference/Errors/Not_defined) error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.
 
 ### 函數裡的函數
 
diff --git a/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md b/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md
index 264a868f51786d..16fa87193e52cf 100644
--- a/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md
@@ -24,7 +24,8 @@ slug: Learn/JavaScript/Building_blocks/Image_gallery
 
 要進行這個評量，你要先下載 [grab the ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) 檔案，解壓縮在你電腦中的某個檔案夾作為範例。
 
-> **備註：** 你也可以在某些網站進行評鑑，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。你可以把這些 HTML、CSS 和 JavaScript 貼到這些線上編輯器中。如果你用了一個沒法把 JavaScript/CSS 分別放在不同面板的線上編輯器，你可以放心的把這些`<script>`/`<style>`元件改成 inline 貼進 HTML 網頁裡。
+> [!NOTE]
+> 你也可以在某些網站進行評鑑，如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。你可以把這些 HTML、CSS 和 JavaScript 貼到這些線上編輯器中。如果你用了一個沒法把 JavaScript/CSS 分別放在不同面板的線上編輯器，你可以放心的把這些`<script>`/`<style>`元件改成 inline 貼進 HTML 網頁裡。
 
 ## 專案簡報
 
diff --git a/files/zh-tw/learn/javascript/building_blocks/index.md b/files/zh-tw/learn/javascript/building_blocks/index.md
index 5f4201ca9b78d8..1606170f28f653 100644
--- a/files/zh-tw/learn/javascript/building_blocks/index.md
+++ b/files/zh-tw/learn/javascript/building_blocks/index.md
@@ -11,7 +11,8 @@ slug: Learn/JavaScript/Building_blocks
 
 開始這個模組之前，你應該已經熟悉 [HTML](/zh-TW/docs/Learn/HTML/Introduction_to_HTML) 和 [CSS](/zh-TW/docs/Learn/CSS/First_steps) 的基礎知識了，你也應該閱讀完前一個模組 - [JavaScript 入門](/zh-TW/docs/Learn/JavaScript/First_steps) - 的內容了。
 
-> **備註：** 假如你正使用平板、電腦或任何無法讓你可以建立檔案的裝置時，你可以試著透過線上程式碼工具（像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）測試文章的測試碼。
+> [!NOTE]
+> 假如你正使用平板、電腦或任何無法讓你可以建立檔案的裝置時，你可以試著透過線上程式碼工具（像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）測試文章的測試碼。
 
 ## 指南
 
diff --git a/files/zh-tw/learn/javascript/building_blocks/looping_code/index.md b/files/zh-tw/learn/javascript/building_blocks/looping_code/index.md
index f1ae69ebb13b2d..d0c343a41ffdb9 100644
--- a/files/zh-tw/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/zh-tw/learn/javascript/building_blocks/looping_code/index.md
@@ -221,7 +221,8 @@ para.textContent = info;
 
 {{ EmbedLiveSample('不用麻煩', '100%', 60, "", "", "hide-codepen-jsfiddle") }}
 
-> **備註：** You can find this [example code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
+> [!NOTE]
+> You can find this [example code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
 這顯示了一個循環，該循環用於遍歷數組中的項目並對其進行處理-這是 JavaScript 中非常常見的模式。 這裡：
 
@@ -235,9 +236,11 @@ para.textContent = info;
 
 4. 當 i 等於 cats.length 時，循環將停止，瀏覽器將繼續循環下方的下一段代碼。
 
-> **備註：** We have made the exit condition `i < cats.length`, not `i <= cats.length`, because computers count from 0, not 1 — we are starting `i` at `0`, and going up to `i = 4` (the index of the last array item). `cats.length` returns 5, as there are 5 items in the array, but we don't want to get up to `i = 5`, as that would return `undefined` for the last item (there is no array item with an index of 5). So therefore we want to go up to 1 less than `cats.length` (`i <`), not the same as `cats.length` (`i <=`).
+> [!NOTE]
+> We have made the exit condition `i < cats.length`, not `i <= cats.length`, because computers count from 0, not 1 — we are starting `i` at `0`, and going up to `i = 4` (the index of the last array item). `cats.length` returns 5, as there are 5 items in the array, but we don't want to get up to `i = 5`, as that would return `undefined` for the last item (there is no array item with an index of 5). So therefore we want to go up to 1 less than `cats.length` (`i <`), not the same as `cats.length` (`i <=`).
 
-> **備註：** A common mistake with exit conditions is making them use "equal to" (`===`) rather than say "less than or equal to" (`<=`). If we wanted to run our loop up to `i = 5`, the exit condition would need to be `i <= cats.length`. If we set it to `i === cats.length`, the loop would not run at all because `i` is not equal to `5` on the first loop iteration, so it would stop immediately.
+> [!NOTE]
+> A common mistake with exit conditions is making them use "equal to" (`===`) rather than say "less than or equal to" (`<=`). If we wanted to run our loop up to `i = 5`, the exit condition would need to be `i <= cats.length`. If we set it to `i === cats.length`, the loop would not run at all because `i` is not equal to `5` on the first loop iteration, so it would stop immediately.
 
 我們剩下的一個小問題是最終輸出語句的格式不太正確：
 
@@ -255,9 +258,11 @@ for (var i = 0; i < cats.length; i++) {
 }
 ```
 
-> **備註：** You can find this [example code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)).
+> [!NOTE]
+> You can find this [example code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)).
 
-> **警告：** With for — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an **infinite loop**.
+> [!WARNING]
+> With for — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an **infinite loop**.
 
 ## 中斷退出循環
 
@@ -365,7 +370,8 @@ btn.addEventListener("click", function () {
 
 5. 在（contacts.length-1）迭代之後，如果聯繫人姓名與輸入的搜索不匹配，則將段落文本設置為「找不到聯繫人。」，然後循環繼續進行迭代。
 
-> **備註：** You can view the [full source code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
+> [!NOTE]
+> You can view the [full source code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
 
 ## Skipping iterations with continue
 
@@ -434,7 +440,8 @@ Here's the output:
 3. If the square root and the rounded down square root do not equal one another (`!==`), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the `continue` statement to skip on to the next loop iteration without recording the number anywhere.
 4. If the square root IS an integer, we skip past the if block entirely so the `continue` statement is not executed; instead, we concatenate the current `i` value plus a space on to the end of the paragraph content.
 
-> **備註：** You can view the [full source code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
+> [!NOTE]
+> You can view the [full source code on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) too (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
 
 ## while and do ... while
 
@@ -471,7 +478,8 @@ while (i < cats.length) {
 }
 ```
 
-> **備註：** This still works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html)).
+> [!NOTE]
+> This still works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html)).
 
 The [do...while](/zh-TW/docs/Web/JavaScript/Reference/Statements/do...while) loop is very similar, but provides a variation on the while structure:
 
@@ -504,9 +512,11 @@ do {
 } while (i < cats.length);
 ```
 
-> **備註：** Again, this works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html)).
+> [!NOTE]
+> Again, this works just the same as expected — have a look at it [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (also view the [full source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html)).
 
-> **警告：** With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an **infinite loop**.
+> [!WARNING]
+> With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an **infinite loop**.
 
 ## Active learning: Launch countdown
 
@@ -858,7 +868,8 @@ do {
 
 We would recommend `for`, at least to begin with, as it is probably the easiest for remembering everything — the initializer, exit-condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.
 
-> **備註：** There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced [Loops and iteration guide](/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration).
+> [!NOTE]
+> There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced [Loops and iteration guide](/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration).
 
 ## Conclusion
 
diff --git a/files/zh-tw/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/zh-tw/learn/javascript/client-side_web_apis/fetching_data/index.md
index 8d3c34ada8ed53..5dcf60b4c5d7ac 100644
--- a/files/zh-tw/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/zh-tw/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -23,7 +23,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data
 const httpRequest = new XMLHttpRequest();
 ```
 
-> **備註：** 出於解說上的需要，上述代碼使用最簡方式建立 XMLHTTP 的實體。較貼近實際運用的範例，見第三步。
+> [!NOTE]
+> 出於解說上的需要，上述代碼使用最簡方式建立 XMLHTTP 的實體。較貼近實際運用的範例，見第三步。
 
 接下來是要決定伺服器傳回資料後的處理方式，此時你只要以 `onreadystatechange` 這個屬性指明要處理傳回值的 JavaScript 函式名稱即可，例如：
 
@@ -162,11 +163,14 @@ if (httpRequest.status === 200) {
 
 你可以[由此測試本例](https://www.w3clubs.com/mozdev/httprequest_test.html)，也可以參考[測試檔案](https://www.w3clubs.com/mozdev/test.html)。
 
-> **備註：** 如果你傳送一個要求到一段代碼，而這段代碼將回應 XML 而非靜態的 HTML 檔，那則必須要設定一個可以在 IE 中運作的 header。如果我們不設定 header `Content-Type: application/xml`，IE 將會在我們試圖運作的 XML 項目行下，回應一個 「Object Expected」 的錯誤。
+> [!NOTE]
+> 如果你傳送一個要求到一段代碼，而這段代碼將回應 XML 而非靜態的 HTML 檔，那則必須要設定一個可以在 IE 中運作的 header。如果我們不設定 header `Content-Type: application/xml`，IE 將會在我們試圖運作的 XML 項目行下，回應一個 「Object Expected」 的錯誤。
 
-> **備註：** 如果我們沒有設定 header `Cache-Control: no-cache`，那瀏覽器將會藏匿 response 並且不再重新傳送 request，造成除錯上的挑戰。我們也可以增加一個 always-different GET 參數，像是 timestamp 或 random number（詳見[避開快取](/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest#避開快取)）
+> [!NOTE]
+> 如果我們沒有設定 header `Cache-Control: no-cache`，那瀏覽器將會藏匿 response 並且不再重新傳送 request，造成除錯上的挑戰。我們也可以增加一個 always-different GET 參數，像是 timestamp 或 random number（詳見[避開快取](/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest#避開快取)）
 
-> **備註：** If the `httpRequest` variable is used globally, competing functions calling `makeRequest()` can overwrite each other, causing a race condition. Declaring the `httpRequest` variable local to a [closure](/zh-TW/docs/JavaScript/Guide/Closures) containing the AJAX functions avoids this.
+> [!NOTE]
+> If the `httpRequest` variable is used globally, competing functions calling `makeRequest()` can overwrite each other, causing a race condition. Declaring the `httpRequest` variable local to a [closure](/zh-TW/docs/JavaScript/Guide/Closures) containing the AJAX functions avoids this.
 
 In the event of a communication error (such as the server going down), an exception will be thrown in the `onreadystatechange` method when accessing the response status. To mitigate this problem, you could wrap your `if...then` statement in a `try...catch`:
 
diff --git a/files/zh-tw/learn/javascript/client-side_web_apis/index.md b/files/zh-tw/learn/javascript/client-side_web_apis/index.md
index 774691da48828f..85ddae1160f137 100644
--- a/files/zh-tw/learn/javascript/client-side_web_apis/index.md
+++ b/files/zh-tw/learn/javascript/client-side_web_apis/index.md
@@ -13,7 +13,8 @@ slug: Learn/JavaScript/Client-side_web_APIs
 
 了解 [HTML](/zh-TW/docs/Learn/HTML) 和 [CSS](/zh-TW/docs/Learn/CSS) 的基礎知識也會有所幫助。
 
-> **備註：** 假如你正在使用 電腦/平板/其他裝置，你不需要建立自己的檔案，你可以嘗試線上程式撰寫系統來撰寫範例程式，像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 假如你正在使用 電腦/平板/其他裝置，你不需要建立自己的檔案，你可以嘗試線上程式撰寫系統來撰寫範例程式，像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
 
 ## 概觀
 
diff --git a/files/zh-tw/learn/javascript/first_steps/a_first_splash/index.md b/files/zh-tw/learn/javascript/first_steps/a_first_splash/index.md
index 406e36dce1f16d..5b784de7cca447 100644
--- a/files/zh-tw/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/a_first_splash/index.md
@@ -28,7 +28,8 @@ slug: Learn/JavaScript/First_steps/A_first_splash
 
 並不會要求你馬上就能仔細地了解所有程式碼 — 目前我們只是想介紹一些概觀，並向你介紹一些關於 JavaScript(以及其他程式語言)如何運作的知識。在接下來的章節你將會更仔細地瞭解這些功能！
 
-> **備註：** 你會在 JavaScript 看到許多跟其他程式語言一樣的特徵 — functions , loops 之類的 ，雖然程式語法看起來有差 ，但概念大部分都差不多 .
+> [!NOTE]
+> 你會在 JavaScript 看到許多跟其他程式語言一樣的特徵 — functions , loops 之類的 ，雖然程式語法看起來有差 ，但概念大部分都差不多 .
 
 ## 像程式工程師一樣思考
 
@@ -257,7 +258,8 @@ let resetButton;
 
 - 最後兩個變數，一個儲存回合數 1，另一個儲存指向重新開始按鈕的參照 (按鈕現在還不存在，之後會加上的)。
 
-> **備註：** 從[下一篇文章](/zh-TW/docs/user:chrisdavidmills/variables)開始，你會學到更多有關變數的事。
+> [!NOTE]
+> 從[下一篇文章](/zh-TW/docs/user:chrisdavidmills/variables)開始，你會學到更多有關變數的事。
 
 ### 函式
 
@@ -281,7 +283,8 @@ checkGuess();
 
 當按下 <kbd>Return</kbd>/<kbd>Enter</kbd> 時，你會看到一個警告跳窗顯示「I am a placeholder」。我們已經在程式中定義好一個函式，只要我們調用這個函式，函式便會彈出一個警告視窗。
 
-> **備註：** 你會在後續的課程中學習到更多關於函式的事。
+> [!NOTE]
+> 你會在後續的課程中學習到更多關於函式的事。
 
 ### 運算子
 
diff --git a/files/zh-tw/learn/javascript/first_steps/arrays/index.md b/files/zh-tw/learn/javascript/first_steps/arrays/index.md
index 37166ef8c4e0d1..6e6109b2f00f76 100644
--- a/files/zh-tw/learn/javascript/first_steps/arrays/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/arrays/index.md
@@ -67,7 +67,8 @@ slug: Learn/JavaScript/First_steps/Arrays
    // shopping 回傳 [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    ```
 
-   > **備註：** 前面有說過，但還是提醒下：電腦從 0 開始數！
+   > [!NOTE]
+   > 前面有說過，但還是提醒下：電腦從 0 開始數！
 
 3. 請注意，陣列裡面的陣列稱為多維陣列（multidimensional array）。你可以撰寫兩組方括弧，來存取陣列裡面的陣列單位。例如說，存取前述 `random` 變數內的陣列單位就可以這麼寫：
 
@@ -109,7 +110,8 @@ for (var i = 0; i < sequence.length; i++) {
 
 通常你會看到一組含有原始資料的長字串，而你可能會希望將有用的單元拆分、組成更好用的形式，對他進行操作。為了達成這個目的，我們可以使用 {{jsxref("String.prototype.split()","split()")}} 方法。它最簡單的形式是只使用一個參數，你想分離的字串位置的字元（分隔符），而後它會返回陣列中在分隔符之間的子字串。
 
-> **備註：** 好的，在技術上它屬於字串的方法，而非陣列的方法。但因為它可以很順利地對陣列進行操作，因此我們把它列在這邊。
+> [!NOTE]
+> 好的，在技術上它屬於字串的方法，而非陣列的方法。但因為它可以很順利地對陣列進行操作，因此我們把它列在這邊。
 
 1. 來試試這個，看它如何運作。首先，建立一個字串在你的 console:
 
@@ -386,7 +388,8 @@ A good use for array methods like {{jsxref("Array.prototype.push()","push()")}}
 
 In this example we're going to show a much simpler use — here we're giving you a fake search site, with a search box. The idea is that when terms are entered in the search box, the top 5 previous search terms are displayed in the list. When the number of terms goes over 5, the last term starts being deleted each time a new term is added to the top, so the 5 previous terms are always displayed.
 
-> **備註：** In a real search app, you'd probably be able to click the previous search terms to return to previous searches, and it would display actual search results! We are just keeping it simple for now.
+> [!NOTE]
+> In a real search app, you'd probably be able to click the previous search terms to return to previous searches, and it would display actual search results! We are just keeping it simple for now.
 
 To complete the app, we need you to:
 
diff --git a/files/zh-tw/learn/javascript/first_steps/index.md b/files/zh-tw/learn/javascript/first_steps/index.md
index 363fdd656f1049..47fdbd6afb4025 100644
--- a/files/zh-tw/learn/javascript/first_steps/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/index.md
@@ -15,7 +15,8 @@ slug: Learn/JavaScript/First_steps
 - [HTML 簡介](/zh-TW/docs/Learn/HTML/Introduction_to_HTML).
 - [CSS 簡介](/zh-TW/docs/Learn/CSS/First_steps).
 
-> **備註：** 假如你正在使用 電腦/平板/其他裝置，你還不需要知道如何建立自己的檔案，你可以在線上程式撰寫系統來嘗試範例程式，像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 假如你正在使用 電腦/平板/其他裝置，你還不需要知道如何建立自己的檔案，你可以在線上程式撰寫系統來嘗試範例程式，像是 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)。
 
 ## 概觀
 
diff --git a/files/zh-tw/learn/javascript/first_steps/math/index.md b/files/zh-tw/learn/javascript/first_steps/math/index.md
index 84752862d6b744..e135730bdea362 100644
--- a/files/zh-tw/learn/javascript/first_steps/math/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/math/index.md
@@ -44,7 +44,8 @@ slug: Learn/JavaScript/First_steps/Math
 
 第二個好消息是 JavaScript 只有一種數字資料類型 ，猜對了！就是{{jsxref("Number")}}。這代表無論你在 JavaScript 需要處理哪種數字，處理方法都是一樣的。
 
-> **備註：** 事實上, JavaScript 有第二種數字型態， {{Glossary("BigInt")}}, 用於非常、非常、非常大的整數。但這節課我只需要擔心 `Number` 的值。
+> [!NOTE]
+> 事實上, JavaScript 有第二種數字型態， {{Glossary("BigInt")}}, 用於非常、非常、非常大的整數。但這節課我只需要擔心 `Number` 的值。
 
 ### 我怎麼看都是些數字!
 
@@ -137,7 +138,8 @@ Arithmetic operators are the basic operators that we use to do sums:
   </tbody>
 </table>
 
-> **備註：** You'll sometimes see numbers involved in sums referred to as {{Glossary("Operand", "operands")}}.
+> [!NOTE]
+> You'll sometimes see numbers involved in sums referred to as {{Glossary("Operand", "operands")}}.
 
 **備註：** You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in `Math.pow(7, 3)`, `7` is the base and `3` is the exponent, so the result of the expression is `343`. `Math.pow(7, 3)` is equivalent to `7**3`.
 
@@ -192,7 +194,8 @@ If you want to override operator precedence, you can put parentheses round the p
 
 Try it and see.
 
-> **備註：** A full list of all JavaScript operators and their precedence can be found in [Expressions and operators](Learn/JavaScript/First_steps/Math).
+> [!NOTE]
+> A full list of all JavaScript operators and their precedence can be found in [Expressions and operators](Learn/JavaScript/First_steps/Math).
 
 ## 遞增和遞減運算符
 
@@ -202,7 +205,8 @@ Sometimes you'll want to repeatedly add or subtract one to/from a numeric variab
 guessCount++;
 ```
 
-> **備註：** They are most commonly used in [loops](/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration), which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — [check it out live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html), and [look at the source code](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html) to see if you can spot the incrementors! We'll look at loops in detail later on in the course.
+> [!NOTE]
+> They are most commonly used in [loops](/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration), which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — [check it out live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html), and [look at the source code](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html) to see if you can spot the incrementors! We'll look at loops in detail later on in the course.
 
 Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:
 
@@ -231,7 +235,8 @@ num2--;
 num2;
 ```
 
-> **備註：** You can make the browser do it the other way round — increment/decrement the variable _then_ return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use `++num1` and `--num2`.
+> [!NOTE]
+> You can make the browser do it the other way round — increment/decrement the variable _then_ return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use `++num1` and `--num2`.
 
 ## 賦值運算符
 
@@ -262,7 +267,8 @@ var y = 4; // y contains the value 4
 x *= y; // x now contains the value 12
 ```
 
-> **備註：** There are lots of [other assignment operators available](/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators#賦值運算子), but these are the basic ones you should learn now.
+> [!NOTE]
+> There are lots of [other assignment operators available](/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators#賦值運算子), but these are the basic ones you should learn now.
 
 ## Active learning: sizing a canvas box
 
@@ -296,7 +302,8 @@ Sometimes we will want to run true/false tests, then act accordingly depending o
 | `<=`     | Less than or equal to    | Tests whether the left value is smaller than or equal to the right one.  | `3 <= 2`      |
 | `>=`     | Greater than or equal to | Tests whether the left value is greater than or equal to the right one.  | `5 >= 4`      |
 
-> **備註：** You may see some people using `==` and `!=` in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from `===`/`!==`. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.
+> [!NOTE]
+> You may see some people using `==` and `!=` in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from `===`/`!==`. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.
 
 If you try entering some of these values in a console, you'll see that they all return `true`/`false` values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:
 
@@ -335,7 +342,8 @@ function updateBtn() {
 
 You can see the equality operator being used just inside the `updateBtn()` function. In this case, we are not testing if two mathemetical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.
 
-> **備註：** Such a control that swaps between two states is generally referred to as a **toggle**. It toggles between one state and another — light on, light off, etc.
+> [!NOTE]
+> Such a control that swaps between two states is generally referred to as a **toggle**. It toggles between one state and another — light on, light off, etc.
 
 ## Summary
 
@@ -343,6 +351,7 @@ In this article we have covered the fundamental information you need to know abo
 
 In the next article, we'll explore text and how JavaScript allows us to manipulate it.
 
-> **備註：** If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our [Numbers and dates](/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates) and [Expressions and operators](/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators) articles.
+> [!NOTE]
+> If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our [Numbers and dates](/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates) and [Expressions and operators](/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators) articles.
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
diff --git a/files/zh-tw/learn/javascript/first_steps/silly_story_generator/index.md b/files/zh-tw/learn/javascript/first_steps/silly_story_generator/index.md
index b3cf3603c90707..7d60b04f41ce6d 100644
--- a/files/zh-tw/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/silly_story_generator/index.md
@@ -30,7 +30,8 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 - 開啟右方網頁： [grab the HTML file](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html) ，將 HTML 範本儲存到你的本地電腦的新資料夾中，並命名為`index.html` 。範本也包含相應的 CSS 檔案。
 - 開啟右方網頁： [page containing the raw text](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt) ，並保持網頁開啟在瀏覽器的另一分頁上，以便稍後使用。
 
-> **備註：** 除了將檔案下載到自己的電腦中，你也能使用線上編輯程式的網頁，像是：[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 來完成評估測驗。你可以將 HTML, CSS 以及 JavaScript 貼到前述的線上編輯器中。如果你使用的線上編輯器沒有獨立給 JavaScript 的編輯區，你也能透過`<script>`直接將 JS 語法放到 HTML 檔案中。
+> [!NOTE]
+> 除了將檔案下載到自己的電腦中，你也能使用線上編輯程式的網頁，像是：[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 來完成評估測驗。你可以將 HTML, CSS 以及 JavaScript 貼到前述的線上編輯器中。如果你使用的線上編輯器沒有獨立給 JavaScript 的編輯區，你也能透過`<script>`直接將 JS 語法放到 HTML 檔案中。
 
 ## 任務簡介
 
diff --git a/files/zh-tw/learn/javascript/first_steps/strings/index.md b/files/zh-tw/learn/javascript/first_steps/strings/index.md
index 894a67f4819855..967b53014ab7d4 100644
--- a/files/zh-tw/learn/javascript/first_steps/strings/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/strings/index.md
@@ -239,7 +239,8 @@ bigmouth;
    response;
    ```
 
-> **備註：** 當你輸入一個字串在你的程式碼中，並用單引號或雙引號將它括起來，它稱為**字串文字**（**string literal**）。
+> [!NOTE]
+> 當你輸入一個字串在你的程式碼中，並用單引號或雙引號將它括起來，它稱為**字串文字**（**string literal**）。
 
 ### Concatenation in context
 
@@ -303,7 +304,8 @@ button.onclick = function () {
 
 另一種你會遇上的字串語法是**模版字符串(template literals)** (也稱做模版字串 template strings)。這是一種更新的語法提供更彈性、簡單的方式去理解字串。
 
-> **備註：** 嘗試在你的瀏覽器上測試下面的範例，來看看會得到什麼結果。
+> [!NOTE]
+> 嘗試在你的瀏覽器上測試下面的範例，來看看會得到什麼結果。
 
 將標準字串轉變為模版字符串，你需要將引號 (`' '`, or `" "`) 換為重音符 (backtick characters (`` ` ` ``) )，接著來看一個簡單的例子:
 
diff --git a/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.md b/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.md
index bad362814971d0..25f17015ec5915 100644
--- a/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.md
@@ -206,7 +206,8 @@ browserType[browserType.length - 1];
 
    This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string.
 
-> **備註：** The second parameter of `slice()` is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the {{jsxref("String.prototype.slice()", "slice()")}} page to see what else you can find out.
+> [!NOTE]
+> The second parameter of `slice()` is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the {{jsxref("String.prototype.slice()", "slice()")}} page to see what else you can find out.
 
 ### 改變大小寫
 
@@ -402,7 +403,8 @@ In this exercise we have the names of cities in the United Kingdom, but the capi
 3. Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.
 4. Change the value of the `result` variable to equal to the final result, not the `input`.
 
-> **備註：** A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.
+> [!NOTE]
+> A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.
 
 ```html hidden
 <h2>Live output</h2>
diff --git a/files/zh-tw/learn/javascript/first_steps/variables/index.md b/files/zh-tw/learn/javascript/first_steps/variables/index.md
index 46399fea8f5a26..f95d7570dc02a7 100644
--- a/files/zh-tw/learn/javascript/first_steps/variables/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/variables/index.md
@@ -71,7 +71,8 @@ if (name === 'Adam') {
 
 變量的另一個特性就是它們能夠存儲任何的東西 — 不只是字符串和數字。變量可以存儲更複雜的數據，甚至是函數。你將在後續的內容中體驗到這些用法。
 
-> **備註：** 變量是用來儲存數值的，而變量和數值是兩個不同的概念。變量不是數值本身，它們僅僅是一個用於儲存數值的容器。你可以把變量想像成一個個用來裝東西的紙皮箱。
+> [!NOTE]
+> 變量是用來儲存數值的，而變量和數值是兩個不同的概念。變量不是數值本身，它們僅僅是一個用於儲存數值的容器。你可以把變量想像成一個個用來裝東西的紙皮箱。
 
 ![](boxes.png)
 
@@ -86,7 +87,8 @@ let myAge;
 
 在這裡我們定義了兩個變量 `myName` 和 `myAge`。那麼現在嘗試輸入這些代碼到你的瀏覽器終端。之後，嘗試使用你自己選擇的名稱來創建一兩個變量。
 
-> **備註：** 在 JavaScript 中，所有代碼指令都會以分號結尾（ `;`）－ 如果忘記加分號，你的單行代碼可能正常執行，但是在執行多行代碼的時候就可能出錯。所以，最好是養成主動以分號作為代碼結尾的習慣。
+> [!NOTE]
+> 在 JavaScript 中，所有代碼指令都會以分號結尾（ `;`）－ 如果忘記加分號，你的單行代碼可能正常執行，但是在執行多行代碼的時候就可能出錯。所以，最好是養成主動以分號作為代碼結尾的習慣。
 
 你可以輸入變量的名稱，來驗證這個變量的數值是否在執行環境（execution environment）中已經存在。例如，
 
@@ -101,7 +103,8 @@ myAge;
 scoobyDoo;
 ```
 
-> **備註：** 千萬不要把兩個概念弄混淆了，「一個變量**存在，但是沒有數值**」和「一個變量**並不存在**」— 他們完全是兩回事。在前面你看到的盒子的類比中，不存在意味著沒有可以存放變量的「盒子」。沒有定義的值意味著**有**一個「盒子」，但是它裡面沒有任何數值。
+> [!NOTE]
+> 千萬不要把兩個概念弄混淆了，「一個變量**存在，但是沒有數值**」和「一個變量**並不存在**」— 他們完全是兩回事。在前面你看到的盒子的類比中，不存在意味著沒有可以存放變量的「盒子」。沒有定義的值意味著**有**一個「盒子」，但是它裡面沒有任何數值。
 
 ## 初始化變量 (Initializing a variable)
 
@@ -149,7 +152,8 @@ logName();
 var myName;
 ```
 
-> **備註：** This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.
+> [!NOTE]
+> This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.
 
 This works because of **hoisting** — read [var hoisting](/zh-TW/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) for more detail on the subject.
 
@@ -180,7 +184,8 @@ Again, this is a sensible language decision. There is no reason to redeclare var
 
 For these reasons and more, we recommend that you use `let` as much as possible in your code, rather than `var`. There is no reason to use `var`, unless you need to support old versions of Internet Explorer with your code (it doesn't support `let` until version 11; the modern Windows Edge browser supports `let` just fine).
 
-> **備註：** We are currently in the process of updating the course to use `let` rather than `var`. Bear with us!
+> [!NOTE]
+> We are currently in the process of updating the course to use `let` rather than `var`. Bear with us!
 
 ## Updating a variable
 
@@ -203,7 +208,8 @@ You can call a variable pretty much anything you like, but there are limitations
 - Variables are case sensitive — so `myage` is a different variable to `myAge`.
 - One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So, you can't use words like `var`, `function`, `let`, and `for` as variable names. Browsers will recognize them as different code items, and so you'll get errors.
 
-> **備註：** You can find a fairly complete list of reserved keywords to avoid at [Lexical grammar — keywords](/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords).
+> [!NOTE]
+> You can find a fairly complete list of reserved keywords to avoid at [Lexical grammar — keywords](/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords).
 
 良好的命名範例：
 
diff --git a/files/zh-tw/learn/javascript/first_steps/what_is_javascript/index.md b/files/zh-tw/learn/javascript/first_steps/what_is_javascript/index.md
index 8587656616c927..2e5ecb211f8a92 100644
--- a/files/zh-tw/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/what_is_javascript/index.md
@@ -102,14 +102,16 @@ API 是預先製作完成的程式模組，支援開發者實現困難或無法
 - {{domxref("Canvas_API","Canvas")}} 和 {{domxref("WebGL_API","WebGL")}} API 可以讓你在網頁創造 2D 動畫及 3D 圖像。人們正使用這些技術來作一些令人驚奇的事，參見 [Chrome Experiments](https://www.chromeexperiments.com/) 及 [webglsamples](https://webglsamples.org/).
 - [Audio 和 Video API](/zh-TW/docs/Web/Apps/Fundamentals/Audio_and_video_delivery) 像 {{domxref("HTMLMediaElement")}} 和 {{domxref("WebRTC API", "WebRTC")}} 一樣讓你可以使用多媒體做真正有趣的事情，例如在網頁中播放音樂或影片，或由網路攝影機頡取你的影像顯示在另一個人電腦裡（試試我們的[簡單例子](https://chrisdavidmills.github.io/snapshot/)來了解）。
 
-> **備註：** 上面的許多範例無法在舊版的瀏覽器上運作。使用現代的瀏覽器像是 Firefox、Chrome、Edge 或 Opera 來嘗試執行你的程式總是比較好的。當你接近要交付作為產品的程式（也就是實際的用戶將要使用的時候)，就需要思考關於[跨瀏覽器測試](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing)的事情。
+> [!NOTE]
+> 上面的許多範例無法在舊版的瀏覽器上運作。使用現代的瀏覽器像是 Firefox、Chrome、Edge 或 Opera 來嘗試執行你的程式總是比較好的。當你接近要交付作為產品的程式（也就是實際的用戶將要使用的時候)，就需要思考關於[跨瀏覽器測試](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing)的事情。
 
 **第三方 API** 預設不內建在瀏覽器裡，你通常由網路上取得他們的程式碼與資訊。例如：
 
 - [Twitter API](https://dev.twitter.com/overview/documentation) 能讓你做很多事，像是顯示最新的 Twitter 貼文在你的網站上。
 - [Google Maps API](https://developers.google.com/maps/) 能讓你在自己的網站中嵌入訂製的地圖或其他相關功能。
 
-> **備註：** 我們不會在此涵蓋這些進階的 APIs。你可以在我們的 [客戶端網頁 API 單元](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs)找到更多資訊。
+> [!NOTE]
+> 我們不會在此涵蓋這些進階的 APIs。你可以在我們的 [客戶端網頁 API 單元](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs)找到更多資訊。
 
 那裡也有很多的東西。然而不要一頭熱陷進去。你不會在學習 JavaScript 24 小時後，就能開發出下一個 Facebook、Google 地圖或 Instagram 之類的產品出來。有許多的基礎的東西得先了解，這也是你在這裡的原因，讓我們繼續吧！
 
@@ -127,7 +129,8 @@ API 是預先製作完成的程式模組，支援開發者實現困難或無法
 
 瀏覽器的每個分頁有獨立的空間來執行程式碼（技術上稱「執行環境 excution environments」），這表示在絕大部分的情形之下，每個分頁的程式碼是獨立運行的，不能直接影響其它分頁（或網站）裡的程式。這是一個好的安全措施，少了它，有心人會開始寫程式來偷取網站的資料，或是作其它不好的事情。
 
-> **備註：** 是有一些安全的方式能在不同的網頁、分頁之間傳遞程式和資料，不過這些進階的技術不會在涵蓋在這個單元中。
+> [!NOTE]
+> 是有一些安全的方式能在不同的網頁、分頁之間傳遞程式和資料，不過這些進階的技術不會在涵蓋在這個單元中。
 
 ### JavaScript 的執行順序
 
@@ -148,7 +151,8 @@ function updateName() {
 
 如果你交換前兩行的程式碼，它將不再正常運作。取而代之的，[瀏覽器開發主控台](/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools)會回報一個錯誤訊息：「`TypeError: para is undefined`」，意思是 `para` 物件尚不存在，所以我們在它上頭增加事件偵聽器。
 
-> **備註：** 這是一個很常見的錯誤，在你嘗試對物件進行操作之前，你需要注意它們已經存在。
+> [!NOTE]
+> 這是一個很常見的錯誤，在你嘗試對物件進行操作之前，你需要注意它們已經存在。
 
 ### 直譯式與編譯式程式語言
 
@@ -208,9 +212,11 @@ JavaScript 是一個輕量的直接程式語言。網頁瀏覽器收到文字格
 
 5. 儲存你的檔案並且重新整理網頁，現在你會發現每次點擊按鈕，都會在下方產生一個新的文字段落。
 
-> **備註：** 如果你的版本不能正常運作，重新按照步驟再操作一次，檢查每一步都正確。你下載的範例是 `.html` 結尾的檔名？你加入的 {{htmlelement("script")}} 元素在 `</head>` 標籤的前面？你輸入的 JavaScript 與上面提供的一模一樣？**JavaScript 程式大小寫，而且很挑剔，所以你輸入的語法要一模一樣，不然可能會無法運作。**
+> [!NOTE]
+> 如果你的版本不能正常運作，重新按照步驟再操作一次，檢查每一步都正確。你下載的範例是 `.html` 結尾的檔名？你加入的 {{htmlelement("script")}} 元素在 `</head>` 標籤的前面？你輸入的 JavaScript 與上面提供的一模一樣？**JavaScript 程式大小寫，而且很挑剔，所以你輸入的語法要一模一樣，不然可能會無法運作。**
 
-> **備註：** GitHub 上有完整版本的範例在 [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)（[看線上版本](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)）。
+> [!NOTE]
+> GitHub 上有完整版本的範例在 [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)（[看線上版本](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)）。
 
 ### 外部的 JavaScript
 
@@ -241,7 +247,8 @@ JavaScript 是一個輕量的直接程式語言。網頁瀏覽器收到文字格
 
 4. 儲存檔案並在你的瀏覽器執行重新整理，你應該會看到一樣的結果！雖然是一樣的結果，但現在我們是由外部的檔案來引入 JavaScript 程式。就組織程式碼，讓程式可以在多個 HTML 間重複被使用而言，這通常是好的作法。另外，因為少了一大堆程式碼在裡頭，也能夠讓 HTML 檔案更容易被閱讀。
 
-> **備註：** 你可以在 GitHub 上找到這個版本的 [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) 與 [script.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js) （[看線上版本](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到這個版本的 [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) 與 [script.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js) （[看線上版本](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)）。
 
 ### 行內的 JavaScript
 
@@ -279,7 +286,8 @@ for (var i = 0; i < buttons.length ; i++) {
 
 這或許看起來比 `onclick` 屬性還長一點，但是能套用在全部的按鈕上，無論頁面上有多少按鈕，也不管未來新增或移除多少個（按鈕）。這段 JavaScript 程式都不需要改變。
 
-> **備註：** 試著編輯你自己版本的 `apply-javascript.html` ，在裡面多添加一點按鈕。當你重新載入網頁，你應該會發現所有按鈕，按下去的時候都會建立一的段落。很簡潔吧！
+> [!NOTE]
+> 試著編輯你自己版本的 `apply-javascript.html` ，在裡面多添加一點按鈕。當你重新載入網頁，你應該會發現所有按鈕，按下去的時候都會建立一的段落。很簡潔吧！
 
 ### 腳本載入策略
 
@@ -305,7 +313,8 @@ document.addEventListener("DOMContentLoaded", function() {
 
 在這個例子中，腳本（JavaScript 程式）與 HTML 會同時載入，所以程式將正確地執行。
 
-> **備註：** 在外部程式的範例裡，我們不需要使用 `DOMContentLoaded` 事件因為 `defer` 為我們解決問題了。而在內部程式的範例裡我們沒用 `defer` 屬性，是因為 `defer` 屬性只能用於外部的腳本。
+> [!NOTE]
+> 在外部程式的範例裡，我們不需要使用 `DOMContentLoaded` 事件因為 `defer` 為我們解決問題了。而在內部程式的範例裡我們沒用 `defer` 屬性，是因為 `defer` 屬性只能用於外部的腳本。
 
 這個問題有另一個舊式的解決方法，就是將 `script` 元素放在 `body` 元素的底部（剛好在 `</body>` 的前面），如此它就會在所有 HTML 被解析完之後才被載入。這個方法的問題在於腳本的載入與解析工作會被完成擋住，一直到所有 HTML 載入完成。在擁有許多 JavaScript 的大型網站中，這樣會導致嚴重的效能問題，拖慢你的網站。
 
@@ -391,7 +400,8 @@ for (var i = 0; i < buttons.length; i++) {
 }
 ```
 
-> **備註：** 一般而言，多寫註解比少寫來得好。但是要注意，如果你發現加了許多註解在說明變數的用途（那麼你的變數命名可能需要更直觀，更帶有意義），或是解釋非常簡單的操作（也許你的程式碼太過於複雜）。
+> [!NOTE]
+> 一般而言，多寫註解比少寫來得好。但是要注意，如果你發現加了許多註解在說明變數的用途（那麼你的變數命名可能需要更直觀，更帶有意義），或是解釋非常簡單的操作（也許你的程式碼太過於複雜）。
 
 ## 總結
 
diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.md b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.md
index 278c98182e5c56..45ec04739a28d8 100644
--- a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.md
@@ -36,7 +36,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 1. 首先，在編輯器與瀏覽器分別開啟你剛下載檔案。
 2. 試著玩遊戲——你會注意到當你按下按鈕「Submit guess」時，它沒有任何反應！
 
-> **備註：** 你也許是想修復你自己寫的遊戲中的錯誤！這是件好事，但我們還是建議你在學習這篇文章時先使用我們的版本，這樣你才可以學到我們接下來要教的技巧。在這之後再回去修正你自己的遊戲也不遲！
+> [!NOTE]
+> 你也許是想修復你自己寫的遊戲中的錯誤！這是件好事，但我們還是建議你在學習這篇文章時先使用我們的版本，這樣你才可以學到我們接下來要教的技巧。在這之後再回去修正你自己的遊戲也不遲！
 
 現在，先讓我們來看看開發者主控台有沒有提示我們任何錯誤，然後試著修正他們。你會在接下來的段落中學到如何修正這些錯誤。
 
@@ -62,7 +63,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 4. 主控台提示的錯誤訊息寫著「guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）」，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開 MDN 確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋「mdn*關鍵字*」。為了節省時間，這裡提供你一個捷徑：[`addEventListener()`](/zh-TW/docs/Web/API/EventTarget/addEventListener)。
 5. 回來看看這個頁面，我們明顯是把函式名稱給拼錯了！記住，JavaScript 是會區分大小寫的，所以任何些微的拼寫錯誤甚至是大小寫錯誤都會造成錯誤發生。把`addeventListener`改成`addEventListener`問題就解決了。現在將你的程式碼修正吧。
 
-> **備註：** 看看這個[TypeError: "x" is not a function](/zh-TW/docs/Web/JavaScript/Reference/Errors/Not_a_function)連結來了解更多有關這類錯誤的資訊。
+> [!NOTE]
+> 看看這個[TypeError: "x" is not a function](/zh-TW/docs/Web/JavaScript/Reference/Errors/Not_a_function)連結來了解更多有關這類錯誤的資訊。
 
 ### 語法錯誤：第二回合
 
@@ -72,7 +74,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 
    > **備註：** [`Null`](/zh-TW/docs/Glossary/Null)是一個特別的值，代表著「空」、「什麼都沒有」。`lowOrHi`被宣告為一個變數，但並沒有被賦予任何有意義的值——他既沒有變數型態，也沒有值。
 
-   > **備註：** 這個錯誤並沒有在頁面載入完成後就發生，因為這個錯誤發生在一個函式中（在`checkGuess() { ... }`區塊中）。在之後詳細介紹函式的文章中，你會學到在函式中的程式碼與在函式外的程式碼其實是執行在不同範疇中的。在我們的這個情況裡，有錯誤的程式碼在`checkGuess()`在 86 行被執行前都並沒有執行，也因此錯誤並沒有在頁面一載入就發生。
+   > [!NOTE]
+   > 這個錯誤並沒有在頁面載入完成後就發生，因為這個錯誤發生在一個函式中（在`checkGuess() { ... }`區塊中）。在之後詳細介紹函式的文章中，你會學到在函式中的程式碼與在函式外的程式碼其實是執行在不同範疇中的。在我們的這個情況裡，有錯誤的程式碼在`checkGuess()`在 86 行被執行前都並沒有執行，也因此錯誤並沒有在頁面一載入就發生。
 
 4. 看看第 78 行，你會看到：
 
@@ -104,7 +107,8 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 9. 所以我們需要的是一個開頭是小數點(.)的 class 選擇器，但傳進第 48 行`querySelector()`方法的選擇器並沒有開頭的小數點。這也許就是問題所在了！試著將第 48 行的`lowOrHi`改成`.lowOrHi`。
 10. 再次存檔並重整，你的`console.log()`現在應該會輸出我們想要的`<p>`元素了。呼！又修好了另一個錯誤！你現在可以把你的`console.log()`那行移除了，或是你想要留著之後查看——取決於你。
 
-> **備註：** 看看這個[TypeError: "x" is (not) "y"](/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_type) 連結來了解更多有關這類錯誤的資訊。
+> [!NOTE]
+> 看看這個[TypeError: "x" is (not) "y"](/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_type) 連結來了解更多有關這類錯誤的資訊。
 
 ### 語法錯誤：第三回合
 
@@ -183,7 +187,8 @@ var userGuess === Number(guessField.value);
 
 此時程式碼會回報錯誤，因為瀏覽器會認為你想設定不同的東西；我們需要確保自己沒有誤用、混用指派運算子(`=`)：用於賦予變數值跟嚴格比較運算子(`===`)：用於比較兩個值是否完全相等，並回覆`true`/`false`布林值。
 
-> **備註：** 更多細節請參考右方關於*缺少分號的語法錯誤*文章頁面： [SyntaxError: missing ; before statement](/zh-TW/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) 。
+> [!NOTE]
+> 更多細節請參考右方關於*缺少分號的語法錯誤*文章頁面： [SyntaxError: missing ; before statement](/zh-TW/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) 。
 
 ### 無論輸入什麼，程式總是顯示「你贏了」
 
@@ -205,7 +210,8 @@ if (userGuess = randomNumber) {
 
 給完函式或方法參數時別忘了放上`)`右括號（請注意不要打成中文輸入法）。
 
-> **備註：** 更多細節請參考右方關於*缺少右括號的語法錯誤*文章頁面：[SyntaxError: missing ) after argument list](/zh-TW/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list)。
+> [!NOTE]
+> 更多細節請參考右方關於*缺少右括號的語法錯誤*文章頁面：[SyntaxError: missing ) after argument list](/zh-TW/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list)。
 
 ### 語法錯誤：屬性 ID 後缺少「:」<br>SyntaxError: missing : after property id
 
@@ -237,7 +243,8 @@ function checkGuess( {
 
 對於這些錯誤，先思考我們在範例中是如何逐項解決的。當出現錯誤資訊時，先查看該行程式碼行號，按照行號到該行程式碼察看，你可以觀察哪裡出錯了。請記住，錯誤不一定出現在該行程式碼上，而且錯誤原因也可能和我們文章上描述的問題不同！
 
-> **備註：** 有關這些錯誤的詳細資訊，可參閱[SyntaxError: Unexpected token](/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_token)與[SyntaxError: unterminated string literal](/zh-TW/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal)
+> [!NOTE]
+> 有關這些錯誤的詳細資訊，可參閱[SyntaxError: Unexpected token](/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_token)與[SyntaxError: unterminated string literal](/zh-TW/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal)
 
 ## 小結
 
diff --git a/files/zh-tw/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/zh-tw/learn/javascript/objects/adding_bouncing_balls_features/index.md
index 362a28402d8dae..2ac5332b9ae0de 100644
--- a/files/zh-tw/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/zh-tw/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -24,7 +24,8 @@ slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
 
 在開始之前，請先複製先前文章所提供的 [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html)、[style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css)、[main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) 等檔案，儲存於本端磁碟的新資料夾中。
 
-> **備註：** 你也可透過如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 等網站進行此一實作。你可將 HTML、CSS、JavaScript 貼入相關線上編輯器之一。如果你所用的線上編輯器並未提供獨立的 JavaScript/CSS 面板，則可將之放入 HTML 頁面內的行內 `<script>`/`<style>` 元素中。
+> [!NOTE]
+> 你也可透過如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 等網站進行此一實作。你可將 HTML、CSS、JavaScript 貼入相關線上編輯器之一。如果你所用的線上編輯器並未提供獨立的 JavaScript/CSS 面板，則可將之放入 HTML 頁面內的行內 `<script>`/`<style>` 元素中。
 
 ## 專案簡介
 
diff --git a/files/zh-tw/learn/javascript/objects/basics/index.md b/files/zh-tw/learn/javascript/objects/basics/index.md
index 98221e2af3c18c..962717f33d6c1f 100644
--- a/files/zh-tw/learn/javascript/objects/basics/index.md
+++ b/files/zh-tw/learn/javascript/objects/basics/index.md
@@ -89,7 +89,8 @@ person.greeting();
 
 現在你的物件裡面已經有了某些資料與功能，而且能透過某些簡易語法存取之。
 
-> **備註：** 如果你無法完成上述步驟，可先和我們的版本比較一下。參閱 [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (或觀看 [實際執行](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html))。你最容易犯下的錯誤是在物件中的最後一個成員 (member)末端加上逗號，如此就會造成錯誤。
+> [!NOTE]
+> 如果你無法完成上述步驟，可先和我們的版本比較一下。參閱 [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (或觀看 [實際執行](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html))。你最容易犯下的錯誤是在物件中的最後一個成員 (member)末端加上逗號，如此就會造成錯誤。
 
 目前為止發生了什麼事呢？現在這個物件是由多個成員所構成，各個成員均有 1 個名稱 (如上述的 `name` 與 `age`) 以及 1 組數值 (如 `['Bob', 'Smith']` 與 `32`)。由名稱與數值構成的組合均以逗號區隔，而名稱與數值之間則以冒號隔開。語法應如下所示：
 
@@ -299,7 +300,8 @@ var myNotification = new Notification("Hello!");
 
 我們會在後續文章中說明建構子 (Constructor)。
 
-> **備註：** 可思考一下物件「訊息傳遞」的溝通方式。當某個物件需要其他物件執行其他作業時，往往會透過其函式之一傳送訊息給其他物件並等待回應。這也是我們所謂的回傳值。
+> [!NOTE]
+> 可思考一下物件「訊息傳遞」的溝通方式。當某個物件需要其他物件執行其他作業時，往往會透過其函式之一傳送訊息給其他物件並等待回應。這也是我們所謂的回傳值。
 
 ## 摘要
 
diff --git a/files/zh-tw/learn/javascript/objects/classes_in_javascript/index.md b/files/zh-tw/learn/javascript/objects/classes_in_javascript/index.md
index 59f9ad23c9b72a..dbeebec19239b3 100644
--- a/files/zh-tw/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/zh-tw/learn/javascript/objects/classes_in_javascript/index.md
@@ -81,7 +81,8 @@ function Teacher(first, last, age, gender, interests, subject) {
 
 這看起來和 Person 建構子有許多地方類似，但比較奇怪的就是之前沒看過的 [`call()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call) 函式。此函式基本上可讓你呼叫在其他地方定義的函數，而非目前內文 (context) 中定義的函式。當執行函式時，第一個參數用來指定你要使用 `this` 值，其他參數則指定應該傳送到該函式的參數。
 
-> **備註：** 我們此範例中建立新的物件實例時，會指定所要繼承的屬性。但必須注意的是，即使實例不需將屬性指定為參數，你還是必須在建構子中將屬性指定為參數 (在建立物件時，你可能獲得設定為隨意值的屬性)。
+> [!NOTE]
+> 我們此範例中建立新的物件實例時，會指定所要繼承的屬性。但必須注意的是，即使實例不需將屬性指定為參數，你還是必須在建構子中將屬性指定為參數 (在建立物件時，你可能獲得設定為隨意值的屬性)。
 
 所以這裡可在 `Teacher()` 建構子函式之內有效執行 `Person()` 建構子函式 (如上述)，藉以在 `Teacher()` 之內定義相同的屬性，但使用的是傳送到 `Teacher()` 的屬性值，而非 `Person()` 的屬性值 (我們將 `this` 值設為簡單的「`this」並`傳送到 `call()`，代表這個 `this` 是 `Teacher()` 的函式)。
 
@@ -199,7 +200,8 @@ teacher1.greeting();
 
 這樣應該運作無虞。前 3 行的存取成員即繼承自一般 `Person()` 建構子 (類別)。最後 2 行的存取成員只能用於特定的 `Teacher()` 建構子 (類別) 之上。
 
-> **備註：** 如果你無法進行到現有進度，可比較自己與[完整版本](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (亦可看[實際執行](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)的情形) 的程式碼。
+> [!NOTE]
+> 如果你無法進行到現有進度，可比較自己與[完整版本](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (亦可看[實際執行](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)的情形) 的程式碼。
 
 這裡所提的技巧，當然不是在 JavaScript 建立繼承類別的唯一方法，但足以堪用。並可讓你了解應如何於 JavaScript 實作繼承。
 
@@ -211,7 +213,8 @@ teacher1.greeting();
 
 在[〈OOP 理論〉段落](/zh-TW/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters)中，我們也納入了 `Student` 類別並繼承了 `Person` 的所有功能，此外也提供不同的 `greeting()` 函式，且較 `Teacher` 的問候語沒那麼正式。在看了該段落中的學生問候語之後，可試著實作自己的 `Student()` 建構子，並繼承 `Person()`, 的所有功能，再實作不同的 `greeting()` 函式。
 
-> **備註：** 如果你無法進行到現有進度，可參考[完成版本](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (亦可看[實際執行](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)的情形)。
+> [!NOTE]
+> 如果你無法進行到現有進度，可參考[完成版本](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (亦可看[實際執行](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)的情形)。
 
 ## 物件成員摘要
 
@@ -231,7 +234,8 @@ teacher1.greeting();
 
 在自己的程式碼裡，特別是剛接觸或小型專案時，你用繼承的頻率可能沒那麼高。若沒真正需要，只是「為使用而使用」繼承，老實說只是浪費時間。但隨著程式碼規模越來越大，你就會找到使用的時間。如果你發現自己開始建立類似功能的多個物件時，就可先建立通用的物件類型，來概括所有共用的功能，並在特定物件類型中繼承這些功能，既方便又有效率。
 
-> **備註：** 基於 JavaScript 運作的方式 (如原型鍊等)，物件之間的功能共享一般稱為「委託 (Delegation)」，即特定物件將功能委託至通用物件類型。「委託」其實比繼承更精確一點。因為「所繼承的功能」並不會複製到「進行繼承的物件」之上，卻是保留在通用物件之中。
+> [!NOTE]
+> 基於 JavaScript 運作的方式 (如原型鍊等)，物件之間的功能共享一般稱為「委託 (Delegation)」，即特定物件將功能委託至通用物件類型。「委託」其實比繼承更精確一點。因為「所繼承的功能」並不會複製到「進行繼承的物件」之上，卻是保留在通用物件之中。
 
 當使用繼承時，建議你不要設定太多層的繼承關係，並時時留意你所定義的函式與屬性。在開始寫程式碼時，你可能會暫時修改內建瀏覽器物件的原型，除非你真的需要，否則儘量別這麼做。太多繼承可能連你自己都搞混，而且一旦需要除錯就會痛苦萬分。
 
diff --git a/files/zh-tw/learn/javascript/objects/index.md b/files/zh-tw/learn/javascript/objects/index.md
index cb5ea39bb37397..e76328f2e3f6ad 100644
--- a/files/zh-tw/learn/javascript/objects/index.md
+++ b/files/zh-tw/learn/javascript/objects/index.md
@@ -13,7 +13,8 @@ slug: Learn/JavaScript/Objects
 
 你也應該已經初步了解過 JavaScript 基本概念，再進一步閱讀 JavaScript 物件。所以另請先看過〈[JavaScript 的第一步](/zh-TW/docs/Learn/JavaScript/First_steps)〉與〈[JavaScript 基礎要件](/zh-TW/docs/Learn/JavaScript/Building_blocks)〉。
 
-> **備註：** 如果你在使用的桌機＼平板＼其他裝置，無法讓你建立自己的檔案，則可透過如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 的線上編碼程式，來體驗（大多數的）範例程式碼。
+> [!NOTE]
+> 如果你在使用的桌機＼平板＼其他裝置，無法讓你建立自己的檔案，則可透過如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 的線上編碼程式，來體驗（大多數的）範例程式碼。
 
 ## 指南
 
diff --git a/files/zh-tw/learn/javascript/objects/json/index.md b/files/zh-tw/learn/javascript/objects/json/index.md
index 3080e3a0861bb1..df18712c9974e5 100644
--- a/files/zh-tw/learn/javascript/objects/json/index.md
+++ b/files/zh-tw/learn/javascript/objects/json/index.md
@@ -101,7 +101,8 @@ superHeroes["members"][1]["powers"][2];
 4. 在此物件中，我們要存取 `powers` 屬性，所以用 `["powers"]`。
 5. 在 `powers` 屬性中有 1 個陣列具備所選超級英雄的能力。我們要選第三種能力，所以用 `[2]`。
 
-> **備註：** 我們在 [JSONText.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) 範例 (參閱[原始碼](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)) 的變數中，示範上述可用的 JSON。你可在自己瀏覽器的 JavaScript 主控台載入此程式碼，並存取變數中的資料。
+> [!NOTE]
+> 我們在 [JSONText.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) 範例 (參閱[原始碼](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)) 的變數中，示範上述可用的 JSON。你可在自己瀏覽器的 JavaScript 主控台載入此程式碼，並存取變數中的資料。
 
 ### 陣列作為 JSON
 
@@ -282,9 +283,11 @@ function showHeroes(jsonObj) {
 5. 再用另一個 `for` 迴圈逐一巡過目前英雄的超能力。針對每一項超能力，我們再建立 1 組 `<li>` 元素，把超能力放進該元素之中，再透過 `appendChild()` 把 `listItem` 放入 `<ul>` 元素之內 (`myList`)。
 6. 最後就是在 `<article>` (`myArticle`) 之內附加 `<h2>`、`<p>`、`<ul>`；再把 `<article>` 附加於 `<section>` 之內。這附加的順序極為重要，因為這也會是 HTML 中的顯示順序。
 
-> **備註：** 如果你無法讓此範例運作，可參閱我們的 [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) 原始碼 (亦可看到[實際執行情況](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)。)
+> [!NOTE]
+> 如果你無法讓此範例運作，可參閱我們的 [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) 原始碼 (亦可看到[實際執行情況](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)。)
 
-> **備註：** 如果你無法用我們說過的點記法 (dot-)＼括弧記法 (bracket notation) 來存取 JSON，則可用新分頁或自己的文字編輯器開啟 [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) 檔案並參考之。你也可再回去看看 [JavaScript 物件基礎概念](/zh-TW/docs/Learn/JavaScript/Objects/Basics) ，再次了解點＼括弧記法。
+> [!NOTE]
+> 如果你無法用我們說過的點記法 (dot-)＼括弧記法 (bracket notation) 來存取 JSON，則可用新分頁或自己的文字編輯器開啟 [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) 檔案並參考之。你也可再回去看看 [JavaScript 物件基礎概念](/zh-TW/docs/Learn/JavaScript/Objects/Basics) ，再次了解點＼括弧記法。
 
 ## 物件與文字交互轉換
 
diff --git a/files/zh-tw/learn/javascript/objects/object_building_practice/index.md b/files/zh-tw/learn/javascript/objects/object_building_practice/index.md
index 5dd03b4ec52b96..2be601f6a255d6 100644
--- a/files/zh-tw/learn/javascript/objects/object_building_practice/index.md
+++ b/files/zh-tw/learn/javascript/objects/object_building_practice/index.md
@@ -286,7 +286,8 @@ Ball.prototype.update = function () {
 
 3. 儲存並重新整理之後，就能看到球體在碰撞時變更其色彩了！
 
-> **備註：** 如果你無法讓此範例順利運作，可比較我們的[最後版本](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) (另可參閱[實際執行情形](http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html))。
+> [!NOTE]
+> 如果你無法讓此範例順利運作，可比較我們的[最後版本](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) (另可參閱[實際執行情形](http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html))。
 
 ## 摘要
 
diff --git a/files/zh-tw/learn/javascript/objects/object_prototypes/index.md b/files/zh-tw/learn/javascript/objects/object_prototypes/index.md
index d706b1539ba27d..c774b73af4c7d6 100644
--- a/files/zh-tw/learn/javascript/objects/object_prototypes/index.md
+++ b/files/zh-tw/learn/javascript/objects/object_prototypes/index.md
@@ -81,9 +81,11 @@ person1.valueOf();
 - 其實沒有，所以瀏覽器接著檢查 `person1` 物件的原型物件 (`Person`) 上是否有可用的 `valueOf()` 函式。
 - 同樣沒有，所以瀏覽器再檢查 `Person()` 建構子的原型物件 (`Object`) 上是否有可用的 `valueOf()` 函式。這次有，所以就會呼叫。
 
-> **備註：** 再次重申，在原型鍊中的函式與屬性並**不是**從任一物件複製到另一個物件，而是如上述的，沿著該原型鍊向上存取而得。
+> [!NOTE]
+> 再次重申，在原型鍊中的函式與屬性並**不是**從任一物件複製到另一個物件，而是如上述的，沿著該原型鍊向上存取而得。
 
-> **備註：** 直接存取物件的原型物件，並沒有一定的方式。原型鍊中，項目之間的「連結」均定義於內部屬性之內，即 JavaScript 規格中的 `[[prototype]]` (可參閱 {{glossary("ECMAScript")}})。新版瀏覽器均具備所謂的「[`__proto__`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) (兩邊都是 2 個底線)」屬性，其中就包含了物件的原型物件。舉例來說，你可嘗試「`person1.__proto__」`與「`person1.__proto__.__proto__`」看看程式碼中的鍊會是什麼樣子！
+> [!NOTE]
+> 直接存取物件的原型物件，並沒有一定的方式。原型鍊中，項目之間的「連結」均定義於內部屬性之內，即 JavaScript 規格中的 `[[prototype]]` (可參閱 {{glossary("ECMAScript")}})。新版瀏覽器均具備所謂的「[`__proto__`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) (兩邊都是 2 個底線)」屬性，其中就包含了物件的原型物件。舉例來說，你可嘗試「`person1.__proto__」`與「`person1.__proto__.__proto__`」看看程式碼中的鍊會是什麼樣子！
 
 ## 原型屬性也定義所要繼承的成員
 
@@ -95,7 +97,8 @@ person1.valueOf();
 
 [`Object.is()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/is)、[`Object.keys()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)，及其他未於 `prototype` 內定義的成員，也就不會繼承至 1). 物件實例或 2). 從 `Object()` 繼承而來的物件類型。這些函式、屬性都只能用於 `Object()` 建構子本身。
 
-> **備註：** 這看起來很奇怪：你怎麼能在建構子上定義函式 (Method)，而且這建構子本身也是函式 (Function)？其實「Function」也屬於一個物件類型，可參閱 [`Function()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function) 建構子參考以進一步了解。
+> [!NOTE]
+> 這看起來很奇怪：你怎麼能在建構子上定義函式 (Method)，而且這建構子本身也是函式 (Function)？其實「Function」也屬於一個物件類型，可參閱 [`Function()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function) 建構子參考以進一步了解。
 
 1. 你可自行檢查現有的原型屬性。回到我們之前的範例，試著於 JavaScript 主控台中輸入：
 
@@ -225,7 +228,8 @@ Person.prototype.farewell = function () {
 
 但是 `farewell()` 函式仍可用於 `person1` 物件實例，其可用的功能已自動更新過。如此證明了我們之前對原型鍊的說明，也代表瀏覽器會沿著鍊往上找「尚未於物件實例上定義的函式」，而非「複製到實例中的函式」。如此可建構強大且靈活的系統。
 
-> **備註：** 如果你在讓此範例運作時感覺有點困難，可參閱 [oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html) 範例 (也可看[即時運作](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html)的情形)。
+> [!NOTE]
+> 如果你在讓此範例運作時感覺有點困難，可參閱 [oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html) 範例 (也可看[即時運作](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html)的情形)。
 
 你很少會看到在 `prototype` 屬性上定義的屬性，因為照此範例定義的屬性彈性較低，舉例來說，你可新增如下的屬性：
 
diff --git a/files/zh-tw/learn/performance/multimedia/index.md b/files/zh-tw/learn/performance/multimedia/index.md
index dccfb130721b6a..6dbe5afea554fd 100644
--- a/files/zh-tw/learn/performance/multimedia/index.md
+++ b/files/zh-tw/learn/performance/multimedia/index.md
@@ -7,7 +7,8 @@ slug: Learn/Performance/Multimedia
 
 媒體，換句話說就是圖像跟影片，平均占了網站超過 70%的下載流量。以下載的效能來考慮的話，減少媒體數量和檔案大小是一個簡單可以實現的目標。 這篇文章聚焦在優化圖像跟影片來改善網站的效能。
 
-> **備註：** 這是一篇進階的在 web 上優化多媒體的介紹，包含基本的原則還有技巧，想了更多的話，可以看 <https://images.guide>。
+> [!NOTE]
+> 這是一篇進階的在 web 上優化多媒體的介紹，包含基本的原則還有技巧，想了更多的話，可以看 <https://images.guide>。
 
 ## 為什麼要優化你的多媒體
 
diff --git a/files/zh-tw/learn/server-side/django/admin_site/index.md b/files/zh-tw/learn/server-side/django/admin_site/index.md
index 072023c4f50ba2..466c491a92d7b3 100644
--- a/files/zh-tw/learn/server-side/django/admin_site/index.md
+++ b/files/zh-tw/learn/server-side/django/admin_site/index.md
@@ -58,7 +58,8 @@ admin.site.register(Genre)
 admin.site.register(BookInstance)
 ```
 
-> **備註：** 如果你在上一章節最後有接受挑戰並建立一個書本的「語言模型」 ([查看模型教學文章](/zh-TW/docs/Learn/Server-side/Django/Models))，你必需也要導入並註冊該模型！
+> [!NOTE]
+> 如果你在上一章節最後有接受挑戰並建立一個書本的「語言模型」 ([查看模型教學文章](/zh-TW/docs/Learn/Server-side/Django/Models))，你必需也要導入並註冊該模型！
 
 這是**註冊模型**最簡單的方式。
 
@@ -94,7 +95,8 @@ python3 manage.py runserver
 
 ![Admin Site - Book Add](admin_book_add.png)
 
-> **備註：** 在這邊我們希望你花點時間在你的 app 中新增一些書本、作者和書及類型(例如：奇幻等)。請確保每位作者與每種書籍類型都分別關聯了一本以上的書(這在文章稍後的實作的時候，會讓你的列表與細節視圖更加豐富有趣)。
+> [!NOTE]
+> 在這邊我們希望你花點時間在你的 app 中新增一些書本、作者和書及類型(例如：奇幻等)。請確保每位作者與每種書籍類型都分別關聯了一本以上的書(這在文章稍後的實作的時候，會讓你的列表與細節視圖更加豐富有趣)。
 
 當你新增完書本後，點擊上方書籤的 **Home** 連結回到主要管理頁面，接著點擊 **Books** 連結來展示目前的書本清單(你也可以點及其他連結看看其他模型的列表)，現在你已經加了幾本書，畫面應該會與下方截圖類似，你可以看到下方陳列了每本書的標題，這是我們在上一篇文章所提到的 Book 模型中的 `__str__()` 方法所回傳的值。
 
@@ -210,7 +212,8 @@ class BookAdmin(admin.ModelAdmin):
 
 很不幸地，我們無法直接在 `list_display` 中指定「書籍類別」(genre field)字段，因為它是一個 `ManyToManyField` (多對多字段)，因為如果這樣做會造成很大的資料庫讀寫「成本」，所以 Django 會預防這樣的狀況發生，因此，取而代之，我們將定義一個 `display_genre` 函式以「字串」形式得到書籍類別。(下方有定義此函式)
 
-> **備註：** Getting the `genre` may not be a good idea here, because of the "cost" of the database operation. We're showing you how because calling functions in your models can be very useful for other reasons — for example to add a _Delete_ link next to every item in the list.
+> [!NOTE]
+> Getting the `genre` may not be a good idea here, because of the "cost" of the database operation. We're showing you how because calling functions in your models can be very useful for other reasons — for example to add a _Delete_ link next to every item in the list.
 
 將以下程式碼添加到`Book`模型（**models.py**）。 這會從`genre`記錄的的頭三個值（如果有的話）創建一個字符串, 和創建一個在管理者網站中出現的`short_description`標題。
 
@@ -228,7 +231,8 @@ class BookAdmin(admin.ModelAdmin):
 
 `Genre` 模型(如果定義了語言模型，則還有 `Language` 模型）都有一個欄位，因此沒有必要為它們創建其他模型以顯示欄位。
 
-> **備註：** 更新 `BookInstance` 模型列表用來顯示狀態和預期的返回日期是有價值的。 我們在本文結尾處添加了一個挑戰！
+> [!NOTE]
+> 更新 `BookInstance` 模型列表用來顯示狀態和預期的返回日期是有價值的。 我們在本文結尾處添加了一個挑戰！
 
 ### 加入列表過濾器 (List Filter)
 
@@ -265,7 +269,8 @@ class AuthorAdmin(admin.ModelAdmin):
 
 ![Admin Site - Improved Author Detail](admin_improved_author_detail.png)
 
-> **備註：** 你還可以使用 `exclude` 屬性來聲明要從表單中排除的屬性列表（將顯示模型中的所有其他屬性）。
+> [!NOTE]
+> 你還可以使用 `exclude` 屬性來聲明要從表單中排除的屬性列表（將顯示模型中的所有其他屬性）。
 
 #### Sectioning the detail view
 
@@ -316,7 +321,8 @@ Now navigate to a view for a `Book` in your website — at the bottom you should
 
 In this case all we've done is declare our tabular inline class, which just adds all fields from the _inlined_ model. You can specify all sorts of additional information for the layout, including the fields to display, their order, whether they are read only or not, etc. (see [TabularInline](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline) for more information).
 
-> **備註：** There are some painful limits in this functionality! In the screenshot above we have three existing book instances, followed by three placeholders for new book instances (which look very similar!). It would be better to have NO spare book instances by default and just add them with the **Add another Book instance** link, or to be able to just list the `BookInstance`s as non-readable links from here. The first option can be done by setting the `extra` attribute to 0 in `BooksInstanceInline` model, try it by yourself.
+> [!NOTE]
+> There are some painful limits in this functionality! In the screenshot above we have three existing book instances, followed by three placeholders for new book instances (which look very similar!). It would be better to have NO spare book instances by default and just add them with the **Add another Book instance** link, or to be able to just list the `BookInstance`s as non-readable links from here. The first option can be done by setting the `extra` attribute to 0 in `BooksInstanceInline` model, try it by yourself.
 
 ## 自我挑戰
 
diff --git a/files/zh-tw/learn/server-side/django/authentication/index.md b/files/zh-tw/learn/server-side/django/authentication/index.md
index 919ea18212f076..6c0a20ff183c0b 100644
--- a/files/zh-tw/learn/server-side/django/authentication/index.md
+++ b/files/zh-tw/learn/server-side/django/authentication/index.md
@@ -29,7 +29,8 @@ slug: Learn/Server-side/Django/Authentication
 
 Django 提供認證和授權（「permission」）系統，該系統建立在[上一教程](/zh-TW/docs/Learn/Server-side/Django/Sessions)中討論的會話框架的基礎上。透過它可以驗證用戶憑證並定義個別用戶能夠執行的操作。該框架包括用於 `Users` 和 `Groups` 的內置模型（一般常用來一次性套用權限於一群用戶上的方式），用於指定用戶是否可以執行任務的權限/旗標，用於登入用戶的表單和視圖，以及 查看用於限制內容的工具。
 
-> **備註：** 從 Django 角度而言，身份驗證系統需要做到非常通用，因此不提供其他網頁身份驗證系統中提供的某些功能。需要解決一些常見問題的話可以透過第三方軟件包。例如，限制登錄嘗試和透過第三方進行身份驗證（例如 OAuth）。
+> [!NOTE]
+> 從 Django 角度而言，身份驗證系統需要做到非常通用，因此不提供其他網頁身份驗證系統中提供的某些功能。需要解決一些常見問題的話可以透過第三方軟件包。例如，限制登錄嘗試和透過第三方進行身份驗證（例如 OAuth）。
 
 在本教程中，我們將會展示如何在[本地圖書館](/zh-TW/docs/Learn/Server-side/Django/Tutorial_local_library_website)網站中啟用用戶身份驗證，並建立自己的登入和登出頁面，為模型添加權限以及控制對頁面的訪問。我們將根據身份驗證/權限顯示為用戶或是圖書館員設計的已借出書籍列表。
 
@@ -41,7 +42,8 @@ Django 提供認證和授權（「permission」）系統，該系統建立在[
 
 當我們[創建框架網站](/zh-TW/docs/Learn/Server-side/Django/skeleton_website)時（在教程 2 中），身份驗證已自動啟用，因此你此時無需執行任何其他操作。
 
-> **備註：** 當我們使用 `django-admin startproject` 命令創建應用程序時，所有必要的配置都為我們完成了。用戶和模型權限的數據庫表是在我們首次調用 `python manage.py migrate` 時創建的。
+> [!NOTE]
+> 當我們使用 `django-admin startproject` 命令創建應用程序時，所有必要的配置都為我們完成了。用戶和模型權限的數據庫表是在我們首次調用 `python manage.py migrate` 時創建的。
 
 該配置是在項目文件（**locallibrary/locallibrary/settings.py**）的 `INSTALLED_APPS` 和 `MIDDLEWARE` 部分中設置的，如下所示：
 
@@ -64,7 +66,8 @@ MIDDLEWARE = [
 
 當我們在教程 4 中查看 [Django 管理站](/zh-TW/docs/Learn/Server-side/Django/Admin_site)點時，你已經創建了第一個用戶（這是一個超級用戶，使用命令 `python manage.py createsuperuser` 創建）。我們的超級用戶已經通過身份驗證，並且具有所有權限，因此我們需要創建一個測試用戶來代表普通站點用戶。我們將使用管理站點來創建本地圖書館組和網站登錄名，因為這是最快的方法之一。
 
-> **備註：** 你還可以通過編程方式創建用戶，如下所示。例如，如果要開發一個界面以允許用戶創建自己的登錄名，則必須這樣做（你不應授予用戶訪問管理站點的權限）。
+> [!NOTE]
+> 你還可以通過編程方式創建用戶，如下所示。例如，如果要開發一個界面以允許用戶創建自己的登錄名，則必須這樣做（你不應授予用戶訪問管理站點的權限）。
 >
 > ```python
 > from django.contrib.auth.models import User
@@ -104,7 +107,8 @@ MIDDLEWARE = [
 
 就是這樣而已！ 現在，你將擁有一個「普通庫成員」帳戶，你將可以使用該帳戶進行測試（一旦我們實現了頁面以使其能夠登錄）。
 
-> **備註：** 你應該嘗試創建另一個庫成員用戶。另外，為圖書館員創建一個組，並為其添加用戶！
+> [!NOTE]
+> 你應該嘗試創建另一個庫成員用戶。另外，為圖書館員創建一個組，並為其添加用戶！
 
 ## Setting up your authentication views
 
@@ -112,9 +116,11 @@ Django 提供了創建身份驗證頁面所需的幾乎所有內容，以處理
 
 在本節中，我們顯示如何將默認系統集成到本地圖書館網站中並創建模板。我們將它們放在主項目 URL 中。
 
-> **備註：** 你不必使用任何代碼，但是你可能想要使用它，因為它使事情變得容易得多。如果你更改用戶模型（一個高級主題！），幾乎可以肯定需要更改表單處理代碼，但是即使如此，你仍然可以使用庫存視圖功能。
+> [!NOTE]
+> 你不必使用任何代碼，但是你可能想要使用它，因為它使事情變得容易得多。如果你更改用戶模型（一個高級主題！），幾乎可以肯定需要更改表單處理代碼，但是即使如此，你仍然可以使用庫存視圖功能。
 
-> **備註：** 在這種情況下，我們可以合理地將身份驗證頁面（包括 URL 和模板）放入目錄應用程序中。但是，如果我們有多個應用程序，最好將這種共享的登錄行為分開，並使其在整個站點中都可用，這就是我們在此處顯示的內容！
+> [!NOTE]
+> 在這種情況下，我們可以合理地將身份驗證頁面（包括 URL 和模板）放入目錄應用程序中。但是，如果我們有多個應用程序，最好將這種共享的登錄行為分開，並使其在整個站點中都可用，這就是我們在此處顯示的內容！
 
 ### Project URLs
 
@@ -129,7 +135,8 @@ urlpatterns += [
 
 導航到 `http://127.0.0.1:8000/accounts/` URL（注意尾隨斜杠！），然後 Django 將顯示一個錯誤，指出找不到此 URL，並列出了它嘗試的所有 URL。從中你可以看到將起作用的 URL，例如：
 
-> **備註：** 使用上述方法會在方括號中添加以下網址，這些網址可用於反轉網址映射。你無需執行其他任何操作-上面的 url 映射會自動映射以下提到的 URL。
+> [!NOTE]
+> 使用上述方法會在方括號中添加以下網址，這些網址可用於反轉網址映射。你無需執行其他任何操作-上面的 url 映射會自動映射以下提到的 URL。
 >
 > ```python
 > accounts/ login/ [name='login']
@@ -157,7 +164,8 @@ Exception Value:    registration/login.html
 
 對於這個網站，我們將 HTML 頁面放在 **templates/registration/** 目錄中。此目錄應位於你的項目根目錄中，即與 **catalog** 和 **locallibrary** 文件夾相同的目錄中）。請立即創建這些文件夾。
 
-> **備註：** Your folder structure should now look like the below:
+> [!NOTE]
+> Your folder structure should now look like the below:
 > locallibrary (django project folder)
 > |\_catalog
 > |\_locallibrary
@@ -177,7 +185,8 @@ TEMPLATES = [
 
 ### Login template
 
-> **警告：** 本文提供的身份驗證模板是 Django 演示登錄模板的非常基本/稍作修改的版本。你可能需要自定義它們以供自己使用！
+> [!WARNING]
+> 本文提供的身份驗證模板是 Django 演示登錄模板的非常基本/稍作修改的版本。你可能需要自定義它們以供自己使用！
 
 創建一個名為 **/locallibrary/templates/registration/login.html** 的新 HTML 文件。為其提供以下內容：
 
@@ -361,7 +370,8 @@ Someone asked for password reset for email \{{ email }}. Follow the link below:
 
 你可以通過登錄頁面中的鏈接測試密碼重置功能。**請注意，Django 只會將重置電子郵件發送到已經存儲在其數據庫中的地址（用戶）！**
 
-> **備註：** 密碼重設系統要求你的網站支持電子郵件，這不在本文的討論範圍之內，因此該部分尚無法使用。要進行測試，請將以下行放在 settings.py 文件的末尾。這將記錄發送到控制台的所有電子郵件（因此你可以從控制台複製密碼重置鏈接）。
+> [!NOTE]
+> 密碼重設系統要求你的網站支持電子郵件，這不在本文的討論範圍之內，因此該部分尚無法使用。要進行測試，請將以下行放在 settings.py 文件的末尾。這將記錄發送到控制台的所有電子郵件（因此你可以從控制台複製密碼重置鏈接）。
 >
 > ```python
 > EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
@@ -399,7 +409,8 @@ Someone asked for password reset for email \{{ email }}. Follow the link below:
 
 我們使用 `url` 模板標記和相應 URL 配置的名稱來創建登錄和註銷鏈接 URL。還要注意我們如何將 `?next=\{{request.path}}` 附加到 URL 的末尾。這是在鏈接的 URL 的末尾添加一個 URL 參數，其中包含當前頁面的地址（URL）。用戶成功登錄/註銷後，視圖將使用此 `next` 值將用戶重定向到他們首先單擊 login/logout 鏈接的頁面。
 
-> **備註：** 試試看！如果你在主頁上，然後單擊側欄中的「Login/Logout」，那麼在操作完成後，你應該回到同一頁面。
+> [!NOTE]
+> 試試看！如果你在主頁上，然後單擊側欄中的「Login/Logout」，那麼在操作完成後，你應該回到同一頁面。
 
 ### 在視圖中測試
 
@@ -413,7 +424,8 @@ def my_view(request):
     ...
 ```
 
-> **備註：** 你可以通過在 `request.user.is_authenticated` 上進行測試來手動執行相同的操作，但是裝飾器要方便得多！
+> [!NOTE]
+> 你可以通過在 `request.user.is_authenticated` 上進行測試來手動執行相同的操作，但是裝飾器要方便得多！
 
 同樣，在基於類的視圖中限制對登錄用戶的訪問權限的最簡單方法是從 `LoginRequiredMixin` 派生。你需要首先在父類列表中，在主視圖類之前聲明此混合。
 
@@ -474,7 +486,8 @@ def is_overdue(self):
     return False
 ```
 
-> **備註：** 在進行比較之前，我們首先要驗證 `due_back`是否為空。空的 `due_back` 字段將導致 Django 拋出錯誤而不是顯示頁面：空值不可比。這不是我們希望用戶體驗的東西！
+> [!NOTE]
+> 在進行比較之前，我們首先要驗證 `due_back`是否為空。空的 `due_back` 字段將導致 Django 拋出錯誤而不是顯示頁面：空值不可比。這不是我們希望用戶體驗的東西！
 
 現在，我們已經更新了模型，我們需要在項目上進行新的遷移，然後應用這些遷移：
 
@@ -507,7 +520,8 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 現在可以將書借給特定用戶了，然後借出許多 `BookInstance` 記錄。將他們的 `borrowed` 字段設置為測試用戶，`status` 為「借用」，並設置將來和將來的到期日。
 
-> **備註：** 我們不會詳細說明該過程，因為你已經知道如何使用管理網站！
+> [!NOTE]
+> 我們不會詳細說明該過程，因為你已經知道如何使用管理網站！
 
 ### On loan view
 
@@ -667,7 +681,8 @@ class MyView(PermissionRequiredMixin, View):
 
 你應該能夠遵循與其他視圖相同的模式。主要區別在於你只需要將視圖限制為圖書館員即可。你可以根據用戶是否是工作人員來執行此操作（函數裝飾器：`staff_member_required`，模板變量：`user.is_staff`），但是我們建議你改用 `can_mark_returned` 權限和 `PermissionRequiredMixin`，如上一節所述。
 
-> **警告：** 請記住不要將你的超級用戶用於基於權限的測試（即使尚未定義權限，權限檢查也始終對超級用戶返回 true！）。而是創建一個圖書管理員用戶，並添加所需的功能。
+> [!WARNING]
+> 請記住不要將你的超級用戶用於基於權限的測試（即使尚未定義權限，權限檢查也始終對超級用戶返回 true！）。而是創建一個圖書管理員用戶，並添加所需的功能。
 
 完成後，你的頁面應類似於以下屏幕截圖。![All borrowed books, restricted to librarian](library_borrowed_all.png)
 
diff --git a/files/zh-tw/learn/server-side/django/development_environment/index.md b/files/zh-tw/learn/server-side/django/development_environment/index.md
index c198bba12f5c7c..edbd58541c31b2 100644
--- a/files/zh-tw/learn/server-side/django/development_environment/index.md
+++ b/files/zh-tw/learn/server-side/django/development_environment/index.md
@@ -46,7 +46,8 @@ Django 如何在安裝和配置方面非常靈活。Django 可以：
 
 每個選項都需要略微不同的配置和設置。以下小節解釋了你的一些選擇。對於本文的其餘部分，我們將介紹 Django 在少見的操作系統上的設置，考量該模塊的其餘部分。
 
-> **備註：** 其他可能的安裝選項在官方 Django 文檔中介紹。[相應文件點擊這裡](#參見)。
+> [!NOTE]
+> 其他可能的安裝選項在官方 Django 文檔中介紹。[相應文件點擊這裡](#參見)。
 
 #### 支持哪些操作系統?
 
@@ -60,7 +61,8 @@ Django 如何在安裝和配置方面非常靈活。Django 可以：
 
 如果需要，可以使用 Python 3.4 或更高版本（將來的版本中將刪除 Python 3.4 支持）。
 
-> **備註：** Python 2.7 不能與 Django 2.0 一起使用（Django 1.11.x 系列是最後一個支持 Python 2.7 的系列）。
+> [!NOTE]
+> Python 2.7 不能與 Django 2.0 一起使用（Django 1.11.x 系列是最後一個支持 Python 2.7 的系列）。
 
 #### 我們在哪裡下載 Django?
 
@@ -78,13 +80,15 @@ Django 支持四個主要數據庫（PostgreSQL，MySQL，Oracle 和 SQLite）
 
 對於本文（和本模塊的大部分），我們將使用將數據存放在文件中的 SQLite 數據庫。SQLite 旨在用作輕量級數據庫，不能支持高級並發。然而，這確實是唯讀的應用程序的絕佳選擇。
 
-> **備註：** 當你使用標準工具（django-admin）啟動你的網站項目時，Django 將默認配置為使用 SQLite。用來入門，這是一個很好的選擇，因為它不需要額外的配置和設置。
+> [!NOTE]
+> 當你使用標準工具（django-admin）啟動你的網站項目時，Django 將默認配置為使用 SQLite。用來入門，這是一個很好的選擇，因為它不需要額外的配置和設置。
 
 #### 安裝到整個本機系統還是 Python 虛擬環境中?
 
 安裝 Python3 時，你將獲得一個由所有 Python3 代碼共享的單一全局環境。雖然你可以在環境中，安裝任何你喜歡的 Python 軟件包，但你一次只能安裝每個軟件包的一個特定版本。
 
-> **備註：** 安裝到全局環境中的 Python 應用程序可能會相互衝突（即，如果它們依賴於同一程序包的不同版本）。
+> [!NOTE]
+> 安裝到全局環境中的 Python 應用程序可能會相互衝突（即，如果它們依賴於同一程序包的不同版本）。
 
 如果你將 Django 安裝到默認/全局環境中，那麼你將只能在計算機上，定位一個版本的 Django。如果你想要創建新網站（使用最新版本的 Django）同時仍然維護依賴舊版本的網站，這可能是一個問題。
 
@@ -98,7 +102,8 @@ Django 支持四個主要數據庫（PostgreSQL，MySQL，Oracle 和 SQLite）
 
 本書簡要說明如何根據需要檢查什麼版本，並根據需要安裝新版本，適用於**Ubuntu Linux 16.04, Mac OS X, and Windows 10。**
 
-> **備註：** 根據你的平台,你還可以從操作系統自己的軟件包管理器或其他機制安裝 Python / pip。對於大多數平台，你可以從<https://www.python.org/downloads/>下載所需的安裝文件，並使用適當的平台特定方法進行安裝。
+> [!NOTE]
+> 根據你的平台,你還可以從操作系統自己的軟件包管理器或其他機制安裝 Python / pip。對於大多數平台，你可以從<https://www.python.org/downloads/>下載所需的安裝文件，並使用適當的平台特定方法進行安裝。
 
 ### Ubuntu 18.04
 
@@ -170,7 +175,8 @@ py -3 -V
 pip3 list
 ```
 
-> **備註：** 安裝程序應設置上述命令工作所需的一切。但是，如果你收到無法找到 Python 的消息，則可能忘記將其添加到系統路徑中。你可以通過再次運行安裝程序，選擇「修改」"Modify"，然後選中第二頁上標有「將 Python 添加到環境變量」"Add Python to environment variables"的框來執行此操作。
+> [!NOTE]
+> 安裝程序應設置上述命令工作所需的一切。但是，如果你收到無法找到 Python 的消息，則可能忘記將其添加到系統路徑中。你可以通過再次運行安裝程序，選擇「修改」"Modify"，然後選中第二頁上標有「將 Python 添加到環境變量」"Add Python to environment variables"的框來執行此操作。
 
 ## 在 Python 虛擬環境中使用 Django
 
@@ -255,7 +261,8 @@ source /usr/local/bin/virtualenvwrapper.sh
 
 這幾行與 Ubuntu 相同，但啟動文件是主目錄中、名稱不同的隱藏文件**.bash_profile**。
 
-> **備註：** 如果在查找程序中找不到要編輯的**.bash-profile**，也可以使用 nano 在終端中打開它。
+> [!NOTE]
+> 如果在查找程序中找不到要編輯的**.bash-profile**，也可以使用 nano 在終端中打開它。
 >
 > 命令看起來像這樣：
 >
@@ -302,7 +309,8 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get
 
 現在，你可以在虛擬環境中，安裝 Django，並開始開發。
 
-> **備註：** 從本文開始（實際上是本系列教學），請假設任何命令都在 Python 虛擬環境中運行，就像我們在上面設置的那樣。
+> [!NOTE]
+> 從本文開始（實際上是本系列教學），請假設任何命令都在 Python 虛擬環境中運行，就像我們在上面設置的那樣。
 
 ### 使用虛擬環境
 
@@ -333,7 +341,8 @@ py -3 -m django --version
  2.0
 ```
 
-> **備註：** 如果上面的 Windows 命令沒有顯示 django 模塊，請嘗試：
+> [!NOTE]
+> 如果上面的 Windows 命令沒有顯示 django 模塊，請嘗試：
 >
 > ```bash
 > py -m django --version
@@ -341,7 +350,8 @@ py -3 -m django --version
 >
 > 在 Windows 中，Python 3 腳本通過在命令前面加上`py -3`來啟動，儘管這可能會因具體安裝而異。如果遇到任何命令問題，請嘗試省略`-3`修飾符。在 Linux / macOS X 中，命令是`python3`。
 
-> **警告：** 本教程的其餘部分，使用 Linux 命令來調用 Python 3（python3）。如果你在 Windows 上工作，只需將此前綴替換為：`py -3`
+> [!WARNING]
+> 本教程的其餘部分，使用 Linux 命令來調用 Python 3（python3）。如果你在 Windows 上工作，只需將此前綴替換為：`py -3`
 
 ## 測試你的安裝
 
@@ -376,7 +386,8 @@ Starting development server at http://127.0.0.1:8000/
 Quit the server with CONTROL-C.
 ```
 
-> **備註：** 以上命令顯示 Linux / macOS X 命令。此時你可以忽略有關「14 個未應用的遷移」的警告！（"14 unapplied migration(s)" ）
+> [!NOTE]
+> 以上命令顯示 Linux / macOS X 命令。此時你可以忽略有關「14 個未應用的遷移」的警告！（"14 unapplied migration(s)" ）
 
 一旦服務器運行，你可以通過導航到本地 Web 瀏覽器上的以下 URL 來查看該站點：`http://127.0.0.1:8000/`。你應該看到一個如下所示的網站：
 
diff --git a/files/zh-tw/learn/server-side/django/django_assessment_blog/index.md b/files/zh-tw/learn/server-side/django/django_assessment_blog/index.md
index 71e6f56be6553d..76ca07fbe019ee 100644
--- a/files/zh-tw/learn/server-side/django/django_assessment_blog/index.md
+++ b/files/zh-tw/learn/server-side/django/django_assessment_blog/index.md
@@ -158,7 +158,8 @@ slug: Learn/Server-side/Django/django_assessment_blog
 - BlogListView (所有文章的頁面) 使用期望的模板(例如預設值)。
 - BlogListView 以每頁 5 筆項目分頁(至少第一頁是如此)。
 
-> **備註：** 當然你也可以跑很多其他的測試。但是我們會希望你至少實作以上列出的測試項目。
+> [!NOTE]
+> 當然你也可以跑很多其他的測試。但是我們會希望你至少實作以上列出的測試項目。
 
 下一區塊顯示符合以上需求的網頁[截圖](#Screenshots)。
 
diff --git a/files/zh-tw/learn/server-side/django/forms/index.md b/files/zh-tw/learn/server-side/django/forms/index.md
index 2c0e06c2164a5c..3322a7792abfbc 100644
--- a/files/zh-tw/learn/server-side/django/forms/index.md
+++ b/files/zh-tw/learn/server-side/django/forms/index.md
@@ -106,7 +106,8 @@ Django 的表單處理使用了我們在以前的教程中學到的所有相同
 
 Django 提供了許多工具和方法來幫助你完成上述任務。 最基本的是 `Form`類，它簡化了表單 HTML 的生成和數據清除/驗證的過程。 在下一節中，我們將使用頁面的實際示例描述表單如何工作，以使圖書館員可以續訂書籍。
 
-> **備註：** 當我們討論 Django 的更多「高級」表單框架類時，了解`Form`的使用方式將對你有所幫助。
+> [!NOTE]
+> 當我們討論 Django 的更多「高級」表單框架類時，了解`Form`的使用方式將對你有所幫助。
 
 ## 使用表單和功能視圖續訂表單
 
@@ -183,7 +184,8 @@ There are two important things to note. The first is that we get our data using
 
 The second point is that if a value falls outside our range we raise a `ValidationError`, specifying the error text that we want to display in the form if an invalid value is entered. The example above also wraps this text in one of [Django's translation functions](https://docs.djangoproject.com/en/2.0/topics/i18n/translation/) `ugettext_lazy()` (imported as `_()`), which is good practice if you want to translate your site later.
 
-> **備註：** There are numerious other methods and examples for validating forms in [Form and field validation](https://docs.djangoproject.com/en/2.0/ref/forms/validation/) (Django docs). For example, in cases where you have multiple fields that depend on each other, you can override the [Form.clean()](https://docs.djangoproject.com/en/2.0/ref/forms/api/#django.forms.Form.clean) function and again raise a `ValidationError`.
+> [!NOTE]
+> There are numerious other methods and examples for validating forms in [Form and field validation](https://docs.djangoproject.com/en/2.0/ref/forms/validation/) (Django docs). For example, in cases where you have multiple fields that depend on each other, you can override the [Form.clean()](https://docs.djangoproject.com/en/2.0/ref/forms/api/#django.forms.Form.clean) function and again raise a `ValidationError`.
 
 That's all we need for the form in this example!
 
@@ -203,7 +205,8 @@ urlpatterns += [
 
 The URL configuration will redirect URLs with the format **/catalog/book/_\<bookinstance id>_/renew/** to the function named `renew_book_librarian()` in **views.py**, and send the `BookInstance` id as the parameter named `pk`. The pattern only matches if `pk` is a correctly formatted `uuid`.
 
-> **備註：** We can name our captured URL data "`pk`" anything we like, because we have complete control over the view function (we're not using a generic detail view class that expects parameters with a certain name). However `pk`, short for "primary key", is a reasonable convention to use!
+> [!NOTE]
+> We can name our captured URL data "`pk`" anything we like, because we have complete control over the view function (we're not using a generic detail view class that expects parameters with a certain name). However `pk`, short for "primary key", is a reasonable convention to use!
 
 ### View
 
@@ -296,7 +299,8 @@ If the form is not valid we call `render()` again, but this time the form value
 
 If the form is valid, then we can start to use the data, accessing it through the `form.cleaned_data` attribute (e.g. `data = form.cleaned_data['renewal_date']`). Here we just save the data into the `due_back` value of the associated `BookInstance` object.
 
-> **警告：** While you can also access the form data directly through the request (for example `request.POST['renewal_date']` or `request.GET['renewal_date']` (if using a GET request) this is NOT recommended. The cleaned data is sanitised, validated, and converted into Python-friendly types.
+> [!WARNING]
+> While you can also access the form data directly through the request (for example `request.POST['renewal_date']` or `request.GET['renewal_date']` (if using a GET request) this is NOT recommended. The cleaned data is sanitised, validated, and converted into Python-friendly types.
 
 The final step in the form-handling part of the view is to redirect to another page, usually a "success" page. In this case we use `HttpResponseRedirect` and `reverse()` to redirect to the view named `'all-borrowed'` (this was created as the "challenge" in [Django Tutorial Part 8: User authentication and permissions](/zh-TW/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself)). If you didn't create that page consider redirecting to the home page at URL '/').
 
@@ -371,7 +375,8 @@ Most of this will be completely familiar from previous tutorials. We extend the
 
 The form code is relatively simple. First we declare the `form` tags, specifying where the form is to be submitted (`action`) and the `method` for submitting the data (in this case an "HTTP POST") — if you recall the [HTML Forms](#HTML_forms) overview at the top of the page, an empty `action` as shown, means that the form data will be posted back to the current URL of the page (which is what we want!). Inside the tags we define the `submit` input, which a user can press to submit the data. The `{% csrf_token %}` added just inside the form tags is part of Django's cross-site forgery protection.
 
-> **備註：** Add the `{% csrf_token %}` to every Django template you create that uses `POST` to submit data. This will reduce the chance of forms being hijacked by malicious users.
+> [!NOTE]
+> Add the `{% csrf_token %}` to every Django template you create that uses `POST` to submit data. This will reduce the chance of forms being hijacked by malicious users.
 
 All that's left is the `\{{form}}` template variable, which we passed to the template in the context dictionary. Perhaps unsurprisingly, when used as shown this provides the default rendering of all the form fields, including their labels, widgets, and help text — the rendering is as shown below:
 
@@ -393,7 +398,8 @@ All that's left is the `\{{form}}` template variable, which we passed to the tem
 </tr>
 ```
 
-> **備註：** It is perhaps not obvious because we only have one field, but by default every field is defined in its own table row (which is why the variable is inside `table` tags above). This same rendering is provided if you reference the template variable `\{{ form.as_table }}`.
+> [!NOTE]
+> It is perhaps not obvious because we only have one field, but by default every field is defined in its own table row (which is why the variable is inside `table` tags above). This same rendering is provided if you reference the template variable `\{{ form.as_table }}`.
 
 If you were to enter an invalid date, you'd additionally get a list of the errors rendered in the page (shown in bold below).
 
@@ -440,7 +446,8 @@ If you accepted the "challenge" in [Django Tutorial Part 8: User authentication
 {% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>{% endif %}
 ```
 
-> **備註：** Remember that your test login will need to have the permission "`catalog.can_mark_returned`" in order to access the renew book page (perhaps use your superuser account).
+> [!NOTE]
+> Remember that your test login will need to have the permission "`catalog.can_mark_returned`" in order to access the renew book page (perhaps use your superuser account).
 
 You can alternatively manually construct a test URL like this — `http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/` (a valid bookinstance id can be obtained by navigating to a book detail page in your library, and copying the `id` field).
 
@@ -476,7 +483,8 @@ class RenewBookModelForm(ModelForm):
         fields = ['due_back',]
 ```
 
-> **備註：** This might not look like all that much simpler than just using a `Form` (and it isn't in this case, because we just have one field). However if you have a lot of fields, it can reduce the amount of code quite significantly!
+> [!NOTE]
+> This might not look like all that much simpler than just using a `Form` (and it isn't in this case, because we just have one field). However if you have a lot of fields, it can reduce the amount of code quite significantly!
 
 The rest of the information comes from the model field definitions (e.g. labels, widgets, help text, error messages). If these aren't quite right, then we can override them in our `class Meta`, specifying a dictionary containing the field to change and its new value. For example, in this form we might want a label for our field of "_Renewal date_" (rather than the default based on the field name: _Due date_), and we also want our help text to be specific to this use case. The `Meta` below shows you how to override these fields, and you can similarly set `widgets` and `error_messages` if the defaults aren't sufficient.
 
@@ -522,7 +530,8 @@ The class `RenewBookModelForm` below is now functionally equivalent to our origi
 
 The form handling algorithm we used in our function view example above represents an extremely common pattern in form editing views. Django abstracts much of this "boilerplate" for you, by creating [generic editing views](https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-editing/) for creating, editing, and deleting views based on models. Not only do these handle the "view" behaviour, but they automatically create the form class (a `ModelForm`) for you from the model.
 
-> **備註：** In addition to the editing views described here, there is also a [FormView](https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-editing/#formview) class, which lies somewhere between our function view and the other generic views in terms of "flexibility" vs "coding effort". Using `FormView` you still need to create your `Form`, but you don't have to implement all of the standard form-handling pattern. Instead you just have to provide an implementation of the function that will be called once the submitted is known to be be valid.
+> [!NOTE]
+> In addition to the editing views described here, there is also a [FormView](https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-editing/#formview) class, which lies somewhere between our function view and the other generic views in terms of "flexibility" vs "coding effort". Using `FormView` you still need to create your `Form`, but you don't have to implement all of the standard form-handling pattern. Instead you just have to provide an implementation of the function that will be called once the submitted is known to be be valid.
 
 In this section we're going to use generic editing views to create pages to add functionality to create, edit, and delete `Author` records from our library — effectively providing a basic reimplementation of parts of the Admin site (this could be useful if you need to offer admin functionality in a more flexible way that can be provided by the admin site).
 
@@ -612,7 +621,8 @@ There is nothing particularly new here! You can see that the views are classes,
 
 The author create, update, and delete pages are now ready to test (we won't bother hooking them into the site sidebar in this case, although you can do so if you wish).
 
-> **備註：** Observant users will have noticed that we didn't do anything to prevent unauthorised users from accessing the pages! We leave that as an exercise for you (hint: you could use the `PermissionRequiredMixin` and either create a new permission or reuse our `can_mark_returned` permission).
+> [!NOTE]
+> Observant users will have noticed that we didn't do anything to prevent unauthorised users from accessing the pages! We leave that as an exercise for you (hint: you could use the `PermissionRequiredMixin` and either create a new permission or reuse our `can_mark_returned` permission).
 
 ### Testing the page
 
diff --git a/files/zh-tw/learn/server-side/django/generic_views/index.md b/files/zh-tw/learn/server-side/django/generic_views/index.md
index 80fdfbc4ca3b37..9600ff66fe3c1d 100644
--- a/files/zh-tw/learn/server-side/django/generic_views/index.md
+++ b/files/zh-tw/learn/server-side/django/generic_views/index.md
@@ -70,7 +70,8 @@ class BookListView(generic.ListView):
 
 就是這樣！通用 view 將查詢數據庫，以獲取指定模型（Book）的所有記錄，然後呈現/locallibrary/catalog/templates/catalog/book_list.html 的模板（我們將在下面創建）。在模板中，你可以使用所謂的 object_list 或 book_list 的模板變量（即通常為「 the_model_name_list」），以訪問書本列表。
 
-> **備註：** This awkward path for the template location isn't a misprint — the generic views look for templates in `/application_name/the_model_name_list.html` (`catalog/book_list.html` in this case) inside the application's `/application_name/templates/` directory (`/catalog/templates/)`.
+> [!NOTE]
+> This awkward path for the template location isn't a misprint — the generic views look for templates in `/application_name/the_model_name_list.html` (`catalog/book_list.html` in this case) inside the application's `/application_name/templates/` directory (`/catalog/templates/)`.
 
 你可以添加屬性，以更改上面的某種行為。例如，如果需要使用同一模型的多個視圖，則可以指定另一個模板文件，或者如果 book_list 對於特定模板用例不直觀，則可能需要使用不同的模板變量名稱。可能最有用的變更，是更改/過濾返回的結果子集-因此，你可能會列出其他用戶閱讀的前 5 本書，而不是列出所有書本。
 
@@ -116,7 +117,8 @@ class BookListView(generic.ListView):
 - 然後添加新的內文信息。
 - 然後返回新的（更新後）內文。
 
-> **備註：** Check out [Built-in class-based generic views](https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/) (Django docs) for many more examples of what you can do.
+> [!NOTE]
+> Check out [Built-in class-based generic views](https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/) (Django docs) for many more examples of what you can do.
 
 ### Creating the List View template
 
@@ -184,7 +186,8 @@ We access the _fields_ of the associated book record using the "dot notation" (e
 
 We can also call _functions_ in the model from within our template — in this case we call `Book.get_absolute_url()` to get an URL you could use to display the associated detail record. This works provided the function does not have any arguments (there is no way to pass arguments!)
 
-> **備註：** We have to be a little careful of "side effects" when calling functions in templates. Here we just get a URL to display, but a function can do pretty much anything — we wouldn't want to delete our database (for example) just by rendering our template!
+> [!NOTE]
+> We have to be a little careful of "side effects" when calling functions in templates. Here we just get a URL to display, but a function can do pretty much anything — we wouldn't want to delete our database (for example) just by rendering our template!
 
 #### Update the base template
 
@@ -220,13 +223,16 @@ For the _book-detail_ path the URL pattern uses a special syntax to capture the
 
 In this case we use `'<int:pk>'` to capture the book id, which must be an integer, and pass it to the view as a parameter named `pk` (short for primary key).
 
-> **備註：** As discussed previously, our matched URL is actually `catalog/book/<digits>` (because we are in the **catalog** application, `/catalog/` is assumed).
+> [!NOTE]
+> As discussed previously, our matched URL is actually `catalog/book/<digits>` (because we are in the **catalog** application, `/catalog/` is assumed).
 
-> **警告：** The generic class-based detail view _expects_ to be passed a parameter named **pk**. If you're writing your own function view you can use whatever parameter name you like, or indeed pass the information in an unnamed argument.
+> [!WARNING]
+> The generic class-based detail view _expects_ to be passed a parameter named **pk**. If you're writing your own function view you can use whatever parameter name you like, or indeed pass the information in an unnamed argument.
 
 #### Advanced path matching/regular expression primer
 
-> **備註：** You won't need this section to complete the tutorial! We provide it because knowing this option is likely to be useful in your Django-centric future.
+> [!NOTE]
+> You won't need this section to complete the tutorial! We provide it because knowing this option is likely to be useful in your Django-centric future.
 
 The pattern matching provided by `path()` is simple and useful for the (very common) cases where you just want to capture _any_ string or integer. If you need more refined filtering (for example, to filter only strings that have a certain number of characters) then you can use the [re_path()](https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.re_path) method.
 
@@ -317,7 +323,8 @@ Lets consider a few real examples of patterns:
 
 You can capture multiple patterns in the one match, and hence encode lots of different information in a URL.
 
-> **備註：** As a challenge, consider how you might encode an url to list all books released in a particular year, month, day, and the RE that could be used to match it.
+> [!NOTE]
+> As a challenge, consider how you might encode an url to list all books released in a particular year, month, day, and the RE that could be used to match it.
 
 #### Passing additional options in your URL maps
 
@@ -328,7 +335,8 @@ path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl
 path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
 ```
 
-> **備註：** Both extra options and named captured patterns are passed to the view as _named_ arguments. If you use the **same name** for both a captured pattern and an extra option then only the captured pattern value will be sent to the view (the value specified in the additional option will be dropped).
+> [!NOTE]
+> Both extra options and named captured patterns are passed to the view as _named_ arguments. If you use the **same name** for both a captured pattern and an extra option then only the captured pattern value will be sent to the view (the value specified in the additional option will be dropped).
 
 ### View (class-based)
 
@@ -364,7 +372,8 @@ def book_detail_view(request, primary_key):
 
 The view first tries to get the specific book record from the model. If this fails the view should raise an `Http404` exception to indicate that the book is "not found". The final step is then, as usual, to call `render()` with the template name and the book data in the `context` parameter (as a dictionary).
 
-> **備註：** The `get_object_or_404()` (shown commented out above) is a convenient shortcut to raise an `Http404` exception if the record is not found.
+> [!NOTE]
+> The `get_object_or_404()` (shown commented out above) is a convenient shortcut to raise an `Http404` exception if the record is not found.
 
 ### Creating the Detail View template
 
@@ -402,7 +411,8 @@ Create the HTML file **/locallibrary/catalog/templates/catalog/book_detail.html*
 {% endblock %}
 ```
 
-> **備註：** The author link in the template above has an empty URL because we've not yet created an author detail page. Once that exists, you should update the URL like this:
+> [!NOTE]
+> The author link in the template above has an empty URL because we've not yet created an author detail page. Once that exists, you should update the URL like this:
 >
 > ```python
 > <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
@@ -425,7 +435,8 @@ The one interesting thing we haven't seen before is the function `book.bookinsta
 
 需要這方法是因為我們僅在「一」那側 model（Book）定義一個`ForeignKey` (一對多)字段的關聯，也因為沒有任何的關聯被定義在「多」那側 model（BookInstance），故無法透過字段來取得相關的紀錄。為了克服這個問題，Django 建立一個 function 取名為「reverse lookup」供使用。function 的名字以一對多關係中該 `ForeignKey` 被定義在的那個模型名稱小寫，再在字尾加上`_set`（因此在 `Book` 創建的 function 名是 `bookinstance_set()`）。
 
-> **備註：** 在這我們使用 `all()` 取得所有紀錄 (預設)，你無法直接在 template 做是因為你無法指定引數到 function，但你可用 `filter()` 方法取得一個紀錄的子集 。
+> [!NOTE]
+> 在這我們使用 `all()` 取得所有紀錄 (預設)，你無法直接在 template 做是因為你無法指定引數到 function，但你可用 `filter()` 方法取得一個紀錄的子集 。
 >
 > 順帶一提，若你不再基於類的 view 或 model 定義順序（order），開發伺服器會將會報錯類似的訊息：
 >
@@ -470,7 +481,8 @@ The one interesting thing we haven't seen before is the function `book.bookinsta
 
 At this point we should have created everything needed to display both the book list and book detail pages. Run the server (`python3 manage.py runserver`) and open your browser to <http://127.0.0.1:8000/>.
 
-> **警告：** Don't click any author or author detail links yet — you'll create those in the challenge!
+> [!WARNING]
+> Don't click any author or author detail links yet — you'll create those in the challenge!
 
 Click the **All books** link to display the list of books.
 
@@ -549,7 +561,7 @@ The challenge in this article is to create the author detail and list views requ
 
 The code required for the URL mappers and the views should be virtually identical to the `Book` list and detail views we created above. The templates will be different, but will share similar behaviour.
 
-> **備註：**
+> [!NOTE]
 >
 > - Once you've created the URL mapper for the author list page you will also need to update the **All authors** link in the base template. Follow the [same process](#Update_the_base_template) as we did when we updated the **All books** link.
 > - Once you've created the URL mapper for the author detail page, you should also update the [book detail view template](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**) so that the author link points to your new author detail page (rather than being an empty URL). The line will change to add the template tag shown in bold below.
diff --git a/files/zh-tw/learn/server-side/django/home_page/index.md b/files/zh-tw/learn/server-side/django/home_page/index.md
index 0e438a6b8b0365..b266708f8c737f 100644
--- a/files/zh-tw/learn/server-side/django/home_page/index.md
+++ b/files/zh-tw/learn/server-side/django/home_page/index.md
@@ -60,7 +60,8 @@ slug: Learn/Server-side/Django/Home_page
 
 相比之下，最後兩個 URL 用於顯示有關特定書籍或作者的詳細信息-這些 URL 編碼要顯示在 URL 中的項目的標識（如上顯示為\<id>）。 URL 映射器可以提取編碼信息並將其傳遞給視圖，然後將動態確定從數據庫中獲取哪些信息。 通過在我們的 URL 中編碼信息，我們只需要一個 URL 映射，視圖和模板即可處理每本書（或作者）。
 
-> **備註：** Django 允許你以自己喜歡的任何方式來構造 URL-你可以如上所示在 URL 主體中編碼信息或使用 URL `GET` 參數（例如`/book/?id=6`）。 無論使用哪種方法，都應保持 URL 的整潔，邏輯和可讀性([在此處查看 W3C 建議](https://www.w3.org/Provider/Style/URI)).
+> [!NOTE]
+> Django 允許你以自己喜歡的任何方式來構造 URL-你可以如上所示在 URL 主體中編碼信息或使用 URL `GET` 參數（例如`/book/?id=6`）。 無論使用哪種方法，都應保持 URL 的整潔，邏輯和可讀性([在此處查看 W3C 建議](https://www.w3.org/Provider/Style/URI)).
 >
 > Django 文檔傾向於建議在 URL 正文中編碼信息，他們認為這種做法鼓勵更好的 URL 設計。
 
@@ -70,7 +71,8 @@ slug: Learn/Server-side/Django/Home_page
 
 我們將創建的第一頁是索引頁 (`catalog/`)。 這將顯示一些靜態 HTML，以及數據庫中不同記錄的一些計算出的「計數」。 為了完成這項工作，我們必須創建一個 URL 映射，視圖和模板。
 
-> **備註：** 值得在本節中多加註意。大多數材料是所有頁面共有的。
+> [!NOTE]
+> 值得在本節中多加註意。大多數材料是所有頁面共有的。
 
 ### URL mapping
 
@@ -84,7 +86,8 @@ urlpatterns += [
 ]
 ```
 
-> **備註：** 每當 Django 遇到導入函數 [`django.urls.include()`](https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.include)時，它都會在指定的結束字符處分割 URL 字符串，並將剩餘的子字符串發送到所包含的*URLconf* 模塊以進行進一步處理。
+> [!NOTE]
+> 每當 Django 遇到導入函數 [`django.urls.include()`](https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.include)時，它都會在指定的結束字符處分割 URL 字符串，並將剩餘的子字符串發送到所包含的*URLconf* 模塊以進行進一步處理。
 
 我們還為*URLConf* 模塊創建了一個佔位符文件，名為 **/catalog/urls.py**。 將以下行添加到該文件：
 
@@ -105,7 +108,8 @@ urlpatterns = [
 <a href="{% url 'index' %}">Home</a>.
 ```
 
-> **備註：** 我們可以對上面的鏈接進行硬編碼 (例如`<a href="/catalog/">Home</a>`), 但是如果我們更改主頁的模式 (例如更改為 `/catalog/index`) 則模板將不再 正確鏈接。 使用反向 URL 映射更加靈活和健壯！
+> [!NOTE]
+> 我們可以對上面的鏈接進行硬編碼 (例如`<a href="/catalog/">Home</a>`), 但是如果我們更改主頁的模式 (例如更改為 `/catalog/index`) 則模板將不再 正確鏈接。 使用反向 URL 映射更加靈活和健壯！
 
 ### View (function-based)
 
@@ -158,7 +162,8 @@ def index(request):
 
 模板是一個文本文件，用於定義文件（例如 HTML 頁面）的結構或佈局，並使用佔位符表示實際內容。 Django 會在你的應用程序名為'**templates**'的目錄中自動查找模板。 因此，例如，在我們剛剛添加的索引視圖中， `render()` 函數將有望能夠找到文件 **/locallibrary/catalog/templates/_index.html_**，如果找不到該文件，則會引發錯誤。 如果你保存以前的更改並返回瀏覽器，則可以看到此信息-訪問`127.0.0.1:8000`現在將為你提供一個相當直觀的錯誤消息"`TemplateDoesNotExist at /catalog/`"以及其他詳細信息。
 
-> **備註：** Django 將根據項目的設置文件在許多位置查找模板（搜索已安裝的應用程序是默認設置！）。 你可以在 [Templates](https://docs.djangoproject.com/en/2.0/topics/templates/) （Django docs）中找到有關 Django 如何查找模板及其支持的模板格式的更多信息。
+> [!NOTE]
+> Django 將根據項目的設置文件在許多位置查找模板（搜索已安裝的應用程序是默認設置！）。 你可以在 [Templates](https://docs.djangoproject.com/en/2.0/topics/templates/) （Django docs）中找到有關 Django 如何查找模板及其支持的模板格式的更多信息。
 
 #### Extending templates
 
@@ -166,7 +171,8 @@ def index(request):
 
 例如，基本模板 **base_generic.html** 可能類似於以下文本。 如你所見，其中包含一些"通用" HTML 以及標題，側邊欄和內容的部分，這些部分使用命名的`block` 和`endblock` 模板標記進行了標記（以粗體顯示）。 區塊可以為空，或包含將在默認情況下用於派生頁面的內容。
 
-> **備註：** 模板*tags* 類似於可以在模板中使用的功能，可以在模板中循環使用列表，基於變量的值執行條件操作等。除了模板標記之外，模板語法還允許你引用模板變量（傳遞給 模板），並使用*template filters*，該過濾器可重新格式化變量（例如，將字符串設置為小寫）。
+> [!NOTE]
+> 模板*tags* 類似於可以在模板中使用的功能，可以在模板中循環使用列表，基於變量的值執行條件操作等。除了模板標記之外，模板語法還允許你引用模板變量（傳遞給 模板），並使用*template filters*，該過濾器可重新格式化變量（例如，將字符串設置為小寫）。
 
 ```django
 <!DOCTYPE html>
@@ -207,7 +213,8 @@ def index(request):
 
 下面列出了我們計劃用於 _LocalLibrary_ 網站的基本模板。 如你所見，其中包含一些 HTML 以及 `title`、`sidebar` 和 `content`。 我們有一個默認標題（我們可能想要更改）和一個默認側邊欄，其中帶有指向所有書籍和作者列表的鏈接（我們可能不想更改，但是如果需要的話，我們允許範圍通過將其放在一個區塊中）。
 
-> **備註：** 我們還引入了兩個附加的模板標籤：`url` 和`load static`。這些將在以下各節中討論。
+> [!NOTE]
+> 我們還引入了兩個附加的模板標籤：`url` 和`load static`。這些將在以下各節中討論。
 
 創建一個新文件 **/locallibrary/catalog/templates/_base_generic.html_**，並為其提供以下內容：
 
@@ -287,7 +294,8 @@ def index(request):
 
 在 _Dynamic content_ 部分中，我們聲明了要從視圖中包含的信息的佔位符（_template variables_）。 變量使用「雙括號」或「把手」語法標記（請參見上面的粗體）。
 
-> **備註：** 因為變量具有雙括號 (`\{{ num_books }}`)，而標籤則用百分號括在單括號中擴展為 (`{% extends "base_generic.html" %}`)，所以你可以輕鬆識別是要處理模板變量還是模板標籤（函數）。
+> [!NOTE]
+> 因為變量具有雙括號 (`\{{ num_books }}`)，而標籤則用百分號括在單括號中擴展為 (`{% extends "base_generic.html" %}`)，所以你可以輕鬆識別是要處理模板變量還是模板標籤（函數）。
 
 這裡要注意的重要一點是，這些變量是使用我們在視圖的`render()` 函數中傳遞給`context` 字典的鍵命名的（請參見下文）; 呈現模板時，這些將被其*values* 替換。
 
@@ -324,7 +332,8 @@ return render(request, 'index.html', context=context)
   style="width:555px;height:540px;" />
 ```
 
-> **備註：** 上面的更改指定了文件的位置，但是 Django 默認不提供文件。創建網站框架時 ([created the website skeleton](/zh-TW/docs/Learn/Server-side/Django/skeleton_website))，雖然我們在全局 URL 映射器(**/locallibrary/locallibrary/urls.py**)中啟用了由開發 Web 服務器提供的服務，但你仍需要安排它們在生產中提供。 我們待會再看。
+> [!NOTE]
+> 上面的更改指定了文件的位置，但是 Django 默認不提供文件。創建網站框架時 ([created the website skeleton](/zh-TW/docs/Learn/Server-side/Django/skeleton_website))，雖然我們在全局 URL 映射器(**/locallibrary/locallibrary/urls.py**)中啟用了由開發 Web 服務器提供的服務，但你仍需要安排它們在生產中提供。 我們待會再看。
 
 有關使用靜態文件的更多信息，請參閱管理靜態文件 [Managing static files](https://docs.djangoproject.com/en/2.0/howto/static-files/) (Django docs)。
 
@@ -344,7 +353,8 @@ return render(request, 'index.html', context=context)
 
 ![Index page for LocalLibrary website](index_page_ok.png)
 
-> **備註：** 你將無法使用**All books**和**All authors**鏈接，因為尚未定義這些頁面的路徑，視圖和模板（當前我們僅在`base_generic.html` html 模板中插入了這些鏈接的佔位符）。
+> [!NOTE]
+> 你將無法使用**All books**和**All authors**鏈接，因為尚未定義這些頁面的路徑，視圖和模板（當前我們僅在`base_generic.html` html 模板中插入了這些鏈接的佔位符）。
 
 ## Challenge yourself
 
diff --git a/files/zh-tw/learn/server-side/django/index.md b/files/zh-tw/learn/server-side/django/index.md
index e9d4cfe620a441..0441bfddd59650 100644
--- a/files/zh-tw/learn/server-side/django/index.md
+++ b/files/zh-tw/learn/server-side/django/index.md
@@ -13,7 +13,8 @@ Django 使用 Python 語言編寫，是一個廣受歡迎、且功能完整的
 
 最好能有基本的編程概念、並了解 [Python](/zh-TW/docs/Glossary/Python) 語言，但並不是理解本教程的核心概念的必然條件。
 
-> **備註：** 對於初學者來說，Python 是最容易閱讀和理解的編程語言之一。也就是說，如果你想更好的理解本教程，網上有很多免費書籍及免費教程可供參考學習（建議初學者查看 Python 官網的 [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) )。
+> [!NOTE]
+> 對於初學者來說，Python 是最容易閱讀和理解的編程語言之一。也就是說，如果你想更好的理解本教程，網上有很多免費書籍及免費教程可供參考學習（建議初學者查看 Python 官網的 [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) )。
 
 ## 指引
 
diff --git a/files/zh-tw/learn/server-side/django/introduction/index.md b/files/zh-tw/learn/server-side/django/introduction/index.md
index 3d9dde7cd5c3c5..78aeced76218d7 100644
--- a/files/zh-tw/learn/server-side/django/introduction/index.md
+++ b/files/zh-tw/learn/server-side/django/introduction/index.md
@@ -68,7 +68,8 @@ Django 最初在 2003 年到 2005 年間，由負責創建和維護報紙網站
 
 Django 不斷發展壯大 — 從 2008 年 9 月的第一個里程碑版本（1.0），到最近發布的（2.0）-（2018）版本。每個版本都添加了新功能，和錯誤修復，從支持新類型的數據庫，模版引擎和緩存，到添加 「通用」 視圖函數和類別（這減少了開發人員在一些編程任務必須編寫的代碼量）。
 
-> **備註：** 查看 Django 網站上的發行說明 [release notes](https://docs.djangoproject.com/en/2.0/releases/)，看看最近版本發生了什麼變化，以及 Django 能做多少工作
+> [!NOTE]
+> 查看 Django 網站上的發行說明 [release notes](https://docs.djangoproject.com/en/2.0/releases/)，看看最近版本發生了什麼變化，以及 Django 能做多少工作
 
 Django 現在是一個蓬勃發展的合作開源項目，擁有數千個用戶和貢獻者。雖然它仍然具有反映其起源的一些功能，但 Django 已經發展成為，能夠開發任何類型的網站的多功能框架。
 
@@ -106,7 +107,8 @@ Django 網絡應用程序通常將處理每個步驟的代碼分組到單獨的
 
 - **Templates:** 模板是定義文件（例如 HTML 頁面）的結構或佈局的文本文件，用於表示實際內容的佔位符。一個視圖可以使用 HTML 模板，從數據填充它動態地創建一個 HTML 頁面模型。可以使用模板來定義任何類型的文件的結構;它不一定是 HTML！
 
-> **備註：** Django 將此組織稱為「模型視圖模板（MVT）」架構。它與更加熟悉的[Model View Controller](/zh-TW/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture)架構有許多相似之處.
+> [!NOTE]
+> Django 將此組織稱為「模型視圖模板（MVT）」架構。它與更加熟悉的[Model View Controller](/zh-TW/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture)架構有許多相似之處.
 
 以下部分將為你提供 Django 應用程序的這些主要部分的想法（稍後我們將在進一步詳細介紹後，我們將在開發環境中進行更詳細的介紹）。
 
@@ -147,7 +149,8 @@ def index(request):
     return HttpResponse('Hello from Django!')
 ```
 
-> **備註：** 一點點 Python:
+> [!NOTE]
+> 一點點 Python:
 >
 > - [Python 模塊](https://docs.python.org/3/tutorial/modules.html)是函數的「庫」，存放在單獨的文件中，我們可能希望在代碼中使用。在這裡，我們只導入了`HttpResponse`從對象`django.http`模塊，使我們可以在視圖中使用
 >   `from django.http import HttpResponse`。
@@ -179,7 +182,8 @@ class Team(models.Model):
     team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
 ```
 
-> **備註：** Python 小知識:
+> [!NOTE]
+> Python 小知識:
 >
 > - Python 支持「面向對象編程」，這是一種編程風格，我們將代碼組織到對像中，其中包括用於對該對象進行操作的相關數據和功能。對像也可以從其他對象繼承／擴展／派生，允許相關對象之間的共同行為被共享。在 Python 中，我們使用關鍵字**Class**定義對象的「藍圖」。我們可以根據類中的模型創建類型的多個特定實例。
 > - 例如，我們有個**Team**類，它來自於**Model**類。這意味著它是一個模型，並且將包含模型的所有方法，但是我們也可以給它自己的專門功能。在我們的模型中，我們定義了我們的數據庫需要存儲我們的數據字段，給出它們的具體名稱。Django 使用這些定義（包括字段名稱）來創建底層數據庫。
diff --git a/files/zh-tw/learn/server-side/django/models/index.md b/files/zh-tw/learn/server-side/django/models/index.md
index db7d50c2cf773c..304462a1cb9b1e 100644
--- a/files/zh-tw/learn/server-side/django/models/index.md
+++ b/files/zh-tw/learn/server-side/django/models/index.md
@@ -48,7 +48,8 @@ Django Web 應用程序通過被稱為模型的 Python 對象，訪問和管理
 
 ![LocalLibrary Model UML](local_library_model_uml.svg)
 
-> **備註：** 下一節提供一個基本解釋模型的定義與使用，當你在讀的時候，也需要一邊考慮如何構建上圖中的每個模型。
+> [!NOTE]
+> 下一節提供一個基本解釋模型的定義與使用，當你在讀的時候，也需要一邊考慮如何構建上圖中的每個模型。
 
 ## 模型入門
 
@@ -181,7 +182,8 @@ def get_absolute_url(self):
     return reverse('model-detail-view', args=[str(self.id)])
 ```
 
-> **備註：** 假設你將使用 URL`/myapplication/mymodelname/2` 來顯示模型的單個記錄（其中「2」是 id 特定記錄），則需要創建一個 URL 映射器來將響應和 id 傳遞給「模型詳細視圖」 （這將做出顯示記錄所需的工作）。以上示例中，`reverse()`函數可以「反轉」你的 url 映射器（在上訴命名為「model-detail-view」的案例中，以創建正確格式的 URL。
+> [!NOTE]
+> 假設你將使用 URL`/myapplication/mymodelname/2` 來顯示模型的單個記錄（其中「2」是 id 特定記錄），則需要創建一個 URL 映射器來將響應和 id 傳遞給「模型詳細視圖」 （這將做出顯示記錄所需的工作）。以上示例中，`reverse()`函數可以「反轉」你的 url 映射器（在上訴命名為「model-detail-view」的案例中，以創建正確格式的 URL。
 >
 > 當然要做這個工作，你還是要寫 URL 映射，視圖和模版！
 
@@ -203,7 +205,8 @@ record = MyModelName(my_field_name="Instance #1")
 record.save()
 ```
 
-> **備註：** 如果沒有任何的欄位被宣告為`主鍵`，這筆新的紀錄會被自動的賦予一個主鍵並將主鍵欄命名為 `id`。上例的那筆資料被儲存後，試著查詢這筆紀錄會看到它被自動賦予 1 的編號。
+> [!NOTE]
+> 如果沒有任何的欄位被宣告為`主鍵`，這筆新的紀錄會被自動的賦予一個主鍵並將主鍵欄命名為 `id`。上例的那筆資料被儲存後，試著查詢這筆紀錄會看到它被自動賦予 1 的編號。
 
 你可以透過「點(dot)的語法」取得或變更這筆新資料的欄位(字段)。你需要呼叫 `save()` 將變更過的資料存進資料庫。
 
@@ -221,7 +224,8 @@ record.save()
 
 你可以使用模型的 `objects` 屬性(由 base class 提供)搜尋符合某個條件的紀錄。You can search for records that match a certain criteria using the model's attribute (provided by the base class).
 
-> **備註：** 要用"抽象的"模型還有欄位說明怎麼搜尋紀錄可能會有點令人困惑。我們會以一個 Book 模型，其包含`title`與`genre`字段，而 genre 也是一個僅有`name`一個字段的模型。
+> [!NOTE]
+> 要用"抽象的"模型還有欄位說明怎麼搜尋紀錄可能會有點令人困惑。我們會以一個 Book 模型，其包含`title`與`genre`字段，而 genre 也是一個僅有`name`一個字段的模型。
 
 我們可以取得一個模型的所有紀錄，為一個 `QuerySet` 使用`objects.all()。` `QuerySet` 是一個可迭代的物件，表示他含有多個物件，而我們可以藉由迭代/迴圈取得每個物件。
 
@@ -245,7 +249,8 @@ number_wild_books = Book.objects.filter(title__contains='wild').count()
 books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')
 ```
 
-> **備註：** 你可隨心地使用雙底線 (\_\_) 來探索更多層的關係 (`ForeignKey`/`ManyToManyField`). 例如, 一本 `Book` 有許多不同的 types, 其進一步定義有參數 name 關聯的"cover"：`type__cover__name__exact='hard'.`
+> [!NOTE]
+> 你可隨心地使用雙底線 (\_\_) 來探索更多層的關係 (`ForeignKey`/`ManyToManyField`). 例如, 一本 `Book` 有許多不同的 types, 其進一步定義有參數 name 關聯的"cover"：`type__cover__name__exact='hard'.`
 
 還有很多是你可以用索引(queries)來做的，包含從相關的模型做向後查詢(backwards searches)、連鎖過濾器(chaining filters)、回傳「值的小集合」等。更多資訊可以到 [Making queries](https://docs.djangoproject.com/en/2.0/topics/db/queries/) (Django Docs) 查詢。
 
@@ -369,7 +374,8 @@ class BookInstance(models.Model):
 
 而 `__str__()` 模型用來表示 `BookInstance` 這個物件的「唯一 ID」和「相關之 `Book` 書本名稱(title)」的組合。
 
-> **備註：** 關於 Python 的小提醒：
+> [!NOTE]
+> 關於 Python 的小提醒：
 >
 > - 從 Python3.6 開始，你可以使用「字串插值語法」(又稱做 f-string)：
 >   `f'{self.id} ({self.book.title})'`
diff --git a/files/zh-tw/learn/server-side/django/sessions/index.md b/files/zh-tw/learn/server-side/django/sessions/index.md
index 18c9e5ce3d0541..c1c761ddf917e6 100644
--- a/files/zh-tw/learn/server-side/django/sessions/index.md
+++ b/files/zh-tw/learn/server-side/django/sessions/index.md
@@ -67,7 +67,8 @@ MIDDLEWARE = [
 
 下面的代碼片段顯示瞭如何獲取，設置和刪除與當前會話（瀏覽器）相關的鍵「 `my_car`」的某些數據。
 
-> **備註：** Django 的一大優點是，你無需考慮將會話綁定到視圖中當前請求的機制。 如果我們在視圖中使用以下片段，我們將知道有關`my_car` 的信息僅與發送當前請求的瀏覽器相關聯。
+> [!NOTE]
+> Django 的一大優點是，你無需考慮將會話綁定到視圖中當前請求的機制。 如果我們在視圖中使用以下片段，我們將知道有關`my_car` 的信息僅與發送當前請求的瀏覽器相關聯。
 
 ```python
 # Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
@@ -104,7 +105,8 @@ request.session['my_car']['wheels'] = 'alloy'
 request.session.modified = True
 ```
 
-> **備註：** 你可以更改行為，以便站點可以通過在你的項目設置（**locallibrary/locallibrary/settings.py**）中添加`SESSION_SAVE_EVERY_REQUEST = True` 來更新每個請求的數據庫/發送 cookie。
+> [!NOTE]
+> 你可以更改行為，以便站點可以通過在你的項目設置（**locallibrary/locallibrary/settings.py**）中添加`SESSION_SAVE_EVERY_REQUEST = True` 來更新每個請求的數據庫/發送 cookie。
 
 ## Simple example — getting visit counts
 
@@ -136,7 +138,8 @@ def index(request):
 
 在這裡，我們首先獲取`'num_visits'`會話密鑰的值，如果之前未設置，則將其設置為 0。 每次接收到請求時，我們都將增加該值並將其存儲回會話中（對於下一次用戶訪問該頁面）。 然後將`num_visits` 變量傳遞到我們的上下文變量中的模板。
 
-> **備註：** 我們也可能會在此處測試瀏覽器是否甚至支持 cookie（例如，請參閱[How to use sessions](https://docs.djangoproject.com/en/2.0/topics/http/sessions/)）或設計我們的 UI，以便無論是否支持 cookie 都無關緊要。
+> [!NOTE]
+> 我們也可能會在此處測試瀏覽器是否甚至支持 cookie（例如，請參閱[How to use sessions](https://docs.djangoproject.com/en/2.0/topics/http/sessions/)）或設計我們的 UI，以便無論是否支持 cookie 都無關緊要。
 
 將以下區塊底部看到的行添加到\`\`動態內容''部分底部的主 HTML 模板(**/locallibrary/catalog/templates/index.html**)中以顯示上下文變量：
 
diff --git a/files/zh-tw/learn/server-side/django/skeleton_website/index.md b/files/zh-tw/learn/server-side/django/skeleton_website/index.md
index 754a78d1739834..afc83a05f6befc 100644
--- a/files/zh-tw/learn/server-side/django/skeleton_website/index.md
+++ b/files/zh-tw/learn/server-side/django/skeleton_website/index.md
@@ -29,7 +29,8 @@ Django 教學的第二篇文章，會展示怎樣創建一個網站的"框架"
 1. 使用 `django-admin`工具創建工程的文件夾，基本的文件模板和工程管理腳本（**manage.py**）。
 2. 用 **manage.py** 創建一個或多個*應用*。
 
-   > **備註：** 一個網站可能由多個部分組成，比如，主要頁面，博客，wiki，下載區域等。Django 鼓勵將這些部分作為分開的應用開發。如果這樣的話，在需要可以在不同的工程中復用這些應用。
+   > [!NOTE]
+   > 一個網站可能由多個部分組成，比如，主要頁面，博客，wiki，下載區域等。Django 鼓勵將這些部分作為分開的應用開發。如果這樣的話，在需要可以在不同的工程中復用這些應用。
 
 3. 工程裡註冊新的應用。
 4. 為每個應用分配 url。
@@ -90,7 +91,8 @@ locallibrary 項目的子文件夾是整個網站的進入點：
 python3 manage.py startapp catalog
 ```
 
-> **備註：** Linux/Mac OS X 應用可以使用上面的命令。在 windows 平台下應該改為： `py -3 manage.py startapp catalog`
+> [!NOTE]
+> Linux/Mac OS X 應用可以使用上面的命令。在 windows 平台下應該改為： `py -3 manage.py startapp catalog`
 >
 > 如果你是 windows 系統，在這個部分用`py -3`替代`python3`。
 >
@@ -119,7 +121,8 @@ locallibrary/
 - 一個*migration*文件夾，用來存放 「migrations」 ——當你修改你的數據模型時，這個文件會自動升級你的資料庫。
 - **\_\_init\_\_.py** —一個空文件，Django/Python 會將這個文件作為[Python 套件包](https://docs.python.org/3/tutorial/modules.html#packages)並允許你在項目的其他部分使用它。
 
-> **備註：** 你注意到上面的文件裡有些缺失嘛？儘管有了 views 和 models 的文件，可是 url 映射，網站模板，靜態文件在哪裡呢？我們會在接下來的部分展示如何創建它們（並不是每個網站都需要，不過這個例子需要）。
+> [!NOTE]
+> 你注意到上面的文件裡有些缺失嘛？儘管有了 views 和 models 的文件，可是 url 映射，網站模板，靜態文件在哪裡呢？我們會在接下來的部分展示如何創建它們（並不是每個網站都需要，不過這個例子需要）。
 
 ## 註冊 catalog 應用
 
@@ -141,7 +144,8 @@ INSTALLED_APPS = [
 
 新的這行，詳細說明了應用配置文件在( `CatalogConfig`) **/locallibrary/catalog/apps.py** 裡，當你創建應用時就完成了這個過程。
 
-> **備註：** 注意到`INSTALLED_APPS已经有许多其他的应用了` (還有 `MIDDLEWARE`,在 settings 的下面)。這些應用為 [Django administration site](/zh-TW/docs/Learn/Server-side/Django/Admin_site) 提供了支持和許多功能(包括會話，認證系統等)。
+> [!NOTE]
+> 注意到`INSTALLED_APPS已经有许多其他的应用了` (還有 `MIDDLEWARE`,在 settings 的下面)。這些應用為 [Django administration site](/zh-TW/docs/Learn/Server-side/Django/Admin_site) 提供了支持和許多功能(包括會話，認證系統等)。
 
 ## 配置資料庫
 
@@ -254,7 +258,8 @@ from django.conf.urls.static import static
 urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 ```
 
-> **備註：** 有許多方法可以擴充`urlpatterns`列表（上面我們只是使用`+=`運算符，附加一個新的列表項，來清楚地分隔舊代碼和新代碼）。我們可以改為在原始列表定義中，包含這個新的模式映射：
+> [!NOTE]
+> 有許多方法可以擴充`urlpatterns`列表（上面我們只是使用`+=`運算符，附加一個新的列表項，來清楚地分隔舊代碼和新代碼）。我們可以改為在原始列表定義中，包含這個新的模式映射：
 >
 > ```python
 > urlpatterns = [
@@ -295,19 +300,22 @@ python3 manage.py makemigrations
 python3 manage.py migrate
 ```
 
-> **警告：** 每次模型改變，都需要運行以上命令，來影響需要存放的數據結構（包括添加和刪除整個模型和單個字段）。
+> [!WARNING]
+> 每次模型改變，都需要運行以上命令，來影響需要存放的數據結構（包括添加和刪除整個模型和單個字段）。
 
 該**`makemigrations`**命令，創建（但不實施）項目中安裝的所有應用程序的遷移（你可以指定應用程序名稱，也可以為單個項目運行遷移）。這讓你有機會在應用這些遷移之前，檢查這些遷移代碼—當你是 Django 專家時，你可以選擇稍微調整它們。
 
 這個 **`migrate`**命令，真正對你的資料庫實施遷移（Django 跟踪哪些已添加到當前資料庫）。
 
-> **備註：** 參見 [Migrations](https://docs.djangoproject.com/en/2.0/topics/migrations/) (Django 文件) ，了解較少使用的遷移命令的其他信息。
+> [!NOTE]
+> 參見 [Migrations](https://docs.djangoproject.com/en/2.0/topics/migrations/) (Django 文件) ，了解較少使用的遷移命令的其他信息。
 
 ### 運行網站
 
 在開發期間，你首先要使用開發網頁服務器，然後用你本機的瀏覽器觀看，來測試你的網站。
 
-> **備註：** 這個開發網頁服務器並不夠強大，不足以用於生產使用，但是它使你在開發期間，能非常容易獲得你的 Django 網站和運行它，以此來進行快速測試。默認情況下，服務器會開通（`http://127.0.0.1:8000/`），但你也可以選擇其他端口。有關更多信息，查閱（[django-admin and manage.py: runserver](https://docs.djangoproject.com/en/1.10/ref/django-admin/#runserver)）(Django docs).
+> [!NOTE]
+> 這個開發網頁服務器並不夠強大，不足以用於生產使用，但是它使你在開發期間，能非常容易獲得你的 Django 網站和運行它，以此來進行快速測試。默認情況下，服務器會開通（`http://127.0.0.1:8000/`），但你也可以選擇其他端口。有關更多信息，查閱（[django-admin and manage.py: runserver](https://docs.djangoproject.com/en/1.10/ref/django-admin/#runserver)）(Django docs).
 
 通過如下`runserver`命令，運行開發網頁服務器。（同樣的要在**manage.py**的目錄）
 
@@ -329,11 +337,13 @@ python3 manage.py runserver
 
 別擔心，這個錯誤頁面是預期的結果。因為我們沒有在 `catalogs.urls`模塊中，定義任何頁面或網址（即是當我們使用一個指向根目錄的 URL 時，會被重新定向的地方）。
 
-> **備註：** 上面的頁面，演示了一個很棒的 Django 功能 - 自動除錯日誌記錄。只要找不到頁面，或者代碼引發任何錯誤，就會顯示錯誤畫面，其中包含有用的信息。在這種情況下，我們可以看到我們提供的 URL，與我們的任何 URL 模式都不匹配（如列出的那樣）。在生產期間（當我們將網站放在網上時），日誌記錄將被關閉，在這種情況下，將提供信息量較少、但用戶友好的頁面。
+> [!NOTE]
+> 上面的頁面，演示了一個很棒的 Django 功能 - 自動除錯日誌記錄。只要找不到頁面，或者代碼引發任何錯誤，就會顯示錯誤畫面，其中包含有用的信息。在這種情況下，我們可以看到我們提供的 URL，與我們的任何 URL 模式都不匹配（如列出的那樣）。在生產期間（當我們將網站放在網上時），日誌記錄將被關閉，在這種情況下，將提供信息量較少、但用戶友好的頁面。
 
 這個時候，我們知道 Django 正在工作！
 
-> **備註：** 在進行重大更改時，你應該重新運行遷移，並重新測試站點。這不需要很長時間！
+> [!NOTE]
+> 在進行重大更改時，你應該重新運行遷移，並重新測試站點。這不需要很長時間！
 
 ## 挑戰自我
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/deployment/index.md b/files/zh-tw/learn/server-side/express_nodejs/deployment/index.md
index b9d6fc8a480255..9acef4075781e9 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/deployment/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/deployment/index.md
@@ -53,19 +53,22 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 這種可遠程訪問的計算/網絡硬件，稱為基礎架構即服務（IaaS）。許多 IaaS 供應商，提供預安裝特定操作系統的選項，你必須在其上，安裝生產環境的其他組件。其他供應商，允許你選擇功能更全面的環境，可能包括完整的 node 設置。
 
-> **備註：** 預構建環境，可以使你的網站設置變得非常簡單，因為它們會減少配置，但可用選項可能會限制你使用不熟悉的服務器（或其他組件），並且可能基於較舊版本的操作系統。通常最好自己安裝組件，以便獲得所需的組件，並且當你需要升級系統的某些部分時，你可以知道從哪裡開始！
+> [!NOTE]
+> 預構建環境，可以使你的網站設置變得非常簡單，因為它們會減少配置，但可用選項可能會限制你使用不熟悉的服務器（或其他組件），並且可能基於較舊版本的操作系統。通常最好自己安裝組件，以便獲得所需的組件，並且當你需要升級系統的某些部分時，你可以知道從哪裡開始！
 
 其他託管服務提供商，支持 Express 作為平台即服務（PaaS）產品的一部分。使用此類託管時，你無需擔心大多數生產環境（服務器，負載平衡器等），因為主機平台會為你處理這些問題。這使得部署非常簡單，因為你只需要專注於 Web 應用程序，而不是任何其他服務器基礎結構。
 
 一些開發人員選擇 IaaS ，相對於 PaaS ，IaaS 提供更高靈活性，而其他開發人員偏好 PaaS 的降低維護開銷，和更輕鬆的擴展性。當你在一開始使用時，在 PaaS 系統上設置你的網站，要容易得多，因此我們將在本教程中使用 PaaS。
 
-> **備註：** 如果你選擇 Node/Express 友好的託管服務提供商，他們應該提供，有關如何使用 Web 服務器，應用程序服務器，反向代理等不同配置，來設置 Express 網站的說明。例如，在 [Digital Ocean](https://www.digitalocean.com/community/tutorials?q=node) 的 node 社區文檔中，有許多各種配置的手把手指南。
+> [!NOTE]
+> 如果你選擇 Node/Express 友好的託管服務提供商，他們應該提供，有關如何使用 Web 服務器，應用程序服務器，反向代理等不同配置，來設置 Express 網站的說明。例如，在 [Digital Ocean](https://www.digitalocean.com/community/tutorials?q=node) 的 node 社區文檔中，有許多各種配置的手把手指南。
 
 ## 選擇一個主機供應商
 
 眾所周知，眾多託管服務提供商，都積極支持或與 Node（和 Express）合作。這些供應商提供不同類型的環境（IaaS，PaaS），以及不同價格的不同級別的計算和網絡資源。
 
-> **備註：** 有很多託管解決方案，他們的服務和定價，可能會隨著時間而改變。雖然我們在下面介紹幾個選項，但在選擇託管服務提供商之前，有必要自己進行互聯網搜索。
+> [!NOTE]
+> 有很多託管解決方案，他們的服務和定價，可能會隨著時間而改變。雖然我們在下面介紹幾個選項，但在選擇託管服務提供商之前，有必要自己進行互聯網搜索。
 
 選擇主機時需要考慮的一些事項：
 
@@ -83,7 +86,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 許多提供商還擁有「基本」層，可提供更多有用的計算能力，和更少的限制。舉例來說， [Digital Ocean](https://www.digitalocean.com/) 是一個流行的託管服務提供商，它提供了一個相對便宜的基本計算層（在本教程寫作時，是每月 5 美元的較低範圍）。
 
-> **備註：** 請記住，價格不是唯一的選擇標準。如果你的網站成功，可能會發現可擴展性是最重要的考慮因素。
+> [!NOTE]
+> 請記住，價格不是唯一的選擇標準。如果你的網站成功，可能會發現可擴展性是最重要的考慮因素。
 
 ## 準備好發布你的網站
 
@@ -91,7 +95,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 在以下小節中，我們概述了你應該對應用進行的、最重要的更改。
 
-> **備註：** Express 文檔中還有其他有用的提示 - 請參閱「[生產最佳實踐：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)」，以及「[生產最佳實踐：安全性](https://expressjs.com/en/advanced/best-practice-security.html)」。
+> [!NOTE]
+> Express 文檔中還有其他有用的提示 - 請參閱「[生產最佳實踐：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)」，以及「[生產最佳實踐：安全性](https://expressjs.com/en/advanced/best-practice-security.html)」。
 
 ### 設置 NODE_ENV 為 'production'
 
@@ -99,7 +104,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 
 可以使用導出或環境文件，或使用 OS 初始化系統，以進行此更改。
 
-> **備註：** 這實際上是在環境設置，而不是應用中所做的更改，但重要的是，要注意這裡！我們將在下面，展示我們的託管示例要如何設置。
+> [!NOTE]
+> 這實際上是在環境設置，而不是應用中所做的更改，但重要的是，要注意這裡！我們將在下面，展示我們的託管示例要如何設置。
 
 ### Log appropriately
 
@@ -134,7 +140,8 @@ set DEBUG=author,book
 export DEBUG="author,book"
 ```
 
-> **備註：** 調用`debug`可以替換你以前使用 `console.log()`或`console.error()`執行的日誌記錄。通過調試模塊 [debug](https://www.npmjs.com/package/debug) 進行日誌記錄，替換代碼中的所有`console.log()`調用。通過設置 DEBUG 變量，並在其中記錄對日誌記錄的影響，在開發環境中，打開和關閉日誌記錄。
+> [!NOTE]
+> 調用`debug`可以替換你以前使用 `console.log()`或`console.error()`執行的日誌記錄。通過調試模塊 [debug](https://www.npmjs.com/package/debug) 進行日誌記錄，替換代碼中的所有`console.log()`調用。通過設置 DEBUG 變量，並在其中記錄對日誌記錄的影響，在開發環境中，打開和關閉日誌記錄。
 
 如果你需要記錄網站活動，可以使用 Winston 或 Bunyan 等日誌庫。有關此主題的更多信息，請參閱：[生產最佳實踐：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)。
 
@@ -170,7 +177,8 @@ app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.
 ...
 ```
 
-> **備註：** 對於生產中流量較大的網站，你不會使用此中間件。相反，你會使用像 Nginx 這樣的反向代理。
+> [!NOTE]
+> 對於生產中流量較大的網站，你不會使用此中間件。相反，你會使用像 Nginx 這樣的反向代理。
 
 ### 使用 Helmet 避免被常見漏洞侵襲
 
@@ -195,7 +203,8 @@ app.use(helmet());
 ...
 ```
 
-> **備註：** 上面的命令，添加了對大多數站點有意義的可用標頭子集。你可以按照 [npm](https://www.npmjs.com/package/helmet) 上的說明，根據需要添加/禁用特定標頭。
+> [!NOTE]
+> 上面的命令，添加了對大多數站點有意義的可用標頭子集。你可以按照 [npm](https://www.npmjs.com/package/helmet) 上的說明，根據需要添加/禁用特定標頭。
 
 ## 例子：在 Heroku 上安裝本地圖書館
 
@@ -238,7 +247,8 @@ Heroku 在一個或多個 "[Dynos](https://devcenter.heroku.com/articles/dynos)"
 
 Heroku 與 **git** 源代碼版本控制系統緊密集成，使用它來上傳/同步你對實時運行系統所做的任何更改。它通過添加一個名為 heroku 的新 Heroku「遠程」儲存庫，來指向你在 Heroku 雲上的源儲存庫。在開發期間，你使用 git 在「主」儲存庫 master 中儲存更改。如果要部署站點，請將更改同步到 Heroku 存儲庫。
 
-> **備註：** 如果你習慣於遵循良好的軟件開發實踐，那麼你可能已經在使用 git 或其他一些 SCM 系統。如果你已有 git 儲存庫，則可以跳過此步驟。
+> [!NOTE]
+> 如果你習慣於遵循良好的軟件開發實踐，那麼你可能已經在使用 git 或其他一些 SCM 系統。如果你已有 git 儲存庫，則可以跳過此步驟。
 
 有很多方法可以使用 git，但最簡單的方法之一，是首先在 [GitHub](https://github.com/) 上建立一個帳戶，在那裡創建儲存庫，然後在本地同步它：
 
@@ -308,7 +318,8 @@ Heroku 與 **git** 源代碼版本控制系統緊密集成，使用它來上傳/
 
 完成此操作後，你應該可以返回創建儲存庫的 Github 上的頁面，刷新頁面，並查看你的整個應用程序現已上傳。使用此添加/提交/推送循環，你可以在文件更改時，繼續更新儲存庫。
 
-> **備註：** 這是備份你的「vanilla」項目的好時機 - 雖然我們將在以下部分中進行的一些更改，可能對任何平台（或開發）上的部署有用，而一些其他的更改可能沒有用。
+> [!NOTE]
+> 這是備份你的「vanilla」項目的好時機 - 雖然我們將在以下部分中進行的一些更改，可能對任何平台（或開發）上的部署有用，而一些其他的更改可能沒有用。
 >
 > 執行此操作的最佳方法，是使用 git 來管理你的修訂。使用 git，你不僅可以回到特定的舊版本，而且可以在生產變更的單獨「分支」中進行維護，並選擇在生產和開發分支之間移動的任何更改。[學習 Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/)非常值得，但超出了本主題的範圍。
 >
@@ -413,7 +424,8 @@ heroku help
 heroku create
 ```
 
-> **備註：** 如果你願意，可以在「創建」create 之後指定遠程儲存庫的命名。如果你不這樣做，你會得到一個隨機的名字。該名稱用於默認 URL。
+> [!NOTE]
+> 如果你願意，可以在「創建」create 之後指定遠程儲存庫的命名。如果你不這樣做，你會得到一個隨機的名字。該名稱用於默認 URL。
 
 然後，我們可以將我們的應用程序，推送到 Heroku 儲存庫，如下所示。這將上傳應用程序，獲取所有依賴項，將其打包到 dyno 中，然後啟動該站點。
 
@@ -427,7 +439,8 @@ git push heroku master
 heroku open
 ```
 
-> **備註：** 該站點將使用我們的開發數據庫運行。創建一些書本和其他對象，並檢查該網站是否按預期運行。在下一節中，我們將其設置為使用我們的新數據庫。
+> [!NOTE]
+> 該站點將使用我們的開發數據庫運行。創建一些書本和其他對象，並檢查該網站是否按預期運行。在下一節中，我們將其設置為使用我們的新數據庫。
 
 ### 設定配置變量
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/development_environment/index.md b/files/zh-tw/learn/server-side/express_nodejs/development_environment/index.md
index 23d9b01e5f3589..e4d155f0528251 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/development_environment/index.md
@@ -34,7 +34,8 @@ _Node_ 和 _NPM_ 套件管理器會從準備好的 binary package、安裝檔、
 
 NPM 也可用來安裝 Express 應用程式產生器(全域用)，一個方便的工具幫助你創造符合 [MVC 模式](/zh-TW/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture)的 Express web app 骨架。你不一定要使用應用程式產生器，因為每個 Express 應用程式不需要擁有同樣的檔案結構或依賴項。但為了專注於學習本身以及習慣模組化架構，我們會在接下來的教學中使用它。
 
-> **備註：** 與其他不包含單獨的 web 開發伺服器的 Web 框架不同。 在 Node / Express 中，Web 應用程式創建並運行自己的 Web 伺服器！
+> [!NOTE]
+> 與其他不包含單獨的 web 開發伺服器的 Web 框架不同。 在 Node / Express 中，Web 應用程式創建並運行自己的 Web 伺服器！
 
 典型的開發環境還包含其他工具，例如：編輯程式碼使用的[文字編輯器](/zh-TW/docs/Learn/Common_questions/Available_text_editors)、IDE，進行版本控置管理不同版本程式碼的[Git](/zh-TW/docs/Glossary/Git)。這邊假設你已經有這種工具了(尤其是文字編輯器)
 
@@ -60,7 +61,8 @@ Node 有許多[版本](https://nodejs.org/en/blog/release/)，更新的版本代
 
 為了使用 Express，首先要在你的電腦上安裝 Node 和[Node Package Manager (NPM)](https://docs.npmjs.com/)。接下來用最簡單的方法在 Ubuntu Linux 16.04、 macOS 和 Windows 10 上安裝 Nodejs 的 Long Term Supported (LTS)版本吧
 
-> **備註：** 以下的部分用最簡單的方法在上述的作業系統中安裝 Node 和 NPM。如果你使用其他作業系統或想看看其他平台的安裝方式，請查閱[透過套件管理器安裝 Node.js](https://nodejs.org/en/download/package-manager/) (nodejs.org)。
+> [!NOTE]
+> 以下的部分用最簡單的方法在上述的作業系統中安裝 Node 和 NPM。如果你使用其他作業系統或想看看其他平台的安裝方式，請查閱[透過套件管理器安裝 Node.js](https://nodejs.org/en/download/package-manager/) (nodejs.org)。
 
 ### Windows 和 macOS
 
@@ -82,7 +84,8 @@ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
 sudo apt-get install -y nodejs
 ```
 
-> **警告：** 不要直接從普通的 Ubuntu repositories 安裝，那邊只有很舊的版本。
+> [!WARNING]
+> 不要直接從普通的 Ubuntu repositories 安裝，那邊只有很舊的版本。
 
 ### 測試 Nodejs 和 NPM 的安裝
 
@@ -125,21 +128,24 @@ NPM 應該會隨著 Node 一起安裝，可以用相同的方法進行測試:
 
    這段程式載入『http』模組，並創建一個伺服器 (`createServer()`，並在 8000 埠上監聽 HTTP requests。 The script then prints a message to the console about what browser URL you can use to test the server. The `createServer()` function takes as an argument a callback function that will be invoked when an HTTP request is received — this simply returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".
 
-2. > **備註：** Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
-3. Start the server by navigating into the same directory as your `hellonode.js` file in your command prompt, and calling `node` along with the script name, like so:
+   > [!NOTE]
+   > Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
+
+2. Start the server by navigating into the same directory as your `hellonode.js` file in your command prompt, and calling `node` along with the script name, like so:
 
    ```bash
    >node hellonode.js
    Server running at http://127.0.0.1:8000/
    ```
 
-4. Navigate to the URL (<http://127.0.0.1:8000/>). If everything is working, the browser should simply display the string "Hello World".
+3. Navigate to the URL (<http://127.0.0.1:8000/>). If everything is working, the browser should simply display the string "Hello World".
 
 ## Using NPM
 
 Next to _Node_ itself, [NPM](https://docs.npmjs.com/) is the most important tool for working with _Node_ applications. NPM is used to fetch any packages (JavaScript libraries) that an application needs for development, testing, and/or production, and may also be used to run tests and tools used in the development process.
 
-> **備註：** From Node's perspective, _Express_ is just another package that you need to install using NPM and then require in your own code.
+> [!NOTE]
+> From Node's perspective, _Express_ is just another package that you need to install using NPM and then require in your own code.
 
 You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named [package.json](https://docs.npmjs.com/files/package.json). This file lists all the dependencies for a specific JavaScript "package", including the package's name, version, description, initial file to execute, production dependencies, development dependencies, versions of _Node_ it can work with, etc. The **package.json** file should contain everything NPM needs to fetch and run your application (if you were writing a reusable library you could use this definition to upload your package to the npm respository and make it available for other users).
 
@@ -147,7 +153,8 @@ You can manually use NPM to separately fetch each needed package. Typically we i
 
 The following steps show how you can use NPM to download a package, save it into the project dependencies, and then require it in a Node application.
 
-> **備註：** Here we show the instructions to fetch and install the _Express_ package. Later on we'll show how this package, and others, are already specified for us using the _Express Application Generator_. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.
+> [!NOTE]
+> Here we show the instructions to fetch and install the _Express_ package. Later on we'll show how this package, and others, are already specified for us using the _Express Application Generator_. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.
 
 1. First create a directory for your new application and navigate into it:
 
@@ -247,13 +254,15 @@ The following entry would then be added to your application's **package.json**:
   }
 ```
 
-> **備註：** "[Linters](<https://en.wikipedia.org/wiki/Lint_(software)>)" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.
+> [!NOTE]
+> "[Linters](<https://en.wikipedia.org/wiki/Lint_(software)>)" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.
 
 ### Running tasks
 
 In addition to defining and fetching dependencies you can also define _named_ scripts in your **package.json** files and call NPM to execute them with the [run-script](https://docs.npmjs.com/cli/run-script) command. This approach is commonly used to automate running tests and parts of the development or build toolchain (e.g., running tools to minify JavaScript, shrink images, LINT/analyse your code, etc).
 
-> **備註：** Task runners like [Gulp](http://gulpjs.com/) and [Grunt](http://gruntjs.com/) can also be used to run tests and other external tools.
+> [!NOTE]
+> Task runners like [Gulp](http://gulpjs.com/) and [Grunt](http://gruntjs.com/) can also be used to run tests and other external tools.
 
 For example, to define a script to run the _eslint_ development dependency that we specified in the previous section we might add the following script block to our **package.json** file (assuming that our application source is in a folder /src/js):
 
@@ -291,7 +300,8 @@ To create an _Express_ app named "helloworld" with the default settings, navigat
 express helloworld
 ```
 
-> **備註：** You can also specify the template library to use and a number of other settings. Use the `help` command to see all the options:
+> [!NOTE]
+> You can also specify the template library to use and a number of other settings. Use the `help` command to see all the options:
 >
 > ```bash
 > express --help
@@ -299,7 +309,8 @@ express helloworld
 
 NPM will create the new Express app in a sub folder of your current location, displaying build progress on the console. On completion, the tool will display the commands you need to enter to install the Node dependencies and start the app.
 
-> **備註：** The new app will have a **package.json** file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:
+> [!NOTE]
+> The new app will have a **package.json** file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:
 >
 > ```js
 > {
diff --git a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
index ff706bb9225389..509ec564848546 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
@@ -87,7 +87,8 @@ block content
 
 ![Author Detail Page - Express Local Library site](locallibary_express_author_detail.png)
 
-> **備註：** 作者的出生與死亡日期的外觀很醜！我們將在本文最後的自我挑戰處理它。
+> [!NOTE]
+> 作者的出生與死亡日期的外觀很醜！我們將在本文最後的自我挑戰處理它。
 
 ## 下一步
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
index 22c606eec7fd48..a77b169e585096 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
@@ -45,7 +45,8 @@ exports.book_detail = function (req, res, next) {
 };
 ```
 
-> **備註：** 我們不需要用 require 導入 _async_ 和 _BookInstance_，當我們實作主頁面控制器的時候，我們就已經引入這些模組。
+> [!NOTE]
+> 我們不需要用 require 導入 _async_ 和 _BookInstance_，當我們實作主頁面控制器的時候，我們就已經引入這些模組。
 
 此處的控制器方法使用 `async.parallel()`，用平行的方式找到 `Book` 以及它的相應複本 (`BookInstances`) 。這樣的處理方式，就跟上面的 _種類細節頁面_ 所說明的完全相同。
 
@@ -92,7 +93,8 @@ block content
 
 在這個模板裡，幾乎每個東西都在先前的章節演示過了。
 
-> **備註：** 與該書相關的種類列表，在模板中的實作，如以下代碼。除了最後一本書之外，在與本書相關的每個種類之後，都會添加一個逗號。
+> [!NOTE]
+> 與該書相關的種類列表，在模板中的實作，如以下代碼。除了最後一本書之外，在與本書相關的每個種類之後，都會添加一個逗號。
 >
 > ```plain
 >   p #[strong Genre:]
diff --git a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
index bb3298419516c7..7c03a8ed8af631 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
@@ -52,7 +52,8 @@ block content
 
 這個視圖擴展了 **layout.pug** 基本模板，並覆蓋了名為 '**content**' 的 `block` 區塊 。它顯示我們從控制器傳入的標題 `title`（通過 `render()`方法），然後使用 `each`-`in`-`else` 語法，遍歷 `book_list`變量。為每本圖書創建一個列表項，以顯示書名，並作為書的詳細信息頁面的鏈接，後面跟著作者姓名。如果 `book_list`中沒有書，則執行 `else` 子句，並顯示文字 「沒有書本」 'There are no books'。
 
-> **備註：** 我們使用 `book.url`，為每本書提供詳細記錄鏈接（我們已經實現了此路由，但尚未實現此頁面）。這是 `Book` 模型的一個虛擬屬性，它使用模型實例的 `_id` 字段，生成唯一的 URL 路徑。
+> [!NOTE]
+> 我們使用 `book.url`，為每本書提供詳細記錄鏈接（我們已經實現了此路由，但尚未實現此頁面）。這是 `Book` 模型的一個虛擬屬性，它使用模型實例的 `_id` 字段，生成唯一的 URL 路徑。
 
 在這裡，我們感興趣的是，每本書被定義為兩行，第二行使用管道（上面高亮顯示）。這種方法是必要的，因為如果作者姓名位於上一行，那麼它將成為超鏈接的一部分。
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
index 28bbc2459e8d40..ea31755e7e49ea 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
@@ -76,7 +76,8 @@ block content
 
 目前，我們網站上顯示的大多數日期，都使用默認的 JavaScript 格式（例如 _Tue Dec 06 2016 15:49:58 GMT+1100_ （AUS 東部夏令時間））。本文的挑戰，是改善作者`Author`生命週期日期顯示的外觀信息（死亡/誔生日期）和*BookInstance 詳細信息*頁面，使用格式：December 6th, 2016。
 
-> **備註：** 你可以使用與我們用於 _Book Instance List_ 的相同方法（將生命週期的虛擬屬性，添加到`Author`模型，並使用 [moment](https://www.npmjs.com/package/moment) 來設置日期字符串的格式）。
+> [!NOTE]
+> 你可以使用與我們用於 _Book Instance List_ 的相同方法（將生命週期的虛擬屬性，添加到`Author`模型，並使用 [moment](https://www.npmjs.com/package/moment) 來設置日期字符串的格式）。
 
 這個挑戰的要求：
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
index 9d673b9e79b3f9..b49700e013ff5b 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
@@ -7,7 +7,8 @@ slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_mom
 
 我們將使用的方法，是在我們的`BookInstance`模型中，創建一個返回格式化日期的虛擬屬性。我們將使用 [moment](https://www.npmjs.com/package/moment) 來做實際的格式化，這是一個輕量級 JavaScript 日期庫，用於解析，驗證，操作和格式化日期。
 
-> **備註：** 我們可以直接在 Pug 模板中，使用 moment 格式化字符串，或者可以在許多其它地方格式化字符串。使用虛擬屬性，可以使我們獲得格式化的日期，這與我們當前獲取 `due_date` 的方式完全相同。
+> [!NOTE]
+> 我們可以直接在 Pug 模板中，使用 moment 格式化字符串，或者可以在許多其它地方格式化字符串。使用虛擬屬性，可以使我們獲得格式化的日期，這與我們當前獲取 `due_date` 的方式完全相同。
 
 ## 安裝 moment
 
@@ -34,7 +35,8 @@ BookInstanceSchema.virtual("due_back_formatted").get(function () {
 });
 ```
 
-> **備註：** 格式化方法可以使用幾乎任何模式顯示日期。[moment](http://momentjs.com/docs/#/displaying/)文檔中，可以找到表示不同日期組件的語法。
+> [!NOTE]
+> 格式化方法可以使用幾乎任何模式顯示日期。[moment](http://momentjs.com/docs/#/displaying/)文檔中，可以找到表示不同日期組件的語法。
 
 ## 更新視圖
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/forms/index.md b/files/zh-tw/learn/server-side/express_nodejs/forms/index.md
index 770623d0fe9d76..eced21e4f9a895 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/forms/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/forms/index.md
@@ -28,7 +28,8 @@ slug: Learn/Server-side/Express_Nodejs/forms
 
 此教程將展示上述的操作，如何在 Express 中實現。在此過程中，我們將擴展 LocalLibrary 網站，以允許用戶創建、編輯、和刪除圖書館中的項目。
 
-> **備註：** 我們還沒有考慮如何將特定路由，限制為經過身份驗證或授權的用戶，因此在這個時間點，任何用戶都可以對數據庫進行更改。
+> [!NOTE]
+> 我們還沒有考慮如何將特定路由，限制為經過身份驗證或授權的用戶，因此在這個時間點，任何用戶都可以對數據庫進行更改。
 
 ### HTML 表單
 
@@ -103,7 +104,8 @@ npm install express-validator
 
 #### 使用 express-validator
 
-> **備註：** Github 上的 [express-validator](https://github.com/ctavan/express-validator#express-validator) 指南，提供了 API 的良好概述。我們建議你閱讀該內容，以了解其所有功能（包括創建自定義驗證程序）。下面我們只介紹一個對 LocalLibrary 有用的子集。
+> [!NOTE]
+> Github 上的 [express-validator](https://github.com/ctavan/express-validator#express-validator) 指南，提供了 API 的良好概述。我們建議你閱讀該內容，以了解其所有功能（包括創建自定義驗證程序）。下面我們只介紹一個對 LocalLibrary 有用的子集。
 
 要在我們的控制器中使用驗證器，我們必須從 'e**xpress-validator/check**'和'**express-validator/filter**'模塊中，導入我們想要使用的函數，如下所示：
 
@@ -130,7 +132,8 @@ const { sanitizeBody } = require("express-validator/filter");
       .isAlpha().withMessage('Name must be alphabet letters.'),
   ```
 
-  > **備註：** 你還可以添加內聯清理器，如`trim()`，如上所示。但是，此處應用清理器，僅適用於驗證步驟。如果要對最終輸出進行消毒，則需要使用單獨的清理器方法，如下所示。
+  > [!NOTE]
+  > 你還可以添加內聯清理器，如`trim()`，如上所示。但是，此處應用清理器，僅適用於驗證步驟。如果要對最終輸出進行消毒，則需要使用單獨的清理器方法，如下所示。
 
 - [`sanitizeBody(fields)`](https://github.com/ctavan/express-validator#sanitizebodyfields): 指定一個正文要清理的字段。然後將清理操作，以菊花鏈形式連接到此方法。例如，下面的 `escape()`清理操作，會從名稱變量中，刪除可能在 JavaScript 跨站點腳本攻擊中使用的 HTML 字符。
 
@@ -174,7 +177,8 @@ const { sanitizeBody } = require("express-validator/filter");
 - 使用已存在的對象創建對象（因此用戶在嘗試創建任何 `Book`對象之前，必須創建任何所需的 `Author`和 `Genre`實例）。
 - 如果對象未被其他對象引用，則刪除該對象（例如，在刪除所有關聯的 `BookInstance`對象之前，你將無法刪除該書）。
 
-> **備註：** 更「牢固」的實現，可能允許你在創建新對象時，創建依賴對象，並隨時刪除任何對象（例如，通過刪除依賴對象，或從數據庫中，刪除對已刪除對象的引用） 。
+> [!NOTE]
+> 更「牢固」的實現，可能允許你在創建新對象時，創建依賴對象，並隨時刪除任何對象（例如，通過刪除依賴對象，或從數據庫中，刪除對已刪除對象的引用） 。
 
 ### 路由
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/index.md b/files/zh-tw/learn/server-side/express_nodejs/index.md
index 05a971df4969db..0685bfb2caadd8 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/index.md
@@ -11,7 +11,8 @@ Express 是一個流行的 web 框架，使用 JavsScript 實現，執行在 nod
 
 在開始前你需要了解什麼是伺服器端 web 程式和什麼是 web 框架，推薦閱讀[伺服器端網站開發第一步](/zh-TW/docs/Learn/Server-side/First_steps)。建議了解基本的程式知識和[JavaScript](/zh-TW/docs/Web/JavaScript)，但不需要知道核心概念。
 
-> **備註：** 本網站有許多學習 JavaScript 應用在客戶端開發的有用資源，如：[JavaScript](/zh-TW/docs/Web/JavaScript)、[JavaScript 指南](/zh-TW/docs/Web/JavaScript/Guide)、[JavaScript 基礎](/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)、[JavaScript](/zh-TW/docs/Learn/JavaScript) (learning)。使用 Node.js 開發伺服器端使用的 JavaScript 語言與概念和客戶端是一樣的。Node.js 提供[額外的 APIs](https://nodejs.org/dist/latest-v6.x/docs/api/)以支援無瀏覽器環境，例如：建立 HTTP 服務和讀取檔案系統。但不支援 DOM 及瀏覽器相關的 JavaScript API。
+> [!NOTE]
+> 本網站有許多學習 JavaScript 應用在客戶端開發的有用資源，如：[JavaScript](/zh-TW/docs/Web/JavaScript)、[JavaScript 指南](/zh-TW/docs/Web/JavaScript/Guide)、[JavaScript 基礎](/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)、[JavaScript](/zh-TW/docs/Learn/JavaScript) (learning)。使用 Node.js 開發伺服器端使用的 JavaScript 語言與概念和客戶端是一樣的。Node.js 提供[額外的 APIs](https://nodejs.org/dist/latest-v6.x/docs/api/)以支援無瀏覽器環境，例如：建立 HTTP 服務和讀取檔案系統。但不支援 DOM 及瀏覽器相關的 JavaScript API。
 >
 > 這份指南將提供一些使用 Node.js 和 Express 的資訊以及數個優秀的學習資源。部分連結由 [How do I get started with Node.js](https://stackoverflow.com/a/5511507/894359)(StackOverflow) 與 [What are the best resources for learning Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?)(Quora) 提供。
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/introduction/index.md b/files/zh-tw/learn/server-side/express_nodejs/introduction/index.md
index c5c6b2a0076e97..8e7c38f1678bfb 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/introduction/index.md
@@ -78,7 +78,8 @@ Node 並不原生支持其他常見的 web 開發任務，如果你想為不同
 
 雖然 Express 本身非常簡單，但開發者們已經創造相容的中間層套件來解決大部份 web 開發的問題，這些套件能處理 cookies, sessions，登入，URL 參數，POST 資料，安全標頭等等，你能在[Express Middleware](http://expressjs.com/en/resources/middleware.html)中找到這些套件的列表（以及其他流行的第三方套件）
 
-> **備註：** 這種靈活性是一把雙刃劍。有一些中間層套件能解決大部份的問題或需求，但使用正確的套件有時會是一個問題。也沒有「正確的方法」來創建應用，你在網路上找到的範例也並非都是最佳解或是只有開發上所需要做的一小部份。
+> [!NOTE]
+> 這種靈活性是一把雙刃劍。有一些中間層套件能解決大部份的問題或需求，但使用正確的套件有時會是一個問題。也沒有「正確的方法」來創建應用，你在網路上找到的範例也並非都是最佳解或是只有開發上所需要做的一小部份。
 
 ## 歷史
 
@@ -116,7 +117,8 @@ The following sections explain some of the common things you'll see when working
 
 First lets consider the standard Express [Hello World](https://expressjs.com/en/starter/hello-world.html) example (we discuss each part of this below, and in the following sections).
 
-> **備註：** If you have Node and Express already installed (or if you install them as shown in the [next article](/zh-TW/docs/Learn/Server-side/Express_Nodejs/development_environment)), you can save this code in a text file called **app.js** and run it in a bash command prompt by calling:
+> [!NOTE]
+> If you have Node and Express already installed (or if you install them as shown in the [next article](/zh-TW/docs/Learn/Server-side/Express_Nodejs/development_environment)), you can save this code in a text file called **app.js** and run it in a bash command prompt by calling:
 >
 > **`./node ./app.js`**
 
@@ -152,7 +154,8 @@ var app = express();
 
 You can also create your own modules that can be imported in the same way.
 
-> **備註：** You will _want_ to create your own modules, because this allows you to organise your code into managable parts — a monolithic single-file application is hard to understand and maintain. Using modules also helps you manage your namespace, because only the variables you explicitly export are imported when you use a module.
+> [!NOTE]
+> You will _want_ to create your own modules, because this allows you to organise your code into managable parts — a monolithic single-file application is hard to understand and maintain. Using modules also helps you manage your namespace, because only the variables you explicitly export are imported when you use a module.
 
 To make objects available outside of a module you just need to assign them to the `exports` object. For example, the **square.js** module below is a file that exports `area()` and `perimeter()` methods:
 
@@ -172,7 +175,8 @@ var square = require("./square"); // Here we require() the name of the file with
 console.log("The area of a square with a width of 4 is " + square.area(4));
 ```
 
-> **備註：** You can also specify an absolute path to the module (or a name, as we did initially).
+> [!NOTE]
+> You can also specify an absolute path to the module (or a name, as we did initially).
 
 If you want to export a complete object in one assignment instead of building it one property at a time, assign it to `module.exports` as shown below (you can also do this to make the root of the exports object a constructor or other function):
 
@@ -212,9 +216,11 @@ Using non-blocking asynchronous APIs is even more important on Node than in the
 
 There are a number of ways for an asynchronous API to notify your application that it has completed. The most common way is to register a callback function when you invoke the asynchronous API, that will be called back when the operation completes. This is the approach used above.
 
-> **備註：** Using callbacks can be quite "messy" if you have a sequence of dependent asynchronous operations that must be performed in order, because this results in multiple levels of nested callbacks. This problem is commonly known as "callback hell". This problem can be reduced by good coding practices (see <http://callbackhell.com/>), using a module like [async](https://www.npmjs.com/package/async), or even moving to ES6 features like [Promises](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+> [!NOTE]
+> Using callbacks can be quite "messy" if you have a sequence of dependent asynchronous operations that must be performed in order, because this results in multiple levels of nested callbacks. This problem is commonly known as "callback hell". This problem can be reduced by good coding practices (see <http://callbackhell.com/>), using a module like [async](https://www.npmjs.com/package/async), or even moving to ES6 features like [Promises](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise).
 
-> **備註：** A common convention for Node and Express is to use error-first callbacks. In this convention the first value in your _callback functions_ is an error value, while subsequent arguments contain success data. There is a good explanation of why this approach is useful in this blog: [The Node.js Way - Understanding Error-First Callbacks](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js) (fredkschott.com).
+> [!NOTE]
+> A common convention for Node and Express is to use error-first callbacks. In this convention the first value in your _callback functions_ is an error value, while subsequent arguments contain success data. There is a good explanation of why this approach is useful in this blog: [The Node.js Way - Understanding Error-First Callbacks](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js) (fredkschott.com).
 
 ### Creating route handlers
 
@@ -228,7 +234,8 @@ app.get("/", function (req, res) {
 
 The callback function takes a request and a response object as arguments. In this case the method simply calls [`send()`](https://expressjs.com/en/4x/api.html#res.send) on the response to return the string "Hello World!" There are a [number of other response methods](https://expressjs.com/en/guide/routing.html#response-methods) for ending the request/response cycle, for example you could call [`res.json()`](https://expressjs.com/en/4x/api.html#res.json) to send a JSON response or [`res.sendFile()`](https://expressjs.com/en/4x/api.html#res.sendFile) to send a file.
 
-> **備註：** You can use any argument names you like in the callback functions; when the callback is invoked the first argument will always be the request and the second will always be the response. It makes sense to name them such that you can identify the object you're working with in the body of the callback.
+> [!NOTE]
+> You can use any argument names you like in the callback functions; when the callback is invoked the first argument will always be the request and the second will always be the response. It makes sense to name them such that you can identify the object you're working with in the body of the callback.
 
 The _Express application_ object also provides methods to define route handlers for all the other HTTP verbs, which are mostly used in exactly the same way: `post()`, `put()`, `delete()`, `options()`, `trace()`, `copy()`, `lock()`, `mkcol()`, `move()`, `purge()`, `propfind()`, `proppatch()`, `unlock()`, `report()`, `mkactivity()`, `checkout()`, `merge()`, `m-search()`, `notify()`, `subscribe()`, `unsubscribe()`, `patch()`, `search()`, and `connect()`.
 
@@ -264,7 +271,8 @@ router.get("/about", function (req, res) {
 module.exports = router;
 ```
 
-> **備註：** Adding routes to the `Router` object is just like adding routes to the `app` object (as shown previously).
+> [!NOTE]
+> Adding routes to the `Router` object is just like adding routes to the `app` object (as shown previously).
 
 To use the router in our main app file we would then `require()` the route module (**wiki.js**), then call `use()` on the _Express_ application to add the Router to the middleware handling path. The two routes will then be accessible from `/wiki/` and `/wiki/about/`.
 
@@ -280,7 +288,8 @@ We'll show you a lot more about working with routes, and in particular about usi
 
 Middleware is used extensively in Express apps, for tasks from serving static files to error handling, to compressing HTTP responses. Whereas route functions end the HTTP request-response cycle by returning some response to the HTTP client, middleware functions _typically_ perform some operation on the request or response and then call the next function in the "stack", which might be more middleware or a route handler. The order in which middleware is called is up to the app developer.
 
-> **備註：** The middleware can perform any operation, execute any code, make changes to the request and response object, and it can _also end the request-response cycle_. If it does not end the cycle then it must call `next()` to pass control to the next middleware function (or the request will be left hanging).
+> [!NOTE]
+> The middleware can perform any operation, execute any code, make changes to the request and response object, and it can _also end the request-response cycle_. If it does not end the cycle then it must call `next()` to pass control to the next middleware function (or the request will be left hanging).
 
 Most apps will use _third-party_ middleware in order to simplify common web development tasks like working with cookies, sessions, user authentication, accessing request `POST` and JSON data, logging, etc. You can find a [list of middleware packages maintained by the Express team](http://expressjs.com/en/resources/middleware.html) (which also includes other popular 3rd party packages). Other Express packages are available on the NPM package manager.
 
@@ -300,7 +309,8 @@ app.use(logger('dev'));
 ...
 ```
 
-> **備註：** Middleware and routing functions are called in the order that they are declared. For some middleware the order is important (for example if session middleware depends on cookie middleware, then the cookie handler must be added first). It is almost always the case that middleware is called before setting routes, or your route handlers will not have access to functionality added by your middleware.
+> [!NOTE]
+> Middleware and routing functions are called in the order that they are declared. For some middleware the order is important (for example if session middleware depends on cookie middleware, then the cookie handler must be added first). It is almost always the case that middleware is called before setting routes, or your route handlers will not have access to functionality added by your middleware.
 
 You can write your own middleware functions, and you are likely to have to do so (if only to create error handling code). The **only** difference between a middleware function and a route handler callback is that middleware functions have a third argument `next`, which middleware functions are expected to call if they are not that which completes the request cycle (when the middleware function is called, this contains the _next_ function that must be called).
 
@@ -330,7 +340,8 @@ app.get("/", a_middleware_function);
 app.listen(3000);
 ```
 
-> **備註：** Above we declare the middleware function separately and then set it as the callback. In our previous route handler function we declared the callback function when it was used. In JavaScript, either approach is valid.
+> [!NOTE]
+> Above we declare the middleware function separately and then set it as the callback. In our previous route handler function we declared the callback function when it was used. In JavaScript, either approach is valid.
 
 The Express documentation has a lot more excellent documentation about [using](https://expressjs.com/en/guide/using-middleware.html) and [writing](http://expressjs.com/en/guide/writing-middleware.html) Express middleware.
 
@@ -389,9 +400,11 @@ These can return any content required, but must be called after all other `app.u
 
 Express comes with a built-in error handler, which takes care of any remaining errors that might be encountered in the app. This default error-handling middleware function is added at the end of the middleware function stack. If you pass an error to `next()` and you do not handle it in an error handler, it will be handled by the built-in error handler; the error will be written to the client with the stack trace.
 
-> **備註：** The stack trace is not included in the production environment. To run it in production mode you need to set the the environment variable `NODE_ENV` to '`production'`.
+> [!NOTE]
+> The stack trace is not included in the production environment. To run it in production mode you need to set the the environment variable `NODE_ENV` to '`production'`.
 
-> **備註：** HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the [FAQ](http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses).
+> [!NOTE]
+> HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the [FAQ](http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses).
 
 For more information see [Error handling](http://expressjs.com/en/guide/error-handling.html) (Express docs).
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md b/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md
index 855623b0c96f1f..23cb582af997c7 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.md
@@ -49,7 +49,8 @@ Express 應用程序可以使用 Node 支持的任何數據庫（Express 本身
 
 使用 ORM 的好處是，程序員可以繼續用 JavaScript 對象而不是數據庫語義來思考 — 如果你需要使用不同數據庫（在相同或不同的網站上），那麼尤其如此。他們還提供了一個明顯的地方來執行數據驗證和檢查。
 
-> **備註：** 使用 ODM / ORM 通常可以降低開發和維護成本！除非你非常熟悉本地查詢語言，或者性能對你至關重要，否則你應該強烈考慮使用 ODM。
+> [!NOTE]
+> 使用 ODM / ORM 通常可以降低開發和維護成本！除非你非常熟悉本地查詢語言，或者性能對你至關重要，否則你應該強烈考慮使用 ODM。
 
 ### 我應該使用哪個 ORM/ODM ?
 
@@ -71,7 +72,8 @@ NPM 套件管理器站點上，有許多 ODM / ORM 解決方案（查看 [odm](h
 
 這種 ODM 和數據庫的結合在 Node 社區中非常流行，部分原因是文檔存儲和查詢系統，看起來非常像 JSON，因此對 JavaScript 開發人員來說很熟悉。
 
-> **備註：** 使用 Mongoose 時，你不需要事先了解 MongoDB，但是如果你已經熟悉 MongoDB，[Mongoose documentation](http://mongoosejs.com/docs/guide.html)文檔的一部分會更易於使用和理解。
+> [!NOTE]
+> 使用 Mongoose 時，你不需要事先了解 MongoDB，但是如果你已經熟悉 MongoDB，[Mongoose documentation](http://mongoosejs.com/docs/guide.html)文檔的一部分會更易於使用和理解。
 
 本教程的其餘部分，將介紹如何為 本地圖書館網站示例，定義和訪問 Mongoose 模式和模型。
 
@@ -91,17 +93,20 @@ NPM 套件管理器站點上，有許多 ODM / ORM 解決方案（查看 [odm](h
 
 下圖還顯示了模型之間的關係，包括它們的多重性。多重性是圖中顯示可能存在於關係中的每個模型的數量（最大值和最小值）的數字。例如，框之間的連接線，顯示書本`Book`和種類`Genre`是相關的。靠近書本`Book`模型的數字，表明一本書必須有零個或多個種類（你想要多少都可以），而種類`Genre`旁邊一行的數字，表明它可以有零個或多個相關書籍。
 
-> **備註：** 正如我們在下面的**Mongoose 入門**中所討論的那樣，通常只需要在一個模型中定義文檔/模型之間關係的字段（通過在另一個模型中搜索相關的`_id`仍然可以找到反向關係）。下面我們選擇在書本綱要（Book schema）中定義 Book/Genre 和 Book/Author 之間的關係，以及書本實例綱要（BookInstance Schema）中 Book/BookInstance 之間的關係。這種選擇有點武斷—我們同樣可以在其他綱要中擁有該字段。
+> [!NOTE]
+> 正如我們在下面的**Mongoose 入門**中所討論的那樣，通常只需要在一個模型中定義文檔/模型之間關係的字段（通過在另一個模型中搜索相關的`_id`仍然可以找到反向關係）。下面我們選擇在書本綱要（Book schema）中定義 Book/Genre 和 Book/Author 之間的關係，以及書本實例綱要（BookInstance Schema）中 Book/BookInstance 之間的關係。這種選擇有點武斷—我們同樣可以在其他綱要中擁有該字段。
 
 ![Mongoose Library Model with correct cardinality](library_website_-_mongoose_express.png)
 
-> **備註：** 下一節提供了一個基本的入門知識，解釋如何定義和使用模型。在你閱讀它時，請想想我們將如何構建上圖中的每個模型。
+> [!NOTE]
+> 下一節提供了一個基本的入門知識，解釋如何定義和使用模型。在你閱讀它時，請想想我們將如何構建上圖中的每個模型。
 
 ## Mongoose 入門
 
 本節概述如何將 Mongoose 連接到 MongoDB 數據庫，如何定義模型綱要和模型，以及如何進行基本查詢。
 
-> **備註：** 本入門受到 npm 上的[Mongoose 快速入門](https://www.npmjs.com/package/mongoose)和[Mongoose 官方文檔](http://mongoosejs.com/docs/guide.html)的「深度影響」。
+> [!NOTE]
+> 本入門受到 npm 上的[Mongoose 快速入門](https://www.npmjs.com/package/mongoose)和[Mongoose 官方文檔](http://mongoosejs.com/docs/guide.html)的「深度影響」。
 
 ### 安裝 Mongoose 和 MongoDB
 
@@ -113,7 +118,8 @@ npm install mongoose
 
 安裝 Mongoose 會添加所有依賴項，包括 MongoDB 數據庫驅動程序，但它不會安裝 MongoDB 。如果你想安裝一個 MongoDB 服務器，那麼你可以[從這裡下載](https://www.mongodb.com/download-center)各種操作系統的安裝程序，並在本地安裝。你還可以使用基於雲端的 MongoDB 實例。
 
-> **備註：** 對於本教程，我們將使用基於 mLab 雲的數據庫，作為服務[沙箱層](https://mlab.com/plans/pricing/)來提供數據庫。這適用於開發，也對於本教程很有意義，因為它使「安裝」與操作系統無關（數據庫即服務，也是你可能會用於生產環境數據庫的一種方法）。
+> [!NOTE]
+> 對於本教程，我們將使用基於 mLab 雲的數據庫，作為服務[沙箱層](https://mlab.com/plans/pricing/)來提供數據庫。這適用於開發，也對於本教程很有意義，因為它使「安裝」與操作系統無關（數據庫即服務，也是你可能會用於生產環境數據庫的一種方法）。
 
 ### 連接到 MongoDB
 
@@ -137,7 +143,8 @@ db.on("error", console.error.bind(console, "MongoDB connection error:"));
 
 你可以使用`mongoose.connection`獲取默認的`Connection`對象。一旦連接，在`Connection`實例上，將觸發打開事件。
 
-> **備註：** 如果需要創建其他連接，可以使用`mongoose.createConnection()`。這與`connect()`採用相同形式的數據庫 URI（包含主機，數據庫，端口，選項等），並返回`Connection`對象。
+> [!NOTE]
+> 如果需要創建其他連接，可以使用`mongoose.createConnection()`。這與`connect()`採用相同形式的數據庫 URI（包含主機，數據庫，端口，選項等），並返回`Connection`對象。
 
 ### 定義並創建模型
 
@@ -145,7 +152,8 @@ db.on("error", console.error.bind(console, "MongoDB connection error:"));
 
 然後，綱要 Schemas 被`mongoose.model()`方法「編譯」為模型。擁有模型後，你可以使用它來查找，創建，更新和刪除給定類型的對象。
 
-> **備註：** 每個模型都映射到 MongoDB 數據庫中的文檔集合。這些文檔將包含模型綱要`Schema`中定義的字段/綱要型態。
+> [!NOTE]
+> 每個模型都映射到 MongoDB 數據庫中的文檔集合。這些文檔將包含模型綱要`Schema`中定義的字段/綱要型態。
 
 #### 定義綱要 Schemas
 
@@ -185,7 +193,8 @@ var SomeModel = mongoose.model("SomeModel", SomeModelSchema);
 
 第一個參數，是將為模型創建的集合的單數名稱（Mongoose 將為上面的 SomeModel 模型，創建數據庫集合），第二個參數，是你要在創建模型時使用的綱要 Shema。
 
-> **備註：** 定義模型類後，可以使用它們來創建，更新或刪除記錄，並運行查詢，以獲取記錄的所有記錄，或特定子集。我們將在以下「使用模型」部分，向你展示如何執行上述操作，以及當創建視圖時，如何執行此操作。
+> [!NOTE]
+> 定義模型類後，可以使用它們來創建，更新或刪除記錄，並運行查詢，以獲取記錄的所有記錄，或特定子集。我們將在以下「使用模型」部分，向你展示如何執行上述操作，以及當創建視圖時，如何執行此操作。
 
 #### 綱要型態（字段）
 
@@ -264,7 +273,8 @@ Mongoose 提供內置和自定義驗證器，以及同步和異步驗證器。
 
 文檔中的示例，從名字和姓氏字段構造（並解構）一個全名虛擬屬性，這比每次在模板中使用全名更簡單，更清晰。
 
-> **備註：** 我們將使用庫中的虛擬屬性，來為每個使用路徑和記錄的`_id`值的模型記錄，定義唯一的 URL。
+> [!NOTE]
+> 我們將使用庫中的虛擬屬性，來為每個使用路徑和記錄的`_id`值的模型記錄，定義唯一的 URL。
 
 欲了解更多訊息，請參閱[虛擬](http://mongoosejs.com/docs/guide.html#virtuals)（Mongoose 文檔）。
 
@@ -335,7 +345,8 @@ Athlete.find({ sport: "Tennis" }, "name age", function (err, athletes) {
 
 如果你指定回調，如上所示，查詢將立即執行。搜索完成後將調用回調。
 
-> **備註：** Mongoose 中的所有回調，都使用此回調模式`callback(error, result)`。如果執行查詢時發生錯誤，錯誤參數`error`將包含錯誤文檔，並且結果`result`將為 null。如果查詢成功，則`error`參數將為 null，並且結果`result` 將被填充到查詢結果。
+> [!NOTE]
+> Mongoose 中的所有回調，都使用此回調模式`callback(error, result)`。如果執行查詢時發生錯誤，錯誤參數`error`將包含錯誤文檔，並且結果`result`將為 null。如果查詢成功，則`error`參數將為 null，並且結果`result` 將被填充到查詢結果。
 
 如果你未指定回調，則 API 將返回[Query](http://mongoosejs.com/docs/api.html#query-js)類型的變量。你可以使用此查詢對象來構建查詢，然後稍後使用`exec()`方法執行（使用回調）。
 
@@ -380,7 +391,8 @@ Athlete.
 - [`findOne()`](http://mongoosejs.com/docs/api.html#query_Query-findOne): 查找與指定條件匹配的單個文檔。
 - [`findByIdAndRemove()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove), [`findByIdAndUpdate()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate), [`findOneAndRemove()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove), [`findOneAndUpdate()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate):通過`id` 或條件查找單個文檔，並更新或刪除它。這些是用於更新和刪除記錄的有用便利功能。
 
-> **備註：** 還有一個[`count()`](http://mongoosejs.com/docs/api.html#model_Model.count)方法，你可以使用它來獲取與條件匹配的項目數。如果你想要在不實際提取記錄的情況下執行計數，這非常有用。
+> [!NOTE]
+> 還有一個[`count()`](http://mongoosejs.com/docs/api.html#model_Model.count)方法，你可以使用它來獲取與條件匹配的項目數。如果你想要在不實際提取記錄的情況下執行計數，這非常有用。
 
 查詢可以做更多的事情。有關更多訊息，請參閱：[查詢](http://mongoosejs.com/docs/queries.html)（Mongoose 文檔）。
 
@@ -441,7 +453,8 @@ Story.findOne({ title: "Bob goes sledding" })
   });
 ```
 
-> **備註：** 敏銳的讀者會注意到，我們在故事中添加了作者，但我們沒有做任何事情，來將我們的故事添加到作者的故事`stories`數組中。那麼我們怎樣才能得到特定作者的所有故事？
+> [!NOTE]
+> 敏銳的讀者會注意到，我們在故事中添加了作者，但我們沒有做任何事情，來將我們的故事添加到作者的故事`stories`數組中。那麼我們怎樣才能得到特定作者的所有故事？
 >
 > 一種方法，是將作者添加到故事數組中，但這會導致我們需要在兩個地方，維護與作者和故事有關的訊息。更好的方法是獲取作者的`_id`，然後使用`find()`，在所有故事的作者字段中搜索此內容。
 >
@@ -492,7 +505,8 @@ SomeModel.find(callback_function);
 
 本教程，我們將使用[mLab](https://mlab.com/welcome/)免費的雲託管的「 [沙盒](https://mlab.com/plans/pricing/) 」數據庫。這個數據庫層不適合生產環境的網站，因為它沒有冗餘設計，但它對於開發和原型設計來說非常有用。我們在這裡使用它，是因為它免費且易於設置，並且因為作為數據庫服務供應商來說，mLab 是流行的數據庫選擇之一，你可能會合理選擇你的生產環境數據庫（撰寫本文時，其他流行的選擇包括[Compose](https://www.compose.com/)、[ScaleGrid](https://scalegrid.io/pricing.html)和[MongoDB Atlas](https://www.mongodb.com/cloud/atlas)）。
 
-> **備註：** 如果你願意，可以下載並安裝[與系統相對應的二進製文件](https://www.mongodb.com/download-center)，在本地設置 MongoDb 數據庫。除了你在連接時指定的數據庫 URL 之外，本文中的其餘指令將很類似。
+> [!NOTE]
+> 如果你願意，可以下載並安裝[與系統相對應的二進製文件](https://www.mongodb.com/download-center)，在本地設置 MongoDb 數據庫。除了你在連接時指定的數據庫 URL 之外，本文中的其餘指令將很類似。
 
 你首先需要[使用 mLab 創建一個賬戶](https://mlab.com/signup/)（這是免費的，只需要輸入基本聯繫訊息，並確認其服務條款）。
 
@@ -600,7 +614,8 @@ module.exports = mongoose.model("Author", AuthorSchema);
 
 我們還為 AuthorSchema，聲明了一個名為「url」的虛擬屬性，它返回獲取模型的特定實例所需的絕對 URL — 每當我們需要獲取指向特定作者的鏈接時，我們將在模板中使用該屬性。
 
-> **備註：** 在綱要中聲明我們的 URL 是虛擬的，這是一個好主意，因為一個項目的 URL 只需要在一個地方更改。此時，使用此 URL 的鏈接將不起作用，因為我們還沒有任何路由，可以處理個別模型實例的代碼。我們將在後面的文章中介紹這些內容！
+> [!NOTE]
+> 在綱要中聲明我們的 URL 是虛擬的，這是一個好主意，因為一個項目的 URL 只需要在一個地方更改。此時，使用此 URL 的鏈接將不起作用，因為我們還沒有任何路由，可以處理個別模型實例的代碼。我們將在後面的文章中介紹這些內容！
 
 在模塊的最後，我們導出了模型。
 
@@ -691,7 +706,8 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 
 1. 在 express-locallibrary-tutorial 目錄下（與`package.json`處於同一級別），下載（或以其他方式創建）文件[populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js)。
 
-   > **備註：** 你不需要知道[populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js)的工作原理;它只是將示例數據添加到數據庫中。
+   > [!NOTE]
+   > 你不需要知道[populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js)的工作原理;它只是將示例數據添加到數據庫中。
 
 2. 在項目根目錄中，輸入以下命令，以安裝腳本所需的異步模塊（我們將在後面的教程中討論這一點）
 
@@ -707,7 +723,8 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 
 4. 該腳本應一路運行至完成，並在終端中創建它們時顯示各項目。
 
-> **備註：** 至[mLab](https://mlab.com/home)上的數據庫。你現在應該可以深入到書本籍，作者，種類和書本實例的各個集合中，並查看單個文檔。
+> [!NOTE]
+> 至[mLab](https://mlab.com/home)上的數據庫。你現在應該可以深入到書本籍，作者，種類和書本實例的各個集合中，並查看單個文檔。
 
 ## 總結
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/routes/index.md b/files/zh-tw/learn/server-side/express_nodejs/routes/index.md
index 09c9f774da1586..cec9832810ebc8 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/routes/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/routes/index.md
@@ -52,7 +52,8 @@ slug: Learn/Server-side/Express_Nodejs/routes
 
 有幾種方法可以創建路線。本教程將使用[`express.Router`](http://expressjs.com/en/guide/routing.html#express-router)中間件，因為它允許我們將站點的特定部分的路由處理程序組合在一起，並使用通用的路由前綴訪問它們。我們會將所有與圖書館有關的路由，保存在「目錄」模塊中，如果我們添加路由來處理用戶帳戶或其他功能，我們可以將它們分開保存。
 
-> **備註：** 我們在[Express 簡介>創建路由處理程序](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers)中，簡要討論了 Express 應用程序路由。除了為模塊化提供更好的支持之外（如下面第一小節所述），使用 Router 非常類似於直接在 Express 應用程序對像上定義路由。
+> [!NOTE]
+> 我們在[Express 簡介>創建路由處理程序](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers)中，簡要討論了 Express 應用程序路由。除了為模塊化提供更好的支持之外（如下面第一小節所述），使用 Router 非常類似於直接在 Express 應用程序對像上定義路由。
 
 本節的其餘部分，概述瞭如何使用路由器`Router`來定義路由。
 
@@ -81,7 +82,8 @@ router.get("/about", function (req, res) {
 module.exports = router;
 ```
 
-> **備註：** 上面我們直接在路由器函數中定義路由處理程序回調。在 LocalLibrary 中，我們將在一個單獨的控制器模塊中，定義這些回調。
+> [!NOTE]
+> 上面我們直接在路由器函數中定義路由處理程序回調。在 LocalLibrary 中，我們將在一個單獨的控制器模塊中，定義這些回調。
 
 要在主應用程序文件中使用路由器模塊，我們首先`require()`路由模塊（**wiki.js**）。然後，我們在 Express 應用程序上調用`use()`，將路由器添加到中間件處理路徑，並指定一個'wiki'的 URL 路徑。
 
@@ -105,7 +107,8 @@ router.get("/about", function (req, res) {
 
 回調函數接受三個參數（通常如下所示命名：`req`, `res`, `next`），它將包含 HTTP 請求對象，HTTP 響應，以及中間件鏈中的下一個函數。
 
-> **備註：** 路由器功能是[Express 中間件](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware)，這意味著它們必須完成（響應）請求或調用鏈中的下一個功能`next`。在上面的例子中，我們使用`send()`完成了請求，所以下一個參數`next`沒有被使用（我們選擇不指定它）。
+> [!NOTE]
+> 路由器功能是[Express 中間件](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware)，這意味著它們必須完成（響應）請求或調用鏈中的下一個功能`next`。在上面的例子中，我們使用`send()`完成了請求，所以下一個參數`next`沒有被使用（我們選擇不指定它）。
 >
 > 上面的路由器函數只需要一次回調，但你可以根據需要指定任意數量的回調參數，或一組回調函數。每個函數都是中間件鏈的一部分，並且將按照添加到鏈中的順序調用（除非前面的函數完成請求）。
 
@@ -142,7 +145,8 @@ app.get(/.*fish$/, function (req, res) {
 })
 ```
 
-> **備註：** LocalLibrary 的大部分路由，都只使用字符串，而不是字符串模式和正則表達式。我們還將使用下一節中討論的路由參數。
+> [!NOTE]
+> LocalLibrary 的大部分路由，都只使用字符串，而不是字符串模式和正則表達式。我們還將使用下一節中討論的路由參數。
 
 ### 路由參數
 
@@ -160,7 +164,8 @@ app.get('/users/:userId/books/:bookId', function (req, res) {
 
 路由參數的名稱，必須由「單詞字符」（AZ，az，0-9 和\_）組成。
 
-> **備註：** URL */book/create*將與`/book/:bookId` 之類的路由匹配（它將提取要創建' `create`'的「bookId」值）。將使用與傳入 URL 匹配的第一個路由，因此，如果要單獨處理`/book/create`URL，則必須在`/book/:bookId`路由之前，先定義其路由處理程序。
+> [!NOTE]
+> URL */book/create*將與`/book/:bookId` 之類的路由匹配（它將提取要創建' `create`'的「bookId」值）。將使用與傳入 URL 匹配的第一個路由，因此，如果要單獨處理`/book/create`URL，則必須在`/book/:bookId`路由之前，先定義其路由處理程序。
 
 這就是你開始使用路由所需的全部內容-如果需要，你可以在 Express 文檔中找到更多信息：[基本路由](http://expressjs.com/en/starter/basic-routing.html)和[路由指南](http://expressjs.com/en/guide/routing.html)。以下部分顯示了我們如何為 LocalLibrary 設置路由和控制器。
 
@@ -179,7 +184,8 @@ app.get('/users/:userId/books/:bookId', function (req, res) {
 
 我們將使用路徑參數，來提取編碼信息，並將其傳遞給路由處理程序（在稍後的文章中，我們將使用它來動態確定從數據庫獲取的信息）。通過對我們的 URL 中的信息進行編碼，我們只需要一個路由，用於特定類型的每個資源（例如，一個路由來處理每個書本項目的顯示）。
 
-> **備註：** Express 允許你以任何方式構建 URL -你可以在 URL 正文中編碼信息，就像上面一樣，或使用 URL `GET`參數（例如`/book/?id=6`）。無論你使用哪種方法，URL 都應保持乾淨，合理且可讀（請在此處查看[W3C 建議](https://www.w3.org/Provider/Style/URI)）。
+> [!NOTE]
+> Express 允許你以任何方式構建 URL -你可以在 URL 正文中編碼信息，就像上面一樣，或使用 URL `GET`參數（例如`/book/?id=6`）。無論你使用哪種方法，URL 都應保持乾淨，合理且可讀（請在此處查看[W3C 建議](https://www.w3.org/Provider/Style/URI)）。
 
 接下來，我們為所有上述 URL，創建路由處理程序回調函數和路由代碼。
 
@@ -571,7 +577,8 @@ router.get("/", function (req, res) {
 });
 ```
 
-> **備註：** 這是我們第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 響應方法。這會重定向到指定的頁面，默認情況下會發送 HTTP 狀態代碼「302 Found」。你可以根據需要，更改返回的狀態代碼，並提供絕對路徑或相對路徑。
+> [!NOTE]
+> 這是我們第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 響應方法。這會重定向到指定的頁面，默認情況下會發送 HTTP 狀態代碼「302 Found」。你可以根據需要，更改返回的狀態代碼，並提供絕對路徑或相對路徑。
 
 ### 更新 app.js
 
@@ -593,7 +600,8 @@ app.use("/users", usersRouter);
 app.use("/catalog", catalogRouter); // Add catalog routes to middleware chain.
 ```
 
-> **備註：** 我們已在路徑 `'/catalog'` 中添加了目錄模塊。它預先添加到目錄模塊中定義的所有路徑。例如，要訪問書本列表，URL 將為：`/catalog/books/`。
+> [!NOTE]
+> 我們已在路徑 `'/catalog'` 中添加了目錄模塊。它預先添加到目錄模塊中定義的所有路徑。例如，要訪問書本列表，URL 將為：`/catalog/books/`。
 
 就是這樣。現在應該為我們最終在 LocalLibrary 網站上支持的所有 URL，啟用路由和框架功能。
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/skeleton_website/index.md b/files/zh-tw/learn/server-side/express_nodejs/skeleton_website/index.md
index d27507dc4d28ea..93f87082063dc8 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -33,7 +33,8 @@ slug: Learn/Server-side/Express_Nodejs/skeleton_website
 
 以下部分向你展示如何調用應用程序生成器，並提供關於視圖或 CSS 的不同選項的一些解釋。我們還將解釋骨架網站的結構。最後，我們將展示如何運行網站，來驗證它是否有效。
 
-> **備註：** Express Application Generator 並非 Express 應用程序的唯一生成器，生成的項目不是構建文件和目錄的唯一可行方式。然而，生成的網站具有易於擴展和理解的模塊化結構。有關最小 Express 應用程序的信息，請參閱 [Hello world](https://expressjs.com/en/starter/hello-world.html) 示例（Express docs）。
+> [!NOTE]
+> Express Application Generator 並非 Express 應用程序的唯一生成器，生成的項目不是構建文件和目錄的唯一可行方式。然而，生成的網站具有易於擴展和理解的模塊化結構。有關最小 Express 應用程序的信息，請參閱 [Hello world](https://expressjs.com/en/starter/hello-world.html) 示例（Express docs）。
 
 ## 使用應用產生器
 
@@ -72,13 +73,15 @@ express
 
 你還可以使用`--view`選擇視圖（模板）引擎，並且/或者使用`--css`選擇 CSS 生成引擎。
 
-> **備註：** 選擇模板引擎的其他選項（例如 `--hogan`, `--ejs`, `--hbs`等）已被棄用。請用 `--view` (或 `-v`)!
+> [!NOTE]
+> 選擇模板引擎的其他選項（例如 `--hogan`, `--ejs`, `--hbs`等）已被棄用。請用 `--view` (或 `-v`)!
 
 ### 我應該用哪個視圖引擎?
 
 Express Application Generator 允許你配置許多流行的視圖/模板引擎，包括 [EJS](https://www.npmjs.com/package/ejs), [Hbs](http://github.com/donpark/hbs), [Pug](https://pugjs.org/api/getting-started.html) (Jade), [Twig](https://www.npmjs.com/package/twig), 和 [Vash](https://www.npmjs.com/package/vash)，但如果你沒有指定視圖選項，它會默認選擇 Jade。 Express 本身也可以支持大量其他模板語言，是「[開箱即可使用](https://github.com/expressjs/express/wiki#template-engines)」的。
 
-> **備註：** 如果要使用生成器不支持的模板引擎，請參閱[在 Express 中使用模板引擎（Express 文檔）](https://expressjs.com/en/guide/using-template-engines.html)，並參閱目標視圖引擎的文檔。
+> [!NOTE]
+> 如果要使用生成器不支持的模板引擎，請參閱[在 Express 中使用模板引擎（Express 文檔）](https://expressjs.com/en/guide/using-template-engines.html)，並參閱目標視圖引擎的文檔。
 
 一般來說，你應該選擇一種「可以提供你所需的所有功能」的模板引擎，
 並使你能夠儘早提高生產力 - 換句話說，就像你選擇其他組件一樣！比較模板引擎時需要考慮的一些事項如下：
@@ -97,7 +100,8 @@ Express Application Generator 允許你配置許多流行的視圖/模板引擎
   - 支持異步操作和流媒體。
   - 可以在客戶端和服務器上使用。如果可以在客戶端上使用模板引擎，則允許提供數據，並有可能在客戶端完成所有渲染，或大部分渲染。
 
-> **備註：** 互聯網上有許多資源，可幫助你比較不同的視圖/模板引擎選擇！
+> [!NOTE]
+> 互聯網上有許多資源，可幫助你比較不同的視圖/模板引擎選擇！
 
 對於這個項目，我們將使用 [Pug](https://pugjs.org/api/getting-started.html) 模板引擎（這是最近更名的 Jade 引擎），因為這是最流行的 Express / JavaScript 模板語言之一，並且應用發生器支持開箱即用。
 
@@ -105,7 +109,8 @@ Express Application Generator 允許你配置許多流行的視圖/模板引擎
 
 Express 應用生成器允許你創建一個項目，並配置最常見的 CSS 樣式表引擎：[LESS](http://lesscss.org/), [SASS](http://sass-lang.com/), [Compass](http://compass-style.org/), [Stylus](http://stylus-lang.com/)。
 
-> **備註：** CSS 有一些限制，使某些任務變得困難。 CSS 樣式表引擎允許你使用更強大的語法來定義你的 CSS，然後將定義編譯為純粹的舊式 CSS，以供瀏覽器使用。
+> [!NOTE]
+> CSS 有一些限制，使某些任務變得困難。 CSS 樣式表引擎允許你使用更強大的語法來定義你的 CSS，然後將定義編譯為純粹的舊式 CSS，以供瀏覽器使用。
 
 與模板引擎一樣，你應該使用樣式表引擎，這樣可以讓你的團隊獲得最高生產力。對於這個項目，我們將使用普通的 CSS（默認值），因為我們的 CSS 要求不夠複雜，沒有必要使用其他任何東西。
 
@@ -187,7 +192,8 @@ express express-locallibrary-tutorial --view=pug
 
 你有一個能工作的 Express 應用了，讓它在 `http://localhost:3000/` 服務。
 
-> **備註：** 你也可以使用 `npm start` 命令啟動應用程序。如下圖所示，指定 DEBUG 變量可啟用控制台日誌記錄/調試。例如，當你訪問上面的頁面時，你會看到像這樣的調試輸出：
+> [!NOTE]
+> 你也可以使用 `npm start` 命令啟動應用程序。如下圖所示，指定 DEBUG 變量可啟用控制台日誌記錄/調試。例如，當你訪問上面的頁面時，你會看到像這樣的調試輸出：
 >
 > ```bash
 > >SET DEBUG=express-locallibrary-tutorial:* & npm start
@@ -242,7 +248,8 @@ npm install --save-dev nodemon
   DEBUG=express-locallibrary-tutorial:* npm run devstart
   ```
 
-> **備註：** 現在，如果你編輯項目中的任何文件，服務器將重新啟動（或者你可以隨時在命令提示符下，鍵入`rs`來重新啟動它）。你仍需要重新加載瀏覽器，以刷新頁面。
+> [!NOTE]
+> 現在，如果你編輯項目中的任何文件，服務器將重新啟動（或者你可以隨時在命令提示符下，鍵入`rs`來重新啟動它）。你仍需要重新加載瀏覽器，以刷新頁面。
 >
 > 我們現在必須調用「`npm run <scriptname>`」而不是 `npm start`，因為「start」實際上是映射到指定腳本的 NPM 命令。我們可以在啟動腳本中替換該命令，但我們只想在開發期間使用 nodemon，因此創建新的腳本命令是有意義的。
 
@@ -372,7 +379,8 @@ var indexRouter = require("./routes/index");
 var usersRouter = require("./routes/users");
 ```
 
-> **備註：** 此時我們剛剛導入了模塊；我們還沒有真正使用過它的路由（在文件的更下方一點將使用到路由）。
+> [!NOTE]
+> 此時我們剛剛導入了模塊；我們還沒有真正使用過它的路由（在文件的更下方一點將使用到路由）。
 
 接下來，我們使用導入的 express 模塊 ，創建應用程序 `app` 對象，然後使用它來設置視圖（模板）引擎。引擎的設置有兩個部分。首先我們設置 '`views`' 值，來指定模板將被存儲的文件夾（在這種情況下是子文件夾 **/views**）。然後我們設置 '`view engine`' 的值，來指定模板庫（在本例中為 「pug」 ）。
 
@@ -403,7 +411,8 @@ app.use("/", indexRouter);
 app.use("/users", usersRouter);
 ```
 
-> **備註：** 上面指定的路徑 ('/' and '`/users`')，被視為定義在導入文件中的路由前綴。因此，例如，如果導入的用戶模塊 **users**為`/profile`定義了路由，則可以在 `/users/profile`中訪問該路由。我們將在後面的文章中，詳細討論路由。
+> [!NOTE]
+> 上面指定的路徑 ('/' and '`/users`')，被視為定義在導入文件中的路由前綴。因此，例如，如果導入的用戶模塊 **users**為`/profile`定義了路由，則可以在 `/users/profile`中訪問該路由。我們將在後面的文章中，詳細討論路由。
 
 文件中的最後一個中間件，為錯誤和 HTTP 404 響應添加了處理程序方法。
 
@@ -451,7 +460,8 @@ module.exports = router;
 
 該路由定義了一個回調，只要檢測到具有正確模式的 HTTP `GET` 請求，就會調用該回調。匹配模式是模塊導入時指定的路由（'`/users`'），加上（'`/`'）文件中定義的任何內容。換句話說，當收到`/users/`的 URL 時，將使用此路由。
 
-> **備註：** 嘗試運行帶有 node 的服務器，並在瀏覽器中訪問以下 URL: <http://localhost:3000/users/>。你應該看到一條消息：'respond with a resource'。
+> [!NOTE]
+> 嘗試運行帶有 node 的服務器，並在瀏覽器中訪問以下 URL: <http://localhost:3000/users/>。你應該看到一條消息：'respond with a resource'。
 
 上面有趣的事情是，回調函數有第三個參數 '`next`'，因此是一個中間件函數，而不是簡單的路由回調。雖然代碼當前不使用 `next` 參數，但如果要在'`/`'根路由路徑中，添加多個路由處理程序，將來可能會有用。
 
diff --git a/files/zh-tw/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/zh-tw/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
index 48e0f3492a21ee..d485bc436d3900 100644
--- a/files/zh-tw/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/zh-tw/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -62,7 +62,8 @@ _我們接下來將創建，並隨著本系列教程發展的網站，名字是
 
 如果你被卡住了，你可以在 [Github 的這裡](https://github.com/mdn/express-locallibrary-tutorial)，找到本地圖書館網站已經開發完成的版本。
 
-> **備註：** 在本教程中，指定版本的 node、Express、還有其它模組，都經過測試，並列出在專案項目的 [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) 檔案中。
+> [!NOTE]
+> 在本教程中，指定版本的 node、Express、還有其它模組，都經過測試，並列出在專案項目的 [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) 檔案中。
 
 ## 總結
 
diff --git a/files/zh-tw/learn/server-side/first_steps/introduction/index.md b/files/zh-tw/learn/server-side/first_steps/introduction/index.md
index e3f998e1b056e1..faa87dad83e946 100644
--- a/files/zh-tw/learn/server-side/first_steps/introduction/index.md
+++ b/files/zh-tw/learn/server-side/first_steps/introduction/index.md
@@ -82,7 +82,8 @@ slug: Learn/Server-side/First_steps/Introduction
 
 再者，儘管用戶端與伺服端程式碼都使用框架，但會因為非常不同的域，而使得框架也不同。用戶端網頁框架簡化佈局與呈現的任務，而伺服端網頁框架則提供大量＂通用＂的網頁伺服器功能，否則你可能必須要自己實現（例如：對 sessions 的支援、對使用者認證的支援、簡易資料庫存取、樣板庫等）。
 
-> **備註：** Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.
+> [!NOTE]
+> Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.
 >
 > In contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an HTTP server is really hard to do from scratch in say Python, but Python web frameworks like Django provide one out of the box, along with other very useful tools.
 
@@ -106,7 +107,8 @@ slug: Learn/Server-side/First_steps/Introduction
 
 由於資訊存在於資料庫中，它可以輕易地與其他商業系統進行分享與更新（例如：當產品在線上或在店家中售完，店家可能會更新該產品的庫存資料庫）。
 
-> **備註：** Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:
+> [!NOTE]
+> Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:
 >
 > 1. Go to [Amazon](https://www.amazon.com) or some other e-commerce site.
 > 2. Search for a number of keywords and note how the page structure doesn't change, even though the results do.
@@ -139,7 +141,8 @@ slug: Learn/Server-side/First_steps/Introduction
 - 社交網路如 Facebook 允許使用者全權控制他們自己的資料，但是只有允許他們的朋友檢視或評論資料。該使用者決定誰能看到他們的資料，並推廣到他們的動態中會呈現誰的資料 — 授權是使用者體驗的核心部分！
 - 你正所在的網站控制內容的存取：文章可被任何人看見，但是只有使用者登入才能編輯該內容。若要試試看，點擊本頁面上方的**編輯**按鈕 — 如果你已登入，你將會顯示編輯視窗；如果你沒有登入，你將會被導到註冊頁面。
 
-> **備註：** Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?
+> [!NOTE]
+> Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?
 
 ### 儲存 session/state 資訊
 
@@ -147,7 +150,8 @@ slug: Learn/Server-side/First_steps/Introduction
 
 例如，這允許網站了解一個使用者先前已登入過，以及將訂購歷史紀錄在他們的電子郵件中顯示連結，或者也許會儲存一個基本的遊戲狀態，讓使用者能再次回到網站的同時，拿回他們留在網站的資訊。
 
-> **備註：** Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. [The Age](http://www.theage.com.au/)). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.
+> [!NOTE]
+> Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. [The Age](http://www.theage.com.au/)). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.
 
 ### 提醒與溝通
 
@@ -159,7 +163,8 @@ slug: Learn/Server-side/First_steps/Introduction
 - Amazon 定期發送產品電子郵件來提供相近於曾經已購買或你可能有興趣瀏覽的產品。
 - 一個網頁伺服器可能會發送警告訊息給網站管理員，以警示伺服器的記憶體過低或有嫌疑的使用者型為。
 
-> **備註：** The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.
+> [!NOTE]
+> The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.
 
 ### 資料分析
 
@@ -167,7 +172,8 @@ slug: Learn/Server-side/First_steps/Introduction
 
 例如，Amazon 與 Google 都根據過往搜尋（與購買）紀錄來廣告產品。
 
-> **備註：** If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.
+> [!NOTE]
+> If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.
 >
 > Also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. Facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits!
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index 029a7f1e791196..7068c51f5d8b6b 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -35,7 +35,8 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
 
 ## React 教學
 
-> **備註：** 最近一次測試成功的 React 教學在 2020 年五月。版本為 React/ReactDOM 16.13.1 與 create-react-app 3.4.1。
+> [!NOTE]
+> 最近一次測試成功的 React 教學在 2020 年五月。版本為 React/ReactDOM 16.13.1 與 create-react-app 3.4.1。
 >
 > 如果想看看最新的程式，可以從我們的 [todo-react repository](https://github.com/mdn/todo-react) 或互動性的 <https://mdn.github.io/todo-react-build/> 看。
 
@@ -56,7 +57,8 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
 
 ## Ember 教學
 
-> **備註：** 最近一次測試成功的 Ember 教學在 2020 年五月。版本為 Ember/Ember CLI 3.18.0。
+> [!NOTE]
+> 最近一次測試成功的 Ember 教學在 2020 年五月。版本為 Ember/Ember CLI 3.18.0。
 >
 > 如果想看看最新的程式，可以從我們的 [ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc) 或互動性的 <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> 看。注意：部分功能沒有放在教學裡面。
 
@@ -75,7 +77,8 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
 
 ## Vue 教學
 
-> **備註：** 最近一次測試成功的 Vue 教學在 2020 年五月。版本為 Vue 2.6.11。
+> [!NOTE]
+> 最近一次測試成功的 Vue 教學在 2020 年五月。版本為 Vue 2.6.11。
 >
 > 如果想看看最新的程式，可以從我們的 [todo-vue repository](https://github.com/mdn/todo-vue) 或互動性的 <https://mdn.github.io/todo-vue/dist/> 看。
 
@@ -100,7 +103,8 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
 
 ## Svelte 教學
 
-> **備註：** Svelte tutorials last tested in August 2020, with Svelte 3.24.1.
+> [!NOTE]
+> Svelte tutorials last tested in August 2020, with Svelte 3.24.1.
 >
 > If you need to check your code against our version, you can find a finished version of the sample Svelte app code as it should be after each article, in our [mdn-svelte-tutorial](https://github.com/opensas/mdn-svelte-tutorial) repo. For a running live version, see our Svelte REPL at <https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2>.
 
@@ -123,7 +127,8 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
 
 ## Angular 教學
 
-> **備註：** Angular 教學的最後測試時間為 2021 年四月，使用 Angular CLI（NG）11.2.5。
+> [!NOTE]
+> Angular 教學的最後測試時間為 2021 年四月，使用 Angular CLI（NG）11.2.5。
 >
 > 如果你需要根據我們的版本檢查程式碼，可以在 [angular-to-do-example](https://github.com/kapunahelewong/angular-to-do-example/tree/main/src) 上找到範例程式碼的最終版本。
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
index a7acdb7c959e60..38b1a962ce3ca3 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
@@ -186,7 +186,8 @@ JavaScript 框架都會提供一種能更加*宣告性*撰寫介面的方法。
 
 本模塊提到的幾個框架，背後都有著龐大而活躍的社群；這些社群形成了各種生態圈、並提供能增進開發體驗的工具：像是確保功能正常的測試、或著維持程式一致性的 linting。
 
-> **備註：** 如果對這方面的概念有興趣，請看看 [Client-side tooling overview](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。
+> [!NOTE]
+> 如果對這方面的概念有興趣，請看看 [Client-side tooling overview](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。
 
 ### 切分
 
@@ -257,7 +258,8 @@ web 最重要的功能之一，就是頁面之間的導航：畢竟它就是相
 | Vue     | IE9+                              | 基於 HTML  | 基於 HTML, JSX, Pug    |
 | Ember   | 當代瀏覽器（IE9+ 直到 2.18 為止） | Handlebars | Handlebars, TypeScript |
 
-> **備註：** 「基於 HTML」的 DSL 並沒有官方名字。雖然它們不完全是 DSL，但也不是標準的 HTML，所在我們在此附帶一題。
+> [!NOTE]
+> 「基於 HTML」的 DSL 並沒有官方名字。雖然它們不完全是 DSL，但也不是標準的 HTML，所在我們在此附帶一題。
 
 表格的引用來源：
 
@@ -297,7 +299,8 @@ Vue 的開發團隊也寫了[有關 Vue 與其他框架的詳盡比較](https://
 
 本模塊的所有用戶端渲染框架，都有相對應的伺服器端渲染。像是 React 的 [Next.js](https://nextjs.org/)、Vue 的 [Nuxt.js](https://nuxtjs.org/)（對這的確很教人困惑，不過兩者沒有關係）、Ember 的 [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot)、Angular 的 [Angular Universal](https://angular.io/guide/universal)。
 
-> **備註：** 某些伺服器端渲染的解決方案，是由社區編寫和維護；但也有「官方」的解決方案，是由框架維護者提供的。
+> [!NOTE]
+> 某些伺服器端渲染的解決方案，是由社區編寫和維護；但也有「官方」的解決方案，是由框架維護者提供的。
 
 ### 靜態網站產生器
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index ec043fbeae9048..cb17a050653310 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -74,7 +74,8 @@ const header = (
 );
 ```
 
-> **備註：** 前面程式碼中的括號`(`、`)`不是 JSX 獨有的，這對你的應用程式沒有任何影響。它們會向你（和你的電腦）發出訊號，表示括號其中的多行程式碼是同個表達式的一部分。你也可以像這樣編寫表達式：
+> [!NOTE]
+> 前面程式碼中的括號`(`、`)`不是 JSX 獨有的，這對你的應用程式沒有任何影響。它們會向你（和你的電腦）發出訊號，表示括號其中的多行程式碼是同個表達式的一部分。你也可以像這樣編寫表達式：
 >
 > ```js
 > const header = (
@@ -139,7 +140,8 @@ npx create-react-app moz-todo-react
 - 建立定義基本應用程式架構的文件和目錄結構。
 - 如果你的電腦已有安裝 git 版控，則將該資料夾目錄初始化為 git 存儲庫。
 
-> **備註：** 如果你已有安裝 yarn 套件管理器，`create-react-app`默認將使用它而不是使用 npm。如果你已安裝 yarn 和 npm 兩個套件管理器並且堅持繼續使用 npm，當你要執行`create-react-app`指令時，你可以添加指令`--use-npm`
+> [!NOTE]
+> 如果你已有安裝 yarn 套件管理器，`create-react-app`默認將使用它而不是使用 npm。如果你已安裝 yarn 和 npm 兩個套件管理器並且堅持繼續使用 npm，當你要執行`create-react-app`指令時，你可以添加指令`--use-npm`
 >
 > ```bash
 > npx create-react-app moz-todo-react --use-npm
@@ -323,7 +325,8 @@ Line 7 calls React's `ReactDOM.render()` function with two arguments:
 
 All of this tells React that we want to render our React application with the `App` component as the root, or first component.
 
-> **備註：** In JSX, React components and HTML elements must have closing slashes. Writing just `<App>` or just `<img>` will cause an error.
+> [!NOTE]
+> In JSX, React components and HTML elements must have closing slashes. Writing just `<App>` or just `<img>` will cause an error.
 
 [Service workers](/zh-TW/docs/Web/API/Service_Worker_API/Using_Service_Workers) are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they're not in scope for this article. You can delete line 5, as well as most of the code below it.
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index 8abb373d489518..45f9a27ec4fd21 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -5,7 +5,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}我們被賦予做出一個 React 原型 app 的任務--這個 app 將允許使用者新增、編輯、刪除任務；且可以標記任務完成而不被刪除。文章將會與你一起完成一個基本 `App` component 的結構與畫面，以便稍後與其他 component 互動。
 
-> **備註：** 如果你需要檢查自己的程式碼與範例之間的差異，可以連到 [todo-react repository](https://github.com/mdn/todo-react)，這裡有我們完整的程式碼。 Todo list 作品示範：<https://mdn.github.io/todo-react-build/>。
+> [!NOTE]
+> 如果你需要檢查自己的程式碼與範例之間的差異，可以連到 [todo-react repository](https://github.com/mdn/todo-react)，這裡有我們完整的程式碼。 Todo list 作品示範：<https://mdn.github.io/todo-react-build/>。
 
 <table class="learn-box standard-table">
   <tbody>
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
index afc63daa16f213..87e3ebd01fbc94 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
@@ -47,7 +47,8 @@ Svelte 更貼近傳統的網站開發模型（HTML、CSS、JS），它只有對
 
 現階段的缺點只因它目前仍在發展中——和其它成熟框架相比它的生態環境較受限於工具、支援、套件、使用模式等等限制，工作機會也比較少。但它的優點應該足夠讓你感興趣並去探索它。
 
-> **備註：** 最近 Svelte 已經正式加入 [TypeScript 支援](https://svelte.dev/blog/svelte-and-typescript)，這也是最受歡迎的功能之一，我們將在之後的教學系列中看到它。
+> [!NOTE]
+> 最近 Svelte 已經正式加入 [TypeScript 支援](https://svelte.dev/blog/svelte-and-typescript)，這也是最受歡迎的功能之一，我們將在之後的教學系列中看到它。
 
 我們鼓勵你走完 [Svelte 教學](https://svelte.dev/tutorial/basics)來快速了解基本的概念，在你回來此教學系列學習如何建構一些更深入的東西之前。它應該會花費你約 30 分鐘去完成。
 
@@ -102,7 +103,8 @@ npm install
 npm run dev
 ```
 
-> **備註：** 不用太驚訝 degit 做了這麼多事情——它其實就只是讓你可以從 git 儲存庫下載和解壓縮最新版本的內容。使用它比起使用 `git clone` 更快能達到我們的目的，因為它並不會下載整個儲存庫的歷史以及不會複製一份放在本機端。
+> [!NOTE]
+> 不用太驚訝 degit 做了這麼多事情——它其實就只是讓你可以從 git 儲存庫下載和解壓縮最新版本的內容。使用它比起使用 `git clone` 更快能達到我們的目的，因為它並不會下載整個儲存庫的歷史以及不會複製一份放在本機端。
 
 之後執行 `npm run dev`，Svelte 將會編譯和建構你的應用程式。它將會跑在本機 `localhost:8080` 位址。當你對來源檔案做了異動，Svelte 將會偵測到檔案更新並自動地重新編譯和刷新你的應用程式。你的瀏覽器將會顯示如下圖：
 
@@ -178,7 +180,8 @@ moz-todo-svelte
 <!-- 標記（零或多個HTML元素）放這 -->
 ```
 
-> **備註：** 更多元件格式的資訊，可以至 [Svelte 文件](https://svelte.dev/docs#Component_format)閱讀。
+> [!NOTE]
+> 更多元件格式的資訊，可以至 [Svelte 文件](https://svelte.dev/docs#Component_format)閱讀。
 
 接著我們來看入門範本中的 `src/App.svelte` 檔案，你應該會看到以下內容：
 
@@ -284,7 +287,8 @@ Svelte 也支援一些標籤，像是 `{#if...}`，`{#each...}` 和 `{#await...}
 
 編譯應用程式時，Svelte 會改變我們 `h1` 的樣式定義為 `h1.svelte-1tky8bj` 並更改每一個在此元件中的 `<h1>` 元素為 `<h1 class="svelte-1tky8bj">`，如此就能讓該元件取得所需的樣式。
 
-> **備註：** 你也可以使用 `:global(...)` 修飾符覆寫此行為並且套用樣式至全域選擇器上（可以至 [Svelte `<style>` 文件](https://svelte.dev/docs#style)閱讀更多資訊）。
+> [!NOTE]
+> 你也可以使用 `:global(...)` 修飾符覆寫此行為並且套用樣式至全域選擇器上（可以至 [Svelte `<style>` 文件](https://svelte.dev/docs#style)閱讀更多資訊）。
 
 ## 做一些小改變
 
@@ -420,7 +424,8 @@ npm run dev
 
 假如你想要學習更多關於 git 和 GitHub，我們已經有整理一些有幫助的連結清單至指南——看看 [Git 和 GitHub](/zh-TW/docs/Learn/Tools_and_testing/GitHub)。
 
-> **備註：** 假如你只是想要下載檔案而不是複製 git 儲存庫，你可以使用 degit 工具像是這樣—— `npx degit opensas/mdn-svelte-tutorial`。你也可以用 `npx degit opensas/mdn-svelte-tutorial/01-getting-started` 來下載特定資料夾。Degit 將不會建立本地 git 儲存庫，它將只下載特定資料夾下的檔案們。
+> [!NOTE]
+> 假如你只是想要下載檔案而不是複製 git 儲存庫，你可以使用 degit 工具像是這樣—— `npx degit opensas/mdn-svelte-tutorial`。你也可以用 `npx degit opensas/mdn-svelte-tutorial/01-getting-started` 來下載特定資料夾。Degit 將不會建立本地 git 儲存庫，它將只下載特定資料夾下的檔案們。
 
 ### 使用 Svelte REPL
 
@@ -449,11 +454,13 @@ Svelte 的 REPL 功能卻不只如此。它是一個線上工具，允許你建
 
 每當你在 REPL 改變任何檔案，Svelte 將會重新編譯應用程式並更新結果（Result）標籤。為了分享你的應用程式網址。舉個例子，這是運行我們完整應用程式的 REPL 連結：<https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2>。
 
-> **備註：** 可以注意一下在連結上怎麼標註 Svelte 的版本。當你在回報 Svelte 特定版本的問題時，這是很有幫助的。
+> [!NOTE]
+> 可以注意一下在連結上怎麼標註 Svelte 的版本。當你在回報 Svelte 特定版本的問題時，這是很有幫助的。
 
 我們將會在每一篇文章的開頭與結尾提供 REPL，所以你就能立刻和我們一起撰寫程式碼。
 
-> **備註：** 不知何時 REPL 變得沒辦法適當地處理資料夾名稱。假如你是使用 REPL 來跟著教學系列，只需要將所有你的元件建立在根目錄即可。接著當你看到程式碼中的路徑時，舉例來說如果是 `import Todos from './components/Todos.svelte'`，只需要將它換成類似如 `import Todos from './Todos.svelte'` 即可。
+> [!NOTE]
+> 不知何時 REPL 變得沒辦法適當地處理資料夾名稱。假如你是使用 REPL 來跟著教學系列，只需要將所有你的元件建立在根目錄即可。接著當你看到程式碼中的路徑時，舉例來說如果是 `import Todos from './components/Todos.svelte'`，只需要將它換成類似如 `import Todos from './Todos.svelte'` 即可。
 
 ## 到目前為止的程式碼
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
index ab512ba4e48898..4f94993a60cd72 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
@@ -92,7 +92,8 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app
 
 1. 建立新資料夾—— `src/components`。
 
-   > **備註：** 你可以把元件們放在 `src` 資料夾當中的任何地方，但放在 `components` 資料夾是比較常見的做法，也讓你可以更容易地找到它們。
+   > [!NOTE]
+   > 你可以把元件們放在 `src` 資料夾當中的任何地方，但放在 `components` 資料夾是比較常見的做法，也讓你可以更容易地找到它們。
 
 2. 建立 `src/components/Todos.svelte` 檔案並包含以下內容：
 
@@ -351,7 +352,8 @@ created public/build/bundle.js in 220ms
 <img height="32" width="88" src="https://www.w3.org/WAI/wcag2A" />
 ```
 
-> **備註：** 透過 VSCode 你可以點擊 _Quick fix..._ 連結或按 <kbd>Ctrl</kbd> + <kbd>.</kbd> 來自動地加上這個忽略註解。
+> [!NOTE]
+> 透過 VSCode 你可以點擊 _Quick fix..._ 連結或按 <kbd>Ctrl</kbd> + <kbd>.</kbd> 來自動地加上這個忽略註解。
 
 假如你想要全域地關閉這個警告，可以在你的 `rollup.config.js` 檔案中調整 `Svelte` 外掛組態並補上這個 `onwarn` 處理器即可，像是如下：
 
@@ -380,7 +382,8 @@ plugins: [
 
 在設計上，這些警告被實現於編譯器本身，而不是你可以選擇性加入專案的外掛。理念是建立在預設會檢核你的標記語言有無 a11y 問題並讓你可以選擇排除特定警告。
 
-> **備註：** 假如你有足夠充分的理由，則可以先停用這些警告，例如當你在快速建構原型時。成為一個優秀的網路公民並讓你的頁面盡可能廣泛地被用戶閱讀是很重要的。
+> [!NOTE]
+> 假如你有足夠充分的理由，則可以先停用這些警告，例如當你在快速建構原型時。成為一個優秀的網路公民並讓你的頁面盡可能廣泛地被用戶閱讀是很重要的。
 
 Svelte 透過 [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#supported-rules) 來檢核無障礙性規則，它是提供在 JSX 元素上許多無障礙性規則靜態檢核的一個 ESLint 外掛。Svelte 企圖將它們全部實現於編譯器中，而大部分都已經移植至 Svelte 中。你可以在 GitHub 中看到[尚未實現的無障礙檢核](https://github.com/sveltejs/svelte/issues/820)。點選規則的連結可以查閱它們各自的涵義。
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
index 4b9537999112ee..57ccf2ed9823c4 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
@@ -254,7 +254,8 @@ let completedTodos = todos.filter((todo) => todo.completed).length;
 
 可以告訴 Svelte 我們想要 `totalTodos` 和 `completedTodos` 等變數藉由前綴 `$:`，使其具有反應性。Svelte 將產生程式碼以在它們相依的資料發生變化時自動更新它們。
 
-> **備註：** Svelte 使用 `$:` [JavaScript 標記陳述語法](/zh-TW/docs/Web/JavaScript/Reference/Statements/label)來標記反應性陳述。像是用於宣告屬性的 `export` 關鍵字一樣，這可能看起來會有點陌生。但這是 Svelte 利用有效 JavaScript 語法並賦予其新用途的另一個例子——在這種情況下，意味著「每當任何參考的數值有變化時，則會重新執行此程式碼」。一旦習慣了，就無法回頭了。
+> [!NOTE]
+> Svelte 使用 `$:` [JavaScript 標記陳述語法](/zh-TW/docs/Web/JavaScript/Reference/Statements/label)來標記反應性陳述。像是用於宣告屬性的 `export` 關鍵字一樣，這可能看起來會有點陌生。但這是 Svelte 利用有效 JavaScript 語法並賦予其新用途的另一個例子——在這種情況下，意味著「每當任何參考的數值有變化時，則會重新執行此程式碼」。一旦習慣了，就無法回頭了。
 
 更新 `src/components/Todos.svelte` 中的 `totalTodos` 和 `completedTodos` 變數定義，如下：
 
@@ -308,7 +309,8 @@ Svelte 編譯器在背後會解析和分析我們的程式碼以產生相依樹
    $: console.log("newTodoName: ", newTodoName);
    ```
 
-   > **備註：** 你可能已經注意到了，反應性陳述不僅限於變數宣告。你可以在 `$:` 符號之後放上 _任何_ JavaScript 陳述。
+   > [!NOTE]
+   > 你可能已經注意到了，反應性陳述不僅限於變數宣告。你可以在 `$:` 符號之後放上 _任何_ JavaScript 陳述。
 
 4. 現在嘗試回到 `localhost:5042`，按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> 來打開瀏覽器控制台並在輸入框中輸入一些內容。你應該就會看到你的輸入被記錄了。此時，你可以視情況刪除反應性 `console.log()`。
 5. 接下來，我們將建立一個函式來加入新的待辦事項—— `addTodo()` ——它會將一個新的 `todo` 物件塞入到 `todos` 陣列中。將此函式新增到 `src/components/Todos.svelte` 中 `<script>` 區塊的底部：
@@ -320,7 +322,8 @@ Svelte 編譯器在背後會解析和分析我們的程式碼以產生相依樹
    }
    ```
 
-   > **備註：** 目前我們為每個待辦事項都指定相同的 `id`，別擔心，我們會盡快解決這個問題。
+   > [!NOTE]
+   > 目前我們為每個待辦事項都指定相同的 `id`，別擔心，我們會盡快解決這個問題。
 
 6. 現在我們要更新我們的 HTML，以便每當表單被提交時來呼叫 `addTodo()`。更新新增待辦事項（NewTodo）表單的起始標籤如下：
 
@@ -334,7 +337,8 @@ Svelte 編譯器在背後會解析和分析我們的程式碼以產生相依樹
 
    只要將 `todos = todos` 新增到 `addTodo()` 函式的末端就能解決這個問題，但是必須在函式末端包含它似乎很奇怪。取而代之，我們將拿掉 `push()` 方法並使用[展開語法](/zh-TW/docs/Web/JavaScript/Reference/Operators/Spread_syntax)來達到相同的結果：我們將為 `todos` 陣列指定一個等於 `todos` 陣列加上新物件的數值。
 
-   > **備註：** 陣列（`Array`）有幾個可變的操作：[`push()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/push)、[`pop()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)、[`splice()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)、[`shift()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)、[`unshift()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)、[`reverse()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 和 [`sort()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。使用它們常會導致難以追蹤的副作用和錯誤。透過使用展開語法而不是 `push()`，我們可以避免改變陣列本身，這被認為是一種好的做法。
+   > [!NOTE]
+   > 陣列（`Array`）有幾個可變的操作：[`push()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/push)、[`pop()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)、[`splice()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)、[`shift()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)、[`unshift()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)、[`reverse()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 和 [`sort()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。使用它們常會導致難以追蹤的副作用和錯誤。透過使用展開語法而不是 `push()`，我們可以避免改變陣列本身，這被認為是一種好的做法。
 
    更新你的 `addTodo()` 函式如下：
 
@@ -362,7 +366,8 @@ Svelte 編譯器在背後會解析和分析我們的程式碼以產生相依樹
    }
    ```
 
-   > **備註：** 如你所見，反應性陳述不僅限於單行。以下程式碼也有作用，但可讀性較差：`$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
+   > [!NOTE]
+   > 如你所見，反應性陳述不僅限於單行。以下程式碼也有作用，但可讀性較差：`$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
 
 2. Svelte 是如何做到這一點的？編譯器會解析整個反應性陳述並檢測到它依賴於 `totalTodos` 變數和 `todos` 陣列。所以每當它們中任何一個被修改時，都會重新評估程式碼並相應地更新 `newTodoId`。
 
@@ -421,7 +426,8 @@ Svelte 編譯器在背後會解析和分析我們的程式碼以產生相依樹
 
    我們透過將 `btn__primary` 類別套用於過濾器按鈕來顯示目前使用中的過濾器。為了有條件地將樣式類別套用於元素上，我們使用 `class:name={value}` 指令。如果數值表達式的計算結果為真，則類別名稱將會被套用。你可以將許多不同條件的指令塞到同一個元素上。所以當我們寫為 `class:btn__primary={filter === 'all'}` 時，假如過濾器（filter）變數等於 all，Svelte 將會套用 `btn__primary` 類別。
 
-   > **備註：** Svelte 提供了一個便利的捷徑，允許我們在類別與變數名稱相同時，可以將 `<div class:active={active}>` 縮短為 `<div class:active>`。
+   > [!NOTE]
+   > Svelte 提供了一個便利的捷徑，允許我們在類別與變數名稱相同時，可以將 `<div class:active={active}>` 縮短為 `<div class:active>`。
 
    `aria-pressed={filter === 'all'}` 也是類似的情況：當在大括號之間被傳入的 JavaScript 表達式的計算結果為真時，`aria-pressed` 屬性將被加入到按鈕上。
 
@@ -438,7 +444,8 @@ Svelte 編譯器在背後會解析和分析我們的程式碼以產生相依樹
 
    在分析我們的程式碼後，Svelte 檢測到我們的 `filterTodos()` 函式依賴於變數 `filter` 和 `todos`。而就像嵌入在標記中的任何其它動態表達式一樣，每當這些依賴發生變化時，DOM 都會相應地更新。所以每當 `filter` 或 `todos` 發生變化時，`filterTodos()` 函式將會重新評估並更新迴圈內的項目。
 
-> **備註：** 反應性有時會很棘手。Svelte 將 `filter` 識別為依賴，是因為我們在 `filterTodos(filter, todo)` 表達式中參考它。而 `filter` 是一個頂層變數，所以我們可能會想把它從輔助函式參數（params）中刪除，然後像這樣呼叫它：`filterTodos(todo)`。這雖會起作用，但現在 Svelte 會無法發現 `{#each filterTodos(todos) }` 依賴於 `filter` 並且當過濾器變更時，過濾完的待辦事項清單不會再被更新。切記 Svelte 會分析我們的程式碼以找出依賴關係，所以最好明確解釋它，而不是依賴於頂層變數的可見性。此外，讓我們的程式碼清晰並明確地解釋它正在使用的資訊是一個很好的做法。
+> [!NOTE]
+> 反應性有時會很棘手。Svelte 將 `filter` 識別為依賴，是因為我們在 `filterTodos(filter, todo)` 表達式中參考它。而 `filter` 是一個頂層變數，所以我們可能會想把它從輔助函式參數（params）中刪除，然後像這樣呼叫它：`filterTodos(todo)`。這雖會起作用，但現在 Svelte 會無法發現 `{#each filterTodos(todos) }` 依賴於 `filter` 並且當過濾器變更時，過濾完的待辦事項清單不會再被更新。切記 Svelte 會分析我們的程式碼以找出依賴關係，所以最好明確解釋它，而不是依賴於頂層變數的可見性。此外，讓我們的程式碼清晰並明確地解釋它正在使用的資訊是一個很好的做法。
 
 ## 到目前為止的程式碼
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
index 05fe3003633713..6e2defddc40a41 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
@@ -7,7 +7,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_compon
 
 現在是時候來更深入了解 Vue ，以及建立我們自訂的元件——我們將從建立一個元件開始，這個元件代表待辦清單裡的每一個項目。在過程中，我們會學到一些重要的概念，例如在元件裡面調用其他元件，使用 props 傳遞資料，以及儲存它的狀態（ state ）。
 
-> **備註：** 如果你需要根據我們的版本來檢查你的程式碼，你可以從 [todo-vue 存放庫](https://github.com/mdn/todo-vue)找到 Vue 範例應用程式最終版本的程式碼。有關實際運行的版本，請看 <https://mdn.github.io/todo-vue/dist/> 。
+> [!NOTE]
+> 如果你需要根據我們的版本來檢查你的程式碼，你可以從 [todo-vue 存放庫](https://github.com/mdn/todo-vue)找到 Vue 範例應用程式最終版本的程式碼。有關實際運行的版本，請看 <https://mdn.github.io/todo-vue/dist/> 。
 
 <table class="learn-box standard-table">
   <tbody>
@@ -137,7 +138,8 @@ export default {
 - 第一種方法是將 prop 寫成字串存進陣列中，陣列中的每個元素都對應到一個 prop 的名稱。
 - 第二種方法是寫一個物件，將 prop 作為物件的 key，這種寫法可以設定 prop 的初始值、型別、是否為必要值以及簡單的驗證。
 
-> **備註：** Prop 驗證只有在開發環境下有效，所以在正式上線的環境中無法使用。此外，作為 prop 驗證的函式在元件被創建之前就會被呼叫，因此該函式無法取得元件中的任何狀態或是其他 prop。
+> [!NOTE]
+> Prop 驗證只有在開發環境下有效，所以在正式上線的環境中無法使用。此外，作為 prop 驗證的函式在元件被創建之前就會被呼叫，因此該函式無法取得元件中的任何狀態或是其他 prop。
 
 對於 `ToDoItem` 這個元件，我們會透過第二種方法宣告 prop，也就是物件的形式。
 
@@ -230,7 +232,8 @@ You'll note that the `data` property is a function. This is to keep the data val
 
 You use `this` to access a component's props and other properties from inside data, as you may expect. We'll see an example of this shortly.
 
-> **備註：** Because of the way that `this` works in arrow functions (binding to the parent's context), you wouldn't be able to access any of the necessary attributes from inside `data` if you used an arrow function. So don't use an arrow function for the `data` property.
+> [!NOTE]
+> Because of the way that `this` works in arrow functions (binding to the parent's context), you wouldn't be able to access any of the necessary attributes from inside `data` if you used an arrow function. So don't use an arrow function for the `data` property.
 
 So let's add a `data` property to our `ToDoItem` component. This will return an object containing a single property that we'll call `isDone`, whose value is `this.done`.
 
@@ -301,7 +304,8 @@ Let's add the package to our project with npm; stop your server and enter the fo
 npm install --save lodash.uniqueid
 ```
 
-> **備註：** If you prefer yarn, you could instead use `yarn add lodash.uniqueid`.
+> [!NOTE]
+> If you prefer yarn, you could instead use `yarn add lodash.uniqueid`.
 
 We can now import this package into our `ToDoItem` component. Add the following line at the top of `ToDoItem.vue`'s `<script>` element:
 
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
index 11a9f600c17ada..d3aec4cd339a0a 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
@@ -69,7 +69,8 @@ Vue 是一個新穎的 Javascript 框架，它提供了很多有用的功能來
 1. 安裝 Node.js 8.11+
 2. npm 或 yarn
 
-> **備註：** 如果你沒有安裝以上工具，請參考[關於安裝 npm 及 Node.js](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups) 。
+> [!NOTE]
+> 如果你沒有安裝以上工具，請參考[關於安裝 npm 及 Node.js](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups) 。
 
 在你的終端機執行以下命令來安裝 CLI ：
 
@@ -108,7 +109,8 @@ CLI 會開始建構你的專案，並且安裝所需的相依套件。
 
 如果你之前沒有執行過 Vue CLI ，你將會被問一個問題－請選擇套件管理員。你可以使用方向鍵來選擇你想使用的套件管理員，Vue CLI 將會把這個套件管理員設為預設值。之後如果你想要使用不同的套件管理員，可以在執行 `vue create` 時傳入一個標幟 `--packageManager=<package-manager>` 。舉例來說，如果你現在想要用 npm 來創建 `moz-todo-vue` 專案，但是之前是使用 yarn ，你可以執行 `vue create moz-todo-vue --packageManager=npm` 。
 
-> **備註：** 在這裡我們沒有介紹所有的選項，你可以參考 Vue 官方文件裡的[關於 CLI 的更多資訊](https://cli.vuejs.org)。
+> [!NOTE]
+> 在這裡我們沒有介紹所有的選項，你可以參考 Vue 官方文件裡的[關於 CLI 的更多資訊](https://cli.vuejs.org)。
 
 ## 專案結構
 
@@ -122,7 +124,8 @@ CLI 會開始建構你的專案，並且安裝所需的相依套件。
   - `favicon.ico` ：這是應用程式的 favicon。目前是 Vue 的標誌。
   - `index.html` ：這是應用程式的模板。你的 Vue 應用程式會透過這個 HTML 頁面來運行，你也可以使用 lodash 樣板語言在這個頁面穿插一些值。
 
-    > **備註：** 這個模板不是用來管理你的應用程式的版面－而是用來管理應用程式以外的靜態 HTML 檔案，只有在使用一些進階的功能才需要修改這個檔案。
+    > [!NOTE]
+    > 這個模板不是用來管理你的應用程式的版面－而是用來管理應用程式以外的靜態 HTML 檔案，只有在使用一些進階的功能才需要修改這個檔案。
 
 - `src` ：這個資料夾是 Vue 專案的核心。
 
@@ -131,7 +134,8 @@ CLI 會開始建構你的專案，並且安裝所需的相依套件。
   - `components` ：你可以把你的元件放在這個資料夾。目前它只有放一個範例元件。
   - `assets` ：這個資料夾是用來放一些靜態檔案像是 CSS 和圖片。因為這些檔案在來源目錄下，它們可以透過 Webpack 加工處理。這表示你可以使用一些預處理器，像是 [Sass / SCSS](https://sass-lang.com/) 或是 [Stylus](https://stylus-lang.com/) 。
 
-> **備註：** 依據你創建專案時所選設定的不同，你可能會看到其他資料夾（舉例來說，如果你有選擇 router，你將會看到一個 `views` 資料夾）。
+> [!NOTE]
+> 依據你創建專案時所選設定的不同，你可能會看到其他資料夾（舉例來說，如果你有選擇 router，你將會看到一個 `views` 資料夾）。
 
 ## .vue 檔案（單一檔案元件）
 
@@ -149,7 +153,8 @@ CLI 會開始建構你的專案，並且安裝所需的相依套件。
 
 `<template>` 包含所有的標記結構以及元件的呈現邏輯。你的模板可以包含任何有效的 HTML，以及一些我們接下來要介紹的 Vue 特定的語法。
 
-> **備註：** 在 `<template>` 標籤上設定 `lang` 屬性。例如設置 `<template lang="pug">`，你就可以使用 Pug 樣板語法來取代標準的 HTML 。在本教學中我們會使用標準 HTML ，但還是值得知道有這個方法。
+> [!NOTE]
+> 在 `<template>` 標籤上設定 `lang` 屬性。例如設置 `<template lang="pug">`，你就可以使用 Pug 樣板語法來取代標準的 HTML 。在本教學中我們會使用標準 HTML ，但還是值得知道有這個方法。
 
 `<script>` 包含元件中所有非顯示的邏輯。最重要的是，你的 `<script>` 標籤必須輸出一個 JS 物件。這個物件是你在本地端註冊的元件，包含定義屬性、處理本地狀態、定義方法等等。在建置步驟這個物件會被處理及轉換（包含 template 模板），變成一個有 `render()` 函數的 Vue 元件。
 
@@ -167,11 +172,13 @@ export default {
 };
 ```
 
-> **備註：** 如果你想要使用 [TypeScript](https://www.typescriptlang.org/) 語法，你必須把 `<script>` 標籤的 `lang` 屬性設定成 `<script lang="ts">` 來告訴編譯器你要使用 TypeScript 。
+> [!NOTE]
+> 如果你想要使用 [TypeScript](https://www.typescriptlang.org/) 語法，你必須把 `<script>` 標籤的 `lang` 屬性設定成 `<script lang="ts">` 來告訴編譯器你要使用 TypeScript 。
 
 `<style>` 是你撰寫元件的 CSS 的地方。如果你加上 `scoped` 屬性，例如 `<style scoped>` ， Vue 會把樣式的範圍限制在這個單一檔案元件裡。這類似 CSS-in-JS 的解決方案，但是它允許你寫單純的 CSS 。
 
-> **備註：** 如果你在使用 CLI 創建專案時有選擇 CSS 預處理器，你可以在 `<style>` 標籤上添加 `lang` 屬性，這些內容在建置的時候將會被 Webpack 處理。舉例來說， `<style lang="scss">` 允許你在樣式資訊中使用 SCSS 語法。
+> [!NOTE]
+> 如果你在使用 CLI 創建專案時有選擇 CSS 預處理器，你可以在 `<style>` 標籤上添加 `lang` 屬性，這些內容在建置的時候將會被 Webpack 處理。舉例來說， `<style lang="scss">` 允許你在樣式資訊中使用 SCSS 語法。
 
 ## 在本地端運行應用程式
 
diff --git a/files/zh-tw/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md b/files/zh-tw/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
index b4a0e1ca0456df..0da6dd23d6a306 100644
--- a/files/zh-tw/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
+++ b/files/zh-tw/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
@@ -42,7 +42,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
 
 我們會在下一篇文章，專注於如何設定基於 Selenium 的個人測試系統。這篇文章則會專注於如何設定任務執行器，並簡單與系統化地，使用前述的商業系統。
 
-> **備註：** 這兩件事情並不互斥。我們可以用任務執行器來訪問服務。例如，你可以用 Sauce Labs 的 API 來跑跨瀏覽器測試，並顯示結果。我們會在下面解釋這件事。
+> [!NOTE]
+> 這兩件事情並不互斥。我們可以用任務執行器來訪問服務。例如，你可以用 Sauce Labs 的 API 來跑跨瀏覽器測試，並顯示結果。我們會在下面解釋這件事。
 
 ## 使用任務執行器以自動化測試工具
 
@@ -67,7 +68,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
    npm install npm@latest -g
    ```
 
-> **備註：** 如果因為權限問題而失敗，[Fixing npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) 應該對你有所幫助。
+> [!NOTE]
+> 如果因為權限問題而失敗，[Fixing npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) 應該對你有所幫助。
 
 要在專案裡面使用 node/npm 套件，你需要把專案所在目錄設為 npm 專案。它很簡單。
 
@@ -297,7 +299,8 @@ gulp.task("watch", function () {
 
 > **備註：** `*` 是通配字符（wildcard character）－－這裡的意思是「當任何檔案被儲存的時候，執行這些任務」。你也可以在主要任務內使用通配，例如 `gulp.src('src/*.css')` 會抓取所有的 CSS 檔案並執行 piped task。
 
-> **備註：** 在我們的 watch 指令有個問題，那就是我們的 CSSLint/Autoprefixer combination throws full-blown errors when a CSS error is encountered, which stops the watch working. You'll have to restart the watch once a CSS error is encountered, or find another way to do this.
+> [!NOTE]
+> 在我們的 watch 指令有個問題，那就是我們的 CSSLint/Autoprefixer combination throws full-blown errors when a CSS error is encountered, which stops the watch working. You'll have to restart the watch once a CSS error is encountered, or find another way to do this.
 
 你還可以用 Gulp 做很多事情。[Gulp plugin directory](http://gulpjs.com/plugins/) 收錄了近千個可搜尋的套件。
 
@@ -341,7 +344,8 @@ You can then step up a gear, using an API to access functionality programmatical
 
 Once you stop the session, you'll return to the Manual Tests tab, where you'll see an entry for each of the previous manual sessions you started. Clicking on one of these entries shows more data for the session. In here you can for example download any screenshots you took, watch a video of the session, and view data logs for the session.
 
-> **備註：** This is already very useful, and way more convenient than having to set all these emulators and virtual machines by yourself.
+> [!NOTE]
+> This is already very useful, and way more convenient than having to set all these emulators and virtual machines by yourself.
 
 ### 進階：The Sauce Labs API
 
diff --git a/files/zh-tw/learn/tools_and_testing/github/index.md b/files/zh-tw/learn/tools_and_testing/github/index.md
index 5bdc30d09d6dac..40f6e6af613cb9 100644
--- a/files/zh-tw/learn/tools_and_testing/github/index.md
+++ b/files/zh-tw/learn/tools_and_testing/github/index.md
@@ -18,9 +18,10 @@ slug: Learn/Tools_and_testing/GitHub
 
 版本控制系統提供了能夠滿足以上需求的工具。 [Git](https://git-scm.com/) 是版本控制系統的範例，而[GitHub](https://github.com/)是一個為個人或團隊操作 Git 儲存庫( Git Repositories) 提供了 Git 伺服器和一系列非常實用的工具的網站+基礎設施。它提供了回報程式碼錯誤、檢查工具以及分配任務和任務狀態等項目管理工具等等。
 
-> **備註：** Git 實際上是一個*分散式*版本控制系統，這意味著包含程式碼庫的儲存庫的完整副本是在你的電腦上（以及其他所有人）上創建的。 你可以對自己的副本進行更改，然後將這些更改推送回伺服器，管理員將決定是否將你的更改與主副本合併到主幹上。
+> [!NOTE]
+> Git 實際上是一個*分散式*版本控制系統，這意味著包含程式碼庫的儲存庫的完整副本是在你的電腦上（以及其他所有人）上創建的。 你可以對自己的副本進行更改，然後將這些更改推送回伺服器，管理員將決定是否將你的更改與主副本合併到主幹上。
 
-> **標註：**
+> [!CALLOUT]
 >
 > **嘗試成為一位前端網頁程式開發者?**
 >
@@ -40,7 +41,8 @@ slug: Learn/Tools_and_testing/GitHub
 
 最好還具有一些基本的終端機知識，例如在目錄之間移動，創立文件以及修改系統的 `PATH`。
 
-> **備註：** Github 不是唯一網站/工具集讓你使用 Git。 你可以嘗試其它替代方法，例如 [GitLab](https://about.gitlab.com/)，也可以嘗試設置自己的 Git 伺服器並使用它來取代 GitHub。在本章節中，我們僅停留在 GitHub 使用教學上。
+> [!NOTE]
+> Github 不是唯一網站/工具集讓你使用 Git。 你可以嘗試其它替代方法，例如 [GitLab](https://about.gitlab.com/)，也可以嘗試設置自己的 Git 伺服器並使用它來取代 GitHub。在本章節中，我們僅停留在 GitHub 使用教學上。
 
 ## 其它指南
 
@@ -57,7 +59,8 @@ slug: Learn/Tools_and_testing/GitHub
 - [掌握問題（來自 GitHub）](https://guides.github.com/features/issues/)
   - : 問題就像是 GitHub 項目的論壇，人們可以在其中提出問題和報告問題，還可以管理更新（例如，分配人員來解決問題，澄清問題，讓人們知道問題已解決）。本文將提供你有關問題的必備知識。
 
-> **備註：** 你還可以用 Git 跟 GitHub 來完成更多的事情，但我們認為，如果你想要有效地使用 Git，上面的這些知識是至少應該具備的。當你更深入地了解 Git 時，你將會意識到，當你開始使用更加複雜的指令時會更容易出錯。但不要擔心，即使是專業的網路工程師有時都會感到困惑，並通過網路檢索或[Flight rules for Git](https://github.com/k88hudson/git-flight-rules)和 [Dangit, git!](https://dangitgit.com/) 這樣的網站來尋找答案。
+> [!NOTE]
+> 你還可以用 Git 跟 GitHub 來完成更多的事情，但我們認為，如果你想要有效地使用 Git，上面的這些知識是至少應該具備的。當你更深入地了解 Git 時，你將會意識到，當你開始使用更加複雜的指令時會更容易出錯。但不要擔心，即使是專業的網路工程師有時都會感到困惑，並通過網路檢索或[Flight rules for Git](https://github.com/k88hudson/git-flight-rules)和 [Dangit, git!](https://dangitgit.com/) 這樣的網站來尋找答案。
 
 ## 也可以參考以下
 
diff --git a/files/zh-tw/learn/tools_and_testing/index.md b/files/zh-tw/learn/tools_and_testing/index.md
index 39208565a8db5e..cb244e1324f983 100644
--- a/files/zh-tw/learn/tools_and_testing/index.md
+++ b/files/zh-tw/learn/tools_and_testing/index.md
@@ -11,7 +11,8 @@ slug: Learn/Tools_and_testing
 
 決定該用什麼工具可能是個困難的過程，因此我們寫了這幾篇文章，來告訴你可以使用什麼樣的工具、它們能為你做什麼，以及如何針對產業的偏好利用之。
 
-> **備註：** 因為隨時都會有新工具問世、舊工具退出，我們刻意把內容寫得盡可能中立：我們希望先關注這些工具所能完成，最重要的一般類型的任務，並最小化特定工具。很明顯，我們要示範工具使用，以展示具體技術，但請注意我們不一定推薦這些工具為最佳或唯一辦法：大多數情況下其實有其他方法，但我們希望為你提供一個清晰的工作方法論。
+> [!NOTE]
+> 因為隨時都會有新工具問世、舊工具退出，我們刻意把內容寫得盡可能中立：我們希望先關注這些工具所能完成，最重要的一般類型的任務，並最小化特定工具。很明顯，我們要示範工具使用，以展示具體技術，但請注意我們不一定推薦這些工具為最佳或唯一辦法：大多數情況下其實有其他方法，但我們希望為你提供一個清晰的工作方法論。
 
 ## 學習途徑
 
diff --git a/files/zh-tw/webassembly/c_to_wasm/index.md b/files/zh-tw/webassembly/c_to_wasm/index.md
index c9d80d8a5b9901..a1832fd0835a02 100644
--- a/files/zh-tw/webassembly/c_to_wasm/index.md
+++ b/files/zh-tw/webassembly/c_to_wasm/index.md
@@ -59,7 +59,8 @@ slug: WebAssembly/C_to_Wasm
 
 現在只要使用一個支援 WebAssembly 的瀏覽器，加載產生的 `hello.html` 即可。自從 Firefox 52、Chrome 57、Edge 57 和 Opera 44 開始，已經預設啟用了 WebAssembly。
 
-> **備註：** 如果你試圖直接從本機硬碟打開產生的 HTML 檔案（`hello.html`）（例如 `file://your_path/hello.html`），你會得到一個錯誤訊息，_`both async and sync fetching of the wasm failed`_。你需要藉由 HTTP 伺服器（`http://`）來執行你的 HTML 檔案——參見[如何設定本機測試伺服器？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)來取得更多資訊。
+> [!NOTE]
+> 如果你試圖直接從本機硬碟打開產生的 HTML 檔案（`hello.html`）（例如 `file://your_path/hello.html`），你會得到一個錯誤訊息，_`both async and sync fetching of the wasm failed`_。你需要藉由 HTTP 伺服器（`http://`）來執行你的 HTML 檔案——參見[如何設定本機測試伺服器？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)來取得更多資訊。
 
 如果一切順利，你應該可以在網頁上的 Emscripten 控制台和瀏覽器的 JavaScript 控制台中看到「Hello World」的輸出。
 
@@ -96,7 +97,8 @@ slug: WebAssembly/C_to_Wasm
 
 4. 下面讓我們來運行這個例子。上面的指令已經產生了 `hello2.html`，內容和我們使用的模板非常相像，只不過多加了一些 JavaScript 膠水程式碼和加載 Wasm 程式的程式碼。在瀏覽器中打開它，你會看到與上一個範例相同的輸出。
 
-> **備註：** 你可以在 `-o` 選項中指定 .js 檔案而不是 HTML 檔案，例如 `emcc -o hello2.js hello2.c -O3`，從而只輸出 JavaScript 膠水程式碼，而不是完整的 HTML 檔案。這樣，你就可以完全從頭開始建立自訂 HTML，儘管這是一種進階用法；使用提供的 HTML 模板通常會更簡單。
+> [!NOTE]
+> 你可以在 `-o` 選項中指定 .js 檔案而不是 HTML 檔案，例如 `emcc -o hello2.js hello2.c -O3`，從而只輸出 JavaScript 膠水程式碼，而不是完整的 HTML 檔案。這樣，你就可以完全從頭開始建立自訂 HTML，儘管這是一種進階用法；使用提供的 HTML 模板通常會更簡單。
 >
 > - Emscripten 需要大量的 JavaScript 膠水程式碼來處理記憶體分配、記憶體洩漏等一系列問題
 
@@ -130,7 +132,8 @@ slug: WebAssembly/C_to_Wasm
 
    預設情況下，Emscripten 生成的程式只會調用 `main()` 函式，其他的函式將被無視。在函式名稱之前添加 `EMSCRIPTEN_KEEPALIVE` 能夠防止這樣的事情發生。你需要導入 `emscripten.h` 來使用 `EMSCRIPTEN_KEEPALIVE`。
 
-   > **備註：** 我們使用了 `#ifdef`，來使得你在引用這段 C++ 程式時，這個範例一樣會運作。由於 C 與 C++ 中名字修飾規則的差異，這有可能發生問題，但目前我們這樣設定能保證你使用 C++ 時，這些代碼會被視為外部 C 語言函式。
+   > [!NOTE]
+   > 我們使用了 `#ifdef`，來使得你在引用這段 C++ 程式時，這個範例一樣會運作。由於 C 與 C++ 中名字修飾規則的差異，這有可能發生問題，但目前我們這樣設定能保證你使用 C++ 時，這些代碼會被視為外部 C 語言函式。
 
 2. 為了方便起見，現在將 `html_template/shell_minimal.html` 也添加到這一資料夾（但在實際開發環境中你肯定需要將其放到某一特定位置）。
 
diff --git a/files/zh-tw/webassembly/concepts/index.md b/files/zh-tw/webassembly/concepts/index.md
index b3a98239f77fe8..d31eb35de8fca9 100644
--- a/files/zh-tw/webassembly/concepts/index.md
+++ b/files/zh-tw/webassembly/concepts/index.md
@@ -24,7 +24,8 @@ WebAssembly 是在 [W3C WebAssembly Community Group](https://www.w3.org/communit
 - 具備安全性。WebAssembly 是被規範跑在一個安全的沙盒執行換進。像是其他的 Web 程式碼，他會被强制要求遵守瀏覽器的同源政策與權限政策。
 - 不會破壞 Web 既有架構。WebAssembly 是設計來與其他 Web 技術良好共存的，并且支援以前。
 
-> **備註：** WebAssembly 也有除去 Web 與 JavaScript 的用途（參見 [Non-web embedding](https://webassembly.org/docs/non-web/)）。
+> [!NOTE]
+> WebAssembly 也有除去 Web 與 JavaScript 的用途（參見 [Non-web embedding](https://webassembly.org/docs/non-web/)）。
 
 ## WebAssembly 如何融入既有 Web 平臺？
 
@@ -94,7 +95,8 @@ Emscripten 工具可以將任何 C、C++ 原始碼編譯成一個 Wasm 模組，
 2. Emscripten 將 clang+LLVM 編譯出來的結果轉換成 Wasm 二進制。
 3. 僅憑它自己，WebAssembly 沒有辦法直接訪問 DOM，它僅能呼叫 JavaScript，傳入整數和浮點數的原始資料形態。因此，要訪問任何的 Web API，它必須去呼叫 JavaScript，這會產生一個 Web API 呼叫。Emscripten 因此創造一個 HTML 文件與 JavaScript 膠水程式碼來達成這件事。
 
-> **備註：** 未來有計劃[讓 WebAssembly 直接呼叫 WebAPI](https://github.com/WebAssembly/gc/blob/master/README.md)。
+> [!NOTE]
+> 未來有計劃[讓 WebAssembly 直接呼叫 WebAPI](https://github.com/WebAssembly/gc/blob/master/README.md)。
 
 這個 JavaScript 膠水程式碼可能并不像你想像的那麽簡單。Emscripten 首先需要去實作熱門的 C、C++ 函式庫像是 [SDL](https://zh.wikipedia.org/wiki/SDL)、[OpenGL](https://zh.wikipedia.org/wiki/OpenGL)、[OpenAL](https://zh.wikipedia.org/wiki/OpenAL)，以及一部分的 [POSIX](https://zh.wikipedia.org/wiki/POSIX)。這些函式庫被以 Web API 的形式實作，且因此每個都需要一些 JavaScript 膠水程式碼來連接 WebAssembly 與底層的 Web API。
 
diff --git a/package.json b/package.json
index 229d25a89752b8..7dc2015db0be03 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "cld": "^2.9.1",
     "fdir": "^6.2.0",
     "front-matter": "^4.0.2",
-    "husky": "9.1.1",
+    "husky": "9.1.2",
     "lint-staged": "15.2.7",
     "markdown-it": "^14.1.0",
     "markdownlint-cli2": "0.13.0",
diff --git a/yarn.lock b/yarn.lock
index 2375b5e3517e0a..cb3411b58af416 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -411,10 +411,10 @@ human-signals@^5.0.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
   integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
 
-husky@9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.1.tgz#73f8f1b58329f377654293148c1a6458f54ca224"
-  integrity sha512-fCqlqLXcBnXa/TJXmT93/A36tJsjdJkibQ1MuIiFyCCYUlpYpIaj2mv1w+3KR6Rzu1IC3slFTje5f6DUp2A2rg==
+husky@9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.2.tgz#ddaf290384c7adab4fd3143571c73d05b19f42ee"
+  integrity sha512-1/aDMXZdhr1VdJJTLt6e7BipM0Jd9qkpubPiIplon1WmCeOy3nnzsCMeBqS9AsL5ioonl8F8y/F2CLOmk19/Pw==
 
 ignore@^5.2.4:
   version "5.2.4"