Aby w HTML uzyskać indeks górny (tzw. superscript), należy wykorzystać znacznik <sup>. Element ten pozwala wyróżnić fragment tekstu, wyświetlając go nieco wyżej i mniejszą czcionką względem linii bazowej zwykłego tekstu. Poniżej znajdziesz szczegółowy poradnik dotyczący zastosowania indeksu górnego, przykłady użycia oraz dobre praktyki.
Czym jest indeks górny?
Indeks górny to fragment tekstu, który znajduje się nad linią tekstu głównego i jest najczęściej zapisywany mniejszą czcionką. Tego typu zapis jest szeroko stosowany w:
- wzorach matematycznych (np. potęgi, oznaczenia jednostek),
- chemii (liczby atomowe i masowe),
- przypisach oraz odnośnikach w tekstach,
- oznaczeniach jednostek powierzchni (np. m²).
Składnia znacznika <sup>
Aby dodać indeks górny, umieść tekst do podniesienia pomiędzy znacznikami <sup> i </sup>:
Podstawowy tekst<sup>indeks górny</sup>
Przykłady praktycznego zastosowania
Matematyka – potęgi
x<sup>2</sup>
Wynik: x²
Chemia – wzory chemiczne
Na<sup>+</sup>
Wynik: Na⁺
Przypisy w tekstach
Informacja<sup>1</sup>
Wynik: Informacja¹
Jednostki powierzchni
m<sup>2</sup>
Wynik: m²
Oznaczenia dat lub nazwisk w wyliczeniach
Jan Kowalski<sup>3</sup>
Wynik: Jan Kowalski³
Pełny przykład w HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład indeksu górnego w HTML</title>
</head>
<body>
<p>Matematyka: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>Chemia: CO<sup>2</sup> to dwutlenek węgla.</p>
<p>Jednostka powierzchni: 10 m<sup>2</sup></p>
<p>Przypis: Źródło informacji<sup>5</sup></p>
</body>
</html>
Dobre praktyki
- Używaj indeksu górnego – tylko tam, gdzie jest to uzasadnione kontekstowo (głównie potęgi, wzory, przypisy);
- W przypadku większej ilości tekstu do podniesienia – rozważ alternatywne sposoby formatowania, aby nie pogarszać czytelności;
- Stosuj indeks górny razem z poprawnym opisem w tekście – dla osób korzystających z czytników ekranów, gdy jest to istotne z punktu widzenia dostępności.
Podsumowanie
Aby zrobić indeks górny w HTML, wystarczy użyć znacznika <sup>. Jest to rozwiązanie uniwersalne, powszechnie wspierane przez przeglądarki internetowe oraz stosowane zarówno w nauce, jak i w codziennych tekstach. Warto wiedzieć, że istnieje także analogiczny znacznik <sub> dla indeksu dolnego (np. H2O).
Znajomość znacznika <sup> pozwoli poprawnie formatować treści matematyczne, chemiczne i inne specjalistyczne zapisy na stronach internetowych.
