This tag is used to clearly show parts of computer instructions or program code inside normal sentences so people can easily notice “this part is code.”
code要素はコンピュータのコードをマークアップするときに使います。
例えば、プログラムに使う関数名、メソッド名、プロパティ名や XML や HTML の要素名、CSS、JavaScript、Python、Ruby、Go...などなど、どんな言語であってもコードをコンテンツとして表示したい場合に使われます。
一般的なブラウザでは、等幅フォントで表示されます。
ソースコードをきちんと code要素で囲むことにより、code要素を CSSなどで装飾すればユーザーは「どの部分がコードなのか」がパッと見てわかりやすくなりますし、検索エンジンのクローラーなどのロボットが「どの部分がコードなのか」を判別しやすくなりますので、ユーザーにコードを見せたいときは基本的に code要素で囲むようにしましょう。
HTML
<p>Perl スクリプトを作る際には、<code>use strict;</code> と <code>use warnings;</code> を必ず入れるようにしましょう。</p>Perl スクリプトを作る際には、use strict; と use warnings; を必ず入れるようにしましょう。
複数行にまたいでインデント（字下げ）や改行などをそのままにコードをブロックとしてまとめて表示したい場合は、pre要素を使うのが良さそうです。特に、Python といったプログラム言語のように、タブ・インデントに意味を持つコンテンツでは、pre要素との併用が最適です。
HTML
<pre>
<code>
ここにコードを書く
</code>
</pre>複数行のコードを載せるときには pre要素の中に code要素を入れ、その中にコードを書きます。
ポイント：codeはインライン要素なので、文の途中で小さなコード片を示すのに向いています。一方で、スペースや改行はそのまま表示されません。入力どおりの見た目（改行やインデント）で見せたいときは、preとセットで使うのが基本です。
関連する要素：キーボード入力は<kbd>、プログラムの出力は<samp>、変数名は<var>で表すと、より意味が伝わりやすくなります（必要に応じて使い分けましょう）。
pre要素と併用したマークアップ例
HTML
<pre><code>
for n in range(2, 10):
for x in range(2, n):
if n % x == 0:
print(n, 'equals', x, '*', n//x)
break
else:
print(n, 'is a prime number')
</code></pre>for n in range(2, 10):
for x in range(2, n):
if n % x == 0:
print(n, 'equals', x, '*', n//x)
break
else:
print(n, 'is a prime number')
HTMLの <pre><code>〜</code></pre> の中のテキストの改行やスペースなどが、そのままページに反映されているのがわかると思います。
pre要素が１つのブロックを作るため、p要素などの要素の中に入れる必要はありません。
HTML
<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>console.log("hello")はコンソール画面に「hello」と表示します。
デフォルトでは <code> 内のテキストは、一般的に font-family: monospace; が適用されているため、等幅フォント（コードを表示するときによく使うフォント）で表示されますが、少し区別がしづらいので、CSSを使ってわかりやすくしてみます。
HTML
<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>CSS
code {
background-color: #d2b48c;
}console.log("hello")はコンソール画面に「hello」と表示します。
まずは背景色（background-color）をつけてみました。
これだけだと文字のすぐ近くにだけ背景色がついているので、もう少し文字の周りに余裕を持たせたいので余白（padding）を増やしてみます。
HTML
<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>CSS
code {
background-color: #d2b48c;
padding: 0.5em;
}console.log("hello")はコンソール画面に「hello」と表示します。
これで余白（padding）は増えましたが、角張っていて硬い感じがしますので、次は角を丸く（border-radius）して柔らかさを出してみます。
HTML
<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>CSS
code {
background-color: #d2b48c;
padding: 0.5em;
border-radius: 5px;
}console.log("hello")はコンソール画面に「hello」と表示します。
背景に丸みがつき、柔らかい印象になりました。当ページでは Dark mode 時の設定をしており、その Dark mode時に文字が見づらいようなので、次は文字色（color）を設定します。
HTML
<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>CSS
code {
background-color: #d2b48c;
padding: 0.5em;
border-radius: 5px;
color: #191970;
}console.log("hello")はコンソール画面に「hello」と表示します。
このように Light mode と Dark mode で文字の色が変わるようなサイトで、背景色（background-color）を設定した場合は、モードによっては文字が読みづらくなってしまうため、文字色（color）も同時に設定することをお勧めします。
ここまででもずいぶんと明確に <code> で囲われた部分を目立たせることができましたが、さらに明確にするために、背景色の周りを濃い色のライン（border）で囲んでみます。
HTML
<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>CSS
code {
background-color: #d2b48c;
padding: 0.5em;
border-radius: 5px;
color: #191970;
border: solid 2px #8b4513;
}console.log("hello")はコンソール画面に「hello」と表示します。
ここまで目立たせる必要があるのかどうかはわかりませんが、CSSには他にもさまざまなプロパティが用意されていますので、皆さんのサイトのデザインに合わせて色々と試してみて下さい。
他にもコードが長すぎて画面や表示したい枠からからはみ出して表示されるようなケースもあると思います。その場合、pre要素に white-space: pre-wrap; を指定すると、コードが１行に収まりきらない場合にはみ出さずに折り返すようになります。
HTML
<pre><code>
<script>
var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
console.log(greeting);
</script>
</code></pre>CSS
pre {
white-space: pre-wrap;
}<script>
var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
console.log(greeting);
</script>当サイトでは、折り返しを使わずに、横スクロールするように設定しています。この場合は、pre要素に overflow-x: auto; を指定します。
HTML
<pre><code>
<script>
var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
console.log(greeting);
</script>
</code></pre>CSS
pre {
overflow-x: auto;
}Sample
<script>
var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
console.log(greeting);
</script>
コードを表示する場合は、タブやスペース、改行の使い方をわかりやすくするためには、折り返しよりスクロールの方がいいのかも？しれません。
読み上げ（アクセシビリティ）について：code自体は特別な読み上げにはなりにくいので、「これはコードです」「以下は出力例です」のように短い説明をそえておくと、支援技術でも理解しやすくなります。
シンタックスハイライトとは、コードを色付けして見やすくすることです。
シンタックスハイライトはライブラリを使えば簡単に実現できます。
ここでは prism.js の導入方法の一例を紹介します。
prism.js の Downloadページから必要なファイル「prism.js」、「prism.css」をダウンロードします。HTML、CSS、JavaScriptのシンタックスハイライトを考えている方は、設定はそのままで Downloadページ最下部の「DOWNLOAD JS」と「DOWNLOAD CSS」からそれぞれのファイルをダウンロードして下さい。
ダウンロードしたら FTPソフトなどを使ってサーバーにアップロードして下さい。
アップロードしたファイルを <head>〜</head>の中で呼び出します。
HTML
<head>
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>
</head>これで準備は完了です。
次は、シンタックスハイライトを使いたいコードを <pre><code>〜</code></pre> で囲みます。
囲んだ <code> タグにどの言語でのシンタックスハイライトを適用するか指定します。
<code class="language-html"><code class="language-css"><code class="language-javascript">などです。
HTML
<pre><code class="language-javascript">for n in range(2, 10):
for x in range(2, n):
if n % x == 0:
print(n, 'equals', x, '*', n//x)
break
else:
print(n, 'is a prime number')
</code></pre>for n in range(2, 10):
for x in range(2, n):
if n % x == 0:
print(n, 'equals', x, '*', n//x)
break
else:
print(n, 'is a prime number')
All HTML source
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>シンタックスハイライトのサンプル</title>
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>
</head>
<body>
<pre><code class="language-javascript">for n in range(2, 10):
for x in range(2, n):
if n % x == 0:
print(n, 'equals', x, '*', n//x)
break
else:
print(n, 'is a prime number')
</code></pre>
</body>
</html>