HTML <kbd>

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

書式

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

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

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

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

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

タグの省略

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

コンテンツ・モデル

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

属性

次に示す属性を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