UIの説明をする際のマークアップにkbdとsampをセットで使うかと思いきやkbdだけでも大丈夫らしい

この記事の概要

ヘルプページなどには、画面上のメニューや入力要素を示して説明することがあります。
例えば以下のようなイメージです。

メニューから「ファイル→新規作成」を選択すると、新たにファイルが作成されます。

「こういった説明をする際にはkbdとsampを使って表す」ものだと思っていたのですが、実はkbdだけでも大丈夫とのことでした。
忘れそうだったので記事にしています。

厳密な書き方

記事冒頭にあげたテキストを厳密にマークアップするなら次のようになります。
（こんなにネストする必要はありませんが、kbdが続いて見づらかったので調整しました。）

<p>
  メニューから
  <kbd>
    <kbd><samp>ファイル</samp></kbd>
    →
    <kbd><samp>新規作成</samp><kbd>
  </kbd>
  を選択すると、新たにファイルが作成されます。
</p>

厳密ではないけど別に大丈夫な書き方

厳密な書き方が直感に反するのでやたら覚えていたのですが、次のマークアップでも問題無いそうです。

<p>
  メニューから
  <kbd>ファイル→新規作成</kbd>
  を選択すると、新たにファイルが作成されます。
</p>

参照元

HTML Living Standardには、以下のような例と説明があります。

In this second example, the user is told to pick a particular menu item. The outer kbd element marks up a block of input, with the inner kbd elements representing each individual step of the input, and the samp elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:

<p>To make George eat an apple, select
  <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

Such precision isn't necessary; the following is equally fine:

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

DeepLにかけました。

この2番目の例では、ユーザーは特定のメニュー項目を選ぶように言われています。外側の kbd 要素は入力のブロックをマークアップし、内側の kbd 要素は入力の各ステップを表し、その内側の samp 要素はそのステップがシステムによって表示されているもの、この場合はメニューラベルに基づいて入力されていることを表します。

このような正確さは必要なく、次のようなものでも結構です。

最後に

読みやすいのでMDN Docsだけ読んで終わりにしていた気がするのですが、こちらには「省略してOK」の旨は記載されていなさそうです。

やっぱり原典にあたるのが大事だなと思わされました。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！