diff --git a/tools/mathml/demos/einstein/index.html b/tools/mathml/demos/einstein/index.html
new file mode 100644
index 0000000000..800cf35997
--- /dev/null
+++ b/tools/mathml/demos/einstein/index.html
@@ -0,0 +1,78 @@
+
+
+
+ Формула Эйнштейна — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
Формула Эйнштейна
+
+
+ E
+ =
+ m
+
+ c
+ 2
+
+
+
+
+
diff --git a/tools/mathml/demos/menclose/index.html b/tools/mathml/demos/menclose/index.html
new file mode 100644
index 0000000000..9ee46b2c54
--- /dev/null
+++ b/tools/mathml/demos/menclose/index.html
@@ -0,0 +1,74 @@
+
+
+
+ Пример menclose элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ +
+ y
+
+
+
+
+
diff --git a/tools/mathml/demos/mfrac/index.html b/tools/mathml/demos/mfrac/index.html
new file mode 100644
index 0000000000..c79ca29d8b
--- /dev/null
+++ b/tools/mathml/demos/mfrac/index.html
@@ -0,0 +1,73 @@
+
+
+
+ Пример дроби — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ a
+ b
+
+
+
+
+
diff --git a/tools/mathml/demos/mi1/index.html b/tools/mathml/demos/mi1/index.html
new file mode 100644
index 0000000000..3ce3682f5e
--- /dev/null
+++ b/tools/mathml/demos/mi1/index.html
@@ -0,0 +1,70 @@
+
+
+
+ Пример mi элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+
+
+
+
diff --git a/tools/mathml/demos/mi2/index.html b/tools/mathml/demos/mi2/index.html
new file mode 100644
index 0000000000..821dcb8159
--- /dev/null
+++ b/tools/mathml/demos/mi2/index.html
@@ -0,0 +1,70 @@
+
+
+
+ Пример mi элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+ sin
+
+
+
+
diff --git a/tools/mathml/demos/mn/index.html b/tools/mathml/demos/mn/index.html
new file mode 100644
index 0000000000..5eb0dc4184
--- /dev/null
+++ b/tools/mathml/demos/mn/index.html
@@ -0,0 +1,70 @@
+
+
+
+ Пример mn элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+ 67
+
+
+
+
diff --git a/tools/mathml/demos/mo/index.html b/tools/mathml/demos/mo/index.html
new file mode 100644
index 0000000000..e419a28a0b
--- /dev/null
+++ b/tools/mathml/demos/mo/index.html
@@ -0,0 +1,72 @@
+
+
+
+ Пример mo элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ +
+ 1
+
+
+
+
diff --git a/tools/mathml/demos/mphantom/index.html b/tools/mathml/demos/mphantom/index.html
new file mode 100644
index 0000000000..4e63fbaf6c
--- /dev/null
+++ b/tools/mathml/demos/mphantom/index.html
@@ -0,0 +1,74 @@
+
+
+
+ Пример mphantom элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ +
+
+ y
+
+
+
+
+
diff --git a/tools/mathml/demos/mroot/index.html b/tools/mathml/demos/mroot/index.html
new file mode 100644
index 0000000000..0ae82c8b1b
--- /dev/null
+++ b/tools/mathml/demos/mroot/index.html
@@ -0,0 +1,73 @@
+
+
+
+ Пример кубического корня — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ 3
+
+
+
+
+
diff --git a/tools/mathml/demos/mrow/index.html b/tools/mathml/demos/mrow/index.html
new file mode 100644
index 0000000000..9b99ffb269
--- /dev/null
+++ b/tools/mathml/demos/mrow/index.html
@@ -0,0 +1,81 @@
+
+
+
+ Пример группировки — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ a
+ +
+ b
+
+
+ c
+ +
+ d
+
+
+
+
+
+
diff --git a/tools/mathml/demos/mspace/index.html b/tools/mathml/demos/mspace/index.html
new file mode 100644
index 0000000000..c89c136652
--- /dev/null
+++ b/tools/mathml/demos/mspace/index.html
@@ -0,0 +1,72 @@
+
+
+
+ Пример mspace элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+
+ y
+
+
+
+
diff --git a/tools/mathml/demos/msqrt1/index.html b/tools/mathml/demos/msqrt1/index.html
new file mode 100644
index 0000000000..80053d99dd
--- /dev/null
+++ b/tools/mathml/demos/msqrt1/index.html
@@ -0,0 +1,72 @@
+
+
+
+ Первый пример квадратного корня — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+
+
+
+
+
diff --git a/tools/mathml/demos/msqrt2/index.html b/tools/mathml/demos/msqrt2/index.html
new file mode 100644
index 0000000000..cd21a64ec5
--- /dev/null
+++ b/tools/mathml/demos/msqrt2/index.html
@@ -0,0 +1,79 @@
+
+
+
+ Второй пример квадратного корня — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ 2
+
+ +
+ 1
+
+
+
+
+
+
diff --git a/tools/mathml/demos/msub/index.html b/tools/mathml/demos/msub/index.html
new file mode 100644
index 0000000000..51750ae44b
--- /dev/null
+++ b/tools/mathml/demos/msub/index.html
@@ -0,0 +1,73 @@
+
+
+
+ Пример индекса — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ a
+ 1
+
+
+
+
+
diff --git a/tools/mathml/demos/msubsup/index.html b/tools/mathml/demos/msubsup/index.html
new file mode 100644
index 0000000000..9d8975881e
--- /dev/null
+++ b/tools/mathml/demos/msubsup/index.html
@@ -0,0 +1,74 @@
+
+
+
+ Пример индекса и степени — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ 1
+ 2
+
+
+
+
+
diff --git a/tools/mathml/demos/msup/index.html b/tools/mathml/demos/msup/index.html
new file mode 100644
index 0000000000..dfcb7ddbee
--- /dev/null
+++ b/tools/mathml/demos/msup/index.html
@@ -0,0 +1,73 @@
+
+
+
+ Пример степени — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ 2
+
+
+
+
+
diff --git a/tools/mathml/demos/mtable/index.html b/tools/mathml/demos/mtable/index.html
new file mode 100644
index 0000000000..b7a9ba65a4
--- /dev/null
+++ b/tools/mathml/demos/mtable/index.html
@@ -0,0 +1,79 @@
+
+
+
+ Пример матрицы — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+
+
+ 3
+ 4
+
+
+
+
+
+
diff --git a/tools/mathml/demos/mtext/index.html b/tools/mathml/demos/mtext/index.html
new file mode 100644
index 0000000000..46f9dce5a9
--- /dev/null
+++ b/tools/mathml/demos/mtext/index.html
@@ -0,0 +1,73 @@
+
+
+
+ Пример mtext элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+ v
+ =
+ 60
+ км/ч
+
+
+
+
diff --git a/tools/mathml/demos/munderover/index.html b/tools/mathml/demos/munderover/index.html
new file mode 100644
index 0000000000..d0bd200016
--- /dev/null
+++ b/tools/mathml/demos/munderover/index.html
@@ -0,0 +1,78 @@
+
+
+
+ Пример верхней и нижней записи — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ∑
+
+ i
+ =
+ 1
+
+ n
+
+
+
+
+
diff --git a/tools/mathml/demos/pythagoras/index.html b/tools/mathml/demos/pythagoras/index.html
new file mode 100644
index 0000000000..f9d325ce69
--- /dev/null
+++ b/tools/mathml/demos/pythagoras/index.html
@@ -0,0 +1,85 @@
+
+
+
+ Формула Пифагора — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
Формула Пифагора
+
+
+
+ a
+ 2
+
+ +
+
+ b
+ 2
+
+ =
+
+ c
+ 2
+
+
+
+
+
diff --git a/tools/mathml/demos/quadequ/index.html b/tools/mathml/demos/quadequ/index.html
new file mode 100644
index 0000000000..1f24f5fe96
--- /dev/null
+++ b/tools/mathml/demos/quadequ/index.html
@@ -0,0 +1,98 @@
+
+
+
+ Корни квадратного уравнения — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
Корни квадратного уравнения
+
+
+ x
+ =
+
+
+ (
+ -
+ b
+ ±
+
+
+
+ b
+ 2
+
+ -
+ 4
+ a
+ c
+
+
+ )
+
+
+ 2
+ a
+
+
+
+
+
+
diff --git a/tools/mathml/demos/semantics/index.html b/tools/mathml/demos/semantics/index.html
new file mode 100644
index 0000000000..6dd80e2483
--- /dev/null
+++ b/tools/mathml/demos/semantics/index.html
@@ -0,0 +1,73 @@
+
+
+
+ Пример semantics элемента — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
+
+ x
+ Переменная x
+
+
+
+
+
diff --git a/tools/mathml/demos/simple/index.html b/tools/mathml/demos/simple/index.html
new file mode 100644
index 0000000000..fcb23d832b
--- /dev/null
+++ b/tools/mathml/demos/simple/index.html
@@ -0,0 +1,74 @@
+
+
+
+ Простая формула — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
Простейшая формула
+
+
+ x
+ +
+ 5
+
+
+
+
diff --git a/tools/mathml/demos/style/index.html b/tools/mathml/demos/style/index.html
new file mode 100644
index 0000000000..a80a8ecd75
--- /dev/null
+++ b/tools/mathml/demos/style/index.html
@@ -0,0 +1,86 @@
+
+
+
+ Стилизация формулы — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
Формула Эйнштейна
+
+
+ E
+ =
+ m
+
+ c
+ 2
+
+
+
+
+
diff --git a/tools/mathml/demos/tylor/index.html b/tools/mathml/demos/tylor/index.html
new file mode 100644
index 0000000000..f25038fafc
--- /dev/null
+++ b/tools/mathml/demos/tylor/index.html
@@ -0,0 +1,112 @@
+
+
+
+ Формула Тейлора — MathML — Дока
+
+
+
+
+
+
+
+
+
+
+
+
Формула Тейлора
+
+
+ f
+ ( x )
+ =
+
+ ∑
+
+ n
+ =
+ 0
+
+ ∞
+
+
+
+
+ f
+
+ (
+ n
+ )
+
+
+ (
+ a
+ )
+
+
+ n
+ !
+
+
+
+
+ (
+ x
+ -
+ a
+ )
+
+ n
+
+
+
+
+
diff --git a/tools/mathml/index.md b/tools/mathml/index.md
new file mode 100644
index 0000000000..22b50f4b3d
--- /dev/null
+++ b/tools/mathml/index.md
@@ -0,0 +1,1007 @@
+---
+title: "MathML — язык для математических формул в браузере"
+description: "Разбираемся, что такое MathML, зачем он нужен, как писать математические формулы прямо в HTML и когда он может заменить KaTeX и MathJax."
+authors:
+ - drakesbot12
+keywords:
+ - mathml
+ - equations
+ - mathematics
+ - formula
+ - mathjax
+ - katex
+related:
+ - html/details
+ - html/span
+ - css/display
+tags:
+ - article
+---
+
+## Что такое MathML и зачем он нужен
+
+Когда на сайте нужно показать математическую формулу, разработчики обычно используют изображения, `KaTeX`, `MathJax` или пишут формулы в синтаксисе `LaTeX`. Однако браузеры умеют отображать математические выражения самостоятельно благодаря технологии `MathML`.
+
+`MathML` (*Mathematical Markup Language*) — это язык разметки для описания математических формул. Он входит в семейство веб-стандартов W3C и позволяет создавать дроби, степени, индексы, корни, матрицы, интегралы и другие математические конструкции прямо в HTML-документе.
+
+В отличие от изображения, формула в `MathML` остаётся полноценной частью страницы. Браузер понимает её структуру, поэтому текст формулы можно выделять, копировать, масштабировать без потери качества и корректно озвучивать с помощью программ экранного доступа.
+
+## Почему раньше использовали картинки
+
+Долгое время поддержка `MathML` в браузерах была неполной и нестабильной. Из-за этого математические выражения часто сохраняли в виде изображений:
+
+```html
+
+```
+
+Такой подход был простым, но имел множество недостатков:
+- формулы размывались при увеличении;
+- их нельзя было выделить и скопировать;
+- поисковые системы не понимали содержимое формулы;
+- возникали проблемы с доступностью для пользователей скринридеров;
+- приходилось создавать отдельное изображение для каждой формулы.
+
+Позже появились библиотеки вроде `MathJax` и `KaTeX`, которые позволяли писать формулы в привычном синтаксисе `LaTeX` и автоматически преобразовывали их для отображения в браузере.
+
+## Чем MathML отличается от LaTeX
+
+Новички часто путают `MathML` и `LaTeX`, хотя это разные технологии.
+
+`LaTeX` — это язык подготовки документов и записи математических формул. Например, квадратное уравнение в `LaTeX` может выглядеть так:
+
+```latex
+x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+```
+
+`MathML` описывает ту же формулу с помощью XML-подобной разметки:
+
+```html
+
+ x
+ =
+ ...
+
+```
+
+Главное отличие заключается в том, что `LaTeX` ориентирован на удобство написания человеком, а `MathML` — на структурированное описание формулы для браузеров и других программ.
+
+На практике многие инструменты автоматически преобразуют `LaTeX` в `MathML`, поэтому разработчику не всегда приходится писать `MathML` вручную.
+
+## Поддержка браузеров
+
+Исторически именно поддержка браузеров была главным препятствием для распространения `MathML`. Некоторые браузеры отображали формулы корректно, другие поддерживали лишь часть возможностей, а где-то технология вовсе отсутствовала.
+
+Ситуация изменилась с появлением стандарта `MathML Core`. Сегодня современные версии Chrome, Edge, Firefox и Safari поддерживают основные возможности `MathML` без дополнительных библиотек и полифилов.
+
+Это означает, что простые и даже достаточно сложные математические формулы можно вставлять прямо в HTML и рассчитывать на корректное отображение у большинства пользователей.
+
+## Что такое MathML Core
+
+Изначально спецификация `MathML` была очень большой и содержала множество возможностей, которые браузеры реализовывали по-разному или не поддерживали вовсе. Из-за этого разработчики долгое время не могли рассчитывать на одинаковое отображение формул во всех браузерах.
+
+Чтобы решить эту проблему, была создана спецификация `MathML Core`.
+
+`MathML Core` — это современный поднабор `MathML`, который включает наиболее востребованные элементы и определяет единые правила их отображения. Именно на эту спецификацию ориентируются современные браузеры.
+
+Благодаря появлению `MathML Core` поддержка математических формул стала более предсказуемой и совместимой между различными браузерами. В частности, полноценная реализация `MathML Core` появилась в Chrome и браузерах на базе Chromium, что стало важным шагом для распространения технологии в веб-разработке.
+
+Сегодня большинство элементов, используемых для создания дробей, корней, степеней, индексов, матриц и других распространённых математических конструкций, входят в `MathML Core` и поддерживаются современными версиями Chrome, Edge, Firefox и Safari.
+
+Если в документации или статьях упоминается поддержка `MathML` в современных браузерах, чаще всего речь идёт именно о поддержке стандарта `MathML Core`.
+
+## Где используется MathML сегодня
+
+Несмотря на то что многие проекты продолжают использовать `KaTeX` или `MathJax`, `MathML` постепенно возвращается в веб-разработку благодаря улучшенной поддержке браузеров.
+
+Его можно встретить:
+- в электронных учебниках и образовательных платформах;
+- в научных публикациях и исследовательских проектах;
+- в технической документации;
+- в системах компьютерной алгебры;
+- в приложениях для изучения математики и физики;
+- в генераторах формул и редакторах математических выражений.
+
+Особенно полезен `MathML` там, где важны доступность, семантика и возможность работать с формулой как с обычным содержимым страницы, а не как с картинкой.
+
+## Как выглядит MathML-документ
+
+Простейшая структура формулы выглядит так:
+
+```html
+
+ x
+ +
+ 5
+
+```
+
+
+
+Внутри MathML каждый элемент отвечает за свою часть математического выражения:
+
+- `` — корневой элемент, внутри которого располагается вся формула;
+- `` (*Math Identifier*) — переменная или математический идентификатор, например `x`, `y` или `sin`;
+- `` (*Math Operator*) — математический оператор, например `+,` `−`, `=`, `×` или `∑`;
+- `` (*Math Number*) — число.
+
+Такой подход позволяет браузеру понимать структуру формулы, а не просто отображать набор символов. Благодаря этому математические выражения корректно озвучиваются скринридерами, масштабируются вместе со страницей и остаются доступными для копирования и обработки.
+
+## Из чего состоят формулы
+
+Любая формула в `MathML` собирается из небольших элементов, каждый из которых отвечает за определённый тип содержимого: переменные, числа, операторы или обычный текст. Чаще всего для этого используются четыре базовых контейнера.
+
+### Текстовые контейнеры
+#### `` — математический идентификатор
+
+Элемент `` используется для переменных, названий функций и других математических обозначений.
+
+```html
+
+ x
+
+```
+
+
+
+Обычно внутри `` находится одна буква, но можно использовать и несколько символов:
+
+```html
+
+ sin
+
+```
+
+
+
+#### `` — число
+
+Элемент `` предназначен для чисел.
+
+```html
+
+ 67
+
+```
+
+
+
+Можно использовать целые числа, дроби, десятичные значения и другие числовые записи.
+
+#### `` — оператор
+
+Элемент `` описывает математические операторы и специальные символы.
+
+```html
+
+ x
+ +
+ 1
+
+```
+
+
+
+Через `` обычно записывают:
+- арифметические операции (`+`, `−`, `×`, `÷`);
+- знаки сравнения (`=`, `<`, `>`);
+- скобки;
+- символы суммирования (`∑`);
+- интегралы (`∫`) и другие специальные обозначения.
+
+#### `` — обычный текст
+
+Иногда внутри формулы нужно разместить пояснение или текстовую подпись. Для этого используется элемент .
+
+```html
+
+ v
+ =
+ 60
+ км/ч
+
+```
+
+
+
+Этот элемент полезен, когда формула содержит единицы измерения, комментарии или другие текстовые данные.
+
+### Группировка выражений
+
+Когда формула становится сложнее пары символов, возникает необходимость объединять несколько элементов в одну логическую группу. Для этого используется элемент ``. Он не влияет на внешний вид формулы напрямую, но помогает браузеру понять структуру выражения. Можно сказать, что `` играет роль скобок на уровне разметки. Например, дробь с суммой в числителе и знаменателе:
+
+```html
+
+
+
+ a
+ +
+ b
+
+
+ c
+ +
+ d
+
+
+
+```
+
+
+
+Без `` браузеру было бы сложнее определить, какие элементы относятся к числителю, а какие — к знаменателю.
+
+### Дроби и корни
+
+`MathML` содержит специальные элементы для математических конструкций, которые сложно выразить обычным текстом.
+
+#### Дроби
+
+Для создания дробей используется элемент ``. Первый дочерний элемент становится числителем, второй — знаменателем.
+
+```html
+
+
+ a
+ b
+
+
+```
+
+
+
+Внутри числителя и знаменателя можно размещать любые другие элементы MathML, включая степени, корни и даже другие дроби.
+
+#### Квадратный корень
+
+Для квадратного корня существует элемент ``.
+
+```html
+
+
+ x
+
+
+```
+
+
+
+Внутри корня может находиться как один элемент, так и целое выражение:
+
+```html
+
+
+
+
+ x
+ 2
+
+ +
+ 1
+
+
+
+```
+
+
+
+#### Корень произвольной степени
+
+Если нужен не квадратный корень, а корень произвольной степени, используется элемент ``.
+
+```html
+
+
+ x
+ 3
+
+
+```
+
+
+
+Так будет записан кубический корень из `x`. Первый дочерний элемент задаёт подкоренное выражение, второй — показатель корня.
+
+### Степени, индексы и пределы
+
+Одни из самых часто используемых элементов MathML отвечают за степени, индексы и различные математические обозначения над и под символами.
+
+#### Верхний индекс
+
+Элемент `` создаёт верхний индекс.
+
+```html
+
+
+ x
+ 2
+
+
+```
+
+
+
+Первый элемент задаёт основание, второй — показатель степени.
+
+#### Нижний индекс
+
+Для нижнего индекса используется ``.
+
+```html
+
+
+ a
+ 1
+
+
+```
+
+
+
+Такая запись часто используется в математике, физике и программировании.
+
+#### Индекс и степень одновременно
+
+Если нужны и нижний индекс, и степень, используется элемент ``.
+
+```html
+
+
+ x
+ 1
+ 2
+
+
+```
+
+
+
+Порядок дочерних элементов такой:
+- Основание.
+- Нижний индекс.
+- Верхний индекс.
+
+#### Суммы и пределы
+
+Для размещения элементов над и под символами используются специальные элементы:
+- `` — содержимое под символом;
+- `` — содержимое над символом;
+- `` — содержимое одновременно сверху и снизу.
+
+Например, математическая сумма:
+
+```html
+
+
+ ∑
+
+ i
+ =
+ 1
+
+ n
+
+
+```
+
+
+
+Получится привычная запись суммы от `i = 1` до `n`.
+Похожим образом можно оформлять пределы, произведения и другие математические операторы.
+
+### Матрицы и таблицы
+
+Для создания матриц и других табличных структур используются элементы:
+- `` — таблица;
+- `` — строка;
+- `` — ячейка.
+
+Простейшая матрица 2 × 2 выглядит так:
+
+```html
+
+
+
+ 1
+ 2
+
+
+ 3
+ 4
+
+
+
+```
+
+
+
+Структура очень похожа на HTML-таблицы:
+
+```bash
+mtable
+├── mtr
+│ ├── mtd
+│ └── mtd
+└── mtr
+ ├── mtd
+ └── mtd
+```
+
+На практике эти элементы используются не только для матриц, но и для систем уравнений, определителей и других математических конструкций, где требуется строгая табличная структура.
+
+## Стилизация формул
+
+`MathML` встроен в браузер и является частью DOM-дерева страницы. Это значит, что к математическим элементам можно применять CSS почти так же, как к обычным HTML-элементам. Например, изменить размер формулы:
+
+```css
+math {
+ font-size: 1.5rem;
+}
+```
+
+Изменить цвет:
+
+```css
+math {
+ color: crimson;
+}
+```
+
+Сделать отдельные части формулы другого цвета:
+
+```css
+mi {
+ color: dodgerblue;
+}
+```
+
+
+
+Также можно использовать привычные свойства:
+
+- [`font-size`](/css/font-size/);
+- [`color`](/css/color/);
+- [`background`](/css/background/);
+- [`margin`](/css/margin/);
+- [`padding`](/css/padding/);
+- [`display`](/css/display/).
+
+Для больших формул часто используют блочное отображение:
+
+```html
+
+ E
+ =
+ m
+
+ c
+ 2
+
+
+```
+
+
+
+
+По умолчанию формулы отображаются как строчные элементы и располагаются внутри текста. Атрибут `display="block"` переносит формулу на отдельную строку и центрирует её так же, как это принято в учебниках и научных статьях.
+
+Для длинных выражений полезно добавить:
+
+```css
+math {
+ overflow-x: auto;
+}
+```
+
+Тогда формула не выйдет за пределы экрана на мобильных устройствах.
+
+## Полезные элементы, о которых редко говорят
+
+Большинство формул можно собрать из десятка основных элементов, но в `MathML` есть и менее известные теги.
+
+### ``
+
+Создаёт дополнительный отступ.
+
+```html
+
+ x
+
+ y
+
+```
+
+
+
+Полезен, когда нужно вручную настроить расстояние между элементами.
+
+### ``
+
+Позволяет обводить выражение рамкой или другими декоративными элементами.
+
+
+
+ x
+ +
+ y
+
+
+
+
+
+Можно использовать разные варианты оформления: рамки, круги, диагональные линии и другие обозначения.
+
+
+
+⚠️ Поддержка данного тега ограничена, [см. CanIUse](https://caniuse.com/?search=menclose)
+
+
+
+### ``
+
+Создаёт невидимый элемент, который занимает место в формуле.
+
+```html
+
+ x
+ +
+
+ y
+
+
+```
+
+
+
+Часто применяется для выравнивания сложных математических выражений.
+
+### ``
+
+Позволяет хранить дополнительную информацию о формуле.
+
+```html
+
+
+ x
+ Переменная x
+
+
+```
+
+
+
+Обычно используется специализированными математическими редакторами и инструментами доступности.
+
+## Практические примеры
+
+Теперь попробуем собрать несколько известных формул шаг за шагом.
+
+### Формула Пифагора
+
+Итоговая формула выглядит так:
+
+
+
+**Шаг 1. Создаём левую часть:**
+
+```html
+
+
+ a
+ 2
+
+
+```
+**Шаг 2. Добавляем второе слагаемое:**
+
+```html
+
+
+ a
+ 2
+
+
+ +
+
+
+ b
+ 2
+
+
+```
+**Шаг 3. Добавляем знак равенства и правую часть:**
+
+```html
+
+
+ a
+ 2
+
+
+ +
+
+
+ b
+ 2
+
+
+ =
+
+
+ c
+ 2
+
+
+```
+
+### Квадратное уравнение
+
+Формула решения квадратного уравнения:
+
+
+
+**Шаг 1. Создаём левую часть:**
+
+```html
+
+ x
+ =
+
+```
+
+**Шаг 2. Добавляем дробь:**
+
+```html
+
+ x
+ =
+
+
+
+
+
+
+```
+
+**Шаг 3. Собираем знаменатель:**
+
+```html
+
+ 2
+ a
+
+```
+
+**Шаг 4. Добавляем корень:**
+
+```html
+
+ ...
+
+```
+
+**Шаг 5. Собираем выражение под корнем:**
+
+```html
+
+ b
+ 2
+
+
+-
+
+4
+a
+c
+```
+
+**Шаг 6. Получаем итоговую формулу:**
+
+```html
+
+ x
+ =
+
+
+
+ (
+ -
+ b
+ ±
+
+
+
+
+ b
+ 2
+
+
+ -
+
+ 4
+ a
+ c
+
+
+
+ )
+
+
+
+ 2
+ a
+
+
+
+```
+
+### Формула Тейлора
+
+Формула Тейлора показывает, как представить функцию в виде бесконечной суммы.
+
+
+
+**Шаг 1. Создаём функцию:**
+
+```html
+f
+(
+x
+)
+```
+
+**Шаг 2. Добавляем знак равенства:**
+
+```html
+=
+```
+
+**Шаг 3. Создаём знак суммы:**
+
+```html
+
+ ∑
+
+
+ n
+ =
+ 0
+
+
+ ∞
+
+```
+
+**Шаг 4. Добавляем дробь:**
+
+```html
+
+ ...
+
+```
+
+**Шаг 5. Добавляем степень:**
+
+```html
+
+
+ (
+ x
+ −
+ a
+ )
+
+
+ n
+
+```
+
+После объединения всех частей получится полноценная формула Тейлора:
+
+```html
+
+ f
+ ( x )
+ =
+
+
+ ∑
+
+ n
+ =
+ 0
+
+ ∞
+
+
+
+
+
+ f
+
+ (
+ n
+ )
+
+
+ (
+ a
+ )
+
+
+
+ n
+ !
+
+
+
+
+
+ (
+ x
+ −
+ a
+ )
+
+ n
+
+
+```
+
+### Формула Эйнштейна
+
+Самая известная формула физики:
+
+
+
+Собирается очень просто.
+
+**Шаг 1. Добавляем энергию:**
+
+```html
+E
+```
+
+**Шаг 2. Добавляем знак равенства:**
+
+```html
+=
+```
+
+**Шаг 3. Добавляем массу:**
+
+```html
+m
+```
+
+**Шаг 4. Добавляем скорость света в квадрате:**
+
+```html
+
+ c
+ 2
+
+```
+
+Итог:
+
+```html
+
+ E
+ =
+ m
+
+
+ c
+ 2
+
+
+```
+
+# MathML против KaTeX и MathJax
+
+
+
+
+ Возможность
+ MathML
+ KaTeX
+ MathJax
+
+
+
+
+ Встроен в браузер
+ ✅
+ ❌
+ ❌
+
+
+ Требует JavaScript
+ ❌
+ ✅
+ ✅
+
+
+ Поддержка LaTeX
+ Частично
+ ✅
+ ✅
+
+
+ Скорость работы
+ Очень высокая
+ Высокая
+ Средняя
+
+
+ Доступность
+ Отличная
+ Хорошая
+ Хорошая
+
+
+ Размер библиотеки
+ 0 КБ
+ Более сотни КБ
+ Более 1 МБ
+
+
+
+
+## Когда НЕ стоит использовать MathML
+
+Несмотря на множество преимуществ, `MathML` подходит не для всех задач. В некоторых случаях удобнее использовать другие решения.
+
+### Если весь контент уже написан в LaTeX
+
+Во многих образовательных платформах, научных публикациях и системах управления контентом формулы хранятся в формате `LaTeX`. Переписывать большое количество существующих формул на `MathML` обычно не имеет смысла.
+
+В таких ситуациях чаще используют инструменты, которые автоматически преобразуют `LaTeX` в `MathML` или отображают его с помощью `KaTeX` и `MathJax`.
+
+### Если нужен полный набор возможностей LaTeX
+
+Хотя `MathML` позволяет создавать очень сложные математические конструкции, экосистема `LaTeX` существует десятилетиями и включает огромное количество пакетов для научной и технической вёрстки.
+
+Если проект активно использует специфические возможности `LaTeX`, перенос на чистый `MathML` может оказаться неудобным или потребовать дополнительных инструментов.
+
+### Если требуется поддержка старых браузеров
+
+Современные браузеры хорошо поддерживают `MathML Core`, однако в старых версиях браузеров поддержка может быть неполной или отсутствовать вовсе.
+
+Если приложение должно одинаково работать в устаревших браузерах, может потребоваться использование `KaTeX`, `MathJax` или других решений с дополнительными механизмами совместимости.
+
+### Если пользователи вводят формулы самостоятельно
+
+Большинство людей знакомы с синтаксисом `LaTeX`, но редко пишут формулы вручную на `MathML`.
+
+Например, запись:
+
+```latex
+\frac{a+b}{c+d}
+```
+
+обычно воспринимается гораздо проще, чем эквивалентная запись на `MathML`.
+
+Поэтому в редакторах формул и пользовательских интерфейсах чаще позволяют вводить выражения в формате `LaTeX`, а затем автоматически преобразуют их в `MathML` для отображения.
+
+
+## Когда стоит использовать MathML
+
+`MathML` особенно хорошо подходит для проектов, где формулы являются важной частью контента.
+
+Например:
+- документация по математике и физике;
+- образовательные платформы;
+- электронные учебники;
+- научные публикации;
+- энциклопедии;
+- сайты с большим количеством формул;
+- генерация формул из `LaTeX`.
+
+Если на странице всего несколько формул, можно написать их вручную.
+
+Если формул сотни или тысячи, обычно используют генераторы, которые автоматически преобразуют `LaTeX` в `MathML`.
+
+## Итог
+
+`MathML` отлично подходит для публикации математического контента в вебе, особенно когда важны семантика, доступность и отсутствие дополнительных библиотек. Однако в проектах, где уже используется `LaTeX`, требуется поддержка старых браузеров или пользователи самостоятельно вводят формулы, другие решения могут оказаться более удобными.