Dokumentacja HTML z przykładami: Indeks górny

Q: Jak napisać indeks górny w HTML?

Obejmij podniesiony tekst znacznikiem : x 2 pokazuje x do kwadratu, 1 st angielski liczebnik porządkowy. Przeglądarka rysuje go mniejszym i podniesionym ponad linię bazową.

Q: Jak napisać indeks dolny w HTML?

Użyj : H 2 O dla wody, x 1 dla indeksu. Jest rysowany mniejszy i obniżony poniżej linii bazowej.

Q: Jak zapisać x do kwadratu w HTML?

Albo x 2 , albo gotowy znak x², który można też wpisać jako encję ². Znak sprawdza się przy kwadratach i sześcianach; działa dla dowolnego wykładnika, na przykład 2 n+1 .

Q: Czy mogę użyć CSS zamiast ?

vertical-align: super z mniejszym font-size wygląda tak samo, ale i niosą znaczenie: "m2" i "m 2 " to różne wartości. Używaj znaczników, gdy podniesienie lub obniżenie jest częścią treści.

Indeks górny i dolny w HTML: znaczniki sup i sub

Pisz indeks górny przez i indeks dolny przez : potęgi, liczebniki porządkowe, odnośniki do przypisów i wzory chemiczne. Poznaj typowe zastosowania, sposób na nierówne odstępy między liniami i sytuacje, w których lepiej pasuje znak Unicode albo MathML.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Jak napisać indeks górny w HTML

Obejmij podniesiony tekst znacznikiem . Przeglądarka pokazuje go mniejszym i podniesionym ponad linię. Jego para, , pokazuje tekst mniejszy i obniżony:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 i  są elementami inline i mogą zawierać inne elementy inline, więc 2n+1 albo xi też działają.

Typowe zastosowania

Potrzebujesz	Napisz	Wynik
Potęgi	`10<sup>3</sup>`	10 do potęgi 3
Angielskiego liczebnika porządkowego	`2<sup>nd</sup>`	2nd z podniesionymi literami
Odnośnika do przypisu	`text<sup><a href="#n1">1</a></sup>`	Podniesiona, klikalna 1
Wzoru chemicznego	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glukoza
Indeksu albo podstawy	`x<sub>1</sub>`, `log<sub>2</sub>`	Obniżone 1 i 2
Znaku towarowego	`Brand<sup>TM</sup>` albo `Brand™`	Podniesione TM

Używaj tych znaczników, gdy położenie jest częścią znaczenia: m2 i m2 to różne rzeczy. Dla małego tekstu, który ma tylko wyglądać na mały (etykieta, plakietka), użyj CSS.

Przypisy z sup

Odnośnik do przypisu to link w indeksie górnym prowadzący do notki na dole. Nadaj każdej notce id i skieruj na nią link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Kliknij numer, żeby przeskoczyć do jego notki, a "Back", żeby wrócić. Usunięcie podkreślenia z małego linku utrzymuje akapit w porządku, a kolor linku nadal pokazuje, że da się go kliknąć.

Równe odstępy między liniami

Domyślnie  albo  może sprawić, że jego linia będzie wyższa niż linie wokół, więc akapit z kilkoma potęgami wygląda na nierówno rozstawiony. Ustawienie na nich line-height: 0 to naprawia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

Szare pole jest wyższe, bo linie druga i czwarta zostały rozsunięte. W zielonym każda linia ma tę samą wysokość. Dodaj tę regułę raz do bazowego arkusza stylów i zapomnij o problemie.

Znaki Unicode i MathML

W kilku typowych przypadkach istnieją gotowe znaki: ² (²), ³ (³), ¹ (¹), ™ (™) i ½ (½). Nie potrzebują znacznika i nie wpływają na wysokość linii, ale istnieją tylko dla niektórych cyfr i liter.

Do prawdziwych wzorów (ułamki, pierwiastki, potęgi potęg) używaj MathML, który obecne przeglądarki renderują natywnie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> przyjmuje podstawę i wykładnik; <msub> robi to samo dla indeksów dolnych. Dla pojedynczej potęgi w zdaniu prostszy jest .

Częste błędy

Używanie , żeby zmniejszyć tekst. Tekst zostaje też podniesiony, a czytelnik dostaje informację, że to indeks górny. Do małego tekstu użyj font-size.
Nierówne odstępy między liniami. Dodaj sup, sub { line-height: 0; }.
Pisanie x^2 albo H2O w gotowym tekście. Użyj x2 i H2O, żeby treść czytała się poprawnie.
Odnośniki do przypisów zbyt małe do dotknięcia. Na telefonach pojedyncza podniesiona cyfra to malutki cel. Dodaj trochę paddingu do sup a albo umieść notki blisko tekstu.

Najczęściej zadawane pytania

Jak napisać indeks górny w HTML?

Obejmij podniesiony tekst znacznikiem : x2 pokazuje x do kwadratu, 1st angielski liczebnik porządkowy. Przeglądarka rysuje go mniejszym i podniesionym ponad linię bazową.

Jak napisać indeks dolny w HTML?

Użyj : H2O dla wody, x1 dla indeksu. Jest rysowany mniejszy i obniżony poniżej linii bazowej.

Jak zapisać x do kwadratu w HTML?

Albo x2, albo gotowy znak x², który można też wpisać jako encję ². Znak sprawdza się przy kwadratach i sześcianach;  działa dla dowolnego wykładnika, na przykład 2n+1.

Dlaczego sprawia, że odstępy między liniami są nierówne?

Podniesiony tekst może sprawić, że jego linia będzie wyższa niż pozostałe w akapicie. Napraw to przez sup, sub { line-height: 0; }, co sprawia, że nie zwiększają wysokości linii.

Czy mogę użyć CSS zamiast ?

vertical-align: super z mniejszym font-size wygląda tak samo, ale  i  niosą znaczenie: "m2" i "m2" to różne wartości. Używaj znaczników, gdy podniesienie lub obniżenie jest częścią treści.

Powiązane zagadnienia