code 要素コンピュータ言語のコードを表す
code 要素は、コンピュータ言語のコードを表します。文中にでてくるプログラムなどのソースコードをマークアップするために使用されます。
コンピュータ言語ですので、HTML、CSS をはじめ、JavaScript、Perl、PHP など様々な言語をマークアップすることが可能です。また、class 属性値によってその言語が何言語なのかを示すこともできます。HTML Standard 仕様では、プログラムの種類に「language-」という接頭辞を付けて、例えば class="language-javascript" のように識別名を付けるマークアップ例が提示されています。
code 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
フレージング・コンテンツが期待される場所
- この要素で使用できる属性
code 要素のサンプルソース
<p> ハイパーリンクを設定したい場合、 <code class="language-html"><a href="sample.html">リンクテキスト</a></code> のように記述します。 </p>
<!-- 長いソースコードの場合は、pre 要素内で使用することもできます -->
<pre>
<code class="language-javascript">
$(function(){
$('#menuButton').click(function() {
$('#menu').toggle('fast');
});
});
</code>
</pre>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |