Advertisement
❮ Previous: HTML Responsive Next: HTML Semantic Elements ❯

HTML Computer Code

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


HTML Computer Code Elements

Tags Description
<code> Defines that the enclosed text is source code in a programming language.
<kbd> Defines text as keyboard input.
<span> Defines the span text for styling.
<pre> Defines the enclosed text is preformatted, meaning that spaces, returns, tabs, and other formatting characters are preserved.
<var> Defines a variable.

HTML <code> For Computer Code

The <code> element indicates that the enclosed text is source code in a programming language.

Note: This element is best used for short code fragments because it does not preserve white space.

Example

<code>
c = a + b;
a = 6;
b = 3;
c = ?;
</code>

Try this code ❯


HTML <kbd> For Keyboard Input

The <kbd> inline element logically indicates text as keyboard input.

Example

<p>To copy the selected item press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>

Try this code ❯


Advertisement

HTML <var> For Variables

The <var> element is used to indicate a variable (an identifier that occurs in a programming language or a mathematical expression), with any enclosed text generally rendered in italics.

Example

<p>A simple equation: <var>z</var> = <var>x</var> + <var>y</var></p>

Try this code ❯


HTML <samp> For Program Output

The <samp> logical inline element is used to specifies sample text. Enclosed text generally is rendered in a monospaced font.

By default, most browsers render the contents of <samp> elements in a fixed-width, monospaced font, but you can change that with CSS properties.

If you are looking to mark up programming code, the <code> element would be more appropriate.

If you are looking to indicate user input (e.g. from a keyboard), the <kbd>kbd element is more appropriate.

Note: The samp element is a phrasing-level element. It must not contain block-level elements, but it can contain other phrasing-level elements.

Example

<p>This is <samp>sample</samp> text</p>

Try this code ❯


HTML <pre> For Preformation

The <pre> element is used to specifies that the enclosed text is preformatted, meaning that spaces, returns, tabs, and other formatting characters are preserved.

Example

<pre>This text is formatted
   exactly
      as
         it
      is
typed.</pre>

Try this code ❯

HTML Computer Code Elements

Tags Description
<code> Defines that the enclosed text is source code in a programming language.
<kbd> Defines text as keyboard input.
<span> Defines the span text for styling.
<pre> Defines the enclosed text is preformatted, meaning that spaces, returns, tabs, and other formatting characters are preserved.
<var> Defines a variable.

Note: A complete list of all HTML tags, see HTML Tag Reference.

❮ Previous: HTML Responsive Next: HTML Semantic Elements ❯
Advertisement