Tutorial Text HTML Part 10: Tag HTML Untuk Penulisan Hal Teknis (tag samp, kbd, dan var)

Selain tag <pre> dan tag <code>, di dalam HTML masih terdapat beberapa tag yang berkaitan dengan hal teknis, yakni tag <samp>, tag <kbd>, dan tag <var>. Ketiga tag ini umumnya hanya ditemui dalam pembuatan konten web yang banyak melibatkan penulisan kode program. Ketiga tag ini lebih berfungsi kedalam pembuatan struktur HTML, dibandingkan tampilan.


Tag <samp> untuk membuat Program Sample

Tag <samp> adalah kependekan dari Program Sample. Tag ini diperuntukkan untuk contoh kode program. Web browser akan menampilkan text di dalam tag ini dengan font monospace, namun akan menghilangkan spasi. Tag ini akan ditampilkan mirip seperti tag <code>.

Tag <samp> termasuk kelompok inline level element, dan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <samp> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>HTML adalah singkatan dari 
<samp>Hypertext Markup           Language</samp></p>
</body>

</html>

Contoh Penulisan tag samp dalam HTML


Tag <kbd> untuk Penulisan Keyboard, dan tag <var> untuk Variabel

Tag <kbd> adalah singkatan dari keyboard. Tag ini diperuntukkan untuk text yang berisi text inputan keyboard. Text yang berada di dalam tag ini akan ditampilkan menggunakan font monospace.

Tag <var> adalah singkatan dari variabel. Tag ini diperuntukkan untuk text yang berisi variabel matematika atau variabel program. Text yang berada di dalam tag ini akan ditampilkan dengan baris miring (italic).

Berikut adalah contoh penggunaan tag <kbd> dan <var> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>Tekan tombol <kbd>SHIFT</kbd> untuk mengubah case.
<p>Variabel <var>a</var> akan berisi nilai integer</p>
</body>

</html>

Contoh Penulisan tag kbd dan tag var dalam HTMLKetiga tag yang kita bahas disini lebih ditujukan untuk membuat struktur halaman HTML. Struktur ini akan berguna terutama jika halaman web ditampilkan dengan web browser ‘khusus‘ seperti screen reader yang akan menyebutkan bagian tag tertentu seperti ketiga tag ini secara berbeda.


Tutorial Terkait:

9 Comments

  1. pak D Didik
    27 May 15
    • Andre
      27 May 15
  2. frengki
    23 Aug 15
    • Andre
      24 Aug 15
  3. faiz
    25 Dec 16
    • Andre
      25 Dec 16
  4. aan
    14 Aug 17
    • Andre
      16 Aug 17

Add Comment