<kbd>入力する内容を示す

<kbd>タグは、ユーザーが入力する内容を示す要素です。

<kbd>は、キーボード(keyboard)から名付けられた要素で、主にキーボードからの入力を示しますが、必ずしもキーボード操作である必要はなく、メニューの選択や音声コマンドからの入力なども示すことができます。

なお一般的なブラウザでは、kbd要素の部分は等幅フォントで表示されます

HTML5での変更点

html5のkbd要素は、入れ子にするかしないかで次のように意味が変わります。

kbd要素をsamp要素内に使った場合、入力したものがそのまま画面に表示されたもの(エコー)を表します。 例えばwindowsのコマンドプロンプトやOSXのターミナルなどにおいて、入力した文字はそのまま表示されますが、この表示の事をエコーといいます。 kbd要素をsamp要素内に使用した場合は、このエコーを表します。

またkbd要素がsamp要素を含む場合は、呼び出しメニューなど、システム出力されたものを操作したような状況を表します。

<kbd>~</kbd>内にさらにkbd要素を配置した場合は、複数の入力をまとめるような状況、または入力の1つの単位を表すことができます。 例えば、キーボードのShiftキーと他のキーを同時に入力してもらいたい場合や、複数のキーを順に押してもらいたい場合などに使用します。

書式

  • <kbd 属性="値">~</kbd> ……… ユーザーの入力を示す

使用した時の例

<!-- 入力する内容を表す -->
<p><kbd>あかさたな</kbd>という文字を入力して下さい。</p>

<!-- キーボードのキーなど、1つの入力単位を表す -->
<p><kbd><kbd>Ctrl</kbd></kbd>キーを押してください。</p>

<!-- 複数のキーを押してもらいたい場合を表す -->
<p><kbd><kbd>Ctrl</kbd>+<kbd>c</kbd></kbd>を同時押しでコピーすることができます</p>

次はsamp要素とkbd要素を併せて使用した例です。

<!-- システムのメニューの操作などを表す -->
<p><kbd><kbd><samp>名前を付けて保存</samp></kbd></kbd>をクリックすると、保存することができます。</p>

<!-- システムにより返された入力内容を表す -->
<p><kbd>東京都</kbd>と入力すると<samp>住所は<kbd>東京都</kbd>です</samp>と表示されます</p>

ブラウザ上の表示例

あかさたなという文字を入力して下さい。

Ctrlキーを押してください。

Ctrl+cを同時押しでコピーすることができます

名前を付けて保存をクリックすると、保存することができます。

東京都と入力すると住所は東京都ですと表示されます

対応ブラウザなどのデータ

形式 <kbd>~</kbd> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~