Format Teks Lanjutan: sub, sup, mark, code

Kotak Peralatan Tukang Tulis

Bayangkan kamu seorang siswa yang sedang mencatat pelajaran. Di kotak pensilmu ada banyak alat: stabilo kuning untuk menandai hal penting, pulpen kecil untuk catatan kaki, dan spidol khusus untuk menulis rumus. Tag format teks lanjutan di HTML persis seperti itu: seperangkat alat presisi untuk makna-makna kecil yang tidak bisa diwakili b atau i biasa.

Kenapa tidak cukup memakai b dan i untuk semuanya? Karena HTML modern peduli pada makna, bukan cuma tampilan. H<sub>2</sub>O bukan sekadar "angka 2 yang kecil", melainkan penanda kimia bahwa ada dua atom hidrogen. Screen reader yang cerdas bisa membacanya dengan tepat, dan mesin pencari memahami konteksnya. Inilah alasan tag-tag ini ada: memberi makna pada detail teks.

Kenalan dengan Tujuh Tagnya

sub (subscript): teks turun ke bawah. Dipakai untuk rumus kimia dan notasi ilmiah.

<p>Rumus air adalah H<sub>2</sub>O, sedangkan glukosa adalah C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>

sup (superscript): teks naik ke atas. Dipakai untuk pangkat matematika, satuan luas/volume, dan penanda catatan kaki.

<p>Luas ruangan itu 25 m<sup>2</sup> dan volumenya 60 m<sup>3</sup>.</p>
<p>Teori relativitas dirumuskan sebagai E = mc<sup>2</sup>.</p>
<p>Hasil penelitian ini signifikan<sup><a href="#catatan-1">1</a></sup>.</p>

mark: stabilo kuning. Menandai bagian teks yang relevan atau disorot, misalnya kata kunci yang cocok dengan pencarian.

<p>Hasil pencarian untuk <mark>"rendang"</mark>: ditemukan 12 resep.</p>

small: teks kecil untuk catatan sampingan. Cocok untuk catatan kaki, keterangan legal, atau disclaimer yang secara hierarki kurang penting dari teks utama.

<p>Harga sudah termasuk pajak.</p>
<p><small>*Syarat dan ketentuan berlaku. Promo tidak dapat digabung.</small></p>

abbr: singkatan dengan penjelasan. Atribut title menyimpan kepanjangan singkatan, yang muncul saat kursor diarahkan ke sana.

<p><abbr title="HyperText Markup Language">HTML</abbr> adalah bahasa struktur web.</p>

code: potongan kode. Menandai teks sebagai kode program, biasanya tampil dengan font monospace.

<p>Gunakan fungsi <code>print()</code> untuk menampilkan teks di Python.</p>

kbd: input keyboard. Menandai tombol atau kombinasi tombol yang harus ditekan pengguna.

<p>Tekan <kbd>Ctrl</kbd> + <kbd>S</kbd> untuk menyimpan dokumen.</p>

Contoh 1: Paragraf Sederhana Bertabur Format

Contoh kecil yang menggabungkan beberapa tag sekaligus dalam satu paragraf:

<p>
  Menurut <abbr title="Badan Pusat Statistik">BPS</abbr>,
  luas lahan pertanian menyusut 2 m<sup>2</sup> per kapita.
  Temuan <mark>penting</mark> ini dirangkum dalam laporan
  <code>lahan-2026.pdf</code><sup><a href="#ref-2">2</a></sup>.
</p>
<p>
  <small>
    2. Data diolah dari survei pertanian, tekan
    <kbd>Ctrl</kbd> + <kbd>F</kbd> lalu ketik "lahan"
    untuk mencari di dokumen asli.
  </small>
</p>

Perhatikan bagaimana setiap tag punya pekerjaan yang jelas: abbr menjelaskan singkatan, sup menaikkan angka satuan dan penanda catatan kaki, mark menyorot kata kunci, code menandai nama file, small mengecilkan catatan kaki, dan kbd menandai tombol keyboard.

Contoh 2: Artikel Sains yang Realistis

Sekarang contoh yang lebih nyata: potongan artikel kimia untuk blog edukasi.

<article>
  <h1>Reaksi Fotosintesis</h1>
  <p>
    Fotosintesis mengubah karbon dioksida (CO<sub>2</sub>)
    dan air (H<sub>2</sub>O) menjadi glukosa
    (C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>) dengan bantuan
    cahaya matahari<sup><a href="#sumber-1">1</a></sup>.
  </p>
  <p>
    Laju reaksi diukur dalam <mark>mikromol per m<sup>2</sup>
    per detik</mark>, satuan standar dalam fisiologi tumbuhan.
  </p>
  <h2>Persamaan Reaksi</h2>
  <p>
    <code>6CO2 + 6H2O --cahaya--&gt; C6H12O6 + 6O2</code>
  </p>
  <p>
    <small>
      1. Campbell, <abbr title="Biologi, edisi kesebelas">Biology 11e</abbr>,
      Bab 10. Rumus disederhanakan; koefisien reaksi diabaikan.
    </small>
  </p>
</article>

Contoh ini menunjukkan kekuatan sebenarnya dari tag-tag format: artikel ilmiah yang benar-benar bisa dibaca mesin maupun manusia tanpa kehilangan makna kimianya.

Kesalahan Umum Pemula

Salah: memakai b untuk semua yang kecil atau naik-turun.

<!-- SALAH: tidak ada makna kimia -->
<p>Rumus air adalah H<b>2</b>O.</p>

<!-- BENAR -->
<p>Rumus air adalah H<sub>2</sub>O.</p>

Salah: sup untuk catatan kaki tanpa tautan. Angka catatan kaki yang tidak bisa diklik membuat pembaca menggulir manual mencari catatannya. Bungkus dengan a yang mengarah ke id catatan kaki.

<!-- SALAH -->
<p>...penelitian terbaru<sup>3</sup>.</p>

<!-- BENAR -->
<p>...penelitian terbaru<sup><a href="#catatan-3">3</a></sup>.</p>

Salah: mark dipakai sebagai hiasan permanen. mark berarti "bagian ini disorot karena relevan dengan konteks saat ini", seperti hasil pencarian. Kalau teksnya memang selalu penting, pakai strong. Stabilo yang dipakai di mana-mana sama dengan tidak memakai stabilo.

Salah: code untuk blok kode multi-baris tanpa pre. Tag code hanya mengubah makna dan font, ia tidak menjaga baris baru. Untuk blok kode beberapa baris, bungkus dengan pre:

<!-- SALAH: barisnya akan menyatu -->
<code>baris satu
baris dua</code>

<!-- BENAR -->
<pre><code>baris satu
baris dua</code></pre>

Salah: abbr tanpa atribut title. Tanpa title, tag abbr tidak memberi informasi apa-apa, hanya tampilan titik-titik di bawah teks. Selalu sertakan kepanjangannya.

Catatan teknis: sub, sup, small, dan mark memengaruhi tampilan secara bawaan, tetapi jangan tertipu: pilihlah berdasarkan makna, bukan tampilan. Kalau suatu hari kamu butuh teks kecil yang bukan catatan sampingan, pakai CSS font-size, bukan small. Makna yang tepat membuat halamanmu awet dibaca oleh teknologi masa depan, bukan cuma browser hari ini.