【HTML5】pre 要素

Ads by Google

HTML5 ロゴ

pre要素は、その内容が整形済みのテキストであることを表します。
[pre]とは「preformatted text」の略で、日本語では「フォーマット(整形)済みのテキスト」という意味になります。
読みやすいように半角スペースや改行などで形が整えられたテキストのことです。

通常、連続する半角スペース、改行、タブは、1つの半角スペースにまとめられて表示されますが、この要素の中では、それらが記述した通りの形で表示されるようになります。
(ただし pre 要素の開始タグ直後の改行は取り除かれます)

<pre>~</pre>で囲まれた範囲のソースは、半角スペース・改行などがそのまま表示されるため、 <pre>タグはHTMLソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用されます。

ただし、<pre>~</pre> の中でもタグは解釈されるため、HTMLソースをそのまま表示したい場合には、< と > を、&lt; と &gt; に置き換える必要があります。 また、HTML構文の中では、<pre>の開始タグの直後の改行は取り除かれるので注意してください。

プログラムのソースコードを表す場合には、<pre>と<code>を組み合わせて使用するのが一般的です。

HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01 では、pre要素には非推奨とされながらもwidth属性が用意されていましたが、HTML5では廃止されています。

また、HTML5ではpre要素を使用する際には、半角スペースや改行などのフォーマット(整形)を失ってしまう場合に配慮することが推奨されています。
例えば、音声機器や点字ディスプレイで利用される場合や、アスキーアートが半角スペースや改行で整形されない場合などです。このような状況が想定されるなら、テキスト説明などの何らかの代替手段を用意しておくほうがアクセシビリティーが高まるでしょう。

参考:HTML5 タグ一覧

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です