整形済みテキスト表示

<pre> と </pre> で囲む範囲

pre要素は、preformの「前もって整形されている〜」の意味で、 HTMLのタグに頼らずに前もって作った内容と配置を 表示させる場合に使います。
通常のHTMLのブラウザ表示は、 複数の半角スペースや改行がひとつ分の半角スペースになっています。
しかし、 <pre> で囲めば、その部分のスペースの空間や、改行などがすでに表示構造であるとして ブラウザでも、そのスペース分の空間や改行が反映した表示になります。
以下で例で、動作を確認しましょう

preを使う方法は、こので動作を確認できます。
preを使わない場合は、こので動作を確認できます。

なお、preの範囲は「テキストをそのまま表示する」イメージがありますが、内部に他のタグ要素を使うことができます。
これで表示する内容が プログラムソースコードであれば、<code>と </code>で囲むとよいでしょう。 <code>は、その範囲がプログラムなどのソースコードであることを、 知らしめるために囲むタグです。
以下の例は、preやpのタグを含めたJavaScriptを説明しているHTMLのソース表示例です。

<pre><code>&lt;p&gt;以下の部分を書くと、現在の時間を表示できます。&lt;/p&gt;
&lt;script type="text/javascript"&gt;
   document.write("現在の時間：");
   document.write(new Date());
&lt;/script&gt;</code></pre>

上記のように記述したbodyの一部は、次のように表示されます。

<p>以下の部分を書くと、現在の時間を表示できます。</p>
<script type="text/javascript">
   document.write("現在の時間：");
   document.write(new Date());
</script>