HTML Computer Code Elements

HTML Computer Code Elements: Defining User Input and Code

HTML ` ` For Keyboard Input

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

Define some text as keyboard input in a document:

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

Result:

Save the document by pressing Ctrl + S

HTML ` ` For Program Output

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

Define some text as sample output from a computer program in a document:

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

Result:

Message from my computer:

File not found.
Press F1 to continue

HTML ` ` For Computer Code

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

Define some text as computer code in a document:

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

Result:

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

Notice that the ` ` element does not preserve extra whitespace and line breaks. To fix this, you can put the ` ` element inside a `

` element:

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

Result:

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

HTML ` ` For Variables

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

Define some text as variables in a document:

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

Result:

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 ` ` element: Defines keyboard input.
• The ` ` element: Defines sample output from a computer program.
• The ` ` element: Defines a piece of computer code.
• The ` ` element: Defines a variable in programming or in a mathematical expression.
• The `
  ` element: Defines preformatted text.

HTML Exercises

Test Yourself With Exercises

Exercise:

Define the text "var person;" as programming code.

<p>Code example: var person;</p>