@kasumiiです。こんにちは。
ブログを書いていて、「あれ？ここってどうやってマークアップしたらいいんだろう？」ということがよくあって、そのひとつにキーボードのキーを表記したいというのがありました。
そういえばキーボードっぽいタグあったなー。あ、<kbd>！これこれ。
…と思ったのですが、調べてみるとkbd要素は入れ子にしたり他の要素と組み合わせたり、いくつか使い方があるということを知ったのでメモメモ。
kbd 要素は、ユーザー入力を表します（通常はキーボード入力ですが、音声コマンドのような他の入力を表すために使うこともできます）。
上記ページにもあるように、kbd要素はユーザが入力した文字列やキーを表すときに使います。
ユーザが入力する文字列を表す場合
ユーザ名に guest と入力してください。
という説明を書きたいときは、以下のようにkbd要素を使います。一番シンプルな使い方。
ユーザ名に <kbd>guest</kbd> と入力してください。
ユーザが入力するキーを表す場合
キーボードの F1 を押してください。
という説明を書きたいときは、kbd要素を入れ子にします。
キーボードの <kbd><kbd>F1</kbd></kbd> を押してください。
ユーザが選択するシステムのメニュー項目を表す場合
終了する場合はメニューから システム終了… を選択してください。
という説明を書きたいときは、kbd要素にsamp要素を含むようにします。
終了する場合はメニューから <kbd><samp>システム終了…</samp></kbd> を選択してください。
このような感じで、用途に応じて使い分けできるようです。
なかなかちゃんとマークアップしようと思うと大変ですが、意識して使えるようになりたいものですね！
