วิธีจัดรูปแบบ Keyboard Input ด้วยแท็ก kbd ใน HTML

แท็ก <kbd> (Keyboard Input) ใช้สำหรับแสดงคีย์หรือการกดคีย์บอร์ดที่ผู้ใช้ต้องกด Browser แสดงเป็น monospace font โดยค่าเริ่มต้น

ตัวอย่างพื้นฐาน

<!DOCTYPE html>
<html>
<body>
  <p>Two special keys in keyboard are: <kbd>Ctrl</kbd>, <kbd>Alt</kbd>.</p>
  <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
  <p>Press <kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Esc</kbd></kbd> to open Task Manager.</p>
</body>
</html>

ผลลัพธ์

Two special keys in keyboard are: Ctrl, Alt.

Press Ctrl + C to copy.

Press Ctrl + Shift + Esc to open Task Manager.

Nested kbd (HTML5)

• <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> - ทั้งชุดเป็น input หนึ่งชุด
• Outer kbd = entire input, Inner kbd = individual keys

CSS Styling สำหรับ kbd

kbd {
  font-family: ui-monospace, SFMono-Regular, 'Fira Code', monospace;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  box-shadow: 0 1px 0 #999;
  font-size: 0.85em;
  white-space: nowrap;
}

kbd kbd { /* nested */
  padding: 0.1em 0.3em;
  margin: 0 0.1em;
}

Semantic Tags ที่เกี่ยวข้อง

ตัวอย่างครบชุด

<p>To commit changes:</p>
<pre><code>$ <kbd>git add .</kbd>
$ <kbd>git commit -m "Initial commit"</kbd>
<samp>[main abc123] Initial commit
 1 file changed, 10 insertions(+)</samp></code></pre>