kbd要素：HTML Living Standard各要素別メモ

概要

カテゴリー

• Flow content
• Phrasing content
• Palpable content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• Phrasing content

属性

• グローバル属性

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• すべてのroleが指定可能。
• 名前付け可能なroleが指定された場合を除いて、aria-label属性等による名前付けをしてはならない。

視覚系ブラウザのデフォルトとして期待されるCSS

  kbd {font-family: monospace;}
  

意味・用法

ユーザーの入力を表す。通常はキーボードによる入力を想定。

入れ子にすることによって、同時押し等を表す。

samp要素の子孫要素であるときは、システムによって復唱された入力であることを表す。

samp要素を子孫要素とするときは、システムによる出力に基づく入力であることを表す。

私見・補足

入れ子の仕方によって、微妙に意味合いが異なってくる（「入れ子の例」を参照）。

    <kbd><kbd>Shift</kbd>+<kbd>s</kbd></kbd>
    

    <kbd>A</kbd>キーを押すと、「<samp><kbd>A</kbd>キーが押されました</samp>」と表示されます。
    

    画面に表示された「<kbd><samp>Fileメニュー</samp></kbd>」をクリックした。
    

表示確認

ソース

  ここで、<kbd>Enter</kbd>キーを押します。ちなみにこの「Enter」という単語は「入力」を意味します。
  

表示結果

ここで、Enterキーを押します。ちなみにこの「Enter」という単語は「入力」を意味します。