Inline Text Semantics

Prosa teknis menyimpan beragam teks kecil yang maknanya khusus: potongan kode, singkatan, tanggal, suntingan, hingga rumus kimia. HTML menyediakan kumpulan elemen inline text semantics yang masing-masing memberi label makna pada teks sekecil apa pun. Label ini dibaca browser, pembaca layar, dan mesin pencari, sementara teksnya tetap mengalir di dalam paragraf. Pada Chapter ini kita memetakan seluruh anggotanya, lalu membedah delapan elemen yang paling sering dipakai.

Peta Elemen Inline #

Tabel berikut merangkum elemen-elemen utama beserta peran dan contohnya:

Seluruhnya termasuk phrasing content sehingga sah berada di dalam p, sedangkan pre yang kerap berpasangan dengan code kita simpan untuk Chapter Preformatted Text karena perilakunya berbeda.

code, kbd, samp, dan var #

Empat elemen pertama membentuk keluarga konten komputer. Elemen code menandai fragmen kode dan browser menampilkannya dengan font monospace. Elemen kbd menandai tombol keyboard yang ditekan pengguna, samp menandai keluaran program, dan var menandai nama variabel. Dengan kombinasi ini, panduan berisi tombol, kode, dan keluaran program terbaca maknanya oleh alat bantu, bukan hanya oleh mata.

abbr dan time #

Elemen abbr menandai singkatan, dengan atribut title menyimpan bentuk penuhnya yang tampil sebagai tooltip saat kursor menahannya. Atribut title sendiri adalah global attribute dari Chapter Global Attributes. Bentuk penuh cukup diperluas sekali pada kemunculan pertama.

Elemen time membungkus tanggal atau jam yang tampil ke pengunjung, sedangkan atribut datetime menyimpan nilai standar ISO 8601 untuk dibaca mesin: mesin pencari memahami tanggal publikasi, dan aplikasi kalender membaca jadwal otomatis:

<p>Latihan bertanggal <time datetime="2025-03-15">15 Maret 2025</time>.</p>

Teks yang tampil boleh berformat apa pun karena nilai untuk mesin terletak pada atributnya.

del, ins, sub, dan sup #

Pasangan del dan ins mendokumentasikan suntingan: del menandai konten yang dihapus, ins menandai konten yang disisipkan, misalnya pada revisi harga atau jadwal. Keduanya menerima atribut datetime untuk mencatat waktu suntingan dan cite yang merujuk alasan perubahan.

Elemen sub dan sup menggeser teks setengah baris ke bawah atau ke atas, sebagaimana dibutuhkan rumus kimia seperti H₂O, notasi matematika seperti x², serta penanda catatan kaki. Penulisan dengan elemen menjaga maknanya tetap benar dibanding mengandalkan ukuran huruf kecil.

Contoh File Lengkap #

File berikut merangkai elemen-elemen di atas dalam satu log latihan. Simpan sebagai contoh-inline-semantics.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Log Latihan Budi</title>
</head>
<body>
  <h1>Log Latihan Budi</h1>

  <p>Tekan <kbd>Ctrl</kbd> + <kbd>S</kbd>, lalu editor menampilkan pesan <samp>Dokumen tersimpan</samp>.</p>

  <p>Fungsi <code>hitungDiskon()</code> menerima parameter <var>harga</var> dan <var>persen</var>.</p>

  <p>Singkatan <abbr title="HyperText Markup Language">HTML</abbr> diperluas saat pertama kali muncul.</p>

  <p>Latihan bertanggal <time datetime="2025-03-15">15 Maret 2025</time> selesai tepat waktu.</p>

  <p>Rencana awal: <del>latihan setiap hari</del> <ins>latihan tiga kali sepekan</ins>.</p>

  <p>Rumus air ditulis H<sub>2</sub>O, sedangkan kuadrat ditulis x<sup>2</sup>.</p>

  <p><small>Catatan: jadwal latihan dapat berubah sewaktu-waktu.</small></p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - "Ctrl" berbingkai tipis, "Dokumen tersimpan" dalam font monospace
  - Nama fungsi dan variabel tampil monospace
  - Singkatan HTML menampilkan tooltip bentuk penuh saat kursor menahannya
  - "latihan setiap hari" dicoret, "latihan tiga kali sepekan" digarisbawahi
  - Angka 2 turun pada H2O, angka 2 naik pada x2

Mari kita telaah peran setiap baris:

1. Baris 11 (kbd dan samp): tombol dan keluaran program berlabel makna, bukan sekadar teks monospace.
2. Baris 13 (code dan var): nama fungsi memakai code, sedangkan nama variabel memakai var.
3. Baris 15 (abbr): atribut title menyimpan bentuk penuh singkatan.
4. Baris 17-21 (time, del, ins): tanggal berisi nilai machine-readable, dan pasangan suntingan mendokumentasikan perubahan rencana.
5. Baris 23-25 (sub, sup, small): rumus memakai geseran posisi yang benar, dan catatan kecil memakai small.

Elemen-elemen inline kini siap memperkaya prosa kita. Kebutuhan berikutnya adalah menampilkan teks yang format aslinya harus dipertahankan persis, dan alatnya kita pelajari pada Chapter Preformatted Text.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen code
• MDN Web Docs — Elemen abbr
• MDN Web Docs — Elemen time
• WHATWG — HTML Living Standard: Text-level semantics

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Log Latihan Budi</title>
</head>
<body>
  <h1>Log Latihan Budi</h1>

  <p>Tekan <kbd>Ctrl</kbd> + <kbd>S</kbd>, lalu editor menampilkan pesan <samp>Dokumen tersimpan</samp>.</p>

  <p>Fungsi <code>hitungDiskon()</code> menerima parameter <var>harga</var> dan <var>persen</var>.</p>

  <p>Singkatan <abbr title="HyperText Markup Language">HTML</abbr> diperluas saat pertama kali muncul.</p>

  <p>Latihan bertanggal <time datetime="2025-03-15">15 Maret 2025</time> selesai tepat waktu.</p>

  <p>Rencana awal: <del>latihan setiap hari</del> <ins>latihan tiga kali sepekan</ins>.</p>

  <p>Rumus air ditulis H<sub>2</sub>O, sedangkan kuadrat ditulis x<sup>2</sup>.</p>

  <p><small>Catatan: jadwal latihan dapat berubah sewaktu-waktu.</small></p>
</body>
</html>