HTML <sup> тег
Тег <sup> определяет надстрочный текст, который отображается выше основной строки и меньшим размером шрифта.
HTML-тег <sup> определяет надстрочный текст — содержимое, которое отображается на полсимвола выше обычной базовой линии и меньшим шрифтом. Это строчный семантический элемент: он сообщает браузеру и вспомогательным технологиям, что поднятый текст несёт реальный типографский смысл, а не просто является визуальным украшением.
Используйте <sup> только тогда, когда надстрочное написание типографски или семантически необходимо: для показателей степени, порядковых суффиксов, маркеров сносок и надстрочных букв в аббревиатурах. Он не предназначен для произвольного «поднятия текста» в декоративных целях. Если вы хотите поднять текст лишь визуально, воспользуйтесь свойством CSS vertical-align со значением super вместо <sup>.
Тег <sub> является парным к <sup>: он определяет подстрочный текст, отображаемый ниже базовой линии (используется для химических формул, индексов и подобного).
Когда использовать <sup>
Используйте элемент <sup>, когда надстрочное написание несёт смысловую нагрузку:
- Показатели степени и математические степени —
E = mc<sup>2</sup>. - Порядковые числительные — суффиксы
st,nd,rd,thв1<sup>st</sup>,2<sup>nd</sup>,5<sup>th</sup>. - Маркеры сносок и ссылок — небольшой
[1], ведущий к примечанию. - Надстрочные буквы в аббревиатурах — распространено во французском языке, например
M<sup>lle</sup>(Mademoiselle) или1<sup>er</sup>.
Поскольку смысл заключён в разметке, программы чтения с экрана и поисковые системы могут корректно интерпретировать поднятый текст — чего не способен обеспечить чисто CSS-стилизованный <span>.
Синтаксис
Тег <sup> используется парно. Содержимое записывается между открывающим (<sup>) и закрывающим (</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>В приведённом выше результате цифра 2 отображается меньшим размером и поднята вверх, так что выражение читается как «m c в квадрате».
Пример: порядковые числительные
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She finished 1<sup>st</sup>, ahead of the 2<sup>nd</sup> and 3<sup>rd</sup> place runners.</p>
</body>
</html>Пример: маркер сноски / ссылки
Распространённый приём — обернуть небольшой ссылочный маркер в <sup>, чтобы читатели могли перейти к примечанию внизу страницы:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The first web browser was created in 1990<sup><a href="#fn1">[1]</a></sup>.
</p>
<hr />
<p id="fn1">[1] Tim Berners-Lee, WorldWideWeb, CERN.</p>
</body>
</html>Пример: надстрочные буквы в аббревиатурах
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>M<sup>lle</sup> Dupont est arrivée 1<sup>re</sup>.</p>
</body>
</html>Стилизация презентационной альтернативы с помощью CSS
Приведённые ниже примеры демонстрируют презентационный подход. Если поднятый текст является исключительно декоративным и не несёт семантического смысла, предпочтительнее использовать CSS вместо элемента <sup>, чтобы не вводить в заблуждение вспомогательные технологии. CSS также позволяет точнее настроить размер настоящего содержимого <sup> (по умолчанию браузеры его уменьшают; это поведение можно переопределить).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.raised {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Decorative raised text via CSS</h1>
<p>
Here is some text <span class="raised">lifted with CSS</span>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>Пример: <sup> совместно с <sub>
<sup> и <sub> нередко используются рядом — например в математике, где могут потребоваться одновременно степень и индекс:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The term a<sub>n</sub> can be written as a<sub>1</sub><sup>2</sup>.</p>
<p>Water is H<sub>2</sub>O, and the area of a square is s<sup>2</sup>.</p>
</body>
</html>Используйте надстрочный текст только при наличии подлинного типографского смысла. Не злоупотребляйте <sup> для скрытия или уменьшения важного содержимого — некоторые вспомогательные технологии пропускают, неправильно произносят или зачитывают надстрочный текст вне контекста, что может затруднить понимание для пользователей программ чтения с экрана.
Атрибуты
Тег <sup> поддерживает глобальные атрибуты и атрибуты событий.
Смотрите также
<sub>— подстрочный аналог<sup>.- CSS
vertical-align— презентационный способ поднять или опустить строчный текст.