pre要素とは? 分かりやすく解説します!

1.pre要素とは?

pre要素は整形済みテキストを表します。

整形済みテキストはプログラムのソースコードのように空白、タブ、改行も含めソースやテキストをそのまま表示するテキストのことです。

pre要素は自動的な折り返しがされなくなるので、ソースコードなどをそのまま表示する時に便利です。

※「<」、「>」、「&」などは特殊文字として認識されるので、実体参照に置き換えて書く必要があります。

2.pre要素の使い方

それではpre要素の使い方をみていきましょう。

・・・

<pre>
 <code>
  function pre() {
   console.log("pre要素とは?")
  }
  pre()
 </code>
</pre>

・・・

上記はpreタグとcodeタグを用いてJavaSctriptのソースコードをHTML内に埋め込んだものとなっています。

codeタグの外側をpreタグで囲むことでソースコードのインデントが揃い、読みやすいソースコードになっています。