Skip to content
View in the app

A better way to browse. Learn more.

OKCCN - XenForo & IPS Plugin Marketplace

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
  • Language

HTML Computer Code Elements

Featured Replies

  • Administrators

HTML Computer Code Elements


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


Example

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

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

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

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

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;

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

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

Result:

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

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

Tag Description
<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.


Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.