Тег sub опускает текст ниже строки и делает его мельче: так пишут индексы в формулах, например H2O, и номера переменных, например x1. Название - от английского subscript, «нижний индекс». Тег парный, закрывающий обязателен, из атрибутов работают только глобальные. Он входит в стандарт HTML и не устарел. Зеркальный тег sup поднимает текст выше строки: о степенях, единицах и сносках рассказано на его странице.
<p>Углекислый газ: CO<sub>2</sub>.</p>В этой статье
Формулы: какие цифры уходят вниз
В химической формуле индекс показывает число атомов и относится к символу элемента слева: в H2O два атома водорода и один кислорода. Такой индекс - часть записи, без него формула читается иначе. Справочник MDN подчёркивает, что sub нужен по типографским причинам, а не ради оформления.
Есть цифра, которая индексом не является: число перед формулой. В записи 2H2O первая двойка означает две молекулы воды, и относится она ко всей формуле, а не к символу рядом.
Пример: отметьте индексы
Выберите формулу и нажимайте на цифры: нажатая цифра становится индексом. Под формулой показана разметка, которая у вас получилась, и вывод: не хватает индексов, есть лишний или всё верно.
Индекс относится к символу слева, а число перед формулой - ко всей формуле. Отсюда правило разметки: в sub оборачивают только цифры внутри формулы.
Переменные и логарифмы
Так же пишут номера переменных: x1 и x2 - два разных корня уравнения, а буква у них общая. Саму переменную отмечает тег var, а индекс находится внутри него.
<p>Корни уравнения: <var>x<sub>1</sub></var> и <var>x<sub>2</sub></var>.</p>
<p>log<sub>2</sub> 8 = 3</p>В логарифме нижняя цифра - основание: log2 8 читается как «логарифм восьми по основанию два». Основание - часть записи, поэтому его нельзя оставлять на строке: log2 8 читается уже как «лог два, восемь».
Индекс и показатель рядом: ионы
В формуле иона нужны оба индекса сразу: сульфат-ион записывают как SO42-. Внизу стоит число атомов кислорода, вверху - заряд. Оба тега идут друг за другом, а не один под другим.
<p>Сульфат-ион: SO<sub>4</sub><sup>2-</sup></p>Записи, где два индекса должны стоять точно друг над другом, например атомное и массовое число слева от символа, тегами не получить: MDN советует для них MathML. Про верхний индекс, степени и сноски - на странице sup.
Размер и сдвиг: что делает браузер
Без стилей браузер задаёт два свойства CSS: font-size: smaller, то есть «мельче, чем у родителя», и vertical-align: sub, то есть «ниже базовой линии». В Chrome текст уменьшается примерно в 1,2 раза: в абзаце размером 16 пикселей индекс получает 13,3 пикселя. Жирность, курсив и цвет тег не меняет, поэтому sub внутри strong остаётся жирным. У sup размер и вложенность работают так же, только текст поднимается.
sub {
font-size: 0.75em;
vertical-align: -0.25em;
}Первая строка задаёт размер: три четверти от размера родителя. Вторая опускает индекс на четверть его собственного размера ниже базовой линии, то есть линии, на которой находятся буквы. Единица em в первой строке считается от размера родителя, во второй - от размера самого индекса.
Вложенные sub и sup мельчают и смещаются дальше, потому что каждый считает размер от родителя: 16 пикселей, потом 13,3, потом 11,1, потом 9,3 и 7,7. Так записывают индекс у индекса, но на третьем уровне текст уже трудно читать.
Почему строка с индексом выше остальных
Опущенный индекс остаётся частью строки, и браузер увеличивает её высоту, чтобы он поместился. Расстояние между строками абзаца становится неравномерным: строки с индексами выше соседних. То же происходит и у sup. Чтобы строка не росла, индексу задают нулевую высоту строки.
sub,
sup {
line-height: 0;
}Пример: строка с индексом до и после правила
Кнопка включает и выключает правило line-height: 0 для sub. Под текстом подписана высота каждой из трёх строк в пикселях и разница между строкой с индексом и остальными.
Как индекс читают программы и как копируют
У элемента sub есть собственная роль в структуре доступности: subscript, у sup - superscript. Об этом пишут MDN и Дока . Дока отмечает, что программы чтения с экрана эту роль пока не озвучивают. Мы озвучивание в NVDA, JAWS и VoiceOver не проверяли.
При копировании индекс становится обычной цифрой: из H2O получится «H2O». Для формул это терпимо, потому что запись остаётся узнаваемой. Для степеней всё хуже, об этом - на странице sup.
Частые ошибки
Большинство ошибок с этим тегом сводится к одной привычке: считать его кнопкой «опустить ниже».
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Число перед формулой в sub: <sub>2</sub>H2O | Число молекул превращается в индекс, и запись читается неверно | Оставить число на строке, а в sub взять только цифры внутри формулы |
| Индекс написан обычными цифрами: CO2 | Формула теряет типографский вид, а «2» читается как обычная цифра | Обернуть индекс в sub |
sub вместо sup у степени или заряда | Показатель окажется ниже строки, и запись читается неверно | Для верхнего индекса использовать sup |
sub и sup друг под другом в одной точке | Два тега не встанут один над другим, получится ступенька | Для таких записей нужен MathML, так советует MDN |
sub на слово или фразу | Смысл «индекс» пропадает, читать опущенный текст тяжело | Оставить sub для короткого индекса |
| Не убрано раздвигание строк | Строки с индексами выше соседних, интервал в абзаце скачет | Правило line-height: 0 для sub и sup |
