<code> - プログラムのコード

codeは、プログラムにおけるコードをマークアップするタグです。インライン要素のテキスト中のコードをマークアップする時はそのままの利用でもよいですが、ソースコードをまとめてマークアップしたい時は、ブロック要素のpreタグと併用するのがオススメです。

説明

下記は、インライン要素のテキスト中で、プログラムコードを説明する例です。

HTML

<p>PHPで加算処理は、<code>$x = $x + 5</code>でもいいし、<code>$x += 5</code>でもいいんだ。</p>

PHPで加算処理は、$x = $x + 5でもいいし、$x += 5でもいいんだ。

下記は、ブロック要素のpreタグの中で、ソースコードをまとめてマークアップする例です。改行やタブを伴ったコードは、このように、preタグでラップするのがよいでしょう。

HTML

<pre><code>&lt;?php
	// [$x]に[5]を加算する
	$x = $x + 5 ;

	// 同じ処理は次でもできる
	$x = 0 ;	// [$x]があらかじめ宣言されていないとエラー
	$x += 5 ;</code></pre>
<?php
	// [$x]に[5]を加算する
	$x = $x + 5 ;

	// 同じ処理は次でもできる
	$x = 0 ;	// [$x]があらかじめ宣言されていないとエラー
	$x += 5 ;

特殊文字はHTMLエスケープする

コードには、<>'"といった特殊文字が含まれます。特殊文字はHTMLタグと衝突して、表示を崩してしまうので、表示用に変換するようにしましょう。例えば、<という文字を、表示用に変換すると、&lt;となります。この変換をHTMLエスケープと言います。HTMLエスケープは、下記のサービスが便利です。

概要

カテゴリー
  • Flow content (フロー・コンテンツ)
  • Phrasing content (フレージング・コンテンツ)
  • Palpable content (パルパブル・コンテンツ)
コンテンツモデル
フレージングコンテンツ
利用できる場所
フレージングコンテンツが期待される場所で使用できます。
利用できる属性
グローバル属性
許可されている、全てのグローバル属性を指定できます。
タグの省略
codeタグは、開始タグ、終了タグ、共に省略することはできません。
標準のスタイル
code {
	font-family: monospace ;
}

参考情報

code要素に関する情報は、下記サイトで確認できます。

  • W3C … W3CによるHTML5勧告。codeの項目。
  • HTML language reference … W3Cによるcodeのリファレンス。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。code要素の仕様。