Sebagian teks perlu bergeser sedikit dari garis dasar kalimat: pangkat pada satuan luas (m²), penanda catatan kaki (¹), dan angka pada rumus kimia (H₂O). Mengetik karakter Unicode ² memang bisa, tetapi cara tersebut rapuh — karakternya tidak selalu tersedia dan maknanya tidak terbaca mesin.

HTML menyediakan dua elemen inline untuk kebutuhan ini: sup untuk teks yang naik (superscript) dan sub untuk teks yang turun (subscript). Keduanya menandai makna, bukan sekadar menaikkan atau menurunkan tampilan.

sup — Superscript #

Aturan pemakaiannya: sup membungkus teks yang posisinya naik karena memang bagian dari konvensi penulisan — pangkat atau indeks matematis, satuan kuadrat seperti m², dan penanda catatan kaki seperti tanda ¹ setelah sebuah kata.

Mekanismenya: browser menampilkan isi sup terangkat ke atas garis dasar dengan ukuran huruf lebih kecil — keduanya berasal dari styling default browser. Teks di sekitarnya tidak bergeser; jarak antarbaris tetap wajar.

sub — Subscript #

Elemen sub adalah kebalikannya: isi sub diturunkan ke bawah garis dasar dengan ukuran lebih kecil. Pemakaiannya yang paling umum adalah rumus kimia — angka jumlah atom pada H₂O dan CO₂ — serta indeks bawah pada notasi matematis.

Kedua elemen ini hanya menggeser posisi teks; isi elemen tetap dibaca sebagai bagian kalimat yang utuh, sehingga urutan pembacaan tetap benar.

Contoh dalam Dokumen Mini #

Contoh berikut menggabungkan keduanya dalam catatan laboratorium milik Dewi:

html 
<h2>Catatan Laboratorium Dewi</h2>
<p>Rumus air adalah H<sub>2</sub>O dan karbon dioksida ditulis CO<sub>2</sub>.</p>
<p>Ruang uji seluas 30 m<sup>2</sup> cukup untuk lima meja kerja.</p>
<p>Temuan ini selaras dengan laporan Siti<sup>1</sup>.</p>
<p>1. Siti Rahma, Riset Kopi Arabika, 2024.</p>

Hasil Render secara naratif: angka 2 pada H₂O dan CO₂ tampil turun sedikit dan lebih kecil dari huruf di sekitarnya; angka 2 pada 30 m² dan penanda 1 setelah nama Siti tampil naik dan lebih kecil. Kalimat tetap terbaca dalam satu baris yang rapi.

Mari kita telaah kode di atas:

  1. Baris 1 (<h2>): judul bagian dokumen mini — heading dibahas pada chapter Heading.
  2. Baris 2 (H<sub>2</sub>O dan CO<sub>2</sub>): angka 2 ditandai sub karena merupakan jumlah atom dalam rumus kimia.
  3. Baris 3 (30 m<sup>2</sup>): pangkat dua pada satuan luas ditandai sup.
  4. Baris 4 (Siti<sup>1</sup>): tanda catatan kaki menempel langsung setelah kata yang dirujuknya.
  5. Baris 5: teks catatan kakinya sendiri ditulis sebagai paragraf biasa.

Ringkasan #

  • sup menaikkan teks: pangkat (m²), penanda catatan kaki (¹).
  • sub menurunkan teks: jumlah atom pada rumus kimia (H₂O), indeks bawah.
  • Pergeseran posisi dan ukuran huruf adalah styling default browser.
  • Kedua elemen tetap menjaga urutan pembacaan teks dalam kalimat.

Chapter berikutnya membahas time — elemen yang membuat tanggal dan jam dapat dibaca mesin tanpa mengubah teks yang tampil.