<kbd>タグは、ユーザー入力を表す際に使用します。
kbd要素は、通常はユーザーによるキーボード入力を表しますが、
音声コマンド入力などのキーボード以外の入力を表す際にも使用できます。
samp要素の子孫要素としてkbd要素が配置される場合、
ユーザーが入力した内容をシステムが確認表示していることを表します。
kbd要素の子孫要素としてsamp要素が配置される場合、
システム出力に基づくユーザー入力であることを表します。
例えば、ユーザーがメニュー項目を呼び出して入力する内容などです。
以下のサンプルは、ユーザーが押すべきキーをkbd要素でマークアップしています。
kbd要素とkbd要素が入れ子になっているのは、ShiftキーとF3キーを同時に押すことを示しています。
<p>
ジョージにリンゴを食べさせるには、
<kbd>
<kbd>Shift</kbd> + <kbd>F3</kbd>
</kbd>
を押します。
</p>
ジョージにリンゴを食べさせるには、
Shift + F3
を押します。
以下のサンプルでは、ユーザーはメニュー項目を選択することで入力を行います。
kbd要素のなかにsamp要素が配置されているのは、
(この場合はメニュー操作を通じた)システム出力に基づくユーザー入力であることを表します。
kbd要素とkbd要素が入れ子になっていますが、
外側のkbd要素は入力ブロック全体を表し、内側のkbd要素は入力の個々のステップを表します。
<p>
ジョージにリンゴを食べさせるには、
<kbd>
<kbd><samp>ファイル</samp></kbd>|<kbd><samp>リンゴを食べる...</samp></kbd>
</kbd>
を選択します。
</p>
ジョージにリンゴを食べさせるには、
ファイル|リンゴを食べる...
を選択します。
実際には、上記の使用例のような精度の高いマークアップは、あまり必要ありません。
以下の使用例のような簡単なマークアップでも問題ありません。
<p>
ジョージにリンゴを食べさせるには、
<kbd>ファイル | リンゴを食べる...</kbd>
を選択します。
</p>
ジョージにリンゴを食べさせるには、
ファイル | リンゴを食べる...
を選択します。