HTML pre and code: Showing Code and Preformatted Text

The HTML pre element keeps spaces and line breaks exactly as you type them, and the code element marks computer code. Learn pre, code, pre with code, escaping and kbd.

What does the pre element do?

Normally browsers collapse whitespace: many spaces and new lines become one space. You saw this in the lesson about comments and whitespace. The <pre> element switches that rule off. Its name means preformatted text: text that is already formatted with spaces and line breaks, and must stay that way.

Inside <pre>:

• Every space is kept.
• Every new line is kept.
• The text uses a monospace font by default, where every letter has the same width, like a typewriter.
• Long lines do not wrap; they keep going to the right.

Think of <pre> as a photocopy: the browser shows exactly what you wrote, with no tidying.

<pre>
Opening hours
  Monday - Friday     8:00 - 18:00
  Saturday            9:00 - 17:00
  Sunday              closed
</pre>

The times line up in neat columns, because every space is kept and every character is the same width. In a normal <p>, all of this would squash into one long line.

Note: A single new line straight after the opening <pre> tag is ignored by the browser. That is why you can start the content on the next line without getting an empty first line.

The code element for computer code

The <code> element marks a piece of computer code: a tag name, a CSS property, a file name, a command. You met it briefly in the formatting lesson. It is an inline element, so it sits inside a sentence.

<p>To make a link, use the <code>a</code> element with an <code>href</code> attribute.</p>
<p>Save your stylesheet as <code>styles.css</code> in the <code>css</code> folder.</p>
<p>In CSS, <code>color: red;</code> makes text red.</p>

The words inside <code> appear in a monospace font, so readers can see at a glance which parts are code. Screen readers and search engines also know these words are code.

Using pre and code together for code blocks

For a block of code with several lines, put <code> inside <pre>. <pre> keeps the spacing and indentation; <code> says "this is code". This is the standard pattern, and syntax highlighting tools like Prism and highlight.js expect it.

You can add a class like language-css on the <code> element to say which language it is. Highlighting tools use this to color the code.

<p>Add this CSS to make all headings dark blue:</p>
<pre><code class="language-css">h1, h2, h3 {
  color: navy;
  font-family: Georgia, serif;
}</code></pre>

You will see the CSS in a monospace font with its indentation kept, exactly like in a code editor. Notice that the code starts right after <code> on the same line. If you put a new line there, you get an empty line at the top of your block.

How to show HTML tags inside code

Here is the tricky part. If you want to show HTML code on your page, the browser sees <p> and thinks it is a real tag. <pre> and <code> do not stop this. You must escape the special characters with entities:

Character	Write it as
<	&lt;
>	&gt;
&	&amp;

<p>Here is how to add an image:</p>
<pre><code class="language-html">&lt;img src="cat.jpg" alt="A ginger cat asleep on a sofa"&gt;</code></pre>
<p>To show an ampersand in HTML, write <code>&amp;amp;</code>.</p>

The browser shows the image tag as text, starting with a real < sign, instead of trying to load cat.jpg. The last line shows the text & on the page, because the first & in the code turns into a plain "&" and the rest is shown as normal text.

Common mistake: Pasting HTML into <pre><code> without escaping it. The browser runs your example as real HTML: tags disappear, links become clickable and the page can break. Always replace < with <. Many code editors and online tools can do this for you.

kbd, poetry and ASCII art

Showing keyboard keys with kbd

When you tell readers to press keys, use <kbd>, which means keyboard input. It was covered in the lesson about lesser-known elements; here is how it fits with code examples.

<p>Open your terminal and type the command below, then press <kbd>Enter</kbd>.</p>
<pre><code>npm install</code></pre>
<p>To copy, press <kbd>Ctrl</kbd> + <kbd>C</kbd> (or <kbd>Cmd</kbd> + <kbd>C</kbd> on a Mac).</p>

The key names appear in monospace, and with a bit of CSS you can make them look like real keys.

Poems and ASCII art

<pre> is not only for code. Any text where the exact spacing matters can use it, such as a poem with special indentation or ASCII art (pictures drawn with keyboard characters).

<figure>
  <pre role="img" aria-label="A small cat drawn with keyboard characters">
 /\_/\
( o.o )
 > ^ &lt;
  </pre>
  <figcaption>A cat drawn with text characters.</figcaption>
</figure>

The cat keeps its shape because every space stays in place. Screen readers would read ASCII art as a jumble of symbols, so role="img" with an aria-label gives them a short description instead. Notice the < for the cat's chin.

Tip: Because <pre> does not wrap long lines, wide code can push past the edge of a phone screen. In CSS, add overflow-x: auto; to pre so the block scrolls sideways inside its box instead of breaking the page layout.

Practice exercise

Write a short help page called "How to centre a heading". Explain it in a paragraph that mentions the text-align property inside <code>. Then show the HTML for an <h1> with a style attribute in a <pre><code> block, correctly escaped, and tell the reader to save with <kbd> keys.

Hint: every < in your HTML example must become <, and > should become >.

Key takeaways

• <pre> keeps all spaces and line breaks and uses a monospace font.
• <code> marks computer code inside a sentence.
• Use <pre><code> together for multi-line code blocks, with a language- class if you use a highlighter.
• Escape <, > and & as <, > and & when you show HTML as text.
• Use <kbd> for keys the user presses, and <pre> for poems or ASCII art where spacing matters.