<pre></pre>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フレージング・コンテンツ

pre要素は、その内容が整形済みのテキストであることを表します。

通常、連続する半角スペース、改行、タブは、1つの半角スペースにまとめられて表示されますが、この要素の中では、それらが記述した通りの形で表示されるようになります。（pre要素の開始タグ直後の改行は取り除かれます）


<pre>

整形済みのテキストを表します

</pre>

pre要素は、記述したままの形で表示させたい内容に対して使用することになります。例えば、次のような内容に使用することができます。

  • 定型詩（短歌、俳句 等）
  • ソースコード（HTMLコードやスクリプトコード 等）
  • アスキーアート
  • 電子メールの内容

ソースコードを記述する場合は、次のようにcode要素と併せて使用すると良いでしょう。（pre要素内にcode要素を配置します）

<pre>
<code>&lt;html&gt;
&lt;head&gt;

    &lt;title&gt;文書のタイトル&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;

    &lt;h1&gt;pre要素 &amp; code要素の使用例&lt;/h1&gt;

&lt;/body&gt;
&lt;/html&gt;</code>
</pre>
  • タグを表示したい場合は、<や>の記号を&lt;&gt;と記述します。また、&記号も&amp;と記述しておきます。

要素のデフォルトスタイル

一般的なブラウザでは、この要素内のテキストは等幅フォントで表示されます。また、自動的な折り返しは行われなくなります。

  • ブラウザによっては、等幅フォントのテキストが小さめの文字サイズで表示されます。
pre要素内のテキストです
  • 上記の表示例には、このページのスタイル（font-size: 100%）が適用されてしまっています。そのため、本来は小さめの文字サイズで表示されるブラウザでも、通常の文字サイズで表示されてしまいます。
旧HTMLからの変更点

使用例

pre要素の使用・未使用の表示例

<section>

<h3>pre要素を使用した場合</h3>

<pre>
<code>&lt;script&gt;

    document.write("サンプルテキスト");

&lt;/script&gt;</code>
</pre>

</section>


<section>

<h3>pre要素を使用しなかった場合</h3>

<div>
<code>&lt;script&gt;

    document.write("サンプルテキスト");

&lt;/script&gt;</code>
</div>

</section>
表示例

pre要素を使用した場合

<script>

    document.write("サンプルテキスト");

</script>

pre要素を使用しなかった場合

<script> document.write("サンプルテキスト"); </script>