<sup> элемент HTML для надстрочного текста

Элемент <sup> HTML задаёт встроенный текст, который отображается в виде надстрочного исключительно по типографским причинам. Надстрочный текст обычно отображается с приподнятой базовой линией и уменьшенным размером шрифта.

Попробуйте

<p>
  The <em>Pythagorean theorem</em> is often expressed as the following equation:
</p>

<p>
  <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>

p {
  font:
    1rem "Fira Sans",
    sans-serif;
}

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

Примечания по использованию

Элемент <sup> следует использовать только по типографским причинам — то есть для изменения положения текста в соответствии с типографскими соглашениями или стандартами, а не исключительно ради оформления или внешнего вида.

Например, оформление словесного товарного знака компании или продукта, в котором используется приподнятая базовая линия, следует выполнять с помощью CSS (скорее всего, vertical-align), а не <sup>. Это можно сделать, например, с помощью vertical-align: super или, чтобы поднять базовую линию на 50%, с помощью vertical-align: 50%.

Подходящие варианты использования <sup> включают (но не ограничиваются ими):

• Отображение степеней, например «x³». Для этого можно рассмотреть использование MathML, особенно в более сложных случаях. См. раздел Степени ниже, в разделе Примеры.
• Отображение надстрочных букв, которые используются в некоторых языках при написании определённых сокращений. Например, во французском слово «mademoiselle» можно сократить как «M^lle»; это допустимый вариант использования. Примеры см. в разделе Надстрочные буквы.
• Обозначение порядковых числительных, например «4^th» вместо «fourth». Примеры см. в разделе Порядковые числительные.

Примеры

Степени

Степени, или показатели степени числа, — один из наиболее распространённых случаев использования надстрочного текста. Например:

<p>
  One of the most common equations in all of physics is <var>E</var>=<var>m</var
  ><var>c</var><sup>2</sup>.
</p>

Результат

Надстрочные буквы

С технической точки зрения надстрочные буквы — это не то же самое, что надстрочный текст. Однако для отображения надстрочных букв в HTML часто используют <sup>. Один из наиболее распространённых случаев использования надстрочных букв — написание некоторых сокращений во французском языке:

<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>

Результат

Порядковые числительные

Порядковые числительные, например «fourth» в английском или «quinto» в испанском, можно сокращать с помощью цифр и языкового текста, отображаемого надстрочным шрифтом:

<p>
  The ordinal number "fifth" can be abbreviated in various languages as follows:
</p>
<ul>
  <li>English: 5<sup>th</sup></li>
  <li>French: 5<sup>ème</sup></li>
</ul>

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Элемент HTML <sub>, который создаёт подстрочный текст. Обратите внимание, что sub и sup нельзя использовать одновременно: чтобы вывести надстрочный и подстрочный текст рядом с символом химического элемента, обозначая его атомный и массовый номера, необходимо использовать MathML.
• Элементы MathML <msub>, <msup> и <msubsup>.
• Свойство CSS vertical-align.