[HTML5] kbd要素をちゃんと使ってみる

@kasumiiです。こんにちは。

ブログを書いていて、「あれ?ここってどうやってマークアップしたらいいんだろう?」ということがよくあって、そのひとつにキーボードのキーを表記したいというのがありました。

そういえばキーボードっぽいタグあったなー。あ、<kbd>!これこれ。

…と思ったのですが、調べてみるとkbd要素は入れ子にしたり他の要素と組み合わせたり、いくつか使い方があるということを知ったのでメモメモ。

【参考】kbd 要素 – HTML5.JP

kbd 要素は、ユーザー入力を表します(通常はキーボード入力ですが、音声コマンドのような他の入力を表すために使うこともできます)。

上記ページにもあるように、kbd要素はユーザが入力した文字列やキーを表すときに使います。

ユーザ名に guest と入力してください。

という説明を書きたいときは、以下のようにkbd要素を使います。一番シンプルな使い方。

ユーザ名に <kbd>guest</kbd> と入力してください。
キーボードの F1 を押してください。

という説明を書きたいときは、kbd要素を入れ子にします。

キーボードの <kbd><kbd>F1</kbd></kbd> を押してください。
終了する場合はメニューから システム終了… を選択してください。

という説明を書きたいときは、kbd要素にsamp要素を含むようにします。

終了する場合はメニューから <kbd><samp>システム終了…</samp></kbd> を選択してください。

このような感じで、用途に応じて使い分けできるようです。

なかなかちゃんとマークアップしようと思うと大変ですが、意識して使えるようになりたいものですね!