Kalau lo sering ngoding atau belajar HTML, pasti sering ketemu sama elemen-elemen khusus buat nulis kode di dalam halaman web. Nah, di artikel ini, kita bakal bahas elemen-elemen HTML yang sering dipakai buat nampilin kode, output program, sampai variabel.
Langsung aja, yuk kita bahas satu per satu!
1. HTML <kbd>
Buat Keyboard Input
Elemen <kbd>
dipakai buat nunjukin input yang harus diketik sama user di keyboard. Biasanya, ini sering dipakai di dokumentasi atau tutorial. Contohnya gini:
<p>Tekan <kbd>Ctrl</kbd> + <kbd>C</kbd> buat copy teks.</p>
HTMLKalau ditampilin di browser, jadinya kayak gini:

Elemen ini bikin teks keliatan beda biar lebih jelas kalau itu adalah input dari keyboard.
2. HTML <samp>
Buat Output Program
Kalau lo mau nampilin hasil output dari program, pakai elemen <samp>
. Biasanya, ini dipakai buat nunjukin apa yang bakal muncul di layar setelah menjalankan suatu perintah.
Contohnya gini:
<p>Output dari program:</p>
<p><samp>Hello, World!</samp></p>
HTMLHasilnya di browser bakal kayak gini:

Jadi, kalau lo bikin tutorial coding, elemen ini bisa banget dipakai biar output program lo lebih gampang dibaca.
3. HTML <code>
Buat Menampilkan Kode
Kalau lo mau nampilin potongan kode di dalam teks HTML, pakai elemen <code>
. Biasanya, ini sering digabung sama <pre>
buat menjaga format indentasi.
Contohnya:
<pre><code>
function hello() {
console.log("Hello, World!");
}
</code></pre>
HTMLHasilnya:

Kalau ditampilin di browser, tampilannya bakal tetap rapi kayak di editor kode.
4. Cara Menjaga Line-Break di HTML
Kalau lo mau nulis kode atau teks yang harus tetap mempertahankan format dan line-break (gak kejadian semuanya numpuk di satu baris), pakai elemen <pre>
.
Contohnya:
<pre>
Line pertama
Line kedua
Line ketiga
</pre>
HTMLHasilnya di browser bakal tetap rapi sesuai formatnya:

Elemen ini penting banget kalau lo pengen nampilin kode atau teks dengan format khusus.
5. HTML <var>
Buat Variabel
Elemen <var>
dipakai buat nunjukin variabel dalam teks, biasanya di dalam dokumentasi atau penjelasan kode.
Contohnya:
<p>Gunakan rumus <var>x</var> = <var>y</var> + 2 untuk menghitung nilai x.</p>
HTMLDi browser, tampilannya bakal kayak gini:

Variabelnya jadi miring biar lebih gampang dikenali.
6. Kesimpulan
Jadi, elemen-elemen HTML ini bisa lo pakai buat berbagai keperluan:
<kbd>
→ buat input dari keyboard<samp>
→ buat output program<code>
→ buat nampilin kode<pre>
→ buat menjaga format teks<var>
→ buat nunjukin variabel
Dengan pakai elemen-elemen ini, lo bisa bikin dokumentasi yang lebih jelas dan enak dibaca.
Kalau lo sering bikin tutorial, dokumentasi, atau blog tentang coding, elemen-elemen di atas bakal berguna banget. Selain bikin tampilan lebih rapi, ini juga bantu pembaca lebih gampang ngerti apa yang lo tulis.
Jadi, jangan ragu buat mulai pakai HTML Computer Code Elements di website atau blog lo!
Komentar