<sup>

Выводит надстрочный текст.

Время чтения: меньше 5 мин

Кратко

Скопировано

Тег <sup> позволяет выводить надстрочный текст, например, в математических уравнениях: c2 = a2 + b2.

Пример

Скопировано

Чаще всего <sup> используется для вывода степеней в математических формулах.

        
          
          <p>  Теорема Пифагора — одна из  основополагающих теорем евклидовой  геометрии c<sup>2</sup> =  a<sup>2</sup> + b<sup>2</sup>.</p>
          <p>
  Теорема Пифагора — одна из
  основополагающих теорем евклидовой
  геометрии c<sup>2</sup> =
  a<sup>2</sup> + b<sup>2</sup>.
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Скопировано

Помимо описанного выше примера, можно использовать тег <sup> внутри тега <var>.

        
          
          <p>  Квадрат суммы может быть вычислен как сумма  квадратов слагаемых и их удвоенное произведение:  <var>(a + b)<sup>2</sup> = a<sup>2</sup> + 2 × a × b + b<sup>2</sup></var></p>
          <p>
  Квадрат суммы может быть вычислен как сумма
  квадратов слагаемых и их удвоенное произведение:
  <var>(a + b)<sup>2</sup> = a<sup>2</sup> + 2 × a × b + b<sup>2</sup></var>
</p>

        
        
          
        
      
        
          
          var {  font-style: normal;}
          var {
  font-style: normal;
}

        
        
          
        
      
Открыть демо в новой вкладке

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

        
          
          <p>  Первый уровень  <sup>второй уровень    <sup>третий уровень      <sup>четвёртый уровень</sup>    </sup>  </sup></p>
          <p>
  Первый уровень
  <sup>второй уровень
    <sup>третий уровень
      <sup>четвёртый уровень</sup>
    </sup>
  </sup>
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Также <sup> можно комбинировать с тегом <sub> для построения сложных формул.

        
          
          <p>  <var>    X    <sup>      2 × log<sub>3</sub>(Z<sup>2</sup>)    </sup>  </var></p>
          <p>
  <var>
    X
    <sup>
      2 × log<sub>3</sub>(Z<sup>2</sup>)
    </sup>
  </var>
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Доступность

Скопировано

У <sup> есть роль superscript. Скринридеры пока не сообщают об этой роли и не выделяют содержимое тега интонацией, но это добавляет семантический вес и приносит потенциальную пользу для доступности.