技術ブログやマニュアルを書いていると、「このコードを書く」「このキーを押す」「すると画面にこう表示される」といった説明をよく書きます。HTML にはこうした内容を見た目だけでなく意味として正しく示すための要素が用意されています。この記事では code・kbd・samp・var の4つを取り上げ、それぞれが何を表すのか、どう使い分けるのかを実例つきで解説します。
目次
4つの要素はそれぞれ「何か」を表す
これらの要素は、見た目を等幅フォントにするためのものではありません。中に入れたテキストが「ソースコードなのか」「キー入力なのか」といった役割（意味）を表すために使います。意味づけしておくと、検索エンジンや支援技術（スクリーンリーダーなど）が文章の内容を正しく理解しやすくなり、CSS でまとめて見た目を整えることもできます。まずは4つの違いを一覧で確認しましょう。
| 要素 | 表すもの | 使う場面の例 |
|---|---|---|
code | ソースコードの断片 | 関数名・タグ名・ファイル名・短いコード |
kbd | ユーザーのキーボード入力 | Ctrl + C などのショートカット |
samp | プログラムやシステムの出力 | コマンドの実行結果・エラーメッセージ |
var | 変数・プレースホルダー | 数式の変数名・「ファイル名を置き換える」等 |
ブラウザの初期スタイルでは、code・kbd・samp は等幅フォント（monospace）、var はイタリック体で表示されます。ただし見た目はあくまで初期値で、本質は「何を表すか」にあります。順番に見ていきましょう。
code 要素：ソースコードを示す
code は、文章中のソースコードやプログラムの断片を表すインライン要素です。関数名・変数名・タグ名・ファイル名・短いコードなど、「コードとして読んでほしい文字列」を囲みます。たとえば次のように使います。
<p>配列の末尾に要素を追加するには <code>push()</code> メソッドを使います。</p>この例では「push()」の部分が等幅フォントで表示され、ふつうの文章とコードを見分けやすくなります。
複数行のコードは pre と組み合わせる
code はインライン要素なので、そのままでは改行やスペースがまとめられてしまいます。複数行のコードブロックを表示したいときは、空白や改行をそのまま表示する pre 要素と組み合わせて <pre><code>…</code></pre> の形にするのが基本です。
<pre><code>function add(a, b) {
return a + b;
}</code></pre>kbd 要素：キーボード入力を示す
kbd（keyboard の略）は、ユーザーがキーボードから入力するキーや操作を表します。ショートカットキーの説明でよく使われ、1つのキーごとに kbd で囲むと分かりやすくなります。
<p>コピーするには <kbd>Ctrl</kbd> + <kbd>C</kbd> を押します。</p>キーとキーをつなぐ「+」は kbd の外に置くのが一般的です。Mac の ⌘ や Enter のように、特殊キーや実際のキー名をそのまま入れて構いません。CSS でキートップ風の枠線や影を付けると、より「押すキー」らしい見た目にできます。
samp 要素：プログラムの出力を示す
samp（sample output の略）は、プログラムやシステムが出力した結果を表します。コマンドの実行結果や、画面に表示されるメッセージ・エラー文などを示すときに使います。ユーザーが「入力する」ものが kbd、システムが「出力する」ものが samp と覚えると区別しやすいです。
<p>保存に成功すると <samp>Saved successfully</samp> と表示されます。</p>var 要素：変数やプレースホルダーを示す
var は、プログラムや数式の変数を表します。具体的な値ではなく、「ここには何かが入る」という差し替え可能な部分（プレースホルダー）を示すのにも使えます。たとえば「あなたのドメインを実際の値に置き換えてください」のような説明にぴったりです。
<p>面積は <var>幅</var> × <var>高さ</var> で求められます。</p>多くのブラウザでは var はイタリック体で表示されます。数式の変数を斜体にする数学の慣習に合っていますが、日本語ではイタリックが読みにくいこともあるため、CSS で font-style: normal; に戻して別の見せ方にするサイトもあります。
要素を入れ子にして組み合わせる
これらの要素は入れ子にして組み合わせられます。たとえば「コマンドの出力（samp）の中に、実際の値ではなく変数として示したい部分（var）がある」場合は、次のように samp の中に var を入れます。
<p>実行すると <samp>Hello, <var>ユーザー名</var>!</samp> と表示されます。</p>このように、表したい内容に合わせて要素を組み合わせることで、文章の意味をより正確にマークアップできます。
どれを使うか迷ったときの考え方
見た目が似ているため、つい code ばかり使ってしまいがちですが、迷ったときは「その文字列の正体は何か」を考えるとよいです。プログラムの一部なら code、人が押すキーなら kbd、機械が返した結果なら samp、差し替わる変数なら var です。
なお、これらはすべて意味を表すための要素であって、装飾のための要素ではありません。単に等幅フォントにしたい、文字の見た目を変えたいだけなら、span に CSS を当てるのが適切です。意味のある内容にだけ、対応する要素を使いましょう。逆に言えば、適切に使い分けておけば、あとから CSS で kbd だけキートップ風にする、といった調整もまとめてできます。
まとめ
code・kbd・samp・var は、技術的な文章の内容を意味として正しく示すための要素です。code はソースコード、kbd はキーボード入力、samp はプログラムの出力、var は変数やプレースホルダーを表します。見た目ではなく「何を表すか」で選ぶこと、複数行は pre と組み合わせること、必要に応じて入れ子にできることを押さえておけば、読み手にも機械にも伝わりやすいマークアップになります。