<code>プログラムなどのコードを示す

<code>タグはコンピューターなどのコード(プログラム)であることを示す要素です。 例えばHTMLやXMLの要素名、ファイル名、プログラムのソースコードなど、コンピューターが認識できるものに対して使用します。

一般的にはcode要素の部分は等幅フォントで表示されますが、CSSでの装飾は自由に行っても問題ありません。 また改行やインデントなどされているコンピュータープログラムやソースコードを表示する場合、<pre>タグと組み合わせる事で改行をそのまま表示する事ができます。

なおHTMLタグなどを表示したい場合は<>などの記号を、「&lt;」「&gt;」と記述し置き換える必要があります。 これはHTMLタグなどが、そのまま適用されてしまうためです。

HTML5での変更点

HTML5のcode要素は、HTML4.01から大きな変化はありません。

書式

  • <code 属性="値">~</code> ……… ソースコードなどを表す

使用した時の例

<pre>
<code>document.write('sample text');</code>
</pre>

<p><code>&lt;h4&gt;</code>タグを使って見ました</p>
<pre>
<code>
&lt;h4&gt;サンプル&lt;/h4&gt;
   &lt;p&gt;テキスト&lt;/p&gt;
   
   &lt;ul&gt;
       &lt;li&gt;リスト&lt;/li&gt;
   &lt;/ul&gt;
</code>
</pre>

ブラウザ上の表示例

document.write('sample text');

<h4>タグを使って見ました


<h4>サンプル</h4>
   <p>テキスト</p>
   
   <ul>
       <li>リスト</li>
   </ul>

※上記の場合、背景・フォントファミリーなどにこのページのスタイルが適用されています。

対応ブラウザなどのデータ

形式 <code>~</code> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~