Loading lesson path
Concept visual
Start at both ends
HTML contains several elements for defining user input and computer code.
<code>
x = 5;
y = 6;
z = x + y;</code>
Formula
HTML < kbd > For Keyboard Input<kbd> 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:
Formula
< p > Save the document by pressing < kbd > Ctrl + S </kbd ></p >Formula
Ctrl + S
HTML < samp > For Program Output<samp> 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:
Formula
< p > Message from my computer:</p >
< p >< samp > File not found.< br > Press F1 to continue </samp ></p >File not found.
Formula
HTML < code > For Computer Code<code> 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>
x = 5;
y = 6;
z = x + y;<code> element does
Formula
NOT preserve extra whitespace and line - breaks.
To preserve extra whitespace and line - breaks, you can put the<code> element inside a <pre> element:
<pre> <code>
x = 5;
y = 6;
z = x + y;</code> </pre>
x = 5;
y = 6;
z = x + y;
HTML <var> For Variables<var>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>Formula
The area of a triangle is: 1/2 x bx h, where b is the base, and h is the vertical height.
<kbd> element defines keyboard input
<samp> element defines sample output from a computer program