Theory
Theory

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.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day Six. How I failed to understand anything.</h1> <p>Today I visited several websites to see how they are laid out. I saw some quotes and unfamiliar <code><cite></code> and <code><blockquote></code> tags.</p> <p>I didn’t understand how these two tags differ from each other. I closed the browser. I’ll figure it out tomorrow.</p> <p>But look at what I saw.</p>  <blockquote> <p>Intelligence is highly valued when power is held cheap.</p> <cite>Jason Statham</cite> </blockquote> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } pre, code { font-family: "Courier New", "Courier", monospace; color: #6a2cce; }

Goalscompleted

Enclose the code example on lines 24–27 in the <pre> tag.
Then enclose the text inside <pre> in <code>.

Combining pre and code tags

Log in

Sign up

Restore access