[31] code要素 と pre要素 でソースコードを表示しよう

<code>要素は、ソースコードの断片を示す要素です。
例えば HTML や CSS などのソースコードなどを示すときに使います。
<code>要素はインラインレベルの要素です。

<pre>要素は、整形済みテキストを表示する要素で、改行やスペースを書いたとおりに表示します。
<pre>要素はグルーピングのための要素なので、ブロックレベルです。

ソースコードを表示するとき、改行や字下げをそのまんま表示したいですよね。そんなときに <pre>要素を一緒に使うと最適。
W3Cも <pre>要素と <code>要素をセットで使うことを推奨しています。

使用する要素	<code> 〜 </code> <pre> 〜 </pre>

● 2017年11月：記事を「HTML 5.1 - 2nd Edition」を参考に書き換えました。

参考：
The code element - HTML 5.1 - 2nd Edition | W3C Recommendation
The pre element - HTML 5.1 - 2nd Edition | W3C Recommendation

<code>を使ってみよう

<code>要素は 要素名、ファイル名、コンピュータープログラム（ソースコード）など「コンピューターが認識する文字列」をマークアップする時に使います。
「code」はそのまま「コード」の意味です。

このように使います。

<p> <code>code</code>要素は、ソースコードの断片を表します。</p>

プレビューするとこんなかんじ

code要素は、ソースコードの断片を表します。

<code> 〜 </code>で囲んだ部分は、ブラウザのデフォルトスタイルで等幅フォントになります。

もう１つサンプルです。

ページの読み込みが完了し、DOM の構築が完了した時点で function()内が実行されます。

HTMLはこちら。

<p> ページが読み込み完了し、DOMの構築が完了した時点で <code>function()</code>内が実行されます。</p>

<pre> の中に <code> を入れて使ってみよう

<pre>要素は、整形済みテキストを用事する要素です。
「スペース」や「改行」をそのままプレビューさせることができます。

「pre」は preformatted text（整形済みテキスト）の略です。

W3C の仕様書では、現代詩（独特のスペースや改行をもつ）の表示や、アスキーアートの表示にも <pre>要素が使えるとしています。
ただし「その整形（改行やスペース）を失ったらどうなるか考慮すべき」とも言及しています。
音声読み上げソフトなどを使っているユーザーのアクセシビリティを考慮すべきということです。

<pre>要素は、字下げ（インデント）や改行をそのまま表示してくれるので、ソースコードの表示に最適です。
ソースコードの表示をするなら <code>要素と一緒に使います。

ソースコードの字下げ（インデント）とは、プログラムの構造を明確にするためのインデントスタイル（Indent style）のこと。ネスト（入れ子）構造をわかりやすくするため、入れ子になっているソースコードほど字下げをする書き方。いわゆる プログラミング作法です。
字下げは「半角スペース」を使うのが一般的です（タブスペースも使われています）

サンプルのプレビューです。

div.entry_body ol li {
    list-style: decimal outside;
    margin-left: 2em;
    }

ソースはこちらです。

<pre><code class="language-css">div.entry_body ol li {
    list-style: decimal outside;
    margin-left: 2em;
    }</code></pre>

改行に<br>を使っていません。字下げは半角スペース4個分ですが、そのままプレビューされていますね。

また、サンプルでは <code>要素に class名で「language-css」と入れています。
W3C の仕様で <code>要素にプレフィックス " language- " を付けた class を加えることで「構文をハイライトするスクリプト」が正しく機能するようにできるとしています。
「シンタックスハイライト」用のスクリプト内で、 language-プレフィックスが使えるということ。

私は「Prism」を使っていますが、これは <code>要素に「class="language-◯◯"」と指定することで、言語（html, css, js など）の表示を切り替えることができます。

pre要素は samp要素 や kbd要素とも組み合わせても

<pre>要素を <samp>要素と一緒に使えば、コンピューターの出力のブロックを表すことができます。
また、<kbd>要素の中に <pre>要素を入れれば、ユーザーが入力するべきテキストであることを示すことができます。

これらについては、[32] その他のプログラム関連要素 kbd と samp と var で触れます。

次回予告

次回は、<pre>要素と同じような表示をする、CSSの「white-space : pre」について紹介します。
現代詩などを表示するときは、この CSSでスタイルを整えるほうが良いと思います。