Dokumentasi HTML interaktif: Superscript

Q: Bagaimana cara menulis superscript di HTML?

Bungkus teks yang dinaikkan dengan : x 2 menampilkan x kuadrat, 1 st sebuah bilangan urutan. Browser menggambarnya lebih kecil dan naik di atas garis dasar.

Q: Bagaimana cara menulis subscript di HTML?

Pakai : H 2 O untuk air, x 1 untuk indeks. Teksnya digambar lebih kecil dan turun di bawah garis dasar.

Q: Bagaimana cara menulis x kuadrat di HTML?

Pakai x 2 atau karakter siap pakai x², yang juga bisa kamu ketik sebagai entity ². Karakter itu cukup untuk kuadrat dan kubik; berfungsi untuk pangkat apa pun, seperti 2 n+1 .

Q: Bolehkah aku memakai CSS, bukan ?

vertical-align: super dengan font-size yang lebih kecil terlihat sama, tapi dan membawa makna: "m2" dan "m 2 " adalah nilai yang berbeda. Pakai tag-nya kalau posisi naik atau turun itu bagian dari konten.

Superscript dan Subscript HTML: Tag sup dan sub

Tulis teks superscript dengan dan teks subscript dengan : pangkat, bilangan urutan, penanda catatan kaki dan rumus kimia. Pelajari penggunaan umumnya, cara mencegahnya merenggangkan jarak baris, dan kapan karakter Unicode atau MathML lebih cocok.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Cara menulis superscript di HTML

Bungkus teks yang dinaikkan dengan . Browser menampilkannya lebih kecil dan naik di atas baris. Pasangannya, , menampilkan teks lebih kecil dan turun:

<!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>

 dan  bersifat inline dan bisa berisi elemen inline lain, jadi 2n+1 atau xi juga berfungsi.

Penggunaan umum

Kamu ingin	Tulis	Hasil
Pangkat	`10<sup>3</sup>`	10 pangkat 3
Bilangan urutan	`2<sup>nd</sup>`	2nd dengan huruf yang dinaikkan
Penanda catatan kaki	`text<sup><a href="#n1">1</a></sup>`	Angka 1 yang dinaikkan dan bisa diklik
Rumus kimia	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glukosa
Indeks atau basis	`x<sub>1</sub>`, `log<sub>2</sub>`	Angka 1 dan 2 yang diturunkan
Merek dagang	`Brand<sup>TM</sup>` atau `Brand™`	TM yang dinaikkan

Pakai tag-nya kalau posisi itu bagian dari makna: m2 dan m2 adalah hal yang berbeda. Untuk teks kecil yang hanya diberi gaya kecil (label, badge), pakai CSS.

Catatan kaki dengan sup

Penanda catatan kaki adalah link superscript ke catatan di bagian bawah. Beri setiap catatan sebuah id dan arahkan link-nya ke sana:

<!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>

Klik sebuah angka untuk melompat ke catatannya, lalu "Back" untuk kembali. Menghapus garis bawah dari link kecil itu membuat paragraf tetap rapi, sementara warna link tetap menandainya sebagai sesuatu yang bisa diklik.

Menjaga jarak baris tetap rata

Secara default,  atau  bisa membuat barisnya lebih tinggi daripada baris di sekitarnya, sehingga paragraf dengan beberapa pangkat terlihat berjarak tidak rata. Mengatur line-height: 0 pada keduanya memperbaikinya:

<!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>

Kotak abu-abu lebih tinggi karena baris dua dan empat terdorong menjauh. Di kotak hijau, setiap baris punya tinggi yang sama. Tambahkan aturan itu sekali ke stylesheet dasarmu dan lupakan saja.

Karakter Unicode dan MathML

Untuk beberapa kasus umum ada karakter siap pakai: ² (²), ³ (³), ¹ (¹), ™ (™) dan ½ (½). Karakter ini tidak butuh tag dan tidak memengaruhi tinggi baris, tapi hanya tersedia untuk beberapa angka dan huruf. Tiny text generator menunjukkan semua huruf superscript yang ada di Unicode.

Untuk rumus sungguhan (pecahan, akar, pangkat bertingkat), pakai MathML, yang dirender langsung oleh browser saat ini:

<!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> menerima basis dan pangkat; <msub> melakukan hal yang sama untuk subscript. Untuk satu pangkat di dalam kalimat,  lebih sederhana.

Kesalahan umum

Memakai  untuk membuat teks kecil. Tag ini juga menaikkan teksnya dan memberi tahu pembaca bahwa itu superscript. Pakai font-size untuk teks kecil.
Jarak baris tidak rata. Tambahkan sup, sub { line-height: 0; }.
Menulis x^2 atau H2O di teks jadi. Pakai x2 dan H2O supaya kontennya terbaca dengan benar.
Penanda catatan kaki yang terlalu kecil untuk diketuk. Di ponsel, satu angka yang dinaikkan adalah target yang sangat kecil. Tambahkan sedikit padding ke sup a, atau letakkan catatannya dekat dengan teks.

Pertanyaan yang sering diajukan

Bagaimana cara menulis superscript di HTML?

Bungkus teks yang dinaikkan dengan : x2 menampilkan x kuadrat, 1st sebuah bilangan urutan. Browser menggambarnya lebih kecil dan naik di atas garis dasar.

Bagaimana cara menulis subscript di HTML?

Pakai : H2O untuk air, x1 untuk indeks. Teksnya digambar lebih kecil dan turun di bawah garis dasar.

Bagaimana cara menulis x kuadrat di HTML?

Pakai x2 atau karakter siap pakai x², yang juga bisa kamu ketik sebagai entity ². Karakter itu cukup untuk kuadrat dan kubik;  berfungsi untuk pangkat apa pun, seperti 2n+1.

Kenapa membuat jarak baris tidak rata?

Teks yang dinaikkan bisa membuat barisnya lebih tinggi daripada baris lain di paragraf itu. Perbaiki dengan sup, sub { line-height: 0; }, yang mencegah keduanya menambah tinggi baris.

Bolehkah aku memakai CSS, bukan ?

vertical-align: super dengan font-size yang lebih kecil terlihat sama, tapi  dan  membawa makna: "m2" dan "m2" adalah nilai yang berbeda. Pakai tag-nya kalau posisi naik atau turun itu bagian dari konten.

Konsep terkait