Кратко
Скопировано<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, поддерживается