<pre>タグは、整形済みのテキストをそのまま表示する際に使用するタグです。改行やスペースなどが、必要な箇所に入れてある状態のテキストを、<pre>タグを使うことによって、そのまま表示させることができます。
今回は、HTML5における<pre>タグの使い方をご紹介します。
HTML5における<pre>タグの使い方
<pre>は、改行やスペースをそのまま反映させることのできるタグです。<pre>で囲まれたテキストは、等幅フォントで表示されます。
1 |
<pre>〜</pre> |
例えば、下記のように改行やスペースを入れたテキストを、そのままの形で表示させたいとします。
1 2 3 4 5 |
<p> テスト テスト テスト テストテスト </p> |
表示サンプルです。
<pre>タグが無いと、このように表示されてしまいます。次は下記のように、整形してあるテキストを<pre>〜</pre>で囲んで記述してみましょう。
1 2 3 4 5 |
<pre> テスト テスト テスト テストテスト </pre> |
表示サンプルです。
コード上で書いた形のまま、スペースや改行が反映されています。
大変便利な要素なので、覚えておくのをお勧めします。整形済みのテキストをそのまま表示したいとき以外にも、サンプルコードの記述をそのままの形で反映させたい時や、アスキーアートのようなテキストを使っているコンテンツにも便利です。