<sup>

Indeks górny: tekst podniesiony i pomniejszony, na przykład potęgi i numery przypisów.

Wyświetlanie
inline
Znacznik zamykający
Wymagany
Dozwolona zawartość
Treść frazowa (phrasing content)
Na tej stronie

Przykład

#
HTML
<p>Pokój ma 16 m<sup>2</sup>, a 2<sup>10</sup> = 1024, dlatego kibibajt ma 1024 bajty.</p>
Podgląd

Definicja i zastosowanie

#

Element <sup> oznacza indeks górny: wykładnik potęgi (2¹⁰), jednostki takie jak m² albo numer przypisu. Przeglądarki podnoszą i pomniejszają taki tekst.

Przypisy zwykle łączy się odnośnikami w obie strony: numer w tekście prowadzi do treści przypisu, a przypis ma link powrotny. Dzięki temu łatwo przeskoczyć tam i z powrotem, także z klawiatury.

W polskiej typografii liczebniki porządkowe zapisuje się z kropką („1.”, „2.”), a nie indeksem górnym, jak czasem robi się to w angielskim. Podobnie jak <sub>, element lekko zwiększa wysokość linii, co poprawisz w CSS.

Składnia

#
Składnia
2<sup>10</sup>

Atrybuty

#

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Więcej przykładów

#
Przypis z odnośnikami w obie strony
HTML
<p>Pierwszą wersję JavaScriptu napisano w 10 dni<sup><a href="#note-1" id="ref-1">1</a></sup>.</p>
<p id="note-1">
  <small>1. Jej autorem był Brendan Eich, który w 1995 roku pracował w firmie Netscape. <a href="#ref-1">Wróć do tekstu</a></small>
</p>
Podgląd

Domyślny CSS

#

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS
sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Numer przypisu umieść w odnośniku, a w przypisie dodaj link powrotny do tekstu.
  • Liczebników porządkowych po polsku nie zapisuj indeksem górnym, tylko z kropką.
  • Gdy indeksy rozsuwają linie tekstu, pomoże line-height: 0 ustawione dla sup.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.