HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Representing Computer Code

There are a number of elements available for marking up computer code using HTML.

  • <code>: For marking up generic pieces of computer code.
  • <var>: For specifically marking up variable names.
  • <kbd>: For marking up keyboard (and other types of) input entered into the computer.
  • <samp>: For marking up the output of a computer program.
  • <pre>: For retaining whitespace (generally code blocks) — if you use indentation or excess whitespace inside your text, browsers will ignore it and you will not see it on your rendered page. If you wrap the text in <pre></pre> tags however, your whitespace will be rendered identically to how you see it in your text editor.

HTML <code> For Computer Code

The HTML <code> element indicate that the text is a short fragment of computer code.

By default, the text is displayed using the browser's default monospace font.

Run code

It is possible to achieve richer effect with CSS:

Run code

HTML <kbd> For Keyboard Input

The HTML <kbd> element defines keyboard input.

By default, the text is displayed using the browser's default monospace font.

Run code

It is possible to achieve richer effect with CSS:

Run code

HTML <samp> For Program Output

The HTML <samp> element defines sample output from a computer program.

By default, the text inside this element is displayed using the browser's default monospace font.

Run code

HTML <var> For Variables

The HTML <var> element represents the name of a variable in a mathematical expression or a programming context.

It's typically presented using an italicized version of the current typeface.

Run code

HTML <pre> For Preformatted text

The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file.

The text is typically rendered using a monospace font. Whitespace inside this element is displayed as written.

Run code

In this example a cow is illustrated using preformatted text characters:

Run code

HTML Computer Code Tags

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