HTML Performatted Text

The <pre> Tag

The <pre> tag is used to display text exactly as written, including spaces, tabs, and line breaks. It uses a monospace font (like a typewriter).

Syntax:

<pre>
  Line 1: Hello
  Line 2:     Indented
  Line 3:         More indented
</pre>

Useful for showing code, ASCII art, or formatted text.

HTML Code Tags for Computer Code

HTML provides several tags to display computer code and programming content:

1. <code> - For Inline Code

Used to show short pieces of code inside paragraphs.

Syntax:

<p>The <code>print()</code> function is used in Python to display output.</p>

2. <pre><code> - For Code Blocks

Combines both tags to display formatted code blocks (preserves spacing + code look).

Syntax:

<pre><code>
function greet() {
  console.log("Hello, world!");
}
</code></pre>

3. <kbd> - For Keyboard Input

Displays text as keyboard input (used in documentation/tutorials).

Syntax:

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

4. <samp> - For Sample Output

Used to display output from a program or computer system.

Syntax:

<p>The output was: <samp>Login successful</samp></p>

5. <var> - For Variables

Used to define a variable name in programming or math.

Syntax:

<p>In the equation <var>x</var> + 5 = 10, the value of <var>x</var> is 5.</p>

Summary Table of Code Tags

Best Practices

• Wrap code blocks in <pre><code> for clear formatting
• Use <kbd> for shortcut keys in tutorials
• Use <samp> for showing console or result outputs
• Don't use <b> or <i> for code - always use semantic tags