HTML тег <sub>
Тег <sub> определяет подстрочный текст, расположенный на полсимвола ниже строки и отображаемый меньшим шрифтом. Примеры и синтаксис.
HTML-тег <sub> выделяет подстрочный текст — символы, расположенные на полстроки ниже базовой линии и отображаемые несколько меньшим размером. Это строчный семантический элемент: он сообщает браузеру (и вспомогательным технологиям), что заключённый текст является подстрочным, а не просто визуально опущенным.
Используйте <sub> только там, где сниженное положение несёт типографическое значение. Это не универсальный инструмент «сделать меньше и ниже» — если нужен лишь визуальный эффект без смыслового значения, воспользуйтесь CSS (описано ниже).
Когда использовать <sub>
Подстрочный текст уместен в нескольких контекстах:
- Химические формулы — количество атомов: H2O, CO2, C2H5OH.
- Математические индексы и нижние индексы — члены последовательностей и индексы переменных: x1, x2, …, an.
- Основания логарифмов — log2(n), log10(x).
- Сноски и маркеры ссылок, которые по традиции оформляются снизу, а не сверху.
В каждом случае подстрочный символ меняет смысл окружающего текста: CO2 и CO<sub>2</sub> читаются по-разному. Именно эту семантическую разницу и призван выражать <sub> — поэтому стилизация средствами CSS не является заменой.
Для определения надстрочного текста (поднятого выше базовой линии, например показателей степени x2 или порядковых числительных 1st) используйте тег <sup>.
<sub> и <sup>
Оба являются семантическими типографическими элементами; они различаются лишь направлением и соглашениями о том, когда каждый из них уместен.
<sub> (подстрочный) | <sup> (надстрочный) | |
|---|---|---|
| Положение | Ниже базовой линии | Выше базовой линии |
| Типичные применения | Количество атомов (H2O), математические индексы (xn), основания логарифмов | Показатели степени (x2), порядковые числительные (2nd), маркеры сносок |
| Произношение | «x нижний n» | «x в степени n», «второй» |
Выбирайте элемент, соответствующий устоявшемуся соглашению для данного обозначения, а не тот, который «выглядит правильно» — количество атомов в химии всегда нижний индекс, показатель степени всегда верхний.
Синтаксис
Тег <sub> используется парно. Подстрочное содержимое записывается между открывающим тегом <sub> и закрывающим </sub>.
<p>Formula of water — H<sub>2</sub>O</p>Примеры
Химические формулы
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Formula of water - H<sub>2</sub>O, formula of alcohol - C<sub>2</sub>H<sub>5</sub>OH</p>
</body>
</html><sub> совместно с <sup>
Подстрочный и надстрочный текст нередко встречаются в одном документе — один для химических формул, другой для показателей степени:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH
</p>
<p>
E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
</p>
</body>
</html>Если нужен только визуальный эффект — используйте CSS
Если текст должен выглядеть как подстрочный, но семантически таковым не является, не злоупотребляйте <sub>. Вместо этого примените CSS vertical-align со значением sub (и уменьшенным font-size) к нужному элементу. Пример ниже изменяет вид обычного текста исключительно в презентационных целях — обратите внимание, что элемент <sub> не используется:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.lowered {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Lowered text without the sub tag</h1>
<p>
Here is some <span class="lowered">visually lowered</span> text.
</p>
</body>
</html>Доступность
Программы чтения с экрана непоследовательно озвучивают подстрочный текст — одни читают H<sub>2</sub>O как «H два O» без указания на то, что 2 опущена, другие делают паузу или меняют тон, многие вовсе игнорируют это различие. Поскольку положение символа может нести смысл, который теряется при голосовом воспроизведении, для важных обозначений предпочтительнее использовать чёткие, недвусмысленные источники:
- Для сложных формул и уравнений рассмотрите возможность предоставления текстовой или удобной для озвучивания альтернативы (например, напишите «логарифм по основанию 2 от n» в соседнем тексте или используйте MathML для полноценной математической разметки).
- Не полагайтесь только на
<sub>для передачи информации, которую читатель обязательно должен понять — убедитесь, что окружающее предложение остаётся понятным, даже если подстрочный символ прочитан без указания его положения.
Атрибуты
Тег <sub> поддерживает глобальные атрибуты и атрибуты событий. Собственных атрибутов у него нет.
Стилизация <sub>
Браузеры применяют к <sub> стандартный меньший шрифт и опущенное положение. Внешний вид можно изменить средствами CSS, сохранив при этом семантику элемента:
sub {
color: #555;
font-size: 0.8em;
}Примечание: этот код переопределяет стандартный стиль браузера для <sub> исключительно в демонстрационных целях — смысл подстрочного символа остаётся неизменным.