Co to jest `sup` w HTML?

Znacznik HTML  służy do wyświetlania tekstu jako indeks górny (ang. superscript), czyli podniesionego powyżej linii bazowej tekstu i najczęściej pomniejszonego rozmiarem. Jest to standardowy sposób oznaczania potęg, jednostek, przypisów oraz innych elementów, które wymagają takiego formatowania.

Co to jest `` w HTML?

Znacznik  (od ang. superscript) otacza fragment tekstu, który powinien być wyświetlony nieco powyżej zwykłej linii tekstu. Przeglądarki domyślnie prezentują taki tekst w mniejszym rozmiarze, pół znaku ponad linią bazową tekstu.

Przykład zastosowania –

x<sup>2</sup>

Wyświetli: x²

Zastosowania znacznika ``

Matematyka – potęgowanie;
```
a3 + b2 
```
Wynik: a³ + b²
Chemia – symbolika izotopów;
```
14C 
```
Wynik: ¹⁴C
Przypisy i odwołania w tekście –;
```
Uczestnicy zdobyli 10 punktów1. 
```
Wynik: Uczestnicy zdobyli 10 punktów¹.
Jednostki i skróty, np. stopnie, ułamki – html 25oC Wynik: 25ᵒC.

Składnia podstawowa

<sup>Tekst indeksu górnego</sup>

Można umieścić dowolny fragment tekstu, cyfrę lub symbol. Element  obsługuje również globalne atrybuty HTML, takie jak class, id czy style.

Łączenie `` z innymi elementami

Indeks górny i dolny obok siebie – jeśli wstawisz znaczniki  i  bezpośrednio po sobie, indeksy wyświetlą się poziomo kolejno, a nie jeden nad drugim;
Przykład:
```
A 12 
```
Taki kod pozwala graficznie ułożyć indeksy górny i dolny w jednej pionowej linii.

Różnica między `` a ``

 – indeks górny (superscript), tekst powyżej linii bazowej (np. x²);
 – indeks dolny (subscript), tekst poniżej linii bazowej (np. H₂O).

Najczęstsze praktyki i porady

Używaj  zawsze tam, gdzie treść powinna być zgodna ze standardami naukowymi lub typograficznymi (wzory matematyczne, przypisy),
stosowanie  poprawia czytelność oraz zgodność dokumentu z wymaganiami dostępności i standardami HTML,
unikaj samodzielnego stylowania tekstu za pomocą CSS w celu imitowania indeksu górnego – użycie znacznika  jest rozwiązaniem semantycznym, które korzystnie wpływa na SEO i dostępność stron.

Podsumowanie

Znacznik  to prosty w użyciu, ale niezwykle istotny element HTML – sprawia, że prezentacja treści, wzorów czy przypisów jest zgodna z przyjętymi standardami i czytelna dla odbiorcy, a także dobrze interpretowana przez oprogramowanie wspomagające przeglądanie stron internetowych.