varとの違い

▶

この記事の要点

code 要素はプログラムコードの断片を表すインライン要素
デフォルトでは等幅フォント (monospace) で表示 (ブラウザの UA スタイル)
複数行のコードブロックは <pre><code>...</code></pre> の組み合わせが定番
< > & はHTML エンティティに変換 (< など) しないと表示できない
関連: kbd (キー入力) / samp (プログラム出力) / var (変数) — 用途で使い分け

code 要素とは

<code> 要素は HTML でプログラムコードの断片を表すインライン要素です。「コードである」というセマンティクスを与えるだけで、見た目だけが目的なら <span> でも済みますが、意味付け (semantics) をしておくとスクリーンリーダーや検索エンジン、シンタックスハイライトライブラリが正しく解釈してくれます。

基本構文

配列の長さは arr.length で取得できます。

関数 strlen() は文字数を返します。

HTML タグ <p> は段落を表します。

ブラウザのデフォルトスタイルで等幅フォントのインライン表示になります。

複数行のコード — pre と組み合わせる

code 要素単体はインラインで空白や改行が圧縮されるため、複数行のコードを書くときは <pre> でラップするのが定番です。

<pre><code class="language-js">function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice"));
</code></pre>

class="language-xxx" は highlight.js や Prism.js といったシンタックスハイライトライブラリの慣習で、HTML5 仕様でも推奨の書き方です。

HTML 特殊文字のエスケープ

code 要素の中でも HTML パーサーは動作するため、< > & はそのまま書くとタグや実体として解釈されてしまいます。HTML エンティティに変換が必要です。

文字	エンティティ
`<`	`<`
`>`	`>`
`&`	`&`
`"`	`"`
`'`	`'`

CSS でのスタイリング

code {
    font-family: "JetBrains Mono", Consolas, Menlo, monospace;
    font-size: 0.95em;
    padding: 0.15em 0.4em;
    background: #f4f4f5;
    color: #d63384;
    border-radius: 4px;
}

pre code {
    /* pre 内では背景や余白をリセット */
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 1em;
}

pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.5;
}

似た要素との使い分け

要素	意味	例
`<code>`	プログラムコード	`arr.length`
`<kbd>`	ユーザーのキー入力	`Ctrl + C`
`<samp>`	プログラムの出力	`Permission denied`
`<var>`	変数名 / 数式の変数	`x`
`<pre>`	改行・空白を保持する整形済みテキスト	複数行コード

組み合わせ例

<p>関数 <code>greet(<var>name</var>)</code> を呼び出すと <samp>Hello, Alice!</samp> と表示されます。</p>

<p>キャンセルするには <kbd>Ctrl</kbd>+<kbd>C</kbd> を押します。</p>

アクセシビリティ

code 要素はセマンティクスを伝えるため、見た目だけ目的でも span より優れる
スクリーンリーダーによっては「コード」と読み上げてくれる
長いコード片は aria-label や figure + figcaption でラベル付けすると親切
横スクロールが必要なコードブロックは overflow-x: auto + キーボードフォーカス可能にする

Markdown との関係

Markdown のバッククォート記法 `code` は HTML に変換されるときそのまま <code> 要素になります。フェンスドコードブロック ```js ... ``` は <pre><code class="language-js"> に展開されるのが一般的です。

インライン: `arr.length`

```javascript
function greet(name) {
    return `Hello, ${name}!`;
}
```

SEO とセマンティクス

検索エンジンは <code> 要素のテキストをコード片として認識する
技術記事では関数名・API 名を <code> で囲むと検索ヒット率が向上しやすい
記事内のキーワード密度を意図的に増やしたい関数名・クラス名は <code> で明示
schema.org の SoftwareSourceCode と組み合わせると構造化データとしても扱える

よくある実装ミス

ミス	対処
`<` をそのまま書いて HTML 崩壊	`<` にエスケープ
`<pre>` 無しで改行が消える	`<pre><code>` の入れ子に
長すぎる行で横はみ出し	親の `pre` に `overflow-x: auto`
等幅にならない	CSS でフォント未指定。UA スタイル依存は危険
コピーしづらい	クリップボードコピーボタンを JS で追加

ハイライトライブラリの主な選択肢

ライブラリ	特徴
highlight.js	自動言語検出。シンプルで導入が早い
Prism.js	軽量・プラグイン豊富。React/Vue との相性が良い
Shiki	VS Code と同じテーマ。サーバー側で事前ハイライト推奨
CodeMirror / Monaco	編集可能なエディタ向け (ハイライト単体目的ではオーバースペック)

FAQ

Q: <code> と <tt> の違い
A: <tt> は HTML5 で廃止。等幅表示は CSS の font-family: monospace で行い、意味は <code> など適切な要素を使います。

Q: 改行を保持したい
A: <code> 単体ではダメ。<pre><code>...</code></pre> でラップするか、CSS で white-space: pre を当てます。

Q: シンタックスハイライトライブラリは何を使うべき？
A: SSR 環境では highlight.js / Prism.js / Shiki が定番。Shiki は VS Code 同等のテーマ品質。

Q: コピーボタンを付けたい
A: navigator.clipboard.writeText() で実装できます。pre 要素内に絶対配置でボタンを置くのが定番 UI。

Q: 言語クラスは必須？
A: 必須ではありませんが、シンタックスハイライトとスクリーンリーダーへのヒントになります。class="language-XXX" は HTML5 仕様で推奨。

ページ一覧

その他

HTML code要素の使い方｜preとの組み合わせ・kbd/samp/varとの違い

code 要素とは

基本構文

複数行のコード — pre と組み合わせる

HTML 特殊文字のエスケープ

CSS でのスタイリング

似た要素との使い分け

組み合わせ例

アクセシビリティ

Markdown との関係

SEO とセマンティクス

よくある実装ミス

ハイライトライブラリの主な選択肢

FAQ

関連

人気ページ

最近更新/作成されたページ

ページ一覧

その他

HTML code要素の使い方｜preとの組み合わせ・kbd/samp/varとの違い

code 要素とは

基本構文

複数行のコード — pre と組み合わせる

HTML 特殊文字のエスケープ

CSS でのスタイリング

似た要素との使い分け

組み合わせ例

アクセシビリティ

Markdown との関係

SEO とセマンティクス

よくある実装ミス

ハイライト ライブラリの主な選択肢

FAQ

関連

人気ページ

最近更新/作成されたページ

ハイライトライブラリの主な選択肢