HTMLの実体参照・特殊文字とpreタグ
HTML文書では、特別な意味をもっているがゆえにキーを打つだけでは表示できないものがあります。
たとえば、HTML文書内で、改行や空白があってもそのままでは表示されません。
そこで「実体参照」や「preタグ」を使うことで、改行や空白といった通常HTMLで表示できないものも表示できるようになります。
ここでは、実体参照の使い方をみていきましょう。
実体参照・特殊文字
<p>「<br>」というタブは改行を意味する</p>
とWebサイトで書きたいとき、brタグをそのまま書くと、改行されてbrタグ自体は表示されません。
そこで、Webサイトでそのような特殊な文字を表示するときは、文字実体参照を使います。
brタグなら、<br>と書きます。
以下はとても良く使う実体参照です。
| 表示 | 文字実体 | 数値文字 | 表示 | 文字実体 | 数値文字 |
|---|---|---|---|---|---|
| < | < | < | > | > | > |
| & | & | & | “ | " | " |
| © | © | © | スペース | |   |
<(& lt;)のltというのは、less thanの略（〜より小さい）で、>(& gt;)のgtはgreater than（〜より大きい）の略です。
詳しくは、以下のWebサイトが詳しくまとめてくれています。
https://css-tricks.com/snippets/html/glyphs/
preタグ
preタグは、preformated?のこと
preタグの中では、 <>をそのまま書いても認識できるようになります。
<p>
改行や<br>
空白を<br>
そのまま表現したい場合でも、<br>
そのまま表現できちゃいます。
</p>
とすると、
このままでは一行で表示されてしまいます。
こんなとき、preタグを使います。
またコードを書くときは、codeタグを使ってあげるといいでしょう。
<pre>
<code>
<p>
改行や<br>
空白を<br>
そのまま表現したい
</p>
</code>
</pre>
で改行や、html内の字下げもそのまま表示できます。