【HTML Living Standard】code要素の使い方
code要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
codeオブジェクトは、コンピュータコードの短い断片を表すオブジェクトです。このHTML要素は、プログラミング言語のコード、変数名、ファイル名、XML要素名、またはコンピュータによって認識されるその他のテキストなど、技術的な内容を示すために使用されます。文書内でインラインに配置されるような、比較的短いコード片や単一のキーワード、専門用語をマークアップする際に特に有用です。
ウェブブラウザは、一般的にcode要素で囲まれたテキストを等幅フォント（monospace font）で表示します。これにより、通常のテキストと区別され、その内容がコードであることを視覚的にユーザーに伝えます。
整形済みの複数行にわたる長いコードブロックを表示したい場合は、code要素を<pre>要素の内部に含めて使用することが推奨されます。<pre>要素は、テキストの改行や空白をそのまま表示する機能があり、これとcode要素を組み合わせることで、プログラミングコードの構造と内容を正確に、かつセマンティックに表現できます。このように、codeオブジェクトはウェブページにおける技術文書の可読性を高める上で重要な役割を担っています。
構文(syntax)
1<code>const greeting = "Hello, world!";</code>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのcodeタグでコードスニペットを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Code Tag Example</title> 7</head> 8<body> 9 <!-- <code>タグは、プログラムコードやコマンドなどのインラインスニペットを表現します。 --> 10 <p>変数 <code>message</code> に文字列を代入するには <code>let message = "Hello";</code> と書きます。</p> 11 <p>HTMLで段落を作成するには <code><p>これは段落です</p></code> のように記述します。</p> 12 13 <!-- 複数行のコードを表示する場合は、<pre>タグと組み合わせて使うことが一般的です。 --> 14 <pre> 15 <code> 16 function calculateSum(a, b) { 17 return a + b; 18 } 19 console.log(calculateSum(5, 3)); // 出力: 8 20 </code> 21 </pre> 22</body> 23</html>
HTMLの<code>タグは、ウェブページ内にプログラムコードやコマンドの短い断片（スニペット）を記述する際に使用します。これは、文章中に埋め込む形で、特定のテキストがコードであることを示すためのセマンティックな要素です。<code>タグ自体に特別な引数や戻り値はなく、単にテキストをコードとしてマークアップする役割を持ちます。
サンプルコードの最初の部分では、「変数 <code>message</code> に文字列を代入するには <code>let message = "Hello";</code> と書きます。」のように、文章の流れの中で変数名や短いコードの例を示すために<code>タグが使われています。これにより、ブラウザは<code>タグで囲まれた部分を、一般的な文章とは異なるフォント（等幅フォントなど）で表示し、視覚的にコードであることを区別します。
また、複数行にわたる長いプログラムコードを表示したい場合は、<pre>タグと組み合わせて使用するのが一般的です。<pre>タグは、テキストの改行や空白（スペース、タブ）をそのままの形で表示する役割があり、その内部に<code>タグを配置することで、整形されたコードをセマンティックに表現できます。サンプルコードの後半では、JavaScriptの関数定義を<pre><code>の組み合わせで表示しており、コードの構造を保ちながらウェブページ上に掲載することが可能です。このように<code>タグを使うことで、ドキュメント内のコード部分を明確にし、読者にとって理解しやすいページを作成することができます。
<code>タグは、文章中にプログラムコードやコマンドなどの短い断片（インラインスニペット）を表現する際に使用します。
HTMLのタグ自体をコードとして表示したい場合は、<p>のように不等号をHTMLエンティティ（<や>）に変換する必要があります。そうしないとブラウザがタグとして解釈してしまい、意図した表示になりません。
また、複数行にわたる長いコードや、改行や字下げ（インデント）を保持したまま表示したい場合は、<code>タグを<pre>タグで囲んでください。<pre>タグは整形済みテキストを扱うため、コードのフォーマットをそのまま維持して表示できます。<code>タグ単独では、改行や連続する空白は通常無視されてしまうため注意が必要です。
HTML code要素でコードブロックを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML code Element Example</title> 7</head> 8<body> 9 <!-- <code>要素は、コンピュータのコードの一部（インライン）を表現します。 --> 10 <!-- ブラウザは通常、固定幅フォントで表示します。 --> 11 <p>ファイルを保存するには、<code>Ctrl + S</code> を押してください。</p> 12 13 <!-- 複数行のコードブロックを表示するには、<pre>要素と組み合わせるのが一般的です。 --> 14 <!-- <pre>要素は、整形済みテキスト（preformatted text）を表示し、 --> 15 <!-- 内部の空白文字（スペースや改行）をそのまま反映します。 --> 16 <pre><code> 17function sayHello(name) { 18 console.log("Hello, " + name + "!"); 19} 20 21sayHello("World"); 22 </code></pre> 23</body> 24</html>
HTMLの<code>要素は、ウェブページ内でコンピュータのコードの一部であることを示すために使用されます。これは、プログラミングコードのスニペット、コマンドラインの入力、ファイル名、変数名など、コードに関連する短いテキストを表現する際に適しています。ブラウザは通常、この要素で囲まれた内容を固定幅フォント（等幅フォント）で表示することで、他のテキストと区別し、コードであることを視覚的に分かりやすくします。
サンプルコードでは、Ctrl + Sのように文中の特定の短いフレーズをインラインでコードとして表示する例を示しています。このように、文脈の中で特定のコードを示す際に便利です。
また、複数行にわたる長いコードブロックや、整形されたコードをそのまま表示したい場合には、<code>要素を<pre>要素と組み合わせて使用するのが一般的です。<pre>要素は「整形済みテキスト」を表す要素で、その内部に含まれる空白文字（スペースや改行、タブなど）をそのままの形で表示するという特性を持っています。これにより、コードのインデントや改行が崩れることなく、記述した通りのフォーマットを維持したままウェブページに表示することが可能になります。
<code>要素自体には、特定の引数や戻り値は存在しません。その役割は、内容がコンピュータのコードであることを示すセマンティックなマークアップとして機能することです。
<code>要素は、HTMLでコンピュータのコードであることを示すためのインライン要素です。単独で用いると、ブラウザは内容を固定幅フォントで表示しますが、改行や空白はそのまま反映されません。複数行にわたる長いコードブロックを表示する際は、改行やインデントなどの書式を正しく保持するため、<pre>要素と組み合わせて使用することが重要です。<pre>要素は、内部の整形済みテキストをそのまま表示する役割があります。<code>要素を単に固定幅フォントで表示したいだけで意味的なコードではない場合は、CSSでスタイルを適用するなど、要素の意味合いを考慮して使い分けましょう。