HTML5における＜kbd＞タグの使い方

<kbd>タグは、ユーザーが入力する内容を表す要素です。今回は、HTML5における＜kbd＞タグの使い方をご紹介します。

HTML5における＜kbd＞タグの使い方

<kbd>要素は、ユーザーが入力する内容を表す要素です。「kbd」というのは「keyboard」の略ですが、キーボード入力の他、音声入力などの場合もあります。<kbd>で囲んだ文字は多くの一般的なブラウザで、等幅フォントで表示されます。

基本的な使い方は上記のように、<kbd>で入力する内容を囲むだけです。基本的な文字列の場合は、上記の使い方ですが、入力して欲しいキーを表すときは、以下のように記述します。

タグをこのように入れ子にする必要があるので注意しましょう。また、上記のものは入力するキーが単体の場合です。複数の場合はまた記述方法が異なります。例えば、「切り取りはcommand＋Xです。」のような内容の場合、複数のキーが登場します。その場合は、以下のように記述します。

キーをそれぞれ<kbd>で囲い、更に２つのキーの記述をまとめて<kbd>で囲う形になります。

基本的な使い方は以上になります。他にも<samp>要素を入れ子として使用し、メニューなどのマークアップに使用することもあります。