【HTML】pre要素の使い方【テキストのスペースや改行をそのまま表示します】

Program

pre要素を使えば、テキストのスペースや改行をそのまま表示できます。

pre要素の基本的な使い方

まず、以下のプログラムと、ブラウザの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pre要素</title>
</head>
<body>
<pre>
 ∧,,∧ 
(*・ω・)/ 
</pre>
</body>
</html>

body要素の中に、pre要素があります。

pre要素では、スペースや改行を含んだ顔文字がマークアップされています。

このため、ブラウザでの表示結果の通り、pre要素でマークアップされた顔文字がスペースや改行が含まれた形態で、表示することができました。

pre要素における特殊文字の利用

次に、以下のプログラムと、ブラウザの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pre要素</title>
</head>
<body>
<pre>
「<」「>」「&」は特殊文字として認識されます。
「<」「>」「&」は特殊文字として認識されます。
</pre>
</body>
</html>

body要素の中に、pre要素があります。

pre要素の中には、2行の文章が記述されています。

1つ目の文章では、『「<」「>」「&」は特殊文字として認識されます。』と記載されています。

これに対して、2つ目の文章では、『「&lt;」「&gt;」「&amp;」は特殊文字として認識されます。』と記載されています。

ところが、ブラウザの表示結果は、どちらの文章の内容も同じ記載となっています。

実は、1つ目の文章のように、pre要素でマークアップされた内容に「<」「>」「&」の記号がそのまま記載されている場合、これら3つの記号は「特殊文字」として認識され、ブラウザおよびクローラーに正しく認識してもらえなくなってしまいます。

このため、2つ目の文章のように、「<」を「&lt;」として、「>」を「&gt;」として、「&」を「&amp;」として記述しておき、ブラウザおよびクローラーに正しく認識してもらえるようにすることが推奨されています。

ブラウザでの表示結果の通り、単に、ブラウザを閲覧しているユーザーに理解してもらうだけの目的であれば、そのまま「<」「>」「&」として記述しておけば良いですが、ブラウザやクローラーでの正い認識を踏まえた場合、「&lt;」「&gt;」「&amp;」として記述しておくことをおすすめします。

各種ブラウザでの表示結果

pre要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
pre要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、pre要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました