Code & Technical Text

🌐 HTML5 🟢 Chapter 6 of 37 📂 Phase 02: Syntax & Text 📅 2026 Edition

📌 Covered in this chapter: Inline Code <code> · Multi-line <pre><code> · Keyboard Shortcuts <kbd> · Terminal Output <samp> · Mathematical Variables <var> · HTML Character Entity Escaping (<, >, &, ", ')

Welcome to Phase 2 (Chapter 6): Code & Technical Text! When creating developer documentation, programming tutorials, or tech blogs, you must display code snippets, terminal commands, keyboard shortcuts, and mathematical variables accurately. In this chapter, we master <code>, <pre>, <kbd>, <samp>, <var>, and escaping HTML entities.

1Inline Code (<code>) vs Multi-line Preformatted Code (<pre><code>)

Inline Code (<code>): Used to highlight single code keywords, function names, or file paths within a regular text paragraph.

Preformatted Block (<pre><code>): The <pre> tag preserves exact spaces, tabs, and line breaks. Combining <pre> with <code> displays multi-line source code cleanly in monospace font.

HTML — Code & Preformatted Syntax ▶ Run in HTML Editor

<p>Use the <code>console.log()</code> method in JavaScript to print output.</p>

<!-- Multi-line Code Block -->
<pre><code>function calculateSum(a, b) {
  // Returns sum of two numbers
  return a + b;
}</code></pre>

2Keyboard Shortcuts (<kbd>), Terminal Output (<samp>) & Variables (<var>)

Tag	Purpose	Example Rendered Syntax
`<kbd>`	Represents keyboard key combinations pressed by user.	`Press <kbd>Ctrl</kbd> + <kbd>C</kbd>`
`<samp>`	Represents sample output from a computer program or terminal command.	`<samp>Error 404: Not Found</samp>`
`<var>`	Represents a mathematical variable or program variable.	`<var>x</var> = <var>y</var> + 2`

HTML — kbd, samp & var Showcase ▶ Run in HTML Editor

<p>To save your file in VS Code, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Terminal Output: <samp>Build Succeeded in 1.4s</samp></p>
<p>Area of triangle: <var>A</var> = ½ &times; <var>b</var> &times; <var>h</var></p>

3HTML Character Entity Escaping Reference Table

In HTML, characters like < and > are reserved for opening and closing tags. If you want to display literal brackets on screen inside code examples, you MUST use HTML Entity Escaping:

Reserved Character	Entity Name	Entity Number	Description
`<`	`<`	`<`	Less than symbol
`>`	`>`	`>`	Greater than symbol
`&`	`&`	`&`	Ampersand symbol
`"`	`"`	`"`	Double quotation mark
`'`	`'` or `'`	`'`	Single quote / apostrophe
`©`	`©`	`©`	Copyright symbol
` `	` `	` `	Non-breaking space

HTML — Escaped Code Snippet Example ▶ Run in HTML Editor

<!-- Notice how <div> is escaped as &lt;div&gt; -->
<pre><code>&lt;div class="card"&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;</code></pre>

❓ Frequently Asked Questions (FAQ)

Q1: What happens if I forget to escape <div> inside a <code> block?

The browser will interpret <div> as a real DOM tag instead of showing source code text, breaking your layout tree!

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026