pre 要素

4.4.3 pre 要素

カテゴリー:
フロー・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLPreElement : HTMLElement {};

pre 要素は、フォーマット済みテキストのブロックを表します。この要素の中では、要素というよりかは印刷慣例によって構造が表されます。

HTML 構文では、pre 要素の開始タグの直後の先頭の改行文字は取り除かれます。

pre 要素を使えそうな例をいくつか挙げました:

  • e-mail を入れる。段落を空白行で示したり、リストを、先頭に黒丸を付けた行によって示します。
  • コンピューターコードの断片を入れる。コンピューターコード言語の慣例に従って構造を示します。
  • アスキーアートを表示する。

ウェブ制作者は、フォーマット済みテキストが、そのフォーマットを失ったときに、どうなるのかを考慮することが、推奨されます。これは、音声合成器や点字ディスプレーなどのユーザーのケースが想定されます。ASCII アートといったケースでは、テキスト記述などの代替表現を用意したほうが、そのドキュメントの読者とって、よりいっそう利用しやすくなるでしょう。

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

次は、コンピューターコードのサンプルが示されています。

<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>

次は、samp 要素と kbd 要素が、Zork I のセッションを表示するために pre 要素のコンテンツの中に組み合わされています。

<pre><samp>あなたは、板張りの玄関ドアがある白い家の西側の
広場にいます。
ここに小さな郵便箱があります。

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

<samp>郵便箱を開けて見てみました:
チラシでした。

></samp></pre>

次は、現代詩を表示しています。その独自の書式を保つために、pre 要素を使い、その詩の固有の部分を形作ります。

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-pre-element