Тег <sup>
Описание
Тег <sup> (от англ. "superscript") отображает текст как надстрочный (верхний индекс). Это строчный элемент, используемый для математических степеней, химических обозначений, сносок и других специальных символов.
<p>Теорема Пифагора: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
Ключевые особенности:
- Семантический тег для верхних индексов
- По умолчанию отображается меньшим шрифтом выше базовой линии
- Не изменяет семантику содержимого (только визуальное представление)
- Поддерживается всеми браузерами
- Может содержать другие inline-элементы
<!-- Математические степени -->
<p>Формула: x<sup>3</sup> + y<sup>3</sup> = (x + y)(x<sup>2</sup> - xy + y<sup>2</sup>)</p>
<!-- Химические обозначения -->
<p>Ион водорода: H<sup>+</sup></p>
<!-- Сноски в тексте -->
<p>Согласно исследованиям<sup><a href="#footnote1">1</a></sup>, этот метод эффективен.</p>
<!-- Торговые марки -->
<p>Зарегистрированная торговая марка<sup>®</sup></p>
<!-- В сочетании с другими тегами -->
<p>
<var>E<sup>2</sup></var> = <var>m<sup>2</sup></var>c<sup>4</sup>
</p>
Рекомендации по использованию:
- Используйте для математических степеней и научных обозначений
- Для сносок сочетайте с ссылками (
<a>) - Не применяйте просто для визуального эффекта (используйте CSS)
- Для нижних индексов используйте
<sub> - В сложных математических выражениях рассмотрите MathML
Тег <sup> обеспечивает семантически правильное отображение верхних индексов, особенно важное для научного, математического и технического контента, сохраняя при этом доступность информации.
Атрибуты
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| spellcheck | Проверка орфографии |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
| align | Горизонтальное выравнивание |
| color | Цвет текста |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 2.0 | 1.0 | 2.0 | 1.0 | 1.0 |