【HTML】preタグって何?どんなことを表すために使うのか?

他のサイトを見ているとたまに

<pre>~</pre>

というタグを見ることがある。

  • このpreタグって何なのか?
  • どういう時に使うのか?

がわからなかったので調べてみた。

スポンサーリンク

preとは「Preformatted Text」の略

preは「Preformatted Text」の略だ。

1つずつ単語を訳すと

  • preformatted(プリフォーマットと読む)=整形済みの
  • text=文章

という意味だ。

「整形済み??どういう意味??(笑)」

と疑問に思ったが、要は「形をすでに整えてある」という意味だと思っておけばOKだ。

つまり、「Preformatted Text」=「形を既に整えてある文章」と訳せる。

preタグを使うと、ソースコード(HTMLなどのコード)や改行、空白で見た目を調整した文章などをそのまま画面に表示することが出来るのだ。

そのため、サンプルコードを記事に記載したり、空白や改行が重要な詩を記事に載せたりする場合にpreタグは使われるそうだ。

スポンサーリンク

「<」「>」などは文字参照を使う必要がある

ただし、<pre>タグ内でもHTMLタグは解釈されてしまう。

そのため、HTMLのコードをそのまま表示する場合は、

  • <,
  • >
  • &
  • "

などはそのまま表示されない、ということを頭に入れておきたい。

もしHTMLタグをそのまま表示したいならば

  • <」を表示する場合は「&lt;
  • 」を表示する場合は「&gt;
  • 」を表示する場合は「&amp;
  • "」を表示する場合は「&quot;

と記載する必要がある。

これを「文字参照」というらしい。

おすすめの記事