HTML5 <pre>
<pre>タグは、半角スペースや改行をそのまま表示する際に使用します。
<pre>とはpreformatted textの略で、日本語では「フォーマット（整形）済みのテキスト」という意味になります。
つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。
<pre>とはpreformatted textの略で、日本語では「フォーマット（整形）済みのテキスト」という意味になります。
つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。
<pre>～</pre>で囲まれた範囲のソースは 半角スペース・改行などがそのまま表示されるため、 <pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用されます。
ただし、<pre>～</pre>の中でもタグは解釈されるため、 HTMLソースをそのまま表示したい場合には、< と > を、< と > に置き換える必要があります。 また、HTML構文の中では、<pre>の開始タグの直後の改行は取り除かれるので注意してください。
プログラムのソースコードを表す場合には、<pre>と<code>を組み合わせて使用するのが一般的です。
HTMLソース
<pre><code>function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
<pre><code>function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
↓↓↓
また、プログラムによる出力結果を表す部分は<samp>、 ユーザーによる入力テキストを表す部分は<kbd>と組み合わせて表します。
HTMLソース
<pre><samp>あなたは、ある大きな白い家の玄関の前に立っています。
目の前に小さな郵便受けがあります。
</samp> <kbd>open mailbox</kbd>
<samp>郵便受けを開けました:
一枚のチラシがあります。
></samp></pre>
<pre><samp>あなたは、ある大きな白い家の玄関の前に立っています。
目の前に小さな郵便受けがあります。
</samp> <kbd>open mailbox</kbd>
<samp>郵便受けを開けました:
一枚のチラシがあります。
></samp></pre>
↓↓↓
■HTML4.01からHTML5へのバージョンアップによる変更点
HTML4.01ではpre要素には非推奨とされながらもwidth属性が用意されていましたが、 HTML5では廃止されています。
また、HTML5ではpre要素を使用する際には、半角スペースや改行などのフォーマット（整形）を失ってしまう場合に配慮することが推奨されています。 例えば、音声機器や点字ディスプレイで利用される場合や、アスキーアートが半角スペースや改行で整形されない場合などです。 このような状況が想定されるなら、テキスト説明などの何らかの代替手段を用意しておくほうがアクセシビリティーが高まるでしょう。
■使用例
HTMLソース
<pre>
もしもし かめよ かめさんよ
せかいのうちで おまえほど
あゆみの のろい ものはない
どうして そんなに のろいのか
なんと おっしゃる うさぎさん
そんなら おまえと かけくらべ
むこうの おやまの ふもとまで
どちらが さきに かけつくか
</pre>
<pre>
もしもし かめよ かめさんよ
せかいのうちで おまえほど
あゆみの のろい ものはない
どうして そんなに のろいのか
なんと おっしゃる うさぎさん
そんなら おまえと かけくらべ
むこうの おやまの ふもとまで
どちらが さきに かけつくか
</pre>
↓↓↓
