Before we dive in, let's quickly cover a few foundational ideas. If you already know these, treat this as a helpful reminder!

What is an HTML Element?

An HTML element is a building block of a web page. It is written with an opening tag, some content, and a closing tag.

<p>This is a paragraph.</p>

• <p> → opening tag (tells the browser "start a paragraph here")
• This is a paragraph. → the content the user will see
• </p> → closing tag (tells the browser "end the paragraph here")

What is a Monospace Font?

A monospace font (also called a fixed-width font) is a font where every single letter takes up exactly the same amount of horizontal space. This is the font style used by most code editors, terminals, and command prompts.

For example, in a regular font:

iii   → narrow letters, takes less space
WWW   → wide letters, takes more space

In a monospace font:

iii   → every letter is the same width
WWW   → every letter is the same width

This makes code easier to read because columns line up neatly. When you use the HTML computer code elements in this lesson, the browser automatically switches to this monospace style.

What is Inline vs Block Content?

• Inline elements sit inside a line of regular text · they don't force a new line. Examples: <strong>, <em>, <code>, <kbd>, <var>, <samp>.
• Block elements take up their own full row on the page. Examples: <p>, <div>, <pre>, <h1>.

Most of the elements in this lesson are inline, except <pre>, which is a block element. We'll explain each one in detail below.

Why Do These Elements Exist?

Think about a technology documentation website · like a setup guide for software. It might include:

• A keyboard shortcut like Ctrl + S (save the file)
• A terminal error message like File not found
• A snippet of actual code like x = 5;
• A variable name like b in a math formula

Without special HTML elements, all of these would look exactly the same as ordinary paragraph text. A reader would have no visual cue about what is a command, what is output, and what is a variable. That would be confusing!

HTML's computer code elements solve this problem by giving technical content its own distinctive look and semantic meaning. Semantic means that the element tells the browser (and search engines, and screen readers) what kind of content this is, not just how it should look.

What Is It?

The <kbd> element stands for keyboard. You use it to show text that the user is supposed to type or press on their keyboard. Think of it as a label that says: "Hey reader, press this key!"

What It Looks Like

The browser renders <kbd> content in the default monospace font · the same kind of font you see in code editors.

Simple Example

<p>To save your file, press <kbd>Ctrl + S</kbd></p>

Expected Output in the Browser:

To save your file, press Ctrl + S

The text Ctrl + S appears in a monospace font, visually distinct from the rest of the sentence.

Another Example

<p>To undo an action, press <kbd>Ctrl + Z</kbd></p>
<p>To copy selected text, press <kbd>Ctrl + C</kbd></p>
<p>To paste, press <kbd>Ctrl + V</kbd></p>

Expected Output:

To undo an action, press Ctrl + Z To copy selected text, press Ctrl + C To paste, press Ctrl + V

Why Use <kbd> Instead of Just Bold Text?

You could write:

<p>Press <strong>Ctrl + S</strong> to save.</p>

But this would only make the text bold · it gives no information about what kind of content it is. Using <kbd> tells browsers, search engines, and assistive technologies (like screen readers for visually impaired users) that this is keyboard input. It carries meaning, not just style.

💡 Analogy: Think of <kbd> like a key cap on a physical keyboard · it looks distinct from surrounding text, just like a real key stands out from the desk it sits on.

Real-World Use Cases

• Software tutorials: "Press Enter to confirm"
• Game documentation: "Use WASD to move your character"
• Spreadsheet guides: "Press F2 to edit a cell"

What Is It?

The <samp> element stands for sample. You use it to show text that represents output produced by a computer program · like a message printed to the screen or an error from a terminal.

The Key Difference from <kbd>

Think of it like a conversation: you speak (<kbd>), and the computer replies (<samp>).

Simple Example

<p>Message from my computer:</p>
<p><samp>File not found. Press F1 to continue</samp></p>

Expected Output in the Browser:

Message from my computer:

File not found. Press F1 to continue

The error message appears in monospace font, just like you'd see in a real terminal window.

Another Example · A Login Attempt

<p>After entering the wrong password, you might see:</p>
<p><samp>Access denied. Too many failed attempts. Try again in 30 seconds.</samp></p>

Expected Output:

After entering the wrong password, you might see:

Access denied. Too many failed attempts. Try again in 30 seconds.

Real-World Use Cases

• Bug reports and technical support pages
• Command-line tutorials showing what appears after running a command
• System documentation showing expected program responses

What Is It?

The <code> element is used to mark up an actual piece of computer code. This could be a variable name, a function call, a command, or a short snippet from a programming language.

Simple Example

<p>In Python, you can print text using the <code>print()</code> function.</p>

Expected Output:

In Python, you can print text using the print() function.

Another Example · Inline Code in a Sentence

<p>Set the variable with <code>x = 5;</code> and the result will be 5.</p>

Expected Output:

Set the variable with x = 5; and the result will be 5.

Multi-line Code Block with <code>

You can also put multiple lines of code inside <code>:

<code>
x = 5;
y = 6;
z = x + y;
</code>

Expected Output:

x = 5; y = 6; z = x + y;

Wait · notice something strange! The three lines collapsed into one line. The <code> element on its own does NOT preserve line breaks or extra spaces. This is a very important limitation to understand.

🤔 Thinking Prompt: What would happen if you added ten blank lines inside a <code> tag? They would all be collapsed and ignored. Why? Because HTML collapses whitespace by default.

To fix this, you need to combine <code> with another element · <pre>. We'll learn that next.

What Is It?

The <pre> element stands for preformatted. It tells the browser: "Display this text exactly as I typed it · preserve every space, every blank line, every indent."

This is a block-level element, meaning it creates its own section on the page (like a paragraph does).

Why Is It Important for Code?

When you write real code, spacing matters. Indentation, line breaks, and alignment communicate structure. Without <pre>, all of that formatting would be lost.

The Right Pattern: <pre> + <code> Together

The professional and correct way to display a multi-line code block in HTML is to wrap <code> inside <pre>:

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

Expected Output:

x = 5;
y = 6;
z = x + y;

Now the three lines appear on separate lines, exactly as written!

Simple <pre> Example (Without <code>)

<pre> can also be used on its own for ASCII art or any preformatted text:

<pre>
Name:   Amara
Age:    22
Grade:  A+
</pre>

Expected Output:

Name:   Amara
Age:    22
Grade:  A+

The columns line up perfectly because the spaces are preserved!

Another <pre> + <code> Example · Python Code

<pre>
<code>
def greet(name):
    print("Hello, " + name)

greet("Amara")
</code>
</pre>

Expected Output:

def greet(name):
    print("Hello, " + name)

greet("Amara")

The indentation is preserved exactly, which is essential for Python where indentation controls code structure.

💡 Analogy: Think of <pre> like a photographer's "do not crop" instruction. It tells the browser, "Show every pixel exactly as it was. Don't rearrange anything."

Real-World Use Cases

• Programming tutorial websites (showing code samples)
• Technical documentation
• Displaying terminal output with proper formatting
• Poetry or text art where spacing matters

What Is It?

The <var> element is used to mark up a variable · in programming, this is a named container that holds a value. In mathematics, it's a letter that represents an unknown or changing quantity.

By default, most browsers display <var> content in italic text.

Why Use <var>?

It gives semantic meaning to variable names so that both readers and machines understand: "this word is a variable, not ordinary text."

Simple Example · Math Context

<p>The area of a rectangle is: <var>length</var> × <var>width</var></p>

Expected Output:

The area of a rectangle is: length × width

Both variable names appear in italics, distinguishing them from the regular words.

The W3Schools Example · Triangle Area

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, 
where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

Expected Output:

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

Another Example · Programming Context

<p>Declare a variable: <code>var <var>score</var> = 100;</code></p>

Expected Output:

Declare a variable: var score = 100;

Notice how <code> wraps the whole snippet (it's code), but <var> is used specifically around the variable name score.

Real-World Use Cases

• Mathematics textbooks and STEM educational websites
• Programming documentation explaining what a variable does
• Physics or chemistry pages explaining formulas with variable components

Now that you know each element separately, let's see how they work together in a realistic scenario: a simple troubleshooting guide.

<h2>How to Check Your Python Version</h2>

<p>Open your terminal and type the following command:</p>
<p><kbd>python --version</kbd></p>

<p>Your computer should display something like:</p>
<p><samp>Python 3.11.2</samp></p>

<p>If you want to use this in a script, the relevant code is:</p>
<pre>
<code>
import sys
print(sys.version)
</code>
</pre>

<p>In this code, <var>sys</var> is a built-in module that contains 
system-specific information, and <code>sys.version</code> is 
the attribute that holds the version string.</p>

Expected Rendered Output:

How to Check Your Python Version

Open your terminal and type the following command:

python · version

Your computer should display something like:

Python 3.11.2

If you want to use this in a script, the relevant code is:

import sys
print(sys.version)

In this code, sys is a built-in module that contains system-specific information, and sys.version is the attribute that holds the version string.

Notice how each element plays its own clear role in that example. The overall result is professional, semantic, and easy to understand.