Клавиша / esc

<math>

Учимся отображать математические формулы с помощью обычного HTML.

Время чтения: 5 мин

Кратко

Скопировано

<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>&#x2192;</mo>        <mn>0</mn>      </mrow>    </munder>    <mfrac>      <mrow>        <mi>f</mi>        <mo>(</mo>        <mi>t</mi>        <mo>+</mo>        <mi>h</mi>        <mo>)</mo>        <mo>&#x2212;</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>&#x2192;</mo>
        <mn>0</mn>
      </mrow>
    </munder>
    <mfrac>
      <mrow>
        <mi>f</mi>
        <mo>(</mo>
        <mi>t</mi>
        <mo>+</mo>
        <mi>h</mi>
        <mo>)</mo>
        <mo>&#x2212;</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.5, π);
<mo> — оператор или символ действия (+, , =, , , и т. д.);
<mtext> — обычный текст (комментарии или пояснения внутри формулы).

Над- и подстрочные индексы

Скопировано

<msup> — надстрочный элемент (степень: );
<msub> — подстрочный элемент (индекс: aₙ);
<msubsup> — сразу подстрочный и надстрочный (например, предел).

Функции и дроби

Скопировано

<mfrac> — дробь: числитель и знаменатель;
<msqrt> — квадратный корень;
<mroot> — корень произвольной степени;
<mfenced> — аналог скобок, оборачивает выражение в (…), […], {...}.

Суммы, интегралы, лимиты

Скопировано

<menclose> — обводка вокруг выражения (рамки, штриховки и др.);
<munderover> — нижний и верхний индекс (например, ∑ от i=0 до ∞);
<munder> — только нижний индекс (для пределов, lim);
<mover> — только верхний индекс (для акцентов, стрелок и пр.).

Матрицы и таблицы

Скопировано

<mtable> — таблица или матрица;
<mtr> — строка таблицы;
<mtd> — ячейка таблицы.

Модификаторы и оформление

Скопировано

<mstyle> — применяет стили (шрифт, цвет, выравнивание и т. д.);
<mpadded> — добавляет отступы вокруг элемента;
<mphantom> — невидимый элемент (зарезервированное пространство);
<merror> — обозначает ошибку или некорректное выражение.

Логика и условные выражения

Скопировано

<semantics> — оборачивает формулу и добавляет метаданные;
<annotation> — текстовая аннотация;
<annotation-xml> — XML-аннотация (например, LaTeX).

Как понять

Скопировано

MathML — это XML-язык. Каждый символ и каждое выражение оборачиваются в соответствующий тег. Например, число 2 пишется как <mn>2</mn>, а переменная x — как <mi>x</mi>. Это может выглядеть громоздко по сравнению с LaTeX, но зато формулы становятся доступны для поисковых систем и скринридеров.

MathML позволяет:

  • строить дроби, корни, степени;
  • писать суммы и интегралы;
  • добавлять над- и подстрочные индексы;
  • отображать любые символы Unicode: π, , , и т. д.
Открыть демо в новой вкладке

Подсказки

Скопировано

💡 MathML работает в HTML, XHTML, а также в SVG и EPUB.
💡 Все теги MathML чувствительны к регистру: используйте строго строчные (<msup>, а не <MSUP>).
💡 Для лучшего внешнего вида можно подключать стили к формуле — но аккуратно, некоторые свойства не работают:

Сложные анимации - могут вызывать артефакты отображения
Разрыв строки внутри математических формул: white-space обрабатываются как nowrap во всех элементах MathML.
Свойства выравнивания: align-content, justify-content, align-self, justify-self не влияют на элементы MathML.

💡 Внутри элемента <math> нельзя использовать обычную HTML-разметку — только теги MathML.
💡 Для проверки корректности разметки используйте валидатор W3C.

📚 Спецификация MathML — подробное руководство по всем элементам и атрибутам.

Поддержка в браузерах:
  • Chrome 109, поддерживается
  • Edge 109, поддерживается
  • Firefox 4, поддерживается
  • Safari 5.1, поддерживается
О Baseline