Combining pre and code tags

You have decided to supplement the entry text with an illustrative example: a multi-line code segment that is well formatted. As you remember, the <pre> tag helps to preserve the formatting, and the <code> tag is used to mark up the code. It turns out that these tags must be used in combination with each other. In other words, one tag needs to be nested inside the other.

The main thing is to follow the correct nesting order for tags. The <code> tag can be nested inside the <pre> tag. However, the reverse is not permitted. Example:

<pre><code>
if (a > b) {              // Example of code in
  console.log('Hello!');  // the JavaScript language
}
</code></pre>

There is no difference in how a simple <pre> tag and <pre> tag with nested <code> is displayed in the browser. However, the second markup version is more informative and expressive.

We added several styles (font and text color parameters) to make the contents of the <pre> and <code> tags look prettier. You can explore the styles in the style.css tab.