Step 1: When writing technical documentation, you often need to display computer code. If you use normal paragraphs, the browser will treat it as regular text. We use specific tags to tell the browser: 'This is code'.

Step 2: The `<code>` tag is used for inline code fragments. It changes the font family to monospace (like Courier) but it does not preserve formatting or line breaks. It's great for mentioning variables or short commands.

<p>Use <code>git status</code> to check.</p>

Step 3: Here is the result. Notice the different font for 'git status'. It stands out from the rest of the text, but it flows with the sentence.

<p>Use <code>git status</code> to check.</p>

Step 4: However, if we want to display a block of code with multiple lines and indentation, `<code>` alone isn't enough. Browsers ignore extra whitespace. This makes Python or JS code look messy.

<code>
function hello() {
  console.log('Hi');
}
</code>

Step 5: Checkpoint: Which tag is best for short, inline code snippets?

<p>Install via <code>npm install</code></p>

Step 6: To fix the whitespace issue, we use the `<pre>` tag. It stands for 'Preformatted Text'. It preserves all spaces and line breaks exactly as they are in your editor.

<pre>
  Line 1
    Line 2 (indented)
</pre>

Step 7: The standard pattern for code blocks is to wrap `<code>` INSIDE `<pre>`. `<pre>` handles the layout/whitespace, and `<code>` provides the semantic meaning and font style.

<pre><code>
const x = 10;
if (x > 5) {
  run();
}
</code></pre>

Step 8: Now look at the result. The indentation is perfect. This is how code blocks on documentation sites (like this one!) are built.

<pre><code>
const x = 10;
if (x > 5) {
  run();
}
</code></pre>

Step 9: Checkpoint: What tag combination creates a multi-line code block?

<pre><code>...</code></pre>

Step 10: There are other semantic tags for tech content. `<kbd>` represents user input (keyboard keys), like 'Ctrl + C'. `<var>` represents a variable in a mathematical or programming expression.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>x = <var>y</var> + 2</p>

Step 11: Finally, `<samp>` (Sample) is used to show output from a computer program, like a terminal message or error log.

<p>System message: <samp>File not found</samp></p>

Step 12: Practice is key. Mastering these tags will make your technical writing clear and professional. Login below to try the code challenges!

code.html

1 / 12

💻

Tutor:When writing technical documentation, you often need to display computer code. If you use normal paragraphs, the browser will treat it as regular text. We use specific tags to tell the browser: 'This is code'.

⭐ 0 EXP

CODE TREE

Unlock nodes by learning how to display code.

Concept 1: Inline Code

The <code> tag is for fragments of code inside regular text. It changes the font family to monospace.

System Check

Does the <code/> tag preserve whitespace by itself?

Yes, always.No, it collapses whitespace.Only in Chrome.Only if used with <b/>.

Community Holo-Net

Showcase Your Code Snippets

Created a beautiful code block? Share your <code> examples.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

Displaying Code in HTML

Pascual Vila

Frontend Instructor.

When documenting software, showing code examples is crucial. HTML provides specialized tags to handle the display of computer code, distinguishing it from regular text.

Inline Code

The <code> tag is used for inline snippets, such as variable names, functions, or short commands within a sentence. Browsers typically render this in a monospaced font.

Preformatted Blocks

By default, HTML collapses whitespace. To display multi-line code blocks with proper indentation, we use the <pre> tag. It tells the browser to respect your whitespace exactly.

Semantic Inputs & Outputs

Beyond just code, we have <kbd> for keyboard inputs (like shortcuts), <var> for mathematical variables, and <samp> for sample program output.

Code Display Glossary

<code>: Defines a piece of computer code. Used inline. Changes font to monospace.
<pre>: Defines preformatted text. Preserves both spaces and line breaks.
<kbd>: Represents user input, such as keyboard keys or voice commands.
<var>: Defines a variable in programming or a mathematical expression.
<samp>: Represents output from a computer program or system.

📖 INDEX