pre - 整形済みのテキストの定義

pre要素で使うことができる例
・e-mailを入れる。段落を空白行で示したり、リストを、先頭に黒丸を付けた行によって示します。
・コンピューターコードの断片を入れる。コンピューターコード言語の慣例に従って構造を示します。
 code要素と一緒に使うことで定義できます。
・コンピューターの出力のブロックを示します。
 samp要素と一緒に定義できます。
・ユーザーが入力したテキストであることを示します。
 kbd要素と一緒に定義できます。
・アスキー・アートを表示する。
※ウェブ制作者は、そのフォーマットを失ったときに、どうなるのかを考慮することが推奨されます。
 つまり音声合成器や点字ディスプレーなどのユーザーのケースが想定され、テキスト記述などの代替表現を用意したほうが適切でしょう。

pre要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
pre

pre要素のHTML4からHTML5への変更点

基本的に変更ありませんが、新たに半角スペースや改行などのフォーマット(整形)を失ってしまう場合に配慮することが推奨すると定義されました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「コンピューター・コードのサンプル」のサンプル

HTMLコード

<p>これは <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 要素が、セッションを表示するために pre要素のコンテンツの中に組み合わされています。」のサンプル

HTMLコード

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

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「samp 要素と kbd 要素が、セッションを表示するために pre要素のコンテンツの中に組み合わされています。」のサンプルプレビューを確認

「アスキーアートの例」のサンプル

HTMLコード

<pre>      ∧∧  プシュッ
     (, ゚Д)o
     (  つ[]
   ~(_つと)</pre>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「アスキーアートの例」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/grouping-content.html#the-pre-element)