Pahami Penggunaan Elemen kbd, samp, code, dan var pada HTML

Pada pembahasan kali ini, materi yang akan dibahas adalah tentang code formatting (penulisan hal teknis) di HTML yang secara rinci membahas tentang penulisan perintah masukkan dari keyboard dengan tag <kbd>, penulisan contoh kode program dengan tag <samp>, penulisan kode ke HTML dengan tag <code> dan penulisan text yang berisi variabel program atau matematika dengan tag <var>.

Semua tag tersebut lebih berfungsi dalam pembuatan struktur HTML dibandingkan kearah tampilan. Sacara umum, tag-tag tersebut digunakan dalam penulisan kode program yang ditemukan pada konten web. Agar Anda lebih memahami penggunaan dari tag – tag tersebut, mari simak penjelasan dibawah ini :

A. Penggunaan elemen <kbd>

Elemen kbd merupakan singkatan dari Keyboard. Dimana tag <kbd> digunakan untuk merepresentasikan masukkan dari user (berupa karakter dari keyboard atau dari alat lainnya seperti perintah suara (voice command).

Teks atau konten yang ada didalam tag <kbd> akan ditampilkan dengan font monospace. Berikut contoh kode penggunaan tag <kbd> di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Elemen kbd di HTML</title>
 </head>
 <body>
  <p>Untuk mematikan proses, tekan <kbd>CTRL+ALT+Delete</kbd></p>
 </body>
</html>

Setelah Anda menjalankan kode diatas di web browser maka akan tampil seperti gambar dibawah ini :

B. Penggunaan elemen <samp>

Elemen samp adalah singkatan dari Program Sample yang termasuk tipe inline elemen dan mengikuti alur teks yang ada. Tag ini digunakan untuk menuliskan contoh output dari program komputer. Teks yang berada di tag <samp> akan ditampilkan oleh web browser dengan font monospace dengan menghilangkan spasi yang lebih dari satu dan mirip seperti tag <code>.

Berikut contoh kode penggunaan tag <samp> di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Elemen samp di HTML</title>
 </head>
 <body>
  <p>Mengkonversi nilai ASCII ke dalam karakter dengan menggunakan metode <samp>string.fromCharCode()</samp>
 </body>
</html>

Setelah Anda menjalankan kode diatas di web browser maka akan tampil seperti gambar dibawah ini :

C. Penggunaan elemen <code>

Tag <code> digunakan untuk menuliskan bagian kode komputer ke dalam HTML. Dimana kode komputer tersebut termasuk nama elemen XML, program komputer, nama sebuah file, atau kode – kode lain yang yang dikenali oleh komputer.

Teks yang berada di tag <samp> akan ditampilkan oleh web browser dengan font monospace dengan menghilangkan spasi yang lebih dari satu. Tag ini juga termasuk ke dalam tipe inline elemen dan mengikuti alur teks yang ada. Pada tag <samp> terdapat atribut class yang disarankan untuk digunakan guna menunjukkan bahasa dari kode komputer yang dituliskan. Misalnya, Anda akan menuliskan kode CSS maka tulislah “language-css” pada atribut class seperti <code class=”language-css”> …. </code>.

Berikut contoh kode penggunaan tag <code> di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Elemen Code di HTML</title>
 </head>
 <body>
  <p>CSS Default Setting : <code class="language-css">code{ font-family: monospace; }</code></p>
 </body>
</html>

Setelah Anda menjalankan kode diatas di web browser maka akan tampil seperti gambar dibawah ini :

D. Penggunaan elemen <var>

Elemen var merupakan singkatan dari Variabel yang digunakan untuk mendefinisikan dan menuliskan sebuah variabel program ataupun rumus matematika. Teks yang berada di tag ini akan ditampilan dalam bentuk miring (italic).

Berikut contoh kode penggunaan tag <var> di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Elemen Var di HTML</title>
 </head>
 <body>
  <p>Misalkan laba diinisialisasikan sebagai <var>x</var></p>
 </body>
</html>

Setelah Anda menjalankan kode diatas di web browser maka akan tampil seperti gambar dibawah ini :

Keempat tag yang sudah dijelaskan diatas “hampir” memiliki fungsi yang sama, tapi tentu saja penggunaannya berbeda satu sama lain. Materi belajar HTML selanjutnya mengenai cara menambahkan komentar di HTML.