Code, Kbd, Samp, dan Var

Halaman teknis sering memuat “teks mesin”: nama fungsi, tombol keyboard, keluaran program, dan variabel rumus. HTML menyediakan empat elemen inline untuk menandainya: code, kbd, samp, dan var. Keempatnya tidak mengubah makna kalimat, tetapi memberi tahu browser bahwa teks tersebut berasal dari dunia komputer.

Chapter ini membahas keempat elemen satu per satu, lalu menutup dengan aturan pemakaian code bersama pre untuk blok kode.

code: Potongan Kode #

Aturan code: elemen ini membungkus potongan kode komputer di dalam kalimat — nama fungsi, nama elemen, atau satu ekspresi singkat:

<p>Fungsi <code>querySelector()</code> mengambil elemen pertama yang cocok.</p>

1. Baris 1 (<code>querySelector()</code>): nama fungsi ditandai sehingga tampil dengan huruf monospace dan terbedakan dari prosa di sekitarnya.

kbd: Masukan Keyboard #

Aturan kbd: elemen ini menandai tombol atau kombinasi tombol yang ditekan pengguna:

<p>Simpan berkas dengan menekan <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

1. Baris 1 (<kbd>Ctrl</kbd>+<kbd>S</kbd>): dua tombol ditandai terpisah dan tanda plus dibiarkan polos; bentuk satu penanda — <kbd>Ctrl+S</kbd> — juga sah dipakai.

samp: Keluaran Program #

Aturan samp: elemen ini menandai keluaran contoh dari program atau sistem:

<p>Saat berkas tidak ditemukan, skrip menampilkan <samp>Error: berkas tidak ditemukan</samp>.</p>

1. Baris 1 (<samp>...</samp>): pesan keluaran dipisahkan dari kalimat penjelasnya, sehingga pembaca tahu bagian mana yang muncul di layar.

var: Variabel #

Aturan var: elemen ini menandai nama variabel pada matematika atau pemrograman:

<p>Luas persegi panjang dihitung dari <var>panjang</var> × <var>lebar</var>.</p>

1. Baris 1 (<var>panjang</var> dan <var>lebar</var>): dua besaran ditandai; bawaan browser menampilkannya miring, seperti notasi variabel pada tulisan ilmiah.

Empat Elemen Sekilas #

Hasil Render untuk contoh-contoh di atas: querySelector(), tombol Ctrl dan S, serta pesan Error tampil dengan huruf monospace; kata panjang dan lebar tampil miring. Tampilan ini bawaan browser — tanpa satu baris CSS pun.

code dan pre #

code dipakai untuk potongan pendek di dalam kalimat. Untuk blok kode beberapa baris — dengan baris baru, spasi, dan indentasi yang harus dipertahankan — kita memakai elemen pre, umumnya membungkus code di dalamnya. Pasangan pre dan code dibahas tuntas pada chapter Pre.

Ringkasan #

• code untuk potongan kode; kbd untuk tombol keyboard; samp untuk keluaran program; var untuk variabel.
• code, kbd, dan samp tampil monospace secara bawaan; var tampil miring.
• Keempatnya elemen inline — satu kalimat boleh memuat beberapa penanda sekaligus.
• Blok kode multi-baris memakai pre yang membungkus code (chapter Pre).

Chapter berikutnya membahas dua elemen pemisah: br untuk pemotongan baris dan hr untuk pemisah topik.