HTMLの実体参照・特殊文字とpreタグ

2020年12月4日2021年4月10日HTML

HTML文書では、特別な意味をもっているがゆえにキーを打つだけでは表示できないものがあります。 たとえば、HTML文書内で、改行や空白があってもそのままでは表示されません。 そこで「実体参照」や「preタグ」を使うことで、改行や空白といった通常HTMLで表示できないものも表示できるようになります。 ここでは、実体参照の使い方をみていきましょう。

実体参照・特殊文字

<p>「<br>」というタブは改行を意味する</p> とWebサイトで書きたいとき、brタグをそのまま書くと、改行されてbrタグ自体は表示されません。 そこで、Webサイトでそのような特殊な文字を表示するときは、文字実体参照を使います。 brタグなら、<br>と書きます。 以下はとても良く使う実体参照です。

表示	文字実体	数値文字	表示	文字実体	数値文字
<	&lt;	&#60;	>	&gt;	&#62;
&	&amp;	&#38;	“	&quot;	&#34;
©	&copy;	&#169;	スペース	&nbsp;	&#160;

<(& 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内の字下げもそのまま表示できます。