diff --git a/files/es/mdn/community/contributing/translated_content/index.md b/files/es/mdn/community/contributing/translated_content/index.md
index ecbaaa761117a7..c36f74a2a6779e 100644
--- a/files/es/mdn/community/contributing/translated_content/index.md
+++ b/files/es/mdn/community/contributing/translated_content/index.md
@@ -47,7 +47,7 @@ Hemos _congelado_ todo el contenido localizado (lo que significa que no aceptare
 
 ### Español (es)
 
-- Discusiones: [Matrix (canal #mdn-l10n-es)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (canal MDN l10n ES)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (MDN Web Docs Community ,canal #spanish)](https://discord.gg/aZqEtMrbr7)
+- Discusiones: [Matrix (canal #mdn-l10n-es)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (canal MDN l10n ES)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (MDN Web Docs Community ,canal #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)
diff --git a/files/es/web/api/attr/index.md b/files/es/web/api/attr/index.md
index 912be4f7d79d0e..4514cdb99669e4 100644
--- a/files/es/web/api/attr/index.md
+++ b/files/es/web/api/attr/index.md
@@ -91,8 +91,6 @@ Los siguientes metodos ahora son obsoletos.
   - : Estra propiedad ahora devuelve `false`.
 - `insertBefore()`
   - : Modify the value of {{domxref("Attr.value")}} instead.
-- `isSupported()`
-  - : Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
 - `isEqualNode()`
   - : Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
 - `normalize()`
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt
index 03e333056633ef..8d64db82e4e7ee 100644
--- a/files/fr/_redirects.txt
+++ b/files/fr/_redirects.txt
@@ -6572,7 +6572,6 @@
 /fr/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox	/fr/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox
 /fr/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox	/fr/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox
 /fr/docs/conflicting/Web/CSS/CSS_Fonts	/fr/docs/Web/CSS/CSS_fonts
-/fr/docs/conflicting/Web/CSS/CSS_Fonts_25d4b407d3e5044aeffb97faa9669a95	/fr/docs/Web/CSS/CSS_fonts
 /fr/docs/conflicting/Web/CSS/CSS_Scroll_Snap	/fr/docs/Web/CSS/CSS_scroll_snap
 /fr/docs/conflicting/Web/CSS/CSS_paged_media	/fr/docs/Web/CSS/CSS_paged_media
 /fr/docs/conflicting/Web/CSS/Filter_Effects	/fr/docs/Web/CSS/CSS_filter_effects
diff --git a/files/fr/glossary/dsl/digital_subscriber_line/index.md b/files/fr/glossary/dsl/digital_subscriber_line/index.md
new file mode 100644
index 00000000000000..be38b09b1eceb5
--- /dev/null
+++ b/files/fr/glossary/dsl/digital_subscriber_line/index.md
@@ -0,0 +1,18 @@
+---
+title: DSL (Digital Subscriber Line)
+slug: Glossary/DSL/Digital_subscriber_line
+l10n:
+  sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1
+---
+
+{{GlossarySidebar}}
+
+**DSL** pour <i lang="en">Digital Subscriber Line</i>, qu'on peut traduire en «&nbsp;ligne numérique d'abonné·e&nbsp;» est un type de connexion haut débit à Internet qui permet d'envoyer des données sur un transport filaire en utilisant les lignes téléphoniques.
+
+Les vitesses de téléchargement (<i lang="en">download</i>) et de téléversement (<i lang="en">upload</i>) ne sont pas nécessairement les mêmes avec une telle connexion. Dans ce cas, la ligne est qualifiée d'asymétrique et on utilise alors l'abréviation ADSL.
+
+On oppose généralement ce mode de connexion aux connexions par câble dédié, fibre optique ou utilisant une ligne commutée.
+
+## Voir aussi
+
+- [La page Wikipédia pour <i lang="en">Digital subscriber line</i>](https://fr.wikipedia.org/wiki/Digital_subscriber_line)
diff --git a/files/fr/glossary/dsl/domain_specific_language/index.md b/files/fr/glossary/dsl/domain_specific_language/index.md
new file mode 100644
index 00000000000000..e71c67eff1f59e
--- /dev/null
+++ b/files/fr/glossary/dsl/domain_specific_language/index.md
@@ -0,0 +1,17 @@
+---
+title: DSL (Domain-Specific Language)
+slug: Glossary/DSL/Domain_specific_language
+l10n:
+  sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1
+---
+
+{{GlossarySidebar}}
+
+**DSL** pour <i lang="en">Domain-Specific Language</i> (qu'on peut traduire en «&nbsp;langage dédié&nbsp;») est un type de langage informatique conçu pour résoudre un problème dans un domaine d'application donné.
+
+Les langages dédiés sont opposés aux langages généralistes (<i lang="en">general-purpose languages</i> ou (GPLs) en anglais), conçus pour traiter différents problèmes quel que soit le domaine concerné.
+
+## Voir aussi
+
+- [La page Wikipédia pour les langages dédiés](https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9)
+- [Un guide sur les langages dédiés, écrit par Martin Fowler (en anglais)](https://martinfowler.com/dsl.html)
diff --git a/files/fr/glossary/dsl/index.md b/files/fr/glossary/dsl/index.md
new file mode 100644
index 00000000000000..270e8c657b2beb
--- /dev/null
+++ b/files/fr/glossary/dsl/index.md
@@ -0,0 +1,16 @@
+---
+title: DSL
+slug: Glossary/DSL
+l10n:
+  sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1
+---
+
+{{GlossarySidebar}}
+
+L'acronyme **DSL** peut avoir plusieurs significations selon le contexte. Il peut faire référence à&nbsp;:
+
+{{GlossaryDisambiguation}}
+
+## Voir aussi
+
+- [La page d'homonymie Wikipédia](https://fr.wikipedia.org/wiki/DSL)
diff --git a/files/fr/glossary/dtls/index.md b/files/fr/glossary/dtls/index.md
new file mode 100644
index 00000000000000..b38e323cca5a83
--- /dev/null
+++ b/files/fr/glossary/dtls/index.md
@@ -0,0 +1,31 @@
+---
+title: DTLS (Datagram Transport Layer Security)
+slug: Glossary/DTLS
+l10n:
+  sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1
+---
+
+{{GlossarySidebar}}
+
+**<i lang="en">Datagram Transport Layer Security</i>** (**DTLS**) (qu'on pourrait traduire en «&nbsp;sécurité de la couche transport en datagrammes&nbsp;») est un protocole utilisé afin de sécuriser les communications basées sur des datagrammes. Ce protocole est basé sur le protocole correspondant pour les flux, [TLS](/fr/docs/Glossary/TLS), et fournit un niveau équivalent de sécurité.
+
+DTLS étant un protocole de datagrammes, il ne garantit pas l'ordre de livraison des messages, ni même que les messages seront effectivement transmis. Toutefois, DTLS profite des avantages des protocoles de datagrammes et notamment de faibles temps de traitement et d'une latence réduite.
+
+Ces caractéristiques sont particulièrement utiles pour les domaines où DTLS est utilisé, dont [WebRTC](/fr/docs/Glossary/WebRTC). Tous les protocoles relatifs à WebRTC chiffrent leur contenu à l'aide de DTLS&nbsp;: [SCTP](/fr/docs/Glossary/SCTP), [SRTP](/fr/docs/Glossary/RTP), et [STUN](/fr/docs/Glossary/STUN).
+
+## Voir aussi
+
+- [La page Wikipédia sur DTLS](https://fr.wikipedia.org/wiki/Datagram_Transport_Layer_Security)
+- Les spécifications directes&nbsp;:
+
+  - [La RFC 9147 qui définit le protocole DTLS en version 1.3 (en anglais)](https://datatracker.ietf.org/doc/html/rfc9147)
+  - [La RFC 6347 qui définit le protocole DTLS en version 1.3 (en anglais)](https://datatracker.ietf.org/doc/html/rfc6347)
+
+- Les spécifications connexes&nbsp;:
+
+  - [La RFC 5763 dressant le cadre pour utiliser SRTP avec DTLS (en anglais)](https://datatracker.ietf.org/doc/html/rfc5763)
+  - [La RFC 5764 spécifiant une extension DTLS pour l'établissement des clés pour SRTP (en anglais)](https://datatracker.ietf.org/doc/html/rfc5764)
+  - [La RFC 6083 dressant le cadre pour utiliser SCTP avec DTLS (en anglais)](https://datatracker.ietf.org/doc/html/rfc6083)
+  - [La RFC 8261 spécifiant l'encapsulation des paquets SCTP avec DTLS (en anglais)](https://datatracker.ietf.org/doc/html/rfc8261)
+  - [La RFC 7350 spécifiant l'utilisation de STUN avec DTLS (en anglais)](https://datatracker.ietf.org/doc/html/rfc7350)
+  - [La RFC 7925 pour les profils TLS / DTLS pour l'Internet des objets (en anglais)](https://datatracker.ietf.org/doc/html/rfc7925)
diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 158221e5bdaf93..ba0af7f1c41270 100644
--- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -238,7 +238,7 @@ Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisati
 
 ### Problèmes de sécurité
 
-Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture&nbsp;; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ...
+Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaitement claire dès la première lecture&nbsp;; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ...
 
 Fabricants de navigateurs et développeurs Web ont appris à la dure que `<iframe>` constitue sur le Web une cible commune (terme officiel : un **vecteur d'attaque**) pour des personnes mal intentionnées. `<iframe>` est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre `<iframe>` plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.
 
diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md
index d16d55716fe9ae..6eb8f5bdad692c 100644
--- a/files/fr/web/api/attr/index.md
+++ b/files/fr/web/api/attr/index.md
@@ -91,8 +91,6 @@ Les méthodes suivantes ont été dépréciées:
   - : Cette méthode retourne désormais toujours false.
 - `insertBefore()`
   - : Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
-- `isSupported()`
-  - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
 - `isEqualNode()`
   - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
 - `normalize()`
diff --git a/files/fr/web/api/device_orientation_events/detecting_device_orientation/index.md b/files/fr/web/api/device_orientation_events/detecting_device_orientation/index.md
new file mode 100644
index 00000000000000..36c2ac95941dc7
--- /dev/null
+++ b/files/fr/web/api/device_orientation_events/detecting_device_orientation/index.md
@@ -0,0 +1,194 @@
+---
+title: Détecter l'orientation de l'appareil
+slug: Web/API/Device_orientation_events/Detecting_device_orientation
+l10n:
+  sourceCommit: c382856e4c804eafa789f8046b01b92fef5c0df2
+---
+
+{{DefaultAPISidebar("Device Orientation Events")}} {{securecontext_header}}
+
+Grâce à leurs capteurs, une bonne partie des appareils permettant de naviguer sur le Web peuvent déterminer leur **orientation**. Autrement dit, ils sont en mesure de fournir des données indiquant des changements relatifs à leur orientation par rapport à la pesanteur. Les appareils mobiles, notamment, utilisent ces informations pour tourner l'affichage afin qu'il reste dans le sens d'utilisation de l'appareil (en présentant par exemple une vue en paysage lorsque l'écran de l'appareil est tourné tel que sa largeur est supérieure à sa hauteur pour la personne qui le regarde).
+
+Deux évènements JavaScript permettent de gérer ces informations relatives à l'orientation.
+
+Le premier, [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent), est émis lorsque l'accéléromètre détecte un changement d'orientation de l'appareil. En interceptant et en traitant ces évènements, le site ou l'application peut répondre de façon interactive aux rotations et déplacements de l'appareil.
+
+Le deuxième évènement, [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent), est émis lorsque l'appareil détecte un changement d'accélération. Il diffère de [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent), car il correspond aux changements d'accélération et non d'orientation. Les capteurs permettant de collecter des données pour [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent) se trouvent généralement dans les ordinateurs portables. Les capteurs permettant d'avoir des informations pour les évènements [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent) sont plus communément trouvés dans les appareils mobiles.
+
+## Traiter les évènements d'orientation
+
+Pour recevoir les informations de changement d'orientation, il faut écouter l'évènement [`deviceorientation`](/fr/docs/Web/API/Window/deviceorientation_event)&nbsp;:
+
+```js
+window.addEventListener("deviceorientation", handleOrientation, true);
+```
+
+Après avoir enregistré un gestionnaire d'évènement (ici la fonction `handleOrientation()`), le gestionnaire d'évènement sera appelé périodiquement avec les données d'orientation à jour.
+
+L'évènement relatif à l'orientation portera quatre valeurs&nbsp;:
+
+- [`DeviceOrientationEvent.absolute`](/fr/docs/Web/API/DeviceOrientationEvent/absolute)
+- [`DeviceOrientationEvent.alpha`](/fr/docs/Web/API/DeviceOrientationEvent/alpha)
+- [`DeviceOrientationEvent.beta`](/fr/docs/Web/API/DeviceOrientationEvent/beta)
+- [`DeviceOrientationEvent.gamma`](/fr/docs/Web/API/DeviceOrientationEvent/gamma)
+
+Le gestionnaire d'évènement `handleOrientation()` pourrait ressembler à ceci&nbsp;:
+
+```js
+function handleOrientation(event) {
+  const absolute = event.absolute;
+  const alpha = event.alpha;
+  const beta = event.beta;
+  const gamma = event.gamma;
+
+  // Faire quelque chose avec les nouvelles
+  // données d'orientation
+}
+```
+
+> **Note :** La bibliothèque tierce [parallax.js](https://github.com/wagerfield/parallax) est une prothèse d'émulation (<i lang="en">polyfill</i>) pour normaliser les données de l'accéléromètre et du gyroscope pour les appareils mobiles. Elle peut s'avérer utile pour gommer certaines différences de prise en charge des appareils.
+
+### Explication des valeurs relatives à l'orientation
+
+La valeur fournie pour chaque axe indique la rotation autour d'un axe donné dans le système de coordonnées de l'appareil. Bien que ces notions soient abordées plus en détails dans l'article [Explication des données d'orientation et de mouvement](/fr/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained), voyons un rapide résumé ici.
+
+- [`DeviceOrientationEvent.alpha`](/fr/docs/Web/API/DeviceOrientationEvent/alpha) représente le déplacement de l'appareil autour de l'axe z, exprimé en degrés (de 0, inclus, à 360, exclus). Cela correspond à la rotation de l'appareil sur son plan (comme une toupie qu'on ferait tourner son axe).
+- [`DeviceOrientationEvent.beta`](/fr/docs/Web/API/DeviceOrientationEvent/beta) représente le déplacement de l'appareil autour de l'axe x, exprimé en degrés (de 0, inclus, à 360, exclus). Cela correspond à l'inclinaison de l'appareil d'avant en arrière.
+- [`DeviceOrientationEvent.gamma`](/fr/docs/Web/API/DeviceOrientationEvent/gamma) représente le déplacement de l'appareil autour de l'axe y, exprimé en degrés (de 0, inclus, à 360, exclus). Cela correspond à l'inclinaison de l'appareil de droite à gauche.
+
+### Exemple
+
+Cet exemple fonctionnera pour les navigateurs qui prennent en charge l'évènement [`deviceorientation`](/fr/docs/Web/API/Window/deviceorientation_event) et pour les appareils capables de détecteur leur orientation.
+
+Prenons une balle dans un jardin&nbsp;:
+
+```html
+<div class="garden">
+  <div class="ball"></div>
+</div>
+Tenez l'appareil parallèle au sol. Tournez-le sur les axes x et y pour voir la
+balle bouger de haut en bas et de gauche à droite.
+<pre class="output"></pre>
+```
+
+Soit un jardin large de 200 pixels, avec la balle en son centre&nbsp;:
+
+```css
+.garden {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border: 5px solid #ccc;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top: 90px;
+  left: 90px;
+  width: 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+```
+
+Si on déplace notre appareil, la balle se déplacera avec le mouvement correspondant&nbsp;:
+
+```js
+const ball = document.querySelector(".ball");
+const garden = document.querySelector(".garden");
+const output = document.querySelector(".output");
+
+const maxX = garden.clientWidth - ball.clientWidth;
+const maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  let x = event.beta; // Une valeur en degrés dans l'intervalle [-180,180[
+  let y = event.gamma; // Une valeur en degrés dans l'intervalle [-90,90[
+
+  output.textContent = `beta : ${x}\n`;
+  output.textContent += `gamma : ${y}\n`;
+
+  // On ne veut pas que l'appareil soit complètement tête en bas
+  // donc on contraint la valeur de x sur l'intervalle [-90,90]
+  if (x > 90) {
+    x = 90;
+  }
+  if (x < -90) {
+    x = -90;
+  }
+
+  // Pour faciliter les calculs, on décale x et y sur
+  // l'intervalle [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 correspond à la moitié de la taille de la balle
+  // cela permet de centrer le point de positionnement
+  // au centre de la balle
+  ball.style.left = `${(maxY * y) / 180 - 10}px`; // tourner l'appareil autour de l'axe y déplacera la balle horizontalement
+  ball.style.top = `${(maxX * x) / 180 - 10}px`; // tourner l'appareil autour de l'axe x déplacera la balle verticalement
+}
+
+window.addEventListener("deviceorientation", handleOrientation);
+```
+
+{{LiveSampleLink("Exemple", "Cliquez ici")}} pour ouvrir cet exemple dans une nouvelle fenêtre (en effet, [`deviceorientation`](/fr/docs/Web/API/Window/deviceorientation_event) ne fonctionne pas pour tous les navigateurs au sein d'une [`<iframe>`](/fr/docs/Web/HTML/Element/iframe) embarquant du contenu d'une autre origine).
+
+{{EmbedLiveSample('', '230', '260')}}
+
+## Traiter les évènements de mouvement
+
+Les évènements de mouvement se gèrent de façon analogue aux évènements d'orientation, bien entendu avec un nom différent&nbsp;: [`devicemotion`](/fr/docs/Web/API/Window/devicemotion_event)
+
+```js
+window.addEventListener("devicemotion", handleMotion, true);
+```
+
+De même, les informations contenues dans l'objet [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent) passé au gestionnaire d'évènement est différent. Un évènement de mouvement contiendra quatre propriétés&nbsp;:
+
+- [`DeviceMotionEvent.acceleration`](/fr/docs/Web/API/DeviceMotionEvent/acceleration)
+- [`DeviceMotionEvent.accelerationIncludingGravity`](/fr/docs/Web/API/DeviceMotionEvent/accelerationIncludingGravity)
+- [`DeviceMotionEvent.rotationRate`](/fr/docs/Web/API/DeviceMotionEvent/rotationRate)
+- [`DeviceMotionEvent.interval`](/fr/docs/Web/API/DeviceMotionEvent/interval)
+
+### Explication des valeurs relatives au mouvement
+
+Les objets [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent) fournissent des informations sur la vitesse de changement de position et d'orientation de l'appareil. Les changements sont fournis sur les trois axes (voir l'article [Explication des données d'orientation et de mouvement](/fr/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) pour plus de détails).
+
+Pour [`DeviceMotionEvent.acceleration`](/fr/docs/Web/API/DeviceMotionEvent/acceleration) et [`DeviceMotionEvent.accelerationIncludingGravity`](/fr/docs/Web/API/DeviceMotionEvent/accelerationIncludingGravity), ces axes se décrivent ainsi&nbsp;:
+
+- `x`
+  - : Représente l'axe allant d'ouest en est.
+- `y`
+  - : Représente l'axe allant du sud au nord.
+- `z`
+  - : Représente l'axe perpendiculaire au sol.
+
+Pour [`DeviceMotionEvent.rotationRate`](/fr/docs/Web/API/DeviceMotionEvent/rotationRate), ce sont des angles plutôt que des axes qui sont utilisés&nbsp;:
+
+- `alpha`
+  - : Représente une vitesse de rotation autour de l'axe perpendiculaire à l'écran (ou au clavier pour les appareils de bureau).
+- `beta`
+  - : Représente une vitesse de rotation autour de l'axe allant de gauche à droite de l'écran (ou du clavier pour les appareils de bureau).
+- `gamma`
+  - : Représente une vitesse de rotation autour de l'axe allant du bas vers le haut de l'écran (ou du clavier pour les appareils de bureau).
+
+Enfin, [`DeviceMotionEvent.interval`](/fr/docs/Web/API/DeviceMotionEvent/interval) représente l'intervalle de temps, exprimé en millisecondes, utilisé pour fournir les données de l'appareil.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent)
+- [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent)
+- [Explication des données d'orientation et de mouvement](/fr/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained)
+- [Utiliser l'orientation de l'appareil pour les transformations 3D](/fr/docs/Web/API/Device_orientation_events/Using_device_orientation_with_3D_transforms)
+- [Cyber Orb&nbsp;: un jeu de labyrinthe 2D utilisant l'orientation de l'appareil](/fr/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation)
diff --git a/files/fr/web/api/device_orientation_events/index.md b/files/fr/web/api/device_orientation_events/index.md
new file mode 100644
index 00000000000000..584d7047595288
--- /dev/null
+++ b/files/fr/web/api/device_orientation_events/index.md
@@ -0,0 +1,58 @@
+---
+title: Évènements relatifs à l'orientation de l'appareil
+slug: Web/API/Device_orientation_events
+l10n:
+  sourceCommit: c382856e4c804eafa789f8046b01b92fef5c0df2
+---
+
+{{DefaultAPISidebar("Device Orientation Events")}}
+
+Les évènements relatifs à l'orientation de l'appareil permettent de [détecter l'orientation physique d'un appareil](/fr/docs/Web/API/Device_orientation_events/Detecting_device_orientation#traiter_les_évènements_dorientation), et [le mouvement de l'appareil](/fr/docs/Web/API/Device_orientation_events/Detecting_device_orientation#traiter_les_évènements_de_mouvement).
+
+## Concepts et utilisation
+
+Les appareils mobiles disposent généralement de capteurs comme des gyroscopes, des boussoles, et des accéléromètres qui permettent aux applications qui s'y exécutent de détecter l'orientation et le mouvement de l'appareil.
+
+L'API web sur les évènements relatifs à l'orientation de l'appareil permettent d'écrire des applications web dont le comportement peut être adapté à l'orientation de l'appareil et qui peuvent réagir au déplacement de l'appareil.
+
+Par exemple, on pourra gérer les évènements liés à l'orientation de l'appareil dans les scénarios suivants&nbsp;:
+
+- Pour les jeux, permettre de contrôler le déplacement de personnages ou d'objets en jeu en inclinant ou en déplaçant l'appareil.
+
+- Pour les applications cartographiques, permettre de réorienter la carte selon la position de l'appareil et fournir des indications de navigation mises à jour en fonction des déplacements.
+
+- Pour la reconnaissance de certains gestes. Par exemple, on pourra identifier que l'appareil est secoué et déclencher une action en conséquence, comme la réinitialisation d'un champ.
+
+> **Note :** Cette API est bien prise en charge par les navigateurs mobiles. Pour les navigateurs de bureaux, il pourra y avoir des limitations liées aux capacités matérielles de ces appareils. Toutefois, ces contraintes sont rarement un problème, car l'API repose principalement sur une utilisation avec des appareils dotés de capteurs adéquats.
+
+## Interfaces
+
+- [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent)
+  - : Représente les changements d'orientation physique de l'appareil.
+- [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent)
+  - : Représente les changements d'accélération de l'appareil, ainsi que la vitesse de rotation.
+- [`DeviceMotionEventAcceleration`](/fr/docs/Web/API/DeviceMotionEventAcceleration)
+  - : Représente l'accélération de l'appareil sur les trois axes.
+- [`DeviceMotionEventRotationRate`](/fr/docs/Web/API/DeviceMotionEventRotationRate)
+  - : Représente la vitesse de rotation de l'appareil sur les trois axes.
+
+## Évènements
+
+- [`deviceorientation`](/fr/docs/Web/API/Window/deviceorientation_event)
+  - : Déclenché lorsque de nouvelles données captées par l'appareil sont disponibles à propos de l'orientation de l'appareil dans le système de coordonnées terrestre.
+- [`devicemotion`](/fr/docs/Web/API/Window/devicemotion_event)
+  - : Déclenché à intervalle régulier pour indiquer l'accélération reçue par l'appareil à cet instant, ainsi que sa vitesse de rotation.
+- [`deviceorientationabsolute`](/fr/docs/Web/API/Window/deviceorientationabsolute_event)
+  - : Déclenché lorsque les informations relatives à l'orientation absolue changent.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Orientation et déplacement de l'appareil sur le site web.dev (en anglais)](https://web.dev/articles/device-orientation)
diff --git a/files/fr/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md b/files/fr/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
index 77e7868be65f66..af8a979af17a6e 100644
--- a/files/fr/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
+++ b/files/fr/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
@@ -1,6 +1,8 @@
 ---
 title: Explication des données d'orientation et de mouvement
 slug: Web/API/Device_orientation_events/Orientation_and_motion_data_explained
+l10n:
+  sourceCommit: c382856e4c804eafa789f8046b01b92fef5c0df2
 ---
 
 {{DefaultAPISidebar("Device Orientation Events")}}
@@ -23,13 +25,13 @@ Le système de coordonnées terrestre est un repère dont l'origine est fixée a
 
 Le système de coordonnées de l'appareil a son origine située au centre de l'appareil. On utilise les lettres minuscules («&nbsp;x&nbsp;», «&nbsp;y&nbsp;», et «&nbsp;z&nbsp;») pour décrire les axes de ce système.
 
-![](axes.png)
+![Un schéma représentant un appareil mobile et les trois axes du système de coordonnées de l'appareil.](axes.png)
 
 - L'axe **x** se situe sur le plan de l'écran et est positif vers la droite et négatif vers la gauche.
 - L'axe **y** se situe sur le plan de l'écran et est positif vers le haut et négatif vers le bas.
 - L'axe **z** est perpendiculaire à l'écran ou au clavier et va positivement lorsqu'on s'éloigne de l'écran.
 
-> **Note :** Sur un téléphone ou une tablette, l'orientation de l'appareil est toujours prise selon l'orientation standard de l'écran. Sur la plupart des appareils, il s'agit de l'orientation en portrait. Sur un ordinateur portable, l'orientation est relative au clavier. Si vous souhaitez détecter les changements d'orientation d'un appareil afin de les compenser, vous pouvez utiliser l'évènement `orientationchange`.
+> **Note :** Sur un téléphone ou une tablette, l'orientation de l'appareil est toujours prise selon l'orientation standard de l'écran. Sur la plupart des appareils, il s'agit de l'orientation en portrait. Sur un ordinateur portable, l'orientation est relative au clavier. Si vous souhaitez détecter les changements d'orientation d'un appareil afin de les compenser, vous pouvez utiliser l'évènement [`change`](/fr/docs/Web/API/ScreenOrientation/change_event).
 
 ## À propos de la rotation
 
@@ -39,7 +41,7 @@ Une rotation se décrit en nombre de degrés pour chaque axe en évaluant la dif
 
 La rotation autour de l'axe z consiste à faire tourner l'appareil sur son plan. Cette rotation modifie l'angle **alpha**&nbsp;:
 
-![](alpha.png)
+![Un angle alpha positif fait tourner l'appareil dans le sens contraire des aiguilles d'une montre](alpha.png)
 
 L'angle alpha vaut 0° lorsque le haut de l'appareil est orienté vers le pôle Nord. Cet angle augmente lorsque l'appareil est tourné vers la gauche.
 
@@ -55,6 +57,6 @@ L'angle bêta vaut 0° lorsque le haut et le bas de l'appareil sont à la même
 
 La rotation autour de l'axe y consiste à pencher l'appareil vers la gauche ou la droite. Cette rotation modifie l'angle **gamma**&nbsp;:
 
-![](gamma.png)
+![Un angle gamma positif correspond à une inclinaison de l'appareil vers la droite.](gamma.png)
 
 L'angle gamma vaut 0° lorsque les côtés gauche et droit de l'appareil sont à la même distance de la surface terrestre. Il augmente vers 90° lorsque l'appareil est penché vers la droite et vers -90° lorsqu'il est penché vers la gauche.
diff --git a/files/fr/web/api/device_orientation_events/using_device_orientation_with_3d_transforms/index.md b/files/fr/web/api/device_orientation_events/using_device_orientation_with_3d_transforms/index.md
new file mode 100644
index 00000000000000..6aea29b86f358a
--- /dev/null
+++ b/files/fr/web/api/device_orientation_events/using_device_orientation_with_3d_transforms/index.md
@@ -0,0 +1,84 @@
+---
+title: Utiliser l'orientation de l'appareil avec les transformations 3D
+slug: Web/API/Device_orientation_events/Using_device_orientation_with_3D_transforms
+l10n:
+  sourceCommit: c382856e4c804eafa789f8046b01b92fef5c0df2
+---
+
+{{DefaultAPISidebar("Device Orientation Events")}}
+
+Cet article fournit des conseils sur l'utilisation des informations d'orientation d'un appareil avec les transformations 3D CSS.
+
+## Utiliser l'orientation pour tourner un élément
+
+La façon la plus directe de passer [des données d'orientation](/fr/docs/Web/API/Window/deviceorientation_event) à [une transformation 3D](/fr/docs/Web/CSS/transform) consiste à utiliser respectivement les valeurs `alpha`, `gamma`, et `beta` pour `rotateZ`, `rotateX` et `rotateY`.
+
+Il faut toutefois garder à l'esprit que [le système de coordonnées pour les informations d'orientation de l'appareil](/fr/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) est différent du [système de coordonnées CSS](/fr/docs/Web/CSS/CSSOM_view/Coordinate_systems). Le premier système suit [la règle de la main droite](https://fr.wikipedia.org/wiki/R%C3%A8gle_de_la_main_droite) et l'axe Y va croissant vers le haut, alors que le second système suit [la règle de la main gauche](https://fr.wikipedia.org/wiki/R%C3%A8gle_de_la_main_gauche) et l'axe Y va croissant vers le bas. De plus, les rotations d'orientation de l'appareil devraient toujours être appliquées selon l'ordre Z - X' - Y''. Cet ordre ne correspond pas à certaines [transformations CSS](/fr/docs/Web/CSS/CSS_transforms). Ces différences ont des conséquences pratiques&nbsp;:
+
+- L'ordre des rotations importe&nbsp;: il faut s'assurer que les rotations alpha, beta et gamma sont appliquées dans cet ordre.
+- La transformation CSS [`rotate3d()`](/fr/docs/Web/CSS/transform-function/rotate3d) et les fonctions [DOMMatrixReadOnly.rotate()](/fr/docs/Web/API/DOMMatrixReadOnly/rotate) et [DOMMatrix.rotateSelf()](/fr/docs/Web/API/DOMMatrix/rotateSelf) appliquent les rotations dans l'ordre Z - Y' - X'' (et non Z - X' - Y''). Il n'est donc pas possible d'appliquer les rotations alpha, beta et gamma dans le bon ordre en utilisant un seul appel. Il faut appliquer chaque rotation individuellement, dans le bon ordre.
+- Étant donné les différences de systèmes de coordonnées mentionnées avant, les rotations alpha et beta doivent être inversées (celles autour des axes Z et X), car elles pointent dans des directions opposées, et il faut garder l'angle gamma (celui autour de l'axe Y) tel quel.
+
+  Voici un fragment de code qui résume cela&nbsp;:
+
+  ```js
+  const elem = document.getElementById("view3d");
+
+  window.addEventListener("deviceorientation", (e) => {
+    elem.style.transform = `rotateZ(${-e.alpha}deg) rotateX(${-e.beta}deg) rotateY(${
+      e.gamma
+    }deg)`;
+  });
+  ```
+
+## Passer d'angles pour `rotate3d()` à ceux pour `deviceorientation`
+
+Si vous avez besoin de convertir des angles selon les axes utilisés par `rotate3d()` en [angles d'Euler](https://fr.wikipedia.org/wiki/Angles_d%27Euler), utilisés par `deviceorientation`, vous pouvez utiliser la fonction suivante&nbsp;:
+
+```js
+// On convertit un angle rotate3d() en angle deviceorientation
+function orient(aa) {
+  const x = aa.x,
+    y = aa.y,
+    z = aa.z,
+    a = aa.a,
+    c = Math.cos(aa.a),
+    s = Math.sin(aa.a),
+    t = 1 - c,
+    // Matrice de rotation axes-angles
+    rm00 = c + x * x * t,
+    rm10 = z * s + y * x * t,
+    rm20 = -y * s + z * x * t,
+    rm01 = -z * s + x * y * t,
+    rm11 = c + y * y * t,
+    rm21 = x * s + z * y * t,
+    rm02 = y * s + x * z * t,
+    rm12 = -x * s + y * z * t,
+    rm22 = c + z * z * t,
+    TO_DEG = 180 / Math.PI,
+    ea = [],
+    n = Math.hypot(rm22, rm20);
+
+  // Matrice de rotation vers les angles d'Euler
+  ea[1] = Math.atan2(-rm21, n);
+
+  if (n > 0.001) {
+    ea[0] = Math.atan2(rm01, rm11);
+    ea[2] = Math.atan2(rm20, rm22);
+  } else {
+    ea[0] = 0;
+    ea[2] = (rm21 > 0 ? 1 : -1) * Math.atan2(-rm10, rm00);
+  }
+
+  return {
+    alpha: -ea[0] * TO_DEG - 180,
+    beta: -ea[1] * TO_DEG,
+    gamma: ea[2] * TO_DEG,
+  };
+}
+```
+
+## Voir aussi
+
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)
+- [Détecter l'orientation de l'appareil](/fr/docs/Web/API/Device_orientation_events/Detecting_device_orientation)
diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md
index bd60d9e9ffa7f7..a7a91440baebcb 100644
--- a/files/fr/web/api/document_object_model/index.md
+++ b/files/fr/web/api/document_object_model/index.md
@@ -174,7 +174,6 @@ Un objet `HTMLDocument` donne également accès à différentes fonctionnalités
 
 ### Interfaces HTML obsolètes
 
-- {{domxref("HTMLBaseFontElement")}}
 - {{domxref("HTMLIsIndexElement")}}
 
 ## Interfaces SVG
diff --git a/files/fr/web/api/node/index.md b/files/fr/web/api/node/index.md
index 6e1c825d8986f8..811b308bc0ade2 100644
--- a/files/fr/web/api/node/index.md
+++ b/files/fr/web/api/node/index.md
@@ -129,8 +129,6 @@ _Hérite des méthodes de son parent {{domxref("EventTarget")}}_.
   - : Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (_donnée utilisateur_) à partir du nœud.
 - {{domxref("Node.hasAttributes()")}} {{deprecated_inline}}
   - : Retourne un {{jsxref("Boolean")}} indiquant si l'élément possède des attributs ou non.
-- {{domxref("Node.isSupported()")}} {{deprecated_inline}}
-  - : Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique.
 - {{domxref("Node.setUserData()")}} {{deprecated_inline}}
   - : Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud.
 
diff --git a/files/ja/glossary/abstraction/index.md b/files/ja/glossary/abstraction/index.md
index 5b597c46727f3c..f1ff72812269c4 100644
--- a/files/ja/glossary/abstraction/index.md
+++ b/files/ja/glossary/abstraction/index.md
@@ -3,6 +3,8 @@ title: Abstraction (抽象化)
 slug: Glossary/Abstraction
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("Computer_Programming", "コンピュータープログラミング")}}における抽象化とは、複雑なソフトウェアシステムにおいて、複雑さを軽減し、また効率的な設計と実装を可能にする方法です。これはシステムの技術的な複雑さを、{{Glossary("API")}} の背後に隠します。
 
 ## データ抽象化の利点
diff --git a/files/ja/glossary/accent/index.md b/files/ja/glossary/accent/index.md
index 1094c9bbc5d2e5..c33890fb377ef4 100644
--- a/files/ja/glossary/accent/index.md
+++ b/files/ja/glossary/accent/index.md
@@ -3,6 +3,8 @@ title: accent (強調表示)
 slug: Glossary/Accent
 ---
 
+{{GlossarySidebar}}
+
 **強調表示** は主に明るい色によって、配色内でよりわかりやすく背景色と前景色を引き立たせます。これらは多くのプラットフォームの視覚スタイルに存在します (しかしながら、全てではありません) 。
 
 ウェブにおいて、強調表示は {{HTMLElement("input")}} 要素で操作の活性状態の部分に使われることがあります。例えばチェックした [checkbox](/ja/docs/Web/HTML/Element/input/checkbox) の背景です。
diff --git a/files/ja/glossary/accessibility/index.md b/files/ja/glossary/accessibility/index.md
index 7beffa0e51e63a..b04b0b4a285129 100644
--- a/files/ja/glossary/accessibility/index.md
+++ b/files/ja/glossary/accessibility/index.md
@@ -3,6 +3,8 @@ title: Accessibility (アクセシビリティ)
 slug: Glossary/Accessibility
 ---
 
+{{GlossarySidebar}}
+
 _Web アクセシビリティ_ (略語: **A11Y**、Accessibility の A から Y までの間に 11 文字が挟まれているため、このように略す) は、身体的および技術的な制約によらず、Web サイトを使いやすく保つためのベストプラクティスです。Web アクセシビリティは、{{Glossary("W3C")}} の {{Glossary("WAI","Web Accessibility Initiative")}} (略称: WAI) によって、標準化と議論がされています。
 
 ## 関連項目
diff --git a/files/ja/glossary/accessibility_tree/index.md b/files/ja/glossary/accessibility_tree/index.md
index 5b009af5faf5ab..edbf5828f8fd3e 100644
--- a/files/ja/glossary/accessibility_tree/index.md
+++ b/files/ja/glossary/accessibility_tree/index.md
@@ -3,6 +3,8 @@ title: Accessibility tree (アクセシビリティツリー)
 slug: Glossary/Accessibility_tree
 ---
 
+{{GlossarySidebar}}
+
 **アクセシビリティツリー**、または**アクセシビリティオブジェクトモデル** (**AOM**) は、多くの HTML 要素におけるアクセシビリティに関する情報を含んでいます。
 
 ブラウザーはマークアップを _[DOM ツリー](/ja/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree)_ と呼ばれる内部表現に変換します。 DOM ツリーはすべてのマークアップの要素、属性、テキストノードを含んでいます。ブラウザーはそれから、 DOM ツリーに基づいてアクセシビリティツリーを生成します。これは、読み上げソフトなどの支援技術のために、プラットフォームに特有のアクセシビリティ API から使用されます。
diff --git a/files/ja/glossary/adobe_flash/index.md b/files/ja/glossary/adobe_flash/index.md
index 13dc5d8b1c5711..bf46cb1b3b6e7c 100644
--- a/files/ja/glossary/adobe_flash/index.md
+++ b/files/ja/glossary/adobe_flash/index.md
@@ -3,6 +3,8 @@ title: Adobe Flash
 slug: Glossary/Adobe_Flash
 ---
 
+{{GlossarySidebar}}
+
 Flash は Adobe によって開発された廃れつつある技術で、表現力のあるウェブアプリ、マルチメディアコンテンツ、ストリーミングメディアを表示します。 Adobe Flash は対応している{{Glossary("Browser","ウェブブラウザー")}}でプラグインを用いて実行することができます。
 
 1. [公式ウェブサイト](https://www.adobe.com/products/flashruntimes.html)
diff --git a/files/ja/glossary/advance_measure/index.md b/files/ja/glossary/advance_measure/index.md
index 487bbd4ebc251d..48244069027357 100644
--- a/files/ja/glossary/advance_measure/index.md
+++ b/files/ja/glossary/advance_measure/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 73f237cb0643ee0c4dadee33b53fd5ec307f1502
 ---
 
+{{GlossarySidebar}}
+
 **advance measure** は字体がとるすべての間隔で、記述方向（横書き・縦書き）によって水平方向または垂直方向の間隔を表します。カーソルがある文字の手前から背後までを進む距離と等しいです。
 
 この用語は幾つかの CSS の {{cssxref("&lt;length&gt;")}} の単位の定義で使われます。
diff --git a/files/ja/glossary/ajax/index.md b/files/ja/glossary/ajax/index.md
index b1e32a1d8c5cac..fb5f90d3fd8eb3 100644
--- a/files/ja/glossary/ajax/index.md
+++ b/files/ja/glossary/ajax/index.md
@@ -3,6 +3,8 @@ title: AJAX
 slug: Glossary/AJAX
 ---
 
+{{GlossarySidebar}}
+
 **AJAX** (Asynchronous {{Glossary("JavaScript")}} And {{Glossary("XML")}}) は、 {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}} として知られる技術を用いて、より複雑で動的なウェブページを構築するプログラミング手法のことです。
 
 AJAX によって、ウェブページ全体を再読み込みせずに、 {{Glossary("HTML")}} ページの {{Glossary("DOM")}} の一部分を更新することができます。 AJAX は非同期処理も可能です。つまり、ウェブページのある部分を再読み込みしようとする間もコードは実行され続けます (ウェブページのある部分の再読み込みが終わるまでコードの実行がブロックされる同期処理と比べて)。
diff --git a/files/ja/glossary/algorithm/index.md b/files/ja/glossary/algorithm/index.md
index e4d42d287b7ce6..82306d062e4904 100644
--- a/files/ja/glossary/algorithm/index.md
+++ b/files/ja/glossary/algorithm/index.md
@@ -3,6 +3,8 @@ title: Algorithm (アルゴリズム)
 slug: Glossary/Algorithm
 ---
 
+{{GlossarySidebar}}
+
 アルゴリズムとは、ある機能を実行するための、独立した一連の命令です。
 
 言い換えれば、アルゴリズムは問題の解決方法を記述する方法であり、人間または機械によって反復的に解決されます。コンピューター科学者は「アルゴリズムの複雑性」や "Big O" 記法の概念でアルゴリズムの効率性を比較します。
diff --git a/files/ja/glossary/alignment_container/index.md b/files/ja/glossary/alignment_container/index.md
index 91fd215d062e59..51d034fb7ae733 100644
--- a/files/ja/glossary/alignment_container/index.md
+++ b/files/ja/glossary/alignment_container/index.md
@@ -3,6 +3,8 @@ title: Alignment container (配置コンテナー)
 slug: Glossary/Alignment_Container
 ---
 
+{{GlossarySidebar}}
+
 **配置コンテナー**は、中に[配置対象物](/ja/docs/Glossary/Alignment_Subject)が配置される矩形です。これはレイアウトモードによって定義されます。通常は配置対象物を包含しているブロックのことを指します。ボックスの書字方向は外側のコンテナーによって決定されます。
 
 ## 関連情報
diff --git a/files/ja/glossary/alignment_subject/index.md b/files/ja/glossary/alignment_subject/index.md
index 7ba34b44d06055..c751b9b74cfb8e 100644
--- a/files/ja/glossary/alignment_subject/index.md
+++ b/files/ja/glossary/alignment_subject/index.md
@@ -3,6 +3,8 @@ title: Alignment subject (配置対象物)
 slug: Glossary/Alignment_Subject
 ---
 
+{{GlossarySidebar}}
+
 [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)では、**配置対象物**はそのプロパティによって配置されるものを指します。
 
 {{cssxref("justify-self")}} や {{cssxref("align-self")}} が設定されている場合、配置対象物はこれらのプロパティが設定されているボックスのマージンボックスです。そのボックスの書字方向を使用します。
diff --git a/files/ja/glossary/alpha/index.md b/files/ja/glossary/alpha/index.md
index 167c4ecc25a3bb..fa2969bacbe67e 100644
--- a/files/ja/glossary/alpha/index.md
+++ b/files/ja/glossary/alpha/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 8d91a3db3ea9aa606ead1f5dbbef3000aba7bc72
 ---
 
+{{GlossarySidebar}}
+
 コンピューター上では、色を数値の組であらわします。各数値は色のいずれかの構成要素の強さ、主に輝度を表します。それぞれの構成要素を**チャンネル**と呼びます。画像ファイルでは、ある色の色チャンネルによって、この色がどれくらいの強さの赤色・緑色・青色の光から構成されているかを表すのが一般的です。後ろ側が透けて見えるような色を表すために、4 番目に追加されるのが**アルファチャンネル**です。アルファチャンネルは、ある色が後ろ側にある色をどの程度覆い隠すかを表します。
 
 具体例をみてみましょう。`#8921F2` (`rgb(137, 33, 242)` または `hsl(270, 89%, 54)` とも記述します) は紫色を表します。下の図では 2 個のボックスがテキストを含む段落の手前に描画されています。左上にあるボックスでは上で示した紫色を背景色に指定しています。右下のボックスは、_同じ_ 背景色ですがアルファチャンネルの値を 0.5 に指定しています。これは、50% の不透明度とも表せます。
diff --git a/files/ja/glossary/alpn/index.md b/files/ja/glossary/alpn/index.md
index 7a03cbf0908e74..9933b5b147a1f8 100644
--- a/files/ja/glossary/alpn/index.md
+++ b/files/ja/glossary/alpn/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 5525ac4f1e28d94beedee7196981eac0377f7bc3
 ---
 
+{{GlossarySidebar}}
+
 **Application-Layer {{Glossary("Protocol")}} Negotiation** (**ALPN**) は、 {{Glossary("TLS")}} 拡張であり、追加のラウンドトリップを必要とせずに、暗号化された接続をネゴシエートするアプリケーションレイヤープロトコルを示します。
 
 | プロトコル                                | 識別シーケンス                                         |
diff --git a/files/ja/glossary/api/index.md b/files/ja/glossary/api/index.md
index 790c445a1bb1bf..d9c680ef12f7b3 100644
--- a/files/ja/glossary/api/index.md
+++ b/files/ja/glossary/api/index.md
@@ -3,6 +3,8 @@ title: API
 slug: Glossary/API
 ---
 
+{{GlossarySidebar}}
+
 API (Application Programming Interface) とは、あるソフトウェアプログラム(アプリケーション)が、他のソフトウェアやハードウェア等、外部とやりとりをするために備えている機能や規則の集まりです - 人間のユーザーインターフェイスと比較されます。API は、それを提供するアプリケーションと、第 3 者のソフトウェアやハードウェアといった他の項目との間の、単純な契約(インターフェイス)です。
 
 Web 開発においては、API と言えば一般的にはコーディング上の取り決めです (例えば {{glossary("method","メソッド")}} 、{{Glossary("property","プロパティ")}} 、 events、{{Glossary("URL","URL")}}) が挙げられます。ブラウザーのコンポーネントやユーザーのコンピューター上にあるソフトやハード、第 3 者のウェブサイトやサービスとやり取りするアプリケーションを開発するには API を使います。
diff --git a/files/ja/glossary/apple_safari/index.md b/files/ja/glossary/apple_safari/index.md
index 25173ee2a111b8..3a38073f5269fd 100644
--- a/files/ja/glossary/apple_safari/index.md
+++ b/files/ja/glossary/apple_safari/index.md
@@ -3,6 +3,8 @@ title: Apple Safari
 slug: Glossary/Apple_Safari
 ---
 
+{{GlossarySidebar}}
+
 [Safari](http://www.apple.com/safari/) は{{Glossary("Browser","ウェブブラウザー")}}であり、Apple が開発し、 macOS と iOS の両方に組み込まれています。これは、オープンソースの [WebKit](https://webkit.org/) エンジンに基づいています。
 
 ## 詳細情報
diff --git a/files/ja/glossary/application_context/index.md b/files/ja/glossary/application_context/index.md
index 59fc923aa70d4b..d6afa2a0a4fce1 100644
--- a/files/ja/glossary/application_context/index.md
+++ b/files/ja/glossary/application_context/index.md
@@ -3,6 +3,8 @@ title: Application Context (アプリケーションコンテキスト)
 slug: Glossary/Application_context
 ---
 
+{{GlossarySidebar}}
+
 **アプリケーションコンテキスト**は、それに適用される[マニフェスト](/ja/docs/Web/Manifest)のある最上位の{{Glossary("Browsing_context", "閲覧コンテキスト")}}です。
 
 アプリケーションコンテキストが、ユーザーエージェントが深いリンクに移動することを要求された結果として生成された場合、ユーザーエージェントがユーザーエージェントはすぐに置換が有効となった深いリンクに移動しなければなりません。そうでないと、アプリケーションコンテキストが生成された時に、ユーザーエージェントは、すぐに置換が有効となった開始 URL に移動しないといけなくなります
diff --git a/files/ja/glossary/argument/index.md b/files/ja/glossary/argument/index.md
index 0f5b8834d56016..7a0beb713a8602 100644
--- a/files/ja/glossary/argument/index.md
+++ b/files/ja/glossary/argument/index.md
@@ -3,6 +3,8 @@ title: Argument (引数)
 slug: Glossary/Argument
 ---
 
+{{GlossarySidebar}}
+
 **引数**は{{Glossary("function", "関数")}}の入力として渡される{{Glossary("value", "値")}}({{Glossary("primitive", "プリミティブ")}}または{{Glossary("object", "オブジェクト")}})です。
 
 ## 詳細情報
diff --git a/files/ja/glossary/aria/index.md b/files/ja/glossary/aria/index.md
index 5772460e2643f4..4095c9aa4eaddb 100644
--- a/files/ja/glossary/aria/index.md
+++ b/files/ja/glossary/aria/index.md
@@ -3,6 +3,8 @@ title: ARIA
 slug: Glossary/ARIA
 ---
 
+{{GlossarySidebar}}
+
 **ARIA** (_Accessible Rich {{glossary("Internet")}} Applications_) は、支援技術の {{Glossary("W3C")}} 仕様で、ユーザーに応じてセマンティクスやその他のメタデータを {{Glossary("HTML")}} へ付加します。
 
 例えば、{{HTMLElement("p")}} {{glossary("tag","タグ")}}に `role="alert"` 属性を付加することで、そのタグ内の情報が重要かつ時間依存であることを視覚に障害を持つユーザーに知らせることができます（仮に視覚に障害のないユーザーであれば、文字色を変えることでも同じ内容を伝えられるかもしれません）。
diff --git a/files/ja/glossary/arpa/index.md b/files/ja/glossary/arpa/index.md
index 6e2778273f62f8..d1d447802dfc33 100644
--- a/files/ja/glossary/arpa/index.md
+++ b/files/ja/glossary/arpa/index.md
@@ -3,6 +3,8 @@ title: ARPA
 slug: Glossary/ARPA
 ---
 
+{{GlossarySidebar}}
+
 **.arpa** (address and routing parameter area) はインターネットインフラ関連の目的で使われる{{glossary("TLD","トップレベルドメイン")}}です。特に DNS 逆引き({{glossary("IP address","IPアドレス")}}から{{glossary("domain name","ドメイン名")}}を調べること)のために使われます。
 
 ## 詳細情報
diff --git a/files/ja/glossary/arpanet/index.md b/files/ja/glossary/arpanet/index.md
index b08690bff3d7a3..34c010357e0028 100644
--- a/files/ja/glossary/arpanet/index.md
+++ b/files/ja/glossary/arpanet/index.md
@@ -3,6 +3,8 @@ title: ARPANET
 slug: Glossary/Arpanet
 ---
 
+{{GlossarySidebar}}
+
 **ARPANET** (Advanced Research Projects Agency NETwork、高等研究計画局ネットワーク) は、初期のコンピューターネットワークであり、機密軍事情報を送信し、アメリカ全土の有力な研究グループを結ぶ堅牢な媒体として 1969 年に構築されました。ARPANET は、最初に NCP (network control protocol、ネットワーク制御プロトコル) を実行し、その後、インターネットプロトコルまたは {{glossary("TCP")}}/{{glossary("IPv6","IP")}} スイートの最初のバージョンを実行し、ARPANET を初期の{{glossary("Internet","インターネット")}}の重要な部分にしました。ARPANET は 1990 年の初めに閉鎖されました。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/array/index.md b/files/ja/glossary/array/index.md
index be4eaeba7afb62..a9a15e6addd2bf 100644
--- a/files/ja/glossary/array/index.md
+++ b/files/ja/glossary/array/index.md
@@ -3,6 +3,8 @@ title: Array (配列)
 slug: Glossary/Array
 ---
 
+{{GlossarySidebar}}
+
 *配列*は、データ（言語によって{{Glossary("primitive","プリミティブ")}}または{{Glossary("object","オブジェクト")}}のどちらか）が順序付けされて集まったものです。配列は 1 つの変数に複数の値を格納するために使用されます。これは 1 つしか値を格納できない変数とは対照的です。
 
 配列内のそれぞれの項目には添字と呼ばれる番号が割り当てられており、それによって各項目にアクセスすることができます。 JavaScript では、配列の添字は 0 から始まり、さまざまな{{Glossary("Method", "メソッド")}}で操作することができます。
diff --git a/files/ja/glossary/ascii/index.md b/files/ja/glossary/ascii/index.md
index 2e7f29276a045c..d992bbd7ab8fad 100644
--- a/files/ja/glossary/ascii/index.md
+++ b/files/ja/glossary/ascii/index.md
@@ -3,6 +3,8 @@ title: ASCII
 slug: Glossary/ASCII
 ---
 
+{{GlossarySidebar}}
+
 **ASCII** (_American Standard Code for Information Interchange_) とは、文字、数字、句読点、および制御コードをデジタル形式に変換するために、コンピュータによって使用される最も一般的な符号化方法の 1 つです。 2007 年から、ウェブ上では {{Glossary("UTF-8")}} が用いられています。
 
 ## 詳細情報
diff --git a/files/ja/glossary/asynchronous/index.md b/files/ja/glossary/asynchronous/index.md
index fa7d52f2e8e2d7..2bbe0b0afb32d3 100644
--- a/files/ja/glossary/asynchronous/index.md
+++ b/files/ja/glossary/asynchronous/index.md
@@ -3,6 +3,8 @@ title: Asynchronous （非同期）
 slug: Glossary/Asynchronous
 ---
 
+{{GlossarySidebar}}
+
 **非同期**とは、 2 つ以上の事象が同時に発生したり、関連する複数の事象が互いの完了を待たずに発生したりする概念を指します（前のものが完了するのを待たずに複数の関連するものが発生することもあります）。コンピュータの世界では、「非同期」という言葉は主に 2 つの文脈で使われています。
 
 - ネットワークと通信
diff --git a/files/ja/glossary/atag/index.md b/files/ja/glossary/atag/index.md
index 3a576e5aa30553..4590166b2bc3ea 100644
--- a/files/ja/glossary/atag/index.md
+++ b/files/ja/glossary/atag/index.md
@@ -3,6 +3,8 @@ title: ATAG
 slug: Glossary/ATAG
 ---
 
+{{GlossarySidebar}}
+
 ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines の略、オーサリング・ツール・アクセシビリティ・ガイドライン) は 利用しやすいコンテンツを生産する、アクセシブル・オーサリングツールをビルドするための {{Glossary("W3C")}} 勧告です。
 
 ## 関連項目
diff --git a/files/ja/glossary/attribute/index.md b/files/ja/glossary/attribute/index.md
index 40802cf118ad8d..a9ba6d9bb7d68c 100644
--- a/files/ja/glossary/attribute/index.md
+++ b/files/ja/glossary/attribute/index.md
@@ -3,6 +3,8 @@ title: Attribute (属性)
 slug: Glossary/Attribute
 ---
 
+{{GlossarySidebar}}
+
 **属性** (attribute) 属性は{{Glossary("element", "要素")}}を拡張し、動作を変更したりメタデータを提供したりします。
 
 属性は常に `name="value"` の形式を取ります (属性の識別子に関連付けられた値が続きます)。
diff --git a/files/ja/glossary/bandwidth/index.md b/files/ja/glossary/bandwidth/index.md
index 83373128a6d697..b6ade4d30152de 100644
--- a/files/ja/glossary/bandwidth/index.md
+++ b/files/ja/glossary/bandwidth/index.md
@@ -3,6 +3,8 @@ title: Bandwidth (帯域幅)
 slug: Glossary/Bandwidth
 ---
 
+{{GlossarySidebar}}
+
 帯域幅は、一定の時間内にデータ接続を通過できる情報量の尺度です。これは、通常、メガビット毎秒（Mbps）またはギガビット毎秒（Gbps）などのビット毎秒（bps）の倍数で測定されます。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/base64/index.md b/files/ja/glossary/base64/index.md
index 2e361de101017a..feab77654f76bd 100644
--- a/files/ja/glossary/base64/index.md
+++ b/files/ja/glossary/base64/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 04e75ce1f83a591a576f52b143f195133bfcbe96
 ---
 
+{{GlossarySidebar}}
+
 **Base64** とは、[バイナリーからテキストへの符号化](https://en.wikipedia.org/wiki/Binary-to-text_encoding)を行う手法のグループであり、バイナリーデータを 64 を基数とする表現に変換することで、 ASCII 文字列で表すことができます。_Base64_ という呼び方は、 [MIME の Content-Transfer-Encoding](https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding) における特定の符号化方式の名前に由来します。
 
 Base64 符号化方式がよく使われるのは、テキストデータを扱うよう設計されたメディア上で、バイナリーデータを格納または転送する必要がある場合です。Base64 符号化により、転送中に変換されることなく、バイナリーデータがそのままであることを保証できます。Base64 は、[MIME](https://ja.wikipedia.org/wiki/MIME) による電子メールや [XML](/ja/docs/Web/XML) における複合型データの格納など、多くのアプリケーションで幅広く使われています。
diff --git a/files/ja/glossary/baseline/compatibility/index.md b/files/ja/glossary/baseline/compatibility/index.md
index bae742d151c858..0cd545e56946b1 100644
--- a/files/ja/glossary/baseline/compatibility/index.md
+++ b/files/ja/glossary/baseline/compatibility/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: bb6092c4230b69c2eceae6910af68c73955cae1c
 ---
 
+{{GlossarySidebar}}
+
 **ベースライン**は、広くサポートされているウェブプラットフォームの機能を確認します。ウェブ開発者は、ベースラインの機能が最新のブラウザーで動作することを期待できます。
 
 ベースラインの機能（API、CSS プロパティ、JavaScript 構文など）は、有名なブラウザ（Chrome, Edge, Firefox, Safari）の現在および以前のメジャーバージョンで安定して動作することが知られています。
diff --git a/files/ja/glossary/baseline/index.md b/files/ja/glossary/baseline/index.md
index 4d741d988a78f5..23c0d3793cde0a 100644
--- a/files/ja/glossary/baseline/index.md
+++ b/files/ja/glossary/baseline/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: ea3a289af7cd97f1b5952ddc7fe2704feab105c9
 ---
 
+{{GlossarySidebar}}
+
 **ベースライン**という用語は文脈によっていくつかの意味を持つことがあります。
 
 {{GlossaryDisambiguation}}
diff --git a/files/ja/glossary/baseline/typography/index.md b/files/ja/glossary/baseline/typography/index.md
index 3d4e74607fd98c..0bb74881590455 100644
--- a/files/ja/glossary/baseline/typography/index.md
+++ b/files/ja/glossary/baseline/typography/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: bb6092c4230b69c2eceae6910af68c73955cae1c
 ---
 
+{{GlossarySidebar}}
+
 **ベースライン**とは、ヨーロッパおよび西アジアの書体で使用される用語で、フォントの文字がその上に載る概念上の線を意味します。
 
 ## 関連情報
diff --git a/files/ja/glossary/beacon/index.md b/files/ja/glossary/beacon/index.md
index dc9b392c75f072..03d3bd00858a08 100644
--- a/files/ja/glossary/beacon/index.md
+++ b/files/ja/glossary/beacon/index.md
@@ -3,6 +3,8 @@ title: beacon (ビーコン)
 slug: Glossary/Beacon
 ---
 
+{{GlossarySidebar}}
+
 Web ビーコンは、マークアップに埋め込まれた 1 ピクセル gif などの小さなオブジェクトで、Web サーバーまたはサードパーティのサーバーに情報を戻すために使用されます。
 
 ビーコンは通常、統計目的でユーザーに関する情報を提供するために含まれています。
diff --git a/files/ja/glossary/bezier_curve/index.md b/files/ja/glossary/bezier_curve/index.md
index 69ac449155f0f1..55836b74bdc288 100644
--- a/files/ja/glossary/bezier_curve/index.md
+++ b/files/ja/glossary/bezier_curve/index.md
@@ -3,6 +3,8 @@ title: Bézier curve (ベジェ曲線)
 slug: Glossary/Bezier_curve
 ---
 
+{{GlossarySidebar}}
+
 **ベジェ曲線**は、コンピューターグラフィックスとアニメーションで使用される、数学的に記述された曲線です。ベクター画像では、無期限に拡大できる滑らかな曲線をモデル化するために使用されます。
 
 ベジェ曲線は、最低 2 つの制御点のセットによって定義されます。ウェブ関連のグラフィックスとアニメーションは、4 つの制御点 P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, P<sub>3</sub> を持つ曲線である 3 次ベジェ曲線を使用します。
diff --git a/files/ja/glossary/bidi/index.md b/files/ja/glossary/bidi/index.md
index 89f6133f968c59..779fbb77f8ff0b 100644
--- a/files/ja/glossary/bidi/index.md
+++ b/files/ja/glossary/bidi/index.md
@@ -3,6 +3,8 @@ title: BiDi (双方向)
 slug: Glossary/BiDi
 ---
 
+{{GlossarySidebar}}
+
 **BiDi** (BiDirectional、双方向) は、{{glossary("rtl","右から左")}}および{{glossary("ltr","左から右")}}に向かって書くテキストの両方を含む文書を指します。両方の方向性が同じパラグラフで発生しても、各言語のテキストは適切な方向性で表示されなくてはなりません。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/bigint/index.md b/files/ja/glossary/bigint/index.md
index 3640cf4fc83914..1cebd7aa1acec3 100644
--- a/files/ja/glossary/bigint/index.md
+++ b/files/ja/glossary/bigint/index.md
@@ -3,6 +3,8 @@ title: BigInt
 slug: Glossary/BigInt
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("JavaScript")}} において, **BigInt** は [任意精度演算](https://ja.wikipedia.org/wiki/%E4%BB%BB%E6%84%8F%E7%B2%BE%E5%BA%A6%E6%BC%94%E7%AE%97) で表現される整数数値型の一種です。他のプログラミング言語では異なる数値型が存在します。例としては、Integer、Float、 Double、 Bignum です。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/binding/index.md b/files/ja/glossary/binding/index.md
index 1efc1aab78a15b..759077ce586c7a 100644
--- a/files/ja/glossary/binding/index.md
+++ b/files/ja/glossary/binding/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 1c4869cdb1a9a9c3cafba87a2cd9469591f7aa47
 ---
 
+{{GlossarySidebar}}
+
 プログラミングにおいて**バインド**とは、{{glossary("identifier","識別子")}}と値の関連付けのことです。バインドは{{glossary("variable", "変数")}}だけとは限りません。例えば、関数の{{glossary("parameter", "引数")}}や {{jsxref("Statements/try...catch", "catch (e)")}} ブロックで作成されるバインドは、厳密な意味での「変数」ではありません。さらに、一部のバインドは言語によって暗黙に作成されます。例えば、 JavaScript の {{jsxref("Operators/this", "this")}} や [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) などです。
 
 バインドは代入可能であれば{{glossary("mutable", "変更可能")}}であり、そうでなければ{{glossary("immutable", "変更不可")}}です。これは、保持している値が変更不可であるという意味ではありません。
diff --git a/files/ja/glossary/blink/index.md b/files/ja/glossary/blink/index.md
index af5bb214759859..9528818d0a9026 100644
--- a/files/ja/glossary/blink/index.md
+++ b/files/ja/glossary/blink/index.md
@@ -3,6 +3,8 @@ title: Blink
 slug: Glossary/Blink
 ---
 
+{{GlossarySidebar}}
+
 Blink は、 Google によって Chromium の一部 (それゆえ {{glossary("Chrome", "Google Chrome")}} の一部でもある) として開発されたオープンソースのブラウザー用レイアウトエンジンです。特に、 Blink はレイアウト、レンダリング、 {{glossary("DOM")}} の処理を扱う {{glossary("WebKit")}} 内の WebCore ライブラリのフォークとして始まりましたが、現在は独立した{{glossary("rendering engine", "レンダリングエンジン")}}として成立しています。
 
 1. 一般知識
diff --git a/files/ja/glossary/block-level_content/index.md b/files/ja/glossary/block-level_content/index.md
index b1ce98ba5de8b5..2583a622a95d8e 100644
--- a/files/ja/glossary/block-level_content/index.md
+++ b/files/ja/glossary/block-level_content/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: a46d4d15ea85b4bbb83df145228bc40f658868be
 ---
 
+{{GlossarySidebar}}
+
 CSS において、ブロックレイアウトに関係するコンテンツは**ブロックレベルコンテンツ**と呼ばれます。
 
 ブロックレイアウトでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。各ボックスの左の外辺は、格納するブロックの左の辺に接します。ブロックレベル要素は常に新しい行から始まります。英語やアラビア語のような横書きでは、親要素（コンテナー）の水平空間全体と、コンテンツを含む高さに等しい垂直空間を占めるため、「ブロック」を作成することになります。
diff --git a/files/ja/glossary/block/css/index.md b/files/ja/glossary/block/css/index.md
index 84cf6ab57d6a66..db10f928b7f3b5 100644
--- a/files/ja/glossary/block/css/index.md
+++ b/files/ja/glossary/block/css/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 4a9f9d2e9c1811ce3519a7061e906db9200a5e97
 ---
 
+{{GlossarySidebar}}
+
 ウェブページにおいて **ブロック** (block) は、新しい行、つまり、横書きでは前の要素の下、次の要素の上に現れる {{glossary("HTML")}} の{{glossary("element", "要素")}}です（よく*ブロックレベル要素*として知られています）。例えば、 {{htmlelement("p")}} は既定ではブロックレベル要素であり、それに対して {{htmlelement("a")}} は*インライン要素*です。 — HTML ソース内で複数のリンクを互いに隣に置くことができ、出力時には互いに同じ行に表示されます。
 
 {{cssxref("display")}} プロパティを使用すると、要素がインラインで表示されるかブロックで表示されるか (他の多数のオプションの中で) 変更することができます。**ブロック**は配置方法や {{cssxref("position")}} の使用にも影響します。
diff --git a/files/ja/glossary/block/index.md b/files/ja/glossary/block/index.md
index 19e9947ba9abb3..56006b27da9494 100644
--- a/files/ja/glossary/block/index.md
+++ b/files/ja/glossary/block/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: d2a9f2e26a8139d4bb270d7dc3cddd8b848719fe
 ---
 
+{{GlossarySidebar}}
+
 **ブロック**という用語は、文脈に応じていくつかの意味を持つことがあります。以下のものを参照してください。
 
 {{GlossaryDisambiguation}}
diff --git a/files/ja/glossary/block/scripting/index.md b/files/ja/glossary/block/scripting/index.md
index 15aa67fe87a111..ddb6e9fc1a0ffc 100644
--- a/files/ja/glossary/block/scripting/index.md
+++ b/files/ja/glossary/block/scripting/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 4a9f9d2e9c1811ce3519a7061e906db9200a5e97
 ---
 
+{{GlossarySidebar}}
+
 {{glossary("JavaScript")}} では、ブロックは、中括弧 ("`{}`") で囲まれた関連する{{glossary("statement","文")}}の集合です。 たとえば、 {{jsxref("Statements/if...else","if (条件)")}} ブロックの後に文のブロックを置くことができます。これは、条件が真であればインタープリターがブロック内のコードを実行する必要があることを示し、条件が偽の場合はブロック全体をスキップします。
 
 ## 関連情報
diff --git a/files/ja/glossary/block_cipher_mode_of_operation/index.md b/files/ja/glossary/block_cipher_mode_of_operation/index.md
index 00721b6f13c5a7..c6e159d41bc9ae 100644
--- a/files/ja/glossary/block_cipher_mode_of_operation/index.md
+++ b/files/ja/glossary/block_cipher_mode_of_operation/index.md
@@ -3,6 +3,8 @@ title: Block cipher mode of operation (暗号利用モード)
 slug: Glossary/Block_cipher_mode_of_operation
 ---
 
+{{GlossarySidebar}}
+
 暗号利用モード (通常は単に「モード」と呼ばれます) は、ブロックサイズよりも長いメッセージを暗号化または復号化するためにブロック暗号を使用する方法を指定します。
 
 現在使用されているほとんどの対称鍵アルゴリズムはブロック暗号です。これは、一度に 1 ブロックずつデータを暗号化することを意味します。各ブロックのサイズは固定されており、アルゴリズムによって決定されます。たとえば、[AES](/ja/docs/Glossary/AES) は 16 バイトのブロックを使用します。ブロック暗号は常に _モード_ と共に使用されます。モードは、ブロックサイズより長いメッセージを安全に暗号化する方法を指定します。たとえば、AES は暗号ですが、CTR、CBC、および GCM はすべてモードです。不適切なモードを使用したり、モードを誤って使用したりすると、使用する暗号アルゴリズムによって本来提供されるセキュリティを損なってしまう可能性があります。
diff --git a/files/ja/glossary/boolean/aria/index.md b/files/ja/glossary/boolean/aria/index.md
index f066375c054187..15f4f966cb1a54 100644
--- a/files/ja/glossary/boolean/aria/index.md
+++ b/files/ja/glossary/boolean/aria/index.md
@@ -3,6 +3,8 @@ title: Boolean attribute (論理属性) (ARIA)
 slug: Glossary/Boolean/ARIA
 ---
 
+{{GlossarySidebar}}
+
 ARIA における **論理属性** (boolean attribute) とは、列挙されたリストの中に `true` (真) または `false` (偽) の含む [列挙型](/ja/docs/Glossary/Enumerated) の属性のことです。
 
 ARIA においては、論理型 (boolean) は文字列 `"true"` および `"false"` の形式でのみ利用されます。
diff --git a/files/ja/glossary/boolean/html/index.md b/files/ja/glossary/boolean/html/index.md
index 2c36a32d3e20e1..977e89d35a799d 100644
--- a/files/ja/glossary/boolean/html/index.md
+++ b/files/ja/glossary/boolean/html/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 4bd65a01204446af2254bb8864bd22ad87bc86b0
 ---
 
+{{GlossarySidebar}}
+
 HTML における **論理属性** (boolean attribute) とは、`true`（真） か `false`（偽）のどちらか一方の値をとる属性です。
 
 論理属性の注目すべき特徴として、存在していれば `true` をとり、存在していなければ `false` をとる、という点があります。
diff --git a/files/ja/glossary/boolean/index.md b/files/ja/glossary/boolean/index.md
index 612d58ab340e22..e8acc133a29e2f 100644
--- a/files/ja/glossary/boolean/index.md
+++ b/files/ja/glossary/boolean/index.md
@@ -3,6 +3,8 @@ title: Boolean
 slug: Glossary/Boolean
 ---
 
+{{GlossarySidebar}}
+
 コンピューター科学において、**boolean**（論理型、真偽値型）は `true`（真）か `false`（偽）の値のみを取れる論理データ型です。たとえば、 JavaScript では boolean による条件がコードの部分を実行するか（[if 文](/ja/docs/Web/JavaScript/Reference/Statements/if...else)の中など）や繰り返し（[for ループ](/ja/docs/Web/JavaScript/Reference/Statements/for)など）を決定します。
 
 ```js
diff --git a/files/ja/glossary/bounding_box/index.md b/files/ja/glossary/bounding_box/index.md
index 767b03a761fe6c..b76762c6278175 100644
--- a/files/ja/glossary/bounding_box/index.md
+++ b/files/ja/glossary/bounding_box/index.md
@@ -3,4 +3,6 @@ title: Bounding Box (バウンディングボックス)
 slug: Glossary/Bounding_box
 ---
 
+{{GlossarySidebar}}
+
 要素のバウンディングボックス（境界ボックスとも）は、要素とその子孫を完全に囲む可能な最小の矩形です（その要素のユーザー座標系の軸に揃えられます）。
diff --git a/files/ja/glossary/breadcrumb/index.md b/files/ja/glossary/breadcrumb/index.md
index 7c9a00b8b080fd..9334bb9c7eeb1e 100644
--- a/files/ja/glossary/breadcrumb/index.md
+++ b/files/ja/glossary/breadcrumb/index.md
@@ -3,6 +3,8 @@ title: パンくずリスト
 slug: Glossary/Breadcrumb
 ---
 
+{{GlossarySidebar}}
+
 **パンくずリスト** (_breadcrumb_, _breadcrumb trail_) は、ウェブサイトの各ページのヘッダーと本文の間に置かれることが多い構成要素です。パンくずリストを通じて、たとえばトップページからみて現在のページがどの階層に位置するかや、ユーザーが現在のページに至るまでどの順番でどのリンクをたどってきたのかを知ることができます。
 
 サイト内での位置をあらわすパンくずリストは、この記事なら概ね次のようなかたちになるでしょう。
diff --git a/files/ja/glossary/brotli_compression/index.md b/files/ja/glossary/brotli_compression/index.md
index 9abd0eaf4f3293..fa644f5b000d75 100644
--- a/files/ja/glossary/brotli_compression/index.md
+++ b/files/ja/glossary/brotli_compression/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: a0e987d407b31560bde1f982520ee10103db4ba0
 ---
 
+{{GlossarySidebar}}
+
 **Brotli** は、汎用の可逆圧縮アルゴリズムです。
 
 LZ77 アルゴリズムのモダンバリアント、ハフマン符号、2 次コンテキストモデリングの組み合わせを使用してデータを圧縮し、現在利用可能な最良の汎用圧縮方法に匹敵する圧縮率を提供します。Brotli は {{glossary("GZip_compression", "gzip")}} よりも優れた圧縮率を提供し、展開速度は同等ですが、 brotli 圧縮は Gzip 圧縮よりも処理が遅いため、{{glossary("Cache", "キャッシュできない")}}コンテンツの圧縮には gzip の方が適している場合があります。
diff --git a/files/ja/glossary/browser/index.md b/files/ja/glossary/browser/index.md
index ee0e9e34c09d39..88d10af7ff856e 100644
--- a/files/ja/glossary/browser/index.md
+++ b/files/ja/glossary/browser/index.md
@@ -3,6 +3,8 @@ title: Browser (ブラウザー)
 slug: Glossary/Browser
 ---
 
+{{GlossarySidebar}}
+
 **ウェブブラウザー**または**ブラウザー**は、{{Glossary("World Wide Web","ウェブ")}}からページを取得して表示するプログラムで、ユーザーが{{Glossary("hyperlink","ハイパーリンク")}}を通して更に他のページへアクセスできます。ブラウザーは{{Glossary("user agent","ユーザーエージェント")}}の最もなじみ深い形です。
 
 ## 詳細情報
diff --git a/files/ja/glossary/browsing_context/index.md b/files/ja/glossary/browsing_context/index.md
index 1f412946c6959c..9c63e7c788dcef 100644
--- a/files/ja/glossary/browsing_context/index.md
+++ b/files/ja/glossary/browsing_context/index.md
@@ -3,6 +3,8 @@ title: Browsing context (閲覧コンテキスト)
 slug: Glossary/Browsing_context
 ---
 
+{{GlossarySidebar}}
+
 **閲覧コンテキスト**は、{{glossary("browser", "ブラウザー")}} が {{domxref("Document")}} (今日では通常タブであり、場合によってはウィンドウまたはページ内のフレーム) を表示する環境です。
 
 各閲覧コンテキストは、固有の{{glossary("origin", "オリジン")}}、すなわちアクティブな文書の生成元と、すべての表示された文書を順番に記録した履歴を持っています。
@@ -15,5 +17,3 @@ slug: Glossary/Browsing_context
 
 - [WHATWG の閲覧コンテキスト](https://html.spec.whatwg.org/multipage/browsers.html#windows)
 - [W3C の閲覧コンテキスト](http://w3c.github.io/html/browsers.html#sec-browsing-contexts)
-
-{{QuickLinksWithSubpages("/ja/docs/Glossary")}}
diff --git a/files/ja/glossary/buffer/index.md b/files/ja/glossary/buffer/index.md
index 8ff4644e06130a..18f6f24ab8819d 100644
--- a/files/ja/glossary/buffer/index.md
+++ b/files/ja/glossary/buffer/index.md
@@ -3,6 +3,8 @@ title: buffer (バッファー)
 slug: Glossary/Buffer
 ---
 
+{{GlossarySidebar}}
+
 バッファーは、データをある場所から別の場所へ移動させるときに、それを一時的に保存するために使われる物理メモリー内のストレージです。
 
 ## 詳細情報
diff --git a/files/ja/glossary/cache/index.md b/files/ja/glossary/cache/index.md
index 77c1b824f9757d..ec004623e788c0 100644
--- a/files/ja/glossary/cache/index.md
+++ b/files/ja/glossary/cache/index.md
@@ -3,6 +3,8 @@ title: Cache(キャッシュ)
 slug: Glossary/Cache
 ---
 
+{{GlossarySidebar}}
+
 **キャッシュ** (ウェブキャッシュまたは HTTP キャッシュ) は、特定の条件を満たす限り、後続の HTTP リクエストに使用できるように一時的に HTTP 応答を保存するコンポーネントです。
 
 ## 詳細情報
diff --git a/files/ja/glossary/cacheable/index.md b/files/ja/glossary/cacheable/index.md
index 9dd27179694554..4a657b50aa8c72 100644
--- a/files/ja/glossary/cacheable/index.md
+++ b/files/ja/glossary/cacheable/index.md
@@ -3,6 +3,8 @@ title: Cacheable (キャッシュ可能)
 slug: Glossary/Cacheable
 ---
 
+{{GlossarySidebar}}
+
 **キャッシュ可能**なレスポンス (応答) とは、キャッシュすることが可能な HTTP レスポンスで、後で取り出して使用するために格納され、サーバーへの新しいリクエスト (要求) を節約します。 すべての HTTP レスポンスがキャッシュされるわけではなく、キャッシュされる HTTP レスポンスには次の制約があります。
 
 - リクエストで使用されるメソッドは、それ自体が*キャッシュ可能*です ({{HTTPMethod("GET")}} メソッドまたは {{HTTPMethod("HEAD")}} メソッド)。 フレッシュネス (新鮮さ) が示され、{{HTTPHeader("Content-Location")}} ヘッダーが設定されている場合は、{{HTTPMethod("POST")}} または {{HTTPMethod("PATCH")}} リクエストへのレスポンスもキャッシュできますが、これはほとんど実装されていません。 (例えば、 Firefox は <https://bugzilla.mozilla.org/show_bug.cgi?id=109553> により、それをサポートしていません。) {{HTTPMethod("PUT")}} や {{HTTPMethod("DELETE")}} のような他のメソッドはキャッシュ可能ではなく、その結果をキャッシュすることはできません。
diff --git a/files/ja/glossary/caldav/index.md b/files/ja/glossary/caldav/index.md
index 79b7b59b3e44b1..1bff9e2938a1c2 100644
--- a/files/ja/glossary/caldav/index.md
+++ b/files/ja/glossary/caldav/index.md
@@ -3,6 +3,8 @@ title: CalDAV
 slug: Glossary/CalDAV
 ---
 
+{{GlossarySidebar}}
+
 CalDAV（Calendaring extensions to {{Glossary("WebDAV")}}）は、{{Glossary("IETF")}} によって標準化された{{glossary("protocol","プロトコル")}}であり、{{glossary("server","サーバー")}}からカレンダーデータにリモートアクセスするために使用されます。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/call_stack/index.md b/files/ja/glossary/call_stack/index.md
index 1161b47e354992..a864229839d5ef 100644
--- a/files/ja/glossary/call_stack/index.md
+++ b/files/ja/glossary/call_stack/index.md
@@ -3,6 +3,8 @@ title: Call stack (コールスタック)
 slug: Glossary/Call_stack
 ---
 
+{{GlossarySidebar}}
+
 **コールスタック** (call stack) は、インタープリター (ウェブブラウザー内の JavaScript インタープリターなど) の仕組みの一つで、複数階層の{{glossary("function","関数")}}を呼び出したスクリプト内の位置を追跡し続けることです。 — どの関数が現在実行されているのか、その関数の中でどの関数が呼び出されたか、などです。
 
 - スクリプトが関数を呼び出すとき、インタープリターはそれをコールスタックに追加し、それから関数の実行を始めます。
diff --git a/files/ja/glossary/callback_function/index.md b/files/ja/glossary/callback_function/index.md
index 8bad5fc8c24718..6479a8cd473734 100644
--- a/files/ja/glossary/callback_function/index.md
+++ b/files/ja/glossary/callback_function/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b
 ---
 
+{{GlossarySidebar}}
+
 コールバック関数とは、引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。
 
 簡単な例を以下に示します。
diff --git a/files/ja/glossary/canonical_order/index.md b/files/ja/glossary/canonical_order/index.md
index 48d9f1a7303da6..2e2f2cb8c4e855 100644
--- a/files/ja/glossary/canonical_order/index.md
+++ b/files/ja/glossary/canonical_order/index.md
@@ -3,6 +3,8 @@ title: Canonical order (正規順序)
 slug: Glossary/Canonical_order
 ---
 
+{{GlossarySidebar}}
+
 CSS では、正規順序は、別々の値を指定（または{{Glossary("parse", "解析")}}）すべき順序、または CSS のプロパティ値の一部として{{Glossary("serialization", "シリアライズ")}}される順序を参照するために使用されます。 これはプロパティの形式的{{Glossary("syntax","構文")}}によって定義され、通常、長い表現（longhand）の値を単一の一括指定（shorthand）の値の一部として指定する順序を指します。
 
 たとえば、{{cssxref("background")}} の一括指定のプロパティー値は、いくつかの `background-*` の長い表現のプロパティーで構成されています。 これらの長い表現の値の正規順序は、次のように定義されます。
diff --git a/files/ja/glossary/canvas/index.md b/files/ja/glossary/canvas/index.md
index db66161394c777..4e9045f2f36d97 100644
--- a/files/ja/glossary/canvas/index.md
+++ b/files/ja/glossary/canvas/index.md
@@ -3,6 +3,8 @@ title: Canvas
 slug: Glossary/Canvas
 ---
 
+{{GlossarySidebar}}
+
 **canvas 要素**は {{Glossary("HTML5")}} の一部であり、 2D および 3D の形状や[ビットマップ](https://en.wikipedia.org/wiki/Bitmap)画像を[スクリプト](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E8%A8%80%E8%AA%9E)で動的に[レンダリング](<https://ja.wikipedia.org/wiki/%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF)>)することができます。これは、[bitmap](https://en.wikipedia.org/wiki/Bitmap)を更新する低レベルの手続き型モデルであり、組み込みの[シーングラフ](https://en.wikipedia.org/wiki/Scene_graph)を持っていません。これは、特定の {{Glossary("JavaScript")}} {{Glossary("API")}} が描画できる空のグラフィックゾーンを提供します (Canvas 2D や {{Glossary("WebGL")}}) など)。
 
 ## 詳細情報
diff --git a/files/ja/glossary/card_sorting/index.md b/files/ja/glossary/card_sorting/index.md
index 2e68c26ef81fbd..f638b38551f52d 100644
--- a/files/ja/glossary/card_sorting/index.md
+++ b/files/ja/glossary/card_sorting/index.md
@@ -3,6 +3,8 @@ title: Card sorting (カードソート)
 slug: Glossary/Card_sorting
 ---
 
+{{GlossarySidebar}}
+
 カードソート（カードの並べ替え）は、ウェブサイト（または他のタイプの製品）の設計に関わる人々が製品に含めるべきコンテンツ/サービス/機能を書き留めるよう請い、それからこれらの機能をカテゴリまたはグループに編成する、{{glossary("Information architecture","情報アーキテクチャ")}}で使用される単純な手法です。 これは、例えば、ウェブサイトの各ページに何をすべきかを決めるために使用することができます。 その名前は、文字通りカードに並べ替えるための項目を書いてから、カードを積み重ねて整理することによって、しばしばカードの並べ替えが行われるという事実から来ています。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/carddav/index.md b/files/ja/glossary/carddav/index.md
index 0a33a3402688ed..cc8b8e77f55a64 100644
--- a/files/ja/glossary/carddav/index.md
+++ b/files/ja/glossary/carddav/index.md
@@ -3,6 +3,8 @@ title: CardDAV
 slug: Glossary/CardDAV
 ---
 
+{{GlossarySidebar}}
+
 **CardDAV**（vCard Extension to {{Glossary("WebDAV")}}）は、{{Glossary("IETF")}} によって標準化された{{glossary("protocol","プロトコル")}}であり、{{glossary("server","サーバー")}}上で連絡先情報をリモートアクセスまたは共有するために使用されます。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/caret/index.md b/files/ja/glossary/caret/index.md
index dc9fd2aa6ac22a..00f4b9e43a940d 100644
--- a/files/ja/glossary/caret/index.md
+++ b/files/ja/glossary/caret/index.md
@@ -3,6 +3,8 @@ title: caret (キャレット)
 slug: Glossary/Caret
 ---
 
+{{GlossarySidebar}}
+
 **キャレット** (テキストカーソルとも呼ばれる) は、テキスト入力が挿入される場所を示すために画面に表示されるインジケーターです。 ほとんどのユーザーインターフェイスは、細い縦線または点滅する文字サイズの四角形を使用してキャレットを表しますが、これはさまざまです。 テキスト内のこの位置は**挿入位置**と呼ばれます。「キャレット」という単語は、テキストの挿入位置をマウスカーソル (マウスポインター) と区別するためのものです。
 
 ウェブ上では、{{HTMLElement("input")}} 要素と {{HTMLElement("textarea")}} 要素と、[`contenteditable`](/ja/docs/Web/HTML/Global_attributes#contenteditable) 属性が設定されている要素の挿入位置を表すためにキャレットが使用され、要素の内容をユーザーが編集できるようにします。
diff --git a/files/ja/glossary/cdn/index.md b/files/ja/glossary/cdn/index.md
index 26a9990d17050f..99c0885376f9db 100644
--- a/files/ja/glossary/cdn/index.md
+++ b/files/ja/glossary/cdn/index.md
@@ -3,6 +3,8 @@ title: CDN
 slug: Glossary/CDN
 ---
 
+{{GlossarySidebar}}
+
 **CDN** （Content Delivery Network、コンテンツ配信ネットワーク）は、様々な地域に分散されたサーバーの集まりです。これらのサーバーは同じ内容のデータのコピーを保有し、各ユーザーに最も近いサーバーからデータへの要求に応えることが可能になっています。 CDN は通信量の影響を受けにくい高速なサービスを実現します。
 
 CDN は、 Bootstrap や jQuery など、スタイルシートや JavaScript ファイル（静的ファイル）からなるライブラリを配信するために広く用いられています。これらのサードパーティライブラリの配信に CDN を用いることが有効な理由はいくつかあります。
diff --git a/files/ja/glossary/certificate_authority/index.md b/files/ja/glossary/certificate_authority/index.md
index c99605ae96f710..a150f5f2aaae04 100644
--- a/files/ja/glossary/certificate_authority/index.md
+++ b/files/ja/glossary/certificate_authority/index.md
@@ -3,6 +3,8 @@ title: Certificate authority (認証局)
 slug: Glossary/Certificate_authority
 ---
 
+{{GlossarySidebar}}
+
 認証局 (CA) は、{{Glossary("Digital certificate", "デジタル証明書")}}とそれに関連する{{Glossary("Key", "公開鍵")}}に{{Glossary("Signature/Security", "署名")}}し、含まれる情報と鍵が正しいことを保証する組織です。
 
 ウェブサイトのデジタル証明書については、この情報には少なくともデジタル証明書を要求した組織 (例: Mozilla Corporation)、そのサイト (例: mozilla.org)、および認証局が含まれます。
diff --git a/files/ja/glossary/certified/index.md b/files/ja/glossary/certified/index.md
index 302a0a6477fa64..521559607df8f7 100644
--- a/files/ja/glossary/certified/index.md
+++ b/files/ja/glossary/certified/index.md
@@ -3,6 +3,8 @@ title: Certified
 slug: Glossary/Certified
 ---
 
+{{GlossarySidebar}}
+
 **認証済み**とは、アプリケーションやコンテンツ、データの伝達が、関連する分野の専門性を持つ熟練者による評価を受けたことを意味し、従って、完全性、安全性、信頼性を持つことを示します。
 
 {{glossary("Cryptography","暗号化")}}における認証についての詳細は、{{glossary("Digital Certificate","デジタル証明書")}}をご覧ください。
diff --git a/files/ja/glossary/challenge/index.md b/files/ja/glossary/challenge/index.md
index eb06a348405a1e..866830d31fbd5a 100644
--- a/files/ja/glossary/challenge/index.md
+++ b/files/ja/glossary/challenge/index.md
@@ -3,6 +3,8 @@ title: Challenge-response authentication (チャレンジレスポンス認証)
 slug: Glossary/Challenge
 ---
 
+{{GlossarySidebar}}
+
 セキュリティプロトコルでは、チャレンジは、毎回異なるレスポンス（応答）を生成するために、サーバーによってクライアントに送信されるデータです。 チャレンジレスポンスプロトコルは、攻撃者が元のメッセージを聞いて、後でそれ再送信して元のメッセージと同じ資格情報を取得する[反射攻撃](https://ja.wikipedia.org/wiki/反射攻撃)に対抗する 1 つの方法です。
 
 [HTTP 認証プロトコル](/ja/docs/Web/HTTP/Authentication)はチャレンジレスポンスがベースですが、"Basic" プロトコルは実際のチャレンジを使用していません（レルムは常に同じです）。
diff --git a/files/ja/glossary/character/index.md b/files/ja/glossary/character/index.md
index a561eb75e47b59..95dd6b440a247e 100644
--- a/files/ja/glossary/character/index.md
+++ b/files/ja/glossary/character/index.md
@@ -3,6 +3,8 @@ title: Character (文字)
 slug: Glossary/Character
 ---
 
+{{GlossarySidebar}}
+
 文字は、記号（文字、数字、句読点）または、表示されない制御文字（例えば、キャリッジリターンやソフトハイフン）のどちらかです。 {{glossary("UTF-8")}} は最も一般的な文字セットであり、最もポピュラーな自然言語の書記素を含みます。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/character_encoding/index.md b/files/ja/glossary/character_encoding/index.md
index 49512b750a7be6..739e6969ec64d0 100644
--- a/files/ja/glossary/character_encoding/index.md
+++ b/files/ja/glossary/character_encoding/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: a0e987d407b31560bde1f982520ee10103db4ba0
 ---
 
+{{GlossarySidebar}}
+
 エンコーディングはバイト列と文字を対応付けるものです。バイトの並びは文字としてさまざまに解釈できます。特定のエンコーディング（UTF-8 など）を設定することで、バイトの並びがどのように解釈されるかを定めることができます。
 
 例えば、 HTML ではふつう以下のような行を使って UTF-8 の文字エンコーディングを宣言します。
diff --git a/files/ja/glossary/character_set/index.md b/files/ja/glossary/character_set/index.md
index 331d339a82148b..5031ee4cf7c93a 100644
--- a/files/ja/glossary/character_set/index.md
+++ b/files/ja/glossary/character_set/index.md
@@ -3,6 +3,8 @@ title: Character set (文字コード)
 slug: Glossary/Character_set
 ---
 
+{{GlossarySidebar}}
+
 **文字コード**は、コンピューターに{{Glossary("Character", "文字")}} (文字、数字、区切り記号、空白文字などを含む) を理解させるための符号化システムです。
 
 各国では個別の言語が使用されているため、日本語の漢字 JIS コード (例えば Shift-JIS, EUC-JP など)、繁体字中国語の Big5、ロシア語の KOI8-R などのように独自の文字コードを開発しました。しかし、全世界の言語に対応するために、次第に {{Glossary("Unicode")}} が最も利用される文字コードになりました。
diff --git a/files/ja/glossary/chrome/index.md b/files/ja/glossary/chrome/index.md
index 12af5b73274d5c..ba117f9890e4d8 100644
--- a/files/ja/glossary/chrome/index.md
+++ b/files/ja/glossary/chrome/index.md
@@ -3,6 +3,8 @@ title: Chrome (クローム)
 slug: Glossary/Chrome
 ---
 
+{{GlossarySidebar}}
+
 ブラウザーにおいては、クローム (chrome) はブラウザーの中で、ウェブページ自体を除いた見える部分すべて (ツールバー、メニューバー、タブなど) のことです。 {{glossary("Google Chrome")}} ブラウザーと混同しないようにしてください。
 
 ## 詳細
diff --git a/files/ja/glossary/cia/index.md b/files/ja/glossary/cia/index.md
index 6bed12dc5310f7..1ecd647cc32238 100644
--- a/files/ja/glossary/cia/index.md
+++ b/files/ja/glossary/cia/index.md
@@ -3,6 +3,8 @@ title: CIA（Confidentiality, Integrity, Availability）
 slug: Glossary/CIA
 ---
 
+{{GlossarySidebar}}
+
 CIA（CIA トライアド、または AIC トライアドとも呼ばれます）は、秘匿性（Confidentiality）、完全性（Integrity）、可用性（Availability）からなり、情報セキュリティに関する組織の方針のガイドとなるモデルです。
 
 ## 関連項目
diff --git a/files/ja/glossary/cipher/index.md b/files/ja/glossary/cipher/index.md
index f990f935ba06a0..fdc6304b61496f 100644
--- a/files/ja/glossary/cipher/index.md
+++ b/files/ja/glossary/cipher/index.md
@@ -3,6 +3,8 @@ title: Cipher (サイファー)
 slug: Glossary/Cipher
 ---
 
+{{GlossarySidebar}}
+
 {{glossary("cryptography","暗号学")}}では、**サイファー**は{{glossary("plaintext","平文")}}を{{glossary("encryption", "暗号化")}}して読めなくし、それを{{glossary("decryption", "復号")}}するアルゴリズムです。
 
 サイファーは、情報化時代のかなり前から一般的でしたが（例えば、[換字式暗号](https://ja.wikipedia.org/wiki/換字式暗号)、[転置式暗号](https://ja.wikipedia.org/wiki/転置式暗号)）、それらは[ワンタイムパッド](https://ja.wikipedia.org/wiki/ワンタイムパッド)を除いて、どれも暗号的に安全ではありませんでした。
diff --git a/files/ja/glossary/cipher_suite/index.md b/files/ja/glossary/cipher_suite/index.md
index 2959455e8fd0cb..1827207071f3ea 100644
--- a/files/ja/glossary/cipher_suite/index.md
+++ b/files/ja/glossary/cipher_suite/index.md
@@ -3,6 +3,8 @@ title: Cipher suite (暗号スイート)
 slug: Glossary/Cipher_suite
 ---
 
+{{GlossarySidebar}}
+
 暗号スイートは鍵交換アルゴリズム・鍵認証方式・{{glossary("cipher","サイファー")}}・メッセージ認証符号の組み合わせです。
 
 {{Glossary("TLS")}}のような{{glossary("cryptosystem","暗号システム")}}は、サーバとクライアントは安全な通信を始める前に使用する暗号スイートを決定し、同意します。典型的な暗号スイートには ECDHE_RSA_WITH_AES_128_GCM_SHA256 または ECDHE-RSA-AES128-GCM-SHA256 があり、それぞれの単語の意味は
diff --git a/files/ja/glossary/ciphertext/index.md b/files/ja/glossary/ciphertext/index.md
index 8f8abfd6cdeb13..c2ab75e625273a 100644
--- a/files/ja/glossary/ciphertext/index.md
+++ b/files/ja/glossary/ciphertext/index.md
@@ -3,6 +3,8 @@ title: Ciphertext (暗号文)
 slug: Glossary/Ciphertext
 ---
 
+{{GlossarySidebar}}
+
 {{glossary("cryptography","暗号学")}}では、暗号文は情報を伝達するスクランブルされたメッセージですが、正しい{{glossary("cipher","サイファー")}} と正しい秘密（通常は{{glossary("key","鍵")}}）で{{glossary("decryption","復号")}}して元の{{glossary("plaintext","平文")}}を再現しない限り判読できません。 暗号文の安全性、ひいては含まれる情報の安全性は、安全なサイファーを使用し、鍵の秘密を保つことに依存します。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/class/index.md b/files/ja/glossary/class/index.md
index 7b2d3696f3a89e..ec1ab26f5fef11 100644
--- a/files/ja/glossary/class/index.md
+++ b/files/ja/glossary/class/index.md
@@ -3,6 +3,8 @@ title: Class (クラス)
 slug: Glossary/Class
 ---
 
+{{GlossarySidebar}}
+
 {{glossary("OOP","オブジェクト指向プログラミング")}}では、*クラス*は{{glossary("object","オブジェクト")}}の特徴を定義します。クラスはオブジェクトの{{glossary("property","プロパティ")}}や{{glossary("method","メソッド")}}のひな形定義であり、オブジェクトのより具体的なインスタンスが描かれる「青写真」です。
 
 ## 詳細情報
diff --git a/files/ja/glossary/clickjacking/index.md b/files/ja/glossary/clickjacking/index.md
index 7cf69619c39eba..20805caaa19f06 100644
--- a/files/ja/glossary/clickjacking/index.md
+++ b/files/ja/glossary/clickjacking/index.md
@@ -3,6 +3,8 @@ title: Clickjacking
 slug: Glossary/Clickjacking
 ---
 
+{{GlossarySidebar}}
+
 クリックジャッキングとは、ウェブサイトの利用者をだまして、悪意のあるリンクを無意識にクリックさせるインターフェイスベースの攻撃です。クリックジャッキングでは、攻撃者は、ウェブサイト内のボタンや正規のページに悪意のあるリンクを埋め込みます。攻撃が仕込まれた{{glossary("Site", "サイト")}}では、ユーザーが正規のリンクをクリックするたびに、攻撃者はそのユーザーの機密情報を取得し、最終的にインターネット上でのユーザーのプライバシーを侵害することになります。
 
 クリックジャッキングは、[Content Security Policy (frame-ancestors)](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) の実装と、[Set-Cookie 属性](/ja/docs/Web/HTTP/Headers/Set-Cookie#属性)の実装により防ぐことができます。
diff --git a/files/ja/glossary/closure/index.md b/files/ja/glossary/closure/index.md
index fe72956c831cbd..b48eddcba7d0f6 100644
--- a/files/ja/glossary/closure/index.md
+++ b/files/ja/glossary/closure/index.md
@@ -3,6 +3,8 @@ title: Closure (クロージャ)
 slug: Glossary/Closure
 ---
 
+{{GlossarySidebar}}
+
 実行**{{glossary("scope","範囲")}}**を定義するバインディングのこと。{{glossary("JavaScript")}}では、**{{glossary("function","関数")}}**は閉じたコンテキストを作成します。
 
 ## 関連項目
diff --git a/files/ja/glossary/cms/index.md b/files/ja/glossary/cms/index.md
index f72aa006cfafc2..ffbaa248266467 100644
--- a/files/ja/glossary/cms/index.md
+++ b/files/ja/glossary/cms/index.md
@@ -3,6 +3,8 @@ title: CMS
 slug: Glossary/CMS
 ---
 
+{{GlossarySidebar}}
+
 CMS (Content Management System, コンテンツ管理システム) とは、ユーザーに色々な種類のコンテンツ (テキストだけでなく組み込み画像、動画、音声、インタラクティブなコードも) の発行、編集、変更、削除ができるようにするソフトウェアです。
 
 ## 詳細情報
diff --git a/files/ja/glossary/code_point/index.md b/files/ja/glossary/code_point/index.md
index cb70140211ce86..9b6d90d97d7fb6 100644
--- a/files/ja/glossary/code_point/index.md
+++ b/files/ja/glossary/code_point/index.md
@@ -3,6 +3,8 @@ title: Code point (コードポイント)
 slug: Glossary/Code_point
 ---
 
+{{GlossarySidebar}}
+
 **コードポイント**は、 (Unicode などの) テキストを表現するシステムにおいて、抽象文字を表現するために割り当てられた番号のことです。 Unicode では、コードポイントは、 "U+1234" という形式で表現されます。ここで「1234」が割り当てられた番号です。例えば、 "A" という文字には、 U+0041 というコードポイントが割り当てられています。
 
 UTF-8 や UTF-16 などの文字エンコーディング形式では、 Unicode のコードポイントをバイト列としてどのように符号化するべきかを決めています。エンコーディング形式が異なると、同じコードポイントが異なるバイト列に符号化される場合もあります。例えば、コードポイントが U+0424 であるキリル文字 "Ф" は、 UTF-8 では `0xd0a4` として符号化され、 UTF-16 では `0x0424` として符号化されます。
diff --git a/files/ja/glossary/code_splitting/index.md b/files/ja/glossary/code_splitting/index.md
index 1c06c9b61bc365..d97863f73fc633 100644
--- a/files/ja/glossary/code_splitting/index.md
+++ b/files/ja/glossary/code_splitting/index.md
@@ -3,6 +3,8 @@ title: Code splitting (コード分割)
 slug: Glossary/Code_splitting
 ---
 
+{{GlossarySidebar}}
+
 **コード分割**とは、コードをさまざまなバンドルまたはコンポーネントに分割することです。そうすることで、必要に応じて特定のコンポーネントのみを読み込んだり、並列で読み込んだりすることを可能にします。
 
 たとえアプリケーションの複雑さが増すことなく、シンプルに維持されるとしても、CSS や JavaScript、バンドルといったファイルのサイズは増大するのが普通です。特にサードパーティのライブラリを導入していた場合、それらのファイルサイズ増大に伴ってアプリケーションのサイズも増します。そうした大きくなってしまったファイルを読み込むことを避けるために、コード分割を実施します。
diff --git a/files/ja/glossary/code_unit/index.md b/files/ja/glossary/code_unit/index.md
index 923769d486091e..f51da80b73b380 100644
--- a/files/ja/glossary/code_unit/index.md
+++ b/files/ja/glossary/code_unit/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 1e0e8f74b6e22d43be7d7e63693a1ca4016cb291
 ---
 
+{{GlossarySidebar}}
+
 **コードユニット** とは、文字エンコーディングシステムで用いられる UTF-8 や UTF-16 といった基本的構成要素です。文字エンコーディングシステムは Unicode {{Glossary("code point","コードポイント")}} をエンコードするためにひとつもしくは複数のコードユニットを用います。
 
 UTF-16 （ JavaScript 文字列で用いられるエンコーディングシステム）では、コードユニットは 16 ビットの値です。このことはつまり、文字列にインデックスを付けたり、文字列の長さを取得するためのオペレーションは、これらの 16 ビットユニット上で操作されることを意味します。これらのユニットは我々が文字列と考えるものと常に 1 対 1 で関連付けるわけではありません。
diff --git a/files/ja/glossary/codec/index.md b/files/ja/glossary/codec/index.md
index 28e35b056b3b17..d54e9e6781bc0e 100644
--- a/files/ja/glossary/codec/index.md
+++ b/files/ja/glossary/codec/index.md
@@ -3,6 +3,8 @@ title: Codec (コーデック)
 slug: Glossary/Codec
 ---
 
+{{GlossarySidebar}}
+
 コーデック（"_**co**\_der-_**dec**\_oder" から派生したかばん語）は、データストリームを符号化または復号するプログラム、アルゴリズム、またはデバイスです。特定のコーデックは、特定の符号化または圧縮技術の取扱方法を知っています。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/compile/index.md b/files/ja/glossary/compile/index.md
index 6728de9d564551..dba72c981a01d3 100644
--- a/files/ja/glossary/compile/index.md
+++ b/files/ja/glossary/compile/index.md
@@ -3,6 +3,8 @@ title: Compile (コンパイル)
 slug: Glossary/Compile
 ---
 
+{{GlossarySidebar}}
+
 コンパイルとは、特定の{{Glossary("computer programming", "プログラミング言語")}}を用いて記述されたコンピュータープログラムを他の言語 (普通はコンピューターが実行できるバイナリ言語) を用いて記述された同じプログラムに形を変えることである。コンパイラーはこのタスクを実行するソフトウェアです。時々、このタスクは "アセンブル" や "ビルド" とも呼ばれて、典型的には単なるコンパイルの完了以上のことを示します。例えば、あるバイナリーフォーマットにパッケージするなど。
 
 通常、コンパイラーは C や{{Glossary("Java")}} のように人間が理解しやすい高級言語をアセンブリのような CPU が理解できる機械語に変換します。TypeScript を {{Glossary("JavaScript")}} にコンパイルするような、同レベル間の言語を翻訳するコンパイラーはトランスパイラやクロスコンパイラーと呼ばれます。これらはプロダクティビティツールと考えられています。
diff --git a/files/ja/glossary/compile_time/index.md b/files/ja/glossary/compile_time/index.md
index eed47b8a90da09..77a619e463f708 100644
--- a/files/ja/glossary/compile_time/index.md
+++ b/files/ja/glossary/compile_time/index.md
@@ -3,6 +3,8 @@ title: Compile time (コンパイル時間)
 slug: Glossary/Compile_time
 ---
 
+{{GlossarySidebar}}
+
 コンパイル時間は、プログラムが最初にロードされてからプログラムが{{Glossary("parse","解析")}}されるまでの時間です。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/computer_programming/index.md b/files/ja/glossary/computer_programming/index.md
index 20802816f8eaae..ad00208ff2454f 100644
--- a/files/ja/glossary/computer_programming/index.md
+++ b/files/ja/glossary/computer_programming/index.md
@@ -3,6 +3,8 @@ title: Computer Programming (コンピュータープログラミング)
 slug: Glossary/Computer_Programming
 ---
 
+{{GlossarySidebar}}
+
 コンピュータープログラミングは、一連の命令を構成して体系化する処理です。これらがコンピューター/ソフトウェアのプログラムに何をするべきかを、コンピューターが理解できる言語で指示します。これらの命令は様々なプログラミング言語（C++, Java, JavaScript, HTML, Python, Ruby, Rust など）の形で与えられています。
 
 適切な言語を使用して、すべての種類のソフトウェアをプログラム/作成できます。例えば、科学者の複雑な計算を手助けするプログラム、大量のデータを格納するデータベース、音楽をダウンロードできるウェブサイト、アニメーション動画を作成できるアニメーションソフトウェアなどです。
diff --git a/files/ja/glossary/conditional/index.md b/files/ja/glossary/conditional/index.md
index acda196211150a..af47d02ecbfe95 100644
--- a/files/ja/glossary/conditional/index.md
+++ b/files/ja/glossary/conditional/index.md
@@ -3,6 +3,8 @@ title: Conditional (条件式)
 slug: Glossary/Conditional
 ---
 
+{{GlossarySidebar}}
+
 **条件** とは、条件式が満たされるか否かによって、通常のコード実行を強制停止したり、変更したりする、一連のルールです。
 
 特定の条件が満たされる場合、1 つの命令または一連の命令が実行されます。それ以外では、他の命令が実行されます。1 つの命令または一連の命令の実行を、条件がまだ満たされない間に繰り返すこともできます。
diff --git a/files/ja/glossary/constant/index.md b/files/ja/glossary/constant/index.md
index 0681696d72bfae..ea23d0c6f388ed 100644
--- a/files/ja/glossary/constant/index.md
+++ b/files/ja/glossary/constant/index.md
@@ -3,6 +3,8 @@ title: Constant (定数)
 slug: Glossary/Constant
 ---
 
+{{GlossarySidebar}}
+
 定数とはプログラマーが変更できない値のことです。例えば、数値 (1, 2, 42) です。一方、{{glossary("variable","変数")}}の場合、プログラマーは既に使用されている変数名に新しい{{glossary("value","値")}}を割り当てられます。
 
 変数と同様に、定数を識別子に割り当てられることがあります。例えば、`pi` という識別子に 3.14... (円周率) を割り当てることがあります。
diff --git a/files/ja/glossary/constructor/index.md b/files/ja/glossary/constructor/index.md
index bc65036358098c..4c2c571eb40b59 100644
--- a/files/ja/glossary/constructor/index.md
+++ b/files/ja/glossary/constructor/index.md
@@ -3,6 +3,8 @@ title: Constructor (コンストラクター)
 slug: Glossary/Constructor
 ---
 
+{{GlossarySidebar}}
+
 **コンストラクター**は、インスタンス化された特定のクラス{{glossary("object","オブジェクト")}}に属しています。コンストラクターは、そのオブジェクトを初期化し、オブジェクトの非公開の情報にアクセスできるようにします。コンストラクターの概念は、ほとんどの{{glossary("OOP","オブジェクト指向プログラミング")}}言語にあります。本質的に、{{glossary("JavaScript")}} のコンストラクターは{{glossary("class","クラス")}}のインスタンスで宣言します。
 
 ## 構文
diff --git a/files/ja/glossary/continuous_media/index.md b/files/ja/glossary/continuous_media/index.md
index 58ec1b624e45cd..1266a07460569c 100644
--- a/files/ja/glossary/continuous_media/index.md
+++ b/files/ja/glossary/continuous_media/index.md
@@ -3,6 +3,8 @@ title: 連続的メディア (Continuous Media)
 slug: Glossary/Continuous_Media
 ---
 
+{{GlossarySidebar}}
+
 連続的なメディアは、元と送り先の間にタイミングの関連があるデータです。最もよくある例は、オーディオやモーションビデオです。連続的なメディアは、元と送り先に「強い」タイミング関連があるリアルタイム (インタラクティブ)であったり、関連はそこまで厳しくないストリーミング (プレイバック)であったりします。
 
 CSS は印刷媒体を含むさまざまなコンテンツに使われ、いくつかの CSS、とりわけレイアウトに使われるものでは、文脈に応じてさまざまに振る舞います。
diff --git a/files/ja/glossary/control_flow/index.md b/files/ja/glossary/control_flow/index.md
index c633f8bb67991f..0da791ccb39d7d 100644
--- a/files/ja/glossary/control_flow/index.md
+++ b/files/ja/glossary/control_flow/index.md
@@ -3,6 +3,8 @@ title: Control flow (制御フロー)
 slug: Glossary/Control_flow
 ---
 
+{{GlossarySidebar}}
+
 _制御フロー_（制御の流れ）は、コンピューターがスクリプト内の文を実行する順序です。
 
 条件やループなどの（非常によく出てくる）制御フローを変更する構造にコンピューターが出合わない限り、コードはファイルの最初の行から順に最後の行まで実行します。
diff --git a/files/ja/glossary/cookie/index.md b/files/ja/glossary/cookie/index.md
index 3a2dce2f7811cd..529521b922d8a5 100644
--- a/files/ja/glossary/cookie/index.md
+++ b/files/ja/glossary/cookie/index.md
@@ -3,6 +3,8 @@ title: Cookie
 slug: Glossary/Cookie
 ---
 
+{{GlossarySidebar}}
+
 Cookie は、ウェブサイトによってウェブブラウザーを通じて訪問者のコンピューター上に残される小さな情報です。
 
 Cookie はウェブサイトのウェブ体験を個人化するために使用されます。ウェブサイトにアクセスする際のユーザーの設定や入力を含む場合もあります。ユーザーはウェブブラウザーを設定して Cookie の受け入れや拒否、削除を行うことができます。
diff --git a/files/ja/glossary/copyleft/index.md b/files/ja/glossary/copyleft/index.md
index d6b2f801208de6..5f8cc01ebc6075 100644
--- a/files/ja/glossary/copyleft/index.md
+++ b/files/ja/glossary/copyleft/index.md
@@ -3,6 +3,8 @@ title: Copyleft (コピーレフト)
 slug: Glossary/Copyleft
 ---
 
+{{GlossarySidebar}}
+
 コピーレフトは、一般的にライセンス（使用許諾）を示す用語です。当該作品を再配布する際に、オリジナルと同じライセンスを適用することが求められるような作品のライセンスを表します。コピーレフトライセンスの例として GNU {{Glossary("GPL")}} （ソフトウェア向け）や Creative Commons SA（Share Alike）（アート作品向け）があります。
 
 ## 関連項目
diff --git a/files/ja/glossary/cors-safelisted_request_header/index.md b/files/ja/glossary/cors-safelisted_request_header/index.md
index 89da2821b16fa6..1c1da1f1a2a3ff 100644
--- a/files/ja/glossary/cors-safelisted_request_header/index.md
+++ b/files/ja/glossary/cors-safelisted_request_header/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 4bd65a01204446af2254bb8864bd22ad87bc86b0
 ---
 
+{{GlossarySidebar}}
+
 [CORS セーフリストリクエストヘッダー](https://fetch.spec.whatwg.org/#cors-safelisted-request-header)は、次の [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers)のうちの一つです:
 
 - {{HTTPHeader("Accept")}}
diff --git a/files/ja/glossary/cors-safelisted_response_header/index.md b/files/ja/glossary/cors-safelisted_response_header/index.md
index 7157bbf0ffda84..655edca042fa93 100644
--- a/files/ja/glossary/cors-safelisted_response_header/index.md
+++ b/files/ja/glossary/cors-safelisted_response_header/index.md
@@ -3,6 +3,8 @@ title: CORS-safelisted response header (CORS セーフリストレスポンス
 slug: Glossary/CORS-safelisted_response_header
 ---
 
+{{GlossarySidebar}}
+
 _CORS セーフリストレスポンスヘッダー_ は、[CORS](/ja/docs/Web/HTTP/CORS) レスポンスに含まれる [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers)で、クライアントスクリプトに公開しても _安全_ であると見なされます。セーフリストに含まれたレスポンスヘッダーのみがウェブページで利用できます。
 
 既定では以下のレスポンスヘッダーがセーフリストに含まれます。
diff --git a/files/ja/glossary/cors/index.md b/files/ja/glossary/cors/index.md
index 59c8f6ca6e60ed..9b0eb49da59940 100644
--- a/files/ja/glossary/cors/index.md
+++ b/files/ja/glossary/cors/index.md
@@ -3,6 +3,8 @@ title: CORS
 slug: Glossary/CORS
 ---
 
+{{GlossarySidebar}}
+
 **CORS** (オリジン間リソース共有、 Cross-Origin Resource Sharing) は、 {{Glossary("Header", "HTTP ヘッダー")}}の転送で構成されるシステムであり、ブラウザーがオリジンをまたいだリクエストのレスポンスに、フロントエンドの JavaScript コードがアクセスすることをブロックするかどうかを決めるものです。
 
 [同一オリジンセキュリティポリシー](/ja/docs/Web/Security/Same-origin_policy)は、既定でリソースへのオリジン間のアクセスを禁止しています。しかし、 CORS はウェブサーバーに、リソースへのオリジンをまたいだアクセスを許可すると言うことができるようにします。
@@ -38,5 +40,3 @@ slug: Glossary/CORS
 ### 技術リファレンス
 
 - [Fetch specification](https://fetch.spec.whatwg.org)
-
-{{QuickLinksWithSubpages("/ja/docs/Glossary")}}
diff --git a/files/ja/glossary/crawler/index.md b/files/ja/glossary/crawler/index.md
index 55cb90023d138d..dd5cf6632fd389 100644
--- a/files/ja/glossary/crawler/index.md
+++ b/files/ja/glossary/crawler/index.md
@@ -3,6 +3,8 @@ title: Crawler (クローラー)
 slug: Glossary/Crawler
 ---
 
+{{GlossarySidebar}}
+
 ウェブクローラーは、よく bot や robot と呼ばれ、ウェブページからデータを収集するために自動的に{{glossary("World Wide Web","ウェブ")}}を閲覧するものです。一般的に、 (Google や Bing などの) 検索エンジンは、クローラーを用いてインデックスを構築します。
 
 ## 理解を深める
diff --git a/files/ja/glossary/crlf/index.md b/files/ja/glossary/crlf/index.md
index 4f08af2a3b26a5..fed3df68f7d866 100644
--- a/files/ja/glossary/crlf/index.md
+++ b/files/ja/glossary/crlf/index.md
@@ -3,6 +3,8 @@ title: CRLF
 slug: Glossary/CRLF
 ---
 
+{{GlossarySidebar}}
+
 CR と LF はテキストファイルで改行に用いることができる[制御文字](https://ja.wikipedia.org/wiki/%E5%88%B6%E5%BE%A1%E6%96%87%E5%AD%97)または[バイトコード](https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89)です。</p>
 
 - CR = **キャリッジリターン** (`\r`、16 進数で `0x0D`、10 進数で 13) — 次の行へ進まずに、カーソルを行の先頭へ移動する。
diff --git a/files/ja/glossary/cross-site_scripting/index.md b/files/ja/glossary/cross-site_scripting/index.md
index f7bccfc8903b42..736852ac3a23f3 100644
--- a/files/ja/glossary/cross-site_scripting/index.md
+++ b/files/ja/glossary/cross-site_scripting/index.md
@@ -3,6 +3,8 @@ title: Cross-site scripting (クロスサイトスクリプティング)
 slug: Glossary/Cross-site_scripting
 ---
 
+{{GlossarySidebar}}
+
 クロスサイトスクリプティング (XSS) とは、悪意あるクライアントサイドのコードをウェブサイトに挿入するセキュリティ攻撃です。挿入されたコードは被害者のブラウザー上で実行され、アクセス制限の回避やユーザーへのなりすましなどにつながります。Open Web Application Security Project の調べによると、XSS は 2017 年において [7 番目に多いウェブアプリの脆弱性](<https://owasp.org/www-project-top-ten/OWASP_Top_Ten_2017/Top_10-2017_A7-Cross-Site_Scripting_(XSS)>)でした。
 
 この攻撃が成功してしまうのは、ウェブアプリにバリデーションとエンコーディングが十分に実装されていない場合です。ユーザーのブラウザーは、悪意あるスクリプトを信頼できないものとして検知できません。そのため、任意の Cookie やセッショントークン、ウェブサイト固有の機密情報などにアクセスされたり、悪意あるスクリプトによって {{glossary("HTML")}} のコンテンツが書き換えられてしまったりします。
diff --git a/files/ja/glossary/cross_axis/index.md b/files/ja/glossary/cross_axis/index.md
index f97550146df097..2e9c8cd4176926 100644
--- a/files/ja/glossary/cross_axis/index.md
+++ b/files/ja/glossary/cross_axis/index.md
@@ -3,6 +3,8 @@ title: Cross Axis (交差軸)
 slug: Glossary/Cross_Axis
 ---
 
+{{GlossarySidebar}}
+
 {{glossary("flexbox", "フレックスボックス")}} における交差軸 (cross axis / クロス軸) は、{{glossary("main axis", "主軸")}} (main axis / メイン軸) と交差する軸で、{{cssxref("flex-direction")}} が `row` または `row-reverse` であるとき (つまり主軸が行方向であるとき)、列方向の軸のことです。
 
 ![列方向の交差軸](basics3.png)
diff --git a/files/ja/glossary/crud/index.md b/files/ja/glossary/crud/index.md
index 100811f2133b07..e40da28d4cfbd7 100644
--- a/files/ja/glossary/crud/index.md
+++ b/files/ja/glossary/crud/index.md
@@ -3,6 +3,8 @@ title: CRUD
 slug: Glossary/CRUD
 ---
 
+{{GlossarySidebar}}
+
 **CRUD** (Create, Read, Update, Delete) は、格納されたデータの操作を行う方法の頭文字をとった語です。永続化されたストレージの 4 つの基本的な機能を覚えるのに役立ちます。CRUD は通常、データベースやデータストアに対する操作を示しますが、データが実際には削除されずに、状態によって削除されたと扱われる「ソフトデリート」のような、アプリケーションの上位レベルの機能にも適用できます。
 
 ## 関連項目
diff --git a/files/ja/glossary/cryptanalysis/index.md b/files/ja/glossary/cryptanalysis/index.md
index 1ecdbdb7f6a305..32a44f9e82434b 100644
--- a/files/ja/glossary/cryptanalysis/index.md
+++ b/files/ja/glossary/cryptanalysis/index.md
@@ -3,6 +3,8 @@ title: Cryptanalysis (暗号解読)
 slug: Glossary/Cryptanalysis
 ---
 
+{{GlossarySidebar}}
+
 暗号解読は、[コード](<https://ja.wikipedia.org/wiki/コード_(暗号)>)と暗号システムを破る方法を研究する{{glossary("cryptography","暗号学")}}の分野です。暗号解読は、特に[力まかせ探索](https://ja.wikipedia.org/wiki/力まかせ探索)よりも効率的な方法によって、{{glossary("cipher","暗号")}}を破る技術を作り出す。[頻度分析](<https://ja.wikipedia.org/wiki/頻度分析_(暗号)>)や[偶然性の指標](http://en.wikipedia.org/wiki/Index_of_coincidence)などの従来の方法に加えて、解読法には[線形解読法](https://ja.wikipedia.org/wiki/線形解読法)や[差分解読法](https://ja.wikipedia.org/wiki/差分解読法)などの最新の方法があり、より高度な暗号を破ることができます。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/cryptographic_hash_function/index.md b/files/ja/glossary/cryptographic_hash_function/index.md
index c0d5c5344c7cdd..956ee03e4bed96 100644
--- a/files/ja/glossary/cryptographic_hash_function/index.md
+++ b/files/ja/glossary/cryptographic_hash_function/index.md
@@ -3,6 +3,8 @@ title: Cryptographic hash function (暗号学的ハッシュ関数)
 slug: Glossary/Cryptographic_hash_function
 ---
 
+{{GlossarySidebar}}
+
 暗号学的ハッシュ関数は、*ダイジェスト関数*とも呼ばれますが、任意のサイズのメッセージを{{glossary("digest","ダイジェスト")}}と呼ばれる固定サイズのメッセージに変換する{{glossary("cryptography", "暗号学的")}}プリミティブです。暗号学的ハッシュ関数は、認証、{{Glossary("digital signature", "デジタル署名")}}、および{{Glossary("HMAC", "メッセージ認証コード")}}に使用されます。
 
 暗号学に使用するためには、ハッシュ関数は以下の性質を持っていなければなりません。
diff --git a/files/ja/glossary/interpolation/index.md b/files/ja/glossary/interpolation/index.md
new file mode 100644
index 00000000000000..2d336bdf958548
--- /dev/null
+++ b/files/ja/glossary/interpolation/index.md
@@ -0,0 +1,15 @@
+---
+title: Interpolation (補間)
+slug: Glossary/Interpolation
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+補間は、既知の値に基づいて値を計算する処理です。補間は、アニメーションの過程で、高さや幅などのプロパティの中間値を取得するために使用します。グラデーションでは、指定された色のリストに基づいて色の中間値を定義するために補間を使用します。また、「補間」という用語は、テンプレートリテラルを使用する文字列の置換の説明としても使用されています。
+
+## 関連情報
+
+- [補間](https://ja.wikipedia.org/wiki/補間) (Wikipedia)
+- [文字列補間](https://ja.wikipedia.org/wiki/文字列補間) (Wikipedia)
diff --git a/files/ja/glossary/seo/index.md b/files/ja/glossary/seo/index.md
index 554b1ffa486d52..0e387493091078 100644
--- a/files/ja/glossary/seo/index.md
+++ b/files/ja/glossary/seo/index.md
@@ -3,6 +3,8 @@ title: SEO
 slug: Glossary/SEO
 ---
 
+{{GlossarySidebar}}
+
 **SEO** (Search Engine Optimization, 検索エンジン最適化)は、検索結果上であるウェブサイトをより目立たさせるための過程です。検索ランキングの改善とも言えます。
 
 検索エンジンはページからページへリンクをたどりながらウェブを{{Glossary("Crawler", "クロール")}}し、見つけたコンテンツをインデックスに登録します。検索をしたときに、検索エンジンはインデックスに登録されたコンテンツを表示します。クローラーには従うルールがあります。ウェブサイトのために SEO をする時に、そのルールに近づければ、そのサイトに検索結果の上位に上げる機会を与えることが可能になり、トラフィックと（e コマースと広告の場合）収益が向上する可能性があります。
diff --git a/files/ja/glossary/serialization/index.md b/files/ja/glossary/serialization/index.md
index 30bb35deb30823..8b50a3dd29d148 100644
--- a/files/ja/glossary/serialization/index.md
+++ b/files/ja/glossary/serialization/index.md
@@ -3,6 +3,8 @@ title: Serialization (シリアライズ)
 slug: Glossary/Serialization
 ---
 
+{{GlossarySidebar}}
+
 オブジェクトまたはデータ構造が、ネットワークまたはストレージ（例えば、[アレイバッファ](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)またはファイルフォーマット）上の転送に適したフォーマットに変換されるプロセス。
 
 たとえば {{Glossary("JavaScript")}} では、{{jsxref("JSON.stringify()")}} {{Glossary("function","関数")}}を呼び出して、オブジェクトを {{Glossary("JSON")}} {{Glossary("string","文字列")}}にシリアライズできます。
diff --git a/files/ja/glossary/server/index.md b/files/ja/glossary/server/index.md
index 44b36c7d6479d1..d29b903d64c977 100644
--- a/files/ja/glossary/server/index.md
+++ b/files/ja/glossary/server/index.md
@@ -3,6 +3,8 @@ title: Server (サーバー)
 slug: Glossary/Server
 ---
 
+{{GlossarySidebar}}
+
 サーバーは、ふつうはクライアントと呼ばれるユーザーにサービスを提供するソフトウェアまたはハードウェアです。ハードウェアとしてのサーバーはネットワーク上で共有されるコンピューターであり、ふつうは性能が高く、データセンターに格納されています。ソフトウェアとしてのサーバーは (よくハードウェアとしてのサーバーの上で動作しています)、クライアントプログラムにサービスを提供するプログラム、または人間のクライアントに対する{{glossary("UI","ユーザーインターフェイス")}}です。
 
 サービスは一般に、ローカルエリアネットワークまたはインターネットのような広域ネットワークで提供されます。クライアントプログラムとサーバープログラムは、慣例上、{{glossary("protocol", "プロトコル")}}を用いてエンコードされたメッセージを渡すことで接続をします。
@@ -19,5 +21,3 @@ slug: Glossary/Server
 
 - [サーバー入門](/ja/Learn/What_is_a_web_server)
 - Wikipedia 上の記事「[サーバー](https://ja.wikipedia.org/wiki/サーバー)」
-
-{{QuickLinksWithSubpages("/ja/docs/Glossary")}}
diff --git a/files/ja/glossary/server_timing/index.md b/files/ja/glossary/server_timing/index.md
index cc510bce5c7dbc..38c87178c4df4e 100644
--- a/files/ja/glossary/server_timing/index.md
+++ b/files/ja/glossary/server_timing/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: f4f8e2f18ccf19a0bee59e1fe78753e276b98232
 ---
 
+{{GlossarySidebar}}
+
 [Server Timing specification](https://www.w3.org/TR/server-timing/) は、サーバーがリクエストとレスポンスのサイクルからユーザーエージェントにパフォーマンス指標を伝達することを可能にします。また、アプリケーションの配信を最適化するために、JavaScript のインターフェイスを利用して、アプリケーションがこれらの指標を収集・処理・動作することを可能にします。
 
 ## 関連情報
diff --git a/files/ja/glossary/sgml/index.md b/files/ja/glossary/sgml/index.md
index bdb69f0dde1a0c..ecd7d41bfcb4ae 100644
--- a/files/ja/glossary/sgml/index.md
+++ b/files/ja/glossary/sgml/index.md
@@ -3,6 +3,8 @@ title: SGML
 slug: Glossary/SGML
 ---
 
+{{GlossarySidebar}}
+
 _Standard Generalized Markup Language_ (**SGML**) は、宣言型のマークアップ言語を定義するための {{Glossary("ISO")}} 規格です。
 
 ウェブにおいて、{{Glossary("HTML")}} 4、 {{Glossary("XHTML")}}、 {{Glossary("XML")}} は広く普及した SGML ベースの言語です。HTML は、第 5 版からもはや SGML を基にしておらず、独自の構文解析規則をもつ点は注意が必要です。
diff --git a/files/ja/glossary/shadow_tree/index.md b/files/ja/glossary/shadow_tree/index.md
index eb2abbd58d9c69..3f77987a9f66d9 100644
--- a/files/ja/glossary/shadow_tree/index.md
+++ b/files/ja/glossary/shadow_tree/index.md
@@ -3,6 +3,8 @@ title: Shadow tree
 slug: Glossary/Shadow_tree
 ---
 
+{{GlossarySidebar}}
+
 **Shadow ツリー** は DOM {{Glossary("node", "nodes")}} のツリーで、最上位のノードは **Shadow ルート** ( **Shadow DOM** 内にある最上位のノード) です。Shadow ツリーは標準的な DOM から隠されたツリーで、標準的な DOM ノードがホストになります。 隠されたノードは通常の DOM の機能では直接確認できませんが、特殊な [Shadow DOM API](/ja/docs/Web/API/Web_components/Using_shadow_DOM) を使うとアクセスすることができます。
 
 Shadow ツリー内のノードは Shadow ツリーの外部の影響を一切受けません。逆に Shadow ツリーの外部は Shadow ツリー内の影響を一切受けません。これにより細かい実装をカプセル化することができ、特に [custom elements](/ja/docs/User:Andreas_Wuest/Custom_Elements) や他の先進的なデザインパラダイムの実装に便利です。
diff --git a/files/ja/glossary/shallow_copy/index.md b/files/ja/glossary/shallow_copy/index.md
index 61d56d22b5b68a..c85e87eb245a2e 100644
--- a/files/ja/glossary/shallow_copy/index.md
+++ b/files/ja/glossary/shallow_copy/index.md
@@ -5,7 +5,7 @@ l10n:
   sourceCommit: 04e75ce1f83a591a576f52b143f195133bfcbe96
 ---
 
-{{MDNSidebar}}
+{{GlossarySidebar}}
 
 オブジェクトの**シャローコピー**とは、コピーがコピー元のオブジェクトとプロパティにおいて同じ参照を共有する（同じ基礎値を指す）コピーのことを指します。その結果、コピー元とコピー先のどちらかを変更すると、もう一方のオブジェクトも変更される可能性があります。そのため、意図せずにコピー元やコピー先に予期しない変更が発生してしまう可能性があります。この挙動は、ソースとコピーが完全に独立している[ディープコピー](/ja/docs/Glossary/Deep_copy)の挙動とは対照的です。
 
diff --git a/files/ja/glossary/shim/index.md b/files/ja/glossary/shim/index.md
index 5a5712faeb6bf1..11ca3326c5a611 100644
--- a/files/ja/glossary/shim/index.md
+++ b/files/ja/glossary/shim/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 0ed71747051ea80a842c7b4dc16765cf97ad2122
 ---
 
+{{GlossarySidebar}}
+
 **シム** (shim) とは、すでに存在するコードの動作を修正するために使用されるコードの一部で、通常は問題を回避する新しいAPIを追加することで動作します。古いブラウザーにサポートされていない新しい API を実装する{{Glossary("polyfill","ポリフィル")}}とは異なります。
 
 ## 関連情報
diff --git a/files/ja/glossary/signature/function/index.md b/files/ja/glossary/signature/function/index.md
index 63a534a169ef80..6a3364cf620269 100644
--- a/files/ja/glossary/signature/function/index.md
+++ b/files/ja/glossary/signature/function/index.md
@@ -3,6 +3,8 @@ title: Signature (functions) (シグネチャ (関数))
 slug: Glossary/Signature/Function
 ---
 
+{{GlossarySidebar}}
+
 **関数シグネチャ** (もしくは型シグネチャ、メソッドシグネチャ) は{{Glossary("Function", "関数")}}や{{Glossary("Method", "メソッド")}}の入力と出力を定義します。
 
 シグネチャは以下のものを含みます:
diff --git a/files/ja/glossary/signature/index.md b/files/ja/glossary/signature/index.md
index e4377b9b4c87fc..d6b18a70a5855a 100644
--- a/files/ja/glossary/signature/index.md
+++ b/files/ja/glossary/signature/index.md
@@ -3,6 +3,8 @@ title: Signature (シグネチャ)
 slug: Glossary/Signature
 ---
 
+{{GlossarySidebar}}
+
 **シグネチャ**は状況によって色々な意味を持ちます。
 こちらを参照してください。
 
diff --git a/files/ja/glossary/signature/security/index.md b/files/ja/glossary/signature/security/index.md
index ac8f27b70fe6d0..682b401f34afac 100644
--- a/files/ja/glossary/signature/security/index.md
+++ b/files/ja/glossary/signature/security/index.md
@@ -3,6 +3,8 @@ title: Signature (署名 (セキュリティ) )
 slug: Glossary/Signature/Security
 ---
 
+{{GlossarySidebar}}
+
 **署名** もしくは*デジタル署名*とは、メッセージが正当であることを示す {{glossary("protocol", "プロトコル")}} です。
 
 **署名プロセス**では最初に、与えられたメッセージの{{glossary("hash", "ハッシュ")}}から、署名する主体にリンクされたデジタル署名を、主体の秘密{{glossary("key", "鍵")}}を用いて生成します。
diff --git a/files/ja/glossary/simd/index.md b/files/ja/glossary/simd/index.md
index 987d359fb86b5e..5e5033c5f9b87d 100644
--- a/files/ja/glossary/simd/index.md
+++ b/files/ja/glossary/simd/index.md
@@ -3,6 +3,8 @@ title: SIMD
 slug: Glossary/SIMD
 ---
 
+{{GlossarySidebar}}
+
 SIMD (「シムディー」と発音します) は[コンピュータ・アーキテクチャの分類 (フリンの分類)](https://ja.wikipedia.org/wiki/フリンの分類) の一つである **Single Instruction/Multiple Data** (単一命令/多重データ) を略したものです。SIMD によって多重データ列に対しデータレベルでの並列処理を一回の演算で行うことができ、これにより 3D グラフィック、動画処理、物理演算、暗号処理や様々な分野の計算パフォーマンスを改善できます。
 
 処理やデータ集合に並列処理を使わない逐次的アーキテクチャの {{Glossary("SISD")}} についても参照ください。
diff --git a/files/ja/glossary/simple_header/index.md b/files/ja/glossary/simple_header/index.md
index 5285e744a23eae..86cba75b163d35 100644
--- a/files/ja/glossary/simple_header/index.md
+++ b/files/ja/glossary/simple_header/index.md
@@ -3,4 +3,6 @@ title: Simple header (単純ヘッダー)
 slug: Glossary/Simple_header
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}} の古い用語です。
diff --git a/files/ja/glossary/simple_response_header/index.md b/files/ja/glossary/simple_response_header/index.md
index 60017bb7f23e14..5526e168a0a731 100644
--- a/files/ja/glossary/simple_response_header/index.md
+++ b/files/ja/glossary/simple_response_header/index.md
@@ -3,4 +3,6 @@ title: Simple response header
 slug: Glossary/Simple_response_header
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}の古い用語です。
diff --git a/files/ja/glossary/sisd/index.md b/files/ja/glossary/sisd/index.md
index 69cb9f8fb77833..0a6ddd3b10e553 100644
--- a/files/ja/glossary/sisd/index.md
+++ b/files/ja/glossary/sisd/index.md
@@ -3,6 +3,8 @@ title: SISD
 slug: Glossary/SISD
 ---
 
+{{GlossarySidebar}}
+
 SISD は[コンピュータ・アーキテクチャの分類（フリンの分類）](https://ja.wikipedia.org/wiki/フリンの分類)の一つである **Single Instruction/SIngle Data** （単一命令/単一データ）を略したものです。SISD アーキテクチャでは単一のプロセッサが単一の命令を実行し、メモリ内の単一データ列を演算します。
 
 1 回の演算で多重データ列を処理可能な並列アーキテクチャの {{Glossary("SIMD")}} についても参照ください。
diff --git a/files/ja/glossary/site/index.md b/files/ja/glossary/site/index.md
index 1f60c0113ea69e..89e93807b86b41 100644
--- a/files/ja/glossary/site/index.md
+++ b/files/ja/glossary/site/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b
 ---
 
+{{GlossarySidebar}}
+
 非公式には、 _サイト_ はウェブサイト、すなわちウェブページの集合であり、同じドメインから提供されるもので、単一の組織によって管理されているものです。
 
 ブラウザーは時として、異なるサイト同士を正確に区別する必要があります。例えば、ブラウザーは [SameSite](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) クッキーを、それを設定した同じサイトにしか送信してはなりません。
diff --git a/files/ja/glossary/site_map/index.md b/files/ja/glossary/site_map/index.md
index 88da57a6116bab..cf24b4f4a43b46 100644
--- a/files/ja/glossary/site_map/index.md
+++ b/files/ja/glossary/site_map/index.md
@@ -3,4 +3,6 @@ title: Site map (サイトマップ)
 slug: Glossary/Site_map
 ---
 
+{{GlossarySidebar}}
+
 **サイトマップ**は、ウェブサイトのページの一覧です。サイトのページの構造化された一覧は、検索エンジンの最適化に役立ち、検索エンジンなどのウェブクローラーが辿るためのリンクを提供します。また、サイトマップは、サイトのコンテンツの概要を一目で確認できるため、ユーザーのサイトナビゲーションにも役立ちます。
diff --git a/files/ja/glossary/sld/index.md b/files/ja/glossary/sld/index.md
index c09f819a231545..000aecb58d3aaa 100644
--- a/files/ja/glossary/sld/index.md
+++ b/files/ja/glossary/sld/index.md
@@ -3,6 +3,8 @@ title: SLD
 slug: Glossary/SLD
 ---
 
+{{GlossarySidebar}}
+
 SLD (Second Level Domain; セカンドレベルドメイン) は {{Glossary("TLD")}} 直下の階層のドメイン名です。
 
 例えば `mozilla.org` では、 `mozilla` が TLD の `.org` に対するセカンドレベルドメインです。
diff --git a/files/ja/glossary/sloppy_mode/index.md b/files/ja/glossary/sloppy_mode/index.md
index 72193b3ef13783..07803c3bb88b31 100644
--- a/files/ja/glossary/sloppy_mode/index.md
+++ b/files/ja/glossary/sloppy_mode/index.md
@@ -3,6 +3,8 @@ title: Sloppy モード
 slug: Glossary/Sloppy_mode
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("ECMAScript")}} 5 以降では、スクリプトで新しい [Strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) モードをオプトインできます。これにより、JavaScript のセマンティクスがいくつかの方法で変更され、復元力が向上し、問題が発生したときに何が起こっているのかを理解しやすくなります。
 
 JavaScript の通常の非厳密モードは、**Sloppy モード**と呼ばれることもあります。これは正式な呼称ではありませんが、真面目に JavaScript のコードを書くことに時間を費やしていると、この呼称に出くわすことがあるでしょう。
diff --git a/files/ja/glossary/slug/index.md b/files/ja/glossary/slug/index.md
index d0ba9b5f98eed8..48d92235f24e5e 100644
--- a/files/ja/glossary/slug/index.md
+++ b/files/ja/glossary/slug/index.md
@@ -3,6 +3,8 @@ title: Slug (スラグ)
 slug: Glossary/Slug
 ---
 
+{{GlossarySidebar}}
+
 スラグは、通常は URL の最後にある Web アドレスの固有の識別部分です。
 MDN のコンテキストでは、"\<locale> / docs /" に続く URL の部分です。
 
diff --git a/files/ja/glossary/smoke_test/index.md b/files/ja/glossary/smoke_test/index.md
index 09046026d095e4..461d4b6f5f52b2 100644
--- a/files/ja/glossary/smoke_test/index.md
+++ b/files/ja/glossary/smoke_test/index.md
@@ -3,6 +3,8 @@ title: Smoke Test (スモークテスト)
 slug: Glossary/Smoke_Test
 ---
 
+{{GlossarySidebar}}
+
 スモークテストは、ソフトウェアの中核機能の機能テストと単体テストから構成され、より詳細なテストの前に実施されます。
 
 スモークテストは次のような疑問に答えてくれます。
diff --git a/files/ja/glossary/smpte/index.md b/files/ja/glossary/smpte/index.md
index ec62609de955d7..1966b3a468a0e4 100644
--- a/files/ja/glossary/smpte/index.md
+++ b/files/ja/glossary/smpte/index.md
@@ -3,4 +3,6 @@ title: SMPTE (Society of Motion Picture and Television Engineers)
 slug: Glossary/SMPTE
 ---
 
+{{GlossarySidebar}}
+
 **Society of Motion Picture and Television Engineers** (**[SMPTE](https://www.smpte.org/)**) は、エンターテインメントメディアの作成、放送、保存、および表示に使用される標準と技術を開発および定義するエンジニアと科学者の専門家協会です。 例えば、 SMPTE は、現代のデジタル映画館で使用されているデジタルシネマに使用されている規格を定義しています。
diff --git a/files/ja/glossary/smtp/index.md b/files/ja/glossary/smtp/index.md
index 12f2b3d4e54770..953340c068da54 100644
--- a/files/ja/glossary/smtp/index.md
+++ b/files/ja/glossary/smtp/index.md
@@ -3,6 +3,8 @@ title: SMTP
 slug: Glossary/SMTP
 ---
 
+{{GlossarySidebar}}
+
 **SMTP** (Simple Mail Transfer Protocol) は、新しいメールを送信するために使用される{{glossary("protocol","プロトコル")}}です。 {{glossary("POP3")}} や {{glossary("NNTP")}} と同様に、{{Glossary("state machine","ステートマシン")}} により駆動するプロトコルです。
 
 このプロトコルは比較的単純です。最も複雑な部分は、様々な認証のメカニズム ([GSSAPI](http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface)、[CRAM-MD5](http://en.wikipedia.org/wiki/CRAM-MD5)、[NTLM](http://ja.wikipedia.org/wiki/NTLM)、MSN、AUTH LOGIN、AUTH PLAIN、他) をサポートすること、エラーレスポンスを取り扱うこと、そして認証メカニズムが失敗した時 (例、サーバーがあるメカニズムのサポートを要求するが、実際にはサポートしていない) にフォールバックを行うことです。
diff --git a/files/ja/glossary/soap/index.md b/files/ja/glossary/soap/index.md
index d4698763d74eb7..7ba525bc10400b 100644
--- a/files/ja/glossary/soap/index.md
+++ b/files/ja/glossary/soap/index.md
@@ -3,6 +3,8 @@ title: SOAP
 slug: Glossary/SOAP
 ---
 
+{{GlossarySidebar}}
+
 **SOAP** (Simple Object Access Protocol) は {{glossary('XML')}} 形式でデータを転送する{{glossary('protocol','プロトコル')}}です。{{glossary('Mozilla Firefox','Firefox')}} は 2008 年に SOAP のサポートを廃止しました。
 
 ## 関連項目
diff --git a/files/ja/glossary/spa/index.md b/files/ja/glossary/spa/index.md
index ebb97ce6d1f97b..6a136e1e87c5a9 100644
--- a/files/ja/glossary/spa/index.md
+++ b/files/ja/glossary/spa/index.md
@@ -3,6 +3,8 @@ title: SPA (単一ページアプリケーション)
 slug: Glossary/SPA
 ---
 
+{{GlossarySidebar}}
+
 SPA (Single-page application) はウェブアプリの実装の一種で、単一のウェブ文書のみを読み込み、別な内容を表する際には {{domxref("XMLHttpRequest")}} や [Fetch](/ja/docs/Web/API/Fetch_API) などの JavaScript API を通じて単一文書の本文の内容を更新するものです。
 
 これにより、サーバーから新しいページ全体を読み込まずにユーザーにウェブサイトを使わせることができ、性能の向上やより動的な利用方法が得られるのと引き換えに、 SEO などで不利になったり、状態の保守、操作の改善、意味のある性能の監視のためにより労力が必要になったりします。
diff --git a/files/ja/glossary/specification/index.md b/files/ja/glossary/specification/index.md
index d15ed07804dbf3..96af6fd8ae75d5 100644
--- a/files/ja/glossary/specification/index.md
+++ b/files/ja/glossary/specification/index.md
@@ -3,6 +3,8 @@ title: Specification
 slug: Glossary/Specification
 ---
 
+{{GlossarySidebar}}
+
 **specification** とは、製品を出荷する前にどのような機能や属性を含める必要があるかを詳しく説明したドキュメントです。 Web を説明する文脈において "specification" という用語 (多くの場合 "spec" と略される) は、一般にオープンな Web テクノロジーの完全なセットを構成する言語、技術、または {{Glossary("API")}} を説明するドキュメントを意味します。
 
 ## 関連項目
diff --git a/files/ja/glossary/speculative_parsing/index.md b/files/ja/glossary/speculative_parsing/index.md
index 83a3405fb8a747..6273998acc287a 100644
--- a/files/ja/glossary/speculative_parsing/index.md
+++ b/files/ja/glossary/speculative_parsing/index.md
@@ -3,6 +3,8 @@ title: Speculative parsing (投機的解析)
 slug: Glossary/Speculative_parsing
 ---
 
+{{GlossarySidebar}}
+
 伝統的なブラウザーの HTML パーサーはメインスレッドで動作し、 `</script>` タグの後はスクリプトがネットワークから取得されて実行が完了するまでブロックされます。一部の HTML パーサー、たとえば Firefox 4 以降では、メインスレッドから分離された投機的解析に対応しています。これは、スクリプトがダウンロードされて実行されている間、先に解析を進めます。 HTML パーサーは、ストリーム内で先に見つかるスクリプト、スタイルシート、画像の投機的な読み込みを開始し、 HTML ツリー構築アルゴリズムを投機的に実行します。この利点は、投機が成功したときに、スクリプト、スタイルシート、画像のスキャンが完了した受信ファイルの一部を再解析する必要がないことです。欠点は、投機が失敗した場合により多くの作業が失われることです。
 
 このドキュメントは、投機が失敗してページの読み込みが遅くなるようなことを避けるのに役立ちます。
diff --git a/files/ja/glossary/speed_index/index.md b/files/ja/glossary/speed_index/index.md
index 7dd923a65d8c66..d0df951818ea4c 100644
--- a/files/ja/glossary/speed_index/index.md
+++ b/files/ja/glossary/speed_index/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: d2a9f2e26a8139d4bb270d7dc3cddd8b848719fe
 ---
 
+{{GlossarySidebar}}
+
 **スピードインデックス** (SI) は、ページのコンテンツがどれだけ早く目に見える形で表示されているかを示すページ読み込み性能の指標です。これは、ページの可視部分が表示されるまでの平均時間です。ミリ秒単位で表示され、ビューポートのサイズに依存し、スコアが小さいほど良いことを表します。
 
 ![SpeedIndex の計算](speedindex.png)
diff --git a/files/ja/glossary/sql/index.md b/files/ja/glossary/sql/index.md
index 8edac2bb19134c..73e25b77f5ac1e 100644
--- a/files/ja/glossary/sql/index.md
+++ b/files/ja/glossary/sql/index.md
@@ -3,6 +3,8 @@ title: SQL
 slug: Glossary/SQL
 ---
 
+{{GlossarySidebar}}
+
 **SQL** (Structured Query Language) は、テーブルベースのデータベース内のデータを更新、取得、および計算するために設計された、記述的なコンピューター言語です。
 
 ## 関連項目
diff --git a/files/ja/glossary/sql_injection/index.md b/files/ja/glossary/sql_injection/index.md
index d25eafb3035f61..64818813bd24c8 100644
--- a/files/ja/glossary/sql_injection/index.md
+++ b/files/ja/glossary/sql_injection/index.md
@@ -3,6 +3,8 @@ title: SQL Injection (SQLインジェクション)
 slug: Glossary/SQL_Injection
 ---
 
+{{GlossarySidebar}}
+
 SQL インジェクションはユーザーからの入力の検証が十分でない・行っていないウェブアプリケーションに対して利用されます。悪意のあるクラッカーは、SQL コマンドをウェブアプリケーションに渡し、バックエンドのデータベースにそれを実行させて攻撃します。
 
 SQL インジェクションはデータベースへの不正アクセスを行ったり、データベースから直接情報を取得することが可能です。多くのデータ侵害は SQL インジェクションによるものです。
diff --git a/files/ja/glossary/sri/index.md b/files/ja/glossary/sri/index.md
index da3eef45d5533e..f17f0328979727 100644
--- a/files/ja/glossary/sri/index.md
+++ b/files/ja/glossary/sri/index.md
@@ -3,6 +3,8 @@ title: SRI
 slug: Glossary/SRI
 ---
 
+{{GlossarySidebar}}
+
 **サブリソース完全性** (SRI) は、ブラウザーがフェッチするファイル (例えば、 {{Glossary("CDN")}} から) が予期しない操作無しで配信されることをブラウザーが確認できるようにするセキュリティ機能です。 フェッチされたファイルと一致する必要のある暗号化ハッシュを提供できる様にすることで機能します。
 
 ## 関連項目
diff --git a/files/ja/glossary/ssl/index.md b/files/ja/glossary/ssl/index.md
index 0a48f1eae00b08..ff5a277e373902 100644
--- a/files/ja/glossary/ssl/index.md
+++ b/files/ja/glossary/ssl/index.md
@@ -3,6 +3,8 @@ title: SSL
 slug: Glossary/SSL
 ---
 
+{{GlossarySidebar}}
+
 SSL (Secure Sockets Layer) は古いセキュリティ標準技術で、サーバーとクライアントの間に暗号化されたネットワークリンクを作成し、そこを通過するデータが非公開で安全であることを保証するためのものでした。SSL の現在のバージョンは 3.0 で、1999 年に Netscape 社がリリースしたものですが、{{Glossary("TLS", "TLS (Transport Layer Security)")}} プロトコルに置き換えられました。
 
 1. 関連情報
diff --git a/files/ja/glossary/stacking_context/index.md b/files/ja/glossary/stacking_context/index.md
index 3251453f3eb65c..f7e9817c9cbe2e 100644
--- a/files/ja/glossary/stacking_context/index.md
+++ b/files/ja/glossary/stacking_context/index.md
@@ -3,6 +3,8 @@ title: Stacking context (重ね合わせコンテキスト)
 slug: Glossary/Stacking_context
 ---
 
+{{GlossarySidebar}}
+
 **重ね合わせコンテキスト** (Stacking context) は、ウェブページ上の要素が他の要素の上にどのように配置されるかを表すもので、ちょうど机の上のインデックスカードを横に並べたり重ねたりするようなものです。
 
 ## 理解を深める
diff --git a/files/ja/glossary/statement/index.md b/files/ja/glossary/statement/index.md
index 52be620b67adef..86e65c4be668fb 100644
--- a/files/ja/glossary/statement/index.md
+++ b/files/ja/glossary/statement/index.md
@@ -3,6 +3,8 @@ title: Statement (文)
 slug: Glossary/Statement
 ---
 
+{{GlossarySidebar}}
+
 コンピュータープログラミング言語では、**文**はタスクを実行するコード行です。すべてのプログラムは文の連続から成っています。
 
 ## 関連項目
@@ -14,5 +16,3 @@ slug: Glossary/Statement
 ### 技術リファレンス
 
 - [JavaScript の文と宣言](/ja/docs/Web/JavaScript/Reference/Statements)
-
-<!---->
diff --git a/files/ja/glossary/static_method/index.md b/files/ja/glossary/static_method/index.md
index b569e49dbcf8bf..0cfd37c5f58a3e 100644
--- a/files/ja/glossary/static_method/index.md
+++ b/files/ja/glossary/static_method/index.md
@@ -3,6 +3,8 @@ title: Static method (静的メソッド)
 slug: Glossary/Static_method
 ---
 
+{{GlossarySidebar}}
+
 静的メソッド (または _静的関数_) とは、{{Glossary("method","メソッド")}}のうち{{Glossary("object","オブジェクト")}}のメンバーとして定義されているものの、コンストラクターで生成されたオブジェクトインスタンスからではなく、API のオブジェクトコンストラクターから直接アクセスできるものです。
 
 [Web API](/ja/docs/Web/API) では、静的メソッドはインターフェイスで定義されているものの、先にその型のオブジェクトのインスタンス化をせずに呼び出すことができます。
diff --git a/files/ja/glossary/static_typing/index.md b/files/ja/glossary/static_typing/index.md
index e5856b6b1276b5..9e8ec87b1b5c55 100644
--- a/files/ja/glossary/static_typing/index.md
+++ b/files/ja/glossary/static_typing/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 0ed71747051ea80a842c7b4dc16765cf97ad2122
 ---
 
+{{GlossarySidebar}}
+
 **静的型付け**言語（例えば、Java, C, C++）とは、コンパイル時に変数の型がわかる言語です。静的型付け言語の多くは、プログラマが明示的に型を指定しなければなりませんが、 OCaml のように型推論によってプログラマが変数の型を指定しなくてもよい場合もあります。
 
 ## 関連情報
diff --git a/files/ja/glossary/sticky_activation/index.md b/files/ja/glossary/sticky_activation/index.md
index 4d877b092dd0ae..79a7b1d66d1a58 100644
--- a/files/ja/glossary/sticky_activation/index.md
+++ b/files/ja/glossary/sticky_activation/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 17ef4a835a99823f3919dfc17b18232cce4528b3
 ---
 
+{{GlossarySidebar}}
+
 **粘着的な有効化** (または「ユーザーによる粘着的な有効化」) は、ユーザーがボタンを押したか､マウスを動かしたか､メニューを使用したか､他の何らかの操作をしたことを表すウインドウの状態です｡
 
 ユーザーが現在ページを操作しているか、ページを読み込んでからタッチ、ポインター、またはキーボードの操作を完了したとき、ページは「ユーザーによって有効化された」とみなされます。ユーザーによる粘着的な有効化では、有効化が行われたら ({{Glossary("Transient activation", "一時的な有効化")}}と違って) セッションの間リセットされません。
diff --git a/files/ja/glossary/strict_mode/index.md b/files/ja/glossary/strict_mode/index.md
index c1a0dfd47391bd..69267b38ec9950 100644
--- a/files/ja/glossary/strict_mode/index.md
+++ b/files/ja/glossary/strict_mode/index.md
@@ -3,6 +3,8 @@ title: Strict mode (厳格モード)
 slug: Glossary/Strict_mode
 ---
 
+{{GlossarySidebar}}
+
 JavaScript の**厳格モード**は、 JavaScript の制限された変化形を*利用する*方法であり、それによって暗黙的に "{{Glossary("Sloppy_mode", "sloppy mode")}}" をやめることができます。厳格モードは単なるサブセットではありません。通常のコードとは*意図的に*異なる意味を持っています。
 
 スクリプト全体を厳格モードにする場合は、他の文の前に `"use strict";` 文を含めることで呼び出すことができます。
diff --git a/files/ja/glossary/string/index.md b/files/ja/glossary/string/index.md
index bf2f7f10399015..6716ee0168d485 100644
--- a/files/ja/glossary/string/index.md
+++ b/files/ja/glossary/string/index.md
@@ -3,6 +3,8 @@ title: String (文字列)
 slug: Glossary/String
 ---
 
+{{GlossarySidebar}}
+
 コンピュータープログラミング言語において、文字列 (string) とはテキストを表す連続した{{Glossary("character","文字")}}のことです。
 
 {{Glossary("JavaScript")}} では、文字列は{{Glossary("Primitive", "プリミティブ値")}}の一つで、{{jsxref("String")}} オブジェクトが文字列プリミティブの{{Glossary("wrapper","ラッパー")}}オブジェクトになります。
diff --git a/files/ja/glossary/stringifier/index.md b/files/ja/glossary/stringifier/index.md
index ada032aed2a79e..131313c304ecdd 100644
--- a/files/ja/glossary/stringifier/index.md
+++ b/files/ja/glossary/stringifier/index.md
@@ -3,6 +3,8 @@ title: Stringifier (文字列化子)
 slug: Glossary/Stringifier
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("object", "オブジェクト")}}の文字列化子は、{{Glossary("attribute", "属性")}}または{{Glossary("method", "メソッド")}}で、{{Glossary("string", "文字列")}}が期待される場面においてオブジェクトのテキスト表現を提供するために定義されるものです。
 
 ## 関連情報
diff --git a/files/ja/glossary/stun/index.md b/files/ja/glossary/stun/index.md
index 25e07265d29f89..960c8606edf945 100644
--- a/files/ja/glossary/stun/index.md
+++ b/files/ja/glossary/stun/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b
 ---
 
+{{GlossarySidebar}}
+
 **STUN** (Session Traversal Utilities for NAT) は、{{glossary("NAT")}} (Network Address Translator) を介してデータを転送する際の補助プロトコルです。STUNは、NATの内側にあるコンピュータの {{glossary("IP address", "IP アドレス")}}、{{glossary("port", "ポート")}}、接続状態を返します。
 
 ## 参考情報
diff --git a/files/ja/glossary/style_origin/index.md b/files/ja/glossary/style_origin/index.md
index 53deacece0342b..77b309be745917 100644
--- a/files/ja/glossary/style_origin/index.md
+++ b/files/ja/glossary/style_origin/index.md
@@ -3,6 +3,8 @@ title: Style origin (スタイルオリジン)
 slug: Glossary/Style_origin
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("CSS")}} では、スタイル変更のソースには 3 つのカテゴリがあります。これらのカテゴリは**スタイルオリジン**と呼ばれています。これらのカテゴリはそれぞれ、**ユーザーエージェントオリジン**、**ユーザーオリジン**、**作者オリジン**と呼ばれています。
 
 - ユーザーエージェントオリジン
diff --git a/files/ja/glossary/stylesheet/index.md b/files/ja/glossary/stylesheet/index.md
index 39cf690ce3e1ca..eb13ae565ada5c 100644
--- a/files/ja/glossary/stylesheet/index.md
+++ b/files/ja/glossary/stylesheet/index.md
@@ -3,6 +3,8 @@ title: スタイルシート(Stylesheet)
 slug: Glossary/Stylesheet
 ---
 
+{{GlossarySidebar}}
+
 **スタイルシート(stylesheet)** はレイアウトを規定しウェブページまたはドキュメントをデザインする一連の CSS ルールです。*内的*スタイルシートはウェブドキュメントの{{htmlelement("head","ヘッダー要素")}}内の{{htmlelement("style","スタイル情報要素")}}内に置かれ、*外的*スタイルシートは別の`.css` ファイルの中に置かれ、ドキュメントヘッダーの{{htmlelement("link","リンク要素")}}内で参照することによりドキュメントに適用されます。
 
 外的スタイルシートは各ページに繰り返し CSS を適用するのではなく、一箇所から複数のページのスタイリングをコントロールすることが出来るため、一般的に好ましいとされています。
diff --git a/files/ja/glossary/svg/index.md b/files/ja/glossary/svg/index.md
index 6eaf2389f0fa2d..5e7b7b8c1972f6 100644
--- a/files/ja/glossary/svg/index.md
+++ b/files/ja/glossary/svg/index.md
@@ -3,6 +3,8 @@ title: SVG
 slug: Glossary/SVG
 ---
 
+{{GlossarySidebar}}
+
 _Scalable Vector Graphics_ (**SVG**) は {{Glossary("XML")}} の文法に基づいた 2 次元ベクター画像フォーマットです。
 
 {{Glossary("W3C")}} は、1990 年代後半に SVG に取り組み始めましたが、 SVG は {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 が対応したときにはじめて有名になりました。主要な{{Glossary("browser","ウェブブラウザー")}}はすべて SVG に対応するようになりました。
diff --git a/files/ja/glossary/svn/index.md b/files/ja/glossary/svn/index.md
index 94a6d3f8149a75..89b4c671842978 100644
--- a/files/ja/glossary/svn/index.md
+++ b/files/ja/glossary/svn/index.md
@@ -3,6 +3,8 @@ title: SVN
 slug: Glossary/SVN
 ---
 
+{{GlossarySidebar}}
+
 Apache Subversion (**SVN**) は無償のソースコードマネジメント ({{Glossary("SCM")}}) システムです。 開発者はテキストファイルやソースコードの変更履歴を記録できます。SVN はバイナリファイルにも対応していますが、推奨はしていません。
 
 ## 詳細情報
diff --git a/files/ja/glossary/symmetric-key_cryptography/index.md b/files/ja/glossary/symmetric-key_cryptography/index.md
index 7b97e06a0eae82..bae2aa553cc5dd 100644
--- a/files/ja/glossary/symmetric-key_cryptography/index.md
+++ b/files/ja/glossary/symmetric-key_cryptography/index.md
@@ -3,6 +3,8 @@ title: Symmetric-key cryptography (共通鍵暗号)
 slug: Glossary/Symmetric-key_cryptography
 ---
 
+{{GlossarySidebar}}
+
 共通鍵暗号は、暗号化と復号で同じ鍵を使用する暗号化アルゴリズムに使用される用語です。鍵はふつう、「共通鍵」または「秘密鍵」と呼ばれます。
 
 これは通常、{{Glossary("public-key cryptography", "公開鍵暗号")}}では鍵が一組で生成され、一方の鍵で変換が行われたものが、もう一方の鍵でしか逆変換できないのと対照されます。
diff --git a/files/ja/glossary/synchronous/index.md b/files/ja/glossary/synchronous/index.md
index 1c53d23189a84e..ea48623fc97ab8 100644
--- a/files/ja/glossary/synchronous/index.md
+++ b/files/ja/glossary/synchronous/index.md
@@ -3,6 +3,8 @@ title: Synchronous (同期通信方式)
 slug: Glossary/Synchronous
 ---
 
+{{GlossarySidebar}}
+
 同期 (_Synchronous_) とは、各当事者がメッセージを瞬時に（または可能な限り直ちに）受信（また必要な場合には処理および返信）するリアルタイムのコミュニケーションのことを指します。
 
 人間での例としては電話が挙げられます。電話の通話中は、あなたは通話相手に直ちに返事をしやすいです。
diff --git a/files/ja/glossary/syntax/index.md b/files/ja/glossary/syntax/index.md
index 348dea2873b3bf..6f260d1f581360 100644
--- a/files/ja/glossary/syntax/index.md
+++ b/files/ja/glossary/syntax/index.md
@@ -3,6 +3,8 @@ title: Syntax (構文)
 slug: Glossary/Syntax
 ---
 
+{{GlossarySidebar}}
+
 構文は、正しく構造化されたコードを構成する{{Glossary("character","文字")}}の必要な組み合わせと順序を指定します。構文は一般に、文法とそれを書く上で適用される規則、例えば Python にはインデントの要件などを含みます。
 
 構文は言語によって異なります (たとえば、{{Glossary("HTML")}} と {{Glossary("JavaScript")}} では構文が異なります)。しかし、例えば「オペランド 演算子 オペランド」の規則が JavaScript と python で共通であるように、構文の面では言語間でいくらかの類似点を持つことがあります。これは、 2 つの言語が構文を共有していることを意味するものではありません。
diff --git a/files/ja/glossary/syntax_error/index.md b/files/ja/glossary/syntax_error/index.md
index 85436b2e230c19..95072d517c8443 100644
--- a/files/ja/glossary/syntax_error/index.md
+++ b/files/ja/glossary/syntax_error/index.md
@@ -3,6 +3,8 @@ title: Syntax error (構文エラー)
 slug: Glossary/Syntax_error
 ---
 
+{{GlossarySidebar}}
+
 あらかじめ定義された{{Glossary("syntax","構文")}}の誤った使用による{{Glossary("exception","例外")}}。構文エラーは、ソースコードのコンパイルまたは構文解析中に検出されます。
 
 例えば、{{Glossary("JavaScript")}} 関数を定義するときに閉じ括弧（`}`）を省略すると、構文エラーが発生します。ブラウザー開発ツールは、{{Glossary("JavaScript")}} と {{Glossary("CSS")}} の構文エラーをコンソールに表示します。
diff --git a/files/ja/glossary/synthetic_monitoring/index.md b/files/ja/glossary/synthetic_monitoring/index.md
index 00946d44bfaf4c..b258e84da36a15 100644
--- a/files/ja/glossary/synthetic_monitoring/index.md
+++ b/files/ja/glossary/synthetic_monitoring/index.md
@@ -3,6 +3,8 @@ title: Synthetic monitoring (合成モニタリング)
 slug: Glossary/Synthetic_monitoring
 ---
 
+{{GlossarySidebar}}
+
 **合成モニタリング**は、可能な限り一貫性のある環境で、通常は自動化ツールを使用して、「実験室」環境でページの性能をモニタリングすることです。一貫性のあるベースラインがあれば、合成モニタリングはコード変更が性能に及ぼす影響を測定するのに適しています。しかし、必ずしもユーザーが体験していることを反映しているとは限りません。
 
 合成モニタリングでは、エンドユーザがウェブアプリケーションを介して進む経路をシミュレートするためのスクリプトを展開し、シミュレーターが体験した性能をレポートします。一般的な合成モニタリングツールの例としては、 [WebPageTest](https://webpagetest.org) や [Lighthouse](https://developers.google.com/web/tools/lighthouse/) などがあります。測定されるトラフィックは、実際のユーザーのものではなく、ページの性能に関するデータを収集するために合成して生成されたトラフィックです。
diff --git a/files/ja/glossary/table_grid_box/index.md b/files/ja/glossary/table_grid_box/index.md
index fa3ba23e0a5d32..d7450fd1399a11 100644
--- a/files/ja/glossary/table_grid_box/index.md
+++ b/files/ja/glossary/table_grid_box/index.md
@@ -5,4 +5,6 @@ l10n:
   sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b
 ---
 
+{{GlossarySidebar}}
+
 **Table Grid Box** はキャプションを除く表内のすべてのブロックレベルボックスです。キャプションを含むボックスは [Table Wrapper Box](/ja/docs/Glossary/Table_Wrapper_Box) と呼ばれます。
diff --git a/files/ja/glossary/table_wrapper_box/index.md b/files/ja/glossary/table_wrapper_box/index.md
index 24eec3170bebf9..9a7086466dacb5 100644
--- a/files/ja/glossary/table_wrapper_box/index.md
+++ b/files/ja/glossary/table_wrapper_box/index.md
@@ -5,4 +5,6 @@ l10n:
   sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b
 ---
 
+{{GlossarySidebar}}
+
 **Table Wrapper Box** は [table grid boxes](/ja/docs/Glossary/Table_Grid_Box) の周りに生成されるボックスで、表に表示されるキャプションに必要なスペースを考慮します。絶対位置指定された項目群の包含ブロックが表の場合、このボックスがその項目群の包含ブロックになります。
diff --git a/files/ja/glossary/tag/index.md b/files/ja/glossary/tag/index.md
index bb01c368647718..008342182b2331 100644
--- a/files/ja/glossary/tag/index.md
+++ b/files/ja/glossary/tag/index.md
@@ -3,6 +3,8 @@ title: Tag (タグ)
 slug: Glossary/Tag
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("HTML")}} において、**タグ**は{{Glossary("element", "要素")}}の作成に使われます。段落を表す `<p>` のように、HTML の要素の名前が山括弧の中に入ります。なお、終了タグは `</p>` のように、名前の前にスラッシュがつきます。そして{{glossary("empty element", "空要素")}}では終了タグは不要で、付けることもできません。{{Glossary("attribute", "属性")}}が記述されていない場合は、それぞれ既定値が使われます。
 
 ## 詳細情報
diff --git a/files/ja/glossary/tcp/index.md b/files/ja/glossary/tcp/index.md
index a66eccba441ced..20aa1e586c6d1d 100644
--- a/files/ja/glossary/tcp/index.md
+++ b/files/ja/glossary/tcp/index.md
@@ -3,6 +3,8 @@ title: TCP
 slug: Glossary/TCP
 ---
 
+{{GlossarySidebar}}
+
 **TCP (Transmission Control Protocol、伝送制御プロトコル)** は、2 台のホストを接続し、データを送受信するための重要なネットワーク{{Glossary("protocol", "プロトコル")}}です。 TCP はデータとパケットが送信した順番通りに届くことを保証します。1970 年代に、当時の DARPA 研究者である Vint Cerf と Bob Kahn によって設計されました。
 
 TCP の役割は、パケットがエラーなく信頼性高く配信されることを保証することです。 TCP には輻輳制御があり、初期要件が小さいものから、コンピューター、サーバー、ネットワークが対応している帯域の水準まで大きさが拡大します。
diff --git a/files/ja/glossary/tcp_handshake/index.md b/files/ja/glossary/tcp_handshake/index.md
index 47e311bf5e9569..b7374073739ed5 100644
--- a/files/ja/glossary/tcp_handshake/index.md
+++ b/files/ja/glossary/tcp_handshake/index.md
@@ -3,6 +3,8 @@ title: TCPハンドシェイク
 slug: Glossary/TCP_handshake
 ---
 
+{{GlossarySidebar}}
+
 {{glossary('Transmission Control Protocol (TCP)','TCP (トランスミッションコントロールプロトコル)')}}は、IP ネットワーク上の 2 台のコンピューター間でコネクション型通信を行うためのトランスポート層におけるホスト間プロトコルです。 TCP は、IP ネットワーク上で TCP/IP 接続を設定するために、**3 ウェイ・ハンドシェイク**(別名 TCP ハンドシェイク、3 メッセージハンドシェイク、および、もしくはまたは SYN-SYN-ACK)を使用します。TCP セッションをネゴシエートして TCP セッションを開始するために TCP によって送信される 3 つのメッセージは、それぞれ SYN、_SYN-ACK_ **/ SYN**chronize のための ACK、**SYN**chronize-**ACK**nowledgement / **ACK**nowledge という愛称で呼ばれています。HTTP ブラウザーのリクエストなどのデータを送信する前に互いに情報を双方向に渡したい 2 台のコンピューターが、接続のパラメータをネゴシエートすることができるように、３つのメッセージの仕組みが設計されています。
 
 ホスト（一般的にはブラウザー）は、TCP SYNchronize パケットをサーバーに送信します。サーバーは SYN を受信し、SYNchronize-ACKnowledgement を返送します。ホストはサーバーの SYN-ACK を受信し、ACKnowledge を送信します。サーバーは ACK を受信し、TCP ソケット接続が確立されます。
diff --git a/files/ja/glossary/telnet/index.md b/files/ja/glossary/telnet/index.md
index ab4a4e65a1655a..7ea797c60de4b3 100644
--- a/files/ja/glossary/telnet/index.md
+++ b/files/ja/glossary/telnet/index.md
@@ -3,6 +3,8 @@ title: Telnet
 slug: Glossary/Telnet
 ---
 
+{{GlossarySidebar}}
+
 **Telnet** とはコマンドラインのツールであり、リモートのコンピュータにアクセスするための TCP/IP プロトコルの根底にあるものである。
 
 ## さらに学ぶ
diff --git a/files/ja/glossary/thread/index.md b/files/ja/glossary/thread/index.md
index 3fe34089290eb2..a33d0fd37a1570 100644
--- a/files/ja/glossary/thread/index.md
+++ b/files/ja/glossary/thread/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: d2a9f2e26a8139d4bb270d7dc3cddd8b848719fe
 ---
 
+{{GlossarySidebar}}
+
 コンピュータ科学におけるスレッドは、複数のタスクやプログラムを同時に実行することです。それぞれのコードを実行できる機能の単位は**スレッド**と呼ばれています。
 
 **{{Glossary("main thread", "メインスレッド")}}** はそのうちの一つで、ブラウザーがユーザーイベントを扱い、画面に表示や描画を行い、通常のウェブページやアプリを構成するコードの大部分を実行します。これらのものがすべて一つのスレッドで行われるため、速度の遅いウェブサイトやアプリのスクリプトがブラウザー全体の速度を落とします。さらに悪いことに、サイトやアプリのスクリプトが無限ループに入ると、ブラウザー全体がハングアップすることがあります。これは使い勝手がのろく (または悪く) 失望させるものになります。
diff --git a/files/ja/glossary/three_js/index.md b/files/ja/glossary/three_js/index.md
index 5a748c1aa5ef29..4c807c5a8cb7e7 100644
--- a/files/ja/glossary/three_js/index.md
+++ b/files/ja/glossary/three_js/index.md
@@ -3,6 +3,8 @@ title: Three js
 slug: Glossary/Three_js
 ---
 
+{{GlossarySidebar}}
+
 three.js は {{Glossary("JavaScript")}} ベースの {{Glossary("WebGL")}} エンジンです。GPU を利用したゲームやその他のグラフィックスアプリを {{Glossary("browser","ブラウザー")}} から直接実行できます。three.js ライブラリーは、ブラウザーで 3D のシーンを描画するための多くの機能と {{Glossary("API")}} を提供します。
 
 ## 詳細情報
diff --git a/files/ja/glossary/time_to_interactive/index.md b/files/ja/glossary/time_to_interactive/index.md
index e66dd502ba7904..67caea96d9ddaa 100644
--- a/files/ja/glossary/time_to_interactive/index.md
+++ b/files/ja/glossary/time_to_interactive/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 423bcae3e72a30248fdb446b0b036d4cb5df47b1
 ---
 
+{{GlossarySidebar}}
+
 **対話までの時間 (TTI)** は、ウェブパフォーマンスの標準外の 'progress' メトリクスで、最後の[長いタスク](/ja/docs/Web/API/Long_Tasks_API)が終了し、その後 5 秒間のネットワークとメインスレッドの非アクティブ状態が続いた時点として定義されています。
 
 TTI は 2018 年に Web Incubator Community Group によって提案されたもので、ページまたはアプリケーションに有用なコンテンツが含まれ、メインスレッドがアイドル状態になり、イベントハンドラーの登録など、ユーザーの操作に自由に応答できるようになるメトリクスを提供します。
diff --git a/files/ja/glossary/tld/index.md b/files/ja/glossary/tld/index.md
index 4bb33134fb7733..8e11c03319b9d9 100644
--- a/files/ja/glossary/tld/index.md
+++ b/files/ja/glossary/tld/index.md
@@ -3,6 +3,8 @@ title: TLD (トップレベルドメイン)
 slug: Glossary/TLD
 ---
 
+{{GlossarySidebar}}
+
 TLD (トップレベルドメイン)は、インターネットの階層的な {{Glossary("DNS")}} (ドメインネームシステム) で最も一般的な {{Glossary("domain")}} です。TLD は {{Glossary("domain name")}} の最後の要素です。例えば、`developer.mozilla.org` の "org" です。
 
 {{Glossary("ICANN")}} (Internet Corporation for Assigned Names and Numbers) designates organizations to manage each TLD. Depending on how strict an administrating organization might be, TLD often serves as a clue to the purpose, ownership, or nationality of a website.
diff --git a/files/ja/glossary/tls/index.md b/files/ja/glossary/tls/index.md
index 227f10e3e869da..43b2ee83535fb8 100644
--- a/files/ja/glossary/tls/index.md
+++ b/files/ja/glossary/tls/index.md
@@ -3,6 +3,8 @@ title: Transport Layer Security (TLS)
 slug: Glossary/TLS
 ---
 
+{{GlossarySidebar}}
+
 **TLS (Transport Layer Security)** は、以前は {{Glossary("SSL", "SSL (Secure Sockets Layer)")}} として知られていたもので、ネットワーク上で安全に通信するためにアプリケーションが使用する{{Glossary("protocol", "プロトコル")}}であり、電子メール、ウェブ閲覧、メッセージング、その他のプロトコルの改ざんや盗聴を防止します。 SSL と TLS はどちらもクライアント・サーバー型のプロトコルであり、暗号化したプロトコルを使用してプライバシーを保証することで、ネットワークを通じたセキュリティを提供します。サーバーとクライアントが TLS を使用して通信するすれば、どのメッセージも第三者によって盗聴や改ざんされていないことが保証されます。
 
 最新のブラウザーはすべて TLS プロトコルに対応しており、有効な{{Glossary("Digital certificate", "デジタル証明書")}}の提供をサーバーに要求してその身元を確認し、安全な接続を確立します。クライアントとサーバーの両者がそれぞれのデジタル証明書を提供すれば、相互に認証することができます。
diff --git a/files/ja/glossary/tofu/index.md b/files/ja/glossary/tofu/index.md
index 6af12e80472d2c..a03e78ece389b6 100644
--- a/files/ja/glossary/tofu/index.md
+++ b/files/ja/glossary/tofu/index.md
@@ -3,6 +3,8 @@ title: TOFU
 slug: Glossary/TOFU
 ---
 
+{{GlossarySidebar}}
+
 **Trust On First Use** **(TOFU**) とは、クライアントが未知のサーバーとの信頼関係（trust relationship）を築く必要がある場合における、セキュリティ・モデルです。それを行うために、クライアントは識別子（例：公開鍵）がローカルに保存されているか探します。もし識別子が見つかれば、クライアントは接続を確立できます。もし識別子が見つからなければ、クライアントが識別子を信頼すべきか、ユーザーに決定を促します。
 
 TOFU は SSH プロトコルの中で使われており、サーバーによって返される最初の公開鍵をブラウザが受け入れる [HTTP Public Key Pinning](/ja/docs/Web/HTTP/Public_Key_Pinning) ({{Glossary("HPKP")}}) と、ブラウザがリダイレクトルールに従う場面での {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}}) が該当します。
diff --git a/files/ja/glossary/transient_activation/index.md b/files/ja/glossary/transient_activation/index.md
index e00af58d195922..ebed2c998a985a 100644
--- a/files/ja/glossary/transient_activation/index.md
+++ b/files/ja/glossary/transient_activation/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 17ef4a835a99823f3919dfc17b18232cce4528b3
 ---
 
+{{GlossarySidebar}}
+
 **一時的な有効化** (または「ユーザーによる一時的な有効化」) とは、ユーザーが最近ボタンを押したか､マウスを動かしたか､メニューを使用したか､他の何らかの操作をしたことを表すウインドウの状態です｡
 
 この状態は、ウェブ API がユーザーによる操作がきっかけの時にのみ機能するようにするための機構として利用されることがあります。
diff --git a/files/ja/glossary/tree_shaking/index.md b/files/ja/glossary/tree_shaking/index.md
index 585a2ee8ec8603..7445d6089773b4 100644
--- a/files/ja/glossary/tree_shaking/index.md
+++ b/files/ja/glossary/tree_shaking/index.md
@@ -3,6 +3,8 @@ title: Tree shaking
 slug: Glossary/Tree_shaking
 ---
 
+{{GlossarySidebar}}
+
 **Tree shaking** とは実行されないコードを削除することで、JavaScript の文脈で利用される用語です。
 
 Tree shaking は ES2015 の [import](/ja/docs/Web/JavaScript/Reference/Statements/import) 文と [export](/ja/docs/Web/JavaScript/Reference/Statements/export) 文を利用して、エクスポートされたコードが他の JavaScript ファイルで利用されているかどうかを判定します。
diff --git a/files/ja/glossary/trident/index.md b/files/ja/glossary/trident/index.md
index eb61dc801817cf..c4f4df5a88f994 100644
--- a/files/ja/glossary/trident/index.md
+++ b/files/ja/glossary/trident/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b
 ---
 
+{{GlossarySidebar}}
+
 Trident（MSHTML）は、 {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} に搭載されていたレイアウトエンジンです。Internet Explorer の後継である {{Glossary("Microsoft Edge","Edge")}} では、Trident から{{Glossary("fork","フォーク")}}した _EdgeHTML_ と呼ばれるレイアウトエンジンが使われています。
 
 ## 関連情報
diff --git a/files/ja/glossary/truthy/index.md b/files/ja/glossary/truthy/index.md
index 91f612116fd8e2..2df1c13ec32a71 100644
--- a/files/ja/glossary/truthy/index.md
+++ b/files/ja/glossary/truthy/index.md
@@ -3,6 +3,8 @@ title: Truthy (真値)
 slug: Glossary/Truthy
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("JavaScript")}} において、**真値** (truthy) は{{Glossary("Boolean", "論理値")}}のコンテキストに現れた時に `true` とみなされる値のことです。{{Glossary("Falsy", "偽値 (falsy)")}} として定義された値 (つまり、`false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`, `NaN`) を除くすべての値は真値です。
 
 {{Glossary("JavaScript")}} は、論理値のコンテキストでは{{Glossary("Type_Conversion", "型変換")}}を用います。
diff --git a/files/ja/glossary/ttl/index.md b/files/ja/glossary/ttl/index.md
index b4a30a546ead55..9465408afcc782 100644
--- a/files/ja/glossary/ttl/index.md
+++ b/files/ja/glossary/ttl/index.md
@@ -3,6 +3,8 @@ title: TTL
 slug: Glossary/TTL
 ---
 
+{{GlossarySidebar}}
+
 TTL には以下の意味があります。
 
 - ネットワーク内でパケットが破棄されるまで存在できる時間
diff --git a/files/ja/glossary/turn/index.md b/files/ja/glossary/turn/index.md
index 91b8edb9112f41..a32424a1c063b6 100644
--- a/files/ja/glossary/turn/index.md
+++ b/files/ja/glossary/turn/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b
 ---
 
+{{GlossarySidebar}}
+
 **TURN** (Traversal Using Relays around NAT) は、{{glossary("NAT", "Network Address Translator")}} (NAT) やファイアウォールの内側からコンピューターがデータを受信および送信できるようにする {{Glossary('protocol', 'プロトコル')}} です。TURN は WebRTC で使用され、インターネット上の任意の 2 つのデバイスがピアツーピア接続できるようにします。
 
 ## 関連情報
diff --git a/files/ja/glossary/type/index.md b/files/ja/glossary/type/index.md
index 9053a6c34fb5d1..799e95a765c37b 100644
--- a/files/ja/glossary/type/index.md
+++ b/files/ja/glossary/type/index.md
@@ -3,6 +3,8 @@ title: Type (型)
 slug: Glossary/Type
 ---
 
+{{GlossarySidebar}}
+
 **型** (または*データ型*) とは、どのような種類のデータや構造を格納できるかに影響を与える{{glossary("value", "値")}}の特性のことです。例えば、論理型 ({{Glossary("boolean")}}) の[データ型](/ja/docs/Web/JavaScript/Data_structures)は常に `true` または `false` の値しか保持しませんが、 文字列型 ({{Glossary("string")}}) はテキスト文字列を保持し、数値型 ({{Glossary("number")}}) はあらゆる種類の数値を保持します。
 
 値のデータ型は、その値に対してどの演算が有効であるかにも影響します。例えば、数値型の値は他の数値を乗算することができますが、文字列を乗算することは、その文字列に "2" など数値*しか*入っていなかった場合であってもできません。
diff --git a/files/ja/glossary/type_coercion/index.md b/files/ja/glossary/type_coercion/index.md
index a4d63b86eb974f..b7f6c5878ab50e 100644
--- a/files/ja/glossary/type_coercion/index.md
+++ b/files/ja/glossary/type_coercion/index.md
@@ -3,6 +3,8 @@ title: Type coercion (型強制)
 slug: Glossary/Type_coercion
 ---
 
+{{GlossarySidebar}}
+
 型強制 (Type coercion) は、あるデータ型から他のデータ型への値の自動的または暗黙の変換です (文字列から数値など)。*{{Glossary("Type conversion", "型変換")}}*と*型強制*はよく似ており、どちらもある型から他の型へ値を変換しますが、一つ重要な違いがあります。*型強制*は暗黙的であるのに対し、*型変換*は暗黙的*または*明示的のどちらかです。
 
 ## 例
diff --git a/files/ja/glossary/type_conversion/index.md b/files/ja/glossary/type_conversion/index.md
index d067a950b16c7e..16183dd5a50dfa 100644
--- a/files/ja/glossary/type_conversion/index.md
+++ b/files/ja/glossary/type_conversion/index.md
@@ -3,6 +3,8 @@ title: Type conversion (型変換)
 slug: Glossary/Type_Conversion
 ---
 
+{{GlossarySidebar}}
+
 型変換 (Type conversion) (または型キャスト (typecasting) ) は、データをあるデータ型から別なデータ型に変換することを意味します。*暗黙の型変換*は、コンパイラーが自動的にデータ型を割り当てるものの、その場でソースコードで*明示的に*型変換が必要な場合もあります。例えば、 `5+2.0` という命令が与えられた場合、浮動小数点の `2.0` は暗黙的に整数に型キャストされますが、 `Number("0x11")` という命令が与えられた場合、 "0x11" の文字列は明示的に数値の 17 として型キャストされます。
 
 1. [用語集](/ja/docs/Glossary)
diff --git a/files/ja/glossary/ui/index.md b/files/ja/glossary/ui/index.md
index 391bf5c78926f1..9868f0a479c00d 100644
--- a/files/ja/glossary/ui/index.md
+++ b/files/ja/glossary/ui/index.md
@@ -3,6 +3,8 @@ title: UI
 slug: Glossary/UI
 ---
 
+{{GlossarySidebar}}
+
 **_ユーザーインターフェイス_** (UI) は、ユーザーと装置との間で情報のやりとりを促すものの総称です。コンピューターの分野においては、キーボード、ジョイスティック、ディスプレイ、プログラムなどが含まれます。コンピューターのソフトウェアにおいては、コマンドラインのプロンプト、ウェブページ、ユーザーの入力フォーム、フロントエンドのあらゆるアプリケーションが含まれます。
 
 ## 詳細情報
diff --git a/files/ja/glossary/undefined/index.md b/files/ja/glossary/undefined/index.md
index 2290af913cc741..6e3d7fdff62686 100644
--- a/files/ja/glossary/undefined/index.md
+++ b/files/ja/glossary/undefined/index.md
@@ -3,6 +3,8 @@ title: undefined
 slug: Glossary/Undefined
 ---
 
+{{GlossarySidebar}}
+
 `undefined`は、宣言のみが行われた{{glossary("variable", "変数")}}、あるいは実{{Glossary("Argument","引数")}}が存在しない仮引数に自動的に割り当てられる{{Glossary("primitive", "プリミティブ値")}}のことです。
 
 ## 例
diff --git a/files/ja/glossary/unicode/index.md b/files/ja/glossary/unicode/index.md
index 59e0e494780479..2454555aa53e9b 100644
--- a/files/ja/glossary/unicode/index.md
+++ b/files/ja/glossary/unicode/index.md
@@ -3,6 +3,8 @@ title: Unicode
 slug: Glossary/Unicode
 ---
 
+{{GlossarySidebar}}
+
 Unicode とは、世界の様々な言語、書式、記号に、番号を割り当てて定義した標準の{{Glossary("Character set","文字コード")}} です。一つ一つの{{Glossary("Character","文字")}} に番号を割り当てることで、プログラマーは、どの言語が混ざっていても、コンピューターに保存、処理、伝送させるような{{Glossary("Character encoding","文字エンコーディング")}}を同じファイルやプログラムの中に作ることができます。
 
 Unicode ができる以前は、同じデータのなかに異なる言語を入れることは難しく、誤りが起こりがちでした。例えば、ある文字コードは日本語の文字を格納するためのもので、別のある文字コードはアラビア文字を格納するためのものだとします。もしデータのどの部分がどの文字コードであるか明確に示していない場合、他のプログラムやコンピューターは、文章を誤って表示してしまったり、処理中にデータを破損してしまったりしていました。二重引用符 (`“”`)のような文字が `£` のようなわけのわからないものに置き換わっているのを見たことがあるかもしれません。それがこの問題です。[文字化け](https://ja.wikipedia.org/wiki/文字化け)として知られています。
diff --git a/files/ja/glossary/unix_time/index.md b/files/ja/glossary/unix_time/index.md
index 4003108d8edbfb..f1cc8c50f1d5c9 100644
--- a/files/ja/glossary/unix_time/index.md
+++ b/files/ja/glossary/unix_time/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: af32ed24e243178cd060769b7c707afcc271f9f6
 ---
 
+{{GlossarySidebar}}
+
 UNIX 時間はタイムスタンプを表す方法の一つで、通常、 UNIX 元期の開始（1970 年 1 月 1 日午前 0 時 (UTC)）からの秒数で定義されます。うるう秒は無視されます。
 
 ウェブプラットフォームでは、 UNIX 時間がタイムスタンプに使用され、 UNIX 元期の開始からのミリ秒数として与えられます。
diff --git a/files/ja/glossary/uri/index.md b/files/ja/glossary/uri/index.md
index e84a86d32744ab..6779caa3b1c752 100644
--- a/files/ja/glossary/uri/index.md
+++ b/files/ja/glossary/uri/index.md
@@ -3,6 +3,8 @@ title: URI
 slug: Glossary/URI
 ---
 
+{{GlossarySidebar}}
+
 **URI** _(Uniform Resource Identifier)_ は、リソースを示す文字列です。
 
 もっとも一般的なものは {{Glossary("URL","URL")}} であり、ウェブ上の場所を指定することで、リソースを識別します。対照的に {{Glossary("URN","URN")}} は、本の ISBN のような与えられた名前空間の中で名前によってリソースを参照します。
diff --git a/files/ja/glossary/url/index.md b/files/ja/glossary/url/index.md
index 02c3021d49da07..384d903f5e8d75 100644
--- a/files/ja/glossary/url/index.md
+++ b/files/ja/glossary/url/index.md
@@ -3,6 +3,8 @@ title: URL
 slug: Glossary/URL
 ---
 
+{{GlossarySidebar}}
+
 **Uniform Resource Locator** (**URL**) はインターネット上における(ウェブページや画像や動画といった)リソースの位置を特定するための文字列です。
 
 {{Glossary("HTTP")}} においては、URL は "ウェブアドレス" や "リンク" と呼ばれます。URL は{{glossary("browser", "ブラウザー")}}のアドレスバーに次のように表示されます。 `https://developer.mozilla.org` いくつかのブラウザーでは "//"以降の URL、つまり{{Glossary("Domain name", "ドメイン名")}}だけが表示されます。
diff --git a/files/ja/glossary/urn/index.md b/files/ja/glossary/urn/index.md
index fd36eb8ef13e0f..7b23f0004935dc 100644
--- a/files/ja/glossary/urn/index.md
+++ b/files/ja/glossary/urn/index.md
@@ -3,6 +3,8 @@ title: URN
 slug: Glossary/URN
 ---
 
+{{GlossarySidebar}}
+
 URN (Uniform Resource Name) は {{Glossary("URI")}} の基本的なフォーマットの一つであり、リソースを参照をしますが、場所を特定したり存在の有無を確認したりする必要はありません。[RFC3986](http://www.ietf.org/rfc/rfc3986.txt)からの例です: `urn:oasis:names:specification:docbook:dtd:xml:4.1.2`
 
 ## 詳細情報
diff --git a/files/ja/glossary/usenet/index.md b/files/ja/glossary/usenet/index.md
index 3adaca1a8ccd4b..96d7ed2b187d00 100644
--- a/files/ja/glossary/usenet/index.md
+++ b/files/ja/glossary/usenet/index.md
@@ -3,6 +3,8 @@ title: Usenet
 slug: Glossary/Usenet
 ---
 
+{{GlossarySidebar}}
+
 Usenet は、各投稿が多数のサーバーで複製されるインターネットディスカッションシステムです。当時のインターネットフォーラムに相当する Usenet は、掲示板システムの様に機能していました。
 
 ## 詳細情報
diff --git a/files/ja/glossary/user_agent/index.md b/files/ja/glossary/user_agent/index.md
index 701deb87320725..37ec9e9e4b8f02 100644
--- a/files/ja/glossary/user_agent/index.md
+++ b/files/ja/glossary/user_agent/index.md
@@ -3,6 +3,8 @@ title: User agent (ユーザーエージェント)
 slug: Glossary/User_agent
 ---
 
+{{GlossarySidebar}}
+
 ユーザーエージェントは個人を表すコンピューターのプログラムで、例えば{{Glossary("World Wide Web", "ウェブ")}}における{{Glossary("Browser","ブラウザー")}}に当たるものです。
 
 ブラウザーのほかに、ウェブページをスクレイピングするボット、ダウンロードマネージャー、その他のウェブにアクセスするアプリがユーザーエージェントになる可能性もあります。ブラウザーはサーバーに対してリクエストを行う際に毎回、 {{Glossary("HTTP")}} の {{HTTPHeader("User-Agent")}} ヘッダーに、ユーザーエージェント (UA) 文字列と呼ばれる自分自身を識別する文字列を含めます。この文字列はブラウザー、バージョン番号、ホストのオペレーティングシステムなどを識別します。
diff --git a/files/ja/glossary/utf-8/index.md b/files/ja/glossary/utf-8/index.md
index 191c354cd4a31c..c49677b3932adf 100644
--- a/files/ja/glossary/utf-8/index.md
+++ b/files/ja/glossary/utf-8/index.md
@@ -3,6 +3,8 @@ title: UTF-8
 slug: Glossary/UTF-8
 ---
 
+{{GlossarySidebar}}
+
 UTF-8 (UCS Transformation Format 8) は World Wide Web において最も一般的な{{Glossary("Character encoding", "文字エンコーディング")}}です。 1 文字あたり 1 ～ 4 バイトで表します。UTF-8 は {{Glossary("ASCII")}} に対して後方互換性を持っており、すべての標準 Unicode 文字を表現することができます。
 
 UTF-8 の最初の 128 文字は、ASCII の 128 文字 (0 ～ 127) に正確に対応しており、つまり既存の ASCII 文字列はすでに UTF-8 として有効です。他の文字は 2 ～ 4 バイトを使用します。それぞれのバイトにはエンコードのためにいくつかのビットが予約されています。非 ASCII 文字は格納するために 2 バイト以上を必要とするため、バイト列が分割され再結合されない場合に破損する恐れがあります。
diff --git a/files/ja/glossary/uuid/index.md b/files/ja/glossary/uuid/index.md
index eeca12505aa7a0..b4e3b426b4eb0c 100644
--- a/files/ja/glossary/uuid/index.md
+++ b/files/ja/glossary/uuid/index.md
@@ -3,6 +3,8 @@ title: UUID
 slug: Glossary/UUID
 ---
 
+{{GlossarySidebar}}
+
 **Universally Unique Identifier** (**UUID**) とは、あるリソースを、同じ種類の他のすべてのリソースの中から一意に識別するために使用されるラベルです。
 
 コンピューターシステムは、とても大きい桁の乱数を使って UUID をローカルで生成します。
diff --git a/files/ja/glossary/ux/index.md b/files/ja/glossary/ux/index.md
index 80d7e63e6e692f..b6cc3e6eba43e8 100644
--- a/files/ja/glossary/ux/index.md
+++ b/files/ja/glossary/ux/index.md
@@ -3,6 +3,8 @@ title: UX
 slug: Glossary/UX
 ---
 
+{{GlossarySidebar}}
+
 **UX** とは、User eXperience (ユーザーエクスペリエンス、ユーザー体験) の頭文字語です。UX はユーザーとシステムとの関係を考える研究で、システムがユーザーから見て使いやすいものにすることを目的としています。
 
 ここで言うシステムとは、どんな種類の製品やアプリケーションにも当てはまります。UX の研究が、たとえばウェブページ上に使われると、ユーザーがページを理解しやすくなったり、別のエリアに簡単に移動できるようになったり、よくあるタスクを実行しやすくなったり、そうした操作をする時の抵抗を少なくしたりすることができます。
diff --git a/files/ja/glossary/validator/index.md b/files/ja/glossary/validator/index.md
index 73c92513869fdc..ecf1e6648f12d9 100644
--- a/files/ja/glossary/validator/index.md
+++ b/files/ja/glossary/validator/index.md
@@ -3,6 +3,8 @@ title: Validator (バリデーター)
 slug: Glossary/Validator
 ---
 
+{{GlossarySidebar}}
+
 バリデーターはコードの構文エラーを確認するプログラムです。バリデーターはあらゆる書式や言語のために作成することができますが、ここでは特に {{Glossary("HTML")}}、{{Glossary("CSS")}}、そして {{Glossary("XML")}} を確認するツールのことを指します。
 
 ## 詳細情報
diff --git a/files/ja/glossary/value/index.md b/files/ja/glossary/value/index.md
index 50850bf463a898..d97eb118f708e9 100644
--- a/files/ja/glossary/value/index.md
+++ b/files/ja/glossary/value/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: ba6c97a742adb97092d5b20804bf9c462f3b84f3
 ---
 
+{{GlossarySidebar}}
+
 データ、またはデータ周りのオブジェクト **{{Glossary("Wrapper", "ラッパー")}}** のコンテキストでは、値はオブジェクトラッパーに含まれる **{{Glossary("Primitive","プリミティブ値")}}** です。 **{{Glossary("Variable","変数")}}** や **{{Glossary("Property","プロパティ")}}** のコンテキストでは、値はプリミティブ、もしくは **{{Glossary("Object reference","オブジェクト参照")}}** のいずれかになります。
 
 ## 詳細情報
diff --git a/files/ja/glossary/variable/index.md b/files/ja/glossary/variable/index.md
index 886c7a615068ca..47d85a75acb9cc 100644
--- a/files/ja/glossary/variable/index.md
+++ b/files/ja/glossary/variable/index.md
@@ -3,6 +3,8 @@ title: Variable (変数)
 slug: Glossary/Variable
 ---
 
+{{GlossarySidebar}}
+
 変数は、{{Glossary("Value", "値")}}を格納するための名前付けされた場所です。これにより、あらかじめ決めておいた名前を使って、予測できない値にアクセスできます。
 
 ## 関連情報
diff --git a/files/ja/glossary/vendor_prefix/index.md b/files/ja/glossary/vendor_prefix/index.md
index 3098421422aa5c..667075afab7d90 100644
--- a/files/ja/glossary/vendor_prefix/index.md
+++ b/files/ja/glossary/vendor_prefix/index.md
@@ -3,6 +3,8 @@ title: Vendor Prefix (ベンダー接頭辞)
 slug: Glossary/Vendor_Prefix
 ---
 
+{{GlossarySidebar}}
+
 ブラウザーベンダー (提供元) は、時に試験的または非標準な CSS プロパティおよび JavaScript API に接頭辞を追加することがあります。これにより、開発者は標準化プロセスの中で、理論上は、ウェブ開発者のコードを壊すことなく新しいアイデアを試すことができます。開発者は、ブラウザーの振る舞いが標準化されるまで、接頭辞を外したプロパティを導入するのを待つべきです。
 
 > **メモ:** ブラウザーベンダーは、実験的な機能にベンダー接頭辞をつけることをやめるようになってきています。ウェブ開発者は、実験的な機能であるにもかかわらず、実運用のウェブサイトで使用し続けてきました。これはブラウザーベンダーが互換性を維持して、新しい機能を導入することを困難にしてしまいました。これはシェアの小さなブラウザーにとっても有害で、有名なウェブサイトを読み込むために他のブラウザーの接頭辞を追加せざるを得ない結果になりました。
@@ -66,5 +68,3 @@ var requestAnimationFrame =
 ### 一般知識
 
 - Wikipedia の [Vendor prefix](https://en.wikipedia.org/wiki/CSS_hack#Browser_prefixes) の記事　【訳注：ウィキペディア日本語版には該当する節がありません】
-
-{{QuickLinksWithSubpages("/ja/docs/Glossary")}}
diff --git a/files/ja/glossary/viewport/index.md b/files/ja/glossary/viewport/index.md
index 1c6e1cee48cd7b..84326937898ccf 100644
--- a/files/ja/glossary/viewport/index.md
+++ b/files/ja/glossary/viewport/index.md
@@ -3,6 +3,8 @@ title: Viewport (ビューポート)
 slug: Glossary/Viewport
 ---
 
+{{GlossarySidebar}}
+
 ビューポートは、現在表示されているコンピューター画像の中の、多角形 (通常は長方形) の領域を表します。ウェブブラウザーの用語としては、閲覧中の文書のうち、ウィンドウ (または、文書が全画面モードで表示されている場合は画面) の中で現在見えている部分を指します。ビューポートの外にあるコンテンツは、スクロールによってビューの中に移動するまで画面上では見えません。
 
 ビューポートの中で現在見えている部分を**{{Glossary("visual viewport", "視覚的ビューポート")}}**と呼んでいます。これは、ユーザーがピンチ操作により拡大縮小しているときなど、レイアウトビューポートより小さくなることがあります。{{Glossary("layout viewport", "レイアウトビューポート")}}は変わりませんが、視覚的ビューポートはより小さくなります。
diff --git a/files/ja/glossary/visual_viewport/index.md b/files/ja/glossary/visual_viewport/index.md
index fd74ab700728f4..5f5b29d95566cf 100644
--- a/files/ja/glossary/visual_viewport/index.md
+++ b/files/ja/glossary/visual_viewport/index.md
@@ -3,6 +3,8 @@ title: Visual Viewport (視覚的ビューポート)
 slug: Glossary/Visual_Viewport
 ---
 
+{{GlossarySidebar}}
+
 {{Glossary("viewport", "ビューポート")}} のうち、現在表示されている部分は視覚的ビューポートと呼ばれています。これは、ユーザーがピンチ操作で拡大をした場合などに、レイアウトビューポートよりも小さくなることがあります。視覚的ビューポートは画面の視覚的な部分であり、これは画面上のキーボード、ピンチ操作で拡大したことにより画面外に出た領域、その他のページの寸法に合わせて拡大縮小されない画面上の部分を除いたものです。
 
 ## 詳細情報
diff --git a/files/ja/glossary/void_element/index.md b/files/ja/glossary/void_element/index.md
index 82aca5091357f9..4c2e0fcb5b1f1f 100644
--- a/files/ja/glossary/void_element/index.md
+++ b/files/ja/glossary/void_element/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: af32ed24e243178cd060769b7c707afcc271f9f6
 ---
 
+{{GlossarySidebar}}
+
 **空要素 (void element)** とは HTML における{{Glossary("element", "要素")}}のうち、子ノード（すなわち子要素およびテキストノード）を**持つことができない**ものを指します。空要素には開始タグしかありません。空要素では終了タグを指定することができません。
 
 また HTML においては、空要素に終了タグを置くことはできません。例えば、 `<input type="text"></input>` は不正な HTML です。一方、 SVG や MathML の要素で子ノードを保有することができないものは、開始タグ内で XML 自己完結型タグ構文を置く代わりに終了タグを使用することができます。
diff --git a/files/ja/glossary/voip/index.md b/files/ja/glossary/voip/index.md
index 776bd043d8b664..fa6d4c5367fe41 100644
--- a/files/ja/glossary/voip/index.md
+++ b/files/ja/glossary/voip/index.md
@@ -3,6 +3,8 @@ title: VoIP
 slug: Glossary/VoIP
 ---
 
+{{GlossarySidebar}}
+
 VoIP (Voice over Internet Protocol) は、IP (Internet Protocol) ネットワーク上で音声情報の伝送に使用される技術です。一般的な VoIP パッケージには、Skype、MSN Messenger、Yahoo 、その他多くのものが含まれます。VoIP ではすべてデジタルで伝送されます。それらは IP テレフォニーやブロードバンドテレフォニーとしても知られています。VoIP 技術を利用する主な理由は費用です。
 
 VoIP は、コンピューターから特定の VoIP 電話機や、特定のアダプターを接続した一般的な電話機から直接電話をかけることを可能にします。VoIP は高速インターネット接続が必要です。通常、インターネットを通じて電話をかける場合、インターネットを通じて個々の E メールを送る度に料金を支払わないのと同じように、利用者がインターネットアクセスに支払う料金とは別に追加料金はかかりません。
diff --git a/files/ja/glossary/w3c/index.md b/files/ja/glossary/w3c/index.md
index 5c340c5eea31f7..d3afcdea94cd2e 100644
--- a/files/ja/glossary/w3c/index.md
+++ b/files/ja/glossary/w3c/index.md
@@ -3,6 +3,8 @@ title: W3C
 slug: Glossary/W3C
 ---
 
+{{GlossarySidebar}}
+
 _World Wide Web Consortium_ (W3C) は、{{Glossary("World Wide Web", "ウェブに関する")}}ルールや枠組みを整備する国際団体です。
 
 W3C は 350 を超える加盟組織から成り、加盟組織は連帯してウェブ標準を開発し、ウェブの普及計画を遂行し、ウェブについて話し合うための開かれた場を整備しています。 W3C は業界の各企業に対して同じ W3C の標準を実装するよう働きかけています。
diff --git a/files/ja/glossary/wai/index.md b/files/ja/glossary/wai/index.md
index 8f439050102da1..dc69f0d1d71fa4 100644
--- a/files/ja/glossary/wai/index.md
+++ b/files/ja/glossary/wai/index.md
@@ -3,6 +3,8 @@ title: WAI
 slug: Glossary/WAI
 ---
 
+{{GlossarySidebar}}
+
 WAI または Web Accessibility Initiative は、標準外の{{Glossary("browser","ブラウザ")}}やデバイスを必要とする可能性がある、さまざまな課題を抱える人々のためにアクセシビリティを向上させるための、{{Glossary("W3C","World Wide Web Consortium")}}（W3C）による取り組みです。
 
 ## より詳しく知る
diff --git a/files/ja/glossary/wcag/index.md b/files/ja/glossary/wcag/index.md
index 76e5baa84dce14..19e700276d8ef0 100644
--- a/files/ja/glossary/wcag/index.md
+++ b/files/ja/glossary/wcag/index.md
@@ -3,6 +3,8 @@ title: WCAG
 slug: Glossary/WCAG
 ---
 
+{{GlossarySidebar}}
+
 _Web Content Accessibility Guidelines_ (**WCAG**) は {{Glossary("W3C")}} の {{Glossary("WAI","Web Accessibility Initiative")}} が発行している勧告です。まずは障害のある人や、そのほか携帯電話のように端末に制限のあるユーザーのために、コンテンツをアクセシブルにする基準を示したガイドライン集を定めています。
 
 2008 年 12 月 11 日に WCAG 1.0 の次となる WCAG 2.0 が W3C から勧告されました。アクセシビリティの 4 つの原則 (知覚可能、操作可能、理解可能、および堅牢性) に基づき、12 のガイドラインがあり、各ガイドラインには検証可能な達成基準が設けられています。
diff --git a/files/ja/glossary/web_performance/index.md b/files/ja/glossary/web_performance/index.md
index 10bfdcc108561b..36776b0eb09f5c 100644
--- a/files/ja/glossary/web_performance/index.md
+++ b/files/ja/glossary/web_performance/index.md
@@ -5,6 +5,8 @@ l10n:
   sourceCommit: 4a9f9d2e9c1811ce3519a7061e906db9200a5e97
 ---
 
+{{GlossarySidebar}}
+
 **ウェブパフォーマンス**とは、コンテンツのリクエストが行われてから、リクエストされたコンテンツがユーザーのブラウザーに表示されるまでの客観的な時間であり、客観的なレンダリング時間、読み込み時間と主観的な読み込み時間および実行時間の使い心地のことです。
 
 客観的には、ウェブページやウェブアプリケーションがダウンロードされ、ユーザーのウェブブラウザーに表示され、レスポンシブかつ操作可能になるまでのミリ秒単位で測定可能な時間です。これは、秒あたりのフレーム数と、メインスレッドがユーザーのインタラクションに利用できない時間のことです。主観的には、ユーザーがコンテンツを要求してから、要求されたコンテンツが利用可能で使用可能だとユーザーが感じるまでの時間が遅いと感じるか、速いと感じるかについてのユーザーの*感覚*です。
diff --git a/files/ja/glossary/web_server/index.md b/files/ja/glossary/web_server/index.md
index b7ab608d4ff6af..5243f8fd40436f 100644
--- a/files/ja/glossary/web_server/index.md
+++ b/files/ja/glossary/web_server/index.md
@@ -3,6 +3,8 @@ title: Web server (ウェブサーバー)
 slug: Glossary/Web_server
 ---
 
+{{GlossarySidebar}}
+
 ウェブサーバーは、ユーザーにサービスを提供するハードウェアサーバー上で動作するソフトウェアのことで、通常はクライアントから参照されます。一方、サーバーは、一般的にデータセンターと呼ばれるコンピューターであふれた部屋にあるハードウェアの一部です。
 
 - [サーバーの紹介](/ja/docs/Learn/Common_questions/What_is_a_web_server)
diff --git a/files/ja/glossary/web_standards/index.md b/files/ja/glossary/web_standards/index.md
index 29f89073022e85..e071c67d655b16 100644
--- a/files/ja/glossary/web_standards/index.md
+++ b/files/ja/glossary/web_standards/index.md
@@ -3,6 +3,8 @@ title: Web standards (ウェブ標準)
 slug: Glossary/Web_standards
 ---
 
+{{GlossarySidebar}}
+
 ウェブ標準は国際標準化団体によって策定される、 {{Glossary("World Wide Web", "ウェブ")}} の仕組み (またときには {{Glossary("Internet", "インターネット")}} を制御する方法) を定義する規則です。
 
 いくつかの標準化団体がウェブのさまざまな側面を定義する責任があり、すべての標準はウェブを最大限に利用可能でアクセス可能に保つために調整する必要があります。
diff --git a/files/ja/glossary/webassembly/index.md b/files/ja/glossary/webassembly/index.md
index c2fdeaf4fa4396..cc3b7a6e1a19ec 100644
--- a/files/ja/glossary/webassembly/index.md
+++ b/files/ja/glossary/webassembly/index.md
@@ -3,6 +3,8 @@ title: WebAssembly
 slug: Glossary/WebAssembly
 ---
 
+{{GlossarySidebar}}
+
 **WebAssembly** (_Wasm_) は、オープン{{Glossary("binary", "バイナリ")}}プログラミング言語です。モダンウェブ{{Glossary("Browser", "ブラウザ")}}で動作します。パフォーマンスを高め、かつ/もしくは、ウェブページのための新しい機能を提供します。
 
 1. 詳細
diff --git a/files/ja/glossary/webdav/index.md b/files/ja/glossary/webdav/index.md
index ed298196fe33e9..b66b47209e63b4 100644
--- a/files/ja/glossary/webdav/index.md
+++ b/files/ja/glossary/webdav/index.md
@@ -3,6 +3,8 @@ title: WebDAV
 slug: Glossary/WebDAV
 ---
 
+{{GlossarySidebar}}
+
 **WebDAV** (_Web Distributed Authoring and Versioning_) は Web 開発者がリモートでウェブクライントからコンテンツを更新できる {{Glossary("HTTP")}} 拡張機能です。
 
 WebDAV 単体で使われる事はまれで、{{Glossary("CalDAV")}}(リモートで使えるカレンダー） と{{Glossary("CardDAV")}}(リモートで使えるアドレス帳）の 2 つの拡張機能と共に使われるのが一般的です。
diff --git a/files/ja/learn/performance/multimedia/index.md b/files/ja/learn/performance/multimedia/index.md
index 505d7067e850ad..971d37b775e54f 100644
--- a/files/ja/learn/performance/multimedia/index.md
+++ b/files/ja/learn/performance/multimedia/index.md
@@ -2,12 +2,12 @@
 title: "マルチメディア: 画像"
 slug: Learn/Performance/Multimedia
 l10n:
-  sourceCommit: 5c30b5e4e57d1a77ce56b88b3de1171d57562808
+  sourceCommit: 0a9bfb1aee6b1b88c14acd3f66501cc01320f184
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}
 
-画像や動画といったメディアは、平均的なウェブサイトでダウンロードされるバイトの70%以上を占めています。ダウンロードのパフォーマンスという観点からは、メディアを排除し、ファイルサイズを縮小することは、低いハードルであると言えます。この記事では、ウェブパフォーマンスを向上させるために画像や動画を最適化することについて見ていきます。
+画像や動画といったメディアは、平均的なウェブサイトでダウンロード量の 70% 以上を占めています。ダウンロードのパフォーマンスという観点からは、メディアを減らし、ファイルサイズを縮小することは、低いハードルであると言えます。この記事では、ウェブパフォーマンスを向上させるために画像や動画を最適化することについて見ていきます。
 
 <table>
   <tbody>
@@ -33,7 +33,7 @@ l10n:
   </tbody>
 </table>
 
-> **メモ:** これは、ウェブ上でのマルチメディア配信を最適化するための高レベルな 入門書であり、一般的な原則とテクニックに応じたものです。より詳細なガイドについては、 <https://images.guide> を参照してください。
+> **メモ:** これは、ウェブ上でのマルチメディア配信を最適化するための高レベルな入門書であり、一般的な原則とテクニックに応じたものです。より詳細なガイドについては、 <https://web.dev/learn/images> を参照してください。
 
 ## なぜマルチメディアを最適化するのか
 
@@ -49,9 +49,9 @@ l10n:
 
 ### 読み込み戦略
 
-多くのウェブサイトにおける最大の改善点のひとつは、画像を見える直前に[遅延読み込み](/ja/docs/Web/Performance/Lazy_loading)することで、訪問者がスクロールして見るかどうかにかかわらず、最初のページ読み込み時にすべてダウンロードしないようにすることです。多くの JavaScript ライブラリーが、[lazysizes](https://github.com/aFarkas/lazysizes) のように、この作業を実装することができます。また、ブラウザーベンダーは、現在実験段階であるネイティブの `lazyload` 属性に取り組んでいます。
+多くのウェブサイトにおける最大の改善点のひとつは、画像を見える直前に[遅延読み込み](/ja/docs/Web/Performance/Lazy_loading)することで、訪問者がスクロールして見るかどうかにかかわらず、最初のページ読み込み時にすべてダウンロードしないようにすることです。多くの JavaScript ライブラリー、たとえば [lazysizes](https://github.com/aFarkas/lazysizes) などで、これを実装することができます。また、ブラウザーベンダーは、現在実験段階であるネイティブの `lazyload` 属性に取り組んでいます。
 
-画像のサブセットを読み込むだけでなく、次は画像そのものの形式も見ていく必要があります。
+画像のサブセットを読み込むだけでなく、画像そのものの形式も見ていく必要があります。
 
 - 最適なファイル形式を読み込んでいますか？
 - 画像はしっかり圧縮してありますか？
@@ -68,27 +68,27 @@ l10n:
 PNG は 3 種類の出力の組み合わせで保存することができます。
 
 - 24 ビットカラー＋8 ビット透過率 - サイズを犠牲にして、完全な色精度と滑らかな透過率を提供します。この組み合わせは避け、WebP（下記参照）にした方がよいでしょう。
-- 8 ビットカラー＋8 ビット透過率 - 255 色を超えることはできないが、滑らかな透過率を維持することができます。サイズはあまり大きくない。これらは、おそらく使いたい PNG です。
-- 8 ビット色＋1 ビット透過率 - 255 色以上を提供せず、ただピクセルごとに非透過または完全透過を提供するため、透過率の境界線が硬くギザギザに見えます。サイズは小さいが、視覚的な忠実さが代償となります。
+- 8 ビットカラー＋8 ビット透過率 - 255 色を超えることはできないが、滑らかな透過率を維持することができます。サイズはあまり大きくありません。これらは、おそらく使いたい PNG です。
+- 8 ビット色＋1 ビット透過率 - 255 色を超えることはできず、ただピクセルごとに非透過または完全透過のどちらかだけを提供するため、透過率の境界線が硬くギザギザに見えます。サイズは小さいが、視覚的な忠実さが代償となります。
 
 SVGを最適化するための良いオンラインツールとしては、[SVGOMG](https://jakearchibald.github.io/svgomg/) があります。PNG の場合は、[ImageOptim online](https://imageoptim.com/online) や [Squoosh](https://squoosh.app/) があります。
 
-透過率のない写真モチーフの場合、選べる範囲はかなり広いです。安全性を重視するならば、圧縮率の高い**プログレッシブ JPEG** をお勧めします。プログレッシブ JPEG は、通常の JPEG とは異なり、プログレッシブにレンダリングします（そのため、この名前がついています）。つまり、ユーザーは、画像がダウンロードされるにつれて鮮明になる低解像度のバージョンを見ることになりますが、画像が上から下までフル解像度で読み込まれるのではなく、また、完全にダウンロードされた後にのみレンダリングされます。このような場合に適した圧縮ソフトは MozJPEG で、例えばオンライン画像最適化ツール [Squoosh](https://squoosh.app/) で使用することができます。品質設定は 75% で、適切な結果が得られるはずです。
+透過のない写真モチーフの場合、選べる形式の範囲はかなり広くなります。安全性を重視するならば、圧縮率の高い**プログレッシブ JPEG** をお勧めします。プログレッシブ JPEG は、通常の JPEG とは異なり、プログレッシブにレンダリングします（そのため、この名前がついています）。つまり、画像が上から下まで完全な解像度で読み込まれたり、ダウンロードが完了したりしてから表示されるのではなく、ユーザーには低解像度のバージョンが表示され、ダウンロードが進むにつれて鮮明になっていく様子が見えます。このような場合に適した圧縮ソフトは MozJPEG で、例えばオンライン画像最適化ツール [Squoosh](https://squoosh.app/) で使用することができます。品質設定は 75% で、適切な結果が得られるはずです。
 
 他にも、圧縮に関して JPEG より能力を上回る形式がありますが、すべてのブラウザーで利用できるわけではありません。
 
-- [WebP](/ja/docs/Web/Media/Formats/Image_types#webp_画像) — 画像とアニメーション画像の両方に最適な選択肢です。WebP は PNG や JPEG よりもはるかに優れた圧縮率を持ち、より高い色深度、アニメーションフレーム、透過率などに対応しています（ただし、プログレッシブ表示には対応していません）。macOS デスクトップの Safari 14 を除く、主要なブラウザーで対応しています。
+- [WebP](/ja/docs/Web/Media/Formats/Image_types#webp_画像) — 画像とアニメーション画像の両方に最適な選択肢です。WebP は PNG や JPEG よりもはるかに優れた圧縮率を持ち、より高い色深度、アニメーションフレーム、透過率などに対応しています（ただし、プログレッシブ表示には対応していません）。macOS デスクトップ Big Sur の Safari 14 以前を除く、主要なブラウザーで対応しています。
 
-  > **メモ:** Safari 14 で WebP の対応を[発表](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)しているにもかかわらず、バージョン 14.0 現在、macOS のデスクトップでは .webp 画像がネイティブに表示されないが、iOS 14 の Safari で は.webp 画像が正しく表示されます。
+  > **メモ:** 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 でのみ対応しています。プログレッシブ表示にも対応していません。
+- [AVIF](/ja/docs/Web/Media/Formats/Image_types#avif_画像) — 高性能でロイヤリティフリーの画像形式であるため、画像とアニメーション画像の両方に適しています（WebP よりもさらに効率的ですが、対応はそれほど広くありません）。これで Chrome、Opera、Firefox で対応しています。[以前の画像形式を AVIF に変換するオンラインツール](https://avif.io/)も参照してください。
+- **JPEG2000** — かつては JPEG の後継とされていましたが、Safari でのみ対応しています。プログレッシブ表示にも対応していません。
 
 JPEG-XR と JPEG2000 の対応も狭く、デコードするコストも考慮すると、JPEG の対抗馬は WebP しかありません。そのため、画像も WebP で提供することができます。これは、`<picture>` 要素で [type 属性](/ja/docs/Web/HTML/Element/picture#the_type_attribute)を備えた `<source>` 要素により補助することで実現することができます。
 
 もし、この作業がすべて複雑で、チームにとって負担が大きいと感じるのであれば、画像 CDN として使用できるオンラインサービスもあります。このサービスは、画像をリクエストされた機器や ブラウザーの種類に応じて、その場で正しい画像形式を自動配信してくれます。[Cloudinary](https://cloudinary.com/blog/make_all_images_on_your_website_responsive_in_3_easy_steps) や [Image Engine](https://imageengine.io/) が代表的なものです。
 
-最後に、ページにアニメーション画像を掲載するために、Safari では `<img>` と `<picture>` 要素に動画ファイルを使用することができることをご存知でしょうか？他にも現代のブラウザーでは、**アニメーション WebP** を追加することができます。
+しすて最後に、ページにアニメーション画像を掲載するために、Safari では `<img>` と `<picture>` 要素に動画ファイルを使用することができることをご存知でしょうか？他にも現代のブラウザーでは、**アニメーション WebP** を追加することができます。
 
 ```html
 <picture>
@@ -113,7 +113,7 @@ JPEG-XR と JPEG2000 の対応も狭く、デコードするコストも考慮
 
 最初に確認することは、コンテンツ画像に `<img>` 要素または `<picture>` 要素を使用しているか、背景画像を CSS の `background-image` で定義しているかということです。`<img>` 要素で参照する画像は、背景画像より高い読み込み優先度が割り当てられます。
 
-2つ目は、優先度ヒントの採用により、画像タグに `fetchPriority` 属性を追加することで、さらに優先度を制御できるようになることです。画像に優先度ヒントを使用する例としては、最初の画像が後続の画像よりも高い優先度を持つカルーセルが挙げられます。
+2 つ目は、優先度ヒントの採用により、画像タグに `fetchPriority` 属性を追加することで、さらに優先度を制御できるようになることです。画像に優先度ヒントを使用する例としては、最初の画像が後続の画像よりも高い優先度を持つカルーセルが挙げられます。
 
 ### レンダリング戦略: 画像を読み込むときのジャンクの防止
 
@@ -136,9 +136,9 @@ img {
 }
 ```
 
-レスポンシブレイアウトには便利ですが、幅と高さの情報が記載されていない場合、ジャンクの原因となります。`<img>` 要素が解釈されたときに高さの情報がない場合、画像を読み込む前に、この CSS は高さを0に設定します。ページが画面の内側へ最初に描画された後に画像が読み込まれると、新たに決めた高さを確保するために、ページは再フローや再描画を行い、レイアウトが変化します。
+レスポンシブレイアウトには便利ですが、幅と高さの情報が記載されていない場合、ジャンクの原因となります。`<img>` 要素が解釈されたときに高さの情報がない場合、画像を読み込む前に、この CSS は高さを 0 に設定します。ページが画面の内側へ最初に描画された後に画像が読み込まれると、新たに決めた高さを確保するために、ページは再フローや再描画を行い、レイアウトが変化します。
 
-ブラウザーには、実際の画像が読み込まれる前に、画像のサイズを調整する仕組みがあります。`<img>`、`<video>`、`<input type="button">` 要素に `width` と `height` 属性が設定されている場合、その縦横比は読み込む前に計算され、提供された寸法をブラウザーが利用できるようになります。
+ブラウザーには、実際の画像が読み込まれる前に、画像のサイズを調整する仕組みがあります。 `<img>`、`<video>`、`<input type="button">` 要素に `width` と `height` 属性が設定されている場合、その縦横比は読み込む前に計算され、提供された寸法をブラウザーが利用できるようになります。
 
 アスペクト比は次に高さの計算に用いられ、正しいサイズが `<img>` 要素に適用されます。つまり、画像が読み込まれる際に前述のジャンクは発生しないか、指定されている寸法が完全に正確でない場合でも、最小限に抑えられます。
 
@@ -146,10 +146,10 @@ img {
 
 過去 10 年来、開発者は `width` と `height` 属性を HTML の {{htmlelement("img")}} の画像では省略することが最善の手法として推奨されてきましたが、アスペクト比の割り当てのため、これら 2 つの属性を指定することが開発者の最善の手法と考えられています。
 
-背景画像については、`background-color` 値を設定することが重要で、そうすれば画像がダウンロードされる前に、その上に重なるコンテンツが読めるようになります。
+背景画像については、 `background-color` 値を設定することが重要で、そうすれば画像がダウンロードされる前に、その上に重なるコンテンツが読めるようになります。
 
 ## まとめ
 
-この章では、画像の最適化について見ていきました。これで、平均的なウェブサイトの平均帯域幅の合計の半分を最適化する方法について、一般的に理解したことになります。これは、ユーザーの帯域幅を消費し、ページ読み込みを遅くするメディアの種類の 1 つに過ぎません。次に、帯域幅消費の 20% を占める動画の最適化について見ていきましょう。
+この章では、画像の最適化について見ていきました。これで、平均的なウェブサイトの平均帯域幅の合計の半分を最適化する方法について、全般的に理解したことになります。これは、ユーザーの帯域幅を消費し、ページ読み込みを遅くするメディアの種類の 1 つに過ぎません。次に、帯域幅消費の 20% を占める動画の最適化について見ていきましょう。
 
 {{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}
diff --git a/files/ja/mdn/community/communication_channels/index.md b/files/ja/mdn/community/communication_channels/index.md
index 1e4bc3a5036d61..b3105f5d425f6e 100644
--- a/files/ja/mdn/community/communication_channels/index.md
+++ b/files/ja/mdn/community/communication_channels/index.md
@@ -20,7 +20,7 @@ MDN Web Docs コミュニティの Discord サーバーは、一般に公開さ
 
 質問を依頼したり、説明を求めたり、どうすれば取得できるかを探すことができます。また、自分の興味や専門分野に基づいた特定のチャンネルに参加することもできます。
 
-MDN Web Docs の Discord コミュニティには[ここ](https://discord.gg/apa6Rn7uEj)から参加してください。
+MDN Web Docs の Discord コミュニティには[ここ](/discord)から参加してください。
 
 ### Matrix チャットルーム
 
diff --git a/files/ja/web/api/element/append/index.md b/files/ja/web/api/element/append/index.md
index d32b2e1a091e19..969c2b196870a3 100644
--- a/files/ja/web/api/element/append/index.md
+++ b/files/ja/web/api/element/append/index.md
@@ -8,7 +8,7 @@ l10n:
 
 {{APIRef("DOM")}}
 
-**`Element.append()`** メソッドは、一連の {{domxref("Node")}} オブジェクトまたは文字列を `Element` のの最後の子の後に挿入します。文字列は、等価な {{domxref("Text")}} ノードとして挿入されます。
+**`Element.append()`** メソッドは、一連の {{domxref("Node")}} オブジェクトまたは文字列を `Element` の最後の子の後に挿入します。文字列は、等価な {{domxref("Text")}} ノードとして挿入されます。
 
 {{domxref("Node.appendChild()")}} との違いは次の通りです。
 
diff --git a/files/ja/web/css/absolute-size/index.md b/files/ja/web/css/absolute-size/index.md
new file mode 100644
index 00000000000000..9d898a4cbaddcb
--- /dev/null
+++ b/files/ja/web/css/absolute-size/index.md
@@ -0,0 +1,132 @@
+---
+title: <absolute-size>
+slug: Web/CSS/absolute-size
+l10n:
+  sourceCommit: aeb87af1283cb24e735a00b1409b087b4ed2a0fb
+---
+
+{{CSSRef}}
+
+**`<absolute-size>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、絶対サイズキーワードを記述します。このデータ型は {{cssxref("font")}} の一括指定と {{cssxref("font-size")}} プロパティで使用します。
+
+フォントサイズのキーワードは、 HTML の非推奨の `size` 属性に対応します。下記の [HTML size 属性](#html_の_size_属性)の節を参照してください。
+
+## 構文
+
+```plain
+<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
+```
+
+### 値
+
+`<absolute-size>` データ型は、下記の一覧から選んだキーワード値を使って定義します。
+
+- `xx-small`
+
+  - : 絶対サイズ `medium` の 60% のサイズです。非推奨の `size="1"` に対応します。
+
+- `x-small`
+
+  - : 絶対サイズ `medium` の 75% のサイズです。
+
+- `small`
+
+  - : 絶対サイズ `medium` の 89% のサイズです。非推奨の `size="2"` に対応します。
+
+- `medium`
+
+  - : ユーザーの推奨フォントサイズです。この値は中央の値として参照されます。 `size="3"` に対応します。
+
+- `large`
+
+  - : `medium` よりも 20% 大きな絶対サイズです。非推奨の `size="4"` に対応します。
+
+- `x-large`
+
+  - : `medium` よりも 50% 大きな絶対サイズです。非推奨の `size="5"` に対応します。
+
+- `xx-large`
+
+  - : `medium` の 2 倍の大きさの絶対サイズです。非推奨の `size="6"` に対応します。
+
+- `xxx-large`
+  - : `medium` の 3 倍の大きさの絶対サイズです。非推奨の `size="7"` に対応します。
+
+## 解説
+
+それぞれの `<absolute-size>` キーワードの値は、`medium` サイズや端末の解像度などの個々の端末の特性に相対したサイズになります。ユーザーエージェントは各フォントのフォントサイズの表を保持しており、 `<absolute-size>` キーワードがインデックスになっています。
+
+CSS1 (1996) では、隣接するキーワード値のインデックス間の拡大率は 1.5 でしたが、これは大きすぎました。 CSS2 (1998) では、隣接するキーワード値インデックス間の拡大率は 1.2 になりましたが、これは小さな値において課題が残りました。隣接する絶対的な大きさのキーワード間を単一の固定比率にすることは問題があることが分かったので、固定比率の推奨はなくなりました。読み取り可能な唯一の推奨は、最小のフォントサイズが `9px` を下回らないことです。
+
+以下の表は、それぞれの `<absolute-size>` キーワード値における拡大係数、[`<h1>` から `<h6>`](/ja/docs/Web/HTML/Element/Heading_Elements) の見出しとの対応、非推奨の [HTML の `size` 属性](#html_の_size_属性)との対応を挙げています。
+
+| `<absolute-size>`   | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large |
+| ------------------- | -------- | ------- | ----- | ------ | ----- | ------- | -------- | --------- |
+| 拡大率              | 3/5      | 3/4     | 8/9   | 1      | 6/5   | 3/2     | 2/1      | 3/1       |
+| HTML の見出し       | h6       |         | h5    | h4     | h3    | h2      | h1       |           |
+| HTML の `size` 属性 | 1        |         | 2     | 3      | 4     | 5       | 6        | 7         |
+
+### HTML の size 属性
+
+HTML でフォントのサイズを設定する `size` 属性は非推奨です。属性値は `1` から `7` までの整数または相対値でした。相対値の場合は、整数の前に `+` または `-` をつけたもので、それぞれフォントサイズを大きくしたり小さくしたりするものでした。 `+1` の値は `size` を 1 つ大きくする意味、 `-2` は 2 つ小さくする意味で、計算値は最小で `1`、最大で `7` となります。
+
+## 例
+
+### キーワード値の比較
+
+```html
+<ul>
+  <li class="xx-small">font-size: xx-small;</li>
+  <li class="x-small">font-size: x-small;</li>
+  <li class="small">font-size: small;</li>
+  <li class="medium">font-size: medium;</li>
+  <li class="large">font-size: large;</li>
+  <li class="x-large">font-size: x-large;</li>
+  <li class="xx-large">font-size: xx-large;</li>
+  <li class="xxx-large">font-size: xxx-large;</li>
+</ul>
+```
+
+```css
+li {
+  margin-bottom: 0.3em;
+}
+.xx-small {
+  font-size: xx-small;
+}
+.x-small {
+  font-size: x-small;
+}
+.small {
+  font-size: small;
+}
+.medium {
+  font-size: medium;
+}
+.large {
+  font-size: large;
+}
+.x-large {
+  font-size: x-large;
+}
+.xx-large {
+  font-size: xx-large;
+}
+.xxx-large {
+  font-size: xxx-large;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('キーワード値の比較', '100%', 400)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## 関連情報
+
+- CSS の {{cssxref("relative-size")}} データ型
+- CSS の {{cssxref("font")}} および {{cssxref("font-size")}} プロパティ
+- [CSS フォント](/ja/docs/Web/CSS/CSS_fonts)モジュール
diff --git a/files/ja/web/css/filter/index.md b/files/ja/web/css/filter/index.md
index 9e0e301189fc43..87ba45fcbf4751 100644
--- a/files/ja/web/css/filter/index.md
+++ b/files/ja/web/css/filter/index.md
@@ -1,22 +1,21 @@
 ---
 title: filter
 slug: Web/CSS/filter
+l10n:
+  sourceCommit: de7d710496266ccf4fce5ade75a67e6605f60ce5
 ---
 
 {{CSSRef}}
 
 **`filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。
 
-CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。[SVG の filter 要素](/ja/docs/Web/SVG/Element/filter)への URL で SVG フィルターを参照することもできます。
+いくつかの[関数](#関数)、例えば `blur()` や `contrast()` などが利用でき、あらかじめ定義された効果を実現するのに役立てることができます。
 
 {{EmbedInteractiveExample("pages/css/filter.html")}}
 
 ## 構文
 
 ```css
-/* SVG フィルターへの URL */
-filter: url("filters.svg#filter-id");
-
 /* <filter-function> 値 */
 filter: blur(5px);
 filter: brightness(0.4);
@@ -29,8 +28,12 @@ filter: opacity(25%);
 filter: saturate(30%);
 filter: sepia(60%);
 
+/* URL */
+filter: url("filters.svg#filter-id");
+
 /* 複数のフィルター */
 filter: contrast(175%) brightness(3%);
+filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);
 
 /* フィルターを使用しない */
 filter: none;
@@ -45,1257 +48,115 @@ filter: unset;
 
 次のように関数と共に使用してください。
 
-```css
-filter: <filter-function> [<filter-function>] * | none;
+```css-nolint
+filter: <filter-function> [<filter-function>]* | none;
 ```
 
-SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。
+`url()` を使用して [SVG の filter 要素](/ja/docs/Web/SVG/Element/filter)を参照することができます。 SVG の {{SVGElement("filter")}} 要素を参照するには、次のような構文を使用してください。
 
 ```css
 filter: url(file.svg#filter-element-id);
 ```
 
-### 補間
-
-アニメーション時、最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("url","url()")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って{{Glossary("interpolation", "補間")}}されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、初期値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが `none` である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。
-
 ## 関数
 
-`filter` プロパティは `none` または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は `none` を返します。特に示す場合を除いて、パーセント記号付きの値 (`34%` など) を取る関数は、10進数の値 (`0.34` など) も受け付けます。
+`filter` プロパティは `none` または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は `none` を返します。特に示す場合を除いて、パーセント記号付きの値（`34%` など）を取る関数は、 10 進数の値（`0.34` など）も受け付けます。
 
-単一の `filter` プロパティに 2 つ以上の関数を指定した場合、同じフィルター関数を複数の `filter` プロパティで個別に適用した場合とは異なる結果になります。
+`filter` プロパティ値に複数の関数が指定されている場合、フィルターは順番通りに適用されます。
 
-### SVG フィルター
+- {{cssxref("filter-function/blur", "blur()")}}
 
-#### url()
+  - : 入力画像にガウスぼかしを適用します。
 
-外部 XML ファイルに埋め込むことができる [SVG フィルター](/ja/docs/Web/SVG/Element/filter)を指す URI を取ります。
+    ```css
+    filter: blur(5px);
+    ```
 
-```css
-filter: url(resources.svg#c1);
-```
+- {{cssxref("filter-function/brightness", "brightness()")}}
 
-### フィルター関数
+  - : 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 `0%` の値を設定すると、完全な黒の画像が作成されます。 `100%` の値を指定すると、入力は変更されません。 `100%` を超える値が許されており、より明るい結果が得られます。
 
-#### blur()
+    ```css
+    filter: brightness(2);
+    ```
 
-{{cssxref("filter-function/blur", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 `radius` の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための初期値は `0` です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。
+- {{cssxref("filter-function/contrast", "contrast()")}}
 
-```css
-filter: blur(5px);
-```
+  - : 入力画像のコントラストを調整します。 `0%` の値を指定するとグレーの画像が作成されます。 `100%` の値を指定すると、入力画像は変更されません。 `100%` を超える値を指定すると、コントラストを増加させます。
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img
-          id="img1"
-          class="internal default"
-          src="test_form_2.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          id="img2"
-          class="internal default"
-          src="test_form_2.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <div class="svg-container">
-          <svg
-            id="img3"
-            overflow="visible"
-            viewbox="0 0 212 161"
-            color-interpolation-filters="sRGB">
-            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
-              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
-            </filter>
-            <image
-              xlink:href="test_form_2.jpeg"
-              filter="url(#svgBlur)"
-              width="212px"
-              height="161px" />
-          </svg>
-        </div>
-      </td>
-      <td>
-        <img
-          id="img4"
-          class="internal default"
-          src="test_form_2_s.jpg"
-          style="width: 100%;" />
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
+    ```css
+    filter: contrast(200%);
+    ```
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -webkit-filter: blur(5px);
-  -ms-filter: blur(5px);
-  filter: blur(5px);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin: 0 0 1.286em;
-  height: 100%;
-  width: 85%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
+- {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
 
-```svg
-<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
-  </filter>
-</svg>
-```
+  - : 引数 `<shadow>` を画像の輪郭に沿ってドロップシャドウとして適用します。影の構文は `<box-shadow>` （[CSS 背景と境界モジュール](/ja/docs/Web/CSS/CSS_backgrounds_and_borders)で定義されています）と似ていますが、`inset` キーワードと `spread` 引数は使用できません。すべての `filter` プロパティ値と同様に、`drop-shadow()` 以降のフィルターが影に適用されます。
 
-{{EmbedLiveSample('blur','100%','236px','','', 'no-codepen')}}
+    ```css
+    filter: drop-shadow(16px 16px 10px black);
+    ```
 
-#### brightness()
+- {{cssxref("filter-function/grayscale", "grayscale()")}}
 
-{{cssxref("filter-function/brightness", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 `0%` の値を設定すると、完全な黒の画像が作成されます。 `100%` の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 `100%` を超える値が許されており、より明るい結果が得られます。補間時の初期値は `1` です。
+  - : 画像をグレースケールに変換します。値 `100%` は完全にグレースケールです。初期値の `0%` は入力を変更しません。 `0%` と `100%` の間の値は、効果に対する線形乗数です。
 
-```css
-filter: brightness(2);
-```
+    ```css
+    filter: grayscale(100%);
+    ```
 
-```svg
-<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="brightness">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="[amount]"/>
-      <feFuncG type="linear" slope="[amount]"/>
-      <feFuncB type="linear" slope="[amount]"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
-```
+- {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB">
- <filter id="brightness">
-    <feComponentTransfer>
-        <feFuncR type="linear" slope="2"/>
-        <feFuncG type="linear" slope="2"/>
-        <feFuncB type="linear" slope="2"/>
-    </feComponentTransfer>
-  </filter>
-  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
+  - : 色相の角度を回転させます。 `<angle>` の値は、入力サンプルが調整される色相環の度数を定義します。 `0deg` の値では入力は変更されません。
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: brightness(2);
-  -webkit-filter: brightness(2);
-  -ms-filter: brightness(2);
-  filter: brightness(2);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  height: 100%;
-  width: 85%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
+    ```css
+    filter: hue-rotate(90deg);
+    ```
 
-{{EmbedLiveSample('brightness','100%','231px','','', 'no-codepen')}}
+- {{cssxref("filter-function/invert", "invert()")}}
 
-#### contrast()
+  - : 入力画像のサンプルを反転します。 `100%` の値を指定すると、完全に反転されます。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。
 
-{{cssxref("filter-function/contrast", "contrast()")}} 関数は、入力画像のコントラストを調整します。 `0%` の値を指定すると完全にグレーの画像が作成されます。 `100%` の値を指定すると、入力画像は変更されません。 `100%` を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の初期値は `1` です。
+    ```css
+    filter: invert(100%);
+    ```
 
-```css
-filter: contrast(200%);
-```
+- {{cssxref("filter-function/opacity", "opacity()")}}
 
-```svg
-<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="contrast">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
-```
+  - : 透過率を適用します。 `0%` は画像を完全に透明にし、 `100%` は画像をそのままにします。
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB">
- <filter id="contrast">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="2" intercept="-0.5"/>
-      <feFuncG type="linear" slope="2" intercept="-0.5"/>
-      <feFuncB type="linear" slope="2" intercept="-0.5"/>
-    </feComponentTransfer>
-  </filter>
-  <image xlink:href="test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_3_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
+    ```css
+    filter: opacity(50%);
+    ```
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: contrast(200%);
-  -webkit-filter: contrast(200%);
-  -ms-filter: contrast(200%);
-  filter: contrast(200%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
+- {{cssxref("filter-function/saturate", "saturate()")}}
 
-{{EmbedLiveSample('contrast','100%','203px','','', 'no-codepen')}}
+  - : 画像の彩度を設定します。 `0%` は完全に彩度をなくし、 `100%` はそのまま、 `100%` 以上の値は彩度を上げます。
 
-#### drop-shadow()
+    ```css
+    filter: saturate(200%);
+    ```
 
-{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は `<shadow>` 型 ([CSS3 Backgrounds](https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow) で定義) の引数を受け取りますが、 `inset` キーワードと `spread` 引数は使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションを提供していることです。 `<shadow>` 引数の値は次の通りです。
+- {{cssxref("filter-function/sepia", "sepia()")}}
 
-- `<offset-x>` `<offset-y>` (必須)
-  - : 2 つの {{cssxref("&lt;length&gt;")}} 値で、影をずらす大きさを設定します。 `<offset-x>` は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 `<offset-y>` は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("&lt;length&gt;")}} を参照してください。
-    両方の値が `0` である場合は、影は要素の背後に配置されます (そして、 `<blur-radius>` や `<spread-radius>` を設定することで、ぼかしの効果を生成することができます)。
-- `<blur-radius>` (オプション)
-  - : これは三番目の {{cssxref("&lt;length&gt;")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 `0` (影の縁がはっきりしている) になります。
-- `<color>` (オプション)
-  - : 指定可能なキーワードや記述方法は {{cssxref("&lt;color&gt;")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("&lt;color&gt;")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。
+  - : 画像をセピア調にします。値を `100%` にすると画像は完全にセピアになり、`0%` にすると何も変わりません。
 
-```css
-filter: drop-shadow(16px 16px 10px black);
-```
+    ```css
+    filter: sepia(100%);
+    ```
 
-```svg
-<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
- <filter id="drop-shadow">
-    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
-    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
-    <feFlood flood-color="[color]"/>
-    <feComposite in2="offsetblur" operator="in"/>
-    <feMerge>
-      <feMergeNode/>
-      <feMergeNode in="SourceGraphic"/>
-    </feMerge>
-  </filter>
-</svg>
-```
+## 関数の組み合わせ
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img
-          id="img1"
-          class="internal default"
-          src="test_form_4.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          id="img2"
-          class="internal default"
-          src="test_form_4.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <div class="svg-container">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            id="img3"
-            overflow="visible"
-            viewbox="0 0 213 161"
-            color-interpolation-filters="sRGB">
-            <defs>
-              <image
-                id="MyImage"
-                xlink:href="test_form_4.jpeg"
-                width="213px"
-                height="161px" />
-            </defs>
-            <filter
-              id="drop-shadow"
-              x="-50%"
-              y="-50%"
-              width="200%"
-              height="200%">
-              <feOffset dx="9" dy="9" in="SourceAlpha" />
-              <feGaussianBlur stdDeviation="5" />
-            </filter>
-            <use xlink:href="#MyImage" filter="url(#drop-shadow)" />
-            <use xlink:href="#MyImage" />
-          </svg>
-        </div>
-      </td>
-      <td>
-        <img
-          id="img4"
-          class="internal default"
-          src="test_form_4_s.jpg"
-          style="width: 100%;" />
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <img
-          alt="test_form_4 distorted border - Original image"
-          id="img11"
-          class="internal default"
-          src="test_form_4_irregular-shape_opacity-gradient.png"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          alt="test_form_4 distorted border - Live example"
-          id="img12"
-          class="internal default"
-          src="test_form_4_irregular-shape_opacity-gradient.png"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <div class="svg-container">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            id="img13"
-            overflow="visible"
-            viewbox="0 0 213 161"
-            color-interpolation-filters="sRGB">
-            <defs>
-              <image
-                id="MyImage2"
-                xlink:href="test_form_4_irregular-shape_opacity-gradient.png"
-                width="213px"
-                height="161px" />
-            </defs>
-            <filter
-              id="drop-shadow2"
-              x="-50%"
-              y="-50%"
-              width="200%"
-              height="200%">
-              <feOffset dx="5" dy="5.5" in="SourceAlpha" />
-              <feGaussianBlur stdDeviation="2.5" />
-              <feComponentTransfer>
-                <feFuncA type="table" tableValues="0 0.8" />
-              </feComponentTransfer>
-            </filter>
-            <use xlink:href="#MyImage2" filter="url(#drop-shadow2)" />
-            <use xlink:href="#MyImage2" />
-          </svg>
-        </div>
-      </td>
-      <td>
-        <img
-          alt="test_form_4 distorted border drop shadow - Static example"
-          id="img14"
-          class="internal default"
-          src="test_form_4_irregular-shape_opacity-gradient_drop-shadow.png"
-          style="width: 100%;" />
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: drop-shadow(16px 16px 10px black);
-  -webkit-filter: drop-shadow(16px 16px 10px black);
-  -ms-filter: drop-shadow(16px 16px 10px black);
-  filter: drop-shadow(16px 16px 10px black);
-}
-#img12 {
-  width: 100%;
-  height: auto;
-  -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-  -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-  -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-  filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-#irregular-shape {
-  width: 64%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3,
-#img13 {
-  width: 100%;
-  height: auto;
-}
-```
-
-{{EmbedLiveSample('drop-shadow','100%','400px','','', 'no-codepen')}}
-
-#### grayscale()
-
-{{cssxref("filter-function/grayscale", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 `amount` の値は変換の程度を定義します。 `100%` の値は完全にグレースケールになります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の初期値は `0` です。
-
-```css
-filter: grayscale(100%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB">
- <filter id="grayscale">
-    <feColorMatrix type="matrix"
-               values="0.2126 0.7152 0.0722 0 0
-                       0.2126 0.7152 0.0722 0 0
-                       0.2126 0.7152 0.0722 0 0
-                       0 0 0 1 0"/>
-  </filter>
-  <image xlink:href="test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_5_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: grayscale(100%);
-  -webkit-filter: grayscale(100%);
-  -ms-filter: grayscale(100%);
-  filter: grayscale(100%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('grayscale','100%','209px','','', 'no-codepen')}}
-
-#### hue-rotate()
-
-{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 `angle` の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 `0deg` の値を指定すると入力は変更されません。補完時の初期値は `0` です。最大値はありませんが、 `360deg` を超える値の以上の値の場合は回り込みになります。
-
-```css
-filter: hue-rotate(90deg);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB">
- <filter id="hue-rotate">
-    <feColorMatrix type="hueRotate"
-               values="90"/>
-  </filter>
-  <image xlink:href="test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_6_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: hue-rotate(90deg);
-  -webkit-filter: hue-rotate(90deg);
-  -ms-filter: hue-rotate(90deg);
-  filter: hue-rotate(90deg);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-```html
-<svg
-  style="position: absolute; top: -999999px"
-  xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgHueRotate">
-    <feColorMatrix type="hueRotate" values="90" />
-  </filter>
-</svg>
-```
-
-{{EmbedLiveSample('hue-rotate','100%','221px','','', 'no-codepen')}}
-
-#### invert()
-
-{{cssxref("filter-function/invert", "invert()")}} 関数は、入力画像のサンプルを反転します。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全に反転されます。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の初期値は `0` です。
-
-```css
-filter: invert(100%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB">
- <filter id="invert">
-    <feComponentTransfer>
-        <feFuncR type="table" tableValues="1 0"/>
-        <feFuncG type="table" tableValues="1 0"/>
-        <feFuncB type="table" tableValues="1 0"/>
-    </feComponentTransfer>
- </filter>
- <image xlink:href="test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_7_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: invert(100%);
-  -webkit-filter: invert(100%);
-  -ms-filter: invert(100%);
-  filter: invert(100%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('invert','100%','407px','','', 'no-codepen')}}
-
-#### opacity()
-
-{{cssxref("filter-function/opacity", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、完全に透明になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の初期値は `1` です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。
-
-```css
-filter: opacity(50%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB">
- <filter id="opacity">
-    <feComponentTransfer>
-        <feFuncA type="table" tableValues="0 0.5">
-    </feComponentTransfer>
- </filter>
- <image xlink:href="test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_14_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: opacity(50%);
-  -webkit-filter: opacity(50%);
-  -ms-filter: opacity(50%);
-  filter: opacity(50%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('opacity','100%','210px','','', 'no-codepen')}}
-
-#### saturate()
-
-{{cssxref("filter-function/saturate", "saturate()")}} 関数は、入力画像の彩度を変化させます。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、無彩色になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。 `100%` を超える値を指定することもでき、彩度を増した結果になります。補完時の初期値は `1` です。
-
-```css
-filter: saturate(200%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB">
- <filter id="saturate">
-    <feColorMatrix type="saturate"
-               values="2"/>
- </filter>
- <image xlink:href="test_form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_9_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: saturate(200%);
-  -webkit-filter: saturate(200%);
-  -ms-filter: saturate(200%);
-  filter: saturate(200%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('saturate','100%','332px','','', 'no-codepen')}}
-
-#### sepia()
-
-{{cssxref("filter-function/sepia", "sepia()")}} 関数は、入力画像をセピア調にします。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全にセピア調になります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の初期値は `0` です。
-
-```css
-filter: sepia(100%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">SVG Equivalent</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB">
- <filter id="sepia">
-    <feColorMatrix type="matrix"
-               values="0.393 0.769 0.189 0 0
-                       0.349 0.686 0.168 0 0
-                       0.272 0.534 0.131 0 0
-                       0 0 0 1 0"/>
- </filter>
- <image xlink:href="test_form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_12_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: sepia(100%);
-  -webkit-filter: sepia(100%);
-  -ms-filter: sepia(100%);
-  filter: sepia(100%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('sepia','100%','229px','','', 'no-codepen')}}
-
-<h2 id="Combining_functions">関数の組み合わせ</h2>
-
-いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。
+関数をいくつでも組み合わせてレンダリングを操作できます。フィルターは宣言順に適用されます。次の例は画像のコントラストと明るさを強調します。
 
 ```css
 filter: contrast(175%) brightness(103%);
 ```
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Original image</th>
-      <th style="text-align: left;" scope="col">Live example</th>
-      <th style="text-align: left;" scope="col">Static example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img
-          id="img1"
-          class="internal default"
-          src="test_form_8.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          id="img2"
-          class="internal default"
-          src="test_form_8.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          id="img4"
-          class="internal default"
-          src="test_form_8_s.jpg"
-          style="width: 100%;" />
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
+### 補間
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: contrast(175%) brightness(103%);
-  -webkit-filter: contrast(175%) brightness(103%);
-  -ms-filter: contrast(175%) brightness(103%);
-  filter: contrast(175%) brightness(103%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
+アニメーション時、最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("url","url()")}} を持たない場合、それぞれのフィルター関数は、その特有の規則に従って{{Glossary("interpolation", "補間")}}されます。
 
-{{EmbedLiveSample('Combining_functions','100%','209px','','', 'no-codepen')}}
+フィルターリストが異なる形で掲載されている場合、長い方のリストに欠けている同等のフィルター関数が、短い方のリストの終わりに追加されます。追加された関数は、フィルターを変更していない初期値を使用します。掲載されているすべてのフィルターは、フィルター関数特有の仕様に従って補間されます。それ以外の場合は離散補間を用います。
 
 ## 公式定義
 
@@ -1309,33 +170,59 @@ table.standard-table td {
 
 ### フィルター関数の適用
 
-定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。
+`filter` プロパティは 2 つ目の画像に適用され、画像とその境界の両方を灰色にして不鮮明にします。
 
 ```css
-.mydiv {
-  filter: grayscale(50%);
-}
-
-/* Gray all images by 50% and blur by 10px */
 img {
-  filter: grayscale(0.5) blur(10px);
+  border: 5px solid yellow;
+}
+/* 2 番目の画像を 40% グレー化、 5px でぼかす */
+img:nth-of-type(2) {
+  filter: grayscale(0.4) blur(5px);
 }
 ```
 
-### SVG フィルターの適用
+```html
+<img src="pencil.jpg" alt="元画像はシャープ" />
+<img src="pencil.jpg" alt="画像と境界は不鮮明でミュートされています。" />
+```
 
-URL 関数を使用して SVG リソースを使用した例は以下の通りです。
+{{EmbedLiveSample('Applying_filter_functions','100%','229px')}}
+
+### 繰り返しフィルター機能
+
+フィルター機能は現れる順に適用されます。同じフィルター関数を繰り返すことができます。
 
 ```css
-.target {
-  filter: url(#c1);
+#MDN-logo {
+  border: 1px solid blue;
+  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
+        red);
 }
+```
 
-.mydiv {
-  filter: url(commonfilters.xml#large-blur);
-}
+```html hidden
+<svg
+  id="MDN-logo"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 361 104.2"
+  xml:space="preserve"
+  role="img">
+  <title>MDN Web Docs</title>
+  <path
+    d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
+    style="fill: var(--text-primary);"></path>
+  <g style="fill:blue;">
+    <path
+      d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
+  </g>
+</svg>
 ```
 
+{{EmbedLiveSample('Repeating_filter_functions','100%','229px')}}
+
+フィルターは順番に適用されます。最初のドロップシャドウの色相は `hue-rotate()` と関数によって変更されますが、 2 つ目のドロップシャドウの色相は変更されません。
+
 ## 仕様書
 
 {{Specifications}}
@@ -1346,6 +233,8 @@ URL 関数を使用して SVG リソースを使用した例は以下の通り
 
 ## 関連情報
 
+- CSS {{cssxref("backdrop-filter")}} プロパティ
+- CSS [合成と混合](/ja/docs/Web/CSS/CSS_compositing_and_blending)モジュール（CSS の {{cssxref("background-blend-mode")}} および {{cssxref("mix-blend-mode")}} プロパティを含む）
+- CSS の {{cssxref("mask")}} プロパティ
+- [SVG](/ja/docs/Web/SVG) （SVG の {{SVGElement("filter")}} 要素や {{SVGAttr("filter")}} 属性を含む）
 - [HTML コンテンツへの SVG 効果の適用](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
-- {{cssxref("mask")}} プロパティ
-- [SVG](/ja/docs/Web/SVG)
diff --git a/files/ja/web/css/flex-basis/index.md b/files/ja/web/css/flex-basis/index.md
index e85aad246b9694..97e2f4cbdf4757 100644
--- a/files/ja/web/css/flex-basis/index.md
+++ b/files/ja/web/css/flex-basis/index.md
@@ -1,6 +1,8 @@
 ---
 title: flex-basis
 slug: Web/CSS/flex-basis
+l10n:
+  sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d
 ---
 
 {{CSSRef}}
@@ -13,7 +15,7 @@ slug: Web/CSS/flex-basis
 
 このデモでは、最初のアイテムの `flex-basis` を変更します。そして、その `flex-basis` を基準にして伸長したり縮小したりします。つまり、例えば最初のアイテムの `flex-basis` が `200px` の場合、最初は 200px で表示されますが、他のアイテムが最低でも `min-content` の大きさであることを考慮して、利用可能な空間に合わせて縮小されます。
 
-下記の図は、Firefox の [Flexbox インスペクター](/ja/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts)がアイテムがどのような寸法になるのかを理解するのに役立つことを示しています。
+下記の図は、 Firefox の [Flexbox インスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)がアイテムがどのような寸法になるのかを理解するのに役立つことを示しています。
 
 ![Firefox の Flexbox インスペクターでは、アイテムが縮小された後のサイズが表示されます。](firefox-flex-basis.png)
 
@@ -25,21 +27,22 @@ slug: Web/CSS/flex-basis
 /* 幅を指定する */
 flex-basis: 10em;
 flex-basis: 3px;
+flex-basis: 50%;
 flex-basis: auto;
 
 /* 固有のサイズ指定キーワード */
-flex-basis: fill;
 flex-basis: max-content;
 flex-basis: min-content;
 flex-basis: fit-content;
 
-/* フレックスアイテムの内容物に基づいて自動設定する */
+/* フレックスアイテムの内容に基づいて自動設定する */
 flex-basis: content;
 
 /* グローバル値 */
 flex-basis: inherit;
 flex-basis: initial;
 flex-basis: revert;
+flex-basis: revert-layer;
 flex-basis: unset;
 ```
 
@@ -48,12 +51,20 @@ flex-basis: unset;
 ### 値
 
 - `<'width'>`
-  - : 絶対的な {{cssxref("&lt;length&gt;")}}、親のフレックスコンテナーの主軸方向の寸法に対する {{cssxref("&lt;percentage&gt;")}}、あるいは `auto` キーワードで定義します。負の値は無効です。既定値は `auto` です。
+
+  - : 以下の単位のいずれかです。
+    - {{cssxref("&lt;length&gt;")}} は絶対的な値を設定します。
+    - {{cssxref("&lt;percentage&gt;")}} は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。
+    - `auto` は横書きモードでは [width](https://drafts.csswg.org/css2/#the-width-property) の値、縦書きモードでは [height](https://drafts.csswg.org/css2/#the-height-property) の値を使用します。対応する値も `auto` であった場合、代わりに `content` の値が使用されます。
+    - `max-content` は幅の内在的な推奨値を設定します。
+    - `min-content` は幅の内在的な最小値を設定します。
+    - `fit-content` は、現在の要素のコンテンツに基づいて計算された、 `min-content` と `max-content` の値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。
+
 - `content`
 
   - : フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。
 
-    > **メモ:** この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) または [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。
+    > **メモ:** この値はフレックスボックスレイアウトの初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([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) で実装しました。
@@ -69,7 +80,9 @@ flex-basis: unset;
 
 ## 例
 
-<h3 id="Setting_flex_item_initial_sizes">フレックスアイテムの初期の寸法の設定</h3>
+### フレックスアイテムの初期の寸法の設定
+
+`flex-basis` の様々な値を設定した例です。
 
 #### HTML
 
@@ -110,7 +123,7 @@ flex-basis: unset;
   position: relative;
 }
 
-.flex:after {
+.flex::after {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -125,7 +138,7 @@ flex-basis: unset;
   flex-basis: auto;
 }
 
-.flex1:after {
+.flex1::after {
   content: "auto";
 }
 
@@ -133,7 +146,7 @@ flex-basis: unset;
   flex-basis: max-content;
 }
 
-.flex2:after {
+.flex2::after {
   content: "max-content";
 }
 
@@ -141,7 +154,7 @@ flex-basis: unset;
   flex-basis: min-content;
 }
 
-.flex3:after {
+.flex3::after {
   content: "min-content";
 }
 
@@ -149,7 +162,7 @@ flex-basis: unset;
   flex-basis: fit-content;
 }
 
-.flex4:after {
+.flex4::after {
   content: "fit-content";
 }
 
@@ -157,17 +170,9 @@ flex-basis: unset;
   flex-basis: content;
 }
 
-.flex5:after {
+.flex5::after {
   content: "content";
 }
-
-.flex6 {
-  flex-basis: fill;
-}
-
-.flex6:after {
-  content: "fill";
-}
 ```
 
 #### 結果
@@ -184,6 +189,6 @@ flex-basis: unset;
 
 ## 関連情報
 
-- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
-- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_
+- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
+- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_
 - {{cssxref("width")}}
diff --git a/files/ja/web/css/relative-size/index.md b/files/ja/web/css/relative-size/index.md
new file mode 100644
index 00000000000000..b3a23ec2f3dc11
--- /dev/null
+++ b/files/ja/web/css/relative-size/index.md
@@ -0,0 +1,70 @@
+---
+title: <relative-size>
+slug: Web/CSS/relative-size
+l10n:
+  sourceCommit: aeb87af1283cb24e735a00b1409b087b4ed2a0fb
+---
+
+{{CSSRef}}
+
+**`<relative-size>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、相対サイズのキーワードを記述します。 `<relative-size>` キーワードは、親要素の計算サイズからの相対サイズを定義します。このデータ型は {{cssxref("font")}} の一括指定と {{cssxref("font-size")}} プロパティで使用します。
+
+## 構文
+
+```plain
+<relative-size> = smaller | larger
+```
+
+### 値
+
+データ型 `<relative-size>` は下記の一覧からキーワード値を選んで定義します。
+
+- `smaller`
+
+  - : 継承サイズより一回り小さい相対サイズ。
+
+- `bigger`
+
+  - : 継承サイズより一回り大きい相対サイズ。
+
+## 解説
+
+`<relative-size>` キーワードは要素の現在のサイズからの相対サイズです。継承サイズが {{cssxref("absolute-size")}} キーワードを使用して定義されている場合、 `<relative-size>` 値は [`<absolute-size>` 表](/ja/docs/Web/CSS/absolute-size#description)の隣接サイズと等しくなります。それ以外の場合、相対的なサイズの増減は 120% から 150% の間になります。
+
+## 例
+
+### キーワード値の比較
+
+```html
+<ul>
+  <li class="smaller">font-size: smaller;</li>
+  <li>font-size が指定されていない</li>
+  <li class="larger">font-size: larger;</li>
+</ul>
+```
+
+```css
+li {
+  margin-bottom: 0.3em;
+}
+.smaller {
+  font-size: smaller;
+}
+.larger {
+  font-size: larger;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('キーワード値の比較', '100%', 100)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## 関連情報
+
+- CSS の {{cssxref("absolute-size")}} データ型
+- CSS の {{cssxref("font")}} および {{cssxref("font-size")}} プロパティ
+- [CSS フォント](/ja/docs/Web/CSS/CSS_fonts)モジュール
diff --git a/files/ko/mdn/community/communication_channels/index.md b/files/ko/mdn/community/communication_channels/index.md
index c3cf92ee13dddf..14866b3283ecad 100644
--- a/files/ko/mdn/community/communication_channels/index.md
+++ b/files/ko/mdn/community/communication_channels/index.md
@@ -21,7 +21,7 @@ MDN Web Docs 커뮤니티 Discord 공개 서버는 스태프와 커뮤니티 구
 
 불분명한 것을 질문하고, 확인받고, 어떻게 참여할 수 있는지 알아보세요. 관심사나 전문분야에 따라 채널을 골라 참여할 수도 있습니다.
 
-[여기서](https://discord.gg/apa6Rn7uEj) MDN Web Docs Discord 서버에 참여하세요.
+[여기서](/discord) MDN Web Docs Discord 서버에 참여하세요.
 
 ### Matrix 채팅방
 
diff --git a/files/ko/mdn/community/contributing/translated_content/index.md b/files/ko/mdn/community/contributing/translated_content/index.md
index 29e2a28c2e6428..8cbdf3db63f717 100644
--- a/files/ko/mdn/community/contributing/translated_content/index.md
+++ b/files/ko/mdn/community/contributing/translated_content/index.md
@@ -9,7 +9,7 @@ slug: MDN/Community/Contributing/Translated_content
 
 > **참고:** 한국어 이외의 로케일 목록은 [영어 문서](/ko/docs/MDN/Community/Contributing/Translated_content)를 참고하세요.
 
-- 토론: [Discord (#korean 채널)](https://discord.gg/apa6Rn7uEj), [카카오톡 (MDN Korea 오픈채팅)](https://open.kakao.com/o/gdfG288c)
+- 토론: [Discord (#korean 채널)](/discord), [카카오톡 (MDN Korea 오픈채팅)](https://open.kakao.com/o/gdfG288c)
 - 현재 기여자: [hochan222](https://github.com/hochan222), [yechoi42](https://github.com/yechoi42), [cos18](https://github.com/cos18), [GwangYeol-Im](https://github.com/GwangYeol-Im), [pje1740](https://github.com/pje1740), [yujo11](https://github.com/yujo11), [wisedog](https://github.com/wisedog), [swimjiy](https://github.com/swimjiy), [jho2301](https://github.com/jho2301), [sunhpark42](https://github.com/sunhpark42)
 
 ## 같이 보기
diff --git a/files/ko/web/api/virtualkeyboard_api/index.md b/files/ko/web/api/virtualkeyboard_api/index.md
new file mode 100644
index 00000000000000..ac0eab3a3dacef
--- /dev/null
+++ b/files/ko/web/api/virtualkeyboard_api/index.md
@@ -0,0 +1,122 @@
+---
+title: VirtualKeyboard API
+slug: Web/API/VirtualKeyboard_API
+l10n:
+  sourceCommit: 5cdb341c723de0edb273769555d9124266d9c851
+---
+
+{{SeeCompatTable}}{{DefaultAPISidebar("VirtualKeyboard API")}}{{securecontext_header}}
+
+VirtualKeyboard API는 개발자가 태블릿, 휴대폰 또는 하드웨어 키보드를 사용할 수 없는 기타 장치에서 화면상의 가상 키보드가 나타나고 사라질 때 애플리케이션의 레이아웃을 제어할 수 있도록 합니다.
+
+웹 브라우저는 포커스가 맞춰지면, 일반적으로 뷰포트 높이를 조정하고 입력 필드로 스크롤 하는 방식으로 가상 키보드를 자체적으로 처리합니다.
+
+아래 그림은 장치에서 화면상의 가상 키보드가 숨겨져 있을 때와 표시되어 있을 때, 웹 페이지에서 뷰포트 높이와 스크롤 위치의 차이를 보여줍니다.
+
+![두 기기 중 하나는 가상 키보드가 없는 경우, 웹 페이지가 기기의 수직 공간의 대부분을 활용할 수 있음을 나타내며, 다른 하나는 가상 키보드가 있는 경우, 웹 페이지가 남은 공간에만 표시될 수 있음을 보여줍니다.](viewport-height.png)
+
+더 복잡한 애플리케이션이나 멀티스크린 휴대폰과 같은 특정 장치에서는 가상 키보드가 나타날 때 레이아웃을 더 많이 제어해야 할 수 있습니다.
+
+아래 그림은 듀얼 스크린 장치에서 가상 키보드가 두 화면 중 하나에만 표시될 때 어떤 일이 발생하는지 보여줍니다. 가상 키보드를 수용하기 위해 두 화면 모두에서 뷰포트가 작아지고 가상 키보드가 표시되지 않는 화면에는 낭비되는 공간이 남습니다.
+
+![가상 키보드가 한 화면에 표시되는 듀얼 스크린 장치로, 웹 페이지가 키보드가 표시된 후 남은 수직 공간만 사용할 수 있음을 보여줍니다. 이에 따라 다른 화면에는 빈 공간이 남을 수 있습니다.](dual-screen.png)
+
+VirtualKeyboard API를 사용하면 브라우저가 가상 키보드를 자동으로 처리하는 방식을 선택 해제하고 대신 가상 키보드를 완전히 제어할 수 있습니다. 또한 VirtualKeyboard API를 통해 양식 컨트롤에 포커스가 맞춰져 있을 때, 필요에 따라 키보드가 계속 나타나고 사라지지만 뷰포트는 변경되지 않으며 JavaScript 및 CSS를 사용하여 레이아웃을 조정할 수 있습니다.
+
+## 개념
+
+VirtualKeyboard API는 세 부분으로 구성됩니다.
+
+- {{domxref('navigator.virtualKeyboard')}}를 통해 접근하는 {{domxref("VirtualKeyboard")}} 인터페이스는 자동 가상 키보드 동작을 선택 해제하고, 프로그래밍 방식으로 가상 키보드를 표시하거나 숨기고, 가상 키보드의 현재 위치와 크기를 가져오는 데 사용됩니다.
+- `keyboard-inset-*` CSS 환경 변수는 가상 키보드의 위치 및 크기에 대한 정보를 제공합니다.
+- [`virtualkeyboardpolicy`](/ko/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) 속성은 가상 키보드를 `contenteditable` 요소에 표시할지 여부를 지정합니다.
+
+### 자동 가상 키보드 동작 사용 중지
+
+브라우저의 자동 가상 키보드 동작을 선택 해제하려면, use `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 환경 변수를 사용하여 가상 키보드 지오메트리 감지
+
+또한 VirtualKeyboard API는 다음 {{cssxref("env", "CSS environment variables", "", "nocode")}}를 노출합니다: `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`](/ko/docs/Web/HTML/Global_attributes/contenteditable) 속성을 사용하는 요소는 탭 하거나 클릭하면 가상 키보드를 나타냅니다. 특정 상황에서는 이 동작을 방지하고 대신 다른 이벤트 후에 가상 키보드를 표시하는 것이 바람직할 수 있습니다.
+
+브라우저에서 가상 키보드가 기본적으로 처리되지 않도록 [`virtualkeyboardpolicy`](/ko/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}}
+  - : 키보드 레이아웃 맵을 검색하고 물리적 키보드에서 키 누름 캡처를 토글 하는 기능을 제공합니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [VirtualKeyboard API 완전 제어](https://developer.chrome.com/docs/web-platform/virtual-keyboard/)
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index 1d86aa7cfc497d..e8b2cd8f79aaa4 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -103,7 +103,7 @@
 /pt-BR/docs/DOM/Referencia_do_DOM/Introdução	/pt-BR/docs/Web/API/Document_Object_Model/Introduction
 /pt-BR/docs/DOM/Referencia_do_DOM/Whitespace_in_the_DOM	/pt-BR/docs/Web/API/Document_Object_Model/Whitespace
 /pt-BR/docs/DOM/XMLHttpRequest	/pt-BR/docs/Web/API/XMLHttpRequest
-/pt-BR/docs/DOM/XMLHttpRequest/Usando_XMLHttpRequest	/pt-BR/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+/pt-BR/docs/DOM/XMLHttpRequest/Usando_XMLHttpRequest	/pt-BR/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
 /pt-BR/docs/DOM/element.addEventListener	/pt-BR/docs/Web/API/EventTarget/addEventListener
 /pt-BR/docs/DOM/element.addEventListener-redirect-1	/pt-BR/docs/Web/API/EventTarget/addEventListener
 /pt-BR/docs/DOM/window.URL.createObjectURL	/pt-BR/docs/Web/API/URL/createObjectURL_static
@@ -534,7 +534,8 @@
 /pt-BR/docs/Web/API/BatteryManager/ondischargingtimechange	/pt-BR/docs/Web/API/BatteryManager/dischargingtimechange_event
 /pt-BR/docs/Web/API/BatteryManager/ondischargintimechange	/pt-BR/docs/Web/API/BatteryManager/dischargingtimechange_event
 /pt-BR/docs/Web/API/BatteryManager/onlevelchange	/pt-BR/docs/Web/API/BatteryManager/levelchange_event
-/pt-BR/docs/Web/API/Console.timeEnd	/pt-BR/docs/Web/API/console/timeEnd
+/pt-BR/docs/Web/API/Canvas_API/Tutorial/Compositing/Example	/pt-BR/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+/pt-BR/docs/Web/API/Console.timeEnd	/pt-BR/docs/Web/API/console/timeend_static
 /pt-BR/docs/Web/API/Coordinates	/pt-BR/docs/Web/API/GeolocationCoordinates
 /pt-BR/docs/Web/API/Coordinates/altitude	/pt-BR/docs/Web/API/GeolocationCoordinates/altitude
 /pt-BR/docs/Web/API/DOMString	/pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String
@@ -634,9 +635,23 @@
 /pt-BR/docs/Web/API/WindowTimers.clearTimeout	/pt-BR/docs/Web/API/clearTimeout
 /pt-BR/docs/Web/API/WindowTimers/clearTimeout	/pt-BR/docs/Web/API/clearTimeout
 /pt-BR/docs/Web/API/XMLDocument/async	/pt-BR/docs/conflicting/Web/API/XMLDocument
-/pt-BR/docs/Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas	/pt-BR/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
-/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest	/pt-BR/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+/pt-BR/docs/Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas	/pt-BR/docs/Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests
+/pt-BR/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests	/pt-BR/docs/Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests
+/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest	/pt-BR/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
+/pt-BR/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest	/pt-BR/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
 /pt-BR/docs/Web/API/XMLHttpRequest/onreadystatechange	/pt-BR/docs/Web/API/XMLHttpRequest/readystatechange_event
+/pt-BR/docs/Web/API/console/assert	/pt-BR/docs/Web/API/console/assert_static
+/pt-BR/docs/Web/API/console/clear	/pt-BR/docs/Web/API/console/clear_static
+/pt-BR/docs/Web/API/console/count	/pt-BR/docs/Web/API/console/count_static
+/pt-BR/docs/Web/API/console/dir	/pt-BR/docs/Web/API/console/dir_static
+/pt-BR/docs/Web/API/console/error	/pt-BR/docs/Web/API/console/error_static
+/pt-BR/docs/Web/API/console/info	/pt-BR/docs/Web/API/console/info_static
+/pt-BR/docs/Web/API/console/log	/pt-BR/docs/Web/API/console/log_static
+/pt-BR/docs/Web/API/console/table	/pt-BR/docs/Web/API/console/table_static
+/pt-BR/docs/Web/API/console/time	/pt-BR/docs/Web/API/console/time_static
+/pt-BR/docs/Web/API/console/timeEnd	/pt-BR/docs/Web/API/console/timeend_static
+/pt-BR/docs/Web/API/console/timeStamp	/pt-BR/docs/Web/API/console/timestamp_static
+/pt-BR/docs/Web/API/console/warn	/pt-BR/docs/Web/API/console/warn_static
 /pt-BR/docs/Web/API/document.getElementById	/pt-BR/docs/Web/API/Document/getElementById
 /pt-BR/docs/Web/API/document.images	/pt-BR/docs/Web/API/Document/images
 /pt-BR/docs/Web/API/document.scripts	/pt-BR/docs/Web/API/Document/scripts
@@ -744,7 +759,7 @@
 /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors	/pt-BR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
 /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations	/pt-BR/docs/Web/API/Canvas_API/Tutorial/Basic_animations
 /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Compositing	/pt-BR/docs/Web/API/Canvas_API/Tutorial/Compositing
-/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo	/pt-BR/docs/Web/API/Canvas_API/Tutorial/Compositing/Example
+/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo	/pt-BR/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
 /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Conclusão	/pt-BR/docs/Web/API/Canvas_API/Tutorial/Finale
 /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes	/pt-BR/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
 /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_text	/pt-BR/docs/Web/API/Canvas_API/Tutorial/Drawing_text
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index 42299b4db3dfe4..193e8274693bad 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -2396,6 +2396,10 @@
     "modified": "2019-03-23T22:15:27.700Z",
     "contributors": ["MarceloBRN", "sergiorg"]
   },
+  "Web/API/CanvasRenderingContext2D/globalCompositeOperation": {
+    "modified": "2019-03-18T21:37:01.783Z",
+    "contributors": ["CarlosRodrigues"]
+  },
   "Web/API/CanvasRenderingContext2D/lineTo": {
     "modified": "2019-03-23T22:18:50.928Z",
     "contributors": ["MarceloBRN"]
@@ -2472,10 +2476,6 @@
     "modified": "2019-03-23T22:12:17.031Z",
     "contributors": ["CarlosRodrigues", "Fernandolrs", "mak213k"]
   },
-  "Web/API/Canvas_API/Tutorial/Compositing/Example": {
-    "modified": "2019-03-18T21:37:01.783Z",
-    "contributors": ["CarlosRodrigues"]
-  },
   "Web/API/Canvas_API/Tutorial/Drawing_shapes": {
     "modified": "2020-06-20T19:01:22.926Z",
     "contributors": [
@@ -4097,30 +4097,6 @@
       "fusionchess"
     ]
   },
-  "Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests": {
-    "modified": "2019-03-18T20:53:32.225Z",
-    "contributors": [
-      "helton-mori-dev",
-      "Laercio89",
-      "erickfaraujo",
-      "filipecalasans",
-      "melostbr"
-    ]
-  },
-  "Web/API/XMLHttpRequest/Using_XMLHttpRequest": {
-    "modified": "2019-03-23T23:31:13.941Z",
-    "contributors": [
-      "JosOe",
-      "yuhzador",
-      "glaudiston",
-      "flaviomicheletti",
-      "RodrigoMarques",
-      "vitornogueira",
-      "teoli",
-      "MarcoBruno",
-      "vagnerleitte"
-    ]
-  },
   "Web/API/XMLHttpRequest/abort": {
     "modified": "2019-03-23T22:16:54.432Z",
     "contributors": ["gustavobeavis"]
@@ -4149,6 +4125,30 @@
     "modified": "2019-03-23T22:27:06.677Z",
     "contributors": ["trestini"]
   },
+  "Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests": {
+    "modified": "2019-03-18T20:53:32.225Z",
+    "contributors": [
+      "helton-mori-dev",
+      "Laercio89",
+      "erickfaraujo",
+      "filipecalasans",
+      "melostbr"
+    ]
+  },
+  "Web/API/XMLHttpRequest_API/Using_XMLHttpRequest": {
+    "modified": "2019-03-23T23:31:13.941Z",
+    "contributors": [
+      "JosOe",
+      "yuhzador",
+      "glaudiston",
+      "flaviomicheletti",
+      "RodrigoMarques",
+      "vitornogueira",
+      "teoli",
+      "MarcoBruno",
+      "vagnerleitte"
+    ]
+  },
   "Web/API/XSLTProcessor": {
     "modified": "2019-03-23T23:03:40.500Z",
     "contributors": ["EduardoRedressa"]
@@ -4171,51 +4171,51 @@
       "lfarroco"
     ]
   },
-  "Web/API/console/assert": {
+  "Web/API/console/assert_static": {
     "modified": "2019-03-23T22:25:22.069Z",
     "contributors": ["mayronmedeiros"]
   },
-  "Web/API/console/clear": {
+  "Web/API/console/clear_static": {
     "modified": "2020-10-15T22:29:37.104Z",
     "contributors": ["webfelipemaia"]
   },
-  "Web/API/console/count": {
+  "Web/API/console/count_static": {
     "modified": "2019-03-23T22:16:10.687Z",
     "contributors": ["vspedr"]
   },
-  "Web/API/console/dir": {
+  "Web/API/console/dir_static": {
     "modified": "2019-03-23T22:50:36.909Z",
     "contributors": ["belsanpesou"]
   },
-  "Web/API/console/error": {
+  "Web/API/console/error_static": {
     "modified": "2019-03-23T22:45:13.263Z",
     "contributors": ["raduq"]
   },
-  "Web/API/console/info": {
+  "Web/API/console/info_static": {
     "modified": "2019-03-23T22:29:13.618Z",
     "contributors": ["zaclummys", "HugoOliveira"]
   },
-  "Web/API/console/log": {
+  "Web/API/console/log_static": {
     "modified": "2019-03-23T22:56:56.119Z",
     "contributors": ["odahcam", "Higo"]
   },
-  "Web/API/console/table": {
+  "Web/API/console/table_static": {
     "modified": "2020-10-15T22:16:14.686Z",
     "contributors": ["elielsonbatista"]
   },
-  "Web/API/console/time": {
+  "Web/API/console/time_static": {
     "modified": "2019-10-03T22:24:48.908Z",
     "contributors": ["gcacars"]
   },
-  "Web/API/console/timeEnd": {
+  "Web/API/console/timeend_static": {
     "modified": "2019-03-23T23:04:24.266Z",
     "contributors": ["teoli", "perrucho"]
   },
-  "Web/API/console/timeStamp": {
+  "Web/API/console/timestamp_static": {
     "modified": "2019-10-03T22:25:43.901Z",
     "contributors": ["gcacars"]
   },
-  "Web/API/console/warn": {
+  "Web/API/console/warn_static": {
     "modified": "2019-03-18T21:45:25.881Z",
     "contributors": ["raduq"]
   },
diff --git a/files/pt-br/glossary/abstraction/index.md b/files/pt-br/glossary/abstraction/index.md
index 9d4f668c1fec56..151fddc4bcd315 100644
--- a/files/pt-br/glossary/abstraction/index.md
+++ b/files/pt-br/glossary/abstraction/index.md
@@ -3,6 +3,8 @@ title: Abstração
 slug: Glossary/Abstraction
 ---
 
+{{GlossarySidebar}}
+
 Abstração em {{Glossary("programação de computadores")}} é uma forma de reduzir a complexidade e tornar o projeto e a implementação mais eficientes em sistemas complexos de software. Ela esconde a complexidade técnica de um sistema por trás de uma {{Glossary("API", "APIs")}} mais simples.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/accent/index.md b/files/pt-br/glossary/accent/index.md
index 669b59f06e7e63..c7f8e2e9b3199c 100644
--- a/files/pt-br/glossary/accent/index.md
+++ b/files/pt-br/glossary/accent/index.md
@@ -3,6 +3,8 @@ title: accent
 slug: Glossary/Accent
 ---
 
+{{GlossarySidebar}}
+
 Um **accent** é uma cor tipicamente brilhante que contrasta com as cores de fundo e de primeiro plano mais utilitárias dentro de um esquema de cores. Estes estão presentes no estilo visual de muitas plataformas (embora não todas).
 
 Na web, um acento às vezes é usado em elementos {{HTMLElement("input")}} para a parte ativa do controle, por exemplo, o plano de fundo de uma [caixa de seleção](/pt-BR/docs/Web/HTML/Element/input/checkbox) marcada.
diff --git a/files/pt-br/glossary/accessibility/index.md b/files/pt-br/glossary/accessibility/index.md
index 405d56c7c5c905..7a06882a3adbb1 100644
--- a/files/pt-br/glossary/accessibility/index.md
+++ b/files/pt-br/glossary/accessibility/index.md
@@ -3,6 +3,8 @@ title: Acessibilidade
 slug: Glossary/Accessibility
 ---
 
+{{GlossarySidebar}}
+
 _Acessibilidade na Web (Web Accessibility)_ (**A11Y**) refere-se às melhores práticas para manter um site útil, apesar das restrições físicas e técnicas. A acessibilidade da Web é formalmente definida e discutida no {{Glossary("W3C")}} através de {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).
 
 ## Leia Mais
diff --git a/files/pt-br/glossary/accessibility_tree/index.md b/files/pt-br/glossary/accessibility_tree/index.md
index b3a45736028bea..cac2bc73d79ae3 100644
--- a/files/pt-br/glossary/accessibility_tree/index.md
+++ b/files/pt-br/glossary/accessibility_tree/index.md
@@ -3,6 +3,8 @@ title: Árvore de Acessibilidade
 slug: Glossary/Accessibility_tree
 ---
 
+{{GlossarySidebar}}
+
 A **árvore de acessibilidade** contém informação relacionada à {{Glossary("accessibility", "acessibilidade")}} para a maioria dos elementos HTML.
 
 Navegadores convertem a marcação em uma representação interna chamada [árvore do DOM](/pt-BR/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree). A árvore do DOM contém objetos representando todas as marcações de elementos, atributos e nós de texto. Os navegadores, então, criam uma árvore de acessibilidade baseada na árvore do DOM, a qual é usada por APIs específicas de plataforma para fornecer uma representação que possa ser entendida por tecnologias assistivas, como leitores de tela.
diff --git a/files/pt-br/glossary/adobe_flash/index.md b/files/pt-br/glossary/adobe_flash/index.md
index 8e55e14c16dd3a..869ce48ed76eef 100644
--- a/files/pt-br/glossary/adobe_flash/index.md
+++ b/files/pt-br/glossary/adobe_flash/index.md
@@ -3,6 +3,8 @@ title: Adobe Flash
 slug: Glossary/Adobe_Flash
 ---
 
+{{GlossarySidebar}}
+
 Flash é uma tecnologia obsolescente desenvolvida pela Adobe que possibilita aplicativos Web, gráficos de vetor e multimídia. Você precisa instalar o plugin certo para usar o Flash dentro de um {{Glossary("Navegador","navegador web")}}.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/advance_measure/index.md b/files/pt-br/glossary/advance_measure/index.md
index 84274d3454af1b..805c2365a5cd2d 100644
--- a/files/pt-br/glossary/advance_measure/index.md
+++ b/files/pt-br/glossary/advance_measure/index.md
@@ -3,6 +3,8 @@ title: Advance measure
 slug: Glossary/Advance_measure
 ---
 
+{{GlossarySidebar}}
+
 A **advance measure** é o espaço total que o glyph ocupa, horizontal ou verticalmente, dependendo da direção de escrita atual. É igual à distância percorrida pelo cursor, colocado diretamente na frente e depois deslocado para trás do caractere.
 
 Este termo é usado na definição de um número de unidades CSS {{cssxref("&lt;length&gt;")}}. A _advanced measure_ da unidade `ch` é a largura ou a altura do caractere "0" no tipo de letra fornecido, dependendo se o eixo horizontal ou vertical está sendo usado no momento. Uma _advanced measure_ de unidade `ic` é a largura ou altura do caractere "水".
diff --git a/files/pt-br/glossary/ajax/index.md b/files/pt-br/glossary/ajax/index.md
index ffe1b8bbe80608..115aead0030294 100644
--- a/files/pt-br/glossary/ajax/index.md
+++ b/files/pt-br/glossary/ajax/index.md
@@ -3,6 +3,8 @@ title: AJAX
 slug: Glossary/AJAX
 ---
 
+{{GlossarySidebar}}
+
 AJAX (Asynchronous {{glossary("JavaScript")}} e {{glossary("XML")}}) é uma prática de programação da combinação de {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, o {{glossary("DOM")}}, e o `XMLHttpRequest` {{glossary("object")}} para a construção de páginas web mais complexas.
 
 O que o AJAX permite é que você faça apenas atualizações em partes de uma página web ao invés de recarregá-la inteira novamente. O AJAX também permite que você trabalhe de forma assíncrona, o que significa que o seu código continua rodando enquanto uma parte da sua página está em processo de carregamento (em comparação com síncrono, que irá bloquear a execução do seu código até que toda a sua página web seja recarregada).
diff --git a/files/pt-br/glossary/algorithm/index.md b/files/pt-br/glossary/algorithm/index.md
index bfc637606643a2..9654cdbf2a5eb9 100644
--- a/files/pt-br/glossary/algorithm/index.md
+++ b/files/pt-br/glossary/algorithm/index.md
@@ -3,4 +3,6 @@ title: Algoritmo
 slug: Glossary/Algorithm
 ---
 
+{{GlossarySidebar}}
+
 Um algoritmo é uma série de instruções independentes que executam uma função.
diff --git a/files/pt-br/glossary/alignment_container/index.md b/files/pt-br/glossary/alignment_container/index.md
index d95dcbfd2f6151..3307f5af973857 100644
--- a/files/pt-br/glossary/alignment_container/index.md
+++ b/files/pt-br/glossary/alignment_container/index.md
@@ -3,6 +3,8 @@ title: Contêiner de Alinhamento
 slug: Glossary/Alignment_Container
 ---
 
+{{GlossarySidebar}}
+
 O **contêiner de alinhamento** é um retângulo dentro do qual os [tópicos de alinhamento](/pt-BR/docs/Glossary/Alignment_Subject) são alinhados, isto é, definidos. Isso é definido pelo modelo de layout; geralmente é o bloco que contém o tópico de alinhamento, e assume o modo de escrita do box estabelecendo o bloco de conteúdo.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/alignment_subject/index.md b/files/pt-br/glossary/alignment_subject/index.md
index 013673ae4750bc..e463c3b38a63c2 100644
--- a/files/pt-br/glossary/alignment_subject/index.md
+++ b/files/pt-br/glossary/alignment_subject/index.md
@@ -3,6 +3,8 @@ title: Tópico de Alinhamento
 slug: Glossary/Alignment_Subject
 ---
 
+{{GlossarySidebar}}
+
 No [Alinhamento de Box do CSS](/pt-BR/docs/Web/CSS/CSS_Box_Alignment), o **tópico (assunto) de alinhamento** é a coisa (ou coisas) que está sendo alinhada pelas propriedades.
 
 Para o {{cssxref("justify-self")}} e {{cssxref("align-self")}}, o tópico de alinhamento é o box de margem do box em que a propriedade está definida, usando o modo de escrita desse box.
diff --git a/files/pt-br/glossary/alpha/index.md b/files/pt-br/glossary/alpha/index.md
index 72c219eb83c26a..f46aba9d670413 100644
--- a/files/pt-br/glossary/alpha/index.md
+++ b/files/pt-br/glossary/alpha/index.md
@@ -3,6 +3,8 @@ title: Alpha (canal alfa)
 slug: Glossary/Alpha
 ---
 
+{{GlossarySidebar}}
+
 Cores são representadas no formato digital como uma coleção de números, cada qual sinalizando o nível de força ou intensidade de dado componente da cor. Cada um desses componententes é chamado de **canal**. Num típico arquivo de imagem, o canais de cores descritos devem ser vermelho, verde e azul, que serão usados para definir a cor final. Para representar uma cor que através dela um plano de fundo possa ser visto, um quarto canal é adicionado a ela: o canal alfa. O canal alfa define o nível de opacidade da cor.
 
 Por exemplo, a cor `#8921F2` (também descrita como `rgb(137, 33, 242)` ou `hsl(270, 89%, 54)`) é um belo tom de roxo. Abaixo você pode ver um pequeno retângulo no canto superior esquerdo e outro com a mesma cor, mas tendo um canal alfa defino em 0.5 (50% de opacidade). Os dois retângulos estão desenhados sobre o paragrafo de texto.
diff --git a/files/pt-br/glossary/api/index.md b/files/pt-br/glossary/api/index.md
index cc817ecc65417a..a80ca995212201 100644
--- a/files/pt-br/glossary/api/index.md
+++ b/files/pt-br/glossary/api/index.md
@@ -3,6 +3,8 @@ title: API
 slug: Glossary/API
 ---
 
+{{GlossarySidebar}}
+
 Uma API (_Application Programming Interface_) é um conjunto de características e regras existentes em uma aplicação que possibilitam interações com essa através de um software - ao contrário de uma interface de usuário humana. A API pode ser entendida como um simples contrato entre a aplicação que a fornece e outros itens, como outros componentes do software, ou software de terceiros.
 
 No desenvolvimento Web, uma API é geralmente um conjunto de {{glossary("method","methods")}} padronizados, {{Glossary("property","properties")}}, eventos, e {{Glossary("URL","URLs")}} que um desenvolvedor pode usar em seus aplicativos para interagir com componentes do navegador da Web de um usuário ou outro software / hardware no computador do usuário ou sites e serviços de terceiros.
diff --git a/files/pt-br/glossary/apple_safari/index.md b/files/pt-br/glossary/apple_safari/index.md
index 70f185b15adb01..2bbb24cd6dd91f 100644
--- a/files/pt-br/glossary/apple_safari/index.md
+++ b/files/pt-br/glossary/apple_safari/index.md
@@ -3,6 +3,8 @@ title: Apple Safari
 slug: Glossary/Apple_Safari
 ---
 
+{{GlossarySidebar}}
+
 [Safari](http://www.apple.com/safari/) é um {{Glossary("navegador","navegador Web")}} desenvolvido pela Apple e fornecido com ambos Mac OS X e iOS. Baseia-se com o mecanismo de código aberto [WebKit](http://www.webkit.org/).
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/application_context/index.md b/files/pt-br/glossary/application_context/index.md
index 38db4771a533d1..6ad704562370dc 100644
--- a/files/pt-br/glossary/application_context/index.md
+++ b/files/pt-br/glossary/application_context/index.md
@@ -3,6 +3,8 @@ title: Application Context
 slug: Glossary/Application_context
 ---
 
+{{GlossarySidebar}}
+
 Um **application context** de nível superior é um [contexto de navegação](/pt-BR/docs/Glossary/Browsing_context) que tem um [manifest](/pt-BR/docs/Web/Manifest)
 
 Se um _application context_ for criado como resultado da solicitação do user agent para navegar para um link direto, o user agent deverá navegar imediatamente para o link direto com a substituição habilitada. Caso contrário, quando o contexto do aplicativo for criado, o user agent deverá navegar imediatamente para a URL inicial com a substituição ativada.
diff --git a/files/pt-br/glossary/argument/index.md b/files/pt-br/glossary/argument/index.md
index 44091c3c3be138..618bfd1de0ff4e 100644
--- a/files/pt-br/glossary/argument/index.md
+++ b/files/pt-br/glossary/argument/index.md
@@ -3,6 +3,8 @@ title: Argumento
 slug: Glossary/Argument
 ---
 
+{{GlossarySidebar}}
+
 Um **argumento** é um {{glossary("valor")}} ({{Glossary("primitivo")}} ou um {{Glossary("objeto")}}) passado como um input (entrada) para uma {{Glossary("função")}}.
 
 ## Leia mais
diff --git a/files/pt-br/glossary/aria/index.md b/files/pt-br/glossary/aria/index.md
index 23be7e3faf9574..bff421d3a56347 100644
--- a/files/pt-br/glossary/aria/index.md
+++ b/files/pt-br/glossary/aria/index.md
@@ -3,6 +3,8 @@ title: ARIA
 slug: Glossary/ARIA
 ---
 
+{{GlossarySidebar}}
+
 **ARIA** (_Accessible Rich {{glossary("Internet")}} Applications_) é uma especificação do {{Glossary("W3C")}} para adicionar semântica e outros metadados ao {{Glossary("HTML")}} para atender aos usuários de tecnologia assistiva.
 
 Por exemplo, você pode adicionar o atributo `role="alert"` para um {{HTMLElement("p")}} {{glossary("tag")}} para notificar um usuário com deficiência visual que a informação é importante e sensível ao tempo (que você poderia transmitir através da cor do texto).
diff --git a/files/pt-br/glossary/arpa/index.md b/files/pt-br/glossary/arpa/index.md
index 47b8371ed92995..f71ed8a2904bb3 100644
--- a/files/pt-br/glossary/arpa/index.md
+++ b/files/pt-br/glossary/arpa/index.md
@@ -3,6 +3,8 @@ title: ARPA
 slug: Glossary/ARPA
 ---
 
+{{GlossarySidebar}}
+
 **.arpa** (address and routing parameter area) é um {{glossary("TLD","top-level domain")}} usado para fins de infraestrutura da Internet, especialmente pesquisa de DNS reverso (ou seja, localiza o {{glossary('domain name')}} para um determinado {{glossary("IP address")}}).
 
 ## See also
diff --git a/files/pt-br/glossary/arpanet/index.md b/files/pt-br/glossary/arpanet/index.md
index c55094f4311ef2..71d0bc780772b1 100644
--- a/files/pt-br/glossary/arpanet/index.md
+++ b/files/pt-br/glossary/arpanet/index.md
@@ -3,6 +3,8 @@ title: Arpanet
 slug: Glossary/Arpanet
 ---
 
+{{GlossarySidebar}}
+
 A **ARPAnet** (_Advanced Research Projects Agency Network_, em português, Rede da Agência de Pesquisas em Projetos Avançados) foi a primeira rede de computadores, construída em 1969 como um meio robusto para transmitir dados militares sigilosos e para interligar os departamentos de pesquisa por todo os Estados Unidos. ARPAnet primeiro executou NCP (_Network Control Protocol_, em português, Protocolo de Controle de Rede) e posteriormente a primeira versão do protocolo de internet ou o conjunto de protocolos {{glossary("TCP")}}/{{glossary("IPv6","IP")}} (_Transmission Control Protocol/Internet Protocol_, em português, Protocolo de Controle de Transmissão/Protocolo de Internet), fazendo da ARPAnet uma parte proeminente da nascente {{glossary("Internet")}}. ARPAnet foi fechado no início de 1990.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/array/index.md b/files/pt-br/glossary/array/index.md
index 075fad4027b7a4..bf7cef6b719e41 100644
--- a/files/pt-br/glossary/array/index.md
+++ b/files/pt-br/glossary/array/index.md
@@ -3,6 +3,8 @@ title: Array
 slug: Glossary/Array
 ---
 
+{{GlossarySidebar}}
+
 Um _array (arranjo ou vetor)_ é um conjunto de dados (que pode assumir os mais diversos tipos, desde do tipo {{Glossary("primitivo")}}, a {{Glossary("objeto")}} dependendo da linguagem de programação). Arrays são utilizados para armazenar mais de um valor em uma única variável. Isso é comparável a uma variável que pode armazenar apenas um valor.
 
 Cada item do array tem um número ligado a ele, chamado de índice numérico, que permite acesso a cada "valor" armazenado na váriavel.
diff --git a/files/pt-br/glossary/ascii/index.md b/files/pt-br/glossary/ascii/index.md
index 5f598ca5cf5743..a96901ae03e49b 100644
--- a/files/pt-br/glossary/ascii/index.md
+++ b/files/pt-br/glossary/ascii/index.md
@@ -3,6 +3,8 @@ title: ASCII
 slug: Glossary/ASCII
 ---
 
+{{GlossarySidebar}}
+
 ASCII (Código Padrão Americano para o Intercâmbio de Informação) é um dos mais populares métodos de codificação usado por computadores para converter letras, números, pontuações e códigos de controle dentro do formato digital. Desde 2007, [UTF-8](/pt-BR/docs/Glossario/UTF-8) substituiu-o na web.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/asynchronous/index.md b/files/pt-br/glossary/asynchronous/index.md
index db241e51371b23..de85f67c1e74f5 100644
--- a/files/pt-br/glossary/asynchronous/index.md
+++ b/files/pt-br/glossary/asynchronous/index.md
@@ -3,6 +3,8 @@ title: Assíncrono
 slug: Glossary/Asynchronous
 ---
 
+{{GlossarySidebar}}
+
 **Assíncrono** refere-se a um ambiente de comunicação onde cada parte recebe e processa mensagens quando for conveniente ou possível em vez de imediatamente.
 
 Isto pode ser usado para descrever um ambiente de comunicação humana como o e-mail — o remetente enviará um e-mail, e o destinatário irá responder quando for conveniente; eles não precisam responder imediatamente.
diff --git a/files/pt-br/glossary/atag/index.md b/files/pt-br/glossary/atag/index.md
index 720974ae3322d6..e35da374bbc8c0 100644
--- a/files/pt-br/glossary/atag/index.md
+++ b/files/pt-br/glossary/atag/index.md
@@ -3,6 +3,8 @@ title: ATAG
 slug: Glossary/ATAG
 ---
 
+{{GlossarySidebar}}
+
 ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines) é uma recomendação do {{Glossary("W3C")}} para construir ferramentas de autoria acessíveis que produzem conteúdo acessível.
 
 ## Veja também
diff --git a/files/pt-br/glossary/attribute/index.md b/files/pt-br/glossary/attribute/index.md
index 73471bf51b726a..1dcef7ae57cff4 100644
--- a/files/pt-br/glossary/attribute/index.md
+++ b/files/pt-br/glossary/attribute/index.md
@@ -3,6 +3,8 @@ title: Atributo HTML
 slug: Glossary/Attribute
 ---
 
+{{GlossarySidebar}}
+
 _Atributos_ estendem uma {{Glossary("tag")}} ("etiqueta"), modificando o comportamento dela ou fornecendo meta dados.
 Um atributo sempre tem a forma `nome=valor` (especificando o identificador do atributo e o valor associado a ele).
 
diff --git a/files/pt-br/glossary/bandwidth/index.md b/files/pt-br/glossary/bandwidth/index.md
index d00cfdd2dcd6b5..521afe449e6ba0 100644
--- a/files/pt-br/glossary/bandwidth/index.md
+++ b/files/pt-br/glossary/bandwidth/index.md
@@ -3,6 +3,8 @@ title: Bandwidth
 slug: Glossary/Bandwidth
 ---
 
+{{GlossarySidebar}}
+
 Largura de banda é a medida de quanta informação pode trafegar através de uma conexão de dados, em um determinado espaço de tempo. É geralmente medida em multiplos de bits por segundo (bps), por exemplo megabits por segundo (Mbps) ou gigabits por segundo (Gbps).
 
 ## Learn more
diff --git a/files/pt-br/glossary/base64/index.md b/files/pt-br/glossary/base64/index.md
index f3c5a68788bc03..2ef076aeec63f3 100644
--- a/files/pt-br/glossary/base64/index.md
+++ b/files/pt-br/glossary/base64/index.md
@@ -3,6 +3,8 @@ title: Base64
 slug: Glossary/Base64
 ---
 
+{{GlossarySidebar}}
+
 **Base64** é um grupo de esquemas de [codificação binários](https://en.wikipedia.org/wiki/Binary-to-text_encoding) para texto semelhantes que representam dados binários em um formato de string ASCII, traduzindo-os em uma representação radix-64. O termo _Base64_ se origina de uma codificação de [transferência de conteúdo MIME](https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding).
 
 Os esquemas de codificação Base64 são comumente usados quando há necessidade de codificar dados binários que precisam ser armazenados e transferidos por meio de mídia projetada para lidar com ASCII. Isso é para garantir que os dados permaneçam intactos sem modificação durante o transporte. _Base64_ é comumente usado em vários aplicativos, incluindo e-mail via [MIME](https://pt.wikipedia.org/wiki/MIME) e armazenamento de dados complexos em [XML](/pt-BR/docs/Web/XML)
diff --git a/files/pt-br/glossary/bigint/index.md b/files/pt-br/glossary/bigint/index.md
index 1fac5eb5ebc6c1..d8119ff7806682 100644
--- a/files/pt-br/glossary/bigint/index.md
+++ b/files/pt-br/glossary/bigint/index.md
@@ -3,6 +3,8 @@ title: BigInt
 slug: Glossary/BigInt
 ---
 
+{{GlossarySidebar}}
+
 No {{Glossary("JavaScript")}}, **BigInt** é um tipo de dado numérico que representa inteiros no formato de precisão arbritrária. Em outras linguagens de programação existem tipos numéricos diferentes, como por exemplo: Integers, Floats, Doubles ou Bignums.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/block-level_content/index.md b/files/pt-br/glossary/block-level_content/index.md
index e5626aa4bfbf72..d4c4cd816cfd34 100644
--- a/files/pt-br/glossary/block-level_content/index.md
+++ b/files/pt-br/glossary/block-level_content/index.md
@@ -3,6 +3,8 @@ title: Elementos block-level
 slug: Glossary/Block-level_content
 ---
 
+{{GlossarySidebar}}
+
 Elementos HTML **(Linguagem de marcação de hipertexto)** historicamente foram categorizados como "nível de bloco" ou [elementos "em linha"](/pt-BR/docs/HTML/Inline_elements). Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um "bloco". Este artigo ajuda a explicar o que isso significa.
 
 Navegadores normalmente mostram o elemento em nível de bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência desse elemento em nível de bloco:
diff --git a/files/pt-br/glossary/block/css/index.md b/files/pt-br/glossary/block/css/index.md
index 542847e05af28f..3b8e404192aa42 100644
--- a/files/pt-br/glossary/block/css/index.md
+++ b/files/pt-br/glossary/block/css/index.md
@@ -3,6 +3,8 @@ title: Bloco (CSS)
 slug: Glossary/Block/CSS
 ---
 
+{{GlossarySidebar}}
+
 Um **bloco** em uma página web é um {{glossary("element", "elemento")}} {{glossary("HTML")}} que aparece em uma nova linha, Isto é, abaixo do elemento precedente em um modo de escrita horizontal e acima do elemento seguinte (comumente conhecido como um elemento de nível de bloco - _block-level element_). Por exemplo, {{htmlelement ("p")}} é por padrão um elemento em nível de bloco, enquanto {{htmlelement ("a")}} é um _elemento inline_ — você pode colocar vários links próximos uns dos outros em seu HTML e eles ficarão na mesma linha como qualquer outro na saída renderizada.
 
 Usando a propriedade {{cssxref("display")}} você pode alterar a forma como um elemento é exibido, como inline ou como bloco (entre muitas outras opções); **blocos** também estão sujeitos aos efeitos de esquemas de posicionamento e uso da propriedade {{cssxref("position")}}.
diff --git a/files/pt-br/glossary/boolean/index.md b/files/pt-br/glossary/boolean/index.md
index 2f4692ddfedd3a..7bc669621e23f6 100644
--- a/files/pt-br/glossary/boolean/index.md
+++ b/files/pt-br/glossary/boolean/index.md
@@ -3,6 +3,8 @@ title: Booleano
 slug: Glossary/Boolean
 ---
 
+{{GlossarySidebar}}
+
 Um **booleano**, em ciência da computação, é um tipo de dado lógico que pode ter apenas um de dois valores possíveis: `verdadeiro` ou `falso`. Por exemplo, em JavaScript, condicionais booleanas são usadas para decidir quais trechos do código serão executados ou repetidas.
 
 ```
diff --git a/files/pt-br/glossary/browser/index.md b/files/pt-br/glossary/browser/index.md
index cbc94f4f6bb9bd..1f80d284d99a9a 100644
--- a/files/pt-br/glossary/browser/index.md
+++ b/files/pt-br/glossary/browser/index.md
@@ -3,6 +3,8 @@ title: Navegador
 slug: Glossary/Browser
 ---
 
+{{GlossarySidebar}}
+
 Um navegador _Web_ é um programa que obtém e exibe páginas da {{Glossary("World Wide Web","Web")}}, e permite que os usuários acessem outras páginas através de {{Glossary("hyperlink","hyperlinks")}}.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/cache/index.md b/files/pt-br/glossary/cache/index.md
index c88cef9a7e7292..7d4eda1be97dc7 100644
--- a/files/pt-br/glossary/cache/index.md
+++ b/files/pt-br/glossary/cache/index.md
@@ -3,6 +3,8 @@ title: Cache
 slug: Glossary/Cache
 ---
 
+{{GlossarySidebar}}
+
 O **cache** (web cache ou HTTP cache) é uma forma de armazenar dados que foram recebidos por respostas HTTP temporariamente para que possam ser usados em requisições HTTP subsequentes enquanto as condições de seu uso forem satisfeitas.
 
 O **cache** ajuda a reduzir o tempo de resposta de uma página após a primeira requisição à mesma. Arquivos estáticos como o [HTML](/pt-BR/docs/Web/HTML) e o [CSS](/pt-BR/docs/Glossario/CSS) que não se modificam com frequência, scripts e imagens, ao serem salvos no cache, não precisam ser baixados do servidor novamente, sendo assim, só informações dinâmicas vão precisar ser requeridas. Lembrando que, qualquer modificação dos arquivos estáticos, o navegador do cliente terá de baixar novamente para receber as atualizações deste arquivo.
diff --git a/files/pt-br/glossary/call_stack/index.md b/files/pt-br/glossary/call_stack/index.md
index 841a7e0827b110..65f05474e0a0bc 100644
--- a/files/pt-br/glossary/call_stack/index.md
+++ b/files/pt-br/glossary/call_stack/index.md
@@ -3,6 +3,8 @@ title: Call stack (Pilha de chamadas)
 slug: Glossary/Call_stack
 ---
 
+{{GlossarySidebar}}
+
 A pilha de chamadas **(call stack)** é um mecanismo do interpretador de uma linguagem que organiza o funcionamento do script quando são chamadas muitas funções, qual função está sendo executada no momento, e quais serão chamadas dentro de alguma função, etc.
 
 - Quando o script chama a função, ela é adicionada à pilha de chamadas, e então é iniciado o carregamento da função.
diff --git a/files/pt-br/glossary/callback_function/index.md b/files/pt-br/glossary/callback_function/index.md
index e23f736dc91837..86aeee24b94452 100644
--- a/files/pt-br/glossary/callback_function/index.md
+++ b/files/pt-br/glossary/callback_function/index.md
@@ -3,6 +3,8 @@ title: Função Callback
 slug: Glossary/Callback_function
 ---
 
+{{GlossarySidebar}}
+
 Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.
 
 Aqui está um pequeno exemplo:
diff --git a/files/pt-br/glossary/caret/index.md b/files/pt-br/glossary/caret/index.md
index 104f4e6b29e9a5..48489f7f922a5a 100644
--- a/files/pt-br/glossary/caret/index.md
+++ b/files/pt-br/glossary/caret/index.md
@@ -3,6 +3,8 @@ title: caret
 slug: Glossary/Caret
 ---
 
+{{GlossarySidebar}}
+
 Um **caret** (às vezes chamado de "cursor de texto") é um indicador exibido na tela para indicar onde a entrada de texto será inserida. A maioria das interfaces de usuário representam o caret usando uma linha vertical fina ou uma caixa do tamanho de um caractere que pisca, mas isso pode variar. Este ponto do texto é chamado de **ponto de inserção.** A palavra "_careta_" diferencia o ponto de inserção de texto do cursor do mouse.
 
 Na web, um caret é usado para representar o ponto de inserção em {{HTMLElement("input")}} e {{HTMLElement("textarea")}} elementos, bem como quaisquer elementos cujo atributo [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable) está definido, permitindo assim que o conteúdo do elemento seja editado pelo usuário.
diff --git a/files/pt-br/glossary/cdn/index.md b/files/pt-br/glossary/cdn/index.md
index 1b941216e54232..bbd3a88ec42f91 100644
--- a/files/pt-br/glossary/cdn/index.md
+++ b/files/pt-br/glossary/cdn/index.md
@@ -3,4 +3,6 @@ title: CDN
 slug: Glossary/CDN
 ---
 
+{{GlossarySidebar}}
+
 CDN é a sigla para (Content Delivery Network) ou seja, Rede de Fornecimento de Conteúdo na tradução livre. É um grupo de servidores espalhados em muitos locais. Esses servidores armazenam cópias duplicadas de dados para que os servidores possam atender às solicitações de dados com base nos quais servidores estão mais próximos dos respectivos usuários finais. CDNs deixa os servidores menos sobrecarregados quando possuem alto tráfego de dados.
diff --git a/files/pt-br/glossary/character/index.md b/files/pt-br/glossary/character/index.md
index c1b55eeb9ad6b3..4aea2f84f9c745 100644
--- a/files/pt-br/glossary/character/index.md
+++ b/files/pt-br/glossary/character/index.md
@@ -3,6 +3,8 @@ title: Caractere
 slug: Glossary/Character
 ---
 
+{{GlossarySidebar}}
+
 Um _caractere_ é um símbolo (letras, números, pontuação) ou de controle não imprimível (por exemplo, carriage return ou hífen). {{glossary ("UTF-8")}} é o conjunto de caracteres mais comum e inclui os grafemas dos idiomas humanos mais populares.
 
 ## Saiba Mais
diff --git a/files/pt-br/glossary/character_encoding/index.md b/files/pt-br/glossary/character_encoding/index.md
index 002f6e182572b6..ecb85488bc1c36 100644
--- a/files/pt-br/glossary/character_encoding/index.md
+++ b/files/pt-br/glossary/character_encoding/index.md
@@ -3,6 +3,8 @@ title: Character encoding
 slug: Glossary/Character_encoding
 ---
 
+{{GlossarySidebar}}
+
 Uma codificação define um mapeamento entre bytes e texto. Uma sequência de bytes permite diferentes interpretações textuais. Ao especificar uma codificação específica (como [UTF-8](/pt-BR/docs/Glossario/UTF-8)), especificamos como a sequência de bytes deve ser interpretada.
 
 Por exemplo, em HTML, normalmente declaramos uma codificação de caracteres UTF-8, usando a seguinte linha:
diff --git a/files/pt-br/glossary/chrome/index.md b/files/pt-br/glossary/chrome/index.md
index c38363b437a4b2..cc84a5c76299e0 100644
--- a/files/pt-br/glossary/chrome/index.md
+++ b/files/pt-br/glossary/chrome/index.md
@@ -3,6 +3,8 @@ title: Chrome
 slug: Glossary/Chrome
 ---
 
+{{GlossarySidebar}}
+
 Em um navegador, o chrome é qualquer aspecto visível do navegador aparte das páginas web (ex., barra de ferramentas, menus, abas). Não deve ser confundido com o {{glossary("Google Chrome")}} navegador.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/class/index.md b/files/pt-br/glossary/class/index.md
index c111e08e4b1304..4ff7b0abe08a58 100644
--- a/files/pt-br/glossary/class/index.md
+++ b/files/pt-br/glossary/class/index.md
@@ -3,6 +3,8 @@ title: Class
 slug: Glossary/Class
 ---
 
+{{GlossarySidebar}}
+
 Em {{glossary("OOP","programação orientada a objeto")}}, uma classe define as características de um {{glossary("object","objecto")}}. A classe é uma definição de modelo de {{glossary("property","propriedades")}} e {{glossary("method","metódos")}} de um objeto, o "projeto" a partir do qual outras instâncias mais específicas do objeto são desenhados.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/cms/index.md b/files/pt-br/glossary/cms/index.md
index de4d7585d8cdf5..aee8e20925deae 100644
--- a/files/pt-br/glossary/cms/index.md
+++ b/files/pt-br/glossary/cms/index.md
@@ -3,6 +3,8 @@ title: CMS
 slug: Glossary/CMS
 ---
 
+{{GlossarySidebar}}
+
 O CMS da sigla em inglês( Content Management System) ou seja, Sistema de Gerenciamento de Conteúdo, é um software que permite usuários publicar, organizar, mudar ou remover vários tipos de conteúdo, não apenas textos mas também incorporação de imagens, vídeos , aúdios e códigos interativos
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/computer_programming/index.md b/files/pt-br/glossary/computer_programming/index.md
index 5c5f312721f1b2..298d974c57c745 100644
--- a/files/pt-br/glossary/computer_programming/index.md
+++ b/files/pt-br/glossary/computer_programming/index.md
@@ -3,6 +3,8 @@ title: Programação de Computadores
 slug: Glossary/Computer_Programming
 ---
 
+{{GlossarySidebar}}
+
 Programação é o processo que formula a solução de um problema computacional ou automatiza uma tarefa repetitiva na forma de uma série de instruções sequenciais em um programa executável.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/cors/index.md b/files/pt-br/glossary/cors/index.md
index 136169412e1dbb..a1c3e010624776 100644
--- a/files/pt-br/glossary/cors/index.md
+++ b/files/pt-br/glossary/cors/index.md
@@ -3,6 +3,8 @@ title: CORS
 slug: Glossary/CORS
 ---
 
+{{GlossarySidebar}}
+
 **CORS** (Cross-Origin Resource Sharing) é um sistema que consiste na transmissão de {{Glossary("Header", "HTTP headers")}}, que determina se navegadores vão bloquear código JavaScript de acessarem respostas provindas de requisições entre origens.
 
 A [same-origin security policy](/pt-BR/docs/Web/Security/Same-origin_policy) proíbe acesso aos recursos entre origens. Mas CORS dá aos servidores web a habilidade de dizer quando eles querem optar em permitir o acesso aos seus recursos entre origens.
@@ -38,5 +40,3 @@ A [same-origin security policy](/pt-BR/docs/Web/Security/Same-origin_policy) pro
 ### Referência técnica
 
 - [Especificação Fetch](https://fetch.spec.whatwg.org)
-
-{{QuickLinksWithSubpages("/pt-BR/docs/Glossary")}}
diff --git a/files/pt-br/glossary/crud/index.md b/files/pt-br/glossary/crud/index.md
index 75339601b3bf05..46b509f07299d9 100644
--- a/files/pt-br/glossary/crud/index.md
+++ b/files/pt-br/glossary/crud/index.md
@@ -3,6 +3,8 @@ title: CRUD
 slug: Glossary/CRUD
 ---
 
+{{GlossarySidebar}}
+
 **CRUD** (Create, Read, Update, Delete) é um acrônimo para as maneiras de se operar em informação armazenada. É um mnemônico para as quatro operações básicas de armazenamento persistente. CRUD tipicamente refere-se a operações perfomadas em um banco de dados ou base de dados, mas também pode aplicar-se para funções de alto nível de uma aplicação, como exclusões reversíveis, onde a informação não é realmente deletada, mas é marcada como deletada via status.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/css/index.md b/files/pt-br/glossary/css/index.md
index 49d268c007b36f..595f24ff1e998d 100644
--- a/files/pt-br/glossary/css/index.md
+++ b/files/pt-br/glossary/css/index.md
@@ -3,6 +3,8 @@ title: CSS
 slug: Glossary/CSS
 ---
 
+{{GlossarySidebar}}
+
 **CSS** (Cascading Style Sheets) é uma linguagem declarativa que controla a apresentação visual de páginas web em um {{glossary("browser","navegador")}}. O navegador aplica as declarações de estilo CSS aos elementos selecionados para exibi-los apropriadamente. Uma declaração de estilo contem as propriedades e seus valores, que determinam a aparência de uma página web.
 
 CSS é uma das três principais tecnologias Web, junto com {{Glossary("HTML")}} e {{Glossary("JavaScript")}}. CSS normalmente estiliza {{Glossary("Element","Elementos HTML")}}, mas também pode ser usada com outras linguagens de marcação como {{Glossary("SVG")}} ou {{Glossary("XML")}}.
diff --git a/files/pt-br/glossary/css_pixel/index.md b/files/pt-br/glossary/css_pixel/index.md
index 8a2209b8298e47..c7a174d2d9d0cb 100644
--- a/files/pt-br/glossary/css_pixel/index.md
+++ b/files/pt-br/glossary/css_pixel/index.md
@@ -3,6 +3,8 @@ title: Pixel CSS
 slug: Glossary/CSS_pixel
 ---
 
+{{GlossarySidebar}}
+
 O **Pixel CSS** - denotado no {{Glossary("CSS")}} pelo sufixo px - é uma unidade de comprimento que corresponde aproximadamente a largura ou altura de um ponto único que pode ser confortavelmente visto pelos olhos humanos sem esforço, mas é o menor possível. Por definição, esse é o tamanho físico de um único píxel em uma densidade de 96 DPI, situado a um braço de distância dos olhos do observador.
 
 Essa definição, é claro, se demonstra ser muito vaga, e termos como "confortavelmente visto" e "braço de distância" são imprecisas, variando de pessoa para pessoa. Por exemplo, quando um usuário se senta em sua mesa, defronte a sua área de trabalho, o monitor geralmente estará longe dos seus olhos enquanto ele estiver usando o celular.
diff --git a/files/pt-br/glossary/css_preprocessor/index.md b/files/pt-br/glossary/css_preprocessor/index.md
index a339d96c141d24..8383317d4a5b51 100644
--- a/files/pt-br/glossary/css_preprocessor/index.md
+++ b/files/pt-br/glossary/css_preprocessor/index.md
@@ -3,6 +3,8 @@ title: Pré-processador CSS
 slug: Glossary/CSS_preprocessor
 ---
 
+{{GlossarySidebar}}
+
 Um **pré-processador CSS** é um programa que permite você gerar {{Glossary("CSS")}} a partir de uma {{Glossary("syntax", "sintaxe")}} única desse pré-processador. Existem muitos pré-processadores CSS para escolha, no entanto, a maioria deles irá adicionar algumas funcionalidades extras que não existem no CSS puro, como um mixin, seletores aninhados, herança de seletores, e assim por diante. Essas funcionalidades fazem a estrutura do CSS mais legível e fácil de manter.
 
 Para usar um pré-processador, você deve instalar um compilador CSS no seu servidor web; Ou usar o pré-processador CSS para compilar no ambiente de desenvolvimento, e então fazer upload do arquivo CSS compilado para o servidor web.
diff --git a/files/pt-br/glossary/css_selector/index.md b/files/pt-br/glossary/css_selector/index.md
index 302be9fb9b30ae..1436d0311bf3a9 100644
--- a/files/pt-br/glossary/css_selector/index.md
+++ b/files/pt-br/glossary/css_selector/index.md
@@ -3,6 +3,8 @@ title: Selector (CSS)
 slug: Glossary/CSS_Selector
 ---
 
+{{GlossarySidebar}}
+
 O **seletor CSS** é parte da regra do CSS que lhe permite selecionar qual elemento(s) vai receber o estilo pela regra.
 
 ## Exemplos
diff --git a/files/pt-br/glossary/cssom/index.md b/files/pt-br/glossary/cssom/index.md
index d6b95dcdf3bc47..21981a3934fa39 100644
--- a/files/pt-br/glossary/cssom/index.md
+++ b/files/pt-br/glossary/cssom/index.md
@@ -3,6 +3,8 @@ title: Modelo de Objeto CSS (CSSOM)
 slug: Glossary/CSSOM
 ---
 
+{{GlossarySidebar}}
+
 O **Modelo de Objeto CSS (CSSOM)** é um mapeamento de todos os seletores CSS e propriedades relevantes para cada seletor no formato de árvore, com um nó raiz, irmão, descendente, filho e outro relacionamento. O CSSOM é muito similar ao {{glossary('DOM', 'Modelo de Objeto de Documento (DOM)')}}. Ambos são parte do caminho de renderização crítica, o qual é uma série de etapas que devem acontecer para renderizar o site corretamente.
 
 O CSSOM, junto ao DOM, para construir a árvore de renderização, que por sua vez é usada pelo navegador para apresentar e estilizar a página.
diff --git a/files/pt-br/glossary/doctype/index.md b/files/pt-br/glossary/doctype/index.md
index 513115656a5039..222c5b74baaa68 100644
--- a/files/pt-br/glossary/doctype/index.md
+++ b/files/pt-br/glossary/doctype/index.md
@@ -3,6 +3,8 @@ title: Doctype
 slug: Glossary/Doctype
 ---
 
+{{GlossarySidebar}}
+
 No {{Glossary("HTML")}}, o doctype é a introdução "`<!DOCTYPE html>`" encontrada no topo de todos os documentos. Seu único propósito é evitar que o {{Glossary("browser")}} mude para os chamados ["quirks mode"](/pt-BR/docs/Quirks_Mode_and_Standards_Mode) quando renderizar um documento; isto é, o "`<!DOCTYPE html>`" doctype garante que o browser faça um esforço na tentativa de seguir as especificações relevantes, em vez de usar um modo de renderização diferente e que seja incompatível com algumas especificações.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/dom/index.md b/files/pt-br/glossary/dom/index.md
index 7cd2f1e66df5d5..b2513abebf0651 100644
--- a/files/pt-br/glossary/dom/index.md
+++ b/files/pt-br/glossary/dom/index.md
@@ -3,6 +3,8 @@ title: DOM
 slug: Glossary/DOM
 ---
 
+{{GlossarySidebar}}
+
 O Modelo de Objeto de Documentos (do inglês **Document Object Model, DOM**) é uma {{Glossary("API")}} definida pelo {{Glossary("W3C")}} para representar e interagir com qualquer documento {{Glossary("HTML")}} ou {{Glossary("XML")}}.
 
 O _DOM_ é um modelo de documento carregado pelo {{Glossary("navegador")}}. Este documento é representado através de uma árvore de nós, onde cada um destes nós representa uma parte do documento (por ex. um {{Glossary("elemento")}}, texto ou comentário).
diff --git a/files/pt-br/glossary/domain/index.md b/files/pt-br/glossary/domain/index.md
index 96c58d251397bb..18133300570def 100644
--- a/files/pt-br/glossary/domain/index.md
+++ b/files/pt-br/glossary/domain/index.md
@@ -3,6 +3,8 @@ title: Domínio
 slug: Glossary/Domain
 ---
 
+{{GlossarySidebar}}
+
 Um domínio é uma autoridade na internet que controla seus próprios recursos. Seu "nome de domínio" é uma forma de endereçar essa autoridade como parte da hierarquia de uma {{Glossary("URL")}} — normalmente a parte mais memorável dela, por exemplo por ser uma marca.
 
 Um nome de domínio totalmente qualificado (FQDN — sigla em inglês) contém todas as partes necessárias para pesquisar essa autoridade pelo seu nome, sem ambiguidade, usando o sistema {{Glossary("DNS")}} da internet.
diff --git a/files/pt-br/glossary/domain_name/index.md b/files/pt-br/glossary/domain_name/index.md
index 0e34d4caff623a..0f692b056fbf29 100644
--- a/files/pt-br/glossary/domain_name/index.md
+++ b/files/pt-br/glossary/domain_name/index.md
@@ -3,6 +3,8 @@ title: Nome de domínio
 slug: Glossary/Domain_name
 ---
 
+{{GlossarySidebar}}
+
 Um nome de domínio é um endereço de uma página na {{Glossary("Internet")}}. Nomes de domínios são usados em {{Glossary("URL","URLs")}} para identificar a qual servidor uma página específica pertence. O domínio consiste de uma sequência hierárquica de nomes (rótulo) separados por períodos (pontos) e terminando com uma {{Glossary("TLD","extensão")}}.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/ecma/index.md b/files/pt-br/glossary/ecma/index.md
index 4f8a9c7bab8c53..df8a44c3abbde0 100644
--- a/files/pt-br/glossary/ecma/index.md
+++ b/files/pt-br/glossary/ecma/index.md
@@ -3,6 +3,8 @@ title: ECMA
 slug: Glossary/ECMA
 ---
 
+{{GlossarySidebar}}
+
 **Ecma International** (oficialmente _Associação Européia dos Fabricantes de Computadores_) é uma organização sem fins lucrativos que desenvolve os padrões para hardware de computadores, comunicações e linguagens de programação.
 
 Na web ela é famosa por ser a organização que mantém [a especificação ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm) (também conhecida por {{Glossary("ECMAScript")}}), que é a especificação núcleo para a linguagem {{Glossary("JavaScript")}}.
diff --git a/files/pt-br/glossary/element/index.md b/files/pt-br/glossary/element/index.md
index afe7ebef21eecd..af40dc6d73e9f5 100644
--- a/files/pt-br/glossary/element/index.md
+++ b/files/pt-br/glossary/element/index.md
@@ -3,6 +3,8 @@ title: Elemento
 slug: Glossary/Element
 ---
 
+{{GlossarySidebar}}
+
 Um **elemento** é parte de uma página web. Em {{glossary("XML")}} e {{glossary("HTML")}}, um elemento pode conter um item de dados, um bloco de texto, uma imagem ou talvez nada. Um elemento típico inclui uma tag de abertura com alguns {{glossary("attribute", "atributos")}}, o conteúdo de texto incluído e uma tag de fechamento.
 
 ![Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.](anatomy-of-an-html-element.png)
diff --git a/files/pt-br/glossary/endianness/index.md b/files/pt-br/glossary/endianness/index.md
index e8db954217b9ff..8f0d1d729889ad 100644
--- a/files/pt-br/glossary/endianness/index.md
+++ b/files/pt-br/glossary/endianness/index.md
@@ -3,6 +3,8 @@ title: Endianness
 slug: Glossary/Endianness
 ---
 
+{{GlossarySidebar}}
+
 "Endian" and "endianness" (ou "ordem-de-bytes") descrevem como os computadores organizam os bytes que compõem os números.
 
 Cada local de armazenamento de memória possui um indice ou endereço. Cada byte pode ser armazenado em um numero de 8-bits (ou seja, entre `0x00` e `0xff`), então você deve reservar mais que um byte para armazenar um numero maior. De longe, o mais comum na ordenação de múltiplos bytes em um único número é o **little-endian,** que é usado em todos os processadores Intel. Little-endian significa armazenar bytes na ordem do menor para o mais significativo (onde o byte menos significativo ocupa o primeiro, ou menor, endereço), comparável a maneira comum de escrever datas na Europa (por exemplo, 31 Dezembro de 2050).
diff --git a/files/pt-br/glossary/entity_header/index.md b/files/pt-br/glossary/entity_header/index.md
index 0e99e6cbaf5448..e89103ce4da9c6 100644
--- a/files/pt-br/glossary/entity_header/index.md
+++ b/files/pt-br/glossary/entity_header/index.md
@@ -3,6 +3,8 @@ title: Cabeçalho de entidade
 slug: Glossary/Entity_header
 ---
 
+{{GlossarySidebar}}
+
 Um cabeçalho de entidade é um {{glossary("header", "HTTP header")}} descrevendo o conteúdo do corpo da mensagem. Cabeçalhos da entidade são usados em ambos, respostas e requerimentos HTTP. Cabeçalhos como {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}} são cabeçalhos de entidade.
 
 Mesmo se cabeçalhos de entidade não sejam requerimentos ou cabeçalhos de resposta, eles são muitas vezes incluídos nestes termos.
diff --git a/files/pt-br/glossary/falsy/index.md b/files/pt-br/glossary/falsy/index.md
index aa856e4f39557f..64463f8bc3655e 100644
--- a/files/pt-br/glossary/falsy/index.md
+++ b/files/pt-br/glossary/falsy/index.md
@@ -3,6 +3,8 @@ title: Falsy
 slug: Glossary/Falsy
 ---
 
+{{GlossarySidebar}}
+
 Um valor **falsy** é um valor que se traduz em falso quando avaliado em um contexto {{Glossary("Boolean")}}.
 
 {{Glossary("JavaScript")}} usa tipo {{Glossary("Type_Conversion", "coercion")}} em contextos booleanos.
diff --git a/files/pt-br/glossary/first-class_function/index.md b/files/pt-br/glossary/first-class_function/index.md
index 3219287558a772..5dcc7f4792de8a 100644
--- a/files/pt-br/glossary/first-class_function/index.md
+++ b/files/pt-br/glossary/first-class_function/index.md
@@ -3,6 +3,8 @@ title: Função First-class
 slug: Glossary/First-class_Function
 ---
 
+{{GlossarySidebar}}
+
 Entende-se que uma linguagem de programação tem **Função First-class** quando suas funções são tratadas como qualquer outra variável. Por exemplo, numa linguagem desse tipo, a função pode ser passada como argumento pra outras funções, ser retornada por outra função e pode ser atribuída como um valor à uma variável.
 
 ## Exemplo | Atribuir uma função à uma variável
diff --git a/files/pt-br/glossary/flex/index.md b/files/pt-br/glossary/flex/index.md
index e210688434a10b..92dfd9f8167c70 100644
--- a/files/pt-br/glossary/flex/index.md
+++ b/files/pt-br/glossary/flex/index.md
@@ -3,6 +3,8 @@ title: Flex
 slug: Glossary/Flex
 ---
 
+{{GlossarySidebar}}
+
 `flex` é um novo valor adicionado à propriedade {{cssxref("display")}}. Junto com o `inline-flex`, este valor faz com que o elemento aplicado seja um {{glossary("flex container")}}, e seus filhos se transformem então em {{glossary("flex item")}}.Os itens então farão parte de um layout flex, e todas as propriedades definidas no CSS Flexbox poderão ser aplicadas.
 
 A propriedade flex é um atalho para as propriedades flexbox`flex-grow`, `flex-shrink` e `flex-basis`.
diff --git a/files/pt-br/glossary/flexbox/index.md b/files/pt-br/glossary/flexbox/index.md
index d00cbf312b2714..f7ea139fb94268 100644
--- a/files/pt-br/glossary/flexbox/index.md
+++ b/files/pt-br/glossary/flexbox/index.md
@@ -3,6 +3,8 @@ title: Flexbox
 slug: Glossary/Flexbox
 ---
 
+{{GlossarySidebar}}
+
 Flexbox é o nome normalmente usado para o [Módulo CSS Flexible Box Layout](https://www.w3.org/TR/css-flexbox-1/), um modelo de layout para mostrar itens numa única dimensão — como linha ou como coluna. Inserir uma caixa dentro da outra (p. ex. linha numa coluna, ou coluna numa linha) permite a criação de layouts em duas dimensões.
 
 Na especificação, Flexbox é descrito como um modelo de layout usado na criação de interfaces. A principal característica do Flexbox é o fato que itens em um layout podem crescer ou encolher. Espaços podem ser atribuídos aos próprios itens, distribuídos entre eles, ou posicionados ao redor dos mesmos.
diff --git a/files/pt-br/glossary/forbidden_header_name/index.md b/files/pt-br/glossary/forbidden_header_name/index.md
index bc87f2a97f0f8b..36a36c584c8b2d 100644
--- a/files/pt-br/glossary/forbidden_header_name/index.md
+++ b/files/pt-br/glossary/forbidden_header_name/index.md
@@ -3,6 +3,8 @@ title: Nome de cabeçalho proibido
 slug: Glossary/Forbidden_header_name
 ---
 
+{{GlossarySidebar}}
+
 Um _nome de cabeçalho proibido_ é o nome de qualquer [cabeçalho HTTP](/pt-BR/docs/Web/HTTP/Headers) que não pode ser modificado programaticamente; especificamente, um nome de cabeçalho de **solicitação** HTTP (em contraste com um {{Glossary("Forbidden response header name")}}).
 
 Modificar esses cabeçalhos é proibido porque o agente do usuário retém o controle total sobre eles. Nomes começando com `Sec-` são reservados para criar novos cabeçalhos seguros de {{glossary("API","APIs")}} usando [Fetch](/pt-BR/docs/Web/API/Fetch_API) que concedem aos desenvolvedores controle sobre cabeçalhos, como {{domxref("XMLHttpRequest")}}.
diff --git a/files/pt-br/glossary/forbidden_response_header_name/index.md b/files/pt-br/glossary/forbidden_response_header_name/index.md
index 483ef1309a2549..4d260c830b0cdf 100644
--- a/files/pt-br/glossary/forbidden_response_header_name/index.md
+++ b/files/pt-br/glossary/forbidden_response_header_name/index.md
@@ -3,4 +3,6 @@ title: Forbidden response header name
 slug: Glossary/Forbidden_response_header_name
 ---
 
+{{GlossarySidebar}}
+
 Um _nome de cabeçalho de resposta proibido_ é um nome de [cabeçalho HTTP](/pt-BR/docs/Web/HTTP/Headers) (ou `Set-Cookie` ou `Set-Cookie2`) que não pode ser modificado programaticamente.
diff --git a/files/pt-br/glossary/function/index.md b/files/pt-br/glossary/function/index.md
index 361d46b8f6c170..44152eaebd8dc9 100644
--- a/files/pt-br/glossary/function/index.md
+++ b/files/pt-br/glossary/function/index.md
@@ -3,6 +3,8 @@ title: Função
 slug: Glossary/Function
 ---
 
+{{GlossarySidebar}}
+
 Uma **função** **(function)** é um fragmento de código que pode ser invocado por outro código, por si mesmo ou uma {{Glossary ("variável")}} que se refere à função. Quando uma função é invocada, o {{Glossary ("Argument", "argumento")}} é passado para a função como input (entrada) e a função pode opcionalmente retornar um output (saída). Uma função em {{glossary ("JavaScript")}} também é um {{glossary ("objeto")}}.
 
 O nome da função é um {{Glossary ("identificador")}} declarado como parte de uma declaração de função ou expressão de função. O nome da função {{Glossary ("escopo")}} depende se o nome da função é uma declaração ou expressão.
diff --git a/files/pt-br/glossary/fuzzing/index.md b/files/pt-br/glossary/fuzzing/index.md
index 7a66158f1ac297..3def1c4a74518c 100644
--- a/files/pt-br/glossary/fuzzing/index.md
+++ b/files/pt-br/glossary/fuzzing/index.md
@@ -3,6 +3,8 @@ title: Teste de Fuzzing
 slug: Glossary/Fuzzing
 ---
 
+{{GlossarySidebar}}
+
 O **Fuzzing** é uma técnica para testar o software usando ferramentas automáticas para fornecer entradas inválidas ou inesperadas para um programa ou função em um programa, logo verificando os resultados para ver se o programa falha ou age de forma inapropriada. Essa é uma forma importante para garantir que o software está estável, confiável e seguro, e nós usamos muito o fuzzing no Mozilla.
 
 - [Postagens do blog do Jesse sobre fuzzing](http://www.squarefree.com/categories/fuzzing/)
diff --git a/files/pt-br/glossary/gecko/index.md b/files/pt-br/glossary/gecko/index.md
index b9b7fe5872aee3..75f2ade21e93cb 100644
--- a/files/pt-br/glossary/gecko/index.md
+++ b/files/pt-br/glossary/gecko/index.md
@@ -3,6 +3,8 @@ title: Gecko
 slug: Glossary/Gecko
 ---
 
+{{GlossarySidebar}}
+
 **Gecko** é um motor de layout desenvolvido pela Mozilla Project e utilizado em vários apps/dispositivos, incluindo {{glossary("Mozilla Firefox","Firefox")}} e {{glossary("Firefox OS")}}.
 
 Web {{glossary("browser","browsers")}} precisam de um software chamado de motor de layout para interpretar {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}}, e conteúdos embutidos (como imagens) e desenhar tudo para a sua tela. Apesar disso, Gecko garante que {{glossary("API","APIs")}} associadas funcionem bem em qualquer sistema operacional que o Gecko suporte, e que APIs apropriadas sejam expotas somente aos alvos relevantes. Isso significa que o Gecko inclui, além de outras coisas, uma pilha de conexão de rede, pilha gráfica, motor de layout, uma máquina virtual de JavaScript e portando camadas.
diff --git a/files/pt-br/glossary/general_header/index.md b/files/pt-br/glossary/general_header/index.md
index ad70d0b85830c7..dd29ea372d6be6 100644
--- a/files/pt-br/glossary/general_header/index.md
+++ b/files/pt-br/glossary/general_header/index.md
@@ -3,6 +3,8 @@ title: Cabeçalho Genérico
 slug: Glossary/General_header
 ---
 
+{{GlossarySidebar}}
+
 Um **cabeçalho genérico** é um {{glossary('Header', ' cabeçalho HTTP')}} que pode ser de mensagens de solicitação e resposta, mas isso não é aplicado ao seu conteúdo. De acordo com o contexto em que são usados, podem ser cabeçalho de {{glossary("Response header", "resposta")}} ou de {{glossary("request header", "Requisição")}}. Entranto, não são {{glossary("entity header", "cabeçalhos de entidade")}}.
 
 O uso mais comum para cabeçalho genérico é {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} or {{HTTPHeader("Connection")}}.
diff --git a/files/pt-br/glossary/global_object/index.md b/files/pt-br/glossary/global_object/index.md
index 09175e9578c031..8e7f7a618aa3a8 100644
--- a/files/pt-br/glossary/global_object/index.md
+++ b/files/pt-br/glossary/global_object/index.md
@@ -3,6 +3,8 @@ title: Global object
 slug: Glossary/Global_object
 ---
 
+{{GlossarySidebar}}
+
 Um objeto global é um {{Glossary("objeto")}} que sempre está definido no {{Glossary("escopo global")}}.
 
 Em JavaScript, um objeto global é sempre definido. No browser, quando scripts criam variáveis globais, elas são criadas como membros desse objeto global (Em {{Glossary("Node.js")}} isso não se aplica). A {{Glossary("interface")}} do objeto global depende do contexto de execução no qual o script está sendo executado. Por exemplo:
diff --git a/files/pt-br/glossary/graceful_degradation/index.md b/files/pt-br/glossary/graceful_degradation/index.md
index eed7a9092a7cd0..cc005aa59c5d4f 100644
--- a/files/pt-br/glossary/graceful_degradation/index.md
+++ b/files/pt-br/glossary/graceful_degradation/index.md
@@ -3,6 +3,8 @@ title: Degradação graciosa
 slug: Glossary/Graceful_degradation
 ---
 
+{{GlossarySidebar}}
+
 **Degradação graciosa** é uma filosofia de design centrada na tentativa de criar um site/aplicativo moderno que funcione nos navegadores mais recentes, mas recorre a uma experiência que, embora não tão boa, ainda oferece conteúdo e funcionalidade essenciais para os navegadores antigos.
 
 {{Glossary("Polyfill","Polyfills")}} podem ser usados para criar com JavaScript recursos ausentes, mas alternativas aceitáveis para recursos como estilo e layout devem ser fornecidas sempre que possível, por exemplo, usando a cascata CSS ou o comportamento de HTML substituto. Alguns bons exemplos podem ser encontrados em [Handling common HTML and CSS problems](/pt-BR/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS).
diff --git a/files/pt-br/glossary/grid/index.md b/files/pt-br/glossary/grid/index.md
index 42f40bdf4cb493..02b6a54b4b2166 100644
--- a/files/pt-br/glossary/grid/index.md
+++ b/files/pt-br/glossary/grid/index.md
@@ -3,6 +3,8 @@ title: Grade
 slug: Glossary/Grid
 ---
 
+{{GlossarySidebar}}
+
 Uma _grade no CSS_ é definida usando o valor `grid` da propriedade {{cssxref("display")}}; você pode definir colunas e linhas na sua grade usando as propridades {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}.
 
 A grade que você define usando essas propriedades é descrita como uma _grade explícita_.
diff --git a/files/pt-br/glossary/grid_areas/index.md b/files/pt-br/glossary/grid_areas/index.md
index 9633d4e1ebb6bf..1832c84fa195c5 100644
--- a/files/pt-br/glossary/grid_areas/index.md
+++ b/files/pt-br/glossary/grid_areas/index.md
@@ -3,6 +3,8 @@ title: Grid Areas
 slug: Glossary/Grid_Areas
 ---
 
+{{GlossarySidebar}}
+
 Um **grid area** é um ou mais {{glossary("grid cell", "grid cells")}} que compõem uma área retangular do grid. As Grid Areas quando se coloca um item usando [line-based placement](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) (posicionamento baseado em colunas e linha)ou quando define áreas usando [named grid areas](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)(substituindo o nome).
 
 ![Image showing a highlighted grid area](1_grid_area.png)
diff --git a/files/pt-br/glossary/hoisting/index.md b/files/pt-br/glossary/hoisting/index.md
index ffe12b767beb44..2f010da70c97cf 100644
--- a/files/pt-br/glossary/hoisting/index.md
+++ b/files/pt-br/glossary/hoisting/index.md
@@ -3,6 +3,8 @@ title: Hoisting
 slug: Glossary/Hoisting
 ---
 
+{{GlossarySidebar}}
+
 Hoisting (içamento, em português) é um termo que você _não_ encontrará usado em nenhuma prosa de especificação normativa antes da [especificação de idioma do ECMAScript® 2015](http://www.ecma-international.org/ecma-262/6.0/index.html). Hoisting foi pensado como uma maneira geral de pensar sobre como os contextos de execução (especificamente as fases de criação e execução) funcionam em JavaScript. No entanto, o conceito pode ser um pouco confuso a princípio.
 
 Conceitualmente, por exemplo, uma definição estrita de elevação sugere que as declarações de variáveis e funções são fisicamente movidas para o topo do seu código, mas isso não é realmente o que acontece. Em vez disso, as declarações de variável e função são colocadas na memória durante a fase de _compilação_, mas permanecem exatamente onde você as digitou no seu código.
diff --git a/files/pt-br/glossary/hsts/index.md b/files/pt-br/glossary/hsts/index.md
index d066d46ccf6eb7..aa6d9f4e117c5c 100644
--- a/files/pt-br/glossary/hsts/index.md
+++ b/files/pt-br/glossary/hsts/index.md
@@ -3,6 +3,8 @@ title: HSTS
 slug: Glossary/HSTS
 ---
 
+{{GlossarySidebar}}
+
 **O HTTP Strict Transport Security** permite que um site informe ao navegador que ele nunca deve carregar o site usando HTTP e deve converter automaticamente todas as tentativas de acessar o site usando HTTP para solicitações HTTPS. Consiste em um cabeçalho HTTP [`Strict-Transport-Security`](/pt-BR/docs/Web/HTTP/Headers/Strict-Transport-Security), enviado de volta pelo servidor com o recurso.
 
 Em outras palavras, ele diz ao navegador que apenas altere o protocolo de HTTP para HTTPS em uma url (e será mais seguro) e solicitará que o navegador faça isso para cada solicitação.
diff --git a/files/pt-br/glossary/html/index.md b/files/pt-br/glossary/html/index.md
index 817eb399cd295b..73b4fa5de79d91 100644
--- a/files/pt-br/glossary/html/index.md
+++ b/files/pt-br/glossary/html/index.md
@@ -3,6 +3,8 @@ title: HTML
 slug: Glossary/HTML
 ---
 
+{{GlossarySidebar}}
+
 HTML (HyperText Markup Language) é uma linguagem descritiva que especifica a estrutura de uma página web.
 
 ## Breve história
diff --git a/files/pt-br/glossary/http/index.md b/files/pt-br/glossary/http/index.md
index 9008edcd052663..1acbe655716dbc 100644
--- a/files/pt-br/glossary/http/index.md
+++ b/files/pt-br/glossary/http/index.md
@@ -3,6 +3,8 @@ title: HTTP
 slug: Glossary/HTTP
 ---
 
+{{GlossarySidebar}}
+
 HTTP (HyperText Transfer Protocol) é o {{glossary("protocolo")}} básico que habilita a transferência de arquivos na {{glossary("World Wide Web","Web")}}, normalmente entre um navegador e um servidor para que os humanos possam lê-los. A versão atual da especificação HTTP é chamada HTTP / 2.
 
 Como parte de um {{glossary("URI")}}, o "http: //" é chamado de "esquema" e geralmente fica no início de um endereço, por exemplo em "https\://developer.mozilla.org" para indicar ao navegador que solicite o documento usando o protocolo HTTP. O https neste caso refere-se à versão segura do protocolo HTTP, {{glossary("SSL")}} (também chamado TLS).
diff --git a/files/pt-br/glossary/http_2/index.md b/files/pt-br/glossary/http_2/index.md
index c27a7390f33a98..a6df74e57b9c4a 100644
--- a/files/pt-br/glossary/http_2/index.md
+++ b/files/pt-br/glossary/http_2/index.md
@@ -3,6 +3,8 @@ title: HTTP/2
 slug: Glossary/HTTP_2
 ---
 
+{{GlossarySidebar}}
+
 **HTTP/2** é a principal revisão do [protocolo de rede HTTP](/pt-BR/docs/Web/HTTP/Basics_of_HTTP). Os princiais objetivos do HTTP/2 são reduzir a latência, permitindo a multiplexação total das requisições e respostas, minimizar a sobrecarga do protocolo por meio da compactação eficiente dos campos do cabeçalho HTTP e adicionar suporte para priorização de requisições e notificações dos servidores.
 
 HTTP/2 não modifica a semântica de aplicativo do HTTP de nenhuma maneira. Todos os principais conceitos encontrados no HTTP 1.1, como métodos HTTP, códigos de status, URIs e campos de cabeçalho, permanecem no lugar. Em vez disso, o HTTP/2 modifica como os dados são formatados (enquadrados) e transportados entre o cliente e o servidor, sendo que ambos gerenciam todo o processo e ocultam a complexidade do aplicativo na nova camada de enquadramento. Como resultado, todas as aplicações existentes podem ser entregues sem modificação.
diff --git a/files/pt-br/glossary/http_header/index.md b/files/pt-br/glossary/http_header/index.md
index 103f3440bc9546..20219609a3c22b 100644
--- a/files/pt-br/glossary/http_header/index.md
+++ b/files/pt-br/glossary/http_header/index.md
@@ -3,6 +3,8 @@ title: Cabeçalho HTTP
 slug: Glossary/HTTP_header
 ---
 
+{{GlossarySidebar}}
+
 Um **Cabeçalho HTTP** é um campo de uma requisição ou resposta HTTP que passa informações adicionais, alterando ou melhorando a precisão da semântica da mensagem ou do corpo. Cabeçalhos são _case-insensitive_, iniciam-se no começo da linha e são seguidos imediamente por um `':'` e um valor dependendo do cabeçalho em si. O valor termina no próximo CRLF ou no fim da mensagem.
 
 Tradicionalmente, cabeçalhos são classificados em categorias, apesar disso, essa classificação não faz mais parte de nenhuma especificação:
diff --git a/files/pt-br/glossary/https/index.md b/files/pt-br/glossary/https/index.md
index cecd4502576b8a..c2983dca64ca98 100644
--- a/files/pt-br/glossary/https/index.md
+++ b/files/pt-br/glossary/https/index.md
@@ -3,6 +3,8 @@ title: HTTPS
 slug: Glossary/HTTPS
 ---
 
+{{GlossarySidebar}}
+
 **HTTPS** (_HTTP Secure_) é uma versão do protocolo {{Glossary("HTTP")}} criptografado. É normalmente usado {{Glossary("SSL")}} ou {{Glossary("TLS")}} para criptografar toda a comunicação entre um cliente e um servidor. Essa conexão segura permite aos clientes trocar com segurança dados confidenciais com o servidor, por exemplo, para atividades bancárias ou compras online.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/idempotent/index.md b/files/pt-br/glossary/idempotent/index.md
index f4fe120ab1d3a2..1672a654af7549 100644
--- a/files/pt-br/glossary/idempotent/index.md
+++ b/files/pt-br/glossary/idempotent/index.md
@@ -3,6 +3,8 @@ title: Idempotente
 slug: Glossary/Idempotent
 ---
 
+{{GlossarySidebar}}
+
 Um método HTTP é **idempotente** se uma requisição idêntica pode ser feita uma ou mais vezes em sequência com o mesmo efeito enquanto deixa o servidor no mesmo estado. Em outras palavras, um método idempotente não deveria possuir nenhum efeito colateral (exceto para manter estatísticas). Implementados corretamente, o {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, e {{HTTPMethod("DELETE")}} são métodos **idempotentes**, mas não o método {{HTTPMethod("POST")}}. Todos os métodos {{glossary("seguro")}}s também são idempotentes.
 
 Para ser idempotente, somente o estado atual do _back-end_ de um servidor deve ser considerado, o código de status retornado por cada requisição pode variar: a primeira chamada de um {{HTTPMethod("DELETE")}} vai provavelmente retornar um {{HTTPStatus("200")}}, enquanto as chamadas sucessivas vão provavelmente retornar {{HTTPStatus("404")}}. Outra implicação do {{HTTPMethod("DELETE")}} ser idempotente é de que os desenvolvedores não deveriam implementar APIs RESTful com a funcionalidade de deleção de última entrada usando o método `DELETE`.
diff --git a/files/pt-br/glossary/identifier/index.md b/files/pt-br/glossary/identifier/index.md
index ed23e05f5765dd..a9190806011b1e 100644
--- a/files/pt-br/glossary/identifier/index.md
+++ b/files/pt-br/glossary/identifier/index.md
@@ -3,6 +3,8 @@ title: Identificador (Identifier)
 slug: Glossary/Identifier
 ---
 
+{{GlossarySidebar}}
+
 Uma sequência de caracteres no código, que identifica uma **{{glossary("variável")}}, {{glossary("função")}}, ou {{glossary("propriedade")}}**.
 
 Em {{glossary("JavaScript")}}, identificadores podem conter somente caracteres alfanuméricos (ou "$" ou "\_"), e não podem iniciar com um dígito. Um identificador difere de uma **string** no sentido de que uma string é informação, enquanto um identificador é parte do código. Em JavaScript, não existe uma forma de converter identificadores para strings, mas as vezes é possível converter strings em identificadores.
diff --git a/files/pt-br/glossary/iife/index.md b/files/pt-br/glossary/iife/index.md
index 43ec0cbe7d59ed..02b6ed1fc53ac7 100644
--- a/files/pt-br/glossary/iife/index.md
+++ b/files/pt-br/glossary/iife/index.md
@@ -3,6 +3,8 @@ title: IIFE
 slug: Glossary/IIFE
 ---
 
+{{GlossarySidebar}}
+
 **IIFE** (Immediately Invoked Function Expression) é uma função em {{glossary("JavaScript")}} que é executada assim que definida.
 
 É um {{glossary("Design Pattern")}} também conhecido como {{glossary("Self-Executing Anonymous Function")}} e contém duas partes principais. A primeira é a função anônima cujo escopo léxico é encapsulado entre parênteses. Isso previne o acesso externo às variáveis declaradas na IIFE, bem como evita que estas variáveis locais poluam o escopo global.
diff --git a/files/pt-br/glossary/index.md b/files/pt-br/glossary/index.md
index eb57cd127eadb9..38666586cde020 100644
--- a/files/pt-br/glossary/index.md
+++ b/files/pt-br/glossary/index.md
@@ -1,16 +1,13 @@
 ---
 title: "Glossário do MDN Web Docs: Definições de termos relacionados à Web"
+short-title: Glossário do MDN Web Docs
 slug: Glossary
 ---
 
+{{GlossarySidebar}}
+
 Tecnologias da Web contém longas listas de jargões e abreviações usadas em documentação e codificação. Este glossário fornece definições de palavras e abreviaturas que você precisa saber para entender e desenvolver para a web com sucesso.
 
 Os termos do glossário podem ser selecionados na barra lateral.
 
-> **Nota:** Este glossário é um trabalho interminável em andamento. Você pode ajudar a melhorá-lo [escrevendo novas entradas](/pt-BR/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_Glossary) ou melhorando as já existentes.
-
-<section id="Quick_links">
- <ol>
-  <li><strong><a href="/pt-BR/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/pt-BR/docs/Glossary", 1)}}</li>
- </ol>
-</section>
+> **Nota:** Este glossário é um trabalho interminável em andamento. Você pode ajudar a melhorá-lo [escrevendo novas entradas](/pt-BR/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary) ou melhorando as já existentes.
diff --git a/files/pt-br/glossary/indexeddb/index.md b/files/pt-br/glossary/indexeddb/index.md
index 978f2e79039b64..26d10510f0024e 100644
--- a/files/pt-br/glossary/indexeddb/index.md
+++ b/files/pt-br/glossary/indexeddb/index.md
@@ -3,6 +3,8 @@ title: IndexedDB
 slug: Glossary/IndexedDB
 ---
 
+{{GlossarySidebar}}
+
 IndexedDB é uma {{glossary("API")}} de web para armazenar volumosas estruturas de dados dentro dos navegadores e indexá-los para buscas de alta performance. Sendo um [RDBMS](https://en.wikipedia.org/wiki/Relational_database_management_system) baseado em {{glossary("SQL")}}, IndexedDB é um sistema de banco de dados transacionais. Porém ele usa objetos {{glossary("JavaScript")}} ao invés de tabelas em colunas fixas para armazenar os dados.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/inline-level_content/index.md b/files/pt-br/glossary/inline-level_content/index.md
index 9372cfa266b987..51159c70484003 100644
--- a/files/pt-br/glossary/inline-level_content/index.md
+++ b/files/pt-br/glossary/inline-level_content/index.md
@@ -3,6 +3,8 @@ title: Elementos inline
 slug: Glossary/Inline-level_content
 ---
 
+{{GlossarySidebar}}
+
 ### Sumário
 
 "Inline" é uma categorização dos elementos do HTML, em contraste com os ["elementos de bloco"](/pt-BR/docs/HTML/Block-level_elements). Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline e bloco incluem:
diff --git a/files/pt-br/glossary/internet/index.md b/files/pt-br/glossary/internet/index.md
index 019098ebf24972..9a32b285050797 100644
--- a/files/pt-br/glossary/internet/index.md
+++ b/files/pt-br/glossary/internet/index.md
@@ -3,6 +3,8 @@ title: Internet
 slug: Glossary/Internet
 ---
 
+{{GlossarySidebar}}
+
 A Internet é a rede mundial de redes que utiliza o conjunto de protocolos da Internet (também chamado {{glossary("TCP")}}/{{glossary("IPv6","IP")}} dos seus dois mais importantes {{glossary("protocol","protocolos")}}).
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/ip_address/index.md b/files/pt-br/glossary/ip_address/index.md
index 4a55d788adcb48..b2acdae3ba85c9 100644
--- a/files/pt-br/glossary/ip_address/index.md
+++ b/files/pt-br/glossary/ip_address/index.md
@@ -3,6 +3,8 @@ title: Endereço IP
 slug: Glossary/IP_Address
 ---
 
+{{GlossarySidebar}}
+
 Um endereço IP é um número atribuído a cada dispositivo conectado a uma rede que usa o protocolo de Internet.
 
 "Endereço IP" geralmente refere-se a endereços {{Glossary("IPv4")}} de 32 bits até que o {{Glossary("IPv6")}} seja implantado de forma mais ampla.
diff --git a/files/pt-br/glossary/ipv4/index.md b/files/pt-br/glossary/ipv4/index.md
index a1c60da1979d30..75efdf856b7dc1 100644
--- a/files/pt-br/glossary/ipv4/index.md
+++ b/files/pt-br/glossary/ipv4/index.md
@@ -3,6 +3,8 @@ title: IPv4
 slug: Glossary/IPv4
 ---
 
+{{GlossarySidebar}}
+
 IPv4 é a quarta versão do {{Glossary("protocolo")}} de comunicação subjacente à {{glossary("Internet")}} e a primeira versão a ser amplamente implantada.
 
 Formalizada primeiramente em 1981, o IPv4 traça suas raízes para o trabalho de desenvolvimento inicial do ARPAnet. IPv4 é um protocolo sem conexão para ser usado na comutação de dados em redes da camada de enlace de dados (ethernet). {{glossary("IPv6")}} está gradualmente substituindo o IPv4 devido a problemas de segurança que o IPv4 possui e as limitações de seus campos de endereços. (Versão número 5 foi atribuído em 1979 para o experimental _Internet Stream Protocol_, que no entanto, nunca foi chamado de IPv5).
diff --git a/files/pt-br/glossary/ipv6/index.md b/files/pt-br/glossary/ipv6/index.md
index 7d1e1a532925c1..260846a7391de2 100644
--- a/files/pt-br/glossary/ipv6/index.md
+++ b/files/pt-br/glossary/ipv6/index.md
@@ -3,6 +3,8 @@ title: IPv6
 slug: Glossary/IPv6
 ---
 
+{{GlossarySidebar}}
+
 **IPv6** é a versão mais atual do {{glossary("protocol","protocolo")}} de comunicação subjacente da {{glossary("Internet")}}. Lentamente o IPv6 está substituindo o {{Glossary("IPv4")}}, dentre outras razões porque o IPv6 permite vários {{Glossary("Endereço IP","endereços IPs")}} diferentes.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/irc/index.md b/files/pt-br/glossary/irc/index.md
index 9240ec0738036d..98940c7b07b86f 100644
--- a/files/pt-br/glossary/irc/index.md
+++ b/files/pt-br/glossary/irc/index.md
@@ -3,6 +3,8 @@ title: IRC
 slug: Glossary/IRC
 ---
 
+{{GlossarySidebar}}
+
 O **IRC** (_Internet Relay Chat_) é um sistema de chat mundial que requer uma conexão à Internet e um cliente de IRC, que envia e recebe mensagens através do servidor de IRC.
 
 Projetado no final dos anos 80 por Jarrko Oikarinen, o IRC usa {{glossary ("TCP")}} e é um protocolo aberto. O servidor de IRC transmite mensagens para todos os usuários conectados a um dos muitos canais de IRC (cada um com seu próprio ID).
diff --git a/files/pt-br/glossary/iso/index.md b/files/pt-br/glossary/iso/index.md
index 351ed3551387d3..8c4d3454b78b34 100644
--- a/files/pt-br/glossary/iso/index.md
+++ b/files/pt-br/glossary/iso/index.md
@@ -3,6 +3,8 @@ title: ISO
 slug: Glossary/ISO
 ---
 
+{{GlossarySidebar}}
+
 A **Organização Internacional de Padronização,** popularmente conhecida como **ISO** (em inglês: International Organization for Standardization), é uma organização internacional que cria padrões/normas para cada tipo de indústria, visando uma melhor coordenação e união internacional. Atualmente 164 países fazem parte da ISO.
 
 ## Veja mais
diff --git a/files/pt-br/glossary/jank/index.md b/files/pt-br/glossary/jank/index.md
index a33b89af9cc0b5..e528c6e7fba548 100644
--- a/files/pt-br/glossary/jank/index.md
+++ b/files/pt-br/glossary/jank/index.md
@@ -3,4 +3,6 @@ title: Jank
 slug: Glossary/Jank
 ---
 
+{{GlossarySidebar}}
+
 **Jank** se refere à lentidão em uma interface de usuário, geralmente causado por execução de tarefas longas na Thread principal, o bloqueio de renderização, ou esforço demais do processador com processos em segundo plano.
diff --git a/files/pt-br/glossary/javascript/index.md b/files/pt-br/glossary/javascript/index.md
index 5ff9a4f61db63d..a603c0c355f347 100644
--- a/files/pt-br/glossary/javascript/index.md
+++ b/files/pt-br/glossary/javascript/index.md
@@ -3,6 +3,8 @@ title: JavaScript
 slug: Glossary/JavaScript
 ---
 
+{{GlossarySidebar}}
+
 ## Sumário
 
 JavaScript (ou "JS") é uma linguagem de programação utilizada principalmente para scripts dinâmicos do lado do cliente em páginas web, podendo também ser utilizada no lado do {{Glossary("Server","servidor")}}, usando um interpretador (em inglês: _runtime_) como o [Node.js](https://nodejs.org/).
diff --git a/files/pt-br/glossary/jpeg/index.md b/files/pt-br/glossary/jpeg/index.md
index 3c036d44b5333f..c15f9bcbb0f434 100644
--- a/files/pt-br/glossary/jpeg/index.md
+++ b/files/pt-br/glossary/jpeg/index.md
@@ -3,6 +3,8 @@ title: JPEG
 slug: Glossary/JPEG
 ---
 
+{{GlossarySidebar}}
+
 **JPEG** (_Joint Photographic Experts Group_) é um método de compreensão com perda geralmente usado para imagens digitais.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/json/index.md b/files/pt-br/glossary/json/index.md
index aba597efb969e4..b94a43933001a6 100644
--- a/files/pt-br/glossary/json/index.md
+++ b/files/pt-br/glossary/json/index.md
@@ -3,6 +3,8 @@ title: JSON
 slug: Glossary/JSON
 ---
 
+{{GlossarySidebar}}
+
 _JavaScript Object Notation_ (**JSON**) é um formato de intercâmbio de dados. Embora não seja um subconjunto estrito, JSON se assemelha a um subconjunto da sintaxe {{Glossary("JavaScript")}}. Embora muitas linguagens de programação suportem JSON, é especialmente útil para aplicativos baseados em JavaScript, incluindo sites e extensões de navegador.
 
 JSON pode representar números, booleanos, strings, `null`, arrays (sequências ordenadas de valores) e objetos (mapeamentos de valores de strings) compostos por esses valores (ou de outros arrays e objetos). O JSON não representa nativamente tipos de dados mais complexos, como funções, expressões regulares, datas e assim por diante. (Os objetos de data, por padrão, serializam para uma string contendo a data no formato ISO, para que as informações não sejam completamente perdidas.) Se você precisar de JSON para representar tipos de dados adicionais, transforme os valores à medida que são serializados ou antes de serem desserializados.
diff --git a/files/pt-br/glossary/key/index.md b/files/pt-br/glossary/key/index.md
index e737d53d110cc1..3efec7434b9b5c 100644
--- a/files/pt-br/glossary/key/index.md
+++ b/files/pt-br/glossary/key/index.md
@@ -3,6 +3,8 @@ title: Key
 slug: Glossary/Key
 ---
 
+{{GlossarySidebar}}
+
 Uma key é uma parte de informação utilizada por um {{Glossary("cipher")}} para {{Glossary("encryption")}} e/ou {{Glossary("decryption")}}.Mensagens criptografadas devem permanecer seguras mesmo se tudo envolvendo o {{Glossary("cryptosystem")}}, com exceção da key, for de caráter público.
 
 Em {{Glossary("symmetric-key cryptography")}}, a mesma chave é utilizada para criptografar e descriptografar. Em {{Glossary("public-key cryptography")}}, existem keys relacionadas conhecidas como keys públicas e keys privadas. A key pública é disponibilizada gratuitamente, enquanto, a key privada é mantida "em segredo". A key pública é capaz de criptografar mensagens as quais apenas a key privada correspondente é capaz de descriptografar, e vice-versa.
diff --git a/files/pt-br/glossary/keyword/index.md b/files/pt-br/glossary/keyword/index.md
index b0e40ab5e806e2..4f1b155e0d47da 100644
--- a/files/pt-br/glossary/keyword/index.md
+++ b/files/pt-br/glossary/keyword/index.md
@@ -3,6 +3,8 @@ title: Palavra-chave
 slug: Glossary/Keyword
 ---
 
+{{GlossarySidebar}}
+
 Uma **palavra-chave** é a palavra ou a frase que descreve conteúdo. Palavras-chave on-line são utilizadas como pistas para buscadores ou como um conjunto de palavras que identifica e sintetiza o conteúdo dos sites.
 
 Quando você usa uma máquina de busca, utiliza palavras ou expressões para especificar o conteúdo que está procurando e, como resultado, a máquina de busca retorna endereços e páginas relevantes para os termos apresentados. Para resultados mais apurados, tente utilizar palavras mais específicas, a exemplo "Blue Mustang GTO" ao invés de simplesmente "Mustang". Páginas de internet também utilizam palavras na forma de meta tags (na seção {{htmlelement("head")}} para descrever o conteúdo da página, assim os buscadores podem identificar e organizar de forma melhorada as páginas da internet.
diff --git a/files/pt-br/glossary/localization/index.md b/files/pt-br/glossary/localization/index.md
index 8059968efc71cb..241aeaed75e499 100644
--- a/files/pt-br/glossary/localization/index.md
+++ b/files/pt-br/glossary/localization/index.md
@@ -3,6 +3,8 @@ title: Localização
 slug: Glossary/Localization
 ---
 
+{{GlossarySidebar}}
+
 Localização (L10n) é o processo de tradução de interfaces de software a partir de uma língua para outra e adaptá-lo para atender a uma cultura estrangeira. Esses recursos são para qualquer pessoa com interesse nos aspectos técnicos envolvidos na localização. Eles são para os desenvolvedores e todos os colaboradores.
 
 ## Documentação
diff --git a/files/pt-br/glossary/markup/index.md b/files/pt-br/glossary/markup/index.md
index 32609add9b9c9e..731bcd21cb8715 100644
--- a/files/pt-br/glossary/markup/index.md
+++ b/files/pt-br/glossary/markup/index.md
@@ -3,6 +3,8 @@ title: marcação
 slug: Glossary/Markup
 ---
 
+{{GlossarySidebar}}
+
 Uma linguagem de marcação é aquela projetada para definir e apresentar textos.
 [HTML](/pt-BR/docs/Glossario/HTML) (Linguagem de Marcação de Hipertexto), é um exemplo de linguagem
 de marcação.
diff --git a/files/pt-br/glossary/metadata/index.md b/files/pt-br/glossary/metadata/index.md
index b78fd0cf7a134a..e4b5ec53739918 100644
--- a/files/pt-br/glossary/metadata/index.md
+++ b/files/pt-br/glossary/metadata/index.md
@@ -3,6 +3,8 @@ title: Metadata
 slug: Glossary/Metadata
 ---
 
+{{GlossarySidebar}}
+
 Os **metadados** são — em sua definição mais simples — dados que descrevem dados. Por exemplo, um documento {{glossary("HTML")}} é um dado, mas o HTML, também, pode conter metadados em seu elemento {{htmlelement("head")}} que descreve o documento — por exemplo, quem o escreveu e seu resumo.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/mozilla_firefox/index.md b/files/pt-br/glossary/mozilla_firefox/index.md
index c1d1932f6b46f6..3c9c6d01763335 100644
--- a/files/pt-br/glossary/mozilla_firefox/index.md
+++ b/files/pt-br/glossary/mozilla_firefox/index.md
@@ -3,6 +3,8 @@ title: Mozilla Firefox
 slug: Glossary/Mozilla_Firefox
 ---
 
+{{GlossarySidebar}}
+
 Mozilla Firefox é um {{Glossary("browser")}} open-source cujo desenvolvimento é supervisionado pela Mozilla Corporation. Firefox roda em Windows, OS X, Linux, e Android.
 
 O primeiro lançamento foi em Novembro de 2004, Firefox é completamente customizável com temas, plug-ins, e [complementos](/pt-BR/docs/Mozilla/Add-ons). Firefox usa o {{glossary("Gecko")}} para renderizar páginas web, e implementa ambos padrões corrente e a vir da Web.
diff --git a/files/pt-br/glossary/mutable/index.md b/files/pt-br/glossary/mutable/index.md
index 2be2703514ee4c..52e26d2938fa92 100644
--- a/files/pt-br/glossary/mutable/index.md
+++ b/files/pt-br/glossary/mutable/index.md
@@ -3,6 +3,8 @@ title: Mutável
 slug: Glossary/Mutable
 ---
 
+{{GlossarySidebar}}
+
 _Mutável_ é o tipo da variável que pode ser alterada. Em {{glossary("JavaScript")}}, somente {{Glossary("Object","objetos")}} e {{Glossary("Array","arrays")}} são mutáveis, {{Glossary("primitive", "valores primitivos")}} não.
 
 (Você _pode_ fazer o nome da variável apontar para um novo valor, mas o valor anterior continua na memória. Logo, a necessidade da coleta de lixo, "garbage collection")
diff --git a/files/pt-br/glossary/node.js/index.md b/files/pt-br/glossary/node.js/index.md
index d717540fdd3974..72b7a4b6276851 100644
--- a/files/pt-br/glossary/node.js/index.md
+++ b/files/pt-br/glossary/node.js/index.md
@@ -3,6 +3,8 @@ title: Node.js
 slug: Glossary/Node.js
 ---
 
+{{GlossarySidebar}}
+
 Node.js é um ambiente de execução multi-plataforma em {{Glossary("JavaScript")}} que permite aos desenvolvedores produzirem aplicações para rede e {{Glossary("Servidor","server-side")}} usando o JavaScript.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/null/index.md b/files/pt-br/glossary/null/index.md
index 297aac59dea2e2..1626af261ddaea 100644
--- a/files/pt-br/glossary/null/index.md
+++ b/files/pt-br/glossary/null/index.md
@@ -3,6 +3,8 @@ title: Nulo
 slug: Glossary/Null
 ---
 
+{{GlossarySidebar}}
+
 Em ciência da computação, um valor nulo representa uma referencia que aponta, geralmente de maneira intencional, para um objeto ou endereço de memória inválido ou inexistente. O significado do valor nulo varia entre as implementações das linguagens.
 
 Em {{Glossary("JavaScript")}}, o null é um dos {{Glossary("Primitivo", "tipos primitivos")}}.
diff --git a/files/pt-br/glossary/number/index.md b/files/pt-br/glossary/number/index.md
index 264f8e53300ec8..4c22a313648fd4 100644
--- a/files/pt-br/glossary/number/index.md
+++ b/files/pt-br/glossary/number/index.md
@@ -3,6 +3,8 @@ title: Number
 slug: Glossary/Number
 ---
 
+{{GlossarySidebar}}
+
 No {{Glossary("JavaScript")}}, **Number** é um tipo de dado numérico no [double-precision 64-bit floating point format (IEEE 754)](http://en.wikipedia.org/wiki/Double_precision_floating-point_format). Em outras linguagens de programação diferentes tipos numéricos podem existir, por exemplo: Integers (Inteiros), Floats (Pontos Flutuantes), Doubles (Dobros), ou Bignums.
 
 ## Leia mais
diff --git a/files/pt-br/glossary/object/index.md b/files/pt-br/glossary/object/index.md
index 025a3c9af498bf..659fac6987f669 100644
--- a/files/pt-br/glossary/object/index.md
+++ b/files/pt-br/glossary/object/index.md
@@ -3,6 +3,8 @@ title: Objeto
 slug: Glossary/Object
 ---
 
+{{GlossarySidebar}}
+
 [Objeto](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object) refere-se a uma estrutura de dados contendo dados e instruções para se trabalhar com estes dados. Objetos algumas vezes se referem a coisas do mundo real, por exemplo um objeto de carro ou um mapa em um jogo de corrida. {{glossary("JavaScript")}}, Java, C++, Python, e Ruby são exemplos de Linguagens orientadas à objeto ({{glossary("OOP","object-oriented programming")}}).
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/oop/index.md b/files/pt-br/glossary/oop/index.md
index 93f4eed48c83e9..76090c3b0c8b26 100644
--- a/files/pt-br/glossary/oop/index.md
+++ b/files/pt-br/glossary/oop/index.md
@@ -3,6 +3,8 @@ title: OOP
 slug: Glossary/OOP
 ---
 
+{{GlossarySidebar}}
+
 **OOP** (Object-Oriented Programming) é uma abordagem na programação em qual os dados são encapsulados em **{{glossary("object","objects")}}** e o proprio objeto é operado, em vez de suas partes componentes.
 
 {{glossary("JavaScript")}} é altamente orientado à objeto. Isto segue um modelo baseado em **prototypes** ([as opposed to class-based](/pt-BR/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages)).
diff --git a/files/pt-br/glossary/opengl/index.md b/files/pt-br/glossary/opengl/index.md
index a80377ed967ab5..8107e0f08a4d40 100644
--- a/files/pt-br/glossary/opengl/index.md
+++ b/files/pt-br/glossary/opengl/index.md
@@ -3,6 +3,8 @@ title: OpenGL
 slug: Glossary/OpenGL
 ---
 
+{{GlossarySidebar}}
+
 **OpenGL** (**Open Graphics Library**) é uma API (_Application Programming Interface_) multiplataforma e multilíngue para renderizar gráficos vetoriais 2D e 3D. A API é normalmente usada para interagir com uma GPU (_Graphics Processing Unit_) para obter renderização acelerada por hardware.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/opera_browser/index.md b/files/pt-br/glossary/opera_browser/index.md
index 3cad2f610d5fb9..0e2878ade20fa8 100644
--- a/files/pt-br/glossary/opera_browser/index.md
+++ b/files/pt-br/glossary/opera_browser/index.md
@@ -3,6 +3,8 @@ title: Navegador Opera
 slug: Glossary/Opera_Browser
 ---
 
+{{GlossarySidebar}}
+
 **Opera** é o quinto {{glossary("navegador")}} web mais usado, publicamente lançado em 1996 e inicialmente executando somente em Windows. Opera usa {{glossary("Blink")}} como seu mecanismo de layout desde 2013 (antes disso, {{glossary("Presto")}}). Opera também existe nas versões móveis e tablets.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/operator/index.md b/files/pt-br/glossary/operator/index.md
index 6ea4ef9ffa66a6..ff9929da60e57a 100644
--- a/files/pt-br/glossary/operator/index.md
+++ b/files/pt-br/glossary/operator/index.md
@@ -3,6 +3,8 @@ title: Operador
 slug: Glossary/Operator
 ---
 
+{{GlossarySidebar}}
+
 **Sintaxe** reservada que consiste em pontuação ou caracteres alfanuméricos que executam a funcionalidade incorporada. Por exemplo, em JavaScript, o operador de adição ("+") soma números juntos e concatena strings, enquanto o operador "não" ("!") nega uma expressão — por exemplo, fazendo uma declaração `verdadeira` retornar `falso`.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/origin/index.md b/files/pt-br/glossary/origin/index.md
index d26ea65f5b11a8..209bf855e3fb62 100644
--- a/files/pt-br/glossary/origin/index.md
+++ b/files/pt-br/glossary/origin/index.md
@@ -3,6 +3,8 @@ title: Origem
 slug: Glossary/Origin
 ---
 
+{{GlossarySidebar}}
+
 O conteúdo de **origem** é definido pelo _esquema_ (protocolo), _host_ (domínio), e _porta_ da {{Glossary("URL")}} usada para acessá-lo. Dois objetos tem a mesma origem somente quando o esquema, host, e porta batem.
 
 Algumas operações são restritas para conteúdos de mesma origem, e essa restrição pode ser ultrapassada usando {{Glossary("CORS")}}.
@@ -23,5 +25,3 @@ Algumas operações são restritas para conteúdos de mesma origem, e essa restr
 ## Aprenda mais
 
 Veja [Same-origin policy](/pt-BR/docs/Web/Security/Same-origin_policy) para mais informações.
-
-{{QuickLinksWithSubpages("/pt-BR/docs/Glossary")}}
diff --git a/files/pt-br/glossary/ota/index.md b/files/pt-br/glossary/ota/index.md
index da287b0aa8c265..c61ffc99a90431 100644
--- a/files/pt-br/glossary/ota/index.md
+++ b/files/pt-br/glossary/ota/index.md
@@ -3,6 +3,8 @@ title: OTA
 slug: Glossary/OTA
 ---
 
+{{GlossarySidebar}}
+
 _Over-The-Air_ (**OTA** ou "Pelo-Ar") refere-se à atualização automática de programas de dispositivos conectados a partir de um servidor central. Todos os proprietários de dispositivos recebendo um determinado conjunto de atualizações estão sob o mesmo "canal"; e cada dispositivo pode amiúde acessar vários canais (e.g. para "builds" de produção ou engenharia).
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/php/index.md b/files/pt-br/glossary/php/index.md
index 005b5477d1e659..5f32ae5355621c 100644
--- a/files/pt-br/glossary/php/index.md
+++ b/files/pt-br/glossary/php/index.md
@@ -3,6 +3,8 @@ title: PHP
 slug: Glossary/PHP
 ---
 
+{{GlossarySidebar}}
+
 PHP (um inicialismo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script do lado do servidor de código aberto que pode ser utilizada junto com HTML para construir aplicações web e sites dinâmicos.
 
 HTML pode ser usando dentro do PHP, mas não vice versa.
diff --git a/files/pt-br/glossary/pixel/index.md b/files/pt-br/glossary/pixel/index.md
index 23795e80a10b2d..3c5dd6cb949c92 100644
--- a/files/pt-br/glossary/pixel/index.md
+++ b/files/pt-br/glossary/pixel/index.md
@@ -3,6 +3,8 @@ title: Pixel
 slug: Glossary/Pixel
 ---
 
+{{GlossarySidebar}}
+
 Um pixel é o menor elemento de um dispositivo de exibição como, por exemplo, um monitor.
 
 A resolução de exibição pode ser expressada utilizando-se pixels como unidade. Por exemplo, uma resolução de "800x600" pixels significa que podem ser exibidos 800 pixels na largura e 600 pixels na altura.
diff --git a/files/pt-br/glossary/polyfill/index.md b/files/pt-br/glossary/polyfill/index.md
index e1f3dfb40ad03f..f419764e8d2f65 100644
--- a/files/pt-br/glossary/polyfill/index.md
+++ b/files/pt-br/glossary/polyfill/index.md
@@ -3,6 +3,8 @@ title: Polyfill
 slug: Glossary/Polyfill
 ---
 
+{{GlossarySidebar}}
+
 Um polyfill é um pedaço de código (geralmente JavaScript na Web) usado para fornecer funcionalidades modernas em navegadores mais antigos que não o suportam nativamente.
 
 Por exemplo, um polyfill pode ser usado para imitar a funcionalidade de um elemento HTML Canvas no Microsoft Internet Explorer 7, usando um plugin Silverlight, ou imitar o suporte para unidades rem CSS, ou {{cssxref ("text-shadow")}}, ou o que você quiser.
diff --git a/files/pt-br/glossary/port/index.md b/files/pt-br/glossary/port/index.md
index 9b4fe5e6f9e268..fa5194b30c0c8b 100644
--- a/files/pt-br/glossary/port/index.md
+++ b/files/pt-br/glossary/port/index.md
@@ -3,6 +3,8 @@ title: Port
 slug: Glossary/Port
 ---
 
+{{GlossarySidebar}}
+
 Porta
 
 Para um computador se conectar à rede mundial de computadores com um endereço de IP(Protocolo de internet - Internet Protocol),
diff --git a/files/pt-br/glossary/preflight_request/index.md b/files/pt-br/glossary/preflight_request/index.md
index a8874b840c1e1d..45a7049163d088 100644
--- a/files/pt-br/glossary/preflight_request/index.md
+++ b/files/pt-br/glossary/preflight_request/index.md
@@ -3,6 +3,8 @@ title: Requisição Preflight
 slug: Glossary/Preflight_request
 ---
 
+{{GlossarySidebar}}
+
 Uma requisição _preflight_ de [CORS](/pt-BR/docs/Glossary/CORS) é uma requisição de {{Glossary ("CORS")}} que verifica se o protocolo {{Glossary ("CORS")}} é entendido e se o servidor aguarda o método e cabeçalhos('headers') especificados.
 
 É uma requisição {{HTTPMethod("OPTIONS")}}, que usa três cabeçalhos de solicitação HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, e o cabeçalho {{HTTPHeader("Origin")}}.
diff --git a/files/pt-br/glossary/primitive/index.md b/files/pt-br/glossary/primitive/index.md
index 2609e2ef8dd591..7b11d8b945b90b 100644
--- a/files/pt-br/glossary/primitive/index.md
+++ b/files/pt-br/glossary/primitive/index.md
@@ -3,6 +3,8 @@ title: Primitivo
 slug: Glossary/Primitive
 ---
 
+{{GlossarySidebar}}
+
 ## Resumo
 
 Um **primitivo** (valor primitivo, tipo de dados primitivo) é um dado que não é representado através de um {{Glossary("Objeto")}} e, por consequência, não possui métodos.
diff --git a/files/pt-br/glossary/progressive_web_apps/index.md b/files/pt-br/glossary/progressive_web_apps/index.md
index 4dff06ac3c3d84..787b90046a65d6 100644
--- a/files/pt-br/glossary/progressive_web_apps/index.md
+++ b/files/pt-br/glossary/progressive_web_apps/index.md
@@ -3,6 +3,8 @@ title: Progressive web apps
 slug: Glossary/Progressive_web_apps
 ---
 
+{{GlossarySidebar}}
+
 Progressive web apps é um termo usado para descrever o estado moderno do desenvolvimento de aplicações web. Isso envolve pegar web sites/apps que aproveitam de todas as melhores partes da Web - como descobertas por mecanismos de busca, tornando-se linkaveis via {{Glossary("URL")}}s, e trabalho em vários fatores de formas - e sobrecarregá-los com APIs modernas (como [Service Works](/pt-BR/docs/Web/API/Service_Worker_API) e [Push](/pt-BR/docs/Web/API/API_Push)) e funcionalidades que conferem outros benefícios comumente atribuídos para apps nativos.
 
 Essas funcionalidades incluem possibilidade de instalação, funcionamento offline e ser de fácil sincronização e reconexão do usuário com o servidor.
diff --git a/files/pt-br/glossary/property/css/index.md b/files/pt-br/glossary/property/css/index.md
index c490308c2a2716..3b1d44687876a2 100644
--- a/files/pt-br/glossary/property/css/index.md
+++ b/files/pt-br/glossary/property/css/index.md
@@ -3,6 +3,8 @@ title: Propriedade (CSS)
 slug: Glossary/Property/CSS
 ---
 
+{{GlossarySidebar}}
+
 Uma **propriedade CSS** é uma característica (como a cor) cujo valor define o aspecto de como o navegador deve exibir o elemento.
 
 Aqui está um exemplo de uma regra do CSS:
diff --git a/files/pt-br/glossary/property/index.md b/files/pt-br/glossary/property/index.md
index 01af72ec8fe3e3..a7567c57f1464b 100644
--- a/files/pt-br/glossary/property/index.md
+++ b/files/pt-br/glossary/property/index.md
@@ -3,6 +3,8 @@ title: Propriedade
 slug: Glossary/Property
 ---
 
+{{GlossarySidebar}}
+
 O termo **propriedade** **(property)** pode ter diversos siginificados depenedendo do contexto. Ele pode se referir a:
 
 {{GlossaryDisambiguation}}
diff --git a/files/pt-br/glossary/property/javascript/index.md b/files/pt-br/glossary/property/javascript/index.md
index 11f6af4da46d33..965bb957cccb00 100644
--- a/files/pt-br/glossary/property/javascript/index.md
+++ b/files/pt-br/glossary/property/javascript/index.md
@@ -3,6 +3,8 @@ title: Propriedade (JavaScript)
 slug: Glossary/Property/JavaScript
 ---
 
+{{GlossarySidebar}}
+
 Uma **propriedade Javascript** é uma característica de um objeto, frequentemente descrita como atributos associados à uma estrutura de dados.
 
 Há dois tipos de propriedades:
diff --git a/files/pt-br/glossary/protocol/index.md b/files/pt-br/glossary/protocol/index.md
index e7df973a2d6275..6dcb2090153be8 100644
--- a/files/pt-br/glossary/protocol/index.md
+++ b/files/pt-br/glossary/protocol/index.md
@@ -3,6 +3,8 @@ title: Protocolo
 slug: Glossary/Protocol
 ---
 
+{{GlossarySidebar}}
+
 Um **protocolo** é um sistema de regras que define como o dado é trafegado dentro ou entre computadores. Comunicações entre dispositivos requer que estes concordem com o formato do dado que estiver sendo trafegado. O conjunto de regras que define esse formato é chamado de protocolo.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/prototype/index.md b/files/pt-br/glossary/prototype/index.md
index 3b61b067dad0c6..618f651324e470 100644
--- a/files/pt-br/glossary/prototype/index.md
+++ b/files/pt-br/glossary/prototype/index.md
@@ -3,6 +3,8 @@ title: Prototype
 slug: Glossary/Prototype
 ---
 
+{{GlossarySidebar}}
+
 A prototype é um modelo que exibe a aparência e o comportamento de um aplicativo ou produto no início do ciclo de vida do desenvolvimento.
 
 See [Inheritance and the prototype chain](/pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
diff --git a/files/pt-br/glossary/proxy_server/index.md b/files/pt-br/glossary/proxy_server/index.md
index f4bc35aa01e1bb..fcb03f7d04aa52 100644
--- a/files/pt-br/glossary/proxy_server/index.md
+++ b/files/pt-br/glossary/proxy_server/index.md
@@ -3,6 +3,8 @@ title: Proxy server
 slug: Glossary/Proxy_server
 ---
 
+{{GlossarySidebar}}
+
 Um **servidor proxy** é um computador ou programa intermediário usado ao navegar em conexões de internet diferentes. Eles facilitam o acesso ao conteúdo na rede mundial de computadores. Um proxy intercepta pedidos e exibe respostas; pode encaminhar os pedidos, ou não (por exemplo no caso de uma cache), e pode modificá-los (por exemplo alterando cabeçalhos, no limite entre duas redes)
 
 Um proxy pode estar no computador local do usuário, ou em qualquer lugar entre o computador do usuário e um servidor de destino na internet. Em geral, existem dois tipos principais de servidores proxy:
diff --git a/files/pt-br/glossary/pseudo-class/index.md b/files/pt-br/glossary/pseudo-class/index.md
index 9c8070cf006273..61be8a27d2fe0a 100644
--- a/files/pt-br/glossary/pseudo-class/index.md
+++ b/files/pt-br/glossary/pseudo-class/index.md
@@ -3,6 +3,8 @@ title: Pseudo-class
 slug: Glossary/Pseudo-class
 ---
 
+{{GlossarySidebar}}
+
 No CSS, um seletor do tipo **pseudo-classe** referencia um elemento dependendo do seu estado e não de informações da arvore do documento. Por exemplo, o seletor a{{ cssxref(":visited") }} aplica estilo somente aos links que o usuário já visitou
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/pseudo-element/index.md b/files/pt-br/glossary/pseudo-element/index.md
index 0992e75d7078f6..9eed644fb9603d 100644
--- a/files/pt-br/glossary/pseudo-element/index.md
+++ b/files/pt-br/glossary/pseudo-element/index.md
@@ -3,6 +3,8 @@ title: Pseudo-element
 slug: Glossary/Pseudo-element
 ---
 
+{{GlossarySidebar}}
+
 Em CSS, um seletor **pseudo-element** aplica estilos em partes do conteúdo do seu documento em cenários onde não há elementos HTML específicos para selecionar. Por exemplo, em vez de colocar a primeira letra para cada parágrafo em seu próprio elemento. você pode estilizá-los todos com `p`{{ Cssxref("::first-letter") }}.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/python/index.md b/files/pt-br/glossary/python/index.md
index 615e35f7f37aad..63e89b0c49f4bf 100644
--- a/files/pt-br/glossary/python/index.md
+++ b/files/pt-br/glossary/python/index.md
@@ -3,6 +3,8 @@ title: Python
 slug: Glossary/Python
 ---
 
+{{GlossarySidebar}}
+
 **Python** é uma linguagem de programação de alto nível e de uso geral. Ele usa uma abordagem multi-paradigma, o que significa que ele suporta procedural, orientação a objetos, e algumas construções de programação funcional.
 
 Ele foi criado por Guido van Rossum como sucessor de outra linguagem (chamado ABC) entre 1985 e 1990, e atualmente é usado em uma grande variedade de domínios, como desenvolvimento web, como linguagem de script para outras aplicações e para construir aplicações reais.
diff --git a/files/pt-br/glossary/recursion/index.md b/files/pt-br/glossary/recursion/index.md
index ccc88b4203a002..efb36d9f05ff32 100644
--- a/files/pt-br/glossary/recursion/index.md
+++ b/files/pt-br/glossary/recursion/index.md
@@ -3,6 +3,8 @@ title: Recursão
 slug: Glossary/Recursion
 ---
 
+{{GlossarySidebar}}
+
 Um ato de uma função invocando a si mesma. A recursão é usada para resolver problemas que contêm subproblemas menores. Uma função recursiva pode receber dois inputs (entradas): um caso base (termina a recursão) ou um caso recursivo (continua a recursão).
 
 ## Leia mais
diff --git a/files/pt-br/glossary/reflow/index.md b/files/pt-br/glossary/reflow/index.md
index 98aa7dfa4dab8f..5bbf613029a741 100644
--- a/files/pt-br/glossary/reflow/index.md
+++ b/files/pt-br/glossary/reflow/index.md
@@ -3,6 +3,8 @@ title: Reflow
 slug: Glossary/Reflow
 ---
 
+{{GlossarySidebar}}
+
 **Reflow** acontece quando o {{glossary("browser")}} deve processar e desenhar parte ou toda a página novamente, como após uma atualização em um site interativo.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/request_header/index.md b/files/pt-br/glossary/request_header/index.md
index d458cce37eb26f..e02ae6fe0af627 100644
--- a/files/pt-br/glossary/request_header/index.md
+++ b/files/pt-br/glossary/request_header/index.md
@@ -3,6 +3,8 @@ title: Cabeçalho de Requisição
 slug: Glossary/Request_header
 ---
 
+{{GlossarySidebar}}
+
 Um **cabeçalho de requisição** é um {{glossary("header", "cabeçalho HTTP")}} que pode ser utilizado em uma requisição HTTP, e não é relacionado ao conteúdo da mensagem. Cabeçalhos de requisição, como {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language", "Accept-*")}}, ou ainda {{HTTPHeader("If-Modified-Since", "If-*")}} permitem realizar requisições condicionais; outros como {{HTTPHeader("Cookie")}}, {{HTTPHeader("User-Agent")}} ou {{HTTPHeader("Referer")}} deixa o contexto mais preciso para que o servidor possa adaptar melhor a resposta.
 
 Nem todos os cabeçalhos exibidos em uma requisição são _cabeçalhos de requisição._ Por exemplo, o {{HTTPHeader("Content-Length")}} exibido em uma requisição {{HTTPMethod("POST")}} é na realidade uma {{glossary("entity header")}}, que referencia o tamanho do corpo da mensagem de requisição. Porém, esses _cabeçalhos de entidade_ muitas vezes são chamados de _cabeçalhos de requisição_.
diff --git a/files/pt-br/glossary/responsive_web_design/index.md b/files/pt-br/glossary/responsive_web_design/index.md
index 710d34fda6f85a..08aa6e3d6dd41b 100644
--- a/files/pt-br/glossary/responsive_web_design/index.md
+++ b/files/pt-br/glossary/responsive_web_design/index.md
@@ -3,6 +3,8 @@ title: Web Design Responsivo
 slug: Glossary/Responsive_web_design
 ---
 
+{{GlossarySidebar}}
+
 _Web Design Responsivo_ (**RWD em Inglês**) é um conceito de desenvolvimento Web focado em fazer a experiência e comportamento de websites mais otimizada para todos os dispositivos, desde o desktop até um dispositivo móvel.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/rest/index.md b/files/pt-br/glossary/rest/index.md
index 8d264628e08f47..bb22e2e205f6c5 100644
--- a/files/pt-br/glossary/rest/index.md
+++ b/files/pt-br/glossary/rest/index.md
@@ -3,6 +3,8 @@ title: REST
 slug: Glossary/REST
 ---
 
+{{GlossarySidebar}}
+
 **REST** (Representational State Transfer) refere-se a um grupo de restrições de design dentro da arquitetura de software que geram sistemas distribuídos eficientes, confiáveis e escaláveis. Um sistema é denominado RESTful quando adere a todas essas restrições.
 
 A ideia básica do REST é que um recurso, por exemplo um documento, seja transferido com seu estado bem definido, padronização de operações e formatos, ou serviços que se autodenominem RESTful, quando modificam diretamente o tipo de documento, ao invés de desencadear ações em algum lugar.
diff --git a/files/pt-br/glossary/ruby/index.md b/files/pt-br/glossary/ruby/index.md
index a4fe308946c95a..e4249d4aad8696 100644
--- a/files/pt-br/glossary/ruby/index.md
+++ b/files/pt-br/glossary/ruby/index.md
@@ -3,6 +3,8 @@ title: Ruby
 slug: Glossary/Ruby
 ---
 
+{{GlossarySidebar}}
+
 _Ruby_ é uma linguagem de programação de código aberto. Em um contexto {{glossary("world wide web","Web")}}, Ruby é geralmente usado em servidores com o framework _Ruby On Rails_ (ROR) para produzir websites/apps.
 
 ## Aprenda Mais
diff --git a/files/pt-br/glossary/safe/index.md b/files/pt-br/glossary/safe/index.md
index f18016bcdddf4b..bd64cb9277c368 100644
--- a/files/pt-br/glossary/safe/index.md
+++ b/files/pt-br/glossary/safe/index.md
@@ -3,6 +3,8 @@ title: Seguro
 slug: Glossary/Safe
 ---
 
+{{GlossarySidebar}}
+
 Um método HTTP é **seguro** se ele não altera o estado do servidor. Em outras palavras, um método é seguro se ele leva a uma operação de somente leitura. Diversos métodos de HTTP são seguros: {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, ou {{HTTPMethod("OPTIONS")}}. Todos os métodos seguros também são {{glossary("idempotente")}}s, mas nem todos os métodos idempotentes são seguros. Por exemplo, {{HTTPMethod("PUT")}} e {{HTTPMethod("DELETE")}} são ambos idempotentes, entretanto são inseguros.
 
 Mesmo se métodos seguros possuem a semântica de somente leitura, servidores podem alterar o seu estado (e.g., eles podem manter _log_ ou estatísticas). O que é importante aqui, é de que chamando um método seguro, o cliente não requer que o servidor mude seu estado, e portanto não gerará carga desnecessária ao servidor. Navegadores podem chamar métodos seguros sem medo de causarem nenhum dano ao servidor: isso permite a eles a possibilidade de fazer atividades como pré-carregamento sem nenhum risco. _Web crawlers_ também usam métodos seguros.
diff --git a/files/pt-br/glossary/scope/index.md b/files/pt-br/glossary/scope/index.md
index e608dad824f5a7..3c3fdea5d6c228 100644
--- a/files/pt-br/glossary/scope/index.md
+++ b/files/pt-br/glossary/scope/index.md
@@ -3,6 +3,8 @@ title: Escopo
 slug: Glossary/Scope
 ---
 
+{{GlossarySidebar}}
+
 É o contexto atual de {{glossary("execute","execução")}}, em que {{glossary("valor","valores")}} e expressões são "visíveis" ou podem ser referenciadas. Se uma variável ou outra expressão não estiver "no escopo atual", então não está disponível para uso. Os escopos também podem ser em camadas em uma hierarquia, de modo que os escopos filhos tenham acesso aos escopos pais, mas não vice-versa.
 
 Uma {{glossary("function")}} serve como um procedimento em {{glossary("JavaScript")}}, e portanto, cria um escopo, de modo que (por exemplo) uma variável definida exclusivamente dentro da função não pode ser acessada de fora da função ou dentro de outras funções.
diff --git a/files/pt-br/glossary/sdp/index.md b/files/pt-br/glossary/sdp/index.md
index fd1c67a3a76729..bba971ab56013f 100644
--- a/files/pt-br/glossary/sdp/index.md
+++ b/files/pt-br/glossary/sdp/index.md
@@ -3,6 +3,8 @@ title: SDP
 slug: Glossary/SDP
 ---
 
+{{GlossarySidebar}}
+
 **SDP** (Session Description {{glossary("Protocol")}}) é o padrão que descreve uma conexão {{Glossary("P2P","ponto a ponto")}}. SDP contém o {{Glossary("codec")}}, o endereço de origem e as informações de tempo de áudio e vídeo.
 
 Aqui está uma mensagem SDP típica:
diff --git a/files/pt-br/glossary/self-executing_anonymous_function/index.md b/files/pt-br/glossary/self-executing_anonymous_function/index.md
index 1e0d7f8642396f..1bac65dda1c39d 100644
--- a/files/pt-br/glossary/self-executing_anonymous_function/index.md
+++ b/files/pt-br/glossary/self-executing_anonymous_function/index.md
@@ -3,6 +3,8 @@ title: Self-Executing Anonymous Function
 slug: Glossary/Self-Executing_Anonymous_Function
 ---
 
+{{GlossarySidebar}}
+
 (Self-Executing Anonymous Function) é uma função {{glossary("JavaScript")}} que é executada assim que definida. Ela também é conhecida como **IIFE** (Immediately Invoked Function Expression).
 
 Veja a página {{glossary("IIFE")}} para mais informações.
diff --git a/files/pt-br/glossary/semantics/index.md b/files/pt-br/glossary/semantics/index.md
index 0e09e7af31cbe6..8582615e12431c 100644
--- a/files/pt-br/glossary/semantics/index.md
+++ b/files/pt-br/glossary/semantics/index.md
@@ -3,6 +3,8 @@ title: Semântica
 slug: Glossary/Semantics
 ---
 
+{{GlossarySidebar}}
+
 Na programação, a **Semântica** se refere ao _significado_ de um trecho de código — por exemplo, "que efeito tem a execução dessa linha de JavaScript?", Ou "que finalidade ou função esse elemento HTML tem" (em vez de "como ele se parece?").
 
 ## Semântica em JavaScript
diff --git a/files/pt-br/glossary/seo/index.md b/files/pt-br/glossary/seo/index.md
index b6bf984ea65557..d2447409d53dd0 100644
--- a/files/pt-br/glossary/seo/index.md
+++ b/files/pt-br/glossary/seo/index.md
@@ -3,6 +3,8 @@ title: SEO - Otimização dos Mecanismos de Buscas
 slug: Glossary/SEO
 ---
 
+{{GlossarySidebar}}
+
 **SEO** (Search Engine Optimization - Otimização dos Mecanismos de Pesquisa) é o processo de fazer com que um sítio fique mais visível nos resultados da procura, também denominado melhoramento na classificação da busca.
 
 Os mecanismos de pesquisa {{Glossary("Crawler", "crawl")}} vasculham a _web_ seguindo vínculos de uma página para outra (_link_) e listando os resultados encontrados. Quando se faz uma busca, o mecanismo de pesquisa exibe o conteúdo classificado. Os rastreadores seguem regras. Se você seguir essas regras, metodicamente, ao fazer uma SEO para um sítio, existirão melhores chances de que o mesmo apareça entre os primeiros resultados, aumentando o tráfego e as possibilidades de rendimentos (pelo comércio eletrônico e publicidade).
diff --git a/files/pt-br/glossary/server/index.md b/files/pt-br/glossary/server/index.md
index 6f635550b9d6ab..0e3cd60ac6185b 100644
--- a/files/pt-br/glossary/server/index.md
+++ b/files/pt-br/glossary/server/index.md
@@ -3,6 +3,8 @@ title: Servidor
 slug: Glossary/Server
 ---
 
+{{GlossarySidebar}}
+
 Um servidor hardware é um computador compartilhado em uma rede que provê serviços a clientes. Um servidor software é um programa que provê serviços a programas clientes.
 
 Os serviços são providos normalmente pela rede local ou por redes remotas. Programas cliente e servidor tradicionalmente se conectam enviando mensagens por meio de um {{glossary("protocolo")}}.
diff --git a/files/pt-br/glossary/sgml/index.md b/files/pt-br/glossary/sgml/index.md
index 3e3baabce54598..31e34733e0ee83 100644
--- a/files/pt-br/glossary/sgml/index.md
+++ b/files/pt-br/glossary/sgml/index.md
@@ -3,6 +3,8 @@ title: SGML
 slug: Glossary/SGML
 ---
 
+{{GlossarySidebar}}
+
 O _Standard Generalized Markup Language_ (**SGML**) é uma {{Glossary("ISO")}} especificação que veio para definir as declarações/sintaxe Linguagens de Marcação.
 
 On the web, {{Glossary("HTML")}} 4, {{Glossary("XHTML")}}, and {{Glossary("XML")}} are popular SGML-based languages. It is worth noting that since its fifth edition, HTML is no longer SGML-based and has its own parsing rules.
diff --git a/files/pt-br/glossary/sloppy_mode/index.md b/files/pt-br/glossary/sloppy_mode/index.md
index e7f61fd02d09a9..efd8d7335cbf78 100644
--- a/files/pt-br/glossary/sloppy_mode/index.md
+++ b/files/pt-br/glossary/sloppy_mode/index.md
@@ -3,6 +3,8 @@ title: Sloppy mode
 slug: Glossary/Sloppy_mode
 ---
 
+{{GlossarySidebar}}
+
 A partir do {{Glossary("ECMAScript")}} 5 é possível optar pelo novo [strict mode](/pt-BR/docs/Web/JavaScript/Reference/Strict_mode) (modo estrito), que altera a semântica do JavaScript de várias maneiras para melhorar sua resiliência e facilitar a compreensão do que está acontecendo quando há problemas.
 
 O modo normal e non-strict (não estrito) do JavaScript é às vezes chamado de **sloppy mode** (modo desleixado, literalmente). Esta não é uma designação oficial, mas você provavelmente irá se deparar com ela se passar algum tempo escrevendo código JavaScript.
diff --git a/files/pt-br/glossary/stacking_context/index.md b/files/pt-br/glossary/stacking_context/index.md
index e114ca21b7bbc0..4ab9843bc40e17 100644
--- a/files/pt-br/glossary/stacking_context/index.md
+++ b/files/pt-br/glossary/stacking_context/index.md
@@ -3,6 +3,8 @@ title: Stacking context
 slug: Glossary/Stacking_context
 ---
 
+{{GlossarySidebar}}
+
 **Stacking context** refere-se refere a como elementos de uma página se empilham sobre outros elementos, assim como você pode organizar cards em cima de sua mesa, lado a lado ou sobrepostas.
 
 ## Leia mais
diff --git a/files/pt-br/glossary/statement/index.md b/files/pt-br/glossary/statement/index.md
index 4e9101ba583be0..4bc416a6d98814 100644
--- a/files/pt-br/glossary/statement/index.md
+++ b/files/pt-br/glossary/statement/index.md
@@ -3,6 +3,8 @@ title: Declaração
 slug: Glossary/Statement
 ---
 
+{{GlossarySidebar}}
+
 Em uma linguagem de programação, uma **declaração** é uma linha de código que dá comando para execução de uma tarefa. Cada programa é composto por uma sequência de declarações.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/string/index.md b/files/pt-br/glossary/string/index.md
index ab08b9e753fcc1..b2eed8ebd72e98 100644
--- a/files/pt-br/glossary/string/index.md
+++ b/files/pt-br/glossary/string/index.md
@@ -3,6 +3,8 @@ title: String
 slug: Glossary/String
 ---
 
+{{GlossarySidebar}}
+
 Em qualquer linguagem de programação, uma string é uma sequência de {{Glossary("character","caracteres")}} usados para representar texto
 
 Em {{Glossary("JavaScript")}}, uma String é um dos {{Glossary("Primitive", "valores primitivos")}} e o objeto {{jsxref("String")}} é um {{Glossary("wrapper")}} em cima do tipo primitivo string.
diff --git a/files/pt-br/glossary/svg/index.md b/files/pt-br/glossary/svg/index.md
index 46a94735d19a80..758b91d190f5c9 100644
--- a/files/pt-br/glossary/svg/index.md
+++ b/files/pt-br/glossary/svg/index.md
@@ -3,6 +3,8 @@ title: SVG
 slug: Glossary/SVG
 ---
 
+{{GlossarySidebar}}
+
 _Scalable Vector Graphics_ (**SVG**) é um formato de imagem vetorial 2D baseado em uma sintaxe {{Glossary("XML")}}.
 
 A {{Glossary("W3C")}} iniciou o trabalho no SVG no final dos anos 1990, mas o SVG só se tornou popular quando o {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 foi lançado com suporte a SVG. Atualmente a maioria dos {{Glossary("browser","navegadores")}} suportam SVG.
diff --git a/files/pt-br/glossary/synchronous/index.md b/files/pt-br/glossary/synchronous/index.md
index d8e2441741a460..025088c5f7cfff 100644
--- a/files/pt-br/glossary/synchronous/index.md
+++ b/files/pt-br/glossary/synchronous/index.md
@@ -3,6 +3,8 @@ title: Síncrono
 slug: Glossary/Synchronous
 ---
 
+{{GlossarySidebar}}
+
 **Síncrono** refere-se a comunicação em tempo real onde cada parte recebe ( e se necessário, processa e responde) mensagens instantaneamente (ou o mais próximo possível do instantâneo).
 
 Um exemplo humano é o telefone — durante uma chamada telefônica você costuma responder para outra pessoa imediatamente.
diff --git a/files/pt-br/glossary/tag/index.md b/files/pt-br/glossary/tag/index.md
index ea8a76ae653f70..6670a0e588cfb6 100644
--- a/files/pt-br/glossary/tag/index.md
+++ b/files/pt-br/glossary/tag/index.md
@@ -3,6 +3,8 @@ title: Tag
 slug: Glossary/Tag
 ---
 
+{{GlossarySidebar}}
+
 Em {{Glossary("HTML")}} a tag é usada para criar um {{Glossary("element", "elemento")}}. O **nome** de um elemento HTML é o nome usado entre colchetes angulares como "\<p>" para criar parágrafos. Note que ao fechar uma tag ela tem uma barra antes de seu nome, "\</p>" , e que em elementos vazios a tag final não é requirida e nem permitida. Se os {{Glossary("Attribute", "atributos")}} não forem mencionados, os valores padrões serão usados em cada caso.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/tcp/index.md b/files/pt-br/glossary/tcp/index.md
index 1f748a86540015..c1c18ed6b4d8ef 100644
--- a/files/pt-br/glossary/tcp/index.md
+++ b/files/pt-br/glossary/tcp/index.md
@@ -3,6 +3,8 @@ title: TCP
 slug: Glossary/TCP
 ---
 
+{{GlossarySidebar}}
+
 TCP (_Transmission Control Protocol_, em português, Protocolo de Controle de Transmissão) é um importante {{Glossary("protocol", "protocolo")}} de rede que permite dois _hosts_ se conectem e troquem dados. TCP garante a entrega de dados e pacotes na mesma ordem que foram enviados. Vint Cerf e Bob Kahn, que na época eram cientistas da DARPA (_Defense Advanced Research Projects Agency_, em português, Agência de Pesquisas em Projetos Avançados de Defesa), projetaram TCP na década de 1970.
 
 ## Saiba Mais
diff --git a/files/pt-br/glossary/three_js/index.md b/files/pt-br/glossary/three_js/index.md
index 137cb606ffccda..af9b472c6acd0d 100644
--- a/files/pt-br/glossary/three_js/index.md
+++ b/files/pt-br/glossary/three_js/index.md
@@ -3,6 +3,8 @@ title: Three js
 slug: Glossary/Three_js
 ---
 
+{{GlossarySidebar}}
+
 three.js é um motor {{Glossary("WebGL")}} baseado em {{Glossary("JavaScript")}} que pode executar jogos movidos com GPU ou outros aplicativos gráficos diretamente do {{Glossary("navegador")}}. A biblioteca three.js fornece várias funções e {{Glossary("API","APIs")}} para desenhar cenas 3D em seu navegador.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/tls/index.md b/files/pt-br/glossary/tls/index.md
index 23eb3ec24b15e1..93fe9341176df7 100644
--- a/files/pt-br/glossary/tls/index.md
+++ b/files/pt-br/glossary/tls/index.md
@@ -3,6 +3,8 @@ title: TLS
 slug: Glossary/TLS
 ---
 
+{{GlossarySidebar}}
+
 Transport Layer Security (TLS), previamente conhecido como Secure Sockets Layer (SSL), é um {{Glossary("Protocol", "protocolo")}} usado por aplicativos para se comunicar de forma segura em toda a rede, evitando adulteração e espionagem no email, navegador, mensagens e outros protocolos.
 
 Todos os navegadores atuais suportam o protocolo TLS, exigindo que o servidor forneça um {{Glossary("Digital certificate", "certificado digital")}} válido que confirme sua identidade para estabelecer uma conexão segura. É possível para ambos, o cliente e o servidor, se autentiquem mutuamente, se ambas partes providenciar seus próprios certificados digitais individuais.
diff --git a/files/pt-br/glossary/truthy/index.md b/files/pt-br/glossary/truthy/index.md
index 858defab8c4de0..d552152f362fc9 100644
--- a/files/pt-br/glossary/truthy/index.md
+++ b/files/pt-br/glossary/truthy/index.md
@@ -3,6 +3,8 @@ title: Truthy
 slug: Glossary/Truthy
 ---
 
+{{GlossarySidebar}}
+
 Em {{Glossary("JavaScript")}}, um valor **truthy** é um valor que se traduz em verdadeiro quando avaliado em um contexto {{Glossary("Booleano")}}. Todos os valores são **truthy** a menos que eles sejam definidos como {{Glossary("Falsy", "falsy")}} (ou seja., exceto para `false`, `0`, `""`, `null`, `undefined`, e `NaN`).
 
 O {{Glossary("JavaScript")}} usa {{Glossary("Type_Conversion", "coerção")}} de tipo em contextos booleanos.
diff --git a/files/pt-br/glossary/type_conversion/index.md b/files/pt-br/glossary/type_conversion/index.md
index 6bc63ecb8b5c08..6018c2db105cd5 100644
--- a/files/pt-br/glossary/type_conversion/index.md
+++ b/files/pt-br/glossary/type_conversion/index.md
@@ -3,6 +3,8 @@ title: Conversão de Tipo
 slug: Glossary/Type_Conversion
 ---
 
+{{GlossarySidebar}}
+
 **Conversão de Tipo** (ou _typecasting_) significa transferência de dados de um **tipo de dado** para o outro. A **conversão implícita** ocorre quando o compilador atribui automaticamente os **tipos de dados**, mas o código fonte também pode **explicitamente** exigir uma conversão de tipo. Por exemplo, dada a instrução `5+2.0`, o _float_ `2.0` será implicitamente convertido para _integer_, mas dada a instrução `Number("0x11")`, a _string_ "0x11" será explicitamente convertida para o número 17.
 
 ## Aprender mais
diff --git a/files/pt-br/glossary/undefined/index.md b/files/pt-br/glossary/undefined/index.md
index 51f7e50b73404c..8fcb832e5fcc6e 100644
--- a/files/pt-br/glossary/undefined/index.md
+++ b/files/pt-br/glossary/undefined/index.md
@@ -3,6 +3,8 @@ title: undefined
 slug: Glossary/Undefined
 ---
 
+{{GlossarySidebar}}
+
 Um valor **{{Glossary("primitive")}}** automaticamente atribuido para **variaveis** que foram recentemente declaradas ou para **{{Glossary("Argument","arguments")}} formais** para qual não existem **argumentos atualmente**.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/uri/index.md b/files/pt-br/glossary/uri/index.md
index 3d53541cb42fcb..4493065cde786e 100644
--- a/files/pt-br/glossary/uri/index.md
+++ b/files/pt-br/glossary/uri/index.md
@@ -3,6 +3,8 @@ title: URI
 slug: Glossary/URI
 ---
 
+{{GlossarySidebar}}
+
 A **URI** (_Uniform Resource Identifier_, ou _Identificador Uniforme de Recursos_) é uma string (sequência de caracteres) que se refere a um recurso. A mais comum é a {{Glossary("URL")}}, que identifica o recurso localizando-o na Web. {{Glossary("URN","URNs")}}, em contraste, refere-se a um recurso pelo nome, em dado namespace. Ex: o ISBN de um livro.
 
 ## Aprenda mais
diff --git a/files/pt-br/glossary/url/index.md b/files/pt-br/glossary/url/index.md
index b1e677ccdf27f7..17a5638fbbd89b 100644
--- a/files/pt-br/glossary/url/index.md
+++ b/files/pt-br/glossary/url/index.md
@@ -3,6 +3,8 @@ title: URL
 slug: Glossary/URL
 ---
 
+{{GlossarySidebar}}
+
 _Uniform Resource Locator_ (**URL**) é uma sequência de texto que especifica onde um recurso pode ser encontrado na Internet.
 
 No contexto de {{Glossary("HTTP")}}, URLs são chamadas de "Endereços web" ou "link". Seu navegador exibe as URLs na barra de endereços, por exemplo `https://developer.mozilla.org`
diff --git a/files/pt-br/glossary/utf-8/index.md b/files/pt-br/glossary/utf-8/index.md
index b9c8d3d0c568fa..10cc98862c55c5 100644
--- a/files/pt-br/glossary/utf-8/index.md
+++ b/files/pt-br/glossary/utf-8/index.md
@@ -3,6 +3,8 @@ title: UTF-8
 slug: Glossary/UTF-8
 ---
 
+{{GlossarySidebar}}
+
 UTF-8 (UCS Transformation Format 8) é a [codificação de caracteres](/pt-BR/docs/Glossario/character_encoding) mais comum da World Wide Web. Cada caractere é representado por um a quatro bytes. UTF-8 é compatível com versões anteriores do [ASCII](/pt-BR/docs/Glossario/ASCII) e pode representar qualquer caractere Unicode padrão.
 
 Os primeiros 128 caracteres UTF-8 correspondem exatamente aos primeiros 128 caracteres ASCII (numerados de 0 a 127), o que significa que o texto ASCII existente já é UTF-8 válido. Todos os outros caracteres usam dois a quatro bytes. Cada byte tem alguns bits reservados para fins de codificação. Como caracteres não ASCII requerem mais de um byte para armazenamento, eles correm o risco de serem corrompidos se os bytes forem separados e não forem recombinados.
diff --git a/files/pt-br/glossary/ux/index.md b/files/pt-br/glossary/ux/index.md
index 64c3673ac4e779..44952b637e314a 100644
--- a/files/pt-br/glossary/ux/index.md
+++ b/files/pt-br/glossary/ux/index.md
@@ -3,6 +3,8 @@ title: UX
 slug: Glossary/UX
 ---
 
+{{GlossarySidebar}}
+
 **UX** é um acrônimo que significa experiência do usuário (User eXperience). É o estudo da interação entre usuários e um sistema. Seu objetivo é tornar um sistema fácil de interagir do ponto de vista do usuário.
 
 O sistema pode ser qualquer produto ou aplicativo com o qual um usuário final deve interagir. Os estudos de UX realizados em uma página da web podem demostrar, por exemplo, se é fácil para os usuários entenderem a página, navegarem para diferentes áreas e concluírem tarefas comuns, e onde tais processos poderiam ter menos fricção.
diff --git a/files/pt-br/glossary/value/index.md b/files/pt-br/glossary/value/index.md
index 285e57a5a768df..738efda1497100 100644
--- a/files/pt-br/glossary/value/index.md
+++ b/files/pt-br/glossary/value/index.md
@@ -3,6 +3,8 @@ title: Valor
 slug: Glossary/Value
 ---
 
+{{GlossarySidebar}}
+
 No contexto de dados ou um objeto {{Glossary("Wrapper", "wrapper")}} em torno desses dados, o valor é um {{Glossary("Primitive","valor primitivo")}} que contém o wrapper do objeto. No contexto de uma {{Glossary("Variável","variável")}} ou {{Glossary("Property","propriedade")}}, o valor pode ser primitivo ou {{Glossary("Object reference","refêrencia de um objeto")}}.
 
 ## Aprender mais
diff --git a/files/pt-br/glossary/variable/index.md b/files/pt-br/glossary/variable/index.md
index f81c6f8b47b146..1009fba2d6f69c 100644
--- a/files/pt-br/glossary/variable/index.md
+++ b/files/pt-br/glossary/variable/index.md
@@ -3,6 +3,8 @@ title: Variável
 slug: Glossary/Variable
 ---
 
+{{GlossarySidebar}}
+
 Uma **variável (variable)** é um local nomeado para armazenar um {{Glossary("Value", "valor")}}. Dessa forma, um valor pode ser acessado através de um nome predeterminado.
 
 ## Leia mais
diff --git a/files/pt-br/glossary/vendor_prefix/index.md b/files/pt-br/glossary/vendor_prefix/index.md
index fc50b590dd013f..2532a170a1c6c5 100644
--- a/files/pt-br/glossary/vendor_prefix/index.md
+++ b/files/pt-br/glossary/vendor_prefix/index.md
@@ -3,6 +3,8 @@ title: Prefixos vendor
 slug: Glossary/Vendor_Prefix
 ---
 
+{{GlossarySidebar}}
+
 Os _fabricantes de browsers_, por vezes, adicionam prefixos às propriedades experimentais ou fora dos padrões CSS, de modo que os desenvolvedores podem experimentá-las, enquanto —em teoria— as mudanças no comportamento dos navegadores não quebrarão o código durante o processo de padonização. Os desenvolvedores devem esperar para incluir a propriedade _não pré-fixada_ até que o comportamento do navegador seja padronizado.
 
 > **Nota:** Os _fabricantes de browsers_ estão trabalhando para parar de usar prefixos de fornecedores para recursos experimentais. Os desenvolvedores da Web têm vindo a usá-los em sites de produção, apesar de sua natureza experimental. Isso tornou mais difícil para os fornecedores de navegadores garantir a compatibilidade e trabalhar com novos recursos; também foi prejudicial aos navegadores menores que acabam forçados a adicionar prefixos de outros navegadores para carregar sites populares.
diff --git a/files/pt-br/glossary/viewport/index.md b/files/pt-br/glossary/viewport/index.md
index 3df3903dcb72b1..de4e379eb5b2e7 100644
--- a/files/pt-br/glossary/viewport/index.md
+++ b/files/pt-br/glossary/viewport/index.md
@@ -3,6 +3,8 @@ title: Viewport
 slug: Glossary/Viewport
 ---
 
+{{GlossarySidebar}}
+
 Uma viewport representa uma área poligonal (normalmente retangular) que está sendo exibida no momento. Em termos de navegador web, se refere a parte do documento que é exibida na janela (ou tela, se o documento estiver exibido em modo tela-cheia). Conteúdos fora da viewport não são visíveis na janela/tela até que seja rolado para sua área de visualização.
 
 A porção da viewport que está visível no momento é chamada de **visual viewport** . Esta pode ser menor que a viewport de layout, assim é quando o usuário efetua uma pinçada/zoom. O **viewport** **de** **layout** permanece o mesmo, mas a visual viewport se torna menor.
diff --git a/files/pt-br/glossary/w3c/index.md b/files/pt-br/glossary/w3c/index.md
index 738f2c7adb4eb5..e9da3bee6fa734 100644
--- a/files/pt-br/glossary/w3c/index.md
+++ b/files/pt-br/glossary/w3c/index.md
@@ -3,6 +3,8 @@ title: W3C
 slug: Glossary/W3C
 ---
 
+{{GlossarySidebar}}
+
 O Consórcio da Rede Mundial (tradução livre de _World Wide Web Consortium_), ou simplesmente W3C é uma sociedade internacional que mantém as regras e frameworks {{Glossary("World Wide Web", "relacionadas à Web")}}
 
 Consiste de mais de 350 membros e organizações que, conjuntamente, desenvolvem a padronização da Internet, coordenam programas de divulgação, e mantém um fórum aberto para falar de Internet. O W3C coordena empresas na indústria para certificar que elas implementam os mesmos padrões da W3C.
diff --git a/files/pt-br/glossary/webp/index.md b/files/pt-br/glossary/webp/index.md
index 778f5b724e6522..c6ded9c890403a 100644
--- a/files/pt-br/glossary/webp/index.md
+++ b/files/pt-br/glossary/webp/index.md
@@ -3,6 +3,8 @@ title: WebP
 slug: Glossary/WebP
 ---
 
+{{GlossarySidebar}}
+
 **WebP** é um formato de compressão de imagem lossless e lossy desenvolvido pelo Google.
 
 ## Saiba mais
diff --git a/files/pt-br/glossary/webrtc/index.md b/files/pt-br/glossary/webrtc/index.md
index ff738584ffa131..f5052429963f0c 100644
--- a/files/pt-br/glossary/webrtc/index.md
+++ b/files/pt-br/glossary/webrtc/index.md
@@ -3,6 +3,8 @@ title: WebRTC
 slug: Glossary/WebRTC
 ---
 
+{{GlossarySidebar}}
+
 **WebRTC** (_Web Real-Time Communication_) é uma {{Glossary("API")}} que pode ser usado por chat de vídeo, chamadas de voz e aplicativos da Web de compartilhamento de arquivos P2P.
 
 O WebRTC consiste principalmente destas partes:
diff --git a/files/pt-br/glossary/websockets/index.md b/files/pt-br/glossary/websockets/index.md
index 65fd808f79e14b..9d5f752e861eaa 100644
--- a/files/pt-br/glossary/websockets/index.md
+++ b/files/pt-br/glossary/websockets/index.md
@@ -3,6 +3,8 @@ title: WebSockets
 slug: Glossary/WebSockets
 ---
 
+{{GlossarySidebar}}
+
 WebSocket é um {{Glossary("protocolo")}} que permite persistir conexões {{Glossary("TCP")}} entre o {{Glossary("servidor")}} e o cliente de modo que se possa trocar dados a qualquer momento.
 
 Qualquer aplicação de servidor ou cliente pode usar WebSocket, mas principalmente {{Glossary("Navegador", "navegadores")}} web e web servers. Através do WebSocket, servidores podem passar dados a um cliente sem um pedido prévio desse cliente, permitindo atualizações dinâmicas de conteúdo.
diff --git a/files/pt-br/glossary/whatwg/index.md b/files/pt-br/glossary/whatwg/index.md
index 67558c1f41c1cc..ec2b79eb15d74a 100644
--- a/files/pt-br/glossary/whatwg/index.md
+++ b/files/pt-br/glossary/whatwg/index.md
@@ -3,6 +3,8 @@ title: WHATWG
 slug: Glossary/WHATWG
 ---
 
+{{GlossarySidebar}}
+
 O [GRUTTAH](https://whatwg.org/) (WHATWG - sigla em inglês) (Grupo de Trabalho da Tecnologia de Aplicação Hipertexto da Web tradução livre de _Web Hypertext Application Working Group_) é uma organização que mantém e desenvolve o {{Glossary("HTML")}} e as {{Glossary("API", "APIs")}} para aplicações Web. Antigos funcionários da Apple, Mozilla e Opera, estabeleceram o GRUTTAH em 2004.
 
 Os editores de especificações na GRUTTAH pesquisam e colhem feedbacks para a especificação de documentos. O grupo també tem um pequeno comitê de membros convidados e autorizados a sobrescrever ou substituir as especificações dos editores.
diff --git a/files/pt-br/glossary/wrapper/index.md b/files/pt-br/glossary/wrapper/index.md
index eba53f5141b59a..17effa5c2e2c9f 100644
--- a/files/pt-br/glossary/wrapper/index.md
+++ b/files/pt-br/glossary/wrapper/index.md
@@ -3,6 +3,8 @@ title: Wrapper
 slug: Glossary/Wrapper
 ---
 
+{{GlossarySidebar}}
+
 Em linguagens de programação, como o JavaScript, um wrapper é uma função destinada a chamar uma ou mais funções, às vezes diretamente por conveniência, e às vezes adaptá-las para fazer uma tarefa ligeiramente diferente no processo.
 
 Por exemplo, as bibliotecas do SDK para AWS são exemplos de wrappers.
diff --git a/files/pt-br/glossary/xhtml/index.md b/files/pt-br/glossary/xhtml/index.md
index 3aab73ed3f2923..6d5833f5f8627e 100644
--- a/files/pt-br/glossary/xhtml/index.md
+++ b/files/pt-br/glossary/xhtml/index.md
@@ -3,6 +3,8 @@ title: XHTML
 slug: Glossary/XHTML
 ---
 
+{{GlossarySidebar}}
+
 O [HTML](/pt-BR/docs/HTML) pode ser transferido através da internet para o navegador usando duas sintaxes: sintaxe HTML e sintaxe [XML](/pt-BR/docs/XML), também conhecido como XHTML.
 
 ## HTML5 e HTML/XHTML
diff --git a/files/pt-br/glossary/xml/index.md b/files/pt-br/glossary/xml/index.md
index c6611ccb71cc27..d79f7cb0ed2c93 100644
--- a/files/pt-br/glossary/xml/index.md
+++ b/files/pt-br/glossary/xml/index.md
@@ -3,6 +3,8 @@ title: XML
 slug: Glossary/XML
 ---
 
+{{GlossarySidebar}}
+
 eXtensible Markup Language (XML) é uma linguagem de marcação genérica especificada pela W3C. A indústria de tecnologia da informação (TI) utiliza várias linguagens baseadas em XML para descrição de dados.
 
 Tags XML são muito semelhantes a tags HTML, mas XML é muito mais flexível porque permite os usuários definirem suas próprias tags. Dessa forma o XML atua como uma meta-linguagem — isto é, pode ser usada para definir outras linguagens, como {{Glossary("RSS")}}. Além disso, HTML é uma linguagem para apresentação, enquanto XML é uma linguagem para descrever dados. Isto significa que XML tem aplicações muito mais amplas do que apenas a Web. Por exemplo, Web services podem usar XML para trocar requisições e respostas.
diff --git a/files/pt-br/glossary/xmlhttprequest/index.md b/files/pt-br/glossary/xmlhttprequest/index.md
index b2230628b64ad8..c7ad67bac2a75f 100644
--- a/files/pt-br/glossary/xmlhttprequest/index.md
+++ b/files/pt-br/glossary/xmlhttprequest/index.md
@@ -3,6 +3,8 @@ title: XHR (XMLHttpRequest)
 slug: Glossary/XMLHttpRequest
 ---
 
+{{GlossarySidebar}}
+
 {{domxref("XMLHttpRequest")}} (XHR) é uma {{Glossary("API")}} {{Glossary("JavaScript")}} para criar requisições {{Glossary("AJAX")}}. Os métodos desta API fornecem opções para enviar requisições entre o {{Glossary("browser")}} e o {{Glossary("server")}}.
 
 ## Veja mais
diff --git a/files/pt-br/glossary/xslt/index.md b/files/pt-br/glossary/xslt/index.md
index d7e292efb63d26..286f7ac3673324 100644
--- a/files/pt-br/glossary/xslt/index.md
+++ b/files/pt-br/glossary/xslt/index.md
@@ -3,6 +3,8 @@ title: XSLT
 slug: Glossary/XSLT
 ---
 
+{{GlossarySidebar}}
+
 _eXtensible Stylesheet Language Transformations_ (**XSLT**) é uma linguagem declarativa usada para converter documentos {{Glossary("XML")}} em outros documentos XML, {{Glossary("HTML")}}, {{Glossary("PDF")}}, texto simples e assim por diante.
 
 O XSLT possui seu próprio processador que aceita entrada XML ou qualquer formato conversível para um modelo de dados XQuery e XPath. O processador XSLT produz um novo documento baseado no documento XML e em uma folha de estilo XSLT, não fazendo alterações nos arquivos originais no processo.
diff --git a/files/pt-br/learn/css/building_blocks/the_box_model/index.md b/files/pt-br/learn/css/building_blocks/the_box_model/index.md
index 9d1d43c88f07e2..77c5e949816234 100644
--- a/files/pt-br/learn/css/building_blocks/the_box_model/index.md
+++ b/files/pt-br/learn/css/building_blocks/the_box_model/index.md
@@ -37,29 +37,29 @@ Tudo em CSS tem um quadro em torno de si, e entender estes quadros é chave para
   </tbody>
 </table>
 
-## Block and inline boxes
+## Caixas Block e Inline
 
-In CSS we broadly have two types of boxes — **block boxes** and **inline boxes**. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:
+No CSS, temos dois tipos, **caixas box** e **caixas inline**, O tipo de caixa influencia diretameente em como as mesmas irao interagir com o fluxo da pagina(page flow) e com as outras caixas da pagina:
 
-If a box is defined as a block, it will behave in the following ways:
+Se for uma caixa definida como block, ela tera os seguintes comportamentos:
 
-- The box will break onto a new line.
-- The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.
-- The {{cssxref("width")}} and {{cssxref("height")}} properties are respected.
-- Padding, margin and border will cause other elements to be pushed away from the box
+- A caixa irá quebrar em uma nova linha.
+- A caixa irá se estender na direção horizontal (inline) para preeencher todo o espaço disponível no container. Na maioria dos casos isso significa que essa caixa será tão larga quanto seu recipiente.
+- As propriedades {{cssxref("width")}} e {{cssxref("height")}} serão respeitadas.
+- {{cssxref("padding")}}, {{cssxref("margin")}} e {{cssxref("border")}} farão com que outros elementos sejam empurrados para fora da caixa.
 
-Unless we decide to change the display type to inline, elements such as headings (e.g. `<h1>`) and `<p>` all use `block` as their outer display type by default.
+A menos que decidamos alterar o tipo de exibição para `inline`, alguns elementos como os cabeçalhos (ex: `<h1>`) e `<p>` são caixas do tipo `block` por padrão.
 
-If a box has an outer display type of `inline`, then:
+Se a caixa for do tipo `inline`, ela seguira os segintes comportamentos:
 
-- The box will not break onto a new line.
-- The {{cssxref("width")}} and {{cssxref("height")}} properties will not apply.
-- Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
-- Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
+- Ela não quebrará em uma nova linha.
+- As propriedades {{cssxref("width")}} e {{cssxref("height")}} não serão aplicadas.
+- Padding vertical, margens e bordas serão aplicados, mas não farão com que outras caixas embutidades se afastem.
+- Padding horizontal, margens e bordas serão aplicadas e farão com que outras caixas embutidades se afastem da caixa.
 
-The `<a>` element, used for links, `<span>`, `<em>` and `<strong>` are all examples of elements that will display inline by default.
+O elemento `<a>` usado em links, `<span>`, `<em>` e `<strong>` são exemplos de elementos que sao `inline` por padrão.
 
-The type of box applied to an element is defined by {{cssxref("display")}} property values such as `block` and `inline`, and relates to the **outer** value of `display`.
+O tipo de caixa aplicada em um elemento é definida pela propriedade {{cssxref("display")}} como `block` ou `inline` e está relacionada ao valor **outer** do `display`.
 
 ## Além disto: Tipos de exibição ( display ) internos e externos
 
@@ -67,13 +67,13 @@ Nesse ponto, é melhor também explicar os tipos de exibição interna ( **inner
 
 Caixas possuem também um tipo de display _inner_, que determina como elementos dentro da caixa são posicionados. Por default, os elementos dentro de uma caixa são posicionados em um fluxo normal ( **[normal flow](/pt-BR/docs/Learn/CSS/CSS_layout/Normal_Flow)** ), significando que eles se comportam como qualquer outro bloco e elementos inline (como explicado acima).
 
-We can, however, change the inner display type by using `display` values like `flex`. If we set `display: flex;` on an element, the outer display type is `block`, but the inner display type is changed to `flex`. Any direct children of this box will become flex items and will be laid out according to the rules set out in the [Flexbox](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox) spec, which you'll learn about later on.
+Podemos, no entando, alterar o tipo de exibição (display) interna usando valores `display` como `flex`. Se definirmos `display: flex;` em um elemento, o tipo de exibição externo será `block`, mas o tipo de exibição interna será alterada para `flex`. Todos os filhos diretos desta caixa se tornarão itens flexíveis e serão dispostos de acordo com as regras estabelecidas na especificação [Flexbox](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox), que você aprenderá mais tarde.
 
-> **Nota:** To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to [Block and Inline Layout](/pt-BR/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow).
+> **Nota:** Para ler mais sobre valores de exibição (display) e como caixas funcionam nos layouts `block` e `inline`, dê uma olhada no guia MDN sobre [Block e Inline Layout](/pt-BR/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
 
-When you move on to learn about CSS Layout in more detail, you will encounter `flex`, and various other inner values that your boxes can have, for example [`grid`](/pt-BR/docs/Learn/CSS/CSS_layout/Grids).
+Quando aprender sobre CSS Layout você encontrará `flex` e vários outros valores internos que suas caixas podem ter, como por exemplo [`grid`](/pt-BR/docs/Learn/CSS/CSS_layout/Grids).
 
-Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as _normal flow_, because without any other instruction, our boxes lay out as block or inline boxes.
+O layout Block e inline, no entanto, é a forma padrão de como as coisas na web se comportam. Como dissemos acima, às vezes é chamado de _normal flow_, porque sem qualquer outra instrução, nossas caixas são dispostas como blocks ou inlines.
 
 ## Examples of different display types
 
diff --git a/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
index d8bb6cc0785d67..d906b41ef880ce 100644
--- a/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
+++ b/files/pt-br/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -17,9 +17,9 @@ O objetivo deste teste de habilidade é avaliar se você entendeu nosso artigo [
 
 Nesta tarefa, queremos que você:
 
-- Declare uma variável chamada `meuNome`.
-- Inicialize `meuNome` com um valor adequado, em uma linha separada (você pode usar seu nome real ou qualquer outra coisa).
-- Declare uma variável chamada `minhaIdade` e inicialize-a com um valor, na mesma linha.
+- Declare uma variável chamada `myName`.
+- Inicialize `myName` com um valor adequado, em uma linha separada (você pode usar seu nome real ou qualquer outra coisa).
+- Declare uma variável chamada `myAge` e inicialize-a com um valor, na mesma linha.
 
 Tente atualizar o código ativo abaixo para recriar o exemplo final:
 
@@ -29,7 +29,7 @@ Tente atualizar o código ativo abaixo para recriar o exemplo final:
 
 ## Variáveis 2
 
-Nesta tarefa, você precisa adicionar uma nova linha para corrigir o valor armazenado na variável `meuNome` existente para seu próprio nome.
+Nesta tarefa, você precisa adicionar uma nova linha para corrigir o valor armazenado na variável `myName` existente para seu próprio nome.
 
 Tente atualizar o código ativo abaixo para recriar o exemplo final:
 
diff --git a/files/pt-br/learn/javascript/first_steps/variables/index.md b/files/pt-br/learn/javascript/first_steps/variables/index.md
index 9c95a54dd06434..9d2849f00798d6 100644
--- a/files/pt-br/learn/javascript/first_steps/variables/index.md
+++ b/files/pt-br/learn/javascript/first_steps/variables/index.md
@@ -189,7 +189,7 @@ Você pode chamar uma variável praticamente qualquer nome que queira, mas há l
 - Você não deve usar outros caracteres porque eles podem causar erros ou ser difíceis de entender por uma audiência internacional.
 - Não use underline no início do nome de variáveis — isso é utilizado em certos construtores JavaScript para significar coisas específicas, então pode deixar as coisas confusas.
 - Não use número no início do nome de variáveis. Isso não é permitido e irá causar um erro.
-- Uma conveção segura e se ater é a chamada ["lower camel case"](https://pt.wikipedia.org/wiki/CamelCase), onde você junta várias palavras, usando minúscula para a primeira palavra inteira e, em seguida, maiusculiza a primeira letra das palavras subsequentes. Temos utilizado esse procedimento para os nomes das nossas variáveis nesse artigo até aqui.
+- Uma conveção segura é se ater à chamada ["lower camel case"](https://pt.wikipedia.org/wiki/CamelCase), onde você junta várias palavras, usando minúscula para a primeira palavra inteira e, em seguida, maiusculiza a primeira letra das palavras subsequentes. Temos utilizado esse procedimento para os nomes das nossas variáveis nesse artigo até aqui.
 - Faça nomes de variáveis intuitivos, para que descrevam o dado que ela contém. Não use letras ou números únicos, ou frases muito longas.
 - As variáveis diferenciam letras maiúsculas e minúsculas — então `minhaidade` é uma variável diferente de `minhaIdade`.
 - Um último ponto — você também precisa evitar utilizar palavras reservadas pelo JavaScript como nome para suas variáveis — com isso, queremos dizer as palavras que fazem parte da sintaxe do JavaScript! Então você não pode usar palavras como `var`, `function`, `let` e `for` como nome de variáveis. Os navegadores vão reconhecê-las como itens de código diferentes e, portanto, você terá erros.
@@ -248,7 +248,7 @@ var despedidaGolfinho = "Até logo e obrigado por todos os peixes!";
 
 ### _Booleans_ (boleanos)
 
-_Booleans_ são valores verdadeiro/falso (_true/false_) — eles podem ter dois valores, `true` (verdadeiro) ou `false` (falso). São geralmente usados para verificar uma condição, que em seguida o código é executado apopriadamente. Por exemplo, um caso simples seria:
+_Booleans_ são valores verdadeiro/falso (_true/false_) — eles podem ter dois valores, `true` (verdadeiro) ou `false` (falso). São geralmente usados para verificar uma condição, que em seguida o código é executado apropriadamente. Por exemplo, um caso simples seria:
 
 ```js
 var estouVivo = true;
diff --git a/files/pt-br/learn/javascript/first_steps/what_went_wrong/index.md b/files/pt-br/learn/javascript/first_steps/what_went_wrong/index.md
index 339d7faaf9a8fe..8fab89b038a802 100644
--- a/files/pt-br/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/pt-br/learn/javascript/first_steps/what_went_wrong/index.md
@@ -128,7 +128,7 @@ Anteriormente no curso, nós fizemos você digitar alguns comandos simples de Ja
 
 Nesse ponto, o jogo deve rodar normalmente, porém depois de jogá-lo algumas vezes você irá notar que o número "aleatório" que você tem que adivinhar é sempre igual a 1. Definitivamente não é como queremos que o jogo funcione!
 
-Há sem dúvida um problema na lógica do jogo em algum lugar — o jogo não está retornando nenhum erro;simplesmente não está funcionando corretamente.
+Há sem dúvida um problema na lógica do jogo em algum lugar — o jogo não está retornando nenhum erro; simplesmente não está funcionando corretamente.
 
 1. Procure pela variável `numeroAleatorio`, e as linhas onde o número aleatório é definido primeiro. A instância que armazena o número aleatório que queremos adivinhar no começo do jogo deve estar na linha 44 ou próximo a ela:
 
diff --git a/files/pt-br/web/api/attr/index.md b/files/pt-br/web/api/attr/index.md
index 711b3097c67581..fc0295a95dcb4b 100644
--- a/files/pt-br/web/api/attr/index.md
+++ b/files/pt-br/web/api/attr/index.md
@@ -83,8 +83,6 @@ Os seguintes métodos foram reprovados:
   - : Este método agora sempre retorna false.
 - `insertBefore()`
   - : Modifique o valor de {{domxref("Attr.value")}} no lugar.
-- `isSupported()`
-  - : Provavelmente você nunca utilizou isto, então você não se importa que isso vai desaparecer.
 - `isEqualNode()`
   - : Provavelmente você nunca utilizou isto, então você não se importa que isso vai desaparecer.
 - `normalize()`
diff --git a/files/pt-br/web/api/audio_output_devices_api/index.md b/files/pt-br/web/api/audio_output_devices_api/index.md
new file mode 100644
index 00000000000000..ab594ca2381aa2
--- /dev/null
+++ b/files/pt-br/web/api/audio_output_devices_api/index.md
@@ -0,0 +1,107 @@
+---
+title: API de Dispositivos de Saída de Áudio
+slug: Web/API/Audio_Output_Devices_API
+---
+
+{{DefaultAPISidebar("Audio Output Devices API")}}{{securecontext_header}}{{SeeCompatTable}}
+
+A **API de Dispositivos de Saída de Áudio** permite que aplicações web solicitem aos usuários qual dispositivo de saída deve ser usado para a reprodução de áudio.
+
+## Conceitos e uso
+
+Sistemas operacionais comumente permitem que os usuários especifiquem se o áudio deve ser reproduzido nos alto-falantes, em um fone de ouvido Bluetooth ou em algum outro dispositivo de saída de áudio.
+Esta API permite que as aplicações ofereçam essa mesma funcionalidade a partir de uma página web.
+
+Mesmo se permitido por uma política de permissões, o acesso a um dispositivo de saída de áudio específico ainda requer permissão explícita do usuário, pois o usuário pode estar em um local onde a reprodução de áudio através de alguns dispositivos de saída não seja apropriada.
+
+A API fornece o método [`MediaDevices.selectAudioOutput()`](/pt-BR/docs/Web/API/MediaDevices/selectAudioOutput) que permite aos usuários selecionar sua saída de áudio desejada dentre aquelas permitidas pela diretiva [`speaker-selection`](/pt-BR/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection) do cabeçalho HTTP [`Permissions-Policy`](/pt-BR/docs/Web/HTTP/Headers/Permissions-Policy) do documento.
+O dispositivo selecionado recebe, então, permissão do usuário, permitindo que ele seja enumerado com [`MediaDevices.enumerateDevices()`](/pt-BR/docs/Web/API/MediaDevices/enumerateDevices) e definido como dispositivo de saída de áudio usando [`HTMLMediaElement.setSinkId()`](/pt-BR/docs/Web/API/HTMLMediaElement/setSinkId).
+
+Dispositivos de áudio podem se conectar e desconectar arbitrariamente. Aplicações que desejam reagir a esse tipo de mudança podem ouvir o evento [`devicechange` event](/pt-BR/docs/Web/API/MediaDevices/devicechange_event) e usar [`enumerateDevices()`](/pt-BR/docs/Web/API/MediaDevices/enumerateDevices) para determinar se `sinkId` está presente nos dispositivos retornados.
+Isso pode iniciar, por exemplo, a pausa ou retomada da reprodução.
+
+## Interfaces
+
+### Extensões para interfaces
+
+A API de Dispositivos de Saída de Áudio estende as seguintes APIs, adicionando as funcionalidades listadas:
+
+#### MediaDevices
+
+- [`MediaDevices.selectAudioOutput()`](/pt-BR/docs/Web/API/MediaDevices/selectAudioOutput)
+  - : Este método solicita ao usuário a seleção de um dispositivo de saída de áudio específico, como um alto-falante ou fone de ouvido.
+    Selecionar um dispositivo concede permissão do usuário para usá-lo e retorna informações sobre o dispositivo, incluindo seu ID.
+
+#### HTMLMediaElement
+
+- [`HTMLMediaElement.setSinkId()`](/pt-BR/docs/Web/API/HTMLMediaElement/setSinkId)
+  - : Este método define o ID do dispositivo de áudio a ser usado para saída, que será usado se permitido.
+- [`HTMLMediaElement.sinkId`](/pt-BR/docs/Web/API/HTMLMediaElement/sinkId)
+  - : Esta propriedade retorna o ID único do dispositivo de áudio em uso, ou uma string vazia se o dispositivo padrão do agente do usuário estiver sendo usado.
+
+## Requisitos de segurança
+
+O acesso à API está sujeito às seguintes restrições:
+
+- Todos os métodos e propriedades só podem ser chamados em um [contexto seguro](/pt-BR/docs/Web/Security/Secure_Contexts).
+
+- [`MediaDevices.selectAudioOutput()`](/pt-BR/docs/Web/API/MediaDevices/selectAudioOutput) concede permissão do usuário para um dispositivo selecionado ser usado como o dispositivo de saída de áudio:
+
+  - O acesso pode ser controlado pela política de permissões HTTP [`speaker-selection`](/pt-BR/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection).
+  - [Ativação de usuário transitória](/pt-BR/docs/Web/Security/User_activation) é necessária.
+    O usuário deve interagir com a página ou um elemento de interface do usuário para que o método seja chamado.
+
+- [`HTMLMediaElement.setSinkId()`](/pt-BR/docs/Web/API/HTMLMediaElement/setSinkId) define um ID permitido como saída de áudio:
+
+  - O acesso pode ser controlado pela política de permissões HTTP [`speaker-selection`](/pt-BR/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection).
+  - É necessária a permissão do usuário para definir um ID de dispositivo não padrão.
+    - Isso pode vir da seleção na janela de diálogo lançada por `MediaDevices.selectAudioOutput()`
+    - A permissão do usuário para definir o dispositivo de saída é concedida implicitamente se o usuário já concedeu permissão para usar um dispositivo de entrada de mídia no mesmo grupo com [`MediaDevices.getUserMedia()`](/pt-BR/docs/Web/API/MediaDevices/getUserMedia).
+
+O status da permissão pode ser consultado usando o método [Permissions API](/pt-BR/docs/Web/API/Permissions_API) [`navigator.permissions.query()`](/pt-BR/docs/Web/API/Permissions/query), passando um descritor de permissão com a permissão `speaker-selection`.
+
+## Exemplos
+
+Aqui está um exemplo de uso de `selectAudioOutput()`, dentro de uma função que é acionada por um clique em um botão, e em seguida definindo o dispositivo selecionado como saída de áudio.
+
+O código primeiro verifica se `selectAudioOutput()` é suportado e, se for o caso, o utiliza para selecionar uma saída e retornar um [ID do dispositivo](/pt-BR/docs/Web/API/MediaDeviceInfo/deviceId).
+Em seguida, reproduzimos algum áudio usando a saída padrão e, em seguida, chamamos `setSinkId()` para alternar para o dispositivo de saída selecionado.
+
+```js
+document.querySelector("#meuBotao").addEventListener("click", async () => {
+  if (!navigator.mediaDevices.selectAudioOutput) {
+    console.log(
+      "selectAudioOutput() não suportado ou não está em contexto seguro.",
+    );
+    return;
+  }
+
+  // Exibe janela de seleção do dispositivo
+  const dispositivoDeAudio = await navigator.mediaDevices.selectAudioOutput();
+
+  // Cria um elemento de áudio e inicia a reprodução de áudio no dispositivo padrão
+  const audio = document.createElement("audio");
+  audio.src = "https://example.com/audio.mp3";
+  audio.play();
+
+  // Altera a saída para o dispositivo de áudio selecionado.
+  audio.setSinkId(dispositivoDeAudio.deviceId);
+});
+```
+
+Observe que se você registrar os detalhes de saída, eles podem se parecer com isso:
+
+```js
+console.log(
+  `${dispositivoDeAudio.kind}: ${dispositivoDeAudio.label} id = ${dispositivoDeAudio.deviceId}`,
+);
+// saída de áudio: Saída Digital Realtek (Áudio Realtek(R)) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=
+```
+
+## Especificações
+
+{{Specifications}}
+
+## Compatibilidade com navegadores
+
+{{Compat}}
diff --git a/files/pt-br/web/api/background_fetch_api/index.md b/files/pt-br/web/api/background_fetch_api/index.md
new file mode 100644
index 00000000000000..0f3657fb83865f
--- /dev/null
+++ b/files/pt-br/web/api/background_fetch_api/index.md
@@ -0,0 +1,81 @@
+---
+title: Background Fetch API
+slug: Web/API/Background_Fetch_API
+---
+
+{{DefaultAPISidebar("Background Fetch API")}} {{SeeCompatTable}}
+
+A **Background Fetch API** fornece um método para gerenciar downloads que podem demandar um tempo significativo como filmes, arquivos de áudio e software.
+
+## Conceitos e uso
+
+Quando uma aplicação web exige que o usuário faça downloads de arquivos grandes, geralmente cria-se um problema pois o usuário precisa ficar conectado o tempo todo para que o download termine. Se o usuário perde a conexão, fecha a tab ou sai da página o download para.
+
+A {{domxref("Background Synchronization API")}} fornece uma maneira para os service workers adiarem o processamento até que um usuário esteja conectado; De toda forma, essa API não pode ser usada para tarefas que podem demorar, como fazer o download de um arquivo grande. A Background sync exige que o service worker esteja ativo até que o fetch seja completado, e para preservar bateria ou para prevenir que tasks indesejadas aconteçam em background o browser irá em algum momento parar a execução da tarefa.
+
+A Background Fetch API resolve esse problema. Ela cria uma maneira do desenvolverdor web pedir ao browser que o mesmo faça chamadas em background, por exemplo quando o usuário clica em um botão para fazer o download de um arquivo de vídeo. O browser irá fazer o download de uma maneira visível ao usuário, mostrando o progresso do download e expondo ao usuário uma maneira de cancelar o mesmo. Quando o download termina, o browser irá abrir o service worker e nesse momento a aplicação pode fazer algo com o resultado se necessário.
+
+A Background Fetch API permitirá que a chamada aconteça mesmo se o usuário inicie o processo estando desconectado. Uma vez que o usuário se conecta novamente o download irá iniciar. Se o usuário volta a ficar desconectado, o processo irá pausar até que a conexão volte.
+
+## Interfaces
+
+- {{domxref("BackgroundFetchManager")}}
+  - : Um map onde as chaves são background fetch IDS e os valores são {{domxref("BackgroundFetchRegistration")}} objetos.
+- {{domxref("BackgroundFetchRegistration")}}
+  - : Representa a Background Fetch.
+- {{domxref("BackgroundFetchRecord")}}
+  - : Representa uma fetch request e responde isolada.
+- {{domxref("BackgroundFetchEvent")}}
+  - : O tipo de evento passo para `onbackgroundfetchabort` e `onbackgroundfetchclick`.
+- {{domxref("BackgroundFetchUpdateUIEvent")}}
+  - : O tipo de evento passado para `onbackgroundfetchsuccess` e `onbackgroundfetchfail`.
+
+## Exemplos
+
+Antes de usar Background Fetch, verifique o suporte do navegador.
+
+```js
+if (!("BackgroundFetchManager" in self)) {
+  // executar um fallback para o download.
+}
+```
+
+Para usar a Background Fetch é necessário que um service worker esteja registrado. Então podemos chamar
+`backgroundFetch.fetch()` para executar o fetch. Essa chamada retorna uma promise que resolve com uma {{domxref("BackgroundFetchRegistration")}}.
+
+A background fetch pode baixar vários arquivos. No nosso exemplo buscamos um MP3 e um JPEG. Isso permite que um pacote de arquivos que o usuário vê como um item (por exemplo, um podcast e uma arte) sejam baixados juntos.
+
+```js
+navigator.serviceWorker.ready.then(async (swReg) => {
+  const bgFetch = await swReg.backgroundFetch.fetch(
+    "my-fetch",
+    ["/ep-5.mp3", "ep-5-artwork.jpg"],
+    {
+      title: "Episódio 5: Coisas interessantes.",
+      icons: [
+        {
+          sizes: "300x300",
+          src: "/ep-5-icon.png",
+          type: "image/png",
+        },
+      ],
+      downloadTotal: 60 * 1024 * 1024,
+    },
+  );
+});
+```
+
+Você pode ver uma aplicação demo que implementa a Background fetch [aqui](https://glitch.com/edit/#!/bgfetch-http203?path=public%2Fclient.js%3A191%3A45).
+
+## Especificações
+
+{{Specifications}}
+
+## Compatibilidade com navegadores
+
+{{Compat}}
+
+## Veja também
+
+- [Introdução a Background Fetch](https://developer.chrome.com/blog/background-fetch/)
+- [Background Fetch - HTTP 203](https://www.youtube.com/watch?v=cElAoxhQz6w)
diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
similarity index 98%
rename from files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.md
rename to files/pt-br/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
index 741716a6173d3c..bbfb31f8defe63 100644
--- a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.md
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
@@ -1,6 +1,7 @@
 ---
 title: Exemplo de Composição
-slug: Web/API/Canvas_API/Tutorial/Compositing/Example
+slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation
+original_slug: Web/API/Canvas_API/Tutorial/Compositing/Example
 ---
 
 {{DefaultAPISidebar("Canvas API")}}
diff --git a/files/pt-br/web/api/console/assert/index.md b/files/pt-br/web/api/console/assert_static/index.md
similarity index 96%
rename from files/pt-br/web/api/console/assert/index.md
rename to files/pt-br/web/api/console/assert_static/index.md
index 2cdf2e86286986..e959a996a851cd 100644
--- a/files/pt-br/web/api/console/assert/index.md
+++ b/files/pt-br/web/api/console/assert_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.assert()
-slug: Web/API/console/assert
+slug: Web/API/console/assert_static
+original_slug: Web/API/console/assert
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/pt-br/web/api/console/clear/index.md b/files/pt-br/web/api/console/clear_static/index.md
similarity index 78%
rename from files/pt-br/web/api/console/clear/index.md
rename to files/pt-br/web/api/console/clear_static/index.md
index ac1ea936fb8fc4..8aa79c2f61ceb4 100644
--- a/files/pt-br/web/api/console/clear/index.md
+++ b/files/pt-br/web/api/console/clear_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: console.clear()
-slug: Web/API/console/clear
+slug: Web/API/console/clear_static
+original_slug: Web/API/console/clear
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/pt-br/web/api/console/count/index.md b/files/pt-br/web/api/console/count_static/index.md
similarity index 96%
rename from files/pt-br/web/api/console/count/index.md
rename to files/pt-br/web/api/console/count_static/index.md
index 1054ebb3a2b85a..2db6134becf9ae 100644
--- a/files/pt-br/web/api/console/count/index.md
+++ b/files/pt-br/web/api/console/count_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.count()
-slug: Web/API/console/count
+slug: Web/API/console/count_static
+original_slug: Web/API/console/count
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/pt-br/web/api/console/dir/console-dir.png b/files/pt-br/web/api/console/dir_static/console-dir.png
similarity index 100%
rename from files/pt-br/web/api/console/dir/console-dir.png
rename to files/pt-br/web/api/console/dir_static/console-dir.png
diff --git a/files/pt-br/web/api/console/dir/index.md b/files/pt-br/web/api/console/dir_static/index.md
similarity index 92%
rename from files/pt-br/web/api/console/dir/index.md
rename to files/pt-br/web/api/console/dir_static/index.md
index 718c0e4f578079..db80f87c9bc122 100644
--- a/files/pt-br/web/api/console/dir/index.md
+++ b/files/pt-br/web/api/console/dir_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.dir()
-slug: Web/API/console/dir
+slug: Web/API/console/dir_static
+original_slug: Web/API/console/dir
 ---
 
 {{ APIRef("Console API") }}{{Non-standard_header}}
diff --git a/files/pt-br/web/api/console/error/index.md b/files/pt-br/web/api/console/error_static/index.md
similarity index 95%
rename from files/pt-br/web/api/console/error/index.md
rename to files/pt-br/web/api/console/error_static/index.md
index afa8dd70f8c6ca..43515690a25413 100644
--- a/files/pt-br/web/api/console/error/index.md
+++ b/files/pt-br/web/api/console/error_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.error()
-slug: Web/API/console/error
+slug: Web/API/console/error_static
+original_slug: Web/API/console/error
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/pt-br/web/api/console/info/index.md b/files/pt-br/web/api/console/info_static/index.md
similarity index 94%
rename from files/pt-br/web/api/console/info/index.md
rename to files/pt-br/web/api/console/info_static/index.md
index 0d277e43f0c81f..8e39c0cd32d001 100644
--- a/files/pt-br/web/api/console/info/index.md
+++ b/files/pt-br/web/api/console/info_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.info()
-slug: Web/API/console/info
+slug: Web/API/console/info_static
+original_slug: Web/API/console/info
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/pt-br/web/api/console/log/index.md b/files/pt-br/web/api/console/log_static/index.md
similarity index 95%
rename from files/pt-br/web/api/console/log/index.md
rename to files/pt-br/web/api/console/log_static/index.md
index 075f9aa13191a7..268203284315d9 100644
--- a/files/pt-br/web/api/console/log/index.md
+++ b/files/pt-br/web/api/console/log_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.log()
-slug: Web/API/console/log
+slug: Web/API/console/log_static
+original_slug: Web/API/console/log
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/pt-br/web/api/console/table/console-table-array-of-array.png b/files/pt-br/web/api/console/table_static/console-table-array-of-array.png
similarity index 100%
rename from files/pt-br/web/api/console/table/console-table-array-of-array.png
rename to files/pt-br/web/api/console/table_static/console-table-array-of-array.png
diff --git a/files/pt-br/web/api/console/table/console-table-array-of-objects-firstname-only.png b/files/pt-br/web/api/console/table_static/console-table-array-of-objects-firstname-only.png
similarity index 100%
rename from files/pt-br/web/api/console/table/console-table-array-of-objects-firstname-only.png
rename to files/pt-br/web/api/console/table_static/console-table-array-of-objects-firstname-only.png
diff --git a/files/pt-br/web/api/console/table/console-table-array-of-objects.png b/files/pt-br/web/api/console/table_static/console-table-array-of-objects.png
similarity index 100%
rename from files/pt-br/web/api/console/table/console-table-array-of-objects.png
rename to files/pt-br/web/api/console/table_static/console-table-array-of-objects.png
diff --git a/files/pt-br/web/api/console/table/console-table-array.png b/files/pt-br/web/api/console/table_static/console-table-array.png
similarity index 100%
rename from files/pt-br/web/api/console/table/console-table-array.png
rename to files/pt-br/web/api/console/table_static/console-table-array.png
diff --git a/files/pt-br/web/api/console/table/console-table-object-of-objects.png b/files/pt-br/web/api/console/table_static/console-table-object-of-objects.png
similarity index 100%
rename from files/pt-br/web/api/console/table/console-table-object-of-objects.png
rename to files/pt-br/web/api/console/table_static/console-table-object-of-objects.png
diff --git a/files/pt-br/web/api/console/table/console-table-simple-object.png b/files/pt-br/web/api/console/table_static/console-table-simple-object.png
similarity index 100%
rename from files/pt-br/web/api/console/table/console-table-simple-object.png
rename to files/pt-br/web/api/console/table_static/console-table-simple-object.png
diff --git a/files/pt-br/web/api/console/table/index.md b/files/pt-br/web/api/console/table_static/index.md
similarity index 97%
rename from files/pt-br/web/api/console/table/index.md
rename to files/pt-br/web/api/console/table_static/index.md
index 31c8da4b26029e..72f0f13a2b759c 100644
--- a/files/pt-br/web/api/console/table/index.md
+++ b/files/pt-br/web/api/console/table_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.table()
-slug: Web/API/console/table
+slug: Web/API/console/table_static
+original_slug: Web/API/console/table
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/pt-br/web/api/console/time/index.md b/files/pt-br/web/api/console/time_static/index.md
similarity index 94%
rename from files/pt-br/web/api/console/time/index.md
rename to files/pt-br/web/api/console/time_static/index.md
index 26fe64d2027f70..05b528c95974e8 100644
--- a/files/pt-br/web/api/console/time/index.md
+++ b/files/pt-br/web/api/console/time_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.time()
-slug: Web/API/console/time
+slug: Web/API/console/time_static
+original_slug: Web/API/console/time
 ---
 
 {{ APIRef("Console API") }}{{Non-standard_header}}
diff --git a/files/pt-br/web/api/console/timeend/index.md b/files/pt-br/web/api/console/timeend_static/index.md
similarity index 91%
rename from files/pt-br/web/api/console/timeend/index.md
rename to files/pt-br/web/api/console/timeend_static/index.md
index 2b8485e6c82680..f682215d23b487 100644
--- a/files/pt-br/web/api/console/timeend/index.md
+++ b/files/pt-br/web/api/console/timeend_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.timeEnd()
-slug: Web/API/console/timeEnd
+slug: Web/API/console/timeend_static
+original_slug: Web/API/console/timeEnd
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/pt-br/web/api/console/timestamp/index.md b/files/pt-br/web/api/console/timestamp_static/index.md
similarity index 93%
rename from files/pt-br/web/api/console/timestamp/index.md
rename to files/pt-br/web/api/console/timestamp_static/index.md
index 165d78eb54d0ca..8420121ca349b4 100644
--- a/files/pt-br/web/api/console/timestamp/index.md
+++ b/files/pt-br/web/api/console/timestamp_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.timeStamp()
-slug: Web/API/console/timeStamp
+slug: Web/API/console/timestamp_static
+original_slug: Web/API/console/timeStamp
 ---
 
 {{ APIRef("Console API") }}{{Non-standard_header}}
diff --git a/files/pt-br/web/api/console/warn/index.md b/files/pt-br/web/api/console/warn_static/index.md
similarity index 94%
rename from files/pt-br/web/api/console/warn/index.md
rename to files/pt-br/web/api/console/warn_static/index.md
index 32e9bf7a0292c8..cad66901d57478 100644
--- a/files/pt-br/web/api/console/warn/index.md
+++ b/files/pt-br/web/api/console/warn_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: Console.warn()
-slug: Web/API/console/warn
+slug: Web/API/console/warn_static
+original_slug: Web/API/console/warn
 ---
 
 {{APIRef("Console API")}}{{non-standard_header}}
diff --git a/files/pt-br/web/api/document_object_model/index.md b/files/pt-br/web/api/document_object_model/index.md
index 4abd3637b189fc..c22527f690ea0c 100644
--- a/files/pt-br/web/api/document_object_model/index.md
+++ b/files/pt-br/web/api/document_object_model/index.md
@@ -169,7 +169,6 @@ Um objeto `HTMLDocument` também da acesso á vários recursos de navegadores co
 
 ### Obsoleto HTML interfaces
 
-- {{domxref("HTMLBaseFontElement")}}
 - {{domxref("HTMLIsIndexElement")}}
 
 ## SVG interfaces
diff --git a/files/pt-br/web/api/node/index.md b/files/pt-br/web/api/node/index.md
index f60eeee1f55677..76a0621757edcf 100644
--- a/files/pt-br/web/api/node/index.md
+++ b/files/pt-br/web/api/node/index.md
@@ -96,7 +96,6 @@ _Herda propriedades de seus pais, {{domxref("EventTarget")}}_.\[1]
 - {{domxref("Node.isDefaultNamespace")}}
 - {{domxref("Node.isEqualNode")}}
 - {{domxref("Node.isSameNode")}} {{deprecated_inline}}
-- {{domxref("Node.isSupported")}}
 - {{domxref("Node.lookupPrefix")}}
 - {{domxref("Node.lookupNamespaceURI")}}
 - {{domxref("Node.normalize")}}
diff --git a/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md b/files/pt-br/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
similarity index 98%
rename from files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md
rename to files/pt-br/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
index 4ff249ef945323..a60842364391d5 100644
--- a/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md
+++ b/files/pt-br/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
@@ -1,6 +1,7 @@
 ---
 title: Requisições síncronas e assíncronas
-slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+slug: Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests
+original_slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
 ---
 
 `XMLHttpRequest` suporta comunicações síncronas e assíncronas. No geral, entretando, requisições assíncronas devem prevalecer sobre requisições síncronas por questões de performance.
diff --git a/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/pt-br/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
similarity index 99%
rename from files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.md
rename to files/pt-br/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index c1deef22c8db15..50121197a66863 100644
--- a/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.md
+++ b/files/pt-br/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -1,6 +1,7 @@
 ---
 title: Usando XMLHttpRequest
-slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+slug: Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
+original_slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
 ---
 
 [`XMLHttpRequest`](/pt-BR/docs/DOM/XMLHttpRequest) torna o envio de requisições HTTP muito fácil. Basta criar uma instância do objeto, abrir uma url e enviar uma requisição. O [status](/pt-BR/docs/HTTP/HTTP_response_codes) [HTTP](/pt-BR/docs/HTTP/HTTP_response_codes)do resultado assim como o seu conteúdo estarão disponíveis quando a transação for completada. Esta página descreve alguns casos comuns de uso desse poderoso objeto JavaScript.
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/fromcharcode/index.md b/files/pt-br/web/javascript/reference/global_objects/string/fromcharcode/index.md
index 2804d22406b97d..f254141189e340 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/fromcharcode/index.md
+++ b/files/pt-br/web/javascript/reference/global_objects/string/fromcharcode/index.md
@@ -40,7 +40,7 @@ String.fromCharCode(65, 66, 67); // retorna "ABC"
 
 ## Fazendo-o funcionar com valores maiores
 
-Embora os valores Unicode mais comuns possam ser representados com um número de 16 bits (como experado durante a padronização do JavaScript) e o fromCharCode() possa ser usado para retornar um único caracter dos valores mais comuns (por exemplo: valores UCS-2 que são os melhores subconjuntos do UTF-16 com os caractres mais comuns), a fim de resolver TODOS os valores Unicode legais (até 21 bits) o método fromCharCode() sozinho é inadequado. Como os caracteres de ponto de código mais alto usam 2 (valor menor) numeros "substitutos" para formar um único caracter, {{jsxref("String.fromCodePoint()")}} (parte do padrão ES2015) pode ser usado para retornar tal par e ainda representar adequadamente esses caracteres de valores altos.
+Embora os valores Unicode mais comuns possam ser representados com um número de 16 bits (como esperado durante a padronização do JavaScript) e o fromCharCode() possa ser usado para retornar um único caracter dos valores mais comuns (por exemplo: valores UCS-2 que são os melhores subconjuntos do UTF-16 com os caractres mais comuns), a fim de resolver TODOS os valores Unicode legais (até 21 bits) o método fromCharCode() sozinho é inadequado. Como os caracteres de ponto de código mais alto usam 2 (valor menor) numeros "substitutos" para formar um único caracter, {{jsxref("String.fromCodePoint()")}} (parte do padrão ES2015) pode ser usado para retornar tal par e ainda representar adequadamente esses caracteres de valores altos.
 
 ## Especificações
 
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index 4fb9d39bdefac8..5908c4f15718de 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -464,7 +464,7 @@
 /ru/docs/Web/API/GlobalEventHandlers/onselect	/ru/docs/Web/API/HTMLInputElement/select_event
 /ru/docs/Web/API/GlobalEventHandlers/onsubmit	/ru/docs/Web/API/HTMLFormElement/submit_event
 /ru/docs/Web/API/HTMLAudioElement/Audio()	/ru/docs/Web/API/HTMLAudioElement/Audio
-/ru/docs/Web/API/HTMLBaseFontElement	/ru/docs/conflicting/Web/CSS/CSS_Fonts
+/ru/docs/Web/API/HTMLBaseFontElement	/ru/docs/Web/CSS/CSS_Fonts
 /ru/docs/Web/API/HTMLContentElement	/ru/docs/Web/API/HTMLSlotElement
 /ru/docs/Web/API/HTMLElement/invalid	/ru/docs/Web/API/HTMLInputElement/invalid_event
 /ru/docs/Web/API/HTMLElement/pointerover_event	/ru/docs/Web/API/Element/pointerover_event
@@ -498,7 +498,7 @@
 /ru/docs/Web/API/Node.replaceChild	/ru/docs/Web/API/Node/replaceChild
 /ru/docs/Web/API/Node.textContent	/ru/docs/Web/API/Node/textContent
 /ru/docs/Web/API/Node/innerText	/ru/docs/Web/API/HTMLElement/innerText
-/ru/docs/Web/API/Node/isSupported	/ru/docs/conflicting/Web/API/Node
+/ru/docs/Web/API/Node/isSupported	/ru/docs/Web/API/Node
 /ru/docs/Web/API/Node/localName	/ru/docs/Web/API/Element/localName
 /ru/docs/Web/API/Node/namespaceURI	/ru/docs/Web/API/Element/namespaceURI
 /ru/docs/Web/API/Node/prefix	/ru/docs/Web/API/Element/prefix
diff --git a/files/ru/conflicting/web/api/node/index.md b/files/ru/conflicting/web/api/node/index.md
deleted file mode 100644
index 8e4b2a0a71f88d..00000000000000
--- a/files/ru/conflicting/web/api/node/index.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Node.isSupported()
-slug: conflicting/Web/API/Node
-original_slug: Web/API/Node/isSupported
----
-
-{{APIRef("DOM")}}
-
-**`Node.isSupported()`** возвращает {{domxref("Boolean")}} флаг содержащий результат проверки реализует ли реализация DOM определённое свойство и поддерживается ли это свойство конкретным узлом.
-
-## Синтаксис
-
-```
-boolValue = element.isSupported(feature, version)
-```
-
-### Параметры
-
-- _feature_
-  - : Это {{domxref("DOMString")}} содержащая имя свойства для проверки. Это тоже имя, которое может быть передано в метод `hasFeature` в [DOMImplementation](/en/DOM/document.implementation). Возможные значения определённые в спецификации ядра DOM перечислены в DOM Level 2 [соответствующий раздел](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance).
-- _version_
-  - : Это {{domxref("DOMString")}} содержащая номер версии свойства для ис проверки.В DOM уровень 2, version 1, это строка `2.0`. если версия не указана, поддерживает любую версию свойства, вызывает метод и возвращает true.
-
-## Пример
-
-```html
-<div id="doc">
-</div>
-
-<script>
- // Получить элемент и проверить поддерживает ли он модуль DOM2 HTML.
- var main = document.getElementById('doc');
- var output = main.isSupported('HTML', '2.0');
-</script>
-```
-
-## Спецификации
-
-{{Specifications}}
-
-## Совместимость с браузерами
-
-{{Compat}}
-
-## Смотрите также
-
-- Принадлежит интерфейсу {{domxref("Node")}}.
diff --git a/files/ru/conflicting/web/css/css_fonts/index.md b/files/ru/conflicting/web/css/css_fonts/index.md
deleted file mode 100644
index 92bfa5ebd84536..00000000000000
--- a/files/ru/conflicting/web/css/css_fonts/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: HTMLBaseFontElement
-slug: conflicting/Web/CSS/CSS_Fonts
-original_slug: Web/API/HTMLBaseFontElement
----
-
-{{APIRef("HTML DOM")}}
-
-**`HTMLBaseFontElement`** интерфейс предоставляющий специальные свойства (помимо тех постоянных объектов {{domxref("HTMLElement")}} интерфейса, доступных ему также по наследству) для манипулирования {{HTMLElement("basefont")}} элементами.
-
-`элемент <basefont>` устарел HTML4 и удалён в HTML5. Это последняя спецификация которая этот элемент реализует This latest specification requires that this element implements {{domxref("HTMLUnknownElement")}} вместо `HTMLBaseFontElement`.
-
-## Свойства
-
-_Наследует свойства от его родителя, {{domxref("HTMLElement")}}._
-
-- `HTMLBaseFontElement.color`
-  - : Это {{domxref("DOMString")}} представляющий цвет текста, используя либо именованный цвет или цвет определённый в шестнадцатеричном формате `#RRGGBB`.
-- `HTMLBaseFontElement.face`
-  - : Это {{domxref("DOMString")}} представляющий список из одного или более имени шрифтов. Текст документа отображается в стиле по умолчанию, первым поддерживаемым клиентским браузером шрифтом. Если нет установленного шрифта на локальной системе, браузер обычно по умолчанию, устанавливает пропорциональный или фиксированной ширины шрифт для этой системы.
-- `HTMLBaseFontElement.size`
-  - : {{domxref("DOMString")}} предоставляет размер шрифта или как числовое значение или как относительное значение. Числовые значения в диапазоне от 1 до 7, где 1 самое маленькое значение и три значение по умолчанию. Относительное значение начинается с '+' или '-'`.`
-
-## Методы
-
-_Не имеет специфичных методов; наследует методы от родителя, {{domxref("HTMLElement")}}._
-
-## Спецификации
-
-{{Specifications}}
-
-## Совместимость с браузерами
-
-{{Compat}}
-
-## Смотрите также
-
-- HTML-элемент {{HTMLElement("basefont")}}осуществляющий этот интерфейс.
diff --git a/files/ru/orphaned/web/html/element/applet/index.md b/files/ru/orphaned/web/html/element/applet/index.md
index 60c5af02d12c95..6c25e3fc1e4aad 100644
--- a/files/ru/orphaned/web/html/element/applet/index.md
+++ b/files/ru/orphaned/web/html/element/applet/index.md
@@ -9,35 +9,35 @@ slug: orphaned/Web/HTML/Element/applet
 
 ## Атрибуты
 
-- {{htmlattrdef("align")}}
+- `align`
   - : Этот атрибут используется для установки апплета на странице относительно содержания, которая может течь вокруг него. В HTML 4.01 определяет значения снизу, слева, посередине, справа и сверху, в то время как Microsoft и Netscape также может поддерживать **absbottom**, **absmiddle**, **baseline**, **center**, и **texttop**.
-- {{htmlattrdef("alt")}}
+- `alt`
   - : This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the `<applet>` element may also be rendered as alternative text.
-- {{htmlattrdef("archive")}}
+- `archive`
   - : This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.
-- {{htmlattrdef("code")}}
+- `code`
   - : This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the `codebase` attribute.
-- {{htmlattrdef("codebase")}}
+- `codebase`
   - : This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
-- {{htmlattrdef("datafld")}}
+- `datafld`
   - : This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.
-- {{htmlattrdef("datasrc")}}
+- `datasrc`
   - : Like `datafld`, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.
-- {{htmlattrdef("height")}}
+- `height`
   - : This attribute specifies the height, in pixels, that the applet needs.
-- {{htmlattrdef("hspace")}}
+- `hspace`
   - : This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.
-- {{htmlattrdef("mayscript")}}
+- `mayscript`
   - : In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.
-- {{htmlattrdef("name")}}
+- `name`
   - : This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.
-- {{htmlattrdef("object")}}
+- `object`
   - : This attribute specifies the URL of a serialized representation of an applet.
-- {{htmlattrdef("src")}}
+- `src`
   - : As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.
-- {{htmlattrdef("vspace")}}
+- `vspace`
   - : This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.
-- {{htmlattrdef("width")}}
+- `width`
   - : This attribute specifies in pixels the width that the applet needs.
 
 ## Example
diff --git a/files/ru/web/api/attr/index.md b/files/ru/web/api/attr/index.md
index 79abea7158d676..f54d3aa3a64c8d 100644
--- a/files/ru/web/api/attr/index.md
+++ b/files/ru/web/api/attr/index.md
@@ -95,8 +95,6 @@ The following methods have been deprecated:
   - : Этот метод всегда возвращает значение false.
 - `insertBefore()`
   - : Измените значение {{domxref("Attr.value")}} взамен.
-- `isSupported()`
-  - : Вы не должны были использовать это в первую очередь, поэтому вам, вероятно, всё равно, что это больше не используется.
 - `isEqualNode()`
   - : Вы не должны были использовать это в первую очередь, поэтому вам, вероятно, всё равно, что это больше не используется.
 - `normalize()`
diff --git a/files/ru/web/api/document_object_model/index.md b/files/ru/web/api/document_object_model/index.md
index 610c6f950a8a08..38dbc920dd2f13 100644
--- a/files/ru/web/api/document_object_model/index.md
+++ b/files/ru/web/api/document_object_model/index.md
@@ -167,7 +167,6 @@ DOM чаще всего используется в JavaScript, но не явл
 
 ### Устаревшие HTML интерфейсы
 
-- {{domxref("HTMLBaseFontElement")}}
 - {{domxref("HTMLIsIndexElement")}}
 
 ## SVG интерфейсы
diff --git a/files/ru/web/api/node/index.md b/files/ru/web/api/node/index.md
index f925eccc0bd414..4683c2c31ad019 100644
--- a/files/ru/web/api/node/index.md
+++ b/files/ru/web/api/node/index.md
@@ -99,8 +99,6 @@ _Наследует методы от своих родителей {{domxref("E
   - : …
 - {{domxref("Node.isSameNode()")}}
   - : …
-- {{domxref("Node.isSupported()")}}
-  - : Возвращает [`Boolean`](/ru/docs/Web/API/Boolean) флаг содержащий результаты теста, реализует ли реализация DOM конкретную особенность и поддерживается ли эта особенность конкретным узлом.
 - {{domxref("Node.lookupPrefix()")}}
   - : …
 - {{domxref("Node.lookupNamespaceURI()")}}
diff --git a/files/ru/web/html/element/a/index.md b/files/ru/web/html/element/a/index.md
index 3ac83858ca1cff..b55c4070c04d7c 100644
--- a/files/ru/web/html/element/a/index.md
+++ b/files/ru/web/html/element/a/index.md
@@ -20,7 +20,7 @@ HTML-элемент `<a>` определяет гиперссылку для п
 
 Этот элемент включает в себя [общие атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("download")}}
+- `download`
 
   - : Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.
 
@@ -31,43 +31,43 @@ HTML-элемент `<a>` определяет гиперссылку для п
     > - Если этот атрибут установлен и `Content-Disposition:` установлен на `inline`, Firefox отдаёт преимущество `Content-Disposition`, но в тоже время Chrome отдаёт преимущество атрибуту `download`.
     > - Этот атрибут соблюдается только на ресурсах с тем же доменом.
 
-- {{htmlattrdef("href")}}
+- `href`
   - : Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут `href` указывает ссылку: либо URL, либо якорь. Якорь — это название после символа `#`, который указывает на элемент ([ID](/ru/docs/HTML/Global_attributes#attr-id)) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, `file`, `ftp` и `mailto` работают в большинстве браузеров.
 
 > **Примечание:** Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например: `<a href="#top">Вернуться наверх</a>`. [Это поведение указано в Спецификациях HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid).
 
-- {{htmlattrdef("hreflang")}}
+- `hreflang`
   - : Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в [BCP47](http://www.ietf.org/rfc/bcp/bcp47.txt) для HTML5 и [RFC1766](http://www.ietf.org/rfc/rfc1766.txt) для HTML4. Используйте этот атрибут, только если задан [`href`](/ru/docs/Web/HTML/Element/a#href).
-- {{htmlattrdef("ping")}}
+- `ping`
   - : Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.
-- {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+- `referrerpolicy` {{experimental_inline}}
   - : Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:
     - `"no-referrer"` не отправляет заголовок `Referer`.
     - `"no-referrer-when-downgrade"` не отправляет заголовок `Referer` ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
     - `"origin"` отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
     - `"origin-when-cross-origin"` отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь.
     - `"unsafe-url"` отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
-- {{htmlattrdef("rel")}}
+- `rel`
   - : Для ссылок, которые содержат атрибут `href`, этот атрибут устанавливает отношения между ссылками. Значением является [список значений](/ru/docs/Web/HTML/Link_types), разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является `void`, если не задано иное. Используйте этот тег, только если задан атрибут [`href`](/ru/docs/Web/HTML/Element/a#href).
-- {{htmlattrdef("target")}}
+- `target`
   - : Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:
     - `_self` загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.
     - `_blank` загружает документ в новой окне в HTML4 или вкладке в HTML5.
     - `_parent` загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как`_self`: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
     - `_top` в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как `_self`.Используйте этот атрибут только если указан [`href`](/ru/docs/Web/HTML/Element/a#href).
       > **Примечание:** Используя `target`, вы должны добавлять `rel="noopener noreferrer"`, чтобы избежать эксплуатацию API `window.opener`.
-- {{htmlattrdef("type")}}
+- `type`
   - : Этот атрибут определяет [MIME-тип](http://www.w3.org/TR/html4/references.html#ref-MIMETYPES) для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как `audio/wav`.Используйте этот атрибут только если указан [`href`](/ru/docs/Web/HTML/Element/a#href).
 
 ### Устаревшие
 
-- {{htmlattrdef("charset")}}
+- `charset`
 
   - : Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми [список кодировок](http://tools.ietf.org/html/rfc2045). Значением по умолчанию является ISO-8859-1.
 
     > **Предупреждение:** Этот атрибут является устарелым в HTML5 и **не должен использоваться**. Чтобы достичь такого же эффекта, используйте HTTP-заголовок `Content-Type` на ссылающемся ресурсе.
 
-- {{htmlattrdef("coords")}}
+- `coords`
   - : Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.
 - `name`
   - : Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением `id` и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и `id`, и `name` могут быть использованы с элементом `<a>`, пока у них идентичные значения.
@@ -80,7 +80,7 @@ HTML-элемент `<a>` определяет гиперссылку для п
 
 ### Нестандартные
 
-- {{htmlattrdef("datafld")}} {{Non-standard_inline}}
+- `datafld` {{Non-standard_inline}}
   - : Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.
 
 > **Предупреждение:**Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как [XMLHttpRequest](/ru/docs/nsIXMLHttpRequest), чтобы динамично заполнять страницу.
@@ -112,7 +112,7 @@ HTML-элемент `<a>` определяет гиперссылку для п
   </tbody>
 </table>
 
-- {{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+- `datasrc` {{Non-standard_inline}}
   - : Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.
 
 > **Предупреждение:**Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как [XMLHttpRequest](/ru/docs/nsIXMLHttpRequest), чтобы динамично заполнять страницу.
@@ -143,9 +143,9 @@ HTML-элемент `<a>` определяет гиперссылку для п
   </tbody>
 </table>
 
-- {{htmlattrdef("methods")}}{{Non-standard_inline}}
+- `methods`{{Non-standard_inline}}
   - : Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута `title`) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. [Значения `methods` (MSDN)](<http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx>).
-- {{htmlattrdef("urn")}}{{Non-standard_inline}}
+- `urn`{{Non-standard_inline}}
   - : Этот атрибут, предложенный Microsoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. [Значения `urn` (MSDN)](<http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx>).
 
 ## Примеры
diff --git a/files/ru/web/html/element/area/index.md b/files/ru/web/html/element/area/index.md
index ddc3e8982de68e..7b9c33f5fdaf6e 100644
--- a/files/ru/web/html/element/area/index.md
+++ b/files/ru/web/html/element/area/index.md
@@ -17,45 +17,45 @@ slug: Web/HTML/Element/area
 
 Этот элемент включает в себя только [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("accesskey")}}
+- `accesskey`
   - : Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5.
-- {{htmlattrdef("alt")}}
+- `alt`
   - : С помощью этого атрибута задаётся альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута **href**.
-- {{htmlattrdef("coords")}}
+- `coords`
   - : Задаёт значения координат для активной области. Значение и количество значений зависят от значения указанного для атрибута **shape**. Для `rect` или прямоугольника задаются две пары значений x,y **coords**: лево, верх, право и низ. Для `circle`, значения `x,y,r` где `x,y` координаты центра круга, а `r` радиус. Для `poly` или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: `x1,y1,x2,y2,x3,y3,` и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.
-- {{htmlattrdef("download")}}
+- `download`
   - : Этот атрибут, если он добавлен, указывает, что ссылка используется для скачивания файла. Смотри {{HTMLElement("a")}} для полного описания атрибута [`download`](/ru/docs/Web/HTML/Element/a#download).
-- {{htmlattrdef("href")}}
+- `href`
   - : Ссылка для активной области. Это значение действующего URL. В HTML4, этот или **nohref** атрибут обязательный. В HTML5, данный атрибут можно пропустить при условии, что активная область не является ссылкой.
-- {{htmlattrdef("hreflang")}}
+- `hreflang`
   - : Указывает язык связанного ресурса. Допустимые значения определяются [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt). Используйте данный атрибут при наличии атрибута **href**.
-- {{htmlattrdef("name")}}
+- `name`
   - : Определяет имя интерактивной области, чтобы оно могло прописаться в старых браузерах.
-- {{htmlattrdef("media")}}
+- `media`
   - : A hint of the media for which the linked resource was designed, for example `print and screen`. If omitted, it defaults to `all`. Use this attribute only if the **href** attribute is present.
-- {{htmlattrdef("nohref")}}
+- `nohref`
   - : Indicates that no hyperlink exists for the associated area. Either this attribute or the **href** attribute must be present in the element.
     > **Примечание:** This attribute is obsolete in HTML5, instead omitting the **href** attribute is sufficient.
-- {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+- `referrerpolicy` {{experimental_inline}}
   - : A string indicating which referrer to use when fetching the resource:
     - `"no-referrer"` meaning that the `Referer:` header will not be sent.
     - "`no-referrer-when-downgrade`" meaning that no `Referer:` header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.
     - `"origin"` meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
     - "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
     - `"unsafe-url"` meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
-- {{htmlattrdef("rel")}}
+- `rel`
   - : For anchors containing the **href** attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of [link types values](/ru/docs/Web/HTML/Link_types). The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the **href** attribute is present.
-- {{htmlattrdef("shape")}}
+- `shape`
   - : The shape of the associated hot spot. The specifications for HTML 5 and HTML 4 define the values `rect`, which defines a rectangular region; `circle`, which defines a circular region; `poly`, which defines a polygon; and `default`, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support `circ`, `polygon`, and `rectangle` as valid values for **shape**; these values are {{Non-standard_inline}}.
-- {{htmlattrdef("tabindex")}}
+- `tabindex`
   - : A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.
-- {{htmlattrdef("target")}}
+- `target`
   - : This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). The following keywords have special meanings:
     - `_self`: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
     - `_blank`: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
     - `_parent`: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
     - `_top`: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.Use this attribute only if the **href** attribute is present.
-- {{htmlattrdef("type")}}
+- `type`
   - : This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see <https://www.w3.org/TR/html4/references.html#ref-MIMETYPES>. Use this attribute only if the **href** attribute is present.
 
 ## Пример
diff --git a/files/ru/web/html/element/audio/index.md b/files/ru/web/html/element/audio/index.md
index 0a64b046e43cbb..ac84d6146bb42a 100644
--- a/files/ru/web/html/element/audio/index.md
+++ b/files/ru/web/html/element/audio/index.md
@@ -39,20 +39,20 @@ slug: Web/HTML/Element/audio
 
 К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("autoplay")}}
+- `autoplay`
   - : Атрибут логического типа. Если он указан, аудио начнёт автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла.
     > **Примечание:** Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.
-- {{htmlattrdef("controls")}}
+- `controls`
   - : Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
   - : Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке мультимедиа или нет. Допустимые значения:
     - `anonymous`: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется [стандарт X.509](https://tools.ietf.org/html/rfc5280) или базовая HTTP-аутентификация);
     - `use-credentials`: Запрос cross-origin (т.е. с HTTP-заголовком `Origin`) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение `anonymous`. Для получения дополнительной информации смотрите "[Настройки атрибутов CORS](/ru/docs/Web/HTML/CORS_settings_attributes)".
-- {{htmlattrdef("loop")}}
+- `loop`
   - : Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.
-- {{htmlattrdef("muted")}}
+- `muted`
   - : Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию является `false`.
-- {{htmlattrdef("preload")}}
+- `preload`
 
   - : Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведёт к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:
 
@@ -66,7 +66,7 @@ slug: Web/HTML/Element/audio
       > - Атрибут `autoplay` имеет приоритет над `preload`. Если `autoplay` указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.
       > - Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.
 
-- {{htmlattrdef("src")}}
+- `src`
   - : {{glossary("URL")}} аудио для встраивания. Это является темой [контроля доступа HTTP](/ru/docs/Web/HTTP/CORS). Этот атрибут является необязательным; вы можете вместо него использовать элемент {{htmlelement("source")}} внутри блока audio (`<audio></audio>`), чтобы указать аудио для встраивания.
 
 ## События
diff --git a/files/ru/web/html/element/base/index.md b/files/ru/web/html/element/base/index.md
index 52c4a649661584..d9e0c1cfd9c14a 100644
--- a/files/ru/web/html/element/base/index.md
+++ b/files/ru/web/html/element/base/index.md
@@ -20,9 +20,9 @@ slug: Web/HTML/Element/base
 
 К элементу **`<base>`**`можно применять` [глобальные атрибуты.](/ru/docs/Web/HTML/Global_attributes)
 
-- {{htmlattrdef("href")}}
+- `href`
   - : Базовый адрес (URL) для указания полного пути (основной, главный адрес). Если указан данный атрибут, значит этот элемент должен находиться до других элементов с атрибутами URLs. Разрешены абсолютные (внешние) и относительные (внутренние) адреса (URLs).
-- {{htmlattrdef("target")}}
+- `target`
   - : Значение атрибута определяет имя контекста, которое применяется для ссылок (`<a>`) и форм (`<form>`). Они нужны _для отображения контекста_ (пример: вкладка, окно или встроенный фрейм). Следующие ключевые слова имеют специальные значения:
     - **`_self`**: загружает результат в текущем окне или вкладке. _Если атрибут не указан, является значением по умолчанию._
     - `_blank`: загружает результат в новом окне или бланке.
diff --git a/files/ru/web/html/element/bdo/index.md b/files/ru/web/html/element/bdo/index.md
index d86a7778f36102..092472d11fc2a0 100644
--- a/files/ru/web/html/element/bdo/index.md
+++ b/files/ru/web/html/element/bdo/index.md
@@ -23,7 +23,7 @@ slug: Web/HTML/Element/bdo
 
 Этот элемент поддерживает [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("dir")}}
+- `dir`
   - : Направление, в котором должен отображаться текст внутри элемента. Возможные значения:
     - `ltr`: Указывает, что текст должен идти слева направо.
     - `rtl`: Указывает, что текст должен идти справа налево.
diff --git a/files/ru/web/html/element/blockquote/index.md b/files/ru/web/html/element/blockquote/index.md
index f43bd19df85c7a..44c57055a02b06 100644
--- a/files/ru/web/html/element/blockquote/index.md
+++ b/files/ru/web/html/element/blockquote/index.md
@@ -21,7 +21,7 @@ slug: Web/HTML/Element/blockquote
 
 Для данного элемента доступны [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : URL, указывающий на исходный документ или сообщение, откуда была взята цитата. Этот атрибут предназначен для того, чтобы сослаться на информацию, объясняющую контекст, или ссылки, из которых была взята цитата.
 
 ## Пример
diff --git a/files/ru/web/html/element/body/index.md b/files/ru/web/html/element/body/index.md
index 6a8ac7ab1b84e4..dae9b3475b622a 100644
--- a/files/ru/web/html/element/body/index.md
+++ b/files/ru/web/html/element/body/index.md
@@ -75,61 +75,61 @@ slug: Web/HTML/Element/body
 
 К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("alink")}}
+- `alink`
   - : Цвет текста гиперссылок, когда они выделены. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":active")}}._
-- {{htmlattrdef("background")}}
+- `background`
   - : URI изображения для использования в качестве фона. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("background")}}._
-- {{htmlattrdef("bgcolor")}}
+- `bgcolor`
   - : Цвет фона документа. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("background-color")}}._
-- {{htmlattrdef("bottommargin")}}
+- `bottommargin`
   - : Отступ от нижнего края элемента `<body>`. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-bottom")}}._
-- {{htmlattrdef("leftmargin")}}
+- `leftmargin`
   - : Отступ от левого края элемента `<body>`. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-left")}}._
-- {{htmlattrdef("link")}}
+- `link`
   - : Цвет текста непосещенных гипертекстовых ссылок. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":link")}}._
-- {{htmlattrdef("onafterprint")}}
+- `onafterprint`
   - : Функция для вызова после того, как пользователь распечатал документ.
-- {{htmlattrdef("onbeforeprint")}}
+- `onbeforeprint`
   - : Функция для вызова, когда пользователь отправляет документ на печать.
-- {{htmlattrdef("onbeforeunload")}}
+- `onbeforeunload`
   - : Функция для вызова перед закрытием окна документа или переходом на другую, внешнюю, страницу в этой же вкладке.
-- {{htmlattrdef("onblur")}}
+- `onblur`
   - : Функция для вызова при потери документом фокуса.
-- {{htmlattrdef("onerror")}}
+- `onerror`
   - : Функция для вызова, когда документ не загружается должным образом.
-- {{htmlattrdef("onfocus")}}
+- `onfocus`
   - : Функция для вызова, когда документ получает фокус.
-- {{htmlattrdef("onhashchange")}}
+- `onhashchange`
   - : Функция для вызова, когда изменяется часть идентификатора фрагмента (начинается с символа `'#'`) текущего адреса документа.
-- {{htmlattrdef("onlanguagechange")}} {{experimental_inline}}
+- `onlanguagechange` {{experimental_inline}}
   - : Функция для вызова при изменении предпочитаемых языков.
-- {{htmlattrdef("onload")}}
+- `onload`
   - : Функция для вызова, когда документ закончил загрузку (страницы загружена).
-- {{htmlattrdef("onmessage")}}
+- `onmessage`
   - : Функция для вызова, когда документ получил сообщение.
-- {{htmlattrdef("onoffline")}}
+- `onoffline`
   - : Функция для вызова, когда происходит сбой сетевого соединения.
-- {{htmlattrdef("ononline")}}
+- `ononline`
   - : Функция для вызова, когда произошло восстановление сетевого соединения.
-- {{htmlattrdef("onpopstate")}}
+- `onpopstate`
   - : Функция для вызова, когда пользователь осуществил управление историей сеанса.
-- {{htmlattrdef("onredo")}}
+- `onredo`
   - : Функция для вызова, когда произошло продвижение пользователя вперёд по истории транзакций (например, обновление страницы).
-- {{htmlattrdef("onresize")}}
+- `onresize`
   - : Функция для вызова, когда размер документа был изменён.
-- {{htmlattrdef("onstorage")}}
+- `onstorage`
   - : Функция для вызова, когда изменяется содержимое хранилища ([Web Storage](/ru/docs/Web/API/Web_Storage_API)).
-- {{htmlattrdef("onundo")}}
+- `onundo`
   - : Функция для вызова, когда произошло продвижение пользователя назад по истории транзакций (например, переход на предыдущую страницу в активной вкладке).
-- {{htmlattrdef("onunload")}}
+- `onunload`
   - : Функция для вызова, когда пользователь покидает страницу (закрытие вкладки или окна браузера).
-- {{htmlattrdef("rightmargin")}}
+- `rightmargin`
   - : Отступ от правого края элемента `<body>`. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-right")}}._
-- {{htmlattrdef("text")}}
+- `text`
   - : Основной цвет текста. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}}._
-- {{htmlattrdef("topmargin")}}
+- `topmargin`
   - : Отступ от верхнего края элемента `<body>`. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-top")}}._
-- {{htmlattrdef("vlink")}}
+- `vlink`
   - : Цвет текста посещённой гипертекстовой ссылки. _Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":visited")}}._
 
 ## Пример
diff --git a/files/ru/web/html/element/br/index.md b/files/ru/web/html/element/br/index.md
index 46f68dd46f9204..8e8322ce3bf73e 100644
--- a/files/ru/web/html/element/br/index.md
+++ b/files/ru/web/html/element/br/index.md
@@ -19,7 +19,7 @@ slug: Web/HTML/Element/br
 
 ### Устаревшие атрибуты
 
-- {{htmlattrdef("clear")}}
+- `clear`
 
   - : Определяет, где начинается следующая строка после перевода строки.
 
diff --git a/files/ru/web/html/element/button/index.md b/files/ru/web/html/element/button/index.md
index 06224309664b37..d22b11f99e4da0 100644
--- a/files/ru/web/html/element/button/index.md
+++ b/files/ru/web/html/element/button/index.md
@@ -19,42 +19,42 @@ slug: Web/HTML/Element/button
 
 Элемент поддерживает [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("autofocus")}}
+- `autofocus`
   - : Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.
-- {{htmlattrdef("autocomplete")}} {{non-standard_inline}}
+- `autocomplete` {{non-standard_inline}}
   - : Использование данного атрибута на элементе `<button>` не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, [Firefox сохраняет назначенное динамически отключённое состояние](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) для элемента `<button>` при последующих загрузках страницы. Установка для данного атрибута значения `off` отключает подобное поведение. Смотрите {{bug(654072)}}.
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от {{HTMLElement("fieldset")}}; если отсутствует элемент-контейнер, с установленным атрибутом **disabled**, то кнопка доступна для взаимодействия.Firefox по умолчанию, в отличие от прочих браузеров, [сохраняет назначенное динамически отключённое состояние](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) для элемента `<button>`, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут [`autocomplete`](/ru/docs/Web/HTML/Element/button#autocomplete).
-- {{htmlattrdef("form")}}
+- `form`
   - : Атрибут **form** позволяет указать элемент {{HTMLElement("form")}}, с которым связана кнопка. Данный атрибут должен хранить значение **id** элемента {{HTMLElement("form")}}. Если данный атрибут не установлен, то элемент `<button>` будет связан с родительским элементом {{HTMLElement("form")}}, если последний существует.Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент `<button>` с формой, даже в случае, если `<button>` не является наследником элемента {{HTMLElement("form")}}.
-- {{htmlattrdef("formaction")}}
+- `formaction`
   - : Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут [`action`](/ru/docs/Web/HTML/Element/form#action) у формы-родителя.
-- {{htmlattrdef("formenctype")}}
+- `formenctype`
   - : Если `button` имеет тип `submit`, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:
     - `application/x-www-form-urlencoded`: значение по умолчанию, если атрибут не указан.
     - `multipart/form-data`: следует использовать это значение, если форма содержит элемент {{HTMLElement("input")}} со значением атрибута [`type`](/ru/docs/Web/HTML/Element/input#type) `file`.
     - `text/plain` Если этот атрибут определён, он переопределяет атрибут [`enctype`](/ru/docs/Web/HTML/Element/form#enctype) у формы-родителя.
-- {{htmlattrdef("formmethod")}}
+- `formmethod`
   - : Если `button` имеет тип `submit`, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:
     - `post`: данные формы включаются в тело сообщения и отправляются на сервер.
     - `get`: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута [`action`](/ru/docs/Web/HTML/Element/form#action) и непосредственно данных, отделённых знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name\&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.Если этот атрибут определён, он переопределяет атрибут [`method`](/ru/docs/Web/HTML/Element/form#method) у формы-родителя.
-- {{htmlattrdef("formnovalidate")}}
+- `formnovalidate`
   - : Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.Если этот атрибут определён, он переопределяет атрибут [`novalidate`](/ru/docs/Web/HTML/Element/form#novalidate) у формы-родителя.
-- {{htmlattrdef("formtarget")}}
+- `formtarget`
   - : Если `button` имеет тип `submit`, этот атрибут является именем или ключевым словом,указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). If this attribute is specified, it overrides the [`target`](/ru/docs/Web/HTML/Element/form#target) attribute of the button's form owner. The following keywords have special meanings:
     - `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
     - `_blank`: Load the response into a new unnamed browsing context.
     - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
     - `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.
-- {{htmlattrdef("name")}}
+- `name`
   - : Название кнопки, которая отправляется вместе с данными формы.
-- {{htmlattrdef("type")}}
+- `type`
   - : Устанавливает тип кнопки. Достпуные значения:
     - `submit`: Кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан или если атрибут динамически изменен на пустое или недопустимое значение.
     - `reset`: Кнопка сбрасывает все элементы управления к их начальным значениям. Удаляет данные, введенные в форму.
     - `button`: Кнопка не имеет поведения по умолчанию. При этом на странице могут быть скрипты, активируемые при возникновении определённых событий на кнопке.
     - `menu`: Кнопка открывает всплывающее меню, определяемое с помощью соответствующего {{HTMLElement("menu")}} элемента.
-- {{htmlattrdef("value")}}
+- `value`
   - : Начальное значение кнопки.
 
 ## Пример
diff --git a/files/ru/web/html/element/canvas/index.md b/files/ru/web/html/element/canvas/index.md
index c2e1e56cece6e5..63c98334d57b5d 100644
--- a/files/ru/web/html/element/canvas/index.md
+++ b/files/ru/web/html/element/canvas/index.md
@@ -18,11 +18,11 @@ slug: Web/HTML/Element/canvas
 
 Этот элемент включает [global attributes](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("height")}}
+- `height`
   - : Высота в координатном пространстве в CSS пикселях. По умолчанию 150.
-- {{htmlattrdef("moz-opaque")}} {{non-standard_inline}}
+- `moz-opaque` {{non-standard_inline}}
   - : Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.
-- {{htmlattrdef("width")}}
+- `width`
   - : Ширина в координатном пространстве в CSS пикселях. По умолчанию 300.
 
 ## Описание
diff --git a/files/ru/web/html/element/caption/index.md b/files/ru/web/html/element/caption/index.md
index 66c361142c4b84..5b1c1123222f80 100644
--- a/files/ru/web/html/element/caption/index.md
+++ b/files/ru/web/html/element/caption/index.md
@@ -23,7 +23,7 @@ slug: Web/HTML/Element/caption
 
 Следующие атрибуты устаревшие и не должны использоваться. Они описаны ниже для справки при обновлении кода и для общего сведения.
 
-- {{htmlattrdef("align")}}
+- `align`
   - : Этот пронумерованный атрибут указывает как заголовок должен быть выравнен по отношению к таблице. Он может иметь одно или несколько следующих значений :
     - `left`
       - : Заголовок отображается слева от таблицы.
diff --git a/files/ru/web/html/element/data/index.md b/files/ru/web/html/element/data/index.md
index de74cf25d6e888..4eb3b1bffc8618 100644
--- a/files/ru/web/html/element/data/index.md
+++ b/files/ru/web/html/element/data/index.md
@@ -20,7 +20,7 @@ slug: Web/HTML/Element/data
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("value")}}
+- `value`
   - : Этот атрибут определяет машиночитаемый перевод содержимого элемента.
 
 ## Пример
diff --git a/files/ru/web/html/element/dd/index.md b/files/ru/web/html/element/dd/index.md
index 7ffadc6e645ed0..1ebdd46968e146 100644
--- a/files/ru/web/html/element/dd/index.md
+++ b/files/ru/web/html/element/dd/index.md
@@ -22,7 +22,7 @@ slug: Web/HTML/Element/dd
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("nowrap")}} {{Non-standard_inline}}
+- `nowrap` {{Non-standard_inline}}
   - : Если значение атрибута установлено `yes`, текст определения не будет переноситься. Значение по умолчанию `no`.
 
 ## Пример
diff --git a/files/ru/web/html/element/del/index.md b/files/ru/web/html/element/del/index.md
index 87329bb883e402..f00b297c3e3371 100644
--- a/files/ru/web/html/element/del/index.md
+++ b/files/ru/web/html/element/del/index.md
@@ -21,9 +21,9 @@ slug: Web/HTML/Element/del
 
 Атрибуты этого элемента включают [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : URI для ресурса, который объясняет изменение (например, протоколы соединений).
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : Этот атрибут устанавливает время и дату изменение и должен представлять собой строку с допустимой датой и временем (время не является обязательным параметром - параметр опционален). Если значение не может быть проанализировано как дата с опционально временем, элемент не будет иметь соответствующей временной отметки. Формат строки без времени смотри в [Format of a valid date string](/ru/docs/Web/HTML/Date_and_time_formats#date_strings). Формат строки с датой и временем описан в [Format of a valid local date and time string](/ru/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings).
 
 ## Примеры
diff --git a/files/ru/web/html/element/details/index.md b/files/ru/web/html/element/details/index.md
index 2d628b2040e3df..032aeffdd18b52 100644
--- a/files/ru/web/html/element/details/index.md
+++ b/files/ru/web/html/element/details/index.md
@@ -23,7 +23,7 @@ HTML-элемент **`<details>`** используется для раскры
 
 Элемент поддерживает только [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("open")}}
+- `open`
   - : Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.
 
 ## Пример
diff --git a/files/ru/web/html/element/dialog/index.md b/files/ru/web/html/element/dialog/index.md
index 39e12d7854d859..8cd3f80259c32a 100644
--- a/files/ru/web/html/element/dialog/index.md
+++ b/files/ru/web/html/element/dialog/index.md
@@ -20,7 +20,7 @@ slug: Web/HTML/Element/dialog
 
 Этот элемент включает в себя [общие атрибуты](/ru/docs/Web/HTML/Общие_атрибуты). Атрибут `tabindex` не должен использоваться с `<dialog>` элементом.
 
-- {{htmlattrdef("open")}}
+- `open`
   - : Этот атрибут сообщает о том, что диалог активен и доступен для взаимодействия. Когда атрибут open не установлен, диалог не должен быть видим для пользователя.
 
 ## Примеры
diff --git a/files/ru/web/html/element/embed/index.md b/files/ru/web/html/element/embed/index.md
index 141ef6bd3a1046..1eb051b99a195b 100644
--- a/files/ru/web/html/element/embed/index.md
+++ b/files/ru/web/html/element/embed/index.md
@@ -23,13 +23,13 @@ slug: Web/HTML/Element/embed
 
 Атрибуты этого элемента включают все [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("height")}}
+- `height`
   - : Отображает высоту ресурса в [CSS пикселях](https://drafts.csswg.org/css-values/#px). Это должно быть абсолютное значение; проценты _не_ допустимы.
-- {{htmlattrdef("src")}}
+- `src`
   - : Ссылка на встраиваемый ресурс.
-- {{htmlattrdef("type")}}
+- `type`
   - : MIME-тип, используемый для выбора подключаемого модуля для создания экземпляра.
-- {{htmlattrdef("width")}}
+- `width`
   - : Отображает ширину ресурса в [CSS пикселях](https://drafts.csswg.org/css-values/#px). Это должно быть абсолютное значение; проценты _не_ допустимы.
 
 ## Примечание
diff --git a/files/ru/web/html/element/fieldset/index.md b/files/ru/web/html/element/fieldset/index.md
index 6323c3837ac76e..d8f260c556ae12 100644
--- a/files/ru/web/html/element/fieldset/index.md
+++ b/files/ru/web/html/element/fieldset/index.md
@@ -15,11 +15,11 @@ slug: Web/HTML/Element/fieldset
 
 Этот элемент включает в себя [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("disabled")}}
-  - : Если этот логический атрибут установлен, все элементы управления формой, вложенные в `<fieldset>` будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму `<form>`, в отличие от атрибута {{htmlattrdef("disabled")}} на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента {{HTMLElement("legend")}} не будут отключены.
-- {{htmlattrdef("form")}}
+- `disabled`
+  - : Если этот логический атрибут установлен, все элементы управления формой, вложенные в `<fieldset>` будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму `<form>`, в отличие от атрибута `disabled` на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента {{HTMLElement("legend")}} не будут отключены.
+- `form`
   - : Этот атрибут принимает значение атрибута `id` элемента {{HTMLElement("form")}}, с которой вам нужно связать `<fieldset>`, даже если он находится вне формы.
-- {{htmlattrdef("name")}}
+- `name`
   - : Имя, связанное с группой.
     > **Примечание:** Заголовок для \<fieldset> устанавливается первым {{HTMLElement("legend")}} внутри него.
 
diff --git a/files/ru/web/html/element/font/index.md b/files/ru/web/html/element/font/index.md
index d2b67adbc40429..74877e6c9fec2b 100644
--- a/files/ru/web/html/element/font/index.md
+++ b/files/ru/web/html/element/font/index.md
@@ -14,11 +14,11 @@ _HTML фонт элемент_(`<font>`) определяет размер шр
 
 Как и все другие элементы, этот элемент поддерживается с [global attributes](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("color")}}
+- `color`
   - : Этот атрибут устанавливает цвет текста, используя либо именованный цвет, либо цвет, указанный в шестнадцатеричном формате #RRGGBB.
-- {{htmlattrdef("face")}}
+- `face`
   - : Этот атрибут содержит список разделённых запятыми одного или нескольких имён шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.
-- {{htmlattrdef("size")}}
+- `size`
   - : Этот атрибут определяет размер шрифта как числовое или относительное значение. Числовые значения варьируются от 1 до 7, при этом 1 является наименьшим, а 3 - значением по умолчанию. Его можно определить с использованием относительного значения, например, +2 или -3, которые устанавливают его относительно значения атрибута [`size`](/ru/docs/Web/HTML/Element/basefont#size) {{HTMLElement ("basefont") }}, или по отношению к 3, значение по умолчанию, если оно не существует.
 
 ## DOM interface
diff --git a/files/ru/web/html/element/form/index.md b/files/ru/web/html/element/form/index.md
index 3252736ce96c82..30cc944c60de1b 100644
--- a/files/ru/web/html/element/form/index.md
+++ b/files/ru/web/html/element/form/index.md
@@ -21,33 +21,33 @@ _Элемент HTML form_ (`<form>`) представляет (собой) ра
 
 Как и все HTML-элементы, этот элемент поддерживает [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("accept")}}
+- `accept`
   - : Список типов содержимого, разделённых запятой, которые принимает сервер.
     > **Примечание:** Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте [`accept`](/ru/docs/Web/HTML/Element/input#accept) атрибут заданного {{HTMLElement("input")}} элемента.
-- {{htmlattrdef("accept-charset")}}
+- `accept-charset`
   - : Разделённые пробелами [символьные кодировки](/ru/docs/Web/Guide/Localizations_and_character_encodings), которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает [ту же кодировку что и у страницы](/ru/docs/Web/HTTP/Headers/Content-Encoding).
     (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)
-- {{htmlattrdef("action")}}
+- `action`
   - : URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута [`formaction`](/ru/docs/Web/HTML/Element/button#formaction) на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.
-- {{htmlattrdef("autocomplete")}}
+- `autocomplete`
   - : Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута `autocomplete` на элементе формы. Возможные значения:
     - `off`: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.
     - `on`: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.
       > **Примечание:**Если вы установили значение `off` `для` `autocomplete` атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение `off` для `autocomplete` каждого {{HTMLElement("input")}} элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите [Google Chrome notes](#google_chrome_notes).
-- {{htmlattrdef("enctype")}}
+- `enctype`
   - : Когда значение атрибута method равно `post`, атрибут - [MIME тип](http://en.wikipedia.org/wiki/Mime_type) содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:
     - `application/x-www-form-urlencoded`: Значение по умолчанию, если атрибут не задан.
     - `multipart/form-data`: Используйте это значение, если пользуетесь элементом {{HTMLElement("input")}} атрибутом `type` установленным в "file".
     - `text/plain (HTML5)` Это значение может быть переписано атрибутом [`formenctype`](/ru/docs/Web/HTML/Element/button#formenctype) на элементе {{HTMLElement("button")}} или {{HTMLElement("input")}}.
-- {{htmlattrdef("method")}}
+- `method`
   - : [HTTP](/ru/docs/HTTP) метод, который браузер использует, для отправки формы. Возможные значения:
     - `post`: Соответствует HTTP [POST методу](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) ; данные из формы включаются в тело формы и посылаются на сервер.
     - `get`: Соответствует [GET методу](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3); данные из формы добавляются к URI атрибута `action`, их разделяет '?', и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.Это значение может быть переписано атрибутом [`formmethod`](/ru/docs/Web/HTML/Element/button#formmethod) на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.
-- {{htmlattrdef("name")}}
+- `name`
   - : Имя формы. В HTML 4 его использование запрещено (`id` следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.
-- {{htmlattrdef("novalidate")}}
+- `novalidate`
   - : Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом [`formnovalidate`](/ru/docs/Web/HTML/Element/button#formnovalidate) на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе, принадлежащем форме.
-- {{htmlattrdef("target")}}
+- `target`
   - : Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, _контекста_ _просмотра_ (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имеют специальное значение:
     - `_self`: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.
     - `_blank`: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
diff --git a/files/ru/web/html/element/head/index.md b/files/ru/web/html/element/head/index.md
index 84dab4d18a61c2..6f6cf083858f41 100644
--- a/files/ru/web/html/element/head/index.md
+++ b/files/ru/web/html/element/head/index.md
@@ -21,7 +21,7 @@ slug: Web/HTML/Element/head
 
 К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("profile")}}
+- `profile`
   - : {{glossary("URI")}} одного или более профилей метаданных, разделённых пробелами.
 
 ## Пример
diff --git a/files/ru/web/html/element/hr/index.md b/files/ru/web/html/element/hr/index.md
index 1155be7939f873..bc1e792f0a7524 100644
--- a/files/ru/web/html/element/hr/index.md
+++ b/files/ru/web/html/element/hr/index.md
@@ -24,15 +24,15 @@ Historically, this has been presented as a horizontal rule or line. While it may
 
 This element's attributes include the [global attributes](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
   - : Задаёт правило выравнивания.По умолчанию значение выставлено как **left**
-- {{htmlattrdef("color")}} {{Non-standard_inline}}
+- `color` {{Non-standard_inline}}
   - : Задаёт цвет линии
-- {{htmlattrdef("noshade")}} {{deprecated_inline}}
+- `noshade` {{deprecated_inline}}
   - : Sets the rule to have no shading.
-- {{htmlattrdef("size")}} {{deprecated_inline}}
+- `size` {{deprecated_inline}}
   - : Устанавливает высоту в px
-- {{htmlattrdef("width")}} {{deprecated_inline}}
+- `width` {{deprecated_inline}}
   - : Задаёт длину линии в px либо в %
 
 ## Example
diff --git a/files/ru/web/html/element/html/index.md b/files/ru/web/html/element/html/index.md
index bd4d955c79d19c..c69cf8a337dfeb 100644
--- a/files/ru/web/html/element/html/index.md
+++ b/files/ru/web/html/element/html/index.md
@@ -19,11 +19,11 @@ slug: Web/HTML/Element/html
 
 К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("manifest")}}
+- `manifest`
   - : Определяет {{glossary("URI")}} файла манифеста, указывающего ресурсы, которые должны быть сохранены в локальном кеше. Смотрите [Использование кеша приложений](/ru/docs/Web/HTML/Using_the_application_cache).
-- {{htmlattrdef("version")}}
+- `version`
   - : Определяет версию HTML DTD (Document Type Definition, больше известное как {{glossary("Doctype")}}), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.
-- {{htmlattrdef("xmlns")}}
+- `xmlns`
   - : Определяет {{glossary("Namespace", "пространство имён")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию `"http://www.w3.org/1999/xhtml"`. Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов `text/html`.
 
 ## Пример
diff --git a/files/ru/web/html/element/img/index.md b/files/ru/web/html/element/img/index.md
index 167da7c493d83f..b2b7ee2ae3c3e6 100644
--- a/files/ru/web/html/element/img/index.md
+++ b/files/ru/web/html/element/img/index.md
@@ -56,79 +56,79 @@ slug: Web/HTML/Element/img
 
 К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B).
 
-- {{htmlattrdef("alt")}}
+- `alt`
   - : Этим атрибутом задаётся альтернативное текстовое описание изображения.
     > **Примечание:** Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или [неподдерживаемый тип](#Supported_image_formats). В этих случаях браузер может заменить изображение текстом записанным в атрибуте `alt` элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте `alt`.
     > **Примечание:** Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (`alt=""`) указывает, что это изображение _не_ является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
   - : Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. [Изображения с включённой поддержкой CORS](/ru/docs/Web/HTML/CORS_enabled_image) могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "[испорченными](/ru/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases)". Допустимые значения:
     - `anonymous`: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется [стандарт X.509](https://tools.ietf.org/html/rfc5280) или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "[испорчено](/ru/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases)" и его использование будет ограничено;
     - `use-credentials`: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется вместе с передачей параметров доступа (т.е. есть {{glossary("cookie")}}, используется [стандарт X.509](https://tools.ietf.org/html/rfc5280) или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "[испорчено](/ru/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases)" и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}), ограничивая его использование в элементе {{HTMLElement("canvas")}}. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение `anonymous`. Для получения дополнительной информации смотрите "[Настройки атрибутов CORS](/ru/docs/Web/HTML/CORS_settings_attributes)".
-- {{htmlattrdef("decoding")}}
+- `decoding`
   - : Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:
     - `sync`: Декодировать изображение синхронно для одновременного отображения с другим контентом;
     - `async`: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
     - `auto`: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.
-- {{htmlattrdef("height")}}
+- `height`
   - : Внутренняя высота (см. {{glossary("Intrinsic size", "Внутренний размер")}}) изображения в пикселях.
-- {{htmlattrdef("importance")}} {{experimental_inline}}
+- `importance` {{experimental_inline}}
   - : Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:
     - `auto`: Указывает на **отсутствие предпочтений**. Браузер может использовать собственную эвристику для определения приоритета изображения;
     - `high`: Указывает браузеру, что изображение имеет **высокий** приоритет;
     - `low`: Указывает браузеру, что изображение имеет **низкий** приоритет.
-- {{htmlattrdef("intrinsicsize")}} {{experimental_inline}}
+- `intrinsicsize` {{experimental_inline}}
   - : Этот атрибут говорит браузеру игнорировать действительный {{glossary("Intrinsic size", "внутренний размер")}} изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а `narutalWidth`/`naturalHeight` изображения будут возвращать значения, указанные в этом атрибуте. [Объяснение](https://github.com/ojanvafai/intrinsicsize-attribute), [примеры](https://googlechrome.github.io/samples/intrinsic-size/index.html).
-- {{htmlattrdef("ismap")}}
+- `ismap`
   - : Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.
     > **Примечание:** Этот атрибут разрешён, только если элемент `<img>` является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом [`href`](/ru/docs/Web/HTML/Element/a#href).
-- {{htmlattrdef("loading")}} {{experimental_inline}}
+- `loading` {{experimental_inline}}
   - : Указывает на то, как браузер должен загрузить изображение:
     - `eager`: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).
     - `lazy`: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.
       > **Примечание:** Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.
-- {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+- `referrerpolicy` {{experimental_inline}}
   - : Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:
     - `no-referrer`: Заголовок {{httpheader("Referer")}} не будет отправлен;
     - `no-referrer-when-downgrade`: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;
     - `origin`: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};
     - `origin-when-cross-origin`: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;
     - `unsafe-url`: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых {{glossary("TLS")}}, к незащищённым источникам.
-- {{htmlattrdef("sizes")}}
+- `sizes`
   - : Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента. 2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. {{glossary("user agent", "Пользовательские агенты")}} используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом `srcset`, если эти источники описываются с помощью дескриптора ширины '`w`' (сокращение от width). Выбранный размер источника влияет на {{glossary("intrinsic size", "внутренний размер")}} изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут `srcset` отсутствует или не содержит значений с дескриптором '`w`', то атрибут `sizes` не будет иметь никакого эффекта.
-- {{htmlattrdef("src")}}
+- `src`
   - : {{glossary("URL")}} изображения. Этот атрибут является обязательным для элемента `<img>`. В браузерах, поддерживающих `srcset`, `src` обрабатывается как изображение-кандидат с дескриптором плотности пикселей `1x`, если только изображение с этим дескриптором уже не определено в `srcset` или если `srcset` не содержит дескрипторы '`w`'.
-- {{htmlattrdef("srcset")}}
+- `srcset`
 
   - : Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:1. {{glossary("URL")}} изображения. 2. Необязательного, пробела, сопровождаемого:
 
     - дескриптором ширины или положительным целым числом, за которым сразу же следует '`w`'. Дескриптор ширины делится на размер источника, полученный из атрибута `sizes`, для расчёта эффективной плотности пикселей;
     - дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '`x`'.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: `1x`.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте `srcset`. Повторение дескрипторов (например, два источника в одном `srcset` с одинаковым дескриптором '`2x`') так же является недопустимым.{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "[Адаптивные изображения](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)" для примера.
 
-- {{htmlattrdef("width")}}
+- `width`
   - : Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.
-- {{htmlattrdef("usemap")}}
+- `usemap`
   - : Неполный {{glossary("URL")}} (начиная с '`#`') [карты-изображения](/ru/docs/Web/HTML/Element/map), связанной с элементом.
     > **Примечание:** вы не можете использовать этот атрибут, если элемент `<img>` является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.
 
 ### Устаревшие атрибуты
 
-- {{htmlattrdef("align")}}
+- `align`
   - : Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства {{cssxref("float")}} и/или {{cssxref("vertical-align")}}. Вы можете так же использовать CSS-свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента `<img>`. Допустимые значения:
     - `top`: Аналог `vertical-align: top` или `vertical-align: text-top`;
     - `middle`: Аналог `vertical-align: -moz-middle-with-baseline`;
     - `bottom`: Отсутствует значение по умолчанию, аналог `vertical-align: unset` или `vertical-align: initial`;
     - `left`: Аналог `float: left`;
     - `right`: Аналог `float: right`.
-- {{htmlattrdef("border")}}
+- `border`
   - : Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство {{cssxref('border')}} вместо этого атрибута.
-- {{htmlattrdef("hspace")}}
+- `hspace`
   - : Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.
-- {{htmlattrdef("longdesc")}}
+- `longdesc`
   - : Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или [`id`](/ru/docs/Web/HTML/Global_attributes#id) элемента.
     > **Примечание:** Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, [HTML 5.2](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc), но был удалён из [живого стандарта HTML](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) от {{glossary("WHATWG")}}. У него неопределённое будущее; авторы должны использовать альтернативы {{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).
-- {{htmlattrdef("name")}}
+- `name`
   - : Имя для элемента. Вы должны использовать атрибут [`id`](/ru/docs/Web/HTML/Global_attributes#id) вместо этого атрибута.
-- {{htmlattrdef("vspace")}}
+- `vspace`
   - : Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.
 
 ## Взаимодействие с CSS
diff --git a/files/ru/web/html/element/input/date/index.md b/files/ru/web/html/element/input/date/index.md
index 5f584f775301c4..9c040b3dbfc7a8 100644
--- a/files/ru/web/html/element/input/date/index.md
+++ b/files/ru/web/html/element/input/date/index.md
@@ -63,19 +63,19 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti
 | [`min`](#min)   | Минимально возможная дата для установки                                                          |
 | [`step`](#step) | Шаг (в днях), с которым будет изменяться дата при нажатии кнопок вниз или вверх данного элемента |
 
-### {{htmlattrdef("max")}}
+### `max`
 
 Максимально возможная дата для установки. Если [`value`](/ru/docs/Web/HTML/Element/input#value) является более поздней датой, чем дата, указанная в атрибуте [`max`](#max), элемент отобразит ошибку при помощи [constraint validation](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation). Если в атрибуте `max` указано значение, не удовлетворяющее формату `yyyy-MM-dd`, значит элемент не будет иметь максимальной даты.
 
 В атрибуте `max` должна быть указана строка с датой, которая больше или равна дате, указанной в атрибуте `min`.
 
-### {{htmlattrdef("min")}}
+### `min`
 
 Минимально возможная дата для установки. Если [`value`](/ru/docs/Web/HTML/Element/input#value) является более ранней датой, чем дата, указанная в атрибуте [`min`](#min), элемент отобразит ошибку при помощи [constraint validation](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation). Если в атрибуте `min` указано значение, не удовлетворяющее формату `yyyy-MM-dd`, значит элемент не будет иметь минимальной даты.
 
 В атрибуте `min` должна быть указана строка с датой, которая меньше или равна дате, указанной в атрибуте `max`.
 
-### {{htmlattrdef("step")}}
+### `step`
 
 {{page("/ru/docs/Web/HTML/Element/input/number", "step-include")}}
 
diff --git a/files/ru/web/html/element/input/image/index.md b/files/ru/web/html/element/input/image/index.md
index a07881524ea9bc..393420460e4cd5 100644
--- a/files/ru/web/html/element/input/image/index.md
+++ b/files/ru/web/html/element/input/image/index.md
@@ -15,36 +15,36 @@ slug: Web/HTML/Element/input/image
 
 Этому элементу доступны глобальные атрибуты ([global attributes](/ru/docs/HTML/Global_attributes)).
 
-{{htmlattrdef("type")}}
+`type`
 
-- {{htmlattrdef("formaction")}}
+- `formaction`
   - : The URI of a program that processes the information submitted by the input element, here image if specified, it overrides the [`action`](/ru/docs/Web/HTML/Element/form#action) attribute of the element's form owner.
-- {{htmlattrdef("formenctype")}}
+- `formenctype`
   - : If the input element is an image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
     - `application/x-www-form-urlencoded`: The default value if the attribute is not specified.
     - `multipart/form-data`: Use this value if you are using an {{HTMLElement("input")}} element with the [`type`](/ru/docs/Web/HTML/Element/input#type) attribute set to `file`.
     - `text/plain` If this attribute is specified, it overrides the [`enctype`](/ru/docs/Web/HTML/Element/form#enctype) attribute of the element's form owner.
-- {{htmlattrdef("formmethod")}}
+- `formmethod`
   - : In image input element, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
     - `post`: The data from the form is included in the body of the form and is sent to the server.
     - `get`: The data from the form is appended to the **form** attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.If specified, this attribute overrides the [`method`](/ru/docs/Web/HTML/Element/form#method) attribute of the element's form owner.
-- {{htmlattrdef("formnovalidate")}}
+- `formnovalidate`
   - : This Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the [`novalidate`](/ru/docs/Web/HTML/Element/form#novalidate) attribute of the element's form owner.
-- {{htmlattrdef("formtarget")}}
+- `formtarget`
   - : This attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). If this attribute is specified, it overrides the [`target`](/ru/docs/Web/HTML/Element/form#target) attribute of the element's form owner. The following keywords have special meanings:
     - `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
     - `_blank`: Load the response into a new unnamed browsing context.
     - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
     - `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.
-- {{htmlattrdef("height")}}
+- `height`
   - : This attribute defines the height of the image displayed for the button.
-- {{htmlattrdef("required")}}
+- `required`
   - : This attribute specifies that the user must fill in a value before submitting a form but it cannot be used when the **type** attribute is `image` type (`submit`, `reset`, or `button`). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
-- {{htmlattrdef("src")}}
+- `src`
   - : This attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.
-- {{htmlattrdef("usemap")}}
+- `usemap`
   - : The name of a {{HTMLElement("map")}} element as an image map.
-- {{htmlattrdef("width")}}
+- `width`
   - : This attribute defines the width of the image displayed for the button.
 
 ## Примеры
diff --git a/files/ru/web/html/element/input/index.md b/files/ru/web/html/element/input/index.md
index 64844194b8b1f0..8b205cb16b3fee 100644
--- a/files/ru/web/html/element/input/index.md
+++ b/files/ru/web/html/element/input/index.md
@@ -28,7 +28,7 @@ slug: Web/HTML/Element/input
 
 <!---->
 
-- {{htmlattrdef("type")}}
+- `type`
 
   - : Тип элемента для отображения. Если этот атрибут не указан, по умолчанию используется `text`. Возможными значениями являются:
 
@@ -66,48 +66,48 @@ slug: Web/HTML/Element/input
     - `url`: Поле для редактирования URI. Введённое значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введённого значения. Можно использовать такие атрибуты как **pattern** или **maxlength**, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.
     - `week`: Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.
 
-- {{htmlattrdef("accept")}}
+- `accept`
   - : В случае, если значением атрибута **type** является `file`, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделённым запятыми:
-- {{htmlattrdef("accesskey")}}
+- `accesskey`
   - : Одиночный символ, который пользователь может нажать, чтобы переключить фокус на элемент управления.
-- {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+- `mozactionhint` {{non-standard_inline}}
   - : Определяет "действие-подсказку", которая используется для определения того, как будет обозначаться клавиша enter на мобильных устройствах с виртуальной клавиатурой. Поддерживаемые значения: `go`, `done`, `next`, `search`, и `send`; они автоматически сопоставляются с необходимой строкой (являются чувствительными к регистру).
-- {{htmlattrdef("autocomplete")}}
+- `autocomplete`
   - : Этот атрибут указывает, разрешено ли автоматическое заполнение поля браузером. Разрешено по умолчанию, даже если не указано. Данный атрибут игнорируется, если атрибут **type** равен `hidden, password,` `checkbox`, `radio`, `file`, или **type** кнопка (`button`, `submit`, `reset`, `image`). Возможные значения:
     - `off`: Пользователь должен каждый раз полностью вводить значение в поле или документ предусматривает свой собственный метод автозаполнения; браузер не делает автоматического заполнения записи.
     - `on`: Браузер автоматически заканчивает значение поля, основываясь на значениях, которые вводились пользователем ранее.Если не атрибут **autocomplete** не указан в `<input>`, тогда браузер использует атрибут **autocomplete** формы, которая является родительской для данной формы. The form owner is either the `form` element that this `<input>` element is a descendant of or the form element whose **id** is specified by the **form** attribute of the input element. For more information, see the [`autocomplete`](/ru/docs/Web/HTML/Element/form#autocomplete) attribute in {{HTMLElement("form")}}.
-- {{htmlattrdef("autofocus")}}
+- `autofocus`
   - : This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the **autofocus** attribute, which is a Boolean. It cannot be applied if the **type** attribute is set to `hidden` (that is, you cannot automatically set focus to a hidden control).
-- {{htmlattrdef("autosave")}}
+- `autosave`
   - : This attribute should be defined as a unique value. If the value of the type attribute is `search`, previous search term values will persist in the dropdown across page load.
-- {{htmlattrdef("checked")}}
+- `checked`
   - : When the value of the **type** attribute is `radio` or `checkbox`, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : This Boolean attribute indicates that the form control is not available for interaction. In particular, the `click` event [will not be dispatched](http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls) on disabled controls. Also, a disabled control's value isn't submitted with the form.
-- {{htmlattrdef("form")}}
+- `form`
   - : The form element that the input element is associated with (its _form owner_). The value of the attribute must be an **id** of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this `<input>` element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place `<input>` elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
-- {{htmlattrdef("formaction")}}
+- `formaction`
   - : The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the [`action`](/ru/docs/Web/HTML/Element/form#action) attribute of the element's form owner.
-- {{htmlattrdef("formenctype")}}
+- `formenctype`
   - : If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
     - `application/x-www-form-urlencoded`: The default value if the attribute is not specified.
     - `multipart/form-data`: Use this value if you are using an {{HTMLElement("input")}} element with the [`type`](/ru/docs/Web/HTML/Element/input#type) attribute set to `file`.
     - `text/plain` If this attribute is specified, it overrides the [`enctype`](/ru/docs/Web/HTML/Element/form#enctype) attribute of the element's form owner.
-- {{htmlattrdef("formmethod")}}
+- `formmethod`
   - : If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
     - `post`: The data from the form is included in the body of the form and is sent to the server.
     - `get`: The data from the form are appended to the **form** attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.If specified, this attribute overrides the [`method`](/ru/docs/Web/HTML/Element/form#method) attribute of the element's form owner.
-- {{htmlattrdef("formnovalidate")}}
+- `formnovalidate`
   - : If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the [`novalidate`](/ru/docs/Web/HTML/Element/form#novalidate) attribute of the element's form owner.
-- {{htmlattrdef("formtarget")}}
+- `formtarget`
   - : If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). If this attribute is specified, it overrides the [`target`](/ru/docs/Web/HTML/Element/form#target) attribute of the elements's form owner. The following keywords have special meanings:
     - `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
     - `_blank`: Load the response into a new unnamed browsing context.
     - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
     - `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.
-- {{htmlattrdef("height")}}
+- `height`
   - : If the value of the **type** attribute is `image`, this attribute defines the height of the image displayed for the button.
-- {{htmlattrdef("inputmode")}}
+- `inputmode`
   - : A hint to the browser for which keyboard to display. This attribute applies when the value of the **type** attribute is text, password, email, or url. Possible values are:
     - `verbatim`: Alphanumeric, non-prose content such as usernames and passwords.
     - `latin`: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
@@ -120,49 +120,49 @@ slug: Web/HTML/Element/input
     - `tel`: Telephone input, including asterisk and pound key. Use \<input type="tel"> if possible instead.
     - `email`: Email input. Use \<input type="email"> if possible instead.
     - `url`: URL input. Use \<input type="url"> if possible instead.
-- {{htmlattrdef("list")}}
+- `list`
   - : В атрибуте указывает `id` элемента {{HTMLElement("datalist")}}, в котором находится список предопределённых значений для заполнения. Браузер отображает только те варианты, которые соответствуют введённым символами. Этот атрибут игнорируется, когда атрибут **type** принимает значения `hidden`, `checkbox`, `radio`, `file`, или **type** в качестве кнопки.
-- {{htmlattrdef("max")}}
+- `max`
   - : The maximum (numeric or date-time) value for this item, which must not be less than its minimum (**min** attribute) value.
-- {{htmlattrdef("maxlength")}}
+- `maxlength`
   - : If the value of the **type** attribute is `text`, `email`,`search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the **size** attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.
-- {{htmlattrdef("min")}}
+- `min`
   - : The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (**max** attribute) value.
-- {{htmlattrdef("minlength")}}
+- `minlength`
   - : If the value of the **type** attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.
-- {{htmlattrdef("multiple")}}
+- `multiple`
   - : Этот Boolean атрибут указывает, может ли пользователь вводить несколько значений. Этот атрибут применяется, если для атрибута type задано значение `email` или `file`; в противном случае он игнорируется.
-- {{htmlattrdef("name")}}
+- `name`
   - : The name of the control, which is submitted with the form data.
-- {{htmlattrdef("pattern")}}
+- `pattern`
   - : A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the **title** attribute to describe the pattern to help the user. This attribute applies when the value of the **type** attribute is `text`, `search`, `tel`, `url` or `email`; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.
-- {{htmlattrdef("placeholder")}}
+- `placeholder`
   - : A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the **type** attribute is `text`, `search`, `tel`, `url` or `email`; otherwise it is ignored.
     > **Примечание:** Do not use the `placeholder` attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the `placeholder` attribute is a hint about the format the content should take. There are cases in which the `placeholder` attribute is never displayed to the user, so the form must be understandable without it.
-- {{htmlattrdef("readonly")}}
+- `readonly`
   - : This Boolean attribute indicates that the user cannot modify the value of the control. This attribute is ignored if the value of the **type** attribute is `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, or a button type.
-- {{htmlattrdef("required")}}
+- `required`
   - : This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the **type** attribute is `hidden`, `image`, or a button type (`submit`, `reset`, or `button`). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
-- {{htmlattrdef("selectionDirection")}}
+- `selectionDirection`
   - : The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
-- {{htmlattrdef("size")}}
+- `size`
   - : The initial size of the control. This value is in pixels unless the value of the **type** attribute is `text` or `password`, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the **type** attribute is set to `text`, `search`, `tel`, `url`, `email`, or `password`; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.
-- {{htmlattrdef("spellcheck")}}
+- `spellcheck`
   - : Setting the value of this attribute to `true` indicates that the element needs to have its spelling and grammar checked. The value `default` indicates that the element is to act according to a default behavior, possibly based on the parent element's own `spellcheck` value. The value `false` indicates that the element should not be checked.
-- {{htmlattrdef("src")}}
+- `src`
   - : If the value of the **type** attribute is `image`, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.
-- {{htmlattrdef("step")}}
+- `step`
   - : Works with the **min** and **max** attributes to limit the increments at which a numeric or date-time value can be set. It can be the string `any` or a positive floating point number. If this attribute is not set to `any`, the control accepts only values at multiples of the step value greater than the minimum.
-- {{htmlattrdef("tabindex")}}
+- `tabindex`
   - : The position of the element in the tabbing navigation order for the current document.
-- {{htmlattrdef("usemap")}}
+- `usemap`
   - : The name of a {{HTMLElement("map")}} element to as an image map.
-- {{htmlattrdef("value")}}
+- `value`
   - : The initial value of the control. This attribute is optional except when the value of the **type** attribute is `radio` or `checkbox`.
     Note that when reloading the page, Gecko and IE [will ignore the value specified in the HTML source](https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186), if the value was changed before the reload.
-- {{htmlattrdef("width")}}
+- `width`
   - : If the value of the **type** attribute is `image`, this attribute defines the width of the image displayed for the button.
-- {{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
+- `x-moz-errormessage` {{non-standard_inline}}
   - : This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
 
 ## Notes
diff --git a/files/ru/web/html/element/input/number/index.md b/files/ru/web/html/element/input/number/index.md
index d18d993a860cfd..4b0173734fc9eb 100644
--- a/files/ru/web/html/element/input/number/index.md
+++ b/files/ru/web/html/element/input/number/index.md
@@ -40,13 +40,13 @@ In addition to the attributes commonly supported by all {{HTMLElement("input")}}
 | [`readonly`](#readonly)       | A Boolean attribute controlling whether or not the value is read-only                                   |
 | [`step`](#step)               | A stepping interval to use when using up and down arrows to adjust the value, as well as for validation |
 
-### {{htmlattrdef("max")}}
+### `max`
 
 The maximum value to accept for this input. If the [`value`](/ru/docs/Web/HTML/Element/input#value) entered into the element exceeds this, the element fails [constraint validation](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation). If the value of the `max` attribute isn't a number, then the element has no maximum value.
 
 This value must be greater than or equal to the value of the `min` attribute.
 
-### {{htmlattrdef("min")}}
+### `min`
 
 The minimum value to accept for this input. If the [`value`](/ru/docs/Web/HTML/Element/input#value) of the element is less than this, the element fails [constraint validation](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation). If a value is specified for `min` that isn't a valid number, the input has no minimum value.
 
@@ -56,7 +56,7 @@ This value must be less than or equal to the value of the `max` attribute.
 
 {{page("/ru/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-### {{htmlattrdef("step")}}
+### `step`
 
 Атрибут `step` – это число, которое определяет точность, с которой задаётся значение, или специальное значение `any`, описанное ниже. Только значения, кратные шагу ([`min`](#min), если задано, иначе [`value`](/ru/docs/Web/HTML/Element/input#value), или подходящее стандартное значение, если ни одно из двух не задано) будут корректными.
 
diff --git a/files/ru/web/html/element/input/password/index.md b/files/ru/web/html/element/input/password/index.md
index 34ec99b43340ab..8b1601f8d3c544 100644
--- a/files/ru/web/html/element/input/password/index.md
+++ b/files/ru/web/html/element/input/password/index.md
@@ -149,7 +149,7 @@ document.getElementById("selectAll").onclick = function (event) {
 
 {{EmbedLiveSample("Валидация", 600, 40)}}
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключённые значения полей не отправляются с формой.
 
 ## Примеры
diff --git a/files/ru/web/html/element/input/range/index.md b/files/ru/web/html/element/input/range/index.md
index 8e311b24e7499d..76da91e3eece0c 100644
--- a/files/ru/web/html/element/input/range/index.md
+++ b/files/ru/web/html/element/input/range/index.md
@@ -53,17 +53,17 @@ defaultValue =
 
 Смотрите [управление диапазоном с помощью решётки](/ru/docs/Web/HTML/Element/Input/range#A_range_control_with_hash_marks) ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.
 
-### {{htmlattrdef("max")}}
+### `max`
 
 Это значение должно быть больше или равно значению атрибута `min`.
 
-### {{htmlattrdef("min")}}
+### `min`
 
 Наименьшее значение в диапазоне допустимых значений. Если [`value`](/ru/docs/Web/HTML/Element/input#value), введённый в элемент, меньше этого значения, то элемент не проходит [проверку ограничения](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation). Если значение атрибута `min` не является числом, то элемент не имеет максимального значения.
 
 Это значение должно быть меньше или равно значению атрибута `max`.
 
-### {{htmlattrdef("step")}}
+### `step`
 
 {{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}
 
@@ -75,7 +75,7 @@ defaultValue =
 | ------------------- | ---------------------------------------------------- |
 | [`orient`](#orient) | Устанавливает ориентацию слайдера. **Firefox only.** |
 
-- {{htmlattrdef("orient")}} {{non-standard_inline}}
+- `orient` {{non-standard_inline}}
   - : Похоже на -moz-orient не стандартное CSS-свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, `orient` атрибут определяем ориентацию слайдера. Значение `horizontal`, значит что слайдер будет отображён горизонтально, а `vertical`- что вертикально .
 
 > **Примечание:** Note: Следующие атрибуты не применимы: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src`, и `width`. Каждый из них будет проигнорирован в случае употребления.
diff --git a/files/ru/web/html/element/input/tel/index.md b/files/ru/web/html/element/input/tel/index.md
index a7838a1fb2dcad..942fa249c8d53d 100644
--- a/files/ru/web/html/element/input/tel/index.md
+++ b/files/ru/web/html/element/input/tel/index.md
@@ -37,19 +37,19 @@ In addition to the attributes that operate on all {{HTMLElement("input")}} eleme
 | [`readonly`](#readonly)       | A Boolean attribute which, if present, indicates that the field's contents should not be user-editable |
 | [`size`](#size)               | The number of characters wide the input field should be onscreen                                       |
 
-### {{htmlattrdef("maxlength")}}
+### `maxlength`
 
 The maximum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an integer value 0 or higher. If no `maxlength` is specified, or an invalid value is specified, the telephone number field has no maximum length. This value must also be greater than or equal to the value of `minlength`.
 
 The input will fail [constraint validation](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation) if the length of the text entered into the field is greater than `maxlength` UTF-16 code units long.
 
-### {{htmlattrdef("minlength")}}
+### `minlength`
 
 The minimum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. If no `minlength` is specified, or an invalid value is specified, the telephone number input has no minimum length.
 
 The telephone number field will fail [constraint validation](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation) if the length of the text entered into the field is fewer than `minlength` UTF-16 code units long.
 
-### {{htmlattrdef("pattern")}}
+### `pattern`
 
 {{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}
 
@@ -70,11 +70,11 @@ The following non-standard attributes are available to telephone number input fi
 | [`autocorrect`](#autocorrect)     | Whether or not to allow autocorrect while editing this input field. **Safari only.**                                                                                                                                                                                    |
 | [`mozactionhint`](#mozactionhint) | A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. **Firefox for Android only.** |
 
-### {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
+### `autocorrect` {{non-standard_inline}}
 
 {{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
 
-### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+### `mozactionhint` {{non-standard_inline}}
 
 {{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
 
diff --git a/files/ru/web/html/element/ins/index.md b/files/ru/web/html/element/ins/index.md
index e8016d54fcea6e..8135a31c14d9b5 100644
--- a/files/ru/web/html/element/ins/index.md
+++ b/files/ru/web/html/element/ins/index.md
@@ -17,9 +17,9 @@ slug: Web/HTML/Element/ins
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : Этот атрибут определяет URI ресурса, который объясняет изменения, такие как ссылка на протоколы заседаний или билет в системном поиске и устранении неисправностей.
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : Этот атрибут указывает время и дату изменения и должна быть действительной датой с дополнительной строкой времени. Если значение не может быть разобрано как дата с опциональной строкой времени, элемент не имеет соответствующего штампа времени.
 
 ## Примеры
diff --git a/files/ru/web/html/element/label/index.md b/files/ru/web/html/element/label/index.md
index d57fab19594c02..5c960bedbf4704 100644
--- a/files/ru/web/html/element/label/index.md
+++ b/files/ru/web/html/element/label/index.md
@@ -19,10 +19,10 @@ slug: Web/HTML/Element/label
 
 Элемент поддерживает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("for")}}
+- `for`
   - : ID [labelable](/ru/docs/Web/Guide/HTML/Content_categories#Form_labelable)-элемента, который находится в том же документе, что и элемент label. Первый такой элемент в документе, ID которого совпадает со значением атрибута `for`, становится `labeled-*` контролом для данного `label`.
     > **Примечание:** Элемент _label_ может иметь как атрибут _for_, так и отдельный элемент управления, если атрибут _for_ указывает на содержащийся элемент управления.
-- {{htmlattrdef("form")}}
+- `form`
   - : Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента {{HTMLElement ("form")}} в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.
     > **Примечание:** Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения {{domxref ("HTMLLabelElement.form")}}; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.
 
diff --git a/files/ru/web/html/element/li/index.md b/files/ru/web/html/element/li/index.md
index 2d8f9611b192b1..688807665fac20 100644
--- a/files/ru/web/html/element/li/index.md
+++ b/files/ru/web/html/element/li/index.md
@@ -21,11 +21,11 @@ slug: Web/HTML/Element/li
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("value")}}
+- `value`
   - : Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут **value** не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}).
     > **Примечание:** Этот атрибут был убран в HTML4, но заново добавлен в HTML5.
     > **Примечание:** Предыдущие до Gecko 9.0, отрицательные значения неправильно конвертировались в 0. Начиная с Gecko 9.0 все числовые значения воспринимаются правильно.
-- {{htmlattrdef("type")}} {{Deprecated_inline}}
+- `type` {{Deprecated_inline}}
   - : Этот символьный атрибут указывает на тип нумерации:
     - `a`: строчные буквы
     - `A`: заглавные буквы
diff --git a/files/ru/web/html/element/link/index.md b/files/ru/web/html/element/link/index.md
index 75c9d16b97dca1..e70f0f2e9c901b 100644
--- a/files/ru/web/html/element/link/index.md
+++ b/files/ru/web/html/element/link/index.md
@@ -70,24 +70,24 @@ slug: Web/HTML/Element/link
 
 Этот элемент включает в себя [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{HTMLAttrDef("as")}}
+- `as`
   - : Этот атрибут используется только для элементов `<link>` с атрибутом `rel="preload"` или `rel="prefetch"`. Он указывает тип контента, загружаемого `<link>`, который необходим для определения приоритетов контента, сравнения запросов, применения корректного [content security policy](/ru/docs/Web/HTTP/CSP), и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка.
-- {{HTMLAttrDef("crossorigin")}}
+- `crossorigin`
   - : Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. [CORS-поддерживаемые изображения](/ru/docs/Web/HTML/CORS_Enabled_Image) могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не _искажая_ их. Допустимы значения:
     - `anonymous`
       - : Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}), изображение будет искажено, а его использование ограничено.
     - `use-credentials`
       - : Cross-origin запрос (т.е. с HTTP-заголовком `Origin`) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка `Origin)`, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова **anonymous.** Для получения дополнительной информации смотрите [CORS settings attributes](/ru/docs/Web/HTML/CORS_settings_attributes).
-- {{HTMLAttrDef("href")}}
+- `href`
   - : Этот атрибут определяет {{glossary("URL")}}, связываемого ресурса. URL может быть абсолютным или относительным.
-- {{HTMLAttrDef("hreflang")}}
+- `hreflang`
   - : Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt). Используйте этот атрибут только если присутствуют атрибуты [`href`](/ru/docs/Web/HTML/Element/a#href).
-- {{HTMLAttrDef("importance")}} {{Experimental_Inline}}
+- `importance` {{Experimental_Inline}}
   - : Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:**`auto`**: указывает на **отсутствие предпочтений**. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.**`high`**: указывает браузеру, что ресурс находится в **высоком** приоритете.**`low`**: указывает браузеру, что ресурс находится в **низком** приоритете.
     > **Примечание:**Атрибут `importance` можно использовать только для элементов `<link>` с атрибутами `rel="preload"` или `rel="prefetch"`.
-- {{HTMLAttrDef("integrity")}} {{Experimental_Inline}}
+- `integrity` {{Experimental_Inline}}
   - : Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите [Subresource Integrity](/ru/docs/Web/Security/Subresource_Integrity).
-- {{HTMLAttrDef("media")}}
+- `media`
 
   - : Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или [медиавыражением](/ru/docs/Web/CSS/Media_queries). Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.
 
@@ -96,43 +96,43 @@ slug: Web/HTML/Element/link
     > - В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. [media типы и группы](/ru/docs/Web/CSS/@media), которые определены и допустимы в качестве значений для этого атрибута, такие как `print`, `screen`, `aural`, `braille`. HTML5 распространил это на любые [медиавыражения](/ru/docs/Web/CSS/Media_queries), которые являются расширенным набором допустимых значений HTML 4.
     > - Браузеры, не поддерживающие [медиавыражения](/ru/docs/Web/CSS/Media_queries), могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
 
-- {{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}
+- `referrerpolicy` {{Experimental_Inline}}
   - : Строка, указывающая какой реферер использовать при загрузки ресурсов:
     - `no-referrer` означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен.
     - `no-referrer-when-downgrade` означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
     - `origin` означает, что реферером будет источник, который соответствует схеме, хосту и порту.
     - `origin-when-cross-origin` означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
     - `unsafe-url` означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.
-- {{HTMLAttrDef("rel")}}
+- `rel`
   - : Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком [значений типов ссылки](/ru/docs/Web/HTML/Link_types).
-- {{HTMLAttrDef("sizes")}}
+- `sizes`
   - : Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если [`rel`](/ru/docs/Web/HTML/Element/link#rel) содержит значение `icon` или нестандартный тип, например `apple-touch-icon` Apple. Может иметь следующие значения:
     - `any`, означает, что иконка может быть масштабируема до любого размера, например в векторном формате `image/svg+xml`.
     - пробелоразделенный список размеров, каждый в формате `<width in pixels>x<height in pixels>` или `<width in pixels>X<height in pixels>`. Каждый из этих размеров должен содержаться в ресурсе.
       > **Примечание:**Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего [`sizes`](/ru/docs/Web/HTML/Global_attributes#sizes) содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.
-- {{HTMLAttrDef("title")}}
+- `title`
   - : Атрибут `title` имеет особое значение для элемента `<link>`. При использовании `<link rel="stylesheet">` он определяет [предпочтительную или альтернативную таблицу стилей](/ru/docs/Web/CSS/Alternative_style_sheets). Неверное использование может стать [причиной игнорирования таблицы стилей](/ru/docs/Correctly_Using_Titles_With_External_Stylesheets).
-- {{HTMLAttrDef("type")}}
+- `type`
   - : Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как **text/html**, **text/css и т.д**. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, **text/css**), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок `rel="preload"`, чтобы браузер загружал только те типы файлов, которые он поддерживает.
 
 ### Нестандартные атрибуты
 
-- {{HTMLAttrDef("disabled")}} {{Non-standard_Inline}}
+- `disabled` {{Non-standard_Inline}}
   - : Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.
     > **Примечание:**Хотя в стандарте HTML нет атрибута `disabled`, атрибут `disabled` есть в объекте DOM `HTMLLinkElement`.
-- {{HTMLAttrDef("methods")}} {{Non-standard_Inline}}
+- `methods` {{Non-standard_Inline}}
   - : Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту **title**) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.
-- {{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}
+- `prefetch` {{Non-standard_Inline}} {{secureContext_inline}}
   - : Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.
-- {{HTMLAttrDef("target")}} {{Non-standard_Inline}}
+- `target` {{Non-standard_Inline}}
   - : Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.
 
 ### Устаревшие атрибуты
 
-- {{HTMLAttrDef("charset")}}
+- `charset`
   - : Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в {{rfc(2045)}}. Значение по умолчанию `iso-8859-1`.
     > **Примечание:** Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.
-- {{HTMLAttrDef("rev")}}
+- `rev`
   - : Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом [`href`](/ru/docs/Web/HTML/Element/link#href). Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута `rel`. [Значения типов ссылки](/ru/docs/Web/HTML/Link_types) для атрибута аналогичны возможным значениям для [`rel`](/ru/docs/Web/HTML/Element/link#rel).
     > **Примечание:** Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что `rev` _не_ считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на `rev` не стоит.
     > **Примечание:** Взамен, вы должны использовать атрибут [`rel`](/ru/docs/Web/HTML/Element/link#rel) с противоположным [значением типов ссылки](/ru/docs/Web/HTML/Link_types). Например, чтобы установить обратную ссылку для `made`, укажите `author`.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.
diff --git a/files/ru/web/html/element/map/index.md b/files/ru/web/html/element/map/index.md
index 67788ef7541219..80385d099f1a5a 100644
--- a/files/ru/web/html/element/map/index.md
+++ b/files/ru/web/html/element/map/index.md
@@ -21,7 +21,7 @@ slug: Web/HTML/Element/map
 
 Элемент включает [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("name")}}
+- `name`
   - : Атрибут name даёт карте имя, чтобы на неё можно было ссылаться. Атрибут должен быть определён и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.
 
 ## Пример
diff --git a/files/ru/web/html/element/marquee/index.md b/files/ru/web/html/element/marquee/index.md
index 172408ecf93d5f..bdc33c6ae50aaa 100644
--- a/files/ru/web/html/element/marquee/index.md
+++ b/files/ru/web/html/element/marquee/index.md
@@ -11,36 +11,36 @@ HTML-элемент `<marquee>` используется для создания
 
 ## Атрибут
 
-- {{htmlattrdef("behavior")}}
+- `behavior`
   - : Описывает поведение прокрутки. Допустимые значения: `scroll`, `slide` `и alternate`. Если значение не указано, то используется `scroll`.
-- {{htmlattrdef("bgcolor")}}
+- `bgcolor`
   - : Задаёт цвет фона (можно использовать имя цвета или шестнадцатеричное значение).
-- {{htmlattrdef("direction")}}
+- `direction`
   - : Задаёт направление прокрутки. `Допустимые значения: left`, `right`, `up` и `down`. Если значение не указано, то используется `left`.
-- {{htmlattrdef("height")}}
+- `height`
   - : Задаёт высоту в пикселях или процентах.
-- {{htmlattrdef("hspace")}}
+- `hspace`
   - : Задаёт поле (margin) слева.
-- {{htmlattrdef("loop")}}
+- `loop`
   - : Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку
-- {{htmlattrdef("scrollamount")}}
+- `scrollamount`
   - : Задаёт сдвиг на каждом шаге в пикселях. По умолчанию 6.
-- {{htmlattrdef("scrolldelay")}}
+- `scrolldelay`
   - : Задаёт интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут `truespeed`.
-- {{htmlattrdef("truespeed")}}
+- `truespeed`
   - : По умолчанию значения меньше 60 в `scrolldelay` игнорируются. Однако, если присутствует `truespeed`, то они не игнорируются
-- {{htmlattrdef("vspace")}}
+- `vspace`
   - : Задаёт вертикальный отступ (margin) в пикселях или процентах.
-- {{htmlattrdef("width")}}
+- `width`
   - : Задаёт ширину в пикселях или процентах.
 
 ## Обработчики событий
 
-- {{htmlattrdef("onbounce")}}
+- `onbounce`
   - : Срабатывает, когда marquee достиг конечного состояния. Срабатывает только в случаях, когда `behavior` имеет значение `alternate`.
-- {{htmlattrdef("onfinish")}}
+- `onfinish`
   - : Срабатывает, когда marquee прокрутился столько раз, сколько было задано в атрибуте `loop`. Срабатывает только тогда, когда атрибут `loop` имеет положительное значение.
-- {{htmlattrdef("onstart")}}
+- `onstart`
   - : Срабатывает в начале прокрутки.
 
 ## Методы
diff --git a/files/ru/web/html/element/menu/index.md b/files/ru/web/html/element/menu/index.md
index 1bfcf11f1e53b2..ca62d6ff588cb3 100644
--- a/files/ru/web/html/element/menu/index.md
+++ b/files/ru/web/html/element/menu/index.md
@@ -20,9 +20,9 @@ slug: Web/HTML/Element/menu
 
 К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{HTMLAttrDef("label")}} {{Deprecated_inline}}
+- `label` {{Deprecated_inline}}
   - : The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the _context menu_ state.
-- {{HTMLAttrDef("type")}}
+- `type`
   - : This attribute indicates the kind of menu being declared, and can be one of two values.\* `context` {{Deprecated_inline}} : Indicates the _popup menu_ state, which represents a group of commands activated through another element. This might be as a button menu referenced by a [`menu`](/ru/docs/Web/HTML/Element/button#menu) attribute of a {{HTMLElement("button")}} element, or as context menu for an element with a [`contextmenu`](/ru/docs/HTML/Global_attributes#attr-contextmenu) attribute. This value is the default if the attribute is missing and the parent element is also a `<menu>` element.
     - `toolbar`: Indicates the _toolbar_ state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of {{HTMLElement("li")}} elements, or, if the element has no `<li>` element children, [flow content](/ru/docs/Web/HTML/Content_categories#Flow_content) describing available commands. This value is the default if the attribute is missing.
 
diff --git a/files/ru/web/html/element/meta/index.md b/files/ru/web/html/element/meta/index.md
index 1ee88fd1e59cfc..b529ab7269749c 100644
--- a/files/ru/web/html/element/meta/index.md
+++ b/files/ru/web/html/element/meta/index.md
@@ -21,7 +21,7 @@ slug: Web/HTML/Element/meta
 
 > **Примечание:** атрибут [`name`](/ru/docs/Web/HTML/Element/meta#name) имеет особое значение для элемента `<meta>` и атрибут [`itemprop`](/ru/docs/Web/HTML/Global_attributes#itemprop) не должен быть задан в `<meta>` элементе в котором уже определены какие-либо [`name`](/ru/docs/Web/HTML/Element/meta#name), [`http-equiv`](/ru/docs/Web/HTML/Element/meta#http-equiv) или [`charset`](/ru/docs/Web/HTML/Element/meta#charset) атрибуты.
 
-- {{htmlattrdef("charset")}}
+- `charset`
 
   - : Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать [стандартное имя IANA MIME для кодировки символов](https://www.iana.org/assignments/character-sets). Хотя стандарт не требует определённой кодировки, он рекомендует:
 
@@ -43,9 +43,9 @@ slug: Web/HTML/Element/meta
       > - Этот {{HTMLElement("meta")}} элемент это синоним для pre-HTML5 `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` где *`IANAcharset` *соответствует значению эквивалентного [`charset`](/ru/docs/Web/HTML/Element/meta#charset) атрибута.
       >   Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.
 
-- {{htmlattrdef("content")}}
+- `content`
   - : Этот атрибут содержит значение для [`http-equiv`](/ru/docs/Web/HTML/Element/meta#http-equiv) или [`name`](/ru/docs/Web/HTML/Element/meta#name) атрибута, в зависимости от контекста.
-- {{htmlattrdef("http-equiv")}}
+- `http-equiv`
 
   - : Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью [`content`](/ru/docs/Web/HTML/Element/meta#content) и может быть следующим:
 
@@ -78,7 +78,7 @@ slug: Web/HTML/Element/meta
       - : Эта прагма определяет [cookie](/ru/docs/cookie) для страницы. Её содержимое должно заканчиваться синтаксисом, определяемым [IETF HTTP Cookie Specification](https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14).
         > **Примечание:** Не используете эту прагму, так как она устарела. Используйте HTTP header set-cookie вместо этого.
 
-- {{htmlattrdef("name")}}
+- `name`
 
   - : Этот атрибут определяет имя уровня документа метаданных.
     Его не следует устанавливать, если один из атрибутов [`itemprop`](/ru/docs/Web/HTML/Element/meta#itemprop), [`http-equiv`](/ru/docs/Web/HTML/Element/meta#http-equiv) или [`charset`](/ru/docs/Web/HTML/Element/meta#charset) также указан в наборе.
@@ -153,7 +153,7 @@ slug: Web/HTML/Element/meta
       > - Значения по умолчанию могут быть изменены у разных браузеров или устройств..
       > - Для изучения этой прагмы на Firefox for Mobile, посмотрите статью [this article](/ru/docs/Mobile/Viewport_meta_tag).
 
-- {{htmlattrdef("scheme")}}
+- `scheme`
 
   - : Этот атрибут определяет схему, которая описывает метаданные.
     Схема - это контекст, ведущий к правильной интерпретации [`content`](/ru/docs/Web/HTML/Element/meta#content) значения, например формата.
diff --git a/files/ru/web/html/element/meter/index.md b/files/ru/web/html/element/meter/index.md
index 8eb60c867c9d51..b2dcb95426f011 100644
--- a/files/ru/web/html/element/meter/index.md
+++ b/files/ru/web/html/element/meter/index.md
@@ -21,20 +21,20 @@ slug: Web/HTML/Element/meter
 
 Этот элемент включает в себя [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("value")}}
+- `value`
   - : Текущее числовое значение. Он должен быть между минимальным и максимальным значением (`min` атрибут и `max` атрибут), если они указаны. Если он не указан или имеет неверное значение, значение равно 0. Если указан, но не в пределах диапазона, заданного атрибутами `min` и `max`, значение будет равно ближайшему концу диапазона.
     > **Примечание:** Если атрибут `value` не находится в диапазоне от `0` до `1` (включительно), то атрибуты `min` и `max` должны определять диапазон, в котором будет находиться значение `value`.
-- {{htmlattrdef("min")}}
+- `min`
   - : Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (`max` атрибут), если указан. Если не определён, то минимальное значение равно 0.
-- {{htmlattrdef("max")}}
+- `max`
   - : Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (`min` атрибут), если указан. Если не определён, то максимальное значение равно 1.
-- {{htmlattrdef("low")}}
+- `low`
   - : Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (`min` атрибут), а также, меньше, чем значение high и максимальное значение(`high` атрибут и `max` атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение `low` равно минимальному значению.
-- {{htmlattrdef("high")}}
+- `high`
   - : Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (`max` атрибут), а также, больше, чем значение low и минимальное значение (`low` атрибут и **min** атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение `high` равно максимальному значению.
-- {{htmlattrdef("optimum")}}
+- `optimum`
   - : Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определён атрибутами `min` и `max`). При использовании с атрибутами `low` и `high`, он указывает какая часть диапазона является предпочтительной. Например, если он находится между атрибутами `min` и `low`, нижний диапазон является предпочтительным.
-- {{htmlattrdef("form")}}
+- `form`
   - : Этот атрибут связывает элемент с элементом `form`, частью которого является элемент `meter`. Например, `meter` может отображать диапазон, соответствующий элементу `input` с `type` _number_. Этот атрибут используется только в случае, если элемент `meter` используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента `form`.
 
 ## Примеры
diff --git a/files/ru/web/html/element/ol/index.md b/files/ru/web/html/element/ol/index.md
index 9816b8f923c8e1..17cb997eb5f78c 100644
--- a/files/ru/web/html/element/ol/index.md
+++ b/files/ru/web/html/element/ol/index.md
@@ -21,11 +21,11 @@ slug: Web/HTML/Element/ol
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{HTMLAttrDef("reversed")}}
+- `reversed`
   - : Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
-- {{HTMLAttrDef("start")}}
+- `start`
   - : Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация `type` в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте `start="4"`.
-- {{HTMLAttrDef("type")}}
+- `type`
   - : Задаёт тип нумерации:
     - `a` для строчных букв
     - `A` для заглавных букв
diff --git a/files/ru/web/html/element/optgroup/index.md b/files/ru/web/html/element/optgroup/index.md
index 1a944ff94c3f3b..b079b896ba0724 100644
--- a/files/ru/web/html/element/optgroup/index.md
+++ b/files/ru/web/html/element/optgroup/index.md
@@ -19,9 +19,9 @@ slug: Web/HTML/Element/optgroup
 
 Элемент `<optgroup>` допускает использование [глобальных атрибутов](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Если установить этот атрибут, опции, находящиеся внутри элемента станут недоступными для выбора. Часто браузеры отображают эти опции серым цветом и игнорируют срабатывающие на них события, такие как события мыши или события получения фокуса.
-- {{htmlattrdef("label")}}
+- `label`
   - : Имя группы, которое будет отображено браузером в выпадающем списке. Этот атрибут обязателен.
 
 ## Пример
diff --git a/files/ru/web/html/element/option/index.md b/files/ru/web/html/element/option/index.md
index 85a7385b5f6335..cf10b330589e56 100644
--- a/files/ru/web/html/element/option/index.md
+++ b/files/ru/web/html/element/option/index.md
@@ -19,13 +19,13 @@ slug: Web/HTML/Element/option
 
 Как и все HTML-элементы, этот элемент поддерживает [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("disabled")}} — отключён(о)
+- `disabled` — отключён(о)
   - : Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все ещё можно отключить (может не работать), если отключён внешний(one of its ancestors) элемент {{HTMLElement("optgroup")}}.
-- {{htmlattrdef("label")}} — метка, ярлык
+- `label` — метка, ярлык
   - : Этот атрибут - текст ярлыка, отображающий значение(смысл, описание) опции. Если `label` не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента `<option>`.
-- {{htmlattrdef("selected")}} — выбран(о)
+- `selected` — выбран(о)
   - : (Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент `<option>` принадлежит элементу {{HTMLElement("select")}}, чей атрибут [`multiple`](/ru/docs/Web/HTML/Element/select#multiple) не установлен, только одна-единственная `<option>` элемента {{HTMLElement("select")}} может иметь атрибут `selected` .
-- {{htmlattrdef("value")}} — значение, величина
+- `value` — значение, величина
   - : Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берётся из текстового содержания элемента `<option>`.
 
 ## Примеры
diff --git a/files/ru/web/html/element/output/index.md b/files/ru/web/html/element/output/index.md
index 654f62ccd51d24..798740a0e3bcef 100644
--- a/files/ru/web/html/element/output/index.md
+++ b/files/ru/web/html/element/output/index.md
@@ -19,11 +19,11 @@ slug: Web/HTML/Element/output
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("for")}}
+- `for`
   - : Пробело-разделяемый список [`id`](/ru/docs/Web/HTML/Global_attributes/id) других элементов, указывающий, что эти элементы предоставили входные значения для (или иным образом повлияли) вычисления.
-- {{htmlattrdef("form")}}
+- `form`
   - : [Элемент формы](/ru/docs/Web/HTML/Element/form), с которым связан этот элемент ("владелец формы"). Значением атрибута должен быть `id` элемента {{HTMLElement("form")}} в том же документе. Этот атрибут не нужен, если элемент `<output>` является потомком элемента `<form>` (в этом случае эта форма является владельцем формы), или, если элемент `<output>` вообще не связан с формой.
-- {{htmlattrdef("name")}}
+- `name`
   - : Имя элемента; используется для идентификации этого `<output>` при отправке формы.
 
 ## Пример
diff --git a/files/ru/web/html/element/pre/index.md b/files/ru/web/html/element/pre/index.md
index ed684eb07f3e0d..b2e947640baafb 100644
--- a/files/ru/web/html/element/pre/index.md
+++ b/files/ru/web/html/element/pre/index.md
@@ -22,11 +22,11 @@ slug: Web/HTML/Element/pre
 
 Этот элемент включает в себя только [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("cols")}} {{non-standard_inline}}
+- `cols` {{non-standard_inline}}
   - : Содержит _предпочтительное_ количество символов, которое должна иметь строка. Это был нестандартный синоним [`width`](/ru/docs/Web/HTML/Element/pre#width). Чтобы добиться такого эффекта, используйте CSS {{Cssxref("width")}}.
-- {{htmlattrdef("width")}}
+- `width`
   - : Содержит _предпочтительное_ количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.
-- {{htmlattrdef("wrap")}} {{non-standard_inline}}
+- `wrap` {{non-standard_inline}}
   - : Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS {{Cssxref("white-space")}}.
 
 ## Пример
diff --git a/files/ru/web/html/element/progress/index.md b/files/ru/web/html/element/progress/index.md
index 144329c948c0f2..bcf93e4f858ed1 100644
--- a/files/ru/web/html/element/progress/index.md
+++ b/files/ru/web/html/element/progress/index.md
@@ -21,9 +21,9 @@ slug: Web/HTML/Element/progress
 
 Этот элемент включает в себя [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{ htmlattrdef("max") }}
+- `max`
   - : Этот атрибут описывает сколько затрат требует задача, указанная элементом `progress`. Атрибут `max`, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.
-- {{ htmlattrdef("value") }}
+- `value`
   - : Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до `max`, или между 0 и 1, если `max` не указан. Если атрибут `value` не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займёт.
 
 > **Примечание:** Минимальное значение всегда 0, а атрибут `min` недопустим для прогресс-элемента. Вы можете использовать свойство CSS {{ cssxref("-moz-orient") }}, чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.
diff --git a/files/ru/web/html/element/script/index.md b/files/ru/web/html/element/script/index.md
index e2fef618044930..b20ef5e15a878b 100644
--- a/files/ru/web/html/element/script/index.md
+++ b/files/ru/web/html/element/script/index.md
@@ -19,26 +19,26 @@ HTML Элемент **`<script>`** используется для встраи
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("async")}}
-  - : Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте `{{htmlattrdef("src")}}`, асинхронно.
-    > **Предупреждение:** Атрибут `{{htmlattrdef("async")}}` не будет оказывать никакого эффекта, если атрибут `{{htmlattrdef("src")}}` отсутствует. Обычно браузеры загружают `<script>` синхронно, (т.е. `async="false"`) во время разбора документа. Динамически вставленный `<script>` (используя, например, `document.createElement`) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите `async="false"`.
-- {{htmlattrdef("crossorigin")}}
-  - : Обычные элементы тега `script` передают мало информации в {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} для скриптов, которые не проходят проверку [CORS](/ru/docs/HTTP_access_control). Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут `{{htmlattrdef("crossorigin")}}`. Посмотрите статью «[настройки атрибутов CORS](/ru/docs/Web/HTML/CORS_settings_attributes)» для более наглядного объяснения его допустимых аргументов.
-- {{htmlattrdef("defer")}}
-  - : Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события {{event("DOMContentLoaded")}}. Скрипты с атрибутом `{{htmlattrdef("defer")}}` будут предотвращать запуск события {{event("DOMContentLoaded")}} до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.
-    > **Предупреждение:** Атрибут `{{htmlattrdef("defer")}}` не будет оказывать никакого эффекта, если атрибут `{{htmlattrdef("src")}}` отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте `async=false`. Скрипты с атрибутом `{{htmlattrdef("defer")}}` будут выполняться в том порядке, в котором они появились при разборе документа.
-- {{htmlattrdef("integrity")}}
+- `async`
+  - : Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте `src`, асинхронно.
+    > **Предупреждение:** Атрибут `async` не будет оказывать никакого эффекта, если атрибут `src` отсутствует. Обычно браузеры загружают `<script>` синхронно, (т.е. `async="false"`) во время разбора документа. Динамически вставленный `<script>` (используя, например, `document.createElement`) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите `async="false"`.
+- `crossorigin`
+  - : Обычные элементы тега `script` передают мало информации в {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} для скриптов, которые не проходят проверку [CORS](/ru/docs/HTTP_access_control). Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут `crossorigin`. Посмотрите статью «[настройки атрибутов CORS](/ru/docs/Web/HTML/CORS_settings_attributes)» для более наглядного объяснения его допустимых аргументов.
+- `defer`
+  - : Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события {{event("DOMContentLoaded")}}. Скрипты с атрибутом `defer` будут предотвращать запуск события {{event("DOMContentLoaded")}} до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.
+    > **Предупреждение:** Атрибут `defer` не будет оказывать никакого эффекта, если атрибут `src` отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте `async=false`. Скрипты с атрибутом `defer` будут выполняться в том порядке, в котором они появились при разборе документа.
+- `integrity`
   - : Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите [Целостность субресурса](/ru/docs/Web/Security/Subresource_Integrity).
-- {{htmlattrdef("nomodule")}}
+- `nomodule`
   - : Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих [ES6-модули (англ.)](https://hacks.mozilla.org/2015/08/es6-in-depth-modules). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript.
-- {{htmlattrdef("nonce")}}
+- `nonce`
   - : Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в [script-src Content-Security-Policy](/ru/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным.
-- {{htmlattrdef("src")}}
+- `src`
   - : Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.
-    > **Предупреждение:** Если у элемента `script` будет указан атрибут `{{htmlattrdef("src")}}`, то он не должен иметь встроенный скрипт между тегами.
-- {{htmlattrdef("text")}}
+    > **Предупреждение:** Если у элемента `script` будет указан атрибут `src`, то он не должен иметь встроенный скрипт между тегами.
+- `text`
   - : Как и атрибут `textContent`, этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибута `textContent`, этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM.
-- {{htmlattrdef("type")}}
+- `type`
   - : Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:
     - **Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript**
       - : Обозначает, что скрипт является "классическим скриптом", содержащим JavaScript-код.
@@ -57,9 +57,9 @@ HTML Элемент **`<script>`** используется для встраи
 
 ### Устаревшие атрибуты
 
-- {{htmlattrdef("charset")}} {{Deprecated_inline}}
+- `charset` {{Deprecated_inline}}
   - : Если присутствует, его значение должно соответствовать "utf-8" без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.
-- {{htmlattrdef("language")}} {{Deprecated_inline}} {{Non-standard_Inline}}
+- `language` {{Deprecated_inline}} {{Non-standard_Inline}}
   - : Как и атрибут `type`, этот атрибут определяет используемый язык сценариев. Однако, в отличие от `type`, возможные значения `language` никогда не были стандартизированы. Вместо него следует использовать атрибут `type`.
 
 ## Примечания
diff --git a/files/ru/web/html/element/select/index.md b/files/ru/web/html/element/select/index.md
index bb17d423953483..fc476ebe83eeec 100644
--- a/files/ru/web/html/element/select/index.md
+++ b/files/ru/web/html/element/select/index.md
@@ -17,19 +17,19 @@ slug: Web/HTML/Element/select
 
 Элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("autofocus")}}
+- `autofocus`
   - : Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут `autofocus`, элемент является логическим (булевым).
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Этот логический атрибут указывает что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройки от содержащего его элемента, к примеру `fieldset`; если у родительского элемента не указан атрибут `disabled`, то элемент управления доступен для взаимодействия.
-- {{htmlattrdef("form")}}
+- `form`
   - : Этот атрибут указывает к какой конкретно форме относится элемент \<select> . Если атрибут указан, его значением должно быть ID формы в том же документе. Это позволяет размещать элементы \<select> где угодно в документе, а не только как потомки форм.
-- {{htmlattrdef("multiple")}}
+- `multiple`
   - : Этот логический атрибут указывает что возможен выбор нескольких опций в списке. Если данный атрибут не указан, то только одна опция может быть выбрана.
-- {{htmlattrdef("name")}}
+- `name`
   - : Этот атрибут используется для указания имени элемента управления.
-- {{htmlattrdef("required")}}
+- `required`
   - : Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.
-- {{htmlattrdef("size")}}
+- `size`
   - : Если элемент управления представлен как прокручиваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять \<select> в виде прокручиваемого списка. Значение по умолчанию 0.
 
 > **Примечание:** Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.
diff --git a/files/ru/web/html/element/slot/index.md b/files/ru/web/html/element/slot/index.md
index 9c034fabf2ccdf..2e108783060165 100644
--- a/files/ru/web/html/element/slot/index.md
+++ b/files/ru/web/html/element/slot/index.md
@@ -20,7 +20,7 @@ HTML-элемент `<slot>` является частью набора техн
 
 Этот элемент включает в себя [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("name")}}
+- `name`
   - : Название слота._**Именованный слот**_ это элемент `<slot>` с атрибутом `name`.
 
 ## Примеры
diff --git a/files/ru/web/html/element/source/index.md b/files/ru/web/html/element/source/index.md
index 4cf2bd531f2ad7..9838a086807265 100644
--- a/files/ru/web/html/element/source/index.md
+++ b/files/ru/web/html/element/source/index.md
@@ -21,15 +21,15 @@ slug: Web/HTML/Element/source
 2. дескриптора ширины, представляющего собой целое положительное число, за которым следует `'w'`. Значением по умолчанию, если оно отсутствует, является бесконечность.
 3. дескриптора плотности пикселей, представляющее собой положительное десятичное число, за которым следует `'x'`. Значением по умолчанию, если оно отсутствует, является `1x`.
 
-- {{htmlattrdef("sizes")}} {{experimental_inline}}
+- `sizes` {{experimental_inline}}
   - : Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиавыражений со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте [`srcset`](/ru/docs/Web/HTML/Element/source#srcset). Атрибут `sizes` работает только тогда, когда элемент {{HTMLElement("source")}} расположен внутри элемента {{HTMLElement("picture")}}.
-- {{htmlattrdef("src")}}
+- `src`
   - : Требуемый для элементов {{HTMLElement("audio")}} и {{HTMLElement("video")}} адрес медиа-ресурсов. Значение этого атрибута игнорируется браузером, когда элемент `<source>` размещён внутри элемента {{HTMLElement("picture")}}.
-- {{htmlattrdef("srcset")}} {{experimental_inline}}
+- `srcset` {{experimental_inline}}
   - : Список из одной или нескольких строк, разделённых запятыми, определяющий набор возможных изображений, представленных для отображения в браузере. Каждая строка может состоять из:Каждая строка списка должна содержать по крайней мере дескриптор ширины или дескриптор плотности пикселей.Браузер выбирает самое подходящее изображение для отображения в данный момент времени.Атрибут `srcset` работает только в том случае, когда элемент {{HTMLElement("source")}} находится внутри элемента {{HTMLElement("picture")}}.
-- {{htmlattrdef("type")}}
+- `type`
   - : MIME-тип ресурса, опционально содержащий параметр `codecs`. Для получения полной информации по указанию кодеков смотрите [RFC 4281](https://tools.ietf.org/html/rfc4281).
-- {{htmlattrdef("media")}} {{experimental_inline}}
+- `media` {{experimental_inline}}
   - : Определяет [медиавыражение](/ru/docs/CSS/Media_queries) , согласно которому будет выводиться изображение. Работает только в элементе {{HTMLElement("picture")}}.
 
 Если атрибут `type` не указан, то он запрашивается с сервера и проверяется, может ли {{Glossary("user agent")}} его обрабатывать. Если он не может быть обработан, проверяется следующий `<source>`. Если атрибут `type` указан, он сравнивается с типами, которые может поддерживать {{Glossary("user agent")}}, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент `<source>`.
diff --git a/files/ru/web/html/element/style/index.md b/files/ru/web/html/element/style/index.md
index da5856b915e46f..0adbb367c5f0ee 100644
--- a/files/ru/web/html/element/style/index.md
+++ b/files/ru/web/html/element/style/index.md
@@ -17,15 +17,15 @@ _HTML-элемент **\<style>**_ содержит стилевую инфор
 
 This element includes the [global attributes](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("type")}}
+- `type`
   - : Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «`text/css`».
-- {{htmlattrdef("media")}}
+- `media`
   - : К какому виду медиа должен применяться этот стиль. Значением этого атрибута является [медиавыражение](/ru/docs/Web/Guide/CSS/Media_queries), которое по умолчанию соответствует `all`.
-- {{htmlattrdef("scoped")}}
+- `scoped`
   - : Если указан этот атрибут, то стиль применяется только внутри своего родительского элемента. Если не указан, то стиль применяется ко всему документу.
-- {{htmlattrdef("title")}}
+- `title`
   - : Specifies alternative style sheet sets.
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : If set, disables (does not apply) the style rules, specified within the element, to the {{domxref("document","Document")}}.
 
 ## Примеры
diff --git a/files/ru/web/html/element/td/index.md b/files/ru/web/html/element/td/index.md
index f6ca7abcc072cc..a0a702f7f25532 100644
--- a/files/ru/web/html/element/td/index.md
+++ b/files/ru/web/html/element/td/index.md
@@ -19,10 +19,10 @@ slug: Web/HTML/Element/td
 
 Этот элемент содержит [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("abbr")}}
+- `abbr`
   - : Этот аргумент содержит краткое описание содержимого в ячейке. Некоторые устройства для чтения могут подставлять это описание перед самим содержимым ячейки.
     > **Примечание:**Не используйте этот атрибут, поскольку он устарел в последнем стандарте. Вместо этого рассмотрите возможность использования атрибута **title**.
-- {{htmlattrdef("align")}} {{deprecated_inline}},
+- `align` {{deprecated_inline}},
 
   - : Это перечисляемый атрибут указывает каким будет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения:
 
@@ -37,10 +37,10 @@ slug: Web/HTML/Element/td
       > - Чтобы добиться такого же эффекта как при `left`, `center`, `right` или `justify` значениях, используйте их как параметры CSS-свойства {{cssxref("text-align")}}.
       > - Чтобы добиться эффекта как `char` значение в CSS3, вы можете использовать значение [`char`](/ru/docs/Web/HTML/Element/td#char) как значение свойства {{cssxref("text-align")}} {{unimplemented_inline}}.
 
-- {{htmlattrdef("axis")}}
+- `axis`
   - : Этот атрибут включает список строк разделённых пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок.
     > **Примечание:**Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут [`scope`](/ru/docs/Web/HTML/Element/td#scope).
-- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+- `bgcolor` {{Non-standard_inline}}
   - | : Этот атрибут определяет цвет фона ячейки. Значением задаётся 6-значными шестнадцатеричными кодами как определено в [sRGB](https://www.w3.org/Graphics/Color/sRGB), с префиксом '#'. Можно также использовать предопределённые цветовые строки, например: |                       | `black` = "#000000" |                      | `green` = "#008000"                                                                                                                                                                                                                                                                                     |
     | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
     |                                                                                                                                                                                                                                                            | `silver` = "#C0C0C0"  |                     | `lime` = "#00FF00"   |
@@ -50,26 +50,26 @@ slug: Web/HTML/Element/td
     |                                                                                                                                                                                                                                                            | `red` = "#FF0000"     |                     | `blue` = "#0000FF"   |
     |                                                                                                                                                                                                                                                            | `purple` = "#800080"  |                     | `teal` = "#008080"   |
     |                                                                                                                                                                                                                                                            | `fuchsia` = "#FF00FF" |                     | `aqua` = "#00FFFF"   | > **Примечание:** Не используйте этот атрибут, поскольку он нестандартный: элемент {{HTMLElement("td")}} должен быть стилизован с помощью [CSS](/ru/docs/CSS). Чтобы получить аналогичный эффект как атрибут **bgcolor**, используйте [CSS](/ru/docs/Web/CSS) свойство {{cssxref("background-color")}}. |
-- {{htmlattrdef("char")}} {{deprecated_inline}},
+- `char` {{deprecated_inline}},
   - : Этот атрибут используется для определения символа по которому происходит выравнивание в ячейке. Типичный случай когда для него задают значение периода (.) когда необходимо выровнять числовые или денежные значения. Если [`align`](/ru/docs/Web/HTML/Element/td#align) не задан. то атрибут `char` игнорируется.
     > **Примечание:**Не используйте этот атрибут, тк он устарел (и больше не поддерживается) в последней версии стандарта. Достигнуть такого же эффекта как от [`char`](/ru/docs/Web/HTML/Element/thead#char), в CSS3 вы можете you can use the character set using the [`char`](/ru/docs/Web/HTML/Element/th#char) attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.
-- {{htmlattrdef("charoff")}} {{deprecated_inline}},
+- `charoff` {{deprecated_inline}},
   - : Этот атрибут атрибут включает количество символов на которое смещаются при выравнивании данные от установленного **char** атрибута.
     > **Примечание:**Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта.
-- {{htmlattrdef("colspan")}}
+- `colspan`
   - : Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно `1`. Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).
-- {{htmlattrdef("headers")}}
+- `headers`
   - : Этот атрибут содержит список срок разделённых пробелами, каждая соответствует **id** атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.
-- {{htmlattrdef("rowspan")}}
+- `rowspan`
   - : Этот атрибут содержит положительное целое число указывающее какое количество строк необходимо объединить. По умолчанию значение равно `1`; Если его значение `0`, тогда его действие распространяется до конца табличной секции ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.
-- {{htmlattrdef("valign")}} {{deprecated_inline}},
+- `valign` {{deprecated_inline}},
   - : Этот атрибут определяет вертикальное выравнивание текста в ячейке. Возможные значения атрибута:
     - `baseline`, поместит текст ближе к нижней части ячейки, но выровняет его по [базовой линии](https://en.wikipedia.org/wiki/Baseline_%28typography%29) символов, а не нижней линии. Если все символы одного размера, тогда имеет такой же эффект как `bottom`.
     - `bottom`, поместит текст как можно ближе к нижней части ячейки
     - `middle`, выравнивает текст по центру ячейки
     - и `top`, который будет выравнивать текст как можно ближе к верхней части ячейки.
       > **Примечание:** Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS-свойство {{cssxref("vertical-align")}}.
-- {{htmlattrdef("width")}} {{deprecated_inline}},
+- `width` {{deprecated_inline}},
   - : Этот атрибут устанавливает рекомендуемую ширину ячейки. Свойства [cellspacing](/ru/docs/Web/API/HTMLTableElement/cellSpacing) и [cellpadding](/ru/docs/Web/API/HTMLTableElement/cellPadding) могут добавить дополнительное пространство и ширина элемента {{HTMLElement("col")}} может иметь некоторый эффект. Обычно если ширина столбца слишком узкая чтобы показать конкретную ячейку должным образом, она может быть расширена при отображении.
     > **Примечание:**Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS-свойство {{cssxref("width")}}.
 
diff --git a/files/ru/web/html/element/tfoot/index.md b/files/ru/web/html/element/tfoot/index.md
index c058fb77a70094..12c10ff4aa4915 100644
--- a/files/ru/web/html/element/tfoot/index.md
+++ b/files/ru/web/html/element/tfoot/index.md
@@ -18,7 +18,7 @@ _HTML_ элемент подвала таблицы (`<tfoot>`) определя
 
 Этот элемент включает в себя [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{ htmlattrdef("align") }} {{ Deprecated_inline() }}
+- `align` {{ Deprecated_inline() }}
 
   - : Этот атрибут определяет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения:
     - left, выравнивание содержимого по левому краю ячейки
@@ -30,7 +30,7 @@ _HTML_ элемент подвала таблицы (`<tfoot>`) определя
       >
       > - To achieve the same effect as the char value, in CSS3, you can use the value of the [`char`](/ru/docs/Web/HTML/Element/tfoot#char) as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.
 
-- {{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}
+- `bgcolor` {{ Non-standard_inline() }}
   - | : Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шестнадцатеричного кода определённого в [sRGB](http://www.w3.org/Graphics/Color/sRGB), предваряется '#'. Может быть использован один из шестнадцати предопределённых строк: |                     | black = "#000000" |                    | green = "#008000"                                                                                                                                                                                                                                                                                                                                                                                                          |
     | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
     |                                                                                                                                                                                                                                                                  | silver = "#C0C0C0"  |                   | lime = "#00FF00"   |
@@ -40,13 +40,13 @@ _HTML_ элемент подвала таблицы (`<tfoot>`) определя
     |                                                                                                                                                                                                                                                                  | red = "#FF0000"     |                   | blue = "#0000FF"   |
     |                                                                                                                                                                                                                                                                  | purple = "#800080"  |                   | teal = "#008080"   |
     |                                                                                                                                                                                                                                                                  | fuchsia = "#FF00FF" |                   | aqua = "#00FFFF"   | > **Примечание:** Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{ HTMLElement("tfoot") }} element should be styled using [CSS](/en/CSS). To give a similar effect to the **bgcolor** attribute, use the [CSS](/en/CSS) property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements. |
-- {{ htmlattrdef("char") }} {{ Deprecated_inline() }}
+- `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`](/ru/docs/Web/HTML/Element/tfoot#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`](/ru/docs/Web/HTML/Element/tbtfootody#char), in CSS3, you can use the character set using the [`char`](/ru/docs/Web/HTML/Element/tfoot#char) attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.
-- {{ htmlattrdef("charoff") }} {{ Deprecated_inline() }}
+- `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.
-- {{ htmlattrdef("valign") }} {{ Deprecated_inline() }}
+- `valign` {{ Deprecated_inline() }}
   - : Этот атрибут задаёт вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута:
     - baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the [baseline](http://en.wikipedia.org/wiki/Baseline_%28typography%29) of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
     - bottom, which will put the text as close to the bottom of the cell as it is possible;
diff --git a/files/ru/web/html/element/time/index.md b/files/ru/web/html/element/time/index.md
index c2fdfc3d76c587..5ed9e176ade3dc 100644
--- a/files/ru/web/html/element/time/index.md
+++ b/files/ru/web/html/element/time/index.md
@@ -21,7 +21,7 @@ slug: Web/HTML/Element/time
 
 Как и все другие элементы HTML, этот элемент поддерживает [глобальные атрибуты](/ru/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : Этот атрибут специфицирует время и дату и должен быть [допустимой датой с возможным дополнительным указанием времени](https://www.w3.org/TR/html/infrastructure.html#dates-and-times). Если значение элемента не может быть распознано как дата с возможным дополнительным указанием времени, элементу не будет сопоставлен временной срез (timestamp).
 
 ## Примеры
diff --git a/files/ru/web/html/element/track/index.md b/files/ru/web/html/element/track/index.md
index f75bf408d38ebb..8c04969c53aab7 100644
--- a/files/ru/web/html/element/track/index.md
+++ b/files/ru/web/html/element/track/index.md
@@ -22,9 +22,9 @@ slug: Web/HTML/Element/track
 
 Этот элемент использует [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("default")}}
+- `default`
   - : Этот атрибут указывает, что дорожка должна быть включена, если пользовательские настройки не указывают, что другая дорожка является более подходящей. Может использоваться только для одного элемента `track` в элементе мультимедиа.
-- {{htmlattrdef("kind")}}
+- `kind`
 
   - : Как текстовый трек должен быть использован. Если значение опущено, тип по умолчанию — `subtitles` (субтитры). Если атрибут отсутствует, будет использоваться `subtitles`. Если атрибут содержит недопустимое значение, оно принимает значение `metadata`. (Версии Chrome ранее 52 рассматривали недопустимое значение как `subtitles`.) Допускаются следующие ключевые слова:
 
@@ -52,11 +52,11 @@ slug: Web/HTML/Element/track
 
       - Данные, используемые скриптами. Не видны пользователю.
 
-- {{htmlattrdef("label")}}
+- `label`
   - : Видимый пользователю заголовок текстовой дорожки, который используется браузером при выводе списка доступных текстовых дорожек.
-- {{htmlattrdef("src")}}
+- `src`
   - : Адрес файла текстовой дорожки (`.vtt` файл). Должен быть действительным URL. Этот атрибут должен быть указан, а его значение URL должно иметь то же происхождение, что и документ — исключая случаи, когда родительский {{HTMLElement("audio")}} или {{HTMLElement("video")}} данного `track` элемента имеет атрибут [`crossorigin`](/ru/docs/Web/HTML/CORS_settings_attributes).
-- {{htmlattrdef("srclang")}}
+- `srclang`
   - : Язык текстовых данных трека. Это должен быть валидный [BCP 47](https://r12a.github.io/app-subtags/) языковой тег (см. также [языковые тэги в HTML и XML)](https://www.w3.org/International/articles/language-tags/). Если для атрибута `kind` установлено значение `subtitles`, должен быть определён атрибут `srclang`.
 
 ## Примечания по использованию
diff --git a/files/ru/web/html/element/ul/index.md b/files/ru/web/html/element/ul/index.md
index 3efeeea80a937d..c2111af49c13d5 100644
--- a/files/ru/web/html/element/ul/index.md
+++ b/files/ru/web/html/element/ul/index.md
@@ -21,10 +21,10 @@ slug: Web/HTML/Element/ul
 
 Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{ htmlattrdef("compact") }} {{Deprecated_inline}}
+- `compact` {{Deprecated_inline}}
   - : Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от {{glossary("user agent")}} и не работает со всеми браузерами.
     > **Предупреждение:** Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте [CSS](/ru/docs/CSS). Для схожего эффекта с `compact`, подойдёт свойство CSS {{cssxref("line-height")}} с значением `80%`.
-- {{ htmlattrdef("type") }} {{Deprecated_inline}}
+- `type` {{Deprecated_inline}}
   - : Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под [HTML3.2](/ru/docs/HTML3.2) и переходными на [HTML 4.0/4.01](/ru/docs/HTML4.01) являются:
     - `circle`
     - `disc`
diff --git a/files/ru/web/html/element/video/index.md b/files/ru/web/html/element/video/index.md
index c0ef46221b3306..04a4eb1b681b53 100644
--- a/files/ru/web/html/element/video/index.md
+++ b/files/ru/web/html/element/video/index.md
@@ -24,30 +24,30 @@ slug: Web/HTML/Element/video
 
 Как и все HTML-элементы, этот элемент поддерживает [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-- {{htmlattrdef("autoplay")}}
+- `autoplay`
   - : Логический атрибут; если указан, то видео начнёт воспроизводится автоматически, как только это будет возможно сделать без остановки, чтобы закончить загрузку данных.
-- {{htmlattrdef("autobuffer")}} {{Non-standard_inline}}
+- `autobuffer` {{Non-standard_inline}}
   - : Логический атрибут; если указано, видео автоматически начнёт буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кеш мультимедиа.
     > **Примечание:** несмотря на то, что в ранних версиях HTML5 атрибут `autobuffer` присутствовал, в последующих выпусках он был удалён. Также он был удалён из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут `preload`, вместо `autobuffer` с другим синтаксисом. {{bug(548523)}}
-- {{htmlattrdef("buffered")}}
+- `buffered`
   - : Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект {{domxref("TimeRanges")}}.
-- {{htmlattrdef("controls")}}
+- `controls`
   - : Если этот атрибут присутствует, тогда браузер отобразит элементы управления, чтобы позволить пользователю управлять воспроизведением видео, регулировать громкость, осуществлять перемотку, а также ставить на паузу и возобновление воспроизведение.
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
   - : This enumerated attribute indicates whether to use CORS to fetch the related image. [CORS-enabled resources](/ru/docs/CORS_Enabled_Image) can be reused in the {{HTMLElement("canvas")}} element without being _tainted_. The allowed values are:
     - anonymous
       - : Sends a cross-origin request without a credential. In other words, it sends the `Origin:` HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the `Access-Control-Allow-Origin:` HTTP header), the image will be _tainted_, and its usage restricted.
     - use-credentials
       - : Sends a cross-origin request with a credential. In other words, it sends the `Origin:` HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through `Access-Control-Allow-Credentials:` HTTP header), the image will be _tainted_ and its usage restricted.When not present, the resource is fetched without a CORS request (i.e. without sending the `Origin:` HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword **anonymous** was used. See [CORS settings attributes](/ru/docs/HTML/CORS_settings_attributes) for additional information.
-- {{htmlattrdef("height")}}
+- `height`
   - : Высота области отображения видео в пикселях.
-- {{htmlattrdef("loop")}}
+- `loop`
   - : Логический атрибут; если указан, то по окончанию проигрывания, видео автоматически начнёт воспроизведение с начала.
-- {{htmlattrdef("muted")}}
+- `muted`
   - : Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию - "ложь", и это означает, что звук будет воспроизводиться, когда видео воспроизводится.
-- {{htmlattrdef("played")}}
+- `played`
   - : Атрибут {{domxref("TimeRanges")}}, указывающий все диапазоны воспроизводимого видео.
-- {{htmlattrdef("preload")}}
+- `preload`
 
   - : Этот перечислимый атрибут предназначен для того, чтобы дать подсказку браузеру о том, что, по мнению автора, приведёт к лучшему пользовательскому опыту. Он может иметь одно из следующих значений:
     - `none`: указывает, что видео не должно быть предварительно загружено.
@@ -61,11 +61,11 @@ slug: Web/HTML/Element/video
       > - The `autoplay` attribute has precedence over `preload`. If `autoplay` is specified, the browser would obviously need to start downloading the video for playback.
       > - The specification does not force the browser to follow the value of this attribute; it is a mere hint.
 
-- {{htmlattrdef("poster")}}
+- `poster`
   - : URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмёт на кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр отображается как рамка постера.
-- {{htmlattrdef("src")}}
+- `src`
   - : The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed.
-- {{htmlattrdef("width")}}
+- `width`
   - : Ширина области отображения видео в пикселях.
 
 ## События
diff --git a/files/zh-cn/mdn/community/communication_channels/index.md b/files/zh-cn/mdn/community/communication_channels/index.md
index 997ab0124cf30c..7325fa840d3146 100644
--- a/files/zh-cn/mdn/community/communication_channels/index.md
+++ b/files/zh-cn/mdn/community/communication_channels/index.md
@@ -17,7 +17,7 @@ MDN Web 文档社区的 Discord 服务器向公众开放。该服务器是了解
 
 你可以提出问题、寻求澄清，以及了解如何参与其中。你还可以根据自己的兴趣和专长加入特定的频道。
 
-在[此处](https://discord.gg/aZqEtMrbr7)加入 Discord 上的 MDN Web 文档社区。
+在[此处](/discord)加入 Discord 上的 MDN Web 文档社区。
 
 ### Matrix 聊天室
 
diff --git a/files/zh-cn/mdn/community/contributing/translated_content/index.md b/files/zh-cn/mdn/community/contributing/translated_content/index.md
index 81f1c978d35f6c..b4f5782d38481d 100644
--- a/files/zh-cn/mdn/community/contributing/translated_content/index.md
+++ b/files/zh-cn/mdn/community/contributing/translated_content/index.md
@@ -39,7 +39,7 @@ slug: MDN/Community/Contributing/Translated_content
 
 ### 韩语（ko）
 
-- 讨论组：[Discord (#korean channel)](https://discord.gg/apa6Rn7uEj)、[Kakao Talk (#MDN Korea)](https://open.kakao.com/o/gdfG288c)
+- 讨论组：[Discord (#korean channel)](/discord)、[Kakao Talk (#MDN Korea)](https://open.kakao.com/o/gdfG288c)
 - 目前的志愿者：[hochan222](https://github.com/hochan222)、[yechoi42](https://github.com/yechoi42)、[cos18](https://github.com/cos18)、[GwangYeol-Im](https://github.com/GwangYeol-Im)、[pje1740](https://github.com/pje1740)、[yujo11](https://github.com/yujo11)、[wisedog](https://github.com/wisedog)、[swimjiy](https://github.com/swimjiy)、[jho2301](https://github.com/jho2301)、[sunhpark42](https://github.com/sunhpark42)
 
 ### 俄语（ru）
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
new file mode 100644
index 00000000000000..db0aebb19d29a9
--- /dev/null
+++ b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md
@@ -0,0 +1,138 @@
+---
+title: HTML 代码示例编写指南
+slug: MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML
+---
+
+{{MDNSidebar}}
+
+下面的指南涵盖了如何为 MDN Web 文档编写 HTML 示例代码。
+
+## HTML 代码示例常规指南
+
+### 格式的选择
+
+关于正确缩进、空格和行长度的意见一直存在争议。对这些主题的讨论会分散注意力，从而影响内容的创建和维护。
+
+在 MDN Web 文档中，我们使用 [Prettier](https://prettier.io/) 作为代码格式化工具，以保持代码风格的一致性（并避免偏离主题讨论）。你可以参考我们的[配置文件](https://github.com/mdn/content/blob/main/.prettierrc.json)来了解当前的规则，并阅读 [Prettier 的文档](https://prettier.io/docs/en/index.html)。
+
+Prettier 格式化所有代码并保持风格一致。尽管如此，你仍需要遵循一些额外的规则。
+
+## 完整的 HTML 文档
+
+> **备注：** 这个小节中的指南只适用于你需要展示一份完整的 HTML 文档的时候。一个片段通常就足以用于演示一种特性。在使用 [EmbedLiveSample 宏](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Code_examples#传统运行实例)时，只需要包含 HTML 片段，片段会在显示的时候被自动插入到一个完整的 HTML 文档中。
+
+### Doctype
+
+你应当使用 HTML5 doctype。它简短、易于记忆并且向后兼容。
+
+```html example-good
+<!doctype html>
+```
+
+### 文档语言
+
+在你的 {{htmlelement("html")}} 元素上使用 [`lang`](/zh-CN/docs/Web/HTML/Global_attributes#lang) 属性设置文档的语言：
+
+```html example-good
+<html lang="zh-CN"></html>
+```
+
+这对于无障碍功能和搜索引擎有益，有助于本地化内容以及提醒人们使用最佳实践。
+
+### 文档字符集
+
+你还应当像这样定义你的文档的字符集：
+
+```html example-good
+<meta charset="utf-8" />
+```
+
+除非你有特别好的理由，否则都应使用 UTF-8，无论你在文档中使用什么语言，它都能很大程度地覆盖到所有需要的字符。
+
+### Viewport meta 标签
+
+最后，你应当永远记得在 HTML {{HTMLElement("head")}} 标签里添加 viewport meta 标签，好让你的代码示例更好地在移动设备上运作。你至少应该在文档中包含以下内容，以后可以根据需要进行更改：
+
+```html example-good
+<meta name="viewport" content="width=device-width" />
+```
+
+参阅[使用 viewport meta 标签在移动浏览器上控制布局](/zh-CN/docs/Web/HTML/Viewport_meta_tag)了解详情。
+
+## 属性
+
+你应该把所有的属性值放在双引号之间。自从 HTML5 允许省略引号后，人们很轻易地就会这样做，但是添加引号能让标记更加简洁和易读。例如，这样就比较好：
+
+```html example-good
+<img src="images/logo.jpg" alt="A circular globe icon" class="no-border" />
+```
+
+比这样要好：
+
+```html-nolint example-bad
+<img src=images/logo.jpg alt=A circular globe icon class=no-border>
+```
+
+省略引号还会引发问题。在上面的示例里，`alt` 属性会被解释为多个属性，因为没有引号来明确“A circular globe icon”是单个属性值。
+
+## 布尔属性
+
+不要让布尔属性含有属性值（但是{{glossary("enumerated", "枚举")}}属性要含有值），你可以只写属性名来设置布尔属性。比如，你可以写：
+
+```html example-good
+<input required />
+```
+
+这是完全能读懂并且能良好运作的。如果一个 HTML 布尔属性有出现，它的值就是真。尽管含有属性值也能运作，但那是不必要且不正确的：
+
+```html example-bad
+<input required="required" />
+```
+
+## 大小写
+
+对元素名和属性名/值使用小写，因为这样看起来更整洁并且可以让你更快地书写标记。例如：
+
+```html example-good
+<p class="nice">这样看着挺好而且整洁</p>
+```
+
+```html-nolint example-bad
+<P CLASS="WHOA-THERE">为什么这标记看着像是在咆哮？</P>
+```
+
+## Class 和 ID 名称
+
+使用语义化的 class/ID 名称，并且使用连字符分隔多个单词（{{Glossary("kebab_case", "短横线命名法")}}）。不要使用{{Glossary("camel_case", "骆驼式命名法")}}。例如：
+
+```html example-good
+<p class="editorial-summary">其他内容</p>
+```
+
+```html example-bad
+<p class="bigRedBox">其他内容</p>
+```
+
+## 实体引用
+
+不要使用不必要的实体引用——尽可能使用字面的字符（你仍然需要转义像尖括号和引号这样的字符）。
+
+举个例子，你可以就这么写：
+
+```html example-good
+<p>© 2018 Me</p>
+```
+
+不要这么写：
+
+```html example-bad
+<p>&copy; 2018 Me</p>
+```
+
+## HTML 元素
+
+MDN Web 文档对书写 HTML 元素有一些规则。遵守这些规则可以对元素及其组件进行一致的描述，并且能确保正确链接到详细的文档。
+
+- **元素名称**：使用 [`HTMLElement`](https://github.com/mdn/yari/blob/main/kumascript/macros/HTMLElement.ejs) 宏，可以创建一个指向对应元素的 MDN Web 文档页面的链接。例如，书写 `\{{HTMLElement("title")}}` 会产生“{{HTMLElement("title")}}”。如果你不想创建链接，**将元素名称用尖括号括起来**并且使用“行内代码”样式（例：`<title>`）。
+- **属性名称**：使用“行内代码”样式将属性名称设为“代码字体”。另外，在对属性作用的解释中关联性地提及属性时或是在页面中第一次使用该属性，要将属性名称设为“**粗体**”。
+- **属性值**：使用“行内代码”样式将 `<code>` 应用于属性值，并且除非是出于代码示例的语法需要，否则不要在字符串值周围使用引号。例如：“当 `<input>` 元素的 `type` 属性被设为 `email` 或 `tel`……”。
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 722aaa9a523029..7cbd7a345a2aa5 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
@@ -1,22 +1,24 @@
 ---
-title: 可访问的 Web 应用程序和小部件概述
+title: 无障碍 Web 应用和微件概述
 slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+l10n:
+  sourceCommit: acad5b9afc0a9e20144d49fd3fbb7f4fa92c9192
 ---
 
 <section id="Quick_links">
   {{ListSubpagesForSidebar("/zh-CN/docs/Web/Accessibility", 1)}}
 </section>
 
-web 正在变化。静态的、基于页面的站点逐渐被动态站点所取代，桌面式的 web 应用由大量的 JavaScript 和 AJAX 组成。设计人员完全可以通过 JavaScript，HTML 和 CSS 的组合创建令人惊叹的新的小部件和控件。这种转变有可能显着提高网络的响应能力和可用性，但是由于无障碍差距，存在许多用户有无法享用这种好处的风险。用户无法访问传统上 JavaScript 对于诸如屏幕阅读器等辅助技术，但是现在有了创建动态 Web 用户界面的方法，可以被各种用户访问。
+大多数 JavaScript 库提供了客户端微件（widget）库，模拟熟悉的桌面界面的行为。滑块、菜单栏、文件列表视图等可以通过 JavaScript、CSS 和 HTML 的组合来构建。由于 HTML4 规范不提供语义上描述这些微件的内置标签，因此开发人员通常会使用通用元素（如 {{HTMLElement('div')}} 和 {{HTMLElement('span')}}）。虽然这导致了一个看起来像桌面对应的组件，但标记中通常没有足够的辅助技术可用的语义信息。
 
 ## 问题
 
-大多数 JavaScript 工具包提供了模拟类似桌面界面行为的客户端小部件库。滑块，菜单栏，文件列表视图等可以通过 JavaScript，CSS 和 HTML 的组合构建。由于 HTML 4 规范不提供语义上描述这些窗口小部件的内置标签，因此开发人员通常会使用通用元素（如\<div>和\<span>）。虽然这导致了一个看起来像桌面对应的小部件，但标记中通常没有足够的辅助技术可用的语义信息。网页上的动态内容对于无论何种原因无法查看屏幕的用户来说都是特别有问题的。股票行情，实时 twitter 消息更新，进度指示器和类似内容以辅助技术（AT）可能不知道的方式修改 DOM。那就是[ARIA](/zh-CN/ARIA)存在的意义。
+对于由于某种原因而无法查看屏幕的用户来说，Web 页面上的动态内容都很容易成为问题。股票行情、实时 twitter 消息更新、进度条和类似内容以辅助技术（AT）可能不知道的方式修改 DOM。那就是 [ARIA](/zh-CN/docs/Web/Accessibility/ARIA) 存在的意义。
 
-_Example 1: Markup for a tabs widget built without ARIA labeling. There's no information in the markup to describe the widget's form and function._
+_示例 1：没有使用 ARIA 标签（label）的标签页（tab）组件的标记（markup）。标记中没有足够的信息来描述组件的形式和功能。_
 
 ```html
-<!-- This is a tabs widget. How would you know, looking only at the markup? -->
+<!-- 这是个标签页微件。只看 HTML 标记会知道作用如此吗？ -->
 <ol>
   <li id="ch1Tab">
     <a href="#ch1Panel">Chapter 1</a>
@@ -30,28 +32,33 @@ _Example 1: Markup for a tabs widget built without ARIA labeling. There's no inf
 </ol>
 
 <div>
-  <div id="ch1Panel">Chapter 1 content goes here</div>
-  <div id="ch2Panel">Chapter 2 content goes here</div>
-  <div id="quizPanel">Quiz content goes here</div>
+  <div id="ch1Panel">第 1 章的内容在这里</div>
+  <div id="ch2Panel">第 2 章的内容在这里</div>
+  <div id="quizPanel">测验的内容在这里</div>
 </div>
 ```
 
-_Example 2: How the tabs widget might be styled visually. Users might recognize it visually, but there are no machine-readable semantics for an assistive technology._
-![Screenshot of the tabs widget](tabs_widget.png)
+_示例 2：标签页微件的视觉样式。用户可能能够通过视觉识别，但是对于辅助技术来说，没有机器可读的语义信息。_
+
+![标签页微件的截图](tabs_widget.png)
 
 ## ARIA
 
-[WAI-ARIA](http://www.w3.org/WAI/intro/aria.php), 来自 W3C 的网络无障碍计划（[Web Accessibility Initiative](http://www.w3.org/WAI/)）的可访问的富互联网应用程序（**Accessible Rich Internet Applications**）规范，提供了一种添加辅助技术（如屏幕阅读器）所需的缺少语义的方法。ARIA 使开发人员可以通过向标记添加特殊属性来更详细地描述其小部件。旨在填补在动态 web 应用在发现的标准 HTML 标签与桌面式控件之的差距，ARIA 提供了角色和状态以描述大多数常见的 UI 小部件的行为。
+**ARIA**（无障碍富互联网应用）使开发者能够通过为标记添加特殊属性来更详细地描述微件。ARIA 旨在填补标准 HTML 标签与动态 Web 应用程序中的桌面样式控件之间的空白，它提供了角色和状态来描述大多数熟悉的 UI 微件的行为。
+
+> **警告：** 其中的许多是在浏览器不完全支持现代 HTML 特性时添加的。**开发者应该始终优先使用正确的语义化 HTML 元素而不是使用 ARIA**。
 
-The ARIA specification is split up into three different types of attributes: roles, states, and properties. Roles describe widgets that aren't otherwise available in HTML 4, such as sliders, menu bars, tabs, and dialogs. Properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. States describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden.
+ARIA 规范分为三种不同类型的属性（attribute）：角色、状态和属性（property）。角色描述了 HTML4 中没有的微件，例如滑块、菜单栏、标签页和对话框。属性描述了这些微件的特性，例如它们是否可拖动、是否有必填元素或是否有与之关联的弹出窗口。状态描述了元素的当前交互状态，通知辅助技术它是否繁忙、禁用、选中或隐藏。
 
-ARIA attributes are designed to be interpreted automatically by the browser and translated to the operating system's native accessibility APIs. When ARIA is present, assistive technologies are able to recognize and interact with custom JavaScript controls in the same way that they do with desktop equivalents. This has the potential for providing a much more consistent user experience than was possible in the previous generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications.
+ARIA 旨在由浏览器自动解释并转换为操作系统的原生无障碍 API。因此，具有 role="slider" 的元素的控制方式与操作系统上原生滑块的控制方式相同。
 
-_Example 3: Markup for the tabs widget with ARIA attributes added._
+与上一代 Web 应用程序相比，这提供了更加一致的用户体验，因为辅助技术用户在使用基于 Web 的应用程序时可以应用他们对桌面应用程序的所有知识。
+
+_示例 3：添加了 ARIA 属性的标签页微件的标记。_
 
 ```html
-<!-- Now *these* are Tabs! -->
-<!-- We've added role attributes to describe the tab list and each tab. -->
+<!-- 现在*这些*是标签页了！ -->
+<!-- 我们添加了角色属性来描述标签页列表以及每个标签页。 -->
 <ol role="tablist">
   <li id="ch1Tab" role="tab">
     <a href="#ch1Panel">Chapter 1</a>
@@ -65,114 +72,51 @@ _Example 3: Markup for the tabs widget with ARIA attributes added._
 </ol>
 
 <div>
-  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
+  <!-- 注意，我们添加了用于描述这些面板的角色（role）和 aria-labelledby 属性。 -->
   <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">
-    Chapter 1 content goes here
+    第 1 章的内容在这里
   </div>
   <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">
-    Chapter 2 content goes here
+    第 2 章的内容在这里
   </div>
   <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">
-    Quiz content goes here
+    测验的内容在这里
   </div>
 </div>
 ```
 
-ARIA is supported in the latest versions of all major browsers, including Firefox, Safari, Opera, Chrome, and Internet Explorer. Many assistive technologies, such as the open source NVDA and Orca screen readers, also support ARIA. Increasingly, JavaScript widget libraries such as jQuery UI, YUI, Google Closure, and Dojo Dijit include ARIA markup as well.
+ARIA 被所有主流浏览器和许多辅助技术所[广泛支持](https://caniuse.com/#feat=wai-aria)。
 
-### 可见性变化
+### 表现变化
 
-Dynamic presentational changes include using CSS to change the appearance of content (such as a red border around invalid data, or changing the background color of a checked checkbox), as well as showing or hiding content.
+动态的表现（presentational）变化包括使用 CSS 来改变内容的外观（例如在无效数据周围使用红色边框，或者改变选中复选框的背景颜色），以及显示或隐藏内容。
 
 #### 状态变化
 
-ARIA provides attributes for declaring the current state of a UI widget. Examples include (but are certainly not limited to):
+ARIA 提供了用于声明 UI 微件当前状态的属性。例如（但不限于）：
 
 - `aria-checked`
-  - : indicates the state of a checkbox or radio button
+  - : 表示复选框或单选按钮的状态。
 - `aria-disabled`
-  - : indicates that an element is visible, but not editable or otherwise operable
+  - : 表示元素可见但不可编辑或无法操作。
 - `aria-grabbed`
-  - : indicates the 'grabbed' state of an object in a drag-and-drop operation
-
-(For a full list of ARIA states, consult the [ARIA list of states and properties](http://www.w3.org/TR/wai-aria/states_and_properties).)
-
-Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
-
-The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.
-
-In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the **`aria-checked`** property is used to declare the selection state of the menu items.
-
-_Example 1a. HTML for a selectable menu._
-
-```html
-<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
-  <li
-    id="sans-serif"
-    class="menu-item"
-    role="menuitemradio"
-    tabindex="-1"
-    aria-controls="st1"
-    aria-checked="true">
-    Sans-serif
-  </li>
-  <li
-    id="serif"
-    class="menu-item"
-    role="menuitemradio"
-    tabindex="-1"
-    aria-controls="st1"
-    aria-checked="false">
-    Serif
-  </li>
-  ...
-</ul>
-```
-
-The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the **`aria-checked`** attribute on line 1.
+  - : 表示拖放操作中对象的“抓取”状态。
 
-_Example 1b. Attribute-based selector for indicating state._
+（有关 ARIA 状态的完整列表，请参阅 [ARIA 状态和属性列表](https://www.w3.org/TR/wai-aria-1.1/#introstates)。）
 
-```css
-li[aria-checked="true"] {
-  font-weight: bold;
-  background-image: url("images/dot.png");
-  background-repeat: no-repeat;
-  background-position: 5px 10px;
-}
-```
-
-The JavaScript to update the **`aria-checked`** property has the form shown in Example 1c. Note that the script only updates the **`aria-checked`** attribute (lines 3 and 8); it does not need to also add or remove a custom classname.
-
-_Example 1c. JavaScript to update the aria-checked attribute_.
-
-```js
-var processMenuChoice = function (item) {
-  // 'check' the selected item
-  item.setAttribute("aria-checked", "true");
-  // 'un-check' the other menu items
-  var sib = item.parentNode.firstChild;
-  for (; sib; sib = sib.nextSibling) {
-    if (sib.nodeType === 1 && sib !== item) {
-      sib.setAttribute("aria-checked", "false");
-    }
-  }
-};
-```
-
-#### 可见度变化
+开发者应该使用 ARIA 状态来指示 UI 微件元素的状态，并使用 CSS 属性选择器以根据状态变化改变视觉外观（而不是使用脚本来更改元素上的类名）。
 
-When content visibility is changed (i.e., an element is hidden or shown), developers should change the **`aria-hidden`** property value. The techniques described above should be used to declare CSS to visually hide an element using `display:none`.
+#### 可见性变化
 
-The Open Ajax Alliance website provides an example of a tooltip that uses **`aria-hidden`** to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.
+当内容可见性发生变化时（即，元素被隐藏或显示），开发者应该改变 **`aria-hidden`** 属性的值。应该使用上面描述的技术来声明 CSS，使用 `display:none` 以在视觉上隐藏元素。
 
-In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the **`aria-hidden`** state to `true`.
+下面是一个使用 **`aria-hidden`** 来控制小提示可见性的示例。该示例展示了一个简单的 Web 表单，其中包含与输入字段关联的提示。
 
-_Example 2a. HTML for a tooltip._
+在该示例中，小提示的 HTML 标记如下所示。第 9 行将 **`aria-hidden`** 状态设置为 `true`。
 
 ```html
 <div class="text">
-  <label id="tp1-label" for="first">First Name:</label>
+  <label id="tp1-label" for="first">名字：</label>
   <input
     type="text"
     id="first"
@@ -182,14 +126,12 @@ _Example 2a. HTML for a tooltip._
     aria-describedby="tp1"
     aria-required="false" />
   <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">
-    Your first name is optional
+    你的名字是可选的
   </div>
 </div>
 ```
 
-The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the **`aria-hidden`** attribute on line 1.
-
-_Example 2b. Attribute-based selector for indicating state._
+标记的 CSS 如下所示。请注意，没有使用自定义类名，只有第 1 行 **`aria-hidden`** 属性的状态。
 
 ```css
 div.tooltip[aria-hidden="true"] {
@@ -197,52 +139,45 @@ div.tooltip[aria-hidden="true"] {
 }
 ```
 
-The JavaScript to update the **`aria-hidden`** property has the form shown in Example 2c. Note that the script only updates the **`aria-hidden`** attribute (line 2); it does not need to also add or remove a custom classname.
-
-_Example 2c. JavaScript to update the aria-checked attribute._
+用于更新 **`aria-hidden`** 属性的 JavaScript 如下所示。请注意，脚本只更新 **`aria-hidden`** 属性（第 2 行）；它不需要添加或删除自定义类名。
 
 ```js
-var showTip = function (el) {
+function showTip(el) {
   el.setAttribute("aria-hidden", "false");
-};
+}
 ```
 
 ### 角色变化
 
-ARIA allows developers to declare a semantic role for an element that otherwise offers incorrect or no semantics. For example, when an unordered list is used to create a menu, the {{ HTMLElement("ul") }} should be given a **`role`** of `menubar` and each {{ HTMLElement("li") }} should be given a **`role`** of `menuitem`.
-
-The **`role`** of an element should not change. Instead, remove the original element and replace it with an element with the new **`role`**.
+ARIA 允许开发者在这个元素本身提供了错误语义或没有语义的情况下，为元素声明语义角色。不应改变元素的角色（**`role`**）。相反，请删除原始元素并用具有新的 **`role`** 的元素替换它。
 
-For example, consider an "inline edit" widget: a component that allows users to edit a piece of text in place, without switching contexts. This component has a "view" mode, in which the text is not editable, but is activatable, and an "edit" mode, in which the text can be edited. A developer might be tempted to implement the "view" mode using a read-only text {{ HTMLElement("input") }} element and setting its ARIA **`role`** to `button`, then switching to "edit" mode by making the element writable and removing the **`role`** attribute in "edit" mode (since {{ HTMLElement("input") }} elements have their own role semantics).
+例如，考虑一个“行内编辑”微件：一个允许用户在不切换上下文的情况下编辑文本的组件。该组件有一个“预览”模式，在该模式下，文本不可编辑，但可激活，以及一个“编辑”模式，在该模式下，文本可编辑。开发者可能会尝试使用只读文本类型的 {{ HTMLElement("input") }} 元素来实现“预览”模式，并将其 ARIA **`role`** 设置为 `button`，然后在“编辑”模式下使元素可写，并删除“编辑”模式下的 **`role`** 属性（因为 {{ HTMLElement("input") }} 元素具有自己的角色语义）。
 
-Do not do this. Instead, implement the "view" mode using a different element altogether, such as a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} with a **`role`** of `button`, and the « edit » mode using a text {{ HTMLElement("input") }} element.
+请不要这样做。应该使用完全不同的元素来实现“预览”模式，例如具有 `button` **`role`** 的 {{ HTMLElement("div") }} 或 {{ HTMLElement("span") }}，并使用文本类型的 {{ HTMLElement("input") }} 元素来实现“编辑”模式。
 
 ### 异步内容变化
 
-> **备注：** See also [Live Regions](/zh-CN/ARIA/Live_Regions)
+> **备注：** 正在施工中。请参见[实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)。
 
 ## 键盘导航
 
-Often times developers overlook support for the keyboard when they create custom widgets. To be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse. In practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the Tab, Enter, Spacebar, and arrow keys.
-
-Traditionally, keyboard navigation on the web has been limited to the Tab key. A user presses Tab to focus each link, button, or form on the page in a linear order, using Shift-Tab to navigate backwards. It's a one-dimensional form of navigation—forward and back, one element at a time. On fairly dense pages, a keyboard-only user often has to press the Tab key dozens of times before accessing the needed section. Implementing desktop-style keyboard conventions on the web has the potential to significantly speed up navigation for many users.
+开发者在创建自定义微件时经常忽略对键盘的支持。为了让各种用户都能访问，Web 应用程序或微件的所有功能都应该可以通过键盘控制，而不需要鼠标。在实践中，这通常涉及遵循桌面上类似微件支持的约定，充分利用制表键（tab）、回车、空格和方向键。
 
-Here's a summary of how keyboard navigation should work in an ARIA-enabled web application:
+传统意义上，Web 上的键盘导航仅限于制表键。用户按制表键将以线性顺序依次聚焦页面上的每个链接、按钮或表单，使用换档键 + 制表键则向后导航。这是一种一维导航形式——前进和后退，一次一个元素。在相当密集的页面上，仅使用键盘的用户通常需要按下制表键数十次才能访问所需的部分。在 Web 上实现桌面风格的键盘约定有可能显著加快许多用户的导航速度。
 
-- The Tab key should provide focus to the widget as a whole. For example, tabbing to a menu bar should put focus on the menu's first elem.
-- The arrow keys should allow for selection or navigation within the widget. For example, using the left and right arrow keys should move focus to the previous and next menu items.
-- When the widget is not inside a form, both the Enter and Spacebar keys should select or activate the control.
-- Within a form, the Spacebar key should select or activate the control, while the Enter key should submit the form's default action.
-- If in doubt, mimic the standard desktop behavior of the control you are creating.
+下面是 ARIA 启用的 Web 应用程序中键盘导航的摘要：
 
-So, for the Tabs widget example above, the user should be able to navigate into and out of the widget's container (the \<ol> in our markup) using the Tab and Shift-Tab keys. Once keyboard focus is inside the container, the arrow keys should allow the user to navigate between each tab (the \<li> elements). From here, conventions vary from platform to platform. On Windows, the next tab should automatically be activated when the user presses the arrow keys. On Mac OS X, the user can press either Enter or the Spacebar to activate the next tab. An in-depth tutorial for creating [Keyboard-navigable JavaScript widgets](/zh-CN/Accessibility/Keyboard-navigable_JavaScript_widgets) describes how to implement this behavior with JavaScript.
+- 制表键应该将焦点放到整个微件上面。例如，导航到菜单栏时**不应该**将焦点放在菜单的第一个元素上。
+- 方向键应该允许在微件内进行选择或导航。例如，使用左右方向键应该将焦点移动到上一个和下一个菜单项。
+- 当微件不在表单内时，回车和空格都应该选择或激活控件。
+- 若在表单内，空格键应该选择或激活控件，而回车键应该将表单提交到默认的地址（action）。
+- 如果不确定，请模仿你正在创建的控件的标准桌面行为。
 
-For more detail about desktop-style keyboard navigation conventions, a comprehensive [DHTML style guide](http://access.aol.com/dhtml-style-guide-working-group/) is available. It provides an overview of how keyboard navigation should work for each type of widget supported by ARIA. The W3C also offers a helpful [ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) document that includes keyboard navigation and shortcut conventions for a variety of widgets.
+因此，对于上面的标签页微件示例，用户应该能够使用制表键和上档键 + 制表键导航到微件的容器（上面标记中的 {{HTMLElement('ol')}}）中并从其导航出来。一旦键盘焦点位于容器内，方向键应该允许用户在每个标签之间导航（{{HTMLElement('li')}} 元素）。从这里开始，约定因平台而异。在 Windows 上，当用户按下方向键时，下一个标签应该自动激活。在 macOS 上，用户可以按回车或空格键来激活下一个标签。[键盘导航的 JavaScript 微件](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)的深入教程描述了如何使用 JavaScript 实现此行为。
 
 ## 参见
 
-- [ARIA](/zh-CN/ARIA)
-- [Web applications and ARIA FAQ](/zh-CN/Accessibility/Web_applications_and_ARIA_FAQ)
-- [WAI-ARIA Specification](http://www.w3.org/TR/wai-aria/)
-- [WAI-ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html)
-- [DHTML Style Guide](http://access.aol.com/dhtml-style-guide-working-group/)
+- [ARIA](/zh-CN/docs/Web/Accessibility/ARIA)
+- [键盘导航的 JavaScript 微件](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)
+- [WAI-ARIA 规范](https://www.w3.org/TR/wai-aria-1.1/)
+- [WAI-ARIA 创作实践](https://www.w3.org/WAI/ARIA/apg/)
diff --git a/files/zh-cn/web/api/attr/index.md b/files/zh-cn/web/api/attr/index.md
index 72f484a527d0ca..c91de888a06699 100644
--- a/files/zh-cn/web/api/attr/index.md
+++ b/files/zh-cn/web/api/attr/index.md
@@ -96,8 +96,6 @@ slug: Web/API/Attr
   - : `当前该方法总是返回`false.
 - `insertBefore()`
   - : 通过编辑{{domxref("Attr.value")}}来实现相同效果
-- `isSupported()`
-  - : 这个方法本不应当被在这里使用，所以无须担心其演变
 - `isEqualNode()`
   - : 这个方法本不应当被在这里使用，所以无须担心其演变
 - `normalize()`
diff --git a/files/zh-cn/web/api/element/sethtml/index.md b/files/zh-cn/web/api/element/sethtml/index.md
new file mode 100644
index 00000000000000..333864a12463c5
--- /dev/null
+++ b/files/zh-cn/web/api/element/sethtml/index.md
@@ -0,0 +1,70 @@
+---
+title: Element：setHTML() 方法
+slug: Web/API/Element/setHTML
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef("HTML Sanitizer API")}}{{SeeCompatTable}}
+
+{{domxref("Element")}} 接口的 **`setHTML()`** 方法用于解析和清理（sanitize）HTML 字符串，然后将其作为元素的子树插入到 DOM 中。应使用它来代替 {{domxref("Element.innerHTML")}}，以将不受信任的 HTML 字符串插入到元素中。
+
+解析过程会删除 HTML 字符串中的对于当前元素上下文无效的任何元素，而清理则会删除任何不安全或不需要的元素、属性或者注释。默认的 `Sanitizer()` 配置会默认删除 XSS 相关的输入，包括 {{HTMLElement("script")}} 标签、自定义元素和注释。可以使用 {{domxref("Sanitizer.Sanitizer","Sanitizer()")}} 构造函数的选项来自定义清理器配置。
+
+> **备注：** 如果字符串必须在之后的时间点插入到 DOM 中，例如目标元素尚不可用，则应使用 {{domxref("Sanitizer.sanitizeFor()")}} 代替此方法。
+
+## 语法
+
+```js-nolint
+setHTML(input, options)
+```
+
+### 参数
+
+- `input`
+  - : 定义要清理的 HTML 字符串。
+- `options` {{optional_inline}}
+
+  - : 具有以下可选参数的选项对象：
+
+    - `sanitizer`
+      - : 一个 {{domxref("Sanitizer")}} 对象，用于定义输入的哪些元素将被清理。如果未指定，则使用默认的 {{domxref("Sanitizer")}} 对象。
+
+### 返回值
+
+无（`undefined`）。
+
+### 异常
+
+无。
+
+## 示例
+
+以下代码演示了如何清理 HTML 字符串并将其插入 id 为 `target` 的元素（`Element`）中。
+
+```js
+const unsanitized_string = "abc <script>alert(1)<" + "/script> def"; // 未清理的 HTML 字符串
+const sanitizer1 = new Sanitizer(); // 默认的清理器；
+
+// 获取 id 为“target”的元素并将其设置为清理后的字符串。
+document
+  .getElementById("target")
+  .setHTML(unsanitized_string, { sanitizer: sanitizer1 });
+
+// 结果（字符串）：“abc  def”
+```
+
+> **备注：** 该示例使用默认的清理器。{{domxref("Sanitizer/Sanitizer","Sanitizer")}} 构造函数用于配置清理器选项。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Sanitizer.sanitizeFor()")}}
+- {{domxref('HTML Sanitizer API')}}
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 bacaf191bc9dc8..2e8e3033fa307d 100644
--- a/files/zh-cn/web/api/file_system_api/index.md
+++ b/files/zh-cn/web/api/file_system_api/index.md
@@ -28,7 +28,7 @@ slug: Web/API/File_System_API
 
 ### 源私有文件系统
 
-[源私有文件系统](https://fs.spec.whatwg.org/#origin-private-file-system)（origin private file system，OPFS）属于文件系统 API，提供了页面所属的源专用的存储端点，并且像常规文件系统一样对用户不可见。它提供对一种经过高度性能优化的特殊文件的访问能力的选择，例如，对文件内容的原地写入访问。
+源私有文件系统（origin private file system，OPFS）属于文件系统 API，提供了页面所属的源专用的存储端点，并且不像常规文件系统那样对用户可见。它提供对一种经过高度性能优化的特殊文件的访问能力的选择，例如，对文件内容的原地写入访问。
 
 请阅读我们的[源私有文件系统](/zh-CN/docs/Web/API/File_System_API/Origin_private_file_system)，以了解如何使用它。
 
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
new file mode 100644
index 00000000000000..c9e3b2623c66d3
--- /dev/null
+++ b/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md
@@ -0,0 +1,197 @@
+---
+title: 源私有文件系统
+slug: Web/API/File_System_API/Origin_private_file_system
+---
+
+{{securecontext_header}}{{DefaultAPISidebar("File System API")}}
+
+源私有文件系统（OPFS）是作为[文件系统 API](/zh-CN/docs/Web/API/File_System_API) 的一部分提供的一个存储端点。它是页面所属的源专用的，并且不像常规文件系统那样对用户可见。它提供了对一种特殊类型文件的访问能力，这种文件经过高度性能优化，并提供对其内容的原地写入访问特性。
+
+## 使用文件系统 API 处理文件
+
+扩展自[文件系统 API](/zh-CN/docs/Web/API/File_System_API) 的[文件系统访问 API](https://wicg.github.io/file-system-access/) 使用选择器提供了对文件的访问能力。例如：
+
+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. 如果用户接受了权限请求，更改就会保存回原文件。
+
+这个方法可行，但是有一些限制。这些更改是对用户可见的文件系统进行的，所以会有很多适当的安全性检查（比方说 Chrome 的[安全浏览](https://developers.google.com/safe-browsing)）来防止恶意内容被写入到文件系统。这些写入不是原地的，会先写入到一个临时文件。除非通过了所有的安全性检查，否则原文件不会被修改。
+
+因此，这些操作会相当缓慢。在你进行小规模的文本更新时没那么明显，但是当进行像 [SQLite](https://www.sqlite.org/wasm) 数据库更改这样的更显著、更大规模的文件更新时就会遇到性能问题。
+
+## OPFS 是怎么解决这些问题的？
+
+OPFS 提供了页面所属源私有的、对用户不可见的、底层的逐字节文件访问能力。因此它不需要经过与调用文件系统访问 API 所需的一系列相同的安全性检查和授权，而且比文件系统访问 API 更快。它还有一套同步调用方法可用（其他的文件系统 API 调用是异步的），但只能在 web worker 中运行，这样就不会阻塞主线程。
+
+概括 OPFS 和用户可见文件系统的不同：
+
+- OPFS 和其他源分区存储机制（例如 {{domxref("IndexedDB API", "IndexedDB API", "", "nocode")}}）一样，受到[浏览器存储配额限制](/zh-CN/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)。你可以通过 {{domxref("StorageManager.estimate()", "navigator.storage.estimate()")}} 来获得 OPFS 所用的存储空间的容量。
+- 清除站点的存储数据会删除 OPFS。
+- 访问 OPFS 中的文件不需要权限提示和安全性检查。
+- 浏览器会把 OPFS 的内容持久化保存在磁盘的某个位置，但你不能指望能够一一对应地找到创建出的文件。OPFS 对用户不可见。
+
+## 如何访问 OPFS？
+
+想要访问 OPFS，你首先要调用 {{domxref("StorageManager.getDirectory()", "navigator.storage.getDirectory()")}} 方法。返回一个代表 OPFS 根目录的 {{domxref("FileSystemDirectoryHandle")}} 对象的引用。
+
+## 在主线程中操作 OPFS
+
+在主线程中访问 OPFS 时，你要使用基于 {{jsxref("Promise")}} 的异步 API。你可以调用代表 OPFS 根目录（以及其中被创建的子目录）的 {{domxref("FileSystemDirectoryHandle")}} 对象上的 {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} 和 {{domxref("FileSystemDirectoryHandle.getDirectoryHandle()")}} 方法来分别访问文件（{{domxref("FileSystemFileHandle")}}）和目录（{{domxref("FileSystemDirectoryHandle")}}）。
+
+> **备注：** 在上述方法中传入 `{ create: true }` 会在文件或文件夹不存在时创建相应的文件或文件夹。
+
+```js
+// 创建层级结构的文件和文件夹
+const fileHandle = await opfsRoot.getFileHandle("my first file", {
+  create: true,
+});
+const directoryHandle = await opfsRoot.getDirectoryHandle("my first folder", {
+  create: true,
+});
+const nestedFileHandle = await directoryHandle.getFileHandle(
+  "my first nested file",
+  { create: true },
+);
+const nestedDirectoryHandle = await directoryHandle.getDirectoryHandle(
+  "my first nested folder",
+  { create: true },
+);
+
+// 通过文件名和文件夹名访问已有的文件和文件夹
+const existingFileHandle = await opfsRoot.getFileHandle("my first file");
+const existingDirectoryHandle =
+  await opfsRoot.getDirectoryHandle("my first folder");
+```
+
+### 读取文件
+
+1. 调用 {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} 以返回一个 {{domxref("FileSystemFileHandle")}} 对象。
+2. 调用 {{domxref("FileSystemFileHandle.getFile()")}} 方法返回一个 {{domxref("File")}} 对象。这是一种特化的 {{domxref("Blob")}} 对象，所以可以像操作其他 `Blob` 对象那样去操作它。比如，你可以通过 {{domxref("Blob.text()")}} 直接访问其文本内容。
+
+### 写入文件
+
+1. 调用 {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} 以返回一个 {{domxref("FileSystemFileHandle")}} 对象。
+2. 调用 {{domxref("FileSystemFileHandle.createWritable()")}} 方法返回一个 {{domxref("FileSystemWritableFileStream")}} 对象，这是一种特化的 {{domxref("WritableStream")}} 对象。
+3. 调用 {{domxref("FileSystemWritableFilestream.write()")}} 来向其写入内容。
+4. 使用 {{domxref("WritableStream.close()")}} 关闭流。
+
+### 删除文件或目录
+
+你可以在父目录上调用 {{domxref("FileSystemDirectoryHandle.removeEntry()")}}，向它传入你想要删除的项的名称：
+
+```js
+directoryHandle.removeEntry("my first nested file");
+```
+
+你也可以在代表你想要删除的项目的 {{domxref("FileSystemFileHandle")}} 或 {{domxref("FileSystemDirectoryHandle")}} 上调用 {{domxref("FileSystemHandle.remove()")}} 来进行删除。要删除一个文件夹和它所有的子文件夹，需要传递 `{ recursive: true }` 选项。
+
+```js
+await fileHandle.remove();
+await directoryHandle.remove({ recursive: true });
+```
+
+下面提供一个快捷的方法清空整个 OPFS：
+
+```js
+await (await navigator.storage.getDirectory()).remove({ recursive: true });
+```
+
+### 列出文件夹中的内容
+
+{{domxref("FileSystemDirectoryHandle")}} 是一个[异步迭代器](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#异步迭代器和异步可迭代协议)。所以，你可以用 [`for await…of`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for-await...of) 循环和诸如 [`entries()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries)、[`values()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries) 和 [`keys()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries) 这样的标准方法对其进行迭代。
+
+例如：
+
+```js
+for await (let [name, handle] of directoryHandle) {
+}
+for await (let [name, handle] of directoryHandle.entries()) {
+}
+for await (let handle of directoryHandle.values()) {
+}
+for await (let name of directoryHandle.keys()) {
+}
+```
+
+## 在 web worker 中操作 OPFS
+
+Web Worker 不会阻塞主线程，这意味着你可以在其上下文中使用同步文件访问 API。同步的 API 因其不需要处理 promise，所以更快。
+
+你可以通过在常规的 {{domxref("FileSystemFileHandle")}} 上调用 {{domxref("FileSystemFileHandle.createSyncAccessHandle()")}} 来同步地处理文件：
+
+> **备注：** 虽然 `createSyncAccessHandle()` 的名称带有“Sync（同步）”字眼，但是这个方法本身是异步的。
+
+```js
+const opfsRoot = await navigator.storage.getDirectory();
+const fileHandle = await opfsRoot.getFileHandle("高速文件.txt", {
+  create: true,
+});
+const syncAccessHandle = await fileHandle.createSyncAccessHandle();
+```
+
+返回的 {{domxref("FileSystemSyncAccessHandle")}} 上有几个*同步的*方法可用：
+
+- {{domxref("FileSystemSyncAccessHandle.getSize", "getSize()")}}：返回文件的字节大小。
+- {{domxref("FileSystemSyncAccessHandle.write", "write()")}}：将一个缓冲区的内容写入到文件中，可选择在给定的偏移处开始写入。它会返回写入的字节数。检查返回的写入字节数可以让调用方检测并处理错误和不完整的写入。
+- {{domxref("FileSystemSyncAccessHandle.read", "read()")}}：读取文件的内容到一个缓冲区中，可选择在给定的偏移处开始读取。
+- {{domxref("FileSystemSyncAccessHandle.truncate", "truncate()")}}：将文件调整至给定的大小。
+- {{domxref("FileSystemSyncAccessHandle.flush", "flush()")}}：确保文件的内容包含所有通过 `write()` 完成的修改。
+- {{domxref("FileSystemSyncAccessHandle.close", "close()")}}：关闭访问句柄。
+
+这里是一个使用了上述所有方法的示例：
+
+```js
+const opfsRoot = await navigator.storage.getDirectory();
+const fileHandle = await opfsRoot.getFileHandle("fast", { create: true });
+const accessHandle = await fileHandle.createSyncAccessHandle();
+
+const textEncoder = new TextEncoder();
+const textDecoder = new TextDecoder();
+
+// 将这个变量初始化为文件的大小。
+let size;
+// 文件当前的大小，最开始是 `0`。
+size = accessHandle.getSize();
+// 编码要写入文件的内容。
+const content = textEncoder.encode("Some text");
+// 在文件的开头写入内容。
+accessHandle.write(content, { at: size });
+// 强制刷入更改。
+accessHandle.flush();
+// 文件当前的大小，现在是 `9`（"Some text" 的长度）。
+size = accessHandle.getSize();
+
+// 编码更多要写入文件的内容。
+const moreContent = textEncoder.encode("More content");
+// 在文件的末尾写入内容。
+accessHandle.write(moreContent, { at: size });
+// 强制刷入更改。
+accessHandle.flush();
+// 文件当前的大小，现在是 `21`（"Some textMore content" 的长度）。
+size = accessHandle.getSize();
+
+// 准备一个长度与文件相同的数据视图。
+const dataView = new DataView(new ArrayBuffer(size));
+
+// 将整个文件读取到数据视图。
+accessHandle.read(dataView);
+// 打印 `"Some textMore content"`。
+console.log(textDecoder.decode(dataView));
+
+// 在数据视图中的偏移位置 9 处开始读取。
+accessHandle.read(dataView, { at: 9 });
+// 打印 `"More content"`。
+console.log(textDecoder.decode(dataView));
+
+// 裁去文件头 4 个字节之后的内容。
+accessHandle.truncate(4);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [源私有文件系统](https://web.dev/articles/origin-private-file-system)——web.dev
diff --git a/files/zh-cn/web/api/history_api/index.md b/files/zh-cn/web/api/history_api/index.md
index 810f97c62ee68e..1d1c8244960268 100644
--- a/files/zh-cn/web/api/history_api/index.md
+++ b/files/zh-cn/web/api/history_api/index.md
@@ -1,169 +1,91 @@
 ---
 title: History API
 slug: Web/API/History_API
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{DefaultAPISidebar("History API")}}
 
-DOM {{ domxref("window") }} 对象通过 {{ domxref("window.history", "history") }} 对象提供了对浏览器的会话历史的访问 (不要与 [WebExtensions history](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/history)搞混了)。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。
+**History API** 通过 {{DOMxRef("Window.history","history")}} 全局对象提供了对浏览器会话的历史记录（不要与 [WebExtensions 的 history](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/history) 混淆）的访问功能。它暴露了很多有用的方法和属性，使你可以在用户的历史记录中来回导航，而且可以操作历史记录栈中的内容。
 
-## 意义及使用
+> **备注：** 该 API 仅在主线程（{{domxref("Window")}}）中可用。无法在 {{domxref("Worker")}} 或 {{domxref("Worklet")}} 上下文中访问它。
 
-使用 {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}和 {{DOMxRef("History.go","go()")}} 方法来完成在用户历史记录中向后和向前的跳转。
+## 概念和用法
 
-### 向前和向后跳转
-
-在 history 中向后跳转：
-
-```js
-window.history.back();
-```
+使用 {{DOMxRef("History.back","back()")}}、{{DOMxRef("History.forward","forward()")}} 和 {{DOMxRef("History.go","go()")}} 方法可以在用户历史记录中前后跳转。
 
-这和用户点击浏览器回退按钮的效果相同。
+### 向前和向后跳转
 
-类似地，你可以向前跳转（如同用户点击了前进按钮）：
+在历史记录中向后跳转：
 
 ```js
-window.history.forward();
+history.back();
 ```
 
-### 跳转到 history 中指定的一个点
+这和用户点击浏览器的回退（<kbd><strong>Back</strong></kbd>）按钮的效果相同。
 
-你可以用 `go()` 方法载入到会话历史中的某一特定页面，通过与当前页面相对位置来标志 (当前页面的相对位置标志为 0).
-
-向后移动一个页面 (等同于调用 `back()`):
+类似地，你可以向前跳转（如同用户点击了前进（<kbd><strong>Forward</strong></kbd>）按钮）：
 
 ```js
-window.history.go(-1);
+history.forward();
 ```
 
-向前移动一个页面，等同于调用了 `forward()`:
-
-```js
-window.history.go(1);
-```
+### 跳转到历史记录中的指定位置
 
-类似地，你可以传递参数值 2 并向前移动 2 个页面，等等。
+你可以用 `go()` 方法从会话历史记录中加载某一特定页面，该页面使用与当前页面的相对位置来标识（当前页面的相对位置为 `0`）。
 
-你可以通过查看长度属性的值来确定的历史堆栈中页面的数量：
+向后跳转一个页面（等价于调用 {{DOMxRef("History.back","back()")}}）：
 
 ```js
-let numberOfEntries = window.history.length;
+history.go(-1);
 ```
 
-> **备注：** IE 支持传递 URLs 作为参数给 go()；这在 Gecko 是不标准且不支持的。
-
-## 添加和修改历史记录中的条目
-
-HTML5 引入了 [history.pushState()](/zh-CN/docs/Web/API/History/pushState) 和 [history.replaceState()](</zh-CN/docs/Web/API/History_API#The_replaceState()_method>) 方法，它们分别可以添加和修改历史记录条目。这些方法通常与{{ domxref("window.onpopstate") }} 配合使用。
-
-使用 `history.pushState()` 可以改变 referrer，它在用户发送 [`XMLHttpRequest`](/zh-CN/DOM/XMLHttpRequest) 请求时在 HTTP 头部使用，改变 state 后创建的 [`XMLHttpRequest`](/zh-CN/DOM/XMLHttpRequest) 对象的 referrer 都会被改变。因为 referrer 是标识创建 [`XMLHttpRequest`](/zh-CN/DOM/XMLHttpRequest) 对象时 `this` 所代表的 window 对象中 document 的 URL。
-
-### pushState() 方法的例子
-
-假设在 `http://mozilla.org/foo.html` 页面的 console 中执行了以下 JavaScript 代码：
+向前跳转一个页面，就像调用 {{DOMxRef("History.forward","forward()")}}：
 
 ```js
-window.onpopstate = function (e) {
-  alert(2);
-};
-
-let stateObj = {
-  foo: "bar",
-};
-
-history.pushState(stateObj, "page 2", "bar.html");
+history.go(1);
 ```
 
-这将使浏览器地址栏显示为 `http://mozilla.org/bar.html`，但并不会导致浏览器加载 `bar.html` ，甚至不会检查`bar.html` 是否存在。
-
-假如现在用户在 bar.html 点击了返回按钮，将会执行 alert(2)。
-
-假设现在用户在 bar.html 又访问了 `http://google.com`，然后点击了返回按钮。此时，地址栏将显示 `http://mozilla.org/bar.html`， `history.state` 中包含了 `stateObj` 的一份拷贝。页面此时展现为`bar.html`。且因为页面被重新加载了，所以 `popstate` 事件将不会被触发，也不会执行 alert(2)。
-
-如果我们再次点击返回按钮，页面 URL 会变为 `http://mozilla.org/foo.html`，文档对象 document 会触发另外一个 `popstate` 事件 (如果有 bar.html，且 bar.html 注册了 onpopstate 事件，将会触发此事件，因此也不会执行 foo 页面注册的 onpopstate 事件，也就是不会执行 alert(2))，这一次的事件对象 state object 为 null。这里也一样，返回并不改变文档的内容，尽管文档在接收 `popstate` 事件时可能会改变自己的内容，其内容仍与之前的展现一致。
-
-如果我们再次点击返回按钮，页面 URL 变为其他页面的 url，依然不会执行 alert(2)。因为在返回到 foo 页面的时候并没有 pushState。
-
-### pushState() 方法
-
-`pushState()` 需要三个参数：一个状态对象，一个标题 (目前被忽略), 和 (可选的) 一个 URL. 让我们来解释下这三个参数详细内容：
-
-- **状态对象** — 状态对象 state 是一个 JavaScript 对象，通过 pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate 事件就会被触发，且该事件的 state 属性包含该历史记录条目状态对象的副本。
+类似地，你可以传递参数值 `2` 并向前跳转 2 个页面，等等。
 
-  状态对象可以是能被序列化的任何东西。原因在于 Firefox 将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有 640k 的大小限制。如果你给 `pushState()` 方法传了一个序列化后大于 640k 的状态对象，该方法会抛出异常。如果你需要更大的空间，建议使用 `sessionStorage` 以及 `localStorage`.
-
-- **标题** — Firefox 目前忽略这个参数，但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者，你可以为跳转的 state 传递一个短标题。
-- **URL** — 该参数定义了新的历史 URL 记录。注意，调用 `pushState()` 后浏览器并不会立即加载这个 URL，但可能会在稍后某些情况下加载这个 URL，比如在用户重新打开浏览器时。新 URL 不必须为绝对路径。如果新 URL 是相对路径，那么它将被作为相对于当前 URL 处理。新 URL 必须与当前 URL 同源，否则 `pushState()` 会抛出一个异常。该参数是可选的，缺省为当前 URL。
-
-> **备注：** 从 Gecko 2.0 到 Gecko 5.0，传递的对象是使用 JSON 进行序列化的。从 Gecko 6.0 开始，该对象的序列化将使用[结构化克隆算法](/zh-CN/DOM/The_structured_clone_algorithm)。这将会使更多对象可以被安全的传递。
-
-在某种意义上，调用 `pushState()` 与 设置 `window.location = "#foo"` 类似，二者都会在当前页面创建并激活新的历史记录。但 `pushState()` 具有如下几条优点：
-
-- 新的 URL 可以是与当前 URL 同源的任意 URL。相反，只有在修改哈希时，设置 `window.location` 才能是同一个 {{ domxref("document") }}。
-- 如果你不想改 URL，就不用改。相反，设置 `window.location = "#foo";`在当前哈希不是 `#foo` 时，才能创建新的历史记录项。
-- 你可以将任意数据和新的历史记录项相关联。而基于哈希的方式，要把所有相关数据编码为短字符串。
-- 如果 `标题` 随后还会被浏览器所用到，那么这个数据是可以被使用的（哈希则不是）。
-
-注意 `pushState()` 绝对不会触发 `hashchange` 事件，即使新的 URL 与旧的 URL 仅哈希不同也是如此。
-
-在 [XUL](/zh-CN/docs/Mozilla/Tech/XUL) 文档中，它创建指定的 XUL 元素。
-
-在其他文档中，它创建一个命名空间 URI 为`null`的元素。
-
-### replaceState() 方法
-
-`history.replaceState()` 的使用与 `history.pushState()` 非常相似，区别在于 `replaceState()` 是修改了当前的历史记录项而不是新建一个。注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
-
-`replaceState()` 的使用场景在于为了响应用户操作，你想要更新状态对象 state 或者当前历史记录的 URL。
-
-> **备注：** 从 Gecko 2.0 到 Gecko 5.0，传递的对象是使用 JSON 进行序列化的。从 Gecko 6.0 开始，该对象的序列化将使用[结构化克隆算法](/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)。这将会使更多对象可以被安全的传递。
-
-### replaceState() 方法示例
-
-假设 `http://mozilla.org/foo.html` 执行了如下 JavaScript 代码：
+`go()` 方法的另一个用途是，在调用它时传递 `0` 或不传递任何参数以刷新当前页面：
 
 ```js
-let stateObj = {
-  foo: "bar",
-};
-
-history.pushState(stateObj, "page 2", "bar.html");
+// 以下语句都具有刷新页面的效果
+history.go(0);
+history.go();
 ```
 
-上文 2 行代码可以在 "pushState() 方法示例" 部分找到。然后，假设 `http://mozilla.org/bar.html` 执行了如下 JavaScript：
+你可以通过查看 `length` 属性的值来确定历史记录栈中的页面数量：
 
 ```js
-history.replaceState(stateObj, "page 3", "bar2.html");
+const numberOfEntries = history.length;
 ```
 
-这将会导致地址栏显示 `http://mozilla.org/bar2.html`，但是浏览器并不会去加载`bar2.html` 甚至都不需要检查 `bar2.html` 是否存在。
-
-假设现在用户重新导向到了 `http://www.microsoft.com`，然后点击了回退按钮。这里，地址栏会显示 `http://mozilla.org/bar2.html`。假如用户再次点击回退按钮，地址栏会显示 `http://mozilla.org/foo.html`，完全跳过了 bar.html。
-
-### popstate 事件
-
-每当活动的历史记录项发生变化时， `popstate` 事件都会被传递给 window 对象。如果当前活动的历史记录项是被 `pushState` 创建的，或者是由 `replaceState` 改变的，那么 `popstate` 事件的状态属性 `state` 会包含一个当前历史记录状态对象的拷贝。
-
-使用示例请参见 {{ domxref("window.onpopstate") }} 。
+## 接口
 
-### 获取当前状态
+- {{domxref("History")}}
+  - : 允许操作浏览器*会话的历史记录*（即加载了当前页面的标签页或框架（frame）中访问过的页面）。
+- {{domxref("PopStateEvent")}}
+  - : {{domxref("Window.popstate_event", "popstate")}} 事件的接口。
 
-页面加载时，或许会有个非 null 的状态对象。这是有可能发生的，举个例子，假如页面（通过`pushState()` 或 `replaceState()` 方法）设置了状态对象而后用户重启了浏览器。那么当页面重新加载时，页面会接收一个 onload 事件，但没有 popstate 事件。然而，假如你读取了 history.state 属性，你将会得到如同 popstate 被触发时能得到的状态对象。
+## 示例
 
-你可以读取当前历史记录项的状态对象 state，而不必等待`popstate` 事件，只需要这样使用`history.state` 属性：
+以下示例为 {{domxref("Window.popstate_event", "popstate")}} 事件分配了一个监听器。然后它演示了一些 history 对象的方法：对当前标签页浏览记录的添加、替换和跳转。
 
 ```js
-// 尝试通过 pushState 创建历史条目，然后再刷新页面查看 state 状态对象变化;
-window.addEventListener("load", () => {
-  let currentState = history.state;
-  console.log("currentState", currentState);
+window.addEventListener("popstate", (event) => {
+  alert(`位置：${document.location}，状态：${JSON.stringify(event.state)}`);
 });
-```
-
-## 例子
 
-完整的 AJAX 网站示例，请参阅： [Ajax navigation example](/zh-CN/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example).
+history.pushState({ page: 1 }, "标题 1", "?page=1");
+history.pushState({ page: 2 }, "标题 2", "?page=2");
+history.replaceState({ page: 3 }, "标题 3", "?page=3");
+history.back(); // 显示警告“位置：http://example.com/example.html?page=1，状态：{"page":1}”
+history.back(); // 显示警告“位置：http://example.com/example.html，状态：null”
+history.go(2); // 显示警告“位置：http://example.com/example.html?page=3，状态：{"page":3}”
+```
 
 ## 规范
 
@@ -173,13 +95,7 @@ window.addEventListener("load", () => {
 
 {{Compat}}
 
-## 另见
-
-### 参考
-
-- {{ domxref("window.history") }}
-- {{ domxref("window.onpopstate") }}
-
-### Guides
+## 参见
 
-- [Working with the History API](/zh-CN/docs/Web/API/History_API/Working_with_the_History_API)
+- {{domxref("window.history", "history")}} 全局对象
+- {{domxref("Window/popstate_event", "popstate")}} 事件
diff --git a/files/zh-cn/web/api/notification/index.md b/files/zh-cn/web/api/notification/index.md
index 4a53b010408f26..5db5572668f314 100644
--- a/files/zh-cn/web/api/notification/index.md
+++ b/files/zh-cn/web/api/notification/index.md
@@ -20,7 +20,7 @@ slug: Web/API/Notification
 
 这些属性只能用于 `Notification` 对象自身。
 
-- {{domxref("Notification.permission")}} {{ReadOnlyInline}}
+- {{domxref("Notification.permission_static", "Notification.permission")}} {{ReadOnlyInline}}
 
   - : 一个字符串，表示当前显示通知的权限。可能的值是：
 
@@ -28,7 +28,7 @@ slug: Web/API/Notification
     - `granted`——用户接受显示通知。
     - `default`——用户选择是未知的，因此浏览器的行为类似于值是 denied。
 
-- {{domxref("Notification.maxActions")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+- {{domxref("Notification.maxActions_static")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : 设备和用户代理支持的最大的操作数量。
 
 ## 实例属性
@@ -37,8 +37,8 @@ slug: Web/API/Notification
 
 - {{domxref("Notification.actions")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : 在构造函数的 `options` 参数中指定的通知的操作数组。
-- {{domxref("Notification.badge")}} {{ReadOnlyInline}} {{Experimental_Inline}}
-  - : 当没有足够的空间去显示通知自身时，用于表示通知图像的 URL。
+- {{domxref("Notification.badge")}} {{ReadOnlyInline}}
+  - : 当没有足够的空间去显示通知自身（例如 Android 通知栏）时，用于表示通知图像的 URL。在安卓设备上，徽章的分辨率应达到 4x（约 96 x 96 px），图片会被自动屏蔽。
 - {{domxref("Notification.body")}} {{ReadOnlyInline}}
   - : 在构造函数的 `options` 参数中指定的通知的正文字符串。
 - {{domxref("Notification.data")}} {{ReadOnlyInline}}
@@ -55,10 +55,10 @@ slug: Web/API/Notification
   - : 作为通知的一部分显示的图像 URL，在构造函数的选项参数中指定。
 - {{domxref("Notification.renotify")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : 指定在新通知取代旧通知后，是否应该通知用户。
-- {{domxref("Notification.requireInteraction")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+- {{domxref("Notification.requireInteraction")}} {{ReadOnlyInline}}
   - : 一个布尔值，表示通知应该保持活动状态，直到用户点击或者关掉它，而不是自动关闭。
-- {{domxref("Notification.silent")}} {{ReadOnlyInline}} {{Experimental_Inline}}
-  - : 指定通知是否应该静音——即，无论设备的设置如何，都不应发出声音和摆动。
+- {{domxref("Notification.silent")}} {{ReadOnlyInline}}
+  - : 指定通知是否应该静音——即，无论设备的设置如何，都不应发出声音和振动。
 - {{domxref("Notification.timestamp")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : 指定通知创建或者应用时（过去、现在或者未来）的时间。
 - {{domxref("Notification.title")}} {{ReadOnlyInline}}
@@ -70,7 +70,7 @@ slug: Web/API/Notification
 
 这些属性只能用于 `Notification` 对象自身。
 
-- {{domxref("Notification.requestPermission()")}}
+- {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}}
   - : 请求用户允许显示通知。
 
 ## 实例方法
@@ -96,40 +96,38 @@ slug: Web/API/Notification
 假定有如下 HTML：
 
 ```html
-<button onclick="notifyMe()">Notify me!</button>
+<button onclick="notifyMe()">提醒我！</button>
 ```
 
-可能按以下方式发送通知——在这里，我们提供了一个相当冗长且完整的代码，如果你想要首先检查通知是否受支持，然后检查用户是否已授予当前来源发送通知的权限，然后根据需要请求权限，最后发送一个通知。
+可以按如下方式发送通知——在这里，我们提供了一个相当详细且完整的代码，如果你想要首先检查通知是否受支持，然后检查用户是否已授予当前源发送通知的权限，然后根据需要请求权限，最后发送一个通知。
 
 ```js
 function notifyMe() {
   if (!("Notification" in window)) {
-    // Check if the browser supports notifications
-    alert("This browser does not support desktop notification");
+    // 检查浏览器是否支持通知
+    alert("当前浏览器不支持桌面通知");
   } else if (Notification.permission === "granted") {
-    // Check whether notification permissions have already been granted;
-    // if so, create a notification
-    const notification = new Notification("Hi there!");
+    // 检查是否已授予通知权限；如果是的话，创建一个通知
+    const notification = new Notification("你好！");
     // …
   } else if (Notification.permission !== "denied") {
-    // We need to ask the user for permission
+    // 我们需要征求用户的许可
     Notification.requestPermission().then((permission) => {
-      // If the user accepts, let's create a notification
+      // 如果用户接受，我们就创建一个通知
       if (permission === "granted") {
-        const notification = new Notification("Hi there!");
+        const notification = new Notification("你好！");
         // …
       }
     });
   }
 
-  // At last, if the user has denied notifications, and you
-  // want to be respectful there is no need to bother them anymore.
+  // 最后，如果用户拒绝了通知，并且你想尊重用户的选择，则无需再打扰他们
 }
 ```
 
-在这里，我们不再展示一个在线实例，因为 Chrome 和 Firefox 不再允许从跨域的 {{htmlelement("iframe")}} 请求通知权限，其他浏览器会陆续跟进。要查看实际示例，请查看我们的[待办事项示例](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)（参见[在线运行的应用程序](https://mdn.github.io/dom-examples/to-do-notifications/)）。
+在这里，我们不再展示一个在线实例，因为 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 开始就这么做了。
+> **备注：** 在上面的示例中，我们生成了响应用户手势的的通知（点击按钮）。这不仅仅是最佳实践——你不应该向用户发送它们不同意的通知——而且未来浏览器将明确的禁止未响应用户手势发出的通知。例如，Firefox 已经从版本 72 开始就这么做了。
 
 ## 规范
 
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 e4b42de12f1d61..0abbfb1bd328c3 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
@@ -1,261 +1,221 @@
 ---
-title: 使用 Web Notifications
+title: 使用 Notifications API
 slug: Web/API/Notifications_API/Using_the_Notifications_API
+l10n:
+  sourceCommit: 2184f627ae940cca9d95ba9846903ae0cfc4d323
 ---
 
-{{APIRef("Web Notifications")}}
+{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 允许网页或应用程序在系统级别发送在页面外部显示的通知;这样即使应用程序空闲或在后台，Web 应用程序也会向用户发送信息。本文将介绍在你自己的应用程序中使用此 API 的基础知识。
+[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 允许网页或应用程序以系统级别发送在页面外部显示的通知；这样即使应用程序空闲或在后台，Web 应用程序也会向用户发送信息。本文将介绍在你自己的应用程序中使用此 API 的基础知识。
 
-{{AvailableInWorkers}}
+通常，系统通知是指操作系统的标准通知机制，例如，思考典型的桌面系统或移动设备如何发布通知。
 
-通常，系统通知是指操作系统的标准通知机制，例如思考典型的桌面系统或移动设备如何发布通知。
+![桌面通知：通过 mdn.github.io 列出待办事项 嘿！你的任务“去购物”现已过期](desktop-notification.png)
 
-![](android-notification.png)
+系统通知系统当然会因平台和浏览器而异，但无需担心，通知 API 编写得足够通用，足以与大多数系统通知系统兼容。
 
-![](mac-notification.png)
+## 示例
 
-系统通知系统当然会因平台和浏览器而异，但无需担心，通知 API 被编写为通用的，足以与大多数系统通知系统兼容。
+Web 通知最明显的用例之一是基于 Web 的邮件或 IRC 应用程序，即使用户正在使用另一个应用程序执行其他操作，它也需要在收到新消息时通知用户。现在存在许多这样的例子，例如 [Slack](https://slack.com/)。
 
-Web Notifications API 使页面可以发出通知，通知将被显示在页面之外的系统层面上（通常使用操作系统的标准通知机制，但是在不同的平台和浏览器上的表现会有差异）。这个功能使 web 应用可以向用户发送信息，即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序，每当用户收到了一封新的电子邮件都需要通知用户，即使用户正在使用另一个应用程序。
+我们编写了一个现实世界的示例——一个待办事项列表应用程序——来让你更多地了解如何使用 Web 通知。它使用 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 在本地存储数据，并在任务到期时使用系统通知通知用户。[下载待办事项列表代码](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)，或[查看实时运行的应用程序](https://mdn.github.io/dom-examples/to-do-notifications/)。
 
-要显示一条通知，你需要先请求适当的权限，然后你可以实例化一个 {{domxref("Notification")}} 实例：
+## 请求权限
 
-```js
-Notification.requestPermission(function (status) {
-  console.log(status); // 仅当值为 "granted" 时显示通知
-  var n = new Notification("title", { body: "notification body" }); // 显示通知
-});
-```
+在应用程序可以发送通知之前，用户必须授予应用程序这样做的权利。当 API 尝试与网页之外的内容进行交互时，这是一个常见的要求——用户至少需要专门授予该应用程序显示通知的权限一次，从而让用户控制哪些应用程序或站点允许显示通知。
 
-## 请求权限
+由于过去滥用推送通知，网络浏览器和开发人员已开始实施策略来帮助缓解此问题。你应该仅请求同意显示通知以响应用户手势（例如：单击按钮）。这不仅是最佳实践（你不应该向用户发送他们不同意的通知），而且未来的浏览器将明确禁止未响应用户手势而触发的通知权限请求。例如，Firefox 从版本 72 开始就已经这样做了，Safari 也已经这样做了一段时间了。
 
-在应用可以发送通知之前，用户必须授予应用有权这么做。这是一个常见的要求，当一个 API 至少一次试图与 web 页外部进行交互时，用户不得不专门授予该应用程序有权限提出通知，从而让用户控制允许哪些应用程序或网站显示通知。
+此外，在 Chrome 和 Firefox 中，除非网站是安全上下文（即 HTTPS），否则你根本无法请求通知，并且你不能再从跨源 {{htmlelement("iframe")}} 请求通知权限。
 
 ### 检查当前权限状态
 
-你可以通过检查只读属性 {{domxref("Notification.permission")}} 的值来查看你是否已经有权限。该属性的值将会是下列三个之一：
+你可以通过检查只读属性 {{domxref("Notification.permission_static", "Notification.permission")}} 的值来查看你是否已经有权限。该属性的值将会是下列三个之一：
 
 - `default`
-  - : 用户还未被询问是否授权，所以通知不会被显示。参看 [获得权限](#获得权限) 以了解如何请求显示通知的权限。
+  - : 用户还未被询问是否授权，所以通知不会被显示。
 - `granted`
   - : 表示之前已经询问过用户，并且用户已经授予了显示通知的权限。
 - `denied`
-  - : 用户已经明确的拒绝了显示通知的权限。
-
-> **备注：** Safari 和 Chrome (在 32 版本之前) 还没有实现 `permission` 属性。
+  - : 用户已经明确地拒绝了显示通知的权限。
 
 ### 获得权限
 
-如果权限尚未被授予，那么应用不得不通过 {{domxref("Notification.requestPermission()")}} 方法让用户进行选择。这个方法接受一个回调函数，一旦用户回应了显示通知的请求，将会调用这个函数。
+如果尚未授予显示通知的权限，则应用程序需要使用 {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}} 方法向用户请求此权限。在最简单的形式中，我们只包含以下内容：
 
-通常你应在你的应用首次初始化的时候请求显示通知的权限：
+```js
+Notification.requestPermission().then((result) => {
+  console.log(result);
+});
+```
+
+这使用了该方法的基于 promise 的版本。如果你想支持旧版本，你可能必须使用旧的回调版本，如下所示：
 
 ```js
-window.addEventListener("load", function () {
-  Notification.requestPermission(function (status) {
-    // 这将使我们能在 Chrome/Safari 中使用 Notification.permission
-    if (Notification.permission !== status) {
-      Notification.permission = status;
-    }
-  });
+Notification.requestPermission((result) => {
+  console.log(result);
 });
 ```
 
-> **备注：** Chrome 不允许你在 `load` 事件处理中调用 {{domxref("Notification.requestPermission()")}}（参见 [issue 274284](https://code.google.com/p/chromium/issues/detail?id=274284)）。
+回调版本可以选择接受一个回调函数，一旦用户响应了显示权限的请求，就会调用该回调函数。
 
-### Notification API 的清单权限
+> **备注：** 目前无法可靠地对 `Notification.requestPermission` 是否支持基于 Promise 的版本进行特性测试。如果你需要支持较旧的浏览器，只需使用基于回调的版本——尽管它已被弃用，但它仍然可以在新浏览器中使用。有关更多信息，请参阅[浏览器兼容性表](/zh-CN/docs/Web/API/Notification/requestPermission_static#浏览器兼容性)。
 
-请注意 Notification API 不是 {{Glossary("privileged")}} 或 {{Glossary("certified")}}，因此当你在一个开放 web 应用中使用它时，你仍需要在你的 `manifest.webapp` 文件中包含以下项目：
+### 示例
 
+在我们的待办事项列表演示中，我们包含一个“启用通知”按钮，按下该按钮时，会请求应用程序的通知权限。
+
+```html
+<button id="enable">Enable notifications</button>
 ```
-"permissions": {
-  "desktop-notification": {
-    "description": "Needed for creating system notifications."
+
+单击此按钮将调用 `askNotificationPermission()` 函数：
+
+```js
+function askNotificationPermission() {
+  // 实际询问权限的函数
+  function handlePermission(permission) {
+    // 根据用户的回答将按钮设置为显示或隐藏
+    notificationBtn.style.display =
+      Notification.permission === "granted" ? "none" : "block";
+  }
+
+  // 让我们检查一下浏览器是否支持通知
+  if (!("Notification" in window)) {
+    console.log("此浏览器不支持通知。");
+  } else {
+    Notification.requestPermission().then((permission) => {
+      handlePermission(permission);
+    });
   }
 }
 ```
 
-> **备注：** 当安装应用程序时，你不需要通过上面的代码显式的请求权限，但你仍然需要在触发通知之前取得权限项。
+首先查看第二个主要块，你会发现我们首先检查是否支持通知。如果支持的话，我们接着运行基于 Promise 的 `Notification.requestPermission()` 版本，否则在控制台输出一条消息。
 
-## 创建通知
+为了避免重复代码，我们在 `handlePermission()` 函数中存储了一些内部代码，这是该代码段中的第一个主要块。在这里，我们明确设置了 `Notification.permission` 值（某些旧版本的 Chrome 无法自动执行此操作），并根据用户在权限对话框中选择的内容显示或隐藏按钮。如果已经授予许可，我们不想显示它，但如果用户选择拒绝许可，我们希望给他们稍后改变主意的机会。
 
-创建通知很简单，只需要用 {{domxref("Notification")}} 构造方法。这个构造函数需要一个用来显示在通知内的标题以及一些用来增强通知的选项，例如 {{domxref("Notification.icon","icon")}} 或文本 {{domxref("Notification.body","body")}}。
+> **备注：** 在 Chrome 的 37 版本之前，其不允许你在 `load` 事件处理程序中调用 {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}}（请参阅 [issue 274284](https://crbug .com/274284)）。
 
-一旦通知被创建出来，它会立即被显示出来。为了跟踪通知当前的状态，在 {{domxref("Notification")}} 实例层面上会有 4 个事件被触发：
+## 创建通知
 
-- {{domxref("Notification.show_event","show")}}
-  - : 当通知被显示给用户时触发。
-- {{domxref("Notification.click_event","click")}}
-  - : 当用户点击通知时触发。
-- {{domxref("Notification.close_event","close")}}
-  - : 当通知被关闭时触发。
-- {{domxref("Notification.error_event","error")}}
-  - : 当通知发生错误的时候触发。这通常是因为通知由于某些原因而无法显示。
-
-这些事件可以通过事件处理跟踪 {{domxref("Notification.onshow","onshow")}}、{{domxref("Notification.onclick","onclick")}}、{{domxref("Notification.onclose","onclose")}} 和 {{domxref("Notification.onerror","onerror")}}。因为 {{domxref("Notification")}} 同样继承自 {{domxref("EventTarget")}}，因此可以对它调用 {{domxref("EventTarget.addEventListener","addEventListener()")}} 方法。
-
-> **备注：** Firefox 和 Safari 会在一定时间后自动关闭通知（大约 4 秒）。这也会发生在操作系统层面。
->
-> 当然你也可以通过代码做到，调用 {{domxref("Notification.close()")}} 方法，就像下面的代码一样：
->
-> ```js
-> var n = new Notification("Hi!");
-> n.onshow = function () {
->   setTimeout(n.close.bind(n), 5000);
-> };
-> ```
->
-> 当你接收到一个“close”事件时，并不能保证这个通知是被用户关闭的。这是符合规范的，其中指出：“当一个通知被关闭时，通知的关闭动作都必须执行，不论是底层通知平台导致，还是用户导致。”
-
-### 简单的示例
-
-假定有如下的 HTML:
+创建通知很简单，只需要用 {{domxref("Notification")}} 构造方法。这个构造方法需要一个用来显示在通知内的标题以及一些用来增强通知的选项，例如 {{domxref("Notification.icon","icon")}} 或文本 {{domxref("Notification.body","body")}}。
 
-```html
-<button>Notify me!</button>
+例如，在待办事项列表示例中，我们使用以下代码片段在需要时创建通知（在 `createNotification()` 函数中找到）：
+
+```js
+const img = "/to-do-notifications/img/icon-128.png";
+const text = `嘿！您的任务“${title}”现已过期。`;
+const notification = new Notification("待办列表", { body: text, icon: img });
 ```
 
-它可能通过这样的方式处理通知：
+## 关闭通知
+
+使用 {{domxref("Notification.close","close()")}} 删除不再与用户相关的通知（例如，对于消息应用程序，用户已经阅读了网页上的通知） ，或者以下歌曲已在音乐应用程序中播放以通知歌曲更改）。大多数现代浏览器会在一段时间（大约四秒）后自动关闭通知，但这不是你通常应该关心的事情，因为它取决于用户和用户代理。删除通知也可能发生在操作系统级别，用户应该对此保持控制。旧版本的 Chrome 不会自动删除通知，因此你可以在 {{domxref("setTimeout()")}} 之后执行此操作，以免从其他浏览器的通知托盘中删除通知。
 
 ```js
-window.addEventListener("load", function () {
-  // 首先，让我们检查我们是否有权限发出通知
-  // 如果没有，我们就请求获得权限
-  if (window.Notification && Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
+const n = new Notification("我的歌");
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") {
+    // 该标签页已对用户可见，因此可以清除现已过时的通知。
+    n.close();
   }
+});
+```
 
-  var button = document.getElementsByTagName("button")[0];
-
-  button.addEventListener("click", function () {
-    // 如果用户同意就创建一个通知
-    if (window.Notification && Notification.permission === "granted") {
-      var n = new Notification("Hi!");
-    }
-
-    // 如果用户没有选择是否显示通知
-    // 注：因为在 Chrome 中我们无法确定 permission 属性是否有值，因此
-    // 检查该属性的值是否是 "default" 是不安全的。
-    else if (window.Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
+> **备注：** 此 API 不应仅用于在固定延迟后（在现代浏览器上）从屏幕上删除通知，因为此方法还会从任何通知托盘中删除通知，从而阻止用户在最初显示通知后与其进行交互。
 
-        // 如果用户同意了
-        if (status === "granted") {
-          var n = new Notification("Hi!");
-        }
+> **备注：** 当你收到“关闭”事件时，无法保证是用户关闭了通知。这符合规范，其中规定：当底层通知平台或用户关闭通知时，必须运行其关闭步骤。
 
-        // 否则，我们可以让步的使用常规模态的 alert
-        else {
-          alert("Hi!");
-        }
-      });
-    }
+## 通知事件
 
-    // 如果用户拒绝接受通知
-    else {
-      // 我们可以让步的使用常规模态的 alert
-      alert("Hi!");
-    }
-  });
-});
-```
+{{domxref("Notification")}} 实例上会触发四个事件：
 
-这是实际的结果：
+- `click`
+  - : 当用户点击通知时触发。
+- `close`
+  - : 在通知关闭后触发。
+- `error`
+  - : 如果通知出现问题则触发；这通常是因为由于某种原因无法显示通知。
+- `show`
+  - : 当向用户显示通知时触发。
 
-{{ EmbedLiveSample('简单的示例', '100%', 30) }}
+可以使用 {{domxref("Notification.click_event","onclick")}}、{{domxref("Notification.close_event","onclose")}}、{{domxref("Notification.error_event","onerror")}} 和 {{domxref("Notification.show_event","onshow")}} 处理器跟踪这些事件。因为 {{domxref("Notification")}} 也继承自 {{domxref("EventTarget")}}，所以可以使用 {{domxref("EventTarget.addEventListener","addEventListener()")}} 方法。
 
-## 处理重复的通知
+## 替换现有通知
 
-某些情况下对于用户来说，显示大量通知是件令人痛苦的事情。比如，如果一个即时通信应用向用户提示每一条传入的消息。为了避免数以百计的不必要通知铺满用户的桌面，可能需要接管一个挂起消息的队列。
+用户通常不希望在短时间内收到大量通知——例如，如果消息应用程序通知用户每条传入消息，而这些消息发送量很大，该怎么办？为了避免向用户发送太多通知，可以修改待处理通知队列，用新通知替换单个或多个待处理通知。
 
-因此，需要为新建的通知添加一个标记。如果有一条通知也具有一个相同的标记，并且还没有被显示，那么这条新通知将会替换上一条通知。如果有一条通知具有一个相同的标记，并且已经显示出来了，那么上一条通知将会被关闭，新通知将会被显示出来。
+为此，可以向任何新通知添加标签。如果通知已具有相同标签且尚未显示，则新通知将替换先前的通知。如果已显示具有相同标签的通知，则关闭上一个通知并显示新的通知。
 
-### 使用标记的例子
+### 标签示例
 
-假定有如下 HTML:
+假设有以下基本 HTML：
 
 ```html
-<button>Notify me!</button>
+<button>提醒我！</button>
 ```
 
-它有可能通过这种方式处理的多个通知：
+可以通过这种方式处理多个通知：
 
 ```js
-window.addEventListener("load", function () {
-  // 首先，我们检查是否具有权限显示通知
-  // 如果没有，我们就申请权限
-  if (window.Notification && Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
+window.addEventListener("load", () => {
+  const button = document.querySelector("button");
+
+  if (window.self !== window.top) {
+    // 确保如果我们的文档位于框架中，我们会让用户首先在自己的选项卡或窗口中打开它。否则，它将无法请求发送通知的权限
+    button.textContent = "查看上面示例代码的实时运行结果";
+    button.addEventListener("click", () => window.open(location.href));
+    return;
   }
 
-  var button = document.getElementsByTagName("button")[0];
-
-  button.addEventListener("click", function () {
-    // 如果用户同意接收通知，我们就尝试发送 10 条通知
-    if (window.Notification && Notification.permission === "granted") {
-      for (var i = 0; i < 10; i++) {
-        // 感谢标记，我们应该只看到内容为 "Hi! 9" 的通知
-        var n = new Notification("Hi! " + i, { tag: "soManyNotification" });
-      }
-    }
-
-    // 如果用户没有选择是否同意显示通知
-    // 注：由于在 Chrome 中不能确定 permission 属性是否有值，因此检查
-    // 该属性值是否为 "default" 是不安全的。
-    else if (window.Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
+  button.addEventListener("click", () => {
+    if (Notification?.permission === "granted") {
+      // 如果用户同意收到通知让我们尝试发送十个通知
+      let i = 0;
+      // 使用间隔以避免某些浏览器（包括 Firefox）在特定时间内出现过多通知时会阻止通知
+      const interval = setInterval(() => {
+        // 由于 tag 参数，我们应该只能看到“Hi！9”通知
+        const n = new Notification(`Hi! ${i}`, { tag: "soManyNotification" });
+        if (i === 9) {
+          clearInterval(interval);
         }
-
+        i++;
+      }, 200);
+    } else if (Notification && Notification.permission !== "denied") {
+      // 如果用户没有告诉他们是否想要收到通知（注意：由于 Chrome，我们不确定是否设置了权限属性），因此检查“默认”值是不安全的。
+      Notification.requestPermission().then((status) => {
         // 如果用户同意
         if (status === "granted") {
-          for (var i = 0; i < 10; i++) {
-            // Thanks to the tag, we should only see the "Hi! 9" notification
-            var n = new Notification("Hi! " + i, { tag: "soManyNotification" });
-          }
-        }
-
-        // 否则改用 alert
-        else {
+          let i = 0;
+          // 使用间隔以避免某些浏览器（包括 Firefox）在特定时间内出现过多通知时会阻止通知
+          const interval = setInterval(() => {
+            // 由于 tag 参数，我们应该只能看到“Hi！9”通知
+            const n = new Notification(`Hi! ${i}`, {
+              tag: "soManyNotification",
+            });
+            if (i === 9) {
+              clearInterval(interval);
+            }
+            i++;
+          }, 200);
+        } else {
+          // 否则，我们可以回退到常规模式提醒
           alert("Hi!");
         }
       });
-    }
-
-    // 如果用户拒绝
-    else {
-      // 改用 alert
+    } else {
+      // 如果用户拒绝收到通知，我们可以退回到常规模式提醒
       alert("Hi!");
     }
   });
 });
 ```
 
-实际效果如下：
-
-{{ EmbedLiveSample('使用标记的例子', '100%', 30) }}
-
-## 接收点击应用通知的通知
-
-当用户点击一个由应用产生的通知时，视情况而定，你将会有两种方式被告知点击事件发生了：
-
-1. 如果你的程序没有被关闭或转入后台，那么在你会收到一个点击事件。
-2. 其他情况下会收到一条系统消息。
+### 结果
 
-参考 [这个代码片段](https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3) 作为例子，展示了如何处理。
+{{ EmbedLiveSample('标签示例', '100%', 30) }}
 
 ## 规范
 
@@ -265,6 +225,6 @@ window.addEventListener("load", function () {
 
 {{Compat}}
 
-## 参考
+## 参见
 
 - {{ domxref("Notification") }}
diff --git a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/mac-notification.png b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/mac-notification.png
deleted file mode 100644
index ce49cb74dc880e..00000000000000
Binary files a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/mac-notification.png and /dev/null differ
diff --git a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/@@species/index.md b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
index e1d6b3500e89e8..c3f96c3cb81b4d 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
@@ -1,35 +1,63 @@
 ---
-title: get ArrayBuffer[@@species]
+title: ArrayBuffer[@@species]
 slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
 ---
 
 {{JSRef}}
 
-该 **`ArrayBuffer[@@species]`** 访问器属性会返回 `ArrayBuffer` 构造器。
+**`ArrayBuffer[@@species]`** 静态访问器属性返回用于构造数组缓冲区方法返回值的构造函数。
+
+> **警告：** `@@species` 的存在允许任意代码执行，并可能产生安全漏洞。这也使某些优化变得更加困难。引擎实现者正在[调查是否删除此特性](https://github.com/tc39/proposal-rm-builtin-subclassing)。如果可能的话，请避免依赖它。
 
 ## 语法
 
-```plain
+```js-nolint
 ArrayBuffer[Symbol.species]
 ```
 
+### 返回值
+
+调用 `get @@species` 的构造函数（`this`）的值。该返回值被用于构造创建新的数组缓冲区的数组缓冲区方法的返回值。
+
 ## 描述
 
-这个 species 访问器属性会返回默认的 `ArrayBuffer` 构造器。子类构造器可能会覆盖它以改变构造器赋值。
+`@@species` 访问器属性返回 `ArrayBuffer` 对象的默认构造函数。子类构造函数可以重写它来更改构造函数赋值。基本的默认实现是：
+
+```js
+// 用于说明的假设基础实现
+class ArrayBuffer {
+  static get [Symbol.species]() {
+    return this;
+  }
+}
+```
+
+由于这种多态实现，派生子类的 `@species` 也将默认返回构造函数本身。
+
+```js
+class SubArrayBuffer extends ArrayBuffer {}
+SubArrayBuffer[Symbol.species] === SubArrayBuffer; // true
+```
+
+当调用不会修改现有对象，而是返回一个新的数组缓冲区实例数组缓冲区方法（例如，[`slice()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)）时，对象的 `constructor[@@species]` 将被访问。返回的构造函数将用于构造该数组缓冲区方法的返回值。
 
 ## 示例
 
-返回默认的 `ArrayBuffer` 构造器：
+### 普通对象中的 species
+
+`@@species` 属性返回默认构造函数，即 `ArrayBuffer` 构造函数。
 
 ```js
 ArrayBuffer[Symbol.species]; // function ArrayBuffer()
 ```
 
-在派生集合对象中（比如你定制的 array buffer `MyArrayBuffer`），`MyArrayBuffer` species 就是 `MyArrayBuffer` 构造器。但是，你可能想要在派生类里重写它，以期返回的是父类的 `ArrayBuffer` 对象：
+### 派生对象中的 species
+
+在一个自定义的 `ArrayBuffer` 子类实例中，例如 `MyArrayBuffer`，`MyArrayBuffer` 的 `species` 是 `MyArrayBuffer` 构造函数。但是，你可能希望重写它，以便在派生类方法中返回父类 `ArrayBuffer` 对象：
 
 ```js
 class MyArrayBuffer extends ArrayBuffer {
-  // Overwrite MyArrayBuffer species to the parent ArrayBuffer constructor
+  // 重写 MyArrayBuffer species 来返回父类 ArrayBuffer 构造函数
   static get [Symbol.species]() {
     return ArrayBuffer;
   }
@@ -44,7 +72,7 @@ class MyArrayBuffer extends ArrayBuffer {
 
 {{Compat}}
 
-## 相关
+## 参见
 
 - {{jsxref("ArrayBuffer")}}
 - {{jsxref("Symbol.species")}}
diff --git a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md
index 50e3b3d57b7284..a637e0e9fe38b6 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md
@@ -5,24 +5,20 @@ slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
 
 {{JSRef}}
 
-`byteLength` 访问器属性表示一个 {{jsxref("ArrayBuffer")}} 对象的字节长度。
+{{jsxref("ArrayBuffer")}} 实例的 `byteLength` 访问器属性返回该数组缓冲区的长度（以字节为单位）。
 
 {{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}
 
-## 语法
-
-```plain
-arraybuffer.byteLength
-```
-
 ## 描述
 
-byteLength 属性是一个访问器属性，它的 set 访问器函数是 undefined，这意味着你只能读这个属性。该值在数组创建时确定，并且不可变更。如果这个`ArrayBuffer` 被移除，则此属性返回 0。
+`byteLength` 属性是一个访问器属性，它的 set 访问器函数是 `undefined`，这意味着你只能读取这个属性。该值在数组创建时确定，并且无法修改。如果这个 `ArrayBuffer` 被分离，则此属性返回 0。
 
 ## 示例
 
+### 使用 byteLength
+
 ```js
-var buffer = new ArrayBuffer(8);
+const buffer = new ArrayBuffer(8);
 buffer.byteLength; // 8
 ```
 
@@ -34,6 +30,6 @@ buffer.byteLength; // 8
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("ArrayBuffer")}}
diff --git a/files/zh-tw/web/api/document_object_model/index.md b/files/zh-tw/web/api/document_object_model/index.md
index 43e3089482fd6f..e7ef4553bb480d 100644
--- a/files/zh-tw/web/api/document_object_model/index.md
+++ b/files/zh-tw/web/api/document_object_model/index.md
@@ -169,7 +169,6 @@ slug: Web/API/Document_Object_Model
 
 ### 棄用的 HTML 介面
 
-- {{domxref("HTMLBaseFontElement")}}
 - {{domxref("HTMLIsIndexElement")}}
 
 ## SVG 介面