pre 要素

4.5.3 pre 要素

Status: Last call for comments

カテゴリー
フロー・コンテンツ
formatBlock 候補
この要素を使うことができるコンテキスト：
フロー・コンテンツが期待される場所
コンテンツ・モデル：
フレージング・コンテンツ
コンテンツ属性：
グローバル属性
DOMインタフェース：
interface HTMLPreElement : HTMLElement {};

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

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

pre 要素で使うことができる例をいくつか挙げました：

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

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

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

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

<p>This is the <code>Panel</code> constructor:</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>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

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

<samp>Opening the mailbox reveals:
A leaflet.

></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/2010/WD-html5-20100624/grouping-content.html#the-pre-element