HTML コンピュータコード要素

通常、HTML は余分な空白や改行を無視し、可変幅のフォントを使用してテキストを表示します。しかし、プログラミングコードやユーザーの入力を示す際には、等幅フォント（モノスペースフォント）や特定の書式維持が必要になります。

HTML には、これらの「コンピュータコード」に関連する情報をセマンティックにマークアップするための専用要素が用意されています。

1. <kbd> 要素 (Keyboard Input)

<kbd> 要素は、キーボード入力（Keyboard Input）を定義するために使用されます。内部のテキストは通常、ブラウザのデフォルトの等幅フォントで表示されます。

<p>ファイルを保存するには <kbd>Ctrl + S</kbd> を押してください。</p>

2. <samp> 要素 (Sample Output)

<samp> 要素は、コンピュータプログラムからのサンプル出力（Sample Output）を定義するために使用されます。これも通常、等幅フォントで表示されます。

<p>メッセージを表示します：</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

3. <code> 要素 (Code Snippet)

<code> 要素は、プログラミングコードの一部（Code Snippet）を定義するために使用されます。

<code>
x = 5;
y = 6;
z = x + y;
</code>

[!IMPORTANT]
<code> 要素自体は、余分な空白や改行を維持しません。複数行のコードを表示する場合は、次に説明する <pre> 要素の中に <code> を配置するのが一般的です。

4. <pre> 要素 (Preformatted Text)

<pre> 要素は、整形済みテキスト（Preformatted Text）を定義します。この要素内のテキストは、ソースコードに記述された通りの空白や改行を保持して表示されます。

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

5. <var> 要素 (Variables)

<var> 要素は、数式やプログラミングコード内での変数（Variable）を定義するために使用されます。ブラウザは通常、この内容を斜体（イタリック）で表示します。

<p>アインシュタインの有名な式： <var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>

複雑な数式を表現する場合は LaTeX を併用することもありますが、HTML 上で変数として意味を持たせるには <var> が最適です。

例：

E = mc^2

6. まとめ

HTML のコンピュータコード要素を正しく使い分けることで、検索エンジンや補助技術（スクリーンリーダー）に対して、そのテキストが単なる文字ではなく「特別な意味を持つデータ」であることを伝えることができます。

Web 制作において、技術ドキュメントやプログラミングの解説記事を書く際には欠かせない要素たちですね。これらを組み合わせて、より読みやすく構造的なページを作っていきましょう。