HTML TutorialLesson #33

HTML Computercode

HTML contains several elements for defining user input and

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


Example

Example Code

html
Try it Yourself
<code>
x = 5;
y = 6;

  z = x + y;
</code>

HTML 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

Example Code

html
Try it Yourself
Live Output Preview:

HTML 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

Example Code

html
Try it Yourself
Live Output Preview:

HTML 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

Example Code

html
Try it Yourself
<code>
x = 5;
y = 6;
z = x + y;
</code>

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

Example Code

html
Try it Yourself
Live Output Preview:

HTML 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

Example Code

html
Try it Yourself
Live Output Preview:

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

HTML Computer Code Elements

TagDescription
<code>Defines programming code
<kbd>Defines keyboard input
<samp>Defines computer output
<var>Defines a variable
<pre>Defines preformatted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Interactive Code Examples

HTML Example 1

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 2

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 3

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 4

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 5

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 6

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview: