I am creating a documentation page and in one section I attempt to explain the anatomy of the HTML document. In the final outcome, it does not show the correct indentation.

Code:

```
<p>
   <code>
      &lt;!DOCTYPE html&gt;
      &lt;html lang="en-US" dir="ltr"&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt;Title Name&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;h1&gt;This is a headline.&lt;/h1&gt;
      &lt;p&gt;1st paragraph.&lt;/p&gt;
      &lt;p&gt;Usually there's quite a lot here.&lt;/p&gt;
      &lt;/body&gt;
      &lt;/html&gt;
   </code>
 </p>

```

I even added physical indentations and it is still not evident in the final result.

```
<p>
   <code>
      &lt;!DOCTYPE html&gt;
      &lt;html lang="en-US" dir="ltr"&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt;Title Name&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;h1&gt;This is a headline.&lt;/h1&gt;
          &lt;p&gt;1st paragraph.&lt;/p&gt;
          &lt;p&gt;Usually there's quite a lot here.&lt;/p&gt;
          &lt;/body&gt;
        &lt;/html&gt;
   </code>
 </p>

```

[Final outcome](https://i.stack.imgur.com/fFzUT.png)