HTML <kbd>

開始タグ <kbd> と終了タグ </kbd> で囲まれた文字列がキーボード(Keyboard)から入力する文字であることを表します。通常、ブラウザで固定幅フォントで表示されます。

書式

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい

<kbd>
  <!-- phrasing content -->
</kbd>

<KBD>
  <!-- phrasing content -->
</KBD>

HTMLタグ <kbd> の使用例と表示サンプルを次に示します。

プログラムを中断するには <kbd>exit</kbd> と入力します。

プログラムを中断するには exit と入力します。

タグの省略

kbd 要素の開始タグ及び終了タグは省略できない。

コンテンツ・モデル

kbd 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <area>（マップ要素の子孫である場合）
• <audio>
• <b>
• <bdi>
• <bdo>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <link>（本文中で許可されている場合）
• <map>
• <mark>
• <math>
• <meta>（itemprop 属性が存在する場合）
• <meter>
• <noscript>
• <object>
• <output>
• <picture>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <select>
• <slot>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <template>
• <textarea>
• <time>
• <u>
• <var>
• <video>
• <wbr>
• 自律型カスタム要素

属性

次に示す属性をkbd要素に指定できる。

accesskey

アクセスキーを指定する。

autocapitalize

自動的にキャピタライズするかどうかを、以下に示す列挙子で指定する。

autocapitalize

値	状態
off	自動的にキャピタライズしない。
none
on	文の最初の文字を大文字に、それ以外を小文字にする。
sentences
words	単語の最初の文字を大文字に、それ以外を小文字にする。
characters	すべての文字を大文字にする。

autofocus

ページが読み込まれた時点で、その要素にフォーカスを当てるかどうかをブール値で指定する。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

<kbd class="keyboard">example</kbd>

contenteditable

コンテンツが編集可能かどうかを、以下に示す列挙子で指定する。

contenteditable

値	説明
(空文字)	編集可能
true
plaintext-only	要素の生のテキストコンテンツのみが編集可能であり、リッチテキストフォーマットは無効
false	編集不可能

dir

テキストの方向性を、以下に示す列挙型で指定する。

dir

値	説明
ltr	左から右へ
rtl	右から左へ
auto	自動的に決定させる

draggable

要素がドラッグ可能かどうかを以下に示す列挙子で指定する。ドラッグ可能の場合、要素をクリックしたまま移動させることができる。

draggable

値	説明
true	要素をドラッグできる。
false	要素をドラッグできない。

id

HTML文書内で一意な識別子を指定する。

文字列を選択して <kbd id="copy">Ctrl + C</kbd> を押す。

文字列を選択して Ctrl + C を押す。

lang

言語を指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<kbd style="color: red">example</kbd>

example

title

要素に対する助言的な情報を指定する。

JavaScript

JavaScript の HTMLElement インタフェースを通じて kbd 要素へアクセスできる。HTMLElement インタフェースは以下に示すプロパティを持つ。

title

title 属性

lang

lang 属性

translate

translate 属性

dir

dir 属性

hidden

hidden 属性

accessKey

アクセスキー

draggable

draggable 属性

namespaceURI

名前空間のURI（読み取り専用）

prefix

名前空間の接頭辞（読み取り専用）

tagName

タグ名（読み取り専用）

id

識別子

className

クラス名

参考文献

Web Hypertext Application Technology Working Group 2023. Text-level semantics. HTML Living Standard