Tutorial coding biasanya nampilin kode dan tombol keyboard dengan huruf yang beda dari teks biasa. HTML punya tag khusus buat itu: <code> buat kode, <pre> buat blok yang spasi dan barisnya harus utuh, <kbd> buat tombol keyboard, dan <samp> buat output program. Browser menampilkan semuanya pakai huruf monospace, yaitu huruf yang lebarnya sama semua, kayak di editor kode.
🧪 Tebakan cepat: di kalimat "tekan Ctrl + S", kata Ctrl itu ditandai sebagai kode atau bukan? Tebak dulu, jawabannya ada di bagian "Tombol keyboard:
<kbd>".
Kode di dalam kalimat: <code>
<p>Pakai <code>array.map()</code> buat bikin array baru dari tiap isinya.</p>
<p>dan</p>membungkus kalimatnya, jadi ini paragraf biasa.<code>adalah tag pembuka, artinya "mulai dari sini teksnya kode".array.map()adalah potongan kodenya.</code>adalah tag penutup.
Hasilnya: kalimatnya tampil biasa, cuma array.map() yang pakai huruf monospace.
Blok kode beberapa baris: <pre> dan <code>
Biasanya browser merapatkan Enter dan spasi jadi satu spasi. <pre> (dari preformatted) mencegah itu: spasi dan baris di dalamnya tampil persis kayak yang kamu tulis. Blok kode ditulis pakai <code> di dalam <pre>:
<pre><code>function sapa(nama) {
return `Halo, ${nama}`
}</code></pre>
<pre>ada di luar. Tugasnya menjaga spasi dan baris.<code>ada di dalam. Tugasnya bilang "isinya kode".- Tutupnya kebalikan dari bukanya:
</code>dulu, baru</pre>.
Tanpa <pre>, tiga baris itu nyambung jadi satu baris.
Tombol keyboard: <kbd>
Ctrl itu bukan kode, tapi tombol. Tombol yang ditekan pengguna ditandai pakai <kbd> (dari keyboard). Taruh di dalam kalimat, sama kayak <code>:
<p>Tekan <kbd>Ctrl</kbd> + <kbd>S</kbd> untuk menyimpan.</p>
- Tiap tombol dapat
<kbd>sendiri. Dua tombol, dua<kbd>. - Tanda
+di antaranya cuma teks biasa, di luar<kbd>. - Nama tombolnya ditulis kayak di keyboard:
Ctrl, dengan C besar.
Output program: <samp>
<samp> menandai teks yang dicetak program ke layar:
<p>Program mencetak: <samp>Halo Dunia</samp></p>
Gampang ketukar dengan <kbd>, jadi ingat arahnya: <kbd> itu yang diketik pengguna, <samp> itu yang keluar dari program.
⚠️ Jebakan yang sering ketemu
- Satu
<kbd>buat dua tombol.<kbd>Ctrl + S</kbd>terhitung satu tombol. Pisah jadi<kbd>Ctrl</kbd> + <kbd>S</kbd>. - Salah ketik nama tag.
<kdb>bukan tag HTML. Browser gak protes, tapi tag itu gak punya arti apa-apa. - Paragraf dan blok kode saling masuk.
<pre>gak boleh ada di dalam<p>, nanti browser menutup<p>-nya lebih awal. Tulis blok kode dan paragrafnya berurutan, terpisah.
TL;DR: <code> buat potongan kode di dalam kalimat. Blok kode beberapa baris: <pre><code>...</code></pre>, dengan <pre> di luar biar spasi dan barisnya terjaga. <kbd> buat tombol keyboard, satu tombol satu <kbd>, di dalam paragraf. <samp> buat output program. Semuanya tampil monospace.
