<pre><code>が反映されません。

Question

前提・実現したいこと

ソースコードをブラウザでそのまま表示させたい。

発生している問題・エラーメッセージ

<code>または<pre>タグで囲っても、該当部分が<title>として扱われているのか、ブラウザで見てみると表示されません。cssでは何も指定していません。

該当のソースコード

<p>まず、htmlソースが見れる状態にして、上から６行目あたりにある、<br>
    <pre><title>初心者向けホームページテンプレート tp_beginner5</title></pre>
    を編集しましょう。<br>
    あなたのホームページ名が「SAMPLE SITE」だとすれば、<br>
    <code> <title>SAMPLE SITE</title> </code>
    とすればＯＫです。</p>

以下試したコード（今は書いていません。こちらを加えると白枠で囲まれ、文字は表示されませんでした。）
pre {
	white-space : pre ;
	margin : 2em ;
	padding :1em ;
	font-size : 100% ;
	font-family : monospace ;
	border : 1px solid gray ;
}

試したこと

<pre><code>を重ねてみたりしましたがダメでした。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。

Answer 1

pre要素は「囲んだものが何でもそのまま表示される要素」ではありません。

空白文字や改行がそのまま表示されるだけですね。
ですから、<や>や&などは文字実体参照(<や>や&など)を使って書いてください。