Кратко
Скопировано<math>
— тег, с помощью которого в HTML можно отображать математические формулы. Использует язык разметки MathML, предназначенный для машиночитаемого описания математических выражений.
Пример
СкопированоОбратная гиперболическая функция синуса:
<math> <mrow> <mfrac> <mrow> <mi>d</mi> <mi>f</mi> </mrow> <mrow> <mi>d</mi> <mi>t</mi> </mrow> </mfrac> <mo>=</mo> <munder> <mo>lim</mo> <mrow> <mi>h</mi> <mo>→</mo> <mn>0</mn> </mrow> </munder> <mfrac> <mrow> <mi>f</mi> <mo>(</mo> <mi>t</mi> <mo>+</mo> <mi>h</mi> <mo>)</mo> <mo>−</mo> <mi>f</mi> <mo>(</mo> <mi>t</mi> <mo>)</mo> </mrow> <mi>h</mi> </mfrac> </mrow></math>
<math> <mrow> <mfrac> <mrow> <mi>d</mi> <mi>f</mi> </mrow> <mrow> <mi>d</mi> <mi>t</mi> </mrow> </mfrac> <mo>=</mo> <munder> <mo>lim</mo> <mrow> <mi>h</mi> <mo>→</mo> <mn>0</mn> </mrow> </munder> <mfrac> <mrow> <mi>f</mi> <mo>(</mo> <mi>t</mi> <mo>+</mo> <mi>h</mi> <mo>)</mo> <mo>−</mo> <mi>f</mi> <mo>(</mo> <mi>t</mi> <mo>)</mo> </mrow> <mi>h</mi> </mfrac> </mrow> </math>
Как пишется
Скопировано<math>
оборачивает формулу и служит корневым элементом для всех выражений на языке MathML. Внутри используются специальные теги, разделённые на группы.
Кроме глобальных атрибутов этот тег может иметь такие, как:
display
— определяет, как будет показана формула: встроенно в текст или как отдельный блочный элемент.inline
— (значение по умолчанию) формула идёт в строке, не нарушая текстовый поток.block
— формула отображается на новой строке, занимает всю ширину контейнера (аналогично блочному элементу).
alttext
— текстовое описание формулы, которое может использоваться для вспомогательных технологий (например, скринридеров) либо если браузер не поддерживает MathML и не может отобразить формулу.
Основные теги
Скопировано<math>
— корневой контейнер формулы. Всегда первый и обязательный.
<mrow>
— группирует несколько элементов (эквивалент скобок без визуализации).
Текст и символы
Скопировано<mi>
— переменная или идентификатор (x
, y
, sin
, θ
);
<mn>
— число (целое или дробное: 1
, 2
, π
);
<mo>
— оператор или символ действия (+
, −
, =
, √
, ∑
, ∞
и т. д.);
<mtext>
— обычный текст (комментарии или пояснения внутри формулы).
Над- и подстрочные индексы
Скопировано<msup>
— надстрочный элемент (степень: x²
);
<msub>
— подстрочный элемент (индекс: aₙ
);
<msubsup>
— сразу подстрочный и надстрочный (например, предел).
Функции и дроби
Скопировано<mfrac>
— дробь: числитель и знаменатель;
<msqrt>
— квадратный корень;
<mroot>
— корень произвольной степени;
<mfenced>
— аналог скобок, оборачивает выражение в (…
, […
, {
.
Суммы, интегралы, лимиты
Скопировано<menclose>
— обводка вокруг выражения (рамки, штриховки и др.);
<munderover>
— нижний и верхний индекс (например, ∑ от i
);
<munder>
— только нижний индекс (для пределов, lim
);
<mover>
— только верхний индекс (для акцентов, стрелок и пр.).
Матрицы и таблицы
Скопировано<mtable>
— таблица или матрица;
<mtr>
— строка таблицы;
<mtd>
— ячейка таблицы.
Модификаторы и оформление
Скопировано<mstyle>
— применяет стили (шрифт, цвет, выравнивание и т. д.);
<mpadded>
— добавляет отступы вокруг элемента;
<mphantom>
— невидимый элемент (зарезервированное пространство);
<merror>
— обозначает ошибку или некорректное выражение.
Логика и условные выражения
Скопировано<semantics>
— оборачивает формулу и добавляет метаданные;
<annotation>
— текстовая аннотация;
<annotation
— XML-аннотация (например, LaTeX).
Как понять
СкопированоMathML — это XML-язык. Каждый символ и каждое выражение оборачиваются в соответствующий тег. Например, число 2 пишется как <mn>2<
, а переменная x — как <mi>x<
. Это может выглядеть громоздко по сравнению с LaTeX, но зато формулы становятся доступны для поисковых систем и скринридеров.
MathML позволяет:
- строить дроби, корни, степени;
- писать суммы и интегралы;
- добавлять над- и подстрочные индексы;
- отображать любые символы Unicode:
π
,∑
,∞
,≈
и т. д.
Подсказки
Скопировано💡 MathML работает в HTML, XHTML, а также в SVG и EPUB.
💡 Все теги MathML чувствительны к регистру: используйте строго строчные (<msup>
, а не <
).
💡 Для лучшего внешнего вида можно подключать стили к формуле — но аккуратно, некоторые свойства не работают:
Сложные анимации - могут вызывать артефакты отображения
Разрыв строки внутри математических формул: white
обрабатываются как nowrap
во всех элементах MathML.
Свойства выравнивания: align
, justify
, align
, justify
не влияют на элементы MathML.
💡 Внутри элемента <math>
нельзя использовать обычную HTML-разметку — только теги MathML.
💡 Для проверки корректности разметки используйте валидатор W3C.
📚 Спецификация MathML — подробное руководство по всем элементам и атрибутам.
- Chrome 109, поддерживается
- Edge 109, поддерживается
- Firefox 4, поддерживается
- Safari 5.1, поддерживается