HTML-тег <sub>
Тег <sub> используется для определения текста в нижнем индексе, который отображается на полсимвола ниже базовой линии и выводится меньшим шрифтом. Текст в нижнем индексе часто применяется для записи химических формул.
Тег <sub> следует использовать исключительно в типографских целях. Его не следует применять для стилизации. Если вам нужно изменить вертикальное положение текста, используйте CSS vertical-align со значением "sub".
TIP
Для определения текста в верхнем индексе используйте тег <sup>.
Синтаксис
Тег <sub> является парным. Содержимое размещается между открывающим (<sub>) и закрывающим (</sub>) тегами.
Пример использования HTML-тега <sub>:
HTML-тег <sub>
<!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>O</p>
</body>
</html>Результат
Пример использования HTML-тега <sub> вместе с тегом <sup>:
Пример использования 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>O
</p>
<p>
E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
</p>
</body>
</html>Пример использования HTML-тега <sub> со свойством CSS vertical-align:
Пример использования HTML-тега <sub> со свойством CSS vertical-align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Example of the sub tag</h1>
<p>
Here is some text <sub>with the sub tag</sub>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,<sub> giving information on its origins</sub>, as well as a random Lipsum generator.
</p>
</body>
</html>Атрибуты
Тег <sub> поддерживает Глобальные атрибуты и Атрибуты событий.
Как стилизовать HTML-тег <sub>
sub {
color: #555;
font-size: 0.8em;
}Примечание: Этот пример переопределяет стандартную стилизацию браузера исключительно в демонстрационных целях.
Практика
Каково правильное использование и синтаксис HTML-тега <sub> согласно руководству w3docs.com?