★HTML Living Standard リファレンス

<pre> …… フォーマットされたテキストを表す

<pre>タグは、フォーマットされたテキストのブロックを表す際に使用します。
pre要素の構造は、なかに配置される要素によってではなく、テキストの書式設定や記述形式によって示されます。

例えば、空白行や字下げなどで書式設定されたテキスト、ソースコード、アスキーアート、詩など
を表示する際にpre要素を使用できます。

開始タグ <pre> の直後にある先頭の改行文字は、HTML構文では削除されます。

pre要素とcode要素・samp要素・kbd要素の併用

コンピューターコードを表す際には、pre要素とcode要素を併用できます。
コンピューター出力を表す際には、pre要素とsamp要素を併用できます。
ユーザーが入力するテキストを表す際には、pre要素とkbd要素を併用できます。

■使用例

以下のサンプルは、スクリプトのコードを表すために、pre要素とcode要素を併用しています。

<p>これは <code>Panel</code> 関数です:</p>

<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}

■使用例

以下のサンプルは、コンピュータ出力とユーザー入力を表すために、
pre要素とsamp要素とkbd要素を併用しています。
コマンド入力でプレイするゲームの一場面を想定したものですが、
コンピュータからのメッセージをsamp要素、
ユーザーが入力するコマンドをkbd要素で指定しています。

<pre><samp>あなたは大きな白い家の前にいます。
小さな郵便ポストがあります。

></samp> <kbd>open mailbox</kbd>

<samp>郵便ポストをあけました:
チラシが一枚あります。

></samp></pre>

あなたは大きな白い家の前にいます。
小さな郵便ポストがあります。

> open mailbox

郵便ポストをあけました:
チラシが一枚あります。

>

■使用例

以下のサンプルは、言葉の配置を保持する目的でpre要素を使用しています。
pre要素は、HTMLソース中のホワイトスペースや改行を保ってそのまま表示します。

<pre>       ちいさな

       てのひら

         でも

      しあわせは

       つかめる
</pre>

       ちいさな

       てのひら

         でも

      しあわせは

       つかめる

pre要素の代替表現

pre要素を使用する際には、読み上げブラウザや点字ディスプレイなどで書式設定が失われた際に、
書式設定済みのテキストがどのように表現されるかについて、あらかじめ配慮しておくことが推奨されています。

例えば、アスキーアートは書式が失われると意味が分からなくなります。
そのような場合、テキストによる説明などの代替表現を用意しておくと、
より普遍的にユーザーがアクセスしやすくなるでしょう。

■関連項目