Тег <sup> используется для добавления надстрочного текста. Надстрочный текст отображается на полсимвола выше обычной строки и обычно используется для сносок, математических уравнений и порядковых показателей.

Синтаксис тега <sup>

<sup>Надстрочный текст</sup>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <sup> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Сноска:

<p>Это абзац текста<sup>[1]</sup>.</p>
<p>Сноска: <sup>[1]</sup> Это сноска.</p>

Математическое уравнение:

<Теорема Пифагора может быть записана как c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>.</p>

Порядковый показатель:

<p>1<sup>st</sup> место</p>
<p>2<sup>nd</sup> место</p>
<p>3<sup>rd</sup> место</p>

Для чего использовать тег <sup>

  • для отображения сносок в научных статьях;
  • для отображения математических уравнений;
  • для отображения порядковых показателей;
  • для обозначения символа торговой марки;
  • для отображения экспоненты;
  • для отображения дат в надстрочном формате;
  • для отображения индикаторов примечаний в юридических документах.

Атрибуты тега <sup>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

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

Нюансы

  • если надстрочный текст содержит гиперссылку, она должна быть заключена в тег <sup>;
  • если надстрочный текст представляет собой число или символ, он должен быть включен в тег <sup>.

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Тег <sup> может быть заменен тегом <span> с соответствующей стилизацией CSS.

Чем заменить тег

Прямой замены тегу <sup> не существует.

Актуальность

Тег <sup> не является устаревшим.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023