Тег sup поднимает текст выше строки и делает его мельче: так пишут степени, например x2, единицы вроде м2 и номера сносок. Название - от английского superscript, «верхний индекс», отсюда и «расшифровка» sup. Тег парный, закрывающий обязателен, из атрибутов работают только глобальные. Он входит в стандарт HTML и не устарел. Зеркальный тег sub опускает текст ниже строки: формулы и индексы переменных разобраны на его странице.
<p>Площадь комнаты: 18 м<sup>2</sup>.</p>В этой статье
Степени, единицы и порядковые числа
Верхний индекс описывает то, что по правилам типографики пишут выше строки: показатель степени, единицу площади или объёма, порядковое число в английском. Справочник MDN добавляет языковые сокращения вроде Mlle во французском. По-русски порядковое число принято писать через дефис и без индекса: 5-й.
| Запись | Разметка | Что означает |
|---|---|---|
| 18 м2 | 18 м<sup>2</sup> | Площадь: метры в квадрате |
| x2 | <var>x</var><sup>2</sup> | Степень переменной, переменную отмечает var |
| 10-6 | 10<sup>-6</sup> | Отрицательная степень |
| 5th | 5<sup>th</sup> | Порядковое число в английском |
Для английского текста внутри русской страницы полезно задать язык атрибутом lang: он помогает программам чтения с экрана выбрать произношение.
<p lang="en">Our office is on the 5<sup>th</sup> floor.</p>Верхний индекс нужен, когда он часть записи: без него «x2» читается как «икс два», а «м2» - как «эм два». Размер, вложенность и раздвигание строк у sup такие же, как у sub: они разобраны на странице sub.
Сноска: от номера до примечания
Сноска состоит из номера в тексте и примечания внизу. Номер оформляют как ссылку внутри sup, а у примечания прописывают id, на который ведёт ссылка. Обратная ссылка в примечании возвращает читателя туда, где он остановился.
<p>Цена указана на 1 июня<sup><a href="#note1" id="ref1">1</a></sup>.</p>
<p id="note1">1. Цена может измениться. <a href="#ref1">Вернуться к тексту</a></p>Пример: сноска и область нажатия
Нажмите на номер 1: примечание подсветится, а ссылка в нём подсветит предложение. Две кнопки над текстом включают отступ у ссылки, красная рамка показывает область нажатия, ниже подписана её ширина в пикселях.
Есть подводный камень: ссылка внутри sup получается узкой, по ширине почти одной цифры, и попасть в неё пальцем на телефоне трудно. Горизонтальный отступ у ссылки расширяет область нажатия и не меняет высоту строки.
sup a {
padding: 0 0.3em;
}Что останется при копировании
Индекс остаётся обычными символами и при копировании склеивается с основным текстом. Особенно это заметно у степеней: пять в квадрате становится числом пятьдесят два.
Пример: что останется без индекса
Выберите запись. В первом поле она показана на экране, во втором - как обычный текст без разметки, то есть то, что получится при копировании. Под полями - пояснение.
Отсюда правило: смысл записи не должен зависеть только от положения символа. Для степени напишите словами рядом: «5 в квадрате». У элемента sup есть роль superscript, но программы чтения с экрана её, по словам Доки , пока не озвучивают. Мы озвучивание в NVDA, JAWS и VoiceOver не проверяли. Для сложных формул MDN советует MathML.
Когда текст нужно поднять только для вида
Иногда слово поднимают ради оформления: в логотипе, в названии продукта. Смысла «верхний индекс» здесь нет, и MDN прямо советует CSS вместо тега.
<p>Логотип: <span class="high">М</span>аркет</p>.high {
font-size: 0.75em;
vertical-align: 0.4em;
}Свойство vertical-align поднимает текст выше базовой линии, то есть линии, на которой находятся буквы. Значение в em считается от размера самого текста: 0,4 - это 40% от него.
Частые ошибки
Большинство ошибок с этим тегом сводится к одной привычке: считать его кнопкой «поднять выше».
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Степень написана обычными цифрами: x2 | Запись читается как «икс два», а не «икс в квадрате» | Обернуть показатель в sup |
| Степень без пояснения словами | При копировании «52» превращается в «52» | Дописать словами: «5 в квадрате» |
| Ссылка на сноску не расширена | Номер шириной в одну цифру трудно нажать на телефоне | Отступ padding: 0 0.3em у ссылки |
Порядковое число в русском тексте в sup: 5й | По-русски порядковое число принято писать без индекса | Писать через дефис: 5-й |
sup ради логотипа или вида | Тег обещает «верхний индекс», а там просто оформление | span с классом и vertical-align |
sup на слово или фразу | Смысл «индекс» пропадает, читать поднятый текст тяжело | Оставить sup для короткого индекса |
