HTMLタグを表示する

HTMLタグを表示する

サンプルなどでHTMLソースなどを画面に表示したいという場合があります。しかし、HTMLソースをそのまま記述してしまうとブラウザにソースとして認識されてタグなどが表示できません。

では、どうすればHTMLソースを画面に表示するかというと、特殊文字を文字コードに変換することで表示することができます。文字コードはブラウザがその文字コードに対応する文字に変換して表示されますので、タグとしては認識されずにソースとして表示することができます。

例えば、<は&lt;に、>は&gt;に、"は&quot;に変換してあげます。

特殊文字の変換例

上記のように特殊文字を文字コードに置き換えることでHTMLタグを表示させることができます。ただ、特殊文字を手作業で置き換えるのは非常に面倒です。そこで特殊文字を文字コードに置き換えてくれるツールを活用します。

特殊文字を文字コードに置き換えることを"HTMLエンティティ"と言いますが、HTMLエンティティツールを当サイトでも用意してありますので是非ご活用ください。
HTMLエンティティツール

複数行のHTMLタグを表示する

１行のHTMLソースであれば特殊文字を変換してあげればそのまま表示できますが、複数行のHTMLソースでは少し工夫が入ります。というのも特殊文字を変換した複数行のソースをそのまま入力すると改行やタブが反映されないためです。

複数行のHTMLソースを表示させる場合には、preタグで囲んであげると改行やタブを反映したHTMLソースを表示させることができます。

<pre>
&lt;ul&gt;
	&lt;li&gt;aaa&lt;/li&gt;
&lt;/ul&gt;
</pre>

<ul>
	<li>aaa</li>
</ul>