From 5f48bc3d10f9f61aba09e5708f67ef4d9bf72dce Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Sat, 10 Aug 2024 14:04:37 -0700
Subject: [PATCH] ru: Convert noteblocks to GFM alerts (part 4) (#23008)

* ru: Convert noteblocks to GFM alerts (part 4)

* remove odd noteblocks

* improve noteblocks

---------

Co-authored-by: Leonid Vinogradov <win.leon@protonmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/ru/web/css/_colon_visited/index.md      |  3 +-
 files/ru/web/css/_doublecolon_after/index.md  |  6 ++-
 files/ru/web/css/_doublecolon_before/index.md |  6 ++-
 .../css/_doublecolon_first-letter/index.md    |  3 +-
 .../web/css/_doublecolon_first-line/index.md  |  3 +-
 files/ru/web/css/_doublecolon_marker/index.md |  3 +-
 .../web/css/_doublecolon_placeholder/index.md |  3 +-
 .../web/css/_doublecolon_selection/index.md   |  3 +-
 files/ru/web/css/animation-duration/index.md  |  3 +-
 files/ru/web/css/appearance/index.md          |  3 +-
 files/ru/web/css/background-image/index.md    |  3 +-
 files/ru/web/css/background-origin/index.md   |  3 +-
 files/ru/web/css/background-size/index.md     |  9 ++--
 files/ru/web/css/border-image-outset/index.md |  3 +-
 files/ru/web/css/border-image-source/index.md |  3 +-
 files/ru/web/css/border-radius/index.md       |  3 +-
 files/ru/web/css/border-width/index.md        |  3 +-
 files/ru/web/css/border/index.md              |  3 +-
 files/ru/web/css/box-sizing/index.md          |  3 +-
 files/ru/web/css/calc/index.md                |  5 --
 files/ru/web/css/clear/index.md               | 11 -----
 files/ru/web/css/clip-path/index.md           |  3 +-
 files/ru/web/css/color_value/index.md         | 18 +------
 files/ru/web/css/column-rule/index.md         |  3 +-
 .../using_css_animations/index.md             |  6 ++-
 .../box_alignment_in_flexbox/index.md         |  2 -
 files/ru/web/css/css_box_alignment/index.md   |  3 +-
 .../css/css_colors/applying_color/index.md    | 15 ++++--
 .../index.md                                  |  6 ++-
 .../basic_concepts_of_flexbox/index.md        |  3 +-
 .../mastering_wrapping_of_flex_items/index.md |  3 +-
 .../basic_concepts_of_grid_layout/index.md    |  9 ++--
 .../using_media_queries/index.md              |  3 +-
 .../stacking_context/index.md                 | 21 +-------
 .../using_z-index/index.md                    |  2 +-
 .../css_scroll_snap/basic_concepts/index.md   |  3 +-
 .../using_css_transitions/index.md            | 15 ++++--
 files/ru/web/css/display-listitem/index.md    |  3 +-
 files/ru/web/css/display-outside/index.md     |  3 +-
 files/ru/web/css/filter/index.md              |  3 +-
 files/ru/web/css/flex-basis/index.md          |  8 +--
 files/ru/web/css/float/index.md               |  3 +-
 files/ru/web/css/font-size/index.md           |  6 ++-
 files/ru/web/css/grid-area/index.md           |  3 +-
 files/ru/web/css/grid-column/index.md         |  3 +-
 files/ru/web/css/grid-row-start/index.md      |  3 +-
 .../ru/web/css/grid-template-columns/index.md |  6 ++-
 files/ru/web/css/grid-template-rows/index.md  |  6 ++-
 files/ru/web/css/grid-template/index.md       |  3 +-
 files/ru/web/css/grid/index.md                |  3 +-
 files/ru/web/css/hyphens/index.md             |  9 ++--
 files/ru/web/css/initial/index.md             |  3 +-
 files/ru/web/css/integer/index.md             |  3 +-
 .../breadcrumb_navigation/index.md            | 19 +++++--
 .../layout_cookbook/sticky_footers/index.md   |  5 +-
 files/ru/web/css/layout_mode/index.md         |  3 +-
 files/ru/web/css/length/index.md              | 12 +++--
 files/ru/web/css/list-style-image/index.md    |  3 +-
 files/ru/web/css/object-position/index.md     |  3 +-
 files/ru/web/css/orphans/index.md             |  3 +-
 files/ru/web/css/outline/index.md             |  3 +-
 files/ru/web/css/overflow-block/index.md      |  3 +-
 files/ru/web/css/overflow-wrap/index.md       |  3 +-
 files/ru/web/css/padding-left/index.md        |  3 +-
 files/ru/web/css/paint-order/index.md         |  3 +-
 files/ru/web/css/percentage/index.md          |  3 +-
 files/ru/web/css/pseudo-classes/index.md      |  3 +-
 files/ru/web/css/pseudo-elements/index.md     |  6 ++-
 files/ru/web/css/revert/index.md              |  3 +-
 files/ru/web/css/specificity/index.md         |  3 +-
 files/ru/web/css/syntax/index.md              |  6 ++-
 files/ru/web/css/time/index.md                |  6 ++-
 .../css/transform-function/rotate3d/index.md  |  3 +-
 files/ru/web/css/transform/index.md           |  3 +-
 files/ru/web/css/user-select/index.md         |  3 +-
 .../css/using_css_custom_properties/index.md  |  9 ++--
 files/ru/web/css/var/index.md                 |  3 +-
 .../web/css/visual_formatting_model/index.md  | 49 -------------------
 files/ru/web/css/white-space/index.md         |  3 +-
 files/ru/web/css/word-break/index.md          |  3 +-
 files/ru/web/html/attributes/pattern/index.md |  3 +-
 .../web/html/constraint_validation/index.md   |  6 ++-
 files/ru/web/html/content_categories/index.md |  8 +--
 files/ru/web/html/element/a/index.md          | 20 +++++---
 files/ru/web/html/element/address/index.md    |  6 ---
 files/ru/web/html/element/area/index.md       |  1 -
 files/ru/web/html/element/audio/index.md      |  5 +-
 files/ru/web/html/element/bdi/index.md        |  3 +-
 files/ru/web/html/element/br/index.md         |  3 +-
 files/ru/web/html/element/caption/index.md    |  1 -
 files/ru/web/html/element/cite/index.md       |  2 +-
 files/ru/web/html/element/col/index.md        |  6 ++-
 files/ru/web/html/element/dfn/index.md        |  3 +-
 files/ru/web/html/element/div/index.md        |  3 +-
 files/ru/web/html/element/embed/index.md      |  3 +-
 files/ru/web/html/element/fieldset/index.md   |  3 +-
 files/ru/web/html/element/font/index.md       |  3 +-
 files/ru/web/html/element/form/index.md       |  3 +-
 .../html/element/heading_elements/index.md    |  3 +-
 files/ru/web/html/element/img/index.md        | 18 ++++---
 100 files changed, 286 insertions(+), 254 deletions(-)

diff --git a/files/ru/web/css/_colon_visited/index.md b/files/ru/web/css/_colon_visited/index.md
index 1d4c34a350a4af..a2b73149efddb8 100644
--- a/files/ru/web/css/_colon_visited/index.md
+++ b/files/ru/web/css/_colon_visited/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/:visited
 
 CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:visited` позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило `:visited` после правила `:link` до правил `:hover` и `:active`, как определено _LVHA-порядком_: `:link` — `:visited` — `:hover` — `:active`.
 
-> **Примечание:** Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, `fill` и `stroke`. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан `0`, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод `getComputedStyle` наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите [Приватность и селектор :visited](/ru/docs/CSS/Privacy_and_the_:visited_selector).
+> [!NOTE]
+> Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, `fill` и `stroke`. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан `0`, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод `getComputedStyle` наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите [Приватность и селектор :visited](/ru/docs/CSS/Privacy_and_the_:visited_selector).
 
 ## Примеры
 
diff --git a/files/ru/web/css/_doublecolon_after/index.md b/files/ru/web/css/_doublecolon_after/index.md
index 36ea3d85b8b489..033bfe2e4c1d50 100644
--- a/files/ru/web/css/_doublecolon_after/index.md
+++ b/files/ru/web/css/_doublecolon_after/index.md
@@ -14,13 +14,15 @@ a::after {
 }
 ```
 
-> **Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` [содержатся в блоке форматирования элемента](https://www.w3.org/TR/CSS2/generate.html#before-after-content), и поэтому не применяются к _[замещаемым элементам](/ru/docs/Web/CSS/Replaced_element)_, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.
+> [!NOTE]
+> Псведоэлементы, созданные с помощью `::before` и `::after` [содержатся в блоке форматирования элемента](https://www.w3.org/TR/CSS2/generate.html#before-after-content), и поэтому не применяются к _[замещаемым элементам](/ru/docs/Web/CSS/Replaced_element)_, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.
 
 ## Синтаксис
 
 {{csssyntax}}
 
-> **Примечание:** В CSS3 появилась запись `::after` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Псевдо-классы) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:after`, введённую в CSS2.
+> [!NOTE]
+> В CSS3 появилась запись `::after` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Псевдо-классы) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:after`, введённую в CSS2.
 
 ## Примеры
 
diff --git a/files/ru/web/css/_doublecolon_before/index.md b/files/ru/web/css/_doublecolon_before/index.md
index eff639699e27fd..43d14804f071e7 100644
--- a/files/ru/web/css/_doublecolon_before/index.md
+++ b/files/ru/web/css/_doublecolon_before/index.md
@@ -14,13 +14,15 @@ a::before {
 }
 ```
 
-> **Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` [содержатся в блоке форматирования элемента](https://www.w3.org/TR/CSS2/generate.html#before-after-content), и поэтому не применяются к _[замещаемым элементам](/ru/docs/Web/CSS/Replaced_element)_, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.
+> [!NOTE]
+> Псведоэлементы, созданные с помощью `::before` и `::after` [содержатся в блоке форматирования элемента](https://www.w3.org/TR/CSS2/generate.html#before-after-content), и поэтому не применяются к _[замещаемым элементам](/ru/docs/Web/CSS/Replaced_element)_, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.
 
 ## Синтаксис
 
 {{csssyntax}}
 
-> **Примечание:** В CSS3 появилась запись `::before` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:before`, введённую в CSS2.
+> [!NOTE]
+> В CSS3 появилась запись `::before` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:before`, введённую в CSS2.
 
 ## Примеры
 
diff --git a/files/ru/web/css/_doublecolon_first-letter/index.md b/files/ru/web/css/_doublecolon_first-letter/index.md
index addc7466c18afd..5f0708ff7b1bb2 100644
--- a/files/ru/web/css/_doublecolon_first-letter/index.md
+++ b/files/ru/web/css/_doublecolon_first-letter/index.md
@@ -20,7 +20,8 @@ p::first-letter {
 - В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например `IJ` в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу `::first-letter` (это слабо поддерживается браузерами, смотрите [таблицу совместимости](/En/CSS/::first-letter#Browser_compatibility) ниже).
 - Комбинация псевдоэлемента {{ cssxref("::before") }} и свойства {{ cssxref("content") }} может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу `::first-letter` будет соответствовать первая буква добавленного содержимого.
 
-> **Примечание:** В CSS3 появилась запись `::first-letter` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:first-letter`, введённую в CSS2.
+> [!NOTE]
+> В CSS3 появилась запись `::first-letter` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:first-letter`, введённую в CSS2.
 
 ## Разрешённые свойства
 
diff --git a/files/ru/web/css/_doublecolon_first-line/index.md b/files/ru/web/css/_doublecolon_first-line/index.md
index 1a71f7f3427ffa..0c2a75b80ce2f3 100644
--- a/files/ru/web/css/_doublecolon_first-line/index.md
+++ b/files/ru/web/css/_doublecolon_first-line/index.md
@@ -14,7 +14,8 @@ p::first-line {
 }
 ```
 
-> **Примечание:** В CSS3 появилась запись `::first-line` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:first-line`, введённую в CSS2.
+> [!NOTE]
+> В CSS3 появилась запись `::first-line` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:first-line`, введённую в CSS2.
 
 ## Разрешённые свойства
 
diff --git a/files/ru/web/css/_doublecolon_marker/index.md b/files/ru/web/css/_doublecolon_marker/index.md
index 3d517906f12742..48296a534e96f0 100644
--- a/files/ru/web/css/_doublecolon_marker/index.md
+++ b/files/ru/web/css/_doublecolon_marker/index.md
@@ -25,7 +25,8 @@ slug: Web/CSS/::marker
 - Свойство {{CSSxRef("content")}}
 - Все [animation](/ru/docs/Web/CSS/CSS_Animations#CSS_Properties) и [transition](/ru/docs/Web/CSS/CSS_Transitions#Properties) свойства
 
-> **Примечание:** The specification states that additional CSS properties may be supported in future.
+> [!NOTE]
+> The specification states that additional CSS properties may be supported in future.
 
 ## Syntax
 
diff --git a/files/ru/web/css/_doublecolon_placeholder/index.md b/files/ru/web/css/_doublecolon_placeholder/index.md
index e217f236c67818..75983631550185 100644
--- a/files/ru/web/css/_doublecolon_placeholder/index.md
+++ b/files/ru/web/css/_doublecolon_placeholder/index.md
@@ -16,7 +16,8 @@ slug: Web/CSS/::placeholder
 
 В `::placeholder` можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.
 
-> **Примечание:** В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.
+> [!NOTE]
+> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/_doublecolon_selection/index.md b/files/ru/web/css/_doublecolon_selection/index.md
index 8e436322548265..bcfef2bed6ffa3 100644
--- a/files/ru/web/css/_doublecolon_selection/index.md
+++ b/files/ru/web/css/_doublecolon_selection/index.md
@@ -26,7 +26,8 @@ slug: Web/CSS/::selection
 - {{cssxref("text-emphasis-color")}}
 - {{cssxref("text-shadow")}}
 
-> **Предупреждение:** Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.
+> [!WARNING]
+> Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/animation-duration/index.md b/files/ru/web/css/animation-duration/index.md
index 390c867d2d2523..0041f14d2b5ebd 100644
--- a/files/ru/web/css/animation-duration/index.md
+++ b/files/ru/web/css/animation-duration/index.md
@@ -29,7 +29,8 @@ animation-duration: 10s, 30s, 230ms;
 - `<time>`
   - : Длительность анимации определяется в секундах `s` или в миллисекундах `ms`. По умолчанию стоит значение `0s`. Отрицательные значения являются недействительными.
 
-> **Примечание:** Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными `0s`.
+> [!NOTE]
+> Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными `0s`.
 
 ### Формальный синтаксис
 
diff --git a/files/ru/web/css/appearance/index.md b/files/ru/web/css/appearance/index.md
index 46032769ba1458..6c3a237635ef4f 100644
--- a/files/ru/web/css/appearance/index.md
+++ b/files/ru/web/css/appearance/index.md
@@ -13,7 +13,8 @@ CSS-свойство **`-moz-appearance`** используется в Gecko (Fi
 
 Это свойство часто используется в таблицах стилей [XUL](/ru/docs/Mozilla/Tech/XUL/Tutorial) для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации [XBL](/ru/docs/XBL) виджетов, которые поставляются с платформой Mozilla.
 
-> **Примечание:** Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово `none` не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.
+> [!NOTE]
+> Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово `none` не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/background-image/index.md b/files/ru/web/css/background-image/index.md
index 4b1464efd19479..edcba6e1aad863 100644
--- a/files/ru/web/css/background-image/index.md
+++ b/files/ru/web/css/background-image/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/background-image
 
 Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением `none`.
 
-> **Примечание:** Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
+> [!NOTE]
+> Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
 
 {{cssinfo}}
 
diff --git a/files/ru/web/css/background-origin/index.md b/files/ru/web/css/background-origin/index.md
index 52e43b30c5ea82..cdf50f2a4716fd 100644
--- a/files/ru/web/css/background-origin/index.md
+++ b/files/ru/web/css/background-origin/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/background-origin
 
 Обратите внимание, что `background-origin` игнорируется, когда {{cssxref("background-attachment")}} является `fixed`.
 
-> **Примечание:** Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.
+> [!NOTE]
+> Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/background-size/index.md b/files/ru/web/css/background-size/index.md
index bb3b3642ced389..6f64481c8d41a5 100644
--- a/files/ru/web/css/background-size/index.md
+++ b/files/ru/web/css/background-size/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/background-size
 
 Значение **`background-size`** в [CSS](/ru/docs/CSS) позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.
 
-> **Примечание:** Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS-свойства `background-size`, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.
+> [!NOTE]
+> Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS-свойства `background-size`, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.
 
 {{cssinfo}}
 
@@ -61,11 +62,13 @@ background-size: unset;
 
 Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.
 
-> **Предупреждение:** Это поведение изменилось в Gecko 8.0. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
+> [!WARNING]
+> Это поведение изменилось в Gecko 8.0. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
 
 Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.
 
-> **Предупреждение:** Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
+> [!WARNING]
+> Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
 
 Визуализированный размер фонового изображения затем вычисляется следующим способом:
 
diff --git a/files/ru/web/css/border-image-outset/index.md b/files/ru/web/css/border-image-outset/index.md
index 3f47d8b639877f..c1270d51fcab0b 100644
--- a/files/ru/web/css/border-image-outset/index.md
+++ b/files/ru/web/css/border-image-outset/index.md
@@ -33,7 +33,8 @@ border-image-repeat: inherit;
 
 ### Значения
 
-> **Примечание:** When a value is specified as a unitless {{cssxref("&lt;number&gt;")}}, that value is multiplied by the corresponding computed {{cssxref("border-width")}} to determine the `border-image-outset`. Negative values are invalid.
+> [!NOTE]
+> When a value is specified as a unitless {{cssxref("&lt;number&gt;")}}, that value is multiplied by the corresponding computed {{cssxref("border-width")}} to determine the `border-image-outset`. Negative values are invalid.
 
 - _sides_
   - : Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box in all four directions.
diff --git a/files/ru/web/css/border-image-source/index.md b/files/ru/web/css/border-image-source/index.md
index e81b38271d3b28..073a40c2020e94 100644
--- a/files/ru/web/css/border-image-source/index.md
+++ b/files/ru/web/css/border-image-source/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/border-image-source
 
 The **`border-image-source`** CSS property defines the {{cssxref("&lt;image&gt;")}} to use instead of the style of the border. If this property is set to `none`, the style defined by {{cssxref("border-style")}} is used instead.
 
-> **Примечание:** Though any {{cssxref("&lt;image&gt;")}} can be used with this CSS property, browser support is still limited and some browsers support only images defined using the `url()` functional notation.
+> [!NOTE]
+> Though any {{cssxref("&lt;image&gt;")}} can be used with this CSS property, browser support is still limited and some browsers support only images defined using the `url()` functional notation.
 
 {{cssinfo}}
 
diff --git a/files/ru/web/css/border-radius/index.md b/files/ru/web/css/border-radius/index.md
index 5ad17df2a25e3e..b298589ad725fa 100644
--- a/files/ru/web/css/border-radius/index.md
+++ b/files/ru/web/css/border-radius/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/border-radius
 
 Свойство `border-radius` не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение `collapse`.
 
-> **Примечание:** Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в `border-radius:0 0 inherit inherit`, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
+> [!NOTE]
+> Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в `border-radius:0 0 inherit inherit`, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/border-width/index.md b/files/ru/web/css/border-width/index.md
index c8a1fae973fd03..a0fa02e69b341c 100644
--- a/files/ru/web/css/border-width/index.md
+++ b/files/ru/web/css/border-width/index.md
@@ -34,7 +34,8 @@ border-width: inherit /* Родительское значение */
     - `medium`
     - `thick`
 
-    > **Примечание:** The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the `thin ≤ medium ≤ thick` inequality and that the values are constant on a single document.
+    > [!NOTE]
+    > The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the `thin ≤ medium ≤ thick` inequality and that the values are constant on a single document.
 
 - `inherit`
   - : Is a keyword indicating that all four values are inherited from their parent's element calculated value.
diff --git a/files/ru/web/css/border/index.md b/files/ru/web/css/border/index.md
index 0187c4c31e6e23..43cdd9052b360b 100644
--- a/files/ru/web/css/border/index.md
+++ b/files/ru/web/css/border/index.md
@@ -17,7 +17,8 @@ border: 2px dotted;
 border: medium dashed green;
 ```
 
-> **Примечание:** Рекомендуется использовать `border`, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырёх значений, позволяя установить различные значения для каждого ребра, `border` принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.
+> [!NOTE]
+> Рекомендуется использовать `border`, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырёх значений, позволяя установить различные значения для каждого ребра, `border` принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/box-sizing/index.md b/files/ru/web/css/box-sizing/index.md
index b31b0574120b0a..bfa897562778d9 100644
--- a/files/ru/web/css/box-sizing/index.md
+++ b/files/ru/web/css/box-sizing/index.md
@@ -33,7 +33,8 @@ slug: Web/CSS/box-sizing
 
 {{csssyntax}}
 
-> **Примечание:** Значение `padding-box` устарело
+> [!NOTE]
+> Значение `padding-box` устарело
 
 ## Пример
 
diff --git a/files/ru/web/css/calc/index.md b/files/ru/web/css/calc/index.md
index 7a2bd9d54a68df..09e4efa6f9ed35 100644
--- a/files/ru/web/css/calc/index.md
+++ b/files/ru/web/css/calc/index.md
@@ -24,11 +24,6 @@ slug: Web/CSS/calc
 
 Операнды в expression могут быть различными выражениями {{cssxref("&lt;length&gt;")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.
 
-> **Примечание:** Деление на ноль выдаст ошибку при парсинге HTML.
-
-> **Примечание:** Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение `calc(50% -8px)` будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как `calc(50% - 8px)` - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
-> Операторы \* и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
-
 ### Формальный синтаксис
 
 ```
diff --git a/files/ru/web/css/clear/index.md b/files/ru/web/css/clear/index.md
index db57007a2c7d04..ce7b78d3d42594 100644
--- a/files/ru/web/css/clear/index.md
+++ b/files/ru/web/css/clear/index.md
@@ -15,17 +15,6 @@ slug: Web/CSS/clear
 
 Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же [контексте форматирования блоков](/ru/docs/CSS/block_formatting_context).
 
-> **Примечание:** Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется **clearfix,** и один из способов сделать это - это заменит `clear` заменённый {{cssxref("::after")}} [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) на нем.```css
-> #container::after {
-> content: "";
-> display: block;
-> clear: both;
-> }
->
-> ```
->
-> ```
-
 ## Синтаксис
 
 ```css
diff --git a/files/ru/web/css/clip-path/index.md b/files/ru/web/css/clip-path/index.md
index 65fcd6f4dd258c..9ff4bc045f4286 100644
--- a/files/ru/web/css/clip-path/index.md
+++ b/files/ru/web/css/clip-path/index.md
@@ -88,7 +88,8 @@ clip-path: unset;
 - `none`
   - : Область не создается.
 
-> **Примечание:** Значение, отличное от `none`, приводит к созданию нового [контекста наложения](/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) так же, как при использовании значений CSS-свойства {{cssxref("opacity")}}, отличных от `1`.
+> [!NOTE]
+> Значение, отличное от `none`, приводит к созданию нового [контекста наложения](/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) так же, как при использовании значений CSS-свойства {{cssxref("opacity")}}, отличных от `1`.
 
 ## Формальное определение
 
diff --git a/files/ru/web/css/color_value/index.md b/files/ru/web/css/color_value/index.md
index 90a3a6d144e08c..3b0c47332cd64f 100644
--- a/files/ru/web/css/color_value/index.md
+++ b/files/ru/web/css/color_value/index.md
@@ -19,7 +19,8 @@ slug: Web/CSS/color_value
 
 Для типа данных задаётся `<color>` с помощью одного из следующих параметров.
 
-> **Примечание:** значения `<color>` точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили [устройств вывода](https://en.wikipedia.org/wiki/ICC_profile).
+> [!NOTE]
+> Значения `<color>` точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили [устройств вывода](https://en.wikipedia.org/wiki/ICC_profile).
 
 ### Ключевые цвета
 
@@ -44,13 +45,6 @@ slug: Web/CSS/color_value
 
 - Хотя многие ключевые слова были адаптированы из [X11](https://en.wikipedia.org/wiki/X_Window_System), их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.
 
-> **Примечание:** Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:
->
-> - CSS Level 1 включал только 16 основных цветов, называемых цветами [VGA](https://en.wikipedia.org/wiki/VGA), поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
-> - CSS Level 2 добавил ключевое слово `orange`.
-> - Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми _ключевыми_ словами, _цветами X11_ или цветами SVG.
-> - CSS Colors Level 4 добавил ключевое слово rebeccapurple, [чтобы почтить пионера веб-Эрика Мейера.](https://codepen.io/trezy/post/honoring-a-great-man)
-
 <table>
   <thead>
     <tr>
@@ -969,10 +963,6 @@ slug: Web/CSS/color_value
 
 Ключевое слово `transparent` представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически `transparent`- это ярлык для `rgba (0,0,0,0)`.
 
-> **Примечание:** чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что `transparent` должен быть вычислен в [Альфа-предварительно умноженном цветовом пространстве](https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax). Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением `0`.
-
-> **Примечание:** `transparent` не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения `<color>` для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, `transparent` был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение `<color>`.
-
 ### [`currentColor`]() ключевое слово
 
 Ключевое слово `currentColor` представляет значение свойства элемента {{Cssxref("color")}}. Это позволяет использовать значение `color` для свойств, которые не получают его по умолчанию.
@@ -999,8 +989,6 @@ slug: Web/CSS/color_value
 
 Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (`rgb ()`, `rgba ()`) нотациями.
 
-> **Примечание:** начиная с уровня цветов CSS 4, `rgba()` является псевдонимом для `rgb()`. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.
-
 - Шестнадцатеричное представление: `#RRGGBB[AA]`
   - : `R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0-9, A-F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. `R` (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, `#ff0000` эквивалентно `#ff0000ff`.
 - Шестнадцатеричное представление: `#RGB[A]`
@@ -1087,8 +1075,6 @@ rgba(1e2, .5e1, .5e0, +.25e2%)
 
 Цвета HSL выражаются через функциональные обозначения `hsl()` и `hsla()`.
 
-> **Примечание:** Начиная с уровня цветов CSS 4, `hsla()` является псевдонимом для `hsl()`. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.
-
 - Функциональная нотация: `hsl(H, S, L[, A])` или `hsla(H, S, L, A)`
   - : `H` (hue) - это {{cssxref("&lt;угол&gt;")}} цветового круга, заданного в `deg`S, `rad`s, градусах или поворотах [CSS Color Module Level 4](https://drafts.csswg.org/css-color/#The-HSL-notation). При записи в виде unitless {{cssxref ("&lt;number&gt;")}} он интерпретируется как Градусы, как указано в [CSS Color Module Level 3](https://drafts.csswg.org/css-color-3/#hsl-color). По определению, red=deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.`S` (`насыщенность`) и `L` (`лёгкость`) являются процентами. `100%` насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). `100%` лёгкость белый, `0%` лёгкость чёрный, и `50%` лёгкость "нормально". `A` (alpha) can be a {{cssxref("&lt;number&gt;")}} between `0` and `1`, or a {{cssxref("&lt;percentage&gt;")}}, where the number `1` corresponds to `100%` (full opacity). `A` (Альфа) может быть {{cssxref("&lt;number&gt;")}} между `0` и `1` или {{cssxref("&lt;percentage&gt;")}}, где число `1` соответствует `100%` (полная непрозрачность).
 - Функциональная нотация: `hsl(H S L[ A])` or `hsla(H S L A)`
diff --git a/files/ru/web/css/column-rule/index.md b/files/ru/web/css/column-rule/index.md
index 988ec300d27068..a303f3cef0781f 100644
--- a/files/ru/web/css/column-rule/index.md
+++ b/files/ru/web/css/column-rule/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/column-rule
 
 Эта краткая форма записи задаёт индивидуальные `column-rule-*` свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.
 
-> **Примечание:** Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).
+> [!NOTE]
+> Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/css_animations/using_css_animations/index.md b/files/ru/web/css/css_animations/using_css_animations/index.md
index 788166b12bc3d3..736248937c13d2 100644
--- a/files/ru/web/css/css_animations/using_css_animations/index.md
+++ b/files/ru/web/css/css_animations/using_css_animations/index.md
@@ -46,7 +46,8 @@ CSS-анимации позволяют анимировать переходы
 
 ## Примеры
 
-> **Примечание:** Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.
+> [!NOTE]
+> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.
 
 ### Скольжение текста
 
@@ -238,7 +239,8 @@ p {
 }
 ```
 
-> **Примечание:** подробнее об этом на странице раздела {{cssxref("animation")}}
+> [!NOTE]
+> Подробнее об этом на странице раздела {{cssxref("animation")}}
 
 ### Установка нескольких значений свойствам анимации
 
diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
index 92326b70e4bad6..4303d42081136d 100644
--- a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
+++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -60,8 +60,6 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox
 
 На поперечной оси атрибут `row-gap` создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут `flex-wrap` в значение `wrap`, чтобы применить эффект.
 
-> **Примечание:** Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.
-
 ## Ссылки
 
 ### CSS Атрибуты
diff --git a/files/ru/web/css/css_box_alignment/index.md b/files/ru/web/css/css_box_alignment/index.md
index 5263a8c50907e7..5f96bfb455dc4f 100644
--- a/files/ru/web/css/css_box_alignment/index.md
+++ b/files/ru/web/css/css_box_alignment/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/CSS_box_alignment
 
 Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.
 
-> **Примечание:** Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.
+> [!NOTE]
+> Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.
 
 ## Старые методы выравнивания
 
diff --git a/files/ru/web/css/css_colors/applying_color/index.md b/files/ru/web/css/css_colors/applying_color/index.md
index b1e6e6fbc17d7a..4c6075c0be6a7d 100644
--- a/files/ru/web/css/css_colors/applying_color/index.md
+++ b/files/ru/web/css/css_colors/applying_color/index.md
@@ -206,7 +206,8 @@ th {
 
 {{EmbedLiveSample("hsl-swatches", 300, 260)}}
 
-> **Примечание:** Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (`deg`).
+> [!NOTE]
+> Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (`deg`).
 
 ## Использование цвета
 
@@ -322,7 +323,8 @@ Let's look at a simple example, in which the user can choose a color. As the use
 
 {{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}
 
-> **Примечание:** On macOS, you indicate that you've finalized selection of the color by closing the color picker window.
+> [!NOTE]
+> On macOS, you indicate that you've finalized selection of the color by closing the color picker window.
 
 #### HTML
 
@@ -404,7 +406,8 @@ The first step is to choose your **base color**. This is the color that in some
 
 When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site [ColorZilla](http://www.colorzilla.com/) offers an extension ([Chrome](http://www.colorzilla.com/chrome) / [Firefox](http://www.colorzilla.com/firefox)) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.
 
-> **Примечание:** The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.
+> [!NOTE]
+> The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.
 
 #### Fleshing out the palette
 
@@ -418,7 +421,8 @@ A few examples (all free to use as of the time this list was last revised):
 
 When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.
 
-> **Примечание:** Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.
+> [!NOTE]
+> Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.
 
 ### Color theory resources
 
@@ -433,7 +437,8 @@ There are several ways color can be an {{Glossary("accessibility")}} problem. Im
 
 You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.
 
-> **Примечание:** The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.
+> [!NOTE]
+> The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.
 
 For more information about color blindness, see the following articles:
 
diff --git a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index f59bc8693636d4..be7cf81499aa20 100644
--- a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -26,7 +26,8 @@ slug: Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container
 
 Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.
 
-> **Примечание:** Свойства выравнивания во Flexbox помещены в отдельную спецификацию — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.
+> [!NOTE]
+> Свойства выравнивания во Flexbox помещены в отдельную спецификацию — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.
 
 ## Перекрёстная ось
 
@@ -100,7 +101,8 @@ slug: Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container
 
 {{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}
 
-> **Примечание:** значение `space-evenly` не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.
+> [!NOTE]
+> Значение `space-evenly` не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.
 
 В [документации по `justify-content` на MDN](/ru/docs/Web/CSS/justify-content) приведено больше деталей о всех значениях и поддержке браузерами.
 
diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
index 120c7436199d10..27f098f6d997df 100644
--- a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
+++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
@@ -142,7 +142,8 @@ Where the `flex-grow` property deals with adding space in the main axis, the `fl
 
 The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We'll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.
 
-> **Примечание:** Note that these values for `flex-grow` and `flex-shrink` are proportions. Typically if we had all of our items set to flex: `1 1 200px` and then wanted one item to grow at twice the rate, we would set that item to flex: `2 1 200px`. However you could use flex: `10 1 200px` and flex: `20 1 200px` if you wanted.
+> [!NOTE]
+> Note that these values for `flex-grow` and `flex-shrink` are proportions. Typically if we had all of our items set to flex: `1 1 200px` and then wanted one item to grow at twice the rate, we would set that item to flex: `2 1 200px`. However you could use flex: `10 1 200px` and flex: `20 1 200px` if you wanted.
 
 ### Краткая запись значений флекс свойств
 
diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
index 50ef5215a69b9c..0231ace44a4526 100644
--- a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
+++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
@@ -69,7 +69,8 @@ Flexbox был разработан как однонаправленный ма
 
 В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр `visibility: collapse`. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если вы удалите `visibility: collapse` из CSS или измените значение на `visible`, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.
 
-> **Примечание:** Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.
+> [!NOTE]
+> Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.
 
 {{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}
 
diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index 58cea765c32844..e7687cb64759f3 100644
--- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -504,7 +504,8 @@ Repeat-нотация принимает список треков и испол
 
 {{ EmbedLiveSample('Размещение_элементов_по_линиям', '230', '450') }}
 
-> **Примечание:** Не забывайте, что вы можете использовать [Grid Inspector](/ru/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.
+> [!NOTE]
+> Не забывайте, что вы можете использовать [Grid Inspector](/ru/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.
 
 ### Сокращения при использовании размещения по линиям
 
@@ -553,7 +554,8 @@ _Промежутки (gutters)_, или _дорожки (alleys)_, между 
 }
 ```
 
-> **Примечание:** Когда грид был добавлен в браузеры, у свойств {{cssxref("column-gap")}}, {{cssxref("row-gap")}} и {{cssxref("gap")}} был префикс «grid-»: «grid-column-gap», «grid-row-gap» «grid-gap» соответственно.Сейчас все браузеры поддерживают значения без префикса, однако версии с префиксом будут поддерживаться как псевдонимы, что делает их использование безопасным.
+> [!NOTE]
+> Когда грид был добавлен в браузеры, у свойств {{cssxref("column-gap")}}, {{cssxref("row-gap")}} и {{cssxref("gap")}} был префикс «grid-»: «grid-column-gap», «grid-row-gap» «grid-gap» соответственно.Сейчас все браузеры поддерживают значения без префикса, однако версии с префиксом будут поддерживаться как псевдонимы, что делает их использование безопасным.
 
 ```html
 <div class="wrapper">
@@ -665,7 +667,8 @@ _Промежутки (gutters)_, или _дорожки (alleys)_, между 
 
 В рабочих черновиках спецификации гридов второго уровня есть функциональность, называемая _подгридом_, которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.
 
-> **Примечание:** Эта функция поддерживается в браузере Firefox 71, который в настоящее время является единственным браузером, обеспечивающим выполнение подгрида.
+> [!NOTE]
+> Эта функция поддерживается в браузере Firefox 71, который в настоящее время является единственным браузером, обеспечивающим выполнение подгрида.
 
 Согласно этой спецификации, мы можем отредактировать приведенный выше пример вложенного грида, изменив `grid-template-columns: repeat(3, 1fr)` на `grid-template-columns: subgrid`. Вложенный грид будет использовать родительскую структуру треков для размещения элементов.
 
diff --git a/files/ru/web/css/css_media_queries/using_media_queries/index.md b/files/ru/web/css/css_media_queries/using_media_queries/index.md
index 054b2bef771792..9812122061987d 100644
--- a/files/ru/web/css/css_media_queries/using_media_queries/index.md
+++ b/files/ru/web/css/css_media_queries/using_media_queries/index.md
@@ -57,7 +57,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
 
 В прошлом примере мы видели, как применяется оператор `and` для группировки _type_ и функции. Оператор `and` также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор _only_ работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.
 
-> **Примечание:** In most cases, the `all` media type is used by default when no other type is specified. However, if you use the `not` or `only` operators, you must explicitly specify a media type.
+> [!NOTE]
+> In most cases, the `all` media type is used by default when no other type is specified. However, if you use the `not` or `only` operators, you must explicitly specify a media type.
 
 ### `and`
 
diff --git a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
index eb6375a44d8df9..7a0ed0cddd551f 100644
--- a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
+++ b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
@@ -35,7 +35,8 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
 - Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения.
 - Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.
 
-> **Примечание:** Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.
+> [!NOTE]
+> Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.
 
 ## Пример
 
@@ -55,24 +56,6 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
 
 Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.
 
-> **Примечание:**
->
-> - DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контакта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому, DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).
-> - По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).
-> - У DIV #3 есть свойство z-index 4, но это значение независимо от z-index'ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.
-> - An easy way to figure out the _rendering order_ of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):
->
->   - Root
->
->     - DIV #2 - z-index is 2
->     - DIV #3 - z-index is 4
->
->       - DIV #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1
->       - DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
->       - DIV #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6
->
->     - DIV #1 - z-index is 5
-
 ## Example Source Code
 
 ```html
diff --git a/files/ru/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md b/files/ru/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
index 6e76b9420a0a3b..f450cfa926c55e 100644
--- a/files/ru/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
+++ b/files/ru/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md
@@ -21,7 +21,7 @@ The first part of this article, [Stacking without the z-index property](/en/CSS/
 - ...
 - top layer _(closest to the observer)_
 
-> **Примечание:**
+> [!NOTE]
 >
 > - When no `z-index` property is specified, elements are rendered on the default rendering layer 0 (zero).
 > - If several elements share the same `z-index` value (i.e., they are placed on the same layer), stacking rules explained in the section [Stacking without z-index](/en/CSS/Understanding_z-index/Stacking_without_z-index) apply.
diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.md b/files/ru/web/css/css_scroll_snap/basic_concepts/index.md
index 6f4549786c4b6a..627ec19809db13 100644
--- a/files/ru/web/css/css_scroll_snap/basic_concepts/index.md
+++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.md
@@ -57,4 +57,5 @@ slug: Web/CSS/CSS_scroll_snap/Basic_concepts
 
 Данное свойство может быть полезно в ситуации, когда нужно, чтобы пользователь гарантированно увидел каждую прокручиваемую секцию, случайно не пролистав какую-то из них. С другой сторона, такое поведение прокрутки может только мешать и замедлять пользователя, который ищет конкретную секцию.
 
-> **Примечание:** на данный момент свойство `scroll-snap-stop` помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.
+> [!NOTE]
+> На данный момент свойство `scroll-snap-stop` помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.
diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.md b/files/ru/web/css/css_transitions/using_css_transitions/index.md
index 11cf5b57163968..c318f932cef24f 100644
--- a/files/ru/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/ru/web/css/css_transitions/using_css_transitions/index.md
@@ -11,17 +11,21 @@ slug: Web/CSS/CSS_transitions/Using_CSS_transitions
 
 CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).
 
-> **Примечание:** CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.
+> [!NOTE]
+> CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.
 
 ## Какие CSS-свойства анимируются?
 
 Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень [доступных для анимирования свойств](/ru/docs/Web/CSS) ограничен определённым набором.
 
-> **Примечание:** Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.
+> [!NOTE]
+> Перечень анимируемых свойств может меняться по мере изменения спецификации.
 
-> **Примечание:** Значение свойства `auto` является сложным случаем. Спецификация не рекомендует анимировать в значение `auto` и из значения `auto`. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с `auto` следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.
+> [!NOTE]
+> Значение свойства `auto` является сложным случаем. Спецификация не рекомендует анимировать в значение `auto` и из значения `auto`. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с `auto` следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.
 
-> **Примечание:** Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью `.appendChild()` или удаления его `display: none; свойства`. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить `window.setTimeout()` c некоторым количеством миллисекунд до изменения CSS-свойства, которое вы собираетесь анимировать.
+> [!NOTE]
+> Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью `.appendChild()` или удаления его `display: none; свойства`. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить `window.setTimeout()` c некоторым количеством миллисекунд до изменения CSS-свойства, которое вы собираетесь анимировать.
 
 ### Пример анимирования нескольких свойств
 
@@ -970,7 +974,8 @@ div {
 el.addEventListener("transitionend", updateTransition, true);
 ```
 
-> **Примечание:** Событие `transitionend` не произойдёт, когда переход был прерван до его завершения, например, если установили {{cssxref("display")}}`: none` или значение анимируемого свойства изменилось`.`
+> [!NOTE]
+> Событие `transitionend` не произойдёт, когда переход был прерван до его завершения, например, если установили {{cssxref("display")}}`: none` или значение анимируемого свойства изменилось`.`
 
 ## Когда у списков значений свойств разные длины
 
diff --git a/files/ru/web/css/display-listitem/index.md b/files/ru/web/css/display-listitem/index.md
index bc1976e1340c3c..6ed344a254d381 100644
--- a/files/ru/web/css/display-listitem/index.md
+++ b/files/ru/web/css/display-listitem/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/display-listitem
 
 Единственное значение `list-item приведёт к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.`
 
-> **Примечание:** В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет `flow`. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (`outer display type`) block.`
+> [!NOTE]
+> В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет `flow`. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (`outer display type`) block.`
 
 ## `Пример`
 
diff --git a/files/ru/web/css/display-outside/index.md b/files/ru/web/css/display-outside/index.md
index aace105ef06aed..1af17675a21cf7 100644
--- a/files/ru/web/css/display-outside/index.md
+++ b/files/ru/web/css/display-outside/index.md
@@ -23,7 +23,8 @@ slug: Web/CSS/display-outside
 
     Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.
 
-> **Примечание:** Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении `display: block` или `display: inline`, установят внутреннее значение как `flow`. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.
+> [!NOTE]
+> Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении `display: block` или `display: inline`, установят внутреннее значение как `flow`. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.
 
 ## Пример
 
diff --git a/files/ru/web/css/filter/index.md b/files/ru/web/css/filter/index.md
index cd2641e72a07de..543a0e5306f2c6 100644
--- a/files/ru/web/css/filter/index.md
+++ b/files/ru/web/css/filter/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/filter
 
 В стандарт CSS включены несколько функций, которые обеспечивают предопределённые эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на [элемент фильтра SVG](/ru/docs/Web/SVG/Element/filter).
 
-> **Примечание:** Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный ["filter"](<http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx>), который с тех пор устарел.
+> [!NOTE]
+> Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный ["filter"](<http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx>), который с тех пор устарел.
 
 {{cssinfo}}
 
diff --git a/files/ru/web/css/flex-basis/index.md b/files/ru/web/css/flex-basis/index.md
index 10582758d1f7c3..2ccfed69276d57 100644
--- a/files/ru/web/css/flex-basis/index.md
+++ b/files/ru/web/css/flex-basis/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/flex-basis
 
 {{EmbedInteractiveExample("pages/css/flex-basis.html")}}
 
-> **Примечание:** в случае, если для элемента одновременно заданы `flex-basis` (отличное от `auto`) и `width` ( или `height` в случае `flex-direction: column`), `flex-basis` имеет приоритет.
+> [!NOTE]
+> В случае, если для элемента одновременно заданы `flex-basis` (отличное от `auto`) и `width` ( или `height` в случае `flex-direction: column`), `flex-basis` имеет приоритет.
 
 {{cssinfo}}
 
@@ -46,9 +47,10 @@ flex-basis: unset;
 
   - : Автоматический задаёт размер на основе содержимого элемента flex.
 
-    > **Примечание:** Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя `auto` вместе с основным размером ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) или [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) `auto`.
+    > [!NOTE]
+    > Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя `auto` вместе с основным размером ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) или [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) `auto`.
 
-    > **Примечание:**
+    > [!NOTE]
     >
     > - Первоначально, `flex-basis:auto` означает "смотреть на значения `width` или `height`".
     > - Затем `flex-basis:auto` был изменён на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения `width` или `height`". Это было реализован в [баге 1032922](https://bugzilla.mozilla.org/show_bug.cgi?id=1032922).
diff --git a/files/ru/web/css/float/index.md b/files/ru/web/css/float/index.md
index eae8d39a16a583..ce45d0f5b26154 100644
--- a/files/ru/web/css/float/index.md
+++ b/files/ru/web/css/float/index.md
@@ -114,7 +114,8 @@ p.withRedBoxes {
 }
 ```
 
-> **Примечание:** Setting `overflow` to `scroll` will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting `height` to `auto` even though that's the default to indicate that the container should grow to accommodate its content.
+> [!NOTE]
+> Setting `overflow` to `scroll` will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting `height` to `auto` even though that's the default to indicate that the container should grow to accommodate its content.
 
 ## Спецификации
 
diff --git a/files/ru/web/css/font-size/index.md b/files/ru/web/css/font-size/index.md
index 9e0970d6ea63b7..9199f0330b79d9 100644
--- a/files/ru/web/css/font-size/index.md
+++ b/files/ru/web/css/font-size/index.md
@@ -56,7 +56,8 @@ font-size: unset;
 - `<процентные значения>`
   - : Положительное процентное {{cssxref("&lt;percentage&gt;")}} значение по отношению к размеру шрифта родительского элемента.
 
-> **Примечание:** Для обеспечения максимальной совместимости обычно лучше использовать значения, относящиеся к размеру шрифта пользователя по умолчанию.
+> [!NOTE]
+> Для обеспечения максимальной совместимости обычно лучше использовать значения, относящиеся к размеру шрифта пользователя по умолчанию.
 
 ### Формальный синтаксис
 
@@ -76,7 +77,8 @@ Setting the font size in pixel values (`px`) is a good choice when you need pixe
 
 Font sizing settings can also be used in combination. For example, if a parent element is set to `16px` and its child element is set to `larger`, the child element displays larger than the parent element in the page.
 
-> **Примечание:** Defining font sizes in pixel is _[not accessible](https://en.wikipedia.org/wiki/Web_accessibility)_, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.
+> [!NOTE]
+> Defining font sizes in pixel is _[not accessible](https://en.wikipedia.org/wiki/Web_accessibility)_, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.
 
 ### Ems
 
diff --git a/files/ru/web/css/grid-area/index.md b/files/ru/web/css/grid-area/index.md
index 9710ee18995020..d2741e492b0d33 100644
--- a/files/ru/web/css/grid-area/index.md
+++ b/files/ru/web/css/grid-area/index.md
@@ -53,7 +53,8 @@ grid-area: unset;
   - : - ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию `1`. _(то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)_
 - `<custom-ident>`
   - : если есть именованная линия с именем '`<custom-ident>-start`'/'`<custom-ident>-end`', то грид-элемент привязывается к первой из таких линий.
-    > **Примечание:** Именованные грид-области автоматически генерируют неявные именованные линии с именами подобного формата, поэтому запись `grid-area: foo;` выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем `foo-start`/`foo-end` не была явно определена раньше).В противном случае, значение расценивается, как если бы число `1` было задано вместе с `<custom-ident>`.
+    > [!NOTE]
+    > Именованные грид-области автоматически генерируют неявные именованные линии с именами подобного формата, поэтому запись `grid-area: foo;` выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем `foo-start`/`foo-end` не была явно определена раньше).В противном случае, значение расценивается, как если бы число `1` было задано вместе с `<custom-ident>`.
 - `<integer> && <custom-ident>?`
   - : Contributes the *n*th grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.An {{cssxref("&lt;integer&gt;")}} value of `0` is invalid.
 - `span && [ <integer> || <custom-ident> ]`
diff --git a/files/ru/web/css/grid-column/index.md b/files/ru/web/css/grid-column/index.md
index aca231bd7285c2..d9556944fc1e42 100644
--- a/files/ru/web/css/grid-column/index.md
+++ b/files/ru/web/css/grid-column/index.md
@@ -67,7 +67,8 @@ grid-column: unset;
 
   - : Если существует грид-линия с именем в формате `<custom-ident>-start`/`<custom-ident>-end`, элемент будет расположен с начала этой линии.
 
-    > **Примечание:** именованные грид-области автоматически создают имена линий в соответствии с показанным выше форматом, поэтому `grid-column: foo;` выберет начало/конец этой именованной грид-области (в случае если явно не указана другая линия с именами `foo-start`/`foo-end`).
+    > [!NOTE]
+    > Именованные грид-области автоматически создают имена линий в соответствии с показанным выше форматом, поэтому `grid-column: foo;` выберет начало/конец этой именованной грид-области (в случае если явно не указана другая линия с именами `foo-start`/`foo-end`).
 
     Если такой грид-линии нет, то этот значение неявно преобразуется в `<custom-ident>` с числом `1`.
 
diff --git a/files/ru/web/css/grid-row-start/index.md b/files/ru/web/css/grid-row-start/index.md
index 57938159b29025..76dd90959c76b3 100644
--- a/files/ru/web/css/grid-row-start/index.md
+++ b/files/ru/web/css/grid-row-start/index.md
@@ -49,7 +49,8 @@ This property is specified as a single `<grid-line>` value. A `<grid-line>` valu
 
   - : Если есть именованная строка с именем '\<custom-ident>-start', он вносит первую такую строку в размещение элемента сетки.
 
-    > **Примечание:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row-start: foo;` will choose the start edge of that named grid area (unless another line named `foo-start` was explicitly specified before it).В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с `<custom-ident>`.
+    > [!NOTE]
+    > Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row-start: foo;` will choose the start edge of that named grid area (unless another line named `foo-start` was explicitly specified before it).В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с `<custom-ident>`.
 
 - `<integer> && <custom-ident>?`
   - : Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как \<custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.An {{cssxref("integer")}} value of `0` is invalid.
diff --git a/files/ru/web/css/grid-template-columns/index.md b/files/ru/web/css/grid-template-columns/index.md
index 8004af8e005e4a..b8c46b6015d404 100644
--- a/files/ru/web/css/grid-template-columns/index.md
+++ b/files/ru/web/css/grid-template-columns/index.md
@@ -76,7 +76,8 @@ grid-template-columns: unset;
 
     При использовании вне функции {{cssxref("minmax()", "minmax()")}}, `auto` представляет диапазон между минимумом и максимумом, описанным выше. В большинстве случаев это то же самое, что и `minmax(min-content,max-content)`.
 
-    > **Примечание:** размеры полос, заданные значением `auto` (и только `auto`) могут быть растянуты с помощью свойств {{cssxref("align-content")}} и {{cssxref("justify-content")}}. Поэтому по умолчанию грид-полоса с размером `auto` будет занимать всё оставшееся свободное пространство в грид-контейнере.
+    > [!NOTE]
+    > Размеры полос, заданные значением `auto` (и только `auto`) могут быть растянуты с помощью свойств {{cssxref("align-content")}} и {{cssxref("justify-content")}}. Поэтому по умолчанию грид-полоса с размером `auto` будет занимать всё оставшееся свободное пространство в грид-контейнере.
 
 - `{{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}`
   - : Может быть выражен формулой `max(minimum, min(limit, max-content))`, где `minimum` представляет собой `auto`-минимум (который часто, но не всегда представляет наименьший размер минимального содержимого) и `limit` — любое значение или функция для определения размера полосы, переданная в качестве аргумента в `fit-content()`. По-другому можно сказать, что `fit-content()` получается выбором наименьшего значения среди `minmax(auto, max-content)`, `minmax(auto, limit)`.
@@ -87,7 +88,8 @@ grid-template-columns: unset;
 - [`subgrid`](/ru/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
   - : Значение `subgrid` указывает, что грид-раскладка примет размеры родительского грид-контейнера на соответствующих осях. Таким образом размеры колонок и рядов не задаются явно, а берутся из определения родительской грид-раскладки.
 
-> **Предупреждение:** Значение `masonry` появилось в CSS-спецификации Grid Level 3 и на данный момент в качестве эксперимента реализовано в Firefox и активируется через флаг в настройках.
+> [!WARNING]
+> Значение `masonry` появилось в CSS-спецификации Grid Level 3 и на данный момент в качестве эксперимента реализовано в Firefox и активируется через флаг в настройках.
 >
 > Значение `subgrid` представлено в CSS-спецификации Grid Level 2 и пока что реализовано только в Firefox с 71 версии.
 
diff --git a/files/ru/web/css/grid-template-rows/index.md b/files/ru/web/css/grid-template-rows/index.md
index f1dc2b35973553..e4ed6d1070ac78 100644
--- a/files/ru/web/css/grid-template-rows/index.md
+++ b/files/ru/web/css/grid-template-rows/index.md
@@ -78,7 +78,8 @@ grid-template-rows: unset;
 
     При использовании `auto` в {{cssxref("minmax()", "minmax()")}}, диапазон минимальных и максимальных значений вычисляется по описанному выше принципу. В большинстве случаев это то же самое, что написать `minmax(min-content,max-content)`.
 
-    > **Примечание:** размеры полос, заданных `auto` (и только `auto`) могут быть увеличены свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}. Поэтому по умолчанию полоса с размером `auto` будет занимать всё оставшееся пространство в грид-контейнере.
+    > [!NOTE]
+    > Размеры полос, заданных `auto` (и только `auto`) могут быть увеличены свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}. Поэтому по умолчанию полоса с размером `auto` будет занимать всё оставшееся пространство в грид-контейнере.
 
 - {{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
   - : Представляет формулу `min(max-content, max(auto, argument))`, которая рассчитывается так же, как и `auto` (т.е. `minmax(auto, max-content)`), за исключением того, что размер полосы ограничивается _argument_, если он больше минимального значения, вычисленного `auto`.
@@ -89,7 +90,8 @@ grid-template-rows: unset;
 - [`subgrid`](/ru/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
   - : Значение `subgrid` указывает на то, что грид примет составную часть родительского грида по данной оси. Поскольку размеры рядов/колонок не указываются явно, они берутся из определения родительского грида.
 
-> **Предупреждение:** Значение `masonry` появилось в спецификации Grid третьего уровня и на данный момент реализовано в качестве эксперимента и доступно по флагу в Firefox.
+> [!WARNING]
+> Значение `masonry` появилось в спецификации Grid третьего уровня и на данный момент реализовано в качестве эксперимента и доступно по флагу в Firefox.
 >
 > Значение `subgrid` определено в спецификации Grid второго уровня и на данный момент реализовано только в Firefox с версии 71.
 
diff --git a/files/ru/web/css/grid-template/index.md b/files/ru/web/css/grid-template/index.md
index 6f1dfaeec11903..6e5ec13c73ee29 100644
--- a/files/ru/web/css/grid-template/index.md
+++ b/files/ru/web/css/grid-template/index.md
@@ -60,7 +60,8 @@ grid-template: unset;
 
 **Примечание:** при перечислении грид-полос нельзя использовать функцию {{cssxref("repeat()")}}, поскольку предполагается, что ряды и колонки будут располагаться вместе другом с другом в стиле "ASCII-рисунков".
 
-> **Примечание:** сокращённое свойство {{cssxref("grid")}} имеет тот же самый формат значений, но также сбрасывает неявные грид-свойства к их первоначальным значениям. Используйте `grid` (в отличие от `grid-template`), чтобы предотвратить каскадирование этих значений по отдельности.
+> [!NOTE]
+> Сокращённое свойство {{cssxref("grid")}} имеет тот же самый формат значений, но также сбрасывает неявные грид-свойства к их первоначальным значениям. Используйте `grid` (в отличие от `grid-template`), чтобы предотвратить каскадирование этих значений по отдельности.
 
 ## Формальное определение
 
diff --git a/files/ru/web/css/grid/index.md b/files/ru/web/css/grid/index.md
index f9ddc3ef52888f..70a6aef9c4e5a8 100644
--- a/files/ru/web/css/grid/index.md
+++ b/files/ru/web/css/grid/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/grid
 
 Свойство CSS **`grid`** является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.
 
-> **Примечание:** В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.
+> [!NOTE]
+> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.
 
 {{cssinfo}}
 
diff --git a/files/ru/web/css/hyphens/index.md b/files/ru/web/css/hyphens/index.md
index 856161e585cf32..849a8025d86737 100644
--- a/files/ru/web/css/hyphens/index.md
+++ b/files/ru/web/css/hyphens/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/hyphens
 
 Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом [`lang`](/ru/docs/Web/HTML/Global_attributes/lang), и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут [`xml:lang`](/ru/docs/Web/SVG/Attribute/xml:lang).
 
-> **Примечание:** Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.
+> [!NOTE]
+> Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.
 
 ## Синтаксис
 
@@ -38,7 +39,8 @@ hyphens: unset;
 - `auto`
   - : Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Однако предлагаемые возможности разрыва строки (смотреть [Предлагаемые возможности разрыва строки](#предлагаемые_возможности_разрыва_строки) ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.
 
-> **Примечание:** Поведение параметра `auto` зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута `lang`, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.
+> [!NOTE]
+> Поведение параметра `auto` зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута `lang`, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.
 
 ## Предлагаемые возможности разрыва строки
 
@@ -49,7 +51,8 @@ hyphens: unset;
 - U+00AD (SHY)
   - : Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте `&shy;` для вставки мягкого дефиса.
 
-> **Примечание:** Когда HTML-элемент [`<wbr>`](/ru/docs/Web/HTML/Element/wbr) приводит к разрыву строки, дефис не добавляется.
+> [!NOTE]
+> Когда HTML-элемент [`<wbr>`](/ru/docs/Web/HTML/Element/wbr) приводит к разрыву строки, дефис не добавляется.
 
 ## Формальное определение
 
diff --git a/files/ru/web/css/initial/index.md b/files/ru/web/css/initial/index.md
index 0c9dcc6587812f..26968c4a947c80 100644
--- a/files/ru/web/css/initial/index.md
+++ b/files/ru/web/css/initial/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/initial
 
 Ключевое слово **`initial`** (CSS) устанавливает свойство элемента в [начальное (или по умолчанию) значение](/ru/docs/Web/CSS/initial_value). Это может быть применимо к любому свойству CSS. Это относится также к CSS-свойству {{cssxref("all")}}, с которым `initial` может быть использовано для восстановления всех CSS-свойств до их начальных значений.
 
-> **Примечание:** На [наследуемые свойства](/ru/docs/Web/CSS/inheritance#Inherited_properties) действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов {{cssxref("inherit")}}, {{cssxref("unset")}} или {{cssxref("revert")}} вместо него.
+> [!NOTE]
+> На [наследуемые свойства](/ru/docs/Web/CSS/inheritance#Inherited_properties) действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов {{cssxref("inherit")}}, {{cssxref("unset")}} или {{cssxref("revert")}} вместо него.
 
 ## Пример
 
diff --git a/files/ru/web/css/integer/index.md b/files/ru/web/css/integer/index.md
index 36dc09f2edf907..356fa585926997 100644
--- a/files/ru/web/css/integer/index.md
+++ b/files/ru/web/css/integer/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/integer
 
 Тип данных `<integer>` состоит из одного или нескольких дробных цифр, от 0 до 9 включительно, символы `+` и `-` необязательны. Не существует единицы измерения, связанной с целочисленным типом данных.
 
-> **Примечание:** Не существует официального диапазона значений типа `<integer>`. Opera 12.1 поддерживает значения до 215-1, IE - до 220-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального диапазона: последнее решение, [в апреле 2012 на протяжении фазы LC](http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html), было \[-227-1; 227-1], но остальные значения, такие как 224-1 и 230-1, [также были предложены](http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html). Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.
+> [!NOTE]
+> Не существует официального диапазона значений типа `<integer>`. Opera 12.1 поддерживает значения до 215-1, IE - до 220-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального диапазона: последнее решение, [в апреле 2012 на протяжении фазы LC](http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html), было \[-227-1; 227-1], но остальные значения, такие как 224-1 и 230-1, [также были предложены](http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html). Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.
 
 ## Интерполяция
 
diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md
index 3df37a10826ea6..d9cb706df294db 100644
--- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md
+++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md
@@ -17,11 +17,20 @@ slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}
 
-> **Примечание:** [Загрузить этот пример](https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html)
-
-> **Примечание:** В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор: .breadcrumb li:not(:first-child)::before {
-> content: "→";
-> }Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.
+> [!CALLOUT]
+>
+> [Загрузить этот пример](https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html)
+
+> [!NOTE]
+> В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:
+>
+> ```css
+> .breadcrumb li:not(:first-child)::before {
+>   content: "→";
+> }
+> ```
+>
+> Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.
 
 ## Сделанный выбор
 
diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.md b/files/ru/web/css/layout_cookbook/sticky_footers/index.md
index e371db6aed95d6..f7c44c1c28eb2a 100644
--- a/files/ru/web/css/layout_cookbook/sticky_footers/index.md
+++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.md
@@ -20,9 +20,10 @@ slug: Web/CSS/Layout_cookbook/Sticky_footers
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}
 
-> **Примечание:** [Download this example](https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html)
+> [!CALLOUT] > [Загрузить этот пример](https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html)
 
-> **Примечание:** In this example and the following one we are using a wrapper set to `min-height: 100%` in order that our live example works. You could also achieve this for a full page by setting a {{cssxref("min-height")}} of `100vh` on the {{htmlelement("body")}} and then using it as your grid container.
+> [!NOTE]
+> In this example and the following one we are using a wrapper set to `min-height: 100%` in order that our live example works. You could also achieve this for a full page by setting a {{cssxref("min-height")}} of `100vh` on the {{htmlelement("body")}} and then using it as your grid container.
 
 ## Выбор сделан
 
diff --git a/files/ru/web/css/layout_mode/index.md b/files/ru/web/css/layout_mode/index.md
index b88dac477c443f..51c7622d3a4c13 100644
--- a/files/ru/web/css/layout_mode/index.md
+++ b/files/ru/web/css/layout_mode/index.md
@@ -15,7 +15,8 @@ slug: Web/CSS/Layout_mode
 - _[Флексбокс](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout) (CSS Flexible Box Layout)_ — для расположения сложных страниц, которые плавно могут изменять свой размер; {{ experimental_inline() }}
 - _[Сеточная](/ru/docs/Web/CSS/CSS_Grid_Layout)_ — для расположения элементов относительно фиксированной сетки. {{ experimental_inline() }}
 
-> **Примечание:** не все [CSS-свойства](/ru/docs/Web/CSS/Reference) применимы ко всем способам разметки. Большинство из них применяются к одному или двум из них и не действуют, если применяются на элементе, участвующем в другом режиме разметки.
+> [!NOTE]
+> Не все [CSS-свойства](/ru/docs/Web/CSS/Reference) применимы ко всем способам разметки. Большинство из них применяются к одному или двум из них и не действуют, если применяются на элементе, участвующем в другом режиме разметки.
 
 ## Смотрите также
 
diff --git a/files/ru/web/css/length/index.md b/files/ru/web/css/length/index.md
index 69408f02b8c356..854431e2a8596a 100644
--- a/files/ru/web/css/length/index.md
+++ b/files/ru/web/css/length/index.md
@@ -7,13 +7,15 @@ slug: Web/CSS/length
 
 [CSS](/ru/docs/Web/CSS) [тип данных](/ru/docs/Web/CSS/CSS_Types) `<length>` представляет единицу длины. Длина может быть использована в таких свойствах CSS как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, и {{Cssxref("text-shadow")}}.
 
-> **Примечание:** Хоть значения {{cssxref("&lt;percentage&gt;")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа `<length>`, они не являются `<length>` значениями.
+> [!NOTE]
+> Хоть значения {{cssxref("&lt;percentage&gt;")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа `<length>`, они не являются `<length>` значениями.
 
 ## Синтаксис
 
 Тип данных `<length>` состоит из {{cssxref("&lt;number&gt;")}}, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа `0` единица измерения необязательна.
 
-> **Примечание:** Некоторые свойства допускают использование отрицательных значений `<length>`, а некоторые нет.
+> [!NOTE]
+> Некоторые свойства допускают использование отрицательных значений `<length>`, а некоторые нет.
 
 ### Единицы измерения
 
@@ -25,7 +27,8 @@ slug: Web/CSS/length
 
 Единицы, зависящие от шрифта, определяют значение `<length>`, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.
 
-> **Примечание:** Эти единицы, особенно `em` и `rem`, часто используются для создания адаптивных разметок, которые сохраняют [вертикальную структуру страницы](https://24ways.org/2006/compose-to-a-vertical-rhythm) даже если пользователь изменяет размер шрифта.
+> [!NOTE]
+> Эти единицы, особенно `em` и `rem`, часто используются для создания адаптивных разметок, которые сохраняют [вертикальную структуру страницы](https://24ways.org/2006/compose-to-a-vertical-rhythm) даже если пользователь изменяет размер шрифта.
 
 - cap {{experimental_inline}}
   - : Представляет высоту заглавных букв в [шрифте](/ru/docs/Web/CSS/font), применённом к элементу.
@@ -69,7 +72,8 @@ slug: Web/CSS/length
 
 Для устройств с высоким dpi дюймы (`in`),сантиметры (`cm`) и миллиметры (`mm`) такие же, как и соответствующие физические единицы. Таким образов, единица `px` определяется относительно их (1/96 одного дюйма).
 
-> **Примечание:** Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как `em` или `rem`) в свойстве `font-size`.
+> [!NOTE]
+> Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как `em` или `rem`) в свойстве `font-size`.
 
 - px
   - : Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на _принтерах_ и _экранах с высоким разрешением_ один пиксель CSS равен нескольким пикселям дисплея. `1px` = 1/96 от `1in`.
diff --git a/files/ru/web/css/list-style-image/index.md b/files/ru/web/css/list-style-image/index.md
index c327f5bd77fac8..ee35c94a8363a1 100644
--- a/files/ru/web/css/list-style-image/index.md
+++ b/files/ru/web/css/list-style-image/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/list-style-image
 
 {{EmbedInteractiveExample("pages/css/list-style-image.html")}}
 
-> **Примечание:** Это свойство применяется к элементам списка, т.е. к элементам с `{{cssxref("display")}}: list-item;` [по умолчанию](https://www.w3.org/TR/html5/rendering.html#lists) оно включает элементы {{HTMLElement("li")}}. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно {{HTMLElement("ol")}} или {{HTMLElement("ul")}}), что позволит применить его ко всем элементам списка.
+> [!NOTE]
+> Это свойство применяется к элементам списка, т.е. к элементам с `{{cssxref("display")}}: list-item;` [по умолчанию](https://www.w3.org/TR/html5/rendering.html#lists) оно включает элементы {{HTMLElement("li")}}. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно {{HTMLElement("ol")}} или {{HTMLElement("ul")}}), что позволит применить его ко всем элементам списка.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/object-position/index.md b/files/ru/web/css/object-position/index.md
index 459b1b1f3aeac9..0c46fbf3e2767f 100644
--- a/files/ru/web/css/object-position/index.md
+++ b/files/ru/web/css/object-position/index.md
@@ -29,7 +29,8 @@ object-position: unset;
 - {{cssxref("&lt;position&gt;")}}
   - : От одного до четырёх значений, которые определяют 2D-позицию элемента. Могут использоваться как абсолютные, так и относительные значения сдвигов.
 
-> **Примечание:** Позиция может быть даже такой, что замещаемый элемент будет отрисовываться за пределами своего блока.
+> [!NOTE]
+> Позиция может быть даже такой, что замещаемый элемент будет отрисовываться за пределами своего блока.
 
 ## Формальное определение
 
diff --git a/files/ru/web/css/orphans/index.md b/files/ru/web/css/orphans/index.md
index 049eb0f28d222c..de969015f85b79 100644
--- a/files/ru/web/css/orphans/index.md
+++ b/files/ru/web/css/orphans/index.md
@@ -18,7 +18,8 @@ orphans: initial;
 orphans: unset;
 ```
 
-> **Примечание:** В типографии, _orphan_ это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)
+> [!NOTE]
+> В типографии, _orphan_ это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)
 
 {{cssinfo}}
 
diff --git a/files/ru/web/css/outline/index.md b/files/ru/web/css/outline/index.md
index 1dd7dbbe09224a..6ee6b0b085af28 100644
--- a/files/ru/web/css/outline/index.md
+++ b/files/ru/web/css/outline/index.md
@@ -44,7 +44,8 @@ outline: unset;
 
 Свойство `outline` может быть задано одним, двум или тремя перечисленными ниже значений. Порядок следования значений не имеет значения. Как и в случае с другими сокращёнными свойствами, вместо пропущенных значений будет использоваться [первоначальное значение](/ru/docs/Web/CSS/initial_value).
 
-> **Note:** если стиль обводки не задан, он будет невидим для большого количества элементов. Всё потому, что обводка по умолчанию не стилизован (т.е. для его свойств задано значение `none`). Самое заветное исключение составляют элементы `input`, для которых браузеры определяют стандартный стиль.
+> [!NOTE]
+> Если стиль обводки не задан, он будет невидим для большого количества элементов. Всё потому, что обводка по умолчанию не стилизован (т.е. для его свойств задано значение `none`). Самое заветное исключение составляют элементы `input`, для которых браузеры определяют стандартный стиль.
 
 ### Значения
 
diff --git a/files/ru/web/css/overflow-block/index.md b/files/ru/web/css/overflow-block/index.md
index 6ec1365f225d60..ce3624be5ae37c 100644
--- a/files/ru/web/css/overflow-block/index.md
+++ b/files/ru/web/css/overflow-block/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/overflow-block
 
 [CSS](/ru/docs/Web/CSS) свойство **`overflow-block`** устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.
 
-> **Примечание:** Свойство `overflow-block` отображается на {{Cssxref("overflow-y")}} или {{Cssxref("overflow-x")}} в зависимости от режима записи документа.
+> [!NOTE]
+> Свойство `overflow-block` отображается на {{Cssxref("overflow-y")}} или {{Cssxref("overflow-x")}} в зависимости от режима записи документа.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/overflow-wrap/index.md b/files/ru/web/css/overflow-wrap/index.md
index e7833ecdd55476..53fe8825d18411 100644
--- a/files/ru/web/css/overflow-wrap/index.md
+++ b/files/ru/web/css/overflow-wrap/index.md
@@ -9,7 +9,8 @@ slug: Web/CSS/overflow-wrap
 
 {{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
 
-> **Примечание:** В отличие от {{cssxref("word-break")}}, `overflow-wrap` создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения
+> [!NOTE]
+> В отличие от {{cssxref("word-break")}}, `overflow-wrap` создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения
 
 Изначально свойство `word-wrap` не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в `overflow-wrap` c алиасом `word-wrap`.
 
diff --git a/files/ru/web/css/padding-left/index.md b/files/ru/web/css/padding-left/index.md
index 76794448b11d75..29b88fb1e63b06 100644
--- a/files/ru/web/css/padding-left/index.md
+++ b/files/ru/web/css/padding-left/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/padding-left
 
 Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.
 
-> **Примечание:** Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырёх сторонах элемента одним значением.
+> [!NOTE]
+> Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырёх сторонах элемента одним значением.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/paint-order/index.md b/files/ru/web/css/paint-order/index.md
index 4771d15a7fe3c3..b31da03f93479b 100644
--- a/files/ru/web/css/paint-order/index.md
+++ b/files/ru/web/css/paint-order/index.md
@@ -32,7 +32,8 @@ paint-order: unset;
 
 Когда указано одно значение, то сначала отрисовывается оно, затем два других в обычном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределённое значение.
 
-> **Note:** в контексте этого свойства, маркеры отрисовываются только при рисовании форм SVG, включающих использование свойств `marker-*` (например [`marker-start`](/ru/docs/Web/SVG/Attribute/marker-start)) и элемента [`<marker>`](/ru/docs/Web/SVG/Element/marker). Они не применяются к тексту HTML, в этом случае вы можете определить только порядок `stroke` и `fill`.
+> [!NOTE]
+> В контексте этого свойства, маркеры отрисовываются только при рисовании форм SVG, включающих использование свойств `marker-*` (например [`marker-start`](/ru/docs/Web/SVG/Attribute/marker-start)) и элемента [`<marker>`](/ru/docs/Web/SVG/Element/marker). Они не применяются к тексту HTML, в этом случае вы можете определить только порядок `stroke` и `fill`.
 
 ### Значения
 
diff --git a/files/ru/web/css/percentage/index.md b/files/ru/web/css/percentage/index.md
index d1d58f600962ff..fa47223efd5454 100644
--- a/files/ru/web/css/percentage/index.md
+++ b/files/ru/web/css/percentage/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/percentage
 
 [CSS](/ru/docs/Web/CSS) [тип данных](/ru/docs/Web/CSS/CSS_Types) **`<percentage>`** представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, и {{Cssxref("font-size")}}.
 
-> **Примечание:** Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных {{cssxref("&lt;length&gt;")}}) будет доступно в унаследованном свойстве, а не значение в процентах.
+> [!NOTE]
+> Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных {{cssxref("&lt;length&gt;")}}) будет доступно в унаследованном свойстве, а не значение в процентах.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/pseudo-classes/index.md b/files/ru/web/css/pseudo-classes/index.md
index 96a45fc49638a9..04292bd9b47d29 100644
--- a/files/ru/web/css/pseudo-classes/index.md
+++ b/files/ru/web/css/pseudo-classes/index.md
@@ -15,7 +15,8 @@ div:hover {
 
 Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, {{ cssxref(":visited") }}), состояние содержимого (вроде {{ cssxref(":checked") }} у некоторых элементов формы) или позиции курсора мыши (например, {{ cssxref(":hover") }} определяет, находится ли курсор мыши над элементом).
 
-> **Примечание:** В отличие от псевдоклассов, [псевдоэлементы](/ru/docs/Web/CSS/pseudo-elements) могут быть использованы для стилизации _определённой части_ элемента.
+> [!NOTE]
+> В отличие от псевдоклассов, [псевдоэлементы](/ru/docs/Web/CSS/pseudo-elements) могут быть использованы для стилизации _определённой части_ элемента.
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/pseudo-elements/index.md b/files/ru/web/css/pseudo-elements/index.md
index fa87956013e115..bc90aae76a3183 100644
--- a/files/ru/web/css/pseudo-elements/index.md
+++ b/files/ru/web/css/pseudo-elements/index.md
@@ -15,7 +15,8 @@ p::first-line {
 }
 ```
 
-> **Примечание:** В отличие от псевдоэлементов, [псевдоклассы](/ru/docs/Web/CSS/Псевдо-классы) могут быть использованы для стилизации элемента на основе его _состояния_.
+> [!NOTE]
+> В отличие от псевдоэлементов, [псевдоклассы](/ru/docs/Web/CSS/Псевдо-классы) могут быть использованы для стилизации элемента на основе его _состояния_.
 
 ## Синтаксис
 
@@ -27,7 +28,8 @@ selector::pseudo-element {
 
 В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.
 
-> **Примечание:** Как правило, следует использовать двойное двоеточие (`::`) вместо одинарного (`:`). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.
+> [!NOTE]
+> Как правило, следует использовать двойное двоеточие (`::`) вместо одинарного (`:`). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.
 
 ## Список стандартных псевдоэлементов
 
diff --git a/files/ru/web/css/revert/index.md b/files/ru/web/css/revert/index.md
index 5f59181dad2b54..8a6df519d839fc 100644
--- a/files/ru/web/css/revert/index.md
+++ b/files/ru/web/css/revert/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/revert
 
 В пользовательских стилях `revert` откатывает каскад и сбрасывает свойство к значению по умолчанию, которое было установлено браузером.
 
-> **Примечание:** Ключевое слово `revert` отличается от {{cssxref("initial")}}, поэтому его не следует с ним путать. {{cssxref("initial")}} использует [начальное значение](/ru/docs/Web/CSS/initial_value), которое определено отдельно для каждого свойства CSS-спецификацией. Для сравнения, браузеры устанавливают значения по умолчанию в зависимости от CSS селектора.Например, [начальное значение](/ru/docs/Web/CSS/initial_value) для свойства {{cssxref("display")}} — `inline`, тогда как браузер устанавливает значение по умолчанию свойства {{cssxref("display")}} элемента {{HTMLElement("div")}} как `block`, а элемента {{HTMLElement("table")}} как `table`, и т.д
+> [!NOTE]
+> Ключевое слово `revert` отличается от {{cssxref("initial")}}, поэтому его не следует с ним путать. {{cssxref("initial")}} использует [начальное значение](/ru/docs/Web/CSS/initial_value), которое определено отдельно для каждого свойства CSS-спецификацией. Для сравнения, браузеры устанавливают значения по умолчанию в зависимости от CSS селектора.Например, [начальное значение](/ru/docs/Web/CSS/initial_value) для свойства {{cssxref("display")}} — `inline`, тогда как браузер устанавливает значение по умолчанию свойства {{cssxref("display")}} элемента {{HTMLElement("div")}} как `block`, а элемента {{HTMLElement("table")}} как `table`, и т.д
 
 ## Пример
 
diff --git a/files/ru/web/css/specificity/index.md b/files/ru/web/css/specificity/index.md
index 69994ba93c689f..092adb5b5d1b11 100644
--- a/files/ru/web/css/specificity/index.md
+++ b/files/ru/web/css/specificity/index.md
@@ -13,7 +13,8 @@ slug: Web/CSS/Specificity
 
 Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из [типов селекторов](#Selector_Types) в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.
 
-> **Примечание:** Примечание: Взаимное расположение элементов в дереве документа не влияет на специфичность.
+> [!NOTE]
+> Взаимное расположение элементов в дереве документа не влияет на специфичность.
 
 ### Типы селекторов
 
diff --git a/files/ru/web/css/syntax/index.md b/files/ru/web/css/syntax/index.md
index 6c38eb8994bf8b..a07a6c7a50f1b4 100644
--- a/files/ru/web/css/syntax/index.md
+++ b/files/ru/web/css/syntax/index.md
@@ -28,7 +28,8 @@ slug: Web/CSS/Syntax
 
 ![](css_syntax_-_declaration.png)
 
-> **Примечание:** Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.
+> [!NOTE]
+> Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.
 
 ## CSS rulesets
 
@@ -40,7 +41,8 @@ CSS allows this by associating conditions with declarations blocks. Each (valid)
 
 As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the [cascade](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) algorithm.
 
-> **Примечание:** It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.
+> [!NOTE]
+> It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.
 >
 > This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole _selector_ is invalid and therefor the entire rule is ignored (as invalid too).
 
diff --git a/files/ru/web/css/time/index.md b/files/ru/web/css/time/index.md
index 37d7b856702319..40e0ee0d9198fe 100644
--- a/files/ru/web/css/time/index.md
+++ b/files/ru/web/css/time/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/time
 
 Тип данных `<time>` состоит из {{cssxref("&lt;number&gt;")}}, который следует за одним из нижеперечисленных значений. На выбор, ему может предшествовать символ `+` или `-` символ. Как и во всех измерениях, между символом и числом не допускается пробел.
 
-> **Примечание:** Хотя число `0` имеет одно значение, независимо от единиц измерения, они не могут быть опущены. Другими словами `0` недопустимо и представляется `0s` или `0ms`.
+> [!NOTE]
+> Хотя число `0` имеет одно значение, независимо от единиц измерения, они не могут быть опущены. Другими словами `0` недопустимо и представляется `0s` или `0ms`.
 
 ### Единицы
 
@@ -20,7 +21,8 @@ slug: Web/CSS/time
 - **`ms`**
   - : Представляет время в миллисекундах. Примеры: `0ms`, `150.25ms`, `-60000ms`.
 
-> **Примечание:** Преобразование между `s` и `ms` следует из логики `1s` = `1000ms`.
+> [!NOTE]
+> Преобразование между `s` и `ms` следует из логики `1s` = `1000ms`.
 
 ## Примеры
 
diff --git a/files/ru/web/css/transform-function/rotate3d/index.md b/files/ru/web/css/transform-function/rotate3d/index.md
index 45322570aaa70b..4f96c4e1f17b96 100644
--- a/files/ru/web/css/transform-function/rotate3d/index.md
+++ b/files/ru/web/css/transform-function/rotate3d/index.md
@@ -7,7 +7,8 @@ slug: Web/CSS/transform-function/rotate3d
 
 In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an \[x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not _normalized_ (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, \[0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.
 
-> **Примечание:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
+> [!NOTE]
+> Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
 
 ## Syntax
 
diff --git a/files/ru/web/css/transform/index.md b/files/ru/web/css/transform/index.md
index 33b8f94ae30139..1b3ad5dc6028cf 100644
--- a/files/ru/web/css/transform/index.md
+++ b/files/ru/web/css/transform/index.md
@@ -11,7 +11,8 @@ slug: Web/CSS/transform
 
 Если свойство имеет значение, отличное от `none`, будет создан [контекст наложения](/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). В этом случае, элемент будет действовать как [содержащий блок](/ru/docs/Web/CSS/Containing_block) для любых элементов `position: fixed;` или `position: absolute;` которые он содержит.
 
-> **Предупреждение:** Только трансформируемый элемент может быть `transform`. Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : [неизменяемые инлайновые блоки](/ru/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [блоки таблица-колонка](/ru/docs/Web/HTML/Element/col), и [блоки таблица-колонка-группа](/ru/docs/Web/HTML/Element/colgroup).
+> [!WARNING]
+> Только трансформируемый элемент может быть `transform`. Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : [неизменяемые инлайновые блоки](/ru/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [блоки таблица-колонка](/ru/docs/Web/HTML/Element/col), и [блоки таблица-колонка-группа](/ru/docs/Web/HTML/Element/colgroup).
 
 ## Синтаксис
 
diff --git a/files/ru/web/css/user-select/index.md b/files/ru/web/css/user-select/index.md
index b4ff3d1b5dc203..514d35bd7b1287 100644
--- a/files/ru/web/css/user-select/index.md
+++ b/files/ru/web/css/user-select/index.md
@@ -45,7 +45,8 @@ user-select: unset;
 - `element`{{non-standard_inline}} (IE-specific alias)
   - : Аналогичен `contain`. Поддерживается только в Internet Explorer.
 
-> **Примечание:** CSS UI 4 [renames user-select: element to contain](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).
+> [!NOTE]
+> CSS UI 4 [renames user-select: element to contain](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).
 
 ## Формальное определение
 
diff --git a/files/ru/web/css/using_css_custom_properties/index.md b/files/ru/web/css/using_css_custom_properties/index.md
index 49b16555084731..09c7f6d08f9045 100644
--- a/files/ru/web/css/using_css_custom_properties/index.md
+++ b/files/ru/web/css/using_css_custom_properties/index.md
@@ -29,7 +29,8 @@ element {
 }
 ```
 
-> **Примечание:** В более ранней спецификации префикс для переменных был `var-` , но позже был изменён на `--`. Firefox 31 и выше следуют новой спецификации.([Firefox bug 985838](https://bugzil.la/985838))
+> [!NOTE]
+> В более ранней спецификации префикс для переменных был `var-` , но позже был изменён на `--`. Firefox 31 и выше следуют новой спецификации.([Firefox bug 985838](https://bugzil.la/985838))
 
 ## Первый шаг с CSS Переменными
 
@@ -196,9 +197,11 @@ element {
 }
 ```
 
-> **Примечание:** В замещаемых значениях можно использовать запятые по аналогии с [пользовательскими свойствами](https://www.w3.org/TR/css-variables/#custom-property). Например, var(--foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)
+> [!NOTE]
+> В замещаемых значениях можно использовать запятые по аналогии с [пользовательскими свойствами](https://www.w3.org/TR/css-variables/#custom-property). Например, var(--foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)
 
-> **Примечание:** Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.
+> [!NOTE]
+> Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.
 
 ## Обоснованность и полезность
 
diff --git a/files/ru/web/css/var/index.md b/files/ru/web/css/var/index.md
index f5cbc3a5db88db..7c5c1146cf0037 100644
--- a/files/ru/web/css/var/index.md
+++ b/files/ru/web/css/var/index.md
@@ -17,7 +17,8 @@ slug: Web/CSS/var
 
 {{csssyntax}}
 
-> **Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением.
+> [!NOTE]
+> Синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением.
 
 ### Значения
 
diff --git a/files/ru/web/css/visual_formatting_model/index.md b/files/ru/web/css/visual_formatting_model/index.md
index c686180a0c91dc..6187a8e0dfde09 100644
--- a/files/ru/web/css/visual_formatting_model/index.md
+++ b/files/ru/web/css/visual_formatting_model/index.md
@@ -98,48 +98,12 @@ Some inline text followed by a paragraph followed by more inline text.
 
 Элементы инлайн-уровня создают _боксы инлайн-уровня_, которые определены как боксы, участвующие в [контексте форматирования инлайн-уровня](/ru/docs/CSS/Inline_formatting_context). _Inline boxes_ are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with `display:inline`. Inline-level boxes, whose contents do not participate in an inline formatting context, are called _atomic inline-level boxes_. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of `inline-block` or `inline-table`, are never split into several boxes, as is possible with inline boxes.
 
-> **Примечание:** Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are **not** inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
-
-> **Примечание:** Atomic inline boxes cannot be split into several lines in an inline formatting context.
->
-> ```html
-> <style>
->   span {
->     display: inline; /* default value*/
->   }
-> </style>
-> <div style="width:20em;">
->   The text in the span <span>can be split in several lines as it</span> is an
->   inline box.
-> </div>
-> ```
-
-which leads to:
-
-The text in the span can be split into several lines as it is an inline box.
-
-```html
-<style>
-  span {
-    display: inline-block;
-  }
-</style>
-<div style="width:20em;">
-  The text in the span <span>cannot be split in several lines as it</span> is an
-  inline-block box.
-</div>
-```
-
-> **Примечание:** which leads to:The text in the span cannot be split into several lines as it is an inline-block box.
-
 #### Anonymous inline boxes
 
 As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to `initial` for all others.
 
 The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.
 
-> **Примечание:** Example TBD
-
 ### Other types of boxes
 
 #### Line boxes
@@ -152,8 +116,6 @@ These boxes are technical, and Web authors do not usually have to bother with th
 
 _Run-in boxes_, defined using `display:run-in`, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.
 
-> **Примечание:** Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered _experimental_. They should not be used in production.
-
 #### Model-induced boxes
 
 Besides the inline and block formatting contexts, CSS specifies several additional _content models_ that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:
@@ -174,17 +136,6 @@ Once boxes are generated, the CSS engine needs to position them on the layout. T
 
 In the _normal flow_, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value `static` or `relative`, and if the CSS {{ cssxref("float") }} is set to the value `none`.
 
-### Example
-
-> **Примечание:** When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out.
->
-> When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out.
-
-> **Примечание:** There are two sub-cases of the normal flow: static positioning and relative positioning:
->
-> - In _static positioning_, triggered by the value `static` of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.
-> - In _relative_ _positioning_, triggered by the value `relative` of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.
-
 ### Floats
 
 In the _float positioning scheme_, specific boxes (called _floating boxes_ or simply _floats)_ are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.
diff --git a/files/ru/web/css/white-space/index.md b/files/ru/web/css/white-space/index.md
index edc5cebbc45bd0..54f3aa63de3e23 100644
--- a/files/ru/web/css/white-space/index.md
+++ b/files/ru/web/css/white-space/index.md
@@ -5,7 +5,8 @@ slug: Web/CSS/white-space
 
 {{CSSRef}}Свойство **`white-space`** управляет тем, как обрабатываются {{Glossary("whitespace", "пробельные символы")}} внутри элемента.{{EmbedInteractiveExample("pages/css/white-space.html")}}
 
-> **Примечание:** Для управления переносами _внутри слов_ используйте {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}} или {{CSSxRef("hyphens")}}.
+> [!NOTE]
+> Для управления переносами _внутри слов_ используйте {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}} или {{CSSxRef("hyphens")}}.
 
 ## Сводка
 
diff --git a/files/ru/web/css/word-break/index.md b/files/ru/web/css/word-break/index.md
index e0a29ec76b5a5c..8a6414eb685b6e 100644
--- a/files/ru/web/css/word-break/index.md
+++ b/files/ru/web/css/word-break/index.md
@@ -39,7 +39,8 @@ word-break: unset;
 - `break-word` {{Non-standard_Inline}}
   - : При превышении границ блока, обычно остающиеся целыми слова, могут быть разбиты в произвольном месте, если не будет найдено более подходящее для переноса строки место.
 
-> **Примечание:** В отличие от `word-break: break-word` и `overflow-wrap: break-word` (смотри {{cssxref("overflow-wrap")}}), `word-break: break-all` вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).
+> [!NOTE]
+> В отличие от `word-break: break-word` и `overflow-wrap: break-word` (смотри {{cssxref("overflow-wrap")}}), `word-break: break-all` вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).
 
 ### Формальный синтаксис
 
diff --git a/files/ru/web/html/attributes/pattern/index.md b/files/ru/web/html/attributes/pattern/index.md
index 81863b22682423..fe4d79e658bf49 100644
--- a/files/ru/web/html/attributes/pattern/index.md
+++ b/files/ru/web/html/attributes/pattern/index.md
@@ -13,7 +13,8 @@ The `pattern` attribute, when specified, is a regular expression which the input
 
 If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.
 
-> **Примечание:** Use the [`title`](/ru/docs/Web/HTML/Element/input#title) attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You **must not** rely on the tooltip alone for an explanation. See below for more information on usability.
+> [!NOTE]
+> Use the [`title`](/ru/docs/Web/HTML/Element/input#title) attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You **must not** rely on the tooltip alone for an explanation. See below for more information on usability.
 
 Some of the input types supporting the pattern attribute, notably the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/url", "url")}} input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the {{domxref('ValidityState')}} object's read-only {{domxref('ValidityState.typeMismatch','typeMismatch')}} property will be true.
 
diff --git a/files/ru/web/html/constraint_validation/index.md b/files/ru/web/html/constraint_validation/index.md
index f89b55fd92a811..251d88b9a88d77 100644
--- a/files/ru/web/html/constraint_validation/index.md
+++ b/files/ru/web/html/constraint_validation/index.md
@@ -9,7 +9,8 @@ slug: Web/HTML/Constraint_validation
 
 Базовое введение в эти концепции с примерами можно найти в разделе [Валидация форм на стороне клиента](/ru/docs/Learn/Forms/Form_validation).
 
-> **Примечание:** HTML5-валидация ограничений не отменяет необходимости дополнительной валидации на _стороне сервера_. Несмотря на то, что ожидается гораздо меньшее не валидных запросов формы, они всё же могут быть отправлены несовместимыми браузерами (например, не поддерживающими HTML5 или JavaScript) или злоумышленниками, которые пытаются взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам по-прежнему нужно производить дополнительную валидацию ограничений ввода и на стороне сервера.
+> [!NOTE]
+> HTML5-валидация ограничений не отменяет необходимости дополнительной валидации на _стороне сервера_. Несмотря на то, что ожидается гораздо меньшее не валидных запросов формы, они всё же могут быть отправлены несовместимыми браузерами (например, не поддерживающими HTML5 или JavaScript) или злоумышленниками, которые пытаются взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам по-прежнему нужно производить дополнительную валидацию ограничений ввода и на стороне сервера.
 
 ## Внутренние и базовые ограничения
 
@@ -295,7 +296,8 @@ slug: Web/HTML/Constraint_validation
 
 Формат почтового индекса в разных странах отличается. Мало того, что в большинстве стран может быть дополнительный префикс с кодом страны (например, `D —` в Германии, `F —` во Франции или Швейцарии), в некоторых странах, почтовые индексы содержат фиксированное количеством цифр; другие, например, Великобритания, имеют ещё более сложную структуру, допускающую в определённых местах ещё и наличие букв.
 
-> **Примечание:** Далее представлена не полная библиотека валидации почтового индекса, а скорее демонстрация ключевых концепций.
+> [!NOTE]
+> Далее представлена не полная библиотека валидации почтового индекса, а скорее демонстрация ключевых концепций.
 
 В качестве примера мы добавим скрипт, выполняющий валидацию органичений простой формы:
 
diff --git a/files/ru/web/html/content_categories/index.md b/files/ru/web/html/content_categories/index.md
index 5f04b55dd0d754..04044808750ff7 100644
--- a/files/ru/web/html/content_categories/index.md
+++ b/files/ru/web/html/content_categories/index.md
@@ -13,7 +13,8 @@ slug: Web/HTML/Content_categories
 - Категории контента для элементов форм, описывающие общие правила для элементов форм;
 - Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.
 
-> **Примечание:** Более подробное обсуждение данных категорий контента и их сравнительных особенностей выходит за рамки данной статьи; можно обратиться к [соответствующим разделам спецификации HTML](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content) (на английском).
+> [!NOTE]
+> Более подробное обсуждение данных категорий контента и их сравнительных особенностей выходит за рамки данной статьи; можно обратиться к [соответствующим разделам спецификации HTML](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content) (на английском).
 
 ![Диаграмма Венна, показывающая, как взаимодействуют различные категории контента.](content_categories_venn.png)
 
@@ -50,9 +51,8 @@ slug: Web/HTML/Content_categories
 
 Данной категории принадлежат такие элементы, как {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} и {{HTMLElement("hgroup")}}.
 
-> **Примечание:** *Э*лемент {{HTMLElement("header")}} сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.
-
-> **Примечание:** Стоит заметить, что элемент {{HTMLElement("hgroup")}} был удалён из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.
+> [!NOTE]
+> Элемент {{HTMLElement("header")}} сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.
 
 ### Фразовый контент
 
diff --git a/files/ru/web/html/element/a/index.md b/files/ru/web/html/element/a/index.md
index e20040aa1b7fbc..bca5bc56b30e09 100644
--- a/files/ru/web/html/element/a/index.md
+++ b/files/ru/web/html/element/a/index.md
@@ -26,7 +26,7 @@ HTML-элемент `<a>` определяет гиперссылку для п
 
   - : Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.
 
-    > **Примечание:**
+    > [!NOTE]
     >
     > - Атрибут может быть использован вместе с [blob: URLs](/ru/docs/Web/API/URL/createObjectURL_static) и `data: URLs`, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).
     > - Если представлен HTTP-заголовок `Content-Disposition:,` и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.
@@ -36,7 +36,8 @@ HTML-элемент `<a>` определяет гиперссылку для п
 - `href`
   - : Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут `href` указывает ссылку: либо URL, либо якорь. Якорь — это название после символа `#`, который указывает на элемент ([ID](/ru/docs/Web/HTML/Global_attributes#id)) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, `file`, `ftp` и `mailto` работают в большинстве браузеров.
 
-> **Примечание:** Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например: `<a href="#top">Вернуться наверх</a>`. [Это поведение указано в Спецификациях HTML5](https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid).
+> [!NOTE]
+> Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например: `<a href="#top">Вернуться наверх</a>`. [Это поведение указано в Спецификациях HTML5](https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid).
 
 - `hreflang`
   - : Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) для HTML5 и [RFC1766](https://www.ietf.org/rfc/rfc1766.txt) для HTML4. Используйте этот атрибут, только если задан [`href`](#href).
@@ -61,7 +62,8 @@ HTML-элемент `<a>` определяет гиперссылку для п
     - `_top`: Самый верхний контекст просмотра, то есть контекст самого первого предка. Если предков нет, то поведение аналогично `_self`.
     - `_unfencedTop`: позволяет встроенным [изолированным фреймам](/ru/docs/Web/API/Fenced_frame_API) обращаться к фрейму верхнего уровня (т.е. выходить за пределы изолированного фрейма). Обратите внимание, что навигация будет работать, если она используется вне контекста изолированного фрейма, но она не будет действовать как зарезервированное ключевое слово.
 
-      > **Примечание:** Использование `target="_blank"` на элементах `<a>` неявно приводит к такому же поведению `rel`, как при указании значения [`rel="noopener"`](/ru/docs/Web/HTML/Attributes/rel/noopener), которое не устанавливает `window.opener`.
+      > [!NOTE]
+      > Использование `target="_blank"` на элементах `<a>` неявно приводит к такому же поведению `rel`, как при указании значения [`rel="noopener"`](/ru/docs/Web/HTML/Attributes/rel/noopener), которое не устанавливает `window.opener`.
 
 - `type`
   - : Этот атрибут определяет [MIME-тип](https://www.w3.org/TR/html4/references.html#ref-MIMETYPES) для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как `audio/wav`.Используйте этот атрибут только если указан [`href`](#href).
@@ -72,7 +74,8 @@ HTML-элемент `<a>` определяет гиперссылку для п
 
   - : Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми [список кодировок](https://tools.ietf.org/html/rfc2045). Значением по умолчанию является ISO-8859-1.
 
-    > **Предупреждение:** Этот атрибут является устарелым в HTML5 и **не должен использоваться**. Чтобы достичь такого же эффекта, используйте HTTP-заголовок `Content-Type` на ссылающемся ресурсе.
+    > [!WARNING]
+    > Этот атрибут является устарелым в HTML5 и **не должен использоваться**. Чтобы достичь такого же эффекта, используйте HTTP-заголовок `Content-Type` на ссылающемся ресурсе.
 
 - `coords`
   - : Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.
@@ -83,14 +86,16 @@ HTML-элемент `<a>` определяет гиперссылку для п
 - `shape`
   - : Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута — `circle`, `default`, `polygon` и `rect`. Формат координат зависит от выбранной формы. Для `circle` — `x`, `y`, `r`, где `x` и `y` — пиксельные координаты центра круга и `r` — радиус в пикселях. Для rect — `x`, `y`, `w`, `h`, где `x` и `y` — координаты верхнего левого угла прямоугольника, а `w` и `h` — ширина и высота соответственно. Значениями `polygon` для координатор формы являются `x1`, `y1`, `x2`, `y2`... Каждая пара `x`, `y` определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение `default` для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.
 
-> **Примечание:** Желательно использовать атрибут `usemap` для элемента [`<img>`](/ru/docs/Web/HTML/Element/img) и связанного элемента [`<map>`](/ru/docs/Web/HTML/Element/map), чтобы определить горячие точки вместо атрибутов формы.
+> [!NOTE]
+> Желательно использовать атрибут `usemap` для элемента [`<img>`](/ru/docs/Web/HTML/Element/img) и связанного элемента [`<map>`](/ru/docs/Web/HTML/Element/map), чтобы определить горячие точки вместо атрибутов формы.
 
 ### Нестандартные
 
 - `datafld` {{Non-standard_inline}}
   - : Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.
 
-> **Предупреждение:** Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как [XMLHttpRequest](/ru/docs/nsIXMLHttpRequest), чтобы динамично заполнять страницу.
+> [!WARNING]
+> Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как [XMLHttpRequest](/ru/docs/nsIXMLHttpRequest), чтобы динамично заполнять страницу.
 
 <table>
   <tbody>
@@ -122,7 +127,8 @@ HTML-элемент `<a>` определяет гиперссылку для п
 - `datasrc` {{Non-standard_inline}}
   - : Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.
 
-> **Предупреждение:** Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как [XMLHttpRequest](/ru/docs/nsIXMLHttpRequest), чтобы динамично заполнять страницу.
+> [!WARNING]
+> Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как [XMLHttpRequest](/ru/docs/nsIXMLHttpRequest), чтобы динамично заполнять страницу.
 
 <table>
   <tbody>
diff --git a/files/ru/web/html/element/address/index.md b/files/ru/web/html/element/address/index.md
index acc9ce423903e3..a02bffed241066 100644
--- a/files/ru/web/html/element/address/index.md
+++ b/files/ru/web/html/element/address/index.md
@@ -7,12 +7,6 @@ slug: Web/HTML/Element/address
 
 **HTML- тег `<address>`** задаёт контактные данные для ближайшего родительского {{HTMLElement("article")}} или {{HTMLElement("body")}} ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.
 
-> **Примечание:**
->
-> - Для представления адреса, который не является контактной информацией, воспользуйтесь {{HTMLElement("p")}} элементом.
-> - Данный тег не должен содержать любой другой информации, кроме контактной. (пример: дата публикации - относится к {{HTMLElement("time")}} тегу ).
-> - Обычно тег \<address> размещается внутри тега {{HTMLElement("footer")}} текущего блока, если есть хотя бы один.
-
 | [Категории контента](/ru/docs/HTML/Content_categories) | [Основной поток](/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA), palpable content.                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Разрешённый контент                                    | [Основной поток](/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA), но без вложенного элемента \<address>, без элементов заголовка ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), без секционного контента ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}) и без {{HTMLElement("header")}} или {{HTMLElement("footer")}} элементов. |
diff --git a/files/ru/web/html/element/area/index.md b/files/ru/web/html/element/area/index.md
index bc612a6bc103a8..a29a7a438958f0 100644
--- a/files/ru/web/html/element/area/index.md
+++ b/files/ru/web/html/element/area/index.md
@@ -37,7 +37,6 @@ slug: Web/HTML/Element/area
   - : 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.
 - `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.
 - `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.
diff --git a/files/ru/web/html/element/audio/index.md b/files/ru/web/html/element/audio/index.md
index e0e8569088d081..e2620437265112 100644
--- a/files/ru/web/html/element/audio/index.md
+++ b/files/ru/web/html/element/audio/index.md
@@ -41,7 +41,8 @@ slug: Web/HTML/Element/audio
 
 - `autoplay`
   - : Атрибут логического типа. Если он указан, аудио начнёт автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла.
-    > **Примечание:** Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.
+    > [!NOTE]
+    > Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.
 - `controls`
   - : Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.
 - `crossorigin`
@@ -61,7 +62,7 @@ slug: Web/HTML/Element/audio
     - `auto`: указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;
     - _пустая строка_: синоним значения `auto`.Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение `metadata`.
 
-      > **Примечание:**
+      > [!NOTE]
       >
       > - Атрибут `autoplay` имеет приоритет над `preload`. Если `autoplay` указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.
       > - Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.
diff --git a/files/ru/web/html/element/bdi/index.md b/files/ru/web/html/element/bdi/index.md
index 2b33d33b46380d..bf698961ff1ec9 100644
--- a/files/ru/web/html/element/bdi/index.md
+++ b/files/ru/web/html/element/bdi/index.md
@@ -11,7 +11,8 @@ slug: Web/HTML/Element/bdi
 
 Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.
 
-> **Примечание:** Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}`: isolate` к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента `<bdi>`. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML-элемента, и некорректно при использовании только CSS стилей.
+> [!NOTE]
+> Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}`: isolate` к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента `<bdi>`. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML-элемента, и некорректно при использовании только CSS стилей.
 
 | [Content categories](/ru/docs/HTML/Content_categories) | [Flow content](/ru/docs/HTML/Content_categories#Flow_content), [phrasing content](/ru/docs/HTML/Content_categories#Phrasing_content), palpable content. |
 | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/ru/web/html/element/br/index.md b/files/ru/web/html/element/br/index.md
index 8e8322ce3bf73e..77cacc0bf41106 100644
--- a/files/ru/web/html/element/br/index.md
+++ b/files/ru/web/html/element/br/index.md
@@ -11,7 +11,8 @@ slug: Web/HTML/Element/br
 
 Как мы видим из примера выше, элемент `<br>` поставлен в том месте, где мы хотим перенести строку. Текст после `<br>` начинается со следующей строки текстового блока.
 
-> **Примечание:** Не используйте **`<br>`** для увеличения разрыва между строками в тексте; используйте [CSS](/ru/docs/Web/CSS)-свойство {{cssxref('margin')}} элемента {{HTMLElement("p")}}.
+> [!NOTE]
+> Не используйте **`<br>`** для увеличения разрыва между строками в тексте; используйте [CSS](/ru/docs/Web/CSS)-свойство {{cssxref('margin')}} элемента {{HTMLElement("p")}}.
 
 ## Атрибуты
 
diff --git a/files/ru/web/html/element/caption/index.md b/files/ru/web/html/element/caption/index.md
index 0f612e42278c47..598f734d689b47 100644
--- a/files/ru/web/html/element/caption/index.md
+++ b/files/ru/web/html/element/caption/index.md
@@ -33,7 +33,6 @@ slug: Web/HTML/Element/caption
       - : Заголовок отображается справа от таблицы.
     - `bottom`
       - : Заголовок отображается под таблицей.
-        > **Примечание:** Не используйте этот атрибут, так как он устарел. Элемент {{HTMLElement("caption")}} должен быть стилизован с использованием свойств [CSS](/ru/docs/CSS) {{cssxref("caption-side")}} и{{cssxref("text-align")}}.
 
 ## Примечание к использованию
 
diff --git a/files/ru/web/html/element/cite/index.md b/files/ru/web/html/element/cite/index.md
index 45ce6ad8b5f8de..70a217bf486ce5 100644
--- a/files/ru/web/html/element/cite/index.md
+++ b/files/ru/web/html/element/cite/index.md
@@ -9,7 +9,7 @@ slug: Web/HTML/Element/cite
 
 **HTML-элемент \<cite>** (_от англ. Citation_) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращённом виде в соответствии с правилами, используемых для добавления метаданных цитирования.
 
-> **Примечание:**
+> [!NOTE]
 >
 > - Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчёт, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.
 > - Спецификация W3C утверждает, что ссылка на творческую работу может содержать имя автора, в то время, как WHATWG заявляет, что она не может включать имя человека ни в коем случае.
diff --git a/files/ru/web/html/element/col/index.md b/files/ru/web/html/element/col/index.md
index c2e6aa6edc9d87..7491fa946e4c3d 100644
--- a/files/ru/web/html/element/col/index.md
+++ b/files/ru/web/html/element/col/index.md
@@ -35,7 +35,8 @@ l10n:
 
     If this attribute is not set, its value is inherited from the [`align`](/ru/docs/Web/HTML/Element/colgroup#align) of the {{HTMLElement("colgroup")}} element this `<col>` element belongs too. If there are none, the `left` value is assumed.
 
-    > **Примечание:** Чтобы достичь того же эффекта, что и значения `left`, `center`, `right` или `justify`, не пытайтесь установить свойство {{cssxref("text-align")}} для селектора, задающего элемент `<col>`. Поскольку элементы {{HTMLElement("td")}} не являются потомками элемента `<col>`, они не унаследуют его.
+    > [!NOTE]
+    > Чтобы достичь того же эффекта, что и значения `left`, `center`, `right` или `justify`, не пытайтесь установить свойство {{cssxref("text-align")}} для селектора, задающего элемент `<col>`. Поскольку элементы {{HTMLElement("td")}} не являются потомками элемента `<col>`, они не унаследуют его.
     >
     > Если таблица не использует атрибут [`colspan`](/ru/docs/Web/HTML/Element/td#colspan), используйте CSS-селектор `td:n-й дочерний элемент(an+b)`. Установите `a` равным нулю, а `b` - положению столбца в таблице, например `td:nth-child(2) { text-align: right; }`, чтобы выровнять второй столбец по правому краю.
     >
@@ -60,7 +61,8 @@ l10n:
     - `middle`, помещает текст по центру ячейки
     - и `top`, помещает текст как можно ближе к верхней части ячейки, насколько это возможно;
 
-    > **Примечание:** Не пытайтесь установить свойство {{cssxref("выравнивание по вертикали")}} для селектора, дающего элемент `<col>`. Поскольку элементы {{HTMLElement("td")}} не являются потомками элемента `<col>`, они не унаследуют его.
+    > [!NOTE]
+    > Не пытайтесь установить свойство {{cssxref("выравнивание по вертикали")}} для селектора, дающего элемент `<col>`. Поскольку элементы {{HTMLElement("td")}} не являются потомками элемента `<col>`, они не унаследуют его.
     >
     > Если таблица не использует атрибут [`colspan`](/ru/docs/Web/HTML/Element/td#colspan), используйте CSS-селектор `td:nth-child(an+b)`, где 'a' - общее количество столбцов в таблице, а 'b' - порядковый номер положение столбца в таблице. Только после этого выбора можно использовать свойство `выравнивание по вертикали`.
     >
diff --git a/files/ru/web/html/element/dfn/index.md b/files/ru/web/html/element/dfn/index.md
index 59b9b31ff3792b..a2f0a4ca8ee6ab 100644
--- a/files/ru/web/html/element/dfn/index.md
+++ b/files/ru/web/html/element/dfn/index.md
@@ -35,7 +35,8 @@ slug: Web/HTML/Element/dfn
 2. Если объект `<dfn>` содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является {{HTMLElement("abbr")}} элементом с атрибутом `title`, то строго значение `title` `<abbr>` элемента является определяемым термином.
 3. В противном случае текстовое содержимое `<dfn>` элемента является определяемым термином. Это показано [в примере ниже](#базовая_идентификация_термина).
 
-> **Примечание:** Если `<dfn>` элемент имеет атрибут `title`, он _должен_ содержать определяемый термин и никакой другой текст.
+> [!NOTE]
+> Если `<dfn>` элемент имеет атрибут `title`, он _должен_ содержать определяемый термин и никакой другой текст.
 
 ### Ссылки на `<dfn>` элементы
 
diff --git a/files/ru/web/html/element/div/index.md b/files/ru/web/html/element/div/index.md
index 9be6f1a063aaea..d3f146b7e605cb 100644
--- a/files/ru/web/html/element/div/index.md
+++ b/files/ru/web/html/element/div/index.md
@@ -23,7 +23,8 @@ slug: Web/HTML/Element/div
 
 К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты).
 
-> **Примечание:** Атрибут `align` устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства {{glossary("CSS")}} или методы, такие как [CSS Grid](/ru/docs/Web/CSS/CSS_Grid_Layout) или [CSS Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox) для выравнивания и изменения положения элементов `<div>` на странице.
+> [!NOTE]
+> Атрибут `align` устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства {{glossary("CSS")}} или методы, такие как [CSS Grid](/ru/docs/Web/CSS/CSS_Grid_Layout) или [CSS Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox) для выравнивания и изменения положения элементов `<div>` на странице.
 
 ## Примечание
 
diff --git a/files/ru/web/html/element/embed/index.md b/files/ru/web/html/element/embed/index.md
index 7bb454e79c1374..508c6a94b2ce96 100644
--- a/files/ru/web/html/element/embed/index.md
+++ b/files/ru/web/html/element/embed/index.md
@@ -9,7 +9,8 @@ HTML-элемент **`<embed>`** встраивает внешнее содер
 
 {{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}
 
-> **Примечание:** Этот раздел посвящён только элементу, который является частью стандарта [HTML Living Standard](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element), и не относится к ранним, нестандартизированным его реализациям.
+> [!NOTE]
+> Этот раздел посвящён только элементу, который является частью стандарта [HTML Living Standard](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element), и не относится к ранним, нестандартизированным его реализациям.
 
 Следует иметь в виду, что большинство современных браузеров прекратили поддержку плагинов. Поэтому использование `<embed>` не рекомендуется, если необходима одинаковая работа сайта для большинства пользователей.
 
diff --git a/files/ru/web/html/element/fieldset/index.md b/files/ru/web/html/element/fieldset/index.md
index c68a3a96026c28..fadd253f053acf 100644
--- a/files/ru/web/html/element/fieldset/index.md
+++ b/files/ru/web/html/element/fieldset/index.md
@@ -21,7 +21,8 @@ slug: Web/HTML/Element/fieldset
   - : Этот атрибут принимает значение атрибута `id` элемента {{HTMLElement("form")}}, с которой вам нужно связать `<fieldset>`, даже если он находится вне формы.
 - `name`
   - : Имя, связанное с группой.
-    > **Примечание:** Заголовок для \<fieldset> устанавливается первым {{HTMLElement("legend")}} внутри него.
+    > [!NOTE]
+    > Заголовок для \<fieldset> устанавливается первым {{HTMLElement("legend")}} внутри него.
 
 ## Стилизация с CSS
 
diff --git a/files/ru/web/html/element/font/index.md b/files/ru/web/html/element/font/index.md
index 5867d57e50e2bc..89c1b6570283b1 100644
--- a/files/ru/web/html/element/font/index.md
+++ b/files/ru/web/html/element/font/index.md
@@ -9,7 +9,8 @@ l10n:
 
 HTML-элемент **`<font>`** определяет размер шрифта, цвет и начертание для своего содержимого.
 
-> **Примечание:** Не используйте этот элемент. Стилизовать текст следует с помощью [CSS-свойств](/ru/docs/Web/CSS/CSS_fonts).
+> [!NOTE]
+> Не используйте этот элемент. Стилизовать текст следует с помощью [CSS-свойств](/ru/docs/Web/CSS/CSS_fonts).
 
 ## Атрибуты
 
diff --git a/files/ru/web/html/element/form/index.md b/files/ru/web/html/element/form/index.md
index b719c0f3e57b1b..4c09ebadf6ce34 100644
--- a/files/ru/web/html/element/form/index.md
+++ b/files/ru/web/html/element/form/index.md
@@ -17,7 +17,8 @@ HTML-элемент **`<form>`** представляет раздел доку
 
 - `accept`
   - : Список типов содержимого, разделённых запятой, которые принимает сервер.
-    > **Примечание:** Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте [`accept`](/ru/docs/Web/HTML/Element/input#accept) атрибут заданного {{HTMLElement("input")}} элемента.
+    > [!NOTE]
+    > Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте [`accept`](/ru/docs/Web/HTML/Element/input#accept) атрибут заданного {{HTMLElement("input")}} элемента.
 - `accept-charset`
   - : Разделённые пробелами [символьные кодировки](/ru/docs/Web/Guide/Localizations_and_character_encodings), которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает [ту же кодировку что и у страницы](/ru/docs/Web/HTTP/Headers/Content-Encoding).
     (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)
diff --git a/files/ru/web/html/element/heading_elements/index.md b/files/ru/web/html/element/heading_elements/index.md
index 89ecc779501fe8..d7819f28f8420b 100644
--- a/files/ru/web/html/element/heading_elements/index.md
+++ b/files/ru/web/html/element/heading_elements/index.md
@@ -71,7 +71,8 @@ l10n:
 
 Использование нескольких элементов `<h1>` на одной странице разрешено стандартом HTML (если они не [вложены друг в друга](#вложенность)), но это считается плохой практикой. Хорошо, когда на странице есть единственный элемент `<h1>`, который описывает содержимое этой страницы (по аналогии с элементом [`<title>`](/ru/docs/Web/HTML/Element/title)).
 
-> **Примечание:** Использование нескольких элементов `<h1>` во вложенных [элементах разделов](/ru/docs/Web/HTML/Element#секционирование_содержания) было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье [There Is No Document Outline Algorithm](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html).
+> [!NOTE]
+> Использование нескольких элементов `<h1>` во вложенных [элементах разделов](/ru/docs/Web/HTML/Element#секционирование_содержания) было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье [There Is No Document Outline Algorithm](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html).
 
 Старайтесь использовать один элемент `<h1>` на странице и [вложенные заголовки](#вложенность) без пропуска уровней.
 
diff --git a/files/ru/web/html/element/img/index.md b/files/ru/web/html/element/img/index.md
index db5daed05a81e2..f397a7434d5f69 100644
--- a/files/ru/web/html/element/img/index.md
+++ b/files/ru/web/html/element/img/index.md
@@ -58,8 +58,10 @@ slug: Web/HTML/Element/img
 
 - `alt`
   - : Этим атрибутом задаётся альтернативное текстовое описание изображения.
-    > **Примечание:** Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или [неподдерживаемый тип](#Supported_image_formats). В этих случаях браузер может заменить изображение текстом записанным в атрибуте `alt` элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте `alt`.
-    > **Примечание:** Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (`alt=""`) указывает, что это изображение _не_ является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.
+    > [!NOTE]
+    > Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или [неподдерживаемый тип](#Supported_image_formats). В этих случаях браузер может заменить изображение текстом записанным в атрибуте `alt` элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте `alt`.
+    > [!NOTE]
+    > Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (`alt=""`) указывает, что это изображение _не_ является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.
 - `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)" и его использование будет ограничено;
@@ -80,12 +82,14 @@ slug: Web/HTML/Element/img
   - : Этот атрибут говорит браузеру игнорировать действительный {{glossary("Intrinsic size", "внутренний размер")}} изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а `narutalWidth`/`naturalHeight` изображения будут возвращать значения, указанные в этом атрибуте. [Объяснение](https://github.com/ojanvafai/intrinsicsize-attribute), [примеры](https://googlechrome.github.io/samples/intrinsic-size/index.html).
 - `ismap`
   - : Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.
-    > **Примечание:** Этот атрибут разрешён, только если элемент `<img>` является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом [`href`](/ru/docs/Web/HTML/Element/a#href).
+    > [!NOTE]
+    > Этот атрибут разрешён, только если элемент `<img>` является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом [`href`](/ru/docs/Web/HTML/Element/a#href).
 - `loading` {{experimental_inline}}
   - : Указывает на то, как браузер должен загрузить изображение:
     - `eager`: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).
     - `lazy`: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.
-      > **Примечание:** Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.
+      > [!NOTE]
+      > Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.
 - `referrerpolicy` {{experimental_inline}}
   - : Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:
     - `no-referrer`: Заголовок {{httpheader("Referer")}} не будет отправлен;
@@ -108,7 +112,8 @@ slug: Web/HTML/Element/img
   - : Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.
 - `usemap`
   - : Неполный {{glossary("URL")}} (начиная с '`#`') [карты-изображения](/ru/docs/Web/HTML/Element/map), связанной с элементом.
-    > **Примечание:** вы не можете использовать этот атрибут, если элемент `<img>` является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.
+    > [!NOTE]
+    > Вы не можете использовать этот атрибут, если элемент `<img>` является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.
 
 ### Устаревшие атрибуты
 
@@ -125,7 +130,8 @@ slug: Web/HTML/Element/img
   - : Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.
 - `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).
+    > [!NOTE]
+    > Этот атрибут упомянут в последней версии от {{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).
 - `name`
   - : Имя для элемента. Вы должны использовать атрибут [`id`](/ru/docs/Web/HTML/Global_attributes#id) вместо этого атрибута.
 - `vspace`