<pre>スペースや改行をそのまま表示

<pre>タグは、整形された(preformatted)テキストを示します。 HTMLで文章を改行するには、br要素などを使用しますが、<pre>~</pre>内ではスペースや改行した文字がそのまま改行・スペースとして出力されます。 そのためプログラムのソースコードや実行例などをそのまま表示したい場合に適しています。

※整形されたテキストとは、見やすいように半角スペースや改行などで形が整えられたテキストの事

またpre要素内には色々なテキスト向けの要素を加える事ができます。 例えばプログラムのソースコードであれば<code>、実行例であれば<samp>、ソースの引用でハイライトしたい場合なら<mark>などと組み合わせる事ができます。

ただしpre要素内でもタグは解釈されるため、そのまま表示したいHTMLのソースなどについては「<」と「>」を&lt;と&gt;に置き換える必要があります。

なお<pre>直後の改行文字は取り除かれます。

HTML5での変更点

HTML5でpre要素を使用する際、スペースや改行などのフォーマット(整形)を失ってしまう場合には、何らかの代替手段を用意しておくことが推奨されています。 例えばアスキーアートなどを表示する際には、認識できないブラウザ向けに代替テキストなどを用意しておいた方がいいでしょう。

またHTML5では、HTML4.01で用意されていたwidth属性などが廃止されています。

書式

  • <pre 属性="値">~</pre> ……… 整形済みテキストを表す

使用した時の例

<pre>
<code>
p {
  color: red;
  margin: 0;
  text-decoration: <mark>none</mark>;
}
</code>
</pre>

<p>下記はpre要素を使用した場合としなかった場合の違いです</p>
<h4>preを使用した場合</h4>
<pre>
<code>
&lt;script type="text/javascript"&gt;
    document.writeln("サンプル");
&lt;/script&gt;
</code>
</pre>

<h4>preを使用なかった場合</h4>
<code>
&lt;script type="text/javascript"&gt;
    document.writeln("サンプル");
&lt;/script&gt;
</code>

ブラウザ上の表示例


p {
  color: red;
  margin: 0;
  text-decoration: none;
}

下記はpre要素を使用した場合としなかった場合の違いです

preを使用した場合


<script type="text/javascript">
    document.writeln("サンプル");
</script>

preを使用なかった場合

<script type="text/javascript"> document.writeln("サンプル"); </script>

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

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