HTML-тег <sup>
Тег <sup> используется для определения надстрочного текста, который отображается на полсимвола выше основной строки и имеет меньший размер по сравнению с остальным текстом. Этот тег обычно применяется для обозначения сносок и формул.
Тег <sup> следует использовать исключительно в типографских целях. Его не следует применять для стилизации. Если вам нужно изменить вертикальное положение текста, используйте CSS vertical-align со значением super.
TIP
Тег <sub> используется для определения подстрочного текста.
Вот несколько примеров использования элемента <sup>:
- Отображение верхних индексов в некоторых языках или сокращениях.
- Отображение показателей степени (например, «x2»).
- Отображение порядковых числительных (например, «5th» вместо «fifth»).
Примечание: Используйте надстрочный текст только в типографских целях. Избегайте его использования для сокрытия важной информации, так как вспомогательные технологии могут пропускать её или произносить неправильно.
Синтаксис
Тег <sup> используется парами. Содержимое размещается между открывающим (<sup>) и закрывающим (</sup>) тегами.
Пример использования HTML-тега <sup>:
HTML-тег <sup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
E = mc<sup>2</sup>, where E is the energy of the object, m is the weight, c is the light speed in vacuum.
</p>
</body>
</html>Результат
Пример использования HTML-тега <sup> со свойством CSS vertical-align:
Пример HTML-тега <sup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Example of the sup tag</h1>
<p>
Here is some text <sup>with the sup tag</sup>.
</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,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.
</p>
</body>
</html>Пример использования HTML-тега <sup> вместе с тегом <sub>:
Пример HTML-тега <sup> с тегом <sub>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Example of the sup and sub tags</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,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.</p>
</body>
</html>Атрибуты
Тег <sup> поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Какое правильное использование и назначение HTML-тега <sup>?