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

46

Yodha.web.id – 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</h3>
<p>HTML adalah singkatan dari
<samp>Hypertext Markup           Language</samp></p>
</body>
</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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</h3>
<p>Tekan tombol <kbd>SHIFT</kbd> untuk mengubah case.
<p>Variabel <var>a</var> akan berisi nilai integer</p>
</body>
</html>

Ketiga 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.