読者です 読者をやめる 読者になる 読者になる

情報系大学院生のWebメモ

ソフトウェアや Web サービス、Windows や Mac に関する情報系大学院生の備忘録ブログ

kbd 要素を正しくマークアップできていますか?

HTML
このエントリーをはてなブックマークに追加

kbd 要素?キーボードからの入力を表現するのに用いるんでしょ?」と、あいまいな認識をしていませんか?以下の文章を kbd 要素を用いて正しくマークアップすることができますか?

元に戻すためには、Ctrl + Z を押してください。

正解は、

元に戻すためには、<kbd>Ctrl</kbd> + <kbd>Z</kbd> を押してください。

ではありません!正解は、

元に戻すためには、<kbd><kbd>Ctrl</kbd> + <kbd>Z</kbd></kbd> を押してください。

です。入力するキー全体も kbd タグで括るのがポイントです。上記の例以外にも、メニュー項目やシステムの応答、samp 要素との組み合わせなど、kbd 要素はいくつかの用法があります。一癖ある kbd 要素のマークアップ方法をまとめてみました。

キーボードから入力する文字列を表現する場合

kbd タグを単体で使用します。

ユーザー名に「<kbd>user<kbd>」、パスワードに「<kbd>pass</kbd>」と入力してください。

キーボードから入力するキーを表現する場合

kbd タグの中に kbd タグをネスト(入れ子に)します。入力するキーが、単一の場合と複数の場合とでマークアップ方法が異なります。

入力するキーが単一である場合

更新するためには、<kbd><kbd>F5</kbd></kbd> キーを押してください。

<kbd><kbd>F5 キー</kbd></kbd>と「キー」まで kbd タグで括る人もいますが、「キー」は含めない方が無難だと思います。キーボードに「キー」というボタンはありませんよね。

入力するキーが複数である場合

保存するためには、<kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> を押してください。

「Ctrl」と「S」をそれぞれ kbd タグで括った後に、全体を kbd タグで括ります。全体を括る kbd タグは、キーボードからの入力ブロック(≒一連の流れ)であることを示します。

メニュー項目を表現する場合

kbd 要素はキーボードから入力する文字列やキーだけでなく、メニュー項目(右クリックメニュー、プルダウンメニュー)などのシステムの出力に基づいた入力も表現します。この場合、kbd タグの中に samp タグをネスト(入れ子に)します。

ここで出てきた samp 要素は、プログラムやコンピューティングシステムからの(サンプル)出力を表します。この samp 要素と kbd 要素を組み合わせて(ネストにして)、マークアップします。

メニュー項目が、単一の場合と複数の場合とでマークアップ方法が異なります。

メニュー項目が単一である場合

右クリックして、コンテキストメニューの「<kbd><samp>保存</samp></kbd>」をクリックしてください。

メニュー項目が複数である場合

保存するためには、<kbd><kbd><samp>ファイル</samp></kbd>」→「<kbd><samp>名前を付けて保存</samp></kbd></kbd>をクリックしてください。

始めに、プログラムやコンピューティングシステムからの出力である「ファイル」と「名前を付けて保存」をそれぞれ samp タグで括ります。また、これらはシステムの出力に基づいた入力(メニュー項目)なので、それぞれ kbd タグで括ります。最後に、「ファイル」と「名前を付けて保存」は入力ブロック(≒一連の流れ)であるので、全体を kbd タグで括ります。今まで出てきた用法の組み合わせです。

入力がシステムによってエコーされる場合

具体的に示すと、プログラムなどに「Hello, World !」と入力したときに「Hello, World !」とエコー(入力内容と同じものが出力)されるような場合です。このように、入力がシステムによってエコーされる場合、samp タグの中に kbd タグをネスト(入れ子に)します。

出力が、エコーのみの場合とエコーを含む場合とでマークアップ方法が異なります。

出力がエコーのみの場合

コマンドプロンプトに「<kbd>2014</kbd>」と入力すると、「<samp><kbd>2014</kbd></samp>」と表示されます。

出力がエコーを含む場合

コマンドプロンプトに「<kbd>2014</kbd>」と入力すると、「<samp><samp><kbd>2014</kbd></samp>年は平成26年です。</samp>」と表示されます。

始めに、「2014」は、出力がエコーのみの場合と同様に、「2014」とマークアップします。次に、全体を samp タグで括ります。メニュー項目と逆の用法です。

まとめ

対象
文字列 「<kbd>OK</kbd>」と入力してください
キー <kbd><kbd>Enter</kbd></kbd> キーを押してください
項目メニュー 右クリックをして、「<kbd><samp>名前を付けて保存</samp></kbd>」をクリックしてください
エコー コマンドプロンプトに「<kbd>OK</kbd>」と入力すると、「<samp><kbd>OK</kbd></samp>」とエコーされます

入力するキーが複数の場合(「Ctrl + S」など)と、項目メニューで複数の入力をする場合(「ファイル → 名前を付けて保存」など)は、各キーや各メニューを(上表に従って)マークアップした後に、全体を kbd タグで括ります。

<kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>
<kbd><kbd><samp>ファイル</samp></kbd><kbd><samp>名前を付けて保存</samp></kbd></kbd>

出力がエコーを含む場合、同様に全体を samp タグで括ります。

コマンドプロンプトに「<kbd>2014</kbd>」と入力すると、「<samp><samp><kbd>2014</kbd></samp>年は平成26年です。</samp>」と表示されます。

雑感・おまけ

kbd 要素について調べているときに面白いネタを発見しました。

kbd要素を用いた、連続した入力と「複数文字で表されるキー」単独の入力の表記の分け方は? - Google グループ

<kbd>Enter</kbd>
という表記は、
1. 「大文字のE」「小文字のn」「小文字のt」「小文字のe」「小文字のr」を順に入力する意
2. 「『Enter』という名称のキー」単独入力の意 の2種の解釈の仕方が有り得るように思います。
このような場合の表記分けについて、何らかのガイドラインなどご存じの方はいらっしゃいますか?

という疑問です。質問者も回答者も Enter をそれぞれ kbd タグで括れば、使い分けできるが流石に面倒と考えています。回答者は、

文字入力なのか単一キー押下なのかは、文脈で分かります。
この区別を無理にマークアップで表現する必要はないと
思います。

と答え、さらに、

<kbd>はユーザー入力というセマンティクスです。
個々のキー押下を表現することも可能ですが、
この要素の最大の意義は、他の文章から、ユーザー入力部分を
区別する点です。

と述べています。なるほど、ユーザー入力部分を区別さえできれば概ねいいのですね。この回答に対して、質問者は、

「本当に『文脈で分かる』と言い切れるのだろうか?」というのが疑問の根底に在ります。

と述べています。たしかに、クローラ(世界中の Web ページを巡回して HTML を読み込むプログラム)は HTML を解釈するだけなので、文脈を判断することはできませんね。最後に、質問者は次のように述べました。

kbdに「一つの独立した入力単位である」「連続する入力である」という事を表す属性が在れば解決するのかも知れませんね。……無い物ねだりですが。

これらの要素があれば、使い分けることができますね。ただ、何でもかんでも厳密にマークアップするために新たな要素を策定するのが正しいとは限りませんし、かと言って緩慢なマークアップを許容するのも問題ですよね。今後の kbd 要素の動向に注目です!

参考サイト