Preformatted Text and Code

The Pre Element

The <pre> element (short for "preformatted") displays text exactly as it's written in your HTML, preserving all spaces, line breaks, and tabs. By default, it also uses a monospace font.

<pre>
This    text    has    extra    spaces
And multiple
    lines
        with indentation
</pre>

The browser displays this exactly as written:

This text has extra spaces And multiple lines with indentation

When to Use Pre

• ASCII art or diagrams
• Poetry or lyrics where line breaks are important
• Code blocks where indentation matters
• Computer output or logs

The Code Element

The <code> element is used to mark up inline code snippets or programming-related text. It displays text in a monospace font but doesn't preserve whitespace like <pre>.

<p>
  Use the <code>console.log()</code> function to output messages 
  to the browser console.
</p>

<p>
  The <code>background-color</code> CSS property changes the 
  background of an element.
</p>

Combining Pre and Code

For displaying multi-line code blocks, it's best practice to combine both elements:

<pre><code>function greet(name) {
  console.log("Hello, " + name);
  return true;
}

greet("World");</code></pre>

This combination tells browsers: "This is code (semantic meaning) that should preserve formatting (visual presentation)."

The Kbd Element

The <kbd> element (short for "keyboard") represents user input, typically from a keyboard. It's used to show which keys or commands a user should type.

<p>
  Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the selected text.
</p>

<p>
  To save your file, press <kbd>Ctrl</kbd> + <kbd>S</kbd> on Windows 
  or <kbd>Cmd</kbd> + <kbd>S</kbd> on Mac.
</p>

<p>
  Type <kbd>ls -la</kbd> to list all files in the directory.
</p>

The Samp Element

The <samp> element represents sample output from a computer program or system.

<p>When you run the command, you'll see:</p>
<pre><samp>
$ node app.js
Server is running on port 3000
Connected to database successfully
</samp></pre>

<p>
  If the file is not found, the system returns 
  <samp>Error: ENOENT: no such file or directory</samp>
</p>

The Var Element

The <var> element represents a variable in mathematical expressions or programming contexts.

<p>
  The formula for the area of a circle is 
  <var>A</var> = π<var>r</var>²
</p>

<p>
  In the equation <code>let <var>x</var> = 10</code>, 
  <var>x</var> is a variable.
</p>

Practical Examples

Tutorial Instructions

<article>
  <h2>Installing Node.js</h2>
  
  <p>Open your terminal and type:</p>
  <pre><kbd>node --version</kbd></pre>
  
  <p>You should see output similar to:</p>
  <pre><samp>v18.16.0</samp></pre>
  
  <p>
    To run your JavaScript file, use the <code>node</code> command 
    followed by your filename.
  </p>
</article>

Code Documentation

<section>
  <h3>Array.filter() Method</h3>
  
  <p>
    The <code>filter()</code> method creates a new array with elements 
    that pass a test.
  </p>
  
  <pre><code>const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]</code></pre>
  
  <p>
    In this example, <var>numbers</var> is the original array and 
    <var>evenNumbers</var> stores the filtered result.
  </p>
</section>

Displaying HTML Code

When you want to display HTML code itself (not render it), you need to escape special characters:

• Replace < with <
• Replace > with >
• Replace & with &

<pre><code>&lt;div class="container"&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/div&gt;</code></pre>

Styling Tips

These elements have some default styling you should know about:

• All these elements use monospace fonts by default (like Courier or Consolas)
• <pre> is a block-level element
• <code>, <kbd>, <samp>, and <var> are inline elements
• <kbd> often appears with a subtle border or background

Best Practices

Accessibility Considerations

Using semantic elements helps screen readers and other assistive technologies:

• Screen readers can identify code blocks and may change pronunciation
• Keyboard shortcuts marked with <kbd> are clearly identified
• Proper semantic markup improves document structure and navigation

Key Takeaways

What's Next?

Now that you know how to display code and preformatted text, you're ready to learn about subscript and superscript text. In the next lesson, we'll explore the <sub> and <sup> elements for mathematical formulas, chemical notation, and footnotes.