HTML-тег <sub>

HTML-тег <sub> используется для определения подстрочного текста. Подстрочный текст отображается меньше и располагается немного ниже основной строки текста. Этот тег обычно используется в математических выражениях, химических формулах и аннотациях, где требуется подстрочный текст.

Подстрочный текст можно дополнительно стилизовать с помощью CSS, но тег <sub> придает семантическое значение заключенному в нем тексту, делая его более доступным и понятным для вспомогательных технологий.

Базовый синтаксис HTML-тега <sub>

Базовая структура тега <sub> : 

<p>This is normal text with a <sub>subscript</sub>.</p>

Тег <sub> изменяет только визуальное расположение текста, сохраняя его семантическое значение.

Пример использования тега <sub>

Вот пример использования тега <sub> в химической формуле: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Chemical Formula Example</h2>
        <p>The chemical formula for water is H<sub>2</sub>O.</p>
    </body>
</html>
Пример использования тега sub

Пояснение: «2» в слове H2O отображается как нижний индекс, следуя стандартной записи химических формул.

Стилизация тега <sub> с помощью CSS

Для дальнейшей настройки внешнего вида подстрочного текста можно использовать CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            sub {
                font-size: 0.8em;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Styled Subscript Example</h2>
        <p>The chemical formula for water is H<sub>2</sub>O.</p>
    </body>
</html>
Оформление тега sub с помощью CSS

Результат: нижний индекс «2» в слове H2O имеет меньший размер шрифта и синий цвет для лучшей видимости.

Атрибуты HTML-тега <sub>

  • Глобальные атрибуты: тег <sub> поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: вы можете прикрепить обработчики событий, такие как onclick или onmouseover к тегу <sub> .

Эти атрибуты позволяют стилизовать или добавить интерактивность подстрочному тексту.

Практическое применение тега <sub>

  • Химические формулы: представляют нижние индексы в формулах, например H2O или CO2.
  • Математические обозначения: отображение переменных или индексов, таких как x1, x2 и т. д.
  • Аннотации: добавьте ссылки или сноски в текст(например, «Ссылка1»).
  • Научные обозначения: используйте нижний индекс для единиц измерения или переменных в физике и других науках.

Тег <sub> — это простой, но эффективный способ форматирования подстрочного текста научного, математического или технического содержания с сохранением семантического значения.