<pre>タグの解説
<pre>は、この要素で囲まれた文字列を整形済みテキスト（preformatted text）として扱います。具体的には、ソースコードの編集画面で見えている改行や空スペースが、そのまま画面に反映されます。
整形済みテキストと言っても、完全なプレーンテキストとして表示される訳ではありません。HTMLのタグを構成する「<」や「>」はそのまま解釈されてしまうので、「<」や「>」と記述する必要があります。このようなルールは特殊記号のページで解説しています。
<pre>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<pre>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<pre>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。ページの中で改行やスペースによる空白をそのまま表示したい箇所に適用します。しかし、レイアウト目的でこの要素を採用してはいけません。デザイン的に空白が必要な箇所にはスタイルシートで装飾を行います。
<pre>
改行や スペースを
そのまま 表示します。
</pre>
整形済みテキストと言っても、完全なプレーンテキストとして表示される訳ではありません。HTMLタグなどの特殊な機能が備わっている記号は、ブラウザの翻訳を回避する書き方で対応します。
<pre>
HTMLのタグ表記を画面に表示させるには、<html>と書きます。
</pre>
<pre>は本サイトのようなソースコードを紹介する技術的なサイトで多用されますが、通常のブログやメディアサイトであれば、使う機会はほとんどないでしょう。以下のように<code>を組み合わせた入れ子構造は、ソースコードやスクリプトを紹介する欄に多く見られます。
<pre><code>
// ソースコードやスクリプト
// 改行が発生するためタグ同士を連ねて表記
</code></pre>