Loading lesson path

HTML•HTML Foundations

HTML Computer Code Elements

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind HTML Computer Code Elements?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Order

Put the learning moves in the order that makes the concept easiest to apply.

HTML <samp> For Program Output

HTML <kbd> For Keyboard Input

HTML Computer Code Elements

HTML contains several elements for defining user input and computer code.

Example

Formatted code

<code>
x = 5;
y = 6;

  z = x + y;
</code>

Live preview

HTML <kbd> For Keyboard Input

The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

Example

Formatted code

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

Live preview

Expected output

Save the document by pressing Ctrl + S

HTML <samp> For Program Output

The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

Example

Formatted code

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

Live preview

Expected output

Message from my computer: File not found. Press F1 to continue

HTML <code> For Computer Code

The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Example

Formatted code

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

Live preview

Expected output

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

Preserve Line-Breaks

Notice that the <code> element does NOT preserve extra whitespace and line-breaks.

To preserve extra whitespace and line-breaks, you can put the <code> element inside a <pre> element:

Example

Formatted code

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

Live preview

Expected output

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

HTML <var> For Variables

The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Example

Formatted code

<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>

Live preview

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.

Chapter Summary

The <kbd> element defines keyboard input
The <samp> element defines sample output from a computer program
The <code> element defines a piece of computer code
The <var> element defines a variable in programming or in a mathematical expression
The <pre> element defines preformatted text