はじめに
Web 開発では、時々、Web ページにプログラミング関連またはコンピュータ関連のコンテンツを表示する必要があります。特定の用語（たとえば、関数名や変数名など）を表示したい場合、<code> タグを使用してそれらを囲むことができます。このタグは、囲まれたテキストのフォント ファミリを courier などの等幅フォントに変更します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
コードタグを追加する
まず、ローカル システムに index.html ファイルを作成し、好きなコード エディタで開きます。
次に、HTML ファイルに <code> タグを追加しましょう。このタグの構文は簡単です。表示したいテキストを囲む開始タグと終了タグがあります。
<body>
<!-- Add the code tag -->
<p>This is an example of using the <code>code</code> tag in HTML.</p>
</body>
上記のコード ブロックでは、<code> タグの中に code という用語を囲みました。これにより、囲まれたテキストが等幅フォントで表示されます。
複数行にコードを表示するために Pre タグを追加する
複数行にわたるプログラミング コードを表示する必要がある場合は、<pre> タグと <code> タグを併用します。index.html ファイルに次のコードを追加することで、その使い方を見てみましょう。
<body>
<!-- Using the pre tag with the code tag -->
<pre>
<code>
function multiply(a, b) {
return a * b;
}
// Call the function
multiply(2, 3);
</code>
</pre>
</body>
このコード ブロックでは、<pre> タグを使用してコードをブロック形式で表示することを示しています。<pre> タグの中には、プログラミング コードを囲んでいることを示すために <code> タグを追加しています。
グローバル属性とイベント属性を使用する
<code> タグでは、グローバル属性とイベント属性を使用できます。
<body>
<!-- Using global attributes with the code tag -->
<p>
<code class="highlight" style="color: red" title="This is a title"
>Some code</code
>
</p>
</body>
上記のコード ブロックでは、<code> タグに class、style、title 属性を使用しています。
デフォルトの CSS スタイルを追加する
<code> タグに対して何もスタイルを指定しない場合、既定の CSS 設定が使用されます。ほとんどのブラウザは、<code> タグの既定のフォント ファミリとして monospace を使用します。
<body>
<!-- Default CSS style for HTML code tag -->
<p>
<code>Default CSS style</code>
</p>
</body>
まとめ
<code> タグは、プログラミング関連またはコンピュータ関連のコンテンツを囲むために使用されます。このタグを使用することで、囲まれたテキストを courier のような等幅フォントで表示できます。また、<pre> タグと <code> タグを併用して、複数行にわたるプログラミング コードを表示することもできます。<code> タグは、グローバル属性とイベント属性をサポートしています。<code> タグに対して何もスタイルを指定しない場合、既定の CSS 設定が使用され、既定のフォント ファミリは monospace になります。
