Pernah baca tutorial coding di blog yang nampilin kode pake font monospace, plus shortcut keyboard yang dibungkus tombol-tombol kecil cantik? Itu pakai tag-tag teknis HTML khusus: <code>, <pre>, <kbd>, <samp>. Bukan cuma soal styling — screen reader dan mesin pencari memperlakukan tag-tag ini sebagai technical content, bukan prosa biasa. Jadi tutorial kamu lebih readable + lebih bagus untuk SEO + accessibility.
💡 Aturan praktis. Kalau kamu lagi nulis tutorial atau dokumentasi, pakai tag yang sesuai dengan makna —
<kbd>untuk tombol keyboard,<samp>untuk output,<code>untuk fragment code,<pre>untuk multi-baris. Jangan semuanya dibungkus<span class="code">— itu cuma styling tanpa makna.
<code> — Code Inline
Potongan kode inline di dalam teks:
<p>Pakai <code>Array.map()</code> untuk transformasi data.</p>
<pre> — Preformatted Block
Pertahankan spasi dan newline apa adanya. Sering dipasangkan dengan <code> untuk blok kode multi-baris:
<pre><code>function sapa(nama) {
return "Halo, " + nama;
}</code></pre>
<kbd> — Tombol Keyboard
Input keyboard dari user (tombol yang ditekan):
<p>Simpan dengan <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<samp> — Sample Output Program
<p>Program mencetak: <samp>Hello World</samp></p>
Browser memberi style monospace default untuk keempatnya. Yang lebih penting: screen reader dan mesin pencari memperlakukan konten ini sebagai technical content, bukan prosa biasa.
🎭 Analogi sehari-hari
Bayangin kamu lagi nulis tutorial masak di blog. Pas sebut "tekan tombol mixer 2 kali" — itu beda banget makna sama "tambah 2 sendok gula". Yang pertama itu instruksi tindakan, yang kedua bahan. HTML juga gitu: <kbd> itu kayak ngomong "ini tombol yang harus user pencet" (Ctrl+S), <samp> itu kayak nunjukin "ini hasil yang keluar di layar" (Hello World), <code> buat sebut nama tool/fungsi (kayak Array.map()), dan <pre> buat nulis blok masakan multi-baris yang spasinya gak boleh diutak-atik. Browser otomatis kasih font monospace, tapi yang lebih penting screen reader paham ini istilah teknis bukan prosa biasa.
⚠️ Jebakan yang sering ditemui
<pre>preserve whitespace LITERAL — termasuk indent dan newline source. Hati-hati copy-paste.<code>standalone tidak preserve whitespace — perlu dibungkus<pre>untuk multi-line.<kbd>untuk INPUT user,<samp>untuk OUTPUT program — sering ketukar.- Browser default monospace — kustom CSS untuk syntax highlighting (Prism, highlight.js).
- Escape karakter
<,>,&di dalam<code>— kalau tidak, dianggap tag. - Markdown
```jadi<pre><code>otomatis di static site generator. - Accessibility:
<code>tidak diumumkan screen reader by default — ARIA jika perlu emphasis.
TL;DR: Tag teknis HTML semantik. <code> = potongan kode inline. <pre> = preserve whitespace + newline (preformatted). Multi-line code = <pre><code>...</code></pre>. <kbd> = INPUT keyboard user (Ctrl+S). <samp> = OUTPUT program. Browser default monospace; screen reader + mesin pencari treat sebagai technical content. Wajib escape </>/& di dalam (</>/&). Pasangkan dengan Prism/highlight.js untuk syntax coloring.
