Тег <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> обеспечивает семантически правильное отображение верхних индексов, особенно важное для научного, математического и технического контента, сохраняя при этом доступность информации.

Атрибуты

class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
spellcheck Проверка орфографии
style Инлайновые стили
title Всплывающая подсказка
translate Определяет возможность перевода
align Горизонтальное выравнивание

Поддержка браузерами
2.0 1.0 2.0 1.0 1.0