ページ上にソースコードを表示する方法

webページ上に、htmlソースなどを表示したい場合は、「pre要素」と「code要素」を利用します。

「pre要素」は、要素ないのテキストの改行やスペースをそのまま表示してくれますので、インデントなどを含む複数行のコードの場合に使います。ただし、pre要素自体は「整形済みのテキスト」という意味合いしかありません。本来はプログラムのソースコードを表す「code要素」というものがあります。「code要素」はインライン要素として定義されており短いソースコードを記述する場合に適しています。その場の状況により使い分けていくと良いでしょう。

例を挙げてみると、

<ul class="sample">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
</ul>

</ul>

上記のようなコードをwebページ上に表示したい場合は、下記のように記述します。

ソースコード中の「<」「>」「“」はそのまま記述してしまうと、htmlタグとして認識されてしまうので、「<」「>」「"」と記述しなければなりません。

簡単ではありますが、以上になります。