Можно ли вместо использовать CSS?

vertical-align: super с уменьшенным font-size выглядит так же, но у и есть смысл: «m2» и «m 2 » это разные значения. Используйте теги, когда поднятое или опущенное положение является частью содержимого.

Исполняемые доки HTML: Верхний индекс

Q: Как написать верхний индекс в HTML?

Оберните поднятый текст в : x 2 показывает x в квадрате, 1 st порядковое числительное. Браузер рисует текст мельче и выше базовой линии.

Q: Как написать нижний индекс в HTML?

Используйте : H 2 O для воды, x 1 для индекса. Текст рисуется мельче и ниже базовой линии.

Q: Как написать x в квадрате в HTML?

Либо x 2 , либо готовый символ x², который также можно ввести сущностью ². Символ подходит для квадратов и кубов; работает для любой степени, например 2 n+1 .

Верхний и нижний индекс в HTML: теги sup и sub

Верхний индекс пишут через , нижний через : степени, порядковые окончания, сноски и химические формулы. Разберем типичные применения, как не дать им раздвигать строки и когда лучше подходят символы Unicode или MathML.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как написать верхний индекс в HTML

Оберните поднятый текст в . Браузер покажет его мельче и выше строки. Его пара  показывает текст мельче и ниже:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 и  строчные и могут содержать другие строчные элементы, поэтому 2n+1 или xi тоже работают.

Типичные применения

Что нужно	Как написать	Результат
Степень	`10<sup>3</sup>`	10 в степени 3
Порядковое числительное	`2<sup>nd</sup>`	2nd с поднятыми буквами
Знак сноски	`text<sup><a href="#n1">1</a></sup>`	Поднятая кликабельная 1
Химическая формула	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Глюкоза
Индекс или основание	`x<sub>1</sub>`, `log<sub>2</sub>`	Опущенные 1 и 2
Товарный знак	`Brand<sup>TM</sup>` или `Brand™`	Поднятое TM

Используйте теги, когда положение является частью смысла: m2 и m2 это разные вещи. Для мелкого текста, который просто оформлен мелким (подпись, значок), используйте CSS.

Сноски через sup

Знак сноски это ссылка верхним индексом на примечание внизу. Дайте каждому примечанию id и направьте на него ссылку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Кликните по номеру, чтобы перейти к примечанию, и по «Back», чтобы вернуться. Если убрать подчеркивание у маленькой ссылки, абзац выглядит аккуратнее, а цвет ссылки все равно показывает, что по ней можно кликнуть.

Ровный межстрочный интервал

По умолчанию  или  может сделать свою строку выше соседних, и абзац с несколькими степенями выглядит неровным. Это исправляет line-height: 0 у этих тегов:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

Серый блок выше, потому что вторая и четвертая строки раздвинуты. В зеленом блоке у всех строк одинаковая высота. Добавьте это правило в базовые стили один раз и забудьте о проблеме.

Символы Unicode и MathML

Для нескольких частых случаев есть готовые символы: ² (²), ³ (³), ¹ (¹), ™ (™) и ½ (½). Тег для них не нужен, и на высоту строки они не влияют, но существуют только для некоторых цифр и букв.

Для настоящих формул (дроби, корни, степени степеней) используйте MathML, который современные браузеры отображают сами:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> принимает основание и показатель степени; <msub> делает то же для нижних индексов. Для одной степени в предложении проще .

Частые ошибки

, чтобы сделать текст мельче. Он еще и поднимает текст и сообщает читателям, что это верхний индекс. Для мелкого текста используйте font-size.
Неровный межстрочный интервал. Добавьте sup, sub { line-height: 0; }.
x^2 или H2O в готовом тексте. Пишите x2 и H2O, чтобы содержимое читалось правильно.
Слишком мелкие знаки сносок. На телефонах одна поднятая цифра это крошечная цель для нажатия. Добавьте sup a немного внутреннего отступа или разместите примечания рядом с текстом.

Часто задаваемые вопросы

Как написать верхний индекс в HTML?

Оберните поднятый текст в : x2 показывает x в квадрате, 1st порядковое числительное. Браузер рисует текст мельче и выше базовой линии.

Как написать нижний индекс в HTML?

Используйте : H2O для воды, x1 для индекса. Текст рисуется мельче и ниже базовой линии.

Как написать x в квадрате в HTML?

Либо x2, либо готовый символ x², который также можно ввести сущностью ². Символ подходит для квадратов и кубов;  работает для любой степени, например 2n+1.

Почему делает межстрочный интервал неровным?

Поднятый текст может сделать свою строку выше остальных строк абзаца. Исправьте это правилом sup, sub { line-height: 0; }, и они перестанут добавлять строке высоту.

Можно ли вместо использовать CSS?

vertical-align: super с уменьшенным font-size выглядит так же, но у  и  есть смысл: «m2» и «m2» это разные значения. Используйте теги, когда поднятое или опущенное положение является частью содержимого.

Связанные концепции